/* ============================================================
   PLATZSTATUS & WEBCAM — „Ein Fenster zum Platz, jetzt gerade."
   Präfix wx-, Werte aus tokens.css/seite.css.

   Lichtstimmung: html[data-licht="tag|golden|daemmerung|nacht"] wird aus dem
   REALEN Sonnenstand gesetzt (PHP beim Rendern, platzstatus.js im Betrieb) —
   wer abends schaut, sieht eine wärmere, dunklere Seite als mittags.
   ============================================================ */

:root{
  --wx-gelb:#E0A81C;                    /* Ampel „gelb" auf hellen Flächen */
  --wx-sonnenkern:#FFF3C4;
  --wx-glut:rgba(255,214,120,.30);
  --wx-stimmung:rgba(7,32,21,.16);      /* Farbklima über dem Webcam-Bild */
}
html[data-licht="golden"]{--wx-sonnenkern:#FFD98F;--wx-glut:rgba(255,166,66,.38);--wx-stimmung:rgba(66,32,4,.20)}
html[data-licht="daemmerung"]{--wx-sonnenkern:#F2B98F;--wx-glut:rgba(186,124,168,.34);--wx-stimmung:rgba(34,24,58,.30)}
html[data-licht="nacht"]{--wx-sonnenkern:#dfe7f2;--wx-glut:rgba(150,170,210,.18);--wx-stimmung:rgba(8,14,28,.42)}

/* ---------- Hero: die KAMERAWAND ----------
   Beide Livebilder stehen frei nebeneinander, Text steht darüber und darunter
   — nie darauf. Vorher lag der halbe Hero (Riesen-H1, Lead, CTAs, Panel) auf
   dem Bild, und Cam 1 kam erst nach langem Scrollen. Damit fällt auch die
   geerbte Vollbild-Mechanik aus seite.css weg: kein sticky, keine Mindesthöhe,
   kein Schleier, kein Parallax. */
.wx-hero{position:relative;top:auto;z-index:auto;display:block;min-height:0;overflow:visible;
  background:var(--pine);padding-bottom:var(--luft-s)}
.wx-hero::after{content:none}
/* 112 px, damit das überstehende Wappen im Kopf nicht auf dem Kicker sitzt */
.wx-hero .wx-kicker{padding:112px var(--inset) 0;margin-bottom:0}

/* 4fr/3fr ist kein Geschmackswert: Cam 2 liefert 16:9 (3840×2160), Cam 1 aber
   4:3 (2048×1536). In diesem Spaltenverhältnis sind beide Fenster bei gleicher
   Höhe genau so breit, wie ihr Bild es will — der Beschnitt ist in beiden
   derselbe (und minimal). */
.wx-wand{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr);gap:18px;margin:16px var(--inset) 0}
.wx-fenster{margin:0;display:flex;flex-direction:column}
/* Feste Wandhöhe statt Seitenverhältnis: so passen beide Fenster samt Leiste
   in den ersten Blick, egal wie breit der Schirm ist. Das !important räumt
   den Parallax von seite.js weg, der die Bühne sonst verschöbe. */
.wx-hero .wx-fensterbild{position:relative;inset:auto;overflow:hidden;border-radius:var(--r-karte);
  background:#08170f;height:clamp(230px,42svh,460px);transform:none !important;will-change:auto}
.wx-cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.1s var(--ease)}
.wx-cam-b{opacity:0}
.wx-fensterzeile{display:flex;align-items:center;gap:9px;padding:11px 2px 0;font-family:'Hanken Grotesk',sans-serif;
  font-size:13px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.wx-fensterzeile b{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.wx-fensterzeile span:last-child{margin-left:auto;text-align:right;padding-left:12px}

/* Die JETZT-Leiste: Ampel und Tageslicht unter der Wand (die Bildzeiten stehen
   jetzt an den Fenstern selbst, wo sie hingehören) */
.wx-jetzt{display:flex;flex-wrap:wrap;gap:12px 40px;margin:16px var(--inset) 0;padding:15px 22px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-karte)}
.wx-jetzt-zeile{display:flex;align-items:baseline;gap:9px;font-family:'Hanken Grotesk',sans-serif}
.wx-jetzt-zeile b{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap}
.wx-jetzt-zeile span:last-child{font-size:12.5px;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums}

/* Text unter der Wand: kleinere Headline (die Vollbild-Größe aus seite.css
   würde hier den halben Schirm fressen) und kein Schatten mehr — nichts liegt
   mehr auf einem Bild, das Getragen-werden erledigt der Pine-Grund. */
.wx-hero .hero-inhalt{padding:26px var(--inset) 0;transform:none !important;opacity:1 !important}
.wx-hero h1{margin-top:0;font-size:min(clamp(40px,6.4vw,104px),13svh);text-shadow:none}
.wx-hero .hero-unten{grid-template-columns:minmax(0,1fr);margin-top:22px}
.wx-hero .hero-lead,.wx-hero .sh-kicker{text-shadow:none}

/* Live-Punkt: leuchtet NUR, wenn das Bild wirklich frisch ist (< 5 min) */
.wx-livedot{width:8px;height:8px;min-width:8px;border-radius:50%;background:rgba(255,255,255,.3);align-self:center}
.wx-livedot.an{background:var(--lime);animation:wx-puls 1.6s infinite}
@keyframes wx-puls{0%,100%{box-shadow:0 0 0 0 rgba(204,255,0,.45)}55%{box-shadow:0 0 0 6px rgba(204,255,0,0)}}

/* Ampel-Punkt (Hero-Widget klein, Boden-Kapitel groß) */
.wx-ampel{width:11px;height:11px;min-width:11px;border-radius:50%;align-self:center}
.wx-ampel.gruen{background:var(--lime);box-shadow:0 0 0 3px rgba(204,255,0,.22)}
.wx-ampel.gelb{background:#F2C14E;box-shadow:0 0 0 3px rgba(242,193,78,.22)}
.wx-ampel.rot{background:var(--live);box-shadow:0 0 0 3px rgba(255,90,77,.22)}
.wx-ampel.leer{background:rgba(140,150,144,.5)}
.wx-sonnchen{width:9px;height:9px;min-width:9px;border-radius:50%;align-self:center;background:var(--wx-sonnenkern);box-shadow:0 0 0 3px var(--wx-glut)}

/* ---------- Kapitel-Gerüst ---------- */
.wx-kap{padding-top:var(--luft)}
.wx-himmel,.wx-boden,.wx-fahnen{padding-bottom:var(--luft)}
.wx-himmel{background:var(--tanne);color:#fff}
.wx-himmel .kapitel-kopf h2{color:#fff}

/* ---------- Tageslicht-Instrument ---------- */
.wx-licht{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);gap:22px;align-items:stretch;margin:34px var(--inset) 0}
/* Flex + Zentrierung: die Bogen-Grafik sitzt mittig, egal wie hoch die
   Zahlen-Spalte rechts den Kasten zieht — kein totes Leervolumen unten */
.wx-bogen{position:relative;margin:0;display:flex;flex-direction:column;justify-content:center;background:var(--pine);border-radius:var(--r-karte);padding:22px;overflow:hidden}
.wx-bogen svg{display:block;width:100%;height:auto}
.wx-horizont{stroke:rgba(255,255,255,.22);stroke-width:1.5}
.wx-bahn{fill:none;stroke:rgba(255,255,255,.30);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round}
/* Spur und Sonne werden direkt vom Scroll-/Uhr-Skript gesetzt — keine CSS-Transition dazwischen */
.wx-bahn-gelaufen{fill:none;stroke:var(--wx-sonnenkern);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--wx-glut))}
.wx-tick line{stroke:rgba(255,255,255,.38);stroke-width:2}
.wx-tick-t{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;fill:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wx-tick-l{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;fill:rgba(255,255,255,.45)}
.wx-tick-start line{stroke:var(--lime)}
.wx-tick-start .wx-tick-t{fill:var(--lime)}
.wx-sonne-glut{fill:var(--wx-glut)}
.wx-sonne-kern{fill:var(--wx-sonnenkern)}
/* Der Nachtsatz stand früher absolut im Bogen (top:9%) — sobald er zweizeilig
   wurde, lief die Sonnenbahn quer durch die Schrift. Jetzt hat er seine eigene
   Zeile über der Grafik, abgesetzt durch eine Haarlinie. */
.wx-bogen-nacht{order:-1;text-align:center;font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:15px;
  line-height:1.5;color:rgba(255,255,255,.85);max-width:52ch;margin:4px auto 18px;padding:0 0 16px;
  border-bottom:1px solid var(--hairline-dunkel)}
/* Nachts gibt es keinen „letzten Start heute" mehr — die Marken machen Platz
   für den Nachttext, morgens sind sie wieder da (platzstatus.js schaltet). */
.wx-bogen.nachtaktiv .wx-tick-start{display:none}

.wx-rest{display:flex;flex-direction:column;background:var(--pine);border-radius:var(--r-karte);padding:26px 26px 20px}
.wx-rest-zahl{font-size:clamp(44px,4.6vw,64px);line-height:1;color:var(--lime)}
.wx-rest-zahl small{font-size:.42em;font-weight:700;color:rgba(255,255,255,.55);margin-left:6px}
.wx-rest-label{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}
.wx-urteile{list-style:none;margin:18px 0 0;padding:0}
.wx-urteile li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0 11px 14px;border-left:3px solid var(--lime);margin-bottom:8px;background:rgba(255,255,255,.045)}
.wx-urteile li b{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap}
.wx-urteile li span{font-size:13px;color:rgba(255,255,255,.7);text-align:right;padding-right:12px;font-variant-numeric:tabular-nums}
.wx-urteile li.vorbei{border-left-color:rgba(255,255,255,.22)}
.wx-urteile li.vorbei b{color:rgba(255,255,255,.55)}
.wx-rest-fuss{margin-top:auto;padding-top:12px;font-size:12px;color:rgba(255,255,255,.42)}

/* ---------- Wetterkarten ---------- */
.wx-wetter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:22px var(--inset) 0}
.wx-karte{background:var(--pine);border-radius:var(--r-karte);padding:26px 26px 22px}
.wx-karte h3{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.wx-wert{font-size:clamp(38px,3.6vw,52px);line-height:1;color:#fff;margin-top:14px}
.wx-wert small{font-size:.4em;font-weight:700;color:rgba(255,255,255,.55);margin-left:5px}
.wx-nebenwert{margin-top:9px;font-size:13.5px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.wx-nebenwert b{color:#fff;font-weight:600}
.wx-tendenz{margin-top:12px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}
.wx-wind{display:flex;align-items:center;gap:20px;margin-top:10px}
.wx-kompass{width:96px;height:96px;flex:none}
.wx-k-ring{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.5}
.wx-kompass text{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;fill:rgba(255,255,255,.5);text-anchor:middle}
.wx-k-pfeil{transform-box:view-box;transform-origin:center;transition:transform 1.2s var(--ease)}
.wx-k-pfeil path{fill:var(--lime)}
.wx-k-pfeil line{stroke:var(--lime);stroke-width:3;stroke-linecap:round}
.wx-wind .wx-wert{margin-top:0}
.wx-stempel{grid-column:1/-1;font-size:12.5px;color:rgba(255,255,255,.45)}
.wx-stempel b{color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.wx-wetter-leer{grid-column:1/-1;font-size:15px;color:rgba(255,255,255,.7)}

/* ---------- Boden: Ampel ----------
   EINE dunkle Tafel statt sieben weißer Kästchen (06.09.2026). Vorher stand
   der Status in hellen Karten mit dünner Linie auf weißem Grund — Andreas:
   „immer noch alles weiß und viel zu unübersichtlich". Jetzt trägt ein
   Pine-Block alles: Kopf (Ampel + Zustand), darunter die vier Werte, darunter
   die festen Zeilen. Getrennt wird mit 1-px-Fugen (gap auf heller
   Grundfläche), nicht mit Rändern — das gibt Haarlinien statt Kästchen. */
.wx-ampelbrett{margin:34px var(--inset) 0;background:var(--pine);border-radius:var(--r-karte);overflow:hidden;color:#fff}

.wx-haupt{display:flex;gap:18px;align-items:center;padding:26px 32px 24px}
.wx-haupt>div{min-width:0}
.wx-ampel.gross{width:22px;height:22px;min-width:22px}
/* Auf dem dunklen Grund ist das Vereinsgrün unsichtbar — „gut" leuchtet hier
   in Lime, wie überall auf den dunklen Flächen dieser Seite. */
.wx-ampel.gross.gruen{background:var(--lime);box-shadow:0 0 0 6px rgba(204,255,0,.15)}
.wx-ampel.gross.gelb{background:var(--wx-gelb);box-shadow:0 0 0 6px rgba(224,168,28,.18)}
.wx-ampel.gross.rot{background:var(--live);box-shadow:0 0 0 6px rgba(255,90,77,.18)}
.wx-ampel.gross.leer{background:rgba(255,255,255,.4);box-shadow:none}
.wx-haupt-label{font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,2.5vw,32px);font-weight:700;
  letter-spacing:-.02em;text-transform:uppercase;color:#fff;line-height:1.05}
.wx-haupt-stand{margin-top:7px;font-size:14.5px;color:rgba(255,255,255,.72)}
.wx-haupt-stand a{color:var(--lime)}
.wx-haupt-hinweis{margin-top:9px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}

/* Die vier Werte: Was klein und ruhig, Zustand groß und farbig. Farbe trägt
   nichts allein — der Zustand steht als Wort da. */
.wx-teilstatus{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.13)}
.wx-teilstatus li{background:var(--pine);display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:4px 11px;padding:17px 30px 19px}
.wx-teilstatus b{grid-column:1/-1;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62)}
/* Haken bzw. Verbotszeichen wie im Laufband — sichtbar ist immer genau eines */
.wx-teilstatus .band-ikon{width:19px;height:19px}
.wx-teilstatus .ja .wx-ik-nein,.wx-teilstatus .nein .wx-ik-ja{display:none}
.wx-teilstatus span{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;letter-spacing:-.015em;color:#fff}
.wx-teilstatus .ja span{color:var(--lime)}
.wx-teilstatus .nein span{color:var(--live)}

/* Sprungziel des Status-Bands der Startseite — Luft für den festen Kopf */
.wx-boden{scroll-margin-top:96px}

/* Die festen Bandzeilen der Startseite (gleiche Quelle wie das Laufband,
   band_feste_zeilen()) — als Sockel derselben Tafel, eine Spur heller
   abgesetzt: sie gelten immer, unabhängig von der Ampel. */
.wx-festzeilen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.13)}
.wx-festzeilen li{display:flex;background:rgba(255,255,255,.05);
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;letter-spacing:.045em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}
/* Das Innere trägt den Rand, nicht die Zelle: So ist bei einer verlinkten
   Zeile die ganze Kachel die Klickfläche und nicht nur der Text. */
.wx-festzeilen a,.wx-fest-text{display:flex;align-items:center;width:100%;padding:15px 30px;color:inherit;text-decoration:none}
.wx-festzeilen a{transition:background var(--t-schnell) var(--ease),color var(--t-schnell) var(--ease)}
.wx-festzeilen a:hover{background:rgba(255,255,255,.07);color:#fff}
.wx-fest-pfeil{color:var(--lime)}

/* ---------- Fahnen: Pins-Teaser ---------- */
.wx-pinskarte{margin:34px var(--inset) 0;background:var(--mint);padding:34px 32px}
.wx-pins-stand{font-size:15.5px;color:var(--text)}
.wx-pins-stand b{color:var(--tinte)}
.wx-pins-reihe{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.wx-pins-reihe a{display:flex;flex-direction:column;align-items:center;gap:1px;width:46px;padding:7px 0 8px;background:#fff;border:1px solid var(--linie-karte);border-radius:10px;text-decoration:none;transition:transform var(--t-schnell) var(--ease),border-color var(--t-schnell)}
.wx-pins-reihe a:hover{transform:translateY(-3px);border-color:var(--gruen)}
.wx-pins-reihe small{font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.wx-pins-reihe b{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;color:var(--gruen)}
.wx-pins-cta{margin-top:24px}

/* ---------- Zweite Webcam ---------- */
/* Seit die Kamerawand im Hero beide Blicke zeigt, ist dieser Rahmen die
   Lesefassung der Tafel — gedeckelt, sonst wäre er im 4:3 über 1300 px hoch */
/* Cam 1 liefert 4:3 (2048×1536) — im 16:9-Rahmen fehlte oben und unten je ein
   Streifen, ausgerechnet bei der Info-Tafel. */

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:1000px){
  .wx-licht{grid-template-columns:1fr}
  .wx-teilstatus{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wx-wetter{grid-template-columns:1fr}
  /* Zwei Fenster nebeneinander lohnen sich hier nicht mehr — das kleine wäre
     nur noch briefmarkengroß. Ab hier stapelt die Wand. */
  .wx-wand{grid-template-columns:1fr;gap:22px}
  /* Gestapelt bekommt jedes Fenster das Verhältnis SEINER Kamera — Cam 2 liefert
     16:9, Cam 1 liefert 4:3; so wird gar nichts mehr beschnitten */
  .wx-hero .wx-fensterbild{height:auto;aspect-ratio:16/9}
  .wx-hero .wx-fenster-klein .wx-fensterbild{aspect-ratio:4/3}
  /* SVG-Schrift skaliert mit der viewBox — auf schmalen Screens nachlegen */
  .wx-tick-t{font-size:34px}
  .wx-tick-l{font-size:21px}
  .wx-tick line{stroke-width:3}
}
@media (max-width:900px){
  /* Kopf ist niedriger, das überstehende Wappen kürzer — weniger Vorlauf */
  .wx-hero .wx-kicker{padding-top:72px}
  .wx-hero .hero-inhalt{padding-top:22px}
  .wx-hero h1{font-size:clamp(38px,11vw,64px)}
  .wx-jetzt{gap:10px 26px;padding:14px 18px}
}
@media (max-width:560px){
  .wx-haupt{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px}
  /* gestapelt gehört der Punkt an den linken Rand, nicht in die Mitte
     (`.wx-ampel` steht auf align-self:center — das zentriert in der Spalte) */
  .wx-haupt .wx-ampel.gross{align-self:flex-start}
  /* Eine Spalte, aber nicht in die Höhe: Was links, Zustand rechts */
  .wx-teilstatus{grid-template-columns:1fr}
  .wx-teilstatus li{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:0 10px;padding:13px 20px}
  .wx-teilstatus b{grid-column:1;grid-row:1}
  .wx-teilstatus .band-ikon{grid-column:2;grid-row:1}
  .wx-teilstatus span{grid-column:3;grid-row:1;font-size:18px}
  .wx-festzeilen a,.wx-fest-text{padding:13px 20px}
  .wx-pins-reihe a{width:40px}
}
@media (prefers-reduced-motion:reduce){
  .wx-cam,.wx-bahn-gelaufen,.wx-sonne,.wx-k-pfeil{transition:none}
  .wx-livedot.an{animation:none}
}