/* ═══════════════════════════════════════════════════════════
   UNIDROP Terminbuchung — eigenstaendiges Bauteil.
   Bringt eigene Farbtoken mit, damit es auf hellen wie dunklen
   Seiten identisch aussieht. Wird als Overlay und als Seite genutzt.
   ═══════════════════════════════════════════════════════════ */
.tb{
  --tb-bg:oklch(0.13 0.030 215);
  --tb-bg-2:oklch(0.17 0.032 212);
  --tb-line:oklch(1 0 0 / 12%);
  --tb-line-2:oklch(1 0 0 / 20%);
  --tb-ac:oklch(0.72 0.19 38);
  --tb-acl:oklch(0.80 0.15 48);
  --tb-acs:oklch(0.72 0.19 38 / 16%);
  --tb-ok:oklch(0.74 0.19 150);
  --tb-t1:oklch(0.97 0.006 60);
  --tb-t2:oklch(0.82 0.012 55);
  --tb-t3:oklch(0.64 0.010 50);
  --tb-r:18px;
  --tb-ease:cubic-bezier(.22,1,.36,1);
  --tb-spr:cubic-bezier(.34,1.4,.64,1);
  font-family:'Epilogue',system-ui,sans-serif;
  color:var(--tb-t2);
  -webkit-font-smoothing:antialiased;
}
.tb *,.tb *::before,.tb *::after{box-sizing:border-box}
.tb button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.tb h2,.tb h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;letter-spacing:-.035em;color:var(--tb-t1);margin:0}

/* ── Overlay ── */
.tb-overlay{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
}
.tb-overlay.open{display:flex}
.tb-scrim{
  position:absolute;inset:0;background:oklch(0.05 0.01 230 / 74%);
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);
  opacity:0;transition:opacity .4s var(--tb-ease);
}
.tb-overlay.in .tb-scrim{opacity:1}
.tb-overlay .tb-panel{
  position:relative;opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity .5s var(--tb-ease),transform .5s var(--tb-spr);
}
.tb-overlay.in .tb-panel{opacity:1;transform:none}
.tb-close{
  position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:999px;
  display:grid;place-items:center;color:var(--tb-t2);
  background:oklch(1 0 0/.07);border:1px solid var(--tb-line);
  transition:background .25s var(--tb-ease),color .25s var(--tb-ease),transform .25s var(--tb-ease);
}
.tb-close:hover{background:oklch(1 0 0/.14);color:var(--tb-t1);transform:rotate(90deg)}

/* ── Panel ── */
.tb-panel{
  width:min(880px,100%);max-height:min(92vh,900px);display:flex;flex-direction:column;
  border-radius:clamp(20px,2.5vw,30px);overflow:hidden;
  background:linear-gradient(168deg,var(--tb-bg-2) 0%,var(--tb-bg) 55%,oklch(0.10 0.022 222) 100%);
  border:1px solid var(--tb-line-2);
  box-shadow:0 40px 100px -30px oklch(0 0 0/.8),0 0 0 1px oklch(0.72 0.16 45/.14),inset 0 1.5px 1px 0 oklch(1 0 0/.16);
}
.tb-page .tb-panel{max-height:none;scroll-margin-top:110px}
.tb-glow{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(120% 70% at 50% -10%,oklch(0.72 0.19 38/.20),transparent 62%);
}
.tb-head{position:relative;z-index:1;padding:clamp(26px,3.5vw,38px) clamp(22px,3.5vw,40px) 0}
.tb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tb-ac)}
.tb-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--tb-ok);box-shadow:0 0 8px var(--tb-ok);animation:tb-pulse 2s ease-in-out infinite}
@keyframes tb-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tb-title{font-size:clamp(24px,3.2vw,34px);line-height:1.05;margin-top:12px}
.tb-sub{font-size:14.5px;line-height:1.6;color:var(--tb-t3);margin-top:10px;max-width:52ch}

