/* ============================================================
   SARTU — Bauteile des internen Bereichs

   tokens.css wird VOR dieser Datei eingebunden. Hier steht
   keine Farbe, kein Radius und keine Abstandsstufe als Zahl —
   nur Variablen aus tokens.css. Eine Zahl im Bauteil ist ein
   Abgabefehler (SARTU_DESIGNSYSTEM.md).

   Lime ist Flaeche, nie Schrift auf hellem Grund: gemessen
   1,32:1 gegen Creme. Auf Lime steht immer --ink (12,48:1).
   Jede Lime-Flaeche auf hellem Grund traegt 1px --line.

   Kunden- und Adminbereich muessen visuell unterscheidbar
   sein (CODEX_AUFTRAG_PORTAL.md §4). Der interne Bereich
   traegt deshalb ein dunkles Kopfband, der Kundenbereich
   spaeter keines.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100%;
}

/* ---- Grundgeruest ---------------------------------------- */

.bahn {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.schmal { max-width: 46rem; }

main { padding-top: var(--s-5); padding-bottom: var(--s-7); }

/* ---- Bereichsgeruest: Leiste links, Flaeche rechts -------
   `design/portalkonzept.html`, abgenommen 03.08.2026. Bis zum
   10.08.2026 stand hier ein waagerechtes Kopfband ueber volle
   Breite; der Vermerk in design/PORTAL_DESIGNSTAND.md fuehrte
   es als „beim Uebertragen ersetzen".
   ---------------------------------------------------------- */

.bereichseite { background: var(--cream); }

/* Die Sprungmarke liegt ausserhalb des Bildes, bis sie den Fokus bekommt.
   Dieselbe Regel wie in website.css — sie stand dort und fehlte hier, weil
   der Anwendungsbereich bis zum 10.08.2026 keine hatte. */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-3);
  border-radius: 0 0 var(--r-s) 0;
  z-index: 100;
}

.sprungmarke:focus { left: 0; }

/* Das Zeichen-Sprite liegt ausserhalb des Textflusses. Es traegt `width=0`
   und `height=0`, aber ein Inline-Element erzeugt trotzdem eine Zeilenbox —
   und die schob den ganzen Bereich am 13.08.2026 um 29 px nach unten. Sichtbar
   war es als weisser Streifen ueber der dunklen Leiste.

   Die Angabe stand vorher als `style`-Attribut im Markup und war wirkungslos:
   Die CSP setzt `style-src 'self'` ohne `unsafe-inline`. */
.zeichensatz { position: absolute; }

.bereich {
  display: grid;
  grid-template-columns: 17rem 1fr;
  min-height: 100vh;
  align-items: stretch;
}

/* Die Aussenkante bleibt rechtwinklig — der Bereich fuellt das
   Fenster, und eine Rundung aussen gaebe es nicht zu sehen.
   Gerundet ist allein die rechte Kante der Leiste. */
