/* Basis-CSS D2a · Technik, dann die Kaskade aus docs/design/d2a.css (Reihenfolge erhalten: D, Teamfarben, D2, Kopfleiste). Tokens stehen in tokens.css. */
/* Inhalt (die Kaskade gilt von oben nach unten, spätere Abschnitte überstimmen frühere):
   1 Technik · 2 D (Rahmen, Kopf, Knöpfe, Marken, Bündel, Detail, Tagesblatt, Gespräche, Karte, Räume, Handy)
   3 D drei Bahnen und Teamfarben · 4 D2 Flächen, Trenner, Marken nur als Linien, Auslage-Kopf, Zustände
   5 D2 Kopfleiste, Klappmenüs, Bahnen unter der Kopfleiste, Handy-Leiste · 6 Dao-Ergänzungen (gesperrter Haken,
   Platzhalter, Fehlerseite, Überblick, Suche, ohne Konto) */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-999px;top:auto}
/* Knopfmaße zentral (Thomas 31.10.: „die Größe können wir später einfach ändern“) · sichtbare Höhe hier, die Tippfläche
   am Handy bleibt über .knopf::before unsichtbar bei --tippflaeche */
:root{--knopf-hoehe:34px;--knopf-hoehe-handy:36px;--knopf-polster:6px 14px;--knopf-schrift:.85rem;--tippflaeche:44px;--feld-hoehe:32px}
/* Einzeilige Eingabefelder (Text, Datum, Zeit, Zahl, Mail, Suche, select): am Desktop einheitlich --feld-hoehe (32 px, Thomas 04.11.),
   am Handy 46 px (mindestens 44 px Tippfläche). Zentrale Regel mit Spezifität 0 (:where): Sonderregeln setzen weder Höhe noch
   senkrechtes Polster, nur Schrift, Breite und seitliches Polster. Ausgenommen: Haken, Radio, Datei, Textfeld (textarea), select mit
   Liste (multiple, size) und die Textauswahl .bk-wahl im Board. Test: tests/test_feldhoehe_css.py, Messung: oberflaeche_sicht.py felder */
:where(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=hidden],[type=submit],[type=button],[type=image],[type=reset]),select:not([multiple],[size],.bk-wahl)){box-sizing:border-box;height:var(--feld-hoehe);min-height:var(--feld-hoehe);padding-block:0;line-height:1.25}
@media (max-width:859px){:root{--feld-hoehe:46px}}
.sprung:focus{left:12px;top:8px;z-index:100;background:var(--ink);color:var(--flaeche);padding:8px 12px}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.klapp-schalter{position:absolute;opacity:0;width:1px;height:1px}
form{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.zeichen{flex:0 0 auto}
.erledigen{display:inline-flex}

body{background:var(--bg);color:var(--ink);font-family:var(--font);font-variation-settings:"wdth" 100;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration-color:var(--linie2);text-underline-offset:.22em}
a:hover{text-decoration-color:var(--signal);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:2px}
::selection{background:var(--akzent-weich)}
.mono,time{font-family:var(--font);font-variant-numeric:tabular-nums}

/* ---------- Rahmen: helle Randspalte ---------- */
.kopf{display:flex;align-items:center;gap:var(--s3);position:sticky;top:0;z-index:20;padding:10px 16px;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.marke-dao{font-family:var(--buch);font-style:italic;font-weight:600;font-size:1.6rem;line-height:1;color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;gap:3px}
.marke-dao::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.abmelden{display:flex;align-items:center;gap:10px}
.zurueck{display:none}
.haupt{padding:var(--s5) 16px var(--s7);min-width:0}
.fuss{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:var(--t-meta);padding:var(--s5) 16px}
.kopf.ohne-konto{justify-content:center;border:0;background:transparent;padding-top:48px}

@media (min-width:860px){
  .app:not(.ohne-nav){display:grid;grid-template-columns:var(--nav) minmax(0,1fr);grid-template-rows:1fr auto;min-height:100dvh}
  .app:not(.ohne-nav)>.kopf{grid-row:1/span 2;flex-direction:column;align-items:stretch;gap:0;height:100dvh;padding:28px 14px 20px;border-bottom:0;border-right:1px solid var(--linie);background:var(--flaeche)}
  .kopf .marke-dao{margin:0 12px 32px;font-size:2.1rem}
  .kopf .abmelden{margin:14px 12px 0;padding-top:14px;border-top:1px solid var(--linie);justify-content:space-between}
  .haupt{grid-column:2;padding:var(--s6) 48px var(--s7);width:100%;max-width:calc(var(--breit) + 96px)}
  .fuss{grid-column:2;padding-inline:48px}
}

/* ---------- Seitenkopf ---------- */
.seitenkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.seitentitel{font-family:var(--buch);font-weight:500;font-size:var(--t-seite);line-height:1.08;letter-spacing:-.01em;margin:0}
.untertitel{margin:var(--s1) 0 0;color:var(--ink2);font-size:.95rem}
.untertitel b{font-weight:650;font-variant-numeric:tabular-nums}
.sk-aktionen{position:relative;display:flex;gap:var(--s2)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font);font-size:var(--knopf-schrift);font-weight:600;line-height:1.2;border:1px solid var(--ink);background:var(--ink);color:var(--flaeche);
  padding:var(--knopf-polster);min-height:var(--knopf-hoehe);border-radius:var(--r);cursor:pointer;text-decoration:none;white-space:nowrap}
.knopf:hover{background:var(--ink2)}
.knopf.primaer{background:var(--signal);border-color:var(--signal);color:var(--auf-signal)}
.knopf.primaer:hover{background:var(--fokus);border-color:var(--fokus)}
.knopf.leise{background:var(--flaeche);color:var(--ink);border-color:var(--linie2)}
.knopf.leise:hover{border-color:var(--ink2);background:linear-gradient(var(--hauch),var(--hauch)),var(--flaeche)}
.knopf.gefahr{background:var(--flaeche);color:var(--ink);border:2px solid var(--ink)}
.knopf.gefahr:hover{background:var(--ink);color:var(--flaeche)}
.knopf .zeichen{width:17px;height:17px}
/* Zustände für alle Knöpfe und Schalter (03.11.): ruhiger Übergang, kurzes Eindrücken, Fokusring mit Abstand in der Form des
   Knopfs (der globale :focus-visible setzt sonst 2px Radius), gesperrt blass */
.knopf,.segment,.blaettern-k{transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}
.knopf:active:not(:disabled),.segment:active,.blaettern-k:active{transform:translateY(.5px)}
.knopf:focus-visible,.segment:focus-visible,.blaettern-k:focus-visible{outline:2px solid var(--fokus);outline-offset:2px;border-radius:var(--r)}
.knopf:disabled,.knopf[aria-disabled=true]{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.knopf,.segment,.blaettern-k{transition:none}.knopf:active,.segment:active,.blaettern-k:active{transform:none}}
/* Textknopf für Nebenaktionen („entfernen“, „rückgängig“, „Freigabe entfernen“) · nur das Wort, kein Rahmen, kein Hintergrund (Thomas 31.10.);
   am Handy bleibt die Tippfläche über ::before unsichtbar bei --tippflaeche */
.textknopf{appearance:none;position:relative;display:inline-block;padding:0;margin:0;border:0;border-radius:4px;background:none;color:var(--muted);font:inherit;font-size:var(--t-meta,.8rem);font-weight:500;line-height:inherit;
  text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px;cursor:pointer;list-style:none;min-height:0}
.textknopf::-webkit-details-marker{display:none}
.textknopf:hover,.textknopf:focus-visible{color:var(--ink);text-decoration-color:currentColor}

/* ---------- Statusmarken (leise Pillen) ---------- */
.status{display:inline-flex;align-items:center;font-size:.74rem;font-weight:600;padding:1px 9px;border-radius:999px;border:1px solid var(--linie2);color:var(--ink2);white-space:nowrap;line-height:1.6}
.status.frist-meine{border-color:var(--ink);color:var(--ink)}
.status.frist-ihre{border-style:dashed;color:var(--muted)}
.status.zustand{background:var(--flaeche3);border-color:transparent}
.status.wartet{background:var(--akzent-weich);border-color:transparent;color:var(--ink)}
.status.quelle-espo{color:var(--akzent);border-color:transparent;padding:0}
.status.quelle-dao{color:var(--ink2);border-color:transparent;padding:0}

/* ---------- Gesichter (rund), Gegenüber, Haken ---------- */
.avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;font-size:.74rem;font-weight:650;letter-spacing:.02em;background:var(--flaeche3);color:var(--ink);box-shadow:0 0 0 2px var(--flaeche),0 0 0 3.5px var(--kante,transparent)}
.avatar.gross{width:96px;height:96px;font-family:var(--buch);font-size:2.2rem;font-weight:500;box-shadow:0 0 0 4px var(--flaeche),0 0 0 7px var(--kante,var(--linie2))}
.avatar-raum{border-radius:var(--r);background:var(--kante,var(--neutral));color:var(--flaeche);box-shadow:none}
.avatar-raum:not([class*="kante-"]){color:var(--ink)}
.avatar-org{border-radius:var(--r);background:transparent;border:1px solid var(--linie2);color:var(--ink2);box-shadow:none}
.kante-dp{--kante:var(--dp)}.kante-ins{--kante:var(--ins)}
.gegenueber{display:inline-flex;align-items:center;gap:var(--s3);min-width:0;max-width:100%}
.g-text{display:flex;flex-direction:column;min-width:0}
.g-name{font-family:var(--buch);font-weight:600;font-size:var(--t-name);line-height:1.25}
.g-name a{text-decoration:none}.g-name a:hover{text-decoration:underline}
.g-typ{font-size:.78rem;color:var(--muted)}
.gegenueber.ohne{flex-direction:column;align-items:flex-start;gap:0}
.haken{display:grid;place-items:center;width:var(--zeile);height:var(--zeile);margin:-10px -6px -10px -12px;padding:0;background:none;border:0;cursor:pointer}
.haken-feld{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink2);background:var(--flaeche);transition:background .12s}
.haken:hover .haken-feld{background:var(--signal);border-color:var(--ink)}

/* ---------- Gruppen und Bündel ---------- */
.gruppe{margin:0 0 var(--s6)}
.gruppenkopf{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--linie2);font-size:var(--t-gruppe);font-weight:700;color:var(--ink)}
.gk-unter{font-weight:400;color:var(--muted);font-size:.86rem}
.gk-zahl{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink2);font-size:.9rem}
details.gruppe>summary{display:block}
details.gruppe>summary .gruppenkopf::after{content:"zeigen";order:5;font-weight:500;font-size:.82rem;color:var(--akzent)}
details.gruppe[open]>summary .gruppenkopf::after{content:"verbergen"}
.buendel{display:grid;grid-template-columns:minmax(12rem,15rem) minmax(0,1fr);gap:0 var(--s5);padding:var(--s3) 0;border-bottom:1px solid var(--linie)}
.b-liste{list-style:none;margin:0;padding:0}
.b-zeile{display:grid;grid-template-columns:34px minmax(0,1fr) 7.5rem;gap:var(--s2);align-items:center;min-height:var(--zeile);padding:4px 0;border-top:1px dashed var(--linie)}
.b-zeile:first-child{border-top:0}
.sp-haken{display:flex;justify-content:center}
.sp-was{display:flex;flex-wrap:wrap;gap:2px var(--s2);align-items:baseline;min-width:0}
.z-titel{text-decoration:none;font-size:var(--t-text);line-height:1.35}
.z-titel:hover{text-decoration:underline}
.sp-wann{text-align:right}
.termin{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.termin time{font-size:.86rem;font-weight:600}
.termin .rest{font-size:.76rem;color:var(--muted)}
.leer-wert{color:var(--muted)}

/* Leer, Hinweis, Fehler */
.leer{margin:0;padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--flaeche2);color:var(--ink2);font-size:.92rem;font-family:var(--buch);font-style:italic}
.hinweis{margin:var(--s2) 0;padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--akzent-weich);font-size:.92rem}
.fehler{border-radius:var(--r);border:2px solid var(--ink);margin:var(--s3) 0;padding:var(--s3) var(--s4);font-size:.92rem}
/* Mail-Formular · abgelehntes Senden (offene Lücken, falsche Adresse) rot über „Sofort senden“ (Thomas 29.10.) */
.mail-form .fehler{border-color:var(--v-zahl);background:color-mix(in oklch,var(--v-zahl) 10%,var(--flaeche));font-weight:600}

/* Filter, Segmente */
.filterbereich{margin:0 0 var(--s5)}
.klapp-knopf{display:none}
.filterzeile{display:flex;flex-wrap:wrap;gap:var(--s2)}
.filterzeile input,.filterzeile select{font-size:.92rem;padding:0 12px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche)}
.filterzeile input[type=search]{flex:1 1 16rem}
.filterzeile .tf-haken{display:flex;align-items:center;gap:var(--s2);font-size:.92rem;min-height:40px}
.filterzeile .tf-haken input{width:auto;min-width:20px;min-height:20px;padding:0}
.filterzeile .tf-haken .formhinweis{color:var(--ink2,inherit);font-size:.85rem}
/* Segment-Steuerung (03.11.): eine Wahl aus mehreren · eingelassene Spur mit gemeinsamer Kontur, die gewählte Wahl liegt als
   heller Daumen darauf (kein Gold, keine volle Tintenfläche: sie soll nicht wie ein zweiter Hauptknopf lesen). Pillen bleiben
   den Statusmarken und Filter-Chips vorbehalten, Wahl und Handlung haben die Knopfform. Mehrfachwahl (Kalender-Klappe) zeigt
   mehrere Daumen. Handy: jedes Segment 44 px hoch. */
.segmente{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;padding:2px;border-radius:calc(var(--r) + 2px);background:var(--spur);box-shadow:inset 0 0 0 1px var(--spur-rand);max-width:100%}
.segment{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:2px;min-height:30px;padding:4px 12px;border:0;border-radius:var(--r);background:transparent;
  font-size:.84rem;font-weight:550;line-height:1.2;color:var(--ink2);text-decoration:none;white-space:nowrap;cursor:pointer}
.segment:hover{color:var(--ink);background:var(--hauch)}
.segment.aktiv{background:var(--daumen);color:var(--ink);font-weight:650;box-shadow:0 1px 2px var(--schatten),0 0 0 1px var(--spur-rand)}

/* Ausklapp-Formulare */
.ausklapp{position:relative}
.ausklapp[open]>summary.knopf.leise{border-color:var(--ink)}
.ausklapp-form{position:absolute;z-index:15;top:calc(100% + 8px);left:0;width:min(22rem,90vw);display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r);box-shadow:0 12px 32px var(--schatten)}
.sk-aktionen .ausklapp-form{left:auto;right:0}
.ausklapp-form label,.formular label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;font-weight:600;color:var(--ink2)}
.ausklapp-form input,.formular input,.formular textarea,.entwurf textarea{font-size:1rem;padding:0 12px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink);width:100%;font-weight:400}
.ausklapp-form .knopf,.formular .knopf{align-self:flex-start}
.formhinweis{margin:0;font-size:.8rem;color:var(--muted)}
/* Knopf „Termine von diesem Absender lesen“ (Mail-Auslage): Meldung und Hinweis mit Abstand zur Von/An-Tabelle, im Dunkel
   --ink2 (nicht heller); „· rückgängig“ bleibt zusammen und ist ein unterstrichener Textknopf wie in der Kalender-Meldung */
.ta-hinweis{margin:0 0 var(--s2);color:var(--ink2)}
.ta-zurueck{white-space:nowrap}
.ta-hinweis .knopf-text{font:inherit;font-weight:650;color:var(--ink);background:none;border:0;padding:0;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
@media (max-width:859px){.ta-hinweis .knopf-text{position:relative}
  .ta-hinweis .knopf-text::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:var(--tippflaeche);transform:translateY(-50%)}}
.formular{display:flex;flex-direction:column;gap:var(--s3);max-width:28rem}

/* ---------- Detail ---------- */
.detail{max-width:var(--breit)}
.pfad{font-size:var(--t-meta);color:var(--muted);margin-bottom:var(--s4)}
.pfad a{color:var(--ink2)}
.detailkopf{margin-bottom:var(--s4)}
.dk-mitwem{margin-bottom:var(--s3)}
.detailtitel{font-family:var(--buch);font-weight:500;font-size:var(--t-detail);line-height:1.18;letter-spacing:-.005em;margin:0 0 var(--s3);text-wrap:balance;overflow-wrap:anywhere;max-width:var(--lese)}
.metazeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s2);margin:0;font-size:.9rem;color:var(--ink2)}
.trenner{color:var(--linie2)}
.aktionsleiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 0 var(--s6)}
.nachricht-aktionen{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s2);margin:0 0 var(--s5)}
.nachricht-aktionen .reihenfolge{margin:0}
.nachricht-aktionen .tf-haken{flex-direction:row;align-items:center;gap:var(--s2)}
.nachricht-aktionen .tf-haken input{width:auto;min-width:20px;min-height:20px}
@media (max-width:859px){.nachricht-aktionen .knopf{min-height:44px}.nachricht-aktionen .ausklapp[open]{flex:1 1 100%}.ist-detail .nachricht-aktionen .ausklapp-form{position:static;width:auto;margin-top:var(--s2);box-shadow:none}}
.leisten-hinweis{margin:0;font-size:.86rem;color:var(--muted)}
.detail-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,20rem);gap:var(--s6);align-items:start}
.abschnittkopf{margin:0 0 var(--s3);font-size:1rem;font-weight:700;color:var(--ink);padding-bottom:var(--s2);border-bottom:1px solid var(--linie2)}
.detail-haupt>section,.detail-seite>section{margin-bottom:var(--s6)}
.notiz{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--buch);font-size:1.08rem;line-height:1.65;max-width:var(--lese)}
.eigenschaften{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:0;margin:0}
.eigenschaften dt,.eigenschaften dd{padding:8px 0;margin:0;border-bottom:1px solid var(--linie);font-size:.88rem}
.eigenschaften dt{color:var(--muted)}
.eigenschaften dd{overflow-wrap:anywhere}
.verlauf{list-style:none;margin:0;padding:0}
.verlauf li{display:grid;grid-template-columns:12px 1fr;grid-template-areas:"punkt was" "punkt wann";column-gap:var(--s3);padding:0 0 var(--s3);position:relative}
.verlauf li::before{content:"";grid-area:punkt;width:10px;height:10px;border-radius:50%;background:var(--signal);margin-top:8px}
.verlauf li:not(:last-child)::after{content:"";position:absolute;left:4.5px;top:22px;bottom:-2px;width:1px;background:var(--linie2)}
.verlauf .was{grid-area:was;font-weight:550}
.verlauf .wann{grid-area:wann;font-size:.8rem;color:var(--muted)}
.verlauf .wer{display:none}

/* ---------- Tagesblatt als Brief ---------- */
.s-tagesblatt .seitentitel{font-size:clamp(2.2rem,1.6rem + 2.2vw,3.2rem)}
.impulse,.gespraeche-liste{list-style:none;margin:0;padding:0}
.impuls-zeile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--linie)}
.impuls-zeile .avatar{width:44px;height:44px;font-size:.84rem}
.i-text{display:flex;flex-direction:column;min-width:0}
.i-name{font-family:var(--buch);font-weight:600;font-size:1.12rem;text-decoration:none}.i-name:hover{text-decoration:underline}
.i-anlass{font-size:.84rem;color:var(--muted)}

/* ---------- Gespräche · Briefwechsel ---------- */
.gz-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"av mit zeit" "av thema thema" "av vorschau vorschau" "av marke marke" "av meta meta";gap:0 var(--s3);padding:var(--s3) var(--s3);border-radius:var(--r);text-decoration:none;color:var(--ink)}
.gz-link:hover{background:var(--flaeche2)}
.gespraech-zeile.aktiv .gz-link{background:var(--flaeche);box-shadow:inset 3px 0 0 var(--signal),0 1px 0 var(--linie)}
.gz-link .avatar{grid-area:av;align-self:start;width:42px;height:42px}
.gz-mit{grid-area:mit;font-family:var(--buch);font-weight:600;font-size:1.08rem}
.gz-zeit{grid-area:zeit;font-size:.78rem;color:var(--muted)}
.gz-thema{grid-area:thema;font-size:.92rem;font-weight:550}
.gz-vorschau{grid-area:vorschau;font-size:.86rem;color:var(--ink2);font-family:var(--buch);font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gz-marke{grid-area:marke;display:flex;flex-wrap:wrap;margin:3px 0 1px}
.gz-entwurf{max-width:100%;white-space:normal}              /* Text, nicht nur Farbe · bricht bei 400 px um, schneidet nichts ab */
.gz-entwurf.freigegeben{background:var(--flaeche3);border-color:transparent}
.gz-entwurf.fehlgeschlagen{font-weight:700}               /* Marke `status kollision` (Rot bleibt dem Überfälligen vorbehalten, test_kein_rot_ausser_ueberfaellig) */
.gz-entwurf.geplant{background:var(--akzent-weich);border-color:transparent;color:var(--ink)}
.gz-meta{grid-area:meta;font-size:.76rem;color:var(--muted)}
.konversation{max-width:var(--lese)}
.k-kopf{margin-bottom:var(--s5)}
.zusage{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:.9rem}
.zusage .mono{color:var(--muted);font-size:.84rem}
.nachricht{padding:var(--s5) 0;border-top:1px solid var(--linie)}
.nachricht.aus{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s4) var(--s5);margin:var(--s3) 0 var(--s3) var(--s6)}
.n-kopf{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.n-kopf .avatar{width:32px;height:32px;font-size:.7rem}
.n-von{font-family:var(--buch);font-weight:600;font-size:1.05rem}
.n-zeit{margin-left:auto;font-size:.8rem;color:var(--muted)}
.n-text{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--buch);font-size:1.1rem;line-height:1.6}
.n-betreff{margin:0 0 var(--s2);font-size:.92rem;font-weight:600;color:var(--ink2)}
.n-meta{margin:var(--s3) 0 0;font-size:.78rem;color:var(--muted)}
.zitat{margin-top:var(--s3)}
.zitat summary{display:inline-flex;align-items:center;min-height:32px;font-size:.82rem;color:var(--akzent)}
.zitat-text{white-space:pre-wrap;color:var(--muted);border-left:2px solid var(--linie2);padding-left:var(--s3);font-size:.9rem}
.entwurf{margin-top:var(--s5);padding:var(--s4) var(--s5);border:1.5px dashed var(--signal);border-radius:var(--r);background:var(--flaeche)}
.formular textarea,.entwurf textarea{padding:10px 12px}
.entwurf textarea{font-family:var(--buch);font-size:1.06rem;line-height:1.6;resize:vertical}

/* ---------- Karte · Porträt ---------- */
.puls{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);padding:var(--s4) var(--s5);margin-bottom:var(--s6);background:var(--flaeche);border-radius:var(--r);border:1px solid var(--linie)}
.faeden{list-style:none;margin:0;padding:0}
.faden{display:flex;gap:var(--s3);align-items:center;padding:var(--s2) 0}
.f-text{display:flex;flex-direction:column}.f-art{font-size:.84rem;color:var(--muted)}
/* Organisation · Menschen: Name und letzte Begegnung in einer Zeile, umbrechend auf schmalen Schirmen */
.f-kopf{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.25rem}
.zusatz{font-size:.9rem;color:var(--muted)}

/* ---------- Räume ---------- */

/* ---------- Anmelden ---------- */
.anmelden{max-width:24rem;margin:var(--s6) auto;padding:var(--s6) var(--s5);background:var(--flaeche);border-radius:12px;border:1px solid var(--linie)}
.anmelden .seitentitel{margin-bottom:var(--s4)}
/* =================== Handy · Leiste unten, Daumen =================== */
@media (max-width:859px){
  .kopf{justify-content:space-between}
  .kopf .abmelden .knopf{min-height:44px;padding:6px 12px;font-size:.8rem}
  /* Navigation unten */
  .haupt{padding-bottom:110px}
  .fuss{padding-bottom:90px}
  .ist-detail .marke-dao{display:none}
  .zurueck{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--ink);text-decoration:none;font-weight:600}
  .knopf{min-height:var(--knopf-hoehe-handy);position:relative}
  .knopf::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,var(--tippflaeche));transform:translateY(-50%)}
  .textknopf::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:var(--tippflaeche);transform:translateY(-50%)}   /* unsichtbare Tippfläche */
  .klapp-knopf{display:inline-flex}
  .filterzeile{display:none;flex-direction:column;margin-top:var(--s2)}
  .klapp-schalter:checked~.filterzeile{display:flex}
  .klapp-schalter:focus-visible+.klapp-knopf{outline:2px solid var(--fokus);outline-offset:2px}
  .filterzeile input,.filterzeile select{font-size:1rem}
  .filterzeile .knopf{min-height:46px}
  .segmente{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .segment{min-height:44px;min-width:44px;flex:0 0 auto}
  /* Einzige Ausnahme: Neue Aufgabe schwebt am Handy über der Leiste (60 px, dieselbe dunkle Farbe wie überall) */
  .s-aufgaben .sk-aktionen{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:31}
  .s-aufgaben .sk-aktionen .knopf.neu-knopf{width:60px;height:60px;min-height:60px;box-shadow:0 6px 18px var(--schatten)}
  .s-aufgaben .sk-aktionen .knopf.neu-knopf .zeichen{width:26px;height:26px}
  .s-aufgaben .sk-aktionen .ausklapp-form{top:auto;bottom:calc(100% + 10px)}
  /* Bündel gestapelt: Gegenüber · darunter Aufgaben mit Termin, Haken rechts */
  .buendel{grid-template-columns:minmax(0,1fr);padding:var(--s4) 0 var(--s2)}
  .b-zeile{grid-template-columns:minmax(0,1fr) var(--zeile);grid-template-areas:"was haken" "wann haken";padding:8px 0;row-gap:0}
  .b-zeile .sp-haken{grid-area:haken}.b-zeile .sp-was{grid-area:was}.b-zeile .sp-wann{grid-area:wann;text-align:left}
  .termin{flex-direction:row;gap:6px;align-items:baseline}
  .haken{margin:0}
  .detail-raster{grid-template-columns:minmax(0,1fr)}
  .impuls-zeile{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av text" "akt akt"}
  .impuls-zeile .avatar{grid-area:av}.i-text{grid-area:text}
  /* Detail: Vollbild, Aktionen unten */
  .ist-detail .haupt{padding-bottom:120px}
  .ist-detail .aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--flaeche);border-top:1px solid var(--linie2);box-shadow:0 -8px 24px var(--schatten);flex-wrap:nowrap}
  .ist-detail .aktionsleiste>*{flex:1 1 0}
  .ist-detail .aktionsleiste .knopf{width:100%}
  .ist-detail .ausklapp-form{top:auto;bottom:calc(100% + 14px);width:calc(100vw - 24px)}
  /* Formular hängt an der festen Leiste, nicht am Knopf · sonst ragt das Verschieben-Formular rechts über den Rand */
  .ist-detail .aktionsleiste .ausklapp{position:static}
  .ist-detail .aktionsleiste .ausklapp-form{left:12px;right:auto}
  .s-gespraech .seitenkopf{display:none}
  .nachricht.aus{margin-left:var(--s4);padding:var(--s3) var(--s4)}
  .z-titel{display:block;padding:11px 0}
  details.gruppe>summary{min-height:44px}
  .eigenschaften{grid-template-columns:6.5rem minmax(0,1fr)}
  .s-gespraech .entwurf{scroll-margin-bottom:100px}
}

