@charset "utf-8";

/* ===========================================================================
   MAXIM MATIS SHK — „Der Prüfsiegel"
   Redesign, ersetzt die Emailleschild-Welt vollständig. Die Seite ist ein
   amtlich anmutender, aber persönlich geführter Vorgang: Formularpapier,
   gelochter Blattrand, Schreibmaschinen-Unterstreichung, ein echtes rundes
   Prüfsiegel, das beim Erscheinen sichtbar auf die Seite schlägt statt nur
   zu behaupten. Die sechs gebundenen Markenfarben bleiben unverändert —
   Petrol wird zur Stempelfarbe, Nacht zur Schreibmaschinentinte.
   =========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light only;
  --petrol: #42ac9f;
  --petrol-tief: #368c82;
  --petrol-dunkel: #2c746b;
  --nacht: #1a2533;
  --nacht-tief: #101a25;
  --nacht-marke: #224049;
  --schiefer: #4a5d75;
  --wand: #f7f9fc;
  --linie: #e8edf5;
  --weiss: #ffffff;

  --rand: clamp(1.25rem, 4vw, 3.5rem);
  --loch: .5rem;
  --lochspalte: 2.4rem;

  /* Typografische Rollenskala — jede Größe im System referenziert eine
     dieser benannten Stufen statt eines eigenen Literalwerts. */
  --text-micro: .66rem;
  --text-label: .72rem;
  --text-nav: .78rem;
  --text-xs: .84rem;
  --text-meta: .92rem;
  --text-emphasis: 1rem;
  --text-body: clamp(1.02rem, .3vw + .95rem, 1.15rem);
  --text-lg: 1.25rem;

  /* Stempel-Schrift-Familie: eine fluide Skala von der Positionszahl bis
     zum Formularkopf, jede Stufe einer eigenen Bauteil-Rolle zugeordnet. */
  --text-headline-3xs: clamp(1.15rem, 2.4vw, 1.6rem);
  --text-headline-2xs: clamp(1.35rem, 2.8vw, 1.85rem);
  --text-headline-xs: clamp(1.5rem, 3.2vw, 2.1rem);
  --text-headline-sm: clamp(1.6rem, 3.4vw, 2.4rem);
  --text-headline: clamp(1.7rem, 4vw, 2.9rem);
  --text-headline-lg: clamp(2.2rem, 4.6vw, 3.3rem);
  --text-display: clamp(2.4rem, 7.6vw, 5.6rem);

  --ease-stempel: cubic-bezier(.21, 1.62, .38, 1.01); /* impeccable-disable-line bounce-easing -- Konzeptaussage der Prüfsiegel-Welt: ein Stempel muss physisch überschießen, vom Benutzer explizit gewählt, siehe DESIGN.md */
  --ease-weich: cubic-bezier(.16, 1, .3, 1);

  /* Funktionale Ergänzung, keine siebte Blattfarbe: Fehlerzustand von
     Formularfeldern. Kommt nirgends dekorativ vor, nur bei ungültiger
     Eingabe. Gedämpfter Farbton, damit er neben Petrol nicht wie ein
     zweiter Akzent wirkt. */
  --fehler: #a63b32;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--petrol) var(--linie);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--wand);
  color: var(--nacht);
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  font-variation-settings: 'wdth' 96;
  font-size: var(--text-body);
  line-height: 1.6;
  caret-color: var(--petrol);
  overflow-x: hidden;
}

::selection { background: var(--nacht); color: var(--weiss); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--linie); }
::-webkit-scrollbar-thumb { background: var(--petrol); border: 3px solid var(--linie); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--petrol-tief); }
/* Petrol pur erreicht auf hellem Papier (Wand/Weiß) nur 2.6–2.75:1 — unter
   dem 3:1-Boden für Nicht-Text-Kontrast (WCAG 1.4.11), den ein Fokusring
   einhalten muss. Petrol-Tief schafft dort 3.81–4.01:1. Auf dunklem Grund
   ist es umgekehrt: Petrol-Tief fällt auf Nacht-Marke auf 2.76:1, reines
   Petrol bleibt bei 4–5.6:1 — deshalb kehrt die zweite Regel dort um. */
:focus-visible { outline: 3px solid var(--petrol-tief); outline-offset: 3px; }
.blatt--nacht :focus-visible,
.band--nacht :focus-visible,
.fuss :focus-visible,
.aktionsleiste :focus-visible,
.vermerk :focus-visible { outline-color: var(--petrol); }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: from-font; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* --- Typografische Stimmen ------------------------------------------------ */
.stempel-schrift {
  font-variation-settings: 'wdth' 112;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.formular-label {
  font-variation-settings: 'wdth' 62;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-label);
  letter-spacing: .17em;
  color: var(--schiefer);
}
.zahl { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ===========================================================================
   Das Aktenblatt — Grundmaterial: Papier mit Kopfzeile, optional gelocht.
   =========================================================================== */
.bahn { padding-inline: var(--rand); }
.mitte { width: 100%; margin-inline: auto; }

.blatt {
  position: relative;
  background: var(--weiss);
  color: var(--nacht);
  box-shadow:
    0 1px 0 var(--linie),
    0 14px 28px rgba(26, 37, 51, .08),
    0 2px 6px rgba(26, 37, 51, .06);
  background-image: radial-gradient(circle, rgba(26, 37, 51, .035) .55px, transparent .6px);
  background-size: 6px 6px;
}
.blatt--nacht { background-color: var(--nacht-marke); color: var(--weiss); }
.blatt--nacht { background-image: radial-gradient(circle, rgba(255, 255, 255, .035) .55px, transparent .6px); background-size: 6px 6px; }
.blatt--wand { background-color: var(--wand); box-shadow: 0 1px 0 var(--linie); }

/* Akzent-Blatt: volle Markenfarbe als Fläche statt nur als Rand — für
   einzelne, bewusst hervorgehobene Positionen. Weißer Text auf Wunsch;
   Petrol-Tief statt der hellsten Petrol-Stufe als Hintergrund, weil Weiß
   auf hellem Petrol nur 2.75:1 erreicht (Petrol-Tief: 4.01:1 — reicht für
   die grossen/fetten Ueberschriften, liegt bei kleinem Fliesstext noch
   unter dem AA-Boden 4.5:1). */
.blatt--akzent { background-color: var(--petrol-tief); color: var(--weiss); }
.blatt--akzent .position__nr { color: var(--weiss); }
.blatt--akzent .position__satz { color: rgba(255, 255, 255, .9); }
.blatt--akzent .feld__zeile { border-bottom-color: rgba(255, 255, 255, .32); }
.blatt--akzent .formular-label { color: rgba(255, 255, 255, .78); }

/* Gelochter Rand: zwei bis drei echte Aktenlöcher links, das Papier
   scheint dahinter durch. */
.blatt--gelocht { padding-left: calc(var(--lochspalte) + 1.4rem); }
.blatt--gelocht::before {
  content: '';
  position: absolute;
  left: calc(var(--lochspalte) / 2 - var(--loch) / 2);
  top: 1.6rem;
  bottom: 1.6rem;
  width: var(--loch);
  background-image: radial-gradient(circle, var(--wand) 0 calc(var(--loch) / 2 - 1px), transparent calc(var(--loch) / 2 - 1px));
  background-size: var(--loch) 3.4rem;
  background-repeat: repeat-y;
  background-position: top center;
  box-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(26, 37, 51, .12)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .5));
}
.blatt--nacht.blatt--gelocht::before {
  background-image: radial-gradient(circle, var(--nacht-tief) 0 calc(var(--loch) / 2 - 1px), transparent calc(var(--loch) / 2 - 1px));
}

