/*
 * Nibby Web — gemeinsames Stylesheet (Konto-Portal, Startseite, Rechtstexte).
 * Linie: "Bernstein & Docht" — Tokens aus dem Spiel (NibbyUi.cs), Mockup 2026-09-18-anmelden.
 *
 * Harte Randbedingung: Das Portal sendet  Content-Security-Policy: default-src 'self'.
 * Darum KEIN Inline-CSS/-JS, KEINE data:-URLs, KEINE externen Schriften — alles liegt unter /assets/.
 * Es gibt bewusst kein JavaScript (Auftrag K1 §4.0): alles hier ist reines CSS.
 *
 * Schriften: Fraunces + Nunito Sans (SIL Open Font License 1.1, Lizenztexte in /assets/fonts/).
 */

/* ------------------------------------------------------------------ Schriften */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-600.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-700.woff2") format("woff2");
}

/* ------------------------------------------------------------------ Tokens */
:root {
  --bernstein-900: #1A1512;
  --bernstein-800: #29241F;
  --bernstein-700: #3A322A;
  --bernstein-600: #4D453B;
  --bernstein-400: #8A7A63;
  --sand-100: #F5EBD1;
  --sand-200: #DBC7A3;
  --gold-300: #F7D69E;
  --gold-500: #F2C74D;
  --salbei-500: #8CB36B;
  --salbei-300: #A8CB8A;

  --b900: 26, 21, 18;
  --b800: 41, 36, 31;
  --b400: 138, 122, 99;
  --sand100: 245, 235, 209;
  --sand200: 219, 199, 163;
  --gold500: 242, 199, 77;

  --text: var(--sand-100);
  --text-leise: rgba(var(--sand200), .86);
  --text-sehr-leise: rgba(var(--sand200), .74);

  --schrift-titel: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --schrift-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rand: clamp(1.25rem, 6vw, 6.5rem);
}

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

html {
  /* Der Grund liegt auf <html>, nicht auf <body>: so bleiben die Weltbild-Ebenen (z-index < 0) sichtbar. */
  background: var(--bernstein-900);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(var(--gold500), .35); color: var(--sand-100); }

a { color: var(--gold-300); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-500); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: .25rem;
}

.nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 10;
  padding: .7rem 1.1rem;
  border-radius: .75rem;
  background: var(--sand-100);
  color: var(--bernstein-900);
  font-weight: 700;
  text-decoration: none;
}
.sprunglink:focus { top: 1rem; }

/* ------------------------------------------------------------------ Welt (Hintergrund, fest)
   body::before = Weltbild, body::after = Vorhang. Die Seitenklasse (welt-*) wählt Bild und Ausschnitt.
   z-index: Bild -3, Vorhang -2, Glasebenen des Panels -1, Inhalt >= 0. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: -3;
  background: var(--bernstein-900) var(--welt-url, none) var(--welt-fokus, 70% 50%) / var(--welt-groesse, cover) no-repeat;
  transform: scaleX(var(--spiegel, 1));
  animation: welt-ein 1.9s cubic-bezier(.22, .7, .2, 1) both;
}
body::after {
  z-index: -2;
  background:
    linear-gradient(90deg,
      rgba(var(--b900), .70) 0%,
      rgba(var(--b900), .58) 38%,
      rgba(var(--b900), .18) 64%,
      rgba(var(--b900), 0) 84%),
    linear-gradient(0deg, rgba(var(--b900), .45) 0%, rgba(var(--b900), 0) 28%);
}

/* Je Szene: Ausschnitt (--welt-fokus), Zoom (--welt-groesse) und Spiegelung (--spiegel) so gewaehlt, dass die Hauptmotive
   (Nibby, Maedchen, Drache, Feuer) rechts neben dem Panel stehen -- geprueft bei 1280x720, 1440x900, 1920x1080. */