/* ── Fortschritt ── */
.tb-rail{display:flex;gap:6px;margin-top:26px}
.tb-rail-seg{flex:1;height:3px;border-radius:99px;background:oklch(1 0 0/.10);overflow:hidden}
.tb-rail-seg i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--tb-acl),var(--tb-ac));transition:width .6s var(--tb-ease)}
.tb-rail-seg.done i,.tb-rail-seg.active i{width:100%}
.tb-steplabels{display:flex;gap:6px;margin-top:9px}
.tb-steplabels span{flex:1;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tb-t3);transition:color .4s var(--tb-ease)}
.tb-steplabels span.on{color:var(--tb-t1)}

/* ── Buehne ── */
.tb-body{position:relative;z-index:1;flex:1;overflow-y:auto;padding:clamp(22px,3vw,32px) clamp(22px,3.5vw,40px) 8px}
.tb-step{display:none}
.tb-step.on{display:block}

/* Schritt 1: Termintypen */
.tb-types{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tb-type{
  position:relative;text-align:left;padding:24px 22px 22px;border-radius:var(--tb-r);
  background:oklch(1 0 0/.045);border:1px solid var(--tb-line);
  transition:transform .35s var(--tb-spr),border-color .3s var(--tb-ease),background .3s var(--tb-ease),box-shadow .35s var(--tb-ease);
}
@media (hover:hover){.tb-type:hover{transform:translateY(-4px);border-color:var(--tb-line-2);background:oklch(1 0 0/.075)}}
.tb-type[aria-pressed="true"],.tb-type[aria-pressed="true"]:hover{
  border-color:var(--tb-ac);background:oklch(0.72 0.19 38/.09);
  box-shadow:0 0 0 1px var(--tb-acs),0 18px 40px -22px var(--tb-ac);
}
.tb-ring{width:46px;height:46px;display:block;margin-bottom:16px}
.tb-ring circle{fill:none;stroke-width:3.5;stroke-linecap:round}
.tb-ring .tb-ring-bg{stroke:oklch(1 0 0/.13)}
.tb-ring .tb-ring-fg{stroke:var(--tb-ac);stroke-dasharray:126;stroke-dashoffset:126;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s var(--tb-ease)}
.tb-type-body{display:block}
.tb-type-dur,.tb-type-name,.tb-type-desc{display:block}
.tb-type-dur{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:500;letter-spacing:-.03em;color:var(--tb-t1)}
.tb-type-name{font-size:14.5px;font-weight:700;color:var(--tb-t1);margin-top:8px}
.tb-type-desc{font-size:13.5px;line-height:1.55;color:var(--tb-t3);margin-top:6px}

/* Schritt 2: Kalender */
.tb-cal-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3vw,30px)}
.tb-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.tb-month{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--tb-t1)}
.tb-nav{display:flex;gap:6px}
.tb-nav button{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--tb-line);color:var(--tb-t2);transition:background .25s var(--tb-ease),color .25s,border-color .25s}
.tb-nav button:hover:not(:disabled){background:oklch(1 0 0/.09);color:var(--tb-t1);border-color:var(--tb-line-2)}
.tb-nav button:disabled{opacity:.3;cursor:not-allowed}
.tb-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.tb-dow span{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tb-t3);padding:6px 0}
.tb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tb-day{
  position:relative;aspect-ratio:1;border-radius:12px;font-size:14px;font-weight:600;color:var(--tb-t2);
  display:grid;place-items:center;border:1px solid transparent;
  transition:background .22s var(--tb-ease),color .22s,border-color .22s,transform .3s var(--tb-spr);
}
@media (hover:hover){.tb-day.free:hover{background:oklch(1 0 0/.09);color:var(--tb-t1);transform:translateY(-2px);border-color:var(--tb-line)}}
.tb-day.off{color:oklch(0.42 0.008 250);cursor:not-allowed}
.tb-day.holiday{color:oklch(0.50 0.05 30);cursor:not-allowed}
.tb-day.holiday::after{content:'';position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:oklch(0.55 0.10 30)}
.tb-day.empty{pointer-events:none}
.tb-day.today{border-color:var(--tb-line-2)}
.tb-day.free[aria-pressed="true"],.tb-day.free[aria-pressed="true"]:hover{background:linear-gradient(150deg,var(--tb-acl),var(--tb-ac));color:oklch(0.14 0.02 35);border-color:transparent;box-shadow:0 10px 26px -12px var(--tb-ac)}
.tb-day.free::before{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:14px;height:2px;border-radius:2px;background:var(--tb-acs);transition:background .22s}
.tb-day.free[aria-pressed="true"]::before{background:oklch(0.14 0.02 35/.35)}

