/* ===========================================================================
   ENERGIESIEGEL ANFRAGEN — „KORRESPONDENZ", einstufig

   Schwesterblatt zu `route-a-kontakt.html` und in derselben Sprache gesetzt:
   Bezugsblock als Sektionskopf, Eingangsmarke als Signature, Feldkennungen im
   Vordruck. Zwei Dinge sind anders, und beide aus dem Vorgang heraus:

     EIN SCHRITT STATT DREI. Wer hier ankommt, kommt von einem Siegel-CTA und
     hat sich entschieden. Ein Laufweg ueber drei Stationen waere eine
     Umstaendlichkeit, die der Vorgang nicht hergibt. Die Marke ist deshalb
     auch nicht dreimal da, sondern zweimal: vorn die angefragte Stufe,
     hinten der Eingangsvermerk.

     DIE MARKE IST NICHT LEER. Auf der Kontaktseite steht sie im Briefkopf mit
     lauter „—", weil dort noch nichts eingegangen ist. Hier traegt sie von
     Anfang an einen Wert, sobald die Seite ueber `?paket=` aufgerufen wird:
     sie IST die Anzeige der angefragten Stufe. Es gibt kein zweites Feld
     dafuer, und das Formular bleibt die einzige Quelle — die Marke wird aus
     ihm gespeist, nie umgekehrt.

   KEINE KAUF-SPRACHE. Nirgends „bestellen", „kaufen", „Warenkorb", „Preis".
   Der Knopf heisst „Prüfung anfragen", die Zahl heisst „Orientierung", und
   der Eingangsvermerk quittiert ausdruecklich eine Pruefung. Jede Zahl traegt
   ihren Vorbehalt unmittelbar bei sich („ab … € mtl. · Endpreis nach
   Prüfung") und nicht als Fussnote irgendwo darunter.
   =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- 2) SEITEN-SCHICHT ---------------------------------------------------- */
:root {
  --paper:   #ffffff;
  /* Der zweite Boden ist navy-getoent, nicht steinfarben: das Blatt eines
     Durchschlags, nicht das Papier einer Broschuere. */
  --paper-2: color-mix(in srgb, var(--dgfe-navy-50) 58%, 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-accent: var(--dgfe-yellow-800); /*  5,73:1 — Gelb als Text */

  --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) 32%, 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(20px, 3.2vw, 52px);
  --rulegap: var(--dgfe-space-lg);
  --colgap: clamp(14px, 1.6vw, 26px);
  --header-h: 68px;
  --header-h-sm: 54px;
  --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);
  /* --e-point (44 % Ueberschwinger) ist mit der Bewegungsschicht entfallen:
     ein Gummiband gehoert nicht auf einen Vordruck. Wer eine Feder braucht,
     nimmt --b-zeiger aus der Schicht, der schwingt einmal um 6 % ueber. */
  --t-draw: 1100ms; --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 {
  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 -------------------------------------------------------
   Archivo an DREI Breiten, jede mit einer Aufgabe aus dem Schriftverkehr:
     wdth 88  Gemischtschreibung — der Briefkopf, die Betreffzeilen.
              Schmaler als das Werksschild der Startseite (116) und schmaler
              als das Datenblatt der Partnerseite (96): eine Korrespondenz
              spricht nicht in Versalien ueber die ganze Zeile.
     wdth 70  Versalien — die Vermerke, Schluessel, Legenden (Hausstimme).
     wdth 62  Versalien, tabellarisch — die Feldkennungen im Vordruck. Das
              ist die engste Stufe der Familie und traegt genau die Ziffern,
              die auf einem Formular an den Feldern stehen.
   Poppins bleibt Fliesstext und Bedienelement.
   ------------------------------------------------------------------------ */
.dsp {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 88, "wght" 700;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ink-strong);
}
.h1 { font-size: var(--fs-10); letter-spacing: -.03em; line-height: .99; }
.h2 { font-size: var(--h2fs); letter-spacing: -.024em; }
.h3 {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 86, "wght" 650;
  font-weight: 600;
  font-size: var(--fs-4);
  line-height: 1.14; letter-spacing: -.012em; color: var(--ink-strong);
  text-wrap: balance;
}
.cond {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 70, "wght" 600;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: .15em; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.num {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-weight: 700; line-height: .9; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.lead { font-size: var(--fs-3); line-height: 1.58; font-weight: 300; }
.measure    { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

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

.on-navy { color: var(--ink-n-muted); }
.on-navy .dsp, .on-navy .h3, .on-navy .num { color: var(--ink-n); }
.on-navy strong { color: var(--ink-n); font-weight: 400; }
.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); }

.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-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} .c10-12{grid-column:10/-1}

/* --- 6) Der Bezugsblock — das Ruckgrat -----------------------------------
   Der Informationsblock des Geschaeftsbriefs: waagerecht ueber die Blattbreite,
   Schluessel klein in Versalien, Wert darunter, senkrechte Haarlinien
   dazwischen. Er traegt echte Angaben, keine Nummerierung um ihrer selbst
   willen — „Blatt" ist auf einem Schriftstueck eine gelaeufige und wahre
   Angabe, weil die Seite von oben nach unten als EIN Dokument gelesen wird.
   ------------------------------------------------------------------------ */
