/* Markenfarben aus den Design-Tokens von ab-tax.de uebernommen (Webflow-Variablen
   `--_primitives---colors--*`, abgerufen 2026-07-30, nachgeprueft 2026-08-06), damit
   Portal und Passwort-Tresor dasselbe Bild ergeben. Diese Markenwerte stehen auch im
   Theme-Block von infra/psono/config.webclient.json — wer eine Markenfarbe aendert,
   muss sie dort mitaendern. Die lokalen semantischen Portal-Akzente gelten dort nicht.

   ⚠️ NACHGEMESSEN 2026-08-06: die FARBEN stimmten schon vorher exakt mit der Website
   ueberein — das Portal wirkte trotzdem fremd. Der Unterschied lag woanders, und er
   steckt jetzt in den drei Tokengruppen darunter: Schrift (Poppins statt Systemschrift,
   und nur die Gewichte 400/500, die auch die Website benutzt), Rundungen (die Website
   rundet 8-40px, das Portal rundete 6-10px) und Grundflaeche. Die Grundflaeche ist
   fuer das Mitarbeiterportal nun weiss; Kontur und Schatten trennen die Karten. */

/* Mitgeliefert statt von Google geholt — Begruendung in schrift/HERKUNFT.md.
   `font-display: swap`: bis die Datei da ist, wird die Systemschrift gezeigt. Die
   Alternative (`block`) hielte den Text bis zu drei Sekunden unsichtbar, und das
   Portal ist ein Arbeitsmittel, kein Schaufenster. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schrift/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schrift/poppins-500.woff2') format('woff2');
}

:root {
  --marke-dunkel: #020f18;
  --marke-blau: #224366;
  --marke-blaugrau: #7396b4;
  --marke-text: #2c3942;
  --marke-flaeche: #f6f8f9;
  --marke-linie: #edf1f4;
  /* 5 % Schwarz — auf der Website `neutral-200`, dort der Ton fuer zarte Schatten und
     Abgrenzungen. Ersetzt im Portal die fruehere Haarlinie um jede Karte. */
  --marke-hauch: #020f180d;
  /* Gedaempfte Fliessschrift-Farbe fuer Nebentexte. Vorher stand an einem Dutzend
     Stellen `#6b7a85` einzeln im Blatt. */
  --marke-gedaempft: #6b7a85;
  /* Eine Stufe kraeftiger als `--marke-gedaempft`, aber deutlich unter `--marke-text`.
     Fuer Platzhalter in Ueberschriftengroesse, wo der gedaempfte Ton zu blass wirkt. */
  --marke-gedaempft-kraeftig: #4d5b66;

  /* Lokale, semantische Akzente — keine zweite globale Statuspalette. */
  --semantik-salbei-flaeche: #eaf3ed;
  --semantik-salbei-text: #52715f;
  --semantik-sand-flaeche: #f8f0e3;
  --semantik-sand-text: #846138;
  --semantik-stone-flaeche: #f3f1ee;
  --semantik-stone-text: #6f6a63;

  /* Markenverwandte Radien: Bedienung 8px, Inhaltsflaechen 12px, Dialoge 24px. */
  --rund-klein: 0.5rem;
  --rund: 0.75rem;
  --rund-gross: 1.5rem;

  --schrift: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --kopf-hoehe: 64px;
  --leiste-breite: 250px;
  --leiste-breite-schmal: 60px;
  /* Vorher 72rem. Auf einem 27-Zoll-Monitor blieben dadurch rund 470 px ungenutzt,
     waehrend der Inhalt gedraengt in der Mitte stand (FB, 2026-08-06). */
  --inhalt-breite: 88rem;
  /* Leiste und Publishing-Flaeche muessen dieselbe Kante haben — ein Wert fuer beide. */
  --editor-breite: 66rem;
  /* Eigene, breitere Kante nur fuer den News-Editor (Design-Gate-2-Fidelity-Pass 4,
     FB 2026-09-05, §2): `--editor-breite` traegt auch die News-Detail-Ansicht
     (`.beitrag-flaeche`), die dieser Durchgang ausdruecklich nicht anfasst. Bewusst
     keine Grossbildschirm-Skalierung wie bei `--editor-breite` in der 100rem-Regel
     unten (ebenfalls nicht Teil dieses Durchgangs). */
  --redaktion-breite: 76rem;

  /* Statusfarben (Design-Gate 1, konsolidiert): vorher als Einzelwerte verstreut
     (z. B. #3d6b52/#a33 in .speicherstand-*). Eine Stelle, wiederverwendbar fuer
     Gate 2 (Fristen/Aufgaben-Status). */
  --status-erfolg: #3d6b52;
  --status-erfolg-flaeche: #e8f2ec;
  --status-fehler: #a33;
  --status-fehler-flaeche: #f9e8e8;
  --status-warnung: #8a5a22;
  --status-warnung-flaeche: #faf0e2;
  --status-info: var(--marke-blau);
  --status-info-flaeche: #e9eef3;

  /* Typografie-Skala (Design-Gate 1): die bisher je Datei einzeln gesetzten
     rem-Werte fuer Ueberschriften/Fliesstext an einer Stelle benannt. */
  --schrift-h1: 2rem;
  --schrift-h2: 1.9rem;
  --schrift-h3: 1.15rem;
  --schrift-klein: 0.8125rem;
  /* Gemeinsame Rollen fuer Portal, Redaktion und Fachoberflaechen. */
  --schrift-bedienung: 0.875rem;
  --schrift-abschnitt: 1.25rem;
  --flaeche-inhalt: #fff;
  --flaeche-navigation: #fff;
  --flaeche-akzent: #eef3f7;
  --kontur: #dce3e8;
  --aktion: var(--marke-dunkel);
  --aktion-hover: var(--marke-dunkel);
  --abstand-klein: 0.5rem;
  --abstand: 1rem;
  --abstand-gruppe: 1.5rem;
  --abstand-abschnitt: 2rem;
  --bedienhoehe: 2.75rem;
  --kontext-breite: 19rem;
  --schatten-flaeche: 0 1px 3px var(--marke-hauch);
  --schatten-navigation: 2px 0 8px #020f1808;
}

/* ---------- Breakpoints (AP-A8, FB 2026-09-07) ----------
   Vorher lagen zehn Werte in gemischten Einheiten im Blatt (620/640/700/900/1120/1150px
   und 30/48/60/75rem). Die Sidebar klappte bei 700px, Tabellen brachen bei 900px, das
   News-Detailraster bei 1200px — zwischen 900 und 1150px entstanden dadurch
   Zwischenzustaende, die niemand gestaltet hat. Ab hier gilt EIN Satz, in px:

     600px   Telefon quer / kleines Tablet
     768px   Tablet
     1024px  Off-Canvas-Navigation endet hier, feste Sidebar beginnt
     1280px  Desktop
     1600px  Large Desktop -> bestehender `min-width: 100rem`-Block

   Die Navigationsgrenze ist ueberall `max-width: 1023.98px` bzw. `min-width: 1024px` —
   nie beide als `1024px`, sonst greifen bei genau 1024px beide Regeln und die
   Reihenfolge im Blatt entscheidet. Die 0.98 fangen fraktionale Viewportbreiten (Zoom,
   Anzeigeskalierung) zwischen 1023 und 1024 ein. `app.js` benutzt denselben String in
   `matchMedia`, damit CSS und Verhalten nicht auseinanderlaufen.

   WARUM px und nicht rem: `@media` liest keine Custom Properties, ein
   `--breakpoint`-Token ist hier also nicht moeglich. Und `rem` in einer Media Query
   bezieht sich auf die INITIALE Root-Schriftgroesse, d. h. die Grundeinstellung des
   Browsers/Nutzers — ein `html { font-size: … }` im Blatt wirkt dort nicht. Sinnvolles
   Verhalten, aber es heisst auch: rem- und px-Grenzen im selben Blatt sind nicht
   vergleichbar, sobald jemand seine Browser-Grundschrift aendert. Genau diese Mischung
   war Teil des Problems. Der bestehende `min-width: 100rem`-Block bleibt trotzdem in
   rem — er wurde so geprueft und ist ein reiner Komfort-Aufbau, keine
   Erreichbarkeitsgrenze. */

/* Bewusst KEIN `color-scheme: light dark`: die Markenfarben sind fuer helle Flaechen
   definiert, und der Tresor kennt keinen Dunkelmodus. Ein Portal, das je nach
   Systemeinstellung anders aussieht als der Tresor daneben, widerspricht dem Zweck. */
* { box-sizing: border-box; }
button,
input,
select,
textarea { font-family: inherit; }
body {
  font-family: var(--schrift);
  margin: 0;
  /* 16px wie auf der Website (dort `body { font-size: 16px }`). Vorher erbte das Portal
     die Browservorgabe und setzte fast alles darunter in rem-Bruchteilen — auf einem
     grossen Monitor wirkte das durchweg zu klein. */
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--marke-text);
  background: var(--flaeche-inhalt);
}

/* Die Website kennt genau zwei Gewichte: 400 und 500. 500 ist dort das kraeftigste —
   auch in der 48px-Ueberschrift des Hero. Das Portal setzte vorher 600 und 700, und
   genau das liess es neben der Website technisch statt markentypisch wirken.
   Deshalb hier eine Regel, die alle Ueberschriften zurueckholt. */
h1, h2, h3, h4, strong, b { font-weight: 500; }

/* ---------- Grundriss: durchgehende Kopfzeile, Navigation darunter ---------- */
#rahmen {
  display: grid;
  grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  grid-template-rows: var(--kopf-hoehe) minmax(0, 1fr);
  min-height: 100vh;
}
#rahmen.eingeklappt { grid-template-columns: var(--leiste-breite-schmal) minmax(0, 1fr); }

#seitenleiste {
  grid-column: 1;
  grid-row: 2;
  background: var(--flaeche-navigation);
  border-right: 1px solid var(--kontur);
  box-shadow: var(--schatten-navigation);
  display: flex;
  flex-direction: column;
  /* Die Navigation bleibt beim Scrollen unter der Kopfzeile stehen. */
  position: sticky;
  top: var(--kopf-hoehe);
  height: calc(100vh - var(--kopf-hoehe));
  overflow-y: auto;
  overflow-x: hidden;
}
#logo { height: 30px; width: auto; display: block; flex: none; }
#navigation {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  padding: 1.1rem 0.25rem;
}
.nav-fuss { margin: 0 0.7rem 0.9rem; }

/* ---------- Systemleiste ---------- */
#inhaltsspalte { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
#kopfleiste {
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--kopf-hoehe);
  display: flex;
  background: #071017;
  color: #fff;
  /* Kein eigenes Aussenpadding mehr: es sitzt auf `.kopfleiste-innen`, damit es —
     wie bei `main` — INNERHALB des Breitendeckels liegt. Lag es hier, war der Deckel
     des Wrappers ein reiner Inhaltsdeckel und die Kopfzeile begann gemessen 45px
     links neben der Arbeitsflaeche (AP-A8, 2560px). Hintergrund und Trennlinie
     brauchen das Padding nicht, sie laufen ohnehin ueber die volle Breite. */
  border-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.kopfmarke {
  width: var(--leiste-breite); flex: none; display: flex; align-items: center;
  padding: 0 1.45rem;
}
#rahmen.eingeklappt .kopfmarke { width: var(--leiste-breite-schmal); padding: 0 0.8rem; overflow: hidden; }
/* Inhaltszeile und `main` teilen denselben Breitendeckel. */
.kopfleiste-innen {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  /* Dieselbe Kante wie `main` (dort 2.1rem). Mit den vorherigen 1.9rem auf
     #kopfleiste stand das Suchfeld 3px links neben der Arbeitsflaeche darunter. */
  padding-inline: 2.1rem;
}
/* Reservierte, aber noch funktionslose Systemleisten-Elemente (Suche/Glocke —
   E-2/E-3): sichtbar an ihrer endgueltigen Position, damit die spaetere Fachfunktion
   keinen erneuten Layout-Umbau braucht, aber eindeutig gedaempft und ohne jede
   Interaktion — kein Hover-Feedback, kein Cursor-Wechsel, kein Fake-Zustand. */
