/* ============================================================================
   MAISON ALSTER — Friseur in Hamburg Harvestehude
   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 "Maison Alster Friseure.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 und Bildzuschnitte wie im Entwurf; Schriften 1:1; Kontaktdaten
   wie im Entwurf; Logo als Bild; Bewegung ruhig.

   Der Entwurf laedt Gilda Display und Jost von Google Fonts und die
   Laufzeitdatei der Claude-Design-Umgebung. Er traegt Hover-Angaben dieser
   Umgebung an neun Knoten (vier Menuepunkte, Kopf- und Hero-Knopf, "Preise
   ansehen", der nicht gewaehlte Preisreiter, Formular-Knopf), zwoelf
   Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, gewaehlter
   und nicht gewaehlter Reiter, Preisspalte, vier Fehlermeldungen,
   Statusmeldung, Anrufleiste), zwei Schleifen sc-for (Reiter, Preiszeilen)
   und eine `DCLogic`-Klasse mit Scroll-, Breiten-, Menue- und Reiterzustand,
   den 17 Preiszeilen 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) rechnen deshalb content-box; border-box rechnen nur der
   Hero-Inhalt, die Eingabefelder und das Textfeld, wie dort angegeben, dazu
   die beiden Stellvertreter fuer seine <button> (Menue-Knopf, Preisreiter;
   ein <button> rechnet von Haus aus border-box). Ab 1488 px Fensterbreite
   beginnen Logo und Abschnitte deshalb bei (Breite - 1360) / 2 und der
   Hero-Text 64 px weiter rechts, so wie im Entwurf.

   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: innerWidth >= 1000)
   Bildausschnitt und Schleier sind im Entwurf fuer alle Breiten gleich; der
   Schleier wechselt hier bei 1000 und 1400 px (Abweichung 6).
   Die Raster laufen wie im Entwurf ohne Media Query ueber
   `repeat(auto-fit, minmax(min(100%, X), 1fr))`; das Fussraster hat dort
   kein min() und braucht deshalb Abweichung 18.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Rahmen-Elemente der Claude-Design-
       Umgebung, die Bedingungsbloecke und Schleifen, die Platzhalter in
       doppelten geschweiften Klammern, die Hover-Angaben, `onClick`/
       `onChange`/`onSubmit`, `DCLogic`, die Laufzeitdatei und das
       Werkzeug-Skript von Claude Design sind weg. Inline-Stile sind Klassen
       mit den Werten aus `:root`, die Hover-Angaben sind `:hover`, Reiter
       und Preiszeilen sind ausgeschrieben. Die globale Regel
       `a:hover { color: #7A4E32 }` des Entwurfs fehlt: Jeder Textverweis
       setzt dort seine Farbe inline, die Regel wirkte also nirgends. Die
       beiden Schalter des Entwurfs stehen auf ihrem Vorgabewert: die Preise
       immer sichtbar (`showPrices`), die Anrufleiste unter 1000 px an
       (`mobileCallBar`).
    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. Zusammen 46 780 B, Budget 120 KB. Kein
       preconnect, kein Stylesheet von Google.
       KURSIVE: Gilda Display hat keinen kursiven Schnitt, auch bei Google
       nicht. Das "Jeden Tag." in der Ueberschrift (font-style: italic im
       Entwurf) zeigte dort deshalb eine vom Browser schraeg gestellte
       Fassung, und genau die steht hier auch: keine Kursiv-Datei, keine
       Sperre ueber font-synthesis. Das ist die eine Stelle, an der der
       Browser einen Schnitt selbst rechnet (vgl. V4); sie bleibt, weil
       Benedikt 1:1 entschieden hat und der Entwurf so aussah.
       DAS "+" DER FRAGEN bestellt im Entwurf Gewicht 300, und so steht es
       hier auch. Jost liegt dort wie hier erst ab 400 vor; der Browser
       zeichnet deshalb in beiden Faellen 400 und rechnet nichts hinunter.
    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.
    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 salon/. Das Titelbild ist von 2400 x 1018 auf 1920 x 814 px
       verkleinert (49 748 B, Budget 250 KB); `width`/`height` im Markup
       nennen die echten Masse. Genau ein Bild vorgeladen, das Titelbild;
       og:image zeigt auf img/hero.webp.
    6. SCHLEIER IM HERO JE BREITE (V9). Der Entwurf legt bei jeder Breite
       denselben Verlauf ueber das Foto: 0,92 -> 0,78 bei 32 % -> 0,2 bei
       55 % -> 0 bei 70 %. Unter 1000 px reicht die Schrift aber weiter nach
       rechts (auf dem Handy bis 95 % der Breite), und zwischen 1000 und
       1399 px steht "Jeden Tag." am Ende der zweiten Zeile ueber dem linken
       Fenster des Fotos. Dort fiel sie bis auf 1,46 : 1 (siehe KONTRASTE).
       Hier, mit denselben Deckungswerten an anderen Stellen:
         unter 1000 px   die Stufen in Pixeln hinter dem Text statt in
                         Prozent: 0,78 bis Rand + 480 px (der Text beginnt
                         am Rand und ist hier hoechstens 470 px breit), 0,2
                         bei Rand + 600 px, 0 bei Rand + 720 px. Bis etwa
                         505 px Breite liegen die Stufen jenseits des
                         Bildrands, der Schleier deckt dort also ueberall
                         mindestens 0,78. Darueber laeuft er rechts hinter
                         dem Text aus (bei 768 px ab 67 %, bei 999 px ab
                         53 % der Breite), und dort bleibt wie im Entwurf
                         das Foto zu sehen.
         1000-1399 px    die Stufe 0,78 bei 44 % statt 32 %, sonst wie dort
         ab 1400 px      der Verlauf des Entwurfs
       An jeder Stelle deckt der Schleier mindestens so stark wie im Entwurf;
       die durchsichtige Kopfleiste wird damit nicht schlechter. Eine
       dunklere Akzentfarbe allein haette nicht gereicht (selbst #6F472E
       laege bei 1280 x 768 auf 4,16 : 1).
    7. KOPFLEISTE WIE IM ENTWURF, MIT EINEM KLEINEN SKRIPT (V8, Entscheidung
       5). Der Entwurf zeigt sie am Seitenanfang durchsichtig und hinterlegt
       sie nach 40 px Scrollen mit rgba(246,241,234,.97) und der Linie
       0 1px 0 #E0D6C9; bei offenem Menue nur mit dem Grund. Durchsichtig
       haelt ihre Schrift auf dem Foto (siehe KONTRASTE), also bleibt es so.
       js/seite.js liest dafuer keine Scroll-Position: Ein 40 px hoher,
       unsichtbarer Streifen oben (.kopf-marke) meldet ueber
       IntersectionObserver, ob er noch im Bild ist, und die Leiste traegt so
       lange .is-oben. Ohne Skript steht sie von Anfang an hinterlegt, so wie
       der Entwurf sie nach dem Scrollen zeigt; durchsichtig laege ihre Schrift
       beim Scrollen ueber dem dunklen Salon-Abschnitt. Den Uebergang
       (.25 s) bekommt sie erst nach dem ersten Zustand (.is-bereit), sonst
       blendete sie beim Laden einmal aus.
    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 zieht unten die Linie, die dort
       die gescrollte Kopfleiste unter dem Menue zieht. Nach einem Sprung
       klappt js/seite.js das Menue zu (closeMenu im Entwurf) und hinterlegt
       die Leiste, solange es offen ist; ohne Skript bleibt es offen, bis man
       den Knopf noch einmal drueckt.
    9. PREISREITER OHNE SKRIPT (V8, wie der Filter in autohaus). Drei
       sichtbar versteckte Optionsfelder stehen vor dem Kopfteil und vor den
       drei Listen; :checked zeigt die gewaehlte Liste und laesst ihre
       Beschriftung aussehen wie den gedrueckten Knopf des Entwurfs. Die
       Beschriftungen rechnen border-box wie ein <button>. Klick und
       Pfeiltasten wechseln, der Fokusring sitzt an der Beschriftung. Bekannte
       Schwaeche wie in autohaus: Vorleseprogramme hoeren die drei
       Optionsfelder vor der Ueberschrift des Abschnitts.
   10. PREISSPALTE OHNE `position: sticky`. Der Entwurf gibt der linken
       Spalte `position: sticky; top: 120px`, aber sie klebt dort nie: Die
       Seitenhuelle traegt `overflow-x: hidden`, damit wird sie zum
       Bezugsrahmen fuers Kleben und scrollt selbst nicht. Gemessen laeuft die
       Spalte bei jeder Breite von 360 bis 1920 px mit. Ohne die Angabe
       entsteht dasselbe Bild. Nicht ueber `overflow-x: clip` "repariert":
       Dann klebte sie zwar, laege aber im einspaltigen Raster (unter 905 px)
       ueber der Preisliste (vier Zeilen verdeckt bei 360 und 820 px), und
       eine stehen bleibende Spalte gehoert nicht in die Basis-Stufe.
   11. SCHLUSSLINIE DER PREISLISTE. Der Entwurf zieht sie mit einem leeren
       <li>, das nur eine Linie traegt. Dieselbe Linie zieht jetzt die letzte
       Zeile unter sich (gleiches Bild, kein leerer Listenpunkt fuer
       Vorleseprogramme).
   12. 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 weisse Kasten gleich hoch
       bleibt.
   13. FOKUSRING AUF DUNKLEM GRUND (V9, Nicht-Text). Der Ring des Entwurfs
       (#7A4E32) liegt im Salon-Abschnitt bei 2,22 : 1 und im Fuss bei
       2,45 : 1; dort ist er #F6F1EA (14,02 bzw. 15,47 : 1). In der
       Anrufleiste liegt er innen: aussen laege er links und unten ausserhalb
       des Fensters und zwischen den Knoepfen auf dem dunklen Knopf. Innen:
       #7A4E32 auf #F6F1EA 6,31, #F6F1EA auf #2A211C 14,02 : 1.
   14. PLATZHALTER IM TEXTFELD (V9). Der Entwurf setzt keine Farbe; die
       Browser zeigen ihn hellgrau, je nach Browser bis hinunter auf
       2,35 : 1. Hier #6A5D54, deckend, die Farbe der kleinen Bezeichnungen
       des Entwurfs: 6,35 : 1 auf #FFFFFF.
   15. HOVER NUR MIT MAUS (V9). Alle Hover-Regeln stehen in
       `@media (hover: hover)`: Auf dem Telefon bleibt :hover nach dem Tippen
       stehen. "Preise ansehen" wechselt beim Darueberfahren die Schriftfarbe
       ausserdem erst ab 1000 px. Darunter liegt der Verweis auf dem Foto,
       und #7A4E32 kaeme dort nur auf 4,40 (Handy) bzw. knapp 4,50 : 1
       (600-999 px, siehe KONTRASTE); dort faerbt sich nur die Linie
       darunter.
   16. 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.
   17. 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.
   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 672 px Fensterbreite ragt es ueber den
       Rand, und die Seitenhuelle (overflow-x: hidden) schneidet es ab: Bei
       360 px steht "Datenschutzerklaerung" bei 444-624 px, also ausserhalb
       des Bildes. Ein `min-width: min(100%, 604px)` laesst das Raster dort
       auf die Zeilenbreite schrumpfen. Ab 672 px ist alles wie im Entwurf.
   19. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Harvestehuder Strasse 112, 20149 Hamburg, 040 123456789,
       friseur@eineuroweb.de und die Oeffnungszeiten. Benedikt hat sie
       geprueft.
   20. 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.
   21. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser
       /favicon.ico an der Wurzel ab, und die App liefert dort nichts. Wie in
       jeder anderen Vorlage steht es als data:-Adresse im Kopf (V3): eine
       Flaeche in --tinte, ohne Buchstaben, damit die Umbrandung nichts
       Fremdes stehen laesst.
   22. UEBERSCHRIFT OHNE `text-wrap: balance` (V9). Der Kontrast von "Jeden
       Tag." haengt mit daran, dass balance (aus dem Entwurf) die Ueberschrift
       ab 1362 px dreizeilig umbricht und "Jeden Tag." allein links in die
       dritte Zeile stellt. Ein Browser ohne balance bricht gierig um:
       Zwischen 1362 und 1414 px stuende "Jeden" am Ende der zweiten Zeile
       ueber dem auslaufenden Schleier (nachgemessen bis 3,51 : 1). Nur in
       solchen Browsern begrenzt ein @supports-Block die Breite der <h1> so,
       dass die Zeilen brechen wie mit balance: 8.6em ("Haar, das zu Ihnen"
       ist 8,39em breit, mit "passt." 10,97em) und ab 1362 px 8em ("Ihnen
       passt. Jeden" ist 8,08em breit). Wo balance laeuft, gilt allein der
       Wert des Entwurfs.

   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 #2A211C      auf --grund #F6F1EA ......... 14,02 : 1   OK
     --tinte              auf --weiss #FFFFFF ......... 15,76 : 1   OK
     --tinte              auf --hero-grund #EFE7DC .... 12,86 : 1   OK
     --akzent #7A4E32     auf --grund .................  6,31 : 1   OK
     --akzent             auf --weiss .................  7,09 : 1   OK
     --vorspann #3E332C   auf --grund ................. 10,90 : 1   OK
     --text #5A4E46       auf --grund .................  7,15 : 1   OK
     --text               auf --weiss .................  8,04 : 1   OK
     --leise #6A5D54      auf --grund .................  5,65 : 1   OK
     --leise              auf --weiss .................  6,35 : 1   OK
     --grund              auf --tinte (Knoepfe, Reiter)  14,02 : 1   OK
     --grund              auf --akzent (Knopf-Hover) ..  6,31 : 1   OK
   SALON, Grund --tinte #2A211C:
     --salon-zeile #D9BFA6 .............................  8,97 : 1   OK
     --salon-text #E6DCD0 .............................. 11,64 : 1   OK
     --grund #F6F1EA ................................... 14,02 : 1   OK
   FUSS, Grund --fuss #1F1915:
     --salon-text #E6DCD0 .............................. 12,84 : 1   OK
     --weiss (Impressum, Datenschutz) .................. 17,38 : 1   OK
     --fuss-copy #B8AA9B ...............................  7,67 : 1   OK

   KOPFLEISTE HINTERLEGT. rgba(246,241,234,.97) laesst 3 % durch. Gerechnet
   gegen alles, was darunter durchlaeuft: ueber #2A211C und #1F1915 wird sie
   #F0EBE4 (--tinte 13,29, --akzent beim Darueberfahren 5,98), ueber Schwarz
   #EFEAE3 (13,17 / 5,92) — OK.

   KOPFLEISTE DURCHSICHTIG am Seitenanfang (Abweichung 7). Gemessen wie
   unten beim Titelbild am echten Foto unter dem Schleier, in denselben 196
   Fenstern, je Bereich der dunkelste Punkt unter der Schrift:
     unter 1000 px   Menue-Knopf (Rand und Striche, Nicht-Text,
                     Soll 3 : 1) .................................  8,54 : 1   OK
     1000-1399 px    Menuepunkte und Telefon, --tinte ............  9,67 : 1   OK
                     Menuepunkte beim Darueberfahren, --akzent ...  4,55 : 1   OK
     ab 1400 px      Menuepunkte und Telefon, --tinte ............  9,29 : 1   OK
                     Menuepunkte beim Darueberfahren, --akzent ...  4,54 : 1   OK
   Das Logo ist ein Bild; "Termin buchen" steht auf seinem eigenen dunklen
   Knopf (--grund auf --tinte 14,02 : 1).

   TITELBILD. Dunkle Schrift auf hellem Schleier ueber dem Foto. Der
   unguenstigste denkbare Fall ist ein schwarzer Bildpunkt unter dem Schleier:
     Deckung 0,92 -> #E2DED7: --tinte 11,75, --vorspann 9,13, --akzent 5,29
     Deckung 0,78 -> #C0BCB7: --tinte  8,34, --vorspann 6,48, --akzent 3,75
   Fuer die Akzentfarbe (Vorzeile, "Jeden Tag.") und wo der Schleier
   auslaeuft, gilt deshalb nur 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 (Messung der Vorbereitung) FAELLT DURCH:
     360 x 780     Vorzeile 2,79, "Jeden Tag." 3,37, Vorspann 3,22
     390 x 844     Vorspann 2,15, "Preise ansehen" 1,46
     414 x 896     h1 Zeile 1 3,16, "Jeden Tag." 1,68, Vorzeile 2,19
     768 x 1024    "Jeden Tag." 4,43, "Preise ansehen" 3,83
     1000-1365 px  "Jeden Tag." bis 3,67 (1280 x 768), sonst >= 4,82
     ab 1366 px    alles >= 5,39 (h1 dreizeilig, "Jeden Tag." links)
   > Folge: Abweichung 6. Nachgemessen an dieser Seite:
   196 Fenster: 16 Breiten von 320 bis 999 px mit je 8 Hoehen von 568 bis
   1366 px, 15 Breiten von 1000 bis 2560 px mit 4 bis 5 Hoehen von 650 bis
   1300 px; Kopfleiste und Anrufleiste dabei ausgeblendet.
     Fenster      Vorzeile   h1    "Jeden   Vorspann  "Preise    Hover
                                    Tag."              ansehen"   ab 1000 px
     360 x 780      5,58   12,76    5,73     8,91      12,37        -
     390 x 844      5,79   12,74    5,82     8,59      10,57        -
     414 x 896      5,34   11,40    5,26     9,05      10,72        -
     600 x 1024     5,63   12,40    5,72     8,88      10,41        -
     768 x 1024     5,74   12,75    5,60     9,47      10,21        -
     820 x 1180     5,74   12,83    5,56     9,86      10,31        -
     1000 x 900     5,54   11,66    5,46     8,36      10,28       4,62
     1280 x 768     6,03    9,11    5,11     8,78      13,71       6,17
     1366 x 1080    5,69   12,55    5,64     9,22      13,53       6,08
     1399 x 900     6,04   12,30    6,09     8,64      13,45       6,05
     1400 x 900     6,00   11,62    6,07     7,48      13,36       6,01
     1440 x 900     6,00   11,42    6,04     7,14      13,27       5,97
     1920 x 1080    5,95   10,70    6,05     7,20      13,34       6,00
     2560 x 1300    5,95   10,38    6,04     7,12      13,80       6,21
   Schlechtester Wert ueber alle 196 Fenster, je Bereich:
     320-599 px    Vorzeile 5,07, h1 11,10, "Jeden Tag." 5,18, Vorspann
                   7,78, "Preise ansehen" 9,78
     600-999 px    Vorzeile 5,55, h1 12,07, "Jeden Tag." 5,30, Vorspann
                   7,80, "Preise ansehen" 10,04
     1000-1399 px  Vorzeile 5,49, h1 8,93, "Jeden Tag." 5,07, Vorspann
                   7,65, "Preise ansehen" 10,28, beim Darueberfahren 4,62
     ab 1400 px    Vorzeile 5,29, h1 10,03, "Jeden Tag." 5,20, Vorspann
                   7,12, "Preise ansehen" 10,78, beim Darueberfahren 4,85
   Alles OK. Ohne `text-wrap: balance`, mit Abweichung 22, dieselben 196
   Fenster: "Jeden Tag." mindestens 4,99 (390 x 568), Vorspann mindestens
   5,55 (1440 x 700), alles andere wie oben — OK. Ohne Abweichung 22 fiele
   "Jeden Tag." in solchen Browsern bis auf 3,51 : 1 (1400 x 1300).
   Die Hover-Farbe von "Preise ansehen" laege unter 1000 px bei 4,40
   (480 x 568) und zwischen 600 und 999 px bei knapp 4,50 (620 x 667);
   deshalb wechselt sie erst ab 1000 px (Abweichung 15).

   NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Rand der nicht
   gewaehlten Preisreiter #CFC3B4 auf #FFFFFF 1,73 : 1, Rahmen der
   Eingabefelder #BFB2A2 2,08 : 1 — beides unter den 3 : 1 fuer
   Bedienelemente; Entwurf so gelassen, die Beschriftung steht im Reiter und
   ueber jedem Feld. Fokusring #7A4E32 auf --grund 6,31, auf --weiss 7,09,
   auf dunklem Grund siehe Abweichung 13.
   ========================================================================= */


