/* ===========================================================================
   ROUTE A · UNTERSEITE ENERGIEBESCHAFFUNG
   ---------------------------------------------------------------------------
   Gleiches System wie die Startseite, eigenes Repertoire.

   IDENTISCH: Tokens, Archivo/Poppins-Paarung, Typo-Skala, Abstandsskala, der
   EINE Duotone-Grade ueber allen Fotos, Header, Footer, Knoepfe, Haltung
   (still ueberall, laut an genau einer Stelle), Gelb als Linie/Kante/Punkt und
   genau EINE Flaeche.

   ANDERS — und zwar Bauteil fuer Bauteil:

   1) RUECKGRAT. Die Startseite hat eine linke Messachse mit Indexzahlen. Die
      gibt es hier NICHT. Die Seite ist ein durchlaufendes KONDITIONENBLATT:
      eine harte senkrechte Naht teilt jede Sektion in Marginalspalte und
      Satzspiegel. In der Naht liegt das Rueckgrat dieser Seite, die
      SAMMELSCHIENE (.bb) — sieben Zulaeufe (Abnahmestellen), die ueber zwei
      Sektionen zu EINER gelben Sammelleitung zusammenlaufen und ab da als eine
      Linie bis zum Blattende durchgehen.

   2) SIGNATURE. Der Gedanke der Seite ist Buendelung, also ZUSAMMENLAUFEN, kein
      Fallen. Er traegt hier zweifach: leise als Sammelschiene ueber die halbe
      Seitenlaenge, laut als sein Ergebnis — DIE PREISTREPPE (.staffel) im
      Rechner. Die Treppe ist keine Illustration: ihre vier Stufen sind die vier
      Verbrauchsklassen der bestehenden Preistabelle MARKT, in ct/kWh, live.

   3) SEKTIONSRHYTHMUS. Kein Wechsel von Vollbreitbaendern. Ein durchgehender
      heller Satzspiegel, unterbrochen von genau ZWEI Navy-Bloecken (Rechner,
      Abschluss) und einem vollbreiten Bildstreifen.

   4) BAUTEIL-VOKABULAR aus dem Energieeinkauf statt aus der Messtechnik:
      Blattkopf (.dochd) · Tarifzeilen mit Fuehrungspunkten (.pos) ·
      Konditionenblatt (.kb) · Preistreppe (.staffel) · Fristenleiste (.frist) ·
      Blattfuss (.docft). Weg sind: Messachse, Messbaender, Messpunkte,
      Kennzahlen-Tafel, 01/02/03-Liste.

   5) DER RECHNER ist der Hoehepunkt: eigener vollbreiter Navy-Block mit gelber
      Blattkante, Formular und Ablesetafel nebeneinander, darunter die Treppe
      ueber die volle Breite.

   Rechenlogik und Preistabelle sind UNVERAENDERT (siehe Kommentar am Script).
   =========================================================================== */

/* --- 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 — Farben, Typo-Rollen, Abstaende, Kurven ----------
   Zeichengleich zur Startseite. Nur --axis (die Messachse) faellt weg und
   wird durch --marg / --seam ersetzt: die beiden Masse des Konditionenblatts.
   ------------------------------------------------------------------------ */
:root {
  --paper:    #ffffff;
  --paper-2:  color-mix(in srgb, var(--dgfe-navy-50) 62%, white);

  --ink:        var(--dgfe-navy-400);   /* 9,9:1  AAA */
  --ink-strong: var(--dgfe-navy-500);
  --ink-quiet:  var(--dgfe-navy-300);   /* 5,54:1 AA, nur Randnotizen */
  --ink-accent: var(--dgfe-yellow-800); /* 5,73:1 — der einzige gelbe Text auf Weiss */

  --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);

  --page:  1560px;
  --gut:   clamp(16px, 3.2vw, 52px);
  --marg:  clamp(0px, 13.5vw, 194px);   /* Marginalspalte des Konditionenblatts */
  --seam:  clamp(0px, 8vw, 116px);      /* die Naht — hier liegt die Sammelschiene */
  /* Luft zwischen einer senkrechten Linie und dem Satz daneben. 24 px am
     Desktop, 16 px mobil; beide aus der Abstandsskala des Design-Systems
     (--dgfe-space-lg / --dgfe-space-md), kein frei gegriffener Wert.
     Die Naht selbst braucht das nicht — die Sammelschiene laeuft in ihrer
     Mitte und hat zum Satzspiegel ohnehin 36-58 px. */
  --rulegap: var(--dgfe-space-lg);
  --colgap: clamp(14px, 1.6vw, 26px);
  --header-h: 68px;
  --header-h-sm: 54px;
  /* Dieselbe Formel wie auf den Schwesterseiten. Der alte Wert
     calc(var(--gut) + 9vw) war um 9vw zu gross; die Klasse .bleed wird in
     dieser Datei zwar nirgends benutzt, der Fehler lag aber scharf. */
  --bleed: max(var(--gut), calc((100vw - var(--page)) / 2));

  --secY:    clamp(50px, 5.6vw, 86px);
  --secY-lg: clamp(64px, 7.2vw, 108px);
  --secY-sm: clamp(30px, 3.2vw, 46px);

  --e-draw:  cubic-bezier(.19,.72,.14,1);
  --e-rise:  cubic-bezier(.16,1,.3,1);
  --e-shut:  cubic-bezier(.58,.02,.28,1);
  /* Die vierte Kurve, `--e-point: cubic-bezier(.32,1.44,.52,1)`, ist am
     2026-08-06 entfallen: 44 % Ueberschwinger sind ein Gummiband, und auf
     einem Preisblatt ist das das falsche Register. Die Bewegungsschicht
     bringt dafuer `--b-zeiger` mit 6 % mit. */
  --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); }

/* Gelb allein hat auf Weiss 1,33:1 und traegt als Fokus-Anzeige nicht
   (WCAG 1.4.11 verlangt 3:1 gegen den Nachbargrund). Der Ring bleibt gelb —
   die Marke —, bekommt aber aussen einen dunklen Saum. */
:focus-visible {
  outline: 2px solid var(--dgfe-color-focus-ring);
  outline-offset: 2px; border-radius: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dgfe-navy-500) 62%, transparent);
}
.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;
  min-height: 44px; display: inline-flex; align-items: center;
}
.skip:focus { transform: translateY(0); }
.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 — Archivo an zwei Breiten, Poppins im Satz ------------- */
/* Line-Height 1.0 statt .96: bei .96 stiess die Trema von Ü/Ä/Ö in die
   Grundlinie der Zeile darueber — sichtbar in "FÜR IHREN" und "PRÜFUNG
   KOSTET SIE GELD.". Deutsche Versalien brauchen den Durchschuss. */
.dsp {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 116, "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--ink-strong);
}
/* Negative Laufweite waechst mit dem Grad und laeuft unter ~40px gegen 0 —
   fest -.026em waere bei 27px (Mobil-Groesse der H1) deutlich zu eng. */
.h1 { font-size: var(--fs-10); letter-spacing: clamp(-1.83px, 1.18px - .218vw, 0px); }
.h2 { font-size: var(--fs-9);  letter-spacing: clamp(-1px, .84px - .125vw, 0px); }
.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;
}
.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: .16em; letter-spacing: .04em; }

.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; }
.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); }

.hd { margin-bottom: clamp(14px, 1.5vw, 22px); }
.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); }

.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) DAS RUECKGRAT: das durchlaufende Konditionenblatt -----------------
   Kein Achsen-Raster, sondern ein Blatt mit fester Naht. Jede Sektion ist
   dreispaltig: Marginalspalte (rechtsbuendig, ruhig) | Naht | Satzspiegel.
   Die Ueberschrift beginnt IMMER hinter der Naht, das Kuerzel steht IMMER
   davor. Diese Kante ist die Ordnung der Seite.
   ------------------------------------------------------------------------ */
.sec { position: relative; }
.sec--paper  { background: var(--paper);   --wipe-bg: var(--paper); }
.sec--paper2 { background: var(--paper-2); --wipe-bg: var(--paper-2); }
.sec--navy   { background: var(--dgfe-navy-500); --wipe-bg: var(--dgfe-navy-500); }

