/* ============================================================================
   PERSCH IMMOBILIEN — Immobilienmakler in Kempten und im Allgaeu
   Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu
   Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler,
   kein Bildwechsel, kein `background-attachment: fixed`.

   HERKUNFT
   --------
   1:1 uebertragen aus dem Claude-Design-Entwurf "Persch Immobilien.dc.html"
   (Projekt 4f6ae890-632e-4824-b183-e3fdc8ab05ad), 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 Cormorant Garamond (500, 600) und Manrope (400-700) von
   Google Fonts und die Laufzeit `support.js`. Er traegt Hover-Angaben der
   Claude-Design-Umgebung an zehn Knoten (vier Menuepunkte, Knopf in der
   Kopfleiste, im Hero und in "Leistungen", "Aktuelle Objekte ansehen", die
   nicht gewaehlten Filterknoepfe, Formular-Knopf), dreizehn
   Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, Filter
   gewaehlt und nicht gewaehlt, Preis, "Preis auf Anfrage", vier
   Fehlermeldungen, Statusmeldung, Anrufleiste), zwei Schleifen sc-for
   (Filter, Objekte) und eine `DCLogic`-Klasse mit Scroll- und
   Breitenzustand, Objektfilter, Vorbelegung bei "Exposé anfordern" 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 KEIN
   globales `box-sizing: border-box`. Die Rahmen (max-width 1320 px plus
   Innenabstand) rechnen deshalb content-box; border-box rechnen nur der
   Hero-Inhalt, Eingabe- und Textfeld (dort ausdruecklich angegeben) und die
   Ersatzteile fuer die Knoepfe des Entwurfs (Menue-Knopf, Filter), weil ein
   <button> im Browser von Haus aus border-box rechnet. Ab 1321 px steht der
   Hero-Text deshalb wie im Entwurf weiter rechts als das Logo.

   Was der Entwurf je nach Fensterbreite per Skript umschaltet, steht hier in
   einer Media Query an derselben Grenze, nur min-width (V5):
     1000 px   Menuezeile statt Menue-Knopf, Anrufleiste weg, Fuss unten
               40 statt 96 px (isDesktop im Entwurf)
   Bildausschnitt und Schleier wechselt der Entwurf nicht. Die Raster laufen
   wie im Entwurf ohne Media Query ueber
   `repeat(auto-fit | auto-fill, minmax(min(100%, X), 1fr))`; das Fussraster
   hat dort kein min() und braucht deshalb Abweichung 13.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Elemente x-dc und helmet, die
       Bedingungsbloecke und die Schleifen, die Platzhalter in doppelten
       geschweiften Klammern, die Hover-Angaben, `onClick`/`onChange`/
       `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`, Filter und Objekte sind
       ausgeschrieben. Die Schalter des Entwurfs stehen fest auf ihrem
       Standard: Preise sichtbar ("Preis auf Anfrage" entfaellt),
       Anrufleiste an. Die globale Regel `a:hover { color: #163828 }` des
       Entwurfs fehlt: Jeder Textverweis setzt dort seine Farbe inline, die
       Regel wirkte also nirgends; als Klassenregel uebersetzt gewaenne sie
       gegen jede Klassenfarbe und erfaende Hover, wo der Entwurf keinen hat.
       Hover gibt es genau an den zehn Stellen mit Hover-Angabe.
       Ebenso weggelassen, weil wirkungslos: `scroll-margin-top: 88px` am
       Abschnitt "Warum" (er hat keine id, also auch kein Sprungziel).
    2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die
       Familien und Schnitte des Entwurfs: Cormorant Garamond (variable
       Datei, freigegeben 500-600 wie im Entwurf bestellt, 37 640 B) und
       Manrope (variable Datei, freigegeben 400-700, 24 532 B),
       latin-Teilmenge mit demselben `unicode-range` wie bei Google. Zusammen
       62 172 B, Budget 120 KB. Kein preconnect, kein Stylesheet von Google.
       Der Entwurf nutzt keine Kursive. Wo er an Cormorant kein Gewicht setzt
       (Ziffern 01-03, Verweise im Handy-Menue), fragt der Browser 400 an und
       nimmt 500 - genau wie im Entwurf, der ebenfalls nur 500 und 600 lud.
    3. VERMERK-LEISTE UND UMBRANDUNG (A17, V14, V19). Die feste Leiste ist
       26 px hoch (--notice). Deshalb beginnen Seitengrund und Kopfleiste
       26 px tiefer, die Sprungziele halten 106 statt 80 px Abstand, und
       #start 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, V18, 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 (284 514 B; ueber den
       250 KB der Basis-Stufe, nicht neu kodiert, siehe Entscheidung 6).
       `width`/`height` im Markup nennen die echten Masse. Genau ein Bild
       vorgeladen, das Titelbild (V18); og:image zeigt auf img/hero-v2.webp.
    6. HERO-SCHLEIER DICHTER (V9). Mit dem Schleier des Entwurfs faellt die
       Schrift im Hero durch, auf dem Handy grob: Unter 1000 px laeuft der
       Text ueber die ganze Breite, der waagerechte Verlauf endet aber bei
       74 % und der senkrechte bei 55 % Hoehe, und der Vorspann liegt auf der
       dunklen Holzfassade (bis 1,00 : 1; Werte unter KONTRASTE). Die
       kleinste Aenderung, die auf jeder geprueften Breite haelt:
         unter 1000 px  beide Verlaeufe des Entwurfs plus eine gleichmaessige
                        Flaeche rgba(247,244,238,.65) darunter
         ab 1000 px     beide Verlaeufe des Entwurfs, nur die Stufe bei 56 %
                        mit 0,60 statt 0,45 Deckung
       Farbe, Verlaufsrichtungen und alle anderen Stufen sind die des
       Entwurfs; ab 1000 px ist der Unterschied kaum zu sehen.
    7. KOPFLEISTE OHNE SCROLL-LISTENER (V8, Entscheidung 5). Der Entwurf
       laesst sie am Seitenanfang durchsichtig ueber dem Titelbild und
       hinterlegt sie nach mehr als 40 px Scrollen mit rgba(247,244,238,.97)
       und der Linie 0 1px 0 #DCD5C8, Uebergang .25 s. Hier steht im CSS
       der gescrollte Zustand; js/seite.js nimmt ihn zurueck (`ist-oben`),
       solange ein 40 px hoher Waechter ganz oben zu sehen ist
       (IntersectionObserver, liest keine Scroll-Position). Der Uebergang
       gilt erst nach dem ersten Setzen (`ist-bereit`), sonst blendete die
       Leiste beim Laden. Ist das Handy-Menue am Seitenanfang offen, ist die
       Leiste wie im Entwurf hinterlegt, ohne Linie (:has(); in Browsern
       ohne :has() bleibt dann nur die Leiste selbst durchsichtig, die Liste
       darunter ist ohnehin deckend). Ohne Javascript ist die Leiste immer
       hinterlegt: So laeuft nie Text unter einer durchsichtigen Leiste
       durch.
    8. HANDY-MENUE OHNE SKRIPT (V8). Statt Knopf plus Zustand ein
       <details>/<summary>; "aufgeklappt" meldet der Browser selbst. Der
       Knopf rechnet border-box wie der <button> des Entwurfs, sonst waere er
       50 statt 48 px gross. Die Liste liegt absolut unter der Leiste, an
       derselben Stelle wie im Entwurf; die Linie, die dort die gescrollte
       Kopfleiste unter dem Menue zieht, traegt hier die Liste. Nach einem
       Sprung klappt js/seite.js das Menue zu (closeMenu im Entwurf); ohne
       Skript bleibt es offen, bis man den Knopf noch einmal drueckt.
    9. OBJEKTFILTER OHNE SKRIPT (V8). Statt drei Knoepfen mit `aria-pressed`
       und einem Zustand im Skript drei Radios mit :checked (Muster
       kellermann-immobilien). Die Radios sind nur optisch versteckt und mit
       der Tastatur bedienbar; das sichtbare <label> rechnet border-box wie
       der Knopf des Entwurfs und traegt dessen Farben, Hover und Fokusring.
       Das Raster bleibt `auto-fill` wie im Entwurf: Beim Filtern bleiben
       leere Spalten stehen, die Karten rutschen nicht in die Breite.
   10. "EXPOSE ANFORDERN" FUELLT VOR (Entscheidung 5). Wie `p.request` im
       Entwurf setzt js/seite.js beim Klick das Anliegen auf "Immobilie
       kaufen" und schreibt den Satz zum Objekt in die Nachricht; der
       Verweis springt danach wie gewohnt zu #kontakt. Gesendet wird nichts.
       Ohne Skript springt der Verweis nur.
   11. FORMULAR SENDET NICHTS (V12). Pruefung, Fehlermeldungen,
       Statusmeldung und der Aufbau der Mail sind weg, ebenso `aria-invalid`
       und `aria-describedby`, die auf diese Meldungen zeigten. Der Knopf ist
       type="button", das Formular hat kein action. Hinter dem Knopf stand im
       Entwurf die leere Statuszeile; den Abstand davor (gap 22 px) haelt
       jetzt ein Rand unter dem Knopf, damit der Kasten gleich hoch bleibt.
   12. FOKUSRING AUF DUNKLEM GRUND (V9, Nicht-Text). Der Ring des Entwurfs
       (#1F4A36) ist im Fuss zu schwach (1,28 : 1 auf #163828); dort ist er
       #F7F4EE (11,73 : 1). In der Anrufleiste liegt er innen: aussen laege
       er unten ausserhalb des Fensters und zwischen den Knoepfen auf dem
       gruenen Knopf (1,00 : 1). Innen: #1F4A36 auf #F7F4EE 9,15, #F7F4EE
       auf #1F4A36 9,15 : 1.
   13. FUSS AUF DEM HANDY (V5). Das Fussraster ist im Entwurf das einzige
       ohne `min(100%, ...)`: `repeat(auto-fit, minmax(180px, 1fr))` in
       einem Flex-Element. Der Browser haelt es deshalb mindestens drei
       Spalten breit (604 px). Unter 672 px Fensterbreite ragt es ueber den
       Innenabstand, unter 636 px ueber den Rand, und der Seitenrahmen
       (overflow-x: hidden) schneidet es ab: Bei 360 px endete es erst bei
       624 px, Impressum und Datenschutzerklaerung stuenden ausserhalb des
       Bildes. Ein `min-width: min(100%, 604px)` laesst das Raster dort auf
       die Zeilenbreite schrumpfen (eine Spalte unter 436 px, darueber
       zwei). Ab 672 px ist alles wie im Entwurf.
   14. KEIN `position: sticky` IN "LEISTUNGEN" (V7). Der Entwurf setzt die
       linke Spalte auf sticky, top 120 px. Dort wirkt das nicht: Die Huelle
       traegt `overflow-x: hidden` und wird damit selbst zum Scroll-Behaelter,
       der nie scrollt - die Spalte laeuft mit (in Chrome nachgemessen). Das
       Bild bleibt also gleich, und die Basis-Stufe kennt keine Teile, die
       beim Scrollen stehen bleiben.
   15. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts
       ein. Die sieben 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.
   16. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage). Unter
       1000 px haelt er unten 56 px mehr Abstand, sonst laege die Anrufleiste
       ueber seinem letzten Satz. Impressum und Datenschutzerklaerung im Fuss
       und im Formular zeigen wie im Entwurf auf eineuroweb.de (Entscheidung
       7) und fuehren damit nicht ins Leere.
   17. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Bayrischer Weg 11, 87435 Kempten (Allgaeu), 089 123456789,
       immo@eineuroweb.de. Benedikt hat sie geprueft.
   18. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: <html lang="de">, der
       Sprungverweis "Zum Inhalt springen" mit `id="main"` an <main>,
       `decoding="async"` an beiden Logos und am Fusslogo `loading="lazy"`
       wie im Entwurf.
   19. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser
       /favicon.ico an der Wurzel ab. Wie in jeder anderen Vorlage steht es
       als data:-Adresse im Kopf (V3): eine Flaeche in --gruen, ohne
       Buchstaben, damit die Umbrandung nichts Fremdes stehen laesst.
   20. HOVER VON "AKTUELLE OBJEKTE ANSEHEN" (V9). Der Verweis liegt auf dem
       Foto. Beim Darueberfahren faerbt der Entwurf Schrift und Linie
       #1F4A36; damit faellt er auf 3,76 : 1 (540 px) und 4,16 : 1 (1000 px).
       Hier wird er #163828: die Farbe, die der Entwurf selbst fuer Verweise
       beim Darueberfahren vorsieht (seine Regel `a:hover`) und fuer die
       Knoepfe nimmt. Mindestens 4,82 : 1 (Werte unter KONTRASTE). Alle
       anderen Hover-Farben liegen auf festem Grund und bleiben wie im
       Entwurf.

   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 #1E2A24      auf --grund #F7F4EE ......... 13,55 : 1   OK
     --tinte              auf --weiss #FFFFFF ......... 14,87 : 1   OK
     --tinte              auf --sand #E6E0D5 .......... 11,32 : 1   OK
     --vorspann #26332C   auf --grund ................. 12,01 : 1   OK
     --text #4E5751       auf --grund .................  6,82 : 1   OK
     --text               auf --weiss .................  7,48 : 1   OK
     --leise #5E665F      auf --grund (dt, 12 px) .....  5,40 : 1   OK
     --leise              auf --weiss .................  5,93 : 1   OK
     --gruen #1F4A36      auf --grund .................  9,15 : 1   OK
     --gruen              auf --weiss ................. 10,04 : 1   OK
     --grund              auf --gruen (Knoepfe) .......  9,15 : 1   OK
     --grund              auf --gruen-tief #163828 .... 11,73 : 1   OK
   TEAM, Grund --gruen #1F4A36:
     --gruen-leise #C9D8CC .............................  6,78 : 1   OK
     --gruen-text #E9EFE9 ..............................  8,60 : 1   OK
     --grund #F7F4EE ...................................  9,15 : 1   OK
   FUSS, Grund --gruen-tief #163828:
     --gruen-text #E9EFE9 .............................. 11,03 : 1   OK
     --weiss (Impressum, Datenschutz) .................. 12,88 : 1   OK
     --fuss-copy #B9CBBE ...............................  7,57 : 1   OK
   Das Schildchen "Haus" / "Wohnung" liegt auf eigenem Grund (--tinte auf
   --grund 13,55), nicht auf dem Foto.

   KOPFLEISTE. Hinterlegt laesst rgba(247,244,238,.97) 3 % durch. Gerechnet
   gegen alles, was darunter durchlaeuft: ueber --weiss und --grund bleibt
   sie #F7F4EE (--tinte 13,55), ueber --gruen wird sie #F1EFE8 (12,93),
   ueber --gruen-tief #F0EEE8 (12,82), ueber Schwarz #F0EDE7 (12,73) - OK.
   Durchsichtig am Seitenanfang wie im Entwurf, gemessen an dieser Seite am
   echten Titelbild unter ihrem Schleier (je Breite jeder Bildpunkt unter
   der Schrift, der dunkelste zaehlt; 1000-2560 px): "Objekte" mindestens
   11,80, "Leistungen" 11,41, "Ueber uns" 10,62, "Ablauf" 9,95, Telefon
   9,47 : 1; unter 1000 px der Menue-Knopf (Rand und Striche --tinte)
   11,94 : 1 - OK. Beim Darueberfahren werden die Menuepunkte --gruen:
   mindestens 6,72 : 1. Schon mit dem Schleier des Entwurfs reichte es
   (11,29 / 10,65 / 10,21 / 9,82 / 9,42, Menue-Knopf 9,68 : 1); deshalb darf
   die Leiste oben durchsichtig bleiben (Abweichung 7).

   TITELBILD. Dunkle Schrift auf hellem Schleier ueber dem Foto. Der
   unguenstigste denkbare Fall ist ein schwarzer Bildpunkt unter dem Schleier:
     Deckung 0,94 -> #E8E5E0: --tinte 11,84, --vorspann 10,50
     Deckung 0,86 -> #D4D2CD: --tinte  9,84, --vorspann  8,73
     Deckung 0,70 -> #ADABA7: --tinte  6,49, --vorspann  5,75
     Deckung 0,65 -> #A19F9B: --tinte  5,63, --vorspann  4,99
     Deckung 0,60 -> #94928F: --tinte  4,79, --vorspann  4,25
   Der Schleier laeuft nach rechts und unten aus; es gilt deshalb der
   Messwert am echten Foto. Gemessen im Browser: die Schrift unsichtbar
   geschaltet, dann jeder Bildpunkt unter jeder Textzeile gegen die
   Schriftfarbe gerechnet; je Fenster der dunkelste Punkt.
   MIT DEM SCHLEIER DES ENTWURFS - FAELLT DURCH:
     Fenster      h1 --tinte   Vorspann --vorspann   "Aktuelle Objekte"   Vorzeile --gruen
     360 x 780       2,79            1,00                  3,03                 6,29
     390 x 844       1,00            1,00                  4,06                 6,24
     600 x 900       3,72            1,00                  1,00                 6,93
     768 x 1024      6,92            1,28                  2,06                 7,69
     999 x 800       4,03            2,99                  4,49                 8,18
     1000 x 800      4,03            2,99                  4,49                 8,18
     1280 x 800      3,44            6,31                  7,96                 8,52
     1440 x 900      3,58            6,03                  7,91                 8,52
     1920 x 1080     4,02            5,26                  7,28                 8,29
   > Folge: Abweichung 6. Gepruefte Zwischenstufen: unter 1000 px Flaeche
   > 0,60 nur 4,25, 0,65 dann 4,99; ab 1000 px Stufe bei 56 % 0,55 nur 4,00,
   > 0,60 dann 4,62. Die Stufe bei 34 % nach rechts zu schieben reicht nicht
   > (bei 1000-1280 px hoechstens 3,92).
   MIT DEM SCHLEIER DIESER SEITE, gemessen an dieser Seite:
     Fenster      h1 --tinte   Vorspann --vorspann   "Aktuelle Objekte"   Vorzeile --gruen
     360 x 780       8,41            5,07                  8,70                 7,97
     390 x 844       6,54            5,12                  9,38                 7,92
     600 x 900       9,14            5,75                  5,82                 8,21
     768 x 1024     10,89            6,40                  7,93                 8,52
     999 x 800       9,33            7,82                  9,57                 8,72
     1000 x 800      5,71            4,62                  6,16                 8,27
     1280 x 800      5,24            7,13                  8,66                 8,52
     1440 x 900      5,42            6,91                  8,71                 8,52
     1920 x 1080     5,81            6,39                  8,32                 8,37      alles OK
   Insgesamt 39 Fenster von 320 x 640 bis 2560 x 1440: kleinster Wert
   4,62 : 1 (1000 x 800, Vorspann), unter 1000 px mindestens 4,93 : 1
   (375 x 667, Vorspann). Ohne `text-wrap: balance`/`pretty` (gieriger
   Umbruch wie in aelteren Browsern) mindestens 4,57 : 1 (1000 x 700, h1);
   ein Rueckfall ueber @supports ist deshalb nicht noetig. Gemessen mit
   ausgeblendeter Anrufleiste (sie deckt unten 56 px ab, was darunter liegt,
   ist ohnehin nicht zu sehen); Zeilen unter der Falz aus einem zweiten,
   gescrollten Foto.
   "Aktuelle Objekte ansehen" beim Darueberfahren: in --gruen #1F4A36 wie im
   Entwurf nur 3,76 : 1 (540 x 960), 3,93 (600 x 900), 4,16 (1000 x 800);
   in --gruen-tief #163828 mindestens 4,82 : 1.
   > Folge: Abweichung 20.
   ========================================================================= */


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

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;          /* variable Datei, freigegeben 500-600 wie im Entwurf bestellt */
  font-display: swap;
  src: url("../vendor/fonts/cormorant-garamond-500-600-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;          /* variable Datei, freigegeben 400-700 wie im Entwurf bestellt */
  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: #F7F4EE;        /* Seitengrund, Karten, Formular, Handy-Menue, Anrufleiste, Knopftext */
  --weiss: #FFFFFF;        /* Objekte, Kontakt, Felder; Rechtsverweise im Fuss */
  --tinte: #1E2A24;        /* Text, Ueberschriften, Menue, Menue-Knopf */
  --vorspann: #26332C;     /* Vorspann im Hero */
  --text: #4E5751;         /* Fliesstext */
  --leise: #5E665F;        /* kleine Bezeichnungen, Fussnote unter den Objekten */
  --gruen: #1F4A36;        /* Vorzeilen, Knoepfe, Verweise, Fokusring, Grund "Ueber uns" */
  --gruen-tief: #163828;   /* Knopf und Hero-Verweis beim Darueberfahren, Grund der Fusszeile */
  --linie: #DCD5C8;        /* Trennlinien, Linie unter der Kopfleiste */
  --sand: #E6E0D5;         /* Kartenrahmen, Grund unter den Bildern, Formularrahmen */
  --filterrand: #C9C1B2;   /* Rahmen der nicht gewaehlten Filter */
  --feldrand: #B9B1A2;     /* Rahmen der Eingabefelder */
  --himmel: #DCE6EE;       /* Grund im Hero, solange das Bild fehlt */
  --gruen-leise: #C9D8CC;  /* "Ueber uns": Vorzeile, Bildunterschrift, Rollen */
  --gruen-text: #E9EFE9;   /* "Ueber uns": Absaetze; Text und Verweise im Fuss */
  --gruen-linie: #3F6A55;  /* Linien der Teamliste und ueber der Copyright-Zeile */
  --gruen-bild: #2C5A44;   /* Grund unter dem Teamfoto */
  --fuss-copy: #B9CBBE;    /* Copyright-Zeile */
  --kopf-grund: rgba(247, 244, 238, 0.97);

  --schrift: Manrope, "Helvetica Neue", Arial, sans-serif;
  --titelschrift: "Cormorant Garamond", Georgia, serif;

  --breite: 1320px;
  --rand: clamp(20px, 5vw, 64px);
  --notice: 26px;          /* feste Hinweisleiste aus A17 */
  --kopf: 82px;            /* Kopfleiste: 12 + 58 + 12 */
  --leiste: 56px;          /* Anrufleiste unter 1000 px */
}


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

