/* Nordschleife · Vertikal
   Farbrolle: die divergierende Skala ist Messgroesse, nicht Dekoration.
   Eben bleibt bewusst stumpf, damit Neigung die Aufmerksamkeit bekommt. */

:root {
  /* Flaechen und Text folgen der setupforge-Palette (asphalt/pit/paper/stencil);
     --dimmer liegt bewusst ueber deren stencil-2, damit Kleintext auf dunklem
     Grund die 4,5:1 Kontrastschwelle erreicht. */
  --void:      #0a0c10;
  --void-2:    #12161d;
  --panel:     #171c25;
  --rule:      rgba(255, 255, 255, 0.08);
  --rule-hi:   rgba(255, 255, 255, 0.16);
  --paper:     #ecf2f8;
  --dim:       #8b95a5;
  --dimmer:    #7e8c9c;

  /* Bedienfarben (setupforge: car-a als Interface-Akzent, flag als CTA). */
  --ui:        #4cc9f0;
  --cta:       #f26b3a;

  /* Datenskala der Laengsneigung -- Messgroesse, KEINE Interface-Farbe.
     Bleibt unabhaengig vom Interface-Akzent, damit "bergab" nie mit
     "anklickbar" verwechselt wird. */
  --descent:   #8ce8ff;
  --descent-2: #3f9fd8;
  --flat:      #49535f;
  --ascent-2:  #d9782f;
  --ascent:    #ffb04a;

  --pad: clamp(14px, 2vw, 26px);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --display: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Liberation Sans Narrow", "Arial Narrow", var(--sans);
  --r: 8px;

  --spine-h: 166px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0 0 var(--spine-h) 0;
  width: 100%;
  height: calc(100% - var(--spine-h));
  display: block;
  touch-action: none;
}

#labels {
  position: fixed;
  inset: 0 0 var(--spine-h) 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;   /* ueber der Szene, unter allen Bedienflaechen */
}

/* Die Kurvennamen sind der Haupteinstieg in die Streckenbeschreibung,
   deshalb echte Schaltflaechen statt blosser Beschriftung. */
.corner-label {
  position: absolute;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  padding: 3px 7px;
  border: 0;
  border-left: 1px solid var(--rule-hi);
  background: color-mix(in srgb, var(--void) 62%, transparent);
  text-shadow: 0 1px 6px #000;
  will-change: transform, opacity;
  pointer-events: auto;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.corner-label:hover {
  color: var(--ui);
  border-left-color: var(--ui);
  background: color-mix(in srgb, var(--void) 88%, transparent);
}
.corner-label:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }
.corner-label.is-selected {
  color: var(--void);
  background: var(--ui);
  border-left-color: var(--ui);
  text-shadow: none;
}

/* Orte sind bewusst das typografische Gegenteil der Kurvennamen: gemischte
   Schreibung statt Versalien, Fliesschrift statt Monospace, warmes Grau statt
   kaltem Blau. Wer beide sieht, muss sie nicht erst zuordnen. */
.place-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 350;
  letter-spacing: 0.02em;
  color: #bdb3a2;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--void) 58%, transparent);
  text-shadow: 0 1px 8px #000, 0 0 3px #000;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity .18s;
}
.place-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid #b3a999;
  background: transparent;
  flex: none;
}
.place-town { font-size: 14px; font-weight: 420; color: #cfc3ae; }
.place-town .place-dot { width: 8px; height: 8px; border-width: 1.5px; background: #cfc3ae; }
.place-city { font-size: 15px; font-weight: 470; color: #ded2bb; }
.place-hamlet { font-size: 11px; color: #8f877b; }
.place-hamlet .place-dot { width: 4px; height: 4px; }

/* setupforge-Kartenmuster: hauchduenner heller Verlauf auf dunklem Grund,
   1px-Linie, weicher Schatten nach unten, lichte Innenkante oben. */
.actions, .legend, .reader, .stage-card, .help, .exag-help {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--void-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 46px -26px rgba(0,0,0,.85);
}

/* ---------------------------------------------------------------- Kopfzeile */

/* Ohne Verlauf im Ruecken verschwindet die Kopfzeile in den Konturlinien. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 -34px 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--void) 92%, transparent) 0%,
    color-mix(in srgb, var(--void) 62%, transparent) 55%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: var(--pad) var(--pad) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  pointer-events: none;
  z-index: 5;
}

h1 {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 250;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
h1 .mark { font-weight: 500; letter-spacing: 0.015em; }
h1 .sep { color: var(--dimmer); }
h1 .sub {
  font-family: var(--mono);
  font-size: 0.7em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.setupforge-cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--void-2) 78%, transparent);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: color .14s, border-color .14s, background .14s;
}
.setupforge-cta strong {
  color: var(--paper);
  font-weight: 600;
  letter-spacing: 0.11em;
}
.setupforge-cta:hover {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--ui) 62%, transparent);
  background: color-mix(in srgb, var(--void-2) 94%, transparent);
}
.setupforge-cta:focus-visible {
  outline: 2px solid var(--ui);
  outline-offset: 2px;
}

.facts {
  margin: 0;
  display: flex;
  gap: clamp(14px, 2.2vw, 34px);
  text-align: right;
}
.facts div { display: flex; flex-direction: column; gap: 3px; }
.facts dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

/* -------------------------------------------------- Ueberhoehung (vertikal) */

/* Zentrierung ueber eine volle Spalte statt translateY(-50%): die
   Einblende-Animation endet auf transform:none und wuerde eine
   Transform-Zentrierung beim Animationsende um die halbe Hoehe verschieben --
   mitten im Ziehen sprang so die ganze Schiene unterm Zeiger weg. */
.exag {
  position: fixed;
  left: var(--pad);
  top: 0;
  bottom: var(--spine-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  z-index: 6;
  pointer-events: none;
}
.exag > * { pointer-events: auto; }

.exag-value {
  text-shadow: 0 2px 18px var(--void), 0 0 6px var(--void);
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.exag-value i {
  font-style: normal;
  font-size: 0.42em;
  font-weight: 300;
  color: var(--dim);
}

.exag-rail {
  position: relative;
  width: 3px;
  height: min(38vh, 300px);
  background: var(--rule);
  cursor: ns-resize;
  touch-action: none;
}
/* Trefferflaeche deutlich breiter als die sichtbare 3px-Linie */
.exag-rail::after {
  content: "";
  position: absolute;
  inset: -6px -14px;
}
.exag-rail::before {   /* Teilung: 1x, 2.5x, 5x, 7.5x, 10x */
  content: "";
  position: absolute;
  left: 7px;
  top: 0; bottom: 0;
  width: 5px;
  background:
    linear-gradient(var(--rule-hi), var(--rule-hi)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--rule-hi), var(--rule-hi)) 0 25% / 100% 1px no-repeat,
    linear-gradient(var(--rule-hi), var(--rule-hi)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--rule-hi), var(--rule-hi)) 0 75% / 100% 1px no-repeat,
    linear-gradient(var(--rule-hi), var(--rule-hi)) 0 100% / 100% 1px no-repeat;
}
.exag-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, var(--descent-2), var(--ui));
}
.exag-knob {
  position: absolute;
  left: 50%;
  width: 15px; height: 15px;
  margin-left: -7.5px; margin-bottom: -7.5px;
  border-radius: 50%;
  background: var(--void);
  border: 1.5px solid var(--ui);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ui) 45%, transparent);
}
.exag-rail:focus-visible { outline: 2px solid var(--ui); outline-offset: 8px; }

