#mbb-booking-root .mbb-total{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
#mbb-booking-root .mbb-total .mbb-old{ text-decoration: line-through; opacity:.65; font-weight:500; }
#mbb-booking-root .mbb-total .mbb-new{ font-weight:800; }
#mbb-booking-root .mbb-total .mbb-save{ font-size:12px; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; padding:2px 6px; border-radius:999px; }
/* =========================================
   MBB Booking – Polished UI (scoped)
   Notes:
   - Drop-in replacement for public/styles.css
   - No markup changes required
   - Still strictly scoped to #mbb-booking-root
   ========================================= */

/* ------ Design Tokens (Light) ------ */
#mbb-booking-root{
  --bg:       hsl(0 0% 97%);   /* Seitenhintergrund */
  --card:     hsl(0 0% 100%);  /* Karten */
  --surface:  hsl(0 0% 96%);   /* Eingabefelder, Chips */
  --ink:      hsl(215 20% 15%);/* Haupttext dunkelgrau */
  --ink-dim:  hsl(215 10% 40%);/* Sekundärtext */
  --muted:    hsl(0 0% 92%);   /* Badge, leise Flächen */
  --ring:     hsl(215 15% 70%);
  --brand:    #38bdf8;         /* dezenteres Blau */
  --brand-ink:hsl(0 0% 100%);  /* Text auf Brand-Flächen */
  --danger:   hsl(0 72% 46%);
  --ok:       hsl(142 45% 34%);
  --warning:  hsl(45 100% 42%);
  --shadow-1: 0 1px 2px rgba(0,0,0,.08);
  --shadow-2: 0 10px 30px rgba(0,0,0,.08);
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 20px;
  --gap-5: 28px;
  
  /* Step 3 stabile Spalten - responsive Höhe */
  --step3-pane-h: clamp(380px, 52vh, 540px);
}

/* Mobile: etwas kleinere Höhe */
@media (max-width: 980px) {
  #mbb-booking-root {
    --step3-pane-h: clamp(340px, 55vh, 460px);
  }
}

/* Box sizing + font */
#mbb-booking-root, #mbb-booking-root *{ box-sizing: border-box; }
#mbb-booking-root{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }

/* Root layout */
#mbb-booking-root{
  display:grid; place-items:center; padding: clamp(20px, 3.2vw, 40px) 16px;
  color:var(--ink); background: transparent;
}

/* Card (helle Variante) */
#mbb-booking-root .mbb-card{
  width:100%; 
  max-width: 860px; 
  border-radius: var(--radius-l);

  /* Hintergrund: heller Verlauf statt dunkel */
  background:
    radial-gradient(1200px 50% at -15% 0%, rgba(14,165,233,.05), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);

  /* Border + Shadow angepasst für Light */
  border:1px solid #e0e0e0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.08);

  padding: clamp(18px, 2.6vw, 28px);
}


/* Header */
#mbb-booking-root .mbb-header{ display:flex; align-items:flex-end; justify-content:space-between; gap: var(--gap-3); margin-bottom: var(--gap-3); }
#mbb-booking-root .mbb-title{ font-size: clamp(20px, 3.2vw, 28px); font-weight: 800; letter-spacing:.2px; }
#mbb-booking-root .mbb-sub{ color:var(--ink-dim); font-size: 14px; margin-top: 2px; }

/* Hinweisbanner in Schritt Daten */
#mbb-booking-root .mbb-info-banner{ display:flex; align-items:center; gap:12px; padding: 12px 14px; margin: 6px 0 12px; border-radius: 12px; animation: mbb-pop-card .6s cubic-bezier(.2,.9,.2,1) both; }
#mbb-booking-root .mbb-info-banner.exclusive{
  background: linear-gradient(135deg, #ecfeff 0%, #f0f9ff 50%, #e0f2fe 100%);
  border: 1px solid #7dd3fc;
  color: #0c4a6e;
  box-shadow: 0 12px 30px rgba(125,211,252,.25), inset 0 0 0 1px rgba(255,255,255,.6);
}
#mbb-booking-root .mbb-info-banner.full{ grid-column: 1 / -1; }
#mbb-booking-root .mbb-upgrade-tip{
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 50%, #fef3c7 100%);
  border: 1px solid #f59e0b;
  color: #92400e;
}
#mbb-booking-root .mbb-info-spacer{ flex: 1 1 auto; }
#mbb-booking-root .mbb-info-right{ display:flex; align-items:center; gap:8px; }
#mbb-booking-root .mbb-timer{
  font-variant-numeric: tabular-nums; font-weight: 800; color: #0c4a6e;
  background: #ffffffaa; border: 1px solid #7dd3fc; border-radius: 8px;
  padding: 6px 10px; min-width: 64px; text-align: center;
}
#mbb-booking-root .mbb-timer-wrap{ display:flex; flex-direction:column; align-items:center; gap:3px; }
#mbb-booking-root .mbb-timer-hint{ font-size: 11px; color:#0c4a6e; opacity:.8; letter-spacing:.2px; }
#mbb-booking-root .mbb-info-emoji{ font-size: 22px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
#mbb-booking-root .mbb-info-text{ line-height: 1.25; }
#mbb-booking-root .mbb-info-title{ font-weight: 800; letter-spacing: .2px; }
#mbb-booking-root .mbb-info-sub{ font-size: 14px; opacity: .9; }
@keyframes mbb-fade-in-up{ 0%{ transform: translateY(6px); opacity:0; } 100%{ transform: translateY(0); opacity:1; } }
@keyframes mbb-pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
@keyframes mbb-pop-card{ 0%{ transform: scale(.98); box-shadow: 0 0 0 rgba(0,0,0,0); opacity:.0; } 60%{ transform: scale(1.01); box-shadow: 0 10px 26px rgba(125,211,252,.28); opacity:1; } 100%{ transform: scale(1); box-shadow: 0 8px 24px rgba(125,211,252,.25); } }

/* Stepper */
#mbb-booking-root .mbb-stepper{ display:flex; gap: var(--gap-2); margin: 8px 0 18px; flex-wrap:wrap; }
#mbb-booking-root .mbb-step{
  padding: 8px 12px; border-radius: 999px; font-size: 13px; line-height:1;
  color: var(--ink-dim); background: var(--muted); border:1px solid transparent; position:relative; isolation:isolate;
}
#mbb-booking-root .mbb-step.is-active{
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  color: #ffffff; font-weight: 800; box-shadow: 0 6px 16px rgba(14,165,233,.18);
}
#mbb-booking-root .mbb-step:focus{ outline:none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent); }

/* === Reward HUD (Progress + Coins) === */
#mbb-booking-root .mbb-hud{
  margin:-2px 0 12px;
  display:grid;
  gap:10px;
}

/* Track (Hintergrund des Balkens) */
#mbb-booking-root .mbb-progress-track{
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--surface); /* Fallback ohne color-mix */
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,0));
  border: 1px solid var(--ring);
  z-index: 1; /* Sichtbarkeit absichern */
}

/* Gefüllter Teil des Balkens */
#mbb-booking-root .mbb-progress-bar{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%; /* wird per JS gesetzt */
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  background-size: 28px 100%, 100% 100%;
  transition: width .5s cubic-bezier(.2,.9,.2,1), filter .2s;
  filter: saturate(110%);
}

/* Die „Coins" (1–4 Kreise) unter dem Balken */
#mbb-booking-root .mbb-rewards{
  display:flex;
  gap:8px;
  justify-content:space-between;
}
#mbb-booking-root .mbb-coin{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:800; font-size:12px;
  color:#ffffff;
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  border:1px solid #38bdf8;
  transform: translateZ(0);
}
#mbb-booking-root .mbb-coin.is-earned{ box-shadow:0 8px 18px rgba(14,165,233,.28); animation: mbbPop .32s ease-out; }
@keyframes mbbPop{
  0%{transform:scale(.85);}
  60%{transform:scale(1.12);}
  100%{transform:scale(1);}
}