/* Formularkopf: dünne Regel plus Aktenzeichen oben rechts */
.blatt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .7rem;
  margin-bottom: 1.1rem;
}
.blatt--nacht .blatt__kopf { border-bottom-color: rgba(255, 255, 255, .22); }
.blatt__az {
  font-variation-settings: 'wdth' 62;
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .06em;
  color: var(--schiefer);
  white-space: nowrap;
}
.blatt--nacht .blatt__az { color: rgba(255, 255, 255, .6); }

/* ===========================================================================
   Das Prüfsiegel — Signaturkomponente. Rundes Siegel mit umlaufender
   Schrift und dem Signet im Zentrum, in Stempelfarbe Petrol.
   =========================================================================== */
.siegel { display: block; color: var(--petrol); filter: drop-shadow(0 3px 6px rgba(66, 172, 159, .3)); }
.siegel__ring { fill: none; stroke: currentColor; }
.siegel__kern { fill: currentColor; }
.siegel__schrift { fill: currentColor; font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; }
.siegel__marke { stroke: var(--weiss); }

/* Das anklickbare Prüfsiegel im Aktenvermerk trägt eigene 3D-Tiefe: es
   kippt unter dem Zeiger wie ein geprägtes Medaillon (JS, transform per
   Pointerposition) und schlägt beim Erscheinen sowie auf Klick als echter
   3D-Stempel ein (siegel--stempelfall, unten). perspective sitzt auf
   .vermerk__kopf, preserve-3d hier, damit das Kippen des Knopfs und der
   Einschlag des Siegel-SVG in derselben Tiefe rendern. */
.siegel--klick {
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transform-style: preserve-3d;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.siegel--klick:hover, .siegel--klick:focus-visible { filter: drop-shadow(0 5px 10px rgba(66, 172, 159, .42)); }
.siegel--klick::after {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66, 172, 159, .55), rgba(66, 172, 159, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

/* Das Fortschritt-Siegel — fest positioniert, unabhängig vom Seiteninhalt,
   auf jeder Seite durchgehend sichtbar statt Teil eines Abschnitts. Der Ring
   füllt sich mit dem tatsächlichen Lesefortschritt der Seite, das Siegel im
   Zentrum dreht sich in echtem 3D (perspective + preserve-3d) genau einmal
   über die ganze Seitenlänge — ein Zifferblatt, kein Zierstück. Klick
   springt zurück zum Seitenanfang, wo Telefonnummer und Hauptkontakt stehen
   (Product Principle „Erreichbarkeit schlägt Darstellung"). JS schreibt nur
   bei tatsächlichem Scrollen, per rAF gebündelt statt in einer Dauerschleife,
   und ausschließlich transform plus eine einzelne CSS-Variable je Element —
   kein Schatten- oder Filter-Loop wie in früheren Fassungen. */
.fortschritt-siegel {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 45;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--wand);
  box-shadow: 0 8px 22px rgba(26, 37, 51, .22);
  cursor: pointer;
  perspective: 900px;
  transition: box-shadow .2s var(--ease-weich), opacity .2s var(--ease-weich), transform .2s var(--ease-weich);
}
.fortschritt-siegel:hover, .fortschritt-siegel:focus-visible { box-shadow: 0 10px 26px rgba(26, 37, 51, .3); }
/* Weicht dem primären CTA-Button aus, statt ihn zu überdecken (siehe
   verdeckungPruefen() in formular.js) — bleibt technisch vorhanden
   (weiterhin fokussierbar), damit Tastaturnutzer es nicht plötzlich
   verlieren, entzieht sich aber sichtbar und dem Zeiger. */
.fortschritt-siegel.ist-verdeckt { opacity: 0; transform: scale(.8); pointer-events: none; }
@media (max-width: 59.99rem) {
  .fortschritt-siegel { width: 3.4rem; height: 3.4rem; bottom: calc(4.6rem + 1.1rem); }
}
.fortschritt-siegel__ring, .fortschritt-siegel__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fortschritt-siegel__spur { fill: none; stroke: var(--linie); stroke-width: 5; }
.fortschritt-siegel__fuellung {
  fill: none;
  stroke: var(--petrol);
  stroke-width: 5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 276.46;
  stroke-dashoffset: var(--fortschritt-versatz, 276.46);
}
.fortschritt-siegel__bild {
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(var(--fortschritt-drehung, 0deg));
  will-change: transform;
}

/* ===========================================================================
   Sprungmarke — erste fokussierbare Stelle, nur sichtbar bei Tastaturfokus.
   =========================================================================== */
.sprung {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--nacht);
  color: var(--weiss);
  padding: .8rem 1.2rem;
  text-decoration: none;
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  transition: top .18s var(--ease-weich);
}
.sprung:focus-visible { top: 1rem; outline-color: var(--weiss); }

