/* Batteriespeicher-Atlas – Stile für /atlas/ und Steckbriefe. Tokens aus legal.css. */
/* hidden muss gegen display:grid/flex der Komponenten gewinnen */
.atlas-seite [hidden] { display: none !important; }
/* Sprungziele (#liste, Fokus, scrollIntoView) nicht unter dem Sticky-Kopf (65 px) aus legal.css */
html:has(body.atlas-seite) { scroll-padding-top: 80px; }
:root {
  --atlas-betrieb: #16a34a;
  /* Geister-Säulen; Deckkraft über --atlas-planung-alpha. Hell ein gedämpftes Amber (Kupfer) und fast deckend: auch die
     beleuchtete Seite hält ≥ 3 : 1 zu Kreisfläche und Bühne (WCAG 1.4.11, U9; vorher Median 1,4 : 1). Gegenüber dem
     Amber-Text #b45309 weniger gesättigt, damit Grün (gebaut) führt – gemessen Median 3,79 (Startansicht), 4,39 (nah) */
  --atlas-planung: #a0622d;
  --atlas-planung-alpha: 85%;
  --atlas-kappe: #78350f;                /* Kapp-Marke gekürzter Säulen: dunkler als die Geister */
  --atlas-betrieb-text: #15803d;         /* Grün/Amber als Text: AA auf hellem Grund */
  --atlas-planung-text: #b45309;
  --atlas-neu: #0f766e;
  --atlas-neu-alpha: 90%;                /* Neu-Ring in Ruhe (vorher 55 %, 1,5 px: 2 : 1) */
  --atlas-neu-breite: 2;
  --atlas-auswahl: #2563eb;              /* gewählter Kreis (Fläche, Grenze, Säulen): Blau hebt sich von Grün und Amber ab */
  --atlas-auswahl-blink: #1e3a8a;        /* Blink-Takt: dunkler statt heller, ≥ 3 : 1 zur Fläche (K2) */
  --atlas-hover: #22c55e;
  --atlas-buehne: #eef1ee;
  --atlas-land: #f8faf8;
  --atlas-flaeche: #ffffff;
  --atlas-grenze: #d4dbd5;
  --atlas-grenze-land: #8a968d;
  /* nur CSS: Glas der Einblendungen über der Karte, Lichtkegel der Bühne */
  --atlas-glas: color-mix(in srgb, var(--bg) 84%, transparent);
  --atlas-schatten: 0 1px 2px rgba(9, 9, 11, .05), 0 8px 24px rgba(9, 9, 11, .07);
  --atlas-vignette: rgba(28, 46, 34, .10);
  /* Tuch über den Säulen (Darstellung „Fläche“, Betreiberwunsch Runde 3 „A Markengrün“): ein Verlauf für alle Status, hell
     von Hellmint (Täler) zu Dunkelgrün (Gipfel); gleichmäßig über die Farbleiste, dazwischen weich. Weit weg vom Blau der
     Auswahl (CIELCh-Farbton 146–152° gegen 273–293°). Deckkraft des Tuchs, Glut = wie stark die Gipfel unabhängig vom Licht
     leuchten (dunkel). Stützen in der Fläche: „in Betrieb“ neutral statt grün – im grünen Tuch verschwänden sie sonst */
  --atlas-tuch-1: #e3f4e6; --atlas-tuch-2: #a7e3b4; --atlas-tuch-3: #4cc472; --atlas-tuch-4: #16a34a; --atlas-tuch-5: #0f5c2e;
  --atlas-tuch-b-alpha: 94%;
  --atlas-tuch-p-alpha: 82%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --atlas-betrieb: #22c55e;
    --atlas-planung: #fbbf24;
    --atlas-planung-alpha: 60%;            /* bei 50 % wirkten die Geister auf der dunklen Bühne bronze */
    --atlas-kappe: #fbbf24;
    --atlas-betrieb-text: #22c55e;
    --atlas-planung-text: #f59e0b;
    --atlas-neu: #5eead4;
    --atlas-neu-alpha: 55%;
    --atlas-neu-breite: 1.5;
    --atlas-auswahl: #3b82f6;
    --atlas-auswahl-blink: #9dc1fb;
    --atlas-hover: #4ade80;
    --atlas-buehne: #070908;
    --atlas-land: #0e1210;
    --atlas-flaeche: #101511;
    --atlas-grenze: #1f2823;
    --atlas-grenze-land: #3b4a40;
    --atlas-glas: color-mix(in srgb, var(--bg) 78%, transparent);
    --atlas-schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .45);
    --atlas-vignette: rgba(0, 0, 0, .55);
    /* dunkel: Täler gedämpft dunkelgrün, die Gipfel leuchten hellgrün */
    --atlas-tuch-1: #16261b; --atlas-tuch-2: #1f5a33; --atlas-tuch-3: #239a4c; --atlas-tuch-4: #3fd17a; --atlas-tuch-5: #b6f5c9;
    --atlas-tuch-b-alpha: 94%;
    --atlas-tuch-p-alpha: 82%;
  }
}

/* ---------- Navigation: aktive Seite (Atlas) bzw. Bereich (Steckbrief) wie auf der Startseite ---------- */
.atlas-seite .nav-link[aria-current] { color: var(--ink); text-decoration: underline 2px var(--atlas-betrieb); text-underline-offset: 6px; }
/* Fußzeile mit fünf Einträgen (T8): umbrechen statt seitlich herausragen (legal.css bleibt unberührt) */
.atlas-seite .footer-inner nav { flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Kopf ---------- */
.atlas-wrap { max-width: 1240px; margin: 0 auto; padding: 20px 20px 64px; }
.atlas-kopf { max-width: 760px; margin: 4px 0 18px; }
/* Marke „Batteriespeicher-Atlas“ über dem Claim: früher eigene Zeile (.atlas-eyebrow), jetzt Teil der H1 (.atlas-h1__marke,
   SEO S5) – beide sehen gleich aus, die Marke erbt nichts von der H1 */
.atlas-eyebrow, .atlas-h1__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 400; line-height: 1.65; letter-spacing: .08em; text-transform: uppercase; color: var(--atlas-betrieb-text); margin: 0 0 8px; }
.atlas-h1__marke { display: block; }
.atlas-kopf h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; margin: 0 0 12px; text-wrap: balance; }
.atlas-lead { color: var(--ink-2); font-size: 17px; line-height: 1.55; margin: 0; max-width: 62ch; }

