/* ============================================================
   LifeOS · visuelle Schicht V4
   STAND 24.08.2026 — Designsystem V18b ergaenzt (Spezifikation Oberflaeche,
   Abschnitt 0.7/0.8/0.9/0.4): Stilschicht der eigenen Bedienelemente
   (ls-select/ls-date/ls-time/ls-menu samt ihren Aufklappern), Hinweisbalken
   „Rueckgaengig", Befehlspalette (⌘K) mit Tastaturhilfe, Emoji-Regel; der
   Fokusring ist Blau (AB2). Beleg: 05 OUTPUT/2026-08-24-v18b-designsystem.md
   STAND 23.08.2026 — Designsystem V18a eingebaut (Spezifikation Oberflaeche,
   Abschnitt 0.2/0.3/0.6): Farb-Token mit nachgerechneten Kontrasten, fuenf
   Dringlichkeitsstufen, Saeulenfarbe nur als Marker, Inter + IBM Plex Mono,
   Raster/Radien/Dichte. Beleg: 05 OUTPUT/2026-08-23-v18a-designsystem.md
   Übergabe-Stylesheet. Klassennamen und DOM-Struktur wie im
   Briefing vom 15.08.2026. Logik bleibt unangetastet.
   Schrift: Inter (UI) und IBM Plex Mono (Zahlen), selbst gehostet — siehe Kopf der HTML-Datei.
   ============================================================ */

:root {
  /* =====================================================================
     DESIGNSYSTEM V18a — Abschnitt 0.2, 0.3, 0.6 der Bau-Spezifikation
     Oberflaeche (23.08.2026). Jeder Farbwert ist gegen seinen eigenen
     Grund nachgerechnet; die Tabelle steht in der Statusdatei.
     ===================================================================== */

  /* --- Neutrale Basis: warm, nicht grau (0.2) ------------------------- */
  --flaeche:        #FFFFFF;   /* Karten, Zeilen                          */
  --hintergrund:    #F5F5F7;   /* Seitengrund                             */
  --linie:          #E8E8ED;   /* Trenner — dekorativ, kein Kontrastziel  */
  --linie-stark:    #D6D6DB;   /* Tabellenkopf, aktive Rahmen             */
  --text:           #1D1D1F;   /* 16,83:1                                 */
  --text-sekundaer: #6E6E73;   /*  5,07:1                                 */
  --text-schwach:   #8E8E93;   /*  3,26:1  NUR dekorativ (Platzhalter, Deko)   */

  /* --- Signal: sparsam, nur an EINER Stelle je Objekt ------------------ */
  --tinte:          #241F1C;   /* primaere Schaltflaeche, aktiv           */
  --fokus:          #3D6488;   /*  6,02:1  Fokusring, Auswahl, Drag-Ziel  */
  --achtung:        #A8443C;   /*  5,71:1  ueberfaellig — NIE als Flaeche */
  --warten:         #8A6A15;   /*  4,89:1  wartet extern / blockiert      */
  --vorwarnung:     #F5A300;   /*  AMPELGELB  Frist rueckt heran (#1037)  */
  --feiertag:       #D8443A;   /*  Feiertag (#1166 Punkt 2). Bettina am
                                   10.09.2026: „in einer Farbe, die wirklich
                                   auffaellt (ins rote hinein oder gelb)".
                                   Der VOLLTON -- die Flaeche mischt ihn mit
                                   Transparenz, damit der Kalender darunter
                                   lesbar bleibt.                        */
  --vorwarnung-rot: #E02B20;   /*  AMPELROT   Frist ueberschritten        */
  /* AMPELFARBEN, ausdruecklich kraeftig — Bettina am 10.09.2026: "die Farben
     sind nicht kraeftig genug, das ist zu gedeckt. Das muessen wirklich
     richtige Ampelfarben sein!" Die erste Fassung nahm --achtung und einen
     gedeckten Braunton; auf 7 px war der Unterschied kaum zu sehen.
     WARUM DAS DIE KONTRASTREGEL DER UEBRIGEN TOKEN NICHT BRICHT: Die Zahlen
     daneben (5,71:1 usw.) sind LESBARKEITS-Kontraste fuer TEXT. Diese zwei
     Token faerben kein Wort, sondern eine 8 px grosse Marke — dort ist
     AUFFAELLIGKEIT die Anforderung, nicht Lesbarkeit. --achtung bleibt
     unangetastet und weiter fuer Text zustaendig.
     Eigene Namen, weil --warten "wartet extern" heisst und --dr2-text eine
     DRINGLICHKEIT ist: zwei Bedeutungen im selben Kanal sind nicht
     unterscheidbar (WISSEN.md, 17.08.2026) — auch dann nicht, wenn der Kanal
     ein Farbtoken ist. */

  /* --- Saeulenfarben: MARKER, nie Flaeche ueber 24 px ------------------ */
  --saeule-zentrale:     #8A8078;
  --saeule-dachmarke:    #8A6BA8;
  --saeule-lernrad:      #4F8A6D;
  --saeule-zweitmeinung: #5B84A8;
  --saeule-privat:       #C0798C;
  --saeule-standard:     #8A8078;

  /* --- Dringlichkeit: fuenf Stufen, jede gegen IHREN Grund gerechnet --- */
  --dr1-grund: #F6DEDA;  --dr1-text: #8E3A32;   /* 5,85:1 Existenziell   */
  --dr2-grund: #FAE7D3;  --dr2-text: #8A5320;   /* 5,22:1 Zugesagt       */
  --dr3-grund: #F5EDCC;  --dr3-text: #6F5A12;   /* 5,68:1 Wachstum       */
  --dr4-grund: #DDE6EF;  --dr4-text: #35597C;   /* 5,79:1 Erhalt         */
  --dr5-grund: #EAE6E2;  --dr5-text: #615B55;   /* 5,39:1 Optional       */
  --dr0-text:  #7A736C;                          /* nicht priorisiert     */

  /* --- Kalender-Ebenen (0.2): Deckkraft statt Flaeche ------------------ */
  --kachel-deckkraft:    0.08;   /* Kalenderkachel, Kante links 100 %     */
  --struktur-deckkraft:  0.04;   /* Strukturflaeche, kein Rahmen          */
  --termin-text: #FFFFFF;
  --kachel: var(--flaeche);
  --kachel-rand: var(--linie);
  --raster-stunde: 46px;

  /* --- Typografie (0.3) ------------------------------------------------ */
  --schrift-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --schrift-zahl: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --schrift: var(--schrift-ui);          /* Altname, zeigt auf die UI-Familie */

  --gr-xs: 11px;  --zh-xs: 16px;   /* Meta, Zeitstempel, Herkunftstags   */
  --gr-s:  13px;  --zh-s:  18px;   /* Zweitzeilen, Labels, Kalenderkachel*/
  --gr-m:  14px;  --zh-m:  20px;   /* Standard: Listenzeilen, Formulare  */
  --gr-l:  16px;  --zh-l:  22px;   /* Panel-Ueberschriften, Kartentitel  */
  --gr-xl: 20px;  --zh-xl: 26px;   /* Seitentitel                        */

  --metrik-l: 28px; --metrik-l-zh: 32px;   /* Kapazitaetswerte, Zaehler  */
  --metrik-m: 18px; --metrik-m-zh: 22px;   /* Zaehler in Koepfen, Chips  */

  /* --- Raster und Abstaende (0.6): Prozent der 8-px-Basis -------------- */
  --abstand-050:  4px;   --abstand-100:  8px;   --abstand-150: 12px;
  --abstand-200: 16px;   --abstand-300: 24px;   --abstand-400: 32px;
  --abstand-600: 48px;

  --radius:       6px;    /* Bedienelemente                              */
  --radius-karte: 10px;   /* Karten und Panels                           */
  --radius-klein: 6px;    /* Altname → Bedienelement-Radius              */
  --radius-pille: 999px;  /* Chips und Badges                            */

  --schatten: 0 4px 16px rgba(36, 31, 28, .10);   /* genau EINER          */

  --zeile-kompakt: 32px;  --zeile-normal: 40px;  --zeile-weit: 48px;
  --zeilenhoehe: var(--zeile-normal);      /* normal ist der Standard     */
  --leiste-hoehe: 48px;                    /* an die Zeilenhoehe gekoppelt*/

  --treffer-min: 32px;                     /* Zeigegeraet                 */
  --kachel-toenung: 0.06;                  /* #660: Saeulenton der Aufgabenkachel. Bettina hat am 06.09.2026 vier Werte am laufenden Kalender verglichen und 6 % gewaehlt: "6% gefaellt mir gut!! So will ich es haben" */

  --panel-schmal: 400px;   --panel-breit: 560px;   /* genau zwei          */

  /* --- Altnamen, damit nichts stumm bricht ---------------------------- */
  --flaeche-leise: var(--hintergrund);
  --linie-zart:    var(--linie);
  --text-leise:    var(--text-sekundaer);
  --text-sehr-leise: var(--text-schwach);
  --akzent:        var(--saeule-zentrale);
  --akzent-text:   #FFFFFF;
  --akzent-flaeche: var(--hintergrund);
  --akzent-linie:  var(--linie);
  --warnung:       var(--achtung);
  --warnung-flaeche: var(--dr1-grund);
  --warnung-text:  var(--dr1-text);
  --ok:            var(--saeule-lernrad);
  --prio-hoch:       var(--dr1-grund);
  --prio-hoch-text:  var(--dr1-text);
  --prio-mittel:     var(--dr3-grund);
  --prio-mittel-text:var(--dr3-text);
  --prio-niedrig:      var(--dr4-grund);
  --prio-niedrig-text: var(--dr4-text);
  --prio-niedrig-rand: var(--linie-stark);
  --prio-niedrig-punkt:var(--dr4-text);
}

/* --- Grundregeln, die ueberall gelten (0.5, 0.6, 0.8) ----------------- */
html { font-size: 100%; }
body { font-family: var(--schrift-ui); font-size: var(--gr-m); line-height: var(--zh-m); }

/* Zahlen fluchten untereinander (0.3) */
.zahl, time, .uhrzeit, .minuten, .zaehler, .kapazitaet, .aufgaben-id,
.metrik-l, .metrik-m {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.metrik-l { font-size: var(--metrik-l); line-height: var(--metrik-l-zh); font-weight: 600; }
.metrik-m { font-size: var(--metrik-m); line-height: var(--metrik-m-zh); font-weight: 600; }

/* Fokus ist immer sichtbar (0.8) — nie outline:none ohne Ersatz */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Bewegung reduzieren respektieren (0.8) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Trefferflaechen (0.6) */
button, .knopf, input[type="checkbox"], input[type="radio"], select, [role="button"] {
  min-height: var(--treffer-min);
}
@media (pointer: coarse) {
  :root { --treffer-min: 44px; }
}

/* ============================================================
   BASIS
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hintergrund);
}

body {
  font-family: var(--schrift);
  color: var(--text);
  font-variant-numeric: tabular-nums;  /* ersetzt die Mono-Schrift */
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }

a { color: var(--saeule-zweitmeinung); text-decoration-color: color-mix(in srgb, var(--saeule-zweitmeinung) 40%, var(--flaeche)); }
a:hover { color: var(--fokus); text-decoration-color: currentColor; }

/* Overline / Kartenköpfe */
.overline,
.karte > h2,
.karte > .karte-kopf {
  font-size: var(--gr-xs);
  font-weight: 600;
  color: var(--text-sekundaer);
  margin: 0;
}

/* ============================================================
   KOPFZEILE
   ============================================================ */

header {
  display: flex;
  /* KEIN UMBRUCH — die Reiterleiste scrollt stattdessen in sich (#1210,
     10.09.2026, Bettina am Demo-Gate: „Kein Umbruch, das muss seitlich
     scrollbar sein"). Der erste Bau hatte hier `flex-wrap: wrap`; das ist
     zurueckgenommen.
     Das Problem, das bleibt: Die Kopfzeile ist so breit wie ihr Inhalt —
     Logo 49 + Reiter 744 + Optionen 165 + Abmelden 74 = 1.088 px. Bei einem
     900-px-Fenster schob sie die GANZE Seite auf 1.088 px. Geloest wird das
     jetzt an der Reiterleiste (siehe `nav`), nicht an dieser Zeile. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linie-zart);
  background: var(--flaeche);
}

header .logo { font-size: var(--gr-l); font-weight: 600; letter-spacing: -.02em; margin-right: 14px; }

/* Die Reiterleiste ist das einzige Stueck der Kopfzeile, das mitwachsen darf —
   sieben Reiter messen 744 px. Sie SCHRUMPFT deshalb als einzige (`flex: 0 1 auto`
   plus `min-width: 0`, sonst weigert sich ein Flex-Kind, unter seinen Inhalt zu
   gehen) und scrollt in sich. `flex-wrap: nowrap` haelt die Reiter in EINER Zeile,
   `flex: 0 0 auto` an den Knoepfen verhindert, dass sie sich stattdessen
   zusammenquetschen — sonst scrollte nichts, die Namen wuerden nur unlesbar. */
nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
nav button { flex: 0 0 auto; }

nav button {
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--text-sekundaer);
  font-size: var(--gr-m);
  font-weight: 500;
  cursor: pointer;
}
nav button:hover { background: var(--flaeche-leise); }
nav button.aktiv { background: var(--hintergrund); color: var(--text); font-weight: 600; }

header .abmelden { margin-left: auto; background: none; border: none; font-size: var(--gr-s); color: var(--text-sekundaer); cursor: pointer; padding: 6px; }

/* ============================================================
   WERKZEUGLEISTE
   ============================================================ */

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

.umschalter { display: flex; padding: 3px; gap: 3px; background: var(--hintergrund); border-radius: var(--radius-pille); }
.umschalter button {
  padding: 6px 15px;
  border: none;
  border-radius: var(--radius-pille);
  background: transparent;
  color: var(--text-sekundaer);
  font-size: var(--gr-s);
  font-weight: 500;
  cursor: pointer;
}
.umschalter button.aktiv { background: var(--text); color: var(--flaeche); font-weight: 600; }

.navi { display: flex; gap: 4px; }
.navi button,
.heute-knopf {
  height: 30px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
  color: var(--text-sekundaer);
  cursor: pointer;
  line-height: 1;
}
.navi button { width: 30px; }
.heute-knopf { padding: 0 13px; color: var(--text); font-size: var(--gr-s); }
.navi button:hover, .heute-knopf:hover { background: var(--hintergrund); }

#zeitraum-titel { font-size: var(--gr-l); font-weight: 600; letter-spacing: -.02em; margin-left: 4px; }

/* ============================================================
   KARTEN
   ============================================================ */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  overflow: hidden;
}
.karte > header,
.karte > .karte-kopf {
  padding: 12px 16px;
  border-bottom: 1px solid var(--linie-zart);
}

.leer { padding: 22px 16px; text-align: center; font-size: var(--gr-s); color: var(--text-sekundaer); font-style: italic; }

/* ============================================================
   KALENDER · ZEITRASTER
   Die drei Ebenen. Reihenfolge im DOM = Stapelreihenfolge:
   1. .stundenlinien  2. .block-struktur  3. .block-termin / .block-aufgabe
   Jeder Block bekommt inline: style="--saeule:#RRGGBB"
   ============================================================ */

.raster { position: relative; }
.raster .spalte { position: relative; border-left: 1px solid var(--linie-zart); }

.stundenlinien .linie { position: absolute; left: 0; right: 0; height: 1px; background: var(--linie-zart); }
.stundenlinien .linie.halb { background: var(--hintergrund); }
.stundenlinien .stunde { position: absolute; right: 8px; font-size: var(--gr-xs); font-weight: 500; color: var(--linie-stark); }

/* --- Ebene 1: Strukturfläche (ideale Woche) --------------- */
.block-struktur {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 4px 8px;
  overflow: hidden;
  pointer-events: none;
  background: var(--saeule, var(--saeule-standard));
  /* blass: Säulenfarbe auf Weiß gemischt */
  background: color-mix(in srgb, var(--saeule, var(--saeule-standard)) calc(var(--struktur-deckkraft) * 100%), var(--flaeche));
}
/* Blocktyp-Label: Lese-Information, kräftige Säulenfarbe */
.block-struktur .typ {
  font-size: var(--gr-xs);
  font-weight: 600;
  color: var(--saeule, var(--saeule-standard));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Schutzstatus = Kante + Symbol, niemals Farbe */
.block-struktur.schutz-frei { border: none; }
.block-struktur.schutz-rueckfrage { border: 1px dashed color-mix(in srgb, var(--saeule) 42%, var(--flaeche)); }
.block-struktur.schutz-fix { border: 1px solid color-mix(in srgb, var(--saeule) 42%, var(--flaeche)); padding-left: 14px; }
.block-struktur.schutz-fix::before {   /* Randschraffur */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7px;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--saeule) 40%, transparent),
    color-mix(in srgb, var(--saeule) 40%, transparent) 1.5px,
    transparent 1.5px,
    transparent 5px);
}

/* --- Ebene 2: Termin (Vollton der Säule) ------------------ */
.block-termin {
  position: absolute;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  padding: 7px 12px;
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--saeule, var(--saeule-standard));
  color: var(--termin-text);
}
.block-termin .titel { font-size: var(--gr-s); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.block-termin .zeit { font-size: var(--gr-xs); margin-top: 2px; color: rgba(252, 251, 250, .78); }

/* --- Ebene 3: Aufgabenkachel (weiß + Säulenstreifen) ------ */
.block-aufgabe {
  position: absolute;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  padding: 7px 12px;
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--kachel);
  color: var(--text);
  border: 1px solid var(--kachel-rand);
  border-left: 5px solid var(--saeule, var(--saeule-standard));
  box-shadow: var(--schatten);
}
.block-aufgabe .titel { font-size: var(--gr-s); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; padding-right: 16px; }
.block-aufgabe .zeit { font-size: var(--gr-xs); margin-top: 2px; color: var(--text-sekundaer); }

/* Prio-Punkt auf der Kachel */
.block-aufgabe .punkt { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: var(--radius-pille); }
.punkt.d-hoch { background: var(--dr1-text); }
.punkt.d-mittel { background: var(--dr3-text); }
.punkt.d-niedrig { background: var(--dr4-text); }

/* Kurze Blöcke (< 50px hoch) laufen einzeilig */
.block-termin.kurz,
.block-aufgabe.kurz {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
}
.block-aufgabe.kurz .punkt { position: static; order: -1; flex: none; }
.kurz .titel { flex: 0 1 auto; min-width: 0; padding-right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kurz .zeit { margin-top: 0; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kurz .schloss { margin-left: auto; }

/* Schutz-Etikett auf Blöcken */
.schloss {
  position: absolute;
  right: 9px;
  bottom: 7px;
  font-size: var(--gr-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.block-aufgabe .schloss { color: var(--text-sekundaer); background: var(--flaeche); border: 1px solid var(--linie-stark); }
.block-termin .schloss { color: var(--flaeche); border: 1px solid rgba(252, 251, 250, .65); }
.schloss.rueckfrage { border-style: dashed; }
.schloss.fix { border-style: solid; }
.kurz .schloss { position: static; }

/* Spaltenköpfe Wochenansicht */
.spaltenkopf { text-align: center; padding: 9px 2px; border-radius: var(--radius-klein); color: var(--text-sekundaer); }
.spaltenkopf .tag { font-size: var(--gr-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.spaltenkopf .nr { font-size: var(--gr-m); font-weight: 600; margin-top: 2px; }
.spaltenkopf.heute { background: var(--text); color: var(--flaeche); }

/* Kopfzeile und Raster gehören in EINEN Scroll-Container
   und brauchen dasselbe grid-template-columns.            */
.wochenkopf,
.wochenraster {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(104px, 1fr));
  gap: 0;
  min-width: max-content;
}

/* ============================================================
   MONATSANSICHT
   ============================================================ */

.monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.monat .wochentag { font-size: var(--gr-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-sekundaer); text-align: center; padding: 4px 0; }

.tagzelle {
  min-width: 0;
  min-height: 92px;
  overflow: hidden;
  padding: 6px 7px;
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.tagzelle.fremd { background: var(--flaeche); border-color: transparent; }
.tagzelle.heute { border: 1.5px solid var(--text); }

.tagzelle .nr { display: block; font-size: var(--gr-s); font-weight: 500; color: var(--text-sekundaer); margin-bottom: 5px; }
.tagzelle.fremd .nr { color: var(--linie-stark); }
.tagzelle.heute .nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-pille);
  background: var(--text);
  color: var(--flaeche);
  font-weight: 600;
}

/* Termin-Chip: nur Uhrzeit, Farbe = Säule (Platz ist knapp) */
.m-termin {
  display: inline-block;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  border-radius: var(--radius);
  font-size: var(--gr-xs);
  font-weight: 500;
  white-space: nowrap;
  background: var(--saeule, var(--saeule-standard));
  color: var(--flaeche);
}
.m-mehr { font-size: var(--gr-xs); color: var(--text-sekundaer); padding-left: 2px; }
.m-kacheln {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-size: var(--gr-xs);
  font-weight: 500;
  color: var(--saeule, var(--saeule-standard));
  background: color-mix(in srgb, var(--saeule, var(--saeule-standard)) 10%, var(--flaeche));
  border-left: 3px solid var(--saeule, var(--saeule-standard));
}

/* Unter 90px Zellenbreite (iPhone): Chips als reine Punkte */
@media (max-width: 900px) {
  .tagzelle { min-height: 62px; }
  .m-termin { width: 10px; height: 10px; padding: 0; border-radius: var(--radius-pille); font-size: 0; }
}

/* ============================================================
   AUFGABEN- UND EINGANGSLISTE
   Zeile trägt die Säulenfarbe, Priorität steckt nur im Tag.
   ============================================================ */

.aufgabe-zeile {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  margin-bottom: 5px;
  border-radius: var(--radius-karte);
  background: var(--flaeche);
  border-left: 4px solid var(--saeule, var(--saeule-standard));
}
.aufgabe-zeile:hover { background: var(--flaeche-leise); }
.aufgabe-zeile .punkt { width: 10px; height: 10px; border-radius: var(--radius); flex: none; margin-top: 5px; background: var(--saeule, var(--saeule-standard)); }
.aufgabe-zeile .titel { font-size: var(--gr-m); font-weight: 500; letter-spacing: -.01em; }
.aufgabe-zeile .meta { font-size: var(--gr-s); color: var(--text-sekundaer); margin-top: 3px; line-height: 1.45; }
.aufgabe-zeile .faellig {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-size: var(--gr-xs);
  font-weight: 600;
  color: var(--warnung-text);
  background: var(--warnung-flaeche);
}

/* Prio-Tag */
.prio {
  flex: none;
  padding: var(--abstand-050) var(--abstand-100);   /* 4/8 px (0.2) */
  border-radius: var(--radius-pille);
  font-size: var(--gr-xs);
  font-weight: 500;
  border: 1px solid transparent;
}
.prio.d-hoch { background: var(--prio-hoch); color: var(--prio-hoch-text); border-color: var(--prio-hoch); }
.prio.d-mittel { background: var(--prio-mittel); color: var(--prio-mittel-text); border-color: var(--prio-mittel); }
.prio.d-niedrig { background: var(--prio-niedrig); color: var(--prio-niedrig-text); border-color: var(--prio-niedrig-rand); }

/* Schutz-Etikett in Listen */
.schutz-etikett {
  font-size: var(--gr-xs);
  font-weight: 600;
  color: var(--text-sekundaer);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: 1px 6px;
  white-space: nowrap;
}
.schutz-etikett.rueckfrage { border-style: dashed; }

/* Eingang */
.eingang-zeile { padding: 11px 12px; border-radius: var(--radius-karte); border-left: 3px solid var(--saeule-zentrale); }
.eingang-zeile:hover { background: var(--flaeche-leise); }
.zaehler { font-size: var(--gr-xs); font-weight: 500; color: var(--text-sekundaer); background: var(--hintergrund); border-radius: var(--radius-pille); padding: 2px 8px; }

/* ============================================================
   PROJEKTÜBERSICHT
   ============================================================ */

.projekte { border: 1px solid var(--linie); border-radius: var(--radius-karte); overflow: hidden; }

.projekte .kopf,
.projekte .zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 190px minmax(0, 1fr) 90px 90px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
}
.projekte .kopf {
  font-size: var(--gr-xs);
  font-weight: 600;
  color: var(--text-sekundaer);
  padding: 13px 18px 11px;
}
.projekte .zeile { border-top: 1px solid var(--linie-zart); }
.projekte .zeile:hover { background: var(--flaeche-leise); }
.projekte .name { font-size: var(--gr-m); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.saeulen-pille { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--gr-s); color: var(--text-sekundaer); }
.saeulen-pille .punkt { width: 10px; height: 10px; border-radius: var(--radius); flex: none; background: var(--saeule, var(--saeule-standard)); }

.status-pille {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pille);
  font-size: var(--gr-s);
  font-weight: 500;
  color: var(--saeule, var(--saeule-standard));
  background: color-mix(in srgb, var(--saeule, var(--saeule-standard)) 10%, var(--flaeche));
}

@media (max-width: 900px) {
  .projekte .kopf { display: none; }
  .projekte .zeile { grid-template-columns: 1fr; }
}

/* ============================================================
   STATUSMELDUNGEN
   ============================================================ */

.hinweis {
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--akzent-flaeche);
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--gr-s);
  color: var(--text);
  line-height: 1.55;
}

