/* ══════════════════════════════════════════════════════════════════
   MIKA MARIA MAUSSHAMMER — vier Kapitel unter einem wandernden Mond

   Eine Verteilerseite, keine Erzählseite. Sie hat zehn Sekunden Zeit
   und muss in dieser Zeit schön verteilen. Der Name als Dach, darunter
   vier Kapitel, jedes mit seinem Bild -- gebaut wie die Startseite von
   funkenfangen.de, der Schwesterseite.

   Keine Karten, keine Kästen, kein Gold um ein Bild. Was gliedert,
   sind Bilder, Schrift und Weißraum.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Die Nacht und das Gold stammen aus funkenfangen.de -- dieselbe
     Familie, dieselben Werte. Die Zwischentöne sind in oklch
     angegeben, damit sie beim Abdunkeln nicht ins Graue kippen. */
  --nacht:        #0c0b12;
  --nacht-tief:   #08070c;
  --nacht-warm:   oklch(0.19 0.035 324);   /* das Pflaumendunkel unten */
  --gold:         #c9a96e;
  --gold-matt:    #7a6035;
  --gold-schein:  rgba(201, 169, 110, 0.30);
  --creme:        #e8e2d4;
  --creme-matt:   #a8a090;

  --schrift-display: 'CCSBjork', 'EB Garamond', Georgia, serif;
  --schrift-lesen:   'EB Garamond', Georgia, 'Times New Roman', serif;

  /* Exponentielles Ausklingen: schnell los, lang weich aus. */
  --aus:      cubic-bezier(0.16, 1, 0.3, 1);
  --aus-lang: cubic-bezier(0.19, 1, 0.22, 1);

  --mass: 46rem;              /* Satzbreite des Verzeichnisses */
  --rand: clamp(1.5rem, 5vw, 3.5rem);
}

/* ── Grundlage ───────────────────────────────────────────────────
   Die Grundfarbe sitzt auf html UND body: überscrollt jemand auf
   iOS über den oberen Rand hinaus, scheint sonst Weiß durch.
   overflow-x doppelt -- "clip" verhindert zusätzlich, dass ein
   Kindelement eine Scroll-Umgebung erzeugt. */
* { box-sizing: border-box; }

html {
  background: var(--nacht-tief);
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  background: var(--nacht-tief);
  color: var(--creme);
  font-family: var(--schrift-lesen);
  font-size: 1.15rem;
  line-height: 1.68;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 0.7rem 1.1rem;
  background: var(--nacht);
  color: var(--creme);
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--gold-matt);
}
.sprung:focus { left: 1rem; top: 1rem; }

/* ══ DER HIMMEL ══════════════════════════════════════════════════
   Auf das Dokument gemalt, nicht ans Fenster geheftet: absolut in
   voller Dokumenthöhe, damit nichts über die Unterkante hinausragt
   und keine Scroll-Leere entsteht. */
.himmel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Kräftiger als zuvor: oben ein kühles Blau, in der Mitte das tiefe
     Schwarzblau, unten das Pflaumendunkel von funkenfangen. Die
     Schichten überlagern sich großzügig, damit keine Kante entsteht. */
  background:
    radial-gradient(130% 62% at 50% -4%,  oklch(0.29 0.058 262 / 0.95) 0%, transparent 64%),
    radial-gradient(120% 40% at 18% 34%,  oklch(0.22 0.048 286 / 0.7) 0%, transparent 70%),
    radial-gradient(130% 58% at 50% 104%, oklch(0.26 0.070 326 / 0.95) 0%, transparent 68%),
    radial-gradient(110% 34% at 84% 72%,  oklch(0.23 0.055 20 / 0.55) 0%, transparent 72%),
    linear-gradient(180deg, var(--nacht) 0%, var(--nacht-tief) 46%, #120d18 100%);
}

.himmel-sterne {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Ein paar Punkte atmen. Deckkraft ist keine Bewegung im Raum und
   verursacht kein Umbrechen -- das Verbot gilt der Geometrie. */
.himmel-funkeln { position: absolute; inset: 0; }
.funke {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--creme);
  opacity: 0.2;
  animation: funkeln 5.5s ease-in-out infinite alternate;
}
@keyframes funkeln { from { opacity: 0.12; } to { opacity: 0.85; } }

/* Die Schmuckelemente. Nur transform, nie drop-shadow: ein Schatten
   auf einem transformierten, transparenten Bild zeichnet auf iOS das
   Rechteck des Bildes nach statt seiner Silhouette. */
