/* =========================================================================
   IB-WOLK Redesign – Seite "Termin buchen"

   Ergänzt theme.css und pruefungen.css. Alle Farben, Schriften, Abstände und
   Breakpoints stammen aus den bestehenden Tokens.

   Leitgedanke: Die Seite hat genau eine Aufgabe. Die Einleitung bleibt flach,
   damit die Buchung des Anbieters schon ohne Scrollen zu bedienen ist – auch
   auf einem Bildschirm von nur 768px Höhe.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Maße
   ---------------------------------------------------------------------- */

.termin-breadcrumb,
.termin-intro,
.termin-booking {
	--pad: var(--gutter-section);
	/*
	 * Das Buchungsfenster des Anbieters füllt eine Spalte bis etwa 600px
	 * vollständig aus. Darüber zentriert es sich selbst auf grauem Grund –
	 * deshalb wird die Spalte hier begrenzt statt aufgezogen.
	 */
	--termin-col: 600px;

	/*
	 * Eigene Überschriftgröße: --fs-h1 ist auf ganzseitige Bühnen ausgelegt und
	 * würde hier die halbe Falz aufbrauchen. Diese Stufe bleibt eindeutig eine
	 * Hauptüberschrift, lässt der Buchung aber den Platz.
	 */
	--termin-h1: clamp(1.875rem, 3vw, 2.75rem);

	/*
	 * Schmaler als der übliche Satzspiegel: So bleibt die mittig stehende
	 * Buchung mit der Einleitung darüber als eine Einheit lesbar.
	 */
	max-width: 1040px;
	margin-inline: auto;
}

.termin-breadcrumb {
	padding: var(--space-m) var(--pad) 0;
}

/* -------------------------------------------------------------------------
   2. Einleitung
   ---------------------------------------------------------------------- */

.termin-intro {
	padding: var(--space-l) var(--pad) 0;
}

.termin-intro__eyebrow {
	margin: 0;
}

.termin-intro__row {
	display: grid;
	gap: var(--space-xs);
	margin-top: var(--space-xs);
	padding-bottom: var(--space-m);
	border-bottom: 1px solid var(--c-line);
}

.termin-intro__title {
	margin: 0;
	font-size: var(--termin-h1);
	line-height: 1.05;
}

.termin-intro__lead {
	max-width: 52ch;
	margin: 0;
	color: var(--c-ink-muted);
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
   3. Buchungsfeld
   ---------------------------------------------------------------------- */

.termin-booking {
	padding: var(--space-l) var(--pad) var(--space-3xl);
}

.termin-frame {
	max-width: var(--termin-col);
	margin-inline: auto;
	background-color: var(--c-offwhite);
	border: 1px solid var(--c-line);
}

.termin-frame__embed {
	display: block;
	width: 100%;
	height: 640px;
	border: 0;
}

/* -------------------------------------------------------------------------
   4. Telefonische Terminvergabe
   ---------------------------------------------------------------------- */

.termin-fallback {
	display: grid;
	justify-items: center;
	gap: var(--space-s);
	max-width: var(--termin-col);
	margin: var(--space-l) auto 0;
	padding: var(--space-l) var(--space-m);
	background-color: var(--c-offwhite);
	text-align: center;
}

.termin-fallback__icon {
	display: inline-flex;
	color: var(--c-red);
}

.termin-fallback__icon svg {
	width: 26px;
	height: 26px;
}

.termin-fallback__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.2;
}

.termin-fallback__copy {
	max-width: 42ch;
	margin: var(--space-2xs) 0 0;
	color: var(--c-ink-muted);
	line-height: 1.6;
}

.termin-fallback__phone {
	margin: 0;
}

.termin-fallback__phone a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: var(--ls-tight);
	text-decoration: none;
	transition: color var(--transition);
}

.termin-fallback__phone a:hover,
.termin-fallback__phone a:focus-visible {
	color: var(--c-red);
}

/* -------------------------------------------------------------------------
   5. Ab Tablet
   ---------------------------------------------------------------------- */

@media (min-width: 768px) {
	.termin-fallback {
		grid-template-columns: auto 1fr auto;
		justify-items: start;
		gap: var(--space-l);
		text-align: left;
	}

	.termin-fallback__icon,
	.termin-fallback__phone {
		align-self: center;
	}
}

@media (min-width: 900px) {
	/*
	 * Überschrift und erklärender Satz nebeneinander: Das spart genau die
	 * Höhe, die der Buchung über der Falz zugutekommt.
	 */
	.termin-intro__row {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		gap: var(--space-xl);
	}

	.termin-frame__embed {
		height: 720px;
	}

}