/* ===========================================================================
   ROUTE A — „LASTGANG"
   Signature: eine fallende Verbrauchskurve als Rueckgrat der Seite.
   Die Seite ist als Messprotokoll gesetzt: linke Achse = Verbrauchsindex,
   Sektionen = Messstellen, Kennzahlen = Messpunkte auf der Kurve.
   =========================================================================== */

/* --- 1) TOKEN-SCHICHT — 1:1 aus elementor/tokens.css ---------------------- */
:root {
  --dgfe-blue-50:#eef4fb; --dgfe-blue-100:#d4e2f3; --dgfe-blue-200:#a9c4e6;
  --dgfe-blue-300:#7ea7d9; --dgfe-blue-400:#4285c1; --dgfe-blue-500:#0c4da2;
  --dgfe-blue-600:#0a3f85; --dgfe-blue-700:#073166; --dgfe-blue-800:#052448;
  --dgfe-blue-900:#031629;

  --dgfe-navy-50:#eaecf2; --dgfe-navy-100:#c8cdde; --dgfe-navy-200:#9099b9;
  --dgfe-navy-300:#586795; --dgfe-navy-400:#37406e; --dgfe-navy-500:#1c244b;
  --dgfe-navy-600:#161d3c; --dgfe-navy-700:#10162d; --dgfe-navy-800:#0a0e1e;
  --dgfe-navy-900:#04060f;

  /* !!! yellow-500 NIE als Text auf Weiss (1,33:1). Gelber Text = yellow-800. */
  --dgfe-yellow-50:#fffbe6; --dgfe-yellow-100:#fff5bd; --dgfe-yellow-200:#ffeb84;
  --dgfe-yellow-300:#ffe24a; --dgfe-yellow-400:#ffe05a; --dgfe-yellow-500:#ffde59;
  --dgfe-yellow-600:#d9b837; --dgfe-yellow-700:#a88a25; /* real 3,32:1 — nicht fuer Text */
  --dgfe-yellow-800:#7a6418; /* 5,73:1 — gelber Text auf Weiss */
  --dgfe-yellow-900:#4d3f0d;

  --dgfe-neutral-50:#f7f7f8; --dgfe-neutral-100:#e9eaeb; --dgfe-neutral-200:#d0d1d3;
  --dgfe-neutral-300:#abacaf; --dgfe-neutral-400:#808285; --dgfe-neutral-500:#6b6c6f;
  --dgfe-neutral-600:#595a5d; --dgfe-neutral-700:#3f4042; --dgfe-neutral-800:#28292b;
  --dgfe-neutral-900:#131415;

  --dgfe-color-heading: var(--dgfe-navy-500);
  --dgfe-color-link:    var(--dgfe-blue-500);
  --dgfe-color-error:#8a1c1c; --dgfe-color-error-bg:#fef4f4;
  --dgfe-color-success:#1c5b34; --dgfe-color-success-bg:#f0f7f3;
  --dgfe-color-focus-ring: var(--dgfe-yellow-500);

  --dgfe-space-xs:.25rem; --dgfe-space-sm:.5rem;  --dgfe-space-md:1rem;
  --dgfe-space-lg:1.5rem; --dgfe-space-xl:2rem;   --dgfe-space-2xl:3rem;
  --dgfe-space-3xl:4rem;

  --dgfe-radius-sm:4px; --dgfe-radius-md:6px; --dgfe-radius-lg:12px;
  --dgfe-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --dgfe-shadow-md:0 4px 12px rgba(28,36,75,.15);
  --dgfe-shadow-lg:0 10px 28px rgba(28,36,75,.22);
  --dgfe-tap-target-mobile:44px;
  --dgfe-cta-z:9990; --dgfe-skip-z:10000;

  /* ==========================================================================
     TYPO-SKALA — eine Leiter, zehn Stufen.
     --------------------------------------------------------------------------
     Verhaeltnis √2, das DIN-476-Papierverhaeltnis, abgetastet an Halbschritten
     (2^(1/4) = 1,1892). Damit ist jede zweite Stufe exakt √2 auseinander und
     jede vierte Stufe exakt das Doppelte:  12 · 24 · 48 · 96.
     Anker ist 12px — genau die Untergrenze. Keine Stufe faellt je darunter,
     auf keiner Breite.

       Stufe   1440px   390px   320px   Rolle
       fs-1     12,0     12,0    12,0   Mikro-Reserve: der Anker der Leiter und die
                                        harte Untergrenze. Zurzeit unbenutzt.
       fs-2     14,3     14,3    14,3   Beischrift: Eyebrow, Register, Bildunterschrift,
                                        Feldkennung, Knopf, Navigation, Fusszeile
       fs-3     17,0     17,0    17,0   Fliesstext, Kartentext, Tabelle, Liste
       fs-4     20,2     20,2    20,2   Vorspann / Lead
       fs-5     24,0     21,0    20,8   H4 / Kartentitel
       fs-6     28,5     22,2    21,8   H3
       fs-7     33,9     23,7    23,0   H2 klein / Sektionstitel
       fs-8     40,3     25,4    24,4   H2
       fs-9     48,0     27,0    25,6   H1 / Kennzahl
       fs-10    67,9     30,0    27,5   Display / Hero-Zeile

     Stufe 10 laesst den Halbschritt (57,1) bewusst aus und nimmt den vollen
     √2-Sprung ab H1. Auf Displaygroesse ist ein Halbschritt ueber eine Seite
     hinweg nicht mehr unterscheidbar — dort trennt erst der ganze Schritt.

     Die Stufen 1-4 stehen fest: der Textbereich schrumpft auf dem Telefon
     nicht, dort braucht er eher mehr. Erst ab Stufe 5, wo die Schrift zur
     Ueberschrift wird, laeuft die Leiter ein. Vorher war auch Stufe 4 fluid —
     dann lag der Vorspann bei 390px auf 17,2px und damit auf demselben Grad
     wie der Fliesstext darunter: eine Stufe, die nichts mehr unterscheidet.

     Warum die Beischrift auf Stufe 2 sitzt und nicht auf Stufe 1: sie laeuft
     fast durchweg als gesperrte Schmalversalie (.cond, wdth 70, +.15em).
     Versalien wirken bei gleicher Punktgroesse kleiner, gesperrte lesen sich
     zusaetzlich langsamer. 14,3px gesperrte Schmalversalien entsprechen etwa
     11,5px normalem Text — die Untergrenze ist damit real eingehalten, nicht
     nur rechnerisch.

     Warum der Anzeigebereich zum Telefon hin so stark einlaeuft: die
     Hero-Zeilen sind im Markup von Hand in Zeilen zerlegt (.lm > i, fuer die
     Zeilenmaske), jede Zeile muss also einzeilig bleiben — sie darf nicht
     umbrechen. Die laengste davon, „für Ihren Energieeinkauf.", passt bei
     390px nur bis 32,8px, bei 360px nur bis 30,0px. Und .dsp trennt zwar
     deutsche Komposita (hyphenate-limit-chars: 13 7 6), aber „FÖRDERUNG" hat
     neun Buchstaben und faellt unter diese Grenze — es kann gar nicht brechen.
     Der Anzeigegrad am unteren Ende ist damit nicht frei waehlbar, sondern
     vom Inhalt bestimmt. Die Rampe laeuft deshalb von 320px bis 1440px und
     wird nicht schon bei 390px angehalten.
     ========================================================================== */
  --fs-1:  0.75rem;
  --fs-2:  0.8938rem;
  --fs-3:  1.0625rem;
  --fs-4:  1.2625rem;
  --fs-5:  clamp(1.3rem,    1.2429rem + 0.2857vw, 1.5rem);
  --fs-6:  clamp(1.3625rem, 1.2429rem + 0.5982vw, 1.7813rem);
  --fs-7:  clamp(1.4375rem, 1.2429rem + 0.9732vw, 2.1188rem);
  --fs-8:  clamp(1.525rem,  1.2411rem + 1.4196vw, 2.5188rem);
  --fs-9:  clamp(1.6rem,    1.2rem    + 2.0vw,    3rem);
  --fs-10: clamp(1.7188rem, 0.9973rem + 3.6071vw, 4.2438rem);
}

/* --- 2) SEITEN-SCHICHT ---------------------------------------------------- */
:root {
  /* Grundflaechen. Drei Boeden, mehr nicht: Papier, getoentes Papier, Navy.
     Gelb ist auf dieser Seite NIE Vollbreitband, sondern Kurve, Kante,
     Knopf — und genau eine Platte. */
  --paper:    #ffffff;
  --paper-2:  color-mix(in srgb, var(--dgfe-navy-50) 62%, white);

  /* Text auf Papier ist navy-getoent statt neutralgrau: navy-400 = 9,9:1 (AAA),
     navy-300 = 5,54:1 (AA, nur Randnotizen/Bildunterschriften). */
  --ink:        var(--dgfe-navy-400);
  --ink-strong: var(--dgfe-navy-500);
  --ink-quiet:  var(--dgfe-navy-300);
  --ink-accent: var(--dgfe-yellow-800);

  --ink-n:        #ffffff;
  --ink-n-muted:  color-mix(in srgb, white 80%, var(--dgfe-navy-500));
  --ink-n-quiet:  color-mix(in srgb, white 60%, var(--dgfe-navy-500));

  --rule:    color-mix(in srgb, var(--dgfe-navy-500) 16%, transparent);
  --rule-2:  color-mix(in srgb, var(--dgfe-navy-500) 30%, transparent);
  --rule-n:  color-mix(in srgb, var(--dgfe-yellow-500) 24%, transparent);
  --rule-n2: color-mix(in srgb, var(--dgfe-yellow-500) 45%, transparent);

  /* Raster */
  --page:  1560px;
  /* Untergrenze 20 px, nicht 16: bei 390 px stand der Satz sonst zu dicht an
     der Blattkante. 20 px ist auch der Mobilwert aus dem Design-System. */
  --gut:   clamp(20px, 3.2vw, 52px);
  --axis:  clamp(46px, 6vw, 104px);
  /* Luft zwischen einer senkrechten Linie und dem Satz daneben.
     Die Achsen-Haarlinie hatte nach innen, zu ihren eigenen Indexzahlen,
     9-16 px — nach aussen aber 0: der Satzspiegel begann exakt auf ihr.
     Damit liest sie als Textrahmen statt als Achse. 24 px am Desktop,
     16 px mobil; beide aus der Abstandsskala des Design-Systems
     (--dgfe-space-lg / --dgfe-space-md), kein frei gegriffener Wert. */
  --rulegap: var(--dgfe-space-lg);
  --colgap: clamp(14px, 1.6vw, 26px);
  --header-h: 68px;
  --header-h-sm: 54px;
  /* Der Anschnitt ist genau der Rand zwischen Satzspiegel und Fensterkante —
     nicht geraten. `--gut + 9vw` schob angeschnittene Bilder bei 1440 px
     130 px hinter die Kante: dort wurden sie stumm abgeschnitten, aus einem
     4:5-Kasten wurde optisch 2:3, und eine Vollbildaufnahme mass 1570 statt
     1440 px. `max()` faengt die Breiten ab, in denen der Satzspiegel schon
     an der Kante steht. */
  --bleed: max(var(--gut), (100vw - var(--page)) / 2);

  /* Vertikaler Rhythmus — drei Stufen */
  --secY:    clamp(50px, 5.6vw, 86px);
  --secY-lg: clamp(64px, 7.2vw, 108px);
  --secY-sm: clamp(30px, 3.2vw, 46px);

  /* Beschleunigung. Drei Kurven mit drei Aufgaben, kein `ease`.
     Die vierte, `--e-point: cubic-bezier(.32,1.44,.52,1)`, ist am 2026-08-06
     entfallen: 44 % Ueberschwinger sind ein Gummiband, und auf einer Seite
     ueber Messwerte ist das das falsche Register. Die Bewegungsschicht
     bringt dafuer `--b-zeiger` mit 6 % mit. */
  --e-draw:  cubic-bezier(.19,.72,.14,1);    /* Schreiber: schnell an, langes Auslaufen */
  --e-rise:  cubic-bezier(.16,1,.3,1);       /* Zeilen, Flaechen: satter Eintritt */
  --e-shut:  cubic-bezier(.58,.02,.28,1);    /* Zustandswechsel an Bedienelementen */
  --t-draw: 1100ms; --t-rise: 720ms; --t-shut: 860ms;
  --t-ui: 200ms;

  --ff-dsp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-txt: "Poppins", "Segoe UI", system-ui, sans-serif;
}