.deko {
  position: absolute;
  height: auto;
  will-change: transform;
}
.deko-mond {
  /* Das einzige fest geheftete Element der Seite -- siehe die
     Begründung im Markup. Mittig; die Bahn kommt vom Skript, die
     -50 Prozent für die eigene Breite stecken in derselben
     transform-Angabe, sonst überschriebe das Skript sie. */
  position: fixed;
  top: 6vh;
  left: 50%;
  z-index: 0;
  width: clamp(190px, 34vw, 460px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.26;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0);
  will-change: transform, opacity;
}


/* ══ DAS BLATT ═══════════════════════════════════════════════════ */
.blatt {
  position: relative;
  z-index: 1;
  max-width: var(--mass);
  margin: 0 auto;
  padding: clamp(5.5rem, 13vh, 8rem) var(--rand) clamp(3rem, 8vh, 5rem);
}

/* ── Das Dach ───────────────────────────────────────────────────── */
.dach { text-align: center; }

/* Der einzige Verlauf der Seite. Er zitiert das Buntglas von
   funkenfangen und bleibt deshalb auf diesen einen Schriftzug
   beschränkt; überall sonst schreibt die Seite in Creme. */
/* ── Der Namenszug ───────────────────────────────────────────────
   Das Buntglas von funkenfangen.de, unverändert: Bernstein, Rubin,
   Pergament, Moos, Kobalt, Violett. Der Verlauf ist dreimal so breit
   wie die Schrift und wandert langsam darunter hindurch -- deshalb
   leuchtet der Name nie zweimal gleich.

   Zweizeilig wie auf der Schwesterseite. Ein einzeiliger voller Name
   erlaubt nur halb so viel Schriftgrad.

   Was NICHT übernommen wird: dort liegt ein drop-shadow-Filter auf
   demselben Element, das den Verlauf durch die Schrift ausschneidet.
   Auf einem iPhone verwirft Safari dabei gelegentlich den Ausschnitt
   und die Überschrift verschwindet -- genau das ist auf der Musikseite
   passiert. Der Schein liegt deshalb in einem eigenen Element
   darunter, so wie es funkenfangen für seinen Halo ebenfalls tut. */
.dach-name {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  line-height: 1.12;
  letter-spacing: 0.1em;
  background-image: linear-gradient(110deg,
    #e6b258 0%, #d4a574 18%, #d84e5a 36%, #f5f1e8 50%,
    #489480 64%, #3860a8 82%, #8a58a4 100%);
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  animation:
    namenAuftauchen 1.9s var(--aus) 0.2s forwards,
    namenLicht 22s ease-in-out 2.2s infinite alternate;
}
.dach-zeile1, .dach-zeile2 { display: block; }

/* Der Halo atmet in einem eigenen Element unter der Schrift. */
.dach-name::before {
  content: "";
  position: absolute;
  inset: -34% -10%;
  z-index: -1;
  background: radial-gradient(
    rgba(212, 165, 116, 0.20) 0%,
    rgba(216, 78, 90, 0.09) 35%,
    transparent 70%);
  filter: blur(22px);
  opacity: 0.6;
  animation: haloAtmen 7s ease-in-out 2s infinite alternate;
}

@keyframes namenAuftauchen {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
/* Nur die Lage des Verlaufs wandert. Das kostet keinen Umbruch --
   anders als die Laufweite, die funkenfangen dafür animiert und die
   den Namen während des Auftauchens anders brechen ließe. */
@keyframes namenLicht {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 50% 50%; }
}
@keyframes haloAtmen {
  from { opacity: 0.5; transform: scale(0.95); }
  to   { opacity: 0.95; transform: scale(1.08); }
}

/* ── Die Rollen ──────────────────────────────────────────────────
   Gesperrte Versalien, wie auf der Schwesterseite. Dieselbe Behandlung
   tragen weiter unten die Fundstellen -- die Seite reimt sich damit
   auf sich selbst. */
.dach-rollen {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--creme-matt);
  opacity: 0;
  animation: sanftAuf 1.4s var(--aus) 0.9s forwards;
}

/* ── Der Spruch ──────────────────────────────────────────────────
   Kursive Antiqua, und die Wörter tauchen nacheinander aus der
   Unschärfe auf. Drei davon tragen die Farben des Verlaufs. */
