@charset "utf-8";
/* ==========================================================================
   Brave Power Group — Gestaltung
   --------------------------------------------------------------------------
   Gliederung
     01  Schriften
     02  Token (Farbrollen, Typoskala, Abstände)
     03  Grundlagen
     04  Typografie
     05  Raster und Sektionen
     06  Kopfzeile und Navigation
     07  Inhaltsverzeichnis
     08  Hero
     09  Preiskurve
     10  Kennzahlen, Belege, Glossar
     11  Listen, Tabellen, Definitionslisten
     12  Abschnittstypen
     13  Formulare
     14  Panels und Overlays
     15  Fußzeile
     16  Bewegung und Barrierefreiheit
     17  Druck

   Farbrollen ändern: ausschließlich in Abschnitt 02.
   ========================================================================== */

/* == 01  Schriften ======================================================== */
/* Poppins, selbst gehostet. Die @font-face-Regeln stehen in brand.css
   (src/assets/brand/), das vor dieser Datei geladen wird; 400 und 500 werden
   vorgeladen. Gewichte: 300 große Zahlen, 400 Fließtext, 500 Überschriften,
   Navigation und Buttons, 700 nur Kennzahlen. */

/* == 02  Token ============================================================ */
/* Farben stehen NICHT hier, sondern in tokens.css — sie wechseln mit der
   Tageszeit. Diese Datei kennt nur die semantischen Namen:

     --paper, --paper-2, --paper-3     Seitengrund und Flächentöne
     --deep, --deep-2                  Kapitelflächen. In dunklen Zuständen
                                       sind sie heller als der Grund, nicht
                                       dunkler — abgesetzt bleiben sie immer.
     --text, --text-2                  Schrift auf dem Grund
     --on-deep, --on-deep-2            Schrift auf Kapitelflächen
     --line, --line-strong             Linien, Rahmen, Achsen
     --brand, --brand-on-deep          Rot: die Marke — aktive Zustände, Details
     --brand-fill                      Rot als Fläche: Knopf, Auswahl (weiße Schrift)
     --sym-0 … --sym-4                 die drei Bänder des Logos
     --value, --value-on-deep          Rot (Erlös): wo Wert entsteht
     --charge, --charge-on-deep        Grau (Aufnahme): wo Energie hineinfließt (Daten)
     --negative, --negative-on-deep    Bordeaux, auf dunklem Grund Weiß: negative Preise
     --focus, --focus-on-deep          Fokusring (Tinte, auf dunklem Grund Weiß)

   Wer eine Farbe sucht: tokens.css. Wer eine ändert: danach
   python3 tools/contrast.py ausführen. */

:root {
  /* Schriftrollen */
  --display: var(--bp-font);
  --serif: var(--bp-font);

  /* Typoskala: 64 / 44 / 32 / 24 / 20 / 17 / 15 — eine Stufe unter der
     alten, weil Poppins breiter läuft als die schmale Grotesk zuvor. */
  --t-1: 4rem;
  --t-2: 2.75rem;
  --t-3: 2rem;
  --t-4: 1.5rem;
  --t-5: 1.25rem;
  --t-6: 1.0625rem;
  --t-7: 0.9375rem;

  /* Achtpunktraster */
  --u: 8px;
  --gap: 32px;
  --sec: 128px;
  --wrap: 1200px;
  --measure: 34em;      /* rund 68 Zeichen */

  /* Beschriftungen in Diagrammen. Sie folgen nicht der Fließtextskala:
     Eine Achsenmarke ist kein Text, sie ist ein Maß. Zwei Stufen, mehr
     braucht keine Zeichnung — die kleine für Achsen und Stundenmarken, die
     größere für Namen und Werte. */
  --t-mark: 11px;
  --t-mark-2: 13px;

  --dur: 240ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (max-width: 900px) {
  :root {
    /* Mobil: 40 / 32 / 26 / 21 / 18 / 16 / 14 */
    --t-1: 2.5rem;
    --t-2: 2rem;
    --t-3: 1.625rem;
    --t-4: 1.3125rem;
    --t-5: 1.125rem;
    --t-6: 1rem;
    --t-7: 0.875rem;
    --gap: 20px;
    --sec: 72px;
  }
}

@media (max-width: 480px) {
  :root {
    /* Sehr schmale Geräte: eine Stufe kleiner, damit lange Wörter passen. */
    --t-1: 2.25rem;
    --t-2: 1.875rem;
    --t-3: 1.5rem;
  }
}

/* == 03  Grundlagen ======================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--display);
  font-size: var(--t-6);
  line-height: 1.6;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

::selection { background: var(--brand-fill); color: var(--bp-white); }

/* Fokus: sichtbar, in Signalfarbe, nie unterdrückt. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}
.tone-deep :focus-visible { outline-color: var(--focus-on-deep); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--deep);
  color: var(--on-deep);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  font-family: var(--display);
  font-size: var(--t-7);
}
.skip:focus { left: 16px; top: 16px; }

/* == 04  Typografie ======================================================= */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 calc(var(--u) * 2);
  text-wrap: balance;
  /* Deutsche Komposita sind lang. Ohne Trennung reißt „Batteriespeicher“
     auf schmalen Geräten aus dem Satzspiegel. */
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 { font-size: var(--t-1); letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-4); line-height: 1.2; }
h4 { font-size: var(--t-5); line-height: 1.25; }

p, li, dd, dt, figcaption, caption, th, td {
  /* lang="de" steht am <html>, die Trennmuster kommen vom Browser. */
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Der letzte Rest einer Zeile soll nicht allein stehen. Kostet nichts, wo
   der Browser es nicht kennt. */
p, li, dd { text-wrap: pretty; }
p { margin: 0 0 calc(var(--u) * 2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--t-5);
  line-height: 1.5;
  max-width: 30em;
}

.intro {
  font-size: var(--t-6);
  color: var(--text-2);
  max-width: 30em;
}

.note {
  font-size: var(--t-7);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 42em;
  margin-top: calc(var(--u) * 3);
}
.tone-deep .note { color: var(--on-deep-2); }

.hint {
  font-size: var(--t-7);
  color: var(--text-2);
  line-height: 1.5;
  margin: calc(var(--u) * 0.5) 0 0;
}

strong { font-weight: 500; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--brand); }
.tone-deep a:hover, .ftr a:hover { text-decoration-color: var(--brand-on-deep); }
/* Verweise im Lesetext tragen die Akzentfarbe. Glossar, Belege und
   Navigation haben eigene Regeln und bleiben, wie sie sind. */
.split-body a:not([class]), .prose a:not([class]), .lead a:not([class]),
.intro a:not([class]), .note a:not([class]), .article-body a:not([class]) { color: var(--brand); }
.tone-deep .split-body a:not([class]), .hero-dunkel a:not([class]) { color: var(--brand-on-deep); }

/* Kicker: Versalien in Brave Rot über einer Überschrift — Bereich oder
   Kategorie, nie erfundener Text. */
.kicker {
  margin: 0 0 calc(var(--u) * 2);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--bp-kicker-tracking);
  text-transform: uppercase;
  color: var(--brand);
}
.tone-deep .kicker, .hero-dunkel .kicker { color: var(--brand-on-deep); }
/* Datei- und Feldnamen im Fließtext. Kein Monospace: Die Grotesk im
   Serifensatz unterscheidet sie deutlich genug, ohne technisches Kostüm. */
code {
  font-family: var(--display);
  font-size: 0.94em;
  overflow-wrap: anywhere;
}

.tone-deep { background: var(--deep); color: var(--on-deep); }
.tone-deep h1, .tone-deep h2, .tone-deep h3 { color: var(--on-deep); }
.tone-deep .intro { color: var(--on-deep-2); }

/* Zahlen: Display-Schrift, tabellarisch, Versalziffern. */
.num, .kpi-value, td.num, dd.num, table .num {
  font-family: var(--display);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

/* Textlink ohne Pfeil: eine Linie, die auf Hover kräftiger wird. */
.textlink {
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 2px solid var(--line);
  padding-bottom: 2px;
  display: inline-block;
  transition: border-color var(--dur) var(--ease);
}
.textlink:hover { border-color: var(--brand); }
.textlink:active { border-color: var(--line-strong); }
.tone-deep .textlink { border-color: var(--line-on-deep); }
.tone-deep .textlink:hover { border-color: var(--on-deep); }

.linkbtn:active { opacity: 0.7; }
.linkbtn[disabled] { opacity: 0.45; cursor: not-allowed; }
.linkbtn {
  font: inherit;
  font-size: var(--t-7);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

/* Schaltflächen: primär Brave Rot mit weißer Schrift, auf dunklen Flächen
   Papier, als dritte Stufe nur ein Rahmen. */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 calc(var(--u) * 3);
  background: var(--brand-fill);
  color: var(--bp-white);
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--brand-fill);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
/* Gedrückt: Die Fläche kehrt auf den Ruhewert zurück, statt sich zu
   verschieben. Ein Versatz wäre ein Hover-Lift mit anderem Namen. */
.btn:active { background: var(--brand-fill); border-color: var(--brand-fill); }
/* Deaktiviert heißt: sichtbar vorhanden, sichtbar nicht benutzbar. Bisher
   war das an genau einer Stelle gestaltet, während das Skript den Knopf im
   Marktfenster während des Abrufs deaktiviert — er sah unverändert aus. */
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-paper { background: var(--paper); color: var(--text); border-color: var(--paper); }
/* Nicht Weiß: In den Abendzuständen ist --paper dunkel, und der Text
   darauf fiele auf 1,4:1. --paper-3 liegt in jedem Zustand eine Stufe vom
   Grund weg — nach unten am Tag, nach oben in der Nacht. */
.btn-paper:hover { background: var(--paper-3); border-color: var(--paper-3); }

.btn-ghost { background: transparent; color: inherit; border-color: var(--line-strong); }
.btn-ghost:hover { background: transparent; border-color: currentColor; }
.btn-ghost:active { border-color: var(--line-strong); }

/* == 05  Raster und Sektionen ============================================= */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.sec { padding-block: var(--sec); }
.sec + .sec { padding-top: 0; }
.sec.tone-deep { padding-block: var(--sec); margin-block: 0; }
.sec.tone-deep + .sec { padding-top: var(--sec); }

/* Das tragende Muster: Überschrift links (Spalte 1–4), Fließtext rechts (6–12). */
.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: calc(var(--u) * 3);
  align-items: start;
}
.split-head { grid-column: 1 / 5; }
.split-body { grid-column: 6 / 13; }

@media (max-width: 900px) {
  .split { display: block; }
  .split-head { margin-bottom: calc(var(--u) * 3); }
}

.split-head h2, .split-head h3 { position: sticky; top: 104px; }
/* Das einzige wiederkehrende Rot im Lesefluss: 32 × 2 Pixel über jeder
   Abschnittsüberschrift. Mehr braucht es nicht, damit die Seite die Farbe
   des Logos trägt — und weniger würde man nicht bemerken. */
.split-head > h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: calc(var(--u) * 2);
  background: var(--brand);
}
.tone-deep .split-head > h2::before { background: var(--brand-on-deep); }
@media (max-width: 900px) { .split-head h2, .split-head h3 { position: static; } }

/* Seitenlayout mit Inhaltsverzeichnis */
.layout { display: block; padding-top: var(--sec); }
.layout .sec:first-child { padding-top: 0; }
.layout .content { min-width: 0; }

@media (min-width: 1024px) {
  .layout.has-toc {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: calc(var(--gap) * 1.5);
    align-items: start;
  }
  /* Sektionen im Layout haben ihre eigene Breite, kein zweiter .wrap. */
  .layout .wrap { padding-inline: 0; max-width: none; }
  /* Eine dunkle Fläche neben dem Verzeichnis ist eine Kachel in der
     Textspalte; ohne Innenabstand stünde ihr Text an der Kante. */
  .layout .sec.tone-deep > .wrap { padding-inline: clamp(28px, 3.5vw, 56px); }
}
.layout .sec { padding-inline: 0; }

/* Wo links bereits ein Inhaltsverzeichnis steht, wäre eine zweite Spaltentrennung
   eine Spalte zu viel: Der Fließtext fiele unter 40 Zeichen. Dort steht die
   Überschrift deshalb über dem Text — die Asymmetrie leistet das Verzeichnis. */
@media (min-width: 1024px) {
  .has-toc .split { display: block; }
  .has-toc .split-head { margin-bottom: calc(var(--u) * 3); }
  .has-toc .split-head h2,
  .has-toc .split-head h3 { position: static; }
  .has-toc .split-head .defs { max-width: var(--measure); }
}

/* == 06  Kopfzeile und Navigation ========================================= */

.hdr {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: padding var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* Glas beim Scrollen: halbtransparent über dem Inhalt, leicht gesättigt,
   mit feiner heller Kante. Ohne backdrop-filter und bei
   prefers-reduced-transparency bleibt die Fläche deckend. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hdr.is-small {
    background: color-mix(in srgb, var(--paper) 76%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom-color: color-mix(in srgb, var(--bp-white) 35%, var(--line));
  }
  @media (prefers-reduced-transparency: reduce) {
    .hdr.is-small { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line); }
  }
}
/* Glas, das den Ton annimmt: Liegt dunkler Grund unter der Kopfzeile — der
   Auftakt der Startseite, ein tiefer Abschnitt, der Fuß —, wird sie dunkles
   Glas mit heller Schrift, und durch das Glas scheint, was darunter liegt:
   auf der Startseite die roten Bänder. Den Ton misst site.js (.ist-dunkel);
   bei offenem Menü bleibt sie hell, Kopf und Menü sind dann eine Fläche.
   Ohne backdrop-filter und bei prefers-reduced-transparency: deckend dunkel. */
.js .hdr.ist-dunkel {
  --hdr-ink: var(--on-deep);
  --hdr-ink-2: var(--on-deep-2);
  background: var(--deep);
  border-bottom-color: var(--line-on-deep);
}
.js .hdr.ist-dunkel .logo-gross { content: url("/assets/brand/logo/logo-group-auf-dunkel.svg"); }
.js .hdr.ist-dunkel :is(.brand, .nav-link, .lang, .modus, .burger):focus-visible { outline-color: var(--focus-on-deep); }
.js .hdr.ist-dunkel .nav-item.is-active .nav-link::after { background: var(--brand-on-deep); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .js .hdr.ist-dunkel {
    background: color-mix(in srgb, var(--bp-near-black) 46%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    border-bottom-color: color-mix(in srgb, var(--bp-white) 16%, transparent);
    /* Die Lichtkante oben: eine Haarlinie, kein Schatten. */
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bp-white) 8%, transparent);
  }
  @media (prefers-reduced-transparency: reduce) {
    .js .hdr.ist-dunkel { background: var(--deep); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  }
}
.hdr-inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 84px;
  transition: min-height var(--dur) var(--ease);
}
.hdr.is-small .hdr-inner { min-height: 64px; }

.brand {
  text-decoration: none;
  color: inherit;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* Klickfläche nach WCAG 2.5.5 */
}
/* Das Logo kommt als SVG aus dem Markenpaket (src/assets/brand/logo) und
   steht immer mit GROUP, auf jeder Breite: Es ist das Zeichen nach außen
   (Marco Grünberger, 21. Oktober 2026). 48 px Höhe ergeben 260 px; auf dem
   Telefon steht es mit der Mindestbreite aus BRAND.md, 240 px. */
.logo { display: block; width: auto; }
.logo-gross { height: 48px; }
/* In der dunklen Welt trägt die Kopfzeile die Fassung für dunklen Grund.
   Getauscht wird der Inhalt des Bildes, nicht das Element: Es wird nur
   geladen, was gezeigt wird, und Maße und Platz bleiben gleich. */
[data-daytime="einspeisung"] .hdr .logo-gross,
[data-daytime="nacht"] .hdr .logo-gross { content: url("/assets/brand/logo/logo-group-auf-dunkel.svg"); }
.hdr.is-small .logo-gross { height: 45px; }
@media (max-width: 600px) {
  .logo-gross, .hdr.is-small .logo-gross { width: 240px; height: auto; }
}

.nav { margin-left: auto; }
.nav-list { display: flex; gap: calc(var(--u) * 3); list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  text-decoration: none;
  color: var(--hdr-ink, var(--text));
  position: relative;
}
/* Aktiver Zustand: die einzige Signalfläche in der Kopfzeile, als 2-px-Linie. */
.nav-item.is-active .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  height: 2px;
  background: var(--brand);
}
.nav-toggle {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0;
}
@media (hover: hover) { .nav-toggle { pointer-events: none; } }

.mega {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  z-index: 95;
}
.nav-item .mega[hidden] { display: none; }
.mega-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: calc(var(--gap) * 1.5);
  width: min(880px, 90vw);
  padding: calc(var(--u) * 4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--deep);
  max-width: none;
}
.mega-desc p { font-size: var(--t-7); color: var(--text-2); line-height: 1.55; }
.mega-name {
  font-family: var(--display);
  font-size: var(--t-5);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.015em;
  margin-bottom: calc(var(--u));
}
.mega-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-links a {
  display: block;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mega-links a:hover { background: var(--paper-2); border-left-color: var(--line-strong); }
.mega-title {
  display: block;
  font-family: var(--display);
  font-size: var(--t-6);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mega-text { display: block; font-size: var(--t-7); color: var(--text-2); line-height: 1.5; }

/* Der Raum unter der Bereichsdefinition
   ------------------------------------------------------------------
   Er stand leer, weil die rechte Spalte höher ist als die linke. Statt ihn
   zu dekorieren, trägt er jetzt zwei Dinge: das charakteristische Bild des
   Bereichs und eine Zeile, die beim Aufbau gerechnet wurde. Beides bleibt
   grau — im Kopf der Seite hat keine Signalfarbe etwas zu suchen, und die
   Bedeutungsregel (Grau = Ladung, Rot = Wert) gilt nur dort, wo etwas lädt
   und etwas bewertet wird. */
.mega-desc { display: flex; flex-direction: column; align-items: flex-start; }
/* „Übersicht" war 29 Pixel hoch und damit die einzige Klickfläche im Kopf
   unter 44. Die Höhe entsteht aus dem Innenabstand, der Text bleibt bündig
   zur Definition darüber. */
.mega-desc .textlink { min-height: 44px; display: inline-flex; align-items: center; }
.mega-fill { margin-top: auto; padding-top: calc(var(--u) * 4); width: 100%; }
[data-mega="a"] .mega-fill { display: none; }
/* Ohne Skript stehen alle Felder untereinander im Seitenkopf. Vier
   Miniaturen davor wären dort keine Hilfe, sondern 800 Pixel Vorspann. */
.no-js .mega-fill { display: none; }
.mega-mini[hidden] { display: none; }

.mn-svg { display: block; width: 100%; height: 54px; }
.mn-svg-tall { width: 84px; height: 200px; }
.mn-line, .mn-cut, .mn-win {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mn-line { stroke: var(--line-strong); stroke-width: 1.4px; }
/* Die Kappungsgrenze ist gestrichelt wie im großen Diagramm: eine Grenze,
   die man setzt, keine Messung. */
.mn-cut { stroke: var(--line-strong); stroke-width: 1px; stroke-dasharray: 3 3; }
.mn-win { stroke: var(--line); stroke-width: 1px; }
/* Die Schaltzeichen kommen aus schema.py und bringen ihre Klassen mit.
   Hier bekommen sie nur eine andere Strichstärke und eine andere Farbe —
   die Zeichnung selbst bleibt dieselbe. */
.mn-sc { --sc-w: 1px; }
.mn-sc .sc-l, .mn-sc .sc-bus, .mn-sc .sc-k, .mn-sc .sc-box { stroke: var(--line-strong); }
.mn-sc .sc-dot { fill: var(--line-strong); }

/* Die Stufenleiste im Menü: dieselbe Leiste, ohne Signalfarben. */
.mega-mini .stg-mini { max-width: none; padding-top: 8px; }
.mega-mini .stg-seg.is-here { background: var(--text-2); }
.mega-mini .stg-seg.is-jump::before { background: var(--line-strong); }
/* Die Übergabestufe: ein Strich über dem Segment, so hoch wie die Leiste
   breit ist. Er markiert die Stelle, an der unsere Arbeit endet. */
.mega-mini .stg-seg.is-hand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 1px;
  height: 8px;
  background: var(--text-2);
}

.mega-ctx {
  font-family: var(--display);
  font-size: var(--t-mark-2);
  line-height: 1.4;
  color: var(--text-2);
  margin: calc(var(--u) * 1.5) 0 0;
}

/* „Es ist da oder nicht." Die einzige Bewegung ist eine Deckkraft über
   90 Millisekunden — kurz genug, dass sie das Aufblitzen nimmt, ohne dass
   das Menü einfährt. */
.mega { animation: mega-da 90ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .mega { animation: none; } }
@keyframes mega-da { from { opacity: 0; } to { opacity: 1; } }

.hdr-tools { display: flex; align-items: center; gap: calc(var(--u) * 2); flex: none; }
.lang {
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hdr-ink-2, var(--text-2));
}
.lang:hover { color: var(--hdr-ink, var(--text)); }
/* Der Hell/Dunkel-Regler: ein Zeichen für den Zustand, Wechsel per Klick. */
.modus { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; color: var(--hdr-ink-2, var(--text-2)); cursor: pointer; }
.modus:hover { color: var(--hdr-ink, var(--text)); }
.modus svg { display: none; }
.modus[data-state="auto"] .modus-auto, .modus[data-state="hell"] .modus-sonne, .modus[data-state="dunkel"] .modus-mond { display: block; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: calc(var(--u) * 1.5) calc(var(--u));
}
.burger span { display: block; height: 2px; background: var(--hdr-ink, var(--text)); margin: 4px 0; transition: transform var(--dur) var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Lesefortschritt: 2-px-Linie am Fuß der Kopfzeile, in der Marke — die
   einzige Farbe, die der Kopf trägt. */
/* Ladezustand statt Fortschrittsbalken. Der leere Teil ist die Trennlinie
   der Kopfzeile, die ohnehin da ist — es kostet keinen zusätzlichen Pixel.
   Gefüllt wird von links; die Kante trägt einen Meniskus, und der ist das,
   was einen Füllstand von einem Balken unterscheidet. */
.progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: calc(var(--soc, 0) * 1%);
  background: var(--brand);
}
.progress::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  bottom: -1px;
  width: 2px;
  background: var(--brand);
}

.mnav {
  position: fixed;
  inset: 84px 0 0;
  z-index: 88;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--u) * 3) clamp(20px, 5vw, 56px) calc(var(--u) * 6);
}
/* Nach dem Scrollen ist die Kopfzeile 64 px hoch. Stand das Menü dann
   weiter bei 84 px, blieb ein Streifen der Seite zwischen Kopf und Menü
   stehen — mit dem, was gerade darunter lag, etwa „WIRKUNGSFELDER". */
.hdr.is-small + .mnav { top: 64px; }
.mnav ul { list-style: none; margin: 0; padding: 0; }
.mnav > ul > li { border-bottom: 1px solid var(--line); }
.mnav-link {
  display: block;
  font-family: var(--display);
  font-size: var(--t-4);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
  padding: calc(var(--u) * 2) 0;
}
.mnav-group ul { padding: 0 0 calc(var(--u) * 2); }
.mnav-group ul a {
  display: block;
  padding: calc(var(--u) * 1.25) 0;
  font-size: var(--t-6);
  color: var(--text-2);
  text-decoration: none;
}
.mnav-foot { padding-top: calc(var(--u) * 3); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  /* Ohne Navigation schob nichts die Werkzeuge an den rechten Rand; Sprache
     und Menüknopf klebten an der Wortmarke. */
  .hdr-tools { margin-left: auto; }
}
@media (min-width: 1081px) { .mnav { display: none !important; } }
/* Telefon: Neben dem Logo mit GROUP stehen nur Sprache und Menü. Vorher
   ragte der Menüknopf bei 390 px zwölf Pixel über den Rand, und die ganze
   Seite ließ sich seitlich verschieben. Hell/Dunkel steht im Menü
   (mnav-foot), die Sprache dort auch — im Kopf bleibt sie, solange sie
   neben dem Logo Platz hat. Die Knöpfe behalten ihre 44 px Klickfläche;
   den Abstand zwischen den Zeichen gibt die Fläche, keine Lücke. */
@media (max-width: 480px) {
  .hdr-inner { gap: calc(var(--u) * 1.5); }
  .hdr-tools { gap: 0; }
  .hdr-tools .modus { display: none; }
}
@media (max-width: 379px) {
  .hdr-tools .lang { display: none; }
}
@media (max-width: 340px) {
  .hdr .wrap { padding-inline: 16px; }
  .hdr-inner { gap: 4px; }
}

/* == 07  Inhaltsverzeichnis =============================================== */

.toc { display: none; }
@media (min-width: 1024px) {
  .toc {
    display: block;
    position: sticky;
    top: 108px;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    border-left: 1px solid var(--line);
    padding-left: calc(var(--u) * 2);
  }
  .toc-toggle { display: none; }
  .toc-list { list-style: none; margin: 0; padding: 0; }
  .toc-list a {
    display: block;
    font-family: var(--display);
    font-size: var(--t-7);
    line-height: 1.35;
    color: var(--text-2);
    text-decoration: none;
    padding: calc(var(--u) * 0.75) 0;
    border-left: 2px solid transparent;
    margin-left: calc(var(--u) * -2 - 1px);
    padding-left: calc(var(--u) * 2);
  }
  .toc-list a:hover { color: var(--text); }
  /* Der aktive Abschnitt ist die einzige Signalmarke im Inhaltsverzeichnis. */
  .toc-list a.is-current { color: var(--text); border-left-color: var(--brand); font-weight: 500; }
  .toc-list ul { list-style: none; margin: 0; padding: 0 0 0 calc(var(--u) * 1.5); }
  .toc-list ul a { font-size: var(--t-mark-2); padding-block: calc(var(--u) * 0.5); }
}
@media (max-width: 1023px) {
  .toc {
    display: block;
    border-bottom: 1px solid var(--line);
    margin-bottom: calc(var(--u) * 4);
  }
  .toc-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font-family: var(--display);
    font-size: var(--t-7);
    font-weight: 500;
    padding: calc(var(--u) * 2) 0;
    min-height: 48px;
    cursor: pointer;
    color: var(--text);
  }
  .toc-toggle::after { content: " +"; }
  .toc-toggle[aria-expanded="true"]::after { content: " –"; }
  .toc-list { list-style: none; margin: 0; padding: 0 0 calc(var(--u) * 2); }
  .toc-list[hidden] { display: none; }
  .toc-list a { display: block; padding: calc(var(--u) * 1.25) 0; font-size: var(--t-7); color: var(--text-2); text-decoration: none; }
  .toc-list ul { list-style: none; padding-left: calc(var(--u) * 2); margin: 0; }
}

