/* Die Platzwahl: der gezeichnete Grundriss (Peak) und die Tischwahl.
   Tisch-Knöpfe nach 21st.dev „Seat Selection" (aria-pressed, frei/gewählt),
   Tag und Zeit nach „Appointment Picker Calendar". */

/* ------------------------------------------------------------ Grundriss -- */
/* Seitenverhältnis kommt aus grundriss.js (--gr-seite, --gr-b-zu-h). */
.grundriss { position: relative; aspect-ratio: var(--gr-seite); --zeichnen: 1;
  --linie: color-mix(in oklab, var(--sc-ink) 46%, transparent);
  --linie-leise: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  --tisch: #221B15; --tisch-rand: color-mix(in oklab, var(--bronze) 80%, transparent); }
.gr-zeichnung { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gr-zeichnung path { fill: none; stroke: var(--linie); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--zeichnen)); }
.gr-zeichnung .gr-wand { stroke-width: 3; }
.gr-zeichnung .gr-geist path { stroke: color-mix(in oklab, var(--sc-ink) 34%, transparent); stroke-width: 1; stroke-dasharray: none; fill: none; opacity: calc(1 - var(--zeichnen)); }
.gr-zeichnung .gr-glas { stroke: var(--sc-accent); stroke-width: 3; }
.gr-zeichnung .gr-trenn, .gr-zeichnung .gr-regal { stroke: var(--linie-leise); }
.gr-zeichnung .gr-tresen { fill: color-mix(in oklab, var(--sc-surface) calc(var(--zeichnen) * 100%), transparent); }
.gr-zeichnung .gr-leder { fill: color-mix(in oklab, var(--leder) calc(var(--zeichnen) * 70%), transparent); stroke: none; }
.gr-zeichnung .gr-violett { fill: color-mix(in oklab, var(--violett) calc(var(--zeichnen) * 70%), transparent); stroke: none; }
.gr-zeichnung .gr-marmor { stroke: #E6D6BA; stroke-width: 5; }
.gr-zeichnung .gr-aussen { stroke: var(--linie-leise); stroke-dasharray: none; opacity: var(--zeichnen); }
.gr-zeichnung .gr-segel { fill: color-mix(in oklab, var(--sc-ink) calc(var(--zeichnen) * 7%), transparent); stroke: var(--linie-leise); }
.gr-etikett { font-family: var(--sc-font-text); font-size: 17px; font-weight: 600; letter-spacing: .22em;
  text-anchor: middle; fill: var(--sc-ink-soft); opacity: var(--zeichnen); transition: fill 240ms var(--sc-ease-out); }
.gr-etikett--leise { font-size: 13px; fill: var(--linie); }
.gr-etikett.aktiv { fill: var(--sc-accent); }

.gr-tische { position: absolute; inset: 0; }
.tisch { position: absolute; padding: 0; margin: 0; background: var(--tisch);
  border: 1px solid var(--tisch-rand); color: inherit; font: inherit;
  opacity: calc(.25 + var(--zeichnen) * .75);
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.tisch--rund { border-radius: 50%; }
.tisch__lampe { position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 42% 38%, #4A3F31, #231C15 70%);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); }
/* Der Lichtkegel einer brennenden Lampe: eine eigene Ebene, damit er die
   Nachbartische überstrahlen darf. */
.tisch__lampe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7rem; height: 7rem;
  transform: translate(-50%, -50%) scale(.6); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(244,184,96,.34), rgba(244,184,96,.10) 42%, transparent 70%);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); }