.sheet { width: min(var(--page), 100% - 2 * var(--gut)); margin-inline: auto; }

.led {
  position: relative;
  display: grid;
  grid-template-columns: var(--marg) var(--seam) minmax(0, 1fr);
  column-gap: 0;
  row-gap: clamp(28px, 3.4vw, 54px);
  padding-block: var(--secY);
}
.sec--tall .led { padding-block: var(--secY-lg); }
.led__m { grid-column: 1; text-align: right; padding-right: clamp(10px, 1.2vw, 20px); min-width: 0; }
.led__b { grid-column: 3; min-width: 0; }
.led__w { grid-column: 1 / -1; min-width: 0; }   /* bricht ueber die Naht */

/* Die Marginalspalte traegt nur Kuerzel und Randnotiz — sie ist Rand, kein
   zweiter Satzspiegel. Deshalb rechtsbuendig und klein. */
.mnote { display: block; margin-top: 12px; font-size: var(--fs-2); letter-spacing: .13em;
         line-height: 1.6; color: var(--ink-quiet); }
.on-navy .mnote { color: var(--ink-n-quiet); }

/* Zwoelfer-Raster fuer den Satzspiegel */
.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} .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}
.bleed { margin-right: calc(-1 * var(--bleed)); }

/* --- 6) DIE SAMMELSCHIENE — Signature, leise Fassung ---------------------
   Sieben Zulaeufe (Abnahmestellen) laufen ueber zwei Sektionen zu EINER
   Leitung zusammen. Ab dem Sammelpunkt ist die Leitung gelb und geht als
   einzelne Linie bis zum Blattende durch. Reine Dekoration, aria-hidden,
   unter 900 px ausgeblendet — es geht dabei kein Inhalt verloren.
   ------------------------------------------------------------------------ */
.bb {
  position: absolute; top: 0; bottom: 0;
  left: var(--marg); width: var(--seam);
  pointer-events: none; overflow: hidden;
}
.bb svg { display: block; width: 100%; height: 100%; }
.bb__l { fill: none; stroke: color-mix(in srgb, var(--dgfe-navy-500) 46%, transparent); stroke-width: 1; }
/* Ab dem Sammelpunkt ist es EINE Leitung — und die bleibt gelb bis zum
   Blattende. Das ist die einzige durchgehende Linie der Seite. */
.bb__t { fill: none; stroke: var(--dgfe-yellow-600); stroke-width: 2.2; stroke-linecap: square; }
/* Zentriert ueber `margin`, nicht ueber `translate`: der Sammelpunkt traegt
   `data-marke`, und der `prefers-reduced-motion`-Block der Bewegungsschicht
   setzt `translate: none`. Mit `translate` als Positionierung saesse die
   Marke dann um ihren halben Durchmesser daneben. */
.bb__d { position: absolute; top: 0; width: 6px; height: 6px; border-radius: 50%;
         background: color-mix(in srgb, var(--dgfe-navy-500) 62%, transparent);
         margin: -3px 0 0 -3px; }
.bb__j { position: absolute; left: 50%; top: 62%; width: 12px; height: 12px; border-radius: 50%;
         background: var(--dgfe-yellow-500); margin: -6px 0 0 -6px;
         box-shadow: 0 0 0 4px color-mix(in srgb, var(--dgfe-navy-500) 16%, transparent); }
/* Blattende: die Sammelleitung laeuft nicht ins Nichts, sie wird abgesetzt. */
.bb__end { position: absolute; left: 50%; bottom: 0; width: 22px; height: 2px;
           background: var(--dgfe-yellow-600); translate: -50% 0; }
/* Blende: als Vorgabe OFFEN. Nur wenn Bewegung laeuft, wird sie zugezogen und
   von .is-in wieder aufgezogen. Andersherum bliebe die Sammelschiene ohne
   Bewegung fuer immer verdeckt. */
.bb__wipe { position: absolute; inset: 0; background: var(--wipe-bg); transform: translateY(-101%); }

/* --- 7) Bildgradation — EIN Grade ueber alle Fotos, wie auf der Startseite */
.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--21x9 { aspect-ratio: 21/9; }
.ph__shut {
  position: absolute; inset: 0; z-index: 3; background: var(--wipe-bg);
  transform: translateY(-101%); pointer-events: none;
}

/* --- 8) Knoepfe — zeichengleich zur Startseite ---------------------------- */
.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 Fokusteil bleibt deshalb ausserhalb der Klammer. */
.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); } }
.btn--primary { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500);
                border-color: var(--dgfe-yellow-500); --sweep: #fff; }
.btn--blue    { background: var(--dgfe-blue-500); color: #fff;
                --sweep: var(--dgfe-navy-500); }
.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);
}
.btn--w  { width: 100%; }

/* --- 9) Header — zeichengleich zur Startseite ----------------------------- */
.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; }
.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 „Arbeitspreis-Index" wird „Index". Gekuerzt statt geloescht. */
.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; }
/* Vier Vorschauen plus Knopf brauchen mehr Platz als drei — die Luft
   zwischen den Punkten wird enger, der Umbruchpunkt weiter oben (s. u.). */
.nav { display: flex; align-items: center; gap: clamp(10px, 1.3vw, 26px); }
.nav a {
  position: relative;
  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);
}
/* Aktive Seite. Gelb allein traegt die Markierung nicht: gegen den hellen
   Headergrund sind es 1,33:1, WCAG 1.4.11 verlangt 3:1. Wie beim Fokusring
   bekommt die Marke deshalb einen Navy-Saum darunter (14,96:1) — und dazu
   Schriftschnitt statt nur Farbe, damit die Angabe nicht allein am Ton haengt. */
.nav a[aria-current="page"] { font-weight: 500; border-bottom-color: var(--dgfe-yellow-500); }
/* -4px, nicht -2px: `bottom` misst ab der Polsterkante, der 2-px-Rahmen liegt
   davor. Bei -2px deckte der Navy-Saum den gelben Balken exakt zu und von der
   Marke blieb nichts uebrig — der Saum gehoert DARUNTER. */
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--dgfe-navy-500);
}
/* --- Partner-Aufklapper ---------------------------------------------------
   Die Partnerseiten sind keine weiteren DGfE-Angebote: eigene Gruppe hinter
   einer Haarlinie, eine Stufe leiser.

   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. Schmal faellt der Knopf 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(0px, .5vw, 10px);
                padding-left: clamp(10px, 1.3vw, 22px);
                border-left: 1px solid var(--rule); }
.nav__pk { display: none; }
.nav__pb {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 2px; margin: 0;
  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(10px, 1.3vw, 22px); 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); }
}
.nav .btn { border-bottom-width: 1px; }
.nav-toggle { display: none; }

/* --- 10) BLATTKOPF und BLATTFUSS -----------------------------------------
   Der Blattkopf ist die einzige Navy-Flaeche im oberen Drittel: ein
   vollbreiter Streifen, wie der Kopf eines Preisblatts. Er ersetzt den
   Navy-Hero mit Foto rechts.
   ------------------------------------------------------------------------ */
.dochd { background: var(--dgfe-navy-500); margin-top: var(--header-h); }
.dochd__in {
  width: min(var(--page), 100% - 2 * var(--gut)); margin-inline: auto;
  min-height: 46px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-block: 12px;
  font-size: var(--fs-2); letter-spacing: .18em;
}
.dochd__l { color: var(--dgfe-yellow-500); }
.dochd__r { color: var(--ink-n-quiet); }
.docft {
  margin-top: clamp(30px, 3.6vw, 52px); padding-top: 14px;
  border-top: 1px solid var(--rule-n2);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-n-quiet);
}
.docft b { color: var(--dgfe-yellow-500); font-weight: inherit; }

/* --- 11) HERO — Deckblatt statt Navy-Hero --------------------------------- */
.hero .led { padding-block: clamp(40px, 5vw, 78px) clamp(34px, 4vw, 60px); }
.hero .h1 { max-width: 21ch; }
.hero__lead { margin-top: clamp(18px, 2vw, 30px); max-width: 50ch; }
.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);
  font-size: var(--fs-2); letter-spacing: .12em; color: var(--ink-quiet);
}
.hero__meta b { color: var(--ink-accent); font-weight: inherit; }

