/* ═══════════════════════════════════════════════════════════════
   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%);

  --nav-bg: var(--ink);
  --on-nav: var(--on-ink);
  --input-border: hsl(205 22% 82%);
  --placeholder: hsl(205 18% 70%);
  --shadow-soft: 0 1px 3px rgba(13,28,43,.06), 0 4px 14px rgba(13,28,43,.04);
  --shadow-lift: 0 3px 10px rgba(13,28,43,.09), 0 12px 30px rgba(13,28,43,.07);
  --shadow-sticky: 0 -2px 20px rgba(13,28,43,.18);
  --shadow-payment: 0 18px 45px rgba(13,28,43,.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink:        hsl(40 18% 93%);
    --base:       hsl(213 28% 10%);
    --white:      hsl(213 28% 15%);
    --border:     hsl(213 28% 82% / .16);
    --muted:      hsl(205 17% 68%);
    --mid:        hsl(205 16% 76%);

    --teal:       hsl(var(--_teal-h) var(--_teal-s) 48%);
    --teal-light: hsl(var(--_teal-h) 42% 18%);
    --teal-mid:   hsl(var(--_teal-h) 45% 32%);
    --sky:        hsl(var(--_sky-h) var(--_sky-s) 66%);
    --sky-light:  hsl(var(--_sky-h) 42% 20%);
    --amber:      hsl(var(--_amber-h) var(--_amber-s) 60%);
    --amber-light:hsl(var(--_amber-h) 42% 20%);

    --on-ink:   hsl(213 28% 10%);
    --on-sky:   hsl(213 35% 10%);
    --on-teal:  hsl(213 35% 10%);
    --on-amber: hsl(213 35% 10%);

    --nav-bg: hsl(213 38% 10%);
    --on-nav: hsl(40 18% 96%);
    --input-border: hsl(213 24% 74% / .24);
    --placeholder: hsl(205 15% 58%);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.18);
    --shadow-lift: 0 8px 28px rgba(0,0,0,.32);
    --shadow-sticky: 0 -2px 24px rgba(0,0,0,.35);
    --shadow-payment: 0 18px 45px rgba(0,0,0,.26);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:        hsl(40 18% 93%);
  --base:       hsl(213 28% 10%);
  --white:      hsl(213 28% 15%);
  --border:     hsl(213 28% 82% / .16);
  --muted:      hsl(205 17% 68%);
  --mid:        hsl(205 16% 76%);
  --teal:       hsl(var(--_teal-h) var(--_teal-s) 48%);
  --teal-light: hsl(var(--_teal-h) 42% 18%);
  --teal-mid:   hsl(var(--_teal-h) 45% 32%);
  --sky:        hsl(var(--_sky-h) var(--_sky-s) 66%);
  --sky-light:  hsl(var(--_sky-h) 42% 20%);
  --amber:      hsl(var(--_amber-h) var(--_amber-s) 60%);
  --amber-light:hsl(var(--_amber-h) 42% 20%);
  --on-ink:   hsl(213 28% 10%);
  --on-sky:   hsl(213 35% 10%);
  --on-teal:  hsl(213 35% 10%);
  --on-amber: hsl(213 35% 10%);
  --nav-bg: hsl(213 38% 10%);
  --on-nav: hsl(40 18% 96%);
  --input-border: hsl(213 24% 74% / .24);
  --placeholder: hsl(205 15% 58%);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.18);
  --shadow-lift: 0 8px 28px rgba(0,0,0,.32);
  --shadow-sticky: 0 -2px 24px rgba(0,0,0,.35);
  --shadow-payment: 0 18px 45px rgba(0,0,0,.26);
}

/* ── 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(--nav-bg);
  color: var(--on-nav);
  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-nav); 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(--nav-bg);  color: var(--on-nav); }

/* ══════════════════════════════════════════════════════════════
   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;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 22px;
}

.p-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.p-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.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-rows: auto 1fr auto; min-height: 100%; }
.p-card__photo { overflow: hidden; height: clamp(190px, 24vw, 250px); background: var(--base); }
.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__footer {
  padding: 18px 24px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.p-price        { text-align: left; 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(--nav-bg);
  color: var(--on-nav); 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(--nav-bg); 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: ' · '; }

/* ══════════════════════════════════════════════════════════════
   PRODUKT-DETAILSEITE (Erlebnis vor Buchung)
   ══════════════════════════════════════════════════════════════ */