/* ================= D · drei Bahnen (Desktop) ================= */
.knopf.primaer{color:var(--auf-signal)}
.knopf{color:var(--knopftext);background:var(--knopf);border-color:var(--knopf)}
.knopf.leise{color:var(--ink)}
.bahnen{display:grid;grid-template-columns:minmax(0,1fr)}
.bahn-liste{min-width:0;background:var(--flaeche)}
.bahn-auslage{min-width:0;container-type:inline-size;padding:var(--s5) 16px var(--s7)}
.bahn-auslage:focus{outline:none}
.bahn-auslage:focus-visible{outline:2px solid var(--fokus);outline-offset:-2px}
.listenkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s5) 16px var(--s3)}
.listenkopf .seitentitel{font-size:2rem}
.listenkopf.gruss .seitentitel{font-size:clamp(1.8rem,1.5rem + .8vw,2rem);line-height:1.08}   /* höchstens 2rem wie der Kalenderkopf (03.11.) */
.listenkopf .untertitel{font-size:.88rem}
.listenkopf .ausklapp-form{left:auto;right:0}
/* Der Neu-Knopf aller Köpfe: nur „+“, rund, 44 px (Thomas 05.11.) · was entsteht, steht im title und für Screenreader (makros.html: neu_knopf) */
.knopf.neu-knopf{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}
.knopf.neu-knopf .zeichen{width:22px;height:22px}
/* Sortier- und Gruppierleiste über Aufgaben und Räumen (Thomas 28.10.) · eine schmale, leise Zeile, jede Wahl ein Absende-Knopf.
   Handy: Tippflächen 44 px, das Sichtbare bleibt klein. .sl-a Aufgaben (Textzeile), .sl-c.sl-r Räume (Chips mit Menüs) */
.sortierleiste{display:flex;align-items:center;gap:2px;margin:0;padding:0 16px var(--s2);font-size:.76rem;line-height:1.3;color:var(--muted);white-space:nowrap;min-width:0}
.sortierleiste button,.sortierleiste summary{font:inherit;color:var(--ink2);background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sortierleiste summary{list-style:none}
.sortierleiste summary::-webkit-details-marker{display:none}
.sl-menue{position:relative}
.sl-schalter{display:inline-flex;align-items:center;padding:3px 5px;border-radius:5px;text-decoration:underline dotted var(--linie2);text-decoration-thickness:1px;text-underline-offset:3px}
.sl-schalter:hover,.sl-menue[open]>.sl-schalter{color:var(--ink);background:var(--f-liste-hover)}
summary.sl-schalter::after{content:"▾";display:inline-block;margin-left:2px;font-size:.85em;color:var(--muted)}
.sl-a{gap:0}
.sl-a .sl-pfeil{font-weight:700;text-decoration:none;padding-inline:4px;justify-content:center}
.sl-punktzeichen{color:var(--linie2);padding:0 1px}
.sl-tafel{position:absolute;top:calc(100% + 4px);left:0;z-index:20;display:flex;flex-direction:column;gap:1px;min-width:15.5rem;padding:6px;
  background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r);box-shadow:0 10px 28px var(--schatten);white-space:normal}
