/* ============ Seiten-CSS „Unser Weg" (Brand-Fundament: style.css) ============ */

/* Der Kopf scrollt normal weg (Lucas Vorgabe 04.09.2026) – nur das Board bleibt
   stehen, während die Stations-Karten durchwandern. Vorher klebte der Kopf mit
   und alles darunter musste um seine Höhe (--hero-h) tiefer ansetzen; diese
   Variable ist damit weg, auch aus assets/weg.js. */
.pin-zone{position:relative}
.hero.hero-kompakt{
  padding:24px 20px 28px;
}
.hero.hero-kompakt h1{font-size:clamp(30px,4.6vw,50px)}
.hero.hero-kompakt p.sub{margin:12px auto 0;font-size:16px;max-width:520px}

.weg{padding:0 20px 40px;background:var(--cream)}
.weg-grid{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:minmax(260px,400px) 1fr;
  gap:clamp(24px,4vw,64px);align-items:start;
}

/* ---- Tactic-Board (hochkant, klebt beim Scrollen) ---- */
.board-col{position:sticky;top:calc(var(--nav-h) + 12px);z-index:20;padding:16px 0 10px}
.board{background:var(--green);border-radius:var(--radius);padding:12px;box-shadow:0 14px 34px rgba(0,60,46,.22)}
/* Höhe an den freien Platz unter der NAVI gekoppelt – Feld steht immer ganz da.
   134px = 12 Klebe-Abstand + 110 Rahmen in .board-col (gemessen 04.09.2026:
   Polster 16+10, Board 12+12, Bildunterschrift 12+19, Hinweis 10+19) + 12 Luft. */
