/* ==========================================================================
   Stil fuer Impressum und Datenschutz.

   Bewusst eine eigene, kleine Datei statt einer Kopie des Seiten-CSS aus
   index.html: Die Rechtsseiten sind Fliesstext und brauchen nichts von der
   Startseite ausser Farben und Schriften. Wer die Marke umfaerbt, aendert
   die Werte hier und in index.html — mehr Stellen gibt es nicht.
   ========================================================================== */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-display: swap;
	font-weight: 300 700;
	src: url('schrift/space-grotesk-latin-wght-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('schrift/inter-latin-wght-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('schrift/inter-latin-ext-wght-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bg-body: #FAFAFA;
	--bg-surface: #FFFFFF;
	--text-main: #09090B;
	--text-muted: #52525B;
	--accent-primary: #2563EB;
	--border-light: #E4E4E7;
	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
	background: var(--bg-body);
	color: var(--text-main);
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* Lange deutsche Komposita brechen sonst aus schmalen Bildschirmen heraus. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
p, li, dd, dt, td { overflow-wrap: break-word; }

a { color: var(--accent-primary); }
a:focus-visible, button:focus-visible {
	outline: 3px solid var(--accent-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.kopf {
	border-bottom: 1px solid var(--border-light);
	background: var(--bg-surface);
}

.band {
	max-width: 780px;
	margin: 0 auto;
	/* 20px Seitenluft, damit auf dem Telefon nichts am Rand klebt. */
	padding: 0 20px;
}

.kopf .band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
}

.marke {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text-main);
	text-decoration: none;
}

.zeichen {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--text-main);
	color: #FFF;
	font-family: var(--font-display);
	font-weight: 700;
}

.marke small {
	/* Stand am 21.09.2026 auf 0.7rem — das sind 11 Pixel und auf dem
	   Telefon nicht mehr zu lesen. */
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text-muted);
}

/* Der Rueckweg oben rechts ist ein Navigationsziel, kein Link im Fliesstext:
   Er bekommt die 24 Pixel Tipphoehe aus WCAG 2.5.8. */
.kopf .band > a:not(.marke) {
	display: inline-block;
	padding-block: 6px;
}

main { padding: 56px 0 80px; }

h1 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
}

.vorspann {
	color: var(--text-muted);
	margin-bottom: 40px;
}

h2 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	margin: 40px 0 12px;
}

p + p { margin-top: 12px; }

ul { margin: 12px 0 0 20px; }
li + li { margin-top: 6px; }

dl {
	display: grid;
	grid-template-columns: minmax(140px, 200px) 1fr;
	gap: 10px 24px;
	margin-top: 16px;
	padding: 20px;
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: 12px;
}

dt { color: var(--text-muted); }
dd { font-weight: 500; }

@media (max-width: 560px) {
	dl { grid-template-columns: 1fr; gap: 4px 0; padding: 16px; }
	dt { margin-top: 12px; }
	dl > dt:first-of-type { margin-top: 0; }
}

.stand {
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--border-light);
	color: var(--text-muted);
	font-size: 0.9rem;
}

.fuss {
	border-top: 1px solid var(--border-light);
	background: var(--bg-surface);
	padding: 24px 0;
	font-size: 0.9rem;
	color: var(--text-muted);
}

.fuss .band {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
}

/* Tippziele in der Fusszeile auf 24 Pixel Hoehe bringen. */
.fuss a { display: inline-block; padding-block: 3px; }