/* Betreuungsplattform · KSCD Kanzleizentrum — app styling (M1/M2).
   Design system: "Eucalyptus" — Archivo display + IBM Plex Sans/Mono, porcelain canvas,
   ink-900 sidebar, one calm accent. Class names are stable across all views. */
:root{
  /* Ink / neutrals */
  --ink:#14202B; --ink-900:#0E1A22; --ink-soft:#2C4150; --muted:#5A6E7A; --muted-2:#556579;
  --line:#DCE4E2; --line-2:#E9EFED;
  --canvas:#F1F4F3; --paper:#fff; --paper-2:#F7FAF9;

  /* Primary — Eucalyptus */
  --petrol:#2F6B5E; --petrol-d:#22544A; --petrol-l:#3D8474;
  --euc-100:#DEEAE6; --euc-50:#EFF5F2;

  /* Signals */
  --amber:#7C470A; --amber-bg:#FAEAD3; --red:#A81E48; --red-bg:#FADDE5;
  --green:#2F6B5E; --green-bg:#DEEAE6; --blue:#2B5DA8; --blue-bg:#DCE6F6;
  /* Aliase, damit views mit diesen Namen auf Markenfarben zurueckfallen (statt off-brand Hardcodes) */
  --danger:var(--red); --crit:var(--red); --teal-mid:var(--petrol); --hover:var(--euc-50); --tint:var(--euc-50);

  /* Sidebar (ink) */
  --side:#0E1A22; --side-2:rgba(255,255,255,.06); --side-line:rgba(255,255,255,.08); --side-text:#8195A0;

  --radius:16px; --radius-s:10px;
  --shadow-s:0 1px 2px rgba(14,26,34,.06),0 1px 3px rgba(14,26,34,.04);
  --shadow-m:0 2px 4px rgba(14,26,34,.05),0 10px 26px -8px rgba(14,26,34,.12);
  --shadow-l:0 12px 24px -8px rgba(14,26,34,.14),0 30px 60px -30px rgba(14,26,34,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"IBM Plex Sans",-apple-system,system-ui,sans-serif;
  --display:"Archivo",var(--font); --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
/* `hidden` muss staerker sein als jede Klasse. Das display:none des Browsers steht
   in seinem Standardblatt und verliert deshalb gegen jedes .klasse{display:flex} —
   ein <div class="callout" hidden> waere sichtbar. Genau so ein Element gibt es
   (die Vollzugriff-Warnung unter der Rollenauswahl), und der Fehler faellt erst im
   Betrieb auf: die Warnung stuende dann immer da und wuerde damit bedeutungslos. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

input,select,textarea{font-family:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
::selection{background:var(--petrol);color:#fff}
:focus-visible{outline:2px solid var(--petrol-l);outline-offset:2px;border-radius:5px}
/* Skip-to-content link — visually hidden until keyboard-focused. */
.skip-link{position:fixed;top:-60px;left:12px;z-index:4000;background:var(--petrol);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;box-shadow:var(--shadow-l);transition:top .15s var(--ease)}
.skip-link:focus{top:12px}

/* ---------- auth splash (ChooseTenant / Forgot / Reset / Denied) ---------- */
.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(120% 80% at 15% 0%,rgba(61,132,116,.22),transparent 60%),
    linear-gradient(160deg,#0E1A22,#14202B 60%,#0C161D);}
.login-card{width:min(430px,100%);background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:36px 34px;box-shadow:var(--shadow-l);color:var(--ink)}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.diamond{width:32px;height:32px;flex:none;border-radius:9px;
  background:var(--petrol);display:flex;align-items:center;justify-content:center;position:relative}
.diamond svg{width:18px;height:18px;color:#fff}
.login-brand b{font-family:var(--display);font-size:19px;letter-spacing:-.01em;color:var(--ink-900)}
.login-brand span{display:block;font-size:10px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:2px}
.login-card h1{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink-900)}
.login-card .lead{color:var(--muted);font-size:14px;margin:0 0 22px;line-height:1.6}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input:not([type=checkbox]):not([type=radio]){width:100%;padding:11px 13px;border-radius:var(--radius-s);background:var(--paper);
  border:1px solid var(--line);color:var(--ink);font-size:14.5px;outline:none;transition:.15s}
.field input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--petrol-l);box-shadow:0 0 0 3px var(--euc-100)}
.btn-login{width:100%;margin-top:10px;padding:12px;border-radius:var(--radius-s);font-weight:600;font-size:14.5px;
  background:var(--petrol);color:#fff;box-shadow:var(--shadow-s);transition:.15s}
.btn-login:hover{background:var(--petrol-d)}
.btn-login:active{transform:translateY(1px)}
.login-alert{border-radius:var(--radius-s);padding:11px 13px;font-size:13px;margin-bottom:14px;line-height:1.5}
.login-alert.err{background:var(--red-bg);border:1px solid #f2c3d0;color:var(--red)}
.login-alert.info{background:var(--blue-bg);border:1px solid #c6d6ef;color:var(--blue)}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 2px;font-size:13px;
  flex-wrap:wrap;gap:10px 16px}
.login-row .remember{display:flex;align-items:center;gap:8px;color:var(--ink-soft);cursor:pointer;user-select:none}
.login-row .forgot{color:var(--petrol);font-weight:500;white-space:nowrap}
.login-row .forgot:hover{text-decoration:underline}
/* Auf 390 Punkten stehen „Angemeldet bleiben (14 Tage)" und „Passwort vergessen?"
   nicht mehr nebeneinander. Ohne diese Regel brach die Beschriftung mitten im Wort
   um und „(14 Tage)" landete allein in einer eigenen Spalte — drei Fetzen in einer
   Zeile, von denen keiner mehr las wie ein Satz. Also: untereinander, jeder Teil
   ganz, und das Ankreuzfeld behaelt seine Fingergroesse. */
@media(max-width:520px){
  .login-row{flex-direction:column;align-items:flex-start;gap:12px;margin:6px 0 4px}
  .login-row .remember{min-height:34px}
}
.login-foot{margin-top:18px;display:flex;justify-content:center;font-size:12px;color:var(--muted)}
.demo-pill{background:var(--amber-bg);color:var(--amber);border:1px solid #f0dcae;
  padding:5px 10px;border-radius:999px;font-size:11px;font-weight:600}
.login-secure-note{display:flex;align-items:center;gap:7px;justify-content:center;font-size:12px;color:var(--muted)}
.login-secure-note svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh;min-height:100dvh}
.sidebar{flex:0 0 258px;width:258px;position:sticky;top:0;height:100vh;height:100dvh;background:var(--side);
  color:var(--side-text);display:flex;flex-direction:column;z-index:60;
  /* `overflow:hidden`, damit die Beschriftungen beim Einklappen ABGESCHNITTEN werden statt
     umzubrechen. Ohne das wird aus „Qualitätsmanagement" waehrend der Animation ein
     dreizeiliger Klumpen, und die Leiste zappelt in der Hoehe. */
  overflow:hidden;
  transition:flex-basis .26s var(--ease),width .26s var(--ease)}
.nav-lab{white-space:nowrap;overflow:hidden;transition:opacity .16s var(--ease)}
.side-head{padding:18px 18px 15px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--side-line);
  color:inherit;text-decoration:none;transition:background .13s var(--ease)}
a.side-head:hover{background:var(--side-2)}
.side-head .diamond{width:30px;height:30px}
.side-head b{font-family:var(--display);color:#fff;font-size:16px;letter-spacing:-.01em;line-height:1}
.side-head small{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:#8395a0;margin-top:3px} /* Kontrast ≥ 4.5:1 auf der dunklen Leiste (WCAG AA) */
.nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 11px 20px;
  /* Sichtbarer, schlanker Scrollbalken als klarer Hinweis „hier kann man scrollen". */
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.40) rgba(255,255,255,.07);
  /* Scroll-Schatten: heller Schein oben/unten = es geht weiter; er verschwindet automatisch am
     jeweiligen Ende. Deckflächen in Seitenleisten-Farbe (local) verdecken den Schein am Rand,
     der Schein selbst (scroll) sitzt an der Kante — nur sichtbar, wenn Inhalt darüber/darunter liegt. */
  background:
    linear-gradient(var(--side) 30%, rgba(0,0,0,0)) top /100% 24px no-repeat,
    linear-gradient(rgba(0,0,0,0), var(--side) 70%) bottom /100% 28px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(255,255,255,.16), rgba(255,255,255,0)) top /100% 12px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(255,255,255,.16), rgba(255,255,255,0)) bottom /100% 14px no-repeat;
  background-attachment:local, local, scroll, scroll}
.nav::-webkit-scrollbar{width:10px}
.nav::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:8px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.38);border-radius:8px;border:2px solid transparent;background-clip:content-box}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.55);background-clip:content-box}
.nav-group{font-family:var(--display);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:#5a6b74;padding:16px 9px 7px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--radius-s);font-size:13.5px;font-weight:500;
  color:var(--side-text);position:relative;width:100%;text-align:left;margin-bottom:1px;
  /* Der Innenabstand animiert mit der Leiste: eingeklappt schiebt er das Symbol in die
     Mitte der 54 Punkte breiten Symbolspalte. Deshalb nicht mehr `transition:.13s` fuer
     alles — Farbe und Hintergrund sollen weiter schnell schalten, der Abstand langsam
     wie die Leiste. */
  transition:background .13s var(--ease),color .13s var(--ease),padding .26s var(--ease)}
