/* ========================================================================== Villa Restaurant Soemmerda — mobile-fixes.css -------------------------------------------------------------------------- Zweck: Letzte, additive Mobile-Schicht. Wird als ALLERLETZTES Stylesheet in allen 9 Seiten geladen. Behebt horizontalen Overflow, sichert Safe-Area (viewport-fit=cover), vergroessert Touch-Ziele und gibt Schluessel-Elementen einen ruhigen, wertigen Ruhezustand. Regeln: - ALLE Selektoren stehen in @media (max-width: 768px) ODER enger. Desktop (>=769px) bleibt damit bit-identisch. - KEINE Animationen, KEINE neuen Transitions -> prefers-reduced- motion bleibt unberuehrt. - KEINE Hover-Effekte. Bestehende @media (hover: hover) Bloecke werden NICHT angefasst. Bewegung liefert allein reveal.js. - NUR vorhandene --vr-* Tokens, keine neuen Farben/Werte. - Kein @import, keine Fonts, keine Bilder, keine externen Requests. Stand: VER 2026-06-13T08:03 (Nachtrag: volle Mobile-Zentrierung) ========================================================================== */ @media (max-width: 768px) { /* ==================================================================== STEP 2 — GLOBALE BASIS ==================================================================== */ /* --- Overflow-Schutz ------------------------------------------------ overflow-x NUR auf (Wurzel-Scroller). Bewusst NICHT auf , damit der position:sticky Header funktionsfaehig bleibt (overflow auf body wuerde den Sticky-Kontext brechen). */ html { overflow-x: hidden; } html, body { max-width: 100%; } /* Lange Woerter (URLs, E-Mails im Impressum/Datenschutz) brechen statt zu ueberlaufen. Footer regelt sein Wrapping selbst (hoehere Spezif.). */ body { overflow-wrap: break-word; } /* box-sizing erneut absichern (base.css setzt es bereits global). */ *, *::before, *::after { box-sizing: border-box; } /* Medien nie breiter als ihr Container. iframe ergaenzt base.css. */ img, picture, video, iframe, svg { max-width: 100%; } img, video, iframe { height: auto; } /* --- Container: zentriert + Safe-Area ------------------------------ WICHTIG: padding bleibt bei --vr-space-md (24px). Mehrere Elemente brechen bewusst per negativem Rand exakt um 24px aus dem Container aus (reviews-marquee = margin -24px; .menu-item--grill = -16px) und sind auf diese 24px kalibriert. Ein kleinerer Wert wuerde sie ueber den Viewport hinausschieben -> horizontaler Overflow. Im Hochformat ist max() identisch zu 24px (env=0), im Querformat schuetzt env() den Inhalt vor Notch/Kamera. */ .container { width: 100%; margin-inline: auto; padding-left: max(var(--vr-space-md), env(safe-area-inset-left)); padding-right: max(var(--vr-space-md), env(safe-area-inset-right)); } /* --- Touch-Ziele ---------------------------------------------------- Buttons (.btn, .vr-slot, Filter, Close) haben bereits min-height:44px. Hier werden die Formularfelder auf >=44px gehoben. Checkboxen/Radios (z.B. das Wachs-Siegel im Brief, 30px rund) bleiben ausgenommen. */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: 44px; } /* ==================================================================== STEP 3 — WERTIGER RUHEZUSTAND (kein Hover, keine Motion) ==================================================================== */ /* Karten ruhen mit weichem, tieferem Schatten (statt nur shadow-sm). Auf Mobile gibt es keinen Hover, daher zaehlt der Ruhezustand. */ .card { box-shadow: var(--vr-shadow-md); } /* Zitat-/Review-Karten bekommen einen dezenten Schatten zur Goldkante. */ .quote-card { box-shadow: var(--vr-shadow-sm); } /* ==================================================================== STEP 4 — SEITEN-SPEZIFISCH ==================================================================== */ /* --- Footer (alle Seiten) ------------------------------------------ Spalten sind in footer.css bereits einspaltig + zentriert. Hier nur Safe-Area unten, damit der letzte Inhalt nicht unter die iOS- Homeleiste rutscht. Top-Padding bleibt aus footer.css erhalten. */ body .site-footer { padding-bottom: calc(clamp(2.5rem, 5vw, 4.5rem) + env(safe-area-inset-bottom)); } /* --- Reservierungs-Modal (index, restaurant, speisekarte, pension, galerie, anfahrt, kontakt, impressum, datenschutz) ------------- Das Modal ist mobil bereits komplett umgebaut (reservation.css). Offen geblieben: die zweispaltige Event-Zeile im Tab "Lokal anfragen" (grid 55%/45% + 15px Offset). Auf schmalen Screens einspaltig, Offsets zuruecksetzen -> kein horizontaler Ueberlauf im Modal. */ .vr-event-row { grid-template-columns: 1fr !important; } .vr-event-row .vr-field:last-child { padding-left: 0 !important; margin-left: 0 !important; } /* Sticky Submit-Leiste im Modal: Safe-Area unten ergaenzen, damit der Button nicht hinter der Homeleiste klebt. */ .vr-submit-row { padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; } } /* ====================================================================== STEP 4 — GALERIE: sehr schmale Phones ---------------------------------------------------------------------- Vorgabe: festes 2-spaltiges Mosaik ab 360px, darunter einspaltig. gallery.css ist bereits 2-spaltig auf Mobile; hier nur die Stufe < 360px. ====================================================================== */ @media (max-width: 359px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-tile--wide, .gallery-tile--big { grid-column: span 1 !important; } } /* ====================================================================== NACHTRAG — VOLLE HORIZONTALE ZENTRIERUNG DES SEITENINHALTS (Mobile) ---------------------------------------------------------------------- Ziel: Ueberschriften, Fliesstext, Eyebrow-Label (+Trennstrich), Buttons, Labels und Listen sitzen mittig. Geltungsbereich bewusst nur

: Header und Footer haben eigene, abgestimmte Layouts; die Reservierungs- und Kontakt-Overlays behalten ihr durchdachtes Formular-Design. text-align/justify-content/margin-auto erzeugen KEINEN horizontalen Overflow; das 24px-Container-Padding und overflow-x:hidden von oben bleiben aktiv (gerendert mit 320/375/390/414px nachgemessen). ====================================================================== */ @media (max-width: 768px) { /* Grundzentrierung: vererbt sich auf Ueberschriften, p, Eyebrow (inline-block, zentriert mitsamt ::before-Trennstrich), Labels, Zitate, Bildunterschriften usw. Elemente mit eigenem text-align (Daten-Tabellen, Modal-Erfolgsliste) behalten ihre Ausrichtung. */ main, main section, main .container { text-align: center; } /* Listen mittig: Marker in die Zeile holen, kein Links-Einzug. Nur Listen OHNE eigene Klasse (Fliesstext, Impressum, Datenschutz). Spezial-Listen (amenities, anfahrt-steps …) behalten ihr Layout und erben lediglich die Textzentrierung. */ main ul:not([class]), main ol:not([class]) { list-style-position: inside; padding-left: 0; margin-inline: auto; } /* Buttons / Button-Gruppen horizontal mittig. Einzelne Inline-Buttons zentrieren bereits ueber text-align:center; Flex-Gruppen via justify-content; der Brief-Senden-Button via align-self. */ main .cluster, main .wrap, main .contact-actions__inner { justify-content: center; } .brief__send { align-self: center; } /* Eigenstaendige Medien mittig (Karten/Galerie sind bereits volle Spaltenbreite und damit ohnehin zentriert). */ main figure, main .center-x { margin-inline: auto; } /* --- Schutz: hier wuerde Zentrierung Funktion/Lesbarkeit brechen --- Formularfelder behalten linksbuendige Eingabe (iOS-Usability; der Handschrift-Brief richtet sein SVG-Overlay an linksbuendigem Text aus). */ main input, main select, main textarea { text-align: start; } /* Reservierungs-Modal + Kontakt-Overlay: durchdachtes Formular-Layout bleibt unangetastet (eigene zentrierte/linke/rechte Regeln greifen). */ .vr-modal-backdrop, .contact-overlay { text-align: left; } }