.welt-huette { --welt-url: url("/assets/welt/welt-huette.webp"); --welt-fokus: 78% 50%; }
.welt-steg   { --welt-url: url("/assets/welt/welt-steg.webp");   --welt-fokus: 100% 50%; --welt-groesse: auto 115%; --spiegel: -1; }
.welt-feuer  { --welt-url: url("/assets/welt/welt-feuer.webp");  --welt-fokus: 100% 50%; --welt-groesse: auto 110%; --spiegel: -1; }
.welt-tuer   { --welt-url: url("/assets/welt/welt-tuer.webp");   --welt-fokus: 0% 50%;   --welt-groesse: auto 120%; }
.welt-abend  { --welt-url: url("/assets/welt/welt-abend.webp");  --welt-fokus: 0% 50%;   --welt-groesse: auto 125%; }

@keyframes welt-ein {
  from { opacity: 0; transform: scaleX(var(--spiegel, 1)) scale(1.05); }
  to   { opacity: 1; transform: scaleX(var(--spiegel, 1)) scale(1); }
}

/* ------------------------------------------------------------------ Bühne */
.buehne {
  position: relative;
  overflow-x: clip;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.kopf {
  padding: clamp(1.1rem, 2.6vw, 2.1rem) var(--rand) 0;
}

.inhalt {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding: clamp(1.25rem, 4vh, 3rem) var(--rand) clamp(1.5rem, 4vh, 3rem);
}

/* Wortmarke: das i trägt den Docht (Glühpunkt) statt des Punkts. Barrierefrei über aria-label am Link. */
.wortmarke {
  display: inline-block;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--sand-100);
  text-decoration: none;
  text-shadow: 0 2px 18px rgba(var(--b900), .55);
}
.wortmarke:hover { color: var(--sand-100); }
.wortmarke__i { position: relative; display: inline-block; }
.wortmarke__i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: .045em;
  width: .15em;
  height: .15em;
  margin-left: -.075em;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow:
    0 0 .3em .1em rgba(var(--gold500), .75),
    0 0 .9em .3em rgba(var(--gold500), .32);
}

/* ------------------------------------------------------------------ Bernsteinlinse (Panel)
   Rand = Glas (verschwommene Welt), Kern = Lesefläche (α ≈ 0,9). Fällt backdrop-filter aus, trägt der Kern allein. */
.linse {
  position: relative;
  width: min(100%, 37rem);
  margin-block: 0;
  padding: clamp(1.6rem, 3.6vw, 3rem);
  border-radius: 1.5rem;
  box-shadow:
    0 .6rem 0 0 rgba(var(--b900), .28),
    inset 0 1px 0 0 rgba(var(--gold500), .24);
  animation: linse-ein .7s .12s cubic-bezier(.22, .7, .2, 1) both;
}
.linse::before,
.linse::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.linse::before {
  -webkit-backdrop-filter: blur(11px) saturate(1.3) brightness(1.07);
  backdrop-filter: blur(11px) saturate(1.3) brightness(1.07);
  -webkit-mask-image: radial-gradient(118% 108% at 50% 50%, transparent 0%, transparent 72%, #000 88%, #000 100%);
  mask-image: radial-gradient(118% 108% at 50% 50%, transparent 0%, transparent 72%, #000 88%, #000 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--sand100), .13),
    inset 0 0 26px 0 rgba(var(--sand100), .07);
}
.linse::after {
  background:
    radial-gradient(75% 46% at 14% 0%, rgba(var(--gold500), .11), rgba(var(--gold500), 0) 72%),
    radial-gradient(122% 112% at 50% 47%,
    rgba(var(--b800), .96) 0%,
    rgba(var(--b800), .95) 46%,
    rgba(var(--b800), .93) 66%,
    rgba(var(--b800), .56) 84%,
    rgba(var(--b800), .10) 96%,
    rgba(var(--b800), 0) 100%);
}

@keyframes linse-ein {
  from { opacity: 0; transform: translateY(.75rem); }
  to   { opacity: 1; transform: none; }
}

.linse__titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.35rem + 2.2vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: .005em;
  color: var(--gold-300);
  text-wrap: balance;
}
.linse__einstieg {
  margin: .7rem 0 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-leise);
  text-wrap: pretty;
}
.linse__einstieg strong { color: var(--sand-100); font-weight: 700; overflow-wrap: anywhere; }
.linse__koerper { margin-top: 1.75rem; }