/* == 08  Hero ============================================================= */

.hero-page {
  background: var(--paper);
  padding-block: calc(var(--u) * 8) calc(var(--u) * 6);
  border-bottom: 1px solid var(--line);
}
.hero-page h1 { max-width: 16em; margin-bottom: calc(var(--u) * 3); }
.hero-page .lead { max-width: 32em; }

/* -- Markenspur: die drei Bänder als Wasserzeichen ---------------------------
   Das Symbol aus dem Markenpaket, sehr leise und am rechten Rand
   angeschnitten — im Kopf jeder Unterseite und in den dunklen Kapiteln, die
   nur Text tragen (Wirkungsfelder, große Aussage), so zieht sich die Marke
   durch die Seite. Nicht hinter Diagrammen: Dort heißt Rot „abgeben“, und
   ein rotes Wasserzeichen spräche mit. Auf hellem Grund Warmgrau, auf
   dunklem ein Bordeaux, das sich kaum vom Grund abhebt (--spur und
   --spur-tief in tokens.css, je Tageszustand). Gezeichnet als Maske: Die
   Farbe kommt aus dem Zustand, nicht aus der Datei, und das Symbol selbst
   bleibt unverändert. Ein Test vom 21. Oktober 2026 — ?spur=aus schaltet
   ihn für den Besuch ab (page.py, spur_head_script); wer ihn herausnehmen
   will, löscht diesen Abschnitt und die beiden Token. */
:root:not([data-spur="aus"]) .hero-page:not(.hero-dunkel),
:root:not([data-spur="aus"]) .sec-wirkungsfelder,
:root:not([data-spur="aus"]) .sec-statement {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
:root:not([data-spur="aus"]) .hero-page:not(.hero-dunkel)::after,
:root:not([data-spur="aus"]) .sec-wirkungsfelder::after,
:root:not([data-spur="aus"]) .sec-statement::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -4%;
  bottom: -34%;
  height: min(130%, 620px);
  aspect-ratio: 216 / 172;
  background: var(--spur);
  -webkit-mask: url("/assets/brand/logo/symbol.svg") center / contain no-repeat;
  mask: url("/assets/brand/logo/symbol.svg") center / contain no-repeat;
  pointer-events: none;
}
:root:not([data-spur="aus"]) .sec-wirkungsfelder::after,
:root:not([data-spur="aus"]) .sec-statement::after {
  background: var(--spur-tief);
}
/* In den Wirkungsfeldern nicht als Ecke unten, sondern über die ganze
   Fläche, dafür noch leiser: Die Bänder laufen hinter dem Satzbild und den
   Einstiegen diagonal nach oben rechts — Textur, nicht Motiv. */
:root:not([data-spur="aus"]) .sec-wirkungsfelder::after {
  height: 96%;
  right: -16%;
  bottom: 2%;
  opacity: 0.4;
}
/* Auf dem Telefon steht der Text über die ganze Breite. Dort laufen nur die
   Enden der Bänder unten rechts ins Bild, wie auf der Visitenkarte. */
@media (max-width: 720px) {
  :root:not([data-spur="aus"]) .hero-page:not(.hero-dunkel)::after,
  :root:not([data-spur="aus"]) .sec-statement::after {
    height: min(62%, 420px);
    right: -36%;
    bottom: -8%;
  }
  /* Die Wirkungsfelder sind auf dem Telefon eine hohe, schmale Fläche.
     Über die ganze Höhe gezogen blieben von den Bändern nur Bruchstücke;
     deshalb steht das Zeichen dort ganz, hinter dem Satzbild. */
  :root:not([data-spur="aus"]) .sec-wirkungsfelder::after {
    height: 24%;
    right: -12%;
    bottom: 58%;
  }
}

.crumbs { margin-bottom: calc(var(--u) * 4); }

/* -- Die dunkle Welt: Auftakt mit Band-Motiv --------------------------------
   Seiten mit "look": "dunkel" (Startseite, Kontakt): Nahschwarz, das Symbol
   groß und angeschnitten unten rechts wie auf dem OG-Bild, der Text links
   oben auf ruhiger Fläche. Der Auftakt setzt die Rollen neu — Pfad,
   Überschrift, Einleitung und Verweise ziehen von selbst mit. */
.hero-dunkel {
  --text: var(--bp-white);
  --text-2: var(--bp-on-dark-muted);
  --line: var(--linie-dunkel);
  --line-strong: var(--bp-on-dark-muted);
  --focus: var(--bp-white);
  --brand: var(--bp-signal);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bp-near-black);
  color: var(--text);
  min-height: min(72vh, 620px);
  display: flex;
  align-items: flex-start;
  border-bottom: 0;
}
.hero-dunkel > .wrap { position: relative; width: 100%; }
.hero-dunkel h1 { color: var(--text); }
.band-motiv { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.band-motiv-sym {
  position: absolute;
  right: -4%;
  bottom: -30%;
  height: 128%;
  width: auto;
  max-width: none;
}
@media (max-width: 720px) {
  .hero-dunkel { min-height: 0; padding-bottom: 56vw; }
  .band-motiv-sym { height: auto; width: 120%; right: -24%; bottom: -22%; }
}
/* Im Auftakt der Startseite trägt das Motiv die Fläche, bis ein Film da
   ist; es atmet sehr langsam. */
.vh-still .band-motiv { z-index: 0; background: var(--bp-near-black); }
/* Telefon im Hochformat: Dort ragten nur die Enden der Bänder ins untere
   Viertel, darüber standen drei Viertel Schwarz — es sah aus, als fehle der
   Film. Höher in die Fläche gezogen laufen die Bänder wie auf dem OG-Bild
   diagonal aus der Ecke, und das Wort steht auf ihnen. */
@media (max-width: 720px) and (orientation: portrait) {
  .vh-still .band-motiv-sym { width: auto; height: 66%; right: -38%; bottom: -4%; }
}
.band-motiv-lebt .band-motiv-sym { animation: band-atmen 28s ease-in-out infinite alternate; transform-origin: 100% 100%; }
@keyframes band-atmen { from { transform: scale(1); } to { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .band-motiv-lebt .band-motiv-sym { animation: none; } }
/* Wasserzeichen: das Symbol sehr hell und angeschnitten am Ende der Seite. */
.sec-action { position: relative; overflow: hidden; isolation: isolate; }
.sec-action > .wrap { position: relative; }
/* Das Handlungsband steht auf einem Foto — Speichercontainer, entsättigt und
   abgedunkelt, links hinter dem Text zur Fläche hin ausgeblendet. */
.band-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  filter: saturate(0.5) brightness(0.55); z-index: -2; }
.sec-action::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--bp-dark) 0%, color-mix(in srgb, var(--bp-dark) 88%, transparent) 42%, color-mix(in srgb, var(--bp-dark) 35%, transparent) 100%); }
@media (max-width: 799px) {
  .sec-action::before { background: linear-gradient(180deg, var(--bp-dark) 0%, color-mix(in srgb, var(--bp-dark) 80%, transparent) 100%); }
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); list-style: none; margin: 0; padding: 0; }
.crumbs li { font-family: var(--display); font-size: var(--t-7); color: var(--text-2); }
.crumbs li + li::before { content: "/"; margin-right: calc(var(--u) * 1.5); color: var(--line-strong); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }

/* Im Auftakt mit Preiskurve und im Filmauftakt steht die Brotkrume auf dem
   Grund des Auftakts, nicht auf Papier. Sie greift dessen Farbrollen ab —
   der Auftakt öffnet morgens hell und abends navy, und die Brotkrume folgt
   mit, ohne davon zu wissen. */
.dc-crumbs, .vh-crumbs { position: relative; z-index: 3; }
.dc-crumbs .crumbs, .vh-crumbs .crumbs { margin-bottom: calc(var(--u) * 2); }
.dc-crumbs .crumbs li, .vh-crumbs .crumbs li { color: var(--on-deep-2); }
.dc-crumbs .crumbs a, .vh-crumbs .crumbs a { color: inherit; }
.dc-crumbs .crumbs li + li::before,
.vh-crumbs .crumbs li + li::before { color: var(--line-on-deep); }
.dc-crumbs .crumbs [aria-current],
.vh-crumbs .crumbs [aria-current] { color: var(--on-deep); }

/* --------------------------------------------------------------------------
   Auftakt der Startseite: 24 Stunden Preis, darunter der Ladezustand
   --------------------------------------------------------------------------
   Das charakteristischste Bild dieser Branche, das praktisch niemand benutzt:
   die Day-Ahead-Preiskurve eines Tages, darunter der Ladezustand eines
   Speichers. Laden, wenn Strom billig ist, einspeisen, wenn er teuer ist —
   das ganze Geschäftsmodell in einer Grafik, mit der Aussage hineingesetzt.

   Ebenen, von hinten nach vorn
     1  .dc-plot    Zeitfenster, Flächen, Nulllinie, Preislinie, Ladezustand
     2  .dc-text    Aussage, Vorspann, Handlung
     3  .dc-front   dieselbe Preislinie ein zweites Mal, über den Buchstaben
     4  .dc-marks   Beschriftung und Datumshinweis

   Der Text steht als HTML über dem SVG, nicht darin: echte Schrift, echte
   Trennung, echte Auswahl, echte Übersetzbarkeit. Das SVG streckt sich mit
   der Fensterbreite (preserveAspectRatio="none") — eine Zeitachse darf das,
   Strichstärken bleiben durch vector-effect konstant.

   Drei Varianten, umschaltbar mit ?hero=a|b|c. Voreinstellung und
   Empfehlung ist b; ohne JavaScript gilt ebenfalls b.
   -------------------------------------------------------------------------- */

.hero-day {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-on);
  padding-block: calc(var(--u) * 5) calc(var(--u) * 6);
  /* Der Auftakt setzt die Farbrollen lokal um: Kurve, Kennzahlen und
     Bildunterschrift folgen dem Tageszustand, ohne davon zu wissen.
     Morgens öffnet die Seite auf Weiß, abends auf Nahschwarz. */
  --on-deep: var(--hero-on);
  --on-deep-2: var(--hero-on-2);
  --line-on-deep: var(--hero-line);
  --value-on-deep: var(--hero-value);
  --charge-on-deep: var(--hero-charge);
  --negative-on-deep: var(--negative-strong);
  /* Textspalte und Beschnitt des vorderen Kurvenzugs hängen zusammen: die
     Linie läuft hinter den ersten zwei Dritteln der Spalte und vor dem
     letzten Drittel durch. Ein Wert, zwei Wirkungen. */
  --dc-pad: clamp(16px, 5vw, 96px);
  --dc-col: clamp(300px, 46vw, 740px);
  --dc-base: 0.08;
  --dc-win: 0.12;
  --dc-line: calc(2.5px + var(--value-fill) * 9px);
  --dc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Das Zeitfenster braucht auf dunklem Grund mehr Deckkraft: derselbe Wert, der auf
   Weiß sichtbar ist, verschwindet dort. Geprüft ist jedes Fenster gegen
   seinen eigenen Grund auf mindestens 1,12:1, jede gefüllte Fläche darin auf
   mindestens 1,30:1 — python3 tools/contrast.py rechnet beides nach. */
[data-daytime="einspeisung"] .hero-day { --dc-win: 0.15; }
[data-daytime="nacht"] .hero-day { --dc-win: 0.16; }

/* Auf hellem Auftakt ist die Schaltfläche dunkel, auf dunklem hell. Die
   Textfarbe kommt aus --hero-bg, nicht aus --on-deep: dieses Token ist hier
   lokal umgesetzt und wäre dunkel auf dunkel. */
[data-daytime="ladephase"] .hero-day .btn-paper,
[data-daytime="wende"] .hero-day .btn-paper,
[data-daytime="neutral"] .hero-day .btn-paper {
  background: var(--deep);
  color: var(--hero-bg);
  border-color: var(--deep);
}
[data-daytime="ladephase"] .hero-day .btn-paper:hover,
[data-daytime="wende"] .hero-day .btn-paper:hover,
[data-daytime="neutral"] .hero-day .btn-paper:hover {
  background: var(--deep-2);
  border-color: var(--deep-2);
}

/* -- Fläche und Ebenen --------------------------------------------------- */

.dc-band {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(440px, 70vh, 820px);
}
.dc-graph { position: absolute; inset: 0; }
.dc-plot, .dc-front {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Die Verschränkung entsteht über die Stapelreihenfolge, nicht über einen
   Beschnitt: die Überschrift liegt über der Kurve, die senkrechten
   Preissprünge liegen über der Überschrift, Vorspann und Schaltfläche wieder
   darüber. Dadurch laufen Kurvenzüge durch die Buchstaben der Aussage, ohne
   den Fließtext zu berühren — unabhängig davon, wie hoch der Text an einem
   anderen Tag oder in einer anderen Sprache ausfällt. */
.dc-plot { z-index: 1; }
.dc-front { z-index: 3; pointer-events: none; }
.dc-marks { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.dc-marks > * { position: absolute; }

/* -- Die Kurve ----------------------------------------------------------- */

/* Das Zeitfenster: eine Spalte, die sagt „hier wird geladen“ beziehungsweise
   „hier wird eingespeist“. Sie ist auch dann sichtbar, wenn die Fläche unter
   der Kurve verschwindend flach ist — an einem sonnigen Sommertag kostet die
   Megawattstunde mittags null Euro, und null Euro haben keine Fläche. */
/* Die Fläche unter der ganzen Kurve: neutral, sehr leise. Sie ist kein
   Signal, sondern der Bezugsrahmen — wie weit ist der Preis von null weg. */
.dc-base { fill: color-mix(in srgb, var(--on-deep) calc(var(--dc-base) * 100%), transparent);
            stroke: none; }

.dc-win { stroke: none; }
.dc-win-charge { fill: var(--charge-on-deep); opacity: var(--dc-win); }
.dc-win-discharge { fill: var(--value-on-deep); opacity: var(--dc-win); }

/* Die Fläche zwischen Preis und Nulllinie ist Geld: Aufwand beim Laden,
   Erlös beim Einspeisen. Ihre Deckkraft folgt dem Tageszustand — morgens
   führt die Aufnahme, abends der Erlös. */
.dc-area { stroke: none; }
.dc-area-charge {
  fill: color-mix(in srgb, var(--charge-on-deep) calc(var(--charge-fill) * 100%), transparent);
}
.dc-area-discharge {
  fill: color-mix(in srgb, var(--value-on-deep) calc(var(--value-fill) * 100%), transparent);
}

.dc-zero {
  fill: none;
  stroke: var(--on-deep-2);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}
[data-zero="0"] .dc-zero { display: none; }

/* Stundenprodukte sind Stufen, keine Kurve: die Linie läuft als Treppe.
   Ihre Stärke folgt dem Zustand — abends, wenn eingespeist wird, liegt sie
   schwerer im Bild als morgens. */
.dc-price {
  fill: none;
  stroke: var(--value-on-deep);
  stroke-width: var(--dc-line);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Negative Stunden. Die Farbe, die man sonst nie zu sehen bekommt. */
.dc-neg {
  fill: none;
  stroke: var(--negative-on-deep);
  stroke-width: calc(var(--dc-line) + 1px);
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
/* Ist mehr als die Hälfte des Tages negativ, ist es nicht mehr die Ausnahme:
   dann führt die Farbe des negativen Preises den ganzen Tag. */
[data-neg="1"] .dc-price { stroke: var(--negative-on-deep); }

/* Der Ladezustand ist eine stetige Größe, deshalb eine Linie statt einer
   Treppe: er steigt während der Ladestunden und fällt beim Einspeisen. Die
   Fläche wechselt dort die Farbe — bis zum Einspeisen aufgenommene Energie,
   danach abgegebene. Dieselbe Deckkraft für beide Hälften: sie zeigen
   dasselbe, nur in zwei Phasen. */
.dc-soc {
  fill: color-mix(in srgb, var(--charge-on-deep) calc(var(--charge-fill) * 100%), transparent);
  stroke: var(--charge-on-deep);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.dc-soc-out {
  fill: color-mix(in srgb, var(--value-on-deep) calc(var(--charge-fill) * 100%), transparent);
  stroke: var(--value-on-deep);
}
[data-hero="a"] .dc-soc-out { fill: color-mix(in srgb, var(--value-on-deep) 14%, transparent); }
.dc-axis { stroke: var(--line-on-deep); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* -- Beschriftung -------------------------------------------------------- */

/* Nur was nötig ist: zwei Beschriftungen, die sagen was passiert und zu
   welchem Preis, fünf Stundenmarken, die Nulllinie wenn es sie gibt, der
   Ladezustandskanal, das Datum. Keine Gitterlinien, keine Werteachse — die
   beiden Beschriftungen tragen die Skala mit. */
.dc-lab {
  top: 6px;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.75);
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  /* Die Farbe steckt im Feld, nicht im Text: Das gedämpfte Grau der Aufnahme
     wäre nachts als Schrift zu schwach, und das Rot des Erlöses ist als
     Textfarbe für Beschriftungen ohnehin ausgeschlossen. */
  color: var(--on-deep);
}
.dc-sw { flex: 0 0 auto; width: 10px; height: 10px; }
.dc-lab-charge .dc-sw { background: var(--charge-on-deep); }
.dc-lab-discharge .dc-sw { background: var(--value-on-deep); }

.dc-zero-lab {
  left: 0;
  transform: translateY(-50%);
  padding-inline: 4px;
  background: var(--hero-bg);
  font-family: var(--display);
  font-size: var(--t-mark);
  color: var(--on-deep-2);
}
[data-zero="0"] .dc-zero-lab { display: none; }

.dc-soc-lab,
.dc-day {
  /* Beide sitzen in der Lücke zwischen Preisfläche und Ladezustandskanal —
     der einzigen Zeile der Grafik, in der nichts gezeichnet wird. */
  top: 71.5%;
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--on-deep-2);
}
/* Der Hinweis steht im Kanal selbst, rechts: dort ist der Ladezustand an
   jedem der fünf Tage bei null, die Ecke also frei. */
.dc-soc-lab { right: clamp(8px, 2vw, 24px); top: 80.5%; }

.dc-hours { left: 0; right: 0; top: 91.5%; }
.dc-hours b {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-mark);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--on-deep-2);
}
.dc-hours b:first-child { transform: none; padding-left: 6px; }
.dc-hours b:last-child { transform: translateX(-100%); padding-right: 6px; }

/* Der Datumshinweis nennt den Tag. Er ist eine Schaltfläche, damit der
   nächste Tag auch mit Tastatur und Screenreader erreichbar ist — sichtbar
   bleibt er Text: kein Rahmen, keine Unterstreichung, kein Zeigefinger. */
.dc-day {
  right: clamp(8px, 2vw, 24px);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1);
  appearance: none;
  margin: 0;
  padding: calc(var(--u) * 1.5) 0;
  transform: translateY(calc(var(--u) * -1.5));
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--display);
  font-size: var(--t-7);
  text-align: right;
  cursor: inherit;
  pointer-events: auto;
}
/* Kein opacity auf Text: 70 % auf --on-deep-2 ergäben 3,9:1 und damit zu
   wenig für eine Angabe, die gelesen werden soll. Die Abstufung kommt aus
   den beiden Textrollen. */
.dc-day [data-dc="date"] { color: var(--on-deep); }
.dc-day-label { color: var(--on-deep-2); }
/* Die Schaltfläche war für ein Auge nicht von Text zu unterscheiden: kein
   Zeiger, keine Linie, kein Rahmen. Wer nicht mit der Tastatur kommt, hat
   den Tageswechsel nie gefunden. Die Angabe bleibt Text — sie bekommt nur
   die Linie, die auf dieser Website jeden Textlink kennzeichnet. */
.dc-day { cursor: pointer; }
.dc-day [data-dc="date"] {
  border-bottom: 1px solid var(--on-deep-2);
  padding-bottom: 2px;
}
.dc-day:hover [data-dc="date"] { border-bottom-color: var(--on-deep); border-bottom-width: 2px; }
.dc-day:hover .dc-day-label { color: var(--on-deep); }
.dc-day:active [data-dc="date"] { border-bottom-color: var(--on-deep-2); }

/* -- Aussage ------------------------------------------------------------- */

.dc-text {
  position: relative;
  width: var(--dc-col);
  margin-left: var(--dc-pad);
  padding-block: calc(var(--u) * 4);
}
/* Die Buchstaben tragen einen Rand in der Grundfarbe. Dadurch bekommt jeder
   Kurvenzug, der hinter der Aussage durchläuft, einen sauberen Abstand zur
   Schrift: er verschwindet hinter dem Wort statt es zu durchstreichen. Ohne
   das liest sich eine waagerechte Stufe mitten durch „Baureife“ wie eine
   Streichung — an manchen Tagen liegt sie genau dort. */
.hero-day h1 {
  position: relative;
  z-index: 2;
  color: var(--hero-on);
  font-size: clamp(2.1rem, 4.6vw, 5rem);
  margin-bottom: calc(var(--u) * 3);
  -webkit-text-stroke: 7px var(--hero-bg);
  paint-order: stroke fill;
}

/* Vorspann und Handlung stehen unter der Grafik, nicht in ihr. In der Grafik
   steht nur die Aussage — Fließtext, durch den eine Preisstufe läuft, ist an
   manchen Tagen nicht mehr gut lesbar, und das wiegt kein Effekt auf. */
.dc-below { display: grid; gap: calc(var(--u) * 4); justify-items: start; padding-top: calc(var(--u) * 4); }
.hero-day .lead { color: var(--hero-on-2); max-width: 40em; }
.dc-act { margin: 0; max-width: none; }

/* -- Bildunterschrift und Kennzahlen ------------------------------------- */

.dc-foot { padding-top: calc(var(--u) * 5); }
.dc-caption {
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--hero-on-2);
  /* Nicht none: Ohne Begrenzung wurde die Bildunterschrift auf einem breiten
     Schirm 150 Zeichen lang. 72ch ist das Maß, das der Annahmensatz eine
     Zeile darunter ohnehin schon hat — zwei Zeilen desselben Blocks sollen
     dieselbe Kante haben. */
  max-width: 72ch;
  margin: 0;
}
.dc-caption .linkbtn { color: var(--hero-on); margin-left: calc(var(--u) * 2); }
.dc-assume { display: block; max-width: 72ch; margin-top: calc(var(--u) * 1.5); }
.dc-foot .kpis { margin-top: calc(var(--u) * 4); }

/* -- Der eine bewegte Moment --------------------------------------------- */

/* Beim ersten Laden wischt ein Beschnitt von links nach rechts über die
   Grafik: die Linie wächst dabei entlang ihrer eigenen Form, die Flächen
   erscheinen mit ihr. Der Ladezustand folgt versetzt. Einmal, danach steht
   sie still — auch beim Tageswechsel wird nicht neu gezeichnet.

   Die Aussage bewegt sich nicht. Sie ist der Inhalt, nicht der Effekt.

   Kein Skript, keine zweite Quelle der Wahrheit: ein Rechteck im clipPath,
   skaliert per CSS. transform-origin 0 0 stimmt auch ohne transform-box,
   weil das Rechteck an x=0 beginnt. */
.dc-wipe-r { transform-origin: 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .js:not([data-hero-drawn]) .dc-wipe-r {
    transform: scaleX(0);
    animation: dc-wipe 1200ms var(--dc-ease) forwards;
  }
  .js:not([data-hero-drawn]) .dc-wipe-soc-r {
    animation-duration: 1100ms;
    animation-delay: 350ms;
  }
  .js:not([data-hero-drawn]) .dc-marks > * {
    opacity: 0;
    animation: dc-appear 350ms var(--ease) 1300ms forwards;
  }
}
@keyframes dc-wipe { to { transform: scaleX(1); } }
@keyframes dc-appear { to { opacity: 1; } }

/* -- Variante A: Kurve als ruhiges Hintergrundelement -------------------- */

/* Der sichere Weg. Die Kurve verliert ihre Farbführung und wird Textur, die
   Aussage steht klar davor. Sie kostet genau das, was die Grafik hier soll:
   Rot heißt Erlös, das gedämpfte Grau heißt Aufnahme — eine Linie ohne
   Rolle heißt nichts.
   Deshalb ist A nicht die Empfehlung. */
[data-hero="a"] .dc-win-charge,
[data-hero="a"] .dc-win-discharge { opacity: calc(var(--dc-win) * 0.6); }
[data-hero="a"] .dc-area-charge {
  fill: color-mix(in srgb, var(--charge-on-deep) 14%, transparent);
}
[data-hero="a"] .dc-area-discharge {
  fill: color-mix(in srgb, var(--value-on-deep) 14%, transparent);
}
[data-hero="a"] .dc-price { stroke: var(--on-deep-2); stroke-width: 1.5px; }
[data-hero="a"] .dc-soc { stroke-width: 1; opacity: 0.8; }
[data-hero="a"] .dc-front { display: none; }
[data-hero="a"] .dc-text { padding-block: calc(var(--u) * 6); }

/* -- Variante C: die Kurve ist das Layout -------------------------------- */

/* Textpositionen aus den Hoch- und Tiefpunkten des Tages: die Aussage steht
   am Tiefstpreis, die Kennzahlen am Höchstpreis, die Handlung am Ende des
   Tages. An einem anderen Tag sieht der Auftakt anders aus. Wo das bricht,
   steht in docs/AUFTAKT.md — es bricht zuverlässig. */
