/* ===========================================================================
   ÜBER UNS — die einzige Seite, auf der die DGfE über sich selbst spricht.

   AUSGANGSLAGE. Die Vorgängerseite war ein nie ausgefülltes Template:
   „put your headline here", „Our Team", viermal „Employee Name", viermal
   „lorem ipsum". Sie ist abgeschaltet. Es gibt also KEINEN Ist-Inhalt, der zu
   übernehmen wäre — und genau daran ist sie gescheitert: sie hat ein Team
   behauptet, das dort nie eingetragen wurde.

   DIE ANTWORT DARAUF IST DIE FORM DER SEITE. Sie ist als AKTENBLATT gesetzt,
   nicht als Firmenporträt. Jede Sektion trägt in ihrer Registerzeile rechts
   nicht einen Kennwert (so machen es die Schwesterseiten), sondern die
   QUELLE der Aussagen darunter: Impressum, Startseite, Kooperationsseite.
   Eine Über-uns-Seite, die ihre Belege mitführt. Das ist die inhaltliche
   Entscheidung, und sie kommt direkt aus dem Anlass.

   Konsequenz: die Seite ist kurz. Kein Team, keine Gesichter, kein
   Gründungsjahr, keine Mitarbeiterzahl, keine Auszeichnung, kein Kundenname —
   für nichts davon existiert ein Beleg. Wo Material fehlt, steht nichts.
   Die Lücken sind im README als offene Punkte aufgeführt.

   DIE SIGNATURE: DIE EINTRAGUNG (Abschnitt 02). „DGfE — Deutsche Gesellschaft
   für Energie ist eine Geschäftsbezeichnung der AK-FAMILY GmbH." Das steht im
   Impressum, gehört aber hierher: es ist Transparenz, kein Kleingedrucktes.
   Zwei Namen, eine gezeichnete Verbindung, die Registerangaben daneben.
   Das ist die eine laute Stelle der Seite; alles andere bleibt still.

   VERHÄLTNIS ZU DEN SCHWESTERSEITEN. Diese Seite spricht in der VOLLEN
   Hausstimme der Startseite: Archivo Versalien, wdth 116, sehr eng. Die
   Partnerseiten (Swiss Direkt, GSP) sprechen bewusst leiser und in
   Gemischtschreibung, weil dort über eine fremde Firma geredet wird. Hier
   redet niemand über einen anderen. Auch der zweite Papierton ist der der
   Startseite (blaustichig), nicht der Steinton der Partnerseiten — der
   Papierton sagt, in wessen Kapitel man ist.
   =========================================================================== */

/* --- 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-focus-ring: var(--dgfe-yellow-500);

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

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

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

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

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

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

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

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

/* --- 2) SEITEN-SCHICHT ---------------------------------------------------- */
:root {
  /* Der zweite Papierton ist der der Startseite (blaustichig), NICHT der
     neutrale Stein der Partnerseiten. Unser Kapitel, unser Papier. */
  --paper:   #ffffff;
  --paper-2: color-mix(in srgb, var(--dgfe-navy-50) 62%, white);

  --ink:        var(--dgfe-navy-400);   /*  9,9:1 auf Weiss (AAA) */
  --ink-strong: var(--dgfe-navy-500);   /* 14,4:1 */
  --ink-quiet:  var(--dgfe-navy-300);   /*  5,5:1 — nur Randnotiz/Legende */
  --ink-acc:    var(--dgfe-blue-500);   /*  8,6:1 */

  --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));
  --ink-n-acc:   var(--dgfe-blue-200);  /*  8,4:1 auf Navy */

  --rule:    color-mix(in srgb, var(--dgfe-navy-500) 16%, transparent);
  --rule-2:  color-mix(in srgb, var(--dgfe-navy-500) 34%, transparent);
  --rule-n:  color-mix(in srgb, var(--dgfe-blue-300) 26%, transparent);
  --rule-n2: color-mix(in srgb, var(--dgfe-blue-300) 52%, transparent);

  --page:  1560px;
  --gut:   clamp(16px, 3.2vw, 52px);
  --rulegap: var(--dgfe-space-lg);
  --colgap: clamp(14px, 1.6vw, 26px);
  --header-h: 68px;
  --header-h-sm: 54px;
  /* Der Anschnitt reicht GENAU bis an die Fensterkante, nicht darueber
     hinaus: das Blatt ist min(--page, 100vw - 2*--gut) breit und mittig. */
  --bleed: max(var(--gut), calc((100vw - var(--page)) / 2));

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

  --e-draw:  cubic-bezier(.19,.72,.14,1);
  --e-rise:  cubic-bezier(.16,1,.3,1);
  --e-shut:  cubic-bezier(.58,.02,.28,1);
  --t-rise: 720ms; --t-shut: 860ms;
  --t-ui: 200ms;

  --h2fs: var(--fs-8);

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

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

