/* ===========================================================================
   SIEGEL-ÜBERSICHT — die vier Stufen erklärt
   Unterseite zu „Route A · Energiesiegel". Kein neues Formenvokabular:
   dieselbe Prüfspalte, dieselben Stempelfelder, dieselbe Randschrift,
   dieselbe Staffel. Neu zusammengesetzt ist nur die REIHENFOLGE und ein
   Bauteil, das die Schwesterseite nicht hat — die Vergleichstafel.

   WARUM DIE VERGLEICHSTAFEL UND NICHT VIER KARTEN. Vier Preiskarten
   nebeneinander sind das universelle Zeichen dafuer, dass niemand
   entschieden hat, was wichtiger ist — und sie beantworten die Frage der
   Seite gerade nicht. Die Frage lautet „was ist ueberall gleich, wo liegt
   der Unterschied", und das ist eine Frage nach ZEILEN, nicht nach Kacheln.
   Die Tafel zeigt sie: acht von zwoelf Zeilen sind in allen vier Stufen
   gefuellt. Genau das ist die Auskunft.

   DIE VIER MARKEN KOMMEN NUR EINMAL VOR. Starter und Standard tragen
   dasselbe Gruen `#497f2d` (nachgeprueft an den Quelldateien). Vier Marken
   nebeneinander, von denen zwei identisch aussehen, lesen sich als Fehler.
   Die Ausfertigung steht deshalb als ZEILE in der Tafel — Gruen, Gruen,
   Silber, Gold — und die Marke selbst steht einmal, gross, im
   Ausstellungsfeld.

   KEIN KAUF. Preise sind Orientierung, jeder Knopf fuehrt auf
   /energiesiegel-anfragen/ mit vorbelegtem Paket. Kein Wort aus der
   Kaufsprache steht auf dieser Seite.
   =========================================================================== */

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

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

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

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

  --dgfe-color-heading: var(--dgfe-navy-500);
  --dgfe-color-link:    var(--dgfe-blue-500);
  --dgfe-color-focus-ring: var(--dgfe-yellow-500);

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

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

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

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

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

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

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

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

/* --- 2) SEITEN-SCHICHT — zeichengleich zur Energiesiegel-Seite ------------ */
:root {
  --paper:    #ffffff;
  --paper-2:  color-mix(in srgb, var(--dgfe-navy-50) 62%, white);

  --ink:        var(--dgfe-navy-400);
  --ink-strong: var(--dgfe-navy-500);
  --ink-quiet:  var(--dgfe-navy-300);
  --ink-accent: var(--dgfe-yellow-800);

  --ink-n:        #ffffff;
  --ink-n-muted:  color-mix(in srgb, white 80%, var(--dgfe-navy-500));
  --ink-n-quiet:  color-mix(in srgb, white 60%, var(--dgfe-navy-500));

  --rule:    color-mix(in srgb, var(--dgfe-navy-500) 16%, transparent);
  --rule-2:  color-mix(in srgb, var(--dgfe-navy-500) 30%, transparent);
  --rule-n:  color-mix(in srgb, var(--dgfe-yellow-500) 24%, transparent);
  --rule-n2: color-mix(in srgb, var(--dgfe-yellow-500) 45%, transparent);

  --page:  1560px;
  --gut:   clamp(16px, 3.2vw, 52px);
  --axis:  clamp(46px, 6vw, 104px);
  --colgap: clamp(14px, 1.6vw, 26px);
  --header-h: 68px;
  --header-h-sm: 54px;
  --bleed: max(var(--gut), calc((100vw - var(--page)) / 2));

  /* Dichte-Skala, unveraendert uebernommen: Abstand einer KANTE zum Text
     darin, drei Stufen, alle Endpunkte aus der Abstandsskala. */
  --inset-line: clamp(var(--dgfe-space-md), 1.55vw, var(--dgfe-space-lg));
  --inset-row:  clamp(var(--dgfe-space-md), 2vw,    var(--dgfe-space-xl));
  --inset-box:  clamp(var(--dgfe-space-lg), 2.4vw,  var(--dgfe-space-2xl));

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

  --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; }
/* Trennung am Fliesstext, nicht an einer Liste von Bauteilen — dieselbe
   Regel und dieselben Grenzen wie auf der Schwesterseite. */
p, li, figcaption, .lead, .measure, .measure-sm, .measure-xs, th, td {
  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); }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--dgfe-color-focus-ring);
  outline-offset: 2px; border-radius: 2px;
}
.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 — identisch zur Energiesiegel-Seite -------------------- */
.dsp {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 116, "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--ink-strong);
  overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 9 5 4;
}
/* Die Schwesterseite muss ihre Skala auf „ENERGIEWIRTSCHAFT." (18 Zeichen)
   rechnen. Die laengste Hero-Zeile hier ist „EIN STANDARD." mit 13 Zeichen
   und braucht in Archivo wdth 116 das 9,1-fache ihrer Schriftgroesse:
     1440 px  Textspalte 777 px  →  777 / 9,1 = 85 px moeglich, Deckel 64 px
      390 px  Textspalte 275 px  →  275 / 9,1 = 30 px moeglich, Sockel 24 px
   Die Zeilenmaske (.lm, overflow:hidden) schneidet sonst ab. */
