/* ===========================================================================
   ROUTE A · UNTERSEITE „ENERGIEOPTIMIERUNG FÜR GROSSVERBRAUCHER"
   ---------------------------------------------------------------------------
   Geschwisterseite zu „Energieoptimierung für KMU". Dieselbe Leistung, zwei
   Groessenklassen — der Unterschied steckt im Bau, nicht nur im Text.

   IDENTISCH zur ganzen Familie: Tokens, Archivo+Poppins, Abstandsskala, der
   EINE Duotone-Grade ueber alle Fotos samt sektionsgebundener Einfaerbung,
   Header und Footer zeichengleich, Knoepfe, Fokusring, Beschleunigungskurven,
   Gelb als Linie/Kante/Punkt und genau EINE Flaeche.

   EIGEN — und zwar gegen BEIDE Geschwister:

   1) DAS RUECKGRAT IST EINE MESSPROTOKOLL-KOLONNE RECHTS (.pr). Energie-
      beschaffung ordnet ueber eine linke Naht, KMU ordnet waagerecht ueber
      Massregeln. Hier laeuft eine durchgehende Haarlinie am RECHTEN Rand, und
      jenseits davon stehen die Messgroessen der Sektion (1,8 GWh, ~47.000 €,
      9,4 %, 5 Werktage, 240 Mandate). Rechts, weil auf einem Messprotokoll
      dort die Werte stehen — nicht die Ueberschriften.

   2) DIE SCHRIFT IST SCHMALE VERSALIE. KMU setzt Ueberschriften im
      Gemischtsatz bei wdth 104. Hier laufen sie in Versalien bei wdth 76 —
      Typenschild und Werksbeschilderung. Enger Satz, dichtere Zeilen,
      kleinere Sektionsabstaende: die Seite ist die schwere der beiden.

   3) DIE SIGNATURE IST DIE SPITZENLAST-TAFEL (.lgang). Der Ist-Inhalt sagt
      den Kernsatz selbst: bei RLM-Zaehlern ist nicht der Verbrauch der
      teuerste Posten, sondern die hoechste 15-Minuten-Spitze — und die
      definiert den Leistungspreis fuer 12 Monate. Genau das zeichnet die
      Tafel: ein Tageslastgang aus 96 Viertelstundenwerten, zwei Kurven
      (vor/nach) und EINE waagerechte Marke auf dem hoechsten Punkt. Der
      Gegenstand dieser Seite, gezeichnet.

   4) DIE VERLUSTAUFSTELLUNG (.verl) ist der Kern-Inhalt: sieben Stellen, an
      denen Geld liegenbleibt. Sie bekommt die strengste Form der Seite —
      Fachrubrik rechtsbuendig, gepunktete Kante, Titel, Erlaeuterung. KEINE
      01/02/03-Nummern: die sieben haben keine Reihenfolge, eine Nummerierung
      wuerde eine behaupten (Playbook 1.5). Statt Nummern tragen sie ihre
      eigene Rubrik — LEISTUNGSPREIS, BESCHAFFUNG, LASTPROFIL, KONDITIONEN,
      FRIST, MANAGEMENT, NETZENTGELT. Der erste Posten steht gross, weil der
      Ist-Text ihn selbst als den teuersten fuehrt.

   5) KEIN FORMULAR. Die Ist-Seite traegt einen dreistufigen Wizard. Er wird
      nicht nachgebaut (siehe docs/kontaktwege.md), sondern als DATENBLATT
      gesetzt: was gefragt wird und welche Werte zur Wahl stehen, steht
      vollstaendig auf der Seite. Die Anfrage laeuft ueber /anfrage-senden/,
      den Weg, der den Datei-Upload wirklich hat.
   =========================================================================== */

/* --- 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 und Kurven zeichengleich zur Familie. Was ABWEICHT:
   - --kenn / --kenngap: die Messprotokoll-Kolonne rechts (statt --marg/--seam
     links bei Energiebeschaffung, statt gar nichts bei KMU)
   - --secY ist KLEINER als auf der KMU-Seite: diese Seite ist die dichte
   - Zeilenabstand 1,55 statt 1,68
   ------------------------------------------------------------------------ */
: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);
  --colgap: clamp(14px, 1.6vw, 28px);
  --rulegap: var(--dgfe-space-lg);
  --header-h: 68px;
  --header-h-sm: 54px;

  /* Die Messprotokoll-Kolonne. Beide Masse fallen unter 900 px auf 0 — dann
     steht die Kolonne als waagerechte Werteleiste unter dem Satzspiegel. */
  --kenn:    clamp(0px, 12.5vw, 180px);
  --kenngap: clamp(0px, 3.4vw, 54px);

  /* Dichter als die KMU-Seite. Das ist der Unterschied, den man zuerst sieht,
     ohne ihn benennen zu koennen. */
  --secY:    clamp(44px, 4.9vw, 76px);
  --secY-lg: clamp(56px, 6.2vw, 96px);

  --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 hiess `--e-point` und war eine Feder mit 44 %
     Ueberschwinger. Auf einer Seite, die ein Messprotokoll ist, hat ein
     Gummiband nichts verloren — sie ist raus, samt `--t-point`. Was
     ueberschwingen darf, ist der Zeiger der Bewegungsschicht, und um 6 %. */
  --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.55;
  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, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
h1,h2,h3,h4 { margin: 0; color: var(--dgfe-color-heading); font-weight: 600; }
a { color: var(--dgfe-color-link); text-underline-offset: 3px; }
strong,b { font-weight: 500; color: var(--ink-strong); }