:focus-visible {
  /* Gelber Ring ist Systemvorgabe (design-system.md §5). Auf hellem Grund
     hat er nur 1,33:1; der Navy-Saum kommt additiv dazu und gibt ihm dort
     eine Kante, ohne die Vorgabe zu ersetzen. */
  outline: 2px solid var(--dgfe-color-focus-ring);
  outline-offset: 2px; border-radius: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dgfe-navy-500) 80%, 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 — die volle Hausstimme der Startseite -------------------
   Versalien, Archivo wdth 116, sehr eng. Auf den Partnerseiten ist der
   Display-Schnitt bewusst gedämpft (Gemischtschreibung, wdth 96/88), weil
   dort über eine fremde Firma gesprochen wird. Hier nicht.
   ------------------------------------------------------------------------ */
.dsp {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 116, "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.018em;
  text-wrap: balance;
  /* Deutsche Komposita sind laenger als die Spalte. Die Grenze ist Pflicht:
     ohne sie nimmt `text-wrap: balance` jede Trennstelle als willkommene
     Umbruchchance und zerlegt Woerter im Stamm. 13/7/6 laesst genau die
     Fugen stehen, an denen ein Kompositum auch wirklich getrennt wird. */
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 13 7 6;
  color: var(--ink-strong);
}
.h1 { font-size: var(--fs-10); letter-spacing: -.026em; }
/* Der Nachsatz ist kein zweites Versprechen: Gemischtschreibung, kleiner,
   leiser. `max()` gibt ihm einen Boden, sonst schrumpft er bei 390 px unter
   die Groesse einer Bildunterschrift. */
.h1__sub {
  display: block; margin-top: .52em;
  font-size: var(--fs-5); line-height: 1.12; letter-spacing: -.012em;
  text-transform: none; color: var(--ink);
  font-variation-settings: "wdth" 100, "wght" 600;
  hyphens: manual;
}
.h2 { font-size: var(--h2fs); letter-spacing: -.022em; }
.h3 {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 108, "wght" 650;
  font-weight: 600; text-transform: uppercase;
  font-size: var(--fs-4);
  line-height: 1.14; letter-spacing: -.006em; color: var(--ink-strong);
  text-wrap: balance;
}
/* Die Versalien-Stimme des Hauses: Register, Legenden, Einheiten. */
.cond {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 70, "wght" 600;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: .15em; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.num {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-weight: 700; line-height: .9; letter-spacing: -.026em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.num .u { font-size: var(--fs-4); font-weight: 500;
          font-variation-settings: "wdth" 88, "wght" 500; letter-spacing: 0; margin-left: .1em; }

.lead { font-size: var(--fs-3); line-height: 1.58; font-weight: 300; }
.measure    { max-width: 62ch; }
.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: 14px; max-width: 92ch; text-wrap: pretty;
}
.eyebrow { display: block; font-size: var(--fs-2); color: var(--ink-acc); }

/* Abstaende asymmetrisch: ueber einer Ueberschrift mehr als darunter. */
.hd { margin-bottom: clamp(14px, 1.5vw, 22px); }
.hd + .lead, .hd + p { margin-top: clamp(16px, 1.8vw, 26px); }
.hd:last-child { margin-bottom: 0; }
.stack > * + * { margin-top: var(--dgfe-space-lg); }
/* Grundlinienausgleich fuer eine Notiz neben einer Ueberschrift: die
   Grundlinie der Ueberschrift liegt bei .79 ihrer Groesse unter der
   Zellenoberkante (line-height .96), die eines Absatzes bei 1.125 der seinen. */
.optbase { padding-top: max(0px, calc(.79 * var(--h2fs) - 1.125em)); }

.on-navy { color: var(--ink-n-muted); }
.on-navy .dsp, .on-navy .h3, .on-navy .num { color: var(--ink-n); }
.on-navy .h1__sub { color: var(--ink-n-muted); }
.on-navy strong { color: var(--ink-n); font-weight: 400; }
.on-navy .cap { color: var(--ink-n-quiet); }
.on-navy .eyebrow { color: var(--ink-n-acc); }
/* :not(.btn) ist Pflicht, sonst schlaegt `.on-navy a` die Knopfregeln. */
.on-navy a:not(.btn) { color: var(--ink-n-acc); }

/* --- 5) Raster ----------------------------------------------------------- */
.sec { position: relative; }
.sec--paper  { background: var(--paper);   --wipe-bg: var(--paper);   --rul: var(--rule); }
.sec--paper2 { background: var(--paper-2); --wipe-bg: var(--paper-2); --rul: var(--rule); }
.sec--navy   { background: var(--dgfe-navy-500); --wipe-bg: var(--dgfe-navy-500); --rul: var(--rule-n); }

.sheet { width: min(var(--page), 100% - 2 * var(--gut)); margin-inline: auto; }
.body  { padding-block: var(--secY); }
.sec--tall .body { padding-block: var(--secY-lg); }

/* Die Registerzeile — Hausbauteil, hier mit eigener Fuellung: rechts steht
   NICHT ein Kennwert, sondern die QUELLE der Aussagen darunter. Das ist der
   inhaltliche Kern dieser Seite. */
.reg {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px clamp(12px, 2vw, 30px);
  padding-block: 15px;
  border-bottom: 1px solid var(--rul);
  font-size: var(--fs-2); letter-spacing: .17em;
  color: var(--ink-quiet);
}
.sec--navy .reg { color: var(--ink-n-quiet); }
.reg__n { color: var(--ink-strong); }
.sec--navy .reg__n { color: var(--ink-n); }
.reg__v { margin-left: auto; color: var(--ink-acc); }
.sec--navy .reg__v { color: var(--ink-n-acc); }
/* Das Wort „Beleg" ist der Schluessel, die Quelle der Wert. Zwei Stufen,
   damit die Zeile nicht als ein langer Wert gelesen wird. */
.reg__q { color: var(--ink-quiet); }
.sec--navy .reg__q { color: var(--ink-n-quiet); }

.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
     column-gap: var(--colgap); row-gap: clamp(30px, 3.6vw, 58px); }
