/* ═══════════════════════════════════════════════════════════════
   SHOP.CSS – LSF Wesel-Rheinhausen Buchungsbereich
   Gemeinsame Stile für alle Shop- und Buchungsseiten.
   ═══════════════════════════════════════════════════════════════ */

/* ── VARIABLEN ─────────────────────────────────────────────── */
/* HSL-Kanäle als Basis → sichere Gegenfarben, Dark-Mode-ready */
:root {
  color-scheme: light;

  --_ink-h:   213; --_ink-s:   40%; --_ink-l:   12%;
  --_sky-h:   214; --_sky-s:   68%; --_sky-l:   41%;
  --_teal-h:  158; --_teal-s:  70%; --_teal-l:  29%;
  --_amber-h:  29; --_amber-s: 87%; --_amber-l: 37%;

  --ink:        hsl(var(--_ink-h)   var(--_ink-s)   var(--_ink-l));
  --base:       hsl(40 18% 96%);
  --white:      hsl(0 0% 100%);
  --border:     hsl(var(--_ink-h)   var(--_ink-s)   var(--_ink-l) / .09);
  --muted:      hsl(205 17% 61%);
  --mid:        hsl(205 14% 36%);

  --teal:       hsl(var(--_teal-h)  var(--_teal-s)  var(--_teal-l));
  --teal-light: hsl(var(--_teal-h)  var(--_teal-s)  92%);
  --teal-mid:   hsl(var(--_teal-h)  var(--_teal-s)  78%);
  --sky:        hsl(var(--_sky-h)   var(--_sky-s)   var(--_sky-l));
  --sky-light:  hsl(var(--_sky-h)   var(--_sky-s)   94%);
  --amber:      hsl(var(--_amber-h) var(--_amber-s) var(--_amber-l));
  --amber-light:hsl(var(--_amber-h) var(--_amber-s) 93%);

  /* Gegenfarben: Text AUF farbigem Hintergrund */
  --on-ink:   hsl(40 18% 96%);
  --on-sky:   hsl(0 0% 100%);
  --on-teal:  hsl(0 0% 100%);
  --on-amber: hsl(0 0% 100%);
}

/* ── RESET (scoped auf shop-Bereich) ───────────────────────── */
.shop-root *, .shop-root *::before, .shop-root *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
}
.shop-root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--base); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.6; min-height: 100vh; }
.shop-root ul { list-style: none; }
.shop-root a { text-decoration: none; }
.shop-root a:not(.btn):not(.btn-fill):not(.btn-outline):not(.btn-cta) { color: inherit; }
.shop-root h1, .shop-root h2, .shop-root h3 { text-rendering: optimizeLegibility; }
.shop-root button { font-family: inherit; cursor: pointer; }

