/* ---------------------------------------------------------------------
   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}
/* Seitenprobe — eigene kleine Datei zu dieser einen Seite.
   probe.css (Stil "weich", abgenommen 10.10.2026) bleibt UNVERÄNDERT;
   hier stehen nur die Teile, die probe.css nicht kennt, weil diese
   Seite Elemente des Programms trägt (Karten, Listen, Tabellen,
   Formular). Werte aus probe.css: Radius 18/16 px, Schatten wie
   .bildrahmen/.mini, Systemschrift, grüner Akzent.
   Erzeugt von bauen_gruenden_wechseln_ruhend_muster.py — dort ändern, nicht hier. */
.probe-inhalt{display:block}
.held-foto .klartext{margin-top:22px}
.held-foto .klartext .satz{color:rgba(255,255,255,.9);font-size:clamp(16px,1.9vw,18px)}
.held-foto .knopf.klein{background:transparent;border-color:rgba(255,255,255,.7);color:#fff;
  font-size:15px;padding:10px 20px}
.held-foto .unterzeile{margin-top:18px}
.held-foto + .probe-inhalt{margin-top:clamp(12px,3vw,32px)}
.abschnitt{padding-block:clamp(36px,5.5vw,72px)}
.abschnitt + .abschnitt{padding-top:clamp(8px,2vw,24px)}
.abschnitt h3{font-size:clamp(20px,2.3vw,25px);line-height:1.2;letter-spacing:-.015em;
  font-weight:700;margin:0 0 12px}
.abschnitt p{max-width:68ch}
.abschnitt .unterzeile{font-size:clamp(17px,2vw,20px);color:var(--gedaempft);max-width:56ch;
  line-height:1.5;margin:0 0 28px}
.leise{color:var(--gedaempft);font-size:clamp(15px,1.6vw,16.5px)}
.karte{background:var(--flaeche);border:1px solid var(--linie-fein);border-radius:18px;
  padding:clamp(20px,3.4vw,38px);margin:0 0 26px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px -12px rgba(0,0,0,.14)}
.karte > :last-child{margin-bottom:0}
.karte h2.kartentitel{margin-bottom:12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .karte,
  :root:not([data-theme="light"]) .kacheln > li,
  :root:not([data-theme="light"]) ol.fragen > li{border-color:var(--kante)}}
:root[data-theme="dark"] .karte,:root[data-theme="dark"] .kacheln > li,
:root[data-theme="dark"] ol.fragen > li{border-color:var(--kante)}

/* Listen als Kacheln: ein Punkt, eine Kachel — groß, mit Luft */
ol.fragen,.kacheln{list-style:none;margin:8px 0 26px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;
  counter-reset:punkt}
ol.fragen > li,.kacheln > li{background:var(--flaeche);border:1px solid var(--linie-fein);
  border-radius:16px;padding:22px 22px 24px;counter-increment:punkt;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px -14px rgba(0,0,0,.18)}
ol.fragen > li::before{content:counter(punkt,decimal-leading-zero);display:block;
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--akzent-500);margin-bottom:10px}
ol.fragen > li > strong,.kacheln > li > strong{display:block;font-size:clamp(17px,1.8vw,19px);
  line-height:1.3;letter-spacing:-.01em}
.warum{color:var(--gedaempft);font-size:15px;margin-top:8px;line-height:1.5}
.karte > ul.kacheln{margin-top:18px}
ul.leise{padding-left:20px;max-width:70ch}
ul.leise li{margin-bottom:10px}

/* Tabellen: ruhig, Zahlen rechtsbündig */
.rollbar{overflow-x:auto;max-width:100%}
.abschnitt table{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 14px}
.abschnitt th{text-align:left;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gedaempft);padding:10px 12px;
  border-bottom:1px solid var(--linie)}
.abschnitt td{padding:11px 12px;border-bottom:1px solid var(--linie-fein);vertical-align:top}
.abschnitt .zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.abschnitt th.zahl{white-space:normal}
@media (max-width:560px){
  .abschnitt td,.abschnitt th{padding:9px 6px}
  .abschnitt th{letter-spacing:0;font-size:12px}
}
.karte > ul.kacheln > li{box-shadow:none;background:var(--flaeche-2)}

/* 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 h2{margin-top:0}
.bildpaar .text p{margin:0}
.bildpaar + .rest{margin-top:clamp(28px,4vw,48px)}

/* Der Knopf: einer, in der Mitte, mit Luft */
.schluss{text-align:center}
.schluss .tun{margin:0}
.schluss .leise{margin:16px auto 0}
.knopf.gross{font-size:17px;padding:15px 30px}
.abschnitt.abschluss:not(.weiterlesen){text-align:center}
.abschnitt.abschluss:not(.weiterlesen) h2,.abschnitt.abschluss:not(.weiterlesen) p{margin-left:auto;margin-right:auto}
.abschnitt.abschluss:not(.weiterlesen) .knopf{margin-top:22px}

/* Weiterlesen: Karten zum Antippen */
.weiterlesen .lage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.weiterlesen .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)}
.weiterlesen .lage a:hover{border-color:var(--akzent-200)}
.weiterlesen .ich{font-weight:600;font-size:17px}
.weiterlesen .dann{color:var(--gedaempft);font-size:15px;margin-top:6px}
a{color:var(--akzent-700)}

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%}
}