:focus-visible {
  outline: 2px solid var(--dgfe-color-focus-ring);
  outline-offset: 2px; border-radius: 2px;
  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 als SCHMALE VERSALIE ------------------------
   wdth 76 statt der 104 der KMU-Seite und der 116 der Energiebeschaffung.
   Schmale Versalien sind die Schrift von Typenschildern, Schaltschraenken und
   Messprotokollen — und sie packen bei gleicher Flaeche deutlich mehr Text.
   Genau das soll diese Seite: mehr Information pro Flaeche.

   Line-Height 1.06, nicht enger: „ENERGIEKOSTEN AUF KONZERNNIVEAU" traegt
   kein Trema, aber „VERSTECKTE NETZENTGELTE UND UMLAGEN" und „ÜBER" tun es,
   und deutsche Versalien brauchen den Durchschuss.
   ------------------------------------------------------------------------ */
.dsp {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 76, "wght" 760;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: .004em;
  text-wrap: balance;
  color: var(--ink-strong);
}
/* Schmale Versalien vertragen einen groesseren Grad als breiter Gemischtsatz:
   bei gleicher Zeilenlaenge passen sie in weniger Zeilen. */
.h1 { font-size: var(--fs-10); }
.h2 { font-size: var(--fs-9); }
.h3 {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 82, "wght" 680;
  font-weight: 600; text-transform: uppercase;
  font-size: var(--fs-3);
  line-height: 1.2; letter-spacing: .03em; color: var(--ink-strong);
  text-wrap: balance;
}
.cond {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 68, "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" 84, "wght" 740;
  font-weight: 700; line-height: .94; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.num .u   { font-size: var(--fs-4); font-weight: 500; font-variation-settings: "wdth" 76, "wght" 500; letter-spacing: .02em; margin-left: .18em; }
.num .pfx { font-size: var(--fs-4); font-weight: 500; font-variation-settings: "wdth" 76, "wght" 500; margin-right: .16em; letter-spacing: .05em; }

.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-3); line-height: 1.55; font-weight: 300; }
.measure    { max-width: 68ch; }
.measure-sm { max-width: 50ch; }
.cap {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 72, "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); }
.fine { font-size: var(--fs-2); line-height: 1.5; color: var(--ink-quiet); max-width: 92ch; }
.on-navy .fine { color: var(--ink-n-quiet); }
.label { display: block; font-size: var(--fs-2); letter-spacing: .18em; color: var(--ink-quiet); }
.on-navy .label { color: var(--ink-n-quiet); }

.hd { margin-bottom: clamp(12px, 1.3vw, 18px); }
.hd + .lead, .hd + p { margin-top: clamp(14px, 1.6vw, 22px); }
.mt-sm { margin-top: var(--dgfe-space-sm); }
.mt-md { margin-top: var(--dgfe-space-md); }
.mt-lg { margin-top: var(--dgfe-space-lg); }
.mt-0  { margin-top: 0; }

.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 MESSPROTOKOLL-RASTER --------------------------
   Satzspiegel links, dann eine durchgehende Haarlinie, dann die Kolonne mit
   den Messgroessen. Die Linie ist ein Pseudo-Element der Zeile und laeuft
   deshalb ueber die volle Sektionshoehe, nicht nur neben einem Block.
   ------------------------------------------------------------------------ */
.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; }
.sec > .sheet { padding-block: var(--secY); }
.sec--tall > .sheet { padding-block: var(--secY-lg); }

.pr { position: relative; display: grid;
      grid-template-columns: minmax(0, 1fr) var(--kenngap) var(--kenn);
      row-gap: clamp(26px, 3vw, 46px); }
.pr::before { content: ""; position: absolute; top: 0; bottom: 0;
              right: calc(var(--kenn) + var(--kenngap) / 2); width: 1px;
              background: var(--rule); }
.on-navy .pr::before { background: var(--rule-n); }
/* ALLE Inhaltsbloecke stehen in Spalte 1. Kein Block laeuft ueber die
   Kolonne hinweg — sonst schnitte die Haarlinie mitten durch Listen und
   Klauseltexte, und aus einem Protokollrand wuerde ein Strich quer durchs
   Bild. Die Kolonne ist Rand, kein zweiter Satzspiegel.
   `grid-row: 1` haelt die Messgroessen oben neben der Einleitung; ohne die
   Angabe rutschten sie in die erste freie Zeile von Spalte 3, also unter den
   letzten Block. */
.pr__b { grid-column: 1; min-width: 0; }
.pr__k { grid-column: 3; grid-row: 1; min-width: 0; }

/* Die Messgroessen selbst. Sie stehen NICHT zur Zierde da: jede einzelne
   kommt aus dem Text der Sektion, neben der sie steht. */
.kw { display: grid; gap: clamp(16px, 1.9vw, 24px); }
.kw__i { border-top: 1px solid var(--rule); padding-top: 9px; }
.on-navy .kw__i { border-top-color: var(--rule-n); }
.kw__v { display: block; font-family: var(--ff-dsp);
         font-variation-settings: "wdth" 80, "wght" 720; font-weight: 700;
         font-size: var(--fs-3); line-height: 1.12;
         letter-spacing: -.006em; color: var(--ink-strong);
         font-variant-numeric: tabular-nums; }
.on-navy .kw__v { color: var(--dgfe-yellow-500); }
.kw__k { display: block; margin-top: 6px; font-size: var(--fs-2); letter-spacing: .15em;
         line-height: 1.5; color: var(--ink-quiet); }
.on-navy .kw__k { 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(26px, 3.2vw, 48px); }
.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}

/* --- 6) Bildgradation — EIN Grade ueber alle Fotos ------------------------ */
.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--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;
}

/* --- 7) Knoepfe — zeichengleich zur Familie ------------------------------- */
.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" 88, "wght" 660;
  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);
}
/* Die Hover-Haelfte jeder dieser Regeln steht gesammelt in Abschnitt 23c,
   in `@media (hover: hover) and (pointer: fine)`. Ohne diese Klammer wenden
   Telefone Hover-Stile beim Antippen an und lassen sie haengen. Die
   `:focus-visible`-Haelfte bleibt hier: sie ist die Tastaturanzeige. */
.btn:focus-visible::before { transform: scaleX(1); }
.btn__a { transition: transform 280ms var(--e-draw); }
.btn:focus-visible .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); }
/* Authority-Knopf: laut Design-System der CTA fuer den Grossverbraucher-
   Kontext. Auf dieser Seite ist er deshalb der Sekundaerknopf auf Papier. */
.btn--auth    { background: var(--dgfe-navy-500); color: #fff;
                border-color: var(--dgfe-navy-500); --sweep: var(--dgfe-blue-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); }
.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); }
.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);
}
.acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
        margin-top: clamp(22px, 2.6vw, 34px); }
.acts--tight { margin-top: clamp(14px, 1.6vw, 20px); }

/* --- 8) Header — zeichengleich zur Familie -------------------------------- */
.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); }
.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; }

/* --- Die Anzeige bleibt am Telefon stehen --------------------------------
   Sie war unter 1025 px abgeschaltet. Auf einer Seite, die ein Messprotokoll
   ist, ist „Zaehler RLM" im Kopf keine Zierde, sondern die Ansage, worum es
   geht — sie kommt zurueck, kurz statt breit.

   Die Bewegungsschicht bringt `.readout` global zurueck und stellt sie unter
   eine Grafik (`width: 100%`, `position: static`). Hier sitzt sie aber in der
   Kopfzeile. `.site-header .readout` (0,2,0) schlaegt die Regel der Schicht
   (0,1,0) unabhaengig von der Reihenfolge — Absicht, keine Doppelung.
   ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .site-header .readout {
    display: flex; flex-wrap: nowrap; align-items: baseline; gap: 7px;
    width: auto; position: static; margin: 0 auto 0 clamp(10px, 2.2vw, 22px);
    padding: 0 0 0 clamp(10px, 2.2vw, 22px);
    border-top: 0; border-left: 1px solid var(--rule); min-width: 0;
  }
  .site-header .readout__k,
  .site-header .readout__v { white-space: nowrap; }
}
@media (max-width: 767px) {
  .site-header .readout { gap: 5px; margin-left: 10px; padding-left: 10px; }
  .site-header .readout__k { font-size: var(--fs-1); letter-spacing: .09em; }
  .site-header .readout__v { font-size: var(--fs-2); }
}
/* Unter 400 px ist neben Marke und Menueknopf kein Platz mehr fuer Kennung
   UND Wert. Dann traegt der Wert allein. Die Anzeige ist `aria-hidden`, es
   geht also keine Vorlesung verloren; sie bleibt vorhanden, und darum geht
   es (Vorgabe Teil 4). */
