/* Seitenspezifisches CSS „Kontakt & Termin“ (T4, LAB-198) – ergänzt studio.css.
   Enthält zusätzlich die Zustands-Klassen, die `booking-system.js` und
   `contact-forms.js` zur Laufzeit erzeugen (Slot-Auswahl, Lade-, Erfolgs-
   und Fehlerzustände). */

/* Abschnittsköpfe ------------------------------------------------ */
.contact-block h2,
.booking-block h2{margin-top:30px}
.contact-block .page-lead,
.booking-block .page-lead{margin-top:24px;max-width:58ch;font-size:20px;color:var(--muted)}

/* Kontakt: Info + Formular --------------------------------------- */
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(38px,6vw,90px);margin-top:54px;align-items:start}
.contact-facts a.contact-value{border-bottom:1px solid transparent}
.contact-facts a.contact-value:hover{border-bottom-color:currentColor}
.contact-facts address{font-size:17px;line-height:1.6}
.contact-column .arrow-link{margin-top:36px;font-size:15px;gap:14px}
.contact-form-panel h3{font-size:clamp(23px,2.5vw,31px);font-weight:540;letter-spacing:-.035em}
.contact-form-panel .form{max-width:none;margin-top:26px}
.contact-form-panel .checkbox{margin-top:28px}
.contact-form-panel .form-actions{margin-top:24px}

/* Fehlerzustände der Module (JS setzt .error am Feld, .field-error an) */
.field input.error,.field select.error,.field textarea.error,
.form-group-modern input.error,.form-group-modern textarea.error{border-color:#9c2b1b;background:#fdf5f3}

/* Erfolgsmeldung (contact-forms.js befüllt #successMessage) ------ */
.form-success{margin-top:22px}

/* Terminbuchung -------------------------------------------------- */
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);margin-top:54px;align-items:start}
.booking-panel{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,40px)}
.booking-panel h3{font-size:clamp(22px,2.4vw,30px);font-weight:540;letter-spacing:-.035em}
.panel-hint{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.6}

