/* =====================================================================
   Vinzenz-Weinkeller — Homepage Styles
   Flat, mobile-first (Material Design 3, flach). Verbraucht ausschließlich
   die Tokens aus design-tokens/tokens.css. Keine Schatten, keine
   Bordeaux-/Serif-Reste, keine hartkodierten Farben (außer Overlay-Alpha
   über der Hero-Bildfläche und dem warmen Hinweis-Kasten).
   Navigation/Footer liefert app-shell.js.

   Aufbau seit dem Umbau 09/2026 (Rückmeldung Testpersonen: „überladen,
   erster Eindruck nicht überzeugend, Bild sieht man kaum"):
     1. Titelbild als Diashow, füllt am Handy den ganzen Bildschirm
     2. schlanke Info-Zeile (Zeiten · Adresse · Route)
     3. drei antippbare Bildkarten statt drei Textblöcke
     4. Chefkoch + Abschluss mit weniger Leerraum
   ===================================================================== */

/* ── 1. Hero / Diashow ─────────────────────────────────────────────── */
/* Höhe am Handy: genau der sichtbare Bereich zwischen Kopfzeile und
   unterer Leiste. svh = „kleine" Bildschirmhöhe, also MIT eingeblendeter
   Browser-Adressleiste — sonst rutschen die Knöpfe unter die Leiste.
   Die --vw-*-h-Werte setzt app-shell.js erst etwas später, darum Fallbacks. */
.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 52rem;
  min-height: calc(100svh - var(--vw-appbar-h, 60px) - var(--vw-botnav-h, 64px) - env(safe-area-inset-bottom, 0px));
  padding: var(--vw-space-8) var(--vw-space-4) var(--vw-space-6);
  overflow: hidden;
  isolation: isolate;
  background: #1a1a1a;           /* falls ein Bild einmal nicht lädt */
}
.home-hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.home-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  /* Überblendung 1,4 s; der langsame Zoom läuft über die ganze Standzeit
     (6 s) plus Überblendung, damit er nie „einrastet". */
  transition: opacity 1.4s ease, transform 7.5s linear;
}
/* Das sichtbare Bild liegt oben — wichtig fürs CMS: ein Klick trifft
   genau das Bild, das man gerade sieht. */
.home-hero__slide.is-active { opacity: 1; z-index: 1; }
.home-hero.is-running .home-hero__slide.is-active { transform: scale(1.08); }

/* Abdunklung als echtes Element (nicht ::after) mit pointer-events:none:
   so bleibt das Bild darunter im CMS anklickbar. Oben fast klar, damit
   man das Foto sieht; unten dunkel, damit Titel und Knöpfe lesbar sind. */
.home-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(17,17,17,.25) 0%,
    rgba(17,17,17,0) 22%,
    rgba(17,17,17,0) 38%,
    rgba(17,17,17,.55) 62%,
    rgba(17,17,17,.85) 100%);
}
.home-hero__inner {
  width: 100%;
  max-width: var(--vw-content-max);
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.home-hero__title {
  font-family: var(--vw-font-display);
  /* Gewicht + Größe wie .vw-display auf allen anderen Seiten. */
  font-weight: var(--vw-fw-text);
  /* min(…, 14vw): bei grosser Systemschrift auf schmalen Handys passt
     "Gaumenfreuden" noch in eine Zeile. Kein ­ im Titel – text-wrap:
     balance hat sonst schon bei 320 px "Gaumen-/freuden" getrennt. */
  font-size: min(clamp(3.6rem, 7vw, 8rem), 14vw);
  overflow-wrap: break-word;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 var(--vw-space-5);
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vw-space-3);
}
.home-hero__actions .vw-btn { width: 100%; }

/* Handy auf „Bewegung reduzieren": kein Zoom, keine Überblendung.
   Das Skript startet die Diashow in dem Fall gar nicht erst. */
@media (prefers-reduced-motion: reduce) {
  .home-hero__slide { transition: none; }
  .home-hero.is-running .home-hero__slide.is-active { transform: none; }
}

/* ── 2. Info-Zeile ─────────────────────────────────────────────────── */
.home-info {
  padding: var(--vw-space-5) var(--vw-space-4);
  background: var(--md-background);
  border-bottom: 1px solid var(--md-outline);
}
.home-info__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vw-space-2) var(--vw-space-6);
  text-align: center;
}
.home-info__item {
  margin: 0;
  font-size: var(--vw-fs-md);
  color: var(--md-text);
}
.home-info__item .msr,
.home-info__route .msr {
  font-size: 2rem;
  vertical-align: -.4rem;
  margin-right: .6rem;
  color: var(--md-primary-text);
}
.home-info__route {
  font-size: var(--vw-fs-md);
  font-weight: 700;
  color: var(--md-primary-text);
  text-decoration: none;
  white-space: nowrap;
}
.home-info__route:hover { text-decoration: underline; }

/* Anstehende Schliessung (Admin → Zeiten). Kunde 10/2026: der helle gelbe
   Kasten mit der duennen Versal-Ueberschrift fiel nicht auf. Jetzt dunkle
   Markenflaeche (Logo-Braun) mit weisser Schrift - Kontrast ~5:1, hebt sich
   klar von der hellen Seite ab, bleibt aber in den Hausfarben (kein Fehler-Rot). */