html { scroll-behavior: smooth; }

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

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

:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

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

.seite {
  min-height: 100vh;
  background: var(--grund);
  overflow-x: hidden;
}

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

/* Abweichung 7: liegt ausserhalb der Huelle, 40 px ab dem Seitenanfang. */
.kopf-waechter {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40px;
  pointer-events: none;
}

.skip {
  position: absolute;
  top: calc(var(--notice) + 8px);
  left: 50%;
  z-index: 60;
  transform: translate(-50%, -400%);
  padding: 14px 24px;
  background: var(--gruen);
  color: var(--grund);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
}

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


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

/* Abweichung 7: Grundzustand ist der gescrollte Zustand des Entwurfs. */
.kopf {
  position: fixed;
  top: var(--notice);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--kopf-grund);
  box-shadow: 0 1px 0 var(--linie);
}

.kopf.ist-bereit { transition: background .25s, box-shadow .25s; }

.kopf.ist-oben {
  background: transparent;
  box-shadow: none;
}

.kopf.ist-oben:has(.menue[open]) { background: var(--kopf-grund); }

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

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

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

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

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

.kopf__link:hover { color: var(--gruen); }

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

/* Knoepfe: gross im Hero, klein in der Kopfleiste, mittel in "Leistungen". */
.knopf {
  font-size: 16px;
  font-weight: 600;
  color: var(--grund);
  background: var(--gruen);
  text-decoration: none;
  padding: 18px 30px;
  border-radius: 2px;
}