.g--tight { row-gap: clamp(24px, 2.8vw, 42px); }
.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-12{grid-column:1/-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 — derselbe Duotone wie auf allen Schwesterseiten ----
   Grau, kontrastiert, per `luminosity` gegen Navy. Beim Scrollen faerbt sich
   das Bild, gefuehrt von der SICHTBARKEIT SEINER SEKTION. Der Weg laeuft in
   zwei Haelften: erst geht das Navy ab (Duotone -> neutrales Grau), dann
   kommt die Farbe (Grau -> Original). Ein blau gestochenes Bild kann nicht
   in ein warmes uebergehen, ohne durch Unbunt zu laufen.
   ------------------------------------------------------------------------ */
.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__shut {
  position: absolute; inset: 0; z-index: 3; background: var(--wipe-bg);
  transform: translateY(-101%); pointer-events: none;
}
/* Sichtbarkeit haengt NICHT allein an `opacity`: solange nichts eingefaerbt
   ist, steht die ungegradete Kopie auf `visibility: hidden` und ist damit
   auch fuer Suche und Sprachausgabe aus dem Weg. */
.ph img.ph__color {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  filter: none; mix-blend-mode: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.ph--live.is-tinting img.ph__color { visibility: visible; }
.ph--live img:not(.ph__color) { mix-blend-mode: normal; }
.ph--live .ph__duo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--dgfe-navy-500);
  mix-blend-mode: color;
  opacity: clamp(0, calc(1 - 2 * var(--tint, 0)), 1);
}
.ph--live img.ph__color { opacity: clamp(0, calc(2 * var(--tint, 0) - 1), 1); }

/* --- 7) Knoepfe — zeichengleich ------------------------------------------- */
.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; text-align: center;
  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 15b,
   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--ghost   { background: transparent; color: var(--dgfe-blue-500);
                border-color: var(--rule-2); --sweep: var(--dgfe-blue-50); }
.btn--ghost:focus-visible { border-color: var(--dgfe-blue-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-300); }
.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);
}
/* Zwei Knoepfe nebeneinander, solange beide in eine Zeile passen. Wenn nicht,
   stehen sie untereinander — und dann auf GLEICHER Breite. */
.acts { display: grid; gap: 14px; justify-content: start;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), max-content)); }

/* --- 8) Header — zeichengleich -------------------------------------------
   Die Anzeige traegt, was diese Seite zu sagen hat: die Registernummer.
   Ein Wert, der sich beim Scrollen ausdruecklich nicht bewegt.
   ------------------------------------------------------------------------ */
