/* ============================================================================
   KLARWERK GEBAEUDEREINIGUNG — Gebaeudereinigung in Hamburg Wandsbek
   Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu
   Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler,
   keine Wisch-Szene, kein `background-attachment: fixed`.

   HERKUNFT
   --------
   1:1 uebertragen aus dem Claude-Design-Entwurf "Klarwerk Onepager.dc.html"
   (Projekt 4def4c09-9924-4a2b-ad48-935f74bda602, die Sicherung lag
   Base64-kodiert vor), Uebernahme am 30.10.2026 nach `docs/regeln/vorlagen.md`
   und den Entscheidungen von Benedikt vom 30.10.2026: Aufbau, Reihenfolge,
   Texte, Farben, Schriften, Groessen, Abstaende, Rundungen, Schatten und
   Bildzuschnitte wie im Entwurf; Schriften 1:1; Kontaktdaten wie im Entwurf;
   Logo als Bild; Bewegung ruhig.

   Der Entwurf laedt Manrope 400-800 von Google Fonts (zwei preconnect und ein
   Stylesheet) und die Laufzeit `support.js`. Er traegt Hover-Angaben der
   Claude-Design-Umgebung an sieben Knoten (Kopf-Knopf, Hero-Knopf,
   Wiederholen-Knopf, Ablauf-Knopf, Formular-Knopf, Impressum,
   Datenschutzerklaerung), elf Bedingungsbloecke sc-if (Menuezeile,
   Kopf-Telefon, Menue-Knopf, Handy-Menue, Wiederholen-Knopf, Antwort einer
   Frage, vier Fehlermeldungen, Statusmeldung), sechs Schleifen sc-for
   (Vorteile, Leistungen, Arbeitsweise, Gruender, Schritte, Fragen), drei
   Keyframes (Wisch-Szene) und eine `DCLogic`-Klasse mit Breitenzustand,
   Menue, Wisch-Szene, Aufklapper und einer Formularpruefung, die das
   Mailprogramm oeffnet. Nichts davon laeuft ohne die Claude-Design-Umgebung
   (V1).

   Alle Masse sind die des Entwurfs, auch sein Kastenmodell: Er setzt global
   `* { box-sizing: border-box }`, das steht hier genauso. Die Zeilenhoehe des
   Fliesstexts bleibt wie dort ungesetzt (`normal`).
   Nachgemessen am 31.10.2026 gegen einen statischen Nachbau des Entwurfs
   (Schleifen und Bedingungen aufgeloest, sonst unveraendert): Bei 320 bis
   1920 px liegt jede Textzeile und jedes Bild unter dem Kopf auf demselben
   Bildpunkt (groesste Abweichung 0,00 px), auch der Formularkasten. Im
   Bildschirmfoto weichen nur die Stellen der Abweichungen 7, 8 und 9 ab.

   Was der Entwurf je nach Fensterbreite per Skript umschaltet, steht hier in
   Media Queries an denselben Grenzen, nur min-width (V5):
     760 px    Bildausschnitt, Schleier und senkrechte Lage im Hero,
               Reihenfolge Text/Bild in "Ueber uns"
     1080 px   Menuezeile und Kopf-Telefon statt Menue-Knopf
   Dazu kommt eine Grenze, die der Entwurf nicht hat (Abweichung 7):
     480 px    Kopf-Knopf "Besichtigung anfragen"
   Die Raster laufen wie im Entwurf ohne Media Query ueber
   `repeat(auto-fit, minmax(min(100%, X), 1fr))`.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Elemente x-dc und helmet, die
       Bedingungsbloecke, die Schleifen, die Platzhalter in doppelten
       geschweiften Klammern, die Hover-Angaben, `onClick` (8x), `onChange`
       (7x), `onSubmit`, `DCLogic`, `support.js` und das Werkzeug-Skript von
       Claude Design sind weg. Inline-Stile sind Klassen mit den Werten aus
       `:root`, die Hover-Angaben sind `:hover`, die Listen ausgeschrieben.
       Die beiden globalen Regeln des Entwurfs stehen in `:where()`:
       `a:hover { color: #0B6E8E }` wirkte im Entwurf nur auf die zwei
       Verweise ohne eigene Farbe ("040 123456789" hinter "oder direkt
       anrufen" und "Datenschutzerklaerung" in der Einwilligung), weil jeder
       andere seine Farbe inline setzt und inline gewinnt. Und
       `:focus-visible { border-radius: 4px }` rundete nur, was keine eigene
       Rundung hat; Knoepfe (999 px) und Felder (6 px) behielten ihre. Mit
       `:where()` hat die Regel das Gewicht 0, jede Klasse gewinnt, das Bild
       ist dasselbe. `-webkit-backdrop-filter` steht neben dem
       `backdrop-filter` des Entwurfs, damit aeltere Safari die Kopfleiste
       genauso weichzeichnen.
    2. SCHRIFT SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die Familie
       und die Schnitte des Entwurfs: Manrope 400 bis 800 als eine variable
       Datei (traegt wght 200-800, freigegeben 400-800 wie im Entwurf
       bestellt), latin-Teilmenge mit demselben `unicode-range` wie bei
       Google, 24 532 B, Budget 120 KB. Kein preconnect, kein Stylesheet von
       Google, kein kursiver Schnitt (der Entwurf nutzt keinen). Der Pfeil
       U+2192 in den beiden Knoepfen liegt ausserhalb der latin-Teilmenge;
       ihn zeichnet wie im Entwurf die Ersatzschrift ("Segoe UI" bzw.
       Systemschrift).
    3. VERMERK-LEISTE UND UMBRANDUNG (A17, V14, V19). Die feste Leiste ist
       26 px hoch (--notice). Deshalb beginnen Seite und Kopfleiste 26 px
       tiefer, die Sprungziele halten 110 statt 84 px Abstand, und #top haelt
       26 px, damit der Logo-Verweis wie im Entwurf ganz oben landet.
    4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und
       og:description enden auf "Fiktives Beispielprojekt."
    5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien unter img/ statt
       images/, WebP bleibt WebP, PNG bleibt PNG. Das Titelbild ist von
       2400 x 1018 auf 1920 x 814 px verkleinert (102 446 B, Budget 250 KB),
       gleiches Seitenverhaeltnis; `width`/`height` im Markup nennen die
       echten Masse. Genau ein Bild vorgeladen, das Titelbild, wie im Entwurf
       (V18); og:image zeigt auf img/hero-altbau.webp. `decoding="async"` an
       allen Bildern ausser dem Titelbild.
    6. WISCH-SZENE UND "Nochmal drueberwischen" ENTFALLEN (V7, V12,
       Entscheidung 5). Der Entwurf spielt 0,6 s nach dem Laden 1,8 s lang
       eine Szene ueber dem Titelbild ab (Schleier mit clip-path, Abzieher,
       Funkeln; drei Keyframes) und bietet einen Knopf zum Wiederholen. Das
       ist Bewegung ueber dem LCP-Element und laenger als 600 ms, in der
       Basis-Stufe nicht erlaubt. Das Titelbild steht so da, wie der Entwurf
       es bei "Bewegung reduzieren" selbst zeigt. Der Knopf taete ohne Szene
       nichts und faellt mit weg (fehlt dort ebenfalls).
    7. KOPF-KNOPF ERST AB 480 PX (V5). Gemessen: Logo 130 + Abstand 24 +
       Kopf-Knopf 199,84 + 14 + Menue-Knopf 44 = 411,84 px, dazu der Rand
       2 x clamp(16px, 4vw, 40px). Das passt erst ab 448 px Fensterbreite,
       mit einem klassischen Rollbalken (17 px, Windows) erst ab 467 px.
       Darunter schiebt die feste Leiste den Menue-Knopf ueber den Rand: bei
       360 px beginnt er bei x = 383,84 (ganz draussen), bei 390 px sind noch
       6 von 44 px zu sehen. Auf den ueblichen Handys waere das Menue nicht
       erreichbar. Unter 480 px steht deshalb nur Logo und Menue-Knopf im
       Kopf; derselbe Weg liegt direkt darunter im Hero ("Kostenlose
       Besichtigung anfragen"). Text und Aussehen des Knopfs sind
       unveraendert.
    8. HERO-SCHLEIER UNTER 760 PX KRAEFTIGER (V9). Auf dem Handy ist der
       Inhalt hoeher als die Mindesthoehe; "Leistungen ansehen" und die
       Vorteile-Liste landen im unteren Viertel, wo der Schleier des
       Entwurfs auslaeuft (0,55 bei 72 %, 0 ab 90 %) und das dunkle Polohemd
       des Mitarbeiters liegt. Entwurf gemessen am echten Bild: Vorteile
       min 1,00 : 1 (390 px), "Leistungen ansehen" min 2,96 : 1 (320 px);
       betroffen hochkant 320-580 px und quer 568 x 320 bis 740 x 360.
       Hier: 0,97 bei 0 %, 0,94 bei 52 %, 0,7 bei 72 %, 0,6 bei 100 %
       (Entwurf: 0,97 / 0,94 / 0,55 / 0 bei 90 %). Werte siehe KONTRASTE. Ab
       760 px steht der Schleier des Entwurfs woertlich.
    9. PLATZHALTER IM TEXTFELD (V9). Der Entwurf setzt keine Farbe; Chrome
       zeigt ihn #A9A9A9 (2,25 : 1 auf #FBFAF7), Firefox rund #7C8595
       (3,56 : 1). Hier #5A6578, deckend, die Farbe der kleinen
       Bezeichnungen des Entwurfs: 5,64 : 1.
   10. HANDY-MENUE UND FRAGEN OHNE SKRIPT (V8). Das Menue ist ein
       <details>/<summary> statt Knopf mit Zustand; "aufgeklappt" meldet der
       Browser selbst. Beschriftung "Menue oeffnen" und die zwei Striche
       bleiben wie im Entwurf (dort aenderten sie sich beim Oeffnen auch
       nicht). Die Liste liegt absolut unter der Leiste, an derselben Stelle,
       an der sie im Entwurf im Fluss stand: ihre obere Linie deckt die Linie
       der Leiste, ihre untere steht dort, wo im Entwurf die Linie der
       gewachsenen Leiste lag. Nach einem Sprung klappt js/seite.js das Menue
       zu (closeMenu im Entwurf, wie dort nur bei den fuenf Abschnitten, nicht
       beim Telefon); ohne Skript bleibt es offen, bis man den Knopf noch
       einmal drueckt.
       Die Fragen sind <details name="faq">, die erste offen. Der Browser
       haelt wie der Zustand des Entwurfs hoechstens eine offen, ein Klick
       auf die offene schliesst sie. "+" und "x" (U+00D7) setzt das CSS. Die
       <h3> steht in der <summary> und haelt die Gliederung des Entwurfs.
       Browser ohne das Attribut `name` lassen mehrere offen.
   11. FORMULAR SENDET NICHTS (V12). Pruefung, vier Fehlermeldungen,
       Statusmeldung und der Aufbau der Mail sind weg, ebenso `aria-invalid`,
       `aria-describedby` und die Wertbindungen. Der Knopf ist type="button",
       das Formular hat kein action, nichts faengt ein Absenden ab. Hinter dem
       Knopf stand im Entwurf die leere Statuszeile; den Abstand davor
       (gap 20 px) haelt jetzt ein Rand unter dem Knopf, damit der weisse
       Kasten gleich hoch bleibt. `novalidate` bleibt wie im Entwurf.
   12. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet beim
       Scrollen nichts ein. Die sieben Abschnitte unter dem Hero tragen
       [data-reveal] an ihrem 1240er Rahmen und erscheinen einmal (400 ms,
       12 px). Der Hero nicht (LCP), Kopf und Fuss nicht. Ohne Skript und bei
       "Bewegung reduzieren" ist alles sofort da.
   13. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage).
       Impressum und Datenschutzerklaerung im Fuss und in der Einwilligung
       zeigen wie im Entwurf auf eineuroweb.de (Entscheidung 7) und fuehren
       damit nicht ins Leere.
   14. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Wandsbeker Strasse 11, 22041 Hamburg Wandsbek, 040 123456789,
       reinigung@eineuroweb.de. Benedikt hat sie geprueft.
   15. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: <html lang="de"> und der
       Sprungverweis "Zum Inhalt springen" auf #top (den <main> traegt im
       Entwurf `id="top"`). Er sieht aus wie der Kopf-Knopf.
   16. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser
       /favicon.ico an der Wurzel ab, und die App liefert dort nichts (404).
       Wie in kiosk-wolff steht es als data:-Adresse im Kopf (V3): eine
       Flaeche in --marine, ohne Buchstaben, damit die Umbrandung nichts
       Fremdes stehen laesst.

   BEWUSST WIE IM ENTWURF
   ----------------------
   - "Gebaeudereinigung," in der <h1> ist bei 38 px 338 px breit. Bei 360 px
     reicht das Wort 18 px in den Rand und bleibt sichtbar, bei 320 px
     schneidet der Hero rund 38 px ab. Ein weiches Trennzeichen haette auch
     die Ansicht bei 360 px veraendert.
   - Der Fokusring #3AA6C8 (3 px) bleibt, siehe NICHT-TEXT.
   - Unter rund 400 px bricht "Kostenlose Besichtigung anfragen" im 56 px
     hohen Knopf zweizeilig um; der Entwurf setzt dort kein nowrap.

   KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9)
   --------------------------------------------
   WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Flaechen sind vorher im
   sRGB-Raum verrechnet, so wie der Browser es tut.

     --text #13233F       auf --weiss #FFFFFF ......... 15,67 : 1   OK
     --text               auf --grund #F6F5F1 ......... 14,37 : 1   OK
     --marine #14284B     auf --weiss ................. 14,64 : 1   OK
     --marine             auf --grund ................. 13,42 : 1   OK
     --titel #0F2142      auf --weiss ................. 15,95 : 1   OK
     --titel              auf --grund ................. 14,62 : 1   OK
     --titel              auf --feld #FBFAF7 .......... 15,28 : 1   OK
     --titel              auf --eisblau #E3F2F7 ....... 13,91 : 1   OK
     --vorspann #2A3954   auf --grund ................. 10,63 : 1   OK
     --fliess #3D4B63     auf --weiss .................  8,80 : 1   OK
     --fliess             auf --grund .................  8,07 : 1   OK
     --leise #5A6578      auf --weiss .................  5,89 : 1   OK
     --leise              auf --grund .................  5,40 : 1   OK
     --leise              auf --feld (Platzhalter) ....  5,64 : 1   OK
     --petrol #0B6E8E     auf --weiss .................  5,78 : 1   OK
     --petrol             auf --grund .................  5,30 : 1   OK
   > Petrol traegt Vorzeilen (13 px/700), Nummern (14 px/800) und die
   > Verweisfarbe beim Darueberfahren.
     --weiss              auf --marine (Knoepfe) ...... 14,64 : 1   OK
     --weiss              auf --petrol (Hover) ........  5,78 : 1   OK
   ARBEITSWEISE, Grund --marine #14284B:
     --weiss (h2, Begriffe) ............................ 14,64 : 1   OK
     --graublau #D3DBE8 (Text) ......................... 10,50 : 1   OK
     --hellblau #8FD3E8 (Vorzeile) .....................  8,82 : 1   OK
   FUSS, Grund --titel #0F2142:
     --graublau (Grundschrift) ......................... 11,45 : 1   OK
     --weiss (Verweise) ................................ 15,95 : 1   OK
     --hellblau (Spaltenkoepfe, Hover) .................  9,61 : 1   OK

   KOPFLEISTE. rgba(255,255,255,.94) laesst 6 % durch. Gerechnet gegen den
   unguenstigsten Fall darunter, ein schwarzes Pixel (-> #F0F0F0): --text
   13,75, --marine 12,84 : 1. Ueber Fuss und Arbeitsweise (-> #F1F2F4):
   13,99 / 13,07 : 1 — OK. Das Handy-Menue liegt auf deckendem --weiss.

   TITELBILD. Dunkle Schrift auf hellem Schleier (--grund) ueber dem Foto.
   Der unguenstigste denkbare Fall ist der dunkelste Bildpunkt, ein
   schwarzer; ein heller Bildpunkt hebt den Kontrast nur (Deckung 0,6 ueber
   Weiss -> #FAF9F7: --marine 13,91 : 1).
     Deckung 0,97 -> #EFEEEA: --marine 12,61  --titel 13,74  --vorspann 9,98
     Deckung 0,94 -> #E7E6E3: --marine 11,73  --titel 12,78  --vorspann 9,29
     Deckung 0,85 -> #D1D0CD: --marine  9,49  --titel 10,34  --vorspann 7,51
     Deckung 0,80 -> #C5C4C1: --marine  8,39  --titel  9,15  --vorspann 6,65
     Deckung 0,70 -> #ACACA9: --marine  6,43  --titel  7,01  --vorspann 5,09
     Deckung 0,60 -> #949391: --marine  4,77  --titel  5,20  --vorspann 3,78
   Unter 760 px (Abweichung 8) liegt jede Zeile auf mindestens 0,6 Deckung:
   Vorzeile, "Leistungen ansehen" und Vorteile sind --marine, die <h1>
   --titel, also mindestens 4,77 : 1 unabhaengig vom Foto. Die Unterzeile
   (--vorspann) endet auf jeder gemessenen Groesse oberhalb von 64 % der
   Hero-Hoehe, dort deckt der Schleier mindestens 0,8 (6,65 : 1). Ab 760 px
   liegt der Text auf der deckenden Flaeche oder hoechstens dort, wo der
   Verlauf 0,85 erreicht (rechte Kante des 660er Textblocks), also
   mindestens 7,51 : 1.
   Gemessen im Browser am echten Titelbild: Schrift unsichtbar geschaltet,
   jeder Bildpunkt unter jeder Textzeile gegen die Schriftfarbe, je Zeile der
   dunkelste Punkt, schlechtester Wert ueber alle Fenster. "Entwurf" am
   Nachbau von Kopf und Hero des Entwurfs, "hier" und "ab 760" an der
   fertigen Seite (sie trifft den Nachbau mit dem neuen Schleier auf zwei
   Stellen genau):
     Fenster               Vorzeile  h1     Unterzeile  "Leistungen"  Vorteile
     unter 760, Entwurf    12,29     13,01  6,30        2,96 FAELLT   1,00 FAELLT
     unter 760, hier       12,28     13,01  7,41        6,35          5,56
     ab 760 (Entwurf)      13,30     11,67  10,53       13,18         13,30
   (unter 760: 320x640 bis 759x1000 hochkant und 568x320, 640x360, 667x375,
   740x360 quer; ab 760: 760 bis 1920 px). > Folge: Abweichung 8.

   NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Fokusring #3AA6C8 auf
   #FFFFFF 2,81, #F6F5F1 2,58, #FBFAF7 2,69, #14284B 5,20, #0F2142 5,67 : 1.
   Rand der Eingabefelder #CFCAC0 auf #FBFAF7 1,56, Rand Menue-Knopf und
   Frage-Zeichen #D5D1C6 auf #FFFFFF 1,53 : 1. Alles wie im Entwurf; die
   Felder tragen jedes eine Beschriftung darueber.
   ========================================================================= */


