/* ===== ROS REAL · Seite Kontakt (Design v46, Auftrag BQ2) =====
   Blöcke .kblocks/.kblock/.kbtitel/.kbzeilen/.kzeile, Seitenleiste #preisblock
   mit dem Formular und das „Das Büro“-Band. Nur Tokens aus main.css, keine
   Hex-Werte. Das Formular selbst nutzt die Bausteine aus formular.css
   (.feld, .haken, .zwei, .fhinweis) und select[data-rselect] aus auswahl.js. */

/* ===== Seitenleiste: für das Formular breiter als beim schlanken Gerüst ===== */
.zwei.kontakt:has(> #preisblock) {
	grid-template-columns: minmax(0, 1fr) 440px;
}

/* Handy: eine Spalte, Seitenleiste unter dem Inhalt (kein Überlauf bei 393/320). */
@media (max-width: 1023px) {
	.zwei.kontakt:has(> #preisblock) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Einleitung: 34 px unter dem Titel wie alle Seiten (seiten.css setzt hier 0). */
.zwei.kontakt .haupt .einleitung {
	margin: 34px 0 0;
}
@media (max-width: 767px) {
	.zwei.kontakt .haupt .einleitung {
		margin-top: 22px;
	}
}

/* Der erste Abschnitt rückt näher an den Kopf (Prototyp: 44 px statt 76 px). */
.zwei.kontakt .haupt .abschnitt {
	margin-top: 44px;
}

/* ===== Kontakt-Blöcke (Büro, Ansprechpartner, Termine/Anfahrt) ===== */
.kblocks {
	display: grid;
	gap: 40px;
}
.kbtitel {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--linie);
	font: italic 400 21px/1.05 var(--serif);
	color: var(--tinte);
}
.kbzeilen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 40px;
}
.kbzeilen.drei {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kblock.ohnetitel {
	padding-top: 34px;
	border-top: 1px solid var(--linie);
}
.kbzeilen .kzeile {
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 0;
	min-height: 0;
}
.kbzeilen .kzeile > span:first-child {
	display: block;
	margin-bottom: 6px;
	font: 400 var(--t4)/1.65 var(--sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--grau);
}
.kbzeilen .kzeile > span:last-child,
.kbzeilen .kzeile > a {
	display: block;
	text-align: left;
	font: 400 var(--t2)/2 var(--sans);
	color: var(--tinte);
}
.kbzeilen .kzeile > a {
	color: var(--blau);
}

/* Ansprechpartner: jede Person eine Zelle, ihre Kontakte als eigene Zeilen mit
   eigener 44-px-Fläche (Übergabe 7.6 – nicht über die Zeilenhöhe lösen). */
.kperson {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.kperson .kzeile {
	padding: 0;
}
.kbzeilen .kzeile > .kperson__kontakte {
	display: grid;
	gap: 4px;
	font: inherit;
}
.kbzeilen .kzeile > .kperson__kontakte a {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	align-items: center;
	min-height: 44px;
	font: 400 var(--t3)/1.5 var(--sans);
}
.kbzeilen .kzeile > .kperson__kontakte a span {
	font: 400 var(--t4)/1.6 var(--sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--grau);
}

/* ===== „Das Büro“: Titel über den drei Spalten im Lageband ===== */
.lageband .zt {
	max-width: 1440px;
	margin: 0 auto 36px;
	padding: 54px var(--rand) 0;
}
.lageband .zt ~ .umgeb {
	padding-top: 0;
}

@media (max-width: 767px) {
	.kbzeilen,
	.kbzeilen.drei {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===== Formular in der Seitenleiste ===== */
#preisblock .zt {
	font-size: clamp(26px, 2.4vw, 32px);
}
#kform .feld .rselect {
	display: block;
	width: 100%;
	min-width: 0;
}
#kform .fhinweis {
	margin: 0;
}
#kform .feld--fehler .rselect > button {
	border-color: var(--fehler);
}

/* Zustimmung: eigener Block mit Trennlinien, Kästchen ohne Zusatzabstand. */
.consent {
	margin: 8px 0 22px;
	padding: 16px 0;
	border-top: 1px solid var(--linie);
	border-bottom: 1px solid var(--linie);
}
.consent .haken {
	margin: 0;
}
.consent .haken a {
	color: var(--blau);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}
.consent .feld__meldung {
	margin: 8px 0 0;
}
.consent.feld--fehler .haken input[type="checkbox"] {
	border-color: var(--fehler);
}

/* Statusmeldung (Fehler) über dem Knopf. */
#kform .kstatus {
	margin: 0 0 18px;
	padding: 12px 0;
	border-top: 1px solid var(--fehler);
	border-bottom: 1px solid var(--fehler);
	font: 400 var(--t3)/1.6 var(--sans);
	color: var(--fehler);
}
#kform .kstatus[hidden] {
	display: none;
}

/* Kleingedrucktes unter dem Knopf: ein Satz, nicht in Versalien. */
#preisblock #kform .klein {
	margin: 18px 0 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--t3);
	line-height: 1.65;
}

/* Erfolgsmeldung (ersetzt das Formular): Serif. */
#preisblock .kdanke {
	margin: 0;
	font: 400 22px/1.6 var(--serif);
	color: var(--tinte);
}

/* Inaktives Formular: Satz + Links. */
#preisblock .kinaktiv {
	margin: 0;
	font: 400 var(--t1)/1.65 var(--sans);
	color: var(--tinte);
}
#preisblock .kinaktive-links {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
#preisblock .kinaktive-links a {
	font: 400 var(--t1)/1.65 var(--sans);
	color: var(--blau);
}

/* Hinweis ohne JavaScript. */
#preisblock .knoscript {
	margin: 0;
	font: 400 var(--t3)/1.65 var(--sans);
	color: var(--grau);
}

/* ===== K2 Paket 4 – Messrunde 2 Nr 139 / R1 Nr 46: Werte Sans 17 / Zeilenhöhe 1,5, Links
   unterstrichen in Tinte; Ansprechpartner je eine Fließzeile (am Handy Zeilenhöhe 2,6,
   damit sich die 44-px-Flächen umbrechender Links nicht überdecken). ===== */
.kbzeilen .kzeile > span:last-child,
.kbzeilen .kzeile > a {
	font: 400 17px/1.5 var(--sans);
	color: var(--tinte);
}
.kbzeilen .kzeile a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}