.in-vorbereitung { opacity: 0.55; }
.in-vorbereitung-sinnbild {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Navigationsknopf, nur unter 1024px sichtbar (s. Breakpoint-Satz). 44x44px, damit er
   auf dem Telefon ein echtes Ziel ist — die alten Navigationseintraege in der
   Schmalleiste waren 41x31px bzw. 15x28px (AP-A8-Messung). */
.nav-oeffnen {
  display: none;
  flex: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-left: -0.65rem;
  border: 0; border-radius: 999px; background: transparent;
  color: #f5f8fb; cursor: pointer;
}
.nav-oeffnen:hover { background: #ffffff18; }
.nav-oeffnen:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.nav-oeffnen-sinnbild {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}

#globale-suche {
  flex: 1; max-width: 26rem; position: relative;
  display: flex; align-items: center;
}
/* Traegt Pilotmarke/Glocke/Benutzer ab hier — `margin-left: auto` schiebt die
   ganze Gruppe an den rechten Rand, unabhaengig davon, wie weit #globale-suche
   (gedeckelt bei max-width) tatsaechlich waechst (Fidelity-Nachtrag, s. index.html). */
.kopfleiste-rechts { position: relative; display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
#globale-suche .in-vorbereitung-sinnbild { position: absolute; left: 0.85rem; color: #e3ebf2; }
#globale-suche input {
  width: 100%; font: inherit; font-size: 0.88rem; color: #f5f8fb;
  background: #233340; border: 0;
  border-radius: 999px; padding: 0.55rem 1rem 0.55rem 2.5rem;
  cursor: default;
}
#globale-suche input::placeholder { color: #d7e0e8; }
#globale-suche .suche-sinnbild {
  position: absolute; left: 0.85rem; color: #e3ebf2;
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
/* Ergebnisliste der globalen Suche (AP-A5). Dieselbe Schwebeflaeche wie das
   Benutzermenue (`#benutzer-popover`) — kein zweites Popover-Aussehen in derselben
   Leiste. Die Hoehe ist gedeckelt, weil die Trefferzahl je Quelle serverseitig
   begrenzt ist, die Zahl der Quellen aber wachsen soll. */
#globale-suche input:not(:disabled) { color: #f5f8fb; cursor: text; }
.suche-popover {
  position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; z-index: 11;
  max-height: 24rem; overflow-y: auto;
  padding: 0.35rem; border-radius: var(--rund-klein); background: #fff;
  box-shadow: 0 0.6rem 1.5rem var(--marke-hauch), 0 0 0 1px var(--marke-linie);
}
.suche-popover[hidden] { display: none; }
/* Unter 600px ist das Feld selbst zu schmal, um eine Trefferliste zu tragen (bei 375px
   waren es 58px, also ein Wort je Zeile). Die Liste haengt deshalb nicht mehr an der
   Feldbreite, sondern an der Kopfleiste — dieselbe Bauform wie `.glocke-popover`,
   dieselbe Hoehenbegrenzung, kein zweites Popover-Aussehen und kein JS-Positioning
   (FB-Entscheidung 2026-09-07). `position: fixed` statt `absolute`, weil die Liste
   damit den engen `#globale-suche`-Rahmen verlassen kann. */
@media (max-width: 600px) {
  .suche-popover {
    position: fixed;
    top: var(--kopf-hoehe);
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
  }
}
.suche-gruppe + .suche-gruppe { margin-top: 0.35rem; border-top: 1px solid var(--marke-linie); padding-top: 0.35rem; }
.suche-gruppe-titel {
  margin: 0.2rem 0.55rem 0.3rem; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--marke-gedaempft); font-weight: 500;
}
.suche-treffer {
  display: block; padding: 0.4rem 0.55rem; border-radius: var(--rund-klein);
  color: var(--marke-text); text-decoration: none;
}
.suche-treffer:hover, .suche-treffer:focus-visible { background: var(--marke-flaeche); }
.suche-treffer-titel { display: block; font-size: 0.86rem; }
.suche-treffer-zusatz {
  display: block; font-size: 0.76rem; color: var(--marke-gedaempft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suche-hinweis { margin: 0; padding: 0.6rem 0.55rem; font-size: 0.83rem; color: var(--marke-gedaempft); }
/* Eine ausgefallene Quelle wird BENANNT statt weggelassen — sonst waere sie von
   „hat nichts gefunden" nicht zu unterscheiden. */
.suche-stoerung { margin: 0 0.55rem 0.3rem; font-size: 0.78rem; color: var(--status-fehler); }
#pilot-marke {
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #e5edf4; border: 1px solid #b6c4ce; border-radius: 999px;
  padding: 0.18rem 0.6rem; cursor: help; flex: none;
}
.glocke-knopf {
  position: relative;
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border: 0; border-radius: 999px;
  background: transparent; color: #f5f8fb; cursor: default;
}
/* Seit AP-D2 bedienbar. Die `in-vorbereitung`-Regeln greifen weiterhin, solange die
   Klasse dransteht — `glocke.js` nimmt sie erst nach einer gueltigen Sitzung ab. */
/* Eigene Regel statt Weiterverwendung von `.in-vorbereitung-sinnbild`: `glocke.js`
   benennt die Klasse beim Scharfschalten um (gleiches Vorgehen wie `.suche-sinnbild`),
   und ohne diese Regel verloere das SVG Groesse und Strichstaerke. */
.glocke-sinnbild {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.glocke-knopf:not(.in-vorbereitung) { cursor: pointer; }
/* Ohne eigene Regel blieb hier der gelbe Browser-Standardring stehen, waehrend das
   uebrige Portal 29 Regeln mit `--marke-blau` hat (AP-A8-Bestandsaufnahme). */
.glocke-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.glocke-knopf:not(.in-vorbereitung):hover { background: #ffffff18; }
/* Erscheint NUR bei echten ungelesenen Zeilen (`hidden` sonst) — nie als Null und nie
   vor dem ersten Abruf. */
.glocke-abzeichen {
  position: absolute; top: 0.05rem; right: 0.05rem; min-width: 1rem; height: 1rem;
  display: flex; align-items: center; justify-content: center; padding: 0 0.2rem;
  border-radius: 999px; background: var(--status-fehler); color: #fff;
  font-size: 0.62rem; font-weight: 500; line-height: 1;
}
.glocke-abzeichen[hidden] { display: none; }
/* Gleiche Bauform wie das Suche-Popover (Kopfleiste, weisse Flaeche, gleicher Schatten),
   nur rechtsbuendig statt ueber die Feldbreite. Keine eigene Designrunde. */
.glocke-popover {
  position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 11;
  width: min(22rem, calc(100vw - 2rem)); max-height: 24rem; overflow-y: auto;
  padding: 0.35rem; border-radius: var(--rund-klein); background: #fff;
  box-shadow: 0 0.6rem 1.5rem var(--marke-hauch), 0 0 0 1px var(--marke-linie);
}
.glocke-popover[hidden] { display: none; }
.glocke-eintrag {
  display: block; padding: 0.5rem 0.55rem; border-radius: var(--rund-klein);
  color: var(--marke-text); text-decoration: none;
}
.glocke-eintrag + .glocke-eintrag { border-top: 1px solid var(--marke-linie); border-radius: 0; }
.glocke-eintrag:hover, .glocke-eintrag:focus-visible { background: var(--marke-flaeche); }
/* Ungelesen wird doppelt kenntlich gemacht — Punkt UND Fettung: eine Farbe allein
   traegt die Unterscheidung nicht fuer jeden. */
.glocke-eintrag.ungelesen .glocke-eintrag-titel { font-weight: 500; }
.glocke-eintrag.ungelesen .glocke-eintrag-titel::before {
  content: ''; display: inline-block; width: 0.4rem; height: 0.4rem;
  margin-right: 0.4rem; vertical-align: 0.1rem; border-radius: 999px;
  background: var(--status-fehler);
}
.glocke-eintrag-titel { display: block; font-size: 0.86rem; }
.glocke-eintrag-text {
  display: block; font-size: 0.78rem; color: var(--marke-gedaempft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.glocke-eintrag-zeit { display: block; font-size: 0.72rem; color: var(--marke-gedaempft); margin-top: 0.15rem; }
.glocke-hinweis { margin: 0; padding: 0.6rem 0.55rem; font-size: 0.83rem; color: var(--marke-gedaempft); }
/* Auf schmalen Anzeigen zaehlt der Name mehr als der Zustand. */
/* Unter 600px zaehlt jeder Pixel in der Kopfleiste. Pilotmarke und Name waren schon
   ausgeblendet; `AB Tax` und das Chevron kommen dazu, weil das Suchfeld sonst auf
   58px schrumpft (AP-A8-Messung bei 375px) — ein Feld, in dem ein Wort nicht mehr
   sichtbar ist. Der Kreis mit dem Kuerzel bleibt: er ist der Knopf. */
@media (max-width: 600px) {
  #pilot-marke, #benutzer-name, .benutzer-org, .benutzer-chevron { display: none; }
  #globale-suche { min-width: 8rem; }
  /* Beide Systemleisten-Knoepfe auf ein echtes Beruehrungsziel (44px) — auf dem Zeiger
     sind sie unveraendert 2.1rem. */
  .glocke-knopf { width: 2.75rem; height: 2.75rem; }
}
#benutzer-info {
  display: flex; align-items: center; gap: 0.7rem; font: inherit; font-size: 0.86rem;
  border: 0; background: transparent; color: #f5f8fb; cursor: pointer;
  flex: none; padding: 0.3rem 0.4rem 0.3rem 0.3rem; border-radius: 999px;
}
#benutzer-info:hover { background: #ffffff18; }
#benutzer-info:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; border-radius: 999px; }
/* Initialen statt nur des Namens. Kleines Zeichen, grosse Wirkung: das Portal spricht
   die Person an, statt ihren Namen zu drucken. Aus dem Anzeigenamen abgeleitet
   (bausteine.kuerzel) — kein zusaetzliches Feld, das jemand pflegen muesste. */
#benutzer-kreis {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: #fff; color: #071017; font-size: 0.72rem;
}
.benutzer-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
#benutzer-name { font-weight: 500; }
.benutzer-org { font-size: 0.74rem; color: #c7d3dd; }
.benutzer-chevron {
  width: 14px; height: 14px; flex: none; color: #e5edf4;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Der Pilotzustand als Marke statt als Absatz ueber jedem Bereich. Bewusst zurueckhaltend:
   er soll auffindbar sein, wenn jemand danach sucht, und nicht das Erste, was das Auge
   trifft. Der volle Wortlaut haengt als `title` daran (index.html). */
#benutzer-popover {
  position: absolute; top: calc(100% + 0.35rem); right: 1.9rem; z-index: 11;
  padding: 0.45rem; border-radius: var(--rund-klein); background: #fff;
  box-shadow: 0 0.6rem 1.5rem var(--marke-hauch), 0 0 0 1px var(--marke-linie);
}
#benutzer-popover[hidden] { display: none; }
#logout-form { margin: 0; }
#logout-form button {
  background: transparent; color: var(--marke-text); border: 1px solid var(--marke-linie);
  border-radius: 999px; padding: 0.3rem 0.95rem; font-size: 0.83rem; cursor: pointer;
}
#logout-form button:hover { background: var(--marke-flaeche); }

/* Navigationswerte aus der CRM-Referenz; Farben folgen der hellen Portalleiste. */
.nav-eintrag {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--rund);
  background: transparent;
  color: var(--marke-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  min-height: 2.5rem;
}
.nav-eintrag:hover { color: var(--marke-blau);
  background: #eef4f9;
}
.nav-eintrag.aktiv {
  background: #e8f2ff;
  color: #173c70;
  font-weight: 600;
}
.nav-eintrag.aktiv:hover { background: #e8f2ff; }
.nav-eintrag:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.nav-sinnbild {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-text { display: flex; flex-direction: column; min-width: 0; }
.nav-titel { white-space: nowrap; }
.nav-zusatz { font-size: 0.72rem; font-weight: 400; color: var(--marke-gedaempft); white-space: nowrap; }
.nav-buendel { position: relative; }
.nav-buendel-kopf {
  justify-content: flex-start; min-height: 2.15rem;
  margin: 2px 8px 4px; padding: 8px 18px 6px;
  color: var(--marke-blau); font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.nav-buendel-kopf:hover { background: transparent; }
.nav-buendel-kopf .nav-sinnbild { display: none; }
.nav-buendel-pfeil { margin-left: auto; flex: none; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.nav-buendel.aufgeklappt .nav-buendel-pfeil { transform: rotate(225deg); }
.nav-unterpunkte { display: none; margin: 0; padding: 0; border: 0; }
.nav-buendel.aufgeklappt .nav-unterpunkte { display: flex; flex-direction: column; }
.nav-unterpunkt { font-size: 14px; }
#navigation > .nav-onboarding { margin-top: 0.55rem; }

#einklappen {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0; padding: 0.5rem 0.85rem;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--marke-blau); font: inherit; font-size: 0.8rem; cursor: pointer;
}
#einklappen:hover { background: #eef4f9; color: var(--marke-blau); }
/* Der Pfeil ist reine Dekoration und dreht sich mit dem Zustand; die Beschriftung
   daneben tragt die Bedeutung (und aria-expanded am Knopf den Zustand). */
.einklappen-pfeil {
  width: 20px; flex: none; text-align: center;
}
.einklappen-pfeil::before { content: '‹‹'; }
#rahmen.eingeklappt .einklappen-pfeil::before { content: '››'; }

/* Eingeklappt: nur Sinnbilder. Die Beschriftung bleibt als title/aria-label
   erhalten (siehe app.js), damit der Zustand nicht ratbar wird. */
#rahmen.eingeklappt .nav-text,
#rahmen.eingeklappt .nav-pfeil,
#rahmen.eingeklappt .nav-buendel-pfeil,
#rahmen.eingeklappt .einklappen-text { display: none; }
#rahmen.eingeklappt .nav-eintrag,
#rahmen.eingeklappt #einklappen { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
/* In der schmalen Leiste markiert dieselbe Auswahlflaeche den aktiven Eintrag. */
#rahmen.eingeklappt .nav-eintrag.aktiv,
#rahmen.eingeklappt .nav-buendel.hat-aktiven-unterpunkt > .nav-buendel-kopf { background: #e8f2ff; color: #173c70; }
#einklappen:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
#rahmen.eingeklappt .nav-unterpunkte { display: none; }
#rahmen.eingeklappt #seitenleiste { overflow: visible; }
#rahmen.eingeklappt .nav-buendel-kopf .nav-sinnbild { display: block; }
#rahmen.eingeklappt .nav-buendel:is(:hover, :focus-within) .nav-unterpunkte {
  display: flex; position: absolute; top: 0; left: 100%;
  width: 17rem; padding: 0.45rem; z-index: 20;
  background: #fff; border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  box-shadow: var(--schatten-flaeche);
}
#rahmen.eingeklappt .nav-buendel:is(:hover, :focus-within) .nav-unterpunkte .nav-eintrag {
  justify-content: flex-start; gap: 0.65rem; padding: 10px 12px;
}
#rahmen.eingeklappt .nav-buendel:is(:hover, :focus-within) .nav-unterpunkte .nav-text { display: flex; }
/* AP-A8 (FB 2026-09-07): Unter 1024px gibt es keine feste Seitenleiste mehr, sondern
   den Navigationsknopf in der Kopfleiste und die bestehende Schublade (app.js,
   `richteNavigationsschubladeEin`).

   VORHER stand hier eine erzwungene 60px-Sinnbildleiste. Gemessen am 2026-09-07:
   sie kostete bei 375px dauerhaft 16 % der Fensterbreite und war nicht wegdrueckbar,
   ihre Unterpunkte waren 15x28px gross und traugen nur ein `title` — und ein Druck auf
   „Einklappen" machte ueber `#rahmen.eingeklappt .nav-unterpunkte { display: none }`
   ALLE sechs Unterpunkte unerreichbar, ohne dass sich am Bild etwas aenderte (60px
   davor wie danach), persistiert in `localStorage`. Wer je auf Desktop eingeklappt
   hatte, kam mobil an keine Unterseite und sah nicht, warum.

   Die Grenze ist absichtlich 1024px und nicht 768px: bei 768px blieben nach der
   250px-Leiste gemessen nur 436-451px Inhalt, zu wenig fuer die 320px breiten
   Personal-Karten (FB-Entscheidung nach der Bestandsaufnahme). */
@media (max-width: 1023.98px) {
  #rahmen { grid-template-columns: minmax(0, 1fr); }
  #inhaltsspalte { grid-column: 1; }
  .kopfmarke { width: auto !important; padding: 0 0.5rem 0 1rem !important; }
  #logo { height: 23px; }
  /* Nicht `display: none`: der Knoten wandert in die Schublade und muss dort sichtbar
     sein. Ausgeblendet wird deshalb nur, solange er an seinem Platz im Raster haengt. */
  #rahmen > #seitenleiste { display: none; }
  .nav-oeffnen { display: flex; }
}
@media (max-width: 600px) {
  .kopfmarke { width: 3rem !important; overflow: hidden; }
  .kopfleiste-innen { gap: 0.45rem; padding-inline: 0.5rem; }
  .kopfleiste-rechts { gap: 0.25rem; }
}

/* `margin: 0 auto` zentriert die Begrenzung im verbleibenden Grid-Platz neben der
   Navigation — ohne das haengt auf breiten Monitoren der gesamte Leerraum einseitig
   rechts (FB, 2026-07-31). Die Breite selbst steckt in `--inhalt-breite`. */
main { width: 100%; padding: 1.9rem 2.1rem 2.6rem; max-width: var(--inhalt-breite); margin: 0 auto; }
#modul-titel { margin: 0; font-size: var(--schrift-h2); color: var(--marke-dunkel); letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Auf schmalen Anzeigen kostet das Aussenpadding zu viel: bei 375px blieben mit
   2 x 2.1rem und der damaligen 60px-Leiste nur 248px nutzbare Inhaltsbreite — 34 % des
   Fensters gingen an den Rahmen (AP-A8-Messung 2026-09-07). Diese Absenkung stand
   vorher NUR in der News-Uebersicht; jetzt gilt sie fuer alle Bereiche, weil sie fuer
   alle aus demselben Grund richtig ist. */
@media (max-width: 767.98px) {
  main { padding: 1.35rem 1rem 2rem; }
}

/* HISTORIE: Am 2026-08-06 hatte FB eine Sonderbreite fuer Mitarbeiter und News
   zurueckgenommen (1300px, linksbuendig hinter der Navigation) — auf breiten Monitoren
   klebte damals jede Arbeitsflaeche links und rechts blieb ein Drittel leer. Der
   News-UI-Pass vom 2026-09-06 fuehrte eine linksbuendige Sonderbreite bewusst wieder
   ein, aber NUR fuer die News-Uebersicht und an die beim Rendern gesetzte Klasse
   gebunden.

   AP-A8, FB 2026-09-07: Diese Sonderbreite ist zurueckgenommen — fuer Uebersicht,
   Detail UND Redaktion. Sie war nie nur „linksbuendig", sondern vier gleichzeitige
   Abweichungen (`max-width: none`, `margin: 0`, asymmetrisches Padding 3.9rem/1.75rem,
   `#modul { width: 93% }`). Gemessen ergab das keinen Raster, sondern einen Sprung mit
   wechselnder Richtung: bei 375px war News 35px BREITER als jede andere Seite, bei
   1440px 99px SCHMALER, bei 2560px 186px breiter und 145px weiter links. Der
   prozentuale `#modul`-Shrink (93 % Uebersicht, 96 % Detail, 93 % Redaktion) war der
   eigentliche Bruch — eine zweite, multiplikative Verengung zusaetzlich zum Padding.

   Alle Bereiche teilen jetzt wieder die mittige Spalte aus `main` oben. Der Einwand
   von 2026-08-06 gilt damit unveraendert fuer das ganze Portal. Die inneren
   Lesespalten bleiben unangetastet (`.beitrag-text` 72rem, `.hb-inhalt` 70rem,
   `--spalte`/`.block-inhalt`): Lesbarkeit haengt an der Zeichenzahl je Zeile, nicht am
   Bildschirm. Wer eine seitenweise Sonderbreite wieder einfuehren will, liest erst
   diesen Absatz und den Grund der Ruecknahme von 2026-08-06. */
main[data-modul='news'].news-uebersicht-seite .seitenkopf { margin-bottom: 1.7rem; }
main[data-modul='news'].news-uebersicht-seite .seitenkopf-aktion { padding-top: 0.55rem; }

/* Alle anderen Bereiche teilen weiterhin die mittige Spalte der Startseite (`main`
   oben); die lokale News-Abweichung ist an die beim Rendern gesetzte Overview-Klasse
   gebunden und greift deshalb weder in Detailansicht noch Redaktion. */

/* ---------- Seitenkopf ----------
   Ueberschrift und Untertitel links, die Haupthandlung des Bereichs rechts daneben. */
.seitenkopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: var(--abstand-abschnitt);
}
.seitenkopf-text { min-width: 0; }
.seitenkopf-aktion { flex: none; }
.seitenkopf-aktion:empty { display: none; }
/* Die Startseite traegt ihre Ueberschrift in der Begruessungskarte selbst — der
   Seitenkopf ist dort leer und darf keinen Abstand hinterlassen. */
main[data-modul='start'] .seitenkopf { display: none; }

/* Zahl am Navigationspunkt: „neu seit deinem letzten Besuch" (Entwurf §7). */
.nav-zahl {
  margin-left: auto; flex: none;
  min-width: 1.25rem; padding: 0 0.4rem;
  border-radius: 999px; background: var(--marke-blaugrau); color: var(--marke-dunkel);
  font-size: 0.7rem; font-weight: 500; text-align: center; line-height: 1.4;
}
/* Auf der weissen Pille des aktiven Eintrags waere Blaugrau auf Weiss zu schwach. */
.nav-eintrag.aktiv .nav-zahl { background: #fff; color: var(--marke-dunkel); }
#rahmen.eingeklappt .nav-zahl { display: none; }

/* Ein Satz unter der Bereichsueberschrift. Ersetzt den frueheren `.demo-hinweis`, der
   auf JEDER Seite einen fuenfzeiligen Entwicklerhinweis trug; der Pilotzustand steht
   jetzt als Marke in der Kopfleiste (index.html). */
.modul-untertitel {
  margin: 0.5rem 0 0; font-size: var(--schrift-bedienung); color: var(--marke-gedaempft);
}

/* Angekuendigte, noch nicht gebaute Module: sichtbar, aber klar als nicht anklickbar
 * erkennbar — kein Hover-Feedback, gedaempfte Farbe. */
.nav-platzhalter { opacity: 1; cursor: default;
  color: #8296a6;
}
.nav-platzhalter:hover { background: none; color: inherit; }
/* Der Pfeil an einer verlinkten Fremdanwendung: „das verlaesst das Portal". */
.nav-pfeil { margin-left: auto; font-size: 0.7rem; flex: none; color: var(--marke-blaugrau); }
#rahmen.eingeklappt .nav-pfeil { display: none; }

/* ---------- Startseite (Gestaltungsentwurf 2026-08-05) ---------- */
/* Die Seite begruesst, ordnet ein und fuehrt weiter. Sie kann nichts, was die Module
   nicht koennen — deshalb hat sie auch keine eigenen Steuerelemente, nur Wege. */

/* Kompakte, helle Begruessungszeile (Design-Gate-1-Fidelity-Nachtrag, FB 2026-09-04)
   — ersetzt die vorherige dunkle Hero-Karte mit dem ab-tax.de-Bogenmotiv, die im
   direkten Visual-Abgleich zu dominant wirkte. Kein eigener Rahmen, keine Grafik:
   nur Anrede und Datum als Fliesstext. */
.start-kopf { margin-bottom: 1.75rem; }
.start-kopf-gruss { margin: 0; font-size: var(--schrift-h1); color: var(--marke-dunkel); letter-spacing: -0.01em; }
.start-kopf-datum { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--marke-gedaempft); }

.start-abschnitt { display: flex; flex-direction: column; gap: var(--abstand); margin-bottom: var(--abstand-abschnitt); }

/* ---------- Zwischenueberschriften ----------
   EINE Groesse, EINE Farbe, EINE Ausrichtung fuer jede Zwischenueberschrift des Portals.
   Vorher hatte jeder Bereich seine eigene: die Startseite eine kleine Versalzeile, die
   Kontenliste ein blankes <h3> in Browservorgabe (1.17em, fett), die Kartenkoepfe ein
   <legend> mit dem Innenabstand des Browsers — dadurch standen sie in drei Groessen und
   an drei verschiedenen Positionen (FB, 2026-08-06).

   `legend` steht ausdruecklich mit in der Auswahl: sonst muesste jede Maske eine eigene
   Ueberschrift von Hand bauen, und genau daraus ist das Durcheinander entstanden. */
.abschnitt-marke, .spalten-titel, legend {
  margin: 0 0 0.7rem;
  /* Browser geben `legend` einen eigenen seitlichen Innenabstand — der war der Grund,
     warum „Neues Mitarbeiterkonto anlegen" gegen den Karteninhalt darunter versetzt stand. */
  padding: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--marke-blaugrau);
}
/* Die Linie hinter der Beschriftung gliedert die Seite, ohne einen Kasten zu bauen — nur
   auf der Grundflaeche. In einer weissen Karte (`legend`) braucht die Ueberschrift keine,
   der Kartenrand leistet dasselbe. */
.abschnitt-marke { display: flex; align-items: center; gap: 0.6rem; }
.abschnitt-marke::after { content: ''; flex: 1; height: 1px; background: var(--marke-linie); }

/* EINE gemeinsame segmentierte Leiste statt einzelner Pillen (Design-Gate-1-
   Fidelity-Nachtrag, zweite Runde 2026-09-04, FB) — dieselbe Segment-Technik wie
   `.attention-leiste`/`.news-karte-liste`: ein Kartenkoerper, Trennlinien
   zwischen den Eintraegen statt Abstand zwischen einzelnen Karten. Dieselben vier
   bestaetigten Eintraege, keine neuen. */
.schnellzugriff-leiste {
  display: flex; flex-wrap: wrap;
  border-radius: var(--rund); background: var(--flaeche-inhalt); box-shadow: var(--schatten-flaeche);
  overflow: hidden;

  border: 1px solid var(--kontur);
}
.schnellzugriff-eintrag {
  display: flex; align-items: center; gap: 0.75rem; flex: 1 1 10rem;
  padding: 1rem 1.25rem; border: 0; border-right: 1px solid var(--marke-linie);
  color: var(--marke-dunkel); text-decoration: none; background: transparent;
  font-size: 0.9375rem; font-weight: 500;
  transition: background 0.12s ease;

  min-height: 4.25rem;
}
.schnellzugriff-eintrag:last-child { border-right: 0; }
a.schnellzugriff-eintrag:hover { background: var(--marke-flaeche); }
a.schnellzugriff-eintrag:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .schnellzugriff-eintrag { transition: none; } }
.schnellzugriff-sinnbild {
  width: 20px; height: 20px; flex: none; color: var(--marke-text);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* Noch nicht verfuegbar: sichtbar, aber erkennbar nicht anklickbar — dieselbe
   Gestaltungsregel wie in der Navigation. */
.schnellzugriff-bald { opacity: 0.5; }

/* Attention-Zaehler und Arbeitskarten der Heute-Aggregation. Das automatisch
   passende Raster folgt der tatsaechlichen Zahl der Datenquellen; die 1px-Luecke
   bildet Trennlinien auch dann korrekt, wenn die Elemente spaeter umbrechen. */
.attention-leiste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px; border: 1px solid var(--kontur); border-radius: var(--rund);
  background: var(--marke-linie); box-shadow: var(--schatten-flaeche);
  overflow: hidden; margin-bottom: 0.9rem;
}
.attention-zaehler {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; background: #fff;

  min-height: 4.75rem;
}
/* Kreisfoermige Icon-Huelle (Design-Gate-2-Visual-Fidelity-Nachtrag 2026-09-04):
   neutral fuer die zwei reservierten Zaehler, farbig fuer die zwei echten — Farbe ist
   hier ein Signal fuer „diese Zahl stammt aus einer echten Abfrage", kein reines
   Dekor. Nutzt die lokalen semantischen Akzente (Kalender/Rueckfragen bleiben ohnehin
   ueber `.attention-zaehler-platzhalter` gedaempft, ihre Huelle bekommt bewusst
   keine eigene Akzentfarbe). */
.attention-zaehler-huelle {
  width: 2.15rem; height: 2.15rem; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--semantik-stone-flaeche); color: var(--semantik-stone-text);
}
.attention-zaehler--aufgaben .attention-zaehler-huelle { background: var(--semantik-salbei-flaeche); color: var(--semantik-salbei-text); }
.attention-zaehler--fristen .attention-zaehler-huelle { background: var(--semantik-sand-flaeche); color: var(--semantik-sand-text); }
.attention-zaehler-sinnbild {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.attention-zaehler-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.attention-zaehler-wert { font-size: 1.5rem; font-weight: 500; color: var(--marke-dunkel); line-height: 1.1; }
.attention-zaehler-titel { font-size: var(--schrift-bedienung); color: var(--marke-gedaempft); white-space: normal; }
/* Reservierter Zaehler ohne Datenquelle (Kalender/Rueckfragen) — sichtbar, aber
   erkennbar nicht lebendig, dieselbe Gestaltungsregel wie `.nav-platzhalter`. */
.attention-zaehler-platzhalter { opacity: 1;
  background: var(--flaeche-inhalt);
}
.attention-zaehler-zusatz { font-size: 0.75rem; color: var(--marke-gedaempft); white-space: nowrap; }

/* Kopf und Inhalt bleiben getrennt, damit auch kurze Listen und Leerzustaende eine
   ruhige, gleich hohe Dashboard-Karte ergeben. */
.heute-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--abstand); }
.arbeitskarte {
  display: flex; flex-direction: column; min-height: 9.75rem;
  border-radius: var(--rund); background: var(--flaeche-inhalt); box-shadow: var(--schatten-flaeche);
  padding: 1.25rem 1.5rem;

  border: 1px solid var(--kontur);
}
.arbeitskarte--aufgaben { border-top-color: var(--semantik-salbei-flaeche); }
.arbeitskarte--fristen { border-top-color: var(--semantik-sand-flaeche); }
.arbeitskarte-kopf { display: flex; align-items: center; gap: 0.55rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--marke-linie); }
.arbeitskarte-kopf h4 { margin: 0; font-size: 1rem; }
.arbeitskarte-sinnbild {
  width: 18px; height: 18px; flex: none; color: var(--marke-text);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.arbeitskarte-inhalt {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.arbeitskarte-hinweis { margin: 0; font-size: var(--schrift-bedienung); color: var(--marke-gedaempft); }
/* Reservierte Karte ohne Datenquelle (Kalender) — dieselbe Gestaltungsregel wie
   `.attention-zaehler-platzhalter`/`.nav-platzhalter`. */
.arbeitskarte-platzhalter { opacity: 1;
  background: var(--flaeche-inhalt);
}
.heute-liste { width: 100%; margin: 0; padding: 0; list-style: none; align-self: flex-start; }
.heute-liste-eintrag {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--marke-linie);
}
.heute-liste-eintrag:last-child { border-bottom: 0; }
.heute-liste-titel { font-size: 0.85rem; color: var(--marke-dunkel); }
.heute-liste-meta { font-size: 0.75rem; color: var(--marke-gedaempft); }
/* Aufgabenzeile: dekorativer Ring, Titel wächst, Status/Termin rechtsbündig. */
.heute-liste-marker {
  width: 15px; height: 15px; flex: none; color: var(--marke-blaugrau);
  fill: none; stroke: currentColor; stroke-width: 1.5;
}
.heute-liste-eintrag-aufgabe .heute-liste-titel { flex: 1; min-width: 0; }
.heute-liste-status { flex: none; font-size: 0.78rem; font-weight: 500; color: var(--marke-gedaempft); white-space: nowrap; }
/* Fristenzeile: Datumsschild links (`.news-eintrag-datum`, dieselben Klassen wie die
   News-Karte, s. `newsSpalte()` in start.js), Titel + „Fällig am …" darunter. */
.heute-liste-haupttext { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.heute-liste-eintrag-frist .heute-liste-titel { display: block; }
/* Beide Statusfarben aus den bestehenden Status-Tokens (`statuslabelKlasse()` in
   start.js) — „wartet auf Antwort" informativ, „heute fällig"/überschritten dringlich. */
.heute-liste-status-info { color: var(--status-info); }
.heute-liste-status-fehler { color: var(--status-fehler); }

/* EINE gemeinsame horizontale News-Karte statt einzelner grosser Karten
   (Design-Gate-1-Fidelity-Nachtrag, zweite Runde 2026-09-04, FB): Kopf mit
   „News" links und der Aktion „Alle Beiträge" rechts, darunter die Beitraege als
   Spalten mit Trennlinien — dieselbe Segment-Technik wie `.attention-leiste`. */
.news-karte {
  border-radius: var(--rund); background: var(--flaeche-inhalt); box-shadow: var(--schatten-flaeche);
  overflow: hidden;

  border: 1px solid var(--kontur);
}
.news-karte-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--marke-linie);
}
.news-karte-kopf h3 { margin: 0; font-size: var(--schrift-abschnitt); color: var(--marke-dunkel); }
.news-karte-aktion { font-size: 0.83rem; font-weight: 500; color: var(--marke-blau); text-decoration: none; }
.news-karte-aktion:hover { text-decoration: underline; }
.news-karte-leer { margin: 0; padding: 1.25rem; font-size: 0.88rem; color: var(--marke-gedaempft); }
/* Bis zu vier Beitraege in einer Zeile (Design-Gate-2-Fidelity-Pass, FB 2026-09-04,
   §4) — vorher drei. Weniger als vier tatsaechlich vorhandene Beitraege fuellen die
   Zeile nicht kuenstlich auf (neuesteBeitraege() in start.js zeigt ohnehin nur, was
   es gibt); bei mehr als vier (viele Ungelesene) bricht das Raster in eine zweite
   Zeile um. */
.news-karte-liste { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1280px) { .news-karte-liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-karte-liste { grid-template-columns: 1fr; } }

/* Eine Spalte im News-Kopf: Datumsschild oben, Titel darunter — kompakt, keine
   eigene Kartenform mehr (dieselben Klassen `.news-eintrag-datum/-tag/-monat` wie
   in der vollen News-Liste, s. dort, bewusst wiederverwendet statt neu erfunden). */
