/* ============================================================
   DAS MODELL — Gipfel-Stafette auf weissem Grund (Adin 07.11.2026)
   Vorschlag 8 aus design/stafette + Leitsatz aus Vorschlag 7.
   Weiss, THETA-Blau (Strecke, aktive Stationen) und Rot (Stab, Ziel).
   Nur #modell; der Scroll-Mechanismus (main.js initRelay) bleibt unverändert.
   ============================================================ */

/* Abschnitt hell: Dunkel-Tokens lokal auf helle Werte umlegen
   (gleiches Muster wie #problem / #gruender / #faq in redesign.css) */
#modell {
  --ink-950: var(--paper);
  --ink-900: var(--paper);
  --ink-850: var(--ivory-50);
  --ink-800: var(--ivory-50);
  --tint-deep: transparent;
  --text-on-dark: var(--text-on-light);
  --text-on-dark-muted: var(--text-on-light-muted);
  --text-on-dark-faint: var(--text-on-light-faint);
  --hairline: var(--divider-on-light);
  --hairline-strong: var(--divider-on-light-strong);
  --accent: var(--accent-deep);
  --accent-bright: var(--accent-deep);
  --shadow-card: var(--shadow-card-light);
  --st-blue: var(--accent-deep, oklch(45% 0.12 258));
  --st-blue-soft: oklch(93% 0.025 250);
  --st-red: var(--line-red, oklch(48% 0.17 25));
  --st-ink: var(--text-on-light, oklch(21% 0.04 258));
  --st-muted: var(--text-on-light-faint, oklch(45% 0.03 258));
  background: var(--paper);
  color: var(--text-on-light);
}

/* Intro-Titel «DIE STAFETTE» auf hell */
#modell .relay-stage:not(.is-static) .relay-intro {
  background: radial-gradient(60% 50% at 50% 50%, oklch(100% 0 0 / 0.92) 0%, oklch(100% 0 0 / 0) 75%);
}
#modell .relay-intro-title {
  color: var(--st-ink);
}
#modell .relay-intro-title span {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--st-blue);
}
#modell .relay-intro-kicker {
  color: var(--st-red);
}
#modell .relay-stage:not(.is-static) .relay-bg-num {
  -webkit-text-stroke-color: oklch(45% 0.12 258 / 0.12);
  color: transparent;
}

/* Schritt-Texte links und Punkte auf hell */
#modell .relay-dot {
  background: oklch(85% 0.015 255);
}
#modell .relay-dot.is-active,
#modell .relay-dot.is-passed {
  background: var(--st-blue);
}
#modell .relay-title em {
  color: var(--st-blue);
}

/* Roter Knopf auf hell braucht keinen hellen Ring */
#modell .btn--gold {
  box-shadow: 0 10px 24px -12px oklch(48% 0.17 25 / 0.55);
}

/* Grosse Umriss-Ziffer im Hintergrund wirkt auf Weiss wie ein loser Rahmen — hier ausgeblendet */
#modell .relay-stage:not(.is-static) .relay-bg-num {
  display: none;
}

/* ============================================================
   Gipfel-Stafette = Vorschlag 8, 1:1 übernommen, Palette Weiss/Blau/Rot.
   Zustand: data-step="1".."5" am Stage-Element (main.js). --s läuft weich mit.
   ============================================================ */
@property --s { syntax: "<number>"; inherits: true; initial-value: 1; }
#modell .st8 { --s: 1; transition: --s 0.9s cubic-bezier(.3,.7,.2,1); --c-ink: #13233a; --c-blue: #2b5592; --c-red: #a3262a; --c-muted: #5d6b80; }
#modell [data-step="2"] .st8 { --s: 2; }
#modell [data-step="3"] .st8 { --s: 3; }
#modell [data-step="4"] .st8 { --s: 4; }
#modell [data-step="5"] .st8 { --s: 5; }
#modell .st8 text { font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }

/* Gelände */
#modell .st8 .st8-far { fill: #2b5592; fill-opacity: 0.045; }
#modell .st8 .st8-contour { stroke: #2b5592; stroke-opacity: 0.1; }

/* Kopf */
#modell .st8 .st8-kicker { font-size: 17px; font-weight: 700; letter-spacing: 2.4px; fill: var(--c-red); }
#modell .st8 .st8-title { font-family: "Newsreader", Georgia, serif; font-size: 40px; font-weight: 500; fill: var(--c-ink); }
#modell .st8 .st8-title--accent { font-style: italic; fill: var(--c-blue); }
#modell .st8 .st8-sub { font-size: 18px; font-weight: 500; fill: var(--c-muted); }