.meldung {
  position: relative;
  border: 1px solid var(--linie);
  border-left: 5px solid var(--saeule, var(--saeule-standard));
  border-radius: var(--radius-karte);
  padding: 16px 18px;
}
/* Abräumen: der Knopf sitzt rechts oben, damit der Meldungstext seine Zeile
   behält. Abgeräumtes bleibt lesbar, tritt aber zurück — kein Löschen. */
.meldung .knoepfe { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
/* Die Meldungsnummer: klein und leise, aber da — die Agenten nennen sie im Chat. */
.meldung .meldungs-nr {
  display: inline-block;
  margin-right: 8px;
  font-size: var(--gr-s);
  font-variant-numeric: tabular-nums;
  color: var(--text-sekundaer);
}
.meldung .knoepfe button {
  font-size: var(--gr-s);
  padding: 5px 12px;
  border-radius: var(--radius-pille);
  background: var(--hintergrund);
  color: var(--text);
}
.meldung.ist-erledigt { opacity: .62; border-left-color: var(--linie); }
.meldung.ist-erledigt .text { text-decoration: line-through; text-decoration-color: var(--linie-stark); }
#meldungs-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
#meldungs-kopf label { font-size: var(--gr-s); color: var(--text-sekundaer); display: flex; align-items: center; gap: 6px; }
#meldungs-zaehler { font-size: var(--gr-s); color: var(--text-sekundaer); }
.meldung .text { font-size: var(--gr-m); line-height: 1.55; margin-top: 10px; max-width: 62ch; text-wrap: pretty; }
.meldung .meta { font-size: var(--gr-s); color: var(--text-sekundaer); margin-top: 10px; }

.art-freigabe_noetig,
.art-rueckfrage,
.art-zur_kenntnis {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pille);
  font-size: var(--gr-s);
  font-weight: 500;
}
.art-freigabe_noetig { background: var(--prio-hoch); color: var(--flaeche); }
.art-rueckfrage { background: var(--prio-mittel); color: var(--prio-mittel-text); }
.art-zur_kenntnis { background: var(--hintergrund); color: var(--text-sekundaer); }

/* ============================================================
   EINWURF (Werkbank-Leiste)
   ============================================================ */

#einwurf {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  background: var(--akzent-flaeche);
  border-top: 1px solid var(--linie-zart);
}
#einwurf .label {
  flex: none;
  font-size: var(--gr-xs);
  font-weight: 600;
  color: var(--text-sekundaer);
}
#einwurf input {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  font-size: var(--gr-m);
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--akzent-linie);
  border-radius: var(--radius-pille);
  outline: none;
}
#einwurf input:focus { border-color: var(--akzent); }
#einwurf button {
  padding: 12px 22px;
  font-size: var(--gr-m);
  font-weight: 600;
  color: var(--akzent-text);
  background: var(--akzent);
  border: none;
  border-radius: var(--radius-pille);
  cursor: pointer;
  white-space: nowrap;
}
#einwurf button:hover { background: var(--text-sekundaer); }
#einwurf button:active { background: var(--text-sekundaer); }

.quittung { font-size: var(--gr-s); color: var(--ok); padding: 6px 18px 0; }

@media (max-width: 900px) {
  #einwurf .label { display: none; }
}

/* ============================================================
   LOGIN
   ============================================================ */

#login {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--hintergrund);
}
#login .karte { width: 100%; max-width: 380px; border-radius: var(--radius-karte); padding: 30px; }
#login .spektrum { display: flex; gap: 4px; margin-bottom: 18px; }
#login .spektrum span { flex: 1; height: 5px; border-radius: var(--radius); }
#login h1 { font-size: var(--metrik-l); font-weight: 600; letter-spacing: -.03em; margin: 0; }
#login p { font-size: var(--gr-m); color: var(--text-sekundaer); margin: 6px 0 22px; }
#login input {
  width: 100%;
  padding: 13px 15px;
  font-size: var(--gr-m);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  outline: none;
  margin-bottom: 10px;
}
#login input:focus { border-color: var(--saeule-zweitmeinung); }
#login button {
  width: 100%;
  padding: 13px 15px;
  font-size: var(--gr-m);
  font-weight: 600;
  color: var(--flaeche);
  background: var(--text);
  border: none;
  border-radius: var(--radius-klein);
  cursor: pointer;
}
#login button:hover { background: var(--text); }
#login .fehler {
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: var(--gr-s);
  color: var(--warnung-text);
  background: var(--warnung-flaeche);
}

/* ============================================================
   RESPONSIV · Tagesansicht einspaltig unter 900px
   ============================================================ */

@media (max-width: 900px) {
  .tagesansicht { display: flex; flex-direction: column; gap: 14px; }
  .block-struktur .typ { letter-spacing: .04em; font-size: var(--gr-xs); }
  .block-termin, .block-aufgabe { left: 5px; right: 5px; padding: 5px 8px; }
  .block-termin .titel, .block-aufgabe .titel { font-size: var(--gr-s); }
}

/* ============================================================
   ANBINDUNGS-ERGÄNZUNGEN (Cowork-Übernahme 15.08.2026)
   Kleinteile, die die App-Hülle braucht — kein Design-Eingriff.
   ============================================================ */

[hidden] { display: none !important; }

main { max-width: 1840px; margin: 0 auto; padding: 18px 24px 130px; }  /* V1.1.2: volle Breite nutzen */

.tag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
  /* minmax(0, …) statt nacktem 1fr: die Null erlaubt der Spalte, SCHMALER zu
     werden als ihr Inhalt mindestens braucht. Ohne sie gilt min-width: auto,
     und FullCalendars Tabelle setzt ihre Min-Content-Breite von 1.482 px
     durch — die Karte waechst dann aus ihrer eigenen Spalte heraus und die
     ganze Seite scrollt seitlich (#1210, 10.09.2026, gemessen). */
@media (max-width: 900px) { .tag-layout { grid-template-columns: minmax(0, 1fr); } }

.karte-inhalt { padding: 10px; }
.karte-inhalt.buendig { padding: 0; }

.filterleiste { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filterleiste select {
  padding: 7px 12px; font-size: var(--gr-s); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius-karte); background: var(--flaeche);
}

/* Stundenlinien: Overlay über alle Spalten + 44px-Gutter für die Beschriftung */
.linien-overlay { position: absolute; inset: 0; pointer-events: none; }
.stundenlinien.gutter { position: relative; }
.wochenraster { position: relative; }

#login .fehler:empty { display: none; }
#einwurf-quittung { position: fixed; left: 0; right: 0; bottom: 62px; z-index: 9; }
#einwurf-quittung:empty { display: none; }

.eingang-zeile .titel { font-size: var(--gr-m); font-weight: 500; letter-spacing: -.01em; }
.eingang-zeile .meta { font-size: var(--gr-s); color: var(--text-sekundaer); margin-top: 3px; line-height: 1.45; }

/* ==========================================================================
   INTERAKTION (V1.1, 15.08.2026) — Ergänzung zur V4-Übergabe:
   Erledigt-Haken, Ziehen/Länge ziehen, Vorschlag-Dialog, Fehler-Toast.
   ========================================================================== */

/* Kacheln sind greifbar */
.greifbar { cursor: grab; touch-action: none; user-select: none; }
.greifbar.am-ziehen { cursor: grabbing; opacity: .82; box-shadow: var(--schatten); z-index: 30; }

/* Länge ziehen: unsichtbarer Griff an der Unterkante */
.griff { position: absolute; left: 0; right: 0; bottom: -2px; height: 9px; cursor: ns-resize; touch-action: none; }
.griff::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 3px; margin-left: -13px;
                border-radius: var(--radius-pille); background: rgba(36, 31, 28, .14); opacity: 0; transition: opacity .12s; }
.greifbar:hover .griff::after { opacity: 1; }
.block-termin .griff::after { background: rgba(252, 251, 250, .5); }

/* Erledigt-Haken auf der Aufgabenkachel (erscheint beim Überfahren) */
/* #743, 06.09.2026 — `min-height` MUSS hier stehen, sonst ist das Kaestchen 32 px hoch.
   Die Trefferflaechen-Regel (Z. 152-154) gilt fuer JEDEN <button> und setzt
   `min-height: var(--treffer-min)`; eine `min-height` gewinnt immer gegen `height`,
   unabhaengig von der Spezifitaet. Gemessen: auf einer 22 px hohen Kachel war das
   Kaestchen 32 px hoch — HOEHER als die Kachel, 145 %. Bettina am 06.09.2026:
   "das ist ja komplett ueberdimensioniert". Neu: 10 px, also 45 % der Kachelhoehe. */
.kachel-check { position: absolute; left: 5px; top: 5px; right: auto; width: 10px; height: 10px;
                min-height: 0; border-radius: 2px;
                border: 1.5px solid var(--linie-stark); background: var(--flaeche); color: transparent;
                font-size: 8px; line-height: 7px; text-align: center; cursor: pointer; opacity: 1; z-index: 3;
                box-sizing: border-box; padding: 0;
                transition: color .12s, border-color .12s; }          /* rechteckiges 10x10-Kaestchen links, leer bis Hover */
/* Die Trefferflaeche bleibt gross genug zum Treffen, waechst aber NICHT nach rechts:
   auf einer schmalen Kachel (gemessen 53 px) lag sonst der Mittelpunkt der Kachel in
   ihr, und der Klick zum Oeffnen hakte eine Aufgabe ab (#743). Jetzt reicht sie bis
   x 17 von 53 — der Mittelpunkt bei 26 ist frei. Hoehe unveraendert ~22 px. */
.kachel-check::before { content: ''; position: absolute; inset: -6px -2px -6px -6px; }
.greifbar:hover .kachel-check, .kachel-check:hover { color: var(--saeule-lernrad); border-color: var(--saeule-lernrad); }
.kachel-check:hover { background: var(--prio-niedrig, var(--hintergrund)); color: var(--saeule-lernrad); border-color: var(--saeule-lernrad); }

/* Erledigt-Haken in der Aufgabenliste */
.aufgabe-zeile { cursor: grab; }
.aufgabe-zeile .check { width: 18px; height: 18px; flex: none; margin-top: 3px; border-radius: var(--radius-pille);
                        border: 1.5px solid var(--linie-stark); background: var(--flaeche); cursor: pointer; transition: all .12s; }
.aufgabe-zeile .check:hover { border-color: var(--saeule-lernrad); box-shadow: inset 0 0 0 3px var(--hintergrund); }
.aufgabe-zeile.erledigt { opacity: .45; }
.aufgabe-zeile.erledigt .titel { text-decoration: line-through; }
.aufgabe-zeile.erledigt .check { background: var(--saeule-lernrad); border-color: var(--saeule-lernrad); }

/* Ziel-Spalte beim Hineinziehen einer Aufgabe */
.spalte.drop-ziel { background: color-mix(in srgb, var(--saeule-lernrad) 7%, var(--flaeche)); }

/* Dialog (Vorschlag der API, Termin-Formular, Kachel-Aufgaben) */
/* DIE ZULETZT GEOEFFNETE SCHICHT LIEGT OBEN — und deshalb bleibt es bei 90.
   Gemessen am 29.08.2026 (F584b-2), in zwei Schritten:
   1 · Die Panel-Schale liegt auf 92. Ein Dialog, der AUS einem Panel geoeffnet
       wird (der Vorschlagsknopf, die Luecke), lag damit UNTER ihr: sichtbar,
       aber nicht anklickbar — er sah funktionsfaehig aus und tat nichts.
       Gefunden hat es der Pruefstand an einem Muster: JEDE lesende Pruefung am
       Dialog war gruen, JEDE klickende rot.
   2 · Der naheliegende Fix — `#dialog` global hoeher — war ZU BREIT und hat
       `ui-aufgaben-panel` abgebrochen. Dort ist es genau umgekehrt: erst der
       Dialog, dann das Panel darueber. Ein fester Vorrang ist hier falsch,
       weil BEIDE Reihenfolgen vorkommen.
   Deshalb entscheidet die REIHENFOLGE: `zeigeDialog()` setzt `.ueber-panel`
   nur, wenn beim Oeffnen schon ein Panel steht. Darueber liegt nur der Toast
   (95), weil er die Begruendung traegt. */
#dialog.ueber-panel { z-index: 94; }
#dialog { position: fixed; inset: 0; background: rgba(36, 31, 28, .32); z-index: 90;
          display: flex; align-items: center; justify-content: center; padding: 20px; }
/* DIE KARTE SCROLLT, WENN SIE HOEHER IST ALS DAS FENSTER (#863, 07.09.2026,
   Bettinas Freigabe: "ja, setz die Scroll-Regel").

   Gemessen am 07.09.2026 mit einer Sonde, bei 1600 x 1000 px: der Anlege-
   Dialog war 1262 px hoch, `scrollHeight === clientHeight` — die Karte hatte
   keinen eigenen Scroll. Der Knopf "Anlegen" lag bei 1109 px, also 109 px
   unter dem Fensterrand, und `elementFromPoint` traf in seiner Mitte nichts.
   Weder Playwright noch Bettina kamen an ihn heran; `scrollIntoView` half
   nicht, weil es nichts zu scrollen gab.

   DER FEHLER WAR VORHER DA UND UNSICHTBAR: schon ohne den Einplanungs-Kasten
   mass die Karte 1060 px bei 1000 px Fenster, der Knopf lag 8 px vom Rand.
   Die zwei neuen Zeilen und die Warnbox haben ihn nur ueber die Kante gekippt.

   `max-height: 100%` rechnet gegen den Inhaltskasten von #dialog — das sind
   wegen dessen `padding: 20px` genau 100vh - 40px. Die Regel gilt fuer JEDEN
   Dialog der Oberflaeche; sie greift nur da, wo er ohne sie ohnehin ausserhalb
   des Fensters laege. Der Riegel dagegen ist P10 in
   test/regress-863-anlegen-mit-kachel.mjs. */
.dialog-karte { background: var(--flaeche); border-radius: var(--radius-karte); box-shadow: var(--schatten);
                padding: 22px 24px; width: min(420px, 100%);
                max-height: 100%; overflow-y: auto; }
.dialog-karte h3 { font-size: var(--gr-l); font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.dialog-grund { font-size: var(--gr-s); line-height: 1.5; color: var(--text-sekundaer); margin-bottom: 14px; }
.dialog-vergleich { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
                    font-size: var(--gr-s); margin-bottom: 16px; }
.dialog-vergleich .overline { font-size: var(--gr-xs); font-weight: 600; color: var(--text-sekundaer); }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dialog-knoepfe button { border: none; border-radius: var(--radius-pille); padding: 8px 16px; font-size: var(--gr-s); font-weight: 600;
                         cursor: pointer; background: var(--text, var(--text)); color: var(--flaeche); }
.dialog-knoepfe button.leise { background: var(--hintergrund); color: var(--text); }
.dialog-form label { display: block; font-size: var(--gr-s); font-weight: 600; color: var(--text-sekundaer); margin-bottom: 10px; }
.dialog-form input, .dialog-form select { display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
                    border: 1px solid var(--linie, var(--linie)); border-radius: var(--radius-karte); font-size: var(--gr-m); }
.dialog-zeit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-form .fehler { color: var(--achtung); font-size: var(--gr-s); margin-top: 8px; min-height: 1em; }
.dialog-liste { display: grid; gap: 6px; margin-bottom: 8px; }

/* Mischstunden-Fenster (28.08.2026, #515) — eine Zeile je Aufgabe:
   Name, Auswertungsadresse, Minutenfeld. Nur Raster und Groessen; jede Farbe
   kommt aus einem Token, keine steht hier als Wert. */
.kv-liste { display: grid; gap: 6px; margin-bottom: 10px; }
/* #1405 (21.09.2026): zweistöckig. Name und Adresse teilen sich die erste
   Spalte (.kv-text), die Adresse bricht um. minmax(0, 1fr) erlaubt der Spalte,
   schmaler als ihr Inhalt zu werden — ohne es hielt die längste Adresse die
   ganze Zeile breit. Bis dahin: 1fr auto 5.5rem auto, Adresse nowrap. */
.kv-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem auto; align-items: center; gap: 10px;
            border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--radius-karte);
            padding: 8px 12px; font-size: var(--gr-s); }
.kv-zeile .kv-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-zeile .kv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-zeile .kv-adresse { font-size: var(--gr-xs); color: var(--text-sekundaer); overflow-wrap: anywhere; }
.kv-zeile .kv-min { width: 100%; padding: 6px 8px; text-align: right; font-family: 'IBM Plex Mono', monospace;
                    border: 1px solid var(--linie); border-radius: var(--radius-karte); font-size: var(--gr-s); }
.kv-zeile .kv-min:disabled { background: var(--hintergrund); color: var(--text-sekundaer); }
.kv-zeile .kv-einheit { font-size: var(--gr-xs); color: var(--text-sekundaer); }
.kv-fuss { font-size: var(--gr-s); color: var(--text-sekundaer); text-align: right; margin-bottom: 10px; }
.kv-fuss #kv-summe { font-family: 'IBM Plex Mono', monospace; color: var(--text); }
.kv-fuss #kv-summe.kv-zuviel { color: var(--achtung); font-weight: 600; }
.dialog-knoepfe button:disabled { opacity: 0.45; cursor: not-allowed; }
.dialog-zeile { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
                border: 1px solid var(--linie, var(--linie)); background: var(--flaeche); border-radius: var(--radius-karte);
                padding: 10px 12px; font-size: var(--gr-s); cursor: pointer; }
.dialog-zeile:hover { background: var(--flaeche-leise, var(--hintergrund)); }
.dialog-zeile .haken { width: 18px; height: 18px; flex: none; border-radius: var(--radius-pille); border: 1.5px solid var(--linie-stark);
                       color: transparent; font-size: var(--gr-xs); line-height: 15px; text-align: center; }
.dialog-zeile:hover .haken { border-color: var(--saeule-lernrad); color: var(--saeule-lernrad); }

/* Fehler-Toast */
#toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 95;
         background: var(--text); color: var(--dr1-grund); border-radius: var(--radius-karte); padding: 10px 16px;
         font-size: var(--gr-s); max-width: min(560px, 90vw); box-shadow: var(--schatten); }

/* Zeitfrage im Toast (18.08.2026): nur bei Aufgaben ohne Zeitkachel.
   Bewusst KEIN Dialog — der Erledigt-Haken bleibt ein Klick. */
