/* ============================================================================
   MARIE KIEHM — Ernaehrungscoaching in Hamburg
   Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu
   Hover und Fokus. Kein Parallax, kein Scrub, kein Zaehler, kein Bildwechsel,
   kein `background-attachment: fixed`.

   HERKUNFT
   --------
   1:1 uebertragen aus dem Claude-Design-Entwurf
   "Marie Kiehm Ernaehrungscoaching.dc.html" (Projekt
   9e200815-1fb2-4f84-b0ef-82a1c23232f8, in der Sicherung Base64-kodiert),
   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 und Bildzuschnitte wie
   im Entwurf; Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild;
   Bewegung ruhig.

   Der Entwurf laedt Manrope und Instrument Serif von Google Fonts und die
   Laufzeit `support.js`. Er traegt Hover-Angaben der Claude-Design-Umgebung
   an acht Knoten (vier Menuepunkte, drei Knoepfe "Erstgespraech
   vereinbaren", Formular-Knopf), eine Fokus-Angabe (Sprungverweis), zehn
   Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, zwei
   Hero-Fassungen, vier Fehlermeldungen, Statusmeldung), eine Schleife sc-for
   (Fragen) und eine `DCLogic`-Klasse mit Breiten-, Seitenverhaeltnis-,
   Scroll- und Menue-Zustand und einer Formularpruefung, die das Mailprogramm
   oeffnet. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1).

   Alle Masse sind die des Entwurfs. Er setzt ein globales
   `box-sizing: border-box`, KEINE Zeilenhoehe am <body> (also `normal` bei
   16 px) und `margin: 0` an jedem Absatz, jeder Ueberschrift und jeder
   Liste; genauso hier. Was der Entwurf je nach Fenster per Skript
   umschaltet, steht in Media Queries an denselben Grenzen, nur min-width
   (V5):
     900 px                     Menuezeile statt Menue-Knopf und Handy-Menue
     1200 px und mind. 4 : 3    breiter Hero (Bild rechts, Schleier, Text
                                links) statt schmalem (Textblock, darunter
                                das Bild in 4 : 3)
     2040 px und mind. 4 : 3    Abweichung 11
   Ein hohes Fenster (1280 x 1024, 1440 x 1200) zeigt deshalb wie im
   Entwurf den schmalen Hero. Die Raster laufen wie dort ohne Media Query
   ueber `repeat(auto-fit, minmax(min(100%, X), 1fr))`.

   ZUR STUFE: Das Foto in "Leistungen" klebt wie im Entwurf per
   `position: sticky`, solange die Liste daneben durchlaeuft — aber nur,
   wenn es NEBEN der Liste steht: zweispaltig, ab 977 px (mit fester
   Bildlaufleiste von 15 px ab 995 px). Nachgemessen 503 px Weg bei 977 px,
   201 px bei 1280 px, 135 px bei 1440 px, 141 px ab 1600 px. Einspaltig
   klebt es nicht (Abweichung 17). Das ist reines CSS: Nichts bewegt sich,
   nichts wechselt, kein Abschnitt bleibt stehen — der Abschnitt scrollt
   normal weiter, nur das Bild haelt kurz seinen Platz. Deshalb kein
   gepinnter Abschnitt im Sinne von `docs/VORLAGEN-STUFEN.md`.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Elemente x-dc und helmet, die
       Bedingungsbloecke und die Schleife, die Platzhalter in doppelten
       geschweiften Klammern, die Hover- und Fokus-Angaben, `onClick`/
       `onInput`/`onChange`/`onSubmit`, `DCLogic`, `support.js`, das
       Werkzeug-Skript von Claude Design und die Attribute
       `data-screen-label` sind weg. Inline-Stile sind Klassen mit den Werten
       aus `:root`, die Hover-Angaben sind `:hover` an genau den acht Knoten,
       die Fokus-Angabe ist `.skip:focus`. Die vier Fragen stehen
       ausgeschrieben, alle zugeklappt.
    2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die
       Familien und Schnitte des Entwurfs: Manrope (variable Datei, Achse
       200-800, freigegeben 400-700 wie im Entwurf bestellt, 24 532 B) und
       Instrument Serif 400 normal (21 032 B) und kursiv (22 128 B),
       latin-Teilmenge mit demselben `unicode-range` wie bei Google.
       Zusammen 67 692 B, Budget 120 KB. Kein preconnect, kein Stylesheet von
       Google. Manrope 700 ist bestellt, aber nirgends benutzt; in der
       variablen Datei kostet es nichts extra.
    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 98 statt 72 px Abstand, #top und
       <main> halten 26 px (Logo- und Sprungverweis landen wie im Entwurf
       ganz oben), das Foto in "Leistungen" klebt bei 122 statt 96 px, und
       der Sprungverweis erscheint bei 34 statt 8 px. Der Reitertitel wird
       NICHT umgebrandet: Das Umbrand-Skript (unveraendert uebernommen)
       tauscht nur einen Titel, der mit dem Firmennamen BEGINNT, und
       "Ernaehrungscoaching in Hamburg – Marie Kiehm" bleibt wie im Entwurf.
    4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und
       og:description enden auf "Fiktives Beispielprojekt."
    5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien unter img/ wie im
       Projekt, byteweise gleich (keine ist breiter als 1920 px). Genau ein
       Bild vorgeladen, das Titelbild (V18); og:image zeigt auf
       img/hero.webp. Zusaetzlich `decoding="async"` an beiden Logos;
       `loading="lazy"` wie im Entwurf an Tisch, Beratung, Einkauf und dem
       Logo im Fuss, Titelbild und Logo im Kopf ohne.
    6. EIN HERO STATT ZWEI (V20). Der Entwurf baut den Hero zweimal, jede
       Fassung mit eigener <h1> unter derselben id und eigenem Bild, und
       zeigt per Skript eine davon. Beide im Markup hiessen: zwei <h1>, eine
       doppelte id und jede Kopf-Markierung zweimal. Hier steht er einmal in
       der Reihenfolge der schmalen Fassung, die breite ist eine Media Query
       mit denselben Werten. Die Reihenfolge des Entwurfs (dort Bild zuerst,
       Text darueber) ersetzt ein eigener Stapel: Der Hero bekommt
       `z-index: 0`, Bild und Schleier darin `z-index: -1`. Ein
       `z-index: 1` am Textrahmen saehe gleich aus, nur malt Chrome den Text
       dann erst nach dem klebenden Foto in "Leistungen" in eine eigene
       Ebene, ohne Subpixel-Glaettung — anders als im Entwurf.
    7. HANDY-MENUE OHNE SKRIPT (V8). Statt <button> mit Zustand ein
       <details>/<summary>; "aufgeklappt" meldet der Browser selbst, deshalb
       fehlen aria-expanded und aria-controls. Der Knopf sitzt absolut an der
       Stelle des Entwurfs (14 px von oben, rechts im Zeilenrand), die Liste
       steht unter der Zeile im Fluss, die Leiste waechst also wie dort mit.
       Nach dem Antippen eines Punkts klappt js/seite.js das Menue zu
       (closeMenu im Entwurf), ebenso beim Wechsel auf 900 px (onMq); ohne
       Skript bleibt es offen, bis man "Schliessen" antippt.
    8. LINIE UNTER DER KOPFLEISTE PER KLEINEM SKRIPT (V8, Entscheidung 5).
       Der Entwurf zieht #D5CDC1 unter die Leiste, sobald mehr als 40 px
       gescrollt sind. js/seite.js liest dafuer keine Scroll-Position: Ein
       40 px hoher Waechter ganz oben meldet ueber IntersectionObserver, ob
       er noch im Bild ist, und schaltet EINE Klasse. Ohne Skript bleibt die
       Linie unsichtbar, so wie der Entwurf am Seitenanfang aussieht.
    9. FORMULAR SENDET NICHTS (V12). Pruefung, vier Fehlermeldungen,
       Statusmeldung und der Aufbau der Mail sind weg, ebenso `aria-invalid`
       und `aria-describedby`, die auf diese Meldungen zeigten, und die rote
       Rahmenfarbe #9A2E1F. Der Knopf ist type="button", das Formular hat kein
       Ziel. Zwischen Knopf und "* Pflichtfeld" stand im Entwurf die leere
       Statuszeile als eigenes Flex-Kind (22 + 0 + 22 px); diesen Abstand
       haelt jetzt `margin-top: 22px` am Hinweis, der Kasten bleibt gleich
       hoch.
   10. GLOBALE VERWEIS- UND FOKUSREGELN MIT :where(). Im Entwurf verlieren
       `a`, `a:hover` und `:focus-visible` gegen die Inline-Stile fast jedes
       Verweises und Knopfes. In einer Stilvorlage waere es umgekehrt:
       `a:hover` (0,1,1) schluege `.knopf` (0,1,0), der Knopftext wuerde beim
       Darueberfahren dunkel auf dunkel, und `border-radius: 2px` aus der
       Fokusregel machte die runden Knoepfe eckig. Mit :where() haben die
       Regeln die Gewichtung 0 und wirken genau dort, wo der Entwurf sie
       wirken laesst: Farbe und Hover nur am Verweis "Datenschutzerklaerung"
       in der Einwilligung, die 2 px Rundung nur an Elementen ohne eigene.
   11. HERO AB 2040 PX (V9). Im Entwurf beginnt das Bild bei 20 % der
       Breite, der Textrahmen ist aber auf 1320 px begrenzt und rueckt zur
       Mitte. Ab etwa 2250 px laeuft der Text deshalb auf den Schokoriegel
       (Werte unter KONTRASTE). Ab 2040 px — dort fallen 20 % und der Anfang
       des Textrahmens genau zusammen, es gibt keinen Sprung — beginnt das
       Bild am Textrahmen (50 % - 612 px) und laeuft weiter bis zum rechten
       Rand. Unter 2040 px aendert sich nichts.
   12. FOKUSRING IN DER FUSSZEILE (V9, Nicht-Text). #1E1B18 auf #1E1B18 sind
       1,00 : 1, der Ring waere unsichtbar. Dort ist er #F3F0EA (15,07 : 1).
       Im Ablauf gibt es nichts, was den Fokus bekommt.
   13. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts
       ein. Die sechs Abschnitte unter dem Hero tragen [data-reveal] und
       erscheinen einmal (400 ms, 12 px). Der Hero nicht: das LCP-Element
       steht im ersten Frame. Ohne Skript und bei "Bewegung reduzieren" ist
       alles sofort da.
   14. 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.
   15. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Marie Kiehm, Marienweg 1, Hamburg (ohne Postleitzahl),
       012345 67890 (tel:+491234567890), ernaehrung@eineuroweb.de. Benedikt
       hat sie geprueft.
   16. AUS DEM MUSTER salon-kammrath: <html lang="de"> (im Entwurf ohne
       Sprache) und ein Symbol im Reiter. Der Entwurf hat keins; ohne fragt
       der Browser /favicon.ico an der Wurzel ab, und die App liefert dort
       nichts. Es steht als data:-Adresse im Kopf (V3): eine Flaeche in
       --braun, ohne Buchstaben, damit die Umbrandung nichts Fremdes stehen
       laesst.
   17. FOTO IN "LEISTUNGEN" KLEBT NUR NEBEN DER LISTE (V5). Im Entwurf klebt
       die <figure> selbst, in jeder Breite. Steht das Raster einspaltig
       (Foto ueber dem Text), schiebt sich beim Scrollen der ganze Text
       darunter: Ueberschrift, alle vier Leistungen, der Knopf. Am Entwurf mit
       Hinweisleiste nachgemessen: 360 x 780 Text 1 820 px Scrollweg unter dem
       Foto, sichtbar hoechstens ein Streifen von 281 px; 768 x 1024
       hoechstens 19 px, die Ueberschrift steht nie ganz frei; 900 x 900 und
       976 x 800 (Foto 1 035 und 1 122 px hoch) an keiner Stelle auch nur
       1 px Text. Mit fester Bildlaufleiste (15 px) steht das Raster bis
       994 px einspaltig, dort genauso 0 px. Hier klebt deshalb das Bild IN
       der <figure>, und die <figure> reicht ueber die ganze Rasterzeile.
       Zweispaltig ist die Zeile so hoch wie die Liste: Das Bild klebt bei
       122 px dieselbe Strecke wie im Entwurf (Oberkante alle 10 px Scrollweg
       verglichen bei 977, 995 mit Bildlaufleiste, 1024, 1280, 1440 und
       1920 px: 0,00 px Abweichung). Einspaltig ist die <figure> nur so hoch
       wie das Bild, es hat keinen Platz zum Kleben, und der Text bleibt
       ganz sichtbar. Eine Media Query bei 977 px traefe das nicht: Sie
       schaltet nach der Fensterbreite, die Spalten richten sich nach der
       Breite ohne Bildlaufleiste.

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

     --tinte #1E1B18      auf --grund #F3F0EA ......... 15,07 : 1   OK
     --tinte              auf --sand #E8E3DA .......... 13,41 : 1   OK
     --tinte              auf --weiss #FFFFFF ......... 17,14 : 1   OK
     --text #4A443D       auf --grund .................  8,45 : 1   OK
     --text               auf --sand ..................  7,52 : 1   OK
     --braun #6E4B32      auf --grund .................  6,80 : 1   OK
     --braun              auf --sand ..................  6,05 : 1   OK
                          (kleinster Textwert der Seite: Vorzeilen und
                          Nummern in "Leistungen" und "Kontakt")
     --fliess #2E2A25     auf --grund ................. 12,53 : 1   OK
     --fliess             auf --sand .................. 11,15 : 1   OK
     --grund              auf --tinte (Knoepfe) ....... 15,07 : 1   OK
     --weiss              auf --braun (Hover) .........  7,73 : 1   OK
     --grund              auf --braun (Formular-Knopf,
                          Hover nur Grund) ............  6,80 : 1   OK
   ABLAUF UND FUSS, Grund --tinte #1E1B18:
     --grund #F3F0EA (Titel, Schritte, Fuss-Verweise) . 15,07 : 1   OK
     --ablauf-akzent #CDB9A5 (Vorzeile, Ziffern) ......  9,04 : 1   OK
     --ablauf-text #CFC8BE (Schritte, Fuss-Anschrift) . 10,33 : 1   OK

   KOPFLEISTE. rgba(243,240,234,.96) laesst 4 % durch. Gerechnet gegen alles,
   was darunter durchlaeuft, --tinte darauf: ueber --grund 15,07, ueber
   --sand #F3EFE9 14,96, ueber --taupe #EFEBE5 14,43, ueber --tinte #EAE7E2
   13,90, im unguenstigsten Fall ueber Schwarz #E9E6E1 13,77 — OK. Die
   Unschaerfe (backdrop-filter) macht nichts dunkler als den dunkelsten
   Bildpunkt darunter.

   HERO SCHMAL (unter 1200 px oder schmaler als 4 : 3): Zeile --text,
   Ueberschrift --tinte, Vorspann --fliess auf festem --sand (Werte oben).
   Das Bild darunter traegt keinen Text.

   HERO BREIT. Dunkle Schrift auf hellem Schleier (0,52 / 0,30 / 0 bei
   0 / 30 / 52 % der Breite) ueber dem Foto. Links, wo das Bild ueber seine
   Maske auslaeuft, liegt der Schleier auf --taupe #857F78: 0,52 -> #BEBAB3
   (--tinte 8,87), 0,30 -> #A6A19A (6,68). Ueber dem Foto selbst gilt nur
   der Messwert. Gemessen im Browser an dieser Seite: Schrift unsichtbar
   geschaltet, dann jeder Bildpunkt unter jeder Textzeile gegen --tinte
   gerechnet; je Fenster der dunkelste Punkt:
     Fenster       Zeile   Ueberschrift   Vorspann   "So laeuft das ..."
     1200 x 900     7,11       7,13         6,25           7,37
     1280 x 800     7,09       7,11         6,74           7,45
     1366 x 768     7,01       6,95         6,63           6,01
     1440 x 900     6,94       6,94         6,39           5,99
     1536 x 864     6,93       6,79         6,31           5,99
     1600 x 900     6,86       6,63         6,26           5,89
     1680 x 1050    6,92       6,53         6,24           5,88
     1920 x 1080    6,77       6,42         6,18           5,81
     2039 x 1147    6,77       6,40         6,16           5,79
     2048 x 1152    6,72       6,40         6,18           5,73
     2200 x 1238    6,63       6,31         6,09           5,71
     2304 x 1296    6,57       6,23         6,04           5,66
     2560 x 1080    6,27       6,07         5,95           5,56
     2560 x 1440    6,42       6,16         5,95           5,57
     3440 x 1440    5,73       5,60         5,50           5,39
     3840 x 2160    5,84       5,75         5,73           5,63    alles OK
   (1200 x 800, 1280 x 960, 1800 x 1350, 1920 x 1200 und 2560 x 1600 liegen
   genauso.) Der Knopf "Erstgespraech vereinbaren" traegt seinen eigenen
   Grund (--grund auf --tinte 15,07) und liegt nicht auf dem Foto.
   Ohne Abweichung 11, also mit dem Bild ab 20 % wie im Entwurf, FAELLT es
   ab etwa 2250 px durch: 2200 x 1238 Vorspann 4,64 (knapp), 2304 x 1296
   Vorspann 2,34, 2560 x 1440 Vorspann 2,04, 3440 x 1440 Verweis 1,16,
   3840 x 2160 Verweis 1,43 und Vorspann 2,24 : 1.
   > Folge: Abweichung 11.

   NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Fokusring --tinte auf
   --grund 15,07, auf --sand 13,41, im Fuss siehe Abweichung 12. Rahmen der
   Eingabefelder #BDB3A6 auf #FFFFFF 2,07, gegen den Formulargrund 1,82 —
   unter den 3 : 1 fuer Bedienelemente; Entwurf so gelassen, die
   Beschriftung steht ueber jedem Feld. Linie unter der Kopfleiste #D5CDC1
   auf --grund 1,38 (Zierlinie).
   ========================================================================= */


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

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/instrument-serif-400-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: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/instrument-serif-400-italic-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: "Manrope";
  font-style: normal;
  font-weight: 400 700;          /* Datei traegt wght 200-800, freigegeben 400-700 */
  font-display: swap;
  src: url("../vendor/fonts/manrope-400-700-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: #F3F0EA;          /* Seitengrund, Formular, Handy-Menue, Text auf Dunkel */
  --kopf-grund: rgba(243, 240, 234, 0.96);
  --sand: #E8E3DA;           /* Leistungen, Kontakt, schmaler Hero */
  --taupe: #857F78;          /* Grund des Hero-Abschnitts */
  --tinte: #1E1B18;          /* Text, Knoepfe, Ablauf, Fuss, Fokusring */
  --braun: #6E4B32;          /* Nummern, Vorzeilen, Verweis, Hover */
  --weiss: #FFFFFF;          /* Felder, Knopftext beim Hover */
  --text: #4A443D;           /* Grautext; Linien im Ablauf */
  --fliess: #2E2A25;         /* Arbeitsweise, Einwilligung, Vorspann schmal */
  --linie: #BDB3A6;          /* Linien Leistungen, Fragen, Kontakt; Feldrahmen */
  --linie-hell: #D5CDC1;     /* Linie unter der Kopfleiste, Handy-Menue */
  --ablauf-akzent: #CDB9A5;  /* Vorzeile und Ziffern im Ablauf */
  --ablauf-text: #CFC8BE;    /* Texte im Ablauf, Grundfarbe im Fuss */

  --schrift: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --titelschrift: "Instrument Serif", Georgia, serif;

  --breite: 1320px;
  --rand: clamp(20px, 4vw, 48px);
  --notice: 26px;            /* feste Hinweisleiste aus A17 */
  --kopf: 72px;              /* Zeile der Kopfleiste, die Linie kommt dazu */
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

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

/* Abweichung 10: Gewichtung 0, damit jede Klasse sie ueberstimmt — wie im
   Entwurf die Inline-Stile. */
:where(a) {
  color: var(--braun);
  text-underline-offset: 3px;
}

:where(a:hover) { color: var(--tinte); }

:where(:focus-visible) {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
  border-radius: 2px;
}

summary::-webkit-details-marker { display: none; }

.rahmen {
  max-width: var(--breite);
  margin: 0 auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: calc(var(--notice) + 8px);
  z-index: 100;
  padding: 10px 16px;
  background: var(--tinte);
  color: var(--grund);
}

.skip:focus { left: 8px; }

/* Abweichung 8: liegt ganz oben auf der Seite, belegt keinen Platz. */
.kopf-waechter {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40px;
  pointer-events: none;
}


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

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

.kopf.is-gescrollt { border-bottom-color: var(--linie-hell); }

.kopf__zeile {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  height: var(--kopf);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.kopf__marke {
  display: flex;
  align-items: center;
}

.kopf__logo {
  display: block;
  height: 44px;
  width: auto;
}

.kopf__nav {
  display: none;
  align-items: center;
  gap: 32px;
}

.kopf__link {
  color: var(--tinte);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.kopf__link:hover { text-decoration: underline; }

.kopf__knopf {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--tinte);
  color: var(--grund);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

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

/* Handy-Menue (Abweichung 7). Bezugsrahmen des Knopfes ist die feste Leiste:
   14 px von oben mittelt ihn in der 72 px hohen Zeile, rechts steht er im
   Zeilenrand wie der Knopf des Entwurfs. */
.menue__knopf {
  position: absolute;
  top: 14px;
  right: var(--rand);
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--tinte);
  background: transparent;
  color: var(--tinte);
  font: 600 15px Manrope, sans-serif;
  cursor: pointer;
  list-style: none;
}

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

.menue__zu { display: none; }
.menue[open] .menue__auf { display: none; }
.menue[open] .menue__zu { display: inline; }

.menue__liste {
  display: flex;
  flex-direction: column;
  padding: 8px var(--rand) 24px;
  background: var(--grund);
  border-top: 1px solid var(--linie-hell);
}

.menue__link {
  padding: 14px 0;
  border-bottom: 1px solid var(--linie-hell);
  color: var(--tinte);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}

.menue__cta {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 999px;
  background: var(--tinte);
  color: var(--grund);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}


/* ── Hero · schmale Fassung des Entwurfs (Abweichung 6) ─────────────────── */

.hero {
  position: relative;
  background: var(--taupe);
  overflow: hidden;
  scroll-margin-top: var(--notice);
}

.hero__rahmen {
  background: var(--sand);
  padding: clamp(112px, 12vw, 160px) clamp(20px, 6vw, 72px) 40px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero__zeile {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.hero__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(42px, 11vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--tinte);
  text-wrap: balance;
}

.hero__titel em { font-style: italic; }

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

.hero__knoepfe {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

/* Schmal ohne Hover — der Entwurf hat dort keine Hover-Angabe. */
.hero__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: 999px;
  background: var(--tinte);
  color: var(--grund);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

.hero__link {
  align-self: center;
  color: var(--tinte);
  font-size: 16px;
  font-weight: 600;
  text-underline-offset: 5px;
}

.hero__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 96% 30%;
}

.hero__schleier { display: none; }


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

.abschnitt {
  padding: clamp(80px, 10vw, 144px) var(--rand);
  scroll-margin-top: calc(var(--notice) + var(--kopf));
}

/* Ansatz und Arbeitsweise */
.abschnitt--weit { padding-block: clamp(80px, 11vw, 160px); }

/* Leistungen und Kontakt */
.abschnitt--sand { background: var(--sand); }

.kopfgruppe {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vorzeile {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--braun);
}

.titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.knopf {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--tinte);
  color: var(--grund);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

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


/* ── Ansatz ──────────────────────────────────────────────────────────────── */

.ansatz {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 96px);
}

.ansatz__kopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px 64px;
  align-items: end;
}

.ansatz__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ansatz__intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  max-width: 520px;
  text-wrap: pretty;
}

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

