/* ===========================================================================
   ROUTE A · UNTERSEITE „ENERGIEOPTIMIERUNG FÜR KMU"
   ---------------------------------------------------------------------------
   Familienverhaeltnis zu Startseite / Energiebeschaffung / Energiesiegel:

   IDENTISCH   Tokens, Archivo+Poppins, Abstandsskala, der EINE Duotone-Grade
               ueber alle Fotos samt sektionsgebundener Einfaerbung, Header
               und Footer zeichengleich, Knoepfe, Fokusring, drei Beschleuni-
               gungskurven, Gelb als Linie/Kante/Punkt und genau EINE Flaeche,
               Partner-Aufklapper und Bewegungsschicht.

   EIGEN — und zwar Bauteil fuer Bauteil:

   1) DIE ORDNUNG IST WAAGERECHT. Energiebeschaffung ordnet senkrecht (Naht mit
      Sammelschiene), Energiesiegel ebenfalls (Stufenachse). Diese Seite hat
      KEINE senkrechte Ordnung. Jede Sektion oeffnet mit der MASSREGEL (.rgl):
      eine 2-px-Navy-Linie ueber die volle Satzbreite, links darauf das eine
      Mass, das im Text dieser Sektion steht (60 SEKUNDEN, 3 WERKTAGE,
      12 MONATE, 0 €, 24 H, 15 MINUTEN), rechts die Rubrik. Waagerechte Linien
      lesen leichter als eine durchgehende Senkrechte — und leicht ist der
      Auftrag dieser Seite.

   2) DIE SCHRIFT IST GEMISCHTSATZ. Die beiden Geschwisterseiten setzen ihre
      Ueberschriften in Versalien. Hier laufen sie in Gemischtsatz, Archivo
      wdth 104 / wght 720. Versalien wiegen; Gemischtsatz nicht. Derselbe
      Schnitt, andere Stimme.

   3) DIE SIGNATURE IST DIE KLAUSEL (.klausel). § 5 des Beauftragungsvertrags
      ist die einzige rechtlich bindende Zusage auf dieser Seite, und sie ist
      das staerkste, was die Seite hat. Deshalb ist sie der einzige DICHTE
      Block: Blocksatz, 15 px, Silbentrennung, ab 1025 px zweispaltig, mit
      einem gelben §-Feld — der einzigen gelben Flaeche der Seite. Alles
      andere ist luftig. Der Gewichtsunterschied IST die Aussage.
      Der Wortlaut ist zeichengleich uebernommen und nicht umformuliert.

   4) BAUTEIL-VOKABULAR aus dem Alltag eines Kleinbetriebs — Fristen, Aufwand,
      Zusagen: Massregel (.rgl) · Bereitlegen (.bereit) · Klausel (.klausel) ·
      blinde Flecken (.fleck) · Modellgegenueberstellung (.modell) ·
      Zusagenverzeichnis (.zusage). Weg sind: Sammelschiene, Preistreppe,
      Konditionenblatt, Tarifzeilen, Fristenleiste, Stufenachse, Stempelfeld.

   5) KEIN FORMULAR. Die Ist-Seite traegt einen Rechnungs-Upload. Er wird nicht
      nachgebaut (siehe docs/kontaktwege.md), sondern verlinkt: Weg 1,
      /anfrage-senden/, der Wizard mit Upload. Was das Formular an Aussagen
      trug (Felder, Verbrauchsklassen, Datenschutzhinweis), steht als
      BEREITLEGEN auf der Seite — inhaltlich vollstaendig, ohne zweiten
      Kontaktweg.
   =========================================================================== */

/* --- 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 und Kurven sind zeichengleich zu den Geschwisterseiten.
   Was hier ABWEICHT und warum:
   - kein --marg / --seam (es gibt keine senkrechte Naht)
   - --secY ist groesser: diese Seite ist die luftige der drei
   - --lh ist groesser (1,68 statt 1,62): mehr Durchschuss im Fliesstext
   ------------------------------------------------------------------------ */
: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, 30px);
  --rulegap: var(--dgfe-space-lg);
  --header-h: 68px;
  --header-h-sm: 54px;

  /* Luftiger als die Geschwister — der Auftrag dieser Seite ist „wenig". */
  --secY:    clamp(58px, 6.4vw, 102px);
  --secY-lg: clamp(72px, 8vw, 128px);

  --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 als Vordruck gebaut ist, ist ein
     Gummiband das falsche Register — 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.68;
  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); }

/* 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 im GEMISCHTSATZ, Poppins im Satz -------------
   Der eine Griff, der diese Seite sofort von ihren Geschwistern trennt:
   Ueberschriften laufen NICHT in Versalien. Versalien wiegen — auf einer
   Seite, deren ganzes Versprechen „wenig Aufwand" ist, waere das die falsche
   Stimme. Gemischtsatz bei wdth 104 traegt trotzdem Industrie, weil Archivo
   ein Grotesk aus der Werksbeschilderung ist und kein Buchgrotesk.
   ------------------------------------------------------------------------ */