/* ── WRAPPER ────────────────────────────────────────────────── */
.wrap       { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.wrap--sm   { width: min(740px,  calc(100% - 40px)); margin: 0 auto; }
.wrap--pay  { width: min(980px,  calc(100% - 40px)); margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
.shop-hdr {
  background: var(--ink);
  color: var(--on-ink);
  position: sticky; top: 0; z-index: 80;
}
.shop-hdr .wrap,
.shop-hdr .wrap--sm {
  height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.shop-hdr__brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--on-ink); font-weight: 700; font-size: .88rem; letter-spacing: -.01em;
}
.shop-hdr__sep  { width: 1px; height: 16px; background: rgba(255,255,255,.18); }
.shop-hdr__page { font-weight: 500; font-size: .82rem; color: rgba(255,255,255,.45); }
.shop-hdr__back {
  color: rgba(255,255,255,.55); font-size: .82rem;
  display: flex; align-items: center; gap: 5px;
  background: none; border: none;
  transition: color 120ms;
}
.shop-hdr__back:hover { color: #fff; }
.shop-hdr__back svg { width: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.shop-hdr__member {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.45);
  padding: 5px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px;
  transition: color 120ms, border-color 120ms;
}
.shop-hdr__member:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.shop-hdr__member svg { width: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   PROGRESS BAR (Buchungsschritte)
   ══════════════════════════════════════════════════════════════ */
.shop-progress { background: var(--white); border-bottom: 1px solid var(--border); }
.shop-progress .wrap--sm { display: flex; align-items: stretch; height: 50px; }
.prog-step {
  display: flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 600; color: var(--muted);
  padding: 0 18px; flex: 1;
  border-right: 1px solid var(--border);
}
.prog-step:last-child { border-right: none; }
.prog-step.is-active  { color: var(--teal); }
.prog-step.is-done    { color: var(--ink); }
.prog-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800;
  background: #e5edf2; color: var(--muted);
}
.prog-step.is-active .prog-dot { background: var(--teal); color: var(--on-teal); }
.prog-step.is-done   .prog-dot { background: var(--ink);  color: var(--on-ink); }

/* ══════════════════════════════════════════════════════════════
   HERO (Startseite buchen)
   ══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100vh - 58px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,28,43,0.08) 0%,
    rgba(13,28,43,0.18) 38%,
    rgba(13,28,43,0.64) 68%,
    rgba(13,28,43,0.84) 100%
  );
}
.hero__content {
  position: relative; z-index: 2;
  padding: 0 0 72px; color: #fff;
}
.hero__text {
  max-width: 640px;
  padding-left: 20px;
}
.hero__eyebrow {
  display: inline-block;
  font-size: .73rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-bottom: 16px;
}
.hero__h1 {
  font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 800;
  letter-spacing: -.05em; line-height: 1;
  color: #fff; margin-bottom: 24px;
}
.hero__lead {
  font-size: 1.06rem; color: rgba(255,255,255,.8);
  line-height: 1.68; max-width: 44ch; margin-bottom: 22px;
}
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.hero__tags    { display: flex; gap: 7px; flex-wrap: wrap; }
.hero__tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px; font-size: .77rem; font-weight: 600; color: rgba(255,255,255,.88);
}
.hero__scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 3; color: rgba(255,255,255,.4);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hero__scroll svg { width: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ── HERO BUTTONS ─── */
.btn-fill {
  display: inline-flex; align-items: center; height: 48px; padding: 0 24px;
  background: var(--sky); color: var(--on-sky);
  border-radius: 7px; font-weight: 700; font-size: .9rem; white-space: nowrap;
  transition: filter 130ms, transform 120ms;
}
.btn-fill:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-outline {
  display: inline-flex; align-items: center; height: 48px; padding: 0 24px;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 7px; font-weight: 700; font-size: .9rem; white-space: nowrap;
  transition: background 130ms, transform 120ms;
}
.btn-outline:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   PRODUKT-LISTE (Startseite)
   ══════════════════════════════════════════════════════════════ */
.products { padding: 48px 0 80px; }
.section-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 18px;
}
.section-label { font-size: .73rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.section-note  { font-size: .79rem; color: var(--muted); max-width: 44ch; text-align: right; }
.product-list  { display: grid; gap: 10px; }

.p-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(13,28,43,.06), 0 4px 14px rgba(13,28,43,.04);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.p-card:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(13,28,43,.09), 0 12px 30px rgba(13,28,43,.07); }

.p-card__label {
  padding: 7px 20px; font-size: .69rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.p-card__label--sky   { background: var(--sky-light);    color: var(--sky); }
.p-card__label--amber { background: var(--amber-light);  color: var(--amber); }
.p-card__label--teal  { background: var(--teal-light);   color: var(--teal); }

.p-card__inner { display: grid; grid-template-columns: 200px 1fr 220px; min-height: 170px; }
.p-card__photo { overflow: hidden; }
.p-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-card__info  { padding: 22px 24px; }
.p-card__name  { font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 8px; }
.p-card__desc  { font-size: .9rem; color: var(--mid); max-width: 52ch; margin-bottom: 14px; line-height: 1.58; }
.p-card__meta  { display: flex; flex-wrap: wrap; }
.meta-item     { font-size: .77rem; color: var(--muted); font-weight: 500; }
.meta-item + .meta-item::before { content: '·'; margin: 0 8px; }

.p-card__book {
  padding: 22px 24px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px;
}
.p-price        { text-align: right; line-height: 1; }
.p-price__from  { display: block; font-size: .7rem; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.p-price__val   { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.p-price__val--md { font-size: 1.25rem; letter-spacing: -.025em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 18px; border-radius: 7px;
  font-weight: 700; font-size: .87rem; white-space: nowrap;
  transition: filter 130ms ease, transform 120ms ease;
}
.btn:hover { filter: brightness(.88); transform: translateY(-1px); }
.btn--sky   { background: var(--sky);   color: var(--on-sky); }
.btn--amber { background: var(--amber); color: var(--on-amber); }
.btn--teal  { background: var(--teal);  color: var(--on-teal); }

.btn-gift {
  font-size: .76rem; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--border); padding-bottom: 1px;
  background: none; border-left: none; border-right: none; border-top: none;
  transition: color 120ms ease;
}
.btn-gift:hover { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   PROCESS (So läuft's ab)
   ══════════════════════════════════════════════════════════════ */
.process {
  background: var(--white);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 64px 0;
}
.process__head  { margin-bottom: 44px; }
.process__title { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.035em; margin-top: 10px; max-width: 26ch; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.steps::before {
  content: ''; position: absolute; top: 17px; left: 18px; right: 18px;
  height: 1px; background: var(--border);
}
.step__dot {
  width: 36px; height: 36px; border-radius: 50%; background: var(--ink);
  color: var(--on-ink); font-weight: 800; font-size: .88rem;
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 16px; z-index: 1;
}
.step__title { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.step__text  { font-size: .82rem; color: var(--mid); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════ */
.faq { padding: 64px 0; }
.faq__head  { margin-bottom: 36px; }
.faq__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.035em; margin-top: 10px; max-width: 32ch; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; }
.faq-item__q { font-size: .95rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: 8px; }
.faq-item__a { font-size: .86rem; color: var(--mid); line-height: 1.62; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer { background: var(--ink); color: rgba(255,255,255,.55); padding: 32px 0; }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { color: rgba(255,255,255,.8); font-weight: 700; font-size: .88rem; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: .8rem; transition: color 120ms; }
.footer-links a:hover { color: rgba(255,255,255,.8); }
.footer-copy { font-size: .78rem; }

/* ══════════════════════════════════════════════════════════════
   PRODUKT-SUMMARY-BAR (Buchungsschritte oben)
   ══════════════════════════════════════════════════════════════ */
.product-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 18px 0; }
.product-bar .wrap--sm { display: flex; align-items: center; gap: 20px; }
.product-bar__img {
  width: 88px; height: 66px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--border);
}
.product-bar__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.product-bar__badge {
  display: inline-block; margin-bottom: 4px;
  font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  background: var(--teal-light); color: var(--teal); padding: 2px 8px; border-radius: 3px;
}
.product-bar__name  { font-size: 1.05rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.product-bar__facts { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.product-bar__facts span + span::before { content: ' · '; }

/* ══════════════════════════════════════════════════════════════
   SEKTIONEN (Buchungsschritte)
   ══════════════════════════════════════════════════════════════ */
.booking-section { padding: 28px 0; border-bottom: 1px solid var(--border); }
.booking-section:last-of-type { border-bottom: none; }
.booking-section__title {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.booking-section__hint { font-size: .82rem; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   VARIANTEN-KARTEN
   ══════════════════════════════════════════════════════════════ */
.variants { display: grid; gap: 8px; }
.variant-card {
  background: var(--white); border: 2px solid var(--border); border-radius: 10px;
  padding: 16px 18px; display: grid; grid-template-columns: 24px 1fr auto;
  gap: 14px; align-items: center; cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.variant-card:hover { border-color: var(--teal-mid); }
.variant-card.is-selected { border-color: var(--teal); background: var(--teal-light); }

.variant-radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #c8d4dc; background: var(--white);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color 140ms;
}
.variant-card.is-selected .variant-radio { border-color: var(--teal); }
.variant-radio__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); opacity: 0; transition: opacity 140ms;
}
.variant-card.is-selected .variant-radio__dot { opacity: 1; }

.variant-name     { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.variant-desc     { font-size: .8rem; color: var(--mid); margin-top: 2px; }
.variant-duration { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.variant-price    { text-align: right; }
.variant-price__from { font-size: .7rem; color: var(--muted); display: block; margin-bottom: 1px; }
.variant-price__val  { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }

/* ══════════════════════════════════════════════════════════════
   KALENDER
   ══════════════════════════════════════════════════════════════ */
.calendar-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cal-header    { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }
.cal-grid      { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); text-align: center; padding: 4px 0;
}
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .82rem; font-weight: 500;
  color: #c0ccd6; cursor: default;
}
.cal-day.is-available {
  color: var(--ink); font-weight: 600; cursor: pointer;
  background: var(--white); border: 1px solid var(--border);
  transition: background 120ms, border-color 120ms, color 120ms;
}
.cal-day.is-available:hover { border-color: var(--teal); color: var(--teal); }
.cal-day.is-selected { background: var(--teal) !important; color: var(--on-teal) !important; border-color: var(--teal) !important; font-weight: 700; }
.cal-day.is-booked   {
  color: #c0ccd6; font-size: .72rem; font-weight: 500;
  background: #f2f4f5; border: 1px solid transparent; cursor: default;
  text-decoration: line-through;
}
.cal-day.is-today    { color: var(--ink); font-weight: 700; }

/* Motorflug: sofort buchbar (Wochenende / Pilot bestätigt) */
.cal-day.is-green {
  color: var(--teal); font-weight: 700;
  background: var(--teal-light); border: 1px solid var(--teal-mid); cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.cal-day.is-green:hover { border-color: var(--teal); }
.cal-day.is-green.is-selected {
  background: var(--teal) !important; color: var(--on-teal) !important;
  border-color: var(--teal) !important;
}
/* Motorflug: nur per Anfrage (Werktag) */
.cal-day.is-yellow {
  color: var(--amber); font-weight: 600;
  background: var(--amber-light); border: 1px solid hsl(var(--_amber-h) var(--_amber-s) 78%);
  cursor: pointer; transition: background 120ms, border-color 120ms;
}
.cal-day.is-yellow:hover { border-color: var(--amber); }
.cal-day.is-yellow.is-selected {
  background: var(--amber) !important; color: var(--on-amber) !important;
  border-color: var(--amber) !important;
}

/* Kalender-Legende */
.cal-legend { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 600; color: var(--mid);
}
.cal-legend-item::before {
  content: ''; width: 10px; height: 10px; border-radius: 3px;
  display: block; border: 1px solid;
}
.cal-legend-item--green::before  { background: var(--teal-light);  border-color: var(--teal); }
.cal-legend-item--yellow::before { background: var(--amber-light); border-color: var(--amber); }

/* Segelflug: Flugtage-Liste */
.flugtage { display: flex; flex-direction: column; gap: 6px; }
.flugtag {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 10px;
  background: var(--white); border: 2px solid var(--border);
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; font-size: inherit; color: var(--ink);
  transition: border-color 130ms, background 130ms;
}
.flugtag.is-avail:hover:not(:disabled) { border-color: var(--teal-mid); }
.flugtag.is-selected { border-color: var(--teal); background: var(--teal-light); }
.flugtag:disabled { opacity: .5; cursor: default; }
.flugtag__wday {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-right: 1px solid var(--border);
  text-align: center; padding-right: 14px; line-height: 1.3;
}
.flugtag.is-selected .flugtag__wday { color: var(--teal); border-color: var(--teal-mid); }
.flugtag__date { font-size: .93rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 2px; }
.flugtag__sub  { font-size: .75rem; color: var(--mid); }
.flugtag.is-selected .flugtag__sub { color: var(--teal); }
.flugtag__state svg { width: 20px; display: block; }
.flugtag__full-badge {
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: hsl(205 17% 90%); color: var(--muted); padding: 3px 8px; border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   UHRZEITEN
   ══════════════════════════════════════════════════════════════ */
.timeslot-block { margin-top: 24px; }
.timeslot-label { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.timeslot-date  { font-size: .88rem; font-weight: 700; margin-bottom: 12px; }
.timeslots      { display: flex; flex-wrap: wrap; gap: 8px; }
.timeslot {
  padding: 9px 18px; border-radius: 8px; font-size: .88rem; font-weight: 600;
  background: var(--white); border: 2px solid var(--border); cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.timeslot:hover      { border-color: var(--teal); color: var(--teal); }
.timeslot.is-selected { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }

/* ══════════════════════════════════════════════════════════════
   STICKY BOTTOM CTA
   ══════════════════════════════════════════════════════════════ */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  background: var(--ink); color: var(--on-ink); padding: 14px 0;
  box-shadow: 0 -2px 20px rgba(13,28,43,.18);
  transform: translateY(100%); transition: transform 220ms ease;
  pointer-events: none;
}
.sticky-bar.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-bar .wrap--sm  { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sticky-summary        { font-size: .8rem; color: rgba(255,255,255,.65); line-height: 1.5; }
.sticky-summary strong { color: #fff; font-weight: 700; }
.sticky-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.sticky-price { text-align: right; line-height: 1; }
.sticky-price__from { font-size: .68rem; color: rgba(255,255,255,.5); }
.sticky-price__val  { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.sticky-hint { font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.4; max-width: 320px; }
.sticky-hint strong { color: rgba(255,255,255,.8); }

.btn-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--teal); color: var(--on-teal);
  height: 46px; padding: 0 22px; border-radius: 8px;
  font-weight: 700; font-size: .9rem; white-space: nowrap;
  border: none;
  transition: background 150ms, opacity 200ms;
}
.btn-cta:hover   { background: #125e47; }
.btn-cta.disabled { opacity: .45; pointer-events: none; }
.btn-cta svg { width: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ══════════════════════════════════════════════════════════════
   BUCHUNGS-BANNER (Schritt 2 oben)
   ══════════════════════════════════════════════════════════════ */
.booking-banner { background: var(--teal-light); border-bottom: 1px solid var(--teal-mid); padding: 14px 0; }
.booking-banner .wrap--sm { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.booking-banner__text  { font-size: .82rem; color: #0f5c41; line-height: 1.5; }
.booking-banner__text strong { color: var(--ink); font-weight: 700; }
.booking-banner__price { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   FORMULAR (Schritt 2)
   ══════════════════════════════════════════════════════════════ */
.form-block { padding: 28px 0; border-bottom: 1px solid var(--border); }
.form-block:last-of-type { border-bottom: none; }
.form-block__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.form-block__sub   { font-size: .8rem; color: var(--muted); margin-bottom: 20px; }

.field-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.field-row.full { grid-template-columns: 1fr; }
.field        { display: flex; flex-direction: column; gap: 5px; }
.field label  { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mid); }
.field input, .field select {
  height: 46px; padding: 0 14px;
  background: var(--white); border: 1.5px solid #d0dce5;
  border-radius: 8px; font-size: .9rem; color: var(--ink);
  font-family: inherit; outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
.field input:focus, .field select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(21,122,91,.12);
}
.field input::placeholder { color: #b0bec8; }
.field input.is-readonly { background: var(--base); color: var(--mid); opacity: .7; cursor: default; }
.field__hint { font-size: .75rem; color: var(--muted); margin-top: -8px; line-height: 1.4; }
.field__opt  { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }

.same-person-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px;
  background: var(--white); border: 1.5px solid var(--border);
  cursor: pointer; margin-bottom: 20px; user-select: none;
}
.same-person-toggle input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.same-person-toggle span { font-size: .88rem; font-weight: 500; }

.guest-fields-fade { transition: opacity 200ms; }

/* ══════════════════════════════════════════════════════════════
   ZAHLUNG (Schritt 3)
   ══════════════════════════════════════════════════════════════ */
.payment-layout {
  padding: 28px 0 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px; align-items: start;
}

/* Summary Karte */
.summary-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.summary-card__head { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.summary-card__body { padding: 20px; }
.summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .86rem; padding: 7px 0; border-bottom: 1px solid var(--border); gap: 12px;
}
.summary-row:last-of-type { border-bottom: none; }
.summary-row__label { color: var(--mid); }
.summary-row__val   { font-weight: 600; text-align: right; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--ink); font-weight: 800;
}
.summary-total__label { font-size: .88rem; }
.summary-total__val   { font-size: 1.4rem; letter-spacing: -.03em; }
.summary-note {
  margin-top: 14px; background: var(--teal-light); border-radius: 8px;
  padding: 10px 14px; font-size: .75rem; color: #0f5c41; line-height: 1.5;
}

/* SumUp Karte */
.sumup-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sumup-card__head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.sumup-card__title { font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.sumup-logo { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 800; color: #111; letter-spacing: -.02em; }
.sumup-logo__icon {
  width: 26px; height: 26px; border-radius: 6px; background: #00b3a4;
  display: flex; align-items: center; justify-content: center;
}
.sumup-logo__icon svg { width: 14px; fill: #fff; }
.sumup-card__body { padding: 20px; display: grid; gap: 14px; }

.card-visual {
  height: 60px; background: linear-gradient(135deg, #1b2e42 0%, #2c4a6b 100%);
  border-radius: 8px; padding: 10px 16px;
  display: flex; align-items: flex-end; justify-content: space-between;
  position: relative; overflow: hidden;
}
.card-visual::before {
  content: ''; position: absolute; top: 10px; left: 16px;
  width: 28px; height: 22px;
  background: linear-gradient(135deg, #f0c040, #d4a010); border-radius: 3px;
}
.card-circles { display: flex; }
.card-circles span { width: 22px; height: 22px; border-radius: 50%; display: block; }
.card-circles span:first-child { background: rgba(255,60,0,.7); margin-right: -8px; }
.card-circles span:last-child  { background: rgba(255,160,0,.7); }

.card-nr-wrap { position: relative; }
.card-nr-wrap input { padding-right: 48px; letter-spacing: .12em; }
.card-nr-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; }
.card-nr-icon span { width: 16px; height: 16px; border-radius: 50%; display: block; }
.card-nr-icon span:first-child { background: rgba(255,60,0,.55); margin-right: -5px; }
.card-nr-icon span:last-child  { background: rgba(255,160,0,.55); }

.pay-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px; border-radius: 10px;
  background: #00b3a4; color: #fff;
  font-size: .95rem; font-weight: 800; letter-spacing: -.01em;
  border: none; cursor: pointer; font-family: inherit;
  transition: background 150ms, transform 120ms;
}
.pay-btn:hover   { background: #009e91; transform: translateY(-1px); }
.pay-btn:active  { transform: translateY(0); }
.pay-btn:disabled { opacity: .65; cursor: default; transform: none; }
.pay-btn svg { width: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.security-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .72rem; color: var(--muted); text-align: center;
}
.security-note svg { width: 12px; stroke: var(--muted); fill: none; stroke-width: 2; }

/* ══════════════════════════════════════════════════════════════
   BESTÄTIGUNG (Schritt 4)
   ══════════════════════════════════════════════════════════════ */
.success-area { padding: 56px 0 80px; }
.success-icon {
  width: 72px; height: 72px; border-radius: 50%; background: var(--teal-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  animation: icon-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.success-icon svg { width: 32px; stroke: var(--teal); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes icon-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.success-head { text-align: center; margin-bottom: 36px; }
.success-head h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; margin-bottom: 12px; }
.success-head p  { font-size: .95rem; color: var(--mid); max-width: 48ch; margin: 0 auto; line-height: 1.65; }

.status-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 20px; }
.status-card__head {
  background: var(--teal); color: var(--on-teal); padding: 14px 22px;
  display: flex; align-items: center; gap: 10px;
}
.status-card__head svg { width: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.status-card__head-text { font-size: .82rem; font-weight: 700; }
.status-card__body { padding: 20px; }
.status-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border); gap: 16px; font-size: .88rem;
}
.status-row:last-child { border-bottom: none; }
.status-row__label { color: var(--muted); flex-shrink: 0; }
.status-row__val   { font-weight: 600; text-align: right; }
.status-row__val--teal { color: var(--teal); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.info-box  { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.info-box__icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.info-box__icon svg { width: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info-box__icon--teal  { background: var(--teal-light); color: var(--teal); }
.info-box__icon--sky   { background: var(--sky-light); color: var(--sky); }
.info-box__icon--amber { background: var(--amber-light); color: var(--amber); }
.info-box h3 { font-size: .88rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -.01em; }
.info-box p  { font-size: .78rem; color: var(--mid); line-height: 1.55; }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 600; color: var(--muted);
  background: none; border: none; cursor: pointer;
  transition: color 120ms;
}
.back-link:hover { color: var(--ink); }
.back-link svg { width: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ══════════════════════════════════════════════════════════════
   BUCHUNGS-MODUS TABS (Termin / Gutschein)
   ══════════════════════════════════════════════════════════════ */
.booking-mode-tabs {
  display: flex; background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; gap: 4px; margin-bottom: 16px; width: fit-content;
}
.booking-mode-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 16px; border-radius: 7px; border: none;
  font-size: .8rem; font-weight: 600; cursor: pointer; background: transparent;
  color: var(--mid); font-family: inherit;
  transition: background 130ms, color 130ms;
}
.booking-mode-tab:hover:not(.is-active) { background: var(--base); color: var(--ink); }
.booking-mode-tab.is-active { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 4px rgba(13,28,43,.15); }
.booking-mode-tab svg { width: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Oder-Trenner */
.booking-or {
  display: flex; align-items: center; gap: 12px; padding: 16px 0 12px;
  color: var(--muted); font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.booking-or::before, .booking-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Gutschein-Karte */
.booking-voucher {
  background: var(--white); border: 2px solid var(--border); border-radius: 10px;
  padding: 16px 18px;
  display: grid; grid-template-columns: 38px 1fr auto;
  gap: 14px; align-items: center; cursor: pointer;
  transition: border-color 130ms, background 130ms;
}
.booking-voucher:hover:not(.is-selected) { border-color: hsl(var(--_sky-h) var(--_sky-s) 78%); }
.booking-voucher.is-selected { border-color: var(--sky); background: var(--sky-light); }
.booking-voucher__icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: var(--sky-light); color: var(--sky);
  display: flex; align-items: center; justify-content: center;
}
.booking-voucher.is-selected .booking-voucher__icon { background: var(--sky); color: var(--on-sky); }
.booking-voucher__icon svg { width: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.booking-voucher__title { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 3px; }
.booking-voucher__sub { font-size: .77rem; color: var(--mid); line-height: 1.5; }
.booking-voucher.is-selected .booking-voucher__sub { color: hsl(var(--_sky-h) var(--_sky-s) 32%); }
.booking-voucher__state svg { width: 20px; display: block; }

.booking-voucher-info {
  background: var(--sky-light); border: 1px solid hsl(var(--_sky-h) var(--_sky-s) 82%);
  border-radius: 8px; padding: 12px 16px; margin-top: 10px;
  font-size: .81rem; color: hsl(var(--_sky-h) var(--_sky-s) 30%); line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════
   SPACER
   ══════════════════════════════════════════════════════════════ */
.bottom-spacer-sm  { height: 80px; }
.bottom-spacer-md  { height: 100px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .p-card__inner { grid-template-columns: 160px 1fr; }
  .p-card__book  { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border); flex-direction: row; justify-content: space-between; align-items: center; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .payment-layout { grid-template-columns: 1fr; }
  .payment-layout .sumup-card   { order: 2; }
  .payment-layout .summary-card { order: 1; }
}
@media (max-width: 600px) {
  .p-card__inner { grid-template-columns: 1fr; }
  .p-card__photo { height: 160px; }
  .p-card__book  { grid-column: 1; border-top: 1px solid var(--border); border-left: none; }
  .calendar-wrap { grid-template-columns: 1fr; }
  .field-row     { grid-template-columns: 1fr; }
  .info-grid     { grid-template-columns: 1fr; }
  .prog-step span:not(.prog-dot) { display: none; }
  .prog-step     { justify-content: center; padding: 0 8px; }
  .sticky-summary { display: none; }
  .steps { grid-template-columns: 1fr; }
}