/* Wetterstation Gern — das gesamte Aussehen der Seite.
   Alle Farben stehen als Variablen in :root — eine einzige, helle
   Tagesfassung. Die --c-*-Werte lesen zusätzlich die Skripte über
   Gern.color(), damit jede Farbe nur an einer Stelle steht.
   Schriften: Inter für Text, Space Grotesk für Messwerte. */

/* ---- Schriften, selbst gehostet, nur Latin ---- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-var.woff2?v=1") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-var.woff2?v=1") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ---- Töne, helle Fassung ----
   Farben des Wienerwalds: Wiese, Wald, Himmel, Sonne, Ziegeldächer.

   Kontraste nach WCAG 2.1 AA, und zwar je Farbe gegen die Gründe, auf
   denen sie wirklich steht: die drei Tintentöne auf allen vier
   (--card, --paper, --paper-deep, --footer-bg) mit mindestens 4,5:1, die
   Akzentschrift auf ihren Gründen ebenso, die Kurvenfarben mit mindestens
   3:1 gegen die Karte. Nachgerechnet wird das von .tools/pruef-thema.htm
   für beide Fassungen; die schwächsten Paare stehen dort mit Namen.

   Hier stand einmal die weiter gefasste Zusage „jede Textfarbe auf allen
   vier Gründen". Die war nicht wahr: Grün hielt auf dem getönten
   Abschnitt 4,21, Ton auf dem Papier 4,36, Wasser auf der Karte 4,20, und
   der Meldepunkt „ok" stand in Wiesengrün mit 3,39. Sechs Töne sind
   deshalb um ein paar Prozent nachgedunkelt worden — sichtbar ist das
   nicht, nachgerechnet schon.

   Der Seitengrund war bis hierher ein warmes Cremebeige (#f5efe0, davon
   die dunklere Fassung #ece3cd). Das war zu kräftig: Der gelbe Anteil lag
   bei einem Fünftel des Grüns und legte sich über die ganze Seite, sodass
   Ocker, Ton und Sonne — die Farben, die etwas bedeuten — daneben kaum
   noch auffielen. Jetzt steht dort ein sehr helles Steingrau mit einem
   Hauch Grün: Es bleibt warm genug, um nicht klinisch zu wirken, tritt
   aber hinter die Farben zurück, die eine Aussage tragen. Alle Töne sind
   dabei etwas heller geworden, die Kontraste steigen also (Beispiel:
   --ink-soft auf --paper-deep von 4,98 auf 5,19). */
:root {
  color-scheme: light;

  --paper: #f2f4f1;
  --paper-deep: #e6e9e3;
  --card: #fdfefc;
  --footer-bg: #e5eadf;
  --ink: #27302a;
  --ink-soft: #57625a;
  --ink-faint: #5d675f;
  --line: #dbdfd6;
  --line-strong: #bec5b8;

  --forest: #2b7449;
  --forest-deep: #1d5636;
  --forest-tint: #def0de;
  --meadow: #4f9426;
  --meadow-tint: #e7f5d2;
  --sky: #2c78b2;
  --sky-tint: #dcedfb;
  --ochre: #e6a112;
  --ochre-deep: #8f6210;
  --ochre-tint: #fbeec6;
  --clay: #bd451f;
  --clay-tint: #fae3d5;
  --water: #0f8074;
  --water-tint: #d6f2ea;
  --rate: #339cb5;
  --rate-tint: #dbeff6;
  --violet: #7355b4;
  --violet-tint: #ece5fb;
  --night: #44598c;
  --night-tint: #e5eaf6;
  --sun: #c88104;
  --sun-tint: #fdeec4;

  /* Schrift auf farbig gefüllten Flächen (Schaltflächen, Bebenplaketten,
     Ablaufnummern). */
  --on-accent: #fbfdfa;

  /* von den Skripten gelesen (Diagramme, Kompass, Batterie, Sparklines) */
  --c-grid: #e5e8e0;
  --c-grid-strong: #d2d7cb;
  --c-axis: #666d63;
  --c-face: #fdfefc;
  --c-face-line: #dde1d6;
  --c-mag-1: #6cab3c;
  --c-mag-2: #d68f15;
  --c-mag-3: #cc5430;
  --c-mag-4: #a02a15;

  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-data: "Space Grotesk", "Segoe UI", system-ui, sans-serif;

  --radius: 7px;
  --radius-s: 5px;
  --shadow: 0 1px 2px rgba(39, 48, 42, 0.05);
  /* Breite des Satzspiegels. Sie stand auf 1280 px, und auf einem
     1600 px breiten Fenster blieben damit links und rechts je 160 px
     leer — dazu noch der Innenabstand, zusammen fast 200 px Rand. Bei
     1460 px sind es 70 plus 34. Der Fließtext bleibt trotzdem lesbar:
     Absätze haben ihre eigene Begrenzung auf 68 bis 72 Zeichen (.sec-intro,
     .page-lead), es wachsen nur Kachelreihen, Diagramme und das Panorama —
     also genau das, was von Breite profitiert. */
  --container: 1460px;
  --pad: clamp(16px, 4vw, 34px);

  --fs-0: clamp(0.8rem, 0.76rem + 0.2vw, 0.88rem);
  --fs-1: clamp(0.92rem, 0.88rem + 0.25vw, 1.02rem);
  --fs-2: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --fs-3: clamp(1.35rem, 1.18rem + 0.95vw, 1.9rem);
  --fs-4: clamp(1.75rem, 1.45rem + 1.9vw, 2.8rem);
  --fs-hero: clamp(1.95rem, 1.42rem + 2.8vw, 3.35rem);

  /* Amtliche Warnfarben. Gelb, Orange und Rot sind wörtlich die des
     Warnsystems der GeoSphere Austria — eine eigene Warnfarbe zu wählen
     hieße, eine amtliche Angabe umzudeuten.

     Sie taugen aber nur als Fläche im Balken, nicht als Kante und nicht
     als Schrift: Reines Gelb steht mit 1,06 zu 1 gegen --card, Orange
     mit 1,58 — Balken, die man vom Papier nicht unterscheidet. Deshalb
     je ein dunklerer Kantenton (3,62 / 4,80 / 7,44 gegen --card, über
     den 3:1 für Bedienelemente), ein heller Flächenton für den Fall und
     ein Schriftton darauf (6,13 / 4,63 / 6,15).

     -orange-flaeche ist derselbe Ton wie --ochre-tint, -rot-flaeche
     derselbe wie --clay-tint. Sie stehen trotzdem unter eigenem Namen:
     Wer später die Warnfarbe verschiebt, soll nicht die Vorhersage-
     kacheln mitverschieben. */
  --warn-gelb: #ffff00;
  --warn-gelb-kante: #9a8500;
  --warn-gelb-flaeche: #fbf7d2;
  --warn-gelb-schrift: #6b5c00;
  --warn-orange: #ffc400;
  --warn-orange-kante: #96690b;
  --warn-orange-flaeche: #fbeec6;
  --warn-orange-schrift: #8f6210;
  --warn-rot: #ff0000;
  --warn-rot-kante: #a51e0a;
  --warn-rot-flaeche: #fae3d5;
  --warn-rot-schrift: #a3200a;
}


/* ---- Töne, dunkle Fassung -----------------------------------------------
   Kein Schwarz. Der Grund ist ein sehr dunkles Graugrün — dieselbe Familie
   wie das helle Steingrau, nur am anderen Ende. Reines Schwarz unter hellem
   Text flimmert beim Lesen, und zu einer Seite über Wiesen und Wald passt
   es ohnehin nicht.

   Umgekehrt gestapelt als in der hellen Fassung: Dort liegt --card heller
   als das Papier, hier auch — nur heißt heller jetzt „weniger dunkel“. Eine
   Karte hebt sich in beiden Fassungen vom Grund ab, sie tut es nur mit
   umgekehrtem Vorzeichen.

   Die Akzentfarben sind nicht dieselben. Ein Waldgrün von 2e7a4e steht auf
   dunklem Grund mit 2,1 zu 1 und ist als Schrift unlesbar; jede Farbe hat
   deshalb eine eigene helle Fassung, gerechnet auf mindestens 4,5 zu 1
   gegen --card. Gemessen: forest 6,8 · clay 6,1 · sky 7,1 · water 7,7 ·
   sun 8,2 · violet 5,9 · night 6,6 · ink-faint 6,5.

   --on-accent kippt mit: In der hellen Fassung steht helle Schrift auf
   gefülltem Grün, hier dunkle. Die Füllung ist ja jetzt die helle Fläche.

   Die drei amtlichen Warnfarben bleiben, wie sie sind — sie umzudeuten
   hieße, eine amtliche Angabe zu verändern. Nur Kante, Fläche und Schrift
   drumherum sind neu gerechnet.                                          */
:root[data-thema="dunkel"] {
  color-scheme: dark;

  --paper: #171b19;
  --paper-deep: #101412;
  --card: #1f2522;
  --footer-bg: #131714;
  --ink: #e7ece7;
  --ink-soft: #b0bab2;
  --ink-faint: #9fa9a1;
  --line: #2f3733;
  --line-strong: #46504a;

  --forest: #5cbe86;
  --forest-deep: #86d8a8;
  --forest-tint: #1c3527;
  --meadow: #93d45f;
  --meadow-tint: #26361f;
  --sky: #6ab7ea;
  --sky-tint: #17303f;
  --ochre: #e9b44b;
  --ochre-deep: #e6b043;
  --ochre-tint: #38300f;
  --clay: #f2845b;
  --clay-tint: #3d2419;
  --water: #45c9b5;
  --water-tint: #0f332e;
  --rate: #57c5df;
  --rate-tint: #113039;
  --violet: #ac90ea;
  --violet-tint: #2a2440;
  --night: #93a7dc;
  --night-tint: #1e2537;
  --sun: #f0b143;
  --sun-tint: #3a2c10;

  --on-accent: #0f1512;

  --c-grid: #2b322e;
  --c-grid-strong: #3b443e;
  --c-axis: #98a29a;
  --c-face: #1a201d;
  --c-face-line: #3b443e;
  --c-mag-1: #7fc24f;
  --c-mag-2: #e0a52c;
  --c-mag-3: #ee7a4f;
  --c-mag-4: #f0604a;

  /* Auf hellem Papier genügte ein Hauch Grau als Schatten. Auf dunklem
     Grund ist ein grauer Schatten heller als das, worauf er fällt — hier
     steht deshalb Schwarz, und kräftiger. */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45);

  --warn-gelb-kante: #d9c02e;
  --warn-gelb-flaeche: #38330e;
  --warn-gelb-schrift: #f0e08a;
  --warn-orange-kante: #e5a52c;
  --warn-orange-flaeche: #3a2c10;
  --warn-orange-schrift: #f5c46a;
  --warn-rot-kante: #ef6b4f;
  --warn-rot-flaeche: #3d2018;
  --warn-rot-schrift: #f8a08c;
}


/* ---- Grundlagen: Fließtext, Verweise, Überschriften, Container ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: 1.65;
  min-height: 100vh;
}
/* height:auto muss dazu: ohne das zieht ein height-Attribut das Bild auf
   seine volle Pixelhöhe, während max-width die Breite schon begrenzt hat —
   das WebCam-Bild stand so 1195 px breit und 2160 px hoch da.
   [hidden] braucht die eigene Zeile, weil display:block sonst die
   Browservorgabe [hidden]{display:none} schlägt. */
img { max-width: 100%; height: auto; display: block; }
img[hidden] { display: none; }
a { color: var(--forest); text-decoration: none; }
a:hover { color: var(--forest-deep); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 3px; }
::selection { background: rgba(201, 138, 45, 0.28); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.14; margin: 0; letter-spacing: 0; }
h4 { margin: 0; }
p { margin: 0 0 1em; }
iframe { border: 0; display: block; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
[id] { scroll-margin-top: 76px; }
.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }


/* ---- Kopfleiste: Marke, Menü, Nachtschalter ---- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 18px; min-height: 60px; padding-block: 7px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: 0; line-height: 1.1; white-space: nowrap;
}
.brand-sub {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-faint);
  text-transform: none; margin-top: 3px;
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
  color: var(--ink-soft); font-size: var(--fs-0); font-weight: 550;
  padding: 7px 10px; border-radius: 4px; letter-spacing: 0;
}
.nav a:hover { color: var(--forest-deep); background: var(--paper-deep); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--forest-deep); background: transparent; box-shadow: inset 0 -2px 0 var(--forest); border-radius: 0; }
.nav-toggle {
  display: none;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--ink); width: 42px; height: 38px; cursor: pointer; font-size: 17px;
}
/* Der Umschalter für hell und dunkel. Auf ihm steht, was man bekommt, wenn
   man drückt — in der hellen Fassung „Dunkel“, in der dunklen „Hell“. Was
   gerade gilt, sieht man ja an der Seite. Für Vorleseprogramme steht das
   noch einmal ausgeschrieben im aria-label, weil ein einzelnes Wort ohne
   das Bild daneben in beide Richtungen zu lesen wäre.
   Ohne JavaScript gibt es nichts umzuschalten; site.js deckt ihn erst auf. */
