/* El Greco Regen – Handy-Ansicht. Wird als letztes Stylesheet geladen und enthält nur Regeln für schmale Bildschirme.
   Maße am Handy: Seitenrand 6,25 %, Kacheln Radius 22, Abstand zwischen Kacheln 12,
   Treppe 32/36 (Überschrift), 19/27 (Absatz), 17/25 (Fließtext). Bühnenhöhen und alles,
   was Skripte inline setzen (transform, opacity), bleiben unberührt. */

@media (max-width: 734px) {
  /* ---------- Leiste, Menüfläche, Telefon-Knopf: sichere Ränder ---------- */
  .nav-inner { padding-left: max(6.25%, env(safe-area-inset-left)); padding-right: max(6.25%, env(safe-area-inset-right)); }
  html.js .nav-links { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .phone-fab { width: 48px; height: 48px; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* ---------- Kapitelköpfe: mittig, ein Abstandsmaß, keine einzelnen Wörter in der letzten Zeile ---------- */
  .head { gap: 12px; }
  .head .section-sub { margin-top: 8px; text-wrap: balance; }
  .reserve-sub, .story-copy h2, .story-copy p:not(.eyebrow), .hero-sub, .zoom-facts li { text-wrap: balance; }

  /* ---------- Start: Knöpfe über die Spaltenbreite ---------- */
  .buystrip-actions, .reserve-actions { width: 100%; align-items: stretch; }
  .buystrip-actions .btn, .reserve-actions .btn { width: 100%; min-height: 48px; }
  .buystrip-actions .link, .reserve-actions .link { text-align: center; }

  /* ---------- Empfehlungen: die nächste Karte schaut an, gewischt wird mit dem Finger ---------- */
  .gallery-track { gap: 12px; }
  .card { flex-basis: min(320px, 78vw); border-radius: 22px; }
  .gallery-paddles { display: none; }

  /* ---------- Gyros-Teller: Seitenrand wie im Raster, Beschriftungen mittig in zwei Reihen ---------- */
  .teller .teller-pin, html.js .teller:not(.is-still) .teller-pin { padding-left: 6.25%; padding-right: 6.25%; }
  .teller-stage { column-gap: 12px; }
  .teller-label { text-align: center; }
  .teller-label p { text-wrap: balance; }

  /* ---------- Küche-Bühne: Foto groß und oben, Text darunter, Fortschritt über dem unteren Rand ---------- */
  .story .story-media { width: min(100%, 42vh); width: min(100%, 42svh); }
  .story .story-media img { aspect-ratio: 1 / 1; max-height: 42vh; max-height: 42svh; }
  html.motion .story .story-frame { padding-top: 24px; }
  .story-copy p:not(.eyebrow) { max-width: none; }
  .story-progress { bottom: calc(28px + env(safe-area-inset-bottom)); }

  /* ---------- Terrasse: Vollbild-Zeilen eine Stufe größer ---------- */
  .zoom.is-live .zoom-facts li { font-size: 28px; line-height: 32px; letter-spacing: .007em; }
  .zoom.is-live .zoom-facts { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .bento-tile figcaption { text-wrap: balance; }

  /* ---------- Gäste: Sterne über der Quelle, Knopf über die Kachelbreite ---------- */
  .stimme-quelle { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stimme { gap: 20px; }
  .wert-note .link { padding: 12px 0; margin-bottom: -12px; }
  .wert-themen .btn { width: 100%; min-height: 48px; }

  /* ---------- Wein: Seitenrand wie im Raster, Überschrift bleibt einzeilig ---------- */
  .wein .wein-pin, html.js .wein:not(.is-still) .wein-pin { padding-left: 6.25%; padding-right: 6.25%; }
  .wein-head .section-headline { font-size: 28px; line-height: 32px; letter-spacing: .007em; }

  /* ---------- Speisekarte: lange Namen brechen sauber um ---------- */
  .menu-name { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .menu-price { padding-left: 4px; }

  /* ---------- Besuch: Kacheln mit einem Abstand, jede Zeit in einer Zeile ---------- */
  .tiles { gap: 12px; }
  .hours-table th, .hours-table td { padding: 12px 0; font-size: 15px; line-height: 21px; letter-spacing: -.016em; vertical-align: baseline; }
  .hours-table td span { display: inline; }

  /* ---------- Fuß: Platz für den Home-Balken ---------- */
  .footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Kleine Telefone: die Zeiten eine Stufe kleiner, damit Tag und Zeiten Luft behalten */
@media (max-width: 389px) {
  .hours-table th, .hours-table td { font-size: 14px; line-height: 20px; }
}
/* Schmale Telefone: Mittag und Abend stehen wieder untereinander, jede Zeit bleibt ungeteilt */
@media (max-width: 374px) {
  .hours-table th, .hours-table td { font-size: 15px; line-height: 21px; }
  .hours-table td span { display: block; }
}

/* Ohne Bewegung stehen Bühne und Willkommenssatz als gewöhnliche Abschnitte da: derselbe Seitenrand */
@media (max-width: 734px) and (prefers-reduced-motion: reduce) {
  .story-frame, .fill-pin { padding-left: 6.25%; padding-right: 6.25%; }
}