#toast.frage { background: var(--text); color: var(--hintergrund); display: flex; align-items: center; gap: 8px; }
#toast.frage .frage-text { font-size: var(--gr-s); }
#toast.frage input { width: 68px; border: 1px solid var(--text-sekundaer); border-radius: var(--radius); background: var(--text);
                     color: var(--flaeche); padding: 5px 8px; font-size: var(--gr-s); text-align: right; }
#toast.frage button { border: none; border-radius: var(--radius); padding: 5px 10px; font-size: var(--gr-s);
                      cursor: pointer; background: var(--saeule-lernrad); color: var(--flaeche); }
#toast.frage button.leise { background: transparent; color: var(--text-sekundaer); padding: 5px 6px; }
#toast.frage button.leise:hover { color: var(--flaeche); }

/* Einwurf-Schnellaktion: Ziel-Auswahl */
#einwurf select { border: 1px solid var(--linie, var(--linie)); border-radius: var(--radius-pille); padding: 6px 10px;
                  font-size: var(--gr-s); color: var(--text); background: var(--hintergrund); max-width: 190px; }

/* V1.1.1: Löschen/Verwerfen */
.dialog-knoepfe button.gefahr { background: var(--dr1-grund); color: var(--achtung); }
.dialog-knoepfe button.gefahr:hover { background: var(--achtung); color: var(--flaeche); }
.dialog-grund li { margin-left: 16px; }
.aufgabe-zeile .verwerfen { width: 18px; height: 18px; flex: none; margin-top: 3px; border-radius: var(--radius-pille);
  border: none; background: none; color: var(--linie-stark); font-size: var(--gr-s); line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s; }
.aufgabe-zeile:hover .verwerfen { opacity: 1; }
.aufgabe-zeile .verwerfen:hover { color: var(--achtung); }


/* V1.1.2: Ganztags-Leiste (wie in jedem Kalender) + breitere Wochenspalten */
.ganztags {
  display: grid; align-items: start; gap: 0;
  border-bottom: 1px solid var(--linie, var(--linie));
  padding: 6px 0 8px;
}
.ganztags .gz-label { font-size: var(--gr-xs); font-weight: 600;
  color: var(--linie-stark); text-align: right; padding: 6px 8px 0 0; }
.ganztags .gz-tag { display: grid; gap: 4px; padding: 0 3px; min-width: 0; border-left: 1px solid var(--linie-zart, var(--hintergrund)); }
.gz-chip { display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  background: var(--saeule, var(--saeule-standard, var(--saeule-zentrale))); color: var(--termin-text, var(--flaeche));
  border-radius: var(--radius); padding: 4px 8px; font-size: var(--gr-s); font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-chip:hover { filter: brightness(.94); }

/* V1.2: Termin-Details + Serien */
.block-termin .ort { font-size: var(--gr-xs); margin-top: 2px; color: rgba(252, 251, 250, .75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel-link { position: absolute; right: 8px; bottom: 6px; color: var(--flaeche); font-size: var(--gr-s);
  text-decoration: none; opacity: .75; }
.kachel-link:hover { opacity: 1; color: var(--flaeche); }
.dialog-form textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--linie, var(--linie)); border-radius: var(--radius-karte); font-size: var(--gr-s); font-family: inherit; resize: vertical; }
.serien-wahl { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 500 !important;
  font-size: var(--gr-s) !important; color: var(--text-sekundaer) !important; line-height: 1.45; }
.serien-wahl input { width: auto !important; margin-top: 2px; }
.serien-tag { font-size: var(--gr-xs); font-weight: 600;
  background: var(--hintergrund); color: var(--text-sekundaer); border-radius: var(--radius-pille); padding: 2px 8px; vertical-align: 2px; }
.be-linkzeile { font-size: var(--gr-s); margin: -4px 0 10px; }

/* V1.3: benutzerdefinierte Wiederholung */
.wochentage { display: flex; gap: 4px; margin: -2px 0 10px; }
.wochentage .wt { display: flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--linie, var(--linie)); border-radius: var(--radius-karte); padding: 5px 0; flex: 1;
  font-size: var(--gr-xs) !important; font-weight: 600 !important; color: var(--text-sekundaer) !important;
  cursor: pointer; user-select: none; }
.wochentage .wt:has(input:checked) { background: var(--text, var(--text)); color: var(--flaeche) !important; border-color: var(--text, var(--text)); }
.wochentage .wt input { position: absolute; opacity: 0; width: 0 !important; }

/* V1.5: Strategie-Fläche — grün/blau schraffiert (betrifft LernRad UND Zweitmeinung) */
.block-struktur.strategie {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--saeule-lernrad) 16%, var(--flaeche)) 0 14px,    /* LernRad-Grün */
    color-mix(in srgb, var(--saeule-zweitmeinung) 16%, var(--flaeche)) 14px 28px  /* Zweitmeinungs-Blau */
  ) !important;
}
.block-struktur.strategie .typ { color: var(--saeule-lernrad); }

/* ==========================================================================
   V2 (16.08.2026) · FULLCALENDAR ALS DARSTELLUNGSSCHICHT
   Der eigene Raster-/Monats-Code ist raus. FullCalendar bekommt hier
   ausschliesslich die bestehenden Theme-Tokens uebergestuelpt — es gibt
   keine zweite Farb- oder Masswelt. Klassennamen der Inhalte (.titel, .zeit,
   .ort, .punkt, .schloss, .typ) bleiben wie in V4, damit die Regeln oben
   weitergelten.
   ========================================================================== */

:root {
  --kalender-hoehe: min(74vh, 880px);
  --fc-slot-hoehe: 23px;               /* 30-Minuten-Raster = 46px pro Stunde */
}

/* --- Werkzeugleiste: Raster- und Startstunden-Wahl ---------------------- */
.kalender-optionen { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kalender-optionen label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--gr-xs); font-weight: 600; color: var(--text-sekundaer);
}
.kalender-optionen select {
  padding: 5px 9px; font-size: var(--gr-s); font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius-karte); background: var(--flaeche);
}

/* --- FullCalendar an die LifeOS-Tokens ---------------------------------- */
.fc {
  --fc-border-color: var(--linie-zart);
  --fc-page-bg-color: var(--flaeche);
  --fc-neutral-bg-color: var(--flaeche-leise);
  --fc-neutral-text-color: var(--text-leise);
  --fc-today-bg-color: color-mix(in srgb, var(--saeule-zentrale) 5%, var(--flaeche));
  --fc-now-indicator-color: var(--warnung);
  --fc-event-bg-color: var(--saeule-standard);
  --fc-event-border-color: transparent;
  --fc-event-text-color: var(--termin-text);
  --fc-highlight-color: color-mix(in srgb, var(--saeule-lernrad) 10%, var(--flaeche));
  --fc-small-font-size: var(--gr-xs);
  font-family: var(--schrift);
  font-size: var(--gr-s);
  color: var(--text);
}
.fc a { color: inherit; text-decoration: none; }
.fc .fc-scrollgrid { border-left-width: 0; border-top-width: 0; }
.fc .fc-scrollgrid-section > * { border-right-width: 0; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--fc-border-color); }

/* Spaltenkoepfe wie .spaltenkopf in V4 */
.fc .fc-col-header-cell { border-bottom: 1px solid var(--linie); padding: 0; }
.fc .fc-col-header-cell-cushion {
  display: block; padding: 9px 2px; text-align: center;
  font-size: var(--gr-xs); font-weight: 600; color: var(--text-sekundaer); text-transform: capitalize;
}
.fc .fc-day-today .fc-col-header-cell-cushion { color: var(--text); font-weight: 600; }
.fc .fc-timegrid-axis-cushion, .fc .fc-timegrid-slot-label-cushion {
  font-size: var(--gr-xs); font-weight: 500; color: var(--linie-stark);
}
.fc .fc-timegrid-axis-cushion { font-size: var(--gr-xs); }

/* Zeitraster: 46px pro Stunde, unabhaengig von 15 oder 30 Minuten */
.fc .fc-timegrid-slot { height: var(--fc-slot-hoehe); }
.fc .fc-timegrid-slot-minor { border-top-style: solid; border-top-color: var(--hintergrund); }
.fc .fc-timegrid-col.fc-day-today { background: var(--fc-today-bg-color); }

/* Jetzt-Linie */
.fc .fc-timegrid-now-indicator-line { border-width: 1.5px 0 0; }
.fc .fc-timegrid-now-indicator-arrow { border-width: 5px 0 5px 6px; margin-top: -5px; }

/* --- Ebene 0: Feiertag = getoenter Tag (#1166 Punkt 2, 10.09.2026) -------
   Bettina am Plan-Gate: „Getoenter Tag". Der Ton ist WARM und deutlich
   dunkler als die Strukturflaechen, die fast weiss sind und ihre Farbe von
   der Saeule beziehen — ein Feiertag hat keine Saeule, und zwei Bedeutungen
   im selben Kanal sind nicht unterscheidbar (WISSEN.md, 17.08.2026). */
.fc .fc-bg-event.lifeos-feiertag {
  /* DURCHSICHTIG UEBER DIE FARBE, NICHT UEBER `opacity` — Bettina am
     10.09.2026: „nicht so deckend! Ich will den Kalender schon noch
     durchsehen koennen". Ein `opacity` am ganzen Element haette auch den
     NAMEN mitverblassen lassen; die Durchsicht gehoert deshalb in die
     Hintergrundfarbe. 10 % lassen die Stundenlinien und alles Darunter
     durch und faerben den Tag trotzdem eindeutig ein — Bettina am
     10.09.2026 nach dem ersten Anlauf mit 16 %: „noch ein bisschen
     transparenter". Die Auffaelligkeit traegt der NAME im Vollton, nicht
     die Flaeche; deshalb vertraegt sie den niedrigen Wert. */
  opacity: 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--feiertag) 10%, transparent);
}
.fc .fc-bg-event.lifeos-feiertag .feiertag-name {
  display: block; padding: 4px 8px;
  font-size: var(--gr-xs); font-weight: 700;
  color: var(--feiertag);          /* der Name im VOLLTON, er soll auffallen */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Ebene 1: Strukturflaeche = Hintergrund-Ereignis --------------------- */
.fc .fc-bg-event.lifeos-struktur {
  opacity: 1;
  overflow: hidden;
  background: color-mix(in srgb,
    var(--saeule, var(--saeule-standard)) calc(var(--struktur-deckkraft) * 100%), var(--flaeche));
}
.fc .fc-bg-event.lifeos-struktur .typ {
  display: block; padding: 4px 8px;
  font-size: var(--gr-xs); font-weight: 600;
  color: var(--saeule, var(--saeule-standard));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc .fc-bg-event.lifeos-struktur.schutz-rueckfrage {
  border: 1px dashed color-mix(in srgb, var(--saeule, var(--saeule-standard)) 42%, var(--flaeche));
}
.fc .fc-bg-event.lifeos-struktur.schutz-fix {
  border: 1px solid color-mix(in srgb, var(--saeule, var(--saeule-standard)) 42%, var(--flaeche));
}
.fc .fc-bg-event.lifeos-struktur.schutz-fix .typ { padding-left: 14px; }
.fc .fc-bg-event.lifeos-struktur.schutz-fix::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--saeule, var(--saeule-standard)) 40%, transparent),
    color-mix(in srgb, var(--saeule, var(--saeule-standard)) 40%, transparent) 1.5px,
    transparent 1.5px, transparent 5px);
}
.fc .fc-bg-event.lifeos-struktur.strategie {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--saeule-lernrad) 16%, var(--flaeche)) 0 14px,
    color-mix(in srgb, var(--saeule-zweitmeinung) 16%, var(--flaeche)) 14px 28px);
}
.fc .fc-bg-event.lifeos-struktur.strategie .typ { color: var(--saeule-lernrad); }

/* --- Ebene 2 und 3: Termin und Aufgabenkachel --------------------------- */
.fc .fc-timegrid-event {
  border: none; box-shadow: none;
  border-radius: var(--radius-klein);
  margin-right: 3px;
}
.fc .fc-timegrid-event .fc-event-main { position: relative; height: 100%; padding: 6px 11px; overflow: hidden; }
.fc .fc-event-main > .titel { font-size: var(--gr-s); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; padding-right: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc .fc-event-main > .zeit { font-size: var(--gr-xs); margin-top: 2px; white-space: nowrap; }
.fc .fc-event-main > .ort { font-size: var(--gr-xs); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fc .fc-event.lifeos-termin { background: var(--saeule, var(--saeule-standard)); color: var(--termin-text); }
.fc .fc-event.lifeos-termin .zeit,
.fc .fc-event.lifeos-termin .ort { color: rgba(252, 251, 250, .78); }

/* V18a (0.2): Fuellung ist die Saeulenfarbe bei 8 % Deckkraft, die Kante links
   bei 100 %. Damit bleibt der Text lesbar und die Woche ruhig. Die Kante ist
   3 px — Kante ODER Punkt, nie beides.

   #660, 06.09.2026 — DIE TOENUNG IST ZURUECK, UND DAS IST EINE UMKEHRUNG.
   Am 22.08.2026 war sie ausdruecklich VERWORFEN worden (Spez 1.4/472, F1);
   an dieser Zeile stand bis heute "die 8%-Toenung ist am 22.08. verworfen".
   Bettina hat die Entscheidung am 06.09.2026 umgekehrt, im Wortlaut "Toenung
   ja", auf ihre Meldung vom 30.08.2026: die Woche ist weiss, und welcher Saeule
   eine Kachel gehoert, ist nicht mehr zu erkennen.
   WER DIESE ZEILE WIEDER AUF `var(--flaeche)` SETZT, DREHT EINE ENTSCHIEDENE
   SACHE ZURUECK. Der Riegel dagegen ist `test/regress-660-kacheltoenung.mjs`.
   Der Ton haengt an `--kachel-toenung` (Z. 94), damit er sich ohne Eingriff in
   diese Regel verstellen laesst. */
.fc .fc-event.lifeos-aufgabe {
  background: color-mix(in srgb, var(--saeule, var(--saeule-standard))
              calc(var(--kachel-toenung) * 100%), var(--flaeche));
  color: var(--text);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--saeule, var(--saeule-standard));
  box-shadow: none;                  /* Linien statt Schatten (0.6) */
}
.fc .fc-event.lifeos-aufgabe .fc-event-main { color: var(--text); padding-left: 26px; }
.fc .fc-event.lifeos-aufgabe .titel { font-weight: 500; }
/* P8.3 (Spez 1.4 Z.473): der Kacheltitel nutzt die verfuegbare Kachelhoehe und
   wird erst abgeschnitten, wenn der Platz zu Ende ist — nicht mehr einzeilig.
   Aber hoechstens zwei Zeilen, danach Ellipse: sonst zerbroeseln schmale
   Kacheln zu unlesbaren Schnipseln (Bettinas Abnahme).
   Die Listenzeilen-Regel „immer gekuerzt" (2.2) bleibt davon unberuehrt. */
.fc .fc-event.lifeos-aufgabe .titel { white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* Kurze Aufgabenkacheln NICHT einzeilig zwingen: der Titel nutzt die Hoehe und
   bricht auf zwei Zeilen um, wenn die Kachel gross genug ist (Bettinas Abnahme).
   Dafuer Block statt Flex, die Zeit weicht, der Dringlichkeitspunkt bleibt oben rechts. */
.fc .fc-timegrid-event.lifeos-kurz.lifeos-aufgabe .fc-event-main,
.fc .fc-timegrid-event.fc-timegrid-event-short.lifeos-aufgabe .fc-event-main {
  display: block; padding: 3px 10px 3px 26px; }
.fc .fc-timegrid-event.lifeos-kurz.lifeos-aufgabe .punkt,
.fc .fc-timegrid-event.fc-timegrid-event-short.lifeos-aufgabe .punkt {
  position: absolute; top: 4px; right: 4px; order: 0; }
/* #993, 06.09.2026 — DIE METAZEILE HAENGT AN DER GEMESSENEN HOEHE, NICHT AN DER
   DAUER. Bis heute stand hier `lifeos-kurz` (unter 60 Minuten). Die Spezifikation
   vom 24.08.2026 sagt „unter 28 px entfaellt die Metazeile" — und das ist nicht
   dasselbe: die Hoehe haengt am Zeitraster, das Bettina umstellt (15/30 Minuten),
   die Dauer nicht. `lifeos-flach` wird in `aufgabenUeberTermine()` am gerenderten
   Element gesetzt. Der Riegel: `test/regress-993-schwellen.mjs`, P1 und P2. */
.fc .fc-timegrid-event.lifeos-flach.lifeos-aufgabe .zeit { display: none; }
/* Zwischen 28 und 46 px ist Platz fuer Titel UND Metazeile — aber nur, wenn der
   Titel eine Zeile nimmt statt zwei. Ohne diese Zeile schiebt der zweizeilige
   Titel die zurueckgeholte Metazeile aus der Kachel heraus. */
.fc .fc-timegrid-event.lifeos-kurz.lifeos-aufgabe:not(.lifeos-flach) .titel { -webkit-line-clamp: 1; }
.fc .fc-event.lifeos-aufgabe .zeit { color: var(--text-sekundaer); }
.fc .fc-event.lifeos-aufgabe .punkt { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: var(--radius-pille); }

/* #993, 06.09.2026 — DER EINZUG WEICHT, DAS KAESTCHEN NICHT.
   Bettinas Auflage an der Plan-Freigabe, im Wortlaut: „OK, aber der Haken
   verschwindet nicht!" Gemessen an diesem Tag: bei fuenf gleichzeitigen Kacheln
   blieben dem Titel 26 px von 30,6 px — der linke Einzug von 26 px fuer das
   Kaestchen frass die Kachel auf. Unterhalb von 70 px Kachelbreite (Klasse
   `lifeos-schmal`, am gerenderten Element gesetzt) rueckt der Text an das
   Kaestchen heran, statt ihm eine halbe Kachel freizuhalten. */
   Kaestchen 3..13 px, Text ab 14 px.
   DER EINZUG SELBST STEHT NICHT HIER, sondern bei der kompakten Kalenderdichte
   (Abschnitt E, `#ansicht-heute`): eine Klassenregel an dieser Stelle bewirkt
   NICHTS — gemessen am 06.09.2026 am gerenderten Element, padding-left blieb bei
   25 px. Der Kalender liegt immer in `#ansicht-heute`, und die ID gewinnt. */
/* #1077, 09.09.2026: dieselbe Regel gilt fuer BEIDE Zustaende. Sie hier zu
   teilen hiesse, sie beim naechsten Umbau wieder auseinanderlaufen zu lassen —
   genau so ist #1077 entstanden. */
.fc .fc-timegrid-event.lifeos-aufgabe.lifeos-schmal .kachel-check,
.fc .fc-timegrid-event.lifeos-aufgabe.lifeos-schmal .kachel-fertig { left: 3px; }
/* Und die Trefferflaeche des Kaestchens waechst hier gar nicht mehr nach rechts:
   auf einer 30 px breiten Kachel lag die Mitte sonst IN ihr, und der Klick zum
   Oeffnen hakte ab — #743 kehrte bei dieser Breite zurueck (gemessen 06.09.2026,
   fuenf von fuenf Kacheln). Riegel: regress-993-schwellen P7. */
.fc .fc-timegrid-event.lifeos-aufgabe.lifeos-schmal .kachel-check::before,
.fc .fc-timegrid-event.lifeos-aufgabe.lifeos-schmal .kachel-fertig::before {
  inset: -6px 0 -6px -3px; }

/* #993, 06.09.2026 — „Kacheln ab 96 px zeigen ihre Aufgaben einzeln"
   (Spez F2, 24.08.2026). Die Liste steht immer im DOM und wird von der
   Hoehenschwelle sichtbar gemacht; ohne die Kopplung an die Anwesenheit stuende
   ihr Negativ-Riegel (P9) ohne jeden Bau gruen. */
.fc .fc-event.lifeos-aufgabe .kachel-aufgaben { display: none; }
.fc .fc-event.lifeos-aufgabe.lifeos-hoch .kachel-aufgaben {
  display: block; list-style: none; margin: 4px 0 0; padding: 0;
  font-size: var(--gr-xs); line-height: 1.35; color: var(--text-sekundaer); }
.fc .fc-event.lifeos-aufgabe.lifeos-hoch .kachel-aufgabe {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc .fc-event.lifeos-aufgabe.lifeos-hoch .kachel-aufgabe::before {
  content: '· '; color: var(--linie-stark); }
.fc .fc-event.lifeos-aufgabe.lifeos-hoch .kachel-aufgabe.erledigt { text-decoration: line-through; opacity: .6; }

/* #418, 06.09.2026 — DER FORTSCHRITT AUF DER SAMMELKACHEL.
   Spez 0.10/268 (22.08.2026): „Mehrere Aufgaben im Block: ... Die Kachel zeigt
   zusaetzlich den Fortschritt: MSK Modul 7 - H5P 7.1-7.8 · 5/8."
   Er steht IM Titel und nicht in einer eigenen Zeile: bei 28 px Kachelhoehe
   gibt es keine zweite Zeile, und der Fortschritt ist genau dort das
   Interessante. Traeger #418, Riegel: regress-418-sammelkachel P1 und P8. */
.fc .fc-event.lifeos-aufgabe .kachel-fortschritt {
  font-variant-numeric: tabular-nums; font-weight: 600; opacity: .75;
  margin-inline-start: 2px; white-space: nowrap; }

/* „+N weitere" — die Marke fuer das, was nicht mehr nebeneinander passt.
   Sie sitzt UNTER dem Cluster, damit sie keine Kachel verdeckt, und fuehrt in
   die Tagesansicht, wo dieselben Kacheln die volle Breite haben. */
.fc .kachel-mehr {
  position: absolute; inset-inline-start: 0; z-index: 7;
  min-height: 0; height: 14px; padding: 0 6px; margin: 1px 0 0;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text-sekundaer);
  font-family: inherit; font-size: var(--gr-xs); line-height: 12px;
  cursor: pointer; white-space: nowrap; }
.fc .kachel-mehr:hover { color: var(--text); border-color: var(--linie-stark); }

/* Kurze Kacheln laufen einzeilig (Regel aus V4: unter ~50px Hoehe) */
.fc .fc-timegrid-event.lifeos-kurz .fc-event-main,
.fc .fc-timegrid-event.fc-timegrid-event-short .fc-event-main { display: flex; align-items: center; gap: 8px; padding: 2px 9px; }
.fc .lifeos-kurz .fc-event-main > .titel,
.fc .fc-timegrid-event-short .fc-event-main > .titel { padding-right: 0; }
.fc .lifeos-kurz .fc-event-main > .zeit,
.fc .fc-timegrid-event-short .fc-event-main > .zeit { margin-top: 0; white-space: nowrap; }
.fc .lifeos-kurz .schloss,
.fc .fc-timegrid-event-short .schloss { position: static; margin-left: auto; }
.fc .lifeos-kurz .punkt,
.fc .fc-timegrid-event-short .punkt { position: static; order: -1; flex: none; }

/* Ziehen */
.fc .fc-timegrid-event { cursor: grab; }
.fc .fc-event-dragging, .fc .fc-event-resizing { opacity: .82; box-shadow: var(--schatten); }
.fc .fc-event-resizer-end { height: 9px; }

/* --- Ganztags-Leiste (ersetzt die selbstgebaute Chip-Leiste V1.1.2) ------ */
.fc .fc-timegrid-axis { border-right-width: 0; }
.fc .fc-daygrid-event.lifeos-ganztags,
.fc .fc-daygrid-block-event.lifeos-ganztags {
  background: var(--saeule, var(--saeule-standard));
  border: none; border-radius: var(--radius); margin: 0 3px 3px;
}
.fc .fc-daygrid-event.lifeos-ganztags .fc-event-main { padding: 3px 8px; color: var(--termin-text); }
.fc .fc-daygrid-event.lifeos-ganztags .titel {
  font-size: var(--gr-s); font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Monatsansicht: Chips wie in V1 ------------------------------------- */
.fc .fc-daygrid-day-number { font-size: var(--gr-s); font-weight: 500; color: var(--text-sekundaer); padding: 6px 7px; }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--linie-stark); }
.fc .fc-day-other .fc-daygrid-day-frame { background: var(--flaeche); }
.fc .fc-daygrid-day.fc-day-today { background: transparent; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin: 4px 5px; padding: 0;
  border-radius: var(--radius-pille); background: var(--text); color: var(--flaeche); font-weight: 600;
}
.fc .fc-daygrid-event { border: none; background: transparent; margin-bottom: 2px; }
.fc .fc-daygrid-event .m-eintrag {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: var(--radius); font-size: var(--gr-xs); line-height: 1.4;
  background: var(--saeule, var(--saeule-standard)); color: var(--flaeche);
  white-space: nowrap; overflow: hidden;
}
.fc .fc-daygrid-event .m-zeit { font-weight: 600; opacity: .85; }
.fc .fc-daygrid-event .m-zeit:empty { display: none; }
.fc .fc-daygrid-event .m-titel { overflow: hidden; text-overflow: ellipsis; }
.fc .fc-event.lifeos-aufgabe .m-eintrag {
  background: color-mix(in srgb, var(--saeule, var(--saeule-standard)) 10%, var(--flaeche));
  color: var(--saeule, var(--saeule-standard));
  border-left: 3px solid var(--saeule, var(--saeule-standard));
}
.fc .fc-daygrid-more-link { font-size: var(--gr-xs); color: var(--text-sekundaer); padding-left: 6px; }

/* Schutz-Etikett auf FullCalendar-Kacheln (Regeln aus V4 gelten weiter) */
.fc .fc-event .schloss { position: absolute; right: 6px; bottom: 4px; }
.fc .fc-event.lifeos-aufgabe .schloss { color: var(--text-sekundaer); background: var(--flaeche); border: 1px solid var(--linie-stark); }
.fc .fc-event.lifeos-termin .schloss { color: var(--flaeche); border: 1px solid rgba(252, 251, 250, .65); }
.fc .fc-event:hover .kachel-check, .fc .fc-event:hover .kachel-fertig { opacity: 1; }
.fc .fc-event .kachel-link { right: 6px; bottom: 4px; }

@media (max-width: 900px) {
  :root { --kalender-hoehe: 68vh; }
  .fc .fc-event-main > .titel { font-size: var(--gr-s); }
  .kalender-optionen { margin-left: 0; }
}

/* Zwei-Wochen-Ansicht: 14 Spalten sind eng — dort zaehlt der Titel,
   Uhrzeit und Ort stehen im Tooltip und im Bearbeiten-Dialog. */
.fc-timeGridZweiWochen-view .fc-event-main { padding: 4px 7px; }
.fc-timeGridZweiWochen-view .fc-event-main > .zeit,
.fc-timeGridZweiWochen-view .fc-event-main > .ort,
.fc-timeGridZweiWochen-view .fc-event .kachel-link { display: none; }
.fc-timeGridZweiWochen-view .fc-event-main > .titel { font-size: var(--gr-s); padding-right: 0; }
.fc-timeGridZweiWochen-view .fc-bg-event.lifeos-struktur .typ { font-size: var(--gr-xs); letter-spacing: .05em; }

/* Einzeilige Kacheln: der Titel hat Vorrang vor der Uhrzeit; wird es sehr eng,
   verschwindet die Uhrzeit (sie steht im Tooltip und im Bearbeiten-Dialog). */
.fc .lifeos-kurz .fc-event-main > .titel { flex: 1 1 auto; min-width: 26px; }
.fc .lifeos-kurz .fc-event-main > .zeit { flex: 0 0 auto; }
@media (max-width: 1100px) {
  .fc .lifeos-kurz .fc-event-main > .zeit { display: none; }
}

/* Regelverstoss im Termin-Formular (16.08.2026): die Warnung steht IM Formular,
   damit Getipptes nicht verloren geht — der Vorschlag-Dialog ersetzt sonst alles. */
.warnbox {
  border: 1px solid var(--dr1-grund); background: var(--dr1-grund); border-radius: var(--radius-karte);
  padding: 10px 12px; margin: 2px 0 10px; font-size: var(--gr-s); color: var(--achtung); line-height: 1.5;
}
.warnbox strong { display: block; font-size: var(--gr-s); margin-bottom: 4px; color: var(--achtung); }
.warnbox ul { margin: 0 0 8px; padding-left: 18px; }
.warnbox button {
  border: none; border-radius: var(--radius-pille); padding: 6px 14px;
  font-size: var(--gr-s); font-weight: 600; cursor: pointer;
  background: var(--dr1-grund); color: var(--achtung);
}
.warnbox button:hover { background: var(--achtung); color: var(--flaeche); }
.dialog-vergleich.einspaltig { grid-template-columns: 1fr; }

/* ==========================================================================
   ORGANIGRAMM (16.08.2026) — Nachschlagewerk und Lagebild.
   Aufbau wie in der Projektuebersicht: Zeile traegt die Saeulenfarbe, die
   Zahlen stehen rechts. Kompakt zugeklappt, Detail auf Klick.
   ========================================================================== */

.orga-leiste { align-items: center; gap: 12px; }
.orga-leiste input[type="search"] {
  flex: 1 1 320px;
  min-width: 220px;
  padding: 9px 13px;
  font: inherit;
  font-size: var(--gr-s);
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}
.orga-leiste input[type="search"]:focus { outline: none; border-color: var(--akzent-linie); box-shadow: var(--schatten); }
.orga-schalter { display: flex; gap: 6px; }
.orga-schalter button {
  padding: 8px 12px;
  font: inherit;
  font-size: var(--gr-s);
  color: var(--text-sekundaer);
  background: var(--flaeche-leise);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.orga-schalter button:hover { background: var(--akzent-flaeche); }
.orga-bilanz { margin-left: auto; font-size: var(--gr-s); color: var(--text-sekundaer); }
.orga-warnung { color: var(--warnung-text); }

.orga-saeule { margin-bottom: 16px; overflow: hidden; }
.orga-saeule-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linie-zart);
  background: color-mix(in srgb, var(--saeule, var(--saeule-standard)) 6%, var(--flaeche));
}
.orga-saeule-kopf .punkt { width: 11px; height: 11px; border-radius: var(--radius); flex: none; background: var(--saeule, var(--saeule-standard)); }
.orga-saeule-name { font-size: var(--gr-m); font-weight: 600; letter-spacing: -.01em; }
.orga-saeule-zahlen { margin-left: auto; font-size: var(--gr-s); color: var(--text-leise); white-space: nowrap; }
.orga-wartekorb { color: var(--text-sekundaer); }
.orga-saeulenweit {
  padding: 9px 18px;
  font-size: var(--gr-s);
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie-zart);
  background: var(--flaeche-leise);
}

