/* ===========================================================================
   Heilige Schrift — die Seite zur App.

   Dieselben Regeln wie die App ("Folio"): eine durchgehende Papierseite,
   Haarlinien statt Kaesten, ein einziger Goldakzent, Literata fuer alles
   Gelesene, Inter nur fuer kleine Beschriftungen.

   Aufbau: eine kraeftige Leiste, ein Produkt-Hero mit dem Geraet gross im
   Bild, dann vier Funktionen mit eigenem Bild und eigenem Absatz, dann das
   Uebrige kompakt. Auf breiten Schirmen wechseln Text und Bild die Seite.
   =========================================================================== */

@font-face {
  font-family: Literata;
  src: url('schriften/literata-latin-opsz-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('schriften/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper-50: #fbf8f1;
  --paper-100: #f5efe3;
  --paper-200: #e6dcc8;
  --paper-300: #d6c9ae;
  --ink-900: #1c1814;
  --ink-700: #463c31;
  --ink-500: #6e6254;
  --gold-400: #facc15;
  --gold-600: #ca8a04;
  --gold-700: #8a5f08;
  --serif: Literata, Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gold-akzent: var(--gold-700);
  --blatt: 0 1px 2px rgb(28 24 20 / 0.05), 0 18px 44px -18px rgb(28 24 20 / 0.28);
  --ease-book: cubic-bezier(0.22, 1, 0.36, 1);
  --leiste-papier: rgb(251 248 241 / 0.9);

  --lesebreite: 38rem;
  --satzbreite: 74rem;
  --rand: clamp(20px, 5vw, 56px);
  /* Zwei Zeilen auf dem Handy (Wortmarke oben, Ziele darunter), eine ab 60 rem. */
  --leiste-hoehe: 104px;

  color-scheme: light;
}
@media (min-width: 60rem) { :root { --leiste-hoehe: 68px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper-50: #0f0d0b;
    --paper-100: #16130f;
    --paper-200: #2a2520;
    --paper-300: #3a332b;
    --ink-900: #fffbeb;
    --ink-700: #ede6d8;
    --ink-500: #cdc2ad;
    --gold-akzent: var(--gold-400);
    --blatt: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 44px -18px rgb(0 0 0 / 0.8);
    --leiste-papier: rgb(15 13 11 / 0.88);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper-50);
  color: var(--ink-900);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  hanging-punctuation: first;
}
@media (min-width: 64rem) { body { font-size: 18px; } }

.bahn { max-width: var(--lesebreite); margin-inline: auto; padding-inline: var(--rand); }
.satz { max-width: var(--satzbreite); margin-inline: auto; padding-inline: var(--rand); }
.enger { max-width: var(--lesebreite); }

/* ---- Beschriftungen und Ueberschriften ---------------------------------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-akzent);
  margin: 0 0 0.9rem;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.25rem);
  font-weight: 450; line-height: 1.04; letter-spacing: -0.022em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 450; line-height: 1.14; letter-spacing: -0.016em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
h3 { font-size: 1.0625rem; font-weight: 500; margin: 0 0 0.3rem; letter-spacing: -0.005em; }
p { margin: 0 0 1.1rem; color: var(--ink-700); }
p:last-child { margin-bottom: 0; }
small { font-size: 0.8125rem; color: var(--ink-500); }
a { color: inherit; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-700); }

/* ---- Die Leiste: sichtbar, in Tinte, auf jeder Breite ------------------ */

.leiste {
  position: fixed; inset: 0 0 auto; z-index: 20;
  background: var(--leiste-papier);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--paper-200);
  font-family: var(--sans);
  color: var(--ink-900);
}
.leiste .satz {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 1rem; row-gap: 0;
  min-height: var(--leiste-hoehe);
}
.wortmarke {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--serif); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.005em;
  text-decoration: none; color: inherit; padding: 0.6rem 0;
}
.wortmarke img { width: 30px; height: 30px; }

.leiste ul {
  grid-column: 1 / -1;
  display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0 0 0.85rem;
  overflow-x: auto; scrollbar-width: none;
  font-size: 14.5px; font-weight: 500;
}
.leiste ul::-webkit-scrollbar { display: none; }
.leiste li a {
  text-decoration: none; color: var(--ink-700); white-space: nowrap;
  padding: 0.45rem 0; border-bottom: 1.5px solid transparent;
  transition: color 160ms, border-color 160ms;
}
.leiste li a:hover { color: var(--ink-900); border-bottom-color: var(--gold-600); }

