/* ============================================================================
   CASA MANCUSO — Sizilianische Familien-Pizzeria in Hamburg
   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 "Casa Mancuso.dc.html"
   (Projekt 96417cf0-d388-4c6c-9f9b-9e76b9c2288c), 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 Young Serif und Manrope von Google Fonts und die
   Laufzeitdatei der Claude-Design-Umgebung. Er traegt Hover-Angaben der
   Umgebung an 16 Knoten (vier Menuepunkte, Telefon im Kopf, Kopf-Knopf,
   Hero-Knopf, "Speisekarte ansehen", zwei Kontakt-Verweise, Formular-Knopf,
   drei Verweise im Fuss, zwei Rechtsverweise), Fokus-Angaben an drei
   (Sprungverweis, Eingabefelder, Textfeld), drei Bedingungsbloecke
   (Menuezeile und Telefon nach Fensterbreite, veg.-Marke), drei Schleifen
   (Reiter, Gerichte, Felder) und eine `DCLogic`-Klasse mit Breiten-,
   Reiter- und Formularzustand, die beim Absenden das Mailprogramm oeffnet.
   Nichts davon laeuft ohne die Claude-Design-Umgebung (V1).

   Alle Masse sind die des Entwurfs, auch sein Kastenmodell: Er setzt
   `* { box-sizing: border-box }`, hier ebenso.

   Was der Entwurf je nach Fensterbreite per Skript umschaltet, steht hier in
   Media Queries an denselben Grenzen, nur min-width (V5):
     1024 px   Menuezeile und Telefon im Kopf
     1100 px   Hero: Bild hinter statt unter dem Text, Mindesthoehe,
               Schleier von links statt von oben, Ausschnitt 85 % statt 72 %
     1300 px   Hero: Ausschnitt 60 %
   Die Raster laufen wie im Entwurf ohne Media Query ueber
   `repeat(auto-fit, minmax(...))`.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Huellelemente der Umgebung, die
       Bedingungsbloecke und Schleifen, die Platzhalter in doppelten
       geschweiften Klammern, die Hover- und Fokus-Angaben, `onClick`/
       `onKeyDown`/`onSubmit`, `ref`, `DCLogic`, die Laufzeitdatei und das
       Werkzeug-Skript von Claude Design sind weg. Inline-Stile sind Klassen
       mit den Werten aus `:root`, Hover-Angaben sind `:hover`, Fokus-Angaben
       `:focus`; Reiter, Gerichte und Felder sind ausgeschrieben. Die
       globalen Regeln des Entwurfs fuer Verweise und Fokus stehen in
       `:where()` und haben damit keine Spezifitaet: Im Entwurf schlaegt jeder
       Inline-Stil sie, hier tut das jede Klasse. Folge wie dort:
       `a:hover` (#8E2616) wirkt nur an den zwei Verweisen ohne eigene Farbe
       (Telefon im Formular-Vorspann, Datenschutzerklaerung), Sprungverweis
       und Logo behalten beim Darueberfahren ihre Farbe, und der Fokusring
       rundet nur Elemente ohne eigene Rundung auf 4 px (Knoepfe und Reiter
       bleiben Pillen, der Sprungverweis 6 px).
    2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die
       Familien und Schnitte des Entwurfs: Young Serif 400 (statisch,
       26 992 B) und Manrope (variable Datei, Achse 200-800, freigegeben
       400-700 wie im Entwurf bestellt, 24 532 B), latin-Teilmenge mit
       demselben `unicode-range` wie bei Google. Zusammen 51 524 B, Budget
       120 KB. Kein preconnect, kein Stylesheet von Google. Young Serif laeuft
       ueberall in 400, 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, der Sprungverweis erscheint bei 34 statt 8 px, die
       Sprungziele halten 98 statt 72 px Abstand (#reservieren 122 statt
       96 px), und #top haelt 26 px, damit der Logo-Verweis wie im Entwurf
       ganz oben landet. Umgebrandet werden der Name im Kopf (Kurzform) und
       der Name im Fuss samt Copyright (voller Name; ueber ihn auch der
       Reiter). Im Kopf ist nur das Emblem ein Bild, eine Zitrone ohne
       Schrift, und es bleibt; der Name daneben ist im Entwurf Text und
       wechselt deshalb mit (V19).
    4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und
       og:description enden auf "Fiktives Beispielprojekt."
    5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien wie im Entwurf
       unter img/, unveraendert (alle schmaler als 1920 px; Titelbild
       136 012 B, Budget 250 KB). `width`/`height` wie im Entwurf, sie
       stimmen mit den Dateien ueberein (das Emblem ist 220 x 220 px und
       steht wie dort mit 44 x 44 im Markup). Genau ein Bild vorgeladen, das
       Titelbild (V18); og:image zeigt auf img/hero.webp. `decoding="async"`
       an allen Bildern ausser dem Titelbild.
    6. REITER DER SPEISEKARTE OHNE SKRIPT (V8). Statt fuenf Knoepfen mit
       Zustand fuenf Optionsfelder und `:checked`; die Beschriftungen tragen
       die Gestalt der Knoepfe (Pille, Rand, gewaehlt rot). Die Rollen
       tablist/tab/tabpanel fallen weg, weil `aria-selected` und `tabindex`
       ohne Skript nicht mitliefen; dafuer `fieldset` mit `legend`, deren
       Text der Name der Reiterzeile im Entwurf ist. Die Pfeiltasten wechseln
       wie im Entwurf, das tun Optionsfelder von selbst. Der Fokusring sitzt
       an der Beschriftung. Notiz und Gerichte stehen in fuenf
       ausgeschriebenen Tafeln, der Satz zu den Allergenen einmal darunter.
    7. FORMULAR SENDET NICHTS (V12). Pruefung, Fehlermeldungen, Statuszeile
       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. Im Entwurf standen die
       leeren Fehlerzeilen unter jedem Feld und unter der Einwilligung (je
       6 px Abstand darueber) und die leere Statuszeile am Ende (20 px
       Zeilenabstand); ihren Abstand halten leere ::after, damit der Kasten
       so hoch bleibt wie im Entwurf. Das Datumsfeld verliert sein `min`
       (= heute), weil sich das ohne Skript nicht setzen laesst.
    8. HERO-SCHLEIER AB 1100 PX (V9). Die Verlaufsstufen stehen bei 48 % und
       70 % statt bei 40 % und 66 %; Deckungen (0,94 / 0,85 / 0) und alle
       Textfarben bleiben. Mit den Werten des Entwurfs faellt die Schrift
       ueber dem Foto durch (siehe KONTRASTE, Titelbild).
    9. FOKUSRING IM FUSS (V9, Nicht-Text). #B3321F auf #2A211B hat 2,55 : 1;
       im Fuss ist der Ring deshalb --creme #FAF6EF (14,64 : 1).
   10. PLATZHALTER IM TEXTFELD (V9). Der Entwurf setzt keine Farbe; die
       Browser zeigen ihn hellgrau, je nach Browser bis hinunter auf
       2,35 : 1. Hier --leise #6B5E52, deckend: 6,27 : 1 auf #FFFFFF.
   11. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts
       ein. Band, Familie, Speisekarte, Handwerk und das Raster unter dem
       Gastraum-Bild tragen [data-reveal] und erscheinen einmal (400 ms,
       12 px). Der Hero nicht: das LCP-Element steht im ersten Frame. Der
       Fuss nicht. Ohne Skript und bei "Bewegung reduzieren" ist alles
       sofort da.
   12. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage).
       Impressum und Datenschutzerklaerung im Fuss und in der Einwilligung
       zeigen wie im Entwurf auf eineuroweb.de (Entscheidung 7) und fuehren
       damit nicht ins Leere.
   13. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Barmbeker Strasse 11, 22303 Hamburg, 040 123456789,
       pizza@eineuroweb.de und die Oeffnungszeiten. Benedikt hat sie
       geprueft.
   14. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: <html lang="de"> 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 --rot, ohne
       Buchstaben, damit die Umbrandung nichts Fremdes stehen laesst.

   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 #2A211B      auf --creme #FAF6EF ......... 14,64 : 1   OK
     --tinte              auf --sand #F3ECE0 .......... 13,43 : 1   OK
     --tinte              auf --papier #FFFDF9 ........ 15,52 : 1   OK
     --tinte              auf --weiss #FFFFFF ......... 15,77 : 1   OK
     --text #4A3F36       auf --creme .................  9,48 : 1   OK
     --text               auf --sand ..................  8,70 : 1   OK
     --text               auf --papier ................ 10,06 : 1   OK
     --text-2 #5A4E44     auf --creme .................  7,47 : 1   OK
     --text-2             auf --sand ..................  6,86 : 1   OK
     --text-2             auf --papier ................  7,93 : 1   OK
     --leise #6B5E52      auf --creme .................  5,82 : 1   OK
     --leise              auf --sand ..................  5,34 : 1   OK
     --leise              auf --papier ................  6,17 : 1   OK
     --leise              auf --weiss (Platzhalter) ...  6,27 : 1   OK
     --oliv #56622F       auf --creme .................  6,12 : 1   OK
     --oliv               auf --sand ..................  5,62 : 1   OK
     --oliv               auf --papier (veg.) .........  6,49 : 1   OK
     --rot #B3321F        auf --creme .................  5,75 : 1   OK
     --rot                auf --sand ..................  5,27 : 1   OK
     --rot                auf --papier ................  6,09 : 1   OK
     --rot-tief #8E2616   auf --creme .................  7,99 : 1   OK
     --rot-tief           auf --papier ................  8,47 : 1   OK
     --weiss              auf --rot (Knoepfe, Reiter) .  6,19 : 1   OK
     --weiss              auf --rot-tief (Hover) ......  8,61 : 1   OK
     --creme              auf --tinte (Sprungverweis) . 14,64 : 1   OK
   FUSS, Grund --tinte #2A211B:
     --fuss-text #E9DFD0 ............................... 11,96 : 1   OK
     --creme (Name, Verweise) .......................... 14,64 : 1   OK
     --fuss-leise #BFB2A1 ..............................  7,58 : 1   OK
     --fuss-hover #F0B4A6 ..............................  8,85 : 1   OK

   KOPFLEISTE. rgba(250,246,239,.9) laesst 10 % durch, darunter laeuft die
   ganze Seite durch. Unguenstigster Fall ist ein schwarzer Bildpunkt (die
   Unschaerfe und die Saettigung der Leiste machen nichts dunkler als
   Schwarz): Grund #E1DDD7.
     --tinte (Menue, Telefon) ..........................  11,66 : 1   OK
     --rot (Name 21 px, Menue beim Darueberfahren) .....   4,58 : 1   OK
     --leise (Unterzeile 10 px) ........................   4,64 : 1   OK

   TITELBILD. Unter 1100 px steht der Text auf dem Seitengrund, das Bild
   darunter: es gelten die Werte auf --creme oben. Ab 1100 px liegt der
   Text ueber Foto und Schleier. Der unguenstigste denkbare Fall (schwarzer
   Bildpunkt) reicht dort nicht: Deckung 0,85 -> #D4D1CB, --rot 4,06,
   --oliv 4,33 : 1. Gilt deshalb nur der Messwert am echten Foto. Gemessen
   in Chrome an dieser Seite (Dev-Server, echte Schriften und Umbrueche):
   Schrift im Hero durchsichtig geschaltet, dann jeder Bildpunkt unter einer
   Glyphe (plus 1 px Rand) gegen die Schriftfarbe gerechnet; 13 Fenster von
   1100 x 700 bis 2560 x 1440, je Teil der kleinste Wert ueber alle Fenster:
                           Entwurf 40 % / 66 %     hier 48 % / 70 %
     Vorzeile --oliv ..........  5,66 ..................  5,67 : 1   OK
     h1 --tinte ...............  3,11 (1100 x 900) .....  5,69 : 1   OK
     "Nonna" --rot ............  3,30 (2560 x 1440) ....  4,75 : 1   OK
     Vorspann --text ..........  6,94 ..................  8,25 : 1   OK
     "Speisekarte ansehen" ....  13,69 ................. 13,78 : 1   OK
       derselbe beim Hover --rot  5,37 ..................  5,41 : 1   OK
   > Folge: Abweichung 8. Geprueft und verworfen: Stufen 44 % / 68 %
   > (h1 4,29, "Nonna" 3,94 : 1); "Nonna" allein dunkler setzen (die h1
   > bliebe bei 3,11). Ohne `text-wrap: balance` (aeltere Browser) bricht
   > die Ueberschrift bei 1180 und 1280 px anders um (dritte Zeile bis 51 %
   > der Breite); nachgemessen mit `text-wrap: wrap` bleiben die kleinsten
   > Werte dieselben (h1 5,69, "Nonna" 4,75 : 1), deshalb kein Rueckfall
   > fuer solche Browser. Der Hero-Knopf ist deckend (--weiss auf --rot
   > 6,19).

   NICHT-TEXT (Ziel 3 : 1). Fokusring --rot auf --creme 5,75, auf --sand
   5,27, auf --papier 6,09, auf der Kopfleiste mindestens 4,58; im Fuss
   siehe Abweichung 9. Rahmen der Felder und Reiter #D6C9B5 auf Weiss und
   Papier 1,60-1,63, Punktlinie 1,89, Rand der veg.-Marke 1,88, Linien
   1,26 : 1 — Entwurf so gelassen (V9 gilt fuer Text); jedes Feld hat seine
   Beschriftung darueber, der gewaehlte Reiter ist zusaetzlich rot gefuellt.
   ========================================================================= */


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

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;          /* Datei traegt wght 200-800, freigegeben 400-700 */
  font-display: swap;
  src: url("../vendor/fonts/manrope-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/young-serif-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;
}


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