/* ------------------------------------------------------------------ Docht-Pfad (die drei Schritte) */
.weg {
  display: flex;
  margin: 0 0 1.9rem;
  padding: 0;
  list-style: none;
}
.weg__schritt {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding-inline: .15rem;
  text-align: center;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--text-sehr-leise);
  text-wrap: balance;
}
.weg__punkt {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--bernstein-800);
  box-shadow: inset 0 0 0 2px rgba(var(--b400), .8);
}
/* Verbindungslinie zum vorigen Schritt (von dessen Mitte bis zu dieser) */
.weg__schritt + .weg__schritt::before {
  content: "";
  position: absolute;
  top: calc(.6875rem - 1px);
  right: 50%;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--b400), .5);
  transform-origin: left center;
}
.weg__schritt--fertig,
.weg__schritt--jetzt { color: var(--sand-100); }
.weg__schritt--jetzt { font-weight: 700; }
.weg__schritt--fertig::before,
.weg__schritt--jetzt::before { background: var(--gold-500) !important; }

.weg__schritt--fertig .weg__punkt {
  background: var(--gold-300);
  box-shadow: none;
}
.weg__schritt--fertig .weg__punkt::after {
  content: "";
  width: .3rem;
  height: .6rem;
  margin-top: -.12rem;
  border: solid var(--bernstein-900);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.weg__schritt--jetzt .weg__punkt { box-shadow: inset 0 0 0 2px var(--gold-500); }
.weg__schritt--jetzt .weg__punkt::after {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow:
    0 0 .55rem .12rem rgba(var(--gold500), .55),
    0 0 1.3rem .35rem rgba(var(--gold500), .22);
  animation: docht-an 1s .45s cubic-bezier(.22, .7, .2, 1) both;
}
/* Wartezustand: der Docht atmet langsam (nur auf der "Postfach"-Seite) */
.weg--wartet .weg__schritt--jetzt .weg__punkt::after { animation: docht-an 1s .45s both, docht-atmen 3.4s 1.45s ease-in-out infinite; }
/* Der Moment der Seite: Linie füllt sich, der Docht zündet (nur auf "Bestätigt") */
.weg--zuendet .weg__schritt--jetzt::before { animation: linie-fuellen .8s .2s cubic-bezier(.4, 0, .2, 1) both; }
.weg--zuendet .weg__schritt--jetzt .weg__punkt::after { animation: docht-zuenden 1.2s .85s cubic-bezier(.2, .8, .2, 1) both; }

/* Uebersicht (Startseite): alle drei Schritte gleich wichtig, mit kurzer Erklaerung */
.weg--uebersicht .weg__schritt { color: var(--sand-100); }
.weg--uebersicht .weg__punkt { box-shadow: inset 0 0 0 2px var(--gold-300); }
.weg--uebersicht .weg__schritt + .weg__schritt::before { background: rgba(var(--gold500), .55); }
.weg__name { display: block; font-weight: 700; }
.weg__beschreibung {
  display: block;
  margin-top: .2rem;
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text-leise);
}

@keyframes docht-an {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes docht-zuenden {
  0%   { opacity: 0; transform: scale(.2); }
  55%  { opacity: 1; transform: scale(1.5);
         box-shadow: 0 0 1rem .4rem rgba(var(--gold500), .85), 0 0 2.6rem 1rem rgba(var(--gold500), .4); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes docht-atmen {
  0%, 100% { box-shadow: 0 0 .55rem .12rem rgba(var(--gold500), .55), 0 0 1.3rem .35rem rgba(var(--gold500), .22); }
  50%      { box-shadow: 0 0 .85rem .3rem rgba(var(--gold500), .8),  0 0 2rem .7rem rgba(var(--gold500), .34); }
}
@keyframes linie-fuellen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ------------------------------------------------------------------ Meldungen (Hinweis, Fehler)
   Marke ist ein OFFENER Gold-Ring (Fehler) bzw. ein gefüllter Docht (Hinweis) — kein roter Punkt:
   Rost500 erreicht gegen die Lesefläche nur ~1,2:1 und wäre unsichtbar. */
.meldung {
  display: flex;
  gap: .85rem;
  margin: 0 0 1.4rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sand-100);
}
.meldung::before {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  margin-top: .5rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--gold-500), 0 0 .7rem .1rem rgba(var(--gold500), .24);
}
.meldung--fehler { font-weight: 600; }
.meldung--hinweis::before {
  background: var(--gold-500);
  box-shadow: 0 0 .8rem .2rem rgba(var(--gold500), .38);
}
.meldung p { margin: 0; }
.meldung p + p { margin-top: .6rem; }
.meldung strong { font-weight: 700; }

/* ------------------------------------------------------------------ Formular */
.formular { margin: 0; }

.feld { margin: 0 0 1.35rem; }
.feld__etikett {
  display: block;
  margin: 0 0 .45rem .1rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-leise);
}
.feld__zusatz { font-weight: 400; color: var(--text-sehr-leise); }

