/* Passwetter — Design-Port aus dem Claude-Design-Mockup (dunkel default, hell via System). */

@font-face { font-family:"Space Grotesk"; font-weight:400; font-style:normal; font-display:swap;
  src:url("fonts/space-grotesk-400.3bd4a1d4f52d.woff2") format("woff2"); }
/* 500 wurde nur von EINEM 11,5-px-Label gebraucht (jetzt 600) — 13 KB fuer eine
   Regel. Wer wieder font-weight:500 schreibt, bekommt lautlos 400 oder 600
   synthetisiert; dann gehoert die Datei zurueck. */
@font-face { font-family:"Space Grotesk"; font-weight:600; font-style:normal; font-display:swap;
  src:url("fonts/space-grotesk-600.d3be6aff0268.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-weight:700; font-style:normal; font-display:swap;
  src:url("fonts/space-grotesk-700.e86f7c1d9f62.woff2") format("woff2"); }

:root {
  --bg:oklch(0.185 0.012 255); --surface:oklch(0.226 0.014 255); --surface-2:oklch(0.275 0.016 255);
  --line:oklch(0.335 0.014 255); --ink:oklch(0.965 0.005 255); --ink-dim:oklch(0.74 0.01 255);
  --ink-mute:oklch(0.57 0.012 255); --shadow:0 20px 46px -22px rgba(0,0,0,.7);
  --accent:oklch(0.72 0.17 52); --accent-ink:oklch(0.19 0.04 55);
  --k-linie:oklch(0.42 0.012 255); --k-strasse:oklch(0.545 0.105 52); --k-schein:oklch(0.545 0.105 52 / .30);
  --k-licht:oklch(0.80 0.085 68); --k-glut:oklch(0.62 0.10 55 / .42);
  color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:oklch(0.975 0.004 255); --surface:oklch(1 0 0); --surface-2:oklch(0.964 0.005 255);
    --line:oklch(0.9 0.006 255); --ink:oklch(0.24 0.012 255); --ink-dim:oklch(0.44 0.012 255);
    --ink-mute:oklch(0.58 0.012 255); --shadow:0 14px 34px -18px rgba(20,30,55,.28);
    --k-linie:oklch(0.80 0.008 255); --k-strasse:oklch(0.61 0.15 45); --k-schein:oklch(0.61 0.15 45 / .22);
    --k-licht:oklch(0.50 0.19 45); --k-glut:oklch(0.66 0.13 45 / .28);
    color-scheme:light;
  }
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
       font:16px/1.5 "Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       font-variant-numeric:tabular-nums; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline:3px solid var(--accent); outline-offset:3px;
}
::selection { background:var(--accent); color:#111; }

@keyframes rise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes grow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes kb { from{transform:scale(1.07)} to{transform:none} }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Die Karte liegt fest hinter der Seite. Ohne diesen Stapelplatz malt sie ueber
   die Hintergruende der Ranglisten-Zeilen, weil die gar nicht positioniert sind
   und ein position:fixed mit z-index:0 sie schlaegt. */
main { position:relative; z-index:1; }

/* Naechtliche Alpenkarte hinter dem Inhalt. Die Bildinhalte (Hoehenlinien-Masken,
   Fahrprofil) traegt gen_karte.py zwischen den Markern nach. Nur breite Schirme:
   darunter waere die Karte zu drei Vierteln von der Inhaltsspalte verdeckt. */
.alpkarte { display:none; position:fixed; inset:0; z-index:0; pointer-events:none;
  isolation:isolate; }
@media (min-width:1280px) { .alpkarte { display:block; } }
.k-lage { position:absolute; inset:-8% 0; background:var(--k-linie); }
/* Zwei Ebenen statt einer: .k-route traegt nur die Strasse und bleibt
   unmaskiert, .k-lichter traegt alles Helle (Lichtpunkt, Echo, Passmarke,
   Zierzahlen) und traegt die Mittenmaske. */
.k-route, .k-lichter { position:absolute; inset:0; width:100%; height:100%; }
/* Der Verlauf sass frueher auf .alpkarte — und nahm damit Hoehenlinien und
   Strasse mit: quer durchs Bild lief ein Einbruch, die Linien hoerten in der
   Mitte einfach auf. Er sitzt jetzt auf der Lichter-Ebene allein. Bis
   ±300 px um die Mitte ist sie vollstaendig verdeckt, von dort blendet sie
   weich bis ±560 px auf — die halbe Breite der Inhaltsspalte. Das ist
   weiterhin das Nebelfenster (der Lichtpunkt verschwindet zweimal je Runde
   statt an jeder inneren Kehre aufzublitzen) und haelt ihn aus den Luecken
   zwischen den Ranglisten-Karten heraus. Preis: eine Maske isoliert ihre
   Ebene, das mix-blend-mode:screen der Glut mischt darum nicht mehr mit den
   Hoehenlinien darunter, sondern nur noch innerhalb dieser Ebene. */
.k-lichter {
  mask-image:linear-gradient(90deg, #000 0,
    #000 calc(50% - 560px), transparent calc(50% - 300px),
    transparent calc(50% + 300px), #000 calc(50% + 560px), #000 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 0,
    #000 calc(50% - 560px), transparent calc(50% - 300px),
    transparent calc(50% + 300px), #000 calc(50% + 560px), #000 100%); }
.k-strasse { fill:none; stroke:var(--k-strasse); stroke-width:1.15; stroke-linecap:round;
  filter:drop-shadow(0 0 2px var(--k-schein)); }
.k-punkt { fill:var(--k-licht); }
.k-glut { fill:var(--k-glut); mix-blend-mode:screen; }
.k-passmarke { fill:var(--k-gut); stroke:none; }
.k-passglut { fill:url(#k-passschein) var(--k-gut); }
.k-passschein-stop { stop-color:var(--k-gut); }
.k-passlinie { fill:none; stroke:var(--k-gut); stroke-width:.6; opacity:.5; }
.k-passtext { fill:var(--k-gut); font-size:8.5px; font-weight:700;
  letter-spacing:.16em; opacity:.72; }
.k-passhoehe { font-size:7.5px; font-weight:600; letter-spacing:.12em; }
@media (prefers-color-scheme: light) { .k-passtext { opacity:1; } }
.k-echo-punkt { fill:var(--k-licht); }
/* >>> karte: erzeugt von gen_karte.py, nicht von Hand aendern */
/* Hoehenlinien als Alpha-MASKE, nicht als Bild: die Farbe traegt .k-lage schon
   als background (var(--k-linie)), die Maske nur die Form. So folgt die Karte
   dem Farbschema, ohne dass hier eine Farbe steht.
   Die -webkit-Eigenschaften stehen bewusst VOR den unpraefixierten: sonst
   gewinnt in Safari die Praefix-Variante und die Ebene verliert ihre
   Deckkraft-Abstufung. */
.k-fern, .k-nah {
  /* Beim Atmen wandern die Ebenen ein paar Pixel quer. Ohne diesen Ueberhang
     stuende am Bildschirmrand ein leerer Streifen. */
  left:-14px; right:-14px;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  /* Bewusst groesser als die Flaeche: der Parallaxe-Versatz laeuft im
     Ueberhang, damit nie eine unmaskierte Kante auftaucht. */
  -webkit-mask-size:130% 130%; mask-size:130% 130%; }

/* Fern: weiter und blasser. Nah: enger und etwas kraeftiger. Beide zeigen ein
   Bergrelief mit geschlossenen Ringen um die Gipfel, links flacher als rechts,
   und mit Ecken dort, wo eine Hoehenlinie einen Grat kreuzt. Zusammen bleiben
   sie im 8-%-Budget -- die Linien sollen erst auf den zweiten Blick auffallen,
   die Strichdeckkraft steckt zusaetzlich schon in den SVGs (fern 0.15-0.32,
   nah 0.28-0.62). Fast doppelt so viele Straenge wie in der vorigen Runde und
   jeder einzelne rund ein Drittel schmaler: die Gesamttinte je Ebene bleibt
   dabei innerhalb von 25 % des alten Werts. */
.k-fern {
  /* Der Maskenverweis steht EINMAL in einer eigenen Eigenschaft, darauf
     verweisen -webkit-mask-image und mask-image -- nicht zweimal
     ausgeschrieben. */
  --k-maske:url("karte-fern.31e987e49af3.svg");
  -webkit-mask-image:var(--k-maske);
  mask-image:var(--k-maske);
  -webkit-mask-position:50% 46%; mask-position:50% 46%;
  opacity:0.26;
  animation:k-fern-schub linear both, k-fern-atem 78s ease-in-out infinite;
  animation-timeline:scroll(root), auto; }
.k-nah {
  --k-maske:url("karte-nah.d919f52a0443.svg");
  -webkit-mask-image:var(--k-maske);
  mask-image:var(--k-maske);
  -webkit-mask-position:50% 42%; mask-position:50% 42%;
  opacity:0.42;
  animation:k-nah-schub linear both, k-nah-atem 52s ease-in-out infinite;
  animation-timeline:scroll(root), auto; }

/* Parallaxe beim Scrollen: nah verschiebt sich doppelt so weit wie fern
   (16 gegen 8 Prozentpunkte des Ueberhangs). Verschoben wird die
   Maskenposition, nicht transform -- transform traegt das Atmen. */
@keyframes k-fern-schub {
  from { -webkit-mask-position:50% 46%; mask-position:50% 46%; }
  to { -webkit-mask-position:50% 54%; mask-position:50% 54%; } }
@keyframes k-nah-schub {
  from { -webkit-mask-position:50% 42%; mask-position:50% 42%; }
  to { -webkit-mask-position:50% 58%; mask-position:50% 58%; } }

/* Atmen im Stillstand: wenige Pixel, sehr langsam, mit ungleichen Dauern,
   damit die beiden Ebenen nicht im Gleichschritt laufen. */
@keyframes k-fern-atem {
  0%, 100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(-4px,3px,0); } }
@keyframes k-nah-atem {
  0%, 100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(6px,-5px,0); } }

/* Der Lichtpunkt. offset-path liegt auf den beiden Kreisen und NICHT auf der
   Gruppe .k-fahrer: offset-path erzeugt einen Stacking-Context, und ein
   Stacking-Context isoliert das mix-blend-mode:screen seiner Kinder. Auf der
   Gruppe wuerde der Scheinwerfer gegen einen leeren Hintergrund mischen und
   die Hoehenlinien blieben unveraendert -- genau das kurze Aufhellen im
   Vorbeifahren waere weg. Beide Kreise laufen mit demselben Keyframe-Namen,
   derselben Dauer und ohne Verzoegerung, sie bleiben also Bild fuer Bild
   deckungsgleich.
   transform-box:fill-box ist noetig, weil der Ankerpunkt sonst in der Mitte
   der viewBox (800/500) laege statt im Kreismittelpunkt. */
.k-glut, .k-punkt {
  transform-box:fill-box;
  offset-path:path("M-10.6,1005.2 C-0.5,1002.9 8.2,1001.7 19.9,998.2 C36.4,993.3 58.7,982.5 78.7,976.6 C98.6,970.7 119.7,968.6 139.7,962.6 C159.7,956.7 181.9,945.9 198.5,941.0 C210.2,937.5 221.1,934.9 229.0,934.0 C233.9,933.4 237.6,934.3 241.0,934.0 C243.5,933.8 245.5,933.5 247.5,932.7 C249.5,931.9 251.5,930.6 253.0,929.0 C254.6,927.5 255.9,925.5 256.7,923.5 C257.5,921.5 258.0,919.2 258.0,917.0 C258.0,914.8 257.5,912.5 256.7,910.5 C255.9,908.5 254.6,906.5 253.0,905.0 C251.5,903.4 249.5,902.1 247.5,901.3 C245.5,900.5 243.5,900.2 241.0,900.0 C237.6,899.7 235.2,900.9 229.0,900.0 C204.7,896.5 78.3,851.5 54.0,848.0 C47.8,847.1 45.4,848.3 42.0,848.0 C39.5,847.8 37.5,847.5 35.5,846.7 C33.5,845.9 31.5,844.6 30.0,843.0 C28.4,841.5 27.1,839.5 26.3,837.5 C25.5,835.5 25.0,833.2 25.0,831.0 C25.0,828.8 25.5,826.5 26.3,824.5 C27.1,822.5 28.4,820.5 30.0,819.0 C31.5,817.4 33.5,816.1 35.5,815.3 C37.5,814.5 39.5,814.2 42.0,814.0 C45.4,813.7 47.9,814.9 54.0,814.0 C75.9,810.8 170.2,781.3 201.6,770.1 C216.7,764.8 222.3,762.9 234.6,756.4 C252.0,747.4 273.8,729.0 294.8,718.1 C315.8,707.1 339.7,701.6 360.8,690.7 C381.8,679.7 399.9,663.2 421.0,652.3 C442.0,641.3 465.9,635.8 486.9,624.9 C507.9,613.9 529.7,595.6 547.1,586.5 C559.4,580.1 568.7,578.1 580.1,572.8 C592.9,566.8 606.5,552.4 620.0,552.0 C633.5,551.6 648.0,563.8 661.1,570.3 C673.7,576.5 682.7,583.3 697.3,589.8 C717.9,599.0 749.7,606.3 774.6,617.4 C799.6,628.5 822.0,645.2 846.9,656.3 C871.9,667.4 899.3,672.9 924.3,684.0 C949.2,695.0 971.6,711.8 996.6,722.9 C1021.5,734.0 1049.0,739.4 1073.9,750.5 C1098.9,761.6 1121.3,778.4 1146.2,789.5 C1171.2,800.6 1198.6,806.0 1223.6,817.1 C1248.5,828.2 1270.9,844.9 1295.9,856.0 C1320.8,867.1 1352.6,874.5 1373.2,883.7 C1387.8,890.2 1392.8,896.3 1409.4,903.1 C1441.5,916.4 1535.1,943.8 1557.0,947.0 C1563.1,947.9 1565.6,947.3 1569.0,947.0 C1571.5,946.8 1573.5,946.5 1575.5,945.7 C1577.5,944.9 1579.5,943.6 1581.0,942.0 C1582.6,940.5 1583.9,938.5 1584.7,936.5 C1585.5,934.5 1586.0,932.2 1586.0,930.0 C1586.0,927.8 1585.5,925.5 1584.7,923.5 C1583.9,921.5 1582.6,919.5 1581.0,918.0 C1579.5,916.4 1577.5,915.1 1575.5,914.3 C1573.5,913.5 1571.5,913.2 1569.0,913.0 C1565.6,912.7 1561.5,914.9 1557.0,913.0 C1548.3,909.4 1539.5,891.6 1525.5,881.8 C1505.7,867.9 1465.0,857.7 1445.2,843.9 C1431.2,834.1 1423.0,822.1 1413.6,812.6 C1405.9,804.8 1398.1,799.3 1392.7,791.1 C1387.3,782.8 1383.2,772.9 1381.2,763.3 C1379.2,753.6 1379.0,742.9 1380.7,733.2 C1382.5,723.5 1386.3,713.5 1391.4,705.1 C1396.6,696.7 1403.9,688.8 1411.8,682.9 C1419.7,677.0 1429.7,674.0 1438.8,669.8 C1447.9,665.7 1456.0,663.5 1466.3,658.1 C1480.9,650.5 1499.4,635.7 1517.0,626.6 C1534.6,617.4 1554.3,612.4 1571.9,603.2 C1589.5,594.1 1608.0,579.3 1622.5,571.7 C1632.9,566.3 1640.8,563.9 1650.0,560.0");
  offset-rotate:0deg;
  offset-anchor:50% 50%;
  animation:k-fahrt 24s linear infinite; }
/* Weicher Scheinwerferkegel statt flacher Scheibe. Der Farbwert hinter dem
   Verweis ist der Rueckfall, falls der Verlauf nicht aufgeloest wird. */
.k-glut { fill:url(#k-kegel) var(--k-glut); }
.k-kegel-stop { stop-color:var(--k-glut); }

/* Fahrprofil aus gen_karte_route.fahrprofil(), woertlich uebernommen.
   0-70 % der Runde ist Fahrt, danach 6.7 s vollstaendig
   dunkel -- ausdruecklich keine Endlosschleife ohne Pause. Die Rundendauer
   24s ist nicht gewaehlt, sondern gerechnet: das Nebelfenster misst
   damit 2.23 s Unsichtbarkeit. Nebelfenster und Pause sind beides
   Anteile derselben Runde und ziehen gegeneinander; 24 s traegt beide. */
@keyframes k-fahrt {
  0% { offset-distance:0.00%; opacity:0; }
  0.90% { opacity:1; }
  1.32% { offset-distance:2.94%; }
  2.64% { offset-distance:5.73%; }
  3.95% { offset-distance:6.68%; }
  5.27% { offset-distance:7.37%; }
  6.60% { offset-distance:8.00%; }
  7.92% { offset-distance:8.62%; }
  9.24% { offset-distance:9.23%; }
  10.57% { offset-distance:9.89%; }
  11.89% { offset-distance:11.71%; }
  13.18% { offset-distance:14.68%; }
  14.53% { offset-distance:15.47%; }
  15.84% { offset-distance:16.10%; }
  17.20% { offset-distance:16.72%; }
  18.47% { offset-distance:17.32%; }
  19.81% { offset-distance:17.93%; }
  21.13% { offset-distance:18.58%; }
  22.45% { offset-distance:19.54%; }
  23.78% { offset-distance:23.01%; }
  25.09% { offset-distance:25.74%; }
  26.41% { offset-distance:28.58%; }
  27.74% { offset-distance:31.41%; }
  29.06% { offset-distance:34.24%; }
  29.30% { opacity:1; }
  30.38% { offset-distance:37.02%; }
  31.70% { offset-distance:39.08%; opacity:0; }
  33.02% { offset-distance:40.58%; }
  34.34% { offset-distance:42.77%; }
  35.66% { offset-distance:45.74%; }
  36.98% { offset-distance:48.77%; }
  38.30% { offset-distance:51.79%; }
  39.62% { offset-distance:54.80%; }
  40.94% { offset-distance:57.82%; }
  41.00% { offset-distance:57.95%; opacity:0; }
  42.26% { offset-distance:60.84%; }
  42.84% { opacity:1; }
  43.58% { offset-distance:63.86%; }
  44.91% { offset-distance:66.90%; }
  46.23% { offset-distance:69.47%; }
  47.55% { offset-distance:72.48%; }
  48.84% { offset-distance:74.42%; }
  50.16% { offset-distance:75.11%; }
  51.50% { offset-distance:75.75%; }
  52.84% { offset-distance:76.37%; }
  54.15% { offset-distance:76.95%; }
  55.47% { offset-distance:77.55%; }
  56.79% { offset-distance:78.21%; }
  58.11% { offset-distance:79.30%; }
  59.44% { offset-distance:81.71%; }
  60.76% { offset-distance:83.98%; }
  62.07% { offset-distance:85.83%; }
  63.40% { offset-distance:87.60%; }
  64.72% { offset-distance:89.45%; }
  66.04% { offset-distance:91.86%; }
  67.36% { offset-distance:94.63%; }
  68.68% { offset-distance:97.40%; }
  70.00% { offset-distance:100.00%; opacity:1; }
  72.00% { offset-distance:100.00%; opacity:0; }
  100% { offset-distance:100.00%; opacity:0; }
}

/* Passmarke: EIN Puls je Runde, und zwar dann, wenn der Punkt oben ankommt.
   Die Marke sitzt bei 84.95 % der Bogenlaenge; ueber die Keyframes des
   Fahrprofils interpoliert erreicht der Punkt sie bei 61.44 % der
   Rundenzeit (14.7 s von 24 s). Nicht Anteil * 0.75 =
   59.46 % -- der Punkt faehrt vor Kehren langsamer, Weg und Zeit sind
   nicht proportional. Den Rest der Runde passiert nichts. */
.k-passmarke { opacity:.85; animation:k-passpuls 24s linear infinite; }
@keyframes k-passpuls {
  0%, 60.39% { r:3; opacity:.85; }
  61.44% { r:7.1; opacity:1; }
  63.19% { r:3; opacity:.85; }
  100% { r:3; opacity:.85; } }
/* Der Lichtschein atmet mit, aber schwaecher: ein Hof, der auf das Doppelte
   springt, ist ein Blitz, kein Schein. */
.k-passglut { opacity:.9; animation:k-passhof 24s linear infinite; }
@keyframes k-passhof {
  0%, 60.39% { opacity:.9; }
  61.44% { opacity:1; }
  63.19% { opacity:.9; }
  100% { opacity:.9; } }

/* Zwei Farbwerte, die das Geruest noch nicht hat. Sie stehen hier und nicht im
   oberen Farbsatz, damit der Generator sie besitzt: eine erzeugte Regel, die
   auf eine handgepflegte Variable ausserhalb der Marker zeigt, faellt lautlos
   aus, wenn dort jemand aufraeumt. Dunkelsatz zuerst, Hellsatz danach --
   dieselbe Reihenfolge wie oben in der Datei. */
:root { --k-gut:oklch(0.74 0.15 152); --k-warn:oklch(0.68 0.19 30); }
@media (prefers-color-scheme: light) {
  :root { --k-gut:oklch(0.55 0.14 152); --k-warn:oklch(0.55 0.20 28); } }

/* Der Echo-Punkt, den karte.js beim Ueberfahren einer Ranglisten-Zeile
   einsetzt. karte.js setzt nur cx/cy -- ohne r hier waere es ein Kreis mit
   Radius 0, also unsichtbar. Kurzes Aufgluehen beim Erscheinen. */
.k-echo-punkt { r:3.5; animation:k-echo-auf .32s ease-out; }
@keyframes k-echo-auf {
  from { r:0; opacity:0; }
  60% { r:5; opacity:1; }
  to { r:3.5; opacity:1; } }

/* Score 100 bzw. unter 35: die Passmarke gibt EINEN kurzen Impuls, keinen
   Dauerzustand. Die Regel laeuft einmal ab und verdraengt solange den
   Rundenpuls (drei Klassen schlagen die eine von .k-passmarke); karte.js setzt
   und entfernt die Klasse am Behaelter, jedes Setzen startet sie neu.
   Beim schlechten Wert laeuft die Farbe von Gelb (--k-licht) nach Rot. */
[data-karte].k-bestwert .k-passmarke {
  fill:var(--k-gut); animation:k-marke-gut .9s ease-out; }
@keyframes k-marke-gut {
  from { r:3; opacity:.85; }
  35% { r:8.2; opacity:1; }
  to { r:3; opacity:.9; } }
[data-karte].k-schlecht .k-passmarke {
  fill:var(--k-warn); animation:k-marke-warn .9s ease-out; }
@keyframes k-marke-warn {
  from { r:3; opacity:.85; fill:var(--k-licht); }
  35% { r:8.2; opacity:1; fill:var(--k-licht); }
  to { r:3; opacity:.9; fill:var(--k-warn); } }

/* Seltene Zahlen. ZIERWERTE, ausdruecklich erfunden -- keine Messwerte und
   keine Daten dieser Seite. Sehr klein, sehr blass, sichtbare Phase 8 % der
   Runde, drei verschiedene Dauern und Verzoegerungen, damit sie nie gemeinsam
   auftauchen. */
.k-zahl { fill:var(--k-linie); font-size:10px; font-weight:600;
  letter-spacing:.16em; opacity:0; }
@keyframes k-zahl-blitz {
  0%, 100% { opacity:0; }
  2%, 6% { opacity:.5; }
  8% { opacity:0; } }
.k-zahl-1 { animation:k-zahl-blitz 190s linear 34s infinite; }
.k-zahl-2 { animation:k-zahl-blitz 247s linear 121s infinite; }
.k-zahl-3 { animation:k-zahl-blitz 313s linear 208s infinite; }

/* Reduzierte Bewegung: alles steht. Die Karte bleibt sichtbar; der Lichtpunkt
   stuende sonst bei offset-distance 0 % auf dem Startpunkt ausserhalb des
   Bildes. 69.9 % der Bogenlaenge setzen ihn auf eine Stelle, die bei
   allen vier Fenstergroessen frei sichtbar liegt und weit genug von jeder
   Kehre entfernt ist -- gerechnet von gen_karte_route.ruhe_anteil(). */
@media (prefers-reduced-motion: reduce) {
  .k-fern, .k-nah, .k-glut, .k-punkt, .k-passmarke, .k-passglut, .k-zahl,
  .k-echo-punkt { animation:none !important; }
  .k-glut, .k-punkt { offset-distance:69.9%; opacity:1; } }
/* <<< karte */

.wrap { max-width:1120px; margin:0 auto; padding:0 18px; }

/* Header */
.site-head { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); }
.site-head .wrap { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:11px; padding-bottom:11px; }
.brand { display:flex; align-items:center; gap:11px; color:inherit; }
.brand:hover { text-decoration:none; }
.brand .mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex:none;
  background:color-mix(in oklab, var(--accent) 16%, transparent); color:var(--accent); }
.brand .mark svg { width:22px; height:22px; }
.brand .name { display:block; font-weight:700; font-size:19px; letter-spacing:.14em; line-height:1; }
.brand .tag { display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:4px; line-height:1; }

/* Hero */
.hero { position:relative; z-index:1; overflow:hidden; isolation:isolate; }
.hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; animation:kb 14s ease-out both; }
.hero .scrim { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,.15) 32%, rgba(8,10,14,.45) 62%, var(--bg) 100%); }
.hero .wrap { min-height:min(74vh,620px); display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:24px; padding-bottom:150px; color:#f4f6fa; }
.hero .inner { animation:rise .7s ease both; }
.live { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:rgba(10,12,16,.5); border:1px solid rgba(255,255,255,.16); font-size:12px; font-weight:600;
  letter-spacing:.04em; backdrop-filter:blur(6px); }
.live .dot { width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); }
.hero h1 { margin:16px 0 0; font-size:clamp(30px,6vw,52px); font-weight:700; line-height:1.03;
  letter-spacing:-.02em; max-width:15ch; text-shadow:0 2px 24px rgba(0,0,0,.4); }