:root {
  --creme: #FAF6EF;        /* Seitengrund, Schleier, Kopfleiste; im Fuss Name und Verweise */
  --tinte: #2A211B;        /* Text, Ueberschriften, Menue; Grund von Fuss und Sprungverweis */
  --rot: #B3321F;          /* Akzent, Knoepfe, gewaehlter Reiter, Verweise, Fokusring */
  --rot-tief: #8E2616;     /* Knoepfe und Verweise beim Darueberfahren */
  --weiss: #FFFFFF;        /* Knopftext, Grund der Felder */
  --oliv: #56622F;         /* Vorzeilen, veg.-Marke */
  --text: #4A3F36;         /* Fliesstext gross, Einwilligung */
  --text-2: #5A4E44;       /* Fliesstext klein: Band, Karte, Bildkarten, Kasten */
  --leise: #6B5E52;        /* Unterzeile, Hinweise, Bezeichnungen, Platzhalter */
  --linie: #E6DCCB;        /* Linien, Rand des Reservierungskastens */
  --linie-2: #EDE4D6;      /* Linie unter jedem Gericht */
  --sand: #F3ECE0;         /* Band I.-III. und Besuch */
  --papier: #FFFDF9;       /* Speisekarte und Reservierungskasten */
  --punkte: #C9B9A3;       /* Punktlinie zum Preis, Unterstrich "Speisekarte ansehen" */
  --veg-rand: #B8BF9C;     /* Rand der veg.-Marke */
  --feld: #D6C9B5;         /* Rand der Felder und der Reiter */
  --fuss-text: #E9DFD0;    /* Fuss: Adresse und Zeiten */
  --fuss-leise: #BFB2A1;   /* Fuss: Unterzeile, Copyright-Zeile */
  --fuss-hover: #F0B4A6;   /* Fuss: Verweise beim Darueberfahren */
  --kopf-grund: rgba(250, 246, 239, 0.9);

  --schrift: Manrope, system-ui, sans-serif;
  --titelschrift: "Young Serif", Georgia, serif;

  --notice: 26px;          /* feste Hinweisleiste aus A17 */
  --kopf: 72px;            /* Hoehe der Kopfleiste im Entwurf */
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

* { box-sizing: border-box; }

/* Abweichung 1: ohne Spezifitaet, damit jede Klasse gewinnt wie im Entwurf
   jeder Inline-Stil. */
:where(a) {
  color: var(--rot);
  text-underline-offset: 3px;
}

:where(a:hover) { color: var(--rot-tief); }

:where(:focus-visible) {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}

input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: calc(var(--notice) + 8px);
  z-index: 100;
  background: var(--tinte);
  color: var(--creme);
  padding: 10px 16px;
  border-radius: 6px;
}

