/*
 * Seite "Kontakt" (Template kontakt). Maße am Original gemessen, Code selbst geschrieben.
 * Aufbau: .kt (Abschnitt auf farbigem Grund) > .kt__inner > .kt-card (weiße Karte, Spalte) mit vier Teilen:
 *   .kt-head (Überschrift), .kt-formblock (Formular), .kt-karte (Karten-Platzhalter), .kt-spalten (Kontaktdaten).
 * Grundlagen (Farben, Schriften, .kd-prose, .kd-button) kommen aus base.css.
 * Umbruchpunkte wie im Original: 525 px (zwei Spalten unten), 580 px (Felder nebeneinander), 801 px (Karten-Text mittig),
 * 1050 px (drei Spalten unten), 1281 px (größere Schrift, breitere Karte).
 */

.kt {
	overflow: hidden;
	--kt-fehler: #a3281c;
}
.kt__inner {
	width: 100%;
	max-width: 900px;
	margin: 80px auto;
}
@media (min-width: 1281px) {
	.kt__inner { max-width: 1280px; }
}
@media (min-width: 1441px) {
	.kt__inner { max-width: 1440px; }
}

/* Die Karte ist eine Spalte. Abstände zwischen den Teilen addieren sich (kein Zusammenfallen der Außenabstände). */
.kt-card {
	display: flex;
	flex-direction: column;
	margin: 0 20px;
	padding: 20px 30px 0;
	background-color: var(--kd-white);
	color: var(--kd-text);
}
@media (min-width: 1281px) {
	.kt-card { margin: 0 60px; }
}

/* ------------------------------------------------------------------ Überschrift */
.kt-head { margin: 20px 0; }
.kt-title {
	padding: 20px 0;
	color: var(--kd-text);
	font-family: var(--kd-font-head);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
}
@media (min-width: 1281px) {
	.kt-title { font-size: 36px; }
}

/* ------------------------------------------------------------------ Formular */
.kt-formblock {
	min-height: 340px;
	margin: 40px 0 20px;
	padding-bottom: 20px;
	scroll-margin-top: 120px;
}

/* Raster der Felder: schmal untereinander, ab 580 px Name, E-Mail und Telefon nebeneinander.
   Die Spalten teilen sich den Platz nach festen Zuschlägen auf (wie im Original, dort aus der Breite der Beschriftungen). */
.kt-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	padding-bottom: 20px;
}
@media (min-width: 580px) {
	.kt-fields {
		--kt-spalte: calc((100% - 142.8px) / 3);
		grid-template-columns: var(--kt-spalte) calc(var(--kt-spalte) + 21.9px) calc(var(--kt-spalte) + 80.9px);
	}
	.kt-field--breit { grid-column: 1 / -1; }
}

.kt-label {
	display: block;
	margin-bottom: 10px;
	color: var(--kd-text);
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
}

.kt-input {
	display: inline-block;
	width: 100%;
	height: 50px;
	padding: 15px;
	border: 1px solid #c6c6c6;
	border-radius: 10px;
	background-color: var(--kd-white);
	color: var(--kd-text);
	font-family: var(--kd-font-copy);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}
textarea.kt-input {
	height: 148px;
	resize: vertical;
}
.kt-input[aria-invalid="true"] { border-color: var(--kt-fehler); }

.kt-error {
	margin-top: 5px;
	color: var(--kt-fehler);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}
.kt-consent .kt-error { margin-top: 10px; }

/* Einwilligung: Kästchen links, Text daneben. Der Text sitzt auf der Grundlinie der ersten Zeile. */
.kt-consent {
	display: flex;
	align-items: baseline;
}
.kt-checkbox {
	flex: none;
	margin: 0 8px 0 0;
}
.kt-checkbox[aria-invalid="true"] { outline: 2px solid var(--kt-fehler); outline-offset: 1px; }
.kt-consent__text {
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 10px;
	overflow-wrap: break-word;
}
/* Zwischen Einwilligungstext und Datenschutzhinweis steht im Original eine leere Zeile (27 px) */
.kt-consent__text > p + p { margin-top: 27px; }
.kt-consent__text > .kt-error {
	margin-top: 10px;
	font-size: 16px;
}
.kt-consent__text label { cursor: pointer; }