.sl-tafel-schmal{min-width:10rem}
.sl-punkt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-size:.86rem!important;color:var(--ink)!important;padding:6px 10px!important;border-radius:6px}
.sl-punkt::before{content:"";width:.9em;flex:0 0 .9em;text-align:center;color:var(--akzent);font-weight:700}
.sl-punkt[aria-pressed="true"]{font-weight:650}
.sl-punkt[aria-pressed="true"]::before{content:"✓"}
.sl-punkt:hover{background:var(--f-liste-hover)!important}
.sl-kopf{margin:6px 10px 2px;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sl-kopf:first-child{margin-top:2px}
.sl-zwei{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.sl-zwei .sl-punkt{padding-inline:8px!important;white-space:nowrap}
.sl-stand{overflow:hidden;text-overflow:ellipsis}
.sl-chips{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;margin-inline:-2px;padding-inline:2px}
.sl-chips::-webkit-scrollbar{display:none}
.sl-chip{flex:0 0 auto;display:inline-flex;align-items:center;padding:0}
.sl-pille{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border:1px solid var(--linie);border-radius:999px;font-size:.72rem;color:var(--ink2);background:transparent}
.sl-chip:hover .sl-pille{border-color:var(--linie2);color:var(--ink)}
.sl-chip[aria-pressed="true"] .sl-pille{border-color:var(--ink2);color:var(--ink);font-weight:650;background:var(--flaeche)}
.sl-nur{display:block}
/* Räume (C verdichtet): Chips, „Typ: …▾“ als Filter-Menü, „…“ rechts · Desktop eine Zeile ohne Umbruch und ohne Bildlauf */
.sl-r{gap:6px;padding-bottom:var(--s3);border-bottom:1px solid var(--linie)}
.sl-r .sl-chips{flex:0 0 auto;overflow:visible}
.sl-rechts-weg{min-width:0}
.sl-rechts-weg>summary{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sl-r .sl-stand{flex:0 1 auto}
.sl-ende{margin-left:auto}
.sl-tafel-rechts{left:auto;right:0}
summary.sl-mehr{position:relative;font-weight:700;letter-spacing:.1em;padding-inline:7px;text-decoration:none}
summary.sl-mehr::after{content:none}
.sl-merk{position:absolute;top:2px;right:1px;width:6px;height:6px;border-radius:50%;background:var(--signal)}
a.sl-punkt{text-decoration:none}
a.sl-punkt[aria-current]{font-weight:650}
a.sl-punkt[aria-current]::before{content:"✓"}
@media (max-width:859px){
  .sortierleiste{font-size:.8rem;padding-bottom:0}
  .sl-schalter{min-height:44px;min-width:44px;justify-content:center;padding-inline:6px}
  .sl-a .sl-pfeil{min-width:44px}
  .sl-chip{min-height:44px}
  .sl-chip .sl-pille{min-height:28px;padding-inline:12px;font-size:.78rem}
  .sl-chip:has(.sl-pille){min-width:44px;justify-content:center}
  .sl-punkt{min-height:44px}
  .sl-tafel{max-width:calc(100vw - 32px)}
  .sl-r .sl-chips{flex:1 1 auto;overflow-x:auto;padding-right:20px;-webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - 24px),transparent);mask-image:linear-gradient(to right,var(--ink) calc(100% - 24px),transparent)}   /* Bildlauf mit sichtbarem Rand */
  .sl-r .sl-menue{flex:0 0 auto}
  .sl-rechts-weg>summary{line-height:38px}
  .sl-ende{margin-left:0;margin-right:-8px}
}
/* Gruppierung aus: flache Liste, Gegenüber vorn in der Metazeile */
.flach{list-style:none;margin:0;padding:0}
.flach .lz{border-bottom:1px solid var(--linie)}
.flach .lz-link{padding-block:10px}
.lz-wann{row-gap:2px}
/* Metazeile der Listenzeilen als Fließtext statt umbrechender Flex-Zeile · WebKit (Safari) behielt nach dem Schriftwechsel
   (font-display:swap) die alte Höhe der Rasterzeile `.lz`, die umgebrochene Marke („meine Frist“) lief unten heraus und
   verschwand hinter dem nächsten Gruppenkopf (Thomas 28.10., Liste ~380 px) */
.lz-link>.lz-wann{display:block;line-height:1.7}
.lz-link>.lz-wann>*{vertical-align:middle}
.lz-wann .wer{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink2);min-width:0}
.lz-wann .wer .avatar{width:18px;height:18px;font-size:.5rem;letter-spacing:0;box-shadow:0 0 0 1.5px var(--flaeche),0 0 0 2.5px var(--kante,transparent)}
.lz-wann .wer .avatar-raum{box-shadow:0 0 0 1.5px var(--kante,var(--linie2));border-radius:4px}
.bahn-liste .filterbereich{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);padding:0 16px var(--s3);margin:0;border-bottom:1px solid var(--linie)}
.bahn-liste .filterbereich .klapp-knopf{display:inline-flex;grid-column:2;grid-row:1;min-height:var(--feld-hoehe)}   /* in einer Zeile mit dem Suchfeld (Feldhöhe 04.11.) */
.bahn-liste .filterbereich .filterzeile{display:flex;flex-direction:column;grid-column:1;grid-row:1/span 2}
.bahn-liste .filterzeile select,.bahn-liste .filterzeile button,.bahn-liste .filterzeile .tf-haken{display:none}
.bahn-liste .klapp-schalter:checked~.filterzeile select,.bahn-liste .klapp-schalter:checked~.filterzeile button{display:block}
.bahn-liste .klapp-schalter:checked~.filterzeile .tf-haken{display:flex}
.bahn-liste .filterzeile input[type=search]{flex:none;width:100%}
.bahn-liste>.suche{display:flex;padding:0 16px var(--s3)}
/* Organisationen · Schalter „Gruppieren: Art · Marke“ (auch mobil sichtbar, aktives Glied fett) */
.bahn-liste>.gruppenwahl{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline;padding:0 16px var(--s3);font-size:.84rem;color:var(--muted)}
.gruppenwahl a[aria-current]{font-weight:650;color:var(--ink)}
@media (max-width:859px){.gruppenwahl a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tippflaeche);min-height:var(--tippflaeche)}}   /* Tippfläche am Handy (05.11., Altfund in „pruefen“) */
.bahn-liste .suche input{width:100%}
.segmentbereich,.bahn-liste .segmentbereich{padding:0 16px var(--s3);display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--linie)}
.segmentbereich .segmente{flex:none;flex-wrap:wrap;align-content:flex-start;align-self:flex-start}
@media (max-width:859px){.segmentbereich .segmente{flex-wrap:nowrap;align-content:normal;overflow-x:auto;scrollbar-width:none}}
.segment{white-space:nowrap}
.segmente.kompakt .segment{font-size:.82rem;padding:4px 9px;min-width:44px}
/* Gruppen der Liste */
.bahn-liste .gruppe{margin:0}
.bahn-liste .gruppenkopf{position:sticky;top:0;z-index:2;background:var(--flaeche);margin:0;padding:var(--s4) 16px var(--s2);font-size:.95rem}
.bahn-liste .gruppe>.leer{margin:var(--s2) 16px var(--s3);font-size:.88rem}
/* Bündel je Gegenüber */
.lb{border-bottom:1px solid var(--linie);box-shadow:inset 3px 0 0 var(--kante,transparent)}
.lb-kopf{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 16px 2px;text-decoration:none;color:var(--ink);min-height:44px}
a.lb-kopf:hover{background:var(--flaeche2)}
.lb-kopf .avatar{width:30px;height:30px;font-size:.66rem}
.lb-text{display:flex;flex-direction:column;min-width:0;flex:1}
.lb-text .g-name{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-kopf[aria-current]{background:var(--akzent-weich);box-shadow:inset -3px 0 0 var(--signal)}
.lb-ohne .lb-kopf .g-name{color:var(--ink2)}
.lb-liste{list-style:none;margin:0;padding:0 0 var(--s2)}
/* Zeilenhöhe: `grid-auto-rows:min-content` statt `auto` · WebKit (Safari) rechnet die auto-Spur mit dem -webkit-box-Titel (line-clamp)
   nach einer Breitenänderung (Trenner, Fenster) für eine Zeile, die Metazeile ragt dann in die nächste Zeile (Thomas 28.10.) */
.lz{display:grid;grid-template-columns:var(--zeile) minmax(0,1fr);grid-auto-rows:min-content;align-items:start;padding-left:6px}
.lz .sp-haken{padding-top:2px}
.lz .haken{margin:0}
.lz-link{display:block;padding:8px 16px 8px 0;text-decoration:none;color:var(--ink);min-width:0;min-height:44px}
.lz:hover{background:var(--flaeche2)}
.lz.aktiv{background:var(--akzent-weich);box-shadow:inset -3px 0 0 var(--signal)}
.lz-zu .lz-titel,.lz-zu .lz-wann{color:var(--muted)}
.lz-zu .lz-titel{text-decoration:line-through;text-decoration-color:var(--linie2)}
.lz-offen{grid-column:2;margin:0;padding:0 16px 8px 0;font-size:.78rem}
.lz-offen .textknopf{background:none;border:0;padding:4px 0;font:inherit;color:var(--akzent);text-decoration:underline;cursor:pointer;min-height:0}
.au-neu-einplanen{grid-column:2;justify-self:start;margin:0 0 8px;padding:4px 0;font-size:.78rem;color:var(--akzent)}
@media (max-width:859px){.au-neu-einplanen{grid-column:1 / -1;display:inline-flex;align-items:center;min-height:var(--tippflaeche)}}
.lz-titel{font-size:.94rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lz-wann{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.lz-wann time{font-weight:600;color:var(--ink2)}
.raum-lz{grid-template-columns:52px minmax(0,1fr);padding-left:0;border-bottom:1px solid var(--linie);box-shadow:none}
.raum-av{display:grid;place-items:center;padding-top:10px}
.raum-av .avatar{width:30px;height:30px;font-size:.62rem}
.bahn-liste .impulse,.bahn-liste .gespraeche-liste{padding:0 8px}
.bahn-liste .impuls-zeile{grid-template-columns:auto minmax(0,1fr);padding:10px 8px;position:relative;border-radius:var(--r)}
.impuls-zeile.aktiv{background:var(--akzent-weich);box-shadow:inset -3px 0 0 var(--signal)}
.bahn-liste .i-name::after{content:"";position:absolute;inset:0}
.bahn-liste .gz-link{padding:10px 8px}
/* Auslage */
.ak-art{margin:0 0 2px;font-size:.8rem;color:var(--muted);letter-spacing:.02em}
.auslagenkopf{display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s4)}
.auslagenkopf .avatar.gross{width:72px;height:72px;font-size:1.6rem}
.auslagenkopf .avatar-raum.gross{border-radius:12px}
.auslagenkopf .detailtitel{margin-bottom:var(--s2)}
.lebensdaten{font-size:.55em;font-weight:400;color:var(--muted);white-space:nowrap;letter-spacing:0}
.tod{font-weight:400;color:var(--muted)}
.puls-satz{font-family:var(--buch);font-size:1.12rem;line-height:1.55;margin:0 0 var(--s4);max-width:var(--lese)}
.ak-zahl{font-weight:500;color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
.gegenueber-auslage .b-liste,.karte .b-liste{border-top:1px solid var(--linie)}
.gegenueber-auslage .b-zeile{border-top:1px solid var(--linie)}
.impuls-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);margin-bottom:var(--s5);background:var(--akzent-weich);border-radius:var(--r)}
.il-text{font-family:var(--buch);font-size:1.1rem;font-weight:600;margin-right:auto}
.uebersicht .eigenschaften.zahlen{max-width:24rem;margin:var(--s3) 0 var(--s4)}
.uebersicht .eigenschaften.zahlen dd{text-align:right}
@container (max-width:760px){
  .detail-raster{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
}

@media (min-width:860px){
  :root{--nav:76px;--bahn:20rem}
  .app:not(.ohne-nav)>.kopf{padding:24px 8px 18px}
  .kopf .marke-dao{margin:0 0 28px;justify-content:center;font-size:1.6rem}
  .kopf .abmelden{margin:auto 0 0;padding-top:12px;justify-content:center}
  .kopf .abmelden .knopf{padding:6px 6px;font-size:.7rem;min-height:36px}
  .bahnen-seite .haupt{padding:0;max-width:none}
  .bahnen{grid-template-columns:var(--bahn) minmax(0,1fr);align-items:start}
  .bahn-liste{position:sticky;top:0;height:100dvh;overflow-y:auto;border-right:1px solid var(--linie);scrollbar-width:thin}
  .bahn-auslage{padding:var(--s6) 40px var(--s7);max-width:64rem}
  .bahnen-seite .fuss{padding-inline:40px}
}
@media (min-width:1100px){:root{--bahn:23rem}}
@media (min-width:1280px){
  :root{--nav:232px;--bahn:24rem}
  .app:not(.ohne-nav)>.kopf{padding:28px 14px 20px}
  .kopf .marke-dao{margin:0 12px 32px;justify-content:flex-start;font-size:2.1rem}
  .kopf .abmelden{margin:14px 12px 0;justify-content:space-between}
  .kopf .abmelden .knopf{padding:9px 16px;font-size:.88rem;min-height:40px}
  .bahn-auslage{padding:var(--s6) 48px var(--s7)}
}
@media (min-width:1440px){:root{--nav:248px;--bahn:27rem}.bahn-auslage{max-width:66rem}}

/* ================= D · Handy: zwei Ebenen ================= */
@media (max-width:859px){
  .bahnen.mobil-liste .bahn-auslage{display:none}
  .bahnen.mobil-liste .lz.aktiv{background:var(--flaeche);box-shadow:none}   /* ohne offene Auslage keine Markierung */
  .bahnen.mobil-auslage .bahn-liste{display:none}
  .bahnen-seite .haupt{padding:0 0 100px}
  .bahn-liste{background:var(--bg)}
  .bahn-auslage{padding:var(--s4) 16px 130px}
  .lb,.lz,.bahn-liste .impuls-zeile,.bahn-liste .gz-link{background:var(--flaeche)}
  .lb{margin:0 0 1px}
  .lz{grid-template-columns:minmax(0,1fr) var(--zeile);padding-left:16px}
  .lz .sp-haken{grid-column:2;grid-row:1;align-self:center}
  .lz-link{grid-column:1;grid-row:1;padding:10px 0}
  .lb-kopf{padding-top:14px}
  .raum-lz{grid-template-columns:52px minmax(0,1fr);padding-left:0}
  .raum-lz .lz-link{grid-column:2}
  .bahn-liste .gruppenkopf{position:static;background:transparent;padding:var(--s5) 16px var(--s2)}
  .bahn-liste .filterbereich .klapp-knopf{min-height:46px}
  .impuls-leiste .knopf{flex:1}
  .il-text{flex-basis:100%}
  .auslagenkopf{align-items:flex-start}
  .auslagenkopf .avatar.gross{width:56px;height:56px;font-size:1.2rem}
  .karte .aktionsleiste{flex-wrap:wrap}
}

.kante-dp{--kante:var(--dp-akzent);--kante-text:var(--dp-text)}
.kante-ins{--kante:var(--in-akzent);--kante-text:var(--in-text)}
.kante-hcg{--kante:var(--marke-hcg);--kante-text:var(--hcg-text)}
.team-dp{--team:var(--dp-akzent);--team-text:var(--dp-text);--team-flaeche:var(--dp-flaeche)}
.team-ins{--team:var(--in-akzent);--team-text:var(--in-text);--team-flaeche:var(--in-flaeche)}
.team-hcg{--team:var(--hcg-akzent);--team-text:var(--hcg-text);--team-flaeche:var(--hcg-flaeche)}
.team-neutral{--team:var(--ne-akzent);--team-text:var(--ne-text);--team-flaeche:var(--ne-flaeche)}

/* Stufe 1 · Liste: Kante links bleibt, Gesicht und Raum-Symbol mit Ring, keine Fläche */
.avatar-raum{background:var(--flaeche);color:var(--kante-text,var(--ink2));box-shadow:0 0 0 2px var(--kante,var(--linie2));border-radius:7px}
.avatar-raum:not([class*="kante-"]){color:var(--ink2)}
.avatar.kante-beide{box-shadow:none;background:radial-gradient(closest-side,var(--flaeche3) 0 78%,var(--flaeche) 78% 84%,transparent 85%),conic-gradient(var(--ring-a) 0 var(--ring-s1),var(--ring-b) var(--ring-s1) var(--ring-s2),var(--ring-c) var(--ring-s2) 100%)}
/* Geteilter Ring bei mehreren Hauptmarken: zwei Hälften oder drei Drittel, Reihenfolge Dialog·pause, Insodia, HCG */
.ring-dp-ins{--ring-a:var(--dp-akzent);--ring-b:var(--in-akzent);--ring-c:var(--in-akzent);--ring-s1:50%;--ring-s2:50%}
.ring-dp-hcg{--ring-a:var(--dp-akzent);--ring-b:var(--hcg-akzent);--ring-c:var(--hcg-akzent);--ring-s1:50%;--ring-s2:50%}
.ring-ins-hcg{--ring-a:var(--in-akzent);--ring-b:var(--hcg-akzent);--ring-c:var(--hcg-akzent);--ring-s1:50%;--ring-s2:50%}
.ring-dp-ins-hcg{--ring-a:var(--dp-akzent);--ring-b:var(--in-akzent);--ring-c:var(--hcg-akzent);--ring-s1:33.333%;--ring-s2:66.667%}
.auslagenkopf .avatar-raum.gross{box-shadow:0 0 0 3px var(--kante,var(--linie2))}

/* Kürzel · Farbe trägt nie allein */
.kuerzel{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-size:.74rem;color:var(--team-text,var(--ink2));vertical-align:1px}
.kuerzel b{font-weight:750;letter-spacing:.06em;padding:0 6px;border:1.5px solid currentColor;border-radius:4px;line-height:1.5}
.kuerzel.k-dp{color:var(--dp-text)}.kuerzel.k-ins{color:var(--in-text)}.kuerzel.k-hcg{color:var(--hcg-text)}.kuerzel.k-beide,.kuerzel.neutral{color:var(--ne-text)}
.kuerzel.neutral{font-style:italic}

/* Stufe 3 · Auslage im Teamton */
.bahn-auslage .auslagenkopf,.bahn-auslage .detailkopf,.bahn-auslage .k-kopf{background:var(--team-flaeche);border-top:4px solid var(--team);border-radius:var(--r);padding:var(--s4) var(--s5)}
.bahn-auslage .detailkopf[class*="kante-"]{box-shadow:none}
.bahn-auslage .knopf.primaer{background:var(--team);border-color:var(--team);color:var(--auf-team)}
.bahn-auslage .knopf.primaer:hover{background:var(--team-text);border-color:var(--team-text)}
.bahn-auslage a:not(.knopf):not(.haken-espo){color:var(--team-text);text-decoration-color:currentColor}
.bahn-auslage .abschnittkopf{border-bottom:2px solid var(--team)}
.bahn-auslage .verlauf li::before{background:var(--team)}
.bahn-auslage .impuls-leiste{background:var(--team-flaeche);box-shadow:inset 3px 0 0 var(--team)}
.bahn-auslage .pfad{display:none}
.bahn-auslage :focus-visible{outline-color:var(--team-text)}

/* Vorschlag (a) · überfällig: eigenes Zeichen, Wort, eigene Farbe (Karmin, deutlich weg vom Ziegelrot) */
.status.ueberfaellig{background:var(--ueberfaellig);border-color:var(--ueberfaellig);color:var(--auf-ueberfaellig);font-weight:750;border-radius:4px}
.status.ueberfaellig::before{content:"!";display:inline-grid;place-items:center;width:1.05em;height:1.05em;margin-right:5px;border-radius:50%;background:var(--auf-ueberfaellig);color:var(--ueberfaellig);font-size:.85em;font-weight:900}

@media (max-width:859px){
  .ist-detail .bahn-auslage .aktionsleiste{border-top:3px solid var(--team)}
  .bahn-auslage .auslagenkopf,.bahn-auslage .detailkopf,.bahn-auslage .k-kopf{padding:var(--s3) var(--s4)}
}


/* 1 · Drei Flächen: Navigation · Liste · Auslage (Werte in d2-flaechen-x.css) */
body{background:var(--f-auslage)}
.app:not(.ohne-nav)>.kopf,.kopf{background:var(--f-nav)}
.bahn-liste{background:var(--f-liste)}
.bahn-liste .gruppenkopf{background:var(--f-liste)}
/* Kalender im Raster (03.11.): die Auslage steht links, das Raster in der Mitte · Flächen tauschen mit, links bleibt die dunklere */
@media (min-width:860px){.raster-modus .bahn-liste,.raster-modus .bahn-liste .gruppenkopf{background:var(--f-auslage)}.raster-modus .bahn-auslage{background:var(--f-liste)}}
.notiz,.nachricht.aus,.entwurf{background:var(--f-karte)}
@media (min-width:860px){
  .app:not(.ohne-nav)>.kopf{border-right:1px solid var(--linie)}
  .bahn-liste{border-right:0}
}

/* 2 · Trenner zwischen Liste und Auslage */
.trenner-bahn{display:none}
@media (min-width:860px){
  .bahnen.mit-trenner{grid-template-columns:var(--bahn) 11px minmax(0,1fr)}
  .trenner-bahn{display:block;position:sticky;top:0;height:100dvh;cursor:col-resize;touch-action:none;margin-left:-5px;margin-right:5px;z-index:4;
    background:linear-gradient(to right,transparent 5px,var(--linie2) 5px 6px,transparent 6px)}
  .trenner-bahn::after{content:"";position:absolute;left:3px;top:50%;width:5px;height:36px;margin-top:-18px;border-radius:3px;
    background:radial-gradient(circle,var(--muted) 1.2px,transparent 1.6px) 0 0/5px 6px;opacity:.55;transition:opacity .15s}
  .trenner-bahn:hover,.trenner-bahn.zieht{background:linear-gradient(to right,transparent 4px,var(--ink2) 4px 7px,transparent 7px)}
  .trenner-bahn:hover::after,.trenner-bahn.zieht::after{opacity:0}
  .trenner-bahn:focus-visible{outline:none;background:linear-gradient(to right,transparent 3px,var(--fokus) 3px 8px,transparent 8px)}
  .zieht-trenner,.zieht-trenner *{cursor:col-resize!important;user-select:none}
}

/* 3 · Marken nur als Linien: keine getönten Flächen, Knöpfe neutral */
.knopf.primaer{background:var(--knopf);border-color:var(--knopf);color:var(--knopftext)}
.knopf.primaer:hover{background:var(--ink2);border-color:var(--ink2);color:var(--knopftext)}
.bahn-auslage .auslagenkopf,.bahn-auslage .detailkopf,.bahn-auslage .k-kopf{background:transparent;border-radius:0;border-top:3px solid var(--team);box-shadow:none}
.bahn-auslage .knopf.primaer{background:var(--knopf);border-color:var(--knopf);color:var(--knopftext)}
.bahn-auslage .knopf.primaer:hover{background:var(--ink2);border-color:var(--ink2)}
.bahn-auslage a:not(.knopf):not(.haken-espo){color:var(--ink);text-decoration-line:underline;text-decoration-color:var(--team);text-decoration-thickness:1.5px;text-underline-offset:.22em}
.bahn-auslage a:not(.knopf):not(.haken-espo):hover{text-decoration-thickness:2.5px}
.bahn-auslage a.segment:not(.knopf):not(.haken-espo){color:var(--ink2);text-decoration:none}   /* Segmente in der Auslage ohne Link-Unterstrich */
.bahn-auslage a.segment.aktiv:not(.knopf):not(.haken-espo),.bahn-auslage a.segment:not(.knopf):not(.haken-espo):hover{color:var(--ink)}
.bahn-auslage .abschnittkopf{border-bottom:1px solid var(--linie2)}
.bahn-auslage .verlauf li::before{background:var(--ink2)}
.bahn-auslage .impuls-leiste{background:transparent;box-shadow:none;border-radius:0;border-block:1px solid var(--linie2);padding:var(--s3) 0}
.bahn-auslage :focus-visible{outline-color:var(--team-text)}
.kuerzel,.kuerzel.k-dp,.kuerzel.k-ins,.kuerzel.k-hcg,.kuerzel.k-beide,.kuerzel.neutral{color:var(--ink2)}
.kuerzel b{border:0;border-radius:0;padding:0 1px;border-bottom:2px solid var(--k-linie,var(--linie2));line-height:1.3}
.kuerzel.k-dp{--k-linie:var(--dp-akzent)}.kuerzel.k-ins{--k-linie:var(--in-akzent)}.kuerzel.k-hcg{--k-linie:var(--hcg-akzent)}
.lb{box-shadow:none;border-left:3px solid var(--kante,transparent)}
@media (max-width:859px){.ist-detail .bahn-auslage .aktionsleiste{border-top:1px solid var(--linie2)}}

/* 4a · Auslage-Kopf als Seitenkopf: Artzeile in Kapitälchen, großer Titel, ruhige Metazeile, eine linke Kante für alles */
.ak-art{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)}
.ak-art .kuerzel{letter-spacing:.08em;margin-left:8px}
.bahn-auslage .auslagenkopf,.bahn-auslage .detailkopf,.bahn-auslage .k-kopf{padding:var(--s5) 0 var(--s5);margin-bottom:var(--s5);border-bottom:1px solid var(--linie)}
.bahn-auslage .auslagenkopf{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s5);align-items:start}
.bahn-auslage .auslagenkopf .avatar.gross{width:64px;height:64px;margin-top:22px}
.bahn-auslage .detailtitel{font-size:clamp(1.7rem,1.2rem + 1.4vw,2.35rem);font-weight:450;line-height:1.12;letter-spacing:-.012em;max-width:28ch;margin:0 0 var(--s3)}
.bahn-auslage .metazeile{font-size:.86rem;gap:4px 10px}
.bahn-auslage .dk-mitwem{margin-bottom:var(--s3)}
.bahn-auslage .aktionsleiste{margin-bottom:var(--s6)}
.bahn-auslage .abschnittkopf{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);padding-bottom:var(--s2);margin-bottom:var(--s3)}
.bahn-auslage .detail-haupt>section,.bahn-auslage .detail-seite>section{margin-bottom:var(--s6)}
.puls-satz{font-size:1.18rem;line-height:1.55;color:var(--ink)}
.bahn-auslage .notiz{border:1px solid var(--linie);border-radius:6px;padding:var(--s5) var(--s5)}
/* 4b · Rhythmus und Größenkontrast in der Liste: Name groß in Buchschrift, Meta klein und gesperrt, 4-px-Raster */
.bahn-liste .gruppenkopf{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);padding:var(--s5) 16px var(--s2);border-bottom:1px solid var(--linie2)}
.bahn-liste .gk-unter{font-size:.7rem;letter-spacing:.04em;text-transform:none;font-weight:500;color:var(--muted)}
.bahn-liste .gk-zahl{font-size:.78rem;letter-spacing:0;color:var(--muted)}
.lb{border-bottom:1px solid var(--linie)}
.lb-kopf{padding:var(--s4) 16px var(--s1);min-height:48px}
.lb-text .g-name{font-size:1.08rem;line-height:1.25}
.lb-text .g-typ{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.lz-link{padding:var(--s2) 16px var(--s2) 0;gap:2px}
.lz-titel{font-size:.93rem;line-height:1.4;color:var(--ink)}
.lz-wann{font-size:.74rem;letter-spacing:.02em}
.lz-wann time{font-weight:600;color:var(--ink2)}
/* Zustände: Hover leise, gewählt = die Zeile nimmt die Fläche der Auslage an und öffnet sich zu ihr hin */
a.lb-kopf,.lz,.impuls-zeile,.gz-link,.raum-lz{transition:background-color .14s ease}
a.lb-kopf:hover,.lz:hover,.bahn-liste .impuls-zeile:hover,.bahn-liste .gz-link:hover{background:var(--f-liste-hover)}
.lz.aktiv,.lb-kopf[aria-current],.bahn-liste .impuls-zeile.aktiv,.bahn-liste .gespraech-zeile.aktiv .gz-link{background:var(--f-auslage);box-shadow:inset -3px 0 0 var(--signal)}
.bahn-liste .gz-link,.bahn-liste .impuls-zeile{border-radius:0}
.bahn-liste .impulse,.bahn-liste .gespraeche-liste{padding:0}
.bahn-liste .impuls-zeile,.bahn-liste .gz-link{padding-inline:16px;border-bottom:1px solid var(--linie)}
.bahn-liste .gespraech-zeile.aktiv .gz-link{outline:0}
/* 4c · Öffnen der Auslage und Leerzustände mit Haltung */
@media (prefers-reduced-motion:no-preference){
  .bahn-auslage>*{animation:auftritt .24s ease-out both}
  @keyframes auftritt{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
.leer{background:transparent;border:0;border-radius:0;padding:var(--s2) 0 var(--s2) 36px;position:relative;color:var(--ink2);font-size:1rem}
.leer::before{content:"";position:absolute;left:0;top:50%;width:24px;height:1px;background:var(--linie2)}
.bahn-liste .gruppe>.leer{margin:var(--s3) 16px var(--s4)}


/* ================= D2 · Navigation oben (Kopfleiste) ================= */
.unterleiste{display:none}
.kopfleiste .kopf-titel{display:none}
.app.oben>.kopfleiste{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2);position:sticky;top:0;z-index:40;height:var(--kopf);min-height:0;
  padding:0 16px;background:var(--f-nav);border:0;border-bottom:1px solid var(--linie2);overflow:visible}
.kopf-links{display:flex;align-items:center;gap:var(--s2);justify-self:start;min-width:0}
.app.oben .marke-dao{margin:0 0 0 var(--s1);font-size:1.75rem;justify-content:flex-start}
.vorschlaege{display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0 8px;color:var(--ink);text-decoration:none;border-radius:var(--r)}
.vorschlaege .zeichen{width:22px;height:22px}
.vorschlaege.null{color:var(--muted)}
/* Zahl offener Vorschläge auf rotem Grund (Thomas 27.10.) · nur bei mehr als null, kopf.html setzt sie sonst nicht */
.v-zahl{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;padding:0 6px;border-radius:8px;background:var(--v-zahl);color:var(--auf-v-zahl);
  font-size:.82rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.vorschlaege:hover,.kopf-symbol:hover{background:var(--f-liste-hover)}
/* Vorschläge: erster Eintrag der Hauptnavigation, vor Tagesblatt · Icon mit Zahl, Linie wie die anderen Einträge */
.hn-link.vorschlaege{min-height:0;height:var(--kopf);padding:0 12px;border-radius:0;color:var(--ink2)}
.hn-link.vorschlaege.null{color:var(--muted)}
.hn-link.vorschlaege:hover{background:none;color:var(--ink)}
.hn-link.vorschlaege.aktiv{color:var(--ink)}
.hauptnav ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:2px}
.hauptnav>ul>li{position:relative;display:flex}
.hn-link{display:inline-flex;align-items:center;gap:5px;height:var(--kopf);padding:0 12px;border:0;background:none;font:inherit;font-size:.95rem;font-weight:500;color:var(--ink2);text-decoration:none;cursor:pointer;
  box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .14s,color .14s}
.hn-link:hover{color:var(--ink);box-shadow:inset 0 -3px 0 var(--linie2)}
.hn-link.aktiv{color:var(--ink);font-weight:650;box-shadow:inset 0 -3px 0 var(--signal)}
.hn-link[aria-expanded="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--ink2)}
.kopf-rechts{justify-self:end;display:flex;align-items:center;gap:2px;position:relative}
.kopf-symbol{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink2);border-radius:var(--r);cursor:pointer}
.kopf-symbol .zeichen{width:21px;height:21px}
.kopf-symbol[aria-expanded="true"]{background:var(--f-liste);color:var(--ink)}
/* Klappmenüs */
.klapp-menue{position:absolute;z-index:50;top:calc(100% + 6px);background:var(--f-nav);border:1px solid var(--linie2);border-radius:var(--r);box-shadow:0 14px 34px var(--schatten);padding:var(--s2)}
.klapp-menue[hidden]{display:none!important}
#mehr-menue{left:0;min-width:13rem;list-style:none;margin:0;display:flex;flex-direction:column;gap:2px}
.menue-link,.sheet-link{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s3);border-radius:6px;color:var(--ink);text-decoration:none;font-size:.95rem}
.menue-link .zeichen,.sheet-link .zeichen{color:var(--muted)}
.menue-link:hover,.menue-link:focus-visible,.sheet-link:hover{background:var(--f-liste)}
.menue-link.aktiv,.sheet-link.aktiv{font-weight:650;box-shadow:inset 3px 0 0 var(--signal)}
.suche-feld{right:48px;width:min(28rem,70vw);padding:var(--s3)}
.suche-feld input{width:100%;font-size:1rem;padding:0 12px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink)}
.suche-feld .formhinweis{margin-top:6px}
.einstellungen{right:0;width:16rem;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4)}
.einstellungen p{margin:0}
.e-datum{font-family:var(--buch);font-size:1.05rem}
.e-konto{font-size:.86rem;color:var(--muted)}
.einstellungen .knopf{width:100%}
.app.oben .zurueck{display:none}
.app.oben .fuss{padding-inline:16px}
/* Sub-Navileiste: schmale zweite Zeile unter der Kopfleiste (Konzept §5a) · `--unter` ist die Höhe, 0 ohne Leiste */
.mit-unterleiste{--unter:40px}
.unternav{position:sticky;top:var(--kopf);z-index:39;height:var(--unter);background:var(--f-nav);border-bottom:1px solid var(--linie);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.unternav::-webkit-scrollbar{display:none}
.unternav ul{list-style:none;margin:0;padding:0 16px;height:100%;display:flex;align-items:stretch;justify-content:center;gap:2px;width:max-content;min-width:100%;box-sizing:border-box}
.unternav li{display:flex}
.un-link{display:inline-flex;align-items:center;gap:6px;padding:0 12px;white-space:nowrap;font-size:.84rem;font-weight:500;color:var(--muted);text-decoration:none;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow .14s,color .14s}
.un-link:hover{color:var(--ink2);box-shadow:inset 0 -2px 0 var(--linie2)}
.un-link.aktiv{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--signal)}
.un-link .zeichen{width:18px;height:18px;flex:none}
.un-nur-icon{justify-content:center;min-width:44px;box-sizing:border-box}
.un-link:focus-visible{outline-offset:-3px}   /* die Leiste scrollt, ein Ring außen würde abgeschnitten */
/* Zwei Bahnen unter der Kopfleiste, volle Breite */
@media (min-width:860px){
  .app.oben:not(.ohne-nav){display:block;background:none;min-height:0}
  .app.oben>.haupt{max-width:none}
  .app.oben .bahn-liste,.app.oben .trenner-bahn{top:calc(var(--kopf) + var(--unter,0px));height:calc(100dvh - var(--kopf) - var(--unter,0px))}
  .app.oben .bahn-auslage{max-width:none;padding-inline:clamp(32px,4vw,64px)}
  .app.oben .bahn-auslage>*{max-width:62rem}
  .app.oben .bahnen{min-height:calc(100dvh - var(--kopf) - var(--unter,0px))}
  :root{--bahn:22rem}
  body:not(.bahnen-seite) .app.oben .haupt{padding:var(--s6) 40px var(--s7);max-width:72rem;margin:0 auto}
}
@media (min-width:1100px){:root{--bahn:24rem}}
@media (min-width:1280px){:root{--bahn:26rem}}
@media (min-width:1440px){:root{--bahn:28rem}}
@media (min-width:860px) and (max-width:1099px){
  .app.oben>.kopfleiste{padding:0 8px;gap:var(--s1)}
  .hauptnav ul{gap:0}
  .hn-link{padding:0 7px;font-size:.86rem}
  .hn-link.vorschlaege{padding:0 7px}
  .app.oben .marke-dao{font-size:1.5rem;margin-left:0}
  .kopf-links{gap:0}
}
/* Handy: schmale Kopfzeile oben, Leiste unten mit sechs Icons + Mehr */
@media (max-width:859px){
  .app.oben>.kopfleiste{display:grid;grid-template-columns:auto 1fr auto;height:52px;padding:0 6px;position:sticky;top:0;z-index:40;background:var(--f-nav);border-bottom:1px solid var(--linie2)}
  .mit-unterleiste{--unter:45px}
  .unternav{top:52px}
  .unternav ul{justify-content:flex-start}
  /* Mobil immer nur das Icon · das Wort steht als aria-label und title am Link */
  .un-link .un-text{display:none}
  .un-link{justify-content:center;min-width:44px;box-sizing:border-box}
  .ist-detail .unternav{display:none}
  .app.oben .marke-dao{display:none}
  /* Keine Hauptnavigation oben · nur das Vorschläge-Icon bleibt links im Kopf (grid-column 1), der Rest der Liste entfällt */
  .app.oben .hauptnav,.app.oben .hauptnav ul{display:contents}
  .app.oben .hauptnav>ul>li:not(.hn-vorschlaege){display:none}
  .hn-vorschlaege{grid-column:1;display:flex}
  .hn-link.vorschlaege{height:auto;min-height:44px;padding:0 8px;border-radius:var(--r);box-shadow:none;color:var(--ink)}
  .hn-link.vorschlaege.null{color:var(--muted)}
  .kopf-links{display:contents}
  .kopf-rechts{justify-self:auto}
  .kopfleiste .kopf-titel{display:block;justify-self:center;font-family:var(--buch);font-size:1.15rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .kopfleiste .vorschlaege{grid-column:1}
  .ist-detail .kopfleiste .vorschlaege,.ist-detail .hn-vorschlaege{display:none}
  .app.oben.oben .zurueck{display:inline-flex;grid-column:1;align-items:center;gap:2px;min-height:44px;padding:0 8px 0 2px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
  .ist-detail .kopfleiste .kopf-titel{display:none}
  .kopf-rechts{grid-column:3;margin:0}
  .suche-feld{position:fixed;left:8px;right:8px;top:58px;width:auto}
  .einstellungen{position:fixed;right:8px;top:58px}
  .unterleiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--f-nav);border-top:1px solid var(--linie2);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
  .ist-detail .unterleiste{display:none}
  .ul-link{flex:1 1 0;min-width:44px;display:flex;align-items:center;justify-content:center;min-height:56px;border:0;background:none;font:inherit;color:var(--ink2);text-decoration:none;border-radius:0;cursor:pointer;box-shadow:inset 0 3px 0 transparent}
  .ul-link .zeichen{width:24px;height:24px;color:var(--muted)}
  .ul-link.aktiv{color:var(--ink);box-shadow:inset 0 3px 0 var(--signal)}
  .ul-link.aktiv .zeichen{color:var(--akzent)}
  .ul-link[aria-expanded="true"]{background:var(--f-liste)}
  .sheet{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:14px 14px 0 0;padding:var(--s2) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 40px var(--schatten);list-style:none}
  .sheet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .sheet-kopf{display:flex;align-items:center;justify-content:space-between;padding:0 0 var(--s2) var(--s3);font-weight:650;border-bottom:1px solid var(--linie);margin-bottom:var(--s2)}
  .sheet-link{min-height:52px;font-size:1.02rem}
  .app.oben .fuss{padding-bottom:90px}
}


/* ================= Dao-Ergänzungen (nicht aus d2a.css) ================= */
/* Haken, der nicht gesetzt werden darf (gesperrt): gestrichelter Kreis, Konzept §6.3 */
.haken-gesperrt{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;background:none;border:2px dashed var(--linie2);border-radius:50%;cursor:not-allowed;color:var(--muted)}
/* Platzhalter-Seite (Kalender, Netz, Fragen, Vorschläge): ein Satz in einer Spalte, Konzept §6.14 */
.platzhalter{max-width:var(--lese)}
/* Fehlerseite: Rahmen Tinte 2 px, ein Satz, nie Rot (Konzept §6.14); Code klein und leise */
.fehlerseite{max-width:var(--lese);margin:var(--s6) auto}
.fehlerseite p.fehler{margin:var(--s4) 0}
.fehlercode{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
/* Überblick in der Auslage (wie .detail) */
.ueberblick{max-width:var(--breit)}
/* Rückfall ohne JavaScript (<noscript> in kopf.html): Mehr, Suche, Abmelden als Zeile unter der Kopfleiste */
.ohne-js{position:static;display:flex;padding-inline:var(--s4);background:var(--f-nav);border-bottom:1px solid var(--linie2);flex-wrap:wrap;align-items:center;gap:var(--s3);padding-block:var(--s2)}
.ohne-js form{display:inline-flex;gap:var(--s2);margin:0}
/* Treffer der Menschen-Suche: Mail und letzte Begegnung unter dem Namen (Link bleibt außerhalb des Zeilen-Links) */
.lb-meta{margin:0;padding:0 16px var(--s3) 62px;font-size:.78rem;color:var(--muted)}
/* Suche: Link „alle N …“ unter einer Gruppe (Task 16) */
.mehr-link{margin:var(--s2) 0 0;padding-inline:16px;font-size:.88rem}
.suche-seite .listenkopf{padding-inline:0}
.fehlerseite .aktionen{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 0}
/* ohne Konto (Anmelden, Fehlerseite): die Spalte steht mittig, nicht links im breiten Rahmen */
.app.ohne-nav>.haupt{margin-inline:auto}
/* Handy: Tippflächen 44 px (Zitat aufklappen, Wortmarke auf Anmelden und Fehlerseite) */
@media (max-width:859px){
  .zitat summary{min-height:44px}
  .app.ohne-nav .marke-dao{box-sizing:border-box;min-height:44px;padding-block:9px}
}
/* Handy: die Auslage ist kein Container und trägt keine Animation. Beides macht sie zum Bezugsrahmen für
   position:fixed, die Aktionsleiste unten hinge sonst am Ende der Auslage statt am Fensterrand. Die Spalten-Regel
   steht darum hier noch einmal als Media-Query (die Auslage ist am Handy so breit wie das Fenster). */
@media (max-width:859px){
  .bahn-auslage{container-type:normal}
  .bahn-auslage>*{animation:none}
  .ist-detail .bahn-auslage .aktionsleiste{margin:0}  /* sonst schiebt margin-bottom die Leiste 36 px über den Fensterrand */
}
@media (max-width:859px){
  .detail-raster{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
}
/* Zeilen mit Beiträgen (Menschen im Raum, offene Fäden): die rechte Angabe bekommt ihre Breite, statt in 7,5 rem umzubrechen */
@media (min-width:860px){
  .bahn-auslage .b-zeile{grid-template-columns:34px minmax(0,1fr) auto}
  .bahn-auslage .sp-wann{white-space:nowrap}
}
/* Geteilte Kante (zwei Marken) als eigene Linie links: ein border-image würde auch die Haarlinie unten übermalen */
.lb.kante-beide{position:relative;box-shadow:none;border-left:3px solid transparent}
.lb.kante-beide::before{content:"";position:absolute;left:-3px;top:0;bottom:-1px;width:3px;background:linear-gradient(var(--ring-a) var(--ring-s1),var(--ring-b) var(--ring-s1) var(--ring-s2),var(--ring-c) var(--ring-s2))}
/* Handy: Ebene „Liste“ steht ganz auf Papiergrau, auch unter einer kurzen Liste (sonst bleibt unten Elfenbein der Auslage stehen) */
@media (max-width:859px){
  body.bahnen-seite:not(.ist-detail){background:var(--f-liste)}
}

/* Tagesblatt: Überblick rechts (Vorgenommen · Fristen · Kollision), Link zurück bei einer Auswahl */
.ueberblick .gruppe{margin:0 0 var(--s5)}
.ueberblick .gruppenkopf{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);padding:var(--s4) 0 var(--s2);margin:0;border-bottom:1px solid var(--linie2)}
.ueberblick .gruppe>.leer{margin:var(--s3) 0}
.ueberblick .lb-meta{padding-left:62px}
.zum-ueberblick{display:inline-flex;align-items:center;min-height:44px;margin:0 0 var(--s2);color:var(--ink2);text-decoration:none;font-size:.9rem;font-weight:600}
.zum-ueberblick:hover,.zum-ueberblick:focus-visible{color:var(--ink);text-decoration:underline}
@media (max-width:859px){
  /* Handy: die Auslage ohne Auswahl ist keine eigene Ebene · ihre Abschnitte folgen unter der Liste */
  .bahnen.mobil-liste.mit-ueberblick .bahn-auslage{display:block;padding:0 0 var(--s6);background:transparent}
  .mit-ueberblick .ueberblick .detailkopf{display:none}
  .mit-ueberblick .ueberblick .gruppe{margin:0}
  .mit-ueberblick .ueberblick .gruppenkopf{padding:var(--s5) 16px var(--s2)}
  .mit-ueberblick .ueberblick .gruppe>.leer{margin:var(--s2) 16px var(--s3)}
  .ueberblick .lz{background:var(--flaeche)}
  .zum-ueberblick{display:none}
}

/* Kalender A8 · Termine des Tages (Liste) und Kollision (Überblick) · Marke nur als Kante, Kollision ruhig (kein Karmin) */
.tz-liste,.kz-liste{list-style:none;margin:0;padding:0}
.tz{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:0 var(--s3);align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--linie);box-shadow:inset 3px 0 0 var(--kante,transparent)}
.tz-zeit{font-size:.8rem;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums;min-width:0}
.tz-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.tz-titel{font-size:.94rem;line-height:1.35;overflow-wrap:anywhere}
.tz-hammer{display:inline-flex;vertical-align:-2px;margin-left:6px;color:var(--ink2)}
.tz-hammer svg{width:13px;height:13px}
.tz-gegen{font-size:.82rem;color:var(--muted)}
.tz-meta{font-size:.78rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.tz-meta a{color:var(--ink2);text-decoration-color:var(--linie2)}
.tz-titel a,.kz-teil a{color:inherit;text-decoration-color:var(--linie2)}
.tz-raum{display:inline-flex;align-items:center;min-height:32px;font-size:.84rem;font-weight:600;color:var(--ink);text-decoration-color:var(--kante,var(--linie2))}
/* Nächste Tage · leiser als „Termine heute“: Tageskopf klein, Zeilen ohne Rahmen */
.nt-tag{padding:0 16px var(--s2)}
.nt-kopf{margin:var(--s2) 0 2px;font-size:.78rem;font-weight:650;letter-spacing:.02em;color:var(--muted)}
.nt-liste{list-style:none;margin:0;padding:0}
.nt-zeile{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:0 var(--s3);align-items:baseline;padding:2px 0}
.nt-zeit{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}   /* mehrtägig ganztags: „ganztags“ / „bis 29.10.“ in zwei Zeilen statt über den Titel */
.nt-titel{font-size:.88rem;line-height:1.35;color:var(--ink2);overflow-wrap:anywhere}
.nt-titel a{color:inherit;text-decoration-color:var(--linie2)}
.kz{padding:10px 0;border-bottom:1px solid var(--linie)}
.kz-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:0 0 4px}
.kz-tag{font-size:.84rem;font-weight:650;color:var(--ink)}
.kz-teil{margin:0;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}
.kz-zeit{display:inline-block;min-width:5.6rem;font-size:.8rem;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.ueberblick .kz{padding-inline:0}
@media (max-width:859px){
  .tz{background:var(--flaeche)}
  .mit-ueberblick .ueberblick .kz{background:var(--flaeche);padding-inline:16px}
  .tz{grid-template-columns:5.2rem minmax(0,1fr)}
  .nt-zeile{grid-template-columns:5.2rem minmax(0,1fr)}
  .tz-raum{min-height:44px}
}

/* Kalender (A9): Tage als Gruppen, Termine als Zeilen · Zeit links, Kante der Marke als Linie, Kollision als ruhiges Wort */
.kal-liste{list-style:none;margin:0;padding:0 0 var(--s2)}
.kal-lz{border-bottom:1px solid var(--linie);border-left:3px solid var(--kante,transparent)}
.kal-link{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:var(--s2);align-items:start;min-height:44px;min-width:0;padding:var(--s2) 16px var(--s2) 13px;color:var(--ink);text-decoration:none}
a.kal-link:hover{background:var(--flaeche2)}
.kal-lz.aktiv{background:var(--akzent-weich);box-shadow:inset -3px 0 0 var(--signal)}
.kal-zeit{padding-top:2px;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2);overflow-wrap:anywhere}
.kal-text{display:flex;flex-direction:column;min-width:0}
.kal-lz.belegt .kal-titel{color:var(--muted);font-style:italic}
.kal-lz .lz-wann{gap:var(--s2)}
.kal-lz.abgehakt .kal-titel,.kal-lz.abgehakt .kal-zeit{color:var(--muted)}
/* Kollision als ruhiges Wort, gemeinsam für Tagesblatt (A8) und Kalender (A9) · weiche Fläche, Tintenrand, kein Karmin */
.status.kollision{background:var(--akzent-weich);border-color:var(--ink);color:var(--ink)}
.kal-tag.heute .gruppenkopf{border-bottom-color:var(--signal)}
.kal-filter>summary{list-style:none;cursor:pointer;width:max-content;gap:var(--s2);font-weight:550;color:var(--ink2)}
.kal-filter>summary::-webkit-details-marker{display:none}
/* Winkel aus zwei Linien statt „▾“ · dreht sich beim Öffnen */
.kal-filter>summary::after{content:"";width:6px;height:6px;margin:0 1px 3px 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s ease}
.kal-filter[open]>summary::after{transform:rotate(225deg);margin-bottom:-3px}
.kal-filter[open]>summary{border-color:var(--ink2);color:var(--ink)}
.kal-filter>.segmente{margin-top:6px}
.kal-leiste-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--s4)}
/* „Kalender · alle“ in derselben Zeile wie die übrigen Knöpfe (Thomas 03.11.) · die Klappe öffnet als Tafel unter der Leiste */
@media (min-width:860px){
  .bahn-liste .segmentbereich.kal-leiste,.segmentbereich.kal-leiste{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px var(--s4);position:relative}
  .kal-filter>summary.knopf{min-height:34px;padding-block:0}
  .kal-filter[open]>.segmente{position:absolute;z-index:15;top:calc(100% - 6px);left:16px;max-width:calc(100% - 32px);margin:0;flex-wrap:wrap;
    background:linear-gradient(var(--spur),var(--spur)),var(--flaeche);box-shadow:0 10px 28px var(--schatten),inset 0 0 0 1px var(--linie2)}
}
/* Blättern (03.11.): ‹ Heute › als eine Gruppe mit gemeinsamer Kontur, Trennlinien innen · Handlung, darum Knopffläche statt Spur */
.blaettern{display:inline-flex;align-items:stretch;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);overflow:hidden}
.blaettern-k{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 13px;
  font-size:.84rem;font-weight:600;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
.blaettern-k+.blaettern-k{border-left:1px solid var(--linie)}
.blaettern-k.pfeil{min-width:34px;padding:0 8px;font-size:1.15rem;font-weight:500;color:var(--ink2)}
.blaettern-k.pfeil span[aria-hidden]{margin-top:-2px}
.blaettern-k:hover{background:var(--hauch);color:var(--ink)}
.blaettern-k:focus-visible{outline-offset:-2px;border-radius:calc(var(--r) - 1px)}
/* heute im Zeitraum: der goldene Punkt aus dem Dao-Zeichen vor „Heute“ */
.blaettern-k.ist-heute::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal)}
/* kleiner Umschalter (alle · offene): dieselbe Spur, leiser und schmaler */
.segmente.klein .segment{min-height:26px;padding:3px 10px;font-size:.78rem}
.kal-b .sp-wann{white-space:nowrap}
@media (max-width:859px){
  .kal-lz{background:var(--flaeche)}
  /* zweizeilig (03.11.): oben Ansicht und alle · offene, darunter ‹ Heute › neben „Kalender · alle“; die Klappe öffnet als
     Tafel unter der Leiste (überdeckt das Raster, schiebt nichts) */
  .bahn-liste .segmentbereich.kal-leiste,.segmentbereich.kal-leiste{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;position:relative}
  .kal-leiste-zeile{display:contents}
  .kal-leiste-zeile nav[aria-label=Erledigtes],.kal-leiste-zeile nav[aria-label=Aufgaben]{order:-1}
  .kal-filter{order:1}
  .kal-filter>summary.knopf{min-height:var(--tippflaeche)}
  .kal-filter[open]>.segmente{position:absolute;z-index:15;top:calc(100% - 6px);left:16px;right:16px;margin:0;flex-wrap:wrap;overflow:visible;
    background:linear-gradient(var(--spur),var(--spur)),var(--flaeche);box-shadow:0 10px 28px var(--schatten),inset 0 0 0 1px var(--linie2)}
  .blaettern{flex:none}
  .blaettern-k{min-height:44px}
  .blaettern-k.pfeil{min-width:44px}
  .segmente.klein .segment{min-height:44px;padding-inline:8px;font-size:.82rem}
  .kal-leiste-zeile .segmente{overflow:visible;flex:0 0 auto}
}
/* Unternavigation der Einstellungen: gleiche Links wie die Sub-Navileiste, aber im Seitenfluss (kein Haftbalken) */
.einst-nav{overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--linie);margin:0 0 var(--s5)}
.einst-nav::-webkit-scrollbar{display:none}
.einst-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;width:max-content;min-width:100%;box-sizing:border-box}
.einst-nav .un-link{min-height:44px;font-size:.95rem}
.pflege .pf-zahl{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0}
.pflege .pf-zahl label{min-width:7.5rem}
.pflege .pf-zahl input{width:5rem}
/* Pflege der Sub-Navileiste (/einstellungen/leiste) */
.pflege{max-width:var(--lese)}
.pf-liste{list-style:none;margin:0 0 var(--s5);padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.pf-zeile{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4);border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche)}
.pf-text{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.pf-aktionen{display:flex;gap:var(--s2);flex-wrap:wrap}
.pf-aktionen form{margin:0}
.pf-titel{font-family:var(--buch);font-weight:500;font-size:1.2rem;margin:var(--s5) 0 var(--s3)}
.pf-gruppe{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:var(--s4) 0 var(--s2)}
.pf-vorschlaege{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.pf-vorschlaege form{margin:0}
.pf-vorschlaege .knopf{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.pf-kopf{display:flex;align-items:center;gap:var(--s3);min-width:0}
.pf-kopf .zeichen{flex:none;width:24px;height:24px;color:var(--ink2)}
.pf-aendern{flex:1 0 100%}
.pf-aendern summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;list-style:none}
.pf-aendern summary::-webkit-details-marker{display:none}
.pf-aendern[open]>summary{margin-bottom:var(--s3)}
.pflege fieldset.pf-feld{border:0;margin:var(--s3) 0 0;padding:0;min-width:0}
.pf-feld legend{font-size:.88rem;color:var(--ink2);padding:0;margin-bottom:var(--s2)}
.pf-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s2)}
.pf-anzeige{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pf-wahl{position:relative;display:flex}
.pf-wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pf-wahl label{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;min-width:44px;padding:8px 6px;box-sizing:border-box;text-align:center;font-size:.76rem;color:var(--ink2);border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche);cursor:pointer;overflow-wrap:break-word}
.pf-anzeige .pf-wahl label{flex-direction:row;min-height:44px;padding:8px 16px;font-size:.88rem}
.pf-wahl label:hover{border-color:var(--linie2)}
.pf-wahl input:checked+label{background:var(--akzent-weich);border-color:var(--signal);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--signal)}
.pf-wahl input:focus-visible+label{outline:2px solid var(--fokus);outline-offset:2px}
.pflege .formular label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--ink2)}
.pflege .formular input{font-size:1rem;padding:0 12px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink)}
.un-merken{color:var(--muted);font-weight:400}
/* Tagesblatt-Überblick · Termine heute und Nächste Räume nebeneinander, ab genug Breite der Auslage (Thomas 26.10.) */
.ub-spalten{display:grid;grid-template-columns:1fr;gap:0 var(--s5)}
@media (min-width:1100px){.ub-spalten{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.ub-spalten .gruppe,.ub-links{min-width:0}
.ub-links #naechste-tage{margin-top:var(--s4)}
@media (min-width:1100px){.ub-spalten{gap:0 var(--s6,40px)}.ub-spalten>#naechste-raeume{border-left:1px solid var(--linie2);padding-left:var(--s5)}}
.nr-zeile .avatar{width:50px;font-size:.7rem;letter-spacing:0}
.nr-zeile{grid-template-columns:68px minmax(0,1fr)}
.nr-zeile .raum-av .avatar{width:52px;height:30px;font-size:.68rem}
.bahn-auslage .ueberblick .detailkopf{border-bottom:0;margin-bottom:0}
/* Vorschläge (Thomas, 26.10.) · Zeile ohne Haken, Auslage mit Vergleich zweier Menschen */
.lz.vz{grid-template-columns:minmax(0,1fr);padding-left:16px}
.vz-bezug{font-size:.84rem;color:var(--ink2);overflow-wrap:anywhere}
.vorschlag-inhalt>section{margin-bottom:var(--s6);max-width:var(--breit)}
.vorschlag-satz{margin:0 0 var(--s2);max-width:var(--lese);line-height:1.55}
.vorschlag-satz.leise{color:var(--muted);font-size:.9rem}
.org-fieldset{border:0;margin:0;padding:0}
.org-zeile{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s2) 0;min-height:44px;cursor:pointer}
.org-zeile input{margin-top:.3rem;accent-color:var(--ink)}
.org-felder{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0 0 var(--s3) 1.9rem}
.org-felder label{display:flex;flex-direction:column;gap:var(--s1);font-size:.88rem;color:var(--ink2)}
.org-felder input,.org-felder select{font:inherit;font-size:1rem;padding:0 var(--s3);max-width:100%;border:1px solid var(--linie);border-radius:6px;background:var(--f-karte);color:var(--ink)}
.org-wahl .leise{color:var(--muted)}
.nachricht:target{box-shadow:inset 3px 0 0 var(--akzent);background:var(--f-karte)}
.woher-karte{border:1px solid var(--linie);border-radius:6px;padding:var(--s4) var(--s5);background:var(--f-karte)}
.woher-betreff{margin:0 0 var(--s3);font-weight:600;overflow-wrap:anywhere}
.woher-text{margin:var(--s3) 0;padding:0 0 0 var(--s4);border-left:2px solid var(--linie);color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--buch);line-height:1.55}
.vergleich-rahmen{overflow-x:auto;margin-bottom:var(--s3)}
.vergleich{width:100%;border-collapse:collapse;font-size:.9rem}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:8px var(--s3) 8px 0;border-bottom:1px solid var(--linie);overflow-wrap:anywhere}
.vergleich thead th{font-weight:600;color:var(--ink2);border-bottom:1px solid var(--linie2)}
.vergleich tbody th{font-weight:400;color:var(--muted);width:7.5rem}
.vergleich tr.anders td{color:var(--ink);font-weight:600}
.vg-wert{display:block}
.vg-leer{color:var(--muted);font-style:italic}

