/* ============================================================================
   ATELIER LINDE — Kosmetikstudio in Berlin Mitte
   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 "Atelier Linde
   Kosmetik.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 Gilda Display und Jost von Google Fonts und die Laufzeit
   von Claude Design. Er traegt Hover-Angaben der Claude-Design-Umgebung an
   neun Knoten (vier Menuepunkte, zweimal "Termin buchen", "Behandlungen
   entdecken", der inaktive Preis-Reiter, der Formular-Knopf), zwoelf
   Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, aktiver
   und inaktiver Reiter, Preise, vier Fehlermeldungen, Statusmeldung,
   Anrufleiste), zwei Schleifen sc-for (Reiter, Preiszeilen) und eine
   `DCLogic`-Klasse mit Scroll-, Breiten-, Menue-, Reiter- und
   Formularzustand; die Formularpruefung oeffnet das Mailprogramm. 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 und die Eingabefelder, wie dort angegeben, dazu von Haus aus
   <button> und <select>. Wo hier ein anderes Element einen <button> des
   Entwurfs ersetzt (Menue-Knopf, Preis-Reiter), rechnet es deshalb
   border-box.

   Der Entwurf schaltet per Skript an genau einer Breite um
   (`isDesktop = w >= 1000`). Hier steht das 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; dazu die Abweichungen 6 und 7
     1150 px   nur Abweichung 7: ab hier wieder der Schleier des Entwurfs
   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 21.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Huellen-Elemente der Claude-Design-
       Umgebung, die Bedingungsbloecke, die Schleifen, die Platzhalter in
       doppelten geschweiften Klammern, die Hover-Angaben, `onClick`,
       `onChange`, `onSubmit`, `DCLogic`, die Laufzeit 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 Preise stehen fest da (Schalter
       `showPrices`, im Entwurf standardmaessig an), ebenso die Anrufleiste
       (Schalter `mobileCallBar`, dort ebenfalls an).
    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. Das Plus der Fragen verlangt
       `font-weight: 300`; das liefert Google fuer diese Bestellung nicht, der
       Browser nimmt dort wie im Entwurf 400. Der Wert steht trotzdem 1:1
       da, freigegeben ist 300 nicht (V4). Kursive nutzt der Entwurf nicht.
    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, Entscheidung 6). Dieselben Dateien unter img/ statt
       im Projektordner des Entwurfs. Das Titelbild ist von 2400 x 1018 auf
       1920 x 814 px verkleinert (70 070 B, Budget 250 KB); `width`/`height`
       nennen die neuen Masse, das Seitenverhaeltnis bleibt. Genau ein Bild
       vorgeladen, das Titelbild (V18); og:image zeigt auf img/hero.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 (oder bei offenem Menue) mit
       rgba(245,242,237,.97) und der Linie 0 1px 0 #DFD9CE. 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. TITELBILD UNTER DER SCHRIFT (V9). Der Entwurf legt bei jeder Breite
       denselben Schleier auf (waagerecht: 0,9 / 0,75 / 0,15 / 0 bei 0 / 32 /
       56 / 70 % der Breite) und denselben Ausschnitt (72 % 50 %). So
       gezeichnet faellt die Schrift durch (Werte unter KONTRASTE): auf dem
       Handy laeuft sie ueber den unverschleierten gruenen Vorhang, ab
       1000 px liegen Vorzeile und Vorspann zum Teil auf der Vorhangstange,
       und "Behandlungen entdecken" liegt bis 1149 px je nach Fensterhoehe
       auf der dunklen Kante, an der Vorhaenge und Boden sich treffen.
       Deshalb, mit dem Ausschnitt 72 % 50 % ueberall wie im Entwurf:
       - unter 1000 px laeuft der Schleier senkrecht aus,
         rgba(245,242,237, .9 / .86 / .7) bei 0 / 70 / 100 % der Hoehe; das
         sind die Stufen, die der Schwesterentwurf Kiosk Wolff aus demselben
         Projekt fuer schmale Fenster vorsieht;
       - von 1000 bis 1149 px traegt der Schleier dieselben Stufen, die
         Mitte reicht nur weiter: 0,9 / 0,75 / 0,15 / 0 bei 0 / 40 / 62 /
         72 %. In schmalen Fenstern nimmt der Text einen groesseren Teil der
         Breite ein als im Entwurf gedacht; ab 1150 px reicht der Schleier
         des Entwurfs, und er steht dort unveraendert;
       - ab 1000 px wird die Schrift eine Stufe dunkler: Vorzeile #3C4836
         (das Gruen, das der Entwurf fuer seine Knoepfe beim Darueberfahren
         nimmt) statt #4F5D47, Vorspann #23261F (die Schriftfarbe der
         Ueberschrift) statt #3A3D35.
    8. "BEHANDLUNGEN ENTDECKEN" BEIM DARUEBERFAHREN (V9). Der Entwurf
       faerbt Schrift und Linie #4F5D47. Auf dem Foto kaeme die gruene
       Schrift damit stellenweise nur auf 2,44 : 1, auch das dunklere
       #3C4836 nur auf 3,35 : 1 (gemessen wie unter KONTRASTE, mit dem
       Schleier von Abweichung 7). Hier wird nur die Linie gruen, die Schrift
       bleibt #23261F.
    9. 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 unter dem Menue 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.
   10. PREIS-REITER OHNE SKRIPT (V8). Drei Radios mit :checked statt
       Reiter-Zustand, Muster `autohaus`; die drei Listen stehen
       ausgeschrieben, sichtbar ist die angekreuzte, anfangs "Gesicht" wie im
       Entwurf. Die Reiter sind <label>, rechnen border-box und zentrieren
       ihre Schrift wie der <button> des Entwurfs (48 px hoch wie dort). Jedes
       Radio liegt unsichtbar in seinem Reiter und deckt ihn ganz ab. Der
       Browser rollt ein Radio mit dem Fokus ins Bild, wenn es nicht ganz zu
       sehen ist; hier ist das der Reiter selbst, wie beim Knopf im Entwurf.
       Dazu haelt ein `scroll-margin`, nur bei Fokus von der Tastatur, Reiter
       und Fokusring frei von Kopfleiste, Anrufleiste und Fensterrand.
       Nachgemessen in acht Fenstern von 320 x 640 bis 1920 x 1080: Nach Tab,
       Pfeiltasten und Umschalt+Tab liegt der Reiter mit dem Fokus samt Ring
       frei im Bild, auch wenn die Reiter vorher nur 2 px unten ins Fenster
       ragten oder halb unter der Kopfleiste lagen; ein Klick rollt nichts,
       ob die Reiter oben, mittig oder unten im Bild stehen. Vorher standen
       die Radios vor dem Raster: an ihrem Platz liess ein Klick die Seite
       springen (1280 px: von 1450 auf 851 px), fest in der Fensterecke blieb
       der Fokus beim Tabben bis zu 2900 px ausserhalb des Bildes. Weil das
       Radio im Reiter liegt, laufen Zustand, Fokusring und Umschalten ueber
       :has() (Chrome 105, Safari 15.4, Firefox 121). Kennt ein Browser
       :has() nicht, fehlen die Reiter, und alle drei Listen stehen
       untereinander: Kein Preis ist unerreichbar, und kein Reiter steht da,
       der nichts umschaltet.
   11. SPALTE DER PREISE OHNE `position: sticky`. Der Entwurf setzt an die
       linke Spalte `position: sticky; top: 120px`. Das wirkt dort nicht: Die
       Seitenhuelle hat `overflow-x: hidden`, wird damit selbst zum
       Scroll-Container und rollt nie, also klebt nichts (auf dieser Seite
       nachgesehen: mit der Angabe rollt die Spalte bei 1280 px mit weg,
       erst mit `overflow-x: clip` bliebe sie bei 120 px stehen). Die Angabe
       fehlt hier. Das Bild ist dasselbe, und es entsteht nie eine gepinnte
       Spalte, wie die Basis-Stufe sie verbietet.
   12. SCHLUSSLINIE DER PREISLISTE. Der Entwurf zieht sie mit einer leeren
       <li>; ein Vorleseprogramm zaehlte die als weitere Zeile. Dieselbe
       Linie zieht jetzt die Liste selbst als border-bottom (gleiches Bild).
   13. 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" (im Entwurf ein Absende-Knopf), 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.
   14. FOKUSRING (V9, Nicht-Text). Der Ring des Entwurfs (#4F5D47) kommt im
       Studio auf 1,80 und im Fuss auf 2,12 : 1; dort ist er #F5F2ED (11,34
       bzw. 13,33 : 1). Auf dem Titelbild faellt er um den Verweis
       stellenweise auf 2,11 : 1; dort ist er #23261F (mindestens 4,61 : 1,
       aus denselben Bildpunkten gerechnet). In der Anrufleiste liegt er
       innen: aussen laege er links und unten ausserhalb des Fensters und
       zwischen den Knoepfen auf dem gruenen Knopf (1,00 : 1). Innen:
       #4F5D47 auf #F5F2ED 6,29, #F5F2ED auf #4F5D47 6,29 : 1.
   15. PLATZHALTER IM TEXTFELD (V9). Der Entwurf setzt keine Farbe; die
       Browser zeigen ihn hellgrau, je nach Browser bis hinunter auf
       2,35 : 1. Hier #62655D, deckend, die Farbe der kleinen Bezeichnungen
       des Entwurfs: 5,93 : 1 auf #FFFFFF.
   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. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Koreastrasse 112, 10115 Berlin, 030 123456789,
       kosmetik@eineuroweb.de und die Oeffnungszeiten. Benedikt hat sie
       geprueft.
   19. HOVER NUR, WO DER ENTWURF ES SAGT. Die globale Regel
       `a:hover { color: #4F5D47 }` des Entwurfs fehlt: Jeder Textverweis
       setzt dort seine Farbe inline, die Regel wirkte also nirgends. Als
       Klassenregel stuende sie hier ueber den Farben der Verweise und
       faerbte Telefon, Fuss und Anrufleiste beim Darueberfahren, was der
       Entwurf nie tut. Hover gibt es genau an den neun Stellen mit
       Hover-Angabe (eine davon nach Abweichung 8).
   20. 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 das Symbol im Reiter. Der
       Entwurf hat keins; ohne fragt der Browser /favicon.ico an der Wurzel
       ab, und die App liefert dort nichts. Es steht als data:-Adresse im
       Kopf (V3): eine Flaeche in --salbei, ohne Buchstaben, damit die
       Umbrandung nichts Fremdes stehen laesst.
   21. 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 die Seitenhuelle (overflow-x: hidden) schneidet es ab (bei
       360 px reicht es bis 624 px); 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.
   22. TRENNSTELLE IN "GESICHTSBEHANDLUNGEN" (V5). Das Wort ist in 34 px
       Gilda Display 353 px breit. Wo die Karte schmaler ist, laeuft es im
       Entwurf ueber ihren Rand, nachgemessen bei 320-392 px (einspaltig,
       bis 73 px), 743-814 px (zweispaltig) und 1143-1259 px (dreispaltig,
       je bis 33 px): Bei 360 px schneidet die Huelle das letzte "n" ab, bei
       768 px stoesst es an die Nachbarkarte ("Gesichtsbehandlungen
       Hautanalyse &"). Eine weiche Trennstelle im Markup trennt dort
       "Gesichts-" / "behandlungen"; wo das Wort passt, aendert sich nichts.

   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 #23261F      auf --grund #F5F2ED ......... 13,74 : 1   OK
     --tinte              auf --weiss #FFFFFF ......... 15,35 : 1   OK
     --tinte              auf --hero-grund #ECE6DC .... 12,36 : 1   OK
     --vorspann #3A3D35   auf --grund ................. 9,90 : 1   OK
     --text #575A52       auf --grund ................. 6,29 : 1   OK
     --text               auf --weiss ................. 7,02 : 1   OK
     --leise #62655D      auf --grund ................. 5,31 : 1   OK
     --leise              auf --weiss ................. 5,93 : 1   OK
     --salbei #4F5D47     auf --grund ................. 6,29 : 1   OK
     --salbei             auf --weiss ................. 7,03 : 1   OK
     --grund              auf --salbei (Knoepfe) ...... 6,29 : 1   OK
     --grund              auf --salbei-tief #3C4836 ... 8,66 : 1   OK
   STUDIO, Grund --studio #2E352A:
     --grund (Ueberschrift, Zeiten, Adresse) ......... 11,34 : 1   OK
     --studio-vorzeile #CBD3C2 ....................... 8,22 : 1   OK
     --studio-text #E3E6DD ........................... 10,02 : 1   OK
   FUSS, Grund --fuss #232921:
     --studio-text (Text, Telefon, Mail) ............. 11,79 : 1   OK
     --weiss (Impressum, Datenschutz) ................ 14,89 : 1   OK
     --fuss-copy #B5BCAD ............................. 7,63 : 1   OK

   KOPFLEISTE. rgba(245,242,237,.97) laesst 3 % durch. Gerechnet gegen alles,
   was darunter durchlaeuft: ueber Schwarz wird sie #EEEBE6 (--tinte 12,91,
   --salbei beim Darueberfahren 5,91), ueber --studio und --fuss #EFECE7
   (13,02 bzw. 5,96) - OK. Im Browser auf dem Titelbild nachgemessen, jeder
   Bildpunkt unter jeder Zeile: Menuepunkte und Telefon mindestens 13,02,
   Menue-Knopf (Nicht-Text) mindestens 13,63 : 1.
   Durchsichtig wie im Entwurf am Seitenanfang - FAELLT DURCH: Telefon und
   Menuepunkte ab 1000 px bis hinunter auf 1,63 : 1 (1440 x 900, "030
   123456789"), der Menue-Knopf unter 1000 px auf 1,58 : 1 (432 x 640).
   > Folge: Abweichung 6.

   TITELBILD. Dunkle Schrift auf hellem Schleier ueber dem Foto. Gemessen im
   Browser (Chrome): die Schrift unsichtbar geschaltet, dann jeder Bildpunkt im
   ganzen Kasten jeder Textzeile (Ober- bis Unterlaenge, nicht nur unter den
   Buchstaben) gegen die Schriftfarbe gerechnet; je Fenster der dunkelste
   Punkt. Gemessen bei 320-1920 px Breite in 8er-Schritten plus 999, 1001,
   2048 und 2560 px, je 5 bis 8 Fensterhoehen zwischen 390 und 1440 px, dazu
   1000-1400 px Breite mit Hoehen von 560 bis 1500 px in 20er-Schritten: Dort
   kann "Behandlungen entdecken" je nach Hoehe auf die dunkle Kante im Foto
   fallen, an der Vorhaenge und Boden sich treffen.

     Kleinster Wert          unter 1000 px    1000-1149 px     ab 1150 px
     Vorzeile ..............  5,23 #4F5D47    6,59 #3C4836     5,78 #3C4836
     h1 #23261F ............ 11,20            6,44             4,94
     Vorspann ..............  7,73 #3A3D35    7,23 #23261F     5,06 #23261F
     "Behandlungen
     entdecken" #23261F ....  9,12            6,16             5,32   alles OK

   Unter 1000 px haelt das unabhaengig vom Foto: Der senkrechte Schleier liegt
   ueberall bei mindestens 0,7 und macht einen schwarzen Bildpunkt zu #ACA9A6
   (--tinte 6,56, --vorspann 4,73); die Vorzeile steht immer im oberen Teil,
   wo er bei mindestens 0,86 liegt (#D3D0CC, --salbei 4,57). Das gilt auch fuer
   jedes andere Kopfbild der persoenlichen Vorschau. Ab 1000 px gelten die
   Werte fuer dieses Foto.
   Browser ohne `text-wrap: balance`/`pretty` brechen gierig um; mit
   `text-wrap: wrap` nachgemessen (Vorzeile / h1 / Vorspann / Verweis):
   unter 1000 px dieselben Werte wie oben, 1000-1149 px mindestens 6,45 /
   5,19 / 7,07 / 6,16, ab 1150 px mindestens 5,78 / 4,94 / 5,06 / 5,59 - OK.

   ENTWURF WIE GEZEICHNET (sein Schleier und seine Farben bei jeder Breite,
   385 Fenster zwischen 320 und 2560 px) - FAELLT DURCH, 167 Fenster unter
   4,5 : 1:
     unter 1000 px  Vorzeile 1,00, h1 1,45, Vorspann 1,02, Verweis 2,01
     ab 1000 px     Vorzeile 4,20 (2048 x 1080), Vorspann 3,73 (1792 x 600),
                    Verweis 4,14 (1088 x 1000, in der Feinabtastung bis
                    3,93 bei 1008 x 980); h1 mindestens 5,02
   > Folge: Abweichung 7.

   NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Fokusring auf dem
   Titelbild: in #4F5D47 des Entwurfs stellenweise nur 2,11 : 1 (1150 x 1120), in
   #23261F mindestens 4,61 : 1 (Abweichung 14). Rahmen der Eingabefelder #BDB6A8
   auf #FFFFFF 2,02, Rand des inaktiven Reiters #CEC7BA auf #FFFFFF 1,68 : 1 -
   unter den 3 : 1 fuer Bedienelemente; Entwurf so gelassen, die Beschriftung
   steht ueber jedem Feld und im Reiter selbst.
   ========================================================================= */