.bez {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--dgfe-navy-500);
  border-bottom: 1px solid var(--rul);
}
.sec--navy .bez { border-top-color: var(--dgfe-yellow-500); }
.bez__f {
  padding: 13px clamp(10px, 1.2vw, 18px) 14px var(--rulegap);
  border-left: 1px solid var(--rul);
  min-width: 0;
}
.bez__f:first-child { border-left: 0; padding-left: 0; }
.bez__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.sec--navy .bez__k { color: var(--ink-n-quiet); }
.bez__v { display: block; margin-top: 7px; font-size: var(--fs-2); line-height: 1.4;
          color: var(--ink-strong); overflow-wrap: break-word; hyphens: auto; }
.sec--navy .bez__v { color: var(--ink-n); }

/* --- 7) Bildgradation — zeichengleich zu den Schwesterseiten -------------- */
.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;
}
.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); }

/* --- 8) 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);
}
.btn:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .btn:hover::before { transform: scaleX(1); } }
.btn__a { transition: transform 280ms var(--e-draw); }
.btn:focus-visible .btn__a { transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__a { transform: translateX(6px); } }
.btn:focus-visible .btn__a--b { transform: translateX(-6px); }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__a--b { 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;
                border-color: var(--dgfe-blue-500); --sweep: var(--dgfe-navy-500); }
.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); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { 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-yellow-500); }
@media (hover: hover) and (pointer: fine) { .btn--onnavy:hover { border-color: var(--dgfe-yellow-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: grid; gap: 14px; justify-content: start;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), max-content)); }

/* --- 9) Header — zeichengleich -------------------------------------------
   Die Anzeige traegt die eine Zahl dieser Seite. Sie aendert sich beim
   Scrollen ausdruecklich NICHT: die Antwortzeit ist zugesagt, nicht gemessen.
   ------------------------------------------------------------------------ */
.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; }
.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 seit Teil 5 ein Aufklappknopf mit zwei Zielen;
   seine Regeln stehen im Nachtrag am Ende dieses Stylesheets. */
.nav__partk { font-size: var(--fs-2); line-height: 1; letter-spacing: .14em;
              text-transform: uppercase; color: var(--ink-quiet); }
@media (hover: hover) and (pointer: fine) { .nav a:hover, .nav__part:hover { color: var(--dgfe-color-link); } }
/* Auf dieser Seite ist keiner der vier Punkte aktiv — die Regel steht
   trotzdem hier, damit Kopfzeile und Fusszeile zeichengleich bleiben. */
.nav a[aria-current="page"] {
  color: var(--ink-strong); font-weight: 600;
  border-bottom-width: 2px; border-bottom-color: var(--dgfe-yellow-500);
  box-shadow: 0 1px 0 var(--dgfe-navy-500);
}
.nav .btn { border-bottom-width: 1px; }
.nav-toggle { display: none; }

/* --- 10) DIE EINGANGSMARKE — die Signature -------------------------------
   Rechteckiger Stempelkasten: 2-px-Navy-Rahmen, an der Oberkante eine
   6-px-Fahne. Die Fahne ist GRAU, solange nichts eingegangen ist, und GELB,
   sobald etwas eingegangen ist. Das ist die einzige Stelle auf der Seite, an
   der Gelb eine Aussage traegt (der Knopf traegt eine Handlung).
   Keine Drehung, keine Stempelfarbe, keine Textur: ein Eingangsvermerk ist
   ein Verwaltungsakt, kein Souvenir.
   ------------------------------------------------------------------------ */
.mk { position: relative; background: var(--paper); border: 2px solid var(--dgfe-navy-500); }
.mk__flag { position: absolute; left: 0; right: 0; top: 0; height: 6px;
            background: var(--dgfe-yellow-500); }
.mk--leer .mk__flag { background: var(--rule-2); }
.mk__hd { display: flex; flex-wrap: wrap; align-items: baseline;
          justify-content: space-between; gap: 6px 16px;
          padding: clamp(16px, 1.7vw, 20px) clamp(14px, 1.6vw, 20px) 13px;
          border-bottom: 1px solid var(--rule-2); }
.mk__hd > span { font-size: var(--fs-2); letter-spacing: .19em; color: var(--ink-strong); }
.mk__hd em { font-style: normal; font-size: var(--fs-2); letter-spacing: .15em;
             color: var(--ink-quiet); font-family: var(--ff-dsp);
             font-variation-settings: "wdth" 70, "wght" 600; text-transform: uppercase;
             font-variant-numeric: tabular-nums; }
.mk__r { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
         gap: 5px clamp(12px, 1.6vw, 26px); align-items: baseline;
         padding: clamp(11px, 1.3vw, 15px) clamp(14px, 1.6vw, 20px);
         border-top: 1px solid var(--rule); }
