/* termin.css — Terminvereinbarung (Klickdummy).
   Farben und Maße ausschließlich aus tokens.css. */

.termin { margin-block-start: var(--s-6); }

.termin-raster { display: grid; grid-template-columns: minmax(0,1fr);
  gap: var(--s-5); align-items: start; }
@media (min-width: 52em) { .termin-raster { grid-template-columns: minmax(0,24rem) minmax(0,1fr); gap: var(--s-6); } }

.karte { background: var(--bg-karte); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-5); }
.termin h3 { margin-block-end: var(--s-4); }

/* ---- Monatskopf ---- */
.kal-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-block-end: var(--s-4); }
.kal-monat { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 500; letter-spacing: var(--ls-lg); line-height: var(--lh-lg); }
.kal-blaettern { display: flex; gap: var(--s-2); }
.kal-blaettern button { inline-size: 44px; block-size: 44px; padding: 0;
  font: inherit; font-family: var(--f-mono); cursor: pointer;
  background: none; color: var(--c-marine);
  /* Rahmen in Gold wie der Strich vor den Sektionsnummern. Das Zeichen
     bleibt Marine — Gold als Schrift fällt auf hellem Grund durch. */
  border: 1px solid var(--c-gold); border-radius: var(--r-sm);
  transition: border-color var(--e-farbe), color var(--e-farbe); }
.kal-blaettern button:hover:not(:disabled) { border-color: var(--c-messing); }
.kal-blaettern button:disabled { color: var(--c-linie);
  border-color: var(--c-linie); cursor: default; }

/* ---- Tagesraster ---- */
.kal-wochentage, .kal-tage { display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr)); gap: var(--s-1); }
.kal-wochentage { margin-block-end: var(--s-2); }
.kal-wochentage span { font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--text-sekund); text-align: center; padding-block: var(--s-1);
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs); }

.kal-tage button { aspect-ratio: 1; min-block-size: 44px; padding: 0;
  font: inherit; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  cursor: pointer; background: none; color: var(--c-marine);
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background-color var(--e-farbe), border-color var(--e-farbe), color var(--e-farbe); }
.kal-tage button:hover:not(:disabled) { border-color: var(--c-linie); }
.kal-tage button:disabled { color: color-mix(in srgb, var(--text-sekund) 45%, transparent);
  cursor: default; }
/* Die Füllung bleibt Marine — sie traegt den Zustand und ist eindeutig.
   Golden wird der Strich darum, in derselben Farbe wie vor den
   Sektionsnummern. Gold auf Marine erreicht 6,5 und ist klar sichtbar,
   ein Goldrahmen auf Weiss allein waere mit 2,31 zu schwach fuer einen
   Zustand. */
.kal-tage button[aria-pressed="true"] { background: var(--c-marine);
  color: var(--text-invers); border-color: var(--c-gold); border-width: 1.5px; }
.kal-tage .leer { visibility: hidden; }
/* Heute bekommt eine Goldlinie, keine Fläche. */
.kal-tage button.heute { box-shadow: inset 0 -1.5px 0 var(--c-gold); }

/* Rückmeldung beim Drücken, nicht beim Loslassen. */
.termin [data-press][data-gedrueckt="true"] { transform: scale(.96); }
.termin [data-press] { transition: transform var(--e-druck), background-color var(--e-farbe); }

/* ---- Klappen: Höhe wird gefedert, deshalb hier kein transition ---- */
.klappe { overflow: hidden; }

/* ---- Zeiten ---- */
.zeit-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--s-2); }
.zeit-liste button { min-block-size: 44px; font: inherit; font-family: var(--f-mono);
  font-variant-numeric: tabular-nums; cursor: pointer;
  background: none; color: var(--c-marine);
  border: 1px solid var(--c-linie); border-radius: var(--r-sm);
  transition: background-color var(--e-farbe), border-color var(--e-farbe), color var(--e-farbe); }
.zeit-liste button:hover:not(:disabled) { border-color: var(--c-marine); }
.zeit-liste button:disabled { color: color-mix(in srgb, var(--text-sekund) 45%, transparent);
  border-color: color-mix(in srgb, var(--c-linie) 55%, transparent); cursor: default; }
.zeit-liste button[aria-pressed="true"] { background: var(--c-marine);
  color: var(--text-invers); border-color: var(--c-gold); border-width: 1.5px; }
.zeit-hinweis { font-size: var(--t-sm); color: var(--text-sekund); margin: 0 0 var(--s-4); letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

/* ---- Formular ---- */
.termin-form { margin-block-start: var(--s-4); }
.termin-form .feld { margin-block-end: var(--s-5); }
/* Die Erreichbarkeit ist eine eigene Frage, keine weitere Zeile im Formular. */
.termin-form .feld:has(.art) { margin-block: var(--s-6) var(--s-7);
  padding-block-end: var(--s-6); border-block-end: 1px solid var(--c-linie); }
.termin-form label { display: block; font-size: var(--t-sm); font-weight: 500;
  margin-block-end: var(--s-2);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
.termin-form .pflicht { font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--text-sekund); font-weight: 400;
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs); }
.termin-form input, .termin-form textarea { inline-size: 100%; min-block-size: var(--s-7);
  padding: var(--s-3); font: inherit; background: var(--bg-karte); color: var(--c-marine);
  border: 1px solid var(--c-linie); border-radius: var(--r-sm); }
