/* ============================================================================
   GOLFO DI NAPOLI — mobile.css  (EIGENSTÄNDIGE MOBILE-SCHICHT, 13.07.2026)
   ----------------------------------------------------------------------------
   Zweck: Die Smartphone-Ansicht (< 768px) eigenständig komponieren — ruhiger,
   ergonomischer, editorialer — OHNE die Desktop-Ansicht zu verändern.

   REGELWERK:
     - Wird auf allen Seiten NACH css/styles.css geladen (gewinnt die Kaskade).
     - JEDE Regel ist in @media (max-width: 767px), (pointer: coarse) oder
       (hover: none) gekapselt. Auf Desktop (Maus, >= 768px) matcht NICHTS.
       Einzige Ausnahme: §1 (Bugfix unsichtbarer Eingabetext) — ändert nur
       den GETIPPTEN Zustand, keinen Pixel des Ruhezustands.
     - Grundlage: Mobile-Audit 13.07. (13 Agents, 110 Findings) — Selektoren
       und Zeilenbezüge siehe styles.css.
   ========================================================================== */


/* ==========================================================================
   §1  BUGFIX (ungegated, zustands-neutral): stammgast.html nutzt die dunkle
       Footer-Newsletter-Optik auf CREME — getippter Text war #EFE7D6 auf
       Weiß (~1:1, unsichtbar), ebenso das Submit-Feedback. Betrifft nur
       Tipp-/Feedback-Zustände, der unberührte Ruhezustand bleibt pixelgleich.
   ========================================================================== */
