/* ==========================================================================
   booking.css — Terminbuchung (Dialog) fuer das kostenlose Erstgespraech.
   Eigenstaendig, praefixiert (.mvb). Greift die Tokens von analyse.css auf
   (var(--ink) …) und bringt fuer jeden Wert einen Fallback mit, damit der
   Dialog auch auf Seiten ohne analyse.css richtig aussieht.
   Dunkel, Gold/Champagner, Fraunces + Geist — wie die Ergebnisseite.
   ========================================================================== */

.mvb{
  --b-ink:var(--ink,#16130f); --b-ink-1:var(--ink-1,#1b1712); --b-ink-2:var(--ink-2,#211c16); --b-ink-3:var(--ink-3,#29231b);
  --b-gold:var(--gold,#c6a15b); --b-gold-soft:var(--gold-soft,#dabd85); --b-gold-deep:var(--gold-deep,#a9843f);
  --b-text:var(--on-dark,#ece4d6); --b-muted:var(--on-dark-muted,#a99f8d); --b-faint:var(--on-dark-faint,#6f6656);
  --b-line:var(--line,rgba(236,228,214,.10)); --b-line-strong:var(--line-strong,rgba(236,228,214,.16)); --b-line-gold:var(--line-gold,rgba(198,161,91,.34));
  --b-bad:var(--bad,#dc9a72); --b-ok:var(--ok,#a9c58f);
  --b-display:var(--font-display,'Fraunces','Iowan Old Style',Georgia,serif);
  --b-sans:var(--font-sans,'Geist',system-ui,-apple-system,'Segoe UI',sans-serif);
  --b-ease:cubic-bezier(.22,.61,.36,1); --b-ease-out:cubic-bezier(.16,1,.3,1);
  --b-r:18px; --b-r-lg:26px; --b-pill:999px;
}

/* --- Seite hinter dem Dialog nicht scrollen lassen ------------------------ */
html.mvb-lock, html.mvb-lock body{overflow:hidden !important;}

/* --- Dialog-Huelle ---------------------------------------------------------- */
.mvb{
  position:fixed; inset:0; margin:auto; padding:0; border:0; background:transparent;
  width:min(100% - 2rem, 920px); max-width:none;
  max-height:min(92vh, 900px); max-height:min(92dvh, 900px);
  color:var(--b-text); font-family:var(--b-sans); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:visible;
}
.mvb::backdrop{background:rgba(8,6,3,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.mvb *{box-sizing:border-box;}
.mvb :focus-visible{outline:2px solid var(--b-gold-soft); outline-offset:2px;}

.mvb-card{
  display:flex; flex-direction:column; width:100%;
  max-height:min(92vh, 900px); max-height:min(92dvh, 900px);
  background:radial-gradient(70% 45% at 50% 0%, rgba(198,161,91,.12), transparent 70%), var(--b-ink-1);
  border:1px solid var(--b-line-strong); border-radius:var(--b-r-lg);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(198,161,91,.06);
  overflow:hidden;
}
.mvb[open] .mvb-card{animation:mvbIn .5s var(--b-ease-out) both;}
@keyframes mvbIn{from{opacity:0; transform:translateY(12px) scale(.985);} to{opacity:1; transform:none;}}

/* --- Kopf ------------------------------------------------------------------- */
.mvb-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.25rem 1rem 1.4rem; border-bottom:1px solid var(--b-line);
  flex:none;
}
.mvb-who{display:flex; align-items:center; gap:.85rem; min-width:0;}
/* MV-Webdesign-Logo (logo-mark.png) im runden Gold-Badge — unbeschnitten, zentriert,
   mit Innenabstand. Gleiche Werte wie .r-close .av in analyse.css. */
.mvb-av{flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  border:1px solid var(--b-line-gold); background:var(--b-ink-3);}
.mvb-av img{display:block; width:100%; height:100%; object-fit:contain; padding:16%; box-sizing:border-box;}
.mvb-title{font-family:var(--b-display); font-weight:400; font-size:1.3rem; line-height:1.15; letter-spacing:-.012em; margin:0; color:var(--b-text);}
.mvb-sub{margin:.15rem 0 0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--b-gold-soft);}
.mvb-close{
  flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--b-line-strong);
  background:rgba(236,228,214,.03); color:var(--b-muted); cursor:pointer; display:grid; place-items:center;
  transition:color .25s var(--b-ease), border-color .25s var(--b-ease), background .25s var(--b-ease);
}
.mvb-close:hover{color:var(--b-text); border-color:var(--b-line-gold); background:rgba(198,161,91,.08);}
.mvb-close svg{width:18px; height:18px;}

/* --- Hinweisleiste (Fehler/Status) ------------------------------------------ */
.mvb-notice{
  flex:none; margin:.9rem 1.4rem 0; padding:.8rem 1rem; border-radius:12px; font-size:.92rem; line-height:1.5;
  border:1px solid var(--b-line-strong); background:rgba(236,228,214,.04); color:var(--b-text);
}
.mvb-notice[hidden]{display:none;}
.mvb-notice.is-error{border-color:rgba(220,154,114,.45); border-left:3px solid var(--b-bad); background:rgba(220,154,114,.08);}
.mvb-notice.is-info{border-left:3px solid var(--b-gold);}

/* --- Inhalt (scrollt) -------------------------------------------------------- */
.mvb-body{flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:1.2rem 1.4rem 1.5rem; overscroll-behavior:contain;}
.mvb-step{max-width:100%;}
.mvb-lead{margin:0 0 1.2rem; color:var(--b-muted); font-size:.98rem; max-width:60ch;}
.mvb-lead:focus{outline:none;}

/* --- Schritt 1: Kalender + Uhrzeiten ---------------------------------------- */
.mvb-pick{display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; align-items:start;}
@media (min-width:720px){
  .mvb-pick{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:1.8rem;}
  .mvb-times{max-height:420px; overflow:auto; padding-right:.2rem;}
}

.mvb-cal{min-width:0;}
.mvb-cal-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem;}
.mvb-month{font-family:var(--b-display); font-weight:400; font-size:1.15rem; letter-spacing:-.01em; margin:0; text-align:center; flex:1; min-width:0;}
.mvb-nav{
  flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--b-line-strong); background:transparent;
  color:var(--b-muted); cursor:pointer; display:grid; place-items:center;
  transition:color .25s var(--b-ease), border-color .25s var(--b-ease);
}
.mvb-nav:hover:not(:disabled){color:var(--b-text); border-color:var(--b-line-gold);}
.mvb-nav:disabled{opacity:.28; cursor:default;}
.mvb-nav svg{width:18px; height:18px;}

.mvb-wd{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-bottom:4px;}
.mvb-wd span{text-align:center; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--b-faint); padding:.3rem 0;}
.mvb-days{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px;}
.mvb-day{
  position:relative; width:100%; aspect-ratio:1; min-height:40px; border-radius:12px;
  border:1px solid transparent; background:transparent; color:var(--b-text);
  font-family:var(--b-sans); font-weight:600; font-size:.95rem; font-variant-numeric:tabular-nums; cursor:pointer;
  display:grid; place-items:center; padding:0; margin:0;
  transition:background .2s var(--b-ease), border-color .2s var(--b-ease), color .2s var(--b-ease), transform .2s var(--b-ease);
}
.mvb-day.is-empty{visibility:hidden;}
.mvb-day.is-free{background:rgba(198,161,91,.09); border-color:rgba(198,161,91,.22);}
.mvb-day.is-free:hover{border-color:var(--b-gold); background:rgba(198,161,91,.16); transform:translateY(-1px);}
.mvb-day:disabled{color:var(--b-faint); opacity:.45; cursor:default; background:transparent; border-color:transparent;}
.mvb-day.is-today::after{content:""; position:absolute; left:50%; bottom:5px; width:5px; height:5px; border-radius:50%; background:var(--b-gold); transform:translateX(-50%);}
.mvb-day.is-selected, .mvb-day.is-selected:hover{
  background:linear-gradient(180deg,var(--b-gold-soft),var(--b-gold-deep)); border-color:transparent; color:#17130c;
  box-shadow:0 12px 28px -14px rgba(169,132,63,.8);
}
.mvb-day.is-selected.is-today::after{background:#17130c;}
.mvb-days[aria-busy="true"] .mvb-day{opacity:.35;}
.mvb-cal-note{margin:.8rem 0 0; font-size:.76rem; color:var(--b-faint);}

.mvb-times{min-width:0;}
.mvb-times-title{font-family:var(--b-display); font-weight:400; font-size:1.15rem; letter-spacing:-.01em; margin:0 0 .8rem;}
.mvb-times-title:focus{outline:none;}
.mvb-slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.5rem;}
.mvb-slot{
  min-height:44px; border-radius:11px; border:1px solid var(--b-line-strong); background:rgba(236,228,214,.03);
  color:var(--b-text); font-family:var(--b-sans); font-weight:600; font-size:.95rem; font-variant-numeric:tabular-nums; cursor:pointer;
  display:grid; place-items:center; padding:0 .4rem; margin:0;
  transition:border-color .2s var(--b-ease), background .2s var(--b-ease), transform .2s var(--b-ease);
}
.mvb-slot:hover:not(:disabled){border-color:var(--b-gold); background:rgba(198,161,91,.12); transform:translateY(-1px);}
.mvb-slot[aria-pressed="true"]{background:linear-gradient(180deg,var(--b-gold-soft),var(--b-gold-deep)); border-color:transparent; color:#17130c;}
.mvb-slot.is-booked{opacity:.38; cursor:not-allowed; background:transparent; border-style:dashed;}
.mvb-slot.is-booked span{text-decoration:line-through; text-decoration-color:var(--b-bad);}

.mvb-status{margin:0; padding:1rem 1.1rem; border:1px dashed var(--b-line-strong); border-radius:12px; color:var(--b-muted); font-size:.94rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.mvb-status-err{border-color:rgba(220,154,114,.45); color:var(--b-text);}
.mvb-spin{width:16px; height:16px; border-radius:50%; border:2px solid var(--b-line-gold); border-top-color:var(--b-gold-soft); animation:mvbSpin 1s linear infinite; flex:none;}
@keyframes mvbSpin{to{transform:rotate(360deg);}}
.mvb-link{background:none; border:0; padding:0; font:inherit; color:var(--b-gold-soft); text-decoration:underline; cursor:pointer;}

/* --- Schritt 2: Daten --------------------------------------------------------- */
.mvb-back{
  display:inline-flex; align-items:center; gap:.3rem; background:none; border:0; padding:.2rem .4rem .2rem 0; margin:0 0 1rem;
  font:inherit; font-size:.88rem; color:var(--b-muted); cursor:pointer; border-radius:8px;
}
.mvb-back:hover{color:var(--b-text);}
.mvb-back:disabled{opacity:.4; cursor:default;}
.mvb-back svg{width:16px; height:16px;}
.mvb-summary{
  border:1px solid var(--b-line-gold); border-radius:var(--b-r); padding:1.1rem 1.25rem; margin-bottom:1.3rem;
  background:radial-gradient(120% 160% at 100% 0%, rgba(198,161,91,.14), rgba(27,23,18,.3));
}
.mvb-kicker{display:block; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--b-gold); font-weight:600; margin-bottom:.7rem;}
.mvb-kicker:focus{outline:none;}
.mvb-dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8rem 1.2rem; margin:0;}
.mvb-dl div{min-width:0;}
.mvb-dl dt{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--b-faint);}
.mvb-dl dd{margin:.15rem 0 0; font-family:var(--b-display); font-size:1.12rem; line-height:1.25; color:var(--b-text);}