.nav-item svg{width:17px;height:17px;flex:none;opacity:.85}
.nav-item:hover{background:var(--side-2);color:#fff}
.nav-item.active{background:rgba(255,255,255,.10);color:#fff}
.nav-item.active svg{opacity:1;color:var(--petrol-l)}
.nav-item.active::before{content:"";position:absolute;left:-11px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--petrol-l)}
.nav-item.disabled{opacity:.4;cursor:not-allowed}
.nav-item.disabled:hover{background:none;color:var(--side-text)}
.nav-badge{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;background:var(--petrol-l);color:#fff;padding:1px 7px;border-radius:999px}
.nav-badge.soon{background:rgba(255,255,255,.10);color:#8fa6ad}
.nav-badge.live{background:var(--petrol-l);color:#fff}

/* Baum-Navigation: aufklappbare Gruppen. Der Gruppenkopf ist jetzt ein Knopf (Reset der
   Standard-Schaltflächenoptik); er behält Schriftbild/Abstand aus der .nav-group-Regel oben. */
.nav-group{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;cursor:pointer;text-align:left}
.nav-group .nav-lab{flex:1 1 auto;text-align:left}
.nav-group:hover{color:#8fa6ad}
.nav-grp-chev{width:13px;height:13px;flex:none;opacity:.55;transition:transform .2s var(--ease)}
.nav-grp.collapsed .nav-grp-chev{transform:rotate(-90deg)}
.nav-grp.collapsed .nav-grp-items{display:none}
/* Live-Zähler: Posteingang neutral (Info), überfällige Fristen als Warnung (Aufmerksamkeit).
   Dunkle Flächen, damit weißer 10px-Text ≥ 4,5:1 erreicht (WCAG AA). */
.nav-badge.count{background:#2E6E5F;color:#fff;min-width:18px;text-align:center}
.nav-badge.count[data-nav-count="fristen"]{background:#C0392B}

/* Baumzweig (z. B. Verwaltung → Unterpunkte): Elternzeile = Link + Chevron-Knopf;
   darunter eingerückte Kinder mit einer Führungslinie (Baumdiagramm). */
.nav-parent-row{display:flex;align-items:center;gap:2px}
.nav-parent-row .nav-parent{flex:1 1 auto;margin-bottom:0}
.nav-sub-toggle{border:0;background:none;cursor:pointer;color:var(--side-text);flex:none;
  display:flex;align-items:center;justify-content:center;width:30px;height:34px;border-radius:var(--radius-s);
  transition:background .13s var(--ease),color .13s var(--ease)}
.nav-sub-toggle:hover{background:var(--side-2);color:#fff}
.nav-sub-toggle .nav-grp-chev{width:13px;height:13px;opacity:.6;transition:transform .2s var(--ease)}
.nav-tree.collapsed .nav-sub-toggle .nav-grp-chev{transform:rotate(-90deg)}
.nav-tree.collapsed .nav-sub{display:none}
.nav-sub{position:relative;margin:1px 0 4px}
/* Die senkrechte Linie des Baums läuft unter der Mitte des Eltern-Symbols (10px Innenabstand
   + ~8,5px halbes Symbol). Die Punkte der Kinder sitzen auf der Linie. */
.nav-sub::before{content:"";position:absolute;left:18px;top:0;bottom:7px;width:1px;background:rgba(255,255,255,.12)}
.nav-sub-item{padding:6px 10px 6px 30px;font-size:12.9px;font-weight:500;gap:9px}
.nav-sub-item .nav-sub-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;flex:none;
  margin-left:2px;box-shadow:0 0 0 3px var(--side)}
.nav-sub-item:hover .nav-sub-dot{opacity:.7}
.nav-sub-item.active .nav-sub-dot{opacity:1;background:var(--petrol-l)}
.nav-sub-item.active::before{display:none}
.side-foot{padding:12px;border-top:1px solid var(--side-line);display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:9px;flex:none;background:var(--petrol);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:12.5px;font-family:var(--display)}
.side-foot .nm{font-size:12.8px;color:#eef3f2;font-weight:600;line-height:1.2}
.side-foot .rl{font-size:10.5px;color:#8395a0}
.side-foot form{margin-left:auto}
.logout-btn{color:#8395a0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:.13s}
.logout-btn:hover{color:#fff;background:var(--side-2)}

.main{flex:1 1 0%;min-width:0;display:flex;flex-direction:column}
/* Die Milchglasscheibe liegt auf einem eigenen Pseudo-Element und NICHT auf der
   Kopfzeile selbst. Der Grund ist keine Geschmacksfrage, sondern eine Regel des
   Browsers: ein Element mit `filter` oder `backdrop-filter` wird zum Bezugsrahmen
   fuer JEDES `position:fixed` darunter (CSS Filter Effects, "containing block").

   Die Kopfzeile enthaelt drei solche Elemente:
     - das Blatt der Aufklappmenues (Glocke, Zeilenmenues) -> app.js/„Aufklappmenues"
     - das Suchblatt auf dem Telefon (body.suche-offen .cp-suche)
     - dessen Trefferliste (.cs-liste)
   Alle drei rechneten ihre Koordinaten gegen den Bildschirm, gesetzt wurden sie
   aber gegen den Innenrand der Kopfzeile (60 Punkte hoch, 26 Punkte Rand). Auf
   dem Schreibtisch schob das die Benachrichtigungen um die halbe Seitenleiste
   nach rechts aus dem Bild; auf dem Telefon klebte das Blatt der Glocke IN der
   Kopfzeile statt am unteren Bildrand, und das Suchblatt sass um den Rand
   versetzt.

   Als Pseudo-Element bleibt die Optik erhalten, der Bezugsrahmen aber der
   Bildschirm. Der eigene Stapelkontext der Kopfzeile bleibt davon unberuehrt —
   den erzeugt weiterhin z-index:50 (siehe Anmerkung bei body.suche-offen). */
.topbar{position:sticky;top:0;z-index:50;background:transparent;
  border-bottom:1px solid var(--line);padding:11px 26px;display:flex;align-items:center;gap:16px;min-height:60px}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.menu-btn{display:none;width:38px;height:38px;border-radius:10px;background:var(--paper);border:1px solid var(--line);align-items:center;justify-content:center}
/* Die Einklapp-Zeile am Fuss der Bereichsleiste. Sie sieht aus wie ein Navigationseintrag
   und verhaelt sich auch so — der Knopf gehoert sichtbar zu dem, was er veraendert. Ein
   Trennstrich setzt ihn vom Verzeichnis darueber ab; er ist eine Einstellung, kein Bereich.

   Der Innenabstand links ist DERSELBE wie der eines Navigationseintrags (11 Punkte der
   Navigation + 10 des Eintrags = 21), damit der Doppelpfeil senkrecht unter den Symbolen
   der Bereiche steht statt daneben. Eingeklappt wandert er auf 29 — dieselbe Mitte wie
   dort. Deshalb animiert der Innenabstand mit. */
.side-schmal{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 21px;border:0;border-top:1px solid var(--side-line);
  background:none;color:var(--side-text);
  font-family:var(--font);font-size:12.5px;font-weight:600;
  cursor:pointer;text-align:left;flex:none;
  transition:background .13s var(--ease),color .13s var(--ease),padding .26s var(--ease)}
.side-schmal svg{width:17px;height:17px;flex:none;opacity:.85;transition:transform .26s var(--ease)}
.side-schmal:hover{background:var(--side-2);color:#fff}
.side-schmal:hover svg{opacity:1}
/* Eingeklappt dreht sich der Doppelpfeil um: er zeigt immer dorthin, wohin sich die
   Leiste als Naechstes bewegt — er sagt, was passiert, nicht was gerade ist. */
html.nav-schmal .side-schmal svg{transform:scaleX(-1)}
.crumb small{font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
/* Die Seitenueberschrift im Kopfbalken. <h1> und <b> sehen absichtlich gleich aus:
   die Auszeichnung ist fuer Screenreader gedacht, nicht fuer das Auge. margin:0,
   weil ein h1 anders als ein b einen Standardabstand mitbringt. */
.crumb b,.crumb h1{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;display:block;margin:0;line-height:1.25}
.topbar-ctx{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Alle Bedienelemente der Kopfzeile (Hilfe, Postfach, Glocke, Standort- und
   Mandantenwahl, Mandanten-Chip) auf EINE Hoehe bringen. Zuvor liefen sie mit
   32/34px bzw. rein ueber Innenabstand leicht unterschiedlich hoch — das
   Standort-Dropdown wirkte groesser als die Icon-Knoepfe. border-box zaehlt den
   Rahmen mit, sodass die sichtbare Aussenhoehe ueberall identisch ist. */
.topbar-ctx .cp-help-btn,
.topbar-ctx a.cp-mail,
.topbar-ctx .cp-bell>summary,
.topbar-ctx .loc,
.topbar-ctx .loc-switch{height:34px;box-sizing:border-box}
/* Die reinen Icon-Knoepfe zusaetzlich quadratisch. */
.topbar-ctx .cp-help-btn,
.topbar-ctx a.cp-mail,
.topbar-ctx .cp-bell>summary{width:34px}
.loc{display:flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:7px 12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-s)}
.loc-switch{display:flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:5px 10px;box-shadow:var(--shadow-s);transition:.13s}
.loc-switch:hover{border-color:var(--muted-2)}
.loc-switch svg{width:15px;height:15px;color:var(--muted);flex:none}
.loc-switch select{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;
  color:var(--ink,inherit);cursor:pointer;outline:none;max-width:180px}
.loc .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.loc.support{background:var(--amber-bg);border-color:#f0dcae;color:var(--amber)}
.loc.support .dot{background:var(--amber)}
.support-bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;border-radius:var(--radius-s);
  padding:11px 15px;font-size:13.5px;font-weight:500;background:var(--amber-bg);color:var(--amber);border:1px solid #f0dcae}
.support-bar b{font-weight:700}
.content{padding:26px 34px 60px;width:100%;max-width:none}
.content.narrow{max-width:1180px;margin:0 auto}
@media(min-width:2100px){.content{padding-left:48px;padding-right:48px}}

/* ---------- page bits ---------- */
.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.page-intro h2{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0}
.page-intro p{color:var(--muted);font-size:13.5px;margin:5px 0 0;max-width:640px;line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border-radius:var(--radius-s);font-weight:600;font-size:13.5px;transition:.15s var(--ease);white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--petrol);color:#fff;box-shadow:var(--shadow-s)}
.btn.primary:hover{background:var(--petrol-d)}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);box-shadow:var(--shadow-s)}
.btn.ghost:hover{border-color:var(--muted-2);background:var(--paper-2)}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
/* Destruktive Aktionen (Löschen, Entfernen, Trennen, Widerrufen, Stornieren): IMMER rot.
   Eigener (zunächst transparenter) Rahmen, damit die Klasse auch ZUSAMMEN mit .ghost sauber
   rot bleibt — die .ghost-Regel steht davor und setzte sonst einen grauen Rahmen. Weiche
   Fläche + kräftige rote Schrift/Icon: klar als Gefahr erkennbar, ohne bei jedem kleinen
   Papierkorb zu schreien. Der Rahmen tritt erst beim Überfahren hervor. */
.btn.danger{background:var(--red-bg);color:var(--red);border:1px solid transparent;box-shadow:var(--shadow-s)}
.btn.danger:hover{background:#f6cdd8;border-color:var(--red)}
.btn.danger:active{transform:translateY(1px)}
/* Endgültige, nicht umkehrbare Aktion (z. B. „endgültig löschen" im Papierkorb): voll
   gefülltes Rot für maximale Warnwirkung. Bewusst nur dort, nicht an jedem Listen-Papierkorb. */
.btn.danger.solid{background:var(--red);color:#fff;border-color:var(--red)}
.btn.danger.solid:hover{background:#8F1A3D;border-color:#8F1A3D}

.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s)}
.card.pad{padding:20px}
.kpi{padding:17px 18px;transition:.16s var(--ease)}
.kpi:hover{border-color:var(--muted-2);transform:translateY(-1px);box-shadow:var(--shadow-m)}
.kpi .k-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:600}
.kpi .k-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.kpi .k-ic svg{width:16px;height:16px}
.kpi .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:29px;font-weight:600;margin-top:10px;line-height:1;letter-spacing:-.02em;color:var(--ink-900)}
.kpi .sub{font-size:11.5px;margin-top:7px;color:var(--muted)}
.bg-petrol{background:var(--euc-100);color:var(--petrol)}
.bg-amber{background:var(--amber-bg);color:var(--amber)}
.bg-red{background:var(--red-bg);color:var(--red)}
.bg-blue{background:var(--blue-bg);color:var(--blue)}
.section-h{display:flex;align-items:center;gap:8px;margin:26px 0 13px}
/* Titel schiebt sich per auto-Rand nach links; die Aktions-Buttons (Bearbeiten/Löschen)
   rücken dadurch rechts DICHT zusammen, statt über die ganze Breite auseinandergezogen zu werden. */
.section-h h3{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 auto 0 0}

/* tables */
.table-card{overflow:hidden}
/* Eine Tabelle, die breiter ist als ihre Karte, wird in der Karte seitlich gewischt.
   Das stand bisher als `style="overflow-x:auto"` an den Karten der Fallakte. Ein
   Inline-Stil schlaegt jede Regel — auch die, die den Bildlauf auf dem Telefon wieder
   abschaltet, sobald die Tabelle dort zu Karten gestapelt wird. Als Klasse laesst er
   sich ueberschreiben (siehe `@media(max-width:720px)` weiter unten). */
.table-card.scroll-x{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.2px}
.tbl thead th{text-align:left;font-family:var(--display);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);padding:11px 16px;border-bottom:1px solid var(--line-2);font-weight:600;white-space:nowrap}
.tbl tbody td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:.12s}
.tbl tbody tr:hover{background:var(--paper-2)}
/* Zahlenspalten (Betraege, Anzahlen) rechtsbuendig und mit Tabellenziffern, damit Betraege
   fluchten. Gilt am Desktop; im Stapelmodus (< 760px) wird die Ausrichtung unten aufgehoben. */
.tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.name-cell{display:flex;align-items:center;gap:11px}
.mini-av{width:31px;height:31px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;color:var(--petrol);background:var(--euc-100)}
.name-cell .nm{font-weight:600;color:var(--ink-900)}.name-cell .az{font-size:11.5px;color:var(--muted-2);font-family:var(--mono)}
/* Dieselbe Paarung ohne .name-cell: die Kopfzelle einer stapelbaren Tabelle traegt Name und
   Zusatz (Abteilung, Aktenzeichen) als zwei Spans. Ohne eigene Regel waren beide inline —
   aus „Amtsgericht Musterstadt" + „Abt. 3" wurde „Amtsgericht MusterstadtAbt. 3", ohne
   Leerzeichen und ohne Unterschied. Der Zusatz steht darunter und leiser. */
.tbl .zeile-kopf .nm{display:block;font-weight:600;color:var(--ink-900)}
.tbl .zeile-kopf .az{display:block;margin-top:2px;font-size:11.5px;color:var(--muted-2);font-family:var(--mono);font-weight:400}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--green-bg);color:var(--petrol-d)}
.pill.warn{background:var(--amber-bg);color:var(--amber)}
.pill.crit{background:var(--red-bg);color:var(--red)}

/* --- Aufgaben-Ampel (Aenderungswunsch 27.08.) ---------------------------
   rot = sofort, gelb = diese Woche, gruen = planbar. Der Punkt allein waere
   eine Auskunft nur ueber Farbe; er traegt deshalb immer ein aria-label und
   einen Titel mit der Stufe im Klartext. */
.ampel{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;vertical-align:middle}
.ampel.crit{background:var(--red)}
.ampel.warn{background:var(--amber)}
.ampel.ok{background:var(--green)}
.pill.neutral{background:var(--line-2);color:var(--ink-soft)}
.pill.blue{background:var(--blue-bg);color:var(--blue)}
.code{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* forms */
.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
/* Alle Eingabefelder einer Zeile teilen sich die Breite zu gleichen Teilen. Vorher wuchs nur
   das Feld mit inline flex:1, der Rest blieb auf min-width stehen — nebeneinander stehende
   Felder waren dadurch unterschiedlich lang und die Maske wirkte schief. Der gemeinsame
   flex-basis 0 sorgt dafuer, dass wirklich gleich geteilt wird, unabhaengig vom Inhalt.
   Schaltflaechen in derselben Zeile behalten ihre natuerliche Breite, weil die Regel nur
   .form-field trifft. */
.form-row > .form-field{flex:1 1 0;min-width:200px}
.form-row > .form-field input:not([type=checkbox]):not([type=radio]),.form-row > .form-field select{width:100%;min-width:0}
/* Nicht jedes Feld ist gleich breit. Eine Hausnummer braucht nicht so viel Platz wie eine
   Strasse und eine Postleitzahl nicht so viel wie ein Ort — stehen sie gleich breit
   nebeneinander, sieht die Maske falsch aus, obwohl nichts fehlt. */
.form-row > .form-field.f-2{flex-grow:2}
.form-row > .form-field.f-3{flex-grow:3}
.form-row > .form-field.f-narrow{flex-grow:0;flex-basis:120px;min-width:96px}

/* Ein Formular laeuft nicht ueber die ganze Bildschirmbreite. Auf einem breiten Schirm
   standen Auswahlfeld und Vermerk sonst 1400 Pixel weit auseinander; das Auge muss den
   Weg von der Beschriftung zum Feld jedes Mal neu suchen. */
.disclosure > form,.disclosure > .disclosure-body > form{max-width:900px}
.form-field{display:flex;flex-direction:column;gap:5px}
.form-field label{font-size:12px;color:var(--muted);font-weight:500}
.form-field input:not([type=checkbox]):not([type=radio]),.form-field select{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);font-size:14px;min-width:200px;transition:.15s}
.form-field input:not([type=checkbox]):not([type=radio]):focus,.form-field select:focus{outline:none;border-color:var(--petrol-l);box-shadow:0 0 0 3px var(--euc-100)}

/* Kompakter Auswahl-Chip fuer Tabellenzeilen (z. B. Kategorie im Belege-Pool):
   eigener Chevron statt des rohen nativen Pfeils, passend zum uebrigen Formularbild. */
.cat-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  max-width:190px;width:100%;padding:7px 30px 7px 11px;font-size:13px;font-weight:500;
  color:var(--ink-900);border:1px solid var(--line);border-radius:999px;background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
  cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cat-select:hover{border-color:var(--petrol-l)}
.cat-select:focus{outline:none;border-color:var(--petrol-l);box-shadow:0 0 0 3px var(--euc-100)}
.cat-select.is-empty{color:var(--muted);font-style:italic}

/* Balkendiagramm „Ausgaben je Kategorie" (Belege-Auswertung) — reine CSS-Balken, kein JS.
   Eine Markenfarbe, jeder Balken direkt beschriftet: Identitaet nie ueber Farbe allein. */
.fin-bars{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.fin-bar-row{display:grid;grid-template-columns:minmax(120px,32%) 1fr auto;align-items:center;gap:12px}
.fin-bar-name{font-size:13px;font-weight:500;color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-bar-name .cnt{color:var(--muted);font-weight:400;font-size:11.5px}
.fin-bar-track{position:relative;height:16px;border-radius:999px;background:rgba(127,127,127,.14);overflow:hidden}
.fin-bar-fill{position:absolute;inset:0 auto 0 0;height:100%;min-width:6px;border-radius:999px;
  background:var(--petrol);transition:width .3s ease}
.fin-bar-val{font-size:13px;font-weight:600;color:var(--ink-900);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fin-bar-val .pct{display:block;font-size:11px;font-weight:400;color:var(--muted)}
@media (max-width:560px){
  .fin-bar-row{grid-template-columns:1fr auto;grid-template-areas:"name val" "track track";row-gap:4px}
  .fin-bar-name{grid-area:name}.fin-bar-val{grid-area:val}.fin-bar-track{grid-area:track}
}

/* Belege-Navigator (Alle Monate / Monatswechsel / Export) — auch mobil kompakt */
.fin-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fin-nav-month{display:inline-flex;align-items:center;gap:6px}
.fin-nav-month .pill{min-width:112px;justify-content:center;padding:5px 10px}
.fin-nav-sep{width:1px;height:20px;background:var(--line);margin:0 2px}

/* (Belegliste nutzt jetzt den einheitlichen .pager — siehe unten.) */

/* matrix */
.matrix{width:100%;border-collapse:collapse;font-size:13px}
.matrix th{padding:12px;text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.matrix th:first-child,.matrix td:first-child{text-align:left}
.matrix td{padding:11px 12px;border-bottom:1px solid var(--line-2)}
.matrix td:first-child{font-weight:600}
.ck{color:var(--green)}.cr{color:var(--line)}.cp{color:var(--amber)}

/* alerts / notes */
/* Hinweiszeile: Symbol links, Text daneben. Bewusst float statt flex — als Flex-Container
   wurde JEDER Textknoten zu einer eigenen Spalte. Ein <b> mitten im Satz ("... erledigt
   <b>keine</b> Frist ...") zerlegte den Hinweis dadurch in schmale Stufen nebeneinander.
   Mit float bleibt der Text ein gewoehnlicher Absatz, egal was darin ausgezeichnet ist. */
.note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.55}
.note::after{content:"";display:block;clear:both}
.note svg{width:14px;height:14px;float:left;margin:2px 7px 0 0;color:var(--petrol)}
.flash{border-radius:var(--radius-s);padding:11px 14px;font-size:13.2px;font-weight:500;margin-bottom:18px;display:flex;gap:9px;align-items:center;line-height:1.5}
.flash svg{flex:none}
.flash.ok{background:var(--green-bg);color:var(--petrol-d);border:1px solid #cfe6de}
.flash.err{background:var(--red-bg);color:var(--red);border:1px solid #f2c3d0}
.flash.info{background:var(--blue-bg);color:var(--blue);border:1px solid #c6d6ef}
.flash.warn{background:var(--amber-bg);color:var(--amber);border:1px solid #f0dcae}

/* empty state */
.empty{padding:52px 30px;text-align:center;max-width:420px;margin:0 auto}
.empty .empty-ic{width:52px;height:52px;border-radius:15px;background:var(--euc-50);color:var(--petrol);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.empty .empty-ic svg{width:24px;height:24px}
.empty h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0 0 7px;color:var(--ink-900)}
.empty p{color:var(--muted);font-size:13px;margin:0 0 18px;line-height:1.6}
.empty .empty-acts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

/* quick-access tiles on the cockpit */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
.qa{display:flex;gap:13px;align-items:center;padding:15px;border-radius:14px;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-s);text-decoration:none;color:inherit;transition:transform .14s var(--ease),box-shadow .14s,border-color .14s}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);border-color:var(--petrol-l)}
.qa .qic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.qa .qic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.qa b{font-size:14px}.qa small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.qa.locked{opacity:.6;pointer-events:none;filter:grayscale(.4)}
.qa.locked .qic{background:#9aa1ad !important}
.soon-banner{display:flex;gap:12px;align-items:center;background:var(--paper-2);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:13px;margin-bottom:18px}

/* ---------- Cockpit / Dashboard ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:8px}
/* minmax(0,…): ohne die 0-Untergrenze wächst eine Spalte auf die Mindestbreite ihres Inhalts
   (lange Titel, nicht umbrechende Zellen) und schiebt das ganze Dashboard über den
   Bildschirmrand — auf dem Telefon führte genau das zum seitlichen Scrollen. */
.dash-cols{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:22px}
@media(max-width:960px){.dash-cols{grid-template-columns:minmax(0,1fr)}}
.dash-panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s);padding:16px 18px;margin-bottom:18px}
.dash-panel.ph{border-style:dashed;background:var(--paper-2);box-shadow:none}
/* Cockpit „Erste Schritte" (frischer Mandant, nur Admin) — dezente Petrol-Akzentkarte. */
.onboarding{margin-bottom:18px;border-left:3px solid var(--petrol)}
.onboarding-head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.onboarding-head h3{margin:0 0 3px;font-family:var(--display);font-size:16px}
.onboarding-head .muted{margin:0;font-size:13px;max-width:70ch}
.onboarding-list{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:7px;
  font-size:13.5px;line-height:1.5;color:var(--ink)}
.onboarding-list li{padding-left:2px}
@media(max-width:620px){.onboarding-head{flex-direction:column}.onboarding-head .btn{align-self:flex-start}}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dp-head h3{font-family:var(--display);font-size:14.5px;font-weight:600;margin:0;letter-spacing:-.01em}
.dp-head .dp-ic{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.dp-title{display:flex;align-items:center;gap:9px;min-width:0}
.inbox-item{display:flex;gap:11px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line)}
.inbox-item:last-child{border-bottom:none}
.inbox-item .ii-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none;margin-top:6px}
.inbox-item.unread .ii-dot{background:var(--petrol)}
.inbox-item .ii-body{flex:1;min-width:0}
.inbox-item .ii-title{font-size:13px;font-weight:600;color:var(--ink-900);line-height:1.35}
.inbox-item.unread .ii-title{color:var(--ink-900)}
.inbox-item .ii-sub{font-size:11.5px;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inbox-item .ii-time{font-size:11px;color:var(--muted-2);white-space:nowrap;flex:none}
.dash-empty{padding:18px 4px;color:var(--muted);font-size:12.5px;text-align:center}

/* Fallakte: schwebende Sprung-Navigation (Lesezeichen zu Abschnitten). */
.case-toc{position:fixed;top:96px;right:14px;z-index:40;width:194px;max-height:calc(100vh - 128px);
  overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-m);padding:10px 8px}
.case-toc-h{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-2);padding:4px 8px 6px}
/* Der Umschlag um die Sprungmarken verschwindet auf dem Schreibtisch aus dem
   Layout: display:contents erzeugt keinen Kasten, die Marken sind fuer die
   Gestaltung also weiterhin direkte Kinder der Leiste. Erst unter 1024 Punkten
   wird er zum eigenen, waagerecht scrollenden Kasten (s. u.). */
.case-toc-links{display:contents}
.case-toc a{position:relative;display:block;padding:6px 30px 6px 9px;border-radius:7px;font-size:12.5px;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-toc a:hover{background:var(--paper-2);color:var(--ink-900)}
/* Zähler-Abzeichen: zeigt, in welchem Abschnitt schon Einträge stehen. Rechts platziert, damit
   die (per Ellipsis gekürzte) Beschriftung es nicht verdeckt; es liegt im reservierten
   rechten Innenabstand. */
.toc-n{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  min-width:17px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;
  background:var(--euc-100);color:var(--petrol-d);font-family:var(--mono);font-size:10px;font-weight:600;
  line-height:16px;text-align:center;font-variant-numeric:tabular-nums}
.case-toc a:hover .toc-n{background:var(--paper)}
.case-toc a.active .toc-n{background:var(--petrol);color:#fff}
/* Nur auf Seiten mit Sprung-Nav (Fallakte) und nur auf breiten Screens rechts Platz
   reservieren, damit die fixe Navigation den Inhalt (inkl. Aktionen rechts) nicht überlappt. */
@media(min-width:1401px){.content:has(.case-toc){padding-right:226px}}
.ph-note{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.55}
.ph-note svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--muted-2)}

.chip-role{display:inline-flex;align-items:center;gap:8px;background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px;font-size:12.5px;font-weight:600;margin:0 6px 6px 0}
.chip-role form{display:inline}
.chip-role button{width:20px;height:20px;border-radius:50%;background:var(--red-bg);color:var(--red);font-weight:700;line-height:1}

/* =====================================================================
   Sicherheitsabfrage (<dialog class="cp-dlg">)
   ---------------------------------------------------------------------
   Loest window.confirm ab. Zwei Gruende, und beide sind keine Kosmetik:

   1. window.confirm zeigt NUR einen Satz. „Benutzer sperren?" beantwortet
      man in einer Sekunde; „Administrator zuweisen?" nicht — dort gehoert
      dazu, WAS die Rolle darf und dass man sie selbst nicht mehr entziehen
      kann. Ein Systemdialog kann das nicht zeigen.
   2. Auf dem Telefon steht der Systemdialog oben am Bildrand, seine Knoepfe
      sind winzig und „OK" steht links wie rechts gleich aussehend neben
      „Abbrechen". Eine gefaehrliche Bestaetigung soll rot sein und wie eine
      Entscheidung aussehen, nicht wie ein Hinweis.

   Fallback: fehlt <dialog> (sehr alte Browser), faellt app.js auf
   window.confirm zurueck — die Abfrage entfaellt also nie.
   ===================================================================== */
.cp-dlg{border:none;padding:0;background:transparent;max-width:min(460px,calc(100vw - 24px));width:100%}
.cp-dlg::backdrop{background:rgba(14,26,34,.52);backdrop-filter:blur(2px)}
.cp-dlg-box{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-l);padding:24px 24px 18px;color:var(--ink);text-align:left}
.cp-dlg-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--euc-100);color:var(--petrol);margin-bottom:14px}
.cp-dlg-ic svg{width:20px;height:20px}
.cp-dlg--gefahr .cp-dlg-ic{background:var(--red-bg);color:var(--red)}
.cp-dlg h2{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 8px;color:var(--ink-900)}
.cp-dlg p{margin:0 0 6px;font-size:13.5px;line-height:1.62;color:var(--ink-soft)}
.cp-dlg p:last-of-type{margin-bottom:0}
.cp-dlg-akt{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.cp-dlg-akt button{min-height:42px;padding:0 18px;border-radius:10px;font-family:inherit;
  font-size:13.5px;font-weight:600;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft)}
.cp-dlg-akt button:hover{background:var(--paper-2);border-color:var(--muted-2)}
.cp-dlg-akt .cp-dlg-ja{background:var(--petrol);border-color:var(--petrol);color:#fff}
.cp-dlg-akt .cp-dlg-ja:hover{background:var(--petrol-d);border-color:var(--petrol-d)}
.cp-dlg--gefahr .cp-dlg-akt .cp-dlg-ja{background:var(--red);border-color:var(--red)}
.cp-dlg--gefahr .cp-dlg-akt .cp-dlg-ja:hover{filter:brightness(.92)}
@media(max-width:520px){
  /* Untereinander und in Fingergroesse. Nebeneinander sind zwei Knoepfe auf
     320 Punkten je 130 breit — daneben zu treffen ist dort die Regel, und
     „daneben" heisst bei einer Sicherheitsabfrage: falsch entschieden.

     column-reverse dreht die Reihenfolge des Quelltextes um, und zwar mit
     Absicht: unten, unter dem Daumen, liegt ABBRECHEN. Der bequemste Platz
     gehoert hier dem harmlosen Ausgang — wer danebentippt, hat dann nichts
     geloescht. Die Tabulatorfolge bleibt davon unberuehrt und beginnt
     weiterhin bei Abbrechen. */
  .cp-dlg-box{padding:20px 18px 16px;border-radius:16px}
  .cp-dlg-akt{flex-direction:column-reverse;gap:8px}
  .cp-dlg-akt button{width:100%;min-height:46px}
}
@media(prefers-reduced-motion:no-preference){
  .cp-dlg[open]{animation:cp-dlg-auf .16s var(--ease)}
  @keyframes cp-dlg-auf{from{transform:translateY(10px) scale(.985);opacity:0}to{transform:none;opacity:1}}
}

/* toast */
/* Review 15.10.2026: Vorher nur um 140 % der EIGENEN Höhe nach unten verschoben — bei 22 px
   Randabstand blieb vom leeren Toast ein dunkler Streifen unten mittig auf jeder Seite stehen.
   Jetzt ganz aus dem Bild und unsichtbar, solange keine Meldung läuft. */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(calc(100% + 40px));z-index:300;background:var(--ink-900);color:#fff;padding:13px 20px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-l);
  visibility:hidden;opacity:0;pointer-events:none;transition:transform .4s var(--ease),opacity .2s,visibility 0s linear .4s}
#toast.show{transform:translateX(-50%) translateY(0);visibility:visible;opacity:1;pointer-events:auto;transition:transform .4s var(--ease),opacity .2s}

/* =====================================================================
   Bereichsleiste einklappen (ab 861 Punkten — darunter ist sie eine Schublade)
   ---------------------------------------------------------------------
   258 Punkte sind auf einem 1600er Schirm ein Sechstel und auf dem iPad im
   Hochformat (820) fast ein Drittel. Genau dort entscheidet sich, ob eine
   Tabelle noch nebeneinander passt. Eingeklappt bleiben 76 Punkte: eine
   Symbolspalte, in der jeder Bereich weiter mit EINEM Klick erreichbar ist —
   im Unterschied zur Schublade des Telefons, die erst geoeffnet werden muss.

   Der Zustand liegt in localStorage und wird im <head> gesetzt, bevor
   gezeichnet wird (siehe _Layout) — sonst blitzt bei jedem Seitenwechsel
   kurz die breite Leiste auf.

   ALLES hier steht bewusst in der Abfrage `min-width:861px`. Unter 861 ist
   die Leiste eine ueberlagernde Schublade; waere sie dort zusaetzlich
   „schmal", oeffnete der Hamburger eine 76 Punkte breite Spalte ohne
   Beschriftungen — unbenutzbar, und der Nutzer haette es nie eingestellt.
   ===================================================================== */
@media(min-width:861px){
  html.nav-schmal .sidebar{flex-basis:76px;width:76px}
  /* Die Beschriftungen bleiben im Fluss und werden vom `overflow:hidden` der
     Leiste abgeschnitten, waehrend sie ausblenden. Sie zu entfernen (display:none)
     liesse die Symbole ruckartig springen statt mitzuwandern. */
  html.nav-schmal .nav-lab{opacity:0}
  /* 54 Punkte Symbolspalte (76 minus 2x11 Innenabstand der Navigation), Symbol 17
     Punkte breit -> 18 Punkte links ist die Mitte. */
  html.nav-schmal .nav-item{padding-left:18px;padding-right:0}
  html.nav-schmal .nav-badge{opacity:0}
  html.nav-schmal .side-schmal{padding-left:29px;padding-right:0}
  /* Die Gruppenueberschrift wird zum Trennstrich: die Gliederung bleibt sichtbar,
     ohne dass „ABRECHNUNG & FINANZEN" auf 54 Punkten zu Buchstabensalat wird. */
  html.nav-schmal .nav-group{
    height:1px;padding:0;margin:15px 9px 11px;overflow:hidden;cursor:default;pointer-events:none;
    color:transparent;background:var(--side-line)}
  /* In der schmalen Leiste ist Aufklappen bedeutungslos (keine Beschriftungen) — alle
     Gruppen offen zeigen und das Chevron ausblenden. */
  html.nav-schmal .nav-grp-chev{display:none}
  html.nav-schmal .nav-grp.collapsed .nav-grp-items{display:block}
  /* Baumzweig schmal: nur das Eltern-Symbol (Link in den Bereich); Unterpunkte und
     Chevron haben keinen Platz. */
  html.nav-schmal .nav-sub,
  html.nav-schmal .nav-sub-toggle{display:none}
  html.nav-schmal .side-head{justify-content:center;padding-left:0;padding-right:0;gap:0}
  html.nav-schmal .side-head-txt{display:none}
  /* Namenszug und Abmelden untereinander statt nebeneinander — nebeneinander
     gehen sich 34 Punkte Bild plus 32 Punkte Knopf auf 76 nicht aus. */
  html.nav-schmal .side-foot{flex-direction:column;gap:8px;padding:10px 6px}
  html.nav-schmal .side-foot .usr{justify-content:center}
  html.nav-schmal .side-foot .usr-txt{display:none}
  html.nav-schmal .side-foot form{margin-left:0}
}
/* Wer Bewegung abbestellt hat, bekommt den Zustandswechsel ohne Animation — der
   Zustand selbst bleibt. */
@media(prefers-reduced-motion:reduce){
  .sidebar,.nav-item,.nav-lab{transition:none}
}

@media(max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  /* Unter 861 Punkten ist die Leiste eine Schublade — dort gibt es nichts einzuklappen. */
  .side-schmal{display:none}
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100vh;height:100dvh;width:280px;max-width:82vw;transform:translateX(-100%);transition:transform .28s var(--ease);box-shadow:var(--shadow-l)}
  .sidebar.open{transform:none}
  .menu-btn{display:flex}
  .scrim{position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;background:rgba(14,26,34,.5);z-index:55;display:none}
  .scrim.show{display:block}
  /* lock the page behind the open drawer so iOS Safari doesn't scroll the content through */
  body.nav-open{overflow:hidden;position:relative}
  .g4,.g3,.g2{grid-template-columns:1fr}
  .content{padding:18px}.topbar{padding:11px 16px}.loc{display:none}.loc-switch select{max-width:120px}
  /* iOS Safari zooms in when a focused field is < 16px — force 16px on touch layouts.
     Seit 22.10.2026 auch die Editor-Felder (contenteditable: E-Mail-Text, Signatur, Brief) —
     dort zoomte iOS beim Antippen weiterhin. Zoomen per Geste bleibt erlaubt (Barrierefreiheit). */
  input,textarea,select,[contenteditable="true"],[contenteditable=""]{font-size:16px!important}
  /* Never let a page scroll sideways: wide tables/forms scroll inside their own card. */
  .card,.table-card{overflow-x:auto}
  .form-field input,.form-field select{min-width:0}
  .form-row{flex-wrap:wrap}
  .form-row > .form-field{flex:1 1 100%;min-width:0}
  /* Keep the header on one line: truncate the title instead of pushing the controls off-screen. */
  .crumb{min-width:0;overflow:hidden}
  .crumb b,.crumb h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar{gap:10px}.topbar-ctx{gap:7px}
}
@media(max-width:760px){.table-card{overflow-x:auto}.tbl,.matrix{min-width:620px}.page-intro .btn{width:100%}
  /* Die Regel darüber ist für die EINE Hauptaktion einer Seite gedacht („Fall anlegen"),
     die auf dem Handy die volle Breite bekommt. In einer Schalterleiste mit mehreren
     Knöpfen — Posteingang, Gesendet, Archiv — war sie falsch: die Leiste ist inline-flex,
     jeder Knopf zog auf 100 %, und weil nichts umbrach, lief die Seite seitlich aus dem
     Bild. Hier teilen sie sich die Zeilen und brechen um. */
  .page-intro .row-actions{width:100%;justify-content:flex-start}
  .page-intro .row-actions > .btn{width:auto;flex:1 1 auto}}

/* Belege-Navigator auf dem Handy: „Alle Monate" + Export teilen sich Zeile 1, der
   Monatswechsel ‹ Monat › steht als volle Zeile darunter (statt jeder Knopf 100 % breit). */
@media(max-width:760px){
  /* Kompakt statt auseinandergezogen: „Alle Monate" und der Monatswechsel stehen
     zusammen in Zeile 1 (inhaltsbreit, links), der Export rutscht rechts daneben
     bzw. in die nächste Zeile. Die Pfeile hängen direkt am Monat, nicht an den
     Rändern — vorher zog justify-content:space-between sie weit auseinander. */
  .fin-nav{width:100%;gap:8px 10px}
  .fin-nav .btn{width:auto}
  .fin-nav > .btn{flex:0 0 auto}
  .fin-nav-export{margin-left:auto}
  .fin-nav-export .btn{width:auto}
  .fin-nav-month{flex:0 0 auto;justify-content:flex-start;gap:6px}
  .fin-nav-month .btn{flex:0 0 auto;min-width:44px}
  .fin-nav-month .pill{flex:0 1 auto;min-width:104px}
  .fin-nav-sep{display:none}
}

/* ---- admin layout helpers (Benutzer-/Rollenverwaltung) ---- */
.kv{display:flex;flex-direction:column;gap:9px}
.kv>div{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.kv>div:last-child{border-bottom:0;padding-bottom:0}
.kv>div>span{color:var(--muted)}
.kv>div>b{font-weight:600;text-align:right}
/* Einzeilige Label/Wert-Zeile (span+b direkt), fuer die Fallakte-Karten. */
.kvrow{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px;border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:8px}
.kvrow>span{color:var(--muted);min-width:0}
.kvrow>b{font-weight:600;text-align:right}
/* In manchen Karten steht der Wert (+ Aktions-Buttons) in einem ZWEITEN <span> statt in einem
   direkten <b>. Dann darf der Wert nicht wie das Label ausgegraut sein: Wert dunkel + fett wie sonst. */
.kvrow>span>b{color:var(--ink-900);font-weight:600}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:18px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.perm-module{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.perm-module>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.perm-module>header h4{font-family:var(--display);font-size:12px;margin:0;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 16px}
.perm-item{display:flex;gap:9px;align-items:flex-start;padding:6px;border-radius:8px}
.perm-item:hover{background:var(--paper-2)}
.perm-item input{margin-top:2px}
.perm-item .pc{font-family:var(--mono);font-size:12px;color:var(--muted)}
.perm-item .pn{font-size:13px}

/* ---------- admin tabbed area (Verwaltung) ---------- */
/* Die Grundlinie liegt als Innenschatten auf der Leiste, nicht als Rahmen: die Leiste
   scrollt waagerecht (overflow-x), und ein per margin-bottom:-1px darüber geschobener
   Reiter-Unterstrich wurde vom Scrollrahmen beschnitten — die Aktiv-Markierung war deshalb
   kaum zu sehen. So liegt der 2px-Unterstrich des aktiven Reiters vollständig innerhalb. */
.adm-tabs{display:flex;gap:2px;margin:0 0 22px;overflow-x:auto;scrollbar-width:none;
  box-shadow:inset 0 -1px 0 var(--line)}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tab{padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .12s,border-color .12s,background-color .12s}
.adm-tab:hover{color:var(--ink)}
.adm-tab.active,.adm-tab[aria-current="page"]{color:var(--petrol);border-bottom-color:var(--petrol);
  font-weight:700;background:var(--tint);border-top-left-radius:7px;border-top-right-radius:7px}

/* ---------- user chip ---------- */
.side-foot .usr{display:flex;align-items:center;gap:10px;min-width:0;border-radius:9px;padding:4px;margin:-4px;color:inherit}
.side-foot .usr:hover{background:var(--side-2)}
.side-foot .usr-txt{min-width:0}
.side-foot .usr .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}

/* Screen-reader-only utility: visible to assistive tech, hidden visually. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================================
   UX components — progressive disclosure, overflow menus, inline help.
   Additive only (native <details>, no framework). Used to reduce clutter and
   make the admin screens self-explanatory.
   ========================================================================== */

/* Collapsible panel — e.g. "+ Neuen Benutzer anlegen". Closed by default. */
details.disclosure{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);margin-bottom:18px;overflow:hidden}
details.disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:14px 18px;font-family:var(--display);font-size:14px;font-weight:600;color:var(--ink-900);user-select:none}
details.disclosure>summary::-webkit-details-marker{display:none}
details.disclosure>summary .sm-ic{width:26px;height:26px;border-radius:8px;background:var(--euc-100);color:var(--petrol);display:flex;align-items:center;justify-content:center;flex:none}
details.disclosure>summary .sm-ic svg{width:15px;height:15px}
details.disclosure>summary .sm-sub{font-family:var(--font);font-weight:400;font-size:12px;color:var(--muted)}
details.disclosure>summary .chev{margin-left:auto;width:16px;height:16px;color:var(--muted-2);transition:transform .2s var(--ease)}
details.disclosure[open]>summary{border-bottom:1px solid var(--line-2)}
details.disclosure[open]>summary .chev{transform:rotate(180deg)}
details.disclosure>.disclosure-body{padding:18px}

/* A disclosure whose <summary> was marked as a button rendered as an odd
   "button-inside-a-bordered-card" with a double-border hover. Render it instead as a
   clean, full-width section header (transparent, subtle hover, own chevron). */
details.disclosure:not(.inline)>summary.btn{
  width:100%;justify-content:flex-start;gap:10px;border:none;box-shadow:none;border-radius:0;
  background:transparent;padding:13px 16px;height:auto;font-family:var(--display);
  font-size:13.5px;font-weight:600;color:var(--ink-900)}
details.disclosure:not(.inline)>summary.btn:hover{background:var(--paper-2);color:var(--ink-900)}
details.disclosure:not(.inline)>summary.btn::after{
  content:"";margin-left:auto;width:7px;height:7px;margin-right:2px;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
  transform:rotate(45deg);transition:transform .2s var(--ease)}
details.disclosure[open]:not(.inline)>summary.btn::after{transform:rotate(-135deg)}

/* Compact inline disclosure (e.g. header actions): neutralise the card so the summary
   stays a normal small button, matching sibling buttons like "Verlauf". */
details.disclosure.inline{display:inline-block;position:relative;border:none;box-shadow:none;
  background:transparent;border-radius:0;margin:0;overflow:visible}

/* Row-action overflow menu (⋯). Keeps one primary action + the rest tucked away. */
.row-actions{display:inline-flex;flex-wrap:wrap;align-items:center;gap:7px;justify-content:flex-end}
details.menu{position:relative;display:inline-block}
details.menu>summary{list-style:none;cursor:pointer;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--paper);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);box-shadow:var(--shadow-s)}
details.menu>summary::-webkit-details-marker{display:none}
details.menu>summary:hover{background:var(--paper-2);border-color:var(--muted-2)}
details.menu>summary svg{width:16px;height:16px}
details.menu .menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:1000;min-width:206px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-l);padding:6px;display:flex;flex-direction:column;gap:1px;text-align:left}
details.menu .menu-pop a,details.menu .menu-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink-soft);background:none;border:none;cursor:pointer;font-family:inherit}
details.menu .menu-pop a svg,details.menu .menu-pop button svg{width:15px;height:15px;flex:none;opacity:.8}
details.menu .menu-pop a:hover,details.menu .menu-pop button:hover{background:var(--paper-2);color:var(--ink-900)}
details.menu .menu-pop .danger{color:var(--red)}
details.menu .menu-pop .danger:hover{background:var(--red-bg)}
details.menu .menu-pop .m-sep{height:1px;flex:none;background:var(--line-2);margin:5px 4px}
details.menu .menu-pop .m-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:600;padding:6px 10px 2px}
/* Kopfzeile des Blatts: auf dem Telefon sagt sie, WESSEN Zeile man gerade
   aufgeklappt hat (siehe @media unten). Auf dem Schreibtisch steht das Menue
   direkt am Knopf der Zeile — dort waere die Wiederholung nur Laerm. */
details.menu .menu-pop .m-kopf{display:none}

/* Notification bell — a .menu with an unread-count badge on the summary. */
.cp-bell{position:relative}
/* Das Postfach ist ein Link, kein Aufklapper — es braucht deshalb die Knopfform,
   die details.menu>summary sonst mitbringt. */
a.cp-mail{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);
  box-shadow:var(--shadow-s);text-decoration:none}
a.cp-mail:hover{background:var(--paper-2);border-color:var(--muted-2)}
a.cp-mail svg{width:16px;height:16px}

/* --- Nachricht schreiben ------------------------------------------------
   Zwei Spalten: links die Empfaengerliste in voller Hoehe, rechts Fall,
   Betreff und Text. Vorher stand alles untereinander in einem Raster, das
   die Breite nicht nutzte — auf einem 1440er Bildschirm war die Haelfte
   leer, waehrend das Textfeld drei Zeilen hoch war. */
/* Die allgemeine Regel .disclosure > .disclosure-body > form kappt Formulare bei 900px —
   sinnvoll fuer ein Formular mit sechs kurzen Feldern, falsch fuer das Schreibfeld: dort
   blieb auf einem 1440er Bildschirm ein Drittel der Breite leer, waehrend die
   Empfaengerliste und das Textfeld zu schmal waren. */
.disclosure > .disclosure-body > form.msg-compose{max-width:1400px}
.msg-compose{display:grid;grid-template-columns:minmax(240px,1fr) minmax(360px,2fr);
  gap:16px 20px;align-items:start}
.msg-compose>.form-field{min-width:0}
.msg-compose select[multiple]{width:100%;min-height:210px;padding:6px}
.msg-compose select[multiple] option{padding:5px 7px;border-radius:6px}
.msg-compose-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.msg-compose-right .form-field{margin:0}
.msg-compose-right textarea{width:100%;min-height:170px;box-sizing:border-box}
.msg-compose-right select,.msg-compose-right input:not([type=checkbox]):not([type=radio]){width:100%;box-sizing:border-box}
@media(max-width:860px){.msg-compose{grid-template-columns:1fr}
  .msg-compose select[multiple]{min-height:150px}}

