/* =================================================================
   LOGBUCH · Andante Ramero, eine seefahrende Bardin
   Stylesheet — kein Framework, kein Build-Step.
   Gliederung:
     1. Farbwelt & Tokens
     2. Grundgerüst
     3. Kurslinie (zeichnet sich beim Scrollen)
     4. Hero
     5. Bild-Szenen & Salzdunst
    5b. Treibgut (Noten, Kompass, Windböen)
     6. Seezeichen (Bojen am rechten Rand)
     7. Text-Kapitel
    7b. Lieder
     8. Übergang (Ruhe zwischen den Kapiteln)
     9. Finale / Fusszeile
    10. Animationen
    11. Responsive
    12. Bewegung reduzieren
   ================================================================= */

/* =================================================================
   1 · FARBWELT & TOKENS
   ================================================================= */
:root{
  --ground:#06181f;      /* Tiefsee, fast schwarz                 */
  --shadow:#0d2a33;      /* Petrolschatten (Sektionswechsel)      */
  --petrol:#12454f;      /* Petrol, mittlere Tiefe                */
  --bone:#e9e3d5;        /* Segeltuch / Pergament (Text)          */
  --bone-dim:#aab8bb;    /* gedämpfter Text, kühl                 */
  --gold:#c99a3f;        /* Messing & Gold — das "Lied", Signatur */
  --gold-glow:#eccd82;   /* helleres Gold (Laternenlicht)         */
  --surf:#6fa8ab;        /* Gischtblau (Kurslinie)                */
  --haze:#9dbfc6;        /* Salzdunst (kühler Zweitton)           */

  /* Dieselben Farben noch einmal als Kanäle — nur damit Verläufe
     sauber gegen die eigene Farbe ausblenden können (siehe §5).
     "transparent" wäre schwarz-transparent und erzeugt am Rand
     einen fahlen Schleier. */
  --ground-rgb:6 24 31;
  --surf-rgb:111 168 171;
  --gold-rgb:201 154 63;
  --haze-rgb:157 191 198;

  --serif:"EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --display:"Fraunces", "Hoefler Text", Georgia, serif;

  --measure:34rem;       /* Lesebreite                            */
}

/* =================================================================
   2 · GRUNDGERÜST
   ================================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ground);
  color:var(--bone);
  font-family:var(--serif);
  font-size:clamp(1.05rem,0.6rem + 0.9vw,1.3rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

/* dezente Papierkörnung über allem — das Logbuch ist aus Papier */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* Ambiente: Salzstaub, Meeresleuchten und — ab und an — Gischt.
   Liegt ÜBER den Szenen (z-index 4): die See weht durch alles,
   auch über die Bilder. Nur Körnung (60) und Seezeichen (50) sind
   höher. */
#gischt{position:fixed;inset:0;z-index:4;pointer-events:none}

/* =================================================================
   3 · KURSLINIE (zeichnet sich beim Scrollen)
   Zwei Pfade übereinander: der geplante Kurs liegt gepunktet und
   sehr blass vor ihr, der gefahrene Kurs zeichnet sich beim Scrollen
   darüber — so, wie man eine Route in eine Seekarte nachträgt.
   ================================================================= */
.course{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(58vw,780px);height:100%;
  z-index:1;pointer-events:none;overflow:visible;
}
.course path{fill:none;stroke-linecap:round}
.course .planned{
  stroke:var(--haze);stroke-width:1.6;
  stroke-dasharray:2 15;opacity:.14;
}
.course .sailed{
  stroke:var(--surf);stroke-width:2.4;opacity:.55;
  filter:drop-shadow(0 0 6px rgb(var(--surf-rgb)/.35));
}