.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); white-space: nowrap; }
.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; white-space: nowrap; }

/* --- Die Anzeige bleibt am Telefon stehen --------------------------------
   Sie war unter 1025 px abgeschaltet, mit der Begruendung, sie sei der
   verzichtbare Teil. Vorhandensein ist aber genau der Unterschied zwischen
   Messgeraet und Standbild (Vorgabe Teil 4) — die Registernummer bleibt
   also, nur kurz statt breit.

   Die Bewegungsschicht bringt `.readout` global zurueck und stellt sie unter
   eine Grafik (`width: 100%`, `position: static`). Hier sitzt sie in der
   Kopfzeile. `.site-header .readout` (0,2,0) schlaegt die Regel der Schicht
   (0,1,0) unabhaengig von der Reihenfolge.
   ------------------------------------------------------------------------ */
@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;
  }
}
@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); }
}
/* „REGISTERNUMMER HRB 140284" ist die laengste Anzeige der vier Seiten.
   Unter 480 px traegt der Wert allein — die Nummer ist die Aussage, die
   Kennung steht zwei Bildschirme weiter unten im Registerblatt noch einmal.
   Die Anzeige ist `aria-hidden`; es geht keine Vorlesung verloren. */
@media (max-width: 479px) {
  .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(14px, 1.8vw, 34px); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-2); font-weight: 400; text-decoration: none; color: var(--ink-strong);
  border-bottom: 2px solid transparent;
  transition: color var(--t-ui) var(--e-shut), border-color var(--t-ui) var(--e-shut);
}
/* Der Partner-Eintrag ist keine vierte Leistungsseite. Er steht deshalb
   hinter einer Haarlinie und eine Stufe kleiner — erreichbar, aber nicht
   gleichrangig. `.nav a.nav__part` und nicht `.nav__part`: `.nav a` traegt
   `align-items` und `font-size` schon mit zwei Stellen Spezifitaet. */
/* Aus dem einen Partner-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(2px, .5vw, 10px);
             padding-left: clamp(13px, 1.4vw, 24px); }
.nav__part::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 1px; height: 24px; background: var(--rule-2);
}
.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]. */
.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" faellt beim Veroeffentlichen weg, zusammen
   mit `data-entwurf` — sonst aendert sich nichts. */
.nav__entw { font-size: var(--fs-2); line-height: 1; letter-spacing: .14em;
             text-transform: uppercase; color: var(--ink-quiet); }
/* Aktive Seite. Gelb allein traegt die Aussage nicht (1,24:1 gegen den
   Kopfzeilen-Grund); WCAG 2.2 (1.4.11) verlangt 3:1 fuer ein Merkmal, das
   einen Zustand anzeigt. Der Navy-Saum bringt 13,98:1, das schwerere Gewicht
   ist der zweite, farbunabhaengige Hinweis. Auf DIESER Seite greift die
   Regel nicht, weil „Über uns" (noch) keinen Navigationseintrag hat —
   Begruendung im README. */
.nav a[aria-current] {
  color: var(--ink-strong); font-weight: 600;
  border-bottom-width: 2px; border-bottom-color: var(--dgfe-yellow-500);
  box-shadow: 0 1px 0 var(--dgfe-navy-500);
}
.nav .btn { border-bottom-width: 1px; }
.nav-toggle { display: none; }

/* --- 9) Hero ------------------------------------------------------------- */
.hero { margin-top: var(--header-h); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
              column-gap: clamp(24px, 3.4vw, 62px); align-items: stretch; }
.hero__txt { padding-block: clamp(46px, 5.8vw, 96px) clamp(34px, 3.8vw, 58px); align-self: center; }
.hero .h1 { max-width: 17ch; }
.hero__lead { margin-top: clamp(18px, 2vw, 30px); max-width: 50ch; }
.hero__act { margin-top: clamp(26px, 3vw, 42px); }
.hero__meta {
  margin-top: clamp(24px, 2.6vw, 38px); padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-2); letter-spacing: .05em; color: var(--ink-quiet);
  text-wrap: balance;
}
.hero__media { position: relative; overflow: hidden;
               margin-right: calc(-1 * var(--bleed)); }
.hero__media .ph { position: absolute; inset: 0; }