/* ── 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: #F6F1EA;        /* Seitengrund, Handy-Menue, Anrufleiste, Knopftext, Schleier */
  --weiss: #FFFFFF;        /* Preise, Formular, Felder; Impressum/Datenschutz im Fuss */
  --hero-grund: #EFE7DC;   /* Grund des Hero unter dem Foto */
  --bildgrund: #E9DFD2;    /* Grund unter den Leistungsbildern und dem Teamfoto */
  --linie: #E0D6C9;        /* Linien und Rahmen */
  --reiter-rand: #CFC3B4;  /* Rand der nicht gewaehlten Preisreiter */
  --feld: #BFB2A2;         /* Rahmen der Eingabefelder */
  --tinte: #2A211C;        /* Text, Ueberschriften, Knoepfe, Salon-Grund */
  --vorspann: #3E332C;     /* Vorspann im Hero */
  --text: #5A4E46;         /* Fliesstext */
  --leise: #6A5D54;        /* Preiszusatz, Bildunterschrift, Bezeichnungen, Platzhalter */
  --akzent: #7A4E32;       /* Vorzeilen, "Jeden Tag.", Nummern, Rollen, Hover, Fokusring */
  --salon-bild: #3A2F28;   /* Grund unter dem Strassenbild */
  --salon-zeile: #D9BFA6;  /* Vorzeile und Zwischentitel im Salon */
  --salon-text: #E6DCD0;   /* Absatz im Salon, Text im Fuss */
  --fuss: #1F1915;         /* Grund der Fusszeile */
  --fuss-linie: #3D332C;   /* Linie ueber der Copyright-Zeile */
  --fuss-copy: #B8AA9B;    /* Copyright-Zeile */
  --kopf-grund: rgba(246, 241, 234, 0.97);

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

  --breite: 1360px;
  --rand: clamp(20px, 5vw, 64px);
  --abschnitt: clamp(90px, 10vw, 140px);
  --notice: 26px;          /* feste Hinweisleiste aus A17 */
  --sprung: 84px;          /* scroll-margin-top der Sprungziele im Entwurf */
  --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(--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(--tinte);
  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); }