.knopf--kopf {
  font-size: 15px;
  padding: 13px 22px;
}

.knopf--leistungen {
  display: inline-block;
  margin-top: 32px;
  padding: 17px 28px;
}

.knopf:hover {
  background: var(--gruen-tief);
  color: var(--grund);
}

/* Handy-Menue: <details> statt Knopf mit Zustand (Abweichung 8). */
.menue__knopf {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--tinte);
  border-radius: 2px;
  cursor: pointer;
  list-style: none;
}

.menue__knopf span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--tinte);
}

/* Bezugsrahmen ist die feste Kopfleiste, nicht <details>: So liegt die Liste
   ueber die volle Breite direkt unter der Leiste, wie im Entwurf. Ihr
   Innenabstand ist dort fest 20 px, nicht der Seitenrand. */
.menue__liste {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 28px;
  background: var(--grund);
  border-top: 1px solid var(--linie);
}

/* Im Entwurf zieht die gescrollte Kopfleiste ihre Linie unter dem Menue. */
.kopf:not(.ist-oben) .menue__liste { box-shadow: 0 1px 0 var(--linie); }

.kopf.ist-bereit .menue__liste { transition: box-shadow .25s; }

.menue__link {
  font-family: var(--titelschrift);
  font-size: 28px;
  color: var(--tinte);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}

