/* ════════════════════════════════════════════════════════════════
   Buchungsseite /buchung/andreas (Andys Wahl 23.09.2026)
   Desktop: zwei Spalten wie Mockup B, aber ganz hell (Andy 23.09. nach Live-Blick:
   "sieht scheisse aus mit dem dunklen Rahmen, unter dem Banner hell machen").
   Handy: alles auf Papier, Tagesband statt Monatskalender (Mockup C).
   Farben nach BRANDING-2026-08-27: Navy Grund, Papier hell, Gold kroent,
   Magenta NUR der Handlungs-Knopf. Bricolage ab 32px, sonst Jakarta, max 600.
   Scope .bs, damit app.css (.hero, .s usw.) nichts ueberschreibt.
   ════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage Grotesque';src:url('/fonts/bricolage/bricolage-grotesque-latin-var.woff2') format('woff2');font-weight:300 600;font-display:swap}

.bs{
  --navy:#151A31; --paper:#FFFDF8; --stone:#F3EEE7; --card:#FFFFFF;
  --ink:#151A31; --body:#4B5168; --muted:#6B7086; --line:#E4DDD3;
  --gold:#845A0B; --gold-d:#E4B56A; --mag:#B31F66; --mag-h:#9E1759;
  --txt:'Plus Jakarta Sans',system-ui,sans-serif; --dsp:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  min-height:100dvh; padding-top:76px; background:var(--paper);
  /* 76px = feste Kopfzeile (.fm-header, position:fixed), sonst liegt sie ueber dem Seitenanfang */ color:var(--ink);
  font-family:var(--txt); -webkit-font-smoothing:antialiased; text-align:left;
}
.bs *{box-sizing:border-box}
.bs p, .bs h1, .bs h2, .bs dl, .bs dd{margin:0}