/* --- Bereichszeile: kompakt, aufklappbar -------------------------------- */
.orga-bereich { border-top: 1px solid var(--linie-zart); }
.orga-bereich:first-child { border-top: none; }

.orga-zeile {
  display: grid;
  grid-template-columns: 16px minmax(0, 1.05fr) minmax(0, 0.8fr) minmax(0, 1.4fr) 148px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 11px 18px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
  border-left: 4px solid transparent;
  cursor: pointer;
}
.orga-zeile:hover { background: var(--flaeche-leise); }
.orga-bereich.offen > .orga-zeile { background: var(--flaeche-leise); border-left-color: var(--saeule, var(--saeule-standard)); }
.orga-zeile .pfeil { color: var(--text-sehr-leise); transition: transform .12s ease; font-size: var(--gr-m); }
.orga-bereich.offen > .orga-zeile .pfeil { transform: rotate(90deg); }
.orga-name { font-size: var(--gr-m); font-weight: 600; letter-spacing: -.01em; }
/* Beide Spalten laufen einzeilig und schneiden ab — die volle Liste steht im
   aufgeklappten Detail. Ohne das schiebt sich die Leitung in die Agentenspalte. */
.orga-agenten,
.orga-leitung {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--gr-s);
  color: var(--text-sekundaer);
}
.orga-person { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.orga-person.leitung { font-weight: 600; color: var(--text); }
.orga-person.leitung .punkt { width: 8px; height: 8px; border-radius: var(--radius); background: var(--saeule, var(--saeule-standard)); }
/* eigener Name statt .leer — die globale .leer-Klasse traegt 22px Polsterung
   und wuerde die Bereichszeile auf doppelte Hoehe aufblasen. */
.orga-person.orga-leer { color: var(--text-sekundaer); font-weight: 400; font-style: italic; }
.orga-person.leitung.ererbt { font-weight: 500; color: var(--text-sekundaer); }
.ererbt-marke { font-size: var(--gr-xs); color: var(--text-sekundaer); }
.orga-saeule-leitung { font-size: var(--gr-s); color: var(--text-leise); margin-left: 4px; }
.orga-saeule-leitung strong { color: var(--text); font-weight: 600; }
.orga-person.extern { font-style: italic; }
.orga-zahlen { font-size: var(--gr-s); color: var(--text-leise); text-align: right; white-space: nowrap; }
.orga-zahlen em { font-style: normal; font-weight: 600; color: var(--text); }
.trenner { color: var(--text-sehr-leise); padding: 0 4px; }

/* --- Detail: Besetzung links, Lage rechts ------------------------------- */
.orga-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 22px;
  padding: 4px 18px 18px 38px;
  background: var(--flaeche-leise);
}
.orga-ueber {
  font-size: var(--gr-xs);
  font-weight: 600;
  color: var(--text-sekundaer);
  margin-bottom: 8px;
}
.orga-ueber.zweit { margin-top: 16px; }

.orga-rolle {
  display: grid;
  grid-template-columns: minmax(90px, auto) auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--linie-zart);
}
.orga-rolle:first-of-type { border-top: none; }
.orga-rolle-name { font-size: var(--gr-s); font-weight: 600; }
.orga-funktion { font-size: var(--gr-s); color: var(--text-sekundaer); line-height: 1.45; }
.orga-ort { color: var(--text-sekundaer); }
.orga-ebene {
  justify-self: start;
  padding: 1px 7px;
  border-radius: var(--radius-pille);
  font-size: var(--gr-xs);
  font-weight: 600;
  color: var(--text-sekundaer);
  background: var(--hintergrund);
  white-space: nowrap;
}
.orga-ebene.e-saeulenleitung,
.orga-ebene.e-zentrale { color: var(--flaeche); background: var(--saeule, var(--saeule-standard)); }
.orga-ebene.e-abteilungsleitung { color: var(--text); background: var(--akzent-flaeche); border: 1px solid var(--akzent-linie); }
.orga-ebene.e-extern { border: 1px dashed var(--linie-stark); background: transparent; }

.orga-projekt,
.orga-aufgabe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--linie-zart);
}
.orga-projekt:first-of-type,
.orga-aufgabe:first-of-type { border-top: none; }
.orga-projekt-name,
.orga-aufgabe-name { font-size: var(--gr-s); font-weight: 500; letter-spacing: -.01em; }
.orga-projekt .fall-ref { font-weight: 400; color: var(--text-sekundaer); }
.orga-meta { font-size: var(--gr-s); color: var(--text-sekundaer); flex-basis: 100%; }
.orga-detail .leer { font-size: var(--gr-s); color: var(--text-sekundaer); padding: 4px 0; }

.orga-menschen-karte .orga-rolle { border-left: 3px solid var(--saeule, var(--saeule-zentrale)); padding-left: 10px; }

/* Suchtreffer */
#ansicht-organigramm mark { background: var(--prio-mittel); color: var(--prio-mittel-text); border-radius: var(--radius); padding: 0 2px; }

/* Eng: erst die Agentenliste, dann die Leitung weglassen. Die Spaltenzahl muss
   dabei mitwandern, sonst bricht das Raster um (Kachel steht dann zweizeilig). */
@media (max-width: 1100px) {
  .orga-zeile { grid-template-columns: 16px minmax(0, 1fr) 150px 140px; }
  .orga-zeile .orga-agenten { display: none; }
  .orga-detail { grid-template-columns: 1fr; gap: 16px; padding-left: 18px; }
}
@media (max-width: 700px) {
  .orga-zeile { grid-template-columns: 16px minmax(0, 1fr) 110px; }
  .orga-zeile .orga-leitung { display: none; }
  .orga-bilanz { margin-left: 0; }
}

/* ============================================================
   AUFGABENSTAPEL (rechte Spalte, 17.08.2026)
   Drei Fächer aus dem Aufgabenstatus. Verplantes bleibt sichtbar,
   tritt aber zurück; „in Arbeit" tritt vor. Keine neue Farbe —
   die Säulenfarbe bleibt die Kante, gearbeitet wird mit Deckkraft.
   ============================================================ */

.karte > .karte-kopf.stapel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* Der Anlege-Knopf bleibt auf EINER Zeile (#862, Bettinas Auflage bei der
   Abnahme am 07.09.2026). Zusammen mit dem kurzen Etikett "+ Neu" misst der
   Stapel-Kopf 121 statt 157 px — gemessen am 07.09.2026 bei 1600 x 1000 px. */
.karte > .karte-kopf.stapel-kopf #stapel-neu { white-space: nowrap; }
.stapel-bilanz { font-size: var(--gr-xs); font-weight: 600; letter-spacing: .1em; color: var(--text-sekundaer); text-transform: none; }

.stapel-reiter { margin: 10px 10px 0; }
.stapel-reiter button { font-size: var(--gr-s); padding: 5px 9px; }

.stapel { padding: 10px; max-height: 62vh; overflow-y: auto; }

.stapel-fach + .stapel-fach { margin-top: 12px; }
.fach-kopf {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 5px 4px; margin-bottom: 6px;
  background: none; border: none; border-bottom: 1px solid var(--linie-zart);
  cursor: pointer; text-align: left; color: var(--text-sekundaer);
}
.fach-kopf:hover { color: var(--text); }
.fach-kopf .pfeil { font-size: var(--gr-xs); width: 9px; color: var(--text-schwach); }
.fach-kopf .fach-titel { flex: 1; font-size: var(--gr-xs); font-weight: 600; }
.fach-kopf .fach-zahl {
  flex: none; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-pille);
  background: var(--hintergrund); color: var(--text-sekundaer); font-size: var(--gr-xs); font-weight: 600; text-align: center;
}
.stapel-fach.zu .fach-inhalt { display: none; }
.fach-leer { padding: 6px 4px 10px; font-size: var(--gr-s); color: var(--text-sekundaer); font-style: italic; }
.fach-trenner {
  margin: 10px 2px 6px; padding-top: 8px; border-top: 1px dashed var(--linie-zart);
  font-size: var(--gr-xs); font-weight: 600; letter-spacing: .06em; color: var(--text-sekundaer);
}

/* Überfälliges steht oben und trägt eine warme Kante — der Rest bleibt ruhig. */
.stapel-fach[data-fach="ueberfaellig"] .fach-kopf .fach-zahl { background: var(--warnung-flaeche); color: var(--warnung-text); }

/* Verplant: tritt zurück, bleibt lesbar. In Arbeit: tritt vor. */
.aufgabe-zeile.ist-verplant { opacity: .62; background: var(--flaeche-leise); }
.aufgabe-zeile.ist-verplant:hover { opacity: 1; }
.aufgabe-zeile.ist-in_arbeit { border-left-width: 6px; box-shadow: inset 0 0 0 1px var(--linie-zart); }
.aufgabe-zeile .zeitmarke {
  display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: var(--radius);
  font-size: var(--gr-xs); font-weight: 600; color: var(--text-sekundaer); background: var(--hintergrund);
}
.aufgabe-zeile .zeitmarke.leise { color: var(--text-sekundaer); background: transparent; padding-left: 0; }

/* ============================================================
   ERLEDIGTE ZEITKACHEL (17.08.2026)
   Sie verschwindet nicht — der Tag soll zeigen, was gelaufen ist.
   Sie hört nur auf, Aufmerksamkeit zu verlangen.
   ============================================================ */
.fc .fc-event.lifeos-erledigt { opacity: .45; }
.fc .fc-event.lifeos-erledigt .titel { text-decoration: line-through; }
.fc .fc-event.lifeos-erledigt .punkt { background: var(--linie-stark) !important; }
/* Seit #427 (01.09.2026) ist der gesetzte Haken ein KNOPF, kein `span`: er
   nimmt den Haken wieder weg. `border`/`padding`/`font` muessen deshalb
   ausdruecklich zurueckgesetzt werden — sonst legt der Browser seine eigene
   Knopf-Fassung darueber.

   #1077, 09.09.2026 — DER GESETZTE HAKEN HAT DIE GESTALT DES LEEREN
   KAESTCHENS. Bettina am 08.09.2026, im Wortlaut: „Jetzt hast du die Box zum
   Abhaken der Aufgabe so schoen umgebaut - aber sobald ich eine abhake, sieht
   die wieder so aus wie links!!!!!!!!"

   ES SIND ZWEI BEDIENELEMENTE (public/index.html Z. 1413 und 1418), und #743
   hat am 06.09.2026 nur das leere angefasst. Der gesetzte Haken blieb
   doppelt so gross, rund, und auf der ANDEREN Seite der Kachel. Gemessen am
   09.09.2026: 20x32 px gegen 10x10, border-radius 999px gegen 2px, links
   +6 statt +8 — und auf der kurzen Kachel 15x32 bei +15.

   DAS `min-height: 0` IST DER KERN, nicht die Kosmetik: die
   Trefferflaechen-Regel (Z. 152-154) setzt `min-height: var(--treffer-min)`
   fuer JEDEN <button>, und `min-height` gewinnt gegen `height`. Ohne diese
   Zeile bliebe der Haken 32 px hoch, obwohl hier 10 px stehen — genau der
   Fehler, den #743 am leeren Kaestchen gemessen hat.

   UND ES WAR MEHR ALS OPTIK: Bei 53 px Kachelbreite lag der Mittelpunkt der
   Kachel IN der Trefferflaeche des gesetzten Hakens (regress-1077 N1a/N1b).
   Fuer den abgehakten Zustand war #743 also nie behoben. Der Zuschnitt unten
   ist derselbe wie beim leeren Kaestchen und waechst nicht nach rechts.

   DER EINE UNTERSCHIED, DER BLEIBT, ist die FUELLUNG: gefuellt mit sichtbarem
   Haken statt leer. Alles andere ist gleich. */
.kachel-fertig {
  position: absolute; left: 5px; top: 5px; right: auto; width: 10px; height: 10px;
  min-height: 0; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--saeule-lernrad); color: var(--flaeche);
  font-size: 8px; line-height: 7px;
  border: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; z-index: 3;
  box-sizing: border-box;
  transition: background .12s, box-shadow .12s;
}
/* Derselbe Zuschnitt wie bei `.kachel-check` (Z. 827) — er waechst NICHT nach
   rechts, damit der Mittelpunkt der Kachel frei bleibt (#743, #1077). */
.kachel-fertig::before { content: ''; position: absolute; inset: -6px -2px -6px -6px; }
.kachel-fertig:hover { background: var(--linie-stark); box-shadow: inset 0 0 0 1.5px var(--flaeche); }

/* --- Aufgabenstapel: Überfälliges ist ein Etikett, kein eigener Ort ---------
   Befund 18.08.2026: das frühere Anheft-Fach „Überfällig" nahm überfällige
   Aufgaben aus „Verplant" und „In Arbeit" heraus — eine für heute eingeplante
   überfällige Aufgabe stand danach in keinem der drei Fächer. Seitdem steht
   sie oben in ihrem Fach und trägt links eine Marke. */
.aufgabe-zeile.ist-ueberfaellig { box-shadow: inset 3px 0 0 0 var(--warnung-text); }
.aufgabe-zeile.ist-ueberfaellig .faellig { color: var(--warnung-text); font-weight: 600; }

/* --- „Läuft gerade" und das Warten-Fach (18.08.2026) -----------------------
   Befund Bettina: „Bei ‚In Arbeit' steht nie irgendwas." Der Status
   `in_arbeit` wurde von niemandem gesetzt; das Fach speist sich jetzt aus
   der laufenden Zeitkachel. Die Marke soll auffallen, ohne zu blinken. */
