/* ============================================================================
   FERIENWOHNUNG AM KANAL — Ferienwohnung im Altbau in Berlin Kreuzberg
   Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu
   Hover, Fokus und das Aufklappen der Fragen. Kein Parallax, kein Pinning,
   kein Scrub, kein Zaehler, kein Bildwechsel, kein
   `background-attachment: fixed`.

   HERKUNFT
   --------
   1:1 uebertragen aus dem Claude-Design-Entwurf "Ferienwohnung Am Kanal.dc.html"
   (Projekt 4f6ae890-632e-4824-b183-e3fdc8ab05ad; die Datei lag Base64-verpackt
   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 und Bildzuschnitte wie im Entwurf;
   Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig.
   Kopf, Hero und Fuss sind gebaut wie bei der Schwester aus demselben
   Projekt, public/beispiele/kiosk-wolff/.

   Der Entwurf laedt Gilda Display und Jost von Google Fonts und die
   Laufzeitdatei der Claude-Design-Umgebung. Er traegt Hover-Angaben dieser
   Umgebung an acht Knoten (vier Menuepunkte, Kopf-Knopf, Hero-Knopf,
   "Zimmer ansehen", Formular-Knopf), zwoelf Bedingungsbloecke sc-if
   (Menuezeile, Menue-Knopf, Handy-Menue, Preisrechnung, Preis-Hinweis, fuenf
   Fehlermeldungen, Statusmeldung, Anrufleiste), zwei Schleifen sc-for
   (Saisonpreise, Zeilen der Preisrechnung) und eine `DCLogic`-Klasse mit
   Scroll- und Breitenzustand, Preisrechner 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 1360 px plus
   Innenabstand), der Preiskasten und das Formular rechnen deshalb
   content-box; border-box rechnen nur der Hero-Inhalt, die Eingabefelder und
   das Textfeld, wie dort angegeben (Auswahlfeld und Knoepfe rechnen es vom
   Browser aus). Ab 1360 px Fensterbreite beginnt der Hero-Text deshalb
   weiter innen als die Abschnitte (bei 1440 px x = 104 statt 64) — so im
   Entwurf.

   Was der Entwurf je nach Fensterbreite per Skript umschaltet, steht hier in
   Media Queries an denselben Grenzen, nur min-width (V5):
     760 px    Bildausschnitt und Schleier im Hero
     1100 px   Menuezeile statt Menue-Knopf, Anrufleiste weg, Hero unten
               90 statt 130 px, Fuss unten 40 statt 96 px, Zimmer 2 mit dem
               Text links
     1280 px   Bildausschnitt und Schleier im Hero
   Die Raster laufen wie im Entwurf ohne Media Query ueber
   `repeat(auto-fit, minmax(...))`. Die Zimmer stehen deshalb schon ab 989 px
   zweispaltig, die Reihenfolge von Zimmer 2 wechselt aber erst bei 1100 px;
   dazwischen steht auch dort das Bild links — so im Entwurf. Das Fussraster
   hat dort als einziges kein min() und braucht Abweichung 18.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Elemente und das Werkzeug-Skript der
       Claude-Design-Umgebung, die Bedingungsbloecke und Schleifen, die
       Platzhalter in doppelten geschweiften Klammern, die Hover-Angaben,
       `onClick`/`onChange`/`onSubmit` und `DCLogic` sind weg. Inline-Stile
       sind Klassen mit den Werten aus `:root`, die Hover-Angaben sind
       `:hover`, die Saisonpreise sind ausgeschrieben. Die globale Regel
       `a:hover { color: #9C4A2F }` des Entwurfs fehlt: Jeder Textverweis
       setzt dort seine Farbe inline, die Regel wirkte also nirgends. Hover
       gibt es genau dort, wo der Entwurf eine Hover-Angabe traegt. Die
       kurzen Striche vor den Merkmalen der Zimmer sind `::before` statt
       leerer <span> mit aria-hidden — gleiche Lage, gleiches Mass.
    2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die
       Familien und Schnitte des Entwurfs: Gilda Display 400 (statisch,
       20 204 B) und Jost (variable Datei, Achse 100-900, freigegeben 400-600
       wie im Entwurf bestellt, 26 576 B), latin-Teilmenge mit demselben
       `unicode-range` wie bei Google; beide Dateien byte-gleich mit
       kiosk-wolff. Zusammen 46 780 B, Budget 120 KB. Kein preconnect, kein
       Stylesheet von Google. Der Entwurf nutzt keine Kursive. Das "+" der
       Fragen verlangt Jost 300, das weder der Entwurf noch diese Seite
       laedt; der Browser nimmt hier wie dort 400. Der Wert bleibt stehen,
       das Bild ist dasselbe.
    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 110 statt 84 px Abstand, und
       #start haelt 26 px, damit der Logo-Verweis wie im Entwurf ganz oben
       landet. Der Reitertitel "Am Kanal | ..." beginnt nicht mit dem
       Firmennamen; das Umbrand-Skript laesst ihn deshalb stehen (der Titel
       bleibt woertlich, Entscheidung 1).
    4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und
       og:description enden auf "Fiktives Beispielprojekt."
    5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien unter img/ statt
       fewo/, WebP bleibt WebP, PNG bleibt PNG. Das Titelbild ist von
       2400 x 1019 auf 1920 x 815 px verkleinert und wiegt 322 860 B — mehr
       als die 250 KB, die die Basis-Stufe dem Hero-Bild laesst. Staerker
       verdichten laesst Entscheidung 6 nicht zu; das ist offen.
       `width`/`height` im Markup nennen die echten Masse (815 statt 1018,
       1737 statt 1738). Genau ein Bild vorgeladen, das Titelbild (V18);
       og:image zeigt auf img/hero-aussen.webp.
    6. KOPFLEISTE VON ANFANG AN HINTERLEGT (V9). Der Entwurf laesst sie am
       Seitenanfang durchsichtig ueber dem Titelbild und hinterlegt sie erst
       nach 40 px Scrollen mit rgba(246,243,238,.97) und der Linie
       0 1px 0 #E2DCD2. Durchsichtig liegt ihre Schrift auf dem Foto unter
       4,5 : 1 (siehe KONTRASTE). Sie steht deshalb immer so, wie der Entwurf
       sie nach dem Scrollen zeigt. Damit entfallen der Scroll-Zustand und
       der Uebergang `background .25s, box-shadow .25s`, weil sich nichts
       mehr aendert.
    7. HERO-VORZEILE UND HOVER VON "ZIMMER ANSEHEN" IN #7E3A24 (V9). Die
       Vorzeile "Ferienwohnung in Berlin Kreuzberg" steht im Entwurf in
       #9C4A2F auf dem Schleier. Der laesst je nach Stelle 5 bis 17 % Foto
       durch, und am echten Titelbild faellt sie dort, auch mit dem Schleier
       aus Abweichung 19, bis auf 4,11 : 1 (unter 760 px bis 4,23); "Zimmer
       ansehen" faellt beim Darueberfahren bis auf 2,78 : 1. Beide nehmen
       die dunklere Terrakotta, die der Entwurf selbst fuer seine Knoepfe
       beim Darueberfahren fuehrt, also keine neue Farbe: Vorzeile
       mindestens 5,61, Verweis beim Darueberfahren mindestens 5,45 : 1
       (Werte unter KONTRASTE). Zwischen 760 und 1279 px reicht auch
       #7E3A24 beim Darueberfahren nicht, dort gilt Abweichung 20. Die
       knappere Abdunklung im selben Ton (#93462C) fiele durch: Vorzeile
       bis 4,48, beim Darueberfahren bis 4,35 : 1. Alle anderen Vorzeilen
       bleiben #9C4A2F.
    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, und traegt unten die Linie, die dort
       die gescrollte Kopfleiste zieht. 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. PREISRECHNER PER KLEINEM SKRIPT (V8, Entscheidung 5). js/seite.js
       rechnet mit denselben Preisen, Regeln und Saetzen wie die `DCLogic`
       des Entwurfs (quote, renderVals) und setzt wie dort das frueheste An-
       und Abreisedatum. Ohne Skript bleibt der Kasten "Ihr Preis" verborgen:
       Sein Satz "... dann berechnen wir Ihren Preis sofort" waere dann ein
       Versprechen ohne Deckung (V12). Mit Skript steht er da wie im Entwurf.
   10. 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.
   11. FOKUSRING AUF DUNKLEM GRUND (V9, Nicht-Text). Der Ring des Entwurfs
       (#9C4A2F) erreicht im Fuss nur 2,71 : 1; dort ist er #F6F3EE
       (14,96 : 1). In der Anrufleiste liegt er innen: aussen laege er links
       und unten ausserhalb des Fensters und zwischen den Knoepfen auf dem
       Terrakotta-Knopf (1,00 : 1). Innen: #9C4A2F auf #F6F3EE 5,52 : 1,
       #F6F3EE auf #9C4A2F 5,52 : 1.
   12. PLATZHALTER IM TEXTFELD (V9). Der Entwurf setzt keine Farbe; die
       Browser zeigen ihn hellgrau, je nach Browser bis hinunter auf
       2,35 : 1. Hier #66625A, deckend, die Farbe der kleinen Bezeichnungen
       des Entwurfs: 6,07 : 1 auf #FFFFFF.
   13. 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.
   14. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage). Unter
       1100 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.
   15. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Kreuzberger Weg 112, 10999 Berlin, 030 123456789,
       fewo@eineuroweb.de. Benedikt hat sie geprueft.
   16. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: <html lang="de">, der
       Sprungverweis "Zum Inhalt springen" mit `id="main"` an <main>, und
       `decoding="async"` an beiden Logos.
   17. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser
       /favicon.ico an der Wurzel ab, und die App liefert dort nichts (404
       auf dem Entwicklungsserver). Wie in jeder anderen Vorlage steht es als
       data:-Adresse im Kopf (V3): eine Flaeche in --akzent, ohne Buchstaben,
       damit die Umbrandung nichts Fremdes stehen laesst.
   18. 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 636 px Fensterbreite ragt es ueber den
       Rand, und der Seitenrahmen (overflow-x: hidden) schneidet es ab: Bei
       360 px stehen Impressum und Datenschutzerklaerung bei 444-624 px, also
       ausserhalb des Bildes. Bis 671 px ragt es in den Innenabstand. Ein
       `min-width: min(100%, 604px)` laesst das Raster dort auf die
       Zeilenbreite schrumpfen. Ab 672 px ist alles wie im Entwurf.
   19. SCHLEIER AB 1280 PX: HALT 0,86 BEI 45 STATT 38 % (V9). Ab 1280 px
       endet die erste Zeile der h1 ("Altbaucharme am") bei bis zu 51,7 %
       der Breite (1392 px; ab 1394 px bricht sie dreizeilig um). Der
       Schleier des Entwurfs deckt dort nur noch 0,48, und je nach
       Fensterhoehe liegt das letzte "m" auf dem schwarzen Balkongitter:
       Das Foto ist per object-fit: cover beschnitten, die Hoehe verschiebt
       den Ausschnitt. So faellt die h1 bis auf 3,86 : 1 (1380 x 1080 px).
       Bei 3840 px Breite steht der ganze Textblock im ausduennenden Teil;
       dort fallen auch der Vorspann (4,36) und selbst die Vorzeile in
       #7E3A24 (4,02 : 1) durch. Der Halt 0,86 steht deshalb bei 45 %, die
       uebrigen Halte bleiben (0,94 bei 0 %, 0,3 bei 58 %, 0 bei 72 %). An
       der Kante der h1 deckt der Schleier dann noch 0,57: Selbst ueber
       einem schwarzen Bildpunkt haelt jede Schrift im Hero ab 1280 px mehr
       als 4,5 : 1 (mit diesen Texten, gerechnet bis 5120 px Breite; Werte
       unter KONTRASTE), also bei jedem Foto an dieser Stelle. 42 % reicht
       nicht: am Foto faellt die h1 bei 1390 px im ganzen Zeilenkasten bis
       4,19 : 1 (ueber Schwarz 4,07). 44 % hielte ueber Schwarz knapp nicht
       (h1 4,49).
   20. "ZIMMER ANSEHEN" BEIM DARUEBERFAHREN, 760-1279 PX (V9). In diesen
       Breiten steht der Verweis rechts neben dem Knopf, bei 760 px bis
       63 % der Breite, wo der Schleier von 0,9 auf 0,45 ausduennt. Am Foto
       faellt die Schrift beim Darueberfahren dort selbst in #7E3A24
       (Abweichung 7) bis auf 3,80 : 1 (760 x 1132 px), in #9C4A2F
       (Entwurf) bis auf 2,78 : 1. Hier bleibt sie deshalb --tinte
       (mindestens 7,42 : 1), nur die Linie wird #7E3A24 (mindestens
       3,55 : 1; sie ist keine Schrift). Die Rueckmeldung beim
       Darueberfahren bleibt sichtbar, ohne neue Farbe. Unter 760 und ab
       1280 px faerbt sich die Schrift wie in Abweichung 7.

   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 #222019      auf --grund #F6F3EE ......... 14,72 : 1   OK
     --tinte              auf --weiss #FFFFFF ......... 16,30 : 1   OK
     --tinte              auf --sand #ECE6DC .......... 13,13 : 1   OK
     --vorspann #3A372F   auf --weiss (Merkmale) ...... 11,88 : 1   OK
     --text #57534A       auf --grund .................  6,92 : 1   OK
     --text               auf --weiss .................  7,66 : 1   OK
     --leise #66625A      auf --grund .................  5,48 : 1   OK
     --leise              auf --weiss .................  6,07 : 1   OK
     --akzent #9C4A2F     auf --grund .................  5,52 : 1   OK
     --akzent             auf --weiss .................  6,12 : 1   OK
     --akzent-tief #7E3A24 auf --grund ................  7,54 : 1   OK
     --grund              auf --akzent (Knoepfe) ......  5,52 : 1   OK
     --grund              auf --akzent-tief (Hover) ...  7,54 : 1   OK
   PREISE, Grund --preise #2B2622:
     --p-vorzeile #E3C2B3 ..............................  9,00 : 1   OK
     --grund #F6F3EE ................................... 13,52 : 1   OK
     --hell #E6E0D8 .................................... 11,42 : 1   OK
     --p-leise #D2C9BF .................................  9,16 : 1   OK
   FUSS, Grund --fuss #221E1A:
     --hell #E6E0D8 .................................... 12,63 : 1   OK
     --weiss (Impressum, Datenschutz) .................. 16,55 : 1   OK
     --fuss-copy #B9AFA4 ...............................  7,67 : 1   OK

   KOPFLEISTE. rgba(246,243,238,.97) laesst 3 % durch. Gerechnet gegen alles,
   was darunter durchlaeuft: ueber Schwarz wird sie #EFECE7 (--tinte 13,83,
   --akzent beim Darueberfahren 5,19), ueber #2B2622 und #221E1A #F0EDE8
   (13,96 / 5,24), ueber Weiss #F6F3EF (14,73 / 5,53) — OK.
   Durchsichtig wie im Entwurf am Seitenanfang, gemessen am echten Titelbild
   unter dem Schleier des Entwurfs, Verfahren wie unter TITELBILD (Fenster
   dort ohne die feinen Schritte, ab 1280 px 338 Fenster bis 3840 x
   1600 px); je Bereich der kleinste Wert, (a) / (b):
     760-1099 px  Menue-Knopf (keine Schrift, braucht 3 : 1): Rand 1,56,
                  Striche 2,25 : 1 ............................. FAELLT DURCH
     1100-1279 px Menuezeile 5,51 / 5,51 : 1, beim Darueberfahren (#9C4A2F)
                  aber "Lage" 3,60 / 3,37 : 1 .................. FAELLT DURCH
     ab 1280 px   Telefon 2,06 / 1,74, "Lage" 2,75 / 2,56, "Preise"
                  3,34 / 3,06, "Zimmer" 3,88 / 3,88 : 1 ........ FAELLT DURCH
   Mit dem Schleier aus Abweichung 19 faellt sie ab 1280 px ebenso durch
   (Telefon bis 1,60 : 1). Unter 760 px reichte es (Menue-Knopf mindestens
   11,80 : 1 auf dem Schleier 0,9), dort braeuchte der Wechsel beim
   Scrollen aber weiter ein Skript.
   > Folge: Abweichung 6.

   TITELBILD. Dunkle Schrift auf hellem Schleier ueber dem Foto. Der
   unguenstigste denkbare Fall ist ein schwarzer Bildpunkt unter dem Schleier:
     Deckung 0,95 -> #EAE7E2: --tinte 13,21, --vorspann 9,63, --akzent-tief 6,76
     Deckung 0,94 -> #E7E4E0: --tinte 12,86, --vorspann 9,38, --akzent-tief 6,58
     Deckung 0,90 -> #DDDBD6: --tinte 11,78, --vorspann 8,59, --akzent-tief 6,03
     Deckung 0,86 -> #D4D1CD: --tinte 10,71, --vorspann 7,81, --akzent-tief 5,48
     Deckung 0,70 -> #ACAAA7: --tinte  7,03, --vorspann 5,13
   Ab 760 px laeuft der Schleier nach rechts aus (0,45 / 0,30 / 0), dort
   zaehlt die Stelle. Ab 1280 px (Abweichung 19) endet jede Textzeile bei
   hoechstens 51,7 % der Breite, wo er noch 0,57 deckt (h1 bei 1392 px);
   Vorzeile, Vorspann und Verweis enden bis 5120 px Breite vor 47 %. Ein
   schwarzer Bildpunkt an der duennsten Stelle unter jeder Zeile ergaebe
   dort: h1 4,80, Vorzeile 5,41, Vorspann 6,33, Verweis beim
   Darueberfahren 4,60 : 1 — ab 1280 px haelt diese Schrift also bei jedem
   Foto (bis 5120 px Breite gerechnet; laengere Texte reichen weiter nach
   rechts und muessen neu gerechnet werden). Von 760 bis 1279 px gilt nur
   der Messwert an diesem Foto.
   Gemessen in Chrome an dieser Seite mit den Dateien aus img/: Schrift
   unsichtbar geschaltet, dann jeder Bildpunkt gegen die Schriftfarbe
   gerechnet, (a) unter der Schrift und 1 px rundum, (b) im ganzen Kasten
   jeder Textzeile. Das Foto ist per object-fit: cover beschnitten; welcher
   Teil unter der Schrift liegt, haengt von Breite UND Hoehe des Fensters
   ab. Deshalb rund 3 600 Fenster: 320-759 x 320-1200 px; 760-1279 x
   360-1924 px (760-1000 px in 8er-, Hoehen ab 700 px in 24er-Schritten);
   1280-3840 x 600-1600 px (bis 1400 px in 10er-, 1372-1396 px in 2er-,
   die Hoehen in 40er-Schritten). Je Element der kleinste Wert, (a) / (b):
                                  unter 760 px   760-1279 px    ab 1280 px
     h1 --tinte ................  11,14/11,14    11,89/11,81    5,36/ 4,96
     Vorspann --vorspann .......   7,94/ 7,94     4,68/ 4,56    7,11/ 7,11
     Vorzeile --akzent-tief ....   5,77/ 5,77     5,99/ 5,84    5,61/ 5,57
     "Zimmer ansehen" --tinte ..  10,65/10,38     7,42/ 7,11   10,90/10,81
     derselbe beim Darueberfahren  5,45/ 5,32     7,42/ 7,11    5,58/ 5,53
       (#7E3A24, von 760 bis 1279 px --tinte, Abweichung 20) ... alles OK
   Mit Farben und Schleier des Entwurfs, (a) / (b):
     Vorzeile #9C4A2F ............. bis 4,23/4,23 (unter 760 px),
                                    bis 2,95/2,87 (3840 px) .... FAELLT DURCH
     "Zimmer ansehen" beim Darueberfahren, #9C4A2F
                                    bis 2,78/2,67 (760 px) ..... FAELLT DURCH
     h1 ab 1280 px ................ bis 3,86/3,85 (1380 px) .... FAELLT DURCH
     dazu #7E3A24 beim Darueberfahren, 760-1279 px
                                    bis 3,80/3,64 (760 px) ..... FAELLT DURCH
   > Folge: Abweichungen 7, 19 und 20. `text-wrap: balance` aendert an der
   > Ueberschrift nichts: von 320 bis 3840 px in 4er-Schritten mit und ohne
   > verglichen, dieselben Umbrueche. `text-wrap: pretty` am Vorspann bricht
   > nur bei 364-384 px anders um; dort liegt er hoechstens bis 57 % der
   > Hero-Hoehe, also auf Deckung 0,86 und mehr (ueber Schwarz 7,81 : 1).
   Die Kaestchen liegen auf eigenem weissem Grund (--tinte 16,30, --akzent
   6,12), der Knopf auf --akzent (5,52) — beide nicht auf dem Foto.

   NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Rahmen der
   Eingabefelder #BCB4A6 auf #FFFFFF 2,06 : 1 — unter den 3 : 1 fuer
   Bedienelemente; Entwurf so gelassen, die Beschriftung steht ueber jedem
   Feld. Fokusring siehe Abweichung 11.
   ========================================================================= */


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