/* ── Schrift · selbst ausgeliefert, kein Abruf zu einem fremden Server ───── */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;          /* Datei traegt wght 200-800, freigegeben 400-800 */
  font-display: swap;
  src: url("../vendor/fonts/manrope-400-800-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;
}


/* ── Tokens · jeder Wert aus dem Entwurf ─────────────────────────────────── */

:root {
  --grund: #F6F5F1;        /* Seitengrund, Farbe des Hero-Schleiers */
  --weiss: #FFFFFF;        /* Nutzen, Team, Fragen, Formular, Handy-Menue, Schrift auf Marine */
  --kopf-grund: rgba(255, 255, 255, 0.94);
  --sand: #EDEBE5;         /* Hero-Grund unter dem Foto */
  --feld: #FBFAF7;         /* Grund der Eingabefelder */
  --eisblau: #E3F2F7;      /* Kreis der Schritt-Ziffern */
  --text: #13233F;         /* Grundschrift, Menuezeile, Handy-Menue */
  --marine: #14284B;       /* Verweise, Knoepfe, Arbeitsweise, Striche */
  --titel: #0F2142;        /* Ueberschriften, Felder, Kontakt, Fuss-Grund */
  --vorspann: #2A3954;     /* Unterzeile im Hero */
  --fliess: #3D4B63;       /* Fliesstext */
  --leise: #5A6578;        /* Bildunterschrift, Rollen, Bezeichnungen, Platzhalter */
  --petrol: #0B6E8E;       /* Vorzeilen, Nummern, Hover */
  --hellblau: #8FD3E8;     /* Vorzeile Arbeitsweise, Spaltenkoepfe im Fuss */
  --graublau: #D3DBE8;     /* Text auf Marine, Grundschrift im Fuss */
  --akzent: #3AA6C8;       /* Strich, Rauten, Fokusring, Unterstrich */
  --linie: #E2DFD7;        /* Kopf, Handy-Menue, Nutzen, Fragen, Formular */
  --linie-2: #D9D5CB;      /* Leistungsliste */
  --linie-3: #EEECE6;      /* Trenner im Handy-Menue */
  --knopfrand: #D5D1C6;    /* Rand Menue-Knopf und Frage-Zeichen */
  --feldrand: #CFCAC0;     /* Rand der Eingabefelder */

  --schrift: Manrope, "Segoe UI", system-ui, sans-serif;

  --notice: 26px;          /* feste Hinweisleiste aus A17 */
  --seitenrand: clamp(20px, 4vw, 40px);
  --kopfrand: clamp(16px, 4vw, 40px);
  --abstand: clamp(72px, 11vw, 140px);
}


