/* ============================================================================
   KOEZ STEAK DOENER — Doener aus echtem Rindersteak, Hamburg St. Georg
   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 "doener\KOEZ Steak
   Doener.dc.html" (Projekt 96417cf0-d388-4c6c-9f9b-9e76b9c2288c), Uebernahme
   am 31.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 Archivo (variabel in Gewicht und Breite) und Instrument
   Sans von Google Fonts und die Laufzeit `support.js`. Er traegt
   Hover-Angaben der Claude-Design-Umgebung an 17 Verweisen (vier
   Menuepunkte, "Vorbestellen", "Zur Karte", drei rote und ein heller Knopf,
   "Grossbestellung anfragen", Telefon und E-Mail im Adresskasten, zwei
   Kontaktverweise und zwei Rechtsverweise im Fuss), eine Fokus-Angabe am
   Sprungverweis, einen Bedingungsblock sc-if (Menuezeile), zwei Schleifen
   sc-for (Speisekarte) und eine `DCLogic`-Klasse, die die Fensterbreite
   liest. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1).

   Alle Masse sind die des Entwurfs, auch sein Kastenmodell: Er setzt ein
   globales `* { box-sizing: border-box }`, das steht hier genauso.

   Was der Entwurf je nach Fensterbreite per Skript umschaltet, steht hier in
   Media Queries an denselben Grenzen, nur min-width (V5):
     1024 px   Menuezeile im Kopf. Darunter gibt es im Entwurf keine, auch
               kein Handy-Menue: Logo und "Vorbestellen" bleiben.
     1100 px   Hero: Bild hinter dem Text statt darunter, Mindesthoehe,
               Ausschnitt 85 % statt 78 %, Schleier von links statt von oben
     1300 px   Hero: Ausschnitt 70 % statt 85 %
   Ein vierter Schalter (Reihenfolge im Abschnitt Qualitaet, unter und ueber
   900 px) war in beiden Faellen 0 und stellte nichts um; er fehlt.
   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 Elemente x-dc und helmet, der
       Bedingungsblock, die Schleifen, die Platzhalter in doppelten
       geschweiften Klammern, die Hover- und Fokus-Angaben, die
       hint-placeholder-Attribute, `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` mit genau
       den Werten des Entwurfs, die Fokus-Angabe ist `.skip:focus`, die
       Speisekarte ist ausgeschrieben. Die globale Regel
       `a:hover { color: #9C2F0D }` des Entwurfs fehlt: Jeder Verweis setzt
       dort seine Farbe inline, die Regel wirkte also nirgends. Als Regel in
       dieser Datei griffe sie ploetzlich, etwa am Sprungverweis (#9C2F0D auf
       #161412 = 2,47 : 1). 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: Archivo (variable Datei, Gewicht
       freigegeben 500-900 wie im Entwurf bestellt, Breite 62-125 %,
       90 104 B) und Instrument Sans (variable Datei, Gewicht 400-700,
       30 092 B), latin-Teilmenge mit demselben `unicode-range` wie bei
       Google. Zusammen 120 196 B = 117,4 KB, Budget 120 KB. Bei Archivo steht
       `font-stretch: 62% 125%` wie in Googles eigener CSS; ohne die Angabe
       setzt nicht jeder Browser die Breiten 108/110/112/115 % des Entwurfs
       auf die Achse der Datei um. Kein preconnect, kein Stylesheet von
       Google. Der Entwurf nutzt keine Kursive. Der Pfeil U+2192 in
       "Vorbestellen" liegt in keiner der beiden Dateien und auch in keiner
       Teilmenge von Google; er kam schon im Entwurf aus der Systemschrift und
       tut das hier genauso.
    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 98 statt 72 px Abstand, der
       Sprungverweis erscheint bei 34 statt 8 px, und #top und <main> halten
       26 px, damit Logo-Verweis und Sprungverweis wie im Entwurf ganz oben
       landen.
    4. SPERRHINWEIS UND SPRACHE (V14). `noindex, nofollow`;
       Seitenbeschreibung und og:description enden auf "Fiktives
       Beispielprojekt." <html> traegt `lang="de"` (im Entwurf ohne).
    5. BILDER LOKAL (V3, V18, Entscheidung 6). Dieselben Dateien aus dem
       Projekt, byte-gleich, alle hoechstens 1920 px breit; das Titelbild ist
       1344 x 752 px und 153 002 B gross (Budget 250 KB) und wird auf breiten
       Fenstern wie im Entwurf hochgerechnet. Genau ein Bild vorgeladen, das
       Titelbild, wie im Entwurf; og:image zeigt auf img/hero.webp. Die
       Bilder unter der Falz tragen `decoding="async"`, Logo auch.
    6. UEBERSCHRIFT AUF SCHMALEN HANDYS (V5). Der Entwurf setzt die <h1> auf
       clamp(44px, 6.6vw, 96px). "RINDERSTEAK." ist 8,59 em breit, bei 44 px
       also 378 px; bei 360 px Fensterbreite stehen 320 px zur Verfuegung.
       Der Hero schneidet ab (overflow: hidden): Bei 360 px fehlte "K.", die
       Unterzeile ragte mit hinaus; bis 417 px lief das Wort in den Rand.
       Die Untergrenze waechst deshalb mit dem Fenster:
       min(44px, (100vw - 40px) / 8.7). Bei 360 px sind das 36,8 px, bei
       390 px 40,2 px; ab 423 px Fensterbreite gilt genau der Wert des
       Entwurfs. Geprueft bei 320 bis 768 px.
    7. ROT IM HERO UND SCHLEIER AB 1100 PX (V9). "Rindersteak." in #C23D14
       erreicht auf dem Hero-Grund #EDEBE8 hoechstens 4,44 : 1. Ab 1100 px
       liegt das Wort zur Haelfte auf dem Foto, wo der Schleier des Entwurfs
       schon auslaeuft (0,7 bei 38 %, 0 bei 60 %): 98-99 % der
       Buchstabenkanten unter 4,5, der schlechteste Wert 1,00 : 1 ("AK." ueber
       Tomate und Fleisch). Deshalb (--rot-hero):
         unter 1100 px  #BD3B13 statt #C23D14 (4,65 : 1, mit blossem Auge
                        kaum zu unterscheiden)
         ab 1100 px     #9C2F0D, das Hover-Rot des Entwurfs, und der
                        Schleier 0,92 bei 0 % -> 0,87 bei 64 % -> 0 bei 74 %
       Dasselbe Rot traegt "Zur Karte" beim Darueberfahren (Entwurf
       #C23D14, auf dem Hero-Grund ebenfalls 4,44 : 1). Sichtbare Folge: Die
       linke Haelfte des Doeners liegt staerker unter dem Schleier. Die Werte
       des Entwurfs stehen bei den Regeln unten; wer zurueck will, braucht
       Benedikts ausdrueckliches Ja (Entscheidung 7 vom 30.10.2026).
    8. KOPFLEISTE DECKEND (V9). Im Entwurf rgba(244,241,236,0.9) mit
       `backdrop-filter: saturate(1.3) blur(12px)`. Ueber den dunklen
       Abschnitten (Steak-Teil, Fuss) scheint #161412 durch, der Grund wird
       #DEDBD6, und "St. Georg" sowie das rote Hover der Menuepunkte und von
       "Vorbestellen" fallen auf 3,83 : 1 (ueber schwarzen Bildstellen 3,76,
       ueber einem roten Knopf 4,08). Hier deckend #F4F1EC, der Weichzeichner
       wirkt dann nicht mehr und fehlt. Ueber hellem Inhalt sieht die Leiste
       genauso aus wie im Entwurf (0,9 x #F4F1EC ueber #F4F1EC = #F4F1EC).
    9. LOGOZEILE (V20). Der aeussere Rahmen um "Steak Doener / St. Georg"
       bekommt `font-size: 14px`, damit eine von der persoenlichen Vorschau
       eingesetzte Zeile in 14 statt 16 px erscheint. Damit die Sperrung
       gleich bleibt, steht sie in px: 0,32 px = 0.02em der 16 px, die der
       Rahmen im Entwurf erbt. Sichtbar aendert sich nichts.
       Neben Logo und "Vorbestellen" ist fuer die eingesetzte Zeile auf dem
       Handy kein Platz: Mit "Gastronomie & Hotellerie" (fester Kopf
       Gastronomie) stand "Vorbestellen" bei 360 px 69 px ueber dem Rand,
       bei 390 px 39 px, bei 414 px 15 px; mit "Malerbetrieb in Essen" bei
       360 px 74 px. Deshalb, nur in der Vorschau (erkannt daran, dass
       "Steak Doener", .marke__gewerk, fehlt): Unter 520 px fehlt die
       Zeile. Ab 520 px bricht sie an Leerzeichen um und nur dann mitten im
       Wort, wenn ein Wort allein nicht passt; alle 15 festen Logozeilen
       passen dort ohne geteiltes Wort. Sie ist hoechstens 260 px breit:
       Ohne Grenze stauchte sie ab 1024 px die Menuezeile, mit
       "Rechtsanwalt / Steuerberater" brach dort bis 1062 px der Menuepunkt
       "Steak Doener" um. Nachgemessen am 31.10.2026 mit diesen 15 Zeilen,
       der leeren ("Sonstiges") und 5 Saetzen wie von der KI, von 280 bis
       1920 px in 1-px-Schritten und bei 35 Breiten je frisch geladen und
       einmal eingesetzt wie in der Vorschau: nirgends ueber den Rand, kein
       Menuepunkt umgebrochen; in den rechten Innenabstand nur unter 293 px
       (hoechstens 12,7 px, dort stehen nur Logo und "Vorbestellen").
       Geteilt wird nur "Steuerberatungskanzlei" (22 Buchstaben) zwischen
       520 und 576 px. Die Demo bleibt pixelgleich. Alle Regeln sitzen an
       der Zeile selbst: Eine Regel an einem Vorfahren mit :has() und darin
       noch einmal :has() verwirft der Browser ganz, und eine Vorfahren-
       Regel mit :not(:has()) rechnete Chrome 155 nach dem Einsetzen nicht
       neu (gemessen).
   10. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts
       ein. Die vier Abschnitte unter dem Hero tragen [data-reveal] und
       erscheinen einmal (400 ms, 12 px). Der Hero nicht: das LCP-Element
       steht im ersten Frame; der Fuss auch nicht. In der Karte traegt ein
       Block ohne eigene Gestaltung die Markierung, nicht der Abschnitt
       selbst: Sonst verschoebe der Versatz das Sprungziel #karte um 12 px.
       Ohne Skript und bei "Bewegung reduzieren" ist alles sofort da.
   11. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage).
       Impressum und Datenschutzerklaerung im Fuss zeigen wie im Entwurf auf
       eineuroweb.de (Entscheidung 7) und fuehren damit nicht ins Leere.
   12. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Alsterallee 11, 20099 Hamburg, St. Georg, 040 123456789,
       doener@eineuroweb.de und die Oeffnungszeiten. Benedikt hat sie
       geprueft.
   13. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser
       /favicon.ico an der Wurzel ab, und die App liefert dort nichts. Wie in
       den anderen Vorlagen steht es als data:-Adresse im Kopf (V3): eine
       Flaeche in --rot, ohne Buchstaben, damit die Umbrandung nichts
       Fremdes stehen laesst.

   Bewusst wie im Entwurf gelassen (nachgemessen am 31.10.2026): Unter
   441 px bricht "Steak Doener" im Kopf auf zwei Zeilen um, unter 397 px
   auch "St. Georg"; die Zeile neben dem Logo ist dann vierzeilig und
   55 px hoch. Unter 378 px schiebt sich "Vorbestellen" in den rechten
   Innenabstand, unter 362 px ueber den Rand: Sein rechtes Ende bleibt bei
   361,7 px stehen und ragt bei 360 px 2 px hinaus (die Linie stoesst an
   die Kante), bei 340 px 22 px (der Pfeil fehlt), bei 320 px 42 px (zu
   lesen ist nur "VORBESTELLE"). Kein Rollbalken, der Kopf steht fest.
   Die Kopfzeile der Karte bricht bei jeder Breite um, der Absatz steht
   immer unter der Ueberschrift.

   KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9)
   --------------------------------------------
   WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Flaechen sind vorher im
   sRGB-Raum verrechnet, so wie der Browser es tut.

   HELLER GRUND --grund #F4F1EC (Seite, Kopfleiste, Karte, Besuch):
     --tinte #161412 ..................................... 16,31 : 1   OK
     --rot #C23D14 (Vorzeilen, "St. Georg", Hover) .......  4,69 : 1   OK
     --text #3A3530 ...................................... 10,76 : 1   OK
     --text-2 #4F4943 ....................................  7,88 : 1   OK
     --leise #5A534C (Gerichte, Hinweis, #rechtliches) ...  6,71 : 1   OK
   WEISSER GRUND #FFFFFF (Signature-Karte, Qualitaet, Adresskasten):
     --tinte 18,37 · --rot 5,29 · --text 12,13 · --text-2 8,87 ·
     --leise (dt) 7,56 ..................................... alle OK
   KNOEPFE UND SCHILD:
     #FFFFFF auf --rot (Knoepfe, "Signature") ............  5,29 : 1   OK
     #FFFFFF auf --rot-tief #9C2F0D (Hover) ..............  7,43 : 1   OK
     --tinte auf --grund (heller Knopf im Steak-Teil) .... 16,31 : 1   OK
     --rot auf #FFFFFF (heller Knopf, Hover) .............  5,29 : 1   OK
     --grund auf --tinte ("Grossbestellung", Hover) ...... 16,31 : 1   OK
   DUNKLER GRUND --tinte #161412 (Steak-Teil, Fuss):
     --grund #F4F1EC ..................................... 16,31 : 1   OK
     --orange #F08A5D (Vorzeile, Ziffern, Hover im Fuss) .  7,44 : 1   OK
     --strich #CFC7BC (Absatz, Fusstext) ................. 10,98 : 1   OK
     --dunkel-text #B8AFA3 (Schritte) ....................  8,49 : 1   OK
     --fuss-copy #A39A8E (Copyright) .....................  6,62 : 1   OK
   KOPFLEISTE (Abweichung 8). Halbdurchsichtig wie im Entwurf, --rot als
   "St. Georg" und Hover: ueber #F4F1EC 4,69, ueber dem Hero 4,65, ueber
   #FFFFFF 4,74, ueber #161412 3,83 FAELLT DURCH, ueber einem roten Knopf
   4,08 FAELLT DURCH, ueber Schwarz im Bild 3,76 FAELLT DURCH. Deckend
   ueberall 4,69 : 1 (--tinte 16,31) — OK.
   HERO UNTER 1100 PX. Der ganze Text steht auf der Flaeche #EDEBE8, das
   Bild darunter:
     --tinte 15,44 · --text 10,19 · --text-2 7,46 ............ alle OK
     --rot #C23D14 ("Rindersteak.", Entwurf) .............  4,44 : 1   FAELLT DURCH
     --rot-hero #BD3B13 (Abweichung 7) ...................  4,65 : 1   OK
     "Zur Karte" beim Darueberfahren, --rot-hero .........  4,65 : 1   OK
   Am echten Hintergrund nachgemessen bei 360, 390, 768, 1024 und 1099 px:
   dieselben Werte. Nur die Zeile neben "Halal" sinkt ab 768 px unter dem
   Schatten des roten Knopfs auf 7,28 : 1 — OK.
   HERO AB 1100 PX. Text auf Schleier ueber dem Foto. Gemessen im Browser an
   dieser Seite (31.10.2026): Schrift durchsichtig geschaltet, dann jeder
   Bildpunkt in den Zeilenkaesten gegen die Schriftfarbe gerechnet (der
   kleinste Wert ist damit eine sichere Untergrenze), "Rindersteak."
   zusaetzlich an einem 2-px-Ring um jeden Buchstaben. Je Text der kleinste
   Wert ueber 13 Fenster von 1100 x 700 bis 2560 x 1440:
     Vorzeile --tinte .................................... 14,89 : 1   OK
     <h1> --tinte ........................................ 12,33 : 1   OK
     "Rindersteak." --rot-hero = #9C2F0D .................  4,65 : 1   OK
       an den Buchstabenkanten 4,68, kein Kantenpunkt unter 4,5
     Unterzeile --text ...................................  9,08 : 1   OK
     "Zur Karte" --tinte ................................. 14,05 : 1   OK
     "Zur Karte" beim Darueberfahren, #9C2F0D ............  5,68 : 1   OK
     "100 % Halal" --tinte ............................... 14,27 : 1   OK
     Zeile daneben --text-2 ..............................  6,61 : 1   OK
     Knopf #FFFFFF auf --rot .............................  5,29 : 1   OK
   Mit dem Schleier und dem Rot des Entwurfs lag "Rindersteak." an einer
   1:1-Nachbildung von Kopf und Hero an den Buchstabenkanten bei 1,00 : 1
   (Median 4,2; 98-99 % der Kantenpunkte unter 4,5).
   NICHT-TEXT (Grenze 3 : 1). Fokusring --rot auf #F4F1EC 4,69, auf #FFFFFF
   5,29, auf #EDEBE8 4,44, auf #161412 3,47 — OK. Rahmen "100 % Halal" und
   "Grossbestellung" --tinte 15,44 bzw. 16,31. Reiner Schmuck ohne Grenze:
   Linien #DDD6CB auf #F4F1EC 1,28, Unterstrich von "Zur Karte" #B5ADA2 auf
   #EDEBE8 1,86 (die Schrift selbst ist --tinte).
   ========================================================================= */


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

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 900;          /* Datei traegt wght 100-900, freigegeben 500-900 */
  font-stretch: 62% 125%;        /* Breitenachse der Datei, wie bei Google */
  font-display: swap;
  src: url("../vendor/fonts/archivo-500-900-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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/instrument-sans-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;
}


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