@media (max-width: 399px) {
  .site-header .readout__k { display: none; }
  .site-header .readout { border-left: 0; padding-left: 0; margin-left: 12px; }
}
.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);
}
/* `[aria-current]` statt `[aria-current="page"]`: diese Seite steht UNTER
   Energiebeschaffung und ist selbst kein Navigationspunkt. Der Elternpunkt
   traegt `aria-current="true"` — der richtige ARIA-Wert fuer „im Zweig".
   `page` waere eine Falschaussage gegenueber Screenreadern. */
.nav a[aria-current] { font-weight: 500; border-bottom-color: var(--dgfe-yellow-500); }
.nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--dgfe-navy-500);
}
/* --- Der Partner-Aufklapper -----------------------------------------------
   Partnerseiten sind kein DGfE-Angebot: eigene Gruppe hinter einer
   Haarlinie, mit Kennzeichnung. Aus dem einen Link ist ein Aufklapper mit
   zwei Zielen geworden (GSP Energie, Swiss Direkt Energie).

   Ein `<button>` mit `aria-expanded`, kein Link, der nirgends hinfuehrt, und
   ausdruecklich KEIN `:hover`-Aufklapper: ein Menue, das nur auf Hover
   aufgeht, ist auf dem Telefon nicht bedienbar.
   ------------------------------------------------------------------------ */
.nav__part { 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__partb {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--ff-txt); font-size: var(--fs-2); font-weight: 400;
  line-height: 1.3; color: var(--ink);
  transition: color var(--t-ui) var(--e-shut);
}
.nav__parti { position: relative; width: 9px; height: 9px; flex: none; }
.nav__parti::before { content: ""; position: absolute; left: 0; top: 1px;
  width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  transform-origin: 60% 60%; transition: transform var(--t-ui) var(--e-shut); }
.nav__partb[aria-expanded="true"] .nav__parti::before { transform: rotate(-135deg); }
.nav__partcap { display: none; }
.nav__partm {
  position: absolute; top: 100%; right: 0; z-index: 3;
  min-width: 15.5rem; display: grid; padding: 5px;
  background: var(--dgfe-neutral-50); border: 1px solid var(--rule-2);
  box-shadow: var(--dgfe-shadow-md);
}
/* Autoren-Regeln schlagen das UA-`display:none` von [hidden] — ohne diese
   Zeile stuende das Menue dauerhaft offen. */
.nav__partm[hidden] { display: none; }
.nav .nav__partm a { display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 2px; min-height: 44px; padding: 7px 12px;
  border-bottom: 0; color: var(--ink-strong); }
.nav__partm a[data-entwurf] { color: var(--ink); }
/* Die Kennzeichnung „Entwurf". Sie faellt beim Veroeffentlichen weg,
   zusammen mit `data-entwurf` — sonst aendert sich nichts. */
.nav__entw { 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); }
.nav .btn { border-bottom-width: 1px; }
.nav-toggle { display: none; }

/* --- 9) Protokollkopf ----------------------------------------------------- */
.topline { background: var(--dgfe-navy-500); margin-top: var(--header-h); }
.topline__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;
}
.topline__l { color: var(--dgfe-yellow-500); }
.topline__r { color: var(--ink-n-quiet); }

/* --- 10) HERO — Navy, weil diese Seite die schwere ist -------------------- */
.hero > .sheet { padding-block: clamp(44px, 5.4vw, 84px) clamp(38px, 4.6vw, 68px); }
/* 17ch waren bei wdth 76 rund 580 px — „ENERGIEKOSTEN AUF" brach danach in
   zwei Zeilen um. Schmale Versalien brauchen mehr Zeichen pro Zeile, nicht
   weniger. */
.hero .h1 { max-width: 26ch; }
.hero__lead { margin-top: clamp(18px, 2vw, 28px); max-width: 62ch; }
/* Gestapelt, nicht dreispaltig: in der 330 px schmalen Randspalte brach
   „Ø 47.000 €" sonst nach dem Ø um und „5 Werktage" nach der 5. Gestapelt
   ist es ausserdem dieselbe Figur wie die Messprotokoll-Kolonne, die die
   ganze Seite traegt. */
.hero__kw { display: grid; grid-template-columns: minmax(0, 1fr);
            row-gap: clamp(16px, 1.9vw, 24px); align-content: start; }
.hero__kw > div { border-top: 1px solid var(--rule-n2); padding-top: clamp(10px, 1.2vw, 15px); }
.hero__kw__v { display: block; font-family: var(--ff-dsp);
               font-variation-settings: "wdth" 84, "wght" 740; font-weight: 700;
               font-size: var(--fs-7); line-height: 1.05;
               letter-spacing: -.012em; color: var(--dgfe-yellow-500);
               font-variant-numeric: tabular-nums; }
.hero__kw__k { display: block; margin-top: 9px; font-size: var(--fs-2); letter-spacing: .16em;
               line-height: 1.5; color: var(--ink-n-quiet); }
/* Vertrauensmarken als Werteleiste, nicht als vier Kacheln. */
.marken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
          border-top: 1px solid var(--rule-n2); }
.marken > li { padding: clamp(14px, 1.6vw, 20px) clamp(12px, 1.4vw, 20px)
                        clamp(14px, 1.6vw, 20px) 0;
               border-left: 1px solid var(--rule-n); }
.marken > li:first-child { border-left: 0; }
.marken > li + li { padding-left: clamp(12px, 1.4vw, 20px); }
.marken__k { font-family: var(--ff-dsp); font-variation-settings: "wdth" 76, "wght" 640;
             font-weight: 600; font-size: var(--fs-2); letter-spacing: .09em;
             text-transform: uppercase; color: #fff; }

/* --- 11) DIE VERLUSTAUFSTELLUNG — der Kern -------------------------------
   Sieben Posten, streng gesetzt. Rubrik rechtsbuendig gegen eine gepunktete
   Kante, dann Titel und Erlaeuterung. Keine Nummern: die sieben haben keine
   Reihenfolge. Der erste steht gross — der Ist-Text fuehrt ihn selbst als den
   teuersten Posten.
   ------------------------------------------------------------------------ */
.verl { border-top: 2px solid var(--dgfe-navy-500); }
.on-navy .verl { border-top-color: var(--dgfe-yellow-500); }
.verl__i { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
           gap: 6px 0; padding-block: clamp(15px, 1.8vw, 22px);
           border-bottom: 1px solid var(--rule); align-items: baseline; }
.on-navy .verl__i { border-bottom-color: var(--rule-n); }
.verl__r { text-align: right; padding-right: var(--rulegap);
           font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet);
           white-space: nowrap; }