.hero p.sub { margin:14px 0 0; font-size:clamp(15px,2.4vw,18px); color:rgba(244,246,250,.82); max-width:52ch; }

/* Filtertafel: Zeitraum / Land / Motorradtyp als beschriftete Zeilen einer Glasplatte
   über der Hero-Kante. Flaches Raster aus Beschriftung + Knopfgruppe je Zeile — die
   Spalte `auto` bemisst sich am längsten Wort, damit sie auch "TYPE DE MOTO" trägt.
   -115px = Tafelhöhe bei drei Zeilen (gemessen 115 px): so endet die Platte genau auf
   der Hero-Unterkante und lässt 31 px Luft unter dem Untertitel. Fehlt die
   Motorradtyp-Zeile, bleibt der Abstand nach oben gleich, die Platte endet höher. */
.filterpanel { position:relative; z-index:2; margin-top:-115px;
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 14px;
  padding:9px 13px; border-radius:18px;
  background:rgba(10,12,16,.5); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
/* Schrift als Langformen, nicht als `font:700 11px/1 inherit`: `inherit` ist im
   font-Kurzwort kein gueltiger Familienwert, der Browser verwirft die ganze
   Deklaration. Genau daran hingen vorher die ungleichen Knopfgroessen — Links
   fielen auf 16 px Fliesstext zurueck, Knoepfe auf die UA-Schrift. */
.filterpanel .plabel { font-family:inherit; font-size:11px; font-weight:700; line-height:1;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,246,250,.6); white-space:nowrap; padding-left:4px; }
.filterpanel .fopts { display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-width:0; }
.filterpanel a, .filterpanel button { padding:8px 15px; border-radius:999px;
  font-family:inherit; font-size:13px; font-weight:600; line-height:1;
  color:rgba(244,246,250,.75);
  background:none; border:0; cursor:pointer; transition:all .18s ease; }