.dsp {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 104, "wght" 720;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.021em;
  text-wrap: balance;
  color: var(--ink-strong);
}
.h1 { font-size: var(--fs-10); }
.h2 { font-size: var(--fs-9); }
.h3 {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 100, "wght" 640;
  font-weight: 600;
  font-size: var(--fs-4);
  line-height: 1.2; letter-spacing: -.008em; color: var(--ink-strong);
  text-wrap: balance;
}
/* Versalien bleiben genau dort, wo sie die Marke vorschreibt: Eyebrow,
   Rubrik, Beschriftung, Knopf. Also nur bei kleinen Graden. */
.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" 106, "wght" 740;
  font-weight: 700; line-height: .9; letter-spacing: -.028em;
  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: .18em; }
.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.62; font-weight: 300; }
.measure    { max-width: 60ch; }
.measure-sm { max-width: 46ch; }
.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); }
/* Kleingedrucktes: Quellen, Vorbehalte, Kennzeichnungen. */
.fine { font-size: var(--fs-2); line-height: 1.55; color: var(--ink-quiet); max-width: 88ch; }
.on-navy .fine { color: var(--ink-n-quiet); }

.hd { margin-bottom: clamp(14px, 1.5vw, 22px); }
.hd + .lead, .hd + p { margin-top: clamp(16px, 1.8vw, 26px); }
.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: DIE MASSREGEL --------------------------------------
   Statt einer senkrechten Naht eine WAAGERECHTE Regel je Sektion. Links das
   eine Mass, das im Text dieser Sektion vorkommt (nie erfunden), rechts die
   Rubrik. Die Regel ist die Ordnung der Seite: sie sagt in zwei Woertern,
   worum es im Folgenden geht und was es kostet.
   ------------------------------------------------------------------------ */
.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); }

.rgl {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 28px; flex-wrap: wrap;
  border-top: 2px solid var(--dgfe-navy-500); padding-top: 13px;
  margin-bottom: clamp(28px, 3.2vw, 48px);
}
.on-navy .rgl { border-top-color: var(--dgfe-yellow-500); }
.rgl__m {
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 74, "wght" 700;
  font-weight: 700; font-size: var(--fs-2); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.on-navy .rgl__m { color: var(--dgfe-yellow-500); }
.rgl__k { font-size: var(--fs-2); letter-spacing: .18em; color: var(--ink-quiet); }
.on-navy .rgl__k { color: var(--ink-n-quiet); }

/* Zwoelfer-Raster. Der Fliesstext haengt bei Spalte 3 — die Ueberschrift
   beginnt bei 1. Diese Staffel ersetzt die Marginalspalte der
   Geschwisterseiten: die Seite atmet nach rechts, nicht nach links. */
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
     column-gap: var(--colgap); row-gap: clamp(30px, 3.6vw, 58px); }
.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} .c3-9{grid-column:3/10}  .c3-12{grid-column:3/-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} .c4-12{grid-column:4/-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--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;
}

/* --- 7) Knoepfe — zeichengleich zu den Geschwisterseiten ------------------ */
.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);
}
/* Die Hover-Haelfte jeder dieser Regeln steht gesammelt in Abschnitt 25c,
   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 und gilt ueberall — sie ist die
   Tastaturanzeige und darf an keinem Geraet fehlen. */
.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); }
.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(26px, 3vw, 42px); }
.acts--tight { margin-top: clamp(18px, 2vw, 26px); }

/* --- 8) Header — zeichengleich zu den Geschwisterseiten ------------------- */
.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. Genau solche Teile machen den
   Unterschied zwischen Messgeraet und Standbild, deshalb kommt sie zurueck —
   nicht in ihrer breiten Form, sondern kurz: ohne die Trennlinie, mit
   kleineren Graden und ohne Umbruch.

   Die Bewegungsschicht bringt `.readout` global zurueck und stellt sie unter
   eine Grafik (`width: 100%`, `position: static`). Auf DIESER Seite sitzt sie
   aber in der Kopfzeile, nicht an einem Diagramm. `.site-header .readout`
   (0,2,0) schlaegt die Regel der Schicht (0,1,0) unabhaengig von der
   Reihenfolge — das ist Absicht und 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 — „2 Werktage" sagt fuer sich, was
   es ist. 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);
}
/* 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.
   `[aria-current]` statt `[aria-current="page"]`: diese Seite steht UNTER
   Energiebeschaffung und ist selbst kein Navigationspunkt. Der Elternpunkt
   traegt deshalb `aria-current="true"` (der richtige ARIA-Wert fuer „im
   Zweig"), nicht `page` — `page` waere eine Falschaussage gegenueber
   Screenreadern. Der Selektor greift bei beiden Werten. */