.dach-spruch {
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  max-width: 34ch;
  font-size: clamp(1.18rem, 2.4vw, 1.5rem);
  font-style: italic;
  line-height: 1.75;
  color: rgba(232, 226, 212, 0.78);
  text-wrap: balance;
}
/* Die Wörter steigen auf. Ohne Weichzeichner -- und das ist der
   Punkt: funkenfangen lässt sie aus der Unschärfe auftauchen, hier
   blieb der Text davon dauerhaft weich und die kursiven Wörter waren
   kaum zu lesen.

   Der Grund steckt im Detail. Ein Filter lässt sich nicht auf "none"
   herunteranimieren: der Browser rechnet "none" als "blur(0)", die
   Ebene bleibt bestehen, und Text auf einer eigenen Ebene wird ohne
   Subpixel-Glättung gezeichnet. Null Unschärfe sieht deshalb immer
   noch unscharf aus. Also gar keine. Das Auftauchen trägt die
   Deckkraft allein, und das genügt. */
.dach-spruch .wort {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  animation: wortAuftauchen 1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--wd, 0s) forwards;
}
/* Heller als die Farben des Verlaufs selbst: dort tragen sie große
   Buchstaben, hier stehen sie kursiv in Lesegröße. */
.dach-spruch .wort--gold  { color: #f0ce93; }
.dach-spruch .wort--rot   { color: #efa9a4; }
.dach-spruch .wort--gruen { color: #9fd4bd; }
@keyframes wortAuftauchen {
  to { opacity: 1; transform: none; }
}
@keyframes sanftAuf { to { opacity: 1; } }

.zierlinie {
  display: block;
  width: clamp(160px, 34vw, 240px);
  height: auto;
  margin: clamp(2.2rem, 6vh, 3.4rem) auto 0;
}
.zierlinie line { stroke: var(--gold-matt); stroke-width: 0.6; }
.zierlinie-raute { fill: var(--gold); }

/* ══ DIE KAPITEL ═════════════════════════════════════════════════
   Gebaut wie die Kapitel auf der Startseite von funkenfangen.de: ein
   Raster aus zwölf Spalten, Bild und Text wechseln von Kapitel zu
   Kapitel die Seite. Dadurch entsteht eine Treppe statt einer Liste,
   und das Auge findet von selbst weiter.

   Die Bilder tragen jetzt die Gliederung; Haarlinien braucht es dafür
   nicht mehr. Was bleibt: kein Rahmen, kein Kasten, kein Gold um ein
   Bild. Nur vier Pixel Radius und ein tiefer, weicher Schatten, der
   das Bild in die Nacht sinken lässt. ═══════════════════════════ */
.kapitel-folge {
  margin-top: clamp(3rem, 9vh, 5.5rem);
  display: grid;
  gap: clamp(3.5rem, 11vh, 7rem);
}

/* Die Kapitel treten aus der Satzbreite des Blattes heraus. In den
   46 rem des Fließtextes blieben der Textspalte eines Kapitels nur
   233 Pixel -- "Bücher & Kolumnen" brach darin mitten im Titel um.
   Drüben haben die Kapitel ebenfalls die ganze Breite. */
@media (min-width: 860px) {
  .kapitel-folge {
    width: min(70rem, calc(100vw - 2 * var(--rand)));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.kapitel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1.1s var(--aus), transform 1.1s var(--aus);
}
.kapitel.ist-da { opacity: 1; transform: none; }

.kapitel-bild { grid-column: 1 / span 7; grid-row: 1; position: relative; }
.kapitel:nth-of-type(even) .kapitel-bild { grid-column: 6 / span 7; }

.kapitel-bild img:not(.buch) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(4, 3, 8, 0.55);
  /* Vorhang statt Einblendung: das Bild wird von unten nach oben
     aufgedeckt. Von funkenfangen übernommen. */
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 1.25s cubic-bezier(0.77, 0, 0.175, 1) 0.1s,
    transform 700ms var(--aus),
    box-shadow 700ms var(--aus);
}
.kapitel.ist-da .kapitel-bild img { clip-path: inset(0 0 0 0); }

/* ── Das Buch ────────────────────────────────────────────────────
   Freigestellt, deshalb kein Rechteck-Schatten und kein Radius: beides
   zeichnete einen Kasten um eine Silhouette. Der Schatten liegt als
   Verlaufs-Ellipse darunter, so wie drüben. Ein drop-shadow wäre das
   Naheliegende und auf iOS falsch: dort wird er auf Elementen in
   bewegten Containern als milchiges Rechteck gerastert.

   Es steht schmaler als ein Foto -- ein Buch, das die ganze Spalte
   füllt, ist kein Buch mehr, sondern eine Wand. */
.kapitel-bild--buch { display: flex; justify-content: center; }
.buch-halter {
  position: relative;
  width: 68%;
  max-width: 330px;
}
.buch-halter::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2.5%;
  width: 86%;
  height: 13%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse closest-side,
    rgba(4, 3, 8, 0.6) 0%, rgba(4, 3, 8, 0.3) 55%, transparent 78%);
}
.buch {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 1.25s cubic-bezier(0.77, 0, 0.175, 1) 0.1s,
    transform 700ms var(--aus);
}
.kapitel.ist-da .buch { clip-path: inset(0 0 0 0); }

.kapitel-wort {
  grid-column: 8 / span 5;
  grid-row: 1;
  position: relative;
  z-index: 2;
  padding-left: clamp(1.2rem, 3vw, 2.5rem);
}
.kapitel:nth-of-type(even) .kapitel-wort {
  grid-column: 1 / span 5;
  padding-left: 0;
  padding-right: clamp(1.2rem, 3vw, 2.5rem);
  text-align: right;
}


.kapitel-zahl {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--schrift-display);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: #9a7c47;
  transition: color 500ms var(--aus);
}