/* Strecke */
#modell .st8 .st8-ghost { stroke: #8a97aa; stroke-opacity: 0.6; }
#modell .st8 .trail { stroke: var(--c-blue); stroke-dasharray: 820; stroke-dashoffset: calc((760 - (var(--s) - 1) * 190) * 1px); }

/* Stationen */
#modell .st8 .st { opacity: calc(1 - .45 * clamp(0, var(--i) - var(--s), 1) - .15 * clamp(0, var(--s) - var(--i), 1)); }
#modell .st8 .st .done { opacity: clamp(0, calc(var(--s) - var(--i) + 1), 1); }
#modell .st8 .st .pulse { stroke: var(--c-blue); opacity: clamp(0, calc(1 - (var(--s) - var(--i)) * (var(--s) - var(--i))), 1); }
#modell .st8 .st8-base { fill: #ffffff; stroke: var(--c-blue); }
#modell .st8 .st8-num { font-size: 17px; font-weight: 800; fill: var(--c-blue); }
#modell .st8 .st8-num-on { font-size: 17px; font-weight: 800; fill: #ffffff; }
#modell .st8 .st8-done-blue { fill: var(--c-blue); }
#modell .st8 .st8-done-red { fill: var(--c-red); }
#modell .st8 .st .nm { font-size: 21px; font-weight: 700; fill: var(--c-ink); }
#modell .st8 .st .sb { font-size: 17px; font-weight: 500; fill: var(--c-muted); }

/* Läufer: Position je Stufe */
#modell .st8 .mv { transition: transform .9s cubic-bezier(.3,.7,.2,1), opacity .6s ease; }
#modell .st8 .ow { transform: translate(100px, 464px); }
#modell [data-step="2"] .st8 .ow { transform: translate(281px, 405px); }
#modell [data-step="3"] .st8 .ow, #modell [data-step="4"] .st8 .ow, #modell [data-step="5"] .st8 .ow { transform: translate(416px, 358px); }
#modell .st8 .th { transform: translate(492px, 324px); }
#modell [data-step="4"] .st8 .th { transform: translate(628px, 251px); }
#modell [data-step="5"] .st8 .th { transform: translate(686px, 213px); }
#modell .st8 .st8-ink { color: var(--c-ink); }
#modell .st8 .st8-blue { color: var(--c-blue); }

/* Posen */
#modell .st8 .pose { transition: opacity .5s ease; }
#modell .st8 .ow .p-run, #modell .st8 .ow .p-stand, #modell .st8 .th .p-wait, #modell .st8 .th .p-run, #modell .st8 .th .p-cheer { opacity: 0; }
#modell [data-step="1"] .st8 .ow .p-run, #modell [data-step="2"] .st8 .ow .p-run, #modell [data-step="3"] .st8 .ow .p-run { opacity: 1; }
#modell [data-step="4"] .st8 .ow .p-stand, #modell [data-step="5"] .st8 .ow .p-stand { opacity: 1; }
#modell [data-step="1"] .st8 .th .p-wait { opacity: .3; }
#modell [data-step="2"] .st8 .th .p-wait { opacity: .8; }
#modell [data-step="3"] .st8 .th .p-run, #modell [data-step="4"] .st8 .th .p-run { opacity: 1; }
#modell [data-step="5"] .st8 .th .p-cheer { opacity: 1; }

/* Pillen */
#modell .st8 .pill-ow, #modell .st8 .pill-gh { transition: opacity .5s ease; }
#modell .st8 .pill-th { opacity: 0; transition: opacity .5s ease, transform .9s cubic-bezier(.3,.7,.2,1); }
#modell [data-step="5"] .st8 .pill-th { transform: translate(-92px, -6px); }
#modell .st8 .pill-gh { opacity: 1; }
#modell .relay-stage:not([data-step="1"]) .st8 .pill-th { opacity: 1; }
#modell .relay-stage:not([data-step="1"]) .st8 .pill-gh { opacity: 0; }
#modell .st8 .st8-pill-ow { stroke: var(--c-ink); stroke-width: 2; }
#modell .st8 .st8-pill-ow-t { font-size: 17px; font-weight: 700; fill: var(--c-ink); }
#modell .st8 .st8-pill-th { fill: var(--c-blue); }
#modell .st8 .st8-pill-th-t { font-size: 17px; font-weight: 800; letter-spacing: 1.2px; fill: #ffffff; }
#modell .st8 .st8-pill-gh { stroke: #8a97aa; stroke-width: 2; }
#modell .st8 .st8-pill-gh-t { font-size: 17px; font-weight: 600; fill: var(--c-muted); }