/* --- Berichtsformular: die Speicherleiste bleibt am unteren Rand stehen,
   damit man nach dem zwoelften Abschnitt nicht erst nach oben scrollen muss. */
.report-save{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:16px;padding:12px 16px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-m)}
.report-save-hint{font-size:12px;color:var(--muted);line-height:1.5;flex:1 1 260px;min-width:0}
.cp-bell>summary{position:relative}
.cp-bell-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--paper);pointer-events:none;font-family:var(--display)}

/* Inline help chip — a small "?" with a native tooltip (title attribute). */
.help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--line-2);color:var(--muted);font-size:10px;font-weight:700;cursor:help;margin-left:5px;vertical-align:middle;user-select:none}
.help:hover{background:var(--euc-100);color:var(--petrol)}

/* Contextual callout — a calm explanation box (quieter than .flash). */
.callout{display:flex;gap:11px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:12.8px;color:var(--ink-soft);line-height:1.6;margin-bottom:16px}
.callout>svg{width:17px;height:17px;flex:none;color:var(--petrol);margin-top:1px}
.callout b{color:var(--ink-900);font-weight:600}
.callout .callout-close{margin-left:auto;background:none;border:none;color:var(--muted-2);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
/* Zwei Abstufungen fuer denselben Kasten. Der neutrale erklaert, diese beiden
   warnen — und sie sollen sich auch ohne Farbwahrnehmung unterscheiden, deshalb
   traegt jeder ein eigenes Symbol in der Ansicht und nicht nur eine andere Farbe. */
.callout.warn{background:var(--amber-bg);border-color:rgba(168,98,11,.28)}
.callout.warn>svg{color:var(--amber)}
.callout.gefahr{background:var(--red-bg);border-color:rgba(168,30,72,.28)}
.callout.gefahr>svg{color:var(--red)}
.callout.gefahr b{color:var(--red)}

/* Secondary/subtle cell text in tables. */
.cell-sub{color:var(--muted-2);font-size:12px}
.tbl td .stack-2{display:flex;flex-direction:column;gap:2px}

/* Equal-size form grid — all inputs the same width, top-aligned so a field with
   a hint below it does not push its input out of line with the rest of the row. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 16px;align-items:start}
.form-grid .form-field{min-width:0}
.form-grid .form-field label{min-height:17px}
.form-grid .form-field input:not([type=checkbox]):not([type=radio]),.form-grid .form-field select{width:100%;min-width:0;height:42px;box-sizing:border-box}
/* Uniform select appearance (custom chevron), same height as inputs. */
.form-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6E7A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;padding-right:34px}
.form-grid .fg-full{grid-column:1 / -1}
.form-grid .fg-actions{grid-column:1 / -1;display:flex;gap:10px;padding-top:2px}
.form-field .req{color:var(--red);font-weight:700}
.field-hint{font-size:11px;color:var(--muted-2);margin-top:1px}
/* Hinweis unter einem Feld. Ohne eigene Regel erbte <small> die Farbe seiner Umgebung —
   in der getönten Bearbeiten-Box las sich ein sachlicher Hinweis dann wie eine Warnung. */
.form-field small{display:block;font-size:11px;line-height:1.45;color:var(--muted-2);margin-top:1px}

/* Guided next-step banner (after creating something). */
.next-step{display:flex;gap:12px;align-items:center;background:var(--euc-50);border:1px solid #cfe6de;border-radius:12px;padding:13px 16px;margin-bottom:18px}
.next-step .ns-ic{width:30px;height:30px;border-radius:9px;background:var(--petrol);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.next-step .ns-ic svg{width:16px;height:16px}
.next-step .ns-tx{flex:1;font-size:13px;color:var(--ink-soft)}
.next-step .ns-tx b{color:var(--ink-900)}

/* ============================================================================
   Product tour (coach marks) — first-login guided tour, restartable via ?-icon.
   ========================================================================== */
.cp-tour-block{position:fixed;inset:0;z-index:9996}
.cp-tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(14,26,34,.62);pointer-events:none;z-index:9997;
  transition:top .25s var(--ease),left .25s var(--ease),width .25s var(--ease),height .25s var(--ease)}
.cp-tour-spot.no-target{box-shadow:0 0 0 9999px rgba(14,26,34,.74)}
.cp-tour-pop{position:fixed;z-index:9999;width:344px;max-width:calc(100vw - 24px);background:var(--paper);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-l);padding:18px 18px 16px;animation:cpTourIn .2s var(--ease)}
@keyframes cpTourIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cp-tour-pop .tour-badge{display:inline-block;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--petrol);border-radius:999px;padding:3px 9px;margin-bottom:11px}
.cp-tour-pop h4{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0 0 7px;color:var(--ink-900)}
.cp-tour-pop p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0 0 16px}
.cp-tour-row{display:flex;align-items:center;gap:10px}
.cp-tour-row .skip{font-size:12.5px;color:var(--muted);cursor:pointer;background:none;border:none;padding:4px 2px;font-family:inherit}
.cp-tour-row .skip:hover{color:var(--ink-soft)}
.cp-tour-row .sp{margin-left:auto;display:flex;gap:8px}
/* Help / restart-tour button in the top bar. */
.cp-help-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);cursor:pointer;flex:none}
.cp-help-btn:hover{background:var(--paper-2);border-color:var(--muted-2);color:var(--ink-900)}

/* Client-side table paging (js/table-paging.js) — keeps long .tbl lists paged */
.tbl-pager{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  margin-top:12px;font-size:12.5px;color:var(--ink-soft)}
.tbl-pager .tp-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tbl-pager .tp-count{font-variant-numeric:tabular-nums}
.tbl-pager .tp-size{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  color:var(--ink-soft);font-size:12.5px;cursor:pointer}
.tbl-pager .tp-pages{display:flex;align-items:center;gap:6px}
.tbl-pager .tp-info{min-width:130px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-pager .btn.sm{padding:5px 10px;line-height:1}
.tbl-pager .btn[disabled]{opacity:.4;pointer-events:none}

/* Dokumente der Fallakte: Such-/Filterleiste (js/dokumente-filter.js).
   Dieselbe Formensprache wie die Blätter-Fusszeile oben — ein gemeinsames Muster
   für lange Listen. Ist bis zum Start des JavaScripts per [hidden] verborgen. */
.dok-filter{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:0 0 12px}
.dok-filter[hidden]{display:none}
.dff-suche{position:relative;flex:1 1 240px;min-width:200px}
.dff-suche svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  color:var(--muted);pointer-events:none}
.dff-suche input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);color:var(--ink-900);font-size:13px}
.dff-suche input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.dok-filter .dff-select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  color:var(--ink-900);font-size:13px;cursor:pointer}
.dok-filter .dff-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.dff-anzahl{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-left:auto}
.dff-reset[hidden]{display:none}
/* Die Leer-Zeile ist eine Tabellenzeile; im gestapelten Modus setzt
   `table.tbl.stapel tr{display:block}` sonst das [hidden]-Attribut außer Kraft und
   die Meldung bliebe immer sichtbar. Diese Regel hat Vorrang und hält sie
   verborgen, bis js/dokumente-filter.js sie bei null Treffern einblendet. */
table.tbl tr[data-dok-leer][hidden]{display:none}
tr[data-dok-leer] .btn{margin-left:8px;vertical-align:baseline}

/* Telefonie-Panel der Fallakte (js/telefonie.js): Click-to-Dial + Anrufliste. */
.cp-tel-waehlen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.cp-tel-waehlen input{flex:1 1 240px;min-width:200px;padding:8px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--paper);color:var(--ink-900);font-size:14px}
.cp-tel-waehlen input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.cp-tel-status{font-size:12.5px;color:var(--ink-soft)}
.cp-tel-status.ok{color:#1f7a4d}
.cp-tel-status.fehler{color:#b3261e}
.cp-tel-call{margin-left:6px;vertical-align:middle;padding:3px 7px;line-height:1}
.cp-tel-call svg{width:14px;height:14px}
.cp-tel-call.busy{opacity:.5;pointer-events:none}
.cp-tel-liste{margin-top:6px}
@media(max-width:640px){
  .dff-suche{flex:1 1 100%}
  .dok-filter .dff-select{flex:1 1 auto}
  .dff-anzahl{flex:1 1 100%;margin-left:0}
}

/* --- UI-Politur --------------------------------------------------------- */
/* Die Navigation zeigt bewusst EINEN sichtbaren Scrollbalken (Affordance: „hier kann man
   scrollen"). Die frühere Regel blendete ihn aus — die Gestaltung steht oben bei `.nav`. */

/* =====================================================================
   Kontrollkaestchen und Auswahlknoepfe — EINE Regel, und zwar diese
   ---------------------------------------------------------------------
   Sie standen ueber das Stilblatt verteilt (Grundregel, eine Wiederholung
   fuer .form-field, eine Ausrichtungsregel weiter unten). Drei Regeln fuer
   dieselbe Sache heben sich gegenseitig auf, sobald eine davon geaendert
   wird — genau daran lag es, dass das Kaestchen im Abschnitt
   „Aufgabenkreise" am oberen Rand seines Kastens klebte.

   Was hier geregelt wird und warum:

     flex:0 0 auto   Fast jedes Kaestchen steht in einem Flex-Container neben
                     seiner Beschriftung (.check-inline, .checkline,
                     .filter-check, .remember, .perm-item, .anlage). Ein
                     Flex-Kind schrumpft per Vorgabe, und ein Kaestchen hat
                     keine Mindestbreite, die das verhindert.
     width/height    Feste Groesse statt `auto`: ueberall gleich gross, auf
                     Touch groesser.
     min-width:0     Ruecksetzer gegen geerbte Mindestbreiten.
     padding:0       Ruecksetzer gegen geerbtes Innenabstands-Polster.
     accent-color    Haken und Punkt in der Marke statt im Systemblau. Das
                     stand bisher nur an einer Stelle (.perm-item), weshalb
                     die Rechtematrix gruene Haken hatte und jedes andere
                     Formular blaue.

   WICHTIG — warum diese Regel allein nicht reichte:
   Sie ist mit einem Element und einem Attribut sehr schwach gewichtet. Jede
   Regel fuer Eingabefelder, die ueber eine Klasse laeuft (.form-field input,
   .form-grid .form-field input, .filter-bar .form-field input, .field input,
   .fe-form input, .msg-compose-right input), wiegt schwerer und traf ein
   Kaestchen mit. Ein Kaestchen in einem Feldraster bekam so Rahmen,
   Innenabstand, min-width:200px, width:100% und height:42px — es wurde zum
   leeren grossen Kasten, der seine Beschriftung aus der Zeile schob. Genau
   so sah es unter „Aufgabenkreise" aus, und ueberall sonst, wo ein Kaestchen
   in einem .form-field steht (Datenerfassungsbogen, Aufnahme, Bearbeiten-
   Dialog, Filterleisten). Gegen das Gewicht kommt man hier nicht an.

   Deshalb gilt ab jetzt die umgekehrte Richtung, und die ist beim Schreiben
   neuer Regeln einzuhalten:

     Jede Regel, die Eingabefelder bemasst (width, height, padding, border,
     min-width), schliesst Kaestchen und Knoepfe ausdruecklich aus:

         .xyz input:not([type=checkbox]):not([type=radio]){ ... }

   Dann bleibt diese Regel hier die einzige, die Kaestchen bemasst — und sie
   gilt wieder ueberall.
   ===================================================================== */
input[type=checkbox],input[type=radio]{
  flex:0 0 auto;width:16px;height:16px;min-width:0;padding:0;margin:0;
  accent-color:var(--petrol);cursor:pointer}
@media(pointer:coarse){
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
}

/* Kompakte, gut lesbare Checkbox-Gruppe (z. B. Aufgabenkreise). */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:6px}
.check-grid label{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
@media(max-width:560px){.check-grid{grid-template-columns:1fr}}
/* Einzelne Checkbox mit Text in einer Zeile. */
.check-inline{display:flex;align-items:center;gap:9px;margin:10px 0;font-size:13.5px;cursor:pointer}
/* .checkline hatte ueberhaupt kein Stilblatt: im Einrichtungsassistenten klebten
   Kaestchen und Beschriftung ohne Abstand aneinander, und bei laengerem Text stand
   die Beschriftung unter dem Kaestchen statt daneben. */
.checkline{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:13.5px;
  cursor:pointer;line-height:1.4}

/* --- Kontrollkästchen im Feldraster -----------------------------------------
   .form-field ist eine Spalte (flex-direction:column) mit align-items:stretch.
   Ein Kontrollkästchen hat dort keine feste Breite und wird deshalb auf die
   ganze Spalte gedehnt — der Browser zeichnet das Häkchen dann MITTIG in die
   gedehnte Fläche. Es sah aus, als schwebe es grundlos in der Mitte, weit weg
   von seiner Beschriftung.

   Zwei Ebenen: die Renderer setzen Kästchen und Text zusammen in ein <label>
   (.form-check), damit auch der Text schaltet; diese Regeln sind die Absicherung
   für jede andere Stelle, an der ein Kästchen in einem .form-field landet. */
/* NUR direkte Kinder. Steht das Kaestchen in einem <label class="check-inline">,
   richtet DIESES bereits mittig aus (align-items:center) — align-self auf dem
   Kaestchen ueberschrieb das und liess es am oberen Rand des Kastens kleben,
   waehrend die Beschriftung daneben mittig sass. Genau so sah es im Abschnitt
   „Aufgabenkreise" aus. Der Nachfahren-Selektor war einen Tick zu weit gefasst. */
.form-field > input[type=checkbox],.form-field > input[type=radio]{align-self:flex-start}
.form-field.form-check{justify-content:center}
.form-field.form-check .check-inline{margin:0}
.form-field.form-check .check-inline span{color:var(--ink-900);font-weight:500}
.form-field.form-check small{margin-top:5px}
/* Auf Touch ein grösseres Ziel — die ganze Zeile schaltet ohnehin mit. */
@media(pointer:coarse){
  .form-field.form-check .check-inline{padding:7px 0}
}

/* =====================================================================
   Fallakte-Feinschliff (v2): sanftes Scrollen, ausgerichtete Sprung-Nav
   mit aktivem Zustand, edlere Bearbeiten-/Hinzufügen-Boxen, Detailpolish.
   ===================================================================== */

/* Sanftes Scrollen zu Ankern (Sprung-Nav) – respektiert Reduced-Motion. */
@media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
[id^="sec-"]{scroll-margin-top:92px}

/* --- Sprung-Navigation: bündig mit dem Seiteninhalt, aktiver Abschnitt --- */
.case-toc{top:88px;right:20px;width:210px;max-height:calc(100vh - 116px);
  padding:12px 10px;border-radius:16px;box-shadow:var(--shadow-l);
  /* Kein backdrop-filter: der Hintergrund (--paper) ist deckend, die
     Weichzeichnung waere unsichtbar — sie machte die Leiste aber zum
     Bezugsrahmen fuer die Trefferliste der Aktensuche (.as-treffer,
     position:fixed), die dadurch um die Hoehe des Streifens zu tief sass. */
  border-color:var(--line-2)}
.case-toc-h{padding:4px 10px 8px;color:var(--muted-2)}
.case-toc a{position:relative;padding:7px 30px 7px 15px;border-radius:9px;font-weight:500;
  color:var(--ink-soft);transition:background .15s var(--ease),color .15s var(--ease)}
.case-toc a::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:2px;background:var(--petrol);transition:height .18s var(--ease)}
.case-toc a:hover{background:var(--euc-50);color:var(--ink-900)}
.case-toc a.active{background:var(--euc-100);color:var(--petrol-d);font-weight:600}
.case-toc a.active::before{height:16px}

/* Auf dem TELEFON legt sich die Sprungliste als waagerechter Streifen unter die
   Kopfzeile — dort ist fuer eine Spalte kein Platz. Ausgeblendet wird sie nie:
   ohne sie waere die Fallakte eine Scrollstrecke ueber mehr als dreissig
   Abschnitte ohne jede Navigation.

   Ein Streifen und kein Ausklappmenue: ein Tipp springt, statt erst zu oeffnen.
   Die Klasse .case-toc bleibt in jedem Fall am Element - .content:has(.case-toc)
   gestaltet die gesamte Fallakte (Karten, Ueberschriften, Bearbeiten-Boxen).

   AB 744 PUNKTEN (jedes iPad, auch das mini im Hochformat) steht sie dagegen
   SEITLICH — siehe den Abschnitt „Tablet" weiter unten. Der Streifen war die
   richtige Antwort auf „kein Platz", auf dem Tablet ist aber Platz, und er
   kostete dort die staendige Sicht auf die Gliederung: man musste erst
   waagerecht wischen, um zu sehen, welche Abschnitte es ueberhaupt gibt.
   (Rueckmeldung des Auftraggebers: „Die Leiste mit allen Aktendaten soll
   seitlich auf dem iPad sein, nicht oben.") */
@media(max-width:743.98px){
  .case-toc{
    /* App-Shell: #main-content scrollt selbst, die Topbar liegt AUSSERHALB davon.
       Die Sprungleiste klebt daher am oberen Rand des Scroll-Containers (top:0),
       nicht 60px darunter (alter Wert aus dem mitscrollenden Topbar-Modell). */
    position:sticky; top:0; right:auto; z-index:39;
    width:auto; max-width:none; max-height:none;
    margin:0 0 16px; padding:6px;
    display:flex; align-items:center; gap:6px;
    /* Der Streifen selbst scrollt NICHT mehr. Das tut jetzt der Umschlag um die
       Sprungmarken (.case-toc-links). Der Unterschied zaehlt unter 620 Punkten:
       dort bekommt das Suchfeld eine eigene Zeile, und ein umbrechendes Kind
       waere in einem Container mit overflow-y:hidden abgeschnitten gewesen. */
    overflow:visible;
    border-radius:12px;
  }
  .case-toc-links{
    display:flex; align-items:center; gap:3px;
    flex:1 1 0; min-width:0;
    /* relative, damit offsetLeft der Marken sich auf DIESEN Kasten bezieht — die
       Scrollspy-Logik in Detail.cshtml haelt die aktive Marke damit im Bild. */
    position:relative;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;                  /* Firefox */
    -webkit-overflow-scrolling:touch;      /* Schwung auf iOS */
    overscroll-behavior-x:contain;         /* kein Zurueckwischen der Seite */
  }
  .case-toc-links::-webkit-scrollbar{display:none}
  .case-toc-h{display:none}                /* "Sprung zu" kostet im Streifen nur Platz */
  .case-toc a{flex:none; white-space:nowrap; padding:8px 13px; font-size:13px}
  /* Der aktive Abschnitt wird unterstrichen statt seitlich markiert -
     im Streifen ist links kein Platz fuer den Balken. */
  .case-toc a::before{left:13px; right:13px; top:auto; bottom:3px;
    width:auto; height:0; transform:none}
  .case-toc a.active::before{height:2px}
  /* Nur noch die klebende Sprungleiste verdeckt den Abschnittsanfang (die Topbar liegt
     im App-Shell außerhalb des scrollenden #main-content); daher weniger Abstand als
     früher (vorher 124px inkl. der mitscrollenden 60px-Topbar). */
  [id^="sec-"]{scroll-margin-top:64px}
}
@media(min-width:1401px){.content:has(.case-toc){padding-right:250px}}

/* =====================================================================
   Tablet: das iPad in beiden Lagen (744–1400px)
   ---------------------------------------------------------------------
   Die Sprungliste steht RECHTS und nicht als Streifen oben. 744 Punkte ist
   das schmalste iPad im Hochformat (mini); darueber liegen iPad und iPad Air
   mit 820/834 und das iPad Pro mit 1024, quer bis 1366.

   Der Preis ist Breite, und die wird hier ausdruecklich zurueckgeholt:
   schmalere Leiste, engerer Seitenrand, und in der Fallakte einspaltige
   Karten. Ohne das stuenden auf 1024 Punkten zwei Karten zu je 250 Punkten
   nebeneinander — lesbar ist das nicht mehr.

   Alles ist auf .content:has(.case-toc) gescopet, also auf die Fallakte.
   Ein Notebook mit 1280 Punkten soll auf den uebrigen Seiten weiter das
   normale Layout bekommen.
   ===================================================================== */
@media(min-width:744px) and (max-width:1400px){
  .case-toc{
    top:76px; right:14px; width:174px;
    max-height:calc(100vh - 96px); max-height:calc(100dvh - 96px);
    padding:9px 7px; border-radius:14px;
    /* Die Liste ist laenger als der Bildschirm hoch ist. Sie scrollt in
       sich, und der Wisch darf dabei nicht die Seite dahinter mitnehmen. */
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  .case-toc-h{padding:3px 8px 7px; font-size:9.5px}
  .case-toc a{padding:6px 9px 6px 13px; font-size:12.5px}

  .content:has(.case-toc){padding-left:22px; padding-right:202px}
  /* Zwei Karten nebeneinander gehen sich hier aus, ohne lesbar zu bleiben. */
  .content:has(.case-toc) .grid-2{grid-template-columns:1fr}
  .content:has(.case-toc) .case-stats{grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:10px}
  .content:has(.case-toc) .form-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px 14px}
  .content:has(.case-toc) .card.pad{padding:18px}
}
/* Ab 1280 ist wieder Luft fuer die breitere Leiste. */
@media(min-width:1280px) and (max-width:1400px){
  .case-toc{width:198px}
  .content:has(.case-toc){padding-right:226px}
}

/* Kennzahlen-Kacheln: auf dem iPad quer passen drei nebeneinander. Die
   allgemeine Regel darueber setzt ab 1080 auf zwei — das liesse bei acht
   Kacheln vier Reihen entstehen, wo drei Reihen gereicht haetten. */
@media(min-width:1024px) and (max-width:1279.98px){
  .g4{grid-template-columns:repeat(3,1fr)}
}
/* Cockpit: die schmale Spalte rechts wird unter 1180 zur Quetschung. */
@media(max-width:1180px){
  .dash-cols{grid-template-columns:minmax(0,1fr)}
}

/* --- Korrespondenz: Absenden aus der Fallakte ------------------------------
   Die Box sitzt in einer Tabellenzeile unter dem Eintrag, zu dem sie gehoert.
   Das ist Absicht: der Bezug zwischen „dieser Entwurf" und „dieses Formular"
   soll nicht erst gesucht werden muessen. Sie darf die Zeile aber nicht
   sprengen — deshalb kein Rahmen und keine eigene Breite. */
details.disclosure.inline-send{border:none;box-shadow:none;margin:0;background:transparent}
details.disclosure.inline-send[open]>summary{border-bottom:none}
.komm-senden>td{background:var(--paper-2)}

/* Anlagen: Kontrollkaestchen mit Dateinamen, mehrspaltig und umbrechend. Eine
   Akte hat schnell dreissig Dokumente; untereinander waere das eine Kolonne,
   durch die niemand scrollt. */
.anlagen-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;
  max-height:190px;overflow-y:auto;padding:2px}
.anlagen-liste .anlage{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);
  padding:5px 6px;border-radius:7px;cursor:pointer;min-width:0}
.anlagen-liste .anlage:hover{background:var(--paper)}
.anlagen-liste .anlage input{margin:0}
.anlagen-liste .anlage span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(pointer:coarse){
  .anlagen-liste .anlage{padding:9px 6px}
}

/* =====================================================================
   Tippen statt Zeigen
   ---------------------------------------------------------------------
   Gilt fuer jedes Geraet ohne genauen Zeiger, also auch fuer das iPad im
   Hochformat. Zwei Dinge aendern sich gegenueber der Maus: Ziele muessen
   groesser sein (Apple nennt 44 Punkte, 40 sind in einer Tabellenzeile
   noch vertretbar), und Hover-Zustaende sind schaedlich — auf Touch
   bleiben sie nach dem Tippen kleben und sehen aus wie eine Auswahl.
   ===================================================================== */
@media(pointer:coarse){
  .case-toc a{padding-top:9px; padding-bottom:9px}
  .btn.sm,.tbl .btn,.row-actions .btn{min-height:38px}
  details.menu>summary{min-width:38px; min-height:38px}
  .chip-role button{width:26px; height:26px}
  a,button,summary,label{-webkit-tap-highlight-color:rgba(16,100,107,.12)}
  /* Klebrige Hover-Zustaende abschalten. */
  .kvrow:hover{background:none}
  .case-stat:hover{transform:none; box-shadow:var(--shadow-s); border-color:var(--line-2)}
  .tbl tbody tr:hover{background:none}
  details.disclosure:hover{border-color:var(--line-2)}
}

/* --- Bearbeiten-/Hinzufügen-Boxen (details.disclosure) neu gestylt ---
   Auf die Fallakte gescopet (.content:has(.case-toc)), damit Disclosures/
   Karten-Überschriften auf anderen Views unverändert bleiben. */
.content:has(.case-toc) details.disclosure{border-color:var(--line-2);box-shadow:var(--shadow-s);transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.content:has(.case-toc) details.disclosure:hover{border-color:var(--line)}
.content:has(.case-toc) details.disclosure[open]{box-shadow:var(--shadow-m)}

/* Kopfzeile der Box: Symbol + Titel + Untertitel + Chevron (siehe _SectionBar.cshtml).

   Vorher stand das Symbol als ::before am Textknopf und der Pfeil als ::after — ein
   fest eingebauter Stift, gleich ob der Knopf etwas anlegte, hochlud oder aenderte.
   Jetzt liefert die Leiste ihr Symbol selbst, und es sagt, was passiert. */
.content:has(.case-toc) details.disclosure>summary.sect-bar{
  gap:12px;padding:15px 18px;font-size:14px;color:var(--ink-900);
  border-radius:16px;transition:background .15s var(--ease)}
.content:has(.case-toc) details.disclosure[open]>summary.sect-bar{border-radius:16px 16px 0 0}
.content:has(.case-toc) details.disclosure>summary.sect-bar:hover{background:var(--euc-50)}
.content:has(.case-toc) details.disclosure>summary.sect-bar .sm-ic{width:30px;height:30px;border-radius:9px}
.content:has(.case-toc) details.disclosure>summary.sect-bar .sm-ic svg{width:16px;height:16px}

/* Die kleinen, verschachtelten Aufklapper (Fristverlaengerung in einer Tabellenzelle,
   „Senden" in der Korrespondenz) sind KEINE Abschnittsleisten. Sie behalten die Form
   eines kleinen Knopfes — vorher bekamen sie ueber die Regel oben ein 30px-Stiftabzeichen
   und 15px Innenabstand und sprengten damit die Zeile, in der sie stehen. */
.content:has(.case-toc) details.disclosure>summary.btn{padding:6px 11px;font-size:12.5px;border-radius:9px}
.content:has(.case-toc) details.disclosure>summary.btn::before{content:none}

/* Der Formular-„Bearbeiten-Bereich" sitzt bündig und getönt in der Box –
   keine doppelten Rahmen mehr.

   max-width:none ist Absicht und hebt die allgemeine 900px-Regel (siehe oben bei
   .disclosure > form) hier auf: die getönte Fläche IST die aufgeklappte Box. Blieb sie
   bei 900px stehen, endete sie mitten in der Karte und rechts davon stand ein Streifen
   weiss — es sah aus wie ein Darstellungsfehler, nicht wie eine Absicht. Die Felder
   darin laufen trotzdem nicht auseinander: .form-grid setzt bei minmax(230px,1fr)
   einfach eine Spalte mehr, statt die vorhandenen zu dehnen. */
.content:has(.case-toc) details.disclosure:not(.inline)>form.card,
.content:has(.case-toc) details.disclosure:not(.inline)>.card.pad{
  border:none!important;box-shadow:none!important;border-radius:0 0 16px 16px!important;
  margin-top:0!important;background:var(--paper-2);padding:20px;max-width:none}

/* Dasselbe für die Abschnitte des Erfassungsbogens: dort liegt das Formular in
   .disclosure-body und wurde von derselben Regel gekappt. */
.content:has(.case-toc) details.disclosure>.disclosure-body{background:var(--paper-2);border-radius:0 0 16px 16px}
.content:has(.case-toc) details.disclosure>.disclosure-body>form{max-width:none}

/* --- Karten & Überschriften: mehr Ruhe und Kontur (nur Fallakte) --- */
.content:has(.case-toc) .card.pad{padding:22px}
.content:has(.case-toc) .card.pad>h3:first-child{margin-top:0}
.content:has(.case-toc) .card.pad>h3{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-900);margin:0 0 15px;padding-bottom:11px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;gap:9px}
.content:has(.case-toc) .card.pad>h3 .pill{margin-left:auto}