/* --- 12) TARIFZEILEN — Positionen mit Fuehrungspunkten -------------------
   Ersetzt die Haarlinien-Tafel mit drei Kennzahlen unter dem Hero. Gleiche
   Aussagen, Form aus dem Preisblatt: Bezeichnung links, Fuehrungspunkte,
   Wert rechts, Erlaeuterung darunter.
   ------------------------------------------------------------------------ */
.pos { border-top: 2px solid var(--dgfe-navy-500); }
.pos__i { padding-block: clamp(16px, 1.9vw, 26px); border-bottom: 1px solid var(--rule); }
.pos__ln { display: flex; align-items: baseline; gap: 0; }
.pos__k { font-family: var(--ff-dsp); font-variation-settings: "wdth" 74, "wght" 600;
          font-weight: 600; font-size: var(--fs-2); letter-spacing: .13em;
          text-transform: uppercase; color: var(--ink-strong); white-space: nowrap; }
.pos__d { flex: 1 1 auto; min-width: 18px; margin: 0 12px;
          border-bottom: 1px dotted var(--rule-2); translate: 0 -.28em; }
.pos__v { font-size: var(--fs-8); color: var(--ink-strong); white-space: nowrap; }
.pos__n { display: block; margin-top: 8px; font-size: var(--fs-2); line-height: 1.5;
          color: var(--ink-quiet); max-width: 64ch; }

/* --- 13) BILDSTREIFEN — vollbreit, statt Foto im Hero --------------------- */
.band { position: relative; }
/* Oben eng (die Unterschrift gehoert zum Bild), unten Luft bis zum
   Sektionswechsel — vorher sass die letzte Zeile auf der Naht. */
.band__cap { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
             padding-top: 10px; padding-bottom: clamp(18px, 2vw, 28px); }
.band__cap .cap { margin-top: 0; }

/* --- 14) KONDITIONENBLATT — Gegenueberstellung ---------------------------
   Kriterium rechtsbuendig gegen eine gepunktete Kante, dann die beiden
   Spalten. Die Spalte "Mit Einkaufsgemeinschaft" steht auf getoentem Grund
   und traegt die einzige durchgehende gelbe Kante der Seite.
   ------------------------------------------------------------------------ */
/* Unten geschlossen wie .pos und .zl — das Blatt hoerte vorher als einziges
   seiner drei Listen ohne Abschlusslinie auf. */
.kb { border-top: 2px solid var(--dgfe-navy-500); border-bottom: 1px solid var(--rule-2); }
.kb__hd, .kb__row { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr) minmax(0,1.15fr); }
.kb__hd { border-bottom: 1px solid var(--rule-2); }
.kb__hd > * { padding: 12px var(--rulegap); font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.kb__row > * { padding: clamp(14px, 1.7vw, 22px) var(--rulegap); font-size: var(--fs-3); line-height: 1.45; }
.kb__row + .kb__row .kb__k, .kb__row + .kb__row .kb__a { border-top: 1px solid var(--rule); }
.kb__row + .kb__row .kb__b { border-top: 1px solid color-mix(in srgb, var(--dgfe-navy-500) 12%, transparent); }
.kb__k { font-family: var(--ff-dsp); font-variation-settings: "wdth" 76, "wght" 600;
         font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
         font-size: var(--fs-2) !important; color: var(--ink-strong);
         text-align: right; border-right: 1px dotted var(--rule-2); }
.kb__hd .kb__k { text-align: right; border-right: 1px dotted var(--rule-2); }
.kb__a { color: var(--ink-quiet); }
.kb__b { border-left: 3px solid var(--dgfe-yellow-500); background: var(--paper-2);
         color: var(--ink-strong); font-weight: 400; }
.kb__hd .kb__b { color: var(--ink-strong); }
.sec--paper2 .kb__b { background: var(--paper); }

/* --- 15) EINSPARRECHNER — die laute Stelle der Seite ---------------------
   Eigener vollbreiter Navy-Block mit gelber Blattkante oben. Formular und
   Ablesetafel nebeneinander, darunter die Preistreppe ueber die volle
   Breite.
   ------------------------------------------------------------------------ */
.calcsec { border-top: 3px solid var(--dgfe-yellow-500); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: clamp(28px, 3.4vw, 58px); align-items: start; }

.micro { display: block; margin-top: 8px; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-quiet); }
.on-navy .micro { color: var(--ink-n-quiet); }
/* Live-Anzeige: die Ziffern duerfen beim Tippen nicht zappeln. */
.micro--live { color: var(--dgfe-yellow-500); font-variant-numeric: tabular-nums; }

.fs { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.fs__lg { display: flex; align-items: baseline; gap: 12px; width: 100%;
          padding-bottom: 12px; margin-bottom: clamp(18px, 2vw, 26px);
          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); }
/* fieldset ohne UA-Rahmen — sonst zeichnet der Browser einen Kasten um jede
   Radiogruppe, der mit nichts auf der Seite zu tun hat. */
fieldset.fld { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.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; }
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);
}
@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;
}
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; }
.unit { position: relative; }
.unit input { padding-right: 84px; }
.unit > span { position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 74, "wght" 600;
  font-size: var(--fs-2); letter-spacing: .11em; text-transform: uppercase; color: var(--dgfe-neutral-600);  /* war navy-300 = 2,7:1 bei 10px, unter AA */ }

.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { position: relative; flex: 1 1 120px; }
.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; justify-content: center; min-height: 48px; 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); }
/* Auf hellem Grund braucht der gelbe Ring seinen Navy-Saum (1,33:1 allein).
   Auf Navy traegt Gelb mit 11,29:1 von selbst — dort faellt der Saum weg. */
.seg input:focus-visible + span { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dgfe-navy-500) 62%, transparent); }
.on-navy .seg input:focus-visible + span { box-shadow: none; }

/* Formular-Beschriftungen auf Navy. Muss NACH den Basisregeln stehen:
   `.fld > .fld__l` und `.on-navy .fld__l` sind spezifitaetsgleich (0,2,0),
   sonst gewinnt die Basisregel und die Legende steht Navy auf Navy. */
.on-navy .fs__lg { color: #fff; border-bottom-color: var(--rule-n2); }
.on-navy .fs__n  { color: var(--dgfe-yellow-500); }
.on-navy .fld > label, .on-navy .fld > .fld__l { color: #fff; }
/* Auf Navy waere die Navy-Kante des gewaehlten Schalters unsichtbar — dort
   uebernimmt Gelb als Kante. */
.on-navy .seg input:checked + span { border-color: var(--dgfe-yellow-500); }

/* Ablesetafel */
.rdg { border: 1px solid var(--rule-n2); background: var(--dgfe-navy-600); }
.rdg__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); }
.rdg__hd em { font-style: normal; color: var(--ink-n-quiet); }
.rdg__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 10px clamp(14px, 2vw, 30px); padding: clamp(14px, 1.7vw, 20px) clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--rule-n); }
.rdg__row:first-of-type { border-top: 0; }
.rdg__k { font-size: var(--fs-2); letter-spacing: .15em; color: var(--ink-n-muted); }
.rdg__v { font-size: var(--fs-6); color: #fff; }

/* DIE eine gelbe Flaeche der Seite: das Ergebnis des Rechners. */
.ysave { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500);
         padding: clamp(20px, 2.4vw, 32px) clamp(14px, 1.6vw, 22px); }
.ysave__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-navy-500); }
.ysave__v { display: block; margin-top: 12px; font-size: var(--fs-9); color: var(--dgfe-navy-500); }
.ysave__n { display: block; margin-top: 12px; font-size: var(--fs-2); line-height: 1.45;
            font-variant-numeric: tabular-nums;
            color: color-mix(in srgb, var(--dgfe-navy-500) 82%, var(--dgfe-yellow-500)); }