.filterpanel a:hover, .filterpanel button:hover { text-decoration:none; color:#fff; }
.filterpanel a.on, .filterpanel button.on { background:var(--accent); color:var(--accent-ink);
  box-shadow:0 6px 16px -8px var(--accent); }

/* Wochen-Text (Fable 5) — Aufmacher zwischen Pillen und Spitzenreiter */
.wochentext { position:relative; z-index:2; margin:14px 0 0; padding:16px 18px 16px 20px;
  border-radius:16px; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); box-shadow:var(--shadow);
  font-size:1.02rem; line-height:1.6; color:var(--ink-dim); }
.wt-label { display:block; font:700 10.5px/1 inherit; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:7px; }

/* Steckbrief (evergreen) — Lead-Absatz auf der Detailseite.
   Volle Ink-Farbe statt ink-dim: als Lead-Absatz ist er Fliesstext, kein Beiwerk. */
.steckbrief { margin:18px 0 4px; font-size:1.06rem; line-height:1.62; color:var(--ink);
  max-width:70ch; }

/* Der Motorradtyp-Filter ist die dritte Zeile der Filtertafel (siehe .filterpanel);
   .bikefilter bleibt als Haken für static/site.js an der Knopfgruppe. */
.filter-empty { margin:14px 0 0; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); color:var(--ink-dim); }