.mk__b > .mk__r:first-child { border-top: 0; }
.mk__k { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); }
.mk__v { font-size: var(--fs-3); line-height: 1.45; color: var(--ink-strong); }
/* Die eine Zeile, die im leeren Vermerk schon ausgefuellt ist. */
.mk__v--zu { color: var(--ink-strong); font-weight: 400; }
.mk__foot { padding: 11px clamp(14px, 1.6vw, 20px) 13px;
            border-top: 1px solid var(--rule-2); background: var(--paper-2);
            font-size: var(--fs-2); line-height: 1.45; color: var(--ink-quiet); }

/* --- 11) Briefkopf -------------------------------------------------------- */
.hero { margin-top: var(--header-h); }
.hero__eyebrow { display: block; font-size: var(--fs-2); color: var(--ink-accent); }
.hero .h1 { margin-top: clamp(14px, 1.4vw, 20px); max-width: 15ch; }
.hero__lead { margin-top: clamp(18px, 2vw, 30px); max-width: 50ch; }
.hero__act { margin-top: clamp(26px, 3vw, 42px); }
.hero__meta {
  margin-top: clamp(26px, 2.8vw, 40px); padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-2); letter-spacing: .14em; color: var(--ink-quiet);
  text-wrap: balance;
}
/* Das Anschriftenfeld. Auf einem Brief steht oben, an WEN er geht — hier also
   die eigene Anschrift, weil der Besucher an uns schreibt. Damit faellt der
   Pflichtinhalt dieser Seite mit ihrer Form zusammen. */
.brief > * + * { margin-top: clamp(18px, 2vw, 26px); }
.anschr { border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(14px, 1.6vw, 19px); }
.anschr__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.anschr address { margin-top: 12px; font-style: normal; font-size: var(--fs-3); line-height: 1.55;
                  color: var(--ink-strong); }
.anschr__nm { display: block; font-family: var(--ff-dsp);
              font-variation-settings: "wdth" 86, "wght" 650; font-weight: 600;
              font-size: var(--fs-3); line-height: 1.25; letter-spacing: -.008em;
              margin-bottom: 7px; }
/* `flex`, nicht `inline-flex`: als Inline-Element setzte sich die Adresse
   hinter „Deutschland" in dieselbe Zeile, weil der Zeilenumbruch im Markup
   nur ein Leerzeichen ist. Ein Blockelement beginnt seine eigene Zeile. */
.anschr__ml { display: flex; align-items: center; min-height: 44px; width: fit-content;
              margin-top: 8px; font-size: var(--fs-3); word-break: break-word; }

/* --- 12) Formular — Hausgrammatik ----------------------------------------- */
.fs, .wpath, .gbranch { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.fs + .fs { margin-top: clamp(30px, 3.4vw, 46px); }
.wpath > * + * { margin-top: clamp(30px, 3.4vw, 46px); }
.wpath > legend + * { margin-top: 0; }
.fs__lg { display: flex; align-items: center; gap: 12px; width: 100%;
          padding-bottom: 12px; margin-bottom: clamp(20px, 2.2vw, 30px);
          border-bottom: 1px solid var(--rule-2);
          font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-strong); }
/* Die Feldkennung: eine gerahmte Ziffer, wie sie auf einem Vordruck am Feld
   steht. Archivo wdth 62 ist die engste Stufe der Familie. */
.fs__n { flex: none; display: inline-grid; place-items: center;
         min-width: 25px; height: 20px; padding: 0 5px;
         border: 1px solid var(--rule-2); color: var(--ink-strong);
         font-variation-settings: "wdth" 62, "wght" 700; letter-spacing: .06em;
         font-size: var(--fs-2); }
.flds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dgfe-space-lg); }
.fld--full { grid-column: 1 / -1; }
.fld--gap { margin-top: 22px; }
.fld > label, .fld > .fld__l { display: block; margin-bottom: 8px;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 76, "wght" 600;
  font-size: var(--fs-2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-strong); }
.fld__l { border: 0; padding: 0; }
fieldset.fld { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: var(--ff-txt); font-size: var(--fs-3); font-weight: 300; color: var(--ink-strong);
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px;
  transition: border-color var(--t-ui) var(--e-shut), box-shadow var(--t-ui) var(--e-shut);
}
::placeholder { color: var(--ink-quiet); opacity: 1; }
@media (hover: hover) and (pointer: fine) { input:hover, select:hover, textarea:hover { border-color: var(--dgfe-navy-300); } }
input:focus, select:focus, textarea:focus {
  border-color: var(--dgfe-blue-500); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dgfe-blue-500) 14%, transparent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dgfe-navy-500) 80%, transparent);
}
textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 49%, var(--dgfe-navy-400) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--dgfe-navy-400) 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.segs--stack { flex-direction: column; align-items: stretch; }
.seg { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; min-height: 46px; padding: 10px 18px;
  font-size: var(--fs-3); color: var(--ink-strong); background: var(--paper);
  border: 1px solid var(--rule-2); border-radius: 3px; font-variant-numeric: tabular-nums;
  transition: border-color var(--t-ui) var(--e-shut), color var(--t-ui) var(--e-shut); }
.seg span::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--dgfe-navy-500); transform: scaleX(0); transform-origin: left center;
  transition: transform 300ms var(--e-draw); }