.thema-knopf {
  display: none; flex: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-deep);
  border: 1px solid var(--line-strong); border-radius: 5px;
  padding: 9px 11px; line-height: 1;
}
.thema-knopf.da { display: block; }
.thema-knopf:hover { color: var(--ink); border-color: var(--forest); }
@media (max-width: 1080px) {
  .nav-toggle { display: block; margin-left: 0; }
  .topbar-inner { gap: 10px; }
  /* Der Menüknopf gehört an den Rand, der Umschalter davor. Im Quelltext
     steht er hinter dem Menü, damit er auf breiten Fenstern rechts außen
     landet; auf schmalen zieht ihn order wieder nach vorn. */
  .thema-knopf { order: 1; margin-left: auto; }
  .nav-toggle { order: 2; }
}
/* Unter 460 px fällt der Ortszusatz weg und die Marke schrumpft — sonst
   passen Marke, Umschalter und Menüknopf nicht mehr nebeneinander. */
@media (max-width: 460px) {
  .brand-sub { display: none; }
  .brand svg { width: 32px; height: 32px; }
  .brand { gap: 9px; }
  .nav-toggle { width: 40px; }
  .thema-knopf { padding: 9px 8px; letter-spacing: 0.05em; }
}
/* Ab 1080 px abwärts wird das Menü zur Liste, die unter der Leiste
   aufklappt, sobald .open gesetzt ist. */
@media (max-width: 1080px) {
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--line-strong);
    padding: 8px var(--pad) 14px; box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--forest); }
}

/* ---- Hero der Startseite ----
   Titel, Untertitel und darunter das 7:1-Panorama randlos über die volle
   Browserbreite; die Bildunterschrift bleibt in Containerbreite. */
.hero { border-bottom: 1px solid var(--line); }
.hero-head { padding-block: clamp(26px, 4.5vw, 50px) clamp(16px, 2.6vw, 26px); }
.hero-head h1 { font-size: var(--fs-hero); font-weight: 600; }
.hero-head h1 em { font-style: italic; color: var(--forest-deep); }
/* Vor der Zeile stand ein 30 mal 2 Punkte großer ockerner Strich. Er sollte
   den Untertitel an den Titel binden und tat im Bild genau das Gegenteil:
   Aus „Wetterstation Gern“ und „seit 2013“ wurde ein Gedankenstrich mit
   zwei Hälften. Jetzt stehen die zwei Zeilen einfach untereinander. */
.hero-sub { margin: 10px 0 0; color: var(--ink-soft); font-size: var(--fs-2); }
.hero-figure { padding-bottom: clamp(18px, 3vw, 36px); }
.hero-photo { margin: 0; }
.hero-photo img {
  width: 100%; height: auto; display: block;
  border-block: 1px solid var(--line-strong);
}
.hero-photo figcaption {
  max-width: var(--container); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px;
  padding: 10px var(--pad) 0; font-size: 0.78rem; color: var(--ink-faint);
}
.hero-photo figcaption .num { color: var(--forest); }
/* Unter 700 px wäre der volle Streifen nur noch ein paar Pixel hoch: feste
   Höhe von 160 px, dafür seitlich wischbar. */
@media (max-width: 700px) {
  .hero-photo {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  /* Scrollbalken in den Seitenfarben statt im Grau des Browsers */
  .hero-photo::-webkit-scrollbar { height: 5px; }
  .hero-photo::-webkit-scrollbar-track { background: transparent; }
  .hero-photo::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
  .hero-photo img { height: 160px; width: auto; max-width: none; }
  .hero-photo figcaption::after { content: "↔ Panorama wischbar"; }
}

/* ---- Live-Streifen unter dem Hero: die vier wichtigsten Werte ---- */
.livestrip { border-bottom: 1px solid var(--line); background: var(--card); }
.livestrip-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px clamp(18px, 3vw, 40px);
  padding-block: 13px;
}
.livestrip #livestrip-data { display: contents; }
.livestrip .ls-label { font-size: 0.76rem; letter-spacing: 0; text-transform: none; color: var(--ink-faint); font-weight: 600; }
.livestrip .ls-item { font-size: var(--fs-0); color: var(--ink-soft); white-space: nowrap; }
.livestrip .ls-item b { font-family: var(--font-data); font-weight: 600; color: var(--ink); }
.livestrip .lsv-temp b { color: var(--clay); }
.livestrip .lsv-wind b { color: var(--forest); }
.livestrip .lsv-rain b { color: var(--water); }
.livestrip .lsv-press b { color: var(--ochre-deep); }
.livestrip .ls-time { margin-left: auto; font-size: 0.74rem; color: var(--ink-faint); }
@media (max-width: 720px) { .livestrip .ls-time { display: none; } }

/* ---- Seitenkopf der Unterseiten: Pfad, Titel, Vorspann ---- */
.page-head { border-bottom: 1px solid var(--line); }
.page-head-inner { padding-block: clamp(32px, 5.5vw, 60px) clamp(24px, 4vw, 40px); }
.page-head .crumb { font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0; text-transform: none; font-weight: 600; }
.page-head .crumb a { color: var(--ink-faint); }
.page-head .crumb a:hover { color: var(--forest); }
.page-head h1 { font-size: var(--fs-4); font-weight: 560; margin-top: 10px; }
.page-head .page-lead { color: var(--ink-soft); max-width: 72ch; margin: 12px 0 0; }

/* ---- Abschnitte samt Überschriftzeile mit Trennstrich ---- */
.section { padding-block: clamp(32px, 5.2vw, 60px); }
.section + .section { border-top: 1px solid var(--line); }
.section.alt { background: var(--paper-deep); border-top: 1px solid var(--line); }
/* Umbruch erlaubt. Ohne ihn sprengte „Rekord-Aufzeichnungen" samt dem
   Verweis „Alle Statistiken" bei 320 px den Satzspiegel: 184 px für die
   Überschrift, die als ein Wort nicht schmäler kann, 92 px für den
   Verweis mit white-space:nowrap, zweimal 14 px Abstand — 304 px in einem
   Container, der dort 288 px breit ist. Der Verweis stand dann bündig an
   der Fensterkante, während jede andere Zeile 16 px Rand hält. Mit
   flex-wrap rutscht er in die zweite Zeile und margin-left:auto hält ihn
   dort rechts. */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 14px;
  margin-bottom: clamp(18px, 3.4vw, 32px); }
.section-head h2 { font-size: var(--fs-3); font-weight: 600; }
.section-head .rule { flex: 1; height: 1px; background: var(--line-strong); align-self: center; }
.section-head .more { font-size: var(--fs-0); white-space: nowrap; font-weight: 600;
  margin-left: auto; }
.section-note { color: var(--ink-faint); font-size: var(--fs-0); margin-top: 14px; }

/* ---- Karten, eingebettete Fremdinhalte und das Kartenraster ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-pad { padding: clamp(16px, 3vw, 26px); }
.card-title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: var(--fs-1);
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.card-title small { color: var(--ink-faint); font-weight: 450; margin-left: auto; font-size: 0.76rem; text-align: right; }

.embed { position: relative; width: 100%; background: var(--paper-deep); display: block; }
/* Die Landkarten sind selbst das iframe; nur das Webcam-Bild liegt in
   einem Behälter und wird darin ausgerichtet. */
iframe.embed { border: 0; }
.embed > iframe, .embed > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.embed.r16x9 { aspect-ratio: 16 / 9; }
/* Springt für ein Bild ein, das nicht kommt — mit derselben Fläche, damit
   die Seite nicht zusammenzuckt. Im .embed füllt es den Rahmen, sonst gibt
   es sich selbst das 16:9 der Kamera. */
.bild-fehlt {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--paper-deep); color: var(--ink-faint);
  font-size: var(--fs-0); padding: 12px; aspect-ratio: 16 / 9;
}
.embed > .bild-fehlt { position: absolute; inset: 0; aspect-ratio: auto; }
.embed.r4x3 { aspect-ratio: 4 / 3; }
.embed.rwide { aspect-ratio: 1.94; }

