/* Tool-Plattform – helles, ruhiges Erscheinungsbild (Plan 003): weiße Seite, sehr helle Karten,
   klare Typohierarchie, einheitliche Abstände und deutliche Fokuszustände. */
:root {
  /* Plan 012, B1 (Leitfaden §2): Seite hellgrau, Karten weiß mit grauem Rand – kein Beige mehr */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --card: #ffffff;
  --stapel-rand: #ffffff; /* Plan 007, B21: trennt die Ebenen des Vorschau-Stapels */
  --field: #ffffff;
  --hover: #f2f4f7;
  --text: #1f2933;
  --text-2: #27313d;
  --muted: #4a5563;
  --placeholder: #6b7380;
  --border: #d0d5dd;
  --border-strong: #98a2b3;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff4ff;
  --accent-text: #ffffff;
  --ring: 0 0 0 3px rgba(37, 99, 235, .18);
  --ok: #067647;
  --ok-on: #ffffff;
  --ok-soft: #ecfdf3;
  /* Plan 007, B11 (F3): Menüzeile – nur Weiß, Schwarz und Blau */
  --nav-bg: #1e3a8a;
  --nav-text: #ffffff;
  --nav-hover-bg: #2c4a9e;
  --nav-active-bg: #ffffff;
  --nav-active-text: #1e3a8a;
  /* Plan 007, B30: Seitenüberschriften im Blau der Menüzeile */
  --titel: var(--nav-bg);
  --warn: #b54708;
  --warn-soft: #fffaeb;
  --err: #b42318;
  --err-soft: #fef3f2;
  --band: #ffd84d;
  --band-text: #2b2200;
  --radius: 12px;
  --radius-sm: 8px;
  --gap: var(--abstand-5);  /* Validierung 012, A3: Stufe 24 statt 20 */
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .18), 0 4px 8px -4px rgba(16, 24, 40, .06);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; font-size: 15px;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: proportional-nums; }  /* Plan 021, B29: Ziffern im Fließtext proportional */
/* Plan 021, B29/E3: tabellarische Ziffern nur, wo Zahlen untereinander stehen */
td.zahl, td.zeit, .eintrag-nr, .termin-zeit, .statusleiste .zahl { font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 6px; color: var(--titel); }
h2 { font-size: 1.15rem; font-weight: 600; margin: 24px 0 8px; }
.seitenkopf { margin-bottom: var(--abstand-6); }  /* Plan 012: Seitenkopf → erster Abschnitt 32 px */
.seitenkopf p { margin: 0; color: var(--muted); }
/* Plan 007, B27: Seitenkopf – Zurück-Link oben, darunter Überschrift und Aktionen in einer Zeile, vertikal mittig
   zueinander, Aktionen bündig rechts; Untertitel darunter. Etiketten und Menüsymbol mittig zur Überschrift. */
.seitenkopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px;
  flex-wrap: wrap; margin-bottom: 6px; }
.seitenkopf h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
/* Nutzerhinweis 7.10.26: Symbol vertikal mittig zur Schrift. Flex zentriert zur Zeilenbox, deren Mitte bei der
   h1-Schrift ≈ 0,1 em über der Mitte der Großbuchstaben liegt (gemessen: Symbol 2,5 px zu hoch; mit Ausgleich ±0,5 px).
   Die h2 mit Symbol (Karten, Kopfzeilen) liegen ohne Ausgleich mittig (gemessen: 0 bis −0,5 px). */
.seitenkopf h1 > svg.symbol { position: relative; top: .1em; }
.seitenkopf h1 .badge { font-size: .78rem; letter-spacing: 0; }
/* Plan 007, B22: Zurück-Link eine Ebene höher – deutlich sichtbar, große Klickfläche */
a.zurueck { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 8px 4px 0;
  color: var(--accent); font-weight: 600; text-decoration: none; }
a.zurueck:hover { text-decoration: underline; }
a.zurueck:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* Hinweisbalken KI-Texte (Plan 004, E24): rot fest, gelb für einen Tag ausblendbar */
.ki-balken {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 9px 16px; font-size: .92rem; text-align: center; border-bottom: 1px solid transparent;
}
.ki-balken.rot { background: var(--err-soft); color: var(--err); border-color: #fecdca; }
.ki-balken.gelb { background: var(--warn-soft); color: var(--warn); border-color: #fedf89; }
.ki-balken[hidden] { display: none; }
.ki-balken a { color: inherit; font-weight: 600; }
.ki-balken-aus {
  font: inherit; font-size: .85rem; color: inherit; background: transparent; cursor: pointer;
  border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 2px 10px;
}

/* Kopfzeile */
/* Plan 006, B1: Marke links, Hauptmenü mittig (drei Spalten, die äußeren gleich breit) */
/* Plan 007, B11: Menüzeile dunkelblau, nur Weiß/Schwarz/Blau (eigene Tokens), ohne Transparenz */
:root { --kopfleiste-hoehe: 60px; }  /* Plan 017, N8: auch Haltelinie mitlaufender Tabellenköpfe */
header.top { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px; padding: 0 32px; min-height: var(--kopfleiste-hoehe); background: var(--nav-bg);
  color: var(--nav-text); border-bottom: 1px solid var(--nav-bg); }
@media (max-width: 1100px) { header.top { grid-template-columns: 1fr; justify-items: center; padding: 8px 16px; } }
header.top .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
  text-decoration: none; color: var(--nav-text); }
header.top .brand::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: currentColor; }
nav.tool-nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
nav.tool-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--nav-text);
  font-weight: 500; transition: background .15s, color .15s; }
nav.tool-nav a:hover { background: var(--nav-hover-bg); color: var(--nav-text); }
nav.tool-nav a.active { background: var(--nav-active-bg); color: var(--nav-active-text); }
nav.tool-nav a:focus-visible { outline: 2px solid var(--nav-text); outline-offset: 2px; }
/* Plan 008, §2: Arbeit (Inhalte · Planer) ‖ Einrichtung (Konfiguration · Systemstatus); Zahl „Zur Freigabe“ */
nav.tool-nav .menue-trenner { width: 1px; margin: 6px 10px; background: rgba(255, 255, 255, .35); }
nav.tool-nav a.menue-zahl { min-width: 18px; height: 18px; padding: 0 5px; justify-content: center;
  border-radius: 999px; background: var(--band); color: var(--band-text); font-size: .7rem; font-weight: 700;
  line-height: 1; box-shadow: 0 0 0 2px var(--nav-bg); }
/* Plan 031, V1: Die Zahl verschiebt keinen Menüpunkt. Nutzerwunsch 13.10.26: Sie sitzt als Plakette an der oberen
   rechten Ecke ihres Menüpunkts, statt rechts daneben Platz zu reservieren – so sind die Abstände links und rechts jeder
   Trennlinie gleich, mit und ohne Zahl. Zusammen mit `scrollbar-gutter` unten steht das Menü auf jeder Seite gleich. */
nav.tool-nav .menue-mit-zahl { position: relative; display: inline-flex; }
nav.tool-nav .menue-mit-zahl a.menue-zahl { position: absolute; top: -5px; right: -5px; margin: 0; z-index: 1; }
html { scrollbar-gutter: stable; }
nav.tool-nav a.menue-zahl:hover { background: #fff; color: var(--nav-active-text); }
/* Nutzerwunsch 10.10.26: Spalte „Aktive Zeitpläne“ unter Inhalte – grüner Haken mit Zahl, grau bei inaktivem Inhalt;
   ohne aktiven Zeitplan das Label „Kein aktiver Zeitplan“ (`badge warn`, Plan 031, V8) */
.zeitplan-aktiv { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; }
.zeitplan-aktiv.gedaempft { color: var(--muted); font-weight: 400; }
/* Nutzerwunsch 10.10.26: Zahl der Probleme am Systemstatus in Rot, abgesetzt von der gelben Freigabe-Zahl */
nav.tool-nav a.menue-zahl.problem { background: var(--err); color: #fff; }
nav.tool-nav a.menue-zahl.problem:hover { background: #fff; color: var(--err); }

/* Plan 007, B2: eine Breite für alle Seiten (die frühere Breite von „Übersicht“) */
main { max-width: 1760px; margin: 0 auto; padding: 32px; }

/* Startseite */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; color: var(--text); text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tile:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.tile img, .tile svg { width: 64px; height: 64px; }
.tile .desc { color: var(--muted); font-size: .9rem; }

/* Plan 012, B1 (Leitfaden §4): feste Abstandsstufen – Abstände nur über diese Tokens */
:root { --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 24px; --abstand-6: 32px;
  --abstand-7: 48px;
  --abstand-gruppe: 42px;  /* Nutzerhinweis 8.10.26, nur Reiter Konfiguration: „Allgemein“ → „Accounts“ 30 % mehr (32 × 1,3) */
  --abstand-gruppentitel: 21px; }  /* dito: Gruppenüberschrift → erste Kartenüberschrift 30 % mehr (16 × 1,3) */
/* Nutzerentscheid 8.10.26 (Leitfaden §5): zwei Höhen für Knöpfe – Standard (auch Eingabefelder) und Klein
   (Tabellen, neben Text, Abschnitts- und Kartenköpfe) */
:root { --knopf-hoehe: 36px; --knopf-hoehe-klein: 30px; }
/* Nutzerentscheid 10.10.26 (Leitfaden §5): Bedienelemente der Filterzone in der ganzen App 32 px hoch; Formularfelder
   und Knöpfe bleiben bei `--knopf-hoehe` */
:root { --filter-hoehe: 32px; }

/* Plan 012, B2/B3 (Leitfaden §1, U1): Seitenaufbau – Gruppe › Abschnitt (Kopf, Filterzone, Karte). Eine Gruppe ist
   `section.gruppe` mit `h2.gruppe-titel`; ein Abschnitt `section.abschnitt` mit `header.abschnitt-kopf` (h2 mit Symbol,
   ggf. Hilfe-Knopf; rechts `.kopf-aktionen`), optional `.filterzone`, dann die Karte. */
.gruppe { margin: 0 0 var(--abstand-6); }
.gruppe:has(> .einstellungen-raster) { margin-bottom: var(--abstand-gruppe); }  /* nur Konfiguration */
.gruppe:has(> .einstellungen-raster, > .konten-raster) > .gruppe-titel { margin-bottom: var(--abstand-gruppentitel); }
.gruppe-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--abstand-4); font-size: 1.3rem;
  font-weight: 650; line-height: 1.4; color: var(--titel); }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3);
  flex-wrap: wrap; margin: 0 0 var(--abstand-3); }
.abschnitt-kopf > h2 { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; font-size: 1.1rem;
  font-weight: 600; line-height: 1.5; color: var(--titel); }
.abschnitt-kopf .kopf-aktionen { margin-left: auto; }
/* Knöpfe im Abschnittskopf nicht höher als die Überschrift (wie bisher im Kartenkopf, Plan 010, B9) */
.abschnitt-kopf .kopf-aktionen .btn { height: var(--knopf-hoehe-klein); padding: 0 10px; font-size: .85rem; line-height: 1.25; }
.filterzone { display: flex; flex-direction: column; gap: var(--abstand-3); margin: 0 0 var(--abstand-4); }
.filterzone > .filterleiste, .filterzone > .statusleiste { margin: 0; }
/* Tabellen (Leitfaden §6): Datum und Uhrzeit nie umbrechen, Zahlen rechtsbündig */
td.zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Nutzerentscheid 10.10.26: rechts 48 px Luft – sonst klebt die Zahl am linksbündigen Inhalt der Folgespalte; die Spalte
   nur so breit wie ihr Inhalt (`width: 1%`), damit freier Platz nicht vor der Zahl liegt */
th.zahl, td.zahl { text-align: right; font-variant-numeric: tabular-nums; padding-right: 48px; width: 1%; white-space: nowrap; }

/* Karten – Plan 012 (Leitfaden §1, §4): nur Inhalt, keine Überschrift in der Karte; Innenrand 24 px. Die frühere
   Kastenüberschrift (Plan 010, B7) steht jetzt als Abschnittskopf über der Karte. */
/* Plan 019, B8: Kartenrand mittel (eigenes Token – `--border` färbt auch Tabellenzeilen, Reiter- und Trennlinien);
   Kopf der Post-Karte Blaugrau */
:root { --karte-rand: #b4bcc8; --kartenkopf-bg: #bac8dc; }
.card { background: var(--card); border: 1px solid var(--karte-rand); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--abstand-5); margin-bottom: var(--gap); }
.abschnitt > .card:last-child, .abschnitt > .card:only-of-type { margin-bottom: 0; }
/* Das erste Element der Karte bringt keinen eigenen oberen Abstand mit (versteckte Felder davor zählen nicht) */
.card > :first-child, .card > input[type="hidden"] + :not(input),
.card > .texte-fortschritt:not(:has(*)) + * { margin-top: 0; }
/* U15: Kopf der Listenkarte (Beitrag im Planer) – Inhalt der Karte, mit Trennlinie */
.post-karte > header { margin: 0 0 var(--abstand-4); padding-bottom: var(--abstand-3); border-bottom: 1px solid var(--border);
  align-items: center; }
/* Plan 018, B47; Plan 019, B8: Kopfzeile bündig bis an Rand und obere Ecken der Karte (negativer Außenabstand in Höhe
   des Karteninnenabstands), Blaugrau, Trennlinie im Kartenrand; seitlich der Karteninnenabstand, damit Titel und Felder
   an derselben linken Kante beginnen. „Post: Titel“ 1 pt größer. Titel → erstes Label 16 px, zwischen Labels 8 px. */
.post-karte > header.kopf-zeile { background: var(--kartenkopf-bg); border-bottom-color: var(--karte-rand);
  margin: calc(-1 * var(--abstand-5)) calc(-1 * var(--abstand-5)) var(--abstand-4);
  /* +1 px oben und unten: der Flex-Aufbau ist 2 px niedriger als die frühere Textzeile – Kopfhöhe bleibt (B8) */
  padding: calc(var(--abstand-3) + 1px) var(--abstand-5);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.post-karte .kopf-titel { display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-4); }
.post-karte .kopf-labels { display: flex; align-items: center; flex-wrap: wrap; gap: var(--abstand-2); }
.post-karte .kopf-labels:empty { display: none; }
.post-karte .post-titel { font-size: calc(1em + 1pt); }
.card > .texte-fortschritt:not(:has(*)) { display: none; }  /* leerer Fortschrittsbereich (htmx-Ziel) */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); }

/* Konfiguration: Abschnitte zentriert; Einstellungen in zwei gleich hohen Spalten,
   Accounts über die volle Breite – Knopfzeilen schließen jeweils unten bündig ab. */