:root {
  --grund: #F4F1EC;        /* Seite, Kopfleiste, heller Knopf, Schrift auf Dunkel */
  --tinte: #161412;        /* Text, Grund Steak-Teil und Fuss, Rahmen, Linien */
  --rot: #C23D14;          /* Akzent: Knoepfe, Vorzeilen, "St. Georg", Hover, Fokusring */
  --rot-tief: #9C2F0D;     /* Knopf beim Darueberfahren */
  --rot-hero: #BD3B13;     /* "Rindersteak." unter 1100 px; Entwurf #C23D14 (Abweichung 7) */
  --hero: #EDEBE8;         /* Grund des Hero, Farbe des Schleiers */
  --linie: #DDD6CB;        /* Linien und Rahmen auf Hell */
  --strich: #CFC7BC;       /* Strich neben dem Logo, Absatz im Steak-Teil, Fusstext */
  --text: #3A3530;         /* Hero-Unterzeile, Signature-Text, Absatz Besuch */
  --text-2: #4F4943;       /* Zeile neben "Halal", Einleitung Karte, Qualitaet */
  --leise: #5A534C;        /* Beschreibung der Gerichte, Hinweis, Bezeichnungen */
  --unterstrich: #B5ADA2;  /* Unterstrich von "Zur Karte", nur Schmuck */
  --orange: #F08A5D;       /* Vorzeile und Ziffern im Steak-Teil, Hover im Fuss */
  --dunkel-linie: #34302C; /* Linien im Steak-Teil und im Fuss */
  --dunkel-text: #B8AFA3;  /* Text der Schritte */
  --fuss-copy: #A39A8E;    /* Copyright-Zeile */
  --weiss: #FFFFFF;        /* Knopfschrift, Signature-Karte, Qualitaet, Adresskasten */
  --schatten-rot: rgba(194, 61, 20, 0.75);

  --schrift: "Instrument Sans", system-ui, sans-serif;
  --titelschrift: Archivo, system-ui, sans-serif;

  --breite: 1320px;
  --rand: clamp(20px, 4vw, 40px);
  --rand-kopf: clamp(16px, 4vw, 40px);
  --abschnitt: clamp(72px, 10vw, 140px);
  --abstand: clamp(40px, 6vw, 96px);
  --notice: 26px;          /* feste Hinweisleiste aus A17 */
  --kopf: 72px;            /* Kopfleiste ohne ihre 1-px-Linie */
}


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

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

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

