/* Einsatzplanung Bergrettung – Erscheinungsbild nach dem bestehenden Tagesordner-Prototyp

   Farbsystem in drei Ebenen:
   - Statusfarben (--ok/--warn/--stop/--neutral) sagen, wie es um eine Sache steht
     (erledigt, offen, dringend). --stop ist Alarmrot und bleibt Notfällen vorbehalten.
   - Meldungsfarben: Info (--info, blau), Warnung (--warn, gelb), Fehler (--stop, rot).
     Kästen .hinweis sind ohne Zusatzklasse Info; .hinweis.warn / .hinweis.stop nur, wenn
     wirklich gewarnt oder ein Fehler gemeldet wird.
   - Bereichsfarben (--phase-*) sagen, in welchem der vier fachlichen Hauptbereiche man sich
     befindet (Planung/Organisation/Durchführung/Nachbereitung). Sie sind bewusst andere Farbtöne
     als --stop, damit ein Bereich niemals wie ein Alarm wirkt.
   --marke ist der neutrale Signal-/Fokusakzent für Seiten ohne Bereichszugehörigkeit
   (Startseite, Eventliste, Darstellung, Verwaltung) – ausdrücklich kein Rot mehr, damit Rot
   im Programm ausschließlich Alarm/Notfall bedeutet. */
/* Schriften: IBM Plex Sans und Plex Mono, lokal mitgeliefert (SIL Open Font License, siehe
   public/schriften/OFL.txt), damit sie offline und ohne fremde Server laden. Nur lateinischer
   Zeichensatz; fehlende Schnitte (650, 800) nimmt der Browser vom nächstliegenden. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/ibm-plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/ibm-plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(schriften/ibm-plex-sans-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/ibm-plex-mono-600.woff2) format("woff2")}
:root{
  --marke:#0f62fe; --marke-rgb:15,98,254;
  /* Höhe der klebenden Kopfleiste – für alle Elemente, die unter ihr andocken sollen. */
  --kopf-h:calc(env(safe-area-inset-top) + 62px);
  --bg:#f4f4f4; --karte:#fff; --text:#161616; --schwach:#525252; --linie:#e0e0e0;
  --ok:#0f7a3d; --okbg:#d7f0e0; --warn:#5c4a00; --warnbg:#ffd400; --stop:#c1121f; --stopbg:#ffdbde;
  --info:#0a5a94; --infobg:#d6ebf8;
  --neutral:#4b5560; --neutralbg:#e8e8e8; --feld:#f8f8f8; --kartetief:#f4f4f4; --betont:var(--marke);

  /* Erscheinungsbild (Designwahl Oktober 2026): Grundlage nach IBM Carbon, Seitenleiste als
     dunkler Leitstand, Karten mit Kopfzeile, Kennzeichen und Zahlen in Festbreitenschrift. */
  --schrift:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --karterand:#d5dae0; --feldrand:#556b82; --fokus:#0032a5; --zaehler:#00727a;
  --gemeinsambg:#eef8f0; --gemeinsamtext:#1a6b32;
  /* Seitenleiste: bleibt auch im Hellmodus dunkel. Der aktive Eintrag ist ein heller,
     vollflächiger Balken – die Umkehrung des schwarzen Balkens auf heller Leiste. */
  --nav:#1c2026; --navtext:#c9d1d9; --navschwach:#8b949e; --navhover:#2a3038;
  --navblock:#232830; --navrand:#2f3742; --navgruppe:#2e3541; --navaktiv:#eef1f4; --navaktivtext:#0d1117; --navstark:#fff;

  /* Bereichsfarben: im Hellmodus kräftig genug für weiße Knopfschrift und für Text auf Weiß.
     Die „-fill“-Töne ändern sich bewusst nicht zwischen Hell und Dunkel – sie tragen weiße
     Knopfschrift und die immer dunklen Phasenkarten der Startseite gleichermaßen sicher. */
  --phase-planung:#2f6da3;        --phase-planung-rgb:47,109,163;
  --phase-organisation:#0f7f72;   --phase-organisation-rgb:15,127,114;
  --phase-durchfuehrung:#b5590d;  --phase-durchfuehrung-rgb:181,89,13;
  --phase-nachbereitung:#6f47a8;  --phase-nachbereitung-rgb:111,71,168;
  --phase-planung-fill:#2f6da3;        --phase-planung-fill-rgb:47,109,163;
  --phase-organisation-fill:#0f7f72;   --phase-organisation-fill-rgb:15,127,114;
  --phase-durchfuehrung-fill:#b5590d;  --phase-durchfuehrung-fill-rgb:181,89,13;
  --phase-nachbereitung-fill:#6f47a8;  --phase-nachbereitung-fill-rgb:111,71,168;
  /* Mischanteil der Phasenfarbe für den Untergrund der Phasenüberschrift (s. nav-bereich.bereich-*
     .gruppe weiter unten) – bewusst als eigene, themeabhängige Variable statt eines festen Werts:
     im Hellmodus sind die Phasenfarben selbst schon kräftig/dunkel (für Kontrast auf Weiß), ein
     hoher Anteil reicht für eine spürbare, aber weiterhin klar helle Abstufung. Im Dunkelmodus sind
     dieselben Phasenfarben deutlich heller (für Kontrast auf Dunkel) – dort braucht es einen viel
     kleineren Anteil, sonst würde die Überschrift heller statt dunkler als ihr Eventblock. */
  --phase-anteil:30%;

  /* Glasoptik des Eventblocks (subtiles „frosted glass“, kein Neon-Look): im Hellmodus deutlich
     zurückhaltender (sonst wirkt eine helle, transluzente Fläche schnell milchig/billig), im
     Dunkelmodus kräftiger, weil dort Tiefe und Lichtkanten am besten zur Geltung kommen. Dieselbe
     Vier-Wege-Struktur wie bei --bg/--karte/… weiter unten (automatisch per Systempräferenz UND
     explizit per data-modus wählbar). Kommt nur beim Eventblock/Eventkopf/Phasenüberschrift zum
     Einsatz, keine andere Sidebar-Fläche verwendet diese Variablen. */
  --glas-alpha:.12; --glas-blur:8px; --glas-saettigung:1.1;
  --glas-glanz:rgba(255,255,255,.4); --glas-schatten:0 1px 4px rgba(0,0,0,.05);

  /* Abstandsraster – wenige feste Größen statt zufälliger Werte. */
  --abstand-xs:4px; --abstand-sm:8px; --abstand-md:12px; --abstand-lg:16px; --abstand-xl:24px; --abstand-2xl:32px;
}
/* Dunkelmodus: nach Systemeinstellung, außer „Immer hell“ ist gewählt, und ausdrücklich bei
   „Immer dunkel“. Beide Selektoren haben dieselbe Spezifität wie der Kontrastblock weiter unten,
   der deshalb weiterhin gewinnt. */
@media (prefers-color-scheme: dark){
  html:not([data-modus="hell"]){ --bg:#12151a; --karte:#1b1f26; --text:#eef1f5; --schwach:#9aa4b0; --linie:#2c323b;
  --okbg:#153322; --ok:#5fca8c; --warnbg:#3d3300; --warn:#ffd400;
  --stopbg:#4a1216; --stop:#ff6b74; --info:#7ec8ff; --infobg:#0d2c44;
  --neutralbg:#2c323b; --neutral:#aab4c0; --feld:#232830; --kartetief:#171b21;
  /* Die Markenfarbe trägt weiße Knopfschrift und dient als Fokusrahmen – #0f62fe schafft
     beides auch auf dunklem Grund (Weiß 5,9:1, gegen den Hintergrund über 3:1). */
  --marke:#0f62fe; --marke-rgb:15,98,254;
  --karterand:#2c323b; --feldrand:#5b6672; --fokus:#78a9ff; --zaehler:#3fb8c0;
  --gemeinsambg:#153322; --gemeinsamtext:#7ee2a2;
  --nav:#0d1014; --navtext:#c9d1d9; --navschwach:#8b949e; --navhover:#1f242b;
  --navblock:#171b21; --navrand:#262c34; --navgruppe:#222832; --navaktiv:#e6ebf0; --navaktivtext:#0d1117; --navstark:#fff;
  /* Im Dunkelmodus ist die Bereichsfarbe selbst heller (Text/Rand auf dunklem Grund);
     die „-fill“-Variante bleibt dunkel genug für weiße Knopfschrift. */
  --phase-planung:#5b9fd4;       --phase-planung-rgb:91,159,212;
  --phase-organisation:#2bb3c9;  --phase-organisation-rgb:43,179,201;
  --phase-durchfuehrung:#e08a2e; --phase-durchfuehrung-rgb:224,138,46;
  --phase-nachbereitung:#9a8fd4; --phase-nachbereitung-rgb:154,143,212;
  --phase-anteil:12%;
  --glas-alpha:.10; --glas-blur:8px; --glas-saettigung:1.15;
  --glas-glanz:rgba(255,255,255,.06); --glas-schatten:0 2px 8px rgba(0,0,0,.22); }
}
html[data-modus="dunkel"]{ --bg:#12151a; --karte:#1b1f26; --text:#eef1f5; --schwach:#9aa4b0; --linie:#2c323b;
  --okbg:#153322; --ok:#5fca8c; --warnbg:#3d3300; --warn:#ffd400;
  --stopbg:#4a1216; --stop:#ff6b74; --info:#7ec8ff; --infobg:#0d2c44;
  --neutralbg:#2c323b; --neutral:#aab4c0; --feld:#232830; --kartetief:#171b21;
  /* Die Markenfarbe trägt weiße Knopfschrift und dient als Fokusrahmen – #0f62fe schafft
     beides auch auf dunklem Grund (Weiß 5,9:1, gegen den Hintergrund über 3:1). */
  --marke:#0f62fe; --marke-rgb:15,98,254;
  --karterand:#2c323b; --feldrand:#5b6672; --fokus:#78a9ff; --zaehler:#3fb8c0;
  --gemeinsambg:#153322; --gemeinsamtext:#7ee2a2;
  --nav:#0d1014; --navtext:#c9d1d9; --navschwach:#8b949e; --navhover:#1f242b;
  --navblock:#171b21; --navrand:#262c34; --navgruppe:#222832; --navaktiv:#e6ebf0; --navaktivtext:#0d1117; --navstark:#fff;
  /* Im Dunkelmodus ist die Bereichsfarbe selbst heller (Text/Rand auf dunklem Grund);
     die „-fill“-Variante bleibt dunkel genug für weiße Knopfschrift. */
  --phase-planung:#5b9fd4;       --phase-planung-rgb:91,159,212;
  --phase-organisation:#2bb3c9;  --phase-organisation-rgb:43,179,201;
  --phase-durchfuehrung:#e08a2e; --phase-durchfuehrung-rgb:224,138,46;
  --phase-nachbereitung:#9a8fd4; --phase-nachbereitung-rgb:154,143,212;
  --phase-anteil:12%;
  --glas-alpha:.10; --glas-blur:8px; --glas-saettigung:1.15;
  --glas-glanz:rgba(255,255,255,.06); --glas-schatten:0 2px 8px rgba(0,0,0,.22); }
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Der Platz für die vertikale Bildlaufleiste bleibt immer reserviert. Ohne das springt der
   gesamte Inhaltsbereich seitlich, sobald ein aufklappbarer Abschnitt (z. B. „Rechenweg
   anzeigen" oder „Zahlenwerte bearbeiten" unter Verfahren und Quellen) die Seite über die
   Fensterhöhe hinaus wachsen lässt und die Bildlaufleiste dadurch erst erscheint. */
html{scrollbar-gutter:stable}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font:1rem/1.45 var(--schrift);letter-spacing:.16px}

/* ---------- Kopf ----------
   Neutral in der Grundfarbe (globale Seiten bleiben neutral); auf Seiten mit fachlichem
   Hauptbereich zeigt der Kopf eine ruhige Tönung in der jeweiligen Bereichsfarbe plus eine
   beschriftete Marke – Farbe ist so nie die einzige Auskunft, welcher Bereich gerade offen ist. */
/* Sticky Header (Q): background-color und Verlauf sind bewusst getrennte Ebenen. Die
   Bereichsvarianten unten setzen nur background-image (Verlauf, an den Rändern teiltransparent) –
   die hier gesetzte background-color bleibt voll deckend darunter erhalten. Würde man stattdessen
   das Kurzschreibweise „background:“ mit der teiltransparenten Verlaufsfarbe komplett neu setzen,
   verschwindet die deckende Grundfarbe, und beim Scrollen scheint der Seiteninhalt durch den Kopf
   durch. z-index über der Seitenleiste (40) und dem Schatten (35), damit der Kopf beim Scrollen
   zuverlässig über dem Inhalt bleibt, aber unter geöffneter mobiler Navigation. */
/* width:100vw statt der üblichen 100% (Q): „html“ reserviert oben per scrollbar-gutter:stable
   immer den Platz der Bildlaufleiste, auch wenn die Seite kurz genug ist, gar keine zu brauchen.
   Ohne diese Zeile bliebe rechts genau dieser reservierte Streifen frei – die Kopfleiste sähe aus,
   als reiche sie nicht bis zum Rand. 100vw rechnet die Bildlaufleiste NICHT mit ein und schließt
   die Lücke; der Kopf beginnt weiterhin bei 0, eine Verschiebung braucht es deshalb nicht. */
header.app{position:sticky;top:0;z-index:30;background-color:var(--kartetief);color:var(--text);
  border-bottom:1px solid var(--linie);width:100vw;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;display:flex;gap:var(--abstand-sm);align-items:center;
  transition:background-color .15s ease,border-color .15s ease}
header.app .tx{flex:1;min-width:0}
header.app h1{margin:0;font-size:1.0625rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.app .sub-zeile{display:flex;align-items:center;gap:var(--abstand-sm);min-width:0;margin-top:2px}
header.app .sub{font-size:.9375rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
header.app button{background:var(--neutralbg);border:0;color:var(--text);font:inherit;font-size:.875rem;font-weight:650;
  padding:9px 12px;border-radius:10px;cursor:pointer;flex:none}
header.app button:hover{background:var(--linie)}
header.app button:focus-visible{outline:2px solid var(--marke);outline-offset:1px}
.menuknopf{display:inline-flex}
@media(min-width:900px){.menuknopf{display:none} header.app{padding-left:264px}}
/* Deutlicher, aber sachlicher Hinweis auf einem archivierten Event (B9) – kein Zeichenverlust bei
   abgeschalteten Farben, da der Text selbst schon die Auskunft trägt. */
.archiv-banner{background:var(--neutralbg);color:var(--text);border-bottom:1px solid var(--linie);
  padding:9px 14px;font-size:.8438rem;font-weight:600;width:100vw}
@media(min-width:900px){.archiv-banner{padding-left:278px}}
/* Meldung, wenn der Dienstprogrammverbund im Hintergrund eine neue Fassung geladen hat, während
   diese Seite noch mit dem alten Programmstand läuft (kein automatisches Neuladen – das könnte
   unbemerkt Eingaben verwerfen; die Entscheidung bleibt beim Zugang). */
.fassung-banner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--infobg);color:var(--info);border-color:var(--info)}
.fassung-banner button{flex:none}
/* Der Kopf-Aktionsknopf ist je Seite die eine primäre Aktion (Neu anlegen …) – auf einer Seite
   mit Hauptbereich trägt er darum dieselbe Phasenfarbe wie die anderen primären Knöpfe dort. */
header.app[data-bereich="planung"] #kopfknopf{background:var(--phase-planung-fill);color:#fff}
header.app[data-bereich="organisation"] #kopfknopf{background:var(--phase-organisation-fill);color:#fff}
header.app[data-bereich="durchfuehrung"] #kopfknopf{background:var(--phase-durchfuehrung-fill);color:#fff}
header.app[data-bereich="nachbereitung"] #kopfknopf{background:var(--phase-nachbereitung-fill);color:#fff}
header.app[data-bereich] #kopfknopf:hover{filter:brightness(1.12)}

/* Phasenmarke rechts in der Titelleiste: dieselbe Nummer wie auf den Startkarten, daneben der
   Phasenname ohne Kapsel. Farbe trägt die Nummer; der Name bleibt normale Schrift (WCAG 1.4.1). */
.bereich-marke{display:inline-flex;align-items:center;gap:8px;flex:none;align-self:center;
  font-size:1.0625rem;font-weight:700;color:var(--text);white-space:nowrap;line-height:1.2}
.bereich-marke .nummer{margin:0}

/* Hintergrund der Phasen-Titelleiste wie der Eventblock in der Sidebar: deckende Grundfläche
   plus dieselbe rgba-Tönung (--glas-alpha) und die feine Lichtkante, damit Kopf und Bubble
   zusammengehören. background-color bleibt voll deckend, damit beim Scrollen kein Inhalt
   durch den sticky Header scheint. */
header.app[data-bereich="planung"]{
  --stufe-rgb:var(--phase-planung-rgb);
  background-color:var(--kartetief);
  background-image:linear-gradient(rgba(var(--phase-planung-rgb),var(--glas-alpha)),rgba(var(--phase-planung-rgb),var(--glas-alpha)));
  border-bottom-color:rgba(var(--phase-planung-rgb),.35);
  box-shadow:inset 0 1px 0 var(--glas-glanz)}
header.app[data-bereich="organisation"]{
  --stufe-rgb:var(--phase-organisation-rgb);
  background-color:var(--kartetief);
  background-image:linear-gradient(rgba(var(--phase-organisation-rgb),var(--glas-alpha)),rgba(var(--phase-organisation-rgb),var(--glas-alpha)));
  border-bottom-color:rgba(var(--phase-organisation-rgb),.35);
  box-shadow:inset 0 1px 0 var(--glas-glanz)}
header.app[data-bereich="durchfuehrung"]{
  --stufe-rgb:var(--phase-durchfuehrung-rgb);
  background-color:var(--kartetief);
  background-image:linear-gradient(rgba(var(--phase-durchfuehrung-rgb),var(--glas-alpha)),rgba(var(--phase-durchfuehrung-rgb),var(--glas-alpha)));
  border-bottom-color:rgba(var(--phase-durchfuehrung-rgb),.35);
  box-shadow:inset 0 1px 0 var(--glas-glanz)}
header.app[data-bereich="nachbereitung"]{
  --stufe-rgb:var(--phase-nachbereitung-rgb);
  background-color:var(--kartetief);
  background-image:linear-gradient(rgba(var(--phase-nachbereitung-rgb),var(--glas-alpha)),rgba(var(--phase-nachbereitung-rgb),var(--glas-alpha)));
  border-bottom-color:rgba(var(--phase-nachbereitung-rgb),.35);
  box-shadow:inset 0 1px 0 var(--glas-glanz)}

/* ---------- Navigation ---------- */
nav.seite{position:fixed;top:0;left:0;bottom:0;width:250px;background:var(--karte);border-right:1px solid var(--linie);
  padding:14px 10px;overflow-y:auto;z-index:40;transform:translateX(-100%);transition:transform .18s ease}