.menue__beratung {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--grund);
  background: var(--gruen);
  text-decoration: none;
  padding: 16px 22px;
  border-radius: 2px;
  text-align: center;
}


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

.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background: var(--himmel);
  scroll-margin-top: var(--notice);
}

.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 60%;
}

/* Abweichung 6, unter 1000 px: beide Verlaeufe des Entwurfs plus eine
   gleichmaessige Flaeche 0,65 darunter. Ab 1000 px siehe unten. */
.hero__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247, 244, 238, 0.94) 0%, rgba(247, 244, 238, 0.86) 34%, rgba(247, 244, 238, 0.45) 56%, rgba(247, 244, 238, 0) 74%),
    linear-gradient(180deg, rgba(247, 244, 238, 0.55) 0%, rgba(247, 244, 238, 0) 55%),
    linear-gradient(rgba(247, 244, 238, 0.65), rgba(247, 244, 238, 0.65));
}

.hero__inhalt {
  position: relative;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(130px, 17vh, 190px) var(--rand) 80px;
  box-sizing: border-box;
}

.hero__titel {
  margin: 0;
  max-width: 680px;
  font-family: var(--titelschrift);
  font-weight: 500;
  font-size: clamp(42px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--tinte);
  text-wrap: balance;
}

.hero__vorspann {
  margin: 28px 0 0;
  max-width: 520px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--vorspann);
  text-wrap: pretty;
}

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

