/*
  Die Flugfassung. Vorbild ist whiteout.overvac.com: ein festes Bild ueber den
  ganzen Schirm, darueber nur Schrift. Kein Rahmen, keine Karten, keine Knoepfe
  ausser am Ende.
*/
:root {
  --papier: #f4f1ec;
  --papier-leise: rgba(244, 241, 236, .72);
  --papier-still: rgba(244, 241, 236, .62);
  --akzent: #c24a2a;
  --schatten-text: 0 1px 18px rgba(12, 14, 18, .55), 0 1px 3px rgba(12, 14, 18, .45);
  --schrift: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weich: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: #16181c; color: var(--papier); font-family: var(--schrift); -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; }

.buehne { position: fixed; inset: 0; z-index: 0; }
.buehne canvas { display: block; width: 100%; height: 100%; }
/* Randabdunklung, damit die Schrift auf hellen Waenden lesbar bleibt. */
.schleier {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  /* Links fuer das Kapitel, oben fuer Zaehler und Ort, rechts fuer die
     Leiste, unten fuer den Hinweis. Die Mitte bleibt frei, dort ist der Raum. */
  background:
    /* Seit 04.10.2026 sitzt das Dunkel dort, wo der Text steht (unten links),
       statt als grauer Rahmen rundum. Der lag ueber dem ganzen Bild und nahm
       ihm Farbe und Helligkeit. */
    radial-gradient(70% 75% at 0% 88%, rgba(10,12,16,.62) 0%, rgba(10,12,16,.3) 50%, rgba(10,12,16,0) 100%),
    radial-gradient(130% 100% at 50% 45%, rgba(0,0,0,0) 62%, rgba(10,12,16,.24) 100%),
    linear-gradient(270deg, rgba(10,12,16,.24) 0%, rgba(10,12,16,0) 18%),
    linear-gradient(180deg, rgba(10,12,16,.3) 0%, rgba(10,12,16,0) 14%);
}
.strecke { position: relative; z-index: 0; pointer-events: none; }

/* Oben: Zaehler links, Marke Mitte, Ort rechts. */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 26px 34px; text-shadow: var(--schatten-text);
}
.zaehler { display: flex; flex-direction: column; gap: 6px; }
.zahl { font-family: var(--mono); font-size: clamp(34px, 4.2vw, 54px); font-weight: 400; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.einheit { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--papier-leise); }
.marke { pointer-events: auto; justify-self: center; font-weight: 600; letter-spacing: .04em; color: var(--papier); text-decoration: none; font-size: 15px; }
.marke span { color: var(--akzent); }
.ort { justify-self: end; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--papier-leise); }
.ort .strich { width: 28px; height: 1px; background: currentColor; opacity: .7; }

/* Rechts: senkrechte Kapitelleiste mit Fortschritt. */
.leiste {
  position: fixed; right: 34px; top: 50%; transform: translateY(-50%); z-index: 3;
  height: min(48vh, 420px); width: 120px; text-shadow: var(--schatten-text);
}
.leiste::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--papier-still); }
.leiste .fortschritt { position: absolute; right: -1px; top: 0; width: 3px; background: var(--papier); height: 0; border-radius: 2px; }
.leiste a {
  position: absolute; right: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--papier-still); text-decoration: none; transition: color .4s var(--weich);
}
.leiste a::after { content: ""; width: 10px; height: 1px; background: currentColor; transition: width .4s var(--weich); }
.leiste a.ist-aktiv { color: var(--papier); }
.leiste a.ist-aktiv::after { width: 22px; }