nav.seite.offen{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
/* Einträge so hoch wie die kleinen Knöpfe im Inhalt (Alle Verfahren, Standard):
   auf dem 13-Zoll-Laptop die ganze Liste ohne vertikales Scrollen, am Touchgerät weiter treffbar. */
nav.seite a{display:flex;align-items:center;padding:6px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.9375rem}
nav.seite a:hover{background:var(--neutralbg)}
/* Der aktive Eintrag darf sich nicht allein über die Farbe zeigen (WCAG 1.4.1) – aber auch nicht
   über eine deutlich fettere Schrift, weil das bei langen Beschriftungen („Import, Export und
   Sicherung") einen Zeilenumbruch und damit einen Layout-Shift zwischen normal/aktiv auslösen
   kann. Fläche und linker Balken zeigen den Aktivzustand, ohne die Textbreite zu verändern.
   Drei sichtbar unterschiedliche, aber alle layoutneutrale Stufen:
   A) globaler Hauptlink – deutlichste Fläche, neutrale Textfarbe;
   B) direkter Event-Link (Übersicht, Personen, …) – etwas zurückhaltendere Fläche als A, in der
      Farbe der Phase getönt, die den Eventblock aktuell einfärbt (--stufe/--stufe-rgb, s.
      .event-block unten) – Textfarbe bleibt aber wie bei A neutral;
   C) Phasen-Unterseite (Eckdaten, …) – sehr leichte Phasentönung der Fläche, siehe weiter unten,
      Textfarbe ebenfalls neutral wie A/B.
   Der linke Akzentstreifen ist bei allen drei Stufen exakt gleich breit (3px) – nur seine Farbe
   (neutral bei A, Phasenfarbe bei B/C) und die Kräftigkeit der Hintergrundfläche unterscheiden die
   Stufen. Vorher war der Streifen bei B/C schmaler (2px) als bei A und C färbte zusätzlich die
   Schrift in Phasenfarbe ein – zwei unbeabsichtigte Abweichungen von der oben beschriebenen Regel,
   die die Farbe (nie zusätzlich die Schrift) als alleinigen Träger der Phaseninformation im
   Akzentstreifen vorsieht. */
nav.seite>a.aktiv{background:var(--neutralbg);box-shadow:inset 3px 0 0 var(--betont)}
nav.seite .nav-event>a.aktiv{background:rgba(var(--stufe-rgb),.16);box-shadow:inset 3px 0 0 var(--stufe)}
/* Hover innerhalb des Eventblocks: eine gemeinsame Stelle für den direkten Event-Link
   (Übersicht) UND alle Phasen-Unterseiten (Eckdaten, …), statt getrennter Einzelregeln mit
   unterschiedlicher Deckkraft je Ebene/Phase. Vorher fiel „Übersicht“ mangels eigener Regel auf
   den allgemeinen neutralgrauen Hover zurück (nav.seite a:hover), während die Phasen-Unterseiten
   bereits eine – zudem je Phase leicht unterschiedlich starke (.06/.06/.07/.08) – blaue Tönung
   hatten. Jetzt: dieselbe, einzige Deckkraft (.06) für „Übersicht“ (über --stufe-rgb, dieselbe
   Variable wie ihr Aktivzustand) und für jede Phasen-Unterseite (über die jeweilige
   --phase-*-rgb, s. nav-bereich.bereich-* a:hover weiter unten) – deutlich schwächer als der
   jeweilige Aktivzustand (.16), damit Hover und Aktiv weiterhin klar unterscheidbar bleiben.
   :not(.aktiv), weil Hover- und Aktiv-Regel hier dieselbe Spezifität haben (b=3,c=2) – ohne diesen
   Ausschluss würde beim Hovern des bereits aktiven Links allein die Reihenfolge im Stylesheet
   entscheiden und die kräftigere Aktiv-Tönung (.16) versehentlich durch die schwächere
   Hover-Tönung (.06) ersetzen. Der aktive Zustand bleibt so unter der Maus unverändert. */
nav.seite .nav-event>a:hover:not(.aktiv){background:rgba(var(--stufe-rgb),.06)}
/* Gruppenüberschriften (P): nicht anklickbar, aber eindeutig als Überschrift statt als
   Fließtext erkennbar – eigener dezenter Grundton plus obere Trennlinie statt reiner
   Groß-/Kleinschreibung. Bleibt zurückhaltender als ein Link (kein Hover, kein Zeiger). */
nav.seite .gruppe{font-size:.7188rem;letter-spacing:.06em;text-transform:uppercase;color:var(--schwach);
  font-weight:700;padding:8px 10px;margin:14px 0 4px;background:var(--kartetief);border-radius:8px;
  border-top:1px solid var(--linie)}
nav.seite .gruppe:first-child{margin-top:0}
/* Faltbare Navigationsgruppen: die Überschrift schaltet die Liste darunter ein/aus.
   Standardmäßig ausgeklappt; der Zustand merkt sich pro Gruppe (localStorage). */
nav.seite .gruppe.faltbar{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
nav.seite .gruppe.faltbar::before{content:"▾";font-size:.5625rem;line-height:1;transition:transform .12s;opacity:.7}
nav.seite .gruppe.faltbar.zu::before{transform:rotate(-90deg)}
nav.seite .gruppe.faltbar:hover{color:var(--text)}
nav.seite .nav-untergruppe{overflow:hidden}
nav.seite .gruppe.faltbar.zu + .nav-untergruppe{display:none}
/* Event-Block (Q): der GESAMTE Eventbereich – Eventkopf, Übersicht, jede Phasenüberschrift und
   ihre Unterseiten – liegt in einer einzigen, gemeinsamen Fläche, klar sichtbar statt nur einer
   Nuance vom Sidebar-Grund abgesetzt, damit er auf einen Blick als eigener Arbeitskontext erkennbar
   ist und sich von den globalen Bereichen (Admin/Verwaltung, Werkzeuge, …) abhebt. Die Tönung kommt
   aus derselben Phasenfarbe, die auch Kopfleiste, Chips und Phasenüberschriften trägt – keine neue
   Warnfarbe, keine zweite Farblogik: --stufe-rgb/--stufe werden unten je Bereichsklasse gesetzt
   (bereich-planung/-organisation/-durchfuehrung/-nachbereitung, von navBauen() anhand der aktuell
   offenen Unterseite oder – auf der Eventübersicht anhand der Betriebsart des Events, sonst
   anhand der Event-Phase – gewählt) und vererben sich als CSS-Variablen an alles innerhalb dieses
   Blocks, u. a. den Aktivzustand der Event-Übersicht oben. Ohne passende Phase (Rückfall) neutral in der
   Markenfarbe. Keine durchgehende vertikale Linie mehr (wirkte technisch/unruhig) und keine
   zusätzliche Einrückung: die Zugehörigkeit zeigt der gemeinsame Rahmen dieses Blocks, nicht eine
   x-Position. Alle Links im Eventblock – direkte Eventlinks wie Phasenschritte – teilen sich
   dasselbe Link-Padding wie jeder andere Sidebar-Link (kein Sonderfall pro Ebene), damit z. B.
   „Eckdaten“ ungefähr auf der Höhe von „Events“ unter Admin/Verwaltung beginnt
   (FACHMODELL-REGELN §44/§45: die Hierarchie Event → Phase → Schritt bleibt über Gruppierung,
   Phasenüberschrift, Farbe und vertikalen Abstand erkennbar, nicht über Einrückungstiefe). */
/* Subtile Glasoptik („frosted glass“, kein Neon-Look): backdrop-filter ist eine reine Veredelung
   hinter @supports – Browser ohne Unterstützung sehen weiterhin die normale, deckende
   rgba-Tönung von vorher (das war schon immer die Fläche, nur ohne Blur/Sättigung/Lichtkanten),
   also ein sauberer, funktionsfähiger Grundzustand ohne jede Abhängigkeit vom Feature. Stärke des
   Effekts (Transparenz/Blur/Sättigung/Lichtkante/Schattentiefe) kommt aus den themeabhängigen
   --glas-*-Variablen (s. :root) – im Hellmodus bewusst zurückhaltend (sonst wirkt eine helle
   transluzente Fläche schnell milchig), im Dunkelmodus kräftiger. Hoher Kontrast schaltet den
   gesamten Effekt weiter unten explizit wieder ab (eigene robuste Ersatzdarstellung). */
nav.seite .event-block{--stufe-rgb:var(--marke-rgb);--stufe:var(--marke);
  background:rgba(var(--stufe-rgb),var(--glas-alpha));
  border:1px solid rgba(var(--stufe-rgb),.35);
  border-radius:12px;margin:14px 0 12px;padding:8px;
  box-shadow:inset 0 1px 0 var(--glas-glanz),var(--glas-schatten)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  nav.seite .event-block{
    backdrop-filter:blur(var(--glas-blur)) saturate(var(--glas-saettigung));
    -webkit-backdrop-filter:blur(var(--glas-blur)) saturate(var(--glas-saettigung));
  }
}
nav.seite .event-block.bereich-planung{--stufe-rgb:var(--phase-planung-rgb);--stufe:var(--phase-planung)}
nav.seite .event-block.bereich-organisation{--stufe-rgb:var(--phase-organisation-rgb);--stufe:var(--phase-organisation)}
nav.seite .event-block.bereich-durchfuehrung{--stufe-rgb:var(--phase-durchfuehrung-rgb);--stufe:var(--phase-durchfuehrung)}
nav.seite .event-block.bereich-nachbereitung{--stufe-rgb:var(--phase-nachbereitung-rgb);--stufe:var(--phase-nachbereitung)}
/* Event-Kopf: eigener zweizeiliger Kopf statt Fließtext-Link – kleines, zurückhaltendes Label
   „Event“ plus kräftiger Eventname, damit er nicht wie eine anklickbare Unterseite wirkt, sondern
   klar als „hier beginnt die Navigation dieses Events“ erkennbar ist. Lange Namen brechen um,
   statt die feste Navigationsbreite zu sprengen. Bleibt innerhalb des Eventblocks der stärkste
   Anker – aber nicht, indem er noch einmal kräftig in derselben Phasenfarbe gefüllt wird (dann
   geht er im Farbschleier der umgebenden Fläche optisch unter). Stattdessen der normale, neutrale
   Karten-/Sidebar-Ton (var(--karte)), der sich klar von der getönten Eventfläche abhebt – wie eine
   Kachel, die sichtbar AUF der Phasenfarbe liegt, nicht darunter. Der Rahmen bleibt bewusst neutral
   (var(--linie), keine Phasenfarbe): der Eventblock trägt bereits einen phasenfarbigen Hintergrund
   UND eine phasenfarbige Außenkontur – ein zusätzlicher farbiger Akzent am Kopf wäre ein dritter,
   redundanter Farbträger und ließe den Kopf wie einen aktiven Menüpunkt statt wie einen neutralen
   Kontextkopf wirken. Der Eventkopf sagt „das ist das geöffnete Event“, nicht „das ist aktiv“.
   Formsprache identisch zu den globalen Gruppenüberschriften (WERKZEUGE, ADMIN/VERWALTUNG, …):
   deckende Kartenfläche, feine obere Trennlinie, kein umlaufender Rahmen.
/* Abstand Event-Kopf → Übersicht bewusst so knapp wie die globale Referenz ÜBERSICHT → Startseite
   (dort: .gruppe-Grundregel, margin-bottom 4px) – sonst wirkt der Eventblock unnötig hoch und
   inkonsistent zur globalen Navigation direkt darüber. */
/* „Floating“ innerhalb des Glasblocks: eine dünne, ringsum leicht sichtbare Innenkontur
   (inset 0 0 0 1px) plus ein sehr weicher Schlagschatten nach außen heben den Kopf minimal vom
   umgebenden Glas ab, ohne eine neue linke Akzentleiste einzuführen – die obere Glanzkante bleibt
   wie bisher ein echtes border-top. */
nav.seite .gruppe.event-titel{text-transform:none;letter-spacing:0;color:var(--text);
  background:var(--kartetief);
  border-radius:8px;border:0;border-top:.5px solid rgba(255,255,255,.7);
  box-shadow:0 1px 3px rgba(0,0,0,.16);
  margin:0 0 4px;padding:8px 10px 9px 8px;cursor:default}
nav.seite .event-titel-label{font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--schwach);font-weight:700;margin-bottom:2px}
nav.seite .event-titel-name{font-size:.9375rem;font-weight:600;line-height:1.25;
  overflow-wrap:break-word;word-break:break-word}
/* Übersicht/Eckdaten bekommen keine eigene Fläche – die liefert bereits der gemeinsame Eventblock.
   Die Phasenüberschrift (PLANUNG/…) dagegen bekommt hier dieselbe Grundform wie jede andere
   Gruppenüberschrift (Admin/Verwaltung, Werkzeuge, …): denselben neutralen Untergrund
   (var(--kartetief)), dasselbe Padding, denselben Radius – „echte Gruppenüberschrift“ statt einer
   sichtbar abweichenden Sonderform. Der einzige Unterschied ist die Phasenfarbe: Rahmen und Text
   setzen die nav-bereich.bereich-*-Regeln weiter unten (dieselbe Selektor-Familie, nicht zwei
   getrennte Mechanismen, damit beides nie auseinanderlaufen kann). Wichtig: hier auf allen vier
   Seiten `border:0` statt nur `border-top:0`, sonst „gewinnt“ diese immer aktive Regel gegen den
   vollständigen Rahmen der spezifischeren Phasen-Regel nur auf einer Seite und die Umrandung wirkt
   abgeschnitten (genau der frühere Darstellungsfehler, besonders im hohen Kontrast). Sichtbarer,
   aber kompakter Abstand: Übersicht → Planung dieselben 14px wie Startseite → Eventblock,
   kleiner von der Phasenüberschrift zum ersten Schritt darunter (Planung → Eckdaten, wieder
   dieselben 4px wie bei der globalen Referenz ÜBERSICHT → Startseite und Event-Kopf → Übersicht) – gilt systemisch für
   jede Phase. */
nav.seite .nav-event .gruppe:not(.event-titel){background:var(--kartetief);border:0;border-radius:8px;
  border-top:.5px solid rgba(255,255,255,.7);
  padding:8px 10px;margin:14px 0 4px}
.schatten{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35;display:none}
.schatten.an{display:block}
@media(min-width:900px){
  nav.seite{transform:none;box-shadow:none}
  .schatten{display:none!important}
}

/* Block eines fachlichen Hauptbereichs in der Navigation: eigene Gruppenüberschrift-Farbe,
   eigener Akzent für den aktiven Eintrag – dieselbe Farbe wie Kopf, Karten und Knöpfe des Bereichs.
   Die Phasenüberschrift selbst (Planung/Organisation/…) ist eine nicht klickbare Zwischenüberschrift,
   keine aktive Kachel und kein Button – Farbe und Position genügen als Kennzeichnung, kein
   zusätzliches Symbol davor. Der aktive Schritt darunter bleibt die zurückhaltendste der drei
   Aktiv-Stufen: sehr leichte Tönung statt einer gefüllten Fläche, ein dünner linker Farbstreifen
   sowie Text in Phasenfarbe – deutlich subtiler als ein aktiver globaler Hauptlink oder
   Event-Direktlink, damit die Hierarchie Eventname → Phase → Schritt nicht von der aktiven
   Unterseite dominiert wird. */
nav.seite .nav-bereich{margin-bottom:var(--abstand-xs)}
/* Formsprache wie bei den globalen Gruppenüberschriften (WERKZEUGE, ADMIN/VERWALTUNG):
   deckende Kartenfläche, feine neutrale Trennlinie, kein umlaufender Rahmen. Die Phasenfarbe
   bleibt am Eventblock und am aktiven Schritt, nicht noch einmal als milchige Fläche hinter
   PLANUNG/ORGANISATION/…. Hoher Kontrast bleibt unberührt: die eigene Regel dort
   (html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-* .gruppe) setzt ihren
   vollständig geschlossenen Rahmen explizit selbst. */
nav.seite .nav-bereich.bereich-planung .gruppe{color:var(--schwach);border:0;
  background:var(--kartetief);
  border-top:.5px solid rgba(255,255,255,.7);
  box-shadow:none}
nav.seite .nav-bereich.bereich-planung a.aktiv{background:rgba(var(--phase-planung-rgb),.08);box-shadow:inset 3px 0 0 var(--phase-planung)}
nav.seite .nav-bereich.bereich-planung a:hover:not(.aktiv){background:rgba(var(--phase-planung-rgb),.06)}
nav.seite .nav-bereich.bereich-organisation .gruppe{color:var(--schwach);border:0;
  background:var(--kartetief);
  border-top:.5px solid rgba(255,255,255,.7);
  box-shadow:none}
nav.seite .nav-bereich.bereich-organisation a.aktiv{background:rgba(var(--phase-organisation-rgb),.08);box-shadow:inset 3px 0 0 var(--phase-organisation)}
nav.seite .nav-bereich.bereich-organisation a:hover:not(.aktiv){background:rgba(var(--phase-organisation-rgb),.06)}
nav.seite .nav-bereich.bereich-durchfuehrung .gruppe{color:var(--schwach);border:0;
  background:var(--kartetief);
  border-top:.5px solid rgba(255,255,255,.7);
  box-shadow:none}
nav.seite .nav-bereich.bereich-durchfuehrung a.aktiv{background:rgba(var(--phase-durchfuehrung-rgb),.08);box-shadow:inset 3px 0 0 var(--phase-durchfuehrung)}
nav.seite .nav-bereich.bereich-durchfuehrung a:hover:not(.aktiv){background:rgba(var(--phase-durchfuehrung-rgb),.06)}
nav.seite .nav-bereich.bereich-nachbereitung .gruppe{color:var(--schwach);border:0;
  background:var(--kartetief);
  border-top:.5px solid rgba(255,255,255,.7);
  box-shadow:none}
nav.seite .nav-bereich.bereich-nachbereitung a.aktiv{background:rgba(var(--phase-nachbereitung-rgb),.08);box-shadow:inset 3px 0 0 var(--phase-nachbereitung)}
nav.seite .nav-bereich.bereich-nachbereitung a:hover:not(.aktiv){background:rgba(var(--phase-nachbereitung-rgb),.06)}

/* Vor der Anmeldung und auf reinen Vollbildseiten gibt es keine Seitenleiste – dann auch
   keinen leer reservierten Platz dafür lassen. */
body.ohne-nav nav.seite,body.ohne-nav .schatten{display:none!important}
body.ohne-nav .menuknopf{display:none!important}
@media(min-width:900px){
  body.ohne-nav header.app{padding-left:14px}
  body.ohne-nav main{margin-left:0}
}
/* Login: ruhig zentriert, ohne Sidebar-Platzhalter. */
body.ohne-nav main{min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center}
.anmelde-marke{text-align:center;margin:0 auto 22px;max-width:460px}
.anmelde-marke h1{margin:0 0 8px;font-size:1.875rem;font-weight:800;color:var(--marke);letter-spacing:-.01em}
.anmelde-logo{display:block;width:112px;height:112px;margin:0 auto;border-radius:24px}
/* Claim: bewusst zurückhaltend wie ein Footertext, keine Unterüberschrift – Gewicht/Größe/Farbe
   gezielt gesetzt, damit sie nicht von der h1- oder einer Fett-Regel geerbt werden. */
.anmelde-marke .claim{margin:4px 0 0;color:var(--schwach);font-size:.7812rem;font-weight:400;line-height:1.4}
@media(min-width:560px){.anmelde-marke .claim{white-space:nowrap}}

/* ---------- Grundbausteine ---------- */
main{max-width:1180px;padding:16px;margin:0 auto}
@media(min-width:900px){
  /* Die Navigation belegt links 250 px. Der Inhalt wird im verbleibenden
     Bereich mittig gesetzt, damit auf breiten Bildschirmen nicht alles links klebt. */
  main{margin-left:250px;margin-right:0;max-width:none;
       padding:20px max(26px, calc((100vw - 250px - 1180px) / 2)) 60px}
}
h2.abschnitt{font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;color:var(--schwach);
  margin:26px 0 10px;font-weight:700}
h2.abschnitt:first-child{margin-top:4px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;overflow:hidden;margin-bottom:16px}
/* Formular-Karte mit direkt eingebetteten Feldern (z. B. Veranstaltungsort-Panel): eigene Innenabstände. */
.karte.vo-karte{padding:14px 16px}
.karte.vo-karte>.reihe:last-child{margin-bottom:0}
.karte>h3{margin:0;padding:13px 16px 3px;font-size:.7812rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--schwach);font-weight:700}
.zeile{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--linie);align-items:flex-start}
.zeile:first-of-type{border-top:0}
.zeile.klick{cursor:pointer}
.zeile.klick:hover{background:var(--neutralbg)}
/* Als Link genutzte Listenzeile (Übersicht → Detail): ganze Zeile klickbar, Pfeil rechts. */
a.zeile-link{text-decoration:none;color:inherit;align-items:center}
a.zeile-link:hover{background:var(--neutralbg)}
a.zeile-link .karten-pfeil{margin-left:auto;opacity:.5;flex:none}
.wachs{flex:1;min-width:0}
.leer{padding:22px 16px;text-align:center;color:var(--schwach);font-size:.9375rem}
.mini{font-size:.8125rem;color:var(--schwach)}
/* Nebenlinks (Datenschutz, Impressum, „ohne Konto“ …) wie in der Fußzeile von fullboremedicine.com: klein,
   grau, nicht unterstrichen; erst beim Überfahren dunkler und unterstrichen (Gründer, 18.10.2026). */
