/* Palette uebernommen aus compension-strecke_50.html, damit der Mitgliederbereich zur Marke passt.
   Typografie 10.07.2026 an compension.de angeglichen (Nutzer-Wunsch: "Gesamtoptik zu verspielt,
   fettgedruckte Schriften zu krass, alles etwas gross") - dort: Schriftart Manrope (per Google
   Fonts geladen, siehe inc/header.php), Ueberschriften/Buttons/Werte max. font-weight:600 statt
   700/800 (nur winzige Grossbuchstaben-Eyebrow-Labels <=12px behalten 700 fuer Lesbarkeit), sowie
   insgesamt etwas kleinere Schriftgroessen. "Muller" bleibt als erste Praeferenz stehen (falls
   irgendwann lizenziert/lokal installiert), faellt aber praktisch auf Manrope zurueck. */
:root{
  /* Nutzer-Meldung 17.07.2026 ("es fehlt mir kontrast - das ist schwer lesbar"): --muted war mit
     #6E6E68 auf Weiss nur ~4,6:1 (grenzwertig, v.a. bei kleinen Uppercase-Titeln/Feld-Labels),
     --line mit #CFCFC3 liess leere Eingabefelder fast verschwinden. Beide dunkler:
     --muted #565049 ~7:1, --line #B7B7AB deutlich sichtbarer. */
  --ink:#1D1D1B; --ink-soft:#33332F; --muted:#565049;
  --pistachio:#D3D800; --pistachio-deep:#A9AE00; --pistachio-pale:#EFF2A8;
  --paper:#FFFFFF; --panel:#F7F6F7; --line:#B7B7AB;
  --error:#B3261E; --ok:#2E7D32;
  --sans:"Muller","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--panel);color:var(--ink);font-family:var(--sans);line-height:1.5}
/* Scrollbar-Gutter dauerhaft reservieren (Nutzer 13.08.2026): sonst verschiebt das Erscheinen/
   Verschwinden der vertikalen Scrollbar beim Reiter-Wechsel in der Personenakte die Layoutbreite
   (~15px) und die Kopfzeile bricht um. */
html{scrollbar-gutter:stable}
/* Nutzer-Wunsch 13.08.2026: „ich mag verlinkte unterstrichene textlinks nicht [...] einheitlich
   überall" - Links werden nirgends unterstrichen (auch nicht der Browser-Default für klassenlose
   <a>). Affordanz über Farbe/Gewicht/Icon-Buttons, nie über Unterstrich. */
a{text-decoration:none}
h1,h2,h3,h4,h5,h6{font-weight:600}
/* Nutzer-Meldung 10.07.2026: "die Seitenränder auf dem Dashboard zwischen dem Rand und der
   Sidebar sind noch sehr breit" - .wrap zentrierte sich bisher per margin:0 auto innerhalb von
   .app-main (voller Restbreite neben der Sidebar), auf breiten Bildschirmen blieb dadurch links
   UND rechts viel toter Raum. Jetzt links buendig direkt neben der Sidebar (margin:0 statt auto)
   und deutlich breiter (1080px -> 1400px), damit Inhalte den verfuegbaren Platz besser nutzen. */
.wrap{max-width:1400px;margin:0;padding:16px 22px 70px}

.topbar{background:var(--paper);border-bottom:1.5px solid var(--ink)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.brand{font-weight:600;font-size:14px}
.brand__sub{font-weight:600;color:var(--muted);margin-left:6px;font-size:13px;vertical-align:middle}
.brand-logo{height:26px;width:auto;vertical-align:middle}
.brand-logo--mobile{height:22px}

/* App-Shell mit Sidebar (angelehnt an die Sidebar/Tabs-Optik des Automators), nur fuer
   eingeloggte Seiten - siehe inc/header.php/footer.php.
   Zwei-Sidebar-Layout (10.07.2026, Automator-Screenshot): .sidebar-group buendelt die PERMANENTE
   Bereichs-Sidebar (immer da) und optional eine zweite, kontextabhaengige .sidebar--sub (Firma/
   Person) - beide gleichzeitig sichtbar, nicht ausgetauscht. display:contents auf Desktop, damit
   beide <aside>s direkt als Flex-Kinder von .app-shell nebeneinander liegen; im Mobile-Media-Query
   wird .sidebar-group selbst zum ausklappbaren Off-Canvas-Panel (beide Spalten rutschen gemeinsam
   rein/raus, ein Toggle reicht). */
.app-shell{display:flex;align-items:flex-start;min-height:100vh}
.sidebar-group{display:contents}
/* Nutzer 13.08.2026: „ich möchte den rechten rand in allen tabs gleich haben" - der Haupt-Content
   füllte bisher fixe max-width:1400px und reichte dadurch je nach zweiter Sidebar (sidebar--sub)
   unterschiedlich weit nach rechts. Jetzt füllt er die verbleibende Flex-Breite → der rechte Rand
   endet überall an derselben Stelle, egal ob ein Sub-Sidebar vorhanden ist. */
.app-shell > main.wrap{flex:1 1 auto;min-width:0;max-width:none}
/* Nutzer-Meldung 11.09.2026 („hat für beide tabs nicht funktioniert", zur vollen Breite der
   Abrechnungs-Tabs): Die Regel darüber lief seit dem Umbau des Seitenrahmens ins Leere. Der
   Inhalt liegt nicht mehr direkt in .app-shell, sondern in <div class="app-main"> - der
   Kindselektor traf also nichts, und .wrap blieb bei max-width:1400px stehen. Auf einem breiten
   Bildschirm (gemessen: Fenster 2200px, .app-main 1970px, Inhalt 1400px) blieben rechts 570px
   tot liegen, auf JEDER Seite, nicht nur in der Abrechnung.
   Deshalb hier derselbe Verzicht auf die Breitenbegrenzung für die tatsächliche Verschachtelung.
   Beide Selektoren bleiben stehen: der obere gilt weiter, falls eine Seite den Inhalt ohne
   .app-main direkt in die Shell hängt. */
.app-main > main.wrap{max-width:none}
.sidebar{width:230px;flex:0 0 230px;background:var(--paper);border-right:1.5px solid var(--ink);
  display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
/* Nutzer-Meldung 11.09.2026: „die sidebar 2 ist zu schmal - Verwaltungseinheiten wird
   abgeschnitten". Bei 210px blieben nach Polster, Symbol und Abstand 156px für die Beschriftung;
   „Verwaltungseinheiten" braucht in der Hausschrift mehr und lief über die Kante hinaus - wo es
   der weisse Inhaltsbereich verdeckte, was wie ein Abschneiden aussah.
   Gemessen (Systemschrift): 158px standen zur Verfügung, 144px waren nötig - 10 Prozent Luft,
   und die Hausschrift Muller/Manrope ist breiter als die Systemschrift. Mit 250px sind es 168px
   gegen 144px. */
.sidebar--sub{width:250px;flex:0 0 250px}
/* Zweite Absicherung: Ein einzelnes langes Wort bricht jetzt um, statt aus der Spalte zu laufen -
   bei „normal" umbricht nur an Leerzeichen, und die längsten Tabs sind Komposita ohne eines. */
.sidebar__label{min-width:0;overflow-wrap:anywhere}
.sidebar__brand{margin:0 0 26px;padding:0 10px}
.sidebar__brand-logo{display:block;height:30px;width:auto;max-width:100%}
.sidebar__brand-sub{display:block;font-weight:600;color:var(--muted);font-size:11.5px;margin-top:6px}
.sidebar__ctx{padding:0 10px 14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.sidebar__ctx-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 10px}
.sidebar__ctx-title{font-weight:600;font-size:15px;margin:0;line-height:1.25;word-break:break-word}
.sidebar__ctx-sub{font-size:12px;color:var(--muted);margin:3px 0 0;word-break:break-word}
.sidebar__nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar__link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--ink-soft);text-decoration:none;font-size:14px;font-weight:600}
.sidebar__link:hover{background:var(--panel)}
.sidebar__link--active{background:var(--pistachio);color:var(--ink)}
.sidebar__icon{width:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft)}
.sidebar__link--active .sidebar__icon{color:var(--ink)}
.sidebar__icon svg{display:block}
.sidebar__foot{border-top:1px solid var(--line);padding:12px 10px 0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.sidebar__foot a{color:var(--ink);font-weight:600;text-decoration:none}
.sidebar__foot a:hover{text-decoration:none}
.sidebar__user{color:var(--muted)}
.sync-badge{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:8px;background:var(--panel);font-size:12.5px}
.sync-badge:hover{text-decoration:none!important;background:var(--pistachio)}
.sync-badge__dot{width:7px;height:7px;border-radius:50%;background:#EA8C1E;flex:0 0 auto;animation:sync-badge-pulse 1.4s ease-in-out infinite}
.sync-badge--error .sync-badge__dot{background:var(--error);animation:none}
.sync-badge--done .sync-badge__dot{background:var(--ok);animation:none}
@keyframes sync-badge-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Nutzer-Wunsch 11.07.2026: "nicht in einem feld untereinander, sondern in einer statusleiste" -
   KI-Leistungsanalyse (Tarif-Detail, Leistungen-Tab): EINE Zeile, die ihren Text laufend ersetzt
   (statt eines wachsenden Log-Kastens), wie ein Statusbalken. Punkt pulsiert waehrend des Laufs,
   gleiche Animation wie .sync-badge__dot oben. */
.ai-status-bar{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--paper);font-family:monospace;font-size:12px}
.ai-status-bar__dot{width:7px;height:7px;border-radius:50%;background:var(--pistachio-deep);
  flex:0 0 auto;animation:sync-badge-pulse 1.4s ease-in-out infinite}
.ai-status-bar__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ai-status-bar--error{border-color:var(--error)}
.ai-status-bar--error .ai-status-bar__dot{background:var(--error);animation:none}
.ai-status-bar--done{border-color:var(--ok)}
.ai-status-bar--done .ai-status-bar__dot{background:var(--ok);animation:none}

.app-main{flex:1;min-width:0}
.topbar-mobile{display:none;align-items:center;gap:12px;padding:12px 16px;background:var(--paper);border-bottom:1.5px solid var(--ink)}
#sidebarToggle{background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;width:36px;height:36px;font-size:16px;cursor:pointer}

@media(max-width:900px){
  .sidebar-group{display:flex;position:fixed;left:0;top:0;bottom:0;z-index:50;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:2px 0 16px rgba(0,0,0,.18);
    max-width:92vw;overflow-x:auto}
  .sidebar-group.sidebar--open{transform:translateX(0)}
  .sidebar,.sidebar--sub{height:auto;min-height:100%;position:static}
  .topbar-mobile{display:flex}
}

/* Kennzahlen-Dashboard (KPI-Karten + Donut-Charts, reine CSS conic-gradient-Donuts ohne
   externe Chart-Library - siehe inc/Charts.php). */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}
/* Nutzer-Meldung 26.07.2026 ("die 6 kacheln ohne diagramm bitte gleich groß machen") - .kpi-card
   ist NICHT selbst das Grid-Item (StandortModal::renderKpiTiles() wrappt jede Kachel zusaetzlich
   in ein onclick-<div> fuer den Zoom-Popup, siehe dort) - Grid-Stretch (Standardverhalten) macht
   also nur den AEUSSEREN Wrapper gleich hoch, .kpi-card selbst blieb bisher auf Inhaltshoehe und
   fiel je nach Laenge des Untertexts (1 vs. 2 Zeilen) unterschiedlich hoch aus. height:100% laesst
   die Karte die gestreckte Wrapper-Hoehe ausfuellen. */
.kpi-card{border:1.5px solid var(--ink);border-bottom-width:3px;border-bottom-color:var(--pistachio);
  border-radius:var(--r);padding:16px 18px;background:var(--paper);height:100%;box-sizing:border-box}
.kpi-card__l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px}
.kpi-card__v{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0;color:var(--ink)}
.kpi-card__s{font-size:12.5px;color:var(--muted);margin:5px 0 0}

/* Icon-Leiste+Uhr (inc/header.php, nur Agentur-/Berater-Ansicht) - Nutzer-Wunsch 10.07.2026:
   "diese Leiste soll permanent sichtbar sein, auch wenn ich die Tabs wechsle". Stand urspruenglich
   nur auf agentur-dashboard.php INNERHALB von .wrap, jetzt im gemeinsamen Seitenrahmen VOR
   <main class="wrap"> auf jeder Seite - braucht deshalb eigenes Padding statt das von .wrap zu
   erben, plus sticky/Hintergrund, damit sie beim Scrollen sichtbar bleibt (wie die Sidebar auch). */
/* Nutzer-Wunsch 20.07.2026: "die statusleiste ist zwischen den kacheln und dem datum platziert.
   das ist unpraktisch- diese auf die linke seite der kacheln geben. zwischen sidebar und kacheln.
   dort ist genug platz" - .dash-status sass vorher zwischen .dash-icons und .dash-clock (alle drei
   durch justify-content:flex-end rechtsbuendig zusammengeschoben). Jetzt getrennt: .dash-status
   linksbuendig direkt neben der Sidebar, Icons+Uhr weiterhin als Gruppe rechtsbuendig
   (.dash-topbar__right, siehe inc/header.php) - dazwischen bleibt der bislang leere Platz sichtbar. */
.dash-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 22px;background:var(--paper);border-bottom:1.5px solid var(--line);
  position:sticky;top:0;z-index:50}
.dash-topbar__right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Agentur-Dashboard (agentur-dashboard.php, 10.07.2026) - Seitenlayout wie im Automator-Vorbild
   (Screenshot 10.07.2026): EINE Hauptspalte links (Zeitraum-Kacheln + beide Tabellen darunter
   gestapelt) und eine schmale, durchgehende rechte Seitenspalte fuer Geburtstage/Dienstjubilaeen -
   vorher standen die Karten in einer eigenen breiten Reihe neben den Kacheln und wirkten dadurch
   "viel zu groß und zu wuchtig" (Nutzer-Meldung 10.07.2026); jetzt deutlich kompakter (kleineres
   Padding/Schrift), passend zur schmalen Spalte im Vorbild. */
.dash-icons{display:flex;gap:8px}
.dash-icon{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);text-decoration:none;font-size:16px;color:var(--ink)}
.dash-icon svg{display:block}
.dash-icon:hover{border-color:var(--ink)}
.dash-icon--disabled{opacity:.45;cursor:default;pointer-events:none}
.dash-icon__badge{position:absolute;top:-6px;right:-6px;background:var(--error);color:#fff;font-size:10px;
  font-weight:700;border-radius:10px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 3px}
/* Nutzer-Wunsch 12.07.2026 (Punkt 2): "eine generelle feste statusleiste [...] in der zeile, in
   der auch datum und uhrzeit stehen" - Sync-/Import-Fortschrittsbadges (.sync-badge, siehe oben)
   sitzen jetzt hier statt in der Sidebar-Fusszeile. */
.dash-status{display:flex;gap:8px}
/* Nutzer-Wunsch 20.07.2026 ("die Uhr [...] 'tanzt' durch die Veränderung der Sekunden [...] muss
   eine feste Größe bekommen") - ohne tabular-nums haben unterschiedliche Ziffern (z. B. "1" vs. "8")
   im Proportionalfont leicht unterschiedliche Breiten, wodurch der Text jede Sekunde minimal
   "wackelt" - font-variant-numeric erzwingt gleich breite Ziffern, min-width als zusaetzliche
   Absicherung falls eine Schrift das ignoriert. */
.dash-clock{font-size:13px;color:var(--ink-soft);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;display:inline-block;min-width:132px;text-align:right}
.dash-page-grid{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start;margin:18px 0}
.dash-main{min-width:0}
.dash-side{display:flex;flex-direction:column;gap:10px}
@media(max-width:900px){.dash-page-grid{grid-template-columns:1fr}}

/* Nutzer-Meldung 10.07.2026: "die Zahlen in den Kacheln sind noch zu groß, die Kacheln selbst
   auch - zu viel Weißraum" - nochmal deutlich kompakter als der erste Verkleinerungs-Durchgang
   (Titel/Werte kleiner, weniger Innenabstand, engere Zeilen). */
.period-kpi{border:1.5px solid var(--ink);border-bottom-width:3px;border-bottom-color:var(--pistachio);
  border-radius:6px;padding:7px 9px;background:var(--paper)}
a.period-kpi{text-decoration:none;color:inherit;display:block}
.period-kpi__t{font-size:10.5px;font-weight:700;margin:0 0 4px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nutzer-Wunsch 12.07.2026: "die icons auf dem dashboard auch schwarz machen, wie in der
   sidebar" - period-kpi/anniv-card-Titel bekommen jetzt Icon::render()-SVGs statt bunter Emoji,
   kleiner Versatz gleicht die Grundlinie neben dem Text aus. */
.period-kpi__t svg,.anniv-card__t svg{vertical-align:-2px;margin-right:1px}
.period-kpi__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
/* Nutzer-Wunsch 20.07.2026: "das feld ist nicht ordentlich formatiert. den wert unter den zeitraum
   geben, nicht daneben" - Wert stand vorher per justify-content:space-between NEBEN dem Label
   (Nutzer-Screenshot zeigte deshalb einen haesslichen Umbruch mitten im Betrag, z. B. "0,00" +
   Zeilenumbruch + "€"). Jetzt gestapelt: Label oben, Wert darunter - betrifft ALLE periodKpi()-
   Kacheln (Neue Mitarbeiter/Gelöschte MA/Provisionen/...), da sie sich dieselbe CSS-Klasse teilen. */
.period-kpi__row{display:flex;flex-direction:column;gap:0;font-size:10.5px;line-height:1.4}
.period-kpi__l{color:var(--muted)}
.period-kpi__v{font-weight:600;color:var(--ink);font-size:12.5px;white-space:nowrap}
.period-kpi__note{font-size:9.5px;color:var(--muted);margin:4px 0 0;font-style:italic;line-height:1.3}
.period-kpi__cal{font-size:10.5px;color:var(--ink-soft);margin:0;font-weight:600}
.period-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px}

/* Kompakte KPI-/Donut-Kacheln (personen.php) - Nutzer-Wunsch 10.07.2026: "die Kacheln und Donuts
   fest einbauen, aber deutlich kleiner - etwa so groß, wie die kleinen Kacheln (Calendly,
   Provisionen etc. auf dem Dashboard)", damit unter der Personensuche noch genug Platz fuer die
   Ergebnisliste bleibt. Groessenordnung angelehnt an .period-kpi oben. */
.kpi-grid--compact{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 12px}
.kpi-card--compact{padding:7px 9px;border-radius:6px}
.kpi-card--compact .kpi-card__l{font-size:9.5px;margin:0 0 3px}
.kpi-card--compact .kpi-card__v{font-size:17px}
.kpi-card--compact .kpi-card__s{font-size:10px;margin:3px 0 0}

/* Feste 3 Spalten statt auto-fit/minmax (Nutzer-Wunsch 10.07.2026: "bitte alle drei donuts
   nebeneinander, nicht darunter") - bricht dadurch bei 3 Karten nicht mehr um, nur unter 700px
   (Mobilansicht) faellt es wieder auf eine Spalte zurueck, siehe Media Query unten. */
.donut-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px}
@media(max-width:700px){.donut-grid--compact{grid-template-columns:1fr}}
/* Nutzer-Meldung 26.07.2026 ("das ist nicht ordentlich formatiert") - eigene Variante fuer
   StandortModal::renderKpiTiles() (5 statt 3 Donuts wie bei personen.php oben): die feste
   3-Spalten-Regel liess die letzte Zeile mit nur 2 Karten unschoen halbleer stehen. auto-fit
   stretcht die Karten stattdessen gleichmaessig ueber alle Zeilen. */
.donut-grid--compact5{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:0 0 18px}
.donut-card--compact{padding:8px 10px}
.donut-card--compact .card__t{font-size:11px;margin:0 0 6px}
.donut-card--compact .donut-wrap{gap:10px}
.donut-card--compact .donut__n{font-size:13px}
.donut-card--compact .donut__u{font-size:8px}
.donut-card--compact .donut-legend{gap:3px;min-width:100px}
.donut-card--compact .donut-legend__row{font-size:10.5px;gap:5px}
.donut-card--compact .donut-legend__dot{width:8px;height:8px}

/* Deutlich kompakter als am 10.07.2026 zuerst gebaut (padding 16px/18px, 14px-Titel, 13px-Zeilen) -
   Nutzer-Meldung: "viel zu groß und zu wuchtig", angelehnt an die schmale, dichte Seitenspalte im
   Automator-Screenshot. */
.anniv-card{border:1.5px solid var(--ink);border-bottom-width:3px;border-bottom-color:var(--pistachio);
  border-radius:var(--r);padding:9px 10px;background:var(--paper)}
.anniv-card__head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.anniv-card__t{font-size:12px;font-weight:600;margin:0}
.anniv-card__head select{font-size:11px;padding:2px 4px}
.anniv-list{display:flex;flex-direction:column;gap:5px;max-height:260px;overflow-y:auto}
/* Nutzer-Wunsch 26.07.2026 ("die Dienstjubiläen heute und Geburtstage heute beide auf die höhen
   der tabellen angleichen") - feste Höhe passend zu .table-wrap--scroll6 (Erkannte Angebote/
   Verträge, 216px), nur fuer diese beiden Karten - das E-Mail-Widget behaelt seine eigene, groessere
   .anniv-list-Standardhoehe (260px). */
.anniv-list--fixed216{height:216px}
.anniv-row{display:block;background:var(--pistachio-pale);border-radius:6px;padding:6px 8px;
  font-size:11.5px;text-decoration:none;color:inherit;transition:background .15s}