/* Links unten: das Kapitel. */
.kapitel {
  position: fixed; left: 34px; bottom: 11vh; z-index: 3; max-width: min(620px, 78vw);
  text-shadow: var(--schatten-text); pointer-events: none;
  transition: opacity .7s var(--weich), transform .7s var(--weich), filter .7s var(--weich);
}
.kapitel.ist-weg { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.kapitel .nr { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .24em; color: var(--papier-leise); }
.kapitel .titel { margin: 0; font-size: clamp(44px, 7.2vw, 104px); font-weight: 500; letter-spacing: -.035em; line-height: .95; }
.kapitel .unter { margin: 16px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--papier-leise); }
.kapitel .text { margin: 22px 0 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; max-width: 460px; color: var(--papier); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; pointer-events: auto; }
.knopf {
  display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 999px;
  background: var(--akzent); color: #fff; text-decoration: none; font-weight: 500; text-shadow: none;
  transition: transform .3s var(--weich), background .2s;
}
.knopf:hover { transform: translateY(-1px); background: #a93d21; }
.knopf.hell { background: rgba(244,241,236,.14); color: var(--papier); backdrop-filter: blur(6px); border: 1px solid rgba(244,241,236,.35); }
.knopf.hell:hover { background: rgba(244,241,236,.24); }

.scrollhinweis {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--papier-leise);
  text-shadow: var(--schatten-text); transition: opacity .6s var(--weich);
}
.scrollhinweis span { display: inline-block; animation: tippen 1.8s var(--weich) infinite; }
@keyframes tippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.laden {
  position: fixed; inset: 0; z-index: 5; margin: 0; display: grid; place-items: center;
  background: #16181c; font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--papier-leise);
  transition: opacity .8s var(--weich);
}
.laden.ist-fertig { opacity: 0; pointer-events: none; }

/* Schmale Fortschrittslinie oben, nur am Handy: die Leiste rechts hat dort
   keinen Platz. */
.balken { display: none; }

