/* PLENUM — style.css. Baut die Komponenten aus DESIGN-SPEZ.md Abschnitt 5 auf tokens.css auf. */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-ubuntu);
  font-size: calc(var(--t-body) * var(--textgroesse-skala));
  line-height: var(--t-body-lh);
  min-height: 100vh;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--fokus-innen), 0 0 0 5px var(--fokus-aussen);
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--volt-gelb-flaeche); color: var(--volt-gelb-schrift); padding: 10px 16px;
  border-radius: var(--r-etikett); font-weight: 500; text-decoration: none;
  transition: top var(--dur-schnell) var(--kurve);
}
.skip-link:focus { top: 8px; }

/* ---------- Bayern-Ecke (Hintergrund-Signatur, Rautenflagge) ---------- */
/* Zusatzauftrag Gero 31.08.2026: sehr zurueckhaltendes Eckelement, hinter allem Inhalt
   (z-index -1, body-Hintergrund bleibt darunter sichtbar wo nichts abdeckt), keine
   Zeigerereignisse, kein Recolor der Flagge. Oben rechts statt unten rechts, weil unten
   rechts auf den meisten Screens von der sticky .aktionsleiste ueberdeckt wuerde. */
.bayern-ecke {
  position: fixed; top: 0; right: 0; z-index: -1;
  width: 200px; height: 200px;
  background-image: url('bayern-rauten.svg');
  background-size: cover; background-position: top right; background-repeat: no-repeat;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: .1;
  pointer-events: none;
}
@media (min-width: 768px) {
  .bayern-ecke { width: 320px; height: 320px; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .bayern-ecke { opacity: .16; }
}
:root:is([data-theme="sepia"],[data-theme="salbei"],[data-theme="warmgrau"]) .bayern-ecke { opacity: .16; }

.versal {
  font-family: var(--schrift-ubuntu); font-weight: 500;
  font-size: calc(var(--t-xs) * var(--textgroesse-skala));
  letter-spacing: 0.07em; text-transform: uppercase;
}
.mono { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }
.tabnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.bereich { padding-inline: 20px; }
.bereich-innen { max-width: 1120px; margin-inline: auto; }
.text-max { max-width: 66ch; }
main[data-screen] { display: block; }
main[hidden] { display: none !important; }
.abschnitt { margin-top: var(--abschnitt-abstand); }
.abschnitt:first-child { margin-top: 0; }
.abschnitt-titel {
  font-family: var(--schrift-ubuntu); font-weight: 500;
  font-size: calc(var(--t-h3) * var(--textgroesse-skala)); line-height: var(--t-h3-lh);
  color: var(--tinte); margin: var(--sp-48) 0 var(--sp-24);
}
.abschnitt:first-child > .abschnitt-titel { margin-top: 0; }

/* ---------- 21-Grad-Streifen ---------- */
.streifen {
  height: 3px; width: 100%;
  background-image: repeating-linear-gradient(21deg, var(--volt-violett-flaeche) 0 8px, transparent 8px 16px);
  opacity: .7;
}

/* ---------- Demo-Banner ----------
   Revision 31.08.2026 (Entruempelung): eine schmale Zeile statt eines dreisatzigen Blocks,
   rechts ein 44-px-Ziel zum Wegklicken. Die lange Fassung steht im Fuss. */
.demo-banner {
  background: var(--volt-gelb-flaeche); color: var(--volt-gelb-schrift);
  font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(14px * var(--textgroesse-skala));
  padding: 0 8px 0 20px; border-radius: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 36px;
}
.demo-banner[hidden] { display: none; }
.demo-banner__text { flex: 1 1 auto; padding: 6px 0; }
.demo-banner__zu {
  position: relative;
  flex: none; width: 44px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--volt-gelb-schrift); cursor: pointer;
  font-size: calc(15px * var(--textgroesse-skala)); line-height: 1; border-radius: var(--r-etikett);
}
/* DESIGN-SPEZ 4.6: sichtbar 36 px hoch wie die Bannerzeile, Trefferflaeche 44 px ueber ::before,
   statt die Zeile fuer den Schliessknopf aufzublaehen. */
.demo-banner__zu::before { content: ""; position: absolute; inset: -4px 0; min-height: 44px; }
.demo-banner__zu:hover { background: rgba(0,0,0,.12); }

/* ---------- Sektionsnavigation ---------- */
.subnav {
  display: flex; align-items: stretch; gap: 8px; padding: 10px 20px;
  border-bottom: 1px solid var(--linie-hair);
}
.subnav__intern {
  display: flex; gap: 4px; overflow-x: auto; flex: 1 1 auto; min-width: 0;
  -webkit-overflow-scrolling: touch;
}
.subnav__link {
  flex: none; padding: 8px 12px; min-height: 44px; display: flex; align-items: center;
  font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(13px * var(--textgroesse-skala));
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinte-2); text-decoration: none; border-bottom: 2px solid transparent;
  border-radius: var(--r-etikett) var(--r-etikett) 0 0;
}
.subnav__link[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--volt-violett-text); }
.subnav__link--forum {
  flex: none; color: var(--volt-hellblau);
  border-left: 1px solid var(--linie-hair); padding-left: 12px; margin-left: 4px;
}
.extern-pfeil { font-size: .85em; margin-left: 4px; }

/* F5: Scroll-Affordanz fuer horizontal scrollbare Leisten (Subnav). Maskiert den rechten
   Rand statt einer Fläche zu ueberlagern. scroll-fade--ende (app.js pruefeScrollFade)
   schaltet die Maske ab, sobald das Ende erreicht ist.
   Das Phasenband braucht das seit der Neugestaltung 31.08.2026 nicht mehr: fuenf Punkte in
   gleich breiten Spalten passen ohne Scroll in jede Breite ab 320 px, siehe .phasenreise
   weiter unten. */
