/* ====== RESERVATION / CALENDAR ====== */

.reserve-section {
  padding: 140px 0 120px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(255,182,39,0.08), transparent 65%),
    radial-gradient(ellipse 50% 50% at 10% 100%, rgba(91,216,255,0.07), transparent 65%),
    var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.reserve-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
}

.reserve-section .wrap { position: relative; z-index: 2; }

.reserve-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 56px;
}
.reserve-head .h-section em {
  font-style: normal;
  background: linear-gradient(180deg, var(--accent-3) 0%, #ffba00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reserve-head .h-section span.b {
  color: var(--accent-2);
}

.reserve-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.reserve-stats > div { min-width: 0; }
.rs-stat-num {
  font-family: var(--display);
  font-weight: 800;
  /* Fest 32px liess "14 Tage" auf dem Handy zweizeilig umbrechen und riss die
     drei Spalten unterschiedlich hoch. Jetzt skaliert die Zahl mit und bleibt
     einzeilig. */
  font-size: clamp(19px, 5.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}
.rs-stat-num.y { color: var(--accent-3); }
.rs-stat-num.b { color: var(--accent-2); }
.rs-stat-num.p { color: var(--accent); }
.rs-stat-lbl {
  font-family: var(--mono);
  font-size: clamp(9px, 2.4vw, 11px);
  color: var(--ink-3); letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-top: 8px;
}

.reserve-card {
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(255,31,182,0.08), transparent 55%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(91,216,255,0.07), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255,182,39,0.06), transparent 60%),
    linear-gradient(180deg, rgba(20,22,56,0.85) 0%, rgba(28,22,56,0.85) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Step rail — drei Schritte statt vier (Datum und Uhrzeit liegen zusammen) */
.reserve-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(90deg,
      rgba(255,182,39,0.04) 0%,
      rgba(255,31,182,0.04) 33%,
      rgba(91,216,255,0.04) 66%,
      rgba(47,125,255,0.04) 100%);
}
.rr-step {
  position: relative;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  border-top: 0; border-bottom: 0; border-left: 0;
  font-family: inherit;
  text-align: left;
  color: var(--ink-3);
  transition: color .2s, background .2s;
  width: 100%;
  /* Grid-Items haben von Haus aus min-width:auto. Weil .rr-step-v nicht umbricht,
     lag die min-content-Breite eines Schritts bei rund 300px - die Spalte konnte
     also nicht schmaler werden und der Button lief unter 360px aus der Karte
     heraus (von .reserve-card abgeschnitten). Mit min-width:0 darf er schrumpfen,
     der Text kuerzt sich dann per Ellipse. */
  min-width: 0;
}
.rr-step:last-child { border-right: 0; }
.rr-step:disabled { cursor: not-allowed; opacity: 0.4; }
.rr-step.done { color: var(--ink-2); }
.rr-step.active {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,182,39,0.1), rgba(255,182,39,0.02));
}
.rr-step.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-3);
}
.rr-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  flex-shrink: 0;
  transition: all .2s;
}
.rr-step.active .rr-step-num {
  background: var(--accent-3); color: var(--on-accent); border-color: var(--accent-3);
  box-shadow: 0 0 0 4px rgba(255,182,39,0.18);
}
.rr-step.done .rr-step-num {
  background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2);
}
.rr-step-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rr-step-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; opacity: .6; }
.rr-step-v {
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Kurzform, nur in der kompakten Handy-Leiste sichtbar */
.rr-step-s { display: none; }

/* Body */
.reserve-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 540px;
}
.reserve-pane {
  padding: 36px 40px;
  position: relative;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.reserve-pane-h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 24px;
}
.reserve-pane-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.reserve-pane-sub {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--ink-3);
  text-transform: uppercase;
}

/* Combo savings hint */
.combo-hint {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,182,39,0.10), rgba(255,182,39,0.04));
  border: 1px solid rgba(255,182,39,0.30);
  position: relative;
  overflow: hidden;
  animation: ch-slide .35s cubic-bezier(.34,1.56,.64,1);
}
.combo-hint.is-active {
  background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(74,222,128,0.04));
  border-color: rgba(74,222,128,0.35);
}
.combo-hint.is-max {
  background: linear-gradient(135deg, rgba(255,31,182,0.14), rgba(255,31,182,0.06));
  border-color: rgba(255,31,182,0.40);
}
@keyframes ch-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ch-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,182,39,0.18);
  color: var(--accent-3);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.is-active .ch-icon { background: rgba(74,222,128,0.18); color: var(--accent-5); }