.mini a,a.nebenlink{color:inherit;text-decoration:none}
/* Verlauf einer Nachricht an den Betreiber wie ein Chat (nachricht.js): eigene rechts, Betreiber links;
   die Zeile über jeder Blase sagt, von wem sie ist – die Farbe allein trägt nichts. */
.verlauf{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.blase{max-width:min(560px,88%);padding:10px 13px;border:1px solid var(--karterand);border-radius:14px;background:var(--karte)}
.blase.eigen{align-self:flex-end;background:var(--neutralbg);border-bottom-right-radius:4px}
.blase.betreiber{align-self:flex-start;border-bottom-left-radius:4px;border-left:3px solid var(--betont)}
.blase-kopf{font-size:.8125rem;color:var(--schwach);margin-bottom:4px}
.blase-text{white-space:pre-wrap;overflow-wrap:anywhere}
.mini a:hover,a.nebenlink:hover{color:var(--text);text-decoration:underline}
.mini a:focus-visible,a.nebenlink:focus-visible{outline:2px solid var(--fokus);outline-offset:2px;border-radius:4px}
.stark{font-weight:700}
.rechts{margin-left:auto}
.reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.trenn{border-top:1px solid var(--linie)}

/* Kennzahlen */
.notfall-knopf{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:52px;padding:12px 16px;font-size:1rem;font-weight:700;border-radius:12px;
  border:2px solid var(--stop);background:var(--stopbg);color:var(--stop);cursor:pointer}
.notfall-knopf:hover{filter:brightness(.97)}
.notfall-knopf:focus-visible{outline:3px solid var(--betont);outline-offset:2px}
.notfall-knopf:disabled{opacity:.55;cursor:not-allowed;filter:none}
.notfall-knopf.lage{border-color:var(--warn);background:var(--warnbg);color:var(--warn)}
html[data-farben="cud"] .notfall-knopf.lage{border-color:var(--betont);background:var(--okbg);color:var(--betont)}
.notfall-aktionen{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){.notfall-aktionen{grid-template-columns:1fr 1fr}}
/* Operativer Aktionsbereich (SOP/Lage) als eigener, klar umrandeter Block: Aktionszeile oben,
   Erläuterung darunter mit deutlichem Abstand statt direkt aneinandergequetscht. */
.notfall-leiste{background:var(--kartetief);border:1px solid var(--linie);border-radius:12px;
  padding:var(--abstand-md) var(--abstand-md) var(--abstand-sm);margin-bottom:var(--abstand-lg)}
.notfall-erklaerung{margin-top:var(--abstand-md);text-align:center}
.lage-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin:0 0 12px;
  border:2px solid var(--stop);background:var(--stopbg);color:var(--stop);border-radius:12px}
.lage-banner.offline{border-color:var(--warn);background:var(--warnbg);color:var(--warn)}
.lage-banner-zeichen{font-size:1.375rem;font-weight:800;line-height:1.1;flex:none}
.lage-banner-meldung{font-weight:700;margin-top:4px;white-space:pre-wrap}
.lage-banner-aktionen{display:flex;flex-direction:column;gap:6px;flex:none}
.lage-banner .stark,.lage-banner .mini{color:inherit}
html[data-farben="cud"] .lage-banner{border-color:var(--betont);background:var(--warnbg);color:var(--betont)}
.lage-venue-warn{margin-left:6px}
html[data-farben="cud"] .notfall-knopf{border-color:var(--betont);background:var(--warnbg);color:var(--betont)}
.lage-fix{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0 10px;margin-bottom:8px}
/* Erreichbarkeits-Checkliste: Statusfarbe am linken Rand jeder Zeile (mit Text/Auswahl, nie nur Farbe). */
.zeile.cp-vorhanden{box-shadow:inset 4px 0 0 var(--ok)}
.zeile.cp-fehlt{box-shadow:inset 4px 0 0 var(--stop)}
.zeile.cp-nicht_relevant{box-shadow:inset 4px 0 0 var(--neutral)}
.zeile.cp-offen{box-shadow:inset 4px 0 0 var(--warn)}
/* Kennzahlengruppe: kompakte, thematisch zusammengehörige Kacheln in einer Reihe statt riesiger
   Vollbreiten-Rechtecke untereinander. Eine optionale Titelzeile benennt die Gruppe (z. B.
   „Personal“, „Backup“, „Struktur“), damit die Zugehörigkeit nicht nur durch Nähe entsteht. */
.kachelgruppe{margin-bottom:var(--abstand-lg)}
.kachelgruppe-titel{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--schwach);margin:0 0 6px 2px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--abstand-sm);margin-bottom:var(--abstand-lg)}
.kachelgruppe .kacheln{margin-bottom:0}
/* Mehrere kleine Kennzahlengruppen (z. B. Personal / Backup / Struktur) nebeneinander statt
   untereinander, wenn jede Gruppe nur wenige Werte hat. */
.kachelgruppen-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--abstand-md);margin-bottom:var(--abstand-lg)}
.kachelgruppen-reihe .kachelgruppe{margin-bottom:0}
@media (max-width:420px){
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notfall-knopf{min-height:56px;font-size:1.0625rem}
  .lage-banner{flex-wrap:wrap}
  .lage-banner-aktionen{flex-direction:row;width:100%}
}

/* ---------- Lagebild: Session-Verlauf und Venue-Timeline ---------- */
.lage-kopf{font-size:.875rem;line-height:1.45;padding:10px 12px;margin:0 0 14px;
  background:var(--kartetief);border:1px solid var(--linie);border-radius:12px}
.session-verlauf-karte{padding:12px 14px}
.session-strip{display:flex;gap:10px;align-items:stretch;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:4px}
.session-strip-spalte{flex:0 0 auto;min-width:min(240px,78vw);max-width:320px;
  display:flex;flex-direction:column;gap:8px;scroll-snap-align:start}
.session-strip-spalte.gegenwart{min-width:min(280px,86vw);max-width:380px}
.session-strip-jetzt,.timeline-jetzt{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;
  justify-content:center;width:28px;margin:0 2px;border-left:2px dashed var(--betont);position:relative}
.session-strip-jetzt span,.timeline-jetzt span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--betont)}
.session-scroll{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;padding-bottom:4px;max-width:100%}
.session-karte{display:block;flex:0 0 auto;width:min(260px,78vw);padding:12px 14px;
  border:1.5px solid var(--linie);border-radius:12px;background:var(--karte);color:inherit;
  text-decoration:none;scroll-snap-align:start;min-height:88px}
.session-karte:hover{border-color:var(--schwach)}
.session-karte:focus-visible{outline:3px solid var(--betont);outline-offset:2px}
.session-karte.dominant{width:min(300px,86vw);border-width:2px;border-color:var(--betont);
  box-shadow:0 0 0 1px var(--betont);background:var(--kartetief)}
.session-karte.kompakt{width:min(200px,70vw);opacity:.92;min-height:72px;padding:10px 12px}
.session-karte-kopf{margin-bottom:6px}
.session-zeit{margin:2px 0 4px}
.session-leer,.session-ohne{color:var(--schwach);padding:8px 2px}
.venue-timeline{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.venue-zeile{display:flex;align-items:stretch;gap:0;background:var(--karte);border:1px solid var(--linie);
  border-radius:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.venue-zeile-fix{position:sticky;left:0;z-index:2;flex:0 0 min(220px,42vw);min-width:160px;
  background:var(--karte);padding:12px;border-right:1px solid var(--linie);box-shadow:2px 0 6px rgba(0,0,0,.04)}
.venue-zeile-timeline{flex:1 1 auto;min-width:0;padding:12px 12px 12px 0}
.venue-zeile .timeline-scroll,.venue-zeile .session-scroll{overflow:visible;max-width:none}
.timeline-scroll{align-items:stretch;min-width:min-content}
.timeline-scroll .session-strip-jetzt,.timeline-scroll .timeline-jetzt{min-height:88px}
@media (max-width:720px){
  .venue-zeile{flex-direction:column;overflow-x:visible}
  .venue-zeile-fix{position:static;flex:none;width:auto;min-width:0;border-right:0;
    border-bottom:1px solid var(--linie);box-shadow:none;padding-bottom:10px}
  .venue-zeile-timeline{padding:8px 12px 12px}
  /* Auf Desktop scrollt die ganze Zeile (.venue-zeile) horizontal, darum bleibt die Zeitleiste
     selbst ohne eigenen Scrollrahmen und wächst auf ihre volle Inhaltsbreite (Zeile 246/247).
     Sobald die Zeile mobil untereinander steht, braucht die Zeitleiste ihren eigenen
     horizontalen Scrollrahmen zurück – dafür muss sie sich auch wieder auf die verfügbare
     Breite einschränken lassen (min-width:min-content sonst weiter wirksam), sonst läuft sie
     über die Bildschirmbreite hinaus, statt intern zu scrollen. */
  .venue-zeile .timeline-scroll,.venue-zeile .session-scroll{overflow-x:auto;max-width:100%;min-width:0}
  .session-strip-jetzt span,.timeline-jetzt span{writing-mode:horizontal-tb;transform:none;
    padding:0 6px;font-size:.75rem}
  .session-strip-jetzt,.timeline-jetzt{width:auto;min-width:52px;border-left:0;
    border-bottom:2px dashed var(--betont);align-self:center;min-height:0;padding:6px 0}
}
@media (max-width:420px){
  .session-karte,.session-karte.dominant,.session-karte.kompakt{width:min(280px,85vw)}
  .lage-kopf{font-size:.8438rem}
}
.kachel{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:10px 12px;min-width:0}
/* Vier gleich breite, klickbare Kennzahl-Kacheln (Eventübersicht). */
.kacheln-vier{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--abstand-md);margin-bottom:var(--abstand-lg)}
@media(min-width:760px){.kacheln-vier{grid-template-columns:repeat(4,1fr)}}
a.kachel-link{display:block;text-decoration:none;color:inherit}
a.kachel-link:hover{border-color:var(--betont);background:var(--neutralbg)}
.kachel .wert{font-size:1.3125rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.kachel .beschr{font-size:.7188rem;color:var(--schwach);margin-top:3px;line-height:1.3}

/* Marken */
.p{font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;display:inline-block;
  border:1.5px solid currentColor}
/* Abstand zwischen Titeltext und direkt folgendem Statuschip – systemisch für jede Zeile, die
   einen Titel und eine Marke nebeneinander zeigt (nicht nur die Planungsübersicht). */
.stark .p,.abschnitt .p{margin-left:8px}
.p-ok{background:var(--okbg);color:var(--ok)}
.p-info{background:var(--infobg);color:var(--info)}
.p-warn{background:var(--warnbg);color:var(--warn)}
.p-stop{background:var(--stopbg);color:var(--stop)}
.p-neu{background:var(--neutralbg);color:var(--neutral)}
.p-neutral{background:var(--neutralbg);color:var(--neutral)}
/* Als Link genutzte Pillen (klickbare Kennzahlen/Warnungen): kein Unterstrich, klar antippbar. */
a.p{text-decoration:none;cursor:pointer}
a.p:hover{filter:brightness(1.12)}
.warnleiste{flex-wrap:wrap;gap:8px;align-items:center}
/* In einem farbigen Hinweis (gut/warn) sollen Links und Marken nicht in Link-Blau leuchten. */
.hinweis .p{vertical-align:middle}
.hinweis.gut a,.hinweis.warn a,.hinweis.stop a{color:inherit;text-decoration:underline}
/* Phasenmarken: eigene Farbfamilie, damit „in Durchführung“ nie wie ein Alarm (p-stop) aussieht
   und „in Organisation“/„in Planung“ nicht wie ein allgemeiner Status (p-ok/p-warn). Gleiche
   Box wie alle anderen Marken, darum immer exakt auf gleicher Höhe wie andere Badges einer Zeile. */
.p-phase-planung{background:rgba(var(--phase-planung-rgb),.14);color:var(--phase-planung)}
.p-phase-organisation{background:rgba(var(--phase-organisation-rgb),.14);color:var(--phase-organisation)}
.p-phase-durchfuehrung{background:rgba(var(--phase-durchfuehrung-rgb),.16);color:var(--phase-durchfuehrung)}
.p-phase-nachbereitung{background:rgba(var(--phase-nachbereitung-rgb),.16);color:var(--phase-nachbereitung)}
/* Lokales Symbol für „in Planung“ (Geodreieck) – Text bleibt immer daneben sichtbar. */
.phase-icon{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;margin-right:2px}
.phase-icon svg{width:100%;height:100%;display:block}
/* Farbe ist nie die einzige Auskunft – jeder Zustand trägt zusätzlich ein Zeichen.
   Abschaltbar unter Darstellung. */
html[data-zeichen="ja"] .p-ok::before{content:"✓ "}
html[data-zeichen="ja"] .p-stop::before{content:"✕ "}
html[data-zeichen="ja"] .p-info::before{content:"💡 "}
html[data-zeichen="ja"] .p-warn::before{content:"! "}
/* „dringend" teilt sich die Farbe mit „Fehler" (Rotviolett, s. u.), damit auch bei
   Rot-Grün-Schwäche beides hell und farbig bleibt. Weil die Farbe gleich ist, MUSS das
   Zeichen es unterscheiden: Fehler bleibt ✕, dringend bekommt stattdessen ein Ausrufezeichen. */
html[data-zeichen="ja"] .p-stop.dringend::before{content:"! "}
/* Der neutrale Hinweis-Marker („Hinweis" in der Vorschau unter Darstellung) bekommt
   dieselbe Glühbirne wie „Info" – p-neu bleibt sonst überall ohne Zeichen, das ist hier
   eine gezielte Ausnahme, keine allgemeine Regel für die Farbe. */
html[data-zeichen="ja"] .p-neu.tipp::before{content:"💡 "}
/* Reine Beschriftungen tragen kein Zustandszeichen – nur echte Zustände. */
.p.rein::before{content:none!important}
.balken{height:5px;border-radius:3px;background:var(--neutralbg);margin-top:9px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--ok)}

/* Planungs-Fußnavigation: Aktionszeile (links Speichern, ganz rechts Weiter, Hinweis links
   daneben). Fortschritt knapp darunter, mittig, ohne großen Leerraum dazwischen. */
.planungsleiste{margin-top:28px;padding:16px 0 8px;border-top:1px solid var(--linie)}
.planungsleiste-aktionen{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.planungsleiste .aktion-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.planungsleiste .aktion-rechts{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
  justify-content:flex-end;margin-left:auto;min-width:0}
.planungsleiste .weiter-grund{font-size:.7812rem;color:var(--schwach);line-height:1.35;text-align:right;
  white-space:nowrap}
.planungsleiste .aktion-rechts .haupt{flex:none}
.planungsleiste .fortschritt{max-width:240px;margin:14px auto 0;text-align:center}
.planungsleiste .fortschritt .balken{margin-top:0}
.planungsleiste .fortschritt .mini{margin-top:10px;color:var(--schwach)}
@media(max-width:640px){
  .planungsleiste-aktionen{flex-direction:column;align-items:stretch;gap:12px}
  .planungsleiste .aktion-links{justify-content:flex-start}
  .planungsleiste .aktion-rechts{margin-left:0;flex-direction:column;align-items:stretch}
  .planungsleiste .aktion-rechts .haupt{width:100%}
  .planungsleiste .weiter-grund{white-space:normal;text-align:left}
}

/* Knöpfe. Die primäre Aktion trägt die Farbe des fachlichen Hauptbereichs, in dem man sich
   gerade befindet (per html[data-bereich] gesetzt) – auf globalen/neutralen Seiten die
   neutrale Markenfarbe. Zerstörerische Aktionen und echte Alarme bleiben eigene Farben. */
button,.knopf{font:inherit;border:1px solid var(--linie);background:var(--karte);color:var(--text);
  padding:9px 14px;border-radius:10px;cursor:pointer;font-size:.9062rem;font-weight:600;text-decoration:none;
  display:inline-block;text-align:center}
button:hover,.knopf:hover{background:var(--neutralbg)}
button.haupt,.knopf.haupt{background:var(--marke);border-color:var(--marke);color:#fff}
button.haupt:hover{filter:brightness(1.12)}
html[data-bereich="planung"] button.haupt,html[data-bereich="planung"] .knopf.haupt{background:var(--phase-planung-fill);border-color:var(--phase-planung-fill)}
html[data-bereich="organisation"] button.haupt,html[data-bereich="organisation"] .knopf.haupt{background:var(--phase-organisation-fill);border-color:var(--phase-organisation-fill)}
html[data-bereich="durchfuehrung"] button.haupt,html[data-bereich="durchfuehrung"] .knopf.haupt{background:var(--phase-durchfuehrung-fill);border-color:var(--phase-durchfuehrung-fill)}
html[data-bereich="nachbereitung"] button.haupt,html[data-bereich="nachbereitung"] .knopf.haupt{background:var(--phase-nachbereitung-fill);border-color:var(--phase-nachbereitung-fill)}
button.klein{padding:6px 10px;font-size:.8125rem;border-radius:8px}
button.gefahr{color:var(--stop);border-color:var(--stopbg)}
button:disabled{opacity:.5;cursor:not-allowed}
/* Event-Aktionsbuttons (Admin/Verwaltung → Events, aktive Liste und Archiv): eine gemeinsame
   Klasse statt individueller Breiten je Beschriftung, damit „Öffnen“/„Archivieren“/„Löschen“
   bzw. „Öffnen“/„Wiederherstellen“/„Endgültig löschen“ innerhalb einer Zeile gleich breit, gleich
   hoch und gleich beabstandet sind – auch wenn „Löschen“ zusätzlich rot (.gefahr) ist. Archiv hat
   eine eigene, größere Mindestbreite, weil dessen Beschriftungen länger sind. */
.aktion-event-gruppe{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.zeile .aktion-event{padding:8px 14px;font-size:.8438rem;border-radius:8px;min-width:112px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
.zeile .aktion-event-gruppe.archiv .aktion-event{min-width:172px}
:focus-visible{outline:2px solid var(--betont);outline-offset:2px}

/* Formulare */
label.feld{display:block;margin-bottom:var(--abstand-md);font-size:.8438rem;color:var(--schwach);font-weight:600}
label.feld>span{display:block;margin-bottom:5px}
/* Zeichen, nicht Farbe: der Stern steht im Label und in der Legende (* = Pflichtangabe). */
.pflicht-stern{font-weight:700;color:var(--text);margin-left:.12em}
input,select,textarea{font:inherit;font-size:1rem;width:100%;padding:10px 12px;border:1px solid var(--linie);
  border-radius:10px;background:var(--feld);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--betont);outline-offset:-1px}
textarea{min-height:90px;resize:vertical}
/* Keine Spinner-Pfeile an Zahlenfeldern – getippt wird ohnehin. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="range"]::-webkit-slider-thumb{cursor:pointer}
.zwei{display:grid;grid-template-columns:1fr;gap:0 14px;align-items:stretch}
@media(min-width:620px){.zwei{grid-template-columns:1fr 1fr}}
/* Zwei- und Dreispalter: die Eingabezeile sitzt am unteren Rand der Zelle.
   Sonst rutscht das kürzere Feld nach oben, sobald der Hinweistext daneben
   umbricht – die Eingaben müssen in einer Reihe auf gleicher Höhe liegen. */
@media(min-width:620px){
  .zwei>.feld,.drei>.feld{display:flex;flex-direction:column}
  .zwei>.feld>:is(input,select,textarea,.reihe,.datum-zeit-paar),
  .drei>.feld>:is(input,select,textarea,.reihe,.datum-zeit-paar){margin-top:auto}
  /* .oben: Eingaben oben ausrichten (wenn eine Zelle wegen langem Hinweis viel höher ist,
     sollen die kurzen Felder nicht nach unten fallen). */
  .zwei.oben>.feld>:is(input,select,textarea,.reihe),
  .drei.oben>.feld>:is(input,select,textarea,.reihe),
  .zwei.oben>.feld,.drei.oben>.feld{margin-top:0;justify-content:flex-start}
}
/* Datum+Uhrzeit als zusammengehöriges, aber klar bedienbares Control-Paar (statt eines einzelnen
   datetime-local-Feldes) – für Event-Beginn/-Ende in Neuanlage und Bearbeitung. */
.datum-zeit-feld{display:block;margin-bottom:var(--abstand-md);font-size:.8438rem;color:var(--schwach);font-weight:600}
.datum-zeit-feld>span{display:block;margin-bottom:5px}
.datum-zeit-paar{display:flex;gap:8px}
.datum-zeit-paar input[type="date"]{flex:1.3}
.datum-zeit-paar input[type="time"]{flex:1}
.drei{display:grid;grid-template-columns:1fr;gap:0 14px;align-items:stretch}
@media(min-width:620px){.drei{grid-template-columns:1fr 1fr 1fr}}
/* Unabhängige Ja/Nein-Fragen (Eckdaten, M): eigene kleine Blöcke statt optisch an das
   darüberliegende Select angehängt zu wirken. Eigenes Label, eigener vertikaler Rhythmus. */
.bool-fragen{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--abstand-lg);padding-top:var(--abstand-lg);
  border-top:1px solid var(--linie)}
.bool-frage{background:var(--feld);border:1px solid var(--linie);border-radius:10px;padding:10px 14px;flex:1 1 220px}
.bool-frage .haken{margin-bottom:0}
label.haken{display:flex;gap:9px;align-items:flex-start;font-size:.9062rem;font-weight:500;
  color:var(--text);margin-bottom:10px;cursor:pointer}
label.haken input{width:auto;flex:none;margin-top:3px}

/* Dialog */
.ueberlagerung{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;
  align-items:flex-end;justify-content:center;padding:0}
@media(min-width:700px){.ueberlagerung{align-items:center;padding:24px}}
.dialog{background:var(--karte);width:100%;max-width:660px;max-height:92vh;overflow-y:auto;
  border-radius:16px 16px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom) + 18px)}
@media(min-width:700px){.dialog{border-radius:16px}}
.dialog h3{margin:0 0 14px;font-size:1.125rem}
.dialogfuss{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* Meldungen in drei Stufen. Farbe ist nie die einzige Auskunft:
   Info (blau, Vorgabe) – Erklärung, Vorgabe, nächster Schritt.
   Warnung (gelb, .warn) – etwas Unerledigtes, die Leitung soll es sehen.
   Fehler (rot, .stop / .fehler) – fehlgeschlagen oder gefährlich. */
.hinweis,.hinweis.info{background:var(--infobg);color:var(--info);border:1px solid var(--info);border-radius:10px;
  padding:11px 13px;font-size:.875rem;margin-bottom:var(--abstand-lg)}
/* Im Dunkelmodus (Standard und Farbsehschwäche) genügt die blaue Kontur mit blauem Text – der
   Volltonhintergrund wirkt auf dunklem Grund unnötig kräftig. Hell und Hoher Kontrast bleiben
   unverändert, dort trägt die Fläche selbst den nötigen Kontrast (siehe „Hoher Kontrast" oben:
   erzwingt ohnehin einen hellen Grund, deshalb hier ausgenommen). */
html[data-modus="dunkel"]:not([data-farben="kontrast"]) .hinweis,
html[data-modus="dunkel"]:not([data-farben="kontrast"]) .hinweis.info{background:none}
.hinweis.warn{background:var(--warnbg);color:var(--warn);border-color:var(--warn)}
.hinweis.stop,.hinweis.fehler{background:var(--stopbg);color:var(--stop);border-color:var(--stop)}
.hinweis.gut{background:var(--okbg);color:var(--ok);border-color:var(--ok)}
.hinweis .p{margin-right:8px}
/* Marke links, Text rechts: umbrechende Zeilen bleiben auf Höhe des Fließtexts,
   nicht unter der Marke. */
.hinweis:has(> .p:first-child){display:flex;align-items:flex-start;gap:8px}
.hinweis:has(> .p:first-child)>.p:first-child{flex:none;margin-right:0}
.hinweis-text{flex:1;min-width:0}
/* Planungsassistent: gleicher Abstand zwischen Legende, Warnfeld und Navigation. */
.planungsfuss{display:flex;flex-direction:column;gap:18px;margin-top:18px;margin-bottom:24px}
.planungsfuss .hinweis{margin-bottom:0}
.planungsfuss .mini{margin:0}
/* Visuell sekundärer Hinweis – neben einem Haupthinweis, ohne dessen Gewicht zu haben
   (z. B. Eckdaten: Haupthinweis zur Bemessungsgrundlage + separater Hinweis zu Altfassungen). */
.hinweis.leise{background:var(--karte);color:var(--schwach);border-color:var(--linie);font-size:.8125rem}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:80;background:var(--text);
  color:var(--bg);padding:12px 18px;border-radius:12px;font-size:.9062rem;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.3);max-width:90vw}