.subnav__intern {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.subnav__intern.scroll-fade--ende {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------- Typografie ---------- */
.h1 {
  font-family: var(--schrift-serif); font-weight: 600;
  font-size: calc(var(--t-h1) * var(--textgroesse-skala)); line-height: var(--t-h1-lh);
  letter-spacing: -0.01em; color: var(--tinte); margin: 0 0 var(--sp-12);
}
.zaehler { font-family: var(--schrift-ubuntu); color: var(--tinte-2); font-size: calc(var(--t-m) * var(--textgroesse-skala)); font-weight: 400; }
.h2 { font-family: var(--schrift-serif); font-weight: 600; font-size: calc(var(--t-h2) * var(--textgroesse-skala)); line-height: var(--t-h2-lh); letter-spacing: -0.01em; color: var(--tinte); margin: 0 0 var(--sp-8); }
.statuszeile { font-family: var(--schrift-ubuntu); font-size: calc(var(--t-s) * var(--textgroesse-skala)); line-height: var(--t-s-lh); color: var(--tinte-2); margin: 0 0 var(--sp-8); }
.statuszeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.statuszeile__trenn { color: var(--tinte-2); }
/* Vor dem Frist-kritisch-Chip entfaellt der Mittelpunkt: er bricht sonst als einzelnes
   Zeichen in die Zeile davor und liest sich als Tippfehler (Sichtung 31.08.2026). */
.statuszeile__trenn:has(+ .frist-kritisch-chip) { display: none; }
.kennung { font-family: var(--schrift-mono); font-size: calc(13px * var(--textgroesse-skala)); letter-spacing: 0.04em; color: var(--tinte-2); }
.lese { font-family: var(--schrift-serif); font-size: calc(var(--t-lese) * var(--textgroesse-skala)); line-height: var(--t-lese-lh); color: var(--tinte); }
.lese p { margin: 0 0 1.5em; }

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r-knopf);
  font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(var(--t-m) * var(--textgroesse-skala));
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
}
.knopf--primaer { background: var(--volt-violett-flaeche); color: #fff; border-color: var(--volt-violett-text); }
.knopf--sekundaer { background: transparent; color: var(--tinte); border-color: var(--linie-tragend); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.hinweis-inline { font-size: calc(var(--t-s) * var(--textgroesse-skala)); color: var(--tinte-2); margin-top: var(--sp-8); }

/* ---------- Aktionsleiste ---------- */
.aktionsleiste {
  position: sticky; bottom: 0; z-index: 15;
  background: var(--bogen); border-top: 1px solid var(--linie-hair);
  display: flex; gap: 12px; padding: 8px 20px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  min-height: 64px; align-items: center;
}
.aktionsleiste .knopf { flex: 1 1 auto; }

/* F8: die sticky Leiste nimmt keinen Platz im Fluss ein, ohne Reserve am Listenende
   ueberlagert sie dauerhaft die letzte sichtbare Karte (Sichtungsbefund 31.08.2026, Mobil 390px).
   Nur unter 1024px: ab da wandert die Leiste in die Metaspalte (6.3) und ist unten nicht mehr angedockt. */
@media (max-width: 1023.98px) {
  main[data-screen="threads"] > .bereich-innen,
  main[data-screen="thread"] > .bereich-innen,
  main[data-screen="system"] > .bereich-innen,
  main[data-screen="werkzeuge"] > .bereich-innen {
    padding-bottom: calc(64px + max(8px, env(safe-area-inset-bottom)) + 16px);
  }
}

/* Wasserzeichen Themenliste (Registereintrag-Entwurf volt-logo, PLENUM-Nachtbau 02.09.2026):
   dezentes Volt-Zeichen im Hintergrund der Themen-Ansicht. mask-image nutzt nur den Alphakanal
   von volt-logo.svg, die Farbe kommt aus --volt-violett-text und zieht mit jeder Lesefarbe um.
   Deckkraft 7% ruehrt den Kontrast der Karten-Texte nicht an: die Karten selbst tragen eine
   deckende Flaeche (--bogen), das Zeichen scheint nur in den Zwischenraeumen und im freien Rand
   durch. position: fixed statt an den (viel laengeren) Listenbereich gehaengt, sonst waere das
   Zeichen bei zehn Vorgaengen erst nach dem Scrollen bis ganz nach unten zu sehen; so bleibt es
   waehrend des Scrollens ruhig an derselben Stelle stehen, ohne selbst zu scrollen oder eine
   eigene Scrollspur zu erzeugen. pointer-events: none laesst Klicks und Wischen ungehindert
   durch, kein Einfluss auf die Scrollposition der Liste darunter. */
.themen-wasserzeichen {
  position: fixed; right: 12px; bottom: max(76px, calc(64px + env(safe-area-inset-bottom) + 12px));
  z-index: 0; width: min(40vw, 320px); aspect-ratio: 230 / 96;
  background-color: var(--volt-violett-text);
  -webkit-mask: url(volt-logo.svg) no-repeat center / contain;
  mask: url(volt-logo.svg) no-repeat center / contain;
  opacity: .07; pointer-events: none;
}
main[data-screen="threads"] > .bereich-innen { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .themen-wasserzeichen { bottom: 24px; }
}

/* ---------- Thread-Karte ---------- */
.vorgangsliste { display: flex; flex-direction: column; gap: 16px; }
.vorgang-karte {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--bogen); border-radius: var(--r-karte);
  padding: var(--karte-innen); padding-left: calc(var(--karte-innen) + 3px);
  min-height: 88px; border: 0;
  border-left: 3px solid var(--phase-farbe, var(--linie-tragend));
  cursor: pointer;
}
.vorgang-karte:hover { background: var(--hoch); }
.vorgang-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-12); flex-wrap: wrap; }
.vorgang-karte__typ { font-family: var(--schrift-ubuntu); font-size: calc(13px * var(--textgroesse-skala)); color: var(--tinte-2); }
/* Kopfzeilen-Nachtrag (PLENUM-Nachtbau 02.09.2026, Aufgabe 2): der Titel stand bisher hinter
   drei bzw. vier Zeilen und einer Ellipse, ein langer Titel war in der Liste nie ganz zu lesen.
   Jetzt bricht er so oft um, wie er muss; die Karte wird dafuer hoeher statt den Titel zu kappen. */
.vorgang-karte__titel {
  font-family: var(--schrift-serif); font-weight: 600; color: var(--tinte);
  font-size: calc(var(--t-h2) * var(--textgroesse-skala)); line-height: var(--t-h2-lh);
  margin: 0 0 var(--sp-8);
}

/* Anriss: am Handy bleibt die Liste knapp, am Bildschirm traegt die Kachel zwei Saetze. */
.vorgang-karte__anriss {
  display: none;
  font-family: var(--schrift-serif);
  font-size: calc(var(--t-m) * var(--textgroesse-skala)); line-height: 1.5;
  color: var(--tinte-2); margin: 0 0 var(--sp-12);
}

/* ---------- Vorgangsliste am Bildschirm: Kacheln statt Langliste (01.09.2026) ----------
   Ueber die volle Breite gezogen wird jede Karte ein Plakat, zehn davon sind eine Rolle.
   Ab 768 px stehen sie deshalb als Raster, mit Anriss, und der oberste Vorgang bekommt
   die doppelte Spalte. Sortiert wird weiter nach Dringlichkeit, oben steht also das,
   was als naechstes faellig ist. Unter 768 px bleibt alles wie es war. */
@media (min-width: 768px) {
  .vorgangsliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .vorgang-karte { display: flex; flex-direction: column; height: 100%; }
  .vorgang-karte__anriss { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .vorgang-karte .statuszeile { margin-top: auto; margin-bottom: 0; }
  /* In der Kachel traegt der Titel nicht mehr den Grad der Langliste: bei 360 px Spalte
     schiebt --t-h2 vier Zeilen auf und drueckt die Reihe auseinander. Die Leitkachel
     unten behaelt ihren grossen Grad, daran haengt die Rangfolge. */
  .vorgang-karte__titel {
    font-size: calc(var(--t-h3) * var(--textgroesse-skala)); line-height: var(--t-h3-lh);
  }
}
@media (min-width: 1024px) {
  .vorgangsliste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vorgangsliste > .vorgang-karte:first-child { grid-column: span 2; }
  .vorgangsliste > .vorgang-karte:first-child .vorgang-karte__titel {
    font-size: calc(var(--t-h1) * var(--textgroesse-skala)); line-height: var(--t-h1-lh);
  }
  .vorgangsliste > .vorgang-karte:first-child .vorgang-karte__anriss {
    font-size: calc(var(--t-lese) * var(--textgroesse-skala)); -webkit-line-clamp: 3;
  }
}

/* Die Gegenpositions-Zeile steht bei den Rollen, weil sie eine Rolle betrifft, und traegt
   solange die Frist-Farbe, wie der Vorgang noch nicht abstimmen darf. Gelb und nicht rot:
   es ist eine offene Aufgabe, kein Fehler. */
.gegenposition-zeile--offen .rollen-zeile__person { color: var(--volt-gelb); }
.gegenposition-zeile--offen { border-left: 2px solid var(--volt-gelb); padding-left: 10px; margin-left: -12px; }

/* ---------- Stellen-Antworten (Prototyp, 01.09.2026) ----------
   Jeder Satz ist ein Knopf, sieht aber im Ruhezustand aus wie Text: eine Seite voller
   erkennbarer Knoepfe waere unlesbar. Erst beim Ueberfahren zeigt sich, dass hier etwas
   geht, und ein Satz mit Antworten traegt dauerhaft eine feine Unterlinie samt Zahl.
   Das folgt der Bewegungsregel aus Eintrag 41: die Marke zeigt einen Zustand und blinkt nicht. */
.satz {
  display: inline; background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: 2px; transition: background-color var(--dur-schnell) var(--kurve);
}
.satz:hover { background: color-mix(in srgb, var(--volt-violett-text) 16%, transparent); }
.satz:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--fokus-innen), 0 0 0 5px var(--fokus-aussen); }
.satz--beantwortet {
  text-decoration: underline var(--volt-violett-text) 2px; text-underline-offset: 4px;
}
.satz--fokus { background: color-mix(in srgb, var(--volt-violett-text) 22%, transparent); }
.satz__marke {
  font-family: var(--schrift-mono); font-size: .68em; margin-left: 2px;
  color: var(--volt-violett-text); font-variant-numeric: tabular-nums;
}