/* So steht es im Entwurf: `.unsichtbar` traegt die Ueberschrift der
   Leistungen, die nur Vorleseprogramme lesen. */
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


/* ── Kopfleiste (Abweichung 7) ───────────────────────────────────────────── */

/* Die obersten 40 px der Seite; js/seite.js beobachtet sie. */
.kopf-marke {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40px;
  pointer-events: none;
}

.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.is-bereit { transition: background .25s, box-shadow .25s; }

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

.kopf.is-oben.is-menue { background: var(--kopf-grund); }

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

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

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

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

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

.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(--tinte);
  text-decoration: none;
  padding: 19px 32px;
}

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

/* 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. Die Linie
   unten zieht im Entwurf die gescrollte Kopfleiste; am Seitenanfang fehlt
   sie dort wie hier. */
.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);
}

.kopf.is-oben .menue__liste { box-shadow: none; }

.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__termin {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grund);
  background: var(--tinte);
  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(--hero-grund);
  scroll-margin-top: var(--notice);
}

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

/* Abweichung 6: unter 1000 px stehen die Stufen in Pixeln hinter dem Text
   (er beginnt bei --rand und ist hier hoechstens 470 px breit), darueber
   siehe unten. */
.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(246, 241, 234, 0.92) 0%, rgba(246, 241, 234, 0.78) calc(var(--rand) + 480px), rgba(246, 241, 234, 0.2) calc(var(--rand) + 600px), rgba(246, 241, 234, 0) calc(var(--rand) + 720px));
}

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

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

