/* ===========================================================================
   ANFRAGE & KONTAKT — „KORRESPONDENZ"

   Die Welt dieser Seite ist nicht das Messen (Startseite) und nicht das
   Abrechnen (Energiebeschaffung), sondern der SCHRIFTVERKEHR: eine Anfrage
   geht ein, wird geprueft, wird beantwortet. Die Form kommt deshalb aus dem
   deutschen Geschaeftsbrief nach DIN 5008.

     BEZUGSBLOCK  (.bez)  Der Kopf jeder Sektion ist der Informationsblock des
                          Briefes: „Blatt / Vorgang / Empfaenger / Antwort",
                          Schluessel klein in Versalien, Wert darunter,
                          senkrechte Haarlinien dazwischen, oben eine
                          2-px-Navy-Bezugslinie.
     ANSCHRIFTENFELD      Der Hero traegt KEIN Foto, sondern das, was oben auf
                          einem Brief steht: an wen er geht. Das ist zugleich
                          der Pflichtinhalt dieser Seite (Anschrift, E-Mail).
     EINGANGSMARKE (.mk)  DIE SIGNATURE. Ein rechteckiger Stempelkasten mit
                          2-px-Navy-Rahmen und einer Fahne an der Oberkante.
                          Er kommt genau dreimal vor und immer fuer dieselbe
                          Sache — und er erzaehlt dabei den ganzen Vorgang:
                            1. im Briefkopf LEER (Fahne grau, Werte „—"),
                               eine einzige Zeile ist schon ausgefuellt:
                               die Antwortzeit.
                            2. klein als Station des Laufwegs ueber dem
                               Formular (leer -> gerahmt -> gefuellt+Fahne)
                            3. am Ende AUSGEFUELLT als Eingangsvermerk.
                          Gelb ist auf dieser Seite die Fahne „eingegangen" —
                          und sonst nur der Knopf. Nichts weiter.

   Bewusst NICHT gebaut: eine senkrechte Marginalspalte mit Falz- und
   Lochmarken. Die haette zwar zum Briefbogen gepasst, waere aber formal die
   Messachse der Startseite gewesen — dasselbe Bauteil mit neuer Begruendung
   ist keine Uebersetzung, sondern ein Zitat.
   =========================================================================== */

/* --- 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: cubic-bezier(.34, 1.06, .3, 1);
  --t-draw: 1100ms; --t-rise: 720ms; --t-shut: 860ms; --t-point: 420ms;
  --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);
}
@media (hover: hover) and (pointer: fine) { .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); } }
.btn__a { transition: transform 280ms var(--e-draw); }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__a, .btn:focus-visible .btn__a { transform: translateX(6px); } }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__a--b, .btn:focus-visible .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); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover, .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); }
@media (hover: hover) and (pointer: fine) { .btn--onnavy:hover, .btn--onnavy:focus-visible { 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);
}
.nav a.nav__part {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  position: relative; font-size: var(--fs-2); color: var(--ink);
  margin-left: clamp(2px, .5vw, 10px); padding-left: clamp(13px, 1.4vw, 24px);
}
.nav a.nav__part::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 1px; height: 24px; background: var(--rule-2);
}
.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 { 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; }
/* DIE POSITIONSZEILE — die Unterschritt-Ebene ----------------------------
   Ein Geschaeftsvordruck nummeriert seine Positionen nicht in Kaesten: die
   Ziffer steht frei am Zeilenanfang auf einer Haarlinie, von der Bezeichnung
   laufen Fuehrungspunkte nach rechts, und dort steht der Eintrag.
   Die Abgrenzung nach oben ist der eigentliche Punkt. Auf dieser Seite gibt
   es bereits zwei Nummernebenen, und beide sind KAESTEN aus der Familie der
   Eingangsmarke: der Laufweg (drei Stationen) und das Beiblatt. Eine dritte
   Kastenreihe waere nicht zu unterscheiden gewesen. Also:
     Kasten mit Fahne  = Marke/Station   (Laufweg, Beiblatt, Vermerk)
     freie Ziffer auf  = Position auf dem Vordruck (hier)
     Linie + Punkte
   Deshalb ist die frueher gerahmte Feldkennung jetzt ungerahmt. Der Rahmen
   war richtig, solange er allein stand; neben dem Laufweg ist er es nicht. */