.stellen-feld {
  margin-top: var(--sp-16); padding: var(--sp-16);
  background: var(--einschub); border-radius: var(--r-einschub);
  border-left: 3px solid var(--volt-violett-text);
  display: flex; flex-direction: column; gap: 10px;
}
.stellen-feld__zitat {
  margin: 0; font-family: var(--schrift-serif); font-style: italic;
  font-size: calc(var(--t-s) * var(--textgroesse-skala)); color: var(--tinte-2);
  border-left: 2px solid var(--linie-tragend); padding-left: 10px;
}
.stellen-feld__eingabe {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: var(--grund); color: var(--tinte);
  border: 1px solid var(--linie-tragend); border-radius: var(--r-eingabe);
  font-family: var(--schrift-ubuntu); font-size: calc(var(--t-m) * var(--textgroesse-skala));
  line-height: 1.5; resize: vertical;
}
.stellen-feld--zu-kurz .stellen-feld__eingabe { border-color: var(--volt-gelb); }
.stellen-feld__leiste { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.stellen-feld__leiste .knopf { min-height: 40px; }
.stellen-feld__hinweis {
  font-size: calc(var(--t-xs) * var(--textgroesse-skala)); color: var(--tinte-2); margin-left: auto;
}

/* Die Antwort steht im Faden, nicht am Rand: eine Randspalte stapelt sich und gibt es am
   Handy nicht. Eingerueckt und mit dem Satz im Kopf, damit der Bezug ohne Suchen dasteht. */
.beitrag--stelle { background: color-mix(in srgb, var(--einschub) 55%, transparent); }
.beitrag--stelle .beitrag__nummer-spalte { color: var(--volt-violett-text); }
.stellen-antwort__zitat {
  margin: 0 0 var(--sp-8); padding-left: 10px;
  border-left: 2px solid var(--volt-violett-text);
  font-family: var(--schrift-serif); font-style: italic;
  font-size: calc(var(--t-s) * var(--textgroesse-skala)); color: var(--tinte-2);
}
.stellen-antwort__weg {
  margin-top: var(--sp-8); background: transparent; border: 0; padding: 6px 0; min-height: 32px;
  color: var(--tinte-2); font-size: calc(var(--t-xs) * var(--textgroesse-skala));
  text-decoration: underline dotted currentColor 1px; text-underline-offset: 3px; cursor: pointer;
}

.stellen-fokus-leiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 12px var(--karte-innen); border-bottom: 1px solid var(--linie-hair);
  background: color-mix(in srgb, var(--volt-violett-text) 10%, transparent);
}
.stellen-fokus-leiste__zitat {
  font-family: var(--schrift-serif); font-style: italic; color: var(--tinte);
  font-size: calc(var(--t-s) * var(--textgroesse-skala)); flex: 1 1 240px; min-width: 0;
}
.stellen-fokus-leiste__weg {
  background: transparent; border: 1px solid var(--linie-tragend); border-radius: 999px;
  min-height: 36px; padding: 0 14px; color: var(--tinte); cursor: pointer;
  font-family: var(--schrift-ubuntu); font-size: calc(var(--t-s) * var(--textgroesse-skala));
}

/* ---------- Rollen-Erklaerkasten (01.09.2026) ----------
   Die Rollennamen sind Fachsprache, auch wenn sie deutsch klingen. Wer zum ersten Mal
   hier ist, liest "Prueft Recht" und weiss weder was geprueft wird noch mit welcher Folge.
   Jede Beschriftung ist deshalb ein Knopf. Sie sieht weiter aus wie ein Etikett, traegt
   aber eine gepunktete Unterlinie als Angebot, und das 44-px-Ziel liegt als unsichtbare
   Flaeche darum, damit das Etikett dafuer nicht groesser werden muss. */
.rollen-knopf {
  background: transparent; cursor: pointer; position: relative;
  text-decoration: underline dotted currentColor 1px; text-underline-offset: 3px;
}
.rollen-knopf::after {
  content: ""; position: absolute; inset: -11px -6px; min-height: 44px;
}
.rollen-knopf:hover { color: var(--tinte); border-color: var(--tinte); }

.rollen-sheet { border: 0; padding: 0; background: transparent; max-width: 560px; width: calc(100% - 32px); }
.rollen-sheet::backdrop { background: rgba(0, 0, 0, .55); }
.rollen-sheet__inner {
  background: var(--bogen); border: 1px solid var(--linie-hair);
  border-left: 3px solid var(--volt-violett-text);
  border-radius: var(--r-dialog); padding: var(--karte-innen);
}
.rollen-sheet__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rollen-sheet__titel {
  margin: 0; font-family: var(--schrift-ubuntu); font-weight: 500;
  font-size: calc(var(--t-h3) * var(--textgroesse-skala)); line-height: var(--t-h3-lh); color: var(--tinte);
}
.rollen-sheet__erklaerung {
  font-family: var(--schrift-serif);
  font-size: calc(var(--t-m) * var(--textgroesse-skala)); line-height: 1.6;
  color: var(--tinte); margin: var(--sp-12) 0 0; max-width: 60ch;
}
.rollen-sheet__fakten {
  margin: var(--sp-24) 0 0; padding-top: var(--sp-16);
  border-top: 1px solid var(--linie-hair);
  display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 8px 16px;
}
.rollen-sheet__fakten dt { color: var(--tinte-2); }
.rollen-sheet__fakten dd {
  margin: 0; font-size: calc(var(--t-s) * var(--textgroesse-skala)); color: var(--tinte);
}

/* ---------- Frische (Registereintrag 38, 01.09.2026) ----------
   Bewegung zeigt Zustand, nie Dekoration, und pro Bildschirm bewegt sich hoechstens eines
   dauerhaft. Das ist im Vorgang der laufende Phasenpunkt. Alles hier ist deshalb einmalig:
   die Marke an einem neuen Beitrag glimmt beim Ankommen auf und verlischt, was bleibt, ist
   die Angabe selbst. Wer "Bewegung reduzieren" gesetzt hat, sieht nur die Angabe. */
.beitragsstrom__frische {
  margin: 0; padding: 10px var(--karte-innen);
  border-bottom: 1px solid var(--linie-hair);
  font-family: var(--schrift-ubuntu);
  font-size: calc(var(--t-s) * var(--textgroesse-skala));
  color: var(--tinte-2);
}
.beitrag__neu-marke {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--volt-gelb);
  color: var(--volt-gelb); font-size: calc(11px * var(--textgroesse-skala));
  letter-spacing: 0.06em;
}
.beitrag--neu { position: relative; }
.beitrag--neu::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt-gelb);
  animation: frischeverglimmen 5.5s var(--kurve) forwards;
}
@keyframes frischeverglimmen {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: .32; }
}