.grid { display: grid; gap: clamp(14px, 2.4vw, 24px); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
  .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  /* bei ungerader Kartenzahl läuft die letzte über beide Spalten */
  .grid.cols-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Diese vollbreite Karte bekommt im Zweispalten-Band 16:9; einspaltig
   bleiben wieder alle Karten bei 4:3. */
@media (min-width: 721px) and (max-width: 1020px) {
  .grid.cols-3 > :last-child:nth-child(odd) .embed.r4x3 { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

/* ---- Schaltflächen, gefüllt und als Umriss ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-0);
  letter-spacing: 0.02em; color: var(--on-accent);
  background: var(--forest);
  border: 1px solid var(--forest-deep); border-radius: 6px; padding: 10px 18px; cursor: pointer;
}
.btn:hover { background: var(--forest-deep); color: var(--on-accent); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--forest-deep); border: 1px solid var(--line-strong); }
.btn.ghost:hover { border-color: var(--forest); background: var(--forest-tint); }

/* ---- Kacheln des Live-Bereichs ---------------------------------------
   Jede Kachel bleibt eine Kachel: eigene Fläche, Haarlinie ringsum, ein
   Hauch Schatten. Ein Versuch, alle zehn zu einem durchgehenden Bogen
   mit Trennlinien zusammenzuziehen, sah aus wie eine Tabelle — richtig
   geordnet und ohne jeden Atem.

   Weg sind dafür die zwei Stellen, an denen Farbe nur Farbe war: der
   drei Punkte starke Balken über jeder Karte und die pastellfarbenen
   Symbolkästchen. Ein Thermometer neben dem Wort „Temperatur“ sagt
   nichts, was nicht daneben steht.

   An ihre Stelle tritt der Kopfstreifen in der Farbe der Messgröße.
   Er ist größer als Balken und Kästchen zusammen, trägt aber die
   Beschriftung mit — Fläche, die Arbeit leistet, statt Fläche, die
   Fläche ist. Und die Farbe steht damit dreimal beisammen: im Streifen,
   in der Kurve unten und in der Marke, die zeigt, wo im heutigen Tag
   der Wert gerade liegt.

   Die Zahl selbst steht in Tinte. Sie ist die Auskunft; sie braucht
   keine Farbe, um aufzufallen, sie braucht Größe, und die hat sie
   jetzt.                                                              */
.tiles { display: grid; gap: clamp(12px, 1.8vw, 20px); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1120px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 840px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; min-height: 176px;
  --tile: var(--forest); --tile-tint: var(--forest-tint);
}
/* Der Kopfstreifen: links, was gemessen wird, rechts, worin. Die Einheit
   aus der Zahl herauszunehmen war der halbe Umbau — „27,2 °C“ mit
   kleingesetztem Anhängsel ist eine Beschriftung, „27,2“ allein unter
   einem Streifen mit der Aufschrift „°C“ ist ein Messwert.

   Die Einheit steht in --ink-soft und nicht in der Kachelfarbe: Auf dem
   getönten Grund hält --sun gegen --sun-tint nur 2,25 zu 1, und das ist
   für Schrift zu wenig. Die Farbe trägt der Streifen, nicht das Wort. */
.tile-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 15px 10px;
  background: var(--tile-tint); border-bottom: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.tile-head .einheit {
  font-family: var(--font-data); font-weight: 600; font-size: 0.78rem;
  color: var(--ink-soft); white-space: nowrap; flex: none;
}
.tile-body { padding: 13px 16px 8px; }
.tile-value {
  font-family: var(--font-data); font-weight: 600;
  font-size: clamp(1.95rem, 1.55rem + 1.7vw, 2.85rem);
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tile-value small { font-size: 0.42em; font-weight: 500; color: var(--ink-soft); margin-left: 5px; letter-spacing: 0; }
.tile-sub { font-size: 0.79rem; color: var(--ink-soft); margin-top: 7px; line-height: 1.45; }
.tile-sub b { color: var(--ink); font-weight: 600; }
.tile-minmax { display: flex; gap: 4px 14px; margin-top: 11px; font-size: 0.76rem; line-height: 1.4; color: var(--ink-soft); flex-wrap: wrap; }
/* Untereinander statt nebeneinander, wo zwei Angaben nebeneinander nicht
   passen — in der Windkachel stehen „Böe 17,6 km/h“ und „Stärkste Böe heute
   22,7 km/h um 08:20“ untereinander. */
.tile-minmax.gestapelt { display: grid; gap: 5px; }
.tile-minmax span b { font-family: var(--font-data); color: var(--ink); font-weight: 600; }

/* ---- Die Tagesspanne als Skala ----
   Vorher standen hier zwei Zeilen: „▲ Max 27,3 °C um 09:26“ und darunter
   „▼ Min 19,6 °C um 07:39“. Die Zahlen waren da, die Auskunft nicht: dass
   es gerade so warm ist wie heute noch nie, sieht man aus zwei Zeilen
   Text erst, wenn man sie mit der großen Zahl darüber vergleicht.

   Die Schiene läuft vom Tiefst- zum Höchstwert des Tages, die Marke sitzt
   auf dem Wert von jetzt. Ein Blick sagt, wo im heutigen Tag man steht —
   und die beiden Dreiecke, die nur Text verzierten, sind weg.          */
.tk-spanne { margin-top: 13px; }
.tk-skala {
  position: relative; height: 9px;
  border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong);
}
.tk-skala::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: var(--line-strong);
}
.tk-skala i {
  position: absolute; top: 0; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--tile); box-shadow: 0 0 0 2px var(--card);
}
.tk-enden {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 6px; font-size: 0.73rem; color: var(--ink-faint); line-height: 1.35;
}
.tk-enden b { font-family: var(--font-data); color: var(--ink); font-weight: 600; }
.tk-enden > span:last-child { text-align: right; }

/* Die Kurve nimmt sich, was in der Kachel übrig bleibt, und sitzt auf der
   Unterkante auf — über eine Haarlinie vom Text getrennt, quer über die
   ganze Zellenbreite. Im Raster sind alle Kacheln einer Reihe gleich hoch,
   und die höchste gab bisher den Ton an: in der Sonnenstrahlung stand über
   der Kurve eine Handbreit Nichts, weil die Luftqualität daneben drei
   Zeilen mehr trägt. Jetzt wächst dort die Kurve hinein, statt dass die
   Kachel leer läuft. 56 px bleiben das Mindestmaß. */
.tile-spark {
  margin-top: auto; flex: 1; display: flex; flex-direction: column;
  min-height: 56px; max-height: 130px;
  border-top: 1px solid var(--line); padding: 9px 0 10px;
}
.tile-spark .spark-flaeche { flex: 1; min-height: 40px; }
.tile-spark .spark-axis { flex: none; padding: 0 16px; }
.tile-spark svg { display: block; width: 100%; height: 100%; min-height: 40px; }
/* Steht nur eine Kachel je Reihe, gibt es kein leeres Feld zu füllen — dann
   verlängert die mitwachsende Kurve bloß die Seite. Auf dem Telefon bleibt
   sie deshalb bei ihren 56 px. */
@media (max-width: 520px) {
  .tile-spark { flex: none; max-height: none; height: 75px; }
  .tile-spark .spark-flaeche { flex: none; height: 56px; }
}
.dash-hint { font-size: var(--fs-0); color: var(--ink-faint); margin: 4px 0 14px; }
.tile-foot { font-size: 0.72rem; color: var(--ink-faint); padding: 0 16px 12px; }
/* Legende der Windkachel: dieselben Zeichen wie unter den großen Diagrammen,
   nur kleiner. Die Farbe ist die der Kachel, die Deckung der blassen Linie
   dieselbe wie im Bild (0,45) — sonst verspräche die Legende etwas anderes,
   als danebensteht. */
.spark-legende { display: flex; gap: 4px 14px; flex-wrap: wrap; padding-top: 6px; }
.spark-legende i {
  display: inline-block; width: 15px; height: 2.5px; border-radius: 2px;
  vertical-align: middle; margin-right: 6px; background: var(--tile);
}
.spark-legende i.blass { opacity: 0.45; }
.spark-legende { padding-left: 16px; padding-right: 16px; }

.tile.t-temp   { --tile: var(--clay);   --tile-tint: var(--clay-tint); }
.tile.t-hum    { --tile: var(--sky);    --tile-tint: var(--sky-tint); }
.tile.t-dew    { --tile: var(--meadow); --tile-tint: var(--meadow-tint); }
.tile.t-press  { --tile: var(--ochre-deep); --tile-tint: var(--ochre-tint); }
.tile.t-rain   { --tile: var(--water);  --tile-tint: var(--water-tint); }
.tile.t-rate   { --tile: var(--rate);   --tile-tint: var(--rate-tint); }
.tile.t-wind   { --tile: var(--forest); --tile-tint: var(--forest-tint); }
.tile.t-solar  { --tile: var(--sun);   --tile-tint: var(--sun-tint); }
.tile.t-uv     { --tile: var(--violet); --tile-tint: var(--violet-tint); }
.tile.t-air    { --tile: var(--night); --tile-tint: var(--night-tint); }

/* Wind und Luftqualität nehmen zwei Spalten: der Wind für die Kompassrose,
   die Luftqualität für ihre drei Nebenwerte. Zusammen geht die Reihe damit
   in jeder Spaltenzahl glatt auf — bei vier Spalten drei volle Reihen. */
.tile.t-wind, .tile.t-air { grid-column: span 2; }
@media (max-width: 520px) { .tile.t-wind, .tile.t-air { grid-column: auto; } }
/* Die Luftqualität rückt hinter den Wind, die vier schmalen Kacheln dahinter.
   Sie kommt aus einem eigenen Abruf und wurde deshalb immer ans Ende gehängt
   — damit standen die beiden doppelbreiten, inhaltsreichen Kacheln in
   verschiedenen Reihen, und weil alle Kacheln einer Reihe gleich hoch sind,
   zwangen sie ihren schmalen Nachbarn eine Handbreit leeres Feld auf.
   Nebeneinander füllen sie eine Reihe für sich, und Regen, Regenrate,
   Strahlung und UV teilen sich die letzte. Bleibt der Feinstaubsensor stumm,
   rücken die vier einfach auf; die Reihenfolge im Quelltext bleibt, wie sie
   ist. */
.tile.t-air { order: 1; }
.tile.t-rain, .tile.t-rate, .tile.t-solar, .tile.t-uv { order: 2; }
.windgrid { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.compass { width: 132px; height: 132px; }
.windnums { display: grid; gap: 2px; }
.windnums .tile-value { font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.15rem); }

.dash-status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 14px; font-size: 0.76rem; color: var(--ink-faint); }
.dash-status .ok { color: var(--forest); font-weight: 600; }
.dash-status .err { color: var(--clay); font-weight: 600; }

/* ---- Was nicht mehr frisch ist ----------------------------------------
   Eine Wetterstation, die schweigend vorgestern anzeigt, ist schlimmer als
   eine, die sagt, dass sie nichts hört. Diese Klasse setzen livedata.js und
   site.js an die Stand-Zeile, an das Laufband und an die Aufnahmezeit der
   Kamera, sobald die Messung ein Alter hat. Kein Alarmrot — die Zahlen
   stimmen ja, sie sind nur von vorhin; ein ockerner Punkt davor und eine
   ruhigere Farbe genügen, damit das Auge hängen bleibt.               */
.veraltet { color: var(--ochre-deep); }
/* Der Punkt steht nur an den zwei Zeilen, die eine Aussage sind — nicht an
   jedem Träger der Klasse. Auf .livestrip selbst säße er sonst als erstes
   Kind im Flexkasten und schwebte über der Zeile. */
.dash-status.veraltet, p.legal.veraltet { color: var(--ochre-deep); font-weight: 600; }
.dash-status.veraltet::before, p.legal.veraltet::before {
  content: "●"; font-size: 0.7em; margin-right: 6px; vertical-align: 0.12em;
  color: var(--ochre-deep);
}
.livestrip.veraltet { background: var(--paper-deep); }
.livestrip.veraltet .ls-label { color: var(--ochre-deep); }

/* ---- Vorhersage: sechs Tageskärtchen, darunter der gewählte Tag ausführlich ---- */
.fc-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.4vw, 16px); }
@media (max-width: 1080px) { .fc-days { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .fc-days { grid-template-columns: repeat(2, 1fr); } }
/* Jede Kachel ist eine Schaltfläche — deshalb müssen die Vorgaben des
   Browsers für <button> zurückgesetzt werden. */
.fc-day {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 14px 12px; text-align: center;
  display: flex; flex-direction: column; font: inherit; color: inherit;
  cursor: pointer; width: 100%; -webkit-appearance: none; appearance: none;
}
.fc-day .d { font-weight: 600; font-size: var(--fs-0); }
.fc-day .ic { margin: 9px 0 6px; color: var(--ink-soft); line-height: 0; }
.fc-day .ic svg { width: 38px; height: 38px; display: inline-block; }
.fc-day .tt { font-family: var(--font-data); font-weight: 640; font-size: 1.05rem; letter-spacing: -0.01em; }
.fc-day .tt small { color: var(--sky); font-weight: 500; }
.fc-day.today { background: var(--ochre-tint); border-color: var(--ochre); }
.fc-day.today .d { color: var(--ochre-deep); }
.fc-day.today .ic { color: var(--ochre-deep); }
/* Der Temperaturbalken: vom Tief- zum Höchstwert, auf einer Skala über alle
   sechs Tage. Sechs Zahlenpaare nebeneinander sagen nicht, welcher Tag der
   warme ist — sechs Balken auf einer Achse sagen es auf einen Blick. */
.fc-bar { display: block; position: relative; height: 6px; margin: 10px 1px 2px;
  border-radius: 3px; background: var(--line); }
.fc-bar i { position: absolute; top: 0; height: 6px; border-radius: 3px; overflow: hidden; }
.fc-bar u { position: absolute; top: 0; height: 6px; text-decoration: none;
  background: linear-gradient(90deg, var(--sky), var(--ochre) 55%, var(--clay)); }
/* Auf der ockernen Kachel für heute verschwände die Rinne in --line; dort
   trägt sie stattdessen eine Abdunklung der Kachelfarbe selbst. */
.fc-day.today .fc-bar { background: rgba(0, 0, 0, 0.09); }
.fc-day .nx { font-size: 0.72rem; color: var(--ink-soft); margin-top: 7px; line-height: 1.4; min-height: 2.8em; }
/* Die vier Zahlenzeilen unter dem Kurztext: links wofür, rechts der Wert.
   Zentriert standen sie in jeder Kachel anders — erst die zwei Spalten legen
   die sechs Kacheln übereinander lesbar nebeneinander. */
.fc-rows { display: grid; gap: 3px; margin-top: auto; padding-top: 9px;
  border-top: 1px solid var(--line); font-size: 0.71rem; }
.fc-rows > span { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.fc-rows i { font-style: normal; color: var(--ink-faint); text-align: left; }
.fc-rows b { font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink); text-align: right; }
.fc-blitz { position: absolute; right: -13px; top: -2px; font-size: 0.8rem; line-height: 1; }
.fc-day .ic { position: relative; }

/* Der gewählte Tag ist die einzige Kachel mit kräftigem Rand; „heute“
   bleibt zusätzlich ockern hinterlegt. */
.fc-day.gewaehlt { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.fc-day:hover { border-color: var(--line-strong); }
.fc-day:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* ---- Der aufgeschlüsselte Tag ---- */
.fc-detail { margin-top: clamp(14px, 2vw, 22px); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(13px, 1.8vw, 20px); }
.fcd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.fcd-head h3 { font-family: var(--font-display); font-size: var(--fs-2); margin: 0; }
.fcd-himmel { font-size: var(--fs-0); color: var(--ink-faint); }
.fcd-halves { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 30px); }
@media (max-width: 700px) { .fcd-halves { grid-template-columns: 1fr; } }
/* Nur die Überschrift der Nachthälfte bekommt ihre Farbe. Färbte man die
   ganze Spalte, läse sich die halbe Vorhersage wie ein Link. */
.fcd-half.nacht .fcd-title { color: var(--night); }
.fcd-title { display: flex; align-items: center; gap: 8px; font-weight: 600;
  font-size: var(--fs-1); margin-bottom: 6px; }
.fcd-title svg { width: 26px; height: 26px; flex: none; }
.fcd-half p { font-size: var(--fs-0); color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }
/* Jeder Wert steht in einem eigenen kleinen Feld, Beschriftung darüber. Zuvor
   war es eine zweispaltige Liste über die halbe Seitenbreite — die Zahl klebte
   am rechten Rand, ihr Name am linken, und dazwischen lag nichts. */
.fcd-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px 16px; margin: 0; }
.fcd-liste > div { border-top: 1px solid var(--line); padding-top: 6px; }
.fcd-liste > div.weit { grid-column: span 2; }
/* Unter etwa 360 px passt nur noch eine Spalte ins Raster. Ein Feld über zwei
   Spalten legte dann eine zweite an, die niemand mehr füllt — und die Tafel
   liefe seitlich aus der Karte. */
@media (max-width: 360px) { .fcd-liste > div.weit { grid-column: span 1; } }
.fcd-liste dt { font-size: 0.74rem; color: var(--ink-faint); }
.fcd-liste dd { margin: 1px 0 0; font-size: var(--fs-0); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }

/* ---- Erdbeben-Liste ----
   Zwei Beben nebeneinander, unter 700 px eines; die Trennlinien laufen
   dabei mit. Einspaltig bliebe rechts vom Ortsnamen die halbe Zeile leer. */