/* Nur für Screenreader — visuell verborgen, im Fokus- und Vorleseweg erhalten. */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   Nutzenzeile — schmaler Streifen über der Kopfleiste mit bestätigten
   Kernfakten. Sticky-Verzicht bewusst: nur die Kopfleiste selbst bleibt haften.
   =========================================================================== */
.nutzenzeile {
  background: var(--nacht-marke);
  color: rgba(255, 255, 255, .82);
  font-variation-settings: 'wdth' 70;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-micro);
  letter-spacing: .1em;
  border-bottom: 2px solid var(--petrol);
}
.nutzenzeile__innen {
  width: 100%;
  margin-inline: auto;
  padding: .5rem var(--rand);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}
.nutzenzeile__punkt { color: var(--petrol); margin-right: .5em; }

/* ===========================================================================
   Kopfleiste
   =========================================================================== */
.schiene {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--wand);
  border-top: 3px solid var(--petrol);
  border-bottom: 1px solid var(--linie);
}
.schiene__innen {
  width: 100%;
  margin-inline: auto;
  padding: .7rem var(--rand);
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
}
.signet { display: flex; align-items: center; gap: .65rem; text-decoration: none; flex: 0 0 auto; }
.signet__mark { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; display: block; object-fit: contain; }
.signet__wort { display: grid; line-height: 1.05; }
.signet__name { font-variation-settings: 'wdth' 108; font-weight: 800; text-transform: uppercase; font-size: var(--text-emphasis); letter-spacing: .03em; }
.signet__zusatz { font-variation-settings: 'wdth' 62; font-weight: 600; text-transform: uppercase; font-size: var(--text-micro); letter-spacing: .17em; color: var(--schiefer); }

.wege-fach { display: contents; }
.wege { display: flex; gap: clamp(.6rem, 1.8vw, 1.8rem); margin-left: auto; align-items: center; }
.wege a {
  font-variation-settings: 'wdth' 70;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-nav);
  letter-spacing: .12em;
  text-decoration: none;
  padding: .55rem .1rem;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease-weich), color .2s var(--ease-weich);
}
.wege a:hover { border-bottom-color: var(--petrol); }
.wege a[aria-current='page'] { border-bottom-color: var(--petrol); }

/* Der Umschalter — unterhalb von 60rem ersetzt eine echte Aktenlasche, die
   sich aufklappt, die gestauchte Kopie der Desktop-Zeile. Drei Linien
   morphen zum Kreuz statt eines Icon-Fonts, ganz in der Formularwelt. */
.schiene__umschalter {
  display: none;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1.5px solid var(--linie);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  cursor: pointer;
}
.schiene__umschalter:hover, .schiene__umschalter:focus-visible { border-color: var(--petrol); }
.schiene__umschalter-linie {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--nacht);
  transition: transform .25s var(--ease-weich), opacity .2s var(--ease-weich);
}
.schiene__umschalter[aria-expanded='true'] .schiene__umschalter-linie:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.schiene__umschalter[aria-expanded='true'] .schiene__umschalter-linie:nth-child(2) { opacity: 0; }
.schiene__umschalter[aria-expanded='true'] .schiene__umschalter-linie:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 59.99rem) {
  .schiene__innen { flex-wrap: wrap; }
  .schiene__umschalter { display: inline-flex; }
  .wege-fach {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease-weich);
    flex-basis: 100%;
    order: 4;
  }
  .schiene__umschalter[aria-expanded='true'] + .wege-fach { grid-template-rows: 1fr; }
  .wege-fach > .wege {
    overflow: hidden;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    margin-top: .5rem;
    border-top: 1px solid var(--linie);
  }
  .wege-fach > .wege a {
    padding: .85rem .1rem;
    border-bottom: 1px solid var(--linie);
  }
  .wege-fach > .wege a[aria-current='page'] { color: var(--petrol-tief); }
}
@media (prefers-reduced-motion: reduce) { .wege-fach { transition: none; } }

.schiene__ruf {
  display: none;
  flex: 0 0 auto;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .95rem;
  text-decoration: none;
  border: 1.5px solid var(--petrol);
  color: var(--petrol);
  transition: background-color .2s var(--ease-weich), color .2s var(--ease-weich);
}
.schiene__ruf .zahl { font-variation-settings: 'wdth' 96; font-weight: 800; font-size: var(--text-emphasis); }
.schiene__ruf:hover { background: var(--petrol); color: var(--weiss); }
@media (min-width: 60rem) { .schiene__ruf { display: inline-flex; } }

@media (max-width: 27rem) {
  .schiene__innen { padding-block: .6rem; gap: .5rem; }
  .signet { gap: .5rem; }
  .signet__mark { width: 2.1rem; height: 2.1rem; }
  .signet__name { font-size: var(--text-xs); }
  .signet__zusatz { display: none; }
}

/* ===========================================================================
   Erster Blick — der Vorgang
   =========================================================================== */