* { box-sizing: border-box; }

/* Abweichung 3: Ziel des Sprungverweises, landet ganz oben wie im Entwurf. */
main { scroll-margin-top: var(--notice); }

a {
  color: var(--rot);
  text-underline-offset: 3px;
}

/* Steht absichtlich VOR den Bausteinen: gleiche Gewichtung, die spaetere
   Regel gewinnt. Im Entwurf schlug jede Rundung am Element selbst die 4 px
   dieser Regel; so bleiben die Pillen-Knoepfe auch im Fokus rund. */
:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip:focus { left: 8px; }


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

/* Abweichung 8: Entwurf rgba(244,241,236,0.9) mit
   backdrop-filter: saturate(1.3) blur(12px). */
.kopf {
  position: fixed;
  top: var(--notice);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}

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

.marke {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.marke__logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Abweichung 9: font-size und die Sperrung in px. */
.marke__zeile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding-left: 12px;
  margin-left: 12px;
  border-left: 1.5px solid var(--strich);
  line-height: 1;
  font-family: var(--titelschrift);
  font-size: 14px;
  font-weight: 800;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.32px;
  color: var(--tinte);
}

.marke__gewerk { font-size: 14px; }

.marke__ort {
  font-size: 12px;
  color: var(--rot);
}