.quake-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quake-list li {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
  padding: 11px clamp(12px, 1.8vw, 18px);
  border-bottom: 1px solid var(--line); font-size: var(--fs-0);
}
.quake-list li:nth-child(odd) { border-right: 1px solid var(--line); }
.quake-list li:nth-last-child(-n+2) { border-bottom: 0; }
.quake-list .mag {
  font-family: var(--font-data); font-weight: 600; color: var(--on-accent);
  flex: 0 0 auto; min-width: 44px; text-align: center; padding: 2px 6px; border-radius: 6px;
}
.quake-list .q-body { min-width: 0; }
.quake-list .place { display: block; color: var(--ink); font-weight: 550; }
.quake-list .q-meta { display: block; margin-top: 1px; color: var(--ink-faint); font-size: 0.78rem; }
.quake-leer { color: var(--ink-faint); grid-column: 1 / -1; border-bottom: 0 !important; border-right: 0 !important; }
@media (max-width: 700px) {
  .quake-list { grid-template-columns: minmax(0, 1fr); }
  .quake-list li:nth-child(odd) { border-right: 0; }
  .quake-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .quake-list li:last-child { border-bottom: 0; }
}

/* ---- Diagramme: Rahmen, Legende und die Umschalter darüber ---- */
.chartbox { padding: 14px 16px 8px; }
.chartbox svg { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 16px 14px; font-size: 0.76rem; color: var(--ink-soft); }
.chart-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
/* Legende der Jahresmittel-Karte. Sie sitzt in .card-pad, das den seitlichen
   Abstand schon mitbringt — deshalb ohne eigenes padding, anders als
   .chart-legend, die direkt an der Kartenkante steht. */
.ym-legend { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; font-size: 0.76rem; color: var(--ink-soft); }
.ym-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 7px; }
/* Die Strichelung der Mittellinie auch in der Legende: ein durchgezogener
   Balken neben einer gestrichelten Linie im Diagramm sagt das Falsche. */
.ym-legend i.strich {
  height: 0; border-top: 3px dashed var(--ochre-deep);
  background: none !important; border-radius: 0;
}
.ym-legend b { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.chart-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-tabs button {
  font: 600 var(--fs-0) var(--font-body); color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 7px 14px; cursor: pointer;
}
.chart-tabs button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest-deep); color: var(--on-accent); }

/* ---- Rekordtafel; .hot/.cold/.rain/.wind setzen --accent --------------
   Dieselbe Bogenform wie die Kacheln des Live-Bereichs: ein Blatt statt
   vier Karten, Haarlinien statt Rahmen und Schatten, der vier Punkte
   starke Farbbalken an der linken Kante weg. Hier bleibt die große Zahl
   in der Akzentfarbe — bei einem Rekord ist der Ausschlag die Aussage,
   und Rot für die Hitze und Blau für den Frost sagen etwas, was die
   zehn Kachelfarben nicht sagten.

   Die Nebenrekorde standen als Blockabsätze untereinander: Beschriftung,
   darunter der Wert. Das war die Notlösung dafür, dass „34,6 °C ·
   8.8.2015 und 13.7.2021“ neben seiner Beschriftung aus der Karte lief.
   Als Tabellenzeile mit dem Wert rechts geht beides nebeneinander, und
   passt es einmal nicht, bricht der Wert unter die Beschriftung und
   bleibt trotzdem rechtsbündig.                                        */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
/* Vier Spalten erst ab 1200 px. Bei 1100 blieben je Spalte 235 Punkte,
   und „THSW-Index max“ mit „48 °C am 28.6.2026“ daneben braucht 234. */
@media (max-width: 1200px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .stat-grid { grid-template-columns: 1fr; } }
.stat { background: var(--card); display: flex; flex-direction: column; --accent: var(--forest); }
.stat-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 16px 9px; border-bottom: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.stat-kopf .einheit {
  font-family: var(--font-data); font-weight: 600; font-size: 0.78rem;
  color: var(--accent); white-space: nowrap; flex: none;
}
.stat-body { padding: 15px 16px 15px; }
.stat .stat-value {
  font-family: var(--font-data); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(1.95rem, 1.55rem + 1.7vw, 2.85rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--accent);
}
.stat .stat-date { color: var(--ink-soft); font-size: var(--fs-0); font-variant-numeric: tabular-nums; margin-top: 9px; }
.stat ul { list-style: none; margin: 0; padding: 0; }
/* 0,8 rem und nicht --fs-0: Das wächst auf breiten Fenstern bis 0,88 rem,
   und damit brauchte „THSW-Index min“ samt „−25,4 °C am 1.3.2018“ mehr als
   die 271 Punkte, die eine Viertelspalte bei 1280 px innen hat — genau eine
   Zeile der ganzen Tafel brach um. */
.stat li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding: 9px 16px; border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45;
}
.stat li b {
  margin-left: auto; text-align: right; color: var(--ink);
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600;
}
.stat.hot { --accent: var(--clay); }
.stat.cold { --accent: var(--sky); }
.stat.rain { --accent: var(--water); }
.stat.wind { --accent: var(--forest); }

/* ---- Heute im Vergleich: der heutige Wert im Band aus zwölf Jahren ----
   Zwei Zeilen auf einer gemeinsamen Skala, damit sich Höchst- und Tiefstwert
   nebeneinander lesen lassen. Gezeichnet wird mit Kästen in Prozent statt mit
   SVG: so bleibt die Schrift bei jeder Breite gleich groß. */
.kl-satz { margin: 0 0 clamp(14px, 2.4vw, 22px); font-size: var(--fs-1); }
.kl-satz b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* Der Plot: zwei Zeilen und darunter eine Achse, die für beide gilt. Die
   Netzlinien der Zeilen stehen an denselben Stellen wie die Zahlen der
   Achse — erst dadurch bedeutet eine Stelle im Balken einen Wert. */
.kl-plot { position: relative; }
/* Die Linien reichen vom Kopf der ersten Zeile bis genau an die Achse: 22 px
   ist deren Höhe, also der Streifen, in dem nur noch die Zahlen stehen. */
.kl-netz { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--line); }
.kl-row { position: relative; }
.kl-row + .kl-row { margin-top: clamp(18px, 2.8vw, 26px); }
/* Beschriftung und Fußzeile decken die Netzlinien ab. Der Kasten der Zeile ist
   breiter als ihr Text, deshalb liegt die Farbe auf dem inneren <span> — sonst
   wäre rechts daneben ein Streifen Karte ohne Linien. */
.kl-row .kl-name { font-weight: 600; font-size: var(--fs-0); margin-bottom: 9px; }
.kl-row .kl-name span { background: var(--card); padding-right: 8px; }
/* Nur wo die Marke steht, wird Platz für ihre Zahl gebraucht — sie sitzt über
   dem Balken und liefe bei einem Wert am linken Rand sonst in die
   Zeilenüberschrift. Ohne Marke wäre die Lücke grundlos. */
.kl-row.mit-marke .kl-name { margin-bottom: 25px; }
.kl-track { position: relative; height: 26px; }
/* <i> ist hier nur ein Kasten ohne eigene Bedeutung — die Schrägstellung, die
   der Browser ihm mitgibt, gilt es für die Zahl der Marke abzustellen. */
.kl-track > i { position: absolute; display: block; font-style: normal; }
.kl-row.hoch { --accent: var(--clay); --accent-tint: var(--clay-tint); }
.kl-row.tief { --accent: var(--sky); --accent-tint: var(--sky-tint); }
/* Die ganze Spanne als Strich mit Endkappen. Ein voller Balken wie früher
   behauptete überall dasselbe Gewicht; hier trägt der Kasten das Übliche und
   der Strich nur, wie weit es einzelne Jahre getrieben haben. */
.kl-spanne { top: 12px; height: 2px; background: var(--accent, var(--forest)); opacity: 0.45; }
.kl-spanne::before, .kl-spanne::after {
  content: ""; position: absolute; top: -5px; width: 2px; height: 12px;
  background: var(--accent, var(--forest));
}
.kl-spanne::before { left: 0; }
.kl-spanne::after { right: 0; }
.kl-band {
  top: 3px; height: 20px; border-radius: 3px;
  background: var(--accent-tint, var(--forest-tint));
  box-shadow: inset 0 0 0 1px var(--accent, var(--forest));
}
.kl-mittel { top: 0; width: 2px; height: 26px; margin-left: -1px; border-radius: 1px;
  background: var(--accent, var(--forest)); }

/* Die Marke für heute: ein Stift mit der Zahl darüber. Sie darf über den
   Rand des Balkens hinausragen, deshalb steht der Wert in einem eigenen
   Kasten mit translate statt in der Breite des Stifts. */
.kl-jetzt { top: -3px; width: 3px; height: 32px; margin-left: -1.5px; border-radius: 2px;
  background: var(--forest-deep); }
.kl-jetzt b {
  position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: var(--fs-0); white-space: nowrap; color: var(--forest-deep);
}
.kl-fuss { position: relative; display: flex; flex-wrap: wrap; gap: 3px 20px;
  margin-top: 9px; padding-top: 3px; background: var(--card);
  font-size: var(--fs-0); color: var(--ink-faint); }
.kl-fuss b { color: var(--ink); font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Die Achse: kurze Striche mit ihrer Zahl darunter, die Einheit einmal rechts.
   Der Kasten ist so hoch wie Strich plus Zahl, die Zahl selbst sitzt absolut —
   sonst schöbe die breiteste Beschriftung die Striche auseinander. */
.kl-achse { position: relative; height: 22px; margin-top: 7px;
  border-top: 1px solid var(--line-strong); }
.kl-achse i { position: absolute; top: 0; width: 1px; height: 4px;
  background: var(--line-strong); font-style: normal; }
.kl-achse i b {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: 0.74rem; color: var(--ink-faint);
}
/* Die letzte Beschriftung endet am Strich statt über ihm zu stehen — sonst
   ragte sie um ihre halbe Breite über die Karte hinaus. Sie trägt die
   Einheit gleich mit; das eigene .kl-einheit am rechten Rand ist deshalb
   weg, es lag ohnehin unter dieser Zahl. */
.kl-achse i.letzter b { left: auto; right: 0; transform: none; white-space: nowrap; }

.kl-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  margin: clamp(14px, 2.2vw, 20px) 0 10px; font-size: var(--fs-0); color: var(--ink-soft); }
.kl-legende span { display: inline-flex; align-items: center; gap: 7px; }
.kl-key { width: 16px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
/* Die Legendenfelder tragen die Farben der beiden Zeilen: das Band als
   Verlauf von Blau nach Rot, weil es in der oberen Zeile rot und in der
   unteren blau steht. */
.kl-key.band { background: linear-gradient(90deg, var(--sky-tint), var(--clay-tint));
  box-shadow: inset 0 0 0 1px var(--line-strong); }
.kl-key.spanne { height: 2px; background: linear-gradient(90deg, var(--sky), var(--clay)); }
.kl-key.mittel { width: 2px; height: 14px; background: var(--ochre-deep); }
.kl-key.jetzt { width: 3px; height: 14px; background: var(--forest-deep); }

/* ---- Kenntage des laufenden Jahres ----
   Fünf Karten, von kalt nach warm geordnet. Jede trägt einen Balken in drei
   Lagen: das helle Feld ist der Stationswert bis zum selben Datum, der
   dunkle Riegel darin das laufende Jahr, der Strich das ganze Jahr im
   Mittel.

   Jede Karte hat ihren eigenen Maßstab. Eine gemeinsame Skala war der erste
   Gedanke — 71 Frosttage und 6 Tropennächte nebeneinander drücken die
   Tropennächte auf zwei Punkte Länge zusammen, und der Vergleich, um den es
   geht, ist ausgerechnet dort nicht mehr zu sehen. Dass die Maßstäbe
   getrennt sind, steht darum auch unter der Reihe. */
.kt-reihe { display: grid; gap: clamp(12px, 1.8vw, 20px); grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1180px) { .kt-reihe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .kt-reihe { grid-template-columns: repeat(2, 1fr); }
  /* Die fünfte Karte allein in der dritten Reihe sähe wie ein Rest aus.
     Die Regel steht nur hier: Bei drei Spalten stünden fünf Karten als 3
     und 2, und eine über die volle Breite gezogene fünfte wäre dort falsch. */
  .kt-reihe > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 430px) { .kt-reihe { grid-template-columns: 1fr; } }

.kt-karte { padding: clamp(14px, 2.4vw, 20px); position: relative; }
.kt-karte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--kt-akzent, var(--forest)); border-radius: 4px 0 0 4px; }
/* Der Farbbogen läuft mit der Temperatur: Himmelblau, Nachtblau, Ocker, Ton,
   Violett. Alle fünf sind Marken aus :root, keine neue Farbe. --kt-akzent
   trägt Schrift und muss dafür dunkel genug sein — Ocker deshalb in der
   tiefen Fassung; --kt-balken trägt nur Fläche und darf leuchten. */