[data-hero="c"] .dc-text,
[data-hero="c"] .dc-below { display: contents; }
[data-hero="c"] .dc-say,
[data-hero="c"] .hero-day .lead,
[data-hero="c"] .dc-act,
[data-hero="c"] .dc-foot { position: absolute; z-index: 6; }
[data-hero="c"] .dc-say {
  left: var(--dc-say-x);
  top: var(--dc-say-y);
  width: var(--dc-col);
  transform: translate(-12%, -100%);
}
[data-hero="c"] .hero-day .lead {
  left: var(--dc-say-x);
  top: var(--dc-say-y);
  width: min(44ch, 38vw);
  transform: translate(-12%, calc(var(--u) * 2));
}
[data-hero="c"] .dc-act {
  left: var(--dc-act-x);
  top: var(--dc-act-y);
  transform: translate(-100%, -180%);
}
[data-hero="c"] .dc-foot {
  left: var(--dc-kpi-x);
  top: var(--dc-kpi-y);
  width: min(46vw, 640px);
  padding: 0;
  transform: translate(-50%, -110%);
}
[data-hero="c"] .dc-front { clip-path: none; }

/* -- Schmale Geräte ------------------------------------------------------ */

/* Kein geschrumpfter Auftakt, sondern eine andere Anordnung: die Aussage
   steht über der Grafik, nicht in ihr. Die Grafik behält ihre volle Breite
   und 55vh Höhe, die Beschriftungen rücken untereinander an den linken
   Rand — zwei Felder nebeneinander wären bei 360px nicht lesbar. */
@media (max-width: 900px) {
  .hero-day { padding-block: calc(var(--u) * 3) calc(var(--u) * 5); }
  .dc-band {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    min-height: 0;
  }
  .dc-graph {
    position: relative;
    order: 2;
    height: clamp(260px, 55vh, 460px);
    /* Platz über der Grafik für die beiden Beschriftungen: sie stehen hier
       übereinander vor der Grafik, nicht über ihren Spalten. Nebeneinander
       wären sie bei 360px nicht lesbar, und der Bezug zur Spalte ginge durch
       die Verschiebung ohnehin verloren. */
    margin-top: calc(var(--u) * 7);
  }
  .dc-text {
    order: 1;
    width: auto;
    margin-inline: var(--dc-pad);
    padding-block: 0;
  }
  .dc-front { display: none; }
  .dc-lab {
    left: clamp(8px, 2vw, 24px) !important;
    transform: none;
    font-size: var(--t-mark-2);
  }
  .dc-lab-charge { top: -48px; }
  .dc-lab-discharge { top: -25px; }
  /* Variante C braucht Platz, den ein Telefon nicht hat: dort gilt B. */
  [data-hero="c"] .dc-text { display: block; }
  [data-hero="c"] .dc-say,
  [data-hero="c"] .dc-act,
  [data-hero="c"] .dc-foot { position: static; transform: none; width: auto; }
  [data-hero="c"] .dc-act { margin-top: calc(var(--u) * 4); }
  [data-hero="c"] .dc-foot { padding-top: calc(var(--u) * 5); }
  /* Links, weil rechts in der Lücke darüber schon das Datum steht und beides
     bei 360px nicht nebeneinander passt. */
  .dc-soc-lab { right: auto; left: clamp(8px, 2vw, 24px); }
  .hero-day h1 { margin-bottom: calc(var(--u) * 2); }
}

/* == 09  Preiskurve ======================================================= */

.curve { overflow: visible; }
.curve line, .curve path, .curve circle { vector-effect: non-scaling-stroke; }
.curve-grid { stroke: var(--line-on-deep); stroke-width: 1px; }
.curve-axis { stroke: var(--line-on-deep); stroke-width: 1px; }
.curve-zero { stroke: var(--on-deep-2); stroke-width: 1px; stroke-dasharray: 2 4; }
.curve-tick, .curve-unit, .curve-label {
  font-family: var(--display);
  font-size: var(--t-mark);
  font-variant-numeric: tabular-nums lining-nums;
  fill: var(--on-deep-2);
}
.curve-label, .curve-unit { font-size: var(--t-mark); letter-spacing: 0.02em; }
/* Die Preislinie führt zum Erlös: Rot. Ihre Stärke folgt dem Zustand —
   abends, wenn eingespeist wird, liegt sie schwerer im Bild als morgens. */
.curve-price {
  fill: none;
  stroke: var(--value-on-deep);
  stroke-width: calc(2px + var(--value-fill) * 6px);
  stroke-linejoin: round;
}
/* Der Ladezustand ist aufgenommene Energie: Grau. Die Deckkraft der Fläche
   folgt dem Zustand — morgens füllt sie kräftiger als abends. */
.curve-soc { fill: color-mix(in srgb, var(--charge-on-deep) calc(var(--charge-fill) * 100%), transparent);
             stroke: var(--charge-on-deep); stroke-width: 1px; }
.curve-soc-base { stroke: var(--line-on-deep); stroke-width: 1px; }
.curve-soc-scale { font-size: var(--t-mark); }
.curve-mark circle { fill: none; stroke: var(--on-deep-2); stroke-width: 1.5px; }
.curve-mark text {
  font-family: var(--display);
  font-size: var(--t-mark);
  font-variant-numeric: tabular-nums lining-nums;
  fill: var(--on-deep);
}
.curve-now line { stroke: var(--on-deep); stroke-width: 1px; stroke-dasharray: 3 3; }
.curve-now text { font-family: var(--display); font-size: var(--t-mark); fill: var(--on-deep); }

/* == 10  Kennzahlen, Belege, Glossar ====================================== */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  margin-top: calc(var(--u) * 5);
  border-top: 1px solid var(--line);
  padding-top: calc(var(--u) * 3);
}
.tone-deep .kpis, .hero-day .kpis { border-top-color: var(--line-on-deep); }
.kpi-value {
  font-size: var(--t-2);
  font-weight: 300;
  color: var(--brand);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.kpi-unit { font-size: 0.5em; font-weight: 400; color: var(--text); }
.tone-deep .kpi-value, .hero-day .kpi-value { color: var(--brand-on-deep); }
.tone-deep .kpi-unit, .hero-day .kpi-unit { color: var(--on-deep); }
.kpi-label {
  font-size: var(--t-7);
  line-height: 1.45;
  color: var(--text-2);
  margin-top: calc(var(--u));
  max-width: 22em;
}
.hero-day .kpi-label, .tone-deep .kpi-label { color: var(--on-deep-2); }

/* Belegziffer: klein, in Strukturgrau, mit großzügiger Klickfläche.
   Feste Größe, damit sie neben einer Kennzahl nicht wie deren Bestandteil wirkt. */
.fn {
  font-size: 0.6875rem;
  line-height: 1;
  vertical-align: super;
  margin-left: 0.2em;
  white-space: nowrap;
}
.kpi-value .fn { align-self: flex-start; margin-left: 0.3em; }
.fn a {
  font-family: var(--display);
  font-variant-numeric: lining-nums;
  font-weight: 500;
  color: var(--line-strong);
  text-decoration: none;
  /* Großzügige Klickfläche ohne Einfluss auf den Zeilenfluss: das Padding
     vergrößert das Ziel, der negative Außenabstand nimmt den Platz zurück. */
  padding: 1.1em 0.9em;
  margin: -1.1em -0.9em;
  cursor: pointer;
}
.kpi-value .fn a { padding: 1.4em 1.2em; margin: -1.4em -1.2em; }
.fn a:hover { color: var(--text); text-decoration: underline; }
.tone-deep .fn a, .hero-day .fn a { color: var(--on-deep-2); }
.tone-deep .fn a:hover, .hero-day .fn a:hover { color: var(--on-deep); }

/* Glossarbegriff: dezent unterpunktet. */
.term {
  text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
  cursor: help;
}
.term:hover { border-bottom-style: solid; }
.tone-deep .term { border-bottom-color: var(--on-deep-2); }

.sec-sources { padding-bottom: var(--sec); }
.sources {
  list-style: none;
  counter-reset: src;
  margin: 0;
  padding: 0;
  font-size: var(--t-7);
  line-height: 1.6;
}
.sources li {
  counter-increment: src;
  position: relative;
  padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.5) calc(var(--u) * 4.5);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  max-width: 58em;   /* Quellenangaben bleiben lesbar statt über die volle Breite zu laufen */
}
.sources li:last-child { border-bottom: 1px solid var(--line); }
.sources li::before {
  content: counter(src);
  position: absolute;
  left: 0;
  top: calc(var(--u) * 1.5);
  font-family: var(--display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--line-strong);
}
.sources li:target { background: var(--paper-2); }
.src-pub { color: var(--text); font-weight: 500; }
.src-date { white-space: nowrap; }

/* == 11  Listen, Tabellen, Definitionslisten ============================== */

.list { margin: 0 0 calc(var(--u) * 2); padding: 0; list-style: none; max-width: var(--measure); }
.list li {
  position: relative;
  padding-left: calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 1.5);
}
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 2px;
  background: var(--brand);
}
.tone-deep .list li::before { background: var(--brand-on-deep); }
.list-tight li { margin-bottom: calc(var(--u) * 0.75); font-size: var(--t-7); line-height: 1.5; }
.list-check li::before { width: 8px; height: 8px; top: 0.55em; background: none; border: 1px solid var(--line-strong); }

.table-wrap { overflow-x: auto; margin-bottom: calc(var(--u) * 2); }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-7);
  line-height: 1.5;
  text-align: left;
}
.table caption {
  text-align: left;
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
  padding-bottom: calc(var(--u) * 1.5);
}
.table th, .table td {
  padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 2) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table thead th {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-7);
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
  white-space: nowrap;
}
.table tbody th { font-family: var(--display); font-weight: 500; }
/* Zahlen gehören an die rechte Kante und auf dieselbe Ziffernbreite, sonst
   lässt sich eine Spalte nicht vergleichen. Die Klasse .num setzt bereits
   Tabularziffern; die Kante fehlte. */
.table th.num, .table td.num { text-align: right; }
.table td .list { margin-bottom: 0; }
.tone-deep .table th, .tone-deep .table td { border-bottom-color: var(--line-on-deep); }
.tone-deep .table thead th { border-bottom-color: var(--on-deep-2); color: var(--on-deep); }
.table-compare td { min-width: 180px; }

/* Wird es eng, wird eine Tabelle ab drei Spalten zur Liste (blocks.py,
   stack_table): je Zeile ein Block, die erste Zelle als Überschrift, jede
   weitere mit ihrem Spaltenkopf darüber. Maßgeblich ist die Breite, die die
   Tabelle selbst hat, nicht die des Fensters — auf dem Telefon sind es
   rund 350 px, in einer schmalen Spalte am Tablet auch nicht viel mehr. Der
   Modellvergleich mit seinen Listen braucht mehr Platz und wird früher zur
   Liste. Der Kopf der Tabelle bleibt für Vorlesehilfen da und ist nur nicht
   zu sehen; die Beschriftung über der Zelle hat dafür einen leeren
   Alternativtext, sonst hörte man jeden Kopf zweimal. */
.table-wrap { container-type: inline-size; }
.table-stack thead th { white-space: normal; }
@container (max-width: 560px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-stack, .table-stack caption, .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; }
  .table-stack tr { padding: calc(var(--u) * 2) 0; border-bottom: 1px solid var(--line); }
  .table-stack tbody tr:first-child { border-top: 1px solid var(--line-strong); }
  .table-stack th, .table-stack td { padding: 0; border-bottom: 0; }
  .table-stack tbody th { font-size: var(--t-6); line-height: 1.4; }
  .table-stack td { margin-top: calc(var(--u) * 1.25); }
  .table-stack tbody th + td { margin-top: calc(var(--u) * 1); }
  .table-stack td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 2px; font-family: var(--display); font-size: var(--t-mark-2); font-weight: 500; line-height: 1.4; color: var(--text-2); }
  .tone-deep .table-stack tr { border-bottom-color: var(--line-on-deep); }
  .tone-deep .table-stack tbody tr:first-child { border-top-color: var(--on-deep-2); }
  .tone-deep .table-stack td[data-label]::before { color: var(--on-deep-2); }
  /* Die große Klickfläche der Belegziffer ragte am Zeilenende über den
     Rahmen, und die Tabelle ließ sich ein paar Pixel seitlich schieben. */
  .table-stack .fn a { padding-inline: 0; margin-inline: 0; }
}
/* Dieselben Regeln für den Modellvergleich, eine Stufe früher: Fünf Spalten
   mit Vor- und Nachteilslisten brauchen rund 800 px. */
@container (min-width: 561px) and (max-width: 860px) {
  .table-compare thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-compare, .table-compare tbody, .table-compare tr, .table-compare th, .table-compare td { display: block; }
  .table-compare tr { padding: calc(var(--u) * 2) 0; border-bottom: 1px solid var(--line); }
  .table-compare tbody tr:first-child { border-top: 1px solid var(--line-strong); }
  .table-compare th, .table-compare td { padding: 0; border-bottom: 0; }
  .table-compare tbody th { font-size: var(--t-6); line-height: 1.4; }
  .table-compare td { margin-top: calc(var(--u) * 1.25); }
  .table-compare tbody th + td { margin-top: calc(var(--u) * 1); }
  .table-compare td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 2px; font-family: var(--display); font-size: var(--t-mark-2); font-weight: 500; line-height: 1.4; color: var(--text-2); }
}
@container (max-width: 860px) {
  .table-compare td { min-width: 0; }
}

.defs { margin: 0; }
.def {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--gap);
  padding: calc(var(--u) * 2) 0;
  border-top: 1px solid var(--line);
}
.def:last-child { border-bottom: 1px solid var(--line); }
.tone-deep .def { border-top-color: var(--line-on-deep); }
.tone-deep .def:last-child { border-bottom-color: var(--line-on-deep); }
.def dt {
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  color: var(--text-2);
}
.tone-deep .def dt { color: var(--on-deep-2); }
.def dd { margin: 0; font-size: var(--t-7); line-height: 1.6; max-width: 42em; }
/* Auf den Wissensseiten sind die Werte einer Definitionsliste Fließtext,
   kein Kleingedrucktes — Größe und Zeilenlänge entsprechend. */
.reg dd, .stage dd, .gl-entry dd, .radar-tier dd {
  font-size: var(--t-6);
  line-height: 1.6;
  max-width: var(--measure);
}
.reg dd p, .stage dd p, .gl-entry dd p { max-width: var(--measure); }
.defs-tight .def { padding: calc(var(--u) * 1.25) 0; }

/* Annahmenlisten (Erlösrechner, Lastspitzenkappung) -----------------------
   Die Annahmen sind das Gegenteil von Kleingedrucktem: Sie stehen offen da,
   und sie müssen lesbar sein. Zwei Spalten statt einer Textwand, jede
   Annahme mit einer eigenen Überschrift über einem Strich, Aufzählungen
   dort, wo im Text ohnehin eine Liste steht. */
.assume-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap);
  padding: calc(var(--u) * 1.75) 0;
  border-top: 1px solid var(--line-strong);
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.assume-summary::-webkit-details-marker { display: none; }
.assume-summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  color: var(--text-2);
}
[open] > .assume-summary::after { content: "–"; }
.assume-summary:hover { text-decoration: underline; text-decoration-thickness: 2px; }
[open] > .assume-summary { border-bottom: 1px solid var(--line); }

.deflist {
  margin: 0;
  display: grid;
  gap: calc(var(--u) * 3.5) var(--gap);
  /* min(): Auf einem 320-px-Telefon ist die Spalte schmaler als 290 px. */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.deflist dt {
  padding-top: calc(var(--u) * 1.25);
  margin-bottom: calc(var(--u) * 1);
  border-top: 2px solid var(--line-strong);
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.deflist dd { margin: 0; font-size: var(--t-7); line-height: 1.62; color: var(--text-2); }
.deflist dd code { color: var(--text); }
.deflist dd strong { color: var(--text); font-weight: 500; }
.deflist-points {
  list-style: none;
  margin: calc(var(--u) * 1.25) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--u) * 0.75);
}
.deflist-points li { position: relative; padding-left: calc(var(--u) * 2); }
.deflist-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--line-strong);
}
.linklist a { display: inline-block; margin-right: calc(var(--u) * 2); }

@media (max-width: 700px) {
  .def { grid-template-columns: 1fr; gap: calc(var(--u)); }
}

/* In der schmalen Inhaltsspalte einer Seite mit Inhaltsverzeichnis reicht die
   Breite für zwei Spalten nicht: Label über den Wert setzen. */
@media (max-width: 1200px) {
  .has-toc .def { grid-template-columns: 1fr; gap: calc(var(--u) * 0.5); }
}

/* == 12  Abschnittstypen ================================================== */

.aside {
  border-left: 2px solid var(--line-strong);
  padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.5) calc(var(--u) * 3);
  margin-top: calc(var(--u) * 4);
  max-width: var(--measure);
}
.aside h3 { font-size: var(--t-6); margin-bottom: calc(var(--u)); }
.aside p { font-size: var(--t-7); color: var(--text-2); }

.fig { margin: calc(var(--u) * 4) 0 0; }
.fig-media {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.fig-media img, .fig-media video { width: 100%; height: 100%; object-fit: cover; }
.fig-diagram .fig-media, .fig-map .fig-media { background: var(--paper); aspect-ratio: auto; }
.fig-diagram svg, .fig-map svg { width: 100%; height: auto; }
/* Platzhalter: dunkle Fläche Nahschwarz → Bordeaux, das Symbol als feines
   Wasserzeichen, dazu „Foto folgt – Motiv“. Beim Austausch ändert sich nur
   die Datei; das Seitenverhältnis steht im Verzeichnis und bleibt. */
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 0 0.4em;
  padding: calc(var(--u) * 3);
  overflow: hidden;
  background: linear-gradient(135deg, var(--bp-near-black), var(--bp-bordeaux) 140%);
  color: var(--bp-on-dark-muted);
}
.ph::before {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -30%;
  width: 58%;
  aspect-ratio: 216 / 172;
  background: url("/assets/brand/logo/symbol-weiss.svg") no-repeat center / contain;
  opacity: 0.07;
}
.ph-kind { position: relative; font-family: var(--display); font-size: var(--t-7); font-weight: 500; color: var(--bp-white); }
.ph-kind::after { content: " –"; }
.ph-desc { position: relative; font-size: var(--t-7); line-height: 1.45; max-width: 38em; }
.ph-ratio, .ph-key {
  position: absolute;
  top: calc(var(--u) * 2.5);
  font-family: var(--display);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.75rem;
  color: var(--bp-on-dark-muted);
}
.ph-ratio { right: calc(var(--u) * 3); }
.ph-key { left: calc(var(--u) * 3); }
figcaption {
  font-size: var(--t-7);
  color: var(--text-2);
  line-height: 1.5;
  margin-top: calc(var(--u) * 1.5);
  max-width: 42em;
}

/* Schaltbild und Karte */
.dg-box, .dg-line, .dg-trafo, .dg-meter, .dg-bus { vector-effect: non-scaling-stroke; }
.dg-box { fill: none; stroke: var(--line-strong); stroke-width: 1.5px; }
.dg-line { stroke: var(--line-strong); stroke-width: 1.5px; fill: none; }
.dg-bus { stroke-width: 3px; stroke: var(--text); }
.dg-trafo { fill: none; stroke: var(--line-strong); stroke-width: 1.5px; }
.dg-meter { fill: none; stroke: var(--line-strong); stroke-width: 1.5px; }
.dg-nvp { fill: var(--charge); stroke: none; }
.dg-txt { font-family: var(--display); font-size: 16px; font-weight: 500; fill: var(--text); }
.dg-sub { font-family: var(--display); font-size: var(--t-mark-2); fill: var(--text-2); }

.map-bg { fill: var(--paper-2); }
.map-river, .map-road, .map-border { vector-effect: non-scaling-stroke; }
.map-river { fill: none; stroke: var(--line-strong); stroke-width: 2.5px; opacity: 0.5; }
.map-river-2 { stroke-width: 2px; }
.map-road { fill: none; stroke: var(--line); stroke-width: 1.5px; stroke-dasharray: 8 5; }
.map-border { fill: none; stroke: var(--line-strong); stroke-width: 1px; stroke-dasharray: 3 4; }
.map-city { fill: var(--line-strong); }
.map-site { fill: var(--value); }
.map-txt { font-family: var(--display); font-size: var(--t-mark-2); fill: var(--text-2); }
.map-txt-strong { font-weight: 500; fill: var(--text); font-size: 16px; }
.map-txt-muted { font-size: var(--t-mark); fill: var(--line-strong); }

.statement {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 20em;
  text-wrap: balance;
}
.statement-sub {
  font-size: var(--t-6);
  color: var(--on-deep-2);
  margin-top: calc(var(--u) * 3);
  max-width: 34em;
}
/* Ein Zeichen über der Aussage, etwa die Tasse beim Kaffee-Angebot der
   persönlichen Seiten aus den Briefen. Linie, keine Fläche: Brave Rot in der
   Stufe, die auf dunklem Grund für Rot gilt. */
.statement-symbol {
  display: block;
  width: 44px;
  height: 44px;
  color: var(--brand-on-deep);
  margin-bottom: calc(var(--u) * 3);
}
.statement-von {
  font-size: var(--t-6);
  font-weight: var(--weight-strong);
  margin-top: calc(var(--u) * 2);
}

/* Schnellzugriff oben auf den Seiten zu den Briefen (blocks.py, b_schnell):
   links die Kaffee-Kachel, rechts ein Menü zu den Abschnitten; auf dem
   Telefon untereinander. Keine Karten: eine dunkle Fläche und eine Liste
   mit Linien. */
.schnell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.schnell-kaffee {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3vw, 40px);
}
/* Die Kaffee-Kachel als dunkles Glas mit den drei Bändern ganz leise,
   angeschnitten unten rechts (--spur-tief) — nur in der Kachel, nichts ragt
   über ihren Rand. Ohne backdrop-filter oder mit „Transparenz reduzieren“
   bleibt sie eine dunkle Fläche. Der Schalter ?spur=aus gilt auch hier. */
:root:not([data-spur="aus"]) .schnell-kaffee::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 216 / 172;
  -webkit-mask: url("/assets/brand/logo/symbol.svg") center / contain no-repeat;
  mask: url("/assets/brand/logo/symbol.svg") center / contain no-repeat;
  pointer-events: none;
  right: -26%;
  bottom: -42%;
  width: 78%;
  background: var(--spur-tief);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .schnell-kaffee {
    background: color-mix(in srgb, var(--bp-near-black) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid color-mix(in srgb, var(--bp-white) 14%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bp-white) 10%, transparent);
  }
  @media (prefers-reduced-transparency: reduce) {
    .schnell-kaffee { background: var(--deep); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  }
}
.schnell-kaffee h2 {
  font-size: var(--t-4);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 calc(var(--u) * 2);
  text-wrap: balance;
}
.schnell-kaffee p { color: var(--on-deep-2); }
.schnell-kaffee .schnell-von {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  margin-top: calc(var(--u) * 2);
  font-family: var(--display);
  font-weight: var(--weight-strong);
  color: var(--on-deep);
}
.schnell-portrait { width: 56px; height: 56px; object-fit: cover; }
.schnell-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 2) calc(var(--u) * 3);
  margin-top: calc(var(--u) * 3);
}
.schnell-menu h2 { font-size: var(--t-4); margin: 0 0 calc(var(--u) * 2); }
.schnell-menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.schnell-menu a {
  display: block;
  padding: calc(var(--u) * 2) 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.schnell-menu .kicker { display: block; margin: 0 0 4px; }
.schnell-titel { display: block; font-family: var(--display); font-weight: var(--weight-strong); font-size: var(--t-5); line-height: 1.3; }
.schnell-text { display: block; margin-top: 2px; font-size: var(--t-6); line-height: 1.5; color: var(--text-2); }
.schnell-menu a:hover .schnell-titel { color: var(--brand); }
@media (max-width: 700px) {
  .schnell { grid-template-columns: minmax(0, 1fr); }
}

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--gap);
  padding: calc(var(--u) * 3) 0;
  border-top: 1px solid var(--line);
}
.tl-date { font-size: var(--t-7); color: var(--text-2); padding-top: 0.2em; }
.tl-body h3 { font-size: var(--t-5); margin-bottom: calc(var(--u)); }
.tl-body p { font-size: var(--t-7); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
/* Nummern gibt es nur hier und bei den Entwicklungsstufen: echte Sequenzen. */
.step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--gap);
  padding: calc(var(--u) * 3) 0;
  border-top: 1px solid var(--line);
}
.step-num, .stage-num {
  font-family: var(--display);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-5);
  color: var(--brand);
  line-height: 1.2;
}
.tone-deep .step-num, .tone-deep .stage-num { color: var(--brand-on-deep); }
.step-body h3 { font-size: var(--t-5); margin-bottom: calc(var(--u)); }
.step-body p { font-size: var(--t-7); }

.chk { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
.chk-group h3 { font-size: var(--t-6); padding-bottom: calc(var(--u) * 1.5); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--u) * 2); }

/* Einstiege: eine Tabelle mit drei Fragen, keine Karten. */
.entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
.entry {
  padding: calc(var(--u) * 4) var(--gap) calc(var(--u) * 4) 0;
  border-right: 1px solid var(--line);
}
.entry:last-child { border-right: 0; }
.entry h3 { font-size: var(--t-5); margin-bottom: calc(var(--u) * 2); max-width: 12em; }
.entry p { font-size: var(--t-7); margin-bottom: calc(var(--u) * 3); }
@media (max-width: 700px) {
  .entry { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .entry:last-child { border-bottom: 0; }
}

/* Entwicklungsstufen */
.stages-wrap { overflow-x: auto; margin-bottom: calc(var(--u) * 6); }
.stages { min-width: 720px; width: 100%; height: auto; }
.st-line, .st-node { vector-effect: non-scaling-stroke; }
.st-line { stroke: var(--line); stroke-width: 2px; }
.st-done { stroke: var(--line-strong); }
.st-node { fill: var(--paper); stroke: var(--line-strong); stroke-width: 2px; }
.st-reached { fill: var(--line-strong); }
/* Signal markiert genau eine Stelle: die erreichte Stufe. */
.st-current { fill: var(--value); stroke: var(--value); }
.st-num {
  font-family: var(--display);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-mark-2);
  fill: var(--line-strong);
}
.st-label { font-family: var(--display); font-size: var(--t-mark-2); fill: var(--text-2); }
.tone-deep .st-node { fill: var(--deep); stroke: var(--on-deep-2); }
.tone-deep .st-line { stroke: var(--line-on-deep); }
.tone-deep .st-done { stroke: var(--on-deep-2); }
.tone-deep .st-reached { fill: var(--on-deep-2); }
.tone-deep .st-label, .tone-deep .st-num { fill: var(--on-deep-2); }
.stages-mini { min-width: 0; width: 200px; }