.leiste-rechts { display: flex; align-items: center; gap: 0.9rem; }
.sprache {
  text-decoration: none; color: var(--ink-700); font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  padding: 0.5rem 0.4rem; border-bottom: 1.5px solid transparent;
}
.sprache:hover { color: var(--ink-900); border-bottom-color: var(--gold-600); }

@media (min-width: 60rem) {
  .leiste .satz { grid-template-columns: auto 1fr auto; column-gap: clamp(1.5rem, 3vw, 3rem); }
  .leiste ul { grid-column: auto; justify-content: center; padding: 0; gap: clamp(1.5rem, 2.6vw, 2.5rem); font-size: 15px; overflow: visible; }
}

/* Anker landen unter der Leiste, nicht dahinter. */
section[id], main > section:first-child { scroll-margin-top: calc(var(--leiste-hoehe) + 10px); }

/* ---- Der Hero: das Produkt gross im Bild -------------------------------- */

.hero {
  position: relative; isolation: isolate;
  padding: calc(var(--leiste-hoehe) + clamp(2rem, 6vw, 5rem)) 0 clamp(3rem, 6vw, 5.5rem);
}
/* Das Tageslicht aus der App, ueber dem Hero: seite.js setzt die Stunde. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tageslicht, none);
}
:root[data-tageszeit='morgen'] { --tageslicht: radial-gradient(120% 55% at 50% -10%, rgba(247, 236, 203, 0.9), rgba(251, 248, 241, 0) 70%); }
:root[data-tageszeit='abend']  { --tageslicht: radial-gradient(120% 55% at 50% -10%, rgba(236, 205, 150, 0.55), rgba(251, 248, 241, 0) 70%); }
:root[data-tageszeit='nacht']  { --tageslicht: radial-gradient(120% 55% at 50% -10%, rgba(226, 214, 190, 0.35), rgba(251, 248, 241, 0) 70%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light'])[data-tageszeit] { --tageslicht: radial-gradient(120% 50% at 50% -10%, rgba(221, 176, 66, 0.12), rgba(15, 13, 11, 0) 70%); }
}

.hero-satz { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .hero-satz { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }

.hero-text { text-align: center; }
@media (min-width: 60rem) { .hero-text { text-align: start; } }
.hero-text .knoepfe { margin-top: 1.9rem; }
.hero-hinweis { margin-top: 1.1rem; font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-500); }

/* Das Geraet: gross, gerade, mit Blattschatten. Kein Kippen, kein Schweben — ruhig. */
.hero-bild { display: flex; justify-content: center; }
.hero-bild .geraet { width: clamp(240px, 70vw, 340px); }
@media (min-width: 60rem) { .hero-bild .geraet { width: clamp(300px, 28vw, 400px); } }

.geraet {
  border: 1px solid var(--paper-300); border-radius: 22px;
  padding: 7px; background: var(--paper-100);
  box-shadow: var(--blatt);
}
.geraet img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* ---- Knoepfe ------------------------------------------------------------ */

