/* kv-stadt-hitze.css — Städteseiten (Muster P67, Fabio 01.11.), Abschnitt 1: Kopf + Hitze-Reihe „Die Reihe“.
   Lädt nach kv.css, kv-knopf.css, kv-marke.css. Nichts Stadtspezifisches: Zahl der Jahre (--n) steht im HTML an .wa-daten,
   Jahreswerte (--v), Schnitte und Achse ebenfalls.

   Idee: Das Stadtfoto wird zur Ansichtskarte mit Marke. Unten auf der Karte stehen die Sommer der Messstation als feine
   Lichtstriche. Beim Scrollen wachsen sie Jahr für Jahr von links nach rechts, die Ablesung links zählt mit (Jahr +
   Hitzetage), danach zeichnen sich die Schnitte. Hochscrollen baut alles in umgekehrter Folge wieder ab.

   Technik: eine einzige Zeitachse. Die Karte bekommt eine Scroll-Animation (animation-timeline: view()), die nur die
   Zahl --p von 0 bis 1 treibt. Alles Weitere rechnet aus --p (--h = --p × (Jahre + 6) „Jahresschritte“):
     Strich i       wächst zwischen h = i und i + 3       (weiche Front über drei Jahre)
     Ablesung i     sichtbar zwischen h = i + 2 und i + 3 (das Jahr, das gerade fast fertig ist)
     Schnitt        zeichnet sich ab h = --ab über 3 Schritte
   Rückfall ohne Scroll-Animation / „Bewegung reduzieren“: --p bleibt 1, die Reihe blendet einmal ein (/js/kv-stadt.js). */

@property --p{syntax:'<number>';inherits:true;initial-value:1}

:root{
  --ts1:clamp(34px,3.9vw,56px);   /* S1 */
  --ts3:20px;                     /* S3 */
  --ts4:18px;                     /* S4 */
  --ts5:15px;                     /* S5 */
  --ts6:12px;                     /* S6 */
  --auf-dunkel:#71C3AA;           /* Teal auf Dunkel (index.html) */
  --nacht:21,33,45;               /* Ink, eine Spur tiefer: Schatten der Karte unten */
  --wa-kh:clamp(460px,40vw,580px);/* Kartenhöhe */
}
@media (max-width:640px){:root{--ts4:17px;--section-px:var(--s-5);--wa-kh:470px}}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);font-family:var(--f);color:var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;padding:8px 14px;background:var(--ink);color:#fff;border-radius:var(--r-2)}
.skip-link:focus{left:16px}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--r-1)}

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.wa{position:relative;z-index:2;padding:calc(var(--nav-h) + var(--s-16)) var(--section-px) var(--s-16);
  background:radial-gradient(ellipse 55% 45% at 12% 6%,rgba(61,139,122,.07),transparent 60%)}
.wa-in{max-width:var(--max-w);margin:0 auto;position:relative}
.wa-titel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-6) var(--s-16);align-items:end;margin-bottom:var(--s-12)}
.wa-kenn{display:flex;align-items:baseline;margin:0 0 var(--s-6);font-size:var(--ts6);line-height:1.4;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)}
.wa-kenn::before{content:"—";margin-right:.5em}
.wa-h1{margin:0;font-size:var(--ts1);font-weight:500;line-height:1.05;letter-spacing:-.045em;color:var(--ink)}
.wa-h1>span{display:block}
.wa-h1-sub{font-size:.48em;font-weight:400;color:var(--body);letter-spacing:-.02em;line-height:1.2;margin-top:var(--s-4)}
.wa-h1-sub em{font-style:italic;font-weight:500;color:var(--teal)}
.wa-titel-r{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding-bottom:4px}
.wa-lead{margin:0;font-size:var(--ts3);line-height:1.55;color:var(--muted);max-width:52ch;text-wrap:pretty}

/* ── Die Karte ──────────────────────────────────────────────────────────── */
.wa-karte{position:relative;margin:0;height:var(--wa-kh);border-radius:var(--r-5);
  box-shadow:0 34px 64px -30px rgba(28,43,58,.42),0 10px 22px -12px rgba(28,43,58,.16)}
.wa-foto{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:rgb(var(--nacht))}
.wa-foto picture{display:block;position:absolute;inset:0}
/* Foto ein Stück höher als die Karte: wandert beim Aufbau langsam nach oben (ruhige Tiefe, keine Wackelei) */
.wa-foto img{position:absolute;left:0;top:0;width:100%;height:112%;object-fit:cover;object-position:30% 0;
  transform:translateY(calc(var(--p) * -8%))}
/* Nacht von unten: trägt die Lichtstriche, nur so hoch und so dicht wie nötig — das Foto bleibt bis weit nach unten sichtbar.
   Wird beim Aufbau eine Spur tiefer. */