.stage { padding: calc(var(--u) * 4) 0; border-top: 1px solid var(--line); }
.stage h3 { display: flex; gap: calc(var(--u) * 2); align-items: baseline; font-size: var(--t-4); }
.stage:target h3 { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; }

/* Projekte */
.filters { display: flex; flex-wrap: wrap; gap: var(--gap); margin-bottom: calc(var(--u) * 4); }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u)); }
.filter-label {
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  color: var(--text-2);
  margin-right: calc(var(--u));
}
.chip {
  font-family: var(--display);
  font-size: var(--t-7);
  min-height: 44px;
  padding: 0 calc(var(--u) * 2);
  background: none;
  border: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip:active { border-color: var(--text); }
.chip.is-active { border-color: var(--text); color: var(--text); font-weight: 500; }

.projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.proj { padding: calc(var(--u) * 4) 0; border-bottom: 1px solid var(--line); }
.proj[hidden] { display: none; }
.proj-head { display: flex; align-items: baseline; gap: calc(var(--u) * 2); flex-wrap: wrap; }
.proj-head h3 { font-size: var(--t-4); margin-bottom: calc(var(--u) * 2); }
.badge {
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
  border: 1px solid var(--line);
  padding: 2px calc(var(--u));
}
.proj-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  margin: 0 0 calc(var(--u) * 3);
}
.proj-data > div { border-top: 1px solid var(--line); padding-top: calc(var(--u)); }
.proj-data dt { font-family: var(--display); font-size: var(--t-7); color: var(--text-2); }
.proj-data dd { margin: 2px 0 0; font-size: var(--t-6); }
.proj-data .muted { color: var(--text-2); }
.proj-stage { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-wrap: wrap; }
.proj-stage-label { font-family: var(--display); font-size: var(--t-7); color: var(--text-2); }

/* Technologie-Radar und Regulatorik */
.radar-tier { padding: calc(var(--u) * 5) 0; border-top: 1px solid var(--line-strong); }
.radar-item { padding: calc(var(--u) * 2) 0; border-top: 1px solid var(--line); }
.radar-item:first-child { border-top: 0; padding-top: 0; }
.radar-item h4 { margin-bottom: calc(var(--u)); }
.radar-item p { font-size: var(--t-7); }

.reg { padding: calc(var(--u) * 5) 0; border-top: 1px solid var(--line-strong); }
.reg h3 { font-size: var(--t-4); }
.reg:target h3 { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; }
.asof { font-family: var(--display); font-size: var(--t-7); color: var(--text-2); margin: 0; }
.asof span { display: block; }
.reg-defs .def dt { min-width: 0; }

/* Fragen und Antworten
   Kein Kasten, kein Schatten, kein Fragezeichen. Was die Einträge trennt,
   ist eine Haarlinie; was die Frage von der Antwort trennt, ist die Schrift.
   Das Zeichen rechts ist ein Zustand, keine Verzierung: geschlossen steht
   dort ein Plus, offen ein Strich. */
.faqs { border-bottom: 1px solid var(--line); max-width: var(--measure); }
.faq { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  /* 44px Trefferfläche entstehen aus dem Innenabstand, nicht aus einer
     Mindesthöhe: Sonst bliebe bei einer zweizeiligen Frage unten Luft, die
     nicht klickt. */
  padding: calc(var(--u) * 2) 0;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  align-self: start;
  font-family: var(--display);
  font-size: var(--t-4);
  line-height: 1.2;
  color: var(--line-strong);
  transition: color var(--dur) var(--ease);
}
.faq[open] summary::after { content: "–"; color: var(--text-2); }
.faq summary h3 { font-size: var(--t-5); margin: 0; }
.faq summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.faq summary:hover::after { color: var(--text-2); }
.faq summary:active h3 { color: var(--text-2); }
.faq summary:focus-visible { outline-offset: -1px; }
/* Die Antwort ist Fließtext, nicht Kleingedrucktes. */
.faq-a { padding: 0 calc(var(--u) * 5) calc(var(--u) * 3) 0; }
.faq-a p + p { margin-top: calc(var(--u) * 2); }

/* == Merit-Order ==========================================================
   Die Grafik erklärt Marktmechanik, nicht Energiepolitik. Deshalb hat kein
   Energieträger eine eigene Farbe: Alle Stufen sind dieselbe Strukturlinie,
   und ausgezeichnet wird nur, was der Nutzer gerade eingestellt hat — die
   preissetzende Stufe, die Senkrechte, der Preis. Eine Farbcodierung nach
   Energieträger wäre eine Wertung, und sei es nur, weil jemand entscheiden
   müsste, welcher die schöne Farbe bekommt.

   Die drei Farbrollen der Seite gelten unverändert: Rot markiert den
   Betrag, Grau die Ladung — hier den Speicher —, Bordeaux den negativen
   Preis. Keine davon trägt Text.                                          */

.mo { margin-top: calc(var(--u) * 4); }
.mo-notice { max-width: var(--measure); color: var(--text-2); font-size: var(--t-7); }
.mo-read { max-width: var(--measure); margin-bottom: calc(var(--u) * 4); }
.mo-nojs { display: none; }
.no-js .mo-nojs { display: block; color: var(--text-2); }
.no-js .mo-chart, .no-js .mo-controls, .no-js .mo-result { display: none; }

.mo-chart {
  position: relative;
  /* Auf dem Telefon wäre das Seitenverhältnis der Zeichenfläche 320 zu 139 —
     eine Treppe mit zwanzig Stufen in 139 Pixeln ist keine Treppe mehr.
     Schmal wird das Bild deshalb höher; die Zeichnung wird ohnehin gedehnt. */
  aspect-ratio: 4 / 3;
  margin-bottom: calc(var(--u) * 3);
  border-bottom: 1px solid var(--line-strong);
}
.mo-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.mo-grid, .mo-zero, .mo-step, .mo-set, .mo-demand, .mo-demand2, .mo-step2, .mo-priceline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.mo-grid { stroke: var(--line); stroke-width: 1px; }
.mo-zero { stroke: var(--line-strong); stroke-width: 1.5px; }
/* Die Treppe selbst ist ruhig; sie ist der Hintergrund der Aussage. */
.mo-step { stroke: var(--line-strong); stroke-width: 2px; }
/* Was tatsächlich läuft: die Fläche links der Nachfrage. */
.mo-fill { fill: var(--line); opacity: 0.45; stroke: none; }
/* Das preissetzende Kraftwerk — der Aha-Moment, und deshalb das Einzige,
   was aus der Treppe heraussticht. Ohne Farbe: nur Stärke. */
.mo-set { stroke: var(--text); stroke-width: 5px; }
.mo-demand { stroke: var(--text); stroke-width: 2px; }
.mo-priceline { stroke: var(--value); stroke-width: 1.5px; stroke-dasharray: 4 4; }
.mo-dot { fill: var(--value); stroke: var(--paper); stroke-width: 2px; }
/* Die Speicherebene spricht Grau, wie überall auf dieser Seite. */
.mo-demand2, .mo-step2 { stroke: var(--charge); stroke-width: 2px; stroke-dasharray: 6 4; }
.mo-dot2 { fill: var(--charge); stroke: var(--paper); stroke-width: 2px; }

[data-neg="1"] .mo-priceline { stroke: var(--negative); }
[data-neg="1"] .mo-dot { fill: var(--negative); }
[data-neg="1"] .mo-step { stroke: var(--negative); }

@media (min-width: 721px) { .mo-chart { aspect-ratio: 1200 / 520; } }
/* Auf dem Telefon lagen die Achsentitel auf den Marken: „Grenzkosten" über
   der 200, „Kumulierte Leistung" über der 60 und der 80. Dort stehen sie
   über und unter der Zeichnung. */
@media (max-width: 720px) {
  .mo-chart { margin-top: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 6); }
  .mo-marks .mo-axis-y { top: auto; bottom: 100%; margin-bottom: 8px; }
  .mo-marks .mo-axis-x { bottom: auto; top: 100%; margin-top: 8px; }
}
.mo-marks { position: absolute; inset: 0; pointer-events: none; }
.mo-marks span { position: absolute; font-family: var(--display); font-size: var(--t-mark); color: var(--text-2); white-space: nowrap; }
.mo-ytick { left: 0; transform: translateY(-50%); }
.mo-xtick { bottom: 0; transform: translateX(-50%); }
.mo-axis-x { right: 0; bottom: 0; color: var(--text-2); }
.mo-axis-y { left: 0; top: 0; }
.mo-blab {
  bottom: 18px;
  transform: translateX(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-2);
}
.mo-blab.is-set { color: var(--text); font-weight: 500; }
/* Auf Papiergrund, damit die Senkrechte nicht mitten durch das Wort läuft. */
.mo-dlab { top: 2px; transform: translateX(-50%); color: var(--text); background: var(--paper); padding: 0 4px; }
.mo-plab { left: 0; transform: translateY(-50%); color: var(--text); background: var(--paper); padding-right: 4px; }
.mo-plab.is-neg { color: var(--negative); }
.mo-plab2 { left: 0; transform: translateY(-50%); color: var(--text-2); background: var(--paper); padding-right: 4px; }

.mo-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: calc(var(--u) * 3);
}
[data-merit="a"] .mo-controls { display: none; }
.mo-field { display: block; }
.mo-field-l { display: block; font-family: var(--display); font-size: var(--t-7); font-weight: 500; }
.mo-field-v { display: block; font-family: var(--display); font-size: var(--t-5); margin: calc(var(--u) * 0.5) 0; }
.mo-field input[type="range"] { width: 100%; }
.mo-field-h { display: block; font-size: var(--t-mark-2); color: var(--text-2); line-height: 1.4; margin-top: calc(var(--u)); }

/* Die Klickfläche ist das Label, nicht das Kästchen: 44 Pixel hoch, und ein
   Klick irgendwo darin schaltet. Das Kästchen selbst wird trotzdem größer —
   wer zielt, zielt darauf. */
.mo-switch { display: flex; gap: calc(var(--u) * 1.5); align-items: center; min-height: 44px; cursor: pointer; }
.mo-switch input { width: 20px; height: 20px; flex: none; accent-color: var(--charge); }
.mo-switch-l { display: block; font-family: var(--display); font-size: var(--t-7); font-weight: 500; }
.mo-switch-h { display: block; font-size: var(--t-mark-2); color: var(--text-2); line-height: 1.4; }
.mo-actions { display: flex; align-items: center; }

.mo-result {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--gap);
  margin-top: calc(var(--u) * 4);
  border-top: 1px solid var(--line-strong);
  padding-top: calc(var(--u) * 3);
}
@media (max-width: 720px) { .mo-result { grid-template-columns: 1fr; } }
.mo-price-l { font-family: var(--display); font-size: var(--t-7); color: var(--text-2); margin: 0; }
/* „103,3 €/MWh" darf nicht hinter dem Schrägstrich umbrechen: Die Einheit
   ist ein Wort, auch wenn sie ein Zeichen enthält, das wie eine Fuge aussieht. */
.mo-price { font-family: var(--display); font-size: var(--t-3); line-height: 1.05; margin: calc(var(--u)) 0; white-space: nowrap; }
.mo-field-v { white-space: nowrap; }
[data-neg="1"] .mo-price { color: var(--negative); }
.mo-setby { font-size: var(--t-7); color: var(--text-2); max-width: 34em; }
.mo-spoken { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mo-store { border-left: 2px solid var(--charge); padding-left: calc(var(--u) * 2); }
.mo-store-state { font-size: var(--t-7); max-width: 34em; margin-bottom: calc(var(--u) * 2); }
.mo-store-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--gap); margin: 0; }
.mo-store-figs dt { font-family: var(--display); font-size: var(--t-mark-2); color: var(--text-2); }
.mo-store-figs dd { margin: 2px 0 0; font-family: var(--display); font-size: var(--t-5); }
.mo-assume { margin-top: calc(var(--u) * 4); }

/* Während der Vorführung sind die Regler nicht gesperrt — sie sollen ja
   angefasst werden. Die Uhr sagt, was gerade läuft: nicht „hier bewegt sich
   etwas", sondern „es ist zwölf Uhr mittags". */
.mo-uhr {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-4);
  color: var(--text-2);
  pointer-events: none;
}
.mo-uhr:empty { display: none; }

/* Glossar und Beiträge */
.gl-entry { padding: calc(var(--u) * 4) 0; border-top: 1px solid var(--line); }
.gl-entry:target h3 { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; }
.gl-entry h3 { font-size: var(--t-4); }

/* -- Newsroom (Insights) -----------------------------------------------------
   Aufmacher, weitere Beiträge, daneben Vorbereitung und Medien — wie bei
   institutionellen Häusern, aber ohne Kacheln mit Schatten: Bild, Linie, Text. */
.nr {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-areas: "lead neben" "weitere neben";
  column-gap: calc(var(--gap) * 2);
  align-items: start;
  margin-top: calc(var(--u) * 4);
}
.nr .post[hidden] { display: none; }
.nr-lead { grid-area: lead; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: end; }
.nr-weitere { grid-area: weitere; margin-top: calc(var(--u) * 7); }
.nr-neben { grid-area: neben; border-left: 1px solid var(--line); padding-left: var(--gap); }
.nr-neben > div + div { margin-top: calc(var(--u) * 6); }

/* Passepartout: eine feine Linie im Abstand, in der Farbe des Grundes —
   das Foto steht ganz, gerahmt, und der Rahmen folgt jeder Tageszeit. */
.nr-rahmen { display: block; padding: 6px; background: var(--paper); border: 1px solid var(--line); }
.nr-rahmen img { display: block; width: 100%; height: auto; }
.nr-lead .nr-rahmen img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 100%; }
.nr-bild { display: block; text-decoration: none; }

/* Galerie: zwei gerahmte Querformate je Reihe, auf dem Telefon eines. */
.galerie { list-style: none; margin: calc(var(--u) * 4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gap) * 1.25) var(--gap); }
.galerie-fig { margin: 0; }
.galerie-fig figcaption { margin-top: calc(var(--u) * 1.5); font-size: var(--t-7); line-height: 1.5; color: var(--text-2); }
@media (max-width: 599px) { .galerie { grid-template-columns: minmax(0, 1fr); } }

.nr-ueber, .nr-kopf {
  margin: 0 0 calc(var(--u) * 2);
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  color: var(--text-2);
}
.nr-kopf { padding-top: calc(var(--u) * 2); border-top: 1px solid var(--line-strong); color: var(--text); }
.nr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 2);
  margin: 0 0 calc(var(--u) * 1.5);
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
}
/* Die Kategorie trägt den roten Strich, nicht rote Schrift: Strich als Marke
   trägt in jedem Zustand, kleine rote Schrift nachts nicht. */
.nr-kat { color: var(--text); font-family: var(--display); font-weight: 500; }
.nr-kat::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: 8px;
  vertical-align: 0.3em;
  background: var(--brand);
}
.nr-titel { font-size: var(--t-3); margin-bottom: calc(var(--u) * 2); }
.nr-titel a, .nr-zeile-titel a { text-decoration: none; }
.nr-titel a:hover, .nr-zeile-titel a:hover {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--brand);
}
.nr-anriss { font-size: var(--t-6); margin-bottom: calc(var(--u) * 3); }
.nr-liste { list-style: none; margin: 0; padding: 0; }
.nr-zeile {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--gap);
  padding: calc(var(--u) * 3) 0;
  border-bottom: 1px solid var(--line);
}
.nr-zeile .nr-bild img { aspect-ratio: 3 / 2; object-fit: cover; }
.nr-zeile-titel { font-size: var(--t-5); margin-bottom: calc(var(--u)); }
.nr-zeile p:not(.nr-meta) { font-size: var(--t-7); margin: 0; }
.nr-plan ul { list-style: none; margin: 0; padding: 0; }
.nr-plan li { display: grid; gap: 4px; padding: calc(var(--u) * 1.5) 0; border-bottom: 1px solid var(--line); }
.nr-plan .nr-kat { font-size: 0.8125rem; color: var(--text-2); }
.nr-plan-titel { font-size: var(--t-7); line-height: 1.45; }
.nr-medien p { font-size: var(--t-7); }

/* Bildmarke für Beiträge ohne Foto: Nahschwarz nach Bordeaux, die Bänder rechts unten
   angeschnitten, oben links die Kategorie. */
.nr-marke {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--deep);
  color: var(--on-deep-2);
}
.nr-marke-kat { position: absolute; top: 10px; left: 12px; font-family: var(--display); font-size: 0.8125rem; }
.nr-marke-sym { position: absolute; right: -14%; bottom: -30%; height: 135%; width: auto; }

@media (max-width: 900px) {
  .nr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "weitere" "neben"; }
  .nr-lead { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .nr-lead .nr-bild { max-width: 340px; }
  .nr-neben { border-left: 0; padding-left: 0; margin-top: calc(var(--u) * 7); }
  .nr-zeile { grid-template-columns: 120px minmax(0, 1fr); gap: calc(var(--u) * 2); }
}
.article-meta { margin-bottom: calc(var(--u) * 4); }
/* Die Spalte ist schmal: kürzere Begriffsspalte, und Namen werden nicht getrennt. */
.article-meta .def { grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 2); }
.article-meta dd { hyphens: manual; text-align: right; }

.dls { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.dl { padding: calc(var(--u) * 3) 0; border-bottom: 1px solid var(--line); }
.dl-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); }
.dl-head h3 { font-size: var(--t-5); margin-bottom: calc(var(--u)); }

.legal-part { padding-bottom: calc(var(--u) * 4); max-width: 42em; }
.legal-part h2 { font-size: var(--t-4); padding-top: calc(var(--u) * 4); }
.legal-part h3 { font-size: var(--t-5); }
.legal-part p, .legal-part li { font-size: var(--t-7); }

/* Weiterlesen und Handlungsband */
.sec-related { padding-block: var(--sec) 0; }
.sec-related h2 { font-size: var(--t-5); color: var(--text-2); margin-bottom: calc(var(--u) * 3); }
/* Die Verweise stehen in einer Reihe (drei oder vier), unter 1000 px zu zweit,
   auf dem Telefon untereinander. Jede Trennlinie hat Luft auf beiden Seiten:
   Vorher hatte nur die rechte Seite Abstand, und der Text der zweiten bis
   vierten Spalte klebte an der Linie (Marco Grünberger, 22. Oktober 2026).
   Die erste Spalte jeder Reihe bleibt bündig mit der Überschrift. */
.related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line-strong);
}
.related a {
  display: block;
  padding: calc(var(--u) * 3) var(--gap);
  text-decoration: none;
  border-left: 1px solid var(--line);
  height: 100%;
  transition: background var(--dur) var(--ease);
}
.related li:first-child a { padding-left: 0; border-left: 0; }
.related a:hover { background: var(--paper-2); }
.rel-title { display: block; font-family: var(--display); font-size: var(--t-5); font-weight: 500; letter-spacing: -0.015em; margin-bottom: calc(var(--u)); }
.rel-text { display: block; font-size: var(--t-7); color: var(--text-2); line-height: 1.5; }
@media (max-width: 1000px) {
  .related { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related li:nth-child(odd) a { padding-left: 0; border-left: 0; }
  .related li:nth-child(n+3) a { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .related { grid-template-columns: minmax(0, 1fr); }
  .related a, .related li:nth-child(n+3) a { padding-inline: 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--line); }
}

.sec-action { margin-top: var(--sec); }
.sec-action h2 { font-size: var(--t-3); }
.sec-action .btn { margin-top: calc(var(--u) * 3); }

/* == 13  Formulare ======================================================== */

.form { max-width: 36em; }
.field { margin-bottom: calc(var(--u) * 3); }
.field[hidden] { display: none; }
.field label {
  display: block;
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  margin-bottom: calc(var(--u));
}
.req { color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: calc(var(--u)) calc(var(--u) * 1.5);
  font-family: var(--serif);
  font-size: var(--t-6);
  color: var(--text);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 0;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
/* Der Grund wechselt, aber nie nach Weiß: abends trüge der Text darauf
   2,1:1 — und das ausgerechnet, während getippt wird. */
.field input:focus, .field select:focus, .field textarea:focus { background: var(--paper-3); }
/* Ein fehlendes Feld trägt einen kräftigeren Rahmen und eine Marke am
   linken Rand — der Rahmen allein ist in einem Formular aus lauter Rahmen
   zu leise. Bordeaux bleibt dem negativen Preis; die Marke ist der Text
   selbst, in doppelter Stärke. */
.field-invalid input, .field-invalid select, .field-invalid textarea {
  border-color: var(--text);
  border-width: 2px;
}
/* Die Beschriftung wird kräftiger, der Rahmen doppelt so stark, und die
   Statuszeile nennt die Zahl. Ein zusätzliches Zeichen hinter dem Label sah
   aus wie ein abgebrochener Satz. */
.field-invalid label { color: var(--text); font-weight: 500; }
.field-check { display: grid; grid-template-columns: 24px 1fr; gap: calc(var(--u) * 1.5); align-items: start; }
.field-check input { width: 24px; height: 24px; min-height: 24px; margin-top: 2px; }
.field-check label { font-family: var(--serif); font-weight: 400; font-size: var(--t-7); line-height: 1.5; }
.field-submit { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 4); flex-wrap: wrap; }
/* Fehler und Erfolg sahen gleich aus: eine Zeile, eine Farbe. Jetzt trägt
   der Zustand eine Kante — links, in der Stärke, die der Beistelltext
   überall auf dieser Website benutzt. */
.form-status { font-size: var(--t-7); color: var(--text-2); }
.form-status:not(:empty) {
  padding-left: calc(var(--u) * 1.5);
  border-left: 2px solid var(--line-strong);
}
.form-status[data-state="fehler"] {
  color: var(--text);
  border-left-color: var(--text);
  font-weight: 500;
}
.form-status[data-state="fertig"] { border-left-color: var(--value); }
.form-out {
  display: block;
  margin-top: calc(var(--u) * 3);
  padding: calc(var(--u) * 2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: var(--t-7);
  white-space: pre-wrap;
  font-family: var(--serif);
}
.form-out[hidden] { display: none; }
/* Ohne das stünde der Knopf nach dem Absenden weiter da: display: flex
   schlägt das hidden-Attribut. */
.field-submit[hidden] { display: none; }
/* Der Honigtopf. Nicht display: none — manche Füllskripte lassen
   ausgeblendete Felder aus. Aus dem Bild geschoben, ohne Tabstopp. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field-note .hint { margin: 0; }
.form-ausweg { font-family: var(--display); }
/* Die Bestätigung trägt dieselbe Kante wie die Statuszeile im Zustand
   "fertig" — sie ist deren Fortsetzung, nicht ein neues Element. */
.form-done {
  padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-left: 2px solid var(--value);
  font-size: var(--t-6);
}
.form-done[hidden] { display: none; }
.form-done p { margin: 0; max-width: var(--measure); }
.form-done:focus { outline: none; }

/* == Partner werden ========================================================
   /partner-werden: zehn Kategorien, je eine Nachweisliste, drei Formulare.
   Ohne Skript steht alles untereinander. Mit Skript (.pw-bereit) nur die
   gewählte Kategorie. Varianten über data-pw auf dem Wurzelelement.       */

.pw-liste {
  list-style: none;
  margin: calc(var(--u) * 3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: var(--gap);
  border-top: 1px solid var(--line);
}
.pw-liste li { border-bottom: 1px solid var(--line); }
.pw-link {
  display: block;
  min-height: 44px;
  padding: calc(var(--u) * 2) 0 calc(var(--u) * 2) calc(var(--u) * 1.5);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.pw-link-name {
  display: block;
  font-family: var(--display);
  font-size: var(--t-6);
  font-weight: 500;
  line-height: 1.3;
}
.pw-link-wen {
  display: block;
  margin-top: 4px;
  font-size: var(--t-7);
  line-height: 1.5;
  color: var(--text-2);
}
.pw-link:hover .pw-link-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pw-link:hover { border-left-color: var(--line-strong); }
.pw-link[aria-current] { border-left-color: var(--text); }
.pw-link[aria-current] .pw-link-name { font-weight: 500; }

/* Variante A: die Auswahlliste statt der Übersicht. */
.pw-wahl { display: none; }
[data-pw="a"] .pw-bereit .pw-wahl { display: block; max-width: 36em; margin-top: calc(var(--u) * 3); }
[data-pw="a"] .pw-bereit .pw-liste { display: none; }

.pw-blaetter { margin-top: calc(var(--u) * 5); }
.pw-bereit .pw-kat:not([data-aktiv]) { display: none; }
.pw-blatt {
  padding-top: calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 5);
  border-top: 2px solid var(--text);
}
.pw-blatt:focus { outline: none; }
.pw-blatt h3 { font-size: var(--t-4); margin-bottom: calc(var(--u)); }
.pw-wen { max-width: var(--measure); font-size: var(--t-7); color: var(--text-2); }
.pw-blatt h4 {
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 1.5);
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  color: var(--text-2);
}
.pw-nw { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pw-nw li {
  position: relative;
  padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.5) calc(var(--u) * 3.5);
  border-bottom: 1px solid var(--line);
}
/* Das Kästchen der Checkliste. Auf dem Bildschirm ein Hinweis auf die
   Form, auf Papier das Feld zum Abhaken. */
.pw-nw li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--u) * 1.5 + 0.4em);
  width: 12px;
  height: 12px;
  border: 1px solid var(--line-strong);
}
.pw-was {
  display: block;
  font-family: var(--display);
  font-size: var(--t-6);
  font-weight: 500;
  line-height: 1.35;
}
.pw-konkret {
  display: block;
  max-width: var(--measure);
  margin-top: 4px;
  font-size: var(--t-7);
  line-height: 1.5;
  color: var(--text-2);
}
.pw-art { font-family: var(--display); font-weight: 500; color: var(--text); }
/* Drucken braucht das Skript; ohne es gibt es den Knopf nicht. */
.pw-drucken { display: none; }
.js .pw-drucken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u)) calc(var(--u) * 2);
  margin-top: calc(var(--u) * 3);
}
.pw-drucken .hint { margin: 0; }
.pw-druckkopf, .pw-druckfuss { display: none; }