/* --- 3) Reset / Basis ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  font-family: var(--ff-txt);
  font-size: var(--fs-3); font-weight: 300; line-height: 1.62;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4 { margin: 0; color: var(--dgfe-color-heading); font-weight: 600; }
a { color: var(--dgfe-color-link); text-underline-offset: 3px; }
strong,b { font-weight: 500; color: var(--ink-strong); }

:focus-visible {
  outline: 2px solid var(--dgfe-color-focus-ring);
  outline-offset: 2px; border-radius: 2px;
}
.skip {
  position: absolute; left: var(--gut); top: 8px; z-index: var(--dgfe-skip-z);
  transform: translateY(-220%);
  background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500);
  font: 600 var(--fs-2)/1 var(--ff-txt); text-decoration: none;
  padding: 14px 20px; border-radius: 3px;
}
.skip:focus { transform: translateY(0); }
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 4) Typografie -------------------------------------------------------
   Zwei Rollen, aber EINE Display-Familie an zwei Breiten:
   Archivo breit (wdth 112-118) = Werksbeschilderung, Typenschild, Messwert.
   Archivo schmal (wdth 66-74)  = Legende, Achsenbeschriftung, Randnotiz.
   Poppins bleibt Fliesstext und Bedienelement.
   ------------------------------------------------------------------------ */
.dsp {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 116, "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.018em;
  text-wrap: balance;
  /* Deutsche Komposita sind laenger als die Spalte: „WIRTSCHAFTSAUFTRAG" lief
     bei 390 px 13 px, bei 320 px 83 px aus der Spalte. Die Trennung greift
     nur, wenn ein Wort sonst nicht passt — der Schriftgrad bleibt.
     Die Grenze ist Pflicht: ohne sie nimmt `text-wrap: balance` jede
     Trennstelle als willkommene Umbruchchance und zerlegte „ENERGIEKOSTEN"
     im Hero zu „ENERGIEKOS-TEN" — mitten im Wortstamm. Mindestens 7 Zeichen
     davor und 6 danach laesst genau die Fugen stehen, an denen ein deutsches
     Kompositum auch wirklich getrennt wird: „ENERGIE-KOSTEN",
     „WIRTSCHAFTS-AUFTRAG", „ENERGIE-EFFIZIENZ". Alles Kuerzere faellt weg. */
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 13 7 6;
  color: var(--ink-strong);
}
/* Untergrenzen so gesetzt, dass das laengste Wort ("ENERGIEKOSTEN",
   "WIRTSCHAFTSAUFTRAG") bei 390 px noch in die Inhaltsspalte passt. */
.h1 { font-size: var(--fs-10); letter-spacing: -.026em; }
.h2 { font-size: var(--fs-9); letter-spacing: -.022em; }
.h3 {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 108, "wght" 650;
  font-weight: 600; text-transform: uppercase;
  font-size: var(--fs-4);
  line-height: 1.16; letter-spacing: .002em; color: var(--ink-strong);
  text-wrap: balance; overflow-wrap: break-word;
}
.cond {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 70, "wght" 600;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: .15em; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.num {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-weight: 700; line-height: .88; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.num .u   { font-size: var(--fs-4); font-weight: 500; font-variation-settings: "wdth" 88, "wght" 500; letter-spacing: 0; margin-left: .1em; }
.num .pfx { font-size: var(--fs-4);  font-weight: 500; font-variation-settings: "wdth" 88, "wght" 500; margin-right: .03em; }

.eyebrow { display: block; font-size: var(--fs-2); color: var(--ink-accent); }
.on-navy .eyebrow { color: var(--dgfe-yellow-500); }

.lead { font-size: var(--fs-4); line-height: 1.58; font-weight: 300; }
/* Fliesstext steckt hier oft in `span`s (Messwertzeilen, Wegeliste,
   Bildunterschriften). Die Regel auf `p` erreicht die nicht. */
.way__d, .rdo__t, .anno__t, .anno__n, .trust__big, .plot__ph span,
.slotnote, .fnote, .fnote2, .wznote, .cap, .lgn__n { text-wrap: pretty; }
.measure    { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.measure-xs { max-width: 34ch; }
.cap {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 74, "wght" 500;
  font-size: var(--fs-2); line-height: 1.45; letter-spacing: .04em;
  color: var(--ink-quiet); margin-top: 10px;
}
.on-navy .cap { color: var(--ink-n-quiet); }

/* Abstaende sind asymmetrisch: ueber einer Ueberschrift mehr als darunter. */
/* Steht die Ueberschrift allein in ihrer Rasterzelle, addiert sich ihre
   Unterkante zum Zeilenabstand des Rasters — zweimal Abstand fuer einen. */
.hd { margin-bottom: clamp(14px, 1.5vw, 22px); }
.hd:last-child { margin-bottom: 0; }
.hd + .lead, .hd + p { margin-top: clamp(16px, 1.8vw, 26px); }
.eyebrow + .dsp { margin-top: clamp(14px, 1.4vw, 20px); }
.stack > * + * { margin-top: var(--dgfe-space-lg); }
.stack > * + .dsp { margin-top: clamp(36px, 4vw, 60px); }

.on-navy { color: var(--ink-n-muted); }
.on-navy .dsp, .on-navy .h3 { color: var(--ink-n); }
.on-navy strong { color: var(--ink-n); font-weight: 400; }
/* :not(.btn) ist Pflicht: `.on-navy a` (0,1,1) wuerde sonst `.btn--primary`
   (0,1,0) schlagen und die Beschriftung gelb auf Gelb setzen. */
.on-navy a:not(.btn) { color: var(--dgfe-yellow-500); }

/* --- 5) Raster: linke Messachse + 12 Spalten -----------------------------
   Die linke Achsenspalte ist unantastbar und laeuft ueber die ganze Seite
   durch — sie ist das Rueckgrat. Nach rechts ist das Raster offen: Bilder und
   Kurven laufen aus der Seite heraus. Daher kommt die Asymmetrie.
   ------------------------------------------------------------------------ */
.sec { position: relative; }
.sec--paper  { background: var(--paper);   --wipe-bg: var(--paper);   --rul: var(--rule); }
.sec--paper2 { background: var(--paper-2); --wipe-bg: var(--paper-2); --rul: var(--rule); }
.sec--navy   { background: var(--dgfe-navy-500); --wipe-bg: var(--dgfe-navy-500); --rul: var(--rule-n); }

.sheet {
  width: min(var(--page), 100% - 2 * var(--gut));
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--axis) minmax(0, 1fr);
}
/* Das `padding-left` ist die Luft zur Achse und gilt fuer JEDE Sektion,
   Kurvenbaender und Fusszeile eingeschlossen — sonst wandert der Satz, aber
   die Baender bleiben stehen und die Spalten fluchten nicht mehr. */
.sheet__body { min-width: 0; padding-block: var(--secY); padding-left: var(--rulegap); }
.sec--tall .sheet__body { padding-block: var(--secY-lg); }
.sec--flat .sheet__body { padding-block: 0; }

.axis {
  position: relative;
  border-right: 1px solid var(--rul);
  padding-top: var(--apad, var(--secY));
  padding-right: clamp(9px, 1vw, 16px);
  display: flex; flex-direction: column; align-items: flex-end;
}
.sec--tall { --apad: var(--secY-lg); }
.sec--flat { --apad: 0px; }
.hero { --apad: clamp(44px, 5.6vw, 92px); }
.axis__val { font-size: var(--fs-3); color: var(--ink-quiet); }
.sec--navy .axis__val { color: var(--dgfe-yellow-500); }
.axis__unit { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); margin-top: 6px; }
.sec--navy .axis__unit { color: var(--ink-n-quiet); }
.axis__name {
  margin-top: 18px; font-size: var(--fs-2); letter-spacing: .18em;
  color: var(--ink-quiet); writing-mode: vertical-rl; transform: rotate(180deg);
}
.sec--navy .axis__name { color: var(--ink-n-quiet); }
/* Teilstrich: quert die Achse dort, wo der Messwert steht */
.axis__tick {
  position: absolute; top: calc(var(--apad, var(--secY)) + .52em); right: -6px;
  width: 13px; height: 1px; background: var(--rule-2);
}
.sec--navy .axis__tick { background: var(--rule-n2); }
.sec--flat .axis__tick { display: none; }

.formgrid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
            gap: clamp(28px, 3.6vw, 64px); align-items: start; }

.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colgap); row-gap: clamp(30px, 3.6vw, 60px); }
.c1-4{grid-column:1/5}   .c1-5{grid-column:1/6}   .c1-6{grid-column:1/7}
.c1-7{grid-column:1/8}   .c1-8{grid-column:1/9}   .c1-9{grid-column:1/10}
.c1-12{grid-column:1/-1} .c2-7{grid-column:2/8}   .c3-8{grid-column:3/9}
.c3-9{grid-column:3/10}  .c5-12{grid-column:5/-1} .c6-12{grid-column:6/-1}
.c7-12{grid-column:7/-1} .c8-12{grid-column:8/-1} .c9-12{grid-column:9/-1}
.c5-9{grid-column:5/9}
/* Zeilenzuweisung MUSS als Klasse laufen, nicht inline: ein Inline-`grid-row`
   ueberlebt die Mobil-Regel und legt dann zwei Blaecke uebereinander. */
.r1{grid-row:1} .r2{grid-row:2} .r1-3{grid-row:1/3}
.bleed { margin-right: calc(-1 * var(--bleed)); }

/* --- 6) Bildgradation ----------------------------------------------------
   Ein einziger Grade ueber ALLE Fotos: Graustufe, angehobener Kontrast,
   dann Luminanz-Blend auf Navy. Ergebnis ist ein Duotone von Navy-Schwarz
   nach Navy-Weiss. Sieben Bilder aus sieben Quellen werden dadurch zu einer
   bestellten Serie. Gelb bleibt der Kurve vorbehalten.
   ------------------------------------------------------------------------ */
.ph {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dgfe-navy-500);
}
.ph img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.17) brightness(1.06);
  mix-blend-mode: luminosity;
}
.ph--3x4 { aspect-ratio: 3/4; }  .ph--4x5 { aspect-ratio: 4/5; }
.ph--4x3 { aspect-ratio: 4/3; }  .ph--16x9 { aspect-ratio: 16/9; }
.ph--3x2 { aspect-ratio: 3/2; }
.ph__shut {
  position: absolute; inset: 0; z-index: 3; background: var(--wipe-bg);
  transform: translateY(-101%); pointer-events: none;
}
figure > .cap { padding-right: var(--bleed); }

/* --- 7) Knoepfe ---------------------------------------------------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 14px 26px;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 90, "wght" 650;
  font-weight: 600; font-size: var(--fs-2); letter-spacing: .11em;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  transition: border-color var(--t-ui) var(--e-shut);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sweep, var(--dgfe-navy-500));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 360ms var(--e-draw);
}
/* Zeigen und Fokus sind zwei Dinge. Ohne `@media (hover: hover)` wendet ein
   Telefon die Zeigestile beim Antippen an und laesst sie haengen, bis man
   woanders hintippt — der angetippte Knopf bleibt eingefaerbt stehen.
   Der Fokusteil bleibt deshalb ausserhalb der Klammer, der Hover-Teil darin. */
.btn:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .btn:hover::before { transform: scaleX(1); } }
.btn__a { transition: transform 280ms var(--e-draw); }
.btn:focus-visible .btn__a { transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__a { transform: translateX(6px); } }
/* Jede Sweep-Farbe ist so gewaehlt, dass die Beschriftung auf Ausgangs- UND
   Zielflaeche lesbar bleibt — sonst steht das Label waehrend des Einlaufens
   ein paar Frames auf der falschen Farbe. */
.btn--primary { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500);
                border-color: var(--dgfe-yellow-500); --sweep: #fff; }        /* 8,6:1 → 14,4:1 */
.btn--blue    { background: var(--dgfe-blue-500); color: #fff;
                --sweep: var(--dgfe-navy-500); }                              /* 8,6:1 → 14,4:1 */
