/* CRM — Gestaltung aus dem Entwurf, ohne Aufbauschritt */

/*
 * Was „hidden" trägt, ist weg — überall (3.13).
 *
 * Der Browser blendet [hidden] von sich aus nur aus, solange keine eigene
 * Regel dem Element eine Darstellung gibt. Genau das tun hier viele:
 * `.callbox .boxform{display:flex}` zum Beispiel. Die Folge stand bis 3.12
 * im Programm, ohne dass eine Prüfung sie sah (die liefen ohne Browser):
 * In der Anrufbox waren Aufgabe, Termin, Rückruf, Interesse, „Kein Bedarf"
 * und „Kein Interesse" immer alle aufgeklappt — die Ergebnis-Knöpfe lagen
 * unter dem Bildschirmrand. Im Nachfass-Radar stand unter jeder Zeile das
 * Notizfeld offen.
 *
 * Einzelne Stellen hatten dafür schon eigene Regeln (.vorschlaege[hidden]
 * …). Diese eine ersetzt sie alle und gilt auch für das, was noch kommt.
 */
[hidden]{display:none !important}
:root{
  /* 3.22 — die hellen Werte der Oberfläche D „Ruhig" (d.css): neutrale Grautöne, nur das Salesfy-Grün als Farbe. */
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#F8F9FA; --surface-3:#F1F3F5;
  --line:#E5E8EB; --line-2:#D3D8DD;
  --ink:#15191B; --ink-2:#4F5B60; --ink-3:#69767B;
  --acc:#0D6E68; --acc-2:#0A5551; --acc-soft:#E8F3F1; --acc-line:#CBE3DF;
  --kopf:#F4F5F7; --auf-gruen:#FFFFFF; --rand-haupt:#0B5F5A;
  --verlauf:linear-gradient(135deg,#17897F 0%,#0D6E68 52%,#0A5551 100%);
  --verlauf-hover:linear-gradient(135deg,#1C968B 0%,#0F7770 55%,#0B5D58 100%);
  --verlauf-quer:linear-gradient(90deg,#0D6E68 0%,#2F978C 100%);
  --schatten-knopf:0 1px 1px rgba(21,25,27,.05);
  --schatten-haupt:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(10,85,81,.3);
  --schatten-seite:-28px 0 56px -28px rgba(21,25,27,.4);
  --schatten-fenster:0 24px 64px -20px rgba(21,25,27,.45);
  --schatten-karte-gross:0 1px 2px rgba(21,25,27,.04),0 18px 44px -22px rgba(21,25,27,.25);
  --schleier:rgba(21,25,27,.28);
  --schatten-mitte-gross:0 32px 80px -28px rgba(10,14,16,.55),0 2px 10px rgba(10,14,16,.08);
  --schatten-mitte:0 28px 70px -24px rgba(10,14,16,.45),0 2px 8px rgba(10,14,16,.06);
  --good:#15803D; --good-soft:#E4F2E9;
  --warn:#A2590A; --warn-soft:#FBEEDC;
  --crit:#B42318; --crit-soft:#FBE9E7;
  --cool:#2F5DA8; --cool-soft:#E8EEF8;
  --plum:#7A3E8F; --plum-soft:#F2E9F5;
  --shadow:0 1px 2px rgba(21,25,27,.04);
  --shadow-lg:0 0 0 1px rgba(21,25,27,.06),0 24px 56px -22px rgba(21,25,27,.45);
  --r:10px; --r-md:12px; --r-sm:7px;
  --ui:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1113; --surface:#14191C; --surface-2:#191F22; --surface-3:#1F262A;
  --line:#262E32; --line-2:#36413F;
  --ink:#E9EEF0; --ink-2:#A3B0B6; --ink-3:#74838A;
  --acc:#3FBDB3; --acc-2:#6FD6CD; --acc-soft:#10312F; --acc-line:#1D4B47;
  --good:#4FBE7B; --good-soft:#12291C; --warn:#DFA04A; --warn-soft:#2E2213;
  --crit:#E87A6D; --crit-soft:#2E1917; --cool:#79A3E8; --cool-soft:#141F31;
  --plum:#C08ED2; --plum-soft:#241A2A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8);
  --kopf:#191F22;
}}
:root[data-theme="dark"]{
  --bg:#0D1113; --surface:#14191C; --surface-2:#191F22; --surface-3:#1F262A;
  --line:#262E32; --line-2:#36413F; --ink:#E9EEF0; --ink-2:#A3B0B6; --ink-3:#74838A;
  --acc:#3FBDB3; --acc-2:#6FD6CD; --acc-soft:#10312F; --acc-line:#1D4B47;
  --good:#4FBE7B; --good-soft:#12291C; --warn:#DFA04A; --warn-soft:#2E2213;
  --crit:#E87A6D; --crit-soft:#2E1917; --cool:#79A3E8; --cool-soft:#141F31;
  --plum:#C08ED2; --plum-soft:#241A2A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8);
  --kopf:#191F22;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.app{display:grid;grid-template-columns:238px 1fr;height:100%}
.rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line)}
.logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--acc),var(--acc-2));display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.brand b{font-size:14.5px;letter-spacing:-.015em;display:block;line-height:1.15}
.brand span{font-size:11.5px;color:var(--ink-3)}
nav.navwrap{overflow-y:auto;padding:10px 8px;flex:1}
.navgroup h6{margin:0;padding:0 8px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.navgroup{margin-bottom:14px}
/* Zuklappbare Gruppen. Der Pfeil zeigt nach unten, wenn offen. */
.navgroup > summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  padding:3px 0 5px;border-radius:var(--r-sm)}
.navgroup > summary::-webkit-details-marker{display:none}
.navgroup > summary:hover h6{color:var(--ink-2)}
.navgroup > summary .sym{width:11px;height:11px;color:var(--ink-3);transition:transform .15s ease;
  transform:rotate(90deg)}
.navgroup[open] > summary .sym{transform:rotate(-90deg)}
/* Zugeklappt reicht ein schmalerer Abstand — sonst steht die Leiste
   voller Luft, wo gerade nichts ist. */
.navgroup:not([open]){margin-bottom:6px}
.navitem{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px}
.navitem:hover{background:var(--surface-3);color:var(--ink)}
.navitem.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.navitem .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);background:var(--surface-3);border-radius:20px;padding:1px 6px}
.railfoot{border-top:1px solid var(--line);padding:10px;display:flex;align-items:center;gap:9px;font-size:12.5px}
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar b{font-size:13px}
/* 3.15 — der Abstand nach oben sitzt an .view, nicht am Blätterbereich. Mit Innenabstand am Blätterbereich klebten
   Leisten (Sprungleiste der Einstellungen, Reiter der Akte) 20px unter der Kopfzeile, und in dem Spalt darüber
   schien beim Blättern der Inhalt durch (Rückmeldung 07.10.2026: „beim Scrollen kommt das mit runter und sieht komisch aus"). */
.scroll{overflow-y:auto;flex:1;padding:0 18px 60px}
.view{max-width:1400px;margin:0 auto;padding-top:20px}
h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.025em}
.vhead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.vhead p{margin:3px 0 0;color:var(--ink-3);font-size:13px;max-width:70ch}
.vhead .acts{margin-left:auto;display:flex;gap:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:14px}
.cardhead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cardhead h3{margin:0;font-size:13.5px;font-weight:600}
.cardhead .sub{font-size:11.5px;color:var(--ink-3)}
.cardhead .acts{margin-left:auto;display:flex;gap:6px}
.pad{padding:14px}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:start}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.stat{padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.stat .lab{font-size:11.5px;color:var(--ink-3)}
.stat .val{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.03em;margin-top:5px;font-variant-numeric:tabular-nums}
.stat .delta{font-size:11.5px;margin-top:2px;color:var(--ink-3)}
.tablewrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:620px}
th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
/* Zahlen brechen nicht um: „1 Stück", „19 %" und „11.900,00 €" bleiben in einer Zeile. */
td.num{white-space:nowrap}
.cellmain b{font-weight:600;display:block}
.cellmain small{display:block;color:var(--ink-3);font-size:11.5px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:500;white-space:nowrap}
.c-neutral{background:var(--surface-3);color:var(--ink-2)}
.c-acc{background:var(--acc-soft);color:var(--acc)}
.c-good{background:var(--good-soft);color:var(--good)}
.c-warn{background:var(--warn-soft);color:var(--warn)}
.c-crit{background:var(--crit-soft);color:var(--crit)}
.c-cool{background:var(--cool-soft);color:var(--cool)}
.c-plum{background:var(--plum-soft);color:var(--plum)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.sm{padding:4px 9px;font-size:12.5px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.meter{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.meter i{display:block;height:100%;background:var(--acc);border-radius:3px}
.kv{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:7px 14px;font-size:13px}
.kv dt{color:var(--ink-3);font-size:12.5px;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.kv dd{min-width:0;overflow-wrap:anywhere}
.kv dd{margin:0;font-weight:500}
@media (max-width:560px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:8px}}
.sec-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.hint{font-size:12.5px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px}
.hint.warn{border-color:var(--warn);color:var(--warn)}
.hint.crit{border-color:var(--crit);color:var(--crit)}
.leer{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.docrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);margin-bottom:7px}
.tl{position:relative;padding-left:22px}
.tl:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line)}
.ev{position:relative;padding:0 0 14px}
.ev:before{content:"";position:absolute;left:-19px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.ev.acc:before{border-color:var(--acc)}
.ev .t{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.ev b{font-size:13px}
.ev p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
/* 3.22.3 — Zeitleiste eines Vorgangs, einer Rechnung, eines Vertrags (teile/zeitleiste): eigene Namen, gleich in alten
   Seiten und in Oberfläche D (dort sind .tl/.ev eine Zeile mit Uhrzeit rechts). */
.vzl{position:relative;padding-left:22px}
.vzl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line)}
.vzl-e{position:relative;display:block;padding:0 0 14px;min-width:0}
.vzl-e:last-child{padding-bottom:0}
.vzl-e::before{content:"";position:absolute;left:-19px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.vzl-e.acc::before{border-color:var(--acc)}
.vzl-e.good::before{border-color:var(--good, var(--acc))}
.vzl-e.warn::before{border-color:var(--warn)}
.vzl-e.crit::before{border-color:var(--crit)}
.vzl-t{display:block;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.vzl-e b{font-size:13px;font-weight:600;color:var(--ink)}
.vzl-e > a{display:inline;color:var(--ink);text-decoration:none}
.vzl-e > a:hover b{text-decoration:underline}
.vzl-e p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere}
.anmeldung{min-height:100%;display:grid;place-items:center;padding:20px}
.anmeldung .box{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:26px}
.field{margin-bottom:12px}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px}
.field textarea{resize:vertical;line-height:1.5}
audio{width:100%;max-width:420px;height:34px}
.fehler{background:var(--crit-soft);color:var(--crit);padding:8px 11px;border-radius:var(--r-sm);font-size:12.5px;margin-bottom:12px}
.ok{background:var(--good-soft);color:var(--good);padding:8px 11px;border-radius:var(--r-sm);font-size:12.5px;margin-bottom:14px}
@media (max-width:900px){.app{grid-template-columns:1fr}.rail{display:none}.grid2{grid-template-columns:1fr}}
/* Seit 3.14: zwei gleich breite Spalten, die ihr Inhalt nicht aufschiebt (Betreiber-Übersicht, Kundenseite). Nebeneinander stehen
   sie erst, wenn in jede eine Tabelle passt (620 px); darunter untereinander — sonst wäre die Seite breiter als das Fenster. */
.grid2.halb{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid2.halb>*{min-width:0}
@media (max-width:1539px){.grid2.halb{grid-template-columns:minmax(0,1fr)}}

/* ── Seitenfenster ─────────────────────────────────────────────────────── */
#panel{position:fixed;inset:0;z-index:60;display:none;background:rgba(10,14,16,.42);backdrop-filter:blur(2px)}
#panel.an{display:block}
html.panel-an,html.panel-an body{overflow:hidden}
#panel{--panelbreite:min(860px,100%)}
/* Läuft ein Gespräch, braucht die Anrufbox Platz neben dem Fenster —
   zwischen 900 und 1260 Pixeln wird das Fenster dafür schmaler (138). */
@media (min-width:901px) and (max-width:1259px){html.panel-an:has(.callbox) #panel{--panelbreite:calc(100% - 376px)}}
.panelbox{position:absolute;top:0;right:0;bottom:0;width:var(--panelbreite);background:var(--bg);
  border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px rgba(0,0,0,.55);
  display:flex;flex-direction:column;animation:panelrein .18s cubic-bezier(.22,.8,.3,1)}
@keyframes panelrein{from{transform:translateX(26px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.panelbox{animation:none}}
.panelkopf{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);
  background:var(--surface);flex:0 0 auto}
.panelkopf b{font-size:13.5px}
.panelkopf .acts{margin-left:auto;display:flex;gap:7px;align-items:center}
.panelzu{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font-size:15px;line-height:1;color:var(--ink-2)}
.panelzu:hover{background:var(--surface-3);color:var(--ink)}
.panelinhalt{overflow-y:auto;flex:1;padding:18px 16px 90px;display:flex;flex-direction:column}
/* Kurzer Inhalt: Knopfleiste trotzdem unten, nicht mitten im Fenster. */
.panelinhalt > *{flex-shrink:0;min-width:0}
.panelinhalt > .panelfuss.panelfuss{margin-top:auto}
.panelladen{padding:60px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.panelinhalt .vhead{margin-bottom:14px}
.panelinhalt .grid2{grid-template-columns:1fr}
.panelfuss{position:sticky;bottom:0;margin-top:18px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panelfuss .muted{font-size:11.5px}
.panelinhalt .panelfuss{margin:18px -16px -90px;padding:12px 16px;border-radius:0;border-left:0;
  border-right:0;border-bottom:0;bottom:-90px;box-shadow:0 -10px 24px -20px rgba(0,0,0,.5)}
.panelinhalt .vhead .acts{display:none}
.panelinhalt h1{font-size:18px}
@media (max-width:900px){.panelbox{width:100%;border-left:0}}

/* Dokumentvorschau */
.vorschau{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-3)}
.vorschau iframe{display:block;width:100%;height:min(72vh,760px);border:0;background:#fff}
.vorschau img{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;background:var(--surface-3)}
.vorschau .keine{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.docrow a.name{flex:1;min-width:0;cursor:pointer}
.docrow a.name:hover b{color:var(--acc);text-decoration:underline}
.docrow a.name b{display:block;font-weight:600}
.docrow a.name small{display:block;font-size:11.5px}

/* ── Anonymes Profil ───────────────────────────────────────────────────── */
.pblatt{font-size:13.5px;line-height:1.5}
.pkopf{display:flex;gap:20px;align-items:flex-start;border-bottom:2px solid var(--acc);padding-bottom:14px;margin-bottom:16px}
.plabel{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.pkennung{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.02em;margin:3px 0 2px}
.pzeile{font-size:13.5px;color:var(--ink-2)}
.pabsender{margin-left:auto;text-align:right;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.pabsender b{color:var(--ink);font-size:13px}
.panschrift{margin:0 0 16px;font-size:13.5px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.pblock{margin-bottom:18px}
.pblock h3{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);padding-bottom:5px}
.pblock dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13px}
.pblock dt{color:var(--ink-3);font-size:12px;white-space:nowrap}
.pblock dd{margin:0;font-weight:500}
.pintro{margin:0 0 10px;font-size:12.5px;color:var(--ink-2)}
.ptab{width:100%;min-width:0;border-collapse:collapse;font-size:12.5px}
.ptab th{background:var(--surface-2);font-size:10.5px;padding:7px 9px}
.ptab td{padding:6px 9px;border-bottom:1px solid var(--line)}
.ptab td.r,.ptab th.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ptab tfoot td{border-top:2px solid var(--line-2);border-bottom:0;padding-top:8px}
.phinweis{margin:10px 0 0;font-size:11.5px;color:var(--ink-2);background:var(--surface-2);
  border-left:3px solid var(--acc-line);padding:8px 11px;border-radius:0 6px 6px 0}
.pfuss{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3)}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}.pkopf{flex-direction:column}.pabsender{margin-left:0;text-align:left}}

/* Aus einer Unterlage eingelesene Felder */
.field input.gelesen,.field select.gelesen,.field textarea.gelesen{
  border-color:var(--acc-line);background:var(--acc-soft)}
.gelesen-chip{margin-left:6px;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:20px;padding:0 5px;
  vertical-align:middle}
.gefahr{border:1px solid var(--crit);border-radius:var(--r);background:var(--crit-soft);padding:12px 14px;margin-top:12px}
.gefahr summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--crit)}
.gefahr .inhalt{margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.gefahr input{width:100%;padding:8px 10px;border:1px solid var(--crit);border-radius:var(--r-sm);
  background:var(--surface);font-size:13px;margin:8px 0}

/* ── Sinnbilder und Kopfleiste ─────────────────────────────────────── */

/* Symbole nehmen die Textfarbe an — im aktiven Menüpunkt also die
   Akzentfarbe, ohne eigene Regel. Etwas blasser als der Text, damit die
   Beschriftung führt und nicht das Bildchen. */
.sym{width:16px;height:16px;flex:none;opacity:.75}
.navitem.on .sym{opacity:1}
.navitem:hover .sym{opacity:1}
.navitem span:not(.n){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tbacts{margin-left:auto;display:flex;align-items:center;gap:8px}
.tbbtn{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.tbbtn:hover{background:var(--surface-3);color:var(--ink)}
.tbbtn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.tbbtn.primary:hover{filter:brightness(1.07);color:#fff}
.tbbtn .sym{width:15px;height:15px;opacity:.9}

/* „Neu" als details/summary: aufklappen ohne eine Zeile JavaScript, und
   es funktioniert auch, wenn ein Skript einmal nicht lädt. */
.neu{position:relative}
.neu>summary{list-style:none}
.neu>summary::-webkit-details-marker{display:none}
.neuliste{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 12px 30px rgba(0,0,0,.14);padding:6px}
.neuliste a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13px}
.neuliste a:hover{background:var(--surface-3);color:var(--ink)}
.neuliste .sym{width:15px;height:15px}

@media (max-width:900px){
  .tbbtn span{display:none}
  .tbbtn{padding:6px 9px}
}

/* ── Diagramme ─────────────────────────────────────────────────────── */
/*
   Ohne Bibliothek gezeichnet. Die Regeln dahinter: dünne Marken, ein
   Grundstrich, zurückhaltende Hilfslinien, beschriftet wird sparsam.
   Zahlen tragen nie die Datenfarbe — die Farbe sitzt auf der Marke,
   der Text bleibt lesbar.
*/
.dia{--dia-hoehe:150px}
.dia-flaeche{position:relative;height:var(--dia-hoehe);margin-bottom:6px}
.dia-netz{position:absolute;inset:0;pointer-events:none}
.dia-netz span{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.dia-saeulen{position:absolute;inset:0;display:flex;align-items:flex-end}
.dia-slot{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;padding:0 3px;position:relative}
/* Höchstens 24px breit: Der Rest des Platzes bleibt Luft, statt dass
   die Säule ihn ausfüllt. */
.dia-saeule{display:block;width:100%;max-width:24px;background:var(--dia-farbe,var(--acc));
  border-radius:4px 4px 0 0;min-height:2px;transition:filter .12s}
.dia-slot:hover .dia-saeule{filter:brightness(1.12)}
.dia-zahl{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);margin-bottom:3px;white-space:nowrap}
.dia-achse{display:flex;font-size:10.5px;color:var(--ink-3)}
.dia-achse span{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}

.trichter{display:flex;flex-direction:column;gap:7px}
.tr-zeile{display:grid;grid-template-columns:150px 1fr 54px;gap:10px;align-items:center}
.tr-name{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-bahn{position:relative;display:flex;align-items:center;gap:8px;height:20px}
.tr-balken{display:block;height:100%;border-radius:0 4px 4px 0;min-width:2px}
.tr-wert{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.tr-rest{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right}

.vert-band{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--surface-3);
  /* 2px Spalt in der Flächenfarbe trennt die Stücke — kein Rahmen. */
  gap:2px}
.vert-band span{display:block;min-width:2px}
.vert-liste{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.vert-punkt{display:flex;align-items:center;gap:6px;font-size:12.5px}
.vert-farbe{width:9px;height:9px;border-radius:3px;flex:none}
.vert-name{color:var(--ink-2)}
.vert-zahl{font-size:12px}
.vert-anteil{font-size:11px}

.diagitter{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1000px){.diagitter{grid-template-columns:1fr}.tr-zeile{grid-template-columns:110px 1fr 46px}}

/* Wähltastatur im Softphone */
.tastenfeld{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px;max-width:270px}
.taste{padding:10px 0;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:15px;color:var(--ink);cursor:pointer}
.taste:hover{background:var(--surface-3)}
.taste:active{background:var(--acc-soft);color:var(--acc)}
.taste.weit{grid-column:span 1;font-size:12px;font-family:var(--ui)}
.taste.weit[data-loeschen]{grid-column:span 2}

/* ── Kopfleiste wie im Entwurf ─────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);min-width:0}
.crumb b{color:var(--ink);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb .sym{width:13px;height:13px}
/* Seit 3.14.1: Logo, „Workspace" und der Pfeil zurück sind anklickbar. */
a.brand{color:inherit;text-decoration:none}
a.brand:focus-visible,.crumb a:focus-visible,.topbar .zurueck:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-sm)}
.crumb a{color:inherit;text-decoration:none;white-space:nowrap}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.topbar .zurueck{flex:none;border:0;background:none;cursor:pointer;padding:0;margin-left:-4px}

.suche{flex:1;max-width:420px;margin-left:auto;position:relative;display:block}
.suche input{width:100%;padding:6px 10px 6px 30px;border:1px solid var(--line);background:var(--surface-2);
  border-radius:var(--r-sm);font-size:13px}
.suche input::placeholder{color:var(--ink-3)}
.suche input:focus{outline:none;border-color:var(--acc-line);background:var(--surface);box-shadow:0 0 0 3px var(--acc-soft)}
.suche .sym{position:absolute;left:9px;top:50%;transform:translateY(-50%);pointer-events:none;width:15px;height:15px}
.suche kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;
  color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:1px 4px;background:var(--surface)}

/* Vorschläge unter dem Suchfeld — was es schon gibt, waehrend getippt wird. */
.vorschlaege{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:min(70vh,460px);
  overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 12px 30px rgba(0,0,0,.14);padding:4px 0}
.vorschlaege[hidden]{display:none}
.vorschlaege .vgruppe{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  padding:8px 12px 4px;font-weight:600}
.vorschlaege a{display:flex;gap:9px;align-items:center;padding:7px 12px;text-decoration:none;color:inherit}
.vorschlaege a .sym{width:14px;height:14px;color:var(--ink-3);flex:none}
.vorschlaege a b{font-size:13px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vorschlaege a span{font-size:11.5px;color:var(--ink-3);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.vorschlaege a .vtext{min-width:0;flex:1}
.vorschlaege a.an,.vorschlaege a:hover{background:var(--acc-soft)}
.vorschlaege .vfuss{border-top:1px solid var(--line);margin-top:4px}
.vorschlaege .vleer{padding:10px 12px;font-size:12.5px;color:var(--ink-3)}

.tbacts{display:flex;align-items:center;gap:8px}
.tbbtn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.tbbtn.ghost:hover{background:var(--surface-3);color:var(--ink)}

.avatar{width:27px;height:27px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--ink-2);flex:none;border:1px solid var(--line)}
.railfoot .who{min-width:0;flex:1}
.railfoot .who b{font-size:12.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railfoot .who span{font-size:11px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-3);
  flex:none;border:0;background:none;cursor:pointer}
.iconbtn:hover{background:var(--surface-3);color:var(--ink)}
.iconbtn .sym{width:16px;height:16px;opacity:1}

.list{display:flex;flex-direction:column}
.li{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:flex-start}
.li:last-child{border-bottom:0}
.li:hover{background:var(--surface-2)}
.li b{font-weight:600;font-size:13px}
.li p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.cardhead .sym{width:15px;height:15px;color:var(--ink-3)}

@media (max-width:900px){.suche{max-width:none}.crumb{display:none}}
/* Seit 3.14.1 steht auf dem Handy der Pfeil zurück vor der Suche: Der Hinweis auf die Tastenkombination hilft dort niemandem — der Platz gehört dem Suchtext. */
@media (max-width:560px){.suche kbd{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   Bausteine aus dem Entwurf „Musterfirma Cockpit"

   Bis hierher war im CRM nur das gebaut, was eine Liste und ein
   Formular brauchen. Der Entwurf hatte mehr: eine Anrufbox, die
   während des Gesprächs stehenbleibt, Fenster statt Seitenwechsel,
   Reiter, Filterschalter, kleine Verlaufslinien in den Kennzahlen.
   Die Regeln sind aus dem Entwurf übernommen, nicht neu erfunden —
   damit beides dieselbe Sprache spricht.
   ══════════════════════════════════════════════════════════════════ */

/* ── Grundformen ──────────────────────────────────────────────────── */
.grid{display:grid;gap:14px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:start}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.card.flat{box-shadow:none}
.chip .bullet{width:5px;height:5px;border-radius:50%;background:currentColor}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3);color:var(--ink)}
.btn.danger{color:var(--crit)}
.btn.primary:hover{background:var(--acc-2);border-color:var(--acc-2);color:#fff}
/* `ico` ist der Name aus dem Entwurf, `sym` der hier gewachsene.
   Beide zeigen dasselbe — so passt übernommenes Markup ohne Umbau. */
.ico{width:16px;height:16px;flex:none;opacity:.75}

/* Überschriften bleiben beim Rollen stehen: Wer in einer langen
   Tabelle unten ist, weiß sonst nicht mehr, welche Spalte was ist. */
th{position:sticky;top:0;z-index:1}

/* ── Filterleiste und Schalter ────────────────────────────────────── */
.filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-sm);padding:2px;gap:2px}
.seg a,.seg button{padding:4px 10px;border-radius:5px;font-size:12.5px;color:var(--ink-2);
  font-weight:500;border:0;background:none;cursor:pointer;white-space:nowrap}
.seg a.on,.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 14px;overflow-x:auto}
.tabs a,.tabs button{padding:7px 11px;font-size:13px;color:var(--ink-3);border:0;background:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;cursor:pointer}
.tabs a.on,.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--acc);font-weight:600}
.tabs .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:5px}

/* ── Kennzahlen mit Verlauf ───────────────────────────────────────── */
.stat .lab{display:flex;align-items:center;gap:6px}
.stat .lab .sym,.stat .lab .ico{width:13px;height:13px}
.stat .delta{display:flex;align-items:center;gap:4px}
.up{color:var(--good)} .down{color:var(--crit)}
/* Die Linie sagt, woher die Zahl kommt. Eine Zahl allein sagt nur,
   wo man steht — nicht, ob es bergauf ging. */
.spark{display:block;width:100%;height:30px;margin-top:6px;overflow:visible}
.spark path{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spark .flaeche{fill:var(--acc-soft);stroke:none}
.spark .ende{stroke-width:2.5;opacity:.55}

/* ── Zeilenmarke ──────────────────────────────────────────────────── */
/* Ein Strich am Zeilenanfang statt einer eingefärbten Zeile: Die
   Dringlichkeit ist zu sehen, ohne dass der Text darunter leidet. */
.rowbar{width:3px;align-self:stretch;border-radius:2px;background:var(--line-2);flex:none;min-height:26px}
.rowbar.hot{background:var(--crit)}
.rowbar.warm{background:var(--warn)}
.rowbar.ok{background:var(--good)}
.cellmain{display:flex;align-items:center;gap:9px;min-width:0}
/* Die Namenszelle ist ein Flexkasten und streckt sich nicht auf die Zeilenhöhe. Ihr Unterstrich säße
 * deshalb höher als der der Nachbarzellen, sobald eine davon zweizeilig ist. Den Strich zieht hier
 * die Zeile selbst — dann liegt er in jeder Spalte auf derselben Höhe. */
tr:has(> td.cellmain){border-bottom:1px solid var(--line)}
tr:has(> td.cellmain) > td{border-bottom:0}
tbody tr:last-child:has(> td.cellmain){border-bottom:0}
/* Positionen in Angebot und Rechnung: Bezeichnung oben, Beschreibung darunter, mittig in der Zeile. */
.postab .cellmain{display:table-cell}
.postab .cellmain small{margin-top:2px;white-space:normal}
.li .when{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-family:var(--mono)}

/* ── Tafel (Spalten mit Karten) ───────────────────────────────────── */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:268px;gap:12px;overflow-x:auto;
  padding-bottom:8px;align-items:start}
.board .col{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);min-height:120px}
.board .col>header{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid var(--line)}
.board .col>header b{font-size:12.5px;font-weight:600}
.board .col>header .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.board .col .body{padding:8px;display:flex;flex-direction:column;gap:8px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;
  display:block;transition:box-shadow .12s,transform .12s}
.kcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.kcard b{font-size:13px;font-weight:600;display:block}
.kcard .meta{font-size:11.5px;color:var(--ink-3);margin-top:3px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}

/* ── Monatsblatt ──────────────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line);
  border-top:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:640px}
.cal .dh{padding:7px 9px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);background:var(--surface-2);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.cal .day{min-height:108px;padding:6px 7px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--surface)}
.cal .day.off{background:var(--surface-2)}
.cal .day .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.cal .day.today .n{color:var(--acc);font-weight:600}
.cal .ev{margin-top:4px;font-size:11px;padding:3px 6px;border-radius:5px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px}
.cal .ev:before{display:none}

/* ── Ablagefeld ───────────────────────────────────────────────────── */
.dropzone{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:18px;text-align:center;
  color:var(--ink-3);font-size:12.5px;background:var(--surface-2)}
.dropzone.drueber{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}

/* ── Schublade ────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(10,16,18,.42);backdrop-filter:blur(2px);z-index:60;
  opacity:0;transition:opacity .18s}
.scrim.an{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--surface);
  border-left:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:61;display:flex;
  flex-direction:column;transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.drawer.an{transform:none}
.dhead{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.dhead h2{margin:0;font-size:17px;letter-spacing:-.02em;font-weight:600}
.dhead .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.dbody{overflow-y:auto;padding:16px;flex:1}
.dfoot{border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:8px;flex-wrap:wrap;
  background:var(--surface-2)}

/* ── Fenster ──────────────────────────────────────────────────────── */
.modalwrap{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;
  background:rgba(10,16,18,.45);backdrop-filter:blur(2px)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  width:min(580px,100%);max-height:88vh;display:flex;flex-direction:column;
  animation:auftauchen .18s cubic-bezier(.4,0,.2,1)}
@keyframes auftauchen{from{opacity:0;transform:translateY(10px) scale(.985)}}
.modal>header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:11px;align-items:center}
.modal>header h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.015em;flex:1}
.modal>header .sub{font-size:11.5px;color:var(--ink-3);font-weight:400;display:block;margin-top:1px}
.mbody{padding:16px;overflow-y:auto;display:grid;gap:12px}
.modal>footer{padding:11px 16px;border-top:1px solid var(--line);display:flex;gap:8px;
  justify-content:flex-end;background:var(--surface-2);border-radius:0 0 14px 14px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.picker a,.picker button{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);font-size:13px;font-weight:500;text-align:left;
  color:var(--ink);cursor:pointer}
.picker a:hover,.picker button:hover{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
.field label i{color:var(--crit);font-style:normal}
.field input.bad{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc-line);
  background:var(--surface);box-shadow:0 0 0 3px var(--acc-soft)}

/* ── Kurznachricht ────────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:10px 18px;border-radius:22px;z-index:90;font-size:13px;font-weight:500;line-height:1.4;
  box-shadow:var(--shadow-lg);animation:auftauchen .2s;max-width:min(560px,calc(100vw - 32px))}

/* ── Anrufbox ─────────────────────────────────────────────────────── */
/*
   Der wichtigste Unterschied zum bisherigen Softphone: Sie steht
   unten rechts und bleibt während des Gesprächs stehen. Wer
   telefoniert, muss die Liste darunter sehen können — und beim
   Auflegen soll die Notiz schon geschrieben sein, nicht erst
   hinterher aus dem Gedächtnis.
*/
.callbox{position:fixed;right:18px;bottom:18px;width:300px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:70;overflow:hidden;
  /* Etappe 137: Die Box ist mit den Ergebnis-Knöpfen aus 134/135 höher
     geworden als mancher Bildschirm. Unten verankert wuchs sie nach oben
     aus dem Fenster — Zeit, Stumm und Auflegen waren dann weg, sichtbar
     blieben nur die Knöpfe ganz unten. Jetzt: nie höher als das Fenster,
     Kopf und Knöpfe bleiben stehen, die Mitte rollt. */
  display:flex;flex-direction:column;max-height:calc(100vh - 36px)}
.callbox .top,.callbox .ctrl{flex:none}
.callbox .note{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.callbox .top{padding:14px;background:linear-gradient(160deg,var(--acc),var(--acc-2));color:#fff}
.callbox .top b{font-size:15px;display:block;letter-spacing:-.01em}
.callbox .top span{font-size:12px;opacity:.9}
.callbox .top .zeile{display:flex;align-items:center;gap:6px;font-size:11.5px;opacity:.9}
.callbox .timer{font-family:var(--mono);font-size:26px;margin-top:8px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.callbox .ctrl{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line)}
.callbox .ctrl button{flex:1;padding:7px 0;border-radius:var(--r-sm);border:1px solid var(--line);
  font-size:12px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-2);
  background:var(--surface);cursor:pointer}
.callbox .ctrl button:hover{background:var(--surface-3)}
.callbox .ctrl button.an{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
.callbox .ctrl button.hangup{background:var(--crit);border-color:var(--crit);color:#fff}
.callbox .ctrl .sym{width:16px;height:16px;opacity:1}
.callbox .note{padding:12px;display:flex;flex-direction:column;gap:8px}
/* Die Abschnittstitel aus dem Entwurf: „Während des Gesprächs",
   „Gesprächsnotiz". Sie kosten zwei Zeilen und sparen das Raten, wozu
   die Knöpfe darunter gehören. */
.callbox .feldtitel{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px}
.callbox .feldtitel:first-child{margin-top:0}
.callbox .schnell{display:flex;gap:6px;flex-wrap:wrap}
.callbox .schnell button,.callbox .schnell a{font-size:12.5px;padding:6px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500;
  cursor:pointer;white-space:nowrap}
.callbox .schnell button:hover,.callbox .schnell a:hover{background:var(--acc-soft);
  border-color:var(--acc-line);color:var(--acc)}
.callbox .boxform{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2)}
.callbox .boxform label{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.callbox .boxform input{width:100%;padding:7px 9px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);font-size:12.5px}
.callbox .boxform input:focus{outline:none;border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
.callbox .boxform .btn{justify-content:center}
.callbox textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;
  font-size:12.5px;background:var(--surface-2);resize:vertical;min-height:62px}
.callbox textarea:focus{outline:none;border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
/* Zwei mal zwei statt drei und einem Nachzügler: Vier Ergebnisse
   passen in 340 Pixel nicht nebeneinander, und ein einzelner Knopf in
   der zweiten Reihe sieht aus wie vergessen. */
.callbox .ende{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
/* „Ansprechpartner nicht da …" (138): eine Zeile, bernstein — halb erreicht. */
.callbox .ende.ende-weg{grid-template-columns:1fr;margin-top:6px}
.callbox .ende.ende-weg button{border-color:var(--warn);color:var(--warn)}
.callbox .ende.ende-weg button:hover{background:var(--warn);color:#fff}
.callbox .ende button{font-size:12.5px;padding:6px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500;cursor:pointer}
.callbox .ende button:hover{background:var(--surface-3)}
/* 3.13: das gewählte Ergebnis, solange darunter der nächste Schritt offen ist */
.callbox .ende button.gewaehlt{background:var(--acc);border-color:var(--acc);color:#fff}
.callbox .boxform label.haken{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.callbox .boxform label.haken input{width:auto}
/* Auswahlfelder in der Box sahen aus wie vom Betriebssystem (schwarzer Rand) — jetzt wie die Eingabefelder daneben. */
.callbox select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:12.5px}
.callbox select:focus{outline:none;border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
.callbox .ctrl button .sym{width:17px;height:17px}
/* Bis 300 Pixel passen fünf Knöpfe nicht in eine Zeile — sie brechen
   um. Auf einem breiten Bildschirm ist die Box im Entwurf breiter und
   sie stehen nebeneinander; beides ist richtig. */
@media (min-width:901px){.callbox{width:340px}}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:pulsschlag 1.6s infinite;flex:none}
@keyframes pulsschlag{0%,100%{opacity:.3}50%{opacity:1}}

/* ── Anrufplanung ─────────────────────────────────────────────────── */
.block{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:12px}
.block>header{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line)}
.block>header .zeit{font-family:var(--mono);font-size:12px;color:var(--acc);background:var(--acc-soft);
  border:1px solid var(--acc-line);border-radius:20px;padding:1px 8px;flex:none}
.block>header b{font-size:13px;font-weight:600}
.block>header .warum{font-size:11.5px;color:var(--ink-3)}
.block>header .n{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.block.jetzt{border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
.ziel{display:flex;align-items:center;gap:10px}
.ziel .meter{flex:1}
.ziel .zahl{font-family:var(--mono);font-size:13px;white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:1080px){.split{grid-template-columns:1fr}}
@media (max-width:900px){.callbox{right:10px;left:10px;bottom:10px;width:auto}}
/* Die Anrufbox lag über dem Seitenfenster: z-index 70 gegen 60, und
   beide rechts unten. „Akte öffnen" während des Gesprächs zeigte also
   die Akte — hinter dem Telefon. Jetzt rückt die Box links neben das
   Fenster, sobald es offen ist (138). Auf schmalen Bildschirmen, wo das
   Fenster die ganze Breite hat, tritt sie dahinter zurück — ein Klick
   auf „Schließen" holt sie wieder vor. */
html.panel-an .callbox{right:calc(min(860px,100vw) + 18px)}
@media (min-width:901px) and (max-width:1259px){html.panel-an .callbox{right:calc(100vw - 376px + 18px)}}
@media (max-width:900px){html.panel-an .callbox{right:10px;z-index:55}}
@media (max-width:560px){.drawer{width:100%}}
@media (max-width:520px){.f2,.picker{grid-template-columns:1fr}}

/* ── Dunkel: Schrift auf der Akzentfarbe ───────────────────────────────
   Im Hellen ist die Akzentfarbe dunkelgrün, da steht weiße Schrift
   darauf. Im Dunkeln ist sie ein helles Türkis — dort ist Weiß auf
   Weiß-ish, und der Text auf dem „Auflegen"-Knopf und im Kopf der
   Anrufbox verliert seinen Kontrast. Deshalb dort dunkle Schrift.
   Stand bereits so im Entwurf; beim Übernehmen war es liegengeblieben. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .callbox .top,
  :root:not([data-theme="light"]) .btn.primary,
  :root:not([data-theme="light"]) .tbbtn.primary,
  :root:not([data-theme="light"]) .logo{color:#04201E}
  :root:not([data-theme="light"]) .btn.primary:hover,
  :root:not([data-theme="light"]) .tbbtn.primary:hover{color:#04201E}
}
:root[data-theme="dark"] .callbox .top,
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .tbbtn.primary,
:root[data-theme="dark"] .logo{color:#04201E}
:root[data-theme="dark"] .btn.primary:hover,
:root[data-theme="dark"] .tbbtn.primary:hover{color:#04201E}

/* Ein schmales Seitenfenster für Inhalte, die keine Übersicht sind —
   das Softphone etwa ist ein Wählfeld. 860 Pixel dafür sehen aus, als
   hätte man eine ganze Seite aufgemacht. */
#panel.schmal .panelbox{width:min(460px,100%)}

/* Was der Browser gerade macht. Stumm scheiternde Technik ist das
   Gegenteil von hilfreich — also steht es da. */
.callbox .top .stand{font-size:11.5px;opacity:.9;margin-top:4px;line-height:1.35}

/* Gespräch beendet: Der rote „Auflegen"-Knopf wird zum grünen
   „Ergebnis speichern". Rot heißt trennen — wenn nichts mehr zu
   trennen ist, ist Rot eine falsche Auskunft. */
.callbox .ctrl button.fertig{background:var(--good);border-color:var(--good);color:#fff}
.callbox[data-beendet] .top{filter:saturate(.55)}
.callbox[data-beendet] .pulse{animation:none;opacity:.35}
.callbox .ctrl button[disabled]{opacity:.45;cursor:not-allowed}

/* Die Klingelbox und das angenommene Gespräch werden vom Skript
   gebaut — ein Seitenwechsel würde die Leitung trennen. Sie nutzen
   dieselben Formen wie die Anrufbox; nur stapeln müssen sie sich,
   falls beide gleichzeitig dastehen. */
.callbox[data-klingelt]{bottom:calc(18px + 180px)}
.callbox[data-klingelt] .ctrl button{font-size:13px;font-weight:600;padding:10px 0}
.callbox[data-laufend] .note textarea{margin-top:6px}
@media (max-width:900px){.callbox[data-klingelt]{bottom:calc(10px + 170px)}}

/* Nach dem Auflegen: dieselbe Behandlung wie bei der Anrufbox vom
   Server — Kopf blasser, Puls aus, Zeit steht. */
.callbox[data-beendet] .timer{opacity:.75}
.callbox[data-klingelt] .top .mono{opacity:.85}

/* ── Der Aktenkopf ────────────────────────────────────────────────────
 *
 * Name, Zustand, eine Zeile Herkunft — mehr nicht. Alles Weitere steht
 * in den Reitern darunter. Die Zeile darunter beantwortet die Frage,
 * die man beim Öffnen einer Akte zuerst hat: Wer ist das, wo sitzt der,
 * und seit wann haben wir miteinander zu tun.
 */
.aktenkopf{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px}
.aktenkopf h1{font-size:19px;margin:0;line-height:1.25}
.aktenkopf .herkunft{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px}
.aktenkopf .zustand{margin-left:auto;display:flex;gap:6px;align-items:center;flex-shrink:0}
.panelinhalt .aktenkopf h1{font-size:17px}

/* Die Reiterleiste bleibt beim Blättern stehen. Wer in einer langen
 * Korrespondenz nach unten liest, findet sonst nicht zurück. */
.reiterleiste{position:sticky;top:0;z-index:3;background:var(--bg);
  padding-top:2px;margin-bottom:14px}
.panelinhalt .reiterleiste{background:var(--bg)}
.panelinhalt .reiterleiste{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
/* Im Seitenfenster hat der Blätterbereich oben 18px Innenabstand. Ohne
 * diesen Ausgleich scheint beim Blättern Inhalt über der Leiste durch. */
.panelinhalt .reiterleiste{top:-18px;padding-top:20px;box-shadow:0 1px 0 var(--line)}
.reiterleiste{box-shadow:0 -12px 0 var(--bg)}

/* Abschnitte innerhalb eines Reiters. Der erste braucht keinen Abstand
 * nach oben, jeder weitere schon — sonst kleben sie aneinander. */
/* Feldpaare brauchen keine 1400 Pixel. Ein Wert, der einen Meter
 * rechts vom Feldnamen steht, gehört optisch nicht mehr dazu. */
.reiterblatt .kv{max-width:660px}
.reiterblatt > .sec-title{margin:20px 0 8px}
.reiterblatt > .sec-title:first-child{margin-top:0}
.reiterkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 8px}
.reiterkopf:first-child{margin-top:0}
.reiterkopf .sec-title{margin:0}

/* ── Nachfass-Radar ───────────────────────────────────────────────────
 *
 * Links die Liste, rechts die Regeln, die sie erzeugen. Ohne die
 * Regeln daneben wirkt der Radar wie Zauberei: Man sieht Einträge
 * auftauchen und weiß nicht, wer sie bestellt hat.
 */
.radar{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
/* Erst ab einem wirklich breiten Bildschirm stehen Liste und Regeln
 * nebeneinander. Darunter würde die Liste so schmal, dass die
 * Knöpfe am rechten Rand abgeschnitten sind — und ein Knopf, den man
 * nicht sieht, ist keiner. */
@media (max-width:1420px){.radar{grid-template-columns:minmax(0,1fr)}}
.panelinhalt .radar{grid-template-columns:1fr}

/* Der farbige Strich am Zeilenanfang. Rot heißt: das hier zuerst. */
.prio{display:block;width:3px;height:30px;border-radius:2px}

.radarliste td{vertical-align:top;padding-top:10px;padding-bottom:10px}
/* .cellmain ist sonst ein Flexkasten — hier soll der Name über der
 * Nummer stehen, nicht daneben. Wichtig: table-cell, nicht block.
 * Als Block hört die Zelle auf, sich auf die Zeilenhöhe zu strecken,
 * und ihr Unterstrich lag dann mitten in der Zeile. */
.radarliste .cellmain{display:table-cell}
.radarliste .cellmain b,.radarliste .cellmain small{display:block}
.radarliste .num{white-space:nowrap}
.radarliste .chip{white-space:normal;text-align:left}

/* Ergebnis eintippen und abhaken, ohne die Zeile zu verlassen. Wer
 * erst die Akte öffnen muss, um „erledigt" zu sagen, sagt es nicht.
 *
 * Zwei Zeilen statt einer: nebeneinander bräuchte die Spalte 250
 * Pixel, und die fehlen dann der Liste — dort stand der Name dann
 * dreizeilig umgebrochen. */
.zeilenaktion{display:flex;flex-direction:column;gap:5px}
.zeilenaktion form{display:flex;gap:4px;align-items:center}
.zeilenaktion .rest{display:flex;gap:4px}
.zeilenaktion input{flex:1;min-width:0;padding:4px 8px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);font-size:12px}
.zeilenaktion select{flex:1;min-width:0;padding:4px 6px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);font-size:12px;color:var(--ink)}
.zeilenaktion [data-zeile-zusatz] input[type=datetime-local]{flex:0 0 auto;width:160px}
/* Der Hörer in der Zeile (136): grün, damit er als „jetzt anrufen" gelesen
   wird und nicht als dritter grauer Knopf. */
.zeilenaktion .hoerer{padding:4px 7px;color:var(--good);border-color:var(--good)}
.zeilenaktion .hoerer svg{width:13px;height:13px}
.zeilenaktion .hoerer:hover:not(:disabled){background:var(--good);color:#fff}
.zeilenaktion .hoerer:disabled{opacity:.4;cursor:not-allowed}

/* ── „Was zu tun ist" über der Akte ───────────────────────────────────
 *
 * Der erste Blick in eine Akte beantwortet die Frage: Warum bin ich
 * hier? Der Nachfass-Radar weiß es längst — hier steht es auch.
 */
.zutun{border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:var(--r);background:var(--surface);padding:11px 13px;margin:0 0 14px}
.zutun.dringend{border-left-color:var(--crit)}
.zutun .kopf{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.zutun .kopf b{font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.zutun .posten{display:flex;gap:10px;align-items:baseline;font-size:12.5px;padding:3px 0}
.zutun .posten b{font-weight:600}
.zutun .wann{font-size:11.5px;color:var(--ink-3);width:46px;flex:none}
.zutun .wann.spaet{color:var(--crit);font-weight:600}

/* ── Der Einstieg in den Tag ──────────────────────────────────────────
 *
 * Steht ganz oben auf der Übersicht und beantwortet die eine Frage,
 * die man morgens hat: Wie viele Anrufe habe ich heute, und wo fange
 * ich an. Ein Knopf daneben, mehr braucht es nicht.
 */
.tagesstart{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--shadow);padding:14px 16px;margin:0 0 14px}
.tagesstart.dringend{border-left-color:var(--crit)}
.tagesstart .zahl{text-align:center;flex:none;min-width:74px}
.tagesstart .zahl b{display:block;font-size:30px;line-height:1.05;font-weight:600}
.tagesstart .zahl span{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.tagesstart .text{flex:1;min-width:220px}
.tagesstart .text b{font-size:14px;font-weight:600}
.tagesstart .text p{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
.tagesstart .balken{margin-top:9px;display:flex;align-items:center;gap:9px}
.tagesstart .balken .meter{flex:1;max-width:260px}
.tagesstart .balken span{font-size:11.5px;white-space:nowrap}
.tagesstart .knopf{display:flex;gap:8px;align-items:center;flex:none;flex-wrap:wrap}
@media (max-width:760px){.tagesstart .knopf{width:100%}}

/* Ein abgeschalteter Knopf muss abgeschaltet aussehen. Sonst drückt
 * man ihn, nichts passiert, und man sucht den Fehler bei sich. Warum
 * er nicht kann, steht im Titel und daneben im Hinweis. */
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── Die Leiste zwischen zwei Anrufen ─────────────────────────────────
 *
 * Sagt, wer als Nächstes dran ist, und zählt herunter. Ein Dialer,
 * der wählt und erst danach verrät, wen, nimmt einem die Entscheidung
 * ab, die einem gehört.
 */
.dialerleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--acc);border-left:3px solid var(--acc);border-radius:var(--r);
  background:var(--acc-soft);padding:10px 13px;margin:0 0 14px}
.dialerleiste.pause,.dialerleiste.gestoppt{border-color:var(--line);
  border-left-color:var(--ink-3);background:var(--surface-2)}
.dialerleiste .was{flex:1;min-width:220px}
.dialerleiste .was b{display:block;font-size:13.5px}
.dialerleiste .was span{font-size:11.5px;color:var(--ink-3)}
.dialerleiste .uhr{font-size:12px;color:var(--ink-3);white-space:nowrap}
.dialerleiste .uhr b{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--acc)}
.dialerleiste.gestoppt .uhr b{color:var(--ink-3)}
.dialerleiste form{margin:0}

/* Was eben festgehalten wurde — damit die Notiz nicht mit der Box
 * verschwindet, während schon der nächste Anruf läuft. */
.dialerletzte{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--good);border-radius:var(--r);
  background:var(--surface);padding:9px 13px;margin:0 0 10px}
.dialerletzte b{display:block;font-size:12.5px}
.dialerletzte span{display:block;font-size:11.5px;color:var(--ink-3)}

/* Worum es in diesem Gespräch geht — beim Power-Dialer der Anlass aus
 * der Wiedervorlage. Ohne das telefoniert man und weiß erst hinterher,
 * warum man angerufen hat. */
.callbox .anlass{font-size:11.5px;color:var(--ink-2);margin-top:5px;
  padding:5px 7px;border-radius:var(--r-sm);background:var(--surface-3);line-height:1.35}

/* Auswahlfeld mit Suche darüber. Das Suchfeld sitzt direkt auf der
 * Liste, damit klar ist, dass es dazugehört und nicht etwas anderes
 * durchsucht. */
.suchwahl input[type=search]{margin-bottom:5px}
.suchwahl select{width:100%}
.suchwahl small{display:block;margin-top:4px;font-size:11px}

/* ── Monatskalender ───────────────────────────────────────────────────
 *
 * Immer sechs Wochen, damit das Blatt beim Blättern nicht die Höhe
 * wechselt. Die Randtage der Nachbarmonate stehen blass mit da — ohne
 * sie fehlt der Termin am Ersten des Folgemonats in genau der Woche,
 * in der man plant.
 */
.monat{border-top:1px solid var(--line)}
.monat .kopf{display:grid;grid-template-columns:repeat(7,1fr);
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.monat .kopf div{padding:7px 9px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.monat .woche{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.monat .woche:last-child{border-bottom:0}
.monat .tag{min-height:108px;padding:6px 7px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;min-width:0}
.monat .tag:last-child{border-right:0}
.monat .tag.we{background:var(--surface-2)}
.monat .tag.fremd{opacity:.45}
.monat .tag.heute{box-shadow:inset 0 0 0 2px var(--acc)}
.monat .zahl{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:2px}
.monat .tag.heute .zahl{color:var(--acc);font-weight:600}

/* Ein Eintrag im Kalender: Zeit, Titel, mit wem. Drei Zeilen wären zu
 * viel für einen Tag, deshalb beschnitten statt umgebrochen. */
.monat .eintrag{display:block;padding:3px 5px;border-radius:4px;font-size:11.5px;
  background:var(--surface-3);border-left:2px solid var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.monat .eintrag:hover{background:var(--acc-soft);color:var(--acc)}
.monat .eintrag.fest{border-left-color:var(--acc)}
.monat .eintrag.gut{border-left-color:var(--good)}
.monat .eintrag.ab{border-left-color:var(--crit);opacity:.6;text-decoration:line-through}
.monat .eintrag .zeit{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-right:4px}
.monat .eintrag .was{font-weight:500}
.monat .eintrag .wer{display:block;font-size:10.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis}

/* Stichtage aus den Vermittlungen — kein Termin, sondern ein Datum aus
 * der Akte. Gestrichelt, damit man beides auf einen Blick
 * auseinanderhält: Das eine ist verabredet, das andere festgehalten. */
.monat .eintrag.merk{background:transparent;border:1px dashed var(--line-2);
  border-left:2px solid var(--ink-3)}
.monat .eintrag.merk.vertrag{border-left-color:var(--acc)}
.monat .eintrag.merk.antritt{border-left-color:var(--good)}
.monat .eintrag.merk.frist{border-left-color:var(--warn)}
.monat .eintrag.merk.ende{border-left-color:var(--crit)}
.monat .eintrag.merk .zeit{font-size:8px;vertical-align:middle}

@media (max-width:820px){
  .monat .tag{min-height:74px}
  .monat .eintrag .wer{display:none}
}
.panelinhalt .monat .tag{min-height:80px}

/* Die freie Fläche eines Kalendertages legt einen Termin an. Das „+"
 * erscheint beim Darüberfahren — sichtbar genug, um es zu finden,
 * leise genug, um das Blatt nicht zu verstellen. */
.monat .tag{cursor:pointer}
.monat .zahl .plus{float:right;color:var(--acc);font-weight:600;opacity:0;transition:opacity .12s}
.monat .tag:hover .zahl .plus{opacity:1}
.monat .tag:hover{background:var(--acc-soft)}
.monat .tag.we:hover{background:var(--acc-soft)}

/* ── Profilmappe ────────────────────────────────────────────────────
   Links stellt man ein, rechts sieht man das Ergebnis. Die Vorschau
   bleibt beim Scrollen stehen: Wer unten am Anschreiben schreibt, will
   oben sehen, was dabei herauskommt. */
.mappe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:start}
.mappe-vorschau{position:sticky;top:12px}
.mappe-pdf{display:block;width:100%;height:76vh;border:0;border-top:1px solid var(--line);
  background:var(--surface-2)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kasten{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:12.5px;cursor:pointer}
.kasten input{width:auto;margin-top:2px;flex:none}
/* Ein Ankreuzfeld ist kein Textfeld: Ohne das zieht die Regel für
   .field input es auf volle Breite und schiebt die Beschriftung aus
   dem Kasten — man sieht dann Kästchen ohne Text daneben. */
.field input[type=checkbox],.field input[type=radio],
.btn input[type=checkbox],.btn input[type=radio]{width:auto;flex:none;margin:0 6px 0 0}
@media (max-width:1180px){
  .mappe{grid-template-columns:minmax(0,1fr)}
  .mappe-vorschau{position:static}
  .mappe-pdf{height:60vh}
  .zwei{grid-template-columns:1fr}
}

/* ── Kachelseite (System & Einstellungen) ──────────────────────────────
   Acht Punkte, die vorher einzeln in der Seitenleiste standen. Als
   Liste wären sie wieder nur eine Liste; als Kacheln sieht man auf
   einen Blick, was es gibt, und der Untertitel sagt, wofür. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.kachel{display:flex;flex-direction:column;gap:5px;padding:14px;border:1px solid var(--line);
  border-radius:var(--r-md,10px);background:var(--surface);color:inherit;text-decoration:none}
.kachel:hover{border-color:var(--acc-line);background:var(--surface-2)}
.kachel b{font-size:13.5px;font-weight:600}
.kachelsym{width:30px;height:30px;border-radius:9px;background:var(--acc-soft);color:var(--acc);
  display:grid;place-items:center;margin-bottom:3px}
.kachelsym .sym{width:16px;height:16px;opacity:1}
.kacheltext{font-size:12px;color:var(--ink-3);line-height:1.45}

/* Sprungleiste über langen Formularen. Klebt oben, damit man von
   „Aufzeichnung" zurück zu „Firma" kommt, ohne zu rollen. */
.sprungleiste{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:6px;
  margin:0 -6px 14px;padding:8px 6px;background:var(--bg,var(--surface-2));box-shadow:0 1px 0 var(--line)}
.sprungleiste a{font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:20px;
  color:var(--ink-2);text-decoration:none;background:var(--surface)}
.sprungleiste a:hover{border-color:var(--acc-line);color:var(--acc);background:var(--acc-soft)}
/* Sonst verschwindet die Überschrift beim Springen unter der Leiste. */
.card[id^="gruppe-"]{scroll-margin-top:56px}

/* Klappkarten: eine Karte, deren Kopf ein Reiter ist — zum Aufklappen
   wie die Gruppen im Hauptmenü. Offen im HTML, zugeklappt durch app.js
   (Etappe 125, Einstellungen). */
details.klappkarte > summary{cursor:pointer;list-style:none;user-select:none}
details.klappkarte > summary::-webkit-details-marker{display:none}
details.klappkarte > summary .sym{width:13px;height:13px;color:var(--ink-3);flex:none;
  transition:transform .15s ease;transform:rotate(90deg)}
details.klappkarte[open] > summary .sym{transform:rotate(-90deg)}
details.klappkarte:not([open]) > summary{border-bottom:0}
details.klappkarte > summary:hover{background:var(--surface-2)}
details.klappkarte > summary:hover h3{color:var(--acc)}
details.klappkarte > summary .sub{margin-left:auto;white-space:nowrap}
details.klappkarte:not([open]){margin-bottom:8px}
.sprungleiste a[data-klapp-alle],.sprungleiste a[data-klapp-keine]{border-style:dashed;color:var(--ink-3)}

/* Kleine Reiterleiste für Sortierung und Zeitraum über Listen. */
.tabs.klein a{font-size:11.5px;padding:3px 9px}

/* Der Stupser unter der Kopfleiste: sichtbar, aber nicht im Weg. */
.stupser{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 18px;
  background:var(--warn-soft);border-bottom:1px solid var(--line);font-size:12.5px}
.stupser.kalt{background:var(--crit-soft)}
/* Die Fassung, die sich von selbst meldet: Sie schiebt den Inhalt
   nicht weg, sondern legt sich oben darüber — sonst springt beim
   Erscheinen die halbe Seite, während man gerade tippt. */
.stupser.schwebt{position:sticky;top:0;z-index:32;border-radius:0 0 var(--r-sm) var(--r-sm);
  box-shadow:0 10px 26px -14px rgba(18,24,27,.5);animation:stupser-auf .22s ease}
.stupser.schwebt[hidden]{display:none}
.stupser.schwebt .btn{margin-left:0}
.stupser.schwebt .btn.primary{margin-left:auto}
@keyframes stupser-auf{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.stupser.schwebt{animation:none}}
/* 3.23.2: Das Band vom Seitenaufbau steht einfach da — es gleitet nicht bei jedem Seitenwechsel neu herein. */
.stupser.schwebt.fest{animation:none}
.stupser b{color:var(--ink)}
.stupser span{color:var(--ink-2)}
.stupser .btn{margin-left:auto}

/* Blätterleiste für Listen, die nicht aus der Datenbank kommen.
   Sie steht unter der Liste, nicht darüber: Wer blättern will, ist
   unten angekommen. */
.blaettern{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px}
.blaettern .btn.sm{min-width:30px;justify-content:center}

/* Suchfeld mit Vorschlägen in Formularen. */
.field.auswahl{position:relative}
.auswahlliste{position:absolute;top:100%;left:0;right:0;z-index:50;max-height:280px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 12px 30px rgba(0,0,0,.14);margin-top:3px}
.auswahlliste[hidden]{display:none}
.auswahlliste button{display:block;width:100%;text-align:left;padding:8px 11px;border:0;
  background:none;cursor:pointer;color:inherit;font:inherit}
.auswahlliste button b{display:block;font-size:13px;font-weight:600}
.auswahlliste button span{display:block;font-size:11.5px;color:var(--ink-3)}
.auswahlliste button.an,.auswahlliste button:hover{background:var(--acc-soft)}
.auswahlliste .leer{padding:10px 11px;font-size:12.5px;color:var(--ink-3)}
.auswahl .gewaehlt{display:flex;align-items:center;gap:8px;font-size:12.5px;
  padding:6px 10px;background:var(--acc-soft);border-radius:var(--r-sm);margin-top:4px}
.auswahl .gewaehlt button{margin-left:auto;border:0;background:none;cursor:pointer;
  color:var(--ink-3);font-size:16px;line-height:1;padding:0 2px}

/* Die Einwandhilfe in der Anrufbox: das Argument, nicht der Wortlaut. */
/* Eine große Zahl mit ihrer Beschriftung darunter — Telefonbilanz,
   Aufwand einer Vermittlung. Bisher gab es die Klasse nur innerhalb
   bestimmter Kästen; frei stehend blieb sie ungestylt und sah aus wie
   Fließtext. Die Regeln mit Elternteil (.ziel, .monat, .tagesstart)
   sind spezifischer und behalten ihr eigenes Aussehen. */
span.zahl{display:block;font-family:var(--mono);font-size:25px;line-height:1.1;
  font-weight:600;color:var(--ink)}
span.zahl + small{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}

/* Eine ruhige Zeile, die etwas klarstellt — kein Alarm. Sie steht dort,
   wo sonst eine Sorge entstünde: „Geht jetzt eine Rechnung raus?" */
.hinweis{padding:10px 12px;background:var(--acc-soft);border-radius:var(--r-sm);
  font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.hinweis b{color:var(--ink)}

/* Das Zeichen. Ein eigener Schatten, damit es auf hellem wie dunklem
   Grund auf der Fläche liegt statt darauf zu kleben — und ein kaum
   sichtbares Aufrichten beim Überfahren, weil die Seitenleiste sonst
   das einzige Element ohne Reaktion hätte. */
/* Das Firmenzeichen. Ein Bild mit freigestelltem Grund — also kein
   Schatten und keine Ecken-Rundung, die eine Körperlichkeit vortäuschen
   würde, die das Logo nicht hat. Nur ein leises Aufrichten beim
   Überfahren, weil die Seitenleiste sonst das einzige Element ohne
   Reaktion wäre. */
.markezeichen{display:block;flex:0 0 auto;object-fit:contain;
  transition:transform .16s ease}
.markezeichen.breit{width:auto;max-width:180px}
.brand:hover .markezeichen{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.markezeichen{transition:none}}

/* Die Stempeluhr in der Kopfleiste — zwei Teile, die zusammengehören:
   die mitlaufende Zeit (führt zur Zeiterfassung) und der Knopf, der das
   eine tut, worum es geht. Läuft sie, ist sie farbig; sonst ruhig. */
.stempeluhr{display:inline-flex;align-items:center;gap:4px}
.stempeluhr .tbbtn{gap:5px}
.stempeluhr .tbbtn.an{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}
.stempeluhr .mono{font-size:12px;letter-spacing:-.01em}
@media (max-width:900px){.stempeluhr .mono{display:none}}

/* Eine Zeile, die aus gutem Grund nicht angehakt werden kann —
   sichtbar zurückgenommen, aber nicht versteckt: Warum sie gesperrt
   ist, muss man lesen können. */
tr.gesperrt{opacity:.62}
tr.gesperrt td{background:var(--surface-2)}

/* Die Kette der Einwände eines Gesprächs. */
.einwandkette{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.einwandkette span{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  background:var(--surface-3);border-radius:999px;font-size:11.5px}
.einwandkette span i{font-style:normal;font-weight:600;color:var(--ink-3)}
.kettenhinweis{margin:6px 0 2px;padding:9px 11px;border-radius:var(--r-sm);
  font-size:12px;line-height:1.45;background:var(--warn-soft)}
.kettenhinweis[data-ton="gut"]{background:var(--acc-soft)}
.kettenhinweis[data-ton="stopp"]{background:var(--crit-soft)}
.kettenhinweis b{display:block;font-weight:600;margin-bottom:3px}
.kettenhinweis[hidden]{display:none}

.einwandhilfe{margin:6px 0 2px;padding:8px 10px;background:var(--acc-soft);
  border-radius:var(--r-sm);font-size:12px;line-height:1.45}
.einwandhilfe[hidden]{display:none}
.einwandhilfe b{display:block;font-weight:500;color:var(--ink)}
.einwandhilfe p{margin:5px 0 0;font-weight:600;color:var(--acc)}

/* ── Mehrfachauswahl in Listen ─────────────────────────────────────
 * Die Leiste erscheint erst, wenn etwas angehakt ist, und klebt unten
 * am Fenster: Bei fünfzig Zeilen ist man beim Auswählen längst weit
 * unten und fände einen Knopf über der Tabelle nicht wieder. */
.sammelleiste{position:sticky;bottom:12px;z-index:30;display:flex;gap:12px;
  align-items:center;flex-wrap:wrap;margin:12px 0;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-1);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.sammelleiste[hidden]{display:none}
.sammelleiste .zahl{font-size:12.5px}
.sammelleiste .acts{display:flex;gap:8px;flex-wrap:wrap}
tr.gewaehlt{background:var(--acc-soft)}
td.kasten,th.kasten{width:28px;padding-right:0}
td.kasten input,th.kasten input{width:15px;height:15px;cursor:pointer}

/* ── Die Glocke (Etappe 127) ─────────────────────────────────────── */
.glocke{position:relative}
.glocke>summary{list-style:none;position:relative}
.glocke>summary::-webkit-details-marker{display:none}
.glocke-zahl{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;
  background:var(--crit);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
  font-family:var(--mono)}
.glocke[data-schwingt]>summary .sym{animation:glocke-schwingen .6s ease}
@keyframes glocke-schwingen{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}50%{transform:rotate(12deg)}75%{transform:rotate(-6deg)}}
.glocke-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:380px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 12px 30px rgba(0,0,0,.14);overflow:hidden}
.glocke-kopf{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px}
.glocke-eintraege{max-height:420px;overflow-y:auto}
.glocke-leer{padding:18px 12px;font-size:12.5px;text-align:center}
.glocke-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--line);font-size:12px}
.glocke-fuss a{color:var(--acc)}

/* Ein Eintrag — in der Glocke und auf der Seite dieselbe Zeile. */
.mitteilung{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:9px 12px;border-bottom:1px solid var(--line)}
.mitteilung:last-child{border-bottom:0}
.mitteilung.neu{background:var(--acc-soft)}
.mitteilung .mt-sym{width:28px;height:28px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;color:var(--ink-2)}
.mitteilung .mt-sym .sym{width:14px;height:14px}
.mitteilung .mt-titel{font-size:13px;font-weight:500;color:var(--ink);line-height:1.35}
.mitteilung .mt-titel a,.mitteilung .mt-titel .linkbtn{color:inherit;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.mitteilung .mt-titel a:hover,.mitteilung .mt-titel .linkbtn:hover{color:var(--acc)}
.mitteilung .mt-sub{font-size:12px;line-height:1.4;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mitteilung .mt-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11px;white-space:nowrap}
.mitteilung .mt-meta form{margin:0}
.glocke-liste .mitteilung{padding:8px 12px}
.glocke-liste .mitteilung .mt-meta{flex-direction:row;align-items:center}

/* Aufploppen unten rechts — kurz, ohne Dialog, ohne Blockieren. */
.glocke-plopp{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;width:340px;max-width:calc(100vw - 32px);pointer-events:none}
.glocke-plopp .plopp{pointer-events:auto;display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:10px 12px;
  background:var(--surface);border:1px solid var(--acc-line);border-left:3px solid var(--acc);border-radius:var(--r-md);
  box-shadow:0 12px 30px rgba(0,0,0,.18);animation:plopp-rein .25s ease;text-decoration:none;color:inherit}
.glocke-plopp .plopp.weg{animation:plopp-raus .3s ease forwards}
.glocke-plopp .plopp .mt-sym{width:28px;height:28px;border-radius:8px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc)}
.glocke-plopp .plopp .mt-sym .sym{width:14px;height:14px}
.glocke-plopp .plopp b{display:block;font-size:13px;font-weight:600}
.glocke-plopp .plopp span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.glocke-plopp .plopp .zu{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
@keyframes plopp-rein{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes plopp-raus{to{transform:translateX(30px);opacity:0}}
@media (max-width:900px){.glocke-liste{width:calc(100vw - 24px);right:-60px}}

/* ── Termin abschließen: Knöpfe statt Auswahllisten (Etappe 129) ── */
.abschluss-reihe{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.abschluss-reihe form{margin:0}
.abschluss-wahl{position:relative}
.abschluss-wahl>summary{list-style:none;user-select:none}
.abschluss-wahl>summary::-webkit-details-marker{display:none}
.abschluss-wahl[open]>summary{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
.abschluss-form{position:absolute;left:0;top:calc(100% + 6px);z-index:35;min-width:340px;max-width:min(560px,calc(100vw - 32px));
  display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;padding:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 12px 30px rgba(0,0,0,.14)}
.abschluss-form .field{margin:0}
.abschluss-form .field:has(input[name=notiz]),.abschluss-form .field:has(input[name=grund]),.abschluss-form .field:has(input[name=titel]){grid-column:1/-1}
.abschluss-form .muted{grid-column:1/-1;font-size:11.5px}
.abschluss-form .btn.primary{justify-self:start}
.abschluss.knapp .abschluss-form{min-width:300px}
@media (max-width:700px){.abschluss-form{position:static;min-width:0;grid-template-columns:1fr;margin-top:8px}}

/* ── Wochenplan (Etappe 130) — Mo–So als Spalten, Stunden als Zeilen ── */
.woche-raster{border-top:1px solid var(--line);overflow-x:auto}
.wr-kopf,.wr-zeile{display:grid;grid-template-columns:56px repeat(var(--spalten,7),minmax(120px,1fr));border-bottom:1px solid var(--line)}
.wr-kopf{position:sticky;top:0;z-index:5;background:var(--surface)}
.wr-ecke{border-right:1px solid var(--line)}
.wr-tag{padding:8px 9px;font-size:12px;border-right:1px solid var(--line);color:var(--ink-2)}
.wr-tag:last-child{border-right:0}
.wr-tag b{font-size:12px;letter-spacing:.04em}
.wr-tag .mono{color:var(--ink-3);font-size:11px;margin-left:4px}
.wr-tag.heute{color:var(--acc);box-shadow:inset 0 -2px 0 var(--acc)}
.wr-tag.we{background:var(--surface-2)}
.wr-tag.vorbei{opacity:.6}
.wr-stunde{padding:6px 8px 0;font-size:11px;color:var(--ink-3);border-right:1px solid var(--line);text-align:right}
.wr-zeile.jetzt .wr-stunde{color:var(--acc);font-weight:600}
.wr-zeile.jetzt{background:linear-gradient(to right,var(--acc-soft),transparent 56px)}
.wr-zelle{position:relative;min-height:52px;padding:4px 5px;border-right:1px solid var(--line);cursor:pointer}
.wr-zelle:last-child{border-right:0}
.wr-zelle.we{background:var(--surface-2)}
.wr-zelle.vorbei{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(0,0,0,.025) 7px 8px)}
.wr-zelle.heute{box-shadow:inset 2px 0 0 var(--acc-line)}
.wr-zelle:hover{background:var(--acc-soft)}
.wr-zelle .wr-plus{position:absolute;right:6px;bottom:3px;font-size:14px;color:var(--ink-3);opacity:0;pointer-events:none}
.wr-zelle:hover .wr-plus{opacity:.8}
.wr-oben .wr-zelle{min-height:30px}
.wr-oben .wr-stunde{padding-top:8px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
.wr-eintrag{display:block;padding:4px 6px;margin-bottom:3px;border-radius:5px;font-size:11.5px;line-height:1.3;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink-3);color:var(--ink);text-decoration:none;
  min-height:calc(var(--dauer,1) * 44px);box-sizing:border-box;position:relative;z-index:2}
.wr-eintrag:hover{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc)}
.wr-eintrag.fest{border-left-color:var(--acc)}
.wr-eintrag.gut{border-left-color:var(--good)}
.wr-eintrag.ab{border-left-color:var(--crit);opacity:.6;text-decoration:line-through}
.wr-eintrag.block{background:var(--surface-3);border-left-color:var(--ink-3);border-style:dashed}
.wr-eintrag.merk{border-style:dashed;background:transparent}
.wr-eintrag .zeit{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.wr-eintrag .was{font-weight:500;display:block}
.wr-eintrag .wer{display:block;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.wr-kopf,.wr-zeile{grid-template-columns:44px repeat(var(--spalten,7),minmax(96px,1fr))}}

/* ── Bausteine im Wochenplan (Etappe 131) ────────────────────────── */
:root{--violet:#6D4AB8;--violet-soft:#EEE8F9;--pink:#B4326E;--pink-soft:#F9E6EF;--teal:#0F7A8C;--teal-soft:#E1F1F4;--grau:#5B6470;--grau-soft:#ECEEF1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--violet:#B39AF0;--violet-soft:#241B3A;--pink:#F08BBE;--pink-soft:#33182A;--teal:#63C4D6;--teal-soft:#0F2A30;--grau:#AEB6C2;--grau-soft:#262B33}}
:root[data-theme="dark"]{--violet:#B39AF0;--violet-soft:#241B3A;--pink:#F08BBE;--pink-soft:#33182A;--teal:#63C4D6;--teal-soft:#0F2A30;--grau:#AEB6C2;--grau-soft:#262B33}
.bs-crit{--bs:var(--crit);--bs-soft:var(--crit-soft)} .bs-warn{--bs:var(--warn);--bs-soft:var(--warn-soft)}
.bs-good{--bs:var(--good);--bs-soft:var(--good-soft)} .bs-acc{--bs:var(--acc);--bs-soft:var(--acc-soft)}
.bs-cool{--bs:var(--cool);--bs-soft:var(--cool-soft)} .bs-violet{--bs:var(--violet);--bs-soft:var(--violet-soft)}
.bs-pink{--bs:var(--pink);--bs-soft:var(--pink-soft)} .bs-teal{--bs:var(--teal);--bs-soft:var(--teal-soft)}
.bs-grau{--bs:var(--grau);--bs-soft:var(--grau-soft)}
.bs-leiste{display:flex;flex-wrap:wrap;gap:8px}
.bs-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:20px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:500;cursor:pointer;transition:transform .08s}
.bs-chip .bs-punkt{width:9px;height:9px;border-radius:50%;background:var(--bs)}
.bs-chip small{color:var(--ink-3);font-size:11px}
.bs-chip .bs-summe{font-family:var(--mono);font-size:11px;color:var(--bs);background:var(--bs-soft);padding:1px 6px;border-radius:10px}
.bs-chip:hover{border-color:var(--bs);background:var(--bs-soft)}
.bs-chip.aktiv{background:var(--bs);border-color:var(--bs);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.bs-chip.aktiv small,.bs-chip.aktiv .bs-summe{color:#fff;background:rgba(255,255,255,.2)}
.bs-chip.aktiv .bs-punkt{background:#fff}
.bs-verwalten{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
/* Im Setz-Modus zeigt der Plan, dass ein Klick setzt. */
.woche-raster[data-setzmodus] .wr-zelle{cursor:copy}
.woche-raster[data-setzmodus] .wr-zelle:hover{background:var(--bs-soft);box-shadow:inset 0 0 0 2px var(--bs)}
.woche-raster[data-setzmodus] .wr-zelle .wr-plus{display:none}
.wr-eintrag.block{background:var(--bs-soft);border-color:transparent;border-left:3px solid var(--bs);color:var(--ink)}
.wr-eintrag.block .zeit{color:var(--bs)}
.wr-eintrag.block:hover{filter:brightness(.97)}
.wr-eintrag .wr-weg{position:absolute;top:2px;right:3px;border:0;background:transparent;color:var(--ink-3);font-size:14px;line-height:1;cursor:pointer;padding:1px 4px;border-radius:4px;opacity:0}
.wr-eintrag:hover .wr-weg{opacity:1}
.wr-eintrag .wr-weg:hover{background:var(--crit-soft);color:var(--crit)}

/* Die zwei Neins in der Anrufbox (Etappe 134) — eine Reihe darunter, leiser. */
.callbox .ende.ende-nein{margin-top:6px}
.callbox .ende.ende-nein button{color:var(--ink-2);border-style:dashed}
.callbox .ende.ende-nein button[value=kein_interesse]:hover{border-color:var(--crit);color:var(--crit);background:var(--crit-soft)}
.callbox .ende.ende-nein button[value=kein_bedarf]:hover{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}

/* Das Ja in der Anrufbox (Etappe 135). */
.callbox .ende.ende-ja{grid-template-columns:1fr;margin-top:6px}
.callbox .ende.ende-ja button{border-color:var(--good);color:var(--good);background:var(--good-soft);font-weight:600}
.callbox .ende.ende-ja button:hover{background:var(--good);color:#fff}

/*
 * 3.15 — Einrichtung in Schritten.
 *
 * Fünf Seiten; über jeder steht die Leiste: Wo bin ich, was ist erledigt,
 * was habe ich auf später gelegt. Erledigt ist gefüllt, „hier" trägt den
 * Ring, „später" ist gestrichelt — drei Zustände, die sich auch ohne
 * Farbe unterscheiden.
 */
.startseite{max-width:1040px}
.startleiste{list-style:none;display:flex;gap:0;margin:0 0 18px;padding:14px 16px 12px;background:var(--surface);max-width:1040px;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.startleiste li{flex:1;min-width:0;position:relative}
.startleiste li::before{content:"";position:absolute;top:12px;left:34px;right:6px;height:2px;border-radius:2px;background:var(--line)}
.startleiste li:last-child::before{display:none}
.startleiste li.erledigt::before{background:var(--acc)}
.startleiste a{display:flex;flex-direction:column;gap:5px;min-width:0;padding-right:10px}
.startleiste .punkt,.startzeile .punkt{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  font:600 12px/1 var(--mono);background:var(--surface);border:2px solid var(--line-2);color:var(--ink-3);position:relative;z-index:1}
.startleiste .punkt .sym,.startzeile .punkt .sym{width:13px;height:13px;stroke-width:2.4}
.startleiste li.erledigt .punkt,.startzeile .punkt.erledigt{background:var(--acc);border-color:var(--acc);color:#fff}
.startleiste li.spaeter .punkt,.startzeile .punkt.spaeter{border-style:dashed}
.startleiste li.hier .punkt{border-color:var(--acc);color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.startleiste li.hier.erledigt .punkt{color:#fff}
.startleiste b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.startleiste li.hier b{color:var(--acc)}
.startleiste .st{font-size:11px;color:var(--ink-3)}
.startleiste a:hover b{text-decoration:underline}
@media (max-width:640px){
  .startleiste{padding:12px 10px 10px}
  .startleiste b,.startleiste .st{display:none}
  .startleiste li.hier b{display:block}
  .startleiste li::before{left:30px;right:2px}
}

.startfelder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.startfelder .field.breit{grid-column:1/-1}
.startfelder .field.halb{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px}
@media (max-width:640px){.startfelder{grid-template-columns:minmax(0,1fr)}}

.startfuss{display:flex;align-items:center;gap:8px;margin:2px 0 26px}
.startfuss .platz,.rundgang-fuss .platz{flex:1}
.startnotiz{margin:6px 0 0;padding:8px 11px;border-radius:var(--r-sm);font-size:12.5px;background:var(--warn-soft);color:var(--warn)}
.startnotiz.gut{background:var(--good-soft);color:var(--good)}
.startseite>.startnotiz{margin:0 0 14px}

.startzeile{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.startzeile:last-child{border-bottom:0}
.startzeile b{font-size:13.5px}
.startzeile.link:hover b{color:var(--acc)}
.startzeile .punkt.klein{width:24px;height:24px;font-size:11.5px}
.avatar.klein{width:28px;height:28px;font-size:11.5px}

.startallein{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.startstatus.gut{border-color:var(--acc-line);background:var(--acc-soft)}
.startstatus.gut b{font-size:13.5px}
.startklapp{border-top:1px solid var(--line)}
.startklapp>summary{padding:11px 14px;cursor:pointer;font-size:13px;font-weight:600;list-style-position:inside}
.startklapp>summary .muted{font-weight:400}

.startwege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px;align-items:stretch}
.startwege .startweg{margin:0;display:flex}
.startweg .pad{display:flex;flex-direction:column;gap:8px;flex:1}
.startweg h3{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.startweg p{margin:0;font-size:13px;line-height:1.5}
.startweg p.muted{font-size:12.5px}
.startweg .btn,.startweg form{margin-top:auto;align-self:flex-start}
.startweg form .btn{margin-top:0}
.startweg .row{margin-top:auto}
.startweg .row .btn{margin-top:0}
.wegsym{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc)}
.wegsym .sym{width:17px;height:17px}
@media (max-width:860px){.startwege{grid-template-columns:minmax(0,1fr)}}

.startbalken{height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden;margin:0 0 14px}
.startbalken span{display:block;height:100%;border-radius:6px;background:var(--acc)}

/* Die Karte auf der Übersicht */
.startkarte{border-color:var(--acc-line)}
.startkarte .ring{--anteil:0;width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;align-content:center;
  background:radial-gradient(closest-side,var(--surface) 76%,transparent 78% 100%),conic-gradient(var(--acc) calc(var(--anteil) * 1%),var(--surface-3) 0)}
.startkarte .ring b{font:600 14px/1 var(--mono)}
.startkarte .ring span{font-size:9.5px;color:var(--ink-3);line-height:1.2}
.startpunkte{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.startpunkte a{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:500;
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface)}
.startpunkte a.erledigt{border-color:transparent;background:var(--good-soft);color:var(--good)}
.startpunkte a.spaeter{border-style:dashed}
.startpunkte a .sym{width:11px;height:11px;stroke-width:2.6}
.startpunkte a:hover{border-color:var(--acc)}
.startrundgang{border-color:var(--acc-line)}

/*
 * 3.15 — das Tutorial durch die Oberfläche (public/js/rundgang.js).
 *
 * Das „Licht" ist ein Rahmen um den gezeigten Bereich; sein Schatten
 * dunkelt alles andere ab. Die Sperre darunter fängt Klicks ab.
 */
.rundgang-sperre{position:fixed;inset:0;z-index:200;background:transparent}
.rundgang-licht{position:fixed;z-index:201;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 2px var(--acc),0 0 0 9999px rgba(12,18,20,.56);
  transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease}
.rundgang-licht.ruhig{transition:none}
.rundgang-karte{position:fixed;z-index:202;width:min(372px,calc(100vw - 24px));background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:16px 16px 14px}
.rundgang-zaehler{font:500 11px/1 var(--mono);color:var(--ink-3)}
.rundgang-karte h2{margin:7px 0 5px;font-size:16px;font-weight:600;letter-spacing:-.015em}
.rundgang-karte p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.rundgang-fuss{display:flex;align-items:center;gap:6px}
.rundgang-fuss .btn.ghost{padding-left:0;font-size:12.5px;color:var(--ink-3)}
.rundgang-fuss .btn.ghost:hover{background:transparent;color:var(--ink);text-decoration:underline}
html.rundgang-an .scroll{overflow:hidden}
@media (prefers-reduced-motion:reduce){.rundgang-licht{transition:none}}

/* ── Kurzes Menü (3.16) ── */
/* Oben das Tagesgeschäft, Seltenes je Gruppe hinter „mehr", die Stecknadel holt einen Punkt nach oben. */
.navzeile{position:relative}
.navzeile.mitheft .navitem{padding-right:30px}
.navheft{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:grid;place-items:center;
  border:0;border-radius:6px;background:none;color:var(--ink-3);cursor:pointer;opacity:0;padding:0}
.navheft svg{width:13px;height:13px}
.navzeile:hover .navheft,.navheft:focus-visible{opacity:1}
.navheft.an{opacity:.7;color:var(--acc)}
.navheft:hover{background:var(--surface-3);color:var(--acc)}
@media (hover:none){.navheft{opacity:.6}}
.navmehr > summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;padding:5px 9px;
  border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-3);user-select:none}
.navmehr > summary::-webkit-details-marker{display:none}
.navmehr > summary:hover{background:var(--surface-3);color:var(--ink-2)}
.navmehr > summary .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--acc);background:var(--acc-soft);
  border-radius:20px;padding:1px 6px}
.navmehr .navmehrauf{display:none}
.navmehr[open] .navmehrauf{display:inline}
.navmehr[open] .navmehrzu{display:none}
.navmehr[open]{margin:2px 0 4px 8px;padding-left:4px;border-left:1px solid var(--line)}
.einrichten{margin:0 0 18px}
.einrichten h2{margin:0 0 2px;font-size:15px;font-weight:600}
.einrichten > p{margin:0 0 10px;font-size:12.5px;color:var(--ink-3)}

/* ── Aussehen der Belege (3.16) ── */
.belegmuster{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:22px;align-items:start}
.bm-titel{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);margin:16px 0 8px}
.bm-titel:first-child{margin-top:0}
.bm-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bm-kachel{position:relative;display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.bm-kachel input{position:absolute;opacity:0;pointer-events:none}
.bm-kachel:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.bm-kachel:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.bm-kachel.gesperrt{cursor:not-allowed}
.bm-kachel.gesperrt .bm-skizze{opacity:.45}
.bm-skizze{width:100%;max-width:120px;align-self:center;aspect-ratio:3/4;background:#fff;border:1px solid #D5DBDE;border-radius:3px}
.bm-skizze .a{fill:var(--bm-akzent)}
.bm-skizze .t{fill:#12181B}
.bm-skizze .g{fill:#7E8B92}
.bm-skizze .z{fill:#D5DBDE}
.bm-skizze .h{fill:#EEF2F3}
.bm-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bm-ab{font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.bm-satz{font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.bm-klein{font-size:11.5px;margin:6px 0 0}
.bm-farben{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bm-farben input[type=color]{width:44px;height:32px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.bm-farbe{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.bm-farbe:hover,.bm-farbe:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.bm-plaetze{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bm-plaetze label{position:relative;cursor:pointer}
.bm-plaetze input{position:absolute;opacity:0;pointer-events:none}
.bm-plaetze span{display:block;padding:7px 14px;font-size:13px}
.bm-plaetze label+label span{border-left:1px solid var(--line)}
.bm-plaetze input:checked+span{background:var(--ink);color:var(--surface)}
.bm-plaetze input:focus-visible+span{outline:2px solid var(--ink);outline-offset:-2px}
.bm-knopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.bm-arten{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.bm-arten .btn.aktiv{border-color:var(--ink);font-weight:600}
.bm-vorschau iframe{display:block;width:100%;aspect-ratio:210/297;border:1px solid var(--line);border-radius:8px;background:#fff}
@media (max-width:900px){.belegmuster{grid-template-columns:minmax(0,1fr)}.bm-vorschau iframe{max-height:80vh}}
@media (max-width:420px){.bm-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}.bm-satz{font-size:11px}}

/* Kann der Browser kein PDF im Fenster zeigen, gibt es keinen Rahmen: Der Verweis wird zum Knopf. */
.belegmuster.bm-ohne-rahmen .bm-oeffnen{display:inline-block;margin-top:8px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);text-decoration:none;color:var(--ink)}

/* ── Deine Belege in der Einrichtung (3.16) ── */
/* Die Leiste hat jetzt sechs Schritte. Am Telefon steht nur der Name des Schritts da, auf dem man ist — er passt nicht
   mehr unter seinen Punkt und darf deshalb nach rechts über die leeren Plätze der nächsten Punkte laufen. */
@media (max-width:640px){
  .startleiste li.hier b{overflow:visible;text-overflow:clip;position:relative;z-index:1}
}
.startbelege .startnotiz a{color:inherit;text-decoration:underline}

/* ── Vorschau beim Schreiben (3.16) ── */
/* Angebot und Rechnung schreiben: links das Formular, rechts das echte PDF. Ohne JavaScript bleibt die Hülle ein
   gewöhnlicher Block. Das Skript setzt .bv-an (Vorschau gewünscht); nebeneinander steht beides erst ab 1340 px:
   Darunter bliebe der Tabelle mit den Positionen zu wenig Platz (bei 1440 px stand „Gesamt netto" schon außerhalb). */
/* Die Leiste steht im Quelltext hinter dem Formular (ohne JavaScript gibt es sie nicht), gezeigt wird sie darüber. */
.bv{display:flex;flex-direction:column}
.bv>form{min-width:0}
.bv>.bv-leiste{order:-1}
.bv-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.bv-leiste[hidden],.bv-seite[hidden]{display:none}
.bv-klein{font-size:11.5px;margin:6px 0 0}
.bv-leiste .bv-klein{margin:0}
.bv-klein a{text-decoration:underline}
@media (min-width:1700px){.bv.bv-an{grid-template-columns:minmax(0,1fr) minmax(300px,40%)}}
.bv-seite{display:none}
@media (min-width:1340px){
  .bv.bv-an{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,32%);gap:18px;align-items:start}
  /* Neben der Vorschau kommt die Tabelle der Positionen mit weniger Breite aus (die Spalte „Bezeichnung" gibt nach). */
  .bv.bv-an .posed{min-width:700px !important;table-layout:fixed}
  .bv.bv-an>.bv-leiste{display:none}
  .bv.bv-an>form{grid-column:1;grid-row:1;min-width:0}
  .bv.bv-an>.bv-seite{display:block;grid-column:2;grid-row:1;position:sticky;top:12px;min-width:0}
}
@media (max-width:1339.98px){.bv-leiste [data-bv-schalter]{display:none}}
.bv-kopf{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13.5px}
.bv-stand{flex:1;min-width:0;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-stand.bv-fehler{color:var(--crit,#B3261E);white-space:normal}
.bv-blatt{position:relative;width:100%;aspect-ratio:210/297;max-height:calc(100vh - 120px);border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.bv-blatt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;visibility:hidden}
.bv-blatt iframe.bv-vorn{visibility:visible}
/* 3.44 — Angebot und Rechnung („bv-beleg"): das PDF direkt in der Seite und größer. Neben dem Formular so breit, wie die
   Tabelle der Positionen es zulässt (ab 1560 px 44 %, ab 1760 px die Hälfte); unter 1340 px steht es unter dem Formular
   statt nur als Knopf. „Groß ansehen" legt es fast bildschirmfüllend darüber. */
@media (min-width:1340px){.bv.bv-beleg.bv-an{grid-template-columns:minmax(0,1fr) minmax(340px,38%)} .bv.bv-beleg.bv-an .posed{min-width:620px !important}}
@media (min-width:1560px){.bv.bv-beleg.bv-an{grid-template-columns:minmax(0,1fr) minmax(400px,44%)}}
@media (min-width:1760px){.bv.bv-beleg.bv-an{grid-template-columns:minmax(0,1fr) minmax(400px,min(50%,920px))}}
/* Mit dem Blatt daneben nutzt die Seite die ganze Breite (sonst höchstens 1400 px): Die Tabelle der Positionen behält Platz. */
@media (min-width:1340px){.view:has(.bv.bv-beleg.bv-an){max-width:none}}
@media (max-width:1339.98px){
  .bv.bv-beleg.bv-an>.bv-seite{display:block;width:min(860px,100%);margin:18px auto 0}
  .bv.bv-beleg.bv-an>.bv-leiste{display:none}
  .bv.bv-beleg .bv-blatt{max-height:none}
}
.bv-kopf [data-bv-gross][hidden]{display:none}
dialog.bv-gross{width:min(1180px,96vw);height:94vh;max-height:94vh;padding:0;border:0;border-radius:12px;background:var(--surface,#fff);box-shadow:0 30px 80px -20px rgba(21,25,27,.5);overflow:hidden}
dialog.bv-gross[open]{display:flex;flex-direction:column}
dialog.bv-gross::backdrop{background:rgba(21,25,27,.55)}
.bv-gross-kopf{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.bv-gross-kopf .bv-klein{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.bv-gross iframe{flex:1;min-height:0;width:100%;border:0;background:#fff}

/* ── Menü am Handy (3.16) ── */
/* Unter 900 px war die Seitenleiste ausgeblendet, und nichts holte sie: Am Handy hatte das Programm kein Menü.
   Jetzt ist sie dort eine Schublade von links, über dem Inhalt, dahinter ein Schleier. Auf geht sie über den Knopf in
   der Kopfzeile. Ohne Skript trägt das :target (der Knopf ist ein Verweis auf #seitenleiste; Kreuz und Schleier sind
   Verweise, die das Ziel wieder lösen). Mit Skript bestimmt allein html.menue-auf (kein Sprung, kein Eintrag im
   Verlauf) — deshalb gilt :target nur, solange html.menue-js fehlt. Über 900 px gibt es nichts davon. */
.menueknopf,.menuezu,.menueschleier{display:none}
@media (max-width:900px){
  .menueknopf{display:grid;flex:none;width:36px;height:36px;margin:-4px 0 -4px -8px;color:var(--ink-2)}
  .menueknopf .sym,.menuezu .sym{width:20px;height:20px}
  /* Mit Softphone, Stempeluhr und Glocke blieb der Suche in einer Zeile nur noch die Lupe. Die Suche behält jetzt
     150 px; reicht der Platz nicht, rutschen die Knöpfe rechts in eine zweite Zeile. */
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topbar .suche{min-width:150px}
  .rail{display:flex;position:fixed;top:0;bottom:0;left:0;z-index:76;width:min(300px,86vw);box-shadow:var(--shadow-lg);
    transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .rail:focus{outline:none}
  .rail nav.navwrap{overscroll-behavior:contain}
  .rail .brand{padding-right:54px}
  .menuezu{display:grid;position:absolute;top:10px;right:8px;width:36px;height:36px;color:var(--ink-2)}
  .menueschleier{display:block;position:fixed;inset:0;z-index:75;background:rgba(10,16,18,.46);opacity:0;
    pointer-events:none;transition:opacity .2s ease}
  html:not(.menue-js) .rail:target,html.menue-auf .rail,html.rundgang-menue .rail{transform:none;visibility:visible;
    transition:transform .2s ease}
  html:not(.menue-js) .rail:target ~ .menueschleier,html.menue-auf .menueschleier{opacity:1;pointer-events:auto}
  /* Die Seite dahinter blättert nicht mit. */
  html:not(.menue-js) .rail:target ~ .main .scroll,html.menue-auf .scroll{overflow:hidden}
  /* Nach dem Anheften und im Tutorial steht die Schublade sofort da — ohne Hereinfahren. */
  html.menue-ruhig .rail,html.menue-ruhig .menueschleier,html.rundgang-menue .rail{transition:none}
  /* Am Handy überfährt niemand eine Zeile: Die Stecknadel ist immer zu sehen, und die Zeilen sind etwas höher. */
  .rail .navheft{opacity:.6;width:30px;height:30px;right:2px}
  .rail .navheft.an{opacity:.85}
  .rail .navzeile.mitheft .navitem{padding-right:36px}
  .rail .navitem{padding-top:8px;padding-bottom:8px}
  .rail .navmehr > summary{padding-top:8px;padding-bottom:8px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.rail,.menueschleier{transition:none}}

/* ── Bereiche (3.17) ── */
/* Links stehen nur noch Bereiche; die Punkte eines Bereichs sind Reiter über der Seite (.bereichsleiste). Die Leiste
   sieht mit Absicht anders aus als die Reiter in einer Seite (.tabs: Strich unter dem aktiven Reiter): flach über
   die ganze Breite, der aktive Reiter als Pille. Schmal rollen die Reiter waagerecht (.breiter); „mehr" steht
   daneben und rollt nicht mit, sonst schnitte der rollende Kasten seine Liste ab. */
.bereiche{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.navitem.bereich{padding:8px 10px;font-size:14px;font-weight:500;color:var(--ink)}
.navitem.bereich .sym{opacity:.8}
.navitem.bereich.on{color:var(--acc);font-weight:600}
.navitem.bereich .n{color:var(--acc);background:var(--acc-soft)}
.navitem.bereich.on .n{background:var(--surface)}
.navabschnitt{margin-bottom:14px}
.navabschnitt h6{margin:0 0 4px;padding:0 9px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.bereichsleiste{position:relative;flex:none;display:flex;align-items:center;gap:8px;min-height:41px;padding:0 18px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.breiter{display:flex;align-items:center;gap:2px;flex:1;min-width:0;padding:6px 0;overflow-x:auto;scrollbar-width:none}
/* Wo die Reiter weiterrollen (schmal, oder viele eigene Tabellen), laufen sie rechts aus, statt hart abgeschnitten zu sein. */
.breiter{padding-right:18px;-webkit-mask-image:linear-gradient(to right,black calc(100% - 18px),transparent);
  mask-image:linear-gradient(to right,black calc(100% - 18px),transparent)}
.breiter::-webkit-scrollbar{display:none}
.breiter > a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;font-size:12.5px;
  line-height:1.5;color:var(--ink-2);white-space:nowrap}
.breiter > a:hover{background:var(--surface-3);color:var(--ink)}
.breiter > a.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.bereichsleiste .n{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-3);background:var(--surface-3);
  border-radius:20px;padding:0 6px}
.breiter > a.on .n{background:var(--surface);color:var(--acc)}
.bheft{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:6px;background:none;
  color:var(--ink-3);cursor:pointer;padding:0;margin-left:-2px}
.bheft svg{width:13px;height:13px}
.bheft:hover,.bheft.an{color:var(--acc)}
.bheft:hover{background:var(--surface-3)}
.bmehr{flex:none}
.bmehr > summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;user-select:none;padding:3px 10px;
  border:1px solid var(--line);border-radius:20px;font-size:12.5px;line-height:1.5;color:var(--ink-2);white-space:nowrap}
.bmehr > summary::-webkit-details-marker{display:none}
.bmehr > summary:hover,.bmehr[open] > summary{background:var(--surface-3);color:var(--ink);border-color:var(--line-2)}
.bmehr .bmehrzahl{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.bmehr > summary .n{color:var(--acc);background:var(--acc-soft)}
.bmehrliste{position:absolute;right:18px;top:calc(100% - 3px);z-index:35;width:min(300px,calc(100vw - 20px));
  max-height:min(70vh,520px);overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg)}
.bmehrzeile{position:relative}
.bmehrzeile > a{display:flex;align-items:center;gap:9px;padding:7px 38px 7px 9px;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2)}
.bmehrzeile > a:hover{background:var(--surface-3);color:var(--ink)}
.bmehrzeile > a > span:not(.n){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmehrzeile .navheft{opacity:.55;width:28px;height:28px}
.bmehrzeile .navheft.an{opacity:.9}
.mbart{margin:0 4px 12px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:12px;color:var(--ink-2)}
.mbart p{margin:0 0 7px}
@media (max-width:900px){
  .bereichsleiste{padding:0 10px}
  .bmehrliste{right:10px}
  .rail .navitem.bereich{padding-top:10px;padding-bottom:10px}
}

/* ── Die Akte als Arbeitsplatz (3.17) ── */
/* „Neu" im Kopf der Akte: ohne JavaScript ein gewöhnliches <details>. */
.akteneu{position:relative;flex:none}
.akteneu > summary{list-style:none;cursor:pointer;user-select:none}
.akteneu > summary::-webkit-details-marker{display:none}
.akteneu[open] > summary{box-shadow:0 0 0 3px var(--acc-soft)}
.akteneu-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:36;min-width:220px;max-width:min(300px,calc(100vw - 32px));
  max-height:min(70vh,460px);overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:1px}
/* Die Zeilen sehen aus wie im Knopf „Neu" der Kopfleiste (.neuliste) — dasselbe Menü, nur für diesen Kunden. */
.akteneu-liste a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);font-size:13px;color:var(--ink-2);
  white-space:nowrap}
.akteneu-liste a span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.akteneu-liste a .sym{width:15px;height:15px;flex:none}
.akteneu-liste a:hover,.akteneu-liste a:focus-visible{background:var(--surface-3);color:var(--ink)}
.akteneu-fuer{display:block;padding:5px 9px 7px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Der Kopf darf umbrechen: Name links, Stand und „Neu" rutschen bei wenig Platz darunter. */
.aktenkopf{flex-wrap:wrap}
.aktenkopf .zustand{flex-wrap:wrap;justify-content:flex-end}
/* Die Summen über der Abrechnung. */
.aktensumme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.aktensumme > div{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);min-width:0}
.aktensumme small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.aktensumme b{display:block;font-size:17px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aktensumme span{display:block;font-size:11.5px;color:var(--ink-3)}
.aktensumme .spaet{border-color:var(--crit);background:var(--crit-soft)}
.aktensumme .spaet b{color:var(--crit)}
/* Ein leerer Abschnitt sagt, was hier stehen wird, und bietet den ersten Schritt an. */
.aktenleer{margin:0 0 12px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-sm);color:var(--ink-3);
  font-size:12.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aktenleer .btn{margin-left:auto;flex:none}
.aktentermin-wann{width:120px;flex:none;color:var(--ink-3)}
.aktennotiz{align-items:flex-start}
.aktennotiz .aktentermin-wann{font-size:11.5px;padding-top:1px}
/* Anruf festhalten in der Akte. */
.aktenanruf-zeile{display:grid;grid-template-columns:1.2fr 1fr 1.3fr .8fr;gap:12px}
.aktenanruf-zeile.zwei{grid-template-columns:2fr 1fr}
.aktenanruf-zeile > .field{min-width:0}
/* In einer Karte (Akte des Vorgangs) ist nur die halbe Breite da: zwei Spalten, Notiz und nächster Schritt untereinander. */
.card .aktenanruf-zeile{grid-template-columns:1fr 1fr}
.card .aktenanruf-zeile.zwei{grid-template-columns:1fr}
/* Das Feld, in das „Neu" springt, kurz hervorheben. */
.aktenziel{animation:aktenziel 1.6s ease-out 1}
@keyframes aktenziel{0%{box-shadow:0 0 0 3px var(--acc-line)}100%{box-shadow:0 0 0 3px transparent}}
@media (max-width:640px){
  .aktensumme{grid-template-columns:1fr 1fr}
  .aktensumme > div:last-child{grid-column:1 / -1}
  .aktenanruf-zeile{grid-template-columns:1fr 1fr}
  .aktenanruf-zeile.zwei{grid-template-columns:1fr}
  .aktentermin-wann{width:86px;font-size:11.5px}
  .akteneu-liste{position:fixed;left:16px;right:16px;top:auto;bottom:16px;max-width:none;max-height:60vh}
  .akteneu-liste a{padding:10px 11px;font-size:14px}
}

/* ── Kunde: neu anlegen aus dem Suchfeld, „zu Händen", gehört zu (3.17) ── */
/* Der letzte Vorschlag im Suchfeld hebt sich ab: Er findet nichts, er legt an. */
.auswahlliste button.neu{border-top:1px solid var(--line);color:var(--acc)}
.auswahlliste button.neu b::before{content:"+ "}
.auswahlliste button.neu[disabled]{opacity:.6;cursor:progress}
/* Der Grund, warum es nicht ging (Grenze des Pakets, fehlendes Recht): die Meldung von .fehler, hier ohne Abstand. */
.auswahlliste .leer.fehler{margin:0;border-radius:0}
.suchwahl [data-suchwahl-neu] .fehler{display:block;margin:0}
.suchwahl [data-suchwahl-neu]{display:block;margin-top:6px;font-size:12px}
.suchwahl [data-suchwahl-neu][hidden]{display:none}
.zuhaenden select{width:100%}
.zuhaenden small{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-3)}
.aktenkopf .herkunft.gehoertzu a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
.aktenkopf .herkunft.gehoertzu a:hover{color:var(--acc)}
@media (max-width:640px){
  .gehoertzu-felder{grid-template-columns:1fr !important}
}


/* ── Leistung wählen statt tippen (3.17) ── */
/* Das Feld der Leistungswahl füllt seinen Platz wie ein gewöhnliches Feld; die Vorschläge hängen darunter. */
.leistungswahl{position:relative;display:block}
.leistungswahl > input{width:100%}
.leistungswahl .auswahlliste{display:block;min-width:min(280px,86vw)}
.leistungswahl .auswahlliste[hidden]{display:none}
.leistungswahl .auswahlliste .leer{display:block}
.leistungswahl-hinweis{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)}
.leistungswahl-hinweis[hidden]{display:none}
/* In einer Tabelle (Positionen des Abos) dürfen die Vorschläge über den Rand der Tabelle hinaus. Dafür blättert die
   Tabelle nicht mehr seitlich: Sie passt sich der Breite an, und am Handy steht jede Zeile als Block (Bezeichnung
   oben, Menge und Preis darunter, mit ihrer Beschriftung). */
.tablewrap.mitwahl{overflow:visible}
.tablewrap.mitwahl table{min-width:0}
/* Die Felder in dieser Tabelle sehen aus wie die übrigen Felder der Seite — auch im dunklen Modus. */
.tablewrap.mitwahl td input{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--ink);font:inherit;font-size:13px}
.tablewrap.mitwahl td input:focus{outline:2px solid var(--acc-line);outline-offset:0;border-color:var(--acc)}
td.num .leistungswahl .auswahlliste{text-align:left}
@media (max-width:600px){
  .tablewrap.mitwahl thead{display:none}
  .tablewrap.mitwahl tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .tablewrap.mitwahl tbody tr:last-child{border-bottom:0}
  .tablewrap.mitwahl tbody td{display:block;padding:0;border:0;text-align:left}
  .tablewrap.mitwahl tbody td:first-child{grid-column:1 / -1}
  .tablewrap.mitwahl tbody td[data-titel]::before{content:attr(data-titel);display:block;margin-bottom:2px;font-size:11px;color:var(--ink-3)}
  .tablewrap.mitwahl tbody td input{width:100% !important}
}
/* Abo-Formular am Handy: Die Raster mit drei und vier Spalten liefen über den Rand. Jetzt zwei Spalten, ein
   breites drittes Feld über beide; Bezeichnung und Vorgang untereinander. */
@media (max-width:600px){
  .aboraster{grid-template-columns:1fr 1fr !important}
  .aboraster.eins{grid-template-columns:1fr !important}
  .aboraster > :nth-child(3):last-child{grid-column:1 / -1}
}
/* Vorgang anlegen: das Nötige oben, alles Weitere in Abschnitten zum Aufklappen. */
.klappe{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);margin:0 0 14px}
.klappe > summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;font-weight:600;font-size:13.5px}
.klappe > summary::-webkit-details-marker{display:none}
.klappe > summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .15s ease;margin-right:2px}
.klappe[open] > summary::before{transform:rotate(45deg)}
.klappe > summary .sub{font-weight:400;font-size:12px;color:var(--ink-3);margin-left:auto;text-align:right}
.klappe > summary:hover{background:var(--surface-2)}
.klappe[open] > summary{border-bottom:1px solid var(--line)}
.klappe > .pad{padding:14px 16px}
.klappe > summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media (max-width:600px){
  .klappe > summary{flex-wrap:wrap;row-gap:2px}
  .klappe > summary .sub{margin-left:19px;text-align:left;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.klappe > summary::before{transition:none}}

/* ── Zeiten auf Kunde und Vorgang (3.17) ── */
/* „Für wen?" beim Stempeln und Nachtragen: Kundensuche, Vorgang, Häkchen — nebeneinander, am Handy untereinander.
   Abrechnen: je Vorgang eine Karte mit Satz und Liste zum Ankreuzen. Farben nur über die Variablen. */
.zeit-ansicht{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 14px}
.zeit-fuerwen{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;align-items:start;margin-bottom:12px}
.zeit-fuerwen>.field{margin:0;min-width:0}
.zeit-fuerwen select{width:100%;max-width:100%}
.zeit-haken{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);white-space:nowrap;padding-top:24px;cursor:pointer}
.zeit-haken input[type=checkbox]{width:16px;height:16px;accent-color:var(--acc);margin:0}
.zeit-start{flex:1;min-width:0}
.zeit-laeuft-fuer{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.zeit-laeuft-fuer>summary{cursor:pointer;font-size:13px;color:var(--ink-2);font-weight:500}
.zeit-laeuft-fuer[open]>summary{margin-bottom:12px}
.zeit-wen{font-size:12.5px;min-width:130px}
.zeit-wen .chip{margin-top:3px}
.zeit-tun,.zo-tun{white-space:nowrap;text-align:right}
.zeit-tun .btn{margin-left:4px}
.zeit-nur-schmal{display:none}
.zeit-offen-fuss:empty{display:none}
.zeit-offen-fuss .hint{margin:0 0 8px}
.zeit-satz{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.zeit-satz small{flex:1;min-width:200px;font-size:11.5px;padding-bottom:9px}
.zeit-wahl{table-layout:fixed}
.zeit-wahl .zw-haken{width:46px}.zeit-wahl .zw-tag{width:120px}.zeit-wahl .zw-wer{width:190px}.zeit-wahl .zw-std{width:110px}
.zeit-wahl td{overflow-wrap:break-word;hyphens:auto}
.zeit-wahl input[type=checkbox]{width:16px;height:16px;accent-color:var(--acc)}
.zeit-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zeit-art label{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;
  background:var(--surface);cursor:pointer}
.zeit-art label:has(input:checked){border-color:var(--acc)}
.zeit-art input{margin-top:3px;accent-color:var(--acc)}
.zeit-art span{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink)}
.zeit-art small{color:var(--ink-3);font-size:11.5px;font-weight:400}
.zeit-buchen{border-bottom:1px solid var(--line)}
.zeit-eigene{border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3);padding-top:10px;padding-bottom:10px}
.zeit-akte .cardhead{flex-wrap:wrap}
.zeit-akte table{min-width:0}
.zeit-akte td{vertical-align:top}
.zeit-tag{white-space:nowrap;width:1%;color:var(--ink-2)}
.zeit-was{overflow-wrap:anywhere}
.zeit-stand{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:11.5px}
.zeit-stand small{font-size:11.5px}
@media (max-width:760px){
  .zeit-fuerwen{grid-template-columns:minmax(0,1fr)}
  .zeit-haken{padding-top:0}
  .zeit-art{grid-template-columns:minmax(0,1fr)}
  .zeit-satz small{padding-bottom:0}
  /* Schmal: Die Tabelle der offenen Zeiten wird zur Liste — Kunde und Betrag oben, Vorgang, Stunden und Knopf darunter. */
  .zeit-nur-schmal{display:inline}
  .zeit-nur-breit{display:none}
  table.zeit-offen{display:block;min-width:0}
  .zeit-offen thead{display:none}
  .zeit-offen tbody{display:block}
  .zeit-offen tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kunde betrag" "vorgang tun" "std tun";
    gap:2px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .zeit-offen tbody tr:last-child{border-bottom:0}
  .zeit-offen td{display:block;padding:0;border:0;text-align:left;white-space:normal;min-width:0}
  .zeit-offen .zo-kunde{grid-area:kunde;overflow-wrap:anywhere}
  .zeit-offen .zo-vorgang{grid-area:vorgang;color:var(--ink-2);overflow-wrap:anywhere}
  .zeit-offen .zo-betrag{grid-area:betrag;text-align:right;font-weight:600}
  .zeit-offen .zo-std{grid-area:std;color:var(--ink-2)}
  .zeit-offen .zo-n,.zeit-offen .zo-satz{display:none}
  .zeit-offen .zo-tun{grid-area:tun;align-self:end}
  /* Die Einträge der Woche: je Eintrag ein Block — Tag, Von, Bis und Netto oben, darunter Woran, für wen, die Knöpfe. */
  table.zeit-liste{display:block;min-width:0}
  .zeit-liste thead{display:none}
  .zeit-liste tbody{display:block}
  .zeit-liste tr{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;
    padding:11px 14px;border-bottom:1px solid var(--line)}
  .zeit-liste tbody tr:last-child{border-bottom:0}
  .zeit-liste td{display:block;padding:0;border:0;text-align:left;min-width:0;white-space:normal}
  .zeit-liste .zt-pause{font-size:11.5px;color:var(--ink-3)}
  .zeit-liste .zt-pause::before{content:'Pause ';font-family:var(--ui)}
  .zeit-liste .zt-netto{grid-column:5;text-align:right}
  .zeit-liste .zt-dauer{grid-column:2 / span 3}
  .zeit-liste .zt-woran,.zeit-liste .zeit-wen,.zeit-liste .zeit-tun,.zeit-liste .zt-leer{grid-column:1 / -1}
  .zeit-liste .zt-woran{overflow-wrap:anywhere}
  .zeit-liste .zeit-wen{min-width:0;color:var(--ink-2)}
  .zeit-liste .zeit-wen br{display:none}
  .zeit-liste .zeit-wen small{margin:0 6px}
  .zeit-liste .zeit-wen .chip{margin:0 4px 0 6px}
  .zeit-liste .zeit-wen:has(> .muted:only-child){display:none}
  .zeit-liste .zeit-tun{text-align:right}
  /* Abrechnen: Wer gebucht hat, steht im Nachweis — hier zählen Tag, Tätigkeit und Stunden. */
  table.zeit-wahl{min-width:0}
  .zeit-wahl .zeit-wer,.zeit-wahl .zw-wer{display:none}
  .zeit-wahl .zw-haken{width:40px}.zeit-wahl .zw-tag{width:96px}.zeit-wahl .zw-std{width:70px}
  .zeit-wahl td,.zeit-wahl th{padding-left:8px;padding-right:8px}
}
.panelinhalt .zeit-fuerwen{grid-template-columns:minmax(0,1fr)}
.panelinhalt .zeit-haken{padding-top:0}

/* ── Durchsicht des Hauptlaufs (3.17) ── */
/* Der Knopf „Neu in der Akte": am Handy nur „Neu" — er steht ohnehin im Kopf der Akte. */
@media (max-width:640px){.akteneu-wo{display:none}}
/* Akte des Kontakts: Die Karte „Wiedervorlage" lief am Handy über den Rand. */
@media (max-width:640px){
  .wvkarte{grid-template-columns:1fr 1fr !important}
  .wvkarte > .field:nth-of-type(3),.wvkarte > .btn{grid-column:1 / -1}
}
/* Angebot schreiben: Datum, „Gültig bis" und Betreff liefen am Handy über den Rand. */
@media (max-width:640px){
  .angebotkopf{grid-template-columns:1fr 1fr !important}
  .angebotkopf > .field:nth-of-type(3){grid-column:1 / -1}
}

/* ── Vorlagen-Editor (3.18) ── */
/* Unterlagen-Vorlagen schreiben (vorlagen/form): oben die Angaben zur Vorlage, darunter der Schreibtisch — eine Leiste
   mit Bausteinen, links die Laden (Platzhalter, Abschnitte, Schreibweise), daneben der Text. Rechts davon steht das
   fertige Blatt: Das ist die Hülle .bv aus „Vorschau beim Schreiben" (3.16), hier nur mit etwas mehr Breite für das
   Blatt. Unter 900 px liegt alles untereinander und die Laden sind zugeklappt über dem Text.
   Ohne JavaScript fehlt, was nur mit Skript etwas tut (.ve-nurjs); die Platzhalter stehen dann zum Abschreiben da. */
.ve:not(.ve-js) .ve-nurjs,.ve.ve-js .ve-ohnejs{display:none}
.ve-kopf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px;padding-bottom:4px}
.ve-kopf .field{margin-bottom:10px;min-width:0}
.ve-kopf-name{grid-column:span 2}
.ve-kopf-aktiv{grid-column:1 / -1}
.ve-kopf-aktiv .haken{font-weight:500;margin:0}
.ve:not(.ve-js) .ve-werkzeug{display:none}
.ve-werkzeug{padding:10px 14px;border-bottom:1px solid var(--line)}
.ve-bausteine{display:flex;gap:5px;flex-wrap:wrap}
/* Über dem Text: links die Beschriftung, rechts die Wahl, womit die Vorschau gefüllt wird. */
.ve-textkopf{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin-bottom:5px}
.ve-textkopf > label{margin:0}
.field .ve-muster{display:flex;align-items:center;gap:7px;min-width:0;margin:0;font-size:12px;font-weight:400;color:var(--ink-2)}
.ve-muster span{white-space:nowrap}
.field .ve-muster select{width:auto;min-width:0;max-width:250px;padding:4px 8px;font-size:12.5px}
.ve-raster{display:grid;grid-template-columns:minmax(0,1fr)}
.ve-kasten{min-width:0;border-bottom:1px solid var(--line)}
.ve-schreiben{min-width:0;padding:14px 14px 0}
.ve-text{font-size:12.5px !important;line-height:1.55 !important;min-height:300px;tab-size:2}
.ve-fuss{display:flex;gap:8px;align-items:center}
@media (min-width:900px){
  .ve-raster{grid-template-columns:252px minmax(0,1fr)}
  .ve-kasten{border-bottom:0;border-right:1px solid var(--line)}
}
/* Neben dem Text braucht das Blatt etwas mehr Platz als neben einem Angebot: Hier liest man, was man schreibt. */
@media (min-width:1340px){
  .bv.ve.bv-an{grid-template-columns:minmax(0,1fr) minmax(340px,35%)}
  /* Zu dritt nebeneinander wird es am Laptop (1366 px) eng: Die Laden geben nach, damit dem Text über 440 px bleiben. */
  .bv.ve.bv-an .ve-raster{grid-template-columns:216px minmax(0,1fr)}
  /* Steht das Blatt daneben, braucht es den Knopf „Vorschau" unter dem Text nicht. */
  .bv.ve.bv-an .ve-fussvorschau{display:none}
}
@media (min-width:1700px){
  .bv.ve.bv-an{grid-template-columns:minmax(0,1fr) minmax(340px,42%)}
  .bv.ve.bv-an .ve-raster{grid-template-columns:252px minmax(0,1fr)}
}
.ve-lade{border-bottom:1px solid var(--line)}
.ve-lade:last-child{border-bottom:0}
.ve-lade > summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;user-select:none;padding:10px 14px;font-size:13px;font-weight:600}
.ve-lade > summary::-webkit-details-marker{display:none}
.ve-lade > summary::before{content:"";flex:none;width:6px;height:6px;margin-top:-2px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .15s ease}
.ve-lade[open] > summary::before{transform:rotate(45deg)}
.ve-lade > summary:hover{background:var(--surface-2)}
.ve-lade-inhalt{padding:0 8px 12px;max-height:min(64vh,620px);overflow-y:auto;overscroll-behavior:contain}
.ve-klein{font-size:11.5px;line-height:1.4;margin:0 6px 6px}
/* Die Suche bleibt oben stehen, während die Liste darunter rollt. */
.ve-suche{display:block;position:sticky;top:0;z-index:1;width:100%;margin:0 0 8px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);box-shadow:0 0 0 4px var(--surface);font-size:12.5px}
.ve-suche:focus{outline:none;border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
.ve-gruppe h4{margin:10px 6px 3px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.ve-ph{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;padding:5px 7px;border:1px solid transparent;border-radius:var(--r-sm);font-size:12.5px;line-height:1.35}
.ve.ve-js .ve-ph{cursor:pointer}
.ve.ve-js .ve-ph:hover,.ve.ve-js .ve-ph:focus-visible{background:var(--surface-3);border-color:var(--line);outline:none}
.ve-ph-name{font-weight:500;overflow-wrap:anywhere}
.ve-ph code{font-family:var(--mono);font-size:11px;color:var(--acc);overflow-wrap:anywhere}
.ve-ph-wert{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ve-ph-wert.ve-fehlt{font-style:italic}
.ve-vorsicht{margin:2px 0 10px;padding:7px 9px;border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn);font-size:11.5px;line-height:1.4}
.ve-abschnitt{margin:0 0 8px;padding:8px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.ve-abschnitt .ve-klein{margin:0}
.ve-ab-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px}
.ve-ab-kopf b{min-width:0;overflow-wrap:anywhere}
.ve-ab-text{margin:5px 0;font-size:11.5px;line-height:1.45;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.ve-schreibweise{font-size:12px;line-height:1.75;padding-left:14px}
.ve-hw-kopf{margin:-4px 0 5px;font-size:12px;font-weight:600;color:var(--warn)}
.ve-hw-kopf .muted{font-weight:400;margin-left:4px}
.ve-hinweise ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:12px}
.ve-hinweise li{display:flex;gap:8px;align-items:baseline;line-height:1.4}
.ve-hw-stelle{flex:none;padding:1px 8px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);font-family:var(--mono);font-size:11px;color:var(--ink-2);cursor:pointer}
.ve-hw-stelle:hover{background:var(--surface-3);color:var(--ink)}
@media (max-width:899.98px){
  .ve-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ve-lade-inhalt{max-height:46vh}
  .field .ve-muster{flex:1 1 100%}
  .field .ve-muster select{flex:1;max-width:none}
  .ve-nurbreit{display:none}
  .ve-schreiben{padding:12px 10px 0}
  /* Am Handy nimmt die Tastatur schon die halbe Höhe: Der Fuß mit „Speichern" bleibt unter dem Text stehen. */
  .ve-fuss{position:static}
}
/* Im seitlichen Fenster (während eines Gesprächs öffnen Verweise dort) ist es schmal wie am Handy, egal wie breit
   der Bildschirm ist: untereinander. */
.panelinhalt .ve-raster{grid-template-columns:minmax(0,1fr)}
.panelinhalt .ve-kasten{border-right:0;border-bottom:1px solid var(--line)}
.panelinhalt .ve-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.panelinhalt .ve-lade-inhalt{max-height:46vh}
/* Neue Vorlage: die Auswahl, womit man anfängt. */
.ve-start{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:0 0 20px}
.ve-startkarte{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow);color:inherit}
.ve-startkarte:hover,.ve-startkarte:focus-visible{border-color:var(--acc-line);background:var(--surface-2)}
.ve-startkarte b{font-size:13.5px;overflow-wrap:anywhere}
.ve-startleer{border-style:dashed;box-shadow:none}
.ve-startwozu{font-size:11.5px;color:var(--acc)}
.ve-startanfang{font-size:12px;line-height:1.45;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ve-starttitel{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px;font-size:13.5px;font-weight:600}
.ve-starttitel .muted{font-size:12px;font-weight:400}
/* ── Wartungsvertrag und Abo gehören zusammen (3.18) ── */
/* Am Eintrag einer eigenen Tabelle: links der Satz, rechts der Knopf; am Handy untereinander. */
.eintragabo{margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
.eintragabo-zeile{display:flex;align-items:center;gap:12px;color:var(--ink-2)}
.eintragabo-zeile.warn{color:var(--warn)}
.eintragabo-text{flex:1;min-width:0;line-height:1.5}
.eintragabo-text a{color:var(--acc)}
.eintragabo-zeile .btn{flex:none;white-space:nowrap}
.eintragabo-zeichen{margin-left:6px;vertical-align:1px}
.cellmain .eintragabo-zeichen{margin:0;flex:none}
.abo-herkunft{color:var(--ink-2);line-height:1.5}
.abo-herkunft.warn{color:var(--warn)}
@media (max-width:640px){
  .eintragabo-zeile{flex-direction:column;align-items:stretch;gap:8px}
  .eintragabo-zeile .btn{text-align:center;justify-content:center}
}
/* Am Abo: Der Eintrag, zu dem es gehört, ist als Verweis zu erkennen. */
[data-gehoert-zu] a{color:var(--acc)}

/* ── Kostprobe gesperrter Muster (3.18) ── */
/* Ein gesperrtes Muster lässt sich ansehen (Klick zeigt die Vorschau), aber nicht wählen. */
.bm-kachel.gesperrt[data-kostprobe]{cursor:pointer}
.bm-kachel.gesperrt.kostprobe{outline:2px dashed var(--acc);outline-offset:2px}
.bm-kachel.gesperrt.kostprobe .bm-skizze{opacity:.8}
.bm-kostprobe{margin:0 0 8px;padding:8px 12px;border:1px dashed var(--acc);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:12.5px}
.bm-kostprobe[hidden]{display:none}

/* ── Sprungleiste der Einstellungen am Handy (3.18) ── */
/* Am Handy brauchte die Leiste vier Zeilen und nahm, weil sie oben klebt, ein Viertel des Bildschirms. Jetzt ist sie
   eine Zeile, die zur Seite rollt; rechts blendet sie aus, damit man sieht, dass es weitergeht. */
@media (max-width:760px){
  .sprungleiste{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,black calc(100% - 28px),transparent);mask-image:linear-gradient(to right,black calc(100% - 28px),transparent);
    padding-right:28px}
  .sprungleiste::-webkit-scrollbar{display:none}
  .sprungleiste a{flex:none;white-space:nowrap}
}

/* ── Nachfass-Radar: Liste und Regeln erst nebeneinander, wenn die Liste ganz hineinpasst (3.18) ── */
/* Bei 1440 px stand „Aktive Regeln" neben der Liste, und deren letzte Spalte (Ergebnis, „+7 T", „✕") war rechts
   abgeschnitten: Die Grenze von 1420 px stammt aus der Zeit vor der breiteren Seitenleiste. Gemessen (08.10.2026):
   Die Liste braucht mit ihren festen Spalten 1076 px, neben den Regeln bleiben ihr „Fensterbreite − 644 px" — das
   reicht erst ab 1720 px. Mit etwas Luft stehen die Regeln ab 1760 px daneben, darunter unter der Liste, wie bisher
   schon unter 1420 px. (Die Regel von vorher bleibt stehen; diese hier erweitert nur den Bereich.) */
@media (max-width:1759px){.radar{grid-template-columns:minmax(0,1fr)}}
/* Nachgemessen: Der Inhalt der Seite ist höchstens 1400 px breit. Neben 330 px für die Regeln blieben der Liste
   1056 px — 20 zu wenig, bei jeder Fensterbreite. Deshalb sind die Regeln daneben 290 px breit (Liste: 1096 px). */
@media (min-width:1760px){.radar{grid-template-columns:minmax(0,1fr) 290px}}

/* ── Nächster Schritt nach Anruf und E-Mail (3.18) ── */
.naechster{border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:14px}
.naechster-kopf{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:13px;margin-bottom:8px}
.naechster-kopf b{color:var(--ink)}
.naechster-wer{color:var(--ink-2)}
.naechster-wer a{color:var(--acc);font-weight:600}
.naechster-steht{color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:1px 9px;font-size:12px;overflow-wrap:anywhere}
.naechster-wahl{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.naechster-wahl form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.naechster-datum input[type=date]{padding:3px 6px;font-size:12.5px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);max-width:150px}
.naechster-fertig{font-size:13px;color:var(--ink-2)}
@media (max-width:640px){
  .naechster-wahl .btn{flex:1 1 auto;justify-content:center}
  .naechster-wahl form.naechster-knoepfe{flex:1 1 100%}
  .naechster-datum{flex:1 1 100%}
  .naechster-datum input[type=date]{flex:1 1 auto;max-width:none}
}

/* ── Konto löschen (3.18) ── */
.konto-folgen{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13.5px;color:var(--ink)}
.konto-bestaetigen{max-width:520px}
.konto-bestaetigen .field label b{color:var(--ink);overflow-wrap:anywhere}
.konto-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.konto-knoepfe .btn.danger{border-color:var(--crit)}

/* ── Probe-Mail an eine andere Adresse (3.18) ── */
.probemail{display:grid;gap:6px;margin-bottom:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.probemail > label{font-size:12.5px;font-weight:600;color:var(--ink)}
.probemail-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.probemail-zeile input{flex:1 1 220px;max-width:340px;min-width:0}
.probemail-ergebnis{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;margin-top:4px;overflow-wrap:anywhere}
.probemail-ergebnis .chip{flex:none}
@media (max-width:640px){.probemail-zeile input{max-width:none;flex-basis:100%}.probemail-zeile .btn{flex:1 1 auto;justify-content:center}}

/* ── Anmeldungen ohne Bestätigung im Betreiber-Bereich (3.18) ── */
.regfehler{font-size:12.5px;color:var(--crit);margin-top:4px;max-width:520px;overflow-wrap:anywhere}
@media (max-width:640px){
  table.regliste,table.regliste tbody,table.regliste tr,table.regliste td{display:block;width:auto}
  table.regliste thead{display:none}
  table.regliste tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  table.regliste td{padding:2px 0;border:0;text-align:left}
  table.regliste td.regtun{margin-top:6px;text-align:left}
}
table.regliste td.regtun{text-align:right;white-space:nowrap}

/* ── Feinschliff: Was beim Ansehen von 3.17 und 3.18 aufgefallen ist (3.19) ── */
/* „Neu in der Akte": Die erste Zeile („Für <Name>") schneidet ihren Text ab, wenn er zu lang ist — und ließ sich deshalb
   zusammendrücken, sobald die Liste höher war als ihr Platz. Keine Zeile gibt Höhe ab; die Liste rollt stattdessen. */
.akteneu-liste > *{flex-shrink:0}
/* Seite Aufgaben am Handy: Titel über die ganze Breite, Fälligkeit und Priorität nebeneinander, der Knopf darunter.
   (Vier Spalten nebeneinander ließen dem Titel 24 px, der Knopf stand außerhalb.) */
@media (max-width:640px){
  form[action$="/aufgaben"][style*="grid-template-columns"]:not([data-panel-bleib]):not(.boxform){grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
  form[action$="/aufgaben"][style*="grid-template-columns"]:not([data-panel-bleib]):not(.boxform) > div:first-of-type{grid-column:1 / -1}
  form[action$="/aufgaben"][style*="grid-template-columns"]:not([data-panel-bleib]):not(.boxform) > .btn{grid-column:1 / -1;justify-content:center}
}
/* Anpassen → Eigene Tabellen: Die Karte war so breit wie ihr Kopf (Name, zwei Zeichen und Knopf in einer Zeile) —
   am Handy breiter als der Bildschirm. Die Spalten dürfen schmaler werden als ihr Inhalt, Kopf und Zeilen brechen um. */
.anptab{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.anptab > *{min-width:0}
.anptab .cardhead,.anptab details.klappkarte > summary{flex-wrap:wrap}
.anptab .kv dd{overflow-wrap:anywhere}
@media (max-width:900px){.anptab{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .anptab .cardhead .btn{margin-left:0 !important}
  .anptab details.klappkarte > summary .muted{margin-left:0 !important}
}
/* Seitenfenster: Zeigt es eine Akte (oder kein Feld zum Tippen), steht die Tastatur auf dem Fenster selbst — ohne Rahmen. */
.panelbox:focus{outline:none}

/* ── Tafel: Karten ziehen (3.19) ── */
/* Die Tafel der Vorgänge: Spalten nebeneinander, Karten lassen sich in eine andere Spalte ziehen (app.js) oder über
   das kleine Menü an der Karte verschieben. Das Menü klappt IN der Karte auf — die Tafel rollt seitwärts und würde
   eine schwebende Liste abschneiden. */
.tafel{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.tafelspalte{flex:0 0 250px;margin:0;transition:box-shadow .12s,border-color .12s}
.tafelkarten{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:64px}
.tafelkarte{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tafelkarte.tafelstill{border-left:3px solid var(--warn)}
.tafelkarte-inhalt{display:block;padding:9px 10px;color:inherit;text-decoration:none;border-radius:inherit}
.tafelkarte-inhalt:hover{background:var(--surface-3)}
.tafelkarte-kopf{display:block;font-size:12.5px}
.tafel[data-tafel-ziehen] .tafelkarte-kopf{padding-right:22px}
.tafel-leer{font-size:12px;padding:18px 8px}
.tafelmenue > summary{position:absolute;top:5px;right:5px;width:24px;height:24px;display:grid;place-items:center;
  border-radius:var(--r-sm);list-style:none;cursor:pointer;color:var(--ink-3)}
.tafelmenue > summary::-webkit-details-marker{display:none}
.tafelmenue > summary .sym{width:14px;height:14px}
.tafelmenue > summary:hover,.tafelmenue > summary:focus-visible,.tafelmenue[open] > summary{background:var(--surface-3);color:var(--ink)}
.tafelmenue form{display:flex;flex-direction:column;gap:1px;padding:4px 6px 6px;border-top:1px solid var(--line)}
.tafelmenue-titel{padding:4px 4px 3px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tafelmenue button{display:block;width:100%;padding:6px 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);
  font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.tafelmenue button[hidden]{display:none}
.tafelmenue button:hover,.tafelmenue button:focus-visible{background:var(--surface-3);color:var(--ink)}
/* Beim Ziehen: die Karte verblasst an ihrem Platz, ein Abbild folgt dem Zeiger, die Spalte darunter leuchtet. */
.tafelkarte.tafelgriff{opacity:.35}
.tafelkarte.tafelwartet{opacity:.6}
.tafelgeist{position:fixed;left:0;top:0;z-index:200;margin:0;pointer-events:none;box-shadow:var(--shadow-lg);opacity:.96}
.tafelspalte.tafelziel{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
html.tafel-zieht,html.tafel-zieht *{cursor:grabbing !important;-webkit-user-select:none;user-select:none}
/* Ging es nicht (Recht, Sperre, jemand war schneller), steht die Karte wieder an ihrem Platz und wackelt kurz. */
.tafelkarte.tafelzurueck{animation:tafelzurueck .35s ease}
@keyframes tafelzurueck{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.tafelkarte.tafelzurueck{animation:none}.tafelspalte{transition:none}}
@media (max-width:640px){
  .tafelspalte{flex-basis:236px}
  .tafelmenue > summary{top:3px;right:3px;width:32px;height:32px}
  .tafel[data-tafel-ziehen] .tafelkarte-kopf{padding-right:30px}
  .tafelmenue button{padding:9px 8px;font-size:13.5px}
}

/* ── Team (3.19) ── */
/*
 * Organigramm, Karten, „Für wen", Rollenvorschlag. Farben nur über die Variablen aus :root (hell und dunkel).
 * Das Organigramm ist reines HTML und CSS: verschachtelte Listen, die Linien sind Ränder von ::before/::after.
 * Schmal (Handy) wird daraus eine eingerückte Liste.
 */
.orga-rahmen{overflow-x:auto;padding:22px 16px 26px}
.orga,.orga ul{list-style:none;margin:0;padding:0;display:flex;position:relative}
.orga{width:max-content;margin:0 auto;gap:26px;align-items:flex-start}
.orga ul{padding-top:22px;justify-content:center}
.orga li{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px 7px 0}
.orga > li{padding-top:0}
.orga ul::before{content:"";position:absolute;top:0;left:50%;width:0;height:22px;border-left:1px solid var(--line-2)}
.orga li::before,.orga li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:22px;border-top:1px solid var(--line-2)}
.orga li::after{right:auto;left:50%;border-left:1px solid var(--line-2)}
.orga li:first-child::before,.orga li:last-child::after{border-top:0 none}
.orga li:last-child::before{border-right:1px solid var(--line-2);border-top-right-radius:7px}
.orga li:first-child::after{border-top-left-radius:7px}
.orga li:last-child::after{border-left:0 none}
.orga li:only-child::before{border-right:1px solid var(--line-2);border-radius:0}
.orga > li::before,.orga > li::after{display:none}

.teamkarte{width:214px;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 12px 10px;text-align:left;font-size:12.5px;line-height:1.4;box-shadow:var(--shadow);min-width:0}
.teamkarte.ich{border-color:var(--acc-line);background:var(--acc-soft)}
.teamkarte.weg{border-style:dashed}
.teamkarte-name{display:flex;gap:6px;align-items:center;font-size:13.5px;color:var(--ink)}
.teamkarte-name b{overflow-wrap:anywhere}
.teamkarte-position{color:var(--ink-2);margin:1px 0 7px;overflow-wrap:anywhere}
.teamkarte-marken{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.teamkarte-zeile{display:flex;gap:6px;align-items:center;color:var(--ink-2);text-decoration:none;min-width:0}
.teamkarte-zeile span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamkarte-zeile:hover{color:var(--acc)}
.teamkarte-zeile svg{width:13px;height:13px;flex:none}
.teamkarte-weg{margin-top:7px;padding:5px 7px;border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn);font-size:12px}
.teamkarte-hinweis{margin-top:6px;color:var(--ink-3);font-size:12px}
.teamkarte-aendern{display:inline-block;margin-top:7px;font-size:11.5px;color:var(--acc)}

.teamraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:12px}
.teamraster .teamkarte{width:auto;box-shadow:none}
.teamsuche{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.teamsuche input[type=search]{flex:1;min-width:180px;max-width:420px}
.teamich{margin-bottom:14px}
.teamich > summary{cursor:pointer;list-style:none}
.teamich > summary::-webkit-details-marker{display:none}
.teamich-spalten{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.teamich-zeit,.teamfelder-vertretung{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.teamfelder-vertretung{grid-template-columns:2fr 1fr 1fr}

.rollenvorschlag{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin:-2px 0 14px;padding:10px 12px;border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:var(--r-sm);font-size:12.5px}
.rollenvorschlag-text{flex:1;min-width:220px;color:var(--ink-2)}
.rollenvorschlag-text b{display:block;color:var(--ink);margin-bottom:2px}
.rollenvorschlag-wahl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rollenworte{margin:0 0 10px;font-size:12.5px;color:var(--ink-2);line-height:1.5}

.aufgabe-neu{display:grid;grid-template-columns:2fr 150px 130px auto;gap:12px;align-items:start}
.aufgabe-neu.mit-wem{grid-template-columns:2fr 150px 130px minmax(170px,1fr) auto}
.aufgabe-neu > button{margin-top:21px}
.fuerwen-hinweis{margin:6px 0 0;font-size:12px;color:var(--warn);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Die Liste der Aufgaben: Kästchen und Titel sind hier echte Tabellenzellen. Sonst sind beide Flexkästen (.kasten,
   .cellmain), der Browser steckt sie zusammen in EINE Zelle, und die Spaltenköpfe stehen eine Spalte zu weit rechts. */
.aufgabenliste td.kasten,.aufgabenliste th.kasten,.aufgabenliste .cellmain,.teamliste .cellmain{display:table-cell}
.teamliste .cellmain b{display:inline}
.aufgabenliste .cellmain small{white-space:normal}
.vhead .acts.umbruch{flex-wrap:wrap;justify-content:flex-end}
.rollenvorschlag-hinweis{font-size:11.5px}
.erwaehnung-hinweis{font-size:11.5px;margin:-4px 0 10px}
.aufgaben-wer{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px;border-bottom:1px solid var(--line)}
.aufgaben-wer a{padding:8px 12px;font-size:13px;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.aufgaben-wer a.an{color:var(--ink);border-bottom-color:var(--acc);font-weight:600}
.aufgaben-wer .n{display:inline-block;min-width:18px;padding:0 5px;margin-left:3px;border-radius:9px;background:var(--surface-3);
  color:var(--ink-2);font-size:11.5px;text-align:center;font-weight:500}
.aufgabe-verlauf{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}
.weitergeben{display:inline-block;position:relative;vertical-align:top}
.weitergeben > summary{list-style:none;display:inline-flex}
.weitergeben > summary::-webkit-details-marker{display:none}
.weitergeben > form{position:absolute;right:0;top:calc(100% + 4px);z-index:36;width:270px;padding:12px;display:grid;gap:8px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);white-space:normal;text-align:left}
.weitergeben .field{margin:0}
.uebergabe-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.uebergabe-form .field{margin:0;min-width:240px}

@media (max-width:760px){
  .orga-rahmen{padding:12px 10px 14px;overflow-x:visible}
  .orga,.orga ul{display:block;width:auto}
  .orga ul{padding:0 0 0 12px;margin-left:10px;border-left:1px solid var(--line-2)}
  .orga li{display:block;padding:8px 0 0}
  .orga > li + li{margin-top:6px}
  .orga li::before,.orga li::after,.orga ul::before{display:none}
  .teamkarte{width:auto}
  .teamich-spalten{grid-template-columns:1fr}
  .teamfelder-vertretung{grid-template-columns:1fr 1fr}
  .teamfelder-vertretung > .field:first-child{grid-column:1 / -1}
  .aufgabe-neu,.aufgabe-neu.mit-wem{grid-template-columns:1fr 1fr}
  .aufgabe-neu > .field:first-of-type,.aufgabe-neu > button{grid-column:1 / -1}
  .aufgabe-neu > button{margin-top:0}
  .vhead .acts.umbruch{justify-content:flex-start;margin-left:0}
  .weitergeben > form{position:static;width:auto;margin-top:6px}
  .teamliste th:nth-child(4),.teamliste td:nth-child(4){display:none}
}

/* ── Auskunft in der Akte (3.19) ── */
.auskunft{margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r-sm);background:var(--surface);font-size:12.5px}
.auskunft-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.auskunft-titel{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.auskunft-zust{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.auskunft-wort{color:var(--ink-3)}
.auskunft-wahl{position:relative;display:inline-block;min-width:0}
.auskunft-wahl > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.auskunft-wahl > summary::-webkit-details-marker{display:none}
.auskunft-wahl > summary:hover,.auskunft-wahl[open] > summary{border-color:var(--line-2)}
.auskunft-wahl > summary span{color:var(--ink-3);font-size:11px}
.auskunft-wahlliste{position:absolute;z-index:36;top:calc(100% + 4px);left:0;min-width:210px;max-width:min(300px,80vw);max-height:260px;overflow:auto;padding:5px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow)}
.auskunft-wahlliste form{display:block;margin:0}
.auskunft-wahlliste button{display:block;width:100%;padding:6px 9px;border:0;border-radius:6px;background:none;text-align:left;font-size:12.5px;cursor:pointer}
.auskunft-wahlliste button:hover{background:var(--surface-3)}
.auskunft-wahlliste button[aria-current="true"]{background:var(--acc-soft);font-weight:600}
.auskunft-wahlliste button.leise{color:var(--ink-3)}
.auskunft-zeilen{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 14px;margin:8px 0 0}
.auskunft-zeile{display:contents}
.auskunft-zeile dt{color:var(--ink-3);white-space:nowrap;padding-top:2px}
.auskunft-zeile dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0}
.auskunft-teil{display:inline-block;max-width:100%;padding:2px 9px;border-radius:20px;background:var(--surface-3);color:var(--ink-2);overflow-wrap:anywhere}
.auskunft-teil b{color:var(--ink);font-weight:600}
a.auskunft-teil:hover{background:var(--acc-soft);color:var(--ink)}
.auskunft-teil.ton-crit{background:var(--crit-soft);color:var(--crit)}
.auskunft-teil.ton-crit b{color:var(--crit)}
.auskunft-ziel{animation:auskunftZiel 1.4s ease-out}
@keyframes auskunftZiel{from{box-shadow:0 0 0 3px var(--acc-line)}to{box-shadow:0 0 0 3px transparent}}
@media (max-width:640px){
  .auskunft{padding:10px 12px}
  .auskunft-zeilen{grid-template-columns:minmax(0,1fr);gap:2px}
  .auskunft-zeile dt{padding-top:6px;font-size:11.5px}
  .auskunft-teil{border-radius:10px}
}
.aktefehlt{margin:0 0 16px}
.aktefehlt > .sec-title:first-child{margin-top:0}
.fehlt-zeile{flex-wrap:wrap}
.fehlt-zeile form{margin:0}
.fehlt-was{flex:1 1 220px;min-width:0}
.fehlt-was b{display:block;font-size:12.5px;overflow-wrap:anywhere}
.fehlt-was small{font-size:11.5px}
.fehlt-was small a{text-decoration:underline}
.fehlt-tun{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fehlt-tun select{max-width:180px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:12px}
.fehlt-frisch{margin:0 0 10px}
.fehlt-wahl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fehlt-wahl form{margin:0}
.fehlt-portal{font-size:11.5px;margin:6px 0 8px}
.fehlt-portal:empty{display:none}
.fehlt-klappe{margin:0 8px 8px 0;display:inline-block;vertical-align:top;max-width:100%}
.fehlt-klappe[open]{display:block;margin-right:0}
.fehlt-klappe > summary{list-style:none;cursor:pointer}
.fehlt-klappe > summary::-webkit-details-marker{display:none}
.fehlt-klappe[open] > summary{background:var(--surface-3)}
.fehlt-zeile .fehlt-klappe{margin:0}
.fehlt-zeile .fehlt-klappe[open]{flex:1 1 100%}
.fehlt-form{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.fehlt-form p{margin:0 0 8px;font-size:12px}
.fehlt-form textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:12.5px;margin-bottom:8px}
.fehlt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px}
.fehlt-vorschlaege{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.fehlt-vorschlaege .chip{border:1px solid var(--line);background:var(--surface);cursor:pointer}
.fehlt-vorschlaege .chip:hover{border-color:var(--acc-line);background:var(--acc-soft)}
.zustfilter{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)}
.zustfilter a{padding:6px 11px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.zustfilter a.on{background:var(--acc-soft);color:var(--ink);font-weight:600}
@media (max-width:640px){.fehlt-tun select{max-width:none;flex:1 1 100%}}

/* ── Funktion fehlt? (3.19) ── */
.funktion-fehlt{margin:18px 0 0;text-align:right;font-size:12px}
.funktion-fehlt a{color:var(--ink-3);border-bottom:1px dotted var(--line-2)}
.funktion-fehlt a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.ff-seite,.bm-ticket{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.ff-zwei,.bm-zwei,.bm-stand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.ff-klein{font-size:11.5px;margin-top:4px}
.ff-dringend .ff-wahl{display:inline-flex;align-items:center;gap:6px;margin:0 16px 0 0;font-size:13px;font-weight:400;color:var(--ink)}
.ff-dringend .ff-wahl input{width:auto;margin:0}
.ff-wissen{font-size:13px}
.ff-wissen p{margin:0 0 8px}
.ff-wissen p:last-child{margin-bottom:0}
.ff-aehnlich{margin:0 0 14px;padding:10px 12px;border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:var(--r-sm)}
.ff-aehnlich[hidden]{display:none}
.ff-frage{display:block;font-size:12.5px;margin-bottom:8px}
.ff-liste{display:grid;gap:8px}
.ff-ticket{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;display:grid;gap:4px;justify-items:start}
.ff-kopf,.bm-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ff-kopf b,.bm-kopf b{font-size:13.5px;overflow-wrap:anywhere}
.ff-unter,.ff-schon{font-size:12px}
.ff-meine,.bm-neu{display:grid}
.ff-meldung,.bm-meldung{padding:12px 14px;border-bottom:1px solid var(--line);display:grid;gap:5px;min-width:0}
.ff-meldung:last-child,.bm-meldung:last-child{border-bottom:0}
.ff-text,.bm-text{font-size:13px;white-space:pre-line;overflow-wrap:anywhere;color:var(--ink-2)}
.ff-stand{font-size:13px}
.ff-antwort{font-size:13px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);white-space:pre-line;overflow-wrap:anywhere}
.ff-abstand{margin-top:14px}
.ff-verweis,.bm-verweis{color:var(--acc);text-decoration:underline}
/* Betreiber-Bereich → Meldungen */
.bm-ruhig{margin:0}
.bm-oben{margin-top:10px}
.bm-klein{font-size:11.5px}
.bm-neben{margin-left:8px}
.bm-wer{font-size:12px}
.bm-tun{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.bm-tun form{margin:0}
.bm-tun .btn{max-width:100%;white-space:normal;text-align:left}
.bm-mehr>summary{list-style:none;cursor:pointer;display:inline-flex}
.bm-mehr>summary::-webkit-details-marker{display:none}
.bm-mehr[open]{flex:1 1 100%}
.bm-mehr-inhalt{margin-top:8px;display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.bm-reihe{display:flex;gap:6px;flex-wrap:wrap}
.bm-reihe input,.bm-reihe select{flex:1 1 220px;min-width:0;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:13px}
.bm-filter{margin-top:18px}
.bm-tabelle{border:0;box-shadow:none;border-radius:0}
.bm-tabelle table{min-width:560px}
.bm-programm td{background:var(--surface-2);font-size:11.5px;font-weight:600;color:var(--ink-2);padding:6px 12px}
.bm-titel{font-weight:600;overflow-wrap:anywhere}
.bm-titel:hover{color:var(--acc)}
.bm-datum{white-space:nowrap}
.bm-wuensche{padding:12px 14px;border-top:1px solid var(--line);display:grid;gap:6px}
.bm-wuensche-kopf{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.bm-wunsch{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.bm-zahl{font-size:12.5px;color:var(--ink-2)}
.vhead p.bm-kopfzeile{max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px}
@media (max-width:900px){.ff-seite,.bm-ticket{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .ff-zwei,.bm-zwei,.bm-stand{grid-template-columns:minmax(0,1fr)}
  .funktion-fehlt{text-align:left}
  .bm-neben{display:block;margin:8px 0 0}
}

/* ── Daten importieren: alles übernehmen (3.19) ── */
.importzuordnung select,.importwerte select{max-width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font:inherit;font-size:13px}
.importzuordnung select:focus,.importwerte select:focus{outline:none;border-color:var(--acc-line)}
.importwerte td:first-child{overflow-wrap:anywhere}
.importgruende table{width:100%;min-width:0}
.importdateien input[type=file]{max-width:100%}
@media (max-width:640px){
  .importzuordnung table,.importzuordnung tbody,.importzuordnung tr,.importzuordnung td,
  .importwerte table,.importwerte tbody,.importwerte tr,.importwerte td{display:block;width:auto;max-width:none!important}
  .importzuordnung table,.importwerte table{min-width:0}
  .importzuordnung thead,.importwerte thead{display:none}
  .importzuordnung tr,.importwerte tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  .importzuordnung td,.importwerte td{padding:2px 0;border:0}
  .importzuordnung select,.importwerte select{width:100%;margin-top:4px}
}

/* ── Umzug aus dem alten Programm (3.19) ── */
.umzug-programm{cursor:default}
.umzug-programm:hover{background:var(--surface);border-color:var(--line)}
.umzug-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.umzug-hinweis{margin:12px 0 0;font-size:12.5px;max-width:80ch}
.umzug-klein{font-size:12px;line-height:1.45}
.umzug-warn{color:var(--crit)}
.umzug-gut{color:var(--good)}
.umzug-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.umzug-zeile .field{margin:0;min-width:200px}
.umzug-zeile form{display:inline-flex}
.umzug-fuss{display:grid;gap:12px}
.umzug-trenn{border-top:1px solid var(--line)}
.umzug-liste{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:13px;overflow-wrap:anywhere}
.umzug-offen,.umzug-unterlagen{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px}
.umzug-offen{margin-bottom:12px;border-color:var(--warn);background:var(--warn-soft)}
.umzug-unterlagen details{margin-top:6px}
.umzug-unterlagen summary{cursor:pointer;color:var(--acc);font-size:12.5px}
.umzug-abgelehnt{border-top:1px solid var(--line);font-size:13px}
.umzug-hochladen .field{max-width:560px}
.umzug-hochladen .umzug-klein{display:block;margin-top:8px;max-width:80ch}
.umzug-haken{display:inline-flex;gap:7px;align-items:center;font-size:13px;margin-top:8px}
.umzug-haken input{width:15px;height:15px;flex:none}
.umzug-platz{width:58px;padding:5px 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:12.5px;text-align:right}
.umzug-dateien select,.umzug-spalten select,.umzug-neu input{max-width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:13px}
.umzug-dateien select{width:220px}
.umzug-spalten select{width:320px}
.umzug-dateien td,.umzug-spalten td{vertical-align:top}
.umzug-dateien td a b{color:var(--ink)}
.umzug-rechnung{font-size:12.5px;font-variant-numeric:tabular-nums}
.umzug-zahlen{min-width:150px}
.umzug-beispiele{font-size:12px;max-width:340px}
.umzug-beispiele div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umzug-neu{display:none;flex-wrap:wrap;gap:6px;margin-top:6px}
.umzug-neu input{flex:1 1 160px;min-width:0;max-width:320px}
.umzug-spalten .umzug-neu select{flex:none;width:150px}
.umzug-spalten td:has(option[value="_neu"]:checked) .umzug-neu{display:flex}
.umzug-unentschieden td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.umzug-stand{background:var(--surface-3);color:var(--ink-2)}
.umzug-stand-geprueft{background:var(--cool-soft);color:var(--cool)}
.umzug-stand-laeuft{background:var(--warn-soft);color:var(--warn)}
.umzug-stand-uebernommen{background:var(--good-soft);color:var(--good)}
.umzug-laeuft{border-color:var(--warn)}
.umzug-verweis{margin:0;font-size:13px}
.umzug-werte{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.umzug-wertblock{font-size:13px}
table.umzug-werteliste{min-width:0;margin-top:6px}
table.umzug-werteliste td{padding:4px 8px 4px 0;border:0;font-size:13px}
table.umzug-werteliste select{padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:13px;max-width:200px}
@media (max-width:640px){
  .umzug-zeile{align-items:stretch}
  .umzug-zeile .field{flex:1 1 100%}
  .umzug-zeile .btn{justify-content:center}
  .umzug-dateien select{width:200px}
  .umzug-spalten select{width:220px}
}

/* ── Marktplatz: Stand je Anbindung, Anleitungen, Geplantes (3.20) ── */
.anb-standwahl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;font-size:12.5px}
.anb-standwahl a{padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--surface)}
.anb-standwahl a.on{border-color:var(--acc);color:var(--acc);font-weight:600}
.anb-karte p.anb-stand,.anb-stand{font-size:11.5px;line-height:1.45;color:var(--ink-3);margin:0;flex:0}
.anb-karte p.anb-stand[data-stand="bestaetigt"],.anb-stand[data-stand="bestaetigt"]{color:var(--good)}
.anb-acts{flex-wrap:wrap;max-width:100%}
.anb-punkt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:6px;vertical-align:1px}
.anb-geplant{border-style:dashed}
.anb-geplant b{color:var(--ink-3)}
.anb-schritte{margin:0;padding-left:20px;display:grid;gap:10px}
.anb-schritte li{font-size:13px;line-height:1.5}
.anb-schritte li b{display:block}
.anb-schritte li span{color:var(--ink);overflow-wrap:anywhere}
.anb-bestaetigung td{vertical-align:top}
.anb-bestaetigung details summary{cursor:pointer;font-size:12.5px;color:var(--acc)}
.anb-bestaetigung form{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px;max-width:640px}
.anb-bestaetigung form .anb-voll{grid-column:1/-1}
.anb-bestaetigung form .anb-knoepfe{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:640px){
  .anb-bestaetigung table,.anb-bestaetigung tbody,.anb-bestaetigung tr,.anb-bestaetigung td{display:block;width:auto}
  .anb-bestaetigung thead{display:none}
  .anb-bestaetigung tr{border-bottom:1px solid var(--line);padding:8px 0}
  .anb-bestaetigung td{border:0;padding:4px 12px}
}

/* ── Umzug über die Schnittstelle (3.20) ── */
.quellen-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 12px; }
.quellen-feld { flex: 1 1 320px; margin: 0; }
.quellen-feld input { width: 100%; }
.quellen-klein { font-size: 13px; }
.quellen-verbunden { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.quellen-vorschau td.num, .quellen-stufen td.num { font-variant-numeric: tabular-nums; }
table.quellen-vorschau { min-width: 0; }
.quellen-stufen select { max-width: 100%; }
@media (max-width: 600px) {
  .quellen-zeile > .btn { width: 100%; }
  .quellen-stufen th:nth-child(2), .quellen-stufen td:nth-child(2) { display: none; }
  table.quellen-vorschau th, table.quellen-vorschau td { padding-left: 8px; padding-right: 8px; }
}

/* ── Berichte (3.20) ── */
.bericht-vorlagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.bericht-vorlage{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--ink);text-decoration:none}
.bericht-vorlage:hover{border-color:var(--acc-line);background:var(--acc-soft)}
.bericht-vorlage b{font-size:13.5px}
.bericht-vorlage span{font-size:12.5px;color:var(--ink-3)}
.bericht-aktionen{white-space:nowrap;text-align:right}
.bericht-aktionen form{display:inline}
.bericht-fussnote{font-size:12px;margin:10px 16px 14px}
.bericht-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 14px;padding-bottom:4px}
.bericht-felder .field{margin-bottom:8px}
.bericht-zwei{display:flex;gap:6px}
.bericht-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border-top:1px solid var(--line);padding-top:12px;padding-bottom:12px}
.bericht-filter-titel{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.bericht-filterzeile{display:flex;align-items:center;gap:6px}
.bericht-filterzeile select{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:12.5px;max-width:220px}
.bericht-ist{font-size:12px;color:var(--ink-3)}
.bericht-knopf{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:10px;padding-bottom:10px;font-size:12px}
.bericht-form.rechnet + * , .bericht-form.rechnet ~ .bericht-ergebnis{opacity:.55;transition:opacity .2s}
.bericht-hinweis{margin:0 0 12px;font-size:12.5px}
.bericht-tabelle{border-radius:0 0 var(--r) var(--r);box-shadow:none;border-width:1px 0 0}
.bericht-tabelle table{min-width:0}
.bericht-tabelle tfoot td{border-bottom:0;background:var(--surface-2);font-weight:600}
.bericht-speichern-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:4px 14px;align-items:end}
.bericht-speichern-knopf .btn{white-space:nowrap}
.bericht-loeschen{padding-top:0}
/* Diagramme: Farben nur aus den Variablen, deshalb hell und dunkel gleich lesbar. */
.bd{--bd-hoehe:220px;font-size:12px;color:var(--ink-2)}
.bd .leer{padding:24px 10px}
.bd-saeulen,.bd-linie{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:var(--bd-hoehe) auto;column-gap:8px}
.bd-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap;padding:0 0 0 0}
.bd-flaeche{position:relative;border-bottom:1px solid var(--line-2);min-width:0}
.bd-netz span{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.bd-slots{position:absolute;inset:0;display:flex;align-items:stretch;gap:3px}
.bd-slot{flex:1 1 0;min-width:0;display:flex;flex-direction:column-reverse;justify-content:flex-start}
.bd-slot:hover .bd-teil{filter:brightness(1.12)}
.bd-teil{display:block;min-height:1px}
.bd-slot .bd-teil:first-child{border-radius:0}
.bd-slot .bd-teil:last-child{border-radius:3px 3px 0 0}
.bd-x{grid-column:2;position:relative;height:30px;font-size:10.5px;color:var(--ink-3)}
.bd-x-slots{display:flex;gap:3px;height:auto;padding-top:5px}
.bd-x-slots span{flex:1 1 0;min-width:0;display:flex;justify-content:center;white-space:nowrap;overflow:visible}
.bd-x-slots span:first-child{justify-content:flex-start}
.bd-x-slots span:last-child{justify-content:flex-end}
.bd-linie .bd-x span{position:absolute;top:5px;transform:translateX(-50%);white-space:nowrap}
.bd-linie .bd-x span:first-child{transform:none}
.bd-linie .bd-x span:last-child{transform:translateX(-100%)}
.bd-linie svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bd-netzlinie{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.bd-strich{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bd-punkte{position:absolute;inset:0}
.bd-punkte span{position:absolute;top:0;bottom:0;width:14px;margin-left:-7px}
.bd-punkte span:hover{background:var(--acc-soft);opacity:.6}
.bd-balken{display:flex;flex-direction:column;gap:6px}
.bd-zeile{display:grid;grid-template-columns:minmax(90px,220px) minmax(0,1fr) auto;align-items:center;gap:10px}
.bd-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.bd-bahn{display:flex;height:16px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.bd-bahn .bd-teil{height:100%}
.bd-wert{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;text-align:right;min-width:70px}
.bd-legende{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:14px 0 0;padding:0}
.bd-legende li{display:flex;align-items:center;gap:6px}
.bd-legende i{width:10px;height:10px;border-radius:3px;flex:none}
.bd-torte-wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.bd-torte{width:190px;height:190px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px var(--line)}
.bd-legende-torte{flex-direction:column;margin:0;flex:0 1 420px;min-width:220px}
.bd-legende-torte li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:8px}
.bd-legende-torte b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.bd-legende-torte em{font-style:normal;color:var(--ink-3);min-width:52px;text-align:right}
@media (max-width:900px){
  .bericht-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .bericht-felder{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
  .bericht-felder .field label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bericht-filterzeile{flex-wrap:wrap;width:100%}
  .bericht-filterzeile select{max-width:none;flex:1 1 140px}
  .bericht-speichern-form{grid-template-columns:minmax(0,1fr)}
  .bericht-knopf{flex-wrap:wrap}
  .bd{--bd-hoehe:180px}
  .bd-x .bd-breit{visibility:hidden}
  .bd-zeile{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .bd-name{grid-column:1 / -1}
  .bd-torte{width:150px;height:150px}
  .bericht-aktionen{white-space:normal}
}
@media print{
  /* Nur auf Seiten mit einem Bericht: Seitenleiste und Kopfleiste weg, das Blatt gehört dem Bericht. */
  body:has(.bericht-ergebnis) .rail,body:has(.bericht-ergebnis) .topbar,body:has(.bericht-ergebnis) .funktion-fehlt{display:none !important}
  body:has(.bericht-ergebnis) .app,body:has(.bericht-ergebnis) .main{display:block !important;height:auto !important;overflow:visible !important;margin:0 !important;padding:0 !important}
  .bericht-form,.bericht-speichern,.bericht-hinweis,.vhead .acts{display:none !important}
  .bericht-ergebnis{box-shadow:none;border:0}
  .bd-teil,.bd-legende i,.bd-torte{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── Helpdesk (3.20) ── */
.hd-reiter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.hd-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px}
.hd-filter .field{margin:0;min-width:150px;flex:0 1 190px}
.hd-filter .field:first-of-type{flex:1 1 220px}
.hd-filter-knoepfe{display:flex;gap:6px;padding-bottom:1px}
.hd-rot{color:var(--crit);font-weight:600}
.hd-heute{color:var(--warn);font-weight:600}
.hd-neuantwort{color:var(--acc);font-weight:600}
.hd-tabelle tr.hd-ueber td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
.hd-nummer{color:var(--ink-3);font-weight:500;margin-right:4px}
.hd-raster{align-items:start}
.hd-links,.hd-rechts{display:flex;flex-direction:column;gap:14px;min-width:0}
.hd-verlauf{list-style:none;margin:0;padding:0}
.hd-eintrag{padding:12px 16px;border-top:1px solid var(--line)}
.hd-eintrag:first-child{border-top:0}
.hd-eintrag-kopf{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;margin-bottom:4px;font-size:12.5px}
.hd-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.55;color:var(--ink)}
.hd-kunde{background:var(--surface)}
.hd-antwort.hd-eintrag,.hd-eintrag.hd-antwort{background:var(--acc-soft)}
.hd-eintrag.hd-notiz{background:var(--plum-soft)}
.hd-eintrag.hd-stand{padding-top:6px;padding-bottom:6px}
.hd-eintrag.hd-stand .hd-eintrag-kopf{margin:0;color:var(--ink-3)}
.hd-eintrag.hd-stand .hd-text{font-size:12.5px;color:var(--ink-3)}
.hd-eintrag.hd-kunde.hd-intern{background:var(--warn-soft)}
/* 3.24.2 Teil 11: Antwortvorschlag der KI — intern, bis jemand ihn übernimmt und sendet */
.hd-eintrag.hd-vorschlag{background:var(--surface-2);border-left:3px solid var(--warn)}
.hd-vorschlag-zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.hd-vorschlagform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.hd-bausteinzeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.hd-bausteinzeile select{flex:1 1 200px;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink)}
.hd-zeile{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.hd-zeile>.field{flex:1 1 180px;min-width:0}
.hd-senden{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.hd-standknoepfe{display:flex;gap:6px;flex-wrap:wrap}
.hd-portalhinweis{font-size:12.5px;color:var(--ink-2)}
.hd-aktenliste{list-style:none;margin:0;padding:0}
.hd-aktenliste li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 16px;border-top:1px solid var(--line)}
.hd-aktenliste li:first-child{border-top:0}
.hd-aktenliste li>a{flex:1 1 200px;min-width:0}
.hd-baustein{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px 4px;margin:0 0 12px}
.hd-baustein legend{font-size:12px;font-weight:600;color:var(--ink-2);padding:0 4px}
.hd-weg{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-3);margin:0 0 8px}
.hd-platzhalter{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:12.5px}
.hd-platzhalter dd{margin:0;color:var(--ink-2)}
.hd-fristen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px}
.hd-formular{max-width:820px}
.hd-nur-schmal{display:none}
@media (max-width:700px){
  .hd-nur-schmal{display:inline}
  .hd-filter .field{flex:1 1 calc(50% - 10px);min-width:0}
  .hd-filter .field:first-of-type{flex:1 1 100%}
  .hd-fristen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd-tabelle .hd-schmal-weg{display:none}
  .hd-tabelle{min-width:0}
  .hd-tabelle th{width:auto !important}
  .hd-tabelle td,.hd-tabelle th{padding-left:10px;padding-right:10px}
}

/* ── Live-Chat (3.20) ── */
.lc-liste{padding:0;overflow:hidden}
.lc-zeile{display:grid;grid-template-columns:minmax(160px,240px) 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.lc-zeile:last-child{border-bottom:0}
.lc-zeile:hover{background:var(--surface-2)}
.lc-zeile.lc-neu .lc-wer b{color:var(--acc)}
.lc-wer{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.lc-wer b{overflow-wrap:anywhere}
.lc-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13px}
.lc-zeit{font-size:12px;color:var(--ink-3,var(--ink));white-space:nowrap}
.lc-raster{align-items:start}
.lc-gespraech{display:flex;flex-direction:column}
.lc-verlauf{display:flex;flex-direction:column;gap:8px;padding:14px;max-height:56vh;min-height:220px;overflow-y:auto;background:var(--surface-2)}
.lc-m{max-width:82%;display:flex;flex-direction:column;align-items:flex-start}
.lc-m .lc-t{padding:8px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.lc-m .lc-z{font-size:11px;color:var(--ink-3,var(--ink));opacity:.8;margin:2px 6px 0}
.lc-team,.lc-bot,.lc-ki{align-self:flex-end;align-items:flex-end}
.lc-team .lc-t{background:var(--acc);border-color:var(--acc);color:var(--surface)}
.lc-bot .lc-t,.lc-ki .lc-t{background:var(--acc-soft);border-color:transparent}
.lc-antwort{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);align-items:flex-end}
.lc-antwort textarea{flex:1;min-height:44px;resize:vertical;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit}
.lc-kontakt{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.lc-kontakt summary{cursor:pointer;font-weight:600}
.lc-kontakt form{margin-top:10px}
.lc-felder{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.lc-baustein{width:100%;font-size:12.5px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);resize:none;word-break:break-all}
.lc-zeiten{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;align-items:center}
.lc-zeiten input{padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.lc-regeln{display:flex;flex-direction:column;gap:10px}
.lc-regel{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:10px}
.lc-regel input,.lc-regel textarea{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit}
.lc-haken{display:flex;gap:8px;align-items:center;font-weight:500}
@media (max-width:640px){
  .lc-zeile{grid-template-columns:1fr auto;gap:4px 10px}
  .lc-text{grid-column:1 / -1;grid-row:2}
  .lc-felder,.lc-regel{grid-template-columns:1fr}
  .lc-zeiten{grid-template-columns:90px 1fr}
  .lc-m{max-width:92%}
}

/* ── Landingpages (3.20) ── Baukasten: Bausteine links, Vorschau rechts (die öffentliche Seite hat ihr eigenes Stylesheet, landingpage.css). */
.lp-bau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.lp-bau-links>.card,.lp-bau-rechts>.card{margin-bottom:12px}
.lp-bau-rechts{position:sticky;top:12px}
.lp-still{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lp-baustein-kopf{flex-wrap:wrap;gap:6px 10px}
.lp-baustein-kopf .sub{flex:1 1 200px}
.lp-knoepfe{display:inline-flex;gap:4px;margin-left:auto}
.lp-griff{cursor:grab;user-select:none;letter-spacing:-1px}
.lp-baustein.lp-zieht{opacity:.55;outline:2px dashed var(--acc-line)}
.lp-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.lp-zeile{margin-bottom:6px}
.lp-eintrag{border-left:3px solid var(--line);padding-left:10px;margin-bottom:10px}
.lp-klein{font-size:12.5px;margin:0 0 10px}
.lp-mehrweniger{display:flex;gap:6px;flex-wrap:wrap}
.lp-bildzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp-bildzeile input[type=file]{flex:1 1 220px;background:transparent;border-style:dashed}
.lp-daumen{width:96px;height:60px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.lp-dazu{border-style:dashed;background:var(--surface-2)}
.lp-dazu-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lp-farbwahl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.lp-farbwahl input[type=color]{width:44px;height:30px;padding:0 2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.lp-formularwahl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lp-formularwahl select{flex:1 1 220px;width:auto}
.lp-speichern{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.lp-speichern .muted{font-size:12.5px}
.lp-ansicht{display:inline-flex;gap:4px;margin-left:auto}
.lp-ansicht .btn.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-2)}
.lp-rahmen{background:var(--surface-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:flex-start;overflow:hidden}
.lp-rahmen iframe{flex:0 0 auto}
.lp-rahmen.handy{justify-content:center}
.lp-rahmen iframe{display:block;width:100%;height:640px;border:0;background:var(--surface);transition:width .2s}
.lp-rahmen.handy{padding:12px 0}
.lp-rahmen.handy iframe{width:390px;max-width:100%;height:700px;border:1px solid var(--line);border-radius:18px}
.lp-kopierzeile{display:flex;gap:6px}
.lp-kopierzeile input{flex:1 1 auto;min-width:0;font-size:11.5px}
.lp-anleitung summary{cursor:pointer;font-weight:600;font-size:12.5px;color:var(--acc)}
.lp-anleitung p{font-size:12.5px;color:var(--ink-2);margin:8px 0 0}
.lp-kampagnen{display:grid;gap:4px;font-size:12.5px}
.lp-kampagnen div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:3px 0}
.lp-fehlt ul{margin:6px 0 0;padding-left:18px}
.lp-loeschen{text-align:right}
.lp-vorlagen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.lp-vorlage{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);cursor:pointer;font:inherit}
.lp-vorlage:hover{border-color:var(--acc-line);background:var(--acc-soft)}
.lp-vorlage b{font-size:14px}
.lp-vorlage span{font-size:12.5px;color:var(--ink-2)}
.lp-vorlage em{font-style:normal;font-size:12px;font-weight:600;color:var(--acc);margin-top:6px}
@media (max-width:1100px){
  .lp-bau{grid-template-columns:minmax(0,1fr)}
  .lp-bau-rechts{position:static}
}
@media (max-width:640px){
  .lp-zwei{grid-template-columns:minmax(0,1fr)}
  .lp-knoepfe{margin-left:0}
  .lp-rahmen iframe{height:520px}
}

/* 3.21 — Posteingang: „Mail zuordnen" (Seitenfenster) */
.pe-mail .pe-text{font-size:13.5px;line-height:1.55;color:var(--ink-2);max-height:340px;overflow:auto;overflow-wrap:anywhere}
/* 3.20 — Die Erinnerung „Wen anrufen?" schwebt über dem Inhalt, aber unter jeder aufgeklappten Liste (Glocke, „Neu",
   „Neu in der Akte", Auswahllisten). Bis 3.19 lag sie mit z-index 60 darüber und schnitt quer durch die Listen. */

/* ── Seitenleiste mit Unterpunkten (3.21) ── */
/* Unter jedem Bereich stehen seine Seiten (teile/bereiche-seitenleiste): beim Bereich, in dem man ist, aufgeklappt,
   bei den anderen hinter dem Pfeil. Wo sie stehen, wählt jeder selbst (.app[data-unterpunkte] = links, oben, beides).
   Bei „links" bleibt die Reiterleiste im HTML und ist nur auf breiten Schirmen weg; am Handy (Schublade) steht sie
   immer da — sonst müsste man für jeden Seitenwechsel erst die Schublade öffnen. Die Unterpunkte hängen an einer
   feinen Linie unter dem Symbol des Bereichs; der aktive trägt einen kurzen Strich auf dieser Linie. */
.bereichzeile{position:relative}
.bereichzeile.mitpfeil > .navitem.bereich{padding-right:36px}
.unterpunkte > summary.unterpfeil{position:absolute;top:4px;right:4px;width:28px;height:28px;display:grid;place-items:center;
  list-style:none;cursor:pointer;border-radius:6px;color:var(--ink-3)}
.unterpunkte > summary.unterpfeil::-webkit-details-marker{display:none}
.unterpunkte > summary.unterpfeil:hover{background:var(--surface-3);color:var(--ink)}
.unterpunkte > summary.unterpfeil .sym{width:12px;height:12px;transition:transform .15s ease}
.unterpunkte[open] > summary.unterpfeil .sym{transform:rotate(90deg)}
.unterliste{position:relative;margin:1px 0 7px 19px;padding-left:9px;border-left:1px solid var(--line)}
.unterzeile{position:relative}
.unterpunkt{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:var(--r-sm);font-size:13px;line-height:1.35;color:var(--ink-2)}
.unterpunkt > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unterpunkt:hover{background:var(--surface-3);color:var(--ink)}
.unterpunkt.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.unterpunkt.on::before{content:'';position:absolute;left:-10px;top:5px;bottom:5px;width:2px;border-radius:2px;background:var(--acc)}
.unterpunkt .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-3);background:var(--surface-3);
  border-radius:20px;padding:1px 6px}
.unterpunkt.on .n{background:var(--surface);color:var(--acc)}
.unterzeile.mitheft .unterpunkt{padding-right:30px}
.unterzeile .navheft{right:2px}
.unterzeile:hover .navheft{opacity:1}
.untermehr > summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;user-select:none;padding:4px 9px;
  border-radius:var(--r-sm);font-size:12px;color:var(--ink-3)}
.untermehr > summary::-webkit-details-marker{display:none}
.untermehr > summary:hover{background:var(--surface-3);color:var(--ink-2)}
.untermehr > summary .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--acc);background:var(--acc-soft);border-radius:20px;padding:1px 6px}
.untermehr .navmehrauf{display:none}
.untermehr[open] .navmehrauf{display:inline}
.untermehr[open] .navmehrzu{display:none}
/* Stehen die Unterpunkte links, trägt der Bereich nur die Farbe — die Fläche gehört der Seite, auf der man ist.
   Der Zähler am Bereich steht, solange er zugeklappt ist; aufgeklappt stehen die Zahlen an den Unterpunkten. */
.app:not([data-unterpunkte="oben"]) .bereichzeile.mitpfeil > .navitem.bereich.on{background:transparent}
.app:not([data-unterpunkte="oben"]) .bereichzeile.mitpfeil > .navitem.bereich.on:hover{background:var(--surface-3)}
.app:not([data-unterpunkte="oben"]) .bereichzeile:has(> .unterpunkte[open]) > .navitem.bereich .n{display:none}
.app[data-unterpunkte="oben"] .unterpunkte{display:none}
.app[data-unterpunkte="oben"] .bereichzeile.mitpfeil > .navitem.bereich{padding-right:10px}
@media (min-width:901px){
  .app[data-unterpunkte="links"] .bereichsleiste{display:none}
}
/* Die Wahl „links, oben, beides" — unten in der Seitenleiste und unter Mein Konto. */
.mdleiste{margin:8px 0 0}
.mdleiste > summary{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:var(--r-sm);font-size:12px;color:var(--ink-3);
  cursor:pointer;list-style:none;user-select:none}
.mdleiste > summary::-webkit-details-marker{display:none}
.mdleiste > summary:hover,.mdleiste[open] > summary{background:var(--surface-3);color:var(--ink-2)}
.mdleiste > form{margin:4px 2px 8px;padding:10px 10px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.mdwahl fieldset{border:0;margin:0;padding:0;min-width:0}
.mdwahl legend{padding:0;margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mdoption{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.mdoption input{accent-color:var(--acc);margin:0;flex:none}
.mdwahl .btn{margin-top:6px}
form[data-seitenwahl].js [data-seitenwahl-knopf]{display:none}
.mdkonto fieldset{display:flex;flex-wrap:wrap;gap:10px}
.mdkonto legend{width:100%}
.mdkonto .mdoption{flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);min-width:150px}
.mdkonto .mdoption:has(input:checked){border-color:var(--acc-line);background:var(--acc-soft);color:var(--ink)}
.mdbild{position:relative;display:block;width:64px;height:40px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface-2);overflow:hidden}
.mdbild i{position:absolute;display:block}
.mdbild i:nth-child(1){left:0;top:0;bottom:0;width:18px;background:var(--surface-3);border-right:1px solid var(--line)}
.mdbild i:nth-child(2){left:5px;top:10px;width:10px;height:16px;background:repeating-linear-gradient(to bottom,var(--acc) 0 2px,transparent 2px 5px)}
.mdbild i:nth-child(3){left:19px;right:0;top:0;height:8px;background:var(--acc-soft);border-bottom:1px solid var(--acc-line)}
.mdbild-links i:nth-child(3),.mdbild-oben i:nth-child(2){display:none}
/* Platz für den KI-Block ganz oben (liefert der Teil „KI") und für die angehefteten Ansichten der Listen. */
.kiplatz{flex:none;padding:10px 10px 2px}
.navfremd{margin-bottom:14px}
@media (max-width:900px){
  .rail .unterpunkt{padding-top:8px;padding-bottom:8px}
  .rail .unterpunkte > summary.unterpfeil{width:36px;height:36px;top:2px;right:2px}
  .rail .bereichzeile.mitpfeil > .navitem.bereich{padding-right:44px}
  .rail .untermehr > summary{padding-top:8px;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.unterpunkte > summary.unterpfeil .sym{transition:none}}

/* ── Übersicht zum Anordnen (3.21) ── */
/* Die Übersicht aus Kacheln (dashboard.blade.php, uebersicht/*). Ruhig statt Kachelwüste: keine Schatten, eine feine
   Linie; die Rangordnung tragen Größe und Gewicht der Zahlen. Jede Kachel trägt die Farbe ihres Bereichs als kurzen
   Strich vor dem Titel (--uk), dieselbe Zuordnung wie links in der Seitenleiste. Sechs Spalten: schmal = zwei,
   halb = drei, breit = alle; unter 1100 px zwei Spalten, am Handy eine. Lücken füllt das Raster von selbst (dense). */
.ukachel,.uekarte{--uk:var(--acc)}
.b-kunden{--uk:var(--cool)}
.b-vorgaenge{--uk:var(--plum)}
.b-kalender{--uk:var(--warn)}
/* Kommunikation: ein Rosé, gemischt aus zwei vorhandenen Farben — so stimmt es hell wie dunkel ohne neuen Farbwert. */
.b-kommunikation{--uk:var(--plum)}
@supports (color:color-mix(in srgb, red 50%, blue)){.b-kommunikation{--uk:color-mix(in srgb, var(--crit) 55%, var(--plum))}}
.b-finanzen{--uk:var(--good)}
.b-auswertung,.b-einstellungen{--uk:var(--ink-3)}
.uekopf{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:2px 0 20px}
.uegruss{flex:1;min-width:0}
.uedatum{margin:0 0 5px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.uegruss h1{font-size:27px;font-weight:600;letter-spacing:-.035em;line-height:1.15}
.uelage{margin:7px 0 0;font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.uelage a{color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.uelage a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.uelage a b{color:var(--ink);font-weight:600}
.uetrenn{color:var(--line-2);margin:0 3px}
.uekopf .acts{display:flex;gap:8px;align-items:center}
.uekopf .acts .btn .sym{width:15px;height:15px}
.uefeld{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;grid-auto-flow:row dense;align-items:stretch}
.ukachel{grid-column:span 3;min-width:0;position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:14px}
.ukachel.g-schmal{grid-column:span 2}
.ukachel.g-breit{grid-column:1 / -1}
.ukinnen{flex:1;min-width:0;padding:15px 18px 17px}
.ukachel.fremd > .card{margin:0;flex:1;border:0;box-shadow:none;background:transparent;border-radius:14px}
.ukachel.fremd > .card > .cardhead{padding:14px 18px 12px}
.ukopf{display:flex;align-items:baseline;gap:8px;min-width:0;margin:0 0 12px}
.ukopf h2{margin:0;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;letter-spacing:-.005em;min-width:0}
.ukopf h2::before{content:'';flex:none;width:3px;height:13px;border-radius:2px;background:var(--uk)}
.ukzusatz{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ukweiter{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.ukweiter .sym{width:11px;height:11px}
.ukweiter:hover{color:var(--acc)}
.ukzahlen{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 26px;margin:0 0 12px}
.ukzahl{display:flex;flex-direction:column;min-width:0}
.ukzahl b{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.ukzahl.gross b{font-size:34px;letter-spacing:-.045em}
.ukzahl span{margin-top:4px;font-size:12px;color:var(--ink-3)}
.ukzahl.crit b{color:var(--crit)}
.ukzahl.warn b{color:var(--warn)}
.ukzahl em{font-style:normal;font-family:var(--mono);font-size:11px;margin-left:5px}
.ukliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ukzeile{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 0;border-bottom:1px solid var(--line)}
.ukzeile:last-child{border-bottom:0;padding-bottom:0}
.ukmitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ukmitte b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ukmitte small{display:block;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ukmitte small.crit,.ukdatum.crit{color:var(--crit)}
.ukmitte a:hover b{color:var(--acc)}
.ukzeit{flex:none;width:46px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.ukdatum{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ukbetrag{flex:none;font-size:12.5px;font-weight:500}
.ukpunkte{flex:none;width:28px;text-align:right;font-size:14px;color:var(--acc)}
.uksym{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:var(--surface-3);color:var(--ink-2)}
.uksym .sym{width:14px;height:14px}
.ukhakenform{flex:none;margin:0}
.ukhaken{width:22px;height:22px;display:grid;place-items:center;padding:0;border:1.5px solid var(--line-2);border-radius:6px;background:var(--surface);
  color:transparent;cursor:pointer}
.ukhaken .sym{width:13px;height:13px}
.ukhaken:hover,.ukhaken:focus-visible{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.ukleertext{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.ukleertext a{color:var(--acc);font-weight:500}
.ukmehrtext{margin:8px 0 0;font-size:12px;color:var(--ink-3)}
.ukknoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ukknoepfe form{margin:0}
.ukfort{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:11.5px;color:var(--ink-3)}
.ukfort .meter{flex:1;max-width:220px}
.ukunter{margin:14px 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ukkennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ukkz{display:flex;flex-direction:column;min-width:0;padding:2px 18px 2px;border-left:1px solid var(--line)}
.ukkz:first-child{border-left:0;padding-left:0}
.uklabel{font-size:11.5px;color:var(--ink-3)}
.ukkz > b{margin-top:5px;font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ukkz > small{margin-top:2px;font-size:11.5px;color:var(--ink-3)}
.ukgesamt{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;font-size:12px;color:var(--ink-3)}
.ukgesamt b{font-size:13px;font-weight:500;color:var(--ink)}
.ukstufen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.ukstufen a{display:grid;grid-template-columns:minmax(80px,1.1fr) minmax(40px,2fr) 30px minmax(64px,auto);align-items:center;gap:10px;
  padding:5px 6px;margin:0 -6px;border-radius:7px;font-size:12.5px;color:var(--ink-2)}
.ukstufen a:hover{background:var(--surface-3);color:var(--ink)}
.ukstufen a.ohne{color:var(--ink-3)}
.ukstufenname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ukbalken{display:block;height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.ukbalken i{display:block;height:100%;border-radius:4px;background:var(--uk)}
.ukstufen b{text-align:right;font-size:12.5px;font-weight:500;color:var(--ink)}
.ukwert{text-align:right;font-size:11.5px;color:var(--ink-3)}
.uksaeulen{margin-top:4px}
.uktage{display:flex;align-items:flex-end;gap:5px;height:56px;margin-left:auto}
.uktage span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;width:16px;height:100%}
.uktage i{display:block;width:100%;min-height:3px;border-radius:3px 3px 1px 1px;background:var(--line-2)}
.uktage .heute i{background:var(--uk)}
.uktage em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
table.uktabelle{width:100%;min-width:0;border-collapse:collapse}
.uktabelle th{padding:0 0 6px;background:none;border-bottom:1px solid var(--line);font-size:10.5px}
.uktabelle td{padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--line)}
.uktabelle tbody tr:last-child td{border-bottom:0}
.uktabelle td.num,.uktabelle th.num{width:58px;text-align:right}
.uktabelle tbody tr:hover{background:none}
.ukvorne{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;font-size:12px;color:var(--ink-3)}
.ukvorne b{font-weight:500;color:var(--ink-2)}
.ukschnell{margin:0}
.ukschnell + .ukschnell{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ukschnellzeile{display:flex;gap:6px;margin-top:4px}
.ukschnellzeile input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px}
.ukschnellzeile input[type=date]{flex:none;width:auto}
.ukschnellzeile input:focus{outline:none;border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
.ukschnell .ukknoepfe{margin-top:8px}
.ukfehler{margin:6px 0 0;font-size:12px;color:var(--crit)}
.ukgarantie{margin-bottom:12px}
.ukgarantiekopf,.ukgarantiefuss{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.ukgarantiekopf{margin-bottom:5px}
.ukgarantiefuss{margin-top:5px;color:var(--ink-3)}
.uktabellenrahmen{margin:0 -18px -17px;border:0;border-top:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:none}
.ukachel .card.startkarte{margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.ukstart{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ukstarttext{flex:1;min-width:220px}
.ukstarttext h2{margin:0 0 6px;font-size:14px;font-weight:600}
.ukstart .ukknoepfe{margin-top:0}
.ukfremd{min-width:0}
/* Anpassen: der Katalog oben, an jeder Kachel ihr Werkzeug. Gezogen wird am Griff (auch mit dem Finger: dort kein
   Rollen der Seite) oder mit den Pfeiltasten; die Inhalte der Kacheln sind beim Anpassen nicht anklickbar. */
.uewerk{position:relative;margin:0 0 18px;padding:16px 18px;border:1px dashed var(--acc-line);border-radius:14px;background:var(--surface-2)}
.uewerkkopf{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 16px}
.uewerkkopf > div:first-child{flex:1;min-width:240px}
.uewerkkopf h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.uewerkkopf p{margin:4px 0 0;max-width:76ch;font-size:12.5px;color:var(--ink-2)}
.uewerkkopf .acts{display:flex;flex-wrap:wrap;gap:8px}
.uewerkkopf form{margin:0}
.uekatalog{margin-top:14px}
.uekatalog h3{margin:0 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.uekatalog h3 span{margin-left:4px;font-family:var(--mono)}
.uekarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.uekarte{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.uekartetext{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.uekartetext b{font-size:12.5px}
.uekartetext span{font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.uekarte form{margin:8px 0 0}
.uekarte .btn .sym{width:13px;height:13px}
.uevorschau{flex:none;width:64px;height:40px}
.uv-grund{fill:var(--surface-2);stroke:var(--line)}
.uv-farbe{fill:var(--uk)}
.uv-linie{fill:var(--line-2)}
.uv-stark{fill:var(--ink-3)}
.uv-feld{fill:var(--surface);stroke:var(--line-2)}
.uv-strich{fill:none;stroke:var(--line-2);stroke-width:2.5;stroke-linecap:round}
.uv-ring{fill:none;stroke:var(--line);stroke-width:3}
.uv-bogen{fill:none;stroke:var(--uk);stroke-width:3;stroke-linecap:round}
.uv-funke{fill:var(--uk)}
.uesprecher{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.uefeld.anpassen .ukachel{border-style:dashed;border-color:var(--line-2)}
.uefeld.anpassen .ukachel > :not(.uewerkzeug){pointer-events:none;opacity:.82}
.uefeld.anpassen .ukopf{display:none}
/* Bausteine der Module zeichnen ihren eigenen Kopf: Er bekommt denselben Strich in der Farbe des Bereichs. */
.ukachel.fremd > .card > .cardhead h3{display:flex;align-items:center;gap:8px}
.ukachel.fremd > .card > .cardhead h3::before{content:'';flex:none;width:3px;height:13px;border-radius:2px;background:var(--uk)}
.uewerkzeug{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 8px 6px 6px;border-bottom:1px dashed var(--line-2);
  border-radius:14px 14px 0 0;background:var(--surface-2)}
.uegriff{flex:none;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:none;color:var(--ink-3);
  cursor:grab;touch-action:none}
.uegriff svg{width:16px;height:16px}
.uegriff:hover,.uegriff:focus-visible{background:var(--surface-3);color:var(--ink)}
.uewztitel{flex:1;min-width:0;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uegroessen{flex:none;display:flex;margin:0;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.uegroessen button{padding:4px 7px;border:0;background:var(--surface);font-size:11px;color:var(--ink-2);cursor:pointer}
.uegroessen button + button{border-left:1px solid var(--line)}
.uegroessen button:hover{background:var(--surface-3)}
.uegroessen button.an{background:var(--acc-soft);color:var(--acc);font-weight:600}
.uepfeile,.uewegform{flex:none;display:flex;gap:2px;margin:0}
.uepfeile button,.uewegknopf{width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:var(--ink-3);cursor:pointer}
.uepfeile button svg,.uewegknopf svg{width:14px;height:14px}
.uepfeile button:hover{background:var(--surface-3);color:var(--ink)}
.uewegknopf:hover{background:var(--crit-soft);color:var(--crit)}
.ukachel.zieht{opacity:.6;outline:2px solid var(--acc);outline-offset:2px}
html.ue-zieht,html.ue-zieht *{cursor:grabbing !important;user-select:none;-webkit-user-select:none}
.uenichts .ukleertext{text-align:center;padding:24px 0}
@media (max-width:1100px){
  .uefeld{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ukachel,.ukachel.g-schmal{grid-column:span 1}
  .ukachel.g-breit{grid-column:1 / -1}
}
@media (max-width:700px){
  .uefeld{grid-template-columns:minmax(0,1fr);gap:12px}
  .ukachel,.ukachel.g-schmal,.ukachel.g-breit{grid-column:1 / -1}
  .uekopf{flex-direction:column;align-items:stretch;gap:12px}
  .uekopf .acts{align-self:flex-start}
  .uegruss h1{font-size:23px}
  .uelage{gap:2px 10px}
  .uelage .uetrenn{display:none}
  .ukinnen{padding:14px 14px 15px}
  .uktabellenrahmen{margin:0 -14px -15px}
  .ukkz{padding:10px 0;border-left:0;border-top:1px solid var(--line)}
  .ukkz:first-child{border-top:0;padding-top:2px}
  .uewerkzeug{flex-wrap:wrap}
  .uewztitel{flex-basis:calc(100% - 52px)}
  .uegroessen button{padding:7px 10px;font-size:12px}
  .uepfeile button,.uewegknopf,.uegriff{width:36px;height:36px}
  .uekarten{grid-template-columns:minmax(0,1fr)}
  .uewerkkopf .acts{width:100%}
}
@media (prefers-reduced-motion:reduce){.ukachel{transition:none}}

/* ── Die Akte neu (3.21) ── */
/*
 * Kopf mit Kennbild, Name und Stufe als Weg; darunter drei Bereiche: senkrechtes Menü | Hauptbereich | Steckbrief.
 * Die Breite des Kastens entscheidet (Containerabfrage), nicht die des Bildschirms: Dieselbe Akte steht als ganze
 * Seite neben der Seitenleiste und im Seitenfenster. Unter 760 px eine Spalte (Menü rollt waagerecht, der Steckbrief
 * klappt über den Verlauf), bis 1120 px zwei (Menü und Steckbrief links), darüber drei.
 * Farben nur aus den Variablen — hell und dunkel gehen damit von selbst.
 */
.akte2{--a2-weg:var(--line-2);--a2-weg-an:var(--acc);--a2-kante:var(--line);container-type:inline-size;container-name:akte2;min-width:0}

/* Kopf */
.akte2 > .aktenkopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"bild text knoepfe" "weg weg weg";
  gap:6px 16px;align-items:start;margin:0 0 18px;padding:2px 0 16px;border-bottom:1px solid var(--a2-kante)}
.akte2 > .aktenkopf .kennbild{grid-area:bild}
.akte2 > .aktenkopf .aktenkopf-text{grid-area:text;min-width:0}
.akte2 > .aktenkopf .akte2-knoepfe{grid-area:knoepfe}
.akte2 > .aktenkopf .stufenweg{grid-area:weg}
.akte2 > .aktenkopf h1{font-size:24px;line-height:1.2;font-weight:650;letter-spacing:-.01em;margin:2px 0 0;overflow-wrap:anywhere}
.panelinhalt .akte2 > .aktenkopf h1{font-size:21px}
.akte2 > .aktenkopf .herkunft{display:block;margin-top:3px;font-size:13px;color:var(--ink-3)}
.akte2 > .aktenkopf .herkunft.gehoertzu b{color:var(--ink-2)}
.aktenkopf-zeichen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.aktenkopf-zust{font-size:12px;color:var(--ink-3)}
.aktenkopf-zust b{color:var(--ink-2);font-weight:600}
.kennbild{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;font-size:11.5px;font-weight:650;letter-spacing:.02em;
  color:var(--acc-2);background:linear-gradient(135deg,var(--acc-soft),var(--surface-3));border:1px solid var(--acc-line)}
.kennbild.gross{width:54px;height:54px;border-radius:15px;font-size:19px;margin-top:2px}
.kennbild.klein{width:26px;height:26px;border-radius:8px;font-size:10.5px}

/* Schnellknöpfe und „…" */
.akte2-knoepfe{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;max-width:560px}
.akte2-knoepfe > .btn .sym,.akte2-knoepfe .akte2-knopf-form .btn .sym{width:15px;height:15px}
.akte2-knopf-form{display:inline-flex;margin:0}
.akte2-knopf-html{display:inline-flex}
.akte2-knoepfe [data-akte2-knopf="anruf"].btn{border-color:var(--good);color:var(--good);background:var(--surface)}
.akte2-knoepfe [data-akte2-knopf="anruf"].btn:hover{background:var(--good-soft)}
.akte2-mehr{position:relative;flex:none}
.akte2-mehr > summary{list-style:none;cursor:pointer;user-select:none;padding:6px 8px}
.akte2-mehr > summary::-webkit-details-marker{display:none}
.akte2-mehr[open] > summary{box-shadow:0 0 0 3px var(--acc-soft)}
.akte2-mehr-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:36;min-width:230px;max-width:min(300px,calc(100vw - 32px));
  max-height:min(70vh,480px);overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:1px}
.akte2-mehr-liste hr{border:0;border-top:1px solid var(--line);margin:4px 2px;width:auto}
.akte2-mehr-liste form{margin:0}
.akte2-mehr-zeile{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;border-radius:var(--r-sm);background:none;
  font-size:13px;color:var(--ink-2);text-align:left;cursor:pointer;white-space:nowrap}
.akte2-mehr-zeile span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.akte2-mehr-zeile .sym{width:15px;height:15px;flex:none}
.akte2-mehr-zeile:hover,.akte2-mehr-zeile:focus-visible{background:var(--surface-3);color:var(--ink)}
.akte2-mehr-liste .gefahr .akte2-mehr-zeile{color:var(--crit)}
.akte2-mehr-liste .gefahr .akte2-mehr-zeile:hover{background:var(--crit-soft)}

/* Die Stufe als Weg: Haltestellen auf einer Linie, die aktuelle als Ring. Ein Klick setzt die Stufe. */
.stufenweg{display:flex;align-items:flex-start;gap:14px;margin-top:10px;min-width:0}
.stufenweg ol{list-style:none;margin:0;padding:0;display:flex;flex:1;min-width:0}
.stufenweg li{position:relative;flex:1 1 0;min-width:0;display:flex;justify-content:center}
/* Die Linie zwischen zwei Stationen: je Station eine Hälfte links und rechts — so schließt sie auch, wenn die
   Stationen verschieden breit sind (am Handy ist die aktuelle breiter). */
.stufenweg ol:not(.stufenweg-raus) li + li::before{content:"";position:absolute;top:8px;left:0;right:calc(50% + 9px);height:2px;background:var(--a2-weg)}
.stufenweg ol:not(.stufenweg-raus) li:not(:last-child)::after{content:"";position:absolute;top:8px;left:calc(50% + 9px);right:0;height:2px;background:var(--a2-weg)}
.stufenweg li.vorbei::before,.stufenweg li.jetzt::before,.stufenweg ol:not(.stufenweg-raus) li.vorbei::after{background:var(--a2-weg-an) !important}
.stufenweg form{display:contents}
.stufenweg button,.stufenweg span[data-stufe]{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;min-width:0;padding:0 4px;
  border:0;background:none;font:inherit;font-size:11.5px;color:var(--ink-3);cursor:pointer;text-align:center}
.stufenweg span[data-stufe]{cursor:default}
.stufenweg button::before,.stufenweg span[data-stufe]::before{content:"";width:12px;height:12px;margin-top:3px;border-radius:50%;flex:none;
  background:var(--surface);border:2px solid var(--a2-weg);box-sizing:border-box;transition:transform .15s ease,border-color .15s ease}
.stufenweg li.vorbei button::before,.stufenweg li.vorbei span[data-stufe]::before{background:var(--a2-weg-an);border-color:var(--a2-weg-an)}
.stufenweg li.jetzt span[data-stufe]{color:var(--ink);font-weight:650}
.stufenweg li.jetzt span[data-stufe]::before{width:18px;height:18px;margin-top:0;background:var(--acc);border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.stufenweg button:hover{color:var(--acc)}
.stufenweg button:hover::before{border-color:var(--acc);transform:scale(1.15)}
.stufenweg button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.stufenweg ol:not(.stufenweg-raus) button,.stufenweg ol:not(.stufenweg-raus) span[data-stufe]{width:100%}
.stufenweg-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stufenweg li.jetzt .stufenweg-name{overflow:visible}
/* Viele Stufen: nur die aktuelle mit Namen (der Rest beim Darüberfahren), damit nichts ineinander läuft. */
.stufenweg.viele ol:not(.stufenweg-raus) li:not(.jetzt) .stufenweg-name{visibility:hidden;height:0}
.stufenweg.viele ol:not(.stufenweg-raus) li:not(.jetzt) button:hover .stufenweg-name,
.stufenweg.viele ol:not(.stufenweg-raus) li:not(.jetzt) button:focus-visible .stufenweg-name{visibility:visible;height:auto;position:absolute;top:22px;left:50%;
  transform:translateX(-50%);max-width:none;padding:2px 7px;border-radius:6px;background:var(--surface);box-shadow:var(--shadow);color:var(--acc);z-index:2}
.stufenweg.viele li.jetzt .stufenweg-name{position:relative;z-index:1;padding:0 6px;background:var(--bg)}
.stufenweg.viele ol:not(.stufenweg-raus) li.naechste .stufenweg-name{visibility:visible;height:auto;max-width:none;overflow:visible}
@container akte2 (max-width:759px){
  .stufenweg.viele li{min-width:40px}
  .stufenweg.viele li.jetzt,.stufenweg.viele li.naechste{min-width:110px}
}
.stufenweg button[disabled]{opacity:.6}
.stufenweg-raus{flex:0 0 auto !important;gap:6px;padding-left:14px !important;border-left:1px dashed var(--line-2)}
.stufenweg-raus li{flex:0 0 auto}
.stufenweg-raus button::before,.stufenweg-raus span[data-stufe]::before{width:10px;height:10px;margin-top:4px;border-width:1.5px;border-color:var(--ink-3)}
.stufenweg-raus button:hover::before{border-color:var(--crit)}
.stufenweg-raus button:hover{color:var(--crit)}
.stufenweg-raus li.jetzt span[data-stufe]{color:var(--crit)}
.stufenweg-raus li.jetzt span[data-stufe]::before{background:var(--crit);border-color:var(--crit);box-shadow:0 0 0 4px var(--crit-soft)}
.stufenweg.nurlesen button{cursor:default}

/* Die drei Bereiche */
/* Schmal: eine Spalte (Flex, damit verborgene Teile keine Lücken lassen); breiter: das Raster. */
.akte2-rumpf{display:flex;flex-direction:column;gap:14px;min-width:0}
.akte2 .reiterleiste{order:1}
.akte2-steckknopf{order:2}
.akte2-links{order:3}
.akte2-rechts{order:4}
.akte2-haupt{order:5}
.akte2-steck{display:contents}
.akte2-links{grid-area:links;min-width:0}
.akte2-rechts{grid-area:rechts;min-width:0}
.akte2-haupt{grid-area:haupt;min-width:0}
.akte2-steckknopf{grid-area:knopf}
.akte2 .reiterleiste{grid-area:menue}
.akte2-spalte{display:flex;flex-direction:column;gap:12px}
.akte2-spalte:empty{display:none}
@container akte2 (min-width:760px){
  .akte2-rumpf{display:grid;align-items:start;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:16px 22px;
    grid-template-areas:"menue haupt" "links haupt" "rechts haupt"}
  .akte2-steckknopf{display:none !important}
}
@container akte2 (min-width:1120px){
  .akte2-rumpf{grid-template-columns:200px minmax(0,1fr) 320px;grid-template-rows:auto 1fr;gap:16px 24px;
    grid-template-areas:"menue haupt rechts" "links haupt rechts"}
}
/* Im Anpassen braucht die linke Spalte Platz für Griff und Pfeile neben den Namen */
@container akte2 (min-width:760px){ .akte2.anpassen .akte2-rumpf{grid-template-columns:260px minmax(0,1fr)} }
@container akte2 (min-width:1120px){ .akte2.anpassen .akte2-rumpf{grid-template-columns:250px minmax(0,1fr) 320px} }

/* Das senkrechte Menü (die Reiterleiste von bisher, aufgestellt) */
.akte2 .reiterleiste{position:static;margin:0;padding:0;background:none;box-shadow:none;min-width:0}
.panelinhalt .akte2 .reiterleiste{position:static;margin:0;padding:0;top:auto;background:none;box-shadow:none}
.akte2 .tabs.akte2-menue{display:flex;flex-direction:column;gap:1px;border:0;margin:0;overflow:visible}
.akte2 .akte2-menue [role=tab]{display:flex;align-items:center;gap:9px;width:100%;margin:0;padding:7px 10px;border:0;border-radius:var(--r-sm);text-decoration:none;cursor:pointer;
  background:none;color:var(--ink-2);font-size:13px;text-align:left;white-space:nowrap;position:relative}
.akte2 .akte2-menue [role=tab] .n{order:2;margin-left:auto;font-size:11px;color:var(--ink-3);padding:0 6px;border-radius:10px;background:var(--surface-3)}
.akte2 .akte2-menue .akte2-menue-z{order:-1;display:inline-flex;color:var(--ink-3)}
.akte2 .akte2-menue .akte2-menue-z .sym{width:16px;height:16px}
.akte2 .akte2-menue [role=tab]:hover{background:var(--surface-3);color:var(--ink)}
.akte2 .akte2-menue [role=tab][aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.akte2 .akte2-menue [role=tab][aria-selected="true"]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
.akte2 .akte2-menue [role=tab][aria-selected="true"] .akte2-menue-z{color:var(--acc)}
.akte2 .akte2-menue [role=tab][aria-selected="true"] .n{background:var(--acc-soft);color:var(--acc-2)}
.akte2-menue-mehr{margin-top:4px;border-top:1px solid var(--line);padding-top:4px}
.akte2-menue-mehr > summary{list-style:none;cursor:pointer;padding:6px 10px;font-size:12px;color:var(--ink-3);border-radius:var(--r-sm);display:flex;align-items:center;gap:8px}
.akte2-menue-mehr > summary::-webkit-details-marker{display:none}
.akte2-menue-mehr > summary::after{content:"";width:6px;height:6px;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.akte2-menue-mehr[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.akte2-menue-mehr > summary:hover{background:var(--surface-3)}
.akte2-menue-mehr > summary .n{font-family:var(--mono);font-size:11px}
.akte2-anpassen-knopf{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px;padding:6px 10px;border:0;border-radius:var(--r-sm);background:none;
  font-size:12px;color:var(--ink-3);cursor:pointer;text-align:left}
.akte2-anpassen-knopf .sym{width:14px;height:14px}
.akte2-anpassen-knopf:hover{background:var(--surface-3);color:var(--acc)}
.akte2.anpassen .akte2-anpassen-knopf{display:none}
@container akte2 (max-width:759px){
  .akte2 .tabs.akte2-menue{flex-direction:row;overflow-x:auto;gap:4px;padding:2px 2px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .akte2 .akte2-menue [role=tab]{width:auto;flex:none;padding:7px 11px;border:1px solid var(--line);background:var(--surface)}
  .akte2 .akte2-menue [role=tab][aria-selected="true"]{border-color:var(--acc);box-shadow:none}
  .akte2 .akte2-menue [role=tab][aria-selected="true"]::before{display:none}
  .akte2 .akte2-menue [role=tab] .n{margin-left:2px}
  .akte2-menue-mehr{display:flex;align-items:center;gap:4px;margin:0;padding:0;border:0}
  .akte2-menue-mehr > summary{white-space:nowrap;border:1px dashed var(--line-2);padding:7px 11px}
  .akte2-menue-mehr > summary::after{display:none}
  .akte2-anpassen-knopf{display:none !important}
}

/* Karten des Steckbriefs: ruhig, ohne Schatten; der Kopf ist die Griffleiste */
.akte2-karte{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0}
.akte2-karte > summary{list-style:none;display:flex;align-items:center;gap:8px;padding:9px 10px 9px 12px;cursor:pointer;user-select:none;border-radius:var(--r)}
.akte2-karte > summary::-webkit-details-marker{display:none}
.akte2-karte > summary::before{content:"";width:6px;height:6px;flex:none;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .15s ease;margin-right:2px}
.akte2-karte[open] > summary::before{transform:rotate(45deg)}
.akte2-karte > summary:hover{background:var(--surface-2)}
.akte2-karte-titel{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akte2-karte-zahl{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:0 6px;border-radius:10px;background:var(--surface-3)}
.akte2-karte-acts{margin-left:auto;display:flex;align-items:center;gap:4px}
.akte2-plus{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-sm);color:var(--ink-3)}
.akte2-plus:hover,.akte2-plus:focus-visible{background:var(--acc-soft);color:var(--acc)}
.akte2-plus .sym{width:15px;height:15px;opacity:1}
.akte2-karte-rumpf{padding:2px 12px 12px;font-size:13px;min-width:0}
.akte2-leer{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
.akte2-alle{display:inline-block;margin-top:8px;font-size:12px;color:var(--acc)}
.akte2-alle:hover{text-decoration:underline}
.akte2-karte .auskunft{margin:0;padding:0;border:0;background:none}
.akte2-karte .auskunft-kopf .auskunft-titel{display:none}
.akte2-karte .auskunft-zeilen{grid-template-columns:minmax(0,1fr);gap:2px;margin-top:4px}
.akte2-karte .auskunft-zeile dt{padding-top:6px;font-size:11.5px}
.akte2-karte .zutun{border:0;padding:0;margin:0;background:none}
.akte2-karte .zutun .kopf{display:none}
.akte2-karte .zutun .posten{padding:5px 0;border-top:1px solid var(--line)}
.akte2-karte .zutun .posten:first-of-type{border-top:0}
.akte2-karte .kv{grid-template-columns:minmax(0,110px) minmax(0,1fr);font-size:12.5px}
.akte2-karte .list .li{padding-left:0;padding-right:0}

/* „Nachfassen in …" unten in der Karte Aufgaben */
.akte2-nachfassen{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.akte2-nachfassen form{margin:0;display:inline-flex}
.akte2-nachfassen-wort{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.akte2-chip{padding:3px 9px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);font-size:12px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.akte2-chip:hover,.akte2-chip:focus-visible{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}

.strom-mehr{margin:14px 0 4px;text-align:center}

/* Liste in einer Karte */
.akte2-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.akte2-liste li{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--line);min-width:0}
.akte2-liste li:first-child{border-top:0}
.akte2-liste-text{flex:1;min-width:0}
.akte2-liste-text b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akte2-liste-text a:hover b{color:var(--acc)}
.akte2-liste-text small{display:block;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akte2-liste-rechts{font-size:12px;color:var(--ink-2);white-space:nowrap}
.akte2-listsuche{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.akte2-listsuche input{border:0;background:none;padding:2px 0;font-size:12.5px;width:100%;min-width:0;outline:none}
.akte2-listsuche .sym{width:14px;height:14px}
.akte2-tabelle + .akte2-tabelle{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.akte2-tabelle-kopf{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.akte2-tabelle-kopf h3{font-size:13px;margin:0}
.akte2-tabelle-kopf .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* „Über": Wert lesen, Klick ändert */
.ueber{margin:0;display:flex;flex-direction:column}
.ueber-zeile{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:10px;padding:5px 0;border-top:1px solid var(--line);align-items:baseline}
.ueber-zeile:first-child{border-top:0}
.ueber-zeile dt{font-size:12px;line-height:1.35;color:var(--ink-3);min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.ueber-zeile dd{margin:0;display:flex;align-items:flex-start;gap:4px;min-width:0;font-size:13px}
.ueber-wert{flex:1;min-width:0;overflow-wrap:anywhere;border-radius:5px}
.ueber-wert.lang{white-space:pre-line}
.ueber-wert a{color:var(--ink)}
.ueber-wert a:hover{color:var(--acc);text-decoration:underline}
.ueber-leer{color:var(--ink-3);font-family:var(--ui)}
.ueber.an .ueber-zeile[data-feld] .ueber-wert{cursor:text}
.ueber.an .ueber-zeile[data-feld] .ueber-wert:hover{background:var(--surface-3);box-shadow:0 0 0 3px var(--surface-3)}
.ueber.an .ueber-zeile[data-feld] .ueber-leer{color:var(--acc)}
.ueber-stift{display:grid;place-items:center;width:24px;height:22px;flex:none;border:0;border-radius:5px;background:none;color:var(--ink-3);cursor:pointer;opacity:0}
.ueber-zeile:hover .ueber-stift,.ueber-stift:focus-visible{opacity:1}
.ueber-stift:hover{background:var(--surface-3);color:var(--acc)}
.ueber-stift .sym{width:14px;height:14px}
.ueber-form{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ueber-form input,.ueber-form textarea{width:100%;min-width:0;padding:5px 8px;border:1px solid var(--acc);border-radius:var(--r-sm);background:var(--surface);font-size:13px;
  box-shadow:0 0 0 3px var(--acc-soft);outline:none}
.ueber-form textarea{min-height:90px;resize:vertical}
.ueber-form .ueber-acts{display:flex;gap:6px;align-items:center}
.ueber-form .ueber-fehler{font-size:11.5px;color:var(--crit)}
.ueber-gespeichert{animation:a2Gespeichert 1.2s ease-out}
@keyframes a2Gespeichert{from{background:var(--good-soft)}to{background:transparent}}

/* Im Hauptbereich ist ein Blatt so breit wie eine Spalte: Kartenpaare von früher (.grid2) stehen untereinander. */
.akte2-haupt .grid2{grid-template-columns:minmax(0,1fr)}
.akte2-haupt .reiterblatt > .card:first-child{margin-top:0}

/* Der Verlauf als Strom: eine Tageslinie, die Einträge daran wie Perlen */
.strom{min-width:0}
.strom-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px}
.strom-filter{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.strom-filter button{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--line);border-radius:20px;background:var(--surface);
  font-size:12px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.strom-filter button .n{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.strom-filter button:hover{border-color:var(--line-2);color:var(--ink)}
.strom-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.strom-filter button[aria-pressed="true"] .n{color:var(--bg);opacity:.75}
.strom-suche{display:flex;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;border:1px solid var(--line);border-radius:20px;background:var(--surface);min-width:0;flex:0 1 240px}
.strom-suche input{border:0;background:none;padding:2px 0;font-size:12.5px;width:100%;min-width:0;outline:none}
.strom-suche .sym{width:14px;height:14px}
.strom-suche:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
/* Notiz schreiben, oben im Verlauf */
.strom-notiz{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;margin:0 0 14px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface)}
.strom-notiz:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.strom-notiz-zeichen{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--warn-soft);color:var(--warn)}
.strom-notiz-zeichen .sym{width:14px;height:14px;opacity:1}
.strom-notiz textarea{width:100%;min-width:0;min-height:28px;padding:4px 2px;border:0;background:none;resize:none;font-size:13px;line-height:1.45;outline:none}
.strom-notiz:focus-within textarea{min-height:76px;resize:vertical}
.strom-notiz-acts{grid-column:2;display:none;align-items:center;justify-content:flex-end;gap:10px}
.strom-notiz:focus-within .strom-notiz-acts,.strom-notiz:has(textarea:not(:placeholder-shown)) .strom-notiz-acts{display:flex}
.strom-notiz-tipp{font-size:11.5px;color:var(--ink-3)}
@container akte2 (max-width:759px){.strom-notiz-tipp{display:none}}
.strom-geplant{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 16px;padding:9px 12px;border:1px dashed var(--acc-line);border-radius:var(--r);font-size:12.5px;background:var(--surface-2)}
.strom-geplant-titel{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--acc)}
.strom-geplant a,.strom-geplant > span{color:var(--ink-2)}
.strom-geplant a:hover{color:var(--acc)}
.strom-geplant .mono{font-size:11.5px;color:var(--ink-3)}
.strom-tag{margin:0 0 6px}
.strom-tagtitel{position:sticky;top:0;z-index:1;margin:0;padding:6px 0 8px;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  background:linear-gradient(var(--bg) 70%,transparent)}
.strom-liste{list-style:none;margin:0 0 8px;padding:0;position:relative}
.strom-liste::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--line)}
.strom-eintrag{position:relative;display:flex;gap:12px;padding:0 0 14px;min-width:0}
.strom-punkt{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-3)}
.strom-punkt .sym{width:15px;height:15px;opacity:1}
.strom-eintrag.ton-cool .strom-punkt{color:var(--cool);background:var(--cool-soft);border-color:transparent}
.strom-eintrag.ton-warn .strom-punkt{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.strom-eintrag.ton-acc .strom-punkt{color:var(--acc);background:var(--acc-soft);border-color:transparent}
.strom-eintrag.ton-good .strom-punkt{color:var(--good);background:var(--good-soft);border-color:transparent}
.strom-eintrag.ton-crit .strom-punkt{color:var(--crit);background:var(--crit-soft);border-color:transparent}
.strom-eintrag.ton-plum .strom-punkt{color:var(--plum);background:var(--plum-soft);border-color:transparent}
.strom-rumpf{flex:1;min-width:0;padding:6px 12px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.strom-eintrag.ton-neutral .strom-rumpf{background:none;border-color:transparent;padding-top:7px;padding-bottom:0}
.strom-eintrag.ton-neutral .strom-titel{font-weight:500;color:var(--ink-2)}
.strom-zeile{display:flex;align-items:baseline;gap:10px;min-width:0}
.strom-titel{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
a.strom-titel:hover{color:var(--acc);text-decoration:underline}
.strom-wann{flex:none;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.strom-wer{font-family:var(--ui)}
.strom-zeilen{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 12px;margin:6px 0 2px;font-size:12.5px}
.strom-zeilen > div{display:contents}
.strom-zeilen dt{color:var(--ink-3)}
.strom-zeilen dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.strom-text{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
details.strom-text > summary{cursor:pointer;list-style:none;white-space:normal}
details.strom-text > summary::-webkit-details-marker{display:none}
details.strom-text > summary::after{content:" mehr";color:var(--acc);font-size:12px}
details.strom-text[open] > summary{display:none}
details.strom-text > p{margin:0;white-space:pre-wrap}
/* 3.44 — Grundform des aufklappbaren Textes (die Akte gestaltet ihn in d-aktd.css) */
.strom-klapp > summary{cursor:pointer;display:flex;gap:8px;min-width:0;font-size:12.5px}
.strom-kurz-wer{flex:none;font-weight:500}
.strom-kurz-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strom-kurz-zu{display:none}
.strom-klapp[open] > summary .strom-kurz-text{display:none}
.strom-voll{margin-top:6px}
.strom-voll.begrenzt{max-height:260px;overflow:auto}
.strom-ganz-wahl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.strom-ganz-wahl:checked + .strom-voll{max-height:none}
.strom-ganz{display:inline-block;margin-top:6px;font-size:12px;color:var(--acc);cursor:pointer}
.strom-ganz .zu,.strom-ganz-wahl:checked ~ .strom-ganz .auf{display:none}
.strom-ganz-wahl:checked ~ .strom-ganz .zu{display:inline}
.strom-kurz-stand{margin-top:4px}
.strom-leer{padding:28px 18px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--ink-3);font-size:12.5px}
.strom-leer b{display:block;color:var(--ink-2);font-size:13.5px;margin-bottom:4px}
.strom-leer p{margin:0}
.strom-nichts{padding:18px;text-align:center;color:var(--ink-3);font-size:12.5px}
.strom-eintrag.neu{animation:a2Neu .9s ease-out}
@keyframes a2Neu{from{transform:translateY(-4px);opacity:0}to{transform:none;opacity:1}}

/* Steckbrief am Handy: aufklappbar über dem Verlauf */
.akte2-steckknopf{display:none;align-items:center;justify-content:center;gap:8px;width:100%;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.akte2-steckknopf .sym{width:15px;height:15px}
.akte2-steckknopf[aria-expanded="true"]{border-color:var(--acc);color:var(--acc)}
@container akte2 (max-width:759px){
  .akte2-rumpf.js .akte2-steckknopf:not([hidden]){display:flex}
  .akte2-rumpf.js.steck-zu .akte2-spalte{display:none}
}

/* Schmal: der Kopf stapelt sich */
@container akte2 (max-width:759px){
  .akte2 > .aktenkopf{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"bild text" "knoepfe knoepfe" "weg weg";gap:10px 12px}
  .akte2 > .aktenkopf .akte2-knoepfe{justify-content:flex-start;max-width:none}
  /* Am Handy: die geläufigen Knöpfe nur als Zeichen (der Name steht im Hinweis), Anrufen und „Neu" mit Wort. */
  .akte2-knoepfe > .btn:is([data-akte2-knopf="notiz"],[data-akte2-knopf="aufgabe"],[data-akte2-knopf="termin"],[data-akte2-knopf="email"],[data-akte2-knopf="sms"]) span{display:none}
  .akte2-knoepfe > .btn:is([data-akte2-knopf="notiz"],[data-akte2-knopf="aufgabe"],[data-akte2-knopf="termin"],[data-akte2-knopf="email"],[data-akte2-knopf="sms"]){padding:7px 10px}
  .akte2 > .aktenkopf h1{font-size:20px}
  .kennbild.gross{width:44px;height:44px;border-radius:12px;font-size:16px}
  .stufenweg{flex-direction:column;gap:8px}
  /* Nur der Weg rollt seitwärts — der Ausstieg bleibt darunter stehen. */
  .stufenweg > ol:not(.stufenweg-raus){flex:none;align-self:stretch;width:100%;min-width:0;overflow-x:auto;padding:4px 0 2px}
  .stufenweg li{min-width:78px}
  .stufenweg li.jetzt{min-width:124px}
  .stufenweg-raus{padding-left:0 !important;border-left:0;flex-wrap:wrap}
  .strom-suche{flex:1 1 100%;margin-left:0}
  .strom-zeile{flex-wrap:wrap;gap:2px 10px}
}

/* „Ansicht anpassen" */
.akte2-anpassen{margin:0 0 16px;padding:12px 14px;border:1px solid var(--acc-line);border-radius:var(--r);background:var(--acc-soft);display:flex;flex-direction:column;gap:10px}
.akte2-anpassen-kopf{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px;color:var(--ink-2)}
.akte2-anpassen-kopf b{font-size:13.5px;color:var(--ink)}
.akte2-anpassen-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.akte2-anpassen-wort{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.akte2-knopfwahl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.akte2-knopfwahl li{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 9px;border:1px solid var(--line);border-radius:20px;background:var(--surface);font-size:12.5px}
.akte2-knopfwahl label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.akte2-knopfwahl input{margin:0}
.akte2-anpassen-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.akte2-anpassen-acts form{margin:0}
.akte2-anpassen-meldung{font-size:12.5px;color:var(--ink-2)}
.akte2-pfeil{display:inline-grid;place-items:center;width:24px;height:24px;border:0;border-radius:6px;background:none;color:var(--ink-3);cursor:pointer;padding:0}
.akte2-pfeil:hover,.akte2-pfeil:focus-visible{background:var(--surface-3);color:var(--ink)}
.akte2-pfeil .sym{width:14px;height:14px;opacity:1}
.akte2-pfeil[aria-pressed="true"]{color:var(--acc);background:var(--surface)}
.akte2-steuer{display:none}
.akte2.anpassen .akte2-steuer{display:inline-flex;align-items:center;gap:1px}
.akte2-griff{display:inline-grid;place-items:center;width:22px;height:26px;padding:0;border:0;background:none;border-radius:6px;color:var(--ink-3);cursor:grab;touch-action:none;flex:none}
.akte2-griff:hover,.akte2-griff:focus-visible{background:var(--surface-3);color:var(--ink);outline:none}
.akte2-griff:focus-visible{box-shadow:0 0 0 2px var(--acc)}
.akte2-griff .sym{width:14px;height:14px;opacity:1}
.akte2.anpassen .akte2-karte{border-style:dashed;border-color:var(--acc-line)}
.akte2.anpassen .akte2-karte > summary{cursor:default}
.akte2.anpassen .akte2-karte .akte2-plus,.akte2.anpassen .akte2-karte .akte2-karte-zahl,.akte2.anpassen .akte2-karte-acts > :not(.akte2-steuer){display:none}
.akte2.anpassen .akte2-karte > summary::before{display:none}
.akte2.anpassen .akte2-karte[data-akte2-aus]{opacity:.5}
.akte2.anpassen .akte2-karte[data-akte2-aus] .akte2-karte-titel{text-decoration:line-through}
/* In schmalen Spalten rutschen die Steuerknöpfe unter den Titel, statt ihn abzuschneiden */
.akte2.anpassen .akte2-karte > summary{flex-wrap:wrap;row-gap:4px}
.akte2.anpassen .akte2-karte-titel{flex:1 1 auto;min-width:min(7.5em,100%)}
.akte2.anpassen .akte2-spalte{min-height:56px;padding:6px;margin:-6px;border-radius:calc(var(--r) + 4px);outline:2px dashed var(--line);outline-offset:-2px}
.akte2.anpassen .akte2-spalte:empty{display:flex}
.akte2.anpassen .akte2-spalte:empty::before{content:"Karten hierher ziehen";margin:auto;font-size:12px;color:var(--ink-3)}
.akte2-menue-zeile{display:flex;align-items:center;gap:2px;min-width:0;border-radius:var(--r-sm)}
.akte2-menue-zeile > [role=tab]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.akte2-menue-zeile .akte2-steuer{flex:none}
.akte2.anpassen .akte2-menue [role=tab]{padding-left:4px;gap:4px}
.akte2.anpassen .akte2-menue [role=tab] .n,.akte2.anpassen .akte2-menue .akte2-menue-z{display:none}
.akte2.anpassen .akte2-menue [role=tab][data-akte2-mehr-an]{opacity:.55}
.akte2.anpassen .akte2-menue-mehr > summary{display:none}
.akte2 .akte2-zieht{opacity:.4}
.akte2 .akte2-ziel-ueber{box-shadow:0 -3px 0 var(--acc)}
.akte2 .akte2-ziel-unter{box-shadow:0 3px 0 var(--acc)}
.akte2-geist{position:fixed;z-index:80;pointer-events:none;padding:8px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--acc);
  box-shadow:var(--shadow-lg);font-size:12.5px;font-weight:600;color:var(--ink);max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akte2-bewegt{animation:a2Bewegt .45s ease-out}
@keyframes a2Bewegt{from{box-shadow:0 0 0 3px var(--acc-line)}to{box-shadow:0 0 0 3px transparent}}

/* Das Seitenfenster für Akten: breiter, mit Kopf zum Blättern */
#panel:has(.akte2){--panelbreite:min(1200px,94vw)}
/* Läuft ein Gespräch, bleibt die Anrufbox neben dem Fenster frei (wie beim schmalen Fenster, 138) */
@media (min-width:901px){
  html.panel-an:has(.callbox) #panel:has(.akte2){--panelbreite:min(1200px,calc(100% - 376px))}
  html.panel-an:has(#panel .akte2) .callbox{right:calc(min(1200px,100vw - 376px) + 18px)}
}
.panelnav{display:inline-flex;align-items:center;gap:2px}
.panelnav a,.panelnav span{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2)}
.panelnav a:hover{background:var(--surface-3);color:var(--ink)}
.panelnav span{opacity:.35}
.panelnav .sym{width:15px;height:15px;opacity:1}
.panelnav-zahl{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin:0 4px;white-space:nowrap}
.panelseite{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-2);background:var(--surface)}
.panelseite:hover{background:var(--surface-3);color:var(--ink)}
.panelseite .sym{width:14px;height:14px}
.panelinhalt .akte2{padding-bottom:8px}
@media (prefers-reduced-motion:reduce){
  .strom-eintrag.neu,.akte2-bewegt,.ueber-gespeichert{animation:none}
  .stufenweg button::before{transition:none}
}
@media (max-width:640px){
  .panelseite span{display:none}
}

/* ── Felder (3.21) ── */
/* „+ Feld", Fenster „Feld hinzufügen", Karte „Felder" mit Werten zum Anklicken, Eingaben der neuen Feldarten,
   Farben der Auswahlwerte und der Reiter-Baukasten. Neue Farben nur als Variablen (hell und dunkel). */
:root{--ff-stern:var(--warn);--ff-stern-aus:var(--line-2);--ff-schleier:color-mix(in srgb,var(--ink) 42%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ff-schleier:color-mix(in srgb,var(--bg) 72%,transparent)}}
:root[data-theme="dark"]{--ff-schleier:color-mix(in srgb,var(--bg) 72%,transparent)}

/* Farben der Auswahlwerte (Namen aus App\Support\Feldvorlagen::FARBEN) */
.chip.fc-grau,select.fc-grau{background:var(--surface-3);color:var(--ink-2)}
.chip.fc-blau,select.fc-blau{background:var(--cool-soft);color:var(--cool)}
.chip.fc-tuerkis,select.fc-tuerkis{background:var(--acc-soft);color:var(--acc)}
.chip.fc-gruen,select.fc-gruen{background:var(--good-soft);color:var(--good)}
.chip.fc-gelb,select.fc-gelb{background:var(--warn-soft);color:var(--warn)}
.chip.fc-rot,select.fc-rot{background:var(--crit-soft);color:var(--crit)}
.chip.fc-lila,select.fc-lila{background:var(--plum-soft);color:var(--plum)}

/* „+ Feld" */
.fn-knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:26px;height:26px;flex:none;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--acc);cursor:pointer;transition:background .12s,border-color .12s}
.fn-knopf svg{width:15px;height:15px}
.fn-knopf:hover,.fn-knopf:focus-visible{background:var(--acc-soft);border-color:var(--acc-line)}
.fn-knopf.mit-text{width:auto;height:auto;padding:5px 11px 5px 8px;border-radius:20px;font-size:12.5px;font-weight:600}
.fn-knopf.btn{border-radius:var(--r-sm);padding:6px 11px 6px 8px;color:var(--ink);font-weight:500}
.fn-knopf.btn svg{color:var(--acc)}
.cardhead .fn-knopf{margin-left:8px}
.ff-anlegen-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
/* Ein Feld als Zeile unter Anpassen (bearbeiten im Fenster) */
.ff-zeile{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line)}
.ff-zeile b{font-size:13px}
.ff-zeile-platz{flex:1 1 auto}
.ff-zeile-weg{display:inline}
.ff-zeile .btn.danger{color:var(--ink-3)}
.ff-zeile .btn.danger:hover,.ff-zeile .btn.danger:focus-visible{color:var(--crit);background:var(--crit-soft)}

/* ── Das Fenster als Dialog ─────────────────────────────────────────────────────────────────────── */
dialog.ff-dialog{padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);
  width:min(960px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 40px));box-shadow:var(--shadow-lg);overflow:hidden}
dialog.ff-dialog::backdrop{background:var(--ff-schleier);backdrop-filter:blur(2px)}
dialog.ff-dialog[open]{display:flex;flex-direction:column;animation:ff-auf .16s ease-out}
@keyframes ff-auf{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.ff-laden{padding:60px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.ff-fenster{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.ff-fenster.als-seite{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-width:1000px}
.ff-fkopf{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.ff-fkopf > div{flex:1 1 auto;min-width:0}
.ff-fkopf h2{margin:0;font-size:18px;letter-spacing:-.015em;line-height:1.25}
.ff-fkopf .ff-fuer{color:var(--ink-3);font-weight:500}
.ff-fkopf p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}
.ff-fkopf p.ff-ok{color:var(--good);background:var(--good-soft);display:inline-block;padding:3px 9px;border-radius:12px;margin-top:6px;font-weight:600}
.ff-zu{border:0;background:transparent;color:var(--ink-3);font-size:24px;line-height:1;width:32px;height:32px;border-radius:8px;cursor:pointer;flex:none}
.ff-zu:hover{background:var(--surface-3);color:var(--ink)}
.ff-rumpf{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:0;flex:1 1 auto}
.ff-rumpf.ohne-vorlagen{grid-template-columns:minmax(0,1fr)}
.ff-fenster.im-dialog .ff-rumpf{overflow:hidden}
.ff-vorlagen{background:var(--surface-2);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.ff-tabs{display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--line)}
.ff-tabs button{border:0;background:transparent;padding:7px 10px 9px;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center}
.ff-tabs button[aria-selected="true"]{color:var(--acc);border-bottom-color:var(--acc)}
.ff-zahl{background:var(--surface-3);color:var(--ink-2);border-radius:10px;padding:0 6px;font-size:11px}
.ff-blatt{padding:10px 10px 14px;overflow:auto;min-height:0;flex:1 1 auto}
.ff-fenster.als-seite .ff-blatt{max-height:640px}
.ff-suche{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:13px;margin-bottom:8px}
.ff-gruppe{margin:6px 0 10px}
.ff-gruppe h4{margin:0 0 4px;padding:0 6px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.ff-vorlage{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;font-size:13px;color:var(--ink);border:1px solid transparent}
.ff-vorlage:hover,.ff-vorlage:focus-visible{background:var(--surface);border-color:var(--line)}
.ff-vorlage.an{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
.ff-vorlage em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--ink-3);background:var(--surface-3);padding:1px 6px;border-radius:9px}
.ff-vorlage.ist-da .ff-vorlage-name{color:var(--ink-3)}
.ff-vorlage-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-vorlage-name small{display:block;font-size:11px;color:var(--ink-3)}
.ff-typ-sym{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-2)}
.ff-typ-sym .ff-sym{width:14px;height:14px}
.ff-vorlage.an .ff-typ-sym{border-color:var(--acc-line);color:var(--acc)}
.ff-nichts,.ff-leer{font-size:12.5px;padding:6px}
.ff-aus{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--line);margin-bottom:6px}
.ff-aus .ff-vorlage-name{flex:1 1 auto;font-size:13px}
.ff-form{padding:16px 20px 8px;overflow:auto;min-height:0}
.ff-label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.ff-zaehler{float:right;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ff-zaehler.knapp{color:var(--warn)}
.ff-fehler{color:var(--crit);font-size:12px;margin-top:4px}
.ff-fehler-allg{color:var(--crit);font-size:12.5px;background:var(--crit-soft);border-radius:var(--r-sm);padding:8px 10px;margin:4px 0 12px}
.ff-fehler-allg[hidden]{display:none}
.ff-fuss{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:var(--surface)}
.ff-fuss > a.muted{font-size:12px}
.ff-platz{flex:1 1 auto}

/* Die Wahl der Art: aufklappbar, mit Sinnbild und einem Satz */
.ff-typwahl{position:relative}
.ff-typwahl > summary{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);cursor:pointer;list-style:none}
.ff-typwahl > summary::-webkit-details-marker{display:none}
.ff-typwahl > summary:hover{border-color:var(--line-2)}
.ff-typwahl[open] > summary{border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft);background:var(--surface)}
.ff-typ-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ff-typ-text b{font-size:13px;font-weight:600}
.ff-typ-text span{font-size:11.5px;color:var(--ink-3)}
.ff-typ-pfeil{margin-left:auto;color:var(--ink-3)}
.ff-typliste{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;max-height:min(420px,52vh);overflow:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
.ff-typgruppe-titel{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:8px 8px 3px}
.ff-typ{display:flex;align-items:flex-start;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer}
.ff-typ:hover{background:var(--surface-2)}
.ff-typ input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ff-typ:has(input:checked){background:var(--acc-soft)}
.ff-typ:has(input:checked) .ff-typ-sym{border-color:var(--acc-line);color:var(--acc)}
.ff-typ:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:-2px}
.ff-typ .ff-typ-text b{font-size:12.5px}
/* .field label macht jede Beschriftung zum Block mit kleiner, fetter Schrift — die Einträge der Liste nicht. */
.field label.ff-typ{display:flex;margin:0;font-size:13px;font-weight:400;color:var(--ink)}
.rb-karte input[type=radio],.rb-karte input[type=checkbox],.ff-fenster input[type=checkbox],.fk-form input,.tabelle-reiter input{accent-color:var(--acc)}
.fk-wert a{color:var(--acc)}
.fk-wert a:hover{text-decoration:underline}

/* Blöcke je Art — nur sichtbar, wenn die Art passt (ohne :has stehen alle da) */
.ff-block{border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin:2px 0 12px;background:var(--surface-2)}
.ff-blockkopf{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;font-size:12.5px}
.ff-blockkopf .muted{font-size:11.5px;margin-left:auto}
.ff-angaben:not(:has(input[name="typ"]:is([value="auswahl"],[value="mehrfach"]):checked)) .ff-nur-auswahl,
.ff-angaben:not(:has(input[name="typ"]:is([value="zahl"],[value="prozent"],[value="formel"]):checked)) .ff-nur-zahl,
.ff-angaben:not(:has(input[name="typ"][value="formel"]:checked)) .ff-nur-formel,
.ff-angaben:not(:has(input[name="typ"][value="betrag"]:checked)) .ff-nur-betrag,
.ff-angaben:not(:has(input[name="typ"][value="katalog"]:checked)) .ff-nur-katalog,
.ff-angaben:not(:has(input[name="typ"][value="verweis"]:checked)) .ff-nur-verweis,
.ff-angaben:not(:has(input[name="typ"]:is([value="datum"],[value="datumzeit"]):checked)) .ff-nur-datum,
.ff-angaben:not(:has(input[name="typ"]:is([value="text"],[value="mehrzeilig"],[value="zahl"],[value="prozent"],[value="betrag"],[value="auswahl"],[value="email"],[value="telefon"],[value="link"],[value="bewertung"],[value="uhrzeit"]):checked)) .ff-nur-standard,
.ff-angaben:not(:has(input[name="typ"][value="janein"]:checked)) .ff-nur-janein,
.ff-angaben:has(input[name="typ"][value="prozent"]:checked) .ff-nicht-prozent{display:none}
.ff-werte{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.ff-wert{display:grid;grid-template-columns:18px minmax(0,1fr) 116px 28px 28px;gap:6px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:4px 4px 4px 6px}
.ff-wert.zieht{opacity:.45;border-style:dashed}
.ff-wert input{border:0;background:transparent;padding:5px 4px;font-size:13px;min-width:0}
.ff-wert input:focus{outline:none;box-shadow:none}
.ff-wert:focus-within{border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
.ff-griff{cursor:grab;color:var(--ink-3);font-size:14px;text-align:center;user-select:none}
.ff-farbe{border:1px solid var(--line);border-radius:14px;padding:3px 6px;font-size:12px;background:var(--surface-2);color:var(--ink-2)}
.ff-mini{width:28px;height:28px;border:0;background:transparent;border-radius:6px;color:var(--ink-3);cursor:pointer;font-size:15px}
.ff-mini:hover{background:var(--surface-3);color:var(--ink)}
.ff-zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ff-dreispaltig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.ff-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:12px}
.ff-chips .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;font-family:var(--mono);font-size:11.5px}
.ff-chips .chip:hover{border-color:var(--acc-line);color:var(--acc)}
.ff-haken{display:flex;gap:7px;align-items:center;font-size:13px;cursor:pointer}
.ff-haken input{width:auto;margin:0}
.ff-haken .muted{font-size:12px}
.ff-haken-reihe{display:flex;flex-wrap:wrap;gap:8px 20px;margin:4px 0 14px}
.ff-ki{background:linear-gradient(135deg,var(--acc-soft),var(--plum-soft));border-color:var(--acc-line)}
.ff-mehr summary{cursor:pointer;font-size:12px;color:var(--ink-3);margin-bottom:8px}

/* ── Karte „Felder" ─────────────────────────────────────────────────────────────────────────────── */
.fk-kopf{gap:8px}
.fk-kopf h3{margin:0}
.fk-stand{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;background:var(--surface-3);padding:1px 7px;border-radius:10px}
.fk-fehlt-zahl{font-size:11.5px;color:var(--warn);background:var(--warn-soft);padding:1px 7px;border-radius:10px}
.fk-platz{flex:1 1 auto}
.fk-leer{padding:14px;font-size:12.5px;color:var(--ink-3)}
.fk-leer p{margin:0 0 10px}
.fk-liste{margin:0;padding:4px 0}
.fk-zeile{display:grid;grid-template-columns:minmax(110px,38%) minmax(0,1fr);gap:10px;padding:0 14px;border-top:1px solid var(--line);align-items:start}
.fk-zeile:first-child{border-top:0}
.fk-zeile dt{display:flex;align-items:center;gap:7px;min-width:0;padding:9px 0;font-size:12.5px;color:var(--ink-2)}
.fk-sym{display:inline-grid;place-items:center;color:var(--ink-3);flex:none}
.fk-sym .ff-sym{width:14px;height:14px}
.fk-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-pflicht{color:var(--crit);text-decoration:none;font-weight:700}
.fk-def{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;color:var(--ink-3);opacity:0;flex:none;margin-left:auto;transition:opacity .12s}
.fk-def svg{width:13px;height:13px}
.fk-zeile:hover .fk-def,.fk-def:focus-visible{opacity:1}
.fk-def:hover{background:var(--surface-3);color:var(--acc)}
@media (hover:none){.fk-def{opacity:.7}}
.fk-zeile dd{margin:0;min-width:0;padding:4px 0;font-size:13px;display:flex;align-items:flex-start;gap:6px}
.fk-bearbeiten{flex:1 1 auto;min-width:0}
.fk-wert{display:block;padding:5px 8px;margin:0 -8px;border-radius:7px;min-height:30px;overflow-wrap:anywhere;line-height:1.45}
summary.fk-wert{cursor:pointer;list-style:none;border:1px solid transparent}
summary.fk-wert::-webkit-details-marker{display:none}
summary.fk-wert:hover{background:var(--surface-2);border-color:var(--line)}
summary.fk-wert:focus-visible{outline:2px solid var(--acc);outline-offset:0}
.fk-bearbeiten[open] > summary.fk-wert{background:var(--acc-soft);border-color:var(--acc-line);color:var(--ink-2)}
.fk-hinzu{color:var(--ink-3)}
.fk-zeile.fehlt .fk-hinzu{color:var(--warn)}
.fk-zeile.fehlt dt .fk-name{color:var(--ink)}
.fk-nurlesen{cursor:default}
.fk-zeile.frisch{animation:fk-frisch 1.6s ease-out}
@keyframes fk-frisch{from{background:var(--acc-soft)}to{background:transparent}}
.fk-form{margin:6px 0 8px;padding:10px;border:1px solid var(--acc-line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.fk-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.fk-form select,.fk-form textarea{width:100%;padding:7px 9px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);font-size:13px}
.fk-form input:focus,.fk-form select:focus,.fk-form textarea:focus{outline:none;border-color:var(--acc-line);background:var(--surface);box-shadow:0 0 0 3px var(--acc-soft)}
.fk-hilfe{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.fk-fehler{font-size:12px;color:var(--crit);margin-top:6px}
.fk-knoepfe{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.fk-tasten{font-size:11px;margin-left:auto}
.fk-sterne{color:var(--ff-stern);letter-spacing:1px;font-size:14px}
.fk-sterne .aus{color:var(--ff-stern-aus)}
.fk-datei{color:var(--acc)}

/* ── Eingaben der Feldarten ─────────────────────────────────────────────────────────────────────── */
.fe-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fe-teil{display:flex;flex-direction:column;gap:3px;font-weight:400 !important}
.fe-teil span{font-size:11px;color:var(--ink-3)}
.fe-adresse{display:grid;gap:6px}
.fe-plzort{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px}
.fe-einheit{display:flex;align-items:center;gap:8px}
.fe-einheit span{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.fe-sterne{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:2px}
.fe-sterne input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.fe-sterne label{font-size:22px;line-height:1;color:var(--ff-stern-aus);cursor:pointer;padding:2px;margin:0 !important;font-weight:400 !important;display:inline !important}
.fe-sterne label.fe-stern-keine{font-size:11.5px;color:var(--ink-3);margin-left:8px !important;order:-1}
.fe-sterne input:checked ~ label:not(.fe-stern-keine),.fe-sterne label:not(.fe-stern-keine):hover,
.fe-sterne label:not(.fe-stern-keine):hover ~ label:not(.fe-stern-keine){color:var(--ff-stern)}
.fe-sterne input:focus-visible + label{outline:2px solid var(--acc);border-radius:4px}
.fe-datei{display:grid;gap:6px}
.fe-datei-da{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;padding:6px 8px;background:var(--surface-3);border-radius:7px}
.fe-datei-name{font-weight:600;overflow-wrap:anywhere}
.fe-datei-weg{display:inline-flex !important;gap:5px;align-items:center;margin:0 0 0 auto !important;font-weight:400 !important;color:var(--crit) !important}
.fe-datei-weg input{width:auto !important}
.fe-formel{font-size:13px;display:flex;flex-direction:column;gap:2px}

/* ── Reiter-Baukasten ───────────────────────────────────────────────────────────────────────────── */
.rb-einstieg{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:0 0 14px;border:1px solid var(--acc-line);border-radius:var(--r);
  background:linear-gradient(120deg,var(--acc-soft),var(--surface) 70%)}
.rb-einstieg > div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px}
.rb-einstieg > div span{font-size:12.5px;color:var(--ink-2)}
.rb-einstieg-schmal{flex-wrap:wrap}
.rb-gross{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:11px;background:var(--surface);border:1px solid var(--acc-line);color:var(--acc)}
.rb-gross .sym{width:20px;height:20px}
.rb-schritte{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:6px;flex-wrap:wrap;counter-reset:rb}
.rb-schritte li > a,.rb-schritte li > span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:20px;font-size:12.5px;
  font-weight:600;color:var(--ink-3);border:1px solid var(--line);background:var(--surface)}
.rb-schritte li > a:hover{border-color:var(--line-2);color:var(--ink)}
.rb-nr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-3);font-size:11.5px}
.rb-schritte li.jetzt > span,.rb-schritte li.jetzt > a{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}
.rb-schritte li.jetzt .rb-nr{background:var(--acc);color:var(--surface)}
.rb-schritte li.fertig .rb-nr{background:var(--good-soft);color:var(--good)}
.rb-karte{max-width:1040px}
.rb-gruppe{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:4px 0 8px}
.rb-vorlagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:12px}
.rb-vorlage{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);color:var(--ink)}
.rb-vorlage:hover{border-color:var(--acc-line);background:var(--surface)}
.rb-vorlage.an{border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 3px var(--acc-soft)}
.rb-vorlage .rb-sym{grid-row:1 / span 3;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface);border:1px solid var(--line);color:var(--acc)}
.rb-vorlage .rb-sym .sym{width:17px;height:17px}
.rb-vorlage b{font-size:13.5px}
.rb-vorlage span:not(.rb-sym){font-size:12px;color:var(--ink-2);line-height:1.35}
.rb-vorlage em{font-style:normal;font-size:11px;color:var(--ink-3);margin-top:3px}
.rb-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rb-wahl{border:0;padding:0;margin:4px 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.rb-wahl legend{font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;padding:0}
.rb-option{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:6px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface-2)}
.rb-option input{grid-row:1 / span 2;margin:2px 0 0}
.rb-option b{font-size:13px}
.rb-option span{font-size:11.5px;color:var(--ink-3)}
.rb-option:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.rb-symbole{grid-template-columns:repeat(auto-fill,40px);gap:6px}
.rb-symbol{position:relative;cursor:pointer}
.rb-symbol input{position:absolute;opacity:0;width:1px;height:1px}
.rb-symbol span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.rb-symbol span .sym{width:18px;height:18px}
.rb-symbol:hover span{border-color:var(--line-2)}
.rb-symbol input:checked + span{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.rb-symbol input:focus-visible + span{outline:2px solid var(--acc);outline-offset:1px}
.rb-symbole-klein{grid-template-columns:repeat(auto-fill,32px)}
.rb-symbole-klein .rb-symbol span{width:32px;height:32px;border-radius:8px}
.rb-symbole-klein .rb-symbol span .sym{width:15px;height:15px}
.rb-knoepfe{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.rb-da{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;margin-bottom:12px}
.rb-da .chip{background:var(--surface-3);color:var(--ink-2)}
.rb-tabelle{display:grid;gap:6px}
.rb-zeile{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.4fr) 74px 66px;gap:8px;align-items:center}
.rb-zeile input:not([type=checkbox]),.rb-zeile select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px}
.rb-kopfzeile{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.rb-kopfzeile small{font-weight:400;color:var(--ink-3)}
.rb-haken{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2)}
.rb-klein{display:none}
.rb-zeile:not(:has(select option:checked:is([value="auswahl"],[value="mehrfach"]))) .rb-optionen{opacity:.35}
.rb-weg{display:flex;gap:14px;align-items:flex-start}
.rb-weg p{margin:0 0 10px;font-size:13px;max-width:70ch}
.rb-vorschau{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px;background:var(--surface-2)}
.rb-vorschau-menue{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--surface)}
.rb-vorschau-menue span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;font-size:12.5px;color:var(--ink-3)}
.rb-vorschau-menue span.an{background:var(--acc-soft);color:var(--acc);font-weight:600}
.rb-vorschau-menue span .sym{width:14px;height:14px}
.rb-vorschau-menue b{background:var(--acc);color:var(--surface);border-radius:9px;padding:0 6px;font-size:11px}
.rb-vorschau-liste{padding:10px 12px}
.rb-vorschau-kopf{display:flex;gap:18px;font-size:11.5px;font-weight:600;color:var(--ink-2);padding-bottom:8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rb-vorschau-leer{padding:14px 0 4px;font-size:12.5px;color:var(--acc);font-weight:600}

@media (max-width:760px){
  dialog.ff-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .ff-rumpf{grid-template-columns:minmax(0,1fr);overflow:auto !important}
  .ff-vorlagen{border-right:0;border-bottom:1px solid var(--line)}
  .ff-blatt{max-height:34vh}
  .ff-form{overflow:visible}
  .ff-typliste{grid-template-columns:minmax(0,1fr)}
  .ff-zweispaltig,.ff-dreispaltig,.rb-zwei{grid-template-columns:minmax(0,1fr)}
  .ff-wert{grid-template-columns:16px minmax(0,1fr) 92px 26px 26px;gap:4px}
  .ff-fuss{flex-wrap:wrap}
  .ff-fuss > a.muted{order:5;width:100%;text-align:center}
  .ff-platz{display:none}
  .ff-fuss .btn{flex:1 1 0;justify-content:center}
  .ff-fuss [data-ff-absenden]{order:-1;flex:1 1 100%}
  .fk-zeile{grid-template-columns:minmax(0,1fr);gap:0}
  .fk-zeile dt{padding:8px 0 0}
  .fk-tasten{display:none}
  .rb-zeile{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:8px;border:1px solid var(--line);border-radius:10px}
  .rb-zeile .rb-optionen{grid-column:1 / -1}
  .rb-kopfzeile{display:none}
  .rb-klein{display:inline}
  .rb-einstieg{flex-wrap:wrap}
  .rb-weg{flex-direction:column}
}

/* ── Unterlagen mit HTML (3.21) ── */
/* Vorlagen-Editor im Format HTML: Zeilennummern links im Feld (sie liegen im Innenabstand des Felds und rollen mit),
   kein Umbruch langer Zeilen, damit Nummer und Zeile zusammenpassen. Im Textformat bleibt das Feld, wie es war.
   Dazu der Hinweis „rechtlich prüfen", die Karten der fertigen HTML-Vorlagen und die Unterlagen an einem Eintrag
   einer eigenen Tabelle (teile/eintrag-unterlagen). Farben nur über die Variablen des Programms. */
.ve-code{position:relative}
.ve-code .ve-zeilen{display:none}
.ve[data-ve-format-ist="html"] .ve-code .ve-zeilen{display:block;position:absolute;left:1px;top:1px;bottom:1px;width:3.3em;padding:8px 7px 0 0;overflow:hidden;
  box-sizing:border-box;white-space:pre;text-align:right;font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--ink-3);
  background:var(--surface-3);border-right:1px solid var(--line);border-radius:var(--r-sm) 0 0 var(--r-sm);pointer-events:none;user-select:none;z-index:1}
.ve[data-ve-format-ist="html"] .ve-code textarea.ve-text{padding-left:calc(3.3em + 9px);white-space:pre;overflow-wrap:normal;overflow-x:auto}
.ve-tabhinweis{margin:4px 0 0}
.ve-rechtlich{display:inline-block;margin:6px 0 0;padding:4px 10px;border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn);font-size:12px;font-weight:500}
.ve-startrecht{display:inline-block;align-self:flex-start;margin-top:4px;padding:2px 8px;border-radius:20px;background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:500}
/* Unterlagen an einem Eintrag: „Unterlage ▾" klappt eine kleine Liste auf, darunter die erzeugten. */
.eu{display:grid;gap:6px;margin:6px 0}
.eu-wahl{position:relative;justify-self:start}
.eu-wahl > summary{list-style:none;cursor:pointer}
.eu-wahl > summary::-webkit-details-marker{display:none}
.eu-menue{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:min(420px,86vw);max-width:92vw;padding:6px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-lg)}
.eu-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:6px 7px;border-radius:var(--r-sm)}
.eu-zeile:hover{background:var(--surface-2)}
.eu-name{min-width:0;font-size:13px;font-weight:500;overflow-wrap:anywhere}
.eu-knoepfe{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.eu-inline{display:inline}
.eu-klein{font-size:11.5px;margin:4px 7px 2px}
.eu-liste{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.eu-liste li{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.eu-titel{font-size:13px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.eu-liste .eu-knoepfe{margin-left:auto}
@media (max-width:899.98px){
  .eu-menue{position:static;min-width:0;max-width:none;margin-top:4px;box-shadow:none}
}
/* Vorlagen-Liste: eigene Tabellen (3.21) */
.vi-tabellen{display:grid}
.vi-tabelle{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line)}
.vi-name{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.vi-name .muted{font-size:12px}
.vi-knoepfe{display:inline-flex;gap:6px;flex-wrap:wrap}
/* Farben im HTML-Code (3.21): eine Ebene hinter dem Feld, gleiche Schrift, gleiche Abstände. */
.ve-code .ve-farbe{position:absolute;inset:0;margin:0;padding:8px 60px 60px calc(3.3em + 9px);border:1px solid transparent;box-sizing:border-box;overflow:hidden;
  white-space:pre;font-family:var(--mono);font-size:12.5px;line-height:1.55;tab-size:2;color:var(--ink);background:var(--surface-2);border-radius:var(--r-sm);pointer-events:none}
.ve-code.ve-gefaerbt textarea.ve-text{position:relative;background:transparent;color:transparent;caret-color:var(--ink)}
.ve-code.ve-gefaerbt textarea.ve-text::selection{background:var(--acc-soft);color:var(--ink)}
.ve-f-t{color:var(--acc)}
.ve-f-a{color:var(--plum)}
.ve-f-w{color:var(--cool)}
.ve-f-p{color:var(--warn);background:var(--warn-soft);border-radius:3px}
.ve-f-e{color:var(--plum)}
.ve-f-k{color:var(--ink-3);font-style:italic}

/* ── Eintragsarten (3.21) ── */
/* Die Farben der Arten: nur Variablen, die es hell UND dunkel schon gibt (siehe :root und „Bausteine im Wochenplan"). */
.ea-f-petrol{--ea:var(--acc);--ea-soft:var(--acc-soft)}
.ea-f-blau{--ea:var(--cool);--ea-soft:var(--cool-soft)}
.ea-f-gruen{--ea:var(--good);--ea-soft:var(--good-soft)}
.ea-f-orange{--ea:var(--warn);--ea-soft:var(--warn-soft)}
.ea-f-rot{--ea:var(--crit);--ea-soft:var(--crit-soft)}
.ea-f-lila{--ea:var(--violet);--ea-soft:var(--violet-soft)}
.ea-f-pink{--ea:var(--pink);--ea-soft:var(--pink-soft)}
.ea-f-tuerkis{--ea:var(--teal);--ea-soft:var(--teal-soft)}
.ea-f-grau{--ea:var(--grau);--ea-soft:var(--grau-soft)}
.ea-zeichen{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:var(--ea-soft,var(--surface-3));color:var(--ea,var(--ink-2))}
.ea-zeichen .sym{width:15px;height:15px}
.ea-zeichen.gross{width:40px;height:40px;border-radius:12px}
.ea-zeichen.gross .sym{width:21px;height:21px}
.ea-zeichen.klein{width:20px;height:20px;border-radius:6px}
.ea-zeichen.klein .sym{width:13px;height:13px}
.ea-unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ea-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}

/* Seite „Eintragsarten" */
.ea-seite{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
.ea-spalte{min-width:0}
.ea-kopfzeile{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 10px}
.ea-kopfzeile h2{margin:0;font-size:15px;letter-spacing:-.01em}
.ea-kopfzeile .muted{font-size:12px}
.ea-liste,.ea-feldliste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ea-zeile{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ea);border-radius:var(--r);box-shadow:var(--shadow)}
.ea-zeile.aus{opacity:.6}
.ea-zeile.aus .ea-zeichen{filter:grayscale(1)}
.ea-zieht{box-shadow:var(--shadow-lg);outline:2px solid var(--acc-line);position:relative;z-index:2}
.ea-griff{cursor:grab;color:var(--ink-3);font-size:13px;letter-spacing:-2px;user-select:none;-webkit-user-select:none;touch-action:none;padding:4px 2px;line-height:1}
.ea-griff:hover{color:var(--ink)}
.ea-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ea-name b{font-size:14px}
.ea-name a:hover b{color:var(--acc)}
.ea-text{font-size:12.5px;color:var(--ink-2);margin-top:2px;overflow-wrap:anywhere}
.ea-merkmale{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:6px;font-size:11.5px;color:var(--ink-3)}
.ea-zahl{font-family:var(--mono)}
.ea-knoepfe{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;align-items:center}
.ea-knoepfe form,.ea-pfeile{margin:0}
.ea-pfeile{display:inline-flex}
.ea-pfeile .btn{padding:3px 7px;font-size:11px}
.ea-pfeile .btn:disabled{opacity:.28;cursor:default;background:transparent}
.ea-vorschlaege .card{position:sticky;top:12px}
.ea-branchenwahl{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.ea-branchenwahl label{font-size:12px}
.ea-branchenwahl select{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px}
.ea-vliste{list-style:none;margin:0;padding:0}
.ea-vliste li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line)}
.ea-vliste li:last-child{border-bottom:0}
.ea-vliste form{margin:0}
.ea-vliste b{font-size:13px}
.ea-hinweis{font-size:12px;margin:10px 0 0}

/* Eine Art bearbeiten */
.ea-wahl{border:0;margin:0 0 14px;padding:0;min-width:0}
.ea-wahl legend{font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;padding:0}
.ea-symbole,.ea-farben{display:flex;flex-wrap:wrap;gap:6px}
.ea-symbolwahl,.ea-farbwahl{position:relative;cursor:pointer}
.ea-symbolwahl input,.ea-farbwahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ea-symbolwahl .ea-zeichen{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-3)}
.ea-symbolwahl:hover .ea-zeichen{color:var(--ea);background:var(--ea-soft)}
.ea-symbolwahl input:checked + .ea-zeichen{background:var(--ea-soft);color:var(--ea);border-color:var(--ea);box-shadow:0 0 0 2px var(--ea-soft)}
.ea-symbolwahl input:focus-visible + .ea-zeichen,.ea-farbwahl input:focus-visible + .ea-tupfer{outline:2px solid var(--acc);outline-offset:2px}
.ea-farbwahl{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border:1px solid var(--line);border-radius:20px;font-size:12.5px;background:var(--surface);color:var(--ink-2)}
.ea-tupfer{width:16px;height:16px;border-radius:50%;background:var(--ea);box-shadow:inset 0 0 0 3px var(--ea-soft)}
.ea-farbwahl input:checked + .ea-tupfer{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ea)}
.ea-farbwahl:has(input:checked){border-color:var(--ea);background:var(--ea-soft);color:var(--ea);font-weight:600}
.ea-haken{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.ea-haken label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.ea-haken label .muted{font-size:12px}
.ea-haken input{width:auto;margin:0;flex:none}
.ea-haken.untereinander{flex-direction:column;align-items:flex-start;margin:0 0 14px}
.ea-vorschau{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;margin:0 0 14px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px dashed var(--line-2);font-size:12.5px}
.ea-eintrag{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.ea-feld{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:start;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2)}
.ea-feld > .ea-griff{padding-top:8px}
.ea-feldklappe{min-width:0}
.ea-feldklappe > summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px;cursor:pointer;list-style:none;padding:5px 0;font-size:13px}
.ea-feldklappe > summary::-webkit-details-marker{display:none}
.ea-feldklappe > summary::after{content:"Ändern";margin-left:auto;font-size:12px;color:var(--acc);font-weight:500}
.ea-feldklappe[open] > summary::after{content:"Zuklappen"}
.ea-feldform{margin-top:10px}
.ea-feldweg{margin:8px 0 4px}
.ea-feldvorlagen{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ea-feldvorlagen h4{margin:0 0 8px;font-size:13px}
.ea-feldvorlagen div{display:flex;flex-wrap:wrap;gap:6px}
.ea-feldvorlagen .btn{border-style:dashed;color:var(--ink-2)}
.ea-feldvorlagen .btn:hover{border-color:var(--acc-line);color:var(--acc);background:var(--acc-soft)}
.ea-neufeld{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ea-neufeld h4{margin:0 0 10px;font-size:13px}
.ea-pflicht{display:flex;align-items:flex-end;min-height:58px}
.ea-pflicht label{display:flex;gap:7px;align-items:center;font-size:13px;font-weight:500;color:var(--ink);margin:0 0 9px}
.ea-pflicht input{width:auto}
.ea-zeilenknoepfe{display:flex;gap:8px}

/* Erfassen (Seitenfenster) */
.ea-kopf{align-items:center}
.ea-titel{display:flex;align-items:center;gap:12px;min-width:0}
.ea-titel > div{min-width:0}
.ea-titel h1{margin:0;overflow-wrap:anywhere}
.ea-titel p a{color:var(--acc);font-weight:500}
.ea-artwahl{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin:0 0 4px;scrollbar-width:thin}
.ea-artknopf{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:20px;font-size:12.5px;
  font-weight:500;white-space:nowrap;background:var(--surface);color:var(--ink-2);flex:none}
.ea-artknopf .ea-zeichen{width:24px;height:24px;border-radius:50%}
.ea-artknopf .ea-zeichen .sym{width:13px;height:13px}
.ea-artknopf:hover{border-color:var(--ea);color:var(--ink)}
.ea-artknopf.an{border-color:var(--ea);background:var(--ea-soft);color:var(--ea);font-weight:600}
.ea-form{border-top:3px solid var(--ea)}
.ea-form .ea-zwei .field select{width:100%}
.ea-schritt{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px 12px;margin:0 0 14px;background:var(--surface-2);min-width:0}
.ea-schritt legend{font-size:11.5px;font-weight:600;color:var(--ink-2);padding:0 4px}
.ea-schritt legend .muted{font-weight:400}
.ea-schritt-zeile{display:flex;flex-wrap:wrap;gap:8px}
.ea-schritt-zeile select,.ea-schritt-zeile input{padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:13px}
.ea-schritt-zeile select{flex:1 1 220px;min-width:0}
.ea-fuss{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ea-entfernen{margin:-4px 0 14px;text-align:right}
.ea-letzte h2{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 8px}
.ea-letzte h2 a{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--acc)}
.ea-letzte ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ea-letzte li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface)}
.ea-letzte b{font-size:13px}
.ea-letzte .muted{font-size:11.5px;font-family:var(--mono)}

/* Schnellknopf „Aktivität ▾" (teile/eintragsart-knopf) und die Einträge im Knopf „Neu in der Akte" */
.ea-schnell .ea-zeichen{margin-left:-4px}
.ea-menue{position:relative;flex:none}
.ea-menue > summary{list-style:none;cursor:pointer;user-select:none}
.ea-menue > summary::-webkit-details-marker{display:none}
.ea-menue[open] > summary{box-shadow:0 0 0 3px var(--acc-soft)}
.ea-pfeil{font-size:10px;color:var(--ink-3)}
.ea-menueliste{position:absolute;right:0;top:calc(100% + 6px);z-index:36;min-width:220px;max-width:min(300px,calc(100vw - 32px));padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:1px}
.ea-menueliste a{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);font-size:13px;color:var(--ink-2)}
.ea-menueliste a span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-menueliste a:hover,.ea-menueliste a:focus-visible{background:var(--surface-3);color:var(--ink)}
.ea-neu-trenner{display:block;padding:8px 9px 3px;margin-top:4px;border-top:1px solid var(--line);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.akteneu-liste a[data-akte-aktivitaet] .sym{color:var(--ea)}

@media (max-width:1100px){
  .ea-seite{grid-template-columns:minmax(0,1fr)}
  .ea-vorschlaege .card{position:static}
}
@media (max-width:640px){
  .ea-zwei{grid-template-columns:minmax(0,1fr)}
  .ea-zeile{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px 12px}
  .ea-zeile > .ea-griff{display:none}
  .ea-knoepfe{grid-column:1 / -1;justify-content:flex-start}
  .ea-pflicht{min-height:0}
  .ea-pflicht label{margin:0}
  .ea-menueliste{position:fixed;left:16px;right:16px;top:auto;bottom:16px;max-width:none;max-height:60vh;overflow:auto}
  .ea-menueliste a{padding:10px 11px;font-size:14px}
  .ea-entfernen{text-align:left;margin-top:0}
}
.ea-wie{margin:0 0 10px;font-size:12.5px}
.ea-wie a{color:var(--acc);font-weight:500}
.ea-artwahl.umbruch{flex-wrap:wrap;overflow:visible;padding-bottom:4px}
label.ea-artknopf{position:relative;cursor:pointer}
label.ea-artknopf input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
label.ea-artknopf:has(input:checked){border-color:var(--ea);background:var(--ea-soft);color:var(--ea);font-weight:600}
label.ea-artknopf:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
/* Alle Aktivitäten (Liste quer über die Akten) */
.ea-filter{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:0 0 12px}
.ea-filter label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.ea-filter select{min-width:150px;max-width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:13px;font-weight:400;color:var(--ink)}
.ea-zahlen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.ea-zahl-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 4px;border:1px solid var(--line);border-radius:20px;background:var(--surface);
  font-size:12.5px;color:var(--ink-2)}
.ea-zahl-chip b{font-family:var(--mono);font-weight:500;color:var(--ea)}
.ea-zahl-chip .ea-zeichen{border-radius:50%}
.ea-zahl-chip:hover{border-color:var(--ea)}
.ea-zahl-chip.an{border-color:var(--ea);background:var(--ea-soft);color:var(--ea);font-weight:600}
.ea-strom{max-width:980px}
.ea-tag{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 8px}
.ea-tag:first-child{margin-top:0}
.ea-akt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;margin-bottom:8px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ea);border-radius:var(--r);box-shadow:var(--shadow)}
.ea-akt-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;font-size:13px}
.ea-akt-kopf b{font-size:13.5px}
.ea-akt-kopf a{color:var(--acc);font-weight:500}
.ea-zeilen{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 18px;margin:8px 0 0}
.ea-zeilen div{min-width:0}
.ea-zeilen dt{font-size:11px;color:var(--ink-3)}
.ea-zeilen dd{margin:1px 0 0;font-size:13px;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.ea-notiz{margin:8px 0 0;font-size:13px;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.ea-akt-rand{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:11.5px;white-space:nowrap}
.ea-zeit{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
@media (max-width:640px){
  .ea-akt{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .ea-akt-rand{grid-column:2;flex-direction:row;align-items:center;gap:8px;white-space:normal}
  .ea-filter label{flex:1 1 140px}
  .ea-filter select{min-width:0;width:100%}
}

/* ── Listen frei einrichten (3.21) ── Ansichten als ruhige Reihe, „Spalten" zum Ordnen, Spaltenköpfe sortieren per
   Klick, Breite per Ziehen, fester Kopf beim Blättern. Am Handy wird jede Zeile eine Karte: Name oben, darunter die
   gewählten Spalten als „Beschriftung · Wert". Farben nur aus :root. */
.lleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.lansichten{display:flex;gap:6px;flex:0 1 auto;min-width:0;overflow-x:auto;padding:2px 1px 4px;scrollbar-width:thin}
.lansichten:empty{display:none}
.lvorschlaege{flex:none}
.lvorschlaege>summary{cursor:pointer}
.lpopbox-links{left:0;right:auto}
.lsort-handy{display:none}
.lsortzeile{display:flex;align-items:center;gap:4px;padding:3px 4px 3px 9px;border-radius:var(--r-sm);font-size:13px}
.lsortzeile span{flex:1;min-width:0}
.lsortzeile.an{background:var(--acc-soft)}
.lsortzeile .lpfeil{font-size:14px;padding:3px 9px}
.lsortzeile .lpfeil.an{background:var(--acc);color:var(--surface)}
.lansicht{display:inline-flex;align-items:center;gap:6px;flex:none;padding:4px 11px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);font-size:12.5px;color:var(--ink-2);white-space:nowrap;line-height:1.35}
.lansicht:hover{background:var(--surface-3);color:var(--ink)}
.lansicht.an{background:var(--acc-soft);border-color:var(--acc-line);color:var(--ink);font-weight:600}
.lansicht.ungespeichert{border-style:dashed;font-weight:500;font-style:italic}
.lansicht.vorschlag:not(.an){border-style:dashed;color:var(--ink-3);background:transparent}
.lansicht.vorschlag:not(.an):hover{color:var(--ink);background:var(--surface-3)}
.lansicht .n{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--acc-2);background:var(--surface);
  border-radius:999px;padding:0 6px;font-variant-numeric:tabular-nums}
.lansicht.geaendert::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none}
.lzeichen{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lansicht .lzeichen{width:11px;height:11px;opacity:.7}
.lwerkzeug{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:wrap}
.lform-inline{margin:0}
.lpop{position:relative}
.lpop>summary{list-style:none}
.lpop>summary::-webkit-details-marker{display:none}
.lpop[open]>summary{background:var(--surface-3);border-color:var(--line-2)}
.lpopbox{position:absolute;right:0;top:calc(100% + 6px);z-index:46;width:300px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px}
.lpopbox-schmal{width:250px;padding:6px}
.lklein{font-size:11.5px;color:var(--ink-3)}
.lfeld{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px;margin:4px 0 8px}
.lmerkt{margin:0 0 10px;line-height:1.4}
.lwahl{border:0;padding:0;margin:0 0 10px;display:flex;gap:14px;flex-wrap:wrap}
.lwahl legend{padding:0;margin-bottom:4px;width:100%}
.lwahl label,.lhaken{display:flex;align-items:center;gap:6px;font-size:12.5px}
.lhaken{margin:0 0 10px}
.lvoll{width:100%;justify-content:center}
.lzeile{display:flex;gap:6px;align-items:center}
.lzeile input{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px}
.lmenu{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 9px;border-radius:var(--r-sm);font-size:13px;cursor:pointer;color:var(--ink-2)}
.lmenu:hover{background:var(--surface-3);color:var(--ink)}
.lgefahr{color:var(--crit)}
.lumbenennen{padding:6px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0}
.lumbenennen .lklein{display:block;margin:0 0 4px 3px}
/* Das Fenster „Spalten" */
.lspaltenbox{width:340px;max-height:min(72vh,640px);overflow:auto;overscroll-behavior:contain;padding:12px 12px 0}
.lspaltenkopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lgruppe{margin:10px 2px 4px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px}
.lgruppe .lklein{text-transform:none;letter-spacing:0;font-weight:400}
.lspaltenliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lspaltenliste li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:6px;padding:4px 4px 4px 2px;
  border-radius:var(--r-sm);border:1px solid transparent;background:var(--surface)}
.lspaltenliste li:hover{background:var(--surface-2);border-color:var(--line)}
.lspaltenliste li.lfest{color:var(--ink-3);grid-template-columns:18px 1fr auto}
.lspaltenliste li.lfest .lname{font-weight:600;color:var(--ink-2)}
.lspaltenliste .lname{display:flex;align-items:flex-start;gap:7px;font-size:13px;cursor:pointer;min-width:0}
.lspaltenliste .lname input{margin-top:3px;accent-color:var(--acc)}
.lspaltenliste .lname small{display:block;font-size:11px;color:var(--ink-3);line-height:1.3}
.lspaltenliste .lname .ltext{display:flex;flex-direction:column;min-width:0;overflow-wrap:break-word}
.lgriff-zug{cursor:grab;color:var(--ink-3);font-size:13px;line-height:1;text-align:center;user-select:none;touch-action:none}
[data-lspalten-aus] .lgriff-zug,[data-lspalten-aus] .lpfeile{visibility:hidden}
.lpfeile{display:flex;gap:1px;opacity:.35}
.lspaltenliste li:hover .lpfeile,.lspaltenliste li:focus-within .lpfeile{opacity:1}
.lpfeil{border:0;background:none;padding:1px 5px;border-radius:5px;font-size:12px;color:var(--ink-2);cursor:pointer}
.lpfeil:hover{background:var(--surface-3)}
.lspaltenliste li.lzieht{opacity:.45}
.lspaltenliste li.lziel{border-top:2px solid var(--acc)}
.lspaltenliste li[hidden]{display:none}
[data-lspalten-an] li:has(input:not(:checked)) .ltext{color:var(--ink-3);text-decoration:line-through}
.lspaltenfuss{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);margin:10px -12px 0;
  padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.lspaltenfuss .lhaken{margin:0}
.ldichte{display:flex;align-items:center;gap:4px}
.ldichte .lklein{margin-right:4px}
.ldichte .btn.an{background:var(--acc-soft);border-color:var(--acc-line);color:var(--ink)}
/* Die Tabelle */
.lwrap{position:relative}
.ltabelle th.lkopf{position:sticky;top:0;z-index:2;background:var(--surface-2);padding:0;vertical-align:bottom}
.ltabelle th.laktion,.ltabelle thead th:not(.lkopf){position:sticky;top:0;z-index:2}
.ltabelle .lsort{display:flex;align-items:center;gap:5px;padding:9px 14px 9px 12px;color:inherit;min-height:34px}
.ltabelle th.num .lsort{justify-content:flex-end}
.ltabelle a.lsort:hover{color:var(--ink)}
.ltabelle a.lsort:focus-visible{outline-offset:-2px}
.lpfeil-sort{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.ltabelle a.lsort:hover .lpfeil-sort{opacity:.8}
.ltabelle th.lsortiert{color:var(--acc-2);box-shadow:inset 0 -2px 0 var(--acc)}
.ltabelle th.lsortiert .lpfeil-sort{opacity:1}
.lbreite{position:absolute;top:6px;bottom:6px;right:0;width:9px;cursor:col-resize;touch-action:none;border-right:1px solid transparent}
.ltabelle th.lkopf:hover .lbreite{border-right-color:var(--line-2)}
.lbreite:focus-visible,.lbreite.lzieht{border-right:2px solid var(--acc);outline:0}
.ltabelle .sr,.lleiste .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ltabelle td.lzelle small{display:block;color:var(--ink-3);font-size:11.5px;line-height:1.35;margin-top:1px}
.ltabelle td.lzelle{overflow-wrap:break-word}
.ltabelle td.num{color:var(--ink)}
.ltabelle th.num{font-family:var(--ui);font-size:11px}
.lsummen{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:10px 2px 0;font-size:12.5px;color:var(--ink-2)}
.lsumme{display:inline-flex;align-items:baseline;gap:6px}
.lsumme b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lkompakt .ltabelle td{padding-top:5px;padding-bottom:5px;font-size:12.5px}
.lkompakt .ltabelle td.cellmain small{display:inline;margin-left:6px}
.lkompakt .ltabelle td.cellmain b{display:inline}
.lkompakt .ltabelle .chip{padding-top:0;padding-bottom:0}
@media (min-width:901px){
  .lwrap{max-height:calc(100vh - 168px);overflow:auto}
}
@media (max-width:640px){
  .lleiste{align-items:stretch;position:relative}
  .lansichten{flex:1 1 100%}
  .lwerkzeug{margin-left:0;width:100%}
  .lpop{position:static}
  .lpopbox,.lspaltenbox{left:12px;right:12px;width:auto;top:auto;margin-top:6px}
  .lwerkzeug{position:relative}
  .lsort-handy{display:block}
  .lwrap{overflow:visible;border:0;background:transparent;box-shadow:none}
  .ltabelle{min-width:0}
  .ltabelle thead{display:none}
  .ltabelle,.ltabelle tbody{display:block}
  .ltabelle tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:11px 12px;margin-bottom:8px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
  .ltabelle tr:has(> td.cellmain){border-bottom:1px solid var(--line)}
  .ltabelle td{display:block;padding:0;border:0;font-size:12.5px;min-width:0}
  .ltabelle td.cellmain{grid-column:1 / -1;padding-bottom:4px}
  .ltabelle td.lzelle::before,.ltabelle td[data-zustaendig]::before,.ltabelle td[data-fuer]::before{content:attr(data-titel);display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
  .ltabelle td.lzelle::before{overflow-wrap:anywhere}
  .ltabelle td[data-zustaendig]::before{content:"Zuständig"}
  .ltabelle td[data-fuer]::before{content:"Für wen"}
  .ltabelle td.num{text-align:left}
  .ltabelle td.laktion{grid-column:1 / -1}
  .ltabelle td.laktion:empty{display:none}
  .ltabelle tr td[colspan]{grid-column:1 / -1}
}

/* ── Filter-Baukasten und Mehrfachauswahl (3.21) ── */
/* Der Baukasten liest sich wie ein Satz: „Wenn | Ort | ist | Kassel — und | Letzter Kontakt | vor mehr als | 30 Tagen".
 * Chips ruhig in den Farben des Programms, ODER in Pflaume abgesetzt. Die Leiste der Mehrfachauswahl klebt unten,
 * eigene Merkmale (lk-…), damit sie der älteren Leiste bei Aufgaben und Nachfassen nicht ins Gehege kommt. */
:root{ --lf-oder:var(--plum); --lf-oder-soft:var(--plum-soft); --lk-zeile:var(--acc-soft) }
.lf{margin:0 0 12px}
.lf-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lf-auf{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 9px;border:1px dashed var(--line-2);
  border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer}
.lf-auf:hover,.lf-auf[aria-expanded="true"]{border-style:solid;border-color:var(--acc-line);color:var(--acc-2);background:var(--acc-soft)}
.lf-auf .sym{width:14px;height:14px}
.lf-auf b{font-weight:600;color:var(--acc)}
.lf-schnell{display:flex;flex-wrap:wrap;gap:6px}
.lf-schnell a{padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--ink-2);background:var(--surface)}
.lf-schnell a:hover{border-color:var(--line-2);color:var(--ink)}
.lf-schnell a.an{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-2);font-weight:500}
.lf-schnell a.an::after{content:" ×";color:var(--acc)}
.lf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px;font-size:12.5px}
.lf-zeigt{color:var(--ink-3)}
.lf-gruppe{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.lf-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 3px 3px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface-3);color:var(--ink)}
.lf-chip-text{padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.lf-chip-text:hover{color:var(--acc-2);text-decoration:underline;text-underline-offset:2px}
.lf-zeile.lf-im-blick{background:var(--acc-soft);transition:background .3s ease}
.lf-leer{margin:8px 0 0;padding:6px 10px;border-radius:var(--r-sm);background:var(--cool-soft);color:var(--cool);font-size:12.5px}
.lf-weg{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--ink-3);font-size:14px;line-height:1}
.lf-weg:hover{background:var(--crit-soft);color:var(--crit)}
.lf-und{color:var(--ink-3);font-size:11.5px}
.lf-oder{padding:1px 8px;border-radius:999px;background:var(--lf-oder-soft);color:var(--lf-oder);font-size:11px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.lf-zahl{margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--acc-soft);color:var(--acc-2);font-family:var(--mono);font-size:11.5px}
.lf-alle-weg{margin-left:4px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.lf-alle-weg:hover{color:var(--crit)}
.lf-hinweis{margin:8px 0 0;padding:6px 10px;border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn);font-size:12.5px}
.lf-kasten{margin-top:10px;padding:14px 16px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);box-shadow:var(--shadow-lg)}
.lf-kopf{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.lf-kopf b{display:block;font-size:14px}
.lf-kopf span{display:block;margin-top:2px;color:var(--ink-3);font-size:12px}
.lf-zu{width:30px;height:30px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);font-size:20px;cursor:pointer}
.lf-zu:hover{background:var(--surface-3);color:var(--ink)}
.lf-gruppe-box{margin-top:12px;padding:10px 12px 8px;border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:var(--r-sm);background:var(--surface-2)}
.lf-gruppe-box + .lf-gruppe-box{border-left-color:var(--lf-oder)}
.lf-gruppe-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.lf-gruppe-titel{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-2)}
.lf-gruppe-box + .lf-gruppe-box .lf-gruppe-titel{color:var(--lf-oder)}
.lf-gruppe-weg{border:0;background:transparent;color:var(--ink-3);font-size:12px;cursor:pointer;text-decoration:underline}
.lf-gruppe-weg:hover{color:var(--crit)}
.lf-zeile{display:grid;grid-template-columns:30px minmax(150px,1.1fr) minmax(130px,1fr) minmax(160px,1.6fr) 28px;
  gap:8px;align-items:center;margin-top:6px;padding:2px 0;border-radius:var(--r-sm)}
.lf-zeile.lf-fehlt{outline:2px solid var(--warn);outline-offset:2px}
.lf-und-wort{font-size:11.5px;color:var(--ink-3);text-align:right}
.lf-zeile select,.lf-zeile input{width:100%;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:13px}
.lf-zeile select:disabled{color:var(--ink-3);background:var(--surface-3)}
.lf-wert{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.lf-wert input{flex:1 1 90px}
.lf-wert input.lf-tage{flex:0 0 76px}
.lf-wort{color:var(--ink-2);font-size:12.5px;white-space:nowrap}
.lf-optionen{display:flex;flex-wrap:wrap;gap:4px;max-height:96px;overflow:auto;padding:1px}
.lf-option{padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);
  font-size:12px;cursor:pointer}
.lf-option[aria-pressed="true"]{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-2);font-weight:500}
.lf-option[aria-pressed="true"]::before{content:"✓ "}
.lf-zeile-weg{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);font-size:17px;cursor:pointer}
.lf-zeile-weg:hover{background:var(--crit-soft);color:var(--crit)}
.lf-plus{margin:6px 0 2px 38px;padding:2px 0;border:0;background:transparent;color:var(--acc);font-size:12.5px;font-weight:500;cursor:pointer}
.lf-plus:hover{text-decoration:underline}
.lf-fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.lf-fuss-rechts{display:flex;gap:8px}

/* Mehrfachauswahl */
td.lk-kasten,th.lk-kasten{width:34px;padding-right:0}
th.lk-kasten input,td.lk-kasten input{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--acc)}
.lk-fang{display:block;padding:6px;margin:-6px;cursor:pointer}
tr.lk-gewaehlt > td{background:var(--lk-zeile)}
.lk-leiste{position:sticky;bottom:12px;z-index:30;margin:12px 0;padding:10px 14px;border:1px solid var(--acc-line);
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-lg)}
.lk-leiste form{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.lk-wahl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12.5px}
.lk-zahl b{font-family:var(--mono);font-size:14px;color:var(--acc-2)}
.lk-link{padding:0;border:0;background:transparent;color:var(--acc);font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lk-link:hover{color:var(--acc-2)}
.lk-tun{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.lk-tun select,.lk-tun input:not([type=checkbox]){padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:12.5px;max-width:240px}
.lk-teil{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.lk-wort{color:var(--ink-3);font-size:12.5px}
.lk-wert{display:inline-flex;flex-wrap:wrap;gap:6px}
.lk-mehrfach{display:inline-flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px}
.lk-haken{display:inline-flex;align-items:center;gap:3px;cursor:pointer}
.lk-vorschau{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;
  padding:8px 12px;border:1px solid var(--acc-line);border-radius:var(--r-sm);background:var(--acc-soft)}
.lk-vorschau p{margin:0;font-size:13px;color:var(--ink)}
.lk-vorschau.lk-fehler{border-color:var(--crit);background:var(--crit-soft)}
.lk-vorschau.lk-fehler p{color:var(--crit)}
.lk-vorschau-knoepfe{display:flex;gap:8px}
.lk-vorschau .btn.danger.primary,.lk-bestaetigen .btn.danger.primary{background:var(--crit);border-color:var(--crit);color:var(--surface)}
/* 3.24.2 Teil 6 — Karte des Assistenten, die löscht */
.ki-entwurf .btn.danger.primary{background:var(--crit);border-color:var(--crit);color:var(--surface)}
.lk-unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lk-bestaetigen{padding:16px 18px}
.lk-bestaetigen-satz{margin:0 0 8px;font-size:14.5px}
.lk-leiste form[aria-busy="true"] [data-lk-weiter]{opacity:.6;pointer-events:none}
.lk-auswahl{position:relative;display:inline-block}
.lk-tun .lk-auswahl input[type=text]{min-width:220px}
.lk-auswahl .auswahlliste{top:auto;bottom:calc(100% + 4px);min-width:280px}
.lk-tun .lk-teil-strasse{min-width:180px}
.lk-tun .lk-teil-plz{width:84px}

@media (max-width:760px){
  .lf-kasten:not([hidden]){position:fixed;inset:0;z-index:70;margin:0;border-radius:0;overflow:auto;padding:14px 14px 90px}
  .lf-fuss{position:fixed;left:0;right:0;bottom:0;margin:0;padding:10px 14px;background:var(--surface);
    border-top:1px solid var(--line);box-shadow:var(--shadow)}
  .lf-zeile{grid-template-columns:1fr 32px;grid-template-areas:"und und" "feld weg" "op op" "wert wert";gap:6px;
    padding:8px 0;border-top:1px solid var(--line)}
  .lf-zeile:first-child{border-top:0}
  .lf-und-wort{grid-area:und;text-align:left}
  .lf-und-wort:empty{display:none}
  .lf-zeile .lf-feld{grid-area:feld}
  .lf-zeile .lf-op{grid-area:op}
  .lf-zeile .lf-wert{grid-area:wert}
  .lf-zeile .lf-zeile-weg{grid-area:weg}
  .lf-plus{margin-left:0}
  .lk-tun{margin-left:0;width:100%}
  .lk-tun select,.lk-tun input:not([type=checkbox]){max-width:none;flex:1 1 140px}
  .lk-teil{width:100%}
  .lk-wert,.lk-auswahl{flex:1 1 100%}
  .lk-tun .lk-auswahl input[type=text]{width:100%;min-width:0}
  .lk-auswahl .auswahlliste{min-width:0}
  .lk-leiste{bottom:8px;padding:10px 12px}
}

/* ── KI-Assistent (3.21) ── */
/* Block in der Seitenleiste, Chat-Schublade, Akte, Felder, Tagesüberblick, Hilfe-Seite. Keine festen Farben: eine ruhige
   Fläche aus Petrol, Blau und Pflaume aus den Variablen des Programms — die Farben von Salesfy, nicht das Grün von Close.
   Hell und dunkel ändern sich mit, weil die Variablen hier nur auf die des Programms zeigen. */
:root{
  --ki-a:var(--acc-soft); --ki-b:var(--cool-soft); --ki-c:var(--plum-soft); --ki-rand:var(--acc-line);
  --ki-hover:color-mix(in srgb,var(--surface) 62%,transparent);
  --ki-zeichen-a:var(--acc); --ki-zeichen-b:var(--plum); --ki-frage:var(--acc-soft);
}
.ki-zeichen{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:7px;color:var(--surface);
  background:linear-gradient(150deg,var(--ki-zeichen-a),var(--ki-zeichen-b))}
.ki-zeichen .sym{width:14px;height:14px}

/* Block in der Seitenleiste */
.ki-block{margin:10px 8px 4px;padding:8px 6px 6px;border-radius:12px;border:1px solid var(--ki-rand);
  background:linear-gradient(135deg,var(--ki-a) 0%,var(--ki-b) 58%,var(--ki-c) 100%)}
.ki-block .ki-kopf{display:flex;align-items:center;gap:8px;padding:2px 4px 6px}
.ki-block .ki-kopf b{font-size:12.5px;letter-spacing:-.005em;color:var(--ink)}
.ki-neu{margin-left:auto;font-size:10.5px;font-weight:600;line-height:1;padding:4px 7px;border-radius:20px;color:var(--surface);background:var(--acc)}
.ki-eintrag{display:flex;align-items:center;gap:9px;width:100%;padding:6px 7px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--ink);font-size:13.5px;text-align:left;cursor:pointer}
.ki-eintrag:hover,.ki-eintrag:focus-visible{background:var(--ki-hover)}
.ki-eintrag .sym{width:16px;height:16px;color:var(--acc)}
.ki-block-hinweis{margin:0;padding:2px 7px 4px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.ki-kbd{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--ki-rand);border-radius:5px;padding:0 5px;
  background:var(--ki-hover);white-space:nowrap}
/* Eingeklappte Seitenleiste (schmaler als 130 px — das Skript setzt .ki-eng): nur die Zeichen. */
.ki-block.ki-eng{padding:6px 4px;margin:8px 6px 4px}
.ki-block.ki-eng .ki-text{display:none}
.ki-block.ki-eng .ki-kopf{justify-content:center;padding:2px 0 4px}
.ki-block.ki-eng .ki-eintrag{justify-content:center;padding:7px 0}
/* Bringt der Rahmen schon einen Kasten mit Abstand mit (.kiplatz im Rahmen von 3.21), hat der Block selbst keinen. */
.kiplatz > .ki-block,.kiplatz > .ki-block.ki-eng{margin:0}

/* Chat-Schublade */
.ki-chat{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(430px,100vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-lg)}
.ki-chat-kopf{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 14px;border-bottom:1px solid var(--ki-rand);
  background:linear-gradient(135deg,var(--ki-a),var(--ki-b) 60%,var(--ki-c))}
.ki-chat-titel{display:flex;align-items:center;gap:9px;font-size:14px}
.ki-chat-zu{margin-left:auto}
.ki-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:12px}
.ki-chips-text{color:var(--ink-3)}
.ki-chip{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:20px;padding:3px 10px;font-size:12px;cursor:pointer;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ki-chip.an{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);font-weight:600;cursor:default}
.ki-verlauf{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.ki-willkommen{padding:12px 14px;border-radius:var(--r);border:1px dashed var(--ki-rand);background:var(--surface-2);font-size:13px}
.ki-willkommen p{margin:4px 0 0;color:var(--ink-2)}
.ki-nachricht{max-width:92%;border-radius:12px;padding:9px 12px;font-size:13.5px;line-height:1.5}
.ki-nachricht p{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.ki-frage{align-self:flex-end;background:var(--ki-frage);border:1px solid var(--acc-line);border-bottom-right-radius:4px}
.ki-antwort{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.ki-antwort .ki-text{white-space:pre-line;overflow-wrap:anywhere}
.ki-fehler{background:var(--warn-soft);border-color:transparent;color:var(--ink)}
.ki-link{display:inline-flex;align-items:center;gap:4px;margin:2px 2px;padding:1px 8px;border-radius:20px;border:1px solid var(--acc-line);
  background:var(--acc-soft);color:var(--acc);font-weight:600;font-size:12.5px;white-space:nowrap;text-decoration:none}
.ki-link::after{content:"→";font-weight:400}
.ki-link:hover{border-color:var(--acc)}
.ki-quellen{margin-top:7px;font-size:11.5px;color:var(--ink-3)}
.ki-quellen a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2)}
.ki-aktionen{display:flex;gap:2px;margin-top:6px}
.ki-aktion{display:inline-grid;place-items:center;width:26px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--ink-3);cursor:pointer}
.ki-aktion .sym{width:14px;height:14px}
.ki-aktion:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
.ki-aktion.an{color:var(--acc)}
.ki-aktion-text{width:auto;padding:0 7px;font-size:11.5px;font-weight:600}
.ki-aktion:disabled{cursor:default}
.ki-denkt{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:12.5px}
.ki-punkte{display:inline-block;width:18px;height:6px;background:radial-gradient(circle,var(--acc) 2.2px,transparent 2.6px) 0 0/6px 6px repeat-x;
  animation:ki-puls 1.1s ease-in-out infinite}
@keyframes ki-puls{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ki-punkte{animation:none}}
.ki-vorschlaege{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.ki-vorschlag{border:1px solid var(--ki-rand);background:linear-gradient(135deg,var(--ki-a),var(--ki-b));color:var(--ink);border-radius:20px;
  padding:5px 11px;font-size:12.5px;cursor:pointer;text-align:left}
.ki-vorschlag:hover{border-color:var(--acc)}
.ki-eingabe{border-top:1px solid var(--line);padding:10px 12px 6px;background:var(--surface)}
.ki-eingabe textarea{width:100%;resize:none;min-height:46px;max-height:160px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:8px 10px;background:var(--surface);color:var(--ink);font-size:13.5px;line-height:1.45}
.ki-eingabe textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.ki-eingabe-unten{display:flex;align-items:center;gap:8px;margin-top:6px}
.ki-zeichenzahl{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.ki-senden{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.ki-senden .sym{width:14px;height:14px}
.ki-chat-fuss{margin:0;padding:0 14px 10px;font-size:11px;color:var(--ink-3)}
@media (max-width:640px){
  .ki-chat{width:100vw;border-left:0}
  .ki-nachricht{max-width:100%}
}

/* Dein CRM (3.24): Mikrofon, Vorlesen, Stimme und Verlauf, Entwurfskarten, Anrufen */
.ki-chat-einst{margin-left:auto}
.ki-chat-einst:not([hidden]) + .ki-chat-zu{margin-left:0}
.ki-chat-einst.an{color:var(--acc)}
.ki-einstellungen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;padding:10px 14px 12px;
  border-bottom:1px solid var(--line);background:var(--surface-2);font-size:12.5px}
.ki-einst-titel{grid-column:1/-1;font-size:12.5px}
.ki-einstellungen label{color:var(--ink-2)}
.ki-einstellungen select{width:100%;min-width:0;padding:4px 6px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:12.5px}
.ki-einst-tempo{display:flex;align-items:center;gap:8px}
.ki-einst-tempo input{flex:1;min-width:0;accent-color:var(--acc)}
.ki-einst-wert{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);min-width:42px;text-align:right}
.ki-einst-knoepfe{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.ki-einst-hinweis{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--ink-3)}
.ki-einst-diktat{grid-column:1/-1;display:flex;gap:6px;align-items:center;font-size:12.5px;margin:0}
/* 3.24.2 Teil 8d — Hinweis im Chat (Kontingent der Sprachausgabe), nicht im Verlauf */
.ki-notiz{margin:6px 0 2px;padding:7px 10px;border-radius:8px;background:var(--surface-2);font-size:12px;color:var(--ink-2);border-left:3px solid var(--warn)}
.ki-beispiele{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:12.5px}
.ki-beispiele li{margin:2px 0}
.ki-gehoert .sym{width:12px;height:12px;margin-right:5px;vertical-align:-1px;color:var(--acc)}
.ki-mikro{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:30px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink-2);cursor:pointer}
.ki-mikro .sym{width:16px;height:16px}
.ki-mikro:hover:not(:disabled),.ki-mikro:focus-visible{border-color:var(--acc);color:var(--acc)}
.ki-mikro.an{border-color:var(--crit);background:var(--crit-soft);color:var(--crit);animation:ki-puls 1.1s ease-in-out infinite}
.ki-mikro:disabled{opacity:.5;cursor:default}
.ki-gespraech{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:30px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);cursor:pointer}
.ki-gespraech .sym{width:16px;height:16px}
.ki-gespraech:hover:not(:disabled),.ki-gespraech:focus-visible{border-color:var(--acc);color:var(--acc)}
.ki-gespraech.an{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);animation:ki-puls 1.6s ease-in-out infinite}
.ki-gespraech:disabled{opacity:.5;cursor:default}
.ki-hoerhinweis{min-width:0;font-size:11.5px;line-height:1.3;color:var(--ink-3)}
.ki-entwurf{margin-top:8px;border:1px solid var(--ki-rand);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.ki-entwurf-kopf{display:flex;align-items:center;gap:8px;padding:7px 10px;background:linear-gradient(135deg,var(--ki-a),var(--ki-b));font-size:13px}
.ki-entwurf-stand{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ki-entwurf dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;margin:0;padding:8px 10px;font-size:12.5px}
.ki-entwurf dt{color:var(--ink-3)}
.ki-entwurf dd{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.ki-entwurf-hinweis{margin:0;padding:0 10px 8px;font-size:12px;color:var(--warn)}
.ki-entwurf-knoepfe{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px}
.ki-entwurf-ergebnis{padding:0 10px;font-size:12.5px;white-space:pre-line;overflow-wrap:anywhere}
.ki-entwurf-ergebnis:not(:empty){padding-bottom:10px}
.ki-entwurf[data-stand="erledigt"]{border-color:var(--good)}
.ki-entwurf[data-stand="erledigt"] .ki-entwurf-stand{color:var(--good)}
.ki-entwurf[data-stand="verworfen"],.ki-entwurf[data-stand="abgelaufen"]{opacity:.72}
.ki-entwurf[data-stand="fehler"] .ki-entwurf-stand,.ki-entwurf[data-stand="fehler"] .ki-entwurf-ergebnis{color:var(--crit)}
.ki-anrufen{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.ki-anruf{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--acc-line);border-radius:var(--r-sm);background:var(--acc-soft);
  color:var(--acc);font-size:12.5px;font-weight:600;text-decoration:none}
.ki-anruf:hover,.ki-anruf:focus-visible{border-color:var(--acc)}
.ki-anruf .sym{width:14px;height:14px;flex:0 0 14px}
.ki-anruf small{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--ink-2);white-space:nowrap}
.ki-oeffnen{margin:6px 0 0}

/* KI in der Akte */
.ki-akte{margin:0 0 14px;border:1px solid var(--ki-rand);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(135deg,var(--ki-a),var(--ki-b) 62%,var(--ki-c))}
.ki-akte-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 12px}
.ki-akte-hinweis{font-size:12px;color:var(--ink-3)}
.ki-akte .ki-knopf{border-color:var(--acc-line)}
.ki-karte{background:var(--surface);border-top:1px solid var(--ki-rand);padding:12px 14px}
.ki-karte-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:8px;font-size:13px}
.ki-karte-zeit{font-size:11.5px;color:var(--ink-3)}
.ki-karte-kopf .btn{margin-left:auto}
.ki-abschnitte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.ki-abschnitt{min-width:0}
.ki-abschnitt[data-ki-abschnitt="weiter"],.ki-abschnitt[data-ki-abschnitt="text"]{grid-column:1/-1}
.ki-abschnitt-titel{display:block;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.ki-abschnitt p{margin:0;font-size:13px;overflow-wrap:anywhere}
.ki-abschnitt ul{margin:0;padding-left:17px;font-size:13px}
.ki-abschnitt li{overflow-wrap:anywhere}
.ki-abschnitt[data-ki-abschnitt="weiter"] p{font-weight:600;color:var(--acc)}
.ki-karte-fuss{margin:10px 0 0;font-size:11px;color:var(--ink-3)}
.ki-notizknopf{margin-left:6px;border:0;background:transparent;padding:0;font-size:11.5px;font-weight:600;color:var(--acc);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ki-notizknopf:disabled{color:var(--ink-3);text-decoration:none;cursor:default}
.ki-karte-warten{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--ink-3)}
.ki-karte-fehler{margin:0;font-size:13px;color:var(--warn)}
.ki-akte-aus{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:7px 10px;border:1px dashed var(--ki-rand);border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-2)}
.ki-akte-aus a{color:var(--acc);font-weight:600}
@media (max-width:640px){.ki-abschnitte{grid-template-columns:minmax(0,1fr)}.ki-akte-hinweis{display:none}}

/* Mit KI ausfüllen */
.ki-feldknopf{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:3px 9px 3px 4px;border-radius:20px;border:1px solid var(--ki-rand);
  background:linear-gradient(135deg,var(--ki-a),var(--ki-b));color:var(--ink);font-size:12px;cursor:pointer}
.ki-feldknopf .ki-zeichen{width:18px;height:18px;flex-basis:18px;border-radius:50%}
.ki-feldknopf .ki-zeichen .sym{width:11px;height:11px}
.ki-feldknopf:hover{border-color:var(--acc)}
.ki-feldknopf:disabled{opacity:.6;cursor:wait}
.ki-feldhinweis{display:inline-block;margin:4px 0 0 8px;font-size:12px;color:var(--ink-3)}
.ki-feldhinweis.fehler{color:var(--warn)}
/* In der Karte „Felder" der Akte (3.21) steht der Knopf in einer schmalen Spalte neben dem Wert: dort nur das Zeichen
   (der Name bleibt für Vorleser und als Hinweis beim Darüberfahren), der Hinweis in einer eigenen Zeile darunter. */
[data-fk-feld] dd:has(> .ki-feldknopf){flex-wrap:wrap}
[data-fk-feld] dd:has(> .ki-feldknopf) > details{flex:1 1 0}
[data-fk-feld] dd > .ki-feldknopf{flex:none;margin-top:3px;padding:3px;gap:0}
[data-fk-feld] dd > .ki-feldknopf > span:not(.ki-zeichen){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-fk-feld] dd > .ki-feldhinweis{flex:1 0 100%;margin:2px 0 4px}

/* Tagesüberblick (Kachel auf der Übersicht) */
.ki-tageskarte .cardhead{background:linear-gradient(135deg,var(--ki-a),var(--ki-b) 65%,var(--ki-c));border-radius:var(--r) var(--r) 0 0}
/* Die Übersicht von 3.21 setzt vor jeden Kacheltitel einen Farbstrich — hier trägt schon der Kopf die Farbe der KI. */
.ukachel.fremd > .card.ki-tageskarte > .cardhead h3::before{display:none}
.ki-tag-liste{margin:0;padding-left:18px;font-size:13px;line-height:1.55}

/* Einstellungen → KI-Assistent */
.ki-einst{max-width:880px}
.ki-einst p{font-size:13.5px;margin:0 0 10px}
.ki-stand{margin-left:auto;font-size:11.5px;font-weight:600;border-radius:20px;padding:2px 9px;background:var(--surface-3);color:var(--ink-3)}
.ki-stand.an{background:var(--good-soft);color:var(--good)}
.ki-datenschutzhinweis{border:1px solid var(--ki-rand);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--ki-a),var(--ki-b) 70%,var(--ki-c))}
.ki-datenschutzhinweis p{margin:6px 0 0;font-size:13px;color:var(--ink-2)}
.ki-erlauben{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ki-erlauben p{flex-basis:100%}
.ki-haken{display:flex;align-items:center;gap:8px;font-size:13px}
.ki-verbrauch{font-size:13.5px}
.ki-verbrauch b{font-family:var(--mono);font-size:18px}
.ki-balken{height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:8px}
.ki-balken span{display:block;height:100%;background:linear-gradient(90deg,var(--ki-zeichen-a),var(--ki-zeichen-b))}

/* Hilfe-Seite */
.hilfe-suche{display:flex;align-items:center;gap:8px;max-width:760px;margin-bottom:16px;padding:6px 6px 6px 12px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.hilfe-suche > .sym{width:16px;height:16px;color:var(--ink-3);flex:0 0 16px}
.hilfe-suche input{flex:1;min-width:0;border:0;background:transparent;font-size:14px;padding:6px 0}
.hilfe-suche input:focus{outline:none}
.ki-fragen-knopf{display:inline-flex;align-items:center;gap:6px;border-color:var(--ki-rand);background:linear-gradient(135deg,var(--ki-a),var(--ki-b))}
.ki-fragen-knopf .sym{width:14px;height:14px;color:var(--acc)}
.hilfe-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-items:start}
.hilfe-gitter .card{margin:0}
.hilfe-liste{list-style:none;margin:0;padding:4px 0}
.hilfe-liste li a{display:block;padding:8px 14px;font-size:13.5px;color:var(--ink)}
.hilfe-liste li a:hover{background:var(--surface-2);color:var(--acc)}
.hilfe-liste li a .muted{display:block;font-size:12.5px;margin-top:2px}
.hilfe-liste.kurz li a{padding:6px 14px}
.hilfe-neu{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:20px;background:var(--plum-soft);color:var(--plum);vertical-align:1px}
.hilfe-pfad{margin:0 0 4px !important;font-size:12px}
.hilfe-pfad a{color:var(--acc)}
.hilfe-spalten{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start;max-width:1100px}
.hilfe-text{font-size:14px;line-height:1.6}
.hilfe-text p{margin:0 0 10px}
.hilfe-text ul,.hilfe-text ol{margin:0 0 12px;padding-left:20px}
.hilfe-text li{margin:3px 0}
.hilfe-fett{font-weight:600}
.ki-hinweiskarte p{margin:4px 0 10px;font-size:12.5px}
@media (max-width:900px){.hilfe-spalten{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.hilfe-suche{flex-wrap:wrap}.hilfe-suche input{flex-basis:70%}}

/* ── Zusammenführung (3.21) ── */
/* „KI füllt dieses Feld aus" nur bei Feldarten, die die KI füllen kann (App\Services\Ki\KiFelder::ARTEN). */
.ff-angaben:not(:has(input[name="typ"]:is([value="text"],[value="mehrzeilig"],[value="zahl"],[value="betrag"],[value="datum"],[value="auswahl"],[value="mehrfach"],[value="janein"],[value="link"],[value="email"],[value="telefon"],[value="katalog"],[value="prozent"],[value="bewertung"],[value="uhrzeit"],[value="datumzeit"]):checked)) .ff-nur-ki{display:none}
.strom-aktion{margin-top:6px}
.strom-aktion:empty{display:none}
/* Karte „Felder" im Steckbrief der Akte: Rahmen, Titel und „+" gibt die Akte; die Karte zeigt darunter nur den Stand. */
.akte2-karte-rumpf .fk-karte{border:0;box-shadow:none;background:transparent;margin:0;border-radius:0}
.akte2-karte-rumpf .fk-kopf{padding:0 14px 6px;border:0;min-height:0;background:transparent}
.akte2-karte-rumpf .fk-kopf h3,.akte2-karte-rumpf .fk-kopf > .fn-knopf{display:none}
.akte2-karte-rumpf .fk-kopf:not(:has(.fk-stand)){display:none}
/* Im schmalen Steckbrief brechen lange Feldnamen um, statt abgeschnitten zu werden („Auftragsart", „Einsatzadresse"). */
.akte2-karte-rumpf .fk-zeile{grid-template-columns:minmax(96px,42%) minmax(0,1fr)}
.akte2-karte-rumpf .fk-zeile dt{align-items:flex-start;position:relative}
.akte2-karte-rumpf .fk-name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;hyphens:auto}
/* Der Stift zum Bearbeiten des Felds nimmt dem Namen keinen Platz weg: Er liegt beim Zeigen über dem Ende der Zeile. */
.akte2-karte-rumpf .fk-def{position:absolute;right:0;top:7px;background:var(--surface);border-radius:6px}


/* ── Fenster in der Mitte, Akte schlicht in zwei Spalten (3.21.1) ── */
/*
 * Tristan (08.10.2026, mit Bildern von Close): „so simpel wie hier, nur etwas anders … mit zu Salesfy passendem Design
 * und Farben. Wenn man etwas öffnet (Kunden) — so; und wenn man was ändern oder anlegen muss und es muss sich was
 * öffnen — dann so" (ein kleines Fenster in der Mitte).
 *
 * 1. Das Seitenfenster (#panel) steht nicht mehr rechts am Rand, sondern als Fenster in der Mitte: so breit, wie der
 *    Inhalt braucht (Formulare 720 px, schmale 460 px, Akten bis 1200 px), oben und unten Luft, abgerundet; der Inhalt
 *    rollt innen. Am Handy füllt es den Schirm. Läuft ein Gespräch, rückt es nach links und die Anrufbox bleibt frei.
 * 2. Die Akte hat zwei Spalten: links die Karten untereinander (Über, Felder, Aufgaben …), rechts die Bereiche als
 *    Reiter (Verlauf, Übersicht, Termine …) und darunter das offene Blatt. Der Kopf steht in einer Zeile, der Stufenweg
 *    schmal darunter. Im „Ansicht anpassen" steht das Menü wie bisher senkrecht (zum Ziehen).
 */

/* 1. Das Fenster */
#panel{--panelbreite:min(720px,100%)}
#panel.an{display:flex;align-items:center;justify-content:center;padding:max(16px,4vh) 24px}
#panel .panelbox{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:var(--panelbreite);max-width:100%;max-height:100%;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--schatten-mitte-gross);animation:fensterrein .16s cubic-bezier(.22,.8,.3,1)}
@keyframes fensterrein{from{transform:translateY(10px) scale(.985);opacity:0}to{transform:none;opacity:1}}
#panel .panelkopf{padding:11px 14px 11px 20px}
#panel .panelinhalt{min-height:0;padding:18px 20px 20px}
#panel .panelinhalt .panelfuss{margin:18px -20px -20px;bottom:-20px;padding:12px 20px}
#panel.schmal .panelbox{width:min(460px,100%)}
#panel:has(.akte2){--panelbreite:min(1200px,100%)}
#panel:has(.akte2) .panelbox{height:100%}
@media (min-width:901px){
  html.panel-an:has(.callbox) #panel.an{padding-right:376px}
  html.panel-an:has(.callbox) #panel{--panelbreite:min(720px,100%)}
  html.panel-an:has(.callbox) #panel:has(.akte2){--panelbreite:min(1200px,100%)}
  html.panel-an .callbox,html.panel-an:has(#panel .akte2) .callbox{right:18px}
}
@media (max-width:640px){
  #panel.an{padding:0}
  #panel .panelbox{width:100%;height:100%;max-height:none;border:0;border-radius:0}
}
@media (prefers-reduced-motion:reduce){#panel .panelbox{animation:none}}

/* Akte als ganze Seite: „Zurück zur Liste" und Blättern */
.akteliste{display:flex;align-items:center;gap:10px;margin:-6px 0 10px;min-width:0}
.akteliste-zurueck{display:inline-flex;align-items:center;gap:3px;padding:4px 9px 4px 4px;border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-3);text-decoration:none;min-width:0}
.akteliste-zurueck span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akteliste-zurueck:hover{background:var(--surface-3);color:var(--ink)}
.akteliste-zurueck .sym{width:15px;height:15px;flex:none}
.akteliste .panelnav{margin-left:auto}

/* 2. Kopf: eine Zeile, Knöpfe kompakt, der Stufenweg als schmale Leiste */
.akte2 > .aktenkopf{gap:4px 14px;margin:0 0 16px;padding:0 0 14px}
.akte2 > .aktenkopf .kennbild.gross{width:46px;height:46px;border-radius:13px;font-size:16px;margin-top:1px}
.akte2 > .aktenkopf h1{font-size:22px;margin:0}
.panelinhalt .akte2 > .aktenkopf h1{font-size:20px}
.akte2 > .aktenkopf .herkunft{font-size:12.5px;margin-top:2px}
.akte2 .aktenkopf-zeichen{margin-top:6px}
.akte2-knoepfe{max-width:none;gap:5px}
.akte2-knoepfe > .btn,.akte2-knoepfe .akte2-knopf-form .btn,.akte2-knoepfe .akteneu > summary,.akte2-knoepfe .akte2-mehr > summary{padding:6px 10px;font-size:12.5px}
.akte2-knoepfe .akte2-mehr > summary{padding:6px 8px}
.akte2 > .aktenkopf .stufenweg{margin-top:12px;padding:9px 14px 7px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.akte2 > .aktenkopf .stufenweg.viele li.jetzt .stufenweg-name{background:var(--surface)}

/* Zwei Spalten: links die Karten, rechts Reiter und Blatt */
@container akte2 (min-width:760px){
  .akte2-rumpf{grid-template-columns:minmax(250px,300px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:14px 22px;
    grid-template-areas:"steck menue" "steck haupt"}
  .akte2-steck{display:flex;flex-direction:column;gap:12px;grid-area:steck;min-width:0}
  .akte2-steck > .akte2-links{order:1}
  .akte2-steck > .akte2-rechts{order:2}
  .akte2.anpassen .akte2-rumpf{grid-template-columns:minmax(250px,300px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"menue haupt" "steck haupt"}

  .akte2:not(.anpassen) .reiterleiste{display:flex;align-items:flex-end;gap:6px;border-bottom:1px solid var(--line);min-width:0}
  .akte2:not(.anpassen) .tabs.akte2-menue{flex:1;flex-direction:row;align-items:flex-end;gap:0;overflow-x:auto;scrollbar-width:none;padding:0;min-width:0}
  .akte2:not(.anpassen) .tabs.akte2-menue::-webkit-scrollbar{display:none}
  .akte2:not(.anpassen) .akte2-menue [role=tab]{width:auto;flex:none;padding:8px 11px 10px;border:0;border-radius:0;background:none;box-shadow:none;font-size:13px;color:var(--ink-3)}
  .akte2:not(.anpassen) .akte2-menue [role=tab]:hover{color:var(--ink);background:none;box-shadow:inset 0 -2px 0 var(--line-2)}
  .akte2:not(.anpassen) .akte2-menue [role=tab][aria-selected="true"]{color:var(--ink);font-weight:600;background:none;box-shadow:inset 0 -2px 0 var(--acc)}
  .akte2:not(.anpassen) .akte2-menue [role=tab][aria-selected="true"]::before{display:none}
  .akte2:not(.anpassen) .akte2-menue .akte2-menue-z{display:none}
  .akte2:not(.anpassen) .akte2-menue [role=tab] .n{margin-left:6px}
  .akte2:not(.anpassen) .akte2-menue-mehr{display:flex;align-items:flex-end;margin:0;padding:0;border:0}
  .akte2:not(.anpassen) .akte2-menue-mehr > summary{padding:8px 11px 10px;font-size:13px;color:var(--ink-3);white-space:nowrap;border-radius:0}
  .akte2:not(.anpassen) .akte2-menue-mehr > summary:hover{background:none;color:var(--ink)}
  .akte2:not(.anpassen) .akte2-menue-mehr > summary::after{margin-left:6px}
  .akte2:not(.anpassen) .akte2-anpassen-knopf{width:auto;flex:none;margin:0 0 5px;padding:6px 7px}
  .akte2:not(.anpassen) .akte2-anpassen-knopf span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@container akte2 (min-width:1120px){
  .akte2-rumpf{grid-template-columns:330px minmax(0,1fr);grid-template-rows:auto 1fr;gap:14px 26px;grid-template-areas:"steck menue" "steck haupt"}
  .akte2.anpassen .akte2-rumpf{grid-template-columns:330px minmax(0,1fr);grid-template-areas:"menue haupt" "steck haupt"}
}

/* Karten links: Kopf leicht abgesetzt, wie Fächer eines Steckbriefs */
.akte2-steck .akte2-karte > summary{background:var(--surface-2);border-radius:var(--r) var(--r) 0 0}
.akte2-steck .akte2-karte:not([open]) > summary{border-radius:var(--r)}
.akte2-steck .akte2-karte[open] > summary{border-bottom:1px solid var(--line);margin-bottom:8px}
.akte2-steck .akte2-karte > summary:hover{background:var(--surface-3)}

/* „Feld hinzufügen" in „Über" */
.ueber-feldneu{margin-top:8px}
.ff-laden-lang{margin:14px 0 0;font-size:12.5px;color:var(--ink-3)}
.ff-laden-lang a{color:var(--acc);font-weight:600}

/* 3. Seitenleiste kurz (3.21.1): links nur die Bereiche, unten eine Reihe Zeichen (Einstellungen, Seitenleiste,
      Hell/Dunkel, Hilfe) wie bei Close. Die Leiste ist etwas breiter, damit die Bereiche Luft haben. */
.app{grid-template-columns:252px 1fr}
nav.navwrap{padding:12px 10px}
.bereiche .navitem.bereich{padding:7px 10px;font-size:13.5px;gap:10px}
.railunten{flex:none;display:flex;align-items:center;gap:2px;padding:8px 10px;border-top:1px solid var(--line);position:relative}
.railknopf{width:32px;height:32px;position:relative}
.railknopf.on{background:var(--acc-soft);color:var(--acc)}
.railknopf .n{position:absolute;top:1px;right:0;min-width:15px;height:15px;padding:0 4px;border-radius:9px;background:var(--acc);color:var(--auf-gruen);
  font-family:var(--mono);font-size:9.5px;line-height:15px;text-align:center}
.railunten .mdleiste{margin:0;position:static}
.railunten .mdleiste > summary{width:32px;height:32px;padding:0;justify-content:center;border-radius:var(--r-sm);color:var(--ink-3)}
.railunten .mdleiste > summary .sym{width:16px;height:16px}
.railunten .mdleiste > form{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:30;margin:0;padding:12px 12px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:10px}
.railunten .mdtitel{font-size:13px}
.mdfuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mdfuss .btn{margin-top:0}
.mdbearbeiten{font-size:12.5px;color:var(--acc)}
.mdbearbeiten:hover{text-decoration:underline}
@media (max-width:900px){ .railunten{padding:8px 12px} }

/* 4. Schnellmenü „Übersichten" — seit 3.22 wie der Entwurf D06 in d-rahmen.css (die Regeln von 3.21.1 hätten dort
   eine zweite Hervorhebung beim Überfahren gezeichnet). */

/* ══ Grundstil der Oberfläche D „Ruhig" für alle Seiten (3.22) ══════════════════════════════════════════════════
   Tristan zu D: „ruhig wie Close, mit Konturen; Salesfy-Grün mit Verlauf als Akzent". Seiten, die niemand nach D
   umbaut (Formulare, Landingpages, Buchung, Kasse, Zeiten, Kurse, Fristen, Bedarf, Beziehungen, Aktivitäten,
   Freigaben, Betreiber-Bereich …), sehen über diese Regeln wie D aus: grauer Seitengrund, weiße Karten mit Haarlinie
   und ruhigem Schatten, graue Tabellenköpfe in normaler Schrift, Hauptknopf mit Verlauf, Reiter mit grünem Strich,
   Marken mit feiner Kontur. Nur die Variablen des Programms (hell und dunkel ändern sich mit); die hellen Werte von D
   stehen oben in :root, die dunklen gelten weiter wie bisher. */
/* Seite: grauer Grund, Inhalt mit Luft wie im Entwurf (16 px oben, 24 px seitlich) */
body{font-size:13.5px}
.scroll{padding:0 24px 56px}
.view{padding-top:18px}
h1{font-size:19px;font-weight:600;letter-spacing:-.01em}
.vhead{margin-bottom:14px;align-items:center}
.vhead p{font-size:13px}
.vhead .acts{align-items:center;gap:6px}

/* Karten: weiß, Haarlinie, ruhiger Schatten, grauer Kopf */
.card{border-radius:10px;border-color:var(--line);box-shadow:var(--shadow);margin-bottom:12px}
.cardhead{min-height:40px;padding:7px 10px 7px 14px;background:var(--kopf);border-bottom-color:var(--line);border-radius:10px 10px 0 0}
.cardhead h3{font-size:13px;font-weight:600;color:var(--ink-2)}
.card > .cardhead:last-child{border-bottom:0;border-radius:10px}
.stat{border-radius:10px;box-shadow:var(--shadow)}
.stat .val{font-size:20px;font-weight:600;font-family:var(--ui);letter-spacing:-.015em}

/* Tabellen: grauer Kopf in normaler Schrift, Haarlinien, Zahlen in Plex Mono */
.tablewrap{border-radius:10px;box-shadow:var(--shadow);border-color:var(--line)}
th{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);background:var(--kopf);padding:8px 12px}
td{padding:9px 12px;border-bottom-color:var(--line)}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{font-size:12px}
.cellmain b{font-weight:600}

/* Knöpfe: Kontur mit leichtem Schatten, Hauptknopf mit Verlauf */
.btn{padding:5px 11px;min-height:30px;border-color:var(--line-2);border-radius:7px;font-size:12.5px;color:var(--ink-2);box-shadow:var(--schatten-knopf)}
.btn:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{padding:3px 9px;min-height:26px;font-size:12px}
.btn.ghost{box-shadow:none}
.btn.primary,.tbbtn.primary{background:var(--verlauf);border-color:var(--rand-haupt);color:var(--auf-gruen);box-shadow:var(--schatten-haupt)}
.btn.primary:hover,.tbbtn.primary:hover{background:var(--verlauf-hover);border-color:var(--rand-haupt);color:var(--auf-gruen);filter:none}
:root[data-theme="dark"] .btn.primary,:root[data-theme="dark"] .tbbtn.primary,
:root[data-theme="dark"] .btn.primary:hover,:root[data-theme="dark"] .tbbtn.primary:hover{color:var(--auf-gruen)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary,:root:not([data-theme="light"]) .tbbtn.primary,
  :root:not([data-theme="light"]) .btn.primary:hover,:root:not([data-theme="light"]) .tbbtn.primary:hover{color:var(--auf-gruen)}}
.btn.danger{color:var(--crit)}
.tbbtn{border-color:var(--line-2);background:var(--surface);border-radius:7px;box-shadow:var(--schatten-knopf)}
.tbbtn.ghost{box-shadow:none}
.mdwahl legend{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--ink-2)}
.iconbtn{border-radius:7px}

/* Marken: feine Kontur statt voller Pille */
.chip{height:20px;padding:0 7px;border-radius:5px;font-size:11.5px;line-height:1}
.c-neutral{background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.c-acc{box-shadow:inset 0 0 0 1px var(--acc-line)}
.c-good{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 24%,transparent)}
.c-warn{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 26%,transparent)}
.c-crit{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--crit) 24%,transparent)}
.c-cool{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cool) 24%,transparent)}
.c-plum{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plum) 24%,transparent)}

/* Umschalter und Reiter wie in D: Segmente mit weißer Wahl, Text-Reiter mit grünem Strich */
.seg{background:var(--surface-3);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line)}
.seg a,.seg button{border-radius:6px}
.seg a.on,.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--schatten-knopf)}
.tabs{gap:0;border-bottom-color:var(--line-2)}
.tabs a,.tabs button{padding:8px 12px;font-weight:500;color:var(--ink-2)}
.tabs a:hover,.tabs button:hover{color:var(--ink)}
.tabs a.on,.tabs button[aria-selected="true"]{border-bottom-color:var(--acc);border-image:var(--verlauf-quer) 1}
.tabs .n{font-family:var(--ui);font-weight:600;min-width:20px;height:18px;padding:0 6px;display:inline-grid;place-items:center;border-radius:9px;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line)}

/* Felder: weiß mit Kontur, beim Schreiben ein grüner Ring */
.field label{font-size:12px;font-weight:500;color:var(--ink-2)}
.field input,.field select,.field textarea{background:var(--surface);border-color:var(--line-2);border-radius:7px;font-size:13px}
.field input:not([type=checkbox]):not([type=radio]),.field select{min-height:32px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.suche input:focus{border-color:var(--acc)}

/* Zahlen, Beträge, Datumsangaben und Kennungen in Tabellen brechen nie um; Spaltenköpfe in normaler Schrift. */
td.num,td.mono,td .mono,td time,td.datum,td.betrag{white-space:nowrap}
th.num,th.mono{font-family:var(--ui);font-size:11.5px}

/* Eingaben ohne eigene Klasse (Filter über Listen, Betreiber-Bereich …): dieselbe ruhige Kontur wie .field. Nur, wo
   sonst nichts sie gestaltet, und nicht in Seiten von D (dort gelten die Bausteine aus d.css). */
:where(.view,.panelinhalt,.modal) :where(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=number],input[type=tel],input[type=url],input[type=date],input[type=time],input[type=datetime-local],input[type=password],select,textarea):where(:not(.d *)):not([class]){
  min-height:32px;padding:5px 10px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);font-size:13px;color:var(--ink)}
:where(.view,.panelinhalt,.modal) :where(input,select,textarea):where(:not(.d *)):not([class]):focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}

/* Menüs mit Gruppen (Menü von 3.16, Betreiber-Bereich): Überschriften in normaler Schreibweise wie in D. */
.navgroup h6,.navabschnitt h6{text-transform:none;letter-spacing:0;font-size:11px;font-weight:500}
.navitem.on{background:var(--acc-soft);color:var(--acc-2)}

/* Meldungen, Hinweise, leere Zustände */
.ok,.fehler{border-radius:8px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
.hint{border-radius:8px;background:var(--surface-2);border-color:var(--line)}
.leer,.empty{color:var(--ink-3)}

/* Seitenfenster, Schublade, Fenster: weiße Köpfe, grauer Grund, ruhiger Schatten */
#panel{background:var(--schleier);backdrop-filter:none}
.panelbox{background:var(--bg);box-shadow:var(--schatten-seite)}
.panelkopf{min-height:50px;padding:10px 12px 10px 18px}
.panelkopf b{font-size:14.5px;font-weight:600}
.panelzu{border-color:var(--line-2);border-radius:7px}
.drawer{box-shadow:var(--schatten-seite)}
.dfoot,.modal>footer{background:var(--kopf)}
.modalwrap{background:var(--schleier);backdrop-filter:none}
.modal{border-radius:12px;box-shadow:var(--schatten-fenster)}
.modal>header h3{font-size:15px}
.scrim{background:var(--schleier);backdrop-filter:none}
.neuliste,.vorschlaege,.glocke-liste,.bmehrliste{border-radius:10px;box-shadow:var(--shadow-lg)}
.toast{border-radius:10px}

/* Anmeldung (auth/*, Betreiber): eine weiße Karte auf grauem Grund */
.anmeldung .box{border-radius:12px;box-shadow:var(--schatten-karte-gross)}
.anmeldung{background:var(--bg)}
.anmeldung .box{width:min(400px,100%);padding:28px 28px 24px;border-color:var(--line)}
.anmeldung .anm-titel{margin:0;font-size:19px}
.anmeldung .anm-text{margin:3px 0 16px;font-size:13px;color:var(--ink-3)}
.anmeldung .anm-betreiber{font-size:12px;font-weight:600;color:var(--plum);padding:2px 7px;border-radius:5px;background:var(--plum-soft);vertical-align:2px}
.anmeldung .field input:not([type=checkbox]){min-height:36px}
.anmeldung .btn.primary{min-height:38px;border-radius:9px;font-size:13.5px;font-weight:600}
.anmeldung a{color:var(--acc)}
.anmeldung a:hover{color:var(--acc-2);text-decoration:underline}

@media (max-width:900px){
  .scroll{padding:0 14px 48px}
  .view{padding-top:14px}
}

/* 3.23.3 — Feld mit Vorschlägen aus einer Auswahlliste (teile/listenfeld): darunter „In die Auswahl aufnehmen" (nur bei
   neuem Text) und „Liste bearbeiten". */
.listenfeld{display:block}
.listenfeld > input{width:100%}
.listenfeld-unter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;font-size:11.5px;color:var(--ink-3)}
.listenfeld-merken{display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin:0;font-weight:400}
.listenfeld-merken[hidden]{display:none}
.listenfeld-merken input{margin:0;width:auto}
.listenfeld-liste{margin-left:auto;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.listenfeld-liste:hover{color:var(--acc)}
.listenfeld-unter[hidden]{display:none}

/* ══ Profilmenü (3.24.4) ══════════════════════════════════════════════════════════════════════════════════════════
   Oben rechts im CRM und in den eigenen Oberflächen (Konto, Einrichtung): das Kürzel im Kreis, darunter Name, Adresse,
   Konto und die Wege — Mein Profil, Konto & Abo verwalten, Einrichtung, Abmelden. Nur Variablen (hell und dunkel). */
.profilmenue{position:relative;flex:none;margin-left:4px}
.profilmenue > summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font:600 11px/1 var(--ui);letter-spacing:.02em;color:var(--acc-2);background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-line);user-select:none}
.profilmenue > summary::-webkit-details-marker{display:none}
.profilmenue > summary:hover,.profilmenue[open] > summary{color:var(--surface);background:var(--acc);box-shadow:none}
.profilmenue > summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.profilmenue .pm-liste{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:272px;padding:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.profilmenue .pm-wer{display:flex;gap:10px;align-items:center;padding:8px 8px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.profilmenue .pm-gross{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:600 13px/1 var(--ui);
  color:var(--surface);background:var(--verlauf)}
.profilmenue .pm-name{min-width:0;display:flex;flex-direction:column;gap:1px}
.profilmenue .pm-name b{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profilmenue .pm-name span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profilmenue .pm-name .pm-firma{color:var(--ink-2)}
.profilmenue .pm-zeile{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border:0;border-radius:var(--r-sm);background:none;
  font:inherit;font-size:13px;color:var(--ink-2);text-align:left;text-decoration:none;cursor:pointer}
.profilmenue .pm-zeile svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.profilmenue .pm-zeile:hover,.profilmenue .pm-zeile:focus-visible{background:var(--surface-3);color:var(--ink);outline:none}
.profilmenue .pm-zeile.an{color:var(--acc-2);background:var(--acc-soft)}
.profilmenue .pm-ab{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--line)}
@media (max-width:600px){.profilmenue .pm-liste{position:fixed;right:10px;left:10px;top:56px;width:auto}}
/* Foto statt Kürzel (3.24.4 Teil 4) */
.profilmenue > summary img,.profilmenue .pm-gross img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.profilmenue > summary:has(img){background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}

/* ══ Mein Profil (3.24.4 Teil 4) ══════════════════════════════════════════════════════════════════════════════════
   Seitenfenster aus dem Profilmenü (ohne Skript eine ganze Seite): Kopf mit Foto, darunter je Thema eine Karte. */
.pf{display:flex;flex-direction:column;gap:14px;max-width:760px}
.pf-kopf{display:flex;align-items:center;gap:14px;padding:4px 2px 6px}
.pf-foto{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;font:600 20px/1 var(--ui);
  color:var(--surface);background:var(--verlauf)}
.pf-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pf-wer{min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-wer b{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-wer span{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-wer .pf-rolle{color:var(--ink-2)}
.pf-teil{margin:0}
.pf-teil .cardhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-teil .cardhead .sub{font-size:12px;color:var(--ink-3)}
.pf-teil .cardhead .chip{margin-left:auto}
.pf-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pf-zeile input[type=file]{flex:1;min-width:0;max-width:100%;font-size:13px}
.pf-text{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.pf-schalter{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column}
.pf-schalter li{border-bottom:1px solid var(--line)}
.pf-schalter li:last-child{border-bottom:0}
.pf-schalter .pf-trenner{margin-top:6px;border-top:1px solid var(--line-2)}
.pf-schalter li:has(+ .pf-trenner){border-bottom:0}
.pf-schalter label{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;cursor:pointer}
.pf-schalter input{margin-top:3px;flex:none;accent-color:var(--acc)}
.pf-schalter label > span{display:flex;flex-direction:column;gap:1px;min-width:0}
.pf-schalter b{font-size:13.5px;font-weight:600;color:var(--ink)}
.pf-schalter label > span > span{font-size:12px;line-height:1.45;color:var(--ink-3)}
.pf-zwei{gap:12px}
.pf-rechte{margin-top:10px}
.pf-rechte summary{cursor:pointer;font-size:13px;color:var(--acc-2)}
.pf textarea{width:100%;box-sizing:border-box;font:13px/1.5 var(--ui)}