.kt-frost  { --kt-akzent: var(--sky);        --kt-balken: var(--sky);    --kt-feld: var(--sky-tint); }
.kt-eis    { --kt-akzent: var(--night);      --kt-balken: var(--night);  --kt-feld: var(--night-tint); }
.kt-sommer { --kt-akzent: var(--ochre-deep); --kt-balken: var(--ochre);  --kt-feld: var(--ochre-tint); }
.kt-hitze  { --kt-akzent: var(--clay);       --kt-balken: var(--clay);   --kt-feld: var(--clay-tint); }
.kt-tropen { --kt-akzent: var(--violet);     --kt-balken: var(--violet); --kt-feld: var(--violet-tint); }

.kt-name { font-size: var(--fs-1); font-weight: 600; margin: 0; }
.kt-def { color: var(--ink-faint); font-size: 0.76rem; margin: 2px 0 0; }
.kt-zahl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.kt-zahl b { font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-weight: 640; letter-spacing: -0.018em; line-height: 1;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem); color: var(--kt-akzent, var(--ink)); }
.kt-diff { font-size: var(--fs-0); color: var(--ink-soft); }

.kt-spur { position: relative; height: 20px; margin: 12px 0 9px;
  background: var(--paper-deep); border-radius: 4px; overflow: hidden; }
.kt-spur > i { position: absolute; display: block; font-style: normal; }
.kt-feld { top: 0; left: 0; height: 20px; background: var(--kt-feld, var(--paper-deep)); }
.kt-ist { top: 6px; left: 0; height: 8px; background: var(--kt-balken, var(--forest));
  border-radius: 0 3px 3px 0; }
.kt-jahr { top: 0; width: 2px; height: 20px; margin-left: -1px;
  background: var(--ink-soft); opacity: 0.55; }

.kt-fuss { margin: 0; font-size: var(--fs-0); color: var(--ink-soft); }
.kt-fuss b { color: var(--ink); font-family: var(--font-data);
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Ruhende Karte: nichts heuer und nichts üblich. Sie bleibt stehen — dass es
   im Jänner noch keinen Hitzetag gibt, ist eine Auskunft und kein Loch —,
   tritt aber zurück, damit die Reihe nicht fünfmal gleich laut ist. */
.kt-karte.kt-ruht { --kt-akzent: var(--line-strong); }
.kt-karte.kt-ruht .kt-zahl b { color: var(--ink-faint); }

.kt-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  margin: clamp(12px, 2vw, 18px) 0 8px; font-size: 0.76rem; color: var(--ink-soft); }
.kt-legende span { display: inline-flex; align-items: center; gap: 7px; }
.kt-key { width: 16px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.kt-key.feld { background: linear-gradient(90deg, var(--sky-tint), var(--clay-tint));
  border: 1px solid var(--line); }
.kt-key.ist { height: 8px; background: linear-gradient(90deg, var(--sky), var(--clay)); }
.kt-key.jahr { width: 2px; height: 14px; background: var(--ink-soft); border-radius: 0; }

/* ---- Monatsgitter der History-Seite ----
   Vierzehn Jahre mal zwölf Monate. Auf schmalen Geräten wären die Kacheln zu
   klein für ihre Zahl, deshalb rollt die Tafel in ihrem eigenen Kasten —
   die Seite selbst bekommt keinen Querlauf. */
.klg-schalter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.klg-schalter button {
  font: inherit; font-size: var(--fs-0); font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line);
  -webkit-appearance: none; appearance: none;
}
.klg-schalter button:hover { border-color: var(--line-strong); }
.klg-schalter button.gewaehlt { background: var(--forest); border-color: var(--forest); color: var(--on-accent); }
.klg-rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.klg-tafel { min-width: 620px; display: grid; gap: 3px; }
.klg-zeile { display: grid; grid-template-columns: 3.2em repeat(12, 1fr); gap: 3px; align-items: stretch; }
.klg-jahr { font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; }
.klg-zelle {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 0.74rem; text-align: center; padding: 7px 2px; border-radius: 4px;
  background: var(--c-face); color: var(--ink); cursor: default;
}
.klg-kopf .klg-zelle { background: none; color: var(--ink-faint); font-weight: 600; padding: 0 2px 4px; }
/* Eine Kachel ohne Wert bekommt gar keine Fläche, nur einen gestrichelten
   Rahmen. Mit Fläche sähe sie aus wie ein Monat auf dem Stationsmittel. */
.klg-zelle.leer { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-faint); }
.klg-legende { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 14px 0 0; font-size: var(--fs-0); color: var(--ink-soft); }
.klg-legende i { width: 26px; height: 12px; display: inline-block; }
.klg-legende i:first-of-type { border-radius: 3px 0 0 3px; }
.klg-legende i:last-of-type { border-radius: 0 3px 3px 0; }
.klg-legende span:first-child { margin-right: 6px; }
.klg-legende span:last-child { margin-left: 6px; }

/* Wasserbilanz: dieselbe Bauart wie das Monatsgitter darüber, damit auf
   einer Seite nicht zwei Gitter verschieden aussehen und verschieden
   drucken. Bewegt wird nichts — ein Übergang auf 156 Kacheln flackerte bei
   jedem Neuzeichnen. */
.wb-rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wb-tafel { min-width: 620px; display: grid; gap: 3px; }
.wb-zeile { display: grid; grid-template-columns: 3.2em repeat(12, 1fr); gap: 3px; align-items: stretch; }
.wb-jahr {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 0.72rem; color: var(--ink-faint); display: flex; align-items: center;
}
.wb-zelle {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 0.66rem; text-align: center; padding: 5px 2px;
  border-radius: var(--radius-s); line-height: 1.25;
}
.wb-kopf .wb-zelle { background: none; color: var(--ink-faint); font-weight: 600; padding: 0 2px 4px; }
.wb-zelle.leer { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-faint); }
.wb-legende {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--ink-faint); margin: 12px 0 0;
}
.wb-legende span { display: inline-flex; align-items: center; gap: 6px; }
.wb-legende i { width: 26px; height: 12px; display: inline-block; border-radius: 3px; }
/* Die Flächenmarken der Kurvenlegende stehen für die getönte Fläche
   zwischen den Kurven, nicht für die Linie — deshalb dieselbe Deckung wie
   dort und keine volle Farbe. */
.wb-legende i.flaeche { opacity: 0.22; }
.wb-skala i { border-radius: 0; }
.wb-skala i:first-of-type { border-radius: 3px 0 0 3px; }
.wb-skala i:last-of-type { border-radius: 0 3px 3px 0; }
.wb-skala span:first-child { margin-right: 6px; }
.wb-skala span:last-child { margin-left: 6px; }
.wb-satz { font-size: var(--fs-0); color: var(--ink); margin: 16px 0 0; max-width: 62ch; }
.wb-satz[hidden] { display: none; }

/* ---- Rekordhalter-Kalender ----
   366 Kacheln, eine je Kalendertag, eingefärbt nach dem Jahr, das den Rekord
   dieses Tages hält. Die vierzehn Farbstufen mischt klima.js zur Laufzeit und
   legt sie als --krk-c0 … --krk-cN auf .krk — die Kachel trägt deshalb
   var(--krk-c7) und nicht den fertigen Farbwert: Es sind 366 Kacheln auf
   vierzehn Farben, der Wert stünde sonst bis zu 51-mal wörtlich im Dokument. */
.krk-schalter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.krk-schalter button {
  font: inherit; font-size: var(--fs-0); font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line);
  -webkit-appearance: none; appearance: none;
}
.krk-schalter button:hover { border-color: var(--line-strong); }
.krk-schalter button.gewaehlt { background: var(--forest); border-color: var(--forest); color: var(--on-accent); }

/* Die Lesezeile steht über dem Gitter und behält den zuletzt gelesenen Wert.
   Die Mindesthöhe ist kein Schmuck: ohne sie springt das ganze Gitter, sobald
   ein kurzer Text von einem langen abgelöst wird. */
.krk-lesung { min-height: 2.9em; font-size: var(--fs-1); color: var(--ink); margin: 0 0 12px; }

/* Eine Zellenliste, zwei Anordnungen: ab 561 px zwölf Zeilen zu 31 Spalten,
   darunter gedreht 31 Zeilen zu 12 Spalten. Gedreht und nicht in einem eigenen
   Querlauf wie .klg-tafel — dort sind es zwölf Spalten, hier 31; bei 390 px
   wäre eine Kachel 12 px breit und damit kleiner als eine Fingerkuppe. Die
   gedrehte Lage kostet Höhe, aber ein Telefon rollt ohnehin senkrecht. */
/* Kein align-items: center auf der Tafel. Die Monatsspalte muss sich über
   die volle Höhe des Gitters spannen, sonst stehen ihre zwölf Zeilen über
   ihrer eigenen Texthöhe und die Beschriftung wandert gegenüber den
   Kacheln aus — beim ersten Anlauf lag „Jän" neben dem Februar. */
.krk-tafel { display: grid; grid-template-areas: "ecke tage" "monate gitter";
  grid-template-columns: auto 1fr; gap: 4px 6px; align-items: stretch; }
.krk-ecke { grid-area: ecke; }
.krk-monate { grid-area: monate; display: grid; grid-template-rows: repeat(12, 1fr);
  row-gap: 4px; font-size: 0.68rem; color: var(--ink-faint); padding-right: 2px; }
.krk-monate span { display: flex; align-items: center; justify-content: flex-end; }
.krk-tage { grid-area: tage; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr));
  column-gap: 2px; font-size: 0.66rem; color: var(--ink-faint); align-items: end; }
.krk-tage span { text-align: center; }
.krk-gitter { grid-area: gitter; display: grid; grid-auto-flow: row;
  grid-template-columns: repeat(31, minmax(0, 1fr)); row-gap: 4px; column-gap: 2px;
  max-width: 1080px; }
/* Die Monatsgrenze steckt in der Fuge: quer über die Monate doppelt so breit
   wie zwischen zwei Nachbartagen. Trennstriche wären ein drittes
   Liniensystem neben Fuge und Beschriftung. */

.krk-tag { height: clamp(13px, 1.9vw, 26px); border: 0; padding: 0; border-radius: 2px;
  cursor: pointer; -webkit-appearance: none; appearance: none; position: relative;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
/* Der Fokusring der Seite (--ochre) steht auf der hellsten Kachel mit 1,62 zu 1
   und ist dort unsichtbar. Deshalb ein Doppelring: der dunkle trägt auf hellen
   Kacheln (9,96), der helle auf dunklen (9,80). Auf jeder der 28 Farben ist
   mindestens einer der beiden sichtbar. */
.krk-tag:hover, .krk-tag:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--card); z-index: 2;
}
/* Schraffur und nicht blassere Farbe: eine blassere Kachel sähe aus wie ein
   anderes Jahr. */
.krk-duenn::after { content: ""; position: absolute; inset: 0; border-radius: 2px;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 2px, transparent 2px 4px); }
.krk-leer { background: none; border: 0; pointer-events: none; }
.krk-ohne { background: none; box-shadow: inset 0 0 0 1px var(--line); }

/* Die Legende ist die Verteilung selbst — vierzehn Säulen, eine je Jahr. Ein
   Verlaufsbalken wie bei .klg-legende verschenkte genau die Aussage. */
.krk-legende { margin-top: 18px; }
.krk-saeulen { position: relative; display: flex; align-items: flex-end; gap: 4px;
  height: 96px; padding-top: 14px; }
.krk-saeule { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; }
.krk-saeule b { font-size: 0.64rem; font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 2px; }
.krk-saeule i { display: block; width: 100%; border-radius: 2px 2px 0 0; min-height: 1px; }
.krk-saeule em { font-style: normal; font-size: 0.64rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; margin-top: 3px; }
.krk-bezug { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink-soft);
  opacity: 0.5; pointer-events: none; }
.krk-fuss { margin: 8px 0 0; font-size: var(--fs-0); color: var(--ink-faint); }
.krk-satz { margin: 14px 0 0; font-size: var(--fs-0); color: var(--ink-faint); max-width: 68ch; }

@media (max-width: 560px) {
  .krk-tafel { grid-template-areas: "ecke monate" "tage gitter"; }
  .krk-monate { grid-template-rows: none; grid-template-columns: repeat(12, 1fr);
    column-gap: 4px; row-gap: 0; padding-right: 0; }
  .krk-monate span { justify-content: center; }
  .krk-tage { grid-template-columns: none; grid-template-rows: repeat(31, minmax(0, 1fr));
    row-gap: 2px; column-gap: 0; align-items: center; text-align: right; padding-right: 2px; }
  .krk-gitter { grid-auto-flow: column; grid-template-columns: none;
    grid-template-rows: repeat(31, minmax(0, 1fr)); column-gap: 4px; row-gap: 2px; }
  .krk-tag { height: clamp(17px, 5.2vw, 22px); }
}