.btn--ghost   { background: transparent; color: var(--dgfe-navy-500);
                border-color: var(--rule-2); --sweep: var(--dgfe-yellow-500); }
.btn--ghost:focus-visible { border-color: var(--dgfe-yellow-500); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { border-color: var(--dgfe-yellow-500); } }
.btn--onnavy  { background: transparent; color: #fff;
                border-color: var(--rule-n2); --sweep: var(--dgfe-blue-500); }
.btn--onnavy:focus-visible { border-color: var(--dgfe-blue-500); }
@media (hover: hover) and (pointer: fine) { .btn--onnavy:hover { border-color: var(--dgfe-blue-500); } }
.btn--sm {
  /* Schmaler als vorher (war 11px 18px). Der Knopf sitzt in der
     Kopfzeile neben vier Navigationspunkten und hat dort zu viel
     Gewicht gezogen. Die 44px Mindesthoehe bleiben: das ist die
     Untergrenze fuer ein Tippziel (WCAG 2.5.8), daran wird nicht
     gespart. Nur die Polsterung links und rechts gibt nach. */
  min-height: 44px; padding: 9px 14px; font-size: var(--fs-2);
}

/* --- 8) Header ----------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--dgfe-cta-z);
  height: var(--header-h); background: var(--dgfe-neutral-50);
  border-bottom: 1px solid var(--rule);
  transition: height var(--t-ui) var(--e-shut), box-shadow var(--t-ui) var(--e-shut);
}
.site-header.is-condensed { height: var(--header-h-sm); box-shadow: 0 1px 0 var(--rule-2); }
.site-header__in {
  height: 100%; width: min(var(--page), 100% - 2 * var(--gut)); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 32px);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.brand svg { height: 28px; width: auto; display: block; transition: height var(--t-ui) var(--e-shut); }
.site-header.is-condensed .brand svg { height: 23px; }
/* Messwertanzeige im Header: der Verbrauchsindex faellt beim Scrollen mit.
   Das ist ein Anzeigewert, keine Bewegung — laeuft auch bei reduced motion. */
.readout {
  margin-left: clamp(14px, 2.4vw, 40px); display: flex; align-items: baseline; gap: 8px;
  padding-left: clamp(14px, 2.4vw, 40px); border-left: 1px solid var(--rule);
  margin-right: auto;
}
.readout__k { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); }
/* Der Kopfteil der Kennung faellt schmal weg, die Kennung selbst nicht:
   aus „Verbrauchsindex" wird „Index", wie auf der Achse daneben. Gekuerzt
   statt geloescht — die Anzeige bleibt vorhanden, nur ihre Form wechselt. */
.readout__kl { font-style: normal; }
.readout__v { font-size: var(--fs-3); color: var(--ink-strong);
              font-family: var(--ff-dsp); font-variation-settings: "wdth" 104, "wght" 700;
              font-variant-numeric: tabular-nums; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 34px); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-2); font-weight: 400; text-decoration: none; color: var(--ink-strong);
  border-bottom: 2px solid transparent;
  transition: color var(--t-ui) var(--e-shut), border-color var(--t-ui) var(--e-shut);
}
/* --- Partner-Aufklapper ---------------------------------------------------
   Die Partnerseiten sind keine weiteren Leistungsseiten. Sie stehen deshalb
   hinter einer Haarlinie, eine Stufe leiser als die drei Leistungen —
   erreichbar, aber nicht gleichrangig.

   Ein `<button aria-expanded>` und kein Link, der nirgends hinfuehrt, und
   kein `:hover`-Aufklapper: ein Menue, das nur auf Hover aufgeht, ist auf dem
   Telefon nicht bedienbar. Genau derselbe Fehler wie ein ungeklammerter
   Hover-Stil, nur folgenschwerer. Auf schmalen Breiten faellt der Knopf ganz
   weg und die beiden Ziele stehen im aufgeklappten Menue — kein zweites
   Aufklappen im Aufklappen. */
.nav__partner { position: relative; display: flex; align-items: center;
                margin-left: clamp(2px, .5vw, 10px); }
.nav__partner::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 1px; height: 24px; background: var(--rule-2);
}
.nav__pk { display: none; }
.nav__pb {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 2px; margin: 0;
  padding-left: clamp(13px, 1.4vw, 24px);
  background: none; border: 0; cursor: pointer;
  font-family: var(--ff-txt); font-size: var(--fs-2); font-weight: 400;
  line-height: 1; color: var(--ink);
  transition: color var(--t-ui) var(--e-shut);
}
/* Der Pfeil ist eine gekippte Ecke, kein Zeichen aus der Schrift: er sitzt
   damit auf jeder Breite gleich und faellt beim Aufklappen um. */
.nav__pbi { flex: none; width: 7px; height: 7px; translate: 0 -2px; rotate: 45deg;
            border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
            transition: rotate var(--t-ui) var(--e-shut), translate var(--t-ui) var(--e-shut); }
.nav__pb[aria-expanded="true"] .nav__pbi { rotate: 225deg; translate: 0 2px; }
.nav__pm {
  position: absolute; top: 100%; left: clamp(13px, 1.4vw, 24px); z-index: 5;
  min-width: 15.5rem; padding: 4px 0;
  background: var(--dgfe-neutral-50);
  border: 1px solid var(--rule-2); box-shadow: var(--dgfe-shadow-md);
}
.nav__pm[hidden] { display: none; }
.nav .nav__pm a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 16px; border-bottom: 0; color: var(--ink-strong);
}
/* GSP ist Entwurf. Die Kennzeichnung steht sichtbar daneben, nicht nur im
   Attribut — beim Veroeffentlichen faellt beides weg, sonst nichts. */
.nav__pe {
  flex: none; font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 70, "wght" 600; font-weight: 600;
  font-size: var(--fs-2); letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.3; color: var(--ink-quiet);
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 1px 6px;
}
/* Fokusring nach der Korrektur im Design-System: gelber Kern, Navy-Saum.
   Gelb allein erreicht gegen den Kopfzeilen-Grund 1,27:1 und traegt die
   Aussage nicht; der Saum bringt 14,96:1. */
.nav__pb:focus-visible, .nav .nav__pm a:focus-visible {
  outline: 2px solid var(--dgfe-yellow-500); outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--dgfe-navy-500); border-radius: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--dgfe-color-link); }
  .nav__pb:hover { color: var(--dgfe-color-link); }
  .nav .nav__pm a:hover { color: var(--dgfe-color-link); background: var(--dgfe-blue-50); }
}
/* Aktive Seite. Gelb allein traegt die Aussage nicht: #FFDE59 erreicht gegen
   den Kopfzeilen-Grund #F7F7F8 nachgemessen 1,24:1, und WCAG 2.2 (1.4.11)
   verlangt 3:1 fuer ein Merkmal, das einen Zustand anzeigt. Der Navy-Saum unter der gelben Kante
   bringt 13,98:1; das schwerere Gewicht ist der zweite, farbunabhaengige
   Hinweis. Steht nach `.nav a.nav__part`, damit die Partnerseite, wenn sie
   die aktive ist, ihren Ton wieder abgibt. */
.nav a[aria-current="page"] {
  color: var(--ink-strong); font-weight: 600;
  border-bottom-width: 2px; border-bottom-color: var(--dgfe-yellow-500);
  box-shadow: 0 1px 0 var(--dgfe-navy-500);
}
.nav .btn { border-bottom-width: 1px; }
.nav-toggle { display: none; }

/* --- 9) Hero -------------------------------------------------------------
   Kein Bild-mit-Text-Kasten. Der Hero ist die erste Messstelle: Titel links,
   Foto rechts bis ueber die Blattkante, darunter der erste Kurvenabschnitt,
   der unter dem Foto durchlaeuft. Die drei Belegzahlen sitzen als Messpunkte
   auf dieser Kurve.
   ------------------------------------------------------------------------ */
.hero { margin-top: var(--header-h); }
.hero .sheet__body { padding-block: 0; }
/* `min-width: 0` an den Kindern ist kein Beiwerk: ohne das setzt eine
   `1fr`-Spur ihre Mindestbreite auf das laengste unteilbare Wort. Bei 360 px
   weitete „ENERGIEKOSTEN" dadurch das ganze Hero-Raster um 5,3 px — und schob
   das angeschnittene Foto ueber die Fensterkante hinaus. */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 33%); column-gap: clamp(20px, 3vw, 56px); }
.hero__grid > * { min-width: 0; }
.hero__txt { padding-block: clamp(44px, 5.6vw, 92px) clamp(30px, 3.4vw, 52px); align-self: center; }
.hero .h1 { color: #fff; max-width: 15ch; }
.hero__lead { margin-top: clamp(18px, 2vw, 30px); color: var(--ink-n-muted); max-width: 44ch; }
.hero__act { margin-top: clamp(26px, 3vw, 42px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__meta {
  margin-top: clamp(24px, 2.6vw, 38px); padding-top: 14px;
  border-top: 1px solid var(--rule-n);
  font-size: var(--fs-2); letter-spacing: .05em; color: var(--ink-n-quiet);
  text-wrap: balance;
}
.hero__media { position: relative; overflow: hidden; margin-right: calc(-1 * var(--bleed)); }
.hero__media .ph { position: absolute; inset: 0; }

/* --- 10) Lastgang: das Rueckgrat -----------------------------------------
   Ambient-Abschnitte teilen EINE Skala (viewBox 0 0 1000 100, Index 100 liegt
   immer auf y=16, Index 70 auf y=74,3). Dadurch sitzt die Kurve in jedem
   folgenden Abschnitt messbar tiefer — das ist der ganze Trick.
   Der Hero-Abschnitt ist ein Zoom (viewBox 0 0 1000 40) und darf laut sein.
   ------------------------------------------------------------------------ */
.lg { position: relative; }
.lg__plot { position: relative; overflow: hidden; }
.lg__svg { display: block; width: 100%; height: 100%; }
.lg__grid { stroke: var(--lg-grid, var(--rule)); stroke-width: 1; }
.lg__ref  { stroke: var(--lg-ref, var(--rule-2)); stroke-width: 1; stroke-dasharray: 2 5; }
.lg__line { fill: none; stroke: var(--dgfe-yellow-500); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.sec--paper .lg__line, .sec--paper2 .lg__line { stroke: var(--dgfe-yellow-600); }
.lg__wipe {
  position: absolute; inset: 0; z-index: 4; background: var(--wipe-bg);
  transform-origin: right center; transform: scaleX(0); pointer-events: none;
}
/* Der Ambient-Abschnitt ist ein Messband, kein freischwebender Strich:
   oben und unten begrenzt, damit er als Plotflaeche gelesen wird. */
.lg--amb .lg__plot { height: clamp(76px, 8.4vw, 116px); border-block: 1px solid var(--rul); }
.lg--amb { --lg-grid: color-mix(in srgb, var(--dgfe-navy-500) 11%, transparent); }
.sec--paper .lg__line, .sec--paper2 .lg__line { stroke-width: 2.6; }
.sec--navy .lg--amb { --lg-grid: color-mix(in srgb, var(--dgfe-yellow-500) 12%, transparent); }

/* Messpunkt. Nur `scale` und `opacity` bewegen sich, die Position sitzt in
   left/top und in der eigenstaendigen Property `translate`. */
.mp { position: absolute; left: var(--x); top: var(--y); z-index: 5; translate: -50% -50%; }
.mp i {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--dgfe-yellow-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dgfe-navy-500) 45%, transparent);
}
.sec--paper .mp i, .sec--paper2 .mp i {
  background: var(--dgfe-navy-500);
  box-shadow: 0 0 0 4px var(--dgfe-yellow-500);
}

/* Hero-Kurve */
.lg--hero { margin-right: calc(-1 * var(--bleed)); padding-bottom: clamp(34px, 4vw, 56px); }
.lg--hero .lg__plot { height: clamp(128px, 16vw, 216px); }
.lg--hero { --lg-grid: color-mix(in srgb, var(--dgfe-yellow-500) 13%, transparent); }
.lgx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colgap);
       padding-right: var(--bleed); margin-top: clamp(16px, 1.8vw, 26px); }
