/* ---------------------------------------------------------------------
   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 steht nur, was probe.css nicht kennt, weil die 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_preise_gewerbesteuer.py — dort
   ändern, nicht hier. */
.probe-inhalt{display:block}
.held-foto .unterzeile{margin-top:18px}
.held-foto .unterzeile a{color:#fff}
.held-foto .pfad p{margin:0 0 16px;font-size:14px;color:rgba(255,255,255,.86)}
.held-foto .pfad a{color:#8df0bd;text-decoration:none;font-weight:600}
.held-foto .pfad span{color:#fff}
.held-foto + .probe-inhalt{margin-top:clamp(12px,3vw,32px)}
.abschnitt{padding-block:clamp(34px,5.5vw,70px)}
.abschnitt + .abschnitt{padding-top:clamp(6px,2vw,22px)}
.abschnitt h2{max-width:24ch}
.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:66ch}
.abschnitt .kopf{margin-bottom:26px}
.abschnitt .kopf > p,.paar .text > p{font-size:clamp(16px,1.9vw,18px);color:var(--gedaempft)}
.abschnitt .unterzeile{font-size:clamp(17px,2vw,20px);color:var(--gedaempft);line-height:1.5}
.leise{color:var(--gedaempft)}
.klein{font-size:14px}
a{color:var(--akzent-700)}
.paar .bild{min-width:0}
.paar .text{min-width:0}
.foto{margin:0;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px -12px rgba(0,0,0,.22)}
.foto img{display:block;width:100%;height:auto}
.mini{min-width:0}
.mini > :first-child{margin-top:0}
.mini > :last-child{margin-bottom:0}

/* Ein Knopf je Seite, und er sieht aus wie in probe.css */
.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}
.knopf.klein{font-size:15px;padding:10px 20px;background:transparent;color:var(--akzent-700);
  border-color:var(--linie)}

/* Für Profis: der Fachtext steht da, nur zu */
details.profi{margin:18px 0 0;border-top:1px solid var(--linie-fein);padding-top:12px}
details.profi > summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--akzent-700);
  list-style:none;display:inline-flex;align-items:center;gap:8px}
details.profi > summary::-webkit-details-marker{display:none}
details.profi > summary::before{content:"+";display:inline-grid;place-items:center;width:20px;
  height:20px;border-radius:50%;border:1px solid var(--akzent-200);font-size:14px;line-height:1}
details.profi[open] > summary::before{content:"–"}
.profi-inhalt{margin-top:10px;font-size:14.5px;color:var(--gedaempft)}
.profi-inhalt p{font-size:14.5px;margin:0 0 10px;max-width:70ch}

/* Listen als Kacheln: ein Punkt, eine Kachel */
ul.kacheln{list-style:none;margin:8px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
ul.kacheln > li{background:var(--flaeche);border:1px solid var(--linie-fein);border-radius:16px;
  padding:22px;color:var(--gedaempft);font-size:15px;line-height:1.55;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px -14px rgba(0,0,0,.18)}
ul.kacheln > li > b:first-child,ul.kacheln > li > strong:first-child{display:block;color:var(--tinte);
  font-size:17px;line-height:1.35;margin-bottom:8px;font-weight:650}

/* Tabellen in Karten */
.rollbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linie-fein);vertical-align:top}
th{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gedaempft)}
td.zahl,th.zahl,td.wieviel{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:0}
table.rechenweg .name{font-weight:600;color:var(--tinte)}
table.rechenweg .warum{font-size:13px;color:var(--gedaempft);margin-top:3px;line-height:1.45;font-weight:400}
table.rechenweg .fundstelle{display:block;font-size:12px;color:var(--gedaempft);margin-top:4px;font-weight:400;letter-spacing:.01em}
table.rechenweg td.zeichen{width:22px;color:var(--gedaempft);font-weight:700;padding-right:0}
table.rechenweg td.wieviel{font-weight:600}
table.rechenweg tr.summe td{border-top:1px solid var(--linie);font-weight:700}
table.rechenweg tr.ergebnis td{background:var(--akzent-50);font-weight:700}
table.rechenweg tr.ergebnis td.wieviel{color:var(--akzent-700);font-size:18px}