/* ---- Fotogalerie und die Großansicht beim Anklicken ---- */
.gallery { display: grid; gap: clamp(14px, 2.4vw, 26px); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }
.shot { cursor: zoom-in; display: block; }
.shot:hover { text-decoration: none; }
.shot figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; padding: 9px; }
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.shot figcaption { display: flex; align-items: baseline; gap: 10px; padding: 10px 5px 3px; font-size: var(--fs-0); color: var(--ink-soft); }
.shot figcaption b { color: var(--ink); font-weight: 600; }
/* Quellenangabe in einer Bildunterschrift. Die Klasse stand in mail.htm,
   ohne dass es je eine Regel dazu gab. Weil die Unterschrift eine
   Flex-Zeile mit 10 px Lücke ist, wurde die Angabe zu einem eigenen
   Element — und das Komma davor stand einsam vor der Lücke. Jetzt rückt
   sie ans rechte Ende und tritt farblich zurück, das Komma entfällt. */
.shot figcaption .quelle { margin-left: auto; color: var(--ink-faint); }
.shot.wide { grid-column: 1 / -1; }
.shot.wide img { aspect-ratio: auto; }

.lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(28, 33, 28, 0.93);
  align-items: center; justify-content: center; padding: 4vmin;
}
.lightbox.open { display: flex; }
/* Das Bild wächst nie über seine echte Auflösung hinaus, sonst wäre die
   Großansicht nur unschärfer. --lb-w und --lb-h setzt site.js aus
   naturalWidth und naturalHeight des geladenen Bildes. */
.lightbox img {
  max-width: min(94vw, var(--lb-w, 94vw));
  max-height: min(88vh, var(--lb-h, 88vh));
  width: auto; height: auto; object-fit: contain; border-radius: 6px;
}
.lightbox figcaption { position: absolute; bottom: 3vmin; left: 0; right: 0; text-align: center; color: #e8e6da; font-size: var(--fs-0); padding-inline: 4vmin; }
.lightbox .lb-close {
  position: absolute; top: 18px; right: 22px;
  background: none; border: 1px solid rgba(232, 230, 218, 0.5); color: #e8e6da;
  border-radius: 50%; width: 44px; height: 44px; font-size: 19px; cursor: pointer;
}
.lightbox .lb-close:hover { border-color: var(--ochre); color: var(--ochre); }
.lightbox .lb-close:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
/* hält die Seite dahinter fest, solange die Großansicht offen ist */
body.lb-open { overflow: hidden; }

/* ---- Wettertagebuch: Zeitstrahl mit Punkt je Eintrag ---- */
.timeline { position: relative; max-width: 860px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong); }
.entry { position: relative; padding: 0 0 32px 42px; }
.entry::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--forest);
}
.entry time { font-family: var(--font-data); font-weight: 600; color: var(--ochre-deep); font-size: var(--fs-0); letter-spacing: 0.05em; }
.entry h2 { font-size: var(--fs-2); font-weight: 600; margin: 4px 0 8px; font-family: var(--font-body); }
.entry .entry-body { color: var(--ink-soft); font-size: var(--fs-1); }
.entry .entry-body p:last-child { margin-bottom: 0; }

/* ---- Archiv: aufklappbare Jahre mit Monatsfeldern darin ---- */
.year-block { margin-bottom: 14px; }
.year-block summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 15px 20px; user-select: none; }
.year-block summary::-webkit-details-marker { display: none; }
.year-block summary .y { font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; min-width: 64px; color: var(--forest-deep); }
.year-block summary .meta { color: var(--ink-faint); font-size: var(--fs-0); }
.year-block summary .chev { margin-left: auto; color: var(--ink-faint); transition: transform 0.2s; font-size: 13px; }
.year-block[open] summary .chev { transform: rotate(180deg); }
.year-block[open] summary { border-bottom: 1px solid var(--line); }
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; padding: 16px 20px 20px; }
@media (max-width: 900px) { .months { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .months { grid-template-columns: repeat(3, 1fr); } }
.months a {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--ink-soft); font-size: var(--fs-0); font-weight: 550; background: var(--card);
}
.months a small { color: var(--ochre-deep); font-size: 0.68rem; letter-spacing: 0.06em; }
.months a:hover { border-color: var(--forest); color: var(--forest-deep); background: var(--forest-tint); text-decoration: none; }
/* Monate ohne Bericht: gestrichelt und blass statt als toter Link */
.months .fehlt {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 6px; border: 1px dashed var(--line); border-radius: var(--radius-s);
  color: var(--ink-faint); font-size: var(--fs-0); font-weight: 550; background: transparent;
}
.months .fehlt small { color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.06em; opacity: 0.8; }

/* ---- Technik-Seite: Bild neben Text, dazu die Datentabellen ---- */
.tech-section { margin-bottom: clamp(30px, 5vw, 52px); }
.tech-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(18px, 3vw, 34px); align-items: start; }
.tech-grid.flip { grid-template-columns: 1fr 320px; }
.tech-grid.flip .tech-media { order: 2; }
@media (max-width: 820px) {
  .tech-grid, .tech-grid.flip { grid-template-columns: 1fr; }
  .tech-grid.flip .tech-media { order: 0; }
}
.tech-media { display: grid; gap: 12px; }
.tech-media .shot figure { padding: 7px; }
.tech-media .shot img { aspect-ratio: auto; }
.tech-body h3 { font-size: var(--fs-2); margin-bottom: 10px; color: var(--forest-deep); font-weight: 600; }
.tech-body p, .tech-body li { color: var(--ink-soft); }
.tech-body ul { margin: 0 0 1em; padding-left: 20px; }
.tech-body li { margin-bottom: 4px; }
.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-0); margin: 0 0 1em; }
.spec td { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.spec td:first-child { color: var(--ink-faint); white-space: nowrap; width: 46%; }
.spec td:last-child { color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--font-data); font-weight: 500; }

/* ---- Technik: Karte je Bauteil, darunter der Weg der Daten ---- */
.sec-intro { color: var(--ink-soft); max-width: 68ch; margin: -4px 0 18px; }
.comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 24px); }
@media (max-width: 980px) { .comp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .comp-grid { grid-template-columns: 1fr; } }
.comp-card { padding: 0; display: flex; flex-direction: column; }
.comp-card .comp-img { display: block; }
.comp-card .comp-img.two { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.comp-card .comp-img .shot { display: block; }
.comp-card .comp-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; display: block; }
.comp-card .comp-img.two img { aspect-ratio: 1 / 1; }
.comp-card .card-pad { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.comp-card h3 { font-size: var(--fs-2); color: var(--forest-deep); font-weight: 600; margin: 0; }
.comp-card p { color: var(--ink-soft); margin: 0; }
.comp-card .spec { margin: 2px 0 0; }
.comp-card.wide { grid-column: 1 / -1; }
@media (min-width: 681px) { .comp-card.wide { display: grid; grid-template-columns: 320px 1fr; } .comp-card.wide .comp-img, .comp-card.wide .comp-img .shot { height: 100%; } .comp-card.wide .comp-img img { aspect-ratio: auto; height: 100%; } }

.flow { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.flow li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 14px; }
.flow .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--forest); color: var(--on-accent); font-family: var(--font-data); font-size: 0.82rem; margin-bottom: 9px; }
.flow b { display: block; color: var(--forest-deep); font-size: var(--fs-0); line-height: 1.25; }
.flow .d { display: block; color: var(--ink-faint); font-size: 0.76rem; margin-top: 3px; }
@media (max-width: 900px) { .flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .flow { grid-template-columns: repeat(2, 1fr); } }

/* ---- Fußbereich mit Linkspalten und der Zeile darunter ---- */
.footer { border-top: 1px solid var(--line-strong); margin-top: clamp(36px, 6vw, 68px); background: var(--footer-bg); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(22px, 4vw, 48px); padding-block: clamp(32px, 5vw, 52px) 24px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h2, .footer h3, .footer h4 { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin: 0 0 14px; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--ink-soft); font-size: var(--fs-0); }
.footer a:hover { color: var(--forest-deep); }
.footer p { color: var(--ink-soft); font-size: var(--fs-0); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-strong); padding-block: 16px;
  color: var(--ink-faint); font-size: 0.76rem;
}
.footer-bottom .ver { font-family: var(--font-data); letter-spacing: 0; }

/* ---- Gefällt-mir-Knopf im Fuß; den Zähler führt like.php ---- */
.footer-like { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 0 20px; border-top: 1px solid var(--line); }
.footer-like .like-frage { font-size: var(--fs-0); color: var(--ink-faint); }
.like-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--fs-0) var(--font-body); color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 9px 18px; cursor: pointer;
}
.like-btn svg { width: 17px; height: 17px; flex: none; }
.like-btn svg path { fill: none; stroke: currentColor; stroke-width: 1.7; }
.like-btn:hover { border-color: var(--clay); color: var(--clay); }
.like-btn:disabled { cursor: default; }
.like-btn.liked { color: var(--clay); border-color: var(--clay); background: var(--clay-tint); }
.like-btn.liked svg path { fill: currentColor; }
.like-count { font-size: var(--fs-0); color: var(--ink-faint); }
.like-count:empty { display: none; }

/* ---- Batterie der Solarversorgung: Symbol links, Messwerte rechts ----
   Die Klassen .lädt und .entlädt hängt battery.js an den Zustandstext. */
.battery { display: flex; gap: 18px; align-items: flex-start; }
.batt-svg { width: 118px; flex: none; margin-top: 3px; }
.batt-fill { transition: width 1.2s ease; }
.batt-pol { opacity: 0.55; }
.batt-pol.on { animation: batt-pulse 2.6s ease-in-out infinite; }
@keyframes batt-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.batt-rows { display: grid; gap: 4px; font-size: var(--fs-0); color: var(--ink-soft); }
.batt-rows .br { display: flex; justify-content: space-between; gap: 16px; }
.batt-rows b { font-family: var(--font-data); font-weight: 600; color: var(--ink); white-space: nowrap; }
.batt-state { font-weight: 600; }
.batt-state.lädt { color: var(--forest); }
.batt-state.entlädt { color: var(--clay); }
.batt-meta { margin-top: 6px; font-size: 0.74rem; color: var(--ink-faint); }
@media (max-width: 420px) { .battery { flex-direction: column; } }

/* ---- Wettergrafiken der Grafik-Seite, zwei nebeneinander ---- */
.gchart-grid { display: grid; gap: clamp(14px, 2.4vw, 24px); grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .gchart-grid { grid-template-columns: 1fr; } }
.gchart-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 12px 16px 0;
}
.gchart-head h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-1); }
.gchart-head .gstat { margin-left: auto; font-size: 0.76rem; color: var(--ink-faint); }
.gchart-head .gstat b { font-family: var(--font-data); color: var(--ink-soft); font-weight: 600; }
.gchart-body { padding: 6px 10px 4px; }
.gchart-body svg { display: block; width: 100%; height: auto; }
.gchart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 16px 12px; font-size: 0.76rem; color: var(--ink-soft); }
.gchart-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
/* Das Band ist im Diagramm eine blasse Fläche mit dünner Kante; sein
   Legendenzeichen sagt jetzt dasselbe. Die Farbe setzt das Skript inline,
   deshalb nur Form, Deckung und Kantenstärke hier. */
.gchart-legend i.flaeche { height: 11px; border-radius: 2px; opacity: 0.35; border: 1px solid; }
.gchart-legend i.saeule { width: 5px; height: 12px; border-radius: 1px; }
/* Diagramme mit vielen Säulen (Monatsregen: 14 Jahre × 6 Monate) laufen
   über beide Spalten, sonst bliebe jede Säule wenige Pixel schmal. */
.wide-chart { grid-column: 1 / -1; }

.year-select {
  font: 600 var(--fs-0) var(--font-body); color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 7px 10px; cursor: pointer;
}

/* ---- Sonne & Mond ---- */
/* Pur-Ansicht von sonne-mond.htm: nur Panorama und Zahlen, ohne Kopfleiste,
   Fußbereich und Erklärung. Schaltet ?pur ein, und von selbst, wenn die
   Seite in einem Rahmen steckt; beides gehört dann der umgebenden Seite. */
[data-pur] .topbar,
[data-pur] .page-head,
[data-pur] .footer,
[data-pur] .sm-erklaerung,
[data-pur] .skip-link { display: none; }
[data-pur] .section { padding: 0; }
[data-pur] .section > .container { padding: 0; max-width: none; }
[data-pur] .card { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }

.sunmoon-stage { position: relative; background: var(--paper-deep); }
.sunmoon-stage canvas { display: block; width: 100%; height: auto; }
/* Eigene Leinwand über dem Panorama für die Sternschnuppen: Sie laufen mit
   voller Bildrate, das Panorama darunter mit vier Bildern je Sekunde.
   sunmoon.js legt diese Leinwand selbst an. */
/* Die drei aufgelegten Ebenen: Wolken (WebGL), Vordergrund, Sternschnuppen.
   Sie liegen deckungsgleich über der Grundleinwand und in der Reihenfolge,
   in der sie im Markup stehen. */
.sunmoon-stage canvas.sm-meteore,
.sunmoon-stage canvas.sm-wolkenebene,
.sunmoon-stage canvas.sm-vorn { position: absolute; left: 0; top: 0; pointer-events: none; }
/* Schild mit Uhrzeit und Datum, unten mittig im Panorama; unter 640 px
   verdeckt es zu viel und entfällt. */