.skip:focus { left: 8px; }


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

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

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

.titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Kopf-Knopf und Hero-Knopf; der Formular-Knopf ist ein <button> mit eigener
   Regel, so wie im Entwurf. */
.knopf {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--rot);
  color: var(--weiss);
  text-decoration: none;
  font-weight: 600;
  transition: background .2s;
}

.knopf:hover {
  background: var(--rot-tief);
  color: var(--weiss);
}

.knopf--kopf {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  white-space: nowrap;
}

.knopf--hero {
  min-height: 54px;
  padding: 0 30px;
  font-size: 17px;
  box-shadow: 0 12px 26px -14px rgba(179, 50, 31, 0.7);
}


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

.kopf {
  position: fixed;
  top: var(--notice);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--kopf-grund);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  height: var(--kopf);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tinte);
}

/* Das Emblem hat keinen durchsichtigen Grund; `multiply` laesst sein Creme
   in der Kopfleiste verschwinden, wie im Entwurf. */
.marke__bild {
  width: 44px;
  height: 44px;
  display: block;
  mix-blend-mode: multiply;
}

.marke__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

/* Beim Umbranden steht hier der Name des Kunden. Ein langer Name brach sonst
   auf drei Zeilen um und rutschte unter die Hinweisleiste; so bleiben es
   hoechstens zwei Zeilen wie beim Musternamen, notfalls endend mit "…". */