.aufgabe-zeile .zeitmarke.laeuft {
  color: var(--saeule-lernrad);
  font-weight: 600;
}
.aufgabe-zeile .zeitmarke.laeuft::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: var(--radius-pille);
  background: var(--saeule-lernrad);
  vertical-align: baseline;
}
.stapel-fach[data-fach="wartet"] .aufgabe-zeile { opacity: .78; }

/* --- Die fünf Dringlichkeitsstufen (18.08.2026) ----------------------------
   Vorher zeigte die Oberfläche eine ZWEITE, dreistufige Skala (hoch/mittel/
   niedrig), während das Schema fünf kennt. Jetzt fünf benannte Stufen plus
   der eigene Zustand „nicht priorisiert" — ein leeres Feld ist keine 5.
   Die Farben laufen von warm (verdrängt alles) nach ruhig (wäre schön);
   „nicht priorisiert" ist bewusst UNBUNT: es ist keine Einstufung, sondern
   eine offene Frage. */
/* V18a (23.08.2026): jede Stufe eine eigene Farbfamilie, getoenter Grund mit
   dunkler Schrift, JEDER Wert gegen SEINEN Grund nachgerechnet (0.2). Die
   Ergebnisse stehen in 05 OUTPUT/2026-08-23-v18a-designsystem.md. */
.prio.d-1 { background: var(--dr1-grund); color: var(--dr1-text); border-color: var(--dr1-grund); }
.prio.d-2 { background: var(--dr2-grund); color: var(--dr2-text); border-color: var(--dr2-grund); }
.prio.d-3 { background: var(--dr3-grund); color: var(--dr3-text); border-color: var(--dr3-grund); }
.prio.d-4 { background: var(--dr4-grund); color: var(--dr4-text); border-color: var(--dr4-grund); }
.prio.d-5 { background: var(--dr5-grund); color: var(--dr5-text); border-color: var(--dr5-grund); }
.prio.d-leer {
  background: none;                      /* ohne Grund — es ist keine Einstufung */
  color: var(--dr0-text);
  border: 1px dashed var(--linie-stark); /* gestrichelt, 0.2 */
  font-style: normal;
}
.punkt.d-1 { background: var(--warnung-text); }
.punkt.d-2 { background: var(--prio-hoch); }
.punkt.d-3 { background: var(--prio-mittel); }
.punkt.d-4 { background: var(--prio-niedrig-punkt); }
.punkt.d-5 { background: var(--prio-niedrig-punkt); }
.punkt.d-leer { background: var(--linie-stark); }

/* ==========================================================================
   AUFGABEN-REITER (18.08.2026)
   Die flache Liste mit Filtern — das Einzige, was am Notion-System wirklich
   getragen hat. Bewusst eine Tabelle und keine Karten: es geht ums
   Überblicken und Vergleichen, nicht ums Betrachten.
   ========================================================================== */
.aufgaben-leiste { flex-wrap: wrap; gap: 8px; align-items: center; }
.aufgaben-leiste input[type="search"] { min-width: 240px; flex: 1 1 240px; }
.aufgaben-leiste select { max-width: 190px; }
.aufgaben-leiste .haken-gruppe { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.aufgaben-leiste .haken-gruppe label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--gr-s); color: var(--text-sekundaer); cursor: pointer; white-space: nowrap;
}
.aufgaben-leiste .knopf-primaer {
  margin-left: auto; border: none; border-radius: var(--radius-pille); padding: 8px 16px;
  font-size: var(--gr-s); font-weight: 600; cursor: pointer;
  background: var(--saeule-lernrad); color: var(--flaeche);
}
.aufgaben-leiste .knopf-primaer:hover { background: var(--saeule-lernrad); }

/* Der Zähler steht über der Liste und sagt auch, was NICHT gezeigt wird —
   eine still gekappte Liste liest sich wie eine vollständige. */
.aufgaben-bilanz { font-size: var(--gr-s); color: var(--text-sekundaer); margin: 10px 2px 6px; }

.aufgaben-tabelle { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); overflow: hidden; }
.aufgaben-tabelle .kopf,
.aufgaben-tabelle .auf-zeile {
  display: grid;
  /* Seit dem 02.09.2026 (#415) tragen die Spalten TEXT statt Bedienelementen —
     sie brauchen deshalb weniger Platz, und die Frist keinen Kalender-Knopf
     mehr. Am selben Tag mit #814 auf ZEHN Spalten erweitert (Bettina: „Da ist
     ja noch ausreichend pLatz"): „Terminiert" direkt nach „Frist", Bereich und
     Projekt getrennt, der Kettenschritt-Typ als eigene Spalte.
     Reihenfolge: Aufgabe · Status · Dringlichkeit · Frist · Terminiert ·
     Bereich · Projekt · Schritt · Bearbeiter · Zeit. */
  grid-template-columns:
    minmax(180px, 2.2fr) 104px 118px 62px 148px
    minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) 92px 60px;
  /* „Terminiert" ist 148 px breit, nicht 116. Der erste Entwurf war zu schmal:
     Im Demo-Bild vom 02.09.2026 stand „04.09. 10:00 …" — abgeschnitten war
     ausgerechnet das „+1", also genau der Teil, der die Wahrheit ueber die Zahl
     der Termine traegt. Die Pruefung stand trotzdem gruen, weil sie
     `textContent` las: der Text war da, sichtbar war er nicht. Dagegen steht
     seit demselben Tag die Pruefung F7 (scrollWidth gegen clientWidth). */
  gap: 10px; align-items: center;
  padding: 0 14px;
}

/* ---------------------------------------------------------------------------
   DIE ZEILE IST EINE TEXTZEILE — und die Dichte wirkt endlich (#415, 02.09.2026)

   Gemessen war die Zeile vorher in ALLEN DREI Dichtestufen 149 px hoch: die
   Stufen setzten nur `min-height`, und die trug nichts aus, solange sieben
   Bedienelemente die Zeile von innen auseinanderdrueckten. Jetzt bestimmt die
   Dichte die Hoehe wirklich — ueber `height` statt `min-height` — und der
   Inhalt haelt sich daran, weil er einzeilig ist.
   --------------------------------------------------------------------------- */
.aufgaben-tabelle .auf-zeile {
  height: var(--zeilenhoehe);
  overflow: hidden;
}
/* Jede Zelle ist EINE Zeile, gekuerzt statt umgebrochen (Spez 2.2). Ohne
   `min-width: 0` bricht ein Grid-Kind nicht um, sondern sprengt seine Spalte. */
.aufgaben-tabelle .auf-zeile > * {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auf-titel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Status steht als festes Emoji plus Wort (Spez 0.4: „Feste Status-Emojis"
   — `ui-designsystem` haelt das fest). Kein zweiter Farbkanal: die Saeulenfarbe
   traegt die Kante, und Saeulen- und Statusfarbe lassen sich ueber den Ton
   ohnehin nicht trennen (`WISSEN.md`, 01.09.2026). */
.auf-status { color: var(--text-sekundaer); }
.auf-bearbeiter, .auf-bereich, .auf-projekt, .auf-kette { color: var(--text-sekundaer); }

/* „Terminiert" (#814). Der vergangene Termin wird gedaempft, aber nicht
   versteckt — er ist die Auskunft, dass die Aufgabe eingeplant WAR. Die Farbe
   ist `--text-sekundaer`, nicht `--text-schwach`: das Token gehoert laut
   Feinschliff-Riegel R1 der Deko, und ein Termin ist Information. */
.auf-termin { font-family: var(--schrift-zahl, inherit); color: var(--text-sekundaer); }
.auf-termin.termin-vorbei { font-style: italic; opacity: .72; }
.auf-termin-mehr {
  font-family: inherit; font-size: var(--gr-xs);
  background: var(--hintergrund); border-radius: 999px; padding: 0 5px; margin-left: 3px;
}
.auf-wartet.warn { color: var(--warnung-text); font-weight: 600; }

/* ---------------------------------------------------------------------------
   GRUPPEN NACH PLANUNGSSTATUS (#636, Bettinas Entscheidung vom 02.09.2026)
   Dieselbe Bauart wie die Faecher der Kalender-Seitenleiste — dieselbe Geste
   an derselben Sache.
   --------------------------------------------------------------------------- */
.auf-gruppe-kopf {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: var(--flaeche-leise); cursor: pointer; text-align: left;
  padding: 6px 14px; color: var(--text-sekundaer);
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
}
.auf-gruppe:first-child .auf-gruppe-kopf { border-top: none; }
.auf-gruppe-kopf:hover { color: var(--text); }
.auf-gruppe-kopf .pfeil { font-size: var(--gr-xs); width: 9px; color: var(--text-schwach); }
/* KEINE Versalien: Spez 0.3 laesst sie nur in Spaltenkoepfen zu, und
   `ui-designsystem` haelt genau das fest — mein erster Entwurf hat die Regel
   gebrochen und den Lauf rot gemacht (02.09.2026). Die Faecher der
   Seitenleiste schreiben aus demselben Grund klein. */
.auf-gruppe-titel { font-size: var(--gr-xs); font-weight: 600; }
.auf-gruppe-zahl {
  font-family: var(--schrift-zahl, inherit); font-size: var(--gr-xs);
  background: var(--hintergrund); border-radius: 999px; padding: 0 7px; color: var(--text-sekundaer);
}
/* `--text-sekundaer`, NICHT `--text-schwach`: Der Feinschliff-Riegel R1
   (`ui-fullcalendar`) laesst `--text-schwach` nur auf Deko und Platzhaltern zu,
   und die Minutensumme samt „N ohne Schaetzung" ist Information — sie ist
   sogar der Teil, der die Luecke der Summe benennt. Mein erster Entwurf hat
   den Riegel gebrochen und den Lauf rot gemacht (02.09.2026). Der Pfeil
   daneben bleibt `--text-schwach`; er IST Deko. */
.auf-gruppe-summe { margin-left: auto; font-size: var(--gr-xs); color: var(--text-sekundaer); }
.auf-gruppe.zu .auf-gruppe-inhalt { display: none; }
.aufgaben-tabelle .kopf {
  background: var(--flaeche-leise); font-size: var(--gr-xs); font-weight: 600;
  color: var(--text-sekundaer); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--rand);
  /* Die Zeile hat ihre Polsterung an die Dichte abgegeben (siehe unten); der
     Spaltenkopf behaelt seine, er haengt an keiner Dichtestufe. */
  padding-top: 9px; padding-bottom: 9px;
}
.aufgaben-tabelle .kopf [data-sort] { cursor: pointer; user-select: none; }
.aufgaben-tabelle .kopf [data-sort]:hover { color: var(--text); }
.aufgaben-tabelle .kopf [data-sort].sortiert::after { content: ' ▲'; font-size: var(--gr-xs); }
.aufgaben-tabelle .kopf [data-sort].sortiert.ab::after { content: ' ▼'; }

.auf-zeile { border-bottom: 1px solid var(--rand-leise, var(--hintergrund)); font-size: var(--gr-s); }
.auf-zeile:hover { background: var(--flaeche-leise); }
.auf-zeile.ist-erledigt { opacity: .5; }
.auf-zeile.ist-erledigt .auf-titel { text-decoration: line-through; }
/* #861 · DIE TITELZELLE DARF NICHT UMBRECHEN (03.09.2026)

   Bettinas Befund: "wenn eine Aufgabe umbricht, kann ich sie ueberhaupt nicht
   mehr lesen!" — links standen nur noch Aufklapp-Pfeil und Saeulenpunkt, der
   Titel lief quer darunter durch und schnitt in die Zeile darunter.

   URSACHE, gemessen: Bis heute stand hier `flex-wrap: wrap` — die EINZIGE
   Stelle im ganzen Zeilenaufbau, an der etwas umbrechen konnte. Ein Flexkind
   wandert in eine zweite Zeile, sobald seine MAX-CONTENT-Breite nicht mehr in
   die Restbreite passt; geschrumpft wird erst DANACH. Der Titel rutschte
   deshalb nach unten, statt gekuerzt zu werden — und `overflow: hidden` der
   Zeile schnitt ihn dort in der Mitte ab.

   WARUM `white-space: nowrap` das nicht verhindert hat: Es gilt fuer den TEXT
   im Titel, nicht fuer die Flexzeilen des Kastens um ihn herum. Genau daran
   sind am 03.09.2026 vier Reproduktionsversuche vorbeigelaufen.

   `flex: none` fuer Pfeil, Schutz-Etikett und Wiederholungs-Pille, damit das
   Schrumpfen den Titel trifft und nicht sie — sonst waere der Umbruch nur
   gegen ein Wegquetschen der kleinen Zeichen getauscht. Gemessen: Punkt und
   Pfeil stehen bei 3440 bis 1100 px vollzaehlig (`regress-861`).

   Der Riegel dagegen steht in `regress-861-lange-titel.mjs`, bei VIER
   Breiten — 3440 px allein ist der guenstigste Fall und war gruen. */
.auf-name { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.auf-name > .auf-titel { flex: 1 1 auto; min-width: 0; }
.auf-name > .auf-aufklappen,
.auf-name > .schutz-etikett,
.auf-name > .wdh-pille { flex: none; }
.auf-name .punkt { width: 9px; height: 9px; border-radius: var(--radius); flex: none; background: var(--saeule, var(--linie-stark)); }
.auf-titel { cursor: text; font-weight: 500; }
.auf-titel:hover { text-decoration: underline dotted; }
.auf-aufklappen {
  border: none; background: transparent; cursor: pointer; color: var(--text-sekundaer);
  font-size: var(--gr-m); line-height: 1; padding: 2px 4px; flex: none;
}
.auf-aufklappen:hover { color: var(--text); }
.auf-zeile select.auf-feld {
  width: 100%; font-size: var(--gr-s); padding: 4px 6px;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text);
}
.auf-zeile select.auf-feld:hover { border-color: var(--rand); background: var(--flaeche); }
.auf-feld-anzeige { display: none; }
.auf-frist { font-size: var(--gr-s); }
.auf-zeile input.auf-datum {
  width: 100%; font-size: var(--gr-s); padding: 3px 5px; color: var(--text);
  border: 1px solid transparent; border-radius: var(--radius); background: transparent;
  font-family: inherit;
}
.auf-zeile input.auf-datum:hover,
.auf-zeile input.auf-datum:focus { border-color: var(--rand); background: var(--flaeche); }
.auf-frist.frist-warn input.auf-datum { color: var(--warnung-text); font-weight: 600; }
.auf-ort { display: grid; gap: 2px; min-width: 0; }
.auf-ort, .auf-zeit { font-size: var(--gr-s); color: var(--text-sekundaer); }
.auf-zeit { text-align: right; }
.auf-ort .leise, .leise { color: var(--text-sekundaer); }
.zeile-warten { flex-basis: 100%; font-size: var(--gr-xs); color: var(--text-sekundaer); }
.zeile-warten.warn { color: var(--warnung-text); font-weight: 600; }
.zeile-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tag-pille {
  display: inline-block; padding: 1px 7px; border-radius: var(--radius-pille);
  background: var(--flaeche-leise); border: 1px solid var(--rand);
  font-size: var(--gr-xs); color: var(--text-sekundaer);
}
.wdh-pille { font-size: var(--gr-s); color: var(--text-sekundaer); }

/* Die Detail-Ansicht — „wer hat das wann angefasst?" */
.auf-detail { padding: 12px 16px 16px 40px; background: var(--flaeche-leise); border-bottom: 1px solid var(--rand); }
.detail-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.detail-block h4 { margin: 0 0 6px; font-size: var(--gr-xs); color: var(--text-sekundaer); }
.detail-zeile { font-size: var(--gr-s); padding: 3px 0; border-bottom: 1px solid var(--rand-leise, var(--hintergrund)); }
.detail-zeile:last-child { border-bottom: none; }
.detail-text { font-size: var(--gr-s); white-space: pre-wrap; color: var(--text); }
.knopf-klein {
  border: 1px solid var(--rand); background: var(--flaeche); border-radius: var(--radius-pille);
  padding: 2px 9px; font-size: var(--gr-xs); cursor: pointer; margin-left: 6px;
}
.auf-blaettern { padding: 12px; text-align: center; }
.auf-blaettern button {
  border: 1px solid var(--rand); background: var(--flaeche); border-radius: var(--radius-pille);
  padding: 7px 18px; font-size: var(--gr-s); cursor: pointer;
}
.dialog-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-form .haken-zeile { display: flex; align-items: center; gap: 7px; font-weight: 600; margin: 4px 0 10px; }
.dialog-form .haken-zeile input { width: auto; margin: 0; }
.feld-hilfe { font-size: var(--gr-xs); font-weight: 400; color: var(--text-sekundaer); margin-top: 4px; display: block; }

/* Projekt-Detail im Dialog (18.08.2026) */
.projekte .zeile.projekt-zeile { cursor: pointer; }
.projekte .zeile.projekt-zeile:hover { background: var(--flaeche-leise); }
.filterleiste .knopf-primaer {
  margin-left: auto; border: none; border-radius: var(--radius-pille); padding: 8px 16px;
  font-size: var(--gr-s); font-weight: 600; cursor: pointer; background: var(--saeule-lernrad); color: var(--flaeche);
}
.filterleiste .knopf-primaer:hover { background: var(--saeule-lernrad); }
.projekt-kopfzahlen {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: var(--gr-s); color: var(--text-sekundaer); margin: 4px 0 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rand);
}
.projekt-aufgaben { max-height: 44vh; overflow: auto; margin: 6px 0 12px; }
.projekt-aufgaben .dialog-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: var(--gr-s); }
.projekt-aufgaben .dialog-zeile .flex1 { flex: 1; min-width: 0; }
.projekt-aufgaben .dialog-zeile .punkt { width: 8px; height: 8px; border-radius: var(--radius); flex: none; }
.projekt-aufgaben .dialog-zeile.erledigt { opacity: .5; text-decoration: line-through; }


/* ==========================================================================
   Farbe in der Aufgabenliste (Bettina, 18.08.2026: „Bisschen Farbe vielleicht")

   Die Farbe sitzt AM Bedienelement, nicht daneben: die Auswahl selbst traegt
   den Ton ihres Wertes. So sieht man die Dringlichkeit einer Zeile, ohne zu
   lesen — und sieht sie sich sofort aendern, wenn man sie aendert.

   Der Ton ist bewusst blass: eine Liste mit 100 Zeilen darf nicht flackern.
   Ein kraeftiger Rand links traegt die Aussage, die Flaeche bleibt ruhig.
   ========================================================================== */
.auf-zeile select.auf-feld[class*="dr-"],
.auf-zeile select.auf-feld[class*="st-"] {
  border-left-width: 3px; border-left-style: solid; border-radius: var(--radius);
  padding-left: 7px;
}
.auf-zeile select.dr-1 { border-left-color: var(--warnung-text);      background: var(--warnung-flaeche); color: var(--warnung-text); font-weight: 600; }
.auf-zeile select.dr-2 { border-left-color: var(--prio-hoch);         background: var(--dr1-grund); color: var(--achtung); }
.auf-zeile select.dr-3 { border-left-color: var(--warten);                  background: var(--dr3-grund); color: var(--dr3-text); }
.auf-zeile select.dr-4 { border-left-color: var(--prio-niedrig-punkt); background: var(--prio-niedrig); color: var(--prio-niedrig-text); }
.auf-zeile select.dr-5 { border-left-color: var(--linie-stark); color: var(--text-sekundaer); }
/* „nicht priorisiert" ist ein eigener Zustand, keine 5 — gestrichelt, damit er
   als offene Frage aussieht und nicht als Entscheidung. */
.auf-zeile select.dr-leer { border-left-style: dashed; border-left-color: var(--linie-stark); color: var(--text-sekundaer); }

.auf-zeile select.st-offen         { border-left-color: var(--linie-stark); }
.auf-zeile select.st-geplant       { border-left-color: var(--fokus); background: var(--dr4-grund); color: var(--dr4-text); }
.auf-zeile select.st-in_arbeit     { border-left-color: var(--saeule-lernrad); background: var(--hintergrund); color: var(--saeule-lernrad); font-weight: 600; }
.auf-zeile select.st-wartet_extern { border-left-color: var(--warten); background: var(--dr2-grund); color: var(--dr2-text); }
.auf-zeile select.st-blockiert     { border-left-color: var(--warnung-text); background: var(--warnung-flaeche); color: var(--warnung-text); }
.auf-zeile select.st-erledigt      { border-left-color: var(--text-sekundaer); color: var(--text-sekundaer); }
.auf-zeile select.st-verworfen     { border-left-color: var(--text-sekundaer); color: var(--text-sekundaer); font-style: italic; }


/* =====================================================================
   V18a · 0.6 — Dichte, Zeilenhoehen, Zeilenfarbe, Panelbreiten
   ===================================================================== */

/* Der Umschalter setzt das Attribut am <html>; alles haengt an den Token. */
:root[data-dichte="kompakt"] { --zeilenhoehe: var(--zeile-kompakt); --leiste-hoehe: 32px; }
:root[data-dichte="normal"]  { --zeilenhoehe: var(--zeile-normal);  --leiste-hoehe: 48px; }
:root[data-dichte="weit"]    { --zeilenhoehe: var(--zeile-weit);    --leiste-hoehe: 48px; }

/* Leisten sind an die Zeilenhoehe gekoppelt (Carbon): 32 → 32, 40 und 48 → 48. */
.werkzeugleiste, .massenleiste, .ansichtsleiste { min-height: var(--leiste-hoehe); }

/* Listenzeilen tragen die Zeilenhoehe aus dem Token. */
.auf-zeile, .aufgaben-tabelle tbody tr, .stapel-eintrag, .projekte tbody tr {
  min-height: var(--zeilenhoehe);
}