.hero__link {
  font-size: 16px;
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1px solid var(--tinte);
  padding-bottom: 4px;
}

/* Abweichung 20: --gruen-tief statt --gruen, der Verweis liegt auf dem Foto. */
.hero__link:hover {
  color: var(--gruen-tief);
  border-color: var(--gruen-tief);
}


/* ── Wiederkehrende Bausteine ────────────────────────────────────────────── */

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

.vorzeile--hero { margin-bottom: 22px; }

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

.titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  color: var(--tinte);
  text-wrap: balance;
}

/* Abweichung 3: 80 px wie im Entwurf plus die Hinweisleiste. */
.objekte,
.leistungen,
.team,
.ablauf,
.kontakt { scroll-margin-top: calc(var(--notice) + 80px); }


/* ── Warum ───────────────────────────────────────────────────────────────── */

.warum { padding: clamp(80px, 10vw, 140px) 0; }

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

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

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

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

/* Ohne Gewicht wie im Entwurf (Abweichung 2). */
.wert__ziffer {
  font-family: var(--titelschrift);
  font-size: 28px;
  color: var(--gruen);
}

.wert__titel {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
}

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


/* ── Objekte ─────────────────────────────────────────────────────────────── */

.objekte {
  padding: clamp(80px, 9vw, 128px) 0;
  background: var(--weiss);
}