/* Grids */
#mbb-booking-root .mbb-grid{ display:grid; gap: var(--gap-3); grid-template-columns:1fr 1fr; }
#mbb-booking-root .mbb-grid-1{ display:grid; gap: var(--gap-3); }
#mbb-booking-root .mbb-grid-2{ display:grid; gap: var(--gap-3); grid-template-columns: 1fr 1fr; align-items:start; }
#mbb-booking-root .full-content{ display:contents; }
#mbb-booking-root .mbb-grid-2 .full{ grid-column: 1 / -1; }
@media (max-width: 860px){ #mbb-booking-root .mbb-grid-2{ grid-template-columns: 1fr; } }
@media (max-width: 860px){ #mbb-booking-root .mbb-grid{ grid-template-columns:1fr; } }

/* Zweispaltige Zeile für einzelne Feldgruppen */
#mbb-booking-root .mbb-grid-2row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); }
@media (max-width: 860px){ #mbb-booking-root .mbb-grid-2row{ grid-template-columns: 1fr; } }

/* Fields */
#mbb-booking-root .mbb-field{ display:grid; gap: var(--gap-2); }
#mbb-booking-root .mbb-grid-2 .mbb-field.full{ grid-column: 1 / -1; }
#mbb-booking-root .mbb-grid-2 .mbb-box.full{ grid-column: 1 / -1; }
#mbb-booking-root .mbb-label{ font-size: 13px; color: var(--ink-dim); }
#mbb-booking-root .mbb-input,
#mbb-booking-root .mbb-select{
  width:100%; padding: 12px 14px; border-radius: var(--radius-m);
  background: var(--surface); color: var(--ink);
  border:1px solid color-mix(in oklab, var(--ring) 85%, transparent);
  outline:none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#mbb-booking-root .mbb-ac{ position: relative; }
#mbb-booking-root .mbb-ac-list{ position:absolute; inset:auto 0 0 0; transform: translateY(calc(100% + 6px)); background:#fff; border:1px solid #e0e0e0; border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.08); z-index: 20; overflow: hidden; }
#mbb-booking-root .mbb-ac-item{ display:block; width:100%; text-align:left; padding:10px 12px; background:#fff; border:none; cursor:pointer; }
#mbb-booking-root .mbb-ac-item:hover{ background:#f5f7fa; }
#mbb-booking-root .mbb-ac-actions{ margin-top:6px; }
#mbb-booking-root .mbb-link{ background:none; border:none; color:#0ea5e9; font-weight:600; cursor:pointer; padding:0; }
#mbb-booking-root .mbb-input::placeholder{ color: color-mix(in oklab, var(--ink-dim) 75%, transparent); }
#mbb-booking-root .mbb-input:focus,
#mbb-booking-root .mbb-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent);
}

/* Summary (helle Variante) */
#mbb-booking-root .mbb-summary{
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-m);
  padding: var(--gap-3);
  display: grid;
  gap: var(--gap-2);
}

#mbb-booking-root .mbb-row{ display:flex; justify-content:space-between; gap: var(--gap-2); font-size:14px; color: var(--ink-dim); }
#mbb-booking-root .mbb-row strong{ color: var(--ink); }
#mbb-booking-root .mbb-hint{ font-size:12px; color: var(--ink-dim); }

/* Garantie-Hinweis unter Basispreis */
#mbb-booking-root .mbb-guarantee{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in oklab, #0ea5e9 8%, #ffffff);
  border: 1px solid color-mix(in oklab, #0ea5e9 35%, var(--ring));
  box-shadow: 0 4px 12px rgba(14,165,233,.12);
}
#mbb-booking-root .mbb-guarantee-label{
  font-weight: 800;
  color: #0b3b7a; /* dunkler Blau-Ton */
}
#mbb-booking-root .mbb-guarantee-sub{
  font-size: 12px;
  color: #155e75; 
  margin-top: 2px;
}

/* Alerts */
#mbb-booking-root .mbb-alert{ margin-top:10px; padding:12px 14px; border-radius: var(--radius-m); border:1px solid var(--ring); background: var(--surface); color: var(--ink-dim); }
#mbb-booking-root .mbb-alert.err{
  background: #fff0f0;
  border: 1px solid #f0b3b3;
  color: #a80000;
}
#mbb-booking-root .mbb-alert.ok{
  background: #f0fff4;       /* zartes Grün */
  border: 1px solid #b3e6c1; /* heller Rand */
  color: #006633;            /* dunkler, gut lesbarer Text */
}


/* Buttons */
#mbb-booking-root .mbb-actions{ display:flex; gap: var(--gap-2); justify-content:flex-end; margin-top: var(--gap-3); }
#mbb-booking-root .mbb-btn{
  padding: 12px 16px; border-radius: var(--radius-m); border:1px solid color-mix(in oklab, var(--ring) 80%, transparent);
  background: var(--surface); color: var(--ink); cursor:pointer; transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#mbb-booking-root .mbb-btn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--surface) 70%, white 30%); }
#mbb-booking-root .mbb-btn:focus{ 
  outline:none; 
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent); 
  border-color: var(--brand); 
  transition: box-shadow .15s ease, border-color .15s ease;
}
#mbb-booking-root .mbb-btn.primary{
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  color: #ffffff; border:1px solid #38bdf8; font-weight: 800; letter-spacing:.2px;
}
#mbb-booking-root .mbb-btn.primary:hover{ filter: brightness(1.02); box-shadow: 0 12px 26px rgba(14,165,233,.22); }
#mbb-booking-root .mbb-btn.ghost{ background: transparent; border-color: color-mix(in oklab, var(--ring) 75%, transparent); }
#mbb-booking-root .mbb-btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* CTA Pulse (nur für den Submit-Button am letzten Schritt) */
#mbb-booking-root .mbb-btn.primary.mbb-cta-pulse{
  position: relative;                     /* für das ::after-Ringlayer */
  animation: mbbPulseGlow 1.9s ease-in-out infinite;
}

/* Trust-Badges – kompakt, nur unterhalb der Actions */
#mbb-booking-root .mbb-trust{
  display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin-top: 10px;
}
#mbb-booking-root .mbb-trust-badge{
  font-size:12px; line-height:1; padding:8px 10px; border-radius:999px;
  background: var(--muted); color: var(--ink); border:1px solid var(--ring);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
@media (min-width: 981px){
  /* Desktop dezenter Abstand */
  #mbb-booking-root .mbb-trust{ margin-top: 8px; }
}
@media (max-width: 980px){
  /* Mobil: leicht fließend mit der Sticky-Bar harmonieren */
  #mbb-booking-root .mbb-trust{ opacity:.95; }
}

#mbb-booking-root .mbb-btn.primary.mbb-cta-pulse::after{
  content:"";
  position:absolute; inset:-4px;          /* minimal größer als der Button */
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 45%, transparent);
  opacity:.9;
  animation: mbbPulseRing 2.2s ease-out infinite;
}

/* dezentes Helligkeits-Breathing + Sättigung + Scale */
@keyframes mbbPulseGlow{
  0%,100%{
    filter: none;
    transform: scale(1);
  }
  50%{
    /* -> hier drehst du am Effekt: */
    filter: brightness(1.22) saturate(1.18);
    transform: scale(1.05);
  }
}

/* weicher Ring der ausblendet */
@keyframes mbbPulseRing{
  0%{
    transform: scale(1);
    opacity:.30;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 35%, transparent);
  }
  70%{
    transform: scale(1.06);
    opacity:0;
    box-shadow: 0 0 0 12px color-mix(in oklab, var(--brand) 0%, transparent);
  }
  100%{
    transform: scale(1);
    opacity:0;
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Auf Hover/Focus die Animation stoppen, damit es „ruhig" wirkt */
#mbb-booking-root .mbb-btn.primary.mbb-cta-pulse:hover,
#mbb-booking-root .mbb-btn.primary.mbb-cta-pulse:focus{
  animation: none;
}
#mbb-booking-root .mbb-btn.primary.mbb-cta-pulse:hover::after,
#mbb-booking-root .mbb-btn.primary.mbb-cta-pulse:focus::after{
  display:none;
}

/* Barrierefreiheit: reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  #mbb-booking-root .mbb-btn.primary.mbb-cta-pulse{
    animation: none;
  }
  #mbb-booking-root .mbb-btn.primary.mbb-cta-pulse::after{
    animation: none;
    opacity: 0;
  }
}

/* Loader */
@keyframes mbbSpin { to { transform: rotate(360deg); } }
#mbb-booking-root .mbb-loader{
  display:inline-block; width:16px; height:16px; border:2px solid #0000; border-top-color: color-mix(in oklab, var(--brand) 80%, white 20%);
  border-right-color: color-mix(in oklab, var(--brand) 80%, white 20%); border-radius:50%; animation: mbbSpin .6s linear infinite; vertical-align:text-bottom;
}

/* Times & Chips */
#mbb-booking-root .mbb-times{ display:flex; flex-wrap:wrap; gap: var(--gap-2); }
#mbb-booking-root .mbb-chip{
  padding:10px 12px; min-width:80px; min-height: 44px; text-align:center; border-radius: var(--radius-s);
  border:1px solid color-mix(in oklab, var(--ring) 80%, transparent);
  background: var(--surface); cursor:pointer; font-size:14px;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#mbb-booking-root .mbb-chip:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--surface) 82%, white 18%); }