.feld__box {
  position: relative;
  border-radius: 1rem;
  background: rgba(var(--b900), .52);
  transition: background-color .2s ease;
}
.feld__box input {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: .85rem 1.2rem 1rem;
  border: 0;
  border-radius: 1rem;
  outline: 0;
  background: transparent;
  color: var(--sand-100);
  caret-color: var(--gold-500);
  font: 400 1.125rem/1.3 var(--schrift-text);
  letter-spacing: .01em;
}
.feld__box input::placeholder { color: rgba(var(--sand200), .74); opacity: 1; }
/* Lichtlinie unten: Grundlinie (::after) + goldene Linie, die bei Fokus von der Mitte aufgeht (::before) */
.feld__box::after,
.feld__box::before {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
}
.feld__box::after { background: var(--bernstein-400); }   /* #8A7A63 auf der Lesefläche ≈ 3,5:1 */
.feld__box::before {
  z-index: 1;
  height: 3px;
  background: var(--gold-500);
  box-shadow: 0 0 .9rem .15rem rgba(var(--gold500), .4);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.22, .7, .2, 1);
}
.feld__box:hover { background: rgba(var(--b900), .6); }
.feld__box:focus-within { background: rgba(var(--b900), .66); }
.feld__box:focus-within::before { transform: scaleX(1); }

.feld--fehler .feld__box::after { background: var(--gold-500); }

.feld__hinweis {
  margin: .5rem .1rem 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text-sehr-leise);
}
.feld__fehler {
  display: flex;
  gap: .7rem;
  margin: .6rem .1rem 0;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sand-100);
}
.feld__fehler span { min-width: 0; }
.feld__fehler::before {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  margin-top: .45rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--gold-500), 0 0 .6rem .1rem rgba(var(--gold500), .24);
}

/* zwei Felder nebeneinander (breite Panel) */
.feld-paar { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) {
  .feld-paar { grid-template-columns: 1fr 1fr; }
  .feld-paar--gestapelt { grid-template-columns: 1fr; }
}

/* Browser-Autofill soll die Lesefläche nicht gelb/blau einfärben (Chrome-Passwortmanager!) */
.feld__box input:-webkit-autofill,
.feld__box input:-webkit-autofill:hover,
.feld__box input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sand-100);
  caret-color: var(--gold-500);
  -webkit-box-shadow: 0 0 0 100rem #1F1A16 inset;
  box-shadow: 0 0 0 100rem #1F1A16 inset;
  transition: background-color 600000s 0s;
}

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.5rem;
  padding: .7rem 1.6rem;
  border: 0;
  border-radius: 1rem;
  cursor: pointer;
  font: 700 1.125rem/1.2 var(--schrift-text);
  text-align: center;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.knopf--haupt {
  width: 100%;
  background: var(--salbei-500);
  color: var(--bernstein-900);
  box-shadow:
    0 .375rem 0 0 rgba(var(--b900), .45),
    inset 0 0 0 2px rgba(var(--b400), .35),
    inset 0 1px 0 0 rgba(var(--sand100), .25);
}
.knopf--haupt:hover { background: var(--salbei-300); color: var(--bernstein-900); transform: translateY(-1px); }
.knopf--haupt:active {
  transform: translateY(.25rem);
  box-shadow:
    0 .125rem 0 0 rgba(var(--b900), .45),
    inset 0 0 0 2px rgba(var(--b400), .35);
}
.knopf--leise {
  background: transparent;
  color: var(--sand-100);
  box-shadow: inset 0 0 0 2px rgba(var(--b400), .75);
}
.knopf--leise:hover { background: rgba(var(--sand100), .07); color: var(--sand-100); box-shadow: inset 0 0 0 2px var(--gold-300); }
.knopf--leise:active { transform: translateY(1px); }
.knopf--breit { width: 100%; }