.rail {
  background: var(--ink);
  color: var(--rail-text);
  border-radius: 0 var(--r-l) var(--r-l) 0;
  padding: var(--s-4) var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.rail--intern { background: var(--ink-2); }

@media (min-width: 901px) {
  html:has(body.bereichseite),
  body.bereichseite {
    height: 100%;
    overflow: hidden;
  }

  .bereichseite {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  .bereich {
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .rail {
    position: sticky;
    top: 0;
    align-self: start;
    flex: none;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .flaeche {
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

.flaeche > .fussband {
  margin-top: auto;
}

/* Logo oben, Bereichsname darunter — Betreiberentscheidung vom 13.08.2026.
   Vorher standen beide **nebeneinander** auf einer Grundlinie; das Logo ist
   ein Bild von 160 px Breite und haette den Zusatz aus der 17-rem-Leiste
   gedraengt. Untereinander tragen beide ihre volle Groesse. */
.rail-marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: 0 var(--s-2) var(--s-1);
  color: var(--cream);
  text-decoration: none;
}

.rail-marke img {
  display: block;
  width: auto;
  height: 26px;
}

.rail-marke em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--label-dark);
  text-transform: uppercase;
}

.rail-gruppe > .mono {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--rail-label);
  padding: 0 var(--s-2);
  margin-bottom: var(--s-1);
}

/* `:not(.rail-marke)` — diese Regel meint die **Menueeintraege**. Sie stand
   ohne den Ausschluss da und war damit spezifischer als `.rail-marke`, das
   weiter oben steht: Logo und Bereichsname wurden zentriert statt links
   gesetzt, obwohl `.rail-marke` `align-items: flex-start` verlangt. */
.rail a:not(.rail-marke) {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-s);
  color: var(--rail-text);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.rail a:not(.rail-marke):hover { background: var(--ink-3); color: var(--paper); }
.rail a.an { background: var(--ink-3); color: var(--paper); font-weight: var(--fw-head); }

/* Lime traegt allein der aktive Eintrag. Ein Zeichen, das nur
   kennzeichnet, bleibt neutral — SARTU_CORPORATE_DESIGN.md §3
   verbietet Lime fuer Zeichen ohne Aufgabe. */
.rail a .ik { color: var(--rail-ik); transition: color var(--t-fast) var(--ease); }
.rail a:hover .ik { color: var(--paper); }
.rail a.an .ik { color: var(--lime); }

.rail a .zahl {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--rail-zahl);
  font-variant-numeric: tabular-nums;
}

.rail a.an .zahl { color: var(--paper); }

.rail-fuss {
  margin-top: auto;
  padding: var(--s-3) var(--s-2) 0;
  border-top: 1px solid var(--line-dark);
}

.rail-abmelden {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: var(--rail-text);
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
}

.rail-abmelden:hover { background: var(--ink-3); color: var(--paper); }
.rail-abmelden .ik { color: var(--rail-ik); }
.rail-abmelden:hover .ik { color: var(--paper); }

/* Die Zeichen. 24er Raster, 2 Punkt Kontur, Farbe vom Elternteil.
   Entschieden am 10.08.2026 (OFFENE_ENTSCHEIDUNGEN.md, Punkt 9). */
.ik {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.ik-gr { width: 1.625rem; height: 1.625rem; stroke-width: 1.6; }

/* ---- Arbeitsflaeche mit Titelzeile ----------------------- */

.flaeche { min-width: 0; display: flex; flex-direction: column; }

.titelzeile {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--gut);
  border-bottom: 1px solid var(--line);
}

.titelzeile h1 { margin: 0; font-size: var(--fs-h3); }

/* Der Anwendungsbereich hat seinen **eigenen** Satzspiegel und folgt `--wrap`
   nicht. `design/portalkonzept.html` Zeile 53 setzt ihn auf 1320 px; daneben
   steht links die Leiste, die von der Fensterbreite schon abgeht. Vor dem
   13.08.2026 fiel das nicht auf, weil `--wrap` fest auf 1180 px stand und der
   Unterschied nur 140 px betrug. Mit dem fliessenden Satzspiegel der Website
   (bis 1800 px) waere der Kundenbereich mitgewachsen — die Vorgabe fuer ihn
   steht aber im Portalentwurf, nicht im Startseitenentwurf. */
.flaeche__inhalt {
  padding: var(--s-5) var(--gut) var(--s-7);
  max-width: 1320px;
  width: 100%;
}

/* Unter 900 px legt sich die Leiste ueber die volle Breite und
   die Eintraege laufen als Zeile. Ein ausklappbares Menue waere
   ein zweiter Bedienweg fuer neun Eintraege. */
@media (max-width: 900px) {
  .bereich { grid-template-columns: 1fr; }

  .rail {
    border-radius: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--gut);
  }

  .rail-gruppe { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
  .rail-gruppe > .mono { display: none; }
  .rail-fuss { margin: 0; padding: 0; border: 0; }
  .titelzeile { padding-left: var(--gut); }
}



/* ---- Schrift --------------------------------------------- */

h1, h2, h3 {
  font-weight: var(--fw-head);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0 0 var(--s-3);
}

h1 { font-size: var(--fs-h2); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h3); margin-top: var(--s-5); }
h3 { font-size: var(--fs-copy); margin-top: var(--s-4); }