.date-picker-modern{display:flex;flex-direction:column;gap:9px;margin-top:28px}
.date-picker-modern label{font:500 12px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.date-picker-modern input{font:18px/1.5 var(--body);color:var(--ink);background:#fff;border:1px solid #aeb7a6;padding:12px 16px;min-height:52px;width:100%}
.date-picker-modern input:focus-visible{outline:3px solid #6885db;outline-offset:2px;border-color:var(--blue)}

.time-slots-modern{margin-top:26px}
.time-slot-modern{display:grid;place-items:center;min-height:54px;padding:8px 10px;border:1px solid #aeb7a6;background:transparent;font:15px var(--mono);cursor:pointer;text-align:center}
.time-slot-modern:hover{border-color:var(--blue);color:var(--blue)}
.time-slot-modern.selected{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.time-slot-modern:focus-visible{outline:3px solid #6885db;outline-offset:2px}

.no-slots-modern{border:1px dashed #aeb7a6;padding:22px}
.no-slots-modern h4{font:540 19px/1.3 var(--display);letter-spacing:-.02em}
.no-slots-modern p{margin-top:9px;color:var(--muted);font-size:15px}
.no-slots-icon{display:none}
.no-slots-container h4{font:540 19px/1.3 var(--display)}
.no-slots-container p{color:var(--muted);font-size:15px;margin-top:8px}
.no-slots-reasons{margin-top:16px}
.no-slots-reasons ul{padding-left:20px;color:var(--muted);font-size:15px}
.no-slots-reasons li+li{margin-top:4px}
.contact-alternative{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.contact-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 18px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:550 15px var(--display)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-accent{background:var(--blue);border-color:var(--blue);color:#fff}

.spinner{width:26px;height:26px;border:2px solid #cbcfc5;border-top-color:var(--blue);border-radius:50%;animation:igs-spin .8s linear infinite}
@keyframes igs-spin{to{transform:rotate(360deg)}}
.loading.show{display:flex;flex-direction:column;gap:12px;align-items:flex-start;color:var(--muted);font-size:15px;padding:18px 0}
.time-slots-modern > .loading.show{display:flex}
.no-slots{color:var(--muted);font-size:15px;padding:14px 0}

.form-group-modern{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.form-group-modern label{font:500 12px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.form-group-modern input,.form-group-modern textarea{font:18px/1.5 var(--body);color:var(--ink);background:#fff;border:1px solid #aeb7a6;padding:13px 16px;min-height:52px;width:100%}
.form-group-modern textarea{min-height:120px;resize:vertical}
.form-group-modern input:focus-visible,.form-group-modern textarea:focus-visible{outline:3px solid #6885db;outline-offset:2px;border-color:var(--blue)}
.required{color:var(--blue)}
.optional{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}

.selected-slot-modern{display:none;margin-top:26px;padding:15px 17px;background:#eef2e3;border:1px solid #aeb7a6;font-size:15px}
.selected-slot-modern.show{display:block}

#bookingForm .checkbox{margin-top:26px}
.btn-primary-modern{margin-top:28px;width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 22px;border:0;background:var(--blue);color:#fff;font:550 16px/1.3 var(--display)}
.btn-primary-modern:hover{background:#1d2f74}
.btn-loading{display:none}
.btn-primary-modern.loading .btn-loading{display:inline-flex}
.btn-loading .spinner{width:18px;height:18px;border-color:#ffffff59;border-top-color:#fff}

.booking-error{display:none;margin-top:20px;padding:14px 16px;border-left:2px solid #9c2b1b;background:#fdf5f3;color:#9c2b1b;font-size:15px}
.booking-error.show{display:block}
.booking-error h4{font-size:17px;margin-bottom:6px}

.booking-success-container{border-top:1px solid var(--line);padding-top:22px;margin-top:6px}
.booking-success-icon{display:none}
.booking-success-container h3{font-size:clamp(21px,2.2vw,27px);font-weight:540}
.booking-success-container > p{margin-top:10px;color:var(--muted);font-size:15px}
.booking-details{margin-top:18px;padding:14px 16px;background:#eef2e3;border:1px solid #aeb7a6;font-size:15px}
.booking-details p+p{margin-top:4px}
.calendar-download{margin-top:20px}
.calendar-download > p{font-size:15px}
.calendar-download .btn{margin-top:12px}
.calendar-hint{margin-top:10px;color:var(--muted);font-size:13px}
.booking-success-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Anfahrt als aufklappbarer Detailblock -------------------------- */
.contact-transit{margin-top:26px;max-width:420px;border-top:1px solid var(--line)}
.contact-transit summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;font:500 15px/1.4 var(--display)}
.contact-transit summary::-webkit-details-marker{display:none}
.contact-transit summary span{font-size:22px;font-weight:300;transition:transform .3s}
.contact-transit[open] summary span{transform:rotate(45deg)}
.contact-transit ul{list-style:none;padding:0 0 16px;margin:0;display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.contact-transit li{font-size:15px;color:var(--muted)}

/* FAQ ------------------------------------------------------------ */
.contact-block .faq-block{margin-top:44px}
.contact-block .faq-list details:first-child{border-top:1px solid #b6bfb0}
.contact-block .faq-list details:last-child{border-bottom:1px solid #b6bfb0}
.cta-band .cta-phone{border-bottom:1px solid currentColor;font-weight:600;white-space:nowrap}
.cta-band .cta-phone:hover{color:#fff}

@media (max-width:950px){
  .contact-layout,.booking-grid{grid-template-columns:1fr}
  .contact-column .arrow-link{margin-top:26px}
}

@media (max-width:760px){
  .contact-block .page-lead,.booking-block .page-lead{font-size:18px}
  .booking-panel{padding:22px}
  .contact-form-panel h3{font-size:24px}
  .contact-transit{max-width:none}
}