.exag-caption {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
  writing-mode: vertical-rl;
}

/* --------------------------------------------------------------- Legende */

/* Rechte Spalte: Aktionskarte oben, Legende darunter -- ein Flex-Stapel statt
   zweier fest verankerter Boxen, damit sie sich nie ueberlappen koennen. */
.rightcol {
  position: fixed;
  right: var(--pad);
  top: calc(var(--pad) + 62px);
  bottom: calc(var(--spine-h) + var(--pad));
  width: 216px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 6;
  pointer-events: none;          /* nur die Kinder fangen Zeiger */
}
.rightcol > * { pointer-events: auto; }

.actions {
  border-radius: var(--r);
  flex: none;
  padding: 12px;
  background: color-mix(in srgb, var(--void-2) 92%, transparent);
  border: 1px solid var(--rule);
}
.actions-note {
  margin: 9px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--dimmer);
}
.actions-keys {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  line-height: 1.8;
  color: var(--dimmer);
  text-transform: uppercase;
}
.actions.is-hidden { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }

.legend {
  border-radius: var(--r);
  flex: 1 1 auto;
  min-height: 0;                 /* sonst erzwingt der Inhalt Ueberlauf */
  padding: 13px 12px;
  background: color-mix(in srgb, var(--void-2) 88%, transparent);
  border: 1px solid var(--rule);
  overflow-y: auto;
}
.legend-title,
.legend-scale span,
.legend-note {
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dimmer);
  font-size: 9.5px;
}
.legend-title { margin-bottom: 7px; }
.legend-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.legend-hyps {
  height: 34px;
  /* Dieselben Stuetzstellen wie im Terrain-Shader. */
  background: linear-gradient(to top, #0b1017 0%, #1f2b3d 50%, #59637a 100%);
  border: 1px solid var(--rule);
}
.legend-keys {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--sans); font-size: 10.5px; line-height: 1.4;
  color: var(--dim); text-transform: none; letter-spacing: 0.01em;
}
.legend-keys li { display: flex; align-items: flex-start; gap: 8px; }
.legend-keys li > span:last-child { flex: 1; }
.legend-keys li > span:first-child { margin-top: 2px; }
.key-arrow { color: var(--paper); font-size: 13px; line-height: 1; }
.key-place {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid #cfc3ae; background: #cfc3ae; flex: none;
}
.legend-ramp {
  height: 4px;
  background: linear-gradient(90deg,
    var(--descent) 0%, var(--descent-2) 24%, var(--flat) 50%,
    var(--ascent-2) 76%, var(--ascent) 100%);
}
.legend-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.legend-note {
  margin: 12px 0 0;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--dim);
  font-family: var(--sans);
}
.legend-hint {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--dimmer);
}
.tour-start {
  width: 100%;
  border-radius: calc(var(--r) - 2px);
  appearance: none;
  pointer-events: auto;
  background: linear-gradient(180deg, #f47a4b, var(--cta));
  border: 0;
  box-shadow: 0 10px 24px -10px rgba(242,107,58,.7), inset 0 1px 0 rgba(255,255,255,.28);
  color: #180b04;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 8px;
  cursor: pointer;
  transition: filter .14s, transform .14s;
}
.tour-start:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tour-start:focus-visible { outline: 2px solid var(--ui); outline-offset: 3px; }

.legend.is-hidden { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.actions.is-hidden { opacity: 0; visibility: hidden; }

/* ------------------------------------------------- Streckenbeschreibung */

.reader {
  border-radius: var(--r);
  position: fixed;
  right: var(--pad);
  top: calc(var(--pad) + 58px);
  bottom: calc(var(--spine-h) + var(--pad));
  width: min(370px, calc(100vw - 2 * var(--pad)));
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 22px;
  overflow-y: auto;
  /* deckend: darunter liegende Panels duerfen nicht durchscheinen */
  background: var(--void-2);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ui);
  z-index: 9;
}
.reader[hidden] { display: none; }

.reader-head { position: relative; padding-right: 26px; }
.reader-eyebrow {
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: 8px;
}
.reader-eyebrow span:last-child { color: var(--ui); }
.reader h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.004em;
  line-height: 1.06;
  text-transform: uppercase;
}
.reader-mark {
  margin: 9px 0 0;
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ascent);
  border: 1px solid color-mix(in srgb, var(--ascent) 40%, transparent);
  padding: 4px 9px;
}
.reader-mark[hidden] { display: none; }

.reader-close {
  position: absolute;
  top: -4px; right: -4px;
  appearance: none;
  background: none;
  border: 0;
  color: var(--dim);
  font-size: 21px;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
}
.reader-close:hover { color: var(--paper); }
.reader-close:focus-visible { outline: 2px solid var(--ui); outline-offset: 1px; }

.reader-mini {
  width: 100%;
  height: 82px;
  display: block;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.reader-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--paper);
}
.reader-text[hidden] { display: none; }
/* Abgeleitete Saetze sind zurueckhaltender gesetzt als redaktionelle -- der
   Unterschied soll sichtbar sein, ohne dass man die Fussnote lesen muss. */
