/* Kundenportal – ruhiges Layout; für Trees und Assurisk dieselbe Farbwelt (Marineblau als Akzent, Schiefer-Töne), Mandant erkennbar am Logo */
:root {
  --marke: #16233d;            /* Akzent (Treeasy-Marineblau): Linien, Punkte, gefüllte Flächen */
  --marke-dunkel: #16233d;     /* Akzent als Schrift/Link auf hellem Grund */
  --marke-text: #ffffff;       /* Schrift auf Akzentfläche */
  --bg: #f7f8fa;
  --weiss: #ffffff;
  --karte: #dae1e5;
  --karte-hover: #cfd8de;
  --linie: #c9d3d9;
  --reiterleiste: #eef2f5;
  --text: #35505f;
  --text-leise: #4f6677;
  --ok: #2f7d4f;
  --warn: #b45309;
  --fehler: #b42318;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.45;
}
a { color: var(--marke-dunkel); }
.seite { min-height: 100vh; display: flex; flex-direction: column; }
.behaelter { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Kopf */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
/* flex-wrap: ist der Kopf zu schmal (z. B. mit dem Kundenmenü), rutscht die rechte Gruppe in eine zweite Zeile statt die Seite zu verbreitern */
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px;
  max-width: 1120px; margin: 0 auto; padding: 8px 16px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); font-weight: 600; }
.logo img { display: block; width: auto; }
.logo .logo-trees { height: 28px; }
.logo .logo-assurisk { height: 44px; }
.kopf-rechts { display: flex; align-items: center; gap: 18px; font-size: 15px; margin-left: auto; min-width: 0; }
.kopf-rechts a, .kopf-rechts .sprache { color: var(--text); text-decoration: none; }
.kopf-rechts a:hover { color: var(--marke-dunkel); }
.sprache { color: var(--text-leise); }

.benutzermenue { position: relative; }
.benutzermenue summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: var(--radius); }
.benutzermenue summary::-webkit-details-marker { display: none; }
.benutzermenue summary:hover, .benutzermenue[open] summary { background: var(--karte); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--marke); color: var(--marke-text);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.menue-box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 8px 0; }
.menue-box .wer { padding: 8px 16px 10px; border-bottom: 1px solid var(--linie); margin-bottom: 6px; }
.menue-box .wer small { display: block; color: var(--text-leise); }
.menue-box a, .menue-box button { display: block; width: 100%; text-align: left; padding: 9px 16px; background: none; border: 0;
  font: inherit; color: var(--text); text-decoration: none; cursor: pointer; }
.menue-box a:hover, .menue-box button:hover { background: var(--karte); }

/* Kunde wechseln (Konto mit mehreren Kunden) */
.kundenmenue .kunde-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kundenmenue .pfeil { color: var(--text-leise); font-size: 12px; }
.kundenliste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.kundenliste form { margin: 0; }
.kundenliste .kundenwahl { display: block; width: 100%; text-align: left; padding: 12px 16px; }
.kundenliste .kundenwahl small { display: block; color: var(--text-leise); font-weight: 400; }

/* Reiterleiste */
.reiter { background: var(--reiterleiste); border-bottom: 1px solid var(--linie); }
.reiter-innen { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.reiter-innen::-webkit-scrollbar { display: none; }
.reiter a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 14px 14px 12px; color: var(--text);
  text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 500; }
.reiter a:hover { background: var(--weiss); }
.reiter a.aktiv { color: var(--marke-dunkel); background: var(--bg); border-bottom-color: var(--marke); }
.reiter svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--marke); display: inline-block; }
/* Symbole und «Start»-Beschriftung gibt es nur in der unteren Leiste (siehe unten); auf grossen Bildschirmen bleiben die Reiter Text, die Startseite das Haus */
.reiter .r-icon, .reiter .r-kurz, .reiter .r-start .r-text { display: none; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* Handy/Tablet (App und Browser): Hauptnavigation als feste untere Leiste mit Symbol und Name (Daumen-Reichweite, wie bei Apps üblich) */
@media (max-width: 860px) {
  .seite { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .reiter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--weiss); border-top: 1px solid var(--linie); border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom); }
  .reiter-innen { max-width: none; padding: 0; gap: 0; overflow: visible; }
  .reiter a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 1px 7px; font-size: clamp(9px, 2.65vw, 11px); line-height: 1.2;
    font-weight: 500; color: var(--text-leise); border-bottom: 0; border-top: 3px solid transparent; }
  .reiter a.r-start { flex-grow: .75; }   /* «Start» ist kurz; so bleibt mehr Platz für «Rechnungen» und «Mitteilungen» */
  .reiter a:hover { background: none; }
  .reiter a.aktiv { color: var(--marke-dunkel); background: none; border-top-color: var(--marke); font-weight: 600; }
  .reiter .r-icon, .reiter .r-kurz, .reiter .r-start .r-text { display: block; }
  .reiter .r-kurz ~ .r-text { display: none; }   /* «Policen» statt «Versicherungspolicen» (nur wenn der Reiter nicht umbenannt wurde) */
  .reiter svg { width: 24px; height: 24px; }
  .reiter .r-text, .reiter .r-kurz { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* Hinweise (neue Dokumente, ungelesene Mitteilungen) sitzen oben rechts am Symbol */
  .reiter .punkt, .reiter .zaehler { position: absolute; top: 5px; left: calc(50% + 8px); }
  .reiter .punkt { width: 10px; height: 10px; border: 2px solid var(--weiss); }
}