/* Variante C: die Frage zwischen Liste und Formular. */
.pw-schwelle {
  margin: 0 0 calc(var(--u) * 5);
  padding: calc(var(--u) * 3) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.pw-schwelle[hidden] { display: none; }
.pw-frage {
  margin: 0 0 calc(var(--u) * 2);
  font-family: var(--display);
  font-size: var(--t-5);
  font-weight: 500;
  line-height: 1.3;
}
.pw-antworten { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.pw-nein { max-width: var(--measure); margin: calc(var(--u) * 2) 0 0; }
.pw-nein[hidden] { display: none; }
.pw-nein:focus { outline: none; }

.pw-formular { padding-top: calc(var(--u) * 3); border-top: 2px solid var(--text); }
.pw-formular[hidden] { display: none; }
.pw-formular h3 { font-size: var(--t-4); margin-bottom: calc(var(--u) * 1.5); }
.pw-form-kat { font-family: var(--display); font-size: var(--t-7); }
.pw-form-kat[hidden] { display: none; }
.pw-bereit .pw-kat-feld { display: none; }
.pw-kapital .pw-formular, .pw-international .pw-formular { margin-top: calc(var(--u) * 5); }
.pw-sprache { margin: 0 0 calc(var(--u) * 2); font-family: var(--display); font-size: var(--t-7); }

/* Druck: ein Blatt allein. aufnahme.js markiert die Vorfahren des Blatts
   mit .pw-pfad; auf jeder Ebene fällt weg, was nicht auf dem Weg liegt. */
@page { margin: 16mm 18mm; }
@media print {
  .pw-drucken, .pw-schwelle, .pw-wahl, .form .hp { display: none !important; }
  html[data-druck] body > :not(.pw-pfad),
  html[data-druck] .pw-pfad > :not(.pw-pfad):not(.pw-druck) { display: none !important; }
  html[data-druck] .pw-pfad {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* .pw-druck ist das Blatt, das gerade gedruckt wird — nicht der Knopf. */
  html[data-druck] .pw-druck { display: block !important; margin: 0; padding: 0; border: 0; }
  /* Papier hat keine Tageszeit: Abends wäre --text hell und auf Weiß kaum lesbar. */
  html[data-druck] .pw-druck, .pw-was, .pw-art, .pw-dk-marke, .pw-dk-titel { color: var(--bp-ink); }
  html[data-druck] .pw-druckkopf {
    display: block;
    margin-bottom: 16pt;
    padding-bottom: 10pt;
    border-bottom: 1pt solid var(--bp-ink);
  }
  html[data-druck] .pw-druckfuss {
    display: block;
    margin-top: 16pt;
    padding-top: 6pt;
    border-top: 0.5pt solid var(--bp-ink);
    font-size: 8.5pt;
    line-height: 1.4;
  }
  .pw-druckfuss p { margin: 0 0 3pt; }
  .pw-dk-marke { margin: 0; }
  .pw-dk-marke .logo { height: 12mm; width: auto; margin-bottom: 4mm; }
  .pw-dk-absender { margin: 4pt 0 0; font-size: 8.5pt; line-height: 1.4; }
  .pw-dk-titel { margin: 12pt 0 0; font-family: var(--display); font-size: 10pt; font-weight: 500; }
  html[data-druck] .pw-blatt h3 { font-size: 17pt; margin: 0 0 4pt; }
  .pw-wen, .pw-blatt h4, .pw-konkret { color: var(--bp-ink); }
  .pw-blatt h4 { margin: 12pt 0 4pt; font-size: 9.5pt; }
  .pw-nw { border-color: var(--bp-grey); }
  .pw-nw li { break-inside: avoid; padding: 6pt 0 6pt 20pt; border-color: var(--bp-grey); }
  .pw-nw li::before { top: 7pt; width: 10pt; height: 10pt; border: 1pt solid var(--bp-ink); }
  .pw-was { font-size: 10.5pt; }
  .pw-konkret { font-size: 9pt; }
}

/* == 14  Panels und Overlays ============================================== */

.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--deep) 40%, transparent); z-index: 96; }
.scrim[hidden] { display: none; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  z-index: 97;
  background: var(--paper);
  border-left: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
}
.panel[hidden] { display: none; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: calc(var(--u) * 3);
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: var(--t-5); margin: 0; }
.panel-close {
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  flex: none;
}
.panel-close::before, .panel-close::after {
  content: "";
  position: absolute;
  left: 13px; top: 21px;
  width: 16px; height: 1.5px;
  background: var(--text);
}
.panel-close::before { transform: rotate(45deg); }
.panel-close::after { transform: rotate(-45deg); }
.panel-body { padding: calc(var(--u) * 3); overflow-y: auto; font-size: var(--t-7); line-height: 1.6; }
.panel-body .def { grid-template-columns: 1fr; gap: 4px; }
.panel-claim { font-size: var(--t-6); line-height: 1.55; margin-bottom: calc(var(--u) * 3); }
.market-date { font-family: var(--display); font-size: var(--t-6); font-weight: 500; }
.market-curve svg { width: 100%; height: auto; background: var(--deep); }
.market-live { margin-top: calc(var(--u) * 3); padding-top: calc(var(--u) * 3); border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  /* Mobil: als Bottom-Sheet statt seitlich. */
  .panel { top: auto; left: 0; width: 100%; max-height: 80vh; border-left: 0; border-top: 2px solid var(--deep); }
}

.pop {
  position: absolute;
  z-index: 98;
  width: min(320px, calc(100vw - 32px));
  padding: calc(var(--u) * 2);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--deep) 8%, transparent);
  font-size: var(--t-7);
  line-height: 1.55;
}
.pop[hidden] { display: none; }
.pop-title { font-family: var(--display); font-weight: 500; margin-bottom: calc(var(--u) * 0.5); }
.pop-text { color: var(--text-2); margin-bottom: calc(var(--u) * 1.5); }

.ticker {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  gap: 2px;
  min-height: 44px;
  line-height: 1.35;
  flex: none;          /* im Flex-Fuß nicht zusammenquetschen lassen */
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-on-deep);
  padding: 0 0 2px;
  color: var(--on-deep-2);
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--t-7);
  text-align: left;
}
.ticker:hover { color: var(--on-deep); border-bottom-color: var(--on-deep-2); }
.ticker-label { color: inherit; }
.ticker-value { font-variant-numeric: tabular-nums lining-nums; color: var(--on-deep); }

/* == 15  Fußzeile ========================================================= */

.ftr {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--deep);
  color: var(--on-deep);
  padding-block: calc(var(--u) * 8) calc(var(--u) * 4);
  margin-top: var(--sec);
}
/* Der Film liegt hinter allem, stark gedämpft: Die Schrift der Fußzeile muss
   auf jedem Bild tragen. Wer weniger Bewegung will, bekommt die ruhige Fläche. */
.ftr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  opacity: 0.32; filter: brightness(0.5); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ftr-video { display: none; } }
/* Das Handlungsband bringt seine eigenen 128 Pixel mit. Die Fußzeile legte
   dieselben noch einmal darüber — zusammen mit ihrem Innenabstand ergab das
   390 Pixel Leere auf jeder Seite, die ein Handlungsband hat.

   Die alte Regel hieß `.sec-action + .ftr` und konnte nie greifen: Das Band
   steht in <main>, die Fußzeile daneben. Geschwister sind sie nicht. Der
   Zustand hängt jetzt am <main>, das beides kennt. */
main:has(> .sec-action:last-child) + .ftr { margin-top: 0; }
.ftr-top {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: calc(var(--gap) * 2);
  padding-bottom: calc(var(--u) * 6);
  border-bottom: 1px solid var(--line-on-deep);
}
.ftr-brand .logo { height: 56px; width: auto; margin-bottom: calc(var(--u) * 3); }
.ftr-brand address, .ftr-brand p {
  font-style: normal;
  font-size: var(--t-7);
  line-height: 1.6;
  color: var(--on-deep-2);
  margin-top: calc(var(--u) * 2);
}
.ftr-brand a { color: var(--on-deep); }
.ftr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); }
.fcol h2 { font-size: var(--t-7); font-weight: 500; margin-bottom: calc(var(--u) * 1.5); }
.fcol h2 a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.fcol h2 a:hover { text-decoration: underline; }
.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol li { margin-bottom: calc(var(--u)); }
.fcol a {
  font-size: var(--t-7);
  color: var(--on-deep-2);
  text-decoration: none;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.fcol li { margin-bottom: 0; }
.fcol a:hover { color: var(--on-deep); text-decoration: underline; }

.ftr-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  padding-top: calc(var(--u) * 4);
}
.ftr-legal { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); list-style: none; margin: 0; padding: 0; }
.ftr-legal a {
  font-size: var(--t-7);
  color: var(--on-deep-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ftr-legal a:hover { color: var(--on-deep); text-decoration: underline; }
.ftr-copy { font-size: var(--t-7); color: var(--on-deep-2); margin: 0 0 0 auto; }
/* Ohne Beschriftung. Sie steht da, sie erklärt sich nicht. */
.ftr-hz {
  font-family: var(--display);
  font-size: var(--t-mark);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--on-deep-2);
}

@media (max-width: 900px) {
  .ftr-top { grid-template-columns: 1fr; }
  .ftr-copy { margin-left: 0; }
}

/* Zustandsanzeige: eine eigene Spalte im Fußzeilenraster, dort wo es ohnehin
   Platz lässt. Kein Kasten, keine Überschrift in Versalien — wer sie liest,
   erfährt nebenbei, wovon dieses Geschäft lebt. Wer sie übersieht, verliert
   nichts. */
.daystate { grid-column: span 2; max-width: 34em; }
.daystate p { margin: 0 0 calc(var(--u) * 1); font-size: var(--t-7); line-height: 1.5; }
.daystate-now { color: var(--on-deep); }
.daystate-why { color: var(--on-deep-2); }
/* Die stille Stunde: zwischen zwei und vier Uhr, sonst nicht vorhanden. */
.daystate-quiet {
  margin-top: calc(var(--u) * 1.5);
  padding-top: calc(var(--u) * 1.5);
  border-top: 1px solid var(--line-on-deep);
  color: var(--on-deep);
}
.daystate-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-7);
  color: var(--on-deep-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.daystate-more:hover { color: var(--on-deep); text-decoration-thickness: 2px; }

/* Statt einer Statusleuchte eine Tagesachse: die Linie sind die 24 Stunden,
   der Strich darauf steht dort, wo wir gerade sind. Dieselbe Sprache wie die
   Preiskurve im Auftakt, nur eingedampft. Die Stunden stehen darunter, damit
   die Achse als Skala gelesen wird und nicht als Regler. Die Position setzt
   das Skript in --daystate-pos. */
.daystate-axis {
  margin: calc(var(--u) * 0.5) 0 calc(var(--u) * 2.5);
  max-width: 260px;
}
.daystate-track {
  position: relative;
  display: block;
  height: 1px;
  background: var(--line-on-deep);
}
.daystate-mark {
  position: absolute;
  top: -5px;
  left: calc(var(--daystate-pos, 0.5) * 100%);
  transform: translateX(-50%);
  width: 2px;
  height: 11px;
  background: var(--brand-on-deep);
}
/* Ab der Wende führt Rot: dann entsteht der Erlös. */
[data-daytime="wende"] .daystate-mark,
[data-daytime="einspeisung"] .daystate-mark { background: var(--value-on-deep); }
.daystate-hours {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--u) * 1);
  font-family: var(--display);
  font-size: var(--t-mark);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--on-deep-2);
}
.daystate-hours b { font-weight: 400; }

@media (max-width: 900px) {
  /* Schmal fasst das Fußzeilenraster zwei Spalten; eine davon reicht für
     den Satz nicht. Dann nimmt die Anzeige die ganze Zeile. */
  .daystate { grid-column: 1 / -1; }
}

/* == 16  Bewegung und Barrierefreiheit ==================================== */

/* Es gibt genau einen orchestrierten Moment (die Preiskurve) und
   Reaktionen auf Nutzerhandlungen. Wer weniger Bewegung wünscht,
   bekommt keine — auch nicht den Hero-Moment. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .hero-day .dc-wipe-r { transform: none; }
  .js .hero-day .dc-marks > * { opacity: 1; }
}

/* Ohne JavaScript bleibt alles lesbar und bedienbar. */
.no-js .toc-list { display: block !important; }
.no-js .mega { position: static; transform: none; }

/* == 17  Erlösrechner ===================================================== */
/* --------------------------------------------------------------------------
   Der Rechner benutzt dieselbe Zeichenfläche und dieselben Klassen wie der
   Auftakt der Startseite (.dc-*). Die Wiedererkennung ist Absicht: Wer die
   Kurve dort verstanden hat, versteht sie hier sofort wieder.

   Ein Unterschied: Der Auftakt steht auf --hero-bg und setzt die Farbrollen
   auf die --hero-*-Ausprägungen um. Der Rechner steht auf dem Flächenton der
   Seite und benutzt deshalb die Papier-Ausprägungen — dieselbe Logik, ein
   anderer Grund. Beides ist in tools/contrast.py gerechnet.

   Drei Varianten, umschaltbar mit ?sim=a|b|c. Voreinstellung und Empfehlung
   ist b; ohne JavaScript bleibt die Kurve stehen und die Annahmen gelten.
   -------------------------------------------------------------------------- */

.sec-sim { background: var(--paper-2); border-block: 1px solid var(--line); }
.sec-sim .intro { margin-bottom: calc(var(--u) * 3); }

/* Der Hinweis steht vor dem Gerät, nicht danach. */
/* Vier Komponenten, eine Hinweiszeile: der Satz, der sagt, was das hier
   NICHT ist. Rahmen wie beim Beistelltext — Bordeaux bleibt dem negativen
   Preis vorbehalten, sonst bedeutet es zweierlei. */
.sim-notice, .pk-notice, .km-notice, .stg-notice {
  max-width: 46em;
  padding-left: calc(var(--u) * 2);
  border-left: 2px solid var(--line-strong);
  font-size: var(--t-7);
  line-height: 1.55;
  color: var(--text-2);
}
.pk-notice strong, .km-notice strong, .stg-notice strong { color: var(--text); }
.sim-notice { margin: 0 0 calc(var(--u) * 4); }

.sim {
  display: grid;
  gap: calc(var(--u) * 4) var(--gap);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 31%);
  grid-template-areas:
    "nojs     nojs"
    "graph    graph"
    "windows  windows"
    "controls result"
    "assume   assume";
  align-items: start;
}
.sim-live { display: contents; }
.sim-nojs {
  grid-area: nojs;
  max-width: 42em;
  margin: 0;
  font-size: var(--t-7);
  color: var(--text-2);
}
.js .sim-nojs { display: none; }
.no-js .sim-controls,
.no-js .sim-windows,
.no-js .sim-result { display: none; }

/* -- Diagramm ------------------------------------------------------------ */

.sim-graph {
  grid-area: graph;
  position: relative;
  height: clamp(300px, 46vh, 520px);
  /* Die Farbrollen des Diagramms: auf dem Flächenton tragen die
     Papier-Ausprägungen, nicht die für Kapitelflächen. Sie wechseln mit der
     Tageszeit von selbst — der Rechner weiß davon nichts. */
  --on-deep: var(--text);
  --on-deep-2: var(--text-2);
  --line-on-deep: var(--line-strong);
  --value-on-deep: var(--value);
  --charge-on-deep: var(--charge);
  --negative-on-deep: var(--negative-strong);
  /* Der Grund des Rechners liegt mittig zwischen Papier und Nahschwarz. Dieselbe
     Deckkraft, die auf dem Auftaktsgrund trägt, drückt hier die Linien unter
     3:1 — die Flächen sind deshalb leiser. Gerechnet in tools/contrast.py. */
  --dc-base: 0.03;
  --dc-win: 0.09;
  --dc-line: calc(2.5px + var(--value-fill) * 9px);
}
[data-daytime="einspeisung"] .sim-graph { --dc-win: 0.14; }
[data-daytime="nacht"] .sim-graph { --dc-win: 0.16; }

.sim-plot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sim-marks { z-index: 3; }
[data-zero="0"] .sim-graph .dc-zero,
[data-zero="0"] .sim-graph .dc-zero-lab { display: none; }
.sim-date { pointer-events: none; }

/* Der Kopf der Vorführung: eine senkrechte Linie, die den Tag abläuft. */
.sim-head { stroke: var(--on-deep-2); stroke-width: 1; stroke-dasharray: 2 4;
            vector-effect: non-scaling-stroke; }

/* -- Ziehen im Diagramm -------------------------------------------------- */

/* Die Fenster sind anfassbar. Sie sind bildschirmhoch, damit das Ziel auch
   mit dem Daumen groß genug ist — 15 Pixel je Stunde bei 360px Breite wären
   als schmaler Griff unbenutzbar. */
.sim-grips { position: absolute; inset: 0; z-index: 4; }
.sim-grip {
  position: absolute;
  top: 9%;
  height: 62%;
  cursor: ew-resize;
  touch-action: none;
  border-inline: 2px solid transparent;
}
.sim-grip-charge { border-color: var(--charge); }
.sim-grip-discharge { border-color: var(--value); }
.sim-grip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  margin: -1.5px 0 0 -13px;
  opacity: 0.55;
}
.sim-grip-charge::after { background: var(--charge); }
.sim-grip-discharge::after { background: var(--value); }
.sim-grip:hover::after { opacity: 1; }
[data-sim="a"] .sim-grips { display: none; }
[data-dragging] .sim-plot { pointer-events: none; }

/* -- Bedienelemente ------------------------------------------------------ */

.sim-controls {
  grid-area: controls;
  display: grid;
  gap: calc(var(--u) * 3) var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-content: start;
}
.sim-field-power { grid-column: 1 / -1; }
/* min-width: Ein fieldset ist sonst mindestens so breit wie sein Inhalt
   und ragt auf schmalen Telefonen über den Rand. */
.sim-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.sim-field legend {
  padding: 0 0 calc(var(--u) * 1);
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
}
.sim-power { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.sim-power input[type="range"] { flex: 1 1 auto; min-width: 0; }
.sim-power output {
  flex: 0 0 auto;
  min-width: 5.5em;
  font-family: var(--display);
  font-size: var(--t-4);
  font-variant-numeric: tabular-nums lining-nums;
}

/* -- Schieberegler ------------------------------------------------------- */

/* Das native Element, gestaltet — keine nachgebaute Komponente. Damit bleiben
   Pfeiltasten, Pos1, Ende, Bild auf und ab, die Wischgeste und die
   Vorlesehilfe erhalten, ohne dass jemand sie schreibt.

   Der zurückgelegte Teil der Bahn ist gefüllt, und zwar ohne Verlauf: Der
   Griff wirft einen harten Schatten nach links, die Bahn beschneidet ihn.
   Firefox kennt dafür ein eigenes Pseudoelement. Zwei Schreibweisen, eine
   Aussage — wie weit ist der Regler.

   Der Griff ist ein Strich, kein Kreis. Angefasst wird eine Fläche von
   44 Pixeln Höhe; gezeichnet werden 4. */
input[type="range"] {
  appearance: none;
  height: 44px;
  background: none;
  cursor: pointer;
}
/* Die Bahn ist 6 Pixel hoch. Sie muss den Griff enthalten können: Der
   Beschnitt, der den Schatten zur Füllung macht, schneidet auch alles ab,
   was über die Bahn hinausragt. Ein 22 Pixel hoher Strich wäre davon nur
   3 Pixel übrig — also ist der Griff so hoch wie die Bahn und trennt sich
   durch die Farbe, nicht durch die Höhe. */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--line);
  overflow: hidden;
}
input[type="range"]::-moz-range-track { height: 6px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 6px; background: var(--brand); }
/* Der Griff ist eine Kerbe in der Füllung: ein schmaler Strich in der
   Grundfarbe, der genau dort steht, wo der Wert steht. Auf der roten
   Füllung trägt er 4,4:1 bis 6,8:1. */
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 3px;
  height: 6px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: -100vw 0 0 100vw var(--brand);
}
input[type="range"]::-moz-range-thumb {
  width: 3px; height: 14px; border: 0; border-radius: 0; background: var(--brand);
}
/* Anfassen, zeigen, greifen: die Kerbe wird breiter, nicht farbiger. */
input[type="range"]:hover::-webkit-slider-thumb { width: 5px; }
input[type="range"]:hover::-moz-range-thumb { width: 5px; }
input[type="range"]:active::-webkit-slider-thumb { width: 5px; }
input[type="range"]:active::-moz-range-thumb { width: 5px; height: 18px; }
/* Der Fokusring gehört um die Bahn, nicht um die 44 Pixel hohe Trefferfläche:
   Sonst steht ein Rahmen um nichts. */
input[type="range"]:focus-visible { outline: none; }
/* Der Fokusring gehört an die Bahn: Ein Ring um die 44 Pixel hohe
   Trefferfläche stünde um nichts. */
input[type="range"]:focus-visible::-webkit-slider-runnable-track {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
input[type="range"]:focus-visible::-moz-range-track {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
input[type="range"]:focus-visible::-webkit-slider-thumb { width: 5px; }
input[type="range"]:focus-visible::-moz-range-thumb { width: 5px; }
input[type="range"][disabled] { cursor: not-allowed; }
input[type="range"][disabled]::-webkit-slider-thumb { background: var(--paper); box-shadow: -100vw 0 0 100vw var(--line-strong); }
input[type="range"][disabled]::-moz-range-thumb { background: var(--line-strong); }
input[type="range"][disabled]::-moz-range-progress { background: var(--line-strong); }

/* Segmentierte Auswahl: echte Radios, damit Tastatur und Screenreader ohne
   Nachbau funktionieren. Sichtbar ist eine Reihe von Feldern. */
.sim-field-seg .sim-opt,
.sim-field-strategy .sim-opt,
.sim-field-days .sim-opt {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.5);
  min-height: 44px;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.5);
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
}
.sim-field-seg { }
.sim-field-seg .sim-opt + .sim-opt,
.sim-field-strategy .sim-opt + .sim-opt,
.sim-field-days .sim-opt + .sim-opt { border-top: 0; }
.sim-opt input { margin: 0; accent-color: var(--charge); flex: 0 0 auto; }
.sim-opt-body { display: flex; flex-wrap: wrap; gap: 0 calc(var(--u) * 1.5); }
.sim-opt-label { font-family: var(--display); font-size: var(--t-7); }
.sim-opt-note { font-size: var(--t-7); color: var(--text-2); }
.sim-opt:has(input:checked) { background: var(--paper-3); border-color: var(--line-strong); }
.sim-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.sim-field-seg > div { display: flex; }

/* -- Fensterregler ------------------------------------------------------- */

.sim-windows {
  grid-area: windows;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: calc(var(--u) * 2) var(--gap);
}
.sim-windows-row { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) var(--gap); flex: 1 1 24em; }
.sim-win { display: grid; gap: 0; flex: 1 1 14em; min-width: 0; }
.sim-win-label {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
}
.sim-win-label i { width: 10px; height: 10px; flex: 0 0 auto; }
.sim-win-charge .sim-win-label i { background: var(--charge); }
.sim-win-discharge .sim-win-label i { background: var(--value); }
/* Das Ladefenster füllt cyan, das Einspeisefenster gold — dieselbe Zuordnung
   wie die Flächen im Diagramm darüber. */
.sim-win-charge input[type="range"]::-webkit-slider-thumb {
  background: var(--charge); box-shadow: -100vw 0 0 100vw var(--charge);
}
.sim-win-discharge input[type="range"]::-webkit-slider-thumb {
  background: var(--value); box-shadow: -100vw 0 0 100vw var(--value);
}
.sim-win-charge input[type="range"]::-moz-range-thumb { background: var(--charge); }
.sim-win-discharge input[type="range"]::-moz-range-thumb { background: var(--value); }
.sim-win-charge input[type="range"]::-moz-range-progress { background: var(--charge); }
.sim-win-discharge input[type="range"]::-moz-range-progress { background: var(--value); }
.sim-win-out {
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.sim-windows .btn { flex: 0 0 auto; }

/* -- Ergebnis ------------------------------------------------------------ */

.sim-result { grid-area: result; padding: calc(var(--u) * 4); }
.sim-net-label {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--on-deep-2);
}
/* Der Betrag ist die Zahl selbst, nicht ihre Beschriftung — dafür ist Rot
   die Rolle, auf der Kapitelfläche in der aufgehellten Ausprägung, die als
   Zahl 4,5:1 trägt (tools/contrast.py: Erlöszahl des Rechners). Bei einem
   Verlust wechselt die Farbe auf die des negativen Preises. */
.sim-net {
  margin: calc(var(--u) * 0.5) 0 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--value-on-deep);
}
[data-loss="1"] .sim-net { color: var(--negative-on-deep); }
.sim-hint {
  margin: calc(var(--u) * 1) 0 0;
  font-size: var(--t-7);
  line-height: 1.5;
  color: var(--on-deep-2);
  min-height: 1.5em;
}
.sim-spoken {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sim-figures {
  margin: calc(var(--u) * 3) 0 0;
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--line-on-deep);
  display: grid;
  gap: calc(var(--u) * 1.5);
  /* Ohne das bestimmt der längste unumbrechbare Inhalt die Spaltenbreite,
     und die Spalte sprengt den Kasten. Rasterelemente haben von sich aus
     min-width: auto — das ist die Maximalbreite ihres Inhalts. */
  min-width: 0;
}
.sim-figures > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 2);
  align-items: baseline;
  min-width: 0;
}
.sim-figures dt { font-size: var(--t-7); color: var(--on-deep-2); min-width: 0; }
/* Zwei Angaben tragen ihre Bedingung im Namen und sind deshalb lang: die
   Jahreshochrechnung und die Spanne über alle fünf Tage. Sie stehen
   untereinander statt nebeneinander — abgeschnitten wäre gerade bei diesen
   beiden das Falsche. */