.on-navy .verl__r { color: var(--dgfe-yellow-500); }
.verl__c { padding-left: var(--rulegap); border-left: 1px dotted var(--rule-2); }
.on-navy .verl__c { border-left-color: var(--rule-n2); }
.verl__t { display: block; font-family: var(--ff-dsp);
           font-variation-settings: "wdth" 80, "wght" 700; font-weight: 700;
           text-transform: uppercase; letter-spacing: .028em;
           font-size: var(--fs-3); line-height: 1.16;
           color: var(--ink-strong); }
.on-navy .verl__t { color: #fff; }
.verl p { margin-top: 8px; font-size: var(--fs-3); line-height: 1.5; max-width: 80ch; }
/* Der teuerste Posten wird gross gesetzt — Hierarchie statt Gleichverteilung. */
.verl__i--kern { padding-block: clamp(22px, 2.6vw, 34px); }
.verl__i--kern .verl__t { font-size: var(--fs-7); line-height: 1.04; }
.verl__i--kern p { margin-top: 12px; font-size: var(--fs-3); line-height: 1.5; }

/* --- 12) DIE SPITZENLAST-TAFEL — die Signature ---------------------------
   Ein Tageslastgang aus 96 Viertelstundenwerten. Zwei Kurven — vor und nach
   Optimierung — und EINE waagerechte Marke auf dem hoechsten Punkt der
   Vor-Kurve: der Leistungspreis, den diese eine Spitze fuer 12 Monate setzt.

   Die Kurve traegt bewusst KEINE Leistungsachse. Der Ist-Inhalt nennt fuer
   diesen Case Verbrauch, Einsparung, Verbesserung und Branche — aber keine
   kW-Werte. Eine beschriftete Achse waere eine erfundene Zahl. Die Zeitachse
   dagegen ist eine Tatsache: ein RLM-Tag hat 96 Viertelstunden.
   ------------------------------------------------------------------------ */
.lgang { border: 1px solid var(--rule-n); background: var(--dgfe-navy-600); }
.lgang__hd { display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
             padding: 13px clamp(14px, 1.6vw, 22px); border-bottom: 1px solid var(--rule-n);
             font-size: var(--fs-2); letter-spacing: .16em; color: var(--dgfe-yellow-500); }
.lgang__hd em { font-style: normal; color: var(--ink-n-quiet); }
.lgang__body { padding: clamp(18px, 2.2vw, 30px) clamp(14px, 1.6vw, 24px); }

.lgp { position: relative; height: clamp(228px, 25vw, 340px);
       background: var(--dgfe-navy-700); border: 1px solid var(--rule-n);
       overflow: hidden; }
.lgp svg { display: block; width: 100%; height: 100%; }
/* Viertelstundenraster — das Zaehlraster des RLM-Zaehlers, und nichts sonst. */
.lg__tick  { stroke: color-mix(in srgb, var(--dgfe-yellow-500) 13%, transparent); stroke-width: 1; }
.lg__hour  { stroke: color-mix(in srgb, var(--dgfe-yellow-500) 26%, transparent); stroke-width: 1; }
.lg__vor   { fill: none; stroke: var(--dgfe-blue-300); stroke-width: 1.5;
             stroke-linejoin: round; stroke-linecap: round; }
.lg__nach  { fill: none; stroke: var(--dgfe-yellow-500); stroke-width: 2.2;
             stroke-linejoin: round; stroke-linecap: round; }
.lg__mark  { stroke: color-mix(in srgb, white 72%, var(--dgfe-navy-500));
             stroke-width: 1; stroke-dasharray: 5 4; }
.lg__mark2 { stroke: var(--dgfe-yellow-600); stroke-width: 1; stroke-dasharray: 4 4; }

/* Beschriftungen liegen als HTML ueber der Bahn, nicht als <text> im SVG:
   das SVG laeuft mit preserveAspectRatio="none" und wuerde Schrift verzerren.
   Beide sind absolut positioniert und vom Rahmen sauber geclippt. */
.lg__tag { position: absolute; right: 9px; padding: 3px 8px; white-space: nowrap;
           font-family: var(--ff-dsp); font-variation-settings: "wdth" 68, "wght" 620;
           font-weight: 600; font-size: var(--fs-2);
           letter-spacing: .12em; text-transform: uppercase; }
/* DIE eine gelbe Flaeche der Seite. Sie sitzt auf der Lastspitze — der
   Stelle, um die es auf dieser Seite geht. */
.lg__tag--peak { top: 5.7%; transform: translateY(3px);
                 background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500); }
.lg__tag--nach { top: 30.7%; transform: translateY(-100%) translateY(-3px);
                 color: var(--ink-n-muted); }

.lg__x { display: flex; justify-content: space-between; margin-top: 9px;
         font-family: var(--ff-dsp); font-variation-settings: "wdth" 68, "wght" 600;
         font-size: var(--fs-2); letter-spacing: .1em;
         color: var(--ink-n-quiet); font-variant-numeric: tabular-nums; }
.lg__lg { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: clamp(14px, 1.6vw, 20px);
          font-size: var(--fs-2); letter-spacing: .1em;
          color: var(--ink-n-quiet); }
.lg__lg b { display: inline-block; width: 18px; height: 0; margin-right: 8px;
            translate: 0 -.28em; }
.lg__lg .k1 { border-top: 2px solid var(--dgfe-blue-300); }
.lg__lg .k2 { border-top: 2px solid var(--dgfe-yellow-500); }
.lg__lg .k3 { border-top: 1px dashed color-mix(in srgb, white 72%, var(--dgfe-navy-500)); }

/* Die vier Kennwerte des Cases, unter der Tafel. */
.lgang__kw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
             border-top: 1px solid var(--rule-n); }
.lgang__kw > div { padding: clamp(14px, 1.7vw, 20px) clamp(12px, 1.4vw, 20px)
                            clamp(14px, 1.7vw, 20px) 0;
                   border-left: 1px solid var(--rule-n); }