/* Zeilenfarbe: ruhig, bis man hinsieht (Carbon). Unterlinie statt Zebra. */
.auf-zeile, .aufgaben-tabelle tbody tr, .projekte tbody tr { color: var(--text-sekundaer); }
.auf-zeile:hover, .auf-zeile:focus-within, .auf-zeile[aria-selected="true"],
.aufgaben-tabelle tbody tr:hover, .aufgaben-tabelle tbody tr[aria-selected="true"],
.projekte tbody tr:hover, .projekte tbody tr[aria-selected="true"] { color: var(--text); }
.aufgaben-tabelle tbody tr, .projekte tbody tr { border-bottom: 1px solid var(--linie); }
.aufgaben-tabelle tbody tr:nth-child(even), .projekte tbody tr:nth-child(even) { background: none; }

/* Genau zwei Panelbreiten. */
.panel-schmal, #block-panel, #rueckfrage-panel { width: var(--panel-schmal); max-width: 100%; }
.panel-breit, #aufgaben-panel, #projekt-panel   { width: var(--panel-breit);  max-width: 100%; }

/* Der Dichte-Umschalter selbst. */
#dichte { display: inline-flex; gap: 2px; }
#dichte button {
  font-size: var(--gr-xs); line-height: var(--zh-xs); padding: 0 var(--abstand-100);
  min-height: var(--treffer-min); border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text-sekundaer);
  border-radius: var(--radius); cursor: pointer;
}
#dichte button.aktiv { background: var(--tinte); color: var(--flaeche); border-color: var(--tinte); }

/* Uebergaenge hoechstens 150 ms (0.8). */
* { transition-duration: 150ms; }


/* Kompakte Dichte: der Badge zeigt nur noch die Ziffer, damit die Zeile
   einzeilig bleibt. Der volle Text steht im title-Attribut (0.2). */
:root[data-dichte="kompakt"] .prio { max-width: 2.2em; overflow: hidden; white-space: nowrap; }
:root[data-dichte="kompakt"] .prio .prio-wort { display: none; }


/* Strukturflaechen (0.2): 4 % Fuellung, KEIN Rahmen, Label nur einmal oben,
   klein und in --text-schwach. */
.fc .fc-bg-event.lifeos-struktur { border: none; }
.fc .fc-bg-event.lifeos-struktur .typ {
  font-size: var(--gr-xs); line-height: var(--zh-xs);
  color: var(--text-sekundaer); font-weight: 500;
}

/* Saeulenmarker in Listen: 3-px-Kante ODER 8-px-Punkt — nie beides (0.2). */
.auf-zeile[data-saeule] { border-left: 3px solid var(--saeule, var(--saeule-standard)); }
.auf-zeile[data-saeule] .saeule-punkt { display: none; }
.saeule-punkt {
  width: 8px; height: 8px; border-radius: var(--radius-pille);
  background: var(--saeule, var(--saeule-standard)); display: inline-block;
  margin-right: var(--abstand-050); flex: none;
}

/* =====================================================================
   V18b · 0.7 — Eigene Bedienelemente (ls-select / ls-date / ls-time)
   Die Bedien-Oberflaeche liegt im Shadow DOM (nur der Knopf); hier stehen
   die Host-Rahmen je Kontext und die Popups (die im Body haengen).
   ===================================================================== */
ls-select, ls-date, ls-time {
  box-sizing: border-box; font: inherit; color: var(--text); vertical-align: middle;
  cursor: pointer; min-height: 32px;
}
ls-select[disabled], ls-date[disabled], ls-time[disabled] { cursor: default; opacity: .6; }

/* Filterleisten */
.filterleiste ls-select, .filterleiste ls-date, .filterleiste ls-time {
  padding: 7px 12px; font-size: var(--gr-s); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius-karte); background: var(--flaeche);
}
.aufgaben-leiste ls-select, .aufgaben-leiste ls-date { max-width: 190px; }

/* Dialoge */
.dialog-form ls-select, .dialog-form ls-date, .dialog-form ls-time {
  display: flex; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: var(--radius-karte); font-size: var(--gr-m); background: var(--flaeche);
}

/* Kalender-Optionen */
.kalender-optionen ls-select {
  padding: 5px 9px; font-size: var(--gr-s); font-weight: 500; color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius-karte); background: var(--flaeche);
}

/* Einwurf-Ziel */
#einwurf ls-select {
  border: 1px solid var(--linie); border-radius: var(--radius-pille); padding: 6px 10px;
  font-size: var(--gr-s); color: var(--text); background: var(--hintergrund); max-width: 190px;
}

/* Inline in der Aufgabenzeile */
.auf-zeile .auf-feld {
  width: 100%; font-size: var(--gr-s); padding: 4px 6px;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text);
}
.auf-zeile .auf-feld:hover, .auf-zeile .auf-feld.ls-offen { border-color: var(--rand); background: var(--flaeche); }
.auf-zeile .auf-datum {
  width: 100%; font-size: var(--gr-s); padding: 3px 5px; color: var(--text);
  border: 1px solid transparent; border-radius: var(--radius); background: transparent;
}
.auf-zeile .auf-datum:hover, .auf-zeile .auf-datum.ls-offen { border-color: var(--rand); background: var(--flaeche); }
.auf-frist.frist-warn .auf-datum { color: var(--warnung-text); font-weight: 600; }

/* Dringlichkeits- und Status-Varianten der Zeile (Farbe traegt der Rand + Grund) */
/* Dringlichkeit traegt ihre Farbe im inneren .prio-Badge (ls-menu, prio-Modus);
   die dr-Klasse steht am Host nur als Marker. Nur der Status faerbt den Host. */
.auf-zeile .auf-feld[class*="st-"] {
  border-left-width: 3px; border-left-style: solid; border-radius: var(--radius); padding-left: 7px;
}
.auf-zeile .auf-feld.st-offen         { border-left-color: var(--linie-stark); }
.auf-zeile .auf-feld.st-geplant       { border-left-color: var(--fokus); background: var(--dr4-grund); color: var(--dr4-text); }
.auf-zeile .auf-feld.st-in_arbeit     { border-left-color: var(--saeule-lernrad); background: var(--hintergrund); color: var(--saeule-lernrad); font-weight: 600; }
.auf-zeile .auf-feld.st-wartet_extern { border-left-color: var(--warten); background: var(--dr2-grund); color: var(--dr2-text); }
.auf-zeile .auf-feld.st-blockiert     { border-left-color: var(--warnung-text); background: var(--warnung-flaeche); color: var(--warnung-text); }
.auf-zeile .auf-feld.st-erledigt      { border-left-color: var(--text-sekundaer); color: var(--text-sekundaer); }
.auf-zeile .auf-feld.st-verworfen     { border-left-color: var(--text-sekundaer); color: var(--text-sekundaer); font-style: italic; }

/* --- Die Popups (haengen im Body) --- */
.ls-popup {
  z-index: 200; background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--radius-karte); box-shadow: var(--schatten); padding: 4px;
  font-size: var(--gr-s); color: var(--text); max-height: min(340px, 62vh); overflow: auto;
}
.ls-menue { min-width: 160px; }
.ls-opt { padding: 6px 10px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
.ls-opt:hover, .ls-opt.ls-akt { background: var(--dr4-grund); color: var(--dr4-text); }
.ls-gruppe { padding: 8px 10px 3px; font-size: var(--gr-xs); font-weight: 600; letter-spacing: .02em; color: var(--text-sekundaer); }
.ls-datum { display: grid; gap: 8px; padding: 10px; width: 262px; }
.ls-schnell { display: flex; flex-wrap: wrap; gap: 4px; }
.ls-schnell-knopf { border: 1px solid var(--linie); background: var(--hintergrund); border-radius: var(--radius-pille);
  padding: 4px 10px; font-size: var(--gr-xs); cursor: pointer; color: var(--text); }
.ls-schnell-knopf:hover { border-color: var(--fokus); color: var(--fokus); }
.ls-frei { width: 100%; box-sizing: border-box; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 6px 8px; font: inherit; font-size: var(--gr-s); color: var(--text); background: var(--flaeche); }
.ls-frei.ls-fehler { border-color: var(--achtung); }
.ls-monat-kopf { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: var(--gr-s); }
.ls-monat-kopf button { border: none; background: transparent; cursor: pointer; font-size: var(--gr-m); color: var(--text-sekundaer); padding: 2px 8px; border-radius: var(--radius); }
.ls-monat-kopf button:hover { background: var(--hintergrund); color: var(--text); }
.ls-monat-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 4px; }
.ls-wt { text-align: center; font-size: var(--gr-xs); color: var(--text-sekundaer); padding: 2px 0; }
.ls-tag { border: none; background: transparent; border-radius: var(--radius); padding: 5px 0; cursor: pointer; font: inherit; font-size: var(--gr-s); color: var(--text); }
.ls-tag:hover { background: var(--dr4-grund); }
.ls-tag.ls-heute { font-weight: 700; color: var(--fokus); }
.ls-tag.ls-akt { background: var(--fokus); color: var(--flaeche); }
.ls-zeit { display: grid; gap: 6px; padding: 8px; width: 180px; }
.ls-zeit-liste { max-height: 220px; overflow: auto; }

/* ls-menu: Dringlichkeit/Status in der Zeile (Light DOM, Klick-Menue) */
ls-menu.auf-feld { display: block; box-sizing: border-box; cursor: pointer; padding: 3px 6px;
  border: 1px solid transparent; border-radius: var(--radius); }
ls-menu.auf-feld:hover, ls-menu.auf-feld.ls-offen { border-color: var(--rand); background: var(--flaeche); }
ls-menu.auf-feld[class*="st-"] { border-left-width: 3px; border-left-style: solid; padding-left: 7px; }
ls-menu .ls-menu-txt { font-size: var(--gr-s); }
ls-menu.auf-feld .prio { cursor: pointer; }

/* V18b · 0.8 — Hinweisbalken „Rückgängig" unten links */
#hinweisbalken { position: fixed; left: 16px; bottom: 84px; z-index: 96;
  display: flex; align-items: center; gap: 12px;
  background: var(--text); color: var(--flaeche); border-radius: var(--radius-karte);
  padding: 10px 14px; font-size: var(--gr-s); box-shadow: var(--schatten); max-width: min(420px, 80vw); }
#hinweisbalken[hidden] { display: none; }
#hinweisbalken .hinweis-undo { border: none; background: transparent; color: var(--dr3-grund);
  font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; }
#hinweisbalken .hinweis-undo:hover { text-decoration: underline; }

/* V18b · 0.9 — Befehlspalette (⌘K), Tastaturhilfe, Listen-Cursor */
#cmdk { position: fixed; inset: 0; z-index: 120; background: rgba(36, 31, 28, .28);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.cmdk-karte { width: min(560px, 92vw); background: var(--flaeche); border-radius: var(--radius-karte);
  box-shadow: var(--schatten); overflow: hidden; }
.cmdk-eingabe { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--linie);
  padding: 14px 16px; font: inherit; font-size: var(--gr-l); background: transparent; color: var(--text); }
.cmdk-eingabe:focus { outline: none; }
.cmdk-liste { max-height: 50vh; overflow: auto; padding: 6px; }
.cmdk-opt { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; }
.cmdk-opt.cmdk-akt, .cmdk-opt:hover { background: var(--dr4-grund); }
.cmdk-marke { font-size: var(--gr-xs); color: var(--text-sekundaer); min-width: 62px; letter-spacing: .02em; }
.cmdk-text { color: var(--text); }
.cmdk-leer { padding: 14px 12px; color: var(--text-sekundaer); }
.tasten-hilfe { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.tasten-gruppe h4 { margin: 0 0 8px; font-size: var(--gr-s); }
.tasten-gruppe div { display: flex; align-items: center; gap: 8px; font-size: var(--gr-s); color: var(--text-sekundaer); margin-bottom: 6px; }
.tk { display: inline-flex; gap: 2px; min-width: 64px; }
kbd { display: inline-block; border: 1px solid var(--linie-stark); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 6px; font: inherit; font-size: var(--gr-xs); background: var(--hintergrund); color: var(--text); }
.auf-zeile.tastatur-aktiv { box-shadow: inset 3px 0 0 var(--fokus); background: var(--flaeche); }

/* V18b · 0.4 — Emojis: einheitlich 14px auf der Grundlinie, 4px Abstand, kein Schmuck */
.emoji { font-size: 14px; line-height: 1; font-style: normal; margin-right: 4px; }
.kachel-status { margin-left: 2px; margin-right: 0; }


/* ============================================================
   STUFE 1a — Layout, Abstaende, Mo-Sa (Kalender-Reiter)
   Alles auf #ansicht-heute gescopt; andere Reiter unberuehrt.
   ============================================================ */

/* P3 Aufteilung: Kalender >=68 %, Aufgabenspalte 320 px fest, einklappbar. */
#ansicht-heute .tag-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--abstand-200); }
#ansicht-heute .tag-layout.aufgaben-zu { grid-template-columns: minmax(0, 1fr); }
#ansicht-heute .tag-layout.aufgaben-zu > *:nth-child(2) { display: none; }
/* B4: Umbruch auf eine Spalte unter ~1110 px (Bettina 24.08.: nebeneinander nur bei breiten Fenstern). */
@media (max-width: 1109px) { #ansicht-heute .tag-layout { grid-template-columns: minmax(0, 1fr); } }

/* P5 engere Standard-Abstaende ueber die 0.6-Token, ohne Dichte-Umschalter. */
#ansicht-heute .karte > .karte-kopf { padding: var(--abstand-100) var(--abstand-200); }
#ansicht-heute .karte-inhalt:not(.buendig) { padding: var(--abstand-100); }
#ansicht-heute .stapel-reiter { margin: var(--abstand-100) var(--abstand-100) 0; }
#ansicht-heute .stapel-fach + .stapel-fach { margin-top: var(--abstand-100); }
#ansicht-heute .stapel-karte { margin-bottom: var(--abstand-200); }

/* ============================================================
   KALENDER-REITER FEINSCHLIFF (A–H) — gescopt auf #ansicht-heute
   ============================================================ */
/* H weniger Aussenrand, Platz fuellen (global) */
main { max-width: none; padding: 14px 16px 120px; }
/* A kompakte Aufgabenliste */
#ansicht-heute .stapel .aufgabe-zeile { gap: 8px; padding: 6px 10px; margin-bottom: 3px; align-items: center; border-left-width: 3px; }
#ansicht-heute .stapel .aufgabe-zeile .punkt { display: none; }
#ansicht-heute .stapel .aufgabe-zeile .check { width: 15px; height: 15px; margin-top: 0; }
#ansicht-heute .stapel .aufgabe-zeile .verwerfen { margin-top: 0; }
#ansicht-heute .stapel .aufgabe-zeile .titel { font-size: var(--gr-s); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ansicht-heute .stapel .aufgabe-zeile .meta { font-size: var(--gr-xs); margin-top: 1px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* B Zahl-Badges (Wort im Tooltip, im kompakten Stapel aus) */
#ansicht-heute .stapel .aufgabe-zeile .prio { font-size: 10px; font-weight: 600; padding: 1px 6px; min-width: 18px; text-align: center; }
#ansicht-heute .stapel .aufgabe-zeile .prio .prio-wort { display: none; }
#ansicht-heute .stapel .aufgabe-zeile .faellig { background: transparent; padding: 0; margin-top: 1px; font-size: 10px; font-weight: 600; }
#ansicht-heute .stapel .aufgabe-zeile .zeitmarke { font-size: 10px; }
/* C Apple-Segment-Leiste */
#ansicht-heute .stapel-reiter { margin: 8px 10px 2px; background: var(--hintergrund); border-radius: 9px; padding: 2px; gap: 2px; }
#ansicht-heute .stapel-reiter button { flex: 1 1 0; padding: 4px 2px; font-size: 11px; font-weight: 500; color: var(--text-sekundaer); border-radius: 7px; white-space: nowrap; }
#ansicht-heute .stapel-reiter button.aktiv { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.10); font-weight: 600; }
/* C2 Filtergriffe der Seitenleiste (#815, 02.09.2026)
   Die Leiste ist schmal — deshalb die Suche in eigener Zeile und die drei
   Auswahlmenues darunter im Umbruch. Bettinas Schnitt sind VIER Griffe. */
#ansicht-heute .stapel-filter { margin: 6px 10px 2px; display: flex; flex-direction: column; gap: 4px; }
#ansicht-heute .stapel-filter input[type="search"] { width: 100%; font-size: 11px; padding: 4px 8px; }
#ansicht-heute .stapel-filter-reihe { display: flex; flex-wrap: wrap; gap: 4px; }
#ansicht-heute .stapel-filter-reihe > * { flex: 1 1 auto; min-width: 0; font-size: 11px; }
#ansicht-heute .stapel-filter-reihe ls-select { padding: 3px 6px; }
#ansicht-heute .stapel-filter-reihe button { flex: 0 0 auto; font-size: 10px; padding: 3px 8px; }
/* C3 Der Kappungs-Hinweis: still ist er leer und nimmt keinen Platz weg. */
#ansicht-heute .stapel-kappung:empty { display: none; }
#ansicht-heute .stapel-kappung { margin: 2px 10px 0; font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--radius-pille);
  background: var(--warnung-flaeche); color: var(--warnung-text); }
/* D Bilanz-Chips */
#ansicht-heute .stapel-bilanz { display: flex; gap: 4px; flex-wrap: wrap; letter-spacing: 0; font-weight: 500; }
#ansicht-heute .stapel-bilanz .bz { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pille); background: var(--hintergrund); color: var(--text-sekundaer); }
#ansicht-heute .stapel-bilanz .bz-warn { background: var(--warnung-flaeche); color: var(--warnung-text); }
/* E kompakte Kalenderkacheln (Notion-Dichte als Standard) */
#ansicht-heute .fc .fc-timegrid-event .fc-event-main { padding: 3px 8px; }
#ansicht-heute .fc .fc-event-main > .titel { font-size: var(--gr-xs); line-height: 1.2; padding-right: 14px; }
#ansicht-heute .fc .fc-event-main > .zeit,
#ansicht-heute .fc .fc-event-main > .ort { font-size: 10px; margin-top: 1px; }
#ansicht-heute .fc .fc-timegrid-event-short .fc-event-main,
#ansicht-heute .fc .lifeos-kurz .fc-event-main { padding: 1px 8px; gap: 6px; }
#ansicht-heute .fc .fc-timegrid-event-short .fc-event-main > .zeit,
#ansicht-heute .fc .lifeos-kurz .fc-event-main > .zeit { font-size: 10px; }
/* Der Erledigt-Haken sitzt links auf der Kachel — sein Platz muss auch in der
   kompakten Kalenderdichte reserviert bleiben, sonst laeuft der Titel unter das
   Kaestchen (Bettinas Abnahme: „Ueberlappung bei ALLEN Aufgaben"). ID-Spezifitaet,
   damit die padding-Kurzregeln oben den linken Rand nicht wieder auf 8px setzen. */
#ansicht-heute .fc .fc-event.lifeos-aufgabe .fc-event-main,
#ansicht-heute .fc .fc-timegrid-event-short.lifeos-aufgabe .fc-event-main,
#ansicht-heute .fc .lifeos-kurz.lifeos-aufgabe .fc-event-main { padding-left: 25px; }
/* #993, 06.09.2026 — DER EINZUG WEICHT AUCH HIER, DAS KAESTCHEN NICHT.
   Der reservierte Platz von 25 px ist richtig, solange die Kachel breit ist. Bei
   fuenf gleichzeitigen Aufgaben bleiben 52,9 px, und davon frass der Einzug die
   Haelfte: gemessen 26 px Titel. Diese drei Zeilen mussten die ID-Spezifitaet
   bekommen — die Fassung ohne sie (Z. 1166) hat NICHTS bewirkt, gemessen am
   gerenderten Element: padding-left blieb 25 px. Das Kaestchen bleibt sichtbar
   und klickbar, es rueckt nur um 2 px nach links (Bettina, 06.09.2026: „OK, aber
   der Haken verschwindet nicht!"). Riegel: regress-993-schwellen P5, P6, P7. */
#ansicht-heute .fc .fc-event.lifeos-aufgabe.lifeos-schmal .fc-event-main,
#ansicht-heute .fc .fc-timegrid-event-short.lifeos-aufgabe.lifeos-schmal .fc-event-main,
#ansicht-heute .fc .lifeos-kurz.lifeos-aufgabe.lifeos-schmal .fc-event-main {
  padding-left: 14px; padding-right: 2px; }
#ansicht-heute .fc .fc-event.lifeos-aufgabe.lifeos-schmal .fc-event-main > .titel { padding-right: 0; }
/* F schmaler Wochentagskopf */
#ansicht-heute .fc .fc-col-header-cell-cushion { padding: 3px 2px; font-weight: 500; }
#ansicht-heute .fc .fc-day-today .fc-col-header-cell-cushion { font-weight: 600; }
/* G Sonntag schmaler, aber lesbar: alle drei FC-Ebenen gleich (Kopf, Ganztags, Stundenraster) */
#ansicht-heute .fc .fc-day-sun { width: 118px; max-width: 118px; min-width: 118px; }
#ansicht-heute .fc .fc-col-header-cell.fc-day-sun { cursor: default; }
#ansicht-heute .fc .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion { writing-mode: horizontal-tb; font-size: var(--gr-xs); }
#ansicht-heute .fc .fc-timegrid-col.fc-day-sun { pointer-events: auto; }

/* ===== F1 · Aufgaben-Panel (ein Bauteil, von ueberall) ================= */
#panel-schale, #cp-panel-schale { position: fixed; inset: 0; z-index: 92; background: rgba(20,18,16,.18);
  display: flex; justify-content: flex-end; opacity: 0; transition: opacity .18s ease; }
#panel-schale.offen, #cp-panel-schale.offen { opacity: 1; }
.a-panel { width: var(--panel-breit); max-width: 94vw; height: 100%; background: var(--flaeche);
  box-shadow: var(--schatten); display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(24px); transition: transform .18s ease; }