/* --- 10) DIE SIGNATURE: die Eintragung ------------------------------------
   Zwei Namen und die Beziehung dazwischen, als Schild gesetzt. Der
   Geschaeftsbezeichnung gross und in der Hausstimme, der Rechtstraeger darunter eine
   Stufe kleiner, verbunden durch eine gezeichnete Senkrechte mit Marke oben
   und unten. Das ist die einzige laute Stelle der Seite.

   Warum das hierher gehoert und nicht nur ins Impressum: wer „DGfE" liest
   und „AK-FAMILY GmbH" auf einem Schriftstueck wiederfindet, soll die
   Verbindung nicht suchen muessen.
   ------------------------------------------------------------------------ */
.eint { border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(22px, 2.6vw, 34px); }
.eint__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-acc); }

/* KEINE Versalien in diesem Block — als einziger auf der Seite.
   Die ganze uebrige Seite spricht in der Hausstimme, also in Versalien. Hier
   nicht, und zwar aus einem sachlichen Grund: `text-transform: uppercase`
   macht aus dem Geschäftsbezeichnungn „DGfE" ein „DGfE" und aus dem Rechtstraeger
   „AK-FAMILY GmbH" ein „AK-FAMILY GMBH". Beides sind eingetragene
   Firmierungen, deren Schreibweise nicht dem Layout gehoert — und
   ausgerechnet dieser Abschnitt handelt von der genauen Firmierung. Ein
   Registerauszug wird ohnehin zitiert, nicht gerufen. */
.eint__nm {
  display: block; margin-top: clamp(10px, 1.1vw, 14px);
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 116, "wght" 700;
  font-weight: 700; color: var(--ink-strong);
  line-height: .9; letter-spacing: -.03em;
  font-size: var(--fs-9);
}
/* Der ausgeschriebene Name ist die Aufloesung der Abkuerzung, nicht ein
   zweiter Titel: kleiner, ohne die enge Laufweite, mit Trennung, weil
   „Energie" sonst bei 360 px aus der Spalte laeuft. */
.eint__lang {
  display: block; margin-top: clamp(8px, .9vw, 12px);
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 92, "wght" 600;
  font-weight: 600; color: var(--ink);
  line-height: 1.18; letter-spacing: .005em;
  font-size: var(--fs-4);
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 6 6;
  max-width: 30ch;
}
/* Die Verbindung. Eine Senkrechte mit einer vollen Marke oben (der
   Geschäftsbezeichnung) und einer offenen unten (der Traeger) — die Richtung der
   Aussage laeuft von oben nach unten: der Name gehoert der Firma. */
/* Der Verbinder. Erste Fassung war zu schwach: 58 px Linie zwischen zwei
   Marken, dazu 26 px Aussenabstand oben und unten — die Linie ueberbrueckte
   die Luecke also gar nicht, sondern schwamm darin, und die beiden Quadrate
   lasen sich als versprengte Punkte. Jetzt traegt die Linie die volle
   Fallhoehe zwischen den Namen: kein Aussenabstand, die Luft steckt im
   Innenabstand, und die Linie waechst mit (`align-self: stretch`).
   Volle Marke oben = der Name, den man sieht. Offene unten = der Traeger
   dahinter. */
.eint__von {
  display: grid; grid-template-columns: 11px minmax(0, 1fr);
  column-gap: 18px; align-items: center;
  margin-block: 0; padding-block: clamp(18px, 2.2vw, 30px);
}
.eint__ln { position: relative; align-self: stretch; min-height: 76px;
            justify-self: center; width: 1px; background: var(--rule-2); }
.eint__ln::before, .eint__ln::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  width: 11px; height: 11px;
}
.eint__ln::before { top: 0; background: var(--dgfe-navy-500); }
.eint__ln::after  { bottom: 0; border: 1px solid var(--dgfe-navy-500); background: var(--paper); }
.eint__vt { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink); }

.eint__tr {
  display: block; margin-top: clamp(8px, .9vw, 12px);
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 108, "wght" 700;
  font-weight: 700; color: var(--ink-strong);
  line-height: 1; letter-spacing: -.02em;
  font-size: var(--fs-9);
  -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word;
}

/* Registerblatt neben der Eintragung */
.blatt { border: 1px solid var(--rule-2); }
.blatt__hd { padding: 12px clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--rule-2);
             font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-acc); }
/* Die Schluesselspalte gehoert ALLEN Zeilen gemeinsam, nicht jeder einzeln.
   Vorher war jede Zeile ein eigenes Grid mit fit-content(46%); dadurch
   errechnete „Anschrift" eine 82 px breite Spalte und „Geschaeftsfuehrer"
   eine 143 px breite. Die Werte daneben standen um 61 px versetzt. */