#mbb-booking-root .mbb-chip[aria-disabled="true"]{ opacity:.38; cursor:not-allowed; text-decoration:line-through; }
#mbb-booking-root .mbb-chip.is-active{
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  color: #ffffff; border-color: #38bdf8; font-weight: 800; box-shadow: 0 10px 22px rgba(14,165,233,.18);
}

/* Date Navigator */
#mbb-booking-root .mbb-datebar{
  display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap: var(--gap-2);
  background: var(--surface); border:1px solid color-mix(in oklab, var(--ring) 80%, transparent); border-radius: var(--radius-m); padding: 6px 8px;
}
#mbb-booking-root .mbb-navbtn{
  display:grid; place-items:center; height:44px; border-radius: var(--radius-s);
  border:1px solid color-mix(in oklab, var(--ring) 80%, transparent);
  background: var(--muted); color: var(--ink); font-size:22px; line-height:1; cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#mbb-booking-root .mbb-navbtn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--muted) 80%, white 20%); }
#mbb-booking-root .mbb-navbtn:focus{ outline:none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent); border-color: var(--brand); }
#mbb-booking-root .mbb-navbtn:disabled{ opacity:.45; cursor:not-allowed; transform:none; background: color-mix(in oklab, var(--muted) 85%, black 15%); }
#mbb-booking-root .mbb-date-display{ text-align:center; font-weight: 800; letter-spacing:.2px; color: var(--ink); padding: 6px 4px; border-radius: 8px; white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Day Grid */
#mbb-booking-root .mbb-daygrid{ 
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
  gap: 10px; 
}
@media (max-width: 820px){ 
  #mbb-booking-root .mbb-daygrid{ 
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); 
  } 
}
@media (max-width: 560px){ 
  #mbb-booking-root .mbb-daygrid{ 
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); 
  } 
}

/* Day Button */
#mbb-booking-root .mbb-day{
  padding: 12px 8px; min-height: 48px; border-radius: var(--radius-s); text-align:center; line-height:1.3; font-size: 13px;
  background: var(--surface); color: var(--ink);
  border:1px solid color-mix(in oklab, var(--ring) 80%, transparent);
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  /* Text-Umbruch für lange Wochentage */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  /* Scroll-Snap für saubere Ausrichtung */
  scroll-snap-align: start;
}
/* Voll ausgebuchte Tage optisch deaktivieren */
#mbb-booking-root .mbb-day.is-full{
  opacity:.45;
  cursor: not-allowed;
  text-decoration: line-through;
  background: color-mix(in oklab, var(--surface) 92%, black 8%);
}

/* Voll ausgebuchte Tage optisch deaktivieren */
#mbb-booking-root .mbb-day.is-full{
  opacity:.45;
  cursor: not-allowed;
  text-decoration: line-through;
  background: color-mix(in oklab, var(--surface) 92%, black 8%);
}

/* Desktop: Spalten im Tages-Grid breiter machen */
@media (min-width: 861px){
  /* NUR so viele Spalten, wie in die Karte passen */
  #mbb-booking-root .mbb-daygrid{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    column-gap: var(--gap-2);
    row-gap: var(--gap-2);
    max-width: 100%;
  }

  /* Inhalt bleibt einzeilig, aber ohne harte Mindestbreite am Button */
  #mbb-booking-root .mbb-day{
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    min-width: 0;          /* wichtig: keine feste Breite am Button */
  }
}



#mbb-booking-root .mbb-day:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--surface) 82%, white 18%); }
#mbb-booking-root .mbb-day:focus{ outline:none; box-shadow: 0 0 0 4px rgba(14,165,233,.35); border-color: #0ea5e9; }
#mbb-booking-root .mbb-day.is-active{
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  color: #ffffff; border-color: #38bdf8; font-weight: 800; box-shadow: 0 10px 24px rgba(14,165,233,.18);
}

/* Hero/Shell (sidebar layout) */
#mbb-booking-root .mbb-hero{ min-height: 100vh; display:grid; place-items:center; padding: clamp(32px, 6vw, 64px) 16px; color: var(--ink); scroll-margin-top: 8px; }
#mbb-booking-root .mbb-shell{ width:100%; max-width:1200px; display:grid; grid-template-columns: 360px minmax(0,1fr); gap: var(--gap-4); }
#mbb-booking-root .mbb-aside{ background: var(--surface); border:1px solid color-mix(in oklab, var(--ring) 80%, transparent); border-radius: var(--radius-l); padding: var(--gap-4); box-shadow: var(--shadow-2); position: sticky; top: clamp(8px, 2vw, 18px); height: fit-content; will-change: transform; }
#mbb-booking-root .mbb-h2{ font-size: clamp(20px, 2.8vw, 26px); font-weight: 900; margin:0 0 2px; }
#mbb-booking-root .mbb-tag{ color: var(--ink-dim); margin:0 0 14px; font-size: 14px; }
#mbb-booking-root .mbb-bullets{ list-style:none; padding:0; margin:0 0 var(--gap-3); display:grid; gap: 6px; color: var(--ink); }
#mbb-booking-root .mbb-bullets li{ background: var(--card); border:1px solid color-mix(in oklab, var(--ring) 75%, transparent); border-radius: var(--radius-m); padding: 8px 10px; }
#mbb-booking-root .mbb-box{ background: var(--card); border:1px solid color-mix(in oklab, var(--ring) 75%, transparent); border-radius: var(--radius-m); padding: var(--gap-3); margin: var(--gap-3) 0; display:grid; gap: 10px; }
#mbb-booking-root .mbb-box-title{ font-weight: 800; color: var(--ink); margin-bottom: 6px; }
#mbb-booking-root .mbb-box-row{ display:flex; justify-content:space-between; gap: 10px; color: var(--ink-dim); font-size: 14px; }
#mbb-booking-root .mbb-note{ margin-top: 6px; color: var(--ink-dim); font-size: 13px; }
#mbb-booking-root .mbb-main{ display:grid; align-items:start; }
@media (max-width: 980px){ #mbb-booking-root .mbb-shell{ grid-template-columns:1fr; max-width: 860px; } #mbb-booking-root .mbb-aside{ position: static; } }

/* Checkbox (e.g., consent) */
#mbb-booking-root .mbb-checkbox{ display:flex; gap: 10px; align-items:flex-start; font-size:13px; color: var(--ink-dim); }
#mbb-booking-root .mbb-checkbox input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; accent-color: #0ea5e9; }
#mbb-booking-root .mbb-checkbox a{ color: #0ea5e9; text-decoration: underline; }

/* Newsletter Offer Box */
#mbb-booking-root .mbb-newsletter-offer{
  display: block;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 2px solid #10b981;
  border-radius: 12px;
  padding: 10px 12px;
}
#mbb-booking-root .mbb-nl-wrap{
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #064E3B;
}
#mbb-booking-root .mbb-nl-wrap input[type="checkbox"]{
  width: 18px; height: 18px; accent-color: #10b981;
}
#mbb-booking-root .mbb-nl-text{ line-height: 1.2; }
#mbb-booking-root .mbb-nl-title{ font-weight: 900; letter-spacing:.2px; }
#mbb-booking-root .mbb-nl-sub{ font-size: 12px; opacity: .9; }
#mbb-booking-root .mbb-nl-badge{
  font-weight: 900;
  color: #065f46;
  background: #a7f3d0;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
  padding: 4px 10px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #mbb-booking-root .mbb-btn,
  #mbb-booking-root .mbb-chip,
  #mbb-booking-root .mbb-day,
  #mbb-booking-root .mbb-navbtn{ transition: none; }
  #mbb-booking-root .mbb-loader{ animation-duration: 1.2s; }
}