.marke__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.marke__name {
  font-family: var(--titelschrift);
  font-size: 21px;
  color: var(--rot);
}

.marke__zeile {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 6px;
  color: var(--leise);
  font-weight: 600;
}

/* Unter 1024 px nicht da, wie im Entwurf (dort ein Bedingungsblock). */
.kopf__nav {
  display: none;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}

.kopf__link {
  color: var(--tinte);
  text-decoration: none;
}

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

.kopf__rechts {
  display: flex;
  align-items: center;
  gap: 18px;
}

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

.kopf__tel:hover { color: var(--rot); }


/* ── Hero ────────────────────────────────────────────────────────────────── */
/* Ausgangszustand = Entwurf unter 1100 px: Bild unter dem Text. */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding-top: var(--kopf);
  overflow: hidden;
  scroll-margin-top: var(--notice);
}

.hero__bildflaeche {
  position: relative;
  inset: 0;
  order: 2;
  height: clamp(280px, 62vw, 460px);
}

.hero__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  display: block;
}

.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--creme) 0%, rgba(250, 246, 239, 0) 22%);
}

.hero__textflaeche {
  position: relative;
  order: 1;
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 4vw, 40px) clamp(32px, 6vw, 96px);
}

.hero__inhalt { max-width: 620px; }