a.anniv-row:hover{background:var(--pistachio,#eef2c8)}
.anniv-row__name{font-weight:600;color:var(--ink)}
.anniv-row__detail{color:var(--ink-soft);font-size:11px;margin-top:1px}
/* Geburtstag ohne hinterlegte E-Mail -> Gruß wird nicht versendet (Nutzer-Meldung 19.07.2026). */
.anniv-noemail{font-size:10px;font-weight:700;color:var(--error);white-space:nowrap;margin-left:4px}
/* Dashboard-E-Mail-Widget (Nutzer-Wunsch 13.07.2026): optimistisches Ausgrauen einer Zeile, sobald
   sie per markMailRead() (assets/app.js) als gelesen markiert wurde - kein Seiten-Reload noetig. */
.mail-row--read{opacity:.5}

.donut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin:18px 0}
.donut-card{border:1.5px solid var(--ink);border-bottom-width:3px;border-bottom-color:var(--pistachio);
  border-radius:var(--r);padding:16px 18px;background:var(--paper)}
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut{border-radius:50%;flex:0 0 auto;position:relative}
.donut__hole{position:absolute;inset:22%;background:var(--paper);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.donut__n{font-size:18px;font-weight:600;color:var(--ink);line-height:1.1}
.donut__u{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.donut-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:7px}
.donut-legend__row{display:flex;align-items:center;gap:8px;font-size:13px}
.donut-legend__dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.donut-legend__l{flex:1;color:var(--ink-soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-legend__v{font-weight:600;color:var(--ink);flex:0 0 auto}

.card{border:1.5px solid var(--ink);border-bottom-width:3px;border-bottom-color:var(--pistachio);
  border-radius:var(--r);padding:16px 18px;margin:16px 0;background:var(--paper)}
.auth-card{max-width:380px;margin:60px auto}
.auth-card__legal{margin-top:14px;text-align:center;font-size:12.5px}
.impressum-card{max-width:620px}

/* Pilot 18.07.2026 (Nutzer-Wunsch "das layout von vorbereitung.php auch fuer die berater seiten"):
   compension.de-Marketinglook fuer die ausgeloggte Login-Strecke (login.php/otp.php/whatsapp-2fa.php),
   BEWUSST auf den Wrapper .berater-auth gescopet - keine bestehende App-Seite nutzt diese Klasse, die
   uebrige App-Optik bleibt daher unveraendert. Scharfe Ecken, Versal-Labels, weich beschattete Karte,
   Pistazie-Versal-CTA. Manrope + Palette liegen bereits global vor (siehe :root oben). */
.berater-auth{min-height:66vh;display:flex;align-items:center;justify-content:center;padding:30px 16px}
.berater-auth .ba-card{width:100%;max-width:430px;background:#fff;border:1px solid var(--line);
  border-radius:0;box-shadow:0 18px 50px rgba(13,13,13,.10);padding:40px 38px 28px}
.berater-auth .ba-eyebrow{margin:0 0 8px;color:var(--pistachio-deep);letter-spacing:.22em;
  text-transform:uppercase;font-size:11px;font-weight:800}
.berater-auth h1{margin:0 0 12px;font-size:30px;font-weight:800;letter-spacing:.01em;color:var(--ink)}
.berater-auth .ba-sub{margin:0 0 24px;color:var(--muted);font-size:13.5px;line-height:1.55;max-width:46ch}
.berater-auth .field{margin-bottom:16px}
.berater-auth .field label{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700;color:var(--muted)}
.berater-auth .field input,.berater-auth .field select,.berater-auth .field textarea{width:100%;border-radius:0;
  border:1px solid var(--line);background:#faf9f3;padding:11px 12px}
.berater-auth .field input:focus,.berater-auth .field select:focus,.berater-auth .field textarea:focus{
  border-color:var(--pistachio-deep);outline:none;box-shadow:0 0 0 3px rgba(211,216,0,.20)}
.berater-auth .btn-primary{margin-top:6px;border-radius:0;border:2px solid var(--pistachio);background:var(--pistachio);
  color:var(--ink);text-transform:uppercase;letter-spacing:.05em;font-weight:800;padding:12px 16px}
.berater-auth .btn-primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.berater-auth .btn-link{color:var(--pistachio-deep);font-weight:600}
.berater-auth .alert{border-radius:0}
.berater-auth .ba-legal{margin-top:20px;text-align:center;font-size:12px;color:var(--muted)}
.berater-auth .ba-legal a{color:var(--pistachio-deep);text-decoration:none;border-bottom:2px solid var(--pistachio);font-weight:600}

/* Pilot 18.07.2026: compension.de-Look fuer ganze Berater-Seiten (Schritt 3, Nutzer waehlte
   "Sidebar + Topbar"). Aktiviert per Seiten-Flag $beraterSkin=true -> inc/header.php haengt die
   Klasse an <body>, sodass Shell (Sidebar/Topbar) UND Inhalt denselben Look bekommen; nicht
   geflaggte Seiten bleiben komplett unveraendert. Kernidee wie vorbereitung.php: helle Haarlinien
   (#e7e7df statt der kraeftigen App-Linie #B7B7AB), scharfe Ecken (--r:0), weich beschattete Karten,
   Versal-Labels, Antialiasing. Palette auf dem <body> => kaskadiert auf ALLE App-Komponenten der Seite. */
body.berater-shell{--ink:#1a1a1a;--ink-soft:#5f5f58;--muted:#5f5f58;--line:#e7e7df;--panel:#fafbe9;--paper:#fff;
  --pistachio-deep:#9a9d00;--r:0px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Reinweisser Seitenhintergrund wie vorbereitung.php (die App setzt body{background:var(--panel)} -
     ohne dieses Override waere der ganze Inhaltsbereich pistaziengruen getoent). --panel bleibt fuer
     dezente Komponenten-Fuellungen erhalten. */
  background:#fff}
/* Sidebar behaelt weissen Hintergrund (nicht den Panel-Ton). */
body.berater-shell .sidebar{background:#fff}
/* Shell: Sidebar/Topbar von kraeftigem 1,5px-Ink-Rahmen auf helle Haarlinie + scharfe Ecken. */
body.berater-shell .sidebar{border-right:1px solid var(--line)}
body.berater-shell .sidebar__link{border-radius:0}
body.berater-shell .sync-badge{border-radius:0}
body.berater-shell .topbar-mobile{border-bottom:1px solid var(--line)}
body.berater-shell #sidebarToggle{border:1px solid var(--line);border-radius:0}
/* Inhalt: Ueberschriften/Kacheln. */
body.berater-shell .phase__ey{color:var(--pistachio-deep);text-transform:uppercase;letter-spacing:.2em;font-weight:800;font-size:11px}
body.berater-shell .phase__h{font-weight:800;letter-spacing:-.015em}
body.berater-shell .phase__l{color:var(--muted)}
body.berater-shell .kpi-card{border:1px solid var(--line);border-bottom-width:1px;border-bottom-color:var(--line);
  padding:22px 20px;box-shadow:0 12px 34px rgba(13,13,13,.06)}
body.berater-shell .kpi-card__l{text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--muted);font-weight:700}
body.berater-shell .kpi-card__v{font-weight:800;letter-spacing:-.02em}
body.berater-shell .donut-card{border:1px solid var(--line);box-shadow:0 12px 34px rgba(13,13,13,.06)}
body.berater-shell .card__t{text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted);font-weight:700}
/* agentur-dashboard.php nutzt .period-kpi (KPI-/Calendly-Kacheln) und .anniv-card (E-Mail/Geburtstage/
   Jubilaeen) mit kraeftigem var(--ink)-Rahmen - hier auf Haarlinie + weichen Schatten + scharfe Ecken. */
body.berater-shell .period-kpi{border:1px solid var(--line);border-bottom-width:1px;border-bottom-color:var(--line);
  border-radius:0;box-shadow:0 12px 34px rgba(13,13,13,.06)}
body.berater-shell .period-kpi__t{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
body.berater-shell .anniv-card{border:1px solid var(--line);border-bottom-width:1px;border-bottom-color:var(--line);
  box-shadow:0 12px 34px rgba(13,13,13,.06)}
body.berater-shell .anniv-card__t{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
body.berater-shell .pd-badge{border-radius:0}
body.berater-shell .back-link a{color:var(--pistachio-deep);text-decoration:none;border-bottom:2px solid var(--pistachio);font-weight:600}
/* personen/arbeitgeber (recent-pill Chips) + vertrieb (Kanban-Karten/-Spalten): var(--line)-Raender
   werden von der Palette bereits aufgehellt, nur die literalen Rundungen (8/20px) auf scharf. */
body.berater-shell .recent-pill,
body.berater-shell .recent-list--cols .recent-pill,
body.berater-shell .kanban-col,
body.berater-shell .kanban-card{border-radius:0}
/* Generische "boxy" App-Karten (auf nahezu allen Seiten): kraeftiger 1,5px-Ink-Rahmen + Pistazie-Balken
   -> helle Haarlinie + dezenter Schatten, scharfe Ecken. So sind mit dem globalen berater-shell-Default
   (siehe inc/header.php) auch Gesellschaften/Verträge/Einstellungen/Regeln etc. sofort clean. */
body.berater-shell .card,
body.berater-shell .table-wrap,
body.berater-shell .advisor-card{border:1px solid var(--line);border-bottom-width:1px;border-bottom-color:var(--line);
  box-shadow:0 8px 24px rgba(13,13,13,.05)}
body.berater-shell .modal{border:1px solid var(--line);border-top-width:1px;border-top-color:var(--line)}
body.berater-shell .data-table th{border-bottom:1px solid var(--line)}
body.berater-shell .rstep--sum{border-top:1px solid var(--line)}
.impressum-card h2{font-size:15px;margin:20px 0 4px}
.impressum-card p{margin:0 0 4px;line-height:1.5}

/* Personendaten-Kopfbereich + 2x2-Kartenraster (mitarbeiter.php, Agentur-Ansicht) - angelehnt
   an den Automator-Screenshot vom 10.07.2026 (Name+Badges+Alter+Foerderung/bAV-Mini-Donuts oben,
   Anschrift/Kommunikationsdaten/Beschaeftigungsdaten/Einkommensdaten darunter). */
.pd-header{padding:16px 20px}
.pd-header__row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pd-header__left{display:flex;flex-direction:column;gap:10px;flex:1;min-width:220px}
.pd-header__title{display:flex;align-items:center;gap:9px}
.pd-dot{width:11px;height:11px;border-radius:50%;background:#3B6FE0;flex:0 0 auto}
.pd-name{font-size:18px;font-weight:600;margin:0}
.pd-badges{display:flex;gap:8px;flex-wrap:wrap}
.pd-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:7px;
  font-size:12.5px;font-weight:600;border:1px solid var(--line);cursor:default;user-select:none}
a.pd-badge{text-decoration:none;color:inherit;cursor:pointer}
button.pd-badge{font:inherit;-webkit-appearance:none;appearance:none}
.pd-badge--warn{background:#FBEBC5;color:#7A5A00}
.pd-badge--info{background:#DCE6F7;color:#1D3E7A}
.pd-badge--action{background:var(--pistachio);color:var(--ink)}
.pd-age{font-size:22px;font-weight:600;color:var(--ink);flex:0 0 auto;align-self:flex-start}
.pd-donuts{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;justify-content:center;width:100%}
/* Nutzer-Wunsch 12.07.2026: "die buttons Wiedervorlage und Gesprächsnotiz verkleinern und unter
   die Donut diagramme setzen" - Donuts + Badges jetzt als eigene Spalte, Badges kleiner als die
   Basisgroesse. Nutzer-Wunsch 26.07.2026: vertrag.php nutzt diesen kleineren Zuschnitt inzwischen
   ebenfalls (dieselbe Kachelgroesse auf beiden Seiten), .pd-badge selbst bleibt trotzdem die
   Basis-Groesse fuer etwaige kuenftige Wiederverwendung ohne --sm. */
.pd-donuts-col{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.pd-badges--sm{gap:6px}
.pd-badges--sm .pd-badge{padding:4px 9px;font-size:11px;gap:4px;border-radius:6px}
/* Nutzer-Wunsch 21.07.2026: die Donuts groesser + mittig in der Kachel, Ring ueber der Beschriftung
   zentriert (statt kleiner Ring links neben Text). Der Ring spiegelt via conic-gradient die echte
   Aufteilung wider. */
/* Zweizeiliger Feldwert in Format::card()-Zeilen (Nutzer 24.08.2026): oben die Zahl bzw. der Name,
   darunter der Zusatz. Vorher standen Betrag, Versicherer und Vertragsnummer in EINER Zeile und
   brachen an beliebiger Stelle um - mal mitten im Namen, mal zwischen Zahl und Prozentzeichen.
   Genutzt von Berater-Personenakte (mitarbeiter.php) und Arbeitgeberportal (arbeitgeber-person.php)
   - deshalb hier zentral und nicht zweimal je Seite. */
.pd-two{display:flex;flex-direction:column;gap:1px;min-width:0}
.pd-two__v{font-weight:700;color:var(--ink);line-height:1.25;white-space:nowrap}
.pd-two__v--n{white-space:normal;overflow-wrap:break-word}
.pd-two__s{font-size:12px;color:var(--ink-soft);line-height:1.35;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pd-mini{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;flex:1 1 0;min-width:130px}
.pd-mini__ring{width:112px;height:112px;border-radius:50%;flex:0 0 auto;position:relative}
.pd-mini__ring--empty{background:var(--line)}
.pd-mini__hole{position:absolute;inset:22%;background:var(--paper);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.pd-mini__n{font-size:17px;font-weight:700;color:var(--ink)}
.pd-mini__t{font-size:13px;font-weight:700;color:var(--ink-soft);margin:0 0 2px}
.pd-mini__row{font-size:12px;color:var(--ink-soft);margin:0}
.pd-mini__row.muted{color:var(--muted)}
.pd-mini--muted .pd-mini__t{color:var(--muted)}
/* Nutzer-Wunsch 20.07.2026: Buchungsdaten-Aufschluesselung als Mouseover ueber dem bAV-Donut
   (statt/zusaetzlich zur Tabelle im Vertraege-Tab). Reines CSS-Tooltip - erscheint beim Hover
   ueber der Mini-Kachel des bAV-Donuts. */
.pd-mini--hint{position:relative}
.pd-mini--hint .pd-mini__ring{cursor:help}
/* Mittig UNTER dem Donut: der Ring ist jetzt in der Kachel zentriert (.pd-mini ist ein zentrierte
   Spalte), daher left:50% (Nutzer-Wunsch 21.07.2026). */
.bav-pop{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:60;
  margin-top:10px;width:300px;max-width:90vw;background:var(--paper);border:1.5px solid var(--ink);
  border-radius:var(--r);box-shadow:0 10px 28px rgba(0,0,0,.16);padding:12px 14px}
/* kleiner Zeiger nach oben zum Donut */
.bav-pop::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-bottom-color:var(--ink)}
.pd-mini--hint:hover .bav-pop,.pd-mini--hint:focus-within .bav-pop{display:block}
.bav-pop__h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:0 0 8px}
.bav-pop__c{padding:8px 0;border-top:1px solid var(--panel)}
.bav-pop__c:first-of-type{border-top:none;padding-top:0}
.bav-pop__nr{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 5px}
.bav-pop__tax{font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.bav-pop__g{display:grid;grid-template-columns:1fr auto;gap:3px 12px}
.bav-pop__g span{font-size:11.5px;color:var(--ink-soft)}
/* Legenden-Punkt: ordnet die Aufschluesselungs-Zeile der passenden Ring-Farbe zu. */
.bav-pop__g i.lg{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.bav-pop__g b{font-size:11.5px;color:var(--ink);text-align:right;white-space:nowrap}
.bav-pop__note{margin:8px 0 0;font-size:10.5px;color:var(--muted);line-height:1.35}
.pd-subline{font-size:13px;color:var(--muted);margin:14px 0 0}
.pd-subline a{color:inherit}

.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.pd-grid .card{margin:0}
@media(max-width:760px){.pd-grid{grid-template-columns:1fr}}

/* Kompaktere Feldzeilen NUR auf der Personendatenseite (Nutzer-Wunsch 10.07.2026: weniger Scrollen).
   ERSTER Versuch (nebeneinander per flex+justify-content:space-between) hat sich als Fehlschlag
   herausgestellt: bei langen Labels wie "Interne Kunden-Nr. (COMPENSION Viva)" blieb kaum Platz fuer den
   Wert, "word-break:break-word" hat dann mitten im Wort umgebrochen (Nutzer-Meldung 10.07.2026,
   Screenshot zeigte "2/2/9/4/7/6" und "Krankenkass/e" buchstabenweise untereinander) - deshalb
   zurueckgebaut auf die bewaehrte gestapelte Anzeige (Label oben, Wert darunter, wie ueberall sonst
   auch), nur mit engerem Zeilenabstand statt komplett anderem Layout. */
.pd-grid .rf-grid{gap:8px 24px}
.pd-grid .rf-field label{margin:0 0 2px}
.pd-card-wrap{position:relative}
.pd-card-wrap .card{margin:0}
/* Nutzer-Meldung 26.07.2026 ("in der Beschäftigungsdaten-Kachel überlagern sich der Punkt für den
   Status des Arbeitsverhältnisses mit dem Bearbeiten-Stift") - vorher .pd-status-dot/-label absolut
   oben rechts positioniert, exakt an derselben Stelle wie der Bearbeiten-Stift der Kachel (siehe
   .gevo-card__head) - beide ueberlagerten sich. Jetzt als Teil der Kopfzeile selbst (inline direkt
   hinter dem Kachel-Titel, vor dem Stift), kein position:absolute mehr noetig. */
.pd-status-dot--inline{display:inline-block;width:8px;height:8px;border-radius:50%}
.pd-status-label--inline{font-size:11px;font-weight:700;letter-spacing:.02em}

/* Vertragsdaten-Kopfbereich (vertrag.php, Agentur-Ansicht) - angelehnt an den Automator-
   Screenshot vom 10.07.2026, wiederverwendet .pd-badges/.pd-mini/.pd-subline/.pd-grid/
   .pd-card-wrap von der Personendetailseite fuer einheitliche Optik. */
.vt-header{padding:16px 20px}
.vt-header__row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.vt-header__left{display:flex;flex-direction:column;gap:10px;flex:1;min-width:220px}
.vt-title{font-size:17px;font-weight:600;margin:0}
.vt-header__right{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.vt-logo{max-height:34px;max-width:150px;object-fit:contain}
.vt-avwl-badge{position:absolute;top:20px;right:20px;background:var(--pistachio-pale);color:var(--ink);
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px}
/* IN der Kopfzeile statt darüber (26.08.2026): Seit die Buchungsdaten-Kachel einen Bearbeiten-Stift
   hat, sassen Plakette und Stift an derselben Stelle - die Plakette deckte ihn zu, und die beiden
   selbst gepflegten Daten liessen sich nicht mehr ändern. Nebeneinander kann nichts verdecken. */
.vt-avwl-badge--inline{position:static;margin-right:10px}

/* Suchfeld + "Zuletzt geoeffnet" nebeneinander (personen.php) - Nutzer-Wunsch 10.07.2026: "die
   zuletzt geöffneten personen [...] rechts neben dem suchfeld, unter dem 2. und 3. donut
   kachelelement" - dieselbe 3-Spalten-Aufteilung wie .donut-grid--compact darueber, damit die
   Spalten optisch exakt fluchten (Suchfeld = Spalte 1, Zuletzt-geoeffnet-Panel = Spalte 2+3). */
.ph-search-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start;margin-bottom:18px}
.ph-recent-panel{grid-column:span 2}
@media(max-width:700px){.ph-search-row{grid-template-columns:1fr}.ph-recent-panel{grid-column:span 1}}

/* "Zuletzt geoeffnet" (personen.php) - schneller Wiedereinstieg zu den letzten 10 Personen, in
   2 Spalten uebereinander (Nutzer-Wunsch 10.07.2026: "insgesamt 10 letzte mitarbeiter und in
   2 spalten untereinander") statt der vorherigen frei umbrechenden Pillen-Reihe. */
.recent-list{display:flex;flex-wrap:wrap;gap:8px}
.recent-list--cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.recent-pill{display:flex;flex-direction:column;gap:1px;padding:7px 13px;border:1px solid var(--line);
  border-radius:20px;background:var(--paper);text-decoration:none;color:var(--ink)}
.recent-list--cols .recent-pill{border-radius:8px;padding:6px 10px}
.recent-pill:hover{border-color:var(--ink)}
.recent-pill__name{font-size:13px;font-weight:600}
.recent-pill__company{font-size:11px;color:var(--muted)}

/* Datei-Drop-Zone (import-export.php, Nutzer-Wunsch 12.07.2026: "ein drag an drop hinzufügen.
   ein feld, wo ich eine datei ablegen kann, die genau so behandelt wird, als hätte ich über den
   button datei hochladen hinzugefügt.") - komplett klickbar (oeffnet denselben Dateidialog wie
   der bisherige Button) UND per Drag&Drop bedienbar, siehe handleImportFileDrop() dort. */
.import-dropzone{border:2px dashed var(--line);border-radius:var(--r);padding:28px 20px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.import-dropzone:hover{border-color:var(--pistachio-deep)}
.import-dropzone--over{border-color:var(--pistachio-deep);background:var(--pistachio-pale)}
.import-dropzone__text{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.import-dropzone__link{color:var(--pistachio-deep);text-decoration:none}
.import-dropzone__hint{margin:4px 0 0;font-size:12px;color:var(--muted)}

/* Tabellen-Ansicht fuer Personenlisten (personen.php, mitarbeiter-liste.php) - Listenansicht
   statt Kachelraster, angelehnt an die Personen-Tabelle im Automator. */
.table-wrap{border:1.5px solid var(--ink);border-bottom-width:3px;border-bottom-color:var(--pistachio);
  border-radius:var(--r);background:var(--paper);overflow-x:auto;margin:14px 0}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;white-space:nowrap}
.data-table th{text-align:left;padding:9px 14px;border-bottom:1.5px solid var(--ink);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.data-table td{padding:9px 14px;border-bottom:1px solid var(--panel)}
.data-table tbody tr{cursor:pointer}
.data-table tbody tr:hover{background:var(--panel)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table a.row-link{color:var(--ink);text-decoration:none;font-weight:600}
.data-table a.row-link:hover{text-decoration:none}
.data-table__dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}

/* Spaltenüberschriften bleiben beim Scrollen stehen (Nutzer 26.08.2026: „die kopfzeile darf nicht
   mitscrollen") - opt-in, weil dieselbe Tabelle auch in Popups mit eigenem Scroll-Rahmen steht, wo
   diese Höhenbegrenzung falsch wäre.

   Der Rahmen scrollt SELBST (max-height), die Kopfzeile klebt mit top:0 darin. Am Fenster kleben
   kann sie nicht: .table-wrap hat overflow-x:auto und ist damit bereits ein Scroll-Rahmen, an dem
   sich sticky orientiert - beides im Browser nachgemessen.

   Die 112 px sind der untere Seitenrand (main.wrap padding-bottom:70px) plus Kartenpolster und Luft;
   im Browser nachgemessen, damit der Rahmen am Seitenende nicht unter den festen Kopf rutscht. Ohne sie schöbe
   sich der Rahmen am Seitenende so weit nach oben, dass die Kopfzeile hinter der oberen Leiste
   verschwände.

   box-shadow statt border: Bei border-collapse:collapse gehört die Linie der Tabelle, nicht der
   Zelle - sie bliebe beim Scrollen zurück, während die Überschrift mitwandert. */
.table-wrap--sticky{max-height:calc(100vh - var(--sticky-top,64px) - var(--kopf-h,0px) - 112px);overflow:auto}

/* Seitenkopf (Überschrift + Knopf) bleibt beim Scrollen stehen - Nutzer 26.08.2026: „die Kopfzeile
   und den Button im Tab E-Mails nicht mitscrollen". Er rastet unter der Leiste mit Uhr und Symbolen
   ein; seine gemessene Höhe steht in --kopf-h und geht oben in die Tabellenhöhe ein, damit sich der
   Tabellenrahmen nicht darunterschiebt.
   z-index unter dem der oberen Leiste (50): die gewinnt, wenn sich beide treffen. */
.seiten-kopf--fix{position:sticky;top:var(--sticky-top,64px);z-index:20;background:var(--panel);
  margin:0 0 14px;padding:12px 0 10px}
.seiten-kopf--fix::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);opacity:.45}
/* Der Fliesstext darf im festen Kopf nicht die halbe Seite einnehmen. */
.seiten-kopf--fix .phase__l{margin-bottom:0}
.table-wrap--sticky thead th{position:sticky;top:0;z-index:2;
  background:var(--paper);box-shadow:inset 0 -1.5px 0 var(--ink)}

/* Nutzer-Wunsch 12.07.2026 (vertrag-dokumente.php): "nach kategorie sortieren und gruppieren.
   das neueste dokument einer katagorie immer besonders markieren" - Gruppenkopf-Zeile angelehnt an
   .column-map-group, plus Hervorhebung der jeweils ersten (neuesten) Zeile je Gruppe. */
.data-table__group-row td.data-table__group{padding:6px 14px 4px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--pistachio-deep);background:var(--paper-2,#f4f4f2);
  border-bottom:1px solid var(--line);cursor:default}
.data-table__group-row:hover{background:none}

/* Personengruppen-Pillen in der Personenakte (Beschaeftigungsdaten-Kachel, Nutzer-Wunsch
   19.07.2026: zugeordnete Personengruppe wie "Geschäftsführung" pistaziengruen hinterlegen). */
.pg-pill{display:inline-block;padding:2px 9px;margin:1px 2px 1px 0;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;
  background:var(--pistachio-pale);color:var(--pistachio-deep);border:1px solid var(--pistachio-deep)}
.data-table__group-row:first-child td.data-table__group{border-top:none}
.doc-row--newest{background:var(--pistachio,#eef2c8)}
.doc-row--newest:hover{background:var(--pistachio,#eef2c8)}

/* Provisions-Tabelle (vertrag-provision.php, Nutzer-Wunsch 12.07.2026: "provisionen [...] 1:1")
   - keine Zeilennavigation (kein data-href), deshalb Standard-Zeigerhand/Hover der .data-table
   deaktiviert. Rot/Grau-Kennzeichnung 1:1 wie im Automator-Treeview (tags "neg"/"techn"). */
.data-table--static tbody tr{cursor:default}
.data-table--static tbody tr:hover{background:none}
.prov-row--neg td{color:var(--error)}
.prov-row--tech td{color:var(--muted)}
.prov-total{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);
  border-radius:8px;font-size:13.5px}
.prov-total strong{font-size:15px}
.doc-badge-newest{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--pistachio-deep);background:var(--paper);border:1px solid var(--pistachio-deep)}

/* Nutzer-Wunsch 12.07.2026 (vertrag-dokumente.php): "auch den dateityp kenntlich machen" - kleine
   Farbpille statt des grossen quadratischen .doc-tile__icon (das ist fuer die Kachelansicht
   gedacht), Farbe/Label kommen aus derselben Format::fileTypeBadge()-Quelle. */
.doc-type-badge{display:inline-block;margin-right:8px;padding:2px 7px;border-radius:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.02em;color:#fff;vertical-align:middle}

/* "ich möchte dokumente auch löschen können" - kleiner Icon-Button am Zeilenende, gleiche Optik
   wie .doc-tile__del (Kachelansicht), hier aber inline in der Tabellenzelle statt absolut
   positioniert. makeTableRowsClickable() ignoriert Klicks auf <button> (siehe app.js), damit der
   Button nicht gleichzeitig die Zeilennavigation ausloest. */
.data-table__row-del{background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:14px;padding:2px 4px;line-height:1}
.data-table__row-del:hover{color:var(--error)}

/* Nutzer-Wunsch 11.07.2026: "auch hier sind nicht alle texte erkennbar, da die einträge in der
   liste nicht umbrechen" - .data-table ist standardmaessig auf white-space:nowrap ausgelegt (passt
   fuer kurze Werte wie Namen/Daten/Preise in den meisten Tabellen der App), fuer Tabellen mit
   langem Fliesstext (z. B. Leistungen-Tab im Tarif-Detail, TariffModal.php) aber ungeeignet - dort
   erzwang das horizontales Scrollen statt normalem Zeilenumbruch. Modifier-Klasse statt die
   Basisklasse zu aendern, damit alle anderen (kompakten) Tabellen unveraendert bleiben. */
.data-table--wrap{white-space:normal}
.data-table--wrap td{word-break:break-word}

/* Kompaktere, hoehenbegrenzte Tabellenvariante (Agentur-Dashboard, Nutzer-Wunsch 10.07.2026:
   "verkleinere die Tabelle etwas") - engere Zeilen/kleinere Schrift statt der Standardgroesse aus
   Personenlisten, plus eigener Scrollbereich statt beliebig langer Seite bei vielen Treffern
   (bis zu 200 Zeilen, siehe agentur-dashboard.php). Kopfzeile bleibt beim Scrollen sichtbar
   (position:sticky), wie schon bei .anniv-list gehandhabt. */
.table-wrap--compact .data-table{font-size:12.5px}
.table-wrap--compact .data-table th,
.table-wrap--compact .data-table td{padding:6px 12px}
.table-wrap--scroll{max-height:360px;overflow-y:auto}
.table-wrap--scroll .data-table th{position:sticky;top:0;background:var(--paper);z-index:1}
/* Nutzer-Wunsch 26.07.2026 ("beide tabellen mit 6 zeilen fest auf das dashboard fixieren [...]
   erkannte angebote und erkannte verträge bitte gleich groß (höhe) machen") - eigene Modifier-
   Klasse statt .table-wrap--scroll (360px), da hier explizit auf genau 6 Tabellenzeilen (kompakte
   Zeilenhoehe ~30px inkl. Kopfzeile) begrenzt werden soll, unabhaengig von der Trefferzahl -
   Scrollen bleibt auf die Liste beschraenkt, nicht den ganzen Dashboard-Tab. Bewusst FESTE height
   (nicht nur max-height) - sonst waere eine Tabelle mit z. B. nur 2 Treffern deutlich kuerzer als
   die andere mit 10 Treffern, obwohl "gleich groß" gewuenscht ist. */
.table-wrap--scroll6{height:216px;overflow-y:auto}
.table-wrap--scroll6 .data-table th{position:sticky;top:0;background:var(--paper);z-index:1}
/* Nutzer-Wunsch 26.07.2026 ("die tabelle soll vollständig ins tab passen. wenn ich scrolle, nur
   die ergebnistabelle") - anders als --scroll/--scroll6/--scroll10 (feste max-height) fuellt diese
   Variante die REST-Hoehe eines Flex-Elternelements (siehe #phLockedView in personen.php, das per
   JS exakt auf die verbleibende Viewport-Hoehe gesetzt wird) - dadurch passt sich die Tabelle
   automatisch an je nachdem, wie viel Platz Suchfeld/Zuletzt-geoeffnet/Fenstergroesse lassen,
   statt einer festen Zeilenzahl. min-height:0 ist noetig, damit ein Flex-Item ueberhaupt kleiner
   als sein Inhalt werden und dadurch selbst scrollen kann (Flexbox-Standardverhalten sonst:
   min-height:auto verhindert das Schrumpfen). */
.table-wrap--fill{flex:1 1 auto;min-height:0;overflow-y:auto}
.table-wrap--fill .data-table th{position:sticky;top:0;background:var(--paper);z-index:1}

/* Nutzer-Wunsch 26.07.2026 ("können wir dieses Layout für die Mails verwenden?", Outlook-
   Screenshot als Vorbild) - postfach.php/mitarbeiter-email.php: Datumsgruppen-Header + zweizeilige
   Zeilen (Absender/Betreff+Vorschau) statt der bisherigen <table>. Ungelesene Mails fett (Outlook-
   Konvention) statt eines eigenen Hervorhebungspunkts. */
.mail-list__group{margin:16px 0 4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.mail-list__group:first-child{margin-top:0}
/* Nutzer-Meldung 24.08.2026: „die einzelnen Mails müssen deutlicher abgrenzbar sein. die feine
   linie zwischen den mails ist kaum zu erkennen. ebenfalls brauchen wir spaltenüberschriften.
   das Datum des Eingangs nach vorne. absender fett drucken."

   Aus der zweizeiligen Fliesszeile wird ein Raster mit vier Spalten. Die Trennung traegt jetzt
   nicht mehr die Haarlinie allein, sondern drei Mittel zusammen: abwechselnde Zeilenflaeche,
   deutlichere Linie und mehr Luft. Eine einzelne staerkere Linie haette die Liste nur unruhig
   gemacht - die Streifen erledigen die Abgrenzung, ohne zu schreien. */
/* Letzte Spalte FEST, nicht auto: Bei auto misst sie sich am Inhalt, und der ist in der Kopfzeile
   („Aktionen") ein anderer als in den Zeilen (drei Symbole) - gemessen 62,7 px gegen 51,3 px, die
   Überschriften standen also neben ihren Spalten. */
.mail-list{--mail-cols:112px minmax(150px,230px) minmax(0,1fr) 86px}
.mail-list__head{display:grid;grid-template-columns:var(--mail-cols);gap:14px;
  /* top ist einstellbar: Im Postfach klebt ueber der Liste noch der Filter-/Suchkopf, dann muss
     die Ueberschriftenzeile darunter einrasten (postfach.php setzt --mail-head-top per JS auf
     dessen gemessene Hoehe). Ohne die Variable bleibt es bei 0 - so wie an Vertrag und Person. */
  position:sticky;top:var(--mail-head-top,0);z-index:3;background:var(--paper);padding:7px 10px;
  border-bottom:2px solid var(--ink);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);
  /* Denselben 3-px-Balken wie die Zeilen tragen, sonst stehen die Überschriften um genau diese
     3 px versetzt über ihren Spalten (gemessen). */
  border-left:3px solid transparent}
.mail-list__head-r{text-align:right}
.mail-list__row{display:grid;grid-template-columns:var(--mail-cols);gap:14px;align-items:center;
  padding:11px 10px;border-bottom:1px solid var(--line);cursor:pointer;
  border-left:3px solid transparent}
.mail-list__row--alt{background:#FBFBF7}
/* Bearbeitungsstand am linken Zeilenrand (Nutzer-Wunsch 24.08.2026). Hier zentral statt inline in
   postfach.php, weil die Mailliste auch am Vertrag benutzt wird (vertrag-email.php, 25.08.2026). */
.mail-list__row.ws-unbearbeitet{border-left-color:#B3261E}
.mail-list__row.ws-in_bearbeitung{border-left-color:#C77700}
.mail-list__row.ws-erledigt{border-left-color:#2E7D32}
.mail-list__row:hover{background:var(--panel)}
/* Ungelesen bekommt einen Punkt vor dem Absender, KEINEN linken Balken: Die linke Kante traegt
   seit 24.08.2026 den Bearbeitungsstand (rot/orange/gruen, siehe .ws-* in postfach.php). Zwei
   Bedeutungen an derselben Kante waeren nicht auseinanderzuhalten. */
.mail-list__row--unread .mail-list__sender::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--pistachio-deep);margin-right:6px;vertical-align:middle}
.mail-list__row--unread .mail-list__sender{color:var(--ink)}
.mail-list__when{display:flex;flex-direction:column;line-height:1.25;font-size:12px}
.mail-list__d{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mail-list__t{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.mail-list__who{min-width:0;display:flex;flex-direction:column;line-height:1.25}
/* Absender immer fett - ungelesen zusaetzlich dunkler (siehe unten). */
.mail-list__sender{font-weight:700;font-size:13px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-list__person{color:var(--muted);font-weight:400;font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-list__main{min-width:0}
.mail-list__line1,.mail-list__line2{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.mail-list__line2{color:var(--muted);font-weight:400}
.mail-list__row--unread .mail-list__sender,
.mail-list__row--unread .mail-list__subject{font-weight:700;color:var(--ink)}
.mail-list__subject{color:var(--ink)}
.mail-list__preview{color:var(--muted)}
.mail-list__assign{font-size:11.5px;color:var(--error);text-align:left;padding:0}
.mail-list__meta{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12px;color:var(--muted)}
/* Schmale Fenster: Raster aufloesen, sonst quetschen sich vier Spalten auf 600 px. */
@media (max-width:900px){
  .mail-list__head{display:none}
  .mail-list__row{grid-template-columns:1fr auto;gap:4px 10px}
  .mail-list__when{grid-column:1;flex-direction:row;gap:6px}
  .mail-list__who{grid-column:1}
  .mail-list__main{grid-column:1}
  .mail-list__meta{grid-column:2;grid-row:1 / span 3;align-items:flex-start}
}
.mail-list__clip{font-size:13px}
.mail-list__delete{opacity:0;transition:opacity .15s}
.mail-list__row:hover .mail-list__delete{opacity:1}

/* Nutzer-Wunsch 26.07.2026 ("oben der verband, bei draufklicken darunter die einzelne firma") -
   Akkordeon-Zeile (verbaende.php), per Klasse statt Inline-Style versteckt, damit liveFilter()
   (setzt nur item.style.display, keine Klassen) die Klasse unangetastet laesst - sonst wuerde ein
   geleertes Suchfeld versehentlich alle Akkordeons aufklappen (liveFilter() setzt bei leerem Suchtext
   auf allen Treffern style.display='', was eine per Klasse kollabierte Zeile korrekt weiter
   versteckt haelt, eine per Inline-Style kollabierte Zeile aber wieder sichtbar machen wuerde). */
.accordion-row--collapsed{display:none}

/* Textlink-Buttons (Wiedervorlagen-Liste: "Erledigt"/"Wieder öffnen" in einer Tabellenzelle) und
   Filter-Links im Chip-Look (Wiedervorlagen: "Nur meine"/"Alle Berater" - Server-Redirect statt
   JS-Toggle, da serverseitig gefiltert wird, deshalb <a>, kein <input>). */
.btn-link{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--ink-soft);
  cursor:pointer;text-decoration:none}
.btn-link:hover{color:var(--ink)}
.btn-link--danger{color:var(--error)}
.btn-link--danger:hover{color:#7a1a15}

/* Berater-Verzeichnis (einstellungen-berater.php, 10.07.2026) - Kontaktkarten mit Initialen-Avatar
   statt schlichter Tabelle. */
.advisor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.advisor-card{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--ink);
  border-bottom-width:3px;border-bottom-color:var(--pistachio);border-radius:var(--r);
  padding:16px;background:var(--paper)}
.advisor-card__avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--pistachio-pale);
  color:var(--ink);font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.advisor-card__avatar img{width:100%;height:100%;object-fit:cover}
.advisor-card__body{flex:1;min-width:0}
.advisor-card__name{font-size:14.5px;font-weight:600;margin:0 0 4px;color:var(--ink)}
.advisor-card__position{font-size:12.5px;color:var(--pistachio-deep);font-weight:600;margin:0 0 4px}
.advisor-card__line{font-size:12.5px;color:var(--ink-soft);margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.advisor-card__line a{color:inherit}
.advisor-card__actions{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end;font-size:12.5px}
.opt-link{display:inline-block;font-size:13px;padding:7px 11px;border:1px solid var(--line);
  border-radius:8px;text-decoration:none;color:var(--ink-soft)}
.opt-link--active{background:var(--pistachio);border-color:var(--pistachio-deep);color:var(--ink);font-weight:600}

h1{font-size:20px;margin:0 0 6px}
.dyn-title{font-size:16px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
h3.dyn-title{font-size:14px;margin-top:14px}
.muted{color:var(--muted);font-size:13.5px}

.dyn-group{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.dyn-field{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--panel);font-size:13.5px}
.dyn-label{color:var(--muted)}
.dyn-value{font-weight:600;text-align:right}
.dyn-fallback{font-size:13px}
.dyn-fallback dt{color:var(--muted);margin-top:6px}
.dyn-fallback dd{margin:0 0 4px}

.contract-list,.doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.contract-list li,.doc-list li{background:var(--panel);border-radius:8px;padding:10px 12px}
.contract-list a,.doc-list a{color:var(--ink);font-weight:600;text-decoration:none}
.contract-list a:hover,.doc-list a:hover{text-decoration:none}

/* Phase-Kopf + Kachel-Raster, uebernommen aus compension-strecke_50.html */
.phase__head{margin:22px 0 14px}
.phase__ey{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--pistachio-deep);font-weight:700;margin:0 0 3px}
.phase__h{font-size:clamp(18px,2.2vw,22px);font-weight:600;letter-spacing:-.01em;margin:0}
.phase__l{color:var(--muted);font-size:13.5px;margin:4px 0 0}
.k1-h2{font-size:18px;font-weight:600;margin:4px 0 16px;letter-spacing:-.01em}
.back-link{margin:0 0 8px}
.back-link a{color:var(--ink-soft);font-size:13.5px;text-decoration:none;font-weight:600}
.back-link a:hover{text-decoration:none}

.k1-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
@media(max-width:640px){.k1-grid{grid-template-columns:1fr}}
.k1-tile{display:flex;align-items:center;gap:12px;text-align:left;width:100%;font:inherit;
  cursor:pointer;border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--paper);
  transition:border-color .15s,box-shadow .15s;text-decoration:none;color:inherit}
.k1-tile:hover{border-color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.k1-tile__dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.k1-tile__logo{width:38px;height:38px;border-radius:8px;flex:0 0 auto;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px}
.k1-tile__logo img{max-width:100%;max-height:100%;object-fit:contain}
.k1-tile__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.k1-tile__t{font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-block}
.k1-tile__s{font-size:12px;color:var(--muted)}
.k1-tile__n{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
/* Nutzer-Wunsch 17.07.2026: Teil-Fortschrittsbalken je Themenkachel (nur dieser Themenbereich). */
.k1-tile__prog{display:block;height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:7px}
.k1-tile__prog-fill{display:block;height:100%;border-radius:999px;transition:width .25s ease}
/* Nutzer-Wunsch 17.07.2026: Gast-Phase 4 - Termin im Mittelpunkt (Hero) + Ablauf als Prozessschritte. */
.guest-termin-hero{text-align:center;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:28px 20px;margin-bottom:22px}
.guest-termin-hero__ey{margin:0 0 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--pistachio-deep)}
.guest-termin-hero__ico{margin:0 0 6px;font-size:30px;line-height:1}
.guest-termin-hero__date{margin:0;font-size:25px;font-weight:700;color:var(--ink)}
.guest-termin-hero__sub{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.guest-ablauf__intro{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--ink)}
.guest-ablauf{list-style:none;margin:0;padding:0}
.guest-ablauf__step{position:relative;display:flex;gap:14px;padding-bottom:20px}
.guest-ablauf__step:last-child{padding-bottom:0}
.guest-ablauf__step:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:0;width:2px;background:var(--line)}
.guest-ablauf__num{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;position:relative;z-index:1}
.guest-ablauf__body{padding-top:3px}
.guest-ablauf__t{margin:0;font-size:14.5px;font-weight:600;color:var(--ink)}
.guest-ablauf__d{margin:3px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.k1-tile__arr{color:var(--muted);font-size:16px}
.k1-tile__bell{flex:0 0 auto;background:none;border:none;cursor:pointer;font-size:15px;padding:4px;
  border-radius:6px;line-height:1;opacity:.55;transition:opacity .15s,background .15s}
.k1-tile__bell:hover{opacity:1;background:var(--panel)}

/* Checkliste-Tab (SalesLeadModal) - Phase 1 zeigt Datenvollstaendigkeit statt manueller Aufgaben:
   Fortschrittsbalken + Haken-/Kreuz-Liste (Stammdaten) + Ampel-Punkt-Liste (Themenbereiche). */
.checklist-progress__bar{height:8px;border-radius:4px;background:var(--panel);
  border:1px solid var(--line);overflow:hidden;margin-bottom:6px}
.checklist-progress__fill{height:100%;background:var(--pistachio-deep);border-radius:4px;transition:width .2s}
.checklist-progress__label{margin:0;font-size:12.5px;color:var(--muted)}
.checklist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist-list__item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.checklist-list__item--done{color:var(--ink)}
.checklist-list__mark{width:16px;flex:0 0 auto;text-align:center;font-weight:700;color:var(--error)}
.checklist-list__item--done .checklist-list__mark{color:var(--ok)}
.checklist-list__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

/* Nutzer-Wunsch 22.07.2026 ("mit dem jeweiligen Logo des Produktes [...] und der Kollektiv/
   Rahmenvertragsnummer") - kleiner Kopf je Produktgruppe in der bAV-Checkliste
   (inc/SalesLeadModal.php $bavProduktGroups), oberhalb der jeweils eigenen .checklist-list. */
.checklist-product-head{display:flex;align-items:center;gap:8px;margin:12px 0 6px;font-size:12.5px;font-weight:600;color:var(--ink)}
.checklist-product-head img{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.checklist-product-head__placeholder{width:20px;height:20px;border-radius:50%;background:var(--line);flex:0 0 auto}

/* Sync-Log (sync-start.php) - scrollende Zeile-fuer-Zeile-Anzeige jedes Sync-Schritts, statt nur
   den letzten Schritt zu zeigen, damit sich der Fortschritt/eventuelle Fehler nachvollziehen lassen. */
/* Feste Fensterhöhe (Nutzer-Wunsch 26.07.2026: "feste fenstergröße [...] nur die oberen zeilen
   aktualisieren sich"): neueste Zeile wird per JS OBEN eingefügt (logLine in sync-start.php /
   einstellungen-sync.php), scrollTop bleibt 0 - der Kasten wächst nicht, ältere Zeilen wandern nach
   unten aus dem Sichtbereich (per Scrollen weiter einsehbar). */
.sync-log{height:280px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:12.5px;line-height:1.7}
.sync-log__row{display:flex;gap:10px;white-space:pre-wrap}
.sync-log__time{color:var(--muted);flex:0 0 auto}
.sync-log__msg{flex:1;min-width:0;word-break:break-word;color:var(--ink-soft)}
.sync-log__row--ok .sync-log__msg{color:#4A6B00}
.sync-log__row--error .sync-log__msg{color:var(--error);font-weight:600}

/* Detaillierte Feldaenderungen je Sync-Lauf (Nutzer-Wunsch 12.07.2026: "ich möchte jede
   synchronisierte person und zu jeder person und zu jedem vertrag die synchronisierten felder
   sehen") - je Person/Vertrag eine aufklappbare Karte (natives <details>, kein JS noetig) mit
   Feldliste alt->neu, unter dem bestehenden .sync-log-Rohprotokoll im selben Modal. */
.sync-detail{margin-top:14px}
.sync-detail__h{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);margin:16px 0 8px}
.sync-detail__h:first-child{margin-top:0}
.sync-detail__entity{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--paper)}
.sync-detail__entity summary{padding:8px 12px;cursor:pointer;font-size:13px;font-weight:600;list-style:none}
.sync-detail__entity summary::-webkit-details-marker{display:none}
.sync-detail__entity summary::before{content:'▸ ';color:var(--muted)}
.sync-detail__entity[open] summary::before{content:'▾ '}
.sync-detail__entity-sub{font-weight:400;color:var(--muted);font-size:11.5px}
.sync-detail__entity summary a{color:var(--ink);text-decoration:none}
.sync-detail__entity summary a:hover{text-decoration:none}
.sync-detail__fields{margin:0;padding:0 12px 10px 30px;list-style:none;font-size:12.5px}
.sync-detail__fields li{padding:3px 0;border-bottom:1px dashed var(--line)}
.sync-detail__fields li:last-child{border-bottom:none}
.sync-detail__old{color:var(--muted);text-decoration:line-through}
.sync-detail__new{color:#4A6B00;font-weight:600}

/* Nutzer-Wunsch 22.07.2026 ("den Einwilligungsverlauf als Modal [...] die Einzelnen einträge in
   einer Maske darstellen und klickbar machen") - aufklappbare Karte je Verlaufs-Eintrag, gleiches
   <details>-Muster wie .sync-detail__entity oben (native Klapplogik, kein JS noetig). */
.wa-consent-card{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--paper)}
.wa-consent-card__summary{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.wa-consent-card__summary::-webkit-details-marker{display:none}
.wa-consent-card__summary::before{content:'▸';color:var(--muted);flex:0 0 auto;padding-top:2px;font-size:11px}
.wa-consent-card[open] .wa-consent-card__summary::before{content:'▾'}
.wa-consent-card__summary .k1-tile__dot{margin-top:4px}
.wa-consent-card__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wa-consent-card__t{font-size:13px;font-weight:600;color:var(--ink)}
.wa-consent-card__s{font-size:12px;color:var(--ink-soft);word-break:break-word}
.wa-consent-card__date{font-size:11.5px;flex:0 0 auto;white-space:nowrap;padding-top:2px}
.wa-consent-card__detail{padding:0 12px 12px 34px}

/* Gruppierte Datenkarten (Format::renderEntity) */
.card__t{font-size:14px;font-weight:600;margin:0 0 12px}
/* Nutzer-Meldung 26.07.2026 ("bitte eine einheitliche schriftgröße nutzen. Ø je Altersgruppe
   (€/Monat) ist viel größer, als der rest") - .subbox__t (Sub-Ueberschrift innerhalb einer Karte,
   z.B. SalesLeadModal.php) war im Haupt-Stylesheet nie definiert, nur in der separaten
   strecke.php als Inline-<style> - dadurch fiel der Text auf den ungestylten Browser-Standard
   fuer <p> (~16px) zurueck. Gleiche Regel wie in strecke.php uebernommen.*/
.subbox__t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 4px}
.rf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 24px}
/* Nutzer-Meldung 10.09.2026 (BiPRO-Benutzername lief in die Passwort-Spalte): Ein Raster-Feld hat
   von Haus aus min-width:auto und kann deshalb NICHT schmaler werden als sein laengster Inhalt -
   eine lange E-Mail-Adresse schob sich einfach ueber die Nachbarspalte. min-width:0 erlaubt das
   Schrumpfen, overflow-wrap den Umbruch an beliebiger Stelle (Adressen und Nummern haben keine
   Leerzeichen, an denen ein normaler Umbruch greifen koennte). Gilt fuer jedes .rf-grid im Haus,
   nicht nur hier - dasselbe Problem hat jeder lange Wert. */
.rf-field{min-width:0}
.rf-field label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:0 0 3px}
.rf-value{font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}

label{display:block;font-size:12.5px;font-weight:600;margin:0 0 4px;color:var(--ink-soft)}
.field{margin-bottom:14px}
/* Nutzer-Wunsch 26.07.2026 ("die eingabefelder in den mitarbeiterdaten sind sehr groß [...]
   maximal komme dan 4stellige zahlen rein. die werte auch immer hinter die beschreibung
   platzieren") - fuer kurze numerische Felder (Anzahl/Alter): Label + Eingabefeld in EINER Zeile
   statt gestapelt, das Feld selbst nur so breit wie fuer eine vierstellige Zahl noetig, statt der
   sonst ueblichen width:100%. */
.field--num{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.field--num label{margin:0;flex:0 0 auto}
/* Nutzer-Meldung 26.07.2026 ("die felder und beschriftungen sind nicht ordentlich [...] überlappen
   sich") - .field--num input{width:70px} (Spezifitaet 0,1,1) und das generische
   input[type=text]{width:100%} weiter unten (ebenfalls 0,1,1) sind GLEICH spezifisch - bei
   gleicher Spezifitaet gewinnt die Regel, die im Stylesheet SPAETER steht, hier also faelschlich
   width:100% statt der gewuenschten 70px, wodurch sich die Felder in der Flex-Wrap-Zeile
   ueberlappten. Fix: mit input[type=text] statt nur input eine hoehere Spezifitaet (0,2,1)
   erzwingen, damit die Reihenfolge im Stylesheet keine Rolle mehr spielt.
   Nutzer-Meldung 26.07.2026 ("die eingabefelder sind immer noch sehr groß [...] auch passen die
   zahlen noch nicht ganz in die felder") - zwei Probleme: (1) das generische
   input[type=text]{padding:9px 11px} macht JEDES Feld optisch klobig, hier fuer die kompakten
   Zaehl-/Alter-Felder (max. 4-stellig) auf ein knapperes Padding+Schriftgroesse reduziert; (2) fuer
   Geld-Betraege (deutsches Format inkl. Tausenderpunkt+Nachkommastellen, z. B. "12.345,67" = bis zu
   9 Zeichen) reichten die bisherigen 70px nicht - dafuer jetzt eine EIGENE, breitere Klasse
   .field--money (siehe unten), .field--num bleibt bewusst schmal fuer reine Zaehl-/Alterswerte. */
.field--num input[type=text]{width:52px;flex:0 0 auto;text-align:right;padding:5px 6px;font-size:13px}
/* Fuer €-Betragsfelder (Ø Bruttogehalt gesamt/männlich/weiblich/je Altersgruppe in
   inc/SalesLeadModal.php) - gleiches kompaktes Label-vor-Feld-Layout wie .field--num, aber breit
   genug fuer bis zu 9-stellige deutsche Betragsformate ("12.345,67"), damit die Zahl nicht mehr
   abgeschnitten wird. */
.field--money{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.field--money label{margin:0;flex:0 0 auto}
.field--money input[type=text]{width:92px;flex:0 0 auto;text-align:right;padding:5px 8px;font-size:13px}
/* Nutzer-Wunsch 04.08.2026 ("können wir das symmetrischer und ordentlicher anordnen?") - die Zahlen-/
   Geldfeld-Matrizen im Mitarbeiterdaten-Popup (inc/SalesLeadModal.php) als gleichmaessiges Raster
   statt flex-wrap (das 5 Felder unschoen zu 4+1 umbrach und wegen unterschiedlich breiter Labels nie
   fluchtete). Label ueber dem Feld, Eingabe fuellt die Zelle -> exakt untereinander ausgerichtete
   Spalten. minmax(0,1fr) verhindert, dass ein langes Label (z. B. „Ø Bruttogehalt gesamt (€/Monat)")
   seine Spalte breiter zieht. Ueberschreibt bewusst das kompakte Inline-Layout von .field--num/
   .field--money NUR innerhalb von .ma-grid. */
.ma-grid{display:grid;gap:12px 16px;margin:0 0 4px}
.ma-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ma-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ma-grid .field{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0}
.ma-grid .field > label{flex:none;margin:0;font-size:11px;line-height:1.25}
.ma-grid .field input[type=text]{width:100%;text-align:right;padding:6px 8px;font-size:13px}
@media(max-width:680px){.ma-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ma-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Nutzer-Wunsch 13.07.2026 ("bitte bei der personen und firmenanlage die pflichtfelder kenntlich
   machen") - Sternchen hinter dem Label-Text, gleiche Farbe wie .alert-error/.btn-link--danger. */
.field__req{color:var(--error)}
/* Nutzer-Wunsch 04.08.2026: saubere Blöcke mit Zeilen (Label links, Schalter rechts), je Gruppe ein
   Block. Geteilte „Toggle-Liste" für Kommunikation (An/Aus-Switch, Zeile = <label>) UND Automatisierung
   (Nein/teilweise/Ja-Seg-Switch, Zeile = <div>). Bei Kommunikation klappt unter der eingeschalteten
   Zeile das Detail-Panel auf (.tgl-detail). Siehe inc/SalesLeadModal.php. */
.tgl-list{margin:0}
.tgl-item + .tgl-item{border-top:1px solid var(--line)}
.tgl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:9px 2px}
label.tgl-row{cursor:pointer}
.tgl-label{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35}
.tgl-ctrl{flex:0 0 auto}
label.tgl-row:hover .tgl-label{color:var(--pistachio-deep)}
.tgl-detail{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.tgl-detail__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin-bottom:10px}
.tgl-detail__toggles{display:flex;flex-wrap:wrap;gap:10px 20px}
.tgl-detail .field{margin:0}
.tgl-detail .field > label{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:3px}
.tgl-detail select,.tgl-detail input[type=text]{width:100%}
@media(max-width:640px){.tgl-detail__grid{grid-template-columns:1fr}}
.field__req-hint{font-size:11.5px;color:var(--muted);margin:2px 0 12px}
/* Nutzer-Meldung 10.09.2026 („alles symetrisch und den platz besser nutzen"): url und search
   fehlten in dieser Liste. Ein <input type="url"> bekam dadurch KEIN width:100% und stand als
   schmales Browser-Standardfeld mitten in einer breiten Karte - genau der Effekt, der in den
   BiPRO-Adressfeldern zu sehen war. Ein Feld, das hier fehlt, faellt erst auf, wenn es jemand
   benutzt; deshalb stehen jetzt alle Texttypen drin. */
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=number],
input[type=url],input[type=search],input[type=time],input[type=month],
select,textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
textarea{min-height:64px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pistachio);outline-offset:1px;border-color:var(--pistachio-deep)}

/* Nutzer-Meldung 11.07.2026: "ich wünsche mir [...] mehr filigrane optik, aufgeräumt, schlicht und
   luxuriös. das portal wirkt teilweise verspielt." - die vollrunden "Pillen"-Buttons (border-
   radius:999px) lesen sich candyhaft/verspielt; kantigere, zurueckhaltendere Ecken (var(--r), wie
   Karten/Inputs) und eine duennere Kontur wirken ruhiger und passen zur eher schlichten,
   kantig-professionellen Optik von compension.de. */
.btn-primary{width:100%;font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--ink);
  background:var(--pistachio);color:var(--ink);padding:10px 16px;border-radius:var(--r)}
.btn-primary:hover{background:var(--pistachio-deep)}

.btn-secondary{font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);padding:7px 14px;border-radius:var(--r)}
.btn-secondary:hover{border-color:var(--ink)}

/* Wiedervorlagen (Personen-/Vertrags-/Firmenseite + wiedervorlagen.php) - Eigenentwicklung,
   keine Portal-Daten. Kompaktes Zeilenlayout je Wiedervorlage; das Anlegen laeuft ueber das
   Popup unten (.modal-overlay, siehe Format::reminderModal()). */
.reminder-list{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.reminder-row{display:flex;align-items:center;gap:8px 14px;padding:10px 0;border-bottom:1px solid var(--panel);flex-wrap:wrap}
.reminder-row--done{opacity:.65}
.reminder-row__prio{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.reminder-row__title{font-weight:600;font-size:13px;flex:0 0 auto;min-width:120px}
.reminder-row__badge{font-size:10px;font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.02em}
.reminder-row__due{font-size:12.5px;color:var(--muted);flex:0 0 auto;min-width:80px}
/* flex-basis:100% + order zwingt die Notiz auf eine eigene, volle Zeile UNTER Titel/Faelligkeit/
   Dokument/Zustaendigem (Nutzer-Wunsch 10.07.2026: "was der Inhalt war, ist nicht sofort
   sichtbar") - unabhaengig von der DOM-Reihenfolge in Format::reminderRow(). */
.reminder-row__note{font-size:12.5px;color:var(--ink-soft);flex:1 1 100%;order:5}
.reminder-row__assigned{font-size:12px;color:var(--muted);flex:0 0 auto}
.reminder-row__doc{flex:0 0 auto;text-decoration:none;font-size:13px}

/* Wiedervorlage-Karte im Personen-/Firmen-/Vertrags-Popup (Format::reminderRow(),
   Nutzer-Wunsch 12.07.2026: "das muss clean und nachvollziehbar sein. im fokus steht die notiz
   und für wen die Wiedervorlage ist") - drei klar getrennte Zeilen statt einer ueberladenen
   flex-wrap-Zeile: Kopf (Prio/Titel/Datum), Notiz allein auf eigener Zeile, Fuss (Zustaendiger +
   Dokument + Aktion). Bewusst eigene Klassen statt .reminder-row - die bleibt fuer
   inc/header.php/wiedervorlagen.php unveraendert. */
.reminder-card{padding:12px 2px;border-bottom:1px solid var(--panel)}
.reminder-card:last-child{border-bottom:none}
.reminder-card--done{opacity:.6}
.reminder-card__row1{display:flex;align-items:center;gap:8px}
.reminder-card__prio{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.reminder-card__title{font-weight:600;font-size:13.5px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reminder-card__badge{font-size:10px;font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.02em;flex:0 0 auto}
.reminder-card__due{font-size:12px;color:var(--muted);flex:0 0 auto;white-space:nowrap}
.reminder-card__note{font-size:13px;color:var(--ink-soft);line-height:1.45;margin:6px 0 0}
.reminder-card__row2{display:flex;align-items:center;gap:10px;margin-top:9px}
.reminder-card__assigned{font-size:12px;font-weight:600;color:var(--ink)}
.reminder-card__doc{text-decoration:none;font-size:13px}
.reminder-card__row2 form{margin-left:auto}

/* Popup fuer "Neue Wiedervorlage" (Format::reminderModal()) - CSS-Overlay + minimaler JS-Toggle
   (assets/app.js::toggleModal()), kein Framework noetig. */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(29,29,27,.5);z-index:200;
  align-items:center;justify-content:center;padding:20px}
.modal-overlay.modal--open{display:flex}
/* Kopf (mit Schliessen-Kreuz) und Fuss bleiben fix, nur der Inhalt scrollt (Nutzer-Meldung
   10.07.2026: das Schliessen-Kreuz scrollte bei langen Popups mit weg, weil bisher .modal SELBST
   die scrollende Flaeche war statt nur .modal__body). .modal ist jetzt ein Flex-Container ueber
   die volle Hoehe; .modal__head bzw. .modal__foot sind flex:0 0 auto (fixe Groesse), .modal__body
   ist flex:1 1 auto mit eigenem overflow-y - unabhaengig davon, ob .modal__body/.modal__foot
   direkte Kinder von .modal sind (Format::reminderModal()) oder in einem <form> stecken (GevoForm-
   Popups) - dafuer bekommt ein direktes <form>-Kind von .modal ebenfalls display:flex. */
.modal{background:var(--paper);border-radius:var(--r);max-width:460px;width:100%;max-height:88vh;
  overflow:hidden;border:1.5px solid var(--ink);border-top-width:4px;border-top-color:var(--pistachio);
  display:flex;flex-direction:column}
.modal--wide{max-width:760px}
/* Nutzer-Meldung 10.09.2026 („den platz besser nutzen"): Das Gesellschaften-Fenster traegt elf
   Reiter und darunter ganze Formulare (Zugangsdaten, Tarife, Provisionen). Bei 760px stand jedes
   zweispaltige Raster in Wahrheit einspaltig und die Reiterleiste brach frueh um. Eigene Klasse
   statt .modal--wide zu vergroessern - die teilen sich noch das Tarif- und das Mail-Fenster, die
   deutlich weniger Inhalt haben. */
.modal--insurer{max-width:min(1080px, 94vw)}
/* Nutzer-Meldung 10.09.2026 („Das popup ist auch zu klein - ich will nicht scrollen müssen. mach es
   breiter"): Die Anspruchsliste eines Rahmenvertrags hat elf Spalten. In den fest verdrahteten
   900px lag die letzte - ausgerechnet die mit dem Anmelde-Knopf - ausserhalb des Sichtbaren, und
   niemand kam auf die Idee, waagerecht zu scrollen. Fuer breite Tabellen deshalb eine eigene
   Klasse, die den verfuegbaren Platz nimmt. */
.modal--tabelle{max-width:min(1600px, 96vw)}

/* Zweispaltiges Feldraster fuer Formulare in Karten (BiPRO-Verbindung). Anders als .field-row, das
   die Felder auf ihre Inhaltsbreite laesst und dadurch unterschiedlich breite Spalten erzeugt,
   sind hier alle Spalten gleich breit - das ist der „symetrisch"-Teil der Meldung. Unter 260px je
   Spalte klappt es von selbst auf eine Spalte um. */
.feld-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.feld-raster .field{margin-bottom:14px}
.feld-raster--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.feld-raster__voll{grid-column:1/-1}
/* Feste Spaltenzahl statt auto-fit: die Felder gehoeren PAARWEISE zusammen (Umgebung + Kennung,
   dann die Adressen). Bei auto-fit sprang das Raster je nach Fensterbreite auf drei Spalten und
   riss die Paare auseinander - eine Adresse stand dann neben der ConsumerID. Auf schmalen Fenstern
   klappt alles auf eine Spalte. */
@media(max-width:720px){.feld-raster,.feld-raster--drei{grid-template-columns:1fr}}
/* Nutzer-Meldung 26.07.2026 ("die popups [...] sind auch viel zu klein") - #kpiZoomBody (inc/
   footer.php) nutzt nur die generische .modal-Groesse (max-width 460px) OHNE eigenes Padding, die
   hineinkopierte Kachel (jetzt die volle 148px-Version, siehe StandortModal::renderKpiTiles())
   sass dadurch beengt direkt am Popup-Rand. Deutlich breiter + eigener Innenabstand, damit Donut +
   Legende ausreichend Platz haben. */
#kpiZoomBody{max-width:560px;padding:28px;cursor:zoom-out}
/* Nutzer-Wunsch 20.07.2026 ("Checklisten Tab als Sidebar [...] immer sichtbar") - das
   Interessenten-Detailmodal (vertrieb.php) braucht mehr Breite als die uebrigen .modal--wide-
   Popups, seit die Checkliste als dauerhafte 280px-Spalte danebensteht statt in einem Tab zu
   verschwinden. Eigene, spezifischere Klasse statt .modal--wide selbst zu vergroessern, damit die
   Themenbereich-Popups (leadKlBav/leadKlKomm/...) bei 760px bleiben. */
/* Nutzer-Meldung 10.09.2026 ("Grundsätzlich ist es gut, dass das in einem Popup / Modal
   funktioniert. Allerdings ist es etwas klein. ich brauche es breiter.") - 1020px reichten fuer
   Checklisten-Sidebar + Inhalt nicht mehr. min(): auf kleinen Bildschirmen bleibt es bei 94vw,
   sonst waere das Popup breiter als das Fenster. */
.modal--lead{max-width:min(1400px, 94vw)}
/* Nutzer-Meldung 10.09.2026 ("ebenfalls müssen auch die Popups hinter den Kacheln Stammdaten,
   Mitarbeiterdaten etc größer werden") - die Themenbereich-Popups des Interessenten-Modals
   (leadKlStammdaten/-Mitarbeiter/-Bav/-Bkv/-Komm, die beiden Erfassungs-Dialoge und die drei
   Business-Case-Popups). Eigene Klasse statt .modal--wide zu vergroessern: An .modal--wide haengen
   Popups in ganz anderen Bereichen (Agentur-Dashboard, Gesellschaften), die 760px behalten
   sollen. */
.modal--kl{max-width:min(1240px, 94vw)}
/* Nutzer-Wunsch 20.07.2026 ("die tabelle muss vollständig sichtbar sein") - fuer Popups mit vielen
   Tabellenspalten (Provisionen-/Personen-Detail auf agentur-dashboard.php), bei denen .modal--wide
   (760px) die Tabelle unsichtbar horizontal abschneidet, ohne dass ein Scrollbalken auffiel. .modal
   selbst ist bereits width:100% mit max-width, deshalb auf schmalen Bildschirmen weiterhin sicher. */
.modal--xwide{max-width:1080px}
/* Nutzer-Meldung 26.07.2026 ("ich glaube die breite des fensters muss erhöhrt werden") - seit die
   Ist-Stand-Karte als 280px-Sidebar in den 3 Analyse-Popups (Gesundheit/Rente/Kommunikation)
   steckt, blieb bei .modal--wide (760px) kaum noch Platz fuer den Hauptinhalt daneben. Gleiches
   Prinzip wie .modal--lead oben: eigene Klasse statt .modal--wide selbst zu vergroessern, damit
   die uebrigen 14 .modal--wide-Popups in dieser Datei unveraendert bei 760px bleiben. */
/* Nutzer-Meldung 27.07.2026 ("ich finde generell das modal auch zu klein") - die drei Analyse-
   Popups (Gesundheit/Rente/Kommunikation) von 960px auf 1160px verbreitert, damit Kopfband +
   Zwei-Spalten-Layout mehr Luft bekommen. */
.modal--analyse{max-width:1160px}
.modal > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

/* Termin-Erfassung in der Phasen-Sidebar (Nutzer 10.09.2026: „Die Termineingabe in der Sidebar ist
   ziemlich präsent - auch, wenn bereits ein Termin vereinbart wurde"). Steht ein Termin, ist das
   Formular zugeklappt und nur die Zeile bleibt - siehe inc/SalesLeadModal.php. */
.slm-termin-neu > summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  list-style:none;padding:4px 0}
.slm-termin-neu > summary::-webkit-details-marker{display:none}
.slm-termin-neu > summary:hover{color:var(--ink)}
.slm-termin-neu[open] > summary{margin-bottom:6px}

/* Kernaussage-Kopfband im Gesundheit-Popup (Nutzer-Meldung 27.07.2026: "die kernaussage wird nicht
   gut sichtbar") - die grosse Fehlzeiten-Kosten-Zahl + drei Kennzahl-Chips ganz oben. */
.gsd-hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  background:linear-gradient(180deg,var(--panel),var(--paper));border:1px solid var(--line);
  border-radius:16px;padding:20px 26px;margin-bottom:18px}
.gsd-hero__main{flex:0 1 auto;min-width:220px}
.gsd-hero__eyebrow{margin:0 0 4px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-soft)}
.gsd-hero__num{margin:0;font-size:34px;line-height:1.05;font-weight:800;color:var(--ink);
  letter-spacing:-.01em}
.gsd-hero__sub{margin:4px 0 0;font-size:13px;color:var(--muted)}
.gsd-hero__stats{display:flex;gap:12px;flex-wrap:wrap;flex:1 1 auto;justify-content:flex-end}
.gsd-stat{flex:0 1 auto;min-width:140px;max-width:240px;background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--pistachio-deep);border-radius:12px;padding:11px 14px}
.gsd-stat--warn{border-left-color:var(--error)}
.gsd-stat__k{margin:0 0 3px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-soft)}
.gsd-stat__v{margin:0;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.gsd-stat--warn .gsd-stat__v{color:var(--error)}
@media (max-width:720px){.gsd-hero__stats{justify-content:flex-start}}
/* Nutzer-Wunsch 12.07.2026: "Warnmeldungen [...] nicht als Browser warnung ausgeben, sondern ein
   popup mit der warnung" - #globalConfirmModal (inc/footer.php), Text kann \n-Zeilenumbrueche
   enthalten (z. B. Person-loeschen-Warnung mit Aufzaehlung) - pre-line erhaelt diese, ohne dass
   der PHP-seitige Text extra HTML-Zeilenumbrueche einbauen muesste. */
.confirm-modal__text{white-space:pre-line}

/* Dokument-Vorschau im Wiedervorlage-Popup (12.07.2026, Nutzer-Wunsch: "wenn ich ein dokument zu
   einer wiedervorlage hinzufügen möchte, dann möchte ich die geladenen dokumente nochmal kurz
   ansehen können [...] kacheln [...] nur klein und der größe ans popup angepasst") - bewusst
   kleiner als .doc-tile/.doc-grid (die dienen als Hauptansicht auf eigenen Seiten, hier ist es nur
   eine Zusatz-Vorschau innerhalb eines ohnehin schon vollen Popups). */
.doc-preview-grid{margin-top:8px;max-height:200px;overflow-y:auto;border-top:1px solid var(--line);padding-top:6px}
.doc-preview-cat{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--pistachio-deep);margin:6px 0 4px}
.doc-preview-cat:first-child{margin-top:0}
.doc-preview-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px;margin-bottom:2px}
.doc-preview-tile{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:6px;
  padding:5px 6px;text-decoration:none;color:inherit;background:var(--paper)}
.doc-preview-tile:hover{border-color:var(--ink)}
.doc-preview-tile__badge{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;color:#fff;border-radius:4px;padding:1px 4px}
.doc-preview-tile__name{font-size:10px;font-weight:600;color:var(--ink);word-break:break-word;line-height:1.25}
.doc-preview-tile__date{font-size:9px;color:var(--muted)}
/* Kopfzeile deckend (Nutzer-Meldung 10.09.2026: „auch die kopfzeile ist teilweise durchsichtig
   (hintergrund sichtbar)"). Ohne eigene Farbe erbt sie nichts - jeder Inhalt, der sich darunter
   schiebt, scheint durch. position/z-index halten sie zusaetzlich ueber dem rollenden Koerper. */
.modal__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);
  background:var(--paper);position:relative;z-index:3}
.modal__title{font-size:15px;font-weight:600;margin:0}
.modal__close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;padding:0}
.modal__close:hover{color:var(--ink)}
.modal__body{padding:16px 18px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal__foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid var(--line)}
/*
 * Drei gleich breite Felder nebeneinander im Dialog (Nutzer-Meldung 10.09.2026: „auch nicht alles
 * symmetrisch"). Vorher flex:1 mit verschiedenen Mindestbreiten: Brach eine Beschriftung auf zwei
 * Zeilen um, rutschte NUR dieses Eingabefeld eine Zeilenhoehe nach unten.
 *
 * align-items:end setzt die Eingaben auf eine Linie, egal wie hoch die Beschriftung darueber ist.
 * Unter 560 px untereinander - schmaler wird keine Spalte mehr breit genug fuer ihren Platzhalter.
 */
.field-3er{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.field-3er .field{margin-bottom:16px}
@media(max-width:560px){.field-3er{grid-template-columns:1fr}}

.modal__list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;margin-bottom:6px}
.modal__divider{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:4px 0 12px;padding-top:10px;border-top:1px solid var(--line)}

.priority-chips{display:flex;gap:8px}
.priority-chips label{position:relative;cursor:pointer}
.priority-chips input{position:absolute;opacity:0;pointer-events:none}
.priority-chips span{display:inline-block;font-size:12.5px;font-weight:600;padding:6px 13px;border:1px solid var(--line);border-radius:20px}
.priority-chips input:checked + span{font-weight:600;color:#fff;border-color:transparent}
.priority-chips input[value=hoch]:checked + span{background:var(--error)}
.priority-chips input[value=normal]:checked + span{background:#C77700}
.priority-chips input[value=niedrig]:checked + span{background:var(--muted)}

/* Nutzer-Wunsch 20.07.2026 ("für die Priorität einen Schalter [...] 3-stufiger Schalter statt
   Radiobuttons") - durchgehender Segmented-Control statt der einzelnen, mit Abstand angeordneten
   .priority-chips-Pillen (die bleiben fuer andere Ja/Nein-Felder z. B. in inc/SalesLeadModal.php
   unveraendert, deshalb eine eigene Klasse statt priority-chips umzubauen). */
/* Nutzer-Meldung 17.07.2026 ("der DATEV im Einsatz schalter ist sehr schlecht zu erkennen [...]
   hellgraue schrift auf weiß mit feiner linie [...] wie einen schalter aussehen lassen [...] edler
   look beibehalten") - echter Segmented-Control-Look: sichtbare Track-Flaeche (--panel) als eigenes
   Bedienelement, die aktive Option als gefuellte "schwebende" Pille mit Schatten, inaktive Optionen
   in klar lesbarem dunklem Text (nicht mehr hellgrau) mit Hover-Feedback. flex-wrap statt des
   frueheren overflow:hidden, damit lange Optionslabels umbrechen statt abgeschnitten zu werden. */
.seg-switch{display:inline-flex;flex-wrap:wrap;gap:4px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:22px}
.seg-switch label{position:relative;cursor:pointer;margin:0}
.seg-switch input{position:absolute;opacity:0;pointer-events:none}
.seg-switch span{display:inline-block;font-size:12.5px;font-weight:600;padding:6px 15px;border-radius:18px;color:var(--ink-soft);background:transparent;transition:background .15s,color .15s,box-shadow .15s}
.seg-switch label:hover span{background:rgba(0,0,0,.05);color:var(--ink)}
.seg-switch input:focus-visible + span{outline:2px solid var(--pistachio-deep);outline-offset:1px}
/* Nutzer-Meldung 20.07.2026 ("der schalter [...] funktioniert nicht ordentlich. der text der
   angewählten option verschwindet") - dieselbe Fehlerklasse ist jetzt zum DRITTEN Mal aufgetreten
   (Prioritaet, Tarif-Preismodell, jetzt bAV-Finanzierung "arbeitgeberfinanziert"/"mischfinanziert"):
   weisse Schrift bei :checked ohne wertspezifische Hintergrundfarbe macht die Auswahl unsichtbar,
   sobald ein neuer Schalter-Wert eingefuehrt wird, ohne dass jemand daran denkt, hier eine
   passende Zeile zu ergaenzen. Deshalb jetzt ein wertUNABHAENGIGER Standard-Hintergrund (dunkel,
   immer lesbar) - die spezifischen Werte unten ueberschreiben ihn weiterhin fuer ihre semantische
   Farbe (rot/gruen/gelb), aber JEDER kuenftige neue Wert bekommt automatisch einen funktionierenden,
   sichtbaren Zustand statt unsichtbar zu werden. */
.seg-switch input:checked + span{color:#fff;background:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.22)}
.seg-switch input[value=hoch]:checked + span{background:var(--error)}
.seg-switch input[value=normal]:checked + span{background:#C77700}
.seg-switch input[value=niedrig]:checked + span{background:var(--muted)}
/* Nutzer-Wunsch 13.07.2026 (Vertrieb-Kennenlernen "DATEV im Einsatz?"): zweite Werte-Gruppe fuer
   denselben .seg-switch - eigene value-Selektoren, keine Kollision mit hoch/normal/niedrig. */
.seg-switch input[value=ja]:checked + span{background:var(--ok)}
.seg-switch input[value=nein]:checked + span{background:var(--muted)}
.seg-switch input[value=unklar]:checked + span{background:#C77700}
/* Nutzer-Meldung 20.07.2026 ("umschalten bewirkt wieder das verschwinden eines der optionen") -
   dritte Werte-Gruppe fuer denselben .seg-switch (Tarif-Preismodell, siehe inc/TariffModal.php)
   hatte noch keine eigene Hintergrundfarbe - genau derselbe Fehlertyp wie beim Prioritaets- und
   Ja/Nein-Schalter zuvor: weisse Schrift (Zeile 678) ohne passenden Hintergrund macht die
   ausgewaehlte Option unsichtbar. */
.seg-switch input[value=einheitspreis]:checked + span{background:var(--ok)}
.seg-switch input[value=staffelpreis]:checked + span{background:var(--pistachio-deep)}

/* Summen-ueber-alle-Tarife-Karte (arbeitgeber-tarife.php + Firmen-Dashboard) - global, da auf
   zwei Seiten genutzt. .ct-amt traegt data-m (Monatswert); ctSetMode() (app.js) schaltet Monat/Jahr. */
.ct-amt{white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-totals{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:16px 18px;margin-bottom:24px}
.ct-totals__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ct-totals__title{margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.ct-totals__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.ct-total{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.ct-total--sum{border-color:var(--ink);border-bottom-width:3px;border-bottom-color:var(--pistachio)}
.ct-total__l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.ct-total__v{font-size:19px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ct-total--sum .ct-total__v{color:var(--pistachio-deep)}

.alert{padding:10px 12px;border-radius:8px;font-size:13.5px;margin-bottom:14px}
.alert-error{background:#FBEAE9;color:var(--error);border:1px solid var(--error)}
.alert-success{background:#EEF5DE;color:#4A6B00;border:1px solid var(--pistachio-deep)}
.alert-warning{background:#FFF6E0;color:#8A6100;border:1px solid #E8B93B}
.alert-info{background:#E9F2FB;color:#1D5A96;border:1px solid #7FB1DE}

/* ── OFFENE EINGABEN ────────────────────────────────────────────────────────────────────────
   Kasten für Angaben, die beim Ausführen eines Vorgangs bzw. beim Einsetzen einer Mailvorlage
   fehlen (Nutzer-Wunsch 26.08.2026: „das muss klarer erfasst werden, dass eine Eingabe
   erforderlich ist"). Warnfarbe wie .alert-warning - die Angabe fehlt, und niemand soll den
   Vorgang auslösen, ohne sie gesehen zu haben. Ist alles ausgefüllt, schlägt der Kasten in die
   Sprache einer erledigten Meldung um (.alert-success).

   Gemeinsam für inc/gevo_aktionen.php und inc/MailComposeModal.php - zwei Kopien liefen
   auseinander. */
.eingabe-kasten{margin:0 0 14px;padding:12px 14px 4px;background:#FFF6E0;border:1px solid #E8B93B;
  border-radius:8px}
.eingabe-kasten__kopf{display:flex;align-items:baseline;gap:8px;margin:0 0 9px;font-size:11.5px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8A6100}
.eingabe-kasten__kopf span{font-weight:400;text-transform:none;letter-spacing:0;font-size:12px}
.eingabe-kasten .field{margin-bottom:10px}
.eingabe-kasten label{color:#6b4d00}
/* Mit Element und Attribut geschrieben: Ein globales input[type=…] schlägt sonst jede reine
   Klassenregel (Projektfalle). */
.eingabe-kasten input[type=text], .eingabe-kasten input[type=date], .eingabe-kasten input[type=number]{
  background:#fff;border-color:#E8B93B}
.eingabe-kasten input[type=text].eingabe-offen, .eingabe-kasten input[type=date].eingabe-offen,
.eingabe-kasten input[type=number].eingabe-offen{box-shadow:0 0 0 2px rgba(232,185,59,.28)}
.eingabe-pflicht{padding:0 5px;border:1px solid #E8B93B;background:#fff;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:#8A6100}
.eingabe-kasten__fuss{margin:0 0 8px;font-size:11.5px;color:#8A6100}
.eingabe-kasten--ok{background:#EEF5DE;border-color:var(--pistachio-deep)}
.eingabe-kasten--ok .eingabe-kasten__kopf,
.eingabe-kasten--ok .eingabe-kasten__fuss,
.eingabe-kasten--ok label{color:#4A6B00}
.eingabe-kasten--ok .eingabe-pflicht{border-color:var(--pistachio-deep);color:#4A6B00}
.eingabe-kasten--ok input[type=text], .eingabe-kasten--ok input[type=date],
.eingabe-kasten--ok input[type=number]{border-color:var(--pistachio-deep)}


/* Störfall-Status-Badges (Nutzer-Wunsch 14.08.2026) - identische Optik in Berater- UND AG-Portal. */
.inc-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 9px;
  border-radius:999px;white-space:nowrap;line-height:1.7;border:1px solid transparent}
.inc-badge--offen{background:#FBEAE9;color:var(--error);border-color:var(--error)}
.inc-badge--prog{background:#FFF6E0;color:#8A6100;border-color:#E8B93B}
.inc-badge--done{background:#EEF5DE;color:#4A6B00;border-color:var(--pistachio-deep)}
.inc-badge--prio-hoch{background:#FBEAE9;color:var(--error);border-color:var(--error)}
.inc-badge--muted{background:var(--panel);color:var(--muted);border-color:var(--line)}

/* Geschaeftsvorfall-Formular (GevoForm) */
.gevo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 20px}

/* Nutzer-Wunsch 21.07.2026 ("das sieht alles noch nicht so professionell und geordnet aus") -
   sauberes, geordnetes Layout fuer den GeVo-Editor (vertrag-gevo.php, .gevo-form-Wrapper um
   GevoForm::renderFieldsGroupedRaw()): klare Sektions-Trennung, gleichmaessiges Feld-Raster,
   Textareas ueber die volle Breite (sonst zieht ihre Hoehe die Nachbarfelder auseinander und es
   entstehen die grossen Luecken aus dem Screenshot). Die Regeln ueberschreiben bewusst die inline
   gesetzten Abstaende der Ueberschriften (!important schlaegt inline-Style ohne !important). */
.gevo-form .phase__ey{margin:26px 0 14px !important;padding:0 0 7px !important;border-top:none !important;
  border-bottom:2px solid var(--ink);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.09em}
.gevo-form > .phase__ey:first-child{margin-top:2px !important}
.gevo-form .card__t{margin:20px 0 10px !important;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.gevo-form .gevo-grid{align-items:start;gap:15px 22px;margin-bottom:2px}
.gevo-form .gevo-grid .field{margin-bottom:0}
.gevo-form .field:has(.gevo-textarea){grid-column:1 / -1}
.gevo-form .gevo-textarea{min-height:88px}
.gevo-form .field > label{display:block;margin-bottom:5px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.gevo-form .seg-switch{margin-top:1px}

/* Nutzer-Wunsch 21.07.2026 ("gevos antworten auch, wenn die auslösung geklappt hat. können wir die
   antwort auch anzeigen?") - aufgeraeumte Schluessel/Wert-Darstellung der Portal-Antwort nach dem
   Auslösen (render_gevo_response() in vertrag-gevo.php), rekursiv leicht eingerueckt. */
.gevo-resp{font-size:13px}
/* Nutzer 13.08.2026: Werte brachen bei verschachtelten Antworten (files > #1 > id/name) Zeichen für
   Zeichen um, weil selbst kurze Keys („id") fest 120px reservierten. fit-content(180px) hält kurze
   Keys kurz und cappt lange; minmax(0,1fr) lässt die Wert-Spalte schrumpfen ohne 1-Zeichen-Umbruch. */
.gevo-resp__row{display:grid;grid-template-columns:fit-content(180px) minmax(0,1fr);gap:6px 14px;
  padding:5px 0;border-top:1px solid var(--panel);align-items:start}
.gevo-resp__row:first-child{border-top:none}
.gevo-resp__k{font-weight:600;color:var(--ink-soft);overflow-wrap:anywhere}
.gevo-resp__v{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.gevo-resp .gevo-resp{margin-left:2px;border-left:2px solid var(--panel);padding-left:10px}

/* Nutzer-Wunsch 27.07.2026 ("an die Felder, die im Gästezugang ausgefüllt werden können einen
   kleinen Info punkt geben, wo erklärt wird, was in das Feld eingegeben werden muss") - kleines
   ⓘ-Icon hinter dem Feld-Label mit Tooltip (data-tip). Wird per JS in vorbereitung.php an die
   Gastfelder gehaengt (GUEST_FIELD_HINTS). Tooltip auf Hover UND Fokus/Tap (tabindex). */
/* Schrift erbt bewusst die App-Schrift (kein Serif). Tooltip laeuft ueber das native title-Attribut
   (siehe vorbereitung.php) - so wird er nie vom scrollbaren Popup abgeschnitten. */
.fld-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border:1px solid var(--line,#d7d7d2);border-radius:50%;background:var(--paper,#f5f5f0);color:var(--ink-soft,#666);font:600 10px/1 inherit;cursor:help;vertical-align:middle;user-select:none;flex:0 0 auto}
.fld-i:hover,.fld-i:focus{background:var(--pistachio-deep,#5b7a52);border-color:var(--pistachio-deep,#5b7a52);color:#fff;outline:none}

/* Nutzer-Wunsch 21.07.2026 ("die eingabefelder [...] kleiner dahinter platziert [...] rechts
   daneben") - Schalter + davon abhaengige Folge-Schalter/-Felder in EINER Zeile statt gestapelt
   (siehe inc/SalesLeadModal.php $renderBavProdukt: BU eingeschlossen -> BU-Rente/Beitragsbefreiung
   -> BU-Rente-Hoehe, Rahmenvertrag vorhanden -> Rahmenvertragsnummer). */
.field-row{display:flex;align-items:flex-end;gap:10px 16px;flex-wrap:wrap;margin-bottom:14px}
.field-row .field{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-block;font-size:13px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.opt input:checked + span{background:var(--pistachio);border-color:var(--pistachio-deep);font-weight:600}

/* Vertrieb: Schritt-1-"Kennenlernen"-Themenkacheln (Nutzer-Wunsch 13.07.2026: "orientiere dich
   dabei an den schritten der compension strecke. checkliste finde ich gut") - Ampel-Kachel je
   Themenbereich (Mitarbeiterdaten/bAV/bKV/Kommunikation), angelehnt an strecke.php's k1Kachel(),
   aber im bestehenden App-Look statt dessen Client-Prototyp-CSS. */
.k1-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.k1-tile{display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);cursor:pointer;width:100%}
.k1-tile:hover{border-color:var(--ink)}
.k1-tile__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.k1-tile__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.k1-tile__t{font-size:13.5px;font-weight:600;color:var(--ink)}
.k1-tile__s{font-size:11.5px;color:var(--muted)}
.k1-tile__n{font-size:11px;color:var(--ink-soft)}
.k1-tile__arr{color:var(--muted);flex:0 0 auto}

/* Dynamische Wiederholzeilen (Sprachen) in den Kennenlernen-Popups - addDynRow()/removeDynRow()
   in app.js klonen ein <template> in den jeweiligen Container (Sprache + Abteilung + Loeschen,
   Nutzer-Wunsch 20.07.2026: "Sprachen auch unterschiedlichen Abteilungen zuordnen"). Die vormals
   zusaetzliche Karten-Variante (.dyn-row--card) fuer bAV-Produkte/bKV-Tarife ist entfallen - beide
   nutzen inzwischen das Formular-dann-Kachel-Muster (.bav-produkt-tile* unten). */
.dyn-row{display:grid;grid-template-columns:1fr 1fr 30px;gap:8px;align-items:center;margin-bottom:8px}
.dyn-row__del{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.dyn-row__del:hover{border-color:var(--error);color:var(--error)}

/* Nutzer-Wunsch 21.07.2026 ("erfasste produkte nicht als liste ausgeben, sondern als Kachel. die
   kachel soll das logo und den durchführungsweg mit rahmenvertrag/ kollektivvertragsnummer
   ausgeben") - bAV-Produkt-Kacheln im "Erfasste Produkte"-Bereich (inc/SalesLeadModal.php),
   befuellt von bavRenderStagedProdukte() in assets/app.js. */
.bav-produkt-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.bav-produkt-tile{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:14px 10px;text-align:center;background:var(--paper);cursor:pointer}
.bav-produkt-tile:hover{border-color:var(--pistachio-deep)}
.bav-produkt-tile__remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.bav-produkt-tile__remove:hover{border-color:var(--error);color:var(--error)}
.bav-produkt-tile__logo{max-width:100%;max-height:44px;object-fit:contain;margin:4px auto 8px;display:block}
.bav-produkt-tile__logo--placeholder{width:44px;height:44px;margin:4px auto 8px;border-radius:50%;background:var(--line)}
.bav-produkt-tile__t{font-weight:600;font-size:13px;color:var(--ink);margin-bottom:2px;word-break:break-word}
.bav-produkt-tile__s{font-size:11px;color:var(--muted)}

/* Phase 2 "Analyse" (Nutzer-Wunsch 22.07.2026: "kacheln Gesundheit, rente und Kommunikation aus der
   compension strecke übernehmen") - Kostentreiber-Grid (Gesundheit) + Rechenweg-Zeilen (Rente),
   siehe inc/SalesLeadAnalyse.php + inc/SalesLeadModal.php Popups leadAnalyseGesundheit/
   leadAnalyseRente sowie die Live-Neuberechnung in assets/app.js (gesundheit*/rente*-Funktionen). */
/* Nutzer-Meldung 22.07.2026 ("Layoutfehler korrigieren", Screenshot: Zeilen-Label und Wert-Feld
   überlappen sich sichtbar) - .urs-group sitzt als Grid-Item in .gevo-grid, .ursrow__l als Flex-Item
   in .ursrow, beide haben per CSS-Spezifikation einen impliziten min-width:auto (= Inhaltsbreite),
   der laengere/umbrechende Labels (z. B. "Muskel-Skelett") daran hindert, sich der tatsaechlich
   verfuegbaren Spaltenbreite unterzuordnen - dadurch ragen Nachbarelemente sichtbar uebereinander.
   min-width:0 auf beiden Ebenen behebt das (Standard-Fix fuer dieses Flex-/Grid-Verhalten). */
.urs-group{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-width:0}
.urs-group__t{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 8px;text-transform:uppercase;letter-spacing:.02em}
.urs-indirekt{font-size:10px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;margin-left:4px}
.ursrow{display:flex;align-items:flex-start;gap:6px;margin-bottom:4px}
.ursrow[title]{cursor:help}
.ursrow__l{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--ink);word-break:break-word;padding-top:3px}
/* Nutzer-Meldung 22.07.2026 (Screenshot: Label "Muskel-Skelett" bricht senkrecht Buchstabe fuer
   Buchstabe um) - der globale input[type=text]-Selektor (siehe oben, width:100%) hat per
   CSS-Spezifitaet (Element+Attribut = 0,1,1) Vorrang vor der einfachen Klasse .ursrow__in (0,1,0)
   und gewinnt deshalb TROTZ spaeterer Position im Stylesheet - das Eingabefeld wollte dadurch die
   volle Zeilenbreite, .ursrow__l (min-width:0) wurde auf fast 0px gequetscht. Ein Elternselektor
   erhoeht die Spezifitaet auf 0,2,0 und gewinnt sicher. */
.ursrow .ursrow__in{width:52px;flex:0 0 auto;text-align:right;padding:3px 5px;border:1px solid var(--line);border-radius:5px;font-size:12.5px}
.ursrow__ro{width:52px;flex:0 0 auto;text-align:right;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding-top:3px}
.ursrow__u{flex:0 0 auto;font-size:11px;color:var(--muted);width:26px;padding-top:4px}
.ursrow__beispiele{margin:0 0 8px;font-size:10.5px;color:var(--muted);line-height:1.35}

.rstep{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.rstep:last-child{border-bottom:none}
.rstep__l{color:var(--muted)}
.rstep__v{font-weight:600;color:var(--ink);white-space:nowrap}
.rstep--sum{border-top:1.5px solid var(--ink);border-bottom:none;margin-top:2px;padding-top:8px}
.rstep--sum .rstep__v{color:var(--error)}

/* Nutzer-Wunsch 22.07.2026 ("die tabelle muss die echten erfassten Infos ausgeben [...] ein kurzes
   Statment zu jedem eintrag [...] wo schwachstellen [...] liegen") - Kommunikations-Ist-Stand-Zeile
   mit Kommentar, .rstep reicht nicht mehr (nur Label+Wert, kein Platz fuer eine zweite Zeile). */
.komm-row{padding:7px 0;border-bottom:1px solid var(--line)}
.komm-row:last-child{border-bottom:none}
.komm-row__head{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.komm-row__l{color:var(--muted);flex:0 0 auto}
.komm-row__v{font-weight:600;color:var(--ink);text-align:right}
.komm-row__comment{margin:3px 0 0;font-size:11.5px;color:var(--muted);line-height:1.4}

/* Nutzer-Meldung 25.07.2026 ("das ist nicht so schön gelöst. überdenke das layout neu", Screenshot
   Gesundheit-Popup) - .komm-row wurde bisher nur in breiten Bereichen genutzt (Phase-3-Popup,
   grosses Lead-Modal), wo Label+Wert nebeneinander genug Platz haben. In der neuen, schmalen
   Popup-eigenen Sidebar (280px, siehe .lead-modal-sidebar) quetschte das lange Werte wie "6,0 %
   (14,0 AU-Tage/Jahr je Mitarbeitendem)" in eine winzige rechte Spalte, die dann wortweise umbrach.
   Label+Wert stehen dort deshalb jetzt UNTEREINANDER (voller Zeilenbreite fuer den Wert) statt
   nebeneinander - nur innerhalb dieser Sidebar, alle anderen .komm-row-Stellen bleiben unveraendert. */
.lead-modal-sidebar .komm-row__head{flex-direction:column;align-items:flex-start;gap:1px}
.lead-modal-sidebar .komm-row__v{text-align:left}

/* Nutzer-Wunsch 22.07.2026 ("Jetzt Phase 3 Zahlen & Auswertung [...] einbauen") - Gewichtete
   Teilfaktor-Zeile fuer die "Zusammensetzung"-Karten der 3 Phase-3-Auswertungs-Popups (Gesundheit/
   Rente/Kommunikation), Balkenfarbe folgt SalesLeadAnalyse::scoreColor() (dieselbe Ampel-Logik wie
   die Score-Donuts). */
.scorebar{margin-bottom:10px}
.scorebar:last-child{margin-bottom:0}
.scorebar__head{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:3px}
.scorebar__l{color:var(--muted)}
.scorebar__w{color:var(--muted);font-size:11px}
.scorebar__v{font-weight:600;color:var(--ink);white-space:nowrap}
.scorebar__track{height:6px;border-radius:3px;background:var(--panel)}
.scorebar__fill{height:100%;border-radius:3px}

/* Echter An/Aus-Schalter (z. B. "Stornierte einblenden") - im Unterschied zu .opt (Kachel/Chip-
   Optik fuer Mehrfachauswahl wie die Sparten-Filter) eindeutig als Ein/Aus-Zustand erkennbar. */
.switch-row{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-slider{position:absolute;inset:0;background:var(--line);border-radius:22px;transition:background .15s}
.switch-slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:var(--paper);border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked ~ .switch-slider{background:var(--pistachio-deep)}
.switch input:checked ~ .switch-slider::before{transform:translateX(16px)}
.switch-row__label{font-size:13.5px;font-weight:600;color:var(--ink)}

/* Geschaeftsvorfall-Sektionen (GevoForm, 10.07.2026) - Zusammenfassungskarte mit "Bearbeiten"-
   Button, der ein eigenes Popup mit nur den Feldern dieser Sektion oeffnet (statt eines
   einzigen riesigen Formulars mit Speichern-Button ganz unten). */
.gevo-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.gevo-card__head .card__t{margin:0}
.gevo-textarea{min-height:160px}

/* Gesellschaften-Verzeichnis (10.07.2026, zuletzt 11.07.2026: "2 feste tabellen für versicherer
   und tarife" - jetzt echte <table>-Tabellen statt Kacheln/Liste, siehe gesellschaften.php).
   .insurer-tile__logo bleibt bestehen (wird von inc/InsurerModal.php im Detail-Modal
   wiederverwendet). .table-logo ist die kleine Logo-Miniatur fuer eine Tabellenzelle
   (Versicherer- UND Tarif-Tabelle). */
.insurer-tile__logo{width:56px;height:56px;border-radius:10px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px;flex:0 0 auto}
.insurer-tile__logo img{max-width:100%;max-height:100%;object-fit:contain}
.table-logo{width:28px;height:28px;border-radius:6px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:3px}
.table-logo img{max-width:100%;max-height:100%;object-fit:contain}
.table-logo__fallback{font-size:9.5px;font-weight:700;color:var(--ink-soft)}

/* Generische Tab-Leiste (siehe switchTab() in app.js) - .tab-strip traegt die Buttons, jedes
   Panel mit .tab-panel ist per default versteckt und erscheint nur mit .tab-panel--active.
   Nutzer-Meldung 26.07.2026 ("die menüleiste für die tab auswahl nicht scrollen [...] an keiner
   stelle im ganzen code. die muss immer permanent sichtbar bleiben") - .tab-strip liegt in JEDEM
   Detail-Modal (TariffModal/InsurerModal/StandortModal/SalesLeadModal/...) direkt im scrollenden
   .modal__body (siehe dort: overflow-y:auto). position:sticky haengt die Leiste an top:0 des
   naechsten scrollenden Vorfahren, EINE gemeinsame Regel wirkt dadurch ueberall, wo .tab-strip
   vorkommt - ausserhalb eines scrollenden Containers (z. B. ki-layout) hat sticky keinen sichtbaren
   Effekt, da es dort nichts zu "sticken" gibt. Weisser Hintergrund + z-index, damit der scrollende
   Inhalt dahinter verschwindet statt durchzuscheinen (gleiches Prinzip wie .table-wrap--scroll
   .data-table th weiter oben). */
/* Nutzer-Meldung 10.09.2026: „die tabs sind jetzt zweizeilig, waren vorher einzeilig. das muss
   berücksichtigt werden." Bei elf Reitern im Gesellschaften-Fenster ist eine zweite Zeile nicht zu
   vermeiden - sie soll aber gewollt aussehen. Deshalb ein eigener Zeilenabstand (row-gap): ohne ihn
   klebten die beiden Reihen aneinander und der aktive, gefuellte Reiter beruehrte den daruber. Die
   Polsterung unten haelt die Reiter von der Trennlinie fern, damit die untere Reihe nicht auf ihr
   aufsitzt. */
.tab-strip{display:flex;gap:6px 4px;border-bottom:1.5px solid var(--line);
  margin-bottom:16px;padding-bottom:6px;flex-wrap:wrap;
  position:sticky;top:0;background:var(--paper);z-index:2}
/* Nutzer-Meldung 04.09.2026: „Die Kopfzeile geht nicht bis zum oberen rand - der hintergrund
   scheint durch". Die Reiterleiste klebt zwar oben, .modal__body hat aber 16px Polsterung darüber -
   durch diesen Streifen wanderte der Inhalt sichtbar hindurch. Die Leiste wird deshalb um genau
   diese Polsterung nach oben gezogen und trägt sie selbst, sodass ihr Hintergrund den Streifen
   mitdeckt. Optisch steht sie danach an derselben Stelle wie vorher. */
/*
 * Reiterband im Dialog: Es klebt oben (.tab-strip ist sticky) und muss den durchlaufenden Inhalt
 * VOLLSTAENDIG verdecken. Der fruehere Trick - margin-top:-16px plus padding-top:16px, um die
 * Polsterung des Koerpers zu ueberdecken - haengt daran, dass beide Werte exakt zusammenpassen;
 * schon eine geaenderte Polsterung liess einen Streifen frei, durch den Text schimmerte.
 *
 * Jetzt deckt ein Schatten in derselben Farbe den Bereich ueber und neben dem Band ab. Das
 * funktioniert unabhaengig von der Polsterung.
 */
.modal__body > .tab-strip{margin:-16px -18px 16px;padding:16px 18px 6px;
  background:var(--paper);box-shadow:0 -16px 0 0 var(--paper);z-index:4}
/* Nutzer-Wunsch 13.08.2026: „ich mag verlinkte unterstrichene textlinks nicht [...] einheitlich
   überall" - die Haupt-Tabs nutzen jetzt dasselbe gefüllte Pill-Muster wie die Settings-Subtabs
   (statt der Border-Bottom-Unterstreichung des aktiven Tabs). */
/* ZWEI KLEBENDE LEISTEN UEBEREINANDER (Befund 10.09.2026 beim Nachbau des Gesellschaften-
   Fensters): .tab-strip ist sticky mit top:0. Eine ZWEITE Leiste innerhalb eines Reiterinhalts -
   im Gesellschaften-Fenster die Unterreiter TAA/BiPRO - klebte damit an derselben Stelle und legte
   sich ueber die Hauptleiste. Solange die oben einzeilig war, fiel das nicht auf; seit sie umbricht,
   verschwand die zweite Zeile mitsamt dem aktiven Reiter dahinter.
   Eine Leiste INNERHALB eines Reiterinhalts ist immer eine Unterleiste und darf nie kleben. */
.tab-panel .tab-strip{position:static}

/*
 * ── DIE REITERLEISTE EINER SEITE KLEBT UNTER DER KOPFLEISTE (Nutzer-Wunsch 11.09.2026) ──────
 *
 *   „die kopfzeile nicht mitscrollen lassen (Tabauswahl)"
 *
 * .tab-strip war schon sticky - aber mit top:0. Auf einer SEITE heisst das: Sie rastet am oberen
 * Rand des Fensters ein, also HINTER der Kopfleiste (.dash-topbar, z-index 50) - und ist damit
 * beim Scrollen genauso weg, als würde sie mitlaufen. In einem Dialog stimmt top:0 dagegen, dort
 * ist der Dialogkörper der scrollende Bereich.
 *
 * Deshalb nur für Leisten, die unmittelbar auf der Seite stehen: Sie rasten unter der Kopfleiste
 * ein, deren Höhe in --sticky-top steht (Berater 64 px, Arbeitgeberportal 44 px, siehe
 * inc/employer_header.php). Dasselbe Muster wie .news-filterbar.
 *
 * Die negativen Seitenränder plus gleich grosses Polster decken das Polster von .wrap ab - sonst
 * liefe der Inhalt links und rechts an der Leiste vorbei. Hintergrund deckend, z-index unter dem
 * der Kopfleiste: treffen sich beide, gewinnt die obere.
 */
main.wrap > .tab-strip{top:var(--sticky-top,64px);z-index:20;background:#fff;
  margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
/* Im Arbeitgeberportal ist der Inhaltsbereich getönt, nicht weiss. */
body:not(.berater-shell) main.wrap > .tab-strip{background:var(--panel)}
@media(max-width:900px){main.wrap > .tab-strip{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

.tab-btn{background:none;border:none;border-radius:8px;padding:8px 14px;
  font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.tab-btn:hover{color:var(--ink);background:var(--panel)}
.tab-btn--active{color:var(--ink);background:var(--pistachio)}
/* Nutzer-Wunsch 04.08.2026: Einstellungen-Untersidebar soll dieselbe Optik wie die Haupt-Sidebar
   haben (gefuelltes, abgerundetes Pistachio-Feld bei Auswahl statt duennem Unterstrich). Horizontale
   Pillen-Leiste, damit die eigentliche Sidebar links unveraendert bestehen bleibt. */
.settings-subtabs{border-bottom:none;gap:6px;margin-bottom:20px;position:static}
.settings-subtabs .tab-btn{border:none;border-radius:8px;padding:9px 14px;margin-bottom:0;
  color:var(--ink-soft);text-decoration:none}
.settings-subtabs .tab-btn:hover{background:var(--panel);color:var(--ink)}
.settings-subtabs .tab-btn--active{background:var(--pistachio);color:var(--ink);
  border-bottom-color:transparent;text-decoration:none}
.tab-panel{display:none}
.tab-panel--active{display:block}
.tab-strip--sub{border-bottom:none;margin:0 0 10px;gap:6px}
.tab-strip--sub .tab-btn{border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;margin-bottom:0}
.tab-strip--sub .tab-btn--active{background:var(--pistachio);border-color:var(--pistachio-deep);color:var(--ink)}

/* Nutzer-Wunsch 22.07.2026 ("Im Whatsapp Postfach unter dem Namen das Datum einbauen (zweite
   Zeile)") - zweizeilige Variante des generischen .tab-btn (Name oben, Datum darunter). */
.tab-btn--wa{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.tab-btn--wa__date{font-size:11px;font-weight:400;color:var(--muted)}

/* Nutzer-Wunsch 11.07.2026: "im tab KI haben wir die Prompts untereinander stehen. ich hätte
   gerne eine neue sidebar für ki und jeden pormpt einzeln als Tab" - vertikale Variante von
   .tab-strip (nutzt dieselbe switchTab()-Logik aus app.js, nur die Buttons stehen untereinander
   statt nebeneinander, wie im Automator-Vorbild links eine Prompt-Liste, rechts der Editor). */
.ki-layout{display:flex;gap:22px;align-items:flex-start}
.ki-layout__content{flex:1;min-width:0}
.tab-strip--sidebar{display:flex;flex-direction:column;gap:2px;border-bottom:none;
  border-right:1.5px solid var(--line);padding-right:16px;margin:0;flex:0 0 220px}
/* Nutzer-Wunsch 11.07.2026: "die sidebar genau so behandeln we die übergordnete (farbig bei
   auswahl hinterlegen)" - dieselbe Optik wie .sidebar__link/--active (Haupt-Navigation links):
   volle Breite, abgerundetes Rechteck, bei Auswahl komplett farbig hinterlegt statt nur ein
   duenner Akzentstrich. */
.tab-strip--sidebar .tab-btn{display:block;width:100%;text-align:left;border:none;
  border-radius:8px;padding:10px 12px;margin-bottom:0}
.tab-strip--sidebar .tab-btn:hover{background:var(--panel)}
.tab-strip--sidebar .tab-btn--active{background:var(--pistachio);color:var(--ink)}
.ki-layout__group-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:14px 0 6px 10px}
.ki-layout__group-label:first-child{margin-top:0}
@media(max-width:900px){.ki-layout{flex-direction:column}.tab-strip--sidebar{border-right:none;
  border-bottom:1.5px solid var(--line);padding-right:0;padding-bottom:10px;flex-direction:row;
  flex-wrap:wrap;flex:0 0 auto;width:100%}.tab-strip--sidebar .tab-btn{width:auto}}

/* Dokument-Kachel (Nutzer-Wunsch 06.08.2026: "pro dokument eine kachel in der notiz. mit dateityp
   symbol") - je angehaengte Datei eine kompakte, klickbare Kachel mit Dateityp-Icon + Name. Genutzt in
   der Wiedervorlage-Liste, den Reminder-Popups (Format::reminderNoteTiles) und im Notizen-Popup (app.js). */
.doc-tiles{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.doc-tile{display:inline-flex;align-items:center;gap:7px;max-width:250px;padding:6px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);text-decoration:none;color:var(--ink);font-size:12px;line-height:1.2}
.doc-tile:hover{border-color:var(--pistachio-deep);background:var(--panel)}
.doc-tile__ico{font-size:16px;flex:0 0 auto;line-height:1}
.doc-tile__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tarif-Kachel (Gesellschaften-Modal Tarife-Tab + Tarif-Browser auf gesellschaften.php) */
.tariff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.tariff-tile{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--paper);position:relative}
.tariff-tile__logo{width:26px;height:26px;border-radius:6px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;float:right;margin-left:6px}
.tariff-tile__logo img{max-width:100%;max-height:100%;object-fit:contain}
.tariff-tile__name{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 2px}
.tariff-tile__price{font-size:12px;color:var(--ink-soft);margin:0 0 6px}
.tariff-tile__meta{font-size:10.5px;color:var(--muted)}
.tariff-tile__meta a{color:var(--pistachio-deep);text-decoration:none}
.tariff-tile__del{position:absolute;top:6px;right:6px;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:13px;padding:2px}
.tariff-tile__del:hover{color:var(--error)}
/* Nutzer-Wunsch 11.07.2026: "Kontakte in den gesellschaften auch bearbeitbar machen" - Stift-Button
   links neben dem Loeschen-Kreuz, gleiche Optik wie .doc-tile__edit. */
.tariff-tile__edit{position:absolute;top:6px;right:24px;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:12px;padding:2px}
.tariff-tile__edit:hover{color:var(--ink)}

/* Dokumente-Kachel (Nutzer-Wunsch 11.07.2026: "ich möchte hier eine Kachelansicht (gerne auf den
   dateityp abgestimmt) und um was für ein dateityp es sich handelt (pdf z.B.)") - ersetzt die
   vorherige .simple-row-Liste im Dokumente-Tab (InsurerModal.php + TariffModal.php), Farbe/Label
   des Icons kommt aus Format::fileTypeBadge(). */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.doc-tile{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--paper);position:relative}
.doc-tile__link{display:block;text-decoration:none;color:inherit}
.doc-tile__icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:7px;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em;margin-bottom:8px}
.doc-tile__name{font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 2px;word-break:break-word;line-height:1.3}
.doc-tile__meta{font-size:10.5px;color:var(--muted)}
.doc-tile__del{position:absolute;top:6px;right:6px;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:13px;padding:2px}
.doc-tile__del:hover{color:var(--error)}
/* Nutzer-Wunsch 11.07.2026: "bestehende dokumente bearbeiten per poup" - Stift-Button links neben
   dem Loeschen-Kreuz, gleiche Optik/Position. */
.doc-tile__edit{position:absolute;top:6px;right:24px;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:12px;padding:2px}
.doc-tile__edit:hover{color:var(--ink)}

/* Kontakt-Foto in der Gesellschaften-Kontakte-Kachel (Nutzer-Wunsch 11.07.2026: "ein foto [...]
   auch für kontakte der gesellschaften hinzufügen") - gleiches Rund-Avatar-Prinzip wie
   .advisor-card__avatar im Berater-Verzeichnis, nur kleiner (passt in die schmale Kachel). */
.contact-avatar{width:32px;height:32px;border-radius:50%;background:var(--pistachio-pale);color:var(--ink);
  font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}
.contact-avatar img{width:100%;height:100%;object-fit:cover}

/* Einfache Zeilenliste (Kontakte/Dokumente-Tab im Gesellschaften-Modal) */
.simple-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.simple-row:last-child{border-bottom:none}
.simple-row__main{min-width:0}
.simple-row__t{font-weight:600;color:var(--ink)}
.simple-row__s{font-size:11.5px;color:var(--muted)}

/* Arbeitgeber-Suche vor dem Import-Upload (11.07.2026, Nutzer-Wunsch: "bitte nicht als dropdown,
   sondern dynamische suche") - Textfeld + darunter eingeblendete gefilterte Ergebnisliste. */
.company-search{position:relative}
.company-search__results{display:none;position:absolute;z-index:20;top:100%;left:0;margin-top:4px;
  min-width:260px;max-height:260px;overflow-y:auto;background:var(--paper);border:1.5px solid var(--line);
  border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.10)}
.company-search__option{padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line)}
.company-search__option:last-child{border-bottom:none}
.company-search__option:hover{background:var(--paper-2,#f4f4f2)}

/* "Fehlende Daten"-Popup (12.07.2026, Nutzer-Wunsch: "wenn ich eine person öffne, soll geprüft
   werden, ob die daten vollständig sind [...] ein popup [...] was direkt ausgibt, welche daten in
   der akte fehlen") - Zusammenfassungsbox oben im Popup, angelehnt an den Automator-Screenshot. */
.missing-data__summary{border:1.5px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:10px 0 16px}
.missing-data__cat{font-weight:700;color:var(--error);font-size:13px;margin:8px 0 2px}
.missing-data__cat:first-child{margin-top:0}
.missing-data__list{margin:0 0 4px;padding-left:18px;font-size:13.5px;color:var(--ink)}

/* "Spalte zuordnen"-Popup (11.07.2026, Nutzer-Wunsch: "screenshot 1 ist das popup aus dem
   automator [...] mit auswahl und dynamischer suche [...] übernimm das bitte") - Suchfeld +
   gruppierte, klickbare Ergebnisliste statt eines nativen <select> mit <optgroup>, siehe
   render_import_tab() (import-export.php) + openColumnMap()/applyColumnMapSelection() (dort). */
.column-map-group{padding:6px 12px 4px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--pistachio-deep);background:var(--paper-2,#f4f4f2)}
.column-map-item{padding:7px 12px 7px 22px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line)}
.column-map-item:hover{background:var(--paper-2,#f4f4f2)}
.column-map-item--active{background:var(--pistachio,#eef2c8);font-weight:600}
.column-map-empty-item{padding:7px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line);color:var(--muted)}
.column-map-empty-item:hover{background:var(--paper-2,#f4f4f2)}
.column-map-empty-item.column-map-item--active{background:var(--pistachio,#eef2c8);color:var(--ink);font-weight:600}

/* Vertriebspipeline / Kanban-Board (12.07.2026, Nutzer-Wunsch: "eine funktion [...] mit der ich
   vertriebsprozesse überwachen kann [...] das layout von trello oder dem microsoft planner") -
   6 feste Spalten (siehe inc/SalesPipeline.php::PHASES), horizontal scrollbar auf schmalen
   Bildschirmen statt umzubrechen (eine Pipeline liest sich von links nach rechts, ein Umbruch
   wuerde die Reihenfolge der Phasen verschleiern). */
/* Nutzer-Wunsch 18.07.2026 ("vertrieb hat 8 phasen. aktuell muss ich aus dem bild scrollen. können
   wir das so umbauen, dass alle 8 phasen ins bild passen?") - Spalten NICHT mehr fix 260px breit
   (8 × 260 + Gaps ≈ 2180px -> Horizontal-Scroll), sondern flexibel: alle 8 teilen sich die
   verfuegbare Breite gleichmaessig (flex:1 1 0 + min-width:0, damit sie unter ihre Inhaltsbreite
   schrumpfen duerfen). overflow-x:auto bleibt als Sicherheitsnetz fuer sehr schmale Fenster. */
.kanban-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;margin-top:18px}
.kanban-col{flex:1 1 0;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;max-height:calc(100vh - 260px);min-height:200px;
  transition:background .15s,border-color .15s}
.kanban-col--over{background:var(--pistachio-pale,#f3f6df);border-color:var(--pistachio-deep)}
/* Nutzer-Meldung 18.07.2026 ("alles gequetscht und teilweise überlagert") - gestapelter Kopf:
   schmale Kopfzeile (Nummer links, Anzahl rechts), Titel darunter ueber die volle Spaltenbreite.
   overflow-wrap:anywhere bricht lange deutsche Woerter (Kennenlernen/Rechtsrahmen/Kommunikation)
   sauber um statt sie unter den Zaehler laufen zu lassen. */
.kanban-col__head{padding:10px 10px 9px;border-bottom:1px solid var(--line)}
.kanban-col__headtop{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.kanban-col__num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--pistachio-deep);
  color:var(--pistachio-deep);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.kanban-col__title{font-size:12.5px;font-weight:700;color:var(--ink);margin:0;line-height:1.2;overflow-wrap:anywhere}
.kanban-col__subtitle{font-size:10px;color:var(--muted);margin:3px 0 0;line-height:1.3;overflow-wrap:anywhere}
.kanban-col__count{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.kanban-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}

.kanban-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 11px;
  cursor:pointer;transition:border-color .15s,box-shadow .15s}
.kanban-card:hover{border-color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
/* Nutzer-Wunsch 13.07.2026: "ich möchte interessenten im tab vertrieb auch löschen können" - der
   Löschen-Button existierte bereits im Detailmodal (Tab Übersicht), war dort aber zu gut versteckt.
   Gleiche Optik wie .tariff-tile__del (Kreuz oben rechts auf der Kachel). */
.kanban-card__del{position:absolute;top:6px;right:6px;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:13px;padding:2px}
.kanban-card__del:hover{color:var(--error)}
.kanban-card__status{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;border-radius:20px;padding:2px 8px;margin-bottom:6px}
.kanban-card__status--gewonnen{background:#e3f2e3;color:var(--ok)}
.kanban-card__status--verloren{background:#f6e3e1;color:var(--error)}
.kanban-card__title{font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 2px}
.kanban-card__meta{font-size:11px;color:var(--muted);margin:0}
.kanban-card__stats{display:flex;gap:10px;font-size:11px;color:var(--ink-soft);margin-top:6px}
.kanban-card__moves{display:flex;justify-content:flex-end;gap:4px;margin-top:6px}
.kanban-card__moves button{background:none;border:1px solid var(--line);border-radius:6px;width:22px;height:22px;
  font-size:13px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0}
.kanban-card__moves button:hover{border-color:var(--pistachio-deep);color:var(--pistachio-deep)}

/* Lead-Detailmodal (inc/SalesLeadModal.php) - Nutzer-Wunsch 20.07.2026 ("die 6 schritte aus der
   Kopfzeile entfernen. Auch die Adresse entfernen. Nur die Tabs anzeigen [...] Checklisten Tab als
   Sidebar [...] immer sichtbar, egal welches tab ich öffne"): Fortschritts-Stepper und Statuszeile
   sind komplett entfernt (dafuer bisher genutzte .lead-subhead/.lead-stepper-Regeln ebenfalls
   entfernt, nirgends mehr referenziert). Zwei-Spalten-Layout stattdessen: die Checkliste dauerhaft
   sichtbar (kein .tab-panel mehr), die 3 verbleibenden Tabs daneben. Nutzer-Wunsch 20.07.2026
   ("die checkliste bitte an den linken rand setzen") - per flex 'order' visuell nach links
   gezogen, ohne die Quellreihenfolge im HTML zu aendern (die Checkliste braucht Variablen, die
   erst waehrend des Haupt-Tab-Renderings berechnet werden, siehe inc/SalesLeadModal.php). */
.lead-modal-body{display:flex;gap:20px;align-items:flex-start}
.lead-modal-main{flex:1;min-width:0;order:2}
.lead-modal-sidebar{width:280px;flex:0 0 auto;border-right:1px solid var(--line);padding-right:18px;
  max-height:70vh;overflow-y:auto;order:1}
/* Nutzer-Meldung 26.07.2026 ("der ist stand darf nicht scrollen") - in den 3 Analyse-Popups
   (Gesundheit/Rente/Kommunikation, .modal--analyse) ist die Sidebar dank der <details>-Kollabierung
   (siehe $istStandCard in inc/SalesLeadModal.php) kurz genug, um komplett sichtbar zu sein - die
   70vh-Scrollbegrenzung von oben (fuers grosse .modal--lead-Checklisten-Sidebar gedacht) wird hier
   gezielt aufgehoben, statt die generische Klasse selbst zu aendern. */
.modal--analyse .lead-modal-sidebar{max-height:none;overflow-y:visible}

/* E-Mail-Eingang-Hinweisbanner (Nutzer-Wunsch 20.07.2026: "können wir bei eingang einer neuen
   email einen hinweisbanner für 3 sekunden anzeigen lassen - oben rechts in der bildschirmecke.
   mit anzahl absender und betreff?") - siehe pollForNewMail()/showMailToast() in assets/app.js. */
.mail-toast-wrap{position:fixed;top:16px;right:16px;z-index:400;display:flex;flex-direction:column;gap:8px;
  max-width:340px}
.mail-toast{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--pistachio-deep);
  border-radius:var(--r);padding:10px 14px;box-shadow:0 6px 20px rgba(0,0,0,.14);
  animation:mail-toast-in .2s ease}
.mail-toast--out{animation:mail-toast-out .3s ease forwards}
.mail-toast__t{font-weight:700;font-size:13.5px;margin:0 0 2px}
.mail-toast__s{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes mail-toast-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes mail-toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(24px)}}

/* Sortier-Pfeile in Tabellen-Spaltenueberschriften (Nutzer-Wunsch 20.07.2026, Provisionen-Popup:
   "auf und absteigend sortierung nicht per kachel, sondern über kleine pfeile in der
   spaltenüberschrift") - siehe .prov-sort-th in inc/Charts.php/assets/app.js. */
.prov-sort-th{border:none;background:none;padding:0 0 0 2px;font-size:11px;color:var(--muted);cursor:pointer;vertical-align:middle}
.prov-sort-th:hover{color:var(--ink)}

/* Altersgruppen-Summenabgleich im Mitarbeiterdaten-Popup (Nutzer-Wunsch 20.07.2026: "die summe
   der mitarbeiter muss die anzahl der unbefristeten MA ergeben") - siehe
   updateMitarbeiterAgeSum()/leadMitarbeiterSubmit() in assets/app.js. */
.mitarbeiter-age-sum--warn{color:var(--error);font-weight:600}

/* Interner Chat (Nutzer-Wunsch 20.07.2026: "den chat möchte ich als banner haben. unten rechts im
   bild. beim draufklicken soll es sich öffnen") - schwebendes Widget statt eigener Seite, fest
   unten rechts auf jeder eingeloggten Agentur-Seite (Markup in inc/footer.php). Zwei "Screens"
   (Partnerliste/Thread) im selben Panel, per JS ein-/ausgeblendet statt Seitenwechsel. */
.chat-widget{position:fixed;right:22px;bottom:22px;z-index:500}
.chat-widget__toggle{position:relative;width:56px;height:56px;border-radius:50%;border:none;background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-widget__toggle svg{width:24px;height:24px}
.chat-widget__toggle:hover{background:var(--ink-soft)}
.chat-widget__badge{position:absolute;top:-4px;right:-4px;background:var(--error);color:#fff;font-size:11px;font-weight:700;border-radius:10px;min-width:20px;height:20px;padding:0 5px;display:flex;align-items:center;justify-content:center;border:2px solid var(--paper)}
.chat-widget__panel{position:absolute;right:0;bottom:66px;width:340px;height:480px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden}
.chat-widget__list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.chat-widget__list-head{flex:0 0 auto;padding:12px 14px;font-weight:700;font-size:14px;border-bottom:1px solid var(--line)}
.chat-widget__partner{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer}
.chat-widget__partner:hover{background:var(--panel)}
.chat-partner__avatar{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--panel);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;overflow:visible}
.chat-partner__avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.chat-partner__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chat-partner__name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-partner__preview{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-partner__badge{flex:0 0 auto;background:var(--pistachio-deep);color:#fff;font-size:11px;font-weight:700;border-radius:10px;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center}
.chat-widget__dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--muted);border:2px solid var(--paper)}
.chat-widget__dot--online{background:var(--ok)}
.chat-widget__thread-head .chat-widget__dot{position:static;border:none;margin-left:2px}
.chat-widget__thread{flex:1;min-height:0;display:flex;flex-direction:column}
.chat-widget__thread-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600}
.chat-widget__back{flex:0 0 auto;border:none;background:none;cursor:pointer;font-size:16px;padding:2px 4px 2px 0;color:var(--muted)}
.chat-widget__back:hover{color:var(--ink)}
.chat-widget__thread-name{flex:1;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-widget__messages{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:7px}
.chat-widget__whatsapp-toggle{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line)}
.chat-widget__whatsapp-toggle input{width:auto}
.chat-bubble{max-width:78%;padding:7px 10px;border-radius:12px;background:var(--panel);align-self:flex-start}
.chat-bubble--me{background:var(--pistachio-pale);align-self:flex-end}
.chat-bubble__text{margin:0;white-space:pre-wrap;word-break:break-word;font-size:13px}
.chat-bubble__file{display:block;margin-top:4px;font-size:12px;color:var(--ink-soft)}
.chat-bubble__via{display:block;margin-top:2px;font-size:10px;color:var(--muted)}
.chat-bubble__time{display:block;margin-top:3px;font-size:10px;color:var(--muted);text-align:right}
/* Nutzer-Wunsch 21.07.2026 ("die blauen hacken") - Zustell-/Lesehaken hinter der Uhrzeit
   gesendeter Nachrichten (WhatsAppMessengerView::statusTicksHtml): grau = gesendet/zugestellt,
   blau = gelesen. */
.chat-bubble__ticks{margin-left:4px;font-size:10px;letter-spacing:-2px;color:var(--muted)}
.chat-bubble__ticks--read{color:#34b7f1}

/* Nutzer-Wunsch 21.07.2026 ("das layout soll genau so sein, wie im messenger") - WhatsApp-
   Sprechblasen-Verlauf (Personen-Tab mitarbeiter-whatsapp.php + Personen-Karten in
   whatsapp-postfach.php), nutzt dieselben .chat-bubble-Klassen wie das interne Chat-Widget oben
   plus ein paar WhatsApp-spezifische Ergaenzungen (Absender-Label, Fehlschlag-Hinweis, Tages-Tabs). */
.chat-bubble__sender{display:block;margin:0 0 2px;font-size:10.5px;font-weight:700;color:var(--ink-soft)}
.chat-bubble__failed{display:block;margin-top:3px;font-size:11px;color:var(--error)}
/* Nutzer-Wunsch 22.07.2026 ("Das Lesefenster um 50% vergrößern") - betrifft das volle
   Chatverlauf-Fenster in mitarbeiter-whatsapp.php (420px -> 630px); die kleinere Vorschau im
   WhatsApp-Postfach ueberschreibt max-height ohnehin per .wa-postfach-card__preview (siehe unten,
   steht spaeter im Stylesheet und gewinnt dadurch). */
.wa-messenger{display:flex;flex-direction:column;gap:7px;max-height:630px;overflow-y:auto;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
/* .wa-messenger wird bei den Tages-Tabs (mitarbeiter-whatsapp.php) zusaetzlich als .tab-panel
   genutzt (switchTab()-Muster) - die generischen .tab-panel{display:none}/.tab-panel--active{
   display:block}-Regeln wuerden ohne diese hoeher-spezifischen Ausnahmen das Flex-Layout brechen
   bzw. inaktive Tage sichtbar lassen. */
.tab-panel.wa-messenger{display:none}
.tab-panel--active.wa-messenger{display:flex}
.chat-day-divider{display:flex;align-items:center;justify-content:center;margin:4px 0;color:var(--muted);font-size:11.5px}
.chat-day-divider span{background:var(--panel);padding:3px 10px;border-radius:999px}

/* Nutzer-Wunsch ("das layout möchte ich in whatsapp stil haben, für jede person eine eigene
   karte") - whatsapp-postfach.php: eine Karte pro Person statt einer Tabellenzeile pro Nachricht,
   angelehnt an .card, komplett klickbar (Absprung zum vollen Verlauf der Person). */
.wa-postfach-card{cursor:pointer;padding:14px 16px;margin-bottom:14px;transition:border-color .12s}
.wa-postfach-card:hover{border-color:var(--pistachio)}
.wa-postfach-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.wa-postfach-card__meta{display:flex;align-items:center;gap:10px;font-size:12.5px}
.wa-postfach-card__preview{max-height:200px}
.wa-postfach-card__open{background:none;border:none;padding:2px;cursor:pointer;color:var(--muted);display:flex;line-height:0}
.wa-postfach-card__open:hover{color:var(--ink)}
.wa-postfach-card__close{background:none;border:none;padding:0 2px;cursor:pointer;color:var(--muted);font-size:18px;line-height:1}
.wa-postfach-card__close:hover{color:var(--error)}
.wa-reply-box{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.wa-reply-box textarea{flex:1;resize:none;min-height:38px;max-height:100px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--sans);font-size:13px}

/* Nutzer-Wunsch 21.07.2026 ("jetzt die chatgpt prüfung eingehender whatsapp anhänge") - Anhang
   innerhalb einer Sprechblase (Bild-Thumbnail/Datei-Link + ChatGPT-Vision-Befund + Ablegen-Button). */
.wa-attachment{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.wa-attachment__thumb{display:block;max-width:100%;max-height:180px;border-radius:8px;object-fit:cover}
.wa-attachment__file{display:inline-block;font-size:12.5px;color:var(--ink);text-decoration:none}
.wa-attachment__ai{margin-top:4px;font-size:11.5px;color:var(--ink-soft)}
.wa-attachment__ai--error{color:var(--error)}
.wa-attachment__filed{margin-top:4px;font-size:11.5px;color:var(--ok)}

/* Nutzer-Wunsch 21.07.2026 ("für jede vorlage im whatsapp tab eine Kachel bauen") - Kachel-Grid
   fuer freigegebene WhatsApp-Vorlagen (mitarbeiter-whatsapp.php), gleiches Klick-oeffnet-Popup-
   Prinzip wie .bav-produkt-tile, hier ohne Logo (nur Titel + Text-Ausschnitt). */
.wa-template-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.wa-template-tile{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--paper);cursor:pointer}
.wa-template-tile:hover{border-color:var(--pistachio-deep)}
.wa-template-tile__t{font-weight:600;font-size:13px;color:var(--ink);margin-bottom:4px;word-break:break-word}
.wa-template-tile__s{font-size:11.5px;color:var(--muted);white-space:pre-wrap}
.chat-composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.chat-composer textarea{flex:1;resize:none;min-height:34px;max-height:90px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-family:var(--sans);font-size:13px}
.chat-composer__attach{flex:0 0 auto;cursor:pointer;font-size:17px;padding:4px}
.chat-composer__attach input{display:none}
@media (max-width:480px){
  .chat-widget{right:12px;bottom:12px}
  .chat-widget__panel{width:calc(100vw - 24px);right:-12px}
}

/* Nutzer-Wunsch 22.07.2026 ("Business Case & Auswahl soll phase 4 werden [...] alle einbauen und
   übernehmen") - Kostentreiber-/Potenzial-Zeilen (.kt, 1:1-Namensmuster aus strecke.php) und die
   Tarif-Auswahlkarten (.tcard) fuer Phase 4 · Gesundheit, sowie der Maßnahmen-Status-Schalter
   (.massnahme-seg) fuer die Potenziale-Listen aller 3 Business-Case-Popups. */
.kt{border-bottom:1px solid var(--line)}
.kt:last-child{border-bottom:none}
.kt__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kt__name{color:var(--ink)}
.kt__cost{font-weight:600;color:var(--ink);white-space:nowrap;text-align:right}
/* Nutzer-Wunsch 23.07.2026 ("das ist in der compension-strecke im bereich gesundheits in der pase 3
   ausgegeben. das soll auch in die app") - Kostentreiber-/Score-Balken (1:1 aus strecke.php .kt__bar),
   gleiches Track+Fill-Prinzip wie .scorebar__track/.scorebar__fill oben, nur kompakter fuer die
   dichter gepackte Kostentreiber-Liste. */
.kt__bar{height:5px;border-radius:3px;background:var(--panel);margin-top:6px;overflow:hidden}
.kt__bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.hint{color:var(--muted);font-size:12.5px}
.beispiel{padding:10px 12px;background:var(--panel);border-radius:var(--r)}

.tcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tcard-radio{display:block;cursor:pointer}
.tcard-radio input{position:absolute;opacity:0;pointer-events:none}
.tcard{display:block;border:1.5px solid var(--line);border-radius:var(--r);padding:14px;height:100%;transition:border-color .12s,box-shadow .12s}
.tcard-radio input:checked + .tcard{border-color:var(--ink);box-shadow:0 0 0 2px var(--pistachio)}
.tcard__n{font-weight:600;font-size:13.5px;color:var(--ink);display:block;margin-bottom:2px}
.tcard__bud{font-size:11.5px;color:var(--muted);display:block;margin-bottom:8px}
.tcard__price{font-size:20px;font-weight:700;color:var(--ink);display:block}
.tcard__price span{font-size:11px;font-weight:400;color:var(--muted)}
.tcard__pct{font-size:11.5px;color:var(--ink-soft);display:block;margin:6px 0}
.tcard__nums{display:flex;flex-direction:column;gap:2px;font-size:11.5px;margin:8px 0;padding-top:8px;border-top:1px solid var(--line)}
.tcard__nums > span{display:flex;justify-content:space-between}
.tcard__nums span span{color:var(--muted)}
.tcard__nums .net{padding-top:2px;border-top:1px dashed var(--line)}
.tcard__cov{display:flex;flex-wrap:wrap;gap:6px;font-size:10.5px;color:var(--ink-soft)}
.tcard__cov-item.off{color:var(--muted)}

.massnahme-seg{display:flex;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;width:fit-content}
.massnahme-seg form{margin:0}
.massnahme-seg form:not(:last-child) button{border-right:1px solid var(--line)}
.massnahme-seg button{border:none;background:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;padding:6px 12px;color:var(--muted);transition:background .15s,color .15s}
.massnahme-seg button[aria-selected=true]{background:var(--ink);color:#fff}

/* Nutzer-Wunsch 23.07.2026 ("bitte die navigation oben aus der compension-strecke in die modals
   einbauen, mit ansicht, in welcher phase ich mich gerade befinde") - Optik 1:1 aus strecke.php
   .stepper/.st/.st__c/.st__t uebernommen. Der Klassenname ".st--static" ist ein Ueberbleibsel vom
   ersten Entwurf (reine Ansicht, nicht klickbar) - Nutzer-Wunsch 23.07.2026 (Folgeanfrage): "ich
   möchte [...] zwischen den zugehörigen modals der phasen wechseln können ohne den interessenten
   einer anderen phase zuzuordnen (das soll nur über die Pfeile gehen)" - jeder Kreis ist jetzt ein
   <button>, der per switchTab() NUR die Ansicht umschaltet (siehe inc/SalesLeadModal.php); die
   tatsaechliche Phase (sales_leads.phase) bleibt weiterhin ausschliesslich den Pfeilen auf dem
   Kanban-Board vorbehalten (Nutzer-Wunsch 20.07.2026). .active/.done zeigen dauerhaft die
   tatsaechliche Phase, .tab-btn--active (von switchTab() umgeschaltet) zusaetzlich einen Ring um
   den gerade angesehenen Kreis - beides kann auseinanderfallen. 8 statt urspruenglich 6 Phasen,
   deshalb kleinere Kreise/Schrift als im Original, damit alle 8 auf einer Zeile Platz finden
   (horizontale Scrollbar als Fallback bei schmalen Fenstern). */
.stepper--static{display:flex;gap:0;overflow-x:auto;padding:4px 0;margin-bottom:16px;scrollbar-width:thin}
.st--static{flex:1 0 auto;min-width:78px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px;position:relative;border:none;background:none;font:inherit;cursor:pointer}
.st--static::before{content:"";position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.st--static:first-child::before{display:none}
.st--static.done::before{background:var(--pistachio-deep)}
.st--static .st__c{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;border:2px solid var(--line);background:var(--paper);color:var(--muted);z-index:1;transition:box-shadow .15s}
.st--static.active .st__c{border-color:var(--pistachio-deep);background:var(--pistachio);color:var(--ink)}
.st--static.done .st__c{border-color:var(--pistachio-deep);color:var(--pistachio-deep)}
.st--static.tab-btn--active .st__c{box-shadow:0 0 0 3px var(--ink-soft)}
.st--static .st__t{font-size:9.5px;font-weight:600;margin:4px 0 0;color:var(--muted);line-height:1.2}
.st--static.active .st__t,.st--static.tab-btn--active .st__t{color:var(--ink)}

/* ============================================================================
   Terminvorbereitung (vorbereitung.php) - Gast-Ansicht.
   Nutzer-Wunsch 17.07.2026: professionelleres, edles Layout - Kundenlogo dezent,
   Stammdaten-Kachel mittig oben + 4 Kacheln darunter, Termin-Karte rechts,
   schwarze/edle Icons. Alles unter .prep-wrap--guest gescoped, damit die
   Berater-Ansicht des Modals unveraendert bleibt.
   ============================================================================ */
.prep-wrap{max-width:1180px;margin:34px auto;padding:0 20px}
.prep-wrap:not(.prep-wrap--guest){max-width:460px}
.prep-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.prep-header__brand{display:flex;align-items:center;gap:18px;min-width:0}
.prep-header__logo{height:30px;width:auto;display:block}
.prep-header__sep{width:1px;height:36px;background:var(--line);display:inline-block;flex:0 0 auto}
.prep-cust-logo{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);overflow:hidden;padding:7px;flex:0 0 auto}
.prep-cust-logo img{max-width:100%;max-height:100%;object-fit:contain}
.prep-cust-logo .table-logo__fallback{font-weight:700;font-size:18px;color:var(--ink)}
.prep-header__titles{min-width:0}
.prep-header__eyebrow{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.prep-header__co{margin:3px 0 0;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.prep-header__user{margin:0;font-size:13px;color:var(--muted)}

/* Phase-1-Kacheln: Nutzer-Wunsch 17.07.2026 ("stammdaten und mitarbeiterdaten auch links
   ausrichten. alles schön symetrisch") - alle 5 Erfassungskarten linksbuendig in einem sauberen
   2-Spalten-Raster (gleiche Groesse), die Termin-Karte darueber bleibt volle Breite. */
.prep-wrap--guest .lead-modal-main .tab-panel[data-tabkey="phase1"] > .k1-grid{
  grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch}
.prep-wrap--guest .k1-tile{height:100%}
@media(max-width:640px){
  .prep-wrap--guest .lead-modal-main .tab-panel[data-tabkey="phase1"] > .k1-grid{grid-template-columns:1fr}
}

/* Edle, monochrome Kacheln (Icons schwarz statt Ampel-Farben) */
.prep-wrap--guest .k1-tile{border:1px solid var(--line);border-radius:14px;padding:18px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.prep-wrap--guest .k1-tile:hover{border-color:var(--ink);box-shadow:0 6px 20px rgba(16,24,40,.08);transform:translateY(-1px)}
.prep-wrap--guest .k1-tile__dot{width:8px;height:8px;background:var(--ink) !important;opacity:.85}
.prep-wrap--guest .k1-tile__arr{color:var(--ink);font-size:18px;opacity:.65}
.prep-wrap--guest .k1-tile__t{font-size:15px}

/* Termin-Karte im rechten Hauptbereich */
.prep-termin-card{border:1px solid var(--line);border-radius:14px}
.prep-termin-row{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.prep-termin-row:last-child{border-bottom:none}
.prep-termin-row__ico{filter:grayscale(1);font-size:16px;line-height:1.35;flex:0 0 auto}

/* Nutzer-Wunsch 20.07.2026: Zuschusskonfiguration erfassen (arbeitgeber-zuschuesse.php) -
   per Schalter ein-/ausblendbare Sektionen, nachgebaut nach der COMPENSION Viva-Portal-Maske. */
.zk-block{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.zk-section{border:1.5px solid var(--line);border-radius:var(--r);margin:0 0 14px;overflow:hidden}
.zk-section__head{display:flex;align-items:center;gap:12px;background:var(--panel);padding:12px 16px;margin:0;cursor:pointer}
.zk-section__t{font-weight:700;color:var(--ink)}
.zk-section__body{padding:16px}
.zk-rows{display:block}
.zk-add{width:44px;height:44px;border-radius:50%;border:none;background:var(--pistachio);color:var(--ink);
  font-size:24px;line-height:1;cursor:pointer;display:block;margin:10px auto 0}
.zk-add:hover{filter:brightness(.95)}


/* Nutzer-Wunsch 27.07.2026: fehlende (checklisten-relevante) Felder in den Vertriebs-Popups
   kennzeichnen. Markierung setzt/entfernt updateLeadFieldMarkers() in assets/app.js auf dem
   .field-Wrapper. Bewusst dezent (Bernstein statt hartes Rot) - es ist ein "noch offen"-Hinweis,
   kein Fehler. */
.field--missing > label{color:#C77700}
.field--missing > label::after{content:" \00b7 fehlt";font-weight:700;font-size:11px;letter-spacing:.02em}
.field--missing input:not([type=radio]):not([type=checkbox]),
.field--missing select,
.field--missing textarea{border-color:#C77700;box-shadow:0 0 0 2px rgba(199,119,0,.12)}

/* Kurze, selbst-verschwindende Statusmeldung fuer das asynchrone Hintergrund-Speichern der
   Stammdaten (leadToast() in assets/app.js). */
.lead-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);z-index:9999;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;
  box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;max-width:90vw}
.lead-toast--show{opacity:1;transform:translate(-50%,0)}

/* Nutzer-Wunsch 27.07.2026: Kachel-Umschalter "Firma / Verband" im "+ Neuer Interessent"-Popup
   (statt Dropdown). Aktive Kachel = .scope-card--active, siehe leadCreateScopeSet() in app.js. */
.scope-cards{display:flex;gap:10px}
.scope-card{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;border:2px solid var(--line);border-radius:10px;background:var(--panel);
  cursor:pointer;transition:border-color .12s ease,background .12s ease;color:var(--ink)}
.scope-card:hover{border-color:var(--pistachio-deep)}
.scope-card__icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.scope-card__icon svg{width:22px;height:22px}
.scope-card__label{font-size:14px;font-weight:600}
.scope-card--active{border-color:var(--pistachio-deep);background:rgba(180,205,90,.16)}

/* Nutzer-Meldung 27.07.2026: kleiner "Verband"-Chip auf der Kanban-Karte (eigene Zeile unter dem
   Namen, statisch positioniert - ueberdeckt weder Name noch das ✕, anders als die frueher genutzte
   absolut positionierte .kanban-card__status-Klasse). */
.kanban-tag{display:inline-flex;align-items:center;background:var(--pistachio-deep);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;line-height:1.4}

/* Versorgungslohn · Berechnung (Nutzer-Wunsch 27.07.2026): Parameter-Panel links + editierbare
   Jahres-Tabelle rechts, Zell-Editor-Modals + bKV-Picker. */
.vl-layout{display:flex;gap:20px;align-items:flex-start;margin-top:18px}
.vl-params{flex:0 0 260px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.vl-params__h{margin:0 0 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.vl-params__hint{margin:0 0 10px;font-size:10.5px;line-height:1.4;color:var(--muted)}
/* Kompakter Tab-Strip im schmalen Parameter-Panel (Freie Konfiguration / Portaldaten). */
.vl-params__tabs{display:flex;gap:4px;margin:0 0 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.vl-params__tabs .tab-btn{flex:1 1 auto;padding:6px 4px;font-size:10.5px;white-space:normal;line-height:1.25;text-align:center}
.vl-param{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.vl-param__l{font-size:12px;color:var(--muted)}
.vl-param__v{font-size:14px;font-weight:700;text-align:right}
.vl-param--input{flex-direction:column;align-items:stretch}
.vl-param--input label{font-size:12px;color:var(--muted);margin-bottom:2px}
.vl-param--input>div{display:flex;align-items:center;gap:6px}
.vl-param--input input{flex:1;border:none;border-bottom:1px solid var(--line);background:transparent;font-size:15px;font-weight:700;padding:2px 0}
.vl-param--input span{font-weight:700}
.vl-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-top:12px;cursor:pointer}
/* Portaldaten-Tab: gleiche Felder wie die freie Konfiguration, aber nur lesbar. */
.vl-param--input input:disabled{color:var(--muted);-webkit-text-fill-color:var(--muted);opacity:1;cursor:not-allowed;border-bottom-style:dashed}
.vl-toggle input:disabled{cursor:not-allowed;opacity:.45}
/* Statuszeile statt Speichern-Button (Auto-Speichern). */
.vl-save{margin:14px 0 0;font-size:10.5px;line-height:1.4;color:var(--muted)}
.vl-save--busy{color:var(--ink-soft)}
.vl-save--ok{color:var(--pistachio-deep);font-weight:700}
.vl-save--err{color:#c0392b;font-weight:700}

.vl-table-wrap{flex:1 1 auto;min-width:0;overflow-x:auto}
.vl-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.vl-table th{background:var(--panel);border-bottom:2px solid var(--line);padding:10px 14px;text-align:right;font-weight:700;white-space:nowrap}
.vl-table th:first-child{text-align:center}
.vl-table td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:right;white-space:nowrap}
.vl-year{text-align:center;font-weight:700}
.vl-cell{position:relative;cursor:default}
.vl-cell__edit{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;float:right;padding:0 0 0 6px;line-height:1.5}
.vl-cell__edit:hover{color:var(--pistachio-deep)}
.vl-step{float:right;display:inline-flex;flex-direction:column;margin-left:6px}
.vl-step button{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:8px;line-height:1;padding:0 2px;height:10px}
.vl-step button:hover{color:var(--pistachio-deep)}
.vl-cell__val{font-weight:600}
.vl-cell__sub{display:block;font-size:10.5px;color:var(--muted);text-align:right;margin-top:2px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.vl-calc{color:var(--muted)}
.vl-calc--green{color:var(--pistachio-deep);font-weight:700}
.vl-add{width:40px;height:40px;border-radius:50%;border:none;background:var(--pistachio);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.vl-add:hover{filter:brightness(.95)}

.vl-bkv-breadcrumb{font-size:12px;color:var(--muted);margin:0 0 12px}
.vl-bkv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.vl-bkv-tile{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:12px 14px;border:2px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;color:var(--ink)}
.vl-bkv-tile:hover{border-color:var(--pistachio-deep)}
.vl-bkv-tile span{font-weight:700;font-size:13.5px}
.vl-bkv-tile small{color:var(--muted);font-size:11px}
.vl-bkv-chosen{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}

/* Versorgungslohn: Klappfunktion der Investition-Spalte + Jahres-Detailkarten. */
.vl-calc--green{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.vl-expand{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;transition:transform .15s ease}
.vl-expand:hover{color:var(--pistachio-deep)}
.vl-expand--open{transform:rotate(180deg)}
.vl-detail>td{background:var(--panel);padding:0}
.vl-detail-box{padding:16px 18px}
.vl-detail-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.vl-detail-card{margin:0}
/* Nutzer-Wunsch 27.07.2026: die erste Karte nicht ueber die volle Breite strecken, sondern als
   kompakte Kachel (wie die beiden darunter). */
.vl-detail-card--wide{margin:0;max-width:520px}
.vl-detail-sub{color:var(--pistachio-deep);font-size:12.5px;margin:0 0 10px}
.vl-detail-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:6px 0;border-top:1px solid var(--line)}
.vl-detail-row span{color:var(--muted)}
@media (max-width:900px){.vl-detail-cards{grid-template-columns:1fr}}
/* Tab 2 Personalkostenentwicklung: Szenario-Tabellen (Zeilen=Kennzahlen, Spalten=Jahre). */
.vl-pk-card{margin-bottom:18px}
.vl-pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.vl-pk-scroll{overflow-x:auto}
.vl-pk-table{border-collapse:collapse;width:100%;font-size:12.5px}
.vl-pk-table th,.vl-pk-table td{padding:8px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.vl-pk-table thead th{text-align:right;font-weight:700;color:var(--muted);border-bottom:1.5px solid var(--ink)}
.vl-pk-table tbody th{text-align:left;font-weight:600;color:var(--ink);position:sticky;left:0;background:var(--paper)}
.vl-pk-table tbody tr:nth-child(even) td{background:var(--panel)}
.vl-pk-row--bold th,.vl-pk-row--bold td{font-weight:700}

/* Kosten-Kacheln: eine schmale Zeile, klein - die 2 Tabellen darunter bleiben die Hauptinfo
   (Nutzer-Meldung: "kacheln viel zu gross, nur 1 zeile und viel kleiner"). */
.vl-cost-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0}
.vl-cost-tiles .kpi-card__l{font-size:9px;letter-spacing:.02em}
.vl-cost-tiles .kpi-card__v{font-size:14px}
@media (max-width:700px){.vl-cost-tiles{grid-template-columns:repeat(2,1fr)}}

/* Ein-/Ausklappen je Sidebar zur reinen Icon-Leiste (Nutzer-Wunsch 27.07.2026:
   "einklappfunktion für jede sidebar einzeln, nur die icons zeigen wenn minimiert,
   button an die sidebars selbst"). Button sitzt oben rechts an der jeweiligen Sidebar.
   Nutzer-Meldung 01.08.2026: fruehere Regel ".sidebar{position:relative}" hat das
   position:sticky (Zeile 48) ueberschrieben -> Sidebar scrollte mit. sticky bleibt jetzt
   erhalten (liefert zugleich den Positionskontext fuer den absolut gesetzten Button), und
   NUR die Nav-Liste scrollt intern, falls sie hoeher als der Viewport ist. */
.sidebar__nav{overflow-y:auto;min-height:0}
.sidebar__collapse{position:absolute;top:10px;right:8px;z-index:5;width:22px;height:22px;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--muted);
  font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.sidebar__collapse:hover{border-color:var(--pistachio-deep);color:var(--ink)}
/* Nutzer 12.08.2026: main-Sidebar ausblenden, wenn die 3. Sidebar (Vertragskontext) ausgeklappt ist
   (nie 3 Rails gleichzeitig offen). Nur Desktop - per JS syncSidebarAutohide() gesetzt. */
.sidebar--autohide{display:none !important}
.sidebar--rail{width:64px;flex:0 0 64px;padding-left:8px;padding-right:8px}
.sidebar--rail .sidebar__label,
.sidebar--rail .sidebar__brand-sub,
.sidebar--rail .sidebar__ctx-label,
.sidebar--rail .sidebar__ctx-title,
.sidebar--rail .sidebar__ctx-sub,
.sidebar--rail .sidebar__foot,
.sidebar--rail .sidebar__user{display:none}
.sidebar--rail .sidebar__collapse{right:auto;left:50%;transform:translateX(-50%)}
.sidebar--rail .sidebar__brand{margin:34px 0 20px;padding:0;text-align:center}
/* Eingeklappt: Wortmarke ausblenden, nur das Logomark (Favicon) zeigen. */
.sidebar__brand-mark{display:none}
.sidebar--rail .sidebar__brand-logo{display:none}
.sidebar--rail .sidebar__brand-mark{display:block;width:30px;height:30px;margin:0 auto}
.sidebar--rail .sidebar__ctx{padding:0 0 10px;text-align:center}
.sidebar--rail .sidebar__nav{margin-top:6px}
.sidebar--rail .sidebar__link{justify-content:center;gap:0;padding:10px 0}
.sidebar--rail .sidebar__icon{width:auto}

/* Berechnungsgrundlage dezenter (Nutzer-Meldung 27.07.2026: "zu präsent"). */
/* Nur so hoch wie der Inhalt (nicht auf Tabellenhöhe gestreckt) - Nutzer-Wunsch 23.07.2026. */
.vl-params{flex:0 0 220px;background:transparent;border:1px solid var(--line);border-radius:10px;padding:12px 14px;align-self:flex-start}
.vl-params__h{margin:0 0 10px;font-size:10.5px}
.vl-param{padding:6px 0}
.vl-param__l{font-size:11.5px}
.vl-param__v{font-size:13px}

/* Berechnungsgrundlage deutlich kompakter (Nutzer-Meldung 23.07.2026: "alles noch zu groß").
   Label und Eingabe stehen jetzt in EINER Zeile statt gestapelt - halbiert die Panelhoehe. */
.vl-params{flex:0 0 214px;padding:10px 12px}
.vl-params__h{margin:0 0 7px;font-size:9.5px}
.vl-params__hint{font-size:9.5px;margin:7px 0 0}
.vl-params__tabs{margin:0 0 6px}
.vl-params__tabs .tab-btn{padding:4px 3px;font-size:9.5px}
.vl-param{padding:4px 0}
.vl-param--input{flex-direction:row;align-items:center;gap:8px}
.vl-param--input label{flex:1 1 auto;font-size:11px;margin:0;line-height:1.2}
.vl-param--input label em{font-style:normal;font-weight:400;opacity:.65} /* AVWL-Quote */
.vl-param--input>div{flex:0 0 76px;gap:3px;justify-content:flex-end}
.vl-param--input input{min-width:0;font-size:12.5px;text-align:right;padding:1px 0}
.vl-param--input span{font-size:11px}
.vl-toggle{align-items:flex-start;gap:6px;margin-top:8px;font-size:11px;line-height:1.25}
.vl-save{margin:8px 0 0;font-size:9.5px}
/* Pflichtangaben (Steuersatz, Gehaltssteigerung) - fehlende Werte deutlich markieren. */
.vl-param--err input{border-bottom-color:#c0392b;color:#c0392b}
.vl-param--err label{color:#c0392b}
.vl-param--input label b{color:#c0392b;font-weight:700}
.vl-error{margin:8px 0 0;font-size:10px;line-height:1.35;color:#c0392b;font-weight:600}
/* bKV-Popup: Liste der gewaehlten Tarife (mehrere je Jahr). */
.vl-bkv-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12px}
.vl-bkv-row__l{flex:1 1 auto;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-bkv-row label{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:11px;white-space:nowrap}
.vl-bkv-row input{border:none;border-bottom:1px solid var(--line);background:transparent;font-size:12.5px;font-weight:700;text-align:right;padding:1px 0}
.vl-bkv-row__x{border:none;background:transparent;color:#c0392b;font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
/* Differenz-Karte unter den beiden Jahreskosten-Karten (volle Breite). */
/* Differenz-Karte in die rechte (3.) Spalte statt volle Breite (Nutzer-Wunsch 24.07.2026). */
.vl-detail-diff{grid-column:auto}
.vl-detail-row--sum{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;font-weight:700}
/* bKV-Popup: Summenzeile + Freigrenzen-Warnung. */
.vl-bkv-sum{margin-top:8px}
.vl-bkv-sum__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;font-size:12px}
.vl-bkv-sum__row b{font-size:14px}
.vl-bkv-sum__warn{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:rgba(192,57,43,.08);
  border:1px solid rgba(192,57,43,.35);color:#c0392b;font-size:11px;line-height:1.45}
/* Tab "Darstellung": Praesentationssicht mit Inline-SVG-Diagrammen. */
.vl-show{display:flex;flex-direction:column;gap:16px}
.vl-show__kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
.vl-show__card{padding:16px 18px}
.vl-chart{margin-top:10px;width:100%}
.vlc{width:100%;height:280px;display:block}
.vlc-grid{stroke:var(--line);stroke-width:1}
.vlc-ax{font-size:11px;fill:var(--muted);text-anchor:middle}
.vlc-ax--y{text-anchor:end}
.vlc-line{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke}
.vlc-line--a{stroke:#1D1D1B}
.vlc-line--b{stroke:var(--pistachio-deep,#8a9a00)}
.vlc-band{stroke:none}
.vlc-band--plus{fill:rgba(192,57,43,.16)}   /* SOLL teurer  */
.vlc-band--minus{fill:rgba(30,132,73,.18)}  /* SOLL guenstiger */
.vlc-break{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 3}
.vlc-break-l{font-size:10px;fill:var(--muted)}
/* Break-even bereits im ersten Jahr erreicht: deutlich hervorgehoben (Nutzer-Wunsch 24.07.2026) */
.vlc-break--now{stroke:#1e8449;stroke-width:2;stroke-dasharray:none}
.vlc-break-badge{fill:#1e8449}
.vlc-break-l--now{font-size:11px;font-weight:700;fill:#fff}
.vlc-bar--vl{fill:var(--pistachio,#D3D800)}
.vlc-bar--bkv{fill:#8a9a00}
.vlc-bar--sav{fill:rgba(30,132,73,.75)}
.vl-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:11px;color:var(--muted)}
.vl-legend span{display:flex;align-items:center;gap:6px}
.vl-legend__dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.vl-legend__dot--a{background:#1D1D1B}
.vl-legend__dot--b{background:var(--pistachio-deep,#8a9a00)}
.vl-legend__dot--gap{background:rgba(30,132,73,.35)}
.vl-legend__dot--vl{background:var(--pistachio,#D3D800)}
.vl-legend__dot--bkv{background:#8a9a00}
.vl-legend__dot--sav{background:rgba(30,132,73,.75)}
@media (max-width:900px){.vl-show__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Abgeschwaechte Lohnprogression: Kennzahlen ueber der Jahrestabelle. */
.vl-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 12px}
.vl-progress__i{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.vl-progress__i span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:3px}
.vl-progress__i b{font-size:17px}
@media (max-width:700px){.vl-progress{grid-template-columns:1fr}}
/* Darstellungs-Karten: Kopfzeile mit Anzeigen-Schalter (gleiches Muster wie die Tabellen). */
.vl-show__card .vl-pk-head{margin-bottom:6px}
/* Legenden-Schalter: kleiner Schalter je Kurve/Balkenart im Diagramm. */
.vl-legend__sw{margin:0;gap:6px}
.vl-legend__sw .switch{transform:scale(.8);transform-origin:left center}
.vl-legend__sw .switch-row__label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.vl-legend{gap:16px;align-items:center}

/* Verband -> Bridge: eingebettete externe SPA (Nutzer-Wunsch 23.07.2026) */
.bridge-frame-wrap{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.bridge-frame{width:100%;height:calc(100vh - 220px);min-height:480px;border:1px solid var(--line,#e2e2df);border-radius:12px;background:#fff}
.bridge-frame__hint{margin:0;font-size:12px;color:var(--muted,#8a8a86)}
.bridge-frame__hint a{color:inherit;text-decoration:none}

/* Versorgungslohn: "bei X %" hinter Gehaltszahlungen (Nutzer-Wunsch 23.07.2026) */
.vl-detail-hint{color:var(--muted,#8a8a86);font-weight:400;font-size:.9em}

/* bKV: Versicherer-Logo im Picker + in der Zellen-Unterzeile (Nutzer-Wunsch 23.07.2026) */
.vl-bkv-tile--ins{align-items:center;text-align:center}
.vl-bkv-tile__logo{display:flex;align-items:center;justify-content:center;height:34px;width:100%;margin-bottom:2px}
.vl-bkv-tile__logo img{max-height:34px;max-width:100%;object-fit:contain}
/* bKV-Logo in DIESELBE Zeile wie den Beitrag (Nutzer-Wunsch 24.07.2026), damit die Zeilenhoehe
   konstant bleibt und die Trennlinie zur Spalte "Investition" nicht bricht. */
.vl-cell__sub--bkv{display:inline-flex;flex-wrap:nowrap;gap:0 6px;vertical-align:middle;margin:0 6px 0 0;max-width:none;overflow:visible}
.vl-bkv-tag{display:inline-flex;align-items:center;gap:4px;min-width:0}
.vl-bkv-tag__logo{height:16px;width:auto;max-width:52px;object-fit:contain;flex:none;vertical-align:middle}
.vl-bkv-tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}

/* Kleine Info-Mouseover in der Differenz-Karte (Nutzer-Wunsch 24.07.2026) */
.vl-info{display:inline-block;margin-left:5px;color:var(--muted,#8a8a86);font-size:11px;cursor:help;opacity:.65;vertical-align:baseline}
.vl-info:hover,.vl-info:focus{opacity:1;color:var(--pistachio-deep);outline:none}

/* Netto-Effekt-Kachel: zusaetzliche "Leistung je Mitarbeiter" (Nutzer-Wunsch 24.07.2026) */
.kpi-card__extra{margin-top:10px;padding-top:8px;border-top:1px solid var(--line,#e6e6e0)}
.kpi-card__extra-v{font-size:16px;font-weight:700;color:#1e8449;line-height:1.15}
.kpi-card__extra-l{font-size:11px;color:var(--muted);margin-top:1px;line-height:1.25}

/* Versorgungslohn-Rechner in Phase 4 (Vertrieb, Nutzer-Wunsch 24.07.2026) */
.vlr-card{margin-bottom:14px}
.vlr-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 18px;margin-bottom:14px}
.vlr-ctrl{display:flex;flex-direction:column;gap:5px}
.vlr-ctrl__l{font-size:12px;color:var(--muted)}
.vlr-ctrl__l b{color:var(--text);font-weight:700}
.vlr-ctrl input[type=range]{width:100%;accent-color:var(--pistachio-deep)}
.vlr-ctrl select{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:12.5px}
.vlr-heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.vlr-hero{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center}
.vlr-hero__l{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.vlr-hero__v{display:block;font-size:22px;font-weight:800;line-height:1.1}
.vlr-hero__v--green{color:#1e8449}
.vlr-chart{width:100%;height:210px}
.vlr-chart .vlc{width:100%;height:100%;display:block}
@media (max-width:640px){.vlr-controls,.vlr-heroes{grid-template-columns:1fr}}

/* Versorgungslohn-Rechner: editierbare Basis + bKV-Logo-Picker (Nutzer-Wunsch 24.07.2026) */
.vlr-basis{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-bottom:12px}
.vlr-basis input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:13px}
.vlr-controls--2{grid-template-columns:1fr 1fr}
.vlr-bkv{margin-bottom:14px}
.vlr-bkv-chosen{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}
.vlr-bkv-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid var(--line);border-radius:20px;background:var(--panel);font-size:12px}
.vlr-bkv-chip img{height:16px;width:auto;max-width:48px;object-fit:contain}
.vlr-bkv-chip__t{color:var(--text)}
.vlr-bkv-chip__x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.vlr-bkv-chip__x:hover{color:#c0392b}
.vlr-bkv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:4px}
.vlr-bkv-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;text-align:center;transition:border-color .12s,box-shadow .12s}
.vlr-bkv-tile:hover{border-color:var(--pistachio-deep);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.vlr-bkv-tile__logo img{height:26px;width:auto;max-width:96px;object-fit:contain}
.vlr-bkv-tile__t{font-size:12.5px;font-weight:600;color:var(--text)}
.vlr-bkv-tile small{font-size:10.5px;color:var(--muted)}
.vlr-bkv-back{display:inline-block;margin-bottom:8px;font-size:12px}
@media (max-width:640px){.vlr-basis,.vlr-controls--2{grid-template-columns:1fr}}

/* bAV-Nettokosten-Rechner: kompakteres, farbiges Layout (Nutzer-Wunsch 24.07.2026) */
.bavr-layout{grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:start;gap:18px}
@media (max-width:1100px){.bavr-layout{grid-template-columns:1fr}}
.bavr-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:10px}
@media (max-width:1000px){.bavr-kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.bavr-kpis{grid-template-columns:repeat(2,1fr)}}
/* Geschwungene Klammer rechts der SV-Zeilen mit Summe der SV-Ersparnis (Nutzer-Wunsch 24.07.2026). */
.bavr-brace{border-bottom:none;padding:0 4px 0 6px;vertical-align:middle;white-space:nowrap;width:1%}
.bavr-brace__wrap{display:flex;align-items:center;gap:4px}
.bavr-brace__b{font-size:46px;font-weight:200;line-height:.4;color:#9db35a;display:inline-block;transform:scaleY(2)}
.bavr-brace__t{font-size:10px;color:var(--muted);line-height:1.2;text-align:left}
.bavr-brace__t b{display:block;font-size:13px;font-weight:700;color:#1e8449}
.bavr-kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 12px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.bavr-kpi__l{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bavr-kpi__row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.bavr-kpi__v{font-size:16px;font-weight:800;line-height:1.1}
.bavr-kpi__v--green{color:#1e8449}
.bavr-kpi__v--red{color:#c0392b}
.bavr-kpi__s{font-size:10px;color:var(--muted)}
.bavr-card{padding:8px 14px}
.bavr-table{width:100%;border-collapse:collapse;font-size:12px}
.bavr-table th{text-align:right;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:3px 10px 5px;border-bottom:1px solid var(--line)}
.bavr-table th:first-child{text-align:left}
.bavr-table td{padding:2.5px 10px;text-align:right;border-bottom:1px solid var(--line-soft,#f1f0ea);white-space:nowrap;font-variant-numeric:tabular-nums}
.bavr-table td:first-child{text-align:left;color:var(--ink)}
.bavr-grp td{padding:6px 10px 2px;text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--pistachio-deep);font-weight:700;border-bottom:none}
.bavr-muted{color:var(--muted)}
.bavr-plus{color:#1e8449}
.bavr-minus{color:#c0392b}
.bavr-diff{color:#1e8449;font-weight:600}
.bavr-diff--zero{color:var(--muted);font-weight:400}
.bavr-diff--neg{color:#c0392b;font-weight:700}
.bavr-sum td{font-weight:700;font-size:13px;border-top:2px solid var(--line);border-bottom:none;padding-top:5px}
.bavr-note{font-size:10px;color:var(--muted);margin:6px 2px 0;line-height:1.35}
/* bAV-Rechner: kompakter Seitenkopf, damit Form + Ergebnis ohne Scrollen auf einen Screen passen
   (Nutzer-Wunsch 24.07.2026). Nur auf dieser Seite - via :has()-Nachbarschaft zur Rechner-Form. */
.phase__head:has(+ .bavr-form-card){margin-bottom:8px}
.phase__head:has(+ .bavr-form-card) .phase__h{margin:2px 0}
.phase__head:has(+ .bavr-form-card) .phase__l{font-size:11px;margin:2px 0 0;line-height:1.3}
.bavr-cards{margin-top:14px}
.bavr-break__r{display:flex;justify-content:space-between;gap:14px;padding:4px 0;font-size:12.5px;border-bottom:1px solid var(--line-soft,#f1f0ea)}
.bavr-break__r span{color:var(--muted)}
.bavr-break__r b{font-variant-numeric:tabular-nums}
.bavr-break__r--sum{border-bottom:none;border-top:1px solid var(--line);margin-top:2px;padding-top:7px;font-weight:700}
.bavr-break__r--sum span{color:var(--ink);font-weight:700}
.bavr-green{color:#1e8449}
.bavr-limits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bavr-limit{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.bavr-limit__t{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.bavr-limit__t small{font-weight:400;color:var(--muted)}
.bavr-limit__row{display:flex;justify-content:space-between;font-size:12px;padding:2px 0}
.bavr-limit__row span{color:var(--muted)}
@media (max-width:560px){.bavr-kpis,.bavr-limits{grid-template-columns:1fr}}

/* News: gruppierte Aenderungen je Person/Vertrag (Nutzer-Wunsch 24.07.2026) */
/* Nutzer-Meldung 25.08.2026: „wir haben sehr viel weissraum in den news beim berater, da alle
   infos untereinander geschrieben werden. wir können doch die ganze breite nutzen."
   Bei 18 Änderungen entstand eine 18 Zeilen hohe Spalte, rechts daneben nichts. Jetzt fliessen
   die Zeilen in so viele Spalten, wie die Breite hergibt - auf einem schmalen Fenster bleibt es
   automatisch einspaltig, weil die Mindestbreite von 240 px dann nur einmal passt. */
.news-grp__list{margin:5px 0 0;padding-left:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px 22px}
/* Nutzer 25.08.2026: "Tarif passt nicht ins feld und wird abgeschnitten." Die Zeilen waren auf
   eine Zeile festgenagelt (nowrap + Ellipse) - ein langer Tarifname wie "Zukunftsrente Komfort-
   Dynamik mit Rückgewähr" endete als "…". Jetzt umbricht der Wert innerhalb seiner Spalte; die
   Spaltenbreite bleibt gleich, nur die betroffene Zeile wird zweizeilig. */
.news-grp__list li{font-size:12px;color:var(--muted);padding:1px 0;line-height:1.45;
  white-space:normal;overflow-wrap:anywhere}
.news-grp__f{color:var(--ink);font-weight:600}
/* Versicherer + Vertragsnummer in der Kopfzeile einer Vertragsmeldung. */
/* Arbeitgeberlogo direkt vor dem Firmennamen - GLEICHE Höhe wie das Versichererlogo (15 px),
   damit die Kopfzeile eine Zeile bleibt.

   Achtung beim Ändern: Format::companyLogoTile() setzt die Klasse auf das umschliessende <span>,
   das <img> darin trägt KEINE Klasse. Ein Selektor wie „img.news-ag__logo" greift deshalb nie -
   das Bild blieb ungestylt und erschien in Originalgrösse quer über die Seite (25.08.2026). */
/* Kategorie-Symbol vor einer News-Zeile. Schwarz wie der Text, nur leicht zurückgenommen -
   Nutzer 25.08.2026: „die icons zu den Kategorien bitte schwarz - keine bunten farben." */
.news-kat{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:20px;color:var(--ink);opacity:.55}
.news-kat svg{display:block}
.news-ag{display:inline-flex;align-items:center;margin-right:7px;vertical-align:middle}
/* 22 px statt 15: Arbeitgeberlogos sind meist QUADRATISCH, Versichererlogos breit. Bei gleicher
   Höhe wirkte das AG-Logo deshalb winzig (15x15 gegen 60x15) - Nutzer 25.08.2026 "jetzt sind die
   ag logos zu klein". Die Höhe der Kopfzeile gibt das nicht her, ohne dass die Zeile springt,
   deshalb sitzt das Logo in einem festen 22-px-Kasten und ragt optisch nicht heraus. */
.news-ag__logo{display:inline-flex;align-items:center;justify-content:center;
  height:22px;max-width:86px;overflow:hidden}
.news-ag__logo img{height:22px;width:auto;max-width:86px;object-fit:contain;display:block}
.news-ag__logo .table-logo__fallback{display:inline-flex;align-items:center;justify-content:center;
  height:22px;min-width:22px;padding:0 5px;background:var(--panel);border:1px solid var(--line);
  font-size:10px;font-weight:800;color:var(--muted);line-height:1}
.news-vt{display:inline-flex;align-items:center;gap:6px;margin-left:8px;vertical-align:middle}
.news-vt__logo{height:15px;width:auto;max-width:74px;object-fit:contain;display:block}
.news-vt__ini{display:inline-flex;align-items:center;justify-content:center;height:15px;padding:0 4px;
  background:var(--panel);border:1px solid var(--line);font-size:9px;font-weight:800;color:var(--muted)}
.news-vt__nr{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--muted)}

/* bAV-Rechner: kompaktes horizontales Eingabeformular oben (Nutzer-Wunsch 24.07.2026) */
.bavr-form-card{margin-bottom:12px;padding:12px 14px}
/* Nutzer-Meldung 24.08.2026: „das Gesamtbeitragsfeld ist nicht mehr sichtbar. wir haben 10
   Eingabefelder und 2 Schalter. das besser aufteilen und den weissraum nutzen."

   Vorher teilte auto-fit alle Felder in gleich breite Spalten von je 150 px. In der Beitrags-Zelle
   stehen aber DREI Bedienelemente (Betrag, Monat/Jahr, brutto/netto) - das Eingabefeld wurde auf
   wenige Pixel zusammengedrückt. Jetzt ein 12-Spalten-Raster, in dem jedes Feld so viele Spalten
   bekommt, wie sein Inhalt braucht: die Beitrags-Zelle vier, ein Auswahlfeld mit einer Ziffer zwei. */
.bavr-inputs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px 12px;align-items:end}
.bavr-inputs > .field{grid-column:span 3}
.bavr-c2{grid-column:span 2 !important}
.bavr-c3{grid-column:span 3 !important}
.bavr-c4{grid-column:span 4 !important}
/* Die Schalter in eine eigene Zeile: nebeneinander gelesen sind es drei Aussagen über denselben
   Sachverhalt, verteilt auf drei Rasterzellen wirkten sie wie unzusammenhängende Felder. */
.bavr-schalter{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
  margin-top:2px;padding-top:9px;border-top:1px solid var(--line)}
.bavr-schalter .bavr-sw-cell{height:auto}
@media (max-width:1100px){
  /* Alle Spannweiten MIT !important zurücksetzen - die Grundregeln oben tragen es ebenfalls,
     ohne würden c2/c3/c4 hier weitergelten und das Raster zerfasern (gemessen bei 1000 px:
     Zeilen mit 1, 1, 2, 1, 2, 1 Feldern statt durchgehend zwei). */
  .bavr-inputs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bavr-inputs > .field,
  .bavr-c2,.bavr-c3,.bavr-c4{grid-column:span 3 !important}
}
@media (max-width:680px){
  .bavr-inputs{grid-template-columns:1fr}
  .bavr-inputs > .field,.bavr-c2,.bavr-c3,.bavr-c4{grid-column:1 / -1 !important}
}
.bavr-inputs .field label{font-size:11px;color:var(--muted);margin-bottom:2px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bavr-inputs input,.bavr-inputs select{width:100%;height:32px;padding:4px 8px;font-size:13px}
.bavr-form-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* bAV-Rechner: Kirchensteuer-/PV-Schalter als Grid-Zellen mittig ausrichten (Nutzer-Wunsch
   24.07.2026: Schalter nach oben zu den Eingabefeldern, nicht mehr in einer Fusszeile). */
.bavr-sw-cell{display:flex;align-items:center;height:32px;gap:7px}
.bavr-sw-cell .switch-row__label{font-size:11.5px;line-height:1.15}

/* bAV-Rechner: zentrale Fehlermeldung bei AG-Zuschuss < 15 % (Nutzer-Wunsch 24.07.2026). */
.bavr-alert-overlay{position:fixed;inset:0;z-index:3000;background:rgba(20,20,20,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.bavr-alert-box{background:#fff;border-radius:14px;padding:26px 28px;max-width:400px;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.28)}
.bavr-alert-icon{font-size:34px;color:#c0392b;line-height:1;margin-bottom:8px}
.bavr-alert-msg{font-size:14px;color:var(--ink);line-height:1.5;margin:0 0 18px}

/* bAV-Rechner: mehr Farbe in der Vergleichstabelle (Nutzer-Wunsch 24.07.2026). */
.bavr-table thead th{background:#f4f6ec}
.bavr-table thead th:nth-child(3){background:#e4f0e3}
.bavr-table .bavr-grp td{background:#e9f0d6;color:var(--pistachio-deep)}
.bavr-table td:nth-child(3){background:rgba(30,132,73,.06)}   /* "Mit EU" = die Umwandlungs-Spalte gruen hinterlegen */
.bavr-table td:nth-child(4){background:rgba(157,179,90,.05)}  /* "Ersparnis"-Spalte dezent hervorheben */
.bavr-table .bavr-sum td{background:#f4f6ec;color:var(--ink)}
.bavr-table .bavr-sum td:nth-child(3){background:#dfeede}
.bavr-plus{color:#1e8449;font-weight:600}
.bavr-minus{color:#c0392b;font-weight:600}

/* Vertragskachel: grosser Wert rechts (bKV-Budget, Nutzer-Wunsch 24.07.2026). */
.k1-tile__val{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1.05;margin-left:auto;padding-left:10px;white-space:nowrap}
.k1-tile__valn{font-size:20px;font-weight:800;color:var(--pistachio-deep)}
.k1-tile__vall{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* bKV-Vertrag: kleiner "Leistungen"-Button in der Tarif-&-Beitrag-Karte (oeffnet das Tarif-Popup). */
.vt-leist-btn{display:inline-block;font:inherit;font-size:12px;font-weight:600;line-height:1;padding:4px 9px;border:1px solid var(--pistachio-deep);border-radius:999px;background:transparent;color:var(--pistachio-deep);cursor:pointer;vertical-align:middle}
.vt-leist-btn:hover{background:var(--pistachio-deep);color:#fff}

/* Kompaktes 2-Spalten-Raster in Info-Karten (Nutzer-Wunsch 24.07.2026: bKV-Vertrag nicht alles
   untereinander). Kurze Werte packen sich in 2 Spalten; das breite Kategorie-Feld darf ganze Zeile. */
.rf-grid--compact{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 18px}

/* Leistungs-Popup (tariff-leistungen.php): Masonry ueber CSS-Spalten - je Rubrik eine Karte, fuellt
   die Modalbreite statt endloser Einzelspalte. */
.tl-head{margin:0 0 14px}
.tl-title{font-size:18px;font-weight:800;color:var(--ink);margin:0}
.tl-sub{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.tl-grid{column-width:300px;column-gap:16px}
.tl-card{break-inside:avoid;-webkit-column-break-inside:avoid;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 14px;display:inline-block;width:100%}
.tl-card__h{margin:0 0 6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--pistachio-deep)}
.tl-card__row{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--ink)}
.tl-card__row + .tl-card__row{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-soft,#f1f0ea)}
.tl-card__ic{flex:0 0 auto;color:#1e8449;font-weight:800}
.tl-card__row--no .tl-card__ic{color:var(--muted)}
.tl-card__row--no .tl-card__t{color:var(--muted)}


/* Erledigt-Schalter im Postfach (Nutzer 22.08.2026): offen = blasses Häkchen, erledigt = grün gefüllt.
   Erledigte Zeilen treten optisch zurück, bleiben aber lesbar (kein Ausgrauen bis zur Unkenntlichkeit). */
.mail-list__done{opacity:.35;padding:2px 4px;line-height:1;color:var(--muted)}
.mail-list__done:hover{opacity:1;color:#2E7D32}
.mail-list__done.is-done{opacity:1;color:#fff;background:#2E7D32;border-radius:50%}
.mail-list__row--done .mail-list__subject,
.mail-list__row--done .mail-list__sender{opacity:.6}
.mail-list__row--done .mail-list__preview{opacity:.5}

/* News-Dokumentzeile: Versichererlogo, Vertragsnummer, Dokumentdatum (Nutzer-Wunsch 22.08.2026).
   Vorher stand dort nur der Titel - ohne Bezug, zu welchem Vertrag das Dokument gehoert. */
.nf-doc__logo{height:16px;width:auto;max-width:70px;object-fit:contain;vertical-align:-3px;margin-right:7px}
.nf-doc__pol{margin-left:8px;font-size:.78rem;color:var(--muted,#6b7280);font-variant-numeric:tabular-nums}
.nf-doc__date{margin-left:8px;font-size:.78rem;color:var(--muted,#6b7280)}
@media(max-width:600px){.nf-doc__pol,.nf-doc__date{display:block;margin-left:0}}
/* Vertragsbezug im News-Kartenkopf: gilt die Karte genau einem Vertrag, steht Versicherer +
   Vertragsnummer einmal oben statt in jeder Zeile (Nutzer-Wunsch 22.08.2026). */
.nf-card__contract{display:flex;align-items:center;gap:8px;padding:7px 0 9px;margin:-4px 0 6px;border-bottom:1px solid var(--line-soft,rgba(0,0,0,.06))}
.nf-card__pol{font-size:.8rem;color:var(--muted,#6b7280);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Icon-Buttons in Zeilenlisten (Nutzer-Wunsch 22.08.2026: Bearbeiten-Stift bei Budgetstufen;
   zugleich Ablösung der Text-Links "Entfernen" gemäß der Regel "Symbole statt Textlinks").
   Bewusst zurückhaltend: neutral bis Hover, Löschen erst dort rot - damit die Zeile ruhig bleibt. */
.row-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.row-actions form{margin:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;
  border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;color:var(--muted,#6b7280);
  transition:background .12s,color .12s,border-color .12s}
.icon-btn:hover{background:var(--line-soft,rgba(0,0,0,.05));color:var(--ink,#111827);border-color:var(--line)}
.icon-btn:focus-visible{outline:2px solid var(--accent,#a3b800);outline-offset:1px}
.icon-btn--danger:hover{background:rgba(185,28,28,.08);color:var(--error,#b91c1c);border-color:rgba(185,28,28,.25)}

/* Tarifmatrix (Nutzer-Spezifikation 22.08.2026). Wichtig ist die farbliche Trennung der vier
   Zustaende - "nicht festgestellt" muss sich sichtbar von "ausgeschlossen" abheben, sonst ist
   die Unterscheidung fuer den Nutzer wertlos. */
.bm__sum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.bm__sumitem{font-size:.8rem;padding:3px 9px;border-radius:99px;border:1px solid var(--line);white-space:nowrap}
.bm__sumitem--ok{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.25)}
.bm__sumitem--warn{background:rgba(202,138,4,.10);border-color:rgba(202,138,4,.28)}
.bm__sumitem--error{background:rgba(185,28,28,.08);border-color:rgba(185,28,28,.25)}
.bm__sumitem--muted{background:var(--line-soft,rgba(0,0,0,.04))}
.bm__hint{font-size:.82rem;background:var(--line-soft,rgba(0,0,0,.04));border-radius:10px;padding:10px 12px;margin-bottom:12px}
.bm__hint ul{margin:6px 0 0;padding-left:18px}
.bm__toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
.bm__cat{margin-bottom:16px}
.bm__cathead{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.bm__catname{font-weight:600}
.bm__catclass{font-size:.74rem;color:var(--muted,#6b7280);text-transform:uppercase;letter-spacing:.04em}
.bm__tbl{width:100%;border-collapse:collapse}
.bm__row td{padding:6px 4px;border-bottom:1px solid var(--line-soft,rgba(0,0,0,.05));vertical-align:top}
.bm__row--sub .bm__name{padding-left:20px;color:var(--muted,#6b7280)}
.bm__st{width:24px;text-align:center}
.bm__name{font-weight:500}
.bm__term{display:block;font-size:.76rem;color:var(--muted,#6b7280);font-weight:400}
.bm__val{width:32%;font-variant-numeric:tabular-nums}
.bm__ev{width:18%}
.bm__badge{font-size:.72rem;padding:2px 7px;border-radius:99px;background:var(--line-soft,rgba(0,0,0,.05));color:var(--muted,#6b7280);white-space:nowrap}
.bm__act{width:70px;text-align:right;white-space:nowrap}
.bm__grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:640px){.bm__val,.bm__ev{width:auto}.bm__ev{display:none}.bm__grid2{grid-template-columns:1fr}}

/* Bedingungen je Leistung (Nutzer-Praezisierung 22.08.2026). Bewusst unter dem Betrag und kleiner:
   Der Betrag ist die Antwort, die Bedingungen sind das Kleingedruckte - aber sie MUESSEN sichtbar
   sein, sonst liest sich "100 %, max. 180 EUR" wie eine bedingungslose Zusage. */
.bm__cond{list-style:none;margin:4px 0 0;padding:0;font-size:.78rem;color:var(--muted,#6b7280);line-height:1.5}
.bm__cond li{margin:0}
.bm__condk{font-weight:600}
.bm__filter{display:inline-flex;flex-wrap:wrap;gap:4px;margin-right:auto}
.bm__fbtn{font-size:.78rem;padding:4px 10px;border:1px solid var(--line);border-radius:99px;
  text-decoration:none;color:var(--ink,#111827);background:var(--card,#fff)}
.bm__fbtn--on{background:var(--accent,#c8d400);border-color:var(--accent,#c8d400);font-weight:600}
.bm__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Trenner zwischen strukturierten Leistungen und der frueheren Freitext-Erfassung. */
.bm__legacy-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:22px 0 10px;
  padding-top:14px;border-top:2px solid var(--line);font-weight:600;font-size:.9rem}

.bm__fbtn{cursor:pointer;font-family:inherit}
.bm__empty{color:var(--muted,#6b7280);padding:14px 0;margin:0}

.bm__run{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}

/* Fortschrittsbalken der KI-Analyse (Nutzer-Wunsch 22.08.2026, zusaetzlich zur Statuszeile). */
.ai-prog{position:relative;height:8px;border-radius:99px;background:var(--line-soft,rgba(0,0,0,.07));
  margin:8px 0 4px;overflow:visible}
.ai-prog__bar{height:8px;width:0;border-radius:99px;background:var(--accent,#c8d400);transition:width .4s ease}
.ai-prog__bar--ok{background:var(--ok,#16a34a)}
.ai-prog__bar--err{background:var(--error,#b91c1c)}
.ai-prog__pct{position:absolute;right:0;top:10px;font-size:.72rem;color:var(--muted,#6b7280);
  font-variant-numeric:tabular-nums}

/* Breites Tarif-Popup (Nutzer-Wunsch 22.08.2026). Die Matrix braucht Platz fuer Leistung, Wert und
   die Bedingungsliste - bei 760 px entstand horizontales Scrollen. Statt eines festen Werts die
   Fensterbreite ausnutzen und nur nach oben deckeln, damit es auf grossen Schirmen nicht ausufert. */
.modal--tarif{max-width:min(1240px, 94vw)}
/* Die Matrixtabelle darf die Breite nicht sprengen: umbrechen statt scrollen. */
.modal--tarif .bm__tbl{table-layout:fixed;width:100%}
.modal--tarif .bm__name,.modal--tarif .bm__val,.modal--tarif .bm__cond{overflow-wrap:anywhere}
.modal--tarif .bm__val{width:42%}
.modal--tarif .bm__ev{width:15%}
@media(max-width:900px){
  .modal--tarif .bm__ev{display:none}
  .modal--tarif .bm__val{width:auto}
}

/* Protokollausgabe der KI-Analyse: umbrechen statt scrollen, damit lange Rohantworten lesbar sind. */
.ai-log{white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;line-height:1.55;margin:0;max-height:60vh;overflow-y:auto;
  background:var(--line-soft,rgba(0,0,0,.04));border-radius:10px;padding:12px}

/* ---------------------------------------------------------------------------------------
 * Breite des Tarif-Popups (Nutzer-Meldung 22.08.2026: "das fenster ist weiterhin zu schmal -
 * ich will es nicht nach rechts/links scrollen müssen").
 *
 * Bewusst ueber die ID statt ueber die Klasse: Die Klasse steht in gesellschaften-tarife.php,
 * und solange die Datei nicht deployt ist, greift eine Klassenregel nicht. Die ID ist dieselbe,
 * egal welche Fassung oben liegt - damit haengt die Breite nicht mehr an der Deploy-Reihenfolge.
 * ------------------------------------------------------------------------------------ */
#tariffDetailModal .modal{max-width:min(1240px, 94vw)}

/* Kein horizontales Scrollen im Tarif-Popup: Der Rahmen darf nicht ueberlaufen, und lange
   Freitexte der Altdaten muessen umbrechen statt die Tabelle zu verbreitern. */
#tariffDetailModal .modal__body{overflow-x:hidden}
#tariffDetailModal .table-wrap,
#tariffDetailModal .table-wrap--scroll{overflow-x:hidden;max-width:100%}
#tariffDetailModal .data-table{table-layout:fixed;width:100%}
#tariffDetailModal .data-table td,
#tariffDetailModal .data-table th{overflow-wrap:anywhere;word-break:normal}
#tariffDetailModal .bm__tbl{table-layout:fixed;width:100%}
#tariffDetailModal .bm__name,
#tariffDetailModal .bm__val,
#tariffDetailModal .bm__cond{overflow-wrap:anywhere}
#tariffDetailModal .bm__val{width:42%}
#tariffDetailModal .bm__ev{width:15%}
@media(max-width:900px){
  #tariffDetailModal .bm__ev{display:none}
  #tariffDetailModal .bm__val{width:auto}
}
/* Der Sublimit-Filter ist kein Deckungsstatus - optisch abgesetzt, damit das klar bleibt. */
.bm__fbtn--limit{margin-left:10px;border-style:dashed}
/* Kurz hervorheben, welche Zeile gerade gespeichert wurde - sonst ist nach dem Nachladen unklar,
   wo man war (Nutzer-Wunsch 22.08.2026). */
.bm__row--hit td{background:rgba(200,212,0,.22);transition:background 1.2s ease}

/* Umbrüche in den Abrechnungs-Kennzahlen und Donut-Legenden (Nutzer-Meldung 22.08.2026).
   Der Betrag darf nicht umbrechen - lieber etwas kleiner werden. clamp() skaliert mit der
   Kachelbreite, sodass auch sechsstellige Summen einzeilig bleiben. */
.kpi-card__v{white-space:nowrap;font-size:clamp(19px, 2.1vw, 27px);line-height:1.15}
/* Der Legende mehr Platz geben: Der Wert braucht nur so viel Breite wie sein Text, der Rest
   gehört dem Namen. Zweizeilig statt hart abgeschnitten - so bleibt „Individuelle Beratung"
   lesbar, statt nach zwölf Zeichen zu enden. */
.donut-legend__l{white-space:normal;overflow:visible;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.donut-legend__row{align-items:flex-start}
.donut-legend__v{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(min-width:1100px){.donut-grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}}
/* Netto-Eigenbeitrag unter dem Gesamtbeitrag (Nutzer-Wunsch 22.08.2026). Bewusst kleiner und
   ruhiger als der Beitrag selbst - es ist die Einordnung, nicht die Hauptzahl. */
.mp-contract__netto{font-size:11.5px;color:var(--m-muted,#6b7280);text-align:right;margin-top:2px;line-height:1.3}
.mp-contract__netto strong{color:var(--m-ink,#141410)}

/* Für Bedienelemente, die im Markup gebraucht werden, aber nicht sichtbar sein sollen - z. B. der
   Absendeknopf der News-Filterleiste, der die Eingabetaste im Suchfeld erst wirksam macht
   (Nutzer 25.08.2026: „zurücksetzen und filtern entfernen"). Kein display:none: ein so
   ausgeblendeter Knopf löst die Eingabetaste NICHT mehr aus. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Notizverlauf einer Wiedervorlage (Nutzer 25.08.2026: „Es wäre aber gut diese zu behalten, da so
   ein nachvollziehbarer Gesprächsverlauf entsteht"). Ein durchgehender Strich links bindet die
   Beiträge optisch zusammen; jeder Beitrag trägt Verfasser und Zeitpunkt, älteste oben. */
.rn-thread{margin:8px 0 0;border-left:2px solid var(--line);padding-left:9px;
  display:flex;flex-direction:column;gap:7px}
.rn-note{font-size:13px;line-height:1.5}
.rn-note__meta{display:block;font-size:11px;color:var(--muted);margin-bottom:1px}
.rn-note__text{display:block;color:var(--ink)}
/* Letzter Beitrag = der aktuelle Stand, deshalb etwas kräftiger als die Vorgeschichte. */
.rn-note:last-child .rn-note__text{font-weight:500}
.rn-thread__older{margin:0}
.rn-thread__older > summary{font-size:11.5px;color:var(--muted);cursor:pointer;
  list-style:none;padding:1px 0;user-select:none}
.rn-thread__older > summary::-webkit-details-marker{display:none}
.rn-thread__older > summary::before{content:'▸ ';font-size:10px}
.rn-thread__older[open] > summary::before{content:'▾ '}
.rn-thread__older > summary:hover{color:var(--ink)}
.rn-thread__older .rn-note{margin-top:7px}

/* Filterleiste der News bleibt beim Scrollen stehen (Nutzer 25.08.2026: „den filter überall nicht
   mitscrollen"). Sie muss UNTER der ohnehin klebenden Kopfleiste einrasten, sonst verschwindet sie
   dahinter - deren Höhe steht in --sticky-top.

   Gemessen am echten Markup: .dash-topbar (Berater) 63 px, .emp-topbar (Arbeitgeberportal) 43 px;
   der Standard unten trägt 64 px, das Arbeitgeberportal setzt seinen Wert in
   inc/employer_header.php. Beide Leisten dürfen umbrechen (flex-wrap) und wären dann höher - die
   Filterleiste hat deshalb einen deckenden Hintergrund, damit sich im Zweifel nichts durchmischt.

   z-index unter dem der Kopfleiste (50 bzw. 30): die Kopfleiste gewinnt, wenn sich beide treffen. */
.news-filterbar{position:sticky;top:var(--sticky-top,64px);z-index:20;
  background:var(--panel);padding:10px 0;margin-bottom:12px}
/* Schmale Trennlinie erst, wenn die Leiste tatsächlich klebt - sonst wirkt sie im Ruhezustand
   wie ein abgesetzter Kasten. Ohne JS nicht unterscheidbar, deshalb dauerhaft, aber sehr leise. */
.news-filterbar::after{content:'';display:block;position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--line);opacity:.45}

/* Vorlagenname als leise Fussnote unter dem gesendeten Text (Nutzer-Frage 25.08.2026: „was wird
   bei der vorlage übertragen?"). Der TEXT ist die Nachricht - der Vorlagenname nur die Herkunft.
   Vorher stand er gross oben und las sich, als bekaeme der Mitarbeiter ihn geschickt. */
.wa-msg__tpl{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.02em;
  color:var(--muted);opacity:.85}

/* ── ABTEILUNGSKACHELN (Nutzer-Wunsch 26.08.2026: „die abteilungen müssen wir optisch besser
   trennen") ──────────────────────────────────────────────────────────────────────────────────
   Drei Bereiche mit klarer Kante: Kopf (wer ist das), Rumpf (wer sitzt drin), Fuß (wer bekommt
   die Post). Externe Stellen tragen den Rahmen in der Warnfarbe - sie sitzen ausserhalb des
   Unternehmens, das soll man auf zwei Meter Abstand sehen. */
.abt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;margin-bottom:14px}
.abt-kachel{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.abt-kachel__kopf{padding:11px 34px 11px 13px;background:var(--panel);border-bottom:1px solid var(--line)}
.abt-kachel--extern{border-color:#E5A23C}
.abt-kachel--extern .abt-kachel__kopf{background:#FFF6E9;border-bottom-color:#E5A23C}
.abt-kachel__name{margin:0;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25}
.abt-kachel__firma{margin:3px 0 0;font-size:12px;font-weight:600;color:#8A5200}
.abt-kachel__marken{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.abt-kachel__notiz{margin:5px 0 0;font-size:11.5px;color:var(--muted)}
.abt-kachel__koerper{flex:1;padding:9px 13px}
.abt-kachel__fuss{padding:10px 13px;border-top:1px solid var(--line);background:#FBFBF7;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start}
/* Die Knöpfe sitzen im Kopf - dieselbe Stelle wie auf allen anderen Kacheln. */
.abt-kachel .tariff-tile__edit{top:9px;right:30px}
.abt-kachel .tariff-tile__del{top:9px;right:9px}

.abt-liste{margin:0;padding:0;list-style:none;text-align:left}
.abt-liste li{padding:5px 0;font-size:12.5px;border-top:1px solid var(--line);line-height:1.35}
.abt-liste li:first-child{border-top:0}
.abt-liste__firma{display:block;font-size:11px;color:#8A5200}
.abt-slug{display:inline-block;padding:1px 7px;border:1px dashed var(--line);font-size:10.5px;
  letter-spacing:.03em;color:var(--muted);background:#fff}
.abt-extern{display:inline-block;padding:1px 7px;background:#fff;border:1px solid #E5A23C;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#8A5200}
.abt-leer{color:var(--muted);font-size:12.5px;margin:0}
.abt-post{margin:0;padding:6px 9px;background:#F4F7FF;border:1px solid #C7D6F5;border-radius:6px;
  font-size:11.5px;color:#2A4A8B;text-align:left;width:100%;box-sizing:border-box}
.abt-plus{width:auto;font-size:12px;padding:5px 11px}


/* ── Leistungen eines Tarifs aus der bKV-Leistungsdatenbank (03.09.2026) ─────────────────────
   Ersetzt die Matrix-Ansicht (.bm*) im Tarif-Fenster. Eine Zeile je Leistung: Name, Status,
   Erstattung, Stift. Bewusst schmal und ruhig - es sind 32 Zeilen, jede Verzierung multipliziert
   sich. */
.bkvl__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.bkvl__stand{font-size:12.5px;color:var(--ink)}
.bkvl__hint{font-size:11.5px;color:var(--muted)}
.bkvl__welt{margin-top:14px}
.bkvl__weltname{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.bkvl__zeile{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.bkvl__zeile:last-child{border-bottom:0}
/* Nicht hinterlegte Leistungen bleiben sichtbar, treten aber zurueck - man soll sehen, was noch
   fehlt, ohne dass es die belegten Zeilen erschlaegt. */
.bkvl__zeile--leer{opacity:.55}
.bkvl__namen{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.bkvl__name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
.bkvl__fach{font-size:11px;color:var(--muted);line-height:1.2}
.bkvl__badge{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 8px;
  border-radius:99px;white-space:nowrap}
.bkvl__wert{flex:0 0 auto;width:190px;font-size:12.5px;color:var(--ink);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
  .bkvl__zeile{flex-wrap:wrap}
  .bkvl__wert{width:auto;text-align:left;flex:1 1 100%;order:3}
}


/* ── Hinweistexte in GeVo-Formularen (03.09.2026) ────────────────────────────────────────────
   Datenschutzerklärung, Hinweise zu Rezepten: Der Vorgang liefert fertigen HTML-Text als FELDWERT.
   In einem einzeiligen Eingabefeld stand davon nur roher Quelltext, abgeschnitten - ausgerechnet
   bei dem, was gelesen werden soll. Jetzt als ruhiger Textblock, volle Breite. */
.gevo-hinweis{grid-column:1 / -1;margin:4px 0 10px;padding:12px 14px;background:var(--panel);
  border-left:3px solid var(--pistachio);border-radius:0 8px 8px 0}
.gevo-hinweis__t{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.gevo-hinweis__b{font-size:13px;line-height:1.55;color:var(--ink)}
.gevo-hinweis__b p{margin:0 0 8px}
.gevo-hinweis__b p:last-child{margin-bottom:0}
.gevo-hinweis__b ul,.gevo-hinweis__b ol{margin:6px 0;padding-left:20px}
.gevo-hinweis__b li{margin-bottom:3px}
.gevo-hinweis__b h3,.gevo-hinweis__b h4{margin:8px 0 4px;font-size:13.5px}
.gevo-hinweis__b a{color:var(--ink);text-decoration:underline}

/* Fehlerhinweis unter einer Pflichtangabe (03.09.2026) - z. B. eine IBAN, deren Prüfziffer nicht
   stimmt. Bewusst unter dem Feld und nicht als Popup: Man soll den Wert dabei sehen können. */
.eingabe-fehler{margin:4px 0 0;font-size:12px;font-weight:600;color:var(--error,#9a2b25)}

/* Kachel Betriebszugehörigkeit (04.09.2026): sechs Ansichten übereinander, eine sichtbar.
   Das [hidden] steht explizit hier, damit eine spätere display-Regel auf .donut-card die
   verborgenen Ansichten nicht doch wieder einblendet. */
.tenure-view[hidden]{display:none}
.tenure-tile{max-width:100%}
.tenure-tile .tenure-pick{padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;
  max-width:100%}
/* Der Donut hat eine feste Pixelbreite - in einer schmalen Kachel muss die Kachel selbst
   scrollen duerfen statt die Seite zu verbreitern (Nutzer-Meldung 04.09.2026, mobile Ansicht). */
.tenure-view{max-width:100%;overflow-x:auto}

/* ── STANDORT: MITARBEITER UMZIEHEN (11.09.2026) ───────────────────────────────────────────────
   Auswahl links, Ziel rechts - die Leiste steht ueber der Liste, auf die sie wirkt, damit der
   Geltungsbereich sichtbar ist statt geraten werden zu muessen. */
.standort-umzug{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--panel)}
.standort-umzug__alle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;cursor:pointer}
.standort-umzug__n{font-size:12px}
.standort-umzug__ziel{padding:4px 8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:12.5px;max-width:220px}
.standort-umzug__los[disabled]{opacity:.5;cursor:default}