.rdg__foot { padding: clamp(16px, 1.8vw, 22px) clamp(14px, 1.6vw, 22px); border-top: 1px solid var(--rule-n); }

/* --- 16) DIE PREISTREPPE — Signature, laute Fassung ----------------------
   Vier Stufen = die vier Verbrauchsklassen der bestehenden Preistabelle,
   in ct/kWh auf fester Skala 0-40. Darauf: die Linie des eigenen
   Arbeitspreises, die gelbe Linie "mit DGfE-Konditionen" und die Massline
   dazwischen. Alles bewegt sich ausschliesslich per transform.
   ------------------------------------------------------------------------ */
.staffel { border: 1px solid var(--rule-n); background: var(--dgfe-navy-600); }
.staffel__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-n);
  font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); }
.staffel__hd em { font-style: normal; color: var(--ink-n-quiet); }
.staffel__body { padding: clamp(18px, 2.2vw, 30px) clamp(14px, 1.6vw, 24px); }
.st { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 10px; }

/* Alle Beschriftungen der Treppe wachsen mit der Diagrammbreite. Vorher
   standen 8- und 9-px-Labels unter einem 1235 px breiten Diagramm — und auf
   dem Telefon 7 px an der Klassenachse. */
.st__y { display: flex; flex-direction: column; justify-content: space-between;
         text-align: right; font-size: var(--fs-2);
         letter-spacing: .1em; color: var(--ink-n-quiet); }
.st__y span { translate: 0 -.4em; }
.st__y span:last-child { translate: 0 .4em; }

.st__track { position: relative; height: clamp(232px, 26vw, 350px);
             background: var(--dgfe-navy-700);
             border: 1px solid var(--rule-n); overflow: hidden; }
.st__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.st__col { position: relative; }
/* Eine Stufe: volle Trackhoehe, per translateY nach unten geschoben. Die
   Trittkante ist die obere Kante des Elements — deshalb wandert sie mit,
   ohne dass je eine Hoehe animiert wird. Die rechte Kante ist die Setzstufe:
   sie beginnt automatisch dort, wo die Trittkante liegt. */
.stp { position: absolute; inset: 0;
       border-top: 3px solid var(--dgfe-blue-300);
       border-right: 1px solid color-mix(in srgb, var(--dgfe-blue-300) 50%, transparent);
       background: color-mix(in srgb, var(--dgfe-blue-300) 20%, transparent);
       transform: translateY(calc((100 - var(--p, 0)) * 1%));
       transition: transform 560ms var(--e-draw); }
.st__col:last-child .stp { border-right: 0; }
.stp__v { position: absolute; left: 0; right: 0; top: 9px; text-align: center;
          font-family: var(--ff-dsp); font-variation-settings: "wdth" 88, "wght" 700;
          font-size: var(--fs-3);
          letter-spacing: .02em; color: #fff;
          font-variant-numeric: tabular-nums; }
.st__col.is-on .stp { background: color-mix(in srgb, var(--dgfe-yellow-500) 16%, transparent);
                      border-top-color: var(--dgfe-yellow-200); }
.st__col.is-on { background: color-mix(in srgb, white 4%, transparent); }

/* Vollbahn-Overlays: alles sitzt an top:0 und wird als Ganzes verschoben. */
.st__ov { position: absolute; inset: 0; pointer-events: none;
          transform: translateY(calc((100 - var(--p, 0)) * 1%));
          transition: transform 560ms var(--e-draw); }
.st__ln { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.st__ln--now  { border-top: 1px dashed color-mix(in srgb, white 62%, var(--dgfe-navy-500)); }
.st__ln--dgfe { border-top: 2px solid var(--dgfe-yellow-500); }
.st__tag { position: absolute; right: 0; top: 0; translate: 0 -100%;
           padding: 3px 7px; font-family: var(--ff-dsp);
           font-variation-settings: "wdth" 70, "wght" 600;
           font-size: var(--fs-2);
           letter-spacing: .12em; text-transform: uppercase;
           white-space: nowrap; }
/* Liegt die Linie oben am Skalenende, klappt ihre Beschriftung nach unten —
   sonst schnitte der Rahmen sie ab. */
.st__ov.is-top .st__tag { translate: 0 0; }
.st__ln--now .st__tag  { color: var(--ink-n-muted); }
.st__ln--dgfe .st__tag { color: var(--dgfe-navy-500); background: var(--dgfe-yellow-500); translate: 0 -100%; }

/* Massline zwischen den beiden Linien: volle Bahn, oben verankert, in der
   Hoehe skaliert — reine transform-Kette. Sie steht links von den beiden
   Beschriftungen, damit sich nichts ueberlagert. */
.st__dim { position: absolute; top: 0; bottom: 0; right: 23%; width: 1px;
           background: var(--dgfe-yellow-500); transform-origin: top center;
           transform: translateY(calc((100 - var(--p, 0)) * 1%)) scaleY(var(--h, 0));
           transition: transform 560ms var(--e-draw); }
.st__delta { position: absolute; inset: 0; pointer-events: none;
             transform: translateY(calc((100 - var(--p, 0)) * 1%));
             transition: transform 560ms var(--e-draw); }
.st__delta b { position: absolute; right: calc(23% + 11px); top: 0; translate: 0 -50%;
               font-family: var(--ff-dsp); font-variation-settings: "wdth" 84, "wght" 700;
               font-size: var(--fs-2);
               letter-spacing: .04em; color: var(--dgfe-yellow-500);
               font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Klassen-Cursor: volle Bahn, um X % der eigenen Breite verschoben. */
.st__cur { position: absolute; inset: 0; pointer-events: none;
           transform: translateX(var(--x, 0%));
           transition: transform 560ms var(--e-draw); }
.st__cur::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
                   background: color-mix(in srgb, white 52%, transparent); }
.st__cur i { position: absolute; left: 0; bottom: 0; width: 11px; height: 11px;
             margin: 0 0 -1px -5.5px; border-radius: 50%; background: #fff;
             box-shadow: 0 0 0 4px color-mix(in srgb, var(--dgfe-navy-900) 55%, transparent); }

.st__x { grid-column: 2; display: grid; grid-template-columns: repeat(4, 1fr);
         margin-top: 10px; }
.st__x span { text-align: center; padding: 0 4px;
              font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
              font-size: var(--fs-2);
              letter-spacing: .06em; line-height: 1.35; text-transform: uppercase;
              color: var(--ink-n-quiet); font-variant-numeric: tabular-nums;
              transition: color var(--t-ui) var(--e-shut); }
.st__x span.is-on { color: #fff; }
.st__lg { grid-column: 2; margin-top: clamp(14px, 1.4vw, 20px); display: flex; flex-wrap: wrap; gap: 8px 22px;
          font-size: var(--fs-2); letter-spacing: .1em; color: var(--ink-n-quiet); }
.st__lg b { display: inline-block; width: 16px; height: 0; margin-right: 8px;
            translate: 0 -.28em; }
.st__lg .k1 { border-top: 2px solid var(--dgfe-blue-300); }
.st__lg .k2 { border-top: 1px dashed color-mix(in srgb, white 62%, var(--dgfe-navy-500)); }
.st__lg .k3 { border-top: 2px solid var(--dgfe-yellow-500); }

.cnote { margin-top: clamp(20px, 2.2vw, 28px); font-size: var(--fs-2); line-height: 1.55;
         max-width: 92ch; color: var(--ink-n-quiet); }

/* --- 17) ZWEI WEGE — versetzte Halbbreiten -------------------------------- */
.path { display: flex; flex-direction: column; }
.path--drop { margin-top: clamp(0px, 6vw, 92px); }
.path__hd { border-top: 3px solid var(--dgfe-navy-500); padding-top: clamp(16px, 1.8vw, 24px); margin-top: clamp(14px, 1.6vw, 20px); }
.path__t { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.path__r { display: inline-block; margin-top: 10px; padding-left: var(--dgfe-space-md);
           border-left: 3px solid var(--dgfe-yellow-500);
           font-size: var(--fs-2); letter-spacing: .13em; color: var(--ink-strong); }
.path h3 { margin-top: clamp(14px, 1.6vw, 20px); }
.path p { margin-top: 12px; font-size: var(--fs-3); flex: 1 1 auto; }
.path .btn { margin-top: clamp(20px, 2.2vw, 28px); align-self: flex-start; }

/* --- 18) GRUENDE — Positionszeilen im Konditionenblatt -------------------- */
.adv-lead .h3 { font-size: var(--fs-5); line-height: 1.1; }
.adv-lead .h3 .num { display: block; font-size: var(--fs-10);
                     color: var(--ink-strong); margin-bottom: .1em; }
.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); max-width: 46ch; }
.zl { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
      gap: 10px clamp(16px, 2.4vw, 40px);
      padding-block: clamp(18px, 2vw, 26px); border-top: 1px solid var(--rule); }
.zl:last-child { border-bottom: 1px solid var(--rule); }
/* Das Padding ist nicht kosmetisch: ohne es endete die rechtsbuendige
   Bezeichnung exakt auf der gepunkteten Kante (0px Abstand), weil die Kante
   als border-left des Absatzes genau auf der Spaltengrenze sitzt. Gleicher
   Wert wie im Konditionenblatt, damit beide Listen dieselbe Kante fuehren. */
.zl > .h3 { text-align: right; padding-right: var(--rulegap); }
.zl p { font-size: var(--fs-3); max-width: 78ch; padding-left: clamp(16px, 2.4vw, 40px);
        border-left: 1px dotted var(--rule-2); margin-left: calc(-1 * clamp(16px, 2.4vw, 40px)); }

/* --- 19) FRISTENLEISTE — ersetzt die 01/02/03-Liste ----------------------
   Die Reihenfolge steckt in der Lage auf der Leiste, nicht in einer Ziffer.
   Die Fristen sind der vorhandene Text.
   ------------------------------------------------------------------------ */
.frist { --fgap: clamp(16px, 2.4vw, 44px);
         display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--fgap); }