.blatt { display: grid; grid-template-columns: fit-content(46%) minmax(0, 1fr); }
.blatt__hd { grid-column: 1 / -1; }
.blatt__r { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
            gap: 5px clamp(12px, 1.6vw, 22px);
            padding: clamp(13px, 1.5vw, 17px) clamp(14px, 1.6vw, 20px);
            border-top: 1px solid var(--rule); }
.blatt__r:first-of-type { border-top: 0; }
.blatt__k { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); padding-top: .35em; }
/* `.blatt__v` ist ein `span` und faellt nicht unter die Basisregel fuer
   Fliesstext — `overflow-wrap` und `hyphens` erbt es auch von keinem
   Vorfahren. Ohne diese Zeile laeuft „Amtsgericht Frankfurt am Main" bei
   768 px aus dem Blatt, ohne dass `documentElement.scrollWidth` etwas
   meldet (Playbook 4.2). */
.blatt__v { font-size: var(--fs-3); line-height: 1.45; color: var(--ink-strong);
            overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 8 4 4; }

/* --- 11) Kennzahlen-Register ---------------------------------------------- */
.kz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: var(--colgap); border-top: 1px solid var(--rule-n2);
      margin-top: clamp(32px, 3.6vw, 52px); }
.kz__c { padding-top: 16px; border-left: 1px solid var(--rule-n); padding-left: var(--rulegap); }
.kz__c:first-child { border-left: 0; padding-left: 0; }
.kz__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-n-quiet); }
.kz__v { display: block; margin-top: 12px; font-size: var(--fs-8); color: var(--ink-n-acc); }
.kz__n { display: block; margin-top: 9px; font-size: var(--fs-2); letter-spacing: .13em;
         -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 6 5; color: var(--ink-n-muted); }

/* --- 12) Die eine gelbe Flaeche ------------------------------------------
   Sie sitzt dort, wo die Seite sagt, wie gearbeitet wird. Auf der ganzen
   uebrigen Seite kommt Gelb nur an Knoepfen vor.
   ------------------------------------------------------------------------ */
.ypanel { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500);
          padding: clamp(26px, 3.2vw, 50px); }
.ypanel .cond { color: var(--dgfe-navy-500); }
.ykop { display: grid; gap: 0; margin-top: clamp(20px, 2.2vw, 28px); }
.ykop__i { display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: 6px 14px;
           align-items: start;
           padding-block: clamp(16px, 1.9vw, 22px);
           border-top: 1px solid color-mix(in srgb, var(--dgfe-navy-500) 26%, transparent); }
.ykop__i:first-child { border-top: 0; padding-top: 0; }
.ykop__i:last-child { padding-bottom: 0; }
.ykop__m { width: 11px; height: 11px; margin-top: .42em;
           background: var(--dgfe-navy-500); }
.ykop__t { font-family: var(--ff-dsp); font-variation-settings: "wdth" 92, "wght" 650;
           font-weight: 600; font-size: var(--fs-3); line-height: 1.2;
           letter-spacing: -.012em; color: var(--dgfe-navy-500); }
.ykop__d { grid-column: 2; font-size: var(--fs-3); line-height: 1.5; color: var(--dgfe-navy-500); }
/* Pruefmarke aus der Wort-Bild-Marke (Schwarz/Rot/Gold). Sie steht dort, wo
   die Seite ueber uns selbst spricht — hier also mit gutem Grund. */
.markdots { display: flex; gap: 7px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.mt-eint { margin-top: clamp(16px, 1.8vw, 26px); }
.mt-akt  { margin-top: clamp(26px, 3vw, 42px); }
.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); }

/* --- 13) Der Kontaktweg --------------------------------------------------- */
.weg { border-top: 1px solid var(--rule-n2); margin-top: clamp(28px, 3.2vw, 44px); }
/* Gleiche Sache wie bei .blatt: „Anschrift" rechnete 84 px,
   „Erstkontakt" 106 px. */
.weg { display: grid; grid-template-columns: fit-content(46%) minmax(0, 1fr); }
.weg__r { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
          gap: 6px clamp(14px, 2vw, 36px);
          padding: clamp(18px, 2.1vw, 26px) 0; border-bottom: 1px solid var(--rule-n); }