.grundsatz {
  border-top: 1px solid var(--tinte);
  padding: 28px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grundsatz__nr {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--braun);
}

.grundsatz__titel {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.grundsatz__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}


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

.leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;          /* wie im Entwurf; die <figure> streckt sich selbst */
}

/* Abweichung 17: Die <figure> reicht ueber die ganze Rasterzeile, das Bild
   darin klebt. Zweispaltig ist die Zeile so hoch wie die Liste, einspaltig
   nur so hoch wie das Bild — dann klebt nichts. Kein overflow an einem
   Vorfahren: das braeche `sticky`. */
.leistungen__bild {
  margin: 0;
  align-self: stretch;
}

.leistungen__bild img {
  position: sticky;
  top: calc(var(--notice) + 96px);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  background: var(--linie-hell);
}

.leistungen__inhalt {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

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

.leistung:last-child { border-bottom: 1px solid var(--linie); }

.leistung__nr {
  font-size: 14px;
  font-weight: 600;
  color: var(--braun);
  padding-top: 5px;
}

.leistung__titel {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.leistung__text {
  grid-column: 2;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}

.leistungen__knopf { align-self: flex-start; }


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

.arbeitsweise {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

.arbeitsweise__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 60%;
  border-radius: 4px;
  background: var(--sand);
}

.arbeitsweise__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 24px 64px;
}

.arbeitsweise__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--fliess);
}

