/* ==========================================================================
   Startseite V6: Werkstattbank auf schwarzer Bühne.
   Hero als Versal-Treppe mit Messgerät in der Lücke, Protokoll aus dem Gerät, Monogramm-Moment mit Übergabe
   an die Maßkette, 190 als Zählwerk, Leistungsverzeichnis auf Papier, Kampagne klein, Ansprechpartner, FAQ.
   Alle Selektoren tragen das Präfix st- (die Datei wird für alle Seiten gebündelt).
   Bewegung nur transform und opacity (Ausnahme stroke-dashoffset beim Vermessen), Ursache und Wirkung,
   ohne .bewegt (reduzierte Bewegung, ohne JS) steht alles im Endzustand.
   ========================================================================== */

/* ---------- Hero: Versal-Treppe ---------- */
.st-hero {
  --geraet-b: clamp(500px, 39vw, 568px);
  --F: min(7.5rem, (100vw - 2 * var(--rand)) / 9.3);
  --inhalt: calc(min(100vw, var(--breite)) - 2 * var(--rand));
  /* Testreserve und unteres Polster überlappen statt sich zu addieren: in Ruhe steht max(Abschnitt eng, Reserve + Puffer)
     unter dem Gerät, beim Test wächst das Gerät genau in diesen Raum (Gesamthöhe gleich, nichts darunter springt) */
  --puffer: var(--abstand-5);
  --pb-ruhe: max(var(--abschnitt-eng), var(--st-zusatz, 0px) + var(--puffer));
  position: relative; padding: clamp(20px, 3.6vh, 44px) 0 calc(var(--pb-ruhe) - var(--st-zusatz, 0px) - var(--puffer));
}
.st-hero:has(.st-geraet[data-zustand="beispiel"]) { padding-bottom: var(--pb-ruhe); }
/* Anschluss an die Monogramm-Bühne (mit JS, solange das Protokoll zu ist): Die Bühne beginnt schon im unteren Polster,
   ihr oberer Leerraum (--st-mono-t bis zum Titel) überlappt die Testreserve. Sichtbar bleibt zwischen Werkbankkante bzw.
   Geräteunterkante und Monogramm-Titel genau --luft (ein Kapitelwechsel, --abschnitt-weit). Die Luft hängt nicht an der
   gemessenen Reserve: beim Teststart (Klick) rückt die Bühne um den Zuwachs des Geräts nach (siehe unten), beim Laden
   verschiebt sich nichts. Der Hero liegt dabei über der Bühne (Klicks). */
.js .st-hero:has(~ .st-protokoll[hidden]) {
  --luft: var(--luft-ziel);
  z-index: 1; margin-bottom: calc(var(--werkbank) + var(--luft) - var(--pb-ruhe) - var(--st-mono-t));
}
.st-hero { --werkbank: 0px; --luft-ziel: var(--abschnitt-weit); }
/* Mit der letzten Antwort (Klick) rückt die Bühne eine Bildschirmhöhe unter die Reserve: Das Protokoll, das danach
   aus dem Schlitz läuft, verschiebt dann nur Inhalt außerhalb des Bildes (CLS 0) */
.js .st-hero:has(.st-frage__schritte i.an:last-child):has(.st-geraet .option[aria-pressed="true"]) { margin-bottom: 100svh; }
/* Handy: 96 px Luft; beim Teststart (Klick, Seite springt ohnehin zum Gerät) rückt die Bühne um den Rest nach,
   den die Reserve über die Luft hinaus braucht. Während des Tests bleibt alles stehen (Reserve im Gerät). */
@media (max-width: 759px) {
  .js .st-hero:has(~ .st-protokoll[hidden]):not(:has(.st-geraet[data-zustand="beispiel"])) {
    margin-bottom: calc(var(--luft) - var(--pb-ruhe) - var(--st-mono-t) + max(0px, var(--st-zusatz, 0px) + var(--abstand-6) - var(--luft)));
  }
}
/* Ab Tablet: Beim Teststart (Klick, die Seite scrollt zum Gerät) rückt die Bühne um den Zuwachs des Geräts nach unten.
   So bleibt unter dem wachsenden Gerät dieselbe Luft wie in Ruhe, statt dass der Monogramm-Titel 16 px darunter klebt.
   Die Bühne liegt beim Klick unter dem Bild, nichts Sichtbares springt. */
@media (min-width: 760px) {
  .js .st-hero:has(~ .st-protokoll[hidden]):not(:has(.st-geraet[data-zustand="beispiel"])) {
    margin-bottom: calc(var(--werkbank) + var(--luft) - var(--pb-ruhe) - var(--st-mono-t) + var(--st-zusatz, 0px));
  }
}
@media (max-width: 759px) { .st-hero { padding-top: clamp(24px, 4svh, 40px); } }
.st-treppe {
  display: grid; font-size: var(--F); line-height: 0.88; letter-spacing: -0.022em;
  text-wrap: nowrap; max-width: none;
}
@media (max-width: 759px) { .st-treppe { line-height: 0.96; } }
/* Ab Tablet: 0,86em Zeilenhöhe, zwischen den Versalien stehen rund 0,16em Luft */
@media (min-width: 760px) { .st-treppe { line-height: 0.86; } }
.st-treppe__z { display: block; white-space: nowrap; }
.st-treppe__z > span { display: inline-block; }
.st-treppe__z--2 { justify-self: end; }
.st-gebucht { position: relative; color: var(--blau); }
/* Maßlinie unter „Gebucht.“: misst nach dem Einschalten die Wortbreite. Strich 0,22em unter der Zeile (rund 24 px unter dem Schriftbild) */
.st-gebucht__mass {
  color: var(--grau-2);
  position: absolute; left: 0.03em; right: 0.02em; top: calc(100% + 0.16em); height: 0.12em; min-height: 9px;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 100% no-repeat;
  transform-origin: 50% 50%;
}
.bewegt .st-gebucht__mass { transition: transform var(--d-lang) var(--kurve); }
.bewegt .st-gebucht:not(.ist-gemessen) .st-gebucht__mass { transform: scaleX(0); }

/* Unterbau: Lead, Knöpfe, Notizgruppe (Hinweis und Preis), Gerät. Erste Zeile 40 px unter der Maßlinie von „Gebucht.“ */
.st-hero__unten {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sub" "aktion" "raum";
  margin-top: calc(var(--F) * 0.2 + var(--abstand-7));
}
.st-hero__sub { grid-area: sub; max-width: 36ch; font-size: var(--t-lead); line-height: 1.5; color: var(--grau); }
.st-hero__aktion { grid-area: aktion; margin-top: var(--abstand-6); gap: 0 28px; }
.st-hero__preis { color: var(--grau); font-size: 1rem; }
.st-hero__preis .preis { color: var(--weiss); font-weight: 600; }
.st-hero__fakt { max-width: 44ch; font-size: 1rem; color: var(--grau-2); }
/* Handy: genau ein Papierknopf im ersten Bildschirm, springt zum Gerät und startet; Pfeil-Link darunter, dann Hinweis und Preis */
@media (max-width: 759px) {
  .st-hero__aktion { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: var(--abstand-5); }
  .st-hero__start { margin-bottom: 6px; }
  /* Metazeilen 24 px unter der Unterstreichung des Pfeil-Links (dessen Tippfläche ist 44 px hoch) */
  .st-hero__fakt { margin-top: 0; }
  .st-hero__preis { margin-top: var(--abstand-1); }
}
/* Tablet und Desktop: Papierknopf und Pfeil-Link nebeneinander, darunter 16 px Hinweis, 8 px Preis */
@media (min-width: 760px) {
  .st-hero__fakt { flex-basis: 100%; max-width: none; margin-top: var(--abstand-4); }
  .st-hero__preis { flex-basis: 100%; margin-top: var(--abstand-2); }
}
.st-raum {
  grid-area: raum; position: relative; margin-top: var(--s4);
  min-height: calc(var(--st-reserve, 0px) + var(--puffer)); perspective: 1600px; perspective-origin: 30% 10%;
}
/* Im Ruhezustand steht das Gerät in seiner eigenen Höhe, die Testreserve liegt im unteren Polster des Heros */
.st-hero:has(.st-geraet[data-zustand="beispiel"]) .st-raum { min-height: 0; }

@media (min-width: 760px) {
  .st-raum { margin-top: var(--s5); }
}
/* Großformat: zwei Bänder. Oben die Treppe als geschlossener Block links, darunter links Text, rechts das Gerät.
   „Angefragt.“ rückt 1,3em ein und steht unter „Gefunden.“ (K7). Das Gerät behält seine Breite und Lage aus K6:
   rechts am Satzspiegel, Oberkante auf dem Strich der Maßlinie unter „Gebucht.“ */