.sim-fig-wide { display: block !important; }
.sim-fig-wide dd { text-align: left !important; margin-top: calc(var(--u) * 0.5) !important; }
/* Die Hochrechnung trägt ihre Bedingung im Namen und darunter den Satz, der
   sie einordnet. Sie steht nach der Spanne über alle fünf Tage, nicht davor:
   Wer die Streuung zuerst liest, liest die Jahreszahl anders. */
.sim-fig-note {
  font-family: var(--serif) !important;
  font-size: var(--t-7);
  line-height: 1.5;
  color: var(--on-deep-2);
  max-width: 34em;
  font-variant-numeric: normal !important;
  /* Ein Satz ist kein Messwert: Er darf brechen, und er muss es. */
  white-space: normal !important;
}
.sim-figures dd {
  margin: 0;
  white-space: nowrap;
  /* Eine siebenstellige Zahl bleibt zusammen, eine Angabe aus mehreren
     Wörtern darf am Leerzeichen brechen, statt den Kasten zu verlassen. */
  max-width: 100%;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.sim-fig-wide dd { white-space: normal !important; }

/* -- Annahmen ------------------------------------------------------------ */

.sim-assume { grid-area: assume; margin-top: calc(var(--u) * 2); }
.sim-assume .deflist { margin-top: calc(var(--u) * 3); }
.sim-assume-live {
  margin-top: calc(var(--u) * 3);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--line);
  font-size: var(--t-7);
  color: var(--text-2);
  max-width: 46em;
}

/* -- Variante A: Regler links, Diagramm rechts, Ergebnis unten ----------- */

/* Die vertraute Anordnung. Sie funktioniert — und sie macht das Diagramm zur
   Anzeige. Man liest ab, statt zu probieren; die Erkenntnis, dass man das
   Optimum von Hand nicht schlägt, entsteht nie. Deshalb nicht empfohlen. */
[data-sim="a"] .sim {
  grid-template-columns: minmax(260px, 24%) minmax(0, 1fr);
  grid-template-areas:
    "nojs     nojs"
    "windows  graph"
    "controls graph"
    "result   result"
    "assume   assume";
}
[data-sim="a"] .sim-result { display: grid; gap: 0 var(--gap); grid-template-columns: minmax(0, 18em) minmax(0, 1fr); }
[data-sim="a"] .sim-figures { margin: 0; padding: 0; border: 0; align-content: start; }

/* -- Schmale Geräte ------------------------------------------------------ */

@media (max-width: 900px) {
  .sim,
  [data-sim="a"] .sim {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nojs" "graph" "windows" "controls" "result" "assume";
  }
  [data-sim="a"] .sim-result { grid-template-columns: minmax(0, 1fr); }
  .sim-graph { height: clamp(260px, 42vh, 420px); }
  .sim-field-days .sim-opt-body { display: block; }

  /* Der Betrag folgt mit: Solange das Gerät zu sehen ist, steht er am unteren
     Rand. Ohne das müsste man nach jedem Reglerzug nach oben rollen, und der
     Rechner wäre auf dem Telefon vorhanden statt benutzbar. */
  .sim-result { padding: 0; background: none; color: inherit; }
  .sim-net-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0 calc(var(--u) * 2);
    padding: calc(var(--u) * 1.5) clamp(16px, 5vw, 24px) calc(var(--u) * 2);
    background: var(--deep);
    color: var(--on-deep);
    border-top: 1px solid var(--line-on-deep);
    transform: translateY(101%);
    transition: transform var(--dur) var(--ease);
  }
  [data-inview] .sim-net-box { transform: none; }
  .sim-net-box .sim-net-label { grid-column: 1; }
  .sim-net-box .sim-net { grid-column: 1; margin: 0; font-size: var(--t-3); }
  .sim-net-box .sim-hint {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    text-align: right;
    max-width: 12em;
  }
  .sim-figures {
    margin: 0;
    padding: calc(var(--u) * 3);
    border: 0;
    background: var(--deep);
    color: var(--on-deep);
  }
  .sim-figures dt { color: var(--on-deep-2); }
  /* Platz für die mitlaufende Leiste, damit sie nichts verdeckt. */
  .sec-sim { padding-bottom: calc(var(--u) * 14); }
}

@media (prefers-reduced-motion: reduce) {
  .sim-net-box { transition: none; }
}

/* == 18  Übersichtsschaltbild ============================================= */
/* --------------------------------------------------------------------------
   Die einzige scrollgebundene Bewegung der Website. Sie ist erlaubt, weil
   sich hier etwas Echtes zeichnet — ein einpoliges Übersichtsschaltbild, wie
   es so in den Netzanschlussunterlagen steht.

   Zwei Anordnungen, nicht eine geschrumpfte: weit für den Bildschirm, schmal
   fürs Telefon. Umgeschaltet wird die ganze Zeichnung, nicht ihr Maßstab.

   Drei Varianten, umschaltbar mit ?schema=a|b|c. Voreinstellung ist b.
   -------------------------------------------------------------------------- */

.sc {
  /* Strichstärke in Bildpunkten, unabhängig vom Maßstab der Zeichnung.
     Auf dunklem Grund trägt ein heller Strich weniger weit als ein dunkler auf
     Papier — die abendlichen Zustände zeichnen deshalb kräftiger. */
  --sc-w: 1.55px;
  margin-top: calc(var(--u) * 5);
}
[data-daytime="einspeisung"] .sc,
[data-daytime="nacht"] .sc { --sc-w: 2px; }

.sc-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
  gap: var(--gap);
  align-items: start;
}

/* -- Zeichnung ----------------------------------------------------------- */

.sc-fig { position: relative; }
.sc-fig-schmal { display: none; }
.sc-svg { display: block; width: 100%; height: auto; overflow: visible; }

.sc-l, .sc-bus, .sc-d, .sc-frame, .sc-cut, .sc-k, .sc-box, .sc-boxc {
  fill: none;
  stroke: var(--text);
  stroke-width: var(--sc-w);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Sammelschienen sind dick, Kontaktpunkte klein und rund, Kästen ruhig. */
.sc-bus { stroke-width: calc(var(--sc-w) * 2.6); stroke-linecap: butt; }
.sc-k { stroke-width: calc(var(--sc-w) * 0.9); }
.sc-box { stroke: var(--line-strong); }
/* Der Anlagenregler steht nicht im Leistungsweg — sein Kasten ist leiser. */
.sc-boxc { stroke: var(--text-2); }
.sc-dot { fill: var(--text); stroke: none; opacity: var(--sc-p, 1); }

/* Mess-, Steuer- und Meldeleitungen: gestrichelt, dünner, zurückgenommen.
   Sie bekommen ihre Strichelung über stroke-dasharray — dieselbe Eigenschaft,
   mit der die Leistungswege gezeichnet werden. Deshalb erscheinen sie nicht
   strichweise, sondern blenden mit ihrem Element auf. */
.sc-d, .sc-frame, .sc-cut {
  stroke: var(--text-2);
  stroke-dasharray: 5 4;
  stroke-dashoffset: 0;
  opacity: var(--sc-p, 1);
}
.sc-frame { stroke: var(--line-strong); stroke-dasharray: 3 5; }
.sc-cut { stroke-dasharray: 9 6; }

/* Der Zeichenvorgang: dasselbe Prinzip wie beim Auftakt der Startseite —
   jede Form trägt pathLength="100", der Versatz kommt vom Skript. */
.sc[data-live] .sc-el { stroke-dasharray: 100; }
.sc-el.is-active .sc-l,
.sc-el.is-active .sc-bus,
.sc-el.is-active .sc-k { stroke: var(--charge); }
.sc-el.is-active .sc-box { stroke: var(--charge); }
.sc-el.is-active .sc-dot { fill: var(--charge); }

/* Variante A zeichnet nicht. Sie blendet auch nicht ein: Eine Zeichnung,
   die beim Vorbeirollen erscheint, ist eine Bewegung ohne Aussage. */

/* -- Beschriftungen ------------------------------------------------------ */

.sc-hits { position: absolute; inset: 0; }
.sc-hit {
  position: absolute;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.sc-hit-branch, .sc-hit-control { justify-content: center; }
.sc-lab {
  display: block;
  max-width: 100%;
  font-family: var(--display);
  font-size: var(--t-7);
  line-height: 1.25;
  /* Erscheint erst, wenn das zugehörige Element fertig gezeichnet ist —
     und immer, sobald die Schaltfläche den Fokus hat. Sonst könnte man mit
     der Tastatur an Elementen vorbeilaufen, die man nicht sieht. */
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.sc[data-seen] .sc-lab,
.sc-hit.is-on .sc-lab,
.sc-hit:focus-visible .sc-lab,
.sc-hit:hover .sc-lab { opacity: 1; }
.sc-name { display: block; color: var(--text); }
.sc-hit-branch .sc-name, .sc-hit-control .sc-name { font-size: var(--t-mark-2); }
.sc-sub {
  display: block;
  font-size: var(--t-mark-2);
  color: var(--text-2);
}
.sc-hit-branch .sc-sub, .sc-hit-control .sc-sub { display: none; }
.sc-hit.is-active .sc-name {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.sc-hit:hover .sc-name { text-decoration: underline; text-underline-offset: 3px; }

/* -- Erklärfeld ---------------------------------------------------------- */

.sc-panel { display: grid; gap: calc(var(--u) * 3); }
.sc[data-live] .sc-panel,
.sc[data-seen] .sc-panel {
  position: sticky;
  top: calc(var(--u) * 12);
  padding: calc(var(--u) * 4);
  background: var(--paper-2);
  border-left: 2px solid var(--brand);
}
.sc-text-h {
  margin: 0 0 calc(var(--u) * 1);
  font-size: var(--t-5);
  line-height: 1.2;
}
.sc-text-h .sc-sub {
  display: block;
  margin-top: calc(var(--u) * 0.5);
  font-family: var(--display);
  font-size: var(--t-7);
  letter-spacing: 0;
}
.sc-norm {
  margin: 0 0 calc(var(--u) * 2);
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
}
.sc-text p { max-width: 34em; }
.sc-text p + p { margin-top: calc(var(--u) * 1.5); }
.sc-legend {
  margin-top: calc(var(--u) * 5);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--line);
  max-width: 46em;
  font-size: var(--t-7);
  color: var(--text-2);
}

/* -- Variante C: das Schema ist die Seite -------------------------------- */

/* Die Zeichnung bleibt stehen, der Text läuft an ihr vorbei — alle
   Erklärungen hintereinander statt einer nach der anderen. Wo das bricht,
   steht in docs/SCHALTBILD.md. */
[data-schema="c"] .sec-schema > .wrap { max-width: none; }
[data-schema="c"] .sc-stage {
  grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
  gap: calc(var(--gap) * 2);
}
[data-schema="c"] .sc-fig {
  position: sticky;
  top: calc(var(--u) * 10);
  max-height: 84vh;
  overflow: hidden;
}
[data-schema="c"] .sc .sc-panel {
  position: static;
  padding: 0;
  background: none;
  border: 0;
  gap: 56vh;
}
[data-schema="c"] .sc-text[hidden] { display: block !important; }

/* -- Schmale Geräte ------------------------------------------------------ */

@media (max-width: 900px) {
  .sc-stage,
  [data-schema="c"] .sc-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sc-fig-weit { display: none; }
  .sc-fig-schmal { display: block; }
  [data-schema="c"] .sc-fig { position: static; max-height: none; }

  /* Das Erklärfeld läuft am unteren Rand mit, solange gezeichnet wird. Oben
     wäre es vom Element, das gerade entsteht, eine halbe Bildschirmhöhe
     entfernt — der Bezug ginge verloren. */
  .sc[data-live] .sc-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 30;
    max-height: 42vh;
    overflow-y: auto;
    padding: calc(var(--u) * 2) clamp(16px, 5vw, 24px) calc(var(--u) * 3);
    border-left: 0;
    border-top: 2px solid var(--brand);
    transform: translateY(101%);
    transition: transform var(--dur) var(--ease);
  }
  .sc[data-live][data-inview] .sc-panel { transform: none; }
  .sc[data-live] .sc-text-h { font-size: var(--t-6); }
  .sc[data-live] .sc-text p + p { margin-top: calc(var(--u) * 1); }
  [data-schema="c"] .sc .sc-panel { gap: calc(var(--u) * 4); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-lab { transition: none; opacity: 1; }
  .sc[data-live] .sc-panel { transition: none; }
}

/* == 19  Lastspitzenkappung =============================================== */
/* --------------------------------------------------------------------------
   Ein Jahreslastgang, durch den man eine Kappungsgrenze zieht. Gezogen wird
   im Diagramm, nicht daneben — ein Regler an der Seite wäre dieselbe Zahl,
   aber nicht dieselbe Handlung.

   Ziehen setzt die Grenze, ein Klick ohne Bewegung zoomt hinein: Jahr,
   Woche, Tag. Im Jahr verdichtet, in Woche und Tag in voller Auflösung.

   Drei Varianten, umschaltbar mit ?peak=a|b|c. Voreinstellung ist b.
   -------------------------------------------------------------------------- */

.sec-peak { background: var(--paper-2); border-block: 1px solid var(--line); }
.pk {
  display: grid;
  gap: calc(var(--u) * 4) var(--gap);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 30%);
  grid-template-areas:
    "nojs     nojs"
    "view     view"
    "chart    result"
    "controls result"
    "assume   assume";
  align-items: start;
  margin-top: calc(var(--u) * 4);
}
.pk-nojs { grid-area: nojs; max-width: 42em; margin: 0; font-size: var(--t-7); color: var(--text-2); }
.js .pk-nojs { display: none; }
.no-js .pk-view, .no-js .pk-controls, .no-js .pk-result, .no-js .pk-grip { display: none; }

.pk-notice { margin: 0 0 calc(var(--u) * 3); }

/* -- Zeitraum ------------------------------------------------------------ */
/* Jahr, Monat, Tag stehen als Schalter da, statt sich hinter einem Klick
   ins Diagramm zu verstecken. Wer hineingezoomt hat, kommt über dieselbe
   Reihe wieder heraus — und kann Monat und Tag auch direkt wählen. */

.pk-view {
  grid-area: view;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1) calc(var(--u) * 3);
}
.pk-levels { display: flex; flex-wrap: wrap; }
.pk-levels button {
  appearance: none;
  margin: 0 0 0 -1px;
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  min-height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
  cursor: pointer;
}
.pk-levels button:first-child { margin-left: 0; }
.pk-levels button:hover { color: var(--text); }
.pk-levels button:active { background: var(--paper-3); }
.pk-levels button[aria-pressed="true"] {
  position: relative;
  background: var(--text);
  color: var(--paper);
  border-color: var(--text);
}
.pk-picker { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
.pk-picker label { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.pk-picker span {
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
}
.pk-picker select {
  min-height: 44px;
  padding: calc(var(--u)) calc(var(--u) * 1.5);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--display);
  font-size: var(--t-7);
}
.pk-picker[hidden], .pk-picker label[hidden] { display: none; }
.pk-zoomhint {
  margin: 0;
  flex: 1 1 16em;
  font-size: var(--t-7);
  line-height: 1.5;
  color: var(--text-2);
}

/* -- Diagramm ------------------------------------------------------------ */

.pk-chart {
  grid-area: chart;
  position: relative;
  height: clamp(260px, 40vh, 420px);
  touch-action: none;
  cursor: ns-resize;
}
.pk-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Die Spanne zwischen kleinstem und größtem Viertelstundenwert je Spalte.
   Sie trägt Information, also gilt für sie derselbe Maßstab wie für die
   Flächen im Auftakt: 1,30:1 gegen ihren eigenen Grund. */
.pk-band { fill: color-mix(in srgb, var(--text) 15%, transparent); stroke: none; }
.pk-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Die gekappte Fläche ist das, was der Speicher übernimmt — und damit die
   Fläche, in der das Geld liegt. Rot. */
.pk-cut {
  fill: color-mix(in srgb, var(--value) calc(var(--pk-cut-fill) * 100%), transparent);
  stroke: var(--value);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
/* Die Grenze ist das, was man anfasst: Grau, wie überall auf dieser Seite. */
.pk-limit {
  stroke: var(--charge);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.pk-worst {
  fill: none;
  stroke: var(--charge);
  stroke-width: 1.5px;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.pk-static { stroke: var(--text-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.js .pk-static { display: none; }

.pk-marks { position: absolute; inset: 0; pointer-events: none; }
.pk-axis-x { position: absolute; left: 0; right: 0; bottom: -22px; height: 18px; }
.pk-axis-x b {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-mark);
  color: var(--text-2);
}
.pk-axis-x b:first-child { transform: none; }
.pk-axis-x b:last-child { transform: translateX(-100%); }
.pk-peaklab, .pk-worstlab {
  position: absolute;
  font-family: var(--display);
  font-size: var(--t-mark);
  color: var(--text-2);
  white-space: nowrap;
}
.pk-peaklab { right: 4px; transform: translateY(-130%); }
/* Die Klammer um das Bemessungsereignis ist grau, ihre Beschriftung nicht:
   Auf dem tiefen Grund der Nacht trägt das gedämpfte Grau als Schrift nicht. */
.pk-worstlab { top: 2px; transform: translateX(-50%); color: var(--text); }

/* Der Griff: eine anfassbare Zone auf der Linie, 44 Pixel hoch, damit ein
   Daumen sie trifft. Sichtbar ist nur der Wert am rechten Ende. */
.pk-grip {
  position: absolute;
  left: 0;
  right: 0;
  height: 44px;
  margin-bottom: -22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: ns-resize;
  touch-action: none;
}
.pk-grip-v {
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1);
  /* Die Griff-Fläche trägt als einzige Stelle Schrift auf der Ladefarbe —
     deshalb --focus und nicht --charge: Das gedämpfte Grau der Nacht käme
     als Grund für Schrift nicht auf 4,5:1 (tools/contrast.py: Wert auf dem
     Griff der Kappungsgrenze). */
  background: var(--focus);
  color: var(--paper);
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
[data-dragging] .pk-grip-v { background: var(--text); }

/* -- Eingaben ------------------------------------------------------------ */

.pk-controls { grid-area: controls; display: grid; gap: calc(var(--u) * 3); align-content: start; }
.pk-field { display: grid; gap: calc(var(--u) * 1); }
.pk-field-l { font-family: var(--display); font-size: var(--t-7); color: var(--text-2); }
.pk-input { display: flex; align-items: baseline; gap: calc(var(--u) * 1); }
.pk-input input {
  width: 7em;
  min-height: 44px;
  padding: calc(var(--u)) calc(var(--u) * 1.5);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--text);
  font-family: var(--display);
  font-size: var(--t-5);
  font-variant-numeric: tabular-nums lining-nums;
}
.pk-unit { font-family: var(--display); font-size: var(--t-7); color: var(--text-2); }
/* Größenordnungen statt Tarife: vier Netzebenen, jede mit dem Betrieb
   daneben, den man sich darunter vorstellt. Ein Klick setzt die Zahl, die
   man danach überschreiben kann — und sobald man das tut, ist keine
   Voreinstellung mehr gewählt. */
.pk-presets { display: grid; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.5); }
.pk-presets-l { font-family: var(--display); font-size: var(--t-7); color: var(--text-2); }
.pk-preset-row { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); }
.pk-preset {
  appearance: none;
  flex: 1 1 auto;
  min-width: 8em;
  margin: 0;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5);
  display: grid;
  gap: 2px;
  text-align: left;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.pk-preset:hover { border-color: var(--line-strong); }
.pk-preset:active { border-color: var(--text); }
.pk-preset-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 calc(var(--u) * 2);
}
.pk-preset-n {
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  color: var(--text);
}
.pk-preset-s { font-size: var(--t-mark-2); line-height: 1.35; color: var(--text-2); }
.pk-preset-v {
  font-family: var(--display);
  font-size: var(--t-mark-2);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-2);
}
.pk-preset[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.pk-preset[aria-pressed="true"] .pk-preset-v { color: var(--text); }
.pk-hint { margin: 0; font-size: var(--t-7); line-height: 1.5; color: var(--text-2); max-width: 40em; }
.pk-reverse { display: none; padding-top: calc(var(--u) * 2); border-top: 1px solid var(--line); }
[data-peak="c"] .pk-reverse { display: grid; gap: calc(var(--u) * 2); }
.pk-field-row { grid-template-columns: 1fr auto; align-items: center; gap: calc(var(--u) * 2); }

/* -- Ergebnis ------------------------------------------------------------ */

/* Der Kasten ist ein eigener Bezugsrahmen: Die große Zahl richtet sich nach
   seiner Breite, nicht nach der des Fensters. */
.pk-result { grid-area: result; padding: calc(var(--u) * 4); container-type: inline-size; }
.pk-figures { display: grid; gap: calc(var(--u) * 1.5); margin: 0; }
/* Zeile für Zeile: Bezeichnung links, Zahl rechts. Wird die Zahl zu lang —
   und bei einer Grenze auf Grundlast wird sie siebenstellig —, rutscht sie
   auf eine eigene Zeile, statt aus dem Kasten zu laufen. */
.pk-figures > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 calc(var(--u) * 2);
}
.pk-figures dt { flex: 1 1 auto; min-width: 0; font-size: var(--t-7); color: var(--on-deep-2); }
.pk-figures dd {
  flex: 0 1 auto;
  margin: 0 0 0 auto;
  max-width: 100%;
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}
/* Die Einsparung ist die Zahl, wegen der jemand hier ist. Rot, und auf der
   Kapitelfläche in der aufgehellten Ausprägung, die als Zahl 4,5:1 trägt. */
.pk-fig-head {
  display: block !important;
  padding-bottom: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 1);
  border-bottom: 1px solid var(--line-on-deep);
}
.pk-fig-head dd {
  text-align: left !important;
  margin: calc(var(--u) * 0.5) auto 0 0 !important;
  /* --pk-len ist die Zeichenzahl der Zahl; peakchart.js setzt sie bei jeder
     Änderung. Die zweite Schranke hält die Zahl im Kasten, statt sie über
     den Rand ins Weiße laufen zu lassen. 0.62em je Zeichen ist die
     Laufweite der Poppins-Ziffern bei dieser Breite. */
  --pk-len: 9;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-size: min(clamp(1.75rem, 3.2vw, 2.75rem),
                 calc(100cqi / (var(--pk-len) * 0.62)));
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--value-on-deep);
}
[data-none="1"] .pk-fig-head dd { color: var(--on-deep-2); }
.pk-worstline {
  margin: calc(var(--u) * 3) 0 0;
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--line-on-deep);
  font-size: var(--t-7);
  line-height: 1.55;
  color: var(--on-deep-2);
}
.pk-result .btn { margin-top: calc(var(--u) * 2); }
.pk-spoken {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pk-assume { grid-area: assume; }
.pk-assume .deflist { margin-top: calc(var(--u) * 3); }

/* -- Variante A: alles untereinander ------------------------------------- */

/* Diagramm oben, Regler darunter, Ergebnisse ganz unten. Vertraut — und
   genau deshalb schwach: Man zieht die Grenze und sieht die Wirkung nicht,
   weil sie unterhalb des Bildausschnitts steht. Nicht die Empfehlung. */
[data-peak="a"] .pk {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "nojs" "view" "chart" "controls" "result" "assume";
}
[data-peak="a"] .pk-figures { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* -- Schmale Geräte ------------------------------------------------------ */

@media (max-width: 900px) {
  .pk,
  [data-peak="a"] .pk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nojs" "view" "chart" "result" "controls" "assume";
  }
  .pk-chart { height: clamp(220px, 34vh, 320px); }
  .sec-peak { padding-bottom: calc(var(--u) * 14); }
  /* Auf schmalen Geräten führen die Schalter selbst durch den Zeitraum; der
     Hinweis auf den Klick ins Diagramm kostete dort drei Zeilen Höhe, die
     dem Diagramm fehlen. */
  .pk-zoomhint { display: none; }

  /* Die Einsparung läuft am unteren Rand mit, solange das Diagramm zu sehen
     ist: Man zieht oben und liest unten, ohne zu rollen. */
  .pk[data-live] .pk-result {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: calc(var(--u) * 1.5) clamp(16px, 5vw, 24px) calc(var(--u) * 2);
    border-top: 1px solid var(--line-on-deep);
    transform: translateY(101%);
    transition: transform var(--dur) var(--ease);
    /* Ein Drittel des Bildschirms, nicht die Hälfte: Darüber muss das
       Diagramm noch zu sehen sein, sonst zieht man blind. Der Rest der
       Angaben rollt in der Leiste. */
    max-height: 34vh;
    overflow-y: auto;
  }
  .pk[data-live][data-inview] .pk-result { transform: none; }
  .pk-fig-head dd { font-size: var(--t-3); }
  .pk-fig-head dd { font-size: min(var(--t-3), calc(100cqi / (var(--pk-len) * 0.62))); }
  .pk-figures { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1) var(--gap); }
  .pk-fig-head { grid-column: 1 / -1; }
  .pk-worstline { margin-top: calc(var(--u) * 2); }
}

@media (prefers-reduced-motion: reduce) {
  .pk[data-live] .pk-result { transition: none; }
}

/* == 20  Standortkarte ==================================================== */
/* --------------------------------------------------------------------------
   Eine Deutschlandkarte ohne Kartendienst: Geometrie im Markup, keine
   Kacheln von fremden Servern. Das ist zuerst eine Datenschutzentscheidung
   und dann eine gestalterische — eine Netzkarte zeigt Netzknoten, nicht
   Straßen.

   Die Punkte sind gestrichelte Nullstrecken mit runder Kappe: ein Pfad je
   Bundesland und Spannungsebene, 48 Knoten für 3.770 Punkte. Mit
   vector-effect bleiben sie beim Zoomen gleich groß.

   Drei Varianten, umschaltbar mit ?karte=a|b|c. Voreinstellung ist b.
   -------------------------------------------------------------------------- */

