/*
 * Kontakt — Header. Follows the system colour scheme (like Über-uns/Home do), not a fixed
 * light section like Leistungen/Team-Teaser — see the "Light/Dark-Konvention" comment in
 * nav.css. Self-contained tokens, not shared across sibling patterns.
 */
.nn-kh,
.nn-kh *,
.nn-kh *::before,
.nn-kh *::after {
	box-sizing: border-box;
}

.nn-kh {
	--bg: #ffffff;
	--ink-on-paper: #12211a;
	--ink-on-paper-muted: #5c6d64;
	--jade: #288760;

	background: var(--bg);
	/* clears the fixed frosted-glass nav bar (nav.css .nn-nav) sitting on top of it — same
	   value as .nn-au-header, this is the first section after the header template part */
	padding: clamp(150px, 22vh, 210px) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 6vh, 4rem);
	text-align: center;
	margin: 0;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-kh {
		--bg: #0b0c0c;
		--ink-on-paper: #e7e9ec;
		--ink-on-paper-muted: #b0b5bf;
		--jade: #288760;
	}
}
html[data-theme="dark"] .nn-kh {
	--bg: #0b0c0c;
	--ink-on-paper: #e7e9ec;
	--ink-on-paper-muted: #b0b5bf;
	--jade: #288760;
}

.nn-kh-kicker {
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.9rem;
	color: var(--jade);
	margin: 0 0 1rem;
}

.nn-kh-h1 {
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.02;
	/* deutlich größer als die ursprüngliche Fassung (war clamp(2.25rem,5.5vw,3.75rem)) —
	   löst "Header wirkt leer" allein über Typografie-Maßstab, ohne neuen Foto-/Canvas-
	   Effekt (siehe Beschreibung oben, Team-Entscheidung 2026-08-27) */
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	color: var(--ink-on-paper);
	text-wrap: balance;
	margin: 0 auto 1.5rem;
	/* länger als die ursprüngliche Fassung ("Lass uns sprechen, ganz ohne Umwege.") — daher
	   breiter als vorher (war 22ch), damit sie sich über zwei statt vier/fünf Zeilen legt */
	max-width: 32ch;
}

/* Differenzierungs-Zeile — trägt das zentrale Verkaufsargument (direkter Draht zu den
   Gründern statt Junior-Delivery/Ticket-System) direkt unter die Headline, fetter als die
   normale Lede, damit der Mehrwert nicht erst in der kleinen Karte weiter unten auftaucht.
   Deutlich breiter als vorher (war 42ch) — der Text ist jetzt eine ganze Frage/Satzgruppe
   statt eines kurzen Claims. */
.nn-kh-diff {
	font-weight: 700;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.55;
	color: var(--ink-on-paper);
	max-width: 62ch;
	margin: 0 auto 1.25rem;
}

/* ebenfalls breiter als vorher (war 44ch) — jetzt ein vollständiger Ablauf-Absatz statt
   eines kurzen Untertitels */
.nn-kh-lede {
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.65;
	color: var(--ink-on-paper-muted);
	max-width: 66ch;
	margin: 0 auto;
}