/* =========================================================================
   IB-WOLK Redesign – Kontaktseite

   Baut auf theme.css und pruefungen.css auf. Von dort stammen Brotkrümel,
   Schaltflächen, Abschnittsköpfe und die Anfahrtsgrafik; hier stehen nur die
   Bausteine der Kontaktseite und die auf sie begrenzten Formularstile.
   ========================================================================= */

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

.breadcrumb--light,
.contact-top,
.contact-ways,
.contact-route {
	--pad: var(--gutter-section);

	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.page-kontakt .site-main {
	/* Warmes Off-White als Seitengrund, Karten stehen heller darauf. */
	--c-card: #fbfaf9;

	background-color: var(--c-offwhite);
}

/* -------------------------------------------------------------------------
   2. Brotkrümel auf hellem Grund
   ---------------------------------------------------------------------- */

.breadcrumb--light {
	padding-block: var(--space-s) 0;
}

.breadcrumb--light .breadcrumb__item {
	color: var(--c-ink-muted);
}

.breadcrumb--light .breadcrumb__item + .breadcrumb__item::before {
	color: var(--c-line);
}

.breadcrumb--light .breadcrumb__item a:hover,
.breadcrumb--light .breadcrumb__item a:focus-visible {
	color: var(--c-red);
}

.breadcrumb--light .breadcrumb__item[aria-current] {
	color: var(--c-ink);
}

/* Textlink mit durchgehender Unterstreichung */

.link-arrow--underline {
	position: relative;
	color: var(--c-red);
}

.link-arrow--underline::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(50% - 0.85em);
	left: 0;
	height: 1px;
	background-color: currentColor;
}

/* -------------------------------------------------------------------------
   3. Zusammenhängender Kopfbereich

   Drei Blöcke, eine Fläche. Auf schmalen Geräten stehen sie schlicht
   untereinander – Einleitung, Formular, Kontaktangaben –, was zugleich die
   gewünschte Reihenfolge ist. Ab 1024px setzt das Raster die Kontaktangaben
   zurück unter die Einleitung, sodass links eine durchgehende dunkle Spalte
   und rechts das Formular über die volle Höhe steht.
   ---------------------------------------------------------------------- */

.contact-top {
	padding-block: var(--space-s) 0;
}

.contact-top__intro,
.contact-top__direct {
	background-color: var(--c-charcoal-deep);
	color: var(--c-white);
}

.contact-top__intro {
	padding: var(--space-xl) var(--space-m);
}

.contact-top__form {
	padding: var(--space-xl) var(--space-m);
	background-color: var(--c-white);
}

.contact-top .eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
}