/* ── 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: #F5F2ED;        /* Seitengrund, Handy-Menue, Anrufleiste, Schrift auf Gruen */
  --weiss: #FFFFFF;        /* Preise, Formular, Felder, Impressum im Fuss */
  --hero-grund: #ECE6DC;   /* Grund des Hero unter dem Bild */
  --bildgrund: #E6E0D5;    /* Grund unter den Bildern */
  --linie: #DFD9CE;        /* Linien und Rahmen */
  --reiter-rand: #CEC7BA;  /* Rahmen des inaktiven Preis-Reiters */
  --feld: #BDB6A8;         /* Rahmen der Eingabefelder */
  --tinte: #23261F;        /* Text, Ueberschriften, Verweise */
  --vorspann: #3A3D35;     /* Vorspann im Hero (unter 1000 px) */
  --text: #575A52;         /* Fliesstext */
  --leise: #62655D;        /* Preis-Beschreibung, Bildunterschrift, Bezeichnungen, Platzhalter */
  --salbei: #4F5D47;       /* Vorzeilen, Nummern, Rollen, Knoepfe, Fokusring */
  --salbei-tief: #3C4836;  /* Knopf beim Darueberfahren, Hero-Vorzeile ab 1000 px */
  --studio: #2E352A;       /* Grund des Studios */
  --studio-bild: #3B4337;  /* Grund unter dem Studiofoto */
  --studio-vorzeile: #CBD3C2;
  --studio-text: #E3E6DD;  /* Absatz im Studio, Text im Fuss */
  --fuss: #232921;         /* Grund der Fusszeile */
  --fuss-linie: #3E473A;   /* Linie ueber der Copyright-Zeile */
  --fuss-copy: #B5BCAD;    /* Copyright-Zeile */
  --kopf-grund: rgba(245, 242, 237, 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: 14 + 56 + 14 */
  --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:hover` des Entwurfs fehlt mit Absicht (Abweichung 19). */
a { color: var(--tinte); }

:focus-visible { outline: 2px solid var(--salbei); 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;
  border-radius: 999px;
  background: var(--salbei);
  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 (Abweichung 6) ───────────────────────────────────────────── */

.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: 14px var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

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

.kopf__logo {
  height: 56px;
  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__link:hover { color: var(--salbei); }

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

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

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

/* Handy-Menue: <details> statt Knopf mit Zustand (Abweichung 9). */
.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: 999px;
  cursor: pointer;
  list-style: none;
}

.menue__knopf span {
  display: block;
  width: 18px;
  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__termin {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grund);
  background: var(--salbei);
  text-decoration: none;
  padding: 16px 22px;
  border-radius: 999px;
  text-align: center;
}


/* ── Hero (Abweichung 7) ─────────────────────────────────────────────────── */

.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: 72% 50%;
}

/* Unter 1000 px senkrecht; ab 1000 px der Schleier des Entwurfs (unten). */
.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245, 242, 237, 0.9) 0%, rgba(245, 242, 237, 0.86) 70%, rgba(245, 242, 237, 0.7) 100%);
}

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

.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__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;
}

/* Beim Darueberfahren wird nur die Linie gruen, die Schrift bleibt dunkel
   (Abweichung 8). */
.hero__link:hover { border-color: var(--salbei); }

/* Abweichung 14: auf dem Foto der Ring in Tinte statt in Salbei. */
.hero :focus-visible { outline-color: var(--tinte); }


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

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

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

.vorzeile--weit { margin-bottom: 26px; }      /* Hero und Haltung */

.vorzeile--studio { color: var(--studio-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;
}


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

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

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


/* ── Behandlungen ────────────────────────────────────────────────────────── */

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

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.behandlungen__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;
}

.bogen {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bildgrund);
  border-radius: 200px 200px 0 0;
}

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

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

.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 (Abweichungen 10 bis 12) ─────────────────────────────────────── */

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

/* Wie im Entwurf ohne `text-wrap: balance`. */
.preise__titel { text-wrap: wrap; }

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

/* Abweichung 10: sichtbar erst, wo der Browser :has() kennt (@supports
   unter .preisliste); sonst stehen alle drei Listen untereinander. */
.reiter {
  margin-top: 36px;
  display: none;
  gap: 8px;
  flex-wrap: wrap;
}

.reiter__knopf {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  padding: 12px 22px;
  min-height: 46px;
  border: 1px solid var(--reiter-rand);
  border-radius: 999px;
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
}

.reiter__knopf:hover { border-color: var(--salbei); }

/* Das Radio deckt seinen Reiter unsichtbar ganz ab: Mit dem Fokus rollt der
   Browser genau diesen Reiter ins Bild, wie einen Knopf. Klicks gehen an die
   Beschriftung. */
.preise__wahl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.reiter__knopf:has(:checked) {
  border-color: var(--salbei);
  background: var(--salbei);
  color: var(--grund);
}

.reiter__knopf:has(:focus-visible) {
  outline: 2px solid var(--salbei);
  outline-offset: 3px;
}

/* Mit der Tastatur haelt der Browser Reiter und Fokusring (1 px Rand, 3 px
   Abstand, 2 px Ring, 1 px Luft) frei von Kopfleiste, Anrufleiste (56 px
   plus 1 px Linie) und Fensterrand. Nur bei :focus-visible, damit ein Klick
   nichts rollt. Ab 1000 px ohne Anrufleiste (unten). */
.preise__wahl:focus-visible {
  scroll-margin: calc(var(--notice) + var(--kopf) + 7px) 7px calc(var(--leiste) + 1px + 7px);
}

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

@supports selector(:has(*)) {
  .reiter { display: flex; }

  .preise__raster:has(#pl-gesicht:checked) .preisliste:not([data-liste="gesicht"]),
  .preise__raster:has(#pl-augen:checked) .preisliste:not([data-liste="augen"]),
  .preise__raster:has(#pl-koerper:checked) .preisliste:not([data-liste="koerper"]) { display: none; }
}

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

.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__bild img {
  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);
}

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

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

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

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


/* ── Studio ──────────────────────────────────────────────────────────────── */

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

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

.studio__bild {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--studio-bild);
}

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

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

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

/* Wie im Entwurf ohne min(): zwei Spalten ab 480 px, zwischen 1000 und
   1028 px wieder eine, weil die Textspalte dort schmal wird. */
.studio__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

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

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

.studio__zeiten dd { margin: 0; }

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

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

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


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

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

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

.fragen__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-of-type { 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 liefert die Datei nicht, der Browser nimmt 400 wie im Entwurf
   (Abweichung 2). */
.faq-plus {
  font-size: 26px;
  font-weight: 300;
  color: var(--salbei);
  transition: transform .2s;
}

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

.frage__text {
  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);
  border-radius: 4px;
  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: 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(--feld);
  border-radius: 4px;
  background: var(--weiss);
  color: var(--tinte);
}

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

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

.feld__eingabe--datum { padding: 13px 12px; }

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

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

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

/* Abweichung 13: margin-bottom steht fuer den Abstand vor der Statuszeile,
   die im Entwurf leer hinter dem Knopf stand. Hover traegt `.knopf`. */
.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(--studio-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: 80px;
  width: auto;
  display: block;
}

/* Abweichung 21: 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(--studio-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 14: auf #232921 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(--salbei);
}

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

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

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


/* ── Breiten · die Grenze des Entwurfs, dazu 1150 px (Abweichung 7) ──────── */

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

  /* Abweichung 7: die Stufen des Entwurfs, die Mitte reicht bis 1149 px
     weiter; die Schrift eine Stufe dunkler. */
  .hero__schleier {
    background: linear-gradient(90deg, rgba(245, 242, 237, 0.9) 0%, rgba(245, 242, 237, 0.75) 40%, rgba(245, 242, 237, 0.15) 62%, rgba(245, 242, 237, 0) 72%);
  }

  .hero__vorzeile { color: var(--salbei-tief); }
  .hero__vorspann { color: var(--tinte); }

  .fuss { padding-bottom: 40px; }
  .anrufleiste { display: none; }
  .rechtliches { padding-bottom: 40px; }
  .preise__wahl:focus-visible { scroll-margin-bottom: 7px; }
}

/* Ab 1150 px der Schleier des Entwurfs, unveraendert. */
@media (min-width: 1150px) {
  .hero__schleier {
    background: linear-gradient(90deg, rgba(245, 242, 237, 0.9) 0%, rgba(245, 242, 237, 0.75) 32%, rgba(245, 242, 237, 0.15) 56%, rgba(245, 242, 237, 0) 70%);
  }
}


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