/*
  Handy. Das Bild steht hochkant, die Schrift liegt unten, das Motiv sitzt
  deshalb im oberen Teil (flug.js verschiebt den Bildmittelpunkt nach oben).
  Abstaende rechnen die Aussparungen fuer Kamera und Wischleiste mit ein.
*/
@media (max-width: 760px) {
  .schleier {
    background:
      linear-gradient(0deg, rgba(10,12,16,.78) 0%, rgba(10,12,16,.45) 32%, rgba(10,12,16,0) 58%),
      linear-gradient(180deg, rgba(10,12,16,.5) 0%, rgba(10,12,16,0) 16%);
  }
  .hud {
    grid-template-columns: 1fr auto;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 0;
  }
  .marke { display: none; }
  .zahl { font-size: 34px; }
  .einheit, .ort { font-size: 10px; letter-spacing: .18em; }
  .ort .strich { width: 16px; }
  .leiste { display: none; }
  .balken {
    display: block; position: fixed; z-index: 3; left: 18px; right: 18px;
    top: calc(env(safe-area-inset-top, 0px) + 82px); height: 2px; background: rgba(244,241,236,.25); border-radius: 2px;
  }
  .balken span { display: block; height: 100%; width: 0; background: var(--papier); border-radius: 2px; }
  .kapitel {
    left: 18px; right: 18px; max-width: none;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  }
  .kapitel .nr { margin-bottom: 10px; font-size: 11px; }
  .kapitel .titel { font-size: clamp(38px, 11.5vw, 56px); line-height: 1; }
  .kapitel .unter { margin-top: 10px; font-size: 10.5px; letter-spacing: .2em; }
  .kapitel .text { margin-top: 14px; font-size: 15.5px; line-height: 1.5; max-width: none; }
  .knoepfe { margin-top: 20px; gap: 10px; }
  .knopf { padding: 13px 20px; font-size: 15px; }
  .scrollhinweis { bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); font-size: 10px; letter-spacing: .22em; white-space: nowrap; }
}
/* Handy quer: wenig Hoehe, die Schrift wird kleiner und ruecht nach unten. */
@media (max-height: 500px) and (orientation: landscape) {
  .kapitel { bottom: 44px; max-width: 58vw; }
  .kapitel .titel { font-size: clamp(30px, 6vw, 44px); }
  .kapitel .text { font-size: 14px; margin-top: 10px; }
  .kapitel .nr, .kapitel .unter { display: none; }
  .leiste { display: none; }
  .balken {
    display: block; position: fixed; z-index: 3; left: 34px; right: 34px; top: 84px;
    height: 2px; background: rgba(244,241,236,.25); border-radius: 2px;
  }
  .balken span { display: block; height: 100%; width: 0; background: var(--papier); border-radius: 2px; }
  .zahl { font-size: 30px; }
  .scrollhinweis { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kapitel, .scrollhinweis span { transition: none; animation: none; }
}

/* Der Tonknopf (06.10.2026): unten rechts, mobil oben rechts unter dem
   Balken. Vier kleine Striche zeigen, ob Musik laeuft. */
.tonknopf {
  position: fixed; z-index: 4; right: 34px; bottom: 26px;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(10,12,16,.28); border: 1px solid rgba(244,241,236,.22); border-radius: 999px;
  color: var(--papier); font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s, border-color .3s;
}
.tonknopf:hover { background: rgba(10,12,16,.45); border-color: rgba(244,241,236,.4); }
.tonknopf:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }
.wellen { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.wellen i { display: block; width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.tonknopf.laeuft .wellen i { animation: welle 1.4s ease-in-out infinite; }
.tonknopf.laeuft .wellen i:nth-child(2) { animation-delay: -.35s; }
.tonknopf.laeuft .wellen i:nth-child(3) { animation-delay: -.7s; }
.tonknopf.laeuft .wellen i:nth-child(4) { animation-delay: -1.05s; }
@keyframes welle { 0%, 100% { height: 3px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .tonknopf.laeuft .wellen i { animation: none; height: 8px; } }
@media (max-width: 760px) {
  .tonknopf { right: 18px; bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 96px); padding: 7px 10px; font-size: 10px; }
}

/* Die Tonwahl am Anfang (07.10.2026, Kevin: "den Knopf in der Ecke sieht
   keiner"). Nach dem Laden in der Mitte, nach der Wahl fliegt der Knopf in
   die Ecke (FLIP in flug.js). */
.tonwahl {
  position: fixed; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity .6s var(--weich);
}
.tonwahl.ist-da { opacity: 1; pointer-events: auto; }
.tonwahl-an {
  display: flex; align-items: center; gap: 14px; padding: 16px 26px;
  background: rgba(10,12,16,.42); border: 1px solid rgba(244,241,236,.35); border-radius: 999px;
  color: var(--papier); font-family: var(--mono); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(10,12,16,.25); transition: background .3s, border-color .3s, transform .3s var(--weich);
}
.tonwahl-an:hover { background: rgba(10,12,16,.6); border-color: rgba(244,241,236,.6); transform: scale(1.03); }
.tonwahl-an .wellen { height: 14px; }
.tonwahl-an .wellen i { animation: welle 1.4s ease-in-out infinite; }
.tonwahl-an .wellen i:nth-child(2) { animation-delay: -.35s; }
.tonwahl-an .wellen i:nth-child(3) { animation-delay: -.7s; }
.tonwahl-an .wellen i:nth-child(4) { animation-delay: -1.05s; }
.tonwahl-aus {
  background: rgba(10,12,16,.32); border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: rgba(244,241,236,.85); font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  text-shadow: var(--schatten-text);
}
.tonwahl-aus:hover { color: var(--papier); }
.tonwahl button:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }
.tonknopf.ist-versteckt { opacity: 0; pointer-events: none; }
.tonknopf.fliegt { transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .4s; }
@media (prefers-reduced-motion: reduce) { .tonknopf.fliegt { transition: opacity .3s; } }
@media (max-width: 760px) { .tonwahl { top: 38%; } .tonwahl-an { padding: 14px 20px; font-size: 12px; letter-spacing: .18em; } }