.vorzeile--weit { margin-bottom: 26px; }

.vorzeile--salon { color: var(--salon-zeile); }

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

/* Abweichung 2: Gilda Display hat keine Kursive; der Browser stellt die
   Schrift schraeg, wie im Entwurf. */
.hero__titel em {
  font-style: italic;
  color: var(--akzent);
}

.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__knoepfe {
  margin-top: 42px;
  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;
}


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

.abschnitt {
  padding: var(--abschnitt) 0;
  scroll-margin-top: calc(var(--notice) + var(--sprung));
}

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

/* Im Entwurf bei Team, Salon und Termin, nicht bei den Preisen. */
.titel--balance { text-wrap: balance; }

.bildkasten {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bildgrund);
}

.bildkasten--quer {
  aspect-ratio: 3 / 2;
  background: var(--salon-bild);
}

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


/* ── Unsere Haltung ──────────────────────────────────────────────────────── */

.intro { padding: clamp(90px, 11vw, 160px) 0; }

.intro__innen {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--rand);
  text-align: center;
}

.intro__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.25;
  color: var(--tinte);
  text-wrap: balance;
}


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

.leistungen {
  padding: 0 0 var(--abschnitt);
  scroll-margin-top: calc(var(--notice) + var(--sprung));
}

.leistungen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 3vw, 48px);
}