@media (min-width: 1200px) {
  .st-hero {
    /* 9,2svh: bei 1366×768 steht das Gerät samt Werkbankkante noch im ersten Bildschirm */
    /* 15,4: „Gebucht.“ und seine Maßlinie enden gut 48 px vor der Linkskante des Geräts */
    --F: min(7.5rem, var(--inhalt) / 15.4, 9.2svh);
    --geraet-b: calc(min(7.5rem, var(--inhalt) / 16.41, 9.2svh) * 8.49);
    /* Reicht „Gebucht.“ (6,72em) bis auf 52 px an die Linkskante des Geräts, rückt das Gerät so weit unter die Maßlinie,
       dass zwischen Schriftunterkante und Geräteoberkante 52 px stehen (ohne Versatz 0,3em). Das Lead-Feld wächst um
       denselben Betrag: Maßlinie → Lead und Lead → Knöpfe bleiben gleich, der Preis endet weiter auf der Gerätenotiz. */
    --luft-geraet: clamp(0px, (var(--F) * 6.72 + 52px - (var(--inhalt) - var(--geraet-b))) * 100, 52px - var(--F) * 0.3);
    padding-top: var(--abstand-8);
    --werkbank: 40px;
  }
  /* Links ein Block im Bezug zum Gerät: Der Unterbau beginnt auf der Maßlinie (Oberkante Gerät). Der Lead steht mittig
     in einem festen Feld, sodass Maßlinie → Lead und Lead → Knöpfe gleich groß sind; die letzte Zeile (Preis) endet auf der
     Zeile der Gerätenotiz „Malerbetrieb im Landkreis Miesbach.“ (Gerät in Ruhe 450 px hoch, Notiz 39 px über der Unterkante,
     Knopfgruppe 123 px). Das Feld hängt nicht an der Gerätehöhe: beim Test wächst nur die letzte Zeile, links rückt nichts. */
  .st-treppe__z--2 { justify-self: start; margin-left: 1.3em; }
  .st-hero__unten {
    position: relative; margin-top: calc(var(--F) * 0.22);
    grid-template-columns: minmax(0, 1fr) var(--geraet-b); column-gap: var(--abstand-8);
    grid-template-rows: minmax(calc(288px + var(--luft-geraet)), auto) auto 1fr; grid-template-areas: "sub raum" "aktion raum" ". raum";
  }
  .st-hero__sub { align-self: center; font-size: 1.625rem; line-height: 1.45; text-wrap: pretty; }
  .st-hero__aktion { margin-top: 0; }
  .st-raum { margin-top: var(--luft-geraet); }
  /* Neigung um die rechte Oberkante; die Perspektive schiebt die Kanten um rund 0,5 % nach rechts, das gleicht translate aus */
  .st-geraet { transform-origin: 100% 0; }
  .st-geraet[data-zustand="beispiel"] { translate: calc(var(--geraet-b) * -0.005) 0; }
  /* Werkbankkante: Haarlinie unter Text und Gerät, 20 px unter dem Gerät (der Schatten liegt darüber frei) */
  .st-hero:has(.st-geraet[data-zustand="beispiel"]) .st-hero__unten::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--werkbank) * -1); height: 1px; background: var(--linie);
  }
}