.nav a[aria-current] { 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. */
.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 — genau der Fehler, den die
   Hover-Klammer weiter unten behebt.
   ------------------------------------------------------------------------ */
.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);
}
/* Der Winkel dreht sich beim Aufklappen — 200 ms, kein Ueberschwinger. */
.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) Blattkopf ---------------------------------------------------------
   Ein schmaler Navy-Streifen unter dem Header, der die Seite benennt. Er
   ersetzt den Navy-Hero: der Hero selbst steht auf Papier, weil diese Seite
   die helle der drei ist.
   ------------------------------------------------------------------------ */
.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 ------------------------------------------------------------- */
.hero > .sheet { padding-block: clamp(42px, 5vw, 78px) clamp(38px, 4.4vw, 66px); }
.hero .h1 { max-width: 15ch; }
.hero__lead { margin-top: clamp(20px, 2.2vw, 32px); max-width: 52ch; }
/* Die grosse Zahl steht NICHT als Kachel neben der Headline, sondern haengt
   in der rechten Spalte an einer eigenen Regel — dieselbe Grammatik wie die
   Massregel oben, eine Ebene kleiner. */
.spar { border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(14px, 1.6vw, 20px); }
.spar__k { display: block; font-size: var(--fs-2); letter-spacing: .18em;
           text-transform: uppercase; color: var(--ink-quiet); }
.spar__v { display: block; margin-top: clamp(10px, 1.2vw, 16px);
           font-size: var(--fs-10); color: var(--ink-strong); }
.spar__n { display: block; margin-top: clamp(10px, 1.2vw, 16px); font-size: var(--fs-3);
           line-height: 1.5; color: var(--ink-quiet); max-width: 30ch; }

/* Vertrauensmarken. Vier gleich grosse Kacheln waeren genau der Verraeter aus
   dem Playbook — deshalb eine Zeile mit Haarlinien dazwischen, Bezeichnung
   fett, Erlaeuterung darunter, in einer Flucht. */