/* HOTFIX: Sidebar + Layout boxen ohne #mbb-booking-root-Scope (LIGHT) */
section.mbb-hero:has(#mbb-booking-root){
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vw, 64px) 16px;
  color: var(--ink, #222);                 /* vorher #e9eef5 */
  background: var(--bg, #f7f7f7);
}

section.mbb-hero:has(#mbb-booking-root) .mbb-shell{
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 360px minmax(0,1fr);
  gap: 20px;
}

/* Sidebar-Card (hell) */
section.mbb-hero:has(#mbb-booking-root) .mbb-aside{
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: var(--radius-l);
  padding: var(--gap-4);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  position: sticky;
  top: clamp(8px, 2vw, 18px);
  height: fit-content;
}

/* Typo in der Sidebar */
section.mbb-hero:has(#mbb-booking-root) .mbb-h2{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--ink, #222);
}
section.mbb-hero:has(#mbb-booking-root) .mbb-tag{
  color: var(--ink-dim, #667085);         /* vorher #b3c0d1 */
  margin: 0 0 14px;
  font-size: 14px;
}

/* Bullets (hell) */
section.mbb-hero:has(#mbb-booking-root) .mbb-bullets{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 6px;
  color: var(--ink, #222);                /* Textfarbe */
}
section.mbb-hero:has(#mbb-booking-root) .mbb-bullets li{
  background: #ffffff;                    /* vorher #0c121a */
  border: 1px solid #e6e6e6;              /* vorher #1f2937 */
  border-radius: 12px;
  padding: 8px 10px;
}

/* Info-Boxen (hell) */
section.mbb-hero:has(#mbb-booking-root) .mbb-box{
  background: #ffffff;                    /* vorher #0c121a */
  border: 1px solid #e6e6e6;              /* vorher #2c374a */
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  display: grid;
  gap: 8px;
}
section.mbb-hero:has(#mbb-booking-root) .mbb-box-title{
  font-weight: 700;
  color: var(--ink, #222);                /* vorher #e9eef5 */
  margin-bottom: 4px;
}
section.mbb-hero:has(#mbb-booking-root) .mbb-box-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-dim, #667085);         /* vorher #b3c0d1 */
  font-size: 14px;
}
section.mbb-hero:has(#mbb-booking-root) .mbb-note{
  margin-top: 10px;
  color: var(--ink-dim, #667085);         /* vorher #b3c0d1 */
  font-size: 13px;
}

/* Responsive: 1 Spalte unter 980px */
@media (max-width: 980px){
  section.mbb-hero:has(#mbb-booking-root) .mbb-shell{
    grid-template-columns: 1fr;
    max-width: 820px;
  }
  section.mbb-hero:has(#mbb-booking-root) .mbb-aside{
    position: static;
  }
}


/* ==== Connected Layout Frame (macht aus 2 Boxen 1 Modul) ==== */
section.mbb-hero:has(#mbb-booking-root) .mbb-shell{
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid #e6e6e6;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  position: relative;
}


/* === Divider sitzt immer exakt zwischen Sidebar & Formular === */
section.mbb-hero:has(#mbb-booking-root) .mbb-shell{
  /* stelle diese 3 Werte auf deine echten Shell-Werte ein */
  --aside-w: 360px;   /* Sidebar-Spalte */
  --shell-gap: 20px;  /* Abstand zwischen den Spalten */
  --shell-pad: 22px;  /* Innenabstand der Shell */

  /* (falls noch nicht gesetzt) die Grid-Definition an die Variablen koppeln */
  display: grid;
  grid-template-columns: var(--aside-w) minmax(0,1fr);
  column-gap: var(--shell-gap);
  padding: var(--shell-pad);
  position: relative;
}

/* Divider mittig im Spalt platzieren – unabhängig von Bildschirmbreite */
@media (min-width: 981px){
  section.mbb-hero:has(#mbb-booking-root) .mbb-shell::after{
    content:"";
    position:absolute;
    top: var(--shell-pad);
    bottom: var(--shell-pad);

    /* Padding links + Sidebarbreite + halbes Gap – halbe Linienstärke */
    left: calc(var(--shell-pad) + var(--aside-w) + (var(--shell-gap) / 2) - .5px);
    width:1px;
    background: linear-gradient(180deg, #243043 0, #2a374b 50%, #243043 100%);
    opacity:.6;
    pointer-events:none;
  }
}

/* Im 1-Spalten-Layout keinen Divider zeigen */
@media (max-width: 980px){
  section.mbb-hero:has(#mbb-booking-root) .mbb-shell::after{ display:none; }
}


/* Inner-Karten "andocken": Sidebar flacher machen */
section.mbb-hero:has(#mbb-booking-root) .mbb-aside{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}


/* Sidebar-Module als Unterkarten im Frame – HELL */
section.mbb-hero:has(#mbb-booking-root) .mbb-bullets li,
section.mbb-hero:has(#mbb-booking-root) .mbb-box{
  background:#ffffff;
  border:1px solid #e6e6e6;
}

/* Head über der Shell (wenn du <div class="mbb-head"> nutzt) */
section.mbb-hero:has(#mbb-booking-root) .mbb-head{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 14px;
  padding: 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

section.mbb-hero:has(#mbb-booking-root) .mbb-head h1{
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  color: var(--ink, #222);            /* helles Theme */
}

section.mbb-hero:has(#mbb-booking-root) .mbb-head p{
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim, #667085);     /* dezenter Sekundärtext */
}


/* (Konfetti entfernt) */
#mbb-booking-root .mbb-card{ position: relative; }          /* Layer sitzt sicher auf der Karte */
#mbb-booking-root{ position: relative; }                    /* Fallback, falls auf Root gerendert wird */

/* ===== Addons UI (scoped) ===== */
#mbb-booking-root .mbb-addons{
  display:grid;
  gap:10px;
}
/* Upsell Tipp-Karten */
#mbb-booking-root .mbb-tip-list{ display:grid; gap:12px; margin-bottom:12px; }
#mbb-booking-root .mbb-tip-card{
  background: color-mix(in oklab, #e0f2fe 70%, white 30%);
  border:1px solid color-mix(in oklab, #60a5fa 60%, transparent);
  border-radius:10px; padding:12px; display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center;
  animation: mbb-pulse 2s ease-in-out infinite;
}
#mbb-booking-root .mbb-tip-card.is-selected{ animation: none; border-color:#38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,.18) inset; }
#mbb-booking-root .mbb-tip-head{ grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:center; }
#mbb-booking-root .mbb-tip-badge{ background:#3b82f6; color:white; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; }
#mbb-booking-root .mbb-tip-info{ background:transparent; border:0; color:#1e40af; font-weight:700; cursor:pointer; }
#mbb-booking-root .mbb-tip-body .mbb-card-title{ color:#0f172a; }
#mbb-booking-root .mbb-tip-body .mbb-card-sub{ color:#1e3a8a; font-size:13px; margin-top:2px; }
#mbb-booking-root .mbb-tip-actions{ display:flex; gap:10px; align-items:center; }
#mbb-booking-root .mbb-btn.success{
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
  border-color: #38bdf8;
  color: #062544;
  text-shadow: 0 0 6px rgba(255,255,255,.3);
  box-shadow: 0 0 12px rgba(56,189,248,.6), 0 0 28px rgba(14,165,233,.35), inset 0 0 6px rgba(255,255,255,.2);
  transition: none;
}

#mbb-booking-root .mbb-btn.success:hover,
#mbb-booking-root .mbb-btn.success:focus{
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56,189,248,.6), 0 0 28px rgba(14,165,233,.35), inset 0 0 6px rgba(255,255,255,.2);
  transform: none;
  filter: none;
}

/* Mobile Fix: Tipp-Karten kompakt, kein "Aufblähen" durch Zeilenumbrüche */
@media (max-width: 480px){
  #mbb-booking-root .mbb-tip-card{ grid-template-columns: 1fr; }
  #mbb-booking-root .mbb-tip-body{ min-width: 0; }
  #mbb-booking-root .mbb-tip-body .mbb-card-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mbb-booking-root .mbb-tip-body .mbb-card-sub{ 
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  #mbb-booking-root .mbb-tip-actions{ justify-content: space-between; margin-top: 6px; }
  #mbb-booking-root .mbb-tip-actions strong,
  #mbb-booking-root .mbb-tip-actions span{ white-space: nowrap; }
  #mbb-booking-root .mbb-tip-actions .mbb-btn{ flex-shrink: 0; }
}

@keyframes mbb-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(59,130,246,0.45); }
  70%{ box-shadow: 0 0 0 10px rgba(59,130,246,0); }
  100%{ box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
#mbb-booking-root .mbb-addon{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border:1px solid color-mix(in oklab, var(--ring) 80%, transparent);
}
#mbb-booking-root .mbb-addon input[type="checkbox"]{
  width:18px; height:18px; accent-color: var(--brand);
}
#mbb-booking-root .mbb-addon-label{
  flex:1 1 auto;
}
#mbb-booking-root .mbb-badge{
  padding:3px 8px;
  font-size:11px;
  border-radius:999px;
  background: var(--muted);
  color: var(--ink-dim);
  border:1px solid var(--ring);
  white-space:nowrap;
}
#mbb-booking-root .mbb-badge.ok{
  background: color-mix(in oklab, var(--brand) 28%, var(--muted));
  color: var(--brand-ink);
  border-color: color-mix(in oklab, var(--brand) 50%, var(--ring));
}


/* Reduced motion (Konfetti entfernt) */

/* Nur auf der Seite mit dem Kalender-Hero */
@media (max-width: 980px){
  section.mbb-hero:has(#mbb-booking-root) .mbb-aside{ display: none; }
}

/* Sanfter Scroll-Frame für den Buchungsschritt, verhindert Sprünge beim Inhaltstausch */
#mbb-booking-root .mbb-card{ scroll-margin-top: 12px; }
html:has(#mbb-booking-root) { scroll-behavior: smooth; }
#mbb-booking-root .mbb-card{ contain: layout paint; }

/* Mobile engeres Grid – nur im Kalender */
@media (max-width: 380px){
  #mbb-booking-root .mbb-daygrid{ grid-template-columns: repeat(2, 1fr); }
}

/* Page-scope Overflow-Fix: wirkt nur auf Seiten mit dem Widget */
html:has(#mbb-booking-root),
body:has(#mbb-booking-root){
  overflow-x: hidden;
}

/* === Success Hero === */
#mbb-booking-root .mbb-success-hero{ display:flex; justify-content:center; margin: 10px 0 14px; }
#mbb-booking-root .mbb-success-badge{
  width: 64px; height: 64px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-size: 34px; font-weight: 800; color: #065f46;
  background: radial-gradient(120px 120px at 30% 30%, #86efac, #34d399);
  box-shadow: 0 8px 30px rgba(16,185,129,.35), inset 0 0 0 6px rgba(255,255,255,.5);
  animation: mbb-pop-in .6s cubic-bezier(.2,.9,.2,1) both, mbb-glow 3s ease-in-out infinite .6s;
}
#mbb-booking-root .mbb-success-line{
  text-align:center; font-weight:800; color:#065f46; margin: 2px 0 12px; letter-spacing:.2px;
  animation: mbb-fade-up .6s ease-out both .1s;
}
/* ICS/Calendar actions */
#mbb-booking-root .mbb-ics-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin: 8px 0 14px; }
@keyframes mbb-pop-in{ 0%{ transform: scale(.6); opacity:0; } 60%{ transform: scale(1.1); opacity:1; } 100%{ transform: scale(1); } }
@keyframes mbb-glow{ 0%,100%{ box-shadow: 0 8px 30px rgba(16,185,129,.35), inset 0 0 0 6px rgba(255,255,255,.5); }
  50%{ box-shadow: 0 10px 36px rgba(16,185,129,.55), inset 0 0 0 8px rgba(255,255,255,.6); } }
@keyframes mbb-fade-up{ 0%{ transform: translateY(8px); opacity:0; } 100%{ transform: translateY(0); opacity:1; } }

/* Ansprechpartner Box in Success */
#mbb-booking-root .mbb-contact-box{
  background: #f8fafc;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 14px;
  margin: 8px 0 14px;
}
#mbb-booking-root .mbb-contact-head{ font-weight: 700; color: #0f172a; margin-bottom: 6px; }
#mbb-booking-root .mbb-contact-body{ color:#0f172a; }
#mbb-booking-root .mbb-contact-name{ font-weight: 600; margin-bottom: 4px; }
#mbb-booking-root .mbb-contact-line a{ color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(15,23,42,.25); }
#mbb-booking-root .mbb-contact-line a:hover{ border-color: rgba(15,23,42,.5); }
#mbb-booking-root .mbb-contact-line{ margin: 2px 0; }
#mbb-booking-root .mbb-contact-note{ margin-top: 8px; color:#334155; font-size: 14px; }

/* Next free slots badge */
#mbb-booking-root .mbb-nextslots{ margin-top: 10px; background: color-mix(in oklab, #e0f2fe 70%, white 30%); border:1px solid color-mix(in oklab, #60a5fa 60%, transparent); border-radius: 10px; padding: 10px; animation: mbb-fade-up .4s ease-out both; }
#mbb-booking-root .mbb-next-label{ font-weight:800; color:#0c4a6e; margin-bottom:6px; }
#mbb-booking-root .mbb-next-list{ display:flex; flex-wrap:wrap; gap:6px; }
#mbb-booking-root .mbb-next-pill{ background:#0ea5e9; color:white; font-weight:700; padding:4px 10px; border-radius:999px; font-size:12px; box-shadow: 0 1px 0 rgba(0,0,0,.1); }
#mbb-booking-root .mbb-next-hint{ color:#155e75; font-size:12px; margin-top:6px; }

@media (prefers-reduced-motion: reduce){
  #mbb-booking-root .mbb-success-badge{ animation: none; }
}

/* FIX A: nur für den Kalender-Hero – verhindert Überbreite */
section.mbb-hero:has(#mbb-booking-root),
section.mbb-hero:has(#mbb-booking-root) *{
  box-sizing: border-box;
}

/* FIX B: mobil volle Breite + Kinder kappen – nur beim Kalender-Hero */
@media (max-width: 980px){
  section.mbb-hero:has(#mbb-booking-root) .mbb-shell{
    width: 100%;
    max-width: 100%;
    padding: 16px;     /* vorher 22px */
    overflow: hidden;  /* falls ein Kind zu breit ist */
    /* Mobil: äußeren Rahmen/Schatten der Shell entfernen */
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
}

/* FIX C (Konfetti entfernt) */

    
/* === MOBILE HARD-CENTER (nur Seiten mit dem Kalender) === */
@media (max-width: 980px){
  /* 1) Shell nicht mehr als Grid/Flex, damit nix „zieht" */
  section.mbb-hero:has(#mbb-booking-root) .mbb-shell{
    display: block !important;
    padding-left: 8px;   /* mehr verfügbare Breite für die innere Karte */
    padding-right: 8px;  /* links/rechts enger → Karte wirkt breiter */
    box-sizing: border-box;
    /* sicherstellen, dass der Rahmen auch hier weg ist */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* 2) React-Root zentrieren */
  section.mbb-hero:has(#mbb-booking-root) #mbb-booking-root{
    width: 100%;
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) Die eigentliche Buchungsbox (innere Box) zentrieren */
  section.mbb-hero:has(#mbb-booking-root) #mbb-booking-root .mbb-card{
    width: 100%;
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Divider sicher aus */
  section.mbb-hero:has(#mbb-booking-root) .mbb-shell::after{ display:none !important; }
}

/* === Fallback ohne :has() – wirkt NUR innerhalb des Kalenders === */
@media (max-width: 980px){
  #mbb-booking-root{
    width: 100%;
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #mbb-booking-root .mbb-card{
    width: 100%;
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
}

/* =======================
   MOBILE POLISH PACK (nur Kalender-Seite)
   ======================= */
@media (max-width: 980px){
  /* Head: Titel und Untertitel oben bündig, wenn der Untertitel umbricht */
  section.mbb-hero:has(#mbb-booking-root) .mbb-head{
    align-items: flex-start;
  }
  /* Seite: äußeres Padding noch enger → mehr Breite für die Buchungsbox */
  section.mbb-hero:has(#mbb-booking-root){
    padding-left: 8px;
    padding-right: 8px;
  }
  /* 0) Hard-Center & Container-Basics */
  section.mbb-hero:has(#mbb-booking-root) .mbb-shell{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;   /* Full-bleed: Container-Padding entfernen */
    padding-right:0 !important;
    box-sizing:border-box !important;
  }
  /* Full-bleed: Root füllt Viewport, verlässt Theme-Container */
  section.mbb-hero:has(#mbb-booking-root) #mbb-booking-root,
  #mbb-booking-root{
    /* mit sichtbarem Rand (12px je Seite) */
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: calc(50% - 50vw + 12px) !important;
    margin-right: calc(50% - 50vw + 12px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #mbb-booking-root .mbb-card{
    margin-left:auto !important;
    margin-right:auto !important;
    width: calc(100vw - 24px);      /* sichtbarer Rand erhalten */
    max-width: calc(100vw - 24px);
    padding: 22px 22px 26px; /* größer wie der frühere Außenrahmen → mehr Luft */
    border-radius: 22px;     /* an den früheren Frame angeglichen */
    box-sizing:border-box;
  }
  section.mbb-hero:has(#mbb-booking-root) .mbb-shell::after{ display:none !important; }

  /* 1) Kompaktere Scale nur im Widget */
  #mbb-booking-root{
    --gap-1: 6px;
    --gap-2: 10px;
    --gap-3: 12px;
    --gap-4: 16px;
    --gap-5: 22px;
  }
  #mbb-booking-root .mbb-title{ font-size: 20px; }
  #mbb-booking-root .mbb-sub{ display:none; } /* Untertitel aus, schafft Ruhe */

  /* 2) Stepper ausblenden – HUD reicht mobil */
  #mbb-booking-root .mbb-stepper{ display:none !important; }

  /* 3) Form Felder kompakter */
  #mbb-booking-root .mbb-label{ font-size:12px; }
  #mbb-booking-root .mbb-input,
  #mbb-booking-root .mbb-select{
    padding: 11px 12px;
    min-height: 44px;
  }
  #mbb-booking-root .mbb-summary{ gap:10px; }

  /* 4) Datum + Zeiten übersichtlich */
  #mbb-booking-root .mbb-datebar{
    grid-template-columns:40px 1fr 40px;
    gap:10px;
    padding:6px;
  }
  #mbb-booking-root .mbb-date-display{
    font-weight:800; font-size:14px;
  }

  /* Day-Grid enger (3 -> 2 Spalten unter 420px) */
  @media (max-width: 480px){
    #mbb-booking-root .mbb-daygrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
  @media (max-width: 420px){
    #mbb-booking-root .mbb-daygrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }

  /* Times als echtes Grid → keine schiefen Zeilen */
  #mbb-booking-root .mbb-times{
    display:grid; 
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:10px;
  }
  @media (max-width: 480px){
    #mbb-booking-root .mbb-times{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  #mbb-booking-root .mbb-chip{
    min-width: 0;               /* verhindert Überbreite */
    width: 100%;                /* füllt die Grid-Spalte */
    padding: 10px 10px;
  }

  /* 5) Buttons/Actions: sticky Bottom-Bar */
  #mbb-booking-root .mbb-actions{
  position: sticky;
  bottom: max(env(safe-area-inset-bottom, 0px), 8px);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.85) 60%,
      rgba(255,255,255,1) 100%);
  padding-top: 10px;
  margin-top: 14px;
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px); /* iOS fix */
  z-index: 3;
}

  #mbb-booking-root .mbb-btn{
    flex:1 1 auto;           /* Buttons teilen sich Breite */
    min-height: 44px;
  }

  /* 6) Kleinkram: Reihen enger, Texte etwas kleiner */
  #mbb-booking-root .mbb-row{ font-size:13px; }
  #mbb-booking-root .mbb-hint{ font-size:11px; }
}

/* XS-Fine-Tuning (≤360px) */
@media (max-width: 360px){
  #mbb-booking-root .mbb-date-display{ font-size:13px; }
  #mbb-booking-root .mbb-btn{ padding:10px 12px; }
}

/* Sicherheit: Overflow nie horizontal auf Kalender-Seiten */
html:has(#mbb-booking-root),
body:has(#mbb-booking-root){ overflow-x:hidden; }

@media (min-width: 861px){
  /* passt IMMER in die Gesamtbreite der Karte */
  #mbb-booking-root .mbb-grid:has(.mbb-check-card){
    /* rechte Spalte fix/flexibel, linke = Rest */
    --sum-w: 300px;                 /* Zielbreite Summary */
    --gap-w: 12px;                  /* Spaltabstand */

    grid-template-columns:
      minmax(0, calc(100% - (var(--sum-w) + var(--gap-w))))
      minmax(260px, var(--sum-w));

    column-gap: var(--gap-w);
    align-items: start;
  }

  /* Summary hart einsperren, damit sie nicht wächst */
  #mbb-booking-root .mbb-grid:has(.mbb-check-card) > .mbb-summary{
    max-width: var(--sum-w);
    width: 100%;
  }

  /* Upgrade-Tipp rechts positionieren, bündig mit Summary */
  #mbb-booking-root .mbb-grid:has(.mbb-check-card) > .mbb-upgrade-tip{
    grid-column: 2;
    align-self: start;
  }
}

/* Qty Control für Halle-Addons */
#mbb-booking-root .mbb-qty{ display:inline-flex; align-items:center; border:1px solid #cbd5e1; border-radius:10px; overflow:hidden; background:#ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
#mbb-booking-root .mbb-qty-btn{ background:#e5e7eb; color:#111827; border:0; padding:6px 12px; font-weight:900; cursor:pointer; line-height:1; }
#mbb-booking-root .mbb-qty-btn + .mbb-qty-btn{ border-left:1px solid #cbd5e1; }
#mbb-booking-root .mbb-qty-btn:hover{ background:#d1d5db; }
#mbb-booking-root .mbb-qty-btn:disabled{ opacity:.6; cursor:not-allowed; }
#mbb-booking-root .mbb-qty-btn:focus{ outline:none; box-shadow:none; }
#mbb-booking-root .mbb-qty-val{ min-width:32px; text-align:center; font-weight:800; padding:2px 10px; background:#ffffff; color:#111827; border-left:1px solid #cbd5e1; border-right:1px solid #cbd5e1; }
#mbb-booking-root .mbb-qty-val.bump{ animation: mbb-qty-bump .22s ease-in-out; }
@keyframes mbb-qty-bump{ 0%{ transform: scale(0.92); background:#eef2ff; } 60%{ transform: scale(1.06); background:#e0f2fe; } 100%{ transform: scale(1); background:#ffffff; } }

@media (min-width: 861px){
  /* Extras-Step: Summary bündig mit der ersten Zusatzleistung */
  #mbb-booking-root .mbb-grid:has(.mbb-check-card) > .mbb-summary{
    align-self: start;
    margin-top: 46px; /* Höhe von Label + Gap. Ggf. 48–56px feinjustieren */
  }
}




@media (min-width: 861px){
  /* Nur im Extras-Step: Kartenraster zweispaltig */
  #mbb-booking-root .mbb-grid:has(.mbb-check-card) .mbb-card-grid{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}


/* Nur in dieser Extras-Summary die Reihen kompakt ausrichten */
#mbb-booking-root .mbb-grid:has(.mbb-check-card) > .mbb-summary .mbb-row{
  display: flex;
  justify-content: flex-start;
  gap: 12px; /* Abstand Label ↔ Preis */
}

/* Zusatzleistungen kompakt im Extras-Step */
#mbb-booking-root .mbb-grid:has(.mbb-check-card) .mbb-check-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;     /* kompakter */
  min-height:48px;       /* niedriger */
}


/* linker Textblock: darf schrumpfen/umbrechen */
#mbb-booking-root .mbb-grid:has(.mbb-check-card) .mbb-check-card > :first-child{
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* rechter Block (Preis/Badge): kompakt halten */
#mbb-booking-root .mbb-grid:has(.mbb-check-card) .mbb-check-card > :last-child{
  flex:0 0 auto;
  white-space:nowrap;
}