.tb-slots-panel{display:flex;flex-direction:column;min-height:260px}
.tb-slots-title{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--tb-t1);margin-bottom:14px}
.tb-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}
.tb-slot{
  padding:11px 6px;border-radius:11px;font-size:14px;font-weight:600;color:var(--tb-t2);text-align:center;
  border:1px solid var(--tb-line);background:oklch(1 0 0/.035);
  transition:background .25s var(--tb-ease),color .25s,border-color .25s,transform .3s var(--tb-spr);
}
@media (hover:hover){.tb-slot:hover{background:oklch(1 0 0/.09);color:var(--tb-t1);border-color:var(--tb-line-2);transform:translateY(-2px)}}
.tb-slot[aria-pressed="true"],.tb-slot[aria-pressed="true"]:hover{background:linear-gradient(150deg,var(--tb-acl),var(--tb-ac));color:oklch(0.14 0.02 35);border-color:transparent;box-shadow:0 10px 26px -12px var(--tb-ac)}
.tb-empty{font-size:13.5px;line-height:1.6;color:var(--tb-t3);padding:14px 0}
.tb-tz{margin-top:16px;font-size:12px;color:var(--tb-t3);display:flex;align-items:center;gap:7px}

/* Schritt 3: Formular */
.tb-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tb-field{position:relative;grid-column:span 1}
.tb-field.wide{grid-column:1/-1}
.tb-field input,.tb-field textarea{
  width:100%;padding:22px 16px 10px;border-radius:13px;font-size:15px;color:var(--tb-t1);
  font-family:inherit;line-height:1.5;
  background:oklch(1 0 0/.04);border:1px solid var(--tb-line);outline:none;
  transition:border-color .25s var(--tb-ease),box-shadow .25s var(--tb-ease),background .25s var(--tb-ease);
}
.tb-field textarea{min-height:104px;resize:vertical;padding-top:26px}
.tb-field label{
  position:absolute;left:17px;top:16px;font-size:15px;color:var(--tb-t3);pointer-events:none;
  transition:transform .25s var(--tb-ease),font-size .25s var(--tb-ease),color .25s var(--tb-ease);
  transform-origin:left top;
}
.tb-field input:focus,.tb-field textarea:focus{border-color:var(--tb-ac);background:oklch(1 0 0/.06);box-shadow:0 0 0 3px var(--tb-acs),0 0 30px -12px var(--tb-ac)}
.tb-field input:focus + label,.tb-field textarea:focus + label,
.tb-field input:not(:placeholder-shown) + label,.tb-field textarea:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.72);color:var(--tb-ac);
}
.tb-field .tb-tick{
  position:absolute;right:14px;top:18px;width:18px;height:18px;opacity:0;transform:scale(.6);
  transition:opacity .3s var(--tb-ease),transform .35s var(--tb-spr);
}
.tb-field.valid .tb-tick{opacity:1;transform:none}
.tb-field.invalid input,.tb-field.invalid textarea{border-color:oklch(0.62 0.19 25)}
.tb-err{grid-column:1/-1;font-size:13.5px;color:oklch(0.72 0.17 25);display:none}
.tb-err.on{display:block}
.tb-consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--tb-t3);cursor:pointer;position:relative}
.tb-consent input{position:absolute;left:0;top:2px;width:20px;height:20px;opacity:0;margin:0}
.tb-consent .tb-box{flex-shrink:0;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--tb-line-2);display:grid;place-items:center;margin-top:1px;transition:background .25s,border-color .25s}
.tb-consent .tb-box svg{width:11px;height:11px;opacity:0;transition:opacity .2s}
.tb-consent input:checked + .tb-box{background:var(--tb-ac);border-color:var(--tb-ac)}
.tb-consent input:checked + .tb-box svg{opacity:1}
.tb-consent input:focus-visible + .tb-box{outline:2px solid var(--tb-ac);outline-offset:3px}
.tb-consent a{color:var(--tb-ac);font-weight:600}