#panel-schale.offen .a-panel, #cp-panel-schale.offen .a-panel { transform: translateX(0); }
.p-kopf { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border-bottom: 1px solid var(--linie); flex: none; }
.p-kopf-akt { display: flex; align-items: center; gap: 6px; }
.p-mehr-wrap { position: relative; }
.p-kopf button { border: none; background: none; cursor: pointer; font-size: var(--gr-m); color: var(--text-sekundaer);
  padding: 4px 8px; border-radius: var(--radius-pille); }
.p-kopf button:hover { background: var(--hintergrund); color: var(--text); }
.p-mehr-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius-karte); box-shadow: var(--schatten);
  display: flex; flex-direction: column; min-width: 190px; z-index: 5; overflow: hidden; }
.p-mehr-menu button { text-align: left; border: none; background: none; padding: 9px 12px; font-size: var(--gr-s);
  cursor: pointer; color: var(--text); }
.p-mehr-menu button:hover:not([disabled]) { background: var(--hintergrund); }
.p-mehr-menu button[disabled] { color: var(--text-sekundaer); cursor: default; }
.p-koerper { padding: 14px 16px 40px; overflow-y: auto; flex: 1; }
.p-titel { width: 100%; font-size: var(--gr-l); font-weight: 600; letter-spacing: -.02em; border: none;
  background: none; padding: 4px 0; margin-bottom: 8px; color: var(--text); }
.p-titel:focus { outline: none; border-bottom: 2px solid var(--saeule-lernrad); }
.p-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-kopf-felder { grid-template-columns: 1fr 1fr; margin-bottom: 6px; }
.p-feld { display: block; font-size: var(--gr-xs); font-weight: 600; color: var(--text-sekundaer); margin-bottom: 8px; }
.p-feld > span { display: block; margin-bottom: 3px; }
.p-feld select, .p-feld input, .p-abschnitt textarea, .p-block-form input, .p-zeit-form input, .p-tag-form input {
  width: 100%; padding: 7px 9px; border: 1px solid var(--linie-stark); border-radius: var(--radius-feld, 8px);
  font: inherit; font-weight: 400; background: var(--flaeche); color: var(--text); }
.p-abschnitt { border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 12px; }
.p-abschnitt h4 { font-size: var(--gr-xs); font-weight: 600; letter-spacing: .01em;
  color: var(--text-sekundaer); margin-bottom: 8px; }
.p-abschnitt textarea { resize: vertical; }
.p-block { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--gr-s); }
/* #865 · DER KACHELTITEL DARF DIE ZEILE NICHT SPRENGEN (03.09.2026)

   Bettinas Befund: "beim Hinzufuegen des Buttons einer weiteren Aufgabe fuer
   eine Kachel ist die einzige Moeglichkeit verschwunden, einen angelegten
   Block von einer Aufgabe wieder zu entfernen!!!!!!"

   URSACHE, gemessen: Der Kacheltitel stand hier ohne `min-width: 0` und ohne
   Kuerzung. Ein Flexkind ohne beides schrumpft nur bis zu seinem laengsten
   WORT und bricht dann um — gemessen 73 px breit und 340 px hoch — und drueckt
   alles Weitere aus der Zeile. Das ✕ zum Ausplanen lag danach bei 1690–1710 px
   in einer Karte, die bei 1700 endet: halb draussen, das Zeichen selbst nicht
   zu sehen.

   GEGENPROBE AM ALTEN STAND (vor 8934dd7, im Browser untergelegt): Damals lag
   EIN Knopf in der Zeile, das ✕ bei 3404–3424 in einer Karte bis 3440 — drin
   und anklickbar. #516 hat "+ Aufgabe" davorgesetzt (69 px plus 8 px Abstand),
   und der Platz war nicht da. Zu eng war die Zeile aber schon vorher: 208 px
   hoch fuer eine einzeilige Angabe.

   Der Selektor greift den Titel als den `span.leise` NACH dem Endzeit-Feld —
   der erste `span.leise` der Zeile ist der Gedankenstrich zwischen den beiden
   Zeitfeldern. Der Riegel dagegen steht in `regress-865-ausplanen-kreuz.mjs`. */
.p-block > .p-block-end ~ span.leise {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-block-start { width: auto !important; flex: 1; }
.p-block-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p-block-form input { width: auto !important; }
.p-zeit-form, .p-tag-form { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.p-zeit-form input, .p-tag-form input { width: auto !important; }
.p-mini { border: 1px solid var(--linie-stark); background: var(--hintergrund); color: var(--text);
  border-radius: var(--radius-pille); padding: 5px 11px; font-size: var(--gr-xs); font-weight: 600; cursor: pointer; }
.p-mini:hover { background: var(--flaeche); }
.p-mini.gefahr { border: none; background: none; color: var(--text-sekundaer); padding: 2px 6px; }
.p-mini.gefahr:hover { color: var(--achtung); }
.p-links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.p-link { border: none; background: none; color: var(--saeule-lernrad); cursor: pointer; font: inherit;
  font-size: var(--gr-s); padding: 0; text-decoration: none; }
.p-link:hover { text-decoration: underline; }
.p-tag { display: inline-flex; align-items: center; gap: 2px; }
.p-tag-weg { border: none; background: none; cursor: pointer; color: var(--text-sekundaer); font-size: var(--gr-s); padding: 0 2px; }
.p-tag-weg:hover { color: var(--achtung); }
.p-zurueck { font-size: var(--gr-s); font-weight: 600; }
.p-protokoll summary { cursor: pointer; font-size: var(--gr-xs); font-weight: 600; color: var(--text-sekundaer); }


/* ===== F584b-1 · Contentplan-Reiter ====================================
   KEIN eigener Formenkanon: alles hier benutzt die Token aus 0.2/0.3/0.6 und
   die vorhandenen Bauteile (.filterleiste, .umschalter, .a-panel, .p-*).
   Was hier steht, sind nur die Raster, die es woanders nicht gibt — die
   Tafel, die Konten-Gruppen und die Statuspille.
   Bettina, 28.08.2026: "Und der Look bitte gleich schoen, kann aehnlich wie
   die native Kalenderansicht im Dashboard sein." Deshalb kein zweiter Stil,
   sondern derselbe mit drei zusaetzlichen Rastern. */

.content-leiste { flex-wrap: wrap; }
.content-leiste .cp-zeit { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--gr-xs); font-weight: 600; color: var(--text-sekundaer); }
.cp-umschalter { margin: 10px 0 8px; flex-wrap: wrap; }
.cp-bilanz { font-size: var(--gr-s); color: var(--text-sekundaer); margin: 0 0 10px; }
.cp-bilanz .warn { color: var(--achtung); font-weight: 600; }

/* Die zwei Leermeldungen. Sie sehen gleich aus und sagen VERSCHIEDENES —
   der Unterschied steht im Text und in `data-grund`, nicht in der Farbe. */
.cp-leer { border: 1px dashed var(--linie-stark); border-radius: var(--radius-karte);
  padding: 22px; text-align: center; color: var(--text-sekundaer); font-size: var(--gr-s); }
.cp-leer p { margin: 0 0 8px; }
.cp-leer p:last-of-type { margin-bottom: 0; }
.cp-leer button { margin-top: 10px; }

/* Liste — dasselbe Tabellenraster wie der Aufgaben-Reiter, sechs Spalten. */
.cp-tabelle { border: 1px solid var(--linie); border-radius: var(--radius-karte);
  background: var(--flaeche); overflow: hidden; }
.cp-tabelle .kopf, .cp-zeile { display: grid;
  grid-template-columns: minmax(220px, 3fr) 1fr 1fr .8fr 1.4fr 1.4fr; gap: 10px;
  align-items: center; padding: 0 12px; }
.cp-tabelle .kopf { min-height: 34px; border-bottom: 1px solid var(--linie);
  font-size: var(--gr-xs); font-weight: 600; color: var(--text-sekundaer);
  background: var(--hintergrund); }
.cp-zeile { min-height: var(--zeile-hoehe, 40px); border-bottom: 1px solid var(--linie);
  cursor: pointer; font-size: var(--gr-s); }
.cp-zeile:last-child { border-bottom: 0; }
.cp-zeile:hover { background: var(--hintergrund); }
.cp-zeile-titel { display: flex; align-items: center; gap: 8px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

/* ==========================================================================
   DIE STATUSFARBEN (#776, 01.09.2026)

   Bettinas Befund: „Alles hat dieselbe Farbe, ich kann im Kalender nicht
   sehen, welchen Status ein eingeplantes Stueck hat." Ihre Farbwahl, im
   Wortlaut: „In Arbeit bitte orange und GEPLANT blau, ich will kein braun!
   Dann kannst du VÖ in hellgrün machen", „Archiviert blass grau ja, alle
   anderen bitte in farbig", „orientiert dich an den Notion Farben".

   WARUM DIE TRENNUNG VON DER SAEULENFARBE UEBER DIE FORM LAEUFT UND NICHT
   UEBER DEN FARBTON — gemessen am 01.09.2026, nicht vermutet: Die fuenf
   Saeulenfarben (Z. 40-44) liegen im SELBEN Farbraum wie die acht Status.
   LernRad ist gruen, Dachmarke violett, Privat rosa, Zweitmeinung blau. Jede
   Zuordnung ueber den Ton haette kollidiert.
   Deshalb: der STATUS ist eine gefuellte Pille (blasser Grund, dunkle
   Schrift), die SAEULE bleibt ein kleiner gesaettigter Punkt. Zwei
   verschiedene Objekte, nicht zwei Toene derselben Sache.

   UND EIN EIGENER TOKENSATZ, KEIN GELIEHENER: Bis zum 01.09.2026 borgte sich
   `gute_ideen` `--saeule-lernrad`. Wer die Saeulenfarbe aendert, haette damit
   still einen Status mitgeaendert. Die Pruefung M-N1 in `ui-contentplan`
   verbietet das ab jetzt — sie war vor diesem Bau rot. */
:root {
  --cp-idee-hg:            #F5E0E9;  --cp-idee-fg:            #C14C8A;
  --cp-gute-ideen-hg:      #E8DEEE;  --cp-gute-ideen-fg:      #7C4DAF;
  --cp-noch-planen-hg:     #FFE2DD;  --cp-noch-planen-fg:     #D44C47;
  --cp-eingeplant-hg:      #FDECC8;  --cp-eingeplant-fg:      #B07D1F;
  --cp-in-arbeit-hg:       #FADEC9;  --cp-in-arbeit-fg:       #D9730D;
  --cp-geplant-hg:         #D3E5EF;  --cp-geplant-fg:         #2E7CA6;
  /* Bettina ausdruecklich: „anderes grün als die LernRad Säule!" — die Saeule
     traegt #4F8A6D, dieses Gruen ist ein anderes. Die Pruefung M-N3 haelt es. */
  --cp-veroeffentlicht-hg: #DDF0E3;  --cp-veroeffentlicht-fg: #2E8B57;
  --cp-archiviert-hg:      #E8E7E5;  --cp-archiviert-fg:      #7A7873;
}
.cp-pille { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pille);
  font-size: var(--gr-xs); font-weight: 600; border: 1px solid transparent;
  background: var(--hintergrund); color: var(--text-sekundaer); white-space: nowrap; }
.cp-pille[data-status="idee"]            { background: var(--cp-idee-hg);            color: var(--cp-idee-fg); }
.cp-pille[data-status="gute_ideen"]      { background: var(--cp-gute-ideen-hg);      color: var(--cp-gute-ideen-fg); }
.cp-pille[data-status="noch_planen"]     { background: var(--cp-noch-planen-hg);     color: var(--cp-noch-planen-fg); }
.cp-pille[data-status="geplant"]         { background: var(--cp-eingeplant-hg);      color: var(--cp-eingeplant-fg); }
.cp-pille[data-status="in_arbeit"]       { background: var(--cp-in-arbeit-hg);       color: var(--cp-in-arbeit-fg); }
.cp-pille[data-status="hochgeladen"]     { background: var(--cp-geplant-hg);         color: var(--cp-geplant-fg); }
.cp-pille[data-status="veroeffentlicht"] { background: var(--cp-veroeffentlicht-hg); color: var(--cp-veroeffentlicht-fg); }
.cp-pille[data-status="archiviert"]      { background: var(--cp-archiviert-hg);      color: var(--cp-archiviert-fg); }
/* GERECHNET bleibt unterscheidbar — die Farbe sagt WAS, der gestrichelte Rand
   sagt „das setzt niemand von Hand". Beide Auskuenfte werden gebraucht. */
.cp-pille[data-status="geplant"], .cp-pille[data-status="in_arbeit"] { border-style: dashed; border-color: currentColor; }

/* Der laufende Kettenschritt in der Listenzeile (E1). Bettina: „Ich will, dass
   ALLE SCHRITTE, die auch in der Tafel sichtbar sind, genau so in der
   Listenansicht stehen!!!!" Er traegt KEINE eigene Farbe — Weg B, ihre
   Entscheidung: „mir geht es darum, zu sehen, was fertig ist, was noch nicht
   und was noch nicht angefangen ist - auf einen Blick. Sonst wird es glaube
   ich zu bunt." */
.cp-schritt { display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: var(--radius-pille); font-size: var(--gr-xs);
  border: 1px dashed var(--linie-stark); color: var(--text-sekundaer); white-space: nowrap; }

/* Tafel nach Status — waagerecht scrollbar. WIE VIELE Spalten es sind und
   welche, steht in `CP_KETTE` (public/index.html) und nirgends sonst: Status-
   Stationen und Kettenschritte gemischt, dazu die Auffangspalte. Hier stand bis
   zum 08.09.2026 „sieben Spalten" — die Zahl war seit #704 falsch und ist
   deshalb ersatzlos weg, nicht berichtigt.
   DAS ETIKETT BLEIBT „nach Status", Bettina am 08.09.2026 im Wortlaut: „Fuer
   mich ist ein Kettenschritt ein Status." */
.cp-tafel { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.cp-spalte { flex: 0 0 240px; background: var(--hintergrund); border: 1px solid var(--linie);
  border-radius: var(--radius-karte); min-height: 120px; }
.cp-spalte-kopf { display: flex; align-items: center; gap: 6px; padding: 9px 11px;
  border-bottom: 1px solid var(--linie); font-size: var(--gr-xs); font-weight: 600; }
.cp-spalte-kopf .leise { margin-left: auto; }
/* Sichtbar, dass hier niemand ablegen kann — und zwar VOR dem Versuch. */
.cp-spalte[data-gerechnet="1"] { border-style: dashed; }
/* R1 (Designsystem): `--text-schwach` traegt nur Deko und Platzhalter. „gerechnet"
   ist die Auskunft, warum diese Spalte keine Karte annimmt — das ist Text, den
   Bettina lesen muss, also `--text-sekundaer`. Gefunden vom Riegel in
   `ui-fullcalendar`, nicht von mir (29.08.2026). */
.cp-gerechnet { font-size: var(--gr-xs); font-weight: 400; color: var(--text-sekundaer);
  border: 1px dashed var(--linie-stark); border-radius: var(--radius-pille); padding: 0 6px; }
.cp-spalte-inhalt { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.cp-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-feld, 8px);
  padding: 8px 10px; cursor: pointer; font-size: var(--gr-s);
  border-left: 3px solid var(--saeule, var(--saeule-standard)); }
/* DIE KANTE TRAEGT DIE SAEULE (#1056, 08.09.2026) — dieselbe Regel wie an den
   uebrigen Stellen dieses Stylesheets: Kalenderkachel, Aufgabenzeile, Meldung,
   Kalender-Ereignis, Organigramm-Rolle, Warten-Zeile. Bettina im Wortlaut:
   „Kannst du nicht die Pille drauf machen und dafuer die Kantenfarbe der Saeule
   zuordnen?"

   BIS DAHIN TRUG SIE DEN STATUS, ueber acht Regeln `.cp-karte[data-status=…]`.
   Ihre Begruendung stand hier und lautete: „Auf der Tafel SAGT die Spalte schon
   den Status — eine zweite Pille auf der Karte waere dieselbe Auskunft
   zweimal." DAS STIMMTE, solange die Tafel Kanban nach Status war (#613).
   #704 hat daraus „jeder Kettenschritt eine eigene Spalte" gemacht — und DIESE
   BEGRUENDUNG NICHT MITGEZOGEN. Gemessen am 08.09.2026: drei Karten aus drei
   Saeulen in DERSELBEN Spalte trugen dieselbe Kante, und die Karte in der
   Nachbarspalte ebenfalls; der Streifen sagte nichts, was die Spalte nicht
   schon sagte. Der Status steht seither als beschriftete Pille auf der Karte
   (`cpPille`) — ein Wort statt eines Farbtons ohne Legende. */
.cp-karte:hover { box-shadow: var(--schatten); }
.cp-karte-titel { font-weight: 600; margin-bottom: 4px; }
.cp-karte-fuss { display: flex; align-items: center; gap: 6px; font-size: var(--gr-xs); }

/* Nach Plattform — dieselben Karten, nach Konto gruppiert. Leere Gruppen
   entstehen gar nicht erst. */
.cp-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cp-gruppe { border: 1px solid var(--linie); border-radius: var(--radius-karte);
  background: var(--flaeche); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cp-gruppe-rest { border-style: dashed; }
.cp-gruppe-kopf { display: flex; align-items: center; gap: 8px; font-size: var(--gr-xs);
  font-weight: 600; color: var(--text-sekundaer); }
.cp-gruppe-kopf .leise { margin-left: auto; }

/* Der Kalender: dieselbe Bibliothek, dieselben Token — nur die Kachel traegt
   andere Angaben (Konto statt Dringlichkeit). */
/* DER TITEL GEWINNT. Im Monatsraster ist eine Kachel schmal; ohne `flex: 1`
   am Titel schrumpft ausgerechnet er zuerst, und im Kalender stand
   „17:00 MRT… Geplant YouTube Fachkanal" — die Angabe, die Bettina sucht, war
   die einzige, die fehlte. Gemessen an der Demo vom 29.08.2026; KEIN Prüflauf
   hätte es gefunden, weil keiner nach Lesbarkeit fragt. Zeit, Status und Konto
   schrumpfen jetzt vor ihm und tragen ihre eigene Auslassung. */
.cp-fc-kachel { display: flex; align-items: baseline; gap: 5px; overflow: hidden; padding: 1px 3px; }
.cp-fc-zeit { font-variant-numeric: tabular-nums; opacity: .85; font-size: var(--gr-xs); flex: 0 0 auto; }
.cp-fc-titel { flex: 1 1 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cp-fc-pille, .cp-fc-konto { font-size: var(--gr-xs); opacity: .85; white-space: nowrap;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-fc-pille[data-status="geplant"], .cp-fc-pille[data-status="in_arbeit"] { font-style: italic; }
/* DIESELBEN Tokens wie in der Liste — nicht zweite Werte, die auseinander
   wandern koennen. Genau das prueft M-F3: dasselbe Stueck, zwei Ansichten,
   EINE Farbe. Die Kachel ist schmal, deshalb ohne Polster. */
.cp-fc-pille { border-radius: var(--radius-pille); padding: 0 5px; opacity: 1; font-weight: 600; }
.cp-fc-pille[data-status="idee"]            { background: var(--cp-idee-hg);            color: var(--cp-idee-fg); }
.cp-fc-pille[data-status="gute_ideen"]      { background: var(--cp-gute-ideen-hg);      color: var(--cp-gute-ideen-fg); }
.cp-fc-pille[data-status="noch_planen"]     { background: var(--cp-noch-planen-hg);     color: var(--cp-noch-planen-fg); }
.cp-fc-pille[data-status="geplant"]         { background: var(--cp-eingeplant-hg);      color: var(--cp-eingeplant-fg); }
.cp-fc-pille[data-status="in_arbeit"]       { background: var(--cp-in-arbeit-hg);       color: var(--cp-in-arbeit-fg); }
.cp-fc-pille[data-status="hochgeladen"]     { background: var(--cp-geplant-hg);         color: var(--cp-geplant-fg); }
.cp-fc-pille[data-status="veroeffentlicht"] { background: var(--cp-veroeffentlicht-hg); color: var(--cp-veroeffentlicht-fg); }
.cp-fc-pille[data-status="archiviert"]      { background: var(--cp-archiviert-hg);      color: var(--cp-archiviert-fg); }

/* Panel: die Ausspielungen und die zwei kleinen Formulare. */
.cp-aus { border: 1px solid var(--linie); border-radius: var(--radius-karte);
  padding: 10px 12px; margin-bottom: 10px; background: var(--hintergrund); }
.cp-aus-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cp-stamm-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.cp-stamm-form input { flex: 1; min-width: 140px; padding: 7px 9px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-feld, 8px); font: inherit; background: var(--flaeche); color: var(--text); }
.cp-rueckfrage { border-top: 1px dashed var(--achtung); margin-top: 10px; padding-top: 10px;
  font-size: var(--gr-s); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cp-rueckfrage p { flex: 1 1 100%; margin: 0 0 6px; }

/* ==========================================================================
   DAS RECHNENDE — Luecken-Anzeige und Vorschlagsdialog (F584b-2, 29.08.2026)

   Eine LUECKE ist kein Contentstueck, und sie darf auch nicht so aussehen.
   Deshalb: gestrichelter Rand, keine Fuellung, gedaempfte Schrift — der Platz
   ist da, es liegt nur nichts darauf. Ein gefuellter Block wuerde im
   Monatsraster wie ein geplanter Beitrag gelesen, und dann zeigte der Kalender
   52 Beitraege, die es nicht gibt.
   ========================================================================== */
.fc .cp-luecke { background: transparent !important; border-style: dashed !important; border-width: 1px !important; }
.fc .cp-luecke:hover { background: var(--flaeche) !important; cursor: pointer; }
.cp-fc-luecke { opacity: .8; }
.cp-fc-frei { font-size: var(--gr-xs); font-style: italic; opacity: .75; flex: 0 0 auto; }

/* Die Bilanzzeile sagt, WORAN es liegt, wenn keine Luecke dasteht — „nichts zu
   sehen" ist keine Auskunft (dieselbe Regel wie bei den zwei Leermeldungen). */
#cp-luecken[data-grund="luecken"] { font-weight: 600; }
#cp-luecken[data-grund="keine-takte"],
#cp-luecken[data-grund="nicht-aufloesbar"],
#cp-luecken[data-grund="unbekannt"] { font-style: italic; }

/* Der Vorschlagsdialog. Jede Zeile ist ein eigener Vorschlag und traegt ihre
   eigene Entscheidung — deshalb steht sie als Kasten da und nicht als
   Tabellenzeile. */
#cp-vorschlag .cp-v-anzahl-feld { display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--gr-s); margin: 4px 0 12px; }
#cp-vorschlag .cp-v-anzahl-feld input { width: 5em; padding: 6px 8px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-feld, 8px); font: inherit; background: var(--flaeche); color: var(--text); }
#cp-vorschlag .cp-v-hinweis { border-left: 3px solid var(--achtung); padding: 6px 10px; margin: 0 0 12px;
  font-size: var(--gr-s); color: var(--text-sekundaer); background: var(--hintergrund); }
.cp-v-zeile { border: 1px solid var(--linie); border-radius: var(--radius-karte);
  padding: 10px 12px; margin-bottom: 10px; background: var(--hintergrund);
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.cp-v-zeile > .cp-v-titel { grid-column: 1 / -1; padding: 7px 9px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-feld, 8px); font: inherit; background: var(--flaeche); color: var(--text); }
.cp-v-zeit-paar { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-v-konten { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--gr-s);
  grid-column: 1 / -1; }
.cp-v-konten label { display: inline-flex; align-items: center; gap: 5px; }
/* Gestrichen heisst: bleibt sichtbar, wird aber NICHT angelegt. Wegblenden
   waere dasselbe wie Loeschen — und man koennte es nicht zurueckholen. */
.cp-v-zeile[data-gestrichen="1"] { opacity: .45; }
.cp-v-zeile[data-gestrichen="1"] .cp-v-titel { text-decoration: line-through; }
.cp-v-fuss { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

/* Der Vorrat „Ohne Datum" an einer Luecke. */
.cp-vorrat-liste { max-height: 46vh; overflow-y: auto; margin: 10px 0; }
.cp-vorrat-zeile { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius-feld, 8px); cursor: pointer; }
.cp-vorrat-zeile:hover { background: var(--hintergrund); }
/* Was zum Format des Takts passt, steht oben und traegt eine Kante — gefiltert
   wird NICHT: welches Stueck auf einen Slot darf, entscheidet Bettina. */
.cp-vorrat-zeile[data-passt="1"] { border-left: 3px solid var(--linie-stark); }
#cp-vorrat-leer { padding: 14px 4px; color: var(--text-sekundaer); font-size: var(--gr-s); }

/* ==========================================================================
   #810 · Die Badges werden Filter (Bettinas Anforderung 2 aus #415)
   Die Badges waren `span`; sie sind jetzt `button`. Damit die Reihe aussieht
   wie vorher, wird die Knopf-Grundform zurueckgenommen — geaendert hat sich
   das Verhalten, nicht das Bild.
   ========================================================================== */
#ansicht-heute .stapel-bilanz .bz,
.aufgaben-badges .bz {
  border: 0; font-family: inherit; cursor: pointer;
}
#ansicht-heute .stapel-bilanz .bz:hover,
.aufgaben-badges .bz:hover { background: var(--rand); }

/* Das aktive Badge traegt dieselbe Umkehrung wie ein aktiver Umschalter —
   eine Geste, ein Bild (Spez 0.3). */
#ansicht-heute .stapel-bilanz .bz-aktiv,
.aufgaben-badges .bz-aktiv {
  background: var(--text); color: var(--flaeche);
}
#ansicht-heute .stapel-bilanz .bz-warn.bz-aktiv,
.aufgaben-badges .bz-warn.bz-aktiv {
  background: var(--warnung-text); color: var(--flaeche);
}

/* Die Badge-Reihe des Reiters. Sie steht ueber der Tabelle, unter der Bilanz. */
.aufgaben-badges { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 2px 10px; }
.aufgaben-badges .bz {
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-pille); background: var(--hintergrund);
  color: var(--text-sekundaer);
}
.aufgaben-badges .bz-warn { background: var(--warnung-flaeche); color: var(--warnung-text); }

/* Die Anzahl am Fach-Knopf (Spez 1.5, Bettina 02.09.2026: "Ja, mitziehen").
   Sie steht hinter dem Wort, nicht davor — das Etikett bleibt das Wort. */
.umschalter button .fach-anzahl { margin-left: 5px; opacity: .65; font-variant-numeric: tabular-nums; }
.umschalter button .fach-anzahl:empty { display: none; }

/* ==========================================================================
   #811 · Gruppierachsen und gespeicherte Ansichten
   Eine Zeile: links die Achse, rechts die Ansichten. Beide benutzen die
   vorhandenen Bauteile (.umschalter, select, knopf) — kein neues Bild.
   ========================================================================== */
.aufgaben-achse {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 2px 10px;
}
.aufgaben-achse .ansichten { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.aufgaben-achse .ansichten select { max-width: 220px; }
.aufgaben-achse .ansichten button {
  font-size: var(--gr-s); padding: 4px 10px; border-radius: var(--radius-pille);
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text-sekundaer);
  cursor: pointer; font-family: inherit;
}
.aufgaben-achse .ansichten button:hover { background: var(--hintergrund); color: var(--text); }

/* ===========================================================================
   #516 · Die Aufgaben-Achse einer Zeitkachel (03.09.2026)

   Bis dahin liess sich eine Kachel mit mehreren Aufgaben ueber das Dashboard
   gar nicht anlegen — das Datenmodell konnte es seit Stufe 1, die Oberflaeche
   hatte keinen Griff dafuer. Diese Regeln kleiden die zwei neuen Stellen:
   den Abschnitt im Kachel-Dialog und den Anhaengen-Kasten im Aufgaben-Panel.

   Sie fuehren KEINE neuen Farben ein — nur bestehende Tokens. Eine
   vorgemerkte Entfernung wird durchgestrichen UND blasser: nur die Farbe
   waere zu wenig, weil Saeulen- und Statusfarben ohnehin im selben Farbraum
   liegen (WISSEN.md, 01.09.2026 — getrennt wird ueber die Form).
   =========================================================================== */
.be-aufgaben { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  padding: 10px 0; margin: 4px 0; }
.be-aufgaben-kopf { font-size: var(--gr-xs); font-weight: 600; letter-spacing: .01em;
  color: var(--text-sekundaer); margin-bottom: 6px; }
.be-aufgabe-zeile { display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: var(--gr-s); }
.be-aufgabe-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-aufgabe-zeile.ist-neu .be-aufgabe-name::before { content: "+ "; color: var(--text-sekundaer); font-weight: 600; }
/* Vorgemerkt zum Herausloesen — noch nicht vollzogen, deshalb sichtbar und
   ruecknehmbar statt weg. Ein stiller Zustand waere hier der Fehler. */
.be-aufgabe-zeile.wird-entfernt .be-aufgabe-name { text-decoration: line-through; opacity: .55; }
.be-dazu { margin-top: 8px; }
.be-dazu input { width: 100%; padding: 6px 9px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-feld, 8px); font: inherit; font-size: var(--gr-s);
  background: var(--flaeche); color: var(--text); }
#be-dazu-treffer, #p-dazu-treffer { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.be-dazu-treffer, .p-dazu-treffer { text-align: left; border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--gr-s); color: var(--text); padding: 4px 6px;
  border-radius: var(--radius-feld, 8px); }