.h1 { font-size: var(--fs-10); letter-spacing: -.028em; }
.h2 { font-size: var(--fs-9); letter-spacing: -.022em; }
.h3 {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 108, "wght" 650;
  font-weight: 600; text-transform: uppercase;
  font-size: var(--fs-4);
  line-height: 1.16; letter-spacing: .002em; color: var(--ink-strong);
  text-wrap: balance;
  hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 9 5 4;
}
.cond {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 70, "wght" 600;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: .15em; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.num {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-weight: 700; line-height: .88; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.num .u   { font-size: var(--fs-4); font-weight: 500; font-variation-settings: "wdth" 88, "wght" 500; letter-spacing: 0; margin-left: .14em; }
.num .pfx { font-size: var(--fs-4);  font-weight: 500; font-variation-settings: "wdth" 88, "wght" 500; margin-right: .46em; letter-spacing: 0; }

.eyebrow { display: block; font-size: var(--fs-2); color: var(--ink-accent); }

.lead { font-size: var(--fs-4); line-height: 1.58; font-weight: 300; }
.measure    { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.measure-xs { max-width: 34ch; }
.cap {
  font-family: var(--ff-dsp);
  font-variation-settings: "wdth" 74, "wght" 500;
  font-size: var(--fs-2); line-height: 1.45; letter-spacing: .04em;
  color: var(--ink-quiet); margin-top: 10px; text-wrap: pretty;
}

.hd { margin-bottom: clamp(14px, 1.5vw, 22px); }
.hd:last-child { margin-bottom: 0; }
.hd + .lead, .hd + p { margin-top: clamp(16px, 1.8vw, 26px); }
.eyebrow + .dsp { margin-top: clamp(14px, 1.4vw, 20px); }
.stack > * + * { margin-top: var(--dgfe-space-lg); }

/* --- 4b) Grundwechsel ueber die TOKEN, nicht ueber Selektoren ------------- */
.on-navy {
  --ink:        var(--ink-n-muted);
  --ink-strong: var(--ink-n);
  --ink-quiet:  var(--ink-n-quiet);
  --ink-accent: var(--dgfe-yellow-500);
  --dgfe-color-heading: var(--ink-n);
  --dgfe-color-link:    var(--dgfe-yellow-500);
  --rule:   var(--rule-n);
  --rule-2: var(--rule-n2);
  color: var(--ink);
}
.on-navy strong, .on-navy b { font-weight: 400; }
.on-paper {
  --ink:        var(--dgfe-navy-400);
  --ink-strong: var(--dgfe-navy-500);
  --ink-quiet:  var(--dgfe-navy-300);
  --ink-accent: var(--dgfe-yellow-800);
  --dgfe-color-heading: var(--dgfe-navy-500);
  --dgfe-color-link:    var(--dgfe-blue-500);
  --rule:   color-mix(in srgb, var(--dgfe-navy-500) 16%, transparent);
  --rule-2: color-mix(in srgb, var(--dgfe-navy-500) 30%, transparent);
  color: var(--ink);
}

/* --- 5) Raster: linke Pruefspalte + 12 Spalten ---------------------------- */
.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;
  display: grid;
  grid-template-columns: var(--axis) minmax(0, 1fr);
  column-gap: clamp(var(--dgfe-space-lg), 2.6vw, var(--dgfe-space-2xl));
}
.sheet__body { min-width: 0; padding-block: var(--secY); }
.sec--tall .sheet__body { padding-block: var(--secY-lg); }
.sec--flat .sheet__body { padding-block: 0; }

.axis {
  position: relative;
  border-right: 1px solid var(--rul);
  padding-top: var(--apad, var(--secY));
  padding-right: var(--inset-line);
  display: flex; flex-direction: column; align-items: flex-end;
}
.sec--tall { --apad: var(--secY-lg); }
.sec--flat { --apad: 0px; }
.hero { --apad: clamp(44px, 5.6vw, 92px); }
.axis__tick {
  position: absolute; top: calc(var(--apad, var(--secY)) + 17px); right: -6px;
  width: 13px; height: 1px; background: var(--rule-2);
}
.sec--navy .axis__tick { background: var(--rule-n2); }
.sec--flat .axis__tick { display: none; }

/* Das Stempelfeld der Achse. Auf der Schwesterseite zaehlt es die PRUEFSTUFE
   (1 → 4). Diese Seite hat keinen Pruefweg, sie hat Blaetter: das Feld traegt
   deshalb die Abschnittsnummer, genau wie die Registerzeilen der
   Partnerseite ihre Abschnitte nummerieren. Damit kein Leser die beiden
   Zaehlungen verwechselt, steht die Einheit darunter ausgeschrieben. */
.axis__stamp {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center; position: relative;
  background: var(--dgfe-navy-500); color: #fff;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 110, "wght" 700;
  font-weight: 700; font-size: var(--fs-3); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.axis__stamp::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--dgfe-yellow-500);
}
.sec--navy .axis__stamp { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500); }
.sec--navy .axis__stamp::after { background: var(--dgfe-navy-500); }
.axis__unit {
  margin-top: 9px; font-size: var(--fs-2); letter-spacing: .16em;
  color: var(--ink-quiet); text-align: right;
}
.axis__name {
  margin-top: 16px; font-size: var(--fs-2); letter-spacing: .18em;
  color: var(--ink-quiet); writing-mode: vertical-rl; transform: rotate(180deg);
}
.closer .axis__unit, .closer .axis__name { color: var(--ink-n-muted); }

.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
     column-gap: var(--colgap); row-gap: clamp(30px, 3.6vw, 60px); }