/* ── Grundlage · die globalen Regeln des Entwurfs ────────────────────────── */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--notice);
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: var(--marine); }

/* Abweichung 1: Gewicht 0,0,1, jede Klasse mit eigener Farbe gewinnt. */
a:where(:hover) { color: var(--petrol); }

/* Abweichung 1: Gewicht 0, eigene Rundungen (Knoepfe, Felder) bleiben. */
:where(:focus-visible) {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

section[id] { scroll-margin-top: calc(var(--notice) + 84px); }

/* Abweichung 3: der Logo-Verweis landet wie im Entwurf ganz oben. */
#top { scroll-margin-top: var(--notice); }

.skip {
  position: absolute;
  top: calc(var(--notice) + 14px);
  left: 50%;
  z-index: 60;
  transform: translate(-50%, -400%);
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--marine);
  color: var(--weiss);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
}

.skip:focus { transform: translate(-50%, 0); }


/* ── Kopfleiste ──────────────────────────────────────────────────────────── */

.kopf {
  position: fixed;
  top: var(--notice);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--kopf-grund);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--kopfrand);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.kopf__marke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--marine);
}

.kopf__logo {
  width: clamp(130px, 14vw, 170px);
  height: auto;
  display: block;
}

/* Ab 1080 px sichtbar (im Entwurf: wide). */
.kopf__nav {
  display: none;
  align-items: center;
  gap: 30px;
  font-size: 15px;
  font-weight: 600;
}