.arbeitsweise__text p {
  margin: 0;
  text-wrap: pretty;
}


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

.ablauf {
  background: var(--tinte);
  color: var(--grund);
}

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

.ablauf__inhalt {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.vorzeile--ablauf { color: var(--ablauf-akzent); }

.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.schritt {
  border-top: 1px solid var(--text);
  padding: 24px 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 6px 16px;
}

.schritt:last-child { border-bottom: 1px solid var(--text); }

.schritt__nr {
  font-family: var(--titelschrift);
  font-size: 30px;
  line-height: 1;
  color: var(--ablauf-akzent);
}

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

.schritt__titel {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.schritt__beschreibung {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ablauf-text);
}

.ablauf__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  background: var(--fliess);
}


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

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

/* Die einzige Ueberschrift zweiter Ordnung ohne `balance` im Entwurf. */
.faq__titel { text-wrap: wrap; }

.faq__liste {
  display: flex;
  flex-direction: column;
  grid-column: span 1;
  min-width: 0;
}

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

.frage__kopf {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}

.faq-plus {
  flex: none;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

details[open] .faq-plus { transform: rotate(45deg); }

.frage__antwort {
  margin: 0;
  padding: 0 48px 28px 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  text-wrap: pretty;
}

/* Schlusslinie unter der letzten Frage, wie im Entwurf ein leeres Element. */
.faq__schluss { border-top: 1px solid var(--linie); }


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

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

.kontakt__angaben {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.kontakt__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.kontakt__intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  max-width: 460px;
}

.angaben {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.angabe {
  border-top: 1px solid var(--linie);
  padding: 18px 0;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
}

.angabe:last-child { border-bottom: 1px solid var(--linie); }

.angabe__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  padding-top: 3px;
}

.angabe__wert {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.angabe__wert--adresse { line-height: 1.5; }

.angabe__adresse { font-style: normal; }

/* Unterstrich bleibt, kein Hover — wie im Entwurf. */
.angabe__link { color: var(--tinte); }

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

/* Formular (Abweichung 9) */
.formular {
  background: var(--grund);
  border-radius: 6px;
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.formular__titel {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

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

.feld__name {
  font-size: 15px;
  font-weight: 600;
}

.feld__eingabe {
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--weiss);
  color: var(--tinte);
  font: 400 16px Manrope, sans-serif;
}

.feld__text {
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--weiss);
  color: var(--tinte);
  font: 400 16px/1.6 Manrope, sans-serif;
  resize: vertical;
}

.einwilligung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.einwilligung__feld {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--tinte);
}

.einwilligung__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fliess);
}