/* Inhalt */
main { flex: 1; padding: 24px 0 40px; }
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 19px; margin: 0 0 10px; }
.untertitel { color: var(--text-leise); margin: 0 0 22px; }
.meldungen { margin: 0 0 16px; display: grid; gap: 8px; }
.meldung { padding: 10px 14px; border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); }
.meldung.ok { border-color: #a7d7b9; background: #eef8f1; }
.meldung.fehler { border-color: #efb4ae; background: #fdf0ee; color: var(--fehler); }
.meldung.info { background: #eef2f7; }

.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Oberer Bereich der Startseite: links Begrüssung und Kacheln, rechts (Desktop) der Kasten «Ihr Berater» bzw. der Kontaktkasten, beginnend auf Höhe der
   Begrüssung. Auf dem Smartphone (und schmalen Fenstern) steht der Kasten direkt unter der Begrüssung, vor den Kacheln. Ohne Kasten füllen die Kacheln die Breite. */
.start-oben { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "kasten" "kacheln"; column-gap: 24px; }
.start-oben .start-kopf { grid-area: kopf; min-width: 0; }
.start-oben .kacheln { grid-area: kacheln; align-self: start; }
.start-oben > aside { grid-area: kasten; margin: 0 0 20px; }
@media (min-width: 981px) {
  .start-oben.mit-kasten { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "kopf kasten" "kacheln kasten"; grid-template-rows: auto 1fr; }
  /* Kasten und Kacheln enden unten auf gleicher Höhe: der Kasten füllt beide Zeilen, die Kacheln die untere Zeile (Grid-Elemente strecken sich) */
  .start-oben > aside { margin: 0; align-self: stretch; }
  .start-oben.mit-kasten .kacheln { align-self: stretch; }
}
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; text-decoration: none;
  color: var(--text); display: block; }
.kachel:hover { border-color: var(--marke); }
.kachel .zahl { font-size: 34px; font-weight: 600; color: var(--marke-dunkel); line-height: 1.1; }
.kachel .titel { font-weight: 600; margin-bottom: 6px; }
.kachel .klein { color: var(--text-leise); font-size: 14px; margin-top: 4px; }

/* Filter */
.filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 14px; }
.filter label { display: grid; gap: 4px; font-size: 13px; color: var(--text-leise); }
select, input[type=text], input[type=email], input[type=password], input[type=number] {
  font: inherit; padding: 9px 10px; border: 1px solid #b9c0c8; border-radius: 6px; background: var(--weiss); color: var(--text); min-width: 170px; }
select:focus, input:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--marke-dunkel); outline-offset: 2px; }
.knopf { font: inherit; display: inline-block; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--marke); background: var(--marke);
  color: var(--marke-text); cursor: pointer; text-decoration: none; font-weight: 500; }
.knopf:hover { filter: brightness(.92); }
.knopf.zweit { background: var(--weiss); color: var(--marke-dunkel); border-color: var(--marke); }
.knopf.klein { padding: 5px 12px; font-size: 14px; }
.nur-mobil { display: none; }

/* Tabellen als Kartenzeilen */
.tabelle { display: grid; gap: 8px; }
.tabellenkopf, .zeile-kopf { display: grid; align-items: center; gap: 12px; padding: 0 16px; }
.tabellenkopf { font-size: 13px; color: var(--text-leise); font-weight: 600; }
.tabellenkopf a { color: inherit; text-decoration: none; padding: 6px 0; }
.tabellenkopf a:hover, .tabellenkopf a.aktiv { color: var(--marke-dunkel); }
.pfeil { margin-left: 4px; font-size: 10px; }
.zeile { background: var(--karte); border-radius: var(--radius); }
.zeile:hover { background: var(--karte-hover); }
.zeile[open] { background: var(--weiss); border: 1px solid var(--linie); }
.zeile-kopf { min-height: 54px; padding-top: 10px; padding-bottom: 10px; list-style: none; cursor: pointer; }
.zeile-kopf::-webkit-details-marker { display: none; }
div.zeile-kopf { cursor: default; }
.zeile-kopf .z { overflow-wrap: anywhere; }
.zeilen-bemerkung { display: block; margin-top: 3px; font-size: 0.85em; color: var(--text-leise); white-space: pre-line; }
.zeile-kopf .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabellenkopf .zahl { text-align: right; }
.chevron { width: 10px; height: 10px; border-right: 2px solid var(--text-leise); border-bottom: 2px solid var(--text-leise);
  transform: rotate(45deg); justify-self: end; margin-right: 4px; transition: transform .15s; }