.frist__i { position: relative; padding-top: 34px; min-width: 0; }
.frist__i::before { content: ""; position: absolute; left: 0; top: 0;
  width: 15px; height: 15px; border-radius: 50%; background: var(--dgfe-navy-500);
  box-shadow: 0 0 0 4px var(--dgfe-yellow-500); }
.frist__i::after { content: ""; position: absolute; left: 21px; right: calc(-1 * var(--fgap));
  top: 7px; height: 1px; background: var(--rule-2); }
.frist__i:last-child::after { right: 0; }
.frist__d { display: block; margin-bottom: 10px;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
  font-size: var(--fs-2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-accent); }
.frist p { margin-top: 12px; font-size: var(--fs-3); }

/* --- 20) 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 li { color: var(--ink-n-muted); }
.on-navy .checks .tk { color: var(--dgfe-yellow-500); }

/* --- 21) Haeufige Fragen — natives details, kein JS ----------------------- */
.faq__i { border-top: 1px solid var(--rule); }
.faq__i:last-of-type { border-bottom: 1px solid var(--rule); }
.faq__q { list-style: none; cursor: pointer; display: grid;
          grid-template-columns: minmax(0, 1fr) 20px; gap: clamp(14px, 2vw, 30px); align-items: center;
          padding-block: clamp(18px, 2vw, 25px);
          font-family: var(--ff-dsp); font-variation-settings: "wdth" 104, "wght" 620;
          font-weight: 600; font-size: var(--fs-3); line-height: 1.3;
          color: var(--ink-strong);
          transition: color var(--t-ui) var(--e-shut); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
@media (hover: hover) and (pointer: fine) { .faq__q:hover { color: var(--dgfe-color-link); } }
.faq__s { position: relative; width: 18px; height: 18px; justify-self: end; }
.faq__s::before, .faq__s::after { content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 2px; background: var(--dgfe-yellow-800); }
.faq__s::after { transform: rotate(90deg); transition: transform 260ms var(--e-shut); }
.faq__i[open] .faq__s::after { transform: rotate(0deg); }
.faq__a { padding-bottom: clamp(20px, 2.2vw, 30px); }
.faq__a p { font-size: var(--fs-3); max-width: 72ch; }

/* --- 22) ABSCHLUSS — geteiltes Blatt statt gedimmtem Vollbild ------------- */
.closer__in { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: stretch; }
.closer__ph { position: relative; overflow: hidden; min-height: 100%; }
.closer__ph .ph { position: absolute; inset: 0; }
.closer__tx { padding: var(--secY-lg) 0 var(--secY-lg) clamp(24px, 4vw, 76px); }
/* Satzbreite des Abschlussblatts. Stand vorher als Inline-Style im Markup und
   war deshalb unter 900 px nicht korrigierbar — dort fiel das linke Padding
   weg und der ganze Block klebte an der Displaykante. */
.closer__w { width: min(calc(var(--page) * .58), 100% - var(--gut)); }

/* --- 22b) DAS ANFRAGEBLATT — der Wizard in der Sprache dieses Blatts -----
   Uebernommen von der Startseite sind: die drei Schritte, die drei Einstiege,
   die verzweigten Feldsaetze, die Pruefung pro Gruppe, die Feldnamen (sie
   haengen an der CF7-Bridge) und das Eingangsprotokoll.

   UEBERSETZT ist die Form. Die Startseite fuehrt den Fortschritt als
   Messstrecke: runde Messpunkte in genau der Form, die die Punkte auf der
   Lastgang-Kurve haben, verbunden durch eine Haarlinie. Auf diesem Blatt gibt
   es keine Messachse und keine Messpunkte — hier gilt die Grammatik des
   Preisblatts:

   1) FORTSCHRITT = POSITIONSLEISTE. Drei Positionen mit eckiger Positions-
      nummer (kein Messpunkt), dazwischen die Fuehrungspunkte, die auf diesem
      Blatt ohnehin jede Bezeichnung mit ihrem Wert verbinden (.pos__d).
      Was hinter einem liegt, faellt gelb aus — dieselbe Regel wie bei der
      Sammelschiene: ab dem Punkt, an dem gebuendelt ist, ist die Leitung gelb.
      Darueber der Blattkopf des Formulars, gebaut wie .dochd__in.
   2) SCHRITT 1 = ZEILEN DES KONDITIONENBLATTS. Statt Protokollkacheln:
      Einordnung rechtsbuendig, gepunktete Kante, Beschreibung dahinter,
      Aufwand rechts — die Grammatik von .kb und .zl. Die gewaehlte Zeile
      bekommt die 3-px-Gelbkante der Spalte „Mit Einkaufsgemeinschaft".
   3) PROTOKOLL = POSITIONSZEILEN. Begriff rechtsbuendig gegen die gepunktete
      Kante, Wert dahinter, oben mit 2-px-Navy geoeffnet, unten geschlossen —
      wie .pos, .kb und .zl.
   4) MARKEN sind eckig. Rund mit gelbem Ring ist auf diesem Blatt reserviert:
      fuer die Stationen der Fristenleiste und fuer den einen Sammelpunkt.

   Abstaende zu senkrechten Linien laufen ueber --rulegap (24 px / 16 px), wie
   ueberall auf diesem Blatt.
   ------------------------------------------------------------------------ */
.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); }
.wpath > legend + * { margin-top: 0; }

/* Felder, die es auf dieser Seite noch nicht gab. input/select/textarea
   erben ihre Grundform vom Rechner weiter oben. */
::placeholder { color: var(--ink-quiet); opacity: 1; }
textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
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); } }
.flds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dgfe-space-lg); }
.fld--full { grid-column: 1 / -1; }
.fld--gap { margin-top: 22px; }
.segs--stack { flex-direction: column; align-items: stretch; }
/* Im Rechner stehen die Schalter in einer schmalen Spalte und duerfen sie
   fuellen. Im Anfrageblatt ist der Satzspiegel 1040 px breit — zwei Schalter
   „Telefon / Video" waeren dort je 520 px und lesen als Banner statt als
   Wahl. Deckel je Schalter, Rest bleibt Luft; schmal faellt der Deckel weg. */