.contact-top__title {
	margin: var(--space-xs) 0 0;
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: clamp(2rem, 7.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.06;
}

.contact-top__lead {
	margin: var(--space-m) 0 0;
	color: var(--c-on-dark);
	font-size: 1rem;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
   4. Direktkontakt auf dunklem Grund
   ---------------------------------------------------------------------- */

.contact-direct {
	padding: var(--space-xl) var(--space-m);
	background-color: var(--c-charcoal-deep);
	color: var(--c-white);
}

.contact-direct__booking {
	margin-top: var(--space-l);
}

.contact-direct__title {
	position: relative;
	margin: 0 0 var(--space-xl);
	padding-bottom: var(--space-m);
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: var(--ls-tight);
	line-height: 1.2;
}

/* Feine rote Kante als einziges Zierelement des Panels. */
.contact-direct__title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 2px;
	background-color: var(--c-red);
}

.contact-direct__list {
	display: grid;
	gap: var(--space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-direct__item {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 0.875rem;
	align-items: start;
}

.contact-direct__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--c-red);
}

.contact-direct__icon svg {
	width: 20px;
	height: 20px;
	stroke-width: 1.3;
}

.contact-direct__text {
	display: block;
	min-width: 0;
}

.contact-direct__label {
	display: block;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.contact-direct__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	color: var(--c-white);
	font-size: 1.0625rem;
	text-decoration: none;
	transition: color var(--transition);
}

.contact-direct__link:hover,
.contact-direct__link:focus-visible {
	color: var(--c-red);
}

.contact-direct__link:focus-visible {
	outline: var(--focus-ring) solid var(--c-red);
	outline-offset: 3px;
}

.contact-direct__address {
	margin: 0.25rem 0 0;
	color: var(--c-on-dark);
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.6;
}

/* Öffnungszeiten */

.contact-direct__hours {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contact-direct__label--hours {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 var(--space-m);
	color: var(--c-red);
	font-size: 0.75rem;
}

.hours-list {
	margin: 0;
	padding: 0;
}

.hours-list__row {
	display: grid;
	gap: 0.125rem;
	padding-block: 0.5rem;
}

.hours-list__row + .hours-list__row {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hours-list__day {
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}

.hours-list__time {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75rem;
	margin: 0;
	color: var(--c-on-dark);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.contact-direct__note {
	margin: var(--space-m) 0 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   5. Drei Kontaktwege unter der Bühne
   ---------------------------------------------------------------------- */

.contact-ways {
	padding-block: 0 var(--space-2xl);
}

.contact-choices {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--c-card);
	border: 1px solid var(--c-line);
}

.contact-choices__item + .contact-choices__item {
	border-top: 1px solid var(--c-line);
}

.contact-choice {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 24px;
	gap: var(--space-m);
	align-items: center;
	min-height: var(--tap-target);
	padding: var(--space-m);
	color: var(--c-ink);
	text-decoration: none;
	transition: background-color var(--transition);
}

.contact-choice:hover {
	background-color: var(--c-offwhite-dark);
}

.contact-choice:focus-visible {
	outline: var(--focus-ring) solid var(--c-red);
	outline-offset: -3px;
}

.contact-choice__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--c-red);
}

.contact-choice__icon svg {
	width: 26px;
	height: 26px;
	stroke-width: 1.25;
}

.contact-choice__text {
	display: grid;
	gap: 0.1875rem;
	min-width: 0;
}

.contact-choice__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: var(--ls-tight);
	line-height: 1.3;
}

.contact-choice__copy {
	color: var(--c-ink-muted);
	font-size: 0.8125rem;
	line-height: 1.55;
}

.contact-choice__arrow {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--c-red);
	transition: transform var(--transition);
}

.contact-choice:hover .contact-choice__arrow {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   6. Formularspalte
   ---------------------------------------------------------------------- */

.contact-form__title {
	margin: 0;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 6.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.contact-form__lead {
	margin: var(--space-xs) 0 var(--space-l);
	color: var(--c-ink-muted);
	font-size: 1rem;
	line-height: 1.7;
}

/*
 * Bewusst ohne eigenen Rahmen und ohne eigenen Grund: Die Spalte ist die
 * Fläche. Die Klasse bleibt erhalten, weil sämtliche Fluent-Forms-Regeln in
 * Abschnitt 7 daran hängen.
 */
.contact-form__panel {
	padding: 0;
	background-color: transparent;
	border: 0;
}

/* Ersatzhinweis, falls kein Formular hinterlegt oder das Plugin inaktiv ist. */

.contact-form__fallback-lead {
	margin: 0;
	color: var(--c-ink);
	font-size: 1rem;
	line-height: 1.7;
}

.contact-form__fallback-list {
	margin: var(--space-m) 0 var(--space-l);
	padding: 0;
	list-style: none;
}

.contact-form__fallback-list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	color: var(--c-red);
	font-size: 1.0625rem;
	text-decoration: none;
}

.contact-form__fallback-list a:hover,
.contact-form__fallback-list a:focus-visible {
	color: var(--c-red-dark);
}

/* Themenliste innerhalb der gebündelten Kontaktspalte */

.contact-help__title {
	margin: 0 0 var(--space-l);
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: var(--ls-tight);
	line-height: 1.25;
}

.contact-help__list {
	display: grid;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-help__item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 0.875rem;
	align-items: start;
}

.contact-help__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--c-red);
}

.contact-help__icon svg {
	width: 20px;
	height: 20px;
	stroke-width: 1.3;
}