.fs__lg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; 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); }
.fs__n { position: relative; flex: none; padding-bottom: 4px;
         border-bottom: 1px solid var(--rule-2); color: var(--ink-quiet);
         font-variation-settings: "wdth" 62, "wght" 700; letter-spacing: .06em;
         font-size: var(--fs-2); }
/* Der Positionshaken: die Haarlinie unter der Ziffer wird navy und 2 px,
   sobald die Position vollstaendig ist. Dieselbe Geste wie die Aktenlinie im
   Laufweg — und bewusst NICHT gelb, Gelb bleibt die Fahne „eingegangen". */
.fs__n::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
                background: var(--dgfe-navy-500); transform: scaleX(0);
                transform-origin: left center; transition: transform 380ms var(--e-draw); }
/* `nowrap`: die Bezeichnung ist kurz und darf nie umbrechen. Ohne das reisst
   der Pflicht-Stern in eine zweite Zeile und haengt allein unter dem Wort. */
.fs__lb { flex: none; white-space: nowrap; }
.fs__dots { flex: 1 1 30px; min-width: 18px; align-self: center;
            height: 0; border-bottom: 1px dotted var(--rule-2); }
/* Der Eintrag am rechten Rand. Drei Zustaende, jeder mit eigenem WORT — nie
   allein ueber die Farbe: „noch nicht gewaehlt" / „unvollstaendig" /
   „gesperrt" / der tatsaechliche Wert. */
.fs__st { flex: 0 1 auto; min-width: 0; margin-left: auto; max-width: 48%;
          text-align: right; color: var(--ink-quiet);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs.is-done .fs__n { color: var(--ink-strong); }
.fs.is-done .fs__n::after { transform: scaleX(1); }
.fs.is-done .fs__st { color: var(--ink-strong); }
.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; }
/* Der Stern steht jetzt IN der Bezeichnung, hinter einem echten Leerzeichen —
   der alte Ausgleich von -6px stammt aus der Zeit, als er direkt an der
   Legende hing, und zog ihn in den letzten Buchstaben. */
.fs__lg .req { margin-left: 0; }
.unit { color: var(--ink-quiet); }
.optag { flex: none; 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 > .fs__lg .fs__n, .is-bad > .fs__lg .fs__lb,
.is-bad > .fs__lg .fs__st, .is-bad > .fs__lg .optag { 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) DER LAUFWEG — der Fortschritt in der Sprache dieses Blatts -------
   Auf der Startseite ist der Fortschritt eine Messstrecke mit runden
   Messpunkten. Hier ist er der Weg eines Vorgangs ueber drei Stationen, und
   jede Station ist eine kleine Eingangsmarke — dasselbe Bauteil wie die grosse
   im Briefkopf, nur im Kleinformat. Der Zustand steht in der Form:
     offen      1-px-Haarlinie, Fahne unsichtbar
     laufend    2-px-Navy-Rahmen, Fahne unsichtbar
     erledigt   Navy gefuellt, gelbe Fahne faehrt von links auf
   Die Linie dazwischen ist die Aktenlinie und fuellt sich NAVY, nicht gelb:
   Gelb bleibt auf dieser Seite die Fahne „eingegangen" und sonst nichts.
   ------------------------------------------------------------------------ */
.lw { border-top: 1px solid var(--rule-2); padding-top: clamp(14px, 1.6vw, 20px);
      margin-bottom: clamp(26px, 3vw, 40px); }
.lw__list { display: flex; align-items: center; gap: clamp(7px, 1.1vw, 15px); margin: 0; }
.lw__s { display: flex; align-items: center; gap: clamp(7px, 1.1vw, 15px); min-width: 0; }
.lw__s:not(:last-child) { flex: 1 1 auto; }
.lw__b { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; min-width: 0;
         padding: 4px 2px; margin: 0; background: none; border: 0; cursor: pointer;
         font: inherit; color: var(--ink-quiet); text-align: left; }
.lw__mk {
  position: relative; overflow: hidden; flex: none;
  width: 36px; height: 30px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--rule-2);
  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; color: var(--ink-quiet);
  transition: background-color var(--t-ui) var(--e-shut),
              border-color var(--t-ui) var(--e-shut), color var(--t-ui) var(--e-shut);
}
.lw__fl { position: absolute; left: 0; right: 0; top: 0; height: 4px;
          background: var(--dgfe-yellow-500);
          transform: scaleX(0); transform-origin: left center;
          transition: transform 460ms var(--e-draw); }