.sunmoon-clock {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  text-align: center; pointer-events: none;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  border: 1px solid var(--line-strong);
  padding: 3px 12px; border-radius: 6px;
  color: var(--ink);
}
.sunmoon-clock .t { font-family: var(--font-data); font-weight: 600; font-size: clamp(0.8rem, 1.5vw, 0.98rem); letter-spacing: 0.09em; line-height: 1.15; }
.sunmoon-clock .d { font-size: 0.6rem; color: var(--ink-soft); letter-spacing: 0.07em; margin-top: 0; line-height: 1.25; }
@media (max-width: 640px) { .sunmoon-clock { display: none; } }

/* Das Gegenstück oben: es erscheint nur, solange am Himmel wirklich etwas
   vorgeht — eine Finsternis, ein Sternschnuppenstrom. Sonst steht es nicht
   da, und deshalb fällt es auf, wenn es da steht. Ockerfarben abgesetzt,
   damit es sich vom Uhrenschild unterscheidet, das immer da ist.
   Anders als die Uhr bleibt es auch auf dem Telefon stehen: was es meldet,
   kommt ein paarmal im Jahr vor. */
.sunmoon-jetzt {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  max-width: calc(100% - 18px); text-align: center; pointer-events: none;
  background: color-mix(in srgb, var(--ochre-tint) 92%, transparent);
  border: 1px solid var(--ochre);
  padding: 3px 12px; border-radius: 6px;
  color: var(--ochre-deep); font-weight: 600;
  font-size: clamp(0.68rem, 1.3vw, 0.8rem); line-height: 1.3;
}
.sunmoon-jetzt[hidden] { display: none; }

/* Die beiden unteren Streifen der Karte. Ab 981 px stehen sie nebeneinander:
   links die kommenden Nächte, rechts die Ereignisse der nächsten Monate.
   Untereinander maßen sie zusammen 879 px, obwohl der linke nur 585 px hoch
   ist und rechts daneben nichts stand. Die Lesefolge bleibt: erst diese
   Woche, dann die nächsten Monate.

   Die Ereignisliste bekommt daneben zwei Kachelspalten statt drei — drei in
   einer halben Breite wären 180 px schmale Kacheln, in denen jede Erklärung
   viermal umbräche. */
@media (min-width: 981px) {
  .sm-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sm-unten > .sm-events { border-left: 1px solid var(--line); }
  .sm-unten .sm-eventlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* sunmoon.js deckt den Nächte-Streifen nur auf, wenn es etwas zu zeigen
     gibt. Bleibt er verborgen, stünde die Ereignisliste sonst in der linken
     Hälfte und rechts wäre nichts — sie nimmt dann die ganze Breite und ihre
     dritte Kachelspalte zurück. */
  .sm-naechte[hidden] + .sm-events { grid-column: 1 / -1; border-left: 0; }
  .sm-naechte[hidden] + .sm-events .sm-eventlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Nächste Ereignisse: unter 1060 px ein breiter Streifen über die ganze
   Karte, weil eine eigene Spalte den halben Winter über leer bliebe. */
.sm-events {
  border-top: 1px solid var(--line); background: var(--card);
  padding: clamp(14px, 2.4vw, 22px);
}
.sm-eventlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; }
@media (max-width: 900px) { .sm-eventlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sm-eventlist { grid-template-columns: minmax(0, 1fr); } }
.sm-event { display: grid; grid-template-columns: 3.9em minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.sm-event b { color: var(--ochre-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Läuft ein Ereignis gerade, steht statt des Datums „jetzt" — und weil das
   kein Datum ist, steht es auch nicht in der Datumsschrift, sondern als
   kleines Schild in der Farbe des Hinweises über dem Bild. */
.sm-event.jetzt b {
  color: var(--on-accent); background: var(--clay);
  border-radius: 4px; padding: 1px 7px; font-size: 0.72rem;
  justify-self: start; align-self: center;
}
.sm-event.jetzt .e-name { font-weight: 600; }
.sm-event .e-name { color: var(--ink); font-weight: 550; }
/* Beginn, Höhepunkt und Ende. Steht zwischen Namen und Erläuterung, in
   Ziffernschrift mit gleich breiten Ziffern, damit die Uhrzeiten von Zeile
   zu Zeile untereinander stehen. */
.sm-event .e-zeiten {
  grid-column: 2; color: var(--ink-soft); font-size: 0.78rem; margin-top: 3px;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}
.sm-event .e-note { grid-column: 2; color: var(--ink-faint); font-size: 0.78rem; margin-top: 1px; }

/* Die vier Datenzellen unter dem Panorama. Vorher waren es sechs
   gleichrangige Spalten in zwei Rasterzeilen — und weil eine Rasterzeile so
   hoch wird wie ihre höchste Spalte, standen zehn Zeilen Mond neben vier
   Zeilen Mondphasen: gemessene 408 px gestreckte Luft, ein Fünftel des
   ganzen Abschnitts. Gepaart passt alles in EINE Zeile.

   Die Trennlinien setzt jede Zelle selbst; die nth-child-Regeln nehmen sie
   an Rand und Fuß wieder zurück, je nachdem, wie viele Spalten die Breite
   gerade zulässt. Bei vier Spalten gibt es keine zweite Zeile, also auch
   keine Fußlinie — die Kante nach unten trägt der nächste Streifen. */
.sunmoon-data { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--card); }
.sm-col { padding: clamp(14px, 2.4vw, 22px); border-right: 1px solid var(--line); }
.sm-col:last-child { border-right: 0; }
/* Zwei Blöcke in einer Zelle: der zweite braucht Luft nach oben, sonst
   klebt seine Überschrift an der letzten Zahl des ersten. */
.sm-block + .sm-block { margin-top: 22px; }
/* Unter 980 px wären vier Spalten schmäler als die 249 px, bei denen die
   Zeilen zuletzt noch sauber standen. Die Grenze liegt bewusst tief: zwei
   Spalten bedeuten eine zweite Rasterzeile, und die kostet mehr Höhe, als
   die schmaleren Spalten an Umbrüchen kosten. */
@media (max-width: 980px) {
  .sunmoon-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-col:nth-child(2n) { border-right: 0; }
  .sm-col:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .sunmoon-data { grid-template-columns: minmax(0, 1fr); }
  .sm-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .sm-col:last-child { border-bottom: 0; }
}
/* Die Planetenzeile trägt Helligkeit und Zeitfenster; sie darf umbrechen,
   sonst sprengt sie die schmale Spalte. */
.sm-row.pl b { white-space: normal; text-align: right; }
/* Farbpunkt vor dem Planetennamen — dieselbe Farbe wie im Panorama */
.pl-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
}
.sm-col h3, .sm-events h3, .sm-naechte h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; letter-spacing: 0; text-transform: none;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 12px; font-family: var(--font-body);
}
.sm-col h3 .ico, .sm-events h3 .ico, .sm-naechte h3 .ico { color: var(--ochre-deep); font-size: 0.95rem; }
.sm-col h3 .ico.m, .sm-naechte h3 .ico.m { color: var(--night); }
.sm-rows { display: grid; gap: 7px; }
.sm-row { display: flex; justify-content: space-between; gap: 14px; font-size: var(--fs-0); }
.sm-row span { color: var(--ink-soft); }
.sm-row b { font-family: var(--font-data); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Goldene und blaue Stunde tragen zwei Zeitfenster, morgens und abends.
   Auf schmalen Geräten passen die nicht in eine Zeile — dort darf zwischen
   den beiden Fenstern umgebrochen werden, innerhalb eines nicht. */
.sm-row b.zwei { white-space: normal; text-align: right; }
/* „Himmel & Luft“ trägt als einzige Spalte ganze Sätze statt Zahlen —
   „1750 m über Grund · Taupunktdifferenz“, „Delta-Aquariiden, abklingend ·
   nächstes Maximum: Perseiden am 12.8.“. Neben der Beschriftung blieben in
   einer Drittelspalte drei rechtsbündige Fetzen übrig, und bei „Refraktion am
   Horizont“ brach sogar die Beschriftung selbst um. Hier steht der Wert
   deshalb unter seinem Namen und linksbündig.

   Die Klasse sitzt am Zeilenblock, nicht an der Zelle: seit „Himmel & Luft“
   mit „Planeten heute Nacht“ eine Zelle teilt, gälte sie sonst für beide. */
.sm-rows.lang { gap: 13px; }
.sm-rows.lang .sm-row { display: block; }
.sm-rows.lang .sm-row b {
  display: block; white-space: normal; text-align: left; margin-top: 2px;
}
.sm-row b.gold { color: var(--ochre-deep); }
.sm-row b.blue { color: var(--night); }
/* Fußnote unter der Sonnenspalte: warum dort zwei Auf- und zwei
   Untergangszeiten stehen. Kleiner und blasser als die Zeilen darüber,
   damit sie erklärt und nicht mitliest. */
.sm-fuss { font-size: 0.72rem; line-height: 1.5; color: var(--ink-faint); margin: 10px 0 0; }
.sm-bar { height: 5px; border-radius: 3px; background: var(--paper-deep); margin-top: 12px; overflow: hidden; }
.sm-bar i { display: block; height: 100%; border-radius: 3px; width: 0; transition: width 0.6s ease; }
.sm-bar.sunbar i { background: var(--ochre-deep); }
.sm-bar.moonbar i { background: var(--night); }
.sm-phases { display: grid; gap: 8px; }
.sm-phase { display: flex; align-items: center; gap: 10px; font-size: var(--fs-0); color: var(--ink-soft); }
.sm-phase .ph-ico { flex: none; line-height: 0; color: var(--night); }
.sm-phase .ph-ico svg { width: 17px; height: 17px; display: block; }
.sm-phase b { margin-left: auto; font-family: var(--font-data); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Beste Nächte zum Sterneschauen: der dritte Streifen der Karte. Kante und
   Innenabstand als Zwilling von .sm-events, damit alle drei Streifen
   dieselbe Fuge haben. */
.sm-naechte { border-top: 1px solid var(--line); background: var(--card); padding: clamp(14px, 2.4vw, 22px); }
.sm-naechte[hidden] { display: none; }
/* Die Begründung steht ÜBER den Zeilen, weil sie das Ergebnis ist und nicht
   die Fußnote. */
.sm-n-satz { font-size: var(--fs-0); color: var(--ink); margin: 0 0 12px; max-width: 62ch; }
.sm-n-liste { display: grid; gap: 4px; }
.sm-n-zeile {
  display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 5em;
  grid-template-areas: "name band wert" "name detail wert";
  column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 6px 8px; border-radius: var(--radius-s);
}
.sm-n-name { grid-area: name; font-size: var(--fs-0); font-weight: 600; }
.sm-n-name small { display: block; color: var(--ink-faint); font-size: 0.72rem; font-weight: 400; }
.sm-n-band { grid-area: band; border-radius: 3px; overflow: hidden; }
.sm-n-band svg { display: block; width: 100%; height: 28px; }
.sm-n-detail {
  grid-area: detail; font-size: 0.72rem; color: var(--ink-soft);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}
.sm-n-wert {
  grid-area: wert; text-align: right; font-family: var(--font-data);
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.95rem;
}
/* Die Siegerin bekommt dieselbe Sprache wie .fc-day.today: getönte Fläche
   und eine innen liegende Kante, kein zweiter Rahmen im Fluss. */
.sm-n-zeile.beste { background: var(--ochre-tint); box-shadow: inset 0 0 0 1px var(--ochre); }
.sm-n-chip {
  display: inline-block; margin-left: 6px; background: var(--ochre-deep);
  color: var(--on-accent); border-radius: 4px; padding: 1px 6px;
  font-size: 0.64rem; font-weight: 600; vertical-align: 1px;
}
.sm-n-achse { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 5em; column-gap: 12px; margin-top: 4px; }
.sm-n-achse-label { text-align: right; font-size: 0.66rem; color: var(--ink-faint); }
.sm-n-achse-innen { position: relative; height: 1.15em; }
.sm-n-tick {
  position: absolute; transform: translateX(-50%); font-style: normal;
  font-size: 0.66rem; color: var(--ink-faint); font-family: var(--font-data);
}
/* Maße von .sm-fuss übernommen — die Karte soll nur eine Sorte
   Kleingedrucktes kennen. */
.sm-n-fuss { font-size: 0.72rem; line-height: 1.5; color: var(--ink-faint); margin: 10px 0 0; }
@media (max-width: 900px) {
  .sm-n-zeile, .sm-n-achse { grid-template-columns: 8em minmax(0, 1fr) 4.4em; column-gap: 10px; }
  .sm-n-band svg { height: 26px; }
}
/* Schmal: alles senkrecht gestapelt. Der Balken ist width:100% eines
   minmax(0,1fr)-Feldes und kann die Karte damit nicht sprengen. */
@media (max-width: 560px) {
  .sm-n-zeile {
    grid-template-columns: minmax(0, 1fr) 4.4em;
    grid-template-areas: "name wert" "band band" "detail detail";
    row-gap: 4px;
  }
  .sm-n-band svg { height: 24px; }
  .sm-n-achse { grid-template-columns: minmax(0, 1fr); }
  .sm-n-achse-label { display: none; }
}

/* ---- Kontaktkarte, Rechtstexte, Dankliste ---- */
.kontakt-card h2 { font-weight: 600; } .kontakt-card .row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-1); }
.kontakt-card h2 { font-weight: 600; } .kontakt-card .row:last-child { border-bottom: 0; }
.kontakt-card h2 { font-weight: 600; } .kontakt-card .row span { color: var(--ink-faint); min-width: 110px; font-size: var(--fs-0); padding-top: 2px; }
.legal { color: var(--ink-faint); font-size: var(--fs-0); }
.credits li { display: flex; gap: 8px; flex-wrap: wrap; }
.credits li em { color: var(--ink-faint); font-style: normal; }