.abschnitt { margin: 0 0 var(--abstand-6); }  /* Plan 012: Abschnitt → nächster Abschnitt 32 px */
.einstellungen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--abstand-6) var(--gap); }
.konten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--abstand-6) var(--gap); }  /* Abschnitt → Abschnitt 32 */
.einstellungen-raster .card, .konten-raster .card { margin-bottom: 0; display: flex; flex-direction: column; }
/* Plan 012, S6: Rasterzellen sind Abschnitte (Kopf + Karte); die Karten füllen die Zelle */
.einstellungen-raster > .abschnitt, .konten-raster > .abschnitt { margin: 0; display: flex; flex-direction: column; }
.einstellungen-raster > .abschnitt > .card, .konten-raster > .abschnitt > .card { flex: 1; }
.einstellungen-raster .card form, .konten-raster .card form { flex: 1; display: flex; flex-direction: column; }
.konfig-karte .actions { margin-top: auto; padding-top: 24px; }
/* Nutzerhinweis 8.10.26 (Leitfaden §5): Reiter Konfiguration – Knöpfe untereinander, alle so breit wie die Eingabefelder */
.einstellungen-raster .konfig-karte .actions, .konten-raster .konfig-karte .actions { flex-direction: column; align-items: stretch; }
.einstellungen-raster .konfig-karte .actions > .btn, .konten-raster .konfig-karte .actions > .btn { width: 100%; justify-content: center; }
/* Nutzerhinweis 8.10.26: in Konfigurationskarten nutzen ALLE Eingabefelder und Knöpfe die Breite der Karte – auch Zahl,
   Uhrzeit und „Datei auswählen“ (sonst gilt die schmale Zahlenbreite aus Plan 010, B10) */
.einstellungen-raster .konfig-karte input[type=number], .konten-raster .konfig-karte input[type=number],
.einstellungen-raster .konfig-karte input[type=time], .konten-raster .konfig-karte input[type=time] { width: 100%; }
.konten-raster .konfig-karte label.datei-knopf { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
/* Erfolgreich getestete Verbindung: grüner Rand in derselben Linienstärke wie sonst grau */
.konfig-karte.getestet, .getestet > .konfig-karte { border-color: var(--ok); }  /* Plan 012, U5: Klasse am Abschnitt */
/* Plan 007, B13: gefüllter grüner Kreis, weißer Haken – hebt sich vom Beige ab */
.haken { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ok); color: var(--ok-on); font-size: .75rem; font-weight: 700;
  border: 1px solid var(--ok); }
.hint { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft);
  color: #1e3a8a; font-size: .9rem; }
.hint:empty { display: none; }

/* Popup – Plan 016, B12 (Leitfaden §8a, Vorbild Windows 11 / Fluent „ContentDialog“): weiße Fläche, Radius 8 px,
   Titel in Textfarbe; die Statusfarbe trägt nur das Symbol in der Titelzeile, nie der Meldungstext. */
dialog.popup { border: none; border-radius: var(--radius-sm); padding: var(--abstand-5); min-width: 340px;
  max-width: 520px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-lg); }
dialog.popup::backdrop { background: rgba(16, 24, 40, .4); backdrop-filter: blur(2px); }
/* Plan 031, V3: Das Meldungs-Popup kommt geöffnet, aber nicht modal vom Server (`<dialog open data-meldung>`, Plan 008,
   B13) und stand bis zum Ausführen von app.js oben im Fluss – erst `showModal()` setzte es in die Mitte (gemessen 163 px
   Sprung). Es steht deshalb von Anfang an dort, wo es modal steht: fest in der Fenstermitte, über der Kopfleiste. Ohne
   JavaScript bleibt es so sichtbar. Wächter: tests/test_plan031_popups.py */
dialog.popup[data-meldung][open]:not(:modal) { position: fixed; inset: 0; margin: auto; z-index: 100;
  max-height: calc(100% - 2em - 6px); }
dialog.popup h3 { margin: 0 0 var(--abstand-3); font-size: 1.1rem; font-weight: 600; color: var(--text); }
dialog.popup .popup-titel { display: flex; align-items: center; gap: var(--abstand-3); margin-bottom: var(--abstand-3); }
dialog.popup .popup-titel h3 { margin: 0; }
/* Statussymbol 20 px: gefüllter Kreis in der Statusfarbe, weißes Zeichen – Form und Farbe nur hier */
dialog.popup .status-symbol { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #ffffff; font-size: 12px;
  font-weight: 700; line-height: 1; }
dialog.popup .status-symbol::before { content: "i"; }
dialog.popup.success .status-symbol { background: var(--ok); }
dialog.popup.success .status-symbol::before { content: "✓"; }
dialog.popup.error .status-symbol { background: var(--err); }
dialog.popup.error .status-symbol::before { content: "✕"; }
dialog.popup.warning .status-symbol { background: var(--warn); }
dialog.popup.warning .status-symbol::before { content: "!"; }
/* Text bündig unter dem Titel, nach dem Symbol eingerückt (20 px Symbol + 12 px Abstand) */
dialog.popup .popup-titel ~ .meldungs-liste, dialog.popup .popup-titel ~ .meldung,
dialog.popup .popup-titel ~ .zeit { margin-left: calc(20px + var(--abstand-3)); }
dialog.popup .meldung { margin: 0 0 var(--abstand-2); color: var(--text); }
dialog.popup .zeit { margin: 0; font-size: .85rem; color: var(--muted); }
dialog.popup .actions { justify-content: flex-end; margin-top: var(--abstand-5); }
/* Warte-Hinweis vor langsamen Seiten: verschwindet mit dem Seitenwechsel von selbst */
dialog.popup.warten { display: flex; align-items: center; gap: 14px; min-width: 300px; }
dialog.popup.warten:not([open]) { display: none; }
dialog.popup.warten p { margin: 0; color: var(--text-2); }
dialog.popup.warten .popup-links { margin-top: 6px; font-size: .88rem; }
/* Plan 006, B5: Mehrfachauswahl als Checkboxliste */
fieldset.checkbox-liste { border: 0; padding: 0; margin: 0 0 16px; }
fieldset.checkbox-liste legend { font-weight: 600; font-size: .9rem; color: var(--text-2); margin-bottom: 6px; padding: 0; }
fieldset.checkbox-liste label { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 0 0 4px; cursor: pointer; }
.kreisel { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid var(--border);
  border-top-color: var(--accent); animation: kreisel .8s linear infinite; }
@keyframes kreisel { to { transform: rotate(360deg); } }

/* Tabellen */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }  /* Plan 008, B7: alle Tabellen */
/* Plan 010, B12: Spaltenköpfe dunkel und fett in Großbuchstaben, darunter eine 2-px-Linie; Zeilenköpfe in normaler
   Schreibung, dunkel, halbfett. Sortierpfeile und das Blau der aktiven Sortierung bleiben. */
thead th { color: var(--text); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--border-strong); }
tbody th { color: var(--text); font-weight: 600; text-transform: none; letter-spacing: 0; }
tbody tr:hover td { background: rgba(242, 244, 247, .6); }

/* Formulare */
form p, .field { margin: 0 0 16px; }
label { display: block; font-weight: 600; font-size: .9rem; color: var(--text-2); margin-bottom: 6px; }
/* Plan 009, B22: jeder verwendete Eingabetyp gehört hierher (Wächter test_plan009_ap11_zeitplan_felder.py) */
input[type=text], input[type=url], input[type=number], input[type=password], input[type=time], input[type=email],
input[type=search],
input[type=date], select, textarea {
  width: 100%; padding: 6px 12px; min-height: var(--knopf-hoehe); box-sizing: border-box; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--field); color: var(--text); font: inherit;
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s;
}
input[type=text], input[type=url], input[type=number], input[type=password], input[type=time], input[type=email],
input[type=search], input[type=date], select { height: var(--knopf-hoehe); }  /* einzeilig: genau Knopfhöhe */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input::placeholder { color: var(--placeholder); }
input:disabled, select:disabled, textarea:disabled { background: var(--hover); color: var(--muted);
  box-shadow: none; cursor: not-allowed; opacity: 1; }
/* Plan 010, B10: Felder füllen ihre Spalte (keine 640-px-Grenze); Zahlen- und Uhrzeitfelder einheitlich schmal;
   Textfelder wachsen mit dem Inhalt bis 24 Zeilen */
input[type=number], input[type=time] { width: 160px; max-width: 100%; }
textarea { min-height: 120px; field-sizing: content; max-height: calc(24lh + 20px);
  resize: vertical; }  /* Plan 016, B14: nur die Höhe ist veränderbar, die Breite folgt dem Formular */
/* Plan 025, B4: KI-Prompt ohne Inhalt genau drei Textzeilen hoch (Innenabstand 2 × 6 px plus Rahmen 2 × 1 px), wächst mit
   dem Text (field-sizing) und bleibt in der Höhe veränderbar */
.ki-prompt textarea { min-height: calc(3lh + 14px); }
input[type=file] { font: inherit; font-size: .9rem; color: var(--text-2); }
input[type=file]::file-selector-button { font: inherit; margin-right: 10px; padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); }
/* Plan 007, B14: Erklärungen stehen im Hilfe-Popup; sichtbar unter dem Feld bleibt nur ein Zustand („gesetzt …“) */
.zustand { color: var(--muted); font-size: .82rem; display: block; margin-top: 5px; }
/* Plan 036, P4: Zustand „(eingerichtet über Railway)“ unter dem gesperrten Datei-Knopf – grün (Token OK), mittig */
.zustand.zustand-ok { color: var(--ok); text-align: center; font-weight: 600; }
label.datei-knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.hilfe-knopf { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  margin: 0 0 0 6px; padding: 0; border: 1px solid var(--accent); border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-family: inherit; font-size: .72rem; font-weight: 700;
  line-height: 1; text-align: center; cursor: pointer; vertical-align: middle; }
/* Plan 008, B11: blau mit weißem „?“ (Kontrast 5,2 : 1, WCAG AA); das Zeichen steht über inline-flex mittig */
.hilfe-knopf:hover, .hilfe-knopf:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover);
  outline: none; box-shadow: var(--ring); }
/* Bezeichner mit Hilfe-Knopf: Knopf in derselben Zeile wie der Bezeichner */
label:has(+ .hilfe-knopf) { display: inline; }  /* lange Bezeichner brechen um, der Knopf bleibt am letzten Wort */
/* Nutzerhinweis 7.10.26 (Folgefehler AP16): Knopf mittig zur Schrift des Bezeichners; das Eingabefeld beginnt wie
   ohne Knopf in einer eigenen Zeile unter dem Bezeichner */
.hilfe-knopf { vertical-align: 1px; }
.hilfe-popup + input:not([type=checkbox]):not([type=radio]), .hilfe-popup + select, .hilfe-popup + textarea,
.hilfe-popup + .geheim-feld { display: block; margin-top: 8px; }
.hilfe-popup + .hashtag-feld { display: flex; margin-top: 8px; }  /* Plan 008, B15: Vorspann links, Eingabe rechts */
.hilfe-popup { max-width: 320px; margin: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); font-size: .88rem; font-weight: 400;
  line-height: 1.45; text-transform: none; letter-spacing: normal; }
/* Plan 009, B6: Das Popup erscheint direkt am Knopf (CSS Anchor Positioning; Anker je Knopf über anchor-name im
   Template): darunter, linksbündig zum Knopf; fehlt Platz, klappt es nach oben bzw. links. Ohne Unterstützung setzt
   app.js die Lage (Rückfall). Meldungs- und Bestätigungs-Popups bleiben mittig (Plan 008, B13). */
@supports (position-area: bottom) {
  .hilfe-popup { inset: auto; margin: 6px 0; position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
}
/* Plan 006, B4 (W4): Abstand über dem Trenner 25 % kleiner – Feldabstand 16 + 8 statt 16 + 16 */
/* Symbole (Plan 006, B1): Lucide inline, Farbe vom Text */
svg.symbol { flex: none; vertical-align: -3px; }
/* Dateiauswahl als Knopf (Schlüsseldateien): das Browserfeld bleibt bedienbar, aber unsichtbar */
label.datei-knopf { display: inline-flex; margin: 0; position: relative; }
label.datei-knopf:focus-within { box-shadow: var(--ring); }
.datei-gewaehlt { margin-left: 10px; color: var(--ok); font-size: .88rem; font-weight: 600; }
/* Plan 009, B17: Knopf und vollständiger Auswahltext in einer Zeile unter dem Bezeichner */
.hilfe-popup + .datei-zeile { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hilfe-popup + label.datei-knopf { margin-top: 8px; }  /* Nutzerhinweis 8.10.26: gleicher Abstand zum Bezeichner wie jedes Feld */
.datei-auswahl { color: var(--text-2); font-size: .88rem; }
/* Plan 009, B15/B16: Assistent – Wahl in Kacheln, Angaben in zwei Karten eines Formulars */
.assistent-karten { display: grid; gap: var(--abstand-6); }  /* Validierung 012, A3: Abschnitt → Abschnitt 32 */
.assistent-karten > .card, .assistent-karten > .abschnitt, .assistent-karten > .abschnitt > .card { margin: 0; }  /* Plan 012: Abstand über das Raster */
.errorlist { color: var(--err); margin: 4px 0; padding-left: 18px; font-size: .9rem; }

/* Kontrollkästchen in Formularen als Schalter */
form p > input[type=checkbox] { appearance: none; -webkit-appearance: none; display: block; position: relative;
  width: 38px; height: 22px; margin: 2px 0 0; border-radius: 999px; background: var(--border-strong);
  cursor: pointer; transition: background .15s; }
form p > input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: transform .15s; }
form p > input[type=checkbox]:checked { background: var(--accent); }
form p > input[type=checkbox]:checked::after { transform: translateX(16px); }
form p > input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--ring); }
input[type=checkbox] { accent-color: var(--accent); }

/* Buttons */
/* Plan 010, B9: vier Stufen, je eine Klasse an dieser Stelle. 1 Hauptaktion `.btn.primary` blau gefüllt;
   2 Nebenaktion `.btn` weiß mit blauer Umrandung und Schrift (gewählt: `.btn.aktiv` blau gefüllt); 3 Abbrechen
   `.btn.abbrechen` hellgrau gefüllt mit grauem Rahmen; 4 Zerstörend `.btn.danger` rot gefüllt. Knöpfe sind so breit wie ihr Text. */
:root { --knopf-neben-bg: #eff4ff; --knopf-neben-bg-hover: #dbe6fe;  /* Nebenaktion gefüllt (8.10.26) */
  --abbrechen-bg: #eaecf0; --abbrechen-bg-hover: #d0d5dd; --abbrechen-text: #344054; --danger-hover: #912018; }
.btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; padding: 0 16px;
  height: var(--knopf-hoehe); box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--knopf-neben-bg);
  color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem; text-decoration: none;
  box-shadow: var(--shadow); transition: background .15s, border-color .15s, box-shadow .15s;
  /* Plan 015, B12: nie innerhalb umbrechen, nie schmaler als der Text – reicht der Platz nicht, rollt die Karte */
  white-space: nowrap; min-width: max-content; }
