/*
 * Kontakt — FAQ. 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.
 *
 * Akkordeon-Mechanik/Optik (2026-08-28) bewusst 1:1 vom FAQ-Baustein der Leistungsseiten
 * übernommen (z. B. .nn-social .faq in assets/css/social-ads.css) — natives
 * `<details>`/`<summary>`, +/− Marker per ::after, obere/untere Trennlinie. Eigene
 * .nn-kfaq-*-Klassen statt der dortigen .faq/.faq__a, da .nn-social & Co. ein eigenes,
 * Leistungsseiten-spezifisches Design-System sind (siehe deren Dateikopf) und hier nicht
 * mit-importiert werden sollen — nur das visuelle Ergebnis wird nachgebaut, nicht die Klasse.
 */
.nn-kfaq,
.nn-kfaq *,
.nn-kfaq *::before,
.nn-kfaq *::after {
	box-sizing: border-box;
}

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

	background: var(--bg);
	padding: clamp(3rem, 8vh, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 10vh, 6rem);
	color: var(--ink-on-paper);
}

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

.nn-kfaq-h2 {
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-size: clamp(1.85rem, 3.5vw, 2.5rem);
	color: var(--ink-on-paper);
	text-align: center;
	max-width: 900px;
	margin: 0 auto clamp(2rem, 5vh, 3rem);
}

.nn-kfaq-list {
	max-width: 900px;
	margin: 0 auto;
}

.nn-kfaq-list details {
	border-bottom: 1px solid var(--line);
}
.nn-kfaq-list details:first-of-type {
	border-top: 1px solid var(--line);
}

.nn-kfaq-list summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 1.4rem 3rem 1.4rem 0;
	font-weight: 900;
	font-size: clamp(1.02rem, 1.8vw, 1.4rem);
	letter-spacing: -0.01em;
	color: var(--ink-on-paper);
}
.nn-kfaq-list summary::-webkit-details-marker {
	display: none;
}
.nn-kfaq-list summary::after {
	content: "+";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--jade);
}
.nn-kfaq-list details[open] summary::after {
	content: "−";
}
.nn-kfaq-list summary:hover,
.nn-kfaq-list summary:focus-visible {
	color: var(--jade);
}

.nn-kfaq-a {
	padding: 0 3rem 1.6rem 0;
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink-on-paper-muted);
}

@media (max-width: 560px) {
	.nn-kfaq-list summary,
	.nn-kfaq-a {
		padding-right: 2rem;
	}
}

/* Breadcrumb unter der letzten FAQ-Frage — auf ausdrücklichen Wunsch dort statt am
   Seitenanfang (wo die übrigen Leistungsseiten sie zeigen), da die Kontakt-Seite selbst
   keinen eigenen Header mit Platz dafür hat. Gleiche 900px-Spalte wie .nn-kfaq-list darüber,
   damit sie exakt auf derselben Einrückung wie das Akkordeon steht. Klassen/Optik 1:1 aus
   dem .crumbs-Baustein der Leistungsseiten übernommen (z. B. .nn-au-intro .crumbs in
   assets/css/ueber-uns-intro.css). */
.nn-kfaq-crumbs {
	max-width: 900px;
	margin: clamp(2rem, 5vh, 3rem) auto 0;
}
.nn-kfaq-crumbs .crumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
	font-size: clamp(.75rem, .45vw, .95rem);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.nn-kfaq-crumbs .crumbs li {
	display: flex;
	align-items: center;
	gap: .45rem;
}
.nn-kfaq-crumbs .crumbs a {
	color: var(--ink-on-paper-muted);
	text-decoration: none;
}
.nn-kfaq-crumbs .crumbs a:hover,
.nn-kfaq-crumbs .crumbs a:focus-visible {
	color: var(--jade);
	transition: color .2s ease;
}
.nn-kfaq-crumbs .crumbs [aria-current="page"] {
	color: var(--ink-on-paper);
	font-weight: 600;
}
.nn-kfaq-crumbs .crumbs__sep {
	opacity: .5;
}