/* Sichtbare Preis-Pill im ausgewählten Paket (nur im Kalender) */
#mbb-booking-root .mbb-menu-item.is-selected .mbb-pricepill{
  color: #fff;                                  /* Schrift weiß halten */
  background: color-mix(in oklab, var(--brand) 35%, var(--muted));
  border-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);         /* leichte Lesbarkeits-Hilfe */
}


/* Nur in Grids OHNE Zusatzleistungen (Step 0/1), NICHT in Extras/Step 2 */
#mbb-booking-root .mbb-grid:not(:has(.mbb-check-card)) > .mbb-summary{
  min-height: 180px;
}


/* === Mobile: NIE horizontal überlaufen === */
@media (max-width: 980px){
  /* 0) Harte Schranke auf der Box */
  #mbb-booking-root .mbb-card{
    overflow-x: hidden;           /* nur horizontal cutten */
  }

  /* 1) Alle Box-Row-Teile dürfen umbrechen und schrumpfen */
  #mbb-booking-root .mbb-row,
  #mbb-booking-root .mbb-card-title,
  #mbb-booking-root .mbb-card-sub,
  #mbb-booking-root .mbb-bs-title,
  #mbb-booking-root .mbb-bs-sub,
  #mbb-booking-root .mbb-mi-title,
  #mbb-booking-root .mbb-mi-sub{
    min-width: 0;                 /* Flex/Grid darf schrumpfen */
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 2) Paket-Trigger: Titel/Untertitel clampen */
  #mbb-booking-root .mbb-bigselect-trigger{
    align-items: flex-start;
  }
  #mbb-booking-root .mbb-bigselect-trigger .mbb-bs-title,
  #mbb-booking-root .mbb-bigselect-trigger .mbb-bs-sub{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  #mbb-booking-root .mbb-bigselect-trigger .mbb-bs-title{
    -webkit-line-clamp: unset;    /* vollen Titel zeigen */
  }
  #mbb-booking-root .mbb-bigselect-trigger .mbb-bs-sub{
    -webkit-line-clamp: 2;        /* Sub maximal zwei Zeilen */
  }

  /* Titel/Untertitel: auf sehr schmalen Screens Titel nie ellipsen, Preis-Pill enger */
  @media (max-width: 380px){
    #mbb-booking-root .mbb-bigselect-trigger .mbb-bs-title{
      -webkit-line-clamp: unset;
    }
    #mbb-booking-root .mbb-pricepill{ max-width: 30%; }
  }

  /* 3) Dropdown-Menü auf Kartenbreite einsperren */
  #mbb-booking-root .mbb-menu{
    left: 0; right: 0;            /* exakt Kartenbreite */
    max-width: 100%;
  }
  #mbb-booking-root .mbb-menu-item{
    width: 100%;
    align-items: flex-start;
  }
  #mbb-booking-root .mbb-menu-item > div:first-child{
    flex: 1 1 auto;
    min-width: 0;                 /* Text-Block darf schrumpfen */
  }

  /* 4) Preis-Pill bleibt kompakt */
  #mbb-booking-root .mbb-pricepill{
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 35%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 5) Times/Chips/Reihe – nie breiter als Container */
  #mbb-booking-root .mbb-times,
  #mbb-booking-root .mbb-daygrid{
    max-width: 100%;
  }
}