.lgn { border-top: 1px solid var(--rule-n2); padding-top: 12px; }
.lgn__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-n-quiet); }
.lgn__v { display: block; margin-top: 10px; font-size: var(--fs-9); color: var(--dgfe-yellow-500); }
.lgn__n { display: block; margin-top: 8px; font-size: var(--fs-2); letter-spacing: .13em; color: var(--ink-n-muted); }
.lgn--big .lgn__v { font-size: var(--fs-9); }
.lgn--big { border-top-color: var(--dgfe-yellow-500); border-top-width: 2px; }
.lgn--m { grid-column: 5 / 8; }
.lgn--r { grid-column: 9 / 12; }
/* Der erste Kennwert stand auf zwei Spalten (c1-3), seine Geschwister auf
   drei. Bei 9px-Kennungen fiel das nicht auf; bei 14,3px passte
   „ERFAHRUNG“ nicht mehr in die schmalere Spur und lief heraus. Drei
   gleichrangige Kennwerte bekommen dieselbe Breite. */
.lgx .lgn.c1-3 { grid-column: 1 / 4; }

/* --- 11) Der grosse Plot: Bestand gegen Umsetzung ------------------------ */
.plot { position: relative; border: 1px solid var(--rule-n); background: var(--dgfe-navy-600); }
.plot__box { position: relative; overflow: hidden; height: clamp(288px, 33vw, 460px); }
.plot__svg { display: block; width: 100%; height: 100%; }
.plot__grid { stroke: color-mix(in srgb, var(--dgfe-yellow-500) 11%, transparent); stroke-width: 1; }
.plot__sep  { stroke: color-mix(in srgb, var(--dgfe-yellow-500) 16%, transparent); stroke-width: 1; }
.plot__area { fill: color-mix(in srgb, var(--dgfe-yellow-500) 11%, transparent); }
.plot__old  { fill: none; stroke: var(--dgfe-blue-300); stroke-width: 1.4; stroke-dasharray: 5 4; stroke-linejoin: round; }
.plot__new  { fill: none; stroke: var(--dgfe-yellow-500); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.plot__ylab {
  position: absolute; left: 12px; top: var(--y); translate: 0 -50%; z-index: 4;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
  font-size: var(--fs-2); letter-spacing: .1em; color: var(--ink-n-quiet);
  font-variant-numeric: tabular-nums;
}
.plot__wipe {
  position: absolute; inset: 0; z-index: 6; background: var(--dgfe-navy-600);
  transform-origin: right center; transform: scaleX(0); pointer-events: none;
}
.plot__legend {
  display: flex; flex-wrap: wrap; gap: 10px clamp(16px, 2vw, 30px);
  padding: 12px clamp(14px, 1.6vw, 22px); border-bottom: 1px solid var(--rule-n);
  font-size: var(--fs-2); letter-spacing: .15em; color: var(--ink-n-quiet);
}
.plot__legend b { display: inline-flex; align-items: center; gap: 8px; font-weight: inherit; color: var(--ink-n-muted); }
.plot__swatch { width: 20px; height: 0; border-top: 2px solid var(--dgfe-yellow-500); }
.plot__swatch--old { border-top: 1.5px dashed var(--dgfe-blue-300); }
.plot__swatch--area { height: 10px; border: 0; background: color-mix(in srgb, var(--dgfe-yellow-500) 22%, transparent); }

/* Die grosse Annotation sitzt in der Leerstelle, die das Fallen der Kurve
   erzeugt — oben rechts. Ohne die Kurve gaebe es diesen Platz nicht.

   Sie haengt seit 2026-08-06 an `.plot` und nicht mehr an `.plot__box`.
   Grund: `.plot__box` hat eine feste Hoehe und `overflow: hidden`. Sobald die
   Anmerkung schmal in den Fluss kippte (ab 1024 px), stand sie damit exakt
   unter der Unterkante des Kastens und wurde vollstaendig weggeschnitten —
   nachgemessen bei 768 px: Kasten y 2268-2529, Anmerkung y 2529. Der
   Messwert der Wirkung (damals „bis zu 20 % weniger Stromverbrauch", heute
   „Ø 20 %, im Durchschnitt auf die Jahresrechnung") fehlte auf jedem Telefon.
   Der Anschlag ist deshalb ein Abstand von oben statt ein Anteil der
   Kastenhoehe: er sitzt jetzt unabhaengig davon, wie hoch der Kasten faellt. */
.anno { position: absolute; left: 55%; top: clamp(56px, 5.2vw, 78px);
        width: min(38%, 330px); z-index: 5; }
.anno__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); }
.anno__v { display: block; margin-top: 10px; font-size: var(--fs-9); color: var(--dgfe-yellow-500); }
.anno__t { display: block; margin-top: 12px; font-size: var(--fs-3); line-height: 1.4; color: #fff; font-weight: 400; }
.anno__n { display: block; margin-top: 8px; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-n-quiet); }
/* Die Leitlinie fuehrt von der Anmerkung senkrecht auf den Messpunkt MP 03
   der unteren Kurve. Sie steht im Markup NACH der Anmerkung, weil sie schmal
   zu einer waagerechten Zeile darunter wird; auf breit liegt sie absolut und
   die Reihenfolge im Markup spielt keine Rolle. */
.anno__lead { position: absolute; left: 62.5%; top: clamp(150px, 13.6vw, 196px);
              height: clamp(58px, 6.4vw, 92px); width: 1px;
              background: var(--rule-n2); z-index: 4; }

.plot__x { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-n); }
.plot__ph { padding: 14px var(--rulegap); border-left: 1px solid var(--rule-n); }
.plot__ph:first-child { border-left: 0; }
.plot__ph b { display: block; font-size: var(--fs-2); letter-spacing: .16em; color: var(--dgfe-yellow-500); font-weight: inherit; }
.plot__ph span { display: block; margin-top: 7px; font-size: var(--fs-2); letter-spacing: .1em; color: var(--ink-n-muted); }

/* Pruefmarke aus der Wort-Bild-Marke (Schwarz/Rot/Gold) */
.markdots { display: flex; gap: 7px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.markdots b { display: block; width: 10px; height: 10px; border-radius: 50%; }
/* Schwarz-Rot-Gold, wie die drei Punkte der Wort-Bild-Marke, auf Stefs Ansage.
   Bis zum 27.08.2026 standen hier Navy und Blau aus der Hausfarbtafel; die
   Punkte lasen sich damit als Schwarz-Blau-Gelb. Die Werte sind bewusst
   dieselben festen Hexwerte wie im Logo (#222222/#FF3131) und keine Token:
   fuer das Rot der Marke gibt es keinen Token, und zwei Quellen fuer dieselbe
   Farbe laufen frueher oder spaeter auseinander. Gold ist --dgfe-yellow-500
   und damit ohnehin schon #FFDE59. */
.markdots b:nth-child(1) { background: #222222; }
.markdots b:nth-child(2) { background: #FF3131; }
.markdots b:nth-child(3) { background: var(--dgfe-yellow-500); }

/* Bildcluster: ein hohes Bild traegt zwei liegende, striktes Raster */
.cluster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); align-items: start; }
.cl-a { grid-row: 1 / 3; display: flex; flex-direction: column; }
.cl-a .ph { flex: 1 1 auto; aspect-ratio: auto; min-height: clamp(200px, 26vw, 380px); }
/* Die Hoehe kommt hier aus `min-height`, nicht aus `height` — `height:100%` am
   Bild fand deshalb nichts zum Aufloesen und liess 135 px totes Navy unter dem
   Motiv stehen. Absolut gesetzt fuellt es den Kasten und `cover` schneidet. */
.cl-a .ph img { position: absolute; inset: 0; }

/* --- 12) Messwertzeile unter dem Plot: bewusst ungleich breit ------------ */
.rdo { border-top: 1px solid var(--rule-n2); padding-top: 14px; }
.rdo__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-n-quiet); }
.rdo__v { display: block; margin-top: 10px; font-size: var(--fs-7); color: var(--dgfe-yellow-500); }
.rdo__w { display: block; margin-top: 10px; font-size: var(--fs-5); color: #fff;
          font-family: var(--ff-dsp); font-variation-settings: "wdth" 108, "wght" 650; text-transform: uppercase; line-height: 1.05; }
.rdo__t { display: block; margin-top: 10px; font-size: var(--fs-2); line-height: 1.5; color: var(--ink-n-muted); }

/* --- 13) Typenschild (Energiebeschaffung) -------------------------------- */
.plate { border: 1px solid var(--rule-n2); background: var(--dgfe-navy-600); }
.plate__hd {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px clamp(14px, 1.6vw, 22px); border-bottom: 1px solid var(--rule-n2);
  font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500);
}
.plate__hd em { font-style: normal; color: var(--ink-n-quiet); }
.plate__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 12px clamp(14px, 2vw, 32px);
  padding: clamp(12px, 1.5vw, 18px) clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--rule-n);
}
.plate__row:first-of-type { border-top: 0; }
.plate__k { font-size: var(--fs-2); letter-spacing: .15em; color: var(--ink-n-muted); }
.plate__v { font-size: var(--fs-8); color: var(--dgfe-yellow-500); }

/* --- 14) Vorteile: eine Aussage gross, drei klein ------------------------ */
.adv-lead .h3 { font-size: var(--fs-7); line-height: 1.06; }
.adv-lead .h3::after {
  content: ""; display: block; width: 76px; height: 4px;
  background: var(--dgfe-yellow-500); margin-top: clamp(16px, 1.8vw, 24px);
}
.adv-lead p { margin-top: clamp(16px, 1.8vw, 24px); font-size: var(--fs-3); }
/* 8 rem waren zu schmal: „EINSPARUNGEN" (143 px) und „ANTRAGSSERVICE"
   (166 px) liefen in die Textspalte und legten sich auf den Satz. */
.adv-row { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); gap: 10px clamp(16px, 2vw, 34px);
           padding-block: clamp(18px, 2vw, 26px); align-items: baseline;
           border-top: 1px solid var(--rule); }
/* In einer schmalen Labelspalte arbeitet `balance` gegen den Satz: es zog
   „PAPIERLOSER" auf drei Zeilen und trennte mitten im Wort. */
.adv-row .h3 { text-wrap: pretty; -webkit-hyphens: manual; hyphens: manual; }
.adv-row:last-child { border-bottom: 1px solid var(--rule); }
.adv-row p { font-size: var(--fs-3); }

/* --- 15) Ablauf: echte Reihenfolge, daher Nummern ------------------------ */
.step { display: grid; grid-template-columns: clamp(58px, 7vw, 116px) minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 10px clamp(16px, 2.4vw, 46px); padding-block: clamp(22px, 2.8vw, 38px);
        align-items: baseline; border-top: 1px solid var(--rule); }
.step:last-of-type { border-bottom: 1px solid var(--rule); }
.step__n { font-size: var(--fs-7); color: var(--ink-quiet); }
.step p { font-size: var(--fs-3); }

/* --- 16) Listen ---------------------------------------------------------- */
.checks { display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: var(--fs-3); line-height: 1.5; }
.checks .tk { color: var(--dgfe-yellow-800); font-weight: 500; }
.on-navy .checks .tk, .ypanel .checks .tk { color: inherit; }
.on-navy .checks li { color: var(--ink-n-muted); }
.on-navy .checks .tk { color: var(--dgfe-yellow-500); }

/* --- 17) Die eine gelbe Platte ------------------------------------------- */
.ypanel { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500);
          padding: clamp(26px, 3.4vw, 54px); position: relative; z-index: 2; }
.ypanel .eyebrow { color: var(--dgfe-navy-500); }
.ypanel .dsp { color: var(--dgfe-navy-500); }
.ypanel strong { color: var(--dgfe-navy-500); font-weight: 500; }

/* --- 18) Protokollbloecke (ehem. Flip-Boxen, jetzt lesbar ohne Hover) ---- */
.pblock { border-top: 3px solid var(--dgfe-navy-500); padding-top: clamp(18px, 2vw, 26px); }
.pblock p { margin-top: 14px; font-size: var(--fs-3); }
.pblock .checks { margin-top: clamp(18px, 2vw, 26px); padding-top: clamp(16px, 1.8vw, 22px); border-top: 1px solid var(--rule); }