@media (hover: hover) and (pointer: fine) { .seg:hover span { border-color: var(--dgfe-navy-300); } }
.seg input:checked + span { border-color: var(--dgfe-navy-500); color: #fff; }
.seg input:checked + span::before { transform: scaleX(1); }
.seg input:focus-visible + span { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dgfe-navy-500) 80%, transparent); }
.fhint { margin: -4px 0 clamp(18px, 2vw, 24px); font-size: var(--fs-2); line-height: 1.5;
         color: var(--ink-quiet); max-width: 58ch; }
.fnote2 { margin-top: 9px; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-quiet); }
.req { color: var(--ink-accent); margin-left: .25em; }
.fs__lg .req { margin-left: -6px; }
.unit { color: var(--ink-quiet); }
.optag { margin-left: auto; font-style: normal; letter-spacing: .15em; color: var(--ink-quiet); }
input[type=file] {
  width: 100%; min-height: 48px; padding: 10px 12px; cursor: pointer;
  font-family: var(--ff-txt); font-size: var(--fs-2); font-weight: 300; color: var(--ink-strong);
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px;
}
input[type=file]::file-selector-button {
  margin-right: 14px; min-height: 32px; padding: 7px 14px; cursor: pointer;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 88, "wght" 650;
  font-weight: 600; font-size: var(--fs-2); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dgfe-navy-500); background: transparent;
  border: 1px solid var(--rule-2); border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) { input[type=file]:hover { border-color: var(--dgfe-navy-300); } }
label.chk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; align-items: start;
       min-height: 44px; margin-bottom: 0; padding: 10px 0; cursor: pointer;
       font-family: var(--ff-txt); font-variation-settings: normal; font-weight: 300;
       font-size: var(--fs-2); line-height: 1.5; letter-spacing: 0; text-transform: none;
       color: var(--ink); }
.chk input {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 22px; height: 22px; margin: 1px 0 0; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px;
  transition: background-color var(--t-ui) var(--e-shut), border-color var(--t-ui) var(--e-shut);
}
@media (hover: hover) and (pointer: fine) { .chk input:hover { border-color: var(--dgfe-navy-300); } }
.chk input:checked { background: var(--dgfe-navy-500); border-color: var(--dgfe-navy-500); }
.chk input:checked::after { content: "\2713"; position: absolute; inset: 0;
  display: grid; place-items: center; color: var(--dgfe-yellow-500); font-size: var(--fs-2); line-height: 1; }

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


/* --- 13) DIE STUFENKARTEI ------------------------------------------------
   Vier Stufen als Zeilen eines Vordrucks, nicht als vier gleich grosse
   Kacheln: eine Kartei sagt „hier wird eingeordnet", ein Kachelraster sagt
   „hier wird ausgesucht". Auf dieser Seite wird nichts gekauft, sondern eine
   Einordnung vorgeschlagen — und die Einordnung entscheidet sich erst in der
   Pruefung. Die gewaehlte Zeile bekommt die Eingangsmarke der Seite.
   ------------------------------------------------------------------------ */
.stufen { border-top: 1px solid var(--rule-2); }
.stufe { position: relative; display: block; border-bottom: 1px solid var(--rule); }
.stufen .stufe:last-child { border-bottom-color: var(--rule-2); }
.stufe input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
               opacity: 0; cursor: pointer; z-index: 2; }
.stufe__in { position: relative; display: grid;
             grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 9.5rem);
             gap: 6px clamp(14px, 2.2vw, 34px); align-items: baseline;
             padding: clamp(17px, 2vw, 24px) clamp(12px, 1.4vw, 18px);
             transition: background-color var(--t-ui) var(--e-shut); }
.stufe__k { display: flex; align-items: center; gap: 10px;
            font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.stufe__mk { position: relative; overflow: hidden; flex: none; width: 15px; height: 15px;
             background: var(--paper); border: 1px solid var(--rule-2);
             transition: background-color var(--t-ui) var(--e-shut),
                         border-color var(--t-ui) var(--e-shut); }
.stufe__mk::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
                    background: var(--dgfe-yellow-500);
                    transform: scaleX(0); transform-origin: left center;
                    transition: transform 340ms var(--e-draw); }
.stufe__t { display: block; font-family: var(--ff-dsp);
            font-variation-settings: "wdth" 88, "wght" 650; font-weight: 600;
            color: var(--ink-strong); font-size: var(--fs-4);
            line-height: 1.15; letter-spacing: -.012em; }
.stufe__d { display: block; margin-top: 8px; font-size: var(--fs-3); line-height: 1.5; max-width: 46ch; }
/* Der Preis steht als Orientierung, nicht als Auszeichnung: „ab", die Zahl,
   und darunter der Vorbehalt. Ohne den Vorbehalt waere die Zahl ein Angebot. */