.objekte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 48px;
}

.objekte__titelblock { max-width: 640px; }

/* Die einzige Abschnittsueberschrift ohne `text-wrap: balance` im Entwurf. */
.objekte__titel { text-wrap: wrap; }

/* Abweichung 9: die Radios sind nur optisch entfernt. */
.filter__wahl {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter__knopf {
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 2px;
  border: 1px solid var(--filterrand);
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
}

.filter__knopf:hover { border-color: var(--gruen); }

/* Das gewaehlte Radio faerbt sein Label; "Alle" braucht keine
   Ausblende-Regel. */
#filter-alle:checked ~ .objekte__kopf [for="filter-alle"],
#filter-haus:checked ~ .objekte__kopf [for="filter-haus"],
#filter-wohnung:checked ~ .objekte__kopf [for="filter-wohnung"] {
  border-color: var(--gruen);
  background: var(--gruen);
  color: var(--grund);
}

#filter-haus:checked ~ .objekte__raster .objekt:not(.is-haus),
#filter-wohnung:checked ~ .objekte__raster .objekt:not(.is-wohnung) { display: none; }

/* Der Fokusring gehoert sichtbar an das Label, nicht an das versteckte
   Radio, sonst sieht man beim Tabben nichts. */
#filter-alle:focus-visible ~ .objekte__kopf [for="filter-alle"],
#filter-haus:focus-visible ~ .objekte__kopf [for="filter-haus"],
#filter-wohnung:focus-visible ~ .objekte__kopf [for="filter-wohnung"] {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
}

