/* ============================================================================
   KIOSK WOLFF — Ihr Kiosk in Berlin Mitte
   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 "Kiosk Wolff.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 Laufzeit
   `support.js`. Er traegt Hover-Angaben der Claude-Design-Umgebung an acht
   Knoten (vier Menuepunkte, zwei Route-Knoepfe, "Sortiment ansehen",
   Formular-Knopf), neun Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf,
   Handy-Menue, vier Fehlermeldungen, Statusmeldung, Anrufleiste), eine
   Schleife sc-for (Oeffnungszeiten) und eine `DCLogic`-Klasse mit Uhr nach
   Berliner Zeit, Scroll- und Breitenzustand 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 und die Eingabefelder, wie dort angegeben. Ein globales
   border-box wie in anderen Vorlagen machte ab 1360 px Fensterbreite jeden
   Abschnitt um bis zu 128 px schmaler als 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
     1080 px   Menuezeile statt Menue-Knopf, Anrufleiste weg, Hero unten
               90 statt 130 px, Fuss unten 40 statt 96 px
     1280 px   Bildausschnitt und Schleier im Hero
   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 19.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Elemente x-dc und helmet, die
       Bedingungsbloecke und die Schleife, die Platzhalter in doppelten
       geschweiften Klammern, die Hover-Angaben, `onClick`/`onChange`/
       `onSubmit`, `DCLogic`, `support.js` und das Werkzeug-Skript von Claude
       Design sind weg. Inline-Stile sind Klassen mit den Werten aus `:root`,
       die Hover-Angaben sind `:hover`, die Oeffnungszeiten sind
       ausgeschrieben. Die globale Regel `a:hover { color: #1E4634 }` 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.
    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. Der Entwurf nutzt keine Kursive.
    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
       kiosk/. Das Titelbild ist von 2400 x 1018 auf 1920 x 814 px verkleinert
       (213 822 B, Budget 250 KB). `width`/`height` im Markup nennen die
       echten Masse, bei den Kartenbildern also 1737 statt der 1738 des
       Entwurfs. 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 mit rgba(247,243,234,.97) und der Linie
       0 1px 0 #E1DACB. 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. 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.
    8. LIVE-ANZEIGE UND HEUTIGER TAG PER KLEINEM SKRIPT (V8, Entscheidung 5).
       js/seite.js rechnet dieselben Saetze aus denselben Zeiten wie die
       `DCLogic` des Entwurfs, jede Minute neu, und setzt den heutigen Tag
       fett mit "(heute)". Ohne Skript steht an beiden Stellen der Satz
       "Taeglich bis spaet geoeffnet" aus der Seitenbeschreibung des
       Entwurfs, der Punkt ist neutral #1E4634 statt gruen oder rot, und kein
       Tag ist hervorgehoben. Hat jemand anderes den Satz ersetzt (die
       persoenliche Vorschau), schreibt das Skript dort nicht mehr hinein.
    9. 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.
   10. SCHLUSSLINIE DER OEFFNUNGSZEITEN. Der Entwurf zieht sie mit einem
       leeren <div> in der <dl>; das ist dort ungueltig. Dieselbe Linie
       zieht jetzt die letzte Zeile als border-bottom (gleiches Bild).
   11. FOKUSRING AUF DUNKLEM GRUND (V9, Nicht-Text). Der Ring des Entwurfs
       (#1E4634) ist in den Oeffnungszeiten unsichtbar (1,00 : 1) und im Fuss
       zu schwach (1,43 : 1); dort ist er #F7F3EA (9,57 bzw. 13,69 : 1). 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: #1E4634 auf #F7F3EA 9,57, #F7F3EA auf #1E4634
       9,57 : 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 #5F645B, 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 fuenf 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
       1080 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): Spaetiweg 112, 10115 Berlin, 030 123456789, kiosk@eineuroweb.de
       und die Oeffnungszeiten. 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, im Projekt liegt nur src/app/icon.svg).
       Wie in jeder anderen Vorlage steht es als data:-Adresse im Kopf (V3):
       eine Flaeche in --gruen, ohne Buchstaben, damit die Umbrandung nichts
       Fremdes stehen laesst.
   18. UEBERSCHRIFT OHNE `text-wrap: balance` (V9). Der Kontrast im Hero
       haengt daran, dass balance die Zeilen kurz haelt (siehe KONTRASTE).
       Nur in Browsern, die balance nicht kennen, begrenzt ein
       @supports-Block die Breite der <h1> so, dass die Zeilen genauso
       brechen (760-1279 px) oder vor der Mitte enden (ab 1280 px). Wo
       balance laeuft, gilt allein der Wert des Entwurfs.
   19. 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 endet die Mail-Adresse bei 369 px, Impressum und
       Datenschutzerklaerung stehen 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 (eine Spalte bis 414 px, darueber zwei). Ab
       672 px ist alles wie im Entwurf, nachgemessen bis 1920 px.

   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 #1B1F1A      auf --grund #F7F3EA ......... 15,08 : 1   OK
     --tinte              auf --weiss #FFFFFF ......... 16,70 : 1   OK
     --tinte              auf --sand #E9E3D6 .......... 13,06 : 1   OK
     --vorspann #363A33   auf --grund ................. 10,48 : 1   OK
     --text #555A52       auf --grund .................  6,38 : 1   OK
     --text               auf --weiss .................  7,07 : 1   OK
     --leise #5F645B      auf --grund .................  5,48 : 1   OK
     --leise              auf --weiss .................  6,07 : 1   OK
     --rot #A63A2B        auf --grund .................  5,81 : 1   OK
     --rot                auf --weiss .................  6,44 : 1   OK
     --gruen #1E4634      auf --grund (Zitat) .........  9,57 : 1   OK
     --gruen              auf --weiss (Verweis) ....... 10,60 : 1   OK
     --grund              auf --gruen (Knoepfe) .......  9,57 : 1   OK
     --grund              auf --gruen-tief #153426 .... 12,23 : 1   OK
   OEFFNUNGSZEITEN, Grund --gruen #1E4634:
     --z-vorzeile #C9DACF ..............................  7,28 : 1   OK
     --grund #F7F3EA ...................................  9,57 : 1   OK
     --z-text #E2ECE5 ..................................  8,77 : 1   OK
     --weiss (Route planen) ............................ 10,60 : 1   OK
   FUSS, Grund --fuss #152A21:
     --z-text #E2ECE5 .................................. 12,54 : 1   OK
     --weiss (Impressum, Datenschutz) .................. 15,16 : 1   OK
     --fuss-copy #AFC3B6 ...............................  8,16 : 1   OK

   KOPFLEISTE. rgba(247,243,234,.97) laesst 3 % durch. Gerechnet gegen alles,
   was darunter durchlaeuft: ueber #1E4634 wird sie #F0EEE5 (--tinte 14,37),
   ueber #152A21 #F0EDE4 (14,27), ueber Schwarz #F0ECE3 (14,16) — OK.
   Durchsichtig wie im Entwurf am Seitenanfang, gemessen am echten Titelbild
   unter dem Schleier (je Breite der dunkelste Punkt unter der Schrift) —
   jede Zeile FAELLT DURCH:
     768-1079 px  Menue-Knopf (Rand, Striche) ........  1,00 : 1 (Median 1,91)
     1080 px      "030 123456789" ......................  3,20 : 1
     1279 px      "030 123456789" ......................  3,39 : 1
     1280 px      "Oeffnungszeiten" 2,77, "Ueber uns" ..  4,11 : 1
     1366 px      "Ueber uns" 3,18, "Oeffnungszeiten" ..  3,02 : 1
     1440 px      "Ueber uns" 2,96, Telefon ............  2,93 : 1
     1920 px      "Ueber uns" ..........................  3,36 : 1
   Unter 760 px reichte es (Menue-Knopf 12,15 : 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 -> #EBE7DE: --tinte 13,53, --vorspann 9,40
     Deckung 0,94 -> #E8E4DC: --tinte 13,17, --vorspann 9,15
     Deckung 0,90 -> #DEDBD3: --tinte 12,07, --vorspann 8,39
     Deckung 0,86 -> #D4D1C9: --tinte 10,94, --vorspann 7,60
     Deckung 0,70 -> #ADAAA4: --tinte  7,21, --vorspann 5,01
   Unter 760 px liegt der Schleier ueberall bei mindestens 0,70 — alles OK,
   unabhaengig vom Foto. Ab 760 px laeuft er nach rechts aus (0,45 / 0,30 /
   0), dort gilt 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:
     Fenster      h1 --tinte   Vorspann --vorspann   "Sortiment ansehen"
     360 x 780      11,47           7,76                  9,53
     390 x 844      11,43           7,87                  9,73
     768 x 1024     12,18           7,32                 12,27
     820 x 1180     11,83           7,73                 12,41
     1024 x 768     10,58           8,60                 12,47
     1080 x 800     11,19           8,77                 12,56
     1280 x 800     11,59           8,33                 12,82
     1366 x 768     11,78           8,92                 12,82
     1440 x 900     10,46           8,48                 12,94
     1920 x 1080    10,73           7,91                 12,49      alles OK
   Das haelt, weil `text-wrap: balance` (aus dem Entwurf) die Ueberschrift so
   umbricht, dass jede Zeile vor 56 % der Fensterbreite endet. Ein Browser
   ohne balance bricht gierig um; dann laeuft die erste Zeile in den
   auslaufenden Schleier: 768 px 1,17, 820 px 2,26, 1440 px 4,31 : 1.
   > Folge: Abweichung 18. Mit ihr in solchen Browsern mindestens 5,17 : 1
   > (1280 px), sonst 6,49 bis 14,34 : 1.
   Die Statuszeile liegt in ihrem weissen Kaestchen (--tinte auf --weiss
   16,70), "Route planen" auf --gruen (9,57) — beide nicht auf dem Foto.

   NICHT-TEXT (nur zur Einordnung; V9 gilt fuer Text). Punkt "geoeffnet"
   #2E8B57 auf #FFFFFF 4,25, "geschlossen" #A63A2B 6,44, neutral #1E4634
   10,60. Rahmen der Eingabefelder #BDB5A5 auf #FFFFFF 2,04 : 1 — unter den
   3 : 1 fuer Bedienelemente; Entwurf so gelassen, die Beschriftung steht
   ueber jedem Feld.
   ========================================================================= */