.contact-help__text {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.contact-help__text strong {
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.contact-help__text span {
	color: var(--c-on-dark);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* Trefferfläche der Verweise im Zustimmungssatz vergrößern. */
.page-kontakt .contact-form__panel .ff-el-form-check-label a,
.page-kontakt .contact-form__panel .ff_t_c a {
	display: inline-block;
	padding-block: 0.75rem;
}

/* -------------------------------------------------------------------------
   7. Fluent Forms – ausschließlich innerhalb des Formularfelds der Kontaktseite

   Alle Regeln hängen an .page-kontakt .contact-form__panel. Formulare an
   anderen Stellen der Website bleiben davon unberührt. Die Auswahl ist
   spezifischer als die Standardregeln des Plugins (.ff-default …), damit sie
   unabhängig von der Ladereihenfolge greift – ohne !important.
   ---------------------------------------------------------------------- */

.page-kontakt .contact-form__panel .fluentform {
	--fluentform-primary: var(--c-red);
	--fluentform-danger: var(--c-red);
	--fluentform-border-color: var(--c-line);
	--fluentform-border-radius: 0;
}

.page-kontakt .contact-form__panel .fluentform form {
	margin: 0;
}

.page-kontakt .contact-form__panel .ff-el-group {
	margin-bottom: var(--space-l);
}

.page-kontakt .contact-form__panel .ff-el-group:last-child {
	margin-bottom: 0;
}

/* Sichtbare Beschriftung über dem Feld */

.page-kontakt .contact-form__panel .ff-el-input--label {
	margin-bottom: 0.5rem;
	padding: 0;
}

.page-kontakt .contact-form__panel .ff-el-input--label label {
	display: inline-block;
	margin: 0;
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.45;
}

.page-kontakt .contact-form__panel .ff-el-is-required.asterisk-right label::after,
.page-kontakt .contact-form__panel .ff-el-is-required.asterisk-left label::before {
	color: var(--c-red);
	font-weight: 700;
}

.page-kontakt .contact-form__panel .ff-el-help-message {
	margin: 0.375rem 0 0;
	color: var(--c-ink-muted);
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* Eingabefelder */

.page-kontakt .contact-form__panel .ff-el-form-control {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0.75rem 0.875rem;
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color var(--transition);
	-webkit-appearance: none;
	appearance: none;
}

.page-kontakt .contact-form__panel .ff-el-form-control::placeholder {
	color: #9a9490;
}

.page-kontakt .contact-form__panel .ff-el-form-control:hover {
	border-color: #c7bfb9;
}

.page-kontakt .contact-form__panel .ff-el-form-control:focus,
.page-kontakt .contact-form__panel .ff-el-form-control:focus-visible {
	border-color: var(--c-red);
	outline: 2px solid var(--c-red);
	outline-offset: 0;
	box-shadow: none;
}

.page-kontakt .contact-form__panel .ff-el-form-control:disabled,
.page-kontakt .contact-form__panel .ff-el-form-control[readonly] {
	background-color: var(--c-offwhite);
	color: var(--c-ink-muted);
	cursor: not-allowed;
}

/* Auswahlfeld mit eigenem Pfeil statt Systemdarstellung */

.page-kontakt .contact-form__panel select.ff-el-form-control {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c8102e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
}

.page-kontakt .contact-form__panel textarea.ff-el-form-control {
	min-height: 200px;
	line-height: 1.65;
	resize: vertical;
}

/* Zustimmung und weitere Ankreuzfelder */

.page-kontakt .contact-form__panel .ff-el-form-check {
	margin: 0;
	padding: 0;
}

.page-kontakt .contact-form__panel .ff-el-form-check-label {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	color: var(--c-ink-muted);
	font-size: 0.875rem;
	line-height: 1.65;
	cursor: pointer;
}

.page-kontakt .contact-form__panel .ff-el-form-check-label input[type="checkbox"],
.page-kontakt .contact-form__panel .ff-el-form-check-label input[type="radio"],
.page-kontakt .contact-form__panel .ff_tc_checkbox input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0.1875rem 0 0;
	accent-color: var(--c-red);
	cursor: pointer;
}

.page-kontakt .contact-form__panel .ff-el-form-check-label input:focus-visible,
.page-kontakt .contact-form__panel .ff_tc_checkbox input:focus-visible {
	outline: 2px solid var(--c-red);
	outline-offset: 2px;
}

.page-kontakt .contact-form__panel .ff-el-form-check-label > span,
.page-kontakt .contact-form__panel .ff_tc_label {
	display: block;
	min-width: 0;
}

/* Die Einwilligung bleibt bewusst ohne Kasten: Eine gefüllte, gerahmte Fläche
   liest sich wie ein deaktivierter Bereich, obwohl hier eine Pflichtangabe
   steht. Ankreuzfeld und Link geben der Zeile genug Gewicht.

   Fluent Forms setzt die Einwilligung als Tabellenzeile. Als Flex-Zeile bleibt
   der Abstand zum Ankreuzfeld erhalten und der Fließtext bündig eingerückt. */

.page-kontakt .contact-form__panel .ff-el-tc label {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0;
	color: var(--c-ink-muted);
	font-size: 0.875rem;
	line-height: 1.65;
	cursor: pointer;
}

.page-kontakt .contact-form__panel .ff_tc_checkbox {
	display: block;
	flex: none;
}

.page-kontakt .contact-form__panel .ff-el-form-check-label a,
.page-kontakt .contact-form__panel .ff-el-tc label a {
	color: var(--c-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Absendeschaltfläche im Stil der übrigen Handlungsaufrufe */

.page-kontakt .contact-form__panel .ff_submit_btn_wrapper {
	margin-top: var(--space-xl);
}

.page-kontakt .contact-form__panel .ff-btn-submit,
.page-kontakt .contact-form__panel button.ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-target);
	padding: 0.875rem 2.25rem;
	background-color: var(--c-red);
	border: 1px solid var(--c-red);
	border-radius: 0;
	box-shadow: none;
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: var(--fs-button);
	font-weight: 600;
	letter-spacing: var(--ls-mid);
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);
}

.page-kontakt .contact-form__panel .ff-btn-submit:hover,
.page-kontakt .contact-form__panel button.ff-btn:hover {
	background-color: var(--c-red-dark);
	border-color: var(--c-red-dark);
	color: var(--c-white);
	opacity: 1;
}

.page-kontakt .contact-form__panel .ff-btn-submit:focus-visible,
.page-kontakt .contact-form__panel button.ff-btn:focus-visible {
	outline: var(--focus-ring) solid var(--c-ink);
	outline-offset: 2px;
}

.page-kontakt .contact-form__panel .ff-btn-submit:disabled,
.page-kontakt .contact-form__panel button.ff-btn:disabled,
.page-kontakt .contact-form__panel form.ff_submitting .ff-btn-submit {
	background-color: #b8b1ac;
	border-color: #b8b1ac;
	cursor: not-allowed;
	opacity: 1;
	pointer-events: none;
}

/* Auf schmalen Bildschirmen nutzt die Schaltfläche die volle Breite. */
@media (max-width: 639px) {
	.page-kontakt .contact-form__panel .ff-btn-submit,
	.page-kontakt .contact-form__panel button.ff-btn {
		width: 100%;
	}
}

/* Fehler und Bestätigung */

.page-kontakt .contact-form__panel .ff-el-is-error .ff-el-form-control {
	border-color: var(--c-red);
	background-color: #fdf6f7;
}

.page-kontakt .contact-form__panel .error,
.page-kontakt .contact-form__panel .text-danger {
	margin-top: 0.375rem;
	color: var(--c-red);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
}

.page-kontakt .contact-form__panel .ff-errors-in-stack {
	margin-bottom: var(--space-l);
	padding: var(--space-m);
	background-color: #fdf6f7;
	border: 1px solid var(--c-red);
	border-radius: 0;
}

.page-kontakt .contact-form__panel .ff-message-success {
	margin: 0;
	padding: var(--space-l);
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-left: 3px solid #2e7d32;
	border-radius: 0;
	box-shadow: none;
	color: var(--c-ink);
	font-size: 0.9375rem;
	line-height: 1.75;
}

.page-kontakt .contact-form__panel .ff-message-success p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   8. Anfahrt
   ---------------------------------------------------------------------- */

.contact-route {
	padding-block: 0 4rem;
}

.contact-route__head {
	max-width: 44rem;
}

.contact-route__title {
	margin: var(--space-s) 0 0;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 6.8vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.14;
}

.contact-route__grid {
	display: grid;
	margin-top: var(--space-xl);
	background-color: var(--c-card);
	border: 1px solid var(--c-line);
}

.contact-route__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-xl) var(--space-m);
}