.lw__t { font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
         font-weight: 600; text-transform: uppercase; font-size: var(--fs-2);
         letter-spacing: .15em; line-height: 1.2; white-space: nowrap; }
.lw__s[data-state="current"] .lw__mk {
  border: 2px solid var(--dgfe-navy-500); color: var(--ink-strong); }
.lw__s[data-state="current"] .lw__t { color: var(--ink-strong); }
.lw__s[data-state="done"] .lw__mk {
  background: var(--dgfe-navy-500); border-color: var(--dgfe-navy-500); color: #fff; }
.lw__s[data-state="done"] .lw__fl { transform: scaleX(1); }
.lw__s[data-state="done"] .lw__t { color: var(--ink); }
.lw__ln { position: relative; flex: 1 1 24px; min-width: 14px; height: 1px; background: var(--rule-2); }
.lw__ln i { position: absolute; left: 0; top: -.5px; width: 100%; height: 2px;
            background: var(--dgfe-navy-500);
            transform: scaleX(0); transform-origin: left center;
            transition: transform 560ms var(--e-draw); }
.lw__s[data-state="done"] .lw__ln i { transform: scaleX(1); }
.lw__idx { margin-top: 13px; text-align: right; font-size: var(--fs-2);
           letter-spacing: .17em; color: var(--ink-quiet); }
.lw__idx b { font-weight: inherit; color: var(--ink-strong); }
.lw__idxt { display: none; }

.wz__panel[hidden], .wpath[hidden], .gbranch[hidden] { display: none; }
.motion .wz__panel { opacity: 0; translate: 0 12px; }
.motion .wz__panel.is-live { opacity: 1; translate: none;
  transition: opacity 480ms var(--e-rise), translate 480ms var(--e-rise); }

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

/* --- 14) Schritt 1 — die Eingangsarten -----------------------------------
   Drei Zeilen in der Grammatik des Bezugsblocks: Schluessel links, Betreff
   und Text in der Mitte, Bearbeitungsdauer rechts. Die gewaehlte Zeile
   bekommt eine kleine gefuellte Eingangsmarke vor dem Schluessel — nicht eine
   gelbe Randkante wie auf der Startseite, sondern das Bauteil dieser Seite.
   ------------------------------------------------------------------------ */
.eing { position: relative; display: block; border-bottom: 1px solid var(--rule); }
.eings { border-top: 1px solid var(--rule-2); }
.eings .eing:last-child { border-bottom-color: var(--rule-2); }
.eing input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
              opacity: 0; cursor: pointer; z-index: 2; }
.eing__in { position: relative; display: grid;
            grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) minmax(0, 7rem);
            gap: 6px clamp(14px, 2.2vw, 38px); align-items: baseline;
            padding: clamp(18px, 2.1vw, 26px) clamp(12px, 1.4vw, 18px);
            transition: background-color var(--t-ui) var(--e-shut); }
.eing__k { display: flex; align-items: center; gap: 10px;
           font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
/* Die Marke im Kleinstformat: 14 px, gerahmt, mit Fahne an der Oberkante. */
.eing__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); }
.eing__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); }
.eing__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; }
.eing__d { display: block; margin-top: 9px; font-size: var(--fs-3); line-height: 1.5; max-width: 48ch;
           -webkit-hyphens: auto; hyphens: auto; }
.eing__meta { font-size: var(--fs-2); letter-spacing: .15em; color: var(--ink-quiet); text-align: right; }
.eing__pick { display: block; margin-top: 9px; font-style: normal; color: var(--ink-accent);
              visibility: hidden; opacity: 0; transition: opacity var(--t-ui) var(--e-shut); }