/* Schritt 4: Bestaetigung */
.tb-done{text-align:center;padding:12px 0 8px}
.tb-check{width:76px;height:76px;margin:0 auto 22px}
.tb-check circle{fill:none;stroke:var(--tb-ok);stroke-width:3;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset .8s var(--tb-ease)}
.tb-check path{fill:none;stroke:var(--tb-ok);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;transition:stroke-dashoffset .5s var(--tb-ease) .5s}
.tb-done.in .tb-check circle,.tb-done.in .tb-check path{stroke-dashoffset:0}
.tb-ticket{
  margin:26px auto 0;max-width:440px;border-radius:var(--tb-r);padding:22px 26px;text-align:left;
  background:oklch(1 0 0/.05);border:1px solid var(--tb-line);
}
.tb-ticket-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:14px;border-bottom:1px dashed var(--tb-line)}
.tb-ticket-row:last-child{border-bottom:none}
.tb-ticket-row span{color:var(--tb-t3)}
.tb-ticket-row b{color:var(--tb-t1);font-weight:700;text-align:right}
.tb-done-note{font-size:14px;line-height:1.65;color:var(--tb-t3);margin-top:22px;max-width:46ch;margin-left:auto;margin-right:auto}

/* ── Fussleiste ── */
.tb-foot{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px clamp(22px,3.5vw,40px) clamp(20px,3vw,26px);border-top:1px solid var(--tb-line);
  background:oklch(0.10 0.022 222 / 55%);
}
.tb-summary{font-size:13.5px;color:var(--tb-t3);min-height:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-summary b{color:var(--tb-t1);font-weight:600}
.tb-summary .tb-dot{width:4px;height:4px;border-radius:50%;background:var(--tb-line-2)}
.tb-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.tb-btn{
  display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .3s var(--tb-spr),box-shadow .3s var(--tb-ease),background .25s var(--tb-ease),opacity .25s;
}
.tb-btn-ghost{color:var(--tb-t2);border:1px solid var(--tb-line)}
.tb-btn-ghost:hover{background:oklch(1 0 0/.07);color:var(--tb-t1)}
.tb-btn-primary{
  color:oklch(0.13 0.02 35);
  background:radial-gradient(120% 120% at 50% 0%,var(--tb-acl) 0%,var(--tb-ac) 100%);
  box-shadow:0 0 28px var(--tb-acs),0 12px 26px -10px oklch(0 0 0/.6),inset 0 1.5px 1px 0 oklch(1 0 0/.5);
}
.tb-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 42px oklch(0.72 0.19 38/.42),0 16px 32px -10px oklch(0 0 0/.6),inset 0 1.5px 1px 0 oklch(1 0 0/.5)}
.tb-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.tb-btn .tb-arrow{transition:transform .3s var(--tb-spr)}
.tb-btn:hover:not(:disabled) .tb-arrow{transform:translateX(4px)}
.tb-spin{width:16px;height:16px;border-radius:50%;border:2px solid oklch(0.13 0.02 35/.3);border-top-color:oklch(0.13 0.02 35);animation:tb-spin .7s linear infinite;display:none}
.tb-btn.loading .tb-spin{display:block}
.tb-btn.loading .tb-arrow{display:none}
@keyframes tb-spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .tb-types{grid-template-columns:1fr}
  .tb-type{display:flex;align-items:center;gap:18px;padding:18px 20px}
  .tb-ring{margin-bottom:0;flex-shrink:0}
  .tb-cal-wrap{grid-template-columns:1fr}
  .tb-form{grid-template-columns:1fr}
  .tb-slots{grid-template-columns:repeat(3,1fr)}
  .tb-actions{width:100%}
  .tb-actions .tb-btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .tb *,.tb *::before,.tb *::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .tb-check circle,.tb-check path{stroke-dashoffset:0}
  .tb-ring .tb-ring-fg{transition:none}
}