.objekte__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
}

.objekt {
  display: flex;
  flex-direction: column;
  background: var(--grund);
  border: 1px solid var(--sand);
}

.objekt__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sand);
  overflow: hidden;
}

.objekt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.objekt__art {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--grund);
  color: var(--tinte);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 2px;
}

.objekt__inhalt {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

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

.objekt__titel {
  margin: -6px 0 0;
  font-family: var(--titelschrift);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.15;
  color: var(--tinte);
  text-wrap: balance;
}

.objekt__daten {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.objekt__daten dt {
  font-size: 12px;
  color: var(--leise);
}

.objekt__daten dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.objekt__fuss {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.objekt__preis {
  margin: 0;
  font-family: var(--titelschrift);
  font-size: 26px;
  font-weight: 600;
  color: var(--tinte);
}

.objekt__anfrage {
  font-size: 15px;
  font-weight: 600;
  color: var(--gruen);
  text-decoration: none;
  border-bottom: 1px solid var(--gruen);
  padding: 10px 0 2px;
}

.objekte__hinweis {
  margin: 40px 0 0;
  font-size: 14px;
  color: var(--leise);
}

.objekte__hinweis a {
  color: var(--gruen);
  font-weight: 600;
}


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

.leistungen { padding: clamp(80px, 10vw, 140px) 0; }

/* Abweichung 14: die linke Spalte ohne `position: sticky`. */
.leistungen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.leistungen__text {
  margin: 24px 0 0;
  max-width: 440px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}

.leistungen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leistungen__liste li {
  padding: 30px 0;
  border-top: 1px solid var(--linie);
}

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

.leistungen__liste h3 {
  margin: 0 0 10px;
  font-family: var(--titelschrift);
  font-size: 30px;
  font-weight: 600;
}

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


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

.team {
  padding: clamp(80px, 9vw, 128px) 0;
  background: var(--gruen);
  color: var(--grund);
}

.team__titel {
  margin: 0 0 48px;
  max-width: 860px;
  color: var(--grund);
}

.team__figur { margin: 0; }

.team__bild {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 939;
  object-fit: cover;
  display: block;
  background: var(--gruen-bild);
}

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

.team__raster {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
}

.team__name {
  margin: 0 0 6px;
  font-family: var(--titelschrift);
  font-size: 34px;
  font-weight: 600;
  color: var(--grund);
}

.team__rolle {
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gruen-leise);
}

.team__text {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--gruen-text);
}

.team__text:last-child { margin-bottom: 0; }

.team__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.team__liste li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid var(--gruen-linie);
}

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

.team__person {
  font-size: 18px;
  font-weight: 600;
}

.team__aufgabe {
  font-size: 15px;
  color: var(--gruen-leise);
}


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

.ablauf { padding: clamp(80px, 10vw, 140px) 0; }

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

/* Die Datei ist 4:3, der Kasten 4:5: der Zuschnitt aus der Mitte ist
   gewollt (Entwurf und Bildliste). */
.ablauf__bild {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}

.ablauf__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ablauf__titel { margin: 0 0 40px; }

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

.schritt {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
}

.schritt__nr {
  width: 44px;
  height: 44px;
  border: 1px solid var(--gruen);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--gruen);
}