/* Stab */
#modell .st8 .baton { transform: translate(145px, 377px); transition: transform .9s cubic-bezier(.3,.7,.2,1); }
#modell [data-step="2"] .st8 .baton { transform: translate(326px, 318px); }
#modell [data-step="3"] .st8 .baton { transform: translate(458px, 271px); }
#modell [data-step="4"] .st8 .baton { transform: translate(673px, 164px); }
#modell [data-step="5"] .st8 .baton { transform: translate(714px, 87px); }
#modell .st8 .baton .rot { transition: transform .9s cubic-bezier(.3,.7,.2,1); transform: rotate(-14deg); }
#modell [data-step="5"] .st8 .baton .rot { transform: rotate(-90deg); }
#modell .st8 .st8-baton { fill: var(--c-red); stroke: #ffffff; stroke-width: 1.5; }

/* Übergabe-Ring, Ziel */
#modell .st8 .ring { opacity: 0; transition: opacity .6s ease; }
#modell [data-step="3"] .st8 .ring { opacity: 1; }
#modell .st8 .st8-ring1 { stroke: var(--c-blue); stroke-opacity: .5; }
#modell .st8 .st8-ring2 { stroke: var(--c-blue); stroke-opacity: .22; }
#modell .st8 .flag { opacity: .7; transition: opacity .6s ease; }
#modell [data-step="5"] .st8 .flag { opacity: 1; }
#modell .st8 .st8-pole { stroke: var(--c-ink); }
#modell .st8 .st8-flag { fill: var(--c-red); }
#modell .st8 .goalglow { opacity: 0; transition: opacity .8s ease; }
#modell [data-step="5"] .st8 .goalglow { opacity: 1; }

/* Fuss: Leitsatz aus Vorschlag 7 */
#modell .st8 .st8-rule { stroke: var(--c-blue); stroke-opacity: .2; }
#modell .st8 .st8-claim { font-family: "Newsreader", Georgia, serif; font-size: 24px; font-weight: 500; fill: var(--c-ink); }
#modell .st8 .st8-claim-blue { fill: var(--c-blue); font-style: italic; }
#modell .st8 .st8-claim-red { fill: var(--c-red); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  #modell .st8, #modell .st8 .mv, #modell .st8 .baton, #modell .st8 .baton .rot, #modell .st8 .pose { transition: none; }
}

/* Grafik gross genug: Rahmen breiter, Grafik bekommt den grösseren Teil (Lesbarkeit der Beschriftungen) */
@media (min-width: 1101px) {
  #modell .relay-stage:not(.is-static) .relay-frame {
    max-width: min(1360px, calc(100vw - 64px));
    grid-template-columns: minmax(340px, 0.72fr) 1.6fr;
    column-gap: clamp(32px, 3vw, 56px);
  }
}
#modell .st8 .st .nm { font-size: 24px; }
#modell .st8 .st .sb { font-size: 19px; }
#modell .st8 .st8-pill-ow-t, #modell .st8 .st8-pill-th-t, #modell .st8 .st8-pill-gh-t { font-size: 18px; }

/* Leichter zu scrollen (Adin 07.11.2026): Bühne 300svh statt 560svh — 5 Schritte in rund 2 Bildschirmhöhen */
@media (min-width: 901px) {
  #modell .relay-stage:not(.is-static) {
    min-height: 300svh;
  }
}

/* Antippbare Zahlen und Balken (Adin 07.11.2026) */
#modell .st8 [data-relay-goto] { cursor: pointer; }
#modell .st8 .st8-hit { fill: transparent; pointer-events: all; }
#modell .relay-stage:not(.is-static) .relay-visual { pointer-events: auto; }
#modell .st8 [data-relay-goto]:hover .st8-base { stroke-width: 3.5; }
#modell .relay-dots button.relay-dot { appearance: none; -webkit-appearance: none; border: 0; padding: 0; cursor: pointer; position: relative; }
#modell .relay-dots button.relay-dot::before { content: ""; position: absolute; inset: -18px -4px; }
#modell .relay-dots button.relay-dot:focus-visible { outline: 3px solid #5b8def; outline-offset: 4px; }