/* Textaktion: ein Knopf, der wie ein Link aussieht (z. B. "Überall abmelden") */
.textaktion {
  display: inline;
  padding: .5rem .1rem;
  border: 0;
  background: none;
  cursor: pointer;
  font: 600 1rem/1.4 var(--schrift-text);
  color: var(--gold-300);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.textaktion:hover { color: var(--gold-500); text-decoration-thickness: 2px; }

.aktionen { display: grid; gap: .9rem; margin-top: 1.6rem; }
.nebenzeile { margin: 1.5rem 0 0; font-size: 1rem; color: var(--text-leise); }
.nebenzeile + .nebenzeile { margin-top: .5rem; }
.nebenzeile--oben { margin-top: 0; }
.kleingedrucktes {
  margin: 1.5rem 0 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-sehr-leise);
}
.kleingedrucktes + .kleingedrucktes { margin-top: .6rem; }

/* Trennlinie im Panel (Docht-Linie, zart) */
.trenner {
  height: 1px;
  margin: 1.9rem 0;
  border: 0;
  background: linear-gradient(90deg, rgba(var(--b400), .55), rgba(var(--b400), 0));
}

/* ------------------------------------------------------------------ Konto-Übersicht */
.daten { display: grid; gap: 1rem; margin: 0 0 1.9rem; }
.daten__zeile { display: grid; gap: .1rem; }
.daten dt { font-size: .9375rem; font-weight: 600; color: var(--text-sehr-leise); }
.daten dd { margin: 0; font-size: 1.125rem; color: var(--sand-100); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Fußzeile */
.fuss { padding: 0 var(--rand) clamp(1rem, 2.4vw, 1.75rem); }
.fuss__liste {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .15rem 1.4rem;
  margin: 0;
  padding: .55rem 1.3rem;
  list-style: none;
  border-radius: 999px;
  background: rgba(var(--b900), .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .9375rem;
}
.fuss a { display: inline-block; padding: .3rem 0; color: var(--sand-200); text-decoration: none; }
.fuss a:hover { color: var(--gold-300); text-decoration: underline; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------ Startseite */
.inhalt--held { flex-direction: column; align-items: flex-start; padding-top: 0; }
.held {
  /* Hero-Masse in em: auf niedrigen Fenstern schrumpft alles mit, damit der Text nicht ueber die Figuren am Hang rutscht. */
  font-size: clamp(11.5px, 1.6vh, 18px);
  width: min(100%, 38em);
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(2rem, 7vh, 5rem) 2rem;
  animation: linse-ein .8s .1s cubic-bezier(.22, .7, .2, 1) both;
}
.held__wortmarke {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(4.6em, 2.4em + 9.4vw, 9em);
  line-height: .95;
  letter-spacing: .005em;
  color: var(--sand-100);
  text-shadow: 0 4px 40px rgba(var(--b900), .6);
}
.held__wortmarke .wortmarke__i::after { top: .035em; }
.held__zeile {
  margin: 1.1em 0 0;
  max-width: 24em;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.3em, 1.05em + 1.1vw, 1.75em);
  line-height: 1.3;
  color: var(--gold-300);
  text-shadow: 0 2px 22px rgba(var(--b900), .7);
  text-wrap: balance;
}
.held__beta {
  margin: 1.1em 0 0;
  max-width: 32em;
  font-size: 1.125em;
  line-height: 1.55;
  color: var(--sand-100);
  text-shadow: 0 1px 14px rgba(var(--b900), .8);
}
.held__aktionen { display: flex; flex-wrap: wrap; gap: .9em; margin-top: 1.9em; }
.held__aktionen .knopf { flex: 0 1 11rem; min-width: 9.5rem; }  /* rem, nicht em: der Knopf hat eine eigene Schriftgroesse */
.held__weg {
  width: min(100%, 46rem);
  margin: 0 0 1rem;
  padding: 1.25rem 1.5rem 1.35rem;
  border-radius: 1.25rem;
  background: rgba(var(--b900), .58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(var(--sand100), .1);
}
.held__weg .weg { margin: 0; }
.held__weg .weg__schritt { font-size: .9375rem; color: var(--sand-100); }

/* ------------------------------------------------------------------ Startseite: Zielbild (29.10.2026)
   Konzept-Bereich unter dem Hero. Ein Vorhang (::before) deckt das feste Weltbild ab, damit Bilder und Text auf ruhigem Grund
   stehen. Die Docht-Linie links verbindet die Kapitel; wo der Browser scrollgebundene Animation kann, füllt sie sich beim Lesen. */
.zielbild {
  position: relative;
  width: 100%;
  max-width: 76rem;
  padding: clamp(4rem, 12vh, 8rem) 0 clamp(2.5rem, 6vh, 4rem);
}
.zielbild::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: calc(-1 * var(--rand));
  right: -100vw;   /* ueber die max-width hinaus bis zum Rand; .buehne schneidet ab (overflow-x: clip) */
  background: linear-gradient(180deg, rgba(var(--b900), 0) 0, rgba(var(--b900), .94) 9rem, var(--bernstein-900) 16rem);
  pointer-events: none;
}
.zielbild__kopf { max-width: 44rem; }
.zielbild__stempel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.1rem;
  padding: .35rem .95rem .35rem .75rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(var(--gold500), .55);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gold-300);
}
.zielbild__stempel::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 .6rem .15rem rgba(var(--gold500), .45);
}
.zielbild__titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  line-height: 1.08;
  color: var(--sand-100);
  text-wrap: balance;
}
.zielbild__einstieg {
  margin: 1.1rem 0 0;
  max-width: 34em;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  line-height: 1.45;
  color: var(--gold-300);
  text-wrap: pretty;
}
.zielbild__hinweis {
  margin: 1rem 0 0;
  max-width: 40em;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-sehr-leise);
}

