/* 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="dark"]) .bayern-ecke { opacity: .16; }
}
[data-theme="light"] .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; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  height: 56px; background: var(--grund);
  border-bottom: 1px solid var(--linie-hair);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-inline: 20px;
}
.kopf__marke { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; flex: 1 1 auto; overflow: hidden; text-decoration: none; color: var(--tinte); }
.kopf__logo { height: 22px; width: auto; display: block; color: var(--tinte); flex: none; }
.kopf__trenn { width: 1px; height: 20px; background: var(--linie-tragend); flex: none; }
.kopf__wappen { height: 28px; width: auto; flex: none; display: block; }
.kopf__wortmarke {
  font-family: var(--schrift-ubuntu); font-weight: 500; font-size: calc(13px * var(--textgroesse-skala));
  letter-spacing: 0.08em; color: var(--tinte-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.kopf__wortmarke-kurz { display: none; }
@media (max-width: 379px) {
  .kopf__trenn, .kopf__wappen { display: none; }
}
@media (max-width: 419px) {
  /* F1: die volle Wortmarke braucht mehr Breite als Logo plus Bedienziele auf schmalen
     Handys uebrig lassen, sie wuerde sonst zu einer bedeutungslosen abgeschnittenen
     Zeichenkette. Kurzform statt Mitten-Abschnitt, vollstaendiger Name bleibt als
     aria-label auf .kopf__marke erhalten. */
  .kopf__wortmarke-lang { display: none; }
  .kopf__wortmarke-kurz { display: inline; }
}
.kopf__ziele { display: flex; align-items: center; gap: 8px; flex: none; }

.sprachumschalter { display: flex; align-items: center; border: 1px solid var(--linie-hair); border-radius: var(--r-etikett); overflow: hidden; }
.sprachumschalter__opt {
  min-width: 44px; min-height: 44px; padding: 0 12px; background: transparent; border: 0;
  border-left: 1px solid var(--linie-tragend);
  font-family: var(--schrift-ubuntu); font-size: calc(14px * var(--textgroesse-skala)); color: var(--tinte-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sprachumschalter__opt:first-child { border-left: 0; }
.sprachumschalter__opt[aria-pressed="true"] {
  color: var(--tinte); font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--volt-violett-text);
}
.sprachumschalter--einzeln .sprachumschalter__opt { border-left: 0; }

.sprachmenue-knopf { min-width: 44px; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--linie-hair); border-radius: var(--r-etikett); color: var(--tinte-2); cursor: pointer; font-family: var(--schrift-ubuntu); font-size: calc(14px * var(--textgroesse-skala)); }
.sprachmenue { position: absolute; right: 20px; top: 60px; background: var(--einschub); border-radius: var(--r-dialog); box-shadow: var(--schatten-schwebend); min-width: 180px; overflow: hidden; z-index: 30; }
.sprachmenue__opt { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; background: transparent; border: 0; border-top: 1px solid var(--linie-hair); color: var(--tinte); text-align: left; cursor: pointer; }
.sprachmenue__opt:first-child { border-top: 0; }

.ansicht-knopf {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--linie-hair); border-radius: var(--r-etikett);
  color: var(--tinte-2); cursor: pointer;
}
.ansicht-knopf svg { width: 20px; height: 20px; }

/* ---------- 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);
  }
}

/* ---------- 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); }
.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);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 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-flaeche) 50%, transparent);
  transition: width var(--dur-mittel) 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-flaeche) 60%, transparent);
}
.phasenreise__punkt--aktuell {
  width: 22px; height: 22px; background: var(--volt-violett-text);
  box-shadow:
    0 0 8px 1px color-mix(in srgb, var(--volt-violett-flaeche) 75%, transparent),
    0 0 20px 5px color-mix(in srgb, var(--volt-violett-flaeche) 45%, 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="dark"]) .phasenreise__spur-fuellung { box-shadow: 0 0 3px 0 color-mix(in srgb, var(--volt-violett-flaeche) 18%, transparent); }
  :root:not([data-theme="dark"]) .phasenreise__punkt--erledigt { box-shadow: 0 0 3px 0 color-mix(in srgb, var(--volt-violett-flaeche) 20%, transparent); }
  :root:not([data-theme="dark"]) .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);
  }
}
[data-theme="light"] .phasenreise__spur-fuellung { box-shadow: 0 0 3px 0 color-mix(in srgb, var(--volt-violett-flaeche) 18%, transparent); }
[data-theme="light"] .phasenreise__punkt--erledigt { box-shadow: 0 0 3px 0 color-mix(in srgb, var(--volt-violett-flaeche) 20%, transparent); }
[data-theme="light"] .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; }
}

.phasen-erklaerung-knopf { min-height: 44px; padding: 8px 4px; background: transparent; border: 0; color: var(--volt-hellblau); font-family: var(--schrift-ubuntu); font-size: calc(14px * var(--textgroesse-skala)); cursor: pointer; text-align: left; }
.phasen-erklaerung { background: var(--einschub); border-radius: var(--r-einschub); padding: 16px; margin-top: 8px; font-size: calc(15px * var(--textgroesse-skala)); 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; }
.beitrag__text { font-size: calc(var(--t-body) * var(--textgroesse-skala)); 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; }
.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) {
  .kopf { height: 72px; padding-inline: 48px; }
  .kopf__logo { height: 26px; }
  .kopf__wappen { height: 32px; }
  .bereich { padding-inline: 48px; }
  .subnav { padding-inline: 48px; }
}