/* Ergaenzung fuer das Buchungssystem. Baut auf stil.css auf. */

.schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau-leise);
  margin-bottom: 2rem;
}
.schritte span { display: flex; align-items: center; gap: 0.5rem; }
.schritte span::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.schritte .jetzt { color: var(--gruen); }
.schritte .jetzt::before { background: var(--gruen); border-color: var(--gruen); }
.schritte .fertig { color: var(--weiss); }
.schritte .fertig::before { background: var(--weiss); border-color: var(--weiss); }

/* --- Zeitfenster-Auswahl -------------------------------------------------- */

.tag { border: 1px solid var(--linie); background: var(--panel); margin-bottom: 1rem; }
.tag__kopf {
  display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1rem, 3vw, 1.6rem) 0.4rem;
}
.tag__wochentag {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--grau-leise);
}
.tag__datum { font-family: var(--serif); font-size: 1.7rem; line-height: 1; text-transform: uppercase; }
.tag__fenster {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  padding: 0.6rem clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.6rem);
}

.fenster {
  position: relative;
  display: block;
  border: 1px solid var(--linie-stark);
  padding: 1rem 1.1rem;
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s ease, background .15s ease;
}
.fenster input { position: absolute; opacity: 0; pointer-events: none; }
.fenster:hover { border-color: var(--grau); background: rgba(238,242,248,.04); }
.fenster:has(input:checked) {
  border-color: var(--gruen);
  background: rgba(123,216,143,.09);
  box-shadow: inset 0 0 0 1px var(--gruen);
}
.fenster:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 3px; }
.fenster:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.fenster:has(input:disabled):hover { border-color: var(--linie-stark); background: none; }

.fenster__zeit { display: block; font-family: var(--serif); font-size: 1.45rem; line-height: 1; }
.fenster__alter {
  display: block;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grau); margin-top: 0.4rem;
}
.fenster__frei {
  display: block;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  margin-top: 0.7rem; color: var(--gruen);
}
.fenster__frei.knapp { color: var(--blut-text); }
.fenster__frei.weg { color: var(--grau-leise); }

/* --- Anzahl --------------------------------------------------------------- */

.anzahl { display: flex; align-items: center; gap: 0.6rem; }
.anzahl select {
  width: auto; min-width: 7rem;
  padding: 0.8rem 0.9rem;
  background: var(--schwarz); color: var(--weiss);
  border: 1px solid var(--linie-stark); border-radius: 2px;
  font-family: var(--sans); font-size: 1rem;
}

/* --- Zusammenfassung ------------------------------------------------------ */

.merkzettel {
  border: 1px solid var(--linie-stark);
  background: linear-gradient(to bottom, rgba(123,216,143,.05), var(--panel));
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.merkzettel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; }
.merkzettel dt {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau-leise);
  align-self: center;
}
.merkzettel dd { margin: 0; font-size: 0.98rem; }

.uhr {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em;
  color: var(--blut-text); margin-top: 1rem;
}

/* --- Ticket --------------------------------------------------------------- */

.ticket {
  border: 1px solid var(--linie-stark);
  background: var(--panel);
  max-width: 32rem;
  margin-inline: auto;
  overflow: hidden;
}
.ticket__kopf {
  background: var(--blut); color: #fff;
  padding: 0.55rem 1rem; text-align: center;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.ticket__leib { padding: clamp(1.4rem, 4vw, 2.2rem); text-align: center; }
.ticket__code {
  font-family: var(--mono); font-size: clamp(1.3rem, 1.1rem + 1.4vw, 1.9rem);
  font-weight: 600; letter-spacing: 0.14em; color: var(--gruen);
  margin: 0.4rem 0 1.4rem; word-break: break-all;
}
.ticket__qr {
  width: 190px; height: 190px;
  margin: 0 auto 1.4rem;
  background: #fff; padding: 8px; border-radius: 3px;
}
.ticket__qr svg { width: 100%; height: 100%; display: block; }
.ticket__daten {
  border-top: 1px dashed var(--linie-stark);
  padding-top: 1.2rem; margin-top: 0.4rem;
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.1rem;
  text-align: left;
}
.ticket__daten dt {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau-leise);
}
.ticket__daten dd { margin: 0; font-size: 0.97rem; }

/* --- Backend -------------------------------------------------------------- */

.kennzahlen {
  display: grid; gap: 1px; background: var(--linie);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  border: 1px solid var(--linie); margin-bottom: 2rem;
}
.kennzahl { background: var(--panel); padding: 1.1rem 1.2rem; min-width: 0; }
.kennzahl dt {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--grau-leise);
  margin-bottom: 0.4rem;
}
.kennzahl dd { margin: 0; font-family: var(--serif); font-size: 1.8rem; line-height: 1; }