p { margin: 0 0 var(--s-3); max-width: 62ch; }

.vorzeile {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 var(--s-2);
}

.leise { color: var(--muted); font-size: var(--fs-small); }

a { color: var(--text); text-underline-offset: .18em; }

/* ---- Karten ---------------------------------------------- */

.karte {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}

.karte > :last-child { margin-bottom: 0; }

/* ---- Schrittleiste der Ersteinrichtung ------------------- */

.schritte {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: var(--fs-small);
}

.schritte li {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  background: var(--paper);
  color: var(--muted);
}

.schritte li[data-stand="erledigt"] {
  background: var(--lime-soft);
  color: var(--ink);
}

.schritte li[data-stand="hier"] {
  background: var(--lime);
  border-color: var(--line);
  color: var(--ink);
  font-weight: var(--fw-head);
}

/* ---- Formulare ------------------------------------------- */

.feld { margin-bottom: var(--s-3); }

.feld label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-head);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-copy);
  color: var(--text);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: var(--s-2);
}

/* Der Rechtstexteditor ist ein Editor: hoch und in fester Breite.
   Eine interne Notiz ist keiner — sie bekam vorher dieselben 18 rem
   und dieselbe Schreibmaschinenschrift. */

.feld textarea { min-height: 7rem; }

.feld textarea.editor {
  min-height: 18rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible,
.knopf:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.feld__hinweis { margin: var(--s-1) 0 0; font-size: var(--fs-small); color: var(--muted); }

.feldpaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-3);
}

/* ---- Schaltflaechen -------------------------------------- */

.knopf {
  display: inline-block;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-head);
  cursor: pointer;
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  transition: background var(--t-fast) var(--ease);
  /* Lime als Flaeche, --ink als Schrift, --line als Kante. */
  background: var(--lime);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.knopf:hover { background: var(--lime-hover); }
.knopf:active { background: var(--lime-press); }

.knopf--ruhig {
  background: var(--paper);
  color: var(--text);
}

.knopf--ruhig:hover { background: var(--sand); }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-4);
}

/* ---- Meldungen ------------------------------------------- */
/* Es gibt eine Akzentfarbe. Kein Rot fuer Fehler, kein Gruen
   fuer Erfolg (SARTU_DESIGNSYSTEM.md). Unterschieden wird
   ueber Flaeche und Kante, nicht ueber Signalfarben. */

.meldung {
  border: 1px solid var(--line);
  border-left-width: var(--s-1);
  border-radius: var(--r-s);
  background: var(--paper);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
}

.meldung--hinweis { background: var(--lime-soft); }

.meldung ul { margin: var(--s-2) 0 0; padding-left: var(--s-3); }

.meldung > :last-child { margin-bottom: 0; }

/* ---- Listen und Tabellen --------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; }

.liste li {
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: baseline;
  justify-content: space-between;
}

.liste li:last-child { border-bottom: 0; }

/* Eine Rückmeldung gehört zu der Runde über ihr — eingerückt, ohne eigene Trennlinie,
   damit die Runden als Blöcke lesbar bleiben. */
.liste__unterzeile {
  border-bottom: 0;
  padding-top: 0;
  padding-left: var(--s-4);
  color: var(--muted);
}

.marke {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-2);
  color: var(--label);
  background: var(--sand);
}

.marke[data-stand="freigegeben"] { background: var(--lime); color: var(--ink); }

.pruefliste { list-style: none; margin: 0; padding: 0; }

.pruefliste li {
  display: flex;
  gap: var(--s-2);
  justify-content: space-between;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}