.kopf__link {
  text-decoration: none;
  color: var(--text);
}

.kopf__rechts {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kopf__tel {
  display: none;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--marine);
  white-space: nowrap;
}

/* Abweichung 7: erst ab 480 px sichtbar. */
.kopf__knopf {
  display: none;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--marine);
  color: var(--weiss);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
}

.kopf__knopf:hover {
  background: var(--petrol);
  color: var(--weiss);
}

/* Handy-Menue: <details> statt Knopf mit Zustand (Abweichung 10). */
.menue__knopf {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--knopfrand);
  background: var(--weiss);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
}

.menue__knopf::-webkit-details-marker { display: none; }

.menue__strich {
  width: 18px;
  height: 2px;
  background: var(--marine);
  display: block;
}

/* Bezugsrahmen ist die feste Kopfleiste, nicht <details>: So liegt die Liste
   ueber die volle Breite direkt unter der Leiste, wie im Entwurf. Die obere
   Linie deckt die Linie der Leiste, die untere steht fuer die Linie, die im
   Entwurf unter der gewachsenen Leiste lag. */
.menue__liste {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px var(--kopfrand) 20px;
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  font-size: 17px;
  font-weight: 600;
}

.menue__link {
  padding: 12px 0;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--linie-3);
}

.menue__tel {
  padding: 14px 0 0;
  text-decoration: none;
  color: var(--marine);
  font-weight: 800;
}