/* Schlüssel/Wert-Zeilen: letzte Zeile ohne Trennlinie, sanfter Hover. */
.content:has(.case-toc) .kvrow{padding:9px 0;border-bottom:1px solid var(--line-2);margin:0;transition:background .12s}
.content:has(.case-toc) .kvrow:last-child{border-bottom:none}
.content:has(.case-toc) .kvrow:hover{background:var(--paper-2)}

/* Abschnitts-Überschriften mit Petrol-Akzent (nur Fallakte). */
.content:has(.case-toc) .section-h h3{position:relative;padding-left:13px}
.content:has(.case-toc) .section-h h3::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;
  border-radius:3px;background:linear-gradient(var(--petrol-l),var(--petrol))}

/* Übersichts-Kacheln (Kennzahlen) – edler, mit Hover-Lift. */
.case-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
/* Flex-Spalte: die Zahl steht in einem Band fester Höhe oben, die Beschriftung wird per
   margin-top:auto an den unteren Rand geschoben. So liegen ALLE Beschriftungen auf einer Linie,
   obwohl Zahl, Datum und Fortschrittsbalken unterschiedlich hoch sind. Die Kacheln selbst sind
   im Raster ohnehin gleich hoch. */
.case-stat{background:var(--paper);border:1px solid var(--line-2);border-radius:14px;padding:16px 14px;
  text-align:center;box-shadow:var(--shadow-s);display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:inherit;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease)}
a.case-stat{cursor:pointer}
.case-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);border-color:var(--line)}
a.case-stat:hover{border-color:var(--petrol)}
.case-stat .cs-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink-900);
  min-height:30px;display:flex;align-items:center;justify-content:center}
.case-stat .cs-num.sm{font-size:16px;font-family:var(--display)}
.case-stat .cs-num.good{color:var(--petrol)}
.case-stat .cs-num.warn{color:var(--amber)}
.case-stat .cs-num.bad{color:var(--red)}
.case-stat .cs-lbl{font-size:11.5px;color:var(--muted);margin-top:auto;padding-top:8px;font-weight:500}
.case-stat .cs-bar{height:5px;border-radius:4px;background:var(--line-2);overflow:hidden;margin:7px 8px 0;align-self:stretch}
.case-stat .cs-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--petrol-l),var(--petrol));border-radius:4px}

/* „Speichern"-Zeile im Formular klar abgesetzt. */
.content:has(.case-toc) details.disclosure form .btn.primary{box-shadow:var(--shadow-s)}
/* Hover-Lift der Kacheln unter Reduced-Motion deaktivieren. */
@media(prefers-reduced-motion:reduce){.case-stat:hover{transform:none}}

/* ---------------------------------------------------------------------------
   Bearbeiten-Dialog der Fallakte (Views/Cases/_EditRecordButton.cshtml).

   Der Auslöser sitzt in der Aktionsspalte einer Tabelle, deren Karte
   overflow-x:auto hat — ein normal fliessendes Formular würde dort abgeschnitten
   oder die Tabelle unbrauchbar in die Breite ziehen. Der Inhalt wird deshalb als
   Überlagerung mit position:fixed gezeigt: sie liegt ausserhalb jedes
   Scroll-Containers und ist unabhängig von der Spaltenbreite lesbar.
   --------------------------------------------------------------------------- */
details.rec-edit{display:inline-block;margin:0;background:none;border:0;box-shadow:none;overflow:visible}
/* Ohne Klasse "disclosure" (siehe _EditRecordButton.cshtml) fehlt die dortige
   Markerunterdrueckung — hier selbst mitgebracht, sonst zeigt der Browser sein
   eigenes Dreieck neben dem Stift. */
details.rec-edit>summary{list-style:none;cursor:pointer}
details.rec-edit>summary::-webkit-details-marker{display:none}

/* Bearbeiten und Loeschen sind zwei gleich grosse Icon-Knoepfe. Nur die Farbe
   unterscheidet sie: zwei verschieden grosse Knoepfe nebeneinander lesen sich
   wie ein Fehler. */
/* Zeilenaktionen: Ansehen, Herunterladen, Bearbeiten, Löschen — vier Knöpfe einer
   Grösse und einer Form. Die Farbe unterscheidet den Papierkorb, nicht die Grösse.
   Vorher war „Vorschau" ein Textknopf, „Herunterladen" ein Unicode-Pfeil und
   „Löschen" ein Emoji; drei Höhen in einer Zeile lesen sich wie ein Fehler. */
.rec-edit-trigger,.rec-del,.rec-act{width:32px;height:32px;padding:0;flex:none;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center}
.rec-edit-trigger>svg,.rec-del>svg,.rec-act>svg{width:15px;height:15px}
.rec-edit-trigger:hover{border-color:var(--petrol);color:var(--petrol)}
/* Der Papierkorb trägt jetzt im Markup .btn.danger (nicht mehr .ghost) — so ist er,
   wie überall sonst, klar rot. Die frühere .rec-del{color} hatte geringere Spezifität
   als .btn.ghost und wurde deshalb nie wirksam (der Knopf blieb grau). */

/* Entfernen-Kreuz in einer Plakette (Aufgabenkreise) oder einer Schlüssel/Wert-Zeile
   (Betreuungsziele). Kleiner als die Zeilenaktionen einer Tabelle — es sitzt in einem
   Text und darf ihn nicht auseinanderdrücken —, aber ein echter Knopf mit Trefferfläche,
   Hover und Fokus. Vorher stand dort ein nacktes „×" ohne alles. */
.pill-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  padding:0;border:0;border-radius:5px;background:none;color:inherit;opacity:.55;cursor:pointer;
  transition:opacity .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.pill-x>svg{width:11px;height:11px}
.pill-x:hover{opacity:1;background:var(--red-bg);color:var(--red)}
.pill-x:focus-visible{outline:2px solid var(--petrol);outline-offset:1px;opacity:1}
@media (pointer:coarse){.pill-x{width:26px;height:26px}.pill-x>svg{width:13px;height:13px}}

/* Gruppentitel über den Bereichen des Erfassungsbogens („Gefahrenlagen", „Vermögen", …).
   Bewusst kräftiger als eine Bereichsüberschrift und mit Luft davor: er trennt 51
   gleich gebaute Bereiche in sechs Kapitel, und dieselbe Gliederung steht links in der
   Sprungnavigation. Ohne ihn sagte die Leiste „Vermögen" und die Seite dazu nichts. */
.gruppe-h{display:flex;align-items:baseline;gap:12px;margin:38px 0 6px;padding-bottom:9px;
  border-bottom:2px solid var(--petrol);font-family:var(--display);font-size:17px;
  font-weight:700;letter-spacing:-.01em;color:var(--ink-900)}
.gruppe-h .gruppe-n{margin-left:auto;font-family:var(--font);font-size:12px;font-weight:400;
  color:var(--muted)}
.gruppe-h+.section-h{margin-top:14px!important}
.rec-del-form{display:inline;margin:0}

/* Abdunkelung dahinter — schliesst den Dialog per Klick (siehe keep-position.js). */
details.rec-edit[open]>.rec-edit-backdrop{
  position:fixed;inset:0;z-index:290;background:rgba(20,32,43,.42);
}
/* Der Dialog: Kopf, scrollender Rumpf, stehende Fussleiste. Vorher war es ein
   Kasten, in dem das Formular ohne Innenabstand an der Kante klebte und der
   Speichern-Knopf bei elf Feldern unterhalb des Sichtbaren stand. */
details.rec-edit[open]>.rec-edit-pop{
  position:fixed;z-index:295;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1020px,95vw);max-height:92vh;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-l);overflow:hidden;
  display:flex;flex-direction:column}
details.rec-edit[open]>.rec-edit-pop>form{display:flex;flex-direction:column;min-height:0;max-height:92vh}
details.rec-edit>.rec-edit-pop{display:none}
details.rec-edit[open]>.rec-edit-pop{display:flex}

.rec-edit-kopf{display:flex;align-items:center;gap:12px;flex:none;
  padding:16px 20px;border-bottom:1px solid var(--line-2);background:var(--paper-2)}
.rec-edit-ic{width:30px;height:30px;border-radius:9px;background:var(--euc-100);color:var(--petrol);
  display:flex;align-items:center;justify-content:center;flex:none}
.rec-edit-ic>svg{width:16px;height:16px}
.rec-edit-kopf>span:nth-child(2){flex:1 1 auto;min-width:0}
.rec-edit-titel{display:block;font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--ink-900)}
.rec-edit-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.rec-edit-x{width:30px;height:30px;flex:none;border-radius:9px;border:1px solid transparent;
  background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s var(--ease)}
.rec-edit-x>svg{width:16px;height:16px}
.rec-edit-x:hover{background:var(--paper);border-color:var(--line);color:var(--ink-900)}

/* overscroll-behavior:contain — der Bildlauf bleibt IM Dialog. Ohne das griff das Rad an der
   oberen/unteren Kante des Rumpfs auf die Seite dahinter durch (Scroll-Verkettung): man scrollte
   im Formular weiter und die Akte darunter wanderte mit. Zusammen mit der Feststellung des Body
   in keep-position.js bleibt die Seite jetzt sicher stehen, wo sie war. */
.rec-edit-body{padding:22px 20px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.rec-edit-fuss{display:flex;justify-content:flex-end;gap:10px;flex:none;
  padding:14px 20px;border-top:1px solid var(--line-2);background:var(--paper-2)}

@media(max-width:620px){
  /* Auf dem Telefon fuellt der Dialog den Schirm: ein zentrierter Kasten mit
     Rand daneben ist dort nur verschenkte Flaeche.

     `right:0` statt `width:100vw`: 100vw ist die Breite OHNE Ruecksicht auf einen
     Bildlaufbalken. Wo einer liegt (Android mit eingeblendeter Leiste, Desktop im
     schmalen Fenster), ragte das Blatt um dessen Breite nach rechts hinaus und die
     Seite liess sich seitlich schieben.

     `dvh` statt `vh`: `vh` misst den Schirm MIT eingeklappter Adressleiste. Der Dialog
     haengt an `bottom:0`, also wuchs er bei eingeblendeter Adressleiste oben aus dem
     Bild — Titel und Schliessen-Kreuz standen ausserhalb des Sichtbaren, und der
     Dialog liess sich nur noch mit Esc oder ueber „Abbrechen" ganz unten schliessen.
     Die vh-Zeile bleibt als Rueckfall fuer aeltere Browser davor stehen. */
  details.rec-edit[open]>.rec-edit-pop{
    top:auto;bottom:0;left:0;right:0;transform:none;width:auto;
    max-height:92vh;max-height:92dvh;
    border-radius:18px 18px 0 0;border-width:1px 0 0}
  details.rec-edit[open]>.rec-edit-pop>form{max-height:92vh;max-height:92dvh}
  .rec-edit-body{padding:18px 16px}
  /* viewport-fit=cover (siehe _Layout): ohne den Sicherheitsabstand liegt die
     Fussleiste mit „Speichern" unter dem Streifen der Gestensteuerung. */
  .rec-edit-fuss{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .rec-edit-fuss>.btn{flex:1 1 0;min-height:44px}
}


/* QR-Code der 2FA-Einrichtung -------------------------------------------------
   Der Rahmen soll den Code umschliessen, nicht um ihn herum leerlaufen. Das
   eingebettete SVG bringt eigene Masse mit; ohne die Regel unten bleibt es kleiner
   als der Kasten und sitzt oben links in einer weissen Flaeche. */
.qr-frame{display:inline-block;background:#fff;padding:12px;border-radius:14px;
    border:1px solid var(--line);margin-bottom:14px;width:216px;box-sizing:border-box;line-height:0}
/* Das SVG traegt ein viewBox (siehe AccountController.BuildQrSvg) und skaliert deshalb mit,
   statt sich abschneiden zu lassen. aspect-ratio sichert die Hoehe auch dort ab, wo der Browser
   sie nicht aus dem viewBox ableitet — ein QR-Code ist immer quadratisch. */
.qr-frame svg{display:block;width:100%;height:auto;aspect-ratio:1/1}


/* Fallanlage (Intake) ---------------------------------------------------------
   Zweispaltig: links das Formular, rechts eine mitlaufende Vorschau, welche
   Fristen aus den eingegebenen Daten entstehen. Die Vorschau gehoert neben das
   Formular und nicht darunter — sie soll waehrend der Eingabe sichtbar bleiben,
   sonst erfaehrt man die Folgen der Datumsfelder erst nach dem Speichern. */
.intake{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
@media(max-width:1100px){.intake{grid-template-columns:1fr}}
.intake-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.intake-side{position:sticky;top:16px}
@media(max-width:1100px){.intake-side{position:static}}

/* Abschnittskopf mit Schrittnummer — macht die Reihenfolge ohne Erklaerung klar. */
.intake-main .card.pad>h3{display:flex;align-items:center;gap:10px}
.step-no{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:23px;height:23px;border-radius:50%;background:var(--euc-100);color:var(--petrol-d);
  font-size:11.5px;font-weight:700;font-family:var(--display)}
.intake-main .card.pad>h3 .h3-sub{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--muted-2)}

/* Vorschau der Fristen. */
.dl-preview h3{margin-bottom:4px}
.dl-preview .dl-lead{font-size:12px;color:var(--muted);line-height:1.55;margin:0 0 12px}
.dl-list{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.dl-item{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--paper-2)}
.dl-item.is-hard{border-color:#e6c9c6;background:var(--red-bg)}
.dl-item .dl-t{font-size:12.6px;font-weight:600;color:var(--ink-900);line-height:1.35}
.dl-item .dl-d{font-size:12px;color:var(--petrol-d);font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.dl-item .dl-m{font-size:11px;color:var(--muted-2);margin-top:2px;line-height:1.45}
.dl-empty{font-size:12px;color:var(--muted-2);line-height:1.6;border:1px dashed var(--line);
  border-radius:10px;padding:11px 12px;background:var(--paper-2)}
.dl-later{margin-top:14px;font-size:11.5px;color:var(--muted-2);line-height:1.6;
  border-top:1px solid var(--line);padding-top:11px}
.dl-later b{color:var(--ink-soft);font-weight:600}

/* Warnhinweis direkt am Formular (unstimmige Daten) — blockiert nicht, erklaert nur. */
.inline-warn{display:none;font-size:11.5px;color:var(--amber);margin-top:6px;line-height:1.5}
.inline-warn.on{display:block}

/* Aktionsleiste der Fallanlage bleibt am unteren Rand sichtbar. */
.intake-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  position:sticky;bottom:0;z-index:5;padding:12px 0;margin-top:2px;
  background:linear-gradient(to top,var(--canvas) 62%,transparent)}
.intake-actions .hint{font-size:11.5px;color:var(--muted-2)}

/* Mehrzeilige Felder waren bisher unformatiert (Browser-Standard) und sassen dadurch
   sichtbar neben den uebrigen Eingaben. Gleiche Optik wie input/select. */
.form-field textarea{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--paper);font-size:14px;transition:.15s;resize:vertical;line-height:1.5}
.form-field textarea:focus{outline:none;border-color:var(--petrol-l);box-shadow:0 0 0 3px var(--euc-100)}
.form-grid .form-field textarea,.form-row > .form-field textarea{width:100%;min-width:0;box-sizing:border-box}

/* ==========================================================================
   Filterleisten und Zeitfenster-Chips (Fälle, Fristen)
   Ein Filter ist Werkzeug, keine eigene Seite. Die Zusatzfelder lagen bisher als
   eigene Karte (Rahmen, Schatten, Innenabstand) in der Filterkarte — Kasten im
   Kasten, dadurch der eingeengte Eindruck. Hier bekommen sie stattdessen nur
   eine Trennlinie und die volle Breite der Karte.
   ========================================================================== */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end;margin-bottom:16px}
.filter-bar .form-field{flex:0 1 190px;min-width:0}
.filter-bar .form-field.grow{flex:3 1 300px}
.filter-bar .form-field input:not([type=checkbox]):not([type=radio]),.filter-bar .form-field select{width:100%;min-width:0;height:42px}
.filter-bar .filter-check{display:flex;align-items:center;gap:8px;height:42px;font-size:13.5px;
  color:var(--ink-soft);white-space:nowrap}
.filter-bar .filter-actions{display:flex;gap:8px;align-items:center;height:42px;margin-left:auto}

/* Aufklappbereich: keine zweite Karte, nur eine Trennlinie über die volle Breite. */
.filter-bar details.filter-more{flex:1 1 100%;margin:2px 0 0;background:transparent;
  border:none;border-top:1px solid var(--line-2);border-radius:0;box-shadow:none;overflow:visible;
  padding-top:4px}
.filter-bar details.filter-more>summary{padding:11px 0 9px;font-size:13px;color:var(--ink-soft);
  border:none;background:transparent;width:auto;justify-content:flex-start;height:auto}
.filter-bar details.filter-more>summary:hover{background:transparent;color:var(--petrol-d)}
.filter-bar details.filter-more[open]>summary{border-bottom:none}
.filter-bar details.filter-more>summary::after{
  content:"";width:7px;height:7px;margin-left:9px;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.filter-bar details.filter-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.filter-more-body{padding:2px 0 4px}
/* Breitere Spalten als im Standardraster: Datumsfelder und Namenslisten stehen sonst
   in Spalten, die sie nicht ausfüllen können. */
.filter-more-body.form-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px 18px}

/* Zeitfenster als anklickbare Zähler — zugleich Übersicht und Filter. */
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  font-size:12.5px;font-weight:600;box-shadow:var(--shadow-s);transition:.15s var(--ease)}
.chip:hover{border-color:var(--muted-2);background:var(--paper-2)}
.chip .n{font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;line-height:1.6;
  padding:0 7px;border-radius:999px;background:var(--line-2);color:var(--ink-soft)}