/* ---------- Phasenchip (Thread-Karte, Header) ---------- */
.phasenchip {
  position: relative; display: inline-flex; align-items: center; height: 28px;
  padding: 0 10px; border-radius: var(--r-chip);
  border-left: 3px solid var(--phase-farbe, var(--linie-tragend));
  background: var(--phase-chip, var(--einschub)); color: var(--phase-farbe, var(--tinte));
  font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(13px * var(--textgroesse-skala)); letter-spacing: 0.06em;
}
.phasenchip::before { content: ""; position: absolute; inset: -8px -4px; min-height: 44px; }

/* ---------- Phasenreise (Thread-Detail, ersetzt das alte Phasenband) ----------
   Neugestaltung 31.08.2026. Begruendung der Interaktions-Entscheidung (nicht klickbar,
   reine Anzeige) steht bei bauePhasenreise() in app.js, dort auch die Kontrastrechnung.
   Fuenf Phasen als Weg statt als Reiter: eine Linie mit fuenf Punkten, erledigte und die
   aktuelle Phase leuchtend in Volt-Violett, kommende grau und hohl. Die Linie selbst traegt
   dieselbe Zweiteilung: eine durchgehende graue Basis (das "Hinterlegt" fuer die Zukunft),
   darauf eine violette Fuellung von Punkt 1 bis zur aktuellen Phase.
   Fuenf gleich breite Spalten statt fester Segmentbreite: dadurch passt die ganze Reise ohne
   horizontalen Scroll auch bei 320 px, das alte Band brauchte overflow-x nur, weil jedes
   Segment 110 px Mindestbreite hatte. Kein Kartenrahmen um die Reise: ein Pfad wird nicht
   eingerahmt, das widerspraeche der eigenen Metapher. */
.phasenreise { position: relative; margin: 0 0 4px; }

.phasenreise__spur {
  position: absolute; left: 10%; right: 10%; top: 13px; height: 2px;
  pointer-events: none;
}
/* Korrektur 31.08.2026 (Sichtung Gero): --linie-tragend ist als Kante gedacht (4.2), liest
   sich als Flaeche auf der ganzen Spur-Breite aber sichtbar blau, nicht grau, und kollidiert
   damit mit der Kennfarbe des Forum-Moduls (Registereintrag 27). Zukunft bekommt stattdessen
   --tinte-2, denselben gedaempften Grauton, den die Namen "erledigt" und "kommend" ohnehin
   schon tragen (Grau ist hier durchgehend eine Farbe). Kontrast als Flaeche/Kante gegen
   --grund 10,74:1 dunkel / 8,36:1 hell, mehr Abstand zur 3:1-Schwelle als vorher. */
.phasenreise__spur-basis {
  position: absolute; inset: 0; background: var(--tinte-2); border-radius: var(--r-null);
}
.phasenreise__spur-fuellung {
  position: absolute; inset: 0 auto 0 0; width: var(--fuellung, 0%);
  background: var(--volt-violett-text); border-radius: var(--r-null);
  box-shadow: 0 0 6px 0 color-mix(in srgb, var(--volt-violett-text) 40%, transparent);
  transition: width 900ms var(--kurve);
}

.phasenreise__liste { display: flex; align-items: flex-start; position: relative; }
.phasenreise__schritt {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px;
}

.phasenreise__punkt-feld { height: 28px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.phasenreise__punkt {
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none;
  transition: box-shadow var(--dur-mittel) var(--kurve);
}
.phasenreise__punkt--kommend { width: 10px; height: 10px; background: transparent; border: 2px solid var(--tinte-2); }
.phasenreise__punkt--erledigt {
  width: 14px; height: 14px; background: var(--volt-violett-text);
  box-shadow: 0 0 5px 0 color-mix(in srgb, var(--volt-violett-text) 45%, transparent);
}
/* Der laufende Punkt traegt den Volt-Violett-Kern als Flaeche und einen Ring in
   --volt-violett-text, der leuchtet. #502379 ist als Flaeche freigegeben, als Kante oder
   Schrift dagegen gesperrt (1,53:1 auf --bogen), deshalb Kern innen, Ring aussen.
   Der Puls laeuft langsam, damit er als Zustand liest und nicht als Alarm. */
.phasenreise__punkt--aktuell {
  width: 22px; height: 22px;
  background: var(--volt-violett-flaeche);
  border: 2px solid var(--volt-violett-text);
  animation: phasenpuls 3.4s var(--kurve) infinite;
}
@keyframes phasenpuls {
  0%, 100% {
    box-shadow:
      0 0 6px 0 color-mix(in srgb, var(--volt-violett-text) 55%, transparent),
      0 0 16px 3px color-mix(in srgb, var(--volt-violett-text) 26%, transparent);
  }
  50% {
    box-shadow:
      0 0 11px 2px color-mix(in srgb, var(--volt-violett-text) 85%, transparent),
      0 0 26px 7px color-mix(in srgb, var(--volt-violett-text) 44%, transparent);
  }
}
/* Hellmodus: derselbe blaue Schein auf Papier liest sich als Fleck statt als Leuchten, siehe
   Begruendung bei bauePhasenreise() in app.js. Schein deutlich zurueckgenommen. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .phasenreise__spur-fuellung { box-shadow: 0 0 3px 0 color-mix(in srgb, var(--volt-violett-flaeche) 18%, transparent); }
  :root:not([data-theme]) .phasenreise__punkt--erledigt { box-shadow: 0 0 3px 0 color-mix(in srgb, var(--volt-violett-flaeche) 20%, transparent); }
  :root:not([data-theme]) .phasenreise__punkt--aktuell {
    box-shadow:
      0 0 4px 0 color-mix(in srgb, var(--volt-violett-flaeche) 25%, transparent),
      0 0 9px 1px color-mix(in srgb, var(--volt-violett-flaeche) 14%, transparent);
  }
}
:root:is([data-theme="sepia"],[data-theme="salbei"],[data-theme="warmgrau"]) .phasenreise__spur-fuellung { box-shadow: 0 0 3px 0 color-mix(in srgb, var(--volt-violett-flaeche) 18%, transparent); }
:root:is([data-theme="sepia"],[data-theme="salbei"],[data-theme="warmgrau"]) .phasenreise__punkt--erledigt { box-shadow: 0 0 3px 0 color-mix(in srgb, var(--volt-violett-flaeche) 20%, transparent); }
:root:is([data-theme="sepia"],[data-theme="salbei"],[data-theme="warmgrau"]) .phasenreise__punkt--aktuell {
  box-shadow:
    0 0 4px 0 color-mix(in srgb, var(--volt-violett-flaeche) 25%, transparent),
    0 0 9px 1px color-mix(in srgb, var(--volt-violett-flaeche) 14%, transparent);
}

.phasenreise__name {
  font-family: var(--schrift-ubuntu); font-size: calc(13px * var(--textgroesse-skala));
  line-height: 1.3; color: var(--tinte-2); overflow-wrap: break-word;
}
.phasenreise__schritt--aktuell .phasenreise__name {
  font-family: var(--schrift-serif); font-weight: 600;
  font-size: calc(16px * var(--textgroesse-skala)); color: var(--volt-violett-text);
}
.phasenreise__position { font-family: var(--schrift-mono); font-size: calc(12px * var(--textgroesse-skala)); color: var(--tinte-2); white-space: nowrap; }

/* Unter 640 px (Bruchpunkt wie beim Flussdiagramm, DESIGN-SPEZ 5.10) traegt nur die aktuelle
   Phase ihren Namen sichtbar, sonst wird es bei fuenf deutschen Phasennamen eng. Die anderen
   Namen bleiben ueber .sr-only fuer Screenreader erhalten, sie verschwinden nicht aus dem
   Dokument, nur aus dem Bild.
   Korrektur 31.08.2026 (Sichtung Gero): "Phase 2 von 5" brach in der schmalen Punkt-Spalte
   (390 px) zu einer Stapelspalte um, obwohl die Spur selbst volle Breite hat. Die Zeile darf
   nicht umbrechen (weder Stapel noch Ellipse waeren lesbar), deshalb faellt unter 640 px statt
   dessen das Wort "Phase" weg, sichtbar bleibt nur "2 von 5"/"2 of 5". Die volle Fassung steht
   weiter ausgeschrieben in der Statuszeile ueber der Falz, hier ist es die zweite, redundante
   Nennung, die Kuerzung verliert keine Information. */
@media (max-width: 639.98px) {
  .phasenreise__schritt:not(.phasenreise__schritt--aktuell) .phasenreise__name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
  }
  .phasenreise__position-wort { display: none; }
}