/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: clamp(620px, 88svh, 980px);
  padding-top: 72px;
  display: flex;
  overflow: hidden;
  background: var(--sand);
}

/* Ausschnitt, Schleier und Lage wechseln wie im Entwurf bei 760 px. */
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 84% 60%;
}

/* Abweichung 8: unter 760 px kraeftiger als im Entwurf. */
.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 245, 241, 0.97) 0%, rgba(246, 245, 241, 0.94) 52%, rgba(246, 245, 241, 0.7) 72%, rgba(246, 245, 241, 0.6) 100%);
}

.hero__inhalt {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 96px) var(--seitenrand) clamp(40px, 7vh, 80px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero__text {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__zeile {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marine);
}

.hero__strich {
  width: 28px;
  height: 2px;
  background: var(--akzent);
  display: block;
}

.hero__titel {
  margin: 0;
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--titel);
  text-wrap: balance;
}

.hero__vorspann {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--vorspann);
  max-width: 540px;
  text-wrap: pretty;
}

.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 6px;
}

.hero__link {
  font-weight: 700;
  font-size: 16px;
  color: var(--marine);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--akzent);
}

.hero__vorteile {
  list-style: none;
  margin: 14px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(20, 40, 75, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  font-size: 15px;
  font-weight: 600;
  color: var(--marine);
}

.hero__vorteil {
  display: flex;
  align-items: center;
  gap: 8px;
}

.raute {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--akzent);
  transform: rotate(45deg);
  display: block;
}