.giebelfeld { padding-block: clamp(2rem, 5vw, 3.75rem); }
.vorgang {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .vorgang { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}

.formularkopf {
  padding: clamp(1.7rem, 3.4vw, 2.6rem) clamp(1.5rem, 3.2vw, 2.4rem);
}
.formularkopf__positionen { display: grid; gap: .05em; margin-bottom: 1.2rem; }
.formularkopf__positionen span:nth-child(1) { font-size: var(--text-display); }
.formularkopf__positionen span:nth-child(2) { font-size: var(--text-display); font-variation-settings: 'wdth' 96; color: var(--petrol-dunkel); }
.formularkopf__positionen span:nth-child(3) { font-size: var(--text-display); font-variation-settings: 'wdth' 125; }
.formularkopf__claim {
  font-variation-settings: 'wdth' 96;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: var(--text-lg);
  color: var(--petrol);
  margin-bottom: 1.1rem;
}
.formularkopf__strap {
  font-variation-settings: 'wdth' 90;
  font-size: var(--text-body);
  color: var(--schiefer);
  max-width: 42ch;
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
}
/* Rechte Vorgangs-Spalte: Aktenvermerk und Hero-Foto bilden eine eigene
   Stapelspalte, damit das Foto direkt unter dem Aktenvermerk sitzt statt
   an der (meist grösseren) Höhe des Formularkopfs auszurichten. */
.vorgang__spalte { display: grid; gap: clamp(.9rem, 1.8vw, 1.4rem); align-content: start; }

/* Hero-Foto — zeigt das ganze Bild statt eines schmalen Ausschnitts. */
.hero-foto img { width: 100%; height: auto; display: block; filter: grayscale(.12) contrast(1.03); }

/* Vertrauenssignale — höchstens drei, als schlichte Zeile, keine Badges. */
.vertrauen { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin-top: 1.1rem; }
.vertrauen__punkt { display: flex; align-items: baseline; gap: .45rem; font-variation-settings: 'wdth' 90; font-size: var(--text-meta); color: var(--nacht); }
.vertrauen__punkt::before { content: ''; width: .5rem; height: .5rem; background: var(--petrol); flex: 0 0 auto; transform: translateY(-.15em); }

/* Primärer CTA „Projekt anfragen" — massive Petrolfläche, deutlich vor dem
   Prüfsiegel und vor der Notdienst-Karte in der visuellen Reihenfolge. */
.cta-primaer {
  margin-top: 1.3rem;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.8rem, 3.4vw, 2.6rem);
  background: var(--petrol-tief);
  color: var(--weiss);
  text-decoration: none;
  text-align: center;
  transition: transform .2s var(--ease-weich);
}
.cta-primaer:hover, .cta-primaer:focus-visible { transform: translateY(-2px); }
.cta-primaer:active { transform: translateY(0); }
.cta-primaer__was { display: grid; gap: .2rem; }
.cta-primaer__label { font-variation-settings: 'wdth' 108; font-weight: 800; text-transform: uppercase; font-size: var(--text-headline-3xs); letter-spacing: -.005em; }
.cta-primaer__zusatz { font-variation-settings: 'wdth' 90; font-size: var(--text-meta); color: rgba(255, 255, 255, .9); }
.cta-primaer__pfeil { font-size: var(--text-lg); flex: 0 0 auto; }

.vermerk { padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.4rem, 2.8vw, 2rem); display: grid; gap: .85rem; }
.vermerk__kopf { display: flex; align-items: center; gap: .8rem; perspective: 900px; }
.vermerk__siegel { width: 2.9rem; height: 2.9rem; flex: 0 0 auto; }
.vermerk__satz { font-size: var(--text-headline-2xs); }
.vermerk__zeit { font-variation-settings: 'wdth' 90; font-size: var(--text-meta); color: rgba(255, 255, 255, .78); }
.vermerk__felder { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: .85rem; display: grid; gap: .5rem; }

.hero-ruf {
  margin-top: clamp(.9rem, 1.8vw, 1.3rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.3rem, 2.4vw, 1.8rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  border-top: 3px solid var(--petrol);
  transition: transform .2s var(--ease-weich);
}
.hero-ruf:hover, .hero-ruf:focus-visible { transform: translateY(-2px); }
.hero-ruf__was { display: grid; gap: .2rem; }
/* Geteilte Variante: eigene Anruf- und WhatsApp-Zeile im selben Blatt statt
   eines einzigen Links — für Karten, die zusätzlich zum Anruf einen
   echten WhatsApp-Link zeigen (sonst bliebe .hero-ruf ein einzelner Link,
   wie beim Badplaner-Teaser oder den reinen "Jetzt anrufen"-Karten). */
.hero-ruf--geteilt { display: grid; gap: .9rem; }
.hero-ruf--geteilt:hover, .hero-ruf--geteilt:focus-visible { transform: none; }
.hero-ruf__anruf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  transition: transform .2s var(--ease-weich);
}
.hero-ruf__anruf:hover, .hero-ruf__anruf:focus-visible { transform: translateY(-2px); }
.hero-ruf__label { font-variation-settings: 'wdth' 62; font-weight: 700; text-transform: uppercase; font-size: var(--text-label); letter-spacing: .16em; color: var(--schiefer); }
.hero-ruf__nummer { font-variation-settings: 'wdth' 108; font-weight: 800; font-size: var(--text-headline-2xs); color: var(--nacht); }
.hero-ruf__siegel { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; }
.hero-ruf__whatsapp {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linie);
  text-decoration: none;
  color: var(--nacht);
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: color .15s var(--ease-weich);
}
.hero-ruf__whatsapp:hover, .hero-ruf__whatsapp:focus-visible { color: var(--petrol-tief); }
.hero-ruf__whatsapp-icon { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; fill: var(--petrol-tief); }

/* Qualifikation & Kontakt — kompakte Referenzkarte im Formularkopf, echte
   belegte Angaben statt Fuellstoff (siehe PRODUCT.md, Evidence on Hand). */
.qualifikation {
  margin-top: clamp(.9rem, 1.8vw, 1.3rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.3rem, 2.4vw, 1.8rem);
  border-top: 3px solid var(--petrol);
  display: grid;
  gap: .7rem;
}
.qualifikation__titel { font-size: var(--text-headline-3xs); margin-top: .3rem; }
.qualifikation .feld { margin-top: .3rem; }

/* ===========================================================================
   Formularfelder — Schreibmaschinen-Unterstreichung statt Tabellenraster
   =========================================================================== */