/* Abweichung 9: Nur fuer die persoenliche Vorschau. Setzt sie ihren Text
   ein, ersetzt er beide Zeilen, und .marke__gewerk fehlt. Daneben passt er
   auf dem Handy nicht: Er steht erst ab 520 px, bricht an Leerzeichen um
   und nur dann mitten im Wort, wenn ein Wort allein nicht passt. Hoechstens
   260 px breit, damit ab 1024 px die Menuezeile nicht gestaucht wird. Die
   Demo trifft keine dieser Regeln. */
.marke__zeile:not(:has(.marke__gewerk)) { display: none; }

@media (min-width: 520px) {
  .marke__zeile:not(:has(.marke__gewerk)) {
    display: flex;
    max-width: 260px;
    overflow-wrap: anywhere;
  }
}

.kopf__nav {
  display: none;
  gap: 32px;
  font-size: 15px;
  font-weight: 600;
}

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

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

.vorbestellen {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--tinte);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--tinte);
  transition: color .2s, border-color .2s;
}

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

.vorbestellen__pfeil {
  font-size: 16px;
  letter-spacing: 0;
}


/* ── Knoepfe ─────────────────────────────────────────────────────────────── */

.knopf {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--rot);
  color: var(--weiss);
  text-decoration: none;
  font-weight: 700;
  transition: background .2s;
}

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