.zeile[open] .chevron { transform: rotate(-135deg); }
.zeile-detail { padding: 6px 16px 18px; border-top: 1px solid var(--linie); margin: 0 0 0; }
.zeile-detail h3 { font-size: 14px; margin: 14px 0 6px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .03em; }
.detail-liste { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 4px 16px; margin: 0; }
.detail-liste dt { color: var(--text-leise); }
.detail-liste dd { margin: 0; }
.objekt { background: var(--bg); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; }
.objekt strong { display: block; }
.doku-liste { display: grid; gap: 6px; }
.doku-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border-radius: 6px; padding: 6px 12px; }
.doku-eintrag form, .zeile-kopf form { margin: 0; }
.doku-aktionen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Spaltenraster: Die Anzahl sichtbarer Spalten ist konfigurierbar (gestaltung.py), daher gleich breite Spalten je Anzahl
   (spalten-n1 … spalten-n7) plus feste Zusatzspalte (Aufklapp-Pfeil bzw. Herunterladen). Keine Inline-Styles (CSP). */
.spalten-n1 { --sp: 1; --rest: 1; } .spalten-n2 { --sp: 2; --rest: 1; } .spalten-n3 { --sp: 3; --rest: 2; } .spalten-n4 { --sp: 4; --rest: 3; }
.spalten-n5 { --sp: 5; --rest: 4; } .spalten-n6 { --sp: 6; --rest: 5; } .spalten-n7 { --sp: 7; --rest: 6; }
.mit-chevron { grid-template-columns: repeat(var(--sp), minmax(0, 1fr)) 24px; }
.mit-download { grid-template-columns: repeat(var(--sp), minmax(0, 1fr)) 150px; }
/* Policenliste mit Recht «dokumente»: schmale Spalte für das PDF-Symbol der aktuellen Police zwischen den Spalten und dem Pfeil */
.aw-1 { --aw: 36px; } .aw-2 { --aw: 72px; } .aw-3 { --aw: 108px; }  /* Breite der Symbolspalte: PDF, Schaden melden, Nachricht (je 36px) */
.mit-chevron.mit-pdf { grid-template-columns: repeat(var(--sp), minmax(0, 1fr)) var(--aw, 36px) 24px; }
/* Policenliste (Klasse erst-breit): erste Spalte fett und breiter (Branchenname bricht nie mitten im Wort um, ausser bei Platzmangel am Wortende);
   die übrigen Spalten teilen sich den Rest gleichmässig. Bei nur einer Spalte bleibt das normale Raster. */