.chip.crit .n{background:var(--red-bg);color:var(--red)}
.chip.warn .n{background:var(--amber-bg);color:var(--amber)}
.chip.blue .n{background:var(--blue-bg);color:var(--blue)}
.chip.on{border-color:var(--petrol);background:var(--euc-50);color:var(--petrol-d);box-shadow:none}
.chip.on .n{background:var(--petrol);color:#fff}
.chip.crit.on{border-color:var(--red);background:var(--red-bg);color:var(--red)}
.chip.crit.on .n{background:var(--red);color:#fff}
.chip.warn.on{border-color:var(--amber);background:var(--amber-bg);color:var(--amber)}
.chip.warn.on .n{background:var(--amber);color:#fff}
.chip.blue.on{border-color:var(--blue);background:var(--blue-bg);color:var(--blue)}
.chip.blue.on .n{background:var(--blue);color:#fff}

/* Blätterleiste unter Tabellen ohne eigenes Pager-Widget.
   EIN einheitlicher Server-Pager für alle Listen: links die Info, rechts die
   Schaltflächen „‹ Zurück" / „Weiter ›". Nicht verfügbare Schaltflächen werden
   als .is-disabled gezeigt (gleiche Breite/Position, kein Springen). */
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  margin:14px 2px 0;font-size:12.5px;color:var(--ink-soft)}
.pager .field-hint{margin-top:0}
.pager-info{color:var(--muted)}
.pager-btns{display:flex;gap:8px}
.btn.is-disabled{opacity:.4;pointer-events:none}

/* Einheitlicher Leerzustand INNERHALB einer Tabelle (eine colspan-Zeile).
   Ersetzt die zuvor je Seite duplizierten Inline-Styles. */
.tbl td.tbl-empty{color:var(--muted);text-align:center;padding:20px 16px}

@media(max-width:760px){
  .filter-bar .form-field,.filter-bar .form-field.grow{flex:1 1 100%}
  .filter-bar .filter-actions{margin-left:0;width:100%}
}

/* ---------------------------------------------------------------------------
   Verteilung auf die Betreuer (Cockpit)
   ---------------------------------------------------------------------------
   Der Aufklapper sass oben an den Kacheln (deren margin-bottom betraegt 8px)
   und unten am Spaltenbereich (.dash-cols, margin-top 22px). Das las sich, als
   gehoere er zu den Kacheln. Gleicher Abstand auf beiden Seiten — die Raender
   fallen zusammen, es bleiben 22px.
--------------------------------------------------------------------------- */
details.disclosure.verteilung{margin-top:14px;margin-bottom:0}
/* Kompakter Zusammenklapp-Kopf (eingeklappt ist das die einzige sichtbare Zeile). */
details.disclosure.verteilung>summary{padding:10px 16px}
details.disclosure.verteilung>summary .sm-ic{width:24px;height:24px}

/* Keine Tabelle, sondern Rasterzeilen: nur so laesst sich jede Zeile selbst
   aufklappen (ein <details> darf keine Tabellenzeile umschliessen). Kopf und
   Zeilen teilen dieselbe Rastervorgabe, damit die Spalten fluchten. */
.vt-scroll{overflow-x:auto}
.vt-kopf,.verteilung .vt-zeile>summary{
  display:grid;
  grid-template-columns:minmax(180px,1.6fr) repeat(7,minmax(72px,1fr)) 22px;
  align-items:center;gap:10px;min-width:820px}
.vt-kopf{padding:9px 14px;border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vt-kopf>span+span,.verteilung .vt-zeile .vt-z{text-align:right}

.verteilung .vt-zeile{border-bottom:1px solid var(--line-2)}
.verteilung .vt-zeile:last-child{border-bottom:none}
.verteilung .vt-zeile>summary{list-style:none;cursor:pointer;padding:11px 14px;
  font-family:var(--font);font-size:12.5px;font-weight:400;
  transition:background .15s var(--ease)}
.verteilung .vt-zeile>summary::-webkit-details-marker{display:none}
.verteilung .vt-zeile>summary:hover{background:var(--euc-50)}
.verteilung .vt-zeile>summary:focus-visible{outline:2px solid var(--petrol);outline-offset:-2px}
.verteilung .vt-name{font-weight:600;font-size:12.5px;color:var(--ink-900)}
/* Der Umschlag verschwindet im Raster, damit die Zahlen selbst Rasterfelder
   sind — auf schmalen Schirmen wird er wieder zum Flexcontainer (s.u.). */
.verteilung .vt-zahlen{display:contents}
.verteilung .vt-z{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.verteilung .vt-z.stark{font-weight:600;color:var(--ink-900)}
.verteilung .vt-zeile>summary>.chev{width:16px;height:16px;color:var(--muted);
  transition:transform .18s var(--ease)}
.verteilung .vt-zeile[open]>summary>.chev{transform:rotate(180deg)}
.verteilung .vt-zeile[open]>summary{background:var(--euc-50)}

/* Eine Leiste am linken Rand zeigt, dass der Block zur Zeile darueber gehoert. */
.vt-detail{padding:8px 14px 16px 26px;min-width:820px;display:flex;flex-direction:column;gap:14px;
  border-left:3px solid var(--euc-100);margin-left:14px}
.vt-gruppe h5{margin:0 0 7px;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.vt-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vt-liste>li{display:grid;grid-template-columns:12px 92px minmax(160px,2fr) minmax(120px,1.4fr) minmax(80px,.8fr);
  align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line-2);font-size:12.5px}
.vt-liste>li:first-child{border-top:none}
.vt-datum{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.vt-titel{font-weight:600;color:var(--ink-900);overflow-wrap:anywhere}
.vt-fall{color:var(--petrol);text-decoration:none;overflow-wrap:anywhere}
a.vt-fall:hover{text-decoration:underline}
.vt-zusatz{font-size:11.5px;color:var(--muted);text-align:right}
.vt-mehr{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.vt-leer{margin:0;font-size:12.5px;color:var(--muted)}

/* Schmale Schirme: kein Querscrollen, sondern die Zahlen unter den Namen, jede
   mit ihrer Beschriftung. Sieben stumme Zahlen nebeneinander waeren auf dem
   Telefon nicht lesbar, und Weglassen ist keine Loesung — es sind Zahlen. */
@media(max-width:900px){
  .vt-scroll{overflow-x:visible}
  .vt-kopf{display:none}
  .verteilung .vt-zeile>summary{grid-template-columns:1fr 22px;min-width:0;row-gap:8px}
  .verteilung .vt-name{grid-column:1;grid-row:1}
  /* Der Pfeil gehoert neben den Namen, nicht unter die Zahlen — sonst steht das
     Bedienelement am Ende einer Zeile, die es aufklappt. */
  .verteilung .vt-zeile>summary>.chev{grid-column:2;grid-row:1}
  .verteilung .vt-zahlen{display:flex;flex-wrap:wrap;gap:6px 14px;grid-column:1/-1;grid-row:2}
  .verteilung .vt-zeile .vt-z{display:inline-flex;align-items:center;gap:5px;text-align:left;
    font-size:12px;background:var(--paper-2);border:1px solid var(--line-2);
    border-radius:999px;padding:2px 9px}
  .verteilung .vt-z::before{content:attr(data-l);color:var(--muted);font-size:10.5px;
    letter-spacing:.03em;text-transform:uppercase;font-weight:700}
  .vt-detail{min-width:0;padding-left:14px;margin-left:8px}
  .vt-liste>li{grid-template-columns:12px 1fr;row-gap:2px}
  .vt-liste>li>.vt-titel,.vt-liste>li>.vt-fall,.vt-liste>li>.vt-zusatz{grid-column:2}
  .vt-zusatz{text-align:left}
}

/* =====================================================================
   Kontrollkästchen im Feldraster — gleiche Gestalt wie ein Eingabefeld
   ---------------------------------------------------------------------
   Im Raster stand das Kästchen bisher nackt zwischen umrandeten Feldern:
   keine Beschriftungszeile darüber, kein Rahmen, keine gemeinsame Höhe.
   Die Zeile sah aus, als fehle dort ein Feld. Ein Kontrollkästchen ist
   aber ein Bedienelement wie jedes andere und bekommt deshalb dieselbe
   Grundfläche — 42px hoch, gleicher Rahmen, gleiche Ecken, gleiche
   Fokusspur. Der Text bleibt DANEBEN (nicht darüber): das Kästchen
   beschriftet sich selbst, eine zweite Zeile darüber wäre die Beschriftung
   der Beschriftung.

   Die leere Zeile über dem Kasten (::before) ersetzt die fehlende
   Beschriftung und richtet den Kasten damit auf dieselbe Grundlinie aus
   wie die Felder daneben — 17px Mindesthöhe, exakt die Regel für
   .form-grid .form-field label, plus die 5px Spaltenlücke.
   ===================================================================== */
.form-grid .form-field.form-check{justify-content:flex-start}
.form-grid .form-field.form-check::before{content:"";display:block;min-height:17px}
/* min-height, nicht height: eine lange Beschriftung („Vorsorgevollmacht liegt
   vor") soll umbrechen duerfen statt abgeschnitten zu werden. Bei einer Zeile —
   dem Normalfall — ist der Kasten exakt so hoch wie ein Eingabefeld; das Raster
   richtet oben aus, ein hoeherer Kasten zieht die Nachbarn also nicht mit. */
/* 43px ist EXAKT die Hoehe eines Eingabefelds daneben: 21px Zeile (14px bei
   line-height 1.5) + 2x10px Innenabstand + 2x1px Rahmen. Vorher 42 — ein Punkt
   Unterschied, den man nicht benennen, aber sehen kann, sobald Feld und Kasten
   nebeneinander stehen. */
.form-grid .form-field.form-check .check-inline{
  min-height:43px;box-sizing:border-box;width:100%;padding:6px 12px;margin:0;
  border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);
  font-size:13.5px;transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}
.form-grid .form-field.form-check .check-inline:hover{border-color:var(--muted-2)}
.form-grid .form-field.form-check .check-inline:focus-within{
  border-color:var(--petrol-l);box-shadow:0 0 0 3px var(--euc-100)}
/* Gesetzt sieht aus wie ein gefülltes Feld — dieselbe Farbsprache wie überall. */
.form-grid .form-field.form-check .check-inline:has(input:checked){
  border-color:var(--petrol-l);background:var(--euc-50)}
.form-grid .form-field.form-check .check-inline span{line-height:1.35}
/* Auf Touch bleibt die Hoehe gleich: die Eingabefelder daneben wachsen dort auch
   nicht, und „genau so hoch wie die Felder daneben" ist der Punkt. Das Kaestchen
   selbst ist auf Touch 20 statt 16 Punkte (Grundregel oben) — das reicht als
   groesseres Ziel, zumal die ganze Zeile schaltet. */
@media(pointer:coarse){
  .form-grid .form-field.form-check .check-inline{padding:8px 12px}
}

/* =====================================================================
   Frist erledigen — die Erledigung als Vorgang, nicht als drei Steuerelemente
   ---------------------------------------------------------------------
   Vorher standen in der Spalte „Erledigung" eine namenlose Auswahlliste,
   ein namenloses Datumsfeld und ein Knopf nebeneinander, alle mit
   font-size:12px;padding:2px 4px direkt im Markup. Wer die Zeile zum
   ersten Mal sah, musste raten, was das Datum bedeutet (Fristende?
   Erledigungsdatum?) — und auf schmalen Schirmen brach die Reihe
   unkontrolliert um.

   Jetzt: ein umrissener Block mit Überschrift, beschrifteten Feldern und
   einem Knopf, der wie ein Abschluss aussieht. Die erledigte Frist bekommt
   dieselbe Fläche in Grün — was sie belegt (Datum, Nachweis, Person,
   Vermerk, Freigabe), steht als Liste darin.
   ===================================================================== */
.frist-erledigung{border:1px solid var(--line);border-radius:12px;background:var(--paper-2);padding:10px 11px}
.frist-erledigung > .fe-titel{display:flex;align-items:center;gap:6px;margin-bottom:8px;
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.frist-erledigung > .fe-titel svg{width:13px;height:13px;flex:none;color:var(--petrol)}
.fe-form{display:grid;grid-template-columns:minmax(140px,1.4fr) minmax(118px,.9fr) auto;gap:8px;align-items:end}
.fe-feld{display:flex;flex-direction:column;gap:3px;min-width:0}
.fe-feld > label{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.fe-form select,.fe-form input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0;height:32px;padding:0 9px;font-size:12.5px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.fe-form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6E7A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.fe-form select:focus,.fe-form input:not([type=checkbox]):not([type=radio]):focus{outline:none;border-color:var(--petrol-l);box-shadow:0 0 0 3px var(--euc-100)}
.fe-form > .btn{height:32px;padding:0 14px;white-space:nowrap}
/* In der schmalen Tabellenspalte untereinander statt gequetscht nebeneinander. */
@media(max-width:1200px){
  .fe-form{grid-template-columns:1fr}
  .fe-form > .btn{width:100%}
}
/* Vier-Augen-Freigabe und Fristverlängerung gehören sichtbar zur Erledigung,
   stehen aber davor bzw. dahinter — mit Abstand, nicht als vierte Spalte. */
.frist-vieraugen{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.frist-vieraugen .hinweis{font-size:11.5px;color:var(--ink-soft)}
.frist-verlaengerung{margin-top:8px}

/* Die erledigte Frist: ein Beleg, kein Datum in Grau. */
.frist-erledigt{border:1px solid #cfe6de;border-left:3px solid var(--petrol);border-radius:10px;
  background:var(--euc-50);padding:8px 11px;font-size:12px;color:var(--ink-soft);line-height:1.55}
.frist-erledigt .fer-kopf{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:2px}
.frist-erledigt .fer-kopf svg{width:14px;height:14px;flex:none;color:var(--petrol)}
.frist-erledigt .fer-datum{font-size:13px;font-weight:700;color:var(--ink-900);font-variant-numeric:tabular-nums}
.frist-erledigt .fer-zitat{font-style:italic}
.frist-erledigt .fer-link{display:inline-flex;align-items:center;gap:5px;margin-top:3px;
  font-size:11.5px;font-weight:600;color:var(--petrol-d)}
.frist-erledigt .fer-link:hover{text-decoration:underline}
.frist-erledigt .fer-link svg{width:12px;height:12px}
.frist-erledigt .fer-fein{font-size:11.5px;color:var(--muted)}

/* =====================================================================
   Verlauf der Fallakte — was ist wann in dieser Akte passiert
   ---------------------------------------------------------------------
   Ein Zeitstrahl, kein Tabellenauszug: links die Zeit, in der Mitte der
   Punkt (Farbe = angelegt / geändert / gelöscht), rechts der Vorgang im
   Klartext. Tage werden zusammengefasst — ein Arbeitstag ist die Einheit,
   in der ein Mensch sich erinnert („letzten Dienstag habe ich …").
   ===================================================================== */
.akte-verlauf{position:relative;margin:0;padding:0;list-style:none}
.akte-verlauf .av-tag{display:flex;align-items:center;gap:10px;margin:16px 0 8px;
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-2)}
.akte-verlauf .av-tag::after{content:"";flex:1;height:1px;background:var(--line-2)}
.akte-verlauf .av-tag:first-child{margin-top:4px}
.av-zeile{display:grid;grid-template-columns:58px 16px 1fr;gap:0 10px;align-items:start;
  padding:7px 0;position:relative}
.av-zeit{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px;white-space:nowrap}
/* Die Linie verbindet die Punkte; am letzten Eintrag des Tages hört sie auf. */
.av-punkt{position:relative;display:flex;justify-content:center;padding-top:5px}
.av-punkt::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted-2);
  box-shadow:0 0 0 3px var(--paper);z-index:1}
.av-zeile:not(:last-child) .av-punkt::after{content:"";position:absolute;top:14px;bottom:-14px;
  width:1px;background:var(--line);left:50%}
.av-zeile.ist-ok    .av-punkt::before{background:var(--petrol)}
.av-zeile.ist-blue  .av-punkt::before{background:var(--blue)}
.av-zeile.ist-crit  .av-punkt::before{background:var(--red)}
.av-zeile.ist-warn  .av-punkt::before{background:var(--amber)}
.av-text{min-width:0;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.av-text b{color:var(--ink-900);font-weight:600}
.av-was{overflow-wrap:anywhere}
.av-fein{font-size:11.5px;color:var(--muted);margin-top:1px}
.av-fein .av-wer{color:var(--ink-soft);font-weight:500}
.av-felder{font-size:11.5px;color:var(--muted);margin-top:1px;overflow-wrap:anywhere}
.av-verlauf-link{font-size:11.5px;color:var(--petrol-d);font-weight:600}
.av-verlauf-link:hover{text-decoration:underline}
@media(max-width:560px){
  .av-zeile{grid-template-columns:16px 1fr;gap:0 9px}
  .av-zeit{grid-column:2;order:2;font-size:11px;margin-bottom:1px}
  .av-punkt{grid-column:1;grid-row:1 / span 2}
  .av-text{grid-column:2}
}

/* =====================================================================
   Aktensuche — die Akte selbst durchsuchen
   ---------------------------------------------------------------------
   Rund 75 Bereiche auf einer Seite: die Sprungliste beantwortet „wo ist
   Bereich X", nicht „wo steht dieser Name / diese IBAN / dieses Wort".
   Dafür sitzt in der Sprungliste ein Suchfeld, das die gerenderte Akte
   durchsucht und die Treffer gruppiert anbietet — mit Tastatur bedienbar
   (Strg+K oder „/", Pfeiltasten, Eingabe).
   ===================================================================== */
.akte-suche{position:sticky;top:0;z-index:2;background:var(--paper);padding:2px 4px 8px;
  margin:-2px -4px 4px;border-bottom:1px solid var(--line-2)}
.as-feld{position:relative;display:flex;align-items:center}
.as-feld > svg{position:absolute;left:9px;width:14px;height:14px;color:var(--muted-2);pointer-events:none}
.as-feld input{width:100%;min-width:0;height:32px;padding:0 26px 0 29px;font-size:12.5px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--ink);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.as-feld input::placeholder{color:var(--muted-2)}
.as-feld input:focus{outline:none;background:var(--paper);border-color:var(--petrol-l);
  box-shadow:0 0 0 3px var(--euc-100)}
.as-loeschen{position:absolute;right:5px;display:none;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:6px;color:var(--muted)}
.as-loeschen:hover{background:var(--line-2);color:var(--ink-900)}
.as-loeschen svg{width:12px;height:12px}
.akte-suche.hat-text .as-loeschen{display:flex}
.as-kurz{margin-top:5px;font-size:10.5px;color:var(--muted-2);text-align:right}
.as-kurz kbd{font-family:var(--mono);font-size:10px;background:var(--line-2);border-radius:4px;padding:1px 4px}
.as-treffer{margin-top:7px;max-height:min(52vh,420px);overflow:auto;border-top:1px solid var(--line-2);padding-top:6px}
.as-kopf{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);padding:6px 8px 3px}
.as-treffer button{display:block;width:100%;text-align:left;padding:6px 9px;border-radius:7px;
  font-size:12px;color:var(--ink-soft);line-height:1.45}
.as-treffer button:hover{background:var(--paper-2);color:var(--ink-900)}
.as-treffer button.aktiv{background:var(--euc-100);color:var(--petrol-d)}
.as-treffer button .as-wo{display:block;font-size:10.5px;color:var(--muted-2)}
.as-treffer button mark{background:#FCEBA6;color:inherit;border-radius:3px;padding:0 1px}
.as-leer{padding:8px 9px;font-size:11.5px;color:var(--muted)}
/* Der gefundene Eintrag blinkt kurz auf — sonst springt die Seite irgendwohin
   und man sucht in der Zieltabelle von Neuem. */
@keyframes cpFundBlink{0%{background:#FCEBA6}70%{background:#FCEBA6}100%{background:transparent}}
.cp-fund{animation:cpFundBlink 1.8s var(--ease)}
.cp-fund > td{background:transparent}
@media(prefers-reduced-motion:reduce){.cp-fund{animation:none;outline:2px solid var(--petrol);outline-offset:2px}}
/* Als waagerechter Streifen (Telefon) steht das Suchfeld vorne, in fester
   Breite — im Fluss der Sprunglinks würde es sonst auf 40px zusammenfallen.
   Auf dem Tablet steht die Leiste seitlich; dort gilt wieder die Grundform. */
@media(max-width:743.98px){
  .akte-suche{position:static;flex:none;width:210px;margin:0 6px 0 0;padding:0;border-bottom:none;background:transparent}
  .akte-suche .as-kurz{display:none}
  /* position:fixed und nicht absolute: der Streifen hat overflow-x:auto und
     schneidet damit jedes absolut gesetzte Kind ab — die Trefferliste waere
     genau an der Stelle abgeschnitten, an der sie gebraucht wird. Der Streifen
     klebt bei top:60px und ist rund 50px hoch. */
  .akte-suche .as-treffer{position:fixed;top:116px;left:12px;right:12px;width:auto;max-width:none;
    max-height:min(60vh,420px);
    background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-l);
    padding:6px;margin:0;z-index:60}
}

/* =====================================================================
   TELEFON — was auf 360 Punkten Breite anders sein muss
   ---------------------------------------------------------------------
   Bisher war die Antwort auf „zu schmal" fast ueberall `overflow-x:auto`:
   die Tabelle bleibt eine Tabelle und man wischt sie seitlich durch. Das
   ist bei zwei, drei Spalten in Ordnung und bei neun nicht mehr — die
   Klientenliste hat neun, und wer den Namen sieht, sieht den Betreuer
   nicht, und umgekehrt. Auf dem Telefon wird aus jeder Zeile deshalb eine
   Karte: Beschriftung links, Wert rechts, untereinander. Die Beschriftung
   kommt aus data-label am <td>; fehlt sie, bleibt die Zelle einfach ohne.

   Angewendet wird das nur auf Tabellen mit der Klasse `stapel`. Eine
   Rechte-Matrix oder eine schmale Zwei-Spalten-Tabelle bleibt unberuehrt.
   ===================================================================== */
@media(max-width:720px){
  table.tbl.stapel,
  table.tbl.stapel tbody,
  table.tbl.stapel tr,
  table.tbl.stapel td{display:block;width:100%}
  /* Die Regel `@media(max-width:760px){.tbl{min-width:620px}}` weiter oben ist fuer
     Tabellen gedacht, die Tabellen BLEIBEN und in ihrer Karte seitlich gewischt werden.
     Auf eine gestapelte Tabelle angewandt war sie der Grund, warum sich die GANZE Seite
     seitlich schieben liess: die Karte gibt ihren eigenen Bildlauf ab (`overflow:visible`
     weiter unten), also lag die Mindestbreite von 620 Punkten direkt im Seitenfluss — auf
     einem 390 Punkte breiten Telefon 230 Punkte zu viel. Man sah die Werte rechts und die
     Beschriftungen nicht mehr.

     `min-width:0` auf allen Ebenen: die aeussere Tabelle traegt die Mindestbreite, die
     Zeilen und Zellen sind Flexcontainer und wuerden ihren Inhalt sonst ebenfalls nicht
     unter dessen Wunschbreite druecken (eine lange Fallnummer oder ein Aktenzeichen ohne
     Leerzeichen reicht dafuer). */
  table.tbl.stapel,
  table.tbl.stapel tbody,
  table.tbl.stapel tr,
  table.tbl.stapel td{min-width:0;max-width:100%}
  /* Ein langes Wort ohne Trennstelle — Aktenzeichen, IBAN, Dateiname, E-Mail — waere
     sonst selbst ein zu breites Kind. Umbrechen statt ueberlaufen. */
  table.tbl.stapel td{overflow-wrap:anywhere}
  table.tbl.stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Flex statt Block, damit die Reihenfolge in der Karte nicht an der
     Spaltenreihenfolge der Tabelle klebt: die Ueberschrift steht immer oben und
     die Schaltflaeche immer unten, egal an welcher Stelle die Spalte im <tr>
     steht. Im Dashboard ist die dritte Spalte der Titel und die erste die
     Ampel — untereinander gelesen waere das eine Karte, die mit einem Punkt
     beginnt. */
  table.tbl.stapel tr{
    display:flex;flex-direction:column;
    border:1px solid var(--line-2);border-radius:12px;background:var(--paper);
    padding:4px 2px;margin-bottom:10px;box-shadow:var(--shadow-s)}
  table.tbl.stapel td{order:1}
  table.tbl.stapel td.zeile-kopf{order:0}
  table.tbl.stapel td.zeile-aktion{order:2}
  table.tbl.stapel tr:last-child{margin-bottom:0}
  table.tbl.stapel tbody tr:hover{background:var(--paper)}
  table.tbl.stapel td{
    border-bottom:1px solid var(--line-2);padding:8px 12px;
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    text-align:right;font-size:13px;min-height:0}
  table.tbl.stapel td:last-child{border-bottom:none}
  table.tbl.stapel td::before{
    content:attr(data-label);flex:0 0 auto;max-width:45%;
    font-family:var(--display);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted-2);font-weight:600;text-align:left}
  table.tbl.stapel td[data-label=""]::before,
  table.tbl.stapel td:not([data-label])::before{content:none}
  /* Die erste Zelle ist die Ueberschrift der Karte — sie bekommt keine
     Beschriftung, sondern steht gross und links. */
  table.tbl.stapel td.zeile-kopf{
    display:block;text-align:left;font-size:15px;font-weight:600;color:var(--ink-900);
    padding:11px 12px 8px;line-height:1.3}
  table.tbl.stapel td.zeile-kopf::before{content:none}
  /* Aktionen unten, in Fingergroesse. Die Zelle ist selbst ein umbrechender
     Flexcontainer: eine einzelne Schaltflaeche nimmt die ganze Breite, zwei bis
     drei teilen sich die Zeile und brechen um, wenn sie nicht mehr passen.
     `!important` bei den Formularen ist noetig, weil die Ansichten dort ein
     inline `style="display:inline"` mitbringen — inline schlaegt sonst alles. */
  /* Zellen mit komplexem Inhalt (ein ganzes Formular, eine Karte) duerfen nicht in die
     schmale rechte Haelfte der Label|Wert-Zeile gequetscht werden — sie stehen als Block:
     Beschriftung oben, Inhalt darunter ueber die volle Breite. Betrifft u. a. die
     Fristen-Erledigung (Formular + Fristverlaengerung). */
  table.tbl.stapel td.zeile-block{display:block;text-align:left;padding:10px 12px}
  table.tbl.stapel td.zeile-block::before{
    content:attr(data-label);display:block;margin-bottom:7px;
    font-family:var(--display);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted-2);font-weight:600}
  table.tbl.stapel td.zeile-block > *{max-width:100%}
  /* Das Erledigen-Formular und die Fristverlaengerung fuellen die Breite und brechen um. */
  table.tbl.stapel td.zeile-block .frist-erledigung,
  table.tbl.stapel td.zeile-block .frist-verlaengerung,
  table.tbl.stapel td.zeile-block details.disclosure{width:100%;margin-top:8px}
  table.tbl.stapel td.zeile-block .fe-form{grid-template-columns:1fr;gap:10px}
  table.tbl.stapel td.zeile-block .fe-form > .btn{width:100%;min-height:42px}
  table.tbl.stapel td.zeile-block .frist-vieraugen{flex-wrap:wrap}

  table.tbl.stapel td.zeile-aktion{display:flex;flex-wrap:wrap;gap:8px;
    text-align:left;padding:10px 12px 12px}
  table.tbl.stapel td.zeile-aktion::before{content:none}
  table.tbl.stapel td.zeile-aktion > .btn{flex:1 1 100%;min-height:42px}
  table.tbl.stapel td.zeile-aktion .row-actions{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
  table.tbl.stapel td.zeile-aktion .row-actions > .btn{flex:1 1 130px;min-height:42px}
  table.tbl.stapel td.zeile-aktion .row-actions > details.menu{flex:0 0 auto}
  table.tbl.stapel td.zeile-aktion form{display:flex!important;flex:1 1 140px;
    flex-wrap:wrap;gap:8px;margin:0}
  table.tbl.stapel td.zeile-aktion form .btn{flex:1 1 auto;min-height:42px}
  /* ... ABER NICHT die Formulare im Aufklappblatt. Sie stehen als Nachfahren in
     derselben Zelle und wurden von der Regel darueber miterwischt: `flex:1 1 140px`
     wirkt im Blatt (einer Flex-SPALTE) nicht als Breite, sondern als 140 Punkte
     HOEHE. Der Eintrag „Sperren" sass dadurch mitten in einem handtellergrossen
     leeren Feld — auf dem Telefon sah das Menue aus, als fehle die Haelfte.
     In der Aktionsleiste selbst ist die Angabe richtig; hier wird sie
     zurueckgenommen, damit ein Menueeintrag wieder so hoch ist wie sein Text. */
  table.tbl.stapel td.zeile-aktion .menu-pop form{
    display:block!important;flex:0 0 auto!important;width:100%;margin:0}
  /* Ein Auswahlfeld im Formular (Posteingang: „Akte waehlen") bekommt eine eigene
     Zeile — 280 Punkte neben einem Knopf gehen sich auf 320 Punkten nicht aus.
     16px Schriftgroesse, sonst zoomt iOS Safari beim Antippen die Seite. */
  table.tbl.stapel td.zeile-aktion form select,
  table.tbl.stapel td.zeile-aktion form input:not([type=hidden]){
    flex:1 1 100%;max-width:none!important;min-height:42px;font-size:16px}
  /* Bearbeiten und Loeschen der Bogenabschnitte sind Symbolknoepfe. Sie duerfen
     NICHT auf Zeilenbreite wachsen: ein bildschirmbreiter Papierkorb neben einem
     bildschirmbreiten Stift ist keine Aktionsleiste, sondern eine Falle. Sie
     bleiben quadratisch, aber in Fingergroesse (44 Punkte, Apple-Richtwert). */
  table.tbl.stapel td.zeile-aktion form.rec-del-form,
  table.tbl.stapel td.zeile-aktion details.rec-edit:has(> summary.rec-edit-trigger){flex:0 0 auto}
  /* .rec-act = Ansehen/Herunterladen eines Dokuments — ebenfalls Symbolknoepfe. Ohne sie
     in dieser Liste zog `.row-actions > .btn{flex:1 1 130px}` sie auf 130 Punkte
     auseinander, und ein Auge und ein Pfeil standen als zwei breite leere Flaechen
     nebeneinander. */
  table.tbl.stapel td.zeile-aktion form.rec-del-form .btn,
  table.tbl.stapel td.zeile-aktion .rec-edit-trigger,
  table.tbl.stapel td.zeile-aktion .row-actions > .rec-act{
    flex:0 0 auto;width:44px;min-width:44px;min-height:44px;padding:0}
  /* Ein Bearbeiten-Aufklapper mit BESCHRIFTUNG statt Symbol (Einrichtungen: „Bearbeiten")
     ist kein Symbolknopf und darf deshalb nicht auf 44 Punkte schrumpfen. Er teilt sich
     die Zeile mit „Entfernen" wie zwei gleichwertige Knoepfe. Vorher blieb er als
     schmaler Schnipsel neben einem bildschirmbreiten roten Knopf stehen — die
     zerstoererische Aktion war die groessere von beiden. */
  table.tbl.stapel td.zeile-aktion details.rec-edit:not(:has(> summary.rec-edit-trigger)){
    flex:1 1 130px}
  table.tbl.stapel td.zeile-aktion details.rec-edit:not(:has(> summary.rec-edit-trigger)) > summary.btn{
    width:100%;justify-content:center;min-height:42px}
  /* Eine Aktionszelle ohne Inhalt (fehlende Rechte) soll keine leere Flaeche
     mit Rahmen hinterlassen. */
  table.tbl.stapel td.zeile-aktion:empty{display:none}
  /* Eine Zelle ohne Inhalt ist auf dem Telefon eine leere Zeile mit
     Beschriftung — das ist Laerm. Sie wird ausgeblendet. */
  table.tbl.stapel td.leer{display:none}
  /* Die Karte scrollt nicht mehr seitlich, also darf der Rahmen wieder zu. */
  .table-card:has(table.tbl.stapel){overflow:visible;border:none;background:transparent;box-shadow:none;padding:0}

  /* Eine Zeile ueber die volle Breite, die zur Zeile DARUEBER gehoert (Korrespondenz:
     „Als E-Mail senden"). Gestapelt waere sie eine zweite, gleich aussehende Karte ohne
     Ueberschrift — man sieht ihr dann nicht mehr an, auf welchen Eintrag sie sich
     bezieht. Sie rueckt deshalb an die Karte darueber heran und traegt keinen eigenen
     Rahmen oben. */
  /* `tr + tr`: nur eine Zeile, der eine ANDERE vorausgeht, gehoert zu dieser. Eine
     alleinstehende Zeile ueber die volle Breite ist etwas anderes — das ist die Meldung
     „Keine Standorte." einer leeren Liste, und die soll ihre eigene Karte behalten. */
  table.tbl.stapel tr + tr:has(> td[colspan]){
    margin-top:-10px;border-top-left-radius:0;border-top-right-radius:0;
    border-top:0;box-shadow:none}
  table.tbl.stapel td[colspan]{display:block;border-bottom:0}
  table.tbl.stapel td[colspan]::before{content:none}
  /* Die Zellen einer gestapelten Tabelle sind rechtsbuendig (Beschriftung links, Wert
     rechts). Eine angehaengte Zeile traegt keinen Wert, sondern einen Abschnitt — der
     beginnt links. */
  table.tbl.stapel tr + tr:has(> td[colspan]) > td[colspan]{text-align:left}
}

/* =====================================================================
   Aufklappmenues in der Kopfzeile (Glocke, Zahnrad, Zeilenmenues)
   ---------------------------------------------------------------------
   `position:absolute; right:0` misst vom Knopf aus. Auf dem Telefon steht
   die Glocke ungefaehr in der Mitte der Kopfzeile — eine 340 Punkte breite
   Liste ragt von dort aus links UND rechts aus dem Bild. Genau das war zu
   sehen: die Benachrichtigungen liefen weit ueber den Rand.

   Auf schmalen Schirmen wird die Liste deshalb ein Blatt am unteren Rand:
   feste Position, volle Breite minus Rand, und die Inline-Breite aus der
   Ansicht (width:340px) wird ueberschrieben. Das ist auch mit dem Daumen
   erreichbar, was ein Menue oben rechts nicht ist.
   ===================================================================== */
@media(max-width:720px){
  details.menu[open]{position:static}
  details.menu[open] > summary{position:relative;z-index:1201}
  details.menu .menu-pop{
    position:fixed!important;left:10px!important;right:10px!important;
    top:auto!important;bottom:10px!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    max-height:min(70vh,70dvh)!important;overflow:auto;overscroll-behavior:contain;
    border-radius:18px;box-shadow:var(--shadow-l);padding:6px;z-index:1200;
    /* Auf Geraeten mit Gestenbalken (iPhone ohne Knopf) liegt der unterste
       Eintrag sonst unter dem Balken und laesst sich nur schwer treffen. */
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
    gap:2px;
    animation:cp-blatt .18s var(--ease)}
  @keyframes cp-blatt{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
  /* Die Kopfzeile traegt den Namen der Zeile. Ohne sie ist das Blatt am unteren
     Bildrand vom Inhalt geloest: es steht weit weg von der Karte, auf die es sich
     bezieht, und bei zwei gleichen Menues sieht man nicht, welches man geoeffnet hat. */
  details.menu .menu-pop .m-kopf{
    display:flex;align-items:center;gap:8px;
    padding:11px 12px 10px;margin:0 0 2px;border-bottom:1px solid var(--line-2);
    font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--ink-900);
    line-height:1.25}
  details.menu .menu-pop .m-kopf .m-kopf-sub{
    font-family:var(--font);font-size:11.5px;font-weight:400;color:var(--muted);
    display:block;margin-top:1px}
  details.menu .menu-pop a,details.menu .menu-pop button{min-height:46px;font-size:14px;padding:8px 12px;border-radius:10px}
  details.menu .menu-pop a svg,details.menu .menu-pop button svg{width:17px;height:17px}
  /* Ein Fingertipp hat kein :hover — die Rueckmeldung muss vom Druck kommen. */
  details.menu .menu-pop a:active,details.menu .menu-pop button:active{background:var(--paper-2)}
  details.menu .menu-pop .danger:active{background:var(--red-bg)}
  @media(prefers-reduced-motion:reduce){details.menu .menu-pop{animation:none}}
  /* Der Rest der Seite bekommt einen Schleier, sonst schwebt das Blatt
     ohne Bezug ueber dem Inhalt. ::backdrop gibt es fuer <details> nicht,
     also haengt er am Menue selbst. */
  /* pointer-events:none ist Absicht: der Schleier soll den Blick daempfen, aber
     keinen Klick abfangen. Sonst waere sein Klickziel das <details> selbst — die
     Schliess-Logik in app.js haelt das fuer „innerhalb des Menues" und das Blatt
     liesse sich durch Tippen daneben nicht mehr schliessen. So geht der Klick an
     den Inhalt darunter und schliesst wie ueberall sonst. */
  details.menu[open]::before{
    content:"";position:fixed;inset:0;background:rgba(14,26,34,.42);z-index:1199;
    pointer-events:none}
}

/* =====================================================================
   Filterleiste und Blaetterung auf dem Telefon
   ===================================================================== */
@media(max-width:720px){
  .filter-bar{gap:10px}
  .filter-bar .form-field{width:100%}
  .filter-bar .form-field input,.filter-bar .form-field select{width:100%;min-width:0}
  .filter-actions{display:flex;gap:8px;width:100%}
  .filter-actions > .btn{flex:1 1 0;min-height:42px}
  .pager{flex-direction:column;align-items:stretch;gap:10px;text-align:center}
  .pager .btn{flex:1 1 0;min-height:42px}
  /* Kennzahlen: zwei nebeneinander statt einer pro Zeile. Acht Kacheln
     untereinander sind acht Bildschirmhoehen, bevor der Inhalt anfaengt. */
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:13px 13px}
  .kpi .num{font-size:23px;margin-top:8px}
  .kpi .sub{font-size:10.5px}
  .kpi .k-top{font-size:11px;gap:6px}
  .kpi .k-top > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kpi .k-ic{width:26px;height:26px;flex:none}
  /* Eine Kachel, deren Zahl ein Datum ist ("24.08. 08:29"), passt nicht in
     eine halbe Zeile — sie nimmt die ganze. */
  .kpi.breit{grid-column:1 / -1}
}
@media(max-width:420px){
  .kpi-grid{grid-template-columns:1fr}
}

/* =====================================================================
   Nichts laeuft seitlich aus dem Bild
   ---------------------------------------------------------------------
   Ein einziges Element mit fester Breite (eine Kachel, ein Codeblock, ein
   langes Aktenzeichen ohne Trennmoeglichkeit) macht die GANZE Seite
   waagerecht scrollbar — und dann wackelt beim Lesen alles. Der Body hat
   bereits overflow-x:hidden; das versteckt die Ursache aber nur. Deshalb
   hier die haeufigsten Ursachen direkt entschaerft.
   ===================================================================== */
@media(max-width:860px){
  .content, .content > *{min-width:0}
  pre,code,.mono{overflow-wrap:anywhere}
  .page-intro{gap:12px}
  .page-intro h2{font-size:20px}
  .page-intro p{font-size:13px}
  .section-h{flex-wrap:wrap;gap:10px}
  .section-h h3{font-size:15px}
  /* Lange Werte in Karten (IBAN, Aktenzeichen, E-Mail) duerfen umbrechen. */
  .kv > div > b,.kvrow > b{overflow-wrap:anywhere;text-align:right}
  .flash{align-items:flex-start}
  .flash svg{margin-top:2px}
}

/* =====================================================================
   Kopfzeile auf dem Telefon
   ---------------------------------------------------------------------
   In der Kopfzeile stehen sieben Bedienelemente: Menue, Titel, Hilfe,
   Postfach, Glocke, Standort, Mandant. Auf 360 Punkten ist das eine
   Zeile fuer 550 Punkte Inhalt — sie lief aus dem Bild, und mit ihr die
   Glocke, die man dort am ehesten braucht.

   Die Rangfolge, wenn der Platz knapp wird:
     1. Menue und Titel  — ohne die weiss niemand, wo er ist
     2. Postfach, Glocke — die beiden Zaehler, wegen derer man hier hinsieht
     3. Standort         — nur noch als Symbol mit einer schmalen Auswahl
     4. Hilfe            — erreichbar bleibt sie ueber die Tour im Cockpit
   Der Mandant ist bereits ab 860 Punkten ausgeblendet (.loc), und ein
   Mandantenwechsel ist keine Handybedienung.
   ===================================================================== */
@media(max-width:720px){
  .topbar{padding:9px 12px;gap:8px;min-height:56px}
  .crumb small{display:none}
  .crumb b,.crumb h1{font-size:15px}
  .topbar-ctx{gap:6px}
  .cp-help-btn{display:none}
  .loc-switch{padding:4px 7px;gap:5px}
  .loc-switch select{max-width:76px;font-size:12px}
  .menu-btn{width:36px;height:36px}
  details.menu>summary,.cp-bell{min-width:36px;min-height:36px}
  .cp-suche-btn{width:36px;height:36px}
}
/* Tablets mit Touch (breiter als 860 px): dieselbe 16-px-Regel gegen das Hineinzoomen. */
@media(pointer:coarse) and (min-width:861px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select,[contenteditable="true"],[contenteditable=""]{font-size:max(16px,1em)!important}
}
@media(max-width:600px){
  /* Telefon: der Titel braucht Platz (vorher „E-…" auf breiten iPhones). Der Standortwechsel
     weicht schon hier — er steht auf jeder Listenseite als Filter —, und die Lupe oben ist
     doppelt: die untere Leiste hat „Suche". */
  .loc-switch{display:none}
  .topbar .cp-suche-btn{display:none}
  .crumb{flex:1 1 auto;min-width:72px}
  .topbar-ctx{flex:none}
}
@media(max-width:400px){
  /* Ganz schmal: der Standortwechsel weicht. Er steht dann weiterhin auf
     jeder Listenseite als Filter zur Verfuegung — die Kopfzeile ist nicht
     der einzige Weg dorthin. */
  .loc-switch{display:none}
  .tenant-switch{display:none}
}

/* =====================================================================
   Die Fallakte auf dem Telefon
   ---------------------------------------------------------------------
   Rund 75 Abschnitte auf einer Seite. Der Streifen mit der Sprungliste
   traegt bereits das Suchfeld (210 Punkte) — auf 360 Punkten bleiben fuer
   die Sprungmarken 140. Das ist zu wenig, um zu erkennen, dass es
   ueberhaupt eine Gliederung gibt.

   Deshalb hier: das Suchfeld bekommt eine eigene Zeile ueber dem
   Streifen. Es ist die haeufigere Frage („wo steht dieser Name"), und es
   darf die seltenere („welche Abschnitte gibt es") nicht verdecken.
   ===================================================================== */
@media(max-width:620px){
  .case-toc{flex-wrap:wrap;row-gap:6px}
  .akte-suche{width:100%;flex:1 1 100%;margin:0 0 2px;order:-1}
  .case-toc-links{flex:1 1 100%}
  .akte-suche .as-feld input{height:40px;font-size:16px;padding-left:32px}
  .akte-suche .as-feld > svg{left:11px}
  /* Kopfzeile (56px) + Suchzeile (~46px) + Streifen (~40px) verdecken sonst
     den Anfang des angesprungenen Abschnitts. */
  [id^="sec-"]{scroll-margin-top:156px}
  .akte-suche .as-treffer{top:150px}
}

/* Karten und Aufklapper der Fallakte: auf dem Telefon weniger Rand, damit vom
   Inhalt mehr uebrig bleibt als vom Rahmen. */
@media(max-width:560px){
  .card.pad{padding:14px}
  .content{padding:14px 12px 48px}
  details.disclosure>.disclosure-body{padding:12px}
  .form-grid{grid-template-columns:1fr;gap:12px}
  .case-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Sicherheitsnetz fuer Formularzeilen: einzelne Felder tragen im Markup ein
   inline `min-width:200px`…`min-width:240px`. Inline schlaegt Stylesheet, die
   Regel unter 860 Punkten (.form-row > .form-field{min-width:0}) kam also nicht
   an. Auf einem 320-Punkte-Geraet blieb damit ein Feld breiter als der Platz,
   und die ganze Seite wurde seitlich scrollbar. `!important` schlaegt inline —
   das ist hier kein Notnagel, sondern die einzige Stelle, an der ein Wert aus
   dem Markup ueberstimmt werden kann. */
@media(max-width:560px){
  .form-row > .form-field{min-width:0!important;flex-basis:100%!important}
  .form-row > .form-field input,
  .form-row > .form-field select,
  .form-row > .form-field textarea{width:100%!important;min-width:0!important}
}

/* Die beiden Rueckwege oben in der Fallakte: nebeneinander, links buendig — sie
   sind Navigation und keine Hauptaktion. Auf dem Telefon teilen sie sich die
   Zeile, damit beide mit dem Daumen erreichbar bleiben. */
.akte-zurueck{justify-content:flex-start;margin-bottom:4px}
@media(max-width:560px){
  .akte-zurueck{display:flex;width:100%;gap:8px}
  .akte-zurueck > .btn{flex:1 1 0;min-height:40px}
}

/* =====================================================================
   DIE SUCHE IN DER KOPFZEILE
   ---------------------------------------------------------------------
   Ein Feld fuer Klienten, Akten und die Bereiche des Programms. Auf dem
   Schreibtisch steht es zwischen Seitentitel und den Schaltern rechts; auf
   dem Telefon ist in der Kopfzeile kein Platz dafuer — dort oeffnet ein
   Lupenknopf das Feld als Blatt ueber der Seite.
   ===================================================================== */
.cp-suche{position:relative;display:flex;align-items:center;gap:8px;
  flex:1 1 240px;max-width:440px;min-width:0;height:38px;padding:0 10px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);
  box-shadow:var(--shadow-s);transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
/* KI-Suche: beim Fokus ein sanft pulsierender Aurora-Glow ums Feld — derselbe Farbklang
   wie der ATLAS-Orb im Cockpit (Teal ↔ Blau). Außen ums Feld, färbt das Feld nicht ein. */
.cp-suche:focus-within{border-color:var(--petrol-l);animation:suche-aurora 3.2s ease-in-out infinite}
@keyframes suche-aurora{
  0%,100%{box-shadow:0 0 0 3px var(--euc-100),0 0 14px rgba(90,208,174,.35)}
  50%{box-shadow:0 0 0 3px var(--euc-100),0 0 22px rgba(110,168,255,.45)}
}
.cp-suche:focus-within .cs-lupe{color:var(--petrol)}
.cp-suche .cs-lupe{width:16px;height:16px;color:var(--muted);flex:none;transition:color .14s var(--ease)}
.cp-suche input{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;outline:none;
  font-size:13.5px;color:var(--ink)}
.cp-suche input::placeholder{color:var(--muted-2);opacity:.85}
/* Das eigene Kreuz von type=search doppelt unseren Knopf und sitzt daneben. */
.cp-suche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cs-kbd{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--muted-2);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:var(--paper-2)}
.cs-x{display:none}
.cp-suche-btn{display:none}

.cs-liste{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1200;
  max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-l);padding:6px}
.cs-gruppe{padding:9px 10px 5px;font-family:var(--display);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-2);font-weight:700}
.cs-treffer{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:inherit}
/* Markiert wird ueber eine Klasse und nicht ueber :hover: sonst zeigten Tastatur
   und Maus gleichzeitig auf zwei verschiedene Zeilen, und die Eingabetaste
   oeffnete die, auf die man gerade NICHT sieht. */
.cs-treffer.ist-aktiv{background:var(--euc-50)}
.cs-ic{flex:none;width:28px;height:28px;border-radius:9px;background:var(--euc-100);color:var(--petrol);
  display:flex;align-items:center;justify-content:center}
.cs-ic svg{width:15px;height:15px}
.cs-txt{flex:1 1 auto;min-width:0}
.cs-txt b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-txt small{display:block;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-badge{flex:none}
.cs-alle{justify-content:center;margin-top:4px;border-top:1px solid var(--line-2);
  border-radius:0 0 10px 10px;color:var(--petrol);font-size:12.5px;font-weight:600}
.cs-alle .cs-txt{flex:0 1 auto;text-align:center}
.cs-leer{padding:18px 12px;text-align:center;color:var(--muted);font-size:12.5px}
/* ATLAS-Vorschlag im Aufklapper: kleiner kreisender Orb statt Symbolkachel + KI-Pille. */
.cs-treffer.cs-atlas .cs-ic{background:transparent}
.cs-orb{display:block;width:18px;height:18px;border-radius:50%;
  background:conic-gradient(from 0deg,#5ad0ae,#6ea8ff,#8ff0d4,#5ad0ae);
  box-shadow:0 0 9px rgba(90,208,174,.55),inset 0 0 5px rgba(255,255,255,.45);
  animation:atlas-spin 7s linear infinite}
.cs-atlas-pill{background:linear-gradient(90deg,#2e9f85,#3f7fd0);color:#fff;border:0;font-weight:600}
@media (prefers-reduced-motion: reduce){
  .cp-suche:focus-within{animation:none;box-shadow:0 0 0 3px var(--euc-100)}
  .cs-orb{animation:none}
}

/* Einheitlicher KI-/AVV-Hinweis (_KiHinweis.cshtml): an jeder KI-Fläche gleich. */
.ki-avv-hinweis{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.ki-avv-hinweis svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--petrol);opacity:.9}
.ki-avv-hinweis b{color:var(--ink-soft)}

/* Auf einem Zeigegeraet ohne Tastatur ist die Taste keine Auskunft. */
@media(pointer:coarse){.cs-kbd{display:none}}

@media(max-width:860px){
  /* In einer Kopfzeile mit Menue, Titel, Hilfe, Postfach, Glocke, Standort und
     Mandant ist fuer ein Textfeld kein Platz. Der Lupenknopf oeffnet es als
     Blatt ueber der Seite — mit dem Daumen erreichbar und ohne dass die
     Kopfzeile umbricht. */
  .cp-suche{display:none}
  .cp-suche-btn{display:flex;width:38px;height:38px;flex:none;border-radius:10px;
    background:var(--paper);border:1px solid var(--line);align-items:center;justify-content:center}
  .cp-suche-btn svg{width:17px;height:17px;color:var(--muted)}

  body.suche-offen{overflow:hidden}
  /* z-index 45 und nicht 1290: die Kopfzeile hat backdrop-filter und ist damit ein
     eigener Stapelkontext (z-index:50). Das Suchblatt liegt IN ihr, kann also im
     Wurzelkontext nie ueber 50 kommen — ein Schleier mit 1290 laege ueber dem
     Suchfeld statt darunter. 45 ist ueber dem Inhalt und unter der Kopfzeile. */
  body.suche-offen::before{content:"";position:fixed;inset:0;background:rgba(14,26,34,.38);z-index:45}
  body.suche-offen .cp-suche{display:flex;position:fixed;top:0;left:0;right:0;z-index:1300;
    height:56px;max-width:none;padding:0 12px;gap:10px;
    border-radius:0;border-width:0 0 1px;box-shadow:none}
  body.suche-offen .cp-suche input{font-size:16px}
  body.suche-offen .cs-x{display:flex;flex:none;align-items:center;justify-content:center;
    width:36px;height:36px;color:var(--muted)}
  body.suche-offen .cs-x svg{width:18px;height:18px}
  body.suche-offen .cs-liste{position:fixed;top:56px;left:0;right:0;
    max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);
    border-radius:0;border-width:0;box-shadow:none;padding:6px 10px 28px}
  body.suche-offen .cs-treffer{min-height:52px}
}

/* =====================================================================
   Dokument scannen — nur, wo es eine Kamera gibt
   ---------------------------------------------------------------------
   Das zweite Dateifeld der Dokumentenablage traegt `capture` und oeffnet
   damit unmittelbar die Kamera. Auf einem Rechner mit Maus ist das ein
   Feld ohne Wirkung (bestenfalls die Webcam) und im Formular nur eine
   Zeile Verwirrung neben der eigentlichen Dateiauswahl.

   `pointer:coarse` trifft Telefon und Tablet und nicht das Notebook mit
   Touchscreen daneben — dort meldet der Zeiger weiterhin `fine`, und dort
   ist die Dateiauswahl auch der richtige Weg.
   ===================================================================== */
.nur-kamera{display:none}
@media(pointer:coarse){
  .nur-kamera{display:flex}
  /* Ein Dateifeld ist auf dem Telefon ein Ziel fuer den Daumen. */
  .nur-kamera input[type=file],.form-field input[type=file]{min-height:44px;padding:9px 0}
}

/* =====================================================================
   Kontaktdaten des Gerichts in der Fallakte
   ---------------------------------------------------------------------
   Sie stehen unter den Verfahrensdaten, gehoeren aber nicht zu ihnen: das
   Aktenzeichen ist eine Angabe DIESES Falls, die Telefonnummer der
   Geschaeftsstelle eine Angabe des GERICHTS. Der abgesetzte Block macht
   den Unterschied sichtbar, ohne eine zweite Karte danebenzustellen.
   ===================================================================== */
.gericht-kontakt{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:5px;
}
.gk-kopf{
  font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:2px;
}
.gk-zeile{display:flex; gap:14px; align-items:baseline; font-size:12.5px}
.gk-zeile > span{flex:0 0 108px; color:var(--muted)}
.gk-zeile > b{flex:1 1 auto; min-width:0; font-weight:600; color:var(--ink-soft); overflow-wrap:anywhere}
.gk-zeile a{color:var(--petrol); text-decoration:none}
.gk-zeile a:hover{text-decoration:underline}
/* Das eBO-/EGVP-Postfach ist der Weg, auf dem Schriftsaetze WIRKLICH zum
   Gericht gehen. Telefon und Fax sind der Ausweichweg — deshalb steht es
   hervorgehoben und nicht als eine Zeile unter vielen. */
.gk-ebo > b{
  font-family:var(--mono); font-size:11.5px; color:var(--petrol-d);
  background:var(--euc-50); border:1px solid var(--euc-100);
  border-radius:7px; padding:3px 8px;
}
/* Auf dem Telefon ist eine feste Beschriftungsspalte von 108 Punkten die
   halbe Zeile. Dort steht die Beschriftung ueber dem Wert. */
@media(max-width:560px){
  .gk-zeile{flex-direction:column; gap:1px}
  .gk-zeile > span{flex:none; font-size:11px}
}
/* Telefon und E-Mail sind auf Touch Ziele fuer den Daumen, keine Textstellen. */
@media(pointer:coarse){
  .gk-zeile a{display:inline-block; min-height:32px; line-height:32px}
}

/* =====================================================================
   Qualitaetsmanagement — die Monatsauswertung
   ---------------------------------------------------------------------
   Karten und keine Tabelle fuer die Einzelvorgaenge. Eine Zeile traegt
   hier fuenf sehr unterschiedlich lange Angaben (Titel, Erlaeuterung,
   Akte, Zustaendigkeit, Vorschlag); in Spalten gepresst waere die
   Erlaeuterung ein Fetzen und der Vorschlag unlesbar. Die Zaehlung
   darueber bleibt eine Tabelle — dort SIND es Zahlen in Spalten.
   ===================================================================== */
.qm-liste{display:flex;flex-direction:column;gap:10px}
.qm-eintrag{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-s);padding:14px 16px;
  /* Der Streifen links traegt den Schweregrad. Er steht auch dann noch da,
     wenn jemand die Seite in Graustufen ausdruckt — anders als eine Farbe
     im Text. */
  border-left:4px solid var(--line);
}
.qm-eintrag.sev-crit{border-left-color:var(--red)}
.qm-eintrag.sev-warn{border-left-color:var(--amber)}
.qm-kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.qm-kat{
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);
}
.qm-datum{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.qm-titel{font-family:var(--display);font-size:14.5px;font-weight:600;margin:0 0 4px;color:var(--ink-900)}
.qm-detail{margin:0 0 8px;font-size:13px;color:var(--ink-soft);line-height:1.55}
.qm-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px}
.qm-fall{display:inline-flex;align-items:center;gap:7px;color:var(--petrol);font-weight:600}
.qm-fall svg{width:14px;height:14px;flex:none}
.qm-fall:hover{text-decoration:underline}
.qm-fall .mono{font-size:11.5px;color:var(--muted);font-weight:400}
.qm-wer{margin-left:auto;color:var(--muted)}
/* Der Vorschlag zur Vermeidung — der eigentliche Zweck dieser Auswertung.
   Deshalb abgesetzt und nicht als weitere Zeile im Fliesstext: er ist das,
   was in der Monatsbesprechung besprochen wird. */
.qm-vorschlag{
  display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-soft);line-height:1.55;
}
.qm-vorschlag svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--petrol)}

/* Die Kennzahl-Kachel als Filter: die gewaehlte bleibt sichtbar gedrueckt.
   Ohne das ist nach dem Klick nicht mehr zu erkennen, wonach gefiltert wird —
   und die kuerzere Liste sieht aus wie ein Datenverlust. */
.kpi.aktiv{border-color:var(--petrol);box-shadow:0 0 0 2px var(--euc-100),var(--shadow-m)}
.kpi.aktiv .k-top > span:first-child{color:var(--petrol-d)}

@media(max-width:560px){
  .qm-datum{margin-left:0;flex-basis:100%}
  .qm-wer{margin-left:0;flex-basis:100%}
}

/* =====================================================================
   Kontaktdaten des Gerichts: bearbeiten, ohne die Akte zu verlassen
   ---------------------------------------------------------------------
   Die Frage „wie erreiche ich das Gericht" entsteht in der Akte. Ein Weg,
   der sie verlaesst, wird nicht gegangen — die Nummer landet dann wieder
   auf einem Zettel neben dem Bildschirm. Deshalb steht der Aufklapper
   direkt unter den Kontaktdaten, und das Verzeichnis daneben nur als
   zweiter, kleinerer Verweis fuer die Pflege am Stueck.
   ===================================================================== */
.gk-bearbeiten{display:inline-block;margin-top:10px}
.gk-pflegen{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--petrol);
  /* Der Aufklapper ist ein <summary>; ohne das traegt er das Dreieck des Browsers. */
  list-style:none;
}
.gk-pflegen::-webkit-details-marker{display:none}
.gk-pflegen svg{width:13px;height:13px;flex:none}
.gk-pflegen:hover{text-decoration:underline}
.gk-verzeichnis{
  display:inline-block;margin:10px 0 0 14px;
  font-size:11.5px;color:var(--muted);text-decoration:underline;
}
.gk-verzeichnis:hover{color:var(--ink-soft)}
@media(pointer:coarse){.gk-pflegen,.gk-verzeichnis{min-height:36px;line-height:36px}}