.marken { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
          display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.marken li { padding: clamp(16px, 1.9vw, 24px) clamp(14px, 1.5vw, 22px);
             border-left: 1px solid var(--rule); }
.marken li:first-child { border-left: 0; padding-left: 0; }
.marken__k { display: block; margin-bottom: 8px;
             font-family: var(--ff-dsp); font-variation-settings: "wdth" 84, "wght" 660;
             font-weight: 600; font-size: var(--fs-2); letter-spacing: .01em;
             color: var(--ink-strong); }
.marken__t { font-size: var(--fs-2); line-height: 1.5; color: var(--ink-quiet); }

/* --- 11) BEREITLEGEN — was den Upload ersetzt -----------------------------
   Die Ist-Seite traegt hier ein Formular. Statt ein zweites Formular zu
   bauen (verboten, siehe kontaktwege.md), steht hier, WAS man bereitlegt.
   Das ist dieselbe Information, macht die 60 Sekunden ueberpruefbar und
   fuehrt auf Weg 1, der den Upload wirklich hat.
   ------------------------------------------------------------------------ */
.bereit { display: grid; gap: 0; border-top: 1px solid var(--rule); }
/* `>` ist Pflicht, kein Nachfahren-Selektor: in der dritten Zeile steckt die
   Liste der Verbrauchsklassen, und `.bereit li` haette deren Chips ebenfalls
   auf `display:grid` gesetzt. Sie wurden dadurch auf 56 px gestaucht, ihr
   Text lief aus dem Kasten (mit `white-space: nowrap`) und die Liste schob
   den Satzspiegel bei 390 px um 3 px nach rechts. */
.bereit > li { display: grid; grid-template-columns: 22px minmax(0, 1fr);
             gap: clamp(12px, 1.4vw, 18px);
             padding-block: clamp(13px, 1.5vw, 18px);
             border-bottom: 1px solid var(--rule); }
.bereit .tk { color: var(--dgfe-yellow-800); font-weight: 500; }
.bereit__t { font-size: var(--fs-3); line-height: 1.5; }
.bereit__t b { display: block; font-family: var(--ff-dsp);
               font-variation-settings: "wdth" 96, "wght" 620; font-weight: 600;
               font-size: var(--fs-3); color: var(--ink-strong); margin-bottom: 3px; }
/* Die fuenf Verbrauchsklassen des Formulars — als Aufzaehlung, nicht als
   Auswahlfeld. Sie sagen dem Betrieb, in welcher Groessenordnung er denkt. */
.klassen { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
/* `flex-shrink: 0` ist Pflicht: Flex-Kinder schrumpfen sonst unter ihre
   Inhaltsbreite, und zusammen mit `white-space: nowrap` laeuft der Text aus
   seinem Kasten heraus — die fuenf Klassen lagen dann uebereinander. */
.klassen > li { flex: 0 0 auto; padding: 6px 11px; border: 1px solid var(--rule-2); border-radius: 3px;
              font-family: var(--ff-dsp); font-variation-settings: "wdth" 76, "wght" 550;
              font-size: var(--fs-2); letter-spacing: .04em; color: var(--ink-strong);
              font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- 12) DIE KLAUSEL — die Signature --------------------------------------
   Der einzige dichte Block der Seite. Alles andere atmet; hier steht ein
   Vertragstext, und er sieht aus wie einer: Blocksatz, 15 px, Silbentrennung,
   zweispaltig, nummerierte Absaetze. Die Nummerierung ist hier erlaubt und
   noetig — es sind Vertragsabsaetze, keine Dekoration.

   Das §-Feld ist DIE eine gelbe Flaeche der Seite.
   ------------------------------------------------------------------------ */
.klausel__hd { display: grid; grid-template-columns: auto minmax(0, 1fr);
               gap: clamp(18px, 2.2vw, 30px); align-items: start; }
/* Abstand zum Fliesstext, der auf das Aktenfeld folgt. */
.klausel + .g { margin-top: clamp(34px, 4vw, 58px); }
.klausel__mk { width: clamp(56px, 6vw, 82px); height: clamp(56px, 6vw, 82px);
               display: grid; place-items: center;
               background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500);
               font-family: var(--ff-dsp); font-variation-settings: "wdth" 100, "wght" 740;
               font-weight: 700; font-size: var(--fs-9); line-height: 1; }
/* DAS AKTENFELD. Der Vertragsauszug bekommt einen eigenen Rahmen und eine
   eigene, deutlich engere Satzbreite (92ch statt der 1360 px des Blatts).
   Genau daher kommt die Wirkung: ein dichter, kleiner gesetzter Fremdkoerper
   in einem sonst weiten Feld. Ohne die Begrenzung liefe der Vertragstext auf
   150 Zeichen Zeilenlaenge — und waere nicht dicht, sondern nur breit. */
.akt { margin-top: clamp(26px, 3vw, 42px); max-width: 92ch;
       border: 1px solid var(--rule-n2);
       padding: clamp(20px, 2.4vw, 34px) clamp(18px, 2.2vw, 32px); }
.klausel__q { display: block; margin-bottom: clamp(16px, 1.8vw, 22px);
              padding-bottom: 12px; border-bottom: 1px solid var(--rule-n);
              font-size: var(--fs-2); letter-spacing: .17em; text-transform: uppercase;
              color: var(--dgfe-yellow-500); }

/* Der Vertragssatz. Bewusst enger und kleiner als der Rest der Seite. */
.jur {
  font-size: var(--fs-2); line-height: 1.62;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  color: var(--ink-n-muted);
}
.jur ol { counter-reset: par; display: grid; gap: clamp(13px, 1.5vw, 18px); }
.jur li { counter-increment: par; display: grid;
          grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0; }
.jur li::before {
  content: "(" counter(par) ")"; grid-column: 1;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 74, "wght" 620;
  font-size: var(--fs-2); letter-spacing: .04em; color: var(--dgfe-yellow-500);
  font-variant-numeric: tabular-nums; text-align: left;
  padding-top: .18em;
}
.jur__f { margin-top: clamp(20px, 2.2vw, 28px); padding-top: 14px;
          border-top: 1px solid var(--rule-n2);
          font-size: var(--fs-2); line-height: 1.55; color: var(--ink-n-quiet);
          text-align: left; }
.jur__f b { color: var(--dgfe-yellow-500); font-weight: inherit; }

/* Die volle Klausel — aufklappbar, in derselben Grammatik. Sie ist laenger
   als der Auszug und darf den Lesefluss nicht anhalten. */
.voll { margin-top: clamp(20px, 2.2vw, 28px);
        border-top: 1px solid var(--rule-n2); }
.voll__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" 96, "wght" 620;
           font-weight: 600; font-size: var(--fs-3);
           line-height: 1.3; color: #fff;
           transition: color var(--t-ui) var(--e-shut); }
.voll__q::-webkit-details-marker { display: none; }
.voll__q::marker { content: ""; }
.voll__s { position: relative; width: 18px; height: 18px; justify-self: end; }
.voll__s::before, .voll__s::after { content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 2px; background: var(--dgfe-yellow-500); }
.voll__s::after { transform: rotate(90deg); transition: transform 260ms var(--e-shut); }
.voll[open] .voll__s::after { transform: rotate(0deg); }
.voll__a { padding-bottom: clamp(18px, 2vw, 26px); }
/* Definitionsliste: der Ist-Text ist genau so gebaut — Begriff, dann Satz. */
.vdl { display: grid; gap: clamp(14px, 1.6vw, 20px);
       font-size: var(--fs-3); line-height: 1.6; color: var(--ink-n-muted); }