/* Tabelle */
.tabellenrahmen{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.875rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linie);white-space:nowrap}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--schwach)}
tr.fehler td{background:var(--stopbg)}
tr.hinweis td{background:var(--infobg)}

/* Kompetenzmatrix in den Einstellungen: jede Regel ein Block, am Handy untereinander
   (.drei ist schon einspaltig unter 620 px). */
.kompetenzregel{padding:12px 0;border-bottom:1px solid var(--linie)}
.kompetenzregel:first-child{padding-top:4px}
.kompetenzregel:last-child{border-bottom:0}
.kompetenzregel .haken{margin:8px 0 12px}

/* Kompetenzmatrix: Zeilen = Stufen, Spalten = Rollen. Häkchen plus Text (ja/–), nie nur Farbe. */
.kompetenzraster th,.kompetenzraster td{white-space:nowrap;vertical-align:middle}
.kompetenzraster th[scope="row"]{text-align:left;font-weight:600;text-transform:none;letter-spacing:0;font-size:.875rem;color:var(--text)}
.kompetenzzelle{text-align:center}
.kompetenzzelle label{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer;min-height:44px;padding:4px 6px}
.kompetenzzelle input{width:20px;height:20px}
.kompetenzzeichen{font-size:.8125rem;font-weight:700;color:var(--text)}