.stufe__p { text-align: right; }
.stufe__pz { display: block; font-family: var(--ff-dsp);
             font-variation-settings: "wdth" 96, "wght" 700; font-weight: 700;
             font-size: var(--fs-4); letter-spacing: -.02em;
             font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.stufe__pv { display: block; margin-top: 6px; font-size: var(--fs-2); letter-spacing: .14em;
             color: var(--ink-quiet); font-family: var(--ff-dsp);
             font-variation-settings: "wdth" 70, "wght" 600; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .stufe:hover .stufe__in { background: color-mix(in srgb, var(--dgfe-navy-500) 3%, transparent); } }
.stufe input:checked ~ .stufe__in { background: var(--paper-2); }
.stufe input:checked ~ .stufe__in .stufe__mk { background: var(--dgfe-navy-500);
                                               border-color: var(--dgfe-navy-500); }
.stufe input:checked ~ .stufe__in .stufe__mk::after { transform: scaleX(1); }
.stufe input:checked ~ .stufe__in .stufe__k { color: var(--ink-strong); }
.stufe input:focus-visible ~ .stufe__in { outline: 2px solid var(--dgfe-color-focus-ring);
  outline-offset: -3px; box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--dgfe-navy-500) 80%, transparent); }

/* --- 14) Die Begruendung -------------------------------------------------
   Sie steht nicht im Kleingedruckten, sondern als eigener Block ueber dem
   Formular — und sie ist mit den Feldern verdrahtet: die drei Groessen, von
   denen Umfang und Preis abhaengen, sind genau die drei Angaben, die das
   Formular erfragt. Jedes preisbestimmende Feld traegt darum eine Marke.
   ------------------------------------------------------------------------ */
.pruef { border-top: 2px solid var(--dgfe-navy-500); padding-top: clamp(16px, 1.8vw, 22px); }
.pruef__k { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.pruef__t { margin-top: 12px; font-size: var(--fs-3); line-height: 1.45; color: var(--ink-strong);
            font-weight: 400; max-width: 54ch; }
/* `.fhint` traegt einen negativen oberen Rand, weil es sonst immer direkt
   unter einer Legende steht. Hier steht es unter einer Liste und zog sich
   dadurch in deren letzte Zeile hinein. */
.pruef .fhint { margin-top: clamp(18px, 2vw, 24px); padding-top: clamp(14px, 1.6vw, 18px);
                border-top: 1px solid var(--rule); }
.faktor { margin-top: clamp(18px, 2vw, 24px); }
.faktor__i { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px;
             padding-block: clamp(12px, 1.4vw, 16px); border-top: 1px solid var(--rule); }
.faktor__i:first-child { border-top: 0; padding-top: 0; }
.faktor__i:last-child { padding-bottom: 0; }
.faktor__n { display: grid; place-items: center; width: 26px; height: 20px;
             border: 1px solid var(--rule-2); color: var(--ink-strong);
             font-family: var(--ff-dsp); font-variation-settings: "wdth" 62, "wght" 700;
             font-weight: 700; font-size: var(--fs-2); letter-spacing: .06em;
             font-variant-numeric: tabular-nums; }
.faktor__t { display: block; color: var(--ink-strong); font-size: var(--fs-3); line-height: 1.35; font-weight: 400; }
.faktor__d { display: block; margin-top: 5px; font-size: var(--fs-2); line-height: 1.5; color: var(--ink); }
/* Die Marke am Feld. yellow-800 = 5,73:1, also auch als Kleinschrift zulaessig. */
.prb { margin-left: auto; font-style: normal; font-family: var(--ff-dsp);
       font-variation-settings: "wdth" 62, "wght" 700; font-weight: 700;
       font-size: var(--fs-2); letter-spacing: .12em; text-transform: uppercase;
       color: var(--ink-accent); white-space: nowrap; }
.fld > label { display: flex; align-items: baseline; gap: 10px; }

/* --- 15) Das Beiblatt ----------------------------------------------------- */
/* `align-self: start` ist Pflicht, nicht Kosmetik: als Rasterzelle wird das
   Beiblatt sonst auf die volle Zeilenhoehe gedehnt, und unter der Anschrift
   stand ein halber Meter leeres Navy. Gedehnt laeuft ausserdem `sticky` ins
   Leere — ein Kasten, der schon so hoch ist wie die Zeile, kann nicht kleben. */
.beibl { position: sticky; top: calc(var(--header-h) + 22px); align-self: start;
         background: var(--dgfe-navy-500); --wipe-bg: var(--dgfe-navy-500); }
.beibl__b { padding: clamp(20px, 2.2vw, 30px); border-top: 1px solid var(--rule-n); }
.beibl__b:first-child { border-top: 0; }
.beibl__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); }
.stat { margin-top: var(--dgfe-space-lg); }
.stat__i { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px;
           padding-block: clamp(13px, 1.5vw, 17px); border-top: 1px solid var(--rule-n); }
.stat__i:first-child { border-top: 0; padding-top: 0; }
.stat__i:last-child { padding-bottom: 0; }
.stat__n { display: grid; place-items: center; width: 26px; height: 22px;
           border: 1px solid var(--rule-n2); color: var(--dgfe-yellow-500);
           font-family: var(--ff-dsp); font-variation-settings: "wdth" 62, "wght" 700;
           font-weight: 700; font-size: var(--fs-2); letter-spacing: .06em;
           font-variant-numeric: tabular-nums; }