@font-face {
  font-family: "Gilda Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/gilda-display-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: "Jost";
  font-style: normal;
  font-weight: 400 600;          /* Datei traegt wght 100-900, freigegeben 400-600 */
  font-display: swap;
  src: url("../vendor/fonts/jost-400-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;
}


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

:root {
  --grund: #F6F3EE;        /* Seitengrund, Kopfleiste, Handy-Menue, Preiskasten, Formular, Knopftext */
  --weiss: #FFFFFF;        /* Zimmer, Anfrage, Kaestchen im Hero, Felder */
  --sand: #ECE6DC;         /* Grund unter den Bildern */
  --linie: #E2DCD2;        /* Linien und Rahmen */
  --feld: #BCB4A6;         /* Rahmen der Eingabefelder */
  --summe-linie: #D6CFC3;  /* Linie ueber "Gesamt" im Preiskasten */
  --tinte: #222019;        /* Text, Ueberschriften, Verweise */
  --vorspann: #3A372F;     /* Vorspann im Hero, Merkmale der Zimmer */
  --text: #57534A;         /* Fliesstext */
  --leise: #66625A;        /* kleine Bezeichnungen, Platzhalter */
  --akzent: #9C4A2F;       /* Vorzeilen, Knoepfe, Fokusring */
  --akzent-tief: #7E3A24;  /* Knopf beim Darueberfahren, Hero-Vorzeile (Abweichung 7) */
  --preise: #2B2622;       /* Grund der Preise */
  --p-vorzeile: #E3C2B3;   /* Vorzeile in den Preisen */
  --hell: #E6E0D8;         /* Absatz in den Preisen, Text im Fuss */
  --p-leise: #D2C9BF;      /* Monate, Nebenkosten, Steuerhinweis in den Preisen */
  --p-linie: #4A423C;      /* Linien in den Preisen */
  --fuss: #221E1A;         /* Grund der Fusszeile */
  --fuss-copy: #B9AFA4;    /* Copyright-Zeile */
  --fuss-linie: #3F3832;   /* Linie ueber der Copyright-Zeile */
  --kopf-grund: rgba(246, 243, 238, 0.97);

  --schrift: Jost, "Helvetica Neue", Arial, sans-serif;
  --titelschrift: "Gilda Display", Georgia, serif;

  --breite: 1360px;
  --rand: clamp(20px, 5vw, 64px);
  --notice: 26px;          /* feste Hinweisleiste aus A17 */
  --kopf: 84px;            /* Kopfleiste: 12 + 60 + 12 */
  --leiste: 56px;          /* Anrufleiste unter 1100 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(--tinte); }

:focus-visible { outline: 2px solid var(--akzent); 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);
}

.skip {
  position: absolute;
  top: calc(var(--notice) + 8px);
  left: 50%;
  z-index: 60;
  transform: translate(-50%, -400%);
  padding: 14px 24px;
  background: var(--akzent);
  color: var(--grund);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

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


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

.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__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: 60px;
  width: auto;
  display: block;
}

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

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

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

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

/* Knoepfe: gross im Hero und im Formular, klein in der Kopfleiste. */
.knopf {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grund);
  background: var(--akzent);
  text-decoration: none;
  padding: 19px 32px;
}

.knopf--klein { padding: 14px 24px; }

.knopf:hover {
  background: var(--akzent-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);
  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. */
.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);
  box-shadow: 0 1px 0 var(--linie);
}