.wz .segs:not(.segs--stack) .seg { flex: 1 1 160px; max-width: 268px; }
.req { color: var(--ink-accent); margin-left: .25em; }
.fs__lg .req { margin-left: -6px; }
.optag { margin-left: auto; font-style: normal; letter-spacing: .15em; color: var(--ink-quiet); }
/* Einheit in einer Feldbeschriftung. Eigener Name, weil `.unit` auf dieser
   Seite schon der Feldrahmen mit dem angehaengten Suffix ist (Rechner). */
.lu { font-variation-settings: "wdth" 76, "wght" 400; color: var(--ink-quiet); }
.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); }

/* Blattkopf des Formulars + Positionsleiste */
.wzt { margin-bottom: clamp(26px, 3vw, 40px); }
.wzhd { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
        padding-bottom: 11px; border-bottom: 2px solid var(--dgfe-navy-500);
        font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.wzhd b { font-weight: inherit; color: var(--ink-strong); }
.wzhd__r { color: var(--ink-accent); }
.wzp { display: flex; align-items: center; gap: clamp(8px, 1.1vw, 16px);
       list-style: none; margin: 0; padding: clamp(10px, 1.2vw, 14px) 0;
       border-bottom: 1px solid var(--rule); }
.wzp__s { display: flex; align-items: center; gap: clamp(8px, 1.1vw, 16px); min-width: 0; }
.wzp__s:not(:last-child) { flex: 1 1 auto; }
.wzp__b { display: inline-flex; align-items: center; gap: 12px; 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; }
/* Eckige Positionsnummer — kein Messpunkt. */
.wzp__n { flex: none; width: 27px; height: 27px; 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" 74, "wght" 700;
          font-weight: 700; font-size: var(--fs-2); letter-spacing: .05em;
          font-variant-numeric: tabular-nums;
          transition: background-color var(--t-ui) var(--e-shut),
                      border-color var(--t-ui) var(--e-shut),
                      color var(--t-ui) var(--e-shut); }
.wzp__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; }
.wzp__s[data-state="current"] .wzp__n { background: var(--dgfe-navy-500);
          border-color: var(--dgfe-navy-500); color: #fff; }
.wzp__s[data-state="current"] .wzp__t { color: var(--ink-strong); }
.wzp__s[data-state="done"] .wzp__n { background: var(--dgfe-navy-500);
          border-color: var(--dgfe-navy-500); color: var(--dgfe-yellow-500); }
.wzp__s[data-state="done"] .wzp__t { color: var(--ink); }
/* Fuehrungspunkte wie in den Tarifzeilen; darueber die Vollbahn, die per
   scaleX aufgezogen wird, sobald der Abschnitt hinter einem liegt. */
.wzp__d { position: relative; flex: 1 1 24px; min-width: 16px; height: 0;
          border-bottom: 1px dotted var(--rule-2); }
.wzp__d i { position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2px;
            background: var(--dgfe-yellow-600);
            transform: scaleX(0); transform-origin: left center;
            transition: transform 560ms var(--e-draw); }
.wzp__s[data-state="done"] .wzp__d i { transform: scaleX(1); }

/* Panels. Sichtbarkeit haengt an `hidden` (display:none), nicht an opacity —
   die Blende ist nur die Geste darueber. */
.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, den man gerade ausfuellen soll. Regel A: Text bewegt
   sich nie. Der Wechsel wird jetzt von den Positionszeilen quittiert. */

.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.06;
  letter-spacing: -.014em; text-wrap: balance;
}
.wzh p { margin-top: 13px; font-size: var(--fs-3); max-width: 56ch; }