/* Raum · Stand der Teilnahmen (Thomas 27.10.): Etikett je Zeile, darüber die Zahlen je Stand als Legende */
.stufe{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r);font-size:var(--t-meta);font-weight:600;white-space:nowrap;
  background:var(--st-nein);color:var(--st-nein-text)}
.stufe b{font-variant-numeric:tabular-nums}
.st-ja{background:var(--st-ja);color:var(--st-ja-text)}
.st-warte{background:var(--st-warte);color:var(--st-warte-text)}
.st-warte2{background:var(--st-warte2);color:var(--st-warte2-text)}
.st-nein,.st-leise{background:var(--st-nein);color:var(--st-nein-text)}
.st-nein:not(.stufen-zahl *){text-decoration:line-through;text-decoration-thickness:1px}
.stufen-zahl{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3)}
/* Phase 4 C · Teilnehmende (Vorschau 28.10. §3.5) · Stand ändern an der Zeile, „+ Teilnehmer hinzufügen“, Prüftabelle */
.tn-satz{margin:0 0 var(--s3)}
.tn-entfernt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:0 0 var(--s3);padding:var(--s2) var(--s3);
  border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche)}
.tn-stand{display:inline-block;position:relative}
.tn-stand>summary{list-style:none;cursor:pointer}
.tn-stand>summary::-webkit-details-marker{display:none}
.tn-stand>summary::after{content:"▾";margin-left:5px;font-size:.8em}
.tn-stand[open]>form{position:absolute;right:0;z-index:5;margin-top:4px;min-width:14rem;display:grid;gap:var(--s2);padding:var(--s3);
  background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r)}
.tn-wahl{display:grid;gap:4px;font-size:var(--t-meta);color:var(--muted)}
.tn-neu{margin-top:var(--s4)}
.tn-neu>summary.knopf{list-style:none;cursor:pointer}
.tn-neu>summary::-webkit-details-marker{display:none}
.tn-form{display:grid;gap:var(--s3);margin-top:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--linie2);border-radius:var(--r)}
.tn-pillen{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.tn-pillen legend{padding:0;margin:0 0 4px;font-size:var(--t-meta);color:var(--muted)}
.tn-pillen .stufe{cursor:pointer}
.tn-pillen .stufe input{margin:0}
.tn-pillen .stufe:has(input:checked){outline:2px solid var(--fokus);outline-offset:1px}
.tn-pillen .stufe:has(input:disabled){opacity:.6;cursor:not-allowed}
.tn-suche{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2);margin:0}
.tn-suche label{display:grid;gap:4px;flex:1 1 14rem;font-size:var(--t-meta);color:var(--muted)}
.tn-treffer{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tn-treffer .gedaempft,.tn-pruefung .gedaempft{color:var(--muted)}
.tn-liste{display:grid;gap:4px;font-size:var(--t-meta);color:var(--muted)}
.tn-liste textarea{width:100%;font:inherit;color:var(--ink)}
.tn-pruefung{width:100%;border-collapse:collapse;font-size:.92rem}
.tn-pruefung th,.tn-pruefung td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--linie2)}
.tn-pruefung th{font-size:var(--t-meta);color:var(--muted);font-weight:600}
.tn-pruefung td label{display:inline-flex;align-items:center;gap:4px;margin-right:var(--s3)}
@media (max-width:600px){
  .tn-pruefung,.tn-pruefung tbody,.tn-pruefung tr,.tn-pruefung td{display:block}
  .tn-pruefung thead{display:none}
  .tn-pruefung tr{padding:6px 0;border-bottom:1px solid var(--linie2)}
  .tn-pruefung td{border:0;padding:2px 0}
  .tn-stand[open]>form{left:0;right:auto}
  .tn-stand>summary,.tn-pillen .stufe,.tn-treffer label,.tn-pruefung td label,
  .tn-stand form .knopf{min-height:44px;box-sizing:border-box}
  .tn-stand>summary,.tn-pillen .stufe{display:inline-flex;align-items:center}
  .tn-treffer label,.tn-pruefung td label{display:inline-flex;align-items:center}
}
.z-rolle{display:block;font-size:var(--t-meta);color:var(--muted)}
/* ---------- Zeilen in Listen · Einstellung oberflaeche.zeilen (data-zeilen am Wurzelelement .app) ----------
   ruhig = nichts davon · zebra = jede zweite Zeile getönt (als Hintergrundbild, damit Hover und die gewählte Zeile
   darunter ihre Farbe und Kante behalten) · *_nummer = fortlaufende Nummer je Gruppe (CSS-Zähler, kein Template-Umbau) ·
   linie_nummer = keine Tönung, feine Trennlinie. Gezählt wird je `.gruppe` in `.liste-inhalt`; in Aufgaben zählen die
   Aufgaben (nicht die Bündel) durch die ganze Gruppe, gestreift werden dort die Bündel.
   Auf der Seite Anzeige gilt statt des Wurzelwerts die angeklickte Option (.zv-wahl:has(:checked), reines CSS; dort steht das Wurzelelement auf ruhig).
   --nx = Abstand der Nummer vom Listenrand, --nr = Breite der Nummernspalte (der Inhalt rückt um sie ein). */
:root{--zebra:color-mix(in oklab,var(--ink) 3.5%,transparent);--nx:10px;--nr:1.7rem}
@media (max-width:859px){:root{--nx:16px}}
:is([data-zeilen="zebra"],.zv-wahl:has(input[value="zebra"]:checked)) .liste-inhalt .gruppe>ul>li:nth-child(even):not(.aktiv),
:is([data-zeilen="zebra_nummer"],.zv-wahl:has(input[value="zebra_nummer"]:checked)) .liste-inhalt .gruppe>ul>li:nth-child(even):not(.aktiv),
:is([data-zeilen="zebra"],.zv-wahl:has(input[value="zebra"]:checked)) .liste-inhalt .gruppe>ul>li.gespraech-zeile:nth-child(even):not(.aktiv)>.gz-link,
:is([data-zeilen="zebra_nummer"],.zv-wahl:has(input[value="zebra_nummer"]:checked)) .liste-inhalt .gruppe>ul>li.gespraech-zeile:nth-child(even):not(.aktiv)>.gz-link,
:is([data-zeilen="zebra"],.zv-wahl:has(input[value="zebra"]:checked)) .liste-inhalt .gruppe>div.lb:nth-of-type(even),
:is([data-zeilen="zebra_nummer"],.zv-wahl:has(input[value="zebra_nummer"]:checked)) .liste-inhalt .gruppe>div.lb:nth-of-type(even){background-image:linear-gradient(var(--zebra),var(--zebra))}
:is([data-zeilen="linie_nummer"],.zv-wahl:has(input[value="linie_nummer"]:checked)) .liste-inhalt li.lz{border-bottom:1px solid var(--linie)}
:is([data-zeilen="linie_nummer"],.zv-wahl:has(input[value="linie_nummer"]:checked)) .liste-inhalt div.lb li.lz:last-child{border-bottom:0}
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt .gruppe{counter-reset:zeile}
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt :is(li.lz,li.lb,li.impuls-zeile,li.gespraech-zeile,li.kal-lz){counter-increment:zeile;position:relative}
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt :is(li.lz,li.lb,li.impuls-zeile,li.gespraech-zeile,li.kal-lz)::after{content:counter(zeile);position:absolute;left:var(--nx);top:50%;transform:translateY(-50%);width:calc(var(--nr) - 6px);font-size:.72rem;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted);pointer-events:none;z-index:1}
/* Platz für die Nummer · je Zeilenmuster, weil sie verschieden aufgebaut sind und verschieden weit am Rand beginnen */
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt :is(li.lz,li.raum-lz){padding-left:calc(var(--nx) + var(--nr))}
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt li.lb>.lb-kopf{padding-left:calc(var(--nx) + var(--nr))}
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt li.impuls-zeile{padding-left:calc(var(--nx) + var(--nr))}
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt li.gespraech-zeile .gz-link{padding-left:calc(var(--nx) + var(--nr))}
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt li.kal-lz::after{left:calc(var(--nx) - 3px)}
:is([data-zeilen$="nummer"],.zv-wahl:has(input[value$="nummer"]:checked)) .liste-inhalt li.kal-lz .kal-link{padding-left:calc(var(--nx) - 3px + var(--nr))}
/* Tagesblatt-Überblick · „Termine heute“ und „Nächste Tage“ folgen derselben Einstellung (Thomas 28.10.) · Zebra als Hintergrundbild,
   Nummer als CSS-Zähler je Liste (heute: ein Abschnitt; Nächste Tage: je Tag) · Marke (Randlinie), Zeitspalte und Titel bleiben.
   „Nächste Tage“ rückt die Zeilen bis an den Kartenrand (negativer Rand), damit die Tönung ganz reicht. Andere Karten bleiben ruhig. */