.is-max .ch-icon { background: rgba(255,31,182,0.22); color: var(--accent); animation: ch-pulse 1.5s ease-in-out infinite; }
@keyframes ch-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,31,182,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(255,31,182,0); }
}
.ch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-text strong { color: var(--ink); font-weight: 700; font-family: var(--display); font-size: 15px; }
.ch-text > span { font-size: 13px; color: var(--ink-3); }
.ch-text em { color: var(--accent-3); font-style: normal; font-weight: 600; }
.is-active .ch-text em { color: var(--accent-5); }
.is-max .ch-text em { color: var(--accent); }
.ch-meter { display: flex; gap: 4px; flex-shrink: 0; }
.chm-pip {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.chm-pip.filled { background: var(--accent-3); border-color: var(--accent-3); box-shadow: 0 0 6px var(--accent-3); }
.is-active .chm-pip.filled { background: var(--accent-5); border-color: var(--accent-5); box-shadow: 0 0 6px var(--accent-5); }
.is-max .chm-pip.filled { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 6px var(--accent); }
.chm-pip.next { border-color: var(--accent-3); background: rgba(255,182,39,0.18); animation: ch-blink 1.4s ease-in-out infinite; }
.is-active .chm-pip.next { border-color: var(--accent-5); background: rgba(74,222,128,0.18); }
@keyframes ch-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (max-width: 700px) {
  .combo-hint { grid-template-columns: auto 1fr; }
  .ch-meter { grid-column: 1 / -1; justify-content: center; padding-top: 4px; }
}

/* AREA chips inside reservation */
.rr-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.rr-area {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer; text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color .2s, background .2s, transform .15s;
  overflow: hidden;
}
.rr-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 0% 50%, var(--c), transparent 60%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.rr-area:hover {
  border-color: var(--c);
  transform: translateY(-1px);
}
.rr-area:hover::before { opacity: 0.12; }
/* Interactive Arena und Arcade Station: sichtbar, damit niemand sie fuer
   nicht vorhanden haelt, aber ohne Klick - gekauft wird an der Kasse. */
.rr-area.vorort {
  cursor: default;
  opacity: 0.62;
  border-style: dashed;
}
.rr-area.vorort:hover { border-color: rgba(255,255,255,0.1); transform: none; }
.rr-area.vorort:hover::before { opacity: 0; }
.rrap-vorort {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.rr-area.sel {
  border-color: var(--c);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 0 0 1px var(--c) inset, 0 14px 32px -10px var(--c);
}
.rr-area.sel::before { opacity: 0.18; }
.rr-area > * { position: relative; z-index: 1; }
.rr-area-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--c);
  background-size: cover; background-position: center;
  position: relative; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.rr-area-thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
}
.rr-area-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rr-area-name {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.15;
  /* Die Spalte traegt `min-width: 0` und darf deshalb schmaler werden als ihr
     Inhalt. Ohne das hier malt ein zu langes Wort einfach ueber den Nachbarn,
     statt umzubrechen - genau das war der Fehler in der Drei-Spalten-Ansicht. */
  overflow-wrap: break-word;
}
.rr-area-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.rr-area-meta .c {
  color: var(--c);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.rr-area-note {
  display: block;
  margin-top: 4px;
  font-family: var(--display);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--accent-2);
}
.rr-area-price {
  display: flex; flex-direction: column; align-items: flex-end;
  /* "ab 14,90 €" ist EIN Betrag — zwischen Zahl und Euro darf nie umbrochen
     werden. Ohne das landete das € allein auf der naechsten Zeile. */
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--c);
  line-height: 1;
  flex-shrink: 0;
  margin-right: 8px;
}
.rrap-pp {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 4px;
}

/* PRICING in sidebar */
.rs-pricing {
  margin-top: 14px;
  padding: 16px 18px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.rsp-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.rsp-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.rsp-disc {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent-5);
  background: rgba(74,222,128,0.14);
  border: 1px solid rgba(74,222,128,0.32);
  padding: 3px 8px;
  border-radius: 999px;
}
.rsp-list {
  display: flex; flex-direction: column;
}
.rsp-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.rsp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rsp-name {
  color: var(--ink-2);
  /* Area-Namen in der Preisliste sind der Beleg dafuer, wofuer man zahlt -
     "Interactive Area" darf nicht als "Interactive A…" enden. Lieber umbrechen. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.rsp-amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}
.rsp-savings {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-5);
}
.rsps-num { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.rsp-divider {
  height: 1px; background: var(--line);
  margin: 12px 0 10px;
}
.rsp-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-2);
}
.rsp-line .rsp-l {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3);
}
.rsp-line .rsp-v {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
.rsp-line strong {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rsp-line.rsp-total .rsp-v {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.rr-area-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--ink-3);
  flex-shrink: 0;
  font-weight: 700; font-size: 13px;
  transition: all .2s;
}
.rr-area.sel .rr-area-check {
  background: var(--c); color: var(--on-accent); border-color: var(--c);
}

/* CALENDAR */
.cal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.cal-month {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 12px;
}
.cal-month-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 10px var(--accent-3); }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: all .15s;
}
.cal-nav button:hover {
  background: var(--accent-3); color: var(--on-accent); border-color: var(--accent-3);
}
.cal-nav button:disabled {
  opacity: 0.3; cursor: not-allowed;
}
.cal-nav button:disabled:hover {
  background: var(--bg-2); color: var(--ink-2); border-color: var(--line);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-3);
  text-align: center;
  padding: 6px 0 12px;
}
.cal-cell {
  aspect-ratio: 1;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.018);
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all .15s;
  color: var(--ink-2);
}
.cal-cell:hover:not(:disabled):not(.empty) {
  background: var(--bg-2);
  border-color: var(--line-2);
}
.cal-cell.empty { cursor: default; background: transparent; }
.cal-cell.past, .cal-cell:disabled {
  color: var(--ink-4);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
}
.cal-cell.past:hover, .cal-cell:disabled:hover {
  background: rgba(255,255,255,0.018);
  border-color: transparent;
}
.cal-cell.today {
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.cal-cell.today::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  margin-top: 3px;
}
.cal-cell.sel {
  background: var(--accent-3);
  color: var(--on-accent);
  border-color: var(--accent-3);
  box-shadow: 0 0 0 1px var(--accent-3), 0 8px 24px -8px var(--accent-3);
  font-weight: 800;
}
.cal-cell.sel.today { color: var(--on-accent); }
.cal-cell.sel.today::after {
  background: #000; box-shadow: none;
}
.cal-avail-dot {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
}
.cal-avail-dot.full { background: var(--danger); }
.cal-avail-dot.med { background: var(--accent-3); }
.cal-avail-dot.low { background: var(--accent-2); }
.cal-cell.sel .cal-avail-dot { display: none; }