/* ---- Amtliche Wetterwarnung ----
   Der Streifen steht unmittelbar unter dem Live-Streifen und ist die
   meiste Zeit gar nicht da. Er darf deshalb nicht blinken und nicht
   pulsieren: Wer die Seite aufmacht, während eine Warnung gilt, sieht
   sie ohnehin — und wer Bewegung schlecht verträgt, braucht sie am
   wenigsten an der Stelle, an der etwas Wichtiges steht. */
.warnband { background: var(--card); border-bottom: 1px solid var(--line); }
/* Muss dastehen: .warnband setzt einen Hintergrund, und ohne diese Zeile
   bliebe an ruhigen Tagen ein farbiger Streifen aus Nichts stehen —
   dieselbe Falle wie bei img[hidden] weiter oben. */
.warnband[hidden] { display: none; }
.warnband-inner { display: grid; gap: 8px; padding-block: 12px; }
.wn-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-faint); }
.wn-faelle { display: grid; gap: 8px; }

.wn-fall { position: relative; overflow: hidden; border: 1px solid; border-radius: var(--radius-s); padding-left: 11px; }
/* Der Stufenbalken sitzt innerhalb des Rahmens: nach außen begrenzt ihn
   der Rahmen des Falls, nach innen seine eigene Kante. Ein blankes
   border-left in der Warnfarbe wäre kürzer gewesen — dann hätte der
   Balken außen gar keine Begrenzung, und genau dort steht Gelb mit
   1,06 zu 1 gegen das Papier. */
.wn-fall::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; }
.wn-s1 { background: var(--warn-gelb-flaeche);   border-color: var(--warn-gelb-kante); }
.wn-s2 { background: var(--warn-orange-flaeche); border-color: var(--warn-orange-kante); }
.wn-s3 { background: var(--warn-rot-flaeche);    border-color: var(--warn-rot-kante); }
.wn-s1::before { background: var(--warn-gelb);   border-right: 1px solid var(--warn-gelb-kante); }
.wn-s2::before { background: var(--warn-orange); border-right: 1px solid var(--warn-orange-kante); }
.wn-s3::before { background: var(--warn-rot);    border-right: 1px solid var(--warn-rot-kante); }

.wn-kopf { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; padding: 9px 12px; }
.wn-kopf::-webkit-details-marker { display: none; }
.wn-kopf:focus-visible { outline: 2px solid var(--ochre); outline-offset: -3px; }
.wn-ico { width: 20px; height: 20px; flex: none; line-height: 0; }
.wn-ico svg { width: 20px; height: 20px; display: block; }
.wn-s1 .wn-ico { color: var(--warn-gelb-schrift); }
.wn-s2 .wn-ico { color: var(--warn-orange-schrift); }
.wn-s3 .wn-ico { color: var(--warn-rot-schrift); }
.wn-typ { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); color: var(--ink); }
.wn-stufe { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.wn-s1 .wn-stufe { color: var(--warn-gelb-schrift); }
.wn-s2 .wn-stufe { color: var(--warn-orange-schrift); }
.wn-s3 .wn-stufe { color: var(--warn-rot-schrift); }

/* Drei Kästchen, das der geltenden Stufe gefüllt. Sie sagen dasselbe wie
   das Wort daneben, aber in einer Form, die man ohne Lesen erfasst: eine
   von dreien oder alle drei. Der Rahmen der leeren Kästchen ist
   --ink-faint und nicht --line-strong — auf den drei Warnflächen käme
   --line-strong nur auf 1,4 bis 1,6 zu 1, --ink-faint auf 4,76 bis 5,42. */
.wn-leiter { display: inline-flex; gap: 2px; }
.wn-leiter i { width: 13px; height: 7px; border: 1px solid var(--ink-faint); border-radius: 1px; }
.wn-s1 .wn-leiter i.an { background: var(--warn-gelb);   border-color: var(--warn-gelb-kante); }
.wn-s2 .wn-leiter i.an { background: var(--warn-orange); border-color: var(--warn-orange-kante); }
.wn-s3 .wn-leiter i.an { background: var(--warn-rot);    border-color: var(--warn-rot-kante); }

.wn-zeit { font-size: var(--fs-0); color: var(--ink-soft); }
.wn-dauer { font-size: var(--fs-0); color: var(--ink-faint); }
.wn-dauer::before { content: "· "; }
.wn-mehr { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft); }
.wn-chev { font-size: 11px; transition: transform 0.2s; }
.wn-fall[open] .wn-chev { transform: rotate(180deg); }
.wn-fall[open] .wn-kopf { border-bottom: 1px solid; border-color: inherit; }

.wn-rumpf { padding: 10px 14px 12px; display: grid; gap: 10px; }
.wn-satz { margin: 0; color: var(--ink); }
.wn-folgt { margin: 0; font-weight: 600; }
.wn-s1 .wn-folgt { color: var(--warn-gelb-schrift); }
.wn-s2 .wn-folgt { color: var(--warn-orange-schrift); }
.wn-s3 .wn-folgt { color: var(--warn-rot-schrift); }
.wn-block h4 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.wn-block p { margin: 0; color: var(--ink-soft); }
.wn-punkte { margin: 0; padding-left: 1.1em; color: var(--ink-soft); }
.wn-punkte li { margin-bottom: 2px; }
.wn-stufentext { margin: 0; font-size: var(--fs-0); color: var(--ink-faint); }
.wn-fuss { margin: 0; }

/* Sobald Platz ist, stehen „Mögliche Auswirkungen“ und „Handlungs-
   empfehlungen“ nebeneinander statt zwölf Punkte untereinander. Satz,
   Verschärfungszeile und Stufentext laufen über beide Spalten. */
@media (min-width: 900px) {
  .wn-rumpf { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .wn-satz, .wn-folgt, .wn-stufentext { grid-column: 1 / -1; }
}
/* Schmal: Der Kopf bricht von selbst um — Zeitraum und Dauer rutschen
   zusammen in die zweite Zeile. Nur die Aufklapp-Beschriftung bekommt
   eine eigene: Mit margin-left:auto stünde sie sonst rechts angeklebt
   und ließe eine halbe leere Zeile daneben. Der Warntyp wird eine Stufe
   kleiner, damit „Glatteiswarnung“ neben Leiter und Stufenwort nicht
   allein eine Zeile braucht. */
@media (max-width: 560px) {
  .wn-kopf { padding: 9px 10px; gap: 4px 10px; }
  .wn-typ { font-size: var(--fs-1); }
  .wn-mehr { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sm-bar i, .batt-fill { transition: none; }
  .batt-pol.on { animation: none; }
  .wn-chev { transition: none; }
}
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ochre-deep); color: var(--paper); padding: 10px 16px; border-radius: 6px; font-weight: 600; }
.skip-link:focus { left: 8px; }

/* Überschrift nur für Screenreader und Suchmaschinen — auf den Vollbild-
   Kartenseiten gibt es sonst gar keine Überschrift. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Vollbild-Einbettungen (Radar/Satellit): Höhe der Kopfleiste als Variable,
   damit unter der Leiste kein 1-px-Spalt bleibt. */
.fullpage-embed { position: fixed; inset: var(--topbar-h, 61px) 0 0 0; }
.fullpage-embed iframe { width: 100%; height: 100%; }

/* Trägt ein Bild-Link zugleich .card, entstünden zwei gleiche Rahmen im
   Abstand von 9 px — .shot bringt seinen schon über das <figure> mit. */
.shot.card { background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }


/* ---- Druck ----
   Auf Papier bleiben Zahlen und Text: Navigation, Einbettungen, Schalter
   und das Panorama entfallen, Karten werden nicht über Seiten getrennt. */
/* ---- Bild des Tages ----
   Zwei Spalten, Bild links, Text rechts. Das Bild bekommt die breitere,
   weil es der Grund ist, warum die Karte da ist.

   Anders als die übrigen .shot-Bilder wird dieses NICHT auf ein festes
   Seitenverhältnis beschnitten: Die NASA zeigt heute ein liegendes
   Mosaik und morgen einen stehenden Nebel, und ein Zuschnitt auf 3:2
   schneidet dem Nebel den Kopf ab. Also `contain` mit einer
   Höhenschranke — das Bild bleibt ganz, die Karte bleibt ruhig. */
.apod-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.apod-bild { display: block; background: #10141a; }
/* Eine Autorenregel schlägt die Browservorgabe [hidden] { display: none }.
   Ohne diese Zeile blieb der Bildkasten an Videotagen ohne Vorschaubild und
   bei nicht erreichbarem apod.php als leerer schwarzer Block von 753 × 260
   Punkten neben dem Text stehen — und zwar auch in der Zeitspanne zwischen
   dem Seitenaufbau und der Antwort, also bei jedem Aufruf kurz. site.css
   macht dasselbe schon für img[hidden] und .sunmoon-jetzt[hidden]. */
.apod-bild[hidden] { display: none; }
/* Fällt das Bild weg, soll der Text die ganze Breite bekommen und nicht in
   der rechten Spalte neben einer leeren linken stehen. Die Klasse setzt
   apod.js, weil sie ohne :has() auskommen muss. */
.apod-grid.ohne-bild { grid-template-columns: 1fr; }
.apod-bild figure {
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; height: 100%;
}
.apod-bild img {
  width: 100%; height: 100%; aspect-ratio: auto;
  min-height: 260px; max-height: 520px;
  object-fit: contain; border-radius: 0; display: block;
}
.apod-seite { display: flex; flex-direction: column; min-width: 0; }
.apod-seite .card-title { border-bottom: 1px solid var(--line); }
.apod-seite .card-pad { display: flex; flex-direction: column; gap: 10px; }
.apod-vorspann { margin: 0; color: var(--ink-faint); font-size: var(--fs-0); font-weight: 600; }
/* Der Erklärtext ist englisch und lang. Er steht deshalb etwas kleiner
   und mit mehr Durchschuss als der deutsche Fließtext daneben, und bei
   sehr langen Tagen bekommt er eine eigene Bildlaufleiste, statt die
   Karte auf die doppelte Höhe zu treiben. */
.apod-text {
  margin: 0; font-size: var(--fs-0); line-height: 1.62; color: var(--ink-soft);
  max-height: 300px; overflow-y: auto;
}
.apod-fuss { margin: 0; padding-top: 2px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .apod-grid { grid-template-columns: 1fr; }
  .apod-bild img { max-height: 380px; min-height: 200px; }
  .apod-text { max-height: none; }
}

@media print {
  :root { --paper: #fff; --paper-deep: #fff; --card: #fff; --footer-bg: #fff;
          --ink: #000; --ink-soft: #333; --ink-faint: #555;
          --line: #bbb; --line-strong: #888; }
  html, body { background: #fff; color: #000; }
  .topbar, .nav, .nav-toggle, .skip-link,
  .footer-like, .embed, .sunmoon-stage, .fullpage-embed,
  .chart-tabs, .year-select, .lightbox { display: none !important; }
  .section, .section.alt { background: none; padding-block: 14pt; break-inside: auto; }
  .section + .section { border-top: 1px solid #bbb; }
  .card, .tile, .fc-day, .entry, .stat, .sm-n-zeile { break-inside: avoid; border-color: #bbb; }
  .hero-photo img { max-height: 55mm; object-fit: cover; }
  a { color: #000; text-decoration: none; }
  /* Ziel externer Verweise mitdrucken — sonst wertlos auf Papier */
  .page-lead a[href^="http"]::after, .credits a[href^="http"]::after,
  .section-note a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .months { grid-template-columns: repeat(6, 1fr); }
  /* Auf Papier wird nichts umgeschaltet. Die Kachelfarbe dagegen ist der
     ganze Inhalt und muss mit — print-color-adjust ist allerdings eine
     Bitte und kein Zwang; wo der Browser sie ausschlägt, trägt der
     Begleitsatz allein, und der nennt alle vier Kernzahlen. */
  .krk-schalter { display: none; }
  .krk-gitter { break-inside: avoid; }
  .footer { margin-top: 14pt; border-top: 1px solid #888; }
  @page { margin: 16mm 14mm; }
}