.zielbild__kapitel {
  position: relative;
  display: grid;
  gap: clamp(3rem, 9vh, 6rem);
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  padding: 0 0 0 2.75rem;
  list-style: none;
}
/* Docht-Linie: Grundlinie (::before) + goldene Füllung (::after) */
.zielbild__kapitel::before,
.zielbild__kapitel::after {
  content: "";
  position: absolute;
  left: calc(.6875rem - 1px);
  top: .8rem; bottom: .8rem;
  width: 2px;
  border-radius: 2px;
}
.zielbild__kapitel::before { background: rgba(var(--b400), .45); }
.zielbild__kapitel::after {
  background: linear-gradient(180deg, var(--gold-500), rgba(var(--gold500), .55));
  transform-origin: top center;   /* kein box-shadow: beim Skalieren verschmiert er zum Klotz */
}

.kapitel { position: relative; display: grid; gap: 1.4rem; align-items: center; }
.kapitel::before {
  content: "";
  position: absolute;
  left: -2.75rem;
  top: .55rem;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  background: var(--bernstein-900);
  box-shadow: inset 0 0 0 2px var(--gold-300), 0 0 0 .4rem var(--bernstein-900);
}
.kapitel::after {
  content: "";
  position: absolute;
  left: calc(-2.75rem + .3875rem);
  top: calc(.55rem + .3875rem);
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 .55rem .12rem rgba(var(--gold500), .55), 0 0 1.3rem .35rem rgba(var(--gold500), .22);
}

.kapitel__bild {
  position: relative;
  margin: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--bernstein-800);
  box-shadow: 0 1.2rem 3rem -1rem rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(var(--sand100), .08);
}
.kapitel__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.kapitel__bild figcaption {
  position: absolute;
  left: .75rem; bottom: .75rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: rgba(var(--b900), .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sand-200);
}
.kapitel__titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem);
  line-height: 1.15;
  color: var(--gold-300);
  text-wrap: balance;
}
.kapitel__text p {
  margin: .8rem 0 0;
  max-width: 36em;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(var(--sand100), .92);
  text-wrap: pretty;
}

