/* The Jawline Method — nur die Website: festes Fenster, Scrollspur, Vorhang, Leiste oben,
   Kapitel, Zeiger. Die Buehne selbst steht in stil.css und gilt
   auch fuers Video. */
.fenster{position:fixed;inset:0}
/* Laenge der Scrollspur: rund 27 vh je Sekunde Zeitleiste (seite.js rechnet sie aus HFM.DAUER) */
#scrollspur{height:4000vh;pointer-events:none}
html.vorhang-offen,html.vorhang-offen body{overflow:hidden}

/* Bis Bilder und Schriften geladen sind, nichts Halbfertiges zeigen */
html:not(.bereit) #buehne .szene:not(#s-titel),
html:not(.bereit) .ringlage,
html:not(.bereit) .titeltext,
html:not(.bereit) .hinweis,
html:not(.bereit) .fortschritt,
html:not(.bereit) .kapitel{visibility:hidden}

/* ------------------------------------------------------------ Vorhang */
.vorhang{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;text-align:center;
  background:radial-gradient(110% 80% at 50% 40%,#fffaf8 0%,var(--grund) 55%,var(--blush) 100%)}
.vorhang[hidden]{display:none}
.vorhang:focus{outline:none}
.vh-mitte{display:grid;justify-items:center;gap:clamp(18px,3.4vmin,34px)}
.vh-marke{position:relative;width:clamp(150px,30vmin,280px);aspect-ratio:1}
.vh-marke img{position:absolute;inset:11%;width:78%;height:78%}
.vh-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.vh-ring circle{fill:none;stroke-width:1.6}
.vh-spur{stroke:var(--linie)}
.vh-lade{stroke:var(--koralle);stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(222,91,63,.45));transition:stroke-dashoffset .35s ease}
.vh-inhalt{display:grid;justify-items:center;gap:clamp(12px,2vmin,20px)}
.vh-kicker{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--koralle-tief)}
.vh-titel{font-size:clamp(36px,7.4vmin,96px);color:var(--tinte)}
.vh-titel em{font-style:italic;color:var(--koralle-tief)}
.vh-stand{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--tinte-leise);min-height:1.5em;font-variant-numeric:tabular-nums}
.vh-wahl{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.vh-wahl[hidden]{display:none}
.vh-knopf,.vh-leise{min-height:52px;padding:0 28px;border-radius:999px;font:800 14px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.vh-knopf{display:inline-flex;align-items:center;gap:12px;border:0;background:var(--koralle-tief);color:#fff;box-shadow:0 14px 34px -16px rgba(173,60,38,.8)}
.vh-knopf:hover{background:var(--tinte);color:#fff}
.vh-leise{background:transparent;border:1px solid var(--linie);color:var(--tinte)}
.vh-leise:hover{border-color:var(--koralle);background:rgba(255,255,255,.6)}
.vh-knopf:focus-visible,.vh-leise:focus-visible{outline:3px solid var(--koralle-tief);outline-offset:3px}
.vh-hinweis{font-size:13px;color:var(--tinte-leise);max-width:34ch}

/* Equalizer im Tonknopf: steht still, bis Ton an ist */
.eq{display:inline-flex;align-items:flex-end;gap:2px;width:16px;height:14px}
.eq i{display:block;width:2px;height:40%;background:currentColor;border-radius:1px}
.vh-knopf .eq i,html[data-ton] .chip .eq i{animation:eq 1.1s ease-in-out infinite}
.vh-knopf .eq i:nth-child(2),html[data-ton] .chip .eq i:nth-child(2){animation-delay:-.4s}
.vh-knopf .eq i:nth-child(3),html[data-ton] .chip .eq i:nth-child(3){animation-delay:-.75s}
.vh-knopf .eq i:nth-child(4),html[data-ton] .chip .eq i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}

/* -------------------------------------------------------- Leiste oben */
.kopfleiste{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,3vw,40px);pointer-events:none}
.kopfleiste > *{pointer-events:auto}
.marke-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte);font-family:var(--serif);font-size:18px;transition:color .4s}
.marke-zeichen{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--koralle-hell);box-shadow:0 0 0 3px rgba(222,91,63,.12)}
.marke-name em{font-style:italic;color:var(--koralle-tief)}
[data-dunkel] .marke-link:not([data-auf-hell]) .marke-name em{color:inherit}
.marke-zeichen img{width:36px;height:36px}
.marke-link:focus-visible{outline:3px solid var(--koralle);outline-offset:4px;border-radius:999px}
.chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border-radius:999px;
  font:800 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tinte);cursor:pointer;
  background:rgba(253,241,242,.82);border:1px solid var(--linie);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,color .4s,border-color .4s}