.erst-breit .mit-chevron { grid-template-columns: minmax(min-content, 1.6fr) repeat(var(--rest), minmax(0, 1fr)) 24px; }
.erst-breit .mit-chevron.mit-pdf { grid-template-columns: minmax(min-content, 1.6fr) repeat(var(--rest), minmax(0, 1fr)) var(--aw, 36px) 24px; }
.erst-breit .spalten-n1.mit-chevron { grid-template-columns: minmax(0, 1fr) 24px; }
.erst-breit .spalten-n1.mit-chevron.mit-pdf { grid-template-columns: minmax(0, 1fr) var(--aw, 36px) 24px; }
.erst-breit .zeile-kopf > .z:first-child { font-weight: 600; overflow-wrap: break-word; hyphens: none; }
.erst-breit .zeile-kopf > .z:first-child .zeilen-bemerkung { font-weight: 400; }
.pdf-feld { display: flex; justify-content: center; }
.pdf-platz { display: inline-block; width: 36px; height: 36px; flex: none; }  /* hält die Plätze der Symbole frei, wenn eine Police kein PDF hat */
.pdf-feld .pdf-knopf { text-decoration: none; }
.pdf-knopf { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--marke-dunkel); cursor: pointer; }
.pdf-knopf:hover, .pdf-knopf:focus-visible { background: var(--weiss); border-color: var(--marke); }
.pdf-knopf svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pdf-knopf svg text { fill: currentColor; stroke: none; font: 700 6.4px/1 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: .02em; }
/* Dateifeld mit Ablagefläche (Schaden melden): das echte Feld bleibt im Formular, ist aber nur noch für Tastatur/Screenreader erreichbar */
.dropzone { border: 2px dashed var(--linie); border-radius: var(--radius); padding: 22px 16px; text-align: center; color: var(--text-leise); background: var(--weiss); cursor: pointer; }
.dropzone:hover, .dropzone.dropzone-aktiv { border-color: var(--marke); color: var(--marke-dunkel); background: var(--reiterleiste); }
.dropzone-eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone-eingabe:focus + .dropzone, .dropzone-eingabe:focus-visible ~ .dropzone { border-color: var(--marke); }
.dropzone-fehler { margin: 6px 0 0; color: #a12b2b; font-size: 14px; }
.dropzone-fehler:empty { display: none; }
.dropzone-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.dropzone-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--linie); font-size: 15px; }
.dropzone-liste:empty { display: none; }
.dropzone-weg { border: 0; background: none; color: var(--marke-dunkel); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
/* Deckungen einer Police: zweispaltige Tabelle (Deckung / Wert) in der Reihenfolge von Treeasy, Ueberschriften und Einrueckung je Ebene */
.deckungen { width: 100%; border-collapse: collapse; font-size: 15px; }
.deckungen th, .deckungen td { padding: 6px 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.deckungen th { width: 42%; font-weight: 400; color: var(--text-leise); }
.deckungen td { overflow-wrap: anywhere; }
.deckungen .haken { color: var(--ok); font-weight: 700; font-size: 17px; line-height: 1; }
.deckungen .deckung-kopf th { width: auto; font-weight: 500; color: var(--text); background: var(--reiterleiste); }
/* Hauptdeckungen (oberste Ebene) und Überschriftszeilen aller Ebenen im hellen Blau der Reiterleiste (--reiterleiste, heller als die Policenzeilen), Unterdeckungen bleiben weiss */
.deckungen tr.tiefe-0 th, .deckungen tr.tiefe-0 td, .deckungen tr.deckung-kopf th { background: var(--reiterleiste); color: var(--text); }
/* in Treeasy bei der Deckung vorgegebene Hervorhebung (z. B. Differenzdeckung): gleiches Blau wie die übrigen Hervorhebungen (Hauptdeckungen, Überschriften) */
.deckungen tr.deckung-hervor th, .deckungen tr.deckung-hervor td { background: var(--reiterleiste); color: var(--text); }
.deckungen .deckung-kategorie th { padding-top: 12px; font-size: 16px; border-bottom: 2px solid var(--linie); }
.deckungen .tiefe-1 th { padding-left: 28px; } .deckungen .tiefe-2 th { padding-left: 46px; } .deckungen .tiefe-3 th { padding-left: 64px; }
.deckungen .tiefe-4 th { padding-left: 82px; } .deckungen .tiefe-5 th { padding-left: 100px; }
.deckungen .deckung-kategorie.tiefe-0 th { padding-left: 10px; }
/* Kategorien einer Police (BVG-Plankategorien, Objekte) ein- und ausklappbar: Kopfzeile wie die frühere Kategorie-Überschrift, Pfeil rechts */
.deckung-gruppe { margin-top: 12px; }
.deckung-gruppe > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 10px 10px; font-size: 16px; font-weight: 500; color: var(--text); background: var(--reiterleiste); border-bottom: 2px solid var(--linie); }
.deckung-gruppe > summary::-webkit-details-marker { display: none; }
.deckung-gruppe > summary .gruppe-pfeil { width: 10px; height: 10px; flex-shrink: 0; margin-right: 4px; border-right: 2px solid var(--text-leise); border-bottom: 2px solid var(--text-leise);
  transform: rotate(45deg); transition: transform .15s; }
.deckung-gruppe[open] > summary .gruppe-pfeil { transform: rotate(-135deg); }
.neu { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--marke); color: var(--marke-text); margin-left: 6px; vertical-align: middle; }
.status { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--weiss); border: 1px solid var(--linie); font-size: 14px; }
.status.offen { border-color: var(--warn); color: var(--warn); }
.status.aktiv, .status.bezahlt { border-color: var(--ok); color: var(--ok); }
/* Eingangsstatus der Rechnungen aus Kundensicht: «Eingegangen» neutral, «Angesehen» Akzent, «Heruntergeladen» grün */
.status.angesehen { border-color: var(--marke); color: var(--marke-dunkel); }
.status.heruntergeladen { border-color: var(--ok); color: var(--ok); }
/* Schadenstatus: «Gemeldet» neutral (Grundform), «In Bearbeitung» hervorgehoben, «Abgeschlossen» gedämpft */
.status.in-bearbeitung { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.status.abgeschlossen { background: var(--bg); color: var(--text-leise); }
/* Schaden melden (Etappe D2): Status der eigenen Meldungen aus Kundensicht, nie ein Bearbeitungsstand */
.status.meldung-uebermittelt { border-color: var(--warn); color: var(--warn); }
.status.meldung-eingegangen { border-color: var(--ok); color: var(--ok); }
.zurueck { margin: 0 0 12px; font-size: 14px; }
h1 + .karte-text { margin-top: 14px; margin-bottom: 14px; }
.leer { background: var(--weiss); border: 1px dashed var(--linie); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--text-leise); }

.blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; color: var(--text-leise); font-size: 14px; }
.seiten { display: flex; gap: 4px; flex-wrap: wrap; }
.seiten a, .seiten span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 18px; text-decoration: none; border: 1px solid var(--linie); background: var(--karte); color: var(--text); }
.seiten a:hover { border-color: var(--marke); }
.seiten .aktuell { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.seiten .aus { color: #8a9ba6; }

/* Formulare / Anmeldung */
.karte-form { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px; max-width: 480px; margin: 24px auto; }
.karte-form.breit { max-width: 640px; }
.passkey-oder { text-align: center; margin: 18px 0 10px; }
.passkey-anmeldung .knopf, .passkey-einrichten .knopf { width: 100%; }
.passkey-fehler { margin: 10px 0; }
.passkey-liste { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.passkey-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--linie); border-radius: var(--radius); }
.passkey-liste small { color: var(--text-leise); }
/* Betrachter (PDF/Bild) für die installierte App */
.betrachter-leiste { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0;
  background: var(--bg); border-bottom: 1px solid var(--linie); margin-bottom: 12px; }
.betrachter-leiste form { margin: 0; }
.betrachter-titel { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.betrachter-seite { color: var(--text-leise); font-size: 14px; }
.betrachter-zoom { display: inline-flex; gap: 6px; }
.betrachter-seiten { overflow-x: auto; display: flex; flex-direction: column; align-items: flex-start; }
.betrachter-rahmen { flex: none; margin: 0 auto 12px; background: var(--weiss); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.betrachter-rahmen canvas { display: block; }
.betrachter-bild { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.karte-form label { display: grid; gap: 4px; margin-bottom: 14px; font-weight: 500; }
.karte-form input { width: 100%; }
.karte-form .hinweis, .hinweis { color: var(--text-leise); font-size: 14px; white-space: pre-line; }
.untertitel + .hinweis { margin: -12px 0 18px; }
/* Texte aus der Gestaltung (Begrüssung, Kontakt): Zeilenumbrüche bleiben erhalten, alles ist HTML-maskiert */
.begruessung, .kontakt-text { white-space: pre-line; }
.begruessung { margin: 0 0 20px; max-width: 760px; }
.kontakt-kasten { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 20px; }
.kontakt-kasten h2 { margin: 0 0 8px; }
.kontakt-kasten p { margin: 0 0 4px; overflow-wrap: anywhere; }
.kontakt-kasten .kontakt-name { font-weight: 600; }
/* Kasten «Ihr Berater» (persönlicher Berater mit Foto): Foto links, Angaben rechts; auf dem Smartphone bleibt das Foto links und umbricht nie unter den Text */
.berater-kasten { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 20px; }
.berater-kasten h2 { margin: 0 0 12px; }
.berater-kasten p { margin: 0 0 4px; overflow-wrap: anywhere; }
.berater-kasten .kontakt-name { font-weight: 700; }
.berater-kasten .berater-funktion, .berater-kasten .berater-titel { color: var(--text-leise); }
.berater-kasten .kontakt-text { margin-top: 12px; }
.berater-inhalt { display: flex; align-items: center; gap: 16px; }
.berater-angaben { min-width: 0; }
.berater-foto { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--reiterleiste);
  border: 1px solid var(--linie); }
.berater-foto.platzhalter { display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600;
  color: var(--marke-text); background: var(--marke); border-color: var(--marke); letter-spacing: .02em; }
@media (max-width: 480px) {
  .berater-foto { width: 72px; height: 72px; }
  .berater-foto.platzhalter { font-size: 24px; }
}
/* Formular «Schaden melden»: linksbündige Karte, alle Felder in voller Breite (auch Auswahl, Datum, Textfeld, Datei) */
.karte-form.meldeformular { margin: 14px 0 28px; max-width: 720px; }
.meldeformular input, .meldeformular select, .meldeformular textarea { font: inherit; width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #b9c0c8;
  border-radius: 6px; background: var(--weiss); color: var(--text); }
.meldeformular textarea { resize: vertical; }
.meldeformular input[type=file] { padding: 8px; }
.meldeformular textarea:focus { outline: 2px solid var(--marke-dunkel); outline-offset: 2px; }
.feld-hinweis { font-weight: 400; font-size: 13px; color: var(--text-leise); }
.formular-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 0; }
.schaden-melden-link { margin: 0 0 20px; }
.beschreibung { white-space: pre-line; overflow-wrap: anywhere; }
/* Liste «Ihre Meldungen» im Raster der Kartenzeilen (Datum, Police, Beschreibung, Dateien, Status); auf dem Smartphone greift die Zweispaltigkeit unten */
.meldeliste { margin: 8px 0 0; }
.spalten-meldungen { grid-template-columns: 110px minmax(0, 1.3fr) minmax(0, 2.2fr) 70px minmax(0, 1.5fr); }
.fehlerliste { margin: 0 0 14px; padding: 10px 14px 10px 30px; border-radius: var(--radius); background: #fdf0ee; border: 1px solid #efb4ae; color: var(--fehler); }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr svg { width: 280px; max-width: 100%; height: auto; aspect-ratio: 1; background: #fff; shape-rendering: crispEdges; image-rendering: pixelated; }
.geheimnis { display: block; padding: 10px; background: var(--bg); border-radius: 6px; letter-spacing: .08em; text-align: center; font-size: 17px; overflow-wrap: anywhere; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.codes li { background: var(--bg); padding: 8px; text-align: center; border-radius: 6px; font-family: Consolas, "Courier New", monospace; font-size: 16px; letter-spacing: .08em; }
.karte-text { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; max-width: 760px; }
.karte-text h2 { margin-top: 22px; }
.karte-text ul { padding-left: 20px; }
.rechtstabelle { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.rechtstabelle th, .rechtstabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.kopf-schlicht .kopf-innen { justify-content: flex-start; }

/* Stichtag, Totale, Kennzahlen/Diagramme (Erweiterung «stichtag»); Diagramme sind Inline-SVG, Farben stehen als Attribute im SVG */
/* Stichtag-Leiste: Karte über die ganze Breite, Titelzeile und darunter gleichmässig verteilte Spalten (Stichtag, Schnellwahl, Vertragsübersicht); auf dem Smartphone untereinander */
.stichtag-leiste { margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 32px; align-items: start;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 20px; }
.stichtag-leiste .stichtag-stand { margin: 0; grid-column: 1 / -1; }
.stichtag-spalte { min-width: 0; }
.stichtag-spalte .spaltenkopf { display: block; font-size: 13px; color: var(--text-leise); margin: 0 0 6px; }
.stichtag-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 8px; }
.stichtag-form label { display: grid; gap: 4px; font-size: 13px; color: var(--text-leise); }
.stichtag-form input[type=date] { font: inherit; padding: 9px 10px; border: 1px solid #b9c0c8; border-radius: 6px; background: var(--weiss);
  color: var(--text); min-width: 170px; }
.stichtag-leiste p { margin: 0 0 6px; }
.schnellwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.schnellwahl a { padding: 5px 12px; border-radius: 16px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); text-decoration: none; font-size: 14px; }
.schnellwahl a:hover { border-color: var(--marke); }
.schnellwahl a.aktiv { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
/* Vertragsübersicht: beide Knöpfe gleich gross (volle Spaltenbreite, untereinander), Symbol links (Inline-SVG, currentColor, gleiche Grösse und Strichstärke) */
.aktionen { display: grid; gap: 8px; }
.knopf-icon { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.knopf-icon svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.knopf-icon svg text { fill: currentColor; stroke: none; font: 700 6.4px/1 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: .02em; }
.gruppen-titel { font-size: 16px; margin: 10px 0 0; padding: 0 4px; color: var(--marke-dunkel); }
.status.ausser-kraft { border-color: var(--warn); color: var(--warn); font-size: 12px; }
.totale { margin-top: 20px; }
/* Totalleiste im Spaltenraster der Liste (spalten-nN, mit-chevron): «Anzahl Policen» links, das Prämientotal rechtsbündig unter der Spalte
   «Jahresprämie» (total-spN = Position dieser Spalte); ohne Prämienspalte (total-rand) am rechten Rand. 1 px weniger Innenabstand wegen des Rahmens. */
.totalzeile { display: grid; align-items: start; gap: 6px 12px; margin: 0 0 6px; padding: 12px 15px; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius); }
.totalzeile > div { display: grid; gap: 2px; min-width: 0; grid-row: 1; }
.totalzeile dt { color: var(--text-leise); font-size: 13px; }
.totalzeile dd { margin: 0; font-weight: 600; color: var(--marke-dunkel); font-variant-numeric: tabular-nums; }
.totalzeile .total-anzahl { grid-column: 1; }
.totalzeile .total-anzahl-nach { grid-column: 2; }
.totalzeile .total-anzahl-unten { grid-row: 2; }
.totalzeile .total-praemie { text-align: right; justify-items: end; white-space: nowrap; }
.totalzeile .total-sp1 { grid-column: 1; } .totalzeile .total-sp2 { grid-column: 2; } .totalzeile .total-sp3 { grid-column: 3; }
.totalzeile .total-sp4 { grid-column: 4; } .totalzeile .total-sp5 { grid-column: 5; } .totalzeile .total-sp6 { grid-column: 6; }
.totalzeile .total-sp7 { grid-column: 7; }
.totalzeile .total-rand { grid-column: 1 / -1; }
.aufstellung { margin-top: 8px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.aufstellung summary { cursor: pointer; padding: 10px 16px; font-weight: 500; }
.aufstellung .legende { margin: 0 16px 14px; width: calc(100% - 32px); }
.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.diagramm { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 20px; min-width: 0; }
.diagramm h2 { font-size: 17px; }
.diagramm-innen { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.donut { width: 160px; height: 160px; flex: none; }
.donut circle:hover { opacity: .8; }
/* Donuts stehen oben bündig (gleiche Höhe in allen Karten); die Legende (.legende-rahmen) nimmt ihre natürliche Breite und rutscht bei Platzmangel unter den Donut */
.legende { border-collapse: collapse; font-size: 14px; }
/* Legende der Donut-Diagramme: Namen in einer Zeile (kein Umbruch), nichts wird abgeschnitten. Ist die Karte zu schmal, rutscht die Legende unter den
   Donut (flex-wrap); reicht auch dann die Breite nicht, scrollt sie waagrecht im Rahmen, statt die Karte zu verbreitern. Erst auf dem Smartphone wird umgebrochen. */
.legende-rahmen { flex: none; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
.legende-rahmen .legende { width: 100%; }
.legende-rahmen .legende th:first-child { white-space: nowrap; overflow-wrap: normal; hyphens: none; }
.legende th, .legende td { padding: 4px 0 4px 8px; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; vertical-align: baseline; }
.legende th:first-child { padding-left: 0; overflow-wrap: break-word; hyphens: auto; }
.legende-rahmen .legende td { padding-left: 16px; }
.legende thead th { font-size: 13px; color: var(--text-leise); font-weight: 600; }
.legende .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.legende tfoot th, .legende tfoot td { font-weight: 600; border-bottom: 0; }
.legende .farbe { display: inline-block; vertical-align: -1px; margin-right: 8px; }
@media print { .donut { width: 120px; height: 120px; } .diagramm, .totalzeile, .aufstellung { break-inside: avoid; } }

/* Konsolidierte Auswertung über mehrere Kunden (/auswertung): Total-Kacheln, Tabellen im Stil der Legenden, Kreuztabelle scrollt waagrecht */
.auswertung-total { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 8px; padding: 14px 18px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.auswertung-total > div { display: grid; gap: 2px; min-width: 0; }
.auswertung-total dt { color: var(--text-leise); font-size: 13px; }
.auswertung-total dd { margin: 0; font-weight: 600; font-size: 20px; color: var(--marke-dunkel); font-variant-numeric: tabular-nums; }
.auswertung-block { margin: 20px 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 20px; }
.auswertung-block h2 { font-size: 17px; margin: 0 0 8px; }
.auswertung-block .hinweis { margin: 8px 0 0; }
.tabelle-scroll { max-width: 100%; overflow-x: auto; }
.auswertung-tabelle { width: 100%; }
.auswertung-tabelle th:first-child { white-space: nowrap; }
.auswertung-kreuz thead th { vertical-align: bottom; }
.auswertung-kreuz thead th.zahl { white-space: normal; min-width: 90px; }
.auswertung-tabelle form.inline { display: inline; margin: 0; }
.auswertung-prozent { display: block; font-size: 14px; font-weight: 400; color: var(--text-leise); }
.auswertung-tabelle tr.nur-vorjahr th, .auswertung-tabelle tr.nur-vorjahr td { color: var(--text-leise); font-style: italic; }
.auswertung-tabelle td.zahl { white-space: nowrap; }
.link-knopf { background: none; border: 0; padding: 0; font: inherit; color: var(--marke); text-decoration: underline; cursor: pointer; }
.link-knopf:hover { color: var(--marke-dunkel); }

/* Fuss */
.fuss { border-top: 1px solid var(--linie); background: var(--weiss); font-size: 14px; color: var(--text-leise); }
.fuss-innen { max-width: 1120px; margin: 0 auto; padding: 14px 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { color: var(--text-leise); margin-right: 18px; }

@media (max-width: 860px) {
  .kacheln { grid-template-columns: 1fr; }
  .tabellenkopf { display: none; }
  .nur-mobil { display: grid; }
  .zeile-kopf { grid-template-columns: 1fr 1fr !important; row-gap: 8px; position: relative; padding-right: 40px; }
  .zeile-kopf .z::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 400; color: var(--text-leise); }
  .zeile-kopf .zahl { text-align: left; }
  .chevron { position: absolute; right: 16px; top: 22px; margin: 0; }
  /* Symbole (PDF, Schaden, Nachricht): kein Platz im Raster reservieren (das drückte die Spalten zusammen und Texte überlagerten sich),
     sondern rechts unten auf der Höhe der Zeile «Status» (eigene Zeile über die ganze Breite). Ohne letzte Spalte «Status»: eigene Zeile unten. */
  .zeile-kopf .z-status { grid-column: 1 / -1; min-height: 40px; }
  .pdf-feld { position: absolute; right: 44px; bottom: 8px; }
  .zeile-kopf.aktionen-unten .pdf-feld { position: static; grid-column: 1 / -1; justify-self: end; margin-right: -4px; }
  .deckungen th { width: 50%; }
  .zeile-kopf .dl { grid-column: 1 / -1; }
  .detail-liste { grid-template-columns: 1fr; }
  .detail-liste dt { margin-top: 6px; }
  .kopf-rechts { gap: 10px; }
  .filter label, .filter select { width: 100%; }
  .filter { align-items: stretch; }
  .kennzahlen { grid-template-columns: 1fr; }
  .stichtag-form { align-items: stretch; }
  .stichtag-form label, .stichtag-form input[type=date] { width: 100%; }
  /* Totalleiste: Anzahl links, Prämientotal rechts nebeneinander (die Tabelle ist hier eine Kartenliste ohne Spaltenraster) */
  .totalzeile { grid-template-columns: 1fr auto !important; }
  .totalzeile > div { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 600px) {
  /* erst auf dem Smartphone dürfen die Namen der Diagramm-Legende umbrechen */
  .legende-rahmen .legende th:first-child { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .logo .logo-trees { height: 22px; }
  .logo .logo-assurisk { height: 36px; }
  .kopf-rechts .sprache { display: none; }
  .benutzermenue .name { display: none; }
  .kundenmenue .kunde-name { max-width: 150px; }
  .karte-form { margin: 12px 0; padding: 20px; }
  h1 { font-size: 22px; }
}
.visuell-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Zähler der ungelesenen Mitteilungen am Reiter (reiner Text, kein Inline-Style) */
.reiter .zaehler { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--marke); color: var(--marke-text); font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; }
/* Mitteilungen Kunde ↔ Berater: Verlauf als Liste von Karten, Nachrichten des Kunden mit Akzentlinie, Antworten des Beraters weiss */
.verlauf { display: grid; gap: 12px; margin: 8px 0 24px; max-width: 760px; }
.verlauf-sprung { margin: 0 0 8px; font-size: 14px; }
.nachricht { background: var(--karte); border-radius: var(--radius); padding: 12px 16px; border-left: 4px solid var(--marke); overflow-wrap: anywhere; }
.nachricht.berater { background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--ok); }
.nachricht.neu { box-shadow: 0 0 0 2px var(--marke); }
.nachricht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 6px; }
.nachricht-zeit { color: var(--text-leise); font-size: 14px; }
.nachricht-kopf .status { font-size: 12px; }
.status.neu { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.nachricht-text { margin: 0; white-space: pre-line; }
.nachricht-bezug { margin: 8px 0 0; color: var(--text-leise); font-size: 14px; }
.nachricht-dateien { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.nachricht-dateien form { margin: 0; display: inline; }
.gelesen-form { display: inline; margin-left: 6px; }
.gelesen-form .datei-knopf { font-size: 12px; font-weight: 400; }
.gelesen-form.ungelesen .datei-knopf { color: var(--text-leise); }
.alle-gelesen { margin: 0 0 12px; }
.datei-knopf { border: 0; background: none; padding: 0; font: inherit; color: var(--marke-dunkel); text-decoration: underline; cursor: pointer; text-align: left; }
.datei-groesse { color: var(--text-leise); font-size: 14px; }
.meldeformular h2 { margin-top: 0; }
/* Nachtrag zu einer Schadenmeldung / einem Schaden (Etappe D3b): Dateinamen der Meldung und Verlauf der Nachträge (Karten wie bei den Mitteilungen) */
.dateinamen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.nachtraege { margin: 24px 0 0; }