.karte {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.karte__titel {
  margin: 0 0 12px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
}

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


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

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

/* Ohne `position: sticky` an der linken Spalte (Abweichung 10). */
.preise__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 110px);
  align-items: start;
}

/* Abweichung 9. Sichtbar versteckt, aber mit der Tastatur erreichbar;
   absolut, damit sie im Raster keine Spalte belegen. */
.preise__wahl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.preise__reiter {
  margin-top: 36px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Wie der nicht gewaehlte Knopf im Entwurf; border-box wie ein <button>. */
.preise__reiter label {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  min-height: 46px;
  border: 1px solid var(--reiter-rand);
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
}

/* Wie der gewaehlte Knopf im Entwurf. */
#pl-damen:checked ~ .preise__kopf label[for="pl-damen"],
#pl-herren:checked ~ .preise__kopf label[for="pl-herren"],
#pl-farbe:checked ~ .preise__kopf label[for="pl-farbe"] {
  border-color: var(--tinte);
  background: var(--tinte);
  color: var(--grund);
}

/* Der Fokus liegt auf dem versteckten Optionsfeld; der Ring zeigt sich an
   seiner Beschriftung, in der Farbe und dem Abstand des Entwurfs. */
#pl-damen:focus-visible ~ .preise__kopf label[for="pl-damen"],
#pl-herren:focus-visible ~ .preise__kopf label[for="pl-herren"],
#pl-farbe:focus-visible ~ .preise__kopf label[for="pl-farbe"] {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

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