.reader-text.is-derived { color: var(--dim); font-size: 12.5px; }
.reader-nodata {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  border-left: 2px solid var(--rule-hi);
  padding-left: 11px;
}

.wiki-block {
  border-left: 2px solid var(--rule-hi);
  padding: 2px 0 2px 12px;
}
.wiki-label {
  margin: 0 0 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.wiki-text {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--dim);
}
.wiki-attrib { margin: 0; font-size: 10px; }
.wiki-attrib a {
  color: var(--dimmer);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-hi);
}
.wiki-attrib a:hover { color: var(--ui); border-bottom-color: var(--ui); }
.wiki-block-stage { margin-bottom: 14px; }

.reader-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.reader-metrics div {
  display: contents;
}
.reader-metrics dt,
.reader-metrics dd {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}
.reader-metrics dt {
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.reader-metrics dd {
  margin: 0;
  text-align: right;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.reader-nav {
  margin-top: auto;
  display: flex;
  gap: 7px;
  position: sticky;
  bottom: -20px;                 /* gegen das Panel-Padding */
  padding: 10px 0 6px;
  background: var(--void-2);
}
.reader-nav button {
  flex: 1;
  border-radius: calc(var(--r) - 2px);
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 4px;
  cursor: pointer;
  transition: color .13s, border-color .13s;
}
.reader-nav button:hover { color: var(--paper); border-color: var(--rule-hi); }
.reader-nav button:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }

.reader-copy {
  appearance: none;
  border-radius: calc(var(--r) - 2px);
  width: 100%;
  margin-top: 7px;
  background: transparent;
  border: 1px dashed var(--rule-hi);
  color: var(--dimmer);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 8px 6px;
  cursor: pointer;
  transition: color .13s, border-color .13s;
}
.reader-copy:hover { color: var(--ui); border-color: var(--ui); }
.reader-copy:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }

/* ---------------------------------------------------- Rueckgrat: Hoehenprofil */

.spine {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--spine-h);
  background: linear-gradient(to top, var(--void-2), color-mix(in srgb, var(--void) 88%, transparent));
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: 1fr auto auto;
  z-index: 7;
}

.spine-axis {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9px 9px 9px var(--pad);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--dimmer);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#profile {
  grid-row: 1;
  grid-column: 2;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  /* Ohne min-height:0 setzt die Grid-Zeile ihre Mindesthoehe auf die
     intrinsische Canvas-Hoehe (das width/height-Attribut) und der Streifen
     schiebt die Ableseleiste aus dem Bild. */
  min-height: 0;
  min-width: 0;
}
#profile:focus-visible { outline: 2px solid var(--ui); outline-offset: -2px; }

.spine-readout {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  gap: clamp(12px, 2vw, 26px);
  align-items: baseline;
  padding: 0 var(--pad) 9px;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--dimmer);
  text-transform: uppercase;
}
.spine-readout b {
  color: var(--paper);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ro-name {
  margin-left: auto;
  color: var(--ui);
  letter-spacing: 0.16em;
}

.site-footer {
  grid-row: 3;
  grid-column: 1 / -1;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px var(--pad) 6px;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--void) 88%, transparent);
  color: var(--dimmer);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color .13s;
}
.site-footer a:hover { color: var(--paper); }
.site-footer a:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }
.footer-setupforge,
.footer-made,
.footer-ringrider {
  display: inline-flex;
  align-items: center;
}
.footer-setupforge { gap: 7px; white-space: nowrap; }
.footer-setupforge strong,
.footer-ringrider strong {
  color: var(--paper);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: none;
}
.footer-setupforge-mark { width: 22px; height: 22px; flex: none; }
.footer-made {
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}
.footer-made i {
  color: #3fd68f;
  font-style: normal;
}
.footer-ringrider { gap: 6px; }
.footer-ringrider img {
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule-hi);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(63, 214, 143, .18);
}
.footer-privacy {
  border-bottom: 1px solid var(--rule-hi);
  white-space: nowrap;
}

/* ------------------------------------------------------------- Datenlage */

.corner-tools {
  position: fixed;
  left: var(--pad);
  bottom: calc(var(--spine-h) + var(--pad));
  display: flex;
  flex-wrap: wrap;               /* fuenf Knoepfe + lange Sprachen: nie abschneiden */
  align-items: center;           /* sonst wird der runde Hilfeknopf gestreckt */
  gap: 7px;
  max-width: calc(100vw - 2 * var(--pad));
  z-index: 8;
}
.tool-btn {
  appearance: none;
  border-radius: calc(var(--r) - 2px);
  background: color-mix(in srgb, var(--void) 70%, transparent);
  border: 1px solid var(--rule);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 13px;
  cursor: pointer;
  z-index: 8;
}
.tool-btn:hover { color: var(--paper); border-color: var(--rule-hi); }
.tool-btn:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }

#scenery-toggle[aria-pressed="true"] {
  color: var(--void); background: var(--ui); border-color: var(--ui);
}








/* --------------------------------------------------------------- Ladezustand */

.loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--void);
  z-index: 20;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  transition: opacity .5s;
}
.loading.is-done { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ Klein */

@media (max-width: 860px) {
  :root { --spine-h: 156px; }

  /* Geraetekanten (Notch, Home-Indikator) respektieren */
  .topbar { padding-top: max(var(--pad), env(safe-area-inset-top)); }
  .corner-tools { left: max(var(--pad), env(safe-area-inset-left));
                  bottom: calc(var(--spine-h) + 10px + env(safe-area-inset-bottom)); }
  .spine { padding-bottom: env(safe-area-inset-bottom); }
  .site-footer {
    min-height: 48px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    padding-top: 4px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    font-size: 8.5px;
  }
  .footer-made {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .footer-privacy {
    grid-column: 2;
    grid-row: 1;
  }

  /* Waehrend des Rundflugs kollidieren Regler und HUD am oberen Rand --
     der Regler weicht, das HUD traegt dort die Information. */
  body.is-touring .exag { opacity: 0; pointer-events: none; }
  .hud { top: calc(var(--pad) + 92px); max-width: calc(100vw - 20px);
         flex-wrap: wrap; justify-content: center; }

  /* Tafel darf die Szene nicht komplett verdraengen -- dvh beruecksichtigt
     die einfahrende Browserleiste, vh nicht. Querformat inklusive. */
  .stage-card { max-height: min(42vh, calc(100dvh - var(--spine-h) - 120px));
                overflow-y: auto; padding: 16px 18px 14px; }
  .stage h2 { margin-bottom: 10px; }
  .stage-figure { padding: 9px 0; margin-bottom: 10px; gap: 10px;
                  grid-template-columns: 1fr auto; }
  .stage-mini { height: 44px; }
  .stage-num b { font-size: 27px; }
  .stage-text { font-size: 12.5px; margin-bottom: 10px; }

  .corner-tools { flex-wrap: wrap; max-width: calc(100vw - 2 * var(--pad)); }
  .legend { display: none; }
  .rightcol { position: static; pointer-events: auto; display: block; }
  .actions { position: fixed; right: var(--pad); top: auto;
             bottom: calc(var(--spine-h) + 54px); width: 176px; }
  .actions-note, .actions-keys { display: none; }
  .facts div:nth-child(n+2) { display: none; }
  h1 .sub { display: none; }   /* die Wortmarke genuegt auf schmalen Schirmen */
  .brand-stack { gap: 7px; }
  .setupforge-cta {
    padding: 5px 8px;
    font-size: 8px;
  }
  .setupforge-cta > span:first-child { display: none; }
  .exag { top: auto; bottom: calc(var(--spine-h) + 96px); transform: none; }
  .exag-rail { height: min(24vh, 170px); }

  /* Auf schmalen Geraeten fuellt die Beschreibung die untere Bildhaelfte,
     statt neben der Szene zu stehen -- daneben ist dort kein Platz. */
  .reader {
    left: 0; right: 0;
    top: auto;
    bottom: var(--spine-h);
    width: auto;
    max-height: 52vh;
    border-left: 0;
    border-top: 2px solid var(--ui);
  }
  /* Der Regler wandert nach oben, sonst liegt er unter dem Lesebereich. */
  .exag {
    top: 74px;
    bottom: auto;
    left: var(--pad);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
  .exag-rail { width: 120px; height: 3px; cursor: ew-resize; }
  .exag-rail::before { left: 0; top: 7px; bottom: auto; width: auto; right: 0; height: 5px;
    background:
      linear-gradient(var(--rule-hi), var(--rule-hi)) 0    0 / 1px 100% no-repeat,
      linear-gradient(var(--rule-hi), var(--rule-hi)) 25%  0 / 1px 100% no-repeat,
      linear-gradient(var(--rule-hi), var(--rule-hi)) 50%  0 / 1px 100% no-repeat,
      linear-gradient(var(--rule-hi), var(--rule-hi)) 75%  0 / 1px 100% no-repeat,
      linear-gradient(var(--rule-hi), var(--rule-hi)) 100% 0 / 1px 100% no-repeat; }
  .exag-fill { top: 0; bottom: 0; right: auto; width: 0; }
  .exag-knob { top: 50%; bottom: auto; left: 0; margin-top: -7.5px; margin-left: -7.5px; }
  .exag-value { font-size: 28px; }
  .exag-caption { writing-mode: horizontal-tb; }
  
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* =========================================================== Rundflug-Tafel

   Die Tafel ist bewusst anders gebaut als der Lesebereich: dort liest man
   selbstbestimmt und braucht Werkzeuge, hier laeuft ein Film und die Tafel hat
   genau einen Moment Zeit. Deshalb eine grosse Zahl statt einer Tabelle -- die
   Hoehenaenderung ist das, was diese Station ausmacht. Alles andere ordnet sich
   unter.                                                                     */

.stage {
  position: fixed;
  left: var(--pad);
  bottom: calc(var(--spine-h) + var(--pad));
  width: min(430px, calc(100vw - 2 * var(--pad)));
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: stage-in .5s cubic-bezier(.16,.84,.28,1) backwards;
}
.stage[hidden] { display: none; }

@keyframes stage-in {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}

.stage-card {
  border-radius: var(--r) var(--r) 0 0;
  padding: 22px 24px 20px;
  /* Deckend: eine Infotafel, durch die die Szene schimmert, liest sich schlecht
     und wirkt unfertig. */
  background: linear-gradient(135deg, var(--void-2), var(--void));
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ui);
}

.stage-eyebrow {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: 9px;
}
.stage-eyebrow span:last-child { color: var(--ui); }

.stage h2 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.004em;
  line-height: 1.0;
  text-transform: uppercase;
}

/* Kennzahl und Kurve nebeneinander: die Zahl sagt was, die Kurve zeigt wie. */
.stage-figure {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 15px;
}
.stage-mini { width: 100%; height: 62px; display: block; min-width: 0; }

.stage-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stage-num b {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stage-num i {
  font-style: normal;
  font-size: 0.42em;
  color: var(--dim);
  margin-left: 3px;
}
.stage-num span {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.stage-num.is-up b { color: var(--ascent); }
.stage-num.is-down b { color: var(--ui); }

.stage-text {
  margin: 0 0 15px;
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--paper);
}
.stage-text.is-derived { color: var(--dim); font-size: 12.5px; }

.stage-facts {
  margin: 0;
  display: flex;
  gap: 26px;
}
.stage-facts div { display: flex; flex-direction: column; gap: 4px; }
.stage-facts dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.stage-facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

.stage-bar {
  border-radius: 0 0 var(--r) var(--r);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--void);
  border: 1px solid var(--rule);
  border-top: 0;
}
.stage-progress {
  flex: 1;
  height: 2px;
  background: var(--rule);
  min-width: 0;
}
.stage-progress div {
  height: 100%;
  width: 0;
  background: var(--ui);
  transition: width .18s linear;
}
.stage-controls { display: flex; gap: 5px; }
.stage-controls button {
  appearance: none;
  border-radius: calc(var(--r) - 2px);
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  transition: color .13s, border-color .13s;
}
.stage-controls button:hover { color: var(--paper); border-color: var(--rule-hi); }
.stage-controls button:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }

/* Waehrend des Rundflugs tritt die uebrige Oberflaeche zurueck -- es laeuft ein
   Film, keine Arbeitssitzung. */
body.is-touring .rightcol,
body.is-touring .corner-tools {
  opacity: 0; pointer-events: none; transition: opacity .35s;
}

@media (max-width: 860px) {
  .stage { left: 0; right: 0; bottom: var(--spine-h); width: auto; }
  .stage-card { border-left: 0; border-top: 3px solid var(--ui); }
  .stage h2 { font-size: 24px; }
  .stage-figure { grid-template-columns: 1fr; }
  .stage-num { text-align: left; }
}

/* ------------------------------------------- Erklaerung zur Ueberhoehung

   Der Regler ist das Kernstueck der Seite, aber sein Sinn erschliesst sich
   nicht von selbst. Deshalb ein Fragezeichen direkt daneben statt eines
   Hinweises irgendwo im Kleingedruckten.                                    */

.exag-info {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--rule-hi);
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color .13s, border-color .13s;
}
.exag-info:hover { color: var(--paper); border-color: var(--paper); }
.exag-info:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }
.exag-info[aria-expanded="true"] {
  color: var(--void); background: var(--ui); border-color: var(--ui);
}