.feld { display: grid; gap: .5rem; }
.feld__zeile { display: grid; grid-template-columns: 7.5rem 1fr; gap: .3rem 1rem; align-items: baseline; padding-bottom: .4rem; border-bottom: 1px dashed var(--linie); }
.blatt--nacht .feld__zeile { border-bottom-color: rgba(255, 255, 255, .28); }
@media (max-width: 26rem) { .feld__zeile { grid-template-columns: 1fr; gap: .05rem; } }
.feld__wert { font-variation-settings: 'wdth' 92; font-weight: 600; font-size: var(--text-meta); }

/* ===========================================================================
   Bänder
   =========================================================================== */
.band { padding-block: clamp(2.75rem, 7vw, 5.25rem); }
.band--kompakt { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.band--nacht { background: var(--nacht-marke); color: var(--weiss); border-top: 3px solid var(--petrol); }
.band--wand { background: var(--wand); }
.band--linie { border-top: 1px solid var(--linie); }
.band__kopf { display: grid; gap: clamp(.8rem, 1.8vw, 1.1rem); max-width: 46rem; margin-bottom: clamp(1.9rem, 4vw, 3rem); }
.band--kompakt .band__kopf { margin-bottom: clamp(1.3rem, 2.6vw, 1.9rem); }
.band__titel { font-size: var(--text-headline); }
.band__text { font-variation-settings: 'wdth' 92; color: var(--schiefer); max-width: 62ch; }
.band--nacht .band__text { color: rgba(255, 255, 255, .78); }

/* ===========================================================================
   Positionen (Gewerke) — drei Formularpositionen mit Feldliste
   =========================================================================== */
.positionswand { display: grid; gap: clamp(.9rem, 1.8vw, 1.35rem); grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  /* minmax(0, 1fr) statt 1fr: 1fr allein hat eine implizite Mindestbreite in
     Höhe des Zeleninhalts (minmax(auto, 1fr)) — bei ~900-1024px reichte der
     Platz für die dritte Karte (Klima) nicht mehr, die Karte sprengte den
     Container um bis zu 142px statt zu schrumpfen. minmax(0, 1fr) erlaubt
     das Schrumpfen unter die Inhaltsbreite, der Text bricht dann intern um. */
  .positionswand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.position {
  padding: clamp(1.5rem, 3vw, 2.3rem) clamp(1.4rem, 2.6vw, 2.1rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-content: space-between;
  text-decoration: none;
  border-top: 3px solid var(--petrol);
  transition: transform .22s var(--ease-weich), box-shadow .22s var(--ease-weich);
}
.position:hover, .position:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 0 var(--linie), 0 20px 32px rgba(26, 37, 51, .14); }
.position__nr { font-variation-settings: 'wdth' 108; font-weight: 800; color: var(--petrol-dunkel); font-size: var(--text-emphasis); }
.position__name { font-size: var(--text-headline); }
.position__satz { font-variation-settings: 'wdth' 90; color: var(--schiefer); max-width: 42ch; }
.blatt--nacht .position__satz { color: rgba(255, 255, 255, .82); }

/* ===========================================================================
   Vorgangsschritte — nummeriert wie Formularpositionen 1–3
   =========================================================================== */
.schritte { display: grid; gap: 0; border-top: 2px solid var(--nacht); }
@media (min-width: 52rem) { .schritte { grid-template-columns: repeat(3, 1fr); } }
.schritt { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 2.8vw, 2.2rem) 0; border-bottom: 1px solid var(--linie); align-content: start; }
@media (min-width: 52rem) { .schritt { border-bottom: 0; border-right: 1px solid var(--linie); padding-right: clamp(1.2rem, 2.4vw, 2rem); } .schritt:last-child { border-right: 0; } }
.schritt__nr { font-variation-settings: 'wdth' 116; font-weight: 800; font-size: var(--text-headline-lg); line-height: .8; color: var(--petrol-dunkel); grid-row: span 2; font-variant-numeric: tabular-nums; }
.schritt__titel { font-variation-settings: 'wdth' 98; font-weight: 800; text-transform: uppercase; font-size: var(--text-emphasis); letter-spacing: .04em; align-self: end; }
.schritt__text { font-variation-settings: 'wdth' 92; color: var(--schiefer); font-size: var(--text-meta); }

/* ===========================================================================
   Bereitschaft
   =========================================================================== */
.plan { display: grid; gap: clamp(.9rem, 1.8vw, 1.3rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .plan { grid-template-columns: repeat(2, 1fr); } }
.plan__eintrag { padding: clamp(1.4rem, 2.8vw, 2.1rem) clamp(1.3rem, 2.4vw, 1.9rem); display: grid; gap: .6rem; align-content: start; }
.plan__was { font-variation-settings: 'wdth' 62; font-weight: 700; text-transform: uppercase; font-size: var(--text-label); letter-spacing: .17em; color: var(--schiefer); }
.blatt--nacht .plan__was { color: rgba(255, 255, 255, .72); }
.plan__wert { font-variation-settings: 'wdth' 104; font-weight: 800; font-size: var(--text-headline-3xs); line-height: 1.12; }
.plan__zusatz { font-variation-settings: 'wdth' 90; font-size: var(--text-meta); color: var(--schiefer); }
.blatt--nacht .plan__zusatz { color: rgba(255, 255, 255, .78); }

/* ===========================================================================
   Über mich / Vorstellung
   =========================================================================== */
.vorstellung { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 54rem) { .vorstellung { grid-template-columns: minmax(0, .82fr) minmax(0, 1.4fr); align-items: stretch; } }
.vorstellung--teaser .vorstellung__foto { aspect-ratio: 16 / 11; }
.vorstellung__foto { aspect-ratio: 4 / 5; overflow: hidden; }
.vorstellung__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.12) contrast(1.03); }
.vorstellung__text { padding: clamp(1.6rem, 3.2vw, 2.4rem) clamp(1.4rem, 2.6vw, 2rem); display: grid; gap: 1rem; align-content: center; }
.vorstellung__lead { font-size: var(--text-headline-xs); }
.vorstellung__text p:not(.vorstellung__lead) { font-variation-settings: 'wdth' 90; color: var(--schiefer); max-width: 58ch; }
.vorstellung__mehr { font-variation-settings: 'wdth' 96; font-weight: 800; color: var(--petrol); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: .04em; }