/* Die Kapiteltitel tragen dasselbe Buntglas wie der Name -- aber
   jeder an einer anderen Stelle des Verlaufs. Vier Titel, die alle
   gleich leuchten, wären vier Kopien; so sind es vier Lichter aus
   demselben Fenster.

   Kein Filter auf diesem Element: iOS Safari verwirft dabei
   gelegentlich den Textausschnitt und die Überschrift verschwindet.
   Der Schatten unter der Schrift bleibt -- er zeichnet die Umrisse
   der Buchstaben nach und wird vom Ausschnitt nicht berührt. Titel
   und Satz ragen über das Bild hinaus und brauchen ihn. */
.kapitel-titel {
  --ort: 20%;
  margin: 0 0 1rem;
  font-family: var(--schrift-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: var(--creme);
  text-shadow: 0 2px 30px rgba(4, 3, 8, 0.9), 0 0 10px rgba(4, 3, 8, 0.75);
  transition: background-position 900ms var(--aus), color 500ms var(--aus);
}

/* Nur wo der Ausschnitt wirklich funktioniert. Sonst bleibt der Titel
   cremefarben -- lesbar ist er so oder so. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kapitel-titel {
    background-image: linear-gradient(110deg,
      #e6b258 0%, #d4a574 18%, #d84e5a 36%, #f5f1e8 50%,
      #489480 64%, #3860a8 82%, #8a58a4 100%);
    background-size: 300% 100%;
    background-position: var(--ort) 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* Die vier Fenster liegen in der hellen Hälfte des Verlaufs. Weiter
     rechts kommen Kobalt und Violett -- im Namen sind sie großartig,
     weil er sechsundachtzig Pixel groß ist und wandert. Ein Kapitel-
     titel bei sechsunddreißig Pixeln käme dort auf keine drei zu eins
     gegen den Nachthimmel. */
  .kapitel:nth-of-type(1) .kapitel-titel { --ort: 0%; }   /* Bernstein ins Rubin */
  .kapitel:nth-of-type(2) .kapitel-titel { --ort: 22%; }  /* Rubin */
  .kapitel:nth-of-type(3) .kapitel-titel { --ort: 44%; }  /* Rubin ins Pergament */
  .kapitel:nth-of-type(4) .kapitel-titel { --ort: 62%; }  /* Pergament ins Moos */
}