.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th, .tabelle td {
  text-align: left; padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
.tabelle th {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau-leise);
}
.tabelle td { color: var(--grau); }
.tabelle code { font-family: var(--mono); color: var(--weiss); }
.rollbar { overflow-x: auto; }

.abzeichen {
  display: inline-block; padding: 0.1rem 0.45rem;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px;
}
.abzeichen--bezahlt { background: var(--gruen-tief); color: var(--gruen); }
.abzeichen--eingeloest { background: rgba(238,242,248,.12); color: var(--weiss); }
.abzeichen--storniert { background: rgba(176,18,30,.22); color: var(--blut-text); }

.hinweisband {
  border: 1px solid rgba(224,24,36,.45);
  background: rgba(176,18,30,.12);
  padding: 0.85rem 1.1rem;
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.6;
  color: var(--weiss); margin-bottom: 1.5rem;
}
.hinweisband--gruen {
  border-color: rgba(123,216,143,.4);
  background: rgba(123,216,143,.09);
}

.reihe { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.reihe .feld { margin-bottom: 0; flex: 1 1 10rem; min-width: 0; }

@media print {
  .kopf, .fuss, .stoerung, .vignette, .laufband, .nicht-drucken { display: none !important; }
  body { background: #fff; color: #000; }
  .ticket { border-color: #000; background: #fff; }
  .ticket__code { color: #000; }
  .ticket__daten dd, .ticket__daten dt { color: #000; }
}

/* Zahlartwahl im Datenformular.
   Gebaut wie .fenster (Zeitfensterwahl), damit die Buchungsstrecke sich
   durchgehend gleich anfuehlt: ganze Flaeche klickbar, das echte
   Auswahlfeld liegt unsichtbar darunter und bleibt trotzdem bedienbar. */
.zahlwahl {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1px solid var(--linie-stark);
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.7rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.zahlwahl input {
  margin-top: 0.22rem;
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--gruen);
  flex: none;
}
.zahlwahl:hover { border-color: var(--grau); background: rgba(238,242,248,.04); }
.zahlwahl:has(input:checked) {
  border-color: var(--gruen);
  background: rgba(123,216,143,.09);
}
.zahlwahl:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 3px; }

.zahlwahl > span { display: block; min-width: 0; }
.zahlwahl strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--weiss);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.3rem;
}
/* --grau statt --grau-leise: der Text steht hier auf der eingefaerbten
   Auswahlflaeche, nicht auf dem Seitengrund - dort reisst das leisere Grau
   den Kontrast unter 4,5:1. */
.zahlwahl .klein { display: block; color: var(--grau); line-height: 1.5; }
.zahlwahl .klein strong { display: inline; color: var(--weiss); margin: 0; }

/* ===========================================================================
   Auswahlseite
   ===========================================================================
   Aufbau: Abend (.tag) -> Zeitfenster-Block (.block) -> Einlassfenster
   (.fenster2). Darunter das Panel mit Personenzahl und Zahlart, das sich
   fuellt, sobald ein Fenster gewaehlt ist.
   Grundsatz bei allen Rastern hier: minmax(min(X, 100%), 1fr). Ohne das
   min(...) sprengt ein Rasterkind auf schmalen Geraeten die Zeile, die Seite
   scrollt waagerecht und Safari zoomt die Schrift heraus. */

.buch__titel {
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4rem);
  line-height: 0.95;
  margin: 0.4rem 0 1.6rem;
}

/* --- Eckdaten ----------------------------------------------------------- */
.fakten {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  background: var(--linie);
  border: 1px solid var(--linie);
  margin: 0 0 2.2rem;
}
.fakten__punkt { background: var(--panel); padding: 0.95rem 1.1rem; }
.fakten dt {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--grau-leise);
  margin-bottom: 0.4rem;
}
.fakten dd { margin: 0; font-size: 0.95rem; line-height: 1.35; }
.fakten dd strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }
.fakten .klein { display: inline-block; margin-top: 0.15rem; }

/* --- Abend -------------------------------------------------------------- */
.tag__kopf { align-items: baseline; justify-content: space-between; }
.tag__wochentag {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--grau-leise);
  display: block;
}
.tag__datum {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem);
  line-height: 1; margin-top: 0.2rem; display: block; color: var(--weiss);
}

/* --- Zeitfenster-Block -------------------------------------------------- */
.block { border-top: 1px solid var(--linie); }
.block:first-of-type { border-top: 0; }
.block__kopf {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline;
  padding: 1rem clamp(1rem, 3vw, 1.6rem) 0;
}
.block__zeit {
  font-family: var(--serif); font-size: 1.05rem; color: var(--weiss);
  line-height: 1;
}
.block__alter {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grau);
}
.block__frei {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--gruen); margin-left: auto;
}
.block__frei.weg { color: var(--grau-leise); }

