/* ============================================================
   Tischreservierung (/reservierung/) - ergänzt stil.css.
   Nur auf den Reservierungsseiten geladen (kopf(['stile' => ...])).
   Gleiche Farben, Schriften und eckigen Kanten wie die übrige Seite.
   ============================================================ */

.res-kopf .kopfzeile { margin-bottom: 0; }
.res-kopf h1 { margin-bottom: .6rem; }
.res-vorteile {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem;
  color: var(--braun-hell); font-size: .95rem;
}
.res-vorteile li { display: inline-flex; align-items: center; gap: .4rem; }
.res-vorteile li::before {
  content: ""; width: .5rem; height: .5rem; background: var(--gold); transform: rotate(45deg);
}

.res-bahn { padding-top: clamp(2rem, 4vw, 3.2rem); }
.res-raster { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) {
  .res-raster { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.6rem; }
  .res-seite { position: sticky; top: 6.5rem; }
}

/* ---------------------------------------------------------------- Schritte */

.res-formular { display: grid; gap: 1.2rem; min-width: 0; }
.res-auswahl { display: grid; gap: 1.2rem; }
/* Breiter Bildschirm: Kalender und Uhrzeiten nebeneinander, das spart Scrollen. */
@media (min-width: 62rem) {
  .res-raster .res-auswahl { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .res-raster #schritt-personen { grid-column: 1 / -1; }
  .res-raster #schritt-zeit { align-self: stretch; }
}
.res-schritt {
  margin: 0; min-width: 0;
  border: 1px solid var(--rand); background: var(--weiss);
  padding: 1.2rem 1.25rem 1.4rem;
}
.res-schritt > legend {
  font-family: var(--schrift-titel); font-size: 1.2rem; color: var(--braun-dunkel);
  padding: 0 .5rem; margin-left: -.5rem; display: flex; align-items: center; gap: .6rem;
}
.res-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; flex: 0 0 auto;
  background: var(--braun-dunkel); color: var(--weiss);
  font-family: var(--schrift-text); font-size: .85rem; font-weight: 600;
}
.res-schritt > legend + * { margin-top: .4rem; }

/* Kacheln für Personen (echte Radioknöpfe, auch ohne JavaScript bedienbar) */
.res-kacheln { display: flex; flex-wrap: wrap; gap: .5rem; }
.res-kachel { position: relative; cursor: pointer; }
.res-kachel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.res-kachel span {
  display: flex; align-items: center; justify-content: center;
  min-width: 3rem; min-height: 3rem; padding: 0 .9rem;
  border: 1px solid var(--rand); background: var(--weiss); color: var(--braun-dunkel);
  font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s, color .15s;
}
.res-kachel:hover span { border-color: var(--gold); }
.res-kachel input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--weiss); }
.res-kachel input:focus-visible + span { outline: 3px solid var(--gold-hell); outline-offset: 2px; }
.res-kachel--breit span { font-size: .92rem; font-weight: 600; }

.res-gruppe { margin-top: 1rem; display: grid; gap: .5rem; max-width: 30rem; }
.res-gruppe .feld { max-width: 12rem; }
.js-res .res-gruppe:not(.ist-offen) { display: none; }

/* Ohne JavaScript: Datumsfeld und Uhrzeitliste. Mit: Kalender und Kacheln. */
.js-res .res-ohnejs { display: none; }
.res-ohnejs { max-width: 16rem; }

/* ---------------------------------------------------------------- Kalender */

.res-kalender { max-width: 26rem; }
.res-kalender__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .6rem;
}
.res-kalender__monat { font-family: var(--schrift-titel); font-size: 1.1rem; color: var(--braun-dunkel); margin: 0; }
.res-pfeil {
  width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rand); background: var(--weiss); color: var(--braun-dunkel); cursor: pointer;
  font-size: 1.2rem; line-height: 1;
}
.res-pfeil:hover:not([disabled]) { border-color: var(--gold); color: var(--gold); }
.res-pfeil[disabled] { opacity: .35; cursor: default; }