/* Strecke & Belag — aus OSM-Geometrie berechnet */
.strecke { margin:26px 0 4px; }
.road-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px; }
.road-metric { background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px 14px; text-align:center; }
.road-metric .big { font-size:2rem; font-weight:700; line-height:1; }
.road-metric .lab { margin-top:7px; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--ink-dim); display:flex; flex-direction:column; gap:2px; }
.road-metric .lab small { font-weight:600; opacity:.7; font-size:11.5px; }
.bikefit { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.fit { font-size:12.5px; font-weight:700; padding:5px 11px; border:1.5px solid; border-radius:999px; }
.road-warn { margin-top:12px; font-size:13.5px; font-weight:600; color:#c14b4b; }
.strecke .fine { margin-top:10px; }
@media (max-width:560px){ .road-grid { grid-template-columns:1fr 1fr; } }

/* Spitzenreiter */
.champ { display:block; margin-top:12px; position:relative; z-index:2; color:inherit; animation:rise .7s .08s ease both; }
.champ:hover { text-decoration:none; }
.champ article { background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; }
.champ .ribbon { display:flex; align-items:center; gap:8px; padding:11px 18px; background:var(--accent); color:var(--accent-ink); }
.champ .ribbon span { font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }
.champ .body { padding:20px 20px 22px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.champ .no { font-size:clamp(52px,13vw,84px); font-weight:700; line-height:.82; letter-spacing:-.04em; }
.champ .mid { flex:1; min-width:180px; }
.champ h2 { margin:0; font-size:clamp(24px,5vw,34px); font-weight:700; letter-spacing:-.01em; }
.champ .meta { margin-top:5px; color:var(--ink-dim); font-size:14.5px; }
.champ .chips { margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:color-mix(in oklab, var(--accent) 14%, transparent); font-size:13px; font-weight:600; }
.champ .go { color:var(--ink-mute); font-size:13px; }
.champ .scorebox { text-align:right; min-width:120px; }
.label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.champ .big { display:flex; align-items:baseline; justify-content:flex-end; gap:3px; }
.champ .big b { font-size:clamp(46px,11vw,68px); font-weight:700; line-height:.9; letter-spacing:-.03em; }
.champ .big span { font-size:18px; font-weight:600; color:var(--ink-mute); }
.meter { margin-top:9px; height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.meter > i { display:block; height:100%; border-radius:99px; transform-origin:left; animation:grow .8s .2s ease both; }

/* Rangliste */
.listhead { display:flex; align-items:baseline; justify-content:space-between; margin:34px 4px 12px; }
.listhead h3 { margin:0; font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.listhead span { font-size:13px; color:var(--ink-mute); }
.rows { display:flex; flex-direction:column; gap:8px; }
/* Das Skript blendet Zeilen ueber das hidden-Attribut aus. Die Regel dafuer steht
   im Browser-Stylesheet ([hidden]{display:none}) und hat dieselbe Spezifitaet wie
   .row hier drunter — Autorenregeln schlagen Browserregeln, also gewann display:grid
   und die ausgeblendete Zeile blieb stehen. Sichtbar wurde das als doppelter
   Spitzenreiter und als Zeilen mit ihrer alten Nummer ("1 / 11 / 02 / 03") mitten
   in der frisch nummerierten Liste. Jede Pruefung ueber die Eigenschaft element.hidden
   sagte dabei brav "versteckt". Gemessen werden muss, was auf dem Schirm steht. */
[hidden] { display:none !important; }

.row { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:14px; padding:15px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; color:inherit;
  transition:transform .16s ease, border-color .16s ease, background .16s ease; }
.row:hover { text-decoration:none; transform:translateX(3px);
  border-color:color-mix(in oklab, var(--accent) 55%, var(--line)); background:var(--surface-2); }
.row .rk { font-size:20px; font-weight:700; color:var(--ink-mute); text-align:center; letter-spacing:-.02em; }
.row .nm { display:block; font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .rg { display:block; margin-top:2px; font-size:12.5px; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .mini { display:block; margin-top:9px; height:5px; border-radius:99px; background:var(--surface-2); overflow:hidden; max-width:340px; }
.row .mini i { display:block; height:100%; border-radius:99px; }
.row .sc { font-size:26px; font-weight:700; letter-spacing:-.02em; justify-self:end; }
.rows .row { animation:rise .5s ease both; }
.rows .row:nth-child(1){animation-delay:.03s} .rows .row:nth-child(2){animation-delay:.06s}
.rows .row:nth-child(3){animation-delay:.09s} .rows .row:nth-child(4){animation-delay:.12s}
.rows .row:nth-child(5){animation-delay:.15s} .rows .row:nth-child(6){animation-delay:.18s}
.rows .row:nth-child(7){animation-delay:.21s} .rows .row:nth-child(8){animation-delay:.24s}
.rows .row:nth-child(9){animation-delay:.27s} .rows .row:nth-child(10){animation-delay:.30s}

/* Rest-Aufklapper */
details.rest { margin:0; }
details.rest > summary { list-style:none; cursor:pointer; display:flex; justify-content:center; padding:18px 0; }
details.rest > summary::-webkit-details-marker { display:none; }
details.rest > summary > span { padding:10px 18px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-dim); font:600 13px/1 inherit; transition:border-color .16s ease, color .16s ease; }
details.rest > summary:hover > span { border-color:var(--accent); color:var(--accent); }
details.rest[open] > summary { display:none; }
.pagepad { padding-bottom:56px; }

/* Detail */
.back { display:inline-flex; align-items:center; gap:6px; color:var(--ink-dim); font-size:13.5px; font-weight:600; margin:16px 2px 14px; }
.banner { position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--line); }
.banner img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.banner .scrim { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,10,14,.35), rgba(8,10,14,.72)); }
.banner .inner { padding:26px 22px; color:#f4f6fa; display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; min-height:230px; }
.banner .eyebrow { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,246,250,.7); }
.banner h1 { margin:8px 0 0; font-size:clamp(28px,6vw,44px); font-weight:700; letter-spacing:-.02em; }
.place-aliases { margin:5px 0 0; font-size:12px; color:rgba(244,246,250,.7); }
.weather-now { display:flex; flex-wrap:wrap; gap:6px 14px; width:fit-content; max-width:100%;
  margin:12px 0 0; padding:8px 12px; border:1px solid rgba(255,255,255,.2); border-radius:12px;
  background:rgba(10,12,16,.48); color:rgba(244,246,250,.9); font-size:13px; line-height:1.45;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.weather-now span + span { padding-left:14px; border-left:1px solid rgba(255,255,255,.2); }
.weather-now b { color:#fff; }
.weather-now strong { color:var(--accent); }
.banner .meta { margin-top:8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14.5px; color:rgba(244,246,250,.85); }
.banner .meta a { display:inline-flex; align-items:center; gap:5px; color:#f4f6fa; border:1px solid rgba(255,255,255,.28); padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:600; }
.banner .meta .share { display:inline-flex; align-items:center; gap:5px; color:#f4f6fa; background:none; border:1px solid rgba(255,255,255,.28); padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; }
.banner .meta .share:hover { border-color:rgba(255,255,255,.55); }
.banner .meta .merk { display:inline-flex; align-items:center; gap:5px; color:#f4f6fa; background:none; border:1px solid rgba(255,255,255,.28); padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; }
.banner .meta .merk:hover { border-color:rgba(255,255,255,.55); }
.banner .meta .merk.on { background:var(--accent); border-color:var(--accent); color:#0b0d12; }
.banner .meta .merk.on svg { fill:currentColor; }

/* Merkliste: klebt unten, aber nur wenn etwas drin ist — leer ist das Element hidden.
   Ueber dem Fuss statt im Kopf, damit sie auf dem Handy nicht die Rangliste verdeckt. */
.merkbar { position:sticky; bottom:0; z-index:30; background:rgba(10,12,16,.94);
  border-top:1px solid rgba(255,255,255,.16); color:#f4f6fa;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.merkbar .wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 20px; }
.merkbar .mb-titel { font-size:13px; letter-spacing:.02em; }
.merkbar .mb-namen { flex:1 1 180px; min-width:0; font-size:12.5px; color:rgba(244,246,250,.72);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.merkbar button { font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:6px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background:none; color:#f4f6fa; }
.merkbar .mb-laden { background:var(--accent); border-color:var(--accent); color:#0b0d12; }
.merkbar .mb-laden[disabled] { opacity:.55; cursor:progress; }
.merkbar button:hover { border-color:rgba(255,255,255,.55); }
/* Auf dem Handy frisst die Namenszeile eine dritte Zeile und damit ein Fuenftel des
   Bildschirms. Der Zaehler im Titel sagt dasselbe kuerzer. */
@media (max-width:560px) {
  .merkbar .mb-namen { display:none; }
  .merkbar .wrap { padding:8px 16px; gap:8px; }
  .merkbar .mb-titel { flex:1 1 auto; }
  .merkbar button { padding:6px 11px; font-size:12px; }
}
/* Sperrstatus-Zeile unter dem H1 — Datum immer mit, Grün heisst "nichts gemeldet". */
.sperrstatus { margin-top:11px; display:inline-flex; align-items:center; gap:8px; padding:5px 13px;
  border-radius:999px; font-size:12.5px; font-weight:600; color:#f4f6fa;
  background:rgba(10,12,16,.5); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sperrstatus::before { content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:oklch(0.71 0.155 150); }
.sperrstatus.zu { border-color:color-mix(in oklab, oklch(0.71 0.155 27) 65%, transparent); }
.sperrstatus.zu::before { background:oklch(0.71 0.155 27); }
@media (max-width:560px) {
  .weather-now { flex-direction:column; gap:3px; }
  .weather-now span + span { padding-left:0; border-left:0; }
}

/* Scorecard: bester Tag gross, Wochen-Score als Beleg daneben */
.scorecard { display:flex; align-items:center; gap:18px; background:rgba(10,12,16,.42); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14); padding:14px 18px; border-radius:18px; }
.scorecard .label { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,246,250,.6); }
.scorecard .bestday { margin-top:6px; font-size:clamp(26px,6vw,34px); font-weight:700;
  color:var(--accent); letter-spacing:-.02em; line-height:1.05; white-space:nowrap; }
.scorecard .bestscore { margin-top:5px; font-size:12.5px; font-weight:600; color:rgba(244,246,250,.72); }
.scorecard .weekscore { display:flex; flex-direction:column; align-items:center; gap:7px; flex:none;
  padding-left:18px; border-left:1px solid rgba(255,255,255,.14); }
/* Gesperrt: "Gesperrt" statt bestem Tag, Wetterwert gedämpft — er bleibt lesbar,
   liest sich aber nicht mehr als Fahrempfehlung. */
.scorecard.zu .bestday { color:oklch(0.71 0.155 27); }
.scorecard.zu .weekscore { opacity:.6; }
.dial { position:relative; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; flex:none; }
.dial::before { content:""; position:absolute; inset:7px; border-radius:50%; background:rgba(12,14,18,.9); }
.dial .v { position:relative; text-align:center; line-height:1; }
.dial .v b { font-size:22px; font-weight:700; letter-spacing:-.03em; }
.dial .v small { display:block; font-size:8.5px; letter-spacing:.1em; color:rgba(244,246,250,.6); margin-top:2px; }

/* Öffentlicher Score-Beleg: Wetter und Rankingfaktoren sichtbar trennen. */
.scoreproof { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:18px;
  background:var(--surface); box-shadow:var(--shadow); }
.scoreproof-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.scoreproof-head .eyebrow { display:block; color:var(--accent); font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; }
.scoreproof h2 { margin:4px 0 0; font-size:18px; }
.scoreproof-head a { flex:none; font-size:13px; font-weight:700; }
.scoreproof > p { margin:9px 0 0; color:var(--ink-dim); font-size:13.5px; max-width:72ch; }
.scoreflow { margin-top:15px; display:flex; align-items:stretch; gap:8px; overflow-x:auto; padding:2px 2px 5px; }
.scoreflow > span { min-width:122px; padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2); display:flex; flex-direction:column; gap:3px; }
.scoreflow > span.result { border-color:var(--accent); }
.scoreflow > span.cap { min-width:105px; }
.scoreflow small { color:var(--ink-mute); font-size:10.5px; white-space:nowrap; }
.scoreflow b { font-size:19px; color:var(--ink); }
.scoreflow > i { align-self:center; color:var(--ink-mute); font-style:normal; font-weight:700; }
.scoreproof .scoretie { font-size:12px; color:var(--ink-mute); }

.sechead { display:flex; align-items:baseline; justify-content:space-between; margin:26px 2px 14px; }
.sechead h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.sechead span { font-size:12.5px; color:var(--ink-mute); }
/* Zwei Zeilen, eine Ursache: die Karten starten ihre rise-Animation 14 px tiefer
   (translateY), und sobald eine Achse scrollt, rechnet CSS die andere von visible
   auf auto. Also erschien an einem Kasten, der senkrecht nichts zu scrollen hat,
   eine senkrechte Bildlaufleiste.
   overflow-y:hidden allein reicht NICHT — dann wird der Kartenfuss waehrend der
   Animation stattdessen abgeschnitten (nachgemessen: 10 px). Das padding unten muss
   die 14 px auffangen, darum 18 statt 4. Das BESTWETTER-Faehnchen sitzt dank
   padding-top:12px bei +4 px und wird von hidden ebenfalls nicht angeschnitten. */
.days7 { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; overflow:auto hidden;
  padding-top:12px; padding-bottom:18px; }
.day { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 8px;
  display:flex; flex-direction:column; align-items:center; gap:10px; min-width:74px; position:relative;
  animation:rise .5s ease both; }
.day.best { background:color-mix(in oklab, var(--accent) 12%, var(--surface)); border-color:var(--accent); }
.day .star { position:absolute; top:-9px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--accent); color:var(--accent-ink); font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.day .dh { text-align:center; line-height:1.15; }
.day .dh b { font-size:14px; font-weight:700; }
.day .dh small { display:block; font-size:11px; color:var(--ink-mute); }
.day .bar { width:100%; height:96px; border-radius:8px; background:var(--surface-2); display:flex; align-items:flex-end; overflow:hidden; }
.day .bar i { display:block; width:100%; border-radius:8px 8px 0 0; transform-origin:bottom; animation:grow .7s ease both; }
.day .num { font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.day dl { width:100%; display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--ink-dim); margin:0; }
.day dl div { display:flex; justify-content:space-between; gap:4px; }
.day dt { color:var(--ink-mute); }
.day dd { margin:0; font-weight:600; color:var(--ink); }
.legend { margin-top:16px; display:flex; align-items:center; gap:12px; font-size:11.5px; color:var(--ink-mute); }
.legend .grad { flex:1; height:7px; border-radius:99px;
  background:linear-gradient(90deg, oklch(0.62 0.19 27), oklch(0.72 0.16 55), oklch(0.80 0.15 90), oklch(0.72 0.15 150)); }

/* Angebote */
/* Essen & Trinken: Betriebe an der Passstrasse, ueber dem Angebote-Kasten. */
.essen { margin-top:24px; max-width:520px; }
.essen .essenliste { list-style:none; margin:0; padding:0; }
.essen .essenliste li { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:12px 14px; margin-bottom:9px; }
.essen .ename { display:block; font-weight:600; font-size:14.5px; color:var(--ink); }
.essen .esatz { display:block; margin-top:3px; font-size:12.5px; color:var(--ink-dim); line-height:1.45; }
.essen .eweb { display:inline-block; margin-top:7px; font-size:12.5px; font-weight:600; color:var(--accent); }
.essen .eweb .arrow { opacity:.65; }
.essen .fine { margin:10px 2px 0; font-size:10.5px; color:var(--ink-mute); }
.cta { margin-top:24px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; max-width:520px; }
.cta p.hint { margin:0 0 14px; font-size:12.5px; color:var(--ink-mute); }
.cta .btn { display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:12px; font-weight:600; font-size:14px; margin-bottom:10px; }
.cta .btn:hover { text-decoration:none; }
.cta .btn.primary { background:var(--accent); color:var(--accent-ink); }
.cta .btn.primary:hover { filter:brightness(1.06); }
.cta .btn.ghost { border:1px solid var(--line); color:var(--ink); }
.cta .btn.ghost:hover { border-color:var(--accent); color:var(--accent); }
.cta .btn .arrow { margin-left:auto; opacity:.65; }
.cta .fine { margin:12px 0 0; font-size:10.5px; color:var(--ink-mute); line-height:1.4; }

/* Rechtsseiten */
.legal { max-width:72ch; padding-top:26px; }
.legal h1 { font-size:clamp(26px,5vw,36px); letter-spacing:-.02em; }
.legal h2 { font-size:1.1rem; margin-top:2em; }
.legal p, .legal li { color:var(--ink-dim); font-size:15px; }
.legal strong { color:var(--ink); }

/* Ab 1280px liegt die Alpenkarte hinter der Seite (.alpkarte). Auf den reinen
   Textseiten laeuft die Passstrasse dann quer durch den Fliesstext — lesbar
   (14.4:1 dunkel, 15.1:1 hell), aber unruhig. Die Karten und die Quellentabelle
   der Methodikseite stehen laengst auf var(--surface); hier bekommen die
   uebrigen Textbloecke dasselbe Blatt. Nur in diesem Breakpoint, weil es
   darunter gar keine Karte gibt und die Seiten sonst unveraendert bleiben. */
@media (min-width:1280px) {
  .legal, .methodik .method-section {
    background:var(--surface); border:1px solid var(--line);
    border-radius:14px; box-shadow:var(--shadow);
  }
  .legal { padding:30px 34px 44px; margin-bottom:40px; }
  .methodik .method-section { padding:20px 24px 24px; }
  /* Die Quellentabelle bringt ihr eigenes Blatt mit. Auf dem Abschnittsblatt
     waere das ein Rahmen im Rahmen — die Zeilentrenner reichen. */
  .methodik .method-section .method-table { background:none; border:0; border-radius:0; }
  .methodik .method-section .method-table>div { padding-left:0; padding-right:0; }
}

/* Footer */
.site-foot { border-top:1px solid var(--line); margin-top:56px; }
.site-foot .wrap { padding-top:22px; padding-bottom:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-mute); }
.site-foot a { color:var(--ink-mute); }
.site-foot a:hover { color:var(--accent); }

@media (max-width:640px) {
  .champ .body { gap:12px; }
  .days7 { grid-template-columns:repeat(7, minmax(84px,1fr)); }

  /* Hero kürzen, damit auf 812 px die Rangliste angeschnitten sichtbar ist.
     Die Höhe kommt vom Inhalt, nicht von min-height — darum Schrift und
     Abstände zusammenziehen und den Intro-Absatz auf 3 Zeilen klemmen
     (bleibt vollständig im DOM, nur optisch gekürzt). */
  .hero .wrap { min-height:0; padding-top:14px; padding-bottom:118px; }
  .hero h1 { margin-top:11px; font-size:26px; }
  .hero p.sub { margin-top:9px; font-size:14px; line-height:1.45;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .filterpanel { margin-top:-104px; padding:8px 11px; gap:3px 10px; }

  /* Filterreihen scrollen horizontal statt umzubrechen — je Gruppe eine Zeile.
     Die Beschriftungsspalte bleibt stehen, nur die Knöpfe wandern. */
  .filterpanel .fopts { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none; }
  .filterpanel .fopts::-webkit-scrollbar { display:none; }
  .filterpanel a, .filterpanel button { flex:none; padding:8px 13px; }

  /* Detail-Scorecard: volle Breite unter dem H1 statt gequetscht daneben */
  .scorecard { width:100%; }
}

/* Wintersperre */
.closed-note{margin-top:18px;font-size:.82rem;color:var(--ink-mute);line-height:1.5}
.closed-note a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.closed-banner{margin:14px 0 4px;padding:12px 16px;border:1px solid color-mix(in oklab, oklch(0.71 0.155 27) 40%, transparent);border-radius:12px;background:color-mix(in oklab, oklch(0.71 0.155 27) 12%, transparent);font-size:.9rem;line-height:1.5}

/* FAQ (Detailseite) */
.faq { margin-top:28px; max-width:640px; }
.faq details { border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:9px; padding:0 16px; }
.faq summary { cursor:pointer; list-style:none; padding:14px 0; font-weight:600; font-size:14.5px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-weight:400; font-size:20px; color:var(--ink-mute); line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:0 0 15px; font-size:14px; line-height:1.62; color:var(--ink-dim); }

/* Pässe in der Nähe / Saison-Chips */
.nachbarn { margin-top:28px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { display:flex; flex-direction:column; gap:2px; padding:10px 14px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); min-width:150px; }
.chip:hover { border-color:var(--accent); text-decoration:none; }
.chip b { font-size:14px; color:var(--ink); font-weight:600; }
.chip small { font-size:11.5px; color:var(--ink-mute); }

/* Saison-Landingpage */
.pagehead { padding-top:22px; max-width:64ch; }
.pagehead .eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.pagehead h1 { font-size:clamp(26px,5vw,38px); letter-spacing:-.02em; margin:0 0 12px; }
.pagehead .lede { color:var(--ink-dim); font-size:15.5px; line-height:1.6; margin:0; }
.monatsnav { display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 8px; }
.monatsnav a { padding:7px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
  font-size:13px; font-weight:600; color:var(--ink-dim); }
.monatsnav a:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.monatsnav a.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.landblock { margin-top:26px; }
.landblock .lede { color:var(--ink-dim); font-size:14.5px; margin:0; }
.gpxrow { margin:18px 2px 0; font-size:12.5px; color:var(--ink-mute); }
.gpxrow a { color:var(--accent); }
.bildnachweis { margin:8px 4px 0; font-size:11.5px; color:var(--ink-mute); }
.bildnachweis a { color:var(--ink-mute); text-decoration:underline; text-underline-offset:2px; }
.zu { margin:12px 2px 0; font-size:12.5px; color:var(--ink-mute); line-height:1.55; }

/* Tagesansicht: Stundenwerte unter dem 7-Tage-Streifen */
.day[data-tag] { font:inherit; color:inherit; text-align:center; cursor:pointer; width:100%; }
.day[data-tag]:hover { border-color:var(--accent); }
.day .mehr { margin-top:8px; font-size:10.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-mute); }
.day[data-tag][aria-expanded="true"] { border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset; }
.tagesansicht { margin:14px 0 4px; padding:16px 16px 14px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.ta-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ta-kopf h3 { margin:0; font-size:15px; font-weight:700; letter-spacing:.02em; }
.ta-zu { font:inherit; font-size:20px; line-height:1; padding:0 4px; cursor:pointer;
  background:none; border:0; color:var(--ink-mute); }
.ta-zu:hover { color:var(--ink); }
.ta-fenster { margin:6px 0 12px; font-size:14px; font-weight:600; color:var(--accent); }
.ta-fenster.nass { color:var(--ink-mute); }
/* Kacheln statt Spalten: auf 375 px waren von 15 Stunden nur acht sichtbar, der
   Rest lag im Seitwaerts-Scroll — und ein Tag, den man wegscrollen muss, ist kein
   ganzer Tag. auto-fill bricht um: schmal drei Reihen, breit eine. Kein Scrollen. */
.ta-tabelle { display:grid; gap:6px; grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)); }
.ta-stunde { display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:7px 4px 6px; border-radius:10px; background:var(--surface-2);
  font-variant-numeric:tabular-nums; line-height:1.25; }
.ta-stunde.nass { background:color-mix(in oklab, oklch(0.6 0.13 240) 22%, var(--surface-2)); }
.ta-stunde b { font-size:12px; font-weight:700; color:var(--ink-dim); letter-spacing:.02em; }
.ta-stunde .ta-t { font-size:14px; font-weight:700; color:var(--ink); }
.ta-stunde .ta-b { font-size:10.5px; color:var(--ink-mute); }
.ta-stunde .ta-r { font-size:10.5px; font-weight:600; color:oklch(0.74 0.12 240); min-height:13px; }
.ta-fuss { margin:10px 0 0; font-size:11px; color:var(--ink-mute); }

/* Bestenlisten (Höhe / Kurven / Kehren) */
.rangliste { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.rangliste li { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); }
.rangliste li:hover { border-color:var(--accent); }
.rangliste .rang { min-width:2.2ch; text-align:right; font-size:13px; font-weight:700; color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.rangliste a { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.rangliste a:hover { text-decoration:none; }
.rangliste b { font-size:14.5px; font-weight:600; color:var(--ink); }
.rangliste small { font-size:11.5px; color:var(--ink-mute); }
.rangliste .wert { font-size:15px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Pass-Alert E-Mail-Abo */
.alert { margin:30px 0 8px; padding:20px 20px 22px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.alert h2 { margin:0 0 4px; font-size:1.1rem; }
.alert .hint { margin:0 0 14px; color:var(--ink-dim); font-size:14px; max-width:52ch; }
.alertform { display:flex; flex-wrap:wrap; gap:9px; }
.alertform select, .alertform input { flex:1 1 140px; min-width:0; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-2);
  color:var(--ink); font:inherit; font-size:14px; }
.alertform button { flex:0 0 auto; padding:10px 20px; border:0; border-radius:10px;
  background:var(--accent); color:var(--accent-ink); font:inherit; font-weight:700;
  font-size:14px; cursor:pointer; }
.alertform button:hover { filter:brightness(1.05); }
.alertform button:disabled { opacity:.55; cursor:progress; }
.alertmsg { margin:11px 2px 0; font-size:13.5px; color:var(--ink-dim); }

/* Methodik / öffentlicher Systemvertrag */
.methodik{max-width:980px}.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0}
.method-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:19px;box-shadow:var(--shadow)}
.method-card>span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.method-card h2{font-size:18px;margin:7px 0}.method-card p{margin:8px 0;color:var(--ink-dim);font-size:14px;line-height:1.6}
.method-card code{display:inline-block;padding:5px 8px;border-radius:7px;background:var(--surface-2);color:var(--ink);font-size:12px}
.method-section{margin-top:30px;max-width:760px}.method-section h2{font-size:20px;margin-bottom:10px}
.method-section p,.method-section li{color:var(--ink-dim);font-size:14px;line-height:1.65}.method-section ul{padding-left:20px}
.method-table{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.method-table>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px}
.method-table>div:last-child{border-bottom:0}.method-table span{color:var(--ink-dim)}
@media(max-width:680px){.method-grid{grid-template-columns:1fr}.method-table>div{grid-template-columns:1fr;gap:3px}}
@media(max-width:560px){
  .scoreproof-head{flex-direction:column}.scoreproof-head a{align-self:flex-start}
  .scoreflow > span{min-width:112px}
}

/* GPX-Uebersicht: die drei Bestandteile einer Datei als Begriffsliste. */
.gpxdl { margin:14px 0 26px; display:grid; gap:10px; }
.gpxdl dt { font-weight:700; font-size:14px; color:var(--accent); }
.gpxdl dd { margin:0 0 4px; font-size:14.5px; color:var(--muted); max-width:62ch; }
.rangliste li a.wert { font-size:12.5px; font-weight:700; padding:4px 11px;
  border-radius:999px; border:1px solid rgba(255,255,255,.28); text-decoration:none; }
.rangliste li a.wert:hover { border-color:rgba(255,255,255,.55); }