.hero__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(40px, 5.8vw, 80px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--tinte);
  text-wrap: balance;
}

.hero__nonna { color: var(--rot); }

.hero__vorspann {
  margin: 26px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--text);
  max-width: 500px;
  text-wrap: pretty;
}

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

.hero__link {
  color: var(--tinte);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--punkte);
  text-underline-offset: 6px;
}

.hero__link:hover {
  color: var(--rot);
  text-decoration-color: var(--rot);
}


/* ── Band I. II. III. ────────────────────────────────────────────────────── */

.band {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--sand);
}

.band__raster {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 48px;
}

.band__punkt {
  display: flex;
  gap: 16px;
}

.band__ziffer {
  font-family: var(--titelschrift);
  font-size: 26px;
  color: var(--rot);
  line-height: 1;
}

.band__titel {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}

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


/* ── La Famiglia ─────────────────────────────────────────────────────────── */

.familie {
  scroll-margin-top: calc(var(--notice) + var(--kopf));
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.familie__bild { margin: 0; }

.familie__text { max-width: 540px; }

.familie__absaetze {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  text-wrap: pretty;
}

.familie__absaetze p { margin: 0; }

.spruch {
  margin: 32px 0 0;
  font-family: var(--titelschrift);
  font-size: 23px;
  color: var(--rot);
}

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


/* ── Speisekarte ─────────────────────────────────────────────────────────── */

.karte {
  scroll-margin-top: calc(var(--notice) + var(--kopf));
  background: var(--papier);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.karte__innen {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 130px) clamp(20px, 4vw, 40px);
}

.karte__kopf {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.karte__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.karte__vorspann {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Abweichung 6: Optionsfelder und :checked statt Reiter mit Zustand. */
.wahl {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.wahl__feld {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reiter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 44px auto 0;
}

.reiter__knopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--feld);
  background: transparent;
  color: var(--tinte);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}

#k-rosse:checked ~ .reiter label[for="k-rosse"],
#k-bianche:checked ~ .reiter label[for="k-bianche"],
#k-antipasti:checked ~ .reiter label[for="k-antipasti"],
#k-dolci:checked ~ .reiter label[for="k-dolci"],
#k-bevande:checked ~ .reiter label[for="k-bevande"] {
  border-color: var(--rot);
  background: var(--rot);
  color: var(--weiss);
}

/* Der Ring gehoert sichtbar an die Beschriftung, nicht an das versteckte
   Optionsfeld; die Pille bleibt Pille wie beim Knopf im Entwurf. */
#k-rosse:focus-visible ~ .reiter label[for="k-rosse"],
#k-bianche:focus-visible ~ .reiter label[for="k-bianche"],
#k-antipasti:focus-visible ~ .reiter label[for="k-antipasti"],
#k-dolci:focus-visible ~ .reiter label[for="k-dolci"],
#k-bevande:focus-visible ~ .reiter label[for="k-bevande"] {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}

.tafeln { margin-top: 48px; }

.tafel { display: none; }

#k-rosse:checked ~ .tafeln #t-rosse,
#k-bianche:checked ~ .tafeln #t-bianche,
#k-antipasti:checked ~ .tafeln #t-antipasti,
#k-dolci:checked ~ .tafeln #t-dolci,
#k-bevande:checked ~ .tafeln #t-bevande {
  display: block;
}