.cal-legend {
  display: flex; gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  flex-wrap: wrap;
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.cal-legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.cal-legend-dot.low { background: var(--accent-2); }
.cal-legend-dot.med { background: var(--accent-3); }
.cal-legend-dot.full { background: var(--danger); }

/* TIME slots */
.slots-wrap {
  display: flex; flex-direction: column; gap: 10px;
}
.slot-block {
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 14px;
  padding: 16px 18px;
}
.slot-block-h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.slot-block-l {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.slot-block-icon {
  width: 14px; height: 14px;
  display: inline-block;
}
.slot-block.morning .slot-block-l { color: var(--accent-3); }
.slot-block.afternoon .slot-block-l { color: var(--accent); }
.slot-block.evening .slot-block-l { color: var(--accent-2); }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.slot-pill {
  position: relative;
  padding: 10px 8px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.slot-pill:hover:not(:disabled) {
  border-color: var(--accent-3);
  transform: translateY(-1px);
}
.slot-pill.sel {
  background: var(--accent-3); color: var(--on-accent); border-color: var(--accent-3);
  box-shadow: 0 6px 16px -4px var(--accent-3);
}
.slot-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.slot-cap {
  position: absolute; top: 4px; right: 6px;
  font-size: 8px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.slot-pill.sel .slot-cap { color: rgba(0,0,0,0.6); }

/* PEOPLE / SUMMARY pane (right) */
.reserve-side {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(91,216,255,0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255,31,182,0.06), transparent 60%),
    rgba(255,255,255,0.018);
}

.rs-section-title {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--ink-3);
  text-transform: uppercase;
}

.rs-people {
  display: flex; flex-direction: column; gap: 8px;
}
.rs-person {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.rs-person-l-line {
  font-family: var(--display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.01em;
}
.rs-person-l-sub {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); margin-top: 2px;
}
.rs-stepper {
  display: flex; align-items: center; gap: 10px;
}
.rs-stepper button {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  font-size: 16px; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.rs-stepper button:hover:not(:disabled) {
  background: var(--accent-3); color: var(--on-accent); border-color: var(--accent-3);
}
.rs-stepper button:disabled {
  opacity: 0.3; cursor: not-allowed;
}
.rs-stepper-v {
  min-width: 22px; text-align: center;
  font-weight: 700; font-size: 18px;
  font-variant-numeric: tabular-nums;
}

/* Zusammenfassung rechts: die drei Kacheln standen ohne Abstand aufeinander,
   dadurch verschmolzen ihre Rahmen zu einem Block. Abstand ueber den Container,
   nicht ueber Aussenabstaende an den Kacheln - sonst faellt der letzte Abstand
   unten wieder heraus. */
.rs-summary {
  display: grid;
  gap: 10px;
}
.rs-summary .rs-section-title { margin-bottom: 2px; }

/* Selected summary cards */
.rs-tile {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255,182,39,0.06), rgba(255,182,39,0.0));
  border: 1px solid rgba(255,182,39,0.25);
  border-radius: 14px;
  display: flex; align-items: center; gap: 14px;
}
.rs-tile.b {
  background: linear-gradient(180deg, rgba(91,216,255,0.06), rgba(91,216,255,0.0));
  border-color: rgba(91,216,255,0.25);
}
.rs-tile.p {
  background: linear-gradient(180deg, rgba(255,31,182,0.06), rgba(255,31,182,0.0));
  border-color: rgba(255,31,182,0.25);
}
.rs-tile-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-3); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rs-tile.b .rs-tile-icon { background: var(--accent-2); }
.rs-tile.p .rs-tile-icon { background: var(--accent); }
.rs-tile-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: var(--ink-3); text-transform: uppercase; }
.rs-tile-v { font-family: var(--display); font-weight: 700; font-size: 16px; margin-top: 2px; letter-spacing: -0.01em; }
.rs-tile-empty .rs-tile-v { color: var(--ink-4); font-weight: 500; font-style: italic; }

.rs-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.rs-paynote {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(91,216,255,0.06);
  border: 1px solid rgba(91,216,255,0.25);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.rs-paynote-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-2); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}
.rs-paynote b { color: var(--ink); }