/* ── Buehne ─────────────────────────────────────────────────────── */
.bs-stage{background:var(--paper); color:var(--ink); position:relative; overflow:hidden; border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; padding:56px clamp(24px,4.4vw,72px) 64px}
.bs-stage > *{position:relative}
.bs-kick{display:flex; align-items:center; gap:13px; font:600 11px/1 var(--txt); letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.bs-kick:before{content:""; width:34px; height:1.5px; background:currentColor}
.bs-h1{font-family:var(--dsp); font-weight:600; font-size:clamp(40px,4.1vw,62px); line-height:1.03; letter-spacing:-.03em; margin:26px 0 34px !important; color:var(--ink)}
.bs-h1 span{display:block; color:var(--gold)}
.bs-who{display:flex; gap:18px; align-items:center}
.bs-who img{width:76px; height:76px; border-radius:50%; object-fit:cover}
.bs-who b{display:block; font:600 16px/1.3 var(--txt)}
.bs-who-ort{display:block; font-size:14px; color:var(--muted)}
.bs-facts{display:grid; grid-template-columns:repeat(3,auto); margin-top:40px !important; border-top:1px solid var(--line)}
.bs-facts dt{padding-top:18px; font:500 11px/1 var(--txt); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.bs-facts dd{margin-top:10px !important; font:500 20px/1 var(--txt); color:var(--ink)}
.bs-app{margin-top:28px !important; max-width:42ch; font-size:15px; line-height:1.6; color:var(--body)}

/* ── Buchen ─────────────────────────────────────────────────────── */
.bs-desk{padding:56px clamp(24px,5vw,88px) 48px; max-width:820px; width:100%}
.bs-prog{display:flex; gap:8px; margin-bottom:28px}
.bs-prog span{height:3px; flex:1; border-radius:3px; background:var(--line); transition:background .5s var(--ease)}
.booking-widget[data-step="2"] .bs-prog span:first-child,
.booking-widget[data-step="3"] .bs-prog span,
.booking-widget[data-step="4"] .bs-prog span{background:var(--ink)}

.bs-du{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 18px; padding-bottom:22px; margin-bottom:30px; border-bottom:1px solid var(--line)}
.bs .bk-du{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
.bs .bk-du-name{font:600 15px/1.3 var(--txt)}
.bs .bk-du-meta{font-size:14px; color:var(--muted)}
.bs .bk-alt{font-size:14px; color:var(--muted)}
.bs .bk-alt a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--gold)}

.bs .bk-step{display:none}
.bs .bk-step.active{display:block; animation:bs-in .6s var(--ease)}
@keyframes bs-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.bs-load{color:var(--muted); font-size:14px}

.bs-h2{font:600 26px/1.2 var(--txt); letter-spacing:-.01em; color:var(--ink)}
.bs-hint{margin-top:8px !important; font-size:15px; color:var(--muted)}
.bs-two{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:44px; margin-top:30px}

/* Kalender */
.bs .bk-cal-nav{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.bs .bk-cal-month{font:600 16px/1 var(--txt)}
.bs-cal-btns{display:flex; gap:6px}
.bs .bk-cal-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--body); font:400 18px/1 var(--txt); cursor:pointer; transition:border-color .3s var(--ease)}
.bs .bk-cal-btn:hover:not(:disabled){border-color:var(--ink)}
.bs .bk-cal-btn:disabled{opacity:.35; cursor:default}
.bs .bk-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center}
.bs .bk-cal-wd{font:600 10.5px/1 var(--txt); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:6px 0 10px}
.bs .bk-cal-day{aspect-ratio:1; display:grid; place-items:center; border-radius:50%; font:400 15px/1 var(--txt); color:#B3ADA4; position:relative; user-select:none}
.bs .bk-cal-day.available{color:var(--ink); font-weight:500; cursor:pointer; transition:background .3s var(--ease)}
.bs .bk-cal-day.available:after{content:""; position:absolute; bottom:17%; width:4px; height:4px; border-radius:50%; background:var(--gold)}
.bs .bk-cal-day.available:hover{background:var(--stone)}
.bs .bk-cal-day.selected{background:var(--ink) !important; color:var(--paper)}
.bs .bk-cal-day.selected:after{background:var(--gold-d)}

/* Uhrzeiten */
.bs-zeit-h{min-height:20px; margin-bottom:14px !important; font:500 14px/1.4 var(--txt); color:var(--muted)}
.bs .bk-slots{display:grid; gap:8px}
.bs .bk-slot{display:flex; justify-content:space-between; align-items:center; width:100%; padding:15px 18px; border:1px solid var(--line); border-radius:14px; background:var(--card);
  font:500 16px/1 var(--txt); color:var(--ink); cursor:pointer; text-align:left; transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.bs .bk-slot small{font:400 12px/1 var(--txt); color:var(--muted)}
.bs .bk-slot:hover{border-color:var(--ink)}
.bs .bk-slot.selected{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}

/* Naechster freier Termin */
.bs-next{display:flex; align-items:center; gap:12px; flex-wrap:wrap; width:100%; margin-top:22px; padding:14px 18px; border:1px solid var(--line); border-radius:16px;
  background:var(--stone); color:var(--ink); font:400 15px/1.35 var(--txt); text-align:left; cursor:pointer; transition:border-color .3s var(--ease)}
.bs-next[hidden]{display:none}
.bs-next:hover{border-color:var(--ink)}
.bs-next .bs-next-l{font:600 10.5px/1.2 var(--txt); letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.bs-next b{font-weight:600}
.bs-next .bs-next-go{margin-left:auto; font-weight:600; border-bottom:1px solid var(--gold)}

/* Tagesband: nur Handy */
.bs-days{display:none}

/* Fusszeile mit Knopf */
.bs-foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:36px; padding-top:24px; border-top:1px solid var(--line)}
.bs-pick{font-size:14px; color:var(--body)}
.bs-pick b{color:var(--ink); font-weight:600}
.bs-btn{display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:56px; padding:8px 26px; border:0; border-radius:999px;
  background:var(--mag); color:#fff; font:600 16px/1 var(--txt); text-decoration:none; cursor:pointer;
  box-shadow:0 12px 30px -12px rgba(179,31,102,.5); transition:transform .4s var(--ease), background .3s var(--ease), opacity .3s}
.bs-btn:has(.bs-btn-c){padding-right:8px}
.bs-btn-c{width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:17px; transition:transform .4s var(--ease)}
.bs-btn:hover:not(:disabled){background:var(--mag-h)}
.bs-btn:hover:not(:disabled) .bs-btn-c{transform:translateX(3px)}
.bs-btn:active:not(:disabled){transform:scale(.98)}
.bs-btn:disabled{opacity:.35; cursor:default; box-shadow:none}
.bs-ghost{display:inline-flex; align-items:center; min-height:56px; padding:0 24px; border-radius:999px; border:1px solid var(--line); color:var(--ink); font:600 15px/1 var(--txt); text-decoration:none}

/* Angaben */
.bs-back{background:none; border:0; padding:0; margin-bottom:18px; font:500 14px/1 var(--txt); color:var(--muted); cursor:pointer}
.bs .bk-summary{margin:22px 0 26px; border-top:1px solid var(--line)}
.bs .bk-summary-row{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--muted)}
.bs .bk-summary-row strong{color:var(--ink); font-weight:600; text-align:right}
.bs .bk-form{display:grid; gap:18px}
.bs-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.bs .bk-field{display:grid; gap:8px}
.bs .bk-field label{font:600 10.5px/1.2 var(--txt); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.bs .bk-field-help{margin-top:-2px !important; font-size:13px; color:var(--muted)}
.bs .bk-field input{height:52px; width:100%; padding:0 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); font:400 16px/1 var(--txt); color:var(--ink); outline:none; transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.bs .bk-field input::placeholder{color:#A8A29A}
.bs .bk-field input:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(21,26,49,.08)}
.bs-foot--form{margin-top:10px}
.bs .bk-note{max-width:40ch; font-size:13px; line-height:1.55; color:var(--muted)}

/* Angaben ruhig (Andy 23.09.): Termin-Karte + Apple-Liste */
.bs-ticket{position:relative; display:grid; gap:4px; padding:20px 22px; border-radius:22px; background:var(--stone)}
.bs-ticket-k{font:600 10.5px/1.2 var(--txt); letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.bs-ticket-d{margin-top:6px; font:600 22px/1.2 var(--txt); color:var(--ink)}
.bs-ticket-z{font:500 17px/1.3 var(--txt); color:var(--ink)}
.bs-ticket-m{margin-top:4px; font-size:14px; color:var(--muted)}
.bs-ticket-x{position:absolute; top:18px; right:20px; background:none; border:0; padding:4px 0; font:600 14px/1 var(--txt); color:var(--ink); border-bottom:1px solid var(--gold); cursor:pointer}
.bs-h2--form{margin-top:34px !important; font-size:20px}
.bs .bk-form{gap:0; margin-top:16px}
.bs-liste{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.bs-zeile{display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:12px; min-height:56px; padding:0 18px; cursor:text}
.bs-zeile + .bs-zeile{border-top:1px solid var(--line)}
.bs-zeile span{font:500 15px/1 var(--txt); color:var(--muted)}
.bs-zeile input{width:100%; height:54px; border:0; outline:none; background:none; font:400 16px/1 var(--txt); color:var(--ink); padding:0}
.bs-zeile input::placeholder{color:#B3ADA4}
.bs-zeile:focus-within{background:#FDFBF6}
.bs-wunsch{margin-top:22px}
.bs-wunsch label{display:block; font:600 15px/1.35 var(--txt); color:var(--ink); margin-bottom:10px}
.bs-wunsch input{width:100%; height:56px; padding:0 18px; border:1px solid var(--line); border-radius:18px; background:var(--card); font:400 16px/1 var(--txt); color:var(--ink); outline:none}
.bs-wunsch input::placeholder{color:#B3ADA4}
.bs-wunsch input:focus{border-color:var(--ink)}
.bs-wunsch p{margin-top:8px !important; font-size:13px; color:var(--muted)}
.bs-btn--voll{width:100%; margin-top:28px}
.bs .bk-form .bk-note{max-width:none; margin-top:12px !important; text-align:center}

/* Gebucht: Haken, Titel, Termin-Karte, zwei klare Hinweise */
.bs-haken{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--gold-d); margin-bottom:22px; animation:bs-pop .7s var(--ease)}
@keyframes bs-pop{from{transform:scale(.6); opacity:0} to{transform:none; opacity:1}}
.booking-widget[data-step="4"] .bs-prog, .booking-widget[data-step="4"] .bs-du{display:none}
.bs-end #bk-confirm-ticket{margin-top:24px}
.bs-end-schritte{display:grid; gap:0; margin-top:26px; border-top:1px solid var(--line)}
.bs-end-s{display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:22px 0; border-bottom:1px solid var(--line)}
.bs-end-ic{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--stone); color:var(--gold)}
.bs-end-s b{display:block; font:600 16px/1.3 var(--txt); color:var(--ink)}
.bs-end-s p{margin-top:4px !important; font-size:15px; line-height:1.5; color:var(--body)}
.bs-end-s p b{display:inline; font-weight:600; font-size:15px}
.bs-end-s .bs-end-btns{margin-top:16px}

/* Gebucht (alt) */
.bs-end .bs-kick{color:var(--gold)}
.bs-end-when{margin-top:22px; font:500 20px/1.3 var(--txt); color:var(--ink)}
.bs-end-h{margin-top:10px !important; font-family:var(--dsp); font-size:clamp(32px,3.4vw,44px); line-height:1.06; letter-spacing:-.025em}
.bs .bk-confirm-detail{margin-top:16px !important; font-size:16px; line-height:1.6; color:var(--body)}
.bs .bk-confirm-sub{color:var(--ink); font-weight:500}
.bs-end-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.bs .bk-confirm-mail{margin-top:22px !important; font-size:14px; color:var(--muted)}
.bs-leer{font-size:15px; color:var(--body)}

/* Persoenlicher Kontakt: ruhige Karte, zwei Pillen (kein Magenta, das gehoert dem Buchen-Knopf) */
.bs-kontakt{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px 18px; margin-top:40px; padding:18px 20px;
  background:var(--stone); border-radius:24px}
.bs-kontakt img{width:56px; height:56px; border-radius:50%; object-fit:cover}
.bs-kontakt-t b{display:block; font:600 16px/1.3 var(--txt); color:var(--ink)}
.bs-kontakt-t span{display:block; margin-top:3px; font-size:14px; line-height:1.45; color:var(--body)}
.bs-kontakt-k{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.bs-pill{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; background:var(--card);
  color:var(--ink); font:600 14px/1 var(--txt); text-decoration:none; white-space:nowrap;
  box-shadow:0 1px 2px rgba(21,26,49,.06), 0 6px 18px -10px rgba(21,26,49,.25); transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.bs-pill:hover{transform:translateY(-1px); box-shadow:0 1px 2px rgba(21,26,49,.06), 0 12px 24px -12px rgba(21,26,49,.3)}
.bs-pill:active{transform:scale(.98)}
.bs-pill svg{flex:none; color:var(--gold)}
.bs-legal{margin-top:18px !important; padding-left:4px; font-size:12px; color:var(--muted)}
.bs-legal a{color:var(--muted); text-decoration:none}

@media (prefers-reduced-motion:reduce){.bs *{animation:none !important; transition:none !important}}

/* ── Handy: alles auf Papier, Tagesband (Mockup C) ──────────────── */
@media (max-width:900px){
  .bs{display:block; min-height:0}
  /* Handy: nur der Termin (Andy 23.09.). Die Buehne faellt weg, die h1 bleibt fuer Suchmaschinen und Screenreader. */
  .bs-stage{position:absolute !important; width:1px; height:1px; padding:0 !important; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  .bs-stage{padding:30px 16px 8px; display:block; border-right:0}
  .bs-h1{font-size:clamp(36px,10vw,46px); margin:20px 0 24px !important}
  .bs-who{background:var(--stone); border-radius:24px; padding:16px 20px 16px 16px}
  .bs-who img{width:72px; height:72px; border-radius:18px; box-shadow:none}
  .bs-who-ort{line-height:1.5; color:var(--body)}
  .bs-facts{display:none}
  .bs-app{display:none}

  .bs-desk{padding:22px 16px 40px}
  .bs-prog{margin-bottom:22px}
  .bs-du{padding-bottom:18px; margin-bottom:24px}
  .bs-h2{font-size:22px}
  .bs-hint{display:none}

  .bs-days{display:grid; grid-auto-flow:column; grid-auto-columns:78px; gap:10px; overflow-x:auto; margin:18px -16px 0; padding:2px 16px 6px; scroll-snap-type:x mandatory; scrollbar-width:none}
  .bs-days::-webkit-scrollbar{display:none}
  .bs .bk-day{scroll-snap-align:start; display:grid; gap:6px; justify-items:center; padding:14px 6px; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--ink); cursor:pointer; font-family:var(--txt)}
  .bs .bk-day span{font:600 11px/1 var(--txt); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
  .bs .bk-day b{font:500 26px/1 var(--txt)}
  .bs .bk-day small{font-size:12px; color:var(--gold)}
  .bs .bk-day.on{background:var(--ink); border-color:var(--ink); color:var(--paper)}
  .bs .bk-day.on span, .bs .bk-day.on small{color:rgba(255,253,248,.72)}
  .bs .bs-days .bs-leer{grid-column:1/-1; white-space:normal}

  .bs-two{display:block; margin-top:26px}
  .bs-cal{display:none}
  .bs-zeit-h{font:600 18px/1.3 var(--txt); color:var(--ink)}
  .bs .bk-slots{grid-template-columns:1fr 1fr}
  .bs .bk-slot{padding:15px 14px}

  .bs-foot{margin-top:26px}
  .bs-foot .bs-btn{width:100%}
  .bs-row{grid-template-columns:1fr}
  .bs-end-btns .bs-btn, .bs-end-btns .bs-ghost{width:100%; justify-content:center}
  .bs-kontakt{grid-template-columns:auto minmax(0,1fr); padding:18px}
  .bs-kontakt-k{grid-column:1/-1; justify-content:stretch}
  .bs-pill{flex:1 1 0; justify-content:center}
}

@media (max-width:900px){
  .bs-zeile{grid-template-columns:72px minmax(0,1fr); padding:0 16px}
  .bs-ticket{padding:18px}
  .bs-ticket-d{font-size:20px; padding-right:64px}
}

/* Desktop kompakt: Tag + Uhrzeit bis "Weiter" ohne Scrollen auf einem 15-Zoll-Mac
   (Andy 23.09.: "muss hin und her scrollen, mach es kleiner"). Gemessen bei 1512 x 780. */
@media (min-width:901px){
  .bs-stage{padding:32px clamp(24px,4vw,64px) 40px}
  .bs-h1{font-size:clamp(36px,3.3vw,52px); margin:20px 0 26px !important}
  .bs-facts{margin-top:28px !important}
  .bs-app{margin-top:20px !important}
  .bs-desk{padding:28px clamp(24px,4vw,72px) 32px}
  .bs-prog{margin-bottom:18px}
  .bs-du{padding-bottom:14px; margin-bottom:20px}
  .bs-h2{font-size:22px}
  .bs-hint{display:none}
  .bs-next{margin-top:14px; padding:11px 16px}
  .bs-two{margin-top:18px; gap:36px}
  .bs .bk-cal-nav{margin-bottom:8px}
  .bs .bk-cal-wd{padding:4px 0 6px}
  .bs .bk-cal-day{aspect-ratio:auto; height:40px; width:40px; margin:0 auto}
  .bs .bk-cal-day.available:after{bottom:4px}
  .bs-zeit-h{margin-bottom:10px !important}
  .bs .bk-slots{gap:6px}
  .bs .bk-slot{padding:12px 16px}
  .bs-foot{margin-top:18px; padding-top:16px}
  .bs-btn{min-height:52px}
  .bs-kontakt{margin-top:28px}
  .bs-end-h{margin-top:14px !important}
}
/* Feinschliff nach Durchklicken 23.09. */
.bs .bk-summary{margin:0; border:0}
.bs-zeit-h:empty{display:none}
.bs-end .bs-end-h{font-family:var(--dsp); font-size:clamp(30px,3vw,40px); line-height:1.08; letter-spacing:-.025em}
@media (max-width:900px){ .bs-end .bs-end-h{font-size:30px} }