/* Slots */
.slot{padding:12px 16px;border-top:1px solid var(--linie)}
.slot:first-of-type{border-top:0}
.slot.backup{padding-left:32px;background:linear-gradient(90deg,var(--neutralbg) 0 4px,transparent 4px)}
.slotkopf{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.slotname{font-weight:700;font-size:.9688rem}
.slotzeit{font-size:.8438rem;color:var(--schwach);font-variant-numeric:tabular-nums}
.slotperson{font-size:.9062rem;margin-top:3px}
.slotperson.leer{padding:0;text-align:left;color:var(--warn);font-weight:600;font-size:.875rem}
.slotwerkzeug{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
/* Am Handy bricht die Zeile um, statt den Text auf ein Wort je Zeile zu quetschen. */
@media(max-width:640px){
  .zeile{flex-wrap:wrap}
  .zeile>.slotwerkzeug{width:100%;margin-left:0}
  .zeile>.rechts{margin-left:0}
}

/* Startmaske */
.startbereich{max-width:1120px;margin:0 auto;padding-top:4px}
.startraster{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px;align-items:stretch}
@media(min-width:820px){.startraster.oben{grid-template-columns:2fr 1fr}}
.startraster.voll{grid-template-columns:1fr}
.startkarte.gross h3{font-size:1.5rem}
.startkarte.gross{padding:22px 24px}
.startkarte.flach{padding:14px 18px 44px;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;height:100%;min-height:0;box-sizing:border-box}
.startkarte.flach h3{font-size:1.0625rem;margin:0 0 6px}
.startkarte.flach .beschr{margin:0}
.startkarte.mehr{align-items:flex-start;justify-content:flex-start;min-height:112px;padding-bottom:44px}
@media(min-width:820px){.startraster.unten,.startraster.funktionen{grid-template-columns:1fr 1fr 1fr}}
@media(min-width:560px) and (max-width:819px){.startraster.unten,.startraster.funktionen{grid-template-columns:1fr 1fr}}
/* Vier Phasen als zusammenhängender Satz */
.startraster.phasen{grid-template-columns:1fr}
@media(min-width:720px){.startraster.phasen{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.startraster.phasen{grid-template-columns:1fr 1fr 1fr 1fr}}

.startkarte{position:relative;display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  border-radius:16px;padding:18px 20px;border:1px solid transparent;
  background:linear-gradient(180deg,var(--karte) 0%,var(--kartetief) 100%);
  color:var(--text);box-shadow:0 1px 0 var(--linie),0 6px 16px rgba(0,0,0,.07);
  transition:transform .1s ease,box-shadow .12s ease,background .12s ease;box-sizing:border-box}
.startkarte:hover{transform:translateY(-2px);box-shadow:0 2px 0 var(--linie),0 12px 26px rgba(0,0,0,.13)}
.startkarte:active{transform:translateY(0);box-shadow:0 1px 0 var(--linie),0 4px 10px rgba(0,0,0,.1)}
.startkarte:focus-visible{outline:3px solid var(--betont);outline-offset:2px}
.startkarte h3{margin:0 0 5px;font-size:1.25rem;font-weight:700}
.startkarte .beschr{font-size:.875rem;color:var(--schwach);line-height:1.45}
/* Pfeil als Kreisknopf: Glyphe in --text, damit sie in jedem Modus gegen die eigene Kartenfläche
   steht (Dunkelmodus hell wie die Phasenkarten, Hellmodus dunkel). Dieselben Deckkraftwerte wie
   .startkarte.weg .pfeil, damit zuletzt geöffnete Events, „weitere anzeigen“ und die unteren
   Funktionskarten denselben Ruhe- und Hover-Pfeil haben wie Planung/Organisation/Nachbereitung.
   Farbe muss beim Hover mitgehen – sonst bleibt eine graue Glyphe auf der helleren Kreisfläche
   und der Pfeil verschwindet. */
.startkarte .pfeil{position:absolute;right:14px;bottom:14px;width:30px;height:30px;line-height:29px;
  text-align:center;font-size:1rem;border-radius:50%;color:var(--text);
  background:color-mix(in srgb,var(--text) 9%,transparent);
  border:1.5px solid color-mix(in srgb,var(--text) 24%,transparent);
  box-sizing:border-box;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease}
.startkarte:hover .pfeil,
.startkarte:focus-visible .pfeil{color:var(--text);
  background:color-mix(in srgb,var(--text) 28%,transparent);
  border-color:color-mix(in srgb,var(--text) 55%,transparent);transform:translateX(1px)}

/* Die vier Phasen: dunkles Grunddesign, kontrollierter Akzent je Phase */
.startkarte.weg{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  height:100%;min-height:236px;padding:18px 20px 48px;box-sizing:border-box;
  background:linear-gradient(180deg,#1c2430 0%,#121820 100%);border-color:#0e141c;color:#fff}
.startkarte.weg h3{color:#fff;margin:0 0 8px}
.startkarte.weg .beschr{color:rgba(255,255,255,.88);margin:0;flex:0 1 auto}
/* Ruhezustand des Pfeils bewusst so zurückhaltend wie bei den flachen Funktionskarten
   (Importieren/Exportieren, Alle Veranstaltungen, Darstellung: dünner Ring, sehr helle Füllung,
   optisch sekundär) – vorher war der Pfeil auf den aktiven Phasenkarten schon im Ruhezustand
   kräftig gefüllt (.16/.32) und wirkte dadurch wichtiger als der eigentliche Karteninhalt. Erst
   beim Hover ODER Tastaturfokus der GESAMTEN Karte (:focus-visible auf dem button.startkarte
   selbst, der Pfeil ist nur ein dekoratives aria-hidden-Kind darin, keine eigene Fokusziel) wird
   der Pfeil deutlich hervorgehoben – eine einzige gemeinsame Regel für alle vier Phasen statt
   Einzelfällen, die Phasenfarben selbst bleiben unangetastet. */
.startkarte.weg .pfeil{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)}
.startkarte.weg:hover .pfeil,
.startkarte.weg:focus-visible .pfeil{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55)}
.startkarte.weg .nummer,.bereich-marke .nummer{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28)}
.startkarte.weg .nummer{margin-bottom:12px}
.startkarte.weg.ruhend{background:linear-gradient(180deg,var(--neutralbg) 0%,var(--karte) 100%);
  border-color:var(--linie);color:var(--text)}
.startkarte.weg.ruhend h3{color:var(--text)}
.startkarte.weg.ruhend .beschr{color:var(--schwach)}
.startkarte.weg.ruhend .pfeil{color:var(--schwach);background:rgba(var(--marke-rgb),.1);border-color:var(--linie)}
.startkarte.weg.ruhend:hover .pfeil,
.startkarte.weg.ruhend:focus-visible .pfeil{color:var(--schwach);background:rgba(var(--marke-rgb),.1);
  border-color:var(--linie);transform:none}
.startkarte.weg.ruhend .nummer{background:var(--neutralbg);color:var(--neutral);border-color:var(--linie)}

/* Phasenakzente: linker Rand + Nummerfarbe (nicht nur Farbe), aus den zentralen Bereichsfarben.
   Im Dunkelmodus bleibt das dunkle Grunddesign (Grafik-1-Rezept): Glow der Fill-Farbe auf #121820,
   weiße Schrift. Im Hellmodus steht weiter unten das helle Gegenstück – getönte Fläche, dunkle Schrift.
   Die „-fill“-Töne ändern sich zwischen Hell und Dunkel nicht, weil sie weiße Knopfschrift tragen. */
.startkarte.weg.phase-planung{border-left:4px solid var(--phase-planung-fill);
  background:linear-gradient(180deg,rgba(var(--phase-planung-fill-rgb),.32) 0%,#121820 100%);
  border-color:rgba(var(--phase-planung-fill-rgb),.55);border-left-color:var(--phase-planung-fill)}
.startkarte.weg.phase-planung .nummer,.bereich-marke.phase-planung .nummer{background:rgba(var(--phase-planung-fill-rgb),.4);border-color:rgba(var(--phase-planung-fill-rgb),.7)}
.startkarte.weg.phase-organisation{border-left:4px solid var(--phase-organisation-fill);
  background:linear-gradient(180deg,rgba(var(--phase-organisation-fill-rgb),.32) 0%,#121820 100%);
  border-color:rgba(var(--phase-organisation-fill-rgb),.55);border-left-color:var(--phase-organisation-fill)}
.startkarte.weg.phase-organisation .nummer,.bereich-marke.phase-organisation .nummer{background:rgba(var(--phase-organisation-fill-rgb),.4);border-color:rgba(var(--phase-organisation-fill-rgb),.7)}
.startkarte.weg.phase-durchfuehrung{border-left:4px solid var(--phase-durchfuehrung-fill);
  background:linear-gradient(180deg,rgba(var(--phase-durchfuehrung-fill-rgb),.32) 0%,#121820 100%);
  border-color:rgba(var(--phase-durchfuehrung-fill-rgb),.55);border-left-color:var(--phase-durchfuehrung-fill)}
.startkarte.weg.phase-durchfuehrung .nummer,.bereich-marke.phase-durchfuehrung .nummer{background:rgba(var(--phase-durchfuehrung-fill-rgb),.4);border-color:rgba(var(--phase-durchfuehrung-fill-rgb),.7)}
.startkarte.weg.phase-nachbereitung{border-left:4px solid var(--phase-nachbereitung-fill);
  background:linear-gradient(180deg,rgba(var(--phase-nachbereitung-fill-rgb),.32) 0%,#121820 100%);
  border-color:rgba(var(--phase-nachbereitung-fill-rgb),.55);border-left-color:var(--phase-nachbereitung-fill)}
.startkarte.weg.phase-nachbereitung .nummer,.bereich-marke.phase-nachbereitung .nummer{background:rgba(var(--phase-nachbereitung-fill-rgb),.4);border-color:rgba(var(--phase-nachbereitung-fill-rgb),.7)}
.startkarte.weg.ruhend.phase-planung,
.startkarte.weg.ruhend.phase-organisation,
.startkarte.weg.ruhend.phase-durchfuehrung,
.startkarte.weg.ruhend.phase-nachbereitung{background:linear-gradient(180deg,var(--neutralbg) 0%,var(--karte) 100%);
  border-color:var(--linie)}
.startkarte.weg.ruhend.phase-planung{border-left-color:var(--phase-planung-fill)}
.startkarte.weg.ruhend.phase-organisation{border-left-color:var(--phase-organisation-fill)}
.startkarte.weg.ruhend.phase-durchfuehrung{border-left-color:var(--phase-durchfuehrung-fill)}
.startkarte.weg.ruhend.phase-nachbereitung{border-left-color:var(--phase-nachbereitung-fill)}
/* Ruhende Phasen: Nummer ohne Phasenfarbe. Im Dunkelmodus dieselbe helle Kontur wie bei 1 und 2,
   sonst verschwindet der Ring auf dem dunklen Grund (die Hell-Variante bleibt grau, s. unten). */
.startkarte.weg.ruhend.phase-planung .nummer,
.startkarte.weg.ruhend.phase-organisation .nummer,
.startkarte.weg.ruhend.phase-durchfuehrung .nummer,
.startkarte.weg.ruhend.phase-nachbereitung .nummer{background:rgba(255,255,255,.18);color:#fff;
  border-color:rgba(255,255,255,.28)}

/* Hell: dasselbe Rezept wie Grafik 1, nur hell. Getönte Fläche statt Anthrazit, dunkle Schrift
   statt Weiß, farbiger linker Rand und farbige Nummer bleiben. Auch ruhende Phasen (3/4, solange
   noch keine Durchführung bzw. kein Abschluss da ist) behalten eine abgeschwächte Tönung –
   sonst wirken sie grau und „ohne Farbe“. data-modus="hell" setzt JS auch, wenn „Wie das Gerät“
   gewählt ist und das Betriebssystem hell ist. */
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg{color:var(--text);
  background:linear-gradient(180deg,#fff 0%,var(--kartetief) 100%);border-color:var(--linie)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg h3{color:var(--text)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg .beschr{color:var(--schwach)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg .pfeil{color:var(--text);
  background:color-mix(in srgb,var(--text) 9%,transparent);
  border-color:color-mix(in srgb,var(--text) 24%,transparent)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg:hover .pfeil,
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg:focus-visible .pfeil{
  color:var(--text);background:color-mix(in srgb,var(--text) 28%,transparent);
  border-color:color-mix(in srgb,var(--text) 55%,transparent)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.phase-planung{
  background:linear-gradient(165deg,color-mix(in srgb,var(--phase-planung) 38%,#fff) 0%,
    color-mix(in srgb,var(--phase-planung) 10%,#fff) 100%);
  border-color:color-mix(in srgb,var(--phase-planung) 40%,var(--linie));
  border-left-color:var(--phase-planung-fill)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.phase-planung .nummer,
html[data-modus="hell"]:not([data-farben="kontrast"]) .bereich-marke.phase-planung .nummer{
  background:var(--phase-planung-fill);color:#fff;border-color:color-mix(in srgb,var(--phase-planung-fill) 70%,#000)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.phase-organisation{
  background:linear-gradient(165deg,color-mix(in srgb,var(--phase-organisation) 38%,#fff) 0%,
    color-mix(in srgb,var(--phase-organisation) 10%,#fff) 100%);
  border-color:color-mix(in srgb,var(--phase-organisation) 40%,var(--linie));
  border-left-color:var(--phase-organisation-fill)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.phase-organisation .nummer,
html[data-modus="hell"]:not([data-farben="kontrast"]) .bereich-marke.phase-organisation .nummer{
  background:var(--phase-organisation-fill);color:#fff;border-color:color-mix(in srgb,var(--phase-organisation-fill) 70%,#000)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.phase-durchfuehrung{
  background:linear-gradient(165deg,color-mix(in srgb,var(--phase-durchfuehrung) 40%,#fff) 0%,
    color-mix(in srgb,var(--phase-durchfuehrung) 11%,#fff) 100%);
  border-color:color-mix(in srgb,var(--phase-durchfuehrung) 42%,var(--linie));
  border-left-color:var(--phase-durchfuehrung-fill)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.phase-durchfuehrung .nummer,
html[data-modus="hell"]:not([data-farben="kontrast"]) .bereich-marke.phase-durchfuehrung .nummer{
  background:var(--phase-durchfuehrung-fill);color:#fff;border-color:color-mix(in srgb,var(--phase-durchfuehrung-fill) 70%,#000)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.phase-nachbereitung{
  background:linear-gradient(165deg,color-mix(in srgb,var(--phase-nachbereitung) 38%,#fff) 0%,
    color-mix(in srgb,var(--phase-nachbereitung) 10%,#fff) 100%);
  border-color:color-mix(in srgb,var(--phase-nachbereitung) 40%,var(--linie));
  border-left-color:var(--phase-nachbereitung-fill)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.phase-nachbereitung .nummer,
html[data-modus="hell"]:not([data-farben="kontrast"]) .bereich-marke.phase-nachbereitung .nummer{
  background:var(--phase-nachbereitung-fill);color:#fff;border-color:color-mix(in srgb,var(--phase-nachbereitung-fill) 70%,#000)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend.phase-planung{
  background:linear-gradient(165deg,color-mix(in srgb,var(--phase-planung) 18%,#fff) 0%,#fff 100%);
  border-color:color-mix(in srgb,var(--phase-planung) 28%,var(--linie))}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend.phase-organisation{
  background:linear-gradient(165deg,color-mix(in srgb,var(--phase-organisation) 18%,#fff) 0%,#fff 100%);
  border-color:color-mix(in srgb,var(--phase-organisation) 28%,var(--linie))}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend.phase-durchfuehrung{
  background:linear-gradient(165deg,color-mix(in srgb,var(--phase-durchfuehrung) 20%,#fff) 0%,#fff 100%);
  border-color:color-mix(in srgb,var(--phase-durchfuehrung) 30%,var(--linie))}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend.phase-nachbereitung{
  background:linear-gradient(165deg,color-mix(in srgb,var(--phase-nachbereitung) 18%,#fff) 0%,#fff 100%);
  border-color:color-mix(in srgb,var(--phase-nachbereitung) 28%,var(--linie))}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend h3{color:var(--text)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend .beschr{color:var(--schwach)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend .nummer{background:var(--neutralbg);
  color:var(--neutral);border-color:var(--linie)}
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend .pfeil,
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend:hover .pfeil,
html[data-modus="hell"]:not([data-farben="kontrast"]) .startkarte.weg.ruhend:focus-visible .pfeil{
  color:var(--schwach);background:rgba(var(--marke-rgb),.1);border-color:var(--linie);transform:none}

.startkarte .nummer,.bereich-marke .nummer{width:28px;height:28px;border-radius:9px;background:var(--marke);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.9375rem;font-weight:700;
  flex:none;line-height:1;box-sizing:border-box}
.startkarte .nummer{margin:0 0 12px}
.startkarte.weg h3{margin:0 0 8px;line-height:1.25;min-height:1.25em;width:100%}
.startkarte.flach h3{line-height:1.25;min-height:1.25em;width:100%}
.startkarte.flach .beschr{width:100%}
.startkarte.mehr{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.startkarte.mehr .wert{font-size:2.125rem;font-weight:700;line-height:1;color:var(--marke)}
.startkopf{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--schwach);font-weight:700;margin:2px 0 8px 4px}
.startleer{border-radius:16px;padding:18px 20px;border:1px dashed var(--linie);background:var(--karte)}
.startleer h3{margin:0 0 5px;font-size:1.1875rem;font-weight:700}
.startleer .beschr{font-size:.875rem;color:var(--schwach)}
.typ-marke{font-size:.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--schwach);margin:0 0 6px;line-height:1.2}

.schritt{display:flex;gap:14px;padding:14px 16px;border-top:1px solid var(--linie);align-items:flex-start}
.schritt:first-of-type{border-top:0}
.schrittnr{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.875rem;background:var(--neutralbg);color:var(--neutral)}
.schritt.fertig .schrittnr{background:var(--okbg);color:var(--ok)}

.warnliste .zeile{align-items:flex-start}
.wtext{font-size:.9062rem}
.wtitel{font-weight:700;font-size:.9062rem}
.gedeckelt{max-width:760px}
.fuss{padding:24px 4px 60px;font-size:.7812rem;color:var(--schwach)}

/* ============================================================
   Darstellung: Schriftgröße, Farbmodus, hell/dunkel
   Eingestellt unter „Darstellung", gespeichert am Gerät.
   ============================================================ */

/* ---------- Schriftgröße ---------- */
/* Die Schriftgröße setzt nur die Grundschrift am Wurzelelement; alle Schriftgrößen stehen in rem
   und wachsen deshalb mit. Groß liegt in der Mitte zwischen Normal (16 px) und Sehr groß (26 px).
   Die Abstände (kompakt/weit) stehen am Ende der Datei. */
html{--skala:1;font-size:calc(16px * var(--skala))}
html[data-schrift="gross"]{--skala:1.3125}
html[data-schrift="sehrgross"]{--skala:1.625}

/* ---------- Hell und dunkel ausdrücklich ----------
   Steht seit Oktober 2026 oben bei den Farbwerten: :root ist hell, der Dunkelblock gilt nach
   Systemeinstellung (außer bei „Immer hell“) und bei „Immer dunkel“. */

/* ---------- Farbsehschwäche (Rot-Grün) ----------
   Palette nach Masataka Okabe und Kei Ito, Color Universal Design (2002),
   verbreitet durch Bang Wong, Nature Methods 2011.

   Nicht Grün ist das Problem, sondern Rot: es wird zu dunkel wahrgenommen und
   rutscht neben Orange. Deshalb bleibt „erledigt" grün und „offen" gelb –
   beides gut unterscheidbar –, und „dringend" wechselt auf Rotviolett (#CC79A7).
   Rotviolett hat einen Blauanteil und wird dadurch auch bei Rot-Grün-Schwäche
   hell und farbig gesehen; in Graustufen ist es heller als Gelb.

   Wichtig: hier werden nur die Bedeutungsfarben getauscht. Hintergrund, Schrift
   und Grautöne bleiben unangetastet, damit der Dunkelmodus dunkel bleibt. */
html[data-farben="cud"]{
  --betont:#0072B2;                    /* Blau statt Rot als Signalfarbe der Oberfläche */
  --rot:#0072B2;
  --ok:#0f7a3d;      --okbg:#d7f0e0;   /* erledigt bleibt grün */
  --warn:#6b5c00;    --warnbg:#F0E442; /* offen/Warnung: Gelb (Okabe/Ito) */
  --stop:#8f0050;    --stopbg:#fbdcee; /* dringend/Fehler: Rotviolett */
  --info:#0072B2;    --infobg:#d4eaf6; /* Info: Himmelblau (Okabe/Ito) */
}
@media (prefers-color-scheme: dark){
  html[data-farben="cud"]:not([data-modus="hell"]){
    --ok:#5fca8c;      --okbg:#153322;
    --warn:#F0E442;    --warnbg:#3d3300;
    --stop:#f49ad0;    --stopbg:#3d1030;
    --info:#56B4E9;    --infobg:#0d2c44;
    --betont:#56B4E9;  --rot:#0072B2;
  }
}
html[data-farben="cud"][data-modus="dunkel"]{
  --ok:#5fca8c;      --okbg:#153322;
  --warn:#F0E442;    --warnbg:#3d3300;
  --stop:#f49ad0;    --stopbg:#3d1030;
  --info:#56B4E9;    --infobg:#0d2c44;
  --betont:#56B4E9;  --rot:#0072B2;
}
/* CUD-Phasenkarten: dasselbe Rezept wie Standard (Glow auf dunklem Grund, nicht die ganze
   Fläche in Okabe-Ito-Vollfarbe – das wirkte grell). Akzente aus der Palette Blau / Blaugrün /
   Orange / Rotviolett. Ruhend bleibt getönt, sonst fehlen Phase 3 und 4 die Farbe. */
html[data-farben="cud"] .startkarte.weg.phase-planung{background:linear-gradient(180deg,rgba(0,114,178,.40) 0%,#121820 100%);
  border-color:rgba(86,180,233,.55);border-left-color:#56B4E9}
html[data-farben="cud"] .startkarte.weg.phase-planung .nummer,
html[data-farben="cud"] .bereich-marke.phase-planung .nummer{background:rgba(86,180,233,.45);border-color:#56B4E9;color:#fff}
html[data-farben="cud"] .startkarte.weg.phase-organisation{background:linear-gradient(180deg,rgba(0,158,115,.40) 0%,#121820 100%);
  border-color:rgba(0,158,115,.55);border-left-color:#009E73}
html[data-farben="cud"] .startkarte.weg.phase-organisation .nummer,
html[data-farben="cud"] .bereich-marke.phase-organisation .nummer{background:rgba(0,158,115,.45);border-color:#009E73;color:#fff}
html[data-farben="cud"] .startkarte.weg.phase-durchfuehrung{background:linear-gradient(180deg,rgba(230,159,0,.42) 0%,#121820 100%);
  border-color:rgba(230,159,0,.55);border-left-color:#E69F00}
html[data-farben="cud"] .startkarte.weg.phase-durchfuehrung .nummer,
html[data-farben="cud"] .bereich-marke.phase-durchfuehrung .nummer{background:rgba(230,159,0,.45);border-color:#E69F00;color:#fff}
html[data-farben="cud"] .startkarte.weg.phase-nachbereitung{background:linear-gradient(180deg,rgba(204,121,167,.40) 0%,#121820 100%);
  border-color:rgba(204,121,167,.55);border-left-color:#CC79A7}
html[data-farben="cud"] .startkarte.weg.phase-nachbereitung .nummer,
html[data-farben="cud"] .bereich-marke.phase-nachbereitung .nummer{background:rgba(204,121,167,.45);border-color:#CC79A7;color:#fff}
/* Ruhend wie im Standard: graue Fläche, gedämpfter Pfeil, Nummer ohne Phasenfüllung.
   Der farbige linke Rand bleibt, damit die Phase erkennbar ist. */
html[data-farben="cud"] .startkarte.weg.ruhend{background:linear-gradient(180deg,var(--neutralbg) 0%,var(--karte) 100%);
  border-color:var(--linie);color:var(--text)}
html[data-farben="cud"] .startkarte.weg.ruhend.phase-planung,
html[data-farben="cud"] .startkarte.weg.ruhend.phase-organisation,
html[data-farben="cud"] .startkarte.weg.ruhend.phase-durchfuehrung,
html[data-farben="cud"] .startkarte.weg.ruhend.phase-nachbereitung{
  background:linear-gradient(180deg,var(--neutralbg) 0%,var(--karte) 100%);border-color:var(--linie);color:var(--text)}
html[data-farben="cud"] .startkarte.weg.ruhend.phase-planung{border-left-color:#56B4E9}
html[data-farben="cud"] .startkarte.weg.ruhend.phase-organisation{border-left-color:#009E73}
html[data-farben="cud"] .startkarte.weg.ruhend.phase-durchfuehrung{border-left-color:#E69F00}
html[data-farben="cud"] .startkarte.weg.ruhend.phase-nachbereitung{border-left-color:#CC79A7}
html[data-farben="cud"] .startkarte.weg.ruhend h3{color:var(--text)}
html[data-farben="cud"] .startkarte.weg.ruhend .beschr{color:var(--schwach)}
html[data-farben="cud"] .startkarte.weg.ruhend .nummer{background:rgba(255,255,255,.18);color:#fff;
  border-color:rgba(255,255,255,.28)}
html[data-farben="cud"] .startkarte.weg.ruhend .pfeil,
html[data-farben="cud"] .startkarte.weg.ruhend:hover .pfeil,
html[data-farben="cud"] .startkarte.weg.ruhend:focus-visible .pfeil{
  color:var(--schwach);background:rgba(var(--marke-rgb),.1);border-color:var(--linie);transform:none}

/* CUD + Hell: Okabe-Ito-Töne auf heller Fläche, dunkle Schrift. */
html[data-farben="cud"][data-modus="hell"] .startkarte.weg{color:var(--text)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg h3{color:var(--text)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg .beschr{color:var(--schwach)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg .pfeil{color:var(--text);
  background:color-mix(in srgb,var(--text) 9%,transparent);
  border-color:color-mix(in srgb,var(--text) 24%,transparent)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.phase-planung{
  background:linear-gradient(165deg,color-mix(in srgb,#0072B2 36%,#fff) 0%,color-mix(in srgb,#0072B2 10%,#fff) 100%);
  border-color:color-mix(in srgb,#0072B2 40%,var(--linie));border-left-color:#0072B2}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.phase-planung .nummer,
html[data-farben="cud"][data-modus="hell"] .bereich-marke.phase-planung .nummer{background:#0072B2;color:#fff;border-color:#005a8d}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.phase-organisation{
  background:linear-gradient(165deg,color-mix(in srgb,#009E73 36%,#fff) 0%,color-mix(in srgb,#009E73 10%,#fff) 100%);
  border-color:color-mix(in srgb,#009E73 40%,var(--linie));border-left-color:#009E73}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.phase-organisation .nummer,
html[data-farben="cud"][data-modus="hell"] .bereich-marke.phase-organisation .nummer{background:#009E73;color:#fff;border-color:#00795a}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.phase-durchfuehrung{
  background:linear-gradient(165deg,color-mix(in srgb,#E69F00 38%,#fff) 0%,color-mix(in srgb,#E69F00 11%,#fff) 100%);
  border-color:color-mix(in srgb,#E69F00 42%,var(--linie));border-left-color:#E69F00}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.phase-durchfuehrung .nummer,
html[data-farben="cud"][data-modus="hell"] .bereich-marke.phase-durchfuehrung .nummer{background:#E69F00;color:#fff;border-color:#b47c00}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.phase-nachbereitung{
  background:linear-gradient(165deg,color-mix(in srgb,#CC79A7 36%,#fff) 0%,color-mix(in srgb,#CC79A7 10%,#fff) 100%);
  border-color:color-mix(in srgb,#CC79A7 40%,var(--linie));border-left-color:#CC79A7}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.phase-nachbereitung .nummer,
html[data-farben="cud"][data-modus="hell"] .bereich-marke.phase-nachbereitung .nummer{background:#CC79A7;color:#fff;border-color:#a85d88}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend.phase-planung{
  background:linear-gradient(165deg,color-mix(in srgb,#0072B2 18%,#fff) 0%,#fff 100%);
  border-color:color-mix(in srgb,#0072B2 28%,var(--linie));color:var(--text)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend.phase-organisation{
  background:linear-gradient(165deg,color-mix(in srgb,#009E73 18%,#fff) 0%,#fff 100%);
  border-color:color-mix(in srgb,#009E73 28%,var(--linie));color:var(--text)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend.phase-durchfuehrung{
  background:linear-gradient(165deg,color-mix(in srgb,#E69F00 20%,#fff) 0%,#fff 100%);
  border-color:color-mix(in srgb,#E69F00 30%,var(--linie));color:var(--text)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend.phase-nachbereitung{
  background:linear-gradient(165deg,color-mix(in srgb,#CC79A7 18%,#fff) 0%,#fff 100%);
  border-color:color-mix(in srgb,#CC79A7 28%,var(--linie));color:var(--text)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend h3{color:var(--text)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend .beschr{color:var(--schwach)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend .nummer{background:var(--neutralbg);
  color:var(--neutral);border-color:var(--linie)}
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend .pfeil,
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend:hover .pfeil,
html[data-farben="cud"][data-modus="hell"] .startkarte.weg.ruhend:focus-visible .pfeil{
  color:var(--schwach);background:rgba(var(--marke-rgb),.1);border-color:var(--linie);transform:none}

/* ---------- Hoher Kontrast ---------- */
html[data-farben="kontrast"]{
  --bg:#fff; --karte:#fff; --text:#000; --schwach:#333c45; --linie:#000;
  /* Auch hier kein Rot-Grün-Gegensatz: dunkles Grün, dunkles Braunorange,
     dunkles Rotviolett – alle drei auch in Graustufen verschieden hell. */
  --ok:#14532d; --okbg:#cfe9d8; --warn:#5c4a00; --warnbg:#ffd400;
  --stop:#7a003c; --stopbg:#ffd3e4; --info:#003a6b; --infobg:#9fd4ff;
  --neutral:#1c232b; --neutralbg:#e8eaee;
  --feld:#fff; --kartetief:#fff; --betont:#000; --rot:#0b3a5c;
  --karterand:#000; --feldrand:#000; --fokus:#000; --zaehler:#000;
  --gemeinsambg:#cfe9d8; --gemeinsamtext:#14532d;
  --nav:#fff; --navtext:#000; --navschwach:#000; --navhover:#e8eaee;
  --navblock:#fff; --navrand:#000; --navgruppe:#fff; --navaktiv:#000; --navaktivtext:#fff; --navstark:#000;
}
html[data-farben="kontrast"] .karte{border-width:2px}
html[data-farben="kontrast"] .zeile{border-top-width:2px}
html[data-farben="kontrast"] .p{border:2px solid currentColor}
html[data-farben="kontrast"] button,html[data-farben="kontrast"] .knopf{border-width:2px;font-weight:700}
html[data-farben="kontrast"] input,html[data-farben="kontrast"] select,html[data-farben="kontrast"] textarea{border-width:2px}
html[data-farben="kontrast"] .startkarte{border:2px solid #000;box-shadow:none;background:#fff;color:#000}
/* Pfeile auf der ganzen Seite gleich: schwarze Glyphe, weiße Fläche, schwarzer Ring – kein grauer
   Kreis. Gilt für Phasen, zuletzt geöffnete Events und die Funktionskarten darunter. */
html[data-farben="kontrast"] .startkarte .pfeil,
html[data-farben="kontrast"] .event-karte .karten-pfeil,
html[data-farben="kontrast"] .venue-karte .karten-pfeil{color:#000;background:#fff;border:2px solid #000}
html[data-farben="kontrast"] .startkarte:hover .pfeil,
html[data-farben="kontrast"] .startkarte:focus-visible .pfeil,
html[data-farben="kontrast"] .event-karte:hover .karten-pfeil,
html[data-farben="kontrast"] .venue-karte:hover .karten-pfeil{color:#fff;background:#000;border-color:#000}
/* Phasenkarten im hohen Kontrast wie Hell: helle Fläche, dunkle Schrift. Keine Phasenfarbe –
   Unterscheidung über die Nummer 1–4 und über den Ruhezustand (gedämpfter Pfeil, nicht über Farbe). */
html[data-farben="kontrast"] .startkarte.weg{background:#fff;color:#000;border:2px solid #000;border-left-width:2px}
html[data-farben="kontrast"] .startkarte.weg h3,
html[data-farben="kontrast"] .startkarte.weg .beschr{color:#000}
html[data-farben="kontrast"] .startkarte.weg .nummer,
html[data-farben="kontrast"] .bereich-marke .nummer{background:#000;color:#fff;border-color:#000}
html[data-farben="kontrast"] .startkarte.weg.phase-planung,
html[data-farben="kontrast"] .startkarte.weg.phase-organisation,
html[data-farben="kontrast"] .startkarte.weg.phase-durchfuehrung,
html[data-farben="kontrast"] .startkarte.weg.phase-nachbereitung{background:#fff;border-color:#000;border-left-color:#000}
html[data-farben="kontrast"] .startkarte.weg.phase-planung .nummer,
html[data-farben="kontrast"] .startkarte.weg.phase-organisation .nummer,
html[data-farben="kontrast"] .startkarte.weg.phase-durchfuehrung .nummer,
html[data-farben="kontrast"] .startkarte.weg.phase-nachbereitung .nummer,
html[data-farben="kontrast"] .bereich-marke.phase-planung .nummer,
html[data-farben="kontrast"] .bereich-marke.phase-organisation .nummer,
html[data-farben="kontrast"] .bereich-marke.phase-durchfuehrung .nummer,
html[data-farben="kontrast"] .bereich-marke.phase-nachbereitung .nummer{background:#000;color:#fff;border-color:#000}
html[data-farben="kontrast"] .startkarte.weg.ruhend,
html[data-farben="kontrast"] .startkarte.weg.ruhend.phase-planung,
html[data-farben="kontrast"] .startkarte.weg.ruhend.phase-organisation,
html[data-farben="kontrast"] .startkarte.weg.ruhend.phase-durchfuehrung,
html[data-farben="kontrast"] .startkarte.weg.ruhend.phase-nachbereitung{background:#fff;color:#000;border:2px dashed #000}
html[data-farben="kontrast"] .startkarte.weg.ruhend h3,
html[data-farben="kontrast"] .startkarte.weg.ruhend .beschr{color:#000}
html[data-farben="kontrast"] .startkarte.weg.ruhend .nummer{background:#fff;color:#000;border:2px solid #000}
html[data-farben="kontrast"] .startkarte.weg.ruhend .pfeil,
html[data-farben="kontrast"] .startkarte.weg.ruhend:hover .pfeil,
html[data-farben="kontrast"] .startkarte.weg.ruhend:focus-visible .pfeil{
  color:#333c45;background:#fff;border-color:#333c45;transform:none}
html[data-farben="kontrast"] .bereich-marke{color:#000}
html[data-farben="kontrast"] header.app[data-bereich]{background:#fff;background-image:none;border-bottom:2px solid #000;box-shadow:none}
html[data-farben="kontrast"] .mini,html[data-farben="kontrast"] .beschr{color:#333c45}
html[data-farben="kontrast"] .startkarte.weg .beschr,
html[data-farben="kontrast"] .startkarte.weg.ruhend .beschr{color:#000}
html[data-farben="kontrast"] nav.seite a.aktiv{background:#000;color:#fff;box-shadow:none}
/* Die sehr leichte Phasentönung (Planung/Organisation/…) ist im hohen Kontrast selbst als
   Aktivkennzeichen zu schwach – dort gilt für Phasen-Unterseiten dieselbe volle Umkehrung wie für
   alle anderen Ebenen, nicht eine zusätzliche Betonung, nur eben nicht ausschließlich über die
   (im hohen Kontrast unveränderte) Phasenfarbe. box-shadow:none, weil --stufe/--phase-* im hohen
   Kontrast (anders als --betont) nicht auf Schwarz zurückgesetzt werden – ohne diese Regel bliebe
   am aktiven Event-/Phasenlink zusätzlich zur schwarzen Fläche ein farbiger linker Rand stehen,
   inkonsistent mit aktiven globalen Links (die über --betont ohnehin schwarz sind). Hoher Kontrast
   zeigt Aktivität ausschließlich über Fläche/Text, nie zusätzlich über Farbe. */
html[data-farben="kontrast"] nav.seite .nav-event>a.aktiv,
html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-planung a.aktiv,
html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-organisation a.aktiv,
html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-durchfuehrung a.aktiv,
html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-nachbereitung a.aktiv{background:#000;color:#fff;box-shadow:none}
/* Der vollständig geschlossene, dünne Rahmen der Phasenüberschrift ist im Normalmodus phasenfarben
   (s. nav-bereich.bereich-* .gruppe weiter oben) – im hohen Kontrast gilt stattdessen dieselbe
   volle Umkehrung wie beim Eventkopf: weißer Grund, 2px schwarzer Rahmen, schwarzer Text. Eigene
   Regel nötig, weil die phasenfarbene Variante wegen ihrer zusätzlichen Klasse
   (.nav-bereich.bereich-planung) sonst spezifischer wäre als die allgemeine .gruppe-Kontrastregel
   weiter unten und sie fälschlich überstimmen würde. */
html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-planung .gruppe,
html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-organisation .gruppe,
html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-durchfuehrung .gruppe,
html[data-farben="kontrast"] nav.seite .nav-bereich.bereich-nachbereitung .gruppe{
  background:#fff;border:2px solid #000;color:#000;border-radius:8px;box-shadow:none}
/* Die Phasentönung, die den Eventblock im Normalmodus als zusammengehörigen Arbeitskontext zeigt,
   ist im hohen Kontrast (weißer Grund, keine feinen Farbabstufungen) kein verlässliches Signal –
   deshalb hier stattdessen eine klar sichtbare, vollständig geschlossene Kontur um den gesamten
   Event-Navigationsbereich, unabhängig von der Phase. Keine einzelne vertikale Linie, sondern ein
   Rahmen um den ganzen Block; der Eventkopf behält zusätzlich seinen eigenen Rahmen (.gruppe
   weiter unten), sodass auch im hohen Kontrast erkennbar bleibt, welcher Teil der stärkste Anker
   ist. */
/* Kein Glas-Zwang im hohen Kontrast: box-shadow/backdrop-filter explizit abschalten, weil die
   generische .gruppe-Kontrastregel weiter unten (und diese Regel selbst) box-shadow sonst gar
   nicht setzen würde – die Glas-Deklarationen von oben (niedrigere Spezifität durch das fehlende
   html[data-farben=...]) blieben sonst trotz Rahmen-Übersteuerung sichtbar. Solide, robuste
   Ersatzdarstellung statt Transluzenz/Blur. */
html[data-farben="kontrast"] nav.seite .event-block{border:2px solid #000;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Nicht anklickbare Gruppenüberschriften (Übersicht, Eventname, Planung/Organisation/…,
   Admin/Verwaltung, Gerät, Werkzeuge, System/Dokumentation, Dieser Zugang): im Hellmodus tragen
   sie nur eine obere Trennlinie, weil der leicht abweichende --kartetief-Ton auf --karte genügt.
   Im hohen Kontrast sind --kartetief und --karte identisch weiß – ohne eigenen Rand wirkt die
   Box dadurch oben „angeschnitten" statt geschlossen. Deshalb hier ein durchgehender,
   vierseitiger Rahmen auf allen Gruppenüberschriften, Eventname eingeschlossen. */
html[data-farben="kontrast"] nav.seite .gruppe{background:#fff;border:2px solid #000;border-radius:8px;box-shadow:none}

/* Wer im Betriebssystem weniger Bewegung wünscht, bekommt sie auch hier nicht. */

/* ---------- Gesamtlage Gantt-Zeitachse ---------- */
.gantt-mobil{display:none}
.gantt-desktop{display:block;margin-bottom:16px}
.gantt-shell{border:1px solid var(--linie);border-radius:14px;background:var(--karte);overflow:hidden}
.gantt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.gantt-innen{position:relative;min-height:120px}
.gantt-kopf{display:flex;position:sticky;top:0;z-index:4;background:var(--karte);border-bottom:1px solid var(--linie)}
.gantt-kopf-fix,.gantt-zeile-fix{position:sticky;left:0;z-index:3;flex:0 0 var(--gantt-fix,200px);min-width:140px;
  background:var(--karte);padding:10px 12px;border-right:1px solid var(--linie);box-shadow:2px 0 6px rgba(0,0,0,.04)}
.gantt-kopf-fix{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--schwach)}
.gantt-kopf-zeit{flex:1;position:relative;min-height:36px}
.gantt-skala{position:relative;height:36px}
.gantt-tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--linie);padding-left:4px}
.gantt-tick i{font-style:normal;font-size:.6875rem;color:var(--schwach);white-space:nowrap}
.gantt-zeitlage{position:absolute;top:0;bottom:0;pointer-events:none;z-index:2}
.gantt-jetzt{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--betont);pointer-events:none}
.gantt-jetzt span{position:absolute;top:4px;left:4px;font-size:.6875rem;font-weight:700;color:var(--betont);
  background:var(--karte);padding:1px 4px;border-radius:4px}
.gantt-body{position:relative}
.gantt-zeile{display:flex;border-top:1px solid var(--linie);align-items:stretch;min-height:56px}
.gantt-zeile-bahn{flex:1;position:relative;min-width:0}
.gantt-tracks{position:relative;width:100%}
.gantt-track-slot{position:absolute;left:0;right:0;height:32px}
.gantt-leer{padding:16px 12px}
.gantt-session{position:absolute;top:0;height:30px;border-radius:6px;text-decoration:none;color:inherit;
  overflow:hidden;box-sizing:border-box}
.gantt-session:focus-visible{outline:3px solid var(--betont);outline-offset:1px;z-index:5}
.gantt-plan{position:absolute;top:2px;bottom:2px;border:1.5px dashed var(--schwach);border-radius:5px;
  background:repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 6px);
  opacity:.85}
.gantt-ist{position:absolute;top:5px;bottom:5px;border-radius:4px;background:var(--okbg);border:2px solid var(--ok)}
.gantt-session.plan-laufend .gantt-plan{border-style:solid;border-color:var(--warn)}
.gantt-session.ist-laufend .gantt-ist{border-color:var(--betont);background:var(--okbg)}
.gantt-session.ueberzogen .gantt-ist,.gantt-session.ueberzogen .gantt-plan{border-color:var(--stop)}
.gantt-session.abschluss-offen .gantt-ist{border-style:dashed}
.gantt-label{position:relative;z-index:1;display:flex;align-items:center;gap:4px;height:100%;
  padding:0 6px;font-size:.75rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none}
.gantt-marke{flex:none;font-size:.625rem;font-weight:800;letter-spacing:.04em;padding:1px 4px;border-radius:3px;
  border:1px solid currentColor;line-height:1.2}
html[data-farben="cud"] .gantt-ist{background:var(--okbg);border-color:var(--betont)}
html[data-farben="cud"] .gantt-jetzt{border-left-color:var(--betont)}
.session-ist-knopf{min-height:44px;padding:10px 14px}
@media (max-width:420px){
  .session-ist-aktionen{flex-direction:column;align-items:stretch}
  .session-ist-knopf{width:100%;font-size:1rem;min-height:48px}
}
@media (max-width:720px){
  .gantt-desktop{display:none}
  .gantt-mobil{display:block}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .startkarte:hover{transform:none}
  .lage-banner{animation:none!important}
}

/* ---------- Event-/Venue-Karten, Icons, Bilder ---------- */
.event-raster,.venue-raster{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px}
@media(min-width:720px){.event-raster,.venue-raster{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.event-raster{grid-template-columns:1fr 1fr 1fr}}
.event-karte,.venue-karte{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie);
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;min-height:44px;position:relative;
  box-shadow:0 1px 0 var(--linie),0 4px 14px rgba(0,0,0,.05);transition:transform .15s ease,box-shadow .15s ease}
a.event-karte:hover,a.venue-karte:hover,.venue-karte:hover{transform:translateY(-1px);box-shadow:0 2px 0 var(--linie),0 10px 22px rgba(0,0,0,.1)}
a.event-karte:focus-visible,a.venue-karte:focus-visible,.venue-karte-link:focus-visible{outline:3px solid var(--betont);outline-offset:2px}
.venue-karte-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;min-width:0}
/* Kartenkörper als Flex-Spalte: die Badge-Zeile bekommt margin-top:auto und sitzt dadurch immer
   auf der Unterkante des Kartenkörpers – unabhängig davon, wie lang der Titel ist, und auf
   gleicher Höhe wie bei Nachbarkarten mit kürzerem Titel (Karten sind per Grid gleich hoch). */
.event-karte-body,.venue-karte-body{padding:14px 44px 16px 16px;display:flex;flex-direction:column;flex:1;min-height:0}
.event-karte-body .typ-marke,.venue-karte-body .typ-marke{margin-bottom:6px}
.event-karte-body .stark,.venue-karte-body .stark{font-size:.9688rem;line-height:1.35}
.event-karte-body .mini,.venue-karte-body .mini{margin-top:5px;line-height:1.4}
.event-karte-body>.reihe,.venue-karte-body>.reihe{margin-top:auto;padding-top:12px}
.venue-karte-aktionen{padding:0 12px 12px;gap:8px;flex-wrap:wrap}
/* Kartenpfeil unten rechts: eigener Kreisknopf wie bei den Startseiten-Karten, deutlich sichtbarer
   als eine dünne Textglyphe und mit ausreichender Kontrast- und Antippfläche. */
.event-karte .karten-pfeil,.venue-karte .karten-pfeil{position:absolute;right:14px;bottom:14px;width:28px;height:28px;
  line-height:27px;text-align:center;font-size:.9375rem;border-radius:50%;color:var(--marke);
  background:rgba(var(--marke-rgb),.14);border:1.5px solid rgba(var(--marke-rgb),.4);
  box-sizing:border-box;transition:background .12s ease,transform .12s ease}
.event-karte:hover .karten-pfeil,.venue-karte:hover .karten-pfeil{background:rgba(var(--marke-rgb),.26);transform:translateX(1px)}
/* Das Bild unterstützt die Wiedererkennung, darf die Karte aber nicht dominieren: Text, Status
   und Bedienung bleiben primär. Auf Desktop ist dafür genug Breite da, um die Bildfläche flacher
   zu halten; am Handy bleibt sie hoch genug, um noch erkennbar zu sein. */
.event-bild,.venue-bild{aspect-ratio:16/9;background:var(--neutralbg);overflow:hidden;flex:none}
.event-bild img,.venue-bild img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:720px){
  .event-raster .event-bild,.venue-raster .venue-bild{aspect-ratio:2.6/1}
}
.venue-bild.thumb{width:36px;height:36px;aspect-ratio:1;border-radius:8px;flex:none}
.venue-bild.thumb img{object-fit:cover}
/* Sessionliste: Venue-Bild + Name stehen fix vorn in der Zeile, damit die Zugehörigkeit beim
   Scrollen sofort erkennbar ist – der Sessionname bleibt trotzdem führend (eigene, größere Zeile). */
.session-venue{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0;max-width:38%;
  padding-right:12px;border-right:1px solid var(--linie)}
.session-venue .stark{font-size:.8438rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .session-venue{max-width:none;border-right:0;padding-right:0;margin-bottom:6px;width:100%}
}
.dialog-bild{aspect-ratio:16/9;max-width:280px;border-radius:10px;border:1px solid var(--linie)}
.event-bild.placeholder,.venue-bild.placeholder{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--neutralbg) 0%,var(--karte) 55%,var(--neutralbg) 100%)}
.ph-marke{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--schwach);opacity:.85}
.event-ph .ph-marke{color:var(--betont);opacity:.55}
.venue-ph .ph-marke{color:var(--neutral);opacity:.7}
.bild-feld{margin:10px 0 4px;padding:10px;border:1px dashed var(--linie);border-radius:10px}
.gantt-venue-kopf{display:flex;gap:10px;align-items:flex-start}
.gantt-venue-kopf .venue-bild.thumb{margin-top:2px}
.icon-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  line-height:1;color:var(--text);opacity:.9;flex:none}
.icon-badge svg{display:block}
.rollen-badge,.qual-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 5px;margin:0 4px 4px 0;
  border:1px solid var(--linie);border-radius:999px;background:var(--neutralbg);font-size:.75rem;
  font-weight:650;line-height:1.3;white-space:nowrap;vertical-align:middle}
.rollen-badge .icon-text,.qual-badge .icon-text{font-variant-numeric:tabular-nums}
.qual-reihe{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0;max-width:100%}
.startkarte.event-startkarte{display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;gap:0;
  height:100%;min-height:0}
.startkarte.event-startkarte .event-bild{width:100%;aspect-ratio:16/9;max-height:148px;align-self:stretch;flex:none}
.startkarte.event-startkarte.gross .event-bild{max-height:180px}
.startkarte.event-startkarte .event-bild.klein{max-height:120px}
.startkarte.event-startkarte .event-bild.ohne-marke,
.event-bild.ohne-marke{background:linear-gradient(145deg,var(--neutralbg) 0%,var(--karte) 55%,var(--neutralbg) 100%)}
.event-startkarte-body{padding:14px 44px 16px 16px;min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.event-startkarte-body .typ-marke{margin-bottom:6px}
.event-startkarte-body h3{margin:0 0 5px;width:100%;overflow-wrap:anywhere;word-break:break-word;line-height:1.3}
.event-startkarte-body .beschr{width:100%;overflow-wrap:anywhere}
/* Die Statuszeile sitzt unabhängig von der Titellänge immer auf der Kartenunterkante –
   dieselbe Technik wie bei den Karten der Eventübersicht, damit „in Organisation“ und
   „in Planung“ bei unterschiedlich langen Eventnamen auf gleicher Höhe bleiben. */
.event-startkarte-body>.reihe{margin-top:auto!important;padding-top:10px}
@media(max-width:420px){
  .event-raster,.venue-raster{grid-template-columns:1fr;gap:12px}
  .event-bild,.venue-bild{aspect-ratio:3/2}
  .startkarte.event-startkarte .event-bild,
  .startkarte.event-startkarte.gross .event-bild,
  .startkarte.event-startkarte .event-bild.klein{width:100%;aspect-ratio:16/9;max-height:140px;min-height:0}
  .startkarte.weg{min-height:220px}
  .rollen-badge,.qual-badge{font-size:.8125rem;padding:3px 8px 3px 6px}
  .gantt-venue-kopf .venue-bild.thumb{display:none}
}
html[data-farben="cud"] .rollen-badge,html[data-farben="cud"] .qual-badge,html[data-farben="cud"] .formelmarke{border-color:var(--betont);background:var(--karte)}
html[data-farben="kontrast"] .event-karte,html[data-farben="kontrast"] .venue-karte{border-width:2px;border-color:#000}
html[data-farben="kontrast"] .rollen-badge,html[data-farben="kontrast"] .qual-badge,html[data-farben="kontrast"] .formelmarke{border-width:2px;border-color:#000;background:#fff}

/* ---------- Tabellen mit ganzen Sätzen (app4.js) ----------
   th/td stehen oben bewusst auf white-space:nowrap – richtig für Datentabellen,
   falsch für Spalten, in denen eine Begründung steht. Diese Tabellen brechen um,
   statt den Rahmen waagrecht rollen zu lassen. */
.satztabelle td{white-space:normal}
.satztabelle td.eng{white-space:nowrap}

/* Verfahrensmarke: kleines Quadrat mit Buchstabe. Farbe ist nie die einzige Auskunft. */
/* min-width statt width: „Mü" (München) hat zwei Zeichen und braucht mehr Platz als die
   einbuchstabigen Kürzel der übrigen Verfahren – sonst quetschen sich beide Zeichen in ein
   quadratisches Feld und werden kaum lesbar. */
.formelmarke{display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;height:1.35em;
  padding:0 3px;border:1.5px solid currentColor;border-radius:3px;font-size:.6875rem;font-weight:700;line-height:1;
  vertical-align:middle;margin:0 2px 0 0;color:var(--text);background:var(--karte)}
.formelmarken{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle;font-weight:400}
label.feld .formelmarken,div.feld .formelmarken{font-weight:400}
@media(min-width:620px){.zwei>.feld-breit{grid-column:1/-1}}
div.feld{display:block;margin-bottom:var(--abstand-md);font-size:.8438rem;color:var(--schwach);font-weight:600}
div.feld>span{display:block;margin-bottom:5px}

.formelwahl{margin:14px 0 18px}
.formelwahl-raster{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:520px){.formelwahl-raster{grid-template-columns:1fr 1fr}}
.formelwahl-leiste .formelwahl-raster{grid-template-columns:1fr 1fr}
.formelkarte{display:block;margin:0;padding:12px 14px;border:1.5px solid var(--linie);
  border-radius:10px;background:var(--karte);cursor:pointer;font-weight:400;color:var(--text)}
.formelkarte.aktiv{border-color:var(--phase-planung);box-shadow:inset 0 0 0 1px var(--phase-planung)}
.formelkarte-name{display:flex;align-items:center;gap:8px;min-width:0}
.formelkarte-name .formelmarke{flex:none;margin:0;vertical-align:unset}
.formelkarte-name input{width:auto;margin:0;flex:none}
.formelkarte-titel{flex:1;min-width:0;font-weight:700;line-height:1.25}
.formelkarte-text{margin-top:8px}
.frage-feld.nachtragen{background:var(--warnbg);color:var(--text);outline:1.5px solid var(--warn);
  border-radius:8px;padding:10px 12px}

/* ---------- Bemessungsassistent (app4.js) ----------
   Links die Fragen, rechts die Ergebnisse. Die Ergebnisspalte bleibt beim Blättern stehen,
   damit sichtbar ist, was eine Eingabe bewirkt. Unter 1100 px rutscht sie über die Fragen. */
.ba-raster{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.ba-spalte{min-width:0}
.ba-ergebnis{min-width:0;order:-1}
.ba-erg-griff{display:none}
/* Breiter Schirm: die Berechnungen sind eine Schublade am rechten Rand. Standardmäßig
   eingefahren (nur der Griff schaut heraus); Klick auf den Griff fährt sie herein und wieder
   hinaus. Sie überlagert den Inhalt, statt Layoutbreite zu kosten. */
@media(min-width:1100px){
  /* Schublade: sitzt bündig an der rechten Fensterkante (rechts randlos, rechts eckig),
     nur die linke, dem Inhalt zugewandte Kante ist abgerundet. */
  .ba-ergebnis{order:0;position:fixed;top:var(--kopf-h);right:0;z-index:26;
    width:min(380px,90vw);max-height:calc(100vh - var(--kopf-h));overflow:auto;
    padding:14px 16px 24px;background:var(--bg);
    border:1px solid var(--linie);border-right:0;border-radius:14px 0 0 14px;
    transform:translateX(100%);transition:transform .25s ease}
  body.erg-offen .ba-ergebnis{transform:translateX(0);box-shadow:-12px 0 32px rgba(0,0,0,.28)}
  /* Offen: der Hauptinhalt bekommt rechts Platz frei, damit die Schublade nicht darüber liegt. */
  main{transition:padding-right .25s ease}
  body.erg-offen main{padding-right:calc(max(26px, calc((100vw - 250px - 1180px) / 2)) + min(380px,90vw))}
  /* Die Lasche klebt an eben dieser abgerundeten linken Kante (gleiche Rundung, rechts eckig). */
  .ba-erg-griff{display:flex;position:fixed;top:42vh;right:0;z-index:27;transform:translateY(-50%);
    writing-mode:vertical-rl;text-orientation:mixed;gap:8px;align-items:center;justify-content:center;
    padding:16px 7px;border:1px solid var(--linie);border-right:0;border-radius:14px 0 0 14px;
    background:var(--kartetief);color:var(--text);font-weight:700;font-size:.8125rem;cursor:pointer;
    transition:right .25s ease}
  .ba-erg-griff:hover{background:var(--neutralbg)}
  body.erg-offen .ba-erg-griff{right:min(380px,90vw)}
  /* Richtungspfeil: zu -> nach links herausziehen; offen -> nach rechts in den Rand schieben. */
  .ba-erg-griff .pf{writing-mode:horizontal-tb;font-size:.8125rem;line-height:1;opacity:.8}
  .ba-erg-griff .pf::before{content:"\25C2"}
  body.erg-offen .ba-erg-griff .pf::before{content:"\25B8"}
  /* In der Schublade trägt schon der Rahmen ringsum – die innere Karte flach lassen. */
  .ba-ergebnis .ba-ergebnis-innen{border:0;border-radius:0;padding:0;background:transparent}
  .ba-klapp[open] .ba-klapp-kopf{cursor:default}
}
.ba-ergebnis-innen{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:14px 16px;min-width:0;overflow-wrap:anywhere}
.ba-erg-titel{font-weight:700;font-size:.9375rem;margin-bottom:2px}
.ba-erg-vorwort{margin-bottom:12px}
.ba-erg-karte{border-top:1px solid var(--linie);padding:12px 0}
.ba-erg-karte:first-of-type{border-top:none}
.ba-erg-kopf{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.ba-erg-offen{margin-bottom:8px}
.ba-erg-karte.offen .ba-erg-kopf b{font-weight:600}
.ba-kennwert{font-size:1.75rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;margin:2px 0 8px}
.ba-kennwert .mini{font-size:.75rem;font-weight:400}
.ba-erg-tabelle{width:100%;border-collapse:collapse;font-size:.8125rem;table-layout:fixed}
.ba-erg-tabelle td{padding:3px 0;border:none;vertical-align:top;white-space:normal;overflow-wrap:anywhere}
.ba-erg-tabelle td:first-child{width:52%}
/* Der Wert ist mal eine Zahl, mal ein ganzer Satz („keine stabsmäßige Einsatzleitung
   erforderlich"). Er muss deshalb umbrechen dürfen, sonst schiebt er die Spalte aus dem Bild. */
.ba-erg-tabelle td.ba-zahl{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;padding-left:8px;white-space:normal}
.ba-offen-liste{margin:6px 0 0;padding-left:18px;font-size:.8125rem;color:var(--schwach)}
.ba-offen-liste li{margin-bottom:3px}
.ba-rechenweg,.ba-quelle{margin-top:6px}
.ba-hinweiszeile{margin-top:6px;padding:6px 8px;background:var(--warnbg);border-radius:6px}
.ba-erg-fuss{margin-top:12px;padding-top:10px;border-top:1px solid var(--linie)}

/* Die interne Pill-/Stufennavigation (.ba-streifen) ist mit Phase 2 des Navigationsrefactors
   entfallen – die Planungsstufen sind eigene Routen, die Navigation läuft über Sidebar und
   die gemeinsame Fußleiste. */
.ba-frage{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.ba-frage-titel{margin:0 0 8px;font-size:1.0625rem;line-height:1.35}
.ba-frage-titel.ohne-text{margin:0 0 4px}
.ba-frage-info{margin-left:6px;vertical-align:baseline}
.ba-frage-hinweis{margin:0 0 10px;font-size:.875rem;color:var(--schwach)}
.ba-getrennt{margin-bottom:10px;padding:6px 10px;border-left:3px solid var(--phase-planung);background:var(--neutralbg);border-radius:0 6px 6px 0}
.ba-gruppen{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.ba-gruppe{padding-top:12px;border-top:1px dashed var(--linie)}
.ba-gruppen > .ba-gruppe:first-child{padding-top:0;border-top:none}
.ba-gruppe-kopf{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:4px}
/* Ohne Verfahrenssymbole darf die leere Marken-Spalte die Überschrift nicht einrücken. */
.ba-gruppe-kopf > .formelmarken:empty{display:none}
.ba-gruppe-label{font-weight:600}
.ba-gruppe-hinweis{margin-bottom:6px}
.ba-gemeinsam{font-size:.8125rem;margin-bottom:6px;padding:5px 9px;border:1px dashed var(--ok);border-radius:6px;color:var(--ok)}
.ba-haken{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.ba-frei{margin-top:8px}
.ba-abweichung{margin-top:10px;padding:10px 12px;background:var(--neutralbg);border-radius:8px}
.ba-abw-zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ba-abw-zeile input[type=number]{width:9rem}
.ba-navi{margin:18px 0 8px}
/* Die Dateiauswahl des Browsers beschriftet sich selbst und tut das auf Englisch. Das Feld
   bleibt bedienbar und für Hilfsmittel erreichbar, sichtbar ist die eigene Schaltfläche. */
.ba-dateifeld{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
label.ba-dateiknopf{display:inline-block;cursor:pointer;width:auto;align-self:flex-start}
.ba-dateifeld:focus-visible + .ba-dateiknopf,label.ba-dateiknopf:focus-visible{outline:2px solid var(--betont);outline-offset:2px}
/* Ergebnisspalte: am breiten Schirm offen daneben, am schmalen aufklappbar über den Fragen. */
.ba-klapp{border:none;background:none;margin:0}
.ba-klapp-kopf{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;cursor:pointer;
  padding:10px 14px;background:var(--karte);border:1px solid var(--linie);border-radius:12px;margin-bottom:8px}
.ba-klapp[open] .ba-klapp-kopf{margin-bottom:8px}
@media(min-width:1100px){
  .ba-klapp-kopf{display:none}
  .ba-klapp{margin:0}
}

/* ---------- Wirkungsanzeige am Informationszeichen (app4.js) ----------
   Zeigt, was eine Antwort im jeweiligen Verfahren auslöst. Bewusst nicht in der Auswahl
   selbst: wer die Punktwerte beim Klicken sieht, wählt Punkte statt Tatsachen. */
.ba-info-halter{position:relative;display:inline-flex;margin-left:2px}
button.ba-info{width:1.4em;height:1.4em;padding:0;border-radius:50%;border:1.5px solid var(--linie-stark,var(--linie));
  background:var(--karte);color:var(--schwach);font-weight:700;font-size:.75rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
button.ba-info:hover,button.ba-info[aria-expanded="true"]{border-color:var(--betont);color:var(--betont)}
button.ba-info:focus-visible{outline:2px solid var(--betont);outline-offset:2px}
.ba-wirkung{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:min(30rem,calc(100vw - 32px));
  max-height:min(28rem,70vh);overflow:auto;background:var(--karte);border:1px solid var(--linie);
  border-radius:12px;padding:12px 14px;box-shadow:0 6px 28px rgba(0,0,0,.18);font-weight:400;text-align:left}
.ba-wirkung.links{left:auto;right:0}
.ba-wirkung-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-weight:700;font-size:.875rem;margin-bottom:6px}
button.ba-wirkung-zu{border:none;background:none;font-size:1.25rem;line-height:1;cursor:pointer;color:var(--schwach);padding:0 2px}
.ba-wirkung-ein{margin:0 0 10px;font-size:.8125rem;color:var(--schwach)}
.ba-wirkung-rahmen{overflow-x:auto;margin-bottom:10px}
.ba-wirkung-tabelle{width:100%;border-collapse:collapse;font-size:.8125rem}
.ba-wirkung-tabelle th{text-align:left;font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--schwach);padding:4px 8px 4px 0;border-bottom:1px solid var(--linie);white-space:normal}
.ba-wirkung-tabelle td{padding:5px 8px 5px 0;border-bottom:1px solid var(--linie);vertical-align:top;white-space:normal}
.ba-wirkung-tabelle td.ba-folge{font-weight:700;white-space:normal}
.ba-wirkung-formeln{margin:0 0 10px;display:grid;gap:6px}
.ba-wirkung-formeln dt{font-weight:700;font-size:.8125rem;display:flex;gap:6px;align-items:center}
.ba-wirkung-formeln dd{margin:2px 0 0;font-size:.8125rem;color:var(--schwach)}
.ba-wirkung-weiter{border-top:1px solid var(--linie);padding-top:8px;display:grid;gap:4px}
.ba-wirkung-fuss{margin-top:8px;padding-top:6px;border-top:1px solid var(--linie)}
@media(max-width:640px){.ba-wirkung{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:60vh}}
/* Beim bloßen Überfahren fängt der Kasten keine Klicks ab – sonst verdeckte er das Zeichen der
   nächsten Frage und man käme nicht mehr hin. Erst festgehalten wird er bedienbar und rollbar. */
.ba-wirkung{pointer-events:none}
.ba-wirkung.fest{pointer-events:auto}


/* Begründungsfeld zu einem Spannenwert. Es hängt sichtbar am Feld darüber:
   eingerückt, mit durchgehender Kante links, damit die Zusammengehörigkeit ohne
   Farbe erkennbar bleibt. */
.ba-begruendung{
  margin-top:-6px;
  margin-left:18px;
  padding-left:14px;
  border-left:3px solid var(--rand, #4a5568);
}
.ba-begruendung .ba-gruppe-label{font-weight:600}


/* ================= Verfahren und Quellen =================
   Die Seite wird gelesen, nicht bedient. Deshalb ruhige Typografie, klare Hierarchie
   und kein Zustand, der allein an Farbe hängt: Belege sind an ihrer Umrandung und
   ihrer Beschriftung erkennbar, eigene Einschätzungen zusätzlich am Text selbst. */

.vq-sprung{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 16px 0; padding:10px 12px;
  border:1px solid var(--rand,#3a4454); border-radius:10px;
}
.vq-sprung a{
  font-size:.8125rem; text-decoration:none;
  padding:4px 10px; border:1px solid var(--rand,#3a4454); border-radius:999px;
}
.vq-sprung a:hover{ text-decoration:underline }

.vq-karte{ scroll-margin-top:20px }

.vq-ueber{
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
  margin:18px 0 8px 0; opacity:.75; font-weight:700;
}

.vq-liste{ margin:0; padding-left:20px }
.vq-liste li{ margin-bottom:9px; line-height:1.5 }

/* Beleg hinter einer Aussage. Kleine Kapsel, damit sie sich vom Fließtext löst,
   ohne ihn zu zerreißen. */
.vq-beleg{
  display:inline-block; white-space:nowrap;
  font-size:.6875rem; line-height:1.6;
  padding:1px 7px; margin-left:4px;
  border:1px solid var(--rand,#3a4454); border-radius:999px;
  opacity:.85;
}
/* Eigene Einschätzung: gestrichelte Kante statt durchgezogener. Der Unterschied ist
   auch ohne Farbwahrnehmung eindeutig, und der Text sagt es ohnehin. */
.vq-eigen{ border-style:dashed; white-space:normal }

.vq-zweispalt{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px }
@media (max-width:820px){ .vq-zweispalt{ grid-template-columns:1fr } }

.vq-formel, .vq-werte{
  margin-top:18px;
  border:1px solid var(--rand,#3a4454); border-radius:10px;
  overflow:hidden;
}
.vq-formel > summary, .vq-werte > summary{
  cursor:pointer; padding:10px 14px; font-weight:600; font-size:.875rem;
  list-style:none;
}
.vq-formel > summary::before, .vq-werte > summary::before{
  content:'▸ '; display:inline-block; width:1.1em;
}
.vq-formel[open] > summary::before, .vq-werte[open] > summary::before{ content:'▾ ' }
.vq-formel > summary::-webkit-details-marker,
.vq-werte > summary::-webkit-details-marker{ display:none }
.vq-formel-innen{ padding:4px 14px 16px }

.vq-formel-tabelle{ width:100%; border-collapse:collapse; table-layout:fixed }
.vq-formel-tabelle td{
  vertical-align:top; padding:7px 8px; white-space:normal;
  border-top:1px solid var(--rand,#3a4454);
}
.vq-formel-tabelle tr:first-child td{ border-top:none }
.vq-zeile{
  width:88px; font-family:var(--mono);
  font-size:.75rem; opacity:.7;
}
/* Die tragenden Zeilen einer Formel – die eigentliche Gleichung – werden fett und
   mit einer Kante links hervorgehoben, nicht mit Farbe. */
.vq-formel-tabelle tr.vq-hervor td{ font-weight:600 }
.vq-formel-tabelle tr.vq-hervor td:first-child{ box-shadow:inset 3px 0 0 currentColor }

.vq-quellen{ margin:0; padding-left:22px; font-size:.8125rem }
.vq-quellen li{ margin-bottom:11px; line-height:1.5 }
.vq-quellen li > div{ opacity:.85; margin-top:2px }

/* ---- Eingabemaske „Nach Thema" (EINGABEMASKE.md 6.1, 6.3) ---- */
/* Zeilen je Verfahren: links Verfahren, rechts die vollständige Liste dieses Verfahrens. */
.ba-zeilen{gap:0}
.ba-gruppe.ba-zeile{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:6px 14px;align-items:start;padding:10px 0}
.ba-zeilen > .ba-gruppe.ba-zeile:first-child{padding-top:0}
.ba-zeile-vn{display:flex;gap:7px;align-items:center;font-weight:600;font-size:.875rem;line-height:1.3}
.ba-zeile-vn .formelmarke{flex:none;margin:0}
.ba-zeile-inhalt{min-width:0}
.ba-zeile-inhalt .ba-gruppe-kopf{margin-bottom:6px}
.ba-zeile-inhalt .ba-gruppe-label{font-weight:500}
.ba-zeile-inhalt select{max-width:100%}
.ba-radios{display:flex;flex-wrap:wrap;gap:6px 18px}
.ba-radios label.haken{margin:0;font-weight:500}
/* Zusatzfragen: eingerückt unter der Frage, aus der sie folgen. */
.ba-gruppe.ba-zusatz{margin:10px 0 0 14px;padding:10px 12px;border-top:none;border-left:3px solid var(--phase-planung);
  background:var(--kartetief,var(--neutralbg));border-radius:0 8px 8px 0}
.ba-zusatz-warum{margin-bottom:6px;font-style:italic}
/* Folgerungen: Hinweis unter der auslösenden Antwort, nie ein Feld. */
.ba-folgerungen:empty{display:none}
.ba-folgerungen{display:grid;gap:6px;margin-top:8px}
.hinweis.ba-folgt{margin:0;padding:6px 10px;font-size:.8125rem}
.ba-zahl-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ba-zahl-zeile input{flex:0 1 12rem}
.ba-uebernehmen{white-space:nowrap}
.ba-zaehler{margin-top:14px}
.ba-erste-offen{display:inline-block;margin:4px 0 2px;font-weight:600}
.ba-offen-liste a{text-decoration:underline;color:inherit}
.ba-sprung{outline:3px solid var(--phase-planung);outline-offset:4px;border-radius:6px;transition:outline-color .3s}
@media (max-width:640px){
  /* Handy: Name über der Liste, Listen umbrechen, keine Überbreite. */
  .ba-gruppe.ba-zeile{grid-template-columns:minmax(0,1fr);gap:4px}
  .ba-zeile-vn{margin-bottom:2px}
  .ba-gruppe.ba-zusatz{margin-left:6px}
  .ba-radios{flex-direction:column;gap:4px}
  .ba-zahl-zeile input{flex:1 1 8rem}
}
.formelmarke.formelmarke-planung{width:auto;padding:0 6px;border-style:dashed;font-weight:600;color:var(--schwach)}
.ba-einheit{white-space:nowrap}

/* ---- Eingabemaske „Nach Quelle“ und Umschalter (EINGABEMASKE.md 6.2, 6.4) ---- */
.ba-ansicht{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.ba-ansicht .knopf.aktiv{background:var(--phase-planung-fill);border-color:var(--phase-planung-fill);color:#fff;font-weight:600}
.ba-ansicht .knopf.aktiv::before{content:"✓ "}
.ba-ansicht-text{margin:-4px 0 8px}
.ba-verfahrenskarte{border-left:5px solid var(--phase-planung)}
.ba-angedockt{margin-left:26px;border-style:dashed;border-left-width:5px;position:relative;background:var(--kartetief,var(--karte))}
.ba-angedockt::before{content:"";position:absolute;left:-20px;top:-15px;height:44px;width:14px;
  border-left:2px solid var(--linie);border-bottom:2px solid var(--linie);border-radius:0 0 0 10px}
.ba-erbt{margin:-2px 0 10px}
.ba-herkunft-wert{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.ba-herkunft-link{text-decoration:underline;color:inherit}
.ba-veranstaltung-offen a{color:inherit;text-decoration:underline}
@media (max-width:640px){
  .ba-angedockt{margin-left:10px}
  .ba-angedockt::before{display:none}
}
.ba-quelle-kopf{font-weight:400;margin-left:6px}

/* ---------- Öffentlicher Rechner ohne Konto (rechner.html) ----------
   Keine Seitenleiste; Navigation über eine Schrittleiste und Zurück/Weiter. Die aktive Seite ist
   fett, unterstrichen und als aria-current markiert – nicht nur farbig. */
body.rechner main{display:block;min-height:0}
.rechner-anmelden{white-space:nowrap;text-decoration:none;flex:none}
.rechner-meldung{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;margin:0;
  max-width:min(560px,calc(100vw - 32px));box-shadow:0 6px 24px rgba(0,0,0,.25)}
.rechner-geraet{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rechner-loeschen-halter{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.rechner-schritte ol{list-style:none;margin:6px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rechner-schritte a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--linie);
  border-radius:999px;text-decoration:none;color:var(--text);font-size:.875rem;background:var(--karte)}
.rechner-schritte a:hover{background:var(--neutralbg)}
.rechner-schritte a.aktiv{font-weight:700;border-color:var(--betont);text-decoration:underline;text-underline-offset:3px}
.rechner-nr{display:inline-flex;align-items:center;justify-content:center;min-width:1.4em;height:1.4em;border-radius:999px;
  background:var(--neutralbg);font-size:.75rem;font-weight:700}
.rechner-fuss{justify-content:space-between;margin-top:18px}
.rechner-fuss .knopf{text-decoration:none}
.rechner-konto{margin-top:14px}

/* ---------- Organisation (Stammdaten, Verzeichnisse, Benutzer) ---------- */
.org-sprung{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.org-sprung a{padding:3px 10px;border:1px solid var(--linie);border-radius:999px;font-size:.8438rem;text-decoration:none;color:var(--text);background:var(--karte)}
.org-sprung a:hover{background:var(--neutralbg)}
.org-ap{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.org-ap-name{display:inline-flex;align-items:center;gap:4px}
.org-standard{margin:0;padding-left:20px}
.org-standard li{margin:2px 0}
.lage-stamm-titel{font-size:.9375rem;margin:14px 0 6px}

/* =====================================================================================
   Erscheinungsbild nach der Designwahl (Oktober 2026)
   Grundlage Carbon (eckig, neutrale Grautöne), Seitenleiste Leitstand (dunkel, mit eigenen
   Kästen für die Gruppenüberschriften), Abschnittstitel als nummeriertes Datenblatt, Karten mit
   Kopfzeile, Eingabefelder mit vollem Rahmen auf leicht getöntem Grund, Meldungen ohne
   Seitenstreifen, Kennzeichen und Zahlen in Festbreitenschrift. Knöpfe und Kopfleiste bleiben
   wie bisher. Steht bewusst am Ende, damit es die älteren Einzelregeln gleicher Spezifität
   ablöst; hoher Kontrast hat höhere Spezifität und gewinnt weiterhin.
   ===================================================================================== */

/* Eckig: keine Rundungen, auch nicht an Kennzeichen und Infoknöpfen. */
*,*::before,*::after{border-radius:0!important}

input,select,textarea{border:1px solid var(--feldrand);background:var(--feld)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--fokus);outline-offset:1px}

/* ---------- Seitenleiste ---------- */
nav.seite{background:var(--nav);border-right:0;color:var(--navtext);
  /* Die Leiste ist immer dunkel – darum hier die hellen Bereichsfarben, wie im Dunkelmodus. */
  --phase-planung:#5b9fd4;       --phase-planung-rgb:91,159,212;
  --phase-organisation:#2bb3c9;  --phase-organisation-rgb:43,179,201;
  --phase-durchfuehrung:#e08a2e; --phase-durchfuehrung-rgb:224,138,46;
  --phase-nachbereitung:#9a8fd4; --phase-nachbereitung-rgb:154,143,212}
nav.seite a{color:var(--navtext);font-size:.875rem;padding:7px 12px}

nav.seite a:hover,
nav.seite .nav-event>a:hover:not(.aktiv),
nav.seite .nav-bereich.bereich-planung a:hover:not(.aktiv),
nav.seite .nav-bereich.bereich-organisation a:hover:not(.aktiv),
nav.seite .nav-bereich.bereich-durchfuehrung a:hover:not(.aktiv),
nav.seite .nav-bereich.bereich-nachbereitung a:hover:not(.aktiv){background:var(--navhover)}
/* Aktiver Eintrag: heller Balken über die ganze Breite, dunkle Schrift. Der linke Streifen
   nennt zusätzlich den Bereich (Farbe ist hier nie die einzige Auskunft – der Balken selbst
   zeigt den Zustand). */
nav.seite>a.aktiv,
nav.seite .nav-event>a.aktiv,
nav.seite .nav-bereich.bereich-planung a.aktiv,
nav.seite .nav-bereich.bereich-organisation a.aktiv,
nav.seite .nav-bereich.bereich-durchfuehrung a.aktiv,
nav.seite .nav-bereich.bereich-nachbereitung a.aktiv{background:var(--navaktiv);color:var(--navaktivtext);
  box-shadow:inset 4px 0 0 var(--marke)}
nav.seite .nav-event>a.aktiv{box-shadow:inset 4px 0 0 var(--stufe-fill,var(--marke))}
nav.seite .nav-bereich.bereich-planung a.aktiv{box-shadow:inset 4px 0 0 var(--phase-planung-fill)}
nav.seite .nav-bereich.bereich-organisation a.aktiv{box-shadow:inset 4px 0 0 var(--phase-organisation-fill)}
nav.seite .nav-bereich.bereich-durchfuehrung a.aktiv{box-shadow:inset 4px 0 0 var(--phase-durchfuehrung-fill)}
nav.seite .nav-bereich.bereich-nachbereitung a.aktiv{box-shadow:inset 4px 0 0 var(--phase-nachbereitung-fill)}
nav.seite .event-block.bereich-planung{--stufe-fill:var(--phase-planung-fill)}
nav.seite .event-block.bereich-organisation{--stufe-fill:var(--phase-organisation-fill)}
nav.seite .event-block.bereich-durchfuehrung{--stufe-fill:var(--phase-durchfuehrung-fill)}
nav.seite .event-block.bereich-nachbereitung{--stufe-fill:var(--phase-nachbereitung-fill)}
/* Gruppenüberschriften als eigene Kästen: so fallen Admin / Verwaltung, Werkzeuge, System /
   Dokumentation und die Phasen als einklappbare Themenbereiche auf. */
nav.seite .gruppe,
nav.seite .nav-event .gruppe:not(.event-titel){background:var(--navgruppe);color:var(--navschwach);
  border:1px solid var(--navrand);box-shadow:none;
  font-size:.6562rem;letter-spacing:.1em;padding:7px 10px;margin:14px 0 4px}
nav.seite .gruppe:first-child{margin-top:0}
nav.seite .gruppe.faltbar:hover{color:var(--navtext)}
nav.seite .nav-bereich.bereich-planung .gruppe,
nav.seite .nav-bereich.bereich-organisation .gruppe,
nav.seite .nav-bereich.bereich-durchfuehrung .gruppe,
nav.seite .nav-bereich.bereich-nachbereitung .gruppe{background:var(--navgruppe);color:var(--navschwach);
  border:1px solid var(--navrand)}
nav.seite .nav-bereich.bereich-planung .gruppe{box-shadow:inset 3px 0 0 var(--phase-planung)}
nav.seite .nav-bereich.bereich-organisation .gruppe{box-shadow:inset 3px 0 0 var(--phase-organisation)}
nav.seite .nav-bereich.bereich-durchfuehrung .gruppe{box-shadow:inset 3px 0 0 var(--phase-durchfuehrung)}
nav.seite .nav-bereich.bereich-nachbereitung .gruppe{box-shadow:inset 3px 0 0 var(--phase-nachbereitung)}
/* Eventblock: flache Fläche statt Glas, oben ein Streifen in der Farbe des Bereichs. */
nav.seite .event-block{background:var(--navblock);border:1px solid var(--navrand);border-top:2px solid var(--stufe);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
nav.seite .gruppe.event-titel{background:transparent;border:0;box-shadow:none;color:var(--navstark)}
nav.seite .event-titel-label{color:var(--navschwach)}
nav.seite .event-titel-name{color:var(--navstark)}

/* ---------- Abschnittstitel: nummeriert, mit Linie ---------- */
/* Überlange Wörter (z. B. „Veranstaltungsgrunddaten“ bei sehr großer Schrift am Handy) brechen
   um, statt seitlich hinauszuragen. Greift nur, wo ein Wort sonst nicht passt. */
main{counter-reset:abschnitt;overflow-wrap:break-word}
h2.abschnitt{counter-increment:abschnitt;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  color:var(--text);border-top:2px solid var(--text);padding-top:6px}
h2.abschnitt::before{content:counter(abschnitt,decimal-leading-zero) "\00a0\00a0";color:var(--zaehler)}

/* ---------- Karten und Fragen: Kopfzeile, durchgezogene Trennlinien ---------- */
.karte,.ba-frage{border:1px solid var(--karterand);box-shadow:none}
.ba-frage{padding:0}
.ba-frage>.ba-frage-titel{margin:0;padding:10px 16px;background:var(--kartetief);border-bottom:1px solid var(--karterand);
  font-size:.7812rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.ba-frage>:not(.ba-frage-titel){margin-left:16px;margin-right:16px}
.ba-frage>:last-child{margin-bottom:14px}
.ba-frage>.ba-frage-titel+*{margin-top:12px}
.ba-gruppe{border-top:1px solid var(--karterand);padding-top:14px;margin-top:12px}
/* Meldungen in Karten kleben nie an Feld oder Kopfzeile: immer etwas Luft darüber. */
.ba-frage .hinweis,.karte>.hinweis{margin-top:10px}
.karte>.hinweis{margin-left:16px;margin-right:16px}

/* ---------- Meldungskästen: ohne Seitenstreifen ---------- */
.hinweis{font-size:.875rem;border-width:1px}
.ba-gemeinsam{border:0;background:var(--gemeinsambg);color:var(--gemeinsamtext);padding:6px 10px}

/* ---------- Kennzeichen und Zahlen: Festbreitenschrift ---------- */
.p{font-family:var(--mono);font-weight:400;font-size:.6875rem;padding:1px 6px;border:1px solid currentColor}
.formelmarke{font-family:var(--mono);border-width:1px}
.ba-kennwert{font-family:var(--mono)}

/* ---------- Analysen der Systemverwaltung (src/analysen.js) ----------
   Kennung (K1 …) in Festbreitenschrift vor dem Namen. */
.analyse-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin-bottom:12px}
.analyse-raster>.karte{margin-bottom:0;min-width:0}
.analyse.breit{grid-column:1/-1}
.analyse-id{font-family:var(--mono);font-weight:600;color:var(--zaehler);margin-right:4px}
.analyse-inhalt{padding:6px 16px 14px}
.analyse-werte{display:flex;flex-wrap:wrap;gap:8px 24px}
.analyse-wert{display:flex;flex-direction:column}
.analyse-wert .ba-kennwert{margin:0}
.analyse .tabellenrahmen{margin:6px 0}
.analyse-diagramm{margin:4px 0;max-width:720px}
.diagramm-svg{width:100%;height:auto;display:block}
.diagramm-svg .raster{stroke:var(--linie);stroke-width:1}
.diagramm-svg .achse{fill:var(--schwach);font-size:11px;font-family:var(--mono)}
.diagramm-svg .reihe{fill:none;stroke-width:2}
.diagramm-svg .reihe.r1{stroke:var(--marke)}
.diagramm-svg .reihe.r2{stroke:var(--phase-organisation)}
.diagramm-svg .reihe.r3{stroke:var(--phase-durchfuehrung)}
.diagramm-svg .saeule.r1{fill:var(--marke)}
.diagramm-svg .saeule.r2{fill:var(--phase-organisation)}
.diagramm-svg .saeule.r3{fill:var(--phase-durchfuehrung)}
.diagramm-svg .saeule.prognose{fill-opacity:.35;stroke:var(--marke);stroke-dasharray:3 2;stroke-width:1.2}
.diagramm-svg .budget{stroke:var(--text);stroke-dasharray:5 4;stroke-width:1.5}
.diagramm-svg .budget-text{fill:var(--text)}
.diagramm-legende{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.8125rem;color:var(--schwach)}
.diagramm-legende li{display:flex;align-items:center;gap:6px}
.diagramm-farbe{width:12px;height:12px;display:inline-block;background:var(--schwach)}
.diagramm-farbe.r1{background:var(--marke)}
.diagramm-farbe.r2{background:var(--phase-organisation)}
.diagramm-farbe.r3{background:var(--phase-durchfuehrung)}

/* ---------- Große Schrift am Handy ----------
   Bei „Groß“ und „Sehr groß“ wächst alles mit; auf 390 px Breite darf trotzdem nichts seitlich
   hinausragen. Kopfzeile und Bereichsmarke wachsen am schmalen Bildschirm nur begrenzt, Tabellen
   und lange Kennzeichen brechen um. */
@media(max-width:600px){
  html:not([data-schrift="normal"]) header.app h1{font-size:min(1.0625rem,21px)}
  html:not([data-schrift="normal"]) header.app .sub{font-size:min(.9375rem,18px)}
  html:not([data-schrift="normal"]) .bereich-marke{font-size:min(1rem,18px)}
  /* Reicht der Platz nicht, rutscht die Bereichsmarke in eine zweite Zeile, statt den Titel auf
     null zu drücken oder seitlich hinauszuragen. */
  html:not([data-schrift="normal"]) header.app{flex-wrap:wrap}
  html:not([data-schrift="normal"]) header.app .tx{min-width:55%}
}
/* Hinweis mit Kennzeichen vorne, aber ohne eigenen Textbehälter: als Fließtext setzen. Sonst wird
   jedes Wort und jeder Link zu einem eigenen Flex-Element, das nicht umbricht. */
.hinweis:has(> .p:first-child):not(:has(> .hinweis-text)){display:block}
.hinweis:has(> .p:first-child):not(:has(> .hinweis-text))>.p:first-child{margin-right:8px}
html:not([data-schrift="normal"]) td,html:not([data-schrift="normal"]) th{white-space:normal;overflow-wrap:anywhere}
html:not([data-schrift="normal"]) .p{white-space:normal;max-width:100%}

/* ---------- Abstände: kompakt und weit ----------
   „Kompakt“ am Rechner mit Maus, „weit“ an Touchgeräten (Tablet, Handy). Gesetzt von DARSTELLUNG
   in app2.js als data-dichte, wählbar unter Darstellung → Abstände. Kompakt verkleinert Fließtext
   und Felder auf 14/16 der Grundschrift und rückt Karten, Zeilen und Fragen enger zusammen; kleine
   Beschriftungen bleiben gleich groß, damit nichts unter die Lesbarkeit rutscht. Weit gibt allem
   mehr Luft und größere Treffflächen. Beides wirkt mit jeder Schriftgröße zusammen. html:where() hält die Spezifität niedrig, damit
   Sonderfälle wie kleine Knöpfe, Infoknöpfe und Kopfleistenknöpfe ihre eigenen Maße behalten. */
html:where([data-dichte="kompakt"]) body{font-size:.875rem}
html:where([data-dichte="kompakt"]) input,html:where([data-dichte="kompakt"]) select,
html:where([data-dichte="kompakt"]) textarea{font-size:.875rem;padding:6px 10px}
html:where([data-dichte="kompakt"]) button,html:where([data-dichte="kompakt"]) .knopf{padding:6px 12px}
html:where([data-dichte="kompakt"]) nav.seite a{font-size:.8125rem;padding:5px 10px}
html:where([data-dichte="kompakt"]) .karte,html:where([data-dichte="kompakt"]) .ba-frage{margin-bottom:10px}
html:where([data-dichte="kompakt"]) .zeile{padding:7px 12px;gap:10px}
html:where([data-dichte="kompakt"]) .karte>h3{padding:9px 12px 2px}
html:where([data-dichte="kompakt"]) h2.abschnitt{margin:18px 0 8px}
html:where([data-dichte="kompakt"]) .hinweis{padding:7px 10px;margin-bottom:10px}
html:where([data-dichte="kompakt"]) label.feld{margin-bottom:8px}
html:where([data-dichte="kompakt"]) .ba-frage>.ba-frage-titel{padding:7px 12px}
html:where([data-dichte="kompakt"]) .ba-frage>:not(.ba-frage-titel){margin-left:12px;margin-right:12px}
html:where([data-dichte="kompakt"]) .ba-frage>.ba-frage-titel+*{margin-top:8px}
html:where([data-dichte="kompakt"]) .ba-frage>:last-child{margin-bottom:10px}
html:where([data-dichte="kompakt"]) .ba-gruppe{padding-top:9px;margin-top:8px}

html:where([data-dichte="weit"]) input,html:where([data-dichte="weit"]) select,
html:where([data-dichte="weit"]) textarea{padding:11px 13px}
html:where([data-dichte="weit"]) button,html:where([data-dichte="weit"]) .knopf{padding:11px 16px}
html:where([data-dichte="weit"]) .karte,html:where([data-dichte="weit"]) .ba-frage{margin-bottom:20px}
html:where([data-dichte="weit"]) .zeile{padding:15px 18px;gap:14px}
html:where([data-dichte="weit"]) .karte>h3{padding:15px 18px 4px}
html:where([data-dichte="weit"]) h2.abschnitt{margin:32px 0 12px}
html:where([data-dichte="weit"]) .hinweis{padding:13px 15px;margin-bottom:20px}
html:where([data-dichte="weit"]) label.feld{margin-bottom:16px}
html:where([data-dichte="weit"]) .ba-frage>.ba-frage-titel{padding:12px 18px}
html:where([data-dichte="weit"]) .ba-frage>:not(.ba-frage-titel){margin-left:18px;margin-right:18px}
html:where([data-dichte="weit"]) .ba-frage>.ba-frage-titel+*{margin-top:14px}
html:where([data-dichte="weit"]) .ba-frage>:last-child{margin-bottom:18px}
html:where([data-dichte="weit"]) .ba-gruppe{padding-top:16px;margin-top:14px}