.termin-form textarea { min-block-size: 5rem; resize: vertical; }
.termin-form input:focus-visible, .termin-form textarea:focus-visible,
.termin button:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 2px; }
.termin-form input[aria-invalid="true"], .termin-form textarea[aria-invalid="true"] {
  border-color: var(--c-storno); }
.feld-fehler { display: block; font-size: var(--t-sm); color: var(--c-storno);
  margin-block-start: var(--s-2);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
.feld-fehler:empty { display: none; }

/* ---- Zusammenfassung ---- */
.termin-wahl { max-width: none; font-size: var(--t-sm); color: var(--text-sekund);
  background: var(--bg-seite); border-inline-start: 3px solid var(--c-marine);
  padding: var(--s-4); margin-block-end: var(--s-6);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
.termin-wahl strong { display: block; margin-block-start: var(--s-1);
  font-family: var(--f-mono); font-size: var(--t-base); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--text-primar);
  letter-spacing: var(--ls-base); line-height: var(--lh-base); }

/* ---- Bestätigung ---- */
.termin-fertig { border-inline-start: 3px solid var(--c-geprueft);
  background: var(--bg-seite); padding: var(--s-5); }
.termin-fertig h3 { margin-block-end: var(--s-2); }
.termin-fertig .wieder { margin-block-start: var(--s-4); }

/* ---- Entwurfshinweis ---- */
.termin-entwurf { margin-block-start: var(--s-5); font-size: var(--t-sm);
  color: var(--text-sekund); border-inline-start: 3px solid var(--akzent-hell);
  padding-inline-start: var(--s-4); max-width: var(--breite-text);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

@media (prefers-reduced-motion: reduce) {
  .termin [data-press], .kal-tage button, .zeit-liste button { transition: none; }
  .termin [data-press][data-gedrueckt="true"] { transform: none; }
}

/* ---- Auf der dunklen Bühne unverändert: die Sektion steht auf hellem Grund ---- */

/* Nur für Screenreader — die Auswahl wird angesagt, ohne sichtbaren Text. */
.nur-vorlesen { position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Art des Termins: zwei gleichwertige Karten, echte Radios darunter ---- */
/* Der Radio bleibt bedienbar und fokussierbar, nur unsichtbar.
   Aussehen und Raster der Auswahl stehen weiter unten in einem Block. */
.art input { position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); }
.art input:focus-visible + label { outline: 3px solid var(--akzent-hell);
  outline-offset: 2px; }
.art input:checked + label { background: var(--bg-seite); }

.art-ort { display: block; font-size: var(--t-sm); color: var(--text-sekund);
  line-height: var(--lh-sm); margin-block-start: var(--s-2);
  letter-spacing: var(--ls-sm); }
.art-ort:empty { display: none; }

/* ================= Nachbesserungen ================= */

/* Der Monatskopf wird von den 44px-Tasten getragen, nicht von der Textzeile —
   sonst schwankt die obere Innenkante der Karte mit der Schriftgröße. */
.kal-kopf { min-block-size: 44px; margin-block-end: var(--s-5); }
.kal-monat { line-height: 1.1; }

/* Feste Zeilenhöhe statt aspect-ratio. Zusammen mit der Spaltenbreite von
   24rem gehen die Felder bei 44px quadratisch auf — vorher waren sie 40 breit
   und 44 hoch, was das Raster und damit den Rand ungleichmäßig wirken ließ. */
.kal-tage button { aspect-ratio: auto; block-size: 2.75rem; }

/* Die Fußzeile der Karte bekommt denselben Abstand wie der Kopf. */
.kal-fuss { margin-block: var(--s-5) 0; }

/* ---- Art des Termins, kompakt bei den Kontaktdaten ---- */
.art { border: 0; padding: 0; margin-block: 0 var(--s-3);
  /* Fieldsets haben von Haus aus min-inline-size: min-content — das sprengt
     jedes Raster darin, wenn es nicht ausdrücklich zurückgesetzt wird. */
  min-inline-size: 0; }
/* Kein float: das Raster bildet einen eigenen Formatierungskontext und weicht
   Floats aus, statt darunter zu rutschen. display:block reicht, damit die
   Legende volle Breite und einen Abstand nach unten bekommt. */
.art legend { display: block; float: none; inline-size: 100%; padding: 0;
  font-size: var(--t-sm); font-weight: 500; margin-block-end: var(--s-3);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
.art-wahl { display: grid; gap: var(--s-3); min-inline-size: 0;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.art label { display: flex; align-items: center; gap: var(--s-3); min-inline-size: 0;
  margin-block-end: 0;                 /* nicht vom Formularlabel erben */
  min-block-size: 44px; padding: var(--s-3) var(--s-4); cursor: pointer;
  font-size: var(--t-base); font-weight: 400; background: var(--bg-karte);
  border: 1px solid var(--c-linie); border-radius: var(--r-sm);
  transition: border-color var(--e-farbe), background-color var(--e-farbe);
  letter-spacing: var(--ls-base); line-height: var(--lh-base); }
.art label:hover { border-color: var(--c-marine); }
.art label::before { content: ""; inline-size: 11px; block-size: 11px; flex: none;
  border: 1.5px solid var(--c-linie); border-radius: 50%;
  transition: border-color var(--e-farbe), box-shadow var(--e-farbe); }
.art input:checked + label { border-color: var(--c-marine); }
.art input:checked + label::before { border-color: var(--akzent-hell);
  box-shadow: inset 0 0 0 2px var(--bg-karte), inset 0 0 0 11px var(--akzent-hell); }