.g--tight { row-gap: clamp(24px, 2.8vw, 42px); }
.c1-4{grid-column:1/5}   .c1-5{grid-column:1/6}   .c1-6{grid-column:1/7}
.c1-7{grid-column:1/8}   .c1-8{grid-column:1/9}   .c1-12{grid-column:1/-1}
.c6-12{grid-column:6/-1} .c7-12{grid-column:7/-1} .c8-12{grid-column:8/-1}
.c9-12{grid-column:9/-1}
.bleed { margin-right: calc(-1 * var(--bleed)); }

/* --- 6) Bildgradation — derselbe Duotone wie auf allen Schwesterseiten ----
   Grau, kontrastiert, per `luminosity` gegen Navy. Beim Scrollen faerbt sich
   das Bild, gefuehrt von der SICHTBARKEIT SEINER SEKTION (Script unten).
   Der Weg laeuft in zwei Haelften, weil ein blau gestochenes Bild nicht in
   ein warmes uebergehen kann, ohne durch Unbunt zu laufen: erst geht das
   Navy ab, dann kommt die Farbe. Uebernommen, nicht neu erfunden.
   ------------------------------------------------------------------------ */
.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--4x3 { aspect-ratio: 4/3; }  .ph--16x9 { aspect-ratio: 16/9; }
.ph__shut {
  position: absolute; inset: 0; z-index: 3; background: var(--wipe-bg);
  transform: translateY(-101%); pointer-events: none;
}
/* Sichtbarkeit haengt NICHT allein an `opacity`: solange nichts eingefaerbt
   ist, steht die Kopie auf `visibility: hidden`. */
.ph img.ph__color {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  filter: none; mix-blend-mode: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.ph--live.is-tinting img.ph__color { visibility: visible; }
.ph--live img:not(.ph__color) { mix-blend-mode: normal; }
.ph--live .ph__duo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--dgfe-navy-500);
  mix-blend-mode: color;
  opacity: clamp(0, calc(1 - 2 * var(--tint, 0)), 1);
}
.ph--live img.ph__color { opacity: clamp(0, calc(2 * var(--tint, 0) - 1), 1); }

/* --- 7) Knoepfe — 1:1 ---------------------------------------------------- */
.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); } }
.btn--primary { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500);
                border-color: var(--dgfe-yellow-500); --sweep: #fff; }
.btn--blue    { background: var(--dgfe-blue-500); color: #fff;
                --sweep: var(--dgfe-navy-500); }
.btn--ghost   { background: transparent; color: var(--dgfe-navy-500);
                border-color: var(--rule-2); --sweep: var(--dgfe-yellow-500); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--dgfe-yellow-500); } }
.btn--onnavy  { background: transparent; color: #fff;
                border-color: var(--rule-n2); --sweep: var(--dgfe-blue-500); }
@media (hover: hover) and (pointer: fine) { .btn--onnavy:hover, .btn--onnavy:focus-visible { border-color: var(--dgfe-blue-500); } }
.btn--sm {
  /* Schmaler als vorher (war 11px 18px). Der Knopf sitzt in der
     Kopfzeile neben vier Navigationspunkten und hat dort zu viel
     Gewicht gezogen. Die 44px Mindesthoehe bleiben: das ist die
     Untergrenze fuer ein Tippziel (WCAG 2.5.8), daran wird nicht
     gespart. Nur die Polsterung links und rechts gibt nach. */
  min-height: 44px; padding: 9px 14px; font-size: var(--fs-2);
}
.acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- 8) Header — zeichengleich --------------------------------------------
   Einzige Abweichung: die Anzeige. Auf der Schwesterseite STEIGT dort die
   Pruefstufe mit dem Scrollen. Hier steht ein fester Wert — diese Seite
   misst nichts, sie zaehlt auf. Genau wie die Partnerseite, die dort ihr
   Typenschild stehen laesst.
   ------------------------------------------------------------------------ */
.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); } }
/* Aktive Seite. Gelb allein traegt die Aussage nicht (1,24:1 gegen den
   Kopfzeilen-Grund); der Navy-Saum bringt 13,98:1, das schwerere Gewicht
   ist der zweite, farbunabhaengige Hinweis. */
.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; }

/* --- 9) Hero -------------------------------------------------------------
   Gleicher Bau wie die Schwesterseite (Titel links, Foto rechts ueber die
   Blattkante). Unter dem Titel steht dort der Pruefweg — hier stehen die
   vier Stufen selbst, in demselben Bauteil. Dieselbe Aufgabe: das System
   der Seite einmal ganz zeigen, bevor es erklaert wird.
   ------------------------------------------------------------------------ */
.hero { margin-top: var(--header-h); }
.hero .sheet__body { padding-block: 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 33%);
              column-gap: clamp(20px, 3vw, 56px); }
.hero__txt { padding-block: clamp(44px, 5.6vw, 92px) clamp(30px, 3.4vw, 52px); align-self: center; }
.hero .h1 { color: #fff; max-width: 100%; }
.hero__lead { margin-top: clamp(18px, 2vw, 30px); color: var(--ink-n-muted); max-width: 44ch; }
.hero__act { margin-top: clamp(26px, 3vw, 42px); }
.hero__meta {
  margin-top: clamp(24px, 2.6vw, 38px); padding-top: var(--inset-line);
  border-top: 1px solid var(--rule-n);
  font-size: var(--fs-2); letter-spacing: .05em; color: var(--ink-n-quiet);
  text-wrap: balance;
}
.hero__media { position: relative; overflow: hidden; margin-right: calc(-1 * var(--bleed)); }
.hero__media .ph { position: absolute; inset: 0; }

/* Die Stufenleiste unter dem Hero — dasselbe Bauteil wie der Pruefweg der
   Schwesterseite, mit dem Inhalt dieser Seite. */
.pstr {
  margin-right: calc(-1 * var(--bleed));
  padding: clamp(22px, 2.6vw, 34px) var(--bleed) clamp(30px, 3.6vw, 50px) 0;
  border-top: 1px solid var(--rule-n);
}
.pstr__hd { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
            font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); }