/* ---------- Instrument: Kennzahlen, Bühne, Zeitleiste ---------- */
.atlas { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }   /* Auswahlfeld darf die Spalte nicht verbreitern */

.atlas-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; display: grid; gap: 2px; align-content: start; }
.kz-label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.kz-wert { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.kz-einheit { font-size: .55em; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.kz--betrieb .kz-wert { color: var(--atlas-betrieb-text); }
.kz--planung .kz-wert { color: var(--atlas-planung-text); }
.kz-sub { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
/* Im Zeitraffer gilt „Angemeldet“ und „Neu“ nur für heute: zurücknehmen statt verstecken – über die Farbe,
   nicht über Deckkraft, damit der Text AA behält */
.atlas--vergangenheit :is(.kz--planung, .kz--neu) .kz-wert { color: var(--ink-3); }
.kz-wert { transition: color .25s ease; }
/* Zusätze und Ersatz-Unterzeilen für die Vergangenheit (atlas.mjs): „Angemeldet – Stand heute“, „nur für heute“;
   Legenden-Einträge und Schalter, die nur heute gelten, werden abgeblendet (Text in ink-3 behält AA) */
.nur-heute, .kz-sub--vergangen { display: none; }
.atlas--vergangenheit :is(.nur-heute--lang, .nur-heute--zusatz) { display: inline; }
.atlas--vergangenheit :is(.kz--planung, .kz--neu) .kz-sub:not(.kz-sub--vergangen) { display: none; }
.atlas--vergangenheit .kz-sub--vergangen { display: block; }
.atlas-check__text { display: grid; }
.atlas--vergangenheit .nur-heute--zeile { display: block; font-size: 11px; line-height: 1.2; }
.atlas--vergangenheit .nur-heute-gedimmt { color: var(--ink-3); }
.atlas--vergangenheit .nur-heute-gedimmt :is(.leg, input) { opacity: .45; }
/* Datenstand-Zeile unter den Kacheln: nur mobil (dort fehlen Lead-Ende und Unterzeilen) */
.atlas-stand-mobil { display: none; }

/* Die Bühne: leicht abgedunkelte Fläche mit Lichtkegel, damit die Säulen leuchten */
.atlas-buehne { position: relative; isolation: isolate; height: min(70vh, 760px); min-height: 460px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--atlas-buehne); border: 1px solid var(--line); }
.atlas-buehne::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 42%, transparent 55%, var(--atlas-vignette) 100%); }
.atlas-map { position: absolute; inset: 0; }
.atlas-map canvas:focus-visible { outline: 2px solid var(--atlas-betrieb-text); outline-offset: -2px; }