/* ===========================================================================
   Fallstudie — eine hervorgehobene, echte Projektakte mit Vorher/Nachher,
   Ausgangslage und Lösung. Leere Felder (Dauer, Kundenstimme) werden
   ausgeblendet statt erfunden, siehe CONTENT_REQUIRED.md.
   =========================================================================== */
.fallstudie { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 58rem) { .fallstudie { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; } }
.fallstudie__bild { overflow: hidden; }
.fallstudie__bild img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.12) contrast(1.03); }
.fallstudie__akte { padding: clamp(1.7rem, 3.2vw, 2.6rem) clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: 1.1rem; align-content: start; }
.fallstudie__gewerk { font-variation-settings: 'wdth' 108; font-weight: 800; color: var(--petrol-dunkel); font-size: var(--text-emphasis); }
.fallstudie__titel { font-size: var(--text-headline-sm); }
.fallstudie__felder { border-top: 1px solid var(--linie); padding-top: 1rem; }

/* ===========================================================================
   Projekte
   =========================================================================== */
.projekt-gitter { display: grid; gap: clamp(.9rem, 1.8vw, 1.35rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52rem) { .projekt-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .projekt-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projekt { margin: 0; padding: .5rem .5rem 0; display: grid; }
.projekt img { width: 100%; height: auto; display: block; box-shadow: 0 0 0 1px var(--linie); filter: grayscale(.12) contrast(1.03); }
/* Die Quellen haben sehr unterschiedliche Hoch- und Querformate. Im
   Projektregister ist der Regler jedoch ein einheitliches Sichtfenster:
   kompakt genug, dass Vorher, Nachher und Beschreibung gemeinsam erfassbar
   bleiben. Die Bilder selbst werden nicht beschnitten gespeichert, sondern
   nur innerhalb des Reglers sauber gefasst. */
.projekt > :is(.vergleich, img) { width: 100%; aspect-ratio: 4 / 3 !important; height: auto; object-fit: contain; background: var(--wand); }
.blatt--nacht > :is(.vergleich, img) { background: var(--nacht-marke); }
.projekt > .vergleich .vergleich__bild { width: 100%; height: 100%; object-fit: contain; }
.projekt figcaption { padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(.4rem, 1vw, .7rem) clamp(1.3rem, 2.4vw, 1.8rem); display: grid; gap: .35rem; }
.projekt__was { font-variation-settings: 'wdth' 62; font-weight: 700; text-transform: uppercase; font-size: var(--text-label); letter-spacing: .17em; color: var(--schiefer); }
.blatt--nacht .projekt__was { color: rgba(255, 255, 255, .78); }
.projekt__satz { font-variation-settings: 'wdth' 92; font-size: var(--text-emphasis); }

/* ===========================================================================
   Vergleichsregler — Vorher/Nachher als ziehbarer Regler statt zweier fester
   Einzelbilder. Ruheposition 50% steht bereits per CSS fest, ganz ohne
   Skript: ein echter, statischer Vergleich, nur nicht verschiebbar. Das
   Skript (siehe formular.js, vergleichRegler()) macht ihn per Maus, Touch
   und Tastatur bedienbar und schaltet Regler/Beschriftung erst dann sichtbar
   (.vergleich--aktiv), damit kein untätiges Bedienelement angekündigt wird,
   wenn kein JavaScript läuft. */
.vergleich { position: relative; overflow: hidden; width: 100%; box-shadow: 0 0 0 1px var(--linie); touch-action: pan-y; -webkit-user-select: none; user-select: none; --pos: 50%; }
/* aspect-ratio greift nur, solange die Höhe sonst unbestimmt bliebe (ein-
   spaltiges Mobile-Layout) — sobald `.fallstudie` ab 58rem zweispaltig wird
   und die Bildspalte per align-items:stretch eine echte Höhe von der
   Textspalte bekommt, gewinnt die bestimmte Grid-Höhe automatisch gegen den
   aspect-ratio-Wert. Ohne diesen Wert würde die Karte im einspaltigen
   Layout stattdessen dem sehr hochformatigen Seitenverhältnis des rohen
   Vorher-Zuschnitts folgen und unangemessen hoch wirken. */
.fallstudie__bild .vergleich { height: 100%; aspect-ratio: 1400 / 1290; }
.vergleich--aktiv { cursor: ew-resize; }
.vergleich__bild { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.12) contrast(1.03); pointer-events: none; }
.vergleich__nachher { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.vergleich.ist-fehlerhaft .vergleich__nachher { display: none; }

/* Deckkraft .7 statt eines runden Werts wie .5 — bei .55 fällt der Kontrast
   über hellen Bildstellen (z. B. Fensterlicht) auf rund 3.8:1, unter der
   AA-Schwelle 4.5:1 für die kleine Beschriftung. Mit weißem Aktenblatt-Grund
   dahinter läge WCAG-Kontrast bei .7 sicher über 7:1; als Untergrenze zählt
   hier aber die hellste denkbare Fotostelle, gemessen mit derselben
   Leuchtdichteformel wie beim Petrol-Kontrastfund dieser Sitzung. */
.vergleich__marke { position: absolute; top: .7rem; z-index: 1; font-variation-settings: 'wdth' 62; font-weight: 700; text-transform: uppercase; font-size: var(--text-label); letter-spacing: .14em; color: var(--weiss); background: rgba(26, 37, 51, .7); padding: .3rem .6rem; pointer-events: none; display: none; }
.vergleich--aktiv .vergleich__marke { display: block; }
.vergleich__marke--vorher { left: .7rem; }
.vergleich__marke--nachher { right: .7rem; }

.vergleich__griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: var(--weiss); transform: translateX(-50%); display: none; }
.vergleich--aktiv .vergleich__griff { display: block; }
.vergleich__griff::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem;
  transform: translate(-50%, -50%);
  background: var(--weiss);
  box-shadow: 0 1px 0 var(--linie), 0 6px 14px rgba(26, 37, 51, .28);
}
.vergleich__griff::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 1rem;
  background: var(--nacht);
  transform: translate(-50%, -50%);
  box-shadow: -6px 0 0 var(--nacht), 6px 0 0 var(--nacht);
}
.vergleich__griff:hover::before { box-shadow: 0 1px 0 var(--linie), 0 8px 18px rgba(26, 37, 51, .34); }
.vergleich__griff:focus-visible { outline: 3px solid var(--petrol-tief); outline-offset: 3px; }
/* Übergang nur für den diskreten Tastaturschritt (siehe formular.js) — beim
   Ziehen selbst würde jede weitere Zeigerbewegung ihn erneut anstoßen und
   sich als Verzögerung hinter dem Finger/Zeiger aufsummieren. */