.pstr__hd em { font-style: normal; color: var(--ink-n-quiet); }
.pstr__row {
  margin-top: clamp(18px, 2vw, 28px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 30px);
}
/* Vier Rastfelder, vier Zeilen: Stempel, Name, Satz, Preis. Die dritte Zeile
   nimmt den Rest (`1fr`), damit die vier PREISE auf einer Linie stehen — sonst
   haengen sie an der Laenge des Satzes darueber, und in einer Staffel, die man
   waagerecht liest, ist genau das die Zeile, die fluchten muss. Nachgemessen
   standen sie vorher 27 px auseinander (zwei Saetze zweizeilig, zwei
   einzeilig). */
.pstr__i { padding-top: var(--inset-line); border-top: 1px solid var(--rule-n2);
           display: grid; grid-template-rows: auto auto 1fr auto;
           gap: clamp(11px, 1.2vw, 15px); justify-items: start; }
.pstr__w { font-size: var(--fs-2); letter-spacing: .16em; color: #fff; }
.pstr__d { font-size: var(--fs-2); line-height: 1.45; color: var(--ink-n-quiet); }
.pstr__p { font-size: var(--fs-2); line-height: 1.45; color: var(--dgfe-yellow-500);
           font-family: var(--ff-dsp); font-variation-settings: "wdth" 84, "wght" 600;
           font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* --- 10) Randschrift — das ambiente Band --------------------------------- */
.rand__plot {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--rul);
  padding-block: var(--inset-line);
  display: grid; gap: 9px;
}
.rand__t { white-space: nowrap; font-size: var(--fs-2); letter-spacing: .32em; color: var(--ink-quiet); }
.rand__ticks { display: block; width: 100%; height: 7px; }
.rand__ticks line { stroke: var(--rule-2); }
.rand__edge { position: absolute; left: 0; top: -1px; width: clamp(48px, 7vw, 108px); height: 2px;
              background: var(--dgfe-yellow-500); }
.wipe {
  position: absolute; inset: 0; z-index: 4; background: var(--wipe-bg);
  transform-origin: right center; transform: scaleX(0); pointer-events: none;
}

/* --- 11) Laufkarte — die drei Schritte -----------------------------------
   Nummeriert, weil es eine echte Reihenfolge ist: hochladen, pruefen,
   erhalten. Der Satz steht so im Produkttext.

   SENKRECHT, nicht waagerecht wie auf der Schwesterseite. Grund ist die
   Komposition dieses Abschnitts: rechts steht das Ausstellungsfeld, und das
   ist mit Marke, Angaben und Ausfertigungsliste 645 px hoch. Als
   waagerechtes Band unter dem Raster liess die Laufkarte neben dem Feld
   275 px Loch stehen — ein Loch NEBEN einem Feld liest sich als Absicht,
   eines unter der eigenen Spalte als Versehen. Senkrecht in derselben Spalte
   fuellt sie genau diese Hoehe. Erfunden ist die Form nicht: der Pruefbogen
   der Schwesterseite ist genau das, ein Register aus nummerierten Positionen
   mit Stempelfeldern.
   ------------------------------------------------------------------------ */
.lauf { border-top: 1px solid var(--rule-2); margin-top: clamp(26px, 3vw, 40px); }
.lauf__s { display: grid; grid-template-columns: 34px minmax(0, 1fr);
           gap: 0 clamp(14px, 1.6vw, 20px); align-items: center;
           padding-block: var(--inset-row); border-bottom: 1px solid var(--rule); }
.lauf__s .sq { grid-column: 1; grid-row: 1; }
.sq {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  position: relative; background: var(--dgfe-navy-500); color: #fff;
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 110, "wght" 700;
  font-weight: 700; font-size: var(--fs-2); line-height: 1; font-variant-numeric: tabular-nums;
}
.sq::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
             background: var(--dgfe-yellow-500); }
.on-navy .sq { background: transparent; color: var(--dgfe-yellow-500);
               box-shadow: inset 0 0 0 1px var(--rule-n2); }
.on-navy .sq::after { background: var(--dgfe-yellow-500); }
.lauf__t { grid-column: 2; grid-row: 1; }
.lauf__d { grid-column: 2; grid-row: 2; margin-top: 9px; font-size: var(--fs-3);
           hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 8 4 4; }

/* --- 12) Das Ausstellungsfeld — die eine gelbe Flaeche -------------------
   Uebernommen von der Schwesterseite und auf das reduziert, was diese Seite
   braucht: die Marke einmal, gross, in einem Navy-Band, das den Innenrand
   der gelben Flaeche wieder herauszieht — ein Streifen, kein Kasten im
   Kasten. Die Marke laeuft NICHT durch den Duotone: ein Siegel ist kein
   Foto, und der Grade machte alle vier zu demselben Grau.
   ------------------------------------------------------------------------ */
.issue { background: var(--dgfe-yellow-500);
         --ink-quiet: color-mix(in srgb, var(--dgfe-navy-500) 78%, transparent);
         --ipad: var(--inset-box);
         padding: var(--ipad); min-width: 0; max-width: 100%; }
.issue__k { display: flex; flex-wrap: wrap; justify-content: space-between;
            gap: 6px 18px; font-size: var(--fs-2); letter-spacing: .17em;
            color: var(--dgfe-navy-500); }