.tisch.an .tisch__lampe, .tisch[aria-pressed="true"] .tisch__lampe {
  background: radial-gradient(circle at 48% 45%, #FFF7E0 0 16%, var(--glut) 42%, #A8621A 100%);
  border-color: transparent; }
.tisch.an .tisch__lampe::after, .tisch[aria-pressed="true"] .tisch__lampe::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tisch__schild { position: absolute; left: 50%; bottom: calc(100% + 4px); padding: .15rem .45rem;
  background: var(--sc-accent); color: var(--sc-accent-ink); font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 3;
  opacity: 0; transform: translate(-50%, -8px);
  transition: opacity 200ms var(--sc-ease-out), transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
.tisch[aria-pressed="true"] { border-color: var(--sc-accent); background: #3A2C1A; z-index: 2; }
.tisch[aria-pressed="true"] .tisch__schild { opacity: 1; transform: translate(-50%, 0); }

button.tisch { cursor: pointer; }
button.tisch::before { content: ""; position: absolute; inset: -7px; }
@media (hover: hover) and (pointer: fine) {
  button.tisch:hover { border-color: var(--sc-accent); }
}
button.tisch:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; z-index: 4; }
/* Gold auf Papier hat 1,8:1; im Tageslicht trägt der Fokusring die Tinte. */
.grundriss[data-tageszeit="tag"] button.tisch:focus-visible { outline-color: #1E1813; }
.grundriss[data-bereich-wahl] button.tisch:not([data-bereich-passt]) { opacity: .55; }

/* Tageslicht: vor 17 Uhr wird die Skizze hell, die Lampen bleiben aus. */
.grundriss[data-tageszeit="tag"] { background: #EFE7D6; --sc-ink: #1E1813; --sc-ink-soft: #5E5243;
  --linie: #3B3128; --linie-leise: #9C8E78; --tisch: #FBF6EC; --tisch-rand: #8A7A62;
  --leder: #C98C5A; --violett: #8E78A8; color: #1E1813; }
.grundriss[data-tageszeit="tag"] .gr-segel { fill: rgba(244, 196, 80, .38); }
.grundriss[data-tageszeit="tag"] .tisch__lampe { background: #E9DFCB; border-color: #B7A98F; }
.grundriss[data-tageszeit="tag"] .tisch[aria-pressed="true"] { background: #F6E3B4; }
.grundriss[data-tageszeit="tag"] .tisch[aria-pressed="true"] .tisch__lampe {
  background: radial-gradient(circle at 48% 45%, #FFFBEF 0 20%, #F2C45A 60%, #C98F1E 100%); }
.grundriss[data-tageszeit="tag"] .tisch__lampe::after { display: none; }
.grundriss { transition: background-color 420ms var(--sc-ease-out); }

/* --------------------------------------------------- 6 Führung (Peak) -- */
.fuehrung { background: #09080A; }
.fuehrung__buehne { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(2rem, 6vw, 6rem); padding: calc(var(--leiste-h) + 1rem) var(--sc-gutter) 2svh; }
.fuehrung__plan { height: min(82svh, 60rem); }
.fuehrung__seite { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); grid-template-rows: auto auto;
  gap: var(--sc-6); align-items: end; }
.fuehrung__frage { grid-column: 1 / -1; font-size: var(--sc-t-3xl); }
.fuehrung__bilder { position: relative; aspect-ratio: 3 / 4; }
/* Der Rahmen gehört zum Bild, damit vor dem ersten Bereich kein leerer Kasten steht. */
.fuehrung__bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border: 1px solid var(--faden); box-shadow: var(--sc-e2); }
.fuehrung__texte { display: grid; }
.fuehrung__texte > * { grid-area: 1 / 1; }
.bereichstext { margin: 0; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 26ch; }
.bereichstext strong { display: block; font-family: var(--sc-font-display); font-weight: 400;
  font-size: var(--sc-t-xl); color: var(--sc-ink); margin-bottom: .3rem; }

@media (max-width: 860px) {
  .fuehrung__buehne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start;
    gap: var(--sc-4); padding: calc(var(--leiste-h) + .5rem) var(--sc-gutter) 3svh; }
  .fuehrung__plan { height: min(52svh, 118vw); justify-self: center; }
  .fuehrung__seite { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sc-4); align-items: start; }
  .fuehrung__frage { font-size: var(--sc-t-xl); grid-row: 1; }
  .bereichstext { font-size: var(--sc-t-sm); }
  .bereichstext strong { font-size: var(--sc-t-lg); }
}

/* ------------------------------------------------------ 7 Ihr Tisch -- */
.buchung { background: var(--sc-surface); padding: var(--abschnitt) var(--sc-gutter); }
.buchung__kopf { max-width: 46rem; display: grid; gap: var(--sc-4); margin-bottom: var(--sc-6); }
.buchung__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start; max-width: var(--sc-maxw); }
.buchung__plan { position: sticky; top: calc(var(--leiste-h) + 1rem); }
.plan { width: min(100%, calc((100svh - var(--leiste-h) - 5rem) * var(--gr-b-zu-h))); margin-inline: auto;
  border: 1px solid var(--faden); background: #0E0B09; }
.plan__hinweis { margin: .6rem 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

.buchung__formular { display: grid; gap: var(--sc-5); }
.feld { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--sc-3); }
.feld legend, .eingabe > span { padding: 0; margin-bottom: var(--sc-3); font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sc-ink); }
.eingabe > span em { font-style: normal; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--sc-ink-soft); }
.feld--zwei { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sc-4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.chip { font: inherit; font-size: var(--sc-t-sm); min-height: 2.75rem; padding: .45rem .95rem; cursor: pointer;
  background: transparent; color: var(--sc-ink); border: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent);
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.chip small { display: block; font-size: .72rem; color: var(--sc-ink-soft); letter-spacing: .04em; }
.chip[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.chip[aria-pressed="true"] small { color: color-mix(in oklab, var(--sc-accent-ink) 75%, transparent); }
@media (hover: hover) and (pointer: fine) { .chip:not([aria-pressed="true"]):hover { border-color: var(--sc-accent); } }
.chip:active { transform: translateY(1px); }
.chips--tage .chip { min-width: 4.8rem; text-align: left; }
.zeiten { display: grid; gap: var(--sc-3); margin-top: var(--sc-2); }
.zeiten__gruppe { display: grid; gap: var(--sc-2); }
.zeiten__titel { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .08em; }
.zeiten .chip { min-width: 4.4rem; font-variant-numeric: tabular-nums; }

.zaehler { display: inline-flex; align-items: center; border: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent); justify-self: start; }
.zaehler__knopf { width: 3rem; height: 3rem; font: inherit; font-size: 1.3rem; background: transparent; color: var(--sc-ink); border: 0; cursor: pointer; }
.zaehler__knopf:hover { color: var(--sc-accent); }
.zaehler__knopf:disabled { opacity: .35; cursor: default; }
.zaehler__wert { min-width: 8.5rem; text-align: center; font-variant-numeric: tabular-nums; }

.eingabe { display: grid; }
.eingabe input { font: inherit; min-height: 3rem; padding: .5rem .8rem; color: var(--sc-ink);
  background: #100D0A; border: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent); border-radius: 0; caret-color: var(--sc-accent); }
.eingabe input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.eingabe input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 0; border-color: var(--sc-accent); }
.eingabe input[aria-invalid="true"] { border-color: var(--fehler); }

/* Das Tischschild in groß: die Zusammenfassung. */
.karte-reserviert { position: relative; display: grid; gap: .25rem; padding: 1.3rem 1.4rem 1.2rem;
  background: linear-gradient(180deg, #221A12, #17120D); border: 1px solid var(--sc-accent);
  box-shadow: inset 0 3px 0 color-mix(in oklab, var(--sc-accent) 35%, transparent), var(--sc-e2); }
.karte-reserviert__kopf { font-size: var(--sc-t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--sc-accent); }
.karte-reserviert__name { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); color: var(--sc-ink); }
.karte-reserviert__zeile { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.karte-reserviert.bereit .karte-reserviert__zeile { color: var(--sc-ink); }

.meldung { margin: 0; min-height: 1.4em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.meldung.fehler { color: var(--fehler); }
.meldung.gut { color: #8FD39A; }
.knoepfe--buchung { align-items: center; }

@media (max-width: 860px) {
  .buchung__raster { grid-template-columns: 1fr; }
  .buchung__plan { position: static; margin-inline: calc(-1 * var(--sc-gutter)); }
  .buchung__plan .plan { border-inline: 0; }
  .plan__hinweis { padding-inline: var(--sc-gutter); }
  .plan { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tisch__schild, .tisch__lampe::after, .grundriss { transition: none; }
}