.zielbild__auffang {
  display: grid;
  gap: .9rem;
  justify-items: start;
  max-width: 40rem;
  margin: clamp(3.5rem, 9vh, 6rem) 0 0 2.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 1.5rem;
  background: rgba(var(--b800), .96);
  box-shadow: inset 0 1px 0 0 rgba(var(--gold500), .24), inset 0 0 0 1px rgba(var(--sand100), .07);
}
.zielbild__auffang-titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.15;
  color: var(--sand-100);
}
.zielbild__auffang p { margin: 0; max-width: 34em; color: var(--text-leise); }
.zielbild__auffang .knopf { width: auto; min-width: 13rem; margin-top: .4rem; }

/* Breit: Text links, Bild rechts -- der Text steht neben dem Docht, das Bild bekommt den Raum */
@media (min-width: 56rem) {
  .kapitel { grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.75fr); gap: clamp(2rem, 4vw, 4rem); }
  .kapitel__text { order: -1; }
  .kapitel::before { top: calc(50% - .6875rem); }
  .kapitel::after { top: calc(50% - .6875rem + .3875rem); }
}

/* Der eine Moment: Docht-Linie füllt sich mit dem Lesen, jeder Punkt zündet, wenn sein Kapitel ins Bild kommt.
   Ohne Unterstützung (oder mit reduzierter Bewegung) steht alles fertig da. */
@supports (animation-timeline: view()) {
  .zielbild__kapitel::after {
    animation: docht-linie linear both;
    animation-timeline: view();
    animation-range: entry 40% cover 75%;
  }
  .kapitel::after {
    animation: docht-zuenden linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 45%;
  }
}
@keyframes docht-linie {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ------------------------------------------------------------------ Rechtstexte (Lesespalte im selben Panel) */
.linse--lesen {
  width: min(100%, 47rem);
  padding: clamp(1.6rem, 4.2vw, 3.4rem);
}
.lesen { font-size: 1.0625rem; line-height: 1.72; color: rgba(var(--sand100), .94); }
.lesen > :first-child { margin-top: 0; }
.lesen h1 {
  margin: 0 0 1.2rem;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.7rem);
  line-height: 1.12;
  color: var(--gold-300);
  text-wrap: balance;
}
.lesen h2 {
  margin: 2.4rem 0 .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--b400), .45);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  line-height: 1.25;
  color: var(--gold-300);
  text-wrap: balance;
}
.lesen h1 + h2 { margin-top: 1.4rem; }
.lesen h3 {
  margin: 1.7rem 0 .3rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sand-100);
}
.lesen p, .lesen ul, .lesen ol { margin: .9rem 0; max-width: 68ch; }
.lesen li { margin: .35rem 0; }
.lesen li::marker { color: var(--gold-500); }
.lesen strong { color: var(--sand-100); font-weight: 700; }
.lesen blockquote {
  margin: 1.2rem 0;
  padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--gold-500);
  color: var(--text-leise);
}
.lesen code {
  padding: .1em .4em;
  border-radius: .35rem;
  background: rgba(var(--sand100), .09);
  font: .92em ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--sand-100);
}
.lesen colgroup col { width: 50%; }
.lesen__tabelle { margin: 1.2rem 0; overflow-x: auto; }
.lesen table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.lesen th, .lesen td {
  padding: .6rem .8rem;
  border: 1px solid rgba(var(--b400), .5);
  text-align: left;
  vertical-align: top;
}
.lesen th { background: rgba(var(--sand100), .08); color: var(--sand-100); font-weight: 700; }

