/* ---------------------------------------------------------------------
   Stilblatt der Proben fuer die vier Seiten unter /fuer/

   Ostwald hat dieses Design am 10.10.2026 abgenommen ("die probe ist
   👍"). Dieses Stilblatt ist der Stilteil jener abgenommenen Probe
   WOERTLICH — nichts angeglichen, nichts verengt.

   Es ist ausdruecklich NICHT das Stilsystem aus src/gestaltung.py:
   groessere Schrift, mehr Luft, runde Karten, deutliche Schatten. Genau
   das war der Punkt. Beim ersten Einbau (P124) wurde es auf
   gestaltung.py umgestellt, und damit war das abgenommene Design weg.
   Wer diese Proben aufspielt: siehe LIESMICH.md, Abschnitt "Der Fehler,
   den P124 gemacht hat".
   --------------------------------------------------------------------- */
:root{
  --grund:#f6f6f7; --flaeche:#ffffff; --flaeche-2:#fafafa;
  --linie-fein:#eae9ec; --linie:#dcdbe0;
  --tinte:#18171b; --gedaempft:#605c6c;
  --akzent-50:#eefaf4; --akzent-200:#b6ebd0; --akzent-500:#15803d; --akzent-700:#0f6b33;
  --band:#18171b; --auf-dunkel:#e8e7ea; --auf-dunkel-stark:#ffffff; --auf-dunkel-matt:#a5a1af;
  --auf-dunkel-linie:#34323a;
  --warn-flaeche:#fdf5e7; --warn:#8a4b00; --warn-rand:#f0dcb4;
  --gut-flaeche:#e2f8ee;
  --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --grund:#121114; --flaeche:#1c1b1f; --flaeche-2:#242328;
  --linie-fein:#2a2930; --linie:#38363f;
  --tinte:#f2f1f4; --gedaempft:#a5a1af;
  --akzent-50:#10281c; --akzent-200:#1d4d36; --akzent-500:#3ecf8e; --akzent-700:#5fdca3;
  --band:#000000; --warn-flaeche:#2e2212; --warn:#f0b871; --warn-rand:#4a3a1c;
  --gut-flaeche:#10281c; color-scheme:dark}}
:root[data-theme="dark"]{
  --grund:#121114; --flaeche:#1c1b1f; --flaeche-2:#242328;
  --linie-fein:#2a2930; --linie:#38363f;
  --tinte:#f2f1f4; --gedaempft:#a5a1af;
  --akzent-50:#10281c; --akzent-200:#1d4d36; --akzent-500:#3ecf8e; --akzent-700:#5fdca3;
  --band:#000000; --warn-flaeche:#2e2212; --warn:#f0b871; --warn-rand:#4a3a1c;
  --gut-flaeche:#10281c; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--grund);color:var(--tinte);font-family:var(--schrift);
  font-size:16px;line-height:1.55;margin:0;-webkit-font-smoothing:antialiased}
.innen{max-width:1080px;margin:0 auto;padding-left:24px;padding-right:24px}

/* Hinweisband — nur in der Probe, auf der echten Seite faellt es weg */
.probe-band{background:var(--warn-flaeche);color:var(--warn);border-bottom:1px solid var(--warn-rand);
  font-size:13px;padding:9px 24px;text-align:center}

/* HELD */
.held{padding-block:clamp(56px,10vw,110px) clamp(40px,6vw,64px)}
.augenbraue{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--akzent-500);
  margin:0 0 18px}
h1{font-size:clamp(34px,6.4vw,66px);line-height:1.04;letter-spacing:-.028em;font-weight:700;
  margin:0;max-width:16ch;text-wrap:balance}
.unter{font-size:clamp(17px,2.2vw,21px);color:var(--gedaempft);max-width:50ch;
  margin:22px 0 0;line-height:1.5}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.knopf{display:inline-flex;align-items:center;gap:8px;background:var(--akzent-500);color:#fff;
  text-decoration:none;font-weight:600;font-size:16px;padding:13px 26px;border-radius:999px;
  border:1px solid transparent;transition:transform .15s ease}
