/* ============================================================
   VITALITAS TERMINBUCHUNG — Frontend
   Baut auf dem Vitalitas-Design-System auf:
   Cream #EFEAE0 · Vitalitas-Grün #69A58F/#2E5A4C · Messing #C3A265
   Montserrat · Radius 20px · Pill-Buttons · Glass-Karten
   ============================================================ */
.vt-booking{
  --cream:#EFEAE0; --paper:#F4EFE6;
  --vt:#69A58F; --vt-lt:#8FBCA9; --vt-dp:#2E5A4C; --vt-dk:#16261F; --vt-900:#101C17;
  --brass:#C3A265; --brass-lt:#E0C99E;
  --ink:#22241F;
  --r:20px; --r-sm:14px;
  --ease:cubic-bezier(.22,.68,0,1);
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(56px,8vw,110px) clamp(20px,4vw,48px) clamp(64px,8vw,110px);
  background:
    radial-gradient(80% 110% at 86% 4%, rgba(195,162,101,.24) 0%, rgba(195,162,101,0) 58%),
    radial-gradient(75% 100% at 6% 96%, rgba(105,165,143,.32) 0%, rgba(105,165,143,0) 62%),
    linear-gradient(158deg, #3C5C4C 0%, #2E5A4C 46%, #16261F 100%);
  color:var(--paper);
  font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size:17px; line-height:1.65;
}
.vt-booking *,.vt-booking *::before,.vt-booking *::after{ box-sizing:border-box; }
/* Button-Reset mit Null-Spezifität (:where) — Komponenten gewinnen per Quellreihenfolge. */
.vt-booking :where(button){ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
.vt-booking :focus-visible{ outline:2px solid var(--brass-lt); outline-offset:3px; border-radius:4px; }

.vt-glow{ position:absolute; border-radius:50%; filter:blur(78px); pointer-events:none; z-index:0; }
.vt-glow-a{ width:520px; height:520px; top:-160px; right:-120px;
  background:radial-gradient(circle, rgba(195,162,101,.30), rgba(195,162,101,0) 70%); }
.vt-glow-b{ width:560px; height:560px; bottom:-200px; left:-160px;
  background:radial-gradient(circle, rgba(105,165,143,.35), rgba(105,165,143,0) 70%); }

.vt-wrap-inner{ position:relative; z-index:2; max-width:880px; margin:0 auto; }

/* ---------- Kopf ---------- */
.vt-head{ text-align:center; margin-bottom:clamp(26px,3.4vw,40px); }
.vt-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem 1rem .45rem .8rem; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-lt);
}
.vt-dot{ width:6px; height:6px; border-radius:50%; background:var(--brass-lt); flex:none; }
.vt-title{
  margin:.9rem 0 .5rem; font-weight:500; letter-spacing:normal; text-wrap:balance;
  font-size:clamp(2rem, 4.6vw, 3.3rem); line-height:1.12; color:var(--paper);
}
.vt-title em{ font-style:italic; font-weight:500; color:var(--brass-lt); }
.vt-lead{ margin:0 auto; max-width:52ch; font-weight:300; color:rgba(244,239,230,.72); }

/* ---------- Fortschritt ---------- */
.vt-steps{
  display:flex; justify-content:center; gap:clamp(10px,2.4vw,26px);
  list-style:none; margin:0 0 clamp(20px,2.6vw,30px); padding:0;
  font-size:.78rem; font-weight:600; color:rgba(244,239,230,.45);
}
.vt-steps li{ display:flex; align-items:center; gap:.5rem; transition:color .3s; }
.vt-steps li span{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(244,239,230,.3); font-size:.7rem; transition:all .3s;
}
.vt-steps li.is-active{ color:var(--paper); }
.vt-steps li.is-active span{ background:var(--brass-lt); border-color:var(--brass-lt); color:var(--vt-900); }
.vt-steps li.is-done{ color:rgba(244,239,230,.75); }
.vt-steps li.is-done span{ background:rgba(224,201,158,.22); border-color:rgba(224,201,158,.5); color:var(--brass-lt); }
@media(max-width:560px){ .vt-steps li{ font-size:0; gap:0; } .vt-steps li span{ font-size:.7rem; } }