.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }
@media (min-width: 60rem) { .hero-text .knoepfe { justify-content: flex-start; } }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding-inline: 1.75rem;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; border-radius: 3px;
  transition: background-color 180ms var(--ease-book), border-color 180ms var(--ease-book), color 180ms var(--ease-book);
}
.knopf-gold { background: var(--gold-600); color: #1c1814; }
.knopf-gold:hover { background: var(--gold-700); color: #fbf8f1; }
.knopf-still { border: 1px solid var(--paper-300); color: var(--ink-700); }
.knopf-still:hover { border-color: var(--ink-500); }
.knopf-klein { min-height: 40px; padding-inline: 1.15rem; font-size: 13.5px; }

:where(a, button, audio, summary):focus-visible {
  outline: 2px solid var(--gold-600); outline-offset: 3px; border-radius: 1px;
}

/* ---- Abschnitte ---------------------------------------------------------- */

section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; border-top: 1px solid var(--paper-200); }

/* ---- Die vier Funktionen: Text und Bild wechseln die Seite --------------- */

.funktion { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.funktion + .funktion { border-top: 1px solid var(--paper-200); }
@media (min-width: 60rem) {
  .funktion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  .funktion.gedreht > .funktion-text { order: 2; }
}
.funktion-text { max-width: var(--lesebreite); }
.funktion-text p { font-size: 1.0625rem; }
.funktion-bild { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0.75rem, 2vw, 1.25rem); }
.funktion-bild .geraet { width: clamp(220px, 62vw, 300px); }
@media (min-width: 60rem) { .funktion-bild .geraet { width: clamp(260px, 22vw, 320px); } }
/* Das Widget ist quer: ein Blatt ohne Telefonrahmen, neben dem Geraet. */
.tafel {
  width: clamp(180px, 46vw, 260px);
  border: 1px solid var(--paper-300); border-radius: 12px; padding: 5px;
  background: var(--paper-100); box-shadow: var(--blatt);
}
.tafel img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ---- Das Uebrige, kompakt ------------------------------------------------ */

.weitere { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
.weitere li { padding: 1.25rem 0; border-top: 1px solid var(--paper-200); }
.weitere p { margin: 0; font-size: 0.95rem; color: var(--ink-500); }
@media (min-width: 40rem) {
  .weitere { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
}
@media (min-width: 60rem) {
  .weitere { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Der Abspieler ------------------------------------------------------ */

.proben { display: grid; margin-top: 2rem; }
@media (min-width: 60rem) {
  .proben { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .proben .probe { border-bottom: 1px solid var(--paper-200); }
}
.probe { border-top: 1px solid var(--paper-200); padding: 1.4rem 0; }
.probe:last-of-type { border-bottom: 1px solid var(--paper-200); }
.probe .wer { font-family: var(--sans); font-size: 13px; color: var(--ink-500); margin: 0 0 0.8rem; }
.nachsatz { margin-top: 1.6rem; }

.spieler { display: flex; align-items: center; gap: 1rem; }
.spieler button {
  flex: none; width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: var(--gold-600); color: #1c1814;
  cursor: pointer; display: grid; place-items: center;
  transition: background-color 180ms var(--ease-book);
}
.spieler button:hover { background: var(--gold-700); color: #fbf8f1; }
.spieler svg { width: 18px; height: 18px; fill: currentColor; }
.spieler .balken { flex: 1; height: 2px; background: var(--paper-200); position: relative; cursor: pointer; border-radius: 1px; }
.spieler .balken span { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--gold-akzent); border-radius: 1px; }
.spieler .zeit { flex: none; font-family: var(--sans); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-500); min-width: 4.6em; text-align: end; }
.spieler audio { width: 100%; }

/* ---- Ornament und Versprechen ------------------------------------------- */

.ornament { display: flex; align-items: center; gap: 0.7rem; margin: 2.2rem 0; }
.ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: var(--paper-200); }
.ornament i { width: 5px; height: 5px; rotate: 45deg; background: var(--gold-akzent); opacity: 0.8; }

.versprechen { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6rem; }
@media (min-width: 60rem) { .versprechen { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } }
.versprechen li { border-inline-start: 2px solid var(--gold-akzent); padding-inline-start: 1.15rem; }
.versprechen strong { display: block; font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; color: var(--ink-900); margin-bottom: 0.2rem; }
.versprechen span { font-size: 0.9375rem; color: var(--ink-500); }

/* ---- Der Preis ----------------------------------------------------------- */

.schluss .bahn { text-align: center; }
.preis { display: flex; justify-content: center; align-items: baseline; gap: 0.85rem; margin-bottom: 1.2rem; }
.preis strong { font-family: var(--serif); font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 450; color: var(--ink-900); letter-spacing: -0.025em; line-height: 1; }
.preis span { font-family: var(--sans); font-size: 14px; color: var(--ink-500); }

/* ---- Rechtstexte ---------------------------------------------------------- */

.recht { padding-top: calc(var(--leiste-hoehe) + 2.5rem); border-top: 0; }
.recht h2 { font-size: 1.35rem; margin-top: 2rem; }
ul.liste { list-style: none; padding: 0; margin: 0; }
ul.liste li { padding: 0.6rem 0; border-top: 1px solid var(--paper-200); }
ul.liste p { margin: 0; font-size: 0.95rem; color: var(--ink-500); }

/* ---- Fuss --------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--paper-200);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 5vw, 4rem);
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-500); text-align: center;
}
footer p { color: inherit; margin: 0 0 0.6rem; }
footer a { margin-inline: 0.45rem; text-decoration-color: var(--paper-300); text-underline-offset: 3px; }
footer a:hover { text-decoration-color: var(--ink-500); }

/* ---- Bewegung -----------------------------------------------------------
   Einmaliges Aufsteigen beim Hereinscrollen. Der Ausgangszustand steht NICHT
   hier: Inhalt, den erst das Scrollen sichtbar macht, ist Inhalt, der
   verschwinden kann. Die Klasse setzt seite.js, und nur wenn es laeuft.    */

.heben-an { opacity: 0; transform: translateY(14px); }
.heben-an.da { opacity: 1; transform: none; transition: opacity 700ms var(--ease-book), transform 700ms var(--ease-book); }

/* Der Hero kommt beim Laden: erst der Text, dann das Geraet. Kurz, einmal. */
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: heben 700ms var(--ease-book) both; }
  .hero-text > :nth-child(2) { animation-delay: 80ms; }
  .hero-text > :nth-child(3) { animation-delay: 160ms; }
  .hero-text > :nth-child(4) { animation-delay: 240ms; }
  .hero-text > :nth-child(5) { animation-delay: 300ms; }
  .hero-bild { animation: heben 900ms var(--ease-book) 220ms both; }
}
@keyframes heben { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .heben-an { opacity: 1; transform: none; }
}

/* Nachtraege nach dem ersten Blick auf 1440 px. */

/* Die Ziele gehoeren in die Mitte, Sprache und Knopf nach rechts. Im HTML stehen die Ziele
   zuletzt (damit sie auf dem Handy als zweite Zeile kommen); auf breiten Schirmen weist das
   Raster ihnen die mittlere Spalte zu. */
@media (min-width: 60rem) {
  .leiste ul { grid-column: 2; grid-row: 1; }
  .leiste-rechts { grid-column: 3; grid-row: 1; }
  .wortmarke { grid-column: 1; grid-row: 1; }
}

/* Der Text hing mittig neben einem hohen Geraet und schwebte damit im Leeren. Oben ausrichten,
   das Geraet darf nach unten aus dem Bild laufen — so steht die Zeile dort, wo das Auge landet. */
@media (min-width: 60rem) {
  .hero-satz { align-items: start; }
  .hero-text { padding-top: clamp(1.5rem, 5vw, 4.5rem); }
  .hero-bild .geraet { width: clamp(280px, 25vw, 360px); }
}

/* Auf 390 px wurde das vierte Ziel angeschnitten ("Hörbib"). Enger setzen, damit alle vier
   passen; falls eine Sprache doch laenger wird, zeigt ein Verlauf am rechten Rand, dass sich
   die Reihe wischen laesst, statt abgehackt zu wirken. */
@media (max-width: 59.99rem) {
  .leiste ul { gap: 1.1rem; font-size: 14px; padding-right: 1.5rem;
    mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }
}
/* Noch enger auf dem Handy: ohne rechten Innenabstand, Ziele 13.5 px, Luecke 0.95 rem. */
@media (max-width: 59.99rem) {
  .leiste ul { gap: 0.95rem; font-size: 13.5px; padding-right: 0; letter-spacing: -0.005em; }
}

/* Zwei Ursachen fuer waagerechten Ueberhang auf 360-390 px, beide behoben an der Wurzel:
   1. Die obere Leistenzeile: Wortmarke + Sprache + Knopf waren zusammen breiter als 360 px.
      Die Wortmarke darf schrumpfen, der Knopf wird schmaler.
   2. Die Widget-Reihe: Geraet (62 vw) und Tafel (46 vw) nebeneinander sind mehr als 100 vw.
      Auf dem Handy bricht die Tafel unter das Geraet. */
.leiste .satz { grid-template-columns: minmax(0, 1fr) auto; }
.wortmarke { min-width: 0; }
.wortmarke span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 59.99rem) {
  .wortmarke { font-size: 1.0625rem; gap: 0.5rem; }
  .wortmarke img { width: 26px; height: 26px; }
  .knopf-klein { padding-inline: 0.9rem; }
  .funktion-bild { flex-wrap: wrap; }
}
/* Sicherheitsnetz: was trotzdem ueber den Rand ragt, scrollt die Seite nicht mehr seitwaerts. */
html, body { overflow-x: clip; }
/* Auch die vier Funktionsreihen tragen Anker (die Leiste zielt auf #funktionen, Links von
   aussen koennen auf #erst-lesen zielen): sie landen unter der Leiste, nicht dahinter. */
.funktion { scroll-margin-top: calc(var(--leiste-hoehe) + 10px); }

/* ===========================================================================
   Rechtstexte: Inhaltsverzeichnis links, Text rechts

   Lange Texte brauchen die Lesebreite — aber auf einem breiten Schirm darf
   die Flaeche daneben nicht leer bleiben. Links steht ein festes Verzeichnis
   der Abschnitte, rechts der Text; auf dem Handy steht das Verzeichnis als
   kurze Liste ueber dem Text.
   =========================================================================== */

.recht { padding: calc(var(--leiste-hoehe) + clamp(2rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5rem); }
.recht-kopf { max-width: var(--lesebreite); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.recht-kopf h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); margin-bottom: 1rem; }
.recht-kopf .eyebrow a { text-decoration: none; }
.recht-kopf .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }

.recht-satz { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 60rem) {
  .recht-satz { grid-template-columns: 15rem minmax(0, var(--lesebreite)); gap: clamp(3rem, 6vw, 6rem); }
  .inhalt { position: sticky; top: calc(var(--leiste-hoehe) + 1.5rem); }
}

.inhalt ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-200); }
.inhalt li { border-bottom: 1px solid var(--paper-200); }
.inhalt a {
  display: block; padding: 0.7rem 0;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.4;
  color: var(--ink-500); text-decoration: none;
  transition: color 160ms, padding-left 160ms var(--ease-book);
}
.inhalt a:hover { color: var(--ink-900); padding-left: 0.35rem; }
/* Auf dem Handy als Reihe kleiner Marken, nicht als hohe Liste. */
@media (max-width: 59.99rem) {
  .inhalt ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; border: 0; }
  .inhalt li { border: 0; }
  .inhalt a { padding: 0.35rem 0; border-bottom: 1.5px solid var(--paper-300); }
  .inhalt a:hover { padding-left: 0; border-bottom-color: var(--gold-600); }
}

.recht-text { font-size: 1.0625rem; }
.recht-text .absatz { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--paper-200); scroll-margin-top: calc(var(--leiste-hoehe) + 1rem); }
.recht-text .absatz:first-child { border-top: 0; padding-top: 0; }
.recht-text h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin: 0 0 0.8rem; }
.recht-text p { color: var(--ink-700); }
.recht-text ul.liste { margin-top: 0.6rem; }
.recht-text ul.liste li { padding: 0.55rem 0; border-top: 1px solid var(--paper-200); }
.recht-text ul.liste li:first-child { border-top: 0; }