/* ── Knoepfe · gross im Hero und im Ablauf ───────────────────────────────── */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--marine);
  color: var(--weiss);
  font-weight: 700;
  font-size: 16.5px;
  text-decoration: none;
}

/* Den Schatten traegt im Entwurf nur der Hero-Knopf. */
.knopf--schatten { box-shadow: 0 10px 30px -12px rgba(20, 40, 75, 0.6); }

.knopf:hover {
  background: var(--petrol);
  color: var(--weiss);
}


/* ── Abschnitte ──────────────────────────────────────────────────────────── */

.abschnitt { padding: var(--abstand) var(--seitenrand); }

.abschnitt--weiss { background: var(--weiss); }

.rahmen {
  max-width: 1240px;
  margin: 0 auto;
}

.vorzeile {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrol);
}

.vorzeile--hell { color: var(--hellblau); }

.titel {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--titel);
  text-wrap: balance;
}

/* Arbeitsweise: die h2 setzt im Entwurf keine Farbe und erbt --weiss. */
.titel--hell { color: inherit; }

/* Fragen: diese eine h2 steht im Entwurf ohne balance. */
.titel--frei { text-wrap: wrap; }

.einleitung {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--fliess);
}

.bild {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.bild--4-3 { aspect-ratio: 4 / 3; }
.bild--4-5 { aspect-ratio: 4 / 5; }
.bild--3-2 { aspect-ratio: 3 / 2; }


/* ── Nutzen ──────────────────────────────────────────────────────────────── */

.nutzen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.nutzen .einleitung {
  max-width: 520px;
  text-wrap: pretty;
}

.nutzen__liste {
  display: flex;
  flex-direction: column;
}

.nutzen__punkt {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--linie);
}

