/* 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{
  --ink:#1D1D1B; --ink-soft:#3A3A37; --muted:#6E6E68;
  --pistachio:#D3D800; --pistachio-deep:#A9AE00; --pistachio-pale:#EFF2A8;
  --paper:#FFFFFF; --panel:#F7F6F7; --line:#CFCFC3;
  --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}
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}
.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}
.sidebar--sub{width:210px;flex:0 0 210px}
.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{font-size:15px;width:20px;text-align:center;flex:0 0 auto}
.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:underline}
.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}}

.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}
.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)}
.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). */
.dash-topbar{display:flex;align-items:center;justify-content:flex-end;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}

/* 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: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}
.dash-clock{font-size:13px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.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}
.period-kpi__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.period-kpi__row{display:flex;justify-content:space-between;gap:4px;font-size:10.5px;line-height:1.5}
.period-kpi__l{color:var(--muted)}
.period-kpi__v{font-weight:600;color:var(--ink);font-size:10.5px}
.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}}
.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}
.anniv-row{background:var(--pistachio-pale);border-radius:6px;padding:6px 8px;font-size:11.5px}
.anniv-row__name{font-weight:600;color:var(--ink)}
.anniv-row__detail{color:var(--ink-soft);font-size:11px;margin-top:1px}

.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}
.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-overview-btn{align-self:flex-start;background:#5B4FE0;color:#fff;font-size:12.5px;font-weight:600;
  padding:7px 14px;border-radius:7px;text-decoration:none}
.pd-overview-btn:hover{opacity:.9}
.pd-age{font-size:22px;font-weight:600;color:var(--ink);flex:0 0 auto;align-self:flex-start}
.pd-donuts{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.pd-mini{display:flex;align-items:center;gap:10px}
.pd-mini__ring{width:52px;height:52px;border-radius:50%;flex:0 0 auto;position:relative}
.pd-mini__ring--empty{background:var(--line)}
.pd-mini__hole{position:absolute;inset:16%;background:var(--paper);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.pd-mini__n{font-size:11px;font-weight:700;color:var(--ink)}
.pd-mini__t{font-size:12px;font-weight:700;color:var(--ink-soft);margin:0 0 2px}
.pd-mini__row{font-size:11.5px;color:var(--ink-soft);margin:0}
.pd-mini__row.muted{color:var(--muted)}
.pd-mini--muted .pd-mini__t{color:var(--muted)}
.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. (eVorsorge)" 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}
.pd-status-dot{position:absolute;top:20px;right:20px;width:10px;height:10px;border-radius:50%}
.pd-status-label{position:absolute;top:34px;right:20px;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}

/* 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)}

/* 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:underline}
.data-table__dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}

/* 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}

/* 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:underline}
.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}
.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:underline}

/* 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:underline}

.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}
.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)}

/* 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. */
.sync-log{max-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}

/* Gruppierte Datenkarten (Format::renderEntity) */
.card__t{font-size:14px;font-weight:600;margin:0 0 12px}
.rf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 24px}
.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)}

label{display:block;font-size:12.5px;font-weight:600;margin:0 0 4px;color:var(--ink-soft)}
.field{margin-bottom:14px}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=number],
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)}

.btn-primary{width:100%;font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1.5px solid var(--ink);
  background:var(--pistachio);color:var(--ink);padding:10px 16px;border-radius:999px}
.btn-primary:hover{background:var(--pistachio-deep)}

.btn-secondary{font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);padding:7px 14px;border-radius:999px}
.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}

/* 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}
.modal > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.modal__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.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)}
.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)}

.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}

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

/* 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}