.issue__k em { font-style: normal; color: var(--ink-quiet); }
.mrk__band {
  margin-inline: calc(-1 * var(--ipad));
  margin-top: clamp(16px, 1.9vw, 24px);
  background: var(--dgfe-navy-500);
  padding: var(--inset-row);
  container-type: inline-size;
  min-width: 0;
}
/* Die Marken-SVGs sind 117,09 x 119,16 mm hochkant. Gemessen wird deshalb
   die HOEHE, nicht die Breite — ueber die Breite blieben unter der Marke
   rund 12 px totes Feld stehen. Der Bezug ist die Bandbreite (`cqw`), nicht
   das Fenster: das Verhaeltnis stimmt damit in jeder Spaltenbreite ohne
   einen einzigen Bruchpunkt. */
.mrk { height: min(72cqw, 230px); width: auto; max-width: 100%; margin-inline: auto; }
.issue__t {
  margin-top: clamp(14px, 1.7vw, 20px);
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 110, "wght" 700;
  font-weight: 700; text-transform: uppercase; line-height: 1.02;
  letter-spacing: -.014em;
  font-size: var(--fs-5); color: var(--dgfe-navy-500);
}
.issue__d { margin-top: 12px; font-size: var(--fs-2); line-height: 1.55; color: var(--dgfe-navy-500); }
.issue__d strong { color: var(--dgfe-navy-500); font-weight: 500; }
.issue__life { margin-top: clamp(16px, 1.9vw, 24px); padding-top: var(--inset-line);
               border-top: 1px solid color-mix(in srgb, var(--dgfe-navy-500) 30%, transparent); }
.issue__lk { font-size: var(--fs-2); letter-spacing: .16em; color: var(--dgfe-navy-500); }
.ausf { margin-top: 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 14px; font-size: var(--fs-2); line-height: 1.4; color: var(--dgfe-navy-500); }
.ausf b { font-weight: 500; text-align: right;
          font-family: var(--ff-dsp); font-variation-settings: "wdth" 84, "wght" 600; }

/* --- 13) DIE VERGLEICHSTAFEL ---------------------------------------------
   Das lauteste Bauteil der Seite und zugleich ihre ganze Auskunft. Kein
   neues Alphabet: gefuelltes Quadrat heisst gesetzt, hohles heisst nicht
   enthalten — dieselbe Lesart wie beim Pruefstempel und beim
   Massnahmenquadrat der Schwesterseite. Wo statt eines Ja/Nein ein Wert
   steht, steht der Wert.

   Der Kopf klebt beim Scrollen: eine zwoelfzeilige Vergleichstafel, deren
   Spaltenkoepfe nach der dritten Zeile verschwunden sind, kann man nicht
   mehr waagerecht lesen. `position: sticky` ist dabei nichts Bewegtes — es
   laeuft auch bei prefers-reduced-motion.
   ------------------------------------------------------------------------ */
.vglw { margin-top: clamp(28px, 3.4vw, 48px); }
/* Ohne Spaltenmasse teilt `table-layout: fixed` in fuenf gleiche Teile: die
   Merkmalspalte bekaeme dann 20 % fuer bis zu 60 Zeichen, jede Wertspalte
   20 % fuer ein 13-px-Quadrat. Nachgemessen liefen die Merkmale dreizeilig
   um, waehrend neben jedem Quadrat 230 px leer standen. 32 / 17 / 17 / 17 / 17
   gibt der Beschriftung, was sie braucht, und laesst die vier Wertspalten
   gleich breit — ungleiche Wertspalten waeren in einer Vergleichstafel eine
   Aussage, die niemand gemeint hat. */
.vgl { table-layout: fixed; font-size: var(--fs-3); }
.vgl col.vgl__cm { width: 32%; }
.vgl col.vgl__cv { width: 17%; }
.vgl thead th {
  position: sticky; top: calc(var(--header-h-sm) - 1px); z-index: 2;
  background: var(--paper-2);
  vertical-align: bottom; text-align: left;
  padding: var(--inset-line) clamp(8px, 1vw, 16px) 13px;
  box-shadow: inset 0 -1px 0 var(--rule-2);
}
.vgl thead th:first-child { padding-left: 0; }
.vgl__mk { display: block; font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); }
.vgl__no { display: inline-grid; }
.vgl__t { display: block; margin-top: 11px; font-family: var(--ff-dsp);
          font-variation-settings: "wdth" 108, "wght" 650; font-weight: 600;
          text-transform: uppercase; color: var(--ink-strong);
          font-size: var(--fs-3); line-height: 1.14; }
.vgl__s { display: block; margin-top: 6px; font-size: var(--fs-2); line-height: 1.35;
         -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 5 4;
          color: var(--ink-quiet); }
/* `--inset-line` statt `--inset-row`: eine Vergleichstafel wird SENKRECHT
   abgefahren, und mit 32 px oben und unten stand zwischen zwei Quadraten mehr
   Luft als Zeile. Der Innenabstand bleibt aus der Abstandsskala, nur eine
   Stufe enger. */