.pruefliste li:last-child { border-bottom: 0; }

/* Block 3 des Cockpits (§8.1). Eine Zeile je offenem Punkt, der Zusatz darunter — nicht
   daneben: Bei schmalem Fenster stünde er sonst unter dem halben Link. */
.punkteliste { list-style: none; margin: 0; padding: 0; }

.punkteliste li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}

.punkteliste li:last-child { border-bottom: 0; }

.punkteliste__hinweis {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  color: var(--muted);
}

.schluesselwert {
  font-family: var(--font-mono);
  font-size: var(--fs-copy);
  letter-spacing: var(--ls-mono);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: var(--s-2);
  overflow-wrap: anywhere;
}

/* ---- Fussbereich ----------------------------------------- */

.fussband {
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
  padding-bottom: var(--s-5);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ============================================================
   Bedarfsscheck — Website-Lastenheft §9

   Der oeffentliche Bereich traegt kein dunkles Kopfband; das
   unterscheidet ihn sichtbar vom internen Bereich.

   Zustaende nie allein ueber Farbe (§2, Barrierefreiheit): ein
   fehlerhaftes Feld traegt eine staerkere Kante UND eine
   Meldung im Text. Es gibt weiterhin kein Rot.
   ============================================================ */

.lead {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  margin-bottom: var(--s-4);
}

.fussnote {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--s-4);
}

.punkte {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.punkte li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-small);
}

/* ---- Eine Frage des Bedarfsschecks ----------------------- */

.frage {
  border: 0;
  margin: 0 0 var(--s-4);
  padding: 0;
}

.frage > legend,
.frage > label {
  display: block;
  padding: 0;
  margin-bottom: var(--s-1);
  font-size: var(--fs-copy);
  font-weight: var(--fw-head);
}

.frage--fehler {
  border-left: var(--s-1) solid var(--ink);
  padding-left: var(--s-3);
}

.frage__hilfe {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-small);
  color: var(--muted);
}

.frage__fehler {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-head);
  color: var(--ink);
}

.frage__optional { font-weight: 400; color: var(--muted); }

.frage input[type="text"],
.frage input[type="email"],
.frage input[type="tel"],
.frage textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-copy);
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: var(--s-2);
  margin-bottom: var(--s-2);
}

.frage textarea { min-height: 7rem; }

.frage input:focus-visible,
.frage textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- Auswahlgruppen -------------------------------------- */

.wahl { list-style: none; margin: 0; padding: 0; }

.wahl li {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-1);
}

.wahl label { font-size: var(--fs-copy); }

.wahl__hilfe {
  display: block;
  font-size: var(--fs-small);
  color: var(--muted);
}

.haken {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  max-width: 62ch;
}

.haken label { font-size: var(--fs-copy); }

/* ---- Preisblock der Ergebnisseite ------------------------ */

.preisblock {
  background: var(--lime-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}

.preisblock__zeile { font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.preisblock__jahr { margin-bottom: var(--s-3); }
.preisblock > :last-child { margin-bottom: 0; }

/* ---- Honigtopf ------------------------------------------- */
/* Nicht display:none — ein unsichtbares Feld, das trotzdem im
   Quelltext steht, ist genau die Falle (§9.5b). */

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Beschriftungen INNERHALB einer Frage — Vorname und Nachname stehen
   unter einer gemeinsamen Legende, brauchen aber je eine eigene. */

.frage label:not(:first-child) {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-small);
  color: var(--muted);
}

.wahl label:not(:first-child) { font-size: var(--fs-copy); color: var(--text); }
.haken label:not(:first-child) { font-size: var(--fs-copy); color: var(--text); }

/* Es gibt EINE Akzentfarbe. Ohne diese Zeile faerbt der Browser
   Haken und Punkte in seinem eigenen Blau — eine zweite Farbe,
   die niemand entschieden hat. */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--lime);
  width: var(--s-3);
  height: var(--s-3);
  flex: none;
}