.knopf:hover{transform:translateY(-1px)}
.knopf.leise{background:transparent;color:var(--tinte);border-color:var(--linie)}

/* BILD: ein Ausschnitt aus dem Programm, kein Foto */
.bildrahmen{background:var(--flaeche);border:1px solid var(--linie-fein);border-radius:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px -12px rgba(0,0,0,.14);overflow:hidden}
.bildkopf{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--linie-fein);
  background:var(--flaeche-2)}
.punkt{width:10px;height:10px;border-radius:50%;background:var(--linie)}
.bildkopf .wo{margin-left:10px;font-size:12.5px;color:var(--gedaempft);font-weight:500}
.bildleib{padding:clamp(18px,3vw,30px)}

.beleg{display:grid;grid-template-columns:1fr;gap:14px}
.beleg-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.beleg-von{font-weight:600;font-size:17px}
.beleg-meta{font-size:13px;color:var(--gedaempft);margin-top:2px}
.beleg-summe{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.marke{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  background:var(--akzent-50);color:var(--akzent-700);border:1px solid var(--akzent-200);
  padding:4px 11px;border-radius:999px}
.zeilen{border-top:1px solid var(--linie-fein);padding-top:14px;display:flex;flex-direction:column;gap:9px}
.zeile{display:flex;justify-content:space-between;gap:14px;font-size:14.5px}
.zeile .k{color:var(--gedaempft);min-width:0}
.zeile .v{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.zeile.hebe .v{color:var(--akzent-700);font-weight:700}
.zeile.summe{border-top:1px solid var(--linie-fein);padding-top:9px}
.zeile.summe .k,.zeile.summe .v{font-weight:700;color:var(--tinte)}
.vorschlag{margin-top:4px;background:var(--gut-flaeche);border-radius:12px;padding:14px 16px;
  display:flex;gap:12px;align-items:flex-start}
.vorschlag .haken{color:var(--akzent-500);font-weight:700;font-size:15px;line-height:1.4}
.vorschlag .txt{font-size:14px}
.vorschlag strong{font-weight:600}

/* ABSCHNITTE */
section{padding-block:clamp(44px,7vw,84px)}
h2{font-size:clamp(26px,4vw,40px);line-height:1.12;letter-spacing:-.022em;font-weight:700;
  margin:0 0 16px;max-width:20ch;text-wrap:balance}
/* Die belegten Saetze sind teils lang. Sie werden NICHT gekuerzt
   (LIESMICH.md, Regel 1) — stattdessen traegt ein langer Satz eine
   kleinere Stufe, damit die Seite nicht aus drei Schlagzeilen besteht. */
h2.lang{font-size:clamp(22px,2.7vw,31px);max-width:30ch;line-height:1.2}
.satz{font-size:clamp(16px,1.9vw,18px);color:var(--gedaempft);max-width:54ch;margin:0}
.paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,56px);
  align-items:center}
.paar.gedreht .text{order:2}
@media (max-width:720px){.paar.gedreht .text{order:0}}

/* kleine Bilder */
.mini{background:var(--flaeche);border:1px solid var(--linie-fein);border-radius:16px;
  padding:22px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px -14px rgba(0,0,0,.18)}
.rechnung{display:flex;flex-direction:column;gap:11px}
.feldzeile{display:flex;justify-content:space-between;font-size:14px;gap:12px}
.feldzeile .k{color:var(--gedaempft)}
.feldzeile .v{font-variant-numeric:tabular-nums;font-weight:500}
.trennung{height:1px;background:var(--linie-fein)}
.gross{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.klein-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gedaempft)}

.ustva{display:flex;flex-direction:column;gap:0}
.ustva .z{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;font-size:14px;
  border-radius:8px}