.nutzen__nr {
  font-size: 14px;
  font-weight: 800;
  color: var(--petrol);
  letter-spacing: 0.04em;
  padding-top: 5px;
}

.nutzen__titel {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--titel);
}

.nutzen__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fliess);
  text-wrap: pretty;
}


/* ── Leistungen ──────────────────────────────────────────────────────────── */

.leistungen__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.leistungen__titelblock { max-width: 640px; }

.leistungen__intro {
  margin: 0;
  max-width: 400px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fliess);
}

.leistungen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.leistungen__bild {
  margin: 0;
  position: relative;
}

.leistungen__unterschrift {
  margin-top: 14px;
  font-size: 14px;
  color: var(--leise);
}

.leistungen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--linie-2);
}

.leistung {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--linie-2);
}

.leistung__nr {
  font-size: 14px;
  font-weight: 800;
  color: var(--petrol);
  padding-top: 4px;
}

.leistung__titel {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--titel);
}

.leistung__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fliess);
  text-wrap: pretty;
}


/* ── Arbeitsweise ────────────────────────────────────────────────────────── */

.arbeitsweise {
  background: var(--marine);
  color: var(--weiss);
}

.arbeitsweise__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.arbeitsweise .einleitung {
  color: var(--graublau);
  max-width: 520px;
}

.arbeitsweise__liste {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px 40px;
}

.arbeitsweise__punkt {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 18px;
}

.arbeitsweise__begriff {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.arbeitsweise__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--graublau);
}


/* ── Ueber uns ───────────────────────────────────────────────────────────── */

.team__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* Unter 760 px steht das Bild oben, wie im Entwurf (teamTextOrder). */
.team__text { order: 2; }

.team .einleitung {
  max-width: 540px;
  text-wrap: pretty;
}

.team__liste {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 20px;
}

.team__person {
  border-top: 2px solid var(--marine);
  padding-top: 14px;
}

.team__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--titel);
}

.team__rolle {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--leise);
}


/* ── Ablauf ──────────────────────────────────────────────────────────────── */

.ablauf__kopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.ablauf .einleitung { max-width: 500px; }

.ablauf__schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 32px;
}

.schritt {
  padding: 28px 0;
  border-top: 2px solid var(--marine);
}

.schritt__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--eisblau);
  color: var(--titel);
  font-weight: 800;
  font-size: 15px;
}

.schritt__titel {
  margin: 18px 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--titel);
}

.schritt__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fliess);
  text-wrap: pretty;
}

.ablauf__fuss {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
}

.ablauf__anruf {
  font-size: 16px;
  color: var(--fliess);
}

/* Ohne eigene Farbe: --marine aus `a`, beim Darueberfahren --petrol. */
.ablauf__tel { font-weight: 700; }


/* ── Fragen ──────────────────────────────────────────────────────────────── */

.faq__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.faq__liste { border-bottom: 1px solid var(--linie); }

.faq__eintrag { border-top: 1px solid var(--linie); }

/* Die <summary> uebernimmt den Knopf des Entwurfs (Abweichung 10). */
.faq__frage {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
  font: 700 19px/1.4 Manrope, system-ui, sans-serif;
  color: var(--titel);
  list-style: none;
}

.faq__frage::-webkit-details-marker { display: none; }

.faq__fragetext {
  margin: 0;
  font: inherit;
  color: inherit;
}

.faq__zeichen {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--knopfrand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--marine);
}

.faq__zeichen::before { content: "+"; }

.faq__eintrag[open] .faq__zeichen::before { content: "\00D7"; }

.faq__antwort {
  margin: 0;
  padding: 0 56px 26px 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--fliess);
  text-wrap: pretty;
}


/* ── Kontakt ─────────────────────────────────────────────────────────────── */

.kontakt__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.kontakt .einleitung { max-width: 480px; }

.kontakt__daten {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kontakt__eintrag {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kontakt__bezeichnung {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
}

.kontakt__tel {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--titel);
}

.kontakt__mail {
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
  text-decoration: none;
  color: var(--titel);
  overflow-wrap: anywhere;
}

.kontakt__adresse {
  font-style: normal;
  font-size: 18px;
  line-height: 1.55;
  color: var(--titel);
}

.formular {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: clamp(24px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.formular__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feld__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--titel);
}

.feld__eingabe,
.feld__auswahl {
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--feldrand);
  border-radius: 6px;
  font: 500 16px Manrope, system-ui, sans-serif;
  color: var(--titel);
  background: var(--feld);
}