@media (prefers-reduced-motion: no-preference) { .vergleich--tastaturschritt .vergleich__nachher { transition: clip-path .12s var(--ease-weich); } }

.einsatz-streifen { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .einsatz-streifen { grid-template-columns: repeat(3, 1fr); } }
.einsatz-streifen img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--linie); filter: grayscale(.15) contrast(1.03); }

/* ===========================================================================
   Abschluss und Fuß
   =========================================================================== */
.abschluss { padding: clamp(2rem, 4.6vw, 3.2rem) clamp(1.5rem, 3rem, 2.4rem); display: grid; gap: clamp(1.1rem, 2.4vw, 1.7rem); align-items: center; }
@media (min-width: 56rem) { .abschluss { grid-template-columns: minmax(0, 1fr) auto; } }
.abschluss__satz { font-size: var(--text-headline-sm); max-width: 22ch; }
.abschluss__zusatz { font-variation-settings: 'wdth' 90; color: var(--schiefer); max-width: 46ch; margin-top: .7rem; }

.fuss { background: var(--nacht-marke); color: rgba(255, 255, 255, .8); padding-block: clamp(2.2rem, 5vw, 3.4rem) clamp(6rem, 8vw, 3rem); font-size: var(--text-meta); border-top: 3px solid var(--petrol); }
.fuss__gitter { display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .fuss__gitter { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.fuss a { color: var(--weiss); }
.fuss a:hover { text-decoration-color: var(--petrol); }
.fuss__marke { display: block; width: clamp(11rem, 22vw, 13.5rem); height: auto; }
.fuss__claim { font-variation-settings: 'wdth' 92; font-weight: 600; color: var(--weiss); max-width: 30ch; margin-top: .6rem; }
.fuss__liste { display: grid; gap: .4rem; }
.fuss__liste li { display: flex; align-items: baseline; gap: .55em; }
.fuss__liste li::before { content: ''; width: .4rem; height: .4rem; flex: 0 0 auto; background: var(--petrol); transform: translateY(-.1em); }
.fuss__schluss { margin-top: clamp(1.7rem, 3.4vw, 2.6rem); padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--text-xs); color: rgba(255, 255, 255, .6); }

/* Feste Aktionsleiste auf dem Handy — zwei gleichwertige Ziele, Anrufen und
   Anfrage, je mindestens 44px hoch. */
.aktionsleiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--nacht-marke);
  border-top: 2px solid var(--petrol);
  box-shadow: 0 -8px 20px rgba(26, 37, 51, .3);
}
.aktionsleiste__aktion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 3.25rem;
  padding: .55rem .5rem;
  text-decoration: none;
  color: var(--weiss);
  text-align: center;
}
.aktionsleiste__aktion:first-child { border-right: 1px solid rgba(255, 255, 255, .16); }
.aktionsleiste__aktion--akzent { background: var(--petrol); }
.aktionsleiste__label { font-variation-settings: 'wdth' 62; font-weight: 700; text-transform: uppercase; font-size: var(--text-micro); letter-spacing: .1em; color: rgba(255, 255, 255, .78); }
.aktionsleiste__aktion--akzent .aktionsleiste__label { color: rgba(255, 255, 255, .9); }
.aktionsleiste__wert { font-variation-settings: 'wdth' 100; font-weight: 800; font-size: var(--text-xs); line-height: 1.15; }
@media (min-width: 60rem) { .aktionsleiste { display: none; } .fuss { padding-bottom: clamp(2.2rem, 5vw, 3.4rem); } }

/* ===========================================================================
   Anfrageformular — Vorgang mit sichtbaren Positionen statt JS-Assistent.
   =========================================================================== */
.anfrage-formular { display: grid; gap: clamp(1.25rem, 2.6vw, 1.9rem); }
.anfrage-schritt {
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 2.6vw, 2rem);
  display: grid;
  gap: 1.1rem;
  border: 0;
  margin: 0;
}
.anfrage-schritt__kopf { display: flex; align-items: baseline; gap: .9rem; }
.anfrage-schritt__nr { font-variation-settings: 'wdth' 116; font-weight: 800; font-size: var(--text-headline-3xs); color: var(--petrol-dunkel); font-variant-numeric: tabular-nums; }
.anfrage-schritt legend.anfrage-schritt__titel,
.anfrage-schritt__titel {
  font-variation-settings: 'wdth' 108; font-weight: 800; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; padding: 0;
}
.anfrage-schritt__hinweis { font-variation-settings: 'wdth' 90; font-size: var(--text-meta); color: var(--schiefer); margin-top: -.5rem; }
.blatt--nacht .anfrage-schritt__hinweis { color: rgba(255, 255, 255, .78); }
.anfrage-schritt__hinweis--warnung { color: var(--fehler); }

.feld-gruppe { display: grid; gap: .45rem; }
.feld-gruppe__label { font-variation-settings: 'wdth' 70; font-weight: 700; font-size: var(--text-meta); display: flex; gap: .4rem; align-items: baseline; }
.feld-gruppe__optional { font-variation-settings: 'wdth' 62; font-weight: 500; font-size: var(--text-xs); color: var(--schiefer); text-transform: none; letter-spacing: 0; }