@media (hover: hover) and (pointer: fine) { .eing:hover .eing__in { background: color-mix(in srgb, var(--dgfe-navy-500) 3%, transparent); } }
.eing input:checked ~ .eing__in { background: var(--paper-2); }
.eing input:checked ~ .eing__in .eing__mk { background: var(--dgfe-navy-500);
                                            border-color: var(--dgfe-navy-500); }
.eing input:checked ~ .eing__in .eing__mk::after { transform: scaleX(1); }
.eing input:checked ~ .eing__in .eing__k { color: var(--ink-strong); }
.eing input:checked ~ .eing__in .eing__pick { opacity: 1; visibility: visible; }
.eing input:focus-visible ~ .eing__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); }

/* --- DER SPERRVERMERK -----------------------------------------------------
   Eine Sperre ohne Begruendung ist eine Ausrede. Der Kasten sagt in einem
   Satz, WORAN die Position haengt und WARUM das so ist — und traegt links die
   leere Eingangsmarke ohne Fahne: an dieser Position ist noch nichts
   eingegangen. Aufgehoben wird die Sperre durch Text, nicht durch Farbe, und
   der Text wechselt an derselben Stelle (`aria-live="polite"`).
   ------------------------------------------------------------------------ */
/* `[hidden]` schlaegt die Klasse nur mit hoeherer Spezifitaet — `display:grid`
   an einer Klasse wuerde das UA-`display:none` sonst ueberstimmen. */
.lockbox > [hidden] { display: none; }
.lockmsg, .openmsg {
  margin-bottom: var(--dgfe-space-lg);
  display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 13px;
  align-items: start; padding: clamp(13px, 1.5vw, 17px) clamp(13px, 1.6vw, 19px);
  background: var(--paper-2); border-left: 2px solid var(--rule-2);
  font-size: var(--fs-2); line-height: 1.5; color: var(--ink); max-width: 62ch;
}
/* 19 x 14, nicht quadratisch: ein Quadrat links neben einem Satz liest sich
   als Kontrollkaestchen — die Marke ist aber kein Bedienelement. Dasselbe
   Querformat wie an der Vertrauenszeile und an der Schlussmarke. */
.lockmsg__mk { width: 19px; height: 14px; margin-top: 4px;
               background: var(--paper); border: 1px solid var(--rule-2); }
/* Aufgeschlossen: die Marke bekommt ihre Fahne, die Kante wird navy. Beide
   Zustaende tragen ausserdem eigenen Text — Farbe allein entscheidet nichts. */
.openmsg { border-left-color: var(--dgfe-navy-500); }
.openmsg .lockmsg__mk { position: relative; overflow: hidden;
                        background: var(--dgfe-navy-500); border-color: var(--dgfe-navy-500); }
.openmsg .lockmsg__mk::after { content: ""; position: absolute; left: 0; right: 0; top: 0;
                               height: 3px; background: var(--dgfe-yellow-500); }
.lockmsg b, .openmsg b { color: var(--ink-strong); font-weight: 500; }

/* --- DIE LAUFENDE ZUSAMMENSTELLUNG ---------------------------------------
   Kein neues Bauteil: es IST die Eingangsmarke, nur noch leer. Die Fahne ist
   grau, solange gesammelt wird, und wird gelb, wenn der Vorgang eingeht. Man
   sieht also vom ersten Feld an genau den Beleg, den man am Ende bekommt —
   dieselbe Form, dieselben Zeilen, im JS dieselbe Quelle.
   ------------------------------------------------------------------------ */
.zus { margin-top: clamp(30px, 3.4vw, 46px); }
.mk--lauf .mk__flag { background: var(--rule-2); }
.mk__v--off { color: var(--ink-quiet); }
/* Die Zeile, die schon steht, bekommt links eine navy Kante — Position
   „liegt vor". Wieder Form, nicht nur Farbe: die Kante ist da oder nicht. */
.mk__r--set { box-shadow: inset 2px 0 0 0 var(--dgfe-navy-500); }

/* --- Die Vertrauenszeile unter dem Absende-Knopf -------------------------- */
.vtrust { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px;
          width: 100%; margin-top: clamp(14px, 1.6vw, 18px);
          font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
          font-weight: 600; text-transform: uppercase; font-size: var(--fs-2);
          letter-spacing: .15em; line-height: 1.4; color: var(--ink-quiet); }