/* Plan 016, B16: Symbol und Text genau mittig zueinander. Flex zentriert die Zeilenbox; deren Mitte liegt bei Segoe UI
   (Aufstieg 2210, Abstieg 514, Versalhöhe 1434 je 2048) um (2210 − 514 − 1434) / 2 / 2048 ≈ 0,064 em über der Mitte der
   Großbuchstaben – der Text wirkte zu tief. Das Symbol rückt um diesen Betrag nach unten; reine Symbolknöpfe (immer mit
   `aria-label`, ohne Text) bleiben mittig im Knopf. Wächter: tests/test_plan016_knopf_symbole.py */
.btn:not([aria-label]) > svg.symbol { position: relative; top: .064em; }
.btn:hover { background: var(--knopf-neben-bg-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.primary, .btn.aktiv { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover, .btn.aktiv:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Nutzerhinweis 8.10.26: Abbrechen mit sichtbarem Rahmen (Farbe der Feldrahmen) – ohne ihn verschwand der hellgraue
   Knopf auf dem hellgrauen Seitenhintergrund. Gilt für alle Abbrechen-Knöpfe und den Bestätigungsdialog. */
.btn.abbrechen { background: var(--abbrechen-bg); border-color: var(--border-strong); color: var(--abbrechen-text); }
.btn.abbrechen:hover { background: var(--abbrechen-bg-hover); border-color: var(--abbrechen-text); }
.btn.danger { background: var(--err); border-color: var(--err); color: #ffffff; }
.btn.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
/* Ausnahme: das „ד einer Bedingungszeile bleibt ein rotes Symbol ohne Füllung */
.symbol-entfernen { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; border: 0; background: transparent; color: var(--err); font: inherit; font-size: 1.3rem; font-weight: 600;
  line-height: 1; cursor: pointer; border-radius: var(--radius-sm); }
.symbol-entfernen:hover { background: var(--err-soft); }
.symbol-entfernen:focus-visible { outline: none; box-shadow: var(--ring); }
/* Plan 015, B13: inaktiv grau wie inaktive Felder – für alle Knopfarten, ohne Durchsichtigkeit und ohne Hover.
   Plan 016, B15: mit eigenem Rand (--border) – ohne ihn wirkte der Knopf wie ein Label und verschwand auf dem
   Seitenhintergrund; Schrift #667085 (4,5:1 auf der Fläche), sichtbar heller als „Abbrechen“ */
:root { --knopf-inaktiv-text: #667085; }
.btn:disabled, .btn:disabled:hover, .btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover {
  background: var(--hover); color: var(--knopf-inaktiv-text); border-color: var(--border); box-shadow: none; opacity: 1;
  cursor: not-allowed; transition: none; }
/* Knopfzeile: links, so breit wie der Text; der Hilfe-Knopf steht vertikal mittig zu den Knöpfen */
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.actions > .hilfe-knopf { vertical-align: 0; }
/* Plan 014, B8: im Assistenten „Neuer Inhalt“ steht Abbrechen am rechten Rand, bündig mit der Karte darüber */
#assistent-form .actions > .btn.abbrechen.rechts { margin-left: auto; }
/* Nutzerhinweis 11.10.26: Eine Knopfzeile direkt nach einem Abschnitt (Assistent) steht wie die Aktionszeile der
   Inhaltsseite 32 px unter der Karte (Leitfaden §5) – den Abstand trägt der Abschnitt; vorher 32 + 24 = 56 px */
.abschnitt + .actions { margin-top: 0; }
.inline-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Plan 015, B10: quadratischer Symbolknopf (Nebenaktion) – im Seitenkopf rechts neben der Hauptaktion höchstens einer;
   die Zahl steht als Abzeichen oben rechts */
.btn.symbolknopf { width: var(--knopf-hoehe); padding: 0; position: relative; }
.btn.klein.symbolknopf { width: var(--knopf-hoehe-klein); }
.btn.symbolknopf .abzeichen { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px;
  box-sizing: border-box; border-radius: 9px; background: var(--accent); color: var(--accent-text); font-size: .72rem;
  font-weight: 700; line-height: 18px; text-align: center; }
/* Plan 015, B7: Aktionsmenü „⋯“ – Hauptknopf plus aufklappende Liste (Popover-API, Lage wie die Hilfe-Popups) */
.aktion-gruppe { display: inline-flex; gap: 6px; align-items: center; }
.aktionsmenue-liste { min-width: 200px; margin: auto; padding: 6px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); text-align: left; }
.aktionsmenue-liste:popover-open { display: flex; flex-direction: column; }
.aktionsmenue-liste form { margin: 0; }
.menue-eintrag { display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: .92rem; text-align: left; text-decoration: none;
  white-space: nowrap; cursor: pointer; }
.menue-eintrag:hover, .menue-eintrag:focus-visible { background: var(--hover); outline: none; }
.menue-eintrag.danger { color: var(--err); font-weight: 600; }
.menue-eintrag.danger:hover, .menue-eintrag.danger:focus-visible { background: var(--err-soft); }
/* Nutzerentscheid 10.10.26: Hauptaktion („Post freigeben“) grün und fett – Gegenstück zum roten Zerstörenden */
.menue-eintrag.haupt { color: var(--ok); font-weight: 600; }
.menue-eintrag.haupt:hover, .menue-eintrag.haupt:focus-visible { background: var(--ok-soft); }
.menue-trenner { margin: 6px 4px; border: 0; border-top: 1px solid var(--border); }
@supports (position-area: bottom) {
  .aktionsmenue-liste { inset: auto; margin: 6px 0; position-area: bottom span-left;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
}
/* Plan 015, B9: „… löschen“ rechtsbündig in der Knopfzeile der Einstellungen */
.actions > .btn.rechts { margin-left: auto; }
/* Plan 016, B5 (F5): Aktionszeile einer Seite – ohne Kasten auf dem Seitenhintergrund; Speichern/Abbrechen links,
   Löschen rechts. Plan 023, P4 (Nutzerentscheid 11.10.26): sie steht im Formular der linken Spalte (`.detail-haupt`)
   direkt nach dem Abschnitt „Beitrag“ – dessen Abstand (32 px) trennt sie von der Karte, unabhängig von der Höhe der
   Vorschau; die Spalte gibt die Breite vor (Löschknopf fluchtet mit den Kästen, Plan 018, B37). Vorher stand sie unter
   dem ganzen Raster: bei kurzer Karte bis 134 px Lücke. */
.actions.seiten-aktionen { margin-top: 0; }
/* Plan 025, B3: die Knopfzeile der Serie steht zwischen den Karten und „Beiträge“ – 32 px bis zum nächsten Abschnitt */
.actions.seiten-aktionen + .abschnitt { margin-top: var(--abstand-6); }
/* Plan 025, B5: Regelkarte zweispaltig, wenn die Karte zwei Spalten von mindestens 360 px trägt (32 px Abstand), sonst
   untereinander; maßgeblich ist nur die Kartenbreite (Serie, Einzelbeitrag, Assistent). Die Zustandszeile steht darüber
   über die ganze Breite. */
.regel-raster { display: grid; column-gap: var(--abstand-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(360px, calc((100% - var(--abstand-6)) / 2))), 1fr)); }  /* höchstens zwei */
.regel-raster > p { margin-top: 0; }
/* Plan 028, S8: ein allein stehendes letztes Feld reicht in der zweispaltigen Darstellung über beide Spalten (Muster,
   nicht Feldname); einspaltig ändert sich nichts */
.regel-raster > p:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inline-actions form { margin: 0; }

/* Status */
/* Plan 010, B8: Umrandung jedes Labels mit mindestens 3:1 Kontrast zum Kastenhintergrund (WCAG 2.2, 1.4.11) –
   Farben nur über diese Tokens. Art („Einzelbeitrag“/„Serie“) in einem Violett; Grün/Orange/Rot sind Status. */
/* Nutzerentscheid 8.10.26: Labels ohne Rand – nur getönte Fläche (ersetzt Plan 012, B1 „Labelrand“) */
/* Plan 016, B4: Art-Fläche kräftiger (#ebe9fe, Schrift 6,5:1) – #f4f3ff verschwand auf dem Seitenhintergrund */
/* Plan 021, B22: Art- und Neutral-Fläche nochmals kräftiger (Abstand zum Hintergrund ≥ 25, gemessen 40,8 bzw. 29,9);
   die neutrale Label-Fläche hat ein eigenes Token – `--hover-stark` färbt auch Kalendertermine und bleibt */
:root { --art-text: #5925dc; --art-bg: #d4cdfb; --label-neutral-bg: #d3d8e0;
  /* Plan 016, B4: Labels auf dem Seitenhintergrund (Seitenkopf, Abschnittskopf) mit kräftigeren Flächen */
  --hover-stark: #eaecf0; --ok-stark: #dcfae6; --warn-stark: #fef0c7; --err-stark: #fee4e2; }
/* Plan 018, B20: überall die kräftigen Flächen (bisher nur auf dem Seitenhintergrund) – ein Satz Farbwerte; „Entwurf“
   hebt sich damit auch auf Weiß ab. Schrift jeweils ≥ 4,5:1 (Wächter test_plan018_ap5_bausteine.py) */
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--label-neutral-bg); color: var(--text-2); border: 0; white-space: nowrap;  /* Plan 018, AP16: nie umbrechen */
  cursor: default; }  /* Nutzerhinweis 8.10.26: über Labels der normale Mauszeiger, kein Textcursor */
/* Plan 020, N8: Labelschrift kräftiger – dunklere Töne derselben Farbe für mehr Kontrast zum Label-Hintergrund */
/* N10 (Nutzerhinweis 10.10.26: noch zu blass): nochmals dunkler und fetter */
:root { --label-ok: #054f31; --label-warn: #7a2e0e; --label-err: #7a1a14; --label-art: #3b1a8f; --label-neutral: #101828; }
.badge { color: var(--label-neutral); font-weight: 700; }
.badge.ok { color: var(--label-ok); background: var(--ok-stark); }
.badge.warn { color: var(--label-warn); background: var(--warn-stark); }
.badge.err { color: var(--label-err); background: var(--err-stark); }
.badge.art { color: var(--label-art); background: var(--art-bg); }
.muted { color: var(--muted); }
.notice { color: var(--warn); }
/* Plan 008, B13: Rückmeldungen nur als Popup (templates/_meldungen.html) */
/* Plan 016, B12: Meldungen als schlichte Absätze – keine Fläche, kein Rahmen, keine Statusfarbe, 8 px Abstand */
/* Validierung 016, B4: nur oben/unten zurücksetzen – die Einrückung unter den Titel (oben, .popup-titel ~) bleibt */
dialog.popup.meldungen .meldungs-liste { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; }
dialog.popup.meldungen li { margin: 0 0 var(--abstand-2); padding: 0; color: var(--text); }
dialog.popup.meldungen li:last-child { margin-bottom: 0; }
[aria-invalid=true] { border-color: var(--err); }

.preview img, .preview video { max-width: 240px; max-height: 300px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); }
.thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.thumbs img, .thumbs video, .thumbs .medium-kachel { width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
  background: var(--hover); display: flex; align-items: center; justify-content: center; font-size: .75rem; }
.thumbs-titel { margin: 12px 0 6px; font-weight: 600; font-size: .9rem; color: var(--text-2); }

/* Smartphone-Vorschau (Plan 004, AP8): Feed 4:5, Reel 9:16, Caption nach ~125 Zeichen gekürzt */
.vorschau { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vorschau-nav { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
/* Plan 010, B23: Formatknöpfe als einzeilige Umschaltleiste in Gerätebreite – gleich breit, ohne Zwischenraum,
   gemeinsame Umrandung, ungekürzt; das Gewählte gefüllt (`.btn.aktiv`, B9) */
.vorschau-formate { display: flex; width: var(--phone-breite); max-width: 100%; margin: 0 auto 10px; }
.vorschau-formate .btn { flex: 1 1 0; min-width: 0; padding: 0 4px; white-space: nowrap; }
/* Plan 024, S11/E9: Umschalter und Formatknöpfe der Vorschau gemeinsam unten („Umschalter“) – ein Rahmen um die Leiste */
.vorschau-nav span { color: var(--muted); font-size: .9rem; min-width: 80px; text-align: center; }
.btn.klein { height: var(--knopf-hoehe-klein); padding: 0 10px; font-size: .85rem; }
/* Plan 010, B9: Knöpfe in der Kopfzeile eines Kastens sind klein und nicht höher als die Überschriftenzeile (B7) */
.post-karte > header .kopf-aktionen .btn { height: var(--knopf-hoehe-klein); padding: 0 10px; font-size: .85rem; line-height: 1.25; }
/* `.btn.aktiv` (gewählter Zustand): Stufe 2, gefüllt – Regel oben bei den Knöpfen (Plan 010, B9) */
.klein-text { font-size: .82rem; text-align: center; margin: 0; max-width: 340px; }
/* Plan 008, B12/F11: iPhone 17 (Apple Tech Specs: 402 × 874 pt, 1206 × 2622 px). Bildschirm 360 px breit
   (Faktor 0,8955) → 360 × 783 px; Rahmen 12 px; Eckradius 62 px außen, 50 px innen (vorläufig, nicht offiziell
   belegt); Dynamic Island 113 × 33 px, 10 px unter dem oberen Rand (vorläufig).
   Plan 009, B1: Alle Maße unten gelten für das Gerät in Grundgröße (384 px breit, ≈ 807 px hoch); angezeigt wird es
   einheitlich skaliert über --phone-skala (eine Stelle): 0,55 → ≈ 443 px hoch, ≈ 211 px breit. Die Feed-Vorschau
   setzt einen eigenen, kleineren Faktor (B2). */
:root { --phone-grundbreite: 384px; --phone-skala: .55; --phone-breite: calc(var(--phone-grundbreite) * var(--phone-skala)); }
.phone { position: relative; width: var(--phone-grundbreite); max-width: 100%; box-sizing: border-box;
  border: 12px solid #111827; zoom: var(--phone-skala);
  border-radius: 62px; background: #111827; box-shadow: var(--shadow-lg); font-size: 14px; color: #111; }
.phone-bildschirm { position: relative; aspect-ratio: 402 / 874; border-radius: 50px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; }
.phone-statusleiste { position: relative; flex: none; height: 55px; display: flex; align-items: flex-start;
  justify-content: space-between; padding: 17px 30px 0; box-sizing: border-box; font-size: 13px; font-weight: 600; z-index: 3; }
.phone-statusleiste .anzeigen { letter-spacing: -2px; font-size: 9px; }
.phone-insel { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 113px; height: 33px;
  border-radius: 999px; background: #000; }
.phone-home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px;
  border-radius: 999px; background: #111; z-index: 3; }
.ist-reel .phone-statusleiste { position: absolute; left: 0; right: 0; top: 0; color: #fff; }
.ist-reel .phone-home { background: #fff; }
/* Längere Captions bleiben im festen Bildschirm lesbar: der Text unter dem Bild rollt */
.phone-bildschirm > .ig-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.phone-bildschirm > .feed { flex: none; }
.ig-kopf { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; }
.ig-kopf .punkte { margin-left: auto; color: #555; letter-spacing: 1px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; font-size: .8rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af); flex: none; }
.feed { aspect-ratio: 4 / 5; background: #f2f2f2; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.feed.karussell { scrollbar-width: none; }  /* Plan 010, B23: Wischen und Punkte bleiben, kein Scrollbalken */
.feed.karussell::-webkit-scrollbar { display: none; }
.feed img, .feed .medium-leer { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
/* Plan 036, P8: lesbarer Platzhalter – Kontrast ≥ 4,5:1 (--muted auf #f2f2f2 ≈ 6,9:1), in der Telefonvorschau trotz
   `zoom` mindestens 11 px (Größe durch --phone-skala geteilt), im Reel mittig über die volle Höhe, hell auf Schwarz */
.medium-leer { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted);
  font-size: .85rem; font-weight: 600; line-height: 1.3; padding: 0 12px; box-sizing: border-box; }
.phone .medium-leer { font-size: calc(11px / var(--phone-skala)); padding: 0 calc(10px / var(--phone-skala)); }
.reel .medium-leer { height: 100%; width: 100%; color: #e5e7eb; }
/* Plan 037, B4: Feldzuordnung – ein Raster für alle Kontrollkästchen-Bereiche (Kästchen | Name | (Art)). Die Breite der
   Namensspalte misst der Browser über `subgrid` (längster Name aller Bereiche), so stehen die Kästchen jeder Spalte
   bereichsübergreifend untereinander. 1–3 Spaltenpaare nach Breite des Rahmens (Container-Abfrage; die Schwellen
   schätzt der Server aus den Namen und setzt sie im Template, `_feldzuordnung.html`), Abstand zwischen
   den Paaren 40 px (8 px Spaltenabstand + 32 px an der Art), spaltenweise gefüllt mit der Zeilenzahl `--zeilen-<k>` vom
   Server. Bereiche sind `div`, weil ein `fieldset` kein `subgrid` trägt (gemessen 15.10.26). Nur als Notbremse bei sehr
   schmalem Platz schrumpft die Namensspalte mit „…“ – nie Umbruch. Wächter: tests/test_plan037_feldlisten.py */
.feldwahl-raster { container-type: inline-size; }
.feldwahl-innen { --paare: 1; display: grid; column-gap: 8px;  /* letzte Spalte füllt: Auswahlfelder bleiben kartenbreit */
  grid-template-columns: repeat(var(--paare), max-content minmax(0, max-content) max-content) minmax(0, 1fr); }
.feldwahl-innen > * { grid-column: 1 / -1; min-width: 0; }
.feldwahl { display: grid; grid-template-columns: subgrid; margin: 0 0 16px; }
.feldwahl-kopf { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.feldwahl-titel { font-weight: 600; font-size: .9rem; color: var(--text-2); }
/* Zustandslabel hinter dem Hilfe-Knopf: 10 px wie Text → Label (N4); in der Zeile eines Auswahlfelds steht davor ein
   Leerzeichen (Zeilenende des Hilfe-Bausteins), der Rand ergänzt es auf 10 px */
.badge.feld-unpassend { margin-left: 10px; }
.feldwahl-zeile > .badge.feld-unpassend { margin-left: calc(10px - .2734 * var(--text-schrift)); }
.feldwahl > p { grid-column: 1 / -1; }
.feldwahl-liste { --zeilen: var(--zeilen-1); grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  grid-auto-flow: column; grid-template-rows: repeat(var(--zeilen), auto); row-gap: 4px; }
.feldwahl-liste > label { grid-column: span 3; display: grid; grid-template-columns: subgrid; align-items: center;
  font-weight: 400; color: inherit; font-size: inherit; margin: 0; cursor: pointer; }
.feldwahl-liste .feld-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feldwahl-liste .feld-art, .feldwahl-mass .feld-art { color: var(--muted); white-space: nowrap; padding-right: 32px; }
/* unsichtbare Maßzeile: breitester Name und breiteste Art in jedem sichtbaren Paar – alle Paare gleich breit */
.feldwahl-mass { display: grid; grid-template-columns: subgrid; height: 0; overflow: hidden; visibility: hidden; }
.feldwahl-mass > span { grid-row: 1; white-space: nowrap; min-width: 0; }
.feldwahl-mass > .p2, .feldwahl-mass > .p3 { display: none; }
.punkte-leiste { display: flex; justify-content: center; gap: 4px; padding-top: 8px; }
.punkte-leiste span { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.punkte-leiste span.an { background: #3897f0; }
.ig-aktionen { display: flex; gap: 14px; padding: 8px 12px 4px; }
.ig-aktionen svg { width: 22px; height: 22px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linejoin: round; }
.ig-aktionen .rechts { margin-left: auto; }
.ig-text { padding: 2px 12px 16px; line-height: 1.4; }
.ig-text details summary { list-style: none; cursor: pointer; }
.ig-text details summary::-webkit-details-marker { display: none; }
.ig-text details[open] summary { display: none; }
.ig-text .voll { margin: 0; }
.mehr { color: #8e8e8e; }
.ig-hashtags { margin: 6px 0 0; color: #00376b; word-break: break-word; }
.reel { position: absolute; inset: 0; background: #000; }  /* bildschirmfüllend (Reel 9:16, Plan 008, F11) */
.reel img, .reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Plan 010, B24: Titel wie im veröffentlichten Reel (reel.py `_title_filter`): weiß auf halbtransparentem schwarzem
   Kasten in der sicheren Zone – Unterkante, linker Rand und Breite aus denselben Werten (`{% reel_zone %}`) */
.reel-medium { position: absolute; inset: 0; }
.reel-titel { position: absolute; bottom: calc(100% - var(--zone-unten)); left: var(--zone-links);
  width: var(--zone-breite); text-align: center; }
.reel-titel span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-width: 100%; margin: 0 auto; width: fit-content; color: #fff; font-weight: 700; font-size: 1.1rem;
  line-height: 1.25; background: rgba(0, 0, 0, .45); padding: 6px 12px; }
.reel-aktionen { position: absolute; right: 10px; bottom: 120px; display: flex; flex-direction: column; gap: 18px;
  align-items: center; color: #fff; }
.reel-aktionen svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.reel-unten .folgen { margin-left: 4px; padding: 2px 8px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 8px;
  font-size: .75rem; font-weight: 600; }
.reel-unten { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 56px 30px 12px; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.reel-unten .ig-konto { display: flex; align-items: center; gap: 8px; }
.reel-unten .ig-caption { margin: 6px 0 0; font-size: .85rem; }
.reel-unten .mehr { color: #ddd; }

/* Plan 004: Reiter „Inhalte“, Datenquellen, Bedingungen */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kopf-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kopf-aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seiten { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; }
/* Plan 018, B55; Plan 019, B11: normal, 1 pt größer, Textfarbe */
.feed-datum { margin: 6px 0 0; text-align: center; font-size: calc(.82rem + 1pt); color: var(--text); font-weight: 400; }
/* Plan 018, B40: „Sortierung“ der Liste 10 % breiter (gemessen 183 px → 201 px bei 1.400 px) */
.filterleiste select.sortierung { width: 201px; }
/* Plan 018, B44 (Q4): sichtbare Eingrenzung auf einen Zeitplan mit Knopf zum Entfernen */
.filter-eingrenzung { display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; }
.kopf-aktionen select { max-width: 320px; }
/* Schnellwechsler und Knöpfe auf einer Linie: gleiche Höhe, Schrift; das umschließende label ohne Abstand */
.seitenkopf .kopf-aktionen label { margin: 0; }
.seitenkopf .kopf-aktionen select, .seitenkopf .kopf-aktionen .btn { height: var(--knopf-hoehe); box-sizing: border-box; }
.seitenkopf .kopf-aktionen select { padding-top: 0; padding-bottom: 0; font-size: .92rem; font-weight: 600;
  color: var(--text-2); }
/* Plan 023, P7: vier gleich breite Kacheln nebeneinander, unter 1.000 px zwei mal zwei */
.arten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 999px) { .arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.art-kachel { display: block; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); text-decoration: none; color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.art-kachel:hover { border-color: var(--accent); }
.art-kachel.aktiv { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* Validierung 008/Plan 009, B1: Spalte so breit wie das (skalierte) Smartphone – eine Quelle: --phone-breite */
.detail-raster { display: grid; grid-template-columns: minmax(0, 1fr) var(--phone-breite); gap: var(--gap);
  align-items: start; }
.detail-vorschau { position: sticky; top: 80px; }
@media (max-width: 1000px) { .detail-raster { grid-template-columns: 1fr; } .detail-vorschau { position: static; } }
/* Plan 012, S7: Vorschauspalte mit Abschnittskopf; Nutzerwunsch 10.10.26: linksbündig mit dem Smartphone (vorher zentriert) */
.detail-vorschau > .abschnitt-kopf { justify-content: flex-start; }
/* Plan 016, B11 (ersetzt den Nutzerhinweis vom 8.10.26, die Spalte rückte um den ersten Kopf nach unten): Kopf gegen
   Kopf – „Vorschau“ steht oben bündig mit dem ersten Element links (Abschnittskopf; ohne Kopf, S1, die Karte). Beide
   Köpfe sind gleich hoch (Zeilenhöhe der Überschrift, Labels und Kreisel darin machen ihn nicht höher) und haben
   denselben Abstand zur Karte, also beginnt die erste Zeile unter „Vorschau“ auf Höhe der Kartenoberkante links.
   Wächter: tests/test_vorschau_buendig.py */
.detail-raster .abschnitt-kopf { min-height: calc(1.1rem * 1.5); }
/* erste Zeile unter „Vorschau“ ohne eigenen Außenabstand oben – sonst setzt er sich gegen die 12 px unter dem Kopf
   durch (z. B. „Datensatz“ der Datenquellen-Vorschau, Standardabstand eines Absatzes 15 px) */
.detail-vorschau > .abschnitt-kopf + * { margin-top: 0; }
.abschnitt-kopf .badge { line-height: 1.5; }
/* Plan 016, B9: „Zeitplan anlegen“ über der Vorschauspalte so breit wie das Smartphone, Kanten senkrecht darüber */
.seitenkopf .kopf-aktionen.vorschau-buendig .btn { width: var(--phone-breite); }
@media (max-width: 1000px) { .seitenkopf .kopf-aktionen.vorschau-buendig .btn { width: auto; } }
/* Plan 012, S2: Feldgruppen in einer Formularkarte (z. B. „Bedingungen“) – fett, Textfarbe, keine Überschrift */
.feldgruppe { display: flex; align-items: center; gap: 6px; margin: var(--abstand-5) 0 var(--abstand-2); font-weight: 600; }
/* Plan 015, B14/B15: geschlossen eine Zeile mit Trennlinie, geöffnet ein Kasten (Rahmen, Radius wie Karten,
   Seitenhintergrund, Innenabstand 16/20); Kopfzeile und Felder an derselben linken Kante; Pfeil rechts statt des
   Browser-Dreiecks; der Titel im offenen Zustand fett in der Titelfarbe; Eingabefelder bleiben weiß */
details.eintrag { border-top: 1px solid var(--border); padding: 10px 20px; }
/* Plan 021, B24 (Variante C): geöffnet eine weiße Karte mit Schatten, 16 px Abstand zur Liste, seitlich 8 px über
   die Zeilen hinaus; Kopf ohne Farbe (Nummer und Titel fett in der Titelfarbe), dünne Trennlinie darunter */
details.eintrag[open] { border: 1px solid var(--karte-rand); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .14), 0 1px 3px rgba(16, 24, 40, .08);
  padding: 16px 28px; margin: 16px -8px; }
details.eintrag[open] + details.eintrag { border-top: 0; }
details.eintrag summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  list-style: none; }
details.eintrag[open] summary { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
details.eintrag[open] summary .eintrag-nr { font-weight: 650; color: var(--titel); }
details.eintrag .eintrag-kopf { display: inline-flex; flex-direction: column; }
details.eintrag .eintrag-termin { color: var(--muted); font-size: .85rem; font-weight: 400; }
details.eintrag summary::-webkit-details-marker { display: none; }
details.eintrag summary .eintrag-pfeil { margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  color: var(--muted); }
details.eintrag summary .eintrag-pfeil .offen, details.eintrag[open] summary .eintrag-pfeil .zu { display: none; }
details.eintrag[open] summary .eintrag-pfeil .offen { display: inline-flex; }
details.eintrag[open] summary .eintrag-titel { font-weight: 650; color: var(--titel); }
details.eintrag[open] input, details.eintrag[open] textarea, details.eintrag[open] select { background: var(--field); }
details.eintrag .eintrag-nr { min-width: 0; text-align: left; color: inherit; align-self: flex-start; }
details.eintrag.ausgeschieden summary .eintrag-titel { color: var(--muted); text-decoration: line-through; }
.eintrag-nr { min-width: 28px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.eintrag-titel { font-weight: 400; }
.eintrag-text { margin-top: 12px; }
.eintrag-text textarea { min-height: 110px; }
.texte-fortschritt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
form.inline { display: inline; margin: 0; }
.bedingung-zeile { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 8px; margin-bottom: 8px; }
.bedingung-zeile select, .bedingung-zeile input { max-width: none; }
.bedingung-fuss { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
/* Plan 021, B27: „Zeile hinzufügen“ als Text-Link – Akzentblau, ohne „+“, unterstrichen nur bei Überfahren/Fokus */
.text-link { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: none; }
.text-link:hover, .text-link:focus-visible { text-decoration: underline; outline: none; }
/* Plan 031, V14: Zusatz eines Regel-Bezeichners in eigener Zeile (fester Umbruch) */
/* Nutzerwunsch 13.10.26: Die Zusatzzeile folgt hinter dem Hilfe-Knopf (Knopf rechts der ersten Zeile) und sieht aus
   wie der Bezeichner; das Feld darunter hat denselben Abstand wie nach einem Hilfe-Popup */
.bezeichner-zusatz { display: block; font-weight: 600; font-size: .9rem; color: var(--text-2); }
.bezeichner-zusatz + select { display: block; margin-top: 10px; }  /* Leitfaden: Bezeichner → Feld 10 px */
/* Plan 031, V9: Verweis unter einem Auswahlfeld („Neue Datenquelle anbinden“) – Schrift und Abstand zum Feld darüber wie
   „Bedingung hinzufügen“ unter der letzten Bedingung (gemessen, Wächter tests/test_plan031_textlink.py) */
.feld-fuss { font-size: .9rem; margin-top: var(--feld-fuss-abstand); margin-bottom: var(--abstand-4); }
p:has(+ .feld-fuss) { margin-bottom: 0; }  /* der Absatz des Felds gibt seinen Rand an den Verweis ab */
:root { --feld-fuss-abstand: 8px; }
/* Plan 021, B28: Bedingungs-Zähler als Klammertext – grau, bei 0 Treffern orange */
.zaehler-text { color: var(--muted); }
.zaehler-text.keiner { color: var(--warn); }
.klein-text.links { text-align: left; max-width: none; }
.checkbox-zeile { display: flex; gap: 8px; align-items: center; font-weight: 600; }
/* Plan 016, B1: zwei Felder in einer Zeile – links schmal (Zahlenfeld), rechts die Restbreite; oben bündig.
   B2: Kontrollkästchen nebeneinander, Abstand 32 px. Unter 760 px wieder untereinander. */
.feld-zeile { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 var(--abstand-5); align-items: start; }
.checkbox-reihe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--abstand-6); }
@media (max-width: 760px) {
  .feld-zeile { grid-template-columns: minmax(0, 1fr); }
  .checkbox-reihe { flex-direction: column; } }
/* Plan 022, B6: Einstellungen in einer Zeile – Sprache und Hashtag-Anzahl gleich breit (160 px), dahinter beim
   Einzelbeitrag die Kontrollkästchen senkrecht mittig zur Feldhöhe (unten bündig mit den Feldern, Zeile 36 px hoch),
   bei der Serie die Standard-Hashtags der Serie in der Restbreite und die Kontrollkästchen darunter. Unter 760 px
   untereinander. */
.einstellungen-zeile { display: grid; grid-template-columns: 160px 160px minmax(0, 1fr); gap: 0 var(--abstand-5);
  align-items: start; }
.einstellungen-zeile > .checkbox-reihe { grid-column: 1 / -1; }
.einstellungen-zeile.einzel > .checkbox-reihe { grid-column: auto; align-self: end; margin-bottom: 16px; }
.einstellungen-zeile.einzel > .checkbox-reihe > p { margin: 0; min-height: var(--knopf-hoehe); display: flex;
  align-items: center; }
.einstellungen-zeile.einzel > .checkbox-reihe label { margin: 0; }  /* sonst sitzt das Kästchen 3 px zu hoch */
@media (max-width: 760px) {
  .einstellungen-zeile { grid-template-columns: minmax(0, 1fr); }
  .einstellungen-zeile.einzel > .checkbox-reihe { align-self: start; margin-bottom: 0; } }
/* Plan 018, B30: Serienliste der Datenquelle ohne Rangfolge (keine Nummer, kein Ziehen) */
.rangliste { list-style: none; padding: 0; margin: 0 0 8px; }
.rangliste li { display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 6px; }
.thumb-wahl { display: flex; flex-direction: column; align-items: center; font-weight: 400; font-size: .8rem; gap: 4px;
  position: relative; }  /* Plan 022, B8: Bezug für das Medientyp-Symbol */
/* Plan 018, B35: „ד oben rechts auf dem Vorschaubild; mit JavaScript ersetzt er Kästchen und Text */
.thumbs.mit-x .thumb-wahl { position: relative; }
.thumbs.mit-x .thumb-wahl[hidden] { display: none; }
.thumbs.mit-x input[name="medien_entfernen"], .thumbs.mit-x .ohne-js { display: none; }
.thumb-x { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; font-size: 1.1rem;
  background: var(--card); box-shadow: var(--shadow); }
/* Plan 021, B18: das × ist ein Symbol (Lucide „x“), geometrisch mittig im Kreis – kein Schriftzeichen mit Unterlänge */
.thumb-x svg.symbol { display: block; width: 16px; height: 16px; stroke-width: 2.5; }
/* Plan 021, AP5 (B4–B7): „Vorhandene Medien“ mit Umschalter je Format */
/* Validierung 021.13, B10: ausgeblendet nur ohne Medien UND ohne Hochladen – sonst trägt der Kopf die Hilfe zum Knopf.
   Plan 022, B5: „kann hochladen“ steht als `data-hochladen` am Block (der Knopf kann in der Knopfzeile stehen). */
.medien-block:not(:has(.thumb-wahl:not([hidden]))):not([data-hochladen]) .medien-kopf { display: none; }
/* Plan 022, B1–B3: Umschalter 16 px hinter der Überschrift (nicht rechtsbündig); reicht die Breite nicht, rückt die
   Leiste als Ganzes darunter. Darstellung wie der Kalender-Umschalter (`.umschalter`, unten): `.btn.klein` (30 px),
   gewählt `.btn.aktiv`, nicht wählbar `aria-disabled` im Inaktiv-Stil. */
/* Plan 024, N8: Abstand darunter ab der Unterkante des tiefsten Elements (Flex-Zeile: Umschalter bzw. umgebrochene
   Leiste) – 12 px wie „Überschrift → Inhalt“ (§4; vorher 6 px, Nutzerhinweis „zu knapp“).
   Nutzerwunsch 12.10.26: darüber und darunter 16 px, so viel wie vom Eingabefeld zum nächsten Element (`form p`) */
.medien-kopf { display: flex; align-items: center; justify-content: flex-start; gap: var(--abstand-2) var(--abstand-4);
  flex-wrap: wrap; margin: var(--abstand-4) 0 var(--abstand-4); }
.medien-kopf .thumbs-titel { margin: 0; }
.format-umschalter[hidden] { display: none; }
.medien-block .datei-zeile { margin: 0 0 8px; }
.medien-block .thumb-wahl.gedimmt img, .medien-block .thumb-wahl.gedimmt video,
.medien-block .thumb-wahl.gedimmt .medium-kachel { opacity: .3; }
.medien-block[data-format-aktiv]:not([data-format-aktiv=""]) .thumb-wahl { cursor: pointer; }
.medien-block .thumb-wahl.ziehbar { cursor: grab; touch-action: none; }
.medien-block .thumb-wahl.wird-gezogen { opacity: .6; cursor: grabbing; }
.thumbs .thumb-wahl.neu img, .thumbs .thumb-wahl.neu video { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }

/* Plan 008, §2: Planer – Ebenen (Reiter), Ansichten und Statusfilter mit Zählern (B16) */
/* Nutzerentscheid 10.10.26 (Leitfaden §1/§2): Karteireiter nach Art der Browser-Tabs. Die aktive Lasche hat die Farbe
   der Reiterfläche, den kräftigen Rand und geht unten mit einer Rundung gleich der oberen in die Kante der Fläche über
   (`::before`/`::after`, eine Spalte breiter als der Radius, damit sie den senkrechten Laschenrand abdecken). Inaktive
   Reiter ohne Rahmen, durch Trennstriche getrennt; neben der aktiven Lasche entfällt der Strich. */
:root { --reiter-bg: #e6ecf5; --reiter-radius: var(--radius-sm); --reiter-abstand-text: 27px;
  --reiter-schatten: 0 -2px 6px -3px rgba(16, 24, 40, .15);
  --flaeche-schatten: 0 4px 12px -4px rgba(16, 24, 40, .18), 0 2px 4px -2px rgba(16, 24, 40, .08); }
.seitenkopf:has(> nav.reiter) { margin-bottom: 0; }
nav.reiter { position: relative; z-index: 2; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0;
  margin-top: 18px; padding-left: calc(var(--radius) + var(--reiter-radius)); }
/* Einrückung = Eckenradius der Fläche + Laschenradius: die linke Rundung der ersten Lasche trifft sonst die runde
   Ecke der Fläche (Darstellungsfehler bei aktivem „Kalender“, Nutzerhinweis 10.10.26) */
nav.reiter a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px var(--reiter-abstand-text);
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--reiter-radius) var(--reiter-radius) 0 0;
  color: var(--text-2); font-weight: 600; text-decoration: none; }
nav.reiter a:not(.aktiv):hover { background: rgba(30, 58, 138, .06); }
nav.reiter a:not(.aktiv) + a:not(.aktiv)::before { content: ""; position: absolute; left: -1px; top: 25%; width: 1px;
  height: 50%; background: var(--border-strong); }
nav.reiter a.aktiv { margin-bottom: -1px; padding-bottom: 9px; background: var(--reiter-bg); border-color: var(--border-strong);
  color: var(--accent); box-shadow: var(--reiter-schatten); }
nav.reiter a.aktiv::before, nav.reiter a.aktiv::after { content: ""; position: absolute; bottom: 0;
  width: calc(var(--reiter-radius) + 1px); height: var(--reiter-radius); pointer-events: none; }
nav.reiter a.aktiv::before { left: calc(-1 * var(--reiter-radius) - 1px);
  background: radial-gradient(circle at 0 0, transparent calc(var(--reiter-radius) - 1px), var(--border-strong) calc(var(--reiter-radius) - 1px),
    var(--border-strong) var(--reiter-radius), var(--reiter-bg) var(--reiter-radius)); }
nav.reiter a.aktiv::after { right: calc(-1 * var(--reiter-radius) - 1px);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--reiter-radius) - 1px), var(--border-strong) calc(var(--reiter-radius) - 1px),
    var(--border-strong) var(--reiter-radius), var(--reiter-bg) var(--reiter-radius)); }
.reiter-flaeche { position: relative; z-index: 1; padding: var(--abstand-5); background: var(--reiter-bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--flaeche-schatten); }
.reiter-flaeche > :last-child { margin-bottom: 0; }
/* Plan 020, N1: unter dem Abschnittskopf der Planer-Reiter 50 % mehr Abstand (18 statt 12) */
:root { --abstand-kopf-planer: 18px; }
.reiter-flaeche .abschnitt-kopf { margin-bottom: var(--abstand-kopf-planer); }
.statusleiste { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.statusleiste a.status-filter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--text-2); font-size: .82rem;
  text-decoration: none; }  /* Plan 012: weiß auf der grauen Seitenfläche (die Filterzone steht außerhalb der Karte) */
/* Plan 020, N3: aktiver Filter blau gefüllt – das Hellblau stach auf der Reiterfläche kaum ab */
/* Nutzerentscheid 10.10.26: aktiver Filter Blau-Grau wie der Kopf der Post-Karte – nicht im Blau der Hauptknöpfe */
.statusleiste a.status-filter.aktiv { background: var(--kartenkopf-bg); color: var(--text); border-color: var(--karte-rand);
  font-weight: 600; }
.statusleiste .zahl { font-weight: 700; }
/* Nutzerhinweis 8.10.26 (schmales Fenster): Mehrere Knöpfe der Aktionsspalte brechen untereinander um, jeder Knopf
   bleibt einzeilig; reicht der Platz trotzdem nicht, rollt die Karte waagrecht statt über ihren Rand hinauszulaufen. */
td.aktion-zelle, th.aktion-kopf { text-align: right; }  /* Plan 018, B19: Kopf „Aktionen“ über der Knopfspalte */
/* Plan 018, B19: Titel als Link – Akzentblau, ohne Unterstrich, beim Überfahren unterstrichen; zusätzlich zum Knopf */
a.titel-link { color: var(--accent); text-decoration: none; }
a.titel-link:hover, a.titel-link:focus-visible { text-decoration: underline; }
td.aktion-zelle .btn { white-space: nowrap; margin: 2px 0; }
.card:has(> table) { overflow-x: auto; }
/* Plan 017, N8: Tabellenköpfe laufen beim Scrollen der Seite mit und halten unter der Kopfleiste – ab 1.300 px, wo jede
   Tabelle in ihre Karte passt (bei 1.200 px war die Zeitplanliste zu breit); darunter bleibt die Karte ein waagrechter
   Scrollbereich (Plan 015, B12), in dem `sticky` nicht wirken kann */
/* Prüfbericht 017.22, F1: Ohne Rollen darf kein langer, ungetrennter Wert (Titel bis 500 Zeichen, importierte Kennung)
   eine Tabelle über ihre Karte hinaus verbreitern – Textzellen brechen überlange Wörter um; kurze Werte bleiben unverändert,
   bewusst einzeilige Zellen (`white-space: nowrap`: Uhrzeiten, Aktionsknöpfe) sind nicht betroffen */
.card > table td, .card > table th { overflow-wrap: anywhere; }
/* Spaltenköpfe sind kurze, feste Wörter: nie mitten im Wort trennen („Vorschau“ über der schmalen Bildspalte) */
.card > table thead th { overflow-wrap: normal; }
@media (min-width: 1300px) {
  .card:has(> table) { overflow-x: visible; }
  thead th { position: sticky; top: var(--kopfleiste-hoehe); z-index: 2; background: var(--surface); } }
a.bild-link { display: inline-block; border-radius: var(--radius-sm); }
a.bild-link:hover { box-shadow: var(--ring); }
/* Plan 009, B2: Feed-Vorschau – kleine Smartphones (≈ 247 px hoch: Faktor 247 / 807), 24 px Abstand, genau eine Reihe:
   feste Höhe einer Reihe, Umbruch in eine verdeckte zweite Reihe – nie ein angeschnittenes Gerät. Die Reihe umfasst
   auch das Datum unter dem Gerät (Plan 010, B16; mit 260 px war es abgeschnitten): Gerät + 6 px + eine Zeile. */
.feed-geraete { --phone-skala: .306; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 24px;
  height: 284px; overflow: hidden; padding: 4px 2px 0; }
.feed-geraete > p { margin: 0; }
.feed-geraet { position: relative; flex: none; }
.feed-geraet .phone { box-shadow: var(--shadow); }
.feed-geraet-link { position: absolute; inset: 0; z-index: 5; border-radius: 20px; }
.feed-geraet-link:focus-visible { outline: none; box-shadow: var(--ring); }
.feed-geraet .schild-entwurf { z-index: 6; pointer-events: none; }
.reel .medium-kachel { width: 100%; height: 100%; object-fit: cover; display: block; }
.schild-entwurf.geplant { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
/* Plan 006, B2: Kalender als Tabelle, je Tag eine Gruppenzeile */
.kalender-tabelle tr.tag-zeile th, .status-tabelle tr.gruppen-zeile th { padding: 14px 8px 6px; font-size: .95rem;
  font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--text); background: transparent; }
/* Plan 032, V5: Gruppenzeilen des Systemstatus wie die Tageszeilen des Kalenders; Zähler rechts neben dem Namen,
   Prüfungen darunter leicht eingerückt */
.status-tabelle tr.gruppen-zeile .badge { margin-left: 8px; vertical-align: middle; }
.status-tabelle tr.pruefung-zeile > th { padding-left: 20px; }
.kalender-tag.heute tr.tag-zeile th { color: var(--accent); }
/* Validierung 007, E3: bei durchgehender Sortierung trägt die Zeile selbst die Heute-Kennzeichnung */
.kalender-tabelle tr.heute td.zeit, .heute-marke { color: var(--accent); font-weight: 600; }
.kalender-tabelle td.zeit { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
/* Plan 006, B3: Filterleiste (GET-Formular) und sortierbare Spaltenköpfe */
.filterleiste { display: flex; gap: 10px 16px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 16px; }
.filterleiste label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .82rem; }
.filterleiste select { width: auto; min-width: 160px; padding: 6px 10px; }
.filterleiste .checkbox-zeile { flex-direction: row; align-items: center; font-size: .9rem; padding-bottom: 8px; }
/* Plan 009, B14/B13: Schnellwechsler „Suche“ rechtsbündig in der Leiste (gleiche Gestaltung wie die Filter); auf der
   Detailseite so breit wie das Smartphone darunter – rechte Kante beider ist der Rand der Inhaltsspalte */
.filterleiste .schnellwechsler.suche { margin-left: auto; }
/* Plan 010, B19/B20: Stil des Schnellwechslers „Inhalt öffnen“ (Inhalte-Liste): Bezeichner über dem Feld, Breite nach
   dem längsten Namen, 200–450 px (Plan 031, V7; vorher 160–360 px). Plan 016, B10: auf der Inhaltsseite entfällt er. */
.schnellwechsler { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .82rem; }
.schnellwechsler select { width: auto; min-width: 200px; max-width: 450px; padding: 6px 10px; }  /* Plan 031, V7: Grenzen 25 % größer (vorher 160/360 px) */
/* Nutzerentscheid 10.10.26: alle einzeiligen Felder der Filterzone (Auswahl, Suche, Datum, Text) in Filterhöhe */
.filterzone select, .filterzone input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.filterleiste select, .filterleiste input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
  height: var(--filter-hoehe); min-height: var(--filter-hoehe); padding-top: 4px; padding-bottom: 4px; }
.seitenkopf .zustandszeile { margin-top: 4px; }
/* Plan 024, N10: Termine eines inaktiven Zeitplans grau statt link-blau (weiter ein Link), nicht durchgestrichen */
.zustandszeile a.inaktiv { color: var(--muted); text-decoration: none; }
.zustandszeile a.inaktiv:hover { text-decoration: underline; }
.kopf-zeile > h2 { display: flex; align-items: center; gap: 8px; }
a.sortkopf { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none;
  cursor: pointer; }
a.sortkopf:hover, a.sortkopf.aktiv { color: var(--accent); }
/* Nutzerhinweis 7.10.26: jede sortierbare Spalte zeigt ↕, damit sie als klickbar erkennbar ist; aktiv ↑ bzw. ↓ */
a.sortkopf .sortierbar { display: inline-flex; opacity: .45; }
a.sortkopf:hover .sortierbar { opacity: 1; }
.profilraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.profilraster .kachel { aspect-ratio: 3 / 4; background: var(--hover); display: flex; align-items: center;
  justify-content: center; overflow: hidden; color: var(--muted); font-size: .75rem; text-decoration: none; }
.profilraster .kachel img, .profilraster .kachel video { width: 100%; height: 100%; object-fit: cover; }
/* Mini-Vorschaubild (Plan 005, B6): 3:4 wie das Instagram-Raster; leer bleibt die Spalte bündig */
.medium-mini { display: inline-block; width: 36px; height: 48px; flex: none; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--hover); vertical-align: middle; }
.medium-mini.leer { background: transparent; }
/* Plan 022, B8: Medientyp-Kennzeichnung auf Vorschaubildern – seit Plan 031, V2 nur noch auf Kacheln (`.thumb-wahl`,
   Lage und Form dort weiter unten); die Grundregel liefert Positionierung und Ausrichtung. */
.medium-typ { position: absolute; top: 4px; left: 4px; z-index: 1; display: inline-flex; align-items: center;
  justify-content: center; width: 25px; height: 25px; border-radius: 4px; background: #000000;
  color: #ffffff; line-height: 0; }
.bild-vorschau { position: relative; display: inline-block; vertical-align: middle; line-height: 0; }
td.vorschau-zelle { width: 52px; }
/* Plan 007, B3: Entwurf als rotes Schild auf dem Bild statt Abblendung */
.profilraster .kachel { position: relative; }
.schild-entwurf { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--err-soft); color: var(--err); border: 1px solid var(--err); font-size: .72rem; font-weight: 700; }
.profilraster > p { grid-column: 1 / -1; margin: 0; }
.post-karte .post-raster { display: grid; grid-template-columns: var(--phone-breite) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .post-karte .post-raster { grid-template-columns: 1fr; } }
/* Plan 020, N7: senkrechte Linie zwischen Vorschau und Feldern, je 32 px Luft; Menü rechts in der Kopfzeile */
.post-karte .post-raster { column-gap: var(--abstand-6); }
.post-karte .post-raster > .post-spalte { border-left: 1px solid var(--karte-rand); padding-left: var(--abstand-6); }
@media (max-width: 900px) { .post-karte .post-raster > .post-spalte { border-left: 0; padding-left: 0; } }
.post-karte > header.kopf-zeile { align-items: center; }
.post-karte > header.kopf-zeile > .kopf-aktionen { margin: -3px 0 -3px auto; }  /* Kopfhöhe bleibt (Plan 019, B8) */
.post-karte textarea { min-height: 150px; }
/* Plan 010, B13: Texte des Einzelbeitrags nur lesend */
/* Plan 018, B50: Bezeichner halbfett in Titelblau über dem Wert (ohne Doppelpunkt, wie §8), Wert in Textfarbe,
   16 px zwischen den Feldern */
/* Plan 019, B5: Bezeichner in Akzentblau (Titelblau war zu nah am Textschwarz), 24 px zwischen den Feldern */
.nur-lesen p { margin: 0 0 var(--abstand-5); }
.nur-lesen .feldname { display: block; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
/* Plan 019, B6: Feld „Hinweise“ – je Hinweis eine Zeile in der Warnfarbe, Knopf direkt dahinter */
.hinweise-feld { margin: 0 0 var(--abstand-5); }
.hinweise-feld .feldwert.hinweis { color: var(--warn); }  /* stärker als `.nur-lesen .feldwert` (Textfarbe) */
.hinweise-feld .hinweis + .hinweis { margin-top: var(--abstand-1); }
.hinweise-feld form.inline { display: inline; }
.nur-lesen .feldwert { display: block; white-space: pre-line; color: var(--text); }
/* Plan 018, B53: ein einziges Format als gleich breite, nicht klickbare Fläche im Aussehen der Knöpfe */
.vorschau-formate .format-flaeche { flex: 1 1 0; border-radius: var(--radius-sm); cursor: default; pointer-events: none; }
/* Plan 008, B9: Knöpfe am Beitrag in einer Zeile, „Beitrag verwerfen“ ganz rechts */
.beitrag-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.beitrag-knoepfe form { margin: 0; }
.beitrag-knoepfe .rechts { margin-left: auto; }
/* Nutzerhinweis 8.10.26: rechte Spalte so hoch wie das Smartphone; die Knopfzeile schließt unten bündig mit ihm ab,
   solange die Felder darüber nicht mehr Platz brauchen */
.post-karte .post-raster > .post-spalte { align-self: stretch; display: flex; flex-direction: column; }
.post-spalte > .beitrag-knoepfe, .post-spalte > .knopfzeile { margin-top: auto; padding-top: 8px; margin-bottom: 0; }
.knopfzeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }  /* Knöpfe nebeneinander, gleiche Höhe */
/* Plan 008, B15: Standard-Hashtags als fester grauer Vorspann im Feld der Zusätzlichen Hashtags */
/* Plan 018, B34: genau so hoch wie ein Knopf (36 px, Rahmen eingerechnet); der Vorspann einzeilig, bei Überlänge mit
   „…“ gekürzt und vollständig im Tooltip – überall (Einzelbeitrag, Serie, Datensatz, Post-Karte, Assistent) */
/* Nutzerhinweis 10.10.26: lesende Hashtag-Zeile „Standard: … | Zusätzlich: …“ – Trenner bleibt beim Vorsatz */
.hashtag-gruppe { white-space: nowrap; }
.hashtag-feld { display: flex; flex-wrap: nowrap; align-items: stretch; height: var(--knopf-hoehe); box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--field); box-shadow: var(--shadow); overflow: hidden; }
.hashtag-feld:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.hashtag-vorspann { display: block; flex: 0 1 auto; max-width: 60%; padding: 0 12px; line-height: calc(var(--knopf-hoehe) - 2px);
  background: #f2f4f7; color: var(--muted); border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: help; user-select: none; }
.hashtag-feld input[type=text] { flex: 1 1 160px; width: auto; min-width: 120px; height: 100%; border: 0; border-radius: 0;
  box-shadow: none; }
.hashtag-feld input[type=text]:focus { box-shadow: none; }
dialog.popup.bestaetigen .meldung { margin: 0; }
.hinweis-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.format-wahl { align-items: center; margin-top: 12px; }
.format-wahl label { margin: 0; }
.format-wahl select { width: auto; }
.aktionen-zeile { margin-top: 14px; }
/* Plan 017, B15/N1: Zeitplan-Formular in Zeilen nach Wie, Wann, Steuerung. `div.feld-reihe` – mehrere Felder einer
   Gruppe nebeneinander, oben bündig, über die ganze Kartenbreite; alle Reihen eines Formulars teilen dieselben sechs
   Spalten (Kanten fluchten untereinander), ein Feld überspannt bei Bedarf mehrere (`feld-spanne-2`, `feld-spanne-5`).
   Datum und Startdatum teilen eine Spalte (`feld-spalte`), Wochentage stehen am Ende – beim Umschalten der Häufigkeit
   verspringt nichts. Zwischen den Gruppen --abstand-5, innerhalb einer Gruppe der Feldabstand (16 px). Unter 760 px
   untereinander. */
.feld-gruppe { margin: 0 0 var(--abstand-5); }
.feld-reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start;
  gap: 0 var(--abstand-5); }
.feld-reihe > .field, .feld-reihe > .feld-spalte > .field { margin: 0 0 var(--abstand-4); min-width: 0; }
.feld-reihe > .feld-spanne-2 { grid-column: span 2; }
.feld-reihe > .feld-spanne-5 { grid-column: span 5; }
/* Plan 018, B1–B6 (Spaltenraster): im Zeitplan-Formular vier gleich breite Spalten mit 32 px Abstand – Plattform |
   Format 1 | Format 2 | Format 3; Häufigkeit, Startdatum, Zeitzone, Nachholfenster füllen je eine Spalte; Uhrzeit und
   Wochentage bilden einen Block über Spalten 3–4 (Uhrzeit an der Kante von Format 2) */
.zeitplan-formular .feld-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--abstand-6); }
.feld-reihe > .feld-spanne-3 { grid-column: span 3; }
.zeitplan-formular .format-folge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-6); }
.zeitplan-formular .folge-feld { position: relative; }
/* Pfeil mittig im Spaltenabstand vor Format 2 und 3 (N2 aus Plan 017: Symbol, Strichstärke 2) */
.zeitplan-formular .folge-pfeil { position: absolute; left: calc(var(--abstand-6) / -2); top: 50%;
  transform: translate(-50%, -50%); }
/* Nutzerwunsch 11.10.26 (ersetzt Plan 018, B4 „Uhrzeit 160 px, Wochentage 32 px dahinter“): der Block teilt sich in die
   Spalten 3 und 4 – Uhrzeitfeld und „+ Uhrzeit“ füllen zusammen Spalte 3 (rechts bündig mit Format 2), die Wochentage
   beginnen an der linken Kante von Format 3 und brechen innerhalb ihrer Spalte um. Alle Uhrzeitzeilen teilen ein Raster
   (Feld | Knopf), damit die Felder untereinander gleich breit sind, auch neben dem schmaleren „ד. */
.zeitplan-formular .uhrzeit-tage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--abstand-6); align-items: start; min-width: 0; }
.zeitplan-formular .uhrzeit-tage > .field { margin-bottom: 0; min-width: 0; }
.zeitplan-formular .uhrzeiten { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--abstand-2); }
.zeitplan-formular .uhrzeit-zeile { display: contents; }
.zeitplan-formular .uhrzeit-zeile[hidden] { display: none; }
.zeitplan-formular .uhrzeiten input[type=time] { width: 100%; min-width: 0; box-sizing: border-box; }
.zeitplan-formular .uhrzeiten .btn { justify-self: start; }
/* Wochentage enger (4 statt 12 px), damit möglichst alle in die Spalte von Format 3 passen; sonst Umbruch – dann ist
   jede Zeile so hoch wie das Feld, und die erste bleibt senkrecht mittig zur Uhrzeit (H6) */
.zeitplan-formular .wochentage > div { column-gap: var(--abstand-1); row-gap: 0; }
.zeitplan-formular .wochentage > div > div { display: flex; align-items: center; min-height: var(--knopf-hoehe); }
.zeitplan-formular .feld-reihe > .uhrzeit-tage { grid-column: 3 / span 2; margin: 0 0 var(--abstand-4); }
/* B5: Nachholfenster spaltenbreit (Abweichung von §8 „Zahlfelder 160 px“, Leitfaden B8), Bezeichner einzeilig */
.zeitplan-formular .feld-nachholen input[type=number] { width: 100%; }
/* Plan 026, S2 (Nutzerentscheid 11.10.26): „Veröffentlichungen“ füllt seine Spalte wie „Startdatum“ darüber */
.zeitplan-formular .feld-ende-anzahl input[type=number] { width: 100%; }
.zeitplan-formular .feld-nachholen > label { white-space: nowrap; }
.feld-gruppe > .feld-reihe:last-child > .field, .feld-gruppe > .checkbox-reihe > p { margin-bottom: 0; }
.hilfe-popup + .format-folge, .hilfe-popup + .uhrzeiten, .hilfe-popup + .wochentage { margin-top: var(--abstand-2); }
/* B16/N2: drei gleich breite Formatfelder mit Pfeil (Symbol, Strichstärke 2 px) dazwischen */
.format-folge { display: flex; align-items: center; gap: var(--abstand-2); }
.folge-feld { flex: 1 1 0; min-width: 0; }
.folge-feld[hidden], .folge-pfeil[hidden] { display: none; }
.folge-pfeil { display: inline-flex; color: var(--muted); }
/* B17/N4: Uhrzeitfelder stapeln sich in ihrer Spalte; rechts neben dem ersten „+ Uhrzeit“ in Feldhöhe, ab dem zweiten
   „ד */
.uhrzeiten { display: flex; flex-direction: column; gap: var(--abstand-2); }
.uhrzeit-zeile { display: flex; align-items: center; gap: var(--abstand-2); }
.uhrzeit-zeile[hidden] { display: none; }
.uhrzeit-zeile [data-uhrzeit-plus][hidden] { display: none; }  /* `.btn` setzt display – `hidden` muss gewinnen */
/* B15 (H6): Wochentag-Kästchen senkrecht mittig zur Feldhöhe */
.wochentage > div { min-height: var(--knopf-hoehe); align-items: center; }
.wochentage > div label { margin-bottom: 0; }
@media (max-width: 760px) {
  .feld-reihe { grid-template-columns: minmax(0, 1fr); }
  .feld-reihe > .feld-spanne-2, .feld-reihe > .feld-spanne-3, .feld-reihe > .feld-spanne-5 { grid-column: auto; }
  .zeitplan-formular .feld-reihe { grid-template-columns: minmax(0, 1fr); }
  .zeitplan-formular .uhrzeit-tage, .zeitplan-formular .feld-reihe > .uhrzeit-tage { grid-template-columns: minmax(0, 1fr);
    row-gap: var(--abstand-4); grid-column: auto; }  /* B6: stapelt; die Formatfolge bleibt dreispaltig */
  .feld-gruppe > .feld-reihe:last-child > .field:not(:last-child) { margin-bottom: var(--abstand-4); } }
/* Plan 017, B20: Absendeknöpfe in Formularkästen rund 20 % breiter – über ein Token; kartenbreite Knöpfe der
   Konfiguration nutzen ohnehin die Kartenbreite (Leitfaden §5 „Ausrichtung“) */
:root { --absende-padding-x: var(--abstand-6); }
.konfig-karte:not(.einstellungen-raster .konfig-karte, .konten-raster .konfig-karte) .actions > .btn.primary {
  padding-left: var(--absende-padding-x); padding-right: var(--absende-padding-x); }
.wochentage ul, .wochentage div { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.wochentage label { font-weight: 500; display: flex; gap: 4px; align-items: center; }
/* Plan 007, B21: gestapeltes Vorschaubild einer Serie – Rahmen wie .medium-mini, Ebenen 30 × 40 px, die hinteren je
   3 px nach rechts und 4 px nach oben versetzt. Vorn steht das letzte Kind (Bild 1, umgekehrt ausgegeben). */
.medium-stapel { position: relative; display: inline-block; width: 36px; height: 48px; vertical-align: middle; }
.medium-stapel .ebene { position: absolute; width: 30px; height: 40px; }
.medium-stapel .ebene .medium-mini { width: 30px; height: 40px; border: 1px solid var(--stapel-rand);
  box-sizing: border-box; }
.medium-stapel[data-ebenen="3"] .ebene:nth-child(1) { left: 6px; top: 0; }
.medium-stapel[data-ebenen="3"] .ebene:nth-child(2) { left: 3px; top: 4px; }
.medium-stapel[data-ebenen="3"] .ebene:nth-child(3) { left: 0; top: 8px; }
.medium-stapel[data-ebenen="2"] .ebene:nth-child(1) { left: 3px; top: 4px; }
.medium-stapel[data-ebenen="2"] .ebene:nth-child(2) { left: 0; top: 8px; }
/* Plan 007, B18: geheimes Feld mit Augen-Knopf rechts im Feld */
.geheim-feld { position: relative; display: block; }
.geheim-feld input { padding-right: 40px; }
.geheim-feld .auge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); cursor: pointer; }
.geheim-feld .auge:hover, .geheim-feld .auge:focus-visible { color: var(--text); background: var(--hover); }
.geheim-feld .auge .auge-aus, .geheim-feld .auge[aria-pressed="true"] .auge-an { display: none; }
.geheim-feld .auge[aria-pressed="true"] .auge-aus { display: inline-flex; }
/* Plan 022, B7: Sprache als Kombifeld – Pfeil rechts im Feld (wie der Augen-Knopf), Liste im Stil der Aktionsmenüs;
   enthaltene Sprachen mit grünem Haken, Kürzel vor dem Namen. Ohne JavaScript bleibt der Pfeil versteckt. */
.sprache-feld { position: relative; display: block; }
.hilfe-popup + .sprache-feld { margin-top: 8px; }
.sprache-feld input { padding-right: 40px; }
.sprache-feld .sprache-knopf { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); cursor: pointer; }
.sprache-feld .sprache-knopf[hidden] { display: none; }
.sprache-feld .sprache-knopf:hover, .sprache-feld .sprache-knopf:focus-visible { color: var(--text); background: var(--hover);
  outline: none; }
.sprache-liste { max-height: 320px; overflow-y: auto; min-width: 230px; }
.sprache-eintrag { display: flex; align-items: center; gap: 8px; }
.sprache-eintrag .sprache-haken { display: inline-flex; width: 14px; color: var(--ok); visibility: hidden; }
.sprache-eintrag[aria-selected="true"] .sprache-haken { visibility: visible; }
.sprache-eintrag .sprache-code { min-width: 22px; font-weight: 600; color: var(--text-2); }
/* Plan 020: Kalender-Monatsansicht (Leitfaden §1 Zeile 2 Ausnahme B2, Abschnitt „Monatskalender“) */
:root { --monat-kopf-bg: #e9edf3; --monat-nachbar-bg: #f4f5f7; --monat-zelle-hoehe: 88px; --monat-kw-breite: 44px;
  --gelb: #e0a800; --gelb-stark: #fff4cc; }
/* B1: Umschalter „Zeilen | Monat“ im Stil der Nebenaktion, aktive Hälfte gefüllt */
/* Plan 024, S11/E9 (Variante D, Nutzer 11.10.26): EIN Rahmen in Akzentblau um die ganze Leiste – vorher überlappten die
   Segmente um 1 px, und der graue Rahmen eines ausgegrauten Nachbarn übermalte die blaue Kante. Fläche hellblau wie die
   Nebenaktion, Trennlinien hellblau, gewählt blau gefüllt mit weißer Schrift, wählbar blaue Schrift, nicht wählbar blasses
   Blau (Schrift und Symbol; `aria-disabled` und Mauszeiger „nicht erlaubt“ bleiben). Die Leiste ist 30 px hoch wie
   `.btn.klein`. Gilt für jeden Umschalter (Medien je Format, Kalender „Zeilen | Monat“) und die Formatknöpfe der Vorschau.
   Wächter: tests/test_plan022_umschalter.py */
:root { --umschalter-trenner: #b2c8fb; --umschalter-blass: #93b0f0; }
.umschalter { display: inline-flex; }
.umschalter, .vorschau-formate { position: relative; box-sizing: border-box; height: var(--knopf-hoehe-klein);
  border-radius: var(--radius-sm); overflow: hidden; background: var(--knopf-neben-bg); box-shadow: var(--shadow); }
/* Plan 025, B6: der Rahmen ist eine nach innen versetzte Kontur am Umschalter selbst statt einer `::after`-Überlagerung
   – die Überlagerung lag in der klebenden Vorschau-Spalte auf einem Pixelbruchteil, und nach dem Scrollen fehlte ihre
   obere Linie. Die Kontur wird nach dem Inhalt gezeichnet und liegt so weiter über den Segmenten (30 px hoch wie
   `.btn.klein`, Leitfaden §5). */
.umschalter, .vorschau-formate { outline: 1px solid var(--accent); outline-offset: -1px; }
/* positionierte Segmente (`.btn.symbolknopf`) würden die Kontur des Elternelements übermalen – deshalb statisch */
.umschalter > .btn, .vorschau-formate > .btn { position: static; }
.umschalter > .btn, .vorschau-formate > .btn { height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--knopf-neben-bg); color: var(--accent); }
/* Validierung 025, D2: Die Segmentregel darüber setzt `box-shadow: none` und löschte damit den Fokus-Schatten von
   `.btn:focus-visible`. Der Fokus ist ein eigener Zustand: innen 2 px Akzent, beim gewählten (blauen) Segment ein
   weißer Innenring – ein äußerer Ring würde vom `overflow: hidden` der Leiste abgeschnitten. */
.umschalter > .btn:focus-visible, .vorschau-formate > .btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px var(--surface); }
.umschalter > .btn + .btn, .vorschau-formate > .btn + .btn { border-left: 1px solid var(--umschalter-trenner); }
.umschalter > .btn:hover, .vorschau-formate > .btn:hover { background: var(--knopf-neben-bg-hover); }
.umschalter > .btn.aktiv, .vorschau-formate > .btn.aktiv, .umschalter > .btn.aktiv:hover,
.vorschau-formate > .btn.aktiv:hover { background: var(--accent); color: var(--accent-text); }
.umschalter > .btn[aria-disabled="true"], .umschalter > .btn[aria-disabled="true"]:hover,
.vorschau-formate > .btn[aria-disabled="true"], .vorschau-formate > .btn:disabled {
  background: var(--knopf-neben-bg); color: var(--umschalter-blass); cursor: not-allowed; }
/* B3: Monatsname in Titelblau zwischen Navigation und Umschalter */
.monat-name { margin: 0 var(--abstand-2); color: var(--titel); font-weight: 650; white-space: nowrap; }
/* Plan 031, V16: feste Breite für den längsten Monatsnamen samt vierstelliger Jahreszahl – „September 0000“, in der
   tatsächlichen Schrift gemessen 115,5 px (Edge, 13.10.26) – rechtsbündig zum Umschalter, gleich breite Ziffern;
   „Heute“, „‹“ und „›“ stehen in jedem Monat an derselben Stelle. Wächter: tests/test_plan031_kalender.py */
:root { --monat-name-breite: 116px; }
.monat-name { display: inline-block; min-width: var(--monat-name-breite); text-align: right;
  font-variant-numeric: tabular-nums; }
/* B20: Farbpunkt vor jedem Status-Filter als Legende (`data-punkt`, vor der Beschriftung) */
.statusleiste a.status-filter[data-punkt]::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  box-sizing: border-box; background: var(--border-strong); }
.statusleiste a.status-filter[data-punkt="ok"]::before { background: var(--ok); }
.statusleiste a.status-filter[data-punkt="warn"]::before { background: var(--gelb); }
.statusleiste a.status-filter[data-punkt="err"]::before { background: var(--err); }
.statusleiste a.status-filter[data-punkt="prognose"]::before { background: transparent; border: 1.5px dashed var(--muted); }
.statusleiste a.status-filter[data-punkt="prognose-warn"]::before { background: transparent; border: 1.5px dashed var(--err); }
/* B5–B7: Raster Montag bis Sonntag, KW links; feste Zellenhöhe für drei Termine und „+n weitere“ */
.monat-karte { overflow: hidden; }  /* Innenabstand 24 wie jede Karte (Leitfaden §4) */
.monat { display: grid; grid-template-columns: var(--monat-kw-breite) repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.monat-kopf, .monat-woche { display: contents; }
.monat-kopf > div { padding: 5px 8px; background: var(--monat-kopf-bg); color: var(--text-2); font-size: .8rem;
  font-weight: 600; border-bottom: 1px solid var(--border-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monat-kw { display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; color: var(--muted);
  font-size: .7rem; border-bottom: 1px solid var(--border); background: var(--monat-kopf-bg); white-space: nowrap; }
.monat-tag { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; height: var(--monat-zelle-hoehe);
  box-sizing: border-box; padding: 3px 4px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--card); }
.monat-tagzahl { font-size: .78rem; font-weight: 600; color: var(--text-2); line-height: 16px; height: 16px; flex: none; }
/* B6: Nachbarmonat grau, heute hellblau mit Rahmen und weißer Zahl im blauen Kreis */
.monat-tag.nachbar { background: var(--monat-nachbar-bg); }
.monat-tag.nachbar .monat-tagzahl { color: var(--muted); font-weight: 400; }
.monat-tag.heute .monat-tagzahl { align-self: flex-start; min-width: 20px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; background: var(--accent); color: #fff; text-align: center; }
/* B9/B10: Termin – Logo, Uhrzeit fett, Titel gekürzt; heller Hintergrund der Statusfarbe. Nutzerentscheid 10.10.26:
   ohne Rand links (die Fläche trägt die Zuordnung zur Legende), Text in jedem Zustand in Textfarbe */
a.termin { display: flex; align-items: center; gap: 4px; min-width: 0; height: 17px; flex: none; padding: 0 4px;
  box-sizing: border-box; border-radius: 3px; background: var(--hover-stark);
  color: var(--text); font-size: .74rem; line-height: 1; text-decoration: none; white-space: nowrap; overflow: hidden;
  cursor: pointer; -webkit-user-drag: none; user-select: none; }  /* B13: kein Ziehen */
a.termin:hover, a.termin:focus-visible { filter: brightness(.96); outline: none; box-shadow: var(--ring); }
a.termin.ok { background: var(--ok-stark); }
a.termin.warn { background: var(--gelb-stark); }
a.termin.err { background: var(--err-stark); }
a.termin.grau { background: var(--hover-stark); }
/* B17/B18: Prognose gestrichelt, Warnung rot gestrichelt mit rotem Warnzeichen; Text in Textfarbe (Nutzerentscheid 10.10.26) */
a.termin.prognose { background: var(--card); border: 1px dashed var(--border-strong); }
a.termin.prognose.warnung { border-color: var(--err); }
a.termin.prognose.warnung .termin-titel svg { color: var(--err); }
.termin-logo { flex: none; display: inline-flex; width: 12px; height: 12px; }
.termin-logo svg { width: 12px; height: 12px; flex: none; }
.termin-zeit { flex: none; font-weight: 700; }
.termin-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 3px; }
.termin-titel svg { flex: none; }
/* B11: „+n weitere“ im Link-Stil, Tages-Popup wie der Hilfe-Knopf (Popover, Esc schließt) */
.monat-mehr { flex: none; align-self: flex-start; margin: 0; padding: 0 2px; border: 0; background: none; color: var(--accent);
  font: inherit; font-size: .72rem; line-height: 12px; cursor: pointer; }
.monat-mehr:hover, .monat-mehr:focus-visible { text-decoration: underline; outline: none; box-shadow: var(--ring); }
.monat-popup { width: 300px; max-width: calc(100vw - 32px); margin: auto; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.monat-popup h3 { margin: 0 0 var(--abstand-3); font-size: .95rem; font-weight: 600; color: var(--titel); }
.monat-popup a.termin { margin-bottom: 4px; height: 24px; font-size: .8rem; }
.monat-popup a.termin .termin-titel { overflow: visible; white-space: normal; }
@supports (position-area: bottom) {
  .monat-popup { inset: auto; margin: 4px 0; position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
}
/* B9: schmales Fenster – nur Logo und Uhrzeit, Raster bleibt siebenspaltig ohne waagrechtes Rollen */
@media (max-width: 1000px) {
  .monat-tag > a.termin .termin-titel { display: none; }  /* K4: nur im Raster, nie im Tages-Popup */
  :root { --monat-kw-breite: 30px; }
  .monat-kopf > div { padding: 6px 2px; font-size: .7rem; }
}
@media (max-width: 760px) {
  .monat-kw { font-size: .6rem; }
  .monat-tag { padding: 3px 2px; }
  .monat-tag > a.termin { padding: 0 2px; gap: 2px; font-size: .68rem; }
  .monat-mehr { font-size: .68rem; }
}

/* Plan 024, S6/E8 (AP11): vor jedem Warn- und Fehler-Label ein Warnsymbol (Lucide „triangle-alert“ als Maske, Farbe der
   Labelschrift) – zentral, keine Änderung an den Label-Templates, kein Vorsatz „Achtung:“. Das Label wird dafür ein
   Inline-Flex-Kasten (Symbol und Text senkrecht mittig, Grundlinie bleibt die des Texts). */
.badge { display: inline-flex; align-items: center; }
/* Plan 028, S19: das Dreieck immer rot (`--err`), unabhängig von der Schriftfarbe des Labels – jedes warn-/err-Label zeigt
   Handlungsbedarf, auch die gelben „… inaktiv“-Labels */
.badge.warn::before, .badge.err::before { content: ""; flex: none; width: 1.1em; height: 1.1em; margin: 0 .3em 0 -.15em;
  background: var(--err); -webkit-mask: url("../icons/lucide/triangle-alert.svg") center / contain no-repeat;
  mask: url("../icons/lucide/triangle-alert.svg") center / contain no-repeat; }
/* Plan 024, S10 (AP11b): Labels senkrecht mittig zur Versalhöhe des umgebenden Texts (≤ 0,5 px), zentral für alle
   Orte. Segoe UI: Versalhöhe 0,700 em, x-Höhe 0,500 em, Zeilenmitte 0,064 em über der Versalmitte (siehe Knöpfe, Plan
   016, B16). Gemessen (Plan 024): Labels in Flex-Zeilen 1,2–1,8 px, in Tabellen 0,8 px zu hoch. `--text-schrift` trägt
   die Schriftgröße des Elternelements ins Label (registriert, damit der berechnete Wert vererbt wird). Fließtext: Mitte
   auf die x-Höhe (`middle`) und um die halbe Differenz zur Versalhöhe (0,1 em) höher; Flex-Zeilen (Überschriften mit
   Symbol, Post-Kopf) zentrieren die Zeilenbox – dort 0,064 em tiefer. Wächter: tests/test_labels_mittig.py */
@property --text-schrift { syntax: "<length>"; inherits: true; initial-value: 16px; }
:where(:not(.badge)) { --text-schrift: 1em; }
.badge { vertical-align: middle; position: relative; top: calc(var(--text-schrift) * -.1); }
.seitenkopf h1 > .badge, .abschnitt-kopf > h2 > .badge, .kopf-zeile > h2 > .badge, .kopf-labels > .badge,
.gruppe-titel > .badge { top: calc(var(--text-schrift) * .064); }
/* Plan 024, S13 (AP11e): Status-Label auf den Smartphones der Feed-Vorschau waagrecht mittig zur Gerätebreite (gleicher
   Abstand links und rechts); die senkrechte Lage (6 px) bleibt. Einziger Ort, der ein Label auf ein Vorschau-Smartphone
   legt (Inventur Plan 024). Wächter: tests/test_plan024_feinschliff.py */
.feed-geraet .schild-entwurf { left: 0; right: 0; width: max-content; margin-inline: auto; }
/* Plan 031, V10: Das Schild steht unten im Smartphone, mit demselben Abstand zur Unterkante des Geräts wie bisher
   oben (6 px). Unter dem Gerät liegt das Datum (6 px Abstand, feste Zeilenhöhe `--feed-datum-zeile`) – das Schild
   steht um genau diese Höhe höher und verdeckt das Datum nicht. Wächter: tests/test_plan031_feed.py */
:root { --feed-datum-zeile: 20px; }
.feed-geraet .feed-datum { line-height: var(--feed-datum-zeile); }
.feed-geraet .schild-entwurf { top: auto; bottom: calc(6px + 6px + var(--feed-datum-zeile)); }
/* Plan 024, S9 (AP11a): Medientyp-Symbol nur bei Videos. Auf der Kachel ist der Kasten genauso groß wie der ×-Knopf und
   sitzt auf derselben Höhe (gleicher Abstand vom oberen Rand), links statt rechts – eine Antwortstelle über gemeinsame
   Tokens; Fläche schwarz, Symbol weiß (Plan 023, P5). Mini (18/13 px) bleibt. Wächter: tests/test_plan022_medientyp.py */
:root { --kachel-knopf: 24px; --kachel-knopf-symbol: 16px; --kachel-knopf-rand: 2px; }
.thumb-x { top: var(--kachel-knopf-rand); right: var(--kachel-knopf-rand); width: var(--kachel-knopf);
  height: var(--kachel-knopf); }
.thumb-x svg.symbol { width: var(--kachel-knopf-symbol); height: var(--kachel-knopf-symbol); }
/* Plan 031, V2: Mini-Bilder in Tabellen tragen keine Video-Kennzeichnung mehr; das Label sitzt nur auf Kacheln. */
/* Plan 024, S16 (AP11h): Spalte „Termine“ der Zeitpläne-Tabelle zeilenweise (Wiederholung / Uhrzeit / ab Datum) */
td.termin-zeilen .termin-zeile { display: block; white-space: nowrap; }
/* Plan 024, S15 (AP11g): die sieben Wochentage verteilen sich gleichmäßig über die Breite ihrer Spalte (so breit wie das
   dritte Formatfeld darüber) – erstes Kästchen an der linken, letzter Text an der rechten Kante; reicht die Breite nicht,
   brechen sie wie bisher um (Mindestabstand bleibt). Zeitplan anlegen und bearbeiten. */
.zeitplan-formular .wochentage > div { justify-content: space-between; }.zeitplan-formular .wochentage input[type=checkbox] { margin-left: 0; }  /* erstes Kästchen bündig an der linken Kante */
/* Plan 024, Nachtrag N2: rote Fläche der Video-Kennzeichnung (`--video-rot`). Seit Plan 031, V2 gibt es nur noch das
   Label „Video“ auf Kacheln (unten); das Play-Dreieck auf Mini-Bildern entfällt. Wächter: tests/test_plan022_medientyp.py */
:root { --video-rot: #ff0000; }
.medium-typ { background: var(--video-rot); border-radius: 6px; color: #ffffff; }
/* Nutzerwunsch 12.10.26: Auf Kacheln steht statt des Dreiecks das Label „Video“ unten mittig, 4 px über dem Bildrand,
   weiß und fett auf `--video-rot` (keine Statusbedeutung, Leitfaden §10a); Mini-Bilder in Tabellen ohne Kennzeichnung */
.thumb-wahl .medium-typ { top: auto; bottom: 4px; left: 50%; transform: translateX(-50%); width: auto; height: auto;
  padding: 2px 7px; border-radius: 4px; line-height: 1.2; }  /* Plan 028, N3: Innenabstand mit der Schrift vergrößert */
/* Plan 028, N3 (Nutzerwunsch 12.10.26): Schrift eine Stufe größer, 11 statt 10 px */
.thumb-wahl .medium-typ-text { display: inline; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
/* Plan 024, Nachtrag N4 (Nutzer 11.10.26): Zwischen Text und einem folgenden Label stehen überall 10 px – wie im
   Seitentitel (`.seitenkopf h1`, gap 10 px). Im Fließtext (Zustandszeile, Tabellenzelle) steht vor dem Label ein
   Leerzeichen (Segoe UI 0,273 em der umgebenden Schrift); der Rand ergänzt es auf 10 px. Ebenso zwischen zwei Labels in
   einer Tabellenzelle. Flex-Zeilen (Überschriften, Post-Kopf) regeln den Abstand über `gap`. Wächter:
   tests/test_labels_mittig.py (Messung des Abstands). Validierung 024, C5: Labels nach einem Textknoten, den kein
   Selektor erreicht („Ja/Nein“, „–“), tragen `.nach-text`; in der Checkbox-Liste ergänzt der Rand das `gap` (8 px). */
.zustandszeile .badge, td > .titel-link ~ .badge, td > .badge + .badge, .badge.nach-text {
  margin-left: calc(10px - .2734 * var(--text-schrift)); }
fieldset.checkbox-liste label > .badge { margin-left: 2px; }
/* Plan 027, H2; Plan 029, H2/H6/H10: Seite „Hilfe“ – Karte „Chatbot“ bzw. „Frühere Gespräche“ in fester, an den
   Bildschirm angepasster Höhe (`.karte-fenster`, Plan 031, V12), Verlauf bzw. Tabelle
   mit eigener Scrollleiste, Eingabe unten. Fragen rechts dunkel (`--chat-frage-bg`, Kontrast 13,9 : 1), Antworten
   links mit dem Assistenten-Bild, darunter grau „Quelle: …“. */
:root { --chat-frage-bg: #2b2f36; }
/* Plan 031, V12: Karte fester, an den Bildschirm angepasster Höhe – ein Baustein für die Hilfe (Plan 029) und die fünf
   Listenseiten (Inhalte, Planer → Posts, Zeitpläne, Kalender „Zeilen“, Papierkorb). app.js misst die Oberkante der
   Karte im Dokument (`--karte-oben`) und alles, was unter ihr noch folgt (`--karte-rest`: Ränder der Reiterfläche, `main`
   unten 24 px); darunter bleiben 24 px. Unter 420 px Höhe scrollt wieder die Seite. Inhalt in `.tabellen-bereich`
   (eigener Scrollbereich, Kopf steht) bzw. im Verlauf des Chatbots. Wächter: tests/test_plan031_tabellen.py */
.karte-fenster { display: flex; flex-direction: column; box-sizing: border-box;
  height: calc(100dvh - var(--karte-oben, 260px) - var(--karte-rest, 24px)); min-height: var(--karte-mindesthoehe); }
/* Mindesthöhe 420 px (Hilfe, Plan 029 K3; Inhalte, Papierkorb). In der Reiterfläche des Planers kosten Reiterzeile,
   Statusleiste und Flächenrand bis zu 190 px mehr – bei 900 px Innenhöhe blieben dort nur 411 px; dort 320 px (Plan 031,
   V12, gemessen 13.10.26), sonst scrollte die Seite schon bei üblicher Fensterhöhe. */
:root { --karte-mindesthoehe: 420px; }
.reiter-flaeche .karte-fenster { --karte-mindesthoehe: 320px; }
/* Unter der Karte bleiben genau 24 px (Messung K3): kein Abschnittsabstand, `main` unten 24 statt 32 px */
.abschnitt:has(.karte-fenster) { margin-bottom: 0; }
/* Plan 032, N1: folgen unter der Karte noch Tabellen (Systemstatus: Fehler), halten sie 24 px Abstand – ohne sie
   endet die Seite wie bei den übrigen Listenseiten direkt unter der Karte */
#status-fehler > .abschnitt:first-child { margin-top: 24px; }
main:has(.karte-fenster) { padding-bottom: 24px; }
.tabellen-bereich { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tabellen-bereich > table td, .tabellen-bereich > table th { overflow-wrap: anywhere; }
.tabellen-bereich > table thead th { overflow-wrap: normal; position: sticky; top: 0; z-index: 2;
  background: var(--card); }
.hilfe-verlauf { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.chat-karte .hilfe-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 16px; padding-right: 6px; }
.chat-karte .hilfe-form { flex: 0 0 auto; }
.chat-karte .hilfe-form > p { margin-top: 0; }
.hilfe-frage { align-self: flex-end; max-width: 75%; padding: 10px 14px; border-radius: var(--radius);
  background: var(--chat-frage-bg); color: #ffffff; }
.hilfe-frage.vorlaeufig { white-space: pre-wrap; }  /* H4: vom Browser eingefügt, Zeilenumbrüche wie die Serverfassung */
.hilfe-antwort { align-self: flex-start; max-width: 85%; display: flex; gap: 10px; align-items: flex-start; }
.chat-bild { flex: 0 0 36px; }
.hilfe-antwort-text { min-width: 0; padding-top: 7px; overflow-wrap: anywhere; }
.hilfe-antwort-text > :first-child { margin-top: 0; }
.hilfe-antwort-text > :last-child { margin-bottom: 0; }
.hilfe-antwort-text ul, .hilfe-antwort-text ol { padding-left: 22px; }
.hilfe-nachgesehen { margin: 6px 0 0; color: var(--muted); font-size: 0.9em; }
.hilfe-zustand { margin: 0 0 16px; }
/* H2: zwei Zeilen, wächst bis acht Zeilen, dann eigener Scrollbereich (Rückfall ohne `field-sizing`: app.js) */
.hilfe-form textarea { field-sizing: content; min-height: calc(2lh + 14px); max-height: calc(8lh + 14px);
  overflow-y: auto; }  /* Höhe bleibt von Hand veränderbar (Plan 016, Textfelder) */
.chat-karte .knopfzeile .btn.rechts { margin-left: auto; }
/* H4: „denkt nach …“ – drei pulsierende Punkte, ohne Animation bei reduzierter Bewegung */
.hilfe-denkt .hilfe-antwort-text { color: var(--muted); }
.denk-punkte span { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%;
  background: currentColor; animation: denk-puls 1.2s infinite ease-in-out; }
.denk-punkte span:nth-child(2) { animation-delay: .2s; }
.denk-punkte span:nth-child(3) { animation-delay: .4s; }
@keyframes denk-puls { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .denk-punkte span { animation: none; opacity: .6; } }
/* H10: Tabelle „Frühere Gespräche“ scrollt in der Karte, der Kopf bleibt stehen – seit Plan 031, V12 über den
   gemeinsamen `.tabellen-bereich` */

/* Plan 034, AP2: Abmelden rechts in der Kopfleiste; Login-Seite mit schmaler Karte */
header.top .abmelden { grid-column: 3; justify-self: end; margin: 0; }
@media (max-width: 1100px) { header.top .abmelden { grid-column: auto; justify-self: center; } }
.anmelde-karte { max-width: 420px; }