/* Jede Flex/Grid-Spalte im Formular darf schrumpfen */
#mbb-booking-root .mbb-grid > *{
  min-width: 0;
}

/* Textcontainer: dürfen immer umbrechen */
#mbb-booking-root .mbb-summary,
#mbb-booking-root .mbb-field{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Einheitliche Mindesthöhe für den Big-Select Trigger */
#mbb-booking-root .mbb-bigselect-trigger{
  min-height: 68px;               /* 64–76px ist typischer Sweet-Spot */
}

/* Mobile: NUR Zeit-Slots weich umbrechen lassen */

@media (max-width: 980px){
  #mbb-booking-root .mbb-chip{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
}



/* Labels links NIE umbrechen; rechter Wert darf schrumpfen */
#mbb-booking-root .mbb-summary .mbb-row{
  align-items: start;
}
#mbb-booking-root .mbb-summary .mbb-row > span{
  white-space: nowrap;             /* „Paket" bleibt in 1 Zeile */
  flex: 0 0 auto;
}
#mbb-booking-root .mbb-summary .mbb-row > strong{
  flex: 1 1 auto;                  /* rechts flexible Breite */
  min-width: 0;                    /* darf schrumpfen, ohne Label zu drücken */
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;          /* lange Paketnamen umbrechen, nicht herausdrücken */
}