.weg__r:last-child { border-bottom: 0; }
.weg__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-n-quiet); padding-top: .45em; }
.weg__v { font-size: var(--fs-3); line-height: 1.55; color: var(--ink-n-muted); }
.weg__v strong { color: #fff; }

/* --- 14) Abschluss + Footer ---------------------------------------------- */
.closer { position: relative; overflow: hidden; }
.closer__bg { position: absolute; inset: 0; z-index: 0; }
.closer__bg .ph { position: absolute; inset: 0; }
.closer__bg::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: color-mix(in srgb, var(--dgfe-navy-500) 90%, transparent); }
.closer > .sheet { position: relative; z-index: 2; }
.closer__act { margin-top: clamp(26px, 3vw, 42px); }
.endmark { display: inline-flex; align-items: center; gap: 13px; margin-top: clamp(26px, 3vw, 42px); }
.endmark i { width: 13px; height: 13px; flex: none;
             background: #0b1430; border: 1px solid var(--dgfe-blue-300);
             box-shadow: inset 0 0 0 3px var(--dgfe-navy-500); }
.endmark span { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-n-muted); }

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

/* --- 15) Bewegung ---------------------------------------------------------
   Die fuenf Verhalten stehen in der gemeinsamen Bewegungsschicht
   (`<style id="bewegung-css">`, Quelle `preview/_bewegung.css`).

   Diese Seite ist die ruhigste der Familie, und sie bleibt es: sie hat genau
   ZWEI eigene Gesten, beide an einem Bauteil, das sie traegt. Alles andere
   deckt nur auf. Kein Auszug auf dem Aktenblatt, keine Spur, keine
   Zaehlerreihe — was hier steht, sind Registerangaben, und die bewegen sich
   nicht.

   Was weg ist: `.motion .r` (Text fuhr 16 px hoch), `.grp > *` (14 px),
   `.lm i` (eine ganze Zeilenhoehe) und die Staffelung `--i * 70ms`. Regel A:
   Text bewegt sich nie. Dazu `scale: 1.075` auf den Fotos — eine zweite
   Geste neben dem Vorhang, und eine reicht.
   ------------------------------------------------------------------------ */
.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; }

/* Erste eigene Geste: der Vorhang vor dem Foto. */
[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);
}

/* Zweite eigene Geste, und die einzige, die etwas aussagt: die Senkrechte
   der Eintragung wird GEZOGEN, von oben nach unten. Die Richtung ist die
   Aussage — der Name gehoert dem Traeger, nicht umgekehrt. Sie sitzt auf der
   Signature und nirgends sonst. */
[data-auf] .eint__ln { transform: scaleY(0); transform-origin: 50% 0; }
[data-auf].b-da .eint__ln {
  transform: scaleY(1); transition: transform 620ms var(--e-draw) 260ms;
}

/* --- 15b) 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.

   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 — kein `data-zeigt`.
   ------------------------------------------------------------------------ */
@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-blue-500); }
  .btn--onnavy:hover { border-color: var(--dgfe-blue-300); }
  .nav a:hover,
  .nav__partb:hover  { color: var(--dgfe-color-link); }
  .foot .foot__ls a:hover { color: #fff; }
}