.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__anfrage {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grund);
  background: var(--akzent);
  text-decoration: none;
  padding: 16px 22px;
  text-align: center;
}


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

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

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

.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 243, 238, 0.9) 0%, rgba(246, 243, 238, 0.86) 70%, rgba(246, 243, 238, 0.7) 100%);
}

.hero__inhalt {
  position: relative;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 140px var(--rand) 130px;
  box-sizing: border-box;
}

/* Wie die Vorzeilen der Abschnitte, aber 26 px Abstand und, Abweichung 7,
   #7E3A24 statt #9C4A2F, weil sie auf dem Schleier steht. */
.hero__vorzeile {
  margin: 0 0 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--akzent-tief);
}

.hero__titel {
  margin: 0;
  max-width: 640px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(44px, 5.8vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--tinte);
  text-wrap: balance;
}

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

.hero__merkmale {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero__merkmale li {
  padding: 9px 14px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  font-size: 14px;
  font-weight: 500;
}

.hero__merkmale .hero__merkmal-preis {
  font-weight: 600;
  color: var(--akzent);
}

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

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

/* Abweichung 7: im Entwurf #9C4A2F. Von 760 bis 1279 px Abweichung 20. */
.hero__link:hover {
  color: var(--akzent-tief);
  border-color: var(--akzent-tief);
}


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

.abschnitt {
  padding: clamp(90px, 10vw, 140px) 0;
  scroll-margin-top: calc(var(--notice) + var(--kopf));
}

.abschnitt--wohnung { padding: clamp(90px, 10vw, 150px) 0; }

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

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

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

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

/* Wohnung und Ausstattung setzen ihre Ueberschrift eine Spur kleiner. */
.titel--mittel {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
}

.bildkasten {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sand);
}