#pl-damen:checked ~ .preisliste--damen,
#pl-herren:checked ~ .preisliste--herren,
#pl-farbe:checked ~ .preisliste--farbe { display: block; }

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

/* Abweichung 11: statt des leeren <li> am Ende. */
.preisliste li:last-child { border-bottom: 1px solid var(--linie); }

.preis__name {
  margin: 0;
  font-family: var(--titelschrift);
  font-size: 24px;
  line-height: 1.25;
}

.preis__text {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--leise);
}

.preis__betrag {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}


/* ── Team ────────────────────────────────────────────────────────────────── */

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

.team__titel { max-width: 720px; }

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

.team__bild { margin: 0; }

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

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

.team__raster {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.profil {
  border-top: 1px solid var(--tinte);
  padding-top: 24px;
}

.profil__name {
  margin: 0 0 4px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: 30px;
}

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

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


/* ── Salon ───────────────────────────────────────────────────────────────── */

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

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

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

.salon__text {
  margin: 0 0 40px;
  max-width: 480px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--salon-text);
}

/* Wie im Entwurf ohne min(): zwischen 1000 und 1028 px stehen Zeiten und
   Adresse deshalb untereinander. */
.salon__daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

.salon__klein {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--salon-zeile);
}

.zeiten {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  font-size: 16px;
  line-height: 1.5;
}