/* ---------- Glass-Karte ---------- */
.vt-card{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 24px 60px -24px rgba(14,30,26,.55);
  padding:clamp(24px,3.4vw,40px);
}
.vt-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:38%;
  background:linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,0)); pointer-events:none;
}
.vt-card > *{ position:relative; }

.vt-step-h{
  margin:0 0 1.2rem; font-weight:500; letter-spacing:normal;
  font-size:clamp(1.2rem,2vw,1.5rem); color:var(--paper);
}

/* Schritt-Wechsel: reagiert auf Klick, kein Dauergeflacker */
.vt-step{ animation:vt-in .45s var(--ease); }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .vt-step{ animation:none; } }

/* ---------- Auswahl-Zusammenfassung ---------- */
.vt-booking [hidden]{ display:none !important; }
.vt-summary{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.vt-sum-item{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .85rem; border-radius:100px; font-size:.8rem; font-weight:600;
  background:rgba(224,201,158,.14); border:1px solid rgba(224,201,158,.4); color:var(--brass-lt);
  transition:background .3s,border-color .3s;
}
.vt-sum-item::after{ content:"ändern"; font-weight:400; font-size:.72rem; color:rgba(244,239,230,.55); text-decoration:underline; }
.vt-sum-item:hover{ background:rgba(224,201,158,.22); border-color:var(--brass-lt); }

/* ---------- Schritt 1: Behandlung ---------- */
.vt-search{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1.05rem; border-radius:var(--r-sm); margin-bottom:1.1rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
  color:rgba(244,239,230,.6); transition:border-color .3s, box-shadow .3s;
}
.vt-search:focus-within{ border-color:var(--brass-lt); box-shadow:0 0 0 3px rgba(224,201,158,.16); }
/* Input selbst bekommt keinen eigenen Fokus-Rahmen — der Container zeigt den Active-State bereits. */
.vt-search input:focus,.vt-search input:focus-visible{ outline:none; }
.vt-search input{
  flex:1; background:none; border:0; outline:0; font:inherit; font-size:.98rem; color:var(--paper); min-width:0;
}
.vt-search input::placeholder{ color:rgba(244,239,230,.4); }

.vt-treat-groups{ display:grid; gap:1.15rem; max-height:420px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; }
.vt-tg-k{
  margin:0 0 .5rem; font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-lt);
}
.vt-tg-list{ display:flex; flex-wrap:wrap; gap:.5rem; }
.vt-treat{
  padding:.55rem 1.05rem; border-radius:100px; font-size:.9rem; font-weight:500;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:var(--paper);
  transition:border-color .3s, background .3s, transform .35s var(--ease);
}
.vt-treat:hover{ border-color:var(--brass-lt); background:rgba(224,201,158,.12); transform:translateY(-2px); }
.vt-treat mark{ background:none; color:var(--brass-lt); font-weight:700; }
.vt-empty{ margin:.6rem 0 0; font-size:.9rem; color:rgba(244,239,230,.6); }

/* ---------- Schritt 2: Arzt ---------- */
.vt-docs{ display:grid; gap:.7rem; }
.vt-doc{
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left;
  padding:.95rem 1.1rem; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  transition:border-color .3s, background .3s, transform .35s var(--ease);
}
.vt-doc:hover{ border-color:var(--brass-lt); background:rgba(224,201,158,.1); transform:translateY(-2px); }
.vt-doc img{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 18%; flex:none;
  border:1px solid rgba(244,239,230,.5); display:block; }