.exag-help {
  border-radius: var(--r);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: 268px;
  padding: 16px 18px;
  background: var(--void-2);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ui);
  z-index: 11;
}
.exag-help[hidden] { display: none; }
.exag-help p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dim);
}
.exag { position: fixed; }   /* Bezug fuer die absolute Hilfe */

.key-mark {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #6fb6de; background: transparent; flex: none;
  box-shadow: 0 0 7px rgba(111,182,222,0.6);
}



@media (max-width: 860px) {
  .exag-help {
    left: 0; right: auto;
    top: calc(100% + 12px);
    transform: none;
    width: min(300px, calc(100vw - 2 * var(--pad)));
  }
}

/* ================================================================ Seitenstart

   Der Titel steht ueber der noch flachen Landschaft; waehrend die Kamera
   aufsteigt und die Ueberhoehung anfaehrt, weicht er. Der gesamte Ablauf ist
   per CSS getimt, damit er auch bei niedriger Bildrate fluessig wirkt.       */

.intro {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%,
    transparent 30%, color-mix(in srgb, var(--void) 55%, transparent) 100%);
}
.intro[hidden] { display: none; }
.intro.is-language-gate {
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 48%,
      color-mix(in srgb, var(--void-2) 84%, transparent) 0,
      color-mix(in srgb, var(--void) 92%, transparent) 45%,
      var(--void) 100%);
}