/* --- 16) Breakpoints ------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --page: 900px; }
  /* Die Anzeige verschwindet hier NICHT mehr — sie wird kurz, siehe oben.
     Zwischen 768 und 1024 klappt die Navigation ohnehin ein, es steht also
     nur noch Marke + Anzeige + Menueknopf in der Zeile. */
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column;
         align-items: stretch; gap: 0; background: var(--dgfe-neutral-50);
         border-bottom: 1px solid var(--rule-2); padding: 6px var(--gut) 16px;
         box-shadow: var(--dgfe-shadow-md); }
  /* Author-Styles schlagen das UA-`display:none` von [hidden]. */
  .nav[hidden] { display: none; }
  .nav a { min-height: 48px; border-bottom: 1px solid var(--rule); }
  /* Im aufgeklappten Menue wird aus der senkrechten Haarlinie eine
     waagerechte: dieselbe Aussage, nur in der Achse, in der das Menue laeuft.
     Der Eintrag DAVOR gibt dafuer seine eigene Trennlinie ab. */
  /* 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.
     Aus der senkrechten Haarlinie wird eine waagerechte — dieselbe Aussage
     in der Achse, in der das Menue laeuft. */
  .nav__part { flex-direction: column; align-items: stretch;
    margin-left: 0; padding-left: 0; margin-top: 12px; padding-top: 13px; }
  .nav__part::before { left: 0; right: 0; top: 0; width: auto; height: 1px; translate: none; }
  .nav__partb { display: none; }
  .nav__partcap { display: block; padding: 2px 0 6px;
    font-size: var(--fs-2); line-height: 1; letter-spacing: .14em;
    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 a:has(+ .nav__part) { border-bottom: 0; }
  .nav .btn { margin-top: 10px; justify-content: center; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; margin-left: auto; padding: 0 11px;
    background: transparent; border: 1px solid var(--rule-2); border-radius: 3px; cursor: pointer; }
  .nav-toggle b { display: block; height: 1.5px; background: var(--ink-strong); }
  /* minmax(0, 1fr), nicht 1fr: das blosse 1fr ist minmax(auto, 1fr), und
     dieses auto ist die min-content-Breite des groessten Kindes. Ein
     unbrechbares Wort in der Hero-Zeile macht die Spur dann breiter als
     das Blatt und schiebt die Seite aus dem Fenster. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media { min-height: clamp(230px, 42vw, 330px); margin-top: 6px; }
  .hero .h1 { max-width: 20ch; }
  .foot { grid-template-columns: 1fr 1fr; }
  /* Unterhalb von 1025 ist die 4/12-Spalte 230-289 px breit. Der Schluessel
     belegt davon 112 px plus Spaltenabstand; dem Wert blieben 80-120 px.
     Die Beschriftung gehoert dann UEBER den Wert, nicht daneben. */
  .blatt { display: block; }
  .blatt__r { grid-template-columns: 1fr; }
  .blatt__k { padding-top: 0; }
}
@media (max-width: 767px) {
  :root { --rulegap: var(--dgfe-space-md); }
  :root { --header-h: 60px; --header-h-sm: 52px; --bleed: var(--gut); }
  .g { row-gap: 28px; }
  .c1-4,.c1-5,.c1-6,.c1-7,.c1-8,.c6-12,.c7-12,.c8-12,.c9-12 { grid-column: 1 / -1; }
  .hero__media { margin-right: calc(-1 * var(--gut)); }
  /* Vier Kennwerte nebeneinander geben bei 390 px je 20 Zeichen. Zwei mal
     zwei, und die erste Zeile traegt die beiden Werte mit Zahl. */
  .kz { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .kz__c:nth-child(3) { border-left: 0; padding-left: 0; }
  .kz__c:nth-child(n+3) { border-top: 1px solid var(--rule-n); padding-top: 22px; }
  .weg { display: block; }
  .weg__r { grid-template-columns: 1fr; gap: 6px; }
  .weg__k { padding-top: 0; }
  .foot { grid-template-columns: 1fr; }
  /* Die Registerzeile bekommt mobil zwei feste Zeilen statt einer Mischung
     aus „passt noch" und „rechtsbuendiger Waise in Zeile zwei". */
  .optbase { padding-top: 0; }
  .reg { row-gap: 7px; }
  .reg__v { margin-left: 0; flex-basis: 100%; }
  /* Volle Breite: gleiche Kanten wie die Textspalte, groessere Tap-Ziele. */
  .acts { grid-template-columns: 1fr; }
}

/* --- 17) Reduced Motion: alles sichtbar, ohne einen einzigen Scroll ------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Keine Einfaerbung. Die Bilder stehen in ihrem RUHEZUSTAND, und der ist
     der Duotone — nicht die Farbe. Es geht nichts verloren: keine Aussage
     der Seite haengt an einer Farbe im Bild. */
  .ph img.ph__color { display: none; }
  /* Die Bewegungsschicht stellt `data-auf` und `data-auszug` selbst auf den
     Endzustand. Hier bleiben die beiden Gesten, die dieser Seite gehoeren. */
  [data-auf] .ph__shut { transform: translateY(-101%) !important; }
  [data-auf] .eint__ln { transform: none !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; }
/* Vorsatz vor einer Kennzahl. Gebraucht seit dem 24.08. fuer das „rund"
   vor der 20: die Zahl ist ein Erfahrungswert, keine Obergrenze, und das
   Wort gehoert kleiner als die Ziffer. Wortlaut aus Regel 1.1. */
.num .pfx { font-size: var(--fs-4); font-weight: 500;
  font-variation-settings: "wdth" 88, "wght" 500;
  margin-right: .16em; letter-spacing: .04em; }


: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, ist
   aber nicht anklickbar und nicht fokussierbar. Zum Freischalten:
   wieder <a href="/gsp-energie/"> daraus machen. */
.nav__pmv { display: flex; align-items: center;
            justify-content: space-between; gap: .75rem;
            opacity: .62; cursor: default; }