/* Ein Feld, das angezeigt und nicht geaendert wird — die Einrichtungsart im
   Fallakte-Dialog. Es sieht bewusst NICHT wie ein leeres Eingabefeld aus:
   ein Kasten, in den man nicht schreiben kann, ist ein Fehler, ein Kaestchen
   mit Wert ist eine Angabe. */
.feld-fest{display:flex;align-items:center;min-height:38px}

/* =====================================================================
   „Einrichtung anlegen" — das Formular im Aufklapper
   ---------------------------------------------------------------------
   Der Aufklapper ist bereits eine Karte mit Rahmen. Ein zweiter Kartenrahmen
   darin ergab einen Kasten im Kasten, oben abgesetzt durch einen Rand von
   10 Punkten — die Naht war deutlicher als der Inhalt. Das Formular fuellt
   den Aufklapper jetzt aus: kein eigener Rahmen, kein Rand nach oben, und
   der Innenabstand kommt aus derselben Quelle wie bei jedem anderen
   aufgeklappten Abschnitt.

   Drei Spalten statt zwei: die vierzehn Felder sind kurz (PLZ, Hausnummer,
   Telefon), und zweispaltig wurde daraus eine Kolonne von sieben Zeilen mit
   halbleeren Zeilen dazwischen.
   ===================================================================== */
.einrichtung-form{
  margin:0;border:0;border-top:1px solid var(--line-2);border-radius:0;
  box-shadow:none;background:var(--paper);padding:20px 22px 22px;
}
.einrichtung-form .form-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.einrichtung-form .form-aktion{
  display:flex;gap:10px;align-items:center;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line-2);
}
@media(max-width:560px){.einrichtung-form{padding:16px 14px 18px}}

/* =====================================================================
   Briefeditor — Schreibfeld, Werkzeugleiste und Vorschau
   ---------------------------------------------------------------------
   Das Schreibfeld sieht aus wie Papier und nicht wie ein Eingabefeld: der
   Verfasser soll den Brief sehen, nicht das Formular. Deshalb Serifenschrift,
   Zeilenabstand wie im Druck und eine Breite, die in etwa dem Satzspiegel
   einer A4-Seite entspricht — was hier auf eine Zeile passt, passt auch
   gedruckt auf eine.

   Die Vorschau darunter zeigt denselben Text in der Anordnung nach DIN 5008
   (Anschriftfeld links, Informationsblock rechts, Betreff, Anrede, Text,
   Gruss). Sie ist bewusst klein und grau: sie beantwortet „steht alles an
   der richtigen Stelle", nicht „wie liest sich der Text".
   ===================================================================== */
.brief-werkzeuge{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin:14px 0 0;padding:8px;border:1px solid var(--line);
  border-bottom:0;border-radius:var(--radius-s) var(--radius-s) 0 0;
  background:var(--paper-2);
}
.brief-werkzeuge .btn{min-width:34px}
.brief-trenner{width:1px;height:20px;background:var(--line);margin:0 4px}

.brief-editor{
  min-height:320px;padding:22px 24px;
  border:1px solid var(--line);border-radius:0 0 var(--radius-s) var(--radius-s);
  background:var(--paper);
  font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.6;
  color:var(--ink);overflow-wrap:break-word;
}
.brief-editor:focus{outline:2px solid var(--petrol-l);outline-offset:-2px}
.brief-editor p{margin:0 0 12px}
.brief-editor ul,.brief-editor ol{margin:0 0 12px 22px;padding:0}
.brief-editor li{margin:0 0 4px}
.brief-editor:empty::before{
  content:"Hier steht der Brieftext.";color:var(--muted);
}

/* Ohne Werkzeugleiste (nur Lesen) haengt das Feld sonst oben in der Luft. */
.brief-editor[contenteditable="false"]{
  border-radius:var(--radius-s);background:var(--paper-2);margin-top:14px;
}

.brief-vorschau{
  margin-top:10px;padding:26px 28px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-s);
  font-family:Georgia,"Times New Roman",serif;font-size:12.5px;color:var(--ink);
  max-width:760px;
}
.bv-kopf{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:24px}
.bv-absender{font-size:15px;font-weight:700}
.bv-klein{font-size:10.5px;color:var(--muted)}
.bv-zeile{display:flex;gap:28px;flex-wrap:wrap}
.bv-anschrift{flex:2 1 260px;min-height:78px;line-height:1.45}
.bv-info{flex:1 1 190px;font-size:11px;color:var(--ink-soft)}
.bv-info span{display:inline-block;min-width:82px;color:var(--muted)}
.bv-datum{margin-top:8px}
.bv-betreff{margin:30px 0 14px;font-weight:700}
.bv-anrede{margin-bottom:10px}
.bv-text p{margin:0 0 10px}
.bv-text ul,.bv-text ol{margin:0 0 10px 20px;padding:0}
.bv-gruss{margin-top:16px}
.bv-unterschrift{margin-top:34px}
.bv-linie{width:190px;border-top:1px solid var(--muted);margin-bottom:3px}
.bv-anlagen{margin-top:20px;font-size:11.5px}
@media(max-width:560px){
  .brief-editor{padding:16px 14px}
  .brief-vorschau{padding:18px 16px}
}

/* =====================================================================
   Dateiablage — Ziehen und Fallenlassen (wwwroot/js/datei-ablage.js)
   ---------------------------------------------------------------------
   Die gestrichelte Fläche ersetzt das Dateifeld erst, wenn JavaScript sie
   aufgebaut hat (Klasse `ist-aktiv`). Vorher steht dort die gewöhnliche
   Dateiauswahl — sie darf nicht verschwinden, solange nichts sie ersetzt.

   Die Auswahl wird nicht `display:none` gesetzt, sondern nur weggeblendet:
   ein ausgeblendetes Pflichtfeld kann der Browser weder anspringen noch
   bemängeln, und die Beschriftung „Datei" verlöre ihr Ziel.
   ===================================================================== */
.ablage{display:flex;flex-direction:column;gap:8px}
.ablage.ist-aktiv>input[type=file]{
  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;
}
.ablage-zone{
  display:none;width:100%;align-items:center;gap:13px;text-align:left;
  padding:16px 18px;border:1.5px dashed var(--line);border-radius:var(--radius-s);
  background:var(--paper-2);color:var(--ink-soft);
  transition:border-color .14s var(--ease),background .14s,color .14s;
}
.ablage.ist-aktiv .ablage-zone{display:flex}
.ablage-zone svg{width:22px;height:22px;flex:none;color:var(--petrol)}
.az-text{display:flex;flex-direction:column;gap:2px}
.az-text b{font-size:14px;font-weight:600;color:var(--ink-900)}
.az-sub{font-size:11.5px;color:var(--muted)}
.ablage-zone:hover{border-color:var(--petrol-l);background:var(--euc-50)}
/* Während die Datei über der Fläche schwebt: kräftiger Rahmen, damit erkennbar
   ist, WO sie landet — beim Ziehen sieht man den Zeiger, nicht den Fokus. */
.ablage.ueber .ablage-zone{
  border-color:var(--petrol);border-style:solid;background:var(--euc-100);color:var(--ink-900);
}
.ablage.ueber .ablage-zone svg{color:var(--petrol-d)}

.ablage-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ablage-datei{
  display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;
  border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);
  font-size:13px;
}
.ad-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--ink-900)}
.ad-groesse{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--muted-2)}
.ad-weg{flex:none;width:26px;height:26px;border-radius:7px;line-height:1;font-size:17px;
  color:var(--muted);display:flex;align-items:center;justify-content:center}
.ad-weg:hover{background:var(--red-bg);color:var(--red)}
.ablage-fehler{margin:0;font-size:12px;color:var(--red);line-height:1.5}
@media(pointer:coarse){
  /* Auf dem Telefon zieht niemand eine Datei — dort ist die Fläche schlicht der
     größere Knopf zur Auswahl, und der Text lügt sonst über die Bedienung. */
  .ablage-zone{padding:14px}
  .az-text b{font-size:13.5px}
}

/* ---------------------------------------------------------------------
   Datei-Auswahlknopf — EINHEITLICH auf der ganzen Website
   ---------------------------------------------------------------------
   Der native „Datei auswählen"-Knopf sieht auf jedem Betriebssystem anders
   (und meist grau/altbacken) aus. Diese Regel gibt JEDEM <input type=file>
   denselben, markengerechten Knopf und einen dezenten Rahmen — ohne
   JavaScript und ohne dass die Felder ihre Funktion ändern. Die per
   datei-ablage.js zur Ablagefläche umgebauten Felder werden dort ausgeblendet
   (sr-only) und sind von dieser Regel nicht betroffen. */
input[type=file]{
  font-size:13px;color:var(--ink-soft);max-width:100%;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:var(--radius-s);
  background:var(--paper-2);padding:8px 10px;box-sizing:border-box;
  transition:border-color .14s var(--ease),background .14s;
}
input[type=file]:hover{border-color:var(--petrol-l);background:var(--euc-50)}
input[type=file]:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
input[type=file]::file-selector-button{
  font:inherit;font-weight:600;font-size:12.5px;line-height:1;
  margin:-2px 12px -2px 0;padding:8px 15px;border:0;border-radius:8px;cursor:pointer;
  color:#fff;background:var(--petrol);
  transition:filter .12s,background .12s;
}
input[type=file]::file-selector-button:hover{filter:brightness(1.07)}
/* Ältere WebKit-/Blink-Fassung desselben Knopfes. */
input[type=file]::-webkit-file-upload-button{
  font:inherit;font-weight:600;font-size:12.5px;line-height:1;
  margin:-2px 12px -2px 0;padding:8px 15px;border:0;border-radius:8px;cursor:pointer;
  color:#fff;background:var(--petrol);
}