.wa-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(var(--nacht),.9) 0%,rgba(var(--nacht),.74) 16%,rgba(var(--nacht),.42) 34%,rgba(var(--nacht),.12) 50%,rgba(var(--nacht),0) 60%);
  opacity:calc(.85 + var(--p) * .15)}

/* Marke auf der Ecke der Karte (wie auf einer Ansichtskarte); Render „karte“: Stempel links unten, fällt aufs Foto */
.wa-karte>.kvm{--s:.8;top:-26px;right:40px}

/* ── Daten auf der Karte ────────────────────────────────────────────────── */
.wa-daten{position:absolute;left:var(--s-10);right:var(--s-10);bottom:var(--s-6);color:#fff}
/* --n = Zahl der Jahre (steht je Stadt im HTML am Element .wa-daten), --h = Fortschritt in Jahresschritten */
.wa-daten{--h:calc(var(--p) * (var(--n) + 6))}
.wa-reihe{position:relative;height:calc(var(--wa-kh) * .46);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
  border-bottom:1px solid rgba(255,255,255,.3)}
.wa-reihe>i{position:relative;display:block;--g:clamp(0,calc((var(--h) - var(--i)) / 3),1)}
.wa-reihe>i::before,.wa-reihe>i::after{content:"";position:absolute;left:50%;bottom:0;width:max(2px,24%);
  height:calc(var(--v) * 100% / 60);border-radius:1.5px 1.5px 0 0;transform:translateX(-50%)}
/* Vorzeichnung: der ganze Verlauf schon zart da, damit die Karte im Ruhezustand nicht leer ist */
.wa-reihe>i::before{background:rgba(255,255,255,.14)}
.wa-reihe>i::after{background:rgba(255,255,255,.9);transform-origin:50% 100%;transform:translateX(-50%) scaleY(var(--g))}
.wa-reihe>i.wa-heuer::after{background:var(--auf-dunkel)}
.wa-reihe>i.wa-heuer::before{background:rgba(113,195,170,.22)}

/* Ablesung: die Zeilen stehen als Band untereinander, ein Fenster zeigt genau eine. Das Band springt je Jahr um
   eine Zeile (eine Verschiebung statt vieler Deckkraft-Wechsel → kein Flackern bei schnellem Wischen).
   Aktuelles Jahr = abgerundet (h − 2), begrenzt auf 0 … n − 1. */
/* Höhe: nie unter 40 %, aber immer über dem höchsten Strich darunter. --deck = höchster Jahreswert der ersten 42 % der
   Jahre (so breit wird die Ablesung am Handy), steht je Stadt im HTML an .wa-daten (Fabio 01.11.: Balken stach in den Text) */
.wa-ablese{position:absolute;left:0;bottom:max(40%,calc(var(--deck,0) * 100% / 60 + 10px));display:grid;pointer-events:none;z-index:2;--zh:84px}
.wa-fenster{grid-area:1/1;height:var(--zh);overflow:hidden}
.wa-band{transform:translateY(calc(var(--zh) * -1 * clamp(0,round(down,var(--h) - 2,1),var(--n) - 1)))}
.wa-karte.wa-einmal .wa-band{transform:translateY(calc(var(--zh) * -1 * (var(--n) - 1)))}
.wa-l{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:var(--zh)}
.wa-l small{font-size:var(--ts6);line-height:1.4;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--auf-dunkel)}
.wa-l b{display:flex;align-items:baseline;gap:12px;font-size:64px;line-height:1;font-weight:500;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:#fff}
.wa-l b::after{content:"Hitzetage";font-size:var(--ts5);font-weight:400;letter-spacing:0;color:rgba(255,255,255,.78)}

/* Schnitt je Zeitraum: Linie in Teal auf Dunkel über genau die Jahre des Zeitraums; zeichnet sich von links,
   sobald dessen letztes Jahr steht. Beschriftung nicht an der Linie (läge über Strichen), sondern unter der Ablesung. */
.wa-schnitt{position:absolute;z-index:1;left:calc(var(--von) * 100% / var(--n));width:calc((var(--bis) - var(--von)) * 100% / var(--n));
  bottom:calc(var(--w) * 100% / 60);height:2px;margin-bottom:-1px;background:var(--auf-dunkel);border-radius:1px;
  /* dunkler Saum trennt die Linie von den Strichen, die sie kreuzen → liest sich als eine ruhige Linie */
  box-shadow:0 0 0 2px rgba(var(--nacht),.88);
  transform-origin:0 50%;transform:scaleX(clamp(0,calc((var(--h) - var(--ab)) / 3),1))}
.wa-leg{grid-area:2/1;display:flex;flex-direction:column;gap:2px;margin-top:var(--s-3)}
.wa-leg-z{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;font-weight:500;color:rgba(255,255,255,.82);
  white-space:nowrap;font-variant-numeric:tabular-nums;
  opacity:clamp(0,calc(var(--h) - var(--ab) - 1),1)}
.wa-leg-z::before{content:"";width:14px;height:2px;border-radius:1px;background:var(--auf-dunkel);flex:none}

.wa-achse{position:relative;height:28px;font-size:var(--ts6);font-weight:500;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.wa-achse span{position:absolute;top:8px;left:calc((var(--j) + .5) * 100% / var(--n));transform:translateX(-50%)}
.wa-achse span:first-child{left:0;transform:none}
.wa-achse span:last-child{left:auto;right:0;transform:none;color:var(--auf-dunkel)}

/* ── Unter der Karte: Kernzahl als Satz, daneben Ergänzung ──────────────── */
.wa-unter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-6) var(--s-16);margin-top:var(--s-8);align-items:start}
.wa-kern{margin:0;font-size:var(--ts3);line-height:1.55;color:var(--body);max-width:44ch}
.wa-kern b{font-weight:600;color:var(--ink)}
.wa-neben p{margin:0;font-size:var(--ts5);line-height:1.6;color:var(--muted);max-width:60ch}
.wa-neben p+p{margin-top:var(--s-2)}