.home-info__hinweis {
  display: flex;
  align-items: center;
  gap: var(--vw-space-3);
  max-width: 52rem;
  margin: var(--vw-space-4) auto 0;
  padding: var(--vw-space-4);
  background: var(--md-primary-text);
  color: #fff;
  border-radius: var(--md-radius-card, 12px);
  box-shadow: 0 4px 14px rgba(60, 48, 20, .18);
  text-align: left;
}
.home-info__hinweis[hidden] { display: none; }
.home-info__hinweis .msr {
  display: flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 2.4rem; color: #fff; flex-shrink: 0;
}
.home-info__hinweis > div { min-width: 0; }
.home-info__hinweis-titel {
  margin: 0 0 .4rem;
  font-family: var(--vw-font-body);
  font-size: var(--vw-fs-md);
  font-weight: 700;
  color: #fff;
}
.home-info__liste { margin: 0; font-size: var(--vw-fs-sm); color: #fff; }
.home-info__liste > span { display: block; }
.home-info__liste > span + span { margin-top: .6rem; }
.home-info__liste strong { display: block; font-size: var(--vw-fs-lg); line-height: 1.25; }
.home-info__liste .vw-hinweis-trenner { display: none; }

/* Parkplätze / Barrierefreiheit */
.home-info-notes {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--vw-space-1) var(--vw-space-6);
  margin: var(--vw-space-3) 0 0;
  font-size: var(--vw-fs-sm);
  color: var(--md-text-muted);
}
.home-info-notes > span { display: inline-flex; align-items: center; gap: .6rem; }
.home-info-notes .msr { font-size: 1.8rem; color: var(--md-text-muted); }
@media (max-width: 860px) {
  .home-info-notes { flex-direction: column; align-items: center; text-align: center; }
  /* Bricht der Text am Handy um, stuende das Symbol sonst als eigene
     Flex-Spalte neben einem zweizeiligen Block. Im Textfluss klebt es
     am Anfang der ersten Zeile, der Umbruch bleibt mittig. */
  .home-info-notes > span { display: block; text-wrap: balance; }
  .home-info-notes .msr { vertical-align: -.4rem; margin-right: .4rem; }
}

/* ── 3. Bildkarten: Speisekarte · Catering · Gutscheine ───────────── */
.home-wege { padding-top: var(--vw-space-7); padding-bottom: var(--vw-space-7); }
.home-karten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vw-space-5);
}
/* Die ganze Karte ist ein Link: grosse Tippfläche am Handy. */
.home-karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--md-background);
  border: 1px solid var(--md-outline);
  border-radius: 1.2rem;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease;
}
.home-karte:hover { border-color: var(--md-primary-text); }
.home-karte:focus-visible { outline: 3px solid var(--md-primary-text); outline-offset: 3px; }
.home-karte__bild {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--md-surface);
}
.home-karte__text {
  display: flex;
  flex-direction: column;
  gap: var(--vw-space-2);
  flex: 1;
  padding: var(--vw-space-4) var(--vw-space-5) var(--vw-space-5);
}
.home-karte__eyebrow {
  margin: 0;
  font-family: var(--vw-font-label);
  font-size: var(--vw-fs-sm);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--md-primary-text);
}
.home-karte__titel {
  margin: 0;
  font-family: var(--vw-font-display);
  font-weight: var(--vw-fw-text);
  font-size: var(--vw-fs-xl);
  line-height: 1.15;
}
.home-karte__kurz {
  margin: 0;
  font-size: var(--vw-fs-md);
  line-height: 1.55;
  color: var(--md-text-muted);
}
/* margin-top:auto schiebt den Link bei ungleich langen Texten
   in allen drei Karten auf dieselbe Höhe (Desktop, 3 Spalten). */
.home-karte__link {
  margin-top: auto;
  padding-top: var(--vw-space-2);
  font-weight: 700;
  color: var(--md-primary-text);
}

/* ── 4. Chefkoch + Abschluss: weniger Leerraum ────────────────────── */
.home-kompakt { padding-top: var(--vw-space-6); padding-bottom: var(--vw-space-6); }

.home-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--vw-space-3);
}
.home-cta .vw-h2 { margin: 0; }
.home-cta .vw-muted { margin: 0; max-width: 48ch; }
.home-cta .vw-btn { margin-top: var(--vw-space-3); }

/* Breite wie die Gutscheinseite (120rem): bis 1520 px laufen Info-Zeile,
   Karten und Chefkoch sonst bei 1280 px fast randlos durch. */
.home-info > .vw-container, .home-karten, .home-chef { max-width: 120rem; }

/* Tablet hochkant: eine Spalte mit drei 700 px breiten Bildern wirkt riesig.
   Hier liegen die Karten quer – Bild links, Text rechts. */
@media (min-width: 600px) and (max-width: 860px) {
  .home-karte { flex-direction: row; }
  .home-karte__bild { aspect-ratio: auto; flex: 0 0 40%; min-height: 22rem; }
}

/* ── Ab Tablet ─────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .home-hero__actions .vw-btn { width: auto; }
}

/* ── Desktop: keine untere Leiste, Karten nebeneinander ───────────── */
@media (min-width: 861px) {
  .home-hero {
    min-height: min(calc(100svh - var(--vw-appbar-h, 60px)), 86rem);
    padding-bottom: var(--vw-space-8);
  }
  .home-karten { grid-template-columns: repeat(3, 1fr); }
  .home-kompakt { padding-top: var(--vw-space-7); padding-bottom: var(--vw-space-7); }
}