.tafel__notiz {
  margin: 0 auto 32px;
  text-align: center;
  font-size: 15px;
  color: var(--leise);
  max-width: 560px;
}

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

.gericht {
  padding: 22px 0;
  border-bottom: 1px solid var(--linie-2);
}

.gericht__zeile {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.gericht__name {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
}

.veg {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oliv);
  border: 1px solid var(--veg-rand);
  border-radius: 999px;
  padding: 2px 8px;
}

.gericht__punkte {
  flex: 1;
  border-bottom: 1px dotted var(--punkte);
  transform: translateY(-4px);
  min-width: 16px;
}

.gericht__preis {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gericht__text {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 440px;
}

.karte__hinweis {
  margin: 36px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--leise);
}


/* ── Il Mestiere ─────────────────────────────────────────────────────────── */

.handwerk {
  scroll-margin-top: calc(var(--notice) + var(--kopf));
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) clamp(20px, 4vw, 40px);
}

.handwerk__kopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}

.handwerk__titelblock { max-width: 520px; }

.handwerk__vorspann {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  max-width: 480px;
  text-wrap: pretty;
}

.bildkarten {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}

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

.bildkarte__nr {
  margin: 0 0 6px;
  font-family: var(--titelschrift);
  color: var(--rot);
  font-size: 18px;
}

.bildkarte__titel {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
}

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


/* ── Besuch ──────────────────────────────────────────────────────────────── */

.besuch {
  scroll-margin-top: calc(var(--notice) + var(--kopf));
  background: var(--sand);
  border-top: 1px solid var(--linie);
}

.besuch__bild {
  width: 100%;
  height: clamp(260px, 42vw, 560px);
  object-fit: cover;
  display: block;
}