/* ------------------------------------------------------------------ Mobil: das Panel wird zum Blatt von unten */
@media (max-width: 40rem), (orientation: portrait) and (max-width: 56rem) {
  :root { --rand: 0px; }

  body::after {
    background:
      linear-gradient(180deg, rgba(var(--b900), 0) calc(56.25vw - 4.5rem), var(--bernstein-900) 56.25vw),
      linear-gradient(180deg, rgba(var(--b900), .62) 0%, rgba(var(--b900), .08) 24%, rgba(var(--b900), 0) 100%);
  }

  /* Kopfband: das ganze Weltbild als Panorama oben (statt eines zufaelligen Ausschnitts), Wortmarke darueber */
  body::before {
    background-size: 100% auto;
    background-position: center top;
    background-color: var(--bernstein-900);
  }
  .kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 1.15rem 1.25rem 0; }
  .wortmarke { font-size: 1.85rem; }

  .inhalt {
    padding: calc(56.25vw - 1.75rem) 0 0;
    align-items: stretch;
  }

  .linse,
  .linse--lesen {
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
    margin-block: 0;
    padding: 1.7rem 1.25rem 2rem;
    border-radius: 1.75rem 1.75rem 0 0;
    box-shadow: 0 -.5rem 2.5rem rgba(var(--b900), .45), inset 0 1px 0 0 rgba(var(--sand100), .14);
  }
  .linse::before { display: none; }
  .linse::after {
    background: rgba(var(--b800), .96);
    border-radius: inherit;
  }

  .fuss { padding: 0; background: rgba(var(--b800), .96); }
  .fuss__liste {
    display: flex;
    justify-content: center;
    padding: .4rem 1.25rem 1.4rem;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Tabellen im Lesetext (Datenschutz, Speicherdauer): mobil als gestapelte Zeilen statt seitlich abgeschnitten */
  .lesen table, .lesen tbody, .lesen tr, .lesen td { display: block; width: 100%; }
  .lesen thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .lesen tr { padding: .8rem 0; border-top: 1px solid rgba(var(--b400), .5); }
  .lesen tbody tr:last-child { border-bottom: 1px solid rgba(var(--b400), .5); }
  .lesen td { padding: .1rem 0; border: 0; }
  .lesen td:first-child { font-weight: 700; color: var(--sand-100); }

  /* Startseite mobil: der Text liegt auf einem dunklen Blatt (wie die Panels), sonst liefe er beim Scrollen ueber das helle Bildband */
  .inhalt--held { position: relative; }
  .inhalt--held::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0; right: 0; bottom: 0;
    top: calc(56.25vw - 1.75rem);
    border-radius: 1.75rem 1.75rem 0 0;
    background: rgba(var(--b800), .96);
    box-shadow: 0 -.5rem 2.5rem rgba(var(--b900), .45), inset 0 1px 0 0 rgba(var(--sand100), .14);
  }

  /* Uebersichts-Pfad (Startseite) senkrecht: Punkt links, Text rechts */
  .weg--uebersicht { flex-direction: column; gap: 1.15rem; }
  .weg--uebersicht .weg__schritt { flex-direction: row; align-items: flex-start; gap: 1rem; text-align: left; padding: 0; }
  .weg--uebersicht .weg__schritt + .weg__schritt::before { display: none; }
  .weg--uebersicht .weg__schritt:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(.6875rem - 1px);
    top: 1.375rem;
    bottom: -1.15rem;
    width: 2px;
    border-radius: 2px;
    background: rgba(var(--gold500), .55);
  }

  /* Startseite: kein Panel, der Text steht frei über dem Weltbild */
  .held { font-size: 16px; min-height: 0; padding: 3.25rem 1.25rem 1.5rem; }
  .held__weg { margin: 0 1.25rem 1.5rem; width: auto; }
  .held__aktionen .knopf { flex: 1 1 100%; }

  /* Zielbild mobil: liegt auf dem dunklen Blatt der Startseite, eigener Vorhang entfällt */
  .zielbild { padding: 2.5rem 1.25rem 2rem; }
  .zielbild::before { display: none; }
  .zielbild__kapitel { padding-left: 2.25rem; }
  .kapitel::before { left: -2.25rem; top: .15rem; }
  .kapitel::after { left: calc(-2.25rem + .3875rem); top: calc(.15rem + .3875rem); }
  .kapitel__bild { border-radius: 1rem; }
  .zielbild__auffang { margin-left: 0; }
  .zielbild__auffang .knopf { width: 100%; }
}

/* ------------------------------------------------------------------ Bewegung, Kontrast, Druck */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .feld__box { border: 1px solid CanvasText; }
  .knopf--haupt { border: 2px solid ButtonText; }
}

@media print {
  body::before, body::after { display: none; }
  html, body { background: #fff; color: #000; }
  .linse::before, .linse::after { display: none; }
  .lesen, .lesen h1, .lesen h2, .lesen h3, .lesen strong { color: #000; }
  .kopf, .fuss { display: none; }
}