/* ─────────────────────────────────────────────────────────────
   TERMIN
   Nur auf page-termin.php geladen. Das Buchungsfenster selbst
   bringt sein eigenes CSS aus dem Plugin mit, hier steht nur der
   Rahmen drumherum.

   Alles steht auf einer Achse: Kopf, Buchungsfenster und Hinweise
   teilen sich dieselbe Spaltenbreite und stehen mittig. Vorher
   klebte der Kopf am linken Rand, waehrend das Buchungsfenster
   schon mittig stand, und der Bruch dazwischen war deutlich zu
   sehen.
   ───────────────────────────────────────────────────────────── */

.termin-wrap {
  background: var(--paper);
  --termin-spalte: 62rem;
}

/* ── KOPF ── */
.termin-hero {
  max-width: var(--termin-spalte);
  margin: 0 auto;
  padding: 5rem 5vw 2.5rem;
  text-align: center;
}
.termin-tag {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.termin-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
.termin-sub {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 44rem;
  margin: 0 auto;
}

/* ── ABLAUF IN DREI SCHRITTEN ──
   Steht zwischen Kopf und Buchungsfenster und nimmt dem Besucher
   die Frage ab, was ihn erwartet, bevor er etwas anklickt. */
.termin-ablauf {
  max-width: var(--termin-spalte);
  margin: 0 auto;
  padding: 0 5vw;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .termin-ablauf { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
}
.termin-schritt {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: 0.9rem;
  align-items: start;
}
.termin-schritt b {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--accent);
  padding-top: 0.15rem;
}
.termin-schritt span {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ── BUCHUNGSFENSTER ── */
.termin-body {
  max-width: var(--termin-spalte);
  margin: 0 auto;
  padding: 2.8rem 5vw 4.5rem;
}
.termin-fallback {
  padding: 1.2rem 1.4rem;
  background: var(--cream);
  border-left: 3px solid var(--accent);
  max-width: 40rem;
  margin: 0 auto 1.4rem;
}

/* ── HINWEISE ── */
.termin-notes {
  background: var(--cream);
  padding: 4rem 5vw;
}
.termin-notes-inner {
  max-width: var(--termin-spalte);
  margin: 0 auto;
  display: grid;
  gap: 2.4rem;
}
@media (min-width: 780px) {
  .termin-notes-inner { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}
.termin-note h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.termin-note p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}