.res-kalender__raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.res-kalender__wt {
  text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  color: var(--braun-hell); padding: .2rem 0;
}
.res-tag {
  aspect-ratio: 1; min-height: 2.6rem; width: 100%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  border: 1px solid var(--rand); background: var(--weiss); color: var(--braun-dunkel);
  font: inherit; font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer; padding: 0; position: relative;
  transition: background .15s, border-color .15s, color .15s;
}
.res-tag:hover:not([disabled]) { border-color: var(--gold); }
.res-tag[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--weiss); }
.res-tag[disabled] { cursor: default; background: transparent; border-color: transparent; color: #B7A88A; font-weight: 400; }
.res-tag--voll[disabled] { text-decoration: line-through; }
.res-tag--heute::after {
  content: ""; position: absolute; bottom: .3rem; width: .3rem; height: .3rem; background: currentColor;
}
.res-tag--leer { visibility: hidden; }
.res-kalender__legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .7rem 0 0; font-size: .8rem; color: var(--braun-hell); }
.res-kalender__legende .ist-frei { color: var(--braun-dunkel); font-weight: 600; }
.res-kalender__legende .ist-voll { color: #B7A88A; text-decoration: line-through; }
.res-kalender__legende .ist-zu { color: #B7A88A; }

/* ---------------------------------------------------------------- Uhrzeiten */

.res-zeiten__gruppe + .res-zeiten__gruppe { margin-top: 1rem; }
.res-zeiten__titel {
  margin: 0 0 .45rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--braun-hell);
}
.res-zeiten__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .45rem; }
.res-zeit {
  min-height: 2.9rem; border: 1px solid var(--rand); background: var(--weiss); color: var(--braun-dunkel);
  font: inherit; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.res-zeit:hover:not([disabled]) { border-color: var(--gold); }
.res-zeit[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--weiss); }
.res-zeit[disabled] { cursor: default; color: #B7A88A; background: var(--creme-hell); text-decoration: line-through; font-weight: 400; }
.res-zeiten__leer { margin: 0; color: var(--braun-hell); }
.res-zeiten__hinweis { margin: .7rem 0 0; font-size: .85rem; color: var(--braun-hell); }
.res-laedt { color: var(--braun-hell); font-size: .95rem; }
.res-fehlhinweis { color: #7B3319; font-size: .9rem; margin: .5rem 0 0; }

/* ---------------------------------------------------------------- Angaben */

.res-schritt .feld + .feld, .res-schritt .feldreihe + .feld, .res-schritt .feld + .feldreihe,
.res-schritt .feldreihe + .feldreihe { margin-top: .9rem; }
.res-extras { align-items: end; }
.res-hund { align-self: end; }
.res-schritt .ankreuz { margin-top: .8rem; }
.res-absenden { margin-top: 1.2rem; display: grid; gap: .6rem; }
.res-absenden .klein { margin: 0; text-align: center; }
.res-absenden .knopf[aria-busy="true"] { opacity: .7; cursor: progress; }

.res-alt__titel { margin: .8rem 0 .4rem; font-weight: 600; }
.res-alt { display: flex; flex-wrap: wrap; gap: .5rem; }
.meldung p { margin: 0; }
.meldung p + p { margin-top: .4rem; }

/* ---------------------------------------------------------------- Seitenleiste */

.res-seite { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.res-karte {
  background: var(--weiss); border: 1px solid var(--rand); padding: 1.3rem 1.35rem 1.4rem; min-width: 0;
}
.res-seite .knopf { white-space: normal; }
.res-karte > :first-child { margin-top: 0; }
.res-karte > :last-child { margin-bottom: 0; }
.res-karte h2 { font-size: 1.2rem; margin-bottom: .7rem; }
.res-karte .zeiten { margin: 0 0 .6rem; grid-template-columns: minmax(0, 1fr); gap: 0; }
.res-karte .zeiten dd { white-space: normal; margin-bottom: .55rem; }
.res-karte--hinweis { text-align: center; max-width: 40rem; margin-inline: auto; }

/* ---------------------------------------------------------------- Leiste unten (Handy) */

.res-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--braun-dunkel); color: #E8DFCB;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .25s ease-out;
}
.res-leiste.ist-sichtbar { transform: none; }
.res-leiste[hidden] { display: none; }
.res-leiste__text { margin: 0; font-size: .95rem; font-weight: 600; }
.res-leiste .knopf { flex: 0 0 auto; }
@media (min-width: 62rem) { .res-leiste { display: none !important; } }
/* Der schwebende Knopf zum KI-Assistenten läge sonst genau auf "Weiter". */
@media (max-width: 61.99rem) {
  .res-leiste-an .rufkreis { bottom: calc(4.8rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .res-leiste { transition: none; } }

/* ---------------------------------------------------------------- Verwalten */

.res-verwalten { display: grid; gap: 1.2rem; }
.res-erfolg strong { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.res-beleg .zierlinie { margin-bottom: .4rem; }
.res-beleg h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 1.1rem; }
.res-beleg__liste { list-style: none; margin: 0 0 1.3rem; padding: 0; border-top: 1px solid var(--rand); }
.res-beleg__liste li {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .65rem 0; border-bottom: 1px solid var(--rand);
}
.res-beleg__liste span { color: var(--braun-hell); }
.res-beleg__liste strong { color: var(--braun-dunkel); text-align: right; }
.res-beleg__knoepfe { display: grid; gap: .6rem; }
@media (min-width: 40rem) { .res-beleg__knoepfe { grid-template-columns: 1fr 1fr; } }
.res-status--storniert, .res-status--abgelehnt { color: #7B3319; }
.res-status--bestaetigt { color: #33501F; }

.res-karte--frage { border: 2px solid var(--gold); text-align: center; }
.res-karte--frage h2 { margin-bottom: .9rem; }
.res-karte--frage .knopfreihe { justify-content: center; }

.res-aendern summary {
  cursor: pointer; font-family: var(--schrift-titel); font-size: 1.15rem; color: var(--braun-dunkel);
  list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px;
}
.res-aendern summary::-webkit-details-marker { display: none; }
.res-aendern summary::after { content: "+"; font-size: 1.5rem; color: var(--gold); }
.res-aendern[open] summary::after { content: "–"; }
.res-aendern[open] summary { margin-bottom: 1rem; }
.res-aendern .res-schritt { padding: 1rem; }

.res-storno { text-align: center; margin: 0; color: var(--braun-hell); }

@media print {
  .res-leiste, .res-aendern, .res-storno, .res-beleg__knoepfe { display: none !important; }
}

/* Hinweis des Hauses oben auf der Seite (Team-Bereich > Texte) */
.res-hinweis { background: #FBF3E2; border-color: #E0C48C; color: var(--braun-dunkel); margin-bottom: 0; }

/* Gastkonto */
.res-konto-link { margin: .7rem 0 0; font-size: .9rem; color: var(--braun-hell); }
.res-konto { margin-top: .6rem; padding: .7rem .9rem; background: var(--creme-hell); border: 1px solid var(--rand); }
.res-konto .ankreuz { margin-top: 0; }
.res-konto__newsletter { margin-left: 1.9rem; font-size: .9rem; }
/* Neuigkeiten nur zeigen, wenn ein Konto angelegt wird (ohne :has bleibt es
   sichtbar; der Server beachtet es dann ohnehin nur zusammen mit dem Konto). */
.res-konto:not(:has([data-konto]:checked)) .res-konto__newsletter { display: none; }