.schritt__titel {
  margin: 8px 0 6px;
  font-size: 19px;
  font-weight: 600;
}

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


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

.fragen { padding: 0 0 clamp(80px, 10vw, 140px); }

.fragen__rahmen {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--rand);
}

.fragen__titel {
  margin: 0 0 32px;
  font-family: var(--titelschrift);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
  color: var(--tinte);
}

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

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

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

.faq-plus {
  font-size: 26px;
  font-weight: 400;
  color: var(--gruen);
  transition: transform .2s;
}

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

.frage__antwort {
  margin: 0 0 26px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}


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

.kontakt {
  padding: clamp(80px, 9vw, 128px) 0;
  background: var(--weiss);
}

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

.kontakt__intro {
  margin: 24px 0 40px;
  max-width: 440px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}

.kontakt__adresse {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kontakt__bezeichnung {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--leise);
}

.kontakt__link {
  font-family: var(--titelschrift);
  font-size: 30px;
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
}

.kontakt__link--mail { word-break: break-word; }

.kontakt__buero {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

.formular {
  background: var(--grund);
  border: 1px solid var(--sand);
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

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

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

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

/* Wie im Entwurf: das Auswahlfeld ohne eigenes box-sizing (der Browser
   rechnet es ohnehin border-box), Eingabe und Textfeld ausdruecklich. */
.feld__wahl,
.feld__eingabe,
.feld__text {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 12px;
  border: 1px solid var(--feldrand);
  border-radius: 2px;
  background: var(--weiss);
  color: var(--tinte);
}

.feld__wahl,
.feld__eingabe { min-height: 50px; }

.feld__eingabe,
.feld__text { box-sizing: border-box; }

.feld__text {
  line-height: 1.5;
  resize: vertical;
}

.einwilligung {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  cursor: pointer;
}

.einwilligung input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--gruen);
}

.einwilligung a {
  color: var(--gruen);
  font-weight: 600;
}

/* Abweichung 11: margin-bottom steht fuer den Abstand vor der Statuszeile,
   die im Entwurf leer hinter dem Knopf stand. */
.formular__knopf {
  align-self: flex-start;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--grund);
  background: var(--gruen);
  border: none;
  padding: 18px 30px;
  min-height: 54px;
  margin-bottom: 22px;
  border-radius: 2px;
  cursor: pointer;
}

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


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

.fuss {
  background: var(--gruen-tief);
  color: var(--gruen-text);
  padding: 64px 0 calc(40px + var(--leiste));
}

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

.fuss__oben {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

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

/* Abweichung 13: min-width. Der Browser rechnet dieses Raster mindestens drei
   Spalten breit (3 x 180 + 2 x 32 = 604 px); schmaler als die Zeile darf es
   damit nicht werden. Ab 672 px Fensterbreite aendert das nichts. */
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  flex: 1;
  max-width: 720px;
  min-width: min(100%, 3 * 180px + 2 * 32px);
}

.fuss__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.fuss__text a { color: var(--gruen-text); }

.fuss__recht {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}

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

.fuss__copy {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--gruen-linie);
  font-size: 13px;
  color: var(--fuss-copy);
}

/* Abweichung 12: auf #163828 waere der Ring zu schwach. */
.fuss :focus-visible { outline-color: var(--grund); }


/* ── Anrufleiste · unter 1000 px fest am unteren Rand ────────────────────── */

.anrufleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--grund);
  border-top: 1px solid var(--linie);
}

.anruf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
}

.anruf--beratung {
  color: var(--grund);
  background: var(--gruen);
}

/* Abweichung 12: der Ring liegt hier innen. */
.anruf:focus-visible { outline-offset: -4px; }
.anruf--beratung:focus-visible { outline-color: var(--grund); }


/* ── Rechtlicher Hinweis am Seitenende (V17) ─────────────────────────────── */

.rechtliches {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 28px var(--rand) calc(40px + var(--leiste));
  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;
}


/* ── Breiten · dieselbe Grenze wie im Skript des Entwurfs (isDesktop) ────── */

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

  /* Abweichung 6, ab 1000 px: die Verlaeufe des Entwurfs, nur die Stufe bei
     56 % mit 0,60 statt 0,45 Deckung. */
  .hero__schleier {
    background:
      linear-gradient(90deg, rgba(247, 244, 238, 0.94) 0%, rgba(247, 244, 238, 0.86) 34%, rgba(247, 244, 238, 0.6) 56%, rgba(247, 244, 238, 0) 74%),
      linear-gradient(180deg, rgba(247, 244, 238, 0.55) 0%, rgba(247, 244, 238, 0) 55%);
  }

  .fuss { padding-bottom: 40px; }
  .anrufleiste { display: none; }
  .rechtliches { padding-bottom: 40px; }
}


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

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