.knopf--hero {
  min-height: 56px;
  padding: 0 30px;
  font-size: 17px;
  box-shadow: 0 14px 28px -14px var(--schatten-rot);
}

.knopf--karte {
  align-self: flex-start;
  min-height: 52px;
  margin-top: 28px;
  padding: 0 26px;
  font-size: 16px;
}

.knopf--anruf {
  min-height: 56px;
  padding: 0 28px;
  font-size: 17px;
}

.knopf-hell {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  margin-top: 40px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--grund);
  color: var(--tinte);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: background .2s;
}

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

.knopf-rand {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1.5px solid var(--tinte);
  color: var(--tinte);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: background .2s;
}

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


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

/* Unter 1100 px wie im Entwurf "mobil": Bild als eigener Block unter dem
   Text, Schleier nur als Uebergang oben. Ab 1100 px siehe unten. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding-top: var(--kopf);
  overflow: hidden;
  background: var(--hero);
  scroll-margin-top: var(--notice);
}

.hero__bild {
  position: relative;
  inset: 0;
  order: 2;
  height: clamp(280px, 60vw, 480px);
}

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

.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #EDEBE8 0%, rgba(237, 235, 232, 0) 20%);
}

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

.hero__text { max-width: 640px; }

.hero__zeile {
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinte);
}

.hero__strich {
  width: 28px;
  height: 2px;
  background: var(--rot);
}

/* Abweichung 6: Entwurf clamp(44px, 6.6vw, 96px). */
.hero__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 850;
  font-stretch: 112%;
  font-size: clamp(min(44px, calc((100vw - 40px) / 8.7)), 6.6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--tinte);
  text-wrap: balance;
}