:is([data-zeilen="zebra"],[data-zeilen="zebra_nummer"]) .ueberblick :is(.tz,.nt-zeile):nth-child(even){background-image:linear-gradient(var(--zebra),var(--zebra))}
:is([data-zeilen="zebra"],[data-zeilen="zebra_nummer"],[data-zeilen="linie_nummer"]) .ueberblick .nt-zeile{margin-inline:-16px;padding:6px 16px}
[data-zeilen="linie_nummer"] .ueberblick .nt-zeile{border-bottom:1px solid var(--linie)}
[data-zeilen="linie_nummer"] .ueberblick .nt-zeile:last-child{border-bottom:0}
[data-zeilen$="nummer"] .ueberblick :is(#termine-heute .tz-liste,.nt-liste){counter-reset:zeile}
[data-zeilen$="nummer"] .ueberblick :is(.tz,.nt-zeile){counter-increment:zeile;position:relative;padding-left:calc(var(--nx) + var(--nr))}
[data-zeilen$="nummer"] .ueberblick :is(.tz,.nt-zeile)::after{content:counter(zeile);position:absolute;left:var(--nx);top:10px;width:calc(var(--nr) - 6px);font-size:.72rem;line-height:1.35rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted);pointer-events:none}
[data-zeilen$="nummer"] .ueberblick .vz-zeile{padding-left:calc(var(--nx) + var(--nr))}   /* Versandblock bündig mit den nummerierten Terminen, ohne eigene Nummer */
[data-zeilen$="nummer"] .ueberblick .nt-zeile::after{top:6px;line-height:1.2rem}
/* Vorschau auf der Seite Anzeige */
.zeilen-vorschau{max-width:26rem;margin-top:var(--s3);border:1px solid var(--linie);border-radius:var(--r);background:var(--f-liste);overflow:hidden}
.zeilen-vorschau .gruppe{margin:0 0 var(--s3)}
.zeilen-vorschau .gruppe:last-child{margin-bottom:0}
.zeilen-vorschau .gruppenkopf{margin:0;padding:var(--s2) var(--s3)}
.pf-erklaert{flex-direction:column;align-items:stretch}
.pf-anzeige.pf-erklaert .pf-wahl label{flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.pf-hilfe{font-size:var(--t-meta);font-weight:400;color:var(--muted)}

/* Tagesblatt · Nachbereiten und Geburtstage (Liste links), Tag blättern (Kopf des Überblicks) */
.nb-liste,.gb-liste{list-style:none;margin:0;padding:0}
.nb-zeile{border-bottom:1px solid var(--linie);box-shadow:inset 3px 0 0 var(--kante,transparent)}
.nb-link{display:block;padding:10px 16px;color:inherit;text-decoration:none;min-height:44px}
.nb-link:hover{background:var(--flaeche)}
.nb-titel{display:block;font-size:.92rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.nb-meta{display:block;margin-top:2px;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.gb-zeile{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:0 var(--s3);align-items:baseline;padding:6px 16px;border-bottom:1px solid var(--linie)}
.gb-tag{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gb-name{font-size:.9rem;color:var(--ink);overflow-wrap:anywhere}
.tag-blaettern{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.tag-blaettern .detailtitel{margin-bottom:0;font-size:1.7rem;line-height:1.08}
.tb-knoepfe{display:inline-flex;align-items:center;gap:var(--s2)}
.bahn-auslage .tb-knoepfe a.blaettern-k:not(.knopf):not(.haken-espo){color:var(--ink2);text-decoration:none}
.bahn-auslage .tb-knoepfe a.blaettern-k.ist-heute:not(.knopf),.bahn-auslage .tb-knoepfe a.blaettern-k:not(.knopf):not(.haken-espo):hover{color:var(--ink)}
.detailkopf.anderer-tag .detailtitel{box-shadow:inset 0 -2px 0 var(--signal)}
@media (max-width:859px){
  .mit-ueberblick .ueberblick .detailkopf.anderer-tag{display:block;padding:var(--s3) 16px}
}
/* Gespräch aufräumen (28.10.) · Ausklapp-Formular im Gesprächskopf, Bestätigung über der Liste */
.k-kopf .reihenfolge,.k-kopf .aufraeumen{display:inline-block;vertical-align:top;margin-top:var(--s2)}
.k-kopf .reihenfolge{margin-right:var(--s2)}
.aufraeumen .ausklapp-form{width:min(24rem,90vw)}
@media (max-width:859px){
  .k-kopf .aufraeumen[open]{display:block}
  .k-kopf .aufraeumen .ausklapp-form{position:static;width:auto;margin-top:var(--s2);box-shadow:none}
}
.ar-feld{border:0;margin:0;padding:0;min-width:0}
.ar-feld legend{font-size:.84rem;font-weight:600;color:var(--ink2);padding:0;margin-bottom:var(--s2)}
.ar-feld .formhinweis{margin-top:var(--s2)}
.ar-geltung .pf-wahl{flex:1 1 100%}
.ar-geltung .pf-wahl label{justify-content:space-between;text-align:left}
.ar-wert{font-weight:400;color:var(--muted);overflow-wrap:anywhere}
.hinweis.aufgeraeumt{margin:var(--s3) var(--s4);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.hinweis.aufgeraeumt p{margin:0;flex:1 1 14rem;overflow-wrap:anywhere}
.hinweis.aufgeraeumt form{margin:0}
/* Hinweise im Tagesblatt (Thomas 28.10.) · geplanter Versand, ausgefallen, möglicherweise doppelt · ruhig, Linie statt Fläche, kein Karmin (bleibt „meine Frist · überfällig“) */
/* Geplanter Versand (Thomas 28.10., Variante D) · eigener schmaler Block unter den Terminen des Tages, gestrichelte Linie oben, kein Zebra, keine Nummer · Blau statt Markenfarbe, damit er sich abhebt */
:root{--versand:oklch(48% .12 250)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--versand:oklch(78% .10 250)}}
:root[data-theme="dark"]{--versand:oklch(78% .10 250)}
.vz{margin-top:var(--s2);border-top:1px dashed var(--versand)}
.nt-tag .vz{margin-top:2px}
.vz-kopf{display:flex;align-items:center;gap:6px;margin:0;padding:6px 16px 2px;font-size:.74rem;font-weight:650;letter-spacing:.03em;color:var(--versand)}
.nt-tag .vz-kopf{padding-inline:0}
.vz-kopf svg{flex:none;width:13px;height:13px}
.vz-liste{list-style:none;margin:0;padding:0}
.vz-zeile{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:0 var(--s3);align-items:baseline;padding:4px 16px}
.nt-tag .vz-zeile{padding-inline:0}
.vz-zeit{font-size:.8rem;font-weight:600;color:var(--versand);font-variant-numeric:tabular-nums;min-width:0}
.vz-flieger{display:inline-flex;vertical-align:-2px;margin-left:6px;color:var(--versand)}
.vz-flieger svg{width:13px;height:13px}
.vz-text{font-size:.86rem;line-height:1.4;color:var(--ink2);overflow-wrap:anywhere;min-width:0}
.vz-titel{display:block;color:var(--ink)}
.vz-meta{color:var(--muted);font-size:.78rem}
.vz-meta a{color:var(--ink2);text-decoration-color:var(--linie2)}
@media (max-width:859px){
  .vz-zeile{grid-template-columns:5.2rem minmax(0,1fr)}
}
.status.hw{font-weight:600}
.status.hw-aus{border-color:var(--ink2);color:var(--ink)}
.status.hw-offen{border-style:dashed;border-color:var(--akzent);color:var(--akzent)}
.status.hw-doppelt{background:var(--akzent-weich);border-color:transparent;color:var(--ink)}
.tz-hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px}
.tz-hinweis-text{font-size:.78rem;color:var(--muted)}
.tz-aus .tz-titel,.tz-aus .tz-zeit{color:var(--muted)}
.bahn-auslage .tz-aus .tz-titel a:not(.knopf){color:var(--muted);text-decoration-line:line-through;text-decoration-color:var(--muted)}
.nb-hinweis{display:block;margin-top:4px}
.nt-titel .status,.tz-titel .status{margin-left:6px;font-size:.68rem;padding:0 7px}
.kz-neu{font-size:.76rem;color:var(--muted);margin-left:6px}
.kz-rat{margin:6px 0 0;font-size:.82rem;color:var(--ink2);font-style:italic}

/* Überblick der Aufgaben ohne Auswahl · „Was ansteht“: Nächster Schritt, Liegt lange, leise Zahlenzeile (Konzept §6.6) */
.ns{margin:0 0 var(--s6);max-width:var(--lese)}
.ns-karte{position:relative;padding:var(--s4) var(--s4) var(--s3) calc(var(--s4) + 3px);background:var(--flaeche2);border-radius:var(--r);border-left:3px solid var(--kante,var(--linie2))}
.ns-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 var(--s2);font-size:.84rem;color:var(--ink2)}
.ns-meta .wer{display:inline-flex;align-items:center;gap:6px;font-weight:600;min-width:0}
.ns-meta .wer .avatar{width:20px;height:20px;font-size:.55rem;letter-spacing:0}
.ns-titel{margin:0 0 var(--s4);font-family:var(--buch);font-weight:500;font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem);line-height:1.22;overflow-wrap:anywhere;text-wrap:balance}
.ns-titel a{color:var(--ink);text-decoration:none}
.ns-titel a:hover,.ns-titel a:focus-visible{text-decoration:underline}
.ns-aktionen{margin:0}
.ns-danach{margin:var(--s4) 0 var(--s1);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.ns-liste{border-top:1px solid var(--linie)}
.liegt .formhinweis{margin:calc(var(--s1) * -1) 0 var(--s2)}
.liegt-liste{list-style:none;margin:0;padding:0}
.liegt-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--linie)}
.liegt-titel{flex:1 1 14rem;min-width:0;color:var(--ink);text-decoration:none;font-size:.94rem;line-height:1.35;overflow-wrap:anywhere}
.liegt-titel:hover,.liegt-titel:focus-visible{text-decoration:underline}
.liegt-meta{flex:1 1 100%;order:3;font-size:.78rem;color:var(--muted)}
.liegt-aktionen{display:inline-flex;flex-wrap:wrap;gap:var(--s2)}
.liegt-aktionen .knopf{font-size:.8rem;padding:4px 10px;min-height:32px}
.liegt-aktionen .ausklapp-form{top:calc(100% + 6px)}
.ns-fuss{display:flex;flex-wrap:wrap;gap:2px var(--s3);margin:var(--s5) 0 0;font-size:.76rem;color:var(--muted)}
.ns-zahl .mono{color:var(--ink2)}
@media (max-width:859px){
  .ns-karte{padding-right:var(--s3)}
  .ns-aktionen .knopf,.liegt-aktionen .knopf{min-height:44px}
  .ns-aktionen .ausklapp-form,.liegt-aktionen .ausklapp-form{left:0;max-width:calc(100vw - 32px)}
  .liegt-aktionen .ausklapp:last-child .ausklapp-form{left:auto;right:0}
  .mit-ueberblick .ns{margin-inline:16px}
}
/* Räume mit Modulen (28.10.) · nächster Termin unter dem Raumnamen im Tagesblatt, „Module und Termine“ in der Raum-Auslage */
.nr-termin{display:block;font-size:.8rem;line-height:1.35;color:var(--ink2);overflow-wrap:anywhere}
.nr-plaetze{display:block;font-size:.8rem;line-height:1.35;color:var(--ink2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.nr-weitere{color:var(--muted)}
.nr-oea{display:block;font-size:.8rem;line-height:1.35;color:var(--ink2)}
.nr-oea.heute{font-weight:700;color:var(--akzent)}
.rt-zeile.oea .z-titel{font-style:italic}
.rt-zeile.vorbei .z-titel,.rt-zeile.vorbei .sp-wann{color:var(--muted)}
.rt-zeile.naechster{box-shadow:inset 3px 0 0 var(--signal);background:var(--akzent-weich)}
.rt-zeile .sp-wann{font-size:.8rem;white-space:nowrap}
.rt-marke{display:inline-block;margin-left:4px;font-size:.7rem;font-weight:700;color:var(--akzent);letter-spacing:.02em}
@media (max-width:700px){.rt-zeile .sp-wann{white-space:normal}}

/* Haken, Fortschritt und Notiz im Tagesblatt (Thomas 28.10.) · Haken rechts am Zeilenende (Desktop und Handy, Thomas 28.10.), Zeitspalte bündig mit Zeilen ohne Haken,
   abgehakt: gedämpft und durchgestrichen · Termine nur in Dao, Aufgaben über den Erledigen-Weg · Notizfeld unter der Zeile,
   einzeilig und mitwachsend · Fortschritt als schmale Leiste unter dem Kopf */
#termine-heute .tz{grid-template-columns:5.6rem minmax(0,1fr) auto var(--zeile);padding-right:6px}
#termine-heute .tz-zeit{grid-column:1;grid-row:1}
#termine-heute .tz-text{grid-column:2;grid-row:1 / span 2}
#termine-heute .tz-notiz{grid-column:3;grid-row:1;align-self:start}
#termine-heute .tz-haken{grid-column:4;grid-row:1 / span 2;align-self:start;display:flex;justify-content:center;margin:-11px 0 -11px}
#termine-heute .notiz-feld{grid-column:2 / -1;grid-row:3}
.tz-haken .haken{margin:0}
.haken.gesetzt .haken-feld,.haken-zeichen .haken-feld{display:grid;place-items:center;background:var(--ink2);border-color:var(--ink2);color:var(--flaeche)}
.haken.gesetzt:hover .haken-feld{background:var(--flaeche);color:var(--ink2);border-color:var(--ink)}
.haken-zeichen{display:grid;place-items:center;width:var(--zeile);height:var(--zeile)}
.tz-erledigt .tz-zeit,.tz-erledigt .tz-titel,.tz-erledigt .tz-meta{color:var(--muted)}
.tz-erledigt .tz-titel{text-decoration:line-through;text-decoration-color:var(--muted)}
.bahn-auslage .tz-erledigt .tz-titel a:not(.knopf){color:var(--muted);text-decoration-line:line-through;text-decoration-color:var(--muted)}
.notiz-symbol{display:inline-grid;place-items:center;width:32px;height:32px;margin:-6px -8px -6px 0;border-radius:6px;color:var(--muted)}
.notiz-symbol.vorhanden{color:var(--ink2)}
.notiz-symbol:hover{background:var(--flaeche2);color:var(--ink)}
.bahn-auslage a.notiz-symbol:not(.knopf){color:var(--muted);text-decoration:none}
.bahn-auslage a.notiz-symbol.vorhanden:not(.knopf){color:var(--ink2)}
.notiz-feld{min-width:0;margin:var(--s2) 0 var(--s1)}
.nf-form{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s2)}
.nf-form textarea{flex:1 1 9rem;min-width:0;min-height:38px;max-height:12rem;resize:none;field-sizing:content;overflow-y:auto;font-family:var(--buch);font-size:1rem;line-height:1.45;padding:7px 10px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink)}
.nf-form textarea::placeholder{color:var(--muted)}
.nf-form .knopf{min-height:38px;padding:6px 14px}
.nf-zu{align-self:center;font-size:.84rem;color:var(--muted)}
.bahn-auslage a.nf-zu:not(.knopf){color:var(--muted);text-decoration-color:var(--linie2)}
.nf-liste{list-style:none;margin:0 0 var(--s2);padding:0;max-width:var(--lese)}
.nf-liste li{font-family:var(--buch);font-size:1rem;line-height:1.5;padding:2px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.nf-liste time{font-family:var(--font);font-size:.76rem;color:var(--muted);margin-right:6px;white-space:nowrap}
.notizen .nf-klapp{margin-top:var(--s1)}
.notizen .nf-klapp .notiz-feld{margin-top:var(--s2)}
.nach-haken{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche)}
.nh-kopf{margin:0 0 var(--s1);font-size:.9rem;color:var(--ink2);overflow-wrap:anywhere}
.nh-kopf a{color:inherit;text-decoration-line:line-through;text-decoration-color:var(--muted)}
.bahn-liste .nach-haken{margin:var(--s3) 16px}
.tf{display:flex;align-items:center;gap:var(--s3);margin:var(--s2) 0 var(--s4);font-size:.82rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.tf-leiste{flex:0 1 14rem;height:6px;border:0;border-radius:3px;background:var(--flaeche3);color:var(--ink2);overflow:hidden;-webkit-appearance:none;appearance:none}
.tf-leiste::-webkit-progress-bar{background:var(--flaeche3);border-radius:3px}
.tf-leiste::-webkit-progress-value{background:var(--ink2);border-radius:3px}
.tf-leiste::-moz-progress-bar{background:var(--ink2);border-radius:3px}
/* Tagesblatt kompakt (Variante C, Thomas 03.11.) · Kopf in einer Zeile mit dem Fortschritt rechts, Knöpfe 28 px (am Handy 44),
   „alle · offene“ rechts im Abschnittskopf, Zeilen enger, mehr Luft zwischen den Gruppen, „Raum betreten“ als kleiner Konturknopf */
.bahn-auslage .detailkopf.tb-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--linie2);margin-bottom:var(--s2)}
.tb-kopf .ak-art{grid-column:1/-1}
.tb-kopf .blaettern-k{min-height:28px;font-size:.8rem;padding:0 10px}
.tb-kopf .blaettern-k.pfeil{min-width:30px;padding:0 6px;font-size:1.05rem}
.tb-kopf .tf{margin:0 0 4px;gap:var(--s2);font-size:.76rem;color:var(--muted)}
.tb-kopf .tf-leiste{flex:0 0 8rem;height:4px}
.gk-mit-schalter{display:block}   /* seit 05.11. unter dem Kopf: „Erledigtes: zeigen | ausblenden“ ist zu breit für die Zeile daneben */
.gk-mit-schalter .zeigen-seg{margin:var(--s2) 0 4px}
.zeigen-seg .segment{min-height:22px;padding:2px 8px;font-size:.72rem}
.seg-etikett{padding:0 4px 0 8px;font-size:.72rem;color:var(--muted);white-space:nowrap}
.zeigen-hinweis{margin:var(--s2) 0 0;font-size:.76rem;color:var(--muted)}
.tb-kopf~.gruppe,.tb-kopf~.ub-spalten .gruppe{margin-bottom:var(--s7)}
.tb-kopf~.gruppe .gruppenkopf,.tb-kopf~.ub-spalten .gruppenkopf{padding-top:var(--s3)}
.tz{padding-top:6px;padding-bottom:6px}
.tz-titel{font-size:.9rem}
.ueberblick .haken-feld{width:18px;height:18px;border-width:1.5px}
.ueberblick .haken:hover .haken-feld{background:var(--hauch);border-color:var(--ink)}
.bahn-auslage a.tz-raum:not(.knopf){position:relative;min-height:24px;margin-top:4px;padding:0 9px;border:1px solid var(--linie2);border-radius:6px;background:var(--flaeche);
  font-size:.74rem;font-weight:600;color:var(--ink);text-decoration:none}
.bahn-auslage a.tz-raum:not(.knopf):hover{border-color:var(--ink2);background:linear-gradient(var(--hauch),var(--hauch)),var(--flaeche)}
@media (max-width:859px){
  .tb-kopf .blaettern-k{min-height:var(--tippflaeche)}
  .tb-kopf .blaettern-k.pfeil{min-width:var(--tippflaeche)}
  .bahn-auslage a.tz-raum:not(.knopf){min-height:26px}
  .bahn-auslage a.tz-raum:not(.knopf)::before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tippflaeche);transform:translateY(-50%)}
  /* am Handy ist der Kopf ausgeblendet (außer an anderen Tagen), der Fortschritt bleibt als eigene Zeile */
  .mit-ueberblick .ueberblick .detailkopf.tb-kopf{display:block;padding:var(--s4) 16px 0;border:0;margin:0}
  .mit-ueberblick .ueberblick .detailkopf.tb-kopf:not(.anderer-tag)>:not(.tf){display:none}
  .mit-ueberblick .ueberblick .detailkopf.tb-kopf .tf{margin:var(--s2) 0 0}
  .tb-kopf .tf-leiste{flex:0 1 10rem}
  .gk-mit-schalter{display:block}
  .gk-mit-schalter .gruppenkopf{padding-right:16px}
  .gk-mit-schalter .zeigen-seg{margin:var(--s2) 16px 0}
  .zeigen-seg .segment{min-height:var(--tippflaeche);padding-inline:12px;font-size:.8rem}
  .zeigen-hinweis{margin:var(--s2) 16px 0}
}
.verlauf li{grid-template-areas:"punkt was" "punkt text" "punkt wann"}
.verlauf .verlauf-text{grid-area:text;font-family:var(--buch);font-size:.98rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
@media (max-width:859px){
  #termine-heute .tz{grid-template-columns:5.2rem minmax(0,1fr) auto var(--zeile)}
  #termine-heute .notiz-feld{grid-column:1 / -1}
  .notiz-symbol{width:44px;height:44px;margin:-12px 0}
  .mit-ueberblick .ueberblick .tf{margin:var(--s4) 16px 0}
  .mit-ueberblick .ueberblick .nach-haken{margin:var(--s4) 16px 0}
  .nf-form .knopf{min-height:44px}
  .nf-zu{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .nf-form textarea{font-size:16px;min-height:44px}
}

/* Nach dem Haken per fetch (notiz.js): die Zeile bleibt gedämpft stehen, der Block „Erledigt: …“ steht direkt darunter ·
   Sprungziele (#t-…, #a-…) halten Abstand zur festen Kopfleiste und am Handy zur Leiste unten */
.ist-erledigt{opacity:.6}
.ist-erledigt .lz-titel,.ist-erledigt .ns-titel{text-decoration:line-through;text-decoration-color:var(--muted)}
.nach-haken-halter{list-style:none;padding:var(--s2) 16px 0}
.ns .nach-haken-halter{padding:var(--s2) 0 0}
.nh-gespeichert{margin:var(--s1) 0 0;font-size:.84rem;color:var(--muted)}
.tz,.lz,.nach-haken,.notizen{scroll-margin-top:calc(var(--kopf) + var(--unter,0px) + 16px)}
@media (max-width:859px){.tz,.lz,.nach-haken,.notizen{scroll-margin-bottom:72px}}

/* Belege (Plan Belege nach Lexoffice, Scheibe 2) · Zeile: Absender und Datum, Betreff, Zustand im Zeilen-Link, darunter die
   Datei mit eigenem Öffnen-Link (kein verschachtelter Link). Zahl offener Belege leise an „Mehr“ und am Menüeintrag, nie Rot. */
.menue-zahl,.un-zahl{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 5px;border-radius:8px;border:1px solid var(--linie2);color:var(--ink2);font-size:.76rem;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}
.menue-zahl{margin-left:auto}
.un-zahl{margin-left:2px}
.belege-liste{list-style:none;margin:0;padding:0}
.bz{border-bottom:1px solid var(--linie);padding:0 0 var(--s2)}
.bz:hover{background:var(--flaeche2)}
.bz.aktiv{background:var(--akzent-weich);box-shadow:inset -3px 0 0 var(--signal)}
.bz-link{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"wer zeit" "betreff betreff" "zustand zustand";gap:2px var(--s3);padding:10px 16px 2px;color:var(--ink);text-decoration:none;min-height:44px}
.bz-wer{grid-area:wer;font-weight:600;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-zeit{grid-area:zeit;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bz-betreff{grid-area:betreff;font-size:.9rem;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bz-zustand{grid-area:zustand;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.bz-datei{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;padding:0 16px;font-size:.82rem;color:var(--ink2)}
.bz-datei .zeichen{width:16px;height:16px;color:var(--muted)}
.bz-name{overflow-wrap:anywhere;min-width:0}
.bz-oeffnen{display:inline-flex;align-items:center;min-height:32px;padding:0 6px;font-weight:600;color:var(--ink)}
.bz-fehlt,.beleg-fehlt{font-weight:600;color:var(--ink)}
.bz-ohne{color:var(--muted)}
.beleg-satz{margin:0 0 var(--s3)}
/* Belege buchen: Vorschlag (b1) und Bearbeiten (b2) · Plan Belege buchen, Task 9 */
.bb-werte{max-width:34rem}
.bb-werte dd.bb-betrag{font-variant-numeric:tabular-nums}
.bb-werte dd b{font-weight:700}
.bb-geaendert{display:inline-block;margin-left:var(--s2);font-size:var(--t-meta);color:var(--muted);font-style:italic}
.bb-dateien{list-style:none;margin:0;padding:0;max-width:40rem}
.bb-datei{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:2px var(--s3);align-items:start;padding:10px 12px;border-top:1px dashed var(--linie)}
.bb-datei:first-child{border-top:0}
.bb-datei .zeichen{width:18px;height:18px;color:var(--muted);margin-top:2px}
.bb-datei-name{font-weight:600;overflow-wrap:anywhere;min-width:0}
.bb-datei-folge{grid-column:2;font-size:.86rem;color:var(--ink2)}
.bb-datei .bz-oeffnen{grid-row:1/3;grid-column:3;align-self:center}
.bb-datei.bb-gebucht{background:var(--akzent-weich);box-shadow:inset 3px 0 0 var(--signal)}
.bb-datei.bb-verworfen .bb-datei-name{color:var(--ink2);font-weight:500}
.bb-paar{margin:var(--s2) 0 0;font-size:.88rem;color:var(--ink2);max-width:var(--lese)}
.bb-paar b{color:var(--ink)}
.bb-form{max-width:40rem;gap:var(--s4);margin-bottom:var(--s6)}
.bb-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.bb-posten-kopf,.bb-posten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.bb-posten-kopf{font-size:.78rem;font-weight:600;color:var(--muted)}
.bb-posten-name{display:none}
.termin-form .bb-posten input,.termin-form .bb-posten select{text-align:right;font-variant-numeric:tabular-nums}
.bb-summe{margin:0;font-size:.86rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.termin-form.bb-form input[aria-invalid=true],.termin-form.bb-form select[aria-invalid=true]{border:2px solid var(--ink);background:var(--flaeche2)}   /* stärker als .termin-form input[type=text] weiter unten · Rot nur .v-zahl */
.bb-feldfehler{margin:2px 0 0;font-size:.84rem;font-weight:600;color:var(--ink);display:flex;gap:6px;align-items:baseline}
.bb-feldfehler::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink);transform:translateY(-1px)}
.bb-sophie{font-size:var(--t-meta);color:var(--muted);font-weight:400;font-style:italic}
.bb-knoepfe{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end;align-items:center}
.bb-knoepfe .bb-links{margin-right:auto}
@media (max-width:859px){
  .bb-zwei{grid-template-columns:minmax(0,1fr)}
  .bb-posten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-posten-kopf{display:none}
  .bb-posten-name{display:block;font-size:.78rem;font-weight:600;color:var(--muted)}
  .bb-datei{grid-template-columns:20px minmax(0,1fr)}
  .bb-datei .bz-oeffnen{grid-row:auto;grid-column:2;justify-self:start;min-height:44px;padding:0}
  .bb-werte{max-width:none}
  .bb-detail .aktionsleiste .knopf,.bb-knoepfe .knopf,.beleg-detail .aktionsleiste .knopf{min-height:44px}
}
@media (max-width:859px){.bz-oeffnen{min-height:44px}}
/* Belege buchen: Logbuch /belege (b3 Gebucht, b4 Fehler) · Plan Belege buchen, Task 14 */
.bz-link.bb-zwei-zeilen{grid-template-areas:"wer zeit" "betreff betreff"}
.bz-werte{grid-area:betreff;font-size:.88rem;color:var(--ink2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bz-werte b{color:var(--ink);font-weight:650}
.bz-fehlertext{grid-area:betreff;font-size:.88rem;color:var(--ink);overflow-wrap:anywhere;display:flex;gap:6px;align-items:baseline}
.bz-fehlertext::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink);transform:translateY(-1px)}
.segment .s-zahl{margin-left:6px;font-variant-numeric:tabular-nums;opacity:.75}
.segment .s-zahl.v-zahl{opacity:1;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:.72rem}   /* Fehler-Zahl im Reiter · Rot nur über .v-zahl (Spec §5) */
.bb-fehlerkasten{margin:0 0 var(--s4)}
.bb-fehlerkasten p{margin:0}
.bb-fehlerkasten .formhinweis{margin-top:var(--s2);font-weight:400}
.bb-weiter{margin:var(--s3) 16px}
@media (max-width:859px){.bb-weitere{min-height:44px}}
/* Tagesblatt · „Zeigen alle · offene“ über „Termine heute“ im Stil der Aufgaben-Leiste (.sortierleiste .sl-a), nur Feinheiten */
/* Termin-Formular (Phase 2 Scheibe A) · anlegen und bearbeiten in der Auslage, Handy: eine Spalte, Tippflächen ab 44 px */
.termin-form{display:flex;flex-direction:column;gap:var(--s5);max-width:42rem;margin-top:var(--s4)}
.termin-form fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.termin-form legend{padding:0 0 var(--s2);margin:0 0 var(--s2);width:100%;font-size:1rem;font-weight:700;color:var(--ink);border-bottom:1px solid var(--linie2)}
.termin-form label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;font-weight:600;color:var(--ink2)}
.termin-form input[type=text],.termin-form input[type=url],.termin-form input[type=date],.termin-form input[type=time],.termin-form input[type=search],.termin-form select{box-sizing:border-box;width:100%;padding:0 12px;font:inherit;font-size:1rem;font-weight:400;color:var(--ink);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r)}
.termin-form textarea{box-sizing:border-box;width:100%;min-height:6.5rem;padding:10px 12px;font:inherit;font-size:1rem;font-weight:400;color:var(--ink);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r);resize:vertical}
.tf-zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--s3)}
.termin-form label.tf-haken{flex-direction:row;align-items:center;gap:var(--s3);min-height:44px;font-size:.95rem;font-weight:400;color:var(--ink)}
.termin-form .tf-haken input{width:20px;height:20px;margin:0}
.tf-wahl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tf-wahl li{border-bottom:1px solid var(--linie)}
.termin-form .tf-wahl label,.ueber-wen-form .tf-wahl label{flex-direction:row;align-items:center;gap:var(--s3);min-height:46px;padding:4px 0;font-size:.95rem;font-weight:400;color:var(--ink)}
.tf-wahl input{width:20px;height:20px;margin:0;flex:none}
.tf-wahl .tf-name{font-weight:600}
.tf-mail{color:var(--ink2);font-size:.84rem;overflow-wrap:anywhere}
.tf-ohne-mail{color:var(--muted);font-size:.84rem;font-style:italic}
.tf-suche{position:relative;display:flex;gap:var(--s2);align-items:flex-end}
.tf-suche label{flex:1;min-width:0}
.tf-suche .knopf{flex:none;min-height:46px}
.tf-aktionen{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.termin-form .formhinweis{font-size:.84rem}
@media (max-width:859px){.tf-suche{flex-direction:column;align-items:stretch}.tf-aktionen .knopf{flex:1 1 40%}}
/* Merker „Gäste wissen es noch nicht“ (L4) in der Auslage */
.mitteilung-offen{margin:var(--s3) 0;padding:var(--s3) var(--s4);border-radius:var(--r);border:1px solid var(--akzent);background:var(--akzent-weich);color:var(--ink);font-size:.92rem}
/* Phase 2 C · Einladen, Änderung mitteilen, Absagen · Knöpfe in der Auslage, Vorschau je Gast, Mail im Rahmen (eigene CSP) */
.mitteilen-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0}
.mitteilen-gast{margin:var(--s4) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--linie2)}
.mitteilen-gast .eigenschaften dd{overflow-wrap:anywhere}
.mitteilen-link{font-size:.86rem;overflow-wrap:anywhere;word-break:break-all}
.mitteilen-rahmen{display:block;box-sizing:border-box;width:100%;height:36rem;margin:var(--s3) 0;border:1px solid var(--linie2);border-radius:var(--r);background:#fff;color-scheme:light}
.mitteilen-klartext{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.86rem;margin:var(--s2) 0 0;padding:var(--s3);border-radius:var(--r);background:var(--flaeche2);color:var(--ink)}
.termin-entwuerfe{margin:var(--s3) 0 var(--s5)}
.mitteilen-entwuerfe{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.mitteilen-entwuerfe li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:.92rem}
.mitteilen-entwuerfe form{display:inline}
@media (max-width:700px){.mitteilen-rahmen{height:30rem}}
/* Suche beim Tippen (termin_suche.js) · Chips, Vorschlagsliste · ohne Skript bleibt Knopf und Kästchenliste */
.tf-standard{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
.tf-suchblock.js .tf-ohne-js{display:none}
.tf-chips{list-style:none;margin:0 0 var(--s2);padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.tf-chips:empty{display:none}
.tf-chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:36px;padding:2px 4px 2px var(--s3);border:1px solid var(--linie2);border-radius:999px;background:var(--flaeche2);color:var(--ink);font-size:.92rem;max-width:100%}
.tf-chip-text{min-width:0;overflow-wrap:anywhere}
.tf-chip-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--ink2);font-size:1.25rem;line-height:1;cursor:pointer}
.tf-chip-x:hover{background:var(--flaeche3);color:var(--ink)}
.tf-liste{position:absolute;z-index:20;top:100%;left:0;right:0;margin:4px 0 0;padding:4px;list-style:none;max-height:18rem;overflow-y:auto;background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r);box-shadow:0 12px 32px var(--schatten)}
.tf-liste[hidden]{display:none}
.tf-option,.tf-leer{display:flex;flex-wrap:wrap;gap:2px var(--s2);align-items:baseline;min-height:44px;padding:8px 10px;border-radius:6px;font-size:.95rem;color:var(--ink);cursor:pointer}
.tf-leer{color:var(--muted);font-style:italic;cursor:default}
.tf-option.aktiv,.tf-option:hover{background:var(--akzent-weich)}
.tf-option .tf-name{font-weight:600}
.termin-auslage>.formhinweis{margin:var(--s2) 0 var(--s3)}
.kal-lz.leise .kal-titel,.kal-lz.leise .kal-zeit{color:var(--muted);font-weight:400}
/* Videoraum (Phase 2 B) · Links mit Kopieren-Knopf in Formular und Auslage, Handy: Link unter dem Namen, Knopf darunter */
.video-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.vl-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3);align-items:center;padding:var(--s3);border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche2)}
.vl-name{grid-column:1 / -1;font-size:.84rem;font-weight:600;color:var(--ink2)}
.vl-url{min-width:0;overflow-wrap:anywhere;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.84rem;color:var(--ink);user-select:all}
.vl-kopieren{min-height:44px}
@media (max-width:859px){.vl-zeile{grid-template-columns:1fr}.vl-kopieren{width:100%}}
.kopier-puffer{position:fixed;left:-9999px;top:0;opacity:0}