.kapitel-satz {
  margin: 0 0 1.4rem;
  max-width: 34ch;
  font-size: 1.15rem;
  line-height: 1.72;
  /* Eine Stufe heller als das übrige Beigegrau: dieser Satz steht
     zeitweise vor der Mondscheibe. Mit --creme-matt lag der Kontrast
     dort unter dem Nötigen. */
  color: #cbc3b2;
  text-shadow: 0 1px 20px rgba(4, 3, 8, 0.92), 0 0 8px rgba(4, 3, 8, 0.85);
}
.kapitel-satz i { font-style: italic; color: #c6bdab; }
.kapitel:nth-of-type(even) .kapitel-satz { margin-left: auto; }

.kapitel-weiter {
  display: inline-block;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  transition: letter-spacing 500ms var(--aus), border-color 500ms var(--aus);
}

@media (hover: hover) and (pointer: fine) {
  .kapitel:hover .kapitel-titel { background-position: calc(var(--ort) + 16%) 50%; color: #f3e3c4; }
  .kapitel:hover .kapitel-zahl { color: var(--gold); }
  .kapitel:hover .kapitel-weiter { letter-spacing: 0.42em; border-color: var(--gold); }
  .kapitel:hover .kapitel-bild img:not(.buch) {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 44px 96px rgba(4, 3, 8, 0.62);
  }
  /* Das Buch hebt sich und neigt sich dabei ein Grad -- so steht es
     auch auf der Schwesterseite. */
  .kapitel:hover .buch { transform: translate3d(0, -6px, 0) rotate(-1deg); }
}
.kapitel:focus-visible { outline: 1px solid var(--gold); outline-offset: 12px; }

/* Schmale Geräte: Bild über Text. Nebeneinander bliebe für den Text
   zu wenig Breite, und er läge auf dem Bild statt daneben. */
@media (max-width: 760px) {
  .kapitel { display: block; }
  .kapitel-bild, .kapitel:nth-of-type(even) .kapitel-bild { margin-bottom: 1.5rem; }
  .kapitel-wort,
  .kapitel:nth-of-type(even) .kapitel-wort {
    padding: 0;
    text-align: left;
  }
  .kapitel-satz, .kapitel:nth-of-type(even) .kapitel-satz {
    max-width: none;
    margin-left: 0;
  }
}

/* ── Zwei Namen, ein Gesicht ─────────────────────────────────────
   Der Absatz spricht von zwei Namen für eine Person. Ein Bild daneben
   beantwortet das, ohne ein Wort dazu zu brauchen.

   Behandelt wie die Kapitelbilder auf funkenfangen.de: vier Pixel
   Radius, ein tiefer weicher Schatten, der das Bild in die Nacht
   sinken lässt, und kein Rahmen. Beim Hereinscrollen wird es
   aufgedeckt statt eingeblendet -- ein Vorhang, der von unten nach
   oben weicht. */
.namen {
  margin-top: clamp(4rem, 11vh, 7rem);
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
}



.namen-text { max-width: 38rem; }
.namen-titel {
  margin: 0 0 1.1rem;
  font-family: var(--schrift-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.namen-satz {
  margin: 0;
  max-width: 62ch;
  font-size: 1.19rem;
  line-height: 1.78;
  color: var(--creme-matt);
}

/* ══ DER FUSS ════════════════════════════════════════════════════ */
.fuss {
  margin-top: clamp(4rem, 12vh, 7rem);
  padding-top: 1.8rem;
  border-top: 1px solid rgba(201, 169, 110, 0.14);
  text-align: center;
}
.fuss-zeile {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  color: var(--creme-matt);
}
.fuss-knopf {
  padding: 0.2rem 0.1rem;
  background: none;
  border: 0;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  color: var(--creme-matt);
  cursor: pointer;
  transition: color 400ms var(--aus);
}
.fuss-knopf:hover,
.fuss-knopf:focus-visible { color: var(--gold); }
.fuss-trenn { margin: 0 0.6rem; color: var(--gold-matt); }

/* ══ IMPRESSUM UND DATENSCHUTZ ═══════════════════════════════════
   Das einzige Fenster der Seite. Es liegt über allem, deshalb darf
   es hier fixed sein -- es ist kein Hintergrund. */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rand);
}
.legal-modal[hidden] { display: none; }
.legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 10, 0.88);
}
.legal-panel {
  position: relative;
  width: min(42rem, 100%);
  max-height: 84svh;
  overflow-y: auto;
  padding: clamp(1.8rem, 5vw, 3rem);
  background: var(--nacht);
  border: 1px solid rgba(201, 169, 110, 0.2);
  -webkit-overflow-scrolling: touch;
}
.legal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.4rem;
  background: none;
  border: 0;
  color: var(--creme-matt);
  cursor: pointer;
}
.legal-close:hover { color: var(--gold); }
.legal-tabs { display: flex; gap: 1.6rem; margin-bottom: 1.6rem; }
.legal-tab {
  padding: 0 0 0.4rem;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: inherit;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creme-matt);
  cursor: pointer;
}
.legal-tab.active { color: var(--gold); border-bottom-color: var(--gold-matt); }
.legal-title {
  margin: 0 0 1.4rem;
  font-family: var(--schrift-display);
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: var(--creme);
}
.legal-content[hidden] { display: none; }
.legal-content h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-matt);
}
.legal-content p {
  margin: 0 0 0.9rem;
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--creme-matt);
}
.legal-content a { color: var(--gold); }