/* =================================================================
   4 · HERO
   ================================================================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:8vh 6vw;z-index:3;
  background:
    /* die letzte Ebene führt den Hero exakt auf --ground zurück —
       sonst trifft sein dunklerer Fuß (#04121a) mit feiner Stufe
       auf die Oberkante der ersten Szene */
    linear-gradient(rgb(var(--ground-rgb)/0) 80%, var(--ground) 100%),
    radial-gradient(120% 90% at 50% 8%, rgb(var(--gold-rgb)/.10), rgb(var(--gold-rgb)/0) 60%),
    radial-gradient(110% 70% at 50% 82%, rgb(var(--surf-rgb)/.09), rgb(var(--surf-rgb)/0) 62%),
    radial-gradient(140% 100% at 50% 120%, #04121a, rgb(var(--ground-rgb)/0) 55%),
    var(--ground);
}
.eyebrow{
  font-family:var(--serif);font-style:italic;
  color:var(--haze);letter-spacing:.06em;
  font-size:clamp(.95rem,.8rem + .3vw,1.15rem);
  opacity:0;transform:translateY(14px);
  animation:rise 1.4s .3s ease both;
}
.hero h1{
  font-family:var(--display);
  font-weight:400;font-optical-sizing:auto;
  font-size:clamp(3.4rem,2rem + 8vw,9rem);
  line-height:.95;letter-spacing:-.01em;
  margin:.22em 0 .1em;
  color:var(--bone);
  text-shadow:0 0 40px rgba(0,0,0,.6);
  opacity:0;transform:translateY(26px);
  animation:rise 1.6s .55s cubic-bezier(.2,.7,.2,1) both;
}
.hero .epithet{
  display:block;font-size:.34em;font-style:italic;
  color:var(--gold);letter-spacing:.02em;margin-top:.5em;
  opacity:0;transform:translateY(20px);
  animation:rise 1.6s .8s ease both;
}
.hero .tagline{
  max-width:31rem;color:var(--bone-dim);
  font-size:clamp(1.05rem,.9rem + .4vw,1.35rem);
  margin-top:2.2rem;
  opacity:0;transform:translateY(20px);
  animation:rise 1.6s 1.05s ease both;
}
.scrollhint{
  position:absolute;bottom:3.5vh;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  color:var(--haze);font-style:italic;font-size:.9rem;letter-spacing:.05em;
  opacity:0;animation:rise 1.6s 1.5s ease both;
}
.scrollhint .stem{
  width:1px;height:46px;
  background:linear-gradient(var(--haze), rgb(var(--haze-rgb)/0));
  animation:breathe 2.6s ease-in-out infinite;
}

/* =================================================================
   5 · BILD-SZENEN & SALZDUNST
   ================================================================= */
.scene{
  position:relative;height:100svh;min-height:440px;
  z-index:3;overflow:hidden;
  display:flex;align-items:flex-end;
}
.scene-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.12);opacity:0;
  transition:transform 2.6s ease, opacity 1.4s ease;
}
.scene.in .scene-img{transform:scale(1);opacity:1}
/* will-change nur, solange die Szene tatsächlich in Bewegung ist —
   die Klasse .armed setzt und entfernt js/main.js. */
.scene.armed .scene-img{will-change:transform,opacity}

/* Verläufe, die das Bild in die dunklen Textteile überblenden.
   ::before trägt drei Ebenen: den oberen Hauptverlauf, darunter einen
   doppelt so hohen, sehr schwachen Hauch, und eine ständige Vignette,
   die die Bildränder ins Tiefseedunkel drückt.

   Wichtig für die Weichheit: Die Stopps folgen einer S-Kurve
   (smoothstep), die an BEIDEN Enden flach ausläuft. Endet ein Verlauf
   mit Restgefälle, zeichnet das Auge dort eine Linie (Mach-Band) —
   genau die harte Kante, die man sonst am Bildrand sieht. Der Hauch
   überlappt die Zone zusätzlich, damit keine gemeinsame Grenzlinie
   übrig bleibt. Die Höhen sind gedeckelt (clamp), damit flache
   Screens keine harte Kante und hohe Screens kein aufgefressenes
   Bild bekommen. */