.intro-inner {
  text-align: center;
  animation: intro-title 4.6s cubic-bezier(.3,.0,.2,1) both;
  /* eigener Grund hinter dem Textblock: die gluehende Strecke laeuft sonst
     mitten durch die Kennzahlen */
  padding: 34px 56px 30px;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--void) 90%, transparent) 45%,
    transparent 100%);
  /* Der Block sitzt ueber der Bildmitte: die gluehende Strecke laeuft unten
     frei durch, statt durch die Kennzahlen zu schneiden. */
  margin-bottom: 22vh;
}
.intro.is-language-gate .intro-inner {
  animation: none;
  margin-bottom: 0;
}
.intro-eyebrow {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 700;
  letter-spacing: 0.45em;
  text-indent: 0.45em;      /* Ausgleich, sonst steht der Block optisch links */
  text-transform: uppercase;
  color: var(--ui);
  text-shadow: 0 1px 14px rgba(0,0,0,.9);
}
/* feine Linien fassen die Wortmarke ein */
.intro-eyebrow::before,
.intro-eyebrow::after {
  content: "";
  width: clamp(28px, 5vw, 64px);
  height: 1px;
  background: color-mix(in srgb, var(--ui) 55%, transparent);
}
.intro h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 9vw, 116px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  color: var(--paper);
  text-shadow: 0 4px 40px rgba(0,0,0,0.75);
}
.intro-language {
  display: none;
  margin-top: 28px;
}
.intro.is-language-gate .intro-language { display: block; }
.intro.is-language-gate .intro-stats,
.intro.is-language-gate .intro-skip { display: none; }
.intro-language > p {
  margin: 0 0 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.intro-language-options {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.intro-lang-btn {
  min-width: 116px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  appearance: none;
  border: 1px solid var(--rule-hi);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--void-2) 90%, transparent);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.intro-lang-btn:hover {
  border-color: color-mix(in srgb, var(--ui) 70%, transparent);
  background: color-mix(in srgb, var(--ui) 12%, var(--void-2));
}
.intro-lang-btn:active { transform: translateY(1px); }
.intro-lang-btn:focus-visible { outline: 2px solid var(--ui); outline-offset: 3px; }
.intro-lang-btn svg {
  width: 27px;
  height: 18px;
  display: block;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.13);
}
.intro-stats {
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
}
.intro-stat { display: flex; flex-direction: column; gap: 5px; }
.intro-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 22px rgba(0,0,0,.9);
}
.intro-num i {
  font-style: normal;
  font-size: 0.5em;
  font-weight: 400;
  color: var(--dim);
  margin-left: 4px;
}
.intro-lbl {
  font-family: var(--mono);
  font-size: clamp(9px, 1vw, 10.5px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
}
.intro-statsep {
  width: 1px;
  height: 42px;
  background: var(--rule-hi);
}
.intro-skip {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dimmer);
  animation: intro-skip 5s linear both;
}
@keyframes intro-title {
  0%   { opacity: 0; transform: translateY(12px); letter-spacing: 0.06em; }
  10%  { opacity: 1; transform: none; }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px); }
}
@keyframes intro-skip {
  0%, 20% { opacity: 0; }
  35%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
.intro.is-skipped { display: none; }

@media (max-width: 860px) and (orientation: portrait) {
  .intro-inner {
    width: min(100%, 430px);
    margin-bottom: 0;
    padding: 30px 20px 26px;
  }
  .intro h2 {
    font-size: clamp(32px, 11vw, 46px);
    white-space: nowrap;
  }
  .intro-language-options { gap: 9px; }
  .intro-lang-btn { min-width: 112px; }
}

/* Vor dem Ende des Starts bleibt die Bedienung unsichtbar und inert; danach
   blendet sie gestaffelt ein. Ein Interface, das erst nach der Eroeffnung
   erscheint, wirkt inszeniert statt geladen. */
body:not(.is-booted) .topbar,
body:not(.is-booted) .exag,
body:not(.is-booted) .rightcol,
body:not(.is-booted) .corner-tools,
body:not(.is-booted) #labels,
body:not(.is-booted) .hud,
body:not(.is-booted) .spine {
  opacity: 0;
  pointer-events: none;
}
/* Waehrend der Eroeffnung gehoert das ganze Bild der Szene. */
body:not(.is-booted) #scene { inset: 0; height: 100%; }
body.is-booted #labels { transition: opacity .6s .5s; opacity: 1; }
body.is-booted .topbar,
body.is-booted .exag,
body.is-booted .rightcol,
body.is-booted .corner-tools,
body.is-booted .spine {
  animation: boot-in .7s cubic-bezier(.2,.7,.3,1) backwards;
  /* backwards, NICHT both: fill both wuerde opacity festhalten und jede
     spaetere Ausblendung (Rundflug, Kino) wirkungslos machen. */
}
body.is-booted .topbar { animation-delay: .05s; }
body.is-booted .spine { animation-delay: .15s; }
body.is-booted .exag { animation-delay: .28s; }
body.is-booted .rightcol { animation-delay: .4s; }
body.is-booted .corner-tools { animation-delay: .62s; }
@keyframes boot-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================== Tour-HUD */

.hud {
  border-radius: 999px;
  position: fixed;
  top: calc(var(--pad) + 54px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 16px 8px 9px;
  background: color-mix(in srgb, var(--void) 84%, transparent);
  border: 1px solid var(--rule);
  z-index: 9;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.hud[hidden] { display: none; }
.hud-item b {
  font-weight: 400;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.hud-rest b { color: var(--ui); }
.hud-sep { width: 1px; height: 14px; background: var(--rule-hi); }

.hud-compass { width: 30px; height: 30px; flex: none; }
.hud-ring { fill: none; stroke: var(--rule-hi); stroke-width: 1.5; }
.hud-compass g { transform-origin: 22px 22px; }
.hud-needle-n { fill: var(--ui); }
.hud-needle-s { fill: var(--rule-hi); }
.hud-n {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--paper);
}

/* =============================================================== Fuehrungslinie

   Vom Positionsring zur Infotafel: die Linie sagt "DIESE Stelle ist gemeint".  */

#leader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
}
#leader path {
  fill: none;
  stroke: color-mix(in srgb, var(--ui) 55%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}
#leader circle { fill: var(--ui); }
#leader.is-off { display: none; }

/* ================================================================= Kinomodus

   Fuer Bildschirmaufnahmen und konzentriertes Schauen: alles weicht, was
   Werkzeug ist. Wortmarke, Beschriftungen, HUD und Infotafeln bleiben.        */

body.is-cinema .facts,
body.is-cinema .setupforge-cta,
body.is-cinema .exag,
body.is-cinema .rightcol,
body.is-cinema .corner-tools,
body.is-cinema .spine,
body.is-cinema .help {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .4s, visibility .4s;
}
body.is-cinema #scene,
body.is-cinema #labels { inset: 0; height: 100%; }

.toast {
  border-radius: var(--r);
  position: fixed;
  bottom: calc(var(--spine-h) + 18px);
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 16px;
  background: var(--void-2);
  border: 1px solid var(--rule-hi);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  z-index: 30;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.toast.is-on { opacity: 1; }
body.is-cinema .toast { bottom: 24px; }

/* Kennzahl-Wipe des Mini-Profils auf der Infotafel */
.stage-mini { clip-path: inset(0 0 0 0); }
.stage:not(.is-away) .stage-mini { animation: mini-wipe .9s .25s cubic-bezier(.3,0,.2,1) both; }
@keyframes mini-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.stage.is-away { opacity: 0; transform: translateX(-18px); transition: opacity .45s, transform .45s; }
.stage { transition: opacity .45s, transform .45s; }

/* Fingerbedienung: Trefferflaechen auf mindestens ~44px bringen und die
   300-ms-Doppeltipp-Verzoegerung abschalten. */
@media (pointer: coarse) {
  .corner-tools .tool-btn:not(.tool-info) { padding: 11px 10px; font-size: 9px; letter-spacing: 0.09em; }
  .corner-tools { gap: 5px; }
  .flag-btn { padding: 3px 4px; }
  .reader-nav button { padding: 13px 6px; }
  .stage-controls button { padding: 11px 13px; }
  .reader-close { padding: 10px 14px; font-size: 24px; }
  .exag-rail::after { inset: -10px -20px; }
  .corner-label { padding: 6px 10px; }
}
button, [role="slider"], .corner-label { touch-action: manipulation; }
#scene { touch-action: none; }   /* OrbitControls uebernimmt alle Gesten */
#profile { touch-action: none; } /* Scrubbing statt Seiten-Scroll */

@media (prefers-reduced-motion: reduce) {
  .stage,
  .intro-inner, .intro-skip, .stage-mini,
  body.is-booted .topbar, body.is-booted .spine, body.is-booted .exag,
  body.is-booted .actions, body.is-booted .legend, body.is-booted .corner-tools {
    animation: none !important;
  }
}

/* ======================================================= Werkzeuge, sortiert

   Vier Arten, vier Formen: Sprachflaggen, Umschalter mit Statuspunkt,
   Aktionsknopf mit Symbol, runder Hilfeknopf. Was anders wirkt, ist anders. */

.lang-flags {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: calc(var(--r) - 2px);
  background: color-mix(in srgb, var(--void) 70%, transparent);
}
.flag-btn {
  appearance: none;
  border: 0;
  padding: 4px 5px;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  opacity: 0.38;
  transition: opacity .15s, background .15s;
}
.flag-btn svg { width: 21px; height: 14px; border-radius: 2px; display: block; }
.flag-btn:hover { opacity: 0.75; }
.flag-btn[aria-pressed="true"] { opacity: 1; background: rgba(255,255,255,.09); }
.flag-btn:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }

.tool-toggle { display: inline-flex; align-items: center; gap: 7px; }
.tool-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--dimmer);
  background: transparent;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.tool-toggle[aria-pressed="true"] {
  color: var(--paper);
  background: color-mix(in srgb, var(--void) 70%, transparent);
  border-color: var(--rule-hi);
}
.tool-toggle[aria-pressed="true"] .tool-dot {
  background: var(--ui);
  border-color: var(--ui);
  box-shadow: 0 0 7px color-mix(in srgb, var(--ui) 70%, transparent);
}

.tool-action { display: inline-flex; align-items: center; gap: 7px; }
.tool-action svg { width: 15px; height: 12px; }

.tool-info {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border-radius: 50% !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--ui);
  border-color: color-mix(in srgb, var(--ui) 45%, transparent);
}
.tool-info:hover { color: var(--void); background: var(--ui); }
.tool-info[aria-expanded="true"] { color: var(--void); background: var(--ui); border-color: var(--ui); }