.ustva .z.aktiv{background:var(--akzent-50);font-weight:600}
.ustva .z .nr{color:var(--gedaempft);font-variant-numeric:tabular-nums;font-size:12.5px;
  white-space:nowrap}
.ustva .z.aktiv .nr{color:var(--akzent-700)}

.frage{background:var(--flaeche);border:1px solid var(--linie-fein);border-radius:16px;padding:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px -14px rgba(0,0,0,.18)}
.frage .was{font-weight:600;margin-bottom:14px;font-size:16px}
.wahl{display:flex;flex-direction:column;gap:8px}
.wahl button{all:unset;cursor:default;border:1px solid var(--linie);border-radius:10px;
  padding:12px 14px;font-size:14.5px;display:flex;align-items:center;gap:10px}
.wahl button .kreis{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--linie);flex:none}
.wahl button.gewaehlt{border-color:var(--akzent-500);background:var(--akzent-50)}
.wahl button.gewaehlt .kreis{border-color:var(--akzent-500);
  background:radial-gradient(circle,var(--akzent-500) 0 44%,transparent 46%)}

/* ein leeres Fenster ist auch ein Bild (ruhende Gesellschaft) */
.leer{color:var(--gedaempft);font-size:14px;padding:30px 0;text-align:center;
  border:1px dashed var(--linie);border-radius:12px}

/* Schluss */
.schluss{text-align:center}
.schluss h2{margin-left:auto;margin-right:auto}
.schluss .satz{margin-left:auto;margin-right:auto}
.schluss .knoepfe{justify-content:center}

.notiz{border-top:1px solid var(--linie);margin-top:20px;padding-block:28px 40px;
  font-size:13.5px;color:var(--gedaempft)}
.notiz strong{color:var(--tinte)}

/* Der erste Satz steht unter dem grossen Bild und gehoert zu ihm —
   deshalb kein Paar mit halbleerer Haelfte, sondern eine Zeile. */
.fuehrung{padding-block:clamp(28px,4vw,46px) clamp(40px,6vw,70px)}
.fuehrung h2{max-width:34ch}

/* ---------------------------------------------------------------------
   Zwei Dinge, die erst im Dunkelmodus auffallen
   ---------------------------------------------------------------------
   1. Kartenkante. Projektregel 2: jede Kartenkante haelt im Dunkeln
      mindestens 3,0:1. --linie-fein (#2a2930) auf dem dunklen Grund
      sind 1,2:1 — die Karte verschwindet. Genommen wird derselbe Wert,
      den gestalt.py fuer die Rolle "kante" fuehrt: #6b6875.
   2. Knopfschrift. --akzent-500 wird im Dunkeln hell (#3ecf8e); weisse
      Schrift darauf ist unlesbar. Im Dunkeln schreibt der Knopf dunkel.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--kante:#6b6875}}
:root[data-theme="dark"]{--kante:#6b6875}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bildrahmen,
  :root:not([data-theme="light"]) .mini,
  :root:not([data-theme="light"]) .frage{border-color:var(--kante)}
  :root:not([data-theme="light"]) .wahl button{border-color:var(--kante)}
  :root:not([data-theme="light"]) .knopf{color:#0a1a12}
  :root:not([data-theme="light"]) .knopf.leise{color:var(--tinte)}}
:root[data-theme="dark"] .bildrahmen,
:root[data-theme="dark"] .mini,
:root[data-theme="dark"] .frage,
:root[data-theme="dark"] .wahl button{border-color:var(--kante)}
:root[data-theme="dark"] .knopf{color:#0a1a12}
:root[data-theme="dark"] .knopf.leise{color:var(--tinte)}

/* ---------------------------------------------------------------------
   Der Held mit echtem Foto
   ---------------------------------------------------------------------
   Ostwald am 10.10.2026: "es fehlen immer noch echte bilder also aus
   der menschenwelt". Das Foto traegt kein Wort und erklaert nichts —
   es zeigt die Lage, in der der Leser steckt; der Satz darueber sagt
   sie. Deshalb liegt der Text AUF dem Foto und nicht daneben.

   Lesbarkeit geht vor Bild: ueber dem Foto liegt ein Verlauf von unten
   nach oben, und der Text steht unten, wo der Verlauf am dichtesten
   ist. Gemessen auf dem hellsten dieser vier Fotos.
   --------------------------------------------------------------------- */