.vt-doc-fallback{
  width:64px; height:64px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(224,201,158,.35), rgba(105,165,143,.4));
  border:1px solid rgba(244,239,230,.4); font-size:1.4rem; font-weight:500; color:var(--paper);
}
.vt-doc-txt{ flex:1; min-width:0; }
.vt-doc-txt b{ display:block; font-weight:600; font-size:1rem; color:var(--paper); }
.vt-doc-txt span{ display:block; font-size:.82rem; font-weight:300; color:rgba(244,239,230,.6); margin-top:.1rem; }
.vt-doc > svg{ flex:none; color:rgba(244,239,230,.5); transition:transform .35s var(--ease), color .3s; }
.vt-doc:hover > svg{ transform:translateX(4px); color:var(--brass-lt); }
.vt-doc-any{ border-style:dashed; }
.vt-doc-flash{ color:var(--brass-lt); }

/* ---------- Schritt 3: Termin ---------- */
.vt-next{ margin-bottom:1.3rem; padding-bottom:1.2rem; border-bottom:1px solid rgba(244,239,230,.14); }
.vt-next-k{ margin:0 0 .55rem; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-lt); }
.vt-next-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.vt-next-chip{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:.1rem;
  padding:.55rem 1rem; border-radius:var(--r-sm); text-align:left;
  background:rgba(224,201,158,.14); border:1px solid rgba(224,201,158,.42);
  transition:background .3s, border-color .3s, transform .35s var(--ease);
}
.vt-next-chip:hover{ background:rgba(224,201,158,.24); border-color:var(--brass-lt); transform:translateY(-2px); }
.vt-next-chip b{ font-size:.88rem; font-weight:600; color:var(--paper); }
.vt-next-chip span{ font-size:.74rem; font-weight:400; color:rgba(244,239,230,.65); }

.vt-picker{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(16px,2.4vw,28px); align-items:start; }
@media(max-width:680px){ .vt-picker{ grid-template-columns:1fr; } }

.vt-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.vt-cal-head strong{ font-weight:500; font-size:1.02rem; letter-spacing:.01em; }
.vt-cal-nav{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.06);
  transition:border-color .3s, background .3s;
}
.vt-cal-nav:hover{ border-color:var(--brass-lt); background:rgba(224,201,158,.12); }
.vt-cal-nav:disabled{ opacity:.3; cursor:default; }
.vt-cal-nav:disabled:hover{ border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.06); }

.vt-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;
  font-size:.68rem; font-weight:600; letter-spacing:.08em; color:rgba(244,239,230,.45); text-align:center; }
.vt-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.vt-day{
  aspect-ratio:1; border-radius:10px; display:grid; place-items:center; position:relative;
  font-size:.88rem; font-weight:500; color:rgba(244,239,230,.35);
}
.vt-day.is-free{
  color:var(--paper); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  cursor:pointer; transition:border-color .3s, background .3s;
}
.vt-day.is-free::after{
  content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--vt-lt);
}
.vt-day.is-free:hover{ border-color:var(--brass-lt); background:rgba(224,201,158,.12); }
.vt-day.is-selected{ background:var(--brass-lt); border-color:var(--brass-lt); color:var(--vt-900); font-weight:700; }
.vt-day.is-selected::after{ background:var(--vt-dp); }
.vt-cal-note{ margin:.7rem 0 0; font-size:.82rem; color:rgba(244,239,230,.6); }

.vt-times-k{ margin:0 0 .6rem; font-size:.8rem; font-weight:600; color:rgba(244,239,230,.75); }
.vt-times-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.5rem; }
.vt-time{
  padding:.6rem .4rem; border-radius:var(--r-sm); text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  transition:border-color .3s, background .3s, transform .35s var(--ease);
}
.vt-time:hover{ border-color:var(--brass-lt); background:rgba(224,201,158,.12); transform:translateY(-2px); }
.vt-time b{ display:block; font-size:.94rem; font-weight:600; color:var(--paper); }
.vt-time span{ display:block; font-size:.68rem; font-weight:400; color:rgba(244,239,230,.55); margin-top:.1rem; }