/* --- Einlassfenster ----------------------------------------------------- */
.fensterreihe {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(7rem, 100%), 1fr));
  padding: 0.75rem clamp(1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.5rem);
}

.fenster2 {
  position: relative; display: block; cursor: pointer; min-width: 0;
  padding: 0.7rem 0.5rem 0.6rem;
  border: 1px solid var(--linie-stark);
  text-align: center;
  transition: border-color .13s ease, background .13s ease, transform .13s ease;
}
.fenster2 input { position: absolute; opacity: 0; pointer-events: none; }
.fenster2__zeit {
  display: block; font-family: var(--serif); font-size: 1.35rem;
  line-height: 1; color: var(--weiss);
}
.fenster2__status {
  display: block; margin-top: 0.35rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grau);
}
.fenster2__status .knapp { color: var(--blut-text); font-weight: 600; }

.fenster2:hover { border-color: var(--grau); background: rgba(238,242,248,.04); }
.fenster2:has(input:checked) {
  border-color: var(--gruen);
  background: rgba(123,216,143,.10);
  box-shadow: inset 0 0 0 1px var(--gruen);
  transform: translateY(-1px);
}
.fenster2:has(input:checked) .fenster2__zeit { color: var(--gruen); }
.fenster2:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 3px; }

.fenster2--weg { opacity: .4; cursor: not-allowed; }
.fenster2--weg:hover { border-color: var(--linie-stark); background: none; }

/* --- Panel: Personenzahl und Zahlart ------------------------------------ */
/* Bewusst NICHT klebend: Das Panel ist rund 500 px hoch und damit hoeher als
   der freie Rand des Sichtfelds. position:sticky legt so ein Element ueber den
   Inhalt statt darunter - auf einem breiten Bildschirm lag es quer ueber der
   Terminliste. Es steht deshalb schlicht im Fluss; nach der Wahl eines
   Fensters scrollt das Skript hierher. */
.panel {
  margin-top: 1.8rem;
  border: 1px solid var(--linie-stark);
  background: var(--rauch);
}
/* Solange nichts gewaehlt ist, tritt das Panel zurueck - es soll die Liste
   nicht ueberstrahlen, bevor es etwas zu entscheiden gibt. */
.panel--ruht { opacity: .55; }
.panel--ruht .panel__fuss button { pointer-events: none; }

.panel__innen { padding: clamp(1rem, 2.6vw, 1.5rem); }
.panel__termin {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gruen);
  margin: 0 0 1rem; padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--linie);
}
.panel__block { margin-bottom: 1.2rem; }

.zahlen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.zahl { position: relative; cursor: pointer; }
.zahl input { position: absolute; opacity: 0; pointer-events: none; }
.zahl span {
  display: grid; place-items: center;
  /* 2.75rem = 44px: die uebliche Mindestgroesse fuer ein Ziel, das mit dem
     Daumen getroffen werden soll. Bei 40px verfehlt man den Nachbarn zu oft. */
  min-width: 2.75rem; height: 2.75rem; padding: 0 0.45rem;
  border: 1px solid var(--linie-stark);
  font-family: var(--serif); font-size: 1.05rem; color: var(--weiss);
  transition: border-color .12s ease, background .12s ease;
}
.zahl:hover span { border-color: var(--grau); }
.zahl:has(input:checked) span {
  border-color: var(--gruen); background: var(--gruen); color: var(--schwarz);
  font-weight: 700;
}
.zahl:has(input:focus-visible) span { outline: 2px solid var(--gruen); outline-offset: 2px; }
.zahl--weg { opacity: .3; cursor: not-allowed; }
.zahl--weg:hover span { border-color: var(--linie-stark); }

.wahlen {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.wahl {
  position: relative; display: flex; gap: 0.9rem; align-items: center;
  padding: 0.85rem 1rem; cursor: pointer;
  border: 1px solid var(--linie-stark);
  transition: border-color .13s ease, background .13s ease;
}
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl:hover { border-color: var(--grau); }
.wahl:has(input:checked) {
  border-color: var(--gruen); background: rgba(123,216,143,.09);
  box-shadow: inset 0 0 0 1px var(--gruen);
}
.wahl:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 3px; }
.wahl__text { flex: 1 1 auto; min-width: 0; }
.wahl__titel {
  display: block; font-family: var(--serif); font-size: 1.05rem;
  color: var(--weiss); line-height: 1.15;
}
.wahl__preis {
  display: block; margin-top: 0.15rem;
  font-family: var(--serif); font-size: 1.35rem; color: var(--weiss);
}
.wahl__preis i {
  font-style: normal; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau);
  margin-left: 0.4rem;
}
.wahl__erklaerung {
  display: block; margin-top: 0.2rem;
  font-family: var(--sans); font-size: 0.8rem; color: var(--grau);
}
/* Ersparnis-Marke: gruener Rahmen auf gruen eingefaerbter Flaeche geprueft,
   nicht nur gegen den Seitengrund - dort liegt der kritische Kontrastfall. */