/* ---------------------------------------------------------------------------
   AKTIONSLEISTE (Zurück · Kurzstatus · Weiter)
   Auf Desktop einfach der Fuß der Seitenspalte. Auf dem Handy per Portal im
   <body> und fest am unteren Bildschirmrand - vorher lag der Weiter-Button
   rund 1190px unter dem Kartenanfang, weil die Zusammenfassung dazwischenstand.
   --------------------------------------------------------------------------- */
.rs-actionbar { display: flex; flex-direction: column; gap: 10px; }
.rs-ab-row { display: flex; gap: 10px; align-items: stretch; }
.rs-ab-sum { display: none; }
.rs-ab-note {
  padding: 10px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.4;
}
.rs-ab-note.is-error { background: rgba(229,72,77,.12); border: 1px solid rgba(229,72,77,.4); color: var(--accent-6); }
.rs-ab-note.is-ok { background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.4); color: var(--ink); }
.rs-ab-note.is-wait {
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.45);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.rs-ab-note.is-wait button {
  padding: 9px 14px; border-radius: 10px; border: 0;
  background: #f59e0b; color: #3a2600; font-weight: 700;
  cursor: pointer; font-family: inherit;
}

.rs-actionbar.is-fixed {
  /* über dem Vollbild-Screen (z-index 80), sonst verschwindet sie darunter */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  background: rgba(12,14,38,0.95);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 34px -18px rgba(0,0,0,0.9);
}
/* Der Kurzstatus ersetzt auf dem Handy die weggefallenen Kacheln: er sagt
   jederzeit, was gewählt ist und was es kostet. */