body[data-page="stammgast"] .news-form input[type="email"] {
  color: var(--espresso, #33261A);
  caret-color: var(--espresso, #33261A);
}
body[data-page="stammgast"] .news-form .form-status { color: var(--espresso, #33261A); }
body[data-page="stammgast"] .news-form .form-status[data-state="ok"] { color: var(--blue-deep, #7E6335); }
body[data-page="stammgast"] .news-form .form-status[data-state="error"] { color: #8C2F39; }


/* ==========================================================================
   §2  TOUCH-GERÄTE (alle Breiten): Sticky-Hover neutralisieren + Targets
   ========================================================================== */
@media (hover: none) {
  /* iOS lässt :hover nach dem Tap kleben — Transform-Zucken unterbinden.
     Tap-Feedback liefert weiterhin .btn:active (scale .98). */
  .btn:hover { transform: none; }
  .btn--primary:hover { background: transparent; border-color: var(--blue-light); }
  /* Bild-Zoom-Hovers kleben auf Touch ebenfalls fest. */
  .gallery__item:hover img,
  .sticky-gallery figure:hover img,
  .highlight-card:hover .highlight-card__media img { transform: none; }
}

@media (pointer: coarse) {
  .footer2__social a { width: 44px; height: 44px; }
  .btn--sm { min-height: 44px; }
  /* Inline-Aktionslinks: unsichtbar vergrößerte Tap-Zonen (Padding wird
     durch negative Margins kompensiert — kein Layout-Shift). */
  .legal address a,
  .legal p a,
  .legal-crumb a,
  .breadcrumb a {
    display: inline-block;
    padding-block: 0.55rem;
    margin-block: -0.55rem;
  }
  .footer2__legal a { min-height: 44px; }
}


/* ==========================================================================
   §3  SMARTPHONE-LAYER (< 768px)
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- 3.1 Typo-Skala: ein Token-Hebel statt Selektor-Flickwerk ----------
     Fließtext rauf auf 16–17px (Lesbarkeit + verhindert iOS-Fokus-Zoom,
     da Inputs var(--fs-ui) nutzen), Meta minimal rauf. */
  :root {
    --fs-body: 1.0625rem;
    --fs-ui: 1rem;
    --fs-meta: 0.875rem;
    --section-pad: clamp(48px, 12vw, 72px);
  }

  /* Display-Größen: markant statt schreiend. */
  .display-hero { font-size: clamp(2.5rem, 10.5vw, 3.2rem); letter-spacing: 0.04em; }
  .display-xl { font-size: clamp(2rem, 8.5vw, 2.5rem); letter-spacing: 0.03em; }
  .headline--caps { font-size: clamp(1.5rem, 6.6vw, 1.85rem); line-height: 1.2; letter-spacing: 0.055em; }
  .script-lead { font-size: clamp(1.4rem, 5.6vw, 1.8rem); }
  .menu-category__title { font-size: clamp(1.6rem, 7vw, 2rem); }
  /* Harter Desktop-Umbruch wird zum Leerzeichen (display:none hätte die
     Wörter zu "NEAPELAN" verklebt; Firefox ignoriert content auf br und
     behält den Umbruch — degradiert sauber). */
  .heritage__title br { content: ""; }
  .heritage__title br::after { content: " "; }
  .headline--caps, .trust__value { text-wrap: balance; }
  /* Adresse: balance riss "GOETHESTRASSE / 2," auseinander */
  .reserve-find .headline--caps { text-wrap: initial; }

  /* Unterseiten-Hero-Hierarchie: H1 klar eine Stufe über der Script-Zeile */
  .menu-page__header .display-xl,
  .section--teaser .display-xl { font-size: clamp(2.3rem, 9.5vw, 2.9rem); }
  .menu-page__header .script-lead,
  .section--teaser .script-lead { font-size: clamp(1.35rem, 5.5vw, 1.6rem); opacity: 0.9; }

  /* Eyebrows: In Section-Köpfen entfällt das dritte Label (Script-Zeile
     trägt die Italianität allein — ruhigerer Einstieg, weniger Schema).
     In Heros bleibt der Eyebrow, aber einzeilig (Strich raus, Tracking enger). */
  .section-head .eyebrow { display: none; }
  /* …aber die H1-Eyebrows der Seiten-Heros bleiben (Konsistenz zu index/
     reservieren/ueber-uns, deren Heros keinen .section-head nutzen). */
  .menu-page__header .section-head .eyebrow,
  body[data-page="kontakt"] .section--teaser .section-head .eyebrow { display: inline-flex; }
  .editorial-grid__text .eyebrow { display: none; }
  body[data-page="index"] .heritage__inner .eyebrow { display: none; }
  .eyebrow { font-size: 0.6875rem; letter-spacing: 0.15em; }
  .eyebrow::before { display: none; }

  /* CTA-Regime: Header-Reservieren wird ruhige Gold-Kontur — die solide
     Gold-Pill unten bleibt DER eine laute CTA (vorher konkurrierten bis zu
     drei Gold-Blöcke pro Viewport — von zwei Jurys unabhängig geflaggt). */
  .site-header__reserve {
    background: transparent;
    border: 1px solid var(--blue-light, #96703C);
    color: var(--espresso, #33261A);
  }

  /* ---- 3.2 Overflow-Sicherheit -------------------------------------------
     Wurzelursachen sind unten gefixt (Header, legal h1); clip als Netz. */
  html, body { overflow-x: clip; }

  /* ---- 3.3 Header: passt wieder in 390px ---------------------------------
     Ursache: gap 40px + nicht schrumpfbarer CTA drückten den Hamburger
     +13px über den Rand (sitewide horizontales Wackeln). */
  .site-header__inner { gap: var(--space-sm); }
  .site-header__inner > * { min-width: 0; }
  .site-header .btn--sm {
    padding: 0.6rem 0.9rem;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    min-height: 44px;
  }
  .site-header__reserve .btn__icon { display: none; }

  /* ---- 3.4 Scroll-Reveals aus --------------------------------------------
     Auf Mobile hingen ganze Viewports (inkl. Bestell-CTA, Öffnungszeiten,
     Formulare) an opacity:0 bis ein Observer feuert — bei Flick-Scroll oder
     JS-Aussetzern blieben Sections leer. Mobile rendert sofort und ruhig;
     der identische Fade-up überall war zugleich das stärkste AI-Muster. */
  .reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ---- 3.5 Fixe Ebenen: Pill, Video-Schalter, Modal ----------------------- */
  /* Reserve-Pill: kompakt rechts statt Vollbreite-Balken, respektiert
     iPhone-Gestenzone, verdeckt keinen Inhalt mehr. */
  .reserve-pill {
    left: auto;
    right: calc(0.75rem + env(safe-area-inset-right));
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    min-height: 48px;
    justify-content: center;
  }
  /* Telefon-Icon suggerierte "anrufen", Link führt aber zur Reservierung —
     irreführende Affordance raus, Label allein ist eindeutig. */
  .reserve-pill__tel { display: none; }
  /* Footer-Rechtszeile von der Pill freistellen. */
  .footer2__bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* Video-Pause-Schalter: volles Touch-Target, klarer sichtbar. */
  .video-toggle {
    width: 44px;
    height: 44px;
    opacity: 0.8;
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
  }

  /* Lazy geladene Highlight-Bilder: Ladefläche statt Creme-Loch */
  .highlight-card__media { background: color-mix(in srgb, var(--espresso, #33261A) 6%, transparent); }

  /* ---- 3.6 Heroes & Vollflächen: echter sichtbarer Viewport (svh) --------- */
  .hero-x, .hero-x__pin { height: 100svh; }
  html.hx-ready .hero-x { height: 100svh; }
  .heritage { min-height: 56svh; }
  .heritage__inner { padding-top: clamp(96px, 24vw, 130px); }
  .ornament--corner { display: none; }

  /* bestellen: CTA gehört above the fold — Hero kompakt. */
  body[data-page="bestellen"] .hero { min-height: auto; }
  body[data-page="bestellen"] .hero__inner {
    padding-top: clamp(4rem, 9vh, 5.5rem);
    padding-bottom: 2.75rem;
  }

  /* ---- 3.7 Vertikaler Rhythmus: Desktop-Zeremoniell einkürzen ------------- */
  .ornament--divider { margin-block: 28px; }
  .section--manifest { padding-block: clamp(56px, 15vw, 72px); }
  .manifest .eyebrow { margin-bottom: var(--space-md, 24px); }
  .legal h2 { margin-top: 44px; }
  .legal h1 { margin-bottom: 24px; }

  /* Trust-Fakten: 2×2-Fact-Sheet statt 430px-Einspalten-Turm. */
  .trust__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md, 24px) var(--space-sm, 16px);
  }

  /* Drei gestapelte Hochkant-Videos (~1.900px Scrollweg) werden eine
     Scroll-Snap-Reihe — alle Clips bleiben erreichbar, 2/3 Länge gespart. */
  .visit-clips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    grid-template-columns: none;
    max-width: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .visit-clips::-webkit-scrollbar { display: none; }
  .visit-clip { scroll-snap-align: center; }

  /* ---- 3.8 Mobile-Nav-Overlay --------------------------------------------- */
  /* Tap-Targets der Nav-Links auf >= 44px, ohne den Rhythmus zu ändern. */
  .mobile-nav__list a { padding-block: 0.3rem; margin-block: -0.3rem; }

  /* ---- 3.9 Speisekarte: Kategorie-Leiste ---------------------------------- */
  .category-nav__link { padding-block: 0.8rem; }
  .category-nav__list { padding-block: 0.35rem; }
  /* Scroll-Affordance: rechte Fade-Kante zeigt "da kommt mehr". */
  .category-nav::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 44px;
    background: linear-gradient(90deg, transparent, var(--cream, #F4EFE4));
    pointer-events: none;
  }

  /* ---- 3.10 Formulare: iOS-Zoom, Checkboxen, Submits ---------------------- */
  .res-form input, .res-form select, .res-form textarea,
  .contact-form input, .contact-form textarea,
  .news-form input[type="email"] { font-size: 1rem; }

  .res-form .form-consent input[type="checkbox"],
  .form-consent input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
  .form-consent { gap: 0.85rem; }
  .form-consent label,
  .res-form .form-consent label { font-size: 0.9375rem; }
  /* kontakt.html trägt einen späten Inline-<style> — Page-Prefix nötig,
     sonst verlieren die Formular-Fixes dort die Kaskade. */
  body[data-page="kontakt"] .form-consent input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
  body[data-page="kontakt"] .form-consent label { font-size: 0.9375rem; }
  body[data-page="kontakt"] .contact-form input,
  body[data-page="kontakt"] .contact-form textarea { font-size: 1rem; }
  .news-form .field--check label { font-size: 0.875rem; }
  .news-form .field--check a {
    display: inline-block;
    padding: 8px 4px;
    margin: -8px -4px;
    text-underline-offset: 3px;
  }
  .res-form__hint, .res-form .contact-form__hint, .contact-form__hint {
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    line-height: 1.55;
  }
  .btn { min-height: 48px; }

  /* ---- 3.11 Footer: 2 Spalten statt 900px-Link-Turm ----------------------- */
  .footer2__cols {
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: var(--space-lg, 40px);
  }
  /* Auf der Reservierungsseite konkurriert das Footer-Newsletter-Formular
     direkt unter dem Hauptformular — mobil raus, überall sonst bleibt es. */
  body[data-page="reservieren"] .footer2__brand .news-form { display: none; }

  /* ---- 3.12 kontakt.html --------------------------------------------------- */
  .crumbs { display: none; }
  .nap__value a {
    display: inline-block;
    padding-block: 0.6rem;
    margin-block: -0.3rem;
    color: var(--bordeaux, #6B0A22);
    border-bottom: 1px solid color-mix(in srgb, var(--bordeaux, #6B0A22) 45%, transparent);
  }
  .reserve-find .headline--caps {
    font-size: clamp(1.35rem, 5.5vw, 1.6rem);
    letter-spacing: 0.04em;
    line-height: 1.25;
  }

  /* ---- 3.13 bestellen.html: Telefon wird vollwertiger Zweit-CTA ------------ */
  .tel-fallback { flex-direction: column; align-items: stretch; gap: 10px; margin-top: var(--space-sm, 16px); }
  .tel-fallback__num {
    justify-content: center;
    min-height: 52px;
    border: 1.5px solid var(--bordeaux, #6B0A22);
    border-radius: 2px;
  }
  /* Auf der Bestell-Seite pusht der Header "Bestellen" statt "Reservieren"
     (Ziel-Konsistenz — analog zur ausgeblendeten Reservieren-Pill). */
  body[data-page="bestellen"] .site-header__order { display: inline-flex; }
  body[data-page="bestellen"] .site-header__reserve { display: none; }
  /* Video-Toggle kollidierte links mit dem Textanker — rechts ist die
     Pill auf dieser Seite ohnehin aus. */
  body[data-page="bestellen"] .video-toggle {
    left: auto;
    right: calc(0.75rem + env(safe-area-inset-right));
  }
  body[data-page="bestellen"] .rule-hairline.rule--short { display: none; }

  /* ---- 3.14 stammgast.html: One-Screen-Landing ----------------------------- */
  body[data-page="stammgast"] .sg { min-height: 100svh; }
  body[data-page="stammgast"] .sg .ornament--divider { margin-block: 28px; }
  body[data-page="stammgast"] .sg__legal { font-size: 0.8125rem; color: var(--muted-on-cream, #6B6256); }
  body[data-page="stammgast"] .sg__gift { font-size: 0.95rem; letter-spacing: 0.06em; padding: 12px 20px; }
  body[data-page="stammgast"] .eyebrow { display: none; }
  body[data-page="stammgast"] .news-form .btn { align-self: stretch; width: 100%; min-height: 52px; }
  body[data-page="stammgast"] .news-form input[type="email"]::placeholder { color: var(--muted-on-cream, #6B6256); }
  body[data-page="stammgast"] .news-form .field--check label { color: var(--muted-on-cream, #6B6256); }
  body[data-page="stammgast"] .news-form .field--check a { color: var(--blue-deep, #7E6335); text-decoration: underline; text-underline-offset: 2px; }

  /* ---- 3.15 bewerten.html: QR-Landung --------------------------------------
     Page-Prefix durchgehend: bewerten.html trägt einen späten Inline-<style>,
     der gleichspezifische Regeln sonst überschreibt. */
  body[data-page="bewerten"] .rv { min-height: 100svh; }
  body[data-page="bewerten"] .rv__card .ornament--divider { margin-block: 28px; }
  body[data-page="bewerten"] .rv__cta .btn { width: 100%; min-height: 52px; }
  body[data-page="bewerten"] .rv__alt { font-size: 1rem; max-width: 34ch; margin-inline: auto; }
  body[data-page="bewerten"] .rv__alt a { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
  body[data-page="bewerten"] .rv__footer { font-size: 0.8125rem; line-height: 2; color: var(--muted-on-cream, #6B6256); }
  body[data-page="bewerten"] .rv__footer a { display: inline-block; padding: 8px 6px; margin: -8px -4px; }
  body[data-page="bewerten"] .rv__card .script-lead { margin: 0 0 6px; line-height: 1.15; }
  body[data-page="bewerten"] .eyebrow { display: none; }

  /* ---- 3.16 404.html (kein data-page — Spezifität über main.nf) ------------- */
  main.nf { min-height: 100svh; }
  .nf__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 300px;
    margin-inline: auto;
  }
  .nf .script-lead { color: var(--blue-deep, #7E6335); }

  /* ---- 3.18 ueber-uns.html --------------------------------------------------- */
  /* Kompakterer Hero schob den Text in den hellen Wash-Bereich. */
  body[data-page="ueber-uns"] .heritage::after {
    background: linear-gradient(0deg, rgba(25,17,9,0.9) 0%, rgba(25,17,9,0.55) 55%, rgba(25,17,9,0.5) 100%);
  }
  .manifest .ornament--divider { margin-block: 16px; }

  /* ---- 3.19 Menü-Listen: Preis-Bezug + hängender Einzug ---------------------- */
  .menu-row__price { margin-top: 0.25rem; }
  .menu-item__name { padding-left: 1.1em; text-indent: -1.1em; }

  /* ---- 3.20 Mobile-Hero: Drohnen-Schnitt + Schriftzug -----------------------
     (Hassan, Termin 15.07.; Emblem am 08.08. wieder entfernt — siehe unten.)
     hero-reel.js setzt html.reel-on NUR wenn es wirklich läuft (<768px, kein
     reduced-motion). Ohne JS/reduced-motion bleibt der Neapel-BG-Hero stehen. */
  /* ---- Mobile-Hero: nur das Video (Elian, 08.08.) -------------------------
     Der Hero zeigt auf dem Handy nichts als den Loop. Kein Emblem, kein
     Schriftzug, keine Kleinzeile.

     Die Marke steht seit dem 08.08. als Emblem oben links in der Kopfzeile
     (styles.css, .brandmark). Damit faellt die Begruendung weg, mit der hier
     zwischenzeitlich der Schriftzug zurueckgeholt wurde — der Hero war nur
     deshalb „namenlos", weil die Kopfzeile die Marke bloss getippt trug.

     Zur Kleinzeile: der Kunde hat ueberlegt, „Pizzeria Napoletana" in
     „Trattoria Napoletana" zu aendern, und sich dann ausdruecklich dagegen
     entschieden — woertlich „schreibst du nichts drueber, sondern machst das
     Logo einfach nur oben links hin".

     Beides wird per display:none entfernt, nicht per clip-path auf 1x1 px:
     unsichtbar ist nicht weg, und ein 1-px-Element haelt weiterhin den
     Flex-Abstand von .hero-x__center. Der H1 bleibt im DOM — er traegt die
     Dokumentgliederung fuer Suchmaschinen und Vorleser. Sichtbar ist er auf
     dem Handy nicht mehr; auf dem Desktop war er es ohnehin nie. */
  html.reel-on .hero-x__title,
  html.reel-on .hero-x__eyebrow { display: none; }
  /* Ohne Inhalt braucht das Lockup keinen Bodenabstand mehr. Der frühere
     Wert (24svh) war auf den Schriftzug eingemessen, damit er nicht auf dem
     alten Fassadenschild im Video landet — ohne Schriftzug gibt es nichts
     mehr zu verschieben. Der Scroll-Cue haengt an .hero-x__pin, nicht hier. */
  html.reel-on .hero-x__center { padding-bottom: 0; }
  /* Dezenter Scroll-Cue unterm Reel */
  html.reel-on .hero-x__pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    width: 10px; height: 10px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.75);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.75);
    transform: translateX(-50%) rotate(45deg);
    z-index: 3;
  }
  html.reel-on .hero-x__bg { display: none; }
  html.reel-on .hero-reel { display: block !important; }
  .hero-reel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Poster als Fallback-Fläche: nie Schwarz-Blitz beim Laden
       (.htaccess liefert automatisch die .webp-Variante) */
    background: #000 url("../assets/video/hero-loop-poster.jpg") center / cover no-repeat;
    pointer-events: none; /* Taps gehen durch (iOS-Gesture-Retry, Scroll) */
  }
  .hero-reel video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease;
  }
  .hero-reel video.is-on { opacity: 1; }
  /* Lesbarkeits-Wash über dem Schnitt: kräftiger, kurzer Top-Lobe blendet
     den schwarzen Header ins Video (Jury: harte Naht), Mitte bleibt offen. */
  .hero-reel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.18) 24%, rgba(0,0,0,0.24) 56%, rgba(0,0,0,0.68) 100%);
  }

  /* ---- 3.17 Rechtsseiten (datenschutz + impressum) -------------------------- */
  /* "DATENSCHUTZERKLÄRUNG" war der +117px-Overflow: 20 Zeichen unbrechbar. */
  .legal h1 {
    font-size: clamp(1.5rem, 7.5vw, 1.875rem);
    letter-spacing: 0.015em;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .legal h2 { font-size: 1.3rem; }
  .legal p { -webkit-hyphens: auto; hyphens: auto; }
  .legal a, .legal address { overflow-wrap: anywhere; }
  .legal .eyebrow, .legal-crumb + .eyebrow { display: none; }
  .breadcrumb { font-size: 0.875rem; margin-bottom: 24px; }
  .legal-crumb { margin-bottom: var(--space-lg, 40px); }
  /* Seiten-lokales margin:…0 hatte das margin-inline:auto der Basisklasse
     überschrieben — die Zier-Raute klebte links am Rand. Höhere Spezifität,
     weil die Rechtsseiten eigene späte <style>-Blöcke tragen. */
  body[data-page] .legal .ornament--divider { margin-inline: auto; }
  .legal-back { text-align: center; }
  .legal-back .btn { min-height: 48px; }
  .callout { padding: var(--space-sm, 16px) var(--space-md, 24px); }

  /* Speisekarte: Preis nie mitten im Umbruch */
  .menu-item__price { white-space: nowrap; }
}


/* ==========================================================================
   §4  MOBILE-NAV-KONTEXT (< 1024px — Overlay existiert nur hier)
   ========================================================================== */
@media (max-width: 1023.98px) {
  /* Offenes Menü: Pill lag ÜBER dem Vollbild-Overlay (300 > 200). */
  body.nav-open .reserve-pill {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast, 0.2s) var(--ease-out, ease-out),
                visibility 0s linear var(--dur-fast, 0.2s);
  }

  /* Diese drei gelten bis 1023px — die Elemente existieren im ganzen
     Tablet-Band (Jury-Befund: nur bis 767 wäre inkonsistent). */
  .dish-modal { z-index: calc(var(--z-sticky, 300) + 10); }
  body[data-page="reservieren"] .reserve-pill,
  body[data-page="bestellen"] .reserve-pill { display: none !important; }
  /* 404: Ghost-Button war Off-White auf Creme (~1:1) — "Speisekarte" unsichtbar.
     (Gleicher Bug besteht auf Desktop — dort bewusst unangetastet, s. Report.) */
  .nf .btn--ghost { color: var(--espresso, #33261A); border-color: var(--hairline-cream, rgba(51,38,26,0.18)); }
}

/* Landscape-Phones (844×390 u.ä.): max-width:767 matcht dort nicht — die
   Robustheits-Kernfixes gelten trotzdem. */
@media (pointer: coarse) and (max-height: 500px) {
  .reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-x, .hero-x__pin { height: 100svh; }
  .res-form input, .res-form select, .res-form textarea,
  .contact-form input, .contact-form textarea,
  .news-form input[type="email"] { font-size: 1rem; }
}

/* Kurze Viewports (Landscape-Phones): zentriertes Overlay schnitt oben/unten
   Einträge ab und war nicht scrollbar. */
@media (max-width: 1023.98px) and (max-height: 620px) {
  .mobile-nav {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: calc(var(--header-h, 72px) + 1.5rem);
    gap: var(--space-lg, 40px);
  }
  .mobile-nav__list a { font-size: 2rem; }
}