.feld__auswahl { padding: 0 12px; }

.feld__text {
  padding: 12px 14px;
  border: 1px solid var(--feldrand);
  border-radius: 6px;
  font: 500 16px/1.5 Manrope, system-ui, sans-serif;
  color: var(--titel);
  background: var(--feld);
  resize: vertical;
}

/* Abweichung 9. */
.feld__text::placeholder {
  color: var(--leise);
  opacity: 1;
}

.einwilligung {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.einwilligung__label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fliess);
  cursor: pointer;
}

.einwilligung__box {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--marine);
}

/* Abweichung 11: margin-bottom steht fuer den Abstand vor der Statuszeile,
   die im Entwurf leer hinter dem Knopf stand. */
.formular__knopf {
  height: 56px;
  margin-bottom: 20px;
  border: 0;
  border-radius: 999px;
  background: var(--marine);
  color: var(--weiss);
  font: 700 16.5px Manrope, system-ui, sans-serif;
  cursor: pointer;
}

.formular__knopf:hover { background: var(--petrol); }


/* ── Fuss ────────────────────────────────────────────────────────────────── */

.fuss {
  background: var(--titel);
  color: var(--graublau);
  padding: clamp(56px, 7vw, 88px) var(--seitenrand) 32px;
}

.fuss__innen {
  max-width: 1240px;
  margin: 0 auto;
}

.fuss__oben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.fuss__marke {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fuss__logo {
  width: 180px;
  height: auto;
  display: block;
}

.fuss__satz {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 260px;
}

.fuss__kopf {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hellblau);
}

/* In den beiden Spalten mit gap 6 px steht der Kopf enger. */
.fuss__kopf--eng { margin: 0 0 6px; }

.fuss__adresse {
  font-style: normal;
  font-size: 16px;
  line-height: 1.7;
}

.fuss__spalte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  line-height: 1.7;
}

.fuss__link {
  color: var(--weiss);
  text-decoration: none;
}

.fuss__link--mail { overflow-wrap: anywhere; }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  font-size: 14.5px;
}

.fuss__recht {
  display: flex;
  gap: 24px;
}

.fuss__recht a { color: var(--weiss); }

.fuss__recht a:hover { color: var(--hellblau); }


/* ── Rechtlicher Hinweis am Seitenende (V17) ─────────────────────────────── */
/* Nicht im Entwurf. Werte aus seinen Farben und dem 1240er Rahmen. */

.rechtliches {
  max-width: calc(1240px + 2 * var(--seitenrand));
  margin: 0 auto;
  padding: 28px var(--seitenrand) 40px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fliess);
}

.rechtliches h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--titel);
}

.rechtliches p {
  margin: 0;
  max-width: 64ch;
}


/* ── Breiten · dieselben Grenzen wie im Skript des Entwurfs ──────────────── */

/* Abweichung 7. */
@media (min-width: 480px) {
  .kopf__knopf { display: inline-flex; }
}

@media (min-width: 760px) {
  .hero__bild { object-position: 72% 55%; }

  .hero__schleier {
    background: linear-gradient(90deg, #F6F5F1 0, #F6F5F1 max(560px, calc((100% - 1320px) / 2 + 600px)), rgba(246, 245, 241, 0.85) max(700px, calc((100% - 1320px) / 2 + 760px)), rgba(246, 245, 241, 0) max(920px, calc((100% - 1320px) / 2 + 1020px))), linear-gradient(0deg, rgba(246, 245, 241, 0.5) 0%, rgba(246, 245, 241, 0) 22%);
  }

  .hero__inhalt { justify-content: center; }

  .team__text { order: 0; }
}

@media (min-width: 1080px) {
  .kopf__nav { display: flex; }
  .kopf__tel { display: block; }
  .menue { display: none; }
}


/* ── Einblenden: genau ein Effekt je Abschnitt (Abweichung 12) ───────────── */
/* Der Ausgangszustand haengt an `.has-reveal`, und die Klasse setzt allein
   `js/reveal.js`. Ohne Javascript ist deshalb nichts versteckt. */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.has-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}


/* ── Weniger Bewegung: abschalten, nicht verkuerzen ─────────────────────── */
/* Die ersten beiden Regeln stehen so im Entwurf. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  * {
    animation: none !important;
    transition: none !important;
  }

  .has-reveal [data-reveal],
  .has-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}