.rs-actionbar.is-fixed .rs-ab-sum {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; flex: 1;
}
.rs-ab-sum-l {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.rs-ab-sum-v {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-actionbar.is-fixed .rs-cta-next { flex: 0 0 auto; padding: 14px 20px; font-size: 14.5px; }
.rs-actionbar.is-fixed .rs-cta-back { flex: 0 0 auto; padding: 14px 15px; }
.rs-actionbar.is-fixed .rs-back-t { display: none; }
/* Platz für die Leiste, damit sie nichts verdeckt, sobald man im Bereich ist.
   Der FAB bleibt sichtbar: er und die Aktionsleiste lösen einander ab (siehe
   inView in Reserve.jsx), es ist also immer nur eines von beidem unten. */
@media (max-width: 1080px) {
  .reserve-section { padding-bottom: 130px; }
}

.rs-cta {
  display: flex; gap: 10px;
}
.rs-cta button,
.rs-ab-row button {
  flex: 1;
  padding: 16px 22px;
  border-radius: 12px;
  font-family: inherit; font-weight: 700; font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform .12s, opacity .15s, background .2s;
}
.rs-cta-back {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  flex: 0 0 auto;
  padding-left: 18px; padding-right: 18px;
}
.rs-cta-back:hover { background: var(--bg-3); }
.rs-cta-next {
  background: var(--accent-3);
  color: var(--on-accent);
  border: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative; overflow: hidden;
}
.rs-cta-next:hover:not(:disabled) {
  background: #ffe34a;
}
.rs-cta-next:disabled {
  background: var(--bg-3); color: var(--ink-3); cursor: not-allowed;
}
.rs-cta-next .arrow {
  width: 22px; height: 22px;
  background: #000; color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* ---------------------------------------------------------------------------
   VOLLBILD-VARIANTE (?buchen=vollbild)
   --------------------------------------------------------------------------- */
.rs-teaser {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: linear-gradient(135deg, rgba(255,182,39,0.10), rgba(255,31,182,0.06));
  color: var(--ink); font-family: inherit; cursor: pointer;
}
.rs-teaser-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  position: absolute; transform: translateY(-16px);
}
.rs-teaser { position: relative; padding-top: 30px; }
.rs-teaser-v { font-family: var(--display); font-weight: 700; font-size: 18px; flex: 1; }
.rs-teaser-a {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-3); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}

.rs-sheet {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.rs-sheet-head {
  position: relative; flex-shrink: 0;
  padding: 12px 14px 0;
  background: rgba(12,14,38,0.96);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.rs-sheet-x {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.04);
  color: var(--ink); font-size: 15px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rs-sheet-step {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
  padding-bottom: 12px;
}
.rs-sheet-x { margin-bottom: 12px; }
.rs-sheet-bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--line);
}
.rs-sheet-bar span {
  display: block; height: 100%;
  background: var(--accent-3);
  transition: width .35s cubic-bezier(.2,.9,.3,1);
}
.rs-sheet-body {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px 130px;
}
/* Im Vollbild trägt der Screen selbst den Rahmen - die Karte darin braucht
   keinen zweiten. */
.rs-sheet-body .reserve-card {
  border: 0; border-radius: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.rs-sheet-body .reserve-rail { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.rs-sheet-body .reserve-pane { padding: 20px 2px 0; border: 0; }
.rs-sheet-body .reserve-side { padding: 0 2px; }
.reserve-section.is-teaser { padding-bottom: 90px; }

/* ---------------------------------------------------------------------------
   EINKLAPPBARE OPTIONEN (Notiz, Extras, Gutschein-Code)
   --------------------------------------------------------------------------- */
.rs-collapse {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.rs-collapse-h {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink); font-family: inherit; text-align: left;
}
.rs-collapse-l {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.rs-collapse-hint {
  font-family: var(--display); font-size: 12.5px; color: var(--ink-3);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-collapse-x {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--mono); font-size: 18px; line-height: 1; color: var(--accent-2);
}
.rs-collapse.is-open { background: rgba(255,255,255,0.035); }
.rs-collapse-b { padding: 0 14px 14px; }
.rs-note-ta { width: 100%; }

/* CONFIRM / DETAILS */
.rs-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rs-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-form label.full { grid-column: 1 / -1; }
.rs-form input, .rs-form textarea {
  font-family: var(--display); font-size: 15px;
  font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.rs-form input:focus, .rs-form textarea:focus {
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px rgba(255,182,39,0.15);
}
.rs-form textarea { min-height: 80px; resize: vertical; }
.rs-form .rs-agb {
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink-2) !important;
  cursor: pointer;
  font-family: var(--display) !important;
  line-height: 1.4;
}
.rs-form .rs-agb input { width: auto; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent-3); }

/* DONE / SUCCESS state */
.rs-done {
  position: relative;
  padding: 56px 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 20px;
}
.rs-done-icon {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--accent-3);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  box-shadow:
    0 0 0 8px rgba(255,182,39,0.15),
    0 20px 50px -10px var(--accent-3);
  animation: rsPop .5s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes rsPop { from { transform: scale(0.4); opacity: 0; } }
.rs-done h3 {
  font-family: var(--display); font-weight: 800;
  font-size: 44px; letter-spacing: -0.025em;
  margin: 0;
}
.rs-done h3 em { font-style: normal; color: var(--accent-3); }
.rs-done p {
  color: var(--ink-2); margin: 0; max-width: 480px;
  font-size: 15px; line-height: 1.55;
}
.rs-done-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 540px;
  margin-top: 16px;
}
.rs-done-row {
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  display: flex; flex-direction: column; gap: 4px;
}
.rs-done-row.full { grid-column: 1 / -1; }
.rs-done-row .l {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--ink-3);
  text-transform: uppercase;
}
.rs-done-row .v {
  font-family: var(--display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.01em;
}
.rs-done-code {
  margin-top: 10px;
  padding: 14px 22px;
  background:
    repeating-linear-gradient(45deg, rgba(255,182,39,0.06), rgba(255,182,39,0.06) 8px, transparent 8px, transparent 16px),
    var(--bg-2);
  border: 1px dashed var(--accent-3);
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent-3);
}

/* Floating reserve button */
/* Der schwebende Buchen-Knopf — gelb, wie vorher.
   Die Schrift ist ein tiefes Magenta. Das reine Marken-Magenta kommt auf Gelb nur
   auf 1,96:1 und waere unlesbar — dieser Ton ist die hellste Abstufung, die 4,5:1
   noch schafft, und liest sich weiterhin als Magenta.

   Der dunkle Rahmen ist raus: Er sass direkt auf der Flaeche und liess sie hart
   wirken. Und der Schein liegt jetzt nur noch unter dem Knopf statt als Ring um
   ihn herum — gelber Schimmer auf dunkelblauem Grund ergibt Oliv, und genau das
   war der schlammige Rand. */
/* Ablage fuer den mitlaufenden Knopf: mittig unten, mit Statue und Ranger
   dahinter. Frueher sass der Knopf allein unten rechts. */
.fab-dock {
  position: fixed;
  /* Ueber die ganze Breite statt `left: 50%` mit Versatz. Bei `left: 50%` blieben
     dem Kasten nur die Pixel rechts davon - auf einem 390px-Display also 195px.
     Der Knopf wurde darin zweizeilig umgebrochen ("Jetzt / buchen"). Volle
     Breite plus `justify-content: center` zentriert genauso, ohne zu klemmen. */
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;          /* die Deko darf keine Klicks abfangen */
}
/* Die Figuren werden fest gesetzt statt in eine Flex-Reihe gelegt. Grund: die
   Bilder tragen unterschiedlich viel durchsichtigen Rand, in der Reihe entstanden
   dadurch Loecher zwischen den Figuren. Mit festen Abstaenden zur Mitte stehen
   sie dicht beieinander und ueberlappen sich leicht - eine Gruppe statt einer
   Reihe. Basis ist die Mitte (left/right: 50%), damit alles gespiegelt bleibt. */
.fab-dock-art {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: clamp(360px, 42vw, 560px);
  height: clamp(140px, 20vh, 215px);
  z-index: 0;
}
.fab-dock-statue {
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto; display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.7));
}
.fab-dock-fig {
  position: absolute;
  bottom: -2px;
  height: 74%; width: auto; display: block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.6));
}
/* Innen: sie ueberschneiden die Statue, sonst klaffen Luecken. */
.fab-dock-fig.l { right: 50%; margin-right: 16px; }
.fab-dock-fig.r { left: 50%;  margin-left: 16px; }
/* Aussen: eine Stufe kleiner und blasser, aber so dicht, dass sie die inneren
   ueberlappen - eine Gruppe, keine Reihe mit Abstaenden. */