.detail-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, var(--nav-bg) 0%, hsl(207 45% 20%) 58%, hsl(201 72% 28%) 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: clamp(26px, 5vw, 58px) 0 clamp(34px, 6vw, 72px);
}
.detail-hero--teal {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.14), transparent 30%),
    linear-gradient(135deg, hsl(176 46% 15%) 0%, hsl(168 54% 22%) 55%, hsl(154 62% 28%) 100%);
}
.detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 20px;
  color: rgba(255,255,255,.72);
  font-size: .82rem; font-weight: 700;
}
.detail-back:hover { color: #fff; }
.detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
.detail-gallery { display: grid; gap: 12px; }
.detail-gallery__main,
.detail-gallery__thumb {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  box-shadow: 0 24px 64px rgba(0,0,0,.24);
}
.detail-gallery__main { border-radius: 20px; aspect-ratio: 16 / 10; }
.detail-gallery__thumb { border-radius: 14px; aspect-ratio: 16 / 10; box-shadow: none; }
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-gallery__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.detail-copy { max-width: 620px; }
.detail-badge {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 14px;
}
.detail-copy h1 {
  font-size: clamp(2.1rem, 6vw, 4.1rem);
  line-height: .96;
  letter-spacing: -.07em;
  margin-bottom: 18px;
}
.detail-lead {
  color: rgba(255,255,255,.78);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.68;
  max-width: 58ch;
}
.detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0;
}
.detail-facts span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .75rem;
  font-weight: 750;
}
.detail-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 430px;
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.18);
}
.detail-price-row__from {
  display: block;
  color: rgba(255,255,255,.55);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.detail-price-row strong {
  display: block;
  color: #fff;
  font-size: clamp(1.65rem, 4vw, 2.2rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.detail-price-row > span {
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  text-align: right;
}
.detail-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.detail-hero__secondary {
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

.detail-story {
  padding: clamp(34px, 6vw, 70px) 0;
  background: var(--base);
}
.detail-story__head {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 26px;
  align-items: start;
  margin-bottom: 24px;
}
.detail-story__head h2 {
  max-width: 780px;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.experience-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow-soft);
}
.experience-card__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--teal-light);
  margin-bottom: 14px;
  font-size: 1.2rem;
}
.experience-card h3 {
  font-size: 1rem;
  margin-bottom: 7px;
  letter-spacing: -.02em;
}
.experience-card p {
  color: var(--mid);
  font-size: .86rem;
  line-height: 1.62;
}
.detail-booking-panel {
  scroll-margin-top: 82px;
  background: linear-gradient(180deg, var(--white), var(--base));
}

/* ══════════════════════════════════════════════════════════════
   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(--mid); margin-bottom: 18px; line-height: 1.5; }

.shop-empty-state {
  min-height: calc(100vh - 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 96px;
}
.shop-empty-card {
  width: min(460px, 100%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.shop-empty-card .booking-section__title { margin-bottom: 8px; }
.shop-empty-card .booking-section__hint { margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════════════
   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-card.is-disabled { opacity: .45; cursor: not-allowed; }

.variant-radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--input-border); 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: var(--muted); 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: var(--muted); font-size: .72rem; font-weight: 500;
  background: var(--white); 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.is-readonly { cursor: default; }
.flugtag.is-muted { opacity: .7; }
.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, .flugtag__open-badge {
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.flugtag__full-badge { background: hsl(205 17% 90%); color: var(--muted); }
.flugtag__open-badge { background: var(--teal-light); color: var(--teal); }

/* ══════════════════════════════════════════════════════════════
   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(--nav-bg); color: var(--on-nav); padding: 14px 0;
  box-shadow: var(--shadow-sticky);
  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-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: var(--ink); 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 var(--input-border);
  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: var(--placeholder); }
.field input[type="date"] { color-scheme: light; }
.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: var(--ink); 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: var(--ink); 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; }

.payment-sim-card { box-shadow: var(--shadow-payment); }
.payment-sim-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--amber-light); color: var(--amber);
  font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.payment-sim-hero {
  display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center;
  padding: 18px; border-radius: 12px; background: linear-gradient(135deg, var(--sky-light), var(--white));
  border: 1px solid color-mix(in srgb, var(--sky) 45%, var(--border));
}
.payment-sim-hero__icon {
  width: 54px; height: 54px; border-radius: 16px; background: var(--sky); color: var(--on-sky);
  display: flex; align-items: center; justify-content: center;
}
.payment-sim-hero__icon svg { width: 26px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.payment-sim-hero strong { display: block; font-size: 1rem; letter-spacing: -.02em; margin-bottom: 4px; }
.payment-sim-hero span { display: block; color: var(--mid); font-size: .84rem; line-height: 1.45; }
.payment-sim-list { display: grid; gap: 10px; }
.payment-sim-item {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--white);
}
.payment-sim-item span {
  width: 28px; height: 28px; border-radius: 999px; background: var(--teal-light); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: .72rem;
}
.payment-sim-item p { margin: 0; color: var(--mid); font-size: .82rem; line-height: 1.5; }
.payment-legal-list { display: grid; gap: 10px; }
.payment-legal-check {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--base);
  color: var(--mid); font-size: .8rem; line-height: 1.5;
}
.payment-legal-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--teal); }
.payment-legal-check a { color: var(--sky); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

.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; min-width: 0; overflow-wrap: anywhere; }
.status-row__val--teal { color: var(--teal); }
.status-row__val--token {
  display: inline-flex;
  justify-content: flex-end;
  max-width: 100%;
  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  word-break: break-word;
}
.status-row__val--token:hover { text-decoration: underline; }

.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(--nav-bg); color: var(--on-nav); 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: var(--sky); }
.booking-voucher__state svg { width: 20px; display: block; }

.booking-voucher-info {
  background: var(--sky-light); border: 1px solid color-mix(in srgb, var(--sky) 45%, var(--border));
  border-radius: 8px; padding: 12px 16px; margin-top: 10px;
  font-size: .81rem; color: var(--sky); line-height: 1.55;
}

/* Rechtstexte */
.legal-page { padding: 34px 0 72px; }
.legal-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: clamp(24px, 5vw, 42px); box-shadow: var(--shadow-soft);
}
.legal-kicker {
  font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.legal-card h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.08; letter-spacing: -.04em; margin-bottom: 16px; }