.sec-karte { background: var(--paper-2); border-block: 1px solid var(--line); }
.km {
  display: grid;
  gap: calc(var(--u) * 3) var(--gap);
  grid-template-columns: minmax(0, 1fr) minmax(270px, 32%);
  grid-template-areas:
    "controls controls"
    "map      side";
  align-items: start;
  margin-top: calc(var(--u) * 4);
}
.km-notice { margin: 0 0 calc(var(--u) * 3); }

/* -- Bedienung ------------------------------------------------------------ */

.km-controls {
  grid-area: controls;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--u) * 2) var(--gap);
}
.no-js .km-controls, .no-js .km-place { display: none; }
[data-karte="a"] .km-controls, [data-karte="a"] .km-place { display: none; }
[data-karte="b"] .km-place { display: none; }
.km-field {
  display: grid;
  gap: calc(var(--u) * 1);
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.km-field > legend, .km-field > span {
  padding: 0;
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
}
.km-checks { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.km-check { display: flex; align-items: center; gap: calc(var(--u) * 1); min-height: 44px; }
.km-check input { width: 18px; height: 18px; accent-color: var(--text); }
.km-check span { font-size: var(--t-7); }
.km-field select, .km-field input {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: calc(var(--u)) calc(var(--u) * 1.5);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--display);
  font-size: var(--t-7);
}
.km-reset { margin-left: auto; }

/* -- Karte ---------------------------------------------------------------- */

.km-fig { grid-area: map; margin: 0; }
/* Höhe gesetzt, Breite folgt dem Seitenverhältnis der Karte: Sonst stünde
   die Karte in einer breiten Spalte und ließe links und rechts Luft, die
   niemand braucht. */
.km-svg {
  display: block;
  height: clamp(400px, 68vh, 840px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 6415 / 8663;
  margin-inline: auto;
  background: var(--paper-2);
}
[data-karte="c"] .km-svg { cursor: crosshair; }
.km-land {
  fill: var(--paper);
  stroke: var(--line-strong);
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.km-land[data-dim] { fill: var(--paper-2); stroke: var(--line); }
/* Im Markup ist ein Punkt eine Strecke von einem Meter mit runder Kappe:
   Der Kreis, den das zeichnet, hat die Strichstärke als Durchmesser. So
   steht die Karte ohne Skript. Mit Skript zeichnet karte.js jeden Punkt als
   gefüllten Kreis in genau diesem Durchmesser neu (data-dots="fill") —
   Safari auf dem iPhone ließ die kurzen Strecken in der Gesamtansicht weg.
   Halbdurchsichtig, damit Dichte als Dichte lesbar wird statt als schwarze
   Fläche. */
.km { --km-punkt: color-mix(in srgb, var(--text) 72%, transparent); }
.km-dot {
  fill: none;
  stroke: var(--km-punkt);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.km-dot[data-kv="110"] { stroke-width: 3.2px; }
.km-dot[data-kv="220"] { stroke-width: 5.4px; }
.km-dot[data-kv="380"] { stroke-width: 7.8px; }
.km[data-dots="fill"] .km-dot { fill: var(--km-punkt); stroke: none; }
.km-dot[hidden], .km-you[hidden] { display: none; }
.km-ring {
  fill: none;
  stroke: var(--charge);
  stroke-width: 1.5px;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.km-you-dot { fill: var(--charge); stroke: var(--paper); stroke-width: 2px;
  vector-effect: non-scaling-stroke; }
.km-count {
  margin-top: calc(var(--u) * 1.5);
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text);
}

/* -- Legende und Beiwerk --------------------------------------------------- */

.km-side { grid-area: side; display: grid; gap: calc(var(--u) * 3); align-content: start; }
.km-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.5); }
.km-legend li {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding-bottom: calc(var(--u) * 1.5);
  border-bottom: 1px solid var(--line);
}
.km-key {
  justify-self: center;
  border-radius: 50%;
  background: var(--km-punkt);
}
.km-key[data-kv="110"] { width: 3.2px; height: 3.2px; }
.km-key[data-kv="220"] { width: 5.4px; height: 5.4px; }
.km-key[data-kv="380"] { width: 7.8px; height: 7.8px; }
.km-legend b { font-family: var(--display); font-size: var(--t-7); font-weight: 500; }
.km-legend i {
  font-style: normal;
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-2);
}
.km-plzout:empty { display: none; }
.km-plzout, .km-hint, .km-source, .km-warn {
  margin: 0;
  font-size: var(--t-7);
  line-height: 1.55;
  color: var(--text-2);
}
.km-source { padding-top: calc(var(--u) * 2); border-top: 1px solid var(--line); }
.km-place { display: grid; gap: calc(var(--u) * 1.5); }
.km-place-l { margin: 0; font-family: var(--display); font-size: var(--t-7); font-weight: 500; }
.km-place-out { display: grid; gap: calc(var(--u) * 1); margin: 0; }
.km-place-out > div { display: flex; flex-wrap: wrap; gap: 0 calc(var(--u) * 2); }
.km-place-out dt { flex: 1 1 auto; font-size: var(--t-7); color: var(--text-2); }
.km-place-out dd {
  margin: 0 0 0 auto;
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
}
.km-warn { border-left: 2px solid var(--line-strong); padding-left: calc(var(--u) * 1.5); }
.km-bridge {
  max-width: var(--measure);
  margin: calc(var(--u) * 4) 0 0;
  font-size: var(--t-6);
  line-height: 1.6;
}

/* -- Variante A: feste Karte, Legende daneben ------------------------------ */

/* Ohne Filter und ohne Postleitzahl. Die Karte belegt dann etwas, statt
   etwas zu beantworten: Wer aus Niederbayern kommt, sucht sein Umspannwerk
   in einem Punktefeld von 3.770. Nicht die Empfehlung. */
[data-karte="a"] .km { grid-template-areas: "map side"; }

@media (max-width: 900px) {
  .km {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "controls" "map" "side";
  }
  [data-karte="a"] .km { grid-template-areas: "map" "side"; }
  .km-svg { height: clamp(360px, 56vh, 560px); }
  .km-reset { margin-left: 0; }
}

/* == 21  Entwicklungsstufen =============================================== */
/* --------------------------------------------------------------------------
   Acht Stufen von Greenfield bis Inbetriebnahme. Eine Datenquelle, zwei
   Darstellungen: die Achse hier und die Leiste auf jeder Projektzeile.

   Der Wert steigt nicht gleichmäßig — er springt an der Netzanschlusszusage
   und am Baurecht. Beide Sprünge sind gezeichnet, benannt und in der
   Beschreibung markiert.

   Alle Werte sind Bänder, keine Linien: Die Breite ist die Spanne. Eine
   dünne Linie durch acht exakte Zahlen behauptete eine Genauigkeit, die es
   nicht gibt.

   Drei Varianten, umschaltbar mit ?stufen=a|b|c. Voreinstellung ist c.
   -------------------------------------------------------------------------- */

.stg-notice { margin: 0 0 calc(var(--u) * 4); }
.stg { display: grid; gap: calc(var(--u) * 3); }

/* -- Die Grafik ----------------------------------------------------------- */

.stg-chart { margin: 0; }
.stg-plot {
  position: relative;
  height: clamp(280px, 38vh, 400px);
  /* Oben stehen „Kipppunkt" und „Unsere Übergabe" über der Zeichenfläche,
     unten die Stufennamen darunter. Beide brauchen ihren Platz. */
  margin: calc(var(--u) * 3) 0 calc(var(--u) * 7);
}
.stg-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.stg-grid, .stg-tick {
  fill: none;
  stroke: var(--line);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.stg-tick { stroke-dasharray: 2 4; }
/* Rot führt: Der Projektwert ist die Zahl, wegen der jemand hier liest. */
.stg-band { fill: color-mix(in srgb, var(--value) calc(var(--stg-band-fill) * 100%), transparent); stroke: none; }
.stg-line {
  fill: none;
  stroke: var(--value);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Die beiden Sprünge tragen die Geschichte: doppelte Strichstärke. */
.stg-jump {
  fill: none;
  stroke: var(--value);
  stroke-width: 5px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.stg-riskband { fill: color-mix(in srgb, var(--text) 17%, transparent); stroke: none; }
.stg-riskline {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}
.stg-zone { fill: color-mix(in srgb, var(--charge) 27%, transparent); stroke: none; }
.stg-handline {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5px;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.stg-node { fill: var(--paper); stroke: var(--value); stroke-width: 2px;
  vector-effect: non-scaling-stroke; }
.stg-node.is-jump { fill: var(--value); }
.stg-node.is-here { fill: var(--charge); stroke: var(--charge); }

/* -- Beschriftung: echte Schrift über der Grafik --------------------------- */

.stg-marks { position: absolute; inset: 0; pointer-events: none; }
.stg-step {
  position: absolute;
  bottom: -54px;
  transform: translateX(-50%);
  width: 12ch;
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  pointer-events: auto;
  text-decoration: none;
  color: var(--text-2);
}
.stg-step b {
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.stg-step span { font-family: var(--display); font-size: var(--t-mark); line-height: 1.25; }
.stg-step:hover span { color: var(--text); text-decoration: underline; }
.stg-ytick {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: var(--t-mark);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-2);
}
.stg-delta, .stg-hand, .stg-tip {
  position: absolute;
  font-family: var(--display);
  font-size: var(--t-mark);
  white-space: nowrap;
}
/* Jeder Schritt zeigt seinen Zuwachs; die beiden großen sind unterstrichen.
   Rot markiert, es beschriftet nicht: kein Text in einem roten Feld. */
.stg-delta {
  transform: translate(-50%, -150%);
  color: var(--text-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.stg-delta.is-jump {
  padding-bottom: 2px;
  border-bottom: 3px solid var(--value);
  color: var(--text);
  font-weight: 500;
  transform: translate(-50%, -170%);
}
.stg-hand, .stg-tip { top: 0; transform: translate(-50%, -130%); color: var(--text); }
.stg-tip { padding-bottom: 2px; border-bottom: 3px solid var(--charge); }

.stg-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1) var(--gap);
  font-size: var(--t-7);
  color: var(--text-2);
}
.stg-legend li { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.stg-legend li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 10px;
}
.stg-key-value::before { background: color-mix(in srgb, var(--value) 22%, transparent);
  border-top: 2px solid var(--value); }
.stg-key-risk::before { background: color-mix(in srgb, var(--text) 12%, transparent);
  border-top: 2px dashed var(--text-2); }
.stg-key-band::before { background: none; border: 1px dashed var(--line-strong); }
.stg-chart figcaption {
  max-width: var(--measure);
  font-size: var(--t-7);
  line-height: 1.6;
  color: var(--text-2);
}

/* -- Die Leiste ------------------------------------------------------------ */

.stg-bar { display: flex; flex-wrap: wrap; gap: 2px; }
.stg-bar-step {
  flex: 1 1 9ch;
  display: grid;
  gap: 2px;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1);
  border-top: 3px solid var(--line-strong);
  text-decoration: none;
  color: var(--text-2);
}
.stg-bar-step b {
  font-family: var(--display);
  font-size: var(--t-7);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.stg-bar-step span { font-family: var(--display); font-size: var(--t-7); line-height: 1.3; }
.stg-bar-step i { font-style: normal; font-family: var(--display); font-size: var(--t-mark);
  font-variant-numeric: tabular-nums lining-nums; }
.stg-bar-step:hover span { color: var(--text); text-decoration: underline; }
/* Die beiden Sprungstufen tragen die Marke auch ohne Grafik. */
.stg-bar-step.is-jump { border-top-color: var(--value); border-top-width: 6px; }
.stg-bar-step.is-hand { border-top-style: double; border-top-width: 7px; }
.stg-bar-step.is-done span, .stg-bar-step.is-done b { color: var(--text); }
.stg-bar-step.is-here { border-top-color: var(--charge); }
.tone-deep .stg-bar-step { border-top-color: var(--line-on-deep); color: var(--on-deep-2); }
.tone-deep .stg-bar-step b { color: var(--on-deep); }
.tone-deep .stg-bar-step.is-jump { border-top-color: var(--value-on-deep); }
.tone-deep .stg-bar-step.is-done span, .tone-deep .stg-bar-step.is-done b { color: var(--on-deep); }
.tone-deep .stg-bar-step.is-here { border-top-color: var(--charge-on-deep); }
.tone-deep .stg-bar-step:hover span { color: var(--on-deep); }

/* -- Varianten ------------------------------------------------------------- */

/* A: nur die Leiste, ein Klick springt in die Beschreibung. Vertraut — und
   genau deshalb schwach: Sie zeigt die Reihenfolge und verschweigt, dass
   zwei Schritte den halben Wert tragen. Nicht die Empfehlung. */
[data-stufen="a"] .stg-chart { display: none; }
[data-stufen="b"] .stg-chart[data-for="c"] { display: none; }
[data-stufen="c"] .stg-chart[data-for="b"] { display: none; }
[data-stufen="b"] .stg-bar-wrap, [data-stufen="c"] .stg-bar-wrap { display: none; }
[data-stufen="b"] .stg-key-risk { display: none; }

/* -- Die Leiste auf der Projektzeile --------------------------------------- */

/* Acht Felder, gefüllt bis zur erreichten Stufe. Muss bei 120 Pixeln Breite
   lesbar bleiben: keine Schrift, feste Lücken von zwei Pixeln, und die
   Sprungstufen als Marke darüber statt als Beschriftung daneben. */
.stg-mini {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  width: 100%;
  max-width: 240px;
  min-width: 104px;
  padding-top: 6px;
}
.stg-seg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 7px;
  background: var(--line);
}
.stg-seg.is-done { background: var(--line-strong); }
/* Grau wie in der Achse und in der Leiste: dieselbe Aussage, dieselbe
   Farbe. Rot bleibt den beiden Sprüngen vorbehalten. */
.stg-seg.is-here { background: var(--charge); height: 11px; }
.stg-seg.is-jump::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 3px;
  background: var(--value);
}
.tone-deep .stg-seg { background: var(--line-on-deep); }
.tone-deep .stg-seg.is-done { background: var(--on-deep-2); }
.tone-deep .stg-seg.is-here { background: var(--charge-on-deep); }
.tone-deep .stg-seg.is-jump::before { background: var(--value-on-deep); }

.stg-flag {
  margin-left: calc(var(--u) * 2);
  padding-left: calc(var(--u) * 1);
  border-left: 4px solid var(--value);
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 500;
  color: var(--text-2);
  vertical-align: 0.2em;
}

@media (max-width: 800px) {
  /* Schmal trägt die Grafik keine acht Namen. Dann bleiben die Nummern —
     die Namen stehen ohnehin in der Liste darunter, jede mit ihrer Nummer. */
  .stg-step span { display: none; }
  .stg-step { width: 3ch; bottom: -30px; }
  .stg-plot { margin-bottom: calc(var(--u) * 5); }
  .stg-bar-step { flex-basis: 7ch; }
  .stg-bar-step i { display: none; }
}

/* -- Die 404-Seite --------------------------------------------------------- */
/* Dieselbe Formensprache wie das Übersichtsschaltbild, nur klein: dieselben
   Klassen, dieselben Strichstärken. Nur die Strichstärke wird hier gesetzt,
   weil sie dort am Abschnitt hängt. */
.nf {
  --sc-w: 1.55px;
  position: relative;
  margin: 0 0 calc(var(--u) * 6);
  max-width: 640px;
}
.nf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.nf-marks { position: absolute; inset: 0; pointer-events: none; }
.nf-mark {
  position: absolute;
  bottom: -6px;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: var(--t-mark);
  color: var(--text-2);
}

/* == 22  Startseite ======================================================= */
/* --------------------------------------------------------------------------
   Die Startseite ist der einzige Bildschirm, den viele Besucher jemals sehen.
   Sie erklärt nichts zu Ende — sie reißt alles an und zeigt den Weg.

   Neun Blöcke mit bewusst ungleichem Gewicht. Eine Startseite aus gleich
   großen Teaserkacheln liest sich wie ein Inhaltsverzeichnis: Sie zeigt, dass
   es Unterseiten gibt, und verschweigt, welche davon das Geschäft trägt.
   Vier Blöcke tragen hier, vier sind schmale Bänder, einer ist ein Film.

     1  Film              voller Bildschirm
     2  Wirkungsfelder    Satzbild, dunkel
     3  Was wir entwickeln    GROSS
     4  Das Projekt           GROSS
     5  Preiskurve        Band
     6  Entwicklungsstufen    Band
     7  Für wen wir arbeiten  GROSS
     8  Was gerade gilt   Band
     9  Kontakt           Band

   Drei Varianten, umschaltbar mit ?start=a|b|c. Voreinstellung ist b.
   -------------------------------------------------------------------------- */

/* Die Bänder sind eng, damit die großen Blöcke weit wirken können. Ohne
   diesen Unterschied stehen neun Abschnitte in neun gleichen Abständen — und
   dann ist die Gewichtung eine Behauptung im Quelltext. */
/* Die vier großen Blöcke stehen etwas enger beieinander als der Rest der
   Website: Auf einer Seite, die neun Abschnitte trägt, kosten 128 Pixel je
   Fuge zusammen mehr als einen Bildschirm. */
.page-home .sec-fields,
.page-home .sec-proof,
.page-home .sec-doors { padding-block: calc(var(--u) * 13); }
.page-home .sec-wirkungsfelder + .sec { padding-top: calc(var(--u) * 13); }
.page-home .sec-band,
.page-home .sec-stages,
.page-home .sec-digest { padding-block: calc(var(--u) * 7); }
.page-home .sec-band + .sec,
.page-home .sec-stages + .sec,
.page-home .sec-digest + .sec { padding-top: 0; }

/* -- 1  Der Film --------------------------------------------------------- */

/* Die Schichtung ist die Architektur: Standbild unten, Film darüber, Wort
   darüber. Das Standbild verschwindet nie — es gibt keinen Zustand, in dem
   diese Fläche leer ist. Deshalb steht hier auch kein Grund in Schwarz. */
.vh {
  position: relative;
  background: var(--deep);
  color: var(--bp-white);
}
.vh-stage {
  position: relative;
  height: calc(100vh - 84px);
  height: calc(100svh - 84px);
  min-height: 460px;
  max-height: 900px;
  overflow: hidden;
}
.vh-still, .vh-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vh-still-img, .vh-video { object-fit: cover; }
/* Der Film blendet nicht auf, er ist da oder nicht: Ein Übergang hier wäre
   eine Bewegung, die ankündigt, dass gleich eine Bewegung kommt. */
.vh-video { opacity: 0; }
.vh[data-vh-playing] .vh-video { opacity: 1; }
/* Der Platzhalter des Auftakts ist dunkel, nicht hell. Nicht aus Geschmack:
   An seiner Stelle liegt später ein Foto, und ein Foto ist selten papierweiß.
   Ein heller Platzhalter würde eine Schrift tragen, die auf dem echten Bild
   nie stünde — und man merkte den Fehler erst nach dem Dreh. Aus demselben
   Grund steht die Bildbeschreibung oben: unten ist der Platz des Wortes. */
.vh-still .ph {
  background: var(--bp-dark);
  color: var(--on-deep-2);
  justify-content: flex-start;
}
.vh-still .ph::before { border-color: var(--line-on-deep); }
.vh-still .ph-kind { color: var(--bp-white); }
.vh-still .ph-key, .vh-still .ph-ratio { color: var(--on-deep-2); }
.vh-still .ph-desc { max-width: 44em; }

/* Das Wort. Feste Stelle im Raster, nie zentriert, nie in der Mitte: Es sitzt
   auf der Textkante der Seite, auf gleicher Höhe wie später jede Überschrift.
   Nur der Inhalt wechselt, die Position nie — die vier Wörter liegen exakt
   übereinander im selben Rasterfeld. */
.vh-mark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(48px, 9vh, 120px);
  z-index: 2;
  pointer-events: none;
}
.vh-h1 {
  position: relative;
  display: grid;
  margin: 0;
  padding-top: calc(var(--u) * 2);
  font-size: clamp(1.25rem, 2.3vw, 1.875rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bp-white);
  /* Kein dunkler Verlauf über den Film. Die Buchstaben tragen ihren Kontrast
     selbst — dieselbe Technik, mit der die Preiskurve ihre Überschrift
     freistellt. Der Film bleibt Film, auch an der Stelle, an der Schrift
     liegt. Die beiden Farben kommen aus der Markenpalette und nicht aus dem
     Tageszustand: Ein Film hat keine Tageszeit. */
  -webkit-text-stroke: 4px color-mix(in srgb, var(--bp-dark) 62%, transparent);
  paint-order: stroke fill;
}
.vh-h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--bp-white);
}
/* Alle vier Wörter stehen im Markup und damit in der Überschrift: Sie sind
   übersetzbar, auffindbar und werden vorgelesen. Sichtbar ist eines. */
.vh-w { grid-area: 1 / 1; opacity: 0; }
.vh-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.vh-w[data-on] { opacity: 1; }
.vh-note {
  margin: calc(var(--u) * 1.5) 0 0;
  max-width: 34em;
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--bp-white);
}

@media (max-width: 700px) {
  .vh-stage { height: calc(100svh - 64px); min-height: 420px; }
  .vh-mark { bottom: clamp(32px, 7vh, 72px); }
}
/* Mit Skript liegt die Kopfzeile als Glas über dem Auftakt (85 px: ihre Höhe
   oben auf der Seite und die Kante): Der Film beginnt am oberen Rand und füllt
   den ersten Bildschirm, das Glas zeigt von Anfang an, was darunter liegt. */
.js .vh { margin-top: -85px; }
.js .vh-stage { height: 100vh; height: 100svh; }

/* -- 2  Wirkungsfelder ------------------------------------------------- */

/* Direkt unter dem Film: die Felder als Satzbild, kein Kachelraster. Vier
   Größen, die Zeilen in Zwölfteln eingerückt, jede auf einer feinen Linie —
   die Linien sind die Textur der Fläche. Ein aktiver Begriff (Maus, Fokus,
   Antippen; site.js 09) wächst über transform: Das Layout bleibt stehen, und
   die Luft zwischen zwei Begriffen ist breiter als der halbe Zuwachs des
   größten. Die übrigen treten auf --on-deep-2 zurück — über 8:1 auf jeder
   Fläche, also klar lesbar. */
.page-home .sec-wirkungsfelder { padding-block: calc(var(--u) * 13); }
.wf { --wf-ruhe: color-mix(in srgb, var(--on-deep) 88%, var(--deep)); }
.wf-kicker { margin-bottom: calc(var(--u) * 4); }
/* Größen und Luft hängen an der Breite des Satzbilds (cqi), nicht an der des
   Bildschirms: Der Inhalt endet bei 1200 Pixeln, die Schrift wüchse sonst
   weiter, und ab etwa 1400 Pixeln Breite brächen die Zeilen um. So steht die
   Komposition auf jedem großen Bildschirm gleich, mit rund sechs Prozent Luft
   in der vollsten Zeile. */
.wf-satz {
  container-type: inline-size;
  --wf-luft: clamp(1.25rem, 4.25cqi, 2.875rem);
  border-bottom: 1px solid var(--line-on-deep);
}
.wf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 0.5) var(--wf-luft);
  max-width: none;
  margin: 0;
  padding: calc(var(--u) * 1.75) 0 calc(var(--u) * 1.75) calc(var(--wf-einzug, 0) * 100% / 12);
  border-top: 1px solid var(--line-on-deep);
}
.wf-einzug-1 { --wf-einzug: 1; }
.wf-einzug-2 { --wf-einzug: 2; }
.wf-einzug-3 { --wf-einzug: 3; }
.wf-einzug-4 { --wf-einzug: 4; }
.wf-einzug-5 { --wf-einzug: 5; }
.wf-einzug-6 { --wf-einzug: 6; }
.wf-rechts { margin-left: auto; }

/* Größe, Schnitt und Zuwachs je Stufe. Die großen wachsen weniger: Sechs
   Prozent von 82 Pixeln sind so deutlich wie achtzehn von 21. */
.wf-xl { --wf-gr: clamp(2.125rem, 7.5cqi, 5.125rem);   --wf-schnitt: 500; --wf-faktor: 1.06; }
.wf-l  { --wf-gr: clamp(1.625rem, 4.6cqi, 3.125rem);   --wf-schnitt: 300; --wf-faktor: 1.1; }
.wf-m  { --wf-gr: clamp(1.25rem, 2.95cqi, 2rem);       --wf-schnitt: 500; --wf-faktor: 1.14; }
.wf-s  { --wf-gr: clamp(1.0625rem, 1.95cqi, 1.3125rem); --wf-schnitt: 400; --wf-faktor: 1.18; }

