/*
 * Rechtstexte (Datenschutz, Impressum) — eine Datei für beide Seiten, da sie sich dasselbe
 * Gerüst teilen (.section, .wrap, .section-head, .content-article) und jeweils reiner
 * Fließtext ohne eigene Interaktion sind. Klassennamen (.section, .wrap, .content-article)
 * bewusst wie in den Leistungsseiten gehalten, ALLE Regeln unter .nn-legal gescopt (siehe
 * Scoping-Konvention in CLAUDE.md Abschnitt 8).
 *
 * Keine eigenen Farb-Tokens: erbt --bg/--ink direkt von body (style.css), das dort bereits
 * nach der Light/Dark-Konvention gesetzt ist (hell unbedingt, dunkel bewacht) — genau wie
 * beim Über-uns-Header (siehe Kommentar in ueber-uns-header.css). Kein hartcodierter Hex-
 * Wert, kein doppelter Dark-Mode-Override nötig.
 *
 * Große Screens (ab ca. 1900px, z. B. 2560×1440): .wrap folgt der theme-weiten 2200px-
 * Konvention (siehe leistungen-hub.css/seo-geo.css), Content-Breite bleibt bei 72ch
 * begrenzt — reiner Lesetext profitiert nicht von voller Bildschirmbreite, im Gegenteil,
 * zu lange Zeilen verschlechtern die Lesbarkeit.
 */
.nn-legal,
.nn-legal *,
.nn-legal *::before,
.nn-legal *::after {
	box-sizing: border-box;
}

.nn-legal.section {
	padding: clamp(6rem, 14vh, 12rem) 0 clamp(4rem, 10vh, 8rem);
}
.nn-legal.section--paper {
	background: var(--paper, var(--bg));
}

.nn-legal .wrap {
	width: min(2200px, 100% - clamp(2rem, 10vw, 13rem));
	margin-inline: auto;
}

/* Breadcrumb und Überschrift sollen links an derselben Stelle beginnen wie der Fließtext
   darunter ("Angaben gemäß …", erstes h2 in .content-article) — daher dieselbe 72ch-Spalte,
   zentriert mit margin-inline:auto genau wie .content-article weiter unten. Innerhalb dieser
   Spalte sind Breadcrumb und H1 normale, linksbündige Blockelemente, kein zusätzliches
   text-align/justify-content nötig. */
.nn-legal .section-head {
	max-width: 72ch;
	margin: 0 auto clamp(2.25rem, 5vh, 4rem);
}
/* 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-legal .crumbs-nav {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.nn-legal .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-legal .crumbs li {
	display: flex;
	align-items: center;
	gap: .45rem;
}
.nn-legal .crumbs a {
	color: var(--ink-muted, var(--ink));
	text-decoration: none;
}
.nn-legal .crumbs a:hover,
.nn-legal .crumbs a:focus-visible {
	color: var(--jade-accent, #288760);
	transition: color .2s ease;
}
.nn-legal .crumbs [aria-current="page"] {
	color: var(--ink);
	font-weight: 600;
}
.nn-legal .crumbs__sep {
	opacity: .5;
}
.nn-legal .section-head__h1 {
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	font-size: clamp(2rem, 5vw, 4.25rem);
	margin: 0;
}

.nn-legal .content-article {
	max-width: 72ch;
	margin-inline: auto;
}
.nn-legal .content-article h2 {
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
}
.nn-legal .content-article h2:first-child {
	margin-top: 0;
}
.nn-legal .content-article h3 {
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	margin: 2rem 0 0.75rem;
}
.nn-legal .content-article p {
	margin: 0 0 1.1rem;
	font-size: clamp(0.95rem, 1vw, 1.05rem);
	line-height: 1.65;
	color: var(--ink-muted, var(--ink));
}
.nn-legal .content-article ul {
	margin: 0 0 1.1rem;
	padding-left: 1.25rem;
	font-size: clamp(0.95rem, 1vw, 1.05rem);
	line-height: 1.65;
	color: var(--ink-muted, var(--ink));
}
.nn-legal .content-article li {
	margin-bottom: 0.4rem;
}
.nn-legal .content-article strong {
	color: var(--ink);
	font-weight: 700;
}
.nn-legal .content-article em {
	font-style: italic;
}
.nn-legal .content-article a {
	color: var(--jade-accent, #288760);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.nn-legal .content-article a:hover,
.nn-legal .content-article a:focus-visible {
	color: var(--jade-accent, #1a5140);
}