/* Kontoumsätze: Filter-/Sortierleiste + ATLAS-Auswertung */
.umsatz-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--line-2);background:var(--paper-2)}
.umsatz-filter .umsatz-suche,.umsatz-filter select{border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;font-size:13px;background:var(--paper)}
.umsatz-filter .umsatz-suche{flex:1 1 220px;min-width:150px}
.umsatz-filter .umsatz-count{margin-left:auto;font-size:12.5px}
.umsatz-filter .umsatz-summe{font-size:12.5px;font-variant-numeric:tabular-nums}
th.umsatz-sort{cursor:pointer;user-select:none;white-space:nowrap}
th.umsatz-sort:hover{color:var(--petrol)}
th.umsatz-sort .s-pfeil{font-size:11px;opacity:.85}
th.umsatz-sort:focus-visible{outline:2px solid var(--petrol);outline-offset:-2px}
.umsatz-tabelle tbody tr[hidden]{display:none}

.atlas-umsatz{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;padding:12px 16px;
  border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,rgba(90,208,174,.08),transparent)}
.atlas-umsatz .atlas-badge{padding:4px 8px;font-size:11px}
.atlas-umsatz-btn{display:inline-flex;align-items:center;gap:7px;
  border-color:rgba(64,201,168,.55);color:#0f5a49;font-weight:600}
.atlas-umsatz-btn:hover{background:rgba(90,208,174,.14)}
.atlas-umsatz-status{flex-basis:100%;font-size:13px}
.atlas-umsatz-status:empty{display:none}
.atlas-umsatz-status.busy{color:#2a6f60}
.atlas-umsatz-status.warn{color:#9a5a00}
.atlas-umsatz-body{flex-basis:100%;margin-top:2px;display:flex;flex-direction:column;gap:5px}
.atlas-umsatz-p{margin:0;font-size:14px;line-height:1.5;padding-left:16px;position:relative}
.atlas-umsatz-p::before{content:"•";position:absolute;left:2px;color:#2a6f60}
.atlas-umsatz-hint{margin:4px 0 0;font-size:12px;color:var(--ink-soft);font-style:italic}

/* Posteingang: „Ordner & Suche" direkt offen (Kopf mit Suche + Ordner-Chips). */
.pe-mailhead{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.pe-mailhead-t{margin:0;font-family:var(--display);font-size:14px;flex:0 0 auto}
.pe-suche{display:flex;align-items:center;gap:8px;flex:1 1 320px;justify-content:flex-end;min-width:0}
.pe-suche-input{flex:1 1 auto;min-width:0;max-width:340px;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;
  background:var(--paper);transition:border-color .14s,box-shadow .14s}
.pe-suche-input:focus{outline:none;border-color:var(--petrol-l);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--petrol) 18%,transparent)}
.pe-ordner{display:flex;gap:7px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line-2)}
.pe-ordner-chip{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:500;
  color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);transition:.12s}
.pe-ordner-chip:hover{border-color:var(--petrol-l);background:var(--euc-50);color:var(--ink-900)}
.pe-ordner-chip.on{background:var(--petrol);border-color:var(--petrol);color:#fff;font-weight:600}
.pe-ordner-chip.on .mail-badge{background:rgba(255,255,255,.28);color:#fff}
@media(max-width:640px){
  .pe-suche{flex-basis:100%;justify-content:flex-start}
  .pe-suche-input{max-width:none}
}

/* =====================================================================
   Dokumentenpool — Ablegen ueber die ganze Breite
   ---------------------------------------------------------------------
   Die allgemeine Regel kappt Formulare im Aufklapper bei 900 Punkten
   (siehe oben: Beschriftung und Feld sollen nicht 1400 Punkte
   auseinanderstehen). Fuer das Ablegen ist das die falsche Form: es sind
   drei kurze Angaben UND eine Flaeche, auf die man etwas fallen laesst —
   untereinander stand die Flaeche in einem 900 Punkte breiten Kasten
   innerhalb eines 1900 Punkte breiten weissen Feldes, und rechts daneben
   war nichts.

   Deshalb ZWEI Spalten: links die Angaben (schmal, damit die Beschriftung
   neben ihrem Feld bleibt), rechts die Ablageflaeche, die den Platz
   ausfuellt und dadurch das Ziel wird, das sie sein soll. Der Deckel bei
   1500 Punkten bleibt: darueber wandert das Auge zwischen Titel und Knopf
   quer ueber den Schirm.

   Unter 1080 Punkten wird daraus eine Spalte, unter 640 stapeln auch die
   Angaben — Telefonbreite ohne Querlauf.
   ===================================================================== */
.page-intro.breit p{max-width:860px}

/* =====================================================================
   Dokumentenpool — Ordnerbaum links, Inhalt rechts
   ---------------------------------------------------------------------
   Der Aufbau jedes Dateiverwalters, und aus demselben Grund: die Spalte
   beantwortet „wo bin ich und was gibt es noch", die Liste „was liegt
   hier". Beides untereinander hiesse, den Baum bei jedem Wechsel neu zu
   suchen.

   Unter 900 Punkten steht der Baum ueber der Liste und laeuft waagerecht:
   eine 240 Punkte breite Spalte NEBEN einer Tabelle laesst auf dem Telefon
   fuer beides zu wenig. Ueber 1500 waechst nur die Liste — ein Ordnername
   braucht keine 600 Punkte.
   ===================================================================== */
.dok-layout{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:18px;align-items:start}
.dok-inhalt{min-width:0}

.dok-baum{position:sticky;top:76px;padding:12px 10px 10px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 100px);overflow:auto}
.db-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px;
  font-family:var(--display);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600;border-bottom:1px solid var(--line-2)}
.db-liste{display:flex;flex-direction:column;gap:1px}
.db-eintrag{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-radius:9px;
  font-size:13px;color:var(--ink-soft);text-decoration:none;transition:background .12s,color .12s}
.db-eintrag svg{width:15px;height:15px;flex:none;color:var(--muted-2)}
.db-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-zahl{flex:none;font-family:var(--mono);font-size:11px;color:var(--muted-2);
  background:var(--line-2);border-radius:20px;padding:1px 7px}
.db-eintrag:hover{background:var(--euc-50);color:var(--ink-900)}
.db-eintrag.aktiv{background:var(--euc-100);color:var(--ink-900);font-weight:600}
.db-eintrag.aktiv svg{color:var(--petrol)}
/* „Nicht einsortiert" ist kein Ordner, sondern der Rest — abgesetzt, damit man es
   nicht fuer einen haelt und hineinzuschieben versucht. */
.db-halde{margin-top:6px;border-top:1px solid var(--line-2);border-radius:0 0 9px 9px;padding-top:10px}
.db-neu{margin-top:2px}
.db-neu>summary{width:100%;justify-content:center}
.db-form{display:flex;flex-direction:column;gap:10px;padding:10px 4px 2px}
.db-form .form-field input,.db-form .form-field select{min-width:0;width:100%}

.dok-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.dok-kopf h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0;color:var(--ink-900);
  display:flex;align-items:center;gap:8px}
/* Name und Datum untereinander statt aneinandergeklebt („M. Sander02.09.2026"). */
.dok-wer .nm{display:block;font-size:12.5px;color:var(--ink-soft)}
.dok-wer .az{display:block;font-size:11.5px;color:var(--muted-2);font-family:var(--mono)}

@media(max-width:900px){
  .dok-layout{grid-template-columns:minmax(0,1fr)}
  /* min-width:0 ist hier kein Feinschliff, sondern die Bedingung: ein Rasterfeld ist
     mindestens so breit wie sein Inhalt, und die waagerechte Ordnerreihe (nowrap) machte
     daraus auf dem Telefon 1900 Punkte — die ganze SEITE lief dann quer. Mit min-width:0
     rollt die Reihe in sich selbst. */
  .dok-baum{position:static;max-height:none;overflow:visible;min-width:0}
  .db-liste{min-width:0}
  /* Waagerecht rollende Ordnerreihe: sie bleibt sichtbar, ohne die halbe Seite
     zu belegen, bevor die Liste anfaengt. */
  .db-liste{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .db-eintrag{padding-left:12px!important;white-space:nowrap;flex:none;border:1px solid var(--line)}
  .db-halde{margin-top:0;border-top:1px solid var(--line);border-radius:9px;padding-top:8px}
}
.disclosure > .disclosure-body > form.dok-ablegen{
  max-width:1500px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,1fr);
  gap:22px 28px;align-items:start;
}
.dok-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 16px}
/* Die Felder duerfen schrumpfen: min-width:200px am Eingabefeld sprengt sonst
   in der schmalen linken Spalte das Raster (waagerechter Balken auf dem Tablet). */
.dok-felder .form-field input:not([type=checkbox]),
.dok-felder .form-field select{min-width:0;width:100%}
.dok-felder .field-hint{margin-top:2px}

.dok-ablage{display:flex;flex-direction:column;gap:14px}
.dok-ablage .form-field{gap:5px}
/* Die Flaeche fuellt die Hoehe der Angaben daneben: eine 60 Punkte hohe
   gestrichelte Zeile neben drei Feldern sieht aus wie ein vergessenes Feld,
   keine Ablage. */
.dok-ablage .ablage-zone{min-height:132px;align-items:center}
.dok-aktion{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

@media(max-width:1080px){
  .disclosure > .disclosure-body > form.dok-ablegen{grid-template-columns:1fr;gap:16px}
  .dok-ablage .ablage-zone{min-height:0}
}
@media(max-width:640px){
  .dok-felder{grid-template-columns:1fr}
  .dok-aktion{align-items:stretch}
  .dok-aktion .btn{width:100%;justify-content:center}
}

/* =====================================================================
   Dokumentenpool — Blaettern unter der Liste
   ---------------------------------------------------------------------
   Serverseitig geblaettert (doc.usp_Document_Pool liefert eine Seite),
   deshalb Links und kein Bedienelement aus table-paging.js. Die Zeile
   nennt neben den Knoepfen die Stelle in der Liste: „Seite 2 von 7" ohne
   Gesamtzahl laesst offen, ob sich das Weitersuchen lohnt.
   ===================================================================== */
/* (Dokumentenpool nutzt jetzt den einheitlichen .pager.) */

/* ---- Diktierfunktion: schwebender Mikrofon-Knopf am aktiven Feld (dictation.js) ---------- */
/* position:fixed in Fensterkoordinaten; dictation.js zeigt ihn nur, wenn das Feld an der Stelle
   wirklich sichtbar ist (nicht unter Dialogkopf/-fuß, Menü oder Verdunkelung). */
.dict-fab{position:fixed;z-index:1500;width:30px;height:30px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:8px;background:var(--paper);border:1px solid var(--line);color:var(--petrol);
  box-shadow:var(--shadow-s);cursor:pointer;padding:0;
  transition:opacity .12s var(--ease),background-color .13s var(--ease),border-color .13s var(--ease),color .13s var(--ease)}
@media (pointer:coarse){.dict-fab{width:36px;height:36px;border-radius:10px}button.dict-fab svg{width:18px;height:18px}}
.dict-fab:hover{border-color:var(--petrol-l);color:var(--petrol-d);background:var(--euc-50)}
.dict-fab:active{transform:translateY(1px)}
/* Während des Scrollens ausgeblendet (dictation.js richtet danach neu aus). */
.dict-fab.dict-weg{opacity:0;visibility:hidden;pointer-events:none;transition:none}
.dict-fab svg{width:16px;height:16px}
.dict-fab .dict-spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--euc-100);
  border-top-color:var(--petrol);animation:dict-spin .8s linear infinite}
.dict-fab.is-rec{color:#fff;background:var(--red);border-color:var(--red);animation:dict-pulse 1.2s ease-in-out infinite}
.dict-fab.is-busy svg{display:none}
.dict-fab.is-busy .dict-spin{display:block}
@keyframes dict-spin{to{transform:rotate(360deg)}}
@keyframes dict-pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,69,84,.5)}50%{box-shadow:0 0 0 5px rgba(214,69,84,0)}}
.dict-tip{position:fixed;z-index:1600;max-width:240px;background:var(--ink-900);color:#fff;font-size:12px;
  line-height:1.4;padding:7px 10px;border-radius:8px;box-shadow:var(--shadow-l)}
@media (prefers-reduced-motion: reduce){.dict-fab.is-rec{animation:none}.dict-fab .dict-spin{animation:none}}

/* ===== Webmail (persönliches Postfach im Posteingang) ===================== */
/* Postfach-Reiter, wenn mehrere Postfächer verbunden sind. */
.mail-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.mail-tab{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-soft);font-size:13px;font-weight:600;text-decoration:none;box-shadow:var(--shadow-s);transition:.15s}
.mail-tab:hover{border-color:var(--muted-2);background:var(--paper-2)}
.mail-tab.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}

/* Zweispaltiges Layout: links Ordner, rechts Suchleiste + Liste. */
.mail-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:16px;align-items:start}

.mail-folders{padding:10px}
.mail-folders-h{font-family:var(--display);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600;padding:6px 10px 8px}
.mail-folder{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-radius:var(--radius-s);color:var(--ink-soft);text-decoration:none;
  font-size:13.5px;font-weight:500;transition:.12s}
.mail-folder:hover{background:var(--paper-2);color:var(--ink-900)}
.mail-folder.on{background:var(--tint);color:var(--ink-900);font-weight:600}
.mail-folder>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-badge{flex:0 0 auto;min-width:20px;text-align:center;padding:1px 7px;border-radius:999px;
  background:var(--petrol);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.mail-disconnect{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.mail-disconnect .btn{width:100%}
.mail-disconnect .btn:hover{border-color:var(--red);background:var(--red-bg);color:var(--red)}

.mail-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.mail-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px}
.mail-search{flex:1 1 220px;min-width:0;padding:9px 12px;border-radius:var(--radius-s);
  border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:14px;outline:none;transition:.15s}
.mail-search:focus{border-color:var(--petrol);box-shadow:0 0 0 3px var(--euc-50)}

/* Liste: ungelesene fett, farbiger Punkt in der ersten Spalte. */
.mail-list tbody tr.mail-unread{font-weight:600}
.mail-dot-cell{width:34px;text-align:center}
.mail-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--petrol)}
.mail-from{font-size:12.8px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-subject{font-size:12.8px}
.mail-subject a{text-decoration:none;color:var(--ink-900)}
.mail-subject a:hover{text-decoration:underline}

/* Einzelansicht füllt die volle Bildschirmhöhe — gescrollt wird NUR innerhalb der Mail,
   die Seite selbst scrollt nicht. Umgesetzt über einen viewporthohen Container. */
/* Die Seite darf scrollen: wenn die ATLAS-Panels (Auswerten/Antwort entwerfen) Platz
   beanspruchen, soll die Lese-Ansicht NICHT schrumpfen, sondern ihre Mindesthöhe behalten
   und der Rest scrollt. Ohne ATLAS füllt die Ansicht weiterhin die ganze Höhe. */
.content:has(.mail-screen){overflow-y:auto;padding-bottom:12px}
.mail-screen{display:flex;flex-direction:column;min-height:calc(100vh - 98px);min-height:calc(100dvh - 98px)}
.mail-view{max-width:none;flex:1 1 auto;display:flex;flex-direction:column;min-height:420px;overflow:hidden;margin-bottom:0}
.mail-view-meta{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;flex:0 0 auto}
.mail-attachments-top{flex:0 0 auto}
.mail-html{width:100%;flex:1 1 auto;min-height:420px;border:1px solid var(--line-2);
  border-radius:var(--radius-s);background:#fff;display:block}
.mail-plain-scroll{flex:1 1 auto;min-height:0;overflow:auto}
.mail-attachments-top{margin:0 0 14px;border-top:0;padding-top:0}
/* E-Mail verschieben (Dropdown je Zeile) und Löschen. */
.mail-move{position:relative;display:inline-block}
.mail-move>summary{list-style:none;cursor:pointer}
.mail-move>summary::-webkit-details-marker{display:none}
.mail-move-form{position:absolute;right:0;z-index:40;margin-top:4px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow-l);padding:6px}
.mail-move-form select{font-size:12.5px;max-width:220px}
.btn.mail-del:hover{border-color:var(--red);background:var(--red-bg);color:var(--red)}
.mail-plain{white-space:pre-wrap;font-size:14px;line-height:1.6;color:var(--ink)}
.mail-plain-toggle{margin-top:14px}
.mail-plain-toggle summary{cursor:pointer;font-size:12.5px;color:var(--ink-soft);user-select:none}
.mail-plain-toggle summary:hover{color:var(--ink-900)}
.mail-plain-toggle .mail-plain{margin-top:10px;padding-top:12px;border-top:1px solid var(--line-2)}
.mail-attachments{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.mail-attachments-h{font-weight:600;margin-bottom:10px}
.mail-attachments-list{display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* ===== Anhänge als Karten mit Vorschau (Outlook-artig) ==================== */
.mail-attach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.mail-attach-card{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--paper);min-width:0;transition:.12s}
.mail-attach-card:hover{border-color:var(--petrol);box-shadow:var(--shadow-s,0 2px 8px rgba(0,0,0,.06))}
.maa-ic{flex:0 0 auto;font-size:22px;line-height:1}
.maa-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.maa-name{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maa-size{font-size:11.5px;color:var(--muted-2)}
.maa-actions{flex:0 0 auto;display:flex;gap:5px;align-items:center}
.btn.xs{font-size:12px;padding:3.5px 9px;border-radius:8px;line-height:1.1;text-decoration:none}

/* Vorschau-Overlay */
.maa-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px}
.maa-modal[hidden]{display:none}
.maa-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.maa-modal-card{position:relative;z-index:1;width:min(1000px,96vw);height:min(90vh,900px);
  display:flex;flex-direction:column;background:var(--paper);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.4)}
.maa-modal-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.maa-modal-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maa-modal-head-actions{flex:0 0 auto;display:flex;gap:8px;align-items:center}
.maa-modal-body{flex:1 1 auto;min-height:0;background:#f3f4f6;display:flex;align-items:center;justify-content:center;overflow:auto}
.maa-modal-frame{width:100%;height:100%;border:0;background:#fff}
.maa-modal-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media(max-width:860px){
  .maa-modal{padding:0}
  .maa-modal-card{width:100vw;height:100dvh;border-radius:0}
  .mail-attach-grid{grid-template-columns:1fr}
}
@media (prefers-color-scheme: dark){
  .maa-modal-body{background:#111418}
}

/* ===== Mobil: E-Mail-Detailansicht natürlich fließen lassen ================
   Auf dem Telefon NICHT den „Mail-Client"-Vollhöhen-Modus erzwingen
   (height:100dvh-86px, iFrame füllt den Rest): er kollidiert mit der angedockten
   Bottom-Navigation (App-Shell) und schob den unteren E-Mail-Inhalt darunter.
   Stattdessen fließt alles und scrollt mit der Seite; der E-Mail-iFrame bekommt
   eine komfortable feste Höhe und scrollt für lange/breite Mails intern. */
@media(max-width:860px){
  .content:has(.mail-screen){overflow-y:auto;padding-bottom:16px}
  .mail-screen{display:block;height:auto;min-height:0}
  .mail-view{display:block;flex:none;overflow:visible}
  .mail-html{flex:none;height:70dvh;min-height:320px}
  .mail-plain-scroll{flex:none;min-height:0;overflow:visible}
  /* Kopfzeile: Titel oben, Aktionsknöpfe darunter in einer greifbaren, umbrechenden Reihe. */
  .mail-screen .page-intro{align-items:stretch;gap:12px}
  .mail-screen .page-intro>div:last-child{flex-wrap:wrap}
  .mail-screen .page-intro>div:last-child>.btn,
  .mail-screen .page-intro>div:last-child>form{flex:1 1 auto}
  .mail-screen .page-intro>div:last-child>form>.btn{width:100%}
}

/* Mobil: Ordner über die Liste, waagerecht scrollbar. */
@media(max-width:820px){
  .mail-layout{grid-template-columns:1fr}
  .mail-folders nav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .mail-folder{flex:0 0 auto}
  .mail-disconnect{display:none}
  .mail-from{max-width:none}
}

/* ===== Posteingang: Ordnerbaum (links, Outlook-artig) ===================== */
.mail-baum{display:flex;flex-direction:column;gap:1px}
.mail-baum-item{display:flex;align-items:center;gap:8px;text-decoration:none;
  padding:8px 10px 8px calc(10px + var(--tiefe,0) * 16px);border-radius:var(--radius-s);
  color:var(--ink-soft);font-size:13.5px;font-weight:500;transition:.12s;min-width:0}
.mail-baum-item:hover{background:var(--paper-2);color:var(--ink-900)}
.mail-baum-item.on{background:var(--tint);color:var(--ink-900);font-weight:600}
.mail-baum-icon{flex:0 0 auto;display:inline-flex;color:var(--muted-2)}
.mail-baum-item.on .mail-baum-icon{color:var(--petrol)}
.mail-baum-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ordner-Badge an der Trefferzeile (ordnerübergreifende Suche) + Suchhinweis. */
.mail-folder-badge{display:inline-block;margin-left:8px;padding:1px 8px;font-size:11px;font-weight:600;
  border-radius:999px;background:var(--tint,#e8f0ef);color:var(--petrol,#0f766e);vertical-align:middle;white-space:nowrap}
.mail-search-hint{font-size:12.5px;color:var(--ink-soft);margin:0 0 10px}

/* Empfängerzeilen der geöffneten Mail (Von / An / Cc / Bcc). */
.mail-adr{margin:6px 0 0;display:flex;flex-direction:column;gap:2px}
.mail-adr>div{display:flex;gap:8px;font-size:12.5px;line-height:1.45}
.mail-adr dt{flex:0 0 84px;color:var(--muted-2);font-weight:600}
.mail-adr dd{margin:0;min-width:0;color:var(--ink-soft);overflow-wrap:anywhere}

/* ===== E-Mail schreiben (Rich-Text, Anhänge, Cc/Bcc) ====================== */
.mail-compose{gap:0}
.compose-card{max-width:none;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
  overflow:auto;padding:16px 18px;margin-bottom:0}
.compose-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line-2);padding:8px 0}
.compose-lbl{flex:0 0 96px;color:var(--muted-2);font-size:12.5px;font-weight:600}
.compose-in{flex:1 1 auto;min-width:0;border:0;background:transparent;font-size:14px;color:var(--ink);
  padding:6px 2px;outline:none;font-family:inherit}
.compose-in:focus{box-shadow:none}
.compose-ccbcc-btn{flex:0 0 auto;border:1px solid var(--line);background:var(--paper);border-radius:999px;
  font-size:12px;font-weight:600;color:var(--ink-soft);padding:4px 12px;cursor:pointer}
.compose-ccbcc-btn:hover{border-color:var(--petrol-l);color:var(--ink-900);background:var(--euc-50)}
.compose-ccbcc[hidden]{display:none}

.compose-editor-wrap{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;margin-top:6px}
/* Werkzeugleiste und Editor erscheinen erst mit JavaScript (.has-editor); ohne JS bleibt das
   Textfeld der einzige Eingabeweg — kein doppeltes Feld. */
.compose-toolbar{display:none;align-items:center;gap:3px;flex-wrap:wrap;padding:8px 0;position:sticky;top:0;
  background:var(--paper);z-index:2;border-bottom:1px solid var(--line-2)}
.has-editor .compose-toolbar{display:flex}
.ce-btn{min-width:32px;height:30px;border:1px solid transparent;background:transparent;border-radius:7px;
  cursor:pointer;font-size:14px;color:var(--ink-soft);line-height:1;padding:0 8px}
.ce-btn:hover{background:var(--paper-2);border-color:var(--line);color:var(--ink-900)}
.ce-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.compose-editor{display:none;flex:1 1 auto;min-height:220px;overflow:auto;padding:12px 4px;font-size:14px;
  line-height:1.6;color:var(--ink);outline:none;white-space:pre-wrap}
.has-editor .compose-editor{display:block}
.compose-editor:empty::before{content:attr(aria-label);color:var(--muted-2)}
.compose-fallback{width:100%;font-size:14px;line-height:1.6;font-family:inherit;padding:10px;margin-top:6px;
  border:1px solid var(--line);border-radius:var(--radius-s);resize:vertical}
.has-editor .compose-fallback{display:none!important}

.compose-attach{margin-top:10px;border:1px dashed var(--line);border-radius:var(--radius-s);padding:10px 12px}
.compose-attach.drop{border-color:var(--petrol);background:var(--euc-50)}
.compose-attach-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.compose-file{margin-top:8px;font-size:12.5px}
.compose-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.compose-chips[hidden]{display:none}
.compose-chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 6px 4px 12px;font-size:12.5px;max-width:100%}
.compose-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.compose-chip-size{color:var(--muted-2);font-variant-numeric:tabular-nums}
.compose-chip-x{border:0;background:var(--line);color:var(--ink-soft);width:20px;height:20px;border-radius:50%;
  cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.compose-chip-x:hover{background:var(--red-bg);color:var(--red)}
.compose-chip-warn{flex-basis:100%;color:var(--red);font-size:12.5px;margin-top:2px}
.compose-actions{display:flex;gap:10px;align-items:center;padding-top:14px;margin-top:auto}

@media(max-width:820px){
  .compose-lbl{flex-basis:64px}
  .compose-chip-name{max-width:130px}
}

/* ===== Termine / Kalender-Agenda ========================================== */
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;margin-bottom:14px}
.cal-nav-title{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink-900);letter-spacing:-.01em;text-transform:capitalize}

.agenda{display:flex;flex-direction:column;gap:10px}
.agenda-day{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);padding:12px 14px}
.agenda-day.today{border-color:var(--petrol);box-shadow:0 0 0 1px var(--petrol) inset,var(--shadow-s)}
.agenda-date{text-align:center;border-right:1px solid var(--line-2);padding-right:8px;display:flex;
  flex-direction:column;justify-content:center;line-height:1.1}
.agenda-dow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}
.agenda-dom{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ink-900)}
.agenda-day.today .agenda-dom{color:var(--petrol)}
.agenda-mon{font-size:11px;color:var(--muted-2)}
.agenda-items{display:flex;flex-direction:column;gap:8px;min-width:0}

.appt{display:flex;align-items:flex-start;gap:12px;padding:9px 10px;border-radius:var(--radius-s);
  background:var(--paper-2);border:1px solid var(--line-2)}
.appt.past{opacity:.62}
.appt-time{flex:0 0 auto;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;
  font-weight:600;color:var(--petrol);white-space:nowrap;padding-top:1px}
.appt.past .appt-time{color:var(--muted-2)}
.appt-main{flex:1 1 auto;min-width:0}
.appt-title{font-weight:600;color:var(--ink-900);font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.appt-status{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:1px 7px;border-radius:999px;background:var(--tint);color:var(--ink-soft)}
.appt-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:3px;font-size:12px;color:var(--ink-soft)}
.appt-meta a{color:var(--petrol);text-decoration:none}
.appt-meta a:hover{text-decoration:underline}
.appt-actions{flex:0 0 auto;display:flex;gap:6px;align-items:flex-start}

@media(max-width:640px){
  .cal-nav{flex-wrap:wrap}
  .agenda-day{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:10px}
  .appt{flex-wrap:wrap}
  .appt-actions{width:100%;margin-top:4px}
}

/* ===== Dokumente je Bereich (Fallakte) ==================================== */
/* Kompakte Liste der einem Abschnitt zugeordneten Dokumente, direkt beim Block. */
.bereich-docs{margin:8px 0 4px;padding:8px 10px;border:1px dashed var(--line);border-radius:var(--radius-s);background:var(--paper-2)}
.bereich-docs-h{font-size:11px;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.bereich-docs-list{display:flex;flex-wrap:wrap;gap:6px}
.bereich-doc{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);font-size:12.5px;max-width:100%}
.bereich-doc>a:first-child{color:var(--petrol);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.bereich-doc>a:first-child:hover{text-decoration:underline}
.bereich-doc-dl{color:var(--muted-2);text-decoration:none;font-weight:700;padding:0 2px}
.bereich-doc-dl:hover{color:var(--petrol)}

/* Zuordnung je Dokument in der Dokumententabelle: ein kompakter Chip statt des grossen
   Disclosure-Kastens (der sprengte die Tabellenzelle). Zugeordnet = gefuellte Marke in
   Hausfarbe, unzugeordnet = gestrichelte, leise „zuordnen"-Einladung. Das Auswahlfeld
   erscheint beim Aufklappen kompakt unter dem Chip (im Fluss, damit es der Scroll-Container
   der Tabelle nicht abschneidet). */
.doc-bereich{display:inline-block}
.doc-bereich>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;line-height:1;padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-soft);white-space:nowrap;user-select:none;transition:.12s}
.doc-bereich>summary::-webkit-details-marker{display:none}
.doc-bereich>summary:hover{border-color:var(--muted-2);color:var(--ink-900)}
.doc-bereich>summary .db-chev{width:13px;height:13px;color:var(--muted-2);flex:none;transition:transform .18s var(--ease)}
.doc-bereich>summary.leer{border-style:dashed;color:var(--muted-2)}
.doc-bereich>summary.gesetzt{background:var(--euc-100);border-color:transparent;color:var(--petrol);font-weight:600}
.doc-bereich[open]>summary{border-color:var(--petrol);color:var(--ink-900);margin-bottom:8px}
.doc-bereich[open]>summary .db-chev{transform:rotate(180deg)}
.doc-bereich-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.doc-bereich-form select{max-width:220px;font-size:12.5px}