/* --- 19) Formular -------------------------------------------------------- */
.fs, .wpath, .gbranch { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.fs + .fs { margin-top: clamp(30px, 3.4vw, 46px); }
.wpath > * + * { margin-top: clamp(30px, 3.4vw, 46px); }
/* Die sr-only-Legende ist das erste Kind und zaehlt als Geschwister mit —
   ohne diese Zeile bekommt der erste Block einen Abstand, den keiner sieht,
   aber jeder spuert. */
.wpath > legend + * { margin-top: 0; }
.fs__lg { display: flex; align-items: baseline; gap: 12px; width: 100%;
          padding-bottom: 12px; margin-bottom: clamp(20px, 2.2vw, 30px);
          border-bottom: 1px solid var(--rule-2);
          font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-strong); }
.fs__n { color: var(--ink-accent); }
.flds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dgfe-space-lg); }
.fld--full { grid-column: 1 / -1; }
.fld--gap { margin-top: 22px; }
.fld > label, .fld > .fld__l { display: block; margin-bottom: 8px;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 76, "wght" 600;
  font-size: var(--fs-2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-strong); }
.fld__l { border: 0; padding: 0; }
/* Ein `fieldset.fld` (Radio-Gruppe mit eigener Legende) traegt sonst den
   UA-Rahmen des Browsers und steht als Kasten im ansonsten rahmenlosen
   Formular. */
fieldset.fld { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: var(--ff-txt); font-size: var(--fs-3); font-weight: 300; color: var(--ink-strong);
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px;
  transition: border-color var(--t-ui) var(--e-shut), box-shadow var(--t-ui) var(--e-shut);
}
/* Platzhalter nicht dem Browser ueberlassen: navy-300 sind nachgerechnet
   5,54 : 1, der UA-Grauwert liegt darunter. */
::placeholder { color: var(--ink-quiet); opacity: 1; }
@media (hover: hover) and (pointer: fine) { input:hover, select:hover, textarea:hover { border-color: var(--dgfe-navy-300); } }
input:focus, select:focus, textarea:focus {
  border-color: var(--dgfe-blue-500); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dgfe-blue-500) 14%, transparent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 2px;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 49%, var(--dgfe-navy-400) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--dgfe-navy-400) 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.segs--stack { flex-direction: column; align-items: stretch; }
.seg { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; min-height: 46px; padding: 10px 18px;
  font-size: var(--fs-3); color: var(--ink-strong); background: var(--paper);
  border: 1px solid var(--rule-2); border-radius: 3px; font-variant-numeric: tabular-nums;
  transition: border-color var(--t-ui) var(--e-shut), color var(--t-ui) var(--e-shut); }
.seg span::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--dgfe-navy-500); transform: scaleX(0); transform-origin: left center;
  transition: transform 300ms var(--e-draw); }
@media (hover: hover) and (pointer: fine) { .seg:hover span { border-color: var(--dgfe-navy-300); } }
.seg input:checked + span { border-color: var(--dgfe-navy-500); color: #fff; }
.seg input:checked + span::before { transform: scaleX(1); }
.seg input:focus-visible + span { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 2px; }
.subm { margin-top: clamp(28px, 3.2vw, 44px); display: flex; flex-wrap: wrap; gap: var(--dgfe-space-lg); align-items: center; }
.fnote { font-size: var(--fs-2); max-width: 32ch; color: var(--ink-quiet); }
.fstat { margin-top: var(--dgfe-space-lg); padding: 14px 18px; font-size: var(--fs-2);
         border-left: 3px solid var(--dgfe-color-success); background: var(--dgfe-color-success-bg);
         color: var(--dgfe-color-success); }
.fstat[hidden] { display: none; }
.fhint { margin: -4px 0 clamp(18px, 2vw, 24px); font-size: var(--fs-2); line-height: 1.5;
         color: var(--ink-quiet); max-width: 58ch; }
.fnote2 { margin-top: 9px; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-quiet); }
.req { color: var(--ink-accent); margin-left: .25em; }
.fs__lg .req { margin-left: -6px; }
.unit { color: var(--ink-quiet); }
.optag { margin-left: auto; font-style: normal; letter-spacing: .15em; color: var(--ink-quiet); }
input[type=file] {
  width: 100%; min-height: 48px; padding: 10px 12px; cursor: pointer;
  font-family: var(--ff-txt); font-size: var(--fs-2); font-weight: 300; color: var(--ink-strong);
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px;
}
input[type=file]::file-selector-button {
  margin-right: 14px; min-height: 32px; padding: 7px 14px; cursor: pointer;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 88, "wght" 650;
  font-weight: 600; font-size: var(--fs-2); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dgfe-navy-500); background: transparent;
  border: 1px solid var(--rule-2); border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) { input[type=file]:hover { border-color: var(--dgfe-navy-300); } }

/* --- 19b) WIZARD ---------------------------------------------------------
   Der Fortschritt ist eine waagerechte Messstrecke: drei Messpunkte in genau
   der Form, die die Kurve auf Papier hat (Navy-Punkt, gelber Ring), verbunden
   durch eine Haarlinie, die sich beim Weitergehen gelb fuellt (scaleX, wie der
   Schreiber an der Kurve). Schritt 1 ist bewusst KEIN Kachelfeld, sondern eine
   Protokollliste mit Haarlinien — die gewaehlte Zeile bekommt eine gelbe
   Kante, keine gelbe Flaeche.
   ------------------------------------------------------------------------ */
.wzt { border-top: 1px solid var(--rule-2); padding-top: clamp(14px, 1.6vw, 20px);
       margin-bottom: clamp(26px, 3vw, 40px); }
.wzt__list { display: flex; align-items: center; gap: clamp(7px, 1.1vw, 15px);
             padding-left: 5px; margin: 0; }
.wzt__s { display: flex; align-items: center; gap: clamp(7px, 1.1vw, 15px); min-width: 0; }
.wzt__s:not(:last-child) { flex: 1 1 auto; }
.wzt__b { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 0;
          padding: 4px 2px; margin: 0; background: none; border: 0; cursor: pointer;
          font: inherit; color: var(--ink-quiet); text-align: left; }
.wzt__dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper);
  border: 1px solid var(--rule-2); color: var(--ink-quiet);
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 88, "wght" 700;
  font-weight: 700; font-size: var(--fs-2); font-variant-numeric: tabular-nums;
  transition: background-color var(--t-ui) var(--e-shut),
              border-color var(--t-ui) var(--e-shut),
              box-shadow var(--t-ui) var(--e-shut);
}
.wzt__t { font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
          font-weight: 600; text-transform: uppercase; font-size: var(--fs-2);
          letter-spacing: .15em; line-height: 1.2; white-space: nowrap; }
/* Der aktive Messpunkt ist exakt der Punkt von der Kurve: Navy mit gelbem Ring. */
.wzt__s[data-state="current"] .wzt__dot {
  background: var(--dgfe-navy-500); border-color: var(--dgfe-navy-500); color: #fff;
  box-shadow: 0 0 0 4px var(--dgfe-yellow-500);
}
.wzt__s[data-state="current"] .wzt__t { color: var(--ink-strong); }
.wzt__s[data-state="done"] .wzt__dot {
  background: var(--dgfe-navy-500); border-color: var(--dgfe-navy-500); color: var(--dgfe-yellow-500);
}
.wzt__s[data-state="done"] .wzt__t { color: var(--ink); }
.wzt__link { position: relative; flex: 1 1 24px; min-width: 14px; height: 1px; background: var(--rule-2); }
.wzt__link i { position: absolute; left: 0; top: -1px; width: 100%; height: 3px;
               background: var(--dgfe-yellow-500);
               transform: scaleX(0); transform-origin: left center;
               transition: transform 560ms var(--e-draw); }
.wzt__s[data-state="done"] .wzt__link i { transform: scaleX(1); }
.wzt__idx { margin-top: 12px; text-align: right; font-size: var(--fs-2);
            letter-spacing: .17em; color: var(--ink-quiet); }
.wzt__idx b { font-weight: inherit; color: var(--ink-strong); }
.wzt__idxt { display: none; }

.wz__panel[hidden], .wpath[hidden], .gbranch[hidden] { display: none; }
/* Der Schrittwechsel fuhr bis 2026-08-06 12 px von unten ein — fahrender
   Text, und zwar der Text, den man gerade ausfuellen soll. Regel A: Text
   bewegt sich nie. Der Wechsel wird jetzt allein von der Messstrecke
   quittiert (`data-quitt` an den Auswahlzeilen, gelbe Fuellung der Strecke). */

.wzh { margin-bottom: clamp(20px, 2.2vw, 30px); }
.wzh__t {
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 110, "wght" 700;
  font-weight: 700; text-transform: uppercase; color: var(--ink-strong);
  font-size: var(--fs-5); line-height: 1.04;
  letter-spacing: -.014em; text-wrap: balance;
}
/* `:focus-visible`, nicht `:focus`: der Fokus wandert bei jedem Schrittwechsel
   programmatisch hierher. Wer geklickt hat, soll keinen Rahmen sehen; wer mit
   der Tastatur weitergegangen ist, sehr wohl. Chrome uebernimmt dafuer den
   Zustand der letzten Eingabe. */
.wzh__t:focus-visible { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 5px; border-radius: 2px; }
.wzh p { margin-top: 13px; font-size: var(--fs-3); max-width: 56ch; }

/* Schritt 1: Protokollzeilen statt Kacheln */
.ways { border-top: 1px solid var(--rule-2); }
.way { position: relative; display: block; border-bottom: 1px solid var(--rule); }
.ways .way:last-child { border-bottom-color: var(--rule-2); }
.way input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
             opacity: 0; cursor: pointer; z-index: 2; }
.way__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1;
             background: var(--dgfe-yellow-500);
             transform: scaleY(0); transform-origin: center top;
             transition: transform 340ms var(--e-draw); }
/* `align-items: baseline` statt `start` plus Ausgleichspolster: Einordnung,
   Titel und Aufwand sitzen dadurch wirklich auf einer Grundlinie, nicht
   ungefaehr. Fast fluchtende Zeilen sind schlimmer als offensichtlich
   versetzte. */
.way__in { position: relative; display: grid;
           grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) minmax(0, 7.5rem);
           gap: 6px clamp(14px, 2.2vw, 38px); align-items: baseline;
           padding: clamp(18px, 2.1vw, 26px) clamp(12px, 1.4vw, 18px)
                    clamp(18px, 2.1vw, 26px) clamp(16px, 1.8vw, 22px);
           transition: background-color var(--t-ui) var(--e-shut); }
.way__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.way__t { display: block; font-family: var(--ff-dsp); font-variation-settings: "wdth" 108, "wght" 650;
          font-weight: 600; text-transform: uppercase; color: var(--ink-strong);
          font-size: var(--fs-3); line-height: 1.14; letter-spacing: .002em; }
.way__d { display: block; margin-top: 9px; font-size: var(--fs-3); line-height: 1.5; max-width: 48ch; }
.way__meta { font-size: var(--fs-2); letter-spacing: .15em;
             color: var(--ink-quiet); text-align: right; }
.way__pick { display: block; margin-top: 9px; font-style: normal; color: var(--ink-accent); visibility: hidden;
             opacity: 0; transition: opacity var(--t-ui) var(--e-shut); }
@media (hover: hover) and (pointer: fine) { .way:hover .way__in { background: color-mix(in srgb, var(--dgfe-navy-500) 3%, transparent); } }
.way input:checked ~ .way__edge { transform: scaleY(1); }
.way input:checked ~ .way__in { background: color-mix(in srgb, var(--dgfe-yellow-500) 9%, white); }
.way input:checked ~ .way__in .way__t { color: var(--dgfe-navy-500); }
.way input:checked ~ .way__in .way__pick { opacity: 1; visibility: visible; }
  /* opacity allein nimmt den Marker nicht aus dem Screenreader — sonst
     meldeten alle drei Optionen "Gewaehlt". */
.way input:focus-visible ~ .way__in { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: -3px; }

/* Zusatzblock: kein Nummernschritt, sondern ein Einschub — daher gelbe Kante
   statt Ziffer. Sonst haette die Nummernfolge Luecken.
   Die Kante sitzt am `gbranch`-Fieldset (das keine Legende hat): an einem
   Fieldset MIT Legende beginnt der Rahmen erst auf halber Legendenhoehe und
   die Linie faengt sichtbar zu spaet an. */
.xtra { border-left: 2px solid var(--dgfe-yellow-500); padding-left: clamp(16px, 1.8vw, 24px); }