.mvb-form{display:block;}
.mvb-row2{display:grid; grid-template-columns:1fr; gap:0 1rem;}
@media (min-width:480px){.mvb-row2{grid-template-columns:1fr 1fr;}}
.mvb-field{margin-bottom:1rem; min-width:0;}
.mvb-field label{display:block; font-size:.76rem; letter-spacing:.04em; color:var(--b-muted); margin:0 0 .4rem;}
.mvb-opt{color:var(--b-faint); letter-spacing:0;}
.mvb-field input, .mvb-field textarea{
  width:100%; max-width:100%; background:var(--b-ink); border:1px solid var(--b-line-strong); border-radius:11px;
  padding:.8rem .95rem; color:var(--b-text); font:inherit; font-size:1rem; line-height:1.4;
  transition:border-color .2s var(--b-ease), box-shadow .2s var(--b-ease);
}
.mvb-field textarea{min-height:88px; resize:vertical;}
.mvb-field input:focus, .mvb-field textarea:focus{outline:none; border-color:var(--b-gold); box-shadow:0 0 0 3px rgba(198,161,91,.16);}
.mvb-field.has-error input, .mvb-field.has-error textarea{border-color:var(--b-bad);}
.mvb-ferr{margin:.35rem 0 0; font-size:.8rem; color:var(--b-bad);}
.mvb-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.mvb-consent{margin:.2rem 0 1.1rem;}
.mvb-consent label{display:flex; gap:.6rem; align-items:flex-start; font-size:.84rem; color:var(--b-muted); line-height:1.5; cursor:pointer;}
.mvb-consent input{margin:.2rem 0 0; width:18px; height:18px; flex:none; accent-color:var(--b-gold);}
.mvb-consent a{color:var(--b-gold-soft);}
.mvb-consent.has-error label{color:var(--b-text);}