/* Der Verweis auf die eigenstaendige Seite. Er steht am Ende, mit
   Abstand, damit er nicht wie ein weiterer Absatz wirkt -- und er
   ist der Grund, warum das Fenster kuerzer sein darf als die Seite:
   der vollstaendige Text ist immer einen Klick entfernt. */
.legal-mehr {
  margin-top: 1.8rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(122, 96, 53, 0.3);
  font-size: 0.94rem !important;
  letter-spacing: 0.04em;
}

/* ══ WENIGER BEWEGUNG ════════════════════════════════════════════
   Wer sie abbestellt hat, bekommt dieselbe Seite -- nur steht alles
   sofort da. Bilder stehen offen, statt aufgedeckt zu werden. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .kapitel { opacity: 1 !important; transform: none !important; }
  .kapitel-bild img, .buch { clip-path: none !important; transition: none; }
  .deko { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   WAS VON funkenfangen.de MITGEKOMMEN IST

   Die Schwesterseite hat ein paar Dinge, die nichts erklären und
   trotzdem alles ausmachen. Sie stehen hier in derselben Machart.
   ══════════════════════════════════════════════════════════════════ */

/* ── Filmkorn ───────────────────────────────────────────────────
   Nimmt der Seite die digitale Glätte. Absolut und dokumenthoch,
   nicht ans Fenster geheftet -- die bildschirmfeste Fassung lief auf
   iOS als sichtbarer Schleier mit Kanten dem Scrollen hinterher.
   Das steht so auch im Quelltext von funkenfangen. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27180%27 height=%27180%27 filter=%27url(%23n)%27 opacity=%270.6%27/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Die Sternschnuppe ──────────────────────────────────────────
   Einmal pro Besuch, leicht zu verpassen. box-shadow statt
   drop-shadow: iOS zeichnet drop-shadow auf bewegten Elementen als
   milchiges Rechteck. Auch dieser Satz stammt von drüben.

   Sie liegt im Himmel und nicht am Fenster -- hier gilt: nichts ist
   fest geheftet. */
.sternschnuppe {
  position: absolute;
  top: 12%;
  left: -10%;
  width: clamp(90px, 11vw, 140px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 241, 232, 0.95));
  box-shadow: 0 0 8px rgba(245, 241, 232, 0.6);
  transform: rotate(14deg);
  opacity: 0;
  pointer-events: none;
}
.sternschnuppe.los { animation: schnuppenFlug 1.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes schnuppenFlug {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(14deg); }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.55; }
  100% { opacity: 0;   transform: translate3d(86vw, 22vh, 0) rotate(14deg); }
}

/* ── Funken am Zeiger ───────────────────────────────────────────
   Winzige goldene Punkte, die hinter dem Zeiger zurückbleiben und
   sofort vergehen. Nur dort, wo es einen Zeiger gibt. */
.funke-zeiger {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(201, 169, 110, 0.6);
  pointer-events: none;
  will-change: transform, opacity;
  animation: zeigerFunke 900ms var(--aus) forwards;
}
@keyframes zeigerFunke {
  from { opacity: 0.9; transform: translate3d(var(--x), var(--y), 0) scale(1); }
  to   { opacity: 0;   transform: translate3d(var(--x), calc(var(--y) - 22px), 0) scale(0.2); }
}

/* ── Ein Schein zwischen den Abschnitten ────────────────────────
   Kein Trennstrich, nur eine Stelle, an der der Himmel etwas heller
   ist. Trennt, ohne zu zerschneiden. */
.schein {
  position: relative;
  height: clamp(60px, 9vh, 104px);
  margin: 0 auto;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(201, 169, 110, 0.05) 0%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .dach-name, .dach-rollen { opacity: 1 !important; }
  .dach-spruch .wort { opacity: 1 !important; transform: none !important; }
  .sternschnuppe { display: none; }
  .funke-zeiger { display: none; }
}