.news-spalte {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem; border-right: 1px solid var(--marke-linie);
  color: inherit; text-decoration: none; min-width: 0;
}
.news-spalte:nth-child(4n), .news-spalte:last-child { border-right: 0; }
@media (max-width: 1280px) { .news-spalte:nth-child(2n) { border-right: 0; } }
@media (max-width: 600px) {
  .news-spalte { border-right: 0; border-bottom: 1px solid var(--marke-linie); }
  .news-spalte:last-child { border-bottom: 0; }
}
.news-spalte:hover .news-spalte-titel { text-decoration: underline; }
.news-spalte:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -2px; }
.news-spalte .news-eintrag-datum { flex-direction: row; gap: 0.35rem; width: auto; padding: 0; background: transparent; align-items: baseline; }
.news-spalte .news-eintrag-tag { font-size: 0.95rem; }
.news-spalte-kopf { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.news-spalte-titel {
  margin: 0; font-size: 1.1rem; color: var(--marke-dunkel); line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* ---------- Themenpillen ----------
   Dieselben semantischen Akzente wie bei Status und Karten — funktional, nicht
   dekorativ: am Farbfleck erkennt man die Rubrik, bevor man liest.
   Stark entsaettigt, damit sie neben dem Markenblau nicht schreien.

   ⚠️ FARBE IST NIE DIE KENNZEICHNUNG. In jeder Pille steht die Rubrik ausgeschrieben;
   die Farbe ist eine Zugabe fuer das schnelle Auge (Gate B, wie bei „angeheftet"/„neu").

   Die vier Schluessel sind die Enum-Werte aus platform-api/src/news/themen.ts. Kommt
   dort eine fuenfte Rubrik dazu, faellt sie ohne eigene Regel auf `.thema-pille` allein
   zurueck — grau, aber lesbar. Kein kaputter Zustand, nur ein unauffaelliger. */
.thema-pille {
  display: inline-block; flex: none;
  padding: 0.13rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; white-space: nowrap;
  background: var(--thema-flaeche, var(--marke-linie));
  color: var(--thema-text, var(--marke-text));
}
.thema-ORGANISATION { --thema-flaeche: var(--semantik-stone-flaeche); --thema-text: var(--semantik-stone-text); }
.thema-IT_UND_ZUGAENGE { --thema-flaeche: var(--status-info-flaeche); --thema-text: var(--marke-blau); }
/* Warmer Ton, weil dort Termindruck liegt — der einzige Fall, in dem die Farbe eine
   Dringlichkeit mittransportiert. */
.thema-FRISTEN { --thema-flaeche: var(--semantik-sand-flaeche); --thema-text: var(--semantik-sand-text); }
.thema-PERSONAL { --thema-flaeche: var(--semantik-salbei-flaeche); --thema-text: var(--semantik-salbei-text); }

/* ---------- Leseansicht: Filterreihe + Beitragsliste ---------- */
.news-werkzeuge {
  display: grid;
  grid-template-columns: minmax(16rem, 28rem) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 2rem;
  margin-bottom: 1.5rem;
}
.news-suche-huelle { position: relative; min-width: 0; }
.news-suche {
  width: 100%; height: 2.85rem;
  padding: 0.65rem 1rem 0.65rem 2.6rem;
  border: 1px solid #dce3e8; border-radius: var(--rund-klein);
  background: #fff; color: var(--marke-text);
  font: inherit; font-size: 0.88rem;
}
.news-suche::placeholder { color: var(--marke-gedaempft); opacity: 1; }
.news-suche::-webkit-search-cancel-button { opacity: 0.45; }
.news-suche:focus { outline: 2px solid var(--marke-blau); outline-offset: 1px; border-color: transparent; }
.news-suche-sinnbild {
  position: absolute; left: 0.85rem; top: 50%; z-index: 1;
  width: 17px; height: 17px; transform: translateY(-50%);
  fill: none; stroke: var(--marke-blau); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}

.themen-filter {
  display: flex; align-items: stretch; justify-content: flex-start;
  gap: 0.5rem; min-width: 0; height: auto;

  flex-wrap: wrap;
}
.thema-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; flex: none;
  margin: 0; padding: 0 0.85rem; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; color: var(--marke-gedaempft);
  font: inherit; font-size: var(--schrift-bedienung); font-weight: 400; white-space: nowrap; cursor: pointer;

  min-height: var(--bedienhoehe);
}
.thema-chip:first-child { padding-inline: 0.85rem; }
.thema-chip:hover { color: var(--marke-dunkel); }
.thema-chip.aktiv {
  color: var(--marke-blau); font-weight: 500; border-bottom-color: var(--marke-blau);
}
.thema-chip:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
/* Das Soll zeigt die Kategorien als reine Navigation; Neu-Hinweise stehen direkt
   am Beitrag, nicht als zweite Zaehlebene in der Tabreihe. */
.thema-zahl { display: none; }

/* Leerer Aushang: eine richtige Karte, keine gestrichelte Platzhalterflaeche — sie
   gehoert zur Seite und ist nicht ein Loch darin (FB, 2026-08-05). Begrenzt auf 34rem:
   ueber die volle Inhaltsbreite gezogen waere sie eine grosse leere Flaeche, die
   ausgerechnet die Leere betont. */
.news-leer {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  max-width: 34rem;
  padding: 1.5rem 1.6rem; border: 0; border-radius: var(--rund);
  background: #fff; box-shadow: 0 1px 3px var(--marke-hauch);
}
.news-leer h3 { margin: 0; font-size: 1.02rem; color: var(--marke-dunkel); }
.news-leer p { margin: 0; font-size: 0.88rem; color: var(--marke-gedaempft); }
/* Ein Filter ohne Treffer bekommt bewusst KEINE Karte: die Antwort darauf ist ein Satz,
   und eine Einladung zum Schreiben waere hier eine Ablenkung. */
.news-leer-knapp { font-size: 0.9rem; color: var(--marke-gedaempft); }

/* Zwei klar getrennte Formen: ein grosser Aufmacher mit Bild/Text-Verhaeltnis wie im
   Soll und darunter echte Editorial-Zeilen, nicht eine Folge kleiner Karten. */
.news-strom { display: flex; flex-direction: column; gap: 2.05rem; }
.news-eintrag {
  position: relative; display: flex; align-items: stretch;
  border: 0; background: transparent;
}
.news-eintrag:hover .news-eintrag-titel { text-decoration: underline; }
.news-eintrag a { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.news-eintrag:focus-within { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.news-eintrag-text { min-width: 0; flex: 1; }

.news-liste-flaeche {
  display: flex; flex-direction: column;
  border-radius: 0; background: transparent;
  box-shadow: none; overflow: visible;
}
.news-liste-flaeche .news-eintrag {
  min-height: 6.65rem; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid #dfe5e9;
}
.news-liste-flaeche .news-eintrag:hover { background: #ffffff80; }
.news-liste-flaeche .news-eintrag > a {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.5rem;
  align-items: stretch;
}

.news-eintrag-datum {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: 100%; align-self: stretch; padding: 1.25rem 0.75rem 1.25rem 0;
  border-right: 1px solid #dfe5e9; border-radius: 0;
  background: transparent; color: var(--marke-dunkel);
}
.news-eintrag-tag { font-size: 1.65rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; }
.news-eintrag-monat { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.03em; color: var(--marke-dunkel); }

.news-liste-flaeche .news-eintrag-text {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 2rem; align-content: center;
  padding: 1.25rem 0;
}
.news-liste-flaeche .news-eintrag-marken { grid-column: 1; grid-row: 1; }
.news-liste-flaeche .news-eintrag-titel { grid-column: 1; grid-row: 2; }
.news-liste-flaeche .news-eintrag-anfang,
.news-liste-flaeche .news-eintrag-untertitel { grid-column: 1; grid-row: 3; }
.news-liste-flaeche .news-eintrag-fuss-zeile {
  grid-column: 1; grid-row: 4;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  min-width: 0; padding: 0.75rem 0 0;
  text-align: left;
}

/* Rubriken der kompakten Zeilen sind kleine Editorial-Kicker. Nur der Zustand „neu"
   bleibt als gefuellte Kennzeichnung stehen. */
.news-liste-flaeche .thema-pille {
  padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--thema-text, var(--marke-gedaempft));
  font-size: 0.75rem; font-weight: 400;
}

.news-eintrag-featured {
  min-height: 16.65rem; padding: 1.75rem;
  border: 1px solid var(--kontur); border-radius: var(--rund);
  background: #fff; box-shadow: none;
}
.news-eintrag-featured > a { display: flex; gap: 3.05%; align-items: stretch; }
.news-eintrag-featured .news-eintrag-bild {
  flex: 0 0 32.9%; width: 32.9%; aspect-ratio: 1.73 / 1; object-fit: cover;
  border-radius: 0.4rem;
}
.news-eintrag-featured .news-eintrag-bild-rahmen {
  flex: 0 0 32.9%; width: 32.9%; aspect-ratio: 1.73 / 1; border-radius: 0.4rem;
}
.news-eintrag-bild-rahmen > .news-eintrag-bild { display: block; }
.news-eintrag-featured .news-eintrag-text {
  display: flex; flex-direction: column; min-width: 0;
  padding: 0.9rem 0 0.4rem;
}
.news-eintrag-featured .news-eintrag-marken { margin-bottom: 0.75rem; }
.news-eintrag-featured .news-eintrag-titel {
  margin-bottom: 0.75rem; font-size: 1.7rem; line-height: 1.25; letter-spacing: -0.01em;
}
.news-eintrag-featured .news-eintrag-anfang,
.news-eintrag-featured .news-eintrag-untertitel {
  max-width: 70ch; margin-bottom: 1rem; font-size: 1rem; line-height: 1.6;
}
.news-eintrag-featured .news-eintrag-fuss-zeile {
  margin-top: auto; padding-top: 1.25rem; border-top: 0;
}
.news-eintrag-featured .thema-pille {
  padding: 0.16rem 0.55rem; border: 1px solid var(--kontur); border-radius: 0.38rem;
  background: transparent; color: var(--thema-text, var(--marke-text));
}
.news-eintrag .badge {
  display: inline-flex; align-items: center; gap: 0.28rem;
  margin: 0; padding: 0.14rem 0.6rem; line-height: 1.35;
}
.news-eintrag .badge.new { background: #edf3ff; color: var(--marke-blau); }
.news-eintrag .badge.pin {
  border: 1px solid #d4dce2; background: transparent; color: var(--marke-text);
}
.news-pin-sinnbild {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Featured ohne Cover (Design-Gate-2-Fidelity-Pass 4, §1): kein Bild wird
   erfunden — stattdessen groessere Typografie und ein Flaechenton, damit die
   Karte trotzdem klar als Aufmacher erkennbar bleibt. */
.news-eintrag-featured-ohne-bild { min-height: 0; padding: 2rem; background: var(--semantik-stone-flaeche); }
.news-eintrag-featured-ohne-bild > a { display: block; }
.news-eintrag-featured-ohne-bild .news-eintrag-text { height: 100%; padding: 0; }
.news-eintrag-featured-ohne-bild .news-eintrag-titel { font-size: 1.75rem; }
.news-eintrag-featured-ohne-bild .news-eintrag-anfang,
.news-eintrag-featured-ohne-bild .news-eintrag-untertitel { font-size: 0.95rem; -webkit-line-clamp: 3; }

.news-eintrag-marken { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.news-eintrag-titel { margin: 0 0 0.4rem; font-size: 1.2rem; line-height: 1.4; color: var(--marke-dunkel); }
.news-eintrag-anfang, .news-eintrag-untertitel {
  margin: 0; max-width: 78ch; font-size: 0.9375rem; line-height: 1.6; color: var(--marke-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.news-eintrag-fuss { margin: 0; font-size: var(--schrift-klein); color: var(--marke-gedaempft); white-space: normal; }
.news-eintrag-fuss-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.news-eintrag-weiterlesen {
  flex: none; font-size: 0.88rem; font-weight: 500; color: var(--marke-blau); white-space: nowrap;
}
.news-eintrag:hover .news-eintrag-weiterlesen { text-decoration: underline; }
.zweitrangig.news-weitere {
  display: inline-flex; align-items: center; gap: 0.65rem; align-self: center;
  margin: -0.55rem 0 0; padding: 0.35rem 0.55rem;
  border: 0; background: transparent; color: var(--marke-blau);
  font-size: 0.84rem;
}
.news-weitere::after { content: '⌄'; font-size: 1rem; line-height: 1; transform: translateY(-0.1rem); }
.zweitrangig.news-weitere:hover { border-color: transparent; background: transparent; color: var(--marke-dunkel); }

/* „Beitrag schreiben" mit Stift-Sinnbild (Design-Gate-2-Fidelity-Pass 4, §2) —
   eigene, lokale Klasse statt einer Erweiterung von `knopf()` fuer einen
   einzelnen Aufrufer. */
.news-schreiben-knopf {
  display: inline-flex; align-items: center; gap: 0.65rem;
  min-height: 2.7rem; margin: 0; padding: 0.55rem 1.2rem;
  border-radius: var(--rund-klein); font-size: 0.88rem;
}
.news-schreiben-sinnbild {
  flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.news-kopfaktionen { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }

@media (max-width: 1280px) {
  .news-werkzeuge { grid-template-columns: minmax(16rem, 0.9fr) minmax(27rem, 1.1fr); gap: 1.5rem; }
  .news-eintrag-featured > a { gap: 1.6rem; }
  .news-eintrag-featured .news-eintrag-bild,
  .news-eintrag-featured .news-eintrag-bild-rahmen { flex-basis: 40%; width: 40%; }
}

@media (max-width: 1023.98px) {
  .news-werkzeuge { grid-template-columns: 1fr; gap: 0.75rem; }
  .themen-filter {
    justify-content: flex-start; gap: 1.6rem; overflow-x: auto;
    scrollbar-width: thin;
  }
  .news-eintrag-featured > a { flex-direction: column; }
  .news-eintrag-featured .news-eintrag-bild,
  .news-eintrag-featured .news-eintrag-bild-rahmen {
    width: 100%; flex-basis: auto; max-height: 20rem; aspect-ratio: 16 / 9;
  }
  .news-eintrag-featured .news-eintrag-text { padding: 0.35rem 0 0; }
  .news-liste-flaeche .news-eintrag-text { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  main[data-modul='news'].news-uebersicht-seite .seitenkopf { margin-bottom: 1.25rem; }
  .news-strom { gap: 1.2rem; }
  .news-eintrag-featured { min-height: 0; padding: 0.85rem; }
  .news-eintrag-featured .news-eintrag-titel { font-size: 1.2rem; }
  .news-liste-flaeche .news-eintrag { min-height: 0; }
  .news-liste-flaeche .news-eintrag > a { grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; }
  .news-eintrag-datum { width: 4rem; padding-right: 0.75rem; }
  .news-eintrag-tag { font-size: 1.35rem; }
  .news-liste-flaeche .news-eintrag-text {
    display: flex; flex-direction: column; padding: 0.7rem 0 0.75rem;
  }
  .news-liste-flaeche .news-eintrag-fuss-zeile {
    width: 100%; flex-direction: row; align-items: baseline;
    margin-top: 0.55rem; padding: 0; text-align: left;
  }
  .news-eintrag-fuss { white-space: normal; }
}
.verfasser-kreis {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 999px;
  background: var(--marke-flaeche); color: var(--marke-blau);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.73rem; font-weight: 500;
}

/* ---------- Beitrag (Entwurf §5) ---------- */
.zurueck-knopf {
  display: inline-block; margin-bottom: 1rem;
  font-size: 0.85rem; color: var(--marke-blau); text-decoration: none;
}
.zurueck-knopf:hover { text-decoration: underline; }
/* Design-Gate 1: zweispaltiges Editorial-Layout — Artikel links, Kontextspalte
   (Anhaenge + „Beitrag merken") rechts. Dieselbe Grid-Idee wie im Redaktions-
   Editor (`.beitragsflaeche`, AP-A2); `.beitrag-kontextspalte` ist bewusst
   dieselbe Klasse wie dort, kein zweites Muster fuer dieselbe Spaltenrolle. */
.beitrag-flaeche {
  display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.5rem;
  max-width: var(--editor-breite); margin: 0 auto;
}
@media (max-width: 1023.98px) {
  .beitrag-flaeche { grid-template-columns: 1fr; gap: 1.5rem; }
}
.beitrag-detail { min-width: 0; }
.beitrag-marken { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.beitrag-detail h3 { margin: 0 0 0.25rem; font-size: 1.6rem; color: var(--marke-dunkel); }
.beitrag-detail > .meta { margin: 0 0 1.25rem; }
.beitrag-merken { width: 100%; }
.beitrag-merken-aktiv { color: var(--marke-blau); font-weight: 500; }
/* Der 16:9-Rahmen entspricht dem Uploadhinweis: passende Bilder bleiben vollstaendig
   sichtbar, andere werden mittig und in Leseansicht wie Vorschau gleich beschnitten. */
.titelbild-renderer {
  position: relative; overflow: hidden; background: var(--marke-flaeche);
}
.beitrag-titelbild-rahmen {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--rund); margin: 0 0 1.25rem;
}
.beitrag-titelbild { display: block; }
.beitrag-text > :first-child { margin-top: 0; }
/* Inline-Bild innerhalb des Fliesstexts (blockRenderer.ts, `image`-Block). */
.beitrag-bild { margin: 1.25rem 0; }
.beitrag-bild img { display: block; max-width: 100%; border-radius: var(--rund-klein); }
.beitrag-bild figcaption, .beitrag-video figcaption {
  margin-top: 0.4rem; font-size: 0.82rem; color: var(--marke-gedaempft); text-align: center;
}
/* Anhang wurde entfernt oder ist noch nicht freigegeben, seit der Beitrag
   gerendert wurde — der Block bleibt sichtbar statt eines defekten Bildes. */
.beitrag-bild-fehlt, .beitrag-video-fehlt {
  display: flex; align-items: center; justify-content: center; min-height: 8rem;
  border: 1px dashed var(--marke-linie); border-radius: var(--rund-klein);
  background: var(--marke-flaeche); color: var(--marke-gedaempft); font-size: 0.85rem;
}
.beitrag-bild-fehlt p, .beitrag-video-fehlt p { margin: 0; }
/* Video-Block (blockRenderer.ts, `video`). Ausgeliefert wird der Knopf, nicht der
   Player — erst sein Klick setzt den iframe (news.js), vorher geht keine Anfrage
   an YouTube/Vimeo. `aspect-ratio` haelt beide Zustaende gleich hoch, damit beim
   Laden nichts springt, und traegt zugleich die Responsivitaet. */
.beitrag-video { margin: 1.25rem 0; }
.beitrag-video-start {
  width: 100%; aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.45rem;
  border: 0; cursor: pointer; font: inherit;
  background: var(--marke-dunkel); color: #fff; border-radius: var(--rund-klein);
}
.beitrag-video-text { font-size: 0.95rem; font-weight: 500; }
.beitrag-video-hinweis { font-size: 0.78rem; opacity: 0.75; }
.beitrag-video-rahmen { aspect-ratio: 16 / 9; }
.beitrag-video-player {
  width: 100%; height: 100%; display: block; border: 0; border-radius: var(--rund-klein);
}
/* In der Kontextspalte das erste Element (kein Abstand zu einem vorigen Absatz
   noetig, wie im Fliesstext) — dort per Selektor auf 0 gesetzt. */
.beitrag-anhaenge { margin-top: 1.5rem; }
.beitrag-kontextspalte > .beitrag-anhaenge { margin-top: 0; margin-bottom: 1.25rem; }
.beitrag-anhaenge .abschnitt-marke { margin: 0 0 0.7rem; font-size: 0.95rem; color: var(--marke-dunkel); font-weight: 500; }

/* ---------- Redaktion: Reiter je Zustand (Umbau 2026-08-06) ----------
   Vorher standen die vier Zustaende als lose Ueberschriften untereinander, jede mit
   eigener Liste — die Seite war damit so lang wie alle vier zusammen, und ein leerer
   Zustand zeigte einen Gedankenstrich. */
.reiter {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; border-bottom: 1px solid var(--marke-linie);
}
.reiter-knopf {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0 0 -1px; padding: 0.6rem 0.9rem;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--marke-gedaempft);
  font: inherit; font-size: 0.9rem; cursor: pointer;
}
.reiter-knopf:hover { color: var(--marke-dunkel); }
.reiter-knopf.aktiv {
  border-bottom-color: var(--marke-dunkel); color: var(--marke-dunkel); font-weight: 500;
}
.reiter-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -2px; }
/* Die Zahl steht IM Reiter — sonst muesste man ihn oeffnen, um zu erfahren, ob etwas
   darin liegt. */
.reiter-zahl {
  min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px;
  background: var(--marke-linie); color: var(--marke-text);
  font-size: 0.72rem; font-weight: 500; text-align: center;
}
.reiter-knopf.aktiv .reiter-zahl { background: var(--marke-dunkel); color: #fff; }
.reiter-inhalt:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 4px; }
/* Ohne eigenes `overflow` reicht eine breite, nicht umbrechende Tabelle
   (`.tabelle th/td { white-space: nowrap }`) ihre Mindestbreite bis zum Dokument
   durch und macht die GANZE Seite (samt Seitenleiste) horizontal scrollbar, obwohl
   `.tabellen-flaeche` innen bereits ihre eigene Schmalfenster-Bildlaufleiste zeigt —
   sichtbar erst bei schmalen Fenstern mit vielen Spalten (AP-B4-Verifikation,
   2026-09-04: Vorgänge-Tabelle bei 768px). `hidden` statt `auto`: gescrollt wird
   ausschliesslich innerhalb von `.tabellen-flaeche`, dieser Rahmen braucht keine
   eigene Bildlaufleiste. */
.reiter-inhalt { overflow: hidden; }

/* Zustand eines Beitrags in der Verwaltungstabelle. Immer ausgeschrieben, Farbe nur
   als Zugabe (Gate B). */
.news-status {
  display: inline-block; padding: 0.13rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}
.news-status-draft { background: var(--marke-flaeche); color: var(--marke-blaugrau); }
.news-status-published { background: #eaf1ec; color: #3d6b52; }
.news-status-withdrawn { background: #f6e7e7; color: #a33; }
.news-status-archived { background: var(--marke-linie); color: var(--marke-text); }

/* ---------- Redaktion: Dokumenteditor ---------- */

.editor-werkzeugleiste {
  display: flex; gap: 0.15rem; margin-bottom: 0.4rem; flex-wrap: wrap;
  padding: 0.2rem; border-radius: var(--rund-klein); background: var(--marke-flaeche);
}
/* Dauerhafte Leiste (Design-Gate-2-Fidelity-Pass 4, §2): nutzt dieselbe Optik wie
   die schwebende Textauszeichnungs-Leiste (`.editor-werkzeugleiste`), steht aber
   in normalem Fluss statt `position: fixed`/`hidden` — kein eigenes Aussehen,
   nur ein zusaetzliches Element (Absatz-Auswahl + Trenner) darin. */
.werkzeugleiste-dauerhaft { align-items: center; padding: 0.3rem; margin-bottom: 0.9rem; }
.werkzeug-absatz {
  flex: none; width: auto; padding: 0.3rem 0.6rem; border: 1px solid var(--marke-linie);
  border-radius: var(--rund-klein); background: #fff; font-size: 0.83rem; color: var(--marke-text);
}
.werkzeug-absatz:disabled { opacity: 0.5; }
.werkzeug-trenner { flex: none; width: 1px; align-self: stretch; margin: 0.2rem 0.3rem; background: var(--marke-linie); }
/* 2.25rem statt 2rem: die Knoepfe sind das einzige Bedienelement des Editors, das mit
   dem Zeiger genau getroffen werden muss. Hover und Fokus bekommen jeweils eine
   eigene, sichtbare Antwort — vorher unterschied sich der fokussierte Knopf nicht vom
   Rest, obwohl die Leiste mit der Tastatur erreichbar ist. */
.werkzeug-knopf {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; margin-right: 0;
  border-radius: var(--rund-klein); background: transparent;
}
.werkzeug-knopf:hover { background: #fff; color: var(--marke-dunkel); }
.werkzeug-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -2px; }
.sinnbild-knopf-bild { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Die Vorschau soll zeigen, wie der Beitrag spaeter dasteht — deshalb weiss wie die
   Leseansicht und nicht grau wie ein Eingabefeld. Bedient jetzt nur noch den
   Legacy-Block (baueLegacy in bloecke.js) und das Vorschau-Modal. */
.vorschau-flaeche {
  min-height: 4rem; padding: 0.9rem 1.1rem;
  border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  background: #fff; font-size: 0.92rem; overflow-wrap: anywhere;
}
.vorschau-flaeche > :first-child { margin-top: 0; }

/* ---------- Block-Editor (Block-Editor Phase 1; UX-Feinschliff 2026-08-14) ----------
   Vorher trug jede Blockzeile eine feste Trennlinie, und Auf/Ab-Pfeile,
   Entfernen-Kreuz sowie die Formatierungsleiste standen DAUERHAFT da — der Beitrag
   wirkte dadurch wie eine Liste technischer Bloecke statt wie Fliesstext. Jetzt
   traegt nur noch der Hover/Fokus-Zustand einer Zeile diese Bedienelemente; im Ruhe-
   zustand soll nur der Text zu sehen sein. */
/* Die Zeile ist immer so breit wie die Publishing-Flaeche innen; begrenzt wird der
   INHALT. Vorher trug die Zeile selbst die Breite (`min(100%, --spalte)`), womit ihr
   rechter Rand je Blocktyp anderswo lag — und mit ihm das absolut daran haengende
   Gutter: bei einem Absatz stand das ⋯ mitten im Weissraum, beim Bild am Panelrand.
   Ein Bedienelement, das je Zeile woanders auftaucht, ist genau die verstreute
   Bedienung, die dieser Umbau abstellen soll. */
/* Mindesthoehe (Design-Gate-2-Fidelity-Pass 4, §2): die Schreibflaeche soll wie ein
   echter Editor wirken, nicht wie ein paar Zeilen ueber einer grossen Leerflaeche
   bis zur naechsten Karte. Nur eine Mindesthoehe, kein fester Wert — laengerer
   Inhalt waechst wie bisher unbegrenzt weiter. */
.bloecke-liste { width: 100%; min-height: 16rem; }
/* Fliesstext darf rechts frueher enden, muss links aber mit Titel und Bild fluchten. */
.block-zaehler { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.block-zeile {
  display: flex; align-items: flex-start; gap: 0.4rem;
  width: 100%; padding: 0.2rem 0; border-radius: var(--rund-klein);
}
/* ~830px: lesbare Zeilenlaenge fuer Fliesstext. Bilder duerfen auf die volle
   Innenbreite ausbrechen — sie sind Artikelinhalt, kein Lesetext. */
.block-inhalt { max-width: var(--spalte, 52rem); }
.block-zeile-image .block-inhalt { max-width: var(--ausbruch, 60rem); }
.block-zeile-video .block-inhalt { max-width: var(--ausbruch, 60rem); }
.block-zeile-poll .block-inhalt { max-width: var(--ausbruch, 60rem); }
.block-zeile:focus { outline: none; }

/* ---------- Umfrage-Block (News-Modul, 2026-09-02) ---------- */
.block-umfrage { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.block-umfrage-frage { font-weight: 500; }
.block-umfrage-optionen { display: flex; flex-direction: column; gap: 0.35rem; }
.block-umfrage-option { display: flex; align-items: center; gap: 0.5rem; }
.block-umfrage-option-eingabe { flex: 1; }
.block-umfrage-einstellungen { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: 0.9rem; }
.block-umfrage-ergebnisse { margin-top: 0.5rem; }

.beitrag-poll-karte {
  max-width: var(--spalte, 52rem); margin: 1.5rem 0;
  padding: 1.25rem; border: 1px solid var(--marke-linie); border-radius: var(--rund);
  background: #fff;
}
.beitrag-poll-metadaten { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.beitrag-poll-badge {
  display: inline-flex; align-items: center; padding: 0.14rem 0.5rem;
  border-radius: 999px; background: var(--marke-flaeche); color: var(--marke-gedaempft-kraeftig);
  font-size: 0.7rem; font-weight: 500; line-height: 1.35;
}
.beitrag-poll { display: flex; flex-direction: column; max-width: 100%; }
.beitrag-poll-frage { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 500; color: var(--marke-dunkel); }
.beitrag-poll-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0.4rem 0;
}
.beitrag-poll-option + .beitrag-poll-option { border-top: 1px solid var(--marke-linie); }
.beitrag-poll-option > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.beitrag-poll-balken {
  position: relative; isolation: isolate; min-width: 6rem; padding: 0.15rem 0.25rem; text-align: right;
  font-size: 0.85rem; color: var(--marke-gedaempft);
}
.beitrag-poll-balken::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--rund-klein);
  width: var(--anteil, 0%); background: var(--marke-blaugrau); opacity: 0.35;
}
.beitrag-poll-absenden { align-self: flex-start; min-width: 8rem; margin: 0.9rem 0 0; white-space: nowrap; }
.beitrag-poll-hinweis { margin-top: 0.75rem; }
@media (max-width: 600px) {
  .beitrag-poll-karte { padding: 1rem; }
  .beitrag-poll-option { grid-template-columns: auto minmax(0, 1fr); }
  .beitrag-poll-balken { grid-column: 2; min-width: 0; padding-left: 0; text-align: left; }
}

.block-gutter {
  flex: none; display: flex; align-items: center; gap: 0.05rem;
  width: 3rem; padding-top: 0.15rem; opacity: 0; transition: opacity 0.1s ease;
}
.block-zeile:hover .block-gutter, .block-zeile:focus-within .block-gutter,
.block-gutter:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .block-gutter { transition: none; } }
@media (hover: none) { .block-gutter { opacity: 0.5; } }
@media (min-width: 1024px) {
  .block-zeile { position: relative; }
  .block-gutter { position: absolute; right: -2.5rem; top: 0.15rem; justify-content: flex-start; }
}
.block-gutter-menue .aktionsmenue-knopf { width: 1.5rem; height: 1.5rem; font-size: 0.95rem; color: var(--marke-blaugrau); }
.block-gutter-menue .aktionsmenue-knopf:hover { background: var(--marke-flaeche); color: var(--marke-dunkel); }
.block-gutter-menue .aktionsmenue-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 1px; border-radius: 999px; }
.block-gutter-menue .aktionsmenue-liste { min-width: 11rem; }
/* Zwischen vorhandenen Bloecken erscheint die Aktion erst beim Kontext; am Ende bleibt
   sie als ruhiger naechster Schritt sichtbar. Unsichtbar darf die Zwischenzeile keinen
   Abstand erzeugen, weil sonst Ueberschrift und ihr Absatz auseinanderfallen. */
.block-einfuegen { width: 100%; opacity: 0; transition: opacity 0.1s ease; }
.block-einfuegen:not(.block-einfuegen-dauerhaft) { position: relative; height: 0; }
.block-einfuegen:not(.block-einfuegen-dauerhaft) > .aktionsmenue { position: absolute; top: 50%; transform: translateY(-50%); }
.block-einfuegen-dauerhaft, .block-einfuegen:hover, .block-einfuegen:focus-within { opacity: 1; }
.block-zeile:hover + .block-einfuegen { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .block-einfuegen { transition: none; } }
@media (hover: none) {
  .block-einfuegen { opacity: 1; }
  .block-einfuegen:not(.block-einfuegen-dauerhaft) { position: static; height: auto; }
  .block-einfuegen:not(.block-einfuegen-dauerhaft) > .aktionsmenue { position: static; top: auto; transform: none; }
}
.block-einfuegen-menue .aktionsmenue-knopf {
  width: auto; height: auto; padding: 0.25rem 0.4rem; margin-left: -0.4rem;
  border-radius: var(--rund-klein); font-size: 0.85rem; color: var(--marke-gedaempft); white-space: nowrap; background: #fff;
}
.block-einfuegen-menue .aktionsmenue-knopf:hover { background: var(--marke-flaeche); color: var(--marke-dunkel); }
.block-einfuegen-menue .aktionsmenue-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 1px; }
.block-zaehler > .block-zeile { margin-top: 0.5rem; }
.block-zaehler > .block-zeile:first-child { margin-top: 0; }
.block-zaehler > .block-zeile-heading { margin-top: 1.5rem; }
/* Die kollabierte Zwischenzeile liegt auf der Blockgrenze und ragt damit ein paar
   Pixel in beide Nachbarn. Nach UNTEN gewinnt der Folgeblock von selbst (er steht
   spaeter im Dokument), nach OBEN nicht: ohne `z-index` fing das unsichtbare
   Einfuegemenue Klicks auf die Unterkante einer Ueberschrift ab und oeffnete ein
   Menue, statt die Ueberschrift zu fokussieren (mit `elementFromPoint` nachgewiesen).
   Der kleine Restabstand darunter laesst dem Menue eine eigene Klickflaeche, bleibt
   aber deutlich unter dem Abstand VOR der Ueberschrift — Ueberschrift und Absatz
   sollen als eine Gruppe lesbar sein. */
.block-zaehler > .block-zeile-heading { position: relative; z-index: 1; }
.block-zeile-heading + .block-einfuegen + .block-zeile:not(.block-zeile-heading) { margin-top: 0.35rem; }
.block-einfuegen-dauerhaft { margin-top: 0.5rem; }
.block-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.block-heading-eingabe { width: 100%; border: 0; padding: 0.2rem 0; font-weight: 500; color: var(--marke-dunkel); }
.block-heading-eingabe-h2 { font-size: 1.25rem; }
.block-heading-eingabe-h3 { font-size: 1.05rem; }
.block-heading-eingabe:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }

/* `contenteditable`-Feld statt Textarea: es soll schon beim Schreiben aussehen wie
   spaeter der Fliesstext im Beitrag, nicht wie Formulareingabe. */
.block-text, .block-liste {
  min-height: 1.6rem; padding: 0.3rem 0; font-size: 0.95rem; line-height: 1.5;
}
/* Der erste, leere Absatz ist der Einstieg in den Beitrag; seine Hoehe macht ihn
   greifbar, ohne eine Box oder Flaeche in den Fliesstext zu bringen. */
.block-zeile-erstschreiben .block-text { min-height: 9.5rem; }
.block-zeile-erstschreiben .block-text-leer::before { font-size: 1.1rem; color: var(--marke-blaugrau); }
/* Die geerbte Fokusmarkierung ist ein 2px-Rahmen um das ganze Feld. Bei einem
   befuellten Absatz (1.6rem hoch) ist das eine Textmarkierung; um die leere
   Einstiegsflaeche ist es eine 832 x 152px grosse Box — also genau die Formularoptik,
   die dieser Editor nicht haben soll, und zwar im Moment des Schreibbeginns. Statt
   des Rahmens eine Akzentlinie am linken Rand: dieselbe Farbe, dieselbe Aussage
   („hier ist der Kursor"), ohne die Flaeche zu umschliessen. `inset` statt `border`,
   damit der Text nicht springt. Ab dem ersten Zeichen faellt die Klasse weg und der
   normale Fokusrahmen gilt wieder. */
.block-zeile-erstschreiben .block-text-leer:focus-visible {
  outline: none; box-shadow: inset 2px 0 0 var(--marke-blau);
}
.block-zeile-erstschreiben + .block-einfuegen .aktionsmenue-knopf {
  padding: 0.3rem 0.45rem; font-size: 0.9rem; color: var(--marke-blaugrau);
}
/* `attr()` statt fest "Text …": der allererste, noch leere Textblock eines neuen
   Beitrags bekommt in bloecke.js einen einladenderen Platzhalter statt eines
   Formularhinweises. Die Klasse traegt den Leerzustand statt `:empty` — siehe
   bloecke.js: nach dem Loeschen bleibt ein <br> stehen, und mit `:empty` kam der
   Platzhalter danach nie wieder. */
.block-text-leer::before { content: attr(data-platzhalter); color: var(--marke-gedaempft); }
.block-liste > li:only-child:empty::before { content: 'Listenpunkt …'; color: var(--marke-gedaempft); }
.block-text:focus-visible, .block-liste:focus-visible {
  outline: 2px solid var(--marke-blau); outline-offset: 2px; border-radius: var(--rund-klein);
}
.block-liste { padding-left: 1.4rem; }

.block-zitat { gap: 0.35rem; padding: 0.55rem 0.85rem; border-left: 3px solid var(--marke-blaugrau); background: var(--marke-flaeche); }
.block-zitat-text { width: 100%; min-height: 5rem; resize: vertical; border: 0; background: transparent; font: inherit; font-style: italic; line-height: 1.5; }
.block-zitat-quelle { width: 100%; border: 0; border-top: 1px solid var(--marke-linie); padding: 0.35rem 0 0; background: transparent; font-size: 0.82rem; color: var(--marke-gedaempft); }
.block-zitat-text:focus-visible, .block-zitat-quelle:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; border-radius: var(--rund-klein); }
.block-trennlinie { justify-content: center; padding: 0.65rem 0; }
.block-trennlinie hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--marke-linie); }

.block-bild { align-items: flex-start; gap: 0; }
.block-video { align-items: flex-start; gap: 0; }
.block-video-flaeche {
  width: 100%; aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--marke-dunkel); color: #fff;
  border-radius: var(--rund) var(--rund) 0 0;
}
.block-video-name { font-size: 0.95rem; font-weight: 500; }
/* Nur der Anbieter-Host, deshalb keine Kuerzung noetig — siehe videoQuellen.js. */
.block-video-quelle { font-size: 0.75rem; opacity: 0.7; }
.block-video-play, .beitrag-video-play {
  width: 0; height: 0; border-style: solid;
  border-width: 0.75rem 0 0.75rem 1.25rem;
  border-color: transparent transparent transparent #fff;
}
.block-bild-vorschau {
  display: block; width: 100%; height: auto; border-radius: var(--rund) var(--rund) 0 0; background: var(--marke-flaeche);
}
.block-bild-ersatz, .block-video-ersatz { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 10rem; border-radius: var(--rund) var(--rund) 0 0; background: var(--marke-flaeche); font-size: 0.85rem; color: var(--marke-gedaempft); }
.block-bild-abgelehnt { color: #a33; background: #a3333309; }
.block-bild-beschriftung, .block-video-beschriftung { width: 100%; border: 0; padding: 0.5rem 0.75rem; background: var(--marke-flaeche); border-radius: 0 0 var(--rund) var(--rund); text-align: left; font-size: 0.82rem; color: var(--marke-gedaempft); opacity: 1; }
.block-legacy-vorschau { background: var(--marke-flaeche); }

.schwebeleiste { position: fixed; top: 0; left: 0; z-index: 30; display: flex; gap: 0.1rem; margin: 0; padding: 0.2rem; border-radius: var(--rund-klein); background: #fff; box-shadow: 0 8px 24px #020f1826, 0 0 0 1px var(--marke-linie); }
.schwebeleiste[hidden] { display: none; }
.schwebeleiste .werkzeug-knopf { width: 2rem; height: 2rem; }

.anhaenge-zaehler { color: var(--marke-gedaempft); font-weight: 400; }

/* ---------- Vorschau-Modal (Block-Editor Phase 1) ---------- */
.vorschau-modal {
  width: min(44rem, 92vw); max-height: 85vh; padding: 1.5rem;
  border: 0; border-radius: var(--rund); box-shadow: 0 8px 30px var(--marke-hauch);
}
.vorschau-modal::backdrop { background: rgba(2, 15, 24, 0.45); }
.vorschau-modal-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.vorschau-modal-kopf h3 { margin: 0; font-size: 1.05rem; color: var(--marke-dunkel); }

.video-dialog { width: min(26rem, 92vw); padding: 1.5rem; border: 0; border-radius: var(--rund); box-shadow: 0 8px 30px var(--marke-hauch); }
.video-dialog::backdrop { background: rgba(2, 15, 24, 0.45); }
.video-dialog-form { display: flex; flex-direction: column; gap: 0.75rem; }
.video-dialog h3 { margin: 0; font-size: 1.05rem; color: var(--marke-dunkel); }
.video-dialog-feld { width: 100%; border: 1px solid var(--marke-linie); border-radius: var(--rund-klein); padding: 0.55rem 0.65rem; font: inherit; }
.video-dialog-hinweis { margin: 0; font-size: 0.82rem; color: var(--marke-gedaempft); }
.video-dialog-fehler { margin: 0; color: #a33; font-size: 0.85rem; font-weight: 500; }
.video-dialog-fuss { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Der Speicherstand ist der einzige Ort, an dem der Editor ueber sich selbst spricht.
   Jeder Zustand hat seine eigene Farbe UND seinen eigenen Wortlaut — die Farbe allein
   traegt die Aussage nicht (Gate B). */
.speicherstand {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem;
  min-width: 0; margin: 0; font-size: 0.83rem; color: var(--marke-gedaempft); text-align: right;
}
.speicherstand::before {
  content: ''; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 999px;
  display: inline-block; background: currentColor;
}
/* Ohne diese Regel stand im Ruhezustand („keine ungespeicherten Aenderungen", also
   leerer Wortlaut) ein einzelner grauer Punkt allein in der Leiste — ein Zustand, den
   es nicht gibt. `:empty` greift, weil ein ::before nicht als Inhalt zaehlt. */
.speicherstand:empty::before { display: none; }
.speicherstand-offen { color: #8a5a22; }
.speicherstand-laeuft { color: var(--marke-gedaempft); }
.speicherstand-ok { color: #3d6b52; }
.speicherstand-fehler { color: #a33; font-weight: 500; }
.wortzaehler { margin: 0; font-size: 0.83rem; color: var(--marke-gedaempft); white-space: nowrap; }
/* Umzug aus dem Page Header unter den Inhaltseditor (Design-Gate-2-Fidelity-Pass 4,
   §2) — rechtsbuendig, dieselbe Variable/Logik, nur eine andere Stelle im DOM. */
.wortzaehler-zeile { display: flex; justify-content: flex-end; margin-top: -0.5rem; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Design-Gate-2-Fidelity-Pass 4 (FB 2026-09-05, §2): echter Page Header statt
   einer einzeiligen Werkzeugleiste mit unsichtbarem `<h1>` — Ruecklink oben, dann
   Titel links und Aktionen rechts in einer zweiten Zeile. Struktur/Kanten-
   Ausrichtung der Leiste bleiben, nur der Inhalt wandert von einer auf zwei
   Zeilen (`flex-direction: column`). */
.redaktion-leiste {
  position: sticky; top: var(--kopf-hoehe); z-index: 6;
  display: flex; flex-direction: column; gap: 0.35rem;
  /* Die Leiste laeuft ueber die volle Hauptbreite, die Publishing-Flaeche ist
     schmaler und zentriert — dadurch lagen die Kanten 64px auseinander. Der
     Innenabstand holt die Glieder auf die Flaechenkante. Die 2.1rem sind der
     Ausgleich fuer den Negativ-Margin (ohne sie landeten die Glieder 34px LINKS der
     Flaeche); der Rest ist die halbe Restbreite. Prozente beziehen sich dabei auf
     den Container, nicht auf die Leiste selbst. `max(0px, …)` haelt den bisherigen
     Wert, sobald die Flaeche die Breite ohnehin ausschoepft. Verwendet
     `--redaktion-breite` (nicht `--editor-breite`): dieselbe breitere Kante wie
     `.beitragsflaeche` unten, ohne die News-Detail-Ansicht mitzuziehen. */
  margin: -1.9rem -2.1rem 1.5rem;
  padding: 0.75rem calc(2.1rem + max(0px, (100% - var(--redaktion-breite)) / 2));
  background: var(--marke-flaeche);
}
.redaktion-kopf-hauptzeile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.redaktion-titel { margin: 0; font-size: 1.4rem; font-weight: 500; color: var(--marke-dunkel); flex: 1; min-width: 0; }
.redaktion-kopf-aktionen { display: flex; align-items: center; gap: 0.75rem; flex: none; margin-left: auto; }
.redaktion-aktionen { display: flex; align-items: center; gap: 0.5rem; }
/* Speichern ist absichtlich im stets sichtbaren Aktionsmenue: Vorschau und
   Veroeffentlichen bleiben als naechste Schreibhandlungen greifbar, ohne die Leiste
   mit einer dritten gleichrangigen Taste zu einem Werkzeugkasten zu machen. */
.aktionsmenue.redaktion-ueberlauf { display: inline-flex; }
.redaktion-leiste .zurueck-knopf { display: inline-block; margin-bottom: 0; font-size: 0.8rem; }
.redaktion-leiste .speicherstand { flex: none; margin: 0; white-space: nowrap; }

/* Unter 48rem steht die Navigation noch mit 250 px daneben, und Titel,
   Speicherstand, Vorschau und Veroeffentlichen passen zusammen nicht mehr in eine
   Zeile. Der Speicherstand faellt auf seinen Statuspunkt zurueck, „Vorschau" gibt
   seinen Knopf auf — erreichbar bleibt es im Aktionsmenue, das denselben Handler
   ruft. Veroeffentlichen bleibt als primaere Handlung immer sichtbar. */
@media (max-width: 767.98px) {
  .redaktion-titel { font-size: 1.15rem; }
  .redaktion-leiste .speicherstand { font-size: 0.75rem; }
  .redaktion-leiste .speicherstand:not(:empty) { width: 0.4rem; overflow: hidden; }
  .redaktion-vorschau { display: none; }
}
@media (max-width: 480px) {
  .redaktion-leiste { gap: 0.5rem; padding-inline: 0.5rem; }
  .redaktion-aktionen { gap: 0.25rem; }
}

.beitragsflaeche {
  --spalte: 52rem;
  --ausbruch: 60rem;
  /* Die ruhige Flaeche trennt das Schreiben vom Portalhintergrund: ein Gefaess, keine
     Karte. Ring und Schatten tragen beide `--marke-hauch` statt `--marke-linie` —
     der Portalgrund ist mit #f6f8f9 nur drei Prozent von Weiss entfernt, und mit der
     hellsten Linie darauf war die Kante im direkten Vergleich mit dem Zielbild kaum
     zu sehen. `--marke-hauch` ist genau dafuer da (siehe :root). */
  /* `--redaktion-breite` statt `--editor-breite` (Design-Gate-2-Fidelity-Pass 4,
     §2): spuerbar breiterer Editor, ohne die News-Detail-Ansicht mitzuziehen, die
     weiterhin `--editor-breite` traegt. */
  max-width: var(--redaktion-breite); margin: 0 auto; padding: 2.25rem 3rem 2.5rem;
  background: #fff; border-radius: var(--rund-gross);
  box-shadow: 0 2px 8px var(--marke-hauch), 0 0 0 1px var(--marke-hauch);
  /* Echtes Prozent-Verhaeltnis statt einer festen 20rem-Kontextspalte (§2, ~72/28):
     die Kontextspalte bleibt auf schmalen Editor-Breiten trotzdem lesbar
     (`minmax(19rem, …)`), waechst aber mit der Flaeche statt starr zu bleiben. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 28%); gap: 2.5rem;
}
.beitrag-editor-spalte { display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; }
.beitrag-kontextspalte { min-width: 0; align-self: start; display: flex; flex-direction: column; gap: 1.5rem; }
/* `.beitrag-dateien` bewusst NICHT mehr in dieser Liste (Design-Gate-2-Fidelity-
   Pass 4, §2: „Breite an Haupteditor angeglichen") — der Block-Inhalt selbst hat
   keine Ausbruch-Deckelung, die Dateien-Dropzone war dadurch schmaler als der
   Text darueber. Titel/Trenner behalten die Lesebreite. */
.beitrag-titelfeld, .beitrag-kopf-trenner {
  width: 100%; max-width: var(--ausbruch); margin-inline: auto;
}
@media (max-width: 1023.98px) {
  .beitragsflaeche { grid-template-columns: 1fr; gap: 1.15rem; }
}

.beitrag-titel {
  border: 0; border-radius: 0; padding: 0; background: transparent;
  font-size: 2.05rem; line-height: 1.25; font-weight: 500;
  color: var(--marke-dunkel); letter-spacing: -0.02em;
}
/* Der Platzhalter fiel auf 400 zurueck, waehrend der echte Titel 500 traegt: der
   leere Titel war also heller UND duenner. Beides angeglichen; der befuellte Titel
   (--marke-dunkel) bleibt sichtbar staerker. */
.beitrag-titel::placeholder { color: var(--marke-gedaempft-kraeftig); font-weight: 500; }
.beitrag-titel:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; border-radius: var(--rund-klein); }

/* Design-Gate-2-Fidelity-Pass 4 (§2): grosses, unaufdringliches Feld statt der
   generischen Pillen-Eingabe (`input,textarea,select` in :root) — dieselbe
   Behandlung wie `.beitrag-titel`, nur kleiner/gedaempfter, damit die Hierarchie
   Titel > Untertitel sichtbar bleibt. Kein eigenes Label mehr darueber (siehe
   redaktion.js) — der Platzhalter traegt die Bedeutung, wie im Zielvisual. */
.beitrag-untertitel {
  border: 0; border-radius: 0; padding: 0; background: transparent;
  font-size: 1.15rem; line-height: 1.4; font-weight: 400; color: var(--marke-text);
}
.beitrag-untertitel::placeholder { color: var(--marke-gedaempft); }
.beitrag-untertitel:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; border-radius: var(--rund-klein); }

/* Design-Gate 1: Veroeffentlichung/Informationen als zwei Karten in der rechten
   Kontextspalte, statt einer Zeile ueber dem Titel — dieselbe Kartenoptik wie die
   Anhaenge-Karte darueber/darunter (weiss, `--rund-klein`, Haarlinienrahmen). */
.beitrag-veroeffentlichung, .beitrag-informationen {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1rem 1.1rem; border-radius: var(--rund-klein);
  background: #fff; box-shadow: 0 0 0 1px var(--marke-linie);
}
.beitrag-veroeffentlichung .abschnitt-marke, .beitrag-informationen .abschnitt-marke {
  margin: 0; font-size: 0.85rem; color: var(--marke-dunkel); font-weight: 500;
}
.beitrag-metafeld { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.beitrag-metalabel {
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--marke-gedaempft); line-height: 1.3;
}
.beitrag-thema {
  width: auto; padding: 0.35rem 0.75rem; margin-left: 0;
  border: 1px solid var(--marke-linie); border-radius: 999px; background: #fff;
  font-size: 0.85rem; color: var(--marke-text);
}
.beitrag-thema:hover { border-color: var(--marke-blaugrau); }
.beitrag-thema:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
/* Die Statuspille traegt in der Uebersichtstabelle einen Ton, der sich vom grauen
   Zeilenhintergrund abhebt. Im Editor steht sie auf der weissen Publishing-Flaeche —
   dort verschwand „Entwurf" in `--marke-flaeche` fast vollstaendig. Nur hier ein
   kraeftigerer Grund und die Hoehe der Themenpille daneben, damit die Metaebene eine
   Zeile ist und nicht zwei verschieden grosse Dinge. */
.beitrag-metafeld .news-status {
  padding: 0.35rem 0.75rem; font-size: 0.85rem; line-height: 1.35;
}
.beitrag-metafeld .news-status-draft { background: var(--marke-linie); color: var(--marke-blau); }

.beitrag-kopf-trenner { height: 1px; background: var(--marke-linie); margin: 0.35rem auto 0.1rem; }

.beitrag-editor-spalte > .beitrag-titelbild-bereich { display: flex; flex-direction: column; gap: 0.2rem; }
/* Design-Gate-2-Fidelity-Pass (FB 2026-09-04, §2): „richtige Dropzone" statt reinem
   Textlink — bleibt aber umrandet statt gefuellt und in kompakter Hoehe. Die
   fruehere, ausdruecklich begruendete Entscheidung vom 2026-08-14 (keine grosse
   GEFUELLTE Flaeche, die vor dem Schreibbereich Aufmerksamkeit zieht) gilt inhaltlich
   weiter — nur „kein Bild gewaehlt" soll jetzt wie eine anklickbare Dropzone aussehen. */
.titelbild-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem; width: 100%; max-width: var(--ausbruch); padding: 1.1rem 1.25rem;
  border: 1px dashed var(--marke-linie); border-radius: var(--rund-klein);
  background: transparent; color: var(--marke-gedaempft); text-align: center;
}
.titelbild-dropzone:hover { border-color: var(--marke-blaugrau); color: var(--marke-text); background: var(--marke-flaeche); }
.titelbild-dropzone:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.titelbild-dropzone-sinnbild {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.titelbild-dropzone-text { font-size: 0.85rem; }
.titelbild-dropzone-hinweis { font-size: 0.72rem; color: var(--marke-gedaempft); }
/* Ab der Bildwahl dieselbe Geometrie wie das fertige Bild, damit die Freigabe die
   Flaeche nicht springen laesst. */
.titelbild-pruefend {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  width: 100%; max-width: var(--ausbruch); aspect-ratio: 16 / 9;
  border-radius: var(--rund); background: var(--marke-flaeche);
}
.titelbild-pruefend-sinnbild {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; color: var(--marke-gedaempft);
}
.titelbild-pruefend-titel { font-size: 0.92rem; color: var(--marke-text); }
.titelbild-pruefend-hinweis { font-size: 0.78rem; color: var(--marke-gedaempft); }
.titelbild-flaeche { position: relative; width: 100%; max-width: var(--ausbruch); border-radius: var(--rund); overflow: hidden; }
.titelbild-vorschau { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; background: var(--marke-flaeche); }
.titelbild-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;
  gap: 0.5rem; padding: 0.85rem; opacity: 0; transition: opacity 0.12s ease;
  background: linear-gradient(to top, rgba(2, 15, 24, 0.55), transparent 60%);
}
.titelbild-flaeche:hover .titelbild-overlay, .titelbild-flaeche:focus-within .titelbild-overlay { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .titelbild-overlay { transition: none; } }

/* Design-Gate-2-Fidelity-Pass (§2): steht jetzt immer unterhalb des Inhalts in
   voller Breite (frueher: in der schmalen Kontextspalte, mit einem kollabierten
   Ein-Zeilen-Zustand ohne Dateien — der ergab dort Sinn, hier waere er die Dropzone
   gerade dann verstecken, wenn sie am noetigsten ist). */
.beitrag-dateien { margin-top: 2rem; }
.beitrag-kontextspalte .beitrag-dateien { margin-top: 0; }
.beitrag-dateien-trenner { height: 1px; background: var(--marke-linie); margin-bottom: 1.25rem; }
.beitrag-dateien-titel { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.7rem; font-size: 0.95rem; color: var(--marke-dunkel); font-weight: 500; }
.beitrag-dateien-sinnbild { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--marke-gedaempft); }
/* Die Editor-Anhänge sind Download-Angebote; sie brauchen keine Verwaltungslistenbreite. */
.beitrag-dateien .anhaenge-liste { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.75rem; border: 0; border-radius: 0; background: transparent; }
.beitrag-dateien-grenzen { margin: 0.6rem 0 0; font-size: 0.75rem; }
.beitrag-dateien-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; width: 100%; padding: 1.5rem 1.25rem;
  border: 1px dashed var(--marke-linie); border-radius: var(--rund-klein);
  background: transparent; color: var(--marke-gedaempft); text-align: center;
}
.beitrag-dateien-dropzone:hover { border-color: var(--marke-blaugrau); color: var(--marke-text); background: var(--marke-flaeche); }
.beitrag-dateien-dropzone:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.beitrag-dateien-dropzone-sinnbild {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.beitrag-dateien-dropzone-text { font-size: 0.85rem; }
.anhang-chip { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 20rem; padding: 0.5rem 0.7rem; border: 1px solid var(--marke-linie); border-radius: var(--rund-klein); background: #fff; }
.anhang-chip-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.anhang-chip .anhang-name { font-size: 0.85rem; color: var(--marke-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang-meta { font-size: 0.75rem; color: var(--marke-gedaempft); }
.anhang-typ { flex: none; padding: 0.2rem 0.35rem; border-radius: var(--rund-klein); background: var(--marke-flaeche); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.06em; color: var(--marke-blau); }
.anhang-entfernen { flex: none; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 999px; font-size: 1rem; line-height: 1; }
.anhang-download { font-size: 0.75rem; }
.anhang-chip .anhang-hinweis { margin: 0; font-size: 0.72rem; color: #a33; }

.meta { font-size: var(--schrift-klein); color: var(--marke-gedaempft); }

/* ---------- Mitarbeiterverwaltung (Umbau 2026-08-06) ----------
   Vorher: je Konto eine grosse weisse Karte mit allen Rechtekaesten und allen
   Vorgaengen darin. Bei acht Konten war die Seite drei Bildschirme lang, und die
   eigentliche Frage — wer hat welche Rolle, wer ist gesperrt — liess sich nicht
   ueberfliegen. Jetzt eine Tabelle; alles Bedienbare liegt in der Schublade. */

.werkzeugleiste {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.werkzeug-suche { flex: 1 1 18rem; max-width: 24rem; }
.werkzeug-filter { flex: none; width: auto; min-width: 10rem; }
.werkzeug-anzahl { margin-left: auto; font-size: 0.8rem; color: var(--marke-gedaempft); }

/* Die Tabelle ist die eine grosse Flaeche der Seite. Traeger ist die Flaeche selbst,
   nicht je Zeile eine Karte: Zeilen sollen sich vergleichen lassen. */
.tabellen-flaeche {
  background: #fff; border-radius: var(--rund); box-shadow: none;
  /* Schmale Fenster: lieber die Tabelle scrollen als die Spalten zerquetschen. */
  overflow-x: auto;

  border: 1px solid var(--kontur);
}
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th {
  padding: 1rem 1.25rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--marke-linie);
  font-size: var(--schrift-klein); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--marke-blaugrau);
}
.tabelle td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--marke-linie); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
/* Unter 900px: eine `white-space: nowrap`-Tabelle (Standard oben) kann bei vielen
   Spalten breiter werden als `.tabellen-flaeche` UND als das Dokument selbst — die
   Flaeche zeigt zwar korrekt ihre eigene Bildlaufleiste, aber die Mindestbreite der
   Tabelle reicht trotzdem bis zum Rand durch und macht die GANZE Seite (samt
   Seitenleiste) horizontal scrollbar (AP-B4-Verifikation, 2026-09-04: Vorgänge bei
   768px, vier Spalten plus Aktionen). `table-layout: fixed` deckelt die
   Tabellenbreite hart auf 100 % von `.tabellen-flaeche`, unabhaengig vom Inhalt —
   dafuer duerfen Zellen jetzt umbrechen statt einzeilig zu bleiben. */
@media (max-width: 1023.98px) {
  .tabelle { table-layout: fixed; }
  .tabelle th, .tabelle td { white-space: normal; overflow-wrap: break-word; }
}
.tabelle tbody tr:hover { background: var(--marke-flaeche); }
/* Ein gesperrtes Konto ist zurueckgenommen — aber nur in der Farbe der Nebenwerte, nicht
   im Namen: wer gesperrt ist, muss lesbar bleiben. Die Pille traegt die Aussage. */
.zeile-gesperrt .person-mail, .zeile-gesperrt .zelle-gedaempft { opacity: 0.7; }
.zelle-gedaempft { color: var(--marke-gedaempft); white-space: nowrap; }
.zelle-nowrap { white-space: nowrap; }

.person { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
/* Der Name ist der Knopf, der die Bearbeitung oeffnet: damit ist die Zeile ohne
   `tabindex` und ohne eigene Tastenbehandlung mit der Tastatur erreichbar. */
.person-name {
  margin: 0; padding: 0; border: 0; background: transparent;
  font: inherit; font-weight: 500; font-size: 0.93rem; color: var(--marke-dunkel);
  text-align: left; cursor: pointer;
}
.person-name:hover { text-decoration: underline; }
.person-name:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
/* Nicht umbrechen: eine ueber zwei Zeilen zerrissene Adresse liest sich schlechter als
   eine schmalere Rechtespalte daneben — deshalb bekommt die Personenspalte auch eine
   Mindestbreite, statt sich von den Rechtepillen zusammendruecken zu lassen. */
.person-mail { font-size: 0.78rem; color: var(--marke-gedaempft); white-space: nowrap; }
/* AUSDRUECKLICH auf die Mitarbeitertabelle beschraenkt. Beide Regeln beschreiben, was
   in DIESER Tabelle in Spalte 1 und 2 steht — die News-Verwaltung hat dieselbe
   `.tabelle`, aber eine andere Spaltenfolge, und bekam durch die ungescopte Fassung
   eine Kategoriespalte ueber die halbe Seite. */
main[data-modul='mitarbeiter'] .tabelle td:first-child { min-width: 15rem; }
/* Die Rechtespalte bekommt den uebrigen Platz. Ohne das teilt der Browser die Breite
   nach Inhalt auf, und die Pillen brechen auf drei Zeilen um, obwohl daneben Platz frei
   ist — die Zeile des Administrators waere dann doppelt so hoch wie alle anderen. */
main[data-modul='mitarbeiter'] .tabelle td:nth-child(2),
main[data-modul='mitarbeiter'] .tabelle th:nth-child(2) { width: 100%; }

/* In der News-Verwaltung traegt der Titel die Zeile — er bekommt den uebrigen Platz,
   die uebrigen Spalten nur so viel, wie ihr Inhalt braucht. */
main[data-modul='news-verwalten'] .tabelle td:first-child,
main[data-modul='news-verwalten'] .tabelle th:first-child { width: 100%; min-width: 16rem; }
main[data-modul='news-verwalten'] .tabelle td:not(:first-child) { white-space: nowrap; }

/* Die Rechte eines Kontos ausgeschrieben. Es sind vier — sie passen nebeneinander, und
   die Frage an dieser Liste ist fast immer „wer darf X?". Eine Zahl („3 Rechte") koennte
   das nicht beantworten, eine abgeleitete Rollenbezeichnung nur ungenau. */
.rechte-pillen { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.recht-pille {
  display: inline-block; padding: 0.13rem 0.6rem; border-radius: 999px;
  background: var(--marke-linie); color: var(--marke-text);
  font-size: 0.75rem; white-space: nowrap;
}
/* Zustand IMMER ausgeschrieben, Farbe nur als Zugabe (Gate B). */
.status-pille {
  display: inline-block; padding: 0.13rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}
.status-aktiv { background: var(--semantik-salbei-flaeche); color: var(--semantik-salbei-text); }
.status-gesperrt { background: #f6e7e7; color: #a33; }

.spalte-aktionen { width: 1%; text-align: right; white-space: nowrap; }
/* Nur fuer Vorleseprogramme: eine sichtbare Ueberschrift ueber drei Punkten waere
   groesser als die Spalte darunter. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Aktionsmenue ---------- */
.aktionsmenue { position: relative; display: inline-block; }
.aktionsmenue-knopf {
  width: 2rem; height: 2rem; padding: 0; margin: 0; line-height: 1;
  border: 0; border-radius: 999px; background: transparent; color: var(--marke-text);
  font-size: 1.1rem;
}
.aktionsmenue-knopf:hover { background: var(--marke-linie); color: var(--marke-dunkel); }
/* Die Block-Editor-Varianten hatten eine eigene Fokusregel, dieser Grundknopf nicht —
   in Tabellen blieb deshalb der gelbe Browser-Standardring (AP-A8-Bestandsaufnahme). */
.aktionsmenue-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 1px; }
/* Fest am Fensterrahmen statt am Knopf: die Tabellenflaeche darueber scrollt und
   schneidet absolut positionierte Nachfahren ab. Lage kommt aus aktionsmenue.js. */
.aktionsmenue-liste {
  position: fixed; top: 0; left: 0; z-index: 30;
  min-width: 13rem; padding: 0.3rem; text-align: left;
  border-radius: var(--rund-klein); background: #fff;
  box-shadow: 0 8px 24px #020f1826, 0 0 0 1px var(--marke-linie);
}
.aktionsmenue-titel { padding: 0.35rem 0.6rem 0.45rem; margin-bottom: 0.15rem; border-bottom: 1px solid var(--marke-linie); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--marke-gedaempft); }
.aktionsmenue-eintrag {
  display: block; width: 100%; margin: 0; padding: 0.45rem 0.6rem;
  border: 0; border-radius: var(--rund-klein); background: transparent;
  font: inherit; font-size: 0.87rem; font-weight: 400; color: var(--marke-text);
  text-align: left; cursor: pointer;
}
.aktionsmenue-eintrag:hover { background: var(--marke-flaeche); color: var(--marke-dunkel); }
/* Sperren ist der einzige nicht beilaeufige Vorgang im Menue — abgesetzt und rot. */
.aktionsmenue-eintrag.gefahr {
  color: #a33; border-top: 1px solid var(--marke-linie); border-radius: 0;
  margin-top: 0.3rem; padding-top: 0.55rem;
}
.aktionsmenue-eintrag.gefahr:hover { background: #a3333314; color: #a33; }

/* ---------- Leerzustand ---------- */
.leerzustand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  padding: 2rem;

  border-radius: var(--rund);
}
.leerzustand h3 { margin: 0; font-size: 1.125rem; color: var(--marke-dunkel); }
.leerzustand p { margin: 0; font-size: var(--schrift-bedienung); color: var(--marke-gedaempft); max-width: 52ch; }
.leerzustand button { margin-top: 0.6rem; }

/* ---------- Meldungsbaender ----------
   Alles, was das Neuzeichnen der Liste ueberleben muss: die IdP-Warnung und das
   Einmal-Passwort. Bewusst kein selbsttaetig verschwindender Hinweis — das Passwort
   steht nur in genau einer Serverantwort. */
.meldungen:not(:empty) { margin-bottom: 1rem; }
.meldung {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.85rem 1rem; border-radius: var(--rund-klein);
  font-size: 0.88rem; line-height: 1.5;
}
.meldung > div:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.meldung-erfolg { background: #eaf1ec; color: #2f5540; border-left: 4px solid #3d6b52; }
.meldung-fehler { background: #f6e7e7; color: #7d2a2a; border-left: 4px solid #a33; }
.meldung-zusatz { font-size: 0.82rem; opacity: 0.85; margin-top: 0.2rem; }
.meldung-schliessen {
  flex: none; margin: 0; padding: 0 0.3rem; border: 0; background: transparent;
  color: inherit; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}

/* ---------- Aufklappbarer Abschnitt (Ordnerverwaltung) ---------- */
.aufklappbarer-abschnitt {
  margin-top: 2rem; border-radius: var(--rund);
  background: #fff; box-shadow: 0 1px 3px var(--marke-hauch);
}
.aufklappbarer-abschnitt > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; border-radius: var(--rund); cursor: pointer;
}
.abschnitt-text { display: flex; flex-direction: column; gap: 0.1rem; }
/* Ein `display: flex`-Summary verliert in allen Browsern seine Aufzaehlungsmarke —
   das Standard-Dreieck ist also weg, sobald der Kopf zweizeilig wird. Deshalb ein
   eigenes Zeichen, das sich beim Aufklappen dreht: ohne Zustandsanzeige sieht der
   Abschnitt aus wie eine Ueberschrift und nicht wie etwas, das sich oeffnen laesst. */
.aufklappbarer-abschnitt > summary { list-style: none; }
.aufklappbarer-abschnitt > summary::-webkit-details-marker { display: none; }
.aufklappbarer-abschnitt > summary::after {
  content: '⌄'; flex: none; color: var(--marke-blaugrau); font-size: 1.1rem; line-height: 1;
  transition: transform 0.15s ease;
}
.aufklappbarer-abschnitt[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .aufklappbarer-abschnitt > summary::after { transition: none; }
}
.aufklappbarer-abschnitt > summary:hover { background: var(--marke-flaeche); }
.aufklappbarer-abschnitt > summary:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -2px; }
.abschnitt-titel { font-weight: 500; color: var(--marke-dunkel); }
.abschnitt-zusatz { font-size: 0.83rem; color: var(--marke-gedaempft); }
/* Der Block hat zwei benannte Gruppen („Stillgelegt", „Aktiven Ordner stilllegen"), und
   alles darin steht auf EINER Spaltenbreite. Vorher richtete sich jeder Baustein nach
   seinem eigenen Inhalt aus: die Zeilen reichten bis 42rem, das Suchfeld war auf 22rem
   gekappt, die Erklaerung lief bis 78ch — drei verschiedene rechte Kanten untereinander. */
.ordner-verwaltung {
  display: flex; flex-direction: column; gap: 1.4rem;
  padding: 1.2rem 1.5rem 1.5rem;
  border-top: 1px solid var(--marke-linie);
}
.ordner-verwaltung > .meta, .ordner-gruppe { max-width: 44rem; }
.ordner-gruppe { display: flex; flex-direction: column; gap: 0.45rem; }
/* Die Zeilen bekommen eine gemeinsame Umrandung statt frei zu stehen: erst dadurch
   liest sich „Bezeichnung links, Schalter rechts" als Liste und nicht als verstreute
   Elemente. Die Trefferliste ist auf 20 Eintraege begrenzt — das sind immer noch zwei
   Bildschirme, wenn der Suchtext unscharf ist. */
.ordner-liste {
  display: flex; flex-direction: column;
  border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  background: var(--marke-flaeche);
  max-height: 18rem; overflow-y: auto;
}
.ordner-liste:empty { display: none; }
.ordner-liste .ordner-zeile {
  padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--marke-linie);
}
.ordner-liste .ordner-zeile:last-child { border-bottom: 0; }
.ordner-leer { padding: 0.55rem 0.75rem; font-size: 0.83rem; color: var(--marke-gedaempft); }
.ordner-verwaltung .ordner-suche { max-width: none; }

/* ---------- Mehrfachauswahl (FB, 2026-08-06) ----------
   Vorher trug jede Zeile ihren eigenen Knopf: zehn Ordner stilllegen hiess zehnmal
   klicken und zehnmal eine Rueckfrage bestaetigen. Jetzt kreuzt man an und schaltet
   einmal um. Beide Listen tragen dieselben Ankreuzzeilen, nur der Sammelknopf darunter
   ist ein anderer. */
.ordner-wahl {
  cursor: pointer; gap: 0.6rem;
  /* Als <label> ist die ganze Zeile die Trefferflaeche — die Bezeichnung muss dafuer
     ueber die volle Breite reichen, sonst klickt man neben dem Text ins Leere. */
}
.ordner-wahl:hover { background: var(--marke-flaeche); }
/* Die Grundregel fuer `input` weiter unten gilt Textfeldern: `width: 100%`, Polsterung
   und Pillenrand. Auf ein Ankreuzfeld angewandt schiebt sie die Bezeichnung an den
   rechten Rand und quetscht sie auf einen Buchstaben je Zeile — deshalb hier zurueck
   auf die Darstellung des Browsers. */
.ordner-wahl input[type='checkbox'] {
  flex: none; width: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  accent-color: var(--marke-blau);
}
/* Stillgelegte Zeilen tragen zusaetzlich einen Loeschen-Knopf. Der sitzt NEBEN dem
   `<label>`, nicht darin — sonst wuerde ein Klick darauf zusaetzlich das Ankreuzfeld
   umschalten, weil ein Label jeden Klick in seinem Innern an sein Formularfeld
   weiterleitet. Die Zeilenpolsterung bleibt bei `.ordner-liste .ordner-zeile` (oben),
   hier nur die Aufteilung der beiden Kinder. */
.ordner-zeile-aktion { display: flex; align-items: center; gap: 0.4rem; }
.ordner-zeile-aktion .ordner-wahl { flex: 1; min-width: 0; padding: 0; }
.ordner-zeile-aktion .leise { flex: none; white-space: nowrap; }
/* Der Sammelknopf sitzt unter seiner Liste und faengt buendig mit ihr an. */
.ordner-gruppe > .leise { align-self: flex-start; margin-top: 0.15rem; }
.ordner-gruppe > .leise[disabled] { opacity: 0.45; cursor: default; }

/* Aufklappbares Feld statt einer dauerhaft offenen Liste: aktive Ordner sind rund 180
   Stueck und wuerden die Seite sonst fuellen. Sieht aus wie ein Auswahlfeld, ist aber
   keines — in einem <select multiple> laesst sich nicht suchen. */
.ordner-auswahl { position: relative; }
.ordner-aufklapper {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; padding: 0.45rem 0.75rem; text-align: left;
  border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  background: #fff; font: inherit; font-size: 0.88rem; color: var(--marke-dunkel);
  cursor: pointer;
}
.ordner-aufklapper:hover { border-color: var(--marke-blaugrau); }
.ordner-aufklapper:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 1px; }
.ordner-aufklapper-pfeil { color: var(--marke-blaugrau); font-size: 0.8rem; }
.ordner-aufklapper[aria-expanded='true'] .ordner-aufklapper-pfeil { transform: rotate(180deg); }
/* Die Klappe legt sich UEBER den folgenden Inhalt, statt ihn auseinanderzuschieben —
   sonst springt die Seite bei jedem Auf- und Zuklappen. */
.ordner-klappe {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; padding: 0.7rem;
  border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  background: #fff; box-shadow: 0 6px 20px var(--marke-hauch);
}
.ordner-klappe.auf { display: flex; }

/* ---------- Formularfelder in Schubladen ---------- */
.feld-gruppe { display: flex; flex-direction: column; gap: 0.5rem; }
.grant-formular { display: flex; flex-direction: column; gap: 1.25rem; }
/* Echtes <label> ueber dem Feld statt eines Platzhalters: der Platzhalter verschwindet
   beim Tippen, und dann steht das Feld unbeschriftet da. */
.feld-marke { font-size: var(--schrift-bedienung); font-weight: 500; color: var(--marke-dunkel); }
.feld-hinweis { margin: 0; font-size: var(--schrift-klein); color: var(--marke-gedaempft); }
.hinweis-offen { color: #8a5a22; }
/* Die Rechte stehen offen da, nicht hinter einem Aufklapper: sie sind der eigentliche
   Inhalt der Schublade, seit die Vorlagen weg sind (FB, 2026-08-06). Untereinander statt
   in einer Zeile — Haken setzt man von oben nach unten, nicht von links nach rechts. */
.schublade .rechte-wahl {
  flex-direction: column; gap: 0.55rem; margin-top: 0.25rem;
  padding: 0.7rem 0.85rem; border-radius: var(--rund-klein); background: var(--marke-flaeche);
}
.rechte-zeile { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; }
.rechte-zeile input { width: auto; }

.badge {
  font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 999px;
  margin-left: 0.4rem; vertical-align: 0.1rem;
}
.badge.new { background: var(--marke-blau); color: #fff; }
.badge.draft { background: var(--marke-blaugrau); color: #fff; }
.badge.withdrawn { background: #a33; color: #fff; }
.badge.pin { background: var(--marke-dunkel); color: #fff; }
.badge.archived { background: var(--marke-linie); color: var(--marke-text); }
.badge.pruefend { background: var(--marke-blaugrau); color: #fff; }
.badge.freigegeben { background: #3d6b52; color: #fff; }
.badge.abgelehnt { background: #a33; color: #fff; }

/* Anhaenge-Liste im Editor und in der Leseansicht (N6/N7) — dieselbe Umrandung wie
   `.ordner-liste`, damit „Bezeichnung links, Zustand/Aktion rechts" konsistent mit der
   Ordnerverwaltung aussieht statt eine dritte Listenoptik einzufuehren. */
.anhaenge-liste {
  display: flex; flex-direction: column;
  border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  background: var(--marke-flaeche);
}
.anhaenge-liste:empty { display: none; }
.anhang-zeile {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--marke-linie);
}
.anhang-zeile:last-child { border-bottom: 0; }
.anhang-info { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.anhang-name { font-size: 0.88rem; overflow-wrap: anywhere; }
.anhang-groesse { font-size: 0.78rem; color: var(--marke-gedaempft); }
.anhang-hinweis { margin: 0; font-size: 0.78rem; color: #a33; }

a { color: var(--marke-blau); }

/* Textknopf statt gefuelltem Knopf: fuer alles, was eine Nebenhandlung ist
   (Bearbeiten, Anheften, Zurueckziehen). Die Klasse ist gleichzeitig die Ausnahme
   von der allgemeinen Knopfregel weiter unten. */
.leise {
  margin: 0; padding: 0.2rem 0.45rem;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--marke-blau); font: inherit; font-size: 0.82rem; cursor: pointer;
}
.leise:hover { background: var(--marke-linie); color: var(--marke-dunkel); }
/* Verwerfen ist nicht umkehrbar — es sieht anders aus als seine Nachbarn. */
.leise.gefahr { color: #a33; }
.leise.gefahr:hover { background: #a3333314; color: #a33; }

/* Der gefuellte Knopf ist der Grundfall — in `:where()` und damit mit GEWICHT NULL.
 *
 * Warum unbedingt so: die frueheren Fassungen grenzten Ausnahmen einzeln aus
 * (`button:not(.nav-eintrag):not(.nav-fuss):not(.leise)`). Das hat am 2026-07-30
 * dreimal denselben Fehler erzeugt — jeder neue Knopf, der anders aussehen soll,
 * wird stillschweigend blau gefuellt, bis jemand die Liste erweitert (Kachel, dann
 * „Weiterlesen", dann die Themenspalte). Und `:not(#einklappen)` hob die ganze Regel
 * zusaetzlich auf ID-Gewicht und ueberstimmte damit auch Klassenregeln.
 *
 * `:where()` setzt die Gewichtung auf 0. Damit gewinnt JEDE Klassenregel — ohne
 * Ausnahmeliste, die man pflegen muss. Wer einen abweichenden Knopf baut, muss nur
 * Hintergrund, Rahmen und Textfarbe selbst setzen, wie `.leise` es tut. */
:where(button) {
  cursor: pointer; font: inherit; font-weight: 500;
  /* Die Aktionsrolle gilt auch fuer Authentik; kompakte Werkzeuge setzen eigene Masse. */
  padding: 0.45rem 1.05rem; border-radius: var(--rund-klein); margin-right: 0.4rem;
  border: 1px solid var(--aktion); background: var(--aktion); color: #fff;

  min-height: 2.5rem;

  font-size: var(--schrift-bedienung);
}
:where(button:hover) {
  background: var(--aktion-hover); border-color: var(--aktion-hover);
}
:where(button):focus-visible { outline: 2px solid var(--marke-dunkel); outline-offset: 2px; }
/* Zweitrangig: gleiche Form, aber weiss mit Kontur. Der Unterschied zwischen „Abbrechen"
   und „Konto anlegen" muss auf einen Blick da sein — beides gefuellt und dunkel waere
   zwei gleich starke Angebote fuer zwei sehr verschiedene Ausgaenge. */
.zweitrangig {
  border: 1px solid var(--marke-linie); background: #fff; color: var(--marke-dunkel);
}
.zweitrangig:hover { background: var(--marke-flaeche); border-color: var(--marke-blaugrau); }
/* Sperren ist nicht umkehrbar ohne Zutun — es sieht anders aus als seine Nachbarn. */
.zweitrangig.gefahr { color: #a33; border-color: #e0c4c4; }
.zweitrangig.gefahr:hover { background: #a3333314; border-color: #a33; }
/* Es liegen ungespeicherte Aenderungen an: der Speichernknopf ist dann nicht nur
   verfuegbar, sondern faellig. Zusaetzlich zum Hinweistext, nie statt seiner. */
.hervorgehoben { box-shadow: 0 0 0 3px #2243661f; }
:where(button)[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Schublade (Drawer) ---------- */
.schublade-hintergrund {
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: flex-end;
  background: #020f1859;
}
.schublade {
  display: flex; flex-direction: column;
  width: min(34rem, 100%); max-height: 100%;
  background: #fff; box-shadow: -8px 0 32px #020f1826;
}
/* Der Rest der Seite soll nicht mitscrollen, solange die Schublade offen ist. */
body.schublade-offen { overflow: hidden; }

/* Navigationsvariante (AP-A8): dieselbe Schublade, dieselbe Tastaturbedienung,
   dieselbe Abdunklung — nur von LINKS statt von rechts, weil die Seitenleiste dort
   auch auf Desktop steht und der Knopf dort sitzt. Kein zweites Bedienmuster: der
   Inhalt ist der unveraenderte `#seitenleiste`-Knoten samt eigenem dunklen Grund,
   deshalb faellt hier das weisse Panel-Innere weg. */
.schublade-hintergrund-navigation { justify-content: flex-start; }
.schublade-navigation {
  width: min(17.5rem, 84%);
  background: var(--flaeche-navigation);
  box-shadow: 8px 0 32px #020f1826;
}
.schublade-navigation .schublade-kopf {
  padding: 0 0.6rem 0 1.1rem;
  height: var(--kopf-hoehe);
  align-items: center;
  border-bottom-color: var(--marke-linie);
}
.schublade-navigation .schublade-titel { color: var(--marke-text); font-size: 0.95rem; }
.schublade-navigation .schublade-schliessen { color: var(--marke-blau); }
.schublade-navigation .schublade-schliessen:hover { background: #eef4f9; color: var(--marke-blau); }
.schublade-navigation .schublade-inhalt { padding: 0; gap: 0; }
/* Die Leiste bringt `position: sticky; height: 100vh` fuer das Raster mit — in der
   Schublade traegt die Schublade selbst die Hoehe. */
.schublade-navigation #seitenleiste { position: static; height: auto; min-height: 100%; }
/* Die Schubladenbreite ist nicht verstellbar. */
.schublade-navigation #einklappen { display: none; }
/* Der Schubladenfuss traegt sonst Formularknoepfe; hier ist er leer und stand als
   weisser Streifen unter der dunklen Navigation. */
.schublade-navigation .schublade-fuss { display: none; }
.schublade-kopf {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.5rem; border-bottom: 1px solid var(--marke-linie);
}
.schublade-kopftext { flex: 1; min-width: 0; }
.schublade-titel { margin: 0; font-size: 1.15rem; color: var(--marke-dunkel); }
.schublade-beschreibung {
  margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--marke-gedaempft);
  overflow-wrap: anywhere;
}
.schublade-schliessen {
  flex: none; width: 2rem; height: 2rem; margin: 0; padding: 0; line-height: 1;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--marke-text); font-size: 1.3rem;
}
.schublade-schliessen:hover { background: var(--marke-linie); color: var(--marke-dunkel); }
.schublade-inhalt {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.5rem;
}
.schublade-zustand { display: flex; gap: 0.4rem; }
.schublade-fuss {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 1.15rem 1.5rem; border-top: 1px solid var(--marke-linie);
  background: var(--marke-flaeche);
}
.schublade-fuss button { margin-right: 0; }
/* Sperren gehoert nicht neben Speichern: es ist der Gegenvorgang, kein Nachbar. */
.schublade-fuss .schublade-nebenaktion { margin-right: auto; }
@media (prefers-reduced-motion: no-preference) {
  .schublade { animation: schublade-herein 0.16s ease-out; }
}
@keyframes schublade-herein {
  from { transform: translateX(1.5rem); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

/* ---------- Mitarbeiter-Modale ---------- */
body.modal-offen { overflow: hidden; }
.modal {
  display: flex; flex-direction: column; width: min(44rem, calc(100vw - 2rem)); max-height: 85vh; margin: auto; padding: 0;
  border: 0; border-radius: var(--rund-gross); color: var(--marke-text);
  background: #fff; box-shadow: 0 18px 48px #020f1833;
}
.modal:focus, .modal:focus-visible { outline: 0; }
.modal::backdrop { background: #020f1859; }
.modal--kompakt { width: min(32rem, calc(100vw - 2rem)); }
.modal--mittel { width: min(44rem, calc(100vw - 2rem)); }
.detail-modal { width: min(54rem, calc(100vw - 2rem)); height: min(38rem, 85vh); overflow: hidden; }
.modal--anlegen { width: min(44rem, calc(100vw - 2rem)); }
.modal--bearbeiten {
  display: flex; flex-direction: column; width: min(54rem, calc(100vw - 2rem)); height: min(34rem, 85vh);
  overflow: hidden;
}
.modal--bearbeiten:focus, .modal--bearbeiten:focus-visible { outline: 0; }
.modal-kopf {
  display: flex; flex: 0 0 auto; align-items: flex-start; gap: 1rem;
  padding: 1.35rem 1.5rem 1rem; border-bottom: 1px solid var(--marke-linie);
}
.modal-kopftext { flex: 1; min-width: 0; }
.modal-titel { margin: 0; font-size: 1.15rem; color: var(--marke-dunkel); }
.modal-beschreibung { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--marke-gedaempft); overflow-wrap: anywhere; }
.modal-schliessen {
  flex: none; width: 2rem; height: 2rem; margin: 0; padding: 0; line-height: 1;
  border: 0; border-radius: 999px; background: transparent; color: var(--marke-text); font-size: 1.3rem;
}
.modal-schliessen:hover { background: var(--marke-linie); color: var(--marke-dunkel); }
.modal-inhalt {
  display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.75rem;
  min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; padding: 1.25rem 1.5rem;
}
.modal-inhalt > * { flex-shrink: 0; }
.formular-modal .modal-inhalt { gap: 0.95rem; }
.formular-modal .feld-gruppe { gap: 0.3rem; }
.formular-zeile {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem; row-gap: 0.95rem; align-items: start;
}
.formular-zeile > * { min-width: 0; }
.formular-optionen { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; }
.formular-optionen > * { min-width: 0; }
.detail-modal .modal-inhalt { gap: 0.85rem; }
.modal-mandant-identitaet { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; align-items: center; gap: 0.75rem; }
.modal-fuss {
  display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 0.5rem;
  padding: 1rem 1.5rem; border-top: 1px solid var(--marke-linie); background: #fff;
}
.modal-fuss button { margin-right: 0; }
.formular-modal .modal-fuss button:not(.zweitrangig):not(.gefahr) {
  background: var(--marke-dunkel); border-color: var(--marke-dunkel); color: #fff;
}
.formular-modal .modal-fuss button:not(.zweitrangig):not(.gefahr):is(:hover, :focus-visible) {
  background: var(--marke-dunkel); border-color: var(--marke-dunkel); color: #fff;
}
.modal-meldung { margin: 0; font-size: 0.85rem; }
.modal-abschnitt { margin: 0; font-size: 0.8rem; color: var(--marke-gedaempft); text-transform: uppercase; letter-spacing: 0.04em; }
.modal-zustand { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.modal-tabs { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--marke-linie); margin: -0.15rem 0 1rem; }
.modal-tab {
  margin: 0; padding: 0.5rem 0.7rem; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; color: var(--marke-gedaempft); font-size: 0.85rem;
}
.modal-tab:hover { background: transparent; color: var(--marke-dunkel); }
.modal-tab.aktiv { border-bottom-color: var(--marke-blau); color: var(--marke-dunkel); }
.modal-tab-inhalt { display: flex; flex-direction: column; gap: 0.85rem; }
.modal-tab-inhalt[hidden] { display: none; }
.modal--anlegen .modal-inhalt { display: flex; flex-direction: column; gap: 0.75rem; }
.modal--anlegen .modal-fuss { align-items: center; }
.modal-anlage-hinweis { flex: 1; margin: 0; color: var(--marke-gedaempft); font-size: 0.78rem; }
.modal-anlage-absenden {
  border-color: var(--marke-dunkel); background: var(--marke-dunkel); color: #fff;
}
.modal-anlage-absenden:hover {
  border-color: var(--marke-dunkel); background: var(--marke-dunkel); color: #fff;
}
.modal-anlage-absenden:focus-visible {
  border-color: var(--marke-dunkel); background: var(--marke-dunkel); color: #fff;
}
.modal-anlage-absenden:disabled { opacity: 0.55; }
.modal-stammdaten { display: grid; gap: 0.6rem; }
.stammdaten { display: grid; gap: 0.25rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--marke-linie); }
.stammdatum { font-size: 0.9rem; overflow-wrap: anywhere; }
.modal .rechte-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.modal--anlegen .rechte-wahl { grid-template-columns: 0.85fr 1.35fr 1fr; }
.formular-modal .rechte-wahl { display: flex; flex-direction: column; gap: 0.45rem; }
.modal .rechte-gruppe { min-width: 0; }
.modal .rechte-gruppe-titel { margin: 0 0 0.35rem; font-size: 0.78rem; color: var(--marke-gedaempft); text-transform: uppercase; letter-spacing: 0.04em; }
.modal .rechte-gruppe .rechte-zeile { display: flex; align-items: center; gap: 0.35rem; margin: 0.2rem 0; font-size: 0.9rem; line-height: 1.3; }
.modal .rechte-gruppe input { width: auto; }
.modal-zustand { margin-bottom: 0; }
.kontozugriff { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.kontozugriff h3 { margin: 0; font-size: 0.95rem; }
.grant-editor--mitarbeiter { padding-top: 0.85rem; border-top: 1px solid var(--marke-linie); }
.grant-editor .zweitrangig { align-self: flex-start; }
.grant-leerzustand { margin: 0.15rem 0 0; padding: 0.65rem 0; color: var(--marke-gedaempft); font-size: var(--schrift-klein); }
.modal-mandantblock { padding-top: 0.35rem; }
.mandant-formular { display: flex; align-items: flex-start; gap: 0.5rem; }
.mandant-formular input { flex: 1; min-width: 0; }
.mandant-formular button { flex: none; margin: 0; }

/* Detaildialog Mitarbeiter: die Funktionen bleiben dieselben, nur die bisherige
   Tab-Leiste wird als ruhige, feste Seitennavigation im Dialog dargestellt. */
.modal--bearbeiten > .modal-kopf {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.modal--bearbeiten .modal-inhalt {
  display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: none; overflow: hidden; padding: 0;
}
.mitarbeiter-dialog-kopf {
  display: flex; flex: 0 0 auto; align-items: center; gap: 0.85rem; padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--marke-linie);
}
.mitarbeiter-dialog-avatar {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--marke-linie); border-radius: 999px; font-size: 0.82rem; font-weight: 600;
}
.mitarbeiter-dialog-kopftext { min-width: 0; flex: 1; }
.mitarbeiter-dialog-namezeile { display: flex; align-items: center; gap: 0.55rem; }
.mitarbeiter-dialog-namezeile h2 { margin: 0; font-size: 1.05rem; color: var(--marke-dunkel); }
.mitarbeiter-dialog-kopftext p { margin: 0.15rem 0 0; color: var(--marke-gedaempft); font-size: 0.85rem; overflow-wrap: anywhere; }
.mitarbeiter-dialog-schliessen {
  width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--marke-gedaempft); font-size: 1.3rem; line-height: 1;
}
.mitarbeiter-dialog-schliessen:hover { background: var(--marke-linie); color: var(--marke-dunkel); }
.mitarbeiter-dialog-rumpf {
  display: grid; flex: 1 1 auto; min-height: 0; overflow: hidden;
  grid-template-columns: 11.5rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
.mitarbeiter-dialog-navigation { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem; border-right: 1px solid var(--marke-linie); background: #fafbfc; }
.mitarbeiter-dialog-navigation .modal-tab {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; margin: 0; padding: 0.55rem 0.65rem;
  border: 1px solid transparent; border-radius: var(--rund-klein); background: transparent;
  color: var(--marke-gedaempft); text-align: left; font-size: 0.8125rem; font-weight: 500;
}
.mitarbeiter-dialog-nav-icon,
.modal-ordnerblock .ordner-suche-icon,
.modal-ordnerblock .ordner-pille-icon,
.mandant-suche-icon,
.mandant-plus-icon {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ordner-suche-icon, .mandant-suche-icon { color: var(--marke-gedaempft); }
.mitarbeiter-dialog-navigation .modal-tab:hover { background: #fff; }
.mitarbeiter-dialog-navigation .modal-tab.aktiv { border-color: var(--marke-linie); background: #fff; color: var(--marke-dunkel); }
.mitarbeiter-dialog-navigation .modal-tab:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.mitarbeiter-dialog-rumpf > .modal-tab-inhalt {
  grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; max-height: 100%;
  gap: 0.85rem; overflow-x: hidden; overflow-y: auto; padding: 1rem 1.2rem;
}
.mitarbeiter-dialog-rumpf > .modal-tab-inhalt > * { flex-shrink: 0; }
.mitarbeiter-karte { overflow: hidden; border: 1px solid var(--marke-linie); border-radius: var(--rund); background: #fff; }
.mitarbeiter-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.7rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--marke-linie); }
.mitarbeiter-karte-kopf h3 { margin: 0; color: var(--marke-gedaempft); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.mitarbeiter-karte-kopf p { margin: 0.2rem 0 0; color: var(--marke-gedaempft); font-size: 0.78rem; }
.mitarbeiter-karte-kopf button { flex: none; margin: 0; }
.mitarbeiter-karte-inhalt { padding: 1rem; }
.modal-sofort-gespeichert { color: var(--status-erfolg); font-size: 0.78rem; white-space: nowrap; }
.modal-sofort-gespeichert::before { content: '✓'; margin-right: 0.4rem; }
.modal-ordnerblock .ordner-dropdown { max-width: none; margin: 0; }
.modal-ordnerblock .ordner-suche-feld {
  display: flex; align-items: center; gap: 0.55rem; min-height: 2.5rem; padding: 0 0.8rem;
  border: 1px solid var(--kontur); border-radius: var(--rund-klein); background: var(--marke-flaeche);
}
.modal-ordnerblock .ordner-suche-feld:focus-within { outline: 2px solid var(--marke-blau); outline-offset: 1px; }
.modal-ordnerblock .ordner-suche { min-width: 0; min-height: 2.375rem; padding: 0; border: 0; background: transparent; font-size: 0.8125rem; font-weight: 400; }
.modal-ordnerblock .ordner-suche:focus { outline: 0; }
.modal-ordnerblock .ordner-suche::placeholder { color: var(--marke-gedaempft); opacity: 1; }
.modal-ordnerblock .ordner-freigeschaltet { gap: 0.5rem; margin: 0.65rem 0 0; }
.modal-ordnerblock .ordner-pille {
  display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0.2rem 0.65rem;
  border: 1px solid var(--kontur); background: #fff; color: var(--marke-text);
}
.modal-ordnerblock .ordner-pille-icon { width: 0.95rem; height: 0.95rem; margin-right: 0.4rem; color: var(--marke-gedaempft); }
.modal-ordnerblock .entfernen-x { color: var(--marke-gedaempft); }
.modal-mandantblock { padding-top: 0; }
.modal-mandantblock .feld-hinweis { margin-top: 0; }
.modal-mandantblock .feld-hinweis,
.modal-mandantblock .zelle-gedaempft { font-size: 0.8125rem; }
.modal-mandantblock .feld-hinweis { color: var(--marke-gedaempft); }
.mandant-formular { align-items: center; }
.mandant-suche-feld {
  display: flex; flex: 1 1 auto; align-items: center; gap: 0.55rem; min-width: 0; min-height: 2.5rem;
  padding: 0 0.8rem; border: 1px solid var(--kontur); border-radius: var(--rund-klein); background: var(--marke-flaeche);
}
.mandant-suche-feld:focus-within { outline: 2px solid var(--marke-blau); outline-offset: 1px; }
.mandant-suche-feld input { min-width: 0; min-height: 2.375rem; padding: 0; border: 0; background: transparent; font-size: 0.8125rem; }
.mandant-suche-feld input:focus { outline: 0; }
.mandant-suche-feld input::placeholder { color: var(--marke-gedaempft); opacity: 1; }
.modal-mandant-zuordnen { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 500; }
.modal-mandant-zuordnen .mandant-plus-icon { width: 0.9rem; height: 0.9rem; }
.modal-mandant-chip {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.2rem 0.4rem 0.2rem 0.65rem;
  border: 1px solid var(--kontur); border-radius: 999px; background: #fff; color: var(--marke-text); font-size: 0.8125rem;
}
.modal-mandant-id { line-height: 1.3; }
.modal-mandant-entfernen { color: var(--marke-gedaempft); }
.mitarbeiter-stammdaten { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0; margin: 0; }
.mitarbeiter-stammdaten dt, .mitarbeiter-stammdaten dd { margin: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--marke-linie); font-size: 0.9rem; }
.mitarbeiter-stammdaten dt { color: var(--marke-gedaempft); }
.mitarbeiter-stammdaten dd { font-weight: 500; overflow-wrap: anywhere; }
.mitarbeiter-stammdaten dt:nth-last-of-type(1), .mitarbeiter-stammdaten dd:last-child { border-bottom: 0; }
.modal--bearbeiten .rechte-wahl { display: block; }
.modal--bearbeiten .rechte-gruppe { padding: 0.7rem 0; border-bottom: 1px solid var(--marke-linie); }
.modal--bearbeiten .rechte-gruppe:last-child { padding-bottom: 0; border-bottom: 0; }
.modal--bearbeiten .rechte-zeile { justify-content: space-between; padding: 0.4rem 0; }
.modal--bearbeiten .rechte-gruppe input[type='checkbox'] {
  position: relative; order: 2; width: 2.35rem; height: 1.35rem; margin: 0; appearance: none;
  border: 0; border-radius: 999px; background: var(--marke-dunkel); cursor: pointer;
}
.modal--bearbeiten .rechte-gruppe input[type='checkbox']::after {
  position: absolute; top: 0.2rem; left: 0.2rem; width: 0.95rem; height: 0.95rem;
  border-radius: 999px; background: #fff; content: ''; transition: transform 0.15s ease;
}
.modal--bearbeiten .rechte-gruppe input[type='checkbox']:not(:checked) { background: var(--marke-linie); }
.modal--bearbeiten .rechte-gruppe input[type='checkbox']:checked::after { transform: translateX(1rem); }
.modal--bearbeiten .rechte-gruppe input[type='checkbox']:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.kontozugriff { flex-direction: row; justify-content: space-between; align-items: center; }
.kontozugriff h4 { margin: 0; font-size: 0.92rem; }
.kontozugriff p { max-width: 30rem; margin: 0.25rem 0 0; color: var(--marke-gedaempft); font-size: 0.84rem; }
.grant-editor--mitarbeiter { padding: 0; border: 1px solid var(--marke-linie); }
.grant-editor--mitarbeiter .feld-hinweis { margin-top: 0; }
.grant-kompakt-liste { display: grid; margin: 0 -1rem -1rem; }
.grant-kompakt-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; border-top: 1px solid var(--marke-linie);
}
.grant-kompakt-titel { font-weight: 500; }
.grant-kompakt-zeile p { margin: 0.15rem 0 0; color: var(--marke-gedaempft); font-size: 0.8rem; }
.grant-kompakt-zeile .zweitrangig { flex: none; margin: 0; }
.modal--anlegen .rechte-wahl { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.modal--anlegen .rechte-gruppe { display: contents; }
.modal--anlegen .rechte-gruppe-titel { display: none; }
.modal--anlegen .rechte-zeile {
  position: relative; margin: 0; padding: 0.55rem 0.8rem; border: 1px solid var(--marke-linie);
  border-radius: var(--rund-klein); background: #fff; cursor: pointer;
}
.modal--anlegen .rechte-zeile:has(input:checked) { border-color: var(--marke-dunkel); background: var(--marke-dunkel); color: #fff; }
.modal--anlegen .rechte-zeile:has(input:focus-visible) { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.modal--anlegen .rechte-zeile input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
@media (max-width: 767.98px) {
  .modal--bearbeiten { height: min(34rem, 92vh); }
  .mitarbeiter-dialog-rumpf { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mitarbeiter-dialog-navigation { grid-column: 1; grid-row: 1; flex-direction: row; overflow-x: auto; padding: 0.7rem; border-right: 0; border-bottom: 1px solid var(--marke-linie); }
  .mitarbeiter-dialog-navigation .modal-tab { width: auto; white-space: nowrap; }
  .mitarbeiter-dialog-rumpf > .modal-tab-inhalt { grid-column: 1; grid-row: 2; padding: 1rem; }
  .mitarbeiter-stammdaten { grid-template-columns: 1fr; gap: 0.15rem; }
  .mitarbeiter-stammdaten dt { padding-bottom: 0; border-bottom: 0; }
  .kontozugriff { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .formular-zeile { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .modal { width: calc(100vw - 1rem); max-height: 92vh; }
  .modal-inhalt { max-height: none; padding: 1rem; }
  .modal-kopf, .modal-fuss { padding-inline: 1rem; }
  .modal-tabs { overflow-x: auto; }
  .modal-tab { white-space: nowrap; }
  .modal .rechte-wahl, .modal--anlegen .rechte-wahl { grid-template-columns: 1fr; }
  .mandant-formular { flex-wrap: wrap; }
}

input, textarea, select {
  padding: 0.5rem 0.8rem; width: 100%; box-sizing: border-box;
  border: 1px solid var(--marke-linie); border-radius: var(--rund-klein); color: var(--marke-text);
  background: #fff;
}
/* Mehrzeilige Felder koennen keine Pille sein — dort die mittlere Rundung. */
textarea, select[size], select[multiple] { border-radius: var(--rund-klein); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--marke-blau); outline-offset: 1px; }
textarea { min-height: 6rem; }
fieldset {
  border: 0; border-radius: var(--rund); margin-bottom: 2rem;
  background: #fff; box-shadow: 0 1px 3px var(--marke-hauch);
  /* Ausdruecklich gesetzt statt der Browservorgabe (0.35em 0.75em 0.625em): die war je
     Kante anders und stimmte mit nichts sonst im Portal ueberein. */
  padding: 1.2rem 1.35rem;
}
.rechte-wahl { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.rechte-wahl label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.rechte-wahl input { width: auto; }
/* Rollenbündel als Eingabehilfe über den Rechte-Kästen — setzt nur die Kästen, die
   Auflösung macht der Server noch einmal. */
.buendel-wahl { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
/* Sperrzustand muss ohne Farbe erkennbar sein, deshalb Text und nicht nur ein Punkt. */
.konto-gesperrt {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a33;
  border: 1px solid #a33;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}
#detail { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--marke-linie); }
#einmalpasswort { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.fehler { color: #a33; font-weight: 500; }
.ok { color: #2a7a3d; font-weight: 500; }

/* ---------- Ordner (Passwort-Tresor, C11-bis) ----------
   Die Regeln fuer den Verwaltungsblock (Bestandsliste, Statusbadges, Vorratsliste)
   sind am 2026-08-05 mit ihm zusammen entfallen — die Ordneranlage laeuft seither ueber
   n8n, nicht mehr ueber diese Maske. Das Stilllegen ist am selben Tag zurueckgekehrt
   (eigener, schmaler Block weiter unten): es ist eine Entscheidung und kein Ereignis in
   DATEV, kann also von keiner Automatik uebernommen werden. */

/* Such-Dropdown je Konto: Auswahlliste waere bei vielen Ordnern (ein Ordner je Mandant)
   unbedienbar, deshalb Freitextsuche mit Treffern statt <select>. */
/* `position: relative` traegt die aufklappende Trefferliste darunter. Die feste Breite
   steht am Block, nicht am Eingabefeld: Feld, Pillen und Trefferliste sollen dieselbe
   Kante haben — vorher war das Feld 22rem breit und die Treffer standen als lose
   Textzeilen darunter in beliebiger Breite (FB, 2026-08-06). */
.ordner-dropdown { position: relative; max-width: 24rem; margin: 0.4rem 0 0.7rem; }
.ordner-freigeschaltet { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.ordner-freigeschaltet:empty::before { content: ''; }
/* Kein `margin-left` wie bei den uebrigen Badges: hier stehen die Pillen als eigene
   Reihe und sollen buendig unter dem Feld beginnen. */
.ordner-pille {
  background: var(--marke-blau); color: #fff;
  display: inline-flex; align-items: center; margin-left: 0; padding: 0.2rem 0.6rem;
}
.entfernen-x {
  border: 0; background: transparent; color: #fff; cursor: pointer;
  font: inherit; font-size: 0.9rem; padding: 0 0 0 0.35rem; margin: 0; line-height: 1;
}
.ordner-suche { max-width: 22rem; }
.ordner-dropdown .ordner-suche { max-width: none; }
.ordner-treffer { display: flex; flex-direction: column; align-items: flex-start; margin-top: 0.2rem; }

/* Aufklappende Liste — nur im Konto-Dropdown, nicht im Stilllegen-Block, wo die Treffer
   dauerhaft in der Karte stehen. `:not(:empty)` haelt sie unsichtbar, solange nichts
   gesucht wird: die Regeln greifen erst, wenn wirklich Zeilen darin stehen.
   `position: absolute`, damit das Aufklappen die Karte darunter nicht auseinanderschiebt. */
.ordner-dropdown .ordner-treffer:not(:empty) {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 0;
  padding: 0.3rem;
  border-radius: var(--rund-klein);
  background: #fff;
  /* Deutlicher als der Kartenschatten: das hier liegt ueber dem Inhalt und muss auch
     so aussehen, sonst wirkt es wie ein Teil der Karte, der verrutscht ist. */
  box-shadow: 0 8px 24px #020f1826, 0 0 0 1px var(--marke-linie);
  max-height: 16rem;
  overflow-y: auto;
}
/* Ganze Zeilen statt Textknoepfchen: hier wird eine Zeile ausgewaehlt, nicht ein Wort
   angeklickt — die Trefferflaeche soll so breit sein wie die Liste. */
.ordner-dropdown .ordner-treffer .leise {
  display: block; width: 100%; margin: 0; text-align: left;
  padding: 0.45rem 0.6rem; border-radius: var(--rund-klein);
  font-size: 0.88rem; color: var(--marke-text);
}
.ordner-dropdown .ordner-treffer .leise:hover { background: var(--marke-flaeche); }
/* „Keine passenden Ordner." — kein Treffer, also auch keine Zeile zum Anklicken. */
.ordner-dropdown .ordner-treffer .meta { padding: 0.45rem 0.6rem; }

/* Stilllegen: Bezeichnung und Schalter nebeneinander. Zeile statt Spalte, weil hier
   anders als beim Freischalten nicht die Bezeichnung allein, sondern das Paar aus
   Bezeichnung und Vorgang gelesen wird. */
.ordner-zeile { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.ordner-bezeichnung { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Beendete Sitzung. Bewusst am unteren Rand über die volle Breite und nicht als kleine
   Zeile im Inhalt: der bisherige Zustand — Portal offen, darunter ein unscheinbares
   „Kein Zugriff (HTTP 401)" — hat am 2026-08-02 dazu geführt, dass die beendete Sitzung
   erst beim manuellen Neuladen aufgefallen ist. Kein automatischer Sprung zum Login,
   damit ein angefangener Beitrag nicht verlorengeht. */
#sitzung-beendet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.25rem;
  background: #a33;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.25);
}
#sitzung-beendet button {
  background: #fff;
  color: #a33;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  width: auto;
}

/* ---------- Miro (eingebetteter Bereich) ----------
   Der Rahmen nimmt die Hoehe, die nach Kopfleiste und Seitenkopf uebrig ist — ein
   Whiteboard in Briefmarkengroesse waere der Grund, warum man es lieber verlinkt.
   `clamp` statt reinem `vh`: auf einem Laptop bleibt eine Mindesthoehe, auf einem
   27-Zoll-Monitor waechst der Rahmen nicht ins Absurde.
   `overflow: hidden` haelt Miros eigene Ecken innerhalb der Rundung. */
.miro-rahmen {
  height: clamp(26rem, calc(100vh - 15rem), 58rem);
  border: 1px solid var(--marke-linie);
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--marke-flaeche);
}
/* `display: block` gegen den Zeilenabstand, den ein iframe als Inline-Element sonst
   unter sich stehen laesst. */
.miro-rahmen iframe { display: block; width: 100%; height: 100%; border: 0; }
.miro-hinweis { margin-top: 0.7rem; }

/* Board-Wahl ueber dem Rahmen. Eine Zeile: Adresse, Anzeigen, ggf. Standard — die
   Meldung darunter nimmt die ganze Breite (`flex-basis: 100%`), damit sie die Knoepfe
   nicht auseinanderschiebt, wenn sie erscheint. */
.miro-wahl {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem; margin: 0 0 0.9rem;
}
.miro-wahl-feld {
  flex: 1 1 22rem; min-width: 0;
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9rem;
  border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  background: #fff; color: var(--marke-text);
}
.miro-wahl-feld:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -1px; }
.miro-wahl-fehler { flex-basis: 100%; margin: 0; font-size: 0.85rem; }

/* Merkliste: gemerkte Boards als Knopfpaare (Name + Entfernen). Das gerade gezeigte
   traegt die Markierung — dieselbe Logik wie beim aktiven Navigationspunkt, damit
   erkennbar bleibt, welcher Knopf dem Rahmen darunter entspricht. */
.miro-merkliste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.3rem 0 0.9rem; }
.miro-merk-eintrag {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--marke-linie); border-radius: 999px; background: #fff;
}
.miro-merk-eintrag.aktiv { border-color: var(--marke-blau); background: var(--marke-flaeche); }
.miro-merkliste button {
  margin: 0; border: 0; border-radius: 0; background: transparent;
  font-size: 0.85rem; font-weight: 400; color: var(--marke-text);
}
.miro-merk-name { padding: 0.25rem 0.2rem 0.25rem 0.7rem; max-width: 16rem; }
.miro-merk-eintrag.aktiv .miro-merk-name { color: var(--marke-blau); font-weight: 500; }
/* Das „×" ist kleiner und blasser als der Name: Entfernen ist die seltenere Handlung
   und soll nicht so aussehen wie das Anzeigen. */
.miro-merk-weg { padding: 0.25rem 0.6rem 0.25rem 0.35rem; color: var(--marke-gedaempft); }
.miro-merk-weg:hover { color: #a33; background: transparent; }

/* ---------- Kanzleihandbuch (Notion, read-only) ----------------------------
   ZIEL (FB, 2026-08-19): so nah an Notions LESEANSICHT wie moeglich, ohne den Editor
   nachzubauen. Die Masse hier sind bewusst Notions Masse, nicht die des uebrigen Portals:
   Cover ueber die volle Breite, Icon halb darueber, Titel gross, Lesespalte 46rem
   (Notion: 708 px) zentriert darunter. Nichts davon ist auf eine bestimmte Seite
   zugeschnitten — es gilt fuer jede Notion-Seite, die dieser Bereich laedt. */

/* Zwei Spalten: Navigation und Lesestrecke. Die Navigation ist die Zutat des Portals,
   nicht Teil der Notion-Seite — deshalb schmal (13rem) und EINKLAPPBAR: eingeklappt
   bleibt nur der Knopf stehen, und die Seite bekommt die Breite, die sie in Notion hat.
   Unter 60rem untereinander — dann ist die Navigation eine kurze Liste ueber dem Artikel,
   keine gequetschte Spalte. */
.hb-flaeche { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; }
.hb-flaeche-schmal { grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; }
.hb-flaeche-schmal .hb-navigation > *:not(.hb-nav-klapp) { display: none; }
@media (max-width: 1023.98px) {
  .hb-flaeche, .hb-flaeche-schmal { grid-template-columns: 1fr; gap: 1.2rem; }
  .hb-flaeche-schmal .hb-navigation > *:not(.hb-nav-klapp) { display: none; }
}

.hb-navigation { display: flex; flex-direction: column; gap: 0.15rem; align-self: start; }
.hb-nav-liste { display: flex; flex-direction: column; gap: 0.15rem; }
.hb-nav-eintrag {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.55rem; border-radius: var(--rund-klein);
  color: var(--marke-text); text-decoration: none; font-size: 0.85rem;
}
.hb-nav-eintrag:hover { background: var(--marke-hauch); }
.hb-nav-eintrag.aktiv { background: var(--marke-flaeche); font-weight: 500; }
.hb-nav-leer { color: var(--marke-gedaempft); font-size: 0.85rem; padding: 0.4rem 0.6rem; }
.hb-nav-klapp {
  align-self: flex-start; margin-bottom: 0.3rem;
  width: 1.7rem; height: 1.7rem; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--marke-linie);
  border-radius: var(--rund-klein); color: var(--marke-gedaempft);
  font: inherit; font-size: 0.85rem; line-height: 1;
}
.hb-nav-klapp:hover { background: var(--marke-flaeche); color: var(--marke-text); }
.hb-filter {
  margin: 0.5rem 0 0.4rem; padding: 0.35rem 0.55rem;
  border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  font: inherit; font-size: 0.85rem; width: 100%; box-sizing: border-box;
}
.hb-nav-symbol { flex: none; }
.hb-nav-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-artikel { min-width: 0; }
.hb-zurueck { margin-bottom: 0.8rem; }

/* ---------- Seitenkopf: Cover, Icon, Titel — Notions Anordnung ----------
   Cover: volle Breite der Lesefläche, KEIN Kartenlook (keine Rundung, kein Rahmen,
   kein Abstand) — in Notion ist es ein durchgehender Streifen. Hoehe mitwachsend wie
   dort (Notion: 30 vh), aber nach oben begrenzt, damit die Lesestrecke ueber dem Falz
   beginnt.
   Icon: eigene Zeile UEBER dem Titel und halb IM Cover — deshalb der negative Abstand,
   und deshalb nur dann, wenn ueberhaupt ein Cover da ist (`hb-kopf-mit-cover`). */
.hb-kopf { margin-bottom: 1.6rem; }
.hb-cover {
  display: block; width: 100%; height: clamp(7rem, 30vh, 18rem);
  object-fit: cover; border-radius: 0; background: var(--marke-flaeche);
}
/* Titelblock und Lesespalte teilen dieselbe Breite und dieselbe Mitte — in Notion stehen
   Icon, Titel und Text auf derselben linken Kante.
   70rem, nicht Notions Standard-46rem: die Handbuchseite ist in Notion auf VOLLBREITE
   gestellt, und genau daher kam der Groessenunterschied zur Portalansicht (FB 2026-08-19).
   Die Einstellung gibt die Notion-API nicht heraus, also ist es eine generische Wahl —
   keine Regel fuer eine bestimmte Seite. Nach oben gedeckelt, damit Fliesstext auf einem
   grossen Schirm nicht ueber die ganze Breite laeuft. */
.hb-kopf-block, .hb-inhalt { max-width: 70rem; margin-inline: auto; }
.hb-kopf-block { padding: 0 0.2rem; }
.hb-symbol { font-size: 4.875rem; line-height: 1; margin-bottom: 0.2rem; }
.hb-kopf-mit-cover .hb-symbol { margin-top: -2.6rem; }
.hb-kopf-mit-cover.hb-kopf-ohne-symbol .hb-kopf-block { padding-top: 1.8rem; }
.hb-symbol-bild { width: 4.875rem; height: 4.875rem; object-fit: contain; display: block; }
/* Kein `h1`: der gehoert der Portal-Kopfzeile (weisse Schrift auf dunklem Grund). Ein
   `h2` mit Notions Titelmassen — 40 px, fett, enge Zeile. */
.hb-seitentitel {
  margin: 0.1rem 0 0; font-size: 2.5rem; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--marke-text);
}
@media (max-width: 1023.98px) {
  .hb-cover { height: clamp(6rem, 20vh, 10rem); }
  .hb-symbol, .hb-symbol-bild { font-size: 3rem; width: 3rem; height: 3rem; }
  .hb-kopf-mit-cover .hb-symbol { margin-top: -1.6rem; }
  .hb-seitentitel { font-size: 1.8rem; }
}
.hb-laedt { color: var(--marke-gedaempft); }

/* ---------- Lesestrecke: Notions Typografie ----------
   Notion setzt 16 px auf 1.5 und haelt die Abstaende zwischen Bloecken sehr klein; die
   Ueberschriften tragen den Rhythmus, nicht die Absatzabstaende. Genau das war der
   sichtbarste Unterschied: vorher standen Absaetze zu locker und Ueberschriften zu klein. */
.hb-inhalt { line-height: 1.5; }

/* AP-A8-Nachtrag (FB 2026-09-07), gleicher Grundsatz wie auf der News-Detailseite:
   der Inhaltsbereich darf breit bleiben, die eigentliche Prosa bekommt eine stabile
   Lesebreite in `ch`. `.hb-inhalt` behaelt seine 70rem, weil Bild, Tabelle,
   Code-Block, Galerie, Inhaltsverzeichnis und Notions Spaltenblock sie brauchen —
   begrenzt wird nur, was gelesen wird. Kein Viewport-Sonderfall, keine neue
   Medienabfrage; derselbe Wert (70ch) wie bei News, damit im Blatt keine zweite
   Lesebreite entsteht.

   GRUND: gemessen am eigenen Kriterium von AP-A8 (~90 Zeichen) lagen bei 1920px
   Absatz 129, Liste 135, Zitat 129, Hinweiskasten 125 und Klappabschnitt 129 Zeichen
   je Zeile.

   ZWEI KAESTEN SIND MIT DABEI, obwohl sie Container sind: `.hb-hinweis` und
   `.hb-klapp` enthalten selbst Fliesstext, und ihre Prosa haengt nicht als direktes
   Kind an `.hb-inhalt`. Begrenzt wird jeweils der KASTEN, nicht sein Innenleben —
   sonst klebte der Text links in einer weiterhin breiten Flaeche.

   NICHT DABEI: `.hb-spalten` (Notions eigenes Spaltenverhaeltnis, dort messen die
   Spalten ohnehin nur rund 50 Zeichen), `.hb-tabelle` und `.hb-code` (eigene
   Rollbereiche, eine Verengung erzwaenge nur mehr seitliches Rollen), `.hb-bild`,
   `.hb-sammlung` und `.hb-toc`. */
.hb-inhalt > p,
.hb-inhalt > h2,
.hb-inhalt > h3,
.hb-inhalt > h4,
.hb-inhalt > h5,
.hb-inhalt > ul,
.hb-inhalt > ol,
.hb-inhalt > blockquote,
.hb-inhalt > hr,
.hb-inhalt > aside.hb-hinweis,
.hb-inhalt > details.hb-klapp {
  max-width: 70ch;
}

.hb-inhalt p { margin: 0.1rem 0 0.6rem; }
.hb-inhalt h2 { font-size: 1.875rem; font-weight: 500; line-height: 1.3; margin: 2rem 0 0.3rem; }
.hb-inhalt h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.3; margin: 1.75rem 0 0.25rem; }
.hb-inhalt h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin: 1.5rem 0 0.2rem; }
.hb-inhalt h5 { font-size: 1.05rem; font-weight: 500; margin: 1.3rem 0 0.2rem; }
.hb-inhalt > *:first-child { margin-top: 0; }
/* Notions Zitat: kraeftige Linie links, kein Kasten, keine Kursive. */
.hb-inhalt blockquote {
  margin: 1rem 0; padding-left: 0.9rem;
  border-left: 3px solid var(--marke-text);
}
.hb-inhalt blockquote > *:last-child { margin-bottom: 0; }
.hb-inhalt hr { border: 0; border-top: 1px solid var(--marke-linie); margin: 1.6rem 0; }
.hb-inhalt ul, .hb-inhalt ol { margin: 0.3rem 0 0.6rem; padding-left: 1.6rem; }
/* Verschachtelte Listen sind im Handbuch die Regel, nicht die Ausnahme (Probelauf
   2026-08-18). Deshalb enger gesetzt: sonst zerfaellt eine dreistufige Gliederung in
   Absaetze und liest sich nicht mehr als eine Gliederung. */
.hb-inhalt li > ul, .hb-inhalt li > ol { margin: 0.15rem 0 0.2rem; }
.hb-inhalt li { margin: 0.15rem 0; }
.hb-inhalt li > p { margin: 0; }
.hb-aufgabe { color: var(--marke-gedaempft-kraeftig); margin: 0.15rem 0; }

/* Callout: Notions farbige Kaesten werden zu EINEM ruhigen Kasten. Die Farbe traegt im
   Portal keine Bedeutung, und eine nachgebaute Notion-Palette waere Pflege ohne Nutzen.
   Wie in Notion ohne Randlinie — nur eine ruhige Flaeche mit Rundung. */
.hb-hinweis {
  margin: 1rem 0; padding: 1rem 1.1rem;
  background: var(--marke-flaeche); border-radius: var(--rund-klein);
}
.hb-hinweis > *:first-child { margin-top: 0; }
.hb-hinweis > *:last-child { margin-bottom: 0; }

/* Inhaltsverzeichnis eines Artikels — im Portal aus den Ueberschriften derselben Seite
   gebaut. In Notion ist es eine schlichte Linkliste ohne Kasten; genau so hier, sonst
   konkurriert es im zweispaltigen Kopf der Seite mit der Artikelgalerie daneben. */
.hb-toc { margin: 0.4rem 0 1.2rem; font-size: 0.95rem; }
.hb-toc ul { list-style: none; margin: 0; padding: 0; }
.hb-toc li { margin: 0.25rem 0; }
.hb-toc a { cursor: pointer; text-decoration: none; border-bottom: 1px solid var(--marke-linie); }
.hb-toc a:hover { border-bottom-color: var(--marke-text); }
.hb-toc-2 { padding-left: 1rem; }
.hb-toc-3 { padding-left: 2rem; }

/* Spaltenblock — wie in Notion nebeneinander. Die Anteile kommen als `--spalten` aus dem
   Renderer (Notions `ratio`). Unter 60rem untereinander: zwei Spalten in einer Lesespalte
   waeren schmaler als lesbar, und das Portal wird auch am Telefon geoeffnet. */
.hb-spalten { display: grid; grid-template-columns: var(--spalten, 1fr); gap: 2.5rem; margin: 0.6rem 0; }
.hb-spalten > div { min-width: 0; }
@media (max-width: 1023.98px) {
  .hb-spalten { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ---------- Artikelgalerie einer eingebetteten Notion-Datenbank ----------
   Notions Galerieansicht: Karte = Titelbild oben, darunter Symbol und Titel. Das Raster
   ist generisch (`auto-fill`), es zaehlt keine Karten und kennt keine Seite.
   Bilder: `loading="lazy"` im Renderer, feste Bildproportion hier — so entsteht kein
   Springen beim Nachladen, und der Browser holt nur die sichtbaren Karten. */
.hb-sammlung {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem; margin: 0.6rem 0 1.2rem;
  /* `align-items: start` gegen Grids Voreinstellung `stretch` (FB, 2026-08-20, live
     beobachtet): ohne das streckt jede Karte auf die Hoehe der hoechsten Karte IHRER
     eigenen Zeile — bei ungleich hohem Titeltext (ein-/zweizeilig durch `hyphens: auto`)
     entstand dadurch am unteren Kartenrand sichtbar leerer Freiraum, und Nachbarkarten in
     derselben Zeile wirkten "verbuggt" unterschiedlich hoch. Jede Karte behaelt jetzt
     ausschliesslich ihre eigene Hoehe (Bild fest per `aspect-ratio`, Titel auf zwei Zeilen
     begrenzt) — wie in Notions Galerie. */
  align-items: start;
}
/* Erscheint nur, wenn die Artikel an die Stelle einer VERKNUEPFTEN Ansicht gehaengt
   wurden (`router.ts`, `sammlungenFuer`). Notion gibt die Quelle einer verknuepften
   Ansicht nicht her — die Zuordnung ist eine Annahme, und die soll man sehen koennen.
   Zurueckhaltend gesetzt: eine Fussnote, keine Warnung. */
.hb-sammlung-quelle {
  margin: 0.6rem 0 -0.2rem; font-size: 0.8125rem; color: var(--marke-gedaempft);
}
/* ---------- Reihenfolge der Kacheln von Hand festlegen ----------
   Sichtbar nur fuer `admin.manage_accounts` (die Reihenfolge gilt fuer alle). Ein MODUS,
   nicht dauerhaft ziehbar: die Kacheln sind Links, und ohne die Trennung waere jeder
   zweite Klick auf einem Touchgerät ein Verschieben. */
.hb-sortierleiste {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0.8rem 0 0.2rem;
}
.hb-sortierknopf {
  border: 1px solid var(--marke-linie); background: #fff; color: var(--marke-text);
  border-radius: var(--rund-klein); padding: 0.3rem 0.7rem;
  font: inherit; font-size: 0.8rem; cursor: pointer;
}
.hb-sortierknopf:hover { border-color: var(--marke-blaugrau); }
.hb-sortierknopf-haupt { background: var(--marke-dunkel); color: #fff; border-color: transparent; }
.hb-sortierhinweis { font-size: 0.8rem; color: var(--marke-gedaempft); }
.hb-sortierfehler { font-size: 0.8rem; color: #a33; }
/* Im Sortiermodus ist die Kachel kein Link: der Zeiger sagt es, bevor jemand klickt. */
.hb-sammlung-sortieren .hb-karte { cursor: grab; }
.hb-sammlung-sortieren .hb-karte:active { cursor: grabbing; }
.hb-sammlung-sortieren { outline: 1px dashed var(--marke-blaugrau); outline-offset: 0.4rem; }
.hb-karte-zieht { opacity: 0.4; }

.hb-karte {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: #fff; border: 1px solid var(--kontur);
  border-radius: var(--rund-klein); color: var(--marke-text);
  box-shadow: var(--schatten-flaeche);
}
.hb-karte:hover { border-color: var(--marke-blaugrau); box-shadow: 0 2px 8px var(--marke-hauch); }
/* Seitenverhaeltnis auf dem BILD selbst, nicht auf der umschliessenden Flaeche mit einem
   `height: 100%`-Kind (FB, 2026-08-20, live beobachtet): in dieser Kombination — Flex-Kind
   in einer Spalten-Flexbox, die wiederum Gitter-Element ist — hielt sich das Seiten-
   verhaeltnis bei manchen Karten nicht, das Bild wuchs auf seine eigene, teils sehr
   grosse natuerliche Groesse. Ueberall sonst im Portal (`.news-eintrag-bild`,
   `.beitrag-titelbild`) steht `aspect-ratio` direkt am `<img>` — genau dieses Muster,
   nicht das genestete, hat sich bewaehrt. */
.hb-karte-bild {
  display: block;
  /* Die Flaeche unter dem Bild hat schon die Kartenfarbe — solange das Bild noch laedt,
     steht dort damit eine ruhige Flaeche und kein Loch (FB, 2026-08-20). */
  background: var(--marke-flaeche);
}
.hb-karte-bild img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  /* Sanft einblenden statt aufpoppen: die Bilder kommen bei `loading="lazy"` einzeln
     nach, und ein hartes Erscheinen wirkte beim Scrollen wie ein Neuaufbau der Galerie. */
  animation: hb-bild-auf 0.25s ease-out;
}
@keyframes hb-bild-auf { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hb-karte-bild img { animation: none; }
}
/* Ohne Titelbild bleibt in Notion eine leere Flaeche in derselben Hoehe stehen. Sie haelt
   denselben Platz frei wie ein Bild, damit eine Karte ohne Titelbild nicht kuerzer aussieht
   als ihre Nachbarn. Angeglichen werden die Kartenhoehen dabei NICHT — seit `align-items:
   start` an `.hb-sammlung` behaelt jede Karte ihre eigene Hoehe. */
.hb-karte-ohnebild { aspect-ratio: 3 / 2; background: var(--marke-flaeche); }
.hb-karte-fuss {
  display: flex; align-items: flex-start; gap: 0.4rem;
  padding: 0.6rem 0.7rem; font-size: 0.875rem; line-height: 1.3; font-weight: 500;
}
.hb-karte-symbol { flex: none; }
/* Wie in Notions Galerie: hoechstens zwei Zeilen Titel, danach abgeschnitten — sonst
   werden einzelne Karten doppelt so hoch wie ihre Nachbarn.
   `flex: 1 1 0`, nicht nur `min-width: 0` (FB, 2026-08-20, live beobachtet): ein Flex-Kind
   mit `display: -webkit-box` bekommt seine Breite sonst ueber dessen eigene intrinsische
   Groesse bestimmt, und die faellt fuer diese Box-Anzeigeart in Chromium/WebKit oft zu
   klein aus — ein zusammengesetztes deutsches Wort ohne Leerzeichen wurde dadurch mitten
   im Wort zerrissen, obwohl auf der Karte sichtbar Platz war. `flex: 1 1 0` gibt der Box
   von vornherein den fairen Anteil der Zeile, ohne diese Berechnung ueberhaupt zu brauchen.
   `hyphens: auto` + `lang="de"` am Kartenlink (renderer.ts) setzt, wo doch getrennt werden
   muss, einen echten Trennstrich statt eines rohen Bruchs. */
.hb-karte-titel {
  flex: 1 1 0; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  -webkit-hyphens: auto; hyphens: auto;
}

.hb-klapp { margin: 0.5rem 0; }
.hb-klapp > summary { cursor: pointer; font-weight: 500; padding: 0.15rem 0; }
.hb-klapp[open] > summary { margin-bottom: 0.3rem; }
.hb-code {
  background: var(--marke-flaeche); border-radius: var(--rund-klein);
  padding: 0.8rem 1rem; overflow-x: auto; font-size: 0.85rem;
}
/* Eigener Rollbereich, damit eine breite Tabelle die Seite nicht seitlich schiebt. */
.hb-tabelle { overflow-x: auto; margin: 1.1rem 0; }
.hb-tabelle table { border-collapse: collapse; font-size: 0.9rem; }
.hb-tabelle th, .hb-tabelle td {
  border: 1px solid var(--marke-linie); padding: 0.45rem 0.7rem; text-align: left;
  vertical-align: top;
}
.hb-tabelle th { background: var(--marke-flaeche); font-weight: 500; }

.hb-bild { margin: 1rem 0; }
.hb-bild img { max-width: 100%; height: auto; border-radius: var(--rund-klein); display: block; }
.hb-bild figcaption { font-size: 0.85rem; color: var(--marke-gedaempft); margin-top: 0.4rem; }
.hb-bild-fehlt p, .hb-nur-notion {
  color: var(--marke-gedaempft); font-size: 0.9rem;
  background: var(--marke-flaeche); border-radius: var(--rund-klein);
  padding: 0.6rem 0.9rem; margin: 1rem 0;
}
.hb-verweis { margin: 0.3rem 0; }

/* ---------- Personal: Tab-Leiste + Zweispalten-Karten ---------- */
.personal-tableiste {
  display: flex; width: max-content; max-width: 100%; gap: 2px;
  height: 2.4rem; box-sizing: border-box; overflow-x: auto;
  margin-bottom: 1.3rem; padding: 3px;
  border: 1px solid var(--marke-linie); border-radius: 8px;
  background: var(--marke-flaeche);
}
.personal-tab {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  padding: 0 0.75rem; border-radius: 5px;
  font-size: 0.86rem; color: var(--marke-gedaempft); text-decoration: none;
}
.personal-tab:hover { color: var(--marke-dunkel); background: #fff; }
.personal-tab.aktiv { color: var(--marke-dunkel); background: #fff; font-weight: 600; }
.personal-tab:focus-visible { outline: 2px solid var(--marke-dunkel); outline-offset: -2px; }

/* Eine Karte je Unterbereich, dieselbe Boxform wie `.arbeitskarte`/`.tabellen-flaeche`
   (Radius/Schatten aus denselben Tokens), aber als groesserer Inhaltsrahmen statt einer
   Dashboard-Kachel. Nur „Mein Bereich" hat ein Visual mit dieser Zweispaltigkeit —
   Team/Mitarbeiterverwaltung bleiben bewusst einspaltig (kein Visual dafuer vorhanden). */
.personal-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.1rem; align-items: stretch; }
.personal-karte {
  background: #fff; border-radius: var(--rund); box-shadow: var(--schatten-flaeche);
  padding: 1.3rem 1.4rem;
  height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
}
.personal-karte-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.75rem; margin-bottom: 1.1rem; }
/* In der schmaleren Spaltenkarte (personal-spalten teilt die Breite mit einer
   zweiten Karte) reicht der Platz neben der Kopfzeile nicht fuer „Aufwand erfassen"
   in einer Zeile — die volle Knopfhoehe brach in zwei Zeilen um und wurde dabei fast
   oval (Design-Gate-2-Fidelity-Pass, FB 2026-09-04, Fund beim Screenshot-Abgleich). */
.personal-karte-kopf button { flex: none; white-space: nowrap; }
.personal-karte-titel { margin: 0; font-size: var(--schrift-h3); color: var(--marke-dunkel); }
.personal-karte-untertitel { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--marke-gedaempft); }
.personal-karte > .tabellen-flaeche { margin-top: auto; }
.personal-kalender-flaeche { margin-top: 1.1rem; }
.personal-kalender { height: auto; }

.personal-kpi-zeile { display: flex; gap: 0.8rem; margin-bottom: 1.2rem; }
.personal-kpi-box {
  flex: 1; min-width: 0; border: 1px solid var(--marke-linie); border-radius: var(--rund-klein);
  padding: 0.85rem 1rem;
}
.personal-kpi-kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; color: var(--marke-blaugrau); }
.personal-kpi-sinnbild { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.personal-kpi-titel { font-size: 0.78rem; color: var(--marke-gedaempft); white-space: nowrap; }
.personal-kpi-wert { font-size: 1.25rem; font-weight: 500; color: var(--marke-dunkel); }
/* Die Spaltenkarte ist schmaler als die volle Inhaltsflaeche, fuer die
   `.tabelle`s Standardabstand (1.5rem je Zelle) bemessen ist — engerer Abstand hier
   haelt Zeitraum/Titel/Status bzw. Datum/Bereich/Taetigkeit/Dauer ohne Scrollbalken
   nebeneinander, ohne die App-weite `.tabelle`-Regel anzutasten. */
.personal-karte .tabelle th, .personal-karte .tabelle td { padding: 0.6rem 0.85rem; }

/* Team: die Ueberschrift bleibt unmittelbar bei ihrer Flaeche; zwischen den beiden
   Bereichen liegt derselbe Gruppenabstand wie unter der Personal-Tab-Leiste. */
.team-abschnitt + .team-abschnitt { margin-top: 1.3rem; }
.team-abschnitt .abschnitt-marke { margin: 0 0 0.7rem; }

/* ---------- Mein Bereich: Urlaub & Abwesenheit ---------- */
/* Dieselbe zusammenhaengende Segmentkarte wie die Attention-Leiste auf „Heute“, hier
   mit fuenf Werten fuer das Urlaubskonto — seit Design-Gate 2 (FB 2026-09-04) auch
   dieselbe Technik: automatisch passendes Raster statt einer festen Spaltenzahl, die
   1px-Luecke bildet die Trennlinien unabhaengig vom Umbruch (Konsistenz-Nachtrag zur
   Attention-Leiste, siehe deren Kommentar). */
.urlaubskonto-leiste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr));
  gap: 1px; border-radius: var(--rund-klein); background: var(--marke-linie); box-shadow: 0 1px 3px var(--marke-hauch);
  overflow: hidden; margin-bottom: 0.9rem;
}
.urlaubskonto-feld {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.7rem 0.55rem; background: #fff;
}
.urlaubskonto-feld-rest { background: var(--semantik-salbei-flaeche); }
.urlaubskonto-wert { font-size: 1.05rem; font-weight: 500; color: var(--marke-dunkel); line-height: 1.1; }
.urlaubskonto-feld-rest .urlaubskonto-wert { color: var(--semantik-salbei-text); }
/* Fuenf Felder in einer schmalen Kartenspalte (Personal, seit Design-Gate 2): Labels
   wie „Geplant / angefragt" duerfen umbrechen statt die Zelle zu sprengen. */
.urlaubskonto-titel { font-size: 0.68rem; color: var(--marke-gedaempft); line-height: 1.25; }

.status-geplant { background: var(--marke-flaeche); color: var(--marke-gedaempft); }
.status-angefragt { background: var(--status-warnung-flaeche); color: var(--status-warnung); }
.status-genehmigt { background: var(--semantik-salbei-flaeche); color: var(--semantik-salbei-text); }
/* 2026-09-06: abgelehnt und storniert sind eigene Endzustaende. Beide bewusst aus den
   bestehenden Tokens: abgelehnt in der Fehlerfarbe, storniert gedaempft wie geplant —
   ein Storno ist kein Fehler, sondern eine Ruecknahme. */
.status-abgelehnt { background: var(--status-fehler-flaeche); color: var(--status-fehler); }
.status-storniert { background: var(--marke-flaeche); color: var(--marke-gedaempft); }

/* ---------- Large-Desktop-Anpassung (ab 1600px) ----------
   FB 2026-09-04: auf einem 27-Zoll-Monitor blieb die Oberflaeche auf Laptop-Mass
   und liess sehr viel Weissraum stehen. Laptop/Tablet bleiben bewusst unveraendert
   (alles oben im Blatt greift dort unveraendert weiter) — erst ab ~1600px wachsen
   die Breiten-/Groessen-Tokens fluid mit `clamp()` statt eines pauschalen
   Zoomfaktors. Jeder clamp() ist als Gerade durch genau zwei Punkte gerechnet:
   bei 1600px identisch mit dem bisherigen Fixwert (kein Sprung an der Schwelle),
   bei ~2560px (27") am Zielwert — darueber hinaus wird nicht weiter gewachsen,
   damit ein noch groesserer/ultrabreiter Monitor nicht ausufert. Kartenanzahl,
   Grid-Struktur, Farben und Prosa-Zeilenlaenge (`--spalte`/`.block-inhalt`,
   bewusst NICHT hier angefasst) bleiben unangetastet — Lesbarkeit haengt an der
   Zeichenzahl je Zeile, nicht am Bildschirm. */
@media (min-width: 100rem) {
  :root {
    --leiste-breite: clamp(250px, 4.167vw + 11.458rem, 290px);
    --inhalt-breite: clamp(88rem, 51vw + 37rem, 119rem);
    --editor-breite: clamp(66rem, 20vw + 46rem, 78rem);
    --schrift-h1: clamp(2rem, 0.2vw + 1.8rem, 2.2rem);
    --schrift-h2: clamp(1.9rem, 0.2vw + 1.7rem, 2.1rem);
  }

  main { padding-inline: clamp(2.1rem, 1.17vw + 0.93rem, 2.8rem); }
  /* Gleicher Verlauf wie `main` darueber — sonst laufen die beiden Kanten oberhalb
     1600px wieder auseinander (AP-A8). Auf dem Wrapper, nicht auf #kopfleiste: s. dort. */
  .kopfleiste-innen { padding-inline: clamp(2.1rem, 1.17vw + 0.93rem, 2.8rem); }
  /* Sonst bleibt die Suchleiste ein schmaler Streifen in einer deutlich breiteren
     Systemleiste, waehrend Pilotmarke/Glocke/Benutzer rechts unveraendert bleiben
     (`margin-left: auto` traegt diese Gruppe ohnehin an den Rand). */
  #globale-suche { max-width: clamp(26rem, 10vw + 16rem, 32rem); }

  /* Dieselbe Segment-/Kartengeometrie, nur mit mehr Luft je Feld statt mehr
     Feldern — die Anzahl (vier Attention-Zaehler, drei Heute-Karten, drei
     News-Spalten) bleibt an den echten Inhalt gebunden, nicht an die Bildschirm-
     breite (Kommentare an .attention-leiste/.heute-karten/.news-karte-liste). */
  .arbeitskarte { padding: clamp(1.1rem, 0.5vw + 0.6rem, 1.4rem) clamp(1.2rem, 0.5vw + 0.7rem, 1.5rem); }
  .attention-zaehler, .news-spalte {
    padding: clamp(1.1rem, 0.5vw + 0.6rem, 1.4rem) clamp(1.25rem, 0.58vw + 0.67rem, 1.6rem);
  }
  .heute-karten { gap: clamp(0.8rem, 0.33vw + 0.47rem, 1rem); }
  .arbeitskarte-kopf h4 { font-size: clamp(0.95rem, 0.17vw + 0.78rem, 1.05rem); }
  .news-karte-kopf h3 { font-size: var(--schrift-abschnitt); }
}

/* ---------- News: Detail- und Redaktionsraster ----------
   Breite und Ausrichtung kommen seit AP-A8 aus `main` (s. HISTORIE dort) — hier steht
   das innere Raster mit flexibler Inhalts- und begrenzter Kontextspalte. */
main[data-modul='news'].news-detail-seite .seitenkopf[hidden] { display: none; }

/* ---------- News-Beitragsdetail ---------- */
.news-detail-seite .zurueck-knopf {
  margin: 0 0 1.6rem;
  font-size: 0.88rem;
}
.news-detail-seite .beitrag-flaeche {
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) var(--kontext-breite);
  gap: 2rem;

  align-items: start;
}
.news-detail-seite .beitrag-marken {
  gap: 0.55rem;
  margin-bottom: 0.45rem;
  align-items: center;
}
.news-detail-seite .beitrag-marken .badge { margin-left: 0; }
.news-detail-seite .beitrag-marken .thema-pille {
  padding-block: 0.11rem;
  border: 1px solid var(--kontur);
  background: var(--thema-flaeche, var(--marke-linie));
}
.news-detail-seite .beitrag-marken .badge.new {
  background: #edf3ff;
  color: var(--marke-blau);
}
.news-detail-seite .beitrag-marken .badge.pin {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.13rem;
  border: 1px solid #dce3e8;
  background: #fff;
  color: var(--marke-text);
}
.beitrag-pin-sinnbild {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.news-detail-seite .beitrag-kopf > .beitrag-titelzeile {
  margin: 0 0 0.25rem;
  max-width: 68rem;
  color: var(--marke-dunkel);
  font-size: clamp(1.75rem, 2.1vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.news-detail-seite .beitrag-untertitel {
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--marke-text);
  font-size: 1.05rem;
  line-height: 1.55;
}
.news-detail-seite .beitrag-kopf > .beitrag-meta {
  margin: 0 0 1rem;
  color: var(--marke-gedaempft);
  font-size: 0.88rem;
}
.news-detail-seite .beitrag-titelbild-rahmen {
  width: 100%;
  max-height: none;
  aspect-ratio: 2.85 / 1;
  margin: 0 0 1.7rem;
  border-radius: var(--rund-klein);
}
.news-detail-seite .beitrag-text {
  max-width: 72rem;
  color: var(--marke-text);
  font-size: 1rem;
  line-height: 1.68;
}
/* AP-A8-Nachtrag (FB 2026-09-07): Die Lesespalte traegt Prosa UND Medien. Die Spalte
   selbst bleibt bei 72rem, weil Bild, Video und Umfrage sie brauchen — begrenzt wird
   die eigentliche Prosa, und zwar in `ch`, also an der Zeichenzahl statt an der
   Bildschirmbreite. Das ist dieselbe Trennung, die der Editor mit `--spalte`
   (Fliesstext) und `--ausbruch` (Medien) bereits macht, nur hier auf der Leseseite.
   Kein Viewport-Sonderfall: eine Media Query waere an genau einer Breite richtig und
   an jeder anderen geraten.
   GRUND: gemessen erreichte der Fliesstext bei 1920px 116 und bei 2560px 131 Zeichen
   je Zeile, weil das 70/30-Raster die Spalte mitwachsen liess. Das eigene
   Large-Desktop-Abnahmekriterium von AP-A8 lag bei ~90. `ch` ist im Blatt bereits die
   Einheit fuer Lesebreiten (`88ch`, `78ch`, `52ch`).

   WARUM 70 UND NICHT 90: `ch` ist die Laufweite der Null, und die ist in Poppins
   breiter als das mittlere Zeichen eines deutschen Satzes samt Leerzeichen — gemessen
   ergeben 78ch rund 90 echte Zeichen (Faktor ~1.15). 78ch haetten also genau auf dem
   Kriterium gelegen, ohne Spielraum. 70ch ergeben gemessen rund 81 Zeichen und liegen
   damit im typografischen Optimum. Der Wert gilt an JEDER Breite gleich: das ist der
   Sinn der Zeichen-Einheit, die Zeile bleibt gleich lang, waehrend die Spalte um sie
   herum atmet. Ueberschriften bekommen ueber ihre eigene, groessere Schriftgroesse
   automatisch eine breitere Box bei gleicher Zeichenzahl — auch das ist `ch`, nicht
   Zufall. */
.news-detail-seite .beitrag-text > p,
.news-detail-seite .beitrag-text > h1,
.news-detail-seite .beitrag-text > h2,
.news-detail-seite .beitrag-text > h3,
.news-detail-seite .beitrag-text > h4,
.news-detail-seite .beitrag-text > h5,
.news-detail-seite .beitrag-text > h6,
.news-detail-seite .beitrag-text > ul,
.news-detail-seite .beitrag-text > ol,
.news-detail-seite .beitrag-text > blockquote,
.news-detail-seite .beitrag-text > hr {
  max-width: 70ch;
}
.news-detail-seite .beitrag-text p { margin: 0.9rem 0; }
.news-detail-seite .beitrag-text h2,
.news-detail-seite .beitrag-text h3 {
  color: var(--marke-dunkel);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.news-detail-seite .beitrag-text h2 {
  margin: 1.65rem 0 0.65rem;
  font-size: 1.35rem;
}
.news-detail-seite .beitrag-text h3 {
  margin: 1.5rem 0 0.55rem;
  font-size: 1.18rem;
}
.news-detail-seite .beitrag-text ul,
.news-detail-seite .beitrag-text ol {
  margin: 0.65rem 0 1rem;
  padding-left: 1.65rem;
}
.news-detail-seite .beitrag-text blockquote {
  margin: 1.2rem 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--marke-blaugrau);
  background: #fff;
}

.news-detail-seite .beitrag-kontextspalte {
  position: relative;
  align-self: start;
  gap: 1.25rem;
  padding: 0;
  border-left: 0;

  grid-column: 2;

  grid-row: 2;
}
.news-detail-seite .beitrag-anhaenge .abschnitt-marke {
  margin: 0 0 0.9rem;
  color: var(--marke-dunkel);
  font-size: 1.02rem;
  letter-spacing: 0;
  text-transform: none;
}
.news-detail-seite .beitrag-anhaenge .abschnitt-marke::after { display: none; }
.news-detail-seite .beitrag-kontextspalte > .beitrag-anhaenge { margin-bottom: 0.35rem; }
.news-detail-seite .beitrag-anhaenge .anhaenge-liste {
  gap: 0;
  border: 1px solid var(--kontur);
  border-radius: var(--rund);
  background: var(--flaeche-inhalt);

  overflow: hidden;
}
.news-detail-seite .beitrag-anhaenge .anhang-zeile {
  min-height: 4rem;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0;
  background: #fff;

  border-bottom: 1px solid var(--marke-linie);
}
.news-detail-seite .beitrag-anhaenge .anhang-typ {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 2.2rem;
  height: 2.6rem;
  padding: 0 0.25rem 0.32rem;
  border: 1.5px solid currentColor;
  border-radius: 0.22rem;
  background: transparent;
  font-size: 0.55rem;
  line-height: 1;
}
.news-detail-seite .beitrag-anhaenge .anhang-typ-pdf { color: #c92b28; }
.news-detail-seite .beitrag-anhaenge .anhang-typ-doc,
.news-detail-seite .beitrag-anhaenge .anhang-typ-docx { color: #2355a5; }
.news-detail-seite .beitrag-anhaenge .anhang-typ-xls,
.news-detail-seite .beitrag-anhaenge .anhang-typ-xlsx { color: #347151; }
.news-detail-seite .beitrag-anhaenge .anhang-name {
  color: var(--marke-dunkel);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.news-detail-seite .beitrag-anhaenge .anhang-name:hover { text-decoration: underline; }
.news-detail-seite .beitrag-anhaenge .anhang-groesse {
  font-size: 0.8rem;
  color: var(--marke-gedaempft);
}
.news-detail-seite .beitrag-merken {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0.9rem 0.2rem 0.25rem;
  border-top: 1px solid var(--marke-linie);
  border-radius: 0;
  color: var(--marke-dunkel);
  font-size: 0.82rem;
  font-weight: 400;
  text-align: left;
}
.news-detail-seite .beitrag-merken-sinnbild {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.news-detail-seite .beitrag-merken-aktiv { color: var(--marke-blau); font-weight: 400; }

/* ---------- News-Editor ---------- */
.news-editor-seite .redaktion-leiste {
  position: static;
  display: flex;
  max-width: none;
  margin: 0 0 1rem;
  padding: 0;
  background: transparent;
}
.news-editor-seite .redaktion-leiste .zurueck-knopf {
  margin: 0 0 0.2rem;
  font-size: 0.86rem;
}
.news-editor-seite .redaktion-kopf-hauptzeile { align-items: center; }
.news-editor-seite .redaktion-titel {
  font-size: var(--schrift-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.news-editor-seite .redaktion-kopf-aktionen { gap: 0.85rem; }
.news-editor-seite .redaktion-aktionen { gap: 0.5rem; }
.news-editor-seite .redaktion-leiste .speicherstand {
  max-width: 13.5rem;
  font-size: var(--schrift-klein);
  line-height: 1.35;
}
.news-editor-seite .redaktion-aktionen > button {
  margin-right: 0;
  padding: 0.35rem 0.95rem;
  font-size: 0.88rem;
}
.news-editor-seite .beitragsflaeche {
  --spalte: 100%;
  --ausbruch: 100%;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.5rem;
  grid-template-columns: minmax(0, 1fr) var(--kontext-breite);
  gap: 2rem;
  border: 1px solid #dfe5e9;
  border-radius: var(--rund);
  box-shadow: 0 2px 7px var(--marke-hauch);
}
.news-editor-seite .beitrag-editor-spalte { gap: 1.25rem; }
.news-editor-seite .beitrag-kontextspalte { gap: 1rem; }
.news-editor-seite .beitrag-titelfeld {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  max-width: none;
  margin: 0;
}
.news-editor-seite .beitrag-feldlabel,
.news-editor-seite .beitrag-editor-label {
  display: block;
  margin: 0;
  color: var(--marke-text);
  font-size: var(--schrift-bedienung);
  font-weight: 500;
  line-height: 1.35;

  margin-top: 0;

  margin-bottom: 0;
}
.news-editor-seite .beitrag-titel,
.news-editor-seite .beitrag-untertitel {
  width: 100%;
  border: 1px solid #d7dfe5;
  border-radius: var(--rund-klein);
  background: #fff;

  min-height: var(--bedienhoehe);
}
.news-editor-seite .beitrag-titel {
  min-height: 3.5rem;
  padding: 0.4rem 0.75rem;
  font-size: clamp(1.5rem, 1.8vw, 2rem);
  line-height: 1.25;
}
.news-editor-seite .beitrag-untertitel {
  min-height: 2.35rem;
  padding: 0.42rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
.news-editor-seite .beitrag-titel:focus-visible,
.news-editor-seite .beitrag-untertitel:focus-visible {
  outline: 2px solid var(--marke-blau);
  outline-offset: 1px;
  border-radius: var(--rund-klein);
}
.news-editor-seite .beitrag-kopf-trenner { display: none; }
.news-editor-seite .beitrag-titelbild-label { margin-top: 0; margin-bottom: 0; }
.news-editor-seite .beitrag-editor-spalte > .beitrag-titelbild-bereich { gap: 0; }
.news-editor-seite .titelbild-dropzone {
  min-height: 6.35rem;
  max-width: none;
  gap: 0.3rem;
  padding: 1.15rem 1.25rem;
  border-color: #cad5dd;
}
.news-editor-seite .titelbild-dropzone-sinnbild { width: 26px; height: 26px; }
.news-editor-seite .titelbild-dropzone-text {
  color: var(--marke-text);
  font-size: 0.88rem;
  font-weight: 500;
}
.news-editor-seite .titelbild-dropzone-hinweis { font-size: 0.73rem; }
.news-editor-seite .titelbild-pruefend,
.news-editor-seite .titelbild-flaeche { max-width: none; }
.news-editor-seite .titelbild-editor { display: flex; flex-direction: column; gap: 0.7rem; }
.news-editor-seite .titelbild-editor-flaeche {
  aspect-ratio: 2.85 / 1;
  cursor: grab;
  touch-action: none;
}
.news-editor-seite .titelbild-editor-flaeche .titelbild-vorschau { aspect-ratio: auto; background: transparent; }
.news-editor-seite .titelbild-steuerung { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.news-editor-seite .titelbild-steuerung .titelbild-modus-aktiv { background: var(--marke-blau); border-color: var(--marke-blau); color: #fff; }
.news-editor-seite .titelbild-zoom { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--marke-gedaempft); font-size: 0.82rem; }
.news-editor-seite .titelbild-zoom input { width: 8rem; }
.news-editor-seite .titelbild-zoom-wert { min-width: 2.9rem; color: var(--marke-text); font-variant-numeric: tabular-nums; }
.news-editor-seite .titelbild-hinweis { margin: -0.15rem 0 0; color: var(--marke-gedaempft); font-size: 0.78rem; }
.news-editor-seite .beitrag-editor-label { margin-top: 0.15rem; margin-bottom: -0.62rem; }

.news-editor-seite .bloecke-liste {
  display: flex;
  flex-direction: column;
  min-height: 16.5rem;
  border: 1px solid #d7dfe5;
  border-radius: var(--rund-klein);
  background: #fff;
  overflow: visible;
}
.news-editor-seite .werkzeugleiste-dauerhaft {
  flex-wrap: nowrap;
  gap: 0.2rem;
  margin: 0;
  padding: 0.4rem;
  border-bottom: 1px solid var(--marke-linie);
  border-radius: var(--rund-klein) var(--rund-klein) 0 0;
  background: var(--marke-flaeche);
  overflow-x: auto;
}
.news-editor-seite .werkzeug-absatz {
  min-width: 6.6rem;
  padding: 0.26rem 0.5rem;
  font-size: 0.78rem;
}
.news-editor-seite .werkzeug-trenner { margin: 0.2rem 0.22rem; }
.news-editor-seite .werkzeug-knopf { width: 2.25rem; height: 2.25rem; }
.news-editor-seite .block-zaehler {
  flex: 1;
  min-height: 12.65rem;
  padding: 0.65rem 0.85rem 0;
}
.news-editor-seite .block-inhalt { max-width: 70ch; }
.news-editor-seite .block-zeile-erstschreiben .block-text { min-height: 8.9rem; }
.news-editor-seite .block-zeile-erstschreiben .block-text-leer::before {
  font-size: 0.94rem;
  color: var(--marke-blaugrau);
}
.news-editor-seite .block-einfuegen-menue .aktionsmenue-knopf {
  padding: 0.2rem 0.35rem;
  background: transparent;
  color: var(--marke-gedaempft);
  font-size: 0.78rem;
  font-weight: 400;
}
.news-editor-seite .wortzaehler-zeile {
  flex: none;
  margin: auto 0 0;
  padding: 0.35rem 0.85rem 0.65rem;
}

.news-editor-seite .beitrag-dateien { margin-top: 0.7rem; }
.news-editor-seite .beitrag-dateien-trenner { margin-bottom: 1rem; }
.news-editor-seite .beitrag-dateien-titel { margin-bottom: 0.75rem; }
.news-editor-seite .beitrag-dateien-dropzone {
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  border-color: #cad5dd;
}
.news-editor-seite .beitrag-dateien-dropzone-sinnbild { width: 25px; height: 25px; }
.news-editor-seite .beitrag-dateien-dropzone-text {
  color: var(--marke-text);
  font-size: 0.86rem;
  font-weight: 500;
}
.news-editor-seite .beitrag-dateien-grenzen { margin-top: 0.45rem; line-height: 1.45; }

.news-editor-seite .beitrag-veroeffentlichung,
.news-editor-seite .beitrag-informationen {
  gap: 0.85rem;
  padding: 1.25rem;
  border: 0;
  border-radius: var(--rund);
  box-shadow: none;

  background: var(--marke-flaeche);
}
.news-editor-seite .beitrag-veroeffentlichung .abschnitt-marke,
.news-editor-seite .beitrag-informationen .abschnitt-marke {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--marke-linie);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}
.news-editor-seite .beitrag-veroeffentlichung .abschnitt-marke::after,
.news-editor-seite .beitrag-informationen .abschnitt-marke::after { display: none; }
.news-editor-seite .beitrag-metalabel { font-size: 0.7rem; }
.news-editor-seite .beitrag-veroeffentlichung .beitrag-metafeld { gap: 0.25rem; }
.news-editor-seite .beitrag-thema,
.news-editor-seite .beitrag-planung {
  width: 100%;
  min-height: 2.55rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid #d7dfe5;
  border-radius: var(--rund-klein);
  font-size: 0.86rem;
}
.news-editor-seite .beitrag-metafeld .news-status {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}
.news-editor-seite .beitrag-pin-feld {
  padding: 0.75rem 0;
  border-top: 1px solid var(--marke-linie);
  border-bottom: 1px solid var(--marke-linie);
}
.news-editor-seite .beitrag-pin-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  cursor: pointer;
}
.news-editor-seite .beitrag-pin-text { display: flex; flex-direction: column; gap: 0.15rem; }
.news-editor-seite .beitrag-pin-titel { color: var(--marke-dunkel); font-size: 0.85rem; font-weight: 500; }
.news-editor-seite .beitrag-pin-hinweis { color: var(--marke-gedaempft); font-size: 0.72rem; line-height: 1.4; }
.news-editor-seite .beitrag-pin-zeile input {
  appearance: none;
  flex: none;
  width: 2.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #bdc7cf;
  cursor: pointer;
  transition: background 0.15s ease;
}
.news-editor-seite .beitrag-pin-zeile input::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0.17rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px #020f1826;
  transition: transform 0.15s ease;
}
.news-editor-seite .beitrag-pin-zeile input:checked { background: var(--marke-blau); }
.news-editor-seite .beitrag-pin-zeile input:checked::before { transform: translateX(1rem); }
.news-editor-seite .beitrag-pin-zeile input:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; }
.news-editor-seite .beitrag-pin-zeile input:disabled {
  background: #c8d0d6;
  cursor: not-allowed;
}
.news-editor-seite .beitrag-informationen .beitrag-metafeld {
  display: grid;
  grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  color: var(--marke-text);
  font-size: 0.8rem;
}
.news-editor-seite .beitrag-informationen .beitrag-metalabel {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.78rem;
  font-weight: 400;
}

@media (max-width: 1280px) {
  .news-detail-seite .beitrag-flaeche,
  .news-editor-seite .beitragsflaeche {
    grid-template-columns: 1fr;
  }
  .news-detail-seite .beitrag-kontextspalte {
    align-self: start;
    padding: 0;
    border-left: 0;
  }
  .news-detail-seite .beitrag-anhaenge .anhaenge-liste {
    display: flex;
  }
}

@media (max-width: 767.98px) {
  .news-detail-seite .beitrag-kopf > .beitrag-titelzeile { font-size: 1.75rem; }
  .news-detail-seite .beitrag-titelbild-rahmen { aspect-ratio: 16 / 9; }
  .news-editor-seite .redaktion-kopf-hauptzeile { align-items: flex-start; }
  .news-editor-seite .redaktion-kopf-aktionen {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .news-editor-seite .beitragsflaeche { padding: 0.8rem; }
  .news-editor-seite .beitrag-titel { font-size: 1.5rem; }
}

/* ---------- Kalender ---------- */
.kalender-verbindung {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--marke-linie);
}
.kalender-verbindung .arbeitskarte-hinweis { flex: 1; min-width: 14rem; }
.kalender-agenda { display: flex; flex-direction: column; gap: 1.2rem; }
.kalender-tag .abschnitt-marke { margin-bottom: 0.5rem; }
.kalender-abgesagt { color: var(--marke-gedaempft); text-decoration: line-through; }
.kalender-fehlerhinweis { color: var(--status-fehler); }

/* ---------- Posteingang (AP-2.10) ----------
   Master und Detail sind eine gemeinsame Arbeitskarte. Die generischen Klassennamen
   aus dem freigegebenen Entwurf bleiben im DOM lesbar, alle Regeln sind aber an den
   Posteingang gebunden, damit `.liste`, `.detail` oder `.kopf` keine anderen Module
   beeinflussen. */
.posteingang-meldungen:not(:empty) { margin-bottom: 1rem; }
.posteingang-master-detail {
  display: grid;
  grid-template-columns: minmax(18rem, 23rem) minmax(22rem, 1fr);
  gap: 1px;
  min-height: 34rem;
  height: min(40rem, calc(100vh - 12rem));
  overflow: hidden;
  border-radius: var(--rund);
  background: var(--marke-linie);
  box-shadow: 0 1px 3px var(--marke-hauch);
}
.posteingang-master-detail .liste,
.posteingang-master-detail .detail {
  min-width: 0;
  min-height: 0;
  background: #fff;
}
.posteingang-master-detail .liste {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.posteingang-master-detail .liste-kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--marke-linie);
  background: #fff;
}
.posteingang-master-detail .liste-kopf > span:first-child {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--marke-gedaempft-kraeftig);
}
.posteingang-master-detail .liste-zaehler {
  flex: none;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--marke-blau);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.posteingang-master-detail .liste-zaehler.inaktiv { background: var(--marke-gedaempft); }
.posteingang-master-detail .eintrag {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-bottom: 1px solid var(--marke-linie);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.posteingang-master-detail .eintrag:hover { background: var(--marke-flaeche); }
.posteingang-master-detail .eintrag.aktiv {
  background: var(--status-info-flaeche);
  box-shadow: inset 3px 0 0 var(--marke-blau);
}
.posteingang-master-detail .eintrag:focus-visible {
  position: relative;
  outline: 2px solid var(--marke-blau);
  outline-offset: -2px;
}
.posteingang-master-detail .eintrag-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.posteingang-master-detail .eintrag-titel {
  color: var(--marke-dunkel);
  font-size: 0.92rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.posteingang-master-detail .eintrag-zeit {
  flex: none;
  color: var(--marke-gedaempft);
  font-size: 0.72rem;
  white-space: nowrap;
}
.posteingang-master-detail .eintrag-mandant {
  margin: 0.15rem 0 0.4rem;
  color: var(--marke-blaugrau);
  font-size: 0.78rem;
}
.posteingang-master-detail .eintrag-vorschau {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--marke-gedaempft-kraeftig);
  font-size: 0.83rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.posteingang-master-detail .eintrag.ungelesen .eintrag-vorschau {
  color: var(--marke-text);
  font-weight: 500;
}
.posteingang-master-detail .eintrag-fuss {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.posteingang-master-detail .eintrag-fuss .badge {
  margin: 0;
  padding: 0.15rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.posteingang-master-detail .badge.offen {
  background: var(--status-warnung-flaeche);
  color: var(--status-warnung);
}
.posteingang-master-detail .badge.bearbeitet {
  background: var(--marke-flaeche);
  color: var(--marke-gedaempft-kraeftig);
}
.posteingang-master-detail .punkt-ungelesen {
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-radius: 999px;
  background: var(--marke-blau);
}
.posteingang-master-detail .anzahl-nachrichten {
  margin-left: auto;
  color: var(--marke-gedaempft);
  font-size: 0.72rem;
}
.posteingang-master-detail .posteingang-ladehinweis,
.posteingang-master-detail .detail-ladehinweis {
  margin: auto;
  padding: 2rem;
}
.posteingang-master-detail .liste > .fehler,
.posteingang-master-detail .detail > .fehler {
  margin: auto;
  padding: 2rem;
}
.posteingang-master-detail .leer-liste {
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--marke-gedaempft);
}
.posteingang-master-detail .leer-liste p { max-width: 30ch; }
.posteingang-master-detail .leer-liste-sinnbild {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--marke-blaugrau);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.posteingang-master-detail .detail {
  display: flex;
  flex-direction: column;
}
.posteingang-master-detail .detail-hinweis {
  margin: auto;
  padding: 2rem;
  color: var(--marke-gedaempft);
  font-size: 0.9rem;
  text-align: center;
}
.posteingang-master-detail .detail-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--marke-linie);
}
.posteingang-master-detail .detail-kopftext { min-width: 0; }
.posteingang-master-detail .detail-kopf h3 {
  margin: 0 0 0.3rem;
  color: var(--marke-dunkel);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.posteingang-master-detail .detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--marke-gedaempft);
  font-size: 0.78rem;
}
.posteingang-master-detail .detail-meta .trenner { opacity: 0.5; }
.posteingang-master-detail .detail-aktionen {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}
.posteingang-master-detail .icon-knopf {
  margin: 0;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
.posteingang-master-detail .icon-knopf.hervorgehoben {
  border-color: var(--marke-blau);
  color: var(--marke-blau);
}
.posteingang-master-detail .verlauf {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
  padding: 1.4rem;
  overflow-y: auto;
}
.posteingang-master-detail .verlauf > .arbeitskarte-hinweis,
.posteingang-master-detail .verlauf > .fehler { margin: auto; }
.posteingang-master-detail .verlauf > .leerzustand {
  margin: auto;
  align-items: center;
  text-align: center;
}
.posteingang-master-detail .nachricht {
  max-width: 78%;
  padding: 0.75rem 1rem;
  border-radius: var(--rund-klein);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.posteingang-master-detail .nachricht .kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
}
.posteingang-master-detail .nachricht .autor { font-weight: 500; }
.posteingang-master-detail .nachricht .zeit { color: var(--marke-gedaempft); }
.posteingang-master-detail .nachricht .etikett {
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.posteingang-master-detail .nachricht.intern {
  align-self: flex-start;
  border: 1px dashed #d8b789;
  background: var(--status-warnung-flaeche);
}
.posteingang-master-detail .nachricht.intern .autor,
.posteingang-master-detail .nachricht.intern .etikett { color: var(--status-warnung); }
.posteingang-master-detail .nachricht.mandant {
  align-self: flex-end;
  background: var(--status-info-flaeche);
}
.posteingang-master-detail .nachricht.mandant .autor,
.posteingang-master-detail .nachricht.mandant .etikett { color: var(--marke-blau); }
.posteingang-master-detail .nachricht.zurueckgezogen {
  border: 1px dashed var(--marke-linie);
  background: var(--marke-flaeche);
}
.posteingang-master-detail .nachricht.zurueckgezogen p {
  color: var(--marke-gedaempft-kraeftig);
  font-style: italic;
}
.posteingang-master-detail .nachricht p { margin: 0; }
.posteingang-master-detail .lesestatus {
  margin-left: auto;
  color: var(--marke-gedaempft);
  font-size: 0.68rem;
  white-space: nowrap;
}
.posteingang-master-detail .lesestatus::before {
  content: '✓';
  margin-right: 0.2rem;
}
.posteingang-master-detail .lesestatus.ungelesen { color: var(--marke-blau); }
.posteingang-master-detail .lesestatus.ungelesen::before { content: '●'; }

.posteingang-master-detail .compose {
  padding: 1rem 1.4rem 1.3rem;
  border-top: 1px solid var(--marke-linie);
}
.posteingang-master-detail .compose-wahl {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.posteingang-master-detail .compose-wahl button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.45rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--marke-linie);
  border-radius: var(--rund-klein);
  background: #fff;
  color: var(--marke-gedaempft-kraeftig);
  font-size: 0.85rem;
}
.posteingang-master-detail .compose-wahl button.aktiv.mandant {
  border-color: var(--marke-blau);
  background: var(--status-info-flaeche);
  color: var(--marke-blau);
}
.posteingang-master-detail .compose-wahl button.aktiv.intern {
  border-color: var(--status-warnung);
  background: var(--status-warnung-flaeche);
  color: var(--status-warnung);
}
.posteingang-master-detail .compose-feld {
  min-height: 4.5rem;
  padding: 0.75rem 0.9rem;
  resize: vertical;
  border-radius: var(--rund-klein);
  background: var(--marke-flaeche);
  font-size: 0.9rem;
}
.posteingang-master-detail .compose-meldung {
  min-height: 1.2rem;
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
}
.posteingang-master-detail .compose-meldung:empty { min-height: 0; }
.posteingang-master-detail .compose-meldung.fehler { color: var(--status-fehler); }
.posteingang-master-detail .compose-fuss {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.7rem;
}
.posteingang-master-detail .compose-senden { margin: 0; }

@media (max-width: 767.98px) {
  .posteingang-master-detail {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .posteingang-master-detail .liste { max-height: 20rem; }
  .posteingang-master-detail .detail { min-height: 34rem; }
  .posteingang-master-detail .detail-kopf { flex-direction: column; }
  .posteingang-master-detail .detail-aktionen { justify-content: flex-start; }
  .posteingang-master-detail .nachricht { max-width: 92%; }
}

@media (max-width: 600px) {
  .posteingang-master-detail .detail-kopf,
  .posteingang-master-detail .verlauf,
  .posteingang-master-detail .compose { padding-left: 1rem; padding-right: 1rem; }
  .posteingang-master-detail .detail-aktionen,
  .posteingang-master-detail .detail-aktionen .icon-knopf { width: 100%; }
  .posteingang-master-detail .compose-wahl { flex-direction: column; }
}

/* ---------- Mandantenarbeit: Vorgangsdetail (AP-2.10) ---------- */
.vorgang-detail {
  overflow: hidden;
  border: 1px solid var(--kontur);
  border-radius: var(--rund);
  background: var(--marke-flaeche);
  box-shadow: var(--schatten-flaeche);
}
.vorgang-detail-kopf { padding: 1.5rem 2rem 1.15rem; }
.vorgang-detail-pfad {
  margin: 0 0 0.5rem;
  color: var(--marke-blaugrau);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.vorgang-detail-titelzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.vorgang-detail-titelzeile h3 {
  margin: 0;
  color: var(--marke-dunkel);
  font-size: 1.55rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.vorgang-detail-kopfaktionen { display: flex; flex: none; gap: 0.6rem; }
.vorgang-detail-kopfaktionen button { margin: 0; white-space: nowrap; }
.vorgang-detail-metazeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}
.vorgang-detail-chip {
  display: inline-block;
  max-width: 100%;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--marke-flaeche);
  color: var(--marke-gedaempft-kraeftig);
  font-size: 0.75rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.vorgang-detail-chip.status {
  background: var(--status-info-flaeche);
  color: var(--status-info);
}
.vorgang-detail-beschreibung {
  max-width: 72ch;
  margin: 0.8rem 0 0;
  color: var(--marke-gedaempft-kraeftig);
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.vorgang-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem);
  align-items: start;
  gap: 1.1rem;
  padding: 0 1.5rem 1.5rem;
}
.vorgang-detail-karte {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--rund);
  background: #fff;
  box-shadow: 0 1px 3px var(--marke-hauch);
}
.vorgang-detail-kartenkopf {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.4rem;
  padding: 0.85rem 1.3rem;
  border-bottom: 1px solid var(--marke-linie);
}
.vorgang-detail-kartenkopf h4 {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--marke-dunkel);
  font-size: 0.98rem;
}
.vorgang-detail-zahl {
  flex: none;
  color: var(--marke-gedaempft);
  font-size: 0.76rem;
  white-space: nowrap;
}
.vorgang-detail-kartenaktion {
  flex: none;
  margin: 0;
  white-space: nowrap;
}
.vorgang-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Kommunikation bleibt der hochfrequente Hauptbereich: ein Strom, darunter die
   beiden klar getrennten Schreibmodi. */
.vorgang-detail-verlauf {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-height: 28rem;
  overflow-y: auto;
  padding: 1.3rem;
}
.vorgang-detail-nachricht {
  max-width: 82%;
  padding: 0.75rem 1rem;
  border-radius: var(--rund-klein);
  background: var(--marke-flaeche);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.vorgang-detail-nachricht.mandant {
  align-self: flex-end;
  background: var(--status-info-flaeche);
}
.vorgang-detail-nachricht.intern {
  align-self: flex-start;
  border: 1px dashed #d8b789;
  background: var(--status-warnung-flaeche);
}
.vorgang-detail-nachricht.zurueckgezogen { opacity: 0.72; }
.vorgang-detail-nachricht-kopf {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
  font-size: 0.71rem;
  flex-wrap: wrap;
}
.vorgang-detail-nachricht-etikett {
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vorgang-detail-nachricht.intern .vorgang-detail-nachricht-etikett,
.vorgang-detail-nachricht.intern .vorgang-detail-nachricht-autor {
  color: var(--status-warnung);
}
.vorgang-detail-nachricht.mandant .vorgang-detail-nachricht-etikett,
.vorgang-detail-nachricht.mandant .vorgang-detail-nachricht-autor {
  color: var(--status-info);
}
.vorgang-detail-nachricht-autor { font-weight: 500; }
.vorgang-detail-nachricht-zeit { color: var(--marke-gedaempft); }
.vorgang-detail-nachricht > p { margin: 0; white-space: pre-wrap; }
.vorgang-detail-nachricht > .vorgang-detail-nachricht-bezug {
  margin-top: 0.4rem;
  color: var(--marke-gedaempft-kraeftig);
  font-size: 0.72rem;
}
.vorgang-detail-compose {
  padding: 1rem 1.3rem 1.3rem;
  border-top: 1px solid var(--marke-linie);
}
.vorgang-detail-compose-wahl { display: flex; gap: 0.6rem; margin-bottom: 0.8rem; }
.vorgang-detail-compose-wahl button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--marke-linie);
  border-radius: var(--rund-klein);
  background: #fff;
  color: var(--marke-gedaempft-kraeftig);
  font-size: 0.84rem;
}
.vorgang-detail-compose-wahl button.aktiv.mandant {
  border-color: var(--status-info);
  background: var(--status-info-flaeche);
  color: var(--status-info);
}
.vorgang-detail-compose-wahl button.aktiv.intern {
  border-color: var(--status-warnung);
  background: var(--status-warnung-flaeche);
  color: var(--status-warnung);
}
.vorgang-detail-compose-feld {
  min-height: 5rem;
  resize: vertical;
  border: 1px solid var(--marke-linie);
  border-radius: var(--rund-klein);
  background: var(--marke-flaeche);
  color: var(--marke-text);
  font-size: 0.88rem;
}
.vorgang-detail-compose-feld:focus-visible {
  outline: 2px solid var(--marke-blau);
  outline-offset: 1px;
}
.vorgang-detail-formularmeldung {
  margin: 0.55rem 0 0;
  color: var(--status-fehler);
  font-size: 0.82rem;
}
.vorgang-detail-formularmeldung:empty { display: none; }
.vorgang-detail-compose-fuss { display: flex; justify-content: flex-end; margin-top: 0.65rem; }
.vorgang-detail-compose-fuss button { margin: 0; }

/* Kurze, nur lesende Kontextlisten in der rechten Spalte. */
.vorgang-detail-kv-liste {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 1rem 1.3rem;
}
.vorgang-detail-kv-zeile {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.83rem;
}
.vorgang-detail-kv-zeile dt { margin: 0; color: var(--marke-gedaempft); }
.vorgang-detail-kv-zeile dd {
  margin: 0;
  color: var(--marke-text);
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.vorgang-detail-listeneintrag {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 1.3rem;
  border-bottom: 1px solid var(--marke-linie);
  font-size: 0.83rem;
}
.vorgang-detail-listeneintrag:last-child { border-bottom: 0; }
.vorgang-detail-listeneintrag-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.vorgang-detail-listeneintrag-titel {
  min-width: 0;
  color: var(--marke-dunkel);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.vorgang-detail-listeneintrag-meta {
  color: var(--marke-gedaempft);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.vorgang-detail-badge {
  flex: none;
  max-width: 66%;
  padding: 0.13rem 0.5rem;
  border-radius: 999px;
  background: var(--marke-flaeche);
  color: var(--marke-gedaempft-kraeftig);
  font-size: 0.67rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}
.vorgang-detail-badge.warnung {
  background: var(--status-warnung-flaeche);
  color: var(--status-warnung);
}
.vorgang-detail-badge.fehler {
  background: var(--status-fehler-flaeche);
  color: var(--status-fehler);
}
.vorgang-detail-badge.info {
  background: var(--status-info-flaeche);
  color: var(--status-info);
}
.vorgang-detail-badge.erfolg {
  background: var(--status-erfolg-flaeche);
  color: var(--status-erfolg);
}
.vorgang-detail-leerhinweis {
  margin: 0;
  padding: 0.9rem 1.3rem;
  color: var(--marke-gedaempft);
  font-size: 0.82rem;
}
.feld-gruppe[hidden] { display: none; }

@media (max-width: 980px) {
  .vorgang-detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vorgang-detail-kopf { padding: 1.2rem 1rem 1rem; }
  .vorgang-detail-layout { padding: 0 0.75rem 0.75rem; }
  .vorgang-detail-titelzeile h3 { font-size: 1.3rem; }
  .vorgang-detail-kopfaktionen,
  .vorgang-detail-kopfaktionen button { width: 100%; }
  .vorgang-detail-compose-wahl { flex-direction: column; }
  .vorgang-detail-nachricht { max-width: 94%; }
  .vorgang-detail-kartenkopf { flex-wrap: wrap; }
  .vorgang-detail-kartenaktion { margin-left: 0; }
  .vorgang-detail-listeneintrag-kopf { align-items: flex-start; flex-direction: column; }
  .vorgang-detail-badge { max-width: 100%; text-align: left; }
}

/* ---------- Gemeinsame UI-Muster: Layout-Ergaenzungen ----------
   Die Grundregeln stehen bei ihren Komponenten. Hier nur neue gemeinsame Muster
   und die dazugehoerigen responsiven Ausnahmen. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--marke-blau);
  outline-offset: 3px;
}
#seitenleiste :focus-visible { outline-color: var(--marke-blau); }
:where(button)[aria-busy='true'] { cursor: progress; }
:where(input, textarea, select) { border-radius: var(--rund-klein); }
:where(input, textarea)::placeholder { font-style: normal; }
:where(.feld-gruppe) > :is(input:not([type='checkbox']):not([type='radio']), select) {
  min-height: var(--bedienhoehe);
  border-color: var(--kontur);
  font-size: var(--schrift-bedienung);
}
:where(.werkzeug-knopf, .block-griff, .block-einfuegen, .aktionsmenue-knopf) { min-height: 0; }
#navigation > .nav-buendel { margin-top: 0.5rem; }
.nav-platzhalter .nav-zusatz { color: inherit; }
#benutzer-kreis { width: 2rem; height: 2rem; }
.kopfleiste-rechts { gap: 1.25rem; }
#globale-suche input { min-height: 2.5rem; }
.schnellzugriff-pfeil { margin-left: auto; color: var(--marke-blau); }
.news-spalte .meta { font-size: var(--schrift-klein); }
.news-spalte:hover { background: var(--marke-flaeche); }
.schnellzugriff-eintrag, .news-spalte { overflow-wrap: anywhere; }

/* Ein semantischer Artikel: Kopf in der ersten, Inhalt/Kontext in der zweiten Zeile.
   Die Vorschau verwendet dieselbe news-detail-seite-Klasse und denselben Renderer. */
.beitrag-kopf { grid-column: 1 / -1; min-width: 0; }
.beitrag-kopf .beitrag-titelzeile { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.beitrag-detail { grid-column: 1; grid-row: 2; }
.news-detail-seite .beitrag-flaeche.beitrag-ohne-kontext { grid-template-columns: minmax(0, 1fr); }
.news-detail-seite .beitrag-kopf > .beitrag-meta { margin: 0.75rem 0 0; }
.news-detail-seite .beitrag-kopf > .beitrag-merken {
  width: auto; margin: 0.75rem 0 0; padding: 0.4rem 0.65rem;
  border: 1px solid var(--kontur); border-radius: var(--rund-klein);
}
.news-detail-seite .beitrag-titelbild { border-radius: var(--rund); }
.news-detail-seite .beitrag-anhaenge .anhang-zeile:last-child { border-bottom: 0; }
.news-detail-seite .beitrag-merken-aktiv { background: var(--flaeche-akzent); }
.news-detail-seite .beitrag-kopf { max-width: 75rem; }

/* Schreibwerkzeuge bleiben kompakt, Formularaktionen teilen die normale Hoehe. */
.news-editor-seite .redaktion-aktionen > button { min-height: var(--bedienhoehe); }
.news-editor-seite .werkzeug-knopf { min-height: 2.25rem; border-radius: var(--rund-klein); }
.news-editor-seite .werkzeug-knopf:is(.aktiv, [aria-pressed='true']) {
  color: var(--marke-blau); background: var(--flaeche-akzent);
}
.news-editor-seite :is(.beitrag-metalabel, .titelbild-dropzone-hinweis,
  .beitrag-pin-hinweis, .beitrag-dateien-grenzen) { font-size: 0.8125rem; }
.news-editor-seite .block-inhalt { width: 100%; }
.news-editor-seite .block-inhalt.block-bild,
.news-editor-seite .block-inhalt.block-video,
.news-editor-seite .block-inhalt.block-umfrage { max-width: 100%; }
.news-editor-seite .beitrag-veroeffentlichung :is(select, input:not([type='checkbox'])) {
  min-height: var(--bedienhoehe);
}

/* Fachansichten behalten ihre Dichte, teilen aber Kanten und Bedienelemente. */
.personal-karte { border: 1px solid var(--kontur); padding: var(--abstand-gruppe); }
.personal-karte--urlaub { border-top-color: var(--semantik-salbei-flaeche); }
.personal-karte-kopf { grid-template-columns: minmax(0, 1fr) auto; gap: var(--abstand); }
.personal-karte-titel { font-size: var(--schrift-h3); }
.personal-karte-untertitel, .personal-kpi-titel { font-size: var(--schrift-bedienung); }
.personal-kpi-wert { font-size: 1.5rem; }
.personal-kpi-zeile { flex-wrap: wrap; }
.personal-kpi-box { flex-basis: 8rem; }
.personal-spalten { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--abstand-gruppe); }
.personal-tableiste { flex-wrap: wrap; }
.hb-nav-eintrag { font-size: var(--schrift-bedienung); border-radius: var(--rund-klein); }
.hb-nav-eintrag.aktiv { background: var(--flaeche-akzent); color: var(--marke-blau); }
.hb-karte { border-radius: var(--rund); }
.schublade-kopf, .schublade-inhalt, .schublade-fuss { padding: var(--abstand-gruppe); }
.schublade-fuss { gap: 0.75rem; flex-wrap: wrap; }
.aktionsmenue-liste { border-radius: var(--rund); }
.posteingang-master-detail { border-radius: var(--rund); box-shadow: var(--schatten-flaeche); }
.posteingang-master-detail .eintrag.aktiv { background: var(--flaeche-akzent); }
.posteingang-master-detail .liste-kopf > span:first-child { font-size: var(--schrift-bedienung); }
.vorgang-detail-pfad { color: var(--marke-gedaempft); font-size: var(--schrift-klein); }
.vorgang-detail-titelzeile h3 { font-size: 1.75rem; }
:where(.leerzustand, .news-leer) { border: 1px solid var(--kontur); box-shadow: var(--schatten-flaeche); }

@media (max-width: 1280px) {
  .news-detail-seite .beitrag-kontextspalte { grid-column: 1; grid-row: 3; }
  .news-editor-seite .beitragsflaeche { gap: 1.5rem; }
}
@media (max-width: 767.98px) {
  .start-kopf-gruss, #modul-titel, .news-editor-seite .redaktion-titel { font-size: 1.65rem; }
  .news-eintrag-featured-ohne-bild { padding: 1.25rem; }
  .news-eintrag-featured-ohne-bild .news-eintrag-titel { font-size: 1.4rem; }
  .news-eintrag-fuss-zeile { flex-wrap: wrap; }
  .news-spalte, .arbeitskarte { padding: 1.25rem; }
  .tabelle th, .tabelle td { padding: 0.75rem; }
  .vorgang-detail-kopf { padding: 1.25rem; }
  .vorgang-detail-titelzeile h3 { font-size: 1.4rem; }
  .schublade-kopf, .schublade-inhalt, .schublade-fuss { padding: 1.25rem; }
  .kopfleiste-rechts { gap: 0.5rem; }
  .news-editor-seite .beitrag-kontextspalte { width: 100%; }
}
@media (max-width: 480px) {
  .personal-karte-kopf { grid-template-columns: 1fr; }
  .personal-karte-kopf button { justify-self: start; }
}

/* AP3.2-D: nur die Dokumentseite betreffend — kompakte zweispaltige Filterzeile
   (Mandant/Fachbereich, je als beschriftetes `.feld-gruppe`-Feld wie in
   `mitarbeiter.js`), die auf schmalen Viewports untereinander stapelt, plus die
   beiden Textbausteine der Dokumentspalte. Keine globalen Layoutregeln, keine
   Aenderung an anderen Mandantenarbeitsseiten. */
.dokumente-filterzeile {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.dokumente-filterzeile .feld-gruppe {
  flex: 1 1 16rem;
  min-width: 12rem;
}
@media (max-width: 767.98px) {
  .dokumente-filterzeile { flex-direction: column; }
  .dokumente-filterzeile .feld-gruppe { width: 100%; }
}
.dokument-titel { font-weight: 500; color: var(--marke-dunkel); }
.dokument-dms-pille {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--marke-linie);
  color: var(--marke-gedaempft);
  font-size: 0.75rem;
}