.held-foto{position:relative;display:flex;align-items:flex-end;
  min-height:clamp(400px,54vw,620px);overflow:hidden;background:#18171b;
  isolation:isolate}
.heldbild{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.heldlage{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,9,12,.95) 0%,
    rgba(10,9,12,.88) 30%,rgba(10,9,12,.72) 50%,rgba(10,9,12,.30) 78%,
    rgba(10,9,12,.10) 100%)}
.heldwort{padding-block:clamp(34px,6vw,64px);position:relative;width:100%}
.held-foto h1{color:#fff;max-width:17ch}
.held-foto .unter{color:rgba(255,255,255,.86)}
.held-foto .augenbraue{color:#8df0bd}
/* Gemessen auf dem hellsten dieser vier Fotos (weisser Himmel hinter
   dem Bauarbeiter), an der obersten Textzeile: 6,4:1. Der Schatten
   kommt dazu, falls ein spaeteres Foto noch heller ist. */
.heldwort>*{text-shadow:0 1px 16px rgba(10,9,12,.55)}
/* Luft zwischen Foto und erstem Fenster aus dem Programm. */
.held-foto + .innen{margin-top:clamp(28px,5vw,56px)}

/* Die Abschnittsnummern gehoeren zum Stil "Kante" (probe-kante.css).
   Im weichen Stil stehen sie im HTML, aber nicht auf der Seite — so
   bleibt EIN Markup fuer beide Gestaltungen. */
.nr-mono{display:none}
/* ===== RAHMEN: Kopf und Fußleiste, gemeinsamer Baustein =====
   Markup wortgleich aus src/gestaltung.py (Testphase-Band, Sprunglink,
   .kopfleiste, .fussleiste). Aussehen: Kopf hell und durchscheinend wie
   auf der Startseite (startseite_apple.APPLE), Pillen-Knopf; Fuß mit
   Luft, Spalten und Tippflächen ab 44 px. probe.css bleibt unverändert.
   Erzeugt von bauen_zeitachse_antworten_fachwissen_haftung.py. */
.zum-inhalt{position:absolute;left:-9999px;top:0;z-index:60;background:var(--flaeche);
  color:var(--tinte);padding:10px 16px;border-radius:0 0 12px 0;font-weight:600}
.zum-inhalt:focus{left:0}
.testphase{background:var(--flaeche-2);color:var(--gedaempft);font-size:13px;
  border-bottom:1px solid var(--linie-fein);line-height:1.45}
.testphase .innen{display:flex;gap:10px;align-items:flex-start;padding-block:9px}
.testphase .zeichen{flex:none;font-weight:700;color:var(--warn)}
.testphase p{margin:0;max-width:none}
.kopfleiste{position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.80);-webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.kopfleiste .innen{display:flex;align-items:center;gap:22px;min-height:58px}
.kopfleiste .marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--tinte);flex:none;min-height:44px;
  /* probe.css kennt .marke als gruene Pille (Beleg-Bild) - im Kopf nicht */
  background:none;border:0;padding:0;border-radius:0;font-size:inherit;font-weight:inherit}