/* ================================================================ Hilfe */

.help {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2 * var(--pad)));
  max-height: min(78vh, 720px);
  overflow-y: auto;
  padding: 26px 28px 22px;
  border: 1px solid var(--rule-hi);
  border-radius: var(--r);
  z-index: 24;
}
.help[hidden] { display: none; }
.help-close {
  position: absolute;
  top: 10px; right: 12px;
  appearance: none; background: none; border: 0;
  color: var(--dim); font-size: 22px; line-height: 1;
  padding: 6px 9px; cursor: pointer;
}
.help-close:hover { color: var(--paper); }
.help-close:focus-visible { outline: 2px solid var(--ui); outline-offset: 1px; }
.help h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.help-intro { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--dim); }
.help h3 {
  margin: 18px 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.help-grid h3 { margin-top: 0; border-top: 0; padding-top: 0; }
.gest {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
  font-size: 12.5px;
  color: var(--paper);
}
.gest svg { width: 26px; height: 30px; flex: none; color: var(--ui); }

.help-keys { display: flex; flex-direction: column; gap: 7px; }
.help-keys > div { display: flex; align-items: center; gap: 5px; font-size: 12.5px; }
.help-keys span { margin-left: 8px; color: var(--paper); }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid var(--rule-hi);
  border-bottom-width: 2px;
  border-radius: 5px;
}
.kbd-wide { min-width: 40px; }
.help-data { margin: 0 0 9px; font-size: 12.5px; line-height: 1.6; color: var(--dim); }
.help-credits {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--dimmer);
}

/* ================================================= Tour: Tempo + ab hier */

