/* bausteine.css -- die Bausteine der Oberflaeche M2 (uep#175, Spec §3/§6).
   Port aus dem Prototyp (docs/superpowers/specs/2026-10-15-oberflaeche-
   prototyp/proto/proto.css, Abschnitte Huelle bis Schmal). Werte nur ueber
   Tokens aus tokens.css; Klassen passen zu den Makros unter
   app/vorlagen/bausteine/. Kein globaler Reset (margin/padding).
   Der Uebergangs-Scope `:where(.seite-neu)` und das alte Stilblatt
   sind mit I2 entfallen; ihre Abwesenheit bewacht test_oberflaeche.py
   Abschnitt 3. */
@layer bausteine {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: var(--font-text); color: var(--color-text); background: var(--color-sand); line-height: 1.5; }
  .band h1 { font-family: var(--font-titel); letter-spacing: -.01em; line-height: 1.15; }
  :focus-visible { outline: 3px solid var(--color-schwarz); outline-offset: 2px; }
  /* Seitenuebergaenge pausiert, bis Manuel entscheidet, ob pruefungen/sichtpruefung.py Chromiums "Transition was skipped" ignorieren darf (uep#175). */
  /* proto.css: a { color: inherit } -- nur an den Baustein-Links, nicht global */
  .leiste a, .liste a.eintrag, .link, .band .meta a, .leer a { color: inherit; }

  /* ---------- Huelle: Seitenleiste + Inhalt ---------- */
  .huelle { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
  .huelle.einspaltig { grid-template-columns: 1fr; }
  .leiste { background: var(--color-weiss); border-right: 1px solid var(--color-grau-2); padding: 26px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
  .leiste .logo { margin-bottom: 34px; }
  .leiste .logo img { height: 22px; display: block; }
  .leiste a.punkt { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-size: 15px; margin-bottom: 2px; transition: background .15s; }
  .leiste a.punkt:hover { background: var(--color-sand); }
  .leiste a.punkt[aria-current="page"] { background: var(--color-schwarz); color: var(--color-gelb); font-weight: 700; }
  .leiste .zahl { background: var(--color-gelb); color: var(--color-schwarz); border-radius: var(--radius-voll); font-size: 11px; font-weight: 700; padding: 1px 7px; }
  /* Gruppen je Bereich (uep#223): <details> ohne Skript, die Klappzeile traegt den Bereichsnamen. */
  .leiste details.gruppe { margin-top: 18px; }
  .leiste details.gruppe > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-grau-5); padding: 6px 12px; margin-bottom: 4px; border-radius: 8px; }
  .leiste details.gruppe > summary::-webkit-details-marker { display: none; }
  .leiste details.gruppe > summary::after { content: "▸"; transition: transform .2s; }
  .leiste details.gruppe[open] > summary::after { transform: rotate(90deg); }
  .leiste details.gruppe > summary:hover { color: var(--color-text); }
  .leiste details.gruppe > summary a { text-decoration: none; }
  .leiste details.gruppe > summary a:hover, .leiste details.gruppe > summary a[aria-current="page"] { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
  .leiste details.gruppe > summary:focus-visible { outline: 3px solid var(--color-schwarz); outline-offset: 2px; }
  .leiste .fuss { margin-top: auto; font-size: 13px; color: var(--color-grau-5); padding: 0 12px; }
  .leiste .fuss b { display: block; color: var(--color-text); }
  .inhalt-spalte { min-width: 0; }
  /* Abmelden als ruhiger Textknopf, nicht als Hauptknopf. */
  .leiste .fuss button { all: unset; cursor: pointer; text-decoration: underline; font-size: 13px; color: var(--color-grau-5); }
  .leiste .fuss button:focus-visible { outline: 3px solid var(--color-schwarz); outline-offset: 2px; }

  /* ---------- Band (Seitenkopf in Gelb) ---------- */
  .band { background: var(--color-gelb); padding: 30px var(--spacing-rand) 28px; position: relative; overflow: hidden; }
  .band::after { content: ""; position: absolute; right: 40px; top: -60px; width: 260px; height: 260px; background: var(--color-schwarz); opacity: .05; clip-path: polygon(0 50%, 100% 0, 100% 100%); pointer-events: none; }
  .band.ruhig { padding-bottom: 34px; }
  .band .zurueck { font-size: 14px; text-decoration: none; color: var(--color-schwarz-65); }
  .band .zurueck:hover { color: var(--color-schwarz); }
  .band h1 { font-size: 42px; letter-spacing: -.02em; margin: 6px 0 4px; }
  .band .meta { font-size: 13px; color: var(--color-schwarz-60); }
  .band .einzeiler { font-size: 17px; margin: 6px 0 0; max-width: 60ch; }
  /* Aktionszeile (uep#223): seitenweite Operationen, volle Knoepfe, oben im Band. */
  .band .aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
  .band .aktionen form { display: contents; }

  /* ---------- Etappen ---------- */
  .etappen { display: flex; gap: 6px; margin-top: 22px; }
  .etappen i { flex: 1; height: 5px; border-radius: 3px; background: var(--color-schwarz-13); }
  .etappen i.da { background: var(--color-schwarz); }
  .etappen-namen { display: flex; list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--color-schwarz-60); }
  .etappen-namen li { flex: 1; }
  .etappen-namen b { color: var(--color-schwarz); }

  /* ---------- Inhalt ---------- */
  /* Oben Luft zum Band: kein Block klebt mehr an der gelben Leiste (Feedback 16.10., PF-A1). */
  .inhalt { padding: var(--spacing-band) var(--spacing-rand) var(--spacing-rand); display: grid; gap: var(--spacing-spalt); }
  .inhalt.frei { padding-top: 28px; }
  .zeile { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-spalt); }
  .zeile.halb { grid-template-columns: 1fr 1fr; }
  .zeile.drittel { grid-template-columns: repeat(3, 1fr); }

  .fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .fakt { background: var(--color-sand); padding: 14px 16px; border-radius: 12px; }
  .fakt b { display: block; font-family: var(--font-titel); font-size: 26px; }
  .fakt span { font-size: 13px; color: var(--color-grau-5); }
  a.fakt { color: inherit; text-decoration: none; }
  a.fakt:hover b, a.fakt:focus-visible b { text-decoration: underline; }

  .leise { color: var(--color-grau-5); font-size: 14px; }
  .link { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-taupe); }
  .link:hover { text-decoration-color: var(--color-schwarz); }
  .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

  /* ---------- Listen (Bestellungen, To-dos, Kurse) ---------- */
  .liste { background: var(--color-weiss); border-radius: var(--radius-karte); box-shadow: var(--shadow-karte); overflow: hidden; }
  .liste a.eintrag, .liste .eintrag { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 18px 24px; text-decoration: none; border-top: 1px solid var(--color-grau-2); transition: background .15s; }
  .liste .eintrag:first-child { border-top: 0; }
  .liste a.eintrag:hover { background: var(--color-sand); }
  .liste .eintrag .titel { font-family: var(--font-titel); font-size: 16px; }
  .liste .eintrag .unter { font-size: 13px; color: var(--color-grau-5); margin-top: 2px; }
  .liste .pfeil { font-size: 18px; color: var(--color-grau-5); }

  /* ---------- Formular ---------- */
  .feld { display: grid; gap: 6px; margin-bottom: 18px; }
  .feld label { font-weight: 700; font-size: 15px; }
  .feld .hilfe { font-size: 13px; color: var(--color-grau-5); margin: 0; }
  .feld input, .feld textarea, .feld select { font: inherit; font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--color-warmgrau); border-radius: 12px; background: var(--color-weiss); width: 100%; }
  .feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--color-schwarz); box-shadow: 0 0 0 3px var(--color-gelb); }
  .feld .feld-fehler { font-size: 13px; font-weight: 700; color: var(--color-fehler); margin: 0; }

  /* ---------- Aufklappen (Verlauf, Details) ---------- */
  /* min-width:0: als Gitter-Element der .inhalt darf die Klappe schmaler werden als
     der breiteste Inhalt (uep#223, Sichtprobe 360 px); die Anzahl steht direkt
     neben dem Titel, der Pfeil rechts (margin-left:auto). */
  details.klappe { background: var(--color-weiss); border-radius: 14px; box-shadow: var(--shadow-karte); min-width: 0; }
  details.klappe > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 16px 24px; font-size: 14px; }
  details.klappe > summary b { min-width: 0; overflow-wrap: anywhere; }
  details.klappe > summary::-webkit-details-marker { display: none; }
  details.klappe > summary b { font-family: var(--font-titel); font-size: 15px; }
  details.klappe > summary::after { content: "▸"; color: var(--color-grau-5); transition: transform .2s; margin-left: auto; }
  details.klappe[open] > summary::after { transform: rotate(90deg); }
  details.klappe .klappe-inhalt { padding: 0 24px 20px; min-width: 0; }
  /* Sprungmarke (/marktberichte/mein#abos, uep#223): nur so weit scrollen,
     bis die Klappzeile im Bild ist -- steht sie schon auf dem ersten
     Bildschirm, bleibt die Seite oben und mit ihr Band und Leiste. */
  details.klappe[id] { scroll-margin-top: calc(100svh - 8rem); }

  /* ---------- Leerzustand ---------- */
  .leer { text-align: center; padding: 48px 24px; color: var(--color-grau-5); }
  .leer b { display: block; font-family: var(--font-titel); font-size: 20px; color: var(--color-text); margin-bottom: 6px; }

  .absender { padding: 24px var(--spacing-rand); font-size: 13px; color: var(--color-grau-5); }

  /* Lange Woerter (Kennung als Kurstitel, Dateinamen) brechen um, statt
     bei 390 px seitlich zu schieben (Review Focus 1). */
  .band h1, .titel, .fakt b, .eintrag .unter, .meta, .kernaussage,
  [data-bereich^="marktbericht"] { overflow-wrap: anywhere; }

  /* ---------- Jetzt-Karte, Karten, Knoepfe, Marken, Formular ---------- */
  .jetzt h2, .karte h3, .abschnitt-titel { font-family: var(--font-titel); letter-spacing: -.01em; line-height: 1.15; }
  .abschnitt-titel { font-size: 15px; margin: 8px 0 -6px; }
  .zeitleiste li { overflow-wrap: anywhere; }

  /* Die EINE Stelle fuer Zustand + naechsten Schritt (ADR-0061) */
  .jetzt { background: var(--color-weiss); border-radius: 22px; padding: 22px 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; box-shadow: var(--shadow-karte); }
  .jetzt .marke-rund { width: 44px; height: 44px; border-radius: 50%; background: var(--color-schwarz); color: var(--color-gelb); display: grid; place-items: center; font-family: var(--font-titel); font-size: 18px; }
  .jetzt.still .marke-rund { background: var(--color-ok-flaeche); color: var(--color-ok); }
  .jetzt.warten .marke-rund { background: var(--color-grau-2); color: var(--color-text); }
  .jetzt h2 { font-size: 20px; margin: 0; }
  .jetzt p { color: var(--color-grau-5); margin: 3px 0 0; }

  .karte { background: var(--color-weiss); border-radius: var(--radius-karte); padding: 24px; box-shadow: var(--shadow-karte); }
  .karte h3 { font-size: 17px; margin: 0 0 14px; }
  .karte .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .karte .kopfzeile h3 { margin: 0; }
  /* Klappkarte (uep#223): eine Karte als <details>, die Klappzeile traegt den Titel. */
  details.klappkarte > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; }
  details.klappkarte > summary::-webkit-details-marker { display: none; }
  details.klappkarte > summary h3 { margin: 0 auto 0 0; }
  details.klappkarte > summary::after { content: "▸"; color: var(--color-grau-5); transition: transform .2s; }
  details.klappkarte[open] > summary { margin-bottom: 14px; }
  details.klappkarte[open] > summary::after { transform: rotate(90deg); }
  details.klappkarte > summary:focus-visible { outline: 3px solid var(--color-schwarz); outline-offset: 4px; border-radius: 4px; }
  .karte.berichtfilter .feld { margin-bottom: 0; }
  /* uep#223: Kategorie und Region nebeneinander, am Telefon untereinander; Marken am Eintrag brechen um (bis 60 Zeichen). */
  .berichtfilter-auswahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
  [data-bereich="marktbericht-abschnitt"] .marken { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; vertical-align: middle; }
  [data-bereich="marktbericht-abschnitt"] .marken .marke { white-space: normal; }
  /* uep#223 (23.10.2026): Tabellenzeile eines eigenen Rechtstraegers --
     dieselbe Flaeche wie ein Zuschlag an die Expertis Gruppe; die
     Textmarke sagt es zusaetzlich in Worten. */
  [data-bereich="marktbericht-abschnitt"] tr.eigen td { background: var(--color-ok-flaeche); }
  [data-bereich="marktbericht-abschnitt"] .eigen-marke { font-size: 12px; }
  [data-bereich="marktbericht-block-bewertung"] { margin-top: 12px; }
  /* Der lange Hinweis der Plattform bricht um, statt die Seite am Telefon zu verbreitern (390 px: 546). */
  [data-bereich="marktbericht-kennzeichnung"] .marke { white-space: normal; border-radius: 12px; }
  /* --- uep#223 Marktbericht-Kopfblock (PF-20261021-d35883, -ae1c83) --- */
  /* Zusammenfassung + Zentrale Erkenntnisse: ein Block, anders als die Berichtskarten. */
  .karte.kopfblock { border-left: 8px solid var(--color-gelb); }
  .karte.kopfblock > [data-bereich="marktbericht-zeitraum"] { margin: 0 0 10px; }
  .karte.kopfblock [data-bereich="marktbericht-zusammenfassung"] h3 { font-size: 20px; }
  .karte.kopfblock [data-bereich="marktbericht-kernaussagen"] { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-grau-2); }
  /* Der Hinweis der Plattform steht in der Klappzeile und bleibt zugeklappt sichtbar. */
  details.klappkarte > summary:has(.klapp-hinweis) { flex-wrap: wrap; }
  details.klappkarte > summary .klapp-hinweis { order: 3; flex-basis: 100%; }
  /* --- Ende Marktbericht-Kopfblock --- */
  /* uep#223: Bewertungsknoepfe je Element; "nicht interessant" daempft und klappt zu. */
  form.bewertung { margin: 10px 0 18px; }
  .bewertung-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  /* uep#223 Sichtprobe: umbrechend in Zeilen (360 px: 2x2), nicht einzeln gestapelt;
     Touchziel mindestens 44 px. */
  .bewertung-knoepfe .knopf { white-space: normal; min-height: 44px; }
  .bewertung-knoepfe .knopf:not(.leise) { flex: 1 1 96px; min-width: 0; align-self: stretch; padding-left: 12px; padding-right: 12px; justify-content: center; text-align: center; }
  /* uep#223 (Manuel 22.10.2026): eigene Zeile, damit die vier Knoepfe nicht schrumpfen. */
  .bewertung-zurueck .knopf { min-height: 44px; }
  details.bewertung-kommentar { margin-top: 8px; }
  details.bewertung-kommentar > summary, details.bewertung-aus > summary { cursor: pointer; }
  details.bewertung-kommentar textarea { width: 100%; margin: 8px 0 4px; }
  .bewertung-gedaempft details:not([open]) > summary { color: var(--color-grau-5); }
  /* uep#223 (PF-20261021-10e024, -bd73af): Kachelraster -- so viele
     Spalten, wie Platz ist; schmal eine. Die Kachel stapelt Text oben und
     Links samt Stern-Knopf unten. */
  .kachelraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--spacing-spalt); }
  .kachelraster > .karte { display: flex; flex-direction: column; min-width: 0; padding: 20px; }
  .kachelraster > .karte .kopfzeile { flex-wrap: wrap; margin-bottom: 10px; }
  /* Der ganze Text steht da (uep#223 Sichtprobe); die Kachel waechst, der Fuss bleibt unten. */
  .kachel-text { margin: 0 0 14px; font-size: 14px; }
  .kachel-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
  .kachel-links { display: grid; gap: 4px; font-size: 14px; min-width: 0; }
  .kachel-fuss form { margin: 0; flex: none; }
  .knopf.stern { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 2px var(--color-grau-2); font-size: 24px; line-height: 1; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .knopf.stern[aria-pressed="true"] { background: var(--color-gelb); box-shadow: inset 0 0 0 2px var(--color-schwarz); }
  /* uep#223: Stern an einer Kategorie der Ausgabe -- neben der Klappzeile,
     nicht in ihr (ein Klick dort klappte auf). Die Huelle legt den Knopf
     oben rechts auf die Karte; die Klappzeile laesst ihm Platz. Blendet der
     Berichtfilter den Abschnitt aus, geht die Huelle mit. */
  .abschnitt-stern { position: relative; min-width: 0; }
  .abschnitt-stern:has(> details[hidden]) { display: none; }
  .abschnitt-stern > form { position: absolute; top: 14px; right: 14px; margin: 0; z-index: 1; }
  .abschnitt-stern > details.klappkarte > summary { padding-right: 52px; flex-wrap: wrap; }
  /* Schmal reicht der Platz neben dem Stern nicht fuer Titel UND Zahl: der
     Titel behaelt mindestens 10em (kein Wort bricht mitten durch), Zahl und
     Pfeil ruecken dann in die naechste Zeile. Breit bleibt alles in einer. */
  .abschnitt-stern > details.klappkarte > summary h3 { flex: 1 1 10em; min-width: 0; }
  /* Die Eintragszahl der Klappzeile bricht nie Buchstabe fuer Buchstabe
     (Review uep#223, 360 px): sie behaelt ihre Breite, der Titel bricht. */
  details.klappkarte > summary > span.leise { white-space: nowrap; flex: none; }
  /* Filterschalter je Berichtsgruppe (uep#223): umbrechende Zeile ueber dem
     Raster; gedrueckt = Gruppe wird angezeigt. */
  .gruppenschalter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
  .gruppenschalter form { margin: 0; }
  .knopf.schalter { font-size: 14px; padding: 9px 16px; min-height: 44px; background: var(--color-weiss); color: var(--color-grau-5); box-shadow: inset 0 0 0 2px var(--color-grau-2); text-decoration: line-through; }
  .knopf.schalter[aria-pressed="true"] { background: var(--color-gelb); color: var(--color-schwarz); box-shadow: inset 0 0 0 2px var(--color-schwarz); text-decoration: none; }
  a.karte { display: block; color: inherit; text-decoration: none; transition: transform .18s, box-shadow .18s; }
  a.karte:hover { transform: translateY(-2px); box-shadow: var(--shadow-hoch); }

  /* ---------- Knoepfe ---------- */
  .knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--color-schwarz); color: var(--color-gelb); font-family: var(--font-titel); font-size: 16px; padding: 14px 22px; border-radius: var(--radius-voll); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform .2s, box-shadow .2s; }
  .knopf:hover { transform: translateY(-2px); box-shadow: var(--shadow-knopf); }
  .knopf.zweit { background: var(--color-weiss); color: var(--color-schwarz); box-shadow: inset 0 0 0 2px var(--color-schwarz); }
  .knopf.klein { font-size: 14px; padding: 9px 16px; }
  .knopf.leise { background: transparent; color: var(--color-schwarz); box-shadow: none; padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 4px; }
  .knopf[aria-disabled="true"] { opacity: .35; pointer-events: none; }

  /* ---------- Marken (Zustand kurz, in Listen) ---------- */
  .marke { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-voll); background: var(--color-grau-2); white-space: nowrap; }
  .marke.dran { background: var(--color-gelb); }
  .marke.ok { background: var(--color-ok-flaeche); color: var(--color-ok); }
  .marke.warn { background: var(--color-warn-flaeche); color: var(--color-warn); }
  .marke.fehler { background: var(--color-fehler-flaeche); color: var(--color-fehler); }

  /* ---------- Tabelle ---------- */
  .tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
  .tabelle th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-grau-5); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--color-grau-2); }
  .tabelle td { padding: 14px 12px; border-bottom: 1px solid var(--color-grau-2); vertical-align: top; }
  .tabelle tr:last-child td { border-bottom: 0; }
  /* Breite Tabellen (uep#223, ausschreibungsradar: 9 Spalten) scrollen im
     Rahmen, nicht die Seite. Zellen brechen nur zwischen Woertern: `anywhere`
     (Marktbericht-Bereich, oben) liesse die Spalten auf ein Zeichen
     schrumpfen ("23.1/0.2/026" bei 1280 px); `break-word` bricht nur ein
     Wort, das allein breiter ist als der Platz -- schmal gestapelt (seiten/
     verwaltung.css) haelt das die Seite ohne Querscrollen. `contain:
     inline-size`: sonst waechst die Karte (Gitter-Element) mit der Tabelle
     und die Seite scrollt doch (1280 px: 1526).  */
  .tabelle-rahmen { overflow-x: auto; contain: inline-size; }
  /* Randschatten (uep#223): ein Schatten steht an jedem Rand, hinter dem
     noch Spalten folgen. Reines CSS: die Schatten (`scroll`) haften am
     Rahmen, die Abdeckungen in Grundfarbe (`local`) wandern mit dem Inhalt
     und decken am Anfang bzw. Ende den Schatten zu. Passt die Tabelle,
     liegen beide Abdeckungen dauerhaft darueber -- auch gestapelt (<= 900
     px). Traegt voraus: Zellen ohne eigenen Hintergrund, Rahmen auf weissem
     Grund (Karte, Aufklapp). */
  .tabelle-rahmen {
    background:
      linear-gradient(to right, var(--color-weiss) 30%, transparent) left / 40px 100% no-repeat local,
      linear-gradient(to left, var(--color-weiss) 30%, transparent) right / 40px 100% no-repeat local,
      linear-gradient(to right, var(--color-tabelle-schatten), transparent) left / 14px 100% no-repeat scroll,
      linear-gradient(to left, var(--color-tabelle-schatten), transparent) right / 14px 100% no-repeat scroll,
      var(--color-weiss);
  }
  .tabelle th, .tabelle td { overflow-wrap: break-word; }

  /* ---------- Wahl (Formular) ---------- */
  .wahl { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
  .wahl label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--color-warmgrau); border-radius: 14px; cursor: pointer; font-weight: 400; }
  .wahl label:has(input:checked) { border-color: var(--color-schwarz); background: var(--color-gelb); }

  /* ---------- Info-Baustein: Erklaerung genau einmal, am Begriff ---------- */
  details.info { display: inline-block; position: relative; }
  details.info summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-grau-2); font-size: 12px; font-weight: 700; vertical-align: middle; }
  details.info summary::-webkit-details-marker { display: none; }
  details.info[open] summary { background: var(--color-schwarz); color: var(--color-gelb); }
  details.info .blase { position: absolute; z-index: 5; top: 28px; left: -10px; width: 300px; max-width: calc(100vw - 32px); background: var(--color-text); color: var(--color-weiss); font-size: 13px; font-family: var(--font-text); font-weight: 400; letter-spacing: normal; line-height: 1.45; padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow-hoch); }

  /* ---------- Zeitleiste (in der Klappe) ---------- */
  .zeitleiste { list-style: none; border-left: 2px solid var(--color-grau-2); margin-left: 6px; padding-left: 18px; display: grid; gap: 12px; font-size: 14px; }
  .zeitleiste li { position: relative; }
  .zeitleiste li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-warmgrau); }
  .zeitleiste time { color: var(--color-grau-5); font-size: 13px; display: block; }

  /* ---------- Feedback-Knopf (ohne Skript: details) ---------- */
  details.feedback-fix { position: fixed; right: 22px; bottom: 22px; z-index: 6; }
  details.feedback-fix > summary { list-style: none; cursor: pointer; background: var(--color-schwarz); color: var(--color-gelb); border-radius: var(--radius-voll); padding: 12px 18px; font-family: var(--font-titel); font-size: 14px; box-shadow: var(--shadow-hoch); }
  details.feedback-fix > summary::-webkit-details-marker { display: none; }
  details.feedback-fix .fix-inhalt { position: absolute; right: 0; bottom: 56px; width: min(360px, calc(100vw - 32px)); background: var(--color-weiss); border-radius: var(--radius-karte); padding: 20px; box-shadow: var(--shadow-hoch); }

  /* ---------- Huelle: Hilfsklassen mit Altnamen ---------- */
  .sprunglink { position: absolute; left: -999px; }
  .sprunglink:focus { left: var(--spacing-rand-schmal); top: var(--spacing-rand-schmal); z-index: 10; background: var(--color-weiss); padding: 8px 12px; border-radius: var(--radius-s); }
  .meldung { background: var(--color-ok-flaeche); color: var(--color-ok); border-radius: var(--radius-m); padding: 12px 16px; margin: 16px var(--spacing-rand) 0; }
  .meldung--warnung { background: var(--color-warn-flaeche); color: var(--color-warn); }
  .nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ---------- Bewegung nur auf Wunsch ---------- */
  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    /* Der Hover-Hub ist Bewegung, auch ohne Uebergang */
    .knopf:hover, a.karte:hover { transform: none; }
  }

  /* ---------- Schmal ---------- */
  @media (max-width: 900px) {
    /* align-content: sonst verteilt min-height: 100vh den Rest auf die Leiste */
    .huelle { grid-template-columns: 1fr; align-content: start; }
    .leiste { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px 16px; }
    .leiste .logo { margin: 0 8px 0 0; }
    .leiste .fuss b { display: none; }
    /* Schmal: jede Gruppe eine eigene Zeile, ihre Punkte nebeneinander darunter. */
    .leiste details.gruppe { flex-basis: 100%; margin-top: 4px; }
    .leiste details.gruppe[open] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
    .leiste details.gruppe > summary { flex-basis: 100%; margin-bottom: 0; }
    /* Abmelden bleibt auch schmal erreichbar, nur der Name tritt ab. */
    .leiste .fuss { margin: 0 0 0 auto; padding: 10px 12px; }
    .band { padding: 22px var(--spacing-rand-schmal); }
    .band h1 { font-size: 30px; }
    .band .aktionen .knopf { white-space: normal; }
    .inhalt { padding: var(--spacing-rand-schmal) var(--spacing-rand-schmal) 96px; }
    .zeile, .zeile.halb, .zeile.drittel, .fakten { grid-template-columns: 1fr; }
    .absender { margin-left: var(--spacing-rand-schmal); margin-right: var(--spacing-rand-schmal); padding: 24px var(--spacing-rand-schmal) 96px; }
    .jetzt { grid-template-columns: 1fr; }
    .meldung { margin-left: var(--spacing-rand-schmal); margin-right: var(--spacing-rand-schmal); }
  }
  /* Infoblase am Telefon: an den Seitenraendern verankert statt am "?" --
     sonst ragt sie rechts hinaus, sobald das "?" in der rechten Haelfte
     sitzt (390 px: scrollWidth 451, uep#175). `static` am details macht den
     naechsten positionierten Vorfahren (Band) oder den Viewport zum Bezug;
     `top: auto` laesst sie unter dem "?" stehen. */
  @media (max-width: 600px) {
    details.info { position: static; }
    details.info .blase { top: auto; left: var(--spacing-rand-schmal); right: var(--spacing-rand-schmal); width: auto; max-width: none; margin-top: 26px; }
  }
}