.kopfleiste .marke svg{width:auto;height:26px}
.kopfleiste .marke-name{font-weight:700;font-size:18px;letter-spacing:-.02em}
.kopfleiste .markenzusatz{font-size:13px;color:var(--gedaempft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.kopfleiste nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.kopfleiste nav a{white-space:nowrap;color:var(--tinte);text-decoration:none;font-size:14px;
  opacity:.88;padding:0 11px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px}
.kopfleiste nav a:hover{opacity:1;background:var(--flaeche-2)}
.kopfleiste nav a.knopf{opacity:1;background:var(--akzent-500);color:#fff;font-weight:600;
  font-size:14px;padding:0 18px;min-height:44px;margin-left:8px;border-radius:999px}
.kopfleiste nav a.knopf:hover{transform:none;background:var(--akzent-700)}
@media (max-width:1150px){.kopfleiste .markenzusatz{display:none}}
@media (max-width:900px){.kopfleiste nav a.weg-schmal{display:none}}
@media (max-width:420px){.kopfleiste .innen{gap:10px}
  .kopfleiste nav a.knopf{padding:0 14px;font-size:13.5px;margin-left:0}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kopfleiste{
  background:rgba(18,17,20,.80);border-bottom-color:rgba(255,255,255,.10)}
  :root:not([data-theme="light"]) .kopfleiste nav a.knopf{color:#0a1a12}}
:root[data-theme="dark"] .kopfleiste{background:rgba(18,17,20,.80);border-bottom-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .kopfleiste nav a.knopf{color:#0a1a12}

.fussleiste{background:var(--flaeche-2);border-top:1px solid var(--linie-fein);
  margin-top:clamp(40px,6vw,72px);padding-block:clamp(36px,5vw,60px) clamp(40px,6vw,72px);
  font-size:14.5px;color:var(--gedaempft)}
.fussleiste .innen{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
.fussleiste a{color:var(--tinte);text-decoration:none;min-height:44px;display:inline-flex;
  align-items:center}
.fussleiste a:hover{text-decoration:underline}
.fussleiste .abstand{display:none}
.fussleiste > .innen{width:100%}
.fussleiste .innen:first-child{order:3}
.fussleiste{display:flex;flex-direction:column}
.fussleiste .mehr{order:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));
  gap:0 24px;padding-bottom:24px;border-bottom:1px solid var(--linie-fein);width:100%}
.fussleiste .mehr .fusstitel{grid-column:1/-1;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gedaempft);margin-bottom:8px}
.fussleiste .klarwort{order:2;padding-block:22px 10px;width:100%}
.fussleiste .klarwort p{margin:0;max-width:64ch;line-height:1.55}
.fussleiste .klarwort b{color:var(--tinte)}
.fussleiste .innen:first-child a{color:var(--gedaempft);text-decoration:underline}
@media print{.kopfleiste,.fussleiste,.testphase{display:none}}
.notiz code{overflow-wrap:anywhere}

/* ===== Seiteninhalt ===== */
.probe-inhalt{display:block}
.held-foto .unter{margin-top:20px}
.held-foto details.fs-i summary{border-color:rgba(255,255,255,.7);color:#fff}
.held-foto details.fs-i[open] .fs-i-text{color:var(--tinte)}
.held-foto + .abschnitt{padding-top:clamp(36px,5vw,64px)}
.abschnitt{padding-block:clamp(32px,5vw,64px)}
.abschnitt + .abschnitt{padding-top:clamp(8px,2vw,24px)}
.abschnitt h2{margin-top:0}
.abschnitt h3{font-size:clamp(19px,2.1vw,23px);line-height:1.22;letter-spacing:-.015em;
  font-weight:700;margin:0 0 10px}
.abschnitt h4{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--akzent-700);margin:34px 0 14px}
.abschnitt p{max-width:68ch;font-size:clamp(16px,1.8vw,17.5px)}
.abschnitt p.leise,.leise{color:var(--gedaempft);font-size:clamp(15px,1.6vw,16px)}
.satz-gross{font-size:clamp(20px,2.4vw,26px)!important;line-height:1.35;letter-spacing:-.012em;
  color:var(--tinte);font-weight:600;margin:0 0 16px}
a{color:var(--akzent-700)}
.karte{background:var(--flaeche);border:1px solid var(--linie-fein);border-radius:18px;
  padding:clamp(20px,3.2vw,34px);margin:0;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px -12px rgba(0,0,0,.14)}
.karte > :first-child{margin-top:0}
.karte > :last-child{margin-bottom:0}
.hinweiskarte{background:var(--flaeche-2);box-shadow:none}
.hinweiskarte p{font-size:clamp(15.5px,1.7vw,17px)}
.hinweis-abschnitt .innen{display:grid;gap:18px}

/* Bild neben Satz */
.bildpaar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(24px,4vw,56px);align-items:center}
.bildpaar .foto{margin:0}
.bildpaar .foto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px -12px rgba(0,0,0,.22)}
.bildpaar .text > :first-child{margin-top:0}
.bildpaar .text > :last-child{margin-bottom:0}
.bildpaar .text p{margin:0 0 12px}
.gedreht .bildpaar .foto{order:2}
@media (max-width:720px){.gedreht .bildpaar .foto{order:0}}
.bildpaar + .rest{margin-top:clamp(28px,4vw,48px)}

/* Kacheln: ein Punkt, eine Kachel */
ul.kacheln{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
ul.kacheln > li{background:var(--flaeche);border:1px solid var(--linie-fein);border-radius:16px;
  padding:20px 22px 22px;color:var(--gedaempft);font-size:15px;line-height:1.5;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px -14px rgba(0,0,0,.18)}
ul.kacheln > li > .kachelkopf{display:block;color:var(--tinte);font-size:clamp(16.5px,1.7vw,18px);
  line-height:1.3;letter-spacing:-.01em;font-weight:700;margin-bottom:8px}

/* Weiterlesen und Lage: Karten zum Antippen */
.lage{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px;
  margin:8px 0 0}
.lage a{display:block;text-decoration:none;color:var(--tinte);background:var(--flaeche);
  border:1px solid var(--linie-fein);border-radius:16px;padding:20px 22px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px -14px rgba(0,0,0,.18);transition:transform .15s ease}
.lage a:hover{border-color:var(--akzent-200);transform:translateY(-1px)}
.lage .ich{font-weight:700;font-size:clamp(17px,1.8vw,19px);line-height:1.3;letter-spacing:-.01em}
.lage .dann{color:var(--gedaempft);font-size:15px;margin-top:6px;line-height:1.5}
.weiterlesen h2{font-size:clamp(22px,2.7vw,30px)}
.abschnitt .rest > h2 + .lage,.abschnitt h2 + .lage{margin-top:22px}

/* Schluss: ein Knopf, in der Mitte */
.schluss{text-align:center}
.schluss h2,.schluss p{margin-left:auto;margin-right:auto}
.schluss .tun{margin:0 0 6px}
.schluss .knopf{font-size:17px;padding:15px 30px;margin-top:14px}
.schluss a.zweiter{display:inline-flex;margin:14px 0 0 10px;padding:14px 22px;border-radius:999px;
  border:1px solid var(--linie);color:var(--tinte);text-decoration:none;font-weight:600}
.schluss .leise{margin-top:18px}

/* Fundstelle: das kleine "i" des Programms */
details.fs-i{display:inline-block;vertical-align:middle;margin:0 0 0 6px}
p + details.fs-i{margin-top:-4px;margin-bottom:10px}
details.fs-i[open]{display:block;margin:8px 0 12px}
details.fs-i > summary{list-style:none;cursor:pointer;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--linie);display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:var(--gedaempft);font-style:italic;user-select:none}
details.fs-i > summary::-webkit-details-marker{display:none}
details.fs-i > summary:hover{border-color:var(--akzent-500);color:var(--akzent-700)}
.fs-i-text{margin-top:8px;background:var(--flaeche-2);border:1px solid var(--linie-fein);
  border-radius:12px;padding:10px 14px;font-size:14px;color:var(--tinte)}
.fs-i-text p{margin:0;font-size:14px!important}

/* Für Profis: zu, bis man es braucht */
details.profi{margin:16px 0 0;border:1px dashed var(--linie);border-radius:12px;padding:0 16px;
  max-width:72ch}
details.profi > summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:14.5px;
  color:var(--akzent-700);min-height:44px;display:flex;align-items:center}
details.profi[open]{padding-bottom:12px}
details.profi p,details.profi li,details.profi blockquote{font-size:14.5px!important}
details.profi blockquote,p.mitteilung{margin:8px 0;padding-left:14px;
  border-left:3px solid var(--akzent-200);color:var(--tinte)}
p.ungeprueft{background:var(--warn-flaeche);color:var(--warn);border:1px solid var(--warn-rand);
  border-radius:12px;padding:10px 14px}

/* Tabellen: ruhig, Zahlen rechtsbündig, auf dem Telefon untereinander */
.rollbar{max-width:100%;margin:10px 0 16px}
.rollbar table{width:100%;border-collapse:collapse;font-size:15px;background:var(--flaeche);
  border:1px solid var(--linie-fein);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px -14px rgba(0,0,0,.14)}
.rollbar caption{text-align:left;font-weight:600;font-size:15px;color:var(--tinte);padding:0 2px 10px;
  caption-side:top}
.rollbar th{text-align:left;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gedaempft);padding:12px 14px;border-bottom:1px solid var(--linie);
  background:var(--flaeche-2)}