/* Nur das Feld mit dem Paket-Selector bekommt eine Mindesthöhe
   (verhindert Sprünge beim Switch, ohne „Buchungsart" zu verdrängen) */
@media (min-width: 861px){
  #mbb-booking-root .mbb-field:has(.mbb-bigselect-trigger){
    min-height: 170px;             /* ggf. 160–190px feinjustieren */
  }
}

/* Trigger: KEIN hartes Clamping am Desktop – sauber umbrechen */
@media (min-width: 861px){
  #mbb-booking-root .mbb-bigselect-trigger .mbb-bs-title,
  #mbb-booking-root .mbb-bigselect-trigger .mbb-bs-sub{
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    text-overflow: clip;
    white-space: normal;
  }
}

/* Dropdown: Textblock darf schrumpfen, wird nicht abgehakt/gestapelt */
#mbb-booking-root .mbb-menu-item{
  align-items: flex-start;
}
#mbb-booking-root .mbb-menu-item > div:first-child{
  flex: 1 1 auto;
  min-width: 0;                    /* WICHTIG: verhindert abgeschnittene Wörter */
}
#mbb-booking-root .mbb-mi-title,
#mbb-booking-root .mbb-mi-sub{
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Preis-Pill bleibt kompakt und drückt nichts weg */
#mbb-booking-root .mbb-pricepill{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* === Large Select Cards === */
#mbb-booking-root .mbb-card-grid{
  display:grid; gap: var(--gap-2); grid-template-columns:1fr;
}
@media (min-width: 620px){
  #mbb-booking-root .mbb-card-grid{ grid-template-columns:1fr 1fr; }
}

/* Basis (neutral) – gilt für alle Steps */
#mbb-booking-root .mbb-option-card,
#mbb-booking-root .mbb-check-card{
  width:100%;
  display:block;               /* neutral: nicht flex → Texte brechen normal */
  gap:12px;
  padding:16px 18px; min-height:64px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border:1px solid color-mix(in oklab, var(--ring) 85%, transparent);
  cursor:pointer; text-align:left;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* STEP 1 (Art & Paket): Paketkarten als Flex mit Preis rechts */
@media (min-width: 861px){
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-option-card,
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-check-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* In Step 1: Kartengrid breit machen */
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-card-grid{ grid-template-columns: 1fr; }
}


#mbb-booking-root .mbb-option-card:hover,
#mbb-booking-root .mbb-check-card:hover{
  transform:translateY(-1px);
  background: color-mix(in oklab, var(--surface) 78%, white 22%);
}

#mbb-booking-root .mbb-option-card:focus-visible,
#mbb-booking-root .mbb-check-card:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: var(--brand);
}

#mbb-booking-root .mbb-option-card.is-active,
#mbb-booking-root .mbb-check-card.is-active{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 95%, white 5%), color-mix(in oklab, var(--brand) 85%, black 15%));
  color: var(--brand-ink);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(14,165,233,.22);
  font-weight: 800;
}

#mbb-booking-root .mbb-check-card.is-disabled{
  cursor: default;
  opacity: .85;
  background: color-mix(in oklab, var(--surface) 90%, white 10%);
  border-style:dashed;
}

#mbb-booking-root .mbb-card-title{ font-weight: 800; letter-spacing:.2px; }
#mbb-booking-root .mbb-card-sub{ font-size:12px; color:var(--ink-dim); margin-top:2px; }
#mbb-booking-root .mbb-compare-sub{ font-size:12px; color:#0f172a; opacity:.75; margin-top:4px; }
#mbb-booking-root .mbb-price{ font-weight:800; }
#mbb-booking-root .mbb-badge{
  font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid color-mix(in oklab, var(--ring) 75%, transparent);
  background: var(--muted); color: var(--ink);
}
#mbb-booking-root .mbb-badge.ok{
  background: color-mix(in oklab, var(--ok) 25%, var(--muted));
  border-color: transparent; color: #062a15;
}

/* === Big Select Dropdown (Pakete) === */
#mbb-booking-root .mbb-bigselect{ position: relative; }

/* Trigger-Box (zeigt aktuell gewähltes Paket) */
#mbb-booking-root .mbb-bigselect-trigger{
  width:100%;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:16px 18px; min-height:64px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border:1px solid color-mix(in oklab, var(--ring) 85%, transparent);
  color: var(--ink);
  text-align:left; cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#mbb-booking-root .mbb-bigselect-trigger:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--surface) 78%, white 22%);
}
#mbb-booking-root .mbb-bigselect-trigger:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: var(--brand);
}

/* Pfeil rechts im Trigger */
#mbb-booking-root .mbb-bigselect-trigger::after{
  content:"";
  flex:0 0 auto; width:20px; height:20px; margin-left:12px; margin-top:2px;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  background: currentColor; opacity:.7;
  transition: transform .18s ease, opacity .15s ease;
}
#mbb-booking-root .mbb-bigselect-trigger[aria-expanded="true"]::after{
  transform: rotate(180deg); opacity:1;
}

#mbb-booking-root .mbb-bs-title{ font-weight:800; letter-spacing:.2px; }
#mbb-booking-root .mbb-bs-sub{ font-size:12px; color: var(--ink-dim); margin-top:2px; }

/* Dropdown-Menü */
#mbb-booking-root .mbb-menu{
  position:absolute; left:0; right:0; top: calc(100% + 8px);
  background: var(--card);
  border:1px solid color-mix(in oklab, var(--ring) 82%, transparent);
  border-radius: var(--radius-m);
  padding:6px;
  box-shadow: var(--shadow-2);
  display:grid; gap:6px;
  max-height: min(340px, 60vh); overflow:auto;
  z-index: 20;                  /* über Buttons/Stepper */
  animation: mbbDrop .14s ease-out;
}
@keyframes mbbDrop{
  from{ opacity:0; transform: translateY(-6px) scale(.98); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}

/* Eintrag im Menü */
#mbb-booking-root .mbb-menu-item{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 12px; min-height:56px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border:1px solid color-mix(in oklab, var(--ring) 80%, transparent);
  color: var(--ink);
  text-align:left; cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#mbb-booking-root .mbb-menu-item:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--surface) 78%, white 22%);
}
#mbb-booking-root .mbb-menu-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: var(--brand);
}