.stage-speed { display: flex; gap: 3px; margin-right: 10px; }
.stage-speed button {
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: transparent;
  color: var(--dimmer);
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 5px 7px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.stage-speed button:hover { color: var(--paper); }
.stage-speed button[aria-pressed="true"] { color: var(--void); background: var(--ui); border-color: var(--ui); }
.stage-speed button:focus-visible { outline: 2px solid var(--ui); outline-offset: 1px; }

.reader-tourhere, .reader-cruisehere {
  appearance: none;
  width: 100%;
  margin-top: 7px;
  border: 0;
  border-radius: calc(var(--r) - 2px);
  background: linear-gradient(180deg, #f47a4b, var(--cta));
  box-shadow: 0 10px 24px -12px rgba(242,107,58,.7), inset 0 1px 0 rgba(255,255,255,.28);
  color: #180b04;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 8px;
  cursor: pointer;
  transition: filter .14s;
}
.reader-cruisehere {
  background: linear-gradient(180deg, #63d3f5, var(--ui));
  box-shadow: 0 10px 24px -12px rgba(76,201,240,.75), inset 0 1px 0 rgba(255,255,255,.4);
  color: #04222c;
}
.reader-tourhere:hover, .reader-cruisehere:hover { filter: brightness(1.08); }
.reader-tourhere:focus-visible, .reader-cruisehere:focus-visible {
  outline: 2px solid var(--paper); outline-offset: 2px;
}
.help-credits a { color: var(--dim); }
.help-credits a:hover { color: var(--ui); }

.cruise-start {
  appearance: none;
  width: 100%;
  margin-top: 9px;
  border: 1px solid color-mix(in srgb, var(--ui) 45%, transparent);
  border-radius: calc(var(--r) - 2px);
  background: color-mix(in srgb, var(--ui) 10%, transparent);
  color: var(--ui);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 8px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.cruise-start:hover { background: var(--ui); color: #04222c; }
.cruise-start:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }

/* ================================================== HUD besser ablesbar */

.hud {
  background: var(--void-2);
  border: 1px solid var(--rule-hi);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 12px;
  padding: 9px 18px 9px 10px;
}
.hud-item b { font-size: 13px; }

/* ============================================= Mobile: Tour und CTA-Lage */

@media (max-width: 860px) {
  /* Waehrend des Flugs zaehlt die Szene: Profilstreifen weicht, Tafel kompakt. */
  body.is-touring .spine { opacity: 0; pointer-events: none; }
  body.is-touring #scene { inset: 0; height: 100%; }
  body.is-touring .stage { bottom: max(10px, env(safe-area-inset-bottom)); }
  .stage-card { max-height: min(38vh, calc(100dvh - 200px)); }
  .stage-figure { grid-template-columns: auto 1fr; align-items: center; gap: 12px;
                  padding: 7px 0; margin-bottom: 9px; }
  .stage-mini { height: 30px; }
  .stage-num { text-align: left; }
  .stage-num b { font-size: 24px; }
  .stage-num span { margin-top: 3px; font-size: 8.5px; }
  .stage-text { font-size: 13.5px; line-height: 1.55; margin-bottom: 9px; }
  .stage-facts { gap: 16px; }
  .stage-facts div { flex-direction: row; align-items: baseline; gap: 6px; }

  /* Die Hauptaktion mittig unten, nicht im Werkzeugstapel versteckt. */
  .rightcol { position: static; }
  .actions {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: auto;
    /* oberhalb der (bis zu zweizeiligen) Werkzeugleiste */
    bottom: calc(var(--spine-h) + 100px + env(safe-area-inset-bottom));
    width: min(300px, calc(100vw - 24px));
    z-index: 9;
  }
  .actions-note { display: none; }
  .cruise-start { margin-top: 6px; padding: 8px; }
}

/* Sanfter Hinweis, das Telefon zu drehen -- einmal je Sitzung, tippbar weg. */
.rotate-nudge {
  position: fixed;
  left: 50%;
  top: calc(var(--pad) + 110px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  appearance: none;
  border: 1px solid var(--rule-hi);
  border-radius: 999px;
  background: var(--void-2);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.9);
  color: var(--paper);
  font-size: 12px;
  padding: 10px 16px;
  z-index: 25;
  cursor: pointer;
}
.rotate-nudge[hidden] { display: none; }
.rotate-nudge svg { width: 22px; height: 22px; color: var(--ui); flex: none;
                    animation: nudge-tilt 1.6s ease-in-out infinite; }
@keyframes nudge-tilt {
  0%, 55%, 100% { transform: rotate(0deg); }
  22%, 38% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .rotate-nudge svg { animation: none; } }

/* Querformat auf niedrigen Schirmen: Tafel als Seitenspalte statt Bodenblatt */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --spine-h: 76px; }
  .site-footer { display: none; }
  .facts { display: none; }
  .stage,
  body.is-touring .stage {
    left: 10px; right: auto; top: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(320px, 44vw);
  }
  .stage-card { max-height: none; flex: 1; overflow-y: auto; }
  .hud { top: 10px; left: auto; right: 10px; transform: none; }
  .actions {
    position: fixed; left: auto; right: 10px; transform: none;
    top: auto; bottom: calc(var(--spine-h) + 12px); width: 210px;
  }
  .legend { display: none; }
  body.is-touring .spine { opacity: 0; pointer-events: none; }
  body.is-touring #scene { inset: 0; height: 100%; }
}

/* Auf einem mobilen Touchgeraet im Querformat zaehlt jeder Hoehenpixel. Die 3D-Szene
   bleibt das primaere Instrument; das abgewickelte Profil kehrt im
   Hochformat wieder zurueck. */
@media (orientation: landscape) and (pointer: coarse) {
  :root { --spine-h: 0px; }
  .spine { display: none; }
  #scene,
  #labels { inset: 0; height: 100%; }
  .actions { bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast { bottom: max(18px, env(safe-area-inset-bottom)); }
}


/* ================================================================ Reel-Modus

   Ein zentrierter 9:16-Ausschnitt, in dem alles Sichtbare stattfindet. Die
   Flaechen daneben sind reines Schwarz; das Bedienfeld liegt ausserhalb des
   aufgenommenen Rahmens und erscheint deshalb nie im Video.                  */

:root {
  --reel-w: min(100vw, calc(100dvh * 9 / 16));
  --reel-x: calc((100vw - var(--reel-w)) / 2);
}

body.is-reel { background: #000; }
body.is-reel #scene,
body.is-reel #labels,
body.is-reel #leader,
body.is-reel .intro {
  inset: 0 auto 0 var(--reel-x);
  width: var(--reel-w);
  height: 100%;
}
body.is-reel .topbar {
  left: var(--reel-x);
  right: auto;
  width: var(--reel-w);
}
body.is-reel .setupforge-cta { display: none; }
body.is-reel .hud {
  top: calc(var(--pad) + 46px);
  max-width: calc(var(--reel-w) - 20px);
  flex-wrap: wrap;
  justify-content: center;
}
body.is-reel .stage {
  left: calc(var(--reel-x) + 10px);
  right: auto;
  width: calc(var(--reel-w) - 20px);
  bottom: 12px;
}
body.is-reel .stage-card { max-height: 40vh; overflow-y: auto; }
body.is-reel .toast { left: 50%; }

.reel-frame {
  position: fixed;
  inset: 0 auto 0 var(--reel-x);
  width: var(--reel-w);
  pointer-events: none;
  border-left: 1px solid var(--rule-hi);
  border-right: 1px solid var(--rule-hi);
  z-index: 3;
}
.reel-frame[hidden] { display: none; }

.reel-bar {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: min(210px, calc(var(--reel-x) - 26px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 27;
}
.reel-bar[hidden] { display: none; }
.reel-record {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: calc(var(--r) - 2px);
  background: linear-gradient(180deg, #f47a4b, var(--cta));
  color: #180b04;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 10px;
  cursor: pointer;
}
.reel-record i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #7a1508;
}
.reel-record.is-on { background: #c22d2d; color: #fff; }
.reel-record.is-on i { background: #fff; animation: rec-blink 1.1s steps(1) infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
.reel-exit {
  appearance: none;
  border: 1px solid var(--rule-hi);
  border-radius: calc(var(--r) - 2px);
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px;
  cursor: pointer;
}
.reel-exit:hover { color: var(--paper); }
.reel-hint {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--dimmer);
}

/* Auf schmalen Schirmen (der Rahmen fuellt fast alles): Bedienfeld unten quer */
@media (max-width: 700px) {
  .reel-bar {
    left: 12px; right: 12px; bottom: 10px;
    width: auto;
    flex-direction: row;
    align-items: center;
  }
  .reel-hint { display: none; }
  .reel-record { flex: 1; }
}


/* Rueckweg zum Standard: erscheint nur, wenn die Ueberhoehung davon abweicht. */
.exag-reset {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--ui) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ui);
  font-family: var(--mono);
  font-size: 10px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.exag-reset:hover { background: var(--ui); color: var(--void); }
.exag-reset:focus-visible { outline: 2px solid var(--ui); outline-offset: 2px; }
.exag-reset[hidden] { display: none; }

.legend { position: relative; }
.legend-close {
  position: absolute;
  top: 6px; right: 8px;
  appearance: none; border: 0; background: none;
  color: var(--dimmer);
  font-size: 16px; line-height: 1;
  padding: 4px 7px;
  cursor: pointer;
}
.legend-close:hover { color: var(--paper); }
.legend-close:focus-visible { outline: 2px solid var(--ui); outline-offset: 1px; }

.legend-restore {
  appearance: none;
  align-self: flex-end;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--void-2) 88%, transparent);
  color: var(--dimmer);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 13px;
  cursor: pointer;
  pointer-events: auto;
}
.legend-restore:hover { color: var(--paper); border-color: var(--rule-hi); }
.legend-restore[hidden] { display: none; }