.be-dazu-treffer:hover, .p-dazu-treffer:hover { background: var(--flaeche); }
/* ======================================================================
   F2 · DAS BLOCK-PANEL (#418, 06.09.2026)
   Pflichtinhalt und Reihenfolge stehen in der Spezifikation vom 22.08.2026,
   Zeilen 374-386. Die Schale, der Kopf und die Abschnitte sind DIESELBEN wie
   im Aufgaben-Panel (`.a-panel`, `.p-kopf`, `.p-abschnitt`, `.p-feld`) —
   Spez 0.10/234: „ein Objekt, eine Bearbeitungsoberflaeche, ueberall gleich".
   Eigene Regeln braucht nur die Aufgabenzeile. */
.bp-fortschritt { font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--text); margin-inline-start: 4px; }
#bp-liste { display: flex; flex-direction: column; }
.bp-aufgabe { display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: var(--gr-s); border-bottom: 1px solid var(--linie); }
.bp-aufgabe:last-child { border-bottom: none; }
/* Der Haken ist ein KNOPF und kein Kaestchen — er schaltet um, und ein Haken,
   den man nicht wieder wegnehmen kann, ist eine Einbahnstrasse (#427). */
.bp-haken { flex: none; width: 20px; height: 20px; padding: 0; cursor: pointer;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  background: var(--hintergrund); color: transparent;
  font-size: var(--gr-xs); line-height: 1; min-height: 0; }
.bp-haken:hover { color: var(--text-sekundaer); }
.bp-haken.ist-ab { background: var(--erfolg, var(--linie-stark)); border-color: transparent; color: #fff; }
.bp-titel { flex: 1; min-width: 0; text-align: left; border: none; background: none;
  cursor: pointer; font: inherit; font-size: var(--gr-s); color: var(--text);
  padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 0; }
.bp-titel:hover { text-decoration: underline; }
.bp-aufgabe.erledigt .bp-titel { text-decoration: line-through; opacity: .6; }
.bp-minuten { flex: none; font-size: var(--gr-xs); font-variant-numeric: tabular-nums; }
.bp-weg { flex: none; border: none; background: none; cursor: pointer; min-height: 0;
  color: var(--text-sekundaer); font: inherit; padding: 2px 6px; }
.bp-weg:hover:not(:disabled) { color: var(--achtung); }
/* Gesperrt statt weg: ein Knopf, der verschwindet, sieht aus wie ein Fehler.
   So steht da, DASS es ihn gibt und warum er hier nicht greift (title). */
.bp-weg:disabled { opacity: .3; cursor: not-allowed; }
.bp-dazu { margin-top: 8px; }
.bp-dazu input { width: 100%; padding: 6px 9px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-feld, 8px); font: inherit; font-size: var(--gr-s);
  background: var(--flaeche); color: var(--text); }
#bp-dazu-treffer { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.bp-dazu-treffer { text-align: left; border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--gr-s); color: var(--text); padding: 4px 6px;
  border-radius: var(--radius-feld, 8px); min-height: 0; }
.bp-dazu-treffer:hover { background: var(--flaeche); }
.p-fehler:empty { display: none; }
.p-fehler { margin-top: 10px; font-size: var(--gr-s); }

.p-dazu-kasten { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.p-dazu-kasten input { width: 100%; padding: 6px 9px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-feld, 8px); font: inherit; font-size: var(--gr-s);
  background: var(--flaeche); color: var(--text); }

/* --- #991: die Kette am Contentstueck -------------------------------------
   Drei Gruppen — erledigt, in Arbeit, offen —, eine Zeile je Aufgabe. Der
   Punkt links traegt die Farbe des Zustands; getrennt wird ueber die FORM
   des Punktes und die Gruppen-Ueberschrift, nicht ueber den Farbton allein
   (WISSEN.md, 01.09.2026: zwei Bedeutungen im selben Kanal). */
#cp-p-kette .cp-kette-gruppe { margin-top: 10px; }
#cp-p-kette .cp-kette-titel {
  display: block; font-size: 12px; letter-spacing: .02em;
  color: var(--text-leise); margin-bottom: 4px;
}
/* #1115, 09.09.2026: die Zeile OEFFNET ihre Aufgabe — also muss sie auch
   aussehen, als koenne man sie anklicken. Vorher stand hier `cursor: auto`,
   und der Prueflauf hat genau das gemessen. */
#cp-p-kette .cp-kette-zeile {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; border-bottom: 1px solid var(--linie-zart);
  cursor: pointer;
}
#cp-p-kette .cp-kette-zeile:hover { background: var(--prio-niedrig, var(--hintergrund)); }
#cp-p-kette .cp-kette-zeile:last-child { border-bottom: 0; }
#cp-p-kette .cp-kette-punkt {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px;
  background: var(--text-leise); align-self: center;
}
#cp-p-kette [data-gruppe="erledigt"] .cp-kette-punkt {
  background: var(--saeule-lernrad); border-radius: var(--radius-pille);
}
#cp-p-kette [data-gruppe="arbeit"] .cp-kette-punkt {
  background: var(--warn, #d97706); border-radius: var(--radius-pille);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn, #d97706) 25%, transparent);
}
#cp-p-kette [data-gruppe="offen"] .cp-kette-punkt {
  background: transparent; border: 1.5px solid var(--text-leise);
}
#cp-p-kette [data-gruppe="erledigt"] .cp-kette-name,
#cp-p-kette [data-gruppe="erledigt"] .cp-kette-schritt { color: var(--text-leise); }
#cp-p-kette .cp-kette-schritt { flex: 0 0 auto; font-weight: 600; font-size: 12px; }
#cp-p-kette .cp-kette-name {
  flex: 1 1 auto; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cp-p-kette .cp-kette-frist { flex: 0 0 auto; font-size: 11px; }


/* --- Die Vorwarnung an der Aufgabenzeile (#1037, 10.09.2026) -------------
   Bettinas Vorgabe im Wortlaut: "ein farbiger Punkt am Zeilenanfang: faellig
   in drei Werktagen oder weniger = warm, ueberfaellig = rot, sonst nichts.
   Kein Satz, keine Erklaerung, keine zweite Spalte."

   SIE IST EINE RAUTE UND KEIN KREIS, und das ist der Kern: Am Zeilenanfang
   steht bereits `.punkt` — ein RUNDER Marker, der die SAEULE bedeutet. Zwei
   runde Marker nebeneinander waeren zwei Bedeutungen im selben Kanal; getrennt
   wird ueber die FORM, nicht den Ton (WISSEN.md, 17.08.2026). Der Prueflauf
   `regress-1037-vorwarnung` misst genau das als F1.

   SIE STEHT IM `.auf-name`, nicht als eigenes Rasterkind: `.auf-zeile` ist ein
   Raster mit festen Spalten. Ein zusaetzliches Kind waere eine zweite Spalte —
   ausdruecklich das, was Bettina nicht will. */
.auf-vorwarn {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-right: 3px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--vorwarnung);
}
.auf-vorwarn.ist-rot { background: var(--vorwarnung-rot); }

/* Dieselbe Marke in der Stapel-Zeile (aufgabeZeile). Gleiche Bedeutung,
   gleiches Zeichen — "egal aus welcher Ansicht dieselbe Funktionalitaet"
   (WISSEN.md, 09.09.2026). */
.aufgabe-zeile .auf-vorwarn { margin-right: 4px; }

/* --- Das Briefing (#995, 10.09.2026) -------------------------------------
   "Drei Abfragen, drei Kaesten, ein Bildschirm" (Bettina, 10.09.2026). Das
   Raster bricht deshalb nicht in eine Spalte um, solange die Kaesten noch
   nebeneinander lesbar sind — ein Briefing, fuer das man scrollen muss, ist
   keins. Unter 1000 px wird gestapelt, dort ist Nebeneinander teurer als
   Untereinander. */
/* SEIT #1220 (11.09.2026) IST DAS HIER EINE SPALTE und kein Raster mehr:
   vier Kaesten untereinander, in Lindas Reihenfolge (Die Lage ·
   Entscheidungen · Die Fakten · Seit gestern). Das Raster ist eine Ebene
   tiefer gewandert — in `.brief-fakten-raster`, wo die drei Faktenbloecke
   weiterhin nebeneinander stehen. */
#brief-kaesten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-200, 16px);
}
.brief-kasten {
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche, #fff);
  overflow: hidden;
}
.brief-fakten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--abstand-200, 16px);
  align-items: start;
  padding: var(--abstand-200, 16px);
}
/* Lindas Fliesstext. `pre-wrap`, weil sie in Absaetzen schreibt und ein
   Umbruch von ihr eine Aussage ist — zusammengezogen laese sich ihr Urteil
   ueber den Tag wie eine einzige Behauptung. */
.brief-text {
  padding: 10px 12px;
  white-space: pre-wrap;
  line-height: 1.5;
}
/* „kein Briefing" ist KEIN leerer Kasten und wird auch nicht wie einer
   gezeichnet: ein altes oder fehlendes Briefing, das leise aussieht, sieht
   aus wie ein aktuelles. */
.brief-kein {
  padding: 10px 12px;
  color: var(--text-sekundaer);
  font-style: italic;
  border-left: 3px solid var(--linie);
}
.brief-entscheidung {
  padding: 10px 12px;
  border-top: 1px solid var(--linie);
}
.brief-entscheidung:first-of-type { border-top: none; }
.brief-frage { font-weight: 600; }
.brief-empfehlung { font-size: var(--gr-s); margin-top: 2px; }
.brief-tage { font-size: var(--gr-s); color: var(--text-sekundaer); margin-top: 3px; }
/* Das Antwortfeld (#1377). Freier Text und kein Ja/Nein — Bettinas Antworten
   sind „ja, aber", „nein, weil" oder eine Rückfrage. */
.brief-antwort-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.brief-antwort-form textarea {
  flex: 1; min-width: 0; resize: vertical;
  padding: 6px 8px; border: 1px solid var(--linie); border-radius: var(--radius-karte);
  font-size: var(--gr-s); line-height: 1.4;
}
.brief-antwort-warten { font-size: var(--gr-s); margin-top: 6px; font-style: italic; }
.brief-entschieden .brief-frage { font-weight: 400; color: var(--text-sekundaer); }
.brief-antwort {
  margin-top: 3px; padding-left: 8px;
  border-left: 2px solid var(--akzent, var(--linie));
  white-space: pre-wrap; line-height: 1.4;
}
.brief-block {
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche, #fff);
  overflow: hidden;
}
.brief-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
  font-weight: 600;
}
/* Der Nenner steht IMMER da, auch bei null Zeilen — er ist der Unterschied
   zwischen "nichts liegt an" und "die Abfrage greift daneben". */
.brief-nenner { font-size: var(--gr-s); font-weight: 400; color: var(--text-sekundaer); }
/* SEIT #1220 ZWEIZEILIG: unter dem Titel kann Lindas Randnotiz stehen.
   Die frühere Flex-Reihe sitzt deshalb in `.brief-zeile-haupt` — stünden
   beide im selben Flex-Container, stünde die Notiz NEBEN dem Titel. */
.brief-zeile {
  display: block;
  padding: 7px 12px; cursor: pointer;
  border-top: 1px solid var(--linie);
}
.brief-zeile-haupt { display: flex; align-items: center; gap: 6px; }
/* Lindas Zeile an genau dieser Aufgabe, gueltig nur fuer dieses Briefing.
   Sie ist optisch klar untergeordnet: sie erklaert die Zeile, sie ersetzt
   sie nicht. */
.brief-randnotiz {
  margin: 3px 0 0 0;
  padding-left: 8px;
  border-left: 2px solid var(--akzent, var(--linie));
  font-size: var(--gr-s);
  color: var(--text-sekundaer);
  line-height: 1.4;
}
.brief-zeile:first-of-type { border-top: none; }
.brief-zeile:hover { background: var(--hintergrund); }
.brief-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-neben { font-size: var(--gr-s); color: var(--text-sekundaer); white-space: nowrap; }
.brief-leer { padding: 10px 12px; }
.brief-zaehlzeile {
  padding: 8px 12px;
  border-top: 1px dashed var(--linie);
  font-size: var(--gr-s);
  color: var(--text-sekundaer);
}

/* ===================== B2B-Lizenzen (#1491, 23.09.2026) =====================
   Die Ampel wird NICHT allein ueber den Ton getragen (WISSEN.md, 17.08.2026:
   zwei Bedeutungen im selben Kanal Farbe): Jede Ampel steht als WORT in
   einem Etikett, die Farbe verstaerkt nur. Nur Tokens, keine eigenen Werte. */
.b2b-kopfzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.b2b-kennzahl { border: 1px solid var(--linie, currentColor); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; }
.b2b-zahl { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.b2b-kennzahl .b2b-zahl { font-size: 1.4em; }
.b2b-was { font-size: var(--gr-s); }
.b2b-titel { margin: 18px 0 8px; }
.b2b-liste { display: grid; gap: 8px; }
.b2b-lizenz { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: start; padding: 8px 10px; border-radius: 8px; }
.b2b-ampel { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--gr-s); font-weight: 600; }
.b2b-lizenz[data-ampel="gruen"]  .b2b-ampel { background: var(--dr4-grund); color: var(--ok); }
.b2b-lizenz[data-ampel="gelb"]   .b2b-ampel { background: var(--dr3-grund); color: var(--dr3-text); }
.b2b-lizenz[data-ampel="orange"] .b2b-ampel { background: var(--dr2-grund); color: var(--dr2-text); }
.b2b-lizenz[data-ampel="rot"]    .b2b-ampel { background: var(--dr1-grund); color: var(--dr1-text); }
.b2b-lizenz[data-ampel="grau"]   .b2b-ampel { background: var(--dr5-grund); color: var(--dr5-text); }
.b2b-name { font-weight: 600; }
.b2b-balken { height: 6px; border-radius: 3px; background: var(--dr5-grund); margin-top: 6px; overflow: hidden; }
.b2b-balken-lauf { height: 100%; background: var(--dr4-text); }
.b2b-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.b2b-umsatz-zeile { display: grid; grid-template-columns: 140px 1fr 110px; gap: 10px; align-items: center; margin: 4px 0; }
.b2b-umsatz-balken { height: 8px; background: var(--dr5-grund); border-radius: 4px; overflow: hidden; }
.b2b-umsatz-balken > div { height: 100%; background: var(--dr4-text); }
.b2b-beleg { padding: 4px 0; }
.b2b-ueberfaellig { color: var(--warnung-text); font-weight: 600; }
#b2b-datenstand.b2b-warnung { color: var(--warnung-text); background: var(--warnung-flaeche); }