/* Weiterlesen und Verweiskarten */
.weiter-abschnitt h2{font-size:clamp(22px,2.7vw,28px)}
.lage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;margin-top:6px}
.lage > a{display:block;text-decoration:none;color:var(--tinte);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);transition:transform .15s ease}
.lage > a:hover{transform:translateY(-2px)}
.lage .ich{font-weight:650;font-size:17px;line-height:1.3}
.lage .dann{color:var(--gedaempft);font-size:15px;margin-top:6px}

/* Schluss: ein Satz, ein Knopf */
.schluss{text-align:center}
.schluss h2{margin-left:auto;margin-right:auto}
.schluss p{margin-left:auto;margin-right:auto;font-size:clamp(16px,1.9vw,18px);color:var(--gedaempft)}
.schluss .knopf{margin-top:14px}
.fusszeile p{font-size:13.5px;color:var(--gedaempft);max-width:90ch}
.fusszeile{padding-block:8px}

/* Dunkelmodus: Kartenkanten wie in probe.css (Regel 2: mindestens 3,0:1) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) ul.kacheln > li,
  :root:not([data-theme="light"]) .lage > a,
  :root:not([data-theme="light"]) .stufe{border-color:var(--kante)}
  :root:not([data-theme="light"]) .knopf{color:#0a1a12}
  :root:not([data-theme="light"]) .knopf.klein{color:var(--akzent-700)}}
:root[data-theme="dark"] ul.kacheln > li,:root[data-theme="dark"] .lage > a,
:root[data-theme="dark"] .stufe{border-color:var(--kante)}
:root[data-theme="dark"] .knopf{color:#0a1a12}
:root[data-theme="dark"] .knopf.klein{color:var(--akzent-700)}
@media (max-width:720px){.paar.gedreht .text{order:0}}
/* Schmale Fenster: Tabellen passen in die Karte, statt seitlich zu rollen */
td.was,td:first-child{overflow-wrap:anywhere}
@media (max-width:520px){
  .mini{padding:16px}
  th,td{padding:9px 4px}
  th{font-size:12px;letter-spacing:0}
  table{font-size:14px}
  table.rechenweg tr.ergebnis td.wieviel{font-size:16px}
  table.gv-rechnung tr{display:grid;grid-template-columns:1fr auto}
  table.gv-rechnung td{border-bottom:0}
  table.gv-rechnung tr{border-bottom:1px solid var(--linie-fein)}
  table.gv-rechnung td.fundort{grid-column:1/-1;padding-top:0}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]):not([data-theme="light"]){--grund:#0E1210;--flaeche:#1A211E;--flaeche-2:#141A17;--linie-fein:rgba(255,255,255,.07);--linie:rgba(255,255,255,.12);--tinte:#ECF1EE;--gedaempft:#AEB8B3;--akzent-50:rgba(75,224,170,.10);--akzent-200:#1C4A37;--akzent-500:#4BE0AA;--akzent-700:#5BE8B6;--band:#0A0D0B;--gut-flaeche:rgba(75,224,170,.10)}:root:not([data-theme="hell"]):not([data-theme="light"]) .ueberzeile{color:#9AF0CF}:root:not([data-theme="hell"]):not([data-theme="light"]) #takt-jahr:checked ~ .umschalter label[for="takt-jahr"],:root:not([data-theme="hell"]):not([data-theme="light"]) #takt-monat:checked ~ .umschalter label[for="takt-monat"]{color:#04281C}}
:root[data-theme="dunkel"]{--grund:#0E1210;--flaeche:#1A211E;--flaeche-2:#141A17;--linie-fein:rgba(255,255,255,.07);--linie:rgba(255,255,255,.12);--tinte:#ECF1EE;--gedaempft:#AEB8B3;--akzent-50:rgba(75,224,170,.10);--akzent-200:#1C4A37;--akzent-500:#4BE0AA;--akzent-700:#5BE8B6;--band:#0A0D0B;--gut-flaeche:rgba(75,224,170,.10)}:root[data-theme="dunkel"] .ueberzeile{color:#9AF0CF}:root[data-theme="dunkel"] #takt-jahr:checked ~ .umschalter label[for="takt-jahr"],:root[data-theme="dunkel"] #takt-monat:checked ~ .umschalter label[for="takt-monat"]{color:#04281C}

.kopfleiste .knopf.klein{min-height:44px}
a.textlink{display:inline-flex;align-items:center;min-height:44px}
summary{min-height:44px;box-sizing:border-box;padding-block:10px}

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