.fab-dock-fig.aussen { height: 58%; opacity: 0.78; }
/* Gespiegelt, damit die beiden aeusseren einander zugewandt sind. */
.fab-dock-fig.aussen.l { right: 50%; margin-right: 78px; transform: scaleX(-1); }
.fab-dock-fig.aussen.r { left: 50%;  margin-left: 78px; }

.fab-reserve {
  position: relative;            /* liegt in der Ablage, nicht mehr selbst fixiert */
  z-index: 1;
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 15px;
  /* Groesser und breiter: er steht vor der Ranger-Aufstellung und muss sich
     gegen ein volles Bild behaupten, nicht gegen leere Flaeche. */
  padding: 20px 46px;
  background: linear-gradient(135deg, var(--accent-3) 0%, #ffa60a 100%);
  color: var(--on-yellow);
  border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 17.5px;
  letter-spacing: -0.005em;
  border: 0;
  cursor: pointer;
  box-shadow: 0 16px 34px -12px rgba(255,182,39,0.7);
  transition: transform .15s, box-shadow .25s;
}
.fab-reserve:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -12px rgba(255,182,39,0.85);
}
/* Punkt und Pulsring in Gelb: ein warmer Punkt auf der magenta Flaeche haelt die
   dritte Markenfarbe im Spiel, ohne dass sie den Knopf beherrscht. */
.fab-reserve-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--on-yellow);
  position: relative;
}
.fab-reserve-pulse::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--on-yellow);
  animation: fabPing 1.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes fabPing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
/* Der Pfeilkreis war eine schwarze Scheibe auf Gelb — der dunkelste Fleck des
   ganzen Knopfes. Jetzt eine helle, halbdurchsichtige Scheibe: sie hebt sich ab,
   ohne ein Loch in die Flaeche zu reissen. */
/* Der Pfeilkreis war eine schwarze Scheibe — der dunkelste Fleck des Knopfes.
   Jetzt dieselbe Blau-Familie wie die Schrift, nur als leichte Tönung. */
.fab-reserve-arrow {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(148,0,95,0.16);
  color: var(--on-yellow);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* responsive */
@media (max-width: 1080px) {
  .reserve-head { grid-template-columns: 1fr; gap: 32px; }
  .reserve-body { grid-template-columns: 1fr; }
  .reserve-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .rr-area-grid { grid-template-columns: 1fr; }
  /* Drei Schritte passen auch auf mittleren Breiten noch nebeneinander. */
  .reserve-rail { grid-template-columns: repeat(3, 1fr); }
}
/* ---------------------------------------------------------------------------
   HANDY: der Buchungs-Flow war hier deutlich zu lang. Die Schrittleiste stand
   als vier volle Zeilen (rund 280px) vor dem eigentlichen Inhalt, und jede
   Area-Karte lief wegen der schmalen Textspalte ueber acht Zeilen. Beides wird
   ab hier auf eine kompakte Form umgestellt: Leiste einzeilig mit vier
   Nummern-Chips, Karten mit begrenzter Hinweiszeile und engeren Abstaenden.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* Kacheln raus: dieselben Werte stehen in der Schrittleiste oben und im
     Kurzstatus der Fußleiste. Sie kosteten auf jedem Schritt rund 370px. */
  .rs-summary { display: none; }
  .reserve-side { padding-top: 0; }
}
@media (max-width: 700px) {
  .reserve-section { padding: 80px 0 130px; }
  .reserve-head { gap: 24px; margin-bottom: 32px; }
  .reserve-stats { gap: 12px; padding-top: 18px; }
  .reserve-pane, .reserve-side { padding: 18px 16px; }
  .reserve-body { min-height: 0; }
  .reserve-pane-h { margin-bottom: 16px; }
  .reserve-pane-title { font-size: 19px; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .rs-form { grid-template-columns: 1fr; }
  .rs-done-summary { grid-template-columns: 1fr; }

  /* Kompakte Schrittleiste: drei Spalten nebeneinander statt drei Zeilen */
  .reserve-rail { grid-template-columns: repeat(3, 1fr); }
  .rr-step {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 6px;
    padding: 12px 4px 11px;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 0;
  }
  .rr-step:last-child { border-right: 0 !important; }
  /* haengt sonst aus der 2-Spalten-Regel oben (max-width: 1080px) nach */
  .rr-step:nth-child(1), .rr-step:nth-child(2) { border-bottom: 0; }
  .rr-step-num { width: 28px; height: 28px; font-size: 11px; }
  .rr-step.active .rr-step-num { box-shadow: 0 0 0 3px rgba(255,182,39,0.18); }
  .rr-step-meta { align-items: center; width: 100%; }
  .rr-step-l, .rr-step-v { display: none; }
  .rr-step-s {
    display: block;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Kompakte Area-Karten */
  .rr-area { padding: 11px; gap: 11px; border-radius: 12px; }
  .rr-area-thumb { width: 46px; height: 46px; border-radius: 10px; }
  .rr-area-info { gap: 3px; }
  .rr-area-name { font-size: 14px; }
  .rr-area-meta { font-size: 10px; letter-spacing: 0; gap: 5px; }
  /* Kein line-clamp: der Hinweis ("Zutritt jederzeit moeglich") ist eine
     Information, die der Gast braucht - abgeschnitten waere sie wertlos.
     Die Laenge faengt stattdessen die engere Typo ab. */
  .rr-area-note {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 2px;
  }
  .rr-area-price { font-size: 16px; margin-right: 4px; }
  .rrap-pp { font-size: 8.5px; margin-top: 3px; }

  /* Auf dem Handy eine Stufe kleiner: der Knopf schwebt ueber dem Inhalt und
     soll ihn nicht zudecken. */
  .fab-reserve { padding: 14px 24px; font-size: 15px; gap: 11px; }
  .fab-dock { bottom: 14px; }
  /* Auf dem Handy nimmt die Aufstellung zu viel vom Bild weg. */
  .fab-dock-art { display: none; }
}
@media (max-width: 380px) {
  .rr-step { padding: 10px 2px; }
  .rr-step-s { font-size: 8.5px; letter-spacing: 0.04em; }
}


/* ---------------------------------------------------------------------------
   VEREINFACHTER ABLAUF
   Der Combo-Hinweis ist von einem Kasten mit Prozenttabelle und Pips-Leiste auf
   eine Zeile geschrumpft, die nur erscheint, wenn der Rabatt schon greift.
   Dazu die Personen-Auswahl, die aus dem Zeit-Schritt nach vorne gewandert ist.
   --------------------------------------------------------------------------- */
.combo-line {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent-5) 30%, transparent);
  background: color-mix(in srgb, var(--accent-5) 8%, transparent);
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.combo-line strong { color: var(--ink); }
.cl-tick {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-5); color: var(--on-accent);
  font-size: 12px; font-weight: 700;
}

