:root {
  --brand-green: #072e1f;
  --brand-sand: #e0ebc6;
  --gold-1: #f4d483;
  --gold-2: #d5a53a;
  --offer-gap: 32px;
  --topbar-h: 80px;
}

html, body { margin: 0; height: 100%; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--brand-green);
  color: #222;

  /* robustes Sticky-Footer-Grundgerüst */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  /* Platz für die fixed Topbar schaffen */
  padding-top: 120px;
}

/* Hauptinhalts-Bereich füllt die Resthöhe aus */
.page { flex: 1 0 auto; display: block; }

/* ===== Reservation Form ===== */
.reservation-form {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 700px;
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: var(--brand-sand);
  padding: 30px;
  border-radius: 25px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* Mobil: Platz für evtl. fixierte CTA am unteren Rand */
@media (max-width: 768px){
  .reservation-form{ max-width: 90vw; }
}

/* Form-Grid (Desktop: 2 Spalten; Mobile: 1 Spalte) */
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
}

/* Items sauber in Grid verhalten */
.form-row > .form-group{ min-width: 0; }

/* WICHTIG: fehlerhafte, leere Selektor-Liste ENTFERNT */

/* Explizite Einspalter-Reihe */
.form-row.full-width{ grid-template-columns: 1fr; }

/* Checkbox-/Einzeiler-Reihen */
.form-row.checkbox-row{ grid-template-columns: 1fr; }

/* Mobil: alles einspaltig */
@media (max-width: 768px){
  .form-row{ grid-template-columns: 1fr; }
}

.reservation-form h2 {
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, calc(3vw + 1rem), 3rem);
  color: var(--brand-green);
}

.form-group {
  display: flex;
  flex-direction: column;
}

#guests { max-width: 70px; }

label {
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--brand-green);
  letter-spacing: 0.5px;
}

input, textarea, select {
  border: none;
  border-bottom: 1px solid var(--brand-green);
  padding: 0.6rem 0;
  font-size: 1rem;
  background: transparent;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Klarer Tastaturfokus */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: #000;
  box-shadow: 0 2px 0 0 var(--gold-2);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.checkbox-row {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.checkbox-row input { margin-right: 0.5rem; }

#submit-button {
  padding: 1rem 1.25rem;
  border: none;
  border-radius: 30px;
  background: var(--brand-green);
  color: var(--brand-sand);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border 0.3s, box-shadow 0.2s;
}

/* Button zentrieren – funktioniert in Grid- und Flow-Kontexten */
.reservation-form button[type="submit"] {
  justify-self: center;               /* Grid-sicher */
  /* optional zusätzlich für Nicht-Grid-Container:
     display: block;
     margin-inline: auto;
  */
}

button:hover {
  background: var(--brand-sand);
  color: var(--brand-green);
  border: 1px solid var(--brand-green);
}

/* Optional: dedizierte Aktionszeile, falls im Markup vorhanden
.form-row.actions { grid-template-columns: 1fr; }
.form-row.actions > * { justify-self: center; }
*/

/* ===== Modal ===== *//* === Success Modal (brand-consistent) === */
#successModal.modal {
  display: none;
  position: fixed;
  inset: 0;
  /* leichter grünlicher Schleier */
  background: color-mix(in oklab, rgba(0,0,0,0.55) 78%, var(--brand-green) 22%);
  justify-content: center;
  align-items: center;
  z-index: 10000; /* über Drawer, unter Toast */
  padding: 16px;
}

#successModal[aria-hidden="false"] { display: flex; }

#successModal .modal-content {
  background: var(--brand-sand);
  color: var(--brand-green);
  padding: 28px 24px;
  border-radius: 20px;
  text-align: center;
  max-width: 520px;
  width: min(92vw, 520px);
  position: relative;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  outline: none; /* Fokus-Ring steuern wir explizit */
}

#successModal .modal-content:focus-visible {
  outline: 3px solid var(--gold-2);
  outline-offset: 3px;
}

#successModal h3 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.8rem);
  color: var(--brand-green);
}

#successModal p { margin: 0 0 16px; line-height: 1.45; }

#successModal .close-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 0;
  background: var(--brand-green);
  color: var(--brand-sand);
  font-size: 20px;
  line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
@media (hover:hover){
  #successModal .close-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.2); }
}
#successModal .close-btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* CTA-Button im Modal – gleiche Optik wie Primärbuttons */
#successModal .btn-home {
  display: inline-flex;
  justify-content: center; align-items: center;
  margin-top: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #3f2e08;
  box-shadow: 0 6px 18px rgba(213,165,58,.35);
  transition: transform .15s ease, box-shadow .2s ease;
}
@media (hover:hover){
  #successModal .btn-home:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(213,165,58,.45); }
}
#successModal .btn-home:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* Motion-Preference respektieren */
@media (prefers-reduced-motion: reduce){
  #successModal .btn-home, #successModal .close-btn { transition: none; }
}

/* ===== Toasts ===== */
#toast-root{
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 2147483647; /* ganz vorne */
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  min-width: 260px; max-width: min(90vw, 520px);
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  animation: toast-in .18s ease-out, toast-out .22s ease-in forwards;
  animation-delay: 0s, var(--life, 3s);
}

.toast.info    { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); }
.toast.success { background: color-mix(in oklab, #b4975a 22%, black); border: 1px solid #b4975a; }
.toast.error   { background: color-mix(in oklab, #e74c3c 28%, black); border: 1px solid #e74c3c; }

.toast .title{ font-weight: 700; margin: 0; line-height: 1.25; }
.toast .msg{ opacity: .95; }

.toast .x{
  background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 18px; line-height: 1;
  opacity: .8;
}
.toast .x:hover{ opacity: 1; }

@keyframes toast-in   { from { opacity: 0; transform: translate(-50%,-8px);} to { opacity:1; transform: translate(-50%,0);} }
@keyframes toast-out  { to   { opacity: 0; transform: translate(-50%,-10px);} }

/* ===== WICHTIG: Konfliktverursachenden Block ENTFERNT =====
   .reservation-form .form-row { grid-template-columns: 1fr 1fr; }
   @media (max-width: 768px){ .reservation-form .form-row { grid-template-columns: 1fr; } }
*/

/* Stattdessen: erhöhte Spezifität NACH der .full-width-Regel, um Desktop-Full-Width sicherzustellen */
.reservation-form .form-row.full-width { grid-template-columns: 1fr; }