.rollbar td{padding:12px 14px;border-bottom:1px solid var(--linie-fein);vertical-align:top;
  overflow-wrap:anywhere}
.rollbar tr:last-child td{border-bottom:0}
.rollbar .zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rollbar td.leise,.rollbar td.klein{font-size:13.5px;color:var(--gedaempft)}
@media (max-width:640px){
  .rollbar table,.rollbar tbody,.rollbar tr,.rollbar td,.rollbar caption{display:block;width:auto}
  .rollbar table{padding:4px 0}
  .rollbar thead{display:none}
  .rollbar tr{padding:10px 14px;border-bottom:1px solid var(--linie-fein)}
  .rollbar tr:last-child{border-bottom:0}
  .rollbar td{padding:2px 0;border:0}
  .rollbar td:first-child{font-weight:600;color:var(--tinte)}
  .rollbar .zahl{text-align:left;white-space:normal}
  .rollbar caption{padding:10px 14px 6px}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .karte,
  :root:not([data-theme="light"]) ul.kacheln > li,:root:not([data-theme="light"]) .lage a,
  :root:not([data-theme="light"]) .rollbar table{border-color:var(--kante)}}
:root[data-theme="dark"] .karte,:root[data-theme="dark"] ul.kacheln > li,
:root[data-theme="dark"] .lage a,:root[data-theme="dark"] .rollbar table{border-color:var(--kante)}

details.fs-i{display:inline-block;vertical-align:middle;margin:0 0 0 6px}
p + details.fs-i{margin-top:-4px;margin-bottom:10px}
details.fs-i[open]{display:block;margin:8px 0 12px}
details.fs-i > summary{list-style:none;cursor:pointer;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--linie);display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:var(--gedaempft);font-style:italic;user-select:none}
details.fs-i > summary::-webkit-details-marker{display:none}
details.fs-i > summary:hover{border-color:var(--akzent-500);color:var(--akzent-700)}
.fs-i-text{margin-top:8px;background:var(--flaeche-2);border:1px solid var(--linie-fein);
  border-radius:12px;padding:10px 14px;font-size:14px;color:var(--tinte);font-weight:400;
  font-style:normal;text-align:left;white-space:normal;max-height:60vh;overflow:auto}
.fs-i-text p{margin:0;font-size:14px!important}
@media (max-width:640px){
  details.fs-i > summary{width:44px;height:44px;border:0;margin:-10px}
  details.fs-i > summary > span{display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border:1px solid var(--linie);border-radius:50%}
}