.rs-persons-block {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.rs-persons-block .rs-section-title { margin-bottom: 12px; }

/* Spielzeit-Auswahl: vorher "2× · 60 Min" mit Inline-Styles, jetzt die Minuten
   als Aussage und ein Zustand, der sich vom Rest der Auswahlflaechen ableitet. */
.rs-dur {
  padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink); font-family: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.rs-dur:hover { border-color: var(--line-2); }
.rs-dur.on {
  border-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  color: var(--accent-2);
}
.rs-dur:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }


/* ---------------------------------------------------------------------------
   KOMPAKTE AUSWAHL
   Rueckmeldung aus der Praxis: der Ablauf fuehlt sich schwer an, weil man auf
   jedem Schritt scrollen muss, um ueberhaupt alle Moeglichkeiten zu sehen.
   Sechs Bereichskarten in zwei Spalten waren rund 560px hoch, die Zeitraster
   noch einmal drei Kaesten mit je eigener Ueberschrift. Ab hier steht alles
   dichter, ohne dass Angaben wegfallen.
   --------------------------------------------------------------------------- */
@media (min-width: 1081px) {
  /* Drei Spalten statt zwei: alle sechs Bereiche auf einen Blick, ohne Scrollen.
     Die Karten tragen nur noch Bild, Name, Mindestalter und Preis - dadurch
     bleiben sie auch in der schmaleren Spalte einzeilig lesbar. */
  .rr-area-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rr-area { padding: 11px; gap: 11px; border-radius: 12px; }
  .rr-area-thumb { width: 44px; height: 44px; border-radius: 10px; }
  .rr-area-name { font-size: 13.5px; }
  .rr-area-price { font-size: 16px; margin-right: 4px; }

  /* In drei Spalten ist die Karte 235px breit. Bild (44), Preis (50), Haken (24),
     Abstaende und Innenabstand belegen davon 177px - fuer den Namen blieben 58px,
     waehrend allein das Wort "GENERATION" 91px braucht. Ein Wort bricht nicht um,
     also malte es ueber den Preis. Deshalb steht der Preis hier UNTER dem Namen
     statt daneben: der Name bekommt damit 123px und passt. */
  .rr-area {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb info  check"
      "thumb price check";
    column-gap: 11px;
    row-gap: 2px;
  }
  .rr-area-thumb { grid-area: thumb; }
  .rr-area-info  { grid-area: info; align-self: end; }
  .rr-area-check { grid-area: check; }
  .rr-area-price {
    grid-area: price;
    align-self: start;
    flex-direction: row; align-items: baseline; gap: 5px;
    margin-right: 0;
    font-size: 15px;
    /* Wird die Spalte zu eng, rutscht "/ Person" auf eine eigene Zeile —
       der Betrag bleibt zusammen und nichts laeuft aus der Karte. */
    flex-wrap: wrap; justify-content: flex-end;
  }
  .rrap-pp { margin-top: 0; }
}
/* Gleich hohe Karten, egal ob der Name ein- oder zweizeilig laeuft. */
.rr-area { align-items: center; min-height: 68px; }
.rr-area-info { gap: 3px; }
.rr-area-meta {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--ink-3);
}

/* Zeitraster: die drei Tagesabschnitte standen als eigene Kaesten mit Rahmen,
   Flaeche und Innenabstand untereinander. Als Abschnitte einer Liste brauchen
   sie das nicht - eine Zwischenueberschrift reicht. */