.wf-begriff {
  display: inline-block;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  font-family: var(--display);
  font-size: var(--wf-gr);
  font-weight: var(--wf-schnitt);
  letter-spacing: -0.02em;
  line-height: 1.08;
  hyphens: manual;
  -webkit-tap-highlight-color: transparent;
}
.wf-begriff:hover { text-decoration: none; }
.wf-wort {
  position: relative;
  display: inline-block;
  color: var(--wf-ruhe);
  transform-origin: 50% 60%;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Der rote Strich unter dem aktiven Begriff wächst mit ihm. */
.wf-wort::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.04em;
  width: 0.9em;
  height: max(2px, 0.045em);
  background: var(--brand-on-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.wf.has-active .wf-wort { color: var(--on-deep-2); }
.wf-begriff.is-active .wf-wort { color: var(--bp-white); transform: scale(var(--wf-faktor)); }
.wf-begriff.is-active .wf-wort::after { transform: scaleX(1); }
/* Der Fokusring sitzt am Wort, nicht am Verweis: So wächst er mit. */
.wf-begriff:focus-visible { outline: none; }
.wf-begriff:focus-visible .wf-wort { outline: 3px solid var(--focus-on-deep); outline-offset: 0.12em; border-radius: 1px; }

/* Die Zeile zum aktiven Begriff. Alle Zeilen liegen in derselben Zelle
   übereinander — die Fläche ist so hoch wie die längste, nichts springt. */
/* Ohne Ruhezeile soll die Erklärung auffallen, wenn sie kommt: eine Stufe
   größer als Fließtext und hell, nicht im zurückgenommenen Grau. */
.wf-spuren {
  display: grid;
  margin-top: calc(var(--u) * 3);
  font-size: var(--t-5);
  line-height: 1.45;
  color: var(--on-deep);
}
.wf-spur {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 0.5) calc(var(--u) * 3);
  max-width: none;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
}
.wf-spur.is-sichtbar {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wf-spur-link { color: var(--on-deep); }
/* Mit der Maus ist der Begriff selbst der Verweis. Den in der Zeile braucht
   nur, wer tippt: Dort hebt das erste Antippen nur hervor. */
@media (hover: hover) and (pointer: fine) { .wf-spur-link { display: none; } }

/* In Ruhe bleibt die Zeile leer. Nur wer keine Maus hat, liest dort einen
   Hinweis — sonst wüsste niemand, dass sich das Antippen lohnt. */
.wf-hinweis { color: var(--on-deep-2); }
@media (hover: hover) and (pointer: fine) { .wf-hinweis { display: none; } }

@media (max-width: 599px) {
  .wf-zeile { padding-left: calc(var(--wf-einzug, 0) * 4%); }
  .wf-spuren { font-size: var(--t-7); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-wort, .wf-wort::after, .wf-spur.is-sichtbar { transition: none; }
}

/* Unter dem Satzbild zwei Bänder, jedes mit eigener kleiner Überschrift. */
.wf-kicker-2 { margin-bottom: calc(var(--u) * 2.5); }

/* Einstieg: je Zielgruppe eine Tür. Fünf Spalten auf einer Linie, wie die
   Zeilen darüber; beim Überfahren wird der Pfeil rot, und der rote Strich
   wächst wie unter den Begriffen — nichts hebt sich an (tools/audit.py). Ein Antippen führt sofort hin — wer
   seinen Bereich sucht, soll nicht zweimal tippen. */
.wf-einstieg { margin-top: calc(var(--u) * 9); }
.wf-tueren {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-on-deep);
  border-bottom: 1px solid var(--line-on-deep);
}
.wf-tueren > li + li { border-left: 1px solid var(--line-on-deep); }
.wf-tuer {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
  height: 100%;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 3);
  color: var(--on-deep);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wf-tueren > li:first-child .wf-tuer { padding-left: 0; }
/* In fünf Spalten eine Stufe kleiner, sonst bricht „Flächeneigentümer &
   Landwirte" in drei Zeilen. */
@media (min-width: 1101px) { .wf-tueren .wf-tuer-name { font-size: var(--t-6); } }
.wf-tuer-name {
  position: relative;
  display: block;
  font-family: var(--display);
  font-size: var(--t-5);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  hyphens: manual;
}
.wf-tuer-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 1.6em;
  height: 2px;
  background: var(--brand-on-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.wf-tuer-ende { white-space: nowrap; }
.wf-tuer-pfeil { display: inline-block; margin-left: 0.4em; vertical-align: -0.1em; color: var(--on-deep-2); transition: color var(--dur) var(--ease); }
/* Ohne Silbentrennung: In fünf schmalen Spalten trennte sie fast jede Zeile. */
.wf-tuer-text { font-size: var(--t-7); line-height: 1.5; color: var(--on-deep-2); hyphens: manual; }
.wf-tuer:hover .wf-tuer-name::after, .wf-tuer:focus-visible .wf-tuer-name::after { transform: scaleX(1); }
.wf-tuer:hover .wf-tuer-pfeil, .wf-tuer:focus-visible .wf-tuer-pfeil { color: var(--brand-on-deep); }
.wf-tuer:focus-visible { outline: 3px solid var(--focus-on-deep); outline-offset: 2px; }

@media (max-width: 1100px) {
  .wf-tueren { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0; }
  .wf-tueren > li { border-bottom: 1px solid var(--line-on-deep); }
  .wf-tueren > li:nth-child(3n + 1) { border-left: 0; }
  .wf-tueren > li:nth-child(3n + 1) .wf-tuer { padding-left: 0; }
}
/* Telefon: eine Liste wie im Menü, Name und Pfeil auf einer Zeile. */
@media (max-width: 700px) {
  .wf-einstieg, .wf-haltung { margin-top: calc(var(--u) * 6); }
  .wf-tueren { grid-template-columns: minmax(0, 1fr); }
  .wf-tueren > li + li { border-left: 0; }
  .wf-tuer { padding: calc(var(--u) * 2) 0 calc(var(--u) * 2.25); }
}

/* Haltung: zuerst die Werte, leicht gesetzt — Mut, Kraft, Wirkung. Dann
   laden sie sich nacheinander auf und werden zum Namen, kräftig: Brave,
   Power, Action; der Strich darunter füllt sich von links wie ein
   Ladezustand. Halten, entladen, von vorn (site.js 09). Beide Worte liegen
   in derselben Zelle, die Breite gehört dem längeren: Beim Wechsel springt
   nichts. Rot ist nur der Strich. */
.wf-haltung { margin-top: calc(var(--u) * 9); container-type: inline-size; }
.wf-paare {
  --wf-h-gr: clamp(2rem, 6.4cqi, 4.5rem);
  display: grid;
  /* Das letzte Wort ist das große — ACTION: los geht's, die Energie geht
     über. Seine Spalte ist dafür anderthalbmal so breit. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: calc(var(--u) * 2) clamp(1.25rem, 4.25cqi, 2.875rem);
  margin: 0;
}
.wf-paar {
  position: relative;
  display: grid;
  align-items: end;
  padding-bottom: calc(var(--u) * 2.25);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.wf-paar-en, .wf-paar-de {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--display);
  font-size: var(--wf-h-gr);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-deep);
  transition: transform 560ms var(--ease), opacity 560ms var(--ease);
}
.wf-paar-de { font-weight: 300; }
.wf-paar-gross .wf-paar-en { font-size: calc(var(--wf-h-gr) * 1.5); }
.wf-paar-en { opacity: 0; transform: translateY(0.4em); }
.wf-paar.is-marke .wf-paar-de { opacity: 0; transform: translateY(-0.4em); }
.wf-paar.is-marke .wf-paar-en { opacity: 1; transform: none; }
.wf-paar::before, .wf-paar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}
.wf-paar::before { background: var(--line-on-deep); }
.wf-paar::after {
  background: var(--brand-on-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease);
}
.wf-paar.is-marke::after { transform: scaleX(1); }
/* Entladen geht schneller als Laden — und von rechts nach links. */
.wf-haltung.is-entladen .wf-paar::after { transform-origin: right center; transition-duration: 520ms; }

@media (max-width: 599px) {
  .wf-paare { --wf-h-gr: 2.25rem; grid-template-columns: minmax(0, 1fr); }
}
/* Ohne Skript und bei reduzierter Bewegung kein Wechsel: der Wert groß,
   der Name klein darunter, der Strich ruhig. */
.no-js .wf-paar .wf-paar-en { grid-area: 2 / 1; opacity: 1; transform: none; margin-top: calc(var(--u) * 1); font-size: var(--t-4); text-transform: none; letter-spacing: 0; color: var(--on-deep-2); }
@media (prefers-reduced-motion: reduce) {
  .wf-paar .wf-paar-en { grid-area: 2 / 1; opacity: 1; transform: none; margin-top: calc(var(--u) * 1); font-size: var(--t-4); text-transform: none; letter-spacing: 0; color: var(--on-deep-2); }
  .wf-paar.is-marke .wf-paar-de { opacity: 1; transform: none; }
  .wf-paar-en, .wf-paar-de, .wf-paar::after { transition: none; }
}

/* -- 3  Was wir entwickeln ----------------------------------------------- */

/* Vier Felder, eines groß. Utility trägt das Geschäft; eine Startseite, die
   das verschweigt, hat sich nicht entschieden. Die drei übrigen stehen als
   Zeilen darunter — dieselbe Sprache wie die Register der Projektübersicht,
   nicht drei kleinere Kacheln. */
.flds {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--gap) calc(var(--gap) * 2);
  align-items: start;
  margin-top: calc(var(--u) * 5);
}
.fld-big h3 {
  font-size: var(--t-3);
  margin-bottom: calc(var(--u) * 2);
}
.fld-big .fig { margin: 0 0 calc(var(--u) * 3); }
.fld-big p { font-size: var(--t-6); }
.fld-facts {
  margin: calc(var(--u) * 2.5) 0;
  border-top: 1px solid var(--line-strong);
}
/* Begriff und Wert in zwei festen Spalten. Vorher stand der Wert rechtsbündig
   in derselben Zeile und rutschte darunter, sobald er nicht mehr passte —
   auf dem Telefon mal links, mal rechts, je nach Länge. */
.fld-facts > div {
  display: grid;
  grid-template-columns: minmax(6.5em, 30%) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--gap);
  padding: calc(var(--u) * 1.5) 0;
  border-bottom: 1px solid var(--line);
}
.fld-facts dt { font-size: var(--t-7); color: var(--text-2); }
.fld-facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-7);
}
.fld-rows { display: grid; }
.fld-row {
  display: grid;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 3) 0;
  border-top: 1px solid var(--line);
}
.fld-row:first-child { border-top: 1px solid var(--line-strong); }
.fld-row:last-child { border-bottom: 1px solid var(--line); }
.fld-row h3 { font-size: var(--t-5); margin: 0; }
.fld-row p { font-size: var(--t-7); margin-bottom: calc(var(--u) * 1.5); }
.sec-fields .note { margin-top: calc(var(--u) * 4); }

@media (max-width: 900px) {
  .flds { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 5); }
}

/* -- 4  Das Projekt ------------------------------------------------------ */

/* Der Beweisblock. Eine Website, die von Gigawatt spricht und nichts zeigt,
   was sie gebaut hat, liest sich wie ein Prospekt. Das Bild ist deshalb groß
   und es ist das einzige echte der Seite. */
.prf {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--gap) calc(var(--gap) * 2);
  align-items: start;
  margin-top: calc(var(--u) * 5);
}
.prf-media .fig { margin: 0; }

/* Insights auf der Startseite: Text links, Bild rechts — spiegelbildlich
   zum Projektblock darüber, damit zwei Bildblöcke nicht gleich aussehen.
   Das Foto steht im Hochformat und gerahmt, wie im Newsroom. */
/* Was wir aus der Praxis wissen: drei Beiträge in einer Reihe, jeder mit
   quadratischem Bild — die Hochformate der Beiträge werden mittig beschnitten.
   Unter 800 px steht das Bild links neben dem Text, die Reihe wird zur Liste. */
.bt-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--gap) * 1.5) var(--gap);
}
.bt-karte { display: flex; flex-direction: column; }
.bt-karte-bild { display: block; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: calc(var(--u) * 2.5); }
.bt-karte-bild img, .bt-karte-bild svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-meta {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5);
  margin: 0 0 calc(var(--u) * 1.5);
  font-family: var(--display); font-size: var(--t-7); color: var(--text-2);
}
.bt-karte h3 { font-size: var(--t-5); margin: 0 0 calc(var(--u) * 1.5); }
.bt-karte h3 a { text-decoration: none; }
.bt-karte h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bt-anriss { font-size: var(--t-7); color: var(--text-2); margin: 0 0 calc(var(--u) * 2); }
.bt-karte .textlink { margin-top: auto; align-self: flex-start; }
.bt-fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: calc(var(--u) * 2) calc(var(--u) * 4);
  margin-top: calc(var(--u) * 5); padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--line);
}
.bt-plan { margin: 0; font-size: var(--t-7); line-height: 1.5; color: var(--text-2); max-width: 60ch; }
.bt-plan-l { font-family: var(--display); font-weight: 500; }
.bt-links { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 4); margin: 0; }
@media (max-width: 799px) {
  .bt-reihe { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 4); }
  .bt-karte { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 calc(var(--u) * 2.5); align-content: start; }
  .bt-karte-bild { grid-row: 1 / span 4; margin: 0; }
  .bt-karte .textlink { margin-top: 0; }
}
@media (max-width: 900px) {
  .bt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bild" "lead" "mehr" "links"; }
  .bt-bild { justify-self: start; max-width: 300px; }
  .bt-mehr { grid-template-columns: minmax(0, 1fr); }
}

/* Bilder im Beitrag. Das Hochformat steht links unter den Angaben und
   bleibt beim Lesen stehen; das Querformat unterbricht den Text dort, wo
   er von dem erzählt, was es zeigt. */
/* Die linke Spalte selbst klebt, nicht ihr Inhalt: Nur sie ist so hoch wie
   der Text daneben. Und nur, wo Angaben und Foto zusammen in den Bildschirm
   passen — sonst wäre das untere Ende des Fotos erst am Schluss zu sehen. */
@media (min-width: 901px) and (min-height: 860px) {
  .sec-article .split-head { position: sticky; top: 104px; }
  .has-toc .sec-article .split-head { position: static; }
}
.article-bild { margin: calc(var(--u) * 4) 0 0; }
.article-bild img { aspect-ratio: 3 / 4; object-fit: cover; }
.article-fig { margin: calc(var(--u) * 5) 0; }
.article-fig img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Hochformate im Text: kleiner und ganz, nicht auf Spaltenbreite gezogen. */
.article-fig-hoch { max-width: 360px; }
.article-fig-hoch img { aspect-ratio: 3 / 4; }
.article-bild figcaption, .article-fig figcaption { margin-top: calc(var(--u) * 1.5); }
/* Auf schmalen Bildschirmen steht die linke Spalte über dem Text: Das Foto
   bleibt ganz, nur kleiner, damit der erste Absatz nicht zu tief rutscht. */
@media (max-width: 900px) {
  .article-bild { max-width: 300px; }
}
.prf-body h3 { font-size: var(--t-3); margin-bottom: calc(var(--u) * 2); }
.prf-body p { font-size: var(--t-6); }
.prf-figs {
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 3);
  border-top: 1px solid var(--line-strong);
}
.prf-fig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--gap);
  padding: calc(var(--u) * 1.75) 0;
  border-bottom: 1px solid var(--line);
}
.prf-fig dt { flex: 1 1 auto; font-size: var(--t-7); color: var(--text-2); }
.prf-fig dd {
  margin: 0 0 0 auto;
  font-family: var(--display);
  font-size: var(--t-5);
}
.prf-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1) calc(var(--u) * 2);
  margin: 0 0 calc(var(--u) * 3);
}
.prf-stage-l, .prf-stage-n {
  font-family: var(--display);
  font-size: var(--t-7);
}
.prf-stage-l { color: var(--text-2); }

@media (max-width: 900px) {
  .prf { grid-template-columns: minmax(0, 1fr); }
}

/* -- 5  Die Preiskurve als Band ------------------------------------------ */

/* Ein Drittel Bildschirmhöhe, nicht anfassbar, kein Skript. Der Auftakt zum
   Anfassen steht auf der Utility-Seite; hier reicht die Form des Tages. */
.sec-band > .wrap { padding-bottom: calc(var(--u) * 3); }
.bd { max-width: 46em; }
.bd-line { margin: 0; max-width: none; font-size: var(--t-5); line-height: 1.45; }
.bd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 1) calc(var(--u) * 3);
  margin: calc(var(--u) * 2) 0 0;
  max-width: none;
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--on-deep-2);
}
.bd-key { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); }
.bd-key::before { content: ""; width: 10px; height: 10px; flex: none; }
.bd-key-charge::before { background: var(--charge-on-deep); }
.bd-key-discharge::before { background: var(--value-on-deep); }
.bd-date { color: var(--on-deep); }
.sec-band .kpis { margin-top: calc(var(--u) * 3); }
/* Das Band zeichnet mit denselben Klassen wie der große Auftakt. Die
   Klassen holen ihre Stärken und Deckkräfte aus lokalen Variablen — ohne
   sie fällt jede Fläche auf ihren Anfangswert zurück, und das ist Schwarz.
   Deshalb setzt das Band sie selbst, so wie es der Auftakt und der Rechner
   auch tun. Der Grund ist hier dunkel, also gelten die Ausprägungen für
   Kapitelflächen. */
.bd-graph {
  height: clamp(150px, 25vh, 280px);
  margin-top: calc(var(--u) * 3);
  --dc-base: 0.10;
  --dc-win: 0.14;
  --dc-line: calc(2.5px + var(--value-fill) * 9px);
}
[data-daytime="einspeisung"] .bd-graph { --dc-win: 0.17; }
[data-daytime="nacht"] .bd-graph { --dc-win: 0.24; }
.bd-plot { display: block; width: 100%; height: 100%; }

/* -- 7  Für wen wir arbeiten --------------------------------------------- */

/* Drei Türen. Jede spricht ihre eigene Sprache — und zwar nicht nur mit
   anderen Wörtern, sondern mit einem anderen Bau: Register, Häkchenliste,
   eine große Zahl. Dreimal derselbe Kasten mit anderem Text wäre dreimal
   dieselbe Tür. */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  margin-top: calc(var(--u) * 5);
  border-top: 1px solid var(--line-strong);
}
.door {
  padding: calc(var(--u) * 4) var(--gap) calc(var(--u) * 4) 0;
  border-right: 1px solid var(--line);
}
.door:last-child { border-right: 0; }
/* Auf der dunklen Band-Fläche werden die Türen Glas: halbdurchsichtig,
   leicht unscharf, mit feiner heller Kante — eine Kartenreihe, nicht mehr.
   Ohne backdrop-filter und bei prefers-reduced-transparency eine deckende
   Fläche in der zweiten Kapitelfarbe. */
.sec-doors.tone-deep { position: relative; isolation: isolate; overflow: hidden; }
.sec-doors.tone-deep > .wrap { position: relative; }
.sec-doors .band-motiv-leise .band-motiv-sym { opacity: 0.55; height: 150%; bottom: -46%; right: -8%; }
.tone-deep .doors { gap: var(--gap); border-top: 0; }
.tone-deep .door {
  padding: calc(var(--u) * 4);
  border: 1px solid color-mix(in srgb, var(--bp-white) 16%, transparent);
  background: var(--deep-2);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .tone-deep .door {
    background: color-mix(in srgb, var(--bp-white) 7%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bp-white) 22%, transparent);
  }
  @media (prefers-reduced-transparency: reduce) {
    .tone-deep .door { background: var(--deep-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  }
}
.tone-deep .door-reg > div { border-top-color: var(--line-on-deep); }
.tone-deep .door-reg dt, .tone-deep .door-unit, .tone-deep .door-numlabel { color: var(--on-deep-2); }
.tone-deep .door .door-num { color: var(--brand-on-deep); }
.door h3 { font-size: var(--t-4); margin-bottom: calc(var(--u) * 2); max-width: 14em; }
.door p { font-size: var(--t-7); }
.door .textlink { margin-top: calc(var(--u) * 2); }

.door-reg { margin: calc(var(--u) * 3) 0; }
.door-reg > div {
  display: grid;
  gap: 2px;
  padding: calc(var(--u) * 1.5) 0;
  border-top: 1px solid var(--line);
}
.door-reg dt {
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
}
.door-reg dd { margin: 0; font-size: var(--t-7); }

.door-checks { margin: calc(var(--u) * 3) 0; }
.door-checks li { font-size: var(--t-7); }

/* Die Klasse steht am Absatz, und .door p ist spezifischer als .door-num —
   ohne den zweiten Selektor bliebe die große Zahl auf Fußnotengröße und die
   Einheit daneben wäre größer als sie. */
.door .door-num {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1);
  margin: calc(var(--u) * 2) 0 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.door-unit { font-size: var(--t-4); font-weight: 500; color: var(--text-2); }
.door-numlabel {
  margin: calc(var(--u) * 1) 0 calc(var(--u) * 2);
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
}

@media (max-width: 800px) {
  .door { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .door:last-child { border-bottom: 0; }
}

/* -- 8  Was gerade gilt -------------------------------------------------- */

.dg {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--gap) calc(var(--gap) * 2);
  align-items: start;
}
.dg-head h2 { font-size: var(--t-4); }
.dg-intro { font-size: var(--t-7); color: var(--text-2); margin-bottom: calc(var(--u) * 2); }
.dg-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.dg-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 0.5) var(--gap);
  padding: calc(var(--u) * 2.5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.dg-link:hover .dg-name { text-decoration: underline; text-underline-offset: 3px; }
.dg-name {
  font-family: var(--display);
  font-size: var(--t-6);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.dg-what { grid-column: 1; font-size: var(--t-7); color: var(--text-2); line-height: 1.5; }
.dg-when {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dg { grid-template-columns: minmax(0, 1fr); }
  .dg-when { grid-row: auto; grid-column: 1; }
}

/* -- Medienplätze -------------------------------------------------------- */

/* Der Schlüssel steht im Platzhalter. Beim Shooting ist damit ohne Rückfrage
   klar, welche Datei wohin gehört. Am fertigen Bild ist er nicht mehr da,
   weil dann kein Platzhalter mehr da ist. */
.ph-key {
  position: absolute;
  right: calc(var(--u) * 3);
  top: calc(var(--u) * 3 + 1.5em);
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--line-strong);
  text-align: right;
}
.ph-cover { position: absolute; inset: 0; }
/* Verhältnis und Schlüssel stehen in der oberen rechten Ecke. Im Auftakt
   beginnt der Text oben — dort braucht er Platz daneben. Auf dem Telefon ist
   keiner: Dann entfällt der Schlüssel, das Verhältnis bleibt. */
.vh-still .ph-kind, .vh-still .ph-desc { padding-right: 11em; }
@media (max-width: 700px) {
  .ph-key { display: none; }
  .vh-still .ph-kind, .vh-still .ph-desc { padding-right: 5em; }
}

/* -- Variante A: alles untereinander ------------------------------------- */

/* Klare Abschnitte, gleiche Abstände, nichts bricht aus. Sie funktioniert —
   und sie liest sich wie ein Inhaltsverzeichnis: Neun Abschnitte in neun
   gleichen Abständen sagen, dass es neun Unterseiten gibt, und verschweigen,
   welche das Geschäft trägt. Deshalb nicht die Empfehlung. */
[data-start="a"] .page-home .sec-band,
[data-start="a"] .page-home .sec-stages,
[data-start="a"] .page-home .sec-digest { padding-block: var(--sec); }
[data-start="a"] .flds { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
[data-start="a"] .fld-big .fig { display: none; }
[data-start="a"] .fld-big h3 { font-size: var(--t-5); }
[data-start="a"] .fld-rows { display: contents; }
[data-start="a"] .fld-row:first-child { border-top: 1px solid var(--line); }
[data-start="a"] .prf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
[data-start="a"] .bd-graph { height: clamp(150px, 26vh, 300px); }

/* -- Variante B: der Rhythmus trägt ------------------------------------- */

/* Die großen Blöcke brechen aus dem Satzspiegel aus, die Bänder sind eng.
   Zwischen weit und eng entsteht der Takt, der eine Startseite lesbar macht,
   ohne dass jemand die Gewichtung erklären muss. */
@media (min-width: 1100px) {
  [data-start="b"] .sec-fields > .wrap,
  [data-start="b"] .sec-proof > .wrap,
  [data-start="b"] .sec-doors > .wrap { max-width: 1480px; }
  /* Das Projektbild läuft bis an den Rand: Es ist der Beweis und darf den
     meisten Platz der Seite haben. */
  [data-start="b"] .prf { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  [data-start="b"] .prf-media { margin-left: calc((100vw - min(1480px, 100vw)) / -2); }
  [data-start="b"] .sec-band > .wrap,
  [data-start="b"] .sec-digest > .wrap { max-width: 1100px; }
}

/* -- Variante C: die Seite als Tagesverlauf ------------------------------ */

/* Der Scrollweg wird zum Tag: oben Ladephase, unten Einspeisung. Was das mit
   dem echten Tageszeit-System anstellt, steht in docs/STARTSEITE.md — kurz:
   Es kollidiert, und zwar an drei Stellen, die sich nicht wegprogrammieren
   lassen. Deshalb ist C nicht die Voreinstellung.

   Der Zustandswechsel blendet hier nicht über. Der Übergang ist für einen
   Wechsel je Stunde gemacht, nicht für einen je Bildschirmhöhe. */
[data-start="c"].daytime-ready body,
[data-start="c"].daytime-ready .hdr,
[data-start="c"].daytime-ready .ftr,
[data-start="c"].daytime-ready .sec,
[data-start="c"].daytime-ready .vh,
[data-start="c"].daytime-ready .hero { transition: none; }

/* == 23  Druck ============================================================ */

@media print {
  .hdr, .mnav, .toc, .panel, .pop, .scrim, .sec-action, .filters, .ticker { display: none !important; }
  body { background: var(--bp-white); color: var(--bp-ink); font-size: 11pt; }
  /* Der Auftakt zeichnet mit den Farben der Tageszeit. Auf Papier gibt es
     keine Tageszeit: seine Rollen werden hier einmal neutral gesetzt, dann
     stimmen Kurve, Flächen und Beschriftung von selbst. */
  .hero-day {
    background: var(--bp-white);
    color: var(--bp-ink);
    overflow: visible;
    --hero-bg: var(--bp-white);
    --hero-on: var(--bp-ink);
    --hero-on-2: var(--bp-ink);
    --hero-line: var(--bp-grey);
    --hero-value: var(--value);
    --hero-charge: var(--charge);
    --negative-strong: var(--negative);
    --charge-fill: 0.30;
    --value-fill: 0.16;
  }
  .dc-band { display: block; min-height: 0; }
  .dc-graph { position: relative; height: 300pt; margin: 0 0 12pt; }
  .dc-text { position: static; width: auto; margin: 0 0 12pt; }
  .dc-front, .dc-day { display: none; }
  /* Der Rand in der Grundfarbe hätte auf Papier keinen Grund mehr. */
  .hero-day h1 { -webkit-text-stroke: 0; }
  .hero-day h1, .hero-day .lead { color: var(--bp-ink); }
  .tone-deep { background: var(--bp-white) !important; color: var(--bp-ink) !important; }
  .tone-deep h2, .tone-deep .intro, .tone-deep .note { color: var(--bp-ink) !important; }
  .hero-page::after, .sec-wirkungsfelder::after, .sec-statement::after,
  .schnell-kaffee::after { display: none !important; }
  .schnell-kaffee { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  .sec { padding-block: 18pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--bp-grey); }
  .sources li { break-inside: avoid; }
}