.board svg.court{display:block;margin:0 auto;height:clamp(280px,calc(100vh - var(--nav-h) - 134px),600px);width:auto}
/* steht auf Creme-Grund, nicht auf dem grünen Board – dunkle Schrift! */
.board-cap{
  margin-top:12px;text-align:center;color:var(--green-mute);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.board-cap b{color:var(--orange-deep);letter-spacing:.06em}
.board-hint{margin-top:10px;text-align:center;font-size:12px;color:var(--green-mute)}

/* Feld-Linien */
.court .lines{fill:none;stroke:#F5F1DC;stroke-width:1.6;opacity:.32}
.court .floor{fill:#00281F}
.court .hoop{fill:none;stroke:#F5F1DC;stroke-width:2.2;opacity:.55}

/* Spielzug: Laufwege gestrichelt, Pässe durchgezogen mit Pfeil, Wurf als Bogen */
.court .seg{fill:none;stroke:#F7921F;stroke-width:2.6;stroke-linecap:round}
.court .seg.run{stroke-dasharray:7 7}
.court .seg.shot{stroke-width:3;stroke-dasharray:2 7}
.court .rev{transition:stroke-dashoffset .85s ease}

/* Stationen */
.court .stn{cursor:pointer}
.court .stn .halo{fill:transparent}
.court .stn .dot{fill:#00201A;stroke:#F5F1DC;stroke-width:2;transition:fill .3s ease,stroke .3s ease}
.court .stn .num{fill:#F5F1DC;font-size:9px;font-weight:800;font-family:-apple-system,Arial,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .3s ease}
.court .stn .ring{fill:none;stroke:#F7921F;stroke-width:2;opacity:0}
.court .stn.done .dot{fill:rgba(247,146,31,.4);stroke:#F7921F}
.court .stn.is-active .dot{fill:#F7921F;stroke:#F5F1DC}
.court .stn.is-active .num{fill:#003C2E}
.court .stn.is-active .ring{opacity:1;animation:stnpulse 2.2s ease-out infinite}
.court .stn:hover .dot{stroke:#F7921F}
.court .stn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@keyframes stnpulse{
  0%  {r:11;opacity:.9}
  70% {r:19;opacity:0}
  100%{r:19;opacity:0}
}

/* Ball */
.court #ball{transition:transform .85s cubic-bezier(.3,.7,.3,1)}
.court #ball .skin{fill:#F7921F;stroke:#003C2E;stroke-width:1.2}
.court #ball .seams{fill:none;stroke:#003C2E;stroke-width:1}

/* ---- Stations-Karten ---- */
.story-col{padding:26px 0 0}
.stn-card{
  min-height:72vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.22;transform:translateY(16px);
  transition:opacity .45s ease,transform .45s ease;
}
.stn-card.is-active{opacity:1;transform:none}
.stn-card .kicker{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--green);color:var(--cream);border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:5px 13px;
}
.stn-card .kicker i{font-style:normal;color:var(--orange)}
.stn-card h2{font-size:clamp(28px,4.4vw,44px);margin:16px 0 4px}
.stn-card .when{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--orange-deep)}
.stn-card p.text{margin-top:14px;font-size:17px;color:var(--green-soft);max-width:52ch}
/* ---- Stationsbilder: alle gleich hoch, die Breite folgt dem Bild ----
   Lucas Entscheidung 12.09.2026 („Variante B"), nachdem wir vier Anordnungen
   nebeneinander angesehen haben. Vorher stand hier ein fester Querrahmen
   (16:10), in den jedes Hochformat hineingeschnitten wurde.

   WARUM NICHT BESCHNEIDEN: Das Material ist gemischt – die GameDay-Fotos sind
   zu zwei Dritteln hochkant (16 Stichproben: 10 hoch, 6 quer), die Handybilder
   der fruehen Stationen ebenfalls. Ein festes Verhaeltnis waere also fuer die
   Mehrheit der Bilder ein Beschnitt.

   WARUM DIE HOEHE UND NICHT DIE BREITE festgehalten wird: Bilder auf gleicher
   Hoehe lesen sich als Reihe, auch wenn sie unterschiedlich breit sind – wie
   Bilder, die auf einer Linie haengen. Die Breite waere die andere Moeglichkeit,
   dann stuenden hochkante Bilder aber doppelt so hoch wie quere.

   WARUM AUSGERECHNET 340px: Das ist die groesste Hoehe, bei der auch das
   breiteste Bild noch in die Karte passt. Neben dem Board bleiben 622px;
   das breiteste Motiv ist die Hasenheide mit 1,775:1, macht bei 340px Hoehe
   603px Breite. Bei 380px waeren es 674 – dann haette `max-width` gegriffen
   und dieses eine Bild waere flacher als alle anderen. Gerechnet, nicht
   geschaetzt; die vier Verhaeltnisse sind 1,775 / 1,643 / 1,500 / 1,333.

   `width:auto;height:auto` zusammen mit den beiden Deckeln ist der Punkt, an
   dem es sonst kippt: mit fester `height` und `max-width` verzerrt der Browser
   das Bild, sobald die Breite greift, statt es kleiner zu rechnen. */
.stn-img{margin-top:22px;display:grid;justify-items:start;position:relative}
.stn-img img{
  max-height:340px;max-width:100%;width:auto;height:auto;
  display:block;border-radius:var(--radius);
}
.stn-card .cta-row{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}

/* ---- Reduced Motion: ruhige Stationen-Liste, Feld statisch ---- */
body.rm .hero.hero-kompakt{position:static}
body.rm .board-col{position:static}
body.rm .board svg.court{height:min(56vh,460px)}
body.rm .stn-card{min-height:auto;opacity:1;transform:none;padding:26px 0;transition:none}
body.rm .court .rev,body.rm .court #ball{transition:none}
body.rm .court .stn.is-active .ring{animation:none;opacity:0}

/* ---- Responsive: Board oben klebend, Karten darunter ---- */
@media (max-width:900px){
  .weg{padding:0 16px 30px}
  .weg-grid{grid-template-columns:1fr;gap:0}
  .board-col{
    top:var(--nav-h);
    background:var(--cream);padding:10px 0 8px;
    box-shadow:0 14px 16px -14px rgba(0,60,46,.55);
  }
  .board svg.court{height:clamp(200px,calc(100vh - var(--nav-h) - 185px),300px)}
  .board-hint{display:none}
  .story-col{padding:8px 0 0}
  .stn-card{min-height:60vh}
  /* Ab hier traegt die Breite: das Bild nimmt die ganze Spalte, die Hoehe
     richtet sich nach dem Bild. Der 340er-Deckel muss dafuer weg, sonst
     blieben hochkante Bilder schmal in der Mitte stehen. */
  .stn-img img{max-height:none;width:100%}
}
/* Auf dem Handy nur die Stationsfolge: das hochkante Board quetscht sich sonst
   über den Text und macht die Seite unbedienbar (Lucas Vorgabe 04.09.2026).
   display:none statt Herauslöschen – assets/weg.js fasst die Stations-Elemente
   weiter an (stns.forEach, classList.toggle); ohne sie bricht das Skript. */
@media (max-width:760px){
  .board-col{display:none}
  .hero.hero-kompakt{padding:16px 16px 18px}
  .hero.hero-kompakt h1{font-size:clamp(26px,7.4vw,34px)}
  .hero.hero-kompakt p.sub{margin-top:8px;font-size:14px}
  .board-cap{margin-top:8px;font-size:11px}
}