/* --- Buttons ----------------------------------------------------------------- */
.mvb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  font-family:var(--b-sans); font-weight:600; font-size:1rem; line-height:1.3; text-decoration:none; cursor:pointer;
  padding:.95rem 1.5rem; border-radius:var(--b-pill); border:1px solid var(--b-line-strong); color:var(--b-text);
  background:transparent; min-height:50px;
  transition:transform .3s var(--b-ease), box-shadow .3s var(--b-ease), border-color .3s var(--b-ease), opacity .3s var(--b-ease);
}
.mvb-btn svg{width:18px; height:18px; flex:none;}
.mvb-btn:hover:not(:disabled){transform:translateY(-2px);}
.mvb-btn:disabled{opacity:.6; cursor:progress; transform:none;}
.mvb-btn-primary{color:#17130c; border-color:transparent; background:linear-gradient(180deg,var(--b-gold-soft),var(--b-gold-deep)); box-shadow:0 30px 80px -34px rgba(169,132,63,.42);}
.mvb-btn-primary:hover:not(:disabled){box-shadow:0 22px 60px -26px rgba(169,132,63,.7);}
.mvb-assure{margin:.8rem 0 0; text-align:center; font-size:.78rem; color:var(--b-faint);}

/* --- Schritt 3: Erfolg -------------------------------------------------------- */
.mvb-success{text-align:center; padding:1.2rem .2rem .4rem; max-width:520px; margin:0 auto;}
.mvb-check{width:66px; height:66px; border-radius:22px; margin:0 auto 1.2rem; display:grid; place-items:center; color:#17130c;
  background:linear-gradient(180deg,var(--b-gold-soft),var(--b-gold-deep)); box-shadow:0 20px 50px -24px rgba(169,132,63,.8);}
.mvb-check svg{width:30px; height:30px;}
.mvb-success h3{font-family:var(--b-display); font-weight:400; font-size:1.7rem; line-height:1.12; letter-spacing:-.012em; margin:0 0 .8rem;}
.mvb-success h3:focus{outline:none;}
.mvb-success p{color:var(--b-muted); font-size:1rem; margin:0 auto 1.4rem; max-width:44ch; word-break:break-word;}
.mvb-success p b{color:var(--b-text); font-weight:600;}
.mvb-warn{border:1px solid rgba(224,181,103,.4); border-left:3px solid #e0b567; border-radius:0 12px 12px 0; background:rgba(224,181,103,.08); padding:.8rem 1rem; text-align:left; font-size:.9rem;}
.mvb-success .mvb-btn{width:auto; min-width:200px;}

/* --- Mobil: (fast) vollflaechig, ohne seitliches Scrollen ---------------------- */
@media (max-width:640px){
  .mvb{width:100%; max-width:100%; height:100%; max-height:100%; max-height:100dvh; margin:0; border-radius:0;}
  .mvb-card{height:100%; max-height:none; border-radius:0; border:0;}
  .mvb-head{padding:calc(.9rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) .85rem calc(1.1rem + env(safe-area-inset-left));}
  .mvb-title{font-size:1.15rem;}
  .mvb-body{padding:1rem calc(1.1rem + env(safe-area-inset-right)) calc(1.6rem + env(safe-area-inset-bottom)) calc(1.1rem + env(safe-area-inset-left));}
  .mvb-notice{margin:.8rem 1.1rem 0;}
  .mvb-day{min-height:42px; font-size:.92rem;}
  .mvb-slots{grid-template-columns:repeat(3,minmax(0,1fr));}
  .mvb-slot{min-height:46px;}
  .mvb-dl dd{font-size:1.05rem;}
}
@media (max-width:360px){
  .mvb-slots{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* --- Bewegung aus ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mvb[open] .mvb-card{animation:none;}
  .mvb-spin{animation-duration:2s;}
  .mvb-day, .mvb-slot, .mvb-btn, .mvb-close, .mvb-nav{transition:none;}
  .mvb-day.is-free:hover, .mvb-slot:hover:not(:disabled), .mvb-btn:hover:not(:disabled){transform:none;}
}