/* Abweichung 7: Entwurf #C23D14. */
.hero__rot { color: var(--rot-hero); }

.hero__unterzeile {
  margin: 28px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--text);
  max-width: 480px;
  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(--unterstrich);
  text-underline-offset: 6px;
}

/* Abweichung 7: Entwurf #C23D14 fuer Schrift und Unterstrich. */
.hero__link:hover {
  color: var(--rot-hero);
  text-decoration-color: var(--rot-hero);
}

.hero__meta {
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 14px;
  color: var(--text-2);
}

.halal {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1.5px solid var(--tinte);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte);
}


/* ── Gemeinsame Bausteine der Abschnitte ─────────────────────────────────── */

.raster-zwei {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--abschnitt) var(--rand);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--abstand);
  align-items: center;
}

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

.vorzeile--orange { color: var(--orange); }

.titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.titel--steak {
  font-size: clamp(34px, 4.4vw, 60px);
  text-wrap: balance;
}

/* Im Entwurf als einzige Abschnittsueberschrift ohne balance. */
.titel--karte { font-size: clamp(36px, 4.6vw, 64px); }

.titel--abschnitt {
  font-size: clamp(34px, 4.2vw, 56px);
  text-wrap: balance;
}


/* ── Steak-Teil ──────────────────────────────────────────────────────────── */