/* ── 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: #F7F3EA;        /* Seitengrund, Kopfleiste, Handy-Menue, Anrufleiste, Knopftext */
  --weiss: #FFFFFF;        /* Service, Formular, Felder, Status-Kaestchen */
  --sand: #E9E3D6;         /* Grund unter den Bildern */
  --linie: #E1DACB;        /* Linien und Rahmen */
  --feld: #BDB5A5;         /* Rahmen der Eingabefelder */
  --tinte: #1B1F1A;        /* Text, Ueberschriften, Verweise */
  --vorspann: #363A33;     /* Vorspann im Hero */
  --text: #555A52;         /* Fliesstext */
  --leise: #5F645B;        /* Bildunterschrift, Bezeichnungen, Platzhalter */
  --rot: #A63A2B;          /* Vorzeilen, Punkt "geschlossen" */
  --gruen: #1E4634;        /* Knoepfe, Zitat, Oeffnungszeiten, Fokusring */
  --gruen-tief: #153426;   /* Knopf beim Darueberfahren */
  --offen: #2E8B57;        /* Punkt "geoeffnet" */
  --z-vorzeile: #C9DACF;   /* Vorzeile in den Oeffnungszeiten */
  --z-text: #E2ECE5;       /* Statussatz in den Oeffnungszeiten, Text im Fuss */
  --z-linie: #3D6553;      /* Zeilenlinien der Oeffnungszeiten */
  --fuss: #152A21;         /* Grund der Fusszeile */
  --fuss-copy: #AFC3B6;    /* Copyright-Zeile */
  --fuss-linie: #2F4B3E;   /* Linie ueber der Copyright-Zeile */
  --kopf-grund: rgba(247, 243, 234, 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 1080 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(--gruen); outline-offset: 3px; }

