/* ==========================================================================
   HausChat.de — Terminbuchung (termin.html und termin-verwalten.html)
   Wird nur von diesen zwei Seiten nach styles.css geladen. Ruhig und klar:
   ein heller Kopf, darunter eine weiße Karte mit Kalender, Uhrzeiten und
   Formular. Karten 16px rund, Felder und Tage 8px. Keine Schatten.
   Kein Rot für Fehler: Rot heißt im System ausschließlich „überfällig“.
   ========================================================================== */

/* ── Kopf — heller Grund, ein weicher grüner Fleck ────────────────────── */
.thero{--t-500:var(--teal-500);--t-700:var(--teal-700);position:relative;overflow:hidden;
  padding:calc(72px + var(--nav-height)) 0 40px;
  background:
    linear-gradient(to top,var(--page) 0,rgba(250,249,247,0) 300px),
    radial-gradient(60% 60% at 14% 0%,rgba(201,227,174,.85),rgba(201,227,174,0) 70%),
    var(--page)}
.thero__inner{max-width:1040px;margin:0 auto}
.thero .eyebrow{color:var(--teal-700)}
.thero h1{font-size:clamp(34px,4.4vw,52px);line-height:1.08;letter-spacing:var(--ls-display);
  color:var(--ink);margin:12px 0 14px}
.thero__lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--teal-700);max-width:var(--measure-prose)}
/* Drei Fakten zum Gespräch, mit Icon. */
.thero__fakten{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px}
.thero__fakten li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
.thero__fakten .icon{width:18px;height:18px;color:var(--teal-500)}

/* ── Fläche unter dem Kopf ────────────────────────────────────────────── */
.termin{background:var(--page);padding:8px 0 var(--section-py-web)}
.termin__inner{max-width:1040px;margin:0 auto}
.tkarte{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:32px}

/* ── Schrittanzeige ───────────────────────────────────────────────────── */
.tschritte{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 28px;padding:0;list-style:none;counter-reset:schritt}
.tschritte li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);counter-increment:schritt}
.tschritte li::before{content:counter(schritt);display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--hairline);background:var(--page);
  font-weight:var(--fw-bold);font-size:13px;color:var(--muted)}
.tschritte li[aria-current="step"]{color:var(--ink);font-weight:var(--fw-bold)}
.tschritte li[aria-current="step"]::before{background:var(--blue-500);border-color:var(--blue-500);color:#FFFFFF}
.tschritte li.is-done::before{background:var(--teal-100);border-color:var(--teal-200);color:var(--teal-700)}

.ttitel{font-size:24px;line-height:1.25;color:var(--ink);margin:0 0 4px}
.ttitel:focus{outline:0}
.ttitel:focus-visible{outline:2px solid var(--border-focus);outline-offset:4px;border-radius:4px}
.tunter{font-size:15px;color:var(--muted);margin:0 0 18px}

/* ── Auswahl: Kalender links, Uhrzeiten rechts ────────────────────────── */
.tauswahl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}

.kal__kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.kal__monat{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:17px;color:var(--ink)}
.kal__blatt{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);
  padding:0;border:1px solid var(--hairline);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer;
  transition:var(--transition-control)}
.kal__blatt:hover{background:var(--surface-hover)}
.kal__blatt[disabled]{color:var(--hairline);background:var(--card);cursor:default}
/* Das Sprite hat nur den Pfeil nach unten, deshalb gedreht. */
.kal__blatt .icon{width:18px;height:18px}
.kal__blatt--zurueck .icon{transform:rotate(90deg)}
.kal__blatt--vor .icon{transform:rotate(-90deg)}