.zeiten dd { margin: 0; }

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

.salon__adresse a {
  color: var(--grund);
  font-weight: 600;
}

/* Abweichung 13: auf #2A211C waere der Ring zu schwach. */
.salon :focus-visible { outline-color: var(--grund); }


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

.faq { padding: var(--abschnitt) 0 0; }

.faq__innen {
  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;
}

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

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

.faq__frage {
  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 wie im Entwurf. Jost liegt dort wie hier erst ab 400 vor, gezeichnet
   wird also 400 (Abweichung 2). */
.faq-plus {
  font-size: 26px;
  font-weight: 300;
  color: var(--akzent);
  transition: transform .2s;
}

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

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


/* ── Termin ──────────────────────────────────────────────────────────────── */

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

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

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

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

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

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

.formular {
  background: var(--weiss);
  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%, 220px), 1fr));
  gap: 22px;
}

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

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

/* Wie im Entwurf: die Auswahlfelder ohne eigenes box-sizing (der Browser
   rechnet sie ohnehin border-box), Eingaben und Textfeld ausdruecklich. */
.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__wahl,
.feld__eingabe { min-height: 50px; }

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

/* Im Entwurf 1 px weniger als die anderen Felder. */
.feld__eingabe--datum { padding: 13px 12px; }

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

