/*
 * Termin-Dialog. Nutzt die Farben des Website-Themes, wenn vorhanden,
 * sonst eigene Werte. So passt er auch auf eine andere Website (kooje).
 */
.dz2g-termin{
  --t-bg:var(--bg,#FEFCF7); --t-ink:var(--ink,#16110A); --t-akzent:var(--donut,#FD9584);
  --t-braun:var(--daddy,#A66D45); --t-linie:var(--border,rgba(22,17,10,.14)); --t-text2:var(--text-2,rgba(22,17,10,.68));
  /* Das Theme setzt * { margin:0 } und nimmt dem Dialog damit die Zentrierung. Hier zurückholen. */
  position:fixed; inset:0; margin:auto; height:fit-content;
  width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:22px;
  background:var(--t-bg); color:var(--t-ink); box-shadow:0 30px 80px rgba(22,17,10,.35); overflow:auto;
  font-family:'Hind',system-ui,sans-serif;
}
.dz2g-termin::backdrop{background:rgba(15,10,4,.6); backdrop-filter:blur(2px);}
html.dz2g-termin-offen{overflow:hidden;}

.dz2g-termin__zu{position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(22,17,10,.06); color:var(--t-ink); font-size:22px; line-height:1; cursor:pointer;}
.dz2g-termin__zu:hover{background:rgba(22,17,10,.12);}

.dz2g-termin__kopf{padding:26px 28px 6px;}
.dz2g-termin__band{display:inline-flex; align-items:center; gap:7px; font-family:'Montserrat',sans-serif; font-size:12px;
  font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--t-braun);}
.dz2g-termin__band::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--t-akzent);}
.dz2g-termin__kopf h2{margin:8px 44px 4px 0; font-family:'Montserrat',sans-serif; font-size:22px; line-height:1.2; font-weight:700;}
.dz2g-termin__info{margin:-4px 0 14px; color:var(--t-text2); font-size:14px; line-height:1.5;}
.dz2g-termin__wunsch{font-family:'Montserrat',sans-serif; font-weight:700; color:var(--t-ink) !important;}

.dz2g-termin__inhalt{padding:12px 28px 26px;}
.dz2g-termin__schritt{margin:6px 0 12px; font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; color:var(--t-ink);}
.dz2g-termin__hinweis{color:var(--t-text2); margin:10px 0;}
.dz2g-termin__fehler{color:#b3261e; font-size:14px; margin:10px 0;}

.dz2g-termin__tage{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x proximity; scrollbar-width:thin;}
.dz2g-termin__tag{flex:0 0 auto; scroll-snap-align:start; min-width:82px; padding:10px 12px; border:1.5px solid var(--t-linie);
  border-radius:14px; background:transparent; color:var(--t-ink); cursor:pointer; text-align:left; font:inherit; line-height:1.25;}
.dz2g-termin__tag span{display:block; font-size:12px; color:var(--t-text2);}
.dz2g-termin__tag strong{display:block; font-family:'Montserrat',sans-serif; font-size:14px;}
.dz2g-termin__tag em{display:block; font-style:normal; font-size:11px; color:var(--t-text2);}
.dz2g-termin__tag:hover{border-color:var(--t-ink);}
.dz2g-termin__tag.ist-aktiv{background:var(--t-ink); border-color:var(--t-ink); color:#fff;}
.dz2g-termin__tag.ist-aktiv span,.dz2g-termin__tag.ist-aktiv em{color:rgba(255,255,255,.75);}

.dz2g-termin__zeiten{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; margin-top:8px;}
.dz2g-termin__zeit{padding:11px 8px; border:1.5px solid var(--t-linie); border-radius:999px; background:transparent;
  color:var(--t-ink); font:600 14px/1 'Montserrat',sans-serif; cursor:pointer;}
.dz2g-termin__zeit:hover,.dz2g-termin__zeit:focus-visible{border-color:var(--t-akzent); background:var(--t-akzent);}

.dz2g-termin__wahl{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px;
  border-radius:14px; background:rgba(22,17,10,.05); margin-bottom:14px; font-size:15px;}
.dz2g-termin__aendern{border:0; background:none; color:var(--t-braun); text-decoration:underline; cursor:pointer; font:inherit;}

.dz2g-termin__feld{margin-bottom:12px;}
.dz2g-termin__feld label{display:block; font-size:13px; font-weight:600; margin-bottom:4px;}
.dz2g-termin__feld input,.dz2g-termin__feld textarea{width:100%; box-sizing:border-box; padding:11px 13px; border:1.5px solid var(--t-linie);
  border-radius:12px; background:#fff; color:var(--t-ink); font:inherit; font-size:16px;}
.dz2g-termin__feld input:focus,.dz2g-termin__feld textarea:focus{outline:none; border-color:var(--t-ink);}
.dz2g-termin__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.dz2g-termin__ok{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--t-text2); margin:4px 0 14px;}
.dz2g-termin__ok input{margin-top:3px; flex:0 0 auto;}
.dz2g-termin__ok a{color:inherit;}
.dz2g-termin__senden{width:100%; justify-content:center;}
.dz2g-termin__senden[disabled]{opacity:.6; cursor:wait;}
.dz2g-termin__klein{font-size:12px; color:var(--t-text2); margin:10px 0 0; text-align:center;}

.dz2g-termin__fertig{text-align:center; padding:10px 0 4px;}
.dz2g-termin__haken{width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--t-akzent);
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700;}
.dz2g-termin__fertig h3{font-family:'Montserrat',sans-serif; font-size:21px; margin:0 0 8px;}
.dz2g-termin__fertig p{color:var(--t-text2); margin:0 0 12px;}

/* Falls das Theme keine Pillen-Knöpfe hat */
.dz2g-termin .pill{display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border:0; border-radius:999px;
  background:var(--t-akzent); color:var(--t-ink); font:600 15px/1.2 'Montserrat',sans-serif; cursor:pointer; text-decoration:none;}

@media(max-width:520px){
  .dz2g-termin__kopf{padding:22px 20px 4px;}
  .dz2g-termin__inhalt{padding:10px 20px 22px;}
  .dz2g-termin__kopf h2{font-size:20px;}
}

/* Absage-Seite */
.dz2g-termin-seite{padding:120px 0 80px;}
.dz2g-termin-seite__box{max-width:560px; border:1px solid var(--border,#ddd); border-radius:22px; padding:30px;}
.dz2g-termin-seite__box h1{font-size:28px; margin:0 0 10px;}
.dz2g-termin-seite__box p{margin:0 0 16px;}
.dz2g-termin-seite__box form{margin:0 0 18px;}