.wahl__spar {
  flex: 0 0 auto; align-self: flex-start;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--gruen);
  border: 1px solid var(--gruen); padding: 0.2rem 0.45rem;
  white-space: nowrap;
}

.panel__fuss {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center;
  border-top: 1px solid var(--linie); padding-top: 1rem;
}
.panel__summe { flex: 1 1 8rem; }
.panel__summe .klein {
  display: block; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau-leise);
}
.panel__summe strong {
  font-family: var(--serif); font-size: 1.9rem; color: var(--weiss);
  line-height: 1.05;
}
.panel__fuss .knopf { flex: 0 1 14rem; }
.panel__hinweis { margin: 0.9rem 0 0; }

@media (max-width: 34rem) {
  .panel__fuss .knopf { flex: 1 1 100%; }
}

/* Auslastung je Fenster im Backend */
.slotleiste {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0 clamp(1rem, 3vw, 1.6rem) 0.2rem;
}
.slotleiste__slot {
  font-family: var(--mono); font-size: 0.6rem; line-height: 1.35;
  text-align: center; padding: 0.3rem 0.45rem;
  border: 1px solid var(--linie-stark); color: var(--grau);
  min-width: 5.2rem;
}
.slotleiste__slot.teils { border-color: var(--gruen); color: var(--weiss); }
.slotleiste__slot.voll {
  border-color: var(--blut); background: rgba(176,18,30,.16); color: var(--weiss);
}

/* Zustand der Stornofrist im Backend. Farbe ist nicht das einzige Merkmal -
   "bis ..." bzw. "abgelaufen" tragen die Aussage selbst. */
.frist-offen { color: var(--gruen); }
.frist-zu { color: var(--grau-leise); }

/* ===========================================================================
   Kopf der Auswahlseite: Motiv der Startseite, langsam in Bewegung
   ===========================================================================
   Das Bild ist dasselbe wie auf der Startseite und liegt beim Besucher meist
   schon im Cache - der Kopf kostet damit praktisch nichts. Bewegt wird nur
   per CSS (Drift des Bildes, wandernde Stoerlinie); bei
   prefers-reduced-motion steht beides still, das regelt stil.css global. */

.buchkopf {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linie);
  margin-bottom: 2rem;
  isolation: isolate;
}

.buchkopf__grund {
  position: absolute; inset: -6% -6% -6% -6%;
  z-index: -2;
  background-image:
    /* Der Verlauf liegt ueber dem Foto, nicht darunter: Ohne ihn faellt der
       Text stellenweise auf helle Bildbereiche und wird unlesbar - Lighthouse
       misst Kontrast nie gegen Bildinhalte. */
    linear-gradient(180deg, rgba(5,6,10,.78) 0%, rgba(5,6,10,.88) 55%, rgba(5,6,10,.96) 100%),
    image-set(url("/bilder/labor-gang-1400.webp") 1x,
              url("/bilder/labor-gang-2200.webp") 2x);
  background-size: cover;
  background-position: center 40%;
  animation: buchkopf-drift 38s ease-in-out infinite alternate;
}
@keyframes buchkopf-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1.2%, 0); }
}

/* Wandernde Stoerlinie - der Laborausweis-Look der Startseite */
.buchkopf__scan {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%, rgba(123,216,143,.055) 48%,
    rgba(123,216,143,.10) 50%, rgba(123,216,143,.055) 52%, transparent 100%);
  background-size: 100% 220%;
  animation: buchkopf-scan 7.5s linear infinite;
}
@keyframes buchkopf-scan {
  from { background-position: 0 -110%; }
  to   { background-position: 0 210%; }
}

.buchkopf__inhalt {
  position: relative;
  padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1.1rem, 4vw, 2.6rem);
}
.buchkopf__zeile {
  margin: 0.9rem 0 0;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--grau);
}
.buchkopf__zeile strong { color: var(--weiss); font-size: 1.05rem; }

/* --- Anfrage groesserer Gruppen ---------------------------------------- */
.gruppe {
  margin-top: 3rem; padding-top: 2.2rem;
  border-top: 1px solid var(--linie);
}
.gruppe__titel {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.05; margin: 0.3rem 0 0.9rem;
}

/* Sprungziel aus der Terminliste nicht unter die Kopfleiste rutschen lassen */
.tag[id] { scroll-margin-top: 5.5rem; }