/* Abweichung 14. */
.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(--tinte);
}

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

/* Abweichung 12: 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(--salon-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: 72px;
  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(--salon-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(--fuss-linie);
  font-size: 13px;
  color: var(--fuss-copy);
}

/* Abweichung 13: auf #1F1915 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--termin {
  color: var(--grund);
  background: var(--tinte);
}

/* Abweichung 13: der Ring liegt hier innen. */
.anruf:focus-visible { outline-offset: -4px; }
.anruf--termin: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(--sprung));
}

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

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


/* ── Hover · nur mit Maus (Abweichung 15) ────────────────────────────────── */
/* Genau dort, wo der Entwurf eine Hover-Angabe traegt. */

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

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

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

  .preise__reiter label:hover { border-color: var(--tinte); }
}

@media (hover: hover) and (min-width: 1000px) {
  .hero__link:hover { color: var(--akzent); }
}


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

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

  /* Abweichung 6: die Stufe 0,78 bei 44 % statt 32 %. */
  .hero__schleier {
    background: linear-gradient(90deg, rgba(246, 241, 234, 0.92) 0%, rgba(246, 241, 234, 0.78) 44%, rgba(246, 241, 234, 0.2) 55%, rgba(246, 241, 234, 0) 70%);
  }

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

/* Ab hier der Schleier des Entwurfs: Die Ueberschrift bricht dreizeilig um,
   und "Jeden Tag." steht links, wo er noch traegt. */
@media (min-width: 1400px) {
  .hero__schleier {
    background: linear-gradient(90deg, rgba(246, 241, 234, 0.92) 0%, rgba(246, 241, 234, 0.78) 32%, rgba(246, 241, 234, 0.2) 55%, rgba(246, 241, 234, 0) 70%);
  }
}

/* Abweichung 22: greift nur in Browsern ohne `text-wrap: balance`. 8.6em
   bricht wie balance nach "Ihnen" um (zweizeilig); ab 1362 px, wo balance
   dreizeilig umbricht, haelt 8em "Jeden" aus der zweiten Zeile. */
@supports not (text-wrap: balance) {
  .hero__titel { max-width: min(640px, 8.6em); }

  @media (min-width: 1362px) {
    .hero__titel { max-width: 8em; }
  }
}

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