.eingabe {
  font: inherit;
  font-variation-settings: 'wdth' 92;
  color: var(--nacht);
  background: var(--wand);
  border: 0;
  border-bottom: 2px solid var(--linie);
  padding: .7rem .1rem;
  width: 100%;
  transition: border-color .15s var(--ease-weich);
}
.eingabe:focus-visible { border-bottom-color: var(--petrol-tief); outline: 2px solid var(--petrol-tief); outline-offset: 3px; }
.eingabe:disabled { color: var(--schiefer); cursor: not-allowed; opacity: .6; }
textarea.eingabe { resize: vertical; min-height: 6.5rem; }
.eingabe[aria-invalid='true'] { border-bottom-color: var(--fehler); }

.wahl-gruppe { display: flex; flex-wrap: wrap; gap: .6rem; }
.wahl {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1rem;
  border: 1.5px solid var(--linie);
  background: var(--weiss);
  cursor: pointer;
  font-variation-settings: 'wdth' 90;
  font-size: var(--text-meta);
  transition: border-color .15s var(--ease-weich), background-color .15s var(--ease-weich);
}
.wahl:has(input:checked) { border-color: var(--petrol); background: color-mix(in srgb, var(--petrol) 8%, var(--weiss)); }
.wahl:has(input:focus-visible) { outline: 3px solid var(--petrol-tief); outline-offset: 2px; }
.wahl input { margin: 0; accent-color: var(--petrol); width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

.fehlertext { font-variation-settings: 'wdth' 90; font-size: var(--text-xs); color: var(--fehler); display: none; align-items: center; gap: .4rem; }
.eingabe[aria-invalid='true'] + .fehlertext,
.wahl-gruppe[data-invalid='true'] + .fehlertext { display: flex; }

.absenden {
  justify-self: start;
  padding: clamp(1rem, 2vw, 1.3rem) clamp(1.8rem, 3vw, 2.4rem);
  background: var(--petrol);
  color: var(--weiss);
  border: 0;
  font-variation-settings: 'wdth' 108;
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-meta);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .15s var(--ease-weich), transform .15s var(--ease-weich);
}
.absenden:hover { background: var(--petrol-tief); transform: translateY(-2px); }
.absenden:active { transform: translateY(0); background: var(--petrol-dunkel); }
.absenden:disabled { background: var(--schiefer); cursor: not-allowed; transform: none; }

.formular-status {
  padding: 1rem 1.2rem;
  border-top: 3px solid var(--petrol);
  background: var(--wand);
  font-variation-settings: 'wdth' 90;
  font-size: var(--text-meta);
  display: none;
  gap: .3rem;
}
.formular-status[data-status='erfolg'] { display: grid; }
.formular-status[data-status='fehler'] { display: grid; border-top-color: var(--fehler); }
.formular-status__titel { font-variation-settings: 'wdth' 108; font-weight: 800; text-transform: uppercase; font-size: var(--text-xs); }

/* ===========================================================================
   Hinweisblatt für fehlende Rechtstexte
   =========================================================================== */
.hinweis { padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.3rem, 2.6vw, 2rem); display: grid; gap: .7rem; border: 2px dashed var(--petrol); background: var(--weiss); }
.hinweis__marke { font-variation-settings: 'wdth' 62; font-weight: 700; text-transform: uppercase; font-size: var(--text-label); letter-spacing: .17em; color: var(--petrol-tief); }
.fliess { max-width: 68ch; display: grid; gap: 1rem; color: var(--schiefer); }
.fliess strong { color: var(--nacht); }

/* ===========================================================================
   Das Stempeln — Signaturbewegung. Ersetzt "Einhängen": statt sich auf
   eine Niete zu hängen, schlägt jedes Element wie ein echter Stempel auf
   seine Ruheposition ein, respektiert reduced-motion vollständig.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-stempel].ist-gestempelt {
    animation: stempeln .62s var(--ease-stempel) both;
    animation-delay: var(--verzug, 0ms);
  }
  @keyframes stempeln {
    from { transform: scale(1.5) rotate(-9deg); opacity: 0; }
    62%  { transform: scale(.94) rotate(-2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }

  /* Der Siegel-Einschlag — dieselbe Konzeptaussage wie "stempeln" (ein
     Stempel überschießt beim Aufprall), aber in echter 3D-Tiefe, weil das
     Prüfsiegel die eine Signaturkomponente des Systems ist und den
     "Erinnerbarer Moment" der Seite trägt: es fällt aus dem Raum vor der
     Seite auf sie herab und schlägt ein. Der Lichtring (::after) markiert
     den Aufprallmoment. */
  .siegel--klick.siegel--stempelfall .vermerk__siegel {
    animation: stempelfall .78s var(--ease-stempel) both;
  }
  @keyframes stempelfall {
    0%   { opacity: 0; filter: blur(3px) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); transform: translateY(-130%) translateZ(160px) rotateX(48deg) rotateZ(-16deg) scale(1.1); }
    55%  { opacity: 1; filter: blur(0) drop-shadow(0 26px 20px rgba(0, 0, 0, .38)); transform: translateY(3%) translateZ(0) rotateX(-7deg) rotateZ(3deg) scale(1.05); }
    72%  { filter: blur(0) drop-shadow(0 10px 10px rgba(0, 0, 0, .22)); transform: translateY(-1%) translateZ(0) rotateX(3deg) rotateZ(-1deg) scale(.98); }
    100% { opacity: 1; filter: blur(0) drop-shadow(0 3px 6px rgba(66, 172, 159, .3)); transform: translateY(0) translateZ(0) rotateX(0) rotateZ(0) scale(1); }
  }
  .siegel--klick.siegel--stempelfall::after {
    animation: einschlag .5s ease-out both;
    animation-delay: .43s;
  }
  @keyframes einschlag {
    from { opacity: .8; transform: scale(.5); }
    to   { opacity: 0; transform: scale(1.6); }
  }
}