/* Termin-Slots */
.slots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
.slots--time { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.slot { position: relative; }
.slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.slot > span { display: grid; place-items: center; gap: 5px; min-height: 62px; padding: 10px 6px;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px; text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-ui) var(--e-shut), box-shadow var(--t-ui) var(--e-shut); }
.slots--time .slot > span { min-height: 48px; font-size: var(--fs-3); color: var(--ink-strong); }
.slot__d { font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600; font-weight: 600;
           font-size: var(--fs-2); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-quiet); }
.slot__n { font-family: var(--ff-dsp); font-variation-settings: "wdth" 104, "wght" 700; font-weight: 700;
           font-size: var(--fs-3); letter-spacing: -.01em; color: var(--ink-strong); }
@media (hover: hover) and (pointer: fine) { .slot:hover > span { border-color: var(--dgfe-navy-300); } }
.slot input:checked + span { border-color: var(--dgfe-navy-500);
                             box-shadow: inset 0 -3px 0 0 var(--dgfe-yellow-500); }
.slot input:focus-visible + span { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 2px; }
.slotnote { margin-top: 11px; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-quiet); }

/* Einwilligung.
   `label.chk` statt `.chk`: `.fld > label` (Versalien, Archivo, Sperrung) hat
   dieselbe Spezifitaet und wuerde sonst gewinnen — der Einwilligungssatz stand
   in Grossbuchstaben und ohne Raster neben der Box. */
label.chk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; align-items: start;
       min-height: 44px; margin-bottom: 0; padding: 10px 0; cursor: pointer;
       font-family: var(--ff-txt); font-variation-settings: normal; font-weight: 300;
       font-size: var(--fs-2); line-height: 1.5; letter-spacing: 0; text-transform: none;
       color: var(--ink); }
.chk input {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 22px; height: 22px; margin: 1px 0 0; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px;
  transition: background-color var(--t-ui) var(--e-shut), border-color var(--t-ui) var(--e-shut);
}
@media (hover: hover) and (pointer: fine) { .chk input:hover { border-color: var(--dgfe-navy-300); } }
.chk input:checked { background: var(--dgfe-navy-500); border-color: var(--dgfe-navy-500); }
.chk input:checked::after { content: "\2713"; position: absolute; inset: 0;
  display: grid; place-items: center; color: var(--dgfe-yellow-500); font-size: var(--fs-2); line-height: 1; }

/* Fehlerzustaende */
.err { display: none; margin-top: 9px; padding-left: 11px; font-size: var(--fs-2); line-height: 1.45;
       border-left: 2px solid var(--dgfe-color-error); color: var(--dgfe-color-error); }
.is-bad .err { display: block; }
.is-bad input:not([type=radio]):not([type=checkbox]), .is-bad select, .is-bad textarea {
  border-color: var(--dgfe-color-error); background: var(--dgfe-color-error-bg); }
.is-bad .seg span, .is-bad .slot > span { border-color: var(--dgfe-color-error); }
.is-bad .chk input { border-color: var(--dgfe-color-error); }
.is-bad > label, .is-bad > .fld__l, .is-bad > .fs__lg { color: var(--dgfe-color-error); }
.is-bad .way__in { background: var(--dgfe-color-error-bg); }
.wzalert { margin-bottom: clamp(18px, 2vw, 26px); padding: 13px 17px; font-size: var(--fs-2); line-height: 1.45;
  border-left: 3px solid var(--dgfe-color-error); background: var(--dgfe-color-error-bg);
  color: var(--dgfe-color-error); }
.wzalert:empty { display: none; }

/* Schrittwechsel */
.wznav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
         margin-top: clamp(28px, 3.2vw, 42px); padding-top: clamp(18px, 2vw, 26px);
         border-top: 1px solid var(--rule-2); }
.wznote { flex: 1 1 18ch; min-width: 0; font-size: var(--fs-2); line-height: 1.45;
          color: var(--ink-quiet); text-align: right; }
/* Schritt 1 endet bereits mit der Schlusslinie der Wegeliste. Eine zweite
   Linie darueber waere ein Doppelstrich mit Totraum dazwischen. */
.wz__panel[data-step="1"] .wznav { border-top: 0; padding-top: 0;
                                   margin-top: clamp(22px, 2.4vw, 32px); }
.btn:focus-visible .btn__a--b { transform: translateX(-6px); }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__a--b { transform: translateX(-6px); } }

/* Schritt 3: Eingangsprotokoll */
.done { display: inline-flex; align-items: center; gap: 14px; margin-bottom: clamp(16px, 1.8vw, 22px);
        margin-left: 5px; }
.done i { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--dgfe-navy-500);
          box-shadow: 0 0 0 5px var(--dgfe-yellow-500); }
.done span { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.rcpt { border: 1px solid var(--rule-2); margin-bottom: clamp(18px, 2vw, 26px); }
.rcpt__hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px;
  padding: 13px clamp(14px, 1.6vw, 22px); border-bottom: 1px solid var(--rule-2);
  font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.rcpt__hd em { font-style: normal; color: var(--ink-strong); }
.rcpt__row { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 6px clamp(14px, 2vw, 32px); padding: clamp(12px, 1.4vw, 17px) clamp(14px, 1.6vw, 22px);
  align-items: baseline; border-top: 1px solid var(--rule); }
.rcpt__row:first-child { border-top: 0; }
.rcpt__k { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); }
.rcpt__v { font-size: var(--fs-3); color: var(--ink-strong); }

.trust { position: sticky; top: calc(var(--header-h) + 22px); background: var(--dgfe-navy-500); }
.trust__b { padding: clamp(20px, 2.2vw, 30px); border-top: 1px solid var(--rule-n); }
.trust__b:first-child { border-top: 0; }
.trust__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); }
.trust__big { margin-top: 12px; font-size: var(--fs-3); line-height: 1.35; color: #fff; font-weight: 400; }
.trust .checks { margin-top: var(--dgfe-space-lg); }
.trust address { margin-top: 12px; font-size: var(--fs-2); line-height: 1.6; font-style: normal; color: var(--ink-n-muted); }
/* 40 px waren nachgemessen 4 px zu wenig: WCAG 2.5.8 verlangt 44. */
.trust address a { word-break: break-word; display: inline-flex; min-height: 44px; align-items: center; }

/* --- 20) Abschluss + Footer ---------------------------------------------- */
.closer { position: relative; overflow: hidden; }
.closer__bg { position: absolute; inset: 0; z-index: 0; }
.closer__bg .ph { position: absolute; inset: 0; }
.closer__bg::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: color-mix(in srgb, var(--dgfe-navy-500) 86%, transparent); }
.closer > .sheet, .closer > .lgwrap { position: relative; z-index: 2; }
/* Der Ring zaehlt zur Silhouette: ohne Versatz haengt er 5 px in die
   Achsenspalte und kreuzt deren Haarlinie. */
.endmark { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 42px);
           margin-left: 5px; }
.endmark i { width: 13px; height: 13px; border-radius: 50%; background: var(--dgfe-yellow-500);
             box-shadow: 0 0 0 5px color-mix(in srgb, var(--dgfe-yellow-500) 22%, transparent); flex: none; }
.endmark span { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-n-muted); }

.site-footer { background: var(--dgfe-navy-500); color: var(--ink-n-muted); }
.site-footer .sheet__body { padding-block: clamp(44px, 5vw, 76px); }
.foot { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr; gap: clamp(28px, 4vw, 68px); }
.foot svg { height: 32px; width: auto; display: block; margin-bottom: var(--dgfe-space-lg); }
/* Buchstaben weiss, damit sie auf dem Navy-Fuss lesbar sind.
   Die drei Punkte behalten Schwarz-Rot-Gold, auf Stefs Ansage.
   GEMESSEN: #222222 auf #1c244b ergibt 1,06:1 -- der schwarze
   Punkt ist auf dem dunklen Grund praktisch nicht zu sehen.
   Rueckbau, falls doch sichtbar gewuenscht: circle:first-of-type
   wieder auf #fff. */
.foot svg path { fill: #fff; }
.foot__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); margin-bottom: var(--dgfe-space-lg); }
.foot__nm { font-size: var(--fs-3); color: #fff; font-weight: 400; line-height: 1.3; }
.foot p, .foot address { font-size: var(--fs-2); line-height: 1.65; font-style: normal; }
.foot__ls { display: grid; gap: 2px; }
.foot .foot__ls a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-2);
  color: color-mix(in srgb, white 82%, var(--dgfe-navy-500)); text-decoration: none;
  transition: color var(--t-ui) var(--e-shut); }
@media (hover: hover) and (pointer: fine) { .foot .foot__ls a:hover { color: #fff; } }
.foot__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--dgfe-space-lg); }
.foot__bar { margin-top: clamp(34px, 4vw, 56px); padding-top: var(--dgfe-space-lg);
  border-top: 1px solid var(--rule-n); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px; font-size: var(--fs-2); color: var(--ink-n-quiet); }

/* --- 21) Bewegung -------------------------------------------------------
   Hier stand bis 2026-08-06 die seiteneigene Bewegung: `.r`/`.rq`/`.grp`
   fuhren 14-16 px von unten ein, gestaffelt mit `--i * 70ms`, die Messpunkte
   setzten sich ueber eine Feder mit 44 % Ueberschwinger, und die Kurven
   wurden von einer Blende freigelegt statt gezeichnet.

   Das ist ersetzt durch die gemeinsame Bewegungsschicht am Ende dieser
   Datei (`<style id="bewegung-css">`). Sie kennt fuenf Verhalten, jedes an
   eine Art Inhalt gebunden:

     data-auf      Text wird aufgedeckt, ohne sich zu bewegen (Regel A)
     data-spur     die Lastgang-Kurve zeichnet sich, links nach rechts
     data-flaeche  die Einsparflaeche folgt der Kurve nach
     data-marke    ein Messpunkt erscheint, wenn die Spur an ihm vorbei ist
     data-zaehl    eine Anzeige laeuft auf ihren gemessenen Wert und haelt
     data-auszug   ein Register faehrt auf seiner Schiene heraus
     data-quitt    eine Auswahl quittiert

   Was hier bleibt, ist reine Anordnung und keine Bewegung.
   ------------------------------------------------------------------------ */
.lm {
  display: block; overflow: hidden;
  /* Oben UND unten polstern, sonst kappt die Maske die Umlautpunkte
     der Versalien. Die negativen Aussenabstaende nehmen die Polsterung
     optisch wieder zurueck, der Zeilenabstand bleibt also unveraendert. */
  padding-top: .16em; margin-top: -.16em;
  padding-bottom: .06em; margin-bottom: -.06em;
}
.lm i { display: block; font-style: normal; }

/* --- 21b) Farbe beim Scrollen: der Ruhezustand bleibt Duotone ------------
   Der eine Grade ueber alle Fotos ist der groesste Einzelhebel des
   Auftritts und wird nicht angetastet. Farbe ist die Belohnung fuers
   Weiterlesen, nicht der Normalzustand.

   Seit 2026-08-05 tragen ALLE neun inhaltlichen Fotos der Seite
   `.ph--farbe`, nicht mehr nur drei. Die Seite hat weder Fremdlogos noch
   Zeichnungen, es gibt also nichts auszunehmen. Das Abschlussbild ist
   dabei — es liegt unter 86 % Navy und traegt Text, der Kontrast ist im
   VOLLFARBIGEN Zustand je Textkasten nachgemessen (schlechtester Wert
   6,04:1 bei 9 px, verlangt sind 4,5:1). Zahlen im README 12.

   Der Duotone besteht aus genau zwei Teilen: dem Grade auf dem Bild und
   dem Navy, mit dem es in Luminanz blendet. Beide muessen zurueckgehen,
   sonst passiert gar nichts — `filter: none` allein laesst das Bild navy,
   weil der Blend die Farbe frisst (der Blend nimmt Ton und Saettigung vom
   Hintergrund). Beide fahren deshalb auf EINEM Fortschritt `--gs`:
   1 = Duotone, 0 = Original. Sonst wird nichts angefasst: kein Zoom, kein
   Rahmen, keine Verschiebung.

   `--gs` schreibt das Script aus der SICHTBARKEIT DER SEKTION, nicht mehr
   aus der Lage des einzelnen Bildes im Fenster (Begruendung im Script).
   Keine Hover-Klammer: gescrollt wird auf Touch genauso.
   ------------------------------------------------------------------------ */