/* ---- Tabellen des internen Bereichs ---------------------- */
/* Die Anfrageliste hat sieben Spalten. Auf dem Telefon passt
   das nicht — die Tabelle scrollt in ihrem eigenen Rahmen,
   die Seite nicht. */

.tabellenrahmen { overflow-x: auto; }

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.tabelle th,
.tabelle td {
  text-align: left;
  padding: var(--s-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Nur die Spalten, in denen ein Umbruch den Wert zerreisst: Datum und
   Kennzeichen. Firma und Name duerfen umbrechen — sonst ist die Tabelle
   breiter als der Bildschirm, obwohl sie hineinpasst. */

.tabelle td:first-child,
.tabelle td:last-child,
.tabelle .marke { white-space: nowrap; }

.tabelle th {
  font-weight: var(--fw-head);
  color: var(--label);
}

.tabelle tbody tr:last-child td { border-bottom: 0; }

.filterzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
  margin-bottom: var(--s-4);
}

.filterzeile .feld { margin-bottom: 0; }

/* Das Ampelkennzeichen. Kein Rot, kein Gelb, kein Orange —
   es gibt eine Akzentfarbe. Unterschieden wird ueber Flaeche
   und Kante, und das Wort steht ohnehin daneben. */

.marke[data-stand="standard"] { background: var(--paper); }
.marke[data-stand="gelb"]     { background: var(--sand); }
.marke[data-stand="orange"]   { background: var(--lime-soft); }
.marke[data-stand="rot"]      { background: var(--lime); }

/* ============================================================
   Kundenbereich

   Er muss sich vom internen Bereich unterscheiden lassen
   (CODEX_AUFTRAG_PORTAL.md §4). Der interne traegt ein dunkles
   Kopfband, der Kundenbereich ein helles mit Lime-Kante.
   Dieselben Gestaltungswerte, andere Flaeche — keine zweite
   Farbwelt.
   ============================================================ */

.karte--betont {
  background: var(--lime-soft);
  border-color: var(--line);
}

/* Die sieben Stationen aus §8.1. Der Stand steht als Wort im
   data-Attribut UND als Textzusatz — Zustaende nie allein ueber
   Farbe (Website-Lastenheft §2). */

.stationen {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: var(--fs-small);
}

.stationen li {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  background: var(--paper);
  color: var(--muted);
}

.stationen li[data-stand="erledigt"] { background: var(--lime-soft); color: var(--ink); }

.stationen li[data-stand="hier"] {
  background: var(--lime);
  color: var(--ink);
  font-weight: var(--fw-head);
}

.stationen li[data-stand="hier"]::after { content: " · hier"; font-weight: 400; }

.spaltenpaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.liste--einfach li {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: var(--s-2) 0;
}

.ueberspringen { margin-top: var(--s-3); }

.textknopf {
  font: inherit;
  font-size: var(--fs-small);
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.textknopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Fokusmarke, die auf hellem und auf dunklem Grund sichtbar bleibt
   — 20.09.2026

   Vorher: `outline: 2px solid var(--ink)` ueberall. Auf weissem Grund ergibt
   das 19,2 : 1, auf den dunklen Baendern (`--ink`) aber 1,0 : 1 — der Rahmen
   hatte exakt die Hintergrundfarbe und war unsichtbar. Betroffen war jeder
   Knopf und jeder Verweis in einem dunklen Abschnitt, in der Fusszeile und im
   Menue, also genau dort, wo die wichtigsten Ziele liegen.

   Jetzt liegen zwei Ringe uebereinander: innen die Tinte, aussen ein heller
   Saum. Auf Weiss traegt der innere Ring, auf Dunkel der aeussere. WCAG 2.4.11
   verlangt 3 : 1 gegen den Untergrund; beide Faelle liegen deutlich darueber.
   -------------------------------------------------------------------------- */

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible,
.knopf:focus-visible,
.textknopf:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--paper) 92%, transparent);
}