/* =====================================================================
   Vinzenz-Weinkeller — Geteilte Modul-Verbesserungen (Responsivität)
   Wird nach den modulspezifischen CSS-Dateien geladen.
   ===================================================================== */

/* ── Hero-Überschriften ─────────────────────────────────────────────
   Die eigene Größe ist hier RAUS: sie ging bis 9rem (90px) und war damit
   mehr als doppelt so groß wie auf Über uns/Kontakt (40px) — die Schrift
   sprang also von Seite zu Seite. Die Größe kommt jetzt einheitlich von
   .vw-display in tokens.css. */

/* ── Hero-Padding mobil verkleinern ───────────────────────────────── */
@media (max-width: 600px) {
  .res-hero,
  .gut-hero,
  .cat-hero {
    padding: 4rem 1.6rem 3.5rem;
  }
  .res-hero__lead,
  .gut-hero__lead,
  .cat-hero__lead {
    font-size: var(--vw-fs-sm);
  }
}

/* ── Stepper mobil: nur die Nummern-Bubbles (Labels komplett aus, auch aktiv) ── */
@media (max-width: 520px) {
  .res-stepper ol,
  .gut-stepper ol,
  .cat-stepper ol {
    gap: .4rem;
  }
  .res-stepper li em,
  .gut-stepper li em,
  .cat-stepper li em,
  .res-stepper li.is-active em,
  .gut-stepper li.is-active em,
  .cat-stepper li.is-active em {
    display: none;
  }
  /* Seitliches Polster = Section-Polster, damit die Schrittanzeige auf
     derselben Fluchtlinie steht wie Hero und Formular (vorher 1rem = 10px
     gegen 16px der Abschnitte → sichtbarer Versatz auf dem Handy). */
  .vw-section .vw-container:has(.res-stepper),
  .res-stepper {
    padding-left: var(--vw-space-4);
    padding-right: var(--vw-space-4);
  }
}

/* ── Form-Sections: Padding mobil ─────────────────────────────────── */
@media (max-width: 600px) {
  .res-step legend,
  .gut-step legend,
  .cat-step legend {
    font-size: var(--vw-fs-lg);
  }
  .res-actions,
  .gut-actions,
  .cat-actions {
    flex-direction: column-reverse;
    gap: 1rem;
  }
  .res-actions .vw-btn,
  .gut-actions .vw-btn,
  .cat-actions .vw-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Modul-Summaries steuern ihr Mobil-Verhalten selbst ────────────────
   Früher wurde hier position:static erzwungen. Entfernt, damit die mobile
   Kosten-Sticky-Leiste im Catering (position:fixed) funktioniert.
   (Reservierung hat die Zusammenfassung komplett entfernt.) */

/* ── Tisch-Karten mobil ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .res-tables {
    grid-template-columns: 1fr 1fr;
  }
  .res-table-card__inner {
    padding: 1rem;
    min-height: 72px;
  }
}

/* ── Touch-Targets: mindestens 44px ───────────────────────────────── */
.res-slot,
.res-num-btn,
.gut-preset-btn,
.cat-menu-card {
  min-height: 44px;
}

/* ── Gutschein: Betrags-Grid mobil ────────────────────────────────── */
@media (max-width: 480px) {
  .gut-amounts {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Catering: Menü-Grid mobil ─────────────────────────────────────── */
@media (max-width: 600px) {
  .cat-menu-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Sections Padding mobil ────────────────────────────────────────── */
@media (max-width: 600px) {
  .vw-section {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  /* Container erben ihr seitliches Polster vom Abschnitt — außer die
     Schrittanzeigen, die außerhalb einer .vw-section stehen und ihr Polster
     selbst mitbringen müssen (sonst rutschen sie auf dem Handy an den Rand). */
  .vw-container:not(.res-stepper):not(.cat-stepper):not(.gut-stepper) {
    padding: 0;
  }
}

/* ── Datepicker responsiv ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .vw-dp-stack--horizontal {
    flex-direction: column !important;
  }
}