/* Hover nur der Grund, der Text bleibt --grund (6,80 : 1) — wie im Entwurf. */
.formular__knopf {
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--tinte);
  color: var(--grund);
  font: 600 16px Manrope, sans-serif;
  cursor: pointer;
}

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

.formular__hinweis {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--text);
}


/* ── Fusszeile ───────────────────────────────────────────────────────────── */

.fuss {
  background: var(--tinte);
  color: var(--ablauf-text);
  padding: 56px var(--rand) 40px;
}

.fuss__innen {
  max-width: var(--breite);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-end;
}

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

.fuss__logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
}

.fuss__adresse {
  font-size: 15px;
  margin-top: 12px;
}

.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

/* Unterstrich bleibt, kein Hover — wie im Entwurf. */
.fuss__link {
  color: var(--grund);
  font-size: 15px;
  font-weight: 500;
}

/* Abweichung 12 */
.fuss :focus-visible { outline-color: var(--grund); }


/* ── Rechtlicher Hinweis am Seitenende (V17) ─────────────────────────────── */
/* content-box: Der Text steht damit an derselben Kante wie der Inhalt der
   Abschnitte darueber (1320 px plus Rand). */

.rechtliches {
  box-sizing: content-box;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 28px var(--rand) 40px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  scroll-margin-top: calc(var(--notice) + var(--kopf));
}

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

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