/* Meldung über dem Absende-Button (Fehler vom Server oder Netzwerk) und Erfolgsmeldung */
.kt-meldung {
	margin: 0 0 20px;
	padding: 15px;
	border: 1px solid var(--kd-main);
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.6;
}
.kt-meldung:focus { outline: none; }
.kt-meldung--fehler {
	border-color: var(--kt-fehler);
	color: var(--kt-fehler);
}
.kt-meldung--ok {
	margin: 0;
	padding: 30px 20px;
	font-size: 18px;
	text-align: center;
}
.kt-noscript {
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}

.kt-submit {
	display: flex;
	justify-content: center;
}
.kt-button {
	border: 0;
	font-family: inherit;
}
.kt-button:disabled {
	opacity: 0.4;
	cursor: default;
}
.kt-button:disabled > span { background-color: transparent; }

/* ------------------------------------------------------------------ Karten-Platzhalter */
/* Die Höhe folgt der Breite (30 %), wie im Original. Vor der Zustimmung steht ein eigenes Hintergrundbild
   hinter einem halbdurchsichtigen Schleier, nach der Zustimmung füllt der Google-Maps-iframe dieselbe Fläche. */
.kt-karte {
	position: relative;
	margin: 20px 0;
	aspect-ratio: 10 / 3;
	overflow: hidden;
	background-color: #f3f3f3;
}
.kt-karte__platzhalter {
	position: absolute;
	inset: 0;
	background: url("../images/karte-platzhalter.svg") center / cover no-repeat;
}
/* Das Skript consent-core.js setzt die Höhe des iframe in Pixeln, hier gilt immer die Höhe der Fläche */
.kt-karte iframe[data-consent-embed] {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	border: 0;
}
.kt-karte__inhalt {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
}
@media (min-width: 801px) {
	.kt-karte__inhalt {
		justify-content: center;
		padding: 40px;
	}
}
.kt-karte__text {
	width: 100%;
	padding: 20px 0;
}
.kt-karte__zustimmen { flex: none; }

/* Info-Symbol unten rechts und das Feld mit dem Hinweis zur Datenübertragung */
.kt-karte__info {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kd-white);
	cursor: pointer;
}
.kt-karte__info svg { display: block; }
.kt-karte__info:focus-visible {
	outline: 2px solid var(--kd-white);
	outline-offset: 3px;
}
.kt-karte__hinweis {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	max-height: 100%;
	padding: 10px;
	overflow: auto;
	background-color: rgb(128, 128, 128);
	color: var(--kd-black);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
}

/* ------------------------------------------------------------------ Kontaktdaten in Spalten */
/* Eine Spalte bis 524 px, zwei bis 1049 px, danach drei. Die dritte Spalte ist leer und bleibt als Platzhalter erhalten,
   denn sie bestimmt im Original die Höhe der letzten Zeile (30 px Abstand unten). */
.kt-spalten {
	display: flex;
	flex-wrap: wrap;
	margin: 20px -15px 0;
}
.kt-spalten::after,
.kt-spalte {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 15px 30px;
}
.kt-spalten::after { content: ""; }
@media (min-width: 525px) {
	.kt-spalten::after,
	.kt-spalte { flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 1050px) {
	.kt-spalten::after,
	.kt-spalte { flex-basis: 33.3333%; max-width: 33.3333%; }
}
.kt-spalte__inhalt { padding: 20px 0; }
/* Im Original endet die Adresse mit einer leeren Zeile */
.kt-spalte--adresse p:last-child { padding-bottom: 1.6em; }

/* E-Mail-Adresse: vor dem Zusammensetzen im Skript unsichtbar (kein Aufblitzen), ohne JavaScript steht "name [at] domain" da */
html.js .kt-mail:not(.is-ready) { visibility: hidden; }
.kt-spalte .kt-mail a {
	color: inherit;
	text-decoration: none;
}
.kt-spalte .kt-mail a:hover,
.kt-spalte .kt-mail a:focus-visible { text-decoration: underline; }