.besuch__raster {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.besuch__text { max-width: 480px; }

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

.angaben {
  margin: 40px 0 0;
  display: grid;
  gap: 26px;
}

.angaben dt {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--leise);
  margin-bottom: 6px;
}

.angaben dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.angaben dd.angaben__kontakt { line-height: 1.8; }

/* Unterstrichen wie im Entwurf: Er nimmt den Strich hier nicht weg. */
.angaben__link {
  color: var(--tinte);
  font-weight: 600;
}

.angaben__link:hover { color: var(--rot); }


/* ── Reservierungskasten ─────────────────────────────────────────────────── */

.kasten {
  scroll-margin-top: calc(var(--notice) + 96px);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: clamp(24px, 4vw, 44px);
}

.kasten__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
}

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

/* Farbe, Unterstrich und Hover aus den globalen Regeln, wie im Entwurf. */
.kasten__tel { font-weight: 600; }

.formular {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 20px 16px;
}

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

.feld--breit { grid-column: 1 / -1; }

/* Abweichung 7: Hier stand im Entwurf je eine leere Fehlerzeile (6 px
   Abstand darueber), am Ende des Formulars die leere Statuszeile (20 px
   Zeilenabstand). Die leeren ::after halten denselben Abstand. */
.feld--fehlerplatz::after { content: ""; }

.formular::after {
  content: "";
  grid-column: 1 / -1;
}

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

.feld__optional {
  font-weight: 400;
  color: var(--leise);
}

.feld__eingabe {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 4px;
  border: 1px solid var(--feld);
  background: var(--weiss);
  font-size: 16px;
}

.feld__text {
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid var(--feld);
  background: var(--weiss);
  font-size: 16px;
  resize: vertical;
}

.feld__eingabe:focus,
.feld__text:focus {
  border-color: var(--rot);
  outline: none;
  box-shadow: 0 0 0 3px rgba(179, 50, 31, 0.18);
}

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

.einwilligung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  cursor: pointer;
}

.einwilligung__feld {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--rot);
  flex-shrink: 0;
}

.formular__fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.formular__knopf {
  min-height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  border: 0;
  background: var(--rot);
  color: var(--weiss);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

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

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


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

.fuss {
  background: var(--tinte);
  color: var(--fuss-text);
}

.fuss__raster {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 40px) 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.fuss__name {
  margin: 0;
  font-family: var(--titelschrift);
  font-size: 28px;
  color: var(--creme);
}

.fuss__zeile {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--fuss-leise);
}

.fuss__adresse {
  font-size: 15px;
  line-height: 1.7;
}

.fuss__adresse p { margin: 0; }

.fuss__adresse .fuss__zeiten { margin: 12px 0 0; }

.fuss__kontakt {
  font-size: 15px;
  line-height: 1.9;
  display: flex;
  flex-direction: column;
}

.fuss__link { color: var(--creme); }

.fuss__link--ohne-strich { text-decoration: none; }

.fuss__link:hover { color: var(--fuss-hover); }

.fuss__unten {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 40px) 32px;
  border-top: 1px solid var(--text);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: 14px;
  color: var(--fuss-leise);
}

.fuss__recht {
  display: flex;
  gap: 28px;
}

/* Abweichung 9. */
.fuss :focus-visible { outline-color: var(--creme); }


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

.rechtliches {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 40px) 40px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
  scroll-margin-top: calc(var(--notice) + var(--kopf));
}

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

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


/* ── Breiten · dieselben Grenzen wie im Skript des Entwurfs ──────────────── */

@media (min-width: 1024px) {
  .kopf__nav { display: flex; }
  .kopf__tel { display: block; }
}

@media (min-width: 1100px) {
  .hero { min-height: clamp(640px, 86svh, 940px); }

  .hero__bildflaeche {
    position: absolute;
    height: 100%;
  }

  .hero__bild { object-position: 85% 50%; }

  /* Abweichung 8: Stufen 48 % / 70 % statt 40 % / 66 %. */
  .hero__schleier {
    background: linear-gradient(90deg, rgba(250, 246, 239, 0.94) 0%, rgba(250, 246, 239, 0.85) 48%, rgba(250, 246, 239, 0) 70%);
  }
}

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


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