.vgl tbody th {
  text-align: left; font-weight: 300; color: var(--ink);
  padding: var(--inset-line) clamp(10px, 1.2vw, 20px) var(--inset-line) 0;
  border-bottom: 1px solid var(--rule); vertical-align: baseline;
  hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 8 4 4;
}
.vgl tbody td {
  padding: var(--inset-line) clamp(8px, 1vw, 16px);
  border-bottom: 1px solid var(--rule); vertical-align: baseline;
  color: var(--ink-strong);
}
.vgl__grp th {
  padding: clamp(24px, 2.6vw, 34px) 0 11px; border-bottom: 1px solid var(--rule-2);
  font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-accent);
  font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600;
  font-weight: 600; text-transform: uppercase;
}
.vgl tbody tr:first-child th { padding-top: var(--inset-row); }
.vgl__v { font-family: var(--ff-dsp); font-variation-settings: "wdth" 84, "wght" 600;
          font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--fs-2);
          letter-spacing: .01em; color: var(--ink-strong); }
.vgl__pv { font-size: var(--fs-4); color: var(--ink-strong); white-space: nowrap; }
.vgl__pn { display: block; margin-top: 6px; font-size: var(--fs-2); line-height: 1.35;
           color: var(--ink-quiet); }
/* Das Alphabet. Gefuellt = enthalten. Der 1-px-Saum in yellow-800 gibt dem
   gelben Quadrat eine Kante, die auch gegen den hellen Grund traegt
   (5,4:1) — Gelb allein erreicht 1,3:1 und waere als Merkmal unzulaessig.
   Hohl = nicht enthalten, mit Navy-Saum. */
.mk { display: block; width: 13px; height: 13px; }
.mk--in { background: var(--dgfe-yellow-500); box-shadow: inset 0 0 0 1px var(--dgfe-yellow-800); }
.mk--no { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); }
.vgl__cta { padding-top: clamp(22px, 2.6vw, 34px); }
.vgl tfoot td { padding: clamp(22px, 2.6vw, 34px) clamp(8px, 1vw, 16px) 0; vertical-align: top; }
.vgl tfoot .btn { width: 100%; }
.vgl__leg { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
            margin-top: clamp(16px, 1.8vw, 22px); font-size: var(--fs-2); color: var(--ink-quiet); }
.vgl__leg span { display: inline-flex; align-items: center; gap: 9px; }

/* --- 14) Die Staffel — Preisorientierung, kein Kauf ---------------------- */
.staffel { border-top: 1px solid var(--rule-2);
           --stf: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 9.5rem) minmax(0, 14rem); }
.staffel__hd {
  display: grid; grid-template-columns: var(--stf);
  gap: clamp(12px, 1.8vw, 30px); padding-block: var(--inset-line);
  border-bottom: 1px solid var(--rule-2);
  font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet);
}
.staffel__r {
  display: grid; grid-template-columns: var(--stf);
  gap: 10px clamp(14px, 2vw, 34px); align-items: baseline;
  padding-block: var(--inset-row); border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-ui) var(--e-shut);
}
.staffel__r .btn { align-self: center; width: 100%; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .staffel__r:hover { background: color-mix(in srgb, var(--dgfe-navy-500) 3%, transparent); } }
.staffel__t { display: block; font-family: var(--ff-dsp);
              font-variation-settings: "wdth" 108, "wght" 650; font-weight: 600;
              text-transform: uppercase; color: var(--ink-strong);
              font-size: var(--fs-3); line-height: 1.14; }
.staffel__s { display: block; margin-top: 7px; font-size: var(--fs-2); line-height: 1.45; }
.staffel__u { font-size: var(--fs-2); line-height: 1.45; }
.staffel__p { text-align: left; }
.staffel__pv .u, .staffel__pv .pfx, .vgl__pv .u, .vgl__pv .pfx { font-size: var(--fs-2); }
.staffel__pv { font-size: var(--fs-5); color: var(--ink-strong); white-space: nowrap; }
.staffel__pv .u { margin-left: .42em; }
/* Die Zahl bekommt eine feste, rechtsbuendige Box. Ohne sie schiebt
   "129,99" die Einheit um 15 px weiter nach rechts als "59,99", und die
   vier gestapelten Staffelzeilen stehen sichtbar versetzt. */
.staffel__pv .z { display: inline-block; min-width: 5.7ch; text-align: right;
  font-variation-settings: normal; font-variant-numeric: tabular-nums; }
.staffel__pn { display: block; margin-top: 7px; font-size: var(--fs-2); line-height: 1.35; color: var(--ink-quiet); }
.stl { display: none; }

/* Der Grund, warum vorher geprueft wird. Gelb als Kante, nicht als Flaeche. */
.warum { border-left: 3px solid var(--dgfe-yellow-500); padding-left: var(--inset-row);
         align-self: start; }
.warum p + p { margin-top: 13px; }

/* --- 15) Formulierungen — zwei Listen, ein Alphabet ----------------------
   Kein Kleingedrucktes: was man mit dem Siegel sagen DARF, ist der Grund,
   es zu fuehren. Die beiden Listen benutzen dieselben zwei Quadrate wie die
   Vergleichstafel — gesetzt und nicht gesetzt.
   ------------------------------------------------------------------------ */
.frm { display: grid; gap: var(--dgfe-space-md); margin-top: clamp(18px, 2vw, 26px); }
.frm li { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 12px;
          font-size: var(--fs-3); line-height: 1.5; align-items: start; }
.frm .mk { margin-top: .42em; }
.frm__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-accent); }
/* Die Sperrliste traegt nicht den Akzentton. Gelb ist auf dieser Seite die
   Farbe des Gesetzten — eine gelbe Beschriftung ueber „nicht zulaessig" sagt
   das Gegenteil des Textes darunter. Navy-300 kommt auf 5,5:1. */
.frm__k--no { color: var(--ink-quiet); }
.frm__n { margin-top: clamp(14px, 1.6vw, 20px); font-size: var(--fs-2); line-height: 1.5;
          color: var(--ink-quiet); }

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