.vtrust i { position: relative; overflow: hidden; flex: none; width: 19px; height: 14px;
            border: 1px solid var(--rule-2); }
.vtrust i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
                   background: var(--rule-2); }
.vtrust span + span::before { content: "\00B7"; margin-right: 13px; color: var(--rule-2); }

/* Termin-Slots */
.slots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
.slots--time { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.slot { position: relative; }
.slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.slot > span { display: grid; place-items: center; gap: 5px; min-height: 62px; padding: 10px 6px;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px; text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-ui) var(--e-shut), box-shadow var(--t-ui) var(--e-shut); }
.slots--time .slot > span { min-height: 48px; font-size: var(--fs-3); color: var(--ink-strong); }
.slot__d { font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600; font-weight: 600;
           font-size: var(--fs-2); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-quiet); }
.slot__n { font-family: var(--ff-dsp); font-variation-settings: "wdth" 104, "wght" 700; font-weight: 700;
           font-size: var(--fs-3); letter-spacing: -.01em; color: var(--ink-strong); }
@media (hover: hover) and (pointer: fine) { .slot:hover > span { border-color: var(--dgfe-navy-300); } }
.slot input:checked + span { border-color: var(--dgfe-navy-500);
                             box-shadow: inset 0 3px 0 0 var(--dgfe-yellow-500); }
.slot input:focus-visible + span { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dgfe-navy-500) 80%, transparent); }
.slotnote { margin-top: 11px; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-quiet); }

/* Schrittwechsel */
.wznav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
         margin-top: clamp(28px, 3.2vw, 42px); padding-top: clamp(18px, 2vw, 26px);
         border-top: 1px solid var(--rule-2); }
.wznote { flex: 1 1 18ch; min-width: 0; font-size: var(--fs-2); line-height: 1.45;
          color: var(--ink-quiet); text-align: right; }
.wz__panel[data-step="1"] .wznav { border-top: 0; padding-top: 0;
                                   margin-top: clamp(22px, 2.4vw, 32px); }
.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); }

/* --- 15) Das Beiblatt neben dem Formular ---------------------------------
   Was eine Kontaktseite tragen muss — was nach dem Absenden passiert, die
   Antwortzeit, die Anschrift — steht nicht irgendwo weiter unten, sondern
   neben dem Formular, in Sichtweite der Entscheidung.
   ------------------------------------------------------------------------ */
/* `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); }
/* Die drei Stationen nach dem Eingang. Nummeriert, weil es wirklich eine
   Reihenfolge ist: nichts wird geprueft, bevor es eingegangen ist. */
.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) Themenzeilen ----------------------------------------------------- */
.thm { border-top: 1px solid var(--rule-2); }
/* 8rem fuer die Aktion, nicht 12: „ANSEHEN →" braucht 88 px, die restlichen
   64 px nahm sie dem Satz weg, und der lief bei 1440 auf vier Zeilen à 34
   Zeichen — eine Spalte zu schmal fuer den Text, den sie traegt. */
.thm__i {
  display: grid;
  /* FESTE erste Spalte, nicht fit-content.
     Jede Zeile ist ein eigenes Grid, also rechnet bei `fit-content` jede
     ihre Spaltenbreite selbst aus. Gemessen bei 1440: die Textspalte
     begann bei 791 / 821 / 767 px, weil "Energieeffizienz",
     "Energiebeschaffung" und "Energiesiegel" verschieden lang sind.
     54 px Versatz zwischen erster und dritter Zeile, und genau das sieht
     man als schiefe Tabelle.
     11.5rem traegt die laengste Beschriftung ("Energiebeschaffung",
     gemessen 172 px) mit etwas Luft. Die dritte Spalte bleibt
     fit-content: dort steht ueberall dasselbe, sie fluchtet ohnehin. */
  grid-template-columns: 11.5rem minmax(0, 1fr) fit-content(46%);
          gap: 8px clamp(14px, 2.2vw, 38px); align-items: baseline;
          padding: clamp(20px, 2.3vw, 30px) 0; border-bottom: 1px solid var(--rule); }