.lgang__kw > div:first-child { border-left: 0; }
.lgang__kw > div + div { padding-left: clamp(12px, 1.4vw, 20px); }
.lgang__kw span { display: block; }
.lgang__kw .v { font-family: var(--ff-dsp); font-variation-settings: "wdth" 82, "wght" 720;
                font-weight: 700; font-size: var(--fs-4); line-height: 1.1;
                color: #fff; font-variant-numeric: tabular-nums; }
.lgang__kw .k { margin-top: 7px; font-size: var(--fs-2); letter-spacing: .15em;
                color: var(--ink-n-quiet); }

/* Die vier Hebel — eine echte Definitionsliste, weil der Ist-Text genau so
   gebaut ist: Begriff, Doppelpunkt, Erklaerung. */
.hebel { display: grid; gap: clamp(14px, 1.7vw, 22px); }
.hebel > div { padding-left: var(--rulegap); border-left: 2px solid var(--rule-n2); }
.hebel dt { font-family: var(--ff-dsp); font-variation-settings: "wdth" 80, "wght" 680;
            font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
            font-size: var(--fs-2); line-height: 1.25; color: #fff; margin-bottom: 6px; }
.hebel dd { font-size: var(--fs-3); line-height: 1.5; }

/* --- 13) GEGENUEBERSTELLUNG — zwei Stapel, wie im Ist-Text ---------------- */
.geg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: clamp(18px, 2.2vw, 36px); align-items: start; }
.geg__c { min-width: 0; }
.geg__hd { display: flex; align-items: baseline; justify-content: space-between;
           gap: 8px 14px; flex-wrap: wrap;
           border-top: 2px solid var(--rule-2); padding-top: 11px;
           margin-bottom: clamp(12px, 1.4vw, 18px); }
.geg__c--b .geg__hd { border-top-color: var(--dgfe-yellow-500); }
.geg__k { font-family: var(--ff-dsp); font-variation-settings: "wdth" 76, "wght" 660;
          font-weight: 600; font-size: var(--fs-2); letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink-strong); }
.geg__tag { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-accent); }
.geg ul { display: grid; gap: 10px; }
.geg > .geg__c li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px;
                    font-size: var(--fs-3); line-height: 1.45; }
.geg__c--a li { color: var(--ink-quiet); }
.geg__c--b li { color: var(--ink-strong); }
.geg__c--b .mk { color: var(--dgfe-yellow-800); font-weight: 500; }

.qvor { margin-top: clamp(24px, 2.8vw, 38px);
        border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(14px, 1.6vw, 20px); }
.qvor__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
           column-gap: var(--colgap); row-gap: 14px; margin-top: clamp(12px, 1.4vw, 18px); }
.qvor__l li { padding-left: clamp(11px, 1.1vw, 16px);
              border-left: 3px solid var(--dgfe-yellow-500);
              font-size: var(--fs-3); line-height: 1.4; color: var(--ink-strong); }

/* --- 14) RISIKOUMKEHR — drei Klauseln, hier NUMMERIERT -------------------
   Die Nummern stehen so im Ist-Text („Klausel 1/2/3") und bezeichnen
   Vertragsabsaetze. Das ist der Fall, in dem eine Nummerierung Bedeutung
   traegt statt sie vorzutaeuschen.
   ------------------------------------------------------------------------ */
.klausel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
           column-gap: clamp(18px, 2.4vw, 44px); row-gap: clamp(22px, 2.6vw, 34px); }
.klausel__i { min-width: 0; border-top: 2px solid var(--dgfe-yellow-500);
              padding-top: clamp(12px, 1.4vw, 18px); }
.klausel__n { display: block; font-size: var(--fs-2); letter-spacing: .17em;
              color: var(--dgfe-yellow-500); margin-bottom: clamp(10px, 1.2vw, 14px); }
.klausel p { margin-top: 10px; font-size: var(--fs-3); line-height: 1.5; }

/* Der § 5-Auszug. Er ist auf DIESER Seite nicht die Signature (das ist die
   Lastgang-Tafel), sondern Anhang: aufklappbar, dicht, sachlich. Auf der
   KMU-Seite steht derselbe Text im Mittelpunkt — dort ist er das staerkste
   Argument, hier ist es der Leistungspreis. Der Wortlaut ist auf beiden
   Seiten zeichengleich. */
.p5 { margin-top: clamp(26px, 3vw, 42px); border-top: 1px solid var(--rule-n2); }
.p5__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(16px, 1.8vw, 22px);
         font-family: var(--ff-dsp); font-variation-settings: "wdth" 82, "wght" 660;
         font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
         font-size: var(--fs-3); line-height: 1.3; color: #fff;
         transition: color var(--t-ui) var(--e-shut); }
.p5__q::-webkit-details-marker { display: none; }
.p5__q::marker { content: ""; }
.p5__s { position: relative; width: 18px; height: 18px; justify-self: end; }
.p5__s::before, .p5__s::after { content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 2px; background: var(--dgfe-yellow-500); }
.p5__s::after { transform: rotate(90deg); transition: transform 260ms var(--e-shut); }
.p5[open] .p5__s::after { transform: rotate(0deg); }
.p5__a { padding-bottom: clamp(18px, 2vw, 26px); max-width: 92ch; }
.jur { font-size: var(--fs-2); line-height: 1.6;
       text-align: justify; hyphens: auto; -webkit-hyphens: auto;
       color: var(--ink-n-muted); }
.jur ol { counter-reset: par; display: grid; gap: clamp(11px, 1.3vw, 15px); }
.jur li { counter-increment: par; display: grid;
          grid-template-columns: 2.1rem minmax(0, 1fr); }
.jur li::before {
  content: "(" counter(par) ")"; grid-column: 1;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 72, "wght" 620;
  font-size: var(--fs-2); letter-spacing: .04em; color: var(--dgfe-yellow-500);
  font-variant-numeric: tabular-nums; padding-top: .18em;
}
.jur__f { margin-top: clamp(16px, 1.8vw, 22px); padding-top: 12px;
          border-top: 1px solid var(--rule-n2); text-align: left;
          font-size: var(--fs-2); line-height: 1.5; color: var(--ink-n-quiet); }
.jur__f b { color: var(--dgfe-yellow-500); font-weight: inherit; }

/* --- 15) VERSORGER + KENNZAHLEN ------------------------------------------ */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
         gap: clamp(8px, 1vw, 14px); margin-top: clamp(16px, 1.8vw, 24px); }
.logos > li { display: grid; place-items: center; min-height: 64px; padding: 10px;
              border: 1px solid var(--rule); background: var(--paper);
              font-family: var(--ff-dsp); font-variation-settings: "wdth" 68, "wght" 600;
              font-size: var(--fs-2); letter-spacing: .13em; text-transform: uppercase;
              color: var(--ink-quiet); text-align: center; }
.kz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 2px solid var(--dgfe-navy-500); }
.on-navy .kz { border-top-color: var(--dgfe-yellow-500); }
.kz__i { padding: clamp(16px, 1.9vw, 24px) clamp(12px, 1.4vw, 20px)
                 clamp(16px, 1.9vw, 24px) 0;
         border-left: 1px solid var(--rule); }