.stat__t { display: block; color: #fff; font-size: var(--fs-3); line-height: 1.35; font-weight: 400; }
.stat__d { display: block; margin-top: 5px; font-size: var(--fs-2); line-height: 1.5; color: var(--ink-n-muted); }
.beibl address { margin-top: 12px; font-size: var(--fs-2); line-height: 1.6; font-style: normal;
                 color: var(--ink-n-muted); }
/* 44 px, nicht 40: das Design-System setzt 44 als Mindest-Tap-Target (§5.1),
   und der Adress-Link ist der einzige Weg zur Mailadresse in dieser Spalte. */
.beibl address a { word-break: break-word; display: inline-flex; min-height: 44px; align-items: center; }
.beibl .ph { aspect-ratio: 16 / 9; }

/* --- 16) Schrittwechsel (einstufig: nur Absenden und Vermerk) ------------- */
.wz__panel[hidden], .gbranch[hidden] { display: none; }
/* Ein Formularschritt wechselt, er faehrt nicht ein. Der Weg von 12 px ist
   entfallen (Regel A: Text bewegt sich nie); das Quittieren des Schritts
   uebernimmt `data-quitt` am Panel. */
.motion .wz__panel { opacity: .001; }
.motion .wz__panel.is-live { opacity: 1; transition: opacity 420ms var(--b-ruhe); }
.wzh { margin-bottom: clamp(20px, 2.2vw, 30px); }
.wzh__t {
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 88, "wght" 700;
  font-weight: 700; color: var(--ink-strong);
  font-size: var(--fs-6); line-height: 1.06;
  letter-spacing: -.02em; text-wrap: balance;
}
.wzh__t:focus-visible { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 5px;
  border-radius: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--dgfe-navy-500) 80%, transparent); }
.wzh p { margin-top: 13px; font-size: var(--fs-3); max-width: 56ch; }
.wznav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
         margin-top: clamp(28px, 3.2vw, 42px); padding-top: clamp(18px, 2vw, 26px);
         border-top: 1px solid var(--rule-2); }
.wznote { flex: 1 1 18ch; min-width: 0; font-size: var(--fs-2); line-height: 1.45;
          color: var(--ink-quiet); text-align: right; }
.fstat { margin-top: var(--dgfe-space-lg); padding: 14px 18px; font-size: var(--fs-2);
         border-left: 3px solid var(--dgfe-color-success); background: var(--dgfe-color-success-bg);
         color: var(--dgfe-color-success); }

/* --- 17) 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) 88%, transparent); }
.closer > .sheet { position: relative; z-index: 2; }
.closer__act { margin-top: clamp(26px, 3vw, 42px); }
/* Die Schlussmarke ist das Bauteil der Seite im Kleinformat, mit Fahne. */
.endmark { display: inline-flex; align-items: center; gap: 13px; margin-top: clamp(26px, 3vw, 42px); }
.endmark i { position: relative; overflow: hidden; width: 22px; height: 16px; flex: none;
             border: 1px solid var(--rule-n2); background: transparent; }
.endmark i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
                    background: var(--dgfe-yellow-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__ad { margin-top: var(--dgfe-space-lg); }
.foot__sub { margin-top: 8px; }
.foot__ls { display: grid; gap: 2px; }
.foot .foot__ls a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-2);
  color: color-mix(in srgb, white 82%, var(--dgfe-navy-500)); text-decoration: none;
  transition: color var(--t-ui) var(--e-shut); }
@media (hover: hover) and (pointer: fine) { .foot .foot__ls a:hover { color: #fff; } }
.foot__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--dgfe-space-lg); }
.foot__bar { margin-top: clamp(34px, 4vw, 56px); padding-top: var(--dgfe-space-lg);
  border-top: 1px solid var(--rule-n); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px; font-size: var(--fs-2); color: var(--ink-n-quiet); }

/* --- 18) Bewegung — was seiteneigen bleibt --------------------------------
   Die fuenf Verhalten stehen in der Bewegungsschicht hinter diesem
   Stylesheet. Hier bleibt die Zeilenzerlegung der Anzeigezeilen und die
   Blende ueber dem Bild; beide haengen jetzt an `.b-da` statt an `.is-in`.

   `.lm` traegt kein `overflow: hidden` mehr — das war die Maske fuer die
   fahrende Zeile. Ohne Fahrt schneidet sie nur noch Unterlaengen an.
   ------------------------------------------------------------------------ */
.lm {
  display: block;
  /* Oben polstern, sonst kappt eine Maske die Umlautpunkte der
     Versalien. Der negative Aussenabstand nimmt es optisch zurueck. */
  padding-top: .16em; margin-top: -.16em;
}
.lm i { display: block; font-style: normal; }
/* `translateY(-101%)` ist der GRUNDZUSTAND der Blende: ohne `motion` — also
   bei reduzierter Bewegung oder ohne IntersectionObserver — steht sie von
   vornherein aus dem Weg. */