.chip:hover{background:#fff;border-color:var(--koralle)}
.chip:focus-visible{outline:3px solid var(--koralle);outline-offset:2px}
html[data-ton] .chip{border-color:var(--koralle)}
.kopf-rechts{display:flex;align-items:center;gap:10px}
.chip-start{text-decoration:none;background:var(--koralle-tief);border-color:var(--koralle-tief);color:#fff;box-shadow:0 10px 24px -14px rgba(173,60,38,.85)}
.chip-start:hover,.chip-start:focus-visible{background:var(--tinte);border-color:var(--tinte);color:#fff}

/* Solange der Grund dunkel ist, hell schreiben. data-auf-hell setzt seite.js,
   sobald die wachsende helle Scheibe die Mitte eines Elements erreicht hat.
   "Jetzt starten" bleibt immer koralle. */
[data-dunkel] .marke-link:not([data-auf-hell]){color:var(--creme)}
[data-dunkel] .chip:not(.chip-start):not([data-auf-hell]){background:rgba(39,22,27,.32);border-color:rgba(255,255,255,.45);color:#fff}

/* Waehrend die Scheibe waechst, liegt eine Schrift fuer einen Augenblick halb
   auf Dunkel, halb auf Hell: ein Schein in der Gegenfarbe haelt sie auf
   beidem lesbar (seite.js setzt data-licht nur in diesem Abschnitt) */
[data-licht] .marke-name,[data-licht] .kapitel > *,[data-licht] .recht a{text-shadow:0 0 2px rgba(29,18,20,.9),0 0 7px rgba(29,18,20,.8),0 0 14px rgba(29,18,20,.55)}
[data-licht] [data-auf-hell] .marke-name,[data-licht] .kapitel > [data-auf-hell],[data-licht] .recht a[data-auf-hell]{text-shadow:0 0 2px rgba(253,243,244,.95),0 0 7px rgba(253,243,244,.9),0 0 14px rgba(253,243,244,.6)}

/* -------------------------------------------------------- Kapitelpunkte */
.fortschritt{position:fixed;right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);z-index:20;display:grid;gap:2px}
.fp{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:26px;padding:0;border:0;background:none;cursor:pointer;color:var(--tinte-leise)}
.fp i{display:block;width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;transition:transform .3s,background .3s}
.fp[aria-current] i{background:var(--koralle-tief);border-color:var(--koralle-tief);transform:scale(1.5)}
[data-dunkel] .fp[aria-current]:not([data-auf-hell]) i{background:#fff;border-color:#fff}
.fp-name{font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;white-space:nowrap;
  background:rgba(253,241,242,.94);padding:5px 8px;border-radius:6px;color:var(--tinte)}
.fp:hover .fp-name,.fp:focus-visible .fp-name{opacity:1;transform:none}
.fp:focus-visible{outline:none}
.fp:focus-visible i{outline:2px solid var(--koralle);outline-offset:3px}
[data-dunkel] .fp:not([data-auf-hell]){color:#ffe7ea}

/* -------------------------------------------------------- Kapitelanzeige */
.kapitel{position:fixed;right:clamp(16px,3vw,40px);bottom:16px;z-index:20;display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;column-gap:8px;row-gap:6px;
  width:min(320px,40vw);color:var(--tinte);font-variant-numeric:tabular-nums;transition:color .4s}
.kap-nr{font-family:var(--serif);font-size:22px;font-style:italic;transition:color .4s}
.kap-von{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--tinte-leise);transition:color .4s}
.kap-name{transition:color .4s;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kap-linie{grid-column:1 / -1;display:block;height:1px;background:var(--linie);overflow:hidden;transition:background .4s}
.kap-linie i{display:block;height:100%;background:var(--koralle);transform-origin:0 50%;transform:scaleX(0)}
/* Auf dem Titelfoto kann die Anzeige auf dunklen Haaren liegen (z. B. 1280 x 720):
   ein heller Schein wie beim Hinweis "Scrollen" haelt sie lesbar */
[data-szene="titel"]:not([data-dunkel]) .kapitel{text-shadow:0 0 4px rgba(253,243,244,.95),0 0 10px rgba(253,243,244,.9),0 0 18px rgba(253,243,244,.75)}
[data-dunkel] .kap-nr:not([data-auf-hell]),[data-dunkel] .kap-name:not([data-auf-hell]){color:var(--creme)}
[data-dunkel] .kap-von:not([data-auf-hell]){color:#ffe7ea}
[data-dunkel] .kap-linie:not([data-auf-hell]){background:rgba(255,255,255,.3)}
[data-dunkel] .kap-linie:not([data-auf-hell]) i{background:#fff}

/* -------------------------------------------------------- Rechtliches */
.recht{position:fixed;left:clamp(16px,3vw,40px);bottom:12px;z-index:20;font-size:12px;display:flex;gap:16px}
.recht a{color:var(--tinte-leise);text-decoration:none;padding:8px 0;transition:color .3s}
.recht a:hover{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--koralle);text-underline-offset:4px}
[data-dunkel] .recht a:not([data-auf-hell]){color:#ffe7ea}
.ohne-js{position:fixed;bottom:60px;left:20px;right:20px;z-index:40;background:#fff;padding:14px 18px;border-radius:12px;max-width:520px}

/* -------------------------------------------------------------- Zeiger */
.zeiger{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;z-index:45;pointer-events:none;
  border:1.5px solid var(--koralle);opacity:0;transition:opacity .4s,width .3s,height .3s,margin .3s,background .3s}
.zeiger.da{opacity:.9}
.zeiger.ueber{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(222,91,63,.12)}

/* Sprungmarke fuer Tastatur und Vorleseprogramme */
.sprung{position:fixed;left:12px;top:-80px;z-index:60;background:var(--tinte);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.sprung:focus{top:12px}

@media (max-width:640px){
  .kopfleiste{padding:12px 14px}
  .marke-name{display:none}
  .marke-zeichen{width:40px;height:40px}
  .marke-zeichen img{width:32px;height:32px}
  .chip{min-height:42px;padding:0 13px;font-size:11px}
  .kopf-rechts{gap:8px}
  .fortschritt{right:4px}
  .fp-name{display:none}
  .kapitel{width:auto;grid-template-columns:auto auto;right:14px;bottom:12px}
  .kap-name{display:none}
  .kap-nr{font-size:18px}
  .recht{left:14px;gap:14px}
}

/* -------------------------------------------- Nur Finger (Handy, Tablet) */
/* Kein Zurueckfedern und kein "Ziehen zum Neuladen" an den Seitenenden: die
   Scrollspur ist unsichtbar, dort gibt es nichts zu zeigen. Und kein
   Weichzeichner hinter dem Ton-Knopf: Er muesste bei jedem Bild der
   Geschichte neu gerechnet werden — eine fast deckende Flaeche sieht auf dem
   kleinen Knopf gleich aus. */
@media (hover:none) and (pointer:coarse){
  html,body{overscroll-behavior-y:none}
  .chip{-webkit-backdrop-filter:none;backdrop-filter:none}
  .chip:not(.chip-start){background:rgba(253,241,242,.95)}
  [data-dunkel] .chip:not(.chip-start):not([data-auf-hell]){background:rgba(39,22,27,.55)}
}

/* Auf den farbigen Flaechen (Himbeere, Salbei, Wein) hebt sich der Knopf hell ab */
[data-dunkel] .chip-start{background:#fff;border-color:#fff;color:var(--koralle-tief);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
[data-dunkel] .chip-start:hover,[data-dunkel] .chip-start:focus-visible{background:var(--tinte);border-color:var(--tinte);color:#fff}