.legal-card h2 { font-size: 1rem; margin-top: 26px; margin-bottom: 8px; letter-spacing: -.015em; }
.legal-card p { color: var(--mid); font-size: .93rem; line-height: 1.75; margin-top: 10px; }
.legal-note {
  background: var(--amber-light); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border));
  color: var(--amber) !important; border-radius: 10px; padding: 12px 14px; font-weight: 700;
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field input[type="date"] { color-scheme: dark; }
}
:root[data-theme="dark"] .field input[type="date"] { color-scheme: dark; }

/* Projektstatus und generische Auth-Hinweise liegen im globalen Markup, werden
   innerhalb der Shop-Shell aber vom Shop-Reset erfasst. Die höhere Spezifität
   stellt die Kartenabstände wieder her. */
.shop-root .setup-home {
  min-height: calc(100vh - 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 7vw, 5rem) 1.25rem;
  background: var(--base);
  color: var(--ink);
}
.shop-root .setup-home__card {
  width: min(720px, 100%);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-payment);
}
.shop-root .setup-home__kicker {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.shop-root .setup-home__card h1 {
  margin: 0 0 .85rem;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.shop-root .setup-home__card p:not(.setup-home__kicker) {
  margin: 0;
  color: var(--mid);
  max-width: 58ch;
}
.shop-root .setup-home__links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
.shop-root .setup-home__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--sky);
  color: var(--on-sky);
  font-size: .9rem;
  font-weight: 750;
  text-decoration: none;
}
.shop-root .setup-home__link + .setup-home__link {
  background: var(--white);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shop-root .setup-home__card {
    background: hsl(213 28% 17%);
    border-color: hsl(213 28% 82% / .24);
    box-shadow:
      0 28px 78px rgba(0,0,0,.34),
      0 0 0 1px rgba(255,255,255,.035);
  }

  :root:not([data-theme="light"]) .shop-root .setup-home__link:first-child {
    background: hsl(var(--_sky-h) var(--_sky-s) 52%);
    border-color: hsl(var(--_sky-h) var(--_sky-s) 58% / .85);
    color: hsl(0 0% 100%);
    box-shadow: 0 10px 26px hsl(var(--_sky-h) var(--_sky-s) 28% / .24);
  }
}

:root[data-theme="dark"] .shop-root .setup-home__card {
  background: hsl(213 28% 17%);
  border-color: hsl(213 28% 82% / .24);
  box-shadow:
    0 28px 78px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035);
}

:root[data-theme="dark"] .shop-root .setup-home__link:first-child {
  background: hsl(var(--_sky-h) var(--_sky-s) 52%);
  border-color: hsl(var(--_sky-h) var(--_sky-s) 58% / .85);
  color: hsl(0 0% 100%);
  box-shadow: 0 10px 26px hsl(var(--_sky-h) var(--_sky-s) 28% / .24);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  .section-bar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .section-note { text-align: left; max-width: 62ch; }
  .detail-hero__grid { grid-template-columns: 1fr; }
  .detail-copy { max-width: none; }
  .detail-story__head { grid-template-columns: 1fr; gap: 8px; }
  .experience-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .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; }
  .detail-gallery__strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .p-card__photo { height: 170px; }
  .p-card__footer { align-items: stretch; flex-direction: column; }
  .p-card__footer .btn { width: 100%; }
  .detail-gallery__strip { gap: 8px; }
  .detail-price-row { align-items: flex-start; flex-direction: column; }
  .detail-price-row > span { text-align: left; }
  .detail-hero__actions .btn-fill,
  .detail-hero__actions .btn-outline { width: 100%; justify-content: center; }
  .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-hint   { display: none; }
  .sticky-right  { width: 100%; justify-content: space-between; }
  .steps { grid-template-columns: 1fr; }
}