.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(--gruen);
  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: 36px;
}

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

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

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

/* Knoepfe: gross im Hero 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(--gruen);
  text-decoration: none;
  padding: 19px 32px;
}

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

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

/* Handy-Menue: <details> statt Knopf mit Zustand (Abweichung 7). */
.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::-webkit-details-marker { display: 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__anruf {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grund);
  background: var(--gruen);
  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: 88% 50%;
}

.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 243, 234, 0.9) 0%, rgba(247, 243, 234, 0.86) 70%, rgba(247, 243, 234, 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;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 14px;
  background: var(--weiss);
  border: 1px solid var(--linie);
}

/* Ohne Skript neutral; js/seite.js setzt is-offen oder is-zu (Abweichung 8). */
.status__punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gruen);
}

.status__punkt.is-offen { background: var(--offen); }
.status__punkt.is-zu { background: var(--rot); }

.status__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--tinte);
}

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

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


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

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

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

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


/* ── Sortiment ───────────────────────────────────────────────────────────── */

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

.sortiment__titel { max-width: 720px; }

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

.sortiment__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 2.6vw, 40px);
}

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

.karte__titel {
  margin: 0 0 10px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
}

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


/* ── Service ─────────────────────────────────────────────────────────────── */

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

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

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

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

/* Die letzten beiden ziehen im Entwurf zusaetzlich die Linie unter sich. */
.service__liste li:nth-child(n + 5) { border-bottom: 1px solid var(--linie); }