.on-navy .kz__i { border-left-color: var(--rule-n); }
.kz__i:first-child { border-left: 0; }
.kz__i + .kz__i { padding-left: clamp(12px, 1.4vw, 20px); }
.kz__v { display: block; font-size: var(--fs-8); color: var(--ink-strong); }
.on-navy .kz__v { color: #fff; }
.kz__k { display: block; margin-top: 9px; font-size: var(--fs-2); letter-spacing: .16em;
         color: var(--ink-quiet); }
.on-navy .kz__k { color: var(--ink-n-quiet); }

/* --- 16) REFERENZAUFSTELLUNG — drei Industriekunden ----------------------
   Keine drei gleichen Kacheln: eine Aufstellung. Zitat links, Kennwert
   rechts in eigener Spalte — dieselbe Logik wie die Messprotokoll-Kolonne
   der ganzen Seite, eine Ebene kleiner.
   ------------------------------------------------------------------------ */
.ref { border-top: 2px solid var(--dgfe-navy-500); }
.ref__i { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
          gap: 12px clamp(20px, 2.6vw, 46px);
          padding-block: clamp(20px, 2.4vw, 30px);
          border-bottom: 1px solid var(--rule); align-items: start; }
.ref__q { font-family: var(--ff-dsp); font-variation-settings: "wdth" 92, "wght" 480;
          font-weight: 400; font-size: var(--fs-4); line-height: 1.42;
          letter-spacing: -.004em; color: var(--ink-strong); text-wrap: pretty; }
.ref__nm { display: block; margin-top: clamp(12px, 1.4vw, 18px);
           font-size: var(--fs-2); line-height: 1.5; color: var(--ink-quiet); }
.ref__nm b { font-family: var(--ff-dsp); font-variation-settings: "wdth" 80, "wght" 660;
             font-weight: 600; color: var(--ink-strong); margin-right: .5em; }
.ref__v { font-family: var(--ff-dsp); font-variation-settings: "wdth" 84, "wght" 720;
          font-weight: 700; font-size: var(--fs-5); line-height: 1.15;
          letter-spacing: -.01em; color: var(--ink-accent);
          font-variant-numeric: tabular-nums; }
.ref__u { display: block; margin-top: 7px; font-size: var(--fs-2); letter-spacing: .15em;
          color: var(--ink-quiet); }

/* --- 17) DATENBLATT — was den Wizard ersetzt -----------------------------
   Drei Abschnitte, exakt die drei Schritte des Ist-Formulars. Statt Felder
   stehen hier die Fragen und die Werte, die zur Wahl stehen. Wer das liest,
   weiss vor dem ersten Klick, worauf er sich einlaesst — und die Anfrage
   laeuft ueber den bestehenden Weg.
   ------------------------------------------------------------------------ */
.db { border-top: 2px solid var(--dgfe-navy-500); }
.db__i { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
         gap: 10px 0; padding-block: clamp(18px, 2.1vw, 28px);
         border-bottom: 1px solid var(--rule); }
.db__n { text-align: right; padding-right: var(--rulegap);
         font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.db__c { padding-left: var(--rulegap); border-left: 1px dotted var(--rule-2); }
.db__q { display: block; font-family: var(--ff-dsp);
         font-variation-settings: "wdth" 84, "wght" 680; font-weight: 600;
         text-transform: uppercase; letter-spacing: .028em;
         font-size: var(--fs-3); line-height: 1.2;
         color: var(--ink-strong); }
.db__c > p { margin-top: 9px; font-size: var(--fs-3); max-width: 76ch; }
.feld { margin-top: clamp(14px, 1.6vw, 20px); }
.feld__k { display: block; font-family: var(--ff-dsp);
           font-variation-settings: "wdth" 72, "wght" 620; font-weight: 600;
           font-size: var(--fs-2); letter-spacing: .13em; text-transform: uppercase;
           color: var(--ink-strong); }
/* `flex-shrink: 0` ist Pflicht: Flex-Kinder schrumpfen sonst unter ihre
   Inhaltsbreite, und mit `white-space: nowrap` laeuft der Text aus seinem
   Kasten heraus — die Werte laegen dann uebereinander. */
.wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.wahl > li { flex: 0 0 auto; padding: 5px 10px;
             border: 1px solid var(--rule-2); border-radius: 3px;
             font-family: var(--ff-dsp); font-variation-settings: "wdth" 74, "wght" 550;
             font-size: var(--fs-2); letter-spacing: .04em; color: var(--ink-strong);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Die langen Werte (ganze Saetze) duerfen NICHT `flex: 0 0 auto` behalten:
   ihre Inhaltsbreite liegt bei 465-646 px und schob bei 360 px die halbe
   Seite hinaus. `0 1 auto` laesst sie schrumpfen, `white-space: normal`
   laesst sie umbrechen. */
.wahl--frei > li { white-space: normal; flex: 0 1 auto; max-width: 100%; }

/* --- 18) DATENSCHUTZ / NDA ------------------------------------------------ */
.nda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
       column-gap: clamp(20px, 2.6vw, 46px); row-gap: clamp(16px, 1.9vw, 24px); }
.nda > div { padding-left: var(--rulegap); border-left: 1px solid var(--rule-n2); }
.nda dt { font-family: var(--ff-dsp); font-variation-settings: "wdth" 80, "wght" 660;
          font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
          font-size: var(--fs-2); color: #fff; margin-bottom: 6px; }
.nda dd { font-size: var(--fs-3); line-height: 1.5; }

/* --- 19) 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); }
/* Drei Zellen, alle drei ausdruecklich platziert. Ohne `.faq__t` war der
   Fragetext ein anonymes Grid-Kind: bei 390 px, wo die Kennung eine eigene
   Zeile bekommt, rutschte er in die 20-px-Spalte des Schalters und lief
   99 px aus der Seite. */
.faq__q { list-style: none; cursor: pointer; display: grid;
          grid-template-columns: 3.4rem minmax(0, 1fr) 20px;
          gap: clamp(10px, 1.4vw, 22px); align-items: center;
          padding-block: clamp(15px, 1.7vw, 21px);
          font-family: var(--ff-dsp); font-variation-settings: "wdth" 88, "wght" 640;
          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: ""; }
/* Die Kennung Q1…Q17 steht so im Ist-Text und ist dort eine echte Nummer:
   Fragen werden im Gespraech mit ihr referenziert. */
.faq__n { grid-column: 1; font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 620;
          font-weight: 600; font-size: var(--fs-2); letter-spacing: .12em;
          color: var(--ink-quiet); font-variant-numeric: tabular-nums; }
.faq__t { grid-column: 2; min-width: 0; }
.faq__s { grid-column: 3; 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(18px, 2vw, 26px); padding-left: calc(3.4rem + clamp(10px, 1.4vw, 22px)); }
.faq__a p { font-size: var(--fs-3); line-height: 1.55; max-width: 84ch; }

/* --- 20) BILDSTREIFEN ----------------------------------------------------- */
.band__cap { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
             padding-top: 10px; }
.band__cap .cap { margin-top: 0; }

/* --- 21) ABSCHLUSS -------------------------------------------------------- */
.abs__in { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
           align-items: stretch; }
.abs__ph { position: relative; overflow: hidden; min-height: 100%; }
.abs__ph .ph { position: absolute; inset: 0; }
.abs__tx { padding: var(--secY-lg) 0 var(--secY-lg) clamp(24px, 4vw, 76px); }
/* Satzbreite des Abschlussblatts — als Klasse, nicht als Inline-Style: was
   dort steht, laesst sich per Media-Query nicht mehr korrigieren. */
.abs__w { width: min(calc(var(--page) * .58), 100% - var(--gut)); }
.abs__ft { margin-top: clamp(26px, 3vw, 44px); padding-top: 13px;
           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); }
.abs__ft b { color: var(--dgfe-yellow-500); font-weight: inherit; }

/* --- 22) Footer — zeichengleich zur Familie ------------------------------- */
.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; }
.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__sub { margin-top: 8px; }
.foot__adr { margin-top: var(--dgfe-space-lg); }
.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); }
.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); }