/* Der Aufklapp-Knopf stand in derselben Farbe und Staerke wie "Abgezweigt von" und
   "Im Forum diskutieren" und sah damit aus wie ein weiterer Verweis, der wegfuehrt
   (Sichtung Gero, 01.09.2026). Er tut etwas anderes: er klappt an Ort und Stelle auf.
   Deshalb schwaecher, duenner, gepunktet unterstrichen und mit einem Pfeil, der sich beim
   Oeffnen dreht. Die echten Verweise behalten Hellblau fuer sich. */
.phasen-erklaerung-knopf {
  min-height: 44px; padding: 8px 4px; background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--tinte-2); font-family: var(--schrift-ubuntu); font-weight: 400;
  font-size: calc(13px * var(--textgroesse-skala)); text-align: left;
}
.phasen-erklaerung-knopf__wort { text-decoration: underline dotted currentColor 1px; text-underline-offset: 3px; }
.phasen-erklaerung-knopf__pfeil {
  display: inline-block; font-size: 15px; line-height: 1;
  transition: transform var(--dur-schnell) var(--kurve);
}
.phasen-erklaerung-knopf[aria-expanded="true"] .phasen-erklaerung-knopf__pfeil { transform: rotate(90deg); }
.phasen-erklaerung-knopf:hover { color: var(--tinte); }

.phasen-erklaerung {
  background: var(--einschub); border-radius: var(--r-einschub); padding: 16px;
  margin-top: 8px; font-size: calc(var(--t-s) * var(--textgroesse-skala)); color: var(--tinte-2);
}
/* Erklaerung und Frist sahen gleich aus, obwohl das eine Prosa ist und das andere eine
   Angabe. Die Erklaerung laeuft deshalb kursiv in der Lese-Schrift, die Frist steht als
   eigener Block darunter, abgesetzt durch eine Linie. */
.phasen-erklaerung__was {
  margin: 0; font-family: var(--schrift-serif); font-style: italic;
  font-size: calc(var(--t-m) * var(--textgroesse-skala)); line-height: 1.55;
  color: var(--tinte); max-width: 62ch;
}
.phasen-erklaerung__frist {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie-hair);
  display: flex; flex-direction: column; gap: 8px;
}
.phasen-erklaerung__frist-label { display: inline-flex; align-items: center; gap: 6px; color: var(--tinte-2); }
.phasen-erklaerung__frist-text { margin: 0; font-size: calc(var(--t-xs) * var(--textgroesse-skala)); color: var(--tinte-2); }

/* Frist als Massband: ein Strich je Einheit, blass fuer die moegliche Verlaengerung.
   Nach je sieben Tagesstrichen eine Luecke, damit Wochen ohne Zaehlen ablesbar sind. */
.frist-band { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.frist-band__balken { display: flex; align-items: flex-end; gap: 3px; }
.frist-band__strich {
  display: block; width: 7px; height: 18px; border-radius: 2px;
  background: var(--volt-violett-text);
}
.frist-band__strich--woche { margin-left: 7px; }
.frist-band__strich--dehnbar {
  height: 12px; background: transparent;
  border: 1px solid var(--volt-violett-text); opacity: .55;
}
.frist-band__text {
  font-family: var(--schrift-ubuntu); font-variant-numeric: tabular-nums;
  font-size: calc(var(--t-s) * var(--textgroesse-skala)); color: var(--tinte);
}
.frist-band__dehnbar-text { color: var(--tinte-2); }

/* ---------- Ebenen-Flaggen ---------- */
.ebenen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ebene-flagge { display: block; height: 16px; width: auto; border-radius: 2px; border: 1px solid var(--linie-hair); flex: none; }
/* Auftrag 2, 31.08.2026: Kfz-Unterscheidungszeichen statt Textetikett, gleiche Hoehe und
   Rahmung wie die Flaggen (.ebene-flagge), Monospace wie die uebrigen Kennungen (.kennung,
   .mono). Begruendung und Rechtsgrundlage im Kommentar bei baueEbenenReihe() in app.js. */
.ebene-flagge--kommune {
  display: inline-flex; align-items: center; justify-content: center; height: 16px; padding: 0 5px;
  border: 1px solid var(--linie-hair); border-radius: 2px;
  font-size: calc(11px * var(--textgroesse-skala)); font-weight: 500; letter-spacing: 0.02em;
  color: var(--tinte); flex: none;
}
.ebenen-details { margin-top: var(--sp-8); }
.ebenen-details > summary {
  cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center;
  font-family: var(--schrift-ubuntu); font-size: calc(14px * var(--textgroesse-skala)); color: var(--tinte-2);
}
.ebenen-details > summary::-webkit-details-marker { display: none; }
.ebenen-details > summary::before { content: "▸ "; }
.ebenen-details[open] > summary::before { content: "▾ "; }
.ebenen-details__text { font-size: calc(15px * var(--textgroesse-skala)); color: var(--tinte-2); padding: 4px 0 8px; max-width: 66ch; }

/* ---------- Herkunftszeile / Abzweigung ----------
   Revision 31.08.2026 (Entruempelung): aus dem Kasten wird eine Zeile. Der begruendende Satz
   sitzt jetzt in der Aufklapp-Zeile "Rollen" (.herkunft__satz bleibt dafuer bestehen). */
.thread-kurzzeilen { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--sp-16); }
.herkunft-zeile, .forum-zeile {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  min-height: 44px; margin: 0;
  font-family: var(--schrift-ubuntu); font-size: calc(15px * var(--textgroesse-skala));
}
.herkunft-zeile__label { color: var(--tinte-2); flex: none; }
.herkunft-zeile__ziel { color: var(--volt-hellblau); text-decoration: none; font-weight: 500; padding: 10px 0; }
.herkunft-zeile__ziel:hover { text-decoration: underline; }
.forum-zeile { color: var(--volt-hellblau); text-decoration: none; font-weight: 500; min-height: 44px; }
.forum-zeile:hover { text-decoration: underline; }
.herkunft__satz { font-family: var(--schrift-ubuntu); font-size: calc(15px * var(--textgroesse-skala)); color: var(--tinte-2); margin: 0 0 var(--sp-12); }