.motion .ph__shut { transform: translateY(0); }
.motion .b-da .ph__shut { transform: translateY(-101%); transition: transform var(--t-shut) var(--e-shut); }
.motion .ph img { scale: 1.075; }
.motion .b-da .ph img { scale: 1; transition: scale 1300ms var(--e-shut); }

/* --- 19) Breakpoints ------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --page: 900px; }
  .beibl { position: static; }
  /* Der Preis rutscht unter den Text, sobald die Zeile zu dritt zu eng wird. */
  .stufe__in { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
  .stufe__p { grid-column: 2; text-align: left; }
  .stufe__pv { margin-top: 4px; }
  /* Die Anzeige verschwand hier (Vorgabe Teil 4). Sie bleibt jetzt; die enge
     Form steht im Nachtrag am Ende des Stylesheets. */
  .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); }
  .nav[hidden] { display: none; }
  .nav a { min-height: 48px; 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); }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .readout { margin-left: 18px; padding-left: 18px; }
  .nav { gap: 20px; }
}
@media (max-width: 767px) {
  :root { --header-h: 60px; --header-h-sm: 52px; --rulegap: var(--dgfe-space-md); }
  .g { row-gap: 28px; }
  .c1-4,.c1-5,.c1-6,.c1-7,.c1-8,.c6-12,.c7-12,.c8-12,.c9-12,.c10-12 { grid-column: 1 / -1; }
  .bez { grid-template-columns: 1fr 1fr; }
  /* Ohne diese Zeile erbt Feld 3 die fehlende linke Haarlinie von Feld 1
     nicht — es steht dann in Zeile zwei ohne Kante und liest sich als Fehler. */
  .bez__f:nth-child(odd) { border-left: 0; padding-left: 0; }
  .bez__f:nth-child(n+3) { border-top: 1px solid var(--rul); }
  .flds { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 40px); }
  .acts { grid-template-columns: 1fr; }
  .segs:not(.segs--stack) .seg { flex: 1 1 auto; }
  .segs:not(.segs--stack) .seg span { justify-content: center; text-align: center; }
  .mk__r { grid-template-columns: 1fr; gap: 4px; }
  .stufe__in { grid-template-columns: 1fr; align-items: start; }
  .stufe__p { grid-column: 1; }
  .fld > label { flex-wrap: wrap; }
  .prb { margin-left: 0; flex-basis: 100%; }
  .wznote { flex-basis: 100%; text-align: left; }
  .wznav .btn { flex: 1 1 auto; }
  .hero .h1 { max-width: 100%; }
}

/* --- 20) Reduced Motion: alles sichtbar, ohne einen einzigen Scroll ------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ph img.ph__color { display: none; }
  /* Sicherheitsnetz: das Formular ist auch dann sichtbar, wenn `motion`
     aus irgendeinem Grund doch gesetzt wurde. */
  .motion .wz__panel { opacity: 1 !important; }
  .motion .ph__shut { transform: translateY(-101%) !important; }
  .motion .ph img { scale: 1 !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; }

/* ===========================================================================
   NACHTRAG (Vorgabe Teil 4 + Teil 5)
   Partner-Aufklappmenue und die Anzeige, die mobil zurueckkommt. Steht am Ende
   des Seiten-Stylesheets, damit es die Regeln darueber schlaegt. Die fuenf
   Bewegungs-Verhalten selbst stehen dahinter in `<style id="bewegung-css">`.
   =========================================================================== */

/* --- Partner-Aufklappmenue ------------------------------------------------
   Ein `<button>` mit `aria-expanded`, kein Link, der nirgends hinfuehrt, und
   kein Hover-Aufklapper: ein Menue, das nur auf Hover aufgeht, ist am Telefon
   nicht bedienbar — genau der Fehler aus Teil 3. Auf schmalen Breiten faellt
   der Knopf weg und die beiden Ziele stehen offen im ausgeklappten Menue,
   also kein zweites Aufklappen im Aufklappen.
   ------------------------------------------------------------------------ */
.nav__pw { position: relative; display: inline-flex; align-items: center; }
.nav .nav__part {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 2px; position: relative;
  min-height: 44px; padding: 0 0 0 clamp(13px, 1.4vw, 24px);
  margin-left: clamp(2px, .5vw, 10px);
  font-family: var(--ff-txt); font-size: var(--fs-2); font-weight: 400;
  line-height: 1.2; text-align: left; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--t-ui) var(--e-shut), border-color var(--t-ui) var(--e-shut);
}
.nav .nav__part::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 1px; height: 24px; background: var(--rule-2);
}
.nav__partn { display: inline-flex; align-items: center; gap: 8px; }
/* Der Winkel ist gezeichnet, nicht gesetzt. Ein Schriftzeichen haengt an der
   Metrik der Schrift und sitzt in Archivo zwei Pixel zu hoch. */
.nav__partc {
  width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  rotate: 45deg; translate: 0 -2px;
  transition: rotate var(--t-ui) var(--e-shut), translate var(--t-ui) var(--e-shut);
}
.nav__part[aria-expanded="true"] .nav__partc { rotate: -135deg; translate: 0 2px; }
/* Steht die aktuelle Seite im Menue, traegt der Knopf denselben Saum wie ein
   aktiver Navigationspunkt: Gelb allein erreicht gegen den Kopfzeilen-Grund
   nur 1,24:1, WCAG 2.2 (1.4.11) verlangt 3:1. Der Navy-Saum bringt 13,98:1,
   das schwerere Gewicht ist der zweite, farbunabhaengige Hinweis. */