/* „ausgewählt"-Look im Menü */
#mbb-booking-root .mbb-menu-item.is-selected{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 96%, white 4%), color-mix(in oklab, var(--brand) 85%, black 15%));
  color: var(--brand-ink);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(14,165,233,.22);
  font-weight: 800;
}
#mbb-booking-root .mbb-menu-item.is-selected .mbb-mi-sub{
  color: color-mix(in oklab, var(--brand-ink) 70%, white 30%);
}

/* Titel/Untertitel/Preis im Eintrag */
#mbb-booking-root .mbb-mi-title{ font-weight:800; letter-spacing:.2px; }
#mbb-booking-root .mbb-mi-sub{ font-size:12px; color: var(--ink-dim); margin-top:2px; }
#mbb-booking-root .mbb-pricepill{
  flex:0 0 auto;
  padding:6px 10px; border-radius:999px;
  background: var(--muted);
  border:1px solid color-mix(in oklab, var(--ring) 70%, transparent);
  font-weight:800; white-space:nowrap;
}

/* Sicherheit: Dropdown darf NICHT abgeschnitten werden */
#mbb-booking-root .mbb-card{ overflow: visible; }

/* Mobile Feinschliff */
@media (max-width: 980px){
  #mbb-booking-root .mbb-bigselect-trigger{ min-height:56px; padding:14px 14px; }
  #mbb-booking-root .mbb-menu{ top: calc(100% + 6px); }
  #mbb-booking-root .mbb-menu-item{ min-height:52px; }
}

/* === STEP 1 ONLY (Desktop ≥861px): Buttons oben, dann Pakete, Summary unten === */
@media (min-width: 861px){
  /* Wir aktivieren die Regeln NUR wenn im Stepper der 1. Schritt aktiv ist */
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-grid:has(> .mbb-summary):has(> .mbb-field:nth-of-type(2)){
    grid-template-columns: 1fr;       /* eine Spalte */
    row-gap: var(--gap-3);
    align-items: start;
  }

  /* 1) Buchungsart-Buttons über die volle Breite */
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-grid:has(> .mbb-summary) > .mbb-field:first-of-type{
    grid-column: 1;
  }

  /* 2) Paketauswahl darunter, darf normal umbrechen (kein Buchstabenbruch) */
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-grid:has(> .mbb-summary) > .mbb-field:nth-of-type(2){
    grid-column: 1;
    min-width: 0;
  }

  /* 3) Summary ganz unten, volle Breite */
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-grid:has(> .mbb-summary) > .mbb-summary{
    grid-column: 1;
    max-width: 100%;
    min-height: 0;                    /* keine künstliche Höhe */
  }

  /* Buttons in der Buchungsart nicht quetschen */
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-grid > .mbb-field:first-of-type .mbb-chip{
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Paket-Karten schön breit, normaler Textumbruch */
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-check-card,
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-option-card{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: left;
  }

  /* Falls die Pakete ein Kartenraster haben: 1 Spalte in Step 1 */
  #mbb-booking-root:has(.mbb-stepper .mbb-step:nth-child(1).is-active)
  .mbb-grid .mbb-card-grid{
    grid-template-columns: 1fr;
  }
}

/* Zurück-Button: hell/edel */
section.mbb-hero .mbb-back-btn,
.mbb-back-btn {
  display: inline-block;
  margin-top: 20px;                /* Abstand nach oben */
  margin-bottom: 14px;             /* Abstand zur Box */
  padding: 12px 20px;
  border-radius: 999px;

  border: 1px solid #e0e0e0;       /* hellgrauer Rand */
  background: linear-gradient(180deg, #ffffff, #f7f7f7); /* heller Verlauf */
  color: var(--ink, #222);         /* dunkle Schrift */

  font-size: 14px;
  font-weight: 700;
  text-decoration: none;

  box-shadow: 0 4px 12px rgba(0,0,0,.06);  /* dezenter Shadow */
  transition: background .15s ease, transform .06s ease, box-shadow .15s ease;
}

/* Hover-Effekt */
section.mbb-hero .mbb-back-btn:hover,
.mbb-back-btn:hover {
  background: linear-gradient(180deg, #ffffff, #f3f3f3);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Active/Pressed */
section.mbb-hero .mbb-back-btn:active,
.mbb-back-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.08);
}


/* Desktop: Tagesliste fixieren, intern scrollen lassen */
@media (min-width: 861px){
  /* Das Feld mit der Tagesliste */
  #mbb-booking-root .mbb-field:has(.mbb-daygrid){
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
    align-self: start;          /* oben ausrichten */
    min-height: 180px;          /* ← reserviert Platz, verhindert "Dip" */
  }

  /* Die Tageskachel-Liste selbst */
  #mbb-booking-root .mbb-daygrid{
    max-height: 140px;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
  }

  /* optional: Scrollbar-Styling */
  #mbb-booking-root .mbb-daygrid::-webkit-scrollbar{ height:8px; width:8px; }
  #mbb-booking-root .mbb-daygrid::-webkit-scrollbar-thumb{
    background:#d3d7dd; border-radius:8px;
  }
}

/* =========================================
   STEP 3: Stabile Spalten (verhindert Springen der Uhrzeiten)
   ========================================= */

/* Step 3 Grid Container - align-items: start verhindert vertikales Stretching */
#mbb-booking-root .mbb-step3-grid {
  align-items: start;
}

/* Linke Datumsspalte - feste Höhe mit internem Scroll */
#mbb-booking-root .mbb-step3-datepane {
  height: var(--step3-pane-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

/* Daygrid innerhalb der Datepane - scrollbar */
#mbb-booking-root .mbb-step3-datepane .mbb-daygrid {
  max-height: calc(var(--step3-pane-h) - 140px); /* Mehr Platz für Daygrid */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  /* Mehr Tage gleichzeitig sichtbar machen */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  /* Visueller Hinweis auf Scrollbarkeit */
  position: relative;
  /* Scroll-Snap für saubere Ausrichtung */
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}

/* Gradient-Effekt entfernt - war zu störend */

/* "Weitere Tage" Button - sticky am unteren Rand */
#mbb-booking-root .mbb-step3-datepane .mbb-btn.ghost {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border: 1px solid var(--ring);
  z-index: 2;
  margin-top: auto;
  /* Focus-Ring automatisch ausblenden */
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* Focus-Ring automatisch nach 2 Sekunden ausblenden */
#mbb-booking-root .mbb-step3-datepane .mbb-btn.ghost:focus {
  animation: focusFade 2s ease-out forwards;
}

@keyframes focusFade {
  0% {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent);
    border-color: var(--brand);
  }
  70% {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent);
    border-color: var(--brand);
  }
  100% {
    box-shadow: none;
    border-color: color-mix(in oklab, var(--ring) 80%, transparent);
  }
}

/* Rechte Uhrzeitspalte - stabil positioniert */
#mbb-booking-root .mbb-step3-timepane {
  align-self: start;
  position: sticky;
  top: 0;
  height: fit-content;
}

/* Scrollbar-Styling für die Daygrid - entspannter und sichtbarer */
#mbb-booking-root .mbb-step3-datepane .mbb-daygrid::-webkit-scrollbar {
  width: 14px;
}

#mbb-booking-root .mbb-step3-datepane .mbb-daygrid::-webkit-scrollbar-track {
  background: var(--muted);
  border-radius: 8px;
  border: 1px solid var(--ring);
}

#mbb-booking-root .mbb-step3-datepane .mbb-daygrid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  border-radius: 8px;
  border: 2px solid var(--muted);
  min-height: 40px;
}

#mbb-booking-root .mbb-step3-datepane .mbb-daygrid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  transform: scale(1.05);
}

#mbb-booking-root .mbb-step3-datepane .mbb-daygrid::-webkit-scrollbar-thumb:active {
  background: #0284c7;
}

/* Smooth scrolling für bessere UX */
#mbb-booking-root .mbb-step3-datepane .mbb-daygrid {
  scroll-behavior: smooth;
  /* Mehr Padding für bessere Scrollbar-Sichtbarkeit */
  padding-right: 8px;
  /* Bessere Scroll-Performance */
  -webkit-overflow-scrolling: touch;
}

/* Mobile Anpassungen */
@media (max-width: 980px) {
  #mbb-booking-root .mbb-step3-datepane {
    height: auto;
    overflow: visible;
  }
  
  #mbb-booking-root .mbb-step3-datepane .mbb-daygrid {
    max-height: none;
    overflow: visible;
  }
  
  #mbb-booking-root .mbb-step3-timepane {
    position: static;
  }
  
  #mbb-booking-root .mbb-step3-datepane .mbb-btn.ghost {
    position: static;
  }
}