.vdl dt { font-family: var(--ff-dsp); font-variation-settings: "wdth" 88, "wght" 640;
          font-weight: 600; font-size: var(--fs-2); letter-spacing: .01em; color: #fff;
          margin-bottom: 5px; }

/* --- 13) VIER BLINDE FLECKEN ---------------------------------------------
   Kein Kachelraster. Vier Zeilen mit Haarlinien, Aussage links gross,
   Erlaeuterung rechts. Die Marke am Zeilenanfang ist ein LEERES Feld — jede
   andere Liste dieser Seite fuehrt dort einen Haken. Die Luecke im Muster
   ist der blinde Fleck; sie behauptet keine Reihenfolge und keine Menge.
   ------------------------------------------------------------------------ */
.fleck { border-top: 1px solid var(--rule); }
.fleck__i { display: grid;
            grid-template-columns: 16px minmax(0, 26rem) minmax(0, 1fr);
            gap: 10px clamp(16px, 2.4vw, 40px);
            padding-block: clamp(20px, 2.3vw, 30px);
            border-bottom: 1px solid var(--rule); align-items: start; }
.fleck__mk { width: 15px; height: 15px; border: 1px solid var(--rule-2);
             margin-top: .34em; }
.fleck__t { font-family: var(--ff-dsp); font-variation-settings: "wdth" 100, "wght" 660;
            font-weight: 600; font-size: var(--fs-5);
            line-height: 1.18; letter-spacing: -.01em; color: var(--ink-strong);
            text-wrap: balance; }
.fleck p { font-size: var(--fs-3); max-width: 66ch; }

/* --- 14) DAS MODELL — zwei Stapel, kein Tabellenraster --------------------
   Der Ist-Text hat KEINE Kriterienspalte: er hat zwei Listen und darunter
   eine Bilanz. Genau so steht es hier. Die rechte Spalte traegt die einzige
   durchgehende gelbe Kante der Seite ausserhalb der Klausel.
   ------------------------------------------------------------------------ */
.modell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: clamp(20px, 2.4vw, 38px); align-items: start; }
.modell__c { min-width: 0; }
.modell__hd { display: flex; align-items: baseline; justify-content: space-between;
              gap: 10px 16px; flex-wrap: wrap;
              border-top: 2px solid var(--rule-2); padding-top: 12px;
              margin-bottom: clamp(14px, 1.6vw, 20px); }
.modell__c--b .modell__hd { border-top-color: var(--dgfe-yellow-500); }
.modell__k { font-family: var(--ff-dsp); font-variation-settings: "wdth" 80, "wght" 640;
             font-weight: 600; font-size: var(--fs-2); letter-spacing: .1em;
             text-transform: uppercase; color: var(--ink-strong); }
.modell__tag { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-accent); }
.modell ul { display: grid; gap: 11px; }
.modell li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 11px;
             font-size: var(--fs-3); line-height: 1.5; }
.modell__c--a li { color: var(--ink-quiet); }
.modell__c--a .mk { color: var(--ink-quiet); }
.modell__c--b li { color: var(--ink-strong); }
.modell__c--b .mk { color: var(--dgfe-yellow-800); font-weight: 500; }

.vorteil { margin-top: clamp(28px, 3.2vw, 46px);
           border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(16px, 1.8vw, 24px); }
.vorteil__k { display: block; margin-bottom: clamp(14px, 1.6vw, 20px);
              font-size: var(--fs-2); letter-spacing: .18em; color: var(--ink-quiet); }
.vorteil ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              column-gap: var(--colgap); row-gap: 16px; }
.vorteil li { padding-left: clamp(12px, 1.2vw, 18px);
              border-left: 3px solid var(--dgfe-yellow-500);
              font-size: var(--fs-3); line-height: 1.45; color: var(--ink-strong); }

/* --- 15) DREI SCHRITTE — echte Reihenfolge, deshalb nummeriert ------------ */
.tritt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
         column-gap: clamp(18px, 2.6vw, 46px); row-gap: clamp(26px, 3vw, 40px); }
.tritt__i { min-width: 0; border-top: 2px solid var(--dgfe-navy-500);
            padding-top: clamp(14px, 1.6vw, 20px); }
.tritt__n { display: block; font-family: var(--ff-dsp);
            font-variation-settings: "wdth" 88, "wght" 740; font-weight: 700;
            font-size: var(--fs-8); line-height: 1;
            color: var(--ink-accent); font-variant-numeric: tabular-nums;
            margin-bottom: clamp(12px, 1.4vw, 18px); }