.kal__raster{border-collapse:separate;border-spacing:4px;table-layout:fixed;margin:0 -4px;width:calc(100% + 8px)}
.kal__raster th{padding:4px 0 6px;font-weight:var(--fw-bold);font-size:12px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--muted);text-align:center}
.kal__raster td{padding:0;text-align:center}
.kal__tag{display:flex;align-items:center;justify-content:center;position:relative;width:100%;aspect-ratio:1/1;min-height:40px;max-height:56px;
  padding:0;border:1px solid transparent;border-radius:8px;background:transparent;
  font-family:var(--font-body);font-size:15px;color:var(--muted);cursor:default;transition:var(--transition-control)}
/* Tage mit freier Zeit: hell grün hinterlegt, kräftige Schrift. */
.kal__tag--frei{background:var(--teal-50);border-color:var(--teal-200);color:var(--ink);font-weight:var(--fw-bold);cursor:pointer}
.kal__tag--frei:hover{background:var(--teal-100)}
.kal__tag[aria-pressed="true"]{background:var(--blue-500);border-color:var(--blue-500);color:#FFFFFF}
/* Heute: kleiner Punkt unter der Zahl. */
.kal__tag--heute::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.kal__legende{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--muted)}
.kal__legende i{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--teal-50);border:1px solid var(--teal-200)}

.tzeiten__leer{padding:20px;border:1px dashed var(--hairline);border-radius:var(--radius-card);font-size:15px;color:var(--muted)}
.tzeiten__liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.tzeit{height:var(--tap-min);padding:0 8px;border:1px solid var(--blue-200);border-radius:8px;background:var(--card);
  font-family:var(--font-body);font-weight:var(--fw-bold);font-size:16px;color:var(--blue-500);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:var(--transition-control)}
.tzeit:hover{background:var(--blue-50)}
.tzeit[aria-pressed="true"]{background:var(--blue-500);border-color:var(--blue-500);color:#FFFFFF}
.thinweis{display:flex;align-items:center;gap:6px;margin:0 0 14px;font-size:14px;color:var(--muted)}
.thinweis .icon{width:16px;height:16px}

/* ── Gewählter Termin, oben über dem Formular ─────────────────────────── */
.tgewaehlt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 24px;padding:14px 16px;
  background:var(--teal-50);border:1px solid var(--teal-200);border-radius:var(--radius-card)}