/* ===== Kalender-Monatsraster (Outlook-Stil) =============================== */
.cal-month{padding:0;overflow:hidden}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-head{border-bottom:1px solid var(--line)}
.cal-hcell{padding:8px 10px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted-2);text-align:left}
.cal-cell{min-height:104px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:6px 6px 8px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell.aus{background:var(--paper-2)}
.cal-cell.aus .cal-daynum{color:var(--muted-2);opacity:.6}
.cal-cell.heute{background:var(--tint)}
.cal-daynum{font-size:12.5px;font-weight:600;color:var(--ink-900);align-self:flex-start;
  min-width:22px;text-align:center;border-radius:6px;padding:1px 4px}
.cal-cell.heute .cal-daynum{background:var(--petrol);color:#fff}
.cal-events{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-ev{font-size:11px;line-height:1.25;padding:2px 6px;border-radius:5px;background:var(--euc-50);
  color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:3px solid var(--petrol)}
/* Vergangen: gedämpft, aber lesbar (vorher opacity:.55 → Kontrast 2,3:1, WCAG AA verfehlt) */
.cal-ev.past{background:var(--line-2);border-left-color:var(--muted-2);color:var(--ink-soft)}
.cal-ev-t{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:10.5px;color:var(--petrol)}
.cal-ev.past .cal-ev-t{color:var(--ink-soft);font-weight:500}
.cal-more{font-size:10.5px;color:var(--muted-2);padding:0 4px}

@media(max-width:820px){
  /* Auf schmalen Schirmen ist das Raster zu eng — es wird waagerecht scrollbar,
     die Monatsliste darunter bleibt die bequeme Ansicht. */
  .cal-month{overflow-x:auto}
  .cal-grid{min-width:640px}
  .cal-cell{min-height:78px}
}

.mail-move-select{font-size:11.5px;max-width:132px;padding:5px 8px}

/* ===== Einheitliches, modernes Aussehen für ALLE Dropdowns ================
   Standalone-Selects (z. B. „Bereich zuordnen", „Verschieben …") sahen nach
   Browser-Standard aus. Diese Basisregel gibt jedem <select> denselben Rahmen,
   dieselbe Rundung und einen eigenen Pfeil wie die Felder im Rest der Seite.
   Speziellere Regeln (.form-field select, .loc-switch select, .fe-form select …)
   bleiben davon unberührt und gewinnen wie bisher. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;transition:.15s;
  padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:var(--radius-s);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6E7A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
select:hover{border-color:var(--muted-2)}
select:focus{outline:none;border-color:var(--petrol-l);box-shadow:0 0 0 3px var(--euc-100)}
/* Die kompakten Selects in Tabellen: schmaler, aber gleicher Stil (Pfeil bleibt frei). */
.mail-move-select{font-size:11.5px;max-width:150px;padding:6px 28px 6px 10px}
.doc-bereich-form select{max-width:240px}

/* ===== Kalender: Ansichtsumschalter + Wochen-/Tagesansicht ================ */
.cal-viewswitch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper)}
.cal-vbtn{padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:.12s}
.cal-vbtn+.cal-vbtn{border-left:1px solid var(--line)}
.cal-vbtn:hover{background:var(--paper-2);color:var(--ink-900)}
.cal-vbtn.on{background:var(--ink-900);color:#fff}
.cal-daynum{text-decoration:none}
.cal-daynum:hover{background:var(--euc-50)}

/* Woche: 7 Spalten nebeneinander. */
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:hidden}
.cal-wday{border-right:1px solid var(--line-2);min-height:60vh;display:flex;flex-direction:column}
.cal-wday:last-child{border-right:0}
.cal-wday.heute{background:var(--tint)}
.cal-whead{display:flex;align-items:baseline;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line-2);text-decoration:none}
.cal-wdow{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2)}
.cal-wnum{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink-900)}
.cal-wday.heute .cal-wnum{color:var(--petrol)}
.cal-wevents{display:flex;flex-direction:column;gap:4px;padding:8px}
.cal-wempty{color:var(--muted-2);font-size:12px;text-align:center;padding:6px 0}

/* Tag: Liste. */
.day-ev{display:flex;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line-2)}
.day-ev:last-child{border-bottom:0}
.day-ev.past{opacity:.6}
.day-ev-time{flex:0 0 auto;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;
  font-weight:600;color:var(--petrol);white-space:nowrap;min-width:96px}
.day-ev.past .day-ev-time{color:var(--muted-2)}
.day-ev-title{font-weight:600;color:var(--ink-900);font-size:14.5px}
.day-ev-loc{font-size:12.5px;color:var(--ink-soft);margin-top:2px}

@media(max-width:820px){
  .cal-week{overflow-x:auto;grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);grid-template-columns:none}
  .cal-nav{flex-wrap:wrap;gap:10px}
}

/* „Aktenzeichen wird nachgereicht"-Umschalter (Fall anlegen / Gerichtsdaten bearbeiten). */
.az-nachgereicht{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-size:12.5px;
  color:var(--ink-soft);cursor:pointer;user-select:none}
.az-nachgereicht input{width:16px;height:16px;accent-color:var(--petrol);cursor:pointer}
.az-nachgereicht b{color:var(--amber);font-weight:600}
input.az-disabled{background:var(--paper-2);color:var(--muted-2);border-style:dashed}

/* ===== ATLAS — KI-Tagesbriefing im Cockpit ================================
   Ein ruhiger, „epischer" Kopfbereich: dunkler Verlauf mit einer langsam
   wandernden Aurora, links der animierte KI-Orb, rechts Gruss + Briefing.
   Alle Animationen respektieren prefers-reduced-motion. */
.atlas-hero{position:relative;overflow:hidden;border-radius:16px;margin-bottom:14px;
  padding:12px 18px;color:#eaf3f1;isolation:isolate;
  background:radial-gradient(120% 140% at 0% 0%, #12463d 0%, #0d3730 42%, #0b2c28 100%);
  box-shadow:0 18px 40px -22px rgba(6,40,34,.65),inset 0 1px 0 rgba(255,255,255,.06)}
.atlas-hero::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:180%;z-index:-1;
  background:
    radial-gradient(40% 55% at 20% 25%, rgba(64,201,168,.35), transparent 60%),
    radial-gradient(35% 50% at 85% 20%, rgba(90,140,255,.28), transparent 62%),
    radial-gradient(45% 60% at 70% 90%, rgba(120,224,196,.22), transparent 60%);
  filter:blur(8px);animation:atlas-aurora 18s ease-in-out infinite alternate}
@keyframes atlas-aurora{0%{transform:translate3d(-4%,-2%,0) scale(1.05) rotate(0deg)}
  100%{transform:translate3d(5%,3%,0) scale(1.12) rotate(6deg)}}

.atlas-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.atlas-orbwrap{position:relative;width:44px;height:44px;flex:none}
.atlas-orb{position:absolute;inset:8px;border-radius:50%;
  background:conic-gradient(from 0deg,#5ad0ae,#6ea8ff,#8ff0d4,#5ad0ae);
  box-shadow:0 0 26px rgba(90,208,174,.55),inset 0 0 14px rgba(255,255,255,.35);
  animation:atlas-spin 7s linear infinite}
.atlas-orb::after{content:"";position:absolute;inset:22%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff,#dff7ef 30%,#7fdcc4 70%);
  box-shadow:inset 0 0 8px rgba(6,60,50,.35)}
.atlas-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(120,224,196,.5);
  animation:atlas-pulse 2.8s ease-out infinite}
.atlas-ring.r2{animation-delay:1.4s}
@keyframes atlas-spin{to{transform:rotate(360deg)}}
@keyframes atlas-pulse{0%{transform:scale(.75);opacity:.9}70%{opacity:0}100%{transform:scale(1.35);opacity:0}}

/* Ruhiger Spinner der „KI prüft …"-Anzeige im Posteingang/Cockpit. */
.ki-spinner{flex:none;width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--petrol,#2a6f62);border-top-color:transparent;
  animation:ki-spin .8s linear infinite}
@keyframes ki-spin{to{transform:rotate(360deg)}}
/* Bewegungsempfindliche Nutzer (OS „Bewegung reduzieren", WCAG 2.3.3): kein Dauerdrehen. */
@media (prefers-reduced-motion: reduce){ .ki-spinner{ animation: none; } }

.atlas-main{flex:1 1 320px;min-width:260px}
.atlas-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--display,inherit);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7fe6c4}
.atlas-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#7fe6c4;box-shadow:0 0 8px #7fe6c4;
  animation:atlas-blink 1.8s ease-in-out infinite}
@keyframes atlas-blink{0%,100%{opacity:1}50%{opacity:.35}}
.atlas-hello{margin:1px 0 0;font-size:17px;font-weight:700;line-height:1.12;color:#fff}
.atlas-date{font-size:11.5px;color:#9fc4bb;margin-bottom:5px}
.atlas-brief{font-size:13px;line-height:1.4;color:#e7f2ef;max-width:72ch;min-height:1.4em;
  transition:opacity .35s ease}
.atlas-brief.laedt{opacity:.55}
/* Schimmer-Streifen, solange ATLAS formuliert. */
.atlas-brief.laedt::after{content:"";display:inline-block;width:1.1ch;margin-left:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,#7fe6c4,transparent);
  -webkit-background-clip:text;animation:atlas-caret 1s steps(2) infinite}
.atlas-caret{display:inline-block;width:.5ch;height:1.05em;vertical-align:-2px;margin-left:2px;
  background:#7fe6c4;border-radius:1px;animation:atlas-blink 1s steps(1) infinite}
@keyframes atlas-caret{50%{opacity:.2}}

.atlas-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.atlas-chip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#eaf3f1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:.13s}
.atlas-chip:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
.atlas-chip b{font-weight:800}
.atlas-chip .n{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;background:rgba(255,255,255,.16)}
.atlas-chip.warn{background:rgba(240,180,80,.16);border-color:rgba(240,180,80,.4);color:#ffe6bf}
.atlas-chip.crit{background:rgba(240,110,110,.18);border-color:rgba(240,110,110,.45);color:#ffd8d8}
.atlas-chip.crit .n,.atlas-chip.warn .n{background:rgba(0,0,0,.18)}
.atlas-act{margin-left:auto;align-self:flex-start;display:flex;gap:8px;flex-wrap:wrap}
.atlas-act .btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff}
.atlas-act .btn:hover{background:rgba(255,255,255,.24)}

/* Direkt mit ATLAS schreiben (öffnet das Chat-Fenster und sendet die Frage). */
.atlas-ask{display:flex;align-items:center;gap:8px;margin-top:9px;max-width:560px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:4px 4px 4px 14px;transition:.13s}
.atlas-ask:focus-within{border-color:rgba(127,230,196,.6);box-shadow:0 0 0 3px rgba(127,230,196,.18)}
.atlas-ask-ic{width:18px;height:18px;color:#7fe6c4;flex:none}
.atlas-ask input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;
  font-size:14px;padding:8px 2px}
.atlas-ask input::placeholder{color:#9fc4bb}
.atlas-ask-send{flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:#06382f;
  background:linear-gradient(135deg,#8ff0d4,#5ad0ae);box-shadow:0 4px 12px -5px rgba(90,208,174,.7)}
.atlas-ask-send:hover{filter:brightness(1.07)}
.atlas-ask-send svg{width:17px;height:17px}

@media (max-width:640px){
  .atlas-hero{padding:14px 14px}
  .atlas-hello{font-size:18px}
  .atlas-act{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .atlas-hero::before,.atlas-orb,.atlas-ring,.atlas-eyebrow .dot,.atlas-brief.laedt::after,.atlas-caret{animation:none}
}

/* ATLAS-Beschlusserkennung in der Fallanlage (heller Kartenkopf auf dem Formular). */
.atlas-intake{border:1px solid rgba(64,201,168,.35);
  background:linear-gradient(180deg,rgba(90,208,174,.08),rgba(90,208,174,.02))}
.atlas-intake-head{display:flex;gap:14px;align-items:flex-start}
.atlas-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:5px 10px;border-radius:8px;font-family:var(--display,inherit);font-weight:800;
  font-size:12px;letter-spacing:.12em;color:#06382f;
  background:linear-gradient(135deg,#8ff0d4,#5ad0ae);box-shadow:0 4px 12px -6px rgba(90,208,174,.7)}
.atlas-intake-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.atlas-intake-row input[type=file]{flex:1 1 260px;min-width:220px}
.atlas-intake-status{margin-top:10px;font-size:13.5px;min-height:1.2em}
.atlas-intake-status.busy{color:#2a6f60}
.atlas-intake-status.ok{color:#1f7a4d;font-weight:600}
.atlas-intake-status.warn{color:#9a5a00}
/* Von ATLAS vorbefüllte Felder kurz hervorheben, damit klar ist: bitte prüfen. */
.atlas-filled{background:rgba(90,208,174,.10)!important;border-color:rgba(64,201,168,.55)!important}
label.atlas-filled{background:transparent!important;font-weight:600}
@media (max-width:640px){
  .atlas-intake-row .btn{width:100%}
}

/* ATLAS-Posteingang: E-Mail-Auswertung */
/* Die zwei ATLAS-Karten (Auswerten / Antwort entwerfen) nebeneinander statt gestapelt —
   spart Platz vor der eigentlichen E-Mail. Auf schmalen Schirmen untereinander. */
.atlas-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:12px}
.atlas-cards .atlas-triage{margin-bottom:0;padding:12px 14px}
.atlas-cards .atlas-triage-lead{flex:1 1 150px;min-width:130px}
.atlas-triage{margin-bottom:12px;border:1px solid rgba(64,201,168,.35);
  background:linear-gradient(180deg,rgba(90,208,174,.08),rgba(90,208,174,.02))}
.atlas-triage-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.atlas-triage-lead{display:flex;flex-direction:column;gap:2px;flex:1 1 240px;min-width:200px}
.atlas-triage-lead span{font-size:12.5px;color:var(--ink-soft)}
.atlas-triage-head .btn{margin-left:auto}
.atlas-triage-status{margin-top:10px;font-size:13.5px;min-height:0}
.atlas-triage-status:empty{margin-top:0}
.atlas-triage-status.busy{color:#2a6f60}
.atlas-triage-status.warn{color:#9a5a00}
.atlas-triage-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.atlas-urgent{display:inline-block;align-self:flex-start;padding:5px 11px;border-radius:8px;
  font-weight:700;font-size:13px;color:#8a1f1f;background:rgba(240,110,110,.14);
  border:1px solid rgba(240,110,110,.4)}
.atlas-triage-summary{font-size:14.5px;line-height:1.5;color:var(--ink)}
.atlas-triage-meta{display:flex;gap:6px;flex-wrap:wrap}
.atlas-triage-action{font-size:13.5px;color:var(--ink)}
.atlas-triage-cases-h{font-weight:700;font-size:13px;color:var(--ink-soft);margin-top:2px}
.atlas-triage-cases{display:flex;flex-direction:column;gap:6px}
.atlas-case{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;text-decoration:none;
  padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:#fff;transition:.12s}
.atlas-case:hover{border-color:rgba(64,201,168,.6);background:rgba(90,208,174,.06)}
.atlas-case-t{font-weight:600;color:var(--ink)}
.atlas-case-az{font-size:12.5px;color:var(--ink-soft)}
.atlas-case-m{font-size:12px;color:#2a6f60;margin-left:auto}
.atlas-triage-hint{font-size:12px;color:var(--ink-soft);font-style:italic}
@media (max-width:640px){
  .atlas-triage-head .btn{margin-left:0;width:100%}
}

/* ATLAS-Metadatenvorschlag in der Dokumentablage */
.atlas-docmeta{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;border-radius:11px;
  border:1px solid rgba(64,201,168,.4);
  background:linear-gradient(180deg,rgba(90,208,174,.10),rgba(90,208,174,.03))}
.atlas-docmeta .atlas-badge{padding:4px 8px;font-size:11px}
.atlas-docmeta-btn,.atlas-docmeta .btn{display:inline-flex;align-items:center;gap:7px}
/* Der ATLAS-Knopf hebt sich vom einfachen „ghost" ab, ohne den Absende-Knopf zu übertönen. */
.atlas-docmeta .atlas-docmeta-btn{border-color:rgba(64,201,168,.55);color:#0f5a49;font-weight:600}
.atlas-docmeta .atlas-docmeta-btn:hover{background:rgba(90,208,174,.14);border-color:rgba(64,201,168,.8)}
.atlas-docmeta-status{flex-basis:100%;font-size:13px;line-height:1.5;min-height:0}
.atlas-docmeta-status:empty{display:none}
.atlas-docmeta-status.busy{color:#2a6f60}
.atlas-docmeta-status.busy::before{content:"";display:inline-block;width:12px;height:12px;
  margin-right:7px;vertical-align:-1px;border-radius:50%;
  border:2px solid rgba(42,111,96,.3);border-top-color:#2a6f60;animation:atlas-spin .7s linear infinite}
.atlas-docmeta-status.ok{color:#1f7a4d;font-weight:600}
.atlas-docmeta-status.warn{color:#9a5a00}
@media (prefers-reduced-motion:reduce){ .atlas-docmeta-status.busy::before{animation:none} }

/* ATLAS-Stapel: mehrere Dokumente, je Datei ein eigener Vorschlag ------------------------------ */
.atlas-stapel{padding:12px 14px;border-radius:11px;
  border:1px solid rgba(64,201,168,.4);
  background:linear-gradient(180deg,rgba(90,208,174,.10),rgba(90,208,174,.03))}
.atlas-stapel-kopf{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap}
.atlas-stapel .js-atlas-verteilen{border-color:rgba(64,201,168,.55);color:#0f5a49;font-weight:600;
  display:inline-flex;align-items:center;gap:7px}
.atlas-stapel .js-atlas-verteilen:hover{background:rgba(90,208,174,.14);border-color:rgba(64,201,168,.8)}
.atlas-stapel .atlas-badge{padding:4px 8px;font-size:11px}
.atlas-stapel-liste{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.atlas-stapel-liste[hidden]{display:none}
.atlas-zeile{border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);padding:10px 12px}
.atlas-zeile-fertig{opacity:.72}
.atlas-zeile-kopf{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.atlas-zeile-name{font-weight:600;font-size:13.5px;word-break:break-word;overflow-wrap:anywhere}
.atlas-zeile-chip{flex:none;font-size:12px;padding:3px 9px;border-radius:999px;
  background:rgba(0,0,0,.05);color:#555;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.atlas-zeile-chip.busy{background:rgba(42,111,96,.12);color:#2a6f60}
.atlas-zeile-chip.ok{background:rgba(31,122,77,.12);color:#1f7a4d}
.atlas-zeile-chip.warn{background:rgba(154,90,0,.12);color:#9a5a00}
.atlas-zeile-chip.err{background:rgba(180,40,40,.12);color:#b42828}
/* Erneut-Knopf an einer Zeile (nur bei Fehlschlag sichtbar) und Sammelknopf im Fuss. */
.atlas-zeile-retry{flex:none;font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--petrol,#2a6f60);cursor:pointer}
.atlas-zeile-retry:hover{border-color:var(--petrol,#2a6f60);background:rgba(42,111,96,.08)}
.atlas-zeile-retry[hidden]{display:none}
.js-atlas-nachpruefen[hidden]{display:none}
.atlas-zeile-felder{margin-top:10px;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:10px}
.atlas-feld{display:flex;flex-direction:column;gap:4px;min-width:0}
.atlas-feld>span{font-size:12px;color:var(--muted,#667);font-weight:600}
.atlas-feld input,.atlas-feld select{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;
  padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff}
.atlas-stapel-fuss{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.atlas-stapel-fuss[hidden]{display:none}
.atlas-stapel-status{font-size:13px;line-height:1.5;flex-basis:100%}
.atlas-stapel-status:empty{display:none}
.atlas-stapel-status.busy{color:#2a6f60}
.atlas-stapel-status.busy::before{content:"";display:inline-block;width:12px;height:12px;
  margin-right:7px;vertical-align:-1px;border-radius:50%;
  border:2px solid rgba(42,111,96,.3);border-top-color:#2a6f60;animation:atlas-spin .7s linear infinite}
.atlas-stapel-status.ok{color:#1f7a4d;font-weight:600}
.atlas-stapel-status.warn{color:#9a5a00}
@media (prefers-reduced-motion:reduce){ .atlas-stapel-status.busy::before{animation:none} }
@media (max-width:720px){ .atlas-zeile-felder{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .atlas-zeile-felder{grid-template-columns:1fr} }

/* ATLAS-Schriftsatz im Briefeditor */
.atlas-letter{margin:10px 0 14px;border:1px solid rgba(64,201,168,.4);border-radius:10px;
  background:linear-gradient(180deg,rgba(90,208,174,.07),rgba(90,208,174,.02))}
.atlas-letter>summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:13.5px;
  display:flex;align-items:center;gap:8px;list-style:none}
.atlas-letter>summary::-webkit-details-marker{display:none}
.atlas-letter>summary .atlas-badge{padding:3px 7px;font-size:11px}
.atlas-letter-body{padding:0 14px 14px}
.atlas-letter-body textarea{width:100%;box-sizing:border-box;min-height:96px;resize:vertical;
  font-family:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:8px}
.atlas-letter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.atlas-letter-row label{font-size:13px;color:var(--ink-soft)}
.atlas-letter-status{font-size:13px}
.atlas-letter-status.busy{color:#2a6f60}
.atlas-letter-status.ok{color:#1f7a4d}
.atlas-letter-status.warn{color:#9a5a00}
@media (max-width:640px){
  .atlas-letter-row .btn{width:100%}
}

/* ===========================================================================
   Cockpit-Merkzettel (notes.js): Panel oben rechts neben dem ATLAS-Hero.
   Desktop nebeneinander (Hero flexibel, Merkzettel feste Spalte); ab 1100px
   gestapelt. Die Karten sind der Fallakte-Optik nachempfunden (card/pill/.note).
   =========================================================================== */
.cockpit-top{display:flex;gap:16px;align-items:stretch;margin-bottom:14px}
.cockpit-top > .atlas-hero{flex:1 1 auto;min-width:0;margin-bottom:0}
.cp-notes{flex:0 0 360px;max-width:360px;display:flex;flex-direction:column;padding:14px 14px 12px;min-height:0}
.cp-notes-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cp-notes-title{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink-900)}
.cp-notes-title svg{width:16px;height:16px;color:var(--petrol)}
.cp-notes-head .btn{margin-left:auto}
/* Die Liste scrollt INTERN (feste Obergrenze) — so wächst das Panel nie über den Hero
   hinaus und schiebt das Cockpit nicht nach unten, egal wie viele Notizen es sind. */
.cp-notes-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:9px;max-height:380px;padding-right:2px}
/* Nebeneinander-Ansicht (Desktop): die HÖHE richtet sich nach dem ATLAS-Hero, NICHT nach der
   Notizenzahl. flex-basis:0 sorgt dafür, dass die Liste nicht zur Zeilenhöhe beiträgt — so
   wächst die Karte nie über den Hero hinaus, egal wie viele Notizen; die Liste scrollt intern.
   Die Karte selbst clippt (overflow:hidden), damit nichts übersteht. */
@media (min-width:1101px){
  .cockpit-top .cp-notes{overflow:hidden}
  .cockpit-top .cp-notes-body{flex:1 1 0;max-height:none}
}
.cp-notes-body .dash-empty{padding:14px 2px;color:var(--muted);font-size:12.5px}

.cp-note{border:1px solid var(--line);border-radius:11px;background:var(--paper-2);padding:9px 11px;transition:border-color .15s var(--ease)}
.cp-note:hover{border-color:var(--muted-2)}
.cp-note.pinned{background:#FBF6E9;border-color:#ECD9A8}
.cp-note-top{display:flex;align-items:flex-start;gap:6px}
.cp-note-title{font-weight:600;font-size:13px;color:var(--ink-900);line-height:1.3;flex:1 1 auto;min-width:0;word-break:break-word}
.cp-note-title.muted{color:var(--muted);font-weight:500}
.cp-note-tools{display:flex;gap:2px;flex:none;opacity:.5;transition:opacity .15s var(--ease)}
.cp-note:hover .cp-note-tools,.cp-note:focus-within .cp-note-tools{opacity:1}
.cp-note-tools button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;border-radius:7px;cursor:pointer;color:var(--ink-soft)}
.cp-note-tools button svg{width:14px;height:14px}
.cp-note-tools button:hover{background:var(--paper);color:var(--ink-900)}
.cp-note-pin.on{color:var(--amber)}
.cp-note-del:hover{background:var(--red-bg);color:var(--red)}
.cp-note-body{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:5px 0 7px;white-space:normal;word-break:break-word}
.cp-note-foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.cp-note-vis{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-weight:600;font-size:10.5px}
.cp-note-vis.private{background:var(--euc-100);color:var(--petrol-d)}
.cp-note-vis.tenant{background:#E6EEF6;color:#1F4E79}
.cp-note-fall{font-family:var(--mono);font-size:10.5px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:0 6px;color:var(--ink-soft)}
.cp-note-when{margin-left:auto;white-space:nowrap}

/* Composer (Anlegen/Bearbeiten) — sitzt oben über der Liste. */
.cp-note-form{display:flex;flex-direction:column;gap:7px;border:1px solid var(--petrol-l);border-radius:11px;background:var(--paper);padding:10px;margin-bottom:10px;box-shadow:var(--shadow-s)}
.cp-note-form input[type=text],.cp-note-form textarea,.cp-note-form select{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-family:inherit;font-size:12.5px;color:var(--ink);background:var(--paper)}
.cp-note-form textarea{resize:vertical;min-height:56px}
.cp-note-form input:focus,.cp-note-form textarea:focus,.cp-note-form select:focus{outline:none;border-color:var(--petrol-l);box-shadow:0 0 0 3px var(--euc-100)}
.cp-note-f-row{display:flex;gap:8px;align-items:center}
.cp-note-f-row .cp-note-f-vis{flex:1 1 auto}
.cp-note-f-pin{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-soft);white-space:nowrap;cursor:pointer}
.cp-note-f-err{font-size:11.5px;margin:0;border-color:var(--red);padding:6px 9px}
.cp-note-f-act{display:flex;justify-content:flex-end;gap:8px;margin-top:1px}

@media (max-width:1100px){
  .cockpit-top{flex-direction:column}
  .cp-notes{flex:1 1 auto;max-width:none}
  /* Auch gestapelt bleibt die Liste intern scrollbar (gedeckelt), damit sie das übrige
     Cockpit nicht nach unten schiebt. */
  .cp-notes-body{max-height:min(380px,55vh)}
}

/* Fall-Panel (Fallakte): volle Breite statt der schmalen Cockpit-Spalte; Liste scrollt
   weiterhin intern. Bei vielen Notizen wächst die Akte dadurch nicht ins Unendliche. */
.cp-notes-fall{flex:none;max-width:none;width:100%}
.cp-notes-fall .cp-notes-body{max-height:300px}

/* KI-Zeile im Notiz-Composer („ATLAS formulieren"). */
.cp-note-f-ai{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp-note-f-ai .cp-note-ai svg{width:14px;height:14px}
.cp-note-ai-status{font-size:11px;color:var(--muted)}
.cp-note-ai-status.busy{color:var(--petrol)}
.cp-note-ai-status.ok{color:var(--petrol-d)}
.cp-note-ai-status.warn{color:var(--amber)}

/* Fallakte auf dem Telefon (Review 15.10.2026): Die Kopf-Aktionen standen bisher als
   sechs bis acht Knöpfe in voller Breite untereinander (.page-intro .btn{width:100%}) —
   Warnung „überfällige Frist" und Kennzahlen lagen erst unterhalb der ersten Bildschirmhöhe.
   Zweispaltig halbiert die Höhe; der lange Knopf „Dokument hochladen …" bekommt die ganze Zeile. */
@media(max-width:760px){
  .page-intro .fall-aktionen{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .fall-aktionen > .pill{justify-self:start;align-self:center}
  .fall-aktionen > #akteFillBtn{grid-column:1/-1}
  .fall-aktionen > details{min-width:0}
  .fall-aktionen > details > summary.btn{width:100%}
}