.tritt p { margin-top: 11px; font-size: var(--fs-3); }
.tritt__d { display: block; margin-top: clamp(14px, 1.6vw, 20px); padding-top: 10px;
            border-top: 1px solid var(--rule);
            font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); }

/* --- 16) KENNZAHLEN + VERSORGER ------------------------------------------ */
.kz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 2px solid var(--dgfe-navy-500); }
.kz__i { padding: clamp(18px, 2.1vw, 28px) clamp(14px, 1.5vw, 22px)
                 clamp(18px, 2.1vw, 28px) 0;
         border-left: 1px solid var(--rule); }
.kz__i:first-child { border-left: 0; }
.kz__i + .kz__i { padding-left: clamp(14px, 1.5vw, 22px); }
.kz__v { display: block; font-size: var(--fs-9); color: var(--ink-strong); }
.kz__k { display: block; margin-top: 10px; font-size: var(--fs-2); letter-spacing: .16em;
         color: var(--ink-quiet); }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
         gap: clamp(8px, 1vw, 14px); margin-top: clamp(20px, 2.2vw, 30px); }
.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" 70, "wght" 600;
            font-size: var(--fs-2); letter-spacing: .13em; text-transform: uppercase;
            color: var(--ink-quiet); text-align: center; }

/* --- 17) MANDANTEN-STIMMEN — Hierarchie statt Kachelreihe -----------------
   Drei Stimmen, aber nicht drei gleiche Kacheln. Die eine, die die
   Schadenersatz-Klausel nennt, steht gross — sie sagt dasselbe wie die
   Signature dieser Seite. Die beiden anderen laufen darunter als Zeilen.
   ------------------------------------------------------------------------ */
.stimme { border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(18px, 2vw, 26px); }
.stimme__q { font-family: var(--ff-dsp); font-variation-settings: "wdth" 96, "wght" 560;
             font-weight: 500; font-size: var(--fs-6);
             line-height: 1.3; letter-spacing: -.012em; color: var(--ink-strong);
             text-wrap: pretty; }
.stimme__ft { display: flex; flex-wrap: wrap; align-items: baseline;
              justify-content: space-between; gap: 8px 20px;
              margin-top: clamp(16px, 1.8vw, 24px); padding-top: 12px;
              border-top: 1px solid var(--rule); }
.stimme__nm { font-family: var(--ff-dsp); font-variation-settings: "wdth" 84, "wght" 640;
              font-weight: 600; font-size: var(--fs-2); color: var(--ink-strong); }
.stimme__nm span { font-variation-settings: "wdth" 76, "wght" 400;
                   color: var(--ink-quiet); margin-left: .5em; }
.stimme__v { font-family: var(--ff-dsp); font-variation-settings: "wdth" 88, "wght" 700;
             font-weight: 700; font-size: var(--fs-3);
             letter-spacing: -.01em; color: var(--ink-accent);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.stimme--klein { border-top-width: 1px; border-top-color: var(--rule-2); }
.stimme--klein .stimme__q { font-size: var(--fs-3);
                            font-variation-settings: "wdth" 90, "wght" 400;
                            font-weight: 400; line-height: 1.5; letter-spacing: 0;
                            color: var(--ink); }

/* --- 18) SECHS HARTE ZUSAGEN — Verzeichnis, kein Kachelraster -------------
   Mehrspaltiger Satz statt Grid: sechs Eintraege fliessen wie in einem
   Leistungsverzeichnis durch zwei Spalten, getrennt von einer Haarlinie.
   Das ist eine andere Textur als jede Kachelreihe.
   ------------------------------------------------------------------------ */
.zusage { border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(20px, 2.2vw, 30px); }
.zusage__l { columns: 2; column-gap: clamp(28px, 4vw, 72px);
             column-rule: 1px solid var(--rule); }
.zusage__i { break-inside: avoid; page-break-inside: avoid;
             padding-bottom: clamp(20px, 2.3vw, 30px); }
.zusage dt { font-family: var(--ff-dsp); font-variation-settings: "wdth" 98, "wght" 660;
             font-weight: 600; font-size: var(--fs-4); line-height: 1.22;
             letter-spacing: -.008em; color: var(--ink-strong); margin-bottom: 8px; }
.zusage dd { font-size: var(--fs-3); line-height: 1.55; }

/* --- 19) DATENSICHERHEIT + PLAETZE --------------------------------------- */
.sich { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: var(--colgap); row-gap: 18px;
        border-top: 1px solid var(--rule); padding-top: clamp(16px, 1.8vw, 24px); }
.sich li { font-size: var(--fs-2); line-height: 1.5; padding-left: 13px;
           border-left: 1px solid var(--rule-2); }
.on-navy .sich { border-top-color: var(--rule-n); }
.on-navy .sich li { border-left-color: var(--rule-n2); }

/* --- 20) ZWEI WEGE -------------------------------------------------------- */
.weg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: clamp(20px, 2.6vw, 44px); align-items: start; }
.weg__i { min-width: 0; display: flex; flex-direction: column;
          border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(16px, 1.8vw, 24px); }