/* ── Sprungziele ─────────────────────────────────────────────────────────── */
/* <main> ist das Ziel des Sprungverweises; mit 26 px landet es wie im
   Entwurf bei 0 (Abweichung 3). */

main { scroll-margin-top: var(--notice); }


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

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

/* Breiter Hero: im Entwurf `heroWide`, dieselbe Bedingung. */
@media (min-width: 1200px) and (min-aspect-ratio: 4/3) {
  /* Eigener Stapel: Bild und Schleier liegen darin mit z-index -1 unter
     dem Text (Abweichung 6). */
  .hero {
    min-height: clamp(580px, 45vw, 88svh);
    display: flex;
    align-items: center;
    z-index: 0;
  }

  .hero__rahmen {
    position: relative;
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 120px var(--rand) 72px;
    background: none;
  }

  .hero__text {
    max-width: min(520px, 36vw);
    gap: 28px;
  }

  .hero__zeile {
    font-size: 13px;
    color: var(--tinte);
  }

  .hero__titel {
    font-size: clamp(46px, 5vw, 80px);
    line-height: 1;
  }

  .hero__vorspann {
    font-size: clamp(17px, 1.3vw, 19px);
    color: var(--tinte);
    max-width: 440px;
  }

  .hero__knoepfe {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
  }

  .hero__knopf {
    display: inline-flex;
    justify-content: normal;
    padding: 0 28px;
  }

  .hero__knopf:hover {
    background: var(--braun);
    color: var(--weiss);
  }

  .hero__link {
    align-self: auto;
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  .hero__bild {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 20%;
    width: 80%;
    height: 100%;
    object-position: 60% 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  }

  .hero__schleier {
    display: block;
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(243, 240, 234, 0.52) 0%, rgba(243, 240, 234, 0.3) 30%, rgba(243, 240, 234, 0) 52%);
  }
}

/* Abweichung 11: Das Bild beginnt am Textrahmen (Mitte minus halbe Breite
   plus Rand = 50 % - 612 px) statt bei 20 %. Bei genau 2040 px ist das
   dieselbe Stelle, darunter gilt der Entwurf unveraendert. Die Breite ist
   ausgeschrieben, damit das Bild bis zum rechten Rand reicht. */
@media (min-width: 2040px) and (min-aspect-ratio: 4/3) {
  .hero__bild {
    left: calc(50% - var(--breite) / 2 + var(--rand));
    width: calc(50% + var(--breite) / 2 - var(--rand));
  }
}


/* ── Einblenden: genau ein Effekt je Abschnitt (Abweichung 13) ───────────── */
/* 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; }

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

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