.unterthreads { margin: 0; }
.unterthreads__liste { display: flex; flex-direction: column; gap: 8px; }
.unterthreads__link {
  display: block; padding: 10px 12px; min-height: 44px; display: flex; align-items: center;
  background: transparent; border: 1px solid var(--linie-hair); border-radius: var(--r-einschub);
  color: var(--tinte); text-decoration: none; font-size: calc(15px * var(--textgroesse-skala));
}
.unterthreads__link:hover { border-color: var(--linie-tragend); }

/* ---------- Rollen ---------- */
.rollen-tabelle { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-16); }
.rollen-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie-hair); font-size: calc(15px * var(--textgroesse-skala)); }
.rollen-zeile__rolle { color: var(--tinte-2); }
.rollen-zeile__person { color: var(--tinte); font-weight: 500; }
.rollen-zeile__person--leer { color: var(--tinte-2); font-weight: 400; font-style: normal; }

/* ---------- Dossier: eingeklappte Vorgangsdaten (Revision 31.08.2026) ----------
   Jede Zeile traegt Titel plus genau einen Fakt, ist also ohne Oeffnen einzuordnen.
   Hoehe 56 px, damit das Tap-Ziel ueber der 44-px-Schwelle liegt und Luft hat. */
.dossier { margin-top: var(--abschnitt-abstand); display: flex; flex-direction: column; gap: 8px; }
.dossier > .abschnitt-titel { margin: 0 0 var(--sp-8); }
.aufklapp { background: var(--bogen); border-radius: var(--r-karte); border-left: 3px solid var(--linie-tragend); }
.aufklapp__zeile {
  cursor: pointer; list-style: none; min-height: 56px; padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.aufklapp__zeile::-webkit-details-marker { display: none; }
.aufklapp__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aufklapp__titel { font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(var(--t-m) * var(--textgroesse-skala)); color: var(--tinte); }
.aufklapp__fakt { font-family: var(--schrift-ubuntu); font-size: calc(13px * var(--textgroesse-skala)); color: var(--tinte-2); }
.aufklapp__pfeil { flex: none; color: var(--tinte-2); transition: transform var(--dur-schnell) var(--kurve); }
.aufklapp[open] .aufklapp__pfeil { transform: rotate(180deg); }
.aufklapp__inhalt { padding: 0 16px 16px; }
.aufklapp:hover { background: var(--hoch); }

/* ---------- Umfrage ---------- */
.umfrage { background: var(--einschub); border-radius: var(--r-einschub); padding: var(--karte-innen); border-top: 3px solid var(--phase-voting); }
.umfrage__kopf { color: var(--phase-voting); margin-bottom: var(--sp-12); }
.umfrage__frage { font-family: var(--schrift-serif); font-weight: 600; font-size: calc(var(--t-h3) * var(--textgroesse-skala)); color: var(--tinte); margin: 0 0 var(--sp-16); }
.umfrage__optionen { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-16); }
.umfrage__option { }
.umfrage__option-kopf { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: calc(15px * var(--textgroesse-skala)); color: var(--tinte); }
.umfrage__option-zahl { flex: none; color: var(--tinte-2); }
.umfrage__balkenspur { height: 32px; background: var(--bogen); border-radius: var(--r-null); overflow: hidden; }
.umfrage__balken { height: 100%; background: var(--linie-tragend); border-right: 1px solid var(--linie-hair); min-width: 2px; }
.umfrage__fuss { font-size: calc(15px * var(--textgroesse-skala)); color: var(--tinte-2); margin: 0; }
.umfrage__geschlossen-hinweis { font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(13px * var(--textgroesse-skala)); color: var(--erfolg); margin-bottom: var(--sp-12); }

/* ---------- Prüfnotiz ---------- */
.pruefnotiz {
  background: var(--einschub); border-radius: var(--r-null);
  border: 1px solid var(--linie-tragend); border-left: 3px solid var(--volt-gelb);
  padding: 16px;
}
@media (min-width: 768px) { .pruefnotiz { padding: 24px; } }
.pruefnotiz + .pruefnotiz { margin-top: var(--sp-16); }
.pruefnotiz__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-12); flex-wrap: wrap; }
.pruefnotiz__kopf-titel { color: var(--tinte); }
.pruefnotiz__feld { margin-bottom: var(--sp-12); }
.pruefnotiz__feld:last-child { margin-bottom: 0; }
.pruefnotiz__feld-label { display: block; color: var(--tinte-2); margin-bottom: 4px; }
.pruefnotiz__feld-wert { font-family: var(--schrift-ubuntu); font-size: calc(var(--t-body) * var(--textgroesse-skala)); color: var(--tinte); }
/* WCAG-10: --offen-text auf --einschub/--hoch (6,86/6,08) erreicht 7:1 AAA erst als Grosstext.
   Korrekt umgerechnet liegt die Schwelle bei 24px normal oder 18,7px fett, nicht bei 18,5px/500.
   Bei 18-19px echtes Fett (700) statt 500 setzen, damit die AAA-Ausnahme tatsaechlich greift. */
.pruefnotiz__feld-wert--offen { color: var(--offen-text); font-weight: 700; }
.pruefnotiz__zitat {
  font-family: var(--schrift-serif); font-size: calc(var(--t-lese) * var(--textgroesse-skala)); line-height: var(--t-lese-lh);
  color: var(--tinte-2); background: var(--bogen); padding: 12px 16px; margin: 0;
  border-left: 2px solid var(--linie-tragend);
}
.pruefnotiz__zitat p { margin: 0 0 1em; }
.pruefnotiz__zitat p:last-child { margin-bottom: 0; }
.pruefnotiz__fundstellen { margin: 0; padding-left: 0; list-style: none; font-size: calc(15px * var(--textgroesse-skala)); color: var(--tinte-2); display: flex; flex-direction: column; gap: 4px; }
.pruefnotiz__fundstellen li::before { content: "— "; }
.pruefnotiz__badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border: 1px solid var(--linie-tragend); border-radius: var(--r-etikett);
  font-family: var(--schrift-mono); font-size: calc(12px * var(--textgroesse-skala)); color: var(--tinte-2);
}

/* ---------- Frist kritisch (Fläche + Schrift, 2.7) ---------- */
.frist-kritisch-chip {
  display: inline-flex; align-items: center; background: var(--frist-kritisch-flaeche);
  color: var(--frist-kritisch-schrift); padding: 2px 8px; border-radius: var(--r-etikett);
  font-weight: 700;
}
.pruefnotiz__begruendung { font-size: calc(var(--t-s) * var(--textgroesse-skala)); color: var(--tinte-2); margin: 4px 0 0; }

/* ---------- Anhang ---------- */
.anhang { border: 1px solid var(--linie-tragend); border-radius: var(--r-einschub); padding: 12px 16px; margin-top: var(--sp-12); }
.anhang__label { display: block; color: var(--tinte-2); margin-bottom: 4px; }
.anhang__name { font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(15px * var(--textgroesse-skala)); color: var(--tinte); display: block; word-break: break-word; }
.anhang__beschreibung { font-size: calc(14px * var(--textgroesse-skala)); color: var(--tinte-2); margin: 4px 0 0; }

/* ---------- Schlussprotokoll ---------- */
.schlussprotokoll { background: var(--einschub); border-radius: var(--r-einschub); padding: var(--karte-innen); border-top: 3px solid var(--phase-adoption); }
.schlussprotokoll__kopf { color: var(--phase-adoption); margin-bottom: var(--sp-12); }
.schlussprotokoll__text { font-family: var(--schrift-serif); font-size: calc(var(--t-lese) * var(--textgroesse-skala)); line-height: var(--t-lese-lh); color: var(--tinte); }
.schlussprotokoll__text p { margin: 0 0 1em; }