/* ── Bewegung: eine Zeitachse je Karte ──────────────────────────────────── */
/* Fabio 01.11.: seriöser — Kopf und Karte stehen ruhig (kein Einblenden, kein Hinlegen); nur die Reihe baut sich auf */
@keyframes waP{from{--p:0}to{--p:1}}
@supports (animation-timeline:view()){
  .wa-karte{animation:waP linear both;
    /* Aufbau: ab „Karte ganz im Bild“ bis kurz vor „Oberkante erreicht die Kopfleiste“ (Inset oben = Kopfleiste + 8, Handy
       schwebt sie 8 px tiefer) */
    animation-timeline:view(block calc(var(--nav-h) + 8px) 0px);
    animation-range:entry 90% contain 90%;  /* Fabio 29.10. „etwas langsamer“: ~285 statt ~200 px Weg */
    animation-duration:auto!important}  /* gegen das Screenshot-Werkzeug (setzt alle Dauern auf 0 s) */
}
/* Handy: Karte ist fast bildschirmhoch, der Weg bis zur Kopfleiste kurz → Aufbau beginnt, sobald die Striche im Bild
   sind (nur Achse und Rand fehlen noch, 90 %); beim Laden ist die Karte erst etwa zur Hälfte da */
@supports (animation-timeline:view()){
  @media (max-width:640px){.wa-karte{animation-range:entry 85% contain 95%}}
}
/* Fabio 29.10.: beim Laden steht die Reihe IMMER auf dem ersten Jahr — auch in hohen Fenstern, in denen die Karte beim
   Öffnen schon ganz im Bild ist. Aufbau daher an den Scrollweg ab Seitenanfang gebunden: 0 px bis „Oberkante der Karte
   24 px unter der Kopfleiste“; diesen Wert (--wa-ende) misst /js/kv-stadt.js. Ohne Skript gilt oben. */
@supports (animation-timeline:scroll()){
  .wa-karte.wa-ab0{animation-timeline:scroll(root);animation-range:0px var(--wa-ende,300px)}
}

/* Rückfall: Reihe fertig, einmal weich einblenden */
.wa-karte.wa-einmal{animation:none!important;--p:1}
.js .wa-karte.wa-einmal .wa-daten{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .wa-karte.wa-einmal.ist-da .wa-daten{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .wa-karte{animation:none!important;--p:1}
  .js .wa-karte.wa-einmal .wa-daten{transform:none;transition:opacity .6s linear}
}

/* ── Tablet / Handy ─────────────────────────────────────────────────────── */
@media (max-width:900px){
  .wa-titel,.wa-unter{grid-template-columns:minmax(0,1fr)}
  .wa-titel{gap:var(--s-6);margin-bottom:var(--s-10)}
}
@media (max-width:640px){
  .wa{padding:calc(var(--nav-h) + var(--s-10)) var(--section-px) var(--s-12)}
  .wa-kenn{margin-bottom:var(--s-4)}
  .wa-lead{font-size:var(--ts4);line-height:1.55}
  .wa-titel{margin-bottom:var(--s-8)}
  .wa-karte{border-radius:var(--r-4)}
  .wa-foto img{object-position:28% 0}
  .wa-karte>.kvm{--s:.6;top:-16px;right:18px}
  .wa-daten{left:var(--s-4);right:var(--s-4);bottom:var(--s-4)}
  .wa-reihe{height:calc(var(--wa-kh) * .5)}
  .wa-reihe>i::before,.wa-reihe>i::after{width:max(2px,42%)}
  .wa-ablese{--zh:66px}
  .wa-l b{font-size:46px;gap:8px}
  .wa-leg-z{font-size:12px;gap:6px}
  .wa-leg-z::before{width:10px}
  .wa-achse-n{display:none}
  .wa-unter{margin-top:var(--s-6);gap:var(--s-4)}
  .wa-kern{font-size:var(--ts4)}
}