.weg__i--b { border-top-color: var(--rule-2); }
.weg__tag { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-accent); }
.weg__i--b .weg__tag { color: var(--ink-quiet); }
.weg h3 { margin-top: clamp(12px, 1.4vw, 18px); }
.weg p { margin-top: 12px; font-size: var(--fs-3); flex: 1 1 auto; }
.weg .btn { margin-top: clamp(18px, 2vw, 26px); align-self: flex-start; }
.weg__n { display: block; margin-top: 12px; font-size: var(--fs-2); line-height: 1.45;
          color: var(--ink-quiet); }

/* --- 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" 100, "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: ""; }
.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: 74ch; }

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

/* --- 23) ABSCHLUSS — waagerecht geteilt, passend zur Ordnung der Seite ---- */
.abs__ph { position: relative; overflow: hidden; }
.abs__ft { margin-top: clamp(28px, 3.2vw, 46px); 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); }
.abs__ft b { color: var(--dgfe-yellow-500); font-weight: inherit; }

/* --- 24) Footer — zeichengleich zu den Geschwisterseiten ------------------ */
.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); }

/* Pruefmarke aus der Wort-Bild-Marke */
.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); }

/* --- 24b) Hilfsklassen ----------------------------------------------------
   Ausschliesslich Abstand und Beschriftungsgrad. Sie ersetzen die
   `style`-Attribute im Markup: was dort steht, laesst sich per Media-Query
   nicht mehr korrigieren (Playbook 4.1).

   Genau eine Ausnahme steht im HTML: `style="--b-nr:N"`, die Lesenummer der
   Bewegungsschicht. Sie ist keine Rasterangabe, sondern eine Verzoegerung —
   sie hat auf keiner Breite einen anderen Wert und kann deshalb auch keine
   Media-Query aushebeln. Die Vorgabe schreibt genau diese Schreibweise vor.
   ------------------------------------------------------------------------ */
.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; }
.label { display: block; font-size: var(--fs-2); letter-spacing: .18em; color: var(--ink-quiet); }
.on-navy .label { color: var(--ink-n-quiet); }
.sich--stack { grid-template-columns: minmax(0, 1fr); }

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

   Was weg ist und warum:

   `.motion .r` / `.grp > *` / `.lm i`
       liessen Text fahren — 16 px hoch, 14 px hoch, eine ganze Zeilenhoehe.
       Regel A: Text bewegt sich nie, er wird aufgedeckt. Jetzt `data-auf`.

   `--i * 70ms`
       70 ms mal acht Geschwister sind 560 ms, in denen die Seite zappelt.
       Die Schicht staffelt mit 34 ms ueber `--b-nr` und liest sich dadurch
       als EIN Vorgang statt als acht.

   `.rgl__d`
       ein Balken in Sektionsfarbe, der die Massregel freigab. Die Regel ist
       jetzt selbst ein waagerechter Auszug (`data-auszug="quer"`), und zwei
       Gesten auf einem Bauteil sind eine zu viel. Der Balken ist auch aus
       dem Markup raus: ohne Skript verdeckte er die Linie dauerhaft.

   `.motion .ph img { scale: 1.075 }`
       eine zweite Geste auf demselben Foto, neben dem Vorhang. Chanels
       Regel — ein Teil wieder ablegen. Der Vorhang bleibt, weil er aus der
       Welt des Gegenstands kommt (Papiervorschub), das Zoomen nicht.
   ------------------------------------------------------------------------ */
.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 — die
   ist ohnehin das Element, das aufdeckt, und braucht keine zweite Klasse. */
[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);
}

/* --- 25c) Die Hover-Klammer -----------------------------------------------
   Alle Hover-Regeln der Seite, gesammelt 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, bis man
   woanders hintippt — eine angetippte Zeile bliebe dauerhaft hervorgehoben.

   Die `:focus-visible`-Haelften stehen weiter oben bei ihren Bauteilen und
   sind bewusst NICHT mit 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); }
  .voll__q:hover     { color: var(--dgfe-yellow-500); }
  .faq__q:hover      { color: var(--dgfe-color-link); }
  .foot .foot__ls a:hover { color: #fff; }
}

/* --- 25b) Farbe beim Scrollen: der Ruhezustand bleibt Duotone -------------
   Zeichengleich zu den Geschwisterseiten. Der Duotone besteht aus zwei
   Teilen — Grade auf dem Bild und Navy, mit dem es in Luminanz blendet.
   Beide fahren auf einem Fortschritt zurueck, in ZWEI Haelften: erst geht
   das Navy ab (Duotone → neutrales Grau), dann kommt die Farbe auf
   (Grau → Original). Sonst wird nichts angefasst.
   ------------------------------------------------------------------------ */