.scene::before,.scene::after{content:"";position:absolute;z-index:2;pointer-events:none}
.scene::before{
  inset:0;
  background-image:
    linear-gradient(to bottom,
      rgb(var(--ground-rgb)/1)     0%,
      rgb(var(--ground-rgb)/.96)  12%,
      rgb(var(--ground-rgb)/.84)  24%,
      rgb(var(--ground-rgb)/.68)  38%,
      rgb(var(--ground-rgb)/.5)   50%,
      rgb(var(--ground-rgb)/.32)  62%,
      rgb(var(--ground-rgb)/.16)  76%,
      rgb(var(--ground-rgb)/.04)  89%,
      rgb(var(--ground-rgb)/0)   100%),
    linear-gradient(to bottom,
      rgb(var(--ground-rgb)/.30)   0%,
      rgb(var(--ground-rgb)/.22)  35%,
      rgb(var(--ground-rgb)/.10)  65%,
      rgb(var(--ground-rgb)/.03)  85%,
      rgb(var(--ground-rgb)/0)   100%),
    radial-gradient(130% 100% at 50% 42%,
      rgb(var(--ground-rgb)/0)   52%,
      rgb(var(--ground-rgb)/.42) 100%);
  background-size:
    100% clamp(120px,42svh,400px),
    100% clamp(240px,72svh,720px),
    100% 100%;
  background-position:top, top, center;
  background-repeat:no-repeat;
}
.scene::after{
  left:0;right:0;bottom:0;height:clamp(150px,50svh,480px);
  background:linear-gradient(to top,
    rgb(var(--ground-rgb)/1)     0%,
    rgb(var(--ground-rgb)/1)     8%,
    rgb(var(--ground-rgb)/.96)  18%,
    rgb(var(--ground-rgb)/.84)  30%,
    rgb(var(--ground-rgb)/.66)  43%,
    rgb(var(--ground-rgb)/.48)  55%,
    rgb(var(--ground-rgb)/.3)   68%,
    rgb(var(--ground-rgb)/.14)  80%,
    rgb(var(--ground-rgb)/.04)  91%,
    rgb(var(--ground-rgb)/0)   100%);
}

/* Salzdunst: liegt über dem Bild und lichtet sich beim Scrollen.
   js/main.js legt das Element an und schreibt --fog (1 = dicht,
   ~0.18 = klarste Sicht in Szenenmitte — ganz reißt er nie auf).
   Zwei Schwaden treiben gegenläufig; .near pausiert sie, sobald die
   Szene den Viewport verlässt. */