.service__liste h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.service__liste p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}


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

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

.ueber__bild { margin: 0; }

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

.ueber__titel { margin: 0 0 32px; }

.zitat {
  margin: 0 0 32px;
  padding: 0;
  font-family: var(--titelschrift);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.4;
  color: var(--gruen);
}

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

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


/* ── Oeffnungszeiten ─────────────────────────────────────────────────────── */

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

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

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

.zeiten__status {
  margin: 0 0 36px;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--z-text);
}

.zeiten__adresse {
  font-style: normal;
  font-size: 17px;
  line-height: 1.7;
}

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

.zeiten__liste { margin: 0; }

.zeiten__zeile {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--z-linie);
  font-size: 18px;
}

/* Abweichung 10: statt des leeren <div> am Ende der <dl>. */
.zeiten__zeile:last-child { border-bottom: 1px solid var(--z-linie); }

.zeiten__zeile dt { font-weight: 400; }

.zeiten__zeile dd {
  margin: 0;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.zeiten__zeile.is-heute dt,
.zeiten__zeile.is-heute dd { font-weight: 600; }

/* Abweichung 11: auf #1E4634 waere der Ring unsichtbar. */
.zeiten :focus-visible { outline-color: var(--grund); }


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

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

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

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

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

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

.kontakt__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 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

/* Wie im Entwurf: das Auswahlfeld ohne eigenes box-sizing (der Browser
   rechnet es ohnehin border-box), Eingabe und Textfeld ausdruecklich. */
.feld__wahl,
.feld__eingabe,
.feld__text {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 12px;
  border: 1px solid var(--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; }

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

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

/* Abweichung 9: 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;
}

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


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

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

/* Abweichung 19: 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(--z-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 11: auf #152A21 waere der Ring zu schwach. */
.fuss :focus-visible { outline-color: var(--grund); }


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

/* Abweichung 11: der Ring liegt hier innen. */
.anruf:focus-visible { outline-offset: -4px; }
.anruf--route: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(247, 243, 234, 0.95) 0%, rgba(247, 243, 234, 0.9) 52%, rgba(247, 243, 234, 0.45) 72%, rgba(247, 243, 234, 0) 88%);
  }
}

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

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

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

  .hero__schleier {
    background: linear-gradient(90deg, rgba(247, 243, 234, 0.94) 0%, rgba(247, 243, 234, 0.86) 38%, rgba(247, 243, 234, 0.3) 58%, rgba(247, 243, 234, 0) 72%);
  }
}

/* Abweichung 18: greift nur in Browsern ohne `text-wrap: balance`. 9.5em
   bricht wie balance nach "Tag." um, 576 px halten die Zeilen ab 1280 px vor
   der Mitte, wo der Schleier noch traegt. */
@supports not (text-wrap: balance) {
  .hero__titel { max-width: min(640px, 9.5em); }

  @media (min-width: 1280px) {
    .hero__titel { max-width: 576px; }
  }
}


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