.contact-route__label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--c-red);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.contact-route__address {
	margin: var(--space-m) 0 var(--space-l);
	color: var(--c-ink);
	font-size: 1rem;
	font-style: normal;
	line-height: 1.75;
}

/*
 * button--outline ist für dunkle Flächen gebaut (weiße Schrift, weiße Kante).
 * Auf der hellen Anfahrtskarte wäre die Schaltfläche sonst unsichtbar.
 */
.contact-route__info .button--outline {
	background-color: transparent;
	border-color: var(--c-red);
	color: var(--c-red);
}

.contact-route__info .button--outline:hover,
.contact-route__info .button--outline:focus-visible {
	background-color: var(--c-red);
	border-color: var(--c-red);
	color: var(--c-white);
}

.contact-route__info .button--outline:focus-visible {
	outline-color: var(--c-red);
}

.contact-route__grid .kontakt__map {
	min-height: 280px;
}

/* -------------------------------------------------------------------------
   9. Ab 640px
   ---------------------------------------------------------------------- */

@media (min-width: 640px) {
	.contact-choices {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.contact-choices__item + .contact-choices__item {
		border-top: 0;
		border-left: 1px solid var(--c-line);
	}

	.contact-choice {
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: var(--space-s) var(--space-m);
		align-items: start;
		padding: var(--space-l) var(--space-m);
	}

	.contact-choice__icon {
		grid-column: 1;
		grid-row: 1;
	}

	.contact-choice__text {
		grid-column: 2;
		grid-row: 1;
	}

	.contact-choice__arrow {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
   10. Ab 1024px
   ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.breadcrumb--light,
	.contact-top,
	.contact-ways,
	.contact-route {
		--pad: 2rem;
	}

	.breadcrumb--light {
		padding-block: var(--space-xs) 0;
	}

	/*
	 * Die eine Fläche: zwei Spalten ohne Fuge. Die Einleitung belegt links die
	 * erste Zeile, die Kontaktangaben die zweite, das Formular überspannt
	 * rechts beide. Dadurch beginnen beide Spalten exakt auf gleicher Höhe und
	 * enden gemeinsam, ohne dass eine feste Höhe gesetzt werden muss.
	 */
	.contact-top {
		display: grid;
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
		gap: 0;
		padding-block: var(--space-2xs) 0;
	}

	.contact-top__intro {
		grid-column: 1;
		grid-row: 1;
		padding: 3.25rem clamp(2rem, 3vw, 2.75rem) var(--space-xl);
	}

	.contact-top__direct {
		grid-column: 1;
		grid-row: 2;
		padding: var(--space-xl) clamp(2rem, 3vw, 2.75rem) 3.25rem;
	}

	/* Der zurückhaltende Trenner zwischen Einleitung und Kontaktangaben. */
	.contact-top__direct::before {
		content: "";
		display: block;
		height: 1px;
		margin-bottom: var(--space-xl);
		background-color: rgba(255, 255, 255, 0.16);
	}

	.contact-top__form {
		grid-column: 2;
		grid-row: 1 / span 2;
		padding: 3.25rem clamp(2rem, 3.2vw, 3rem);
	}

	.contact-top__title {
		font-size: clamp(2rem, 2.6vw, 2.375rem);
	}

	.contact-top__lead {
		font-size: 1.0625rem;
	}

	.contact-direct__title {
		font-size: 1.5rem;
	}

	.contact-choice {
		padding: var(--space-xl) clamp(1.5rem, 2.4vw, 2.25rem);
	}

	.contact-form__title {
		font-size: 2rem;
	}

	.contact-form__lead {
		font-size: 1.0625rem;
	}

	.contact-ways {
		padding-block: 3.5rem 4.5rem;
	}

	.contact-route {
		padding-block: 0 5rem;
	}

	.contact-route__grid {
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	}

	.contact-route__info {
		justify-content: center;
		padding: clamp(2rem, 3vw, 3rem);
	}

	.contact-route__grid .kontakt__map {
		min-height: 340px;
	}

	/* Zwei Felder nebeneinander, wenn Fluent Forms Spalten ausgibt. */
	.page-kontakt .contact-form__panel .ff-t-container {
		display: flex;
		gap: var(--space-l);
	}

	.page-kontakt .contact-form__panel .ff-t-cell {
		flex: 1 1 0;
		min-width: 0;
		padding: 0;
	}
}