/* Schritt 1: die drei Wege als Zeilen des Konditionenblatts. */
.ways { border-top: 2px solid var(--dgfe-navy-500); border-bottom: 1px solid var(--rule-2); }
.way { position: relative; display: block; }
.way + .way { border-top: 1px solid var(--rule); }
.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: 3px; 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`: Einordnung, Titel und Aufwand sitzen
   dadurch wirklich auf einer Grundlinie. Die gepunktete Kante haengt am
   mittleren Feld als `border-left` — genau wie bei den Positionszeilen
   (`.zl p`), wo sie ebenfalls nicht am rechtsbuendigen Begriff sitzt. */
.way__in { position: relative; display: grid;
           grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) minmax(0, 7rem);
           gap: 6px 0; align-items: baseline;
           padding: clamp(16px, 1.9vw, 24px) 0 clamp(16px, 1.9vw, 24px) var(--rulegap);
           transition: background-color var(--t-ui) var(--e-shut); }
.way__k { text-align: right; padding-right: var(--rulegap);
          font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.way__c { padding-left: var(--rulegap); padding-right: var(--rulegap);
          border-left: 1px dotted var(--rule-2); }
.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: var(--paper-2); }
/* `visibility` dazu: mit `opacity` allein meldeten alle drei Zeilen „Gewaehlt". */
.way input:checked ~ .way__in .way__pick { opacity: 1; visibility: visible; }
/* Das unsichtbare Radio (opacity:0) kann seinen eigenen Ring nicht zeigen —
   er wird auf die Zeile gelegt, mit Navy-Saum aussen (Gelb allein 1,33:1). */
.way input:focus-visible ~ .way__in {
  outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: -3px;
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--dgfe-navy-500) 62%, transparent); }

/* Zusatzblock: kein Nummernschritt, sondern ein Einschub — deshalb die
   3-px-Gelbkante des Blatts statt einer Ziffer. Sonst haette die
   Nummernfolge Luecken. */
.xtra { border-left: 3px solid var(--dgfe-yellow-500); padding-left: var(--rulegap); }

/* Vermerk: was aus dem Einsparrechner uebernommen wurde. Form der
   Tarifzeilen — Bezeichnung, Fuehrungspunkte, Wert. */
.uenote { margin-bottom: clamp(16px, 1.8vw, 22px); padding: 12px 0 13px;
          border-top: 1px dotted var(--rule-2); border-bottom: 1px dotted var(--rule-2); }
.uenote[hidden] { display: none; }
.uenote__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-strong); }
.uenote__l { display: grid; gap: 5px; margin-top: 10px; }
.uenote__i { display: flex; align-items: baseline; gap: 0; font-size: var(--fs-2); }
.uenote__i > b { font-weight: inherit; white-space: nowrap; color: var(--ink-quiet);
                 font-family: var(--ff-dsp); font-variation-settings: "wdth" 74, "wght" 600;
                 font-size: var(--fs-2); letter-spacing: .11em; text-transform: uppercase; }
.uenote__d { flex: 1 1 auto; min-width: 14px; margin: 0 10px;
             border-bottom: 1px dotted var(--rule-2); translate: 0 -.28em; }
.uenote__v { color: var(--ink-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.uenote__n { display: block; margin-top: 10px; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-quiet); }
.autotag { margin-left: .55em; font-family: var(--ff-dsp);
           font-variation-settings: "wdth" 70, "wght" 600; font-weight: 600;
           font-size: var(--fs-2); letter-spacing: .14em; text-transform: uppercase;
           color: var(--ink-accent); }
.autotag[hidden] { display: none; }

/* Termin-Kacheln. Gewaehlt = die gelbe Blattkante oben, wie sie der Rechner
   als `.calcsec` traegt. */
/* Obergrenze je Kachel, linksbuendig: der Satzspiegel ist hier 1040 px breit,
   ohne Deckel wuerden fuenf Tageskacheln je 200 px auseinandergezogen und
   traegen einen Datumsstempel in der Mitte einer leeren Flaeche. */
.slots { display: grid; gap: 8px; justify-content: start;
         grid-template-columns: repeat(auto-fit, minmax(86px, 148px)); }
.slots--time { grid-template-columns: repeat(auto-fit, minmax(76px, 118px)); }
.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;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dgfe-navy-500) 62%, transparent); }
.slot input:checked:focus-visible + span {
  box-shadow: inset 0 3px 0 0 var(--dgfe-yellow-500),
              0 0 0 4px color-mix(in srgb, var(--dgfe-navy-500) 62%, transparent); }
.slotnote { margin-top: 11px; max-width: 76ch; font-size: var(--fs-2); line-height: 1.45;
            color: var(--ink-quiet); text-wrap: pretty; }

/* Einwilligung. `label.chk` statt `.chk`: `.fld > label` (Versalien, Archivo,
   Sperrung) hat dieselbe Spezifitaet und wuerde sonst gewinnen. */
/* `max-width` ist nicht Kosmetik: ueber die volle Satzbreite stand der
   Einwilligungssatz in EINER Zeile von rund 150 Zeichen. Die Satzbreite des
   Blatts sind 60-75. */
label.chk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; align-items: start;
       max-width: 68ch;
       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); text-wrap: pretty; }
.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; text-wrap: pretty; }
/* 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 in der Grammatik der Positionszeilen. */
.done { display: inline-flex; align-items: center; gap: 14px; margin-left: 4px;
        margin-bottom: clamp(16px, 1.8vw, 22px); }
.done i { flex: none; width: 12px; height: 12px; background: var(--dgfe-navy-500);
          box-shadow: 0 0 0 4px var(--dgfe-yellow-500); }
.done span { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.rcpt { border-top: 2px solid var(--dgfe-navy-500); border-bottom: 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: 12px 0; 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, 11rem) minmax(0, 1fr);
  gap: 6px 0; padding: clamp(12px, 1.4vw, 17px) 0; border-top: 1px solid var(--rule); }
.rcpt__row:first-child { border-top: 0; }
.rcpt__k { text-align: right; padding-right: var(--rulegap);
           font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); }
.rcpt__v { padding-left: var(--rulegap); border-left: 1px dotted var(--rule-2);
           font-size: var(--fs-3); color: var(--ink-strong); }
.fstat { margin-top: var(--dgfe-space-lg); padding: 14px 18px; font-size: var(--fs-2); line-height: 1.5;
         border-left: 3px solid var(--dgfe-color-success); background: var(--dgfe-color-success-bg);
         color: var(--dgfe-color-success); }

/* --- 23) Footer — zeichengleich zur Startseite ---------------------------- */
.site-footer { background: var(--dgfe-navy-500); color: var(--ink-n-muted); }
.site-footer .sheet { 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; }
/* 24px plus die ~13px Innenluft der 44-px-Tap-Boxen darunter ergaben 37px —
   das Label loeste sich von seiner Liste. */
.foot__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); margin-bottom: 10px; }
.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); }

/* Pruefmarke aus der Wort-Bild-Marke */
.markdots { display: flex; gap: 7px; margin-bottom: clamp(14px, 1.6vw, 20px); justify-content: flex-end; }
.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); }

/* --- 24) 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 Marken der
   Sammelschiene setzten sich ueber eine Feder mit 44 % Ueberschwinger, und
   die Schiene wurde von einer Blende freigegeben statt gezeichnet.

   Ersetzt durch die gemeinsame Bewegungsschicht am Ende dieser Datei:
   data-auf (Text) · data-spur (Sammelleitung) · data-marke (Sammelpunkt) ·
   data-zaehl (gemessene Werte) · data-auszug (Register, Kolonnen) ·
   data-quitt (Auswahl).

   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; }

/* --- 24b) Farbe beim Scrollen: der Ruhezustand bleibt Duotone ------------
   Der eine Grade ueber alle Fotos stiftet die Familie zur Startseite und
   wird nicht angetastet — er ist weiter der Ruhezustand.

   `.ph--farbe` steht jetzt an ALLEN sechs inhaltlichen Fotos, nicht mehr an
   einer Auswahl von dreien. Ausgenommen bleiben Fremdlogos (Graustufe ist
   dort Gleichbehandlung), Zeichnungen und SVG (Sammelschiene, Preistreppe)
   sowie Bilder mit Text darueber, weil dort der Kontrast gegen den
   abgedunkelten Duotone gerechnet ist. Auf dieser Seite steht ueber keinem
   Foto Text — nachgemessen, siehe README.

   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 Ton und Saettigung vom Hintergrund nimmt. 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 Lage des Bildes im Fenster. Keine
   Hover-Klammer mehr: gescrollt wird auf Touch genauso. Konstruktion
   zeichengleich zur Startseite.
   ------------------------------------------------------------------------ */
.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: `grayscale(0)
   contrast(1) brightness(1)` weicht an den hellsten Stellen um bis zu
   5/255 vom Original ab (Rundung in der Filterkette). `filter: none` ist
   Pixel fuer Pixel das unbehandelte Bild. */
.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);
}

/* --- 25) Breakpoints ----------------------------------------------------- */
@media (max-width: 1180px) {
  .closer__in { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  :root { --page: 900px; }
  .calc { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .st { grid-template-columns: 2.6rem minmax(0, 1fr); }

  /* Der Header klappt frueher zusammen als das Blatt. Die Vorschau-Navigation
     fuehrt VIER Punkte statt drei; zusammen mit Messwertanzeige und Knopf
     passte das ab etwa 1000 px nicht mehr nebeneinander. Der Umbruch des
     Blatts bleibt bei 900 px, wo die zweite Spalte verschwindet — die beiden
     Masse haben verschiedene Gruende und duerfen auseinanderliegen.
     Das Script liest den Zustand aus `getComputedStyle(.nav-toggle).display`
     und nicht aus einer zweiten Zahl. */
  /* 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 — gedacht fuer die Seiten, auf denen
     die Anzeige NEBEN einer Grafik steht. Hier sitzt sie in einer Kopfzeile
     fester Hoehe, und `width: 100%` wuerde die Zeile sprengen. Deshalb 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;
  }
  .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; }
  /* Author-Styles schlagen das UA-`display:none` von [hidden]. */
  .nav[hidden] { display: none; }
  .nav a { min-height: 48px; border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"] { border-bottom-color: var(--rule);
    border-left: 3px solid var(--dgfe-yellow-500); padding-left: 11px; }
  .nav a[aria-current="page"]::after { content: none; }
  /* Gestapelt traegt die Haarlinie links nicht — der Partner-Block wird durch
     eine Trennlinie darueber und etwas Luft abgesetzt. Der Knopf faellt weg,
     die beiden Ziele stehen als gewoehnliche Eintraege unter einer Kennung. */
  .nav__partner { display: block; margin-left: 0; padding-left: 0; border-left: 0;
    margin-top: 10px; padding-top: 2px; border-top: 1px solid var(--rule-2); }
  .nav__pb { display: none; }
  .nav__pk { display: block; padding: 6px 0; 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 .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); }
}
/* Unter 900 px faellt das Konditionenblatt auf eine Spalte zusammen. Die
   Sammelschiene ist reine Dekoration und wird ausgeblendet — es geht kein
   Inhalt verloren, weil sie keinen traegt. */
@media (max-width: 900px) {
  :root { --marg: 0px; --seam: 0px; }

  /* Mehr Raum ueber einer Ueberschrift als darunter: der Zeilenabstand des
     Blatts traegt hier den Abstand Kopfzeile → Ueberschrift (26px), waehrend
     Ueberschrift → Lauftext bei 16px bleibt. */
  .led { grid-template-columns: minmax(0, 1fr); row-gap: clamp(26px, 4vw, 40px); }
  .led__m, .led__b, .led__w { grid-column: 1; text-align: left; padding-right: 0; }

  /* Ohne Rand traegt die Marginalspalte nicht mehr: gestapelt lasen Kuerzel und
     Randnotiz wie zwei gleichrangige Eyebrows — "ZWEI WEGE" stand direkt ueber
     der Ueberschrift "Zwei Wege — abgestimmt auf Ihren Verbrauch", "SECHS
     GRUENDE" ueber "Sechs Gruende, warum ...". Beide werden zu EINER Kopfzeile
     aufgeloest: Kuerzel · Randnotiz. Gleicher Text, eine Zeile, klare Rangfolge. */
  .led__m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; }
  .led__m .markdots { flex: 0 0 100%; margin-bottom: 2px; }
  .led__m .eyebrow br { display: none; }
  .led__m .mnote { margin-top: 0; }
  .led__m .mnote::before { content: "·"; margin: 0 .7em; color: var(--rule-2); }
  .on-navy .led__m .mnote::before { color: var(--rule-n2); }

  .markdots { justify-content: flex-start; }
  .bb { display: none; }
  .closer__in { grid-template-columns: 1fr; }
  .closer__ph { min-height: clamp(200px, 42vw, 320px); }
  /* Seitenrand wie im .sheet — sonst klebt das ganze Abschlussblatt bei x=0. */
  .closer__tx { padding: var(--secY) var(--gut) var(--secY-lg); }
  .closer__w { width: 100%; }
  .path--drop { margin-top: 0; }
}
@media (max-width: 767px) {
  .site-header .readout { margin-left: 10px; padding-left: 10px; gap: 7px; }
  .readout__kl { display: none; }
  :root { --rulegap: var(--dgfe-space-md); }
  :root { --header-h: 60px; --header-h-sm: 52px; --bleed: var(--gut); }
  .g { row-gap: 26px; }
  .c1-4,.c1-5,.c1-6,.c1-7,.c1-8,.c1-9,
  .c5-12,.c6-12,.c7-12,.c8-12,.c9-12 { grid-column: 1 / -1; }

  /* Versalien im Display-Grad brauchen bei 21-28px mehr Durchschuss als auf
     dem Plakat — sonst kleben drei, vier Zeilen aufeinander. */
  .h1, .h2 { line-height: 1.08; }

  /* Der Bildstreifen ist bei 21:9 und 390px nur noch 167px hoch — vom
     Umschlagterminal bleibt ein Streifen ohne Motiv. */
  .band .ph--21x9 { aspect-ratio: 16 / 9; }

  /* Tarifzeile stapelt: Fuehrungspunkte brauchen Breite, die es nicht gibt. */
  .pos__ln { flex-wrap: wrap; }
  .pos__d { display: none; }
  .pos__k { width: 100%; margin-bottom: 8px; white-space: normal; }

  /* Erst HIER faellt die Grammatik des Blatts (rechtsbuendig gegen eine
     gepunktete Kante), naemlich genau dann, wenn die zweite Spalte
     verschwindet. Vorher standen diese Regeln im 900er-Breakpoint, waehrend
     die Tabelle bis 767px dreispaltig blieb: zwischen 768 und 900 war die
     Kopfzeile "Kriterium" rechtsbuendig, die Kriterien darunter linksbuendig. */
  .kb__k { text-align: left; }
  .zl > .h3 { text-align: left; padding-right: 0; }
  .zl p { padding-left: 0; margin-left: 0; border-left: 0; }

  /* Konditionenblatt stapelt und beschriftet sich selbst. Kriterium und linke
     Spalte fluchten mit dem Satzspiegel; die gelb gekantete Spalte ist als
     eigener Block deutlich eingerueckt statt um 3px danebenzuliegen. */
  .kb__hd { display: none; }
  .kb__row { grid-template-columns: 1fr; }
  .kb__row > * { padding-block: 14px; padding-inline: 0; }
  .kb__k { padding-bottom: 4px; border-right: 0; }
  .kb__a { padding-top: 4px; padding-bottom: 0; }
  .kb__row + .kb__row .kb__a { border-top: 0; }
  .kb__b { padding: 14px 16px 15px; margin: 12px 0 4px; }
  .kb__row + .kb__row .kb__b { border-top: 0; }
  .kb__a::before, .kb__b::before {
    content: attr(data-l); display: block; margin-bottom: 7px;
    font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
    font-size: var(--fs-2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-quiet); }

  /* Fristenleiste kippt auf senkrecht */
  .frist { grid-template-columns: 1fr; row-gap: clamp(24px, 4vw, 34px); }
  .frist__i { padding: 0 0 0 34px; }
  .frist__i::after { left: 7px; top: 21px; bottom: calc(-1 * clamp(24px, 4vw, 34px));
                     right: auto; width: 1px; height: auto; }
  .frist__i:last-child::after { display: none; }

  .zl { grid-template-columns: 1fr; }

  /* Untereinander gestellt trennten 26px die beiden Wege genauso weit wie
     20px einen Absatz von seinem eigenen Knopf — sie lasen als ein Fluss. */
  .path--drop { margin-top: clamp(14px, 3vw, 24px); }

  /* Treppe: die Messachse gibt Breite an die Bahn ab, damit die vier
     Klassennamen in eine Zeile passen. */
  .st { grid-template-columns: 2rem minmax(0, 1fr); column-gap: 8px; }
  .st__x span { letter-spacing: 0; padding: 0 2px; overflow-wrap: anywhere; }
  .st__lg { gap: 7px 18px; }
  /* --- Anfrageblatt schmal -------------------------------------------
     Die Positionsleiste traegt bei 390 px mit den Nummern allein; der Name
     des Schritts steht ohnehin im Blattkopf darueber. */
  .wzp__t { display: none; }
  .wzp__b { gap: 0; padding: 4px 8px; }
  .flds { grid-template-columns: 1fr; }
  /* Die Grammatik des Blatts (rechtsbuendig gegen eine gepunktete Kante)
     faellt genau dann, wenn die zweite Spalte verschwindet — dieselbe Regel
     wie bei .kb und .zl weiter oben. */
  .way__in { grid-template-columns: 1fr; align-items: start;
             padding-left: var(--rulegap); }
  .way__k { text-align: left; padding-right: 0; }
  .way__c { padding-left: 0; padding-right: 0; border-left: 0; }
  .way__meta { text-align: left; }
  .way__pick { margin-top: 6px; }
  .rcpt__row { grid-template-columns: 1fr; gap: 4px; }
  .rcpt__k { text-align: left; padding-right: 0; }
  .rcpt__v { padding-left: 0; border-left: 0; }
  .wznote { flex-basis: 100%; text-align: left; }
  .wznav .btn { flex: 1 1 auto; }
  /* Bei 360 px steht neben der 3-px-Kante sonst kaum noch Satzbreite. */
  .xtra { padding-left: var(--dgfe-space-md); }
  /* Schmal fuellen die Schalter ihre Zeile wieder aus — ein 268-px-Deckel
     liesse bei 358 px Satzbreite eine ausgefranste rechte Kante stehen. */
  .wz .segs:not(.segs--stack) .seg { max-width: none; }

  /* Bei 360px brach die Kopfzeile sonst hinter dem letzten Trennpunkt um und
     liess "· ct/kWh" allein auf der zweiten Zeile stehen. */
  .staffel__hd { letter-spacing: .12em; }
  /* Auf schmalen Geraeten haben die beiden Linien keinen Platz fuer eigene
     Beschriftungen — die Legende unter der Treppe benennt sie ohnehin. */
  .st__tag { display: none; }
  .st__dim { right: 6%; }
  .st__delta b { right: calc(6% + 8px); }
  .foot { grid-template-columns: 1fr; }
}

/* --- Telefon: Knopfkanten fluchten ---------------------------------------
   Nebeneinandergesetzte Knoepfe endeten bei 390px auf 271 / 274 / 280 px —
   Kanten, die fast fluchten, sind schlimmer als solche, die es sichtbar nicht
   tun. Auf dem Telefon nehmen sie die volle Satzbreite und stehen damit auf
   derselben Kante wie Ueberschrift und Lauftext. */
@media (max-width: 560px) {
  .band .ph--21x9 { aspect-ratio: 3 / 2; }
  .hero__act .btn, .foot__act .btn { width: 100%; }
  .path .btn { width: 100%; align-self: stretch; }
}

/* --- 26) 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. */
  /* Farbe auf Verlangen bleibt, der Uebergang dorthin faellt weg. */
  /* Keine Einfaerbung beim Scrollen. Die Bilder stehen grau, also im
     abgenommenen Ruhezustand: der eine Duotone-Grade ueber ALLE Fotos ist
     das Familienmerkmal beider Seiten, und drei dauerhaft bunte Bilder
     unter sechs wuerden genau die Serienwirkung zerlegen. Es geht nichts
     verloren — die Farbe traegt keine Information. Das Script schreibt
     `--gs` hier gar nicht erst; die Regeln sind das Sicherheitsnetz. */
  .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; }