/* ---------- Scheibe D · Antworten, Weiterleiten, Entwürfe im Gespräch (Konzept §6.6, §6.7, §6.10) ---------- */
/* Entwurf als Brief: gestrichelt Safran (wie .entwurf), Zustandszeile und leise Knöpfe darunter · keine neuen Farben */
.nachricht.aus.entwurf-brief{border:1.5px dashed var(--signal)}
.ew-zustand{margin:var(--s3) 0 0;font-size:.84rem;font-weight:600;color:var(--ink2)}
.ew-zustand.wartet{display:inline-block;padding:2px 8px;border-radius:var(--r);background:var(--akzent-weich);color:var(--ink)}
.ew-zustand.fehler{padding:var(--s2) var(--s3);border:2px solid var(--ink);border-radius:var(--r);color:var(--ink)}
.ew-aktionen{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s2);margin-top:var(--s3)}
.ew-aktionen form{margin:0}
.ew-aktionen details[open]{flex-basis:100%}
/* Klappflächen der Mail-Formulare liegen im Fluss (keine schwebende Fläche wie .ausklapp-form) */
.mail-flaeche>summary{list-style:none;cursor:pointer}
.mail-flaeche>summary::-webkit-details-marker{display:none}
.mail-flaeche[open]>summary.knopf.leise{border-color:var(--ink)}
.mail-form{max-width:none;margin-top:var(--s3);padding:var(--s4);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r)}
.mail-form.offen{margin-top:0}
.mail-form.klein{max-width:24rem}
.mail-form select{font-size:1rem;padding:0 10px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink);width:100%}
.mail-form textarea.lesetext{font-family:var(--buch);font-size:1.06rem;line-height:1.6;resize:vertical;min-height:10rem}
.mail-form input[type=file]{padding:8px 0;border:0;background:none}
.mail-form .mf-wahl{display:flex;align-items:center;gap:var(--s2);font-size:.88rem;color:var(--ink2)}
.mail-form .mf-wahl input{width:auto;margin:0}
.mail-form .mf-wahl label{display:inline;font-weight:500}
.mail-form .mf-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mail-form .fehler{margin:0}
.mail-neu .mail-form{padding:0;border:0;background:none}
/* Scheibe E · Vorlage wählen und einsetzen · Auswahl und Knopf in einer Zeile, das eigene Formular hat nur versteckte Felder */
.vorlage-form{display:none}
.mail-form .mf-vorlage{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2)}
.mail-form .mf-vorlage label{flex:1 1 14rem}
/* Aktionsleiste unter dem Verlauf · offen nimmt eine Fläche die ganze Breite */
.gespraech-leiste{margin:var(--s5) 0 0}
.gespraech-leiste details[open]{flex-basis:100%;order:2}
@media (max-width:859px){
  /* Leiste unten (Antworten · Weiterleiten), die offene Fläche darüber, scrollbar */
  .ist-detail .gespraech-leiste details[open]{flex-basis:auto;order:0}
  .ist-detail .gespraech-leiste .mail-form{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:31;max-height:calc(100vh - 150px);overflow-y:auto;margin:0;border-radius:var(--r) var(--r) 0 0;box-shadow:0 -12px 32px var(--schatten)}
  .mail-form input,.mail-form select,.mail-form textarea{font-size:16px}
  .ew-aktionen .knopf,.mail-form .knopf{min-height:44px}
}

/* Räume-Board (Spec 2026-10-30) · Spalten fester Breite, waagrecht scrollbar in der Auslage, die Seite selbst nie ·
   das Board nimmt die volle Breite der Auslage (sonst endet es bei --breit) */
.bahn-auslage:has(.board){max-width:none}
.board-auslage,.app.oben .bahn-auslage>.board-auslage{min-width:0;max-width:none}   /* Board nutzt die volle Auslagenbreite (sonst 62rem, rechts abgeschnitten) */
.board-hinweis{margin:0 0 var(--s3);color:var(--muted);font-size:.9rem}
.board{position:relative;display:flex;align-items:stretch;gap:var(--s3);overflow-x:auto;padding:0 0 var(--s3);scroll-snap-type:x proximity;overscroll-behavior-x:contain}   /* Spalten gleich hoch: die ganze Spalte ist Ablageziel, nicht nur der Teil bis zur letzten Karte */
.board-spalte{flex:0 0 17rem;min-width:0;scroll-snap-align:start;background:var(--flaeche2);border-radius:var(--r);padding:var(--s2)}
.board-spalte.eingeklappt{flex-basis:11rem}
.board-spalte.eingeklappt[open]{flex-basis:17rem}
.board-spalte.bs-leer,.board-spalte.eingeklappt.bs-leer,.board-spalte.eingeklappt.bs-leer[open]{flex-basis:9.5rem}   /* leere Spalte: nur Kopf-Breite, bleibt Ziehziel (Mindesthöhe der Kartenliste) · nicht .leer, das ist der Leer-Satz mit Strich */
.bs-kopf{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 var(--s2);padding:8px var(--s3);border-radius:var(--r);background:var(--knopf);color:var(--knopftext);font-size:.92rem;font-weight:600}   /* Spaltenkopf als dunkles Band */
.bs-kopf .bs-zahl,.bs-kopf .bs-summe,summary.bs-kopf::before{color:inherit;opacity:.78}
summary.bs-kopf{cursor:pointer;list-style:none}
summary.bs-kopf::-webkit-details-marker{display:none}
summary.bs-kopf::before{content:"›";flex:0 0 auto}
.board-spalte[open]>summary.bs-kopf::before{transform:rotate(90deg)}
summary.bs-kopf:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.bs-ueber{display:flex;align-items:baseline;gap:var(--s2);flex:1 1 auto;min-width:0;margin:0;font:inherit;color:inherit}
.bs-zahl{color:var(--muted);font-weight:400}
.bs-summe{margin-left:auto;color:var(--ink2);font-weight:400;font-size:.85rem}
.bs-karten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);min-height:2.5rem}
.board-karte{background:var(--flaeche);border:1px solid var(--linie);border-left:3px solid var(--kante,var(--linie2));border-radius:var(--r);padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-wer{display:flex;align-items:center;gap:var(--s2);margin:0;font-weight:600;color:var(--ink);min-width:0}
.bk-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-titel{color:var(--ink);text-decoration:none;font-size:.95rem;overflow-wrap:anywhere}
.bk-titel:hover,.bk-titel:focus-visible{text-decoration:underline}
.bk-org,.bk-meta,.bk-zeile{margin:0;color:var(--ink2);font-size:.85rem}
.bk-meta{display:flex;gap:var(--s2);flex-wrap:wrap}
.bk-betrag{margin-left:auto;color:var(--ink)}
.bk-fehlt{margin:0;color:var(--muted);font-size:.8rem;font-style:italic}
/* Board Veranstaltungen (Phase 5 D Task 3, Vorschau d4) · Plätze, Espo-Zeile, sieben schmalere Spalten */
.bk-plaetze{font-variant-numeric:tabular-nums}
.bk-plaetze b{color:var(--ink)}
.bk-espo{margin:var(--s1) 0 0;font-size:.78rem;color:var(--muted)}
@media (min-width:860px){.board[data-board="veranstaltung"] .board-spalte{flex-basis:14rem}.board[data-board="veranstaltung"] .board-spalte.eingeklappt{flex-basis:9rem}.board[data-board="veranstaltung"] .board-spalte.eingeklappt[open]{flex-basis:14rem}.board[data-board="veranstaltung"] .board-spalte.bs-leer,.board[data-board="veranstaltung"] .board-spalte.eingeklappt.bs-leer,.board[data-board="veranstaltung"] .board-spalte.eingeklappt.bs-leer[open]{flex-basis:8rem}}   /* drei sichtbare Spalten passen neben die Liste */
@media (max-width:859px){
  .board-spalte,.board-spalte.eingeklappt[open]{flex-basis:85vw}
  .board-spalte.eingeklappt{flex-basis:60vw}
  .bk-titel{display:flex;align-items:center;min-height:44px}
  summary.bs-kopf{min-height:44px;align-items:center}
}

/* Räume-Board · Aktionen auf der Karte (nur wenn Dao führt) · Variante A „Leise Zeile“ (Thomas 30.10.): unter einer feinen
   Linie „<Stufe> ▾ · Wiedervorlage ▾“ als Textknöpfe ohne Rahmen. Mit Skript (`.board.js`) ist „warum?“ zu, bis eine Karte
   in Abgesagt oder Losgelassen fällt oder die Auswahl dort steht, und die Tafeln sind zu, bis ihr Knopf sie öffnet.
   Ohne Skript stehen „warum?“ mit „Stufe setzen“ und die Tafeln offen da, die Klappknöpfe fehlen. */
.bk-tk{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:.8rem;font-weight:550;line-height:1.3;color:var(--ink2);background:none;border:0;border-radius:4px;padding:3px 4px;cursor:pointer;text-decoration:none;white-space:nowrap}
.bk-tk:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bk-tk:focus-visible{outline:2px solid var(--fokus);outline-offset:1px}
.bk-tk-stark{color:var(--ink);font-weight:650;border:1px solid var(--linie2);padding:3px 10px}
.bk-tk-stark:hover{border-color:var(--ink);text-decoration:none}
.bk-tk-gefahr{color:var(--ink);font-weight:650;border:1.5px solid var(--ink);padding:3px 10px}
.bk-tk-gefahr:hover{background:var(--ink);color:var(--flaeche);text-decoration:none}
.bk-tk-warn{color:var(--akzent)}
.bk-tk[hidden]{display:none}
.bk-tk-setzen{color:var(--ink);font-weight:650;text-decoration:underline;text-underline-offset:3px}   /* Stufe per Tastatur vorgemerkt (board.js) */
.bk-stufe{display:block;margin:var(--s1) 0 0}
.bk-verschoben{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;margin:var(--s1) 0 0;font-size:.75rem;color:var(--akzent)}
.bk-verschoben .bk-tk{margin-left:-4px;font-size:.75rem;font-weight:650;text-decoration:underline;text-underline-offset:3px}
.bk-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:0 1px;margin:0 -4px;padding-top:var(--s1);border-top:1px solid var(--linie)}
.bk-punkt{color:var(--linie2);font-size:.8rem}
.bk-leiste [aria-expanded="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Stufe als Textknopf mit ▾ · die Auswahl selbst ohne Rahmen, das Dreieck aus zwei Verläufen (folgt dem Farbschema) */
select.bk-wahl{appearance:none;-webkit-appearance:none;field-sizing:content;max-width:9.5rem;overflow:hidden;text-overflow:ellipsis;padding-right:14px;color:var(--ink);
  background-color:transparent;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-repeat:no-repeat;background-size:4px 4px;background-position:right 7px center,right 3px center}
select.bk-wahl:hover{text-decoration:underline}
.bk-tafel{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:var(--s1) 0 0;padding:var(--s2);border:1px solid var(--linie);border-radius:6px;background:var(--flaeche2)}
.bk-tafel[hidden]{display:none}
.bk-tafel>form{margin:0}
.bk-tafel-kopf{margin:0;font-size:.75rem;font-weight:600;color:var(--ink2)}
.board.js .bk-tafel-kopf,.board.js .bk-ohne-js,.board:not(.js) [data-tafel]{display:none}
.bk-datum,.bk-los{display:flex;flex-wrap:wrap;align-items:end;gap:var(--s1) var(--s2);margin:0}
.bk-datum label,.bk-los label,.bk-grund{display:flex;flex-direction:column;gap:2px;font-size:.75rem;font-weight:600;color:var(--ink2)}
.bk-datum input,.bk-los input,.bk-grund input{font:inherit;font-size:.85rem;font-weight:400;padding:0 6px;border:1px solid var(--linie2);border-radius:4px;background:var(--flaeche);color:var(--ink);min-width:0}
.bk-los input,.bk-grund input{width:100%}
.bk-los label,.bk-grund{flex:1 1 100%}
.bk-los .formhinweis{flex:1 1 100%;font-size:.75rem}
/* „warum?“ nach Ziehen oder Wahl von Abgesagt/Losgelassen (board.js setzt .grund-offen) */
.bk-grund-zeile{display:flex;flex-wrap:wrap;align-items:end;gap:var(--s1) var(--s2);margin-top:var(--s1)}
.board.js .bk-grund-zeile{display:none}
.board.js .bk-stufe.grund-offen .bk-grund-zeile{display:flex}
.bk-abbrechen{display:none}
.board.js .bk-stufe.grund-offen .bk-abbrechen{display:inline-flex}
.board-spalte.vorgemerkt{outline:2px solid var(--fokus);outline-offset:2px}   /* Ziel einer Karte, die noch auf „warum?“ wartet */
.board.js .board-karte[draggable="true"]{cursor:grab}
.board-karte.zieht{opacity:.5}
.board-spalte.ziel{outline:2px dashed var(--linie2);outline-offset:2px}
@media (max-width:859px){
  .bk-tk{min-height:44px;padding:0 8px;font-size:.88rem}
  select.bk-wahl{max-width:none;padding-right:20px;background-position:right 11px center,right 7px center}
  .bk-tafel .bk-tk:not(.bk-tk-stark):not(.bk-tk-gefahr){width:100%}
  .bk-datum input,.bk-los input,.bk-grund input{font-size:1rem}
}
.board-rueck{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
/* Räume-Board · Herkunft im Kopf, Block „Über wen?“ in der Raum-Auslage */
.bk-herkunft{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.ueber-wen-form{display:flex;flex-direction:column;gap:var(--s2)}
/* Dateien ablegen (30.10.) · im Gespräch je Anhang „abgelegt bei“ und „In Dao ablegen“ (Fläche im Fluss), bei Mensch,
   Organisation und Raum der Abschnitt „Dateien“ mit „lösen“ und Hochladen */
.n-ablagen{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.n-ablage{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);font-size:.84rem;color:var(--ink2)}
.na-name{font-weight:600;overflow-wrap:anywhere}
.klammer{display:inline-block;vertical-align:-2px;margin-right:4px;color:var(--muted);flex:none}
.gz-meta .klammer{margin:0 0 0 4px}
.ew-anhang{white-space:nowrap}
.ew-anhang a{color:inherit}
.na-name a{color:inherit}
a.neuer-tab::after{content:"\2009\2197";font-weight:400;opacity:.6}
.n-bilder{margin:var(--s2) 0 0}
.n-bilder>summary{cursor:pointer;margin:0}
.n-bilder-liste{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2);font-size:.78rem}
.n-bilder-liste img{display:block;max-height:96px;max-width:160px;width:auto;height:auto;border:1px solid var(--linie);border-radius:4px;background:#fff;object-fit:contain}
.na-orte{color:var(--muted)}
.ablegen>summary{list-style:none;cursor:pointer}
.ablegen>summary::-webkit-details-marker{display:none}
.ablegen[open]{flex-basis:100%}
.ablegen-flaeche{display:flex;flex-direction:column;gap:var(--s3);max-width:30rem;margin-top:var(--s2);padding:var(--s4);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r)}
.ablegen-form,.ablegen-suche{display:flex;flex-direction:column;gap:var(--s2);margin:0}
.ablegen-suche{padding-top:var(--s3);border-top:1px dashed var(--linie)}
.ablegen-flaeche label{display:flex;flex-direction:column;gap:3px;font-size:.8rem;font-weight:600;color:var(--ink2)}
.dz-form label{display:block;margin-top:var(--s2);font-size:.8rem;font-weight:600;color:var(--ink2)}
.dz-form label:first-of-type{margin-top:0}
.ablegen-flaeche .knopf,.dz-form .knopf{align-self:flex-end}   /* Hauptknopf rechts unten, im DOM als letztes (Thomas 31.10.) */
.dz-form .knopf{margin-top:var(--s3)}
/* Kompakte Eingaben (Thomas 31.10.: „Eingabefelder zu hoch“) · eine Textzeile hoch wie die Notiz-Eingabe, am Handy 44 px
   (Tippfläche) · gilt für Hochladen, das Bearbeiten in der Zeile und „In Dao ablegen“ */
.ablegen-flaeche select,.ablegen-flaeche input,.dz-form select,.dz-form input,
.datei-hochladen select,.datei-hochladen input[type=date]{font:inherit;font-size:.92rem;font-weight:400;line-height:1.3;
  padding:0 8px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink);width:100%;box-sizing:border-box}
.ablegen-flaeche input[type=file],.dz-form input[type=file]{min-height:var(--feld-hoehe);padding-block:0}   /* Dateiwahl in Höhe der Felder (nicht Teil der zentralen Regel) */
/* Dokumente mit Typ (31.10., nach der Vorschau) · Zeile: Datum · Titel (Beschreibung leise darunter) · Typ · Herkunft ·
   entfernen, feste Spalten (jede Zeile ist ein eigenes Raster, so stehen sie trotzdem untereinander). Der Typ ist das Klickziel
   (details/summary), aufgeklappt schwebt das Formular unter ihm; in schmaler Auslage und am Handy steht es im Fluss,
   die Zeile ist dort zweizeilig: Datum, Titel · darunter Typ · Herkunft · darunter „entfernen“. */
.datei-liste{container:datei/inline-size}   /* Breite der Liste zählt, nicht der Auslage: neben der Seitenspalte ist sie schmaler (Thomas 04.11., Titel brachen im Wort) */
.datei-liste .datei-zeile{grid-template-columns:5rem minmax(8rem,1fr) 9rem 8.5rem 6.5rem;
  grid-template-areas:"datum name typ herkunft akt";align-items:baseline;column-gap:var(--s3)}
.dz-datum{grid-area:datum;font-size:var(--t-meta);color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.dz-name{grid-area:name;display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.dz-beschreibung{font-size:var(--t-meta);color:var(--muted);line-height:1.35;white-space:pre-line;overflow-wrap:break-word}
.dz-meta{display:contents}
.dz-typ{grid-area:typ;font-size:var(--t-meta);color:var(--ink2);overflow-wrap:break-word;min-width:0}
span.dz-typ.ohne{color:var(--muted)}
.dz-pflege{position:relative}
.dz-pflege:not([open])>.dz-form{display:none}
.dz-typ-knopf{display:inline-flex;align-items:center;min-height:32px;list-style:none;cursor:pointer;color:var(--ink2);
  text-decoration:underline dotted;text-decoration-color:var(--linie2);text-underline-offset:3px}
.dz-typ-knopf::-webkit-details-marker{display:none}
.dz-typ-knopf::after{content:"";flex:none;width:5px;height:5px;margin:0 2px 3px 7px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.dz-pflege[open]>.dz-typ-knopf::after{transform:rotate(225deg);margin-bottom:-2px}
.dz-typ-knopf:hover{color:var(--ink);text-decoration-color:currentColor}
.dz-pflege.ohne>.dz-typ-knopf{color:var(--muted);font-style:italic}
.dz-herkunft{grid-area:herkunft;font-size:var(--t-meta);color:var(--muted);overflow-wrap:break-word;min-width:0}
.dz-herkunft a{color:inherit}
.dz-aktionen{grid-area:akt;display:flex;justify-content:flex-end;align-items:baseline;font-size:var(--t-meta)}
.dz-aktionen form{display:inline}
/* „entfernen“ und „rückgängig“ in der Dateien-Liste sind `.textknopf` (global) · rückgängig etwas kräftiger */
.dz-rueckgaengig{color:var(--ink2)}
.dateien .hinweis.aufgeraeumt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3)}
.dz-form{display:flex;flex-direction:column;gap:3px;width:22rem;max-width:calc(100vw - 2rem);box-sizing:border-box;
  position:absolute;top:100%;left:0;z-index:5;margin-top:2px;padding:var(--s3) var(--s4) var(--s4);background:var(--flaeche);
  border:1px solid var(--linie2);border-radius:var(--r);box-shadow:0 8px 24px oklch(25% 0.05 250 / .14);font-size:1rem}
.dz-form .formhinweis{font-weight:400;display:inline}
.datei-zeile form{margin:0}
.dateien .hinweis.aufgeraeumt{margin:var(--s2) 0}
.dateien .hinweis.aufgeraeumt .ar-satz{margin:0}
.dateien .ar-satz .leise{color:var(--muted);font-size:.9em}
.datei-hochladen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.datei-hochladen label{display:block;margin:0}
.datei-hochladen .dh-datei{flex:1 1 12rem;min-width:0}
.datei-hochladen .dh-typ{flex:0 1 12rem}
.datei-hochladen .dh-datum{flex:0 0 9.5rem}
.datei-hochladen input[type=file]{font-size:.86rem;max-width:100%}
.datei-hochladen .knopf{margin-left:auto}
@container datei (max-width:720px){
  .datei-liste .datei-zeile{grid-template-columns:5rem minmax(0,1fr);grid-template-areas:"datum name" ". meta";row-gap:2px}
  .dz-meta{display:block;grid-area:meta;font-size:var(--t-meta)}
  .dz-typ,.dz-herkunft{display:inline}
  .dz-pflege{display:inline-block}
  .dz-pflege[open]{display:block}
  .dz-herkunft::before{content:" · ";color:var(--muted)}
  .dz-pflege[open]+.dz-herkunft::before{content:none}
  .dz-form{position:static;width:auto;max-width:30rem;margin:var(--s1) 0 var(--s2);box-shadow:none}
  .dz-aktionen{display:inline}
  .dz-aktionen::before{content:" · ";color:var(--muted)}
  .datei-zeile:has(.dz-pflege[open]) .dz-aktionen{display:none}
}
@media (max-width:859px){
  .datei-liste .datei-zeile{grid-template-columns:4.9rem minmax(0,1fr);grid-template-areas:"datum name" ". meta";row-gap:2px;align-items:baseline;padding:10px 0}
  .dz-meta{display:block;grid-area:meta;font-size:var(--t-meta)}
  .dz-typ,.dz-herkunft{display:inline}
  .dz-pflege{display:inline-block}
  .dz-pflege[open]{display:block}
  .dz-herkunft::before{content:" · ";color:var(--muted)}
  .dz-pflege[open]+.dz-herkunft::before{content:none}
  .datei-zeile .dz-name .z-titel{padding:11px 0;margin:-11px 0}   /* Tippfläche 44 px, Zeile bleibt ruhig */
  .dz-form{position:static;width:auto;max-width:none;margin:var(--s1) 0 var(--s2);padding:var(--s3);box-shadow:none}
  .dz-aktionen{display:inline}
  .dz-aktionen::before{content:" · ";color:var(--muted)}
  .datei-zeile:has(.dz-pflege[open]) .dz-aktionen{display:none}
  .dz-typ-knopf{min-height:0;padding:13px 0;margin:-13px 0}
  .ablegen-flaeche select,.ablegen-flaeche input,.dz-form select,.dz-form input,
  .datei-hochladen select,.datei-hochladen input[type=date]{font-size:.95rem}
  .ablegen-flaeche input[type=file],.dz-form input[type=file],.datei-hochladen input[type=file]{min-height:var(--tippflaeche);font-size:.95rem;padding-block:6px}
  .datei-hochladen{flex-direction:column;align-items:stretch}
  .datei-hochladen .dh-datei,.datei-hochladen .dh-typ,.datei-hochladen .dh-datum{flex:none}
  .datei-hochladen .knopf{align-self:flex-end;margin-left:0}
  .ablegen-flaeche{max-width:none;padding:var(--s3)}
}

/* Fotos in der Oberfläche (Phase 3 Scheibe D2) · Bild im Avatar deckend über dem Kürzel (eigener Grund, damit es auch
   unter transparenten PNGs nicht durchscheint; Kürzel nur ohne Bild), Ring bleibt außen (box-shadow) bzw. beim geteilten Ring im Hintergrund · Logo ganz sichtbar auf heller
   Platte (Logos sind für Weiß gemacht, auch im dunklen Modus) · Abschnitt „Bilder“ in der Seitenspalte der Karte */
.avatar.mit-bild{position:relative;overflow:hidden}
.avatar-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--flaeche3)}
.avatar.kante-beide .avatar-bild{inset:11%;width:78%;height:78%;border-radius:50%}
.avatar-org.mit-bild{background:#ffffff}
.avatar-org .avatar-bild{object-fit:contain;padding:2px;box-sizing:border-box;background:#ffffff}
.bild-plaetze{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.bild-platz{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s3);align-items:start}
.bild-vorschau{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--flaeche3);display:grid;place-items:center}
.bild-vorschau.logo{border-radius:var(--r);background:#ffffff;border:1px solid var(--linie2)}
.bild-vorschau img{width:100%;height:100%;object-fit:cover;display:block}
.bild-vorschau.logo img{object-fit:contain;padding:3px;box-sizing:border-box}
.bild-leer{font-size:.66rem;line-height:1.15;color:var(--ink2);text-align:center;padding:0 4px}
.bild-titel{margin:0 0 4px;font-weight:600;font-size:.92rem}
.bild-avatar{font-weight:400;font-size:.78rem;color:var(--muted)}
.bild-aktionen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.bild-hochladen{display:flex;flex:1 1 16rem;align-items:center;gap:var(--s2);margin:0;min-width:0;max-width:100%}
.bild-hochladen label{display:block;flex:1 1 auto;min-width:0}
.bild-hochladen input[type=file]{width:100%;font-size:.8rem;padding:2px 0;max-width:100%}
.bild-senden{flex:none;margin-left:auto}
.bild-entfernen{margin:0}
.bilder .aufgeraeumt form{margin:0}
.bild-regel{margin:0 0 var(--s3)}
.bilder,.teilnehmende{scroll-margin-top:calc(var(--kopf) + var(--unter,0px) + 16px)}
.bilder .hinweis{margin:var(--s2) 0}
.bilder .hinweis.aufgeraeumt{margin:var(--s2) 0 var(--s3)}
.bild-freigabe{margin:0 0 var(--s2);font-size:.8rem;color:var(--muted)}
.bild-freigabe.frei{color:var(--ink2)}
.freigabe-klapp{margin:0 0 var(--s2);scroll-margin-top:calc(var(--kopf) + var(--unter,0px) + 16px)}
.freigabe-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2) var(--s3);margin:var(--s2) 0 0}
.freigabe-form .hinweis{flex:1 1 100%;margin:0}
.freigabe-form label{display:flex;flex:1 1 11rem;flex-direction:column;gap:2px;font-size:.78rem;font-weight:600;color:var(--ink2);min-width:0}
.freigabe-form input{box-sizing:border-box;width:100%;padding:0 8px;font:inherit;font-size:.88rem;line-height:1.3;font-weight:400;color:var(--ink);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r)}
.freigabe-senden{flex:none;margin-left:auto}
.freigabe-klapp>.formhinweis{margin:var(--s2) 0}
.freigabe-weg{margin:0}
@media (max-width:859px){.bild-hochladen input[type=file]{min-height:var(--tippflaeche)}.freigabe-form label{flex-basis:100%}}
/* =================== Rückmeldungen (Plan Rückmeldungen, Task 3.2, Vorschau V1 31.10.) ===================
   Richtung Werkstatt: Papiergrau, Rückmeldung als Briefbogen, Zitate in der Buchschrift, Struktur durch Linien.
   Knöpfe über die zentralen Maße (.knopf, --knopf-hoehe), nie Vollbreite. Eigene Klassen mit rm-, damit nichts mit
   .hinweis, .zeile oder .zurueck der übrigen Seiten kollidiert. Ganze Breite statt Bahnen (zwei Spalten im Detail). */