.slot-block {
  border: 0; background: transparent;
  border-radius: 0; padding: 0;
}
.slot-block-h { margin-bottom: 8px; }
.slots-wrap { gap: 18px; }
@media (min-width: 721px) {
  .slot-grid { grid-template-columns: repeat(6, 1fr); gap: 5px; }
}

/* Personen und Spielzeit ruecken enger zusammen. */
.rs-persons-block { margin-top: 20px; padding-top: 18px; }
.rs-people { gap: 8px; }

/* ---------------------------------------------------------------------------
   WANN: Datum und Uhrzeit als zwei Auswahllisten
   Fruehere Fassung war ein eigener Schritt mit Monatskalender und Slot-Raster.
   Das war der laengste Teil der Strecke und kostete einen kompletten Schritt.
   Zwei Dropdowns leisten dasselbe auf einem Zehntel der Flaeche - die Zahl der
   freien Plaetze steht in der Zeile selbst, damit die Auslastung nicht verloren
   geht, die vorher die farbigen Punkte im Kalender gezeigt haben.
   --------------------------------------------------------------------------- */
.rs-when { margin: 22px 0 4px; }
.rs-when-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  /* Ohne Abstand stiess die naechste Ueberschrift ("Wie lange?") auf Kante an
     die Auswahlfelder - mit Rahmen und Fokusring sah das aus wie ein Fehler. */
  margin-bottom: 20px;
}
.rs-when-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rs-when-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.rs-when-f select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.rs-when-f select:hover:not(:disabled) { border-color: var(--accent-2); background: rgba(255,255,255,0.07); }
.rs-when-f select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.rs-when-f select:disabled { opacity: 0.5; cursor: not-allowed; }
/* Die Listeneintraege erben die dunkle Flaeche nicht in jedem Browser. */
.rs-when-f select option { background: var(--bg-2, #14142a); color: var(--ink); }
.rs-when-err {
  margin-top: 10px; font-size: 13px; color: var(--accent-3, #e5484d);
}
.rs-when-err button {
  background: none; border: 0; padding: 0;
  color: var(--accent, #5bd8ff); cursor: pointer;
  text-decoration: underline; font-size: 13px;
}
@media (max-width: 560px) {
  .rs-when-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   BUCHUNGSKARTE AUF DEN BEREICHSSEITEN
   Der Bereich steht fest - bewusst ohne Auswahl zwischen mehreren Welten. Wer
   auf der Kids-Zone-Seite ist, bucht Kids Zone. Personen, Datum und Uhrzeit
   werden hier gesetzt und an die Buchungsstrecke uebergeben.
   --------------------------------------------------------------------------- */
.area-booking { padding: 34px 0 6px; }
.ab-card {
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), transparent 70%),
    rgba(255,255,255,0.02);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 24px 60px -40px color-mix(in srgb, var(--c) 70%, transparent);
}
.ab-head { display: flex; align-items: center; gap: 14px; }
.ab-thumb {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--c);
  box-shadow: 0 0 0 2px var(--c), 0 0 18px -4px var(--c);
}
.ab-head-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ab-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.ab-name { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

.ab-felder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ab-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ab-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.ab-feld select {
  width: 100%; padding: 12px 13px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ab-feld select:hover:not(:disabled) { border-color: var(--c); background: rgba(255,255,255,0.07); }
.ab-feld select:disabled { opacity: 0.5; cursor: not-allowed; }
.ab-feld select option { background: var(--bg-2, #14142a); color: var(--ink); }

.ab-stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 8px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
}
.ab-stepper button {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.16); background: transparent;
  color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
}
.ab-stepper button:hover:not(:disabled) { border-color: var(--c); color: var(--c); }
.ab-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.ab-stepper-v { font-family: var(--display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }

.ab-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px 22px; border: 0; border-radius: 999px;
  background: var(--c); color: #0a0a0c;
  font-family: var(--display); font-weight: 800; font-size: 16px; cursor: pointer;
  transition: transform .15s, box-shadow .25s, filter .2s;
}
.ab-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 34px -12px var(--c); filter: brightness(1.06); }
.ab-cta:disabled { opacity: 0.45; cursor: not-allowed; }
.ab-note { margin: 0; font-size: 12.5px; color: var(--ink-3); text-align: center; }

@media (max-width: 860px) {
  .ab-felder { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .ab-felder { grid-template-columns: 1fr; }
  .ab-card { padding: 18px; }
}

/* Pflicht-Hinweis unter dem Bereichsnamen (Rutschsocken, Sportschuhe) */
.rr-area-hinweis {
  display: block; margin-top: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c);
}

/* --- Hinweise im Buchungsschritt 1 -------------------------------------------
   Barrierefreiheit und Gruppenanfragen lassen sich im Formular nicht abbilden.
   Wer sie nicht erwaehnt, bekommt die Anfragen gar nicht erst. */
.rs-hinweise {
  display: grid; gap: 10px;
  margin: 22px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rs-hinweis {
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.rs-hinweis-t {
  display: block; font-weight: 600; color: var(--ink);
  font-size: 13.5px; margin-bottom: 2px;
}
.rs-hinweis a { color: var(--accent-2); }
@media (min-width: 860px) { .rs-hinweise { grid-template-columns: 1fr 1fr; } }