/* Wetterstation Fluorn – mobil zuerst, hell/dunkel nach Systemeinstellung. Keine externen Ressourcen.
   Gestaltung „Bühne statt Tapete“: ruhiger Papiergrund, oben die Zeichnung der Jahreszeit als Bühne
   mit Wetter- und Tageszeit-Überlagerung, darunter Karten in warmem Papierweiß mit feiner Linie. */
:root {
  --papier: #f3ecdf; --karte: #fbf7ee; --rand: #cfc6b6; --text: #26231f; --leise: #5d5850;
  --akzent: #1f6fa8; --warm: #c9443f; --kalt: #2470c8; --regen: #5257bf; --sonne: #d99a00; --gruen: #2a8f53;
  --nacht: #7f8c9933; --gitter: #7f8c9933; --warnung: #ad3530;
  --radius: 11px;
  /* Serifen-Systemschrift für Titel und große Temperatur; bewusst ohne Georgia (Mediävalziffern) */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", "DejaVu Serif", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #14181c; --karte: #201f1d; --rand: #3b3833; --text: #e8e6e1; --leise: #aaa59c;
    --akzent: #63b0ea; --warm: #f28c80; --kalt: #74b3ff; --regen: #a0a2ff; --sonne: #f5c542; --gruen: #5fd08d;
    --nacht: #00000047; --gitter: #a8a29a2b; --warnung: #f28c80;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); background: var(--papier);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
h3 { font-size: .95rem; margin: 1rem 0 .35rem; }
p { margin: .25rem 0; }
b { font-weight: 600; }
a { color: var(--akzent); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Icons (eigener Satz, siehe <svg class="sprite"> in index.html) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; flex: none; }
.c-temp { color: var(--warm); } .c-wind { color: var(--akzent); } .c-regen { color: var(--regen); }
.c-druck { color: var(--gruen); } .c-sonne { color: var(--sonne); } .c-sensor { color: var(--leise); }

/* ---------------------------------------------------------------- Kopf (alle Seiten) */
.kopf { max-width: 1100px; margin: 0 auto; padding: .35rem .75rem .3rem; display: flex; align-items: center; gap: .6rem; }
.logo { width: 34px; height: 34px; flex: none; }
.kopf h1, .kopf-link .titel {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.15;
  color: var(--akzent); font-variant-numeric: lining-nums;
}
.ort { font-size: .78rem; line-height: 1.25; color: var(--leise); margin: .05rem 0 0; }
@media (min-width: 720px) {
  .kopf { padding: .7rem .75rem .6rem; }
  .logo { width: 36px; height: 36px; }
  .kopf h1, .kopf-link .titel { font-size: 1.4rem; }
}
/* Unterseiten: ganzer Kopf ist Link zur Startseite */
.kopf-link { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; border-radius: 6px; }
.kopf-link .titel, .kopf-link .ort { display: block; }
.kopf-link:hover .ort, .kopf-link:focus-visible .ort { text-decoration: underline; }
.kopf-link:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.seite { max-width: 1100px; margin: 0 auto; padding: 0 .75rem 1rem; }

/* ---------------------------------------------------------------- Ausfall-Hinweis */
.ausfall {
  position: relative; margin: 0 0 .6rem; padding: .55rem .8rem .55rem 2.3rem;
  border: 1px solid #d3a04a; border-radius: var(--radius); background: #fbefd4; color: #4d3400;
  font-size: .9rem; font-weight: 600; line-height: 1.35;
}
.ausfall::before {
  content: "!"; content: "!" / "";
  position: absolute; left: .7rem; top: .6rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: grid; place-items: center; background: #b86f00; color: #fff; font-size: .8rem; font-weight: 800; line-height: 1;
}
.ausfall:empty { display: none; }
@media (prefers-color-scheme: dark) {
  .ausfall { background: #3a2c12; border-color: #8a6420; color: #f6dca8; }
  .ausfall::before { background: #e0a030; color: #1e1606; }
}

/* ---------------------------------------------------------------- Bühne
   Ebenen in .buehne-flaeche (isoliert, damit mix-blend-mode nur mit dem Bild mischt):
   0 .buehne-bild (Zeichnung der Jahreszeit, Filter für Helligkeit/Sättigung)
   1 .buehne-licht (Wolken-, Dämmerungs- oder Nachtfärbung, multipliziert)
   2 .buehne-niederschlag (Regen/Schnee, animiert)
   3 ::after (weicher Schleier oben links für die Lesbarkeit)
   4 .buehne-text
   Gesteuert über Attribute an .buehne (setzt app.js): data-himmel, data-niederschlag, Klassen .bereit und .veraltet.
   data-himmel="nacht" gibt es nur bei Sonne unter −6°, "daemmerung" nur zwischen −6° und Horizont (auswertung.php). */
.buehne {
  /* Farben der Schrift auf der Bühne: dunkel im Hell-Tagbild */
  --b-text: #1f1d1a; --b-leise: #48433c; --b-min: #1b5aa0; --b-max: #a3302b;
  --b-halo: #f3ecdf; --b-schleier: 243 236 223;
  --regen-strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg stroke='%23435670' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 4l-4 14M47 30l-4 14M83 12l-4 14M28 58l-4 14M66 66l-4 14M93 50l-4 14M10 80l-4 14M57 2l-4 14M40 82l-4 14M76 84l-4 14'/%3E%3C/g%3E%3C/svg%3E");
  --bild-modus: 1; --bild-hell: 1; --bild-satt: 1;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
}
@media (prefers-color-scheme: dark) {
  /* Dunkelmodus am Tag: Bild nur leicht dämpfen */
  .buehne {
    --b-text: #f1efea; --b-leise: #d0ccc4; --b-min: #a3ccff; --b-max: #ffb0a5;
    --b-halo: #14181c; --b-schleier: 20 24 28; --bild-modus: .8;
    --regen-strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg stroke='%23dfe8f3' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 4l-4 14M47 30l-4 14M83 12l-4 14M28 58l-4 14M66 66l-4 14M93 50l-4 14M10 80l-4 14M57 2l-4 14M40 82l-4 14M76 84l-4 14'/%3E%3C/g%3E%3C/svg%3E");
  }
}
/* Nacht: helle Schrift mit dunklem Halo */
.buehne[data-himmel="nacht"] {
  --b-text: #f1f3f7; --b-leise: #cdd4e0; --b-min: #a3ccff; --b-max: #ffb0a5;
  --b-halo: #0b1020; --b-schleier: 11 16 32;
  --regen-strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg stroke='%23dfe8f3' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 4l-4 14M47 30l-4 14M83 12l-4 14M28 58l-4 14M66 66l-4 14M93 50l-4 14M10 80l-4 14M57 2l-4 14M40 82l-4 14M76 84l-4 14'/%3E%3C/g%3E%3C/svg%3E");
}

.buehne-flaeche {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 5 / 4; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--karte);
}
@media (min-width: 560px) { .buehne-flaeche { aspect-ratio: 16 / 9; } }
@media (min-width: 1000px) { .buehne-flaeche { aspect-ratio: 2.1 / 1; } }

.buehne-bild, .buehne-licht, .buehne-niederschlag, .buehne-flaeche::after { position: absolute; inset: 0; pointer-events: none; }
/* Handy: ganz rechts, damit Brücke und Kirche im Bild sind; breiter: ganzes Bild, unten verankert */
.buehne-bild {
  z-index: 0; background: transparent 100% 100% / cover no-repeat;
  filter: brightness(var(--bild-modus)) brightness(var(--bild-hell)) saturate(var(--bild-satt));
  opacity: 0; transition: opacity .5s ease-out, filter .8s;
}
/* Das Bild erscheint erst, wenn der erste Zustand feststeht (.bereit). So blitzt nachts kein Tagbild auf;
   die Färbung steht dann sofort und wird erst bei späteren Wechseln weich überblendet. */
.buehne.bereit .buehne-bild { opacity: 1; }
.buehne:not(.bereit) .buehne-bild, .buehne:not(.bereit) .buehne-licht { transition: none; }
@media (min-width: 560px) { .buehne-bild { background-position: 50% 100%; } }
html[data-jahreszeit="fruehling"] .buehne-bild { background-image: url("hintergrund/fruehling.webp"); }
html[data-jahreszeit="sommer"] .buehne-bild { background-image: url("hintergrund/sommer.webp"); }
html[data-jahreszeit="herbst"] .buehne-bild { background-image: url("hintergrund/herbst.webp"); }
html[data-jahreszeit="winter"] .buehne-bild { background-image: url("hintergrund/winter.webp"); }

/* Färbung nach Himmel und Tageszeit */
.buehne-licht { z-index: 1; mix-blend-mode: multiply; opacity: 0; transition: opacity .8s; }
.buehne[data-himmel="bewoelkt"] { --bild-satt: .7; }
.buehne[data-himmel="bewoelkt"] .buehne-licht { background: linear-gradient(180deg, #8e959c, #b4b7b9 70%); opacity: .45; }
.buehne[data-himmel="trueb"] { --bild-satt: .45; --bild-hell: .95; }
.buehne[data-himmel="trueb"] .buehne-licht { background: linear-gradient(180deg, #858c93, #a9adb0 70%); opacity: .7; }
.buehne[data-himmel="daemmerung"] .buehne-licht { background: linear-gradient(180deg, #8f7ac2 0%, #d89cab 50%, #f2b47f 100%); opacity: .6; }
/* Tag-für-Nacht: tiefes Blau multipliziert, deutlich dunkler */
.buehne[data-himmel="nacht"] { --bild-satt: .6; --bild-hell: .9; }
.buehne[data-himmel="nacht"] .buehne-licht { background: linear-gradient(180deg, #18224a, #283869 60%, #33447a); opacity: 1; }

/* Niederschlag: zwei Ebenen in verschiedener Größe und Geschwindigkeit, nur wenn data-niederschlag gesetzt */
.buehne-niederschlag { z-index: 2; display: none; }
.buehne[data-niederschlag] .buehne-niederschlag { display: block; }
.buehne-niederschlag::before, .buehne-niederschlag::after { content: ""; position: absolute; inset: 0; background-repeat: repeat; }
.buehne[data-niederschlag="regen"] .buehne-niederschlag::before {
  background-image: var(--regen-strich); background-size: 100px 100px; animation: regen-a .45s linear infinite;
}
.buehne[data-niederschlag="regen"] .buehne-niederschlag::after {
  background-image: var(--regen-strich); background-size: 150px 150px; background-position: 37px 51px;
  opacity: .6; animation: regen-b .75s linear infinite;
}
@keyframes regen-a { from { background-position: 0 0; } to { background-position: -29px 100px; } }
@keyframes regen-b { from { background-position: 37px 51px; } to { background-position: -6px 201px; } }
.buehne[data-niederschlag="schnee"] .buehne-niederschlag::before, .buehne[data-niederschlag="schnee"] .buehne-niederschlag::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23fff' stroke='%23667588' stroke-opacity='.45' stroke-width='.6'%3E%3Ccircle cx='10' cy='14' r='2'/%3E%3Ccircle cx='52' cy='6' r='1.6'/%3E%3Ccircle cx='94' cy='22' r='2.3'/%3E%3Ccircle cx='30' cy='48' r='1.7'/%3E%3Ccircle cx='76' cy='56' r='2'/%3E%3Ccircle cx='110' cy='78' r='1.6'/%3E%3Ccircle cx='16' cy='88' r='2.2'/%3E%3Ccircle cx='58' cy='98' r='1.8'/%3E%3Ccircle cx='96' cy='108' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.buehne[data-niederschlag="schnee"] .buehne-niederschlag::before { background-size: 120px 120px; animation: schnee-a 7s linear infinite; }
.buehne[data-niederschlag="schnee"] .buehne-niederschlag::after { background-size: 190px 190px; background-position: 60px 30px; opacity: .8; animation: schnee-b 11s linear infinite; }
@keyframes schnee-a { from { background-position: 0 0; } to { background-position: 24px 120px; } }
@keyframes schnee-b { from { background-position: 60px 30px; } to { background-position: 22px 220px; } }
/* Bei Ausfall keinen (veralteten) Niederschlag zeigen */
.buehne.veraltet .buehne-niederschlag { display: none; }
@media (prefers-reduced-motion: reduce) {
  .buehne-niederschlag::before, .buehne-niederschlag::after { animation: none !important; }
  .buehne-bild, .buehne-licht { transition: none; }
}

/* Schleier oben links, damit die Schrift vor jedem Bild lesbar bleibt */
.buehne-flaeche::after {
  content: ""; z-index: 3;
  background:
    radial-gradient(120% 95% at 0 0, rgb(var(--b-schleier) / .9) 0, rgb(var(--b-schleier) / .62) 32%, rgb(var(--b-schleier) / 0) 64%),
    linear-gradient(180deg, rgb(var(--b-schleier) / .45), rgb(var(--b-schleier) / 0) 42%);
}

.buehne-text {
  position: absolute; z-index: 4; left: .9rem; top: .55rem; right: 35%;
  color: var(--b-text);
  text-shadow: 0 0 2px var(--b-halo), 0 0 6px var(--b-halo), 0 0 14px var(--b-halo), 0 0 26px var(--b-halo);
}
@media (min-width: 560px) { .buehne-text { left: 1.3rem; top: 1rem; right: 50%; } }
.riesig {
  font-size: clamp(3.2rem, 8.5vw, 6rem); font-weight: 600; line-height: 1;   /* Systemschrift wie der Fließtext (E-041) */
  letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.einheit { font-size: .42em; font-weight: 500; margin-left: .12em; letter-spacing: 0; color: var(--b-leise); }
.heute-mm { margin-top: .35rem; font-size: .95rem; color: var(--b-text); }
.heute-mm .min { color: var(--b-min); font-weight: 700; }
.heute-mm .max { color: var(--b-max); font-weight: 700; }
.himmel-zeile { font-size: .95rem; font-weight: 600; margin: .1rem 0 0; }
.himmel-zeile::first-letter { text-transform: uppercase; }
@media (min-width: 1000px) { .heute-mm, .himmel-zeile { font-size: 1.05rem; } }
/* Ausfall: Temperatur abgeschwächt */
.buehne.veraltet .riesig { opacity: .6; }

.buehne-unten { padding: .3rem .75rem .5rem; }
.stand { font-size: .8rem; color: var(--leise); margin: .2rem 0 0; }
.stand.veraltet { color: var(--warnung); font-weight: 600; }

/* Min/Max außerhalb der Bühne (Tabellen in den Kacheln) */
.min { color: var(--kalt); font-weight: 600; }
.max { color: var(--warm); font-weight: 600; }

/* ---------------------------------------------------------------- Kacheln
   Handy: zwei Spalten (zugeklappt), ab 720 px drei; geöffnete Kachel über die ganze Breite */
.kacheln { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .6rem; }
@media (min-width: 720px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: .8rem; } }
.kachel { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); min-width: 0; }
.kachel[open] { grid-column: 1 / -1; }
.kachel summary {
  list-style: none; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: .05rem;
  padding: .55rem 1.7rem .6rem .7rem; line-height: 1.25; border-radius: var(--radius);
  -webkit-tap-highlight-color: transparent; min-width: 0;
}
.kachel summary::-webkit-details-marker { display: none; }
.kachel summary::after {
  content: ""; position: absolute; right: .8rem; top: .8rem; width: .45rem; height: .45rem;
  border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise); transform: rotate(45deg); transition: transform .2s;
}
.kachel[open] summary::after { transform: rotate(-135deg); top: 1rem; }
.kachel summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.k-titel {
  display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--akzent); font-weight: 600;
}
.k-titel .icon { margin-right: .3em; width: 1.35em; height: 1.35em; }
.k-wert { font-size: 1.2rem; font-weight: 650; overflow-wrap: anywhere; margin-top: .1rem; }
.k-zusatz { font-size: .78rem; color: var(--leise); overflow-wrap: anywhere; text-wrap: balance; }
@media (min-width: 720px) {
  .kachel summary { padding: .75rem 2.2rem .8rem 1rem; }
  .kachel summary::after { right: 1.1rem; top: 1.05rem; width: .5rem; height: .5rem; }
  .kachel[open] summary::after { top: 1.25rem; }
  .k-titel { font-size: .78rem; letter-spacing: .07em; }
  .k-wert { font-size: 1.45rem; }
  .k-zusatz { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .kachel summary::after { transition: none; } }
.k-inhalt { padding: .8rem 1rem 1rem; display: grid; gap: 1rem; grid-template-columns: 1fr; border-top: 1px solid var(--rand); }
@media (min-width: 900px) { .k-inhalt { grid-template-columns: 1fr 1fr; } }
.spalte { min-width: 0; }

.hinweis { font-size: .82rem; color: var(--leise); }
.klein-titel { font-size: .78rem; color: var(--leise); }
.marke { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 99px; background: var(--gitter); }
.marke:empty { display: none; }
.chips { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.chips li { background: var(--gitter); border-radius: 99px; padding: .15rem .65rem; font-size: .88rem; }
.chips li:empty { display: none; }
.drei { display: grid; gap: .5rem; margin: .6rem 0; grid-template-columns: repeat(3, 1fr); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mm th, .mm td { padding: .3rem .25rem; text-align: right; border-top: 1px solid var(--rand); white-space: nowrap; }
.mm th:first-child { text-align: left; font-weight: 500; }
.mm thead th { border-top: 0; font-size: .78rem; color: var(--leise); font-weight: 500; }
.zeit { color: var(--leise); font-size: .78rem; margin-left: .3rem; font-weight: 400; }
.phasen .symbol { display: inline-block; width: 1.2em; }
.phasen tr.laufend th { font-weight: 700; }

.wind-oben { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 1rem; align-items: center; margin-bottom: .5rem; }
.kompass { width: 100%; height: auto; }
.kompass .ring { fill: none; stroke: var(--rand); stroke-width: 2; }
.kompass .strich { stroke: var(--leise); stroke-width: 1.5; }
.kompass .beschriftung { fill: var(--leise); font-size: 20px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.kompass .pfeil { fill: var(--akzent); }

.balkenliste { display: grid; gap: .25rem; margin-bottom: .6rem; }
.balkenzeile { display: grid; grid-template-columns: 3.2rem 1fr 4.2rem; gap: .5rem; align-items: center; font-size: .88rem; }
.balkenzeile .spur { height: .7rem; background: var(--gitter); border-radius: 99px; overflow: hidden; }
.balkenzeile .fuellung { height: 100%; width: 0; background: var(--regen); border-radius: 99px; }
.balkenzeile .wert { text-align: right; }

.tendenz { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; margin: .6rem 0; padding: .6rem .7rem; border-radius: 10px; background: var(--gitter); }
.tendenz-wert { font-size: 1.5rem; font-weight: 650; white-space: nowrap; }
.tendenz-wert .einheit { color: var(--leise); }
.tendenz.faellt-stark .tendenz-wert { color: var(--warm); }
.tendenz.steigt .tendenz-wert, .tendenz.steigt-stark .tendenz-wert { color: var(--gruen); }

.phase-text { font-size: .9rem; color: var(--leise); margin-bottom: .5rem; }
.himmel-text { font-size: .95rem; margin-bottom: .2rem; }
.bogen { width: 100%; height: auto; display: block; margin: .3rem 0; }
.bogen .horizont { stroke: var(--leise); stroke-width: 1; }
.bogen .grenze { stroke: var(--leise); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.bogen .flaeche { fill: var(--sonne); opacity: .2; }
.bogen .linie { fill: none; stroke: var(--sonne); stroke-width: 2; }
.bogen .punkt { fill: var(--sonne); stroke: var(--karte); stroke-width: 2; }
.bogen .achse { fill: var(--leise); font-size: 9px; }

.ablauf th, .ablauf td { padding: .32rem .25rem; border-top: 1px solid var(--rand); text-align: right; white-space: nowrap; }
.ablauf thead th { border-top: 0; font-size: .78rem; color: var(--leise); font-weight: 500; }
.ablauf th:first-child, .ablauf td:first-child { text-align: left; white-space: normal; }
.ablauf .erkl { display: block; font-size: .75rem; color: var(--leise); }
.ablauf tr.aktiv td { background: var(--gitter); font-weight: 650; }
.ablauf tr.vorbei td:nth-child(2) { opacity: .5; }

/* Sensoren */
.geraete { margin: 0; }
.geraete dt { font-weight: 600; margin-top: .7rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.geraete dt:first-child { margin-top: 0; }
.geraete dd { margin: .15rem 0 0; font-size: .92rem; }
.liste { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.liste li { margin: .3rem 0; }

/* ---------------------------------------------------------------- Diagramme */
.diagramm-block:empty { display: none; }
.block-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .5rem; margin: .2rem 0 .3rem; }
.umschalter { display: inline-flex; border: 1px solid var(--rand); border-radius: 99px; overflow: hidden; }
.umschalter button { font: inherit; font-size: .8rem; padding: .32rem .62rem; border: 0; background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; }
.umschalter button[aria-pressed="true"] { background: var(--akzent); color: #fff; }
.umschalter button:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
figure { margin: 0 0 .8rem; min-width: 0; }
figcaption { font-size: .85rem; color: var(--leise); margin-bottom: .2rem; }
.diagramm { position: relative; width: 100%; height: 190px; touch-action: pan-y; }
.diagramm.klein { height: 80px; }
@media (min-width: 560px) { .diagramm.klein { height: 100px; } }
.diagramm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.diagramm .gitter { stroke: var(--gitter); stroke-width: 1; }
.diagramm .null { stroke: var(--warm); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.diagramm .achse { fill: var(--leise); font-size: 11px; }
.diagramm .nacht { fill: var(--nacht); }
.diagramm .kreuz { stroke: var(--leise); stroke-width: 1; }
.diagramm .info {
  position: absolute; top: -4px; pointer-events: none; background: var(--karte); border: 1px solid var(--rand);
  border-radius: 8px; padding: .25rem .5rem; font-size: .78rem; white-space: nowrap; z-index: 2;
}
.diagramm .info[hidden] { display: none; }
.diagramm .leer { position: absolute; inset: 0; display: grid; place-items: center; color: var(--leise); font-size: .9rem; }

/* ---------------------------------------------------------------- Fuß (alle Seiten) */
.fuss {
  max-width: 1100px; margin: 1.2rem auto 0; padding: .9rem 1rem 2rem;
  font-size: .82rem; line-height: 1.5; color: var(--leise); text-align: center;
}
.fuss p { margin: 0; }
.fuss b { color: var(--text); }

/* ---------------------------------------------------------------- Unterseiten (Impressum, Datenschutz) */
.rechtstext {
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1rem 1.2rem 1.4rem; max-width: 52rem; margin: .4rem auto 0; overflow-wrap: anywhere;
}
.rechtstext h1 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin-bottom: .6rem; }
.rechtstext h2 { font-size: 1.2rem; margin: 1.4rem 0 .4rem; }
.rechtstext h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.rechtstext h4 { font-size: .95rem; margin: .8rem 0 .2rem; }
.rechtstext p, .rechtstext li { max-width: 70ch; }