.ph--farbe img {
  filter: grayscale(var(--gs, 1))
          contrast(calc(1 + .17 * var(--gs, 1)))
          brightness(calc(1 + .06 * var(--gs, 1)));
}
/* Der Navy-Grund haengt an einer EIGENEN Groesse `--nv`, nicht an `--gs`.
   Der Grund steht im Kommentar „Zwei Haelften" weiter unten im Script. */
.ph--farbe {
  background-color: color-mix(in srgb,
    var(--dgfe-navy-500) calc(var(--nv, 1) * 100%), transparent);
}
/* Der Endzustand wird hart gesetzt, nicht errechnet. Nachgemessen weicht
   `grayscale(0) contrast(1) brightness(1)` an den hellsten Stellen um bis
   zu 11/255 vom Original ab (Rundung in der Filterkette). `filter: none`
   ist Pixel fuer Pixel das unbehandelte Bild — nachgewiesen gegen dieselbe
   URL nackt daneben, siehe README 10.4. */
.ph--farbe[data-voll] img {
  /* NICHT `filter: none`. Ohne Restgrade endet jedes Foto als rohes
     Stockbild, und fuenf Quellen bedeuten fuenf Farbtemperaturen.
     Der Rest-Grade haelt sie als Serie zusammen, ohne die Farbe zu
     verstecken -- die Bewegung bleibt also sichtbar. */
  filter: grayscale(.32) contrast(1.05) brightness(1.02);
  /* Zurueck auf normal: luminosity nimmt nur die Helligkeit und
     holt die Farbe vom Untergrund. Waehrend der Rampe ist das der
     Duotone; am Ende verhindert es jede Farbe. Der Elternknoten
     isoliert, gemischt wird also gegen seine eigene Flaeche. */
  mix-blend-mode: normal;
}
.ph--farbe[data-voll] {
  /* Ein Hauch Navy bindet das Bild an die Seite, ohne die
     angekommene Farbe zuzudecken. */
  background-color: color-mix(in srgb, var(--dgfe-navy-500) 12%, transparent);
}

/* --- 22) Breakpoints ----------------------------------------------------- */
@media (max-width: 1024px) {
  /* Die Merkmalzeile stand zweispaltig: 11,5rem Kennung + Rest. In der
     rechten Blatthaelfte sind das bei 768px noch 117px fuer den Absatz —
     zu wenig fuer eine Zeile Text. Ab hier untereinander. */
  .adv-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  :root { --page: 900px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { min-height: clamp(220px, 44vw, 340px); margin-top: 4px; }
  .hero .h1 { max-width: 20ch; }
  .formgrid { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .anno { position: static; width: auto; padding: clamp(18px, 2.4vw, 26px);
          border-top: 2px solid var(--dgfe-yellow-500); background: var(--dgfe-navy-600); }
  /* Die Leitlinie verschwand hier bis 2026-08-06. Sie zeigt breit von der
     Anmerkung auf den Messpunkt; schmal steht die Anmerkung ohnehin unter
     der Kurve, also wird aus der senkrechten Leitung eine waagerechte Zeile
     darunter — dieselbe Aussage („das gehoert zusammen"), in der Achse, in
     der die Seite hier laeuft. Vorhandensein ist die Paritaet, nicht die
     Anordnung. */
  /* `display: block` ist Pflicht: `.anno__lead` ist ein `<span>`, und an
     einem Inline-Kasten greift weder Breite noch Hoehe — die Zeile waere
     0 px breit. */
  .anno__lead { display: block; position: static; width: auto; height: 2px;
                margin: 0 clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px);
                background: var(--rule-n2); }
  .plot__box { height: clamp(230px, 34vw, 320px); }
}
/* Die Kopfzeile kippt frueher als das Raster: bei 768 px ist die Desktop-Nav
   62 px zu breit und schiebt „Termin vereinbaren" aus dem Bild. Der
   Hamburger traegt deshalb bis 1024 px. */
@media (max-width: 1024px) {
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column;
         align-items: stretch; gap: 0; background: var(--dgfe-neutral-50);
         border-bottom: 1px solid var(--rule-2); padding: 6px var(--gut) 16px;
         box-shadow: var(--dgfe-shadow-md); }
  /* Author-Styles schlagen das UA-`display:none` von [hidden] — sonst steht
     das Mobilmenue dauerhaft offen. */
  .nav[hidden] { display: none; }
  .nav a { min-height: 48px; border-bottom: 1px solid var(--rule); }
  /* Im aufgeklappten Menue wird aus der senkrechten Haarlinie eine
     waagerechte ueber die volle Breite: dieselbe Aussage („ab hier etwas
     anderes"), nur in der Achse, in der das Menue laeuft.
     Der Eintrag DAVOR gibt dafuer seine eigene Trennlinie ab — sonst stehen
     zwei Haarlinien 12 px uebereinander und lesen sich als Fehler statt als
     Gruppenwechsel. */
  /* Der Partner-Block wird hier Teil des aufgeklappten Menues: der Knopf
     faellt weg, die beiden Ziele stehen als gewoehnliche Eintraege unter
     einer Kennung. Ein Aufklapper im Aufklapper waere eine zweite Ebene fuer
     zwei Links. */
  .nav__partner { display: block; margin-left: 0; margin-top: 12px; padding-top: 13px; }
  .nav__partner::before { left: 0; right: 0; top: 0; width: auto; height: 1px; translate: none; }
  .nav__pb { display: none; }
  .nav__pk { display: block; padding: 4px 0 6px; font-size: var(--fs-2);
             letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); }
  .nav__pm, .nav__pm[hidden] {
    display: block; position: static; min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav .nav__pm a { min-height: 48px; padding: 0; justify-content: flex-start;
                    border-bottom: 1px solid var(--rule); }
  .nav a:has(+ .nav__partner) { border-bottom: 0; }
  .nav .btn { margin-top: 10px; justify-content: center; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; margin-left: auto; padding: 0 11px;
    background: transparent; border: 1px solid var(--rule-2); border-radius: 3px; cursor: pointer; }
  .nav-toggle b { display: block; height: 1.5px; background: var(--ink-strong); }

  /* Die Messwertanzeige bleibt im Kopf stehen, sie wird nur enger.
     Die Bewegungsschicht setzt `.readout` ab 1023 px auf einen eigenen,
     vollbreiten Block unter der Grafik — das ist fuer die Seiten gedacht, auf
     denen die Anzeige NEBEN einer Grafik steht. Hier sitzt sie in einer
     Kopfzeile fester Hoehe, und `width: 100%` wuerde die Zeile sprengen.
     Deshalb hier eine Stelle mehr Spezifitaet (`.site-header .readout`), die
     unabhaengig von der Reihenfolge der Stylesheets gewinnt. */
  .site-header .readout {
    display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px;
    width: auto; min-width: 0;
    margin: 0 auto 0 clamp(10px, 2vw, 18px);
    padding: 0 0 0 clamp(10px, 2vw, 18px);
    border-top: 0; border-left: 1px solid var(--rule);
    position: static; inset: auto;
  }
}
/* Direkt ueber dem Umschlagpunkt sitzt die Desktop-Nav sonst auf Kante. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .readout { margin-left: 18px; padding-left: 18px; }
  .nav { gap: 20px; }
}

@media (max-width: 767px) {
  /* Die Achse traegt hier wieder alles, was sie breit auch traegt: Messwert,
     Einheit und Name. Bis 2026-08-06 waren Einheit und Name ab 767 px
     ausgeblendet — damit war die Achse am Telefon eine Zahlenreihe ohne
     Bezugsgroesse, also kein Messgeraet mehr. Sie kosten trotzdem keine
     Satzbreite: beide laufen jetzt senkrecht wie der Name, und senkrecht
     misst „Index" 19 px statt 55 px. 34 px bleiben stehen. */
  /* `--bleed` braucht hier keinen Sonderwert mehr: die max()-Formel liefert
     schmal ohnehin genau `--gut`. Zwei Quellen fuer eine Zahl laufen sonst
     irgendwann auseinander. */
  :root { --axis: 34px; --header-h: 60px; --header-h-sm: 52px;
          --rulegap: var(--dgfe-space-md); }
  .g { row-gap: 26px; }
  .c1-4,.c1-5,.c1-6,.c1-7,.c1-8,.c1-9,.c2-7,.c3-8,.c3-9,.c5-9,
  .c5-12,.c6-12,.c7-12,.c8-12,.c9-12 { grid-column: 1 / -1; }
  /* Und die Zeilen wieder freigeben, sonst stapeln sich zwei Blaecke. */
  .r1, .r2, .r1-3 { grid-row: auto; }
  .site-header .readout { margin-left: 10px; padding-left: 10px; gap: 7px; }
  .readout__kl { display: none; }
  .axis { padding-right: 8px; }
  .axis__val { font-size: var(--fs-2); }
  .axis__unit { writing-mode: vertical-rl; transform: rotate(180deg);
                margin-top: 10px; letter-spacing: .12em; }
  .axis__name { margin-top: 12px; letter-spacing: .12em; }
  .lgx { grid-template-columns: 1fr; row-gap: 14px; padding-right: var(--gut); }
  .lgx .lgn { grid-column: 1 / -1; }
  .plot__x { grid-template-columns: 1fr 1fr; }
  .plot__ph:nth-child(3) { border-left: 0; }
  .plot__ph:nth-child(n+3) { border-top: 1px solid var(--rule-n); }
  .plot__ylab { font-size: var(--fs-2); left: 8px; }
  /* Nummer, Titel und Text sind drei Ebenen, keine drei Geschwister:
     Nummer haengt am Titel, der Text steht ab. */
  .step { grid-template-columns: 1fr; gap: 0; }
  .step__n { margin-bottom: 4px; }
  .step p { margin-top: 12px; }
  .adv-row { grid-template-columns: 1fr; gap: 8px; }
  .adv-row p { margin-top: 2px; }
  .flds { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 40px); }
  /* Die Linkliste polstert sich ueber die 44-px-Tap-Targets bereits selbst;
     die volle Ueberschrift-Marge daraufgesetzt reisst die Gruppe auseinander. */
  .foot__k { margin-bottom: var(--dgfe-space-sm); }
  .trust { position: static; }
  .hero__media { margin-right: calc(-1 * var(--gut)); }
  /* Zwei Spalten Bildcluster ergaben bei 390 px drei 162-px-Briefmarken, auf
     denen von Walzwerk und Foerderband nichts mehr zu erkennen war. Einspaltig
     traegt jedes Foto die volle Satzbreite — und die Bildunterschrift auch. */
  .cluster { grid-template-columns: 1fr; }
  .cl-a { grid-row: auto; }
  .cl-a .ph { aspect-ratio: 4/3; min-height: 0; }

  /* Knoepfe stehen mobil ueber die volle Spalte. Zwei verschieden breite
     Knoepfe untereinander ergeben sonst eine ausgefranste rechte Kante. */
  .hero__act .btn, .foot__act .btn { flex: 1 1 100%; }
  p > .btn:only-child { display: flex; width: 100%; }
  /* Segmentreihen fuellen ihre Zeile aus, statt 1-2–1 auszufransen. */
  .segs:not(.segs--stack) .seg { flex: 1 1 auto; }
  .segs:not(.segs--stack) .seg span { justify-content: center; text-align: center; }

  /* Wizard: bei 390 px tragen die Punkte allein, der Name des Schritts
     wandert unter die Strecke. Sonst reisst die Zeile. */
  .wzt__t { display: none; }
  .wzt__idx { text-align: left; }
  .wzt__idxt { display: inline; }
  .wzt__b { gap: 0; padding: 4px 9px; }
  .way__in { grid-template-columns: 1fr; align-items: start; padding-left: 16px; }
  .way__k { padding-top: 0; }
  .way__meta { text-align: left; padding-top: 2px; }
  .way__pick { margin-top: 6px; }
  .rcpt__row { grid-template-columns: 1fr; gap: 4px; }
  .rcpt__k { padding-top: 0; }
  .wznote { flex-basis: 100%; text-align: left; }
  .wznav .btn { flex: 1 1 auto; }
  /* Die gelbe Kante des Zusatzblocks sass direkt neben der Achsen-Haarlinie
     und las sich als verdickte Achse. Ein Stueck Papier dazwischen. */
  .xtra { margin-left: 8px; padding-left: 12px; }
  .step { align-items: start; }
}