/* ---------- Beitragsstrom ---------- */
.beitragsstrom { background: var(--bogen); border-radius: var(--r-karte); }
.beitrag { padding: var(--karte-innen); border-bottom: 1px solid var(--linie-hair); scroll-margin-top: 80px; }
.beitrag:last-child { border-bottom: 0; }
.beitrag--pruefstufe { padding: 0; border-bottom: 1px solid var(--linie-hair); }
.beitrag--pruefstufe .pruefnotiz { border-top: 0; border-left: 3px solid var(--volt-gelb); }
.beitrag__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-8); }
.beitrag__nummer { font-family: var(--schrift-mono); font-size: calc(13px * var(--textgroesse-skala)); color: var(--tinte-2); }
.beitrag__name { font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(17px * var(--textgroesse-skala)); color: var(--tinte); }
.beitrag__rolle { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--linie-tragend); border-radius: var(--r-etikett); font-family: var(--schrift-ubuntu); font-size: calc(12px * var(--textgroesse-skala)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinte-2); }
.beitrag__zeit { font-family: var(--schrift-mono); font-size: calc(12px * var(--textgroesse-skala)); color: var(--tinte-2); margin-left: auto; }
/* Der Beitragstext lief im Grad des Fliesstextes und drueckte damit den Namen darueber
   an die Wand (Sichtung Gero, 01.09.2026). Eine Stufe kleiner, die Rangfolge im Kopf
   der Karte bleibt lesbar. */
.beitrag__text { font-size: calc(var(--t-m) * var(--textgroesse-skala)); line-height: 1.6; color: var(--tinte); }
.beitrag__text p { margin: 0 0 1em; }
.beitrag__text p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .beitrag { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
  .beitrag__nummer-spalte { text-align: right; font-family: var(--schrift-mono); font-size: calc(13px * var(--textgroesse-skala)); color: var(--tinte-2); border-right: 1px solid var(--linie-hair); padding-right: 8px; }
  .beitrag__nummer-inline { display: none; }
  .beitrag--pruefstufe { display: block; }
}
@media (max-width: 767.98px) {
  .beitrag__nummer-spalte { display: none; }
}

.weitere-laden { display: block; width: 100%; min-height: 48px; margin-top: var(--sp-16); background: transparent; border: 1px solid var(--linie-tragend); border-radius: var(--r-knopf); color: var(--tinte); font-family: var(--schrift-ubuntu); font-size: calc(15px * var(--textgroesse-skala)); cursor: pointer; }

/* ---------- Flussdiagramme ---------- */
.diagramm-wrap { margin: var(--sp-16) 0 var(--sp-24); }
.diagramm-scroll {
  overflow-x: auto; border: 1px solid var(--linie-hair); border-radius: var(--r-null);
  -webkit-overflow-scrolling: touch; display: none;
}
.diagramm-scroll svg { display: block; }
@media (min-width: 640px) { .diagramm-scroll { display: block; } }
.diagramm-liste { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 640px) { .diagramm-liste { display: none; } }
.diagramm-liste__item { border-left: 3px solid var(--phase-farbe, var(--linie-tragend)); padding: 8px 12px; background: var(--einschub); border-radius: 0 var(--r-einschub) var(--r-einschub) 0; }
.diagramm-liste__item[data-tiefe="1"] { margin-left: 20px; }
.diagramm-liste__item[data-tiefe="2"] { margin-left: 40px; }
.diagramm-liste__nr { font-family: var(--schrift-mono); font-size: calc(12px * var(--textgroesse-skala)); color: var(--tinte-2); }
.diagramm-liste__wort { display: block; font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(15px * var(--textgroesse-skala)); color: var(--tinte); }
.diagramm-liste__sub { display: block; font-size: calc(13px * var(--textgroesse-skala)); color: var(--tinte-2); margin-top: 2px; }

.diagramm-details { margin-top: var(--sp-16); display: flex; flex-direction: column; gap: 12px; }
.diagramm-detail-karte { border-left: 3px solid var(--phase-farbe, var(--linie-tragend)); background: var(--einschub); border-radius: 0 var(--r-einschub) var(--r-einschub) 0; padding: 16px; }
.diagramm-detail-karte__titel { font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(17px * var(--textgroesse-skala)); color: var(--tinte); margin: 0 0 8px; }
.diagramm-detail-karte dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.diagramm-detail-karte dt { color: var(--tinte-2); font-size: calc(13px * var(--textgroesse-skala)); }
.diagramm-detail-karte dd { margin: 0; color: var(--tinte); font-size: calc(15px * var(--textgroesse-skala)); }
.diagramm-detail-karte__norm { font-family: var(--schrift-mono); font-size: calc(13px * var(--textgroesse-skala)); color: var(--volt-hellblau); }

.offene-punkte { list-style: none; padding: 0; margin: var(--sp-16) 0 0; display: flex; flex-direction: column; gap: 8px; }
.offene-punkte li { padding-left: 20px; position: relative; font-size: calc(15px * var(--textgroesse-skala)); color: var(--tinte-2); }
.offene-punkte li::before { content: "offen"; position: absolute; left: 0; top: 1px; color: var(--offen-text); font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(11px * var(--textgroesse-skala)); letter-spacing: 0.04em; display: none; }
.offene-punkte__etikett { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin-right: 8px; border: 1px solid var(--offen-text); border-radius: var(--r-etikett); color: var(--offen-text); font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(11px * var(--textgroesse-skala)); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Werkzeuge ---------- */
.werkzeuge-tabelle-wrap { overflow-x: auto; border: 1px solid var(--linie-hair); display: none; }
@media (min-width: 768px) { .werkzeuge-tabelle-wrap { display: block; } }
.werkzeuge-tabelle { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--textgroesse-skala)); }
.werkzeuge-tabelle caption { text-align: left; padding: 8px 12px; color: var(--tinte-2); font-size: calc(13px * var(--textgroesse-skala)); }
.werkzeuge-tabelle th, .werkzeuge-tabelle td { padding: 12px; text-align: left; border-bottom: 1px solid var(--linie-hair); white-space: nowrap; }
.werkzeuge-tabelle td { white-space: normal; }
.werkzeuge-tabelle thead th { position: sticky; top: 0; background: var(--hoch); font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(13px * var(--textgroesse-skala)); letter-spacing: 0.06em; text-transform: uppercase; z-index: 2; }
.werkzeuge-tabelle tbody th { position: sticky; left: 0; background: var(--bogen); font-family: var(--schrift-ubuntu); font-weight: 500; z-index: 1; }
.werkzeuge-tabelle tbody tr:nth-child(odd) th { background: var(--bogen); }
.bewertung--erfuellt { color: var(--volt-gruen-text); }
.bewertung--teilweise { color: var(--phase-voting); }
.bewertung--fehlt { color: var(--volt-rot-text); }

.werkzeuge-karten { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .werkzeuge-karten { display: none; } }
.werkzeug-karte { background: var(--bogen); border-radius: var(--r-karte); padding: var(--karte-innen); }
.werkzeug-karte__titel { font-family: var(--schrift-ubuntu); font-weight: 700; font-size: calc(18px * var(--textgroesse-skala)); margin: 0 0 12px; color: var(--tinte); }
.werkzeug-karte dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.werkzeug-karte dt { font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(13px * var(--textgroesse-skala)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-2); }
.werkzeug-karte dd { margin: 2px 0 0; font-size: calc(16px * var(--textgroesse-skala)); color: var(--tinte); }