/* ── Helle Fassung ──────────────────────────────────────────
   Im Hellmodus traegt der Dialog dieselbe Flaeche wie die Karten
   auf der Startseite: weisse Karte, feine Linie, weicher Schatten.
   Nur die Token werden getauscht, das Bauteil bleibt dasselbe.
   :root hebt die Spezifitaet ueber die Hell-Regeln aus app.css. */
:root:not([data-theme="dark"]) .tb{
  --tb-bg: var(--card);
  --tb-bg-2: var(--bg-2);
  --tb-line: var(--line);
  --tb-line-2: color-mix(in oklab, var(--ink) 16%, transparent);
  --tb-ac: var(--accent);
  --tb-acl: var(--accent-2);
  --tb-acs: var(--accent-soft);
  --tb-ok: oklch(0.55 0.16 150);
  --tb-t1: var(--ink);
  --tb-t2: var(--ink-2);
  --tb-t3: var(--muted);
}
:root:not([data-theme="dark"]) .tb h1,
:root:not([data-theme="dark"]) .tb h2,
:root:not([data-theme="dark"]) .tb h3,
:root:not([data-theme="dark"]) .tb .tb-title{color:var(--tb-t1)}
:root:not([data-theme="dark"]) .tb p,
:root:not([data-theme="dark"]) .tb .tb-sub,
:root:not([data-theme="dark"]) .tb .tb-dow,
:root:not([data-theme="dark"]) .tb .tb-consent,
:root:not([data-theme="dark"]) .tb .tb-foot,
:root:not([data-theme="dark"]) .tb .tb-done-note{color:var(--tb-t3)}
:root:not([data-theme="dark"]) .tb{color:var(--tb-t2)}
:root:not([data-theme="dark"]) .tb .tb-eyebrow{color:var(--tb-ac)}
:root:not([data-theme="dark"]) .tb .tb-day,
:root:not([data-theme="dark"]) .tb .tb-slot,
:root:not([data-theme="dark"]) .tb .tb-field input,
:root:not([data-theme="dark"]) .tb .tb-field textarea,
:root:not([data-theme="dark"]) .tb .tb-field select{color:var(--tb-t1)}
/* Panel wie eine Karte der Startseite */
:root:not([data-theme="dark"]) .tb-panel{
  background:linear-gradient(168deg,var(--bg-2) 0%,var(--card) 46%,var(--card) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
:root:not([data-theme="dark"]) .tb-glow{opacity:.35}
:root:not([data-theme="dark"]) .tb-foot{background:var(--bg-2);border-top:1px solid var(--line)}
:root:not([data-theme="dark"]) .tb-rail-seg{background:color-mix(in oklab, var(--ink) 10%, transparent)}
:root:not([data-theme="dark"]) .tb-day,
:root:not([data-theme="dark"]) .tb-slot{background:var(--card);border:1px solid var(--line)}
:root:not([data-theme="dark"]) .tb-day:hover,
:root:not([data-theme="dark"]) .tb-slot:hover{border-color:color-mix(in oklab, var(--accent) 45%, transparent)}
:root:not([data-theme="dark"]) .tb-field input,
:root:not([data-theme="dark"]) .tb-field textarea,
:root:not([data-theme="dark"]) .tb-field select{background:var(--card);border:1px solid var(--line)}