/* ===================================================================
   PUBLIC WEBSITE CSS - gemeinsame Design-Basis fuer ALLE 9 oeffentlichen
   GastroApp-Seiten (Startseite, Speisekarte, Galerie, Kontakt, Impressum,
   Datenschutz, AGB, plus index.html/about.html).
   Farb-/Schrift-Werte kommen aus frontend/data/design-tokens.json und
   werden von design-apply.js zur Laufzeit als CSS-Variablen gesetzt.
   Die Werte hier im :root sind der statische Fallback (Preset "classic"),
   falls design-apply.js nicht laufen kann (z.B. rein statischer Test ohne
   Backend).
   =================================================================== */

:root {
  --primary-color: #1a1a1a;
  --secondary-color: #4d4d4d;
  --primary-light: #f0f0f0;
  --secondary-light: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --bg-white: #ffffff;
  --bg-light: #f7f7f8;
  --nav-bg: #1a1a1a;
  --nav-text: #ffffff;
  --border-color: #dddddd;
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Ergaenzung (Owner-Auftrag "zentrale Theme-Konfiguration auf allen
     oeffentlichen Seiten", 2026-08-02): restliche Felder aus dem freien
     15-Farben-Theme (Block 2A), die bisher kein CSS-Gegenstueck hatten.
     Fallback-Werte entsprechen DEFAULT_THEME aus
     backend/lib/themeValidationV1.js, damit ohne Tenant-Theme dieselbe
     Optik wie bisher entsteht. */
  --accent-color: #0066cc;
  --link-color: #0066cc;
  --button-bg: #1a1a1a;
  --button-text: #ffffff;
  --footer-bg: #1a1a1a;
  --footer-text: #ffffff;
  --radius: 12px;
  --button-radius: 8px;
}

body {
  font-family: var(--font-family);
  color: var(--text-primary);
  /* Seitenhintergrund = background_color (--bg-white), NICHT
     surface_color (--bg-light) - Karten-/Formularflaechen setzen ihre
     eigene --bg-light-Flaeche darueber (Owner-Nachbesserung "zentrale
     Hintergrundfarbe auf allen oeffentlichen Seiten", 2026-08-02: body war
     bislang auf die Oberflaechenfarbe verdrahtet, wodurch background_color
     nur auf der Startseite sichtbar wurde, wo .info-cards-section/
     .hours-section zufaellig denselben Wert separat gesetzt hatten). */
  background-color: var(--bg-white);
  margin: 0;
}

/* Gemeinsame Navigation - identisch auf allen 9 oeffentlichen Seiten */
.header {
  background-color: var(--nav-bg);
}

.navbar {
  background-color: var(--nav-bg);
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.navbar-logo {
  color: var(--nav-text);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

.navbar-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.navbar-link {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
  padding: 0.4rem 0.2rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.navbar-link:hover,
.navbar-link.active {
  opacity: 1;
  border-bottom-color: var(--nav-text);
}

@media (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-menu {
    gap: 1rem;
  }
}

/* Buttons - Basisklassen (Owner-Auftrag "Oeffentliche Startseite auf
   Base44-Zielbild anheben", 2026-07-30: .btn/.btn-primary/.btn-secondary
   wurden im Markup seit Milestone 3 verwendet, hatten aber in dieser Datei
   nie eine eigene Regel - Buttons erschienen unstyled. Fuer die geforderten
   "starken Hauptaktionen" im Hero jetzt real definiert.) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--button-radius, 8px);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn:focus-visible {
  outline: 3px solid var(--primary-color, #4CAF50);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--button-bg, #1a1a1a);
  color: var(--button-text, #ffffff);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
  background-color: #ffffff;
  color: var(--text-primary, #1a1a1a);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.btn-outline {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.btn-large {
  padding: 1rem 3rem;
  font-size: 1.1rem;
}

/* Hero Section - grossflaechiges Titelbild als Hintergrund statt separater
   Bildkarte neben dem Text (Owner-Zielbild, Abschnitt 3). Ohne echtes
   Titelbild zeigt #hero-bg einen tenantfarbigen Verlauf aus den bestehenden
   Theme-Variablen statt eines Bild-Platzhalters ("kein Hero-Platzhalter
   sichtbar" - Owner-Korrektur) - design-apply.js setzt background-image nur,
   wenn ein echtes, vom Tenant hochgeladenes Titelbild vorliegt. */
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  /* dvh (dynamic viewport height) statt vh, wo unterstuetzt: vh rechnet auf
     mobilen Browsern gegen die maximale Viewporthoehe VOR dem Einklappen der
     Adressleiste, dvh gegen die tatsaechlich sichtbare Hoehe - vermeidet ein
     zu grosses/springendes Hero beim Laden auf dem Smartphone. Reine
     Progressive-Enhancement-Zeile, vh bleibt der Fallback fuer aeltere
     Browser (2026-08-15, Owner-Auftrag "Smartphone-Optimierung Startseite"). */
  min-height: 60dvh;
  display: flex;
  align-items: flex-end;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, var(--primary-color, #4CAF50) 0%, var(--secondary-color, #2e7d32) 100%);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem 2rem;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  color: #ffffff;
  box-sizing: border-box;
}

.hero-badge {
  display: inline-block;
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}

.hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 640px;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
}

.hero-status-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.hero-status.is-open { color: #7ee787; }
.hero-status.is-closed { color: #ff9b9b; }

.hero-buttons {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Info-Karten unter dem Hero - nur reale, aktive Kanaele (Abschnitt 6) */
.info-cards-section {
  padding: 2.5rem 2rem;
  background-color: var(--bg-white, #ffffff);
}

.info-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.info-card {
  background-color: var(--bg-white, #ffffff);
  border-radius: var(--radius, 12px);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border-color, #dddddd);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* Manche Karten sind inzwischen <a> statt <div> (z.B. "Vorteile sichern"
     verlinkt jetzt auf die echte Registrierung) - Linkfarbe/-unterstreichung
     neutralisieren, damit Abholung/Lieferung/Reservierung (weiterhin <div>)
     optisch unveraendert bleiben. */
  text-decoration: none;
  color: inherit;
}

/* Icon-Flaeche statt Emoji (Owner-Auftrag "Startseiten-Karten fuer Abholung/
   Reservierung verbessern und 'Vorteile sichern' ergaenzen", 2026-08-03) -
   Icon selbst ist Inline-SVG aus window.ControlCenterIcons (currentColor),
   Farbe/Flaeche kommen ausschliesslich aus Theme-Variablen. */
.info-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--primary-light, #f0f0f0);
  color: var(--primary-color, #4CAF50);
}

.info-card-icon svg {
  width: 24px;
  height: 24px;
}

.info-card-title {
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin: 0 0 0.2rem;
}

.info-card-text {
  font-size: 0.9rem;
  color: var(--text-secondary, #666666);
  margin: 0;
}

/* Auszeichnungen (Owner-Auftrag "Control-Center-Bereich 'Auszeichnungen' und
   Darstellung auf der Startseite", 2026-08-03) - ruhige horizontale
   Querspalte oberhalb von "Ueber uns". Section bleibt per [hidden] komplett
   unsichtbar, wenn 0 aktive Eintraege vorhanden sind (kein leerer
   Platzhalter). Bewusst kein Rahmen/Kartenhintergrund um die einzelnen
   Bilder (Abschnitt 11: "kein zusaetzlicher farbiger Rahmen um transparente
   Siegel", "keine erzwungene Kartenflaeche"). */
/* Gast-Auth-Seiten (Owner-Auftrag "Gästeregistrierung und Kundenkonto
   Phase 1 vollständig bauen", 2026-08-03) - eine gemeinsame Formular-
   Optik fuer Registrierung/Login/Passwort-Reset/Konto, zentrale Theme-
   Variablen, kein Hardcode. Wiederverwendet .btn/.btn-primary (bereits
   definiert oben). */
.auth-page-content {
  max-width: 440px;
  margin: 2.5rem auto 4rem;
  padding: 0 1.5rem;
}

.auth-card {
  background-color: var(--bg-light, #f5f7fa);
  border-radius: var(--radius, 12px);
  padding: 2rem;
}

.auth-field {
  margin-bottom: 1rem;
}

.auth-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary, #1a1a1a);
}

.auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-color, #dddddd);
  border-radius: var(--button-radius, 8px);
  font-size: 1rem;
  background-color: var(--bg-white, #ffffff);
  color: var(--text-primary, #1a1a1a);
}

.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--text-primary, #1a1a1a);
}

.auth-checkbox-row input {
  margin-top: 0.2rem;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

.auth-error {
  color: #c0392b;
  background-color: rgba(192, 57, 43, 0.08);
  border-radius: var(--button-radius, 8px);
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.auth-success {
  color: #1e7e34;
  background-color: rgba(30, 126, 52, 0.08);
  border-radius: var(--button-radius, 8px);
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.auth-hint {
  font-size: 0.85rem;
  color: var(--text-secondary, #666666);
  margin-top: 1rem;
  text-align: center;
}

.auth-hint a {
  color: var(--primary-color, #4CAF50);
  text-decoration: none;
  font-weight: 600;
}

.auth-hint a:hover {
  text-decoration: underline;
}

.auth-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color, #dddddd);
  gap: 1rem;
}

.auth-profile-row:last-child {
  border-bottom: none;
}

.auth-profile-label {
  font-size: 0.85rem;
  color: var(--text-secondary, #666666);
}

.auth-profile-value {
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  text-align: right;
}

.awards-section {
  padding: 2.5rem 2rem;
  background-color: var(--bg-white, #ffffff);
}

.awards-group {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5rem;
}

.awards-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.awards-item img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.awards-title {
  margin: 0;
  max-width: 160px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary, #666666);
}

@media (max-width: 900px) {
  .awards-group {
    gap: 1.5rem;
  }

  .awards-item img {
    max-height: 110px;
  }
}

@media (max-width: 480px) {
  .awards-group {
    gap: 1.25rem;
  }

  .awards-item img {
    max-height: 80px;
  }
}

/* About Section - kompakt, ein Bild-Platzhalter ohne reale Datenquelle
   wurde entfernt statt vorgetaeuscht zu werden (Abschnitt 7). */
.about-section {
  padding: 3rem 2rem;
  background-color: var(--bg-light, #f5f7fa);
}

.about-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-text h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin: 0;
}

.about-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary, #666666);
}

/* Kurzer Auszug statt Volltext auf der Startseite (Owner-Auftrag "Ueber uns
   kuerzen und eigene Seite einbinden", 2026-08-03) - line-clamp begrenzt die
   Vorschau auf max. 3 sichtbare Zeilen unabhaengig von der tatsaechlichen
   Zeichenlaenge des abgeleiteten Kurztexts. */
.about-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.about-readmore {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--primary-color, #4CAF50);
  text-decoration: none;
  font-weight: 600;
}

.about-readmore:hover {
  text-decoration: underline;
}

.about-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary, #1a1a1a);
}

.about-meta a {
  color: var(--primary-color, #4CAF50);
  text-decoration: none;
  font-weight: 600;
}

.about-meta a:hover {
  text-decoration: underline;
}

/* Ausstattung & Services (Restaurant Facts / Features V1, 2026-08-09) - bewusst deutlich
   kleiner als .info-card (Abholung/Reservierung/Vorteile sichern): keine grosse CTA-Karte,
   nur eine kompakte Informations-Pille pro aktivem Merkmal. Layout (flex-wrap, zentriert)
   folgt derselben Konvention wie .awards-group, Farben/Radius/Border wie .info-card, damit
   der Bereich wirkt, als waere er von Anfang an Teil der Seite gewesen. */
.feature-tiles-section {
  padding: 2.5rem 2rem;
  background-color: var(--bg-white, #ffffff);
}

.feature-tiles-section h2 {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin: 0 0 1.5rem;
}

.feature-tiles-group {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.feature-tile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border-color, #dddddd);
  background-color: var(--bg-light, #f5f7fa);
}

.feature-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--primary-light, #f0f0f0);
  color: var(--primary-color, #4CAF50);
}

.feature-tile-icon svg {
  width: 16px;
  height: 16px;
}

.feature-tile-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  white-space: nowrap;
}

/* Hours Section */
.hours-section {
  padding: 3rem 2rem;
  background-color: var(--bg-white, #ffffff);
}

.hours-section h2 {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 0.5rem;
}

.hours-today-banner {
  text-align: center;
  font-weight: 600;
  margin-bottom: 2rem;
  color: var(--primary-color, #4CAF50);
}

.hours-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto 1.5rem;
}

.hours-info {
  background-color: var(--bg-light, #f5f7fa);
  padding: 1.25rem;
  border-radius: var(--radius, 12px);
  text-align: center;
  border-left: 4px solid var(--border-color, #dddddd);
}

.hours-info.is-today {
  border-left-color: var(--primary-color, #4CAF50);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.hours-info h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 0.5rem;
}

.hours-info p {
  font-size: 0.95rem;
  color: var(--text-secondary, #666666);
  line-height: 1.6;
  margin: 0.25rem 0;
}

.hours-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary, #666666);
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* Sonder-Schliesszeiten/Betriebsferien: bis zu 4 nebeneinander, zentriert,
   ab dem 5. Eintrag automatisch neue Zeile (flex-basis begrenzt jede Karte
   auf ca. 1/4 der Breite, flex-wrap erledigt den Zeilenumbruch). */
.hours-closures {
  max-width: 900px;
  margin: 1rem auto 0;
}

.hours-closures-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.hours-closure-item {
  background-color: var(--bg-light, #f5f7fa);
  color: var(--text-secondary, #666666);
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius, 12px);
  border-left: 3px solid var(--border-color, #dddddd);
  box-sizing: border-box;
  flex: 0 1 calc((100% - 2.25rem) / 4);
  min-width: 190px;
  text-align: center;
}

/* Navigation Section */
.nav-section {
  padding: 3rem 2rem;
  background-color: var(--bg-light, #f5f7fa);
  text-align: center;
}

.nav-section h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 2rem;
}

.nav-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.nav-links-list li {
  display: inline;
}

.nav-links-list a {
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: inline-block;
}

.nav-links-list a:hover {
  background-color: var(--primary-color, #4CAF50);
  color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Strukturelle Neuloesung nach drei echten Owner-Smartphone-Tests (2026-08-15).
     Die ersten beiden Anlaeufe versuchten, ein Querformat-Tenant-Foto MIT eigenem
     Logo/Schriftzug per background-size (cover/contain/Prozentwerte) in dieselbe hohe,
     schmale Box wie den Text zu zwingen - das Seitenverhaeltnis von Foto und Mobile-Hero
     passt strukturell nicht zusammen, jeder background-size-Wert war entweder zu stark
     gezoomt/angeschnitten oder zu klein mit Leerflaechen.
     Owner-Entscheidung: auf Mobile/Tablet-Hochformat wird das Bild ein EIGENER,
     vollbreiter Bildblock in normalem Fluss (kein position:absolute mehr, keine
     Ueberlagerung mit dem Text) mit FESTEM Seitenverhaeltnis (aspect-ratio) statt einer an
     die Textmenge gekoppelten Hoehe - background-size:cover muss dadurch nur noch minimal
     zuschneiden (Boxverhaeltnis 4:3 liegt nahe am tatsaechlichen Foto), danach folgt der
     Hero-Text als eigener Block auf der bestehenden dunklen Flaeche. Dieselbe
     background-image-URL wie bisher (design-apply.js unveraendert) - keine zweite
     Bildquelle, kein Bildtausch. */
  .hero-section {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .hero-bg {
    /* relative statt static: .hero-bg::after (Abdunkel-Verlauf, inset:0) braucht weiterhin
       GENAU die Bildflaeche als Bezugsrahmen, nicht die gesamte (jetzt gestapelte)
       .hero-section - sonst wuerde der Verlauf ueber Bild UND Textblock gleichzeitig
       laufen. */
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-position: center;
  }

  .hero-content {
    background-color: var(--primary-color, #1a1a1a);
    padding: 2rem 1.25rem;
  }

  /* .hero-content hat jetzt eine EIGENE, deckende background-color (var(--primary-color)) statt
     wie bisher nur das durchscheinende, abgedunkelte Bild dahinter - .btn-primary nutzt
     --button-bg, das im Classic-Preset ebenfalls #1a1a1a ist. Ohne diese Zeile verschmilzt der
     Button optisch komplett mit dem Hintergrund (nur der weisse Text bliebe sichtbar, keine
     erkennbare Button-Flaeche mehr) - ein sichtbarer heller Rahmen stellt die Buttonform auch
     dann wieder her, wenn Hintergrund- und Button-Farbe zufaellig gleich sind. */
  .hero-buttons .btn-primary {
    border-color: rgba(255, 255, 255, 0.4);
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .about-text h2 {
    font-size: 1.5rem;
  }

  .feature-tiles-section h2 {
    font-size: 1.5rem;
  }

  .hours-section h2 {
    font-size: 1.5rem;
  }

  .hours-content {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .hours-closure-item {
    flex-basis: calc((100% - 0.75rem) / 2);
    min-width: 160px;
  }

  .nav-links-list {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links-list a {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* Bild/Hoehe/Position kommen jetzt vollstaendig aus dem strukturellen
     @media(max-width:768px)-Block oben (eigener Bildblock + aspect-ratio) - hier nur noch
     die schon vorhandenen, von der Bildfrage unabhaengigen Verdichtungen fuer sehr schmale
     Screens (Schriftgroessen/Abstaende/Button-Grid). */

  .hero-content {
    padding: 1.5rem 1rem;
    /* Kleinerer Abstand zwischen Badge/Titel/Untertitel/Status/Buttons auf
       sehr schmalen Screens - dieselben Elemente wie auf Desktop, nur enger
       gestapelt, damit ein Tenant mit mehreren aktiven CTAs (Bestellen +
       Speisekarte + Reservieren, teils zusaetzlich Anrufen/Route) den Hero
       nicht ueber die gesamte erste Bildschirmhoehe hinaus aufblaeht. */
    gap: 0.75rem;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  /* Bis zu 5 CTAs koennen gleichzeitig sichtbar sein (Bestellen/Speisekarte/
     Reservieren/Anrufen/Route, je nach Tenant-Konfiguration). Eine starre
     Ein-Spalten-Stapelung (vorher: flex-direction:column) trieb die
     Hero-Hoehe bei mehreren CTAs unnoetig in die Hoehe. Ein responsives Grid
     setzt automatisch 2 CTAs pro Zeile, sobald der Platz reicht (ab ca.
     360px Breite), faellt bei 320px automatisch auf eine Spalte zurueck -
     kein Button wird je breiter als der Viewport, ohne Geraete-Hack. */
  .hero-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
  }

  .hero-buttons .btn {
    padding: 0.7rem 1rem;
  }

  .about-section,
  .info-cards-section,
  .feature-tiles-section,
  .hours-section {
    padding: 1.5rem 1rem;
  }

  .about-text h2 {
    font-size: 1.25rem;
  }

  .about-text p {
    font-size: 0.95rem;
  }

  .hours-info {
    padding: 1.5rem;
  }

  .hours-info h3 {
    font-size: 1rem;
  }

  .hours-note {
    font-size: 0.85rem;
  }

  .hours-closure-item {
    flex-basis: 100%;
    font-size: 0.85rem;
  }

  .nav-section h3 {
    font-size: 1.2rem;
  }
}

/* .page-header-band (dunkler Seiten-Banner) wurde entfernt (Bauabschnitt
   "Oeffentlichen Seitenheader zentralisieren", 2026-07-31) - Verwendung
   zuvor auf allen 8 oeffentlichen Seiten grep-geprueft auf null reduziert,
   siehe docs/GASTRO_APP_PUBLIC_HEADER_ARCHITECTURE_REPORT.md Abschnitt 10.
   .public-page-header (unten) ist jetzt die alleinige, verbindliche
   Seitentitel-Klasse fuer alle Inhaltsseiten. */

/* Heller Seitentitelbereich - die EINZIGE verbindliche Seitentitel-Klasse
   fuer alle oeffentlichen Inhaltsseiten (Speisekarte, Reservierung, Galerie,
   Kontakt, Impressum, Datenschutz, AGB und jede zukuenftige Inhaltsseite).
   Dunkler Header enthaelt ausschliesslich Logo/Navigation, nie einen
   Seitentitel. Startseite ist die einzige bewusste Ausnahme (eigener
   Hero-Bereich statt Seitentitel). Immer als direktes Geschwisterelement
   unmittelbar nach </header> platzieren, NICHT in einen seiteneigenen
   Breiten-Container verschachteln - max-width/Abstaende sind bereits Teil
   dieser Klasse, damit auf jeder Seite exakt dieselbe Breite/Abstaende
   entstehen. Markup: <div class="public-page-header"><h1>Titel</h1>
   <p>optionaler Untertitel</p></div>. Siehe
   docs/GASTRO_APP_PUBLIC_HEADER_ARCHITECTURE_REPORT.md fuer die verbindliche
   Regel bei neuen Seiten. */
.public-page-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0.5rem;
  text-align: center;
}

.public-page-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin: 0 0 0.5rem;
}

.public-page-header p {
  font-size: 1.05rem;
  color: var(--text-secondary, #666666);
  margin: 0 auto;
  max-width: 640px;
}

@media (max-width: 480px) {
  .public-page-header {
    padding: 1.75rem 1.25rem 0.25rem;
  }

  .public-page-header h1 {
    font-size: 1.5rem;
  }

  .public-page-header p {
    font-size: 0.95rem;
  }
}

/* Footer - gemeinsam auf Startseite, Galerie, Kontakt (Fund 2026-07-13:
   Markup existierte bereits auf allen drei Seiten, aber ohne jede CSS-Regel
   - erschien dadurch als roher, unformatierter Listenblock am Seitenende). */
.footer {
  background-color: var(--footer-bg, var(--nav-bg));
  color: var(--footer-text, var(--nav-text));
  margin-top: 3rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.footer-section h4 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--footer-text, var(--nav-text));
}

.footer-section p {
  color: var(--footer-text, var(--nav-text));
  opacity: 0.75;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 0.4rem;
}

.footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-section li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: var(--footer-text, var(--nav-text));
  opacity: 0.75;
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.2s ease;
}

.footer-section a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  padding: 1.2rem 1.5rem;
}

.footer-bottom p {
  color: var(--footer-text, var(--nav-text));
  opacity: 0.6;
  font-size: 0.85rem;
  margin: 0;
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
}

/* Print Styles */
@media print {
  .hero-buttons,
  .nav-section {
    display: none;
  }

  .hero-section,
  .about-section,
  .info-cards-section,
  .feature-tiles-section,
  .hours-section {
    page-break-inside: avoid;
  }
}

/* Owner-Auftrag "OPTIONAL SICHTBARE SOCIAL-MEDIA-ICONS AUF DER STARTSEITE" (2026-08-29): gleiche
   Zentrierungs-/Ordnungslogik wie .awards-group oben (max-width, margin:auto, flex, justify-
   content:center) als Vorbild fuer "ruhig, ausgewogen, nicht ueberdimensioniert" - eigene, kleinere
   Werte, da hier reine Icon-Badges statt Auszeichnungsbilder dargestellt werden. Alle Icons
   identische Container-/Schriftgroesse (kein natuerliches Bildmass), damit jede Plattform optisch
   gleich gewichtet ist. */
.social-home-section {
  padding: 2rem 2rem 2.5rem;
  background-color: var(--bg-white, #ffffff);
}

.social-home-icons {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

/* Owner-Auftrag "Social-Media-Icons doppelt so gross" (2026-08-29): sichtbare Icon-Groesse
   28px->56px (Desktop) bzw. 24px->48px (Mobile, siehe Media Query unten) verdoppelt - die
   Touch-/Link-Flaeche waechst proportional mit (gleiche kleine Restpolsterung wie zuvor), damit
   das groessere Icon nicht aus seinem klickbaren Bereich herausragt. Weiterhin transparent, kein
   Kreis, kein Hintergrund, keine sichtbare Box - nur die Flaeche selbst wird groesser. */
.social-home-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Owner-Korrektur "OFFIZIELLE ORIGINAL-SOCIAL-MEDIA-ICONS" (2026-08-29): kein grauer
   Platzhalter-Kreis mehr hinter dem Icon - das Original-Markenlogo selbst bildet die Darstellung
   (manche Marken wie WhatsApp/LinkedIn haben von Haus aus eine farbige Badge-Form, das ist Teil
   des jeweiligen Logos, kein neutraler Hintergrund). Einheitliche sichtbare Groesse unabhaengig
   vom natuerlichen Seitenverhaeltnis jedes SVGs, da jedes Icon dasselbe quadratische viewBox
   "0 0 24 24" nutzt (siehe restaurantSeoData.js SOCIAL_HOME_PLATFORMS) und hier zentral auf
   dieselbe Breite/Hoehe skaliert wird. */
.social-home-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.social-home-icon svg {
  display: block;
  width: 56px;
  height: 56px;
}

.social-home-icon:hover,
.social-home-icon:focus-visible {
  transform: scale(1.08);
  opacity: 0.85;
}

@media (max-width: 480px) {
  .social-home-icons {
    gap: 1rem;
  }

  .social-home-icon {
    width: 56px;
    height: 56px;
  }

  .social-home-icon svg {
    width: 48px;
    height: 48px;
  }
}