.steak {
  scroll-margin-top: calc(var(--notice) + var(--kopf));
  background: var(--tinte);
  color: var(--grund);
}

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

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

.schritte {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.schritt {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--dunkel-linie);
}

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

.schritt__nr {
  font-family: var(--titelschrift);
  font-weight: 800;
  font-size: 22px;
  color: var(--orange);
}

.schritt__titel {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

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


/* ── Karte ───────────────────────────────────────────────────────────────── */

.karte {
  scroll-margin-top: calc(var(--notice) + var(--kopf));
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--abschnitt) var(--rand);
}

.karte__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 48px;
}

.karte__intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 380px;
}

.signatur {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 8px;
  overflow: hidden;
}

/* Direktes Kind des Rasters, sonst griffe height: 100% nicht. */
.signatur__bild {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}

.signatur__text {
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.signatur__schild {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--weiss);
  background: var(--rot);
  padding: 6px 12px;
  border-radius: 999px;
}

.signatur__reihe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.signatur__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.signatur__preis {
  font-family: var(--titelschrift);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  white-space: nowrap;
}

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

.speisekarte {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px 64px;
}

.speisekarte__titel {
  margin: 0 0 8px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--tinte);
  font-family: var(--titelschrift);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

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

.gericht__reihe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.gericht__name {
  font-size: 17px;
  font-weight: 700;
}

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

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

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


/* ── Qualitaet ───────────────────────────────────────────────────────────── */

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

/* Wie im Entwurf ohne min(): 200 px passen ab 240 px Fensterbreite. */
.punkte {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 32px;
}

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

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

.frische__bild {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}


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

.besuch { scroll-margin-top: calc(var(--notice) + var(--kopf)); }

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

.besuch__rahmen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--rand);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--abstand);
  align-items: start;
}

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

.besuch__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* Wie im Entwurf ohne min(); der Innenabstand haelt es ab 290 px. */
.angaben {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 8px;
}

.angaben__name {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--leise);
  margin-bottom: 8px;
}

.angaben__wert {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
}

.angaben__verweis {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

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

/* Unterstrichen wie im Entwurf, der ihn nicht wegnimmt. */
.angaben__verweis a { color: var(--tinte); }

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


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

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

/* Wie im Entwurf ohne min(): 220 px passen ab 260 px Fensterbreite. */
.fuss__oben {
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--rand) 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.fuss__marke {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 900;
  font-stretch: 115%;
  font-size: 40px;
  letter-spacing: -0.02em;
  color: var(--grund);
  line-height: 1;
}

.fuss__zeile {
  margin: 10px 0 0;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

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

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

.fuss__kontakt a {
  color: var(--grund);
  text-decoration: none;
}

.fuss__kontakt a:hover { color: var(--orange); }

.fuss__unten {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 20px var(--rand) 32px;
  border-top: 1px solid var(--dunkel-linie);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: 14px;
  color: var(--fuss-copy);
}

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

.fuss__recht a { color: var(--grund); }

.fuss__recht a:hover { color: var(--orange); }


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

.rechtliches {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 28px var(--rand) 40px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--leise);
  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: 1024px) {
  .kopf__nav { display: flex; }
}

/* Abweichung 7: Schleier im Entwurf linear-gradient(90deg,
   rgba(237,235,232,0.92) 0%, rgba(237,235,232,0.7) 38%,
   rgba(237,235,232,0) 60%), Rot #C23D14. */
@media (min-width: 1100px) {
  :root { --rot-hero: var(--rot-tief); }

  .hero { min-height: clamp(640px, 88svh, 960px); }

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

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

  .hero__schleier {
    background: linear-gradient(90deg, rgba(237, 235, 232, 0.92) 0%, rgba(237, 235, 232, 0.87) 64%, rgba(237, 235, 232, 0) 74%);
  }
}

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


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