.haze{
  position:absolute;inset:-15% -25%;z-index:2;pointer-events:none;
  opacity:var(--fog,.4);
  /* Zu den Szenenrändern ausblenden: overflow:hidden würde die
     Schwaden sonst an der Ober-/Unterkante hart abschneiden — genau
     dort entstünde eine sichtbare Linie.
     Geometrie: das Element ragt 15 % über die Szene hinaus, die
     Szenen-Oberkante liegt also bei 11,5 % der Maske, die Unterkante
     bei 88,5 %. Die Rampe beginnt erst BEI 14 % (knapp unterhalb der
     Schnittlinie) — an der Kante selbst ist der Dunst damit exakt
     null, sonst hellt er bei dichtem Schleier direkt unter der Linie
     auf und zeichnet sie nach. */
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%, transparent 14%, rgba(0,0,0,.45) 22%, #000 30%,
    #000 70%, rgba(0,0,0,.45) 78%, transparent 86%, transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0%, transparent 14%, rgba(0,0,0,.45) 22%, #000 30%,
    #000 70%, rgba(0,0,0,.45) 78%, transparent 86%, transparent 100%);
}
.haze::before,.haze::after{
  content:"";position:absolute;inset:0;
  background-repeat:no-repeat;background-size:100% 100%;
  animation:hazedrift 44s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.haze::before{
  background-image:
    radial-gradient(55% 40% at 18% 28%, rgb(var(--haze-rgb)/.17), rgb(var(--haze-rgb)/0) 70%),
    radial-gradient(65% 45% at 78% 60%, rgb(var(--haze-rgb)/.12), rgb(var(--haze-rgb)/0) 70%),
    radial-gradient(80% 60% at 45% 85%, rgb(var(--ground-rgb)/.55), rgb(var(--ground-rgb)/0) 72%),
    radial-gradient(70% 55% at 60% 10%, rgb(var(--ground-rgb)/.48), rgb(var(--ground-rgb)/0) 70%);
}
.haze::after{
  background-image:
    radial-gradient(60% 45% at 70% 25%, rgb(var(--haze-rgb)/.11), rgb(var(--haze-rgb)/0) 68%),
    radial-gradient(75% 55% at 25% 70%, rgb(var(--ground-rgb)/.6), rgb(var(--ground-rgb)/0) 74%),
    radial-gradient(50% 40% at 88% 80%, rgb(var(--haze-rgb)/.1), rgb(var(--haze-rgb)/0) 70%);
  animation-duration:67s;
  animation-direction:alternate-reverse;
}
.scene.near .haze::before,
.scene.near .haze::after{animation-play-state:running}

/* ---------- BAND: die flache Variante ----------
   Ein Einschub für die stillen Nahmotive (Stillleben, leerer Raum), die
   neben den grossen Weiten sonst gleich laut auftreten, obwohl sie leise
   gemeint sind. Es ist ein Rhythmuswechsel, keine Sparmassnahme.

   Ein Band trägt die Klasse "scene band": js/main.js behandelt es
   dadurch wie jede Szene (Einzoomen, Salzdunst, Nachladen), und nur die
   Optik ändert sich hier. Es bekommt keinen Titel, also braucht es auch
   keine Ruhezone unten — dafür eine kräftigere Vignette, damit es
   erkennbar als Einschub gelesen wird und nicht als verunglücktes
   Vollbild.

   Die Verlaufshöhen aus §5 lassen sich nicht übernehmen: sie hängen an
   svh und das Band ist nur halb so hoch. Deshalb eigene Werte.

   Breite ist bewusst gedeckelt (max-width statt volle Breite): Die
   Quellbilder sind wie alle anderen im 3:2-Format. In einem breiten,
   aber sehr flachen Ausschnitt frisst background-size:cover davon weit
   mehr als die Hälfte weg — bei 45svh auf voller Fensterbreite blieben
   nur rund 42 % der Bildhöhe stehen, der Rest fiel oben und unten weg.
   Eine engere, höhere Box lässt das Seitenverhältnis der Box näher an
   das der Bilder heranrücken und braucht darum viel weniger Zuschnitt. */
.scene.band{
  height:68svh;min-height:400px;
  max-width:min(1300px,92vw);margin-inline:auto;
}
.scene.band::before{
  background-size:
    100% clamp(90px,29svh,260px),
    100% clamp(170px,49svh,450px),
    100% 100%;
}
.scene.band::after{height:clamp(110px,34svh,300px)}
/* kräftigere Vignette: setzt die dritte Ebene von ::before neu */
.scene.band::before{
  background-image:
    linear-gradient(to bottom,
      rgb(var(--ground-rgb)/1)     0%,
      rgb(var(--ground-rgb)/.96)  12%,
      rgb(var(--ground-rgb)/.84)  24%,
      rgb(var(--ground-rgb)/.68)  38%,
      rgb(var(--ground-rgb)/.5)   50%,
      rgb(var(--ground-rgb)/.32)  62%,
      rgb(var(--ground-rgb)/.16)  76%,
      rgb(var(--ground-rgb)/.04)  89%,
      rgb(var(--ground-rgb)/0)   100%),
    linear-gradient(to bottom,
      rgb(var(--ground-rgb)/.30)   0%,
      rgb(var(--ground-rgb)/.22)  35%,
      rgb(var(--ground-rgb)/.10)  65%,
      rgb(var(--ground-rgb)/.03)  85%,
      rgb(var(--ground-rgb)/0)   100%),
    radial-gradient(115% 100% at 50% 45%,
      rgb(var(--ground-rgb)/0)   38%,
      rgb(var(--ground-rgb)/.62) 100%);
}
/* der Dunst darf im Band nie ganz aufreissen, sonst wirkt der kurze
   Ausschnitt hart geschnitten */
.scene.band .haze{opacity:calc(var(--fog,.4) * .8 + .12)}

/* PLATZHALTER: farbige Wasser-Verläufe je Kapitel. Sie bleiben als
   Sicherheitsnetz liegen — liegt die Datei in img/, legt js/main.js
   das echte Bild darüber (Inline-Style schlägt Klasse).
   Die hellen Stellen liegen bewusst zwischen 20 % und 50 % Höhe: nur
   dieses Band bleibt von den Verläufen oben und unten weitgehend
   verschont. Weiter unten gesetzt, verschwänden sie im Dunkel. */
.ph1{background-image:
  radial-gradient(80% 55% at 28% 40%, #7a5a2a, transparent 60%),
  radial-gradient(85% 60% at 72% 18%, #235360, transparent 62%),
  linear-gradient(165deg,#123642,#050f14)}
.ph2{background-image:
  radial-gradient(70% 50% at 62% 24%, #2d5f6b, transparent 62%),
  radial-gradient(55% 45% at 24% 46%, #6a4f26, transparent 60%),
  linear-gradient(200deg,#0e2a38,#04101a)}
.ph3{background-image:
  radial-gradient(95% 60% at 50% 26%, #2f7681, transparent 62%),
  radial-gradient(70% 55% at 14% 48%, #17505c, transparent 60%),
  linear-gradient(150deg,#154853,#061319)}
.ph4{background-image:
  radial-gradient(85% 60% at 32% 22%, #43565e, transparent 60%),
  radial-gradient(75% 55% at 78% 46%, #1b3b45, transparent 60%),
  linear-gradient(215deg,#22383f,#060d11)}
.ph5{background-image:
  radial-gradient(80% 55% at 60% 42%, #8a6a30, transparent 60%),
  radial-gradient(85% 60% at 28% 20%, #2a6572, transparent 62%),
  linear-gradient(175deg,#154350,#06151b)}

.scene .plate{
  position:relative;z-index:3;width:100%;
  padding:0 6vw clamp(3rem,12vh,9rem);color:var(--bone);
  text-align:center;
}
.scene .plate .no{
  font-family:var(--display);font-style:italic;
  color:var(--gold);font-size:1.1rem;letter-spacing:.08em;
  opacity:.9;
}
.scene .plate .cap{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,1rem + 3vw,3.4rem);line-height:1.05;
  /* max-width bricht lange Titel früher um; auto-Ränder halten den
     Satz dabei mittig unter der Kapitelnummer */
  max-width:20ch;margin:.2em auto 0;
  text-shadow:0 2px 30px rgba(0,0,0,.7);
}
/* Hinweis, solange in img/ noch keine Datei liegt.
   Sobald das Bild geladen ist, blendet ihn .has-img aus. */
.ph-note{
  position:absolute;z-index:3;top:calc(50% - .5em);left:0;right:0;
  text-align:center;color:rgba(233,227,213,.5);
  font-style:italic;font-size:.95rem;letter-spacing:.04em;pointer-events:none;
}
.scene.has-img .ph-note{display:none}

/* =================================================================
   5b · TREIBGUT — Noten, Kompassrose und Windböen
   Einzelne Zeichen ziehen ab und an durchs Bild: einblenden, treiben,
   ausblenden. js/main.js setzt Ort, Weg und Dauer als Custom
   Properties, alles Übrige steht hier. Sie liegen auf derselben
   Ebene wie die Gischt (z-index 4) und bleiben bewusst blass — sie
   sollen auffallen, wenn man hinsieht, und sonst nicht stören.
   ================================================================= */
.driftmarks{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.driftmark{
  position:absolute;
  width:var(--w);height:auto;   /* Höhe aus der viewBox — deshalb im
                                   Markup keine width/height setzen */
  color:var(--haze);
  opacity:0;
  /* dunkler Hauch ringsum: über einer hellen Bildstelle bliebe das
     Zeichen sonst konturlos */
  filter:drop-shadow(0 0 9px rgb(var(--ground-rgb)/.85));
  animation:drift var(--dur,16s) cubic-bezier(.33,0,.5,1) both;
}
/* Alles Musikalische glimmt golden — es ist Andantes Lied. Der
   Kompass bleibt etwas matter, er gehört zur Navigation, nicht zum
   Klang. Die Breiten sind so gewählt, dass die Zeichen ungefähr
   gleich groß wirken, obwohl ihre viewBoxen verschieden sind. */
.driftmark.note-viertel     {--w:clamp(17px,1.7vw,26px); color:var(--gold-glow)}
.driftmark.note-achtel      {--w:clamp(20px,2.1vw,32px); color:var(--gold-glow)}
.driftmark.note-zwei        {--w:clamp(28px,2.9vw,44px); color:var(--gold-glow)}
.driftmark.note-sechzehntel {--w:clamp(28px,2.9vw,44px); color:var(--gold-glow)}
.driftmark.note-drei        {--w:clamp(38px,3.9vw,58px); color:var(--gold-glow)}
.driftmark.schluessel       {--w:clamp(24px,2.5vw,38px); color:var(--gold-glow)}
.driftmark.kompass          {--w:clamp(38px,4.4vw,66px); color:var(--gold)}

/* =================================================================
   6 · SEEZEICHEN  (Bojen an einer Leine, rechter Rand)
   Kein Menü — eine Reihe kleiner Lichter, an denen man ablesen kann,
   wo man steht, und an denen man hinspringen kann. Markup entsteht
   in js/main.js aus den [data-nav]-Abschnitten.
   ================================================================= */
.seamarks{
  position:fixed;z-index:50;
  right:clamp(.6rem,1.6vw,1.9rem);
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.5rem,1.4vh,1rem);
  padding:.9rem .3rem;
  /* visibility zusätzlich zu opacity: sonst blieben die Bojen für
     die Tastatur erreichbar, obwohl sie unsichtbar sind */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1.2s ease, visibility 1.2s;
}
/* erst aufglimmen, wenn der Hafen verlassen ist */
.seamarks.awake{opacity:1;visibility:visible;pointer-events:auto}
/* die Leine, an der die Bojen hängen */
.seamarks::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    rgb(var(--haze-rgb)/0),
    rgb(var(--haze-rgb)/.35) 18%,
    rgb(var(--haze-rgb)/.35) 82%,
    rgb(var(--haze-rgb)/0));
}
.buoy{
  position:relative;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
/* das Bojenlicht selbst */
.buoy::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:rgb(var(--haze-rgb)/.55);
  box-shadow:0 0 6px rgb(var(--haze-rgb)/.3);
  transition:width .5s ease,height .5s ease,background .5s ease,box-shadow .5s ease;
}
.buoy:hover::after,.buoy:focus-visible::after{background:var(--haze)}
.buoy[aria-current]::after{
  width:8px;height:8px;
  background:var(--gold-glow);
  box-shadow:0 0 12px rgb(var(--gold-rgb)/.6);
}
.buoy:focus-visible{outline:1px solid rgb(var(--gold-rgb)/.6);outline-offset:3px}
/* Kapitelname, nur bei Hover/Fokus */
.buoy .label{
  position:absolute;right:calc(100% + .5rem);top:50%;
  transform:translateY(-50%) translateX(5px);
  white-space:nowrap;
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.84rem;line-height:1;letter-spacing:.02em;
  color:var(--haze);
  text-shadow:0 0 10px var(--ground),0 0 22px var(--ground);
  opacity:0;pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.buoy:hover .label,.buoy:focus-visible .label{opacity:.95;transform:translateY(-50%)}
.buoy[aria-current] .label{color:var(--gold-glow)}

/* =================================================================
   7 · TEXT-KAPITEL
   ================================================================= */
.chapter{
  position:relative;z-index:3;
  padding:clamp(4.5rem,16vh,12rem) 6vw;
  /* der schmale Verlauf oben nimmt der radialen Aufhellung die
     sichtbare Kante gegen das davorliegende Tiefseedunkel */
  background:
    linear-gradient(var(--ground), rgb(var(--ground-rgb)/0) 16%),
    radial-gradient(120% 60% at 50% 0%, var(--shadow), var(--ground) 70%);
}
.chapter .inner{max-width:var(--measure);margin:0 auto}
.chapter .ch-eyebrow{
  font-family:var(--display);font-style:italic;color:var(--haze);
  letter-spacing:.05em;font-size:1.05rem;margin-bottom:.6rem;
  display:flex;align-items:center;gap:.9rem;
}
.chapter .ch-eyebrow::before{content:"";width:2.4rem;height:1px;background:var(--surf);opacity:.7}
.chapter h2{
  font-family:var(--display);font-weight:300;font-optical-sizing:auto;
  font-size:clamp(2.1rem,1.4rem + 3.5vw,4rem);line-height:1.02;
  letter-spacing:-.01em;color:var(--bone);margin-bottom:1.4rem;
}
.chapter h2 em{font-style:italic;color:var(--gold-glow)}
.chapter p{margin-bottom:1.2rem;color:#dcd7c8}
.chapter p:first-of-type::first-letter{
  font-family:var(--display);float:left;font-size:4.2rem;line-height:.8;
  padding:.05em .12em 0 0;color:var(--gold);font-weight:400;
}
/* Die zwei Eröffnungsabsätze sind ein Traum, kein Erlebtes — die
   Quelle markiert sie als *kursiv*. Der Goldinitial oben bleibt
   stehen und erbt die Kursivierung, das liest sich wie ein Zitat aus
   der Erinnerung statt wie ein Bruch im Satzbild. */
.chapter p.traum{font-style:italic;color:var(--bone-dim)}
/* Fortsetzung eines Kapitels nach einer eingeschobenen Szene: kein
   zweiter Initial, sonst sähe es aus wie ein neuer Anfang. */
.chapter.weiter p:first-of-type::first-letter{
  font-family:inherit;float:none;font-size:inherit;line-height:inherit;
  padding:0;color:inherit;font-weight:inherit;
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}

/* =================================================================
   7b · LIEDER
   Andantes vier Lieder stehen als eigener Satz: mittig, kursiv, enger
   und etwas kleiner als der Fliesstext, unter einem goldenen
   Notenzeichen. Der Kehrreim ist gedimmt — er wiederholt sich bis zu
   viermal, das Auge soll ihn überspringen dürfen, ohne den Faden zu
   verlieren.
   ================================================================= */
.lied{
  position:relative;z-index:3;text-align:center;
  padding:clamp(1rem,4vh,3rem) 6vw clamp(4rem,14vh,9rem);
  background:var(--ground);
}
.lied .inner{max-width:31rem;margin:0 auto}
.lied .liedmark{
  display:block;width:clamp(26px,2.6vw,38px);height:auto;
  margin:0 auto clamp(1.6rem,4vh,2.6rem);
  color:var(--gold);opacity:.75;
}
.lied p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(.98rem,.86rem + .28vw,1.14rem);
  line-height:1.85;
  color:var(--bone-dim);
  margin-bottom:clamp(1.2rem,3vh,1.9rem);
  text-wrap:balance;

  /* --glanz sagt, wie nah die Strophe an der Lesehöhe steht: 1 = genau
     dort, 0 = weit weg. js/main.js schreibt den Wert bei jedem
     Scrolltakt. Die Strophe, auf der das Auge liegt, tritt dadurch
     hervor und bekommt einen schwachen goldenen Schein — das Lied
     „singt sich" im Tempo des Lesers. Passend zum Namen: andante,
     im Schritt eines Menschen, der weiss, dass er unterwegs ist.
     Der Vorgabewert 1 sorgt dafür, dass eine Strophe ohne gesetzten
     Wert (ausserhalb des Bildes, oder bei reduzierter Bewegung)
     einfach voll dasteht. */
  --glanz:1;
  opacity:calc(.55 + var(--glanz) * .45);
  text-shadow:0 0 calc(var(--glanz) * 14px) rgb(var(--gold-rgb) / calc(var(--glanz) * .28));
}
.lied p:last-child{margin-bottom:0}
.lied p.kehrreim{color:rgba(170,184,187,.6)}

/* =================================================================
   8 · ÜBERGANG — ruhige See zwischen den Kapiteln
   Bewusst leer: hier liegt das Wasser offen, Kurslinie und Gischt
   scheinen durch.
   ================================================================= */
.transition{position:relative;z-index:3;height:clamp(140px,32vh,300px)}

/* =================================================================
   9 · FINALE / FUSSZEILE
   ================================================================= */
.epilogue{position:relative;z-index:3;text-align:center;
  padding:clamp(6rem,22vh,16rem) 6vw 6vh;
  /* wie beim Hero: oben sauber vom Tiefseedunkel übernehmen, statt
     mit dem dunkleren Radial (#05141b) eine Stufe zu ziehen */
  background:
    linear-gradient(var(--ground), rgb(var(--ground-rgb)/0) 20%),
    radial-gradient(100% 80% at 50% 40%, #05141b, var(--ground))}
.epilogue .mark{font-family:var(--display);color:var(--gold);font-size:2rem;font-style:italic;opacity:.85}
.epilogue .seal{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.6rem,1rem + 3vw,3rem);color:var(--bone);
  margin:1.2rem 0 .4rem;
}
.epilogue .whisper{color:var(--bone-dim);font-style:italic;max-width:26rem;margin:0 auto}
footer{position:relative;z-index:3;text-align:center;padding:4vh 6vw 8vh;
  color:rgba(170,184,187,.5);font-size:.9rem;font-style:italic;letter-spacing:.03em}

/* =================================================================
   10 · ANIMATIONEN
   ================================================================= */
@keyframes rise{to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.35;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1)}}
@keyframes hazedrift{
  from{transform:translate3d(-3.5%,-1.5%,0)}
  to{transform:translate3d(3.5%,1.5%,0)}
}
/* Treibgut: lange auf gleicher Höhe halten, an beiden Enden weich
   an- und abschwellen — ein Zeichen, das mit voller Deckkraft
   erscheint oder verschwindet, wirkt wie ein Fehler. */
@keyframes drift{
  0%  {opacity:0;
       transform:translate3d(0,0,0) rotate(var(--rot0,0deg)) scale(.94)}
  22% {opacity:var(--peak,.16)}
  74% {opacity:var(--peak,.16)}
  100%{opacity:0;
       transform:translate3d(var(--dx,70px),var(--dy,-90px),0) rotate(var(--rot1,0deg)) scale(1.06)}
}

/* =================================================================
   11 · RESPONSIVE
   ================================================================= */
@media(max-width:640px){
  .course{width:84vw}
  .scene .plate{padding-bottom:clamp(4rem,16vh,10rem)}
  .chapter{padding:clamp(3.5rem,12vh,8rem) 7vw}
  /* auf dem Telefon gibt es kein Hover — die Namen blieben unsichtbar
     und stünden nur im Weg */
  .buoy .label{display:none}
  .seamarks{gap:.55rem;padding:.7rem .2rem}
  .buoy{width:18px;height:18px}
}
/* sehr flache Fenster (Telefon quer, kleine Laptops) */
@media(max-height:520px){
  .seamarks{gap:.4rem}
  .buoy{width:16px;height:16px}
}

/* =================================================================
   12 · BEWEGUNG REDUZIEREN
   ================================================================= */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .hero .eyebrow,.hero h1,.hero .epithet,.hero .tagline,.scrollhint{opacity:1;transform:none}
  .scene-img{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  /* Dunst steht still und dünn — Bilder bleiben gut sichtbar,
     js/main.js schreibt in diesem Fall kein --fog */
  .haze{opacity:.3}
  /* Lieder stehen ruhig und vollständig da: kein Wandern des Glanzes,
     kein Schein — js/main.js schreibt hier kein --glanz */
  .lied p{--glanz:1;text-shadow:none}
  /* Die Seezeichen erscheinen weiterhin nach dem Hero, nur ohne
     Überblendung — .awake schaltet sie ohne Transition hart ein. */
}