.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);
}
/* 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. `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);
}

/* --- 26) Breakpoints ----------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --page: 900px; }
  .foot { grid-template-columns: 1fr 1fr; }

  /* Der Header klappt frueher zusammen als das Blatt: vier Vorschau-Punkte
     plus Anzeige plus Knopf passen ab etwa 1000 px nicht mehr nebeneinander.
     Das Script liest den Zustand aus `getComputedStyle(.nav-toggle).display`
     und nicht aus einer zweiten Zahl.
     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, und die beiden Ziele stehen offen darunter.
     Das `hidden` am Menue nimmt das Script zurueck, sobald der Kopf
     zusammengeklappt ist — die Anzeige haengt also nicht an einer
     CSS-Regel, die ein `[hidden]`-Element sichtbar macht. */
  .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); }

  /* Vier Marken nebeneinander werden unter 1024 px zu schmalen Saeulen, in
     denen „Kostenfrei und unverbindlich" viermal umbricht. */
  .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); }
  .vorteil ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .g { row-gap: clamp(26px, 4vw, 40px); }
  .modell { grid-template-columns: 1fr; }
  .zusage__l { columns: 1; column-rule: 0; }
  .zusage__i + .zusage__i { border-top: 1px solid var(--rule);
                            padding-top: clamp(18px, 2.2vw, 26px); }
  .tritt { grid-template-columns: 1fr; }
  .weg { grid-template-columns: 1fr; }
  /* Untereinander gestellt trennt der Rasterabstand die beiden Wege sonst
     genauso weit wie einen Absatz von seinem eigenen Knopf. */
  .weg__i--b { padding-top: clamp(16px, 1.8vw, 24px); }
}
@media (max-width: 767px) {
  :root { --header-h: 60px; --header-h-sm: 52px; --rulegap: var(--dgfe-space-md); }
  .g { row-gap: 26px; }
  .c1-4,.c1-5,.c1-6,.c1-7,.c1-8,.c1-9,.c3-9,.c3-12,.c4-12,
  .c5-12,.c6-12,.c7-12,.c8-12,.c9-12 { grid-column: 1 / -1; }

  /* Gemischtsatz braucht bei 24-33 px etwas mehr Durchschuss als auf dem
     Plakat — sonst kleben Oberlaengen an der Zeile darueber. */
  .h1, .h2 { line-height: 1.1; }
  .hero .h1 { max-width: none; }

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

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

  /* Der blinde Fleck stapelt: Marke und Aussage in eine Zeile, Erlaeuterung
     darunter — die Luecke im Muster bleibt dabei erhalten. */
  .fleck__i { grid-template-columns: 16px minmax(0, 1fr); }
  .fleck p { grid-column: 2; }

  .vorteil ul { grid-template-columns: 1fr; }
  .kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz__i { padding-right: clamp(10px, 2vw, 16px); }
  .kz__i:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kz__i:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sich { grid-template-columns: 1fr; }

  /* Blocksatz bei 358 px Satzbreite reisst Woerter auseinander — der
     Vertragstext laeuft schmal im Flattersatz. */
  .jur { text-align: left; }
  .klausel__hd { grid-template-columns: 1fr; }

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

/* --- Telefon: Knopfkanten fluchten ---------------------------------------
   Nebeneinandergesetzte Knoepfe enden sonst auf fast, aber nicht ganz
   gleicher Breite. Kanten, die beinahe fluchten, sind schlimmer als solche,
   die es sichtbar nicht tun. */
@media (max-width: 560px) {
  .band .ph--21x9 { aspect-ratio: 3 / 2; }
  .acts .btn, .foot__act .btn { width: 100%; }
  .weg .btn { width: 100%; align-self: stretch; }
  .stimme__ft { gap: 6px; }
}

/* --- 27) 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 bleibt nur
     der Vorhang: er gehoert dieser Seite, und ohne diese Zeile bliebe das
     Foto dauerhaft zugedeckt. */
  [data-auf] .ph__shut { transform: translateY(-101%) !important; }
  /* Keine Einfaerbung beim Scrollen. Die Bilder stehen im abgenommenen
     Ruhezustand: der eine Duotone-Grade ueber ALLE Fotos ist das
     Familienmerkmal der Seiten, und dauerhaft bunte Bilder wuerden 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;
  }
}


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