.markdots { display: flex; gap: 7px; margin-bottom: clamp(12px, 1.4vw, 18px); }
.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); }

/* --- 23) Bewegung ---------------------------------------------------------
   Die fuenf Verhalten stehen in der gemeinsamen Bewegungsschicht
   (`<style id="bewegung-css">`, Quelle `preview/_bewegung.css`). Hier steht
   nur, was DIESER Seite gehoert.

   Was weg ist und warum:

   `.motion .r` / `.grp > *` / `.lm i`
       liessen Text fahren. Regel A: Text bewegt sich nie, er wird
       aufgedeckt. Jetzt `data-auf`.

   `--i * 70ms`
       70 ms mal sieben Verlustposten sind fast eine halbe Sekunde Zappeln.
       Die Schicht staffelt mit 34 ms ueber `--b-nr`.

   `.motion .ph img { scale: 1.075 }`
       eine zweite Geste auf demselben Foto, neben dem Vorhang. Eine davon
       reicht, und der Vorhang kommt aus der Welt des Gegenstands.
   ------------------------------------------------------------------------ */
.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; }

/* Der Vorhang vor dem Foto. Er haengt an `data-auf` der Figur selbst. */
[data-auf] .ph__shut { transform: translateY(0); }
[data-auf].b-da .ph__shut {
  transform: translateY(-101%);
  transition: transform var(--t-shut) var(--e-shut) var(--b-halt, 0ms);
}

/* --- 23a) DIE SPITZENLAST-TAFEL ------------------------------------------
   Der Musterfall fuer `data-spur`: 96 Viertelstundenwerte sind eine
   Aufzeichnung ueber einen Tag. Dass sie sich links nach rechts schreibt,
   ist die Sache selbst und keine Verzierung. Zwei Bahnen, und die zweite
   laeuft versetzt — sonst liest man sie als eine dicke Linie.

   WARUM `--b-laenge` HIER AUS DER SEITE KOMMT UND NICHT AUS DER MESSUNG:
   die Schicht misst `getTotalLength()` und schreibt das Ergebnis als
   Inline-Style. Diese beiden Bahnen tragen aber `vector-effect:
   non-scaling-stroke`, und damit rechnet der Browser das Strichmuster im
   BILDSCHIRMRAUM, waehrend `getTotalLength()` den NUTZERRAUM liefert. Dazu
   laeuft das SVG mit `preserveAspectRatio="none"`, x und y sind also
   unterschiedlich gestaucht. Nachgemessen ueber die Breiten:

       Fensterbreite     gezeichnet (px)      getTotalLength()
       320                969 / 679            1668 / 1337
       900               1319 / 1077           1668 / 1337
       1440              1870 / 1496           1668 / 1337
       ab 1920           2020 / 1662           1668 / 1337

   Ab etwa 1280 px liegt der gemessene Wert UNTER der gezeichneten Laenge —
   die Kurve bliebe stehen und die letzten Stunden des Tages fehlten. Genau
   dieser Fehler war schon einmal da. Deshalb steht der Strichabstand hier
   als Festwert knapp ueber dem Maximum der jeweiligen Breite, mit
   `!important`, weil eine Autoren-Regel mit `!important` den Inline-Style
   der Schicht schlaegt.
   ------------------------------------------------------------------------ */
.lg__vor  { --b-laenge: 1360 !important; --b-halt: 120ms; }
.lg__nach { --b-laenge: 1120 !important; --b-halt: 420ms; }
@media (min-width: 901px) {
  .lg__vor  { --b-laenge: 2060 !important; }
  .lg__nach { --b-laenge: 1700 !important; }
}

/* --- 23c) Die Hover-Klammer -----------------------------------------------
   Alle Hover-Regeln der Seite an EINER Stelle und in
   `@media (hover: hover) and (pointer: fine)`. Ohne die Klammer wenden
   Telefone Hover-Stile beim Antippen an und lassen sie haengen — eine
   angetippte Zeile bliebe dauerhaft hervorgehoben.

   Die `:focus-visible`-Haelften stehen oben bei ihren Bauteilen und sind
   bewusst NICHT eingeklammert: sie sind die Tastaturanzeige.

   Keine dieser Regeln zeigt Inhalt, der sonst fehlt — auf dieser Seite ist
   deshalb kein `data-zeigt` noetig.
   ------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover .btn__a { transform: translateX(6px); }
  .btn--ghost:hover  { border-color: var(--dgfe-yellow-500); }
  .btn--onnavy:hover { border-color: var(--dgfe-blue-500); }
  .nav a:hover,
  .nav__partb:hover  { color: var(--dgfe-color-link); }
  .p5__q:hover       { color: var(--dgfe-yellow-500); }
  .faq__q:hover      { color: var(--dgfe-color-link); }
  .foot .foot__ls a:hover { color: #fff; }
}

/* --- 23b) Farbe beim Scrollen: der Ruhezustand bleibt Duotone ------------- */
.ph--farbe img {
  filter: grayscale(var(--gs, 1))
          contrast(calc(1 + .17 * var(--gs, 1)))
          brightness(calc(1 + .06 * var(--gs, 1)));
}
.ph--farbe {
  background-color: color-mix(in srgb,
    var(--dgfe-navy-500) calc(var(--nv, 1) * 100%), transparent);
}
.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);
}

/* --- 24) Breakpoints ----------------------------------------------------- */

/* --- Die Beischrift dieser Seite sitzt eine Sprosse hoeher -----------------
   Dieselbe Leiter wie ueberall, nur anders belegt. Grossverbraucher setzt
   Archivo mit "wdth" 68-76 in Versalien; die KMU-Seite laeuft auf 104.
   Gesperrte Versalien lesen sich bei gleicher Pixelgroesse kleiner als
   Gemischtsatz, schmale erst recht — bei 14,3px war die Beischrift hier
   spuerbar leiser als die gleich grosse auf KMU, obwohl die Zahl dieselbe
   war. Eine gemeinsame Skala heisst gleiche Stufen, nicht gleiches
   Aussehen: hier traegt die Beischrift fs-3 statt fs-2.

   Das kollidiert nicht mit dem Fliesstext, der auf derselben Stufe steht:
   Versalien, Laufweite, schmale Achse und der ruhigere Ton trennen die
   beiden vollstaendig. `.cond` liegt auf dieser Seite ausschliesslich auf
   Kennungen — keine Knoepfe, keine Navigation. */