/* --- 17) Bewegung — dieselben Gesten, keine neuen ------------------------ */
.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 .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); }

.motion .wipe { transform: scaleX(1); }
.motion .b-da .wipe { transform: scaleX(0); transition: transform var(--t-draw) var(--e-draw); }

/* Stempel: von oben herab, minimal ueberschwingend */
.motion .sq { opacity: 0; scale: 1.45; }
.motion .b-da .sq {
  opacity: 1; scale: 1;
  transition: opacity var(--t-point) var(--e-point) var(--md, 0ms),
              scale var(--t-point) var(--e-point) var(--md, 0ms);
}
.lauf__s:nth-child(1) .sq { --md: 100ms } .lauf__s:nth-child(2) .sq { --md: 260ms }
.lauf__s:nth-child(3) .sq { --md: 420ms }

/* --- 18) Breakpoints ----------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --page: 900px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { min-height: clamp(220px, 44vw, 340px); margin-top: 4px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .warum { grid-column: 1 / -1; max-width: 66ch; }
  .staffel { --stf: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 8.75rem) minmax(0, 11.5rem); }
  .staffel__r .btn { padding-inline: 14px; }
  /* Die Kopfzeile kippt frueher als das Raster: mit der vierten Vorschau
     braucht die Navigation 920 px, bei 768 stehen 719 zur Verfuegung. */
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column;
         align-items: stretch; gap: 0; background: var(--dgfe-neutral-50);
         border-bottom: 1px solid var(--rule-2); padding: 6px var(--gut) 16px;
         box-shadow: var(--dgfe-shadow-md); }
  /* Author-Styles schlagen das UA-`display:none` von [hidden]. */
  .nav[hidden] { display: none; }
  .nav a { min-height: 48px; border-bottom: 1px solid var(--rule); }
  .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); }
}

@media (max-width: 900px) {
  /* Marke + Anzeige + Navigation passen nicht mehr nebeneinander. Die
     Anzeige ist der einzige Teil, der nichts bedient — sie geht zuerst. */
  .readout { display: none; }
  .pstr__row { grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 30px); }
}