.befund-karte, .lehren-karte { background: var(--einschub); border-radius: var(--r-einschub); padding: var(--karte-innen); margin-top: var(--sp-16); }
.befund-karte__label, .lehren-karte__label { color: var(--tinte-2); margin-bottom: 8px; }

/* ---------- Über ---------- */
.quellenliste { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-8); }
.quellenliste li { font-size: calc(14px * var(--textgroesse-skala)); color: var(--tinte-2); font-family: var(--schrift-mono); }

/* ---------- Ansicht-Sheet ---------- */
dialog.ansicht-sheet {
  border: 0; padding: 0; background: var(--einschub); color: var(--tinte);
  border-radius: var(--r-dialog) var(--r-dialog) 0 0;
  width: 100%; max-width: 480px; margin: auto auto 0;
  box-shadow: var(--schatten-schwebend);
}
dialog.ansicht-sheet::backdrop { background: rgba(0,0,0,.5); }
@media (min-width: 640px) { dialog.ansicht-sheet { border-radius: var(--r-dialog); margin: auto; } }
.ansicht-sheet__inner { padding: 24px 20px max(20px, env(safe-area-inset-bottom)); }
.ansicht-sheet__titel { font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(18px * var(--textgroesse-skala)); margin: 0 0 16px; display: flex; justify-content: space-between; align-items: center; }
.ansicht-sheet__schliessen { width: 40px; height: 40px; border-radius: var(--r-etikett); border: 1px solid var(--linie-hair); background: transparent; color: var(--tinte); cursor: pointer; }
.ansicht-block { margin-bottom: 20px; }
.ansicht-block:last-child { margin-bottom: 0; }
.ansicht-block__label { display: block; color: var(--tinte-2); margin-bottom: 8px; }
.segment-schalter { display: flex; border: 1px solid var(--linie-tragend); border-radius: var(--r-knopf); overflow: hidden; }
.segment-schalter button { flex: 1; min-height: 44px; background: transparent; border: 0; border-left: 1px solid var(--linie-tragend); color: var(--tinte-2); cursor: pointer; font-size: calc(14px * var(--textgroesse-skala)); }
.segment-schalter button:first-child { border-left: 0; }
.segment-schalter button[aria-pressed="true"] { background: var(--hoch); color: var(--tinte); font-weight: 500; }

/* ---------- Farbwahl (Lesefarben) ----------
   Umgezogen nach style-huelle.css (Kopfzeilen-Nachtrag, Aufgabe 1): die Kacheln braucht jetzt
   auch der Lesefarbe-Knopf der Bruecken-Seiten, huelle.css ist die eine Datei, die beide
   Oberflaechen laden. */

.toggle-zeile { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.toggle-knopf { width: 48px; height: 28px; border-radius: 14px; border: 1px solid var(--linie-tragend); background: var(--bogen); position: relative; cursor: pointer; flex: none; }
.toggle-knopf::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--tinte-2); transition: transform var(--dur-schnell) var(--kurve); }
.toggle-knopf[aria-pressed="true"] { background: var(--volt-violett-flaeche); border-color: var(--volt-violett-text); }
.toggle-knopf[aria-pressed="true"]::after { transform: translateX(20px); background: #fff; }

/* ---------- Lesemodus ---------- */
body.lesemodus .lese { max-width: 80ch; font-size: calc(20px * var(--textgroesse-skala)); }
body.lesemodus .lese p { margin-bottom: 2.25em; }
body.lesemodus .pruefnotiz__zitat { max-width: 80ch; }

/* ---------- Fuss ---------- */
.fuss { padding: var(--sp-32) 20px; text-align: center; color: var(--tinte-2); font-size: calc(13px * var(--textgroesse-skala)); }
.fuss__demo { max-width: 66ch; margin: 0 auto var(--sp-8); }
.fuss__stand { margin: 0; }

/* ---------- Onboarding-Tour (Auftrag 2, 31.08.2026) ----------
   Der Ausschnitt entsteht aus einem grossen box-shadow um .tour__spot, deshalb braucht es
   kein Clip-Path und keine vier Blenden. Ruhig nach DESIGN-SPEZ 4.5: kein Bounce, ein
   Zustandswechsel, prefers-reduced-motion schaltet die Dauer ohnehin auf null. */
.tour { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.tour[hidden] { display: none; }
.tour__schirm { position: absolute; inset: 0; pointer-events: auto; }
.tour__spot {
  position: absolute; border-radius: var(--r-karte); pointer-events: none;
  border: 2px solid var(--volt-gelb); box-shadow: 0 0 0 9999px rgba(4, 9, 18, .72);
  transition: top var(--dur-mittel) var(--kurve), left var(--dur-mittel) var(--kurve),
              width var(--dur-mittel) var(--kurve), height var(--dur-mittel) var(--kurve);
}
.tour__blase {
  position: absolute; pointer-events: auto;
  width: min(360px, calc(100vw - 24px));
  background: var(--einschub); color: var(--tinte);
  border-radius: var(--r-dialog); box-shadow: var(--schatten-schwebend);
  border: 1px solid var(--linie-tragend);
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
}
.tour__zaehler { font-size: calc(12px * var(--textgroesse-skala)); color: var(--tinte-2); margin: 0 0 4px; letter-spacing: .04em; }
.tour__titel { font-family: var(--schrift-serif); font-weight: 600; font-size: calc(var(--t-h3) * var(--textgroesse-skala)); line-height: var(--t-h3-lh); color: var(--tinte); margin: 0 0 6px; }
.tour__text { font-size: calc(var(--t-m) * var(--textgroesse-skala)); line-height: 1.5; color: var(--tinte); margin: 0 0 12px; }
.tour__punkte { display: flex; gap: 6px; margin-bottom: 12px; }
.tour__punkt { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--linie-tragend); background: transparent; }
.tour__punkt--aktiv { background: var(--volt-violett-text); border-color: var(--volt-violett-text); }
.tour__knoepfe { display: flex; gap: 12px; }
.tour__knoepfe .knopf { flex: 1 1 auto; min-height: 48px; }
.ansicht-block__knopf { width: 100%; }

/* ---------- Desktop-Grid Thread-Detail ---------- */
@media (min-width: 1024px) {
  .thread-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 48px; align-items: start; }
  .thread-grid__meta { position: sticky; top: 96px; }
  /* Rollen und Kennung stehen ab 1024px schon in der Metaspalte (6.3), die Aufklapp-Zeile
     im Dossier faellt dort weg, damit dieselbe Tabelle nicht zweimal auf dem Screen steht. */
  .thread-grid__haupt .aufklapp--rollen { display: none; }
  .thread-grid__meta-karte { border: 1px solid var(--linie-hair); border-radius: var(--r-einschub); padding: var(--karte-innen); }
  .aktionsleiste--desktop-inline { position: static; background: transparent; border-top: 0; padding: 0; margin-top: var(--sp-16); min-height: 0; }
  /* F3: Aktionsleiste wandert ab 1024px in die Metaspalte (6.3), die untere Leiste tritt zurueck.
     Nur wenn die Kopie in der Metaspalte tatsaechlich existiert (Thread gefunden, Grid gebaut):
     im Nicht-gefunden-Zustand gibt es keine Metaspalte, die untere Leiste bleibt dort der einzige Weg zurueck. */
  main[data-screen="thread"]:has(.thread-grid__meta .aktionsleiste--desktop-inline) #thread-aktionsleiste { display: none; }
}
@media (max-width: 1023.98px) {
  .thread-grid__meta-standalone { display: none; }
}

@media (min-width: 1024px) {
  .bereich { padding-inline: 48px; }
  .subnav { padding-inline: 48px; }
}