/* ---------- Messgerät: Gehäuse (B), Zifferblatt mit Lünette, Glas und Nadel (A) ---------- */
.st-geraet {
  --kx: 0deg; --ky: 0deg;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "anzeige" "buehne" "kanaele";
  max-width: 560px; margin-inline: auto; padding: 26px 22px 22px;
  scroll-margin-top: calc(var(--kopf-h) + 16px);
  transform: rotateX(calc(var(--kx) + var(--my, 0deg))) rotateY(calc(var(--ky) + var(--mx, 0deg)));
  transition: transform var(--d-lang) var(--kurve);
}
@media (min-width: 900px) {
  .st-geraet {
    --kx: 1.5deg; --ky: -3.5deg;
    max-width: none; padding: 28px 30px 26px;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: 30px;
    grid-template-areas: "kopf kopf" "anzeige kanaele" "buehne buehne";
  }
}
/* Tablet: eine Spalte, Gerät linksbündig an der Textkante; ab 900 px in seiner breiten Form */
@media (min-width: 760px) and (max-width: 1199px) { .st-geraet { margin-inline: 0; } }
@media (min-width: 900px) and (max-width: 1199px) { .st-geraet { max-width: 760px; } }
@media (min-width: 900px) {
  .st-geraet[data-zustand="frage"] {
    grid-template-columns: minmax(0, 236px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 28px;
    grid-template-areas: "kopf kopf" "blatt zaehler" "blatt kanaele" "blatt ." "buehne buehne";
  }
  .st-geraet[data-zustand="frage"] .st-geraet__anzeige { display: contents; }
  .st-geraet[data-zustand="frage"] .st-blatt { grid-area: blatt; align-self: start; margin-top: 18px; }
  .st-geraet[data-zustand="frage"] .st-zaehler { grid-area: zaehler; justify-content: flex-start; margin-top: 22px; }
  .st-geraet[data-zustand="frage"] .st-kanaele { grid-area: kanaele; margin-top: 12px; }
  .st-geraet[data-zustand="frage"] .st-kanal { flex-direction: column; align-items: flex-start; row-gap: 4px; }
  .st-geraet[data-zustand="frage"] .st-kanal .st-meter { margin-top: 4px; }
  .st-geraet[data-zustand="frage"] .st-geraet__buehne { margin-top: 14px; }
  .st-geraet[data-zustand="frage"] .st-frage__hilfe { font-size: 1rem; }
  .st-geraet[data-zustand="frage"] .option { padding-block: 10px; min-height: 48px; }
}
/* Während einer Frage steht nur der gerade gemessene Kanal da: das Gerät bleibt kompakt */
.st-geraet[data-zustand="frage"] .st-kanal:not(.ist-aktiv) { display: none; }
@media (max-width: 899px) { .st-geraet[data-zustand="frage"] .st-zaehler { display: none; } }
/* Während des Tests steht das Gerät frontal: keine schräge Schrift, sichere Klickflächen */
.st-geraet[data-zustand="frage"], .st-geraet[data-zustand="ergebnis"] { transform: none; }
.st-geraet--mess { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; transform: none; transition: none; }
.st-geraet__kopf { grid-area: kopf; }
.st-geraet .gravur { color: #9C9B96; } /* 5,3:1 auf dem hellsten Gehäuseton */
.st-geraet__anzeige { grid-area: anzeige; margin-top: 18px; }
.st-geraet__buehne { grid-area: buehne; margin-top: 18px; }
/* Während des Tests hat die Bühne die Höhe der längsten Frage (selbsttest.js misst sie): nichts darunter rückt nach */
.st-geraet[data-zustand="frage"] .st-geraet__buehne { min-height: var(--st-buehne-min, 0px); }
.st-kanaele { grid-area: kanaele; }

/* Zifferblatt: Metallrahmen (Lünette), dunkles Blatt, Glasreflex */
.st-blatt {
  padding: 5px; border-radius: 16px;
  background: conic-gradient(from 205deg at 50% 60%, #5E5F63, #C9CACD 10%, #6F7074 22%, #ADAEB1 36%, #4F5054 50%, #A2A3A6 63%, #4A4B4F 76%, #BDBEC1 89%, #5E5F63);
  box-shadow: 0 0 0 1.5px #0A0A0B, 3px 6px 10px rgb(0 0 0 / 0.55), inset 1px 1px 1px rgb(255 255 255 / 0.45), inset -1px -1px 2px rgb(0 0 0 / 0.6);
}
.st-blatt__fenster {
  position: relative; overflow: hidden; border-radius: 11px; padding: 10px 12px 0;
  background: radial-gradient(120% 90% at 32% 12%, #1E1E22, #111113 55%, #0B0B0D);
  box-shadow: inset 2px 3px 8px rgb(0 0 0 / 0.85);
}
.st-blatt__glas {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0.035) 30%, transparent 30.5%),
    linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 20%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  transform: translateX(var(--gx, 0px)); transition: transform var(--d-lang) var(--kurve);
}
.st-skala { --pos: 0.4; display: block; width: 100%; height: auto; overflow: visible; }
.bewegt .st-skala { --pos: 0; }
.st-skala .skala__blatt { fill: none; }
.st-skala .skala__zone { fill: none; stroke: #2B2B30; stroke-width: 3; }
.st-skala .skala__zone--mitte { stroke: #46464C; }
.st-skala .skala__zone--hoch { stroke: #6E6E73; }
.st-skala .skala__strich { stroke: #55555B; stroke-width: 1.25; }
.st-skala .skala__strich--gross { stroke: #B4B3AD; stroke-width: 2; }
.st-skala .skala__zahl { font-family: var(--sans); font-weight: 500; font-size: 21px; fill: #8E8D88; text-anchor: middle; font-variant-numeric: tabular-nums lining-nums; transition: fill var(--d-mittel) ease; }
.st-skala .skala__zahl--ende { dominant-baseline: central; }
.st-skala .skala__zahl.ist-an { fill: var(--weiss); }
@media (min-width: 900px) { .st-skala .skala__zahl { font-size: 32px; } }
/* Nadel endet vor den Teilstrichen, die Ziffern liegen außerhalb ihres Radius: nichts wird verdeckt */
.st-skala .skala__drehung {
  transform-box: view-box; transform-origin: 170px 168px;
  transform: rotate(calc(var(--pos) * 180deg - 90deg));
  transition: transform 1250ms var(--feder);
}
/* Selbstprüfung beim Einschalten: Nadel und Zählwerk schlagen schnell an (ease-out), der Rückfall federt */
.st-geraet.ist-anschlag .skala__drehung { transition: transform 640ms cubic-bezier(0.23, 1, 0.32, 1); }
.st-geraet.ist-anschlag .st-zaehler__band { transition-duration: 640ms; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.st-skala .skala__schatten { transform: translate(2.5px, 4.5px); opacity: 0.55; filter: blur(1.5px); }
.st-skala .skala__schatten path { fill: #000; }
.st-skala .skala__nadel { fill: var(--blau); }
.st-skala .skala__nabe { fill: #1F1F23; stroke: #3B3B41; stroke-width: 1; }
.st-skala .skala__deckel { fill: #B9B8B2; }

/* Zählwerk unter dem Zifferblatt */
.st-zaehler { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 14px; }
.st-zaehler__fenster {
  display: inline-block; height: 1em; min-width: 1.45em; overflow: hidden; text-align: right;
  font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(2.25rem, 2rem + 0.8vw, 2.75rem); line-height: 1;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; color: var(--weiss);
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}
.st-zaehler__band { --summe: 4; display: flex; flex-direction: column; transform: translateY(calc(var(--summe) * -1em)); }
.bewegt .st-zaehler__band { --summe: 0; transition: transform 1000ms var(--feder); }
.st-zaehler__band > span { display: block; height: 1em; }
/* Fenster schneidet ab, daher keine Grundlinie: die Einheit sitzt per Abstand auf der Ziffern-Grundlinie */
.st-zaehler__von { color: var(--grau); font-size: 1rem; line-height: 1; white-space: nowrap; padding-bottom: calc(clamp(2.25rem, 2rem + 0.8vw, 2.75rem) * 0.13); }

/* Bedienteil */
.st-modus { display: grid; gap: 14px; }
.bewegt .st-modus { animation: st-auf var(--d-mittel) var(--kurve) both; }
@keyframes st-auf { from { opacity: 0; transform: translateY(6px); } }
.st-geraet__notiz { color: var(--grau); font-size: 1rem; text-wrap: balance; }
@media (min-width: 900px) {
  .st-modus[data-modus="beispiel"] { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  .st-modus[data-modus="beispiel"] .st-taste { width: auto; padding-inline: 24px; }
  .st-geraet__buehne { margin-top: 22px; padding-top: 20px; border-top: 1px solid #0A0A0B; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05); }
}
.st-taste { text-decoration: none; }
.st-frage__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--grau); font-size: 1rem; }
.st-frage__schritte { display: inline-flex; gap: 4px; margin-left: 12px; vertical-align: middle; }
.st-frage__schritte i { width: 16px; height: 3px; background: #2C2C31; }
.st-frage__schritte i.an { background: var(--weiss); }
.st-frage__zurueck {
  min-height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--grau); font: 600 1rem var(--sans); text-decoration: underline; text-underline-offset: 0.24em; text-decoration-thickness: 1px;
}
.st-frage__zurueck[disabled] { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .st-frage__zurueck:hover { color: var(--weiss); } }
.st-frage__text { font-family: var(--titel); font-stretch: 104%; font-weight: 650; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--weiss); text-wrap: balance; }
.st-frage__text:focus { outline: none; }
.st-frage__hilfe { margin-top: -4px; color: var(--grau); font-size: 1rem; line-height: 1.5; }
/* Antworten als Stahltasten in einer Nut (Bedienteil des Geräts, kein Radiolisten-Formular).
   Jede Taste hat ein Kontroll-Lämpchen links und ihren Stufenwert als Gravur rechts.
   Drücken: die Taste sinkt 3 px in die Nut (top und Schatten, kein transform, 3D-Eltern).
   Eingerastet: das Lämpchen steht in Stahlblau, denn jetzt ist der Kanal gemessen. Kein Schein. */
.st-optionen {
  list-style: none; margin: 0; padding: 8px; display: grid; gap: 8px; border-radius: 12px; background: var(--nut);
  box-shadow: inset 2px 3px 7px rgb(0 0 0 / 0.75), 0 1px 0 rgb(255 255 255 / 0.05);
}
.st-geraet .option {
  position: relative; top: 0;
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 12px 16px 12px 14px; text-align: left;
  border: 0; border-radius: 8px; color: var(--weiss); font: 500 1rem/1.4 var(--sans); cursor: pointer;
  background: linear-gradient(180deg, #2C2C31, #1C1C20);
  /* Flanke der Taste (3 px), Schlagschatten, Lichtkante oben */
  box-shadow: 0 3px 0 #050506, 1px 4px 6px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.11);
  transition: top 110ms var(--kurve), box-shadow 110ms var(--kurve);
}
.st-geraet .option__text { flex: 1 1 auto; min-width: 0; }
/* Kontroll-Lämpchen: Fassung mit dunklem Glas, wird bei Hover grau, beim Einrasten Stahlblau */
.st-geraet .option__mark {
  flex: none; position: relative; width: 10px; height: 10px; margin: 0; border: 0; border-radius: 50%; background: #0A0A0B;
  box-shadow: 0 0 0 2px #121215, 0 0 0 3px rgb(255 255 255 / 0.07), inset 1px 1px 2px rgb(0 0 0 / 0.9);
  transition: background-color var(--d-kurz) var(--kurve);
}
.st-geraet .option__mark::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 3px; height: 3px; border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
}
/* Stufenwert als leise Gravur: so viele Punkte gibt die Taste auf das Zählwerk */
.st-geraet .option__wert {
  flex: none; min-width: 1.4em; text-align: right; font: 600 1rem/1 var(--sans); font-variant-numeric: tabular-nums lining-nums;
  color: #A3A29D; text-shadow: 0 -1px 0 rgb(0 0 0 / 0.8), 0 1px 0 rgb(255 255 255 / 0.06);
}
.st-geraet .option:active, .st-geraet .option[aria-pressed="true"] {
  top: 3px; background: linear-gradient(180deg, #1E1E22, #18181B);
  box-shadow: 0 0 0 #050506, 0 1px 1px rgb(0 0 0 / 0.4), inset 0 2px 5px rgb(0 0 0 / 0.65), inset 0 0 0 1px rgb(255 255 255 / 0.03);
  transition-duration: 60ms;
}
.st-geraet .option[aria-pressed="true"] .option__mark { background: var(--blau); }
.st-geraet .option[aria-pressed="true"] .option__mark::after { background: rgb(255 255 255 / 0.45); }
.st-geraet .option[aria-pressed="true"] .option__wert { color: var(--grau); }
.st-geraet .option:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .st-geraet .option:not([aria-pressed="true"]):hover { background: linear-gradient(180deg, #333338, #212126); }
  .st-geraet .option:not([aria-pressed="true"]):hover .option__mark { background: #3E3E44; }
}
.st-ergebnis__text { color: var(--weiss); font-weight: 600; font-size: 1.0625rem; line-height: 1.45; }
.st-ergebnis__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.st-ergebnis__knoepfe .st-taste { width: auto; padding-inline: 24px; }

/* Kanäle: Balken in Kreide; der gerade gemessene Kanal hebt sich weiß ab (Blau bleibt bei Nadel und „Gebucht.“) */
.st-kanaele { list-style: none; margin: 22px 0 0; padding: 18px 0 0; display: grid; gap: 12px; border-top: 1px solid #0A0A0B; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05); }
@media (min-width: 900px) { .st-kanaele { margin-top: 18px; padding-top: 0; border-top: 0; box-shadow: none; align-self: start; gap: 13px; } }
/* Name und Wert teilen sich die Zeile; passt beides nicht, rückt der Wert darunter (nie aneinanderstoßen) */
.st-kanal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; row-gap: 7px; column-gap: 12px; }
.st-kanal__name { color: var(--weiss); font-size: 1rem; }
@media (min-width: 900px) { .st-kanal__name { font-size: 1rem; white-space: nowrap; } }
.st-kanal__wert { color: var(--grau); font-size: 1rem; transition: color var(--d-mittel) var(--kurve); }
.st-kanal.ist-aktiv .st-kanal__wert { color: var(--weiss); }
.st-meter { flex: none; width: 100%; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; height: 6px; }
.st-seg { position: relative; overflow: hidden; border-radius: 1px; background: #232327; box-shadow: inset 1px 1px 1px rgb(0 0 0 / 0.6); }
.st-seg::after {
  content: ""; position: absolute; inset: 0; background: #D6D5CF; transform: scaleX(0); transform-origin: left center;
  transition: transform 380ms var(--kurve), background-color var(--d-mittel) var(--kurve);
  transition-delay: calc(var(--k, 0) * 110ms + var(--i, 0) * 28ms);
}
.st-seg.an::after { transform: none; }
.st-kanal.ist-aktiv .st-seg::after { background: var(--weiss); }
.js .st-geraet:not(.ist-live) .st-seg.an::after { transform: scaleX(0); }
.st-seg:nth-child(2) { --i: 1; } .st-seg:nth-child(3) { --i: 2; } .st-seg:nth-child(4) { --i: 3; } .st-seg:nth-child(5) { --i: 4; }
.st-seg:nth-child(6) { --i: 5; } .st-seg:nth-child(7) { --i: 6; } .st-seg:nth-child(8) { --i: 7; } .st-seg:nth-child(9) { --i: 8; } .st-seg:nth-child(10) { --i: 9; }
/* Beim Einschalten füllen sich die Kanäle nacheinander von oben nach unten */
.st-geraet.ist-einschalten .st-kanal:nth-child(2) { --k: 1; } .st-geraet.ist-einschalten .st-kanal:nth-child(3) { --k: 2; }
.st-geraet.ist-einschalten .st-kanal:nth-child(4) { --k: 3; } .st-geraet.ist-einschalten .st-kanal:nth-child(5) { --k: 4; }
/* Ohne JS: Balken als Standbild */
html:not(.js) .st-meter { display: block; position: relative; background: #232327; }
html:not(.js) .st-meter::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10%; background: #D6D5CF; }
html:not(.js) .st-meter[data-stufe="1"]::before { width: 50%; }
html:not(.js) .st-meter[data-stufe="2"]::before { width: 100%; }
html:not(.js) .st-geraet__buehne { display: none; }

/* ---------- Ergebnis: das Protokoll läuft aus dem Schlitz ---------- */
.st-protokoll { padding: 0 0 var(--abschnitt-eng); scroll-margin-top: var(--kopf-h); }
/* Das Blatt steht auf dem Satzspiegel wie alle Blöcke der Seite (der Schlitz ragt um seinen Innenrand darüber hinaus) */
.st-protokoll__schlitz { --schlitz-rand: 20px; position: relative; margin-inline: calc(-1 * var(--schlitz-rand)); padding: 12px var(--schlitz-rand) 56px; overflow: clip; }
.st-protokoll__schlitz::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 14px; z-index: 2; border-radius: 7px;
  background: linear-gradient(180deg, #1F1F23, #141416); box-shadow: inset 0 -5px 6px rgb(0 0 0 / 0.85), 0 1px 0 rgb(255 255 255 / 0.06);
}
.st-protokoll__blatt { padding-inline: clamp(20px, 4.5vw, 64px); }
.bewegt .st-protokoll__blatt { transition: transform 1300ms var(--kurve); }
.bewegt .st-protokoll:not(.ist-gedruckt) .st-protokoll__blatt { transform: translateY(-101%); }
.st-protokoll__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.st-protokoll__kopf .h2 { max-width: 18ch; text-wrap: balance; }
/* Bruch nur nach dem Komma: „nach Wirkung sortiert“ bleibt zusammen */
.st-protokoll__fall { display: inline-block; }
.st-protokoll__kopf .h2:focus { outline: none; }
.st-protokoll__summe { color: var(--druck-leise); font-size: 1rem; }
.st-protokoll__summe .zahl { font-size: 1.5rem; color: var(--tinte); }
.st-protokoll__hinweis { margin-top: 16px; max-width: 62ch; color: var(--druck-leise); }
.st-empfehlungen { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1.5px solid var(--druck); }
.st-empf { display: grid; gap: 10px 40px; padding: 22px 0; border-bottom: 1px dashed var(--papier-linie-stark); }
@media (min-width: 800px) { .st-empf { grid-template-columns: 14rem minmax(0, 1fr); } }
.st-empf__kopf { display: grid; gap: 8px; align-content: start; }
.st-empf__kanal { font-family: var(--titel); font-stretch: 104%; font-weight: 650; font-size: 1.125rem; color: var(--druck); }
.st-empf__stufe { display: inline-flex; align-items: center; gap: 10px; color: var(--druck-leise); font-size: 1rem; }
.st-empf__balken { display: inline-grid; grid-template-columns: repeat(10, 6px); gap: 2px; }
.st-empf__balken i { height: 9px; background: rgb(22 22 26 / 0.12); }
.st-empf__balken i.an { background: var(--tinte); }
.st-empf__befund { font-weight: 650; color: var(--druck); }
.st-empf__text { margin-top: 6px !important; max-width: 64ch; color: var(--druck-leise); }
.st-empf__link { margin-top: 4px !important; }
.st-empf__link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--druck); text-decoration: underline; text-decoration-color: var(--tinte); text-underline-offset: 0.24em; }
.st-protokoll__aktion { margin-top: 32px; }
@media (max-width: 380px) {
  .st-protokoll__schlitz { --schlitz-rand: 10px; }
  .st-protokoll__blatt { padding-inline: 16px; }
  .st-protokoll__kopf .h2 { max-width: none; font-size: 1.5rem; }
  .st-protokoll__aktion .knopf { padding-inline: 12px; font-size: 1rem; white-space: nowrap; }
}
@media (min-width: 381px) and (max-width: 559px) { .st-protokoll__kopf .h2 { font-size: 1.625rem; } }
@media (max-width: 559px) {
  .st-protokoll__aktion { flex-direction: column; align-items: stretch; gap: 6px; }
  .st-protokoll__aktion .knopf { width: 100%; }
  .st-protokoll__aktion .pfeil { align-self: flex-start; }
}

/* ---------- Monogramm-Moment: drehen, vermessen, durch die Fuge, Übergabe an die Maßkette ---------- */
/* Maße der Bühne, auch für den Anschluss des Heros: --st-mono-t ist der Abstand Bühnenoberkante → Titel,
   --st-satz-l der linke Satzspiegel, --st-mono-w die Breite des Monogramms */
:root { --st-mono-t: var(--abschnitt-folge); --st-satz-l: max(var(--rand), (100vw - var(--breite)) / 2 + var(--rand)); }
.st-mono { position: relative; padding-top: var(--mono-oben, var(--abschnitt)); }
/* Direkt nach dem Hero (Protokoll noch zu): dessen unteres Polster ist schon mindestens --abschnitt-eng, zusammen genau ein Abschnitt */
.st-protokoll[hidden] ~ .st-mono { --mono-oben: var(--abschnitt-folge); }
.st-mono__halt { position: relative; }
.st-mono__titel { font-size: min(var(--t-h2), (100vw - 2 * var(--rand)) / 10.4); max-width: none; }
.st-mono__titel > span { display: block; }
/* Handy: die Versalzeilen berühren sich nicht */
@media (max-width: 759px) { .st-mono__titel { line-height: 0.96; } }
.st-mono__text { position: relative; z-index: 2; }
.st-mono__text .lead { margin-top: 28px; max-width: 36ch; }
.st-mono__raum { display: grid; place-items: center; margin-top: var(--s5); perspective: 1400px; perspective-origin: 50% 40%; }
/* Standbild: Die Maßlinien ragen 17,6 % der Körperhöhe über und unter den Körper; das Polster hält sie im Kasten,
   damit der Abstand zur Maßkette ab der Maßzahl „100“ zählt */
.st-mono__raum { --mono-ws: min(64vw, 440px); padding-block: calc(var(--mono-ws) * 0.1911); }
.st-mono__koerper {
  position: relative; width: min(64vw, 440px); aspect-ratio: 785 / 850;
  transform-style: preserve-3d; transform-origin: 19.11% 50%;
  transform: rotateX(6deg) rotateY(-16deg);
}
.st-mono__schicht, .st-mono__front, .st-mono__lage, .st-mono__gravur, .st-mono__zeilen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Tiefe aus zehn Ebenen, nach hinten dunkler; Licht von links oben */
.st-mono__schicht:nth-child(1) { transform: translateZ(-50px); color: #141416; }
.st-mono__schicht:nth-child(2) { transform: translateZ(-45px); color: #19191B; }
.st-mono__schicht:nth-child(3) { transform: translateZ(-40px); color: #1E1E21; }
.st-mono__schicht:nth-child(4) { transform: translateZ(-35px); color: #242427; }
.st-mono__schicht:nth-child(5) { transform: translateZ(-30px); color: #2B2B2E; }
.st-mono__schicht:nth-child(6) { transform: translateZ(-25px); color: #333336; }
.st-mono__schicht:nth-child(7) { transform: translateZ(-20px); color: #3D3D41; }
.st-mono__schicht:nth-child(8) { transform: translateZ(-15px); color: #49494D; }
.st-mono__schicht:nth-child(9) { transform: translateZ(-10px); color: #58585C; }
.st-mono__schicht:nth-child(10) { transform: translateZ(-5px); color: #727276; }
.st-mono__front { transform: translateZ(0.5px); color: var(--weiss); }
/* Gravur als eigene Ebene, wandert per transform (K8, README) */
.st-mono__gravur { clip-path: url(#st-mono-form-bb); }
.st-mono__gravur text { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 92px; letter-spacing: -1px; fill: rgb(11 11 12 / 0.035); }
.st-mono__mass {
  position: absolute; left: -19.108%; top: -17.647%; width: 138.217%; height: 135.294%;
  overflow: visible; max-width: none; transform: translateZ(2px); pointer-events: none;
}
.st-mass__linie, .st-mass__hilfe, .st-mass__pfeil { fill: none; stroke: var(--blau); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.st-mass__hilfe { stroke-opacity: 0.5; }
.st-mass__linie, .st-mass__hilfe { stroke-dasharray: 1; stroke-dashoffset: 0; }
.st-mass__text { font-family: var(--mono); font-size: 30px; fill: var(--blau); text-anchor: middle; font-variant-numeric: tabular-nums; }
.st-mass__text--start { text-anchor: start; }
/* Maßzahlen nie unter 12 px Ziffernhöhe, auch wenn die Bühne am Tablet und Handy kleiner wird
   (Handy 320 bis 400 px: Körper 186 bis 232 px breit, 72 Einheiten ergeben 17 bis 21 px Schrift) */
@media (max-width: 1199px) { .st-mass__text { font-size: 44px; } }
@media (max-width: 759px) { .st-mass__text { font-size: 60px; } }
@media (max-width: 400px) { .st-mass__text { font-size: 72px; } }

/* Übergabe: die blaue Linie wird zur Maßkette */
.st-uebergabe { margin-top: var(--abschnitt); padding-bottom: var(--abschnitt); }
.st-uebergabe .lead { max-width: 52ch; }
.st-uebergabe__linie { position: relative; height: 16px; margin-top: var(--s4); }
.st-uebergabe__linie::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--blau); transform-origin: 50% 50%; }
.st-uebergabe__linie i { position: absolute; bottom: 0; width: 1.5px; height: 16px; background: var(--blau); transform-origin: 50% 100%; }
.st-uebergabe__linie i:nth-child(1) { left: 0; } .st-uebergabe__linie i:nth-child(2) { left: 25%; } .st-uebergabe__linie i:nth-child(3) { left: 50%; }
.st-uebergabe__linie i:nth-child(4) { left: 75%; } .st-uebergabe__linie i:nth-child(5) { right: 0; }
/* Teilstriche passend zur Kette: vier Spalten ab 1000 px, zwei Spalten darunter, am Handy nur der Anfang */
@media (max-width: 999px) { .st-uebergabe__linie i:nth-child(2), .st-uebergabe__linie i:nth-child(4) { display: none; } }
@media (max-width: 720px) { .st-uebergabe__linie i:not(:first-child) { display: none; } .st-uebergabe__linie i:first-child { left: 6px; } }

/* Ruhiges Standbild (ohne animation-timeline, reduzierte Bewegung): Text links, vermessenes Monogramm rechts.
   Der Titel steht wie in der Bewegung auf Höhe der Oberkante des Monogramms (Polster über dem Körper: 19,11 % der Breite) */
.st-mono__weg { display: none; }
@media (min-width: 900px) {
  .st-mono__halt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
  .st-mono__text { width: auto; margin: 0; padding: calc(min(32vw, 440px) * 0.1911) 0 0; }
  .st-mono__raum { margin-top: 0; --mono-ws: min(32vw, 440px); }
  .st-mono__koerper { width: min(32vw, 440px); }
}

/* Scroll-gekoppelt: Die Bühne steht, solange der Weg (.st-mono__weg) läuft. Weglänge = Animationslänge.
   Fortschritt p über den Weg: 0 bis 22 % aus der Schräge frontal drehen, 16 bis 46 % an den echten Kanten vermessen,
   36 bis 48 % schiebt das wachsende Monogramm den Text aus dem Bild (er bleibt lesbar, bis er draußen ist),
   44 bis 70 % Flug durch die Fuge. Die Phase, in der fast nur Weiß im Bild ist (Skalierung 5 bis 30), ist kurz,
   die Gravur bleibt dabei als Struktur in der Fläche. Sobald nur noch das Schwarz der Fuge zu sehen ist, liegt dort
   der Anfang der blauen Linie als kurzes Segment (Schwarz wird zur Linie), dann erscheint „So wird gebaut“,
   die Linie zieht sich auf Kettenbreite, die Teilstriche setzen. Kein Scrollweg ohne Bewegung, kein Grau über Weiß. */
@supports (animation-timeline: view()) {
  .bewegt { --st-mono-t: calc(var(--kopf-h) + 4svh); }
  .bewegt :is(.st-mono__text, .st-mono__raum, .st-mono__koerper, .st-mass, .st-mass__linie, .st-mass__hilfe, .st-mass__text, .st-mass__pfeil, .st-mono__gravur, .st-mono__zeilen, .st-uebergabe, .st-uebergabe__linie i), .bewegt .st-uebergabe__linie::before {
    animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --st-weg; animation-range: entry 0% exit 0%;
  }
  .bewegt .st-mono { --weg: 128vh; --ueb-y: 40svh; --text-aus: translate3d(0, -34svh, 0); padding-top: 0; timeline-scope: --st-weg; }
  .bewegt .st-mono__weg { display: block; height: var(--weg); view-timeline: --st-weg block; }
  .bewegt .st-mono__halt { position: sticky; top: 0; height: 100svh; display: block; overflow: clip; max-width: none; margin: 0; padding: 0; }
  .bewegt .st-mono__text {
    position: absolute; left: 0; right: 0; top: var(--st-mono-t); margin: 0 auto; width: 100%;
    animation-name: st-mono-text;
  }
  .bewegt .st-mono__raum {
    position: absolute; inset: 0; margin: 0; padding-top: calc(var(--kopf-h) + 30svh); padding-bottom: 0;
    animation-name: st-mono-blende;
  }
  .bewegt .st-mono__koerper {
    --flug-x: 22vw; width: min(58vw, 34svh * 785 / 850);
    animation-name: st-mono-flug;
  }
  .bewegt .st-mass { animation-name: st-mass-blende; }
  .bewegt .st-mass__linie, .bewegt .st-mass__hilfe { animation-name: st-mass-zeichnen; }
  .bewegt .st-mass--unten .st-mass__linie, .bewegt .st-mass--unten .st-mass__hilfe { animation-name: st-mass-zeichnen-spaet; }
  .bewegt .st-mass__text, .bewegt .st-mass__pfeil { animation-name: st-mass-text; }
  .bewegt .st-mono__gravur { animation-name: st-gravur-aus; }
  .bewegt .st-mono__zeilen--a { animation-name: st-gravur-links; }
  .bewegt .st-mono__zeilen--b { animation-name: st-gravur-rechts; }
  /* Übergabe: liegt unsichtbar über der Bühne und steht im Schwarz der Fuge auf --ueb-y */
  .bewegt .st-uebergabe {
    position: relative; z-index: 1; margin-top: calc(var(--ueb-y) - 100svh - var(--weg) * 0.25); padding-block: var(--s5) var(--abschnitt);
    min-height: calc(100svh - var(--ueb-y));
    background: var(--buehne); box-shadow: 0 0 0 100vw var(--buehne); clip-path: inset(0 -100vw 0 -100vw);
    animation-name: st-uebergabe-auf;
  }
  .bewegt .st-uebergabe > :not(.st-uebergabe__linie) { animation: st-uebergabe-text linear both; animation-timeline: --st-weg; animation-range: entry 0% exit 0%; }
  .bewegt .st-uebergabe__linie::before { animation-name: st-linie-ziehen; }
  .bewegt .st-uebergabe__linie i { animation-name: st-strich-setzen; }
  @media (min-width: 900px) {
    /* Monogramm im Satzspiegel: rechte Kante (mit Maßpfeilen, 3,2 % der Breite) am rechten Satzspiegel, Breite so,
       dass zwischen Titel (rund 9,9 × Schriftgröße) und linker Maßkette (16,5 % der Breite links vom Körper) 48 px frei bleiben.
       Titel auf Höhe der Oberkante des Monogramms (Körper senkrecht mittig). Bildhöhe: Solange der Text noch im Bild ist
       (Skalierung bis 1,44), bleiben über und unter dem Monogramm mindestens Kopfleiste + 32 px frei. */
    .bewegt {
      --st-mono-w: min(32vw, 60svh * 785 / 850, (100vw - 2 * var(--st-satz-l) - min(3.75rem, 3.7vw) * 9.9 - 48px) / 1.2, (100svh - 2 * var(--kopf-h) - 64px) / 1.44 * 785 / 850);
      --st-mono-t: calc((100svh - var(--st-mono-w) * 850 / 785) / 2);
    }
    .bewegt .st-mono { --weg: 150vh; --text-aus: translate3d(-40vw, 0, 0); }
    .bewegt .st-mono__text { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: var(--st-mono-t) var(--rand) 0; max-width: var(--breite); }
    .bewegt .st-mono__text > * { max-width: 42vw; }
    .bewegt .st-mono__text > .lead { max-width: 36ch; }
    .bewegt .st-mono__raum { padding: 0 calc(var(--st-satz-l) + var(--st-mono-w) * 0.032) 0 0; place-items: center end; }
    /* Flug: die Fuge (19,11 % der Breite) landet in der Bildmitte */
    .bewegt .st-mono__koerper { --flug-x: calc(var(--st-satz-l) + var(--st-mono-w) * 0.8409 - 50vw); width: var(--st-mono-w); }
  }
  /* Handy: kürzerer Weg; die Übergabe steht höher (Kopfleiste + 12 % Bildhöhe), über „So wird gebaut“ bleibt kein leeres Drittel */
  @media (max-width: 720px) { .bewegt .st-mono { --weg: 120vh; --ueb-y: calc(var(--kopf-h) + 12svh); } }
  /* Handy: die Fuge füllt das Bild schon bei kleinerer Skalierung (ab ca. 66 %), also kommt die Übergabe früher */
  @media (max-width: 720px) {
    .bewegt .st-mono__raum { animation-name: st-mono-blende-m; }
    .bewegt .st-uebergabe { animation-name: st-uebergabe-auf-m; margin-top: calc(var(--ueb-y) - 100svh - var(--weg) * 0.29); }
    .bewegt .st-uebergabe > :not(.st-uebergabe__linie) { animation-name: st-uebergabe-text-m; }
    .bewegt .st-uebergabe__linie::before { animation-name: st-linie-ziehen-m; }
    .bewegt .st-uebergabe__linie i { animation-name: st-strich-setzen-m; }
  }
}
@keyframes st-mono-flug {
  0% { transform: translateX(0) rotateX(16deg) rotateY(-46deg) scale(0.86); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  22% { transform: translateX(0) rotateX(0deg) rotateY(0deg) scale(1); }
  /* Flug: solange die Form des Monogramms lesbar ist, wächst die Skalierung je Schritt um denselben Faktor
     (gleichmäßige Fahrt wie eine Kamera); ab Skalierung 5,6 ist fast nur noch Weiß im Bild, diese Strecke ist doppelt so schnell.
     Ab 70 % füllt die Fuge den ganzen Bildschirm: nur noch Schwarz. */
  44% { transform: translateX(0) rotateX(0deg) rotateY(0deg) scale(1.04); }
  48% { transform: translateX(calc(var(--flug-x) * 0.125)) rotateX(0deg) rotateY(0deg) scale(1.58); }
  52% { transform: translateX(calc(var(--flug-x) * 0.25)) rotateX(0deg) rotateY(0deg) scale(2.41); }
  56% { transform: translateX(calc(var(--flug-x) * 0.375)) rotateX(0deg) rotateY(0deg) scale(3.67); }
  60% { transform: translateX(calc(var(--flug-x) * 0.5)) rotateX(0deg) rotateY(0deg) scale(5.59); }
  62.5% { transform: translateX(calc(var(--flug-x) * 0.625)) rotateX(0deg) rotateY(0deg) scale(8.5); }
  65% { transform: translateX(calc(var(--flug-x) * 0.75)) rotateX(0deg) rotateY(0deg) scale(12.9); }
  67.5% { transform: translateX(calc(var(--flug-x) * 0.875)) rotateX(0deg) rotateY(0deg) scale(19.7); }
  70%, 100% { transform: translateX(var(--flug-x)) rotateX(0deg) rotateY(0deg) scale(30); }
}
@keyframes st-mono-blende { 0%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes st-mono-text {
  0%, 36% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  45% { opacity: 1; }
  48%, 100% { opacity: 0; transform: var(--text-aus); }
}
@keyframes st-mass-blende { 0%, 16% { opacity: 0; } 22%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes st-mass-zeichnen { 0%, 18% { stroke-dashoffset: 1; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes st-mass-zeichnen-spaet { 0%, 26% { stroke-dashoffset: 1; } 36%, 100% { stroke-dashoffset: 0; } }
@keyframes st-mass-text { 0%, 28% { opacity: 0; } 34%, 100% { opacity: 1; } }
/* Während des Vermessens tritt die Gravur zurück, im Flug kommt sie als Struktur der weißen Fläche wieder */
@keyframes st-gravur-aus { 0%, 32% { opacity: 1; } 40%, 46% { opacity: 0.3; } 54%, 100% { opacity: 1; } }
@keyframes st-gravur-links { 0% { transform: translateX(17.834%); } 42%, 100% { transform: translateX(-30.573%); } }
@keyframes st-gravur-rechts { 0% { transform: translateX(-28.025%); } 42%, 100% { transform: translateX(20.382%); } }
/* Die Übergabe kommt erst, wenn nur noch Schwarz im Bild ist: ihre schwarze Fläche deckt dann nichts Helles ab (kein Grau über Weiß).
   Zuerst steht nur das blaue Segment im Schwarz, dann erscheinen Überschrift und Kette, dann zieht sich die Linie. */
@keyframes st-uebergabe-auf { 0%, 69% { opacity: 0; } 69.8%, 100% { opacity: 1; } }
@keyframes st-uebergabe-text { 0%, 69% { opacity: 0; } 73%, 100% { opacity: 1; } }
@keyframes st-linie-ziehen {
  0%, 70% { transform: scaleX(0.03); }
  76% { transform: scaleX(0.05); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  89%, 100% { transform: scaleX(1); }
}
@keyframes st-strich-setzen { 0%, 86% { transform: scaleY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } 91%, 100% { transform: scaleY(1); } }
@keyframes st-mono-blende-m { 0%, 67% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes st-uebergabe-auf-m { 0%, 65.5% { opacity: 0; } 66.2%, 100% { opacity: 1; } }
@keyframes st-uebergabe-text-m { 0%, 65.5% { opacity: 0; } 69.5%, 100% { opacity: 1; } }
@keyframes st-linie-ziehen-m {
  0%, 67% { transform: scaleX(0.03); }
  72.5% { transform: scaleX(0.05); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  85%, 100% { transform: scaleX(1); }
}
@keyframes st-strich-setzen-m { 0%, 83% { transform: scaleY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } 88%, 100% { transform: scaleY(1); } }

/* ---------- Maßkette: schließt direkt an die Übergabe an ---------- */
.st-schritte { margin-top: 0; }
.st-schritte .schritt { padding-top: 34px; }
.st-schritte .schritt h3 { margin-top: 0; font-size: var(--t-h3); }
.st-schritte .schritt p { max-width: 34ch; }
.st-schritte .st-schritt__ergebnis { color: var(--weiss); font-weight: 600; }
@media (min-width: 721px) {
  .st-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .st-schritte .schritt::before, .st-schritte .schritt:last-child::after { content: none; }
}
/* Tablet: zwei mal zwei, damit die Absätze nicht in schmalen Spalten zu Treppen werden */
@media (min-width: 721px) and (max-width: 999px) { .st-schritte .schritt { padding-right: 40px; } .st-schritte .schritt p { max-width: 40ch; } }
@media (min-width: 1000px) { .st-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; } }
@media (max-width: 720px) { .st-schritte { margin-top: 0; padding-top: 24px; } .st-schritte .schritt { padding-top: 0; } }

/* ---------- 190: bildbreites Zählwerk mit Maßlinie ---------- */
/* Themenwechsel wie auf den Unterseiten: Maßkette und Block tragen je einen Abschnitt (zusammen 240 px am Desktop) */
.st-preis { padding: var(--abschnitt) 0; border-top: 1px solid var(--linie); }
.st-preis__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.st-preis__zahl { justify-self: start; align-self: end; display: grid; align-content: end; gap: 14px; }
.st-preis__ziffern { position: relative; display: flex; align-items: flex-start; margin: 0; font-size: clamp(7rem, 36vw, 18rem); line-height: 1; height: 1em; }
.st-preis__ziffern::before, .st-preis__ziffern::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--linie-stark); }
.st-preis__ziffern::before { top: 0.08em; }
.st-preis__ziffern::after { bottom: 0.11em; }
.st-preis__ziffern .zaehlwerk { font-size: 1em; letter-spacing: -0.05em; }
.st-preis__euro { margin: 0.32em 0 0 0.12em; font: 600 clamp(2rem, 8vw, 4.5rem)/1 var(--titel); color: var(--grau); }
.st-preis__mass { font-size: 1rem; }
.st-preis__kopf .h2 { max-width: 16ch; }
.st-schwellen { margin: 0; border-top: 1px solid var(--linie-stark); }
.st-schwellen > div { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.st-schwellen dt { font-weight: 600; color: var(--weiss); }
.st-schwellen dd { margin: 0; color: var(--grau); }
.st-preis__kopf .knoepfe { margin-top: 28px; }
@media (min-width: 560px) { .st-schwellen > div { grid-template-columns: 11rem minmax(0, 1fr); } }
@media (min-width: 1000px) {
  .st-preis__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); row-gap: clamp(48px, 5vw, 72px); }
  /* Zählwerk und Kopf je sechs Spalten: die Überschrift steht in voller H2-Größe, „Sichtbarkeits-Check“ bleibt ganz */
  .st-preis__zahl { grid-column: 1 / span 6; align-self: start; }
  .st-preis__ziffern { font-size: clamp(9rem, 14vw, 13.5rem); }
  /* Oberkante der Überschrift (Versalhöhe) auf der oberen Haarlinie des Zählwerks */
  .st-preis__kopf { grid-column: 7 / -1; align-self: start; padding-top: calc(clamp(9rem, 14vw, 13.5rem) * 0.08 - var(--t-h2) * 0.17); }
  /* Schwellen als Spezifikationsreihe über die volle Breite */
  .st-schwellen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--linie); }
  .st-schwellen > div { grid-template-columns: minmax(0, 1fr); padding: 18px 20px 18px 0; border-bottom: 0; }
  .st-schwellen > div + div { padding-left: 20px; border-left: 1px solid var(--linie); }
}

/* ---------- Leistungsverzeichnis: Überschrift frei über dem Blatt ---------- */
/* Überschrift in der normalen H2-Stufe wie die übrigen H2 der Startseite */
.st-lv {
  padding: var(--abschnitt) 0; isolation: isolate; overflow-x: clip;
}
.st-lv__titel {
  position: relative; z-index: 2; margin: 0 0 var(--abstand-7); padding-left: 0;
  font-family: var(--titel); font-stretch: 108%; font-weight: 700; font-size: var(--t-h2); line-height: 0.9; letter-spacing: -0.04em;
  color: #FFFFFF; mix-blend-mode: difference; white-space: nowrap; pointer-events: none;
}
/* Blatt auf dem Satzspiegel, 32 px (Handy 24 px) unter der Überschrift */
.st-lv__blatt { --loch: var(--buehne); position: relative; z-index: 1; margin-left: 0; }
.st-lv__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 16px; border-bottom: 1.5px solid var(--druck); }
.st-lv__zeichen { width: 22px; height: auto; color: var(--druck); }
.st-lv__name { font-weight: 700; font-size: 1.0625rem; color: var(--druck); }
.st-lv__stand { margin: 0 0 0 auto !important; font-size: 1rem; color: var(--druck-leise); }
.st-lv__vorbemerkung { margin-top: 18px; max-width: 64ch; color: var(--druck-leise); }
.st-lv__tabelle { width: 100%; border-collapse: collapse; margin-top: 12px; }
.st-lv__tabelle thead th { padding: 14px 16px 12px 0; text-align: left; font-size: 1rem; font-weight: 600; color: var(--druck-leise); }
.st-lv__tabelle tbody { border-top: 1px solid var(--papier-linie-stark); }
.st-lv__tabelle td, .st-lv__tabelle tbody th { padding: 16px 16px 16px 0; vertical-align: baseline; text-align: left; font-weight: 400; color: var(--druck); }
.st-lv__tabelle tbody tr + tr > * { border-top: 1px solid var(--papier-linie); }
.st-lv__tabelle tbody th a { font: 650 1.125rem/1.3 var(--titel); font-stretch: 104%; letter-spacing: -0.01em; color: var(--druck); }
.st-lv__tabelle tbody th span { display: block; margin-top: 4px; max-width: 58ch; font-size: 1rem; line-height: 1.5; color: var(--druck-leise); }
.st-lv__pos { width: 3.6rem; font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; color: var(--druck-leise) !important; }
.st-lv__einheit { width: 8rem; font-size: 1rem; color: var(--druck-leise) !important; }
.st-lv__betrag { width: 9rem; text-align: right !important; padding-right: 0 !important; white-space: nowrap; font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums lining-nums; }
.st-lv__tabelle thead .st-lv__betrag { font-family: var(--sans); font-size: 1rem; }
.st-lv__betrag .stiftkreis { font-weight: 600; }
/* Der Stiftkreis darf über die Zelle hinaus zeichnen, ohne die Zeile zu verbreitern */
.st-lv__betrag { overflow: clip; overflow-clip-margin: 48px; }
.st-lv__fuss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 8px; padding-top: 22px; border-top: 1.5px solid var(--druck); }
.st-lv__laufzeit, .st-lv__anfrage p { font-size: 1rem; line-height: 1.55; color: var(--druck); max-width: 52ch; }
.st-lv__laufzeit { color: var(--druck-leise); }
.st-lv__anfrage ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.st-lv__anfrage a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1rem; }
.st-lv__wege { display: flex; flex-wrap: wrap; gap: 4px 32px; margin: 28px 0 0; }
@media (min-width: 900px) { .st-lv__fuss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
@media (max-width: 720px) {
  .st-lv__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .st-lv__tabelle, .st-lv__tabelle tbody { display: block; }
  .st-lv__tabelle tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name name" "pos einheit betrag"; column-gap: 12px; align-items: baseline; padding: 16px 0 14px; }
  .st-lv__tabelle tbody tr + tr { border-top: 1px solid var(--papier-linie); }
  .st-lv__tabelle tbody tr + tr > * { border-top: 0; }
  .st-lv__tabelle td, .st-lv__tabelle tbody th { padding: 0; width: auto; }
  .st-lv__pos { grid-area: pos; width: auto; margin-top: 10px; }
  .st-lv__tabelle tbody th { grid-area: name; }
  .st-lv__einheit { grid-area: einheit; margin-top: 10px; font-size: 1rem; }
  .st-lv__betrag { grid-area: betrag; margin-top: 10px; padding-right: 16px !important; }
  .st-lv__tabelle tbody th span { font-size: 1rem; }
  .st-lv__stand { margin-left: 0 !important; flex-basis: 100%; }
  .st-lv__blatt, .st-lv__wege { margin-left: 0; }
  .st-lv__blatt { padding-inline: 18px; padding-top: max(28px, 4vw); }
  .st-lv__titel { margin-bottom: var(--abstand-5); padding-left: 0; }
}

/* ---------- Kampagne: klein, mit Verweis auf /ergebnisse/ ---------- */
.st-beleg { border-top: 1px solid var(--linie); }
.st-beleg__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.st-beleg__text p { margin-top: 12px; max-width: 46ch; color: var(--grau); }
.st-beleg__text .pfeil { display: inline-block; margin-top: var(--abstand-4); }
.st-kette { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie-stark); }
.st-kette__glied { padding: 14px 16px 10px 0; border-bottom: 1px solid var(--linie); }
.st-kette dt { font-size: 1rem; color: var(--grau); }
.st-kette dd { margin: 0; }
.st-kette .st-kette__wert { display: block; margin-top: 12px; font-family: var(--sans); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.125rem); line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; color: var(--weiss); }
.st-kette__notiz { margin-top: 4px !important; font-size: 1rem; line-height: 1.45; color: var(--grau-2); }
@media (min-width: 1000px) {
  .st-beleg__raster { grid-template-columns: var(--teilung-5-7); gap: var(--teilung-gap); }
  /* Oberkante der Kennzahlen-Tabelle auf der Versalhöhe der Überschrift */
  .st-beleg .st-kette { margin-top: calc(var(--t-h2) * 0.14); }
}
/* Kennzahlen bleiben auf jeder Breite zwei mal zwei: je Glied genug Breite, Unterzeilen höchstens drei Zeilen */

/* ---------- Ein Ansprechpartner: Leitungsplan ---------- */
/* Beleg → Ansprechpartner ist ein Themenwechsel auf derselben Fläche: beide tragen ihren Abschnitt (nicht zusammengelegt) */
main .abschnitt.st-beleg:not(.abschnitt--eng):not(.abschnitt--grau):not(.abschnitt--flaeche):not(.dunkel) + .abschnitt.st-ap:not(.abschnitt--grau):not(.abschnitt--flaeche):not(.dunkel) { padding-top: var(--abschnitt); }
.st-ap__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.st-ap__ort { margin-top: 18px; color: var(--grau); }
.st-plan { display: grid; grid-template-columns: auto minmax(72px, 1fr) auto; column-gap: 14px; align-items: center; max-width: 560px; font-size: 1rem; }
.st-plan__leitung { display: contents; }
.st-plan__ende { font-weight: 650; color: var(--weiss); white-space: nowrap; }
/* Die feste Verbindung: durchgezogene Linie mit Endstrichen */
.st-plan__strecke { position: relative; height: 13px; color: var(--weiss);
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1.5px 100% no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 100% no-repeat; }
.st-plan__strecke span { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: max-content; max-width: 100%; text-align: center; color: var(--grau); font-size: 1rem; line-height: 1.35; }
/* Partner zweigen nur bei Bedarf ab: gestrichelte Leitung mit Teilstrichen unter dem Ansprechpartner */
.st-plan__abzweig { grid-column: 3; list-style: none; margin: 10px 0 0 22px; padding: 6px 0 0; border-left: 1.5px dashed var(--grau-3); display: grid; gap: 2px; }
.st-plan__abzweig li { position: relative; display: flex; align-items: center; min-height: 40px; padding-left: 26px; color: var(--grau); }
.st-plan__abzweig li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: var(--grau-3); }
.st-plan__notiz { grid-column: 3; margin: 8px 0 0 22px; font-style: italic; font-size: 1rem; color: var(--grau-2); }
/* Desktop: Überschrift über die volle Breite (keine Trennung im Wort), darunter Text links und ein großer Leitungsplan rechts:
   die feste Verbindung läuft über die ganze rechte Spalte, die Partner zweigen darunter ab und reichen bis zur Unterkante des Texts */
@media (min-width: 1000px) {
  .st-ap__raster { grid-template-columns: var(--teilung-5-7); column-gap: var(--teilung-gap); row-gap: 0; align-items: start; }
  .st-ap__raster > div:first-child { display: contents; }
  .st-ap__raster .h2 { grid-column: 1 / -1; max-width: none; margin-bottom: 0; }
  .st-ap__raster .lead { margin-top: var(--abstand-5); }
  .st-ap__raster .lead, .st-ap__ort { grid-column: 1; }
  .st-plan {
    grid-column: 2; grid-row: 2 / span 2; align-self: start; grid-template-rows: auto auto auto; max-width: none; padding-top: var(--abstand-5);
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); grid-template-columns: auto minmax(160px, 1fr) auto; column-gap: 24px;
  }
  .st-plan__strecke { height: 19px; }
  .st-plan__strecke span { top: 30px; font-size: 1.0625rem; }
  .st-plan__abzweig { align-self: start; margin: 12px 0 0 0.6em; padding-top: var(--abstand-6); gap: 6px; align-content: start; }
  .st-plan__abzweig li { min-height: 48px; padding-left: 34px; font-size: 1.125rem; }
  .st-plan__abzweig li::before { width: 22px; }
  .st-plan__notiz { margin-left: 0.6em; max-width: 26ch; font-size: 1rem; }
}
/* Handy: der Plan steht senkrecht, die Verbindung führt nach unten, die Partner zweigen darunter ab */
@media (max-width: 559px) {
  .st-plan { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .st-plan__strecke {
    width: 13px; height: 72px; margin: 10px 0 10px 4px;
    background: linear-gradient(currentColor, currentColor) 50% 0 / 1.5px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  }
  .st-plan__strecke span { left: 30px; top: 50%; transform: translateY(-50%); text-align: left; max-width: none; }
  .st-plan__abzweig, .st-plan__notiz { grid-column: 1; margin-left: 10px; }
}

/* ---------- FAQ ---------- */
.st-fragen__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 1000px) {
  /* Beleg, Ansprechpartner, Fragen und Kontakt teilen dieselbe Spaltenkante (5/7) */
  .st-fragen__raster { grid-template-columns: var(--teilung-5-7); gap: var(--teilung-gap); align-items: start; }
  .st-fragen__raster .h2 { align-self: start; }
  .st-fragen__raster .faq { margin-top: 0; }
}

/* ---------- Eine Spaltenlinie für die ganze Startseite (ab 1200 px) ----------
   Die rechte Spalte ist so breit wie das Messgerät im Hero (8,49 × Treppen-F) und schließt am Satzspiegel; ihre linke Kante
   ist die Stufenkante von „Angefragt.“. 190-€-Kopf, Kennzahlen, Leitungsplan, Fragen und Formular stehen auf dieser Linie,
   der Spaltenabstand ist der des Heros. Unter 1200 px gilt die 5/7-Teilung. */
@media (min-width: 1200px) {
  .st {
    --st-F: min(7.5rem, (min(100vw, var(--breite)) - 2 * var(--rand)) / 16.41, 9.2svh);
    --st-rechts: calc(var(--st-F) * 8.49);
  }
  .st-beleg__raster, .st-ap__raster, .st-fragen__raster, .st-kontakt .kontakt__grid {
    grid-template-columns: minmax(0, 1fr) var(--st-rechts); column-gap: var(--abstand-8);
  }
  /* 190: Zählwerk links, Kopf rechts auf der Linie; die Ziffern (2,45 em breit) bleiben in der linken Spalte */
  .st-preis { --st-zahl-F: min(13.5rem, 14vw, (min(100vw, var(--breite)) - 2 * var(--rand) - var(--st-rechts) - var(--abstand-8)) / 2.45); }
  .st-preis__raster { grid-template-columns: minmax(0, 1fr) var(--st-rechts); column-gap: var(--abstand-8); }
  .st-preis__zahl { grid-column: 1; }
  .st-preis__ziffern { font-size: var(--st-zahl-F); }
  .st-preis__kopf { grid-column: 2; padding-top: calc(var(--st-zahl-F) * 0.08 - var(--t-h2) * 0.17); }
}

/* ---------- Handy: gleiche Reihenfolge, Themenwechsel mit --abschnitt wie auf den Unterseiten, Weg des Monogramms kürzer ---------- */
@media (max-width: 720px) {
  .st-preis__raster { gap: 24px; }
  .st-lv__wege { margin-top: 16px; }
}
@supports (animation-timeline: view()) { @media (max-width: 720px) { .bewegt .st-uebergabe { padding-block: var(--s4) var(--abschnitt); } } }

/* ---------- Handy: Fließtext nie unter 16 px ---------- */
@media (max-width: 720px) {
  .st-kanal__wert, .st-frage__kopf, .st-lv__stand, .st-kette dt, .st-kette__notiz, .st-plan__strecke span, .st-plan__notiz, .st-empf__stufe { font-size: 1rem; }
  .st-geraet { padding: 24px 16px 18px; }
  .st-blatt__fenster { padding: 8px 6px 0; }
}
/* Sehr schmal: „Ein Ansprechpartner.“ bleibt auf einer Zeile, ohne Trennung */
@media (max-width: 400px) { .st-ap .h2 { font-size: min(var(--t-h2), (100vw - 2 * var(--rand)) / 10.6); } }

/* ---------- Reduzierte Bewegung: Standbild ---------- */
@media (prefers-reduced-motion: reduce) {
  .st-geraet { transform: none !important; translate: none !important; }
  .st-blatt__glas { transform: none; }
}
/* Sehr schmal: der Produktname darf am Bindestrich umbrechen, sonst läuft er über */
@media (max-width: 400px) { .st-preis__kopf .h2 .nowrap { white-space: normal; } }