/* ==========================================================
   Terminbuchung – Popup (Calendly-ähnlich)
   ========================================================== */

.tb-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(30,24,20,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .3s;
}
.tb-overlay.offen{opacity:1}
.tb-modal{
  background:#fff;border-radius:24px;max-width:640px;width:100%;
  max-height:min(88vh,760px);overflow:hidden;position:relative;
  display:flex;
  font-family:'Barlow',-apple-system,sans-serif;color:var(--braun,#4e4037);
  transform:translateY(24px);transition:transform .3s;
}
/* Scrollen übernimmt der Innenbereich – der Balken sitzt eingerückt,
   damit die Abrundung des Popups erhalten bleibt */
.tb-inhalt{
  width:100%;overflow-y:auto;
  padding:clamp(24px,4vw,44px);
  margin:8px 8px 8px 0;
  scrollbar-width:thin;scrollbar-color:rgba(78,64,55,.3) transparent;
}
.tb-inhalt::-webkit-scrollbar{width:8px}
.tb-inhalt::-webkit-scrollbar-track{background:transparent;margin:16px 0}
.tb-inhalt::-webkit-scrollbar-thumb{background:rgba(78,64,55,.25);border-radius:4px}
.tb-inhalt::-webkit-scrollbar-thumb:hover{background:rgba(78,64,55,.4)}
.tb-overlay.offen .tb-modal{transform:none}
.tb-zu{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  border:none;background:rgba(78,64,55,.08);color:var(--braun,#4e4037);
  font-size:20px;line-height:1;cursor:pointer;
}
.tb-zu:hover{background:rgba(78,64,55,.16)}
.tb-titel{font-weight:700;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-.01em;margin:0 0 6px;padding-right:44px}
.tb-unter{font-weight:300;font-size:.98rem;color:rgba(78,64,55,.65);margin:0 0 24px}

/* Fortschritts-Punkte */
.tb-punkte{display:flex;gap:8px;margin-bottom:26px}
.tb-punkte i{width:34px;height:4px;border-radius:2px;background:rgba(78,64,55,.14)}
.tb-punkte i.aktiv{background:var(--tuerkis,#0098da)}

/* Auswahl-Karten (Terminart / Dienstleistung) */
.tb-optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.tb-option{
  border:1.5px solid rgba(78,64,55,.22);border-radius:16px;padding:16px 14px;
  background:#fff;cursor:pointer;text-align:center;font-family:inherit;color:inherit;
  font-size:.95rem;font-weight:400;transition:border-color .2s,background .2s;
}
.tb-option .tb-ikon{display:block;margin-bottom:8px}
.tb-option .tb-ikon svg{width:26px;height:26px;color:var(--tuerkis,#0098da)}
.tb-option:hover{border-color:var(--tuerkis,#0098da)}
.tb-option.gewaehlt{border-color:var(--tuerkis,#0098da);background:rgba(0,152,218,.07);font-weight:700}
.tb-feldgruppe{margin-bottom:20px}
.tb-feldgruppe label{display:block;font-weight:700;font-size:.92rem;margin-bottom:8px}

/* Kalender */
.tb-kalkopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tb-kalkopf b{font-size:1.05rem}
.tb-pfeil{
  width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(78,64,55,.22);
  background:#fff;cursor:pointer;font-size:16px;color:var(--braun,#4e4037);
}
.tb-pfeil:hover:not(:disabled){border-color:var(--tuerkis,#0098da);color:var(--tuerkis,#0098da)}
.tb-pfeil:disabled{opacity:.3;cursor:default}
.tb-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.tb-wt{font-size:.78rem;font-weight:700;color:rgba(78,64,55,.5);padding:6px 0}
.tb-tag{
  aspect-ratio:1;border-radius:50%;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:.95rem;color:var(--braun,#4e4037);
}
.tb-tag:hover:not(:disabled){background:rgba(0,152,218,.1)}
.tb-tag.frei{background:rgba(0,152,218,.09);font-weight:700;color:var(--tuerkis,#0098da)}
.tb-tag.frei:hover{background:rgba(0,152,218,.2)}
.tb-tag.gewaehlt{background:var(--tuerkis,#0098da);color:#fff}
.tb-tag:disabled{color:rgba(78,64,55,.25);cursor:default}

/* Uhrzeiten */
.tb-zeiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-bottom:8px}
.tb-zeit{
  border:1.5px solid rgba(78,64,55,.22);border-radius:12px;padding:11px 6px;
  background:#fff;cursor:pointer;font-family:inherit;font-size:.95rem;color:inherit;
}
.tb-zeit:hover{border-color:var(--tuerkis,#0098da)}
.tb-zeit.gewaehlt{border-color:var(--tuerkis,#0098da);background:var(--tuerkis,#0098da);color:#fff;font-weight:700}

/* Formular */
.tb-form input,.tb-form textarea,.tb-form select{
  width:100%;border:1.5px solid rgba(78,64,55,.22);border-radius:12px;
  padding:12px 14px;font-family:inherit;font-size:1rem;color:inherit;background:#fff;
}
.tb-form input:focus,.tb-form textarea:focus,.tb-form select:focus{outline:none;border-color:var(--tuerkis,#0098da)}
.tb-form textarea{min-height:80px;resize:vertical}
.tb-check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;margin-bottom:20px}
.tb-check input{width:auto;margin-top:3px}
.tb-check a{color:var(--tuerkis,#0098da);text-decoration:underline}

/* Buttons + Meldungen */
.tb-aktionen{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.tb-weiter,.tb-senden{
  border:none;border-radius:999px;background:var(--tuerkis,#0098da);color:#fff;
  font-family:inherit;font-weight:700;font-size:1rem;padding:14px 30px;cursor:pointer;
  transition:background .2s;
}
.tb-weiter:hover,.tb-senden:hover{background:var(--tuerkis-dunkel,#007ab0)}
.tb-weiter:disabled,.tb-senden:disabled{opacity:.4;cursor:default}
.tb-zurueck{border:none;background:none;font-family:inherit;font-size:.95rem;color:rgba(78,64,55,.65);cursor:pointer;text-decoration:underline}
.tb-zusammenfassung{
  background:rgba(0,152,218,.07);border-radius:14px;padding:14px 18px;
  font-size:.92rem;margin-bottom:20px;line-height:1.6;
}
.tb-hinweis{font-size:.92rem;color:rgba(78,64,55,.65)}
.tb-fehler{
  background:rgba(200,60,40,.08);border-left:4px solid #c83c28;border-radius:0 10px 10px 0;
  padding:12px 16px;font-size:.92rem;margin:14px 0;
}
.tb-lade{text-align:center;padding:34px 0;color:rgba(78,64,55,.6)}
.tb-erfolg{text-align:center;padding:24px 0}
.tb-erfolg .tb-haken{
  width:72px;height:72px;border-radius:50%;background:rgba(0,152,218,.12);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  color:var(--tuerkis,#0098da);
}
.tb-erfolg .tb-haken svg{width:36px;height:36px}
.tb-erfolg h3{font-weight:700;font-size:1.3rem;margin:0 0 10px}
.tb-erfolg p{font-weight:300;font-size:1rem;margin:0 0 8px}

@media(prefers-reduced-motion:reduce){
  .tb-overlay,.tb-modal{transition:none}
}