.thm__i:last-child { border-bottom-color: var(--rule-2); }
.thm__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.thm__t { display: block; font-family: var(--ff-dsp);
          font-variation-settings: "wdth" 88, "wght" 650; font-weight: 600;
          font-size: var(--fs-4); line-height: 1.15;
          letter-spacing: -.012em; color: var(--ink-strong); }
.thm__d { display: block; margin-top: 9px; font-size: var(--fs-3); line-height: 1.5; max-width: 52ch; }
.thm__a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
          font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
          font-weight: 600; text-transform: uppercase; font-size: var(--fs-2); letter-spacing: .13em;
          text-decoration: none; }
.thm__a i { font-style: normal; transition: transform 280ms var(--e-draw); }
@media (hover: hover) and (pointer: fine) { .thm__a:hover i { transform: translateX(6px); } }

/* --- 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 -------------------------------------------------------- */
.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; }
.grp > *:nth-child(1){--i:0} .grp > *:nth-child(2){--i:1} .grp > *:nth-child(3){--i:2}
.grp > *:nth-child(4){--i:3} .grp > *:nth-child(5){--i:4} .grp > *:nth-child(6){--i:5}
.motion .lm:nth-of-type(1){--i:0} .motion .lm:nth-of-type(2){--i:1} .motion .lm:nth-of-type(3){--i:2}
.motion .ph__shut { transform: translateY(0); }
.motion .b-da .ph__shut { transform: translateY(-101%); transition: transform var(--t-shut) var(--e-shut) var(--sd, 0ms); }
.motion .ph img { scale: 1.075; }
.motion .b-da .ph img { scale: 1; transition: scale 1300ms var(--e-shut) var(--sd, 0ms); }

/* --- 19) Breakpoints ------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --page: 900px; }
  .readout { display: none; }
  .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 a.nav__part { margin-left: 0; padding-left: 0; margin-top: 12px; padding-top: 13px; }
  .nav a.nav__part::before { left: 0; right: 0; top: 0; width: auto; height: 1px; translate: none; }
  .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); }
  .beibl { position: static; }
  /* Der Bezugsblock haelt bis 1024 vier Felder — darunter reissen die Werte. */
  .thm__i { grid-template-columns: 11.5rem minmax(0, 1fr); }
  .thm__a { grid-column: 2; }
}
@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; }
  /* Laufweg: bei 390 px tragen die Marken allein, der Name des Schritts
     wandert unter die Strecke. Sonst reisst die Zeile. */
  .lw__t { display: none; }
  .lw__idx { text-align: left; }
  .lw__idxt { display: inline; }
  .lw__b { gap: 0; padding: 4px 8px; }
  .eing__in { grid-template-columns: 1fr; align-items: start; }
  .eing__meta { text-align: left; padding-top: 2px; }
  .eing__pick { margin-top: 6px; }
  .mk__r { grid-template-columns: 1fr; gap: 4px; }
  /* Positionszeile: bei 390 px tragen Ziffer und Bezeichnung die erste Zeile,
     der Eintrag rueckt darunter. Fuehrungspunkte ergeben nur auf EINER Zeile
     einen Sinn — sie fuehren dann ins Leere und fallen weg. */
  .fs__lg { gap: 5px 10px; }
  .fs__lb { flex: 1 1 auto; }
  .fs__dots { display: none; }
  .fs__st { flex: 1 1 100%; max-width: 100%; margin-left: 0; text-align: left;
            white-space: normal; overflow: visible; }
  .thm__i { grid-template-columns: 1fr; }
  .thm__a { grid-column: 1; }
  .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; }
  .motion .r, .motion .rq, .motion .grp > * {
    opacity: 1 !important; translate: none !important; scale: none !important;
  }
  .motion .lm i { translate: none !important; }
  /* Sicherheitsnetz: der aktive Schritt ist auch dann sichtbar, wenn `motion`
     aus irgendeinem Grund doch gesetzt wurde. */
  .motion .wz__panel { opacity: 1 !important; translate: none !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; }


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

/* Verweis auf eine Seite, die noch Entwurf ist: sieht aus wie ein
   Link, ist keiner, weil das Ziel nicht oeffentlich ist. Zum
   Freischalten wieder <a href="…"> daraus machen. */
.ist-entwurf { opacity: .62; font-weight: 400; }
[data-entwurf] { cursor: default; }