.rm-seite [hidden]{display:none!important}
.rm-seite .haupt{max-width:calc(1180px + 96px)}
.rm-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.rm-inline{display:inline}
.rm-feld{display:grid;gap:3px;min-width:0}
.rm-feld>span,.rm-optionen legend{font-size:.72rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rm-seite select,.rm-seite input[type=number],.rm-seite input[type=search]{box-sizing:border-box;width:100%;min-width:0;padding:0 10px;font:inherit;font-size:16px;line-height:1.3;font-weight:400;color:var(--ink);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r)}
.rm-seite textarea{box-sizing:border-box;width:100%;min-width:0;min-height:var(--knopf-hoehe);padding:9px 11px;font:inherit;font-size:16px;line-height:1.5;font-weight:400;color:var(--ink);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r);resize:vertical}
@media (min-width:860px){.rm-seite select,.rm-seite textarea,.rm-seite input[type=number],.rm-seite input[type=search]{font-size:.9rem}}
.rm-av{flex:none;width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;overflow:hidden;background:var(--flaeche3);color:var(--ink2);font-size:.78rem;font-weight:650;box-shadow:0 0 0 2px var(--flaeche),0 0 0 3px var(--linie2)}
.rm-av img{width:100%;height:100%;object-fit:cover;display:block}
.rm-av.ohne{background:transparent;border:1.5px dashed var(--linie2);box-shadow:none}
.rm-av.gross{width:52px;height:52px;font-size:1rem}
.rm-pille{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;padding:0 9px;line-height:1.7;border-radius:999px;border:1px solid var(--linie2);color:var(--ink2);white-space:nowrap}
.rm-pille.neu{background:var(--signal);border-color:var(--signal);color:var(--auf-signal)}
.rm-pille.live{background:var(--akzent-weich);border-color:transparent;color:var(--ink)}
.rm-pille.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal)}
.rm-pille.ruhig{border-style:dashed;color:var(--muted)}
.rm-pille.vorschlag{border-color:var(--dp);color:var(--dp)}
.rm-nps{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:999px;font-size:.8rem;font-weight:650;line-height:1;font-variant-numeric:tabular-nums;border:1.5px solid var(--linie2);color:var(--ink2)}
.rm-nps.hoch{background:var(--ink);border-color:var(--ink);color:var(--flaeche)}
.rm-nps.mitte{border-color:var(--ink);color:var(--ink)}
.rm-nps.tief{border-color:var(--akzent);color:var(--akzent)}
.rm-nps.ohne{border-style:dashed;color:var(--muted)}
.rm-hinweis{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:.84rem;line-height:1.4;padding:9px 12px;border-radius:var(--r);background:var(--akzent-weich);color:var(--ink)}
.rm-hinweis::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--signal);color:var(--auf-signal);font-weight:800;font-size:.72rem;display:grid;place-items:center;margin-top:1px}
.rm-hinweis.still{background:var(--flaeche2);border:1px solid var(--linie);margin-top:var(--s2)}
.rm-hinweis.still::before{content:"i";background:var(--ink);color:var(--flaeche);font-style:italic;font-family:var(--buch)}
.rm-zwischenzeile{margin:26px 0 8px;font-size:.74rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rm-seite .meta{color:var(--muted);font-size:.84rem}
.rm-seite .dot{color:var(--linie2)}
/* Liste */
.rm-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:end;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--linie)}
.rm-feld.breit{grid-column:1/-1}
.rm-filter-knopf{display:flex;align-items:center;gap:var(--s3)}
.rm-seg{display:inline-flex;justify-self:start;gap:2px;max-width:100%;overflow-x:auto;padding:2px;border-radius:calc(var(--r) + 2px);background:var(--spur);box-shadow:inset 0 0 0 1px var(--spur-rand)}   /* wie .segmente (03.11.) */
.rm-seg a{position:relative;display:inline-flex;align-items:center;min-height:calc(var(--knopf-hoehe) - 4px);padding:0 11px;border-radius:var(--r);font-size:.8rem;font-weight:550;color:var(--ink2);text-decoration:none;white-space:nowrap}
.rm-seg a:hover{color:var(--ink);background:var(--hauch)}
.rm-seg a[aria-current]{background:var(--daumen);color:var(--ink);font-weight:650;box-shadow:0 1px 2px var(--schatten),0 0 0 1px var(--spur-rand)}
@media (max-width:859px){.rm-seg a{min-height:var(--tippflaeche);min-width:var(--tippflaeche);justify-content:center}}
.rm-aktiv-filter{margin:-14px 0 24px;font-size:.84rem;color:var(--ink2)}
.rm-gruppe{margin-bottom:34px}
.rm-gruppenkopf{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.rm-gruppenkopf h2{margin:0;font-family:var(--buch);font-size:1.35rem;font-weight:500}
.rm-gruppenkopf .zahl{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}
.rm-gruppenkopf .rest{margin-left:auto;font-size:.8rem;color:var(--muted)}
.rm-liste{list-style:none;margin:0;padding:0}
.rm-zeile{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit}
.rm-zeile:hover{background:var(--flaeche2)}
.rm-zeile.neu::before{content:"";position:absolute;left:-10px;top:30px;width:6px;height:6px;border-radius:50%;background:var(--signal)}
.rm-wer{min-width:0}
.rm-name{font-family:var(--buch);font-size:1.12rem;font-weight:550;line-height:1.25}
.rm-name.anon{font-style:italic;color:var(--ink2);font-weight:450}
.rm-wo{grid-column:2/-1;font-size:.84rem;color:var(--ink2);overflow-wrap:anywhere}
.rm-wo small{display:block;color:var(--muted);font-size:.78rem}
.rm-wann{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rm-wann.unbekannt{font-style:italic}
.rm-zahlen{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.8rem;color:var(--ink2)}
.rm-st{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.rm-st b{font-variant-numeric:tabular-nums}
.rm-st.web-ja::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.rm-st.web-nein{color:var(--muted)}
.rm-spaltenkopf{display:none}
@media (min-width:860px){
  .rm-filter{grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;margin-bottom:30px}
  .rm-feld.breit{grid-column:auto}
  .rm-seg a{min-height:30px}
  .rm-zeile,.rm-spaltenkopf{grid-template-columns:34px minmax(180px,1.1fr) minmax(0,1.5fr) 54px 84px 150px 104px;gap:0 16px;padding:12px 6px}
  .rm-zahlen{display:contents}
  .rm-wann{grid-column:7;grid-row:1}
  .rm-wo{grid-column:3;grid-row:1}
  .rm-st.c-nps{grid-column:4;grid-row:1}
  .rm-st.c-stimmen{grid-column:5;grid-row:1}
  .rm-st.c-web{grid-column:6;grid-row:1}
  .rm-zeile.neu::before{top:50%;margin-top:-3px}
  .rm-spaltenkopf{display:grid;padding:0 6px 6px;font-size:.7rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .rm-spaltenkopf span:last-child{text-align:right}
}
/* Einzelansicht */
.rm-zurueck{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:4px 0;font-size:.84rem;color:var(--ink2);text-decoration:none}
.rm-zurueck:hover{color:var(--ink)}
.rm-kopfzeile{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.rm-titel{font-size:clamp(1.7rem,1.4rem + 1.2vw,2.3rem)}
.rm-fakten{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:6px 0 16px;color:var(--ink2);font-size:.88rem}
.rm-befehl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 0;margin-bottom:22px;border-block:1px solid var(--linie)}
.rm-befehl p{margin:0;font-family:var(--buch);font-style:italic;color:var(--ink2);font-size:1.02rem}
.rm-spalten{display:grid;gap:34px}
@media (min-width:1000px){.rm-spalten{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}}
.rm-abschnitt{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--linie);font-family:var(--buch);font-size:1.3rem;font-weight:500}
.rm-abschnitt .zahl{font-family:var(--font);font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rm-abschnitt .rest{margin-left:auto;font-family:var(--font);font-size:.78rem;color:var(--muted);font-weight:400}
.rm-bezuege{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0 0 24px;font-size:.9rem;align-items:baseline}
.rm-bezuege dt{color:var(--muted);font-size:.74rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.rm-bezuege dd{margin:0;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline}
.rm-unbestaetigt{font-size:.78rem;color:var(--akzent);font-weight:600}
.rm-aendern{flex-basis:auto}
.rm-aendern[open]{flex-basis:100%}
.rm-aendern-form{display:grid;gap:var(--s3);margin-top:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche)}
.rm-aendern-form .tf-wahl label{display:flex;flex-direction:row;align-items:center;gap:var(--s3);min-height:40px;font-size:.92rem}
.rm-aendern-form .tf-suche label{display:grid;gap:3px;font-size:.78rem;font-weight:600;color:var(--ink2)}
.rm-aendern-form .tf-suche .knopf{min-height:var(--knopf-hoehe)}
.rm-vorschlaege ul{list-style:none;margin:0 0 20px;padding:0}
.rm-vorschlaege li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-bottom:1px dashed var(--linie);font-size:.88rem}
.rm-brief{position:relative;padding:22px 22px 8px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
.rm-brief .frage{margin:0;font-size:.74rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rm-brief .antwort,.rm-brief .o-ton{margin:4px 0 22px;max-width:40rem;font-family:var(--buch);font-size:1.12rem;line-height:1.62;white-space:pre-line;overflow-wrap:anywhere}
.rm-brief .o-ton{padding:2px 0 0 18px;border-left:3px solid var(--signal)}
.rm-brief ::selection{background:var(--akzent-weich)}
.rm-nps-zeile{display:flex;align-items:center;gap:12px;margin:4px 0 22px}
.rm-nps-gross{font-family:var(--buch);font-size:2.4rem;line-height:1;font-weight:500}
.rm-nps-skala{display:flex;gap:3px}
.rm-nps-skala i{width:12px;height:6px;border-radius:2px;background:var(--flaeche3)}
.rm-nps-skala i.an{background:var(--ink)}
.rm-nps-skala i.tief{background:var(--akzent)}
.rm-anhaenge{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.rm-anhang{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;font-size:.82rem;text-decoration:none;background:var(--flaeche2);border:1px solid var(--linie);border-radius:var(--r);overflow-wrap:anywhere}
.rm-anhang .art{font-size:.68rem;font-weight:700;letter-spacing:.05em;color:var(--akzent)}
.rm-fuss-brief{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 -22px;padding:10px 22px;border-top:1px solid var(--linie);font-size:.8rem;color:var(--muted)}
.rm-uebernehmen{position:sticky;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;display:inline-flex;gap:8px;align-items:center;margin:10px 0 0;min-height:var(--knopf-hoehe);padding:6px 12px;font:inherit;font-size:.8rem;font-weight:600;line-height:1.1;color:var(--flaeche);background:var(--ink);border:0;border-radius:var(--r);box-shadow:0 6px 18px var(--schatten);cursor:pointer}
.rm-uebernehmen::before{content:"\275D";color:var(--signal);font-size:1.05rem;line-height:.8}
.rm-uebernehmen span{font-weight:400;opacity:.8}
.rm-satz{display:flex;gap:10px;align-items:baseline;margin:0;padding:6px 0;font-size:.92rem}
.rm-haken{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:700;background:var(--ink);color:var(--flaeche);transform:translateY(3px)}
.rm-haken.nein{background:transparent;border:1.5px dashed var(--linie2);color:var(--muted)}
.rm-vermerk{margin:2px 0 0 28px;font-size:.8rem;color:var(--muted)}
.rm-foto-feld{display:flex;align-items:flex-start;gap:12px;margin:14px 0 0}
.rm-foto-feld .rm-av{width:44px;height:44px}
.rm-foto-satz{margin:0 0 4px;font-size:.9rem}
.rm-foto-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:4px}
.rm-datei input{max-width:15rem;font-size:.82rem}
details.rm-aus{margin-top:14px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
details.rm-aus>summary,details.rm-neu-stimme>summary{display:flex;align-items:center;gap:8px;min-height:38px;padding:9px 12px;font-size:.84rem;font-weight:600}
details.rm-aus>summary::before,details.rm-neu-stimme>summary::before{content:"+";width:12px;font-weight:700;color:var(--akzent)}
details.rm-aus[open]>summary::before,details.rm-neu-stimme[open]>summary::before{content:"\2212"}
details.rm-aus[open]>summary{border-bottom:1px solid var(--linie)}
.rm-aus-inhalt{display:grid;gap:14px;padding:14px 14px 16px}
.rm-optionen{display:grid;gap:2px;margin:0;padding:0;border:0}
.rm-opt{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:.9rem;line-height:1.35}
.rm-opt input{flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:var(--ink)}
.rm-opt small{display:block;color:var(--muted);font-size:.78rem}
.rm-ergebnis{margin:0;padding:8px 12px;font-size:.86rem;background:var(--flaeche2);border-left:3px solid var(--signal);border-radius:0 var(--r) var(--r) 0}
.rm-ergebnis b{font-family:var(--buch);font-size:1.05rem;font-weight:600}
.rm-seite .pflicht::after{content:" · Pflicht";text-transform:none;letter-spacing:0;font-weight:500;color:var(--akzent)}
/* Stimmen */
.rm-stimme{margin-bottom:18px;overflow:hidden;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
.rm-stimme.vorschlag{border-style:dashed;border-color:var(--dp)}
.rm-stimme-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px;font-size:.82rem;background:var(--flaeche2);border-bottom:1px solid var(--linie)}
.rm-stimme-kopf .nr{margin-right:2px;font-family:var(--buch);font-size:1.1rem;font-weight:600}
.rm-stimme-kopf .rechts-aus{margin-left:auto}
.rm-vorschau-web{position:relative;margin:14px 14px 4px;padding:16px 18px 14px;background:var(--bg);border:1px dashed var(--linie2);border-radius:var(--r)}
.rm-vorschau-web .etikett{position:absolute;top:-9px;left:12px;padding:0 7px;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--flaeche)}
.stimme-vorschau{margin:0}
.stimme-vorschau p{margin:0;font-family:var(--buch);font-style:italic;font-size:1.12rem;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.stimme-vorschau p::before{content:"\201E"}
.stimme-vorschau p::after{content:"\201C"}
.stimme-vorschau cite{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.84rem;font-style:normal;color:var(--ink2)}
.stimme-vorschau cite b{color:var(--ink);font-weight:650}
.stimme-vorschau .rm-av{width:36px;height:36px}
.rm-stimme-form{display:grid;gap:10px;padding:12px 14px 4px}
.rm-stimme-felder{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:10px 12px}
.rm-auszug{display:grid;gap:8px}
.rm-auszug[open]>summary{margin-bottom:6px}
.rm-stimme-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px 14px}
details.rm-neu-stimme{border:1.5px dashed var(--linie2);border-radius:var(--r)}
details.rm-neu-stimme>summary{font-family:var(--buch);font-size:1.15rem;font-weight:500}
details.rm-neu-stimme>form{display:grid;gap:12px;padding:4px 14px 14px}
@media (max-width:859px){
  .rm-zurueck{display:none}
  .rm-brief{padding:18px 16px 6px}
  .rm-fuss-brief{margin:0 -16px;padding-inline:16px}
  .rm-zeile.neu::before{left:-8px}
}

/* Block „Rückmeldungen“ an Mensch und Raum (Vorschau bloecke.html) */
.rm-block{margin-top:var(--s5)}
.rm-block-titel{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;padding-bottom:6px;border-bottom:1px solid var(--linie)}
.rm-block-titel h3{font-family:var(--buch);font-weight:500;font-size:1.15rem;margin:0}
.rm-block-titel .rm-zahl{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rm-block-alle{margin-left:auto;font-size:.85rem;color:var(--ink2)}
.rm-bz{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:11px 2px;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;align-items:center}
.rm-bz:hover{background:var(--flaeche2)}
.rm-bz-zitat{margin:0;font-family:var(--buch);font-style:italic;font-size:.98rem;line-height:1.4;grid-column:1/-1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--ink2)}
.rm-bz-m{font-size:.82rem;color:var(--ink2);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;min-width:0}
.rm-bz-m b{font-family:var(--buch);font-size:1rem;font-weight:500}
.rm-bz-d{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rm-bz-fuss{margin:0;padding:10px 2px 8px;font-size:.82rem;color:var(--muted)}
/* Termin anbieten (Plan 2026-10-31) */
.kal-lz.vorgemerkt{border-left-style:dashed}
.kal-lz.vorgemerkt .kal-titel{font-style:italic;color:var(--ink2)}
.kal-lz.vorgemerkt .kal-zeit{color:var(--ink2)}
.vl{font-size:.74rem;color:var(--muted)}
.vormerkung-leiste>.aktionsleiste>form{display:contents}
.vormerkung-block{margin-top:var(--s4)}
.ta-nb{padding-bottom:6px}
.ta-textknoepfe{display:flex;gap:var(--s4);padding:0 16px 8px;flex-wrap:wrap}
.ta-textknoepfe form{display:inline}
/* Termin anbieten · Formular, Ergebnis, Entwurf, Angebot (Task 11, Vorschau s2–s5, s9) */
.ta-rechts{justify-content:flex-end}
.termin-form .tf-gruppe{display:flex;flex-direction:column;gap:var(--s2)}
.termin-form .tf-titel{font-size:.84rem;font-weight:600;color:var(--ink2)}
.ta-sub{margin-top:var(--s2);max-width:var(--lese)}
.ta-nur-workshop,.ta-ohne-workshop{display:flex;flex-direction:column;gap:var(--s3)}
.termin-form:has(input[name=art][value=workshop]:checked) .ta-ohne-workshop{display:none}
.termin-form:has(input[name=art]:checked):not(:has(input[name=art][value=workshop]:checked)) .ta-nur-workshop{display:none}
.termin-form:has(input[name=art]:checked):not(:has(input[name=art][value=praesenz]:checked,input[name=art][value=workshop]:checked)) .ta-mit-ort{display:none}
.opt-liste .b-zeile.opt-zeile{grid-template-columns:2rem minmax(0,1fr) auto;padding:10px 12px;border-top:1px dashed var(--linie)}
.opt-nr{font-size:.84rem;font-weight:700;color:var(--muted);text-align:center}
.opt-zeile .sp-was{gap:2px var(--s3)}
.opt-zeit{font-variant-numeric:tabular-nums;color:var(--ink2)}
.opt-art{font-size:var(--t-meta);color:var(--muted)}
.opt-akt{display:flex;gap:var(--s4);align-items:baseline;margin:0}
.opt-status{font-size:var(--t-meta);color:var(--muted);font-style:italic}
.opt-status.opt-gewaehlt{font-style:normal;font-weight:650;color:var(--ink)}
.opt-zeile.opt-aktiv{background:var(--akzent-weich);box-shadow:inset 3px 0 0 var(--signal)}
.opt-zeile.opt-frei .z-titel,.opt-zeile.opt-frei .opt-zeit{color:var(--muted)}
.ta-ergebnis{margin-bottom:var(--s5)}
.termin-form:has(.ta-ergebnis){max-width:none}
.ta-zu-wenig{margin-bottom:var(--s3)}
.ta-warum{margin-top:var(--s3)}
.ta-warum-text{border-left:2px solid var(--linie2);padding-left:var(--s3);font-size:.9rem;color:var(--ink2)}
.ta-warum-text ul{margin:var(--s2) 0;padding-left:1.1rem}
.ta-warum-text p{margin:var(--s2) 0}
.ta-vormerk{margin-top:var(--s3)}
.ta-im-entwurf{margin-top:var(--s3)}
.fehler.ta-halt-text{display:flex;flex-direction:column;gap:var(--s2)}
.ta-halt-text p{margin:0}
.ta-bestaetigen{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.kalender-wahl label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;font-weight:600;color:var(--ink2)}
.kalender-wahl select{padding:0 10px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink);font:inherit;font-size:.92rem}
@media (max-width:859px){.kalender-wahl select{font-size:1rem}}
.aufgabe-datum{display:flex;flex-direction:column;gap:4px;font-size:.84rem;font-weight:600;color:var(--ink2)}
.aufgabe-datum input{padding:0 10px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink);font:inherit;font-size:.92rem}
@media (max-width:859px){.aufgabe-datum input{font-size:1rem}}
.aufgabe-aendern{margin-top:var(--s3)}
.aufgabe-aendern .formular{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
.aufgabe-aendern input,.aufgabe-aendern textarea{font-weight:400;width:100%;box-sizing:border-box;padding:0 10px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--ink);font:inherit;font-size:.92rem}
.aufgabe-aendern textarea{padding:8px 10px}
@media (max-width:859px){.aufgabe-aendern input,.aufgabe-aendern textarea{font-size:1rem}}
.aktionsleiste form.annehmen-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.annehmen-zeile .formhinweis{flex:1 0 100%}
.tf-zeile.ta-festmachen{display:flex;flex-wrap:wrap;gap:var(--s3)}
.tf-zeile.ta-festmachen label{flex:0 1 14rem}
.terminangebot .ta-textknoepfe{padding:var(--s3) 0}
@media (max-width:859px){
  .opt-liste .b-zeile.opt-zeile{grid-template-columns:1.6rem minmax(0,1fr);grid-template-areas:"nr was" "nr akt";row-gap:2px;padding:10px 4px}
  .opt-zeile .opt-nr{grid-area:nr;align-self:start;padding-top:2px}
  .opt-zeile .sp-was{grid-area:was}
  .opt-zeile .opt-akt,.opt-zeile .opt-status{grid-area:akt;min-height:36px;align-items:center}
}

/* Aufgabe anlegen (Aufgaben einplanen A, Task 11) · Segment „Termin · Aufgabe“, Wann in einer Reihe, Fehler am Feld in Tinte */
.au-wahl{margin:0 0 var(--s3)}
.au-wann{display:flex;flex-wrap:wrap;gap:var(--s3)}
.au-wann-feld{border:0;padding:0;margin:0}
.au-wann-feld legend{font-size:.84rem;font-weight:600;color:var(--ink2);padding:0 0 4px}
.au-mehr>summary{cursor:pointer;display:inline-block}
.feld-fehler{border-radius:var(--r);border:2px solid var(--ink);margin:var(--s2) 0 0;padding:var(--s2) var(--s3);font-size:.88rem;font-weight:600}

/* Aufgaben-Formulare am Handy (Task 13 · pruefen bei 400 px): Felder, Auswahl und Textknöpfe auf Tippfläche */
@media (max-width:859px){
  .detailtitel textarea.titel-feld{min-height:var(--tippflaeche)}
  .au-neu-form .textknopf,.au-abschnitt .textknopf,.ab-abschnitt .textknopf{min-height:var(--tippflaeche);min-width:var(--tippflaeche)}
}


/* Phase 4 B · Räume anlegen (Vorschau 02.11.2026, ⛔ V freigegeben) · nur Tokens, kein Rot, kein Schwarz */
.rf-typ{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.termin-form .rf-typ label{flex-direction:row;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.rf-typ input{width:auto}
.rf-typ .rf-veranstaltung{font-weight:600;text-underline-offset:3px}
.rf-typ .formhinweis{margin:0}
@media (max-width:859px){.rf-typ .rf-veranstaltung{display:inline-flex;align-items:center;min-height:44px}}
.raum-besitz{margin:var(--s1) 0 0;font-size:.85rem;color:var(--ink2)}
.raum-ziele-liste{margin:0;display:grid;gap:var(--s3)}
.raum-ziele-liste dt{font-size:.8rem;font-weight:600;color:var(--ink2);margin:0 0 2px}
.raum-ziele-liste dd{margin:0;white-space:pre-line;font-family:var(--buch);line-height:1.5;overflow-wrap:anywhere}
.raum-termine .abschnittkopf{display:flex;align-items:baseline;gap:6px}
.raum-termine .rt-neu{margin-left:auto;font-size:.82rem;font-weight:600}
.raum-neu-hinweis{margin:var(--s3) 0}
.bk-zusage{margin:var(--s1) 0 0}
.bk-zusage .bk-tk{border:1px solid var(--linie2);padding:3px 10px;color:var(--ink)}
.bk-verweis a{color:var(--ink);font-weight:600}
@media (max-width:859px){
  .raum-termine .rt-neu{display:inline-flex;align-items:center;min-height:var(--tippflaeche)}
  .termin-form .tf-chip-x{width:var(--tippflaeche);height:var(--tippflaeche)}
}


/* Mitschnitt · Block am Termin (Plan 2026-11-03, A7) · nur Tokens, kein Rot, kein Schwarz, ohne style-Attribut (CSP).
   Ruhig wie die Notizen: Zeitmarken in Tabellenziffern, Text in der Buchschrift, Knöpfe schlank (auch am Handy). */
.termin-mitschnitt{scroll-margin-top:calc(var(--kopf) + var(--unter,0px) + 16px)}
.termin-mitschnitt .abschnittkopf{display:flex;align-items:baseline;gap:8px}
.ms-ankuendigen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
.ms-haken{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);cursor:pointer}
.ms-haken input{width:18px;height:18px;margin:0;accent-color:var(--ink2)}
.ms-voll{flex:1 1 100%;max-width:var(--lese)}
.ms-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:0 0 var(--s2)}
.ms-zeile p{margin:0}
.ms-eingang{margin:0 0 var(--s2);font-size:.84rem;color:var(--ink2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ms-lage{margin:0 0 var(--s4);padding:2px 0 2px var(--s3);border-left:2px solid var(--linie2);font-size:.92rem;color:var(--ink)}
.ms-lage.ms-halt{border-left-color:var(--signal);font-weight:600}
.ms-lage.ms-frei{border-left-color:var(--ink2)}
.ms-stimmen{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin:0 0 var(--s4)}
.ms-stimmen-liste{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:var(--s3)}
.ms-stimme{display:grid;gap:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche)}
.ms-stimme-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.ms-stimme-name{font-weight:700}
.ms-zahl,.ms-zeit{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.84rem}
.ms-saetze{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-family:var(--buch);font-size:.95rem;line-height:1.5;overflow-wrap:anywhere}
.ms-wahl select{font-size:.92rem;padding:0 10px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);max-width:100%}
.ms-anteile{width:100%;border-collapse:collapse;margin:0 0 var(--s2);font-size:.92rem;font-variant-numeric:tabular-nums}
.ms-unterkopf{text-align:left;font-size:.8rem;font-weight:600;color:var(--ink2);padding-bottom:var(--s2)}
.ms-anteile th,.ms-anteile td{text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--linie);vertical-align:middle}
.ms-anteile thead th{font-size:.76rem;font-weight:600;color:var(--muted)}
.ms-anteile tbody th{font-weight:600}
.ms-anteil{display:inline-block;min-width:3.2em}
.ms-balken{width:6rem;height:4px;border:0;border-radius:2px;background:var(--flaeche3);vertical-align:middle;-webkit-appearance:none;appearance:none}
.ms-balken::-webkit-progress-bar{background:var(--flaeche3);border-radius:2px}
.ms-balken::-webkit-progress-value{background:var(--ink2);border-radius:2px}
.ms-balken::-moz-progress-bar{background:var(--ink2);border-radius:2px}
.ms-stille{margin:0 0 var(--s4);font-size:.84rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.ms-klapp{margin:0 0 var(--s4)}
.ms-klapp>.ms-stimmen{margin-top:var(--s3)}
.ms-transkript{margin:0 0 var(--s4);border-top:1px solid var(--linie);padding-top:var(--s3)}
.ms-transkript>summary{cursor:pointer;font-weight:600;font-size:.92rem}
.ms-absaetze{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2);max-width:var(--lese);font-family:var(--buch);font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.ms-wer{font-family:var(--font);font-weight:600;font-size:.88rem}
.ms-frage{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border:2px solid var(--ink2);border-radius:var(--r)}
.ms-frage>p{margin:0 0 var(--s3);font-size:.92rem}
.ms-ende{margin:0;font-size:.84rem}
@media (max-width:859px){
  .termin-mitschnitt{scroll-margin-bottom:72px}
  .ms-haken,.ms-transkript>summary{min-height:var(--tippflaeche)}
  .ms-transkript>summary{display:flex;align-items:center}
  .ms-wahl select{width:100%}
  .ms-ende .knopf-text{display:inline-flex;align-items:center;min-height:var(--tippflaeche)}
  .ms-balken{width:3.5rem}
}
/* Aktivitäten (03.11.2026): eine Zeile je Änderung, Uhrzeit | Wer | Was | Wo; am Handy einspaltig, Links mit 44 px Tippfläche */
.akt-seite{max-width:var(--breit)}
.akt-seite .listenkopf{padding-inline:0}
.akt-seite .akt-filter{padding-inline:0;margin-bottom:var(--s3);border-bottom:0}
.akt-suche{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.akt-suche input[type=search]{flex:1 1 16rem;font-size:.92rem;padding:0 12px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche)}
.akt-zahl{margin:0 0 var(--s3);font-size:.86rem;color:var(--muted)}
.akt-tag{margin-bottom:var(--s4)}
.akt-liste{list-style:none;margin:0;padding:0}
.akt-zeile{display:grid;grid-template-columns:3.2rem 11rem minmax(0,1fr) minmax(0,1.2fr) auto;column-gap:var(--s3);align-items:baseline;padding:8px 0;border-bottom:1px solid var(--linie)}
.akt-uhr{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.86rem}
.akt-seite .akt-wer{font-weight:600;color:var(--ink2);font-size:.9rem;overflow-wrap:anywhere}
.akt-zeile.akt-agent .akt-wer{color:var(--akzent)}
.akt-zeile.akt-automatik .akt-wer,.akt-zeile.akt-extern .akt-wer{color:var(--muted)}
.akt-was{color:var(--ink);overflow-wrap:anywhere}
.akt-wo{color:var(--ink2);overflow-wrap:anywhere}
.akt-link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px}
.akt-link:hover{text-decoration-color:var(--akzent)}
.akt-ohne{color:var(--muted)}
.akt-zurueck{margin:0;grid-column:5}
@media (max-width:859px){
  .akt-zeile{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  .akt-was,.akt-wo,.akt-zurueck{grid-column:1 / -1}
  .akt-zurueck .knopf{min-height:44px}
  .akt-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}
/* Phase 4 D · Erwartungsabfrage am Raum (nur Anzeige, ohne Skript) */
.abfrage-kopf{font-size:.85rem;color:var(--ink2)}
.abfrage-antwort summary{cursor:pointer}
.abfrage-antwort dl{margin:.4rem 0 .8rem}
.abfrage-antwort dt{font-weight:600;font-size:.85rem}
.abfrage-antwort dd{margin:0 0 .4rem;white-space:pre-wrap;overflow-wrap:anywhere}

/* Phase 4 E · Erwartungsabfrage pflegen */
.abfrage-aktionen{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin:var(--s2) 0;font-size:.9rem}
.abfrage-neu{margin:var(--s3) 0;font-size:.9rem}
.tf-json{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;line-height:1.45;tab-size:2}
.tf-logo-vorschau{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.tf-logo-vorschau img{max-width:240px;height:auto;border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche2)}
.tf-fehlerliste{border-radius:var(--r);border:2px solid var(--ink);margin:var(--s3) 0;padding:var(--s3) var(--s4);font-size:.9rem}
.tf-fehlerliste p{margin:0 0 var(--s2);font-weight:600}
.tf-fehlerliste ul{margin:0;padding-left:1.2rem}
.abfrage-aktionen a{display:inline-flex;align-items:center;min-height:44px}
.termin-form input[type=file]{min-height:44px;padding:10px 0}
/* Phase 5 D · Formular Veranstaltung · Preiszeilen (aus der Vorschau docs/vorschau/2026-11-04-veranstaltungen/vorschau.css) */
.pr-zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:var(--s3);align-items:end;padding:var(--s3);border:1px solid var(--linie2);border-radius:var(--r)}
.pr-zeile .pr-voll{grid-column:1/-1}
.pr-zeile.pr-leer{border-style:dashed}
.pr-ueber{margin:0;font-size:.86rem;font-weight:600;color:var(--ink2)}

/* Phase 5 D · Raum-Seite „Plätze und Anmeldung“ (Vorschau d2) · Feldhöhen kommen zentral */
.pl-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px var(--s3);margin:0 0 var(--s3)}
.pl-zahl{margin:0;font-size:1.7rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.pl-zahl small{font-size:.9rem;font-weight:500;color:var(--ink2)}
.pl-min{margin:0;font-size:.88rem;color:var(--ink2)}
.pl-min b{color:var(--ink)}
.pl-reihe{display:grid;gap:var(--s2);margin:0 0 var(--s4)}
.pl-etikett{margin:0;font-size:.8rem;font-weight:600;color:var(--ink2)}
.pl-entwurf-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.pl-entwuerfe{scroll-margin-top:calc(var(--kopf) + var(--unter,0px) + 16px)}
.pl-entwurf{padding:var(--s3);border:1.5px dashed var(--signal);border-radius:var(--r);background:var(--f-karte)}   /* wie .entwurf und .entwurf-brief im Gespräch */
.pl-entwurf p{margin:0 0 var(--s2)}
.pl-entwurf-kopf{overflow-wrap:anywhere}
.pl-stufe form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0}
.pl-stufe select{box-sizing:border-box;font:inherit;padding:0 var(--s3);max-width:100%}
.pl-stufe input[type=text]{flex:1 1 12rem;min-width:0;box-sizing:border-box}
.pl-link{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.pl-link input{flex:1 1 14rem;min-width:0;box-sizing:border-box;font-size:.84rem;padding:0 var(--s3)}
.pl-schritte{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.pl-schritte li{display:flex;gap:var(--s3);align-items:baseline;font-size:.92rem}
.pl-schritte time{flex:none;min-width:5.4rem;color:var(--ink2);font-size:.84rem}
.pl-so>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);font-weight:600;font-size:.92rem}
.pl-so>summary .formhinweis{font-weight:400}
.pl-preise{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.92rem}
.pl-preise li{display:flex;gap:var(--s3);justify-content:space-between;border-bottom:1px solid var(--linie);padding:4px 0}
.pl-schritt-liste{margin:0 0 var(--s4)}
/* Phase 5 D · Teilnahmen-Zeile B2C (Vorschau d3) · die offene Tafel schiebt die Zeile auseinander, statt Knöpfe darunter zu verdecken */
.tn-rechts{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:flex-end}
.tn-neu-platz{display:inline-flex;margin:0}
.tn-anzeige{margin:0;font-size:var(--t-meta);color:var(--ink2)}
.tn-hinweis{margin:0 0 var(--s3)}
.tn-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0}
.tn-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:start}
.tn-summe{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.tn-stand>summary.tn-summe::after{content:none}
.tn-pfeil::after{content:"▾";margin-left:5px;font-size:.8em}
.tn-felder .tn-wahl{min-width:0}
.tn-felder select,.tn-felder input{width:100%;box-sizing:border-box;min-width:0}
.tn-zeile .tn-stand[open]{display:block;width:100%}
.hinweis-x{margin-left:auto;align-self:flex-start;border:0;background:transparent;color:var(--ink2);font:inherit;font-size:1.2rem;line-height:1;padding:2px 8px;border-radius:var(--r);cursor:pointer}   /* kleines × im Hinweis-Kasten (hinweis_schliessen.js) */
.hinweis-x:hover{color:var(--ink);background:var(--flaeche2)}
.hinweis-x:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
@media (max-width:859px){.hinweis-x{min-width:44px;min-height:44px}}
.tn-zu-zeile{display:flex;justify-content:flex-end;margin:0}   /* kleines × oben rechts in der Tafel (data-tafel-zu) */
.tn-x{min-width:2rem;padding-left:var(--s2);padding-right:var(--s2);line-height:1}
.tn-zeile .tn-stand[open]>form.tn-tafel{position:static;display:grid;gap:var(--s3);min-width:0;width:100%;box-sizing:border-box;margin-top:var(--s2);text-align:left}
@media (max-width:859px){
  .bahn-auslage .b-zeile.tn-zeile{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"haken was" "wann wann";row-gap:var(--s2);padding:10px 0}
  .b-zeile.tn-zeile .sp-haken{grid-area:haken;align-self:start}
  .b-zeile.tn-zeile .sp-wann{grid-area:wann;white-space:normal}
  .tn-zeile .tn-rechts{justify-content:flex-start;padding-left:calc(34px + var(--s2))}
  .tn-neu-platz .knopf,.tn-knoepfe .knopf,.pl-stufe .knopf,.pl-link .knopf{min-height:44px;box-sizing:border-box}
  .tn-zeile .tn-stand>summary{min-height:44px}
}
@media (min-width:860px){
  .tn-felder{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bahn-auslage .b-zeile.tn-zeile:has(.tn-stand[open]){grid-template-columns:34px minmax(0,1fr);grid-template-areas:"haken was" "wann wann";row-gap:var(--s2);padding:10px 0}
  .tn-zeile:has(.tn-stand[open]) .sp-haken{grid-area:haken;align-self:start}
  .tn-zeile:has(.tn-stand[open]) .sp-was{grid-area:was}
  .tn-zeile:has(.tn-stand[open]) .sp-wann{grid-area:wann;white-space:normal;text-align:left}
  .tn-zeile .tn-rechts:has(.tn-stand[open]){justify-content:flex-start;padding-left:calc(34px + var(--s2))}
}

/* Info-Termine (Plan 2026-10-29) · Tagesblatt „Bei deinen Menschen“ und Karte „Termine bei …“: gleiche Spalten wie die Geburtstage, eine
   Zeile je Termin, der Knopf ist ein leiser Textknopf (am Handy mit unsichtbarer Tippfläche, nie vollbreit) */
.im-liste{list-style:none;margin:0;padding:0}
.im-zeile{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:0 var(--s3);align-items:baseline;padding:6px 16px;border-bottom:1px solid var(--linie)}
.im-tag{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.im-was{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.im-kopf{min-width:0;overflow-wrap:anywhere}
.im-titel{font-size:.9rem;color:var(--ink)}
.im-zeit{font-size:.78rem;color:var(--ink2);font-variant-numeric:tabular-nums;margin-right:2px;white-space:nowrap}
.im-bezug,.im-aufgabe{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.im-bezug a,.im-aufgabe{color:var(--ink2)}
.im-nachfass{margin:1px 0 0}
.im-hinweis{margin:0;padding:var(--s2) 16px}
.mk-info-termine .im-zeile{padding-inline:0}
#bei-deinen-menschen{scroll-margin-top:var(--s4)}
@media (max-width:859px){#bei-deinen-menschen{scroll-margin-top:110px}
  .im-aufgabe{display:flex;align-items:center;min-height:var(--tippflaeche)}}

/* Termin-Formular · Kalender mit der Eigenschaft `info` zeigt „Bei wem“ und blendet alles aus, was Gäste, Räume, Blöcke oder Marken voraussetzt */
.tf-nur-info{display:none}
/* Kopf des Terminformulars je Kalender (Thomas 07.11.) · Server setzt `ist-info`, :has folgt dem Umstellen */
.termin-auslage .tf-kopf-info{display:none}
.termin-auslage.ist-info .tf-kopf-info{display:inline}
.termin-auslage.ist-info .tf-kopf-termin{display:none}
@supports selector(:has(*)){
  .termin-auslage:has(option[data-info]:checked) .tf-kopf-info{display:inline}
  .termin-auslage:has(option[data-info]:checked) .tf-kopf-termin{display:none}
  .termin-auslage:not(:has(option[data-info]:checked)) .tf-kopf-info{display:none}
  .termin-auslage:not(:has(option[data-info]:checked)) .tf-kopf-termin{display:inline}
}
.termin-form fieldset.tf-nur-info{display:none}
.termin-form:has(option[data-info]:checked) fieldset.tf-nur-info{display:flex}
.termin-form:has(option[data-info]:checked) .tf-nicht-info{display:none}
@supports not selector(:has(*)){.termin-form fieldset.tf-nur-info{display:flex}}   /* ohne :has steht alles da · der Server nimmt nur, was zum Kalender gehört */
.kal-lz.info .kal-titel{font-weight:500;color:var(--ink2)}

/* Phase 5 D · Formate pflegen (Task 7) */
.formate{max-width:var(--lese)}
.fm-zurueck{margin:0 0 var(--s3)}
.fm-regel{font-size:.9rem}
.fm-liste .fm-zeile{align-items:flex-start}
.fm-liste .fm-zeile .pf-text{flex:1 1 14rem}
.fm-liste .fm-zeile .knopf{flex:none}
.fm-name{font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.fm-name:hover{text-decoration:underline}
.fm-name{display:inline-flex;align-items:center;min-height:44px}
.fm-website{font-size:.84rem;color:var(--ink2);margin:2px 0 0}
.fm-website.fm-wartet,.fm-website.fm-aus{color:var(--muted)}
@media (max-width:640px){.fm-liste .fm-zeile{flex-direction:column;align-items:stretch}.fm-liste .fm-zeile .knopf{align-self:flex-start}.fm-liste .fm-zeile .pf-text{flex:none}}

/* Datumsfelder am Bildschirm (datumsfeld.js): Tippfeld vorn, Kalender-Symbol rechts, natives Feld unsichtbar dahinter */
.dfeld{position:relative;display:inline-flex;flex-direction:column;max-width:100%;vertical-align:middle}
.termin-form .dfeld,.datei-hochladen .dfeld,.ablegen-flaeche .dfeld,.dz-form .dfeld{display:flex;width:100%}
.dfeld-feld{position:relative;display:flex;align-items:center}
.dfeld>.dfeld-feld>input.dfeld-text{flex:1 1 9.5em;min-width:0;padding-right:calc(var(--feld-hoehe) + 2px)}
.dfeld-knopf{position:absolute;top:0;right:0;bottom:0;width:var(--feld-hoehe);display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:var(--r)}
.dfeld-knopf:hover{background:var(--flaeche2)}
.dfeld-knopf::before{content:"";width:13px;height:12px;box-sizing:border-box;border:1.5px solid currentColor;border-top-width:4px;border-radius:2px}
.dfeld-text:disabled~.dfeld-knopf{cursor:default;opacity:.5}
.dfeld>.dfeld-feld>input.dfeld-nativ{position:absolute;right:0;bottom:0;width:1px;height:100%;min-height:0;padding:0;border:0;opacity:0;pointer-events:none}
.dfeld-text[aria-invalid=true]{border:2px solid var(--ink);background:var(--flaeche2)}
.dfeld-fehler{margin-top:4px;font-size:.85rem;font-weight:600;color:var(--ink)}
/* Uhrzeitfelder (datumsfeld.js): gleiches Tippfeld, Uhr statt Kalender */
.dfeld-uhr .dfeld-knopf::before{width:13px;height:13px;border:1.5px solid currentColor;border-radius:50%}
/* Pause für Gespräche · Ausklapp-Knopf in der Knopfzeile, Tafel wie „Wann“ an der Aufgabe: Feld mit Beschriftung, Textknöpfe darunter */
.k-kopf .pause-klapp{display:inline-block;vertical-align:top;margin:var(--s2) var(--s2) 0 0}
.k-kopf .pause-tafel{width:min(19rem,90vw);gap:var(--s2)}
.k-kopf .pause-datum{display:flex;align-items:flex-end;gap:var(--s2);margin:0}
.k-kopf .pause-datum label{flex:1 1 auto;min-width:0}
.k-kopf .pause-datum .knopf{align-self:flex-end}
.k-kopf .pause-wahl{margin:0}
.k-kopf .k-pause{margin:var(--s2) 0 0}
@media (max-width:859px){
  .k-kopf .pause-klapp[open]{display:block}
  .k-kopf .pause-tafel{position:static;width:auto;margin-top:var(--s2);box-shadow:none}
  .k-kopf .pause-wahl .textknopf{min-height:var(--tippflaeche)}
}
/* Hinweis nach der Pause · Text, „rückgängig“ und × in einer Zeile (das × bleibt oben rechts) */
.hinweis.aufgeraeumt.pausiert{flex-wrap:nowrap;align-items:flex-start}
.hinweis.aufgeraeumt.pausiert p{flex:1 1 0;min-width:0}
.hinweis.aufgeraeumt.pausiert .hinweis-x{margin-left:0}
/* Chat-Gespräch · schlichtes Eingabefeld (Task 6): Textfeld volle Breite, Knopf rechts und schlank, am Handy nicht vollbreit */
.chat-eingabe{display:flex;flex-direction:column;gap:var(--s2);margin:0}
.chat-eingabe textarea{display:block;width:100%;min-height:4.5em;resize:vertical;box-sizing:border-box}
.chat-eingabe .mf-knoepfe{display:flex;justify-content:flex-end;margin:0}
.chat-eingabe .mf-knoepfe .knopf{width:auto;flex:0 0 auto}
.chat-gesperrt{margin:0;color:var(--muted)}

/* Leiste „Anmeldecodes“ (Plan 2026-11-08) · schmal oben auf Gesprächen und Tagesblatt, schlanke Knöpfe auch auf dem Handy */
.anmeldecodes{display:flex;flex-direction:column;gap:var(--s1);margin:0 0 var(--s3);padding:var(--s2) var(--s3);
  background:var(--akzent-weich);border:1px solid var(--signal);border-radius:var(--r)}
.anmeldecodes[hidden]{display:none}
.ac-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);font-size:var(--t-meta);min-height:32px}
.ac-mail{font-weight:600;color:var(--ink);text-decoration:none}
.ac-mail:hover{text-decoration:underline}
.ac-trenner,.ac-art,.ac-herkunft{color:var(--muted)}
.ac-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;font-weight:700;letter-spacing:.08em;
  color:var(--ink);background:var(--flaeche);padding:1px 6px;border-radius:4px;user-select:all}
.ac-betreff{color:var(--ink2);overflow-wrap:anywhere}
.ac-knopf{width:auto;flex:0 0 auto;padding:2px 10px;min-height:0;font-size:var(--t-meta)}
.ac-erledigt{display:inline;margin:0 0 0 auto}