/* ---------- Schritt 4: Formular ---------- */
.vt-frow{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media(max-width:560px){ .vt-frow{ grid-template-columns:1fr; } }
.vt-fld{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.85rem; }
.vt-fld label{ font-size:.78rem; font-weight:600; color:rgba(244,239,230,.85); }
.vt-opt{ font-weight:300; color:rgba(244,239,230,.5); }
.vt-fld input,.vt-fld textarea{
  font:inherit; font-size:.95rem; padding:.78rem .9rem; border-radius:11px; color:var(--paper);
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07);
  transition:border-color .3s, box-shadow .3s; width:100%;
}
.vt-fld input::placeholder,.vt-fld textarea::placeholder{ color:rgba(244,239,230,.4); }
.vt-fld textarea{ min-height:88px; resize:vertical; }
.vt-fld input:focus,.vt-fld textarea:focus{ outline:0; border-color:var(--brass-lt); box-shadow:0 0 0 3px rgba(224,201,158,.16); }
.vt-fld.is-invalid input,.vt-fld.is-invalid textarea{ border-color:#D98E8E; }

.vt-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.vt-consent{ display:flex; gap:.7rem; align-items:flex-start; margin:.3rem 0 1.1rem;
  font-size:.8rem; font-weight:300; color:rgba(244,239,230,.7); cursor:pointer; }
.vt-consent input{ margin-top:.2rem; flex:none; accent-color:var(--brass); width:16px; height:16px; }
.vt-consent a{ color:var(--brass-lt); text-decoration:underline; }

.vt-error{
  margin:0 0 1rem; padding:.7rem 1rem; border-radius:var(--r-sm); font-size:.86rem;
  background:rgba(217,142,142,.14); border:1px solid rgba(217,142,142,.45); color:#F3D9D9;
}

.vt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  padding:.95rem 1.7rem; border-radius:100px;
  background:var(--paper); color:var(--vt-900);
  font-size:.96rem; font-weight:600; letter-spacing:.01em;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s;
  box-shadow:0 14px 34px -12px rgba(14,30,26,.5);
}
.vt-btn svg{ flex:none; transition:transform .45s var(--ease); }
.vt-btn:hover{ background:#fff; transform:translateY(-2px); }
.vt-btn:hover svg{ transform:translateX(4px); }
.vt-btn:disabled{ opacity:.6; cursor:wait; transform:none; }
.vt-note{ margin:.8rem 0 0; text-align:center; font-size:.78rem; font-weight:300; color:rgba(244,239,230,.55); }

/* ---------- Erfolg ---------- */
.vt-success{ text-align:center; padding:1rem 0 .5rem; }
.vt-success-icon{
  width:64px; height:64px; margin:0 auto 1.1rem; border-radius:50%;
  display:grid; place-items:center; color:var(--vt-900);
  background:linear-gradient(150deg, var(--brass-lt), var(--vt-lt));
  box-shadow:0 18px 40px -16px rgba(224,201,158,.5);
}
.vt-success-slot{ margin:.2rem 0 .8rem; font-size:1.05rem; font-weight:600; color:var(--brass-lt); }
.vt-success-txt{ margin:0 auto; max-width:46ch; font-weight:300; color:rgba(244,239,230,.75); }

/* ---------- Zurück ---------- */
.vt-back{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.3rem;
  font-size:.84rem; font-weight:600; color:rgba(244,239,230,.6); transition:color .3s;
}
.vt-back:hover{ color:var(--brass-lt); }

/* ---------- Trust-Zeile ---------- */
.vt-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2rem;
  list-style:none; margin:clamp(20px,2.6vw,30px) 0 0; padding:0;
  font-size:.8rem; font-weight:400; color:rgba(244,239,230,.55);
}
.vt-trust li{ display:flex; align-items:center; gap:.5rem; }
.vt-trust li::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--brass-lt); flex:none;
}