/* ===========================================================================
   Die Vorschau im Hero blaettert: sechs Bildschirme, weich ueberblendet

   Die Bilder liegen gestapelt im Geraet; sichtbar ist eines. Der Wechsel ist
   ein Ueberblenden mit einem kaum merklichen Heben — ruhig, kein Wischen,
   kein Karussell. Darunter Stationsmarken; die aktuelle in Gold. Ohne
   Skript steht das erste Bild (Heute), die Marken sind dann nur Beschriftung.
   =========================================================================== */

.buehne { position: relative; aspect-ratio: 720 / 1558; overflow: hidden; border-radius: 16px; background: var(--paper-100); }
.buehne img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 16px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 900ms var(--ease-book), transform 900ms var(--ease-book);
}
.buehne img.aktiv { opacity: 1; transform: none; }
/* Das erste Bild traegt die Hoehe, bevor die Stapelung greift. */
.buehne img:first-child { position: relative; }

.stationen {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.35rem;
  counter-reset: none;
}
.stationen button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500); padding: 0.45rem 0.55rem; border-bottom: 1.5px solid transparent;
  transition: color 240ms var(--ease-book), border-color 240ms var(--ease-book);
}
.stationen button:hover { color: var(--ink-900); }
.stationen button[aria-current='true'] { color: var(--gold-akzent); border-bottom-color: var(--gold-akzent); }

@media (prefers-reduced-motion: reduce) {
  .buehne img { transition: none; }
}
/* Die Stationsmarken gehoeren UNTER das Geraet: .hero-bild ist ein Flex-Kasten und hatte
   beide Kinder nebeneinander gestellt — das Geraet schrumpfte, die Marken standen daneben. */
.hero-bild { flex-direction: column; align-items: center; }
.hero-bild .stationen { max-width: 22rem; }
/* Auf 1440x900 lagen die Stationsmarken unter dem Bildrand: das Geraet war zu hoch. Etwas
   kleiner, damit Geraet und Marken zusammen in den ersten Bildschirm passen. */
@media (min-width: 60rem) { .hero-bild .geraet { width: clamp(250px, 20vw, 290px); } }