/* Beschriftungen an der Säulenspitze: Fähnchen mit Haarlinie (SVG) zur Spitze; Position setzt atlas.mjs */
.atlas-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.atlas-linien { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-linien line { stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 1; }
.atlas-label { position: absolute; left: 0; top: 0; display: grid; justify-items: center; padding: 3px 8px 4px; border-radius: 7px; background: var(--atlas-glas); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); box-shadow: var(--atlas-schatten); font-size: 12px; line-height: 1.25; white-space: nowrap; }
.atlas-label strong { font-weight: 600; color: var(--ink); }
.atlas-label__wert, .atlas-label__geist { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.atlas-label__wert { color: var(--atlas-betrieb-text); }
.atlas-label__geist { color: var(--atlas-planung-text); }
.atlas-label__wert--summe { color: var(--ink-2); }   /* Fläche mit beiden Status: Summe, weder grün noch amber */
.atlas-label--geist { border-color: color-mix(in srgb, var(--atlas-kappe) 45%, var(--line)); }

.atlas-tooltip { position: absolute; left: 0; top: 0; pointer-events: none; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4; box-shadow: var(--atlas-schatten); display: grid; gap: 2px; z-index: 3; max-width: 280px; }
.atlas-tooltip strong { font-weight: 600; }
.atlas-tooltip span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.atlas-hinweis-kappung { font-size: 12px; font-style: italic; color: var(--ink-3); }
.atlas-tooltip .atlas-hinweis-kappung { color: var(--ink-3); }

/* Panel zum gewählten Kreis */
.atlas-panel { position: absolute; top: 12px; right: 56px; width: 300px; max-height: calc(100% - 24px); overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--atlas-schatten); z-index: 4; }
.atlas-panel__zu { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.atlas-panel__zu:hover { background: var(--surface-2); color: var(--ink); }
.atlas-panel__land { margin: 0; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.atlas-panel__titel { margin: 2px 36px 12px 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
/* Fokus nach der Kreissuche (K3): steht für Screenreader im Panel, sichtbar nur nach Tastaturbedienung – als
   Unterstreichung, nicht als Rahmen (der sähe aus wie ein Eingabefeld). data-fokus setzt atlas.mjs. */
.atlas-panel__titel:focus { outline: none; }
.atlas-panel__titel[data-fokus="tastatur"]:focus { text-decoration: underline 2px var(--atlas-betrieb-text); text-underline-offset: 5px; }
.atlas-panel__werte { margin: 0; display: grid; gap: 0; }
.atlas-panel__werte div { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.atlas-panel__werte dt { font-size: 12px; color: var(--ink-3); }
.atlas-panel__werte dd { margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; font-variant-numeric: tabular-nums; }
.atlas-panel__werte dd.atlas-hinweis-kappung { font-family: inherit; font-size: 12px; }
.atlas-panel__betrieb { color: var(--atlas-betrieb-text); }
.atlas-panel__planung { color: var(--atlas-planung-text); }
.atlas-panel__aus-text { display: none; }
.atlas-panel__werte .atlas-panel__aus :is(dt, dd) { color: var(--ink-3); }   /* Status ausgeblendet: Zahl bleibt, abgeblendet */
.atlas-panel__aus .atlas-panel__aus-text { display: inline; }
.atlas-panel__links { margin: 12px 0 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.atlas-panel__links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.atlas-panel__links a:hover { text-decoration-color: var(--ink); }
.atlas-panel__steckbrief { font-weight: 600; }

/* Ladehinweis in der Bühne, bis die Karte bereit ist (U12); ohne JavaScript setzt niemand data-atlas */
.atlas-laden { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; margin: 0; padding: 24px; color: var(--ink-3); font-size: 14px; pointer-events: none; }
html[data-atlas="bereit"] .atlas-laden, html[data-atlas="fallback"] .atlas-laden { display: none; }
@media (scripting: none) { .atlas-laden { display: none; } }

/* Beide Status ausgeblendet (oder nur Angemeldete in der Vergangenheit): Hinweis mitten auf der Bühne, die Kennzahlen bleiben */
.atlas-leer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: grid; gap: 4px; margin: 0; padding: 14px 20px; width: max-content; max-width: min(360px, calc(100% - 32px)); text-align: center; background: var(--atlas-glas); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--atlas-schatten); }
.atlas-leer strong { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.atlas-leer span { font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* Ohne WebGL2 oder bei Ladefehler: Hinweis statt Karte, Kennzahlen im Fluss */
.atlas-hinweis { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; margin: 0; color: var(--ink-2); background: var(--surface); z-index: 5; }
.atlas--fallback .atlas-map, .atlas--fallback .atlas-legende { display: none; }
/* Von der Steuerleiste bleibt ohne Karte nur die Kreissuche (sie führt zum Steckbrief); ohne Suche entfällt die Leiste */
.atlas--fallback .atlas-steuerung > :not(.atlas-suche), .atlas--fallback .atlas-steuerung:not(:has(.atlas-suche)) { display: none; }
.atlas--fallback .atlas-steuerung { margin-top: 12px; border-top: 1px solid var(--line); border-radius: var(--radius-lg); }
.atlas--fallback .atlas-suche { flex: 1 1 100%; max-width: 420px; }
.atlas--fallback .atlas-buehne { height: auto; min-height: 160px; border-radius: var(--radius-lg); }
.atlas--fallback .atlas-buehne::after { display: none; }

.atlas-legende { position: absolute; left: 12px; bottom: var(--atlas-legende-unten, 12px); max-height: var(--atlas-legende-platz, 140px); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 10px 12px; list-style: none; background: var(--atlas-glas); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; line-height: 1.4; color: var(--ink-2); display: grid; gap: 5px; z-index: 2; max-width: 300px; }
.atlas-legende li { display: flex; align-items: center; gap: 8px; }
.leg { flex: none; width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.leg--betrieb { background: var(--atlas-betrieb); }
.leg--planung { background: color-mix(in srgb, var(--atlas-planung) var(--atlas-planung-alpha), var(--atlas-flaeche)); box-shadow: inset 0 0 0 1px var(--atlas-planung-text); }
.leg--neu { border: 2px solid var(--atlas-neu); border-radius: 50%; background: transparent; }
.leg-kappe { color: var(--atlas-planung-text); }
.atlas-legende-kurz { display: none; }
.leg-hinweis { color: var(--ink-3); }
.leg-hinweis:empty { display: none; }
.atlas-legende .leg-massstab { display: block; }
/* Ausgeblendete Status: Eintrag abgeblendet (Text in ink-3 behält AA) */
:is(.atlas--ohne-betrieb .leg-status-b, .atlas--ohne-planung .leg-status-p) { color: var(--ink-3); }
:is(.atlas--ohne-betrieb .leg-status-b, .atlas--ohne-planung .leg-status-p) .leg { opacity: .35; }
/* Darstellung „Fläche“: statt Säulen-Einträgen und Maßstab die Farbleiste des Tuchs (atlas.mjs) */
.atlas--flaeche :is(.atlas-legende, .atlas-legende-kurz) .leg-saeulen { display: none; }
.atlas-legende .leg-flaeche { display: grid; gap: 4px; width: 236px; max-width: 100%; }
.leg-flaeche__titel { color: var(--ink); font-weight: 500; }
.leg-flaeche__leiste { display: block; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.leg-flaeche__grenzen { position: relative; height: 15px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.leg-flaeche__grenzen span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.leg-flaeche__minmax { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.leg-flaeche__groesster { margin-top: -3px; color: var(--ink-3); }
.leg-flaeche__tuch { margin-top: 2px; color: var(--ink-3); }
.leg-flaeche-kurz { display: inline-flex; align-items: center; gap: 6px; }
.leg-flaeche-kurz .leg-flaeche__leiste { width: 70px; flex: none; }
.leg-flaeche__wert { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-variant-numeric: tabular-nums; }
.leg-flaeche__status { display: grid; gap: 3px; margin-top: 4px; min-width: 0; }
.leg-flaeche__statuskopf { display: flex; align-items: center; gap: 5px; color: var(--ink-2); }
.leg-flaeche__punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.leg-flaeche__bereich { margin-left: auto; font-size: 10px; font-variant-numeric: tabular-nums; }
/* „Was bedeuten die Beschriftungen?“ – Desktop als letzter Eintrag der Legende, mobil als Zeile unter der Legendenzeile */
.atlas-legende .leg-erklaerung { display: block; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 6px; margin-top: 1px; }
.atlas-erklaerung > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--ink-2); }
.atlas-erklaerung > summary::-webkit-details-marker { display: none; }
.atlas-erklaerung > summary::before { content: "i"; flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; font: 600 9px/1 'IBM Plex Mono', ui-monospace, monospace; }
.atlas-erklaerung > summary:hover { color: var(--ink); }
.atlas-erklaerung > summary:focus-visible { outline: 2px solid var(--atlas-betrieb-text); outline-offset: 2px; border-radius: 4px; }
.atlas-erklaerung > p { margin: 6px 0 2px; font-size: 12px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* Die Erklärung bleibt im begrenzten Scrollbereich der Legende. */
.atlas-legende .atlas-erklaerung > p { position: static; width: auto; max-width: 100%; }
.atlas-erklaerung--kurz { display: none; }

/* Zu wenig Höhe zwischen Kennzahlen und Panel: Legende unter die Bühne setzen. */
.atlas--legende-unten .atlas-legende { display: none; }
.atlas--legende-unten .atlas-legende-kurz { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; padding: 8px 12px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-top: 0; font-size: 12px; }
.atlas--legende-unten .atlas-legende-kurz li { display: inline-flex; align-items: center; gap: 6px; }
.atlas--legende-unten .atlas-legende-kurz .leg-flaeche-kurz { display: grid; gap: 5px; width: 100%; max-width: 380px; }
.atlas--legende-unten .leg-flaeche__status--kurz { grid-template-columns: minmax(0, 1fr) 55px; align-items: center; }
.atlas--legende-unten .leg-flaeche-tuch { flex-basis: 100%; text-align: center; color: var(--ink-3); }
.atlas--legende-unten .atlas-erklaerung--kurz { display: block; padding: 8px 12px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-top: 0; font-size: 12px; }
.atlas--legende-kompakt .atlas-legende :is(.leg-flaeche__titel, .leg-flaeche__groesster, .leg-flaeche__grenzen) { display: none; }

/* Navigations-Knöpfe der Karte im Hausstil (auch dunkel) */
.atlas .maplibregl-ctrl-top-right { top: 4px; right: 4px; }
.atlas .maplibregl-ctrl-group { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--atlas-schatten); overflow: hidden; }
.atlas .maplibregl-ctrl-group:not(:empty) { box-shadow: var(--atlas-schatten); }
.atlas .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.atlas .maplibregl-ctrl button:not(:disabled):hover { background-color: var(--surface-2); }
/* Gesamtansicht (Haus): Linien-Symbol in der Farbe der MapLibre-Symbole (#333; dunkel wie deren Invertierung) */
.atlas .atlas-gesamt { display: grid; place-items: center; color: #333; }
.atlas .atlas-gesamt svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Zeitleiste */
.atlas-steuerung { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.atlas-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.atlas-play:hover { transform: scale(1.05); }
.atlas-play.spielt { background: var(--atlas-betrieb-text); border-color: var(--atlas-betrieb-text); color: #fff; }
@media (prefers-color-scheme: dark) { .atlas-play.spielt { color: var(--bg); } }   /* Weiß auf #22c55e: 2,3:1 */
.atlas-play svg { fill: currentColor; }
.atlas-play .ico-pause, .atlas-play.spielt .ico-play { display: none; }
.atlas-play.spielt .ico-pause { display: inline; }
/* Zeile 1: Abspielen und Regler; Zeile 2: Einheit, Darstellung, Status-Schalter und rechts die Kreissuche */
.atlas-zeit { flex: 1 1 calc(100% - 62px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.atlas-regler { width: 100%; accent-color: var(--atlas-betrieb); cursor: pointer; }
.atlas-monat { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 20px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; min-width: 23ch; text-align: right; color: var(--ink); }   /* „02.10.2026 (Datenstand)“: der Regler behält seine Länge */
.atlas-schalter { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg); }
.atlas-schalter button { border: 0; background: transparent; color: var(--ink-2); padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; min-width: 56px; }
.atlas-schalter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.atlas-schalter button:disabled { color: var(--ink-3); cursor: not-allowed; }   /* „Fläche“ ohne Tuch (atlas.mjs ohneTuch) */
.atlas-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; min-height: 40px; }
.atlas-check input { width: 16px; height: 16px; accent-color: var(--atlas-planung-text); }
.atlas-check--betrieb input { accent-color: var(--atlas-betrieb-text); }
.atlas-check--beschriftung input { accent-color: var(--ink-2); }   /* „Beschriftungen zeigen“: neutral, kein Status */
.atlas-checks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.atlas-steuerung > :is(.atlas-kreiswahl, .atlas-suche) { margin-left: auto; }
.atlas-kreiswahl { font: inherit; font-size: 14px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); cursor: pointer; }
/* Kreissuche (Combobox aus atlas.mjs; ohne JavaScript bleibt das Auswahlfeld – gleiche Breite, kein Sprung beim Tausch).
   Die Liste öffnet nach oben über Karte, Beschriftungen und Kennzahlen (z-index über 5/6, unter der Kopfzeile 100). */
.atlas-kreiswahl, .atlas-suche { flex: 0 1 280px; min-width: 0; }
.atlas-suche { position: relative; z-index: 7; }
.atlas-suche__feld { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; min-height: 40px; margin: 0; padding: 6px 38px 6px 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.atlas-suche__feld::placeholder { color: var(--ink-3); opacity: 1; }
.atlas-suche__lupe { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.atlas-suche__leeren { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; }
.atlas-suche__leeren:hover { background: var(--surface-2); color: var(--ink); }
.atlas-suche__popup { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; padding: 6px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--atlas-schatten); }
.atlas-suche--unten .atlas-suche__popup { bottom: auto; top: calc(100% + 6px); }
.atlas-suche__kopf { flex: none; margin: 0; padding: 6px 10px 4px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.atlas-suche__liste { min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.atlas-suche__treffer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name wert" "land wert"; align-items: center; column-gap: 12px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.atlas-suche__treffer:hover { background: var(--surface); }
.atlas-suche__treffer[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--atlas-betrieb-text); }
.atlas-suche__name { grid-area: name; font-size: 14px; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-suche__name mark { background: none; color: inherit; font-weight: 600; }
.atlas-suche__land { grid-area: land; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.atlas-suche__wert { grid-area: wert; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--atlas-betrieb-text); white-space: nowrap; }
.atlas-suche__wert--p { color: var(--atlas-planung-text); }
.atlas-suche__wert--s { color: var(--ink-2); }
.atlas-suche__wert--leer { color: var(--ink-3); }
.atlas-suche__ansage { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.atlas-suche__nichts { padding: 10px; font-size: 14px; font-style: italic; color: var(--ink-3); }
.atlas-seite :is(.atlas-play, .atlas-regler, .atlas-check input, .atlas-panel__zu, .atlas-kreiswahl, .atlas-suche__feld):focus-visible { outline: 2px solid var(--atlas-betrieb-text); outline-offset: 2px; }
/* Links (Panel, Rangliste, Länder, Kreisliste) im Hausstil wie im Steckbrief statt im Browser-Ring */
.atlas-seite a:focus-visible { outline: 2px solid var(--atlas-betrieb-text); outline-offset: 2px; border-radius: 4px; }
/* In Gruppen mit overflow:hidden (Schalter, Kartenknöpfe) würde ein äußerer Ring abgeschnitten: Ring nach innen */
.atlas-seite .atlas-schalter button:focus-visible,
.atlas .maplibregl-ctrl-group button:focus:focus-visible { outline: 2px solid var(--atlas-betrieb-text); outline-offset: -2px; box-shadow: none; }

/* ---------- Kreisliste und Quellen ---------- */
/* Kreisliste: standardmäßig eingeklappt (<details id="liste">, Betreiberwunsch) – die Links bleiben im HTML (Crawl-Pfad,
   Fallback); Sprungziele klappen sie auf (atlas.mjs). Kopf wie die FAQ der Startseite: Titel links, Plus/Minus rechts */
.atlas-liste { margin-top: 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.atlas-liste > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; cursor: pointer; list-style: none; }
.atlas-liste > summary::-webkit-details-marker { display: none; }
.atlas-liste > summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 300; line-height: 1; color: var(--ink-3); }
.atlas-liste[open] > summary::after { content: "\2212"; }
.atlas-liste > summary:hover h2 { color: var(--ink-2); }
.atlas-liste > summary:focus-visible { outline: 2px solid var(--atlas-betrieb-text); outline-offset: 2px; border-radius: 4px; }
.atlas-liste[open] { padding-bottom: 16px; }
.atlas-liste h2 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; margin: 0; }
.atlas-liste-intro { color: var(--ink-3); font-size: 15px; margin: 0 0 24px; }
/* Sprungleiste der 16 Länder über der Kreisliste (U10); die Anker landen dank scroll-padding-top unter dem Kopf */
.kreisliste-laender { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 28px; font-size: 14px; line-height: 1.5; }
.kreisliste-laender a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.kreisliste-laender a:hover { text-decoration-color: var(--ink); }
.kreisliste { columns: 3 280px; column-gap: 32px; }
.kreisliste-land { break-inside: avoid; margin: 0 0 24px; }
.kreisliste-land h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 6px; }
.kreisliste-land ul { list-style: none; margin: 0; padding: 0; }
.kreisliste-land li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; padding: 5px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; line-height: 1.4; }
.kreisliste-land a { color: var(--ink); text-decoration: none; }
.kreisliste-land a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* „2 in Betrieb (5,9 MW) · 5 angemeldet (12,3 MW)“: umbrechen nur zwischen den Status (bis 338 px breit) */
.kreisliste-info { margin-left: auto; color: var(--ink-3); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; white-space: normal; text-align: right; font-variant-numeric: tabular-nums; }
.kreisliste-teil { white-space: nowrap; }
.kreisliste .kreisliste-markiert { background: color-mix(in srgb, var(--atlas-auswahl) 10%, transparent); box-shadow: inset 3px 0 0 var(--atlas-auswahl); padding-left: 10px; }   /* #kreis= ohne Karte */
.kreisliste-info--leer { color: var(--ink-3); font-style: italic; }   /* keine Deckkraft: Text behält ≥ 4,5:1 */
.atlas-quellen { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.atlas-quellen a { color: var(--ink-2); text-underline-offset: 2px; overflow-wrap: anywhere; }   /* lange Quellen-URL (BKG) bei 320 px */
/* Extern-Pfeil „↗“: inline-block unterbricht die Unterstreichung des Links */
:is(.atlas-quellen, .sb-aktion) a > span[aria-hidden="true"] { display: inline-block; text-decoration: none; font-size: .85em; }

/* Rangliste „Die größten Speicher-Kreise“ (U11): zwei Top-10-Listen nebeneinander, mobil untereinander.
   Die Zeile bleibt ein Listenelement (Nummer als ::marker), der Wert steht rechts in Höhe der ersten Zeile. */
.rangliste-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 48px; }
.rangliste-block h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 6px; }
ol.rangliste { margin: 0; padding: 0 0 0 2em; }
ol.rangliste li { position: relative; padding: 5px 6.5em 5px 2px; border-bottom: 1px solid var(--line-2); font-size: 14px; line-height: 1.4; }
ol.rangliste li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rangliste-name a { color: var(--ink); text-decoration: none; }
.rangliste-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rangliste-wert { position: absolute; top: 5px; right: 0; line-height: 19.6px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rangliste-leer { color: var(--ink-3); font-style: italic; font-size: 14px; margin: 0; }

/* ---------- Desktop: Kennzahlen als Anzeige oben links auf der Bühne ---------- */
@media (min-width: 768px) {
  .atlas-kennzahlen { position: absolute; top: 12px; left: 12px; z-index: 5; width: 236px; grid-template-columns: 1fr; gap: 0; background: var(--atlas-glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--atlas-schatten); }
  .atlas-kennzahlen .kz { background: none; border: 0; border-radius: 0; padding: 12px 16px; }
  .atlas-kennzahlen .kz + .kz { border-top: 1px solid var(--line); }
  .kz-wert { font-size: 26px; }
  .atlas-kennzahlen .kz-sub { font-size: 12px; }
  .atlas--fallback .atlas-kennzahlen { position: static; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
  .atlas--fallback .atlas-kennzahlen .kz + .kz { border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .atlas-kopf { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .atlas-eyebrow { grid-column: 1; grid-row: 1; }
  .atlas-kopf h1 { grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(32px, 2.9vw, 40px); }
  .atlas-kopf h1.atlas-h1 { grid-row: 1 / span 2; }   /* trägt die Marke selbst: beide Zeilen der Eyebrow-Anordnung */
  .atlas-lead { grid-column: 2; grid-row: 1 / span 2; font-size: 15px; justify-self: end; }
}

/* Tablet hochkant und mobil: Panel als Bottom-Sheet (rechts bliebe neben Panel und Kennzahlen kaum Karte) */
@media (max-width: 1023px) {
  .atlas-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 45%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; padding: 12px 18px 0; }
  /* kompakt: je Kennzahl eine Zeile (Bezeichnung links, Wert rechts; bei Platzmangel darunter), engere Abstände;
     die Link-Zeile bleibt als Fußzeile am unteren Rand des Sheets sichtbar, auch wenn der Inhalt scrollt */
  .atlas-panel__titel { font-size: 18px; margin-bottom: 8px; }
  .atlas-panel__werte div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; padding: 6px 0; }
  .atlas-panel__werte dd.atlas-hinweis-kappung { flex-basis: 100%; }
  .atlas-panel__links { position: sticky; bottom: 0; margin: 0 -18px; padding: 10px 18px 12px; background: var(--bg); border-top: 1px solid var(--line-2); }
}

/* 768–1023 px: Kennzahlen liegen als Anzeige (z-index 5, außerhalb der Bühne) über der Karte und ragen bei niedrigem Viewport
   (≤ ~790 px) in den Kopf des Sheets. Die Bühne bildet dort keinen eigenen Stapelkontext mehr, damit das Sheet (6)
   die Kennzahlen überdeckt statt umgekehrt; z-index 1–6 ihrer Kinder bleibt weit unter der Kopfzeile (100). */
@media (min-width: 768px) and (max-width: 1023px) {
  .atlas-buehne { isolation: auto; }
  .atlas-panel { z-index: 6; }
}

@media (max-width: 767px) {
  .atlas-wrap { padding: 12px 16px 48px; }
  .atlas-kopf { margin: 0 0 8px; }
  .atlas-eyebrow { display: none; }              /* Navigation nennt „Atlas“ schon; Platz für die Karte */
  /* Die Marke ist Teil der Überschrift: nur visuell ausblenden, für Screenreader und Suche bleibt sie im Namen der H1 */
  .atlas-h1__marke { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .atlas-kopf h1 { font-size: 26px; margin-bottom: 4px; }
  .atlas-lead { font-size: 14px; line-height: 1.45; }
  .atlas-lead-mehr { display: none; }
  /* Kennzahlen kompakt in einer Zeile, damit die Karte oben bleibt (Spec 4.3: Oberkante ≤ 300 px – auch mit der
     Datenstand-Zeile darunter: Abstände und Zeilenhöhe der Bezeichnungen dafür enger) */
  .atlas-kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
  .kz { padding: 7px 8px; border-radius: var(--radius); min-width: 0; }
  .kz-label { font-size: 11px; }
  .atlas-kennzahlen .kz-label { line-height: 1.3; }
  /* schmal (≤ 375 px): Wert schrumpft mit, die Einheit darf in die nächste Zeile */
  .kz-wert { font-size: clamp(15px, 4.4vw, 18px); word-spacing: -.25em; }
  .kz-sub { display: none; }
  .atlas--vergangenheit .kz-sub--vergangen { display: none; }
  .atlas--vergangenheit .nur-heute--lang { display: none; }
  .atlas--vergangenheit .nur-heute--kurz { display: inline; }
  .atlas-stand-mobil { display: block; margin: -3px 0 4px; font-size: 12px; line-height: 15px; color: var(--ink-3); }
  /* Farbbedeutung bleibt sichtbar: kompakte Legendenzeile zwischen Karte und Zeitleiste */
  .atlas-legende-kurz { display: flex; justify-content: center; gap: 6px 14px; margin: 0; padding: 7px 10px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-bottom: 1px solid var(--line-2); font-size: 12px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
  .atlas-legende-kurz li { display: inline-flex; align-items: center; gap: 6px; }
  /* Fläche: der Satz zum Tuch als zweite Zeile, darf umbrechen */
  .atlas--flaeche .atlas-legende-kurz { flex-wrap: wrap; }
  .atlas-legende-kurz .leg-flaeche-kurz { display: grid; gap: 5px; width: 100%; max-width: 380px; white-space: normal; }
  .leg-flaeche__status--kurz { grid-template-columns: minmax(0, 1fr) 55px; align-items: center; margin: 0; }
  .atlas-legende-kurz .leg-flaeche__leiste { width: 55px; height: 7px; }
  .atlas-legende-kurz .leg-flaeche-tuch { display: block; flex-basis: 100%; white-space: normal; text-align: center; color: var(--ink-3); }
  .atlas--fallback .atlas-legende-kurz { display: none; }
  .atlas-buehne { height: 62vh; min-height: 380px; border-radius: var(--radius) var(--radius) 0 0; }
  .atlas-steuerung { border-radius: 0 0 var(--radius) var(--radius); }
  .atlas-legende { display: none; }
  .atlas-steuerung { padding: 12px; gap: 12px 10px; }
  .atlas-zeit { flex-basis: 100%; order: -1; grid-template-columns: 1fr; gap: 4px; }
  .atlas-monat { order: -1; font-size: 17px; min-width: 0; text-align: left; }
  .atlas-schalter button { min-width: 48px; padding: 8px 9px; }
  .atlas-check { font-size: 13px; }
  .atlas-checks { flex-basis: 100%; gap: 0 16px; }
  .atlas-steuerung > :is(.atlas-kreiswahl, .atlas-suche) { margin-left: 0; }
  /* Erklärung der Beschriftungen als Zeile unter der Legendenzeile (gleicher Grund, aufklappbar) */
  .atlas-erklaerung--kurz { display: block; margin: 0; padding: 6px 12px 7px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-bottom: 1px solid var(--line-2); font-size: 12px; text-align: center; }
  .atlas-erklaerung--kurz[open] { text-align: left; }
  .atlas-erklaerung--kurz > summary { min-height: 24px; }
  .atlas--fallback .atlas-erklaerung--kurz { display: none; }
  .atlas-kreiswahl, .atlas-suche { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; }
}
/* Touch und schmal: 16 px, sonst zoomt iOS beim Fokus ins Feld */
@media (max-width: 767px), (pointer: coarse) {
  .atlas-kreiswahl, .atlas-suche__feld { font-size: 16px; }
}
@media (max-width: 375px) {
  .atlas-seite .footer-inner nav { gap: 8px 16px; }
  .kz-wert { white-space: normal; }
  .kz-wert > span:first-child, .kz-einheit { white-space: nowrap; }
}
/* Touch (U22): Ziele mit ausreichender Fläche (Empfehlung 44 px; WCAG 2.5.8 ist über den Abstand ohnehin erfüllt).
   Nur bei grobem Zeiger – mit der Maus bleibt alles wie gehabt. */
@media (pointer: coarse) {
  .kreisliste-laender { gap: 0 16px; }
  /* Textlinks: der Abstand der Zeile liegt im Link (trifft mit), nicht als Polster daneben */
  :is(.kreisliste-laender, .kreisliste-land, .atlas-panel__links) a { display: inline-flex; align-items: center; min-height: 44px; }
  .kreisliste-land li, ol.rangliste li { padding-top: 0; padding-bottom: 0; }
  .kreisliste-info { padding-bottom: 8px; }   /* umgebrochen: Luft zur Linie (nicht hochziehen – sonst läge der Fokusring des Links darüber) */
  /* Der Fokusring der hohen Links liegt innen (sonst berührt er die Statuszeile bzw. die Nachbarzeile); 4 px Polster
     seitlich, durch den Rand ausgeglichen, halten ihn vom Text fern, ohne dass sich etwas verschiebt */
  :is(.kreisliste-laender, .kreisliste-land, .rangliste-name, .atlas-panel__links, .sb-nachbarn__liste) a { padding-left: 4px; padding-right: 4px; margin-left: -4px; margin-right: -4px; }
  .atlas-seite :is(.kreisliste-laender, .kreisliste-land, .rangliste-name, .atlas-panel__links, .sb-nachbarn__liste) a:focus-visible { outline-offset: -2px; }
  /* Rangliste: Polster statt Mindesthöhe – zweizeilige Namen behalten den Wert (12,5 px) und die Nummer an der ersten Zeile */
  .rangliste-name a { display: inline-flex; padding-top: 12.5px; padding-bottom: 12.5px; }
  .rangliste-wert { top: 12.5px; }
  /* Nachbarkreise: Link bleibt im Textfluss (umbricht der Wert, rückt er nicht 44 px tiefer); das Polster vergrößert nur
     die Trefferfläche, die Zeile bekommt dieselbe Höhe */
  .sb-nachbarn__liste li { padding: 11.5px 0; }
  .sb-nachbarn__liste a { padding-top: 12.5px; padding-bottom: 12.5px; }
  /* MaStR/Umkreis: inline-block statt Flex – so bleibt der Extern-Pfeil ohne Unterstreichung (Zeile 21 px + 24 px) */
  .sb-aktion a { display: inline-block; padding: 12px 0; }
  .sb-tabelle td.sb-aktion { padding-top: 0; }
  /* Kartenknöpfe 40 px; die Symbole bleiben in ihrer Größe mittig */
  .atlas .maplibregl-ctrl-group button { width: 40px; height: 40px; }
  /* Regler: eigener Daumen (26 px) statt Browser-Optik (≈ 16 px); die Füllung bis zur Daumenmitte setzt atlas.mjs als --anteil (0–1) */
  .atlas-regler { --anteil: 1; -webkit-appearance: none; appearance: none; height: 28px; margin: 0; background: transparent; }
  .atlas-regler::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--atlas-betrieb) calc(13px + (100% - 26px) * var(--anteil)), color-mix(in srgb, var(--ink) 16%, transparent) 0); }
  .atlas-regler::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--atlas-betrieb); box-shadow: var(--atlas-schatten); }
  .atlas-regler::-moz-range-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
  .atlas-regler::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--atlas-betrieb); }
  .atlas-regler::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 2px solid var(--atlas-betrieb); box-shadow: var(--atlas-schatten); }
  .atlas-panel__links { row-gap: 0; }
}
/* Sheet: die Fußzeile mit den Links wächst nicht – das Polster steckt jetzt im Link */
@media (pointer: coarse) and (max-width: 1023px) {
  .atlas-panel__links { padding-top: 0; padding-bottom: 2px; }
}
/* Panel rechts: Abstand zu den breiteren Kartenknöpfen (rechts 14 px + 40 px) */
@media (pointer: coarse) and (min-width: 1024px) {
  .atlas-panel { right: 66px; }
  .atlas-panel__links { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .atlas-play, .kz-wert { transition: none; }
}

/* Dunkel: Kartenknöpfe hell zeichnen */
@media (prefers-color-scheme: dark) {
  .atlas .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
  .atlas .atlas-gesamt { color: #ccc; }
}

/* ---------- Steckbrief ---------- */
.steckbrief h1 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; margin: 6px 0 6px; text-wrap: balance; }
.sb-links a, .sb-aktion a, .sb-sammel a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.sb-links a:hover, .sb-aktion a:hover { text-decoration-color: var(--ink); }
.sb-pfad { font-size: 13px; color: var(--ink-3); }
.sb-pfad a { color: inherit; }
.sb-stand { color: var(--ink-3); font-size: 14px; margin: 0 0 20px; }
/* Einleitung und größte Anlage unter H1 und Datenstand (SEO S3, Markup aus dem Renderer) */
.sb-einleitung { max-width: 68ch; margin: 0 0 10px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.sb-einleitung:not(:has(+ .sb-groesste)), .sb-groesste { margin-bottom: 24px; }
.sb-groesste { max-width: 68ch; margin-top: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sb-kz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.sb-kz .kz-wert { white-space: nowrap; }
.sb-fussnote { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.sb-entwicklung h2, .sb-anlagen h2, .sb-nachbarn h2, .sb-erklaerung h2 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 28px 0 10px; }
.sb-entwicklung-satz { margin: 0 0 8px; font-size: 16px; }   /* ein Balken wäre kein Verlauf: ein Satz (U19) */
.sb-chart { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }   /* mittig in der Inhaltsbreite */
.sb-ohne-datum, .sb-nach-datenstand { max-width: 760px; margin: 4px auto 0; }   /* Hinweise bündig unter dem Diagramm */
.sb-chart rect { fill: var(--atlas-betrieb); }
.sb-chart text { fill: var(--ink-3); font: 11px 'IBM Plex Mono', ui-monospace, monospace; }
.sb-chart .sb-wert { fill: var(--atlas-betrieb-text); font-weight: 500; }   /* Wert über dem Balken: Text-Token, AA */
.sb-tabelle-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.sb-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.sb-tabelle th, .sb-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.sb-tabelle th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); background: var(--surface); }
.sb-tabelle th.num { text-transform: none; }                       /* „MWh“ nicht als „MWH“ */
.sb-tabelle .num { text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.sb-planung td:nth-child(2) { color: var(--atlas-planung-text); }   /* Text-Tokens: AA auf hellem und dunklem Grund */
.sb-betrieb td:nth-child(2) { color: var(--atlas-betrieb-text); }
.sb-hinweis { display: block; font-size: 12px; color: var(--ink-3); }
/* „neu“ hinter dem Status: als Text, nicht nur als Farbe (die Karte zeigt „neu“ als Ring in derselben Farbe) */
.sb-neu { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--atlas-neu); white-space: nowrap; vertical-align: 1px; }
.sb-aktion, .sb-tabelle td[data-label="Status"] { white-space: nowrap; }   /* „Angemeldet NEU“ in einer Zeile */
.sb-aktion a + a { margin-left: 10px; }
.sb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sb-sammel { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.sb-leer { margin: 8px 0 0; max-width: 62ch; padding: 20px 22px; font-size: 17px; line-height: 1.5; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
/* Nachbarkreise (SEO S7): sortiert nach Leistung, spaltenweise zu lesen wie die Kreisliste */
.sb-nachbarn__liste { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 32px; }
.sb-nachbarn__liste li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; line-height: 1.45; }
.sb-nachbarn__liste a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.sb-nachbarn__liste a:hover { text-decoration-color: var(--ink); }
.sb-nachbarn__wert { color: var(--ink-3); font-size: 14px; }
.sb-erklaerung { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 4px 18px 14px; margin-top: 32px; }
.sb-erklaerung h2 { margin-top: 14px; font-size: 16px; }
.sb-erklaerung p { font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 75ch; }
.sb-links { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 24px 0 0; font-size: 15px; }
.steckbrief-seite :is(a, button, [tabindex="0"]):focus-visible { outline: 2px solid var(--atlas-betrieb-text); outline-offset: 2px; border-radius: 4px; }
.steckbrief-seite .sb-tabelle-wrap:focus-visible { outline-offset: 0; border-radius: var(--radius); }
@media (min-width: 1024px) { .sb-kz { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Die Mobil-Regeln der Kartenseite verkleinern .kz global und blenden .kz-sub aus – im Steckbrief bleiben die Karten lesbar */
@media (max-width: 767px) {
  .sb-kz .kz { padding: 12px; border-radius: var(--radius-lg); }
  .sb-kz .kz-label { font-size: 12px; }
  .sb-kz .kz-wert { font-size: clamp(17px, 5.2vw, 24px); word-spacing: normal; }
  .sb-kz .kz-sub { display: block; font-size: 12px; }
  .sb-wert--neben { display: none; }                   /* viele Balken: jeder zweite Wert, sonst überlappen sie */
  .sb-chart text { font-size: 20px; }                  /* viewBox 640 Einheiten breit: skaliert auf Handybreite auf etwa 11 px */
  .sb-einleitung { font-size: 16px; }
}
/* Tabelle als Karten (U5) bis 1023 px: je Anlage ein Block – Gemeinde und Status als Kopfzeile, darunter je Feld
   Beschriftung (data-label) und Wert. Die Kopfzeile der Tabelle bleibt für Screenreader erhalten (nur visuell versteckt).
   Ab 1024 px passt die Tabelle (Reserve bei 1024 px mindestens 75 px, alle Steckbriefe); darunter war sie bei langen
   Namen breiter als der Inhalt und schnitt „Umkreis“ ab (Sichtprüfung M2: bis 900 px gemessen). */
@media (max-width: 1023px) {
  .sb-tabelle-wrap { overflow-x: visible; border: 0; border-radius: 0; }
  .sb-tabelle, .sb-tabelle tbody { display: block; }
  .sb-tabelle thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .sb-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; margin: 0 0 10px; padding: 10px 14px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
  /* lange Firmennamen: zuerst trennen (hyphens, lang="de"), erst wenn das nicht geht mitten im Wort umbrechen */
  .sb-tabelle td { grid-column: 1 / -1; display: flex; gap: 10px; padding: 3px 0; border: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .sb-tabelle td::before { content: attr(data-label); flex: 0 0 7.2rem; color: var(--ink-3); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; }
  /* Wert mit Zusatz („gemeldeter Termin liegt zurück“): der Zusatz in eine eigene Zeile unter dem Wert, bündig mit ihm –
     als Flex-Element stand er sonst als schmale dritte Spalte daneben */
  .sb-tabelle td:has(> .sb-hinweis) { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: 10px; }
  .sb-tabelle td > .sb-hinweis { grid-column: 2; }
  .sb-tabelle td.num { text-align: left; }
  .sb-tabelle td[data-label="Gemeinde"] { grid-column: 1; font-size: 16px; font-weight: 600; padding-bottom: 6px; }
  .sb-tabelle td[data-label="Status"] { grid-column: 2; justify-content: flex-end; text-align: right; padding-bottom: 6px; }
  .sb-tabelle td:is([data-label="Gemeinde"], [data-label="Status"], [data-label="Verweise"])::before { content: none; }
  .sb-tabelle td.sb-aktion { gap: 0 18px; flex-wrap: wrap; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line-2); white-space: normal; }
  .sb-tabelle td.sb-aktion a + a { margin-left: 0; }
}
/* 768–1023 px: Karten zu zweit nebeneinander, so breit wie am Handy. Je Zeile gleich hoch; die Verweise stehen unten
   (letzte Zeile der Karte nimmt den Rest), damit die Linien darüber in einer Höhe liegen. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sb-tabelle tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .sb-tabelle tr { grid-template-rows: repeat(6, auto) 1fr; }
  .sb-tabelle td.sb-aktion { align-self: end; }
}