.nav__pw:has(a[aria-current]) .nav__part {
  color: var(--ink-strong); font-weight: 600;
  border-bottom-color: var(--dgfe-yellow-500);
  box-shadow: 0 1px 0 var(--dgfe-navy-500);
}
.nav__pm {
  position: absolute; top: calc(100% + 8px); left: clamp(13px, 1.4vw, 24px);
  z-index: 5; min-width: 15.5rem; display: grid; padding: 4px;
  background: var(--dgfe-neutral-50); border: 1px solid var(--rule-2);
  box-shadow: 0 4px 12px rgba(28, 36, 75, .15);
}
/* Author-Style schlaegt das UA-`display:none` von [hidden] nicht von selbst,
   sobald `display: grid` daneben steht — deshalb ausdruecklich. */
.nav__pm[hidden] { display: none; }
.nav .nav__pm a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 12px; border-bottom: 0; white-space: nowrap;
}
.nav__pmk { display: none; }
/* GSP ist Entwurf. Beim Veroeffentlichen faellt `data-entwurf` weg und diese
   Kennzeichnung, sonst nichts. */
.nav__ent {
  font-size: var(--fs-2); line-height: 1.25; letter-spacing: .14em;
  color: var(--ink-quiet); border: 1px solid var(--rule-2); padding: 1px 7px;
}

/* --- Die Anzeige bleibt am Telefon (Teil 4) -------------------------------
   Sie verschwand ab 1024 px vollstaendig. Damit war die Kopfzeile am Telefon
   ein Logo mit Schalter und am Rechner ein Instrument — genau der Unterschied,
   den Teil 4 abstellt. Sie kommt nicht in ihrer breiten Form zurueck: bis
   768 px steht sie enger in derselben Zeile, darunter als eigene Zeile unter
   Marke und Schalter. Paritaet ist Vorhandensein, nicht Anordnung.

   `.site-header .readout` traegt zwei Stellen Spezifitaet, damit diese Regel
   die `.readout`-Regel der Bewegungsschicht schlaegt. Die ist fuer eine
   Anzeige UNTER einer Grafik geschrieben (`width: 100%`, Oberkante als
   Haarlinie) und wuerde eine Kopfzeile mit fester Hoehe sprengen.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .site-header .readout {
    display: flex; align-items: baseline; gap: 8px;
    margin-left: clamp(12px, 2vw, 22px); margin-right: auto;
    padding-left: clamp(12px, 2vw, 22px);
    border-left: 1px solid var(--rule); border-top: 0;
    position: static; width: auto;
  }
}
@media (max-width: 767px) {
  /* Zwei Zeilen statt einer: bei 360 px bleiben neben Marke und Schalter rund
     180 px, und der laengste Schluessel braucht mehr. Die Kopfzeile waechst
     dafuer um 30 px — der Wert steht in `--header-h`, an dem auch der
     Hero-Abstand und `scroll-padding-top` haengen. */
  :root { --header-h: 90px; --header-h-sm: 78px; }
  .site-header__in { flex-wrap: wrap; align-content: center; row-gap: 0; }
  .brand { order: 1; }
  .nav-toggle { order: 2; margin-left: auto; }
  .site-header .readout {
    order: 3; flex: 1 0 100%; flex-wrap: wrap; width: 100%;
    margin: 5px 0 0; padding: 5px 0 0;
    border-left: 0; border-top: 1px solid var(--rule);
  }
  .site-header .readout > * { flex: 0 0 auto; }
  .site-header.is-condensed .readout { margin-top: 2px; padding-top: 3px; }
}

/* --- Kompaktes Menue: der Partner-Block wird Teil des Aufklappmenues ------ */
@media (max-width: 1024px) {
  .nav__pw { display: block; position: relative; margin-top: 12px; padding-top: 13px; }
  /* Aus der senkrechten Haarlinie wird eine waagerechte ueber die volle
     Breite: dieselbe Aussage, nur in der Achse, in der das Menue laeuft. */
  .nav__pw::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: var(--rule-2);
  }
  .nav .nav__part { display: none; }
  .nav a:has(+ .nav__pw) { border-bottom: 0; }
  .nav__pm {
    position: static; display: block; min-width: 0; padding: 0;
    border: 0; background: none; box-shadow: none;
  }
  .nav .nav__pm a {
    justify-content: flex-start; gap: 10px; padding: 0; min-height: 48px;
    border-bottom: 1px solid var(--rule); white-space: normal;
  }
  .nav__pmk {
    display: block; padding-bottom: 4px;
    font-size: var(--fs-2); line-height: 1; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-quiet);
  }
}


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

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

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

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


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

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

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

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


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

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

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

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

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


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

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

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


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

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

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

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


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

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


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

   Zwei getrennte Sachen, die oft verwechselt werden:

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

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

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


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

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

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

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