.cond { font-size: var(--fs-3); }

@media (max-width: 1180px) {
  .abs__in { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  :root { --page: 900px; }
  .foot { grid-template-columns: 1fr 1fr; }

  /* Die Anzeige verschwindet hier NICHT mehr — sie wird kurz, siehe oben. */
  .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] { border-bottom-color: var(--rule);
    border-left: 3px solid var(--dgfe-yellow-500); padding-left: 11px; }
  .nav a[aria-current]::after { content: none; }
  /* Der Partner-Block wird Teil des ausgeklappten Menues. Kein zweites
     Aufklappen im Aufklappen: der Knopf verschwindet, an seiner Stelle steht
     die Rubrik als Beschriftung, die beiden Ziele stehen offen darunter. */
  .nav__part { flex-direction: column; align-items: stretch;
    margin-left: 0; padding-left: 0; border-left: 0;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-2); }
  .nav__partb { display: none; }
  .nav__partcap { display: block; padding: 4px 0 6px;
    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); }
  .nav__partm { position: static; min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none; }
  .nav .nav__partm a { min-height: 48px; padding: 7px 0;
    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); }

  .qvor__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .klausel { grid-template-columns: 1fr; }
}
/* Unter 900 px faellt die Messprotokoll-Kolonne weg. Sie geht nicht verloren:
   sie wird zur waagerechten Werteleiste unter dem Satzspiegel. Die Zahlen
   bleiben also vollstaendig, nur ihre Lage aendert sich. */
@media (max-width: 900px) {
  :root { --kenn: 0px; --kenngap: 0px; }
  .pr { grid-template-columns: minmax(0, 1fr); }
  .pr::before { content: none; }
  .pr__b, .pr__k { grid-column: 1; }
  .pr__k { grid-row: auto; }
  .kw { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        column-gap: clamp(14px, 2.6vw, 28px); }
  .marken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marken > li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .marken > li:nth-child(n+3) { border-top: 1px solid var(--rule-n); }
  .geg { grid-template-columns: 1fr; }
  .lgang__kw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lgang__kw > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .lgang__kw > div:nth-child(n+3) { border-top: 1px solid var(--rule-n); }
  .nda { grid-template-columns: 1fr; }
  .abs__in { grid-template-columns: 1fr; }
  .abs__ph { min-height: clamp(200px, 42vw, 320px); }
  /* Seitenrand wie im .sheet — sonst klebt das Abschlussblatt an der Kante. */
  .abs__tx { padding: var(--secY) var(--gut) var(--secY-lg); }
  .abs__w { width: 100%; }
}
@media (max-width: 767px) {
  :root { --header-h: 60px; --header-h-sm: 52px; --rulegap: var(--dgfe-space-md); }
  .g { row-gap: 24px; }
  .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; }

  /* Schmale Versalien brauchen bei 22-33 px mehr Durchschuss als auf dem
     Plakat — sonst stossen Trema und Oberlaenge zusammen. */
  .h1, .h2 { line-height: 1.12; }
  .hero .h1 { max-width: none; }
  .band .ph--21x9 { aspect-ratio: 16 / 9; }

  /* Genau HIER faellt die Grammatik „rechtsbuendig gegen eine gepunktete
     Kante", naemlich wenn die zweite Spalte verschwindet. */
  .verl__i { grid-template-columns: 1fr; }
  .verl__r { text-align: left; padding-right: 0; white-space: normal; }
  .verl__c { padding-left: 0; border-left: 0; }
  .db__i { grid-template-columns: 1fr; }
  .db__n { text-align: left; padding-right: 0; }
  .db__c { padding-left: 0; border-left: 0; }
  .ref__i { grid-template-columns: 1fr; }

  .marken { grid-template-columns: 1fr; }
  .marken > li { border-left: 0; padding-left: 0; padding-right: 0; }
  .marken > li + li { border-top: 1px solid var(--rule-n); padding-left: 0; }
  .qvor__l { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz { grid-template-columns: 1fr; }
  .kz__i { border-left: 0; padding-left: 0; padding-right: 0; }
  .kz__i + .kz__i { border-top: 1px solid var(--rule); padding-left: 0; }
  .on-navy .kz__i + .kz__i { border-top-color: var(--rule-n); }
  .lgang__kw { grid-template-columns: 1fr; }
  .lgang__kw > div { border-left: 0; padding-left: 0; padding-right: 0; }
  .lgang__kw > div + div { border-top: 1px solid var(--rule-n); padding-left: 0; }

  /* Blocksatz bei 358 px Satzbreite reisst Woerter auseinander. */
  .jur { text-align: left; }
  /* Die Fragenkennung wandert bei schmaler Spalte ueber die Frage. Alle drei
     Zellen werden neu platziert — sonst landet der Fragetext in der 20-px-
     Spalte des Schalters. */
  .faq__q { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 5px; align-items: start; }
  .faq__n { grid-column: 1; grid-row: 1; }
  .faq__t { grid-column: 1; grid-row: 2; }
  .faq__s { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .faq__a { padding-left: 0; }

  /* Auf dem Telefon haben die beiden Marken keinen Platz fuer eigene
     Beschriftungen — die Legende unter der Bahn benennt sie ohnehin. */
  .lg__tag { display: none; }

  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .band .ph--21x9 { aspect-ratio: 3 / 2; }
  .acts .btn, .foot__act .btn { width: 100%; }
}

/* --- 25) Reduced Motion: alles sichtbar, ohne einen einzigen Scroll ------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Die Bewegungsschicht stellt `data-auf`, `data-auszug`, `data-spur`,
     `data-marke` und `data-zaehl` selbst auf den Endzustand. Hier bleiben
     nur die beiden Dinge, die dieser Seite gehoeren. */
  [data-auf] .ph__shut { transform: translateY(-101%) !important; }
  /* Der Lastgang steht fertig gezeichnet da — er ist Information, keine Deko.
     `stroke-dasharray: none` ist noetig, weil der Festwert oben mit
     `!important` gesetzt ist und die Regel der Schicht sonst nicht traegt. */
  .lg__vor, .lg__nach { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .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;
  }
}


/* Ohne Skript setzt niemand `.b-da`. Damit die Seite dann nicht leer bleibt,
   stehen alle fuenf Verhalten sofort im Endzustand. */
[data-auf], [data-auszug], [data-flaeche], [data-marke] { opacity: 1; translate: none; }
[data-spur] { stroke-dashoffset: 0; }
[data-auf] .ph__shut { transform: translateY(-101%); }

/* Der GSP-Eintrag ist kein Link, solange die Seite Entwurf ist. Er sieht
   aus wie einer, damit die Liste nicht auseinanderfaellt, aber er ist
   nicht anklickbar und nicht fokussierbar. */
.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; }