/* ============================================================
   solivo · Buchungs-Flow (Booqable)
   Gemeinsames Stylesheet für die Schritte:
   1) buchen.html      – Zeitraum & Maschine
   2) extras.html      – Sirups, Becher, Strohhalme
   3) warenkorb.html   – Warenkorb-Übersicht
   6) danke.html       – Bestätigung
   ------------------------------------------------------------
   Design baut auf dem bestehenden Look der Website auf.
   Die eigentliche Buchung/Verfügbarkeit/Zahlung läuft über
   Booqable-Embed-Widgets (booqable.js) + Booqable-Checkout.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:       #f4f0e2;
  --orange:      #e64828;
  --orange-deep: #b8351e;
  --yellow:      #f5c418;
  --dark:        #1c1c1c;
  --mid:         #888;
  --hairline:    rgba(0,0,0,.08);
  --divider:     rgba(0,0,0,.15);
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-pill: 100px;
  --ease:   cubic-bezier(.2,.7,.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Nav ─────────────────────────────────────────── */
nav.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  border-bottom: 1.5px solid var(--hairline);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 50;
}
.logo {
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: -1px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  color: var(--mid);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: color .15s, background .15s;
}
.back-link:hover { color: var(--dark); background: rgba(0,0,0,.04); }

/* ── Page hero ───────────────────────────────────── */
.page-hero {
  max-width: 1080px;
  margin: 40px auto 22px;
  padding: 0 24px;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 14px;
}
.eyebrow::before, .eyebrow::after {
  content: '';
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--orange);
}
h1 {
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: .95;
  letter-spacing: -1.5px;
  margin-bottom: 14px;
}
.hero-sub {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Stepper (Schritt-Anzeige) ───────────────────── */
.stepper {
  max-width: 760px;
  margin: 0 auto 34px;
  padding: 0 24px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  position: relative;
}
/* durchgehende Linie hinter den Punkten */
.stepper::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 12%;
  right: 12%;
  height: 3px;
  background: var(--divider);
  z-index: 0;
}
.stepper li {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--mid);
  letter-spacing: .01em;
}
.stepper .dot {
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Climate Crisis', sans-serif;
  font-size: .85rem;
  color: var(--mid);
  transition: all .2s var(--ease);
}
/* aktueller Schritt */
.stepper li[aria-current="step"] { color: var(--dark); }
.stepper li[aria-current="step"] .dot {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: scale(1.06);
}
/* erledigte Schritte */
.stepper li.done { color: var(--dark); }
.stepper li.done .dot {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--yellow);
}
.stepper li.done .dot::after { content: '✓'; }
.stepper li.done .dot .num { display: none; }

/* ── Layout ──────────────────────────────────────── */
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 24px 60px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.booking-col, .sidebar-col { min-width: 0; }

/* einspaltige Seiten (z. B. Warenkorb, Danke) */
main.single { grid-template-columns: 1fr; max-width: 760px; }

.card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 32px;
  overflow: visible;
}
.card + .card { margin-top: 16px; }
.card.card-product { padding: 28px; }

.card-title {
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dark);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title::before {
  content: '';
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: var(--orange);
  flex-shrink: 0;
}
.card-hint {
  font-size: .88rem;
  color: var(--mid);
  line-height: 1.6;
  margin: -6px 0 18px;
}

/* ── Booqable-Widget-Theming ─────────────────────── */
/* Booqable v2 stellt CSS-Variablen fürs Theming bereit.
   Wir setzen sie passend zum Design – Layout macht Booqable selbst. */
.booking-col,
.extras-grid,
.cart-wrap {
  --bq-color-primary: var(--orange);
  --bq-color-primary-text: #fff;
  --bq-color-text: var(--dark);
  --bq-color-muted: var(--mid);
  --bq-border-radius: var(--r-pill);
  --bq-font-family: 'Inter', sans-serif;
}
.booqable-datepicker,
.booqable-product,
.booqable-product-detail,
.booqable-product-button,
.booqable-cart {
  font-family: 'Inter', sans-serif;
  color: var(--dark);
  min-height: 40px;
}
.booqable-product img,
.booqable-product-detail img { max-width: 100%; height: auto; }

/* ── Extras-Grid (Schritt 2) ─────────────────────── */
/* Flexibles Raster: passt die Spaltenzahl automatisch an die verfügbare
   Breite an (PC: 2, Tablet/breite Spalte: 2–3, Handy: 1). Jede Karte ist
   mind. 240px breit, damit die Booqable-Produktkarte hineinpasst. */
.extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.extra-item {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 16px;
  border: 1.5px solid var(--hairline);
  transition: border-color .15s, transform .15s;
  min-width: 0;          /* erlaubt das Schrumpfen im Grid */
}
.extra-item:hover { border-color: var(--orange); transform: translateY(-2px); }
.extra-item h3 {
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 12px;
}
/* Booqable-Widget an die Box-Breite zwingen (kein Überlauf mehr) */
.extra-item .booqable-product,
.extra-item .booqable-product-button { width: 100%; min-width: 0; }
.extra-item .booqable-product *,
.extra-item .booqable-product-button * { min-width: 0; max-width: 100%; }
.extra-item .booqable-product img,
.extra-item .booqable-product-button img { height: auto; }
.extra-group-title {
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mid);
  margin: 26px 0 14px;
}
.extra-group-title:first-child { margin-top: 0; }

/* ── Flow-Navigation (Zurück / Weiter) ───────────── */
.flow-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.btn-prev,
.btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .15s, background .15s;
}
.btn-next {
  background: var(--orange);
  color: #fff;
}
.btn-next:hover { opacity: .9; transform: scale(1.03); }
.btn-prev {
  background: transparent;
  color: var(--mid);
}
.btn-prev:hover { color: var(--dark); background: rgba(0,0,0,.04); }
.flow-nav .spacer { flex: 1; }

/* ── Sidebar-Infoblöcke ──────────────────────────── */
.info-card {
  background: var(--yellow);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.info-card.dark   { background: var(--dark); color: var(--cream); }
.info-card.orange { background: var(--orange); color: var(--cream); }
.info-card + .info-card,
.info-card + .contact-mini { margin-top: 14px; }
.info-card h3 {
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .03em;
  margin-bottom: 12px;
}
.info-card p, .info-card li { font-size: .88rem; line-height: 1.65; }
.info-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.info-card li { display: flex; gap: 10px; }
.info-card li::before {
  content: '✓';
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 700;
  flex-shrink: 0;
}
.info-card.dark li::before   { color: var(--yellow); }
.info-card.orange li::before { color: var(--cream); }

.price-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.price-pill {
  background: rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 600;
}

/* ── Kontakt-Mini ────────────────────────────────── */
.contact-mini {
  text-align: center;
  padding: 22px 24px;
  background: #fff;
  border-radius: var(--r-lg);
}
.contact-mini p { font-size: .88rem; color: var(--mid); margin-bottom: 8px; }
.contact-mini a {
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-mini a:hover { color: var(--dark); }

/* ── Danke-Seite ─────────────────────────────────── */
.thanks {
  text-align: center;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 48px 36px;
}
.thanks .check {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-family: 'Climate Crisis', sans-serif;
}
.thanks h2 {
  font-family: 'Climate Crisis', sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: -.5px;
  margin-bottom: 12px;
}
.thanks p { color: var(--mid); line-height: 1.7; max-width: 460px; margin: 0 auto 10px; }
.order-meta {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin: 22px auto 28px;
  padding: 18px 26px;
  background: var(--cream);
  border-radius: var(--r-lg);
  font-size: .92rem;
}
.order-meta strong { font-family: 'Climate Crisis', sans-serif; }

/* ── Footer ──────────────────────────────────────── */
footer.site-footer {
  border-top: 1.5px solid var(--hairline);
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .85rem;
  color: var(--mid);
}
footer.site-footer .f-links { display: flex; gap: 22px; flex-wrap: wrap; }
footer.site-footer a {
  color: var(--dark);
  text-decoration: none;
  opacity: .8;
  transition: opacity .15s;
}
footer.site-footer a:hover { opacity: 1; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  nav.site-nav { padding: 14px 20px; }
  .card { padding: 24px; }
  footer.site-footer { padding: 22px 20px; }
}
@media (max-width: 560px) {
  .extras-grid { grid-template-columns: 1fr; }
  .stepper li { font-size: .64rem; }
  .stepper .dot { width: 30px; height: 30px; font-size: .75rem; }
  .stepper::before { top: 14px; }
  .flow-nav { flex-direction: column-reverse; align-items: stretch; }
  .btn-prev, .btn-next { justify-content: center; }
}