@media (max-width: 767px) {
  :root { --axis: 48px; --header-h: 60px; --header-h-sm: 52px; --bleed: var(--gut); }
  .g { row-gap: 26px; }
  .c1-4,.c1-5,.c1-6,.c1-7,.c1-8,.c6-12,.c7-12,.c8-12,.c9-12 { grid-column: 1 / -1; }
  .h3 { text-wrap: pretty; }

  .axis { padding-right: var(--inset-line); }
  .axis__name { display: none; }
  .axis__stamp { width: 28px; height: 28px; font-size: var(--fs-2); }
  .axis__unit { display: none; }
  .axis__tick { top: calc(var(--apad, var(--secY)) + 13px); }

  .hero__media { margin-right: calc(-1 * var(--gut)); }
  .pstr { margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); }
  .pstr__row { gap: clamp(18px, 4.6vw, 28px); }

  /* Bei 360 px bleiben neben dem 34-px-Stempelfeld 202 px, und
     „MASSNAHMEN HOCHLADEN" misst in Archivo wdth 108 genau 200 px — eine
     Zeile, die exakt aufgeht, geht bei der naechsten Schriftmetrik nicht mehr
     auf. Das Stempelfeld steht deshalb ueber der Ueberschrift, und die
     bekommt die volle Zeilenbreite zurueck. Dieselbe Loesung wie beim
     Pruefbogen der Schwesterseite. */
  .lauf__s { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lauf__s .sq, .lauf__t, .lauf__d { grid-column: 1; }
  .lauf__t { grid-row: 2; margin-top: 13px; }
  .lauf__d { grid-row: 3; }

  /* --- Die Vergleichstafel bei 390 px -----------------------------------
     Fuenf Spalten auf 286 px verfuegbarer Breite gaeben der Merkmalspalte
     102 px — das ist keine Spalte mehr. Jede Zeile wird deshalb zu einem
     kleinen Datensatz: das Merkmal ueber die ganze Zeilenbreite, die vier
     Werte darunter in vier gleichen Feldern. Die Reihenfolge der Spalten
     bleibt ueber die ganze Tafel dieselbe, der Kopf klebt weiter oben —
     eine Legende je Zeile waere zwoelfmal dieselbe Auskunft. --------------- */
  .vgl { display: block; }
  .vgl thead, .vgl tbody, .vgl tfoot, .vgl tr, .vgl th, .vgl td { display: block; }
  .vgl thead { position: sticky; top: calc(var(--header-h-sm) - 1px); z-index: 2;
               background: var(--paper-2); }
  .vgl thead tr, .vgl tbody tr:not(.vgl__grp), .vgl tfoot tr {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(6px, 1.6vw, 10px);
  }
  .vgl thead th { position: static; padding: 12px 0 10px; box-shadow: none; }
  .vgl thead th:first-child { display: none; }
  .vgl thead tr { border-bottom: 1px solid var(--rule-2); }
  /* Die Spaltenkoepfe stehen bei 390 px in 67 px breiten Feldern. In Archivo
     wdth 108 brauchte „ENTERPRISE" dort 89 px und brach als „ENTER-/PRISE",
     „STARTER" als „STARTE/R" — eine Zeile, die nur aus einem Buchstaben
     besteht, ist kein Umbruch, sondern ein Fehler. Der schmale Schnitt
     (wdth 74) ist derselbe, den die Seite fuer alle Register benutzt; bei
     11 px misst „ENTERPRISE" damit 57 px und passt einzeilig. */
  .vgl__t { margin-top: 8px; font-size: var(--fs-2);
            font-variation-settings: "wdth" 70, "wght" 700; letter-spacing: .03em; }
  /* Nachgemessen bei 360 px: die Spalte ist 59,5 px breit, „MITARBEITENDE"
     brauchte in wdth 70 mit 0,1em Laufweite 66 px und lief 6,5 px in den
     Spaltenabstand hinein — `.cond` steht auf `hyphens: manual`, das Wort
     kann also gar nicht brechen. Enger gesetzt misst es 51 px. Der
     Notausgang steht daneben, falls eine Schriftmetrik anders rechnet. */
  .vgl__s { font-size: var(--fs-2); letter-spacing: .02em;
            font-variation-settings: "wdth" 62, "wght" 600;
            overflow-wrap: break-word; }
  .vgl thead .sq { width: 24px; height: 24px; font-size: var(--fs-2); }
  .vgl tbody th { grid-column: 1 / -1; padding: 18px 0 12px; border-bottom: 0; font-size: var(--fs-3); }
  .vgl tbody td { padding: 0 0 18px; border-bottom: 0; }
  .vgl tbody tr:not(.vgl__grp) { border-bottom: 1px solid var(--rule); }
  .vgl__grp th { padding: 26px 0 10px; }
  /* Der Preis stand einzeilig mit `nowrap` in einem 67 px breiten Feld und
     brauchte 88 — nachgemessen ragte er bei 360 px 13 px und bei 390 px 5 px
     ueber die Fensterkante hinaus, ohne dass `documentElement.scrollWidth`
     das gemeldet haette (Playbook 4.2). Vorsatzwort, Zahl und Einheit stehen
     mobil deshalb untereinander: drei kurze Zeilen statt einer zu langen,
     und die Zahl bleibt die groesste davon.
     Die Fussnote faellt weg — sie steht schon im Abschnittstext und noch
     einmal in der Staffel darunter; viermal dieselbe Zeile in einer
     67-px-Spalte ist keine Auskunft, sondern eine Wand. */
  .vgl__pv { white-space: normal; font-size: var(--fs-3); }
  .vgl__pv .pfx, .vgl__pv .u { display: block; margin: 0; letter-spacing: .04em; }
  .vgl__pv .u { font-size: var(--fs-2); }
  .vgl__pn { display: none; }
  .vgl tfoot td { padding: 20px 0 0; }
  .vgl tfoot .btn { padding-inline: 6px; font-size: var(--fs-2); letter-spacing: .06em; }

  /* --- Die Staffel bei 390 px -------------------------------------------
     Der Preis steht auf derselben Zeile wie der Name und rechtsbuendig:
     alle vier Preise bilden dadurch eine senkrechte Spalte, die man mit
     einem Blick abfaehrt. ------------------------------------------------- */
  .staffel__hd { display: none; }
  .staffel { --stf: minmax(0, 1fr) fit-content(38%); }
  .staffel__r { gap: 0 clamp(12px, 3.2vw, 16px); align-items: baseline;
                padding-block: clamp(20px, 5vw, 26px); }
  .staffel__r > div { display: contents; }
  .staffel__t { grid-column: 1; grid-row: 1; }
  .staffel__s { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .staffel__p { grid-column: 2; grid-row: 1; margin-top: 0; text-align: right; }
  .staffel__u { grid-column: 1 / -1; margin-top: 14px; }
  .staffel__r .btn { grid-column: 1 / -1; margin-top: 16px; align-self: stretch; }
  .staffel__t { font-size: var(--fs-2); }
  .staffel__pv { font-size: var(--fs-4); }
  .staffel__p .stl { display: none; }
  .stl { display: block; 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: .14em;
         color: var(--ink-quiet); margin-bottom: 6px; }

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

@media (max-width: 560px) {
  /* Zwei linksbuendige Knoepfe verschiedener Breite lassen zwei fast
     fluchtende Kanten stehen. Auf voller Breite ist die Kante eindeutig. */
  .hero__act, .closer__act { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero__act .btn, .closer__act .btn {
    width: 100%; display: block; text-align: center; line-height: 1.35;
    padding-block: 15px; padding-inline: 12px;
  }
  .hero__act .btn .btn__a, .closer__act .btn .btn__a { display: inline-block; margin-left: 8px; }
}

/* --- 19) Reduced Motion: alles sichtbar, ohne einen einzigen Scroll ------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion .r, .motion .rq, .motion .grp > *, .motion .sq {
    opacity: 1 !important; translate: none !important; scale: none !important;
  }
  .motion .lm i { translate: none !important; }
  .motion .ph__shut { transform: translateY(-101%) !important; }
  .motion .ph img { scale: 1 !important; }
  .motion .wipe { transform: scaleX(0) !important; }
  /* Keine Einfaerbung. Die Bilder stehen in ihrem RUHEZUSTAND, und der ist
     der Duotone — nicht die Farbe. Es geht dabei nichts verloren: keine
     Aussage der Seite haengt an einer Farbe im Bild. */
  .ph img.ph__color { display: none; }
  *, *::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; }

/* Die Wortmarke wird nicht grossgeschaltet.
   .cond, .eyebrow und .dsp setzen Versalien; darin wuerde aus DGfE
   ein DGFE, und das kleine f gehoert zum "fuer". Ein Markenname
   traegt seine Schreibweise auch in einer Versalzeile. */
.wm { text-transform: none; }