/* --- 23) Reduced Motion: alles sichtbar, ohne einen einzigen Scroll ------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Die Endzustaende der Bewegungsschicht stehen in deren eigenem
     `prefers-reduced-motion`-Block. Hier bleibt nur, was dieser Seite
     gehoert. */
  /* Keine Einfaerbung beim Scrollen. Die Bilder stehen grau, also im
     abgenommenen Ruhezustand der Seite: der eine Duotone-Grade ueber ALLE
     Fotos ist das staerkste Merkmal des Auftritts, und wer Bewegung
     abbestellt hat, bekommt ihn ungestoert. Es geht dabei nichts verloren
     — die Farbe traegt keine Information.
     Das Script schreibt `--gs` hier gar nicht erst; die Regeln sind das
     Sicherheitsnetz, falls doch ein Attribut stehen bleibt. */
  .ph--farbe img {
    filter: grayscale(1) contrast(1.17) brightness(1.06) !important;
  }
  .ph--farbe { background-color: var(--dgfe-navy-500) !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.foot__claim { margin-top: 4px; font-weight: 500; }
.foot__traeger { margin-top: 6px; font-size: var(--fs-2); opacity: .85; }


:root {
  /* --- Zeiten -------------------------------------------------------
     Kurz fuer alles, was auf eine Eingabe antwortet. Lang nur fuer die
     Spur, weil die eine Aufzeichnung ueber Zeit darstellt und sonst
     nicht als solche gelesen wird. */
  --b-antwort:   180ms;   /* Knopf, Feld, Reiter: sofort spuerbar          */
  --b-aufdecken: 420ms;   /* Text wird sichtbar                            */
  --b-ausziehen: 520ms;   /* Register faehrt heraus                        */
  --b-zaehlen:   900ms;   /* Anzeige laeuft auf ihren Wert                 */
  --b-aufziehen:1100ms;   /* Spur zeichnet sich                            */

  /* --- Kurven -------------------------------------------------------
     Geraete haben Traegheit und Daempfung, keine Gummibaender. Der
     Ueberschwinger im Bestand lag bei 44 %. Ein echter Zeiger schwingt
     einmal um wenige Prozent ueber und steht dann. */
  --b-ruhe:    cubic-bezier(.22, .61, .36, 1);    /* kommt an, keine Spitze */
  --b-zeiger:  cubic-bezier(.34, 1.06, .3,  1);   /* 6 % ueber, einmal      */
  --b-schiene: cubic-bezier(.16, .84, .28, 1);    /* Schublade auf Schiene  */
  --b-spur:    cubic-bezier(.42, 0,   .28, 1);    /* Schreiber, gleichmaessig */

  /* Wie weit ein Register herausfaehrt. Als Variable, weil es am Telefon
     weniger ist: dort ist der Weg kuerzer und die Geste kleiner. */
  --b-auszug: 14px;
}

@media (max-width: 767px) { :root { --b-auszug: 8px; } }


/* ===================================================================
   1 · AUFDECKEN
   Text wird sichtbar, ohne sich zu bewegen.

   Statt zu fahren, hebt sich der Text aus dem Hintergrund heraus: er
   kommt aus geringerem Kontrast auf vollen. Auf einem Blatt liest sich
   das wie Tinte, die anzieht. Es gibt keinen Umbruch, keine Verschiebung,
   nichts, was das Layout waehrend der Bewegung anfasst.

   `clip-path` statt `opacity` waere die Alternative, aber die schneidet
   Unterlaengen an, wenn die Zeilenhoehe eng ist. Farbe ist hier sauberer.
   =================================================================== */
[data-auf] {
  opacity: .001;
  transition: opacity var(--b-aufdecken) var(--b-ruhe) var(--b-halt, 0ms);
}
[data-auf].b-da { opacity: 1; }

/* Eine Gruppe deckt in Lesereihenfolge auf, aber deutlich enger gestaffelt
   als der Bestand (70 ms). 70 ms mal acht Elemente sind 560 ms, in denen
   die Seite fortlaufend zappelt. 34 ms halten die Gruppe als Gruppe
   zusammen und lesen sich als ein Vorgang, nicht als acht. */
[data-auf] { --b-halt: calc(var(--b-nr, 0) * 34ms); }


/* ===================================================================
   2 · AUFZIEHEN
   Eine Spur zeichnet sich, links nach rechts.

   Das ist das einzige Verhalten, das laenger als eine halbe Sekunde
   dauern darf, und es hat einen Grund: ein Lastgang IST eine Aufzeichnung
   ueber Zeit. Sich links nach rechts zu schreiben ist keine Verzierung,
   das ist die Sache selbst.

   `--b-laenge` setzt das Skript aus `getTotalLength()`, weil die echte
   Pfadlaenge nicht im Vorhinein bekannt ist.
   =================================================================== */
[data-spur] {
  stroke-dasharray: var(--b-laenge, 1000);
  stroke-dashoffset: var(--b-laenge, 1000);
  transition: stroke-dashoffset var(--b-aufziehen) var(--b-spur) var(--b-halt, 0ms);
}
[data-spur].b-da { stroke-dashoffset: 0; }

/* Eine Flaeche unter der Spur folgt ihr nach, nicht gleichzeitig: die
   Schraffur kommt erst, wenn die Spur ueber ihr steht. */
[data-flaeche] {
  opacity: .001;
  transition: opacity 520ms var(--b-ruhe) calc(var(--b-aufziehen) * .55);
}
[data-flaeche].b-da { opacity: 1; }

/* Marken auf der Spur (Spitze, Schwelle) erscheinen, nachdem die Spur
   dort vorbeigekommen ist. `--b-bei` ist der Anteil 0..1 der Spurlaenge,
   an dem die Marke sitzt. */
[data-marke] {
  opacity: .001;
  transition: opacity 260ms var(--b-ruhe)
              calc(var(--b-aufziehen) * var(--b-bei, .5) + 120ms);
}
[data-marke].b-da { opacity: 1; }


/* ===================================================================
   3 · ZAEHLEN
   Eine Anzeige laeuft auf ihren echten Wert und haelt.

   Das Zaehlen selbst macht das Skript. Hier steht nur, was waehrenddessen
   gilt: waehrend eine Anzeige laeuft, sitzt sie in Tabellenziffern, damit
   die Zeile nicht bei jedem Zwischenwert die Breite wechselt. Ohne das
   wackelt alles rechts daneben mit.
   =================================================================== */
[data-zaehl] { font-variant-numeric: tabular-nums; }

/* Waehrend des Laufs steht die Anzeige eine Spur zurueck und wird beim
   Erreichen des Werts voll. So ist sichtbar, wann sie steht. */
[data-zaehl].b-laeuft { opacity: .72; }
[data-zaehl] { transition: opacity 200ms var(--b-ruhe); }


/* ===================================================================
   4 · AUSZIEHEN
   Ein Register faehrt auf seiner Schiene heraus.

   Genau eine Achse. Kein Massstab, keine Deckkraft, keine Drehung. Eine
   Schublade laeuft in ihrer Fuehrung, sonst ist es keine Schublade.

   `translate` statt `transform`, damit es sich nicht mit einem
   `transform` schlaegt, das die Seite fuer die Anordnung schon nutzt.
   =================================================================== */
[data-auszug] {
  translate: 0 var(--b-auszug);
  opacity: .001;
  transition: translate var(--b-ausziehen) var(--b-schiene) var(--b-halt, 0ms),
              opacity   var(--b-ausziehen) var(--b-ruhe)    var(--b-halt, 0ms);
}
[data-auszug].b-da { translate: 0 0; opacity: 1; }

/* Waagerecht, fuer alles, was seitlich einsortiert ist: Kolonne rechts
   auf der Grossverbraucher-Seite, Maszregeln auf der KMU-Seite. */
[data-auszug="quer"]        { translate: calc(var(--b-auszug) * -1) 0; }
[data-auszug="quer"].b-da   { translate: 0 0; }


/* ===================================================================
   5 · QUITTIEREN
   Eine Lampe bestaetigt kurz und bleibt.

   Fuer Zustandswechsel, die der Nutzer ausgeloest hat: ein gewaehltes
   Paket, ein ausgefuelltes Pflichtfeld, ein Schritt im Formular. Der
   Zeiger ist das einzige, was hier ueberschwingen darf, und um 6 %.
   =================================================================== */
[data-quitt] {
  transition: background-color var(--b-antwort) var(--b-ruhe),
              border-color     var(--b-antwort) var(--b-ruhe),
              color            var(--b-antwort) var(--b-ruhe);
}
[data-quitt][aria-pressed="true"],
[data-quitt][aria-selected="true"],
[data-quitt]:has(:checked) { scale: 1; transition: scale 240ms var(--b-zeiger); }


/* ===================================================================
   BERUEHRUNG STATT ZEIGEN

   Zwei getrennte Sachen, die oft verwechselt werden:

   a) Hover-Stile gehoeren in @media (hover: hover). Sonst wendet ein
      Telefon sie beim Antippen an und laesst sie haengen. Das steht in
      den Seitendateien, weil dort die Selektoren stehen.

   b) Wo Hover Inhalt zeigt, der sonst nicht da ist, braucht Beruehrung
      einen eigenen Weg. Hier ist er: auf Zeigegeraeten deckt Hover auf,
      auf Beruehrgeraeten ist es von vornherein da. Nicht als Notloesung,
      sondern weil auf einem Telefon ohnehin ein Element im Bild steht und
      nicht zwoelf, es also Platz hat.
   =================================================================== */
@media (hover: hover) and (pointer: fine) {
  [data-zeigt] { opacity: .001; transition: opacity var(--b-antwort) var(--b-ruhe); }
  :is(:hover, :focus-within) > [data-zeigt],
  [data-zeigt]:is(:hover, :focus-within) { opacity: 1; }
}
@media not all and (hover: hover) {
  /* Beruehrung: der Inhalt steht. Kein Antippen noetig, kein haengender
     Zustand moeglich. */
  [data-zeigt] { opacity: 1; }
}

/* Die Instrumente, die vorher unter 1024 bzw. 767 px verschwunden sind,
   kommen zurueck. Nicht in ihrer breiten Form: die Anzeige setzt sich
   unter die Grafik und wird einzeilig, die Achsenbeschriftung wird kurz.
   Vorhandensein ist die Parität, nicht die Anordnung. */
@media (max-width: 1023px) {
  .readout {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    margin-top: .75rem; padding-top: .625rem;
    border-top: 1px solid var(--b-linie, rgba(28,36,75,.14));
    position: static; inset: auto; width: 100%;
  }
  .readout > * { flex: 0 0 auto; }
}


/* ===================================================================
   REDUZIERTE BEWEGUNG

   Nicht "kuerzer", sondern aus. Wer das einstellt, hat oft einen
   vestibulaeren Grund, und eine schnelle Bewegung ist dann nicht besser
   als eine langsame.

   Wichtig: alles muss im Endzustand stehen. Ein Element, das seinen
   Endzustand ueber eine Klasse bekommt, die das Skript setzt, waere sonst
   dauerhaft unsichtbar. Deshalb hier ohne Klasse auf sichtbar.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-auf], [data-auszug], [data-flaeche], [data-marke], [data-zeigt] {
    opacity: 1 !important; translate: none !important;
  }
  [data-spur] { stroke-dashoffset: 0 !important; }
  [data-auf], [data-auszug], [data-flaeche], [data-marke],
  [data-spur], [data-quitt], [data-zaehl] {
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
}

/* Der GSP-Eintrag ist kein Link, solange die Seite Entwurf ist. Er
   sieht aus wie einer, damit die Liste nicht auseinanderfaellt, ist
   aber nicht anklickbar und nicht fokussierbar. Zum Freischalten:
   wieder <a href="/gsp-energie/"> daraus machen. */
.nav__pmv { display: flex; align-items: center;
            justify-content: space-between; gap: .75rem;
            opacity: .62; cursor: default; }

/* Die Wortmarke wird nicht grossgeschaltet.
   .cond, .eyebrow und .dsp setzen Versalien; darin wuerde aus DGfE
   ein DGFE, und das kleine f gehoert zum "fuer". Ein Markenname
   traegt seine Schreibweise auch in einer Versalzeile. */
.wm { text-transform: none; }