.tgewaehlt>.icon{width:22px;height:22px;color:var(--teal-500)}
.tgewaehlt__text{flex:1;min-width:12em;font-size:16px;line-height:1.45;color:var(--ink)}
.tgewaehlt__text span{display:block;font-size:14px;color:var(--teal-700)}
.tlink{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 8px;border:0;background:none;
  font-family:var(--font-body);font-weight:var(--fw-bold);font-size:15px;color:var(--blue-500);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.tlink:hover{color:var(--blue-700)}

/* ── Formular ─────────────────────────────────────────────────────────── */
.tform__raster{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld--breit{grid-column:1/-1}
.feld label{font-weight:var(--fw-bold);font-size:14px;color:var(--ink)}
.feld label small{font-weight:var(--fw-regular);font-size:14px;color:var(--muted)}
.feld input,.feld select,.feld textarea{width:100%;min-height:var(--field-height);padding:0 14px;
  border:1px solid var(--teal-200);border-radius:8px;background:var(--card);
  font-family:var(--font-body);font-size:16px;color:var(--ink);transition:var(--transition-control)}
.feld textarea{min-height:112px;padding:12px 14px;line-height:1.5;resize:vertical}
.feld input::placeholder,.feld textarea::placeholder{color:var(--muted)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.feld__wahl{position:relative}
.feld__wahl select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.feld__wahl .icon{position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--muted);pointer-events:none}
/* Fehler: dunkle Kante und ein Hinweis mit Icon, keine Warnfarbe. */
.feld [aria-invalid="true"]{border-color:var(--ink);border-width:2px}
.feld__fehler{display:flex;align-items:flex-start;gap:6px;font-size:14px;line-height:1.45;color:var(--ink)}
.feld__fehler .icon{width:16px;height:16px;margin-top:2px}

/* Honigtopf für Bots: für Menschen unsichtbar, per Tastatur nicht erreichbar. */
.feld--honig{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.tform__fuss{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
.tdatenschutz{font-size:13px;line-height:1.5;color:var(--muted);max-width:44em}
.tdatenschutz a{text-decoration:underline;text-underline-offset:2px}

/* ── Meldungen ────────────────────────────────────────────────────────── */
.tmeldung{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 14px;
  background:var(--page);border:1px solid var(--hairline);border-radius:var(--radius-card);
  font-size:15px;line-height:1.5;color:var(--ink)}
.tmeldung .icon{width:18px;height:18px;margin-top:2px;color:var(--ink)}
.tmeldung--ok{background:var(--teal-50);border-color:var(--teal-200)}
.tmeldung--ok .icon{color:var(--teal-500)}
.tstatus{font-size:15px;color:var(--muted)}

/* ── Bestätigung ──────────────────────────────────────────────────────── */
.tfertig{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:40em}
.tfertig__zeichen{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--teal-100);color:var(--teal-500)}
.tfertig__zeichen .icon{width:26px;height:26px}
.tfertig h2{font-size:30px;line-height:1.2;color:var(--ink)}
.tfertig p{font-size:17px;line-height:1.6;color:var(--body)}
.tfertig__aktionen{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:6px}

/* ── Termin verwalten ─────────────────────────────────────────────────── */
.tfakten{display:grid;grid-template-columns:150px minmax(0,1fr);margin:0 0 24px;padding:6px 20px;
  background:var(--page);border:1px solid var(--hairline);border-radius:var(--radius-card)}
.tfakten dt{padding:12px 0;font-weight:var(--fw-bold);font-size:12px;line-height:1.6;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.tfakten dd{margin:0;padding:10px 0;font-size:16px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.tfakten dt:not(:first-of-type),.tfakten dt:not(:first-of-type)+dd{border-top:1px solid var(--hairline)}
.tfakten a{text-decoration:underline;text-underline-offset:3px}
.taktionen{display:flex;flex-wrap:wrap;gap:12px}
.trueckfrage{margin-top:20px;padding:20px;border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--page)}
.trueckfrage p{font-size:16px;color:var(--ink);margin:0 0 14px}
.tbereich{margin-top:28px;padding-top:28px;border-top:1px solid var(--hairline)}

/* ── Breiten ──────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .tauswahl{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .thero{padding:calc(48px + var(--nav-height)) 0 28px}
  .thero__lead{font-size:17px}
  .termin{padding-bottom:72px}
  .tkarte{padding:20px 12px}
  .tschritte{gap:6px 12px;margin-bottom:22px}
  .tschritte li{font-size:14px}
  /* Auf dem Handy nur der aktuelle Schritt mit Text, die anderen als Ziffer.
     Für Screenreader bleibt der Text erhalten. */
  .tschritte li:not([aria-current="step"]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ttitel{font-size:21px}
  .kal__raster{border-spacing:3px;margin:0 -3px;width:calc(100% + 6px)}
  .kal__tag{min-height:40px;font-size:15px}
  .tform__raster{grid-template-columns:1fr}
  .tform__fuss .btn{width:100%}
  .tfakten{grid-template-columns:1fr;padding:6px 16px}
  .tfakten dt{padding:12px 0 0}
  .tfakten dd{padding:2px 0 12px}
  .tfakten dt:not(:first-of-type)+dd{border-top:0}
  .taktionen .btn{flex:1 1 100%}
  .tfertig h2{font-size:26px}
}

/* ── Termin verwalten: ruhige Seite ohne Menü und großen Fuß ────────── */
.fokus-kopf{padding-block:24px}
.fokus-kopf__inner{display:flex;max-width:1040px;margin:0 auto}
.fokus-kopf + main .thero{padding-top:32px}
.fokus-fuss{padding-block:0 40px;background:var(--page)}
.fokus-fuss .container{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:14px;color:var(--muted)}
.fokus-fuss a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.fokus-fuss a:hover{color:var(--ink)}