.bildkasten--hoch {
  aspect-ratio: 4 / 5;
  max-height: 720px;
}

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


/* ── Die Wohnung ─────────────────────────────────────────────────────────── */

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

.wohnung__titel { margin: 0 0 28px; }

.wohnung__text {
  margin: 0 0 16px;
  max-width: 540px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
}

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

.eckdaten {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--tinte);
}

.eckdaten > div {
  padding: 22px 0;
  border-bottom: 1px solid var(--linie);
}

.eckdaten dt {
  font-size: 13px;
  color: var(--leise);
}

.eckdaten dd {
  margin: 4px 0 0;
  font-family: var(--titelschrift);
  font-size: 28px;
}


/* ── Zimmer ──────────────────────────────────────────────────────────────── */

.zimmer__rahmen {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 120px);
}

.zimmer__titel { max-width: 720px; }

.raum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* Zimmer 2: unter 1100 px das Bild zuerst, ab 1100 px der Text (textFirst
   im Entwurf). */
.raum__wechsel { order: 2; }

.raum__vorzeile {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
}

.raum__titel {
  margin: 0 0 16px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.1;
}

.raum__text {
  margin: 0 0 22px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
}

.raum__merkmale {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 24px;
  font-size: 15px;
  color: var(--vorspann);
}

.raum__merkmale li {
  padding-left: 18px;
  position: relative;
}

/* Abweichung 1: im Entwurf ein leerer <span> mit denselben Massen. */
.raum__merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--akzent);
}


/* ── Ausstattung ─────────────────────────────────────────────────────────── */

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

.ausstattung__titel { margin: 0 0 36px; }

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

.ausstattung__liste li {
  padding: 16px 0;
  border-top: 1px solid var(--linie);
  font-size: 16px;
}

/* Die letzten beiden ziehen im Entwurf zusaetzlich die Linie unter sich.
   Einspaltig liegen deshalb zwischen Punkt 7 und 8 zwei Linien
   aufeinander — so im Entwurf. */
.ausstattung__liste li:nth-child(n + 7) { border-bottom: 1px solid var(--linie); }


/* ── Preise ──────────────────────────────────────────────────────────────── */

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

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

.preise__titel {
  margin: 0 0 24px;
  color: var(--grund);
}

.preise__text {
  margin: 0;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--hell);
}

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

.saison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 24px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid var(--p-linie);
}

.saison__name {
  margin: 0;
  font-family: var(--titelschrift);
  font-size: 26px;
  line-height: 1.2;
  color: var(--grund);
}

.saison__monate {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--p-leise);
}

.saison__preis {
  margin: 0;
  font-family: var(--titelschrift);
  font-size: 30px;
  white-space: nowrap;
  color: var(--grund);
}

.nebenkosten {
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--p-linie);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 32px;
  font-size: 15px;
  line-height: 1.55;
}

.nebenkosten dt { color: var(--p-leise); }

.nebenkosten dd {
  margin: 2px 0 0;
  font-weight: 500;
}

.preise__steuer {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--p-leise);
}


/* ── Lage ────────────────────────────────────────────────────────────────── */

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

.lage__titel { margin: 0 0 24px; }

.lage__text {
  margin: 0 0 32px;
  max-width: 500px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
}

.wege {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.wege li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--linie);
  font-size: 16px;
}

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

.wege__dauer { color: var(--leise); }

.lage__adresse {
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
}

.lage__adresse a {
  color: var(--akzent);
  font-weight: 600;
}


/* ── Gut zu wissen ───────────────────────────────────────────────────────── */

.faq { padding: 0 0 clamp(90px, 10vw, 140px); }

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

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

.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: 500;
}

/* 300 wird nicht geladen; der Browser nimmt 400 wie im Entwurf (Abweichung 2). */
.faq-plus {
  font-size: 26px;
  font-weight: 300;
  color: var(--akzent);
  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);
}


/* ── Buchungsanfrage ─────────────────────────────────────────────────────── */

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

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

/* Preiskasten. js/seite.js nimmt ihm `hidden` und schaltet zwischen Rechnung
   und Hinweis um (Abweichung 9); deshalb steht an .preis, an der Rechnung und
   am Hinweis kein `display`, sonst wirkte `hidden` nicht. */
.preis {
  background: var(--grund);
  border: 1px solid var(--linie);
  padding: 28px;
  max-width: 460px;
}

.preis__titel {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
}

.preis__liste {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}

/* Die Zeilen setzt js/seite.js vor die Summe. */
.preis__zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.preis__zeile dt { color: var(--text); }

.preis__zeile dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.preis__summe {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--summe-linie);
}

.preis__summe dt { font-weight: 600; }

.preis__summe dd {
  margin: 0;
  font-family: var(--titelschrift);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.preis__steuer {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--leise);
}

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

.kontakt {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 36px;
}

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

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

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

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

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

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

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

/* Wie im Entwurf: das Auswahlfeld ohne eigenes box-sizing (der Browser
   rechnet es ohnehin border-box), Datum, Eingabe und Textfeld ausdruecklich.
   Die Datumsfelder haben 13 px Innenabstand oben und unten, die anderen 14. */
.feld__datum,
.feld__wahl,
.feld__eingabe,
.feld__text {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 12px;
  border: 1px solid var(--feld);
  border-radius: 0;
  background: var(--weiss);
  color: var(--tinte);
}

.feld__datum { padding: 13px 12px; }

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

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

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

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

.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(--akzent);
}

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

/* Abweichung 10: 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;
  border: none;
  min-height: 56px;
  margin-bottom: 22px;
  cursor: pointer;
}


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

.fuss {
  background: var(--fuss);
  color: var(--hell);
  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: 90px;
  width: auto;
  display: block;
}

/* Abweichung 18: 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(--hell); }

.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(--fuss-linie);
  font-size: 13px;
  color: var(--fuss-copy);
}

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


/* ── Anrufleiste · unter 1100 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--anfrage {
  color: var(--grund);
  background: var(--akzent);
}

/* Abweichung 11: der Ring liegt hier innen. */
.anruf:focus-visible { outline-offset: -4px; }
.anruf--anfrage: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 · dieselben Grenzen wie im Skript des Entwurfs ──────────────── */

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

  .hero__schleier {
    background: linear-gradient(90deg, rgba(246, 243, 238, 0.95) 0%, rgba(246, 243, 238, 0.9) 52%, rgba(246, 243, 238, 0.45) 72%, rgba(246, 243, 238, 0) 88%);
  }

  /* Abweichung 20: hier steht der Verweis auf dem ausduennenden Schleier;
     beim Darueberfahren faerbt sich nur die Linie. */
  .hero__link:hover { color: var(--tinte); }
}

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

  .hero__inhalt { padding-bottom: 90px; }
  .raum__wechsel { order: 0; }
  .fuss { padding-bottom: 40px; }
  .anrufleiste { display: none; }
  .rechtliches { padding-bottom: 40px; }
}

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

  /* Abweichung 19: der Halt 0,86 steht bei 45 statt 38 %. */
  .hero__schleier {
    background: linear-gradient(90deg, rgba(246, 243, 238, 0.94) 0%, rgba(246, 243, 238, 0.86) 45%, rgba(246, 243, 238, 0.3) 58%, rgba(246, 243, 238, 0) 72%);
  }

  /* Ab hier wieder wie in Abweichung 7 (Abweichung 20 endet). */
  .hero__link:hover { color: var(--akzent-tief); }
}


/* ── 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; }

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