/* =========================================================================
   Ombudsstelle Datenschutz - Stylesheet der oeffentlichen Informationsseite

   Alle Gestaltung liegt in dieser Datei. Im HTML gibt es keine style-Attribute
   und keine <style>-Bloecke, weil die Content-Security-Policy im Caddyfile
   nur Stylesheets von der eigenen Herkunft erlaubt (style-src 'self').

   Masse der kompakten Fassung:
   - Inhaltsbreite 1120 Pixel
   - Abstand zwischen Sektionen 40 Pixel (.abschnitt: 20 Pixel oben und unten)
   - Grundschrift 16 Pixel, Zeilenhoehe 1.5; Kartentext 15 Pixel
   - h1 40 Pixel, h2 28 Pixel, h3 18 Pixel
   ========================================================================= */

/* ---------- Schriftart Figtree (lokal, keine externen Aufrufe) ---------- */
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/figtree-latin.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: 'Figtree';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/figtree-latin.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: 'Figtree';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/figtree-latin.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: 'Figtree';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/figtree-latin.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: 'Figtree';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/figtree-latin-ext.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;
}

/* ---------- Farbwerte an einer Stelle ---------- */
:root {
	--weiss: #FFFFFF;
	--text: #111111;
	--text-sekundaer: #4A4A4A;
	--linie: #DADADA;
	--flaeche: #F4F4F4;
	--flaeche-hell: #F8F8F8;
	--rot: #BE1D28;
	--rot-dunkel: #A3181F;
	--rot-link-hover: #8F141D;
	--pflaume: #5A003C;
	--bernstein: #B45309;
	--bernstein-flaeche: #FFF4E5;
	--bernstein-linie: #F2C46D;
	--bernstein-titel: #7A3A00;
	--bernstein-text: #3A2A10;
	--gruen: #1B6B3A;
	--grau-rand: #767676;
	--platzhalter-flaeche: #FFF3B0;
	--kopfhoehe: 72px;
}

/* ---------- Grundlagen ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--weiss);
	color: var(--text);
	font-family: 'Figtree', 'Segoe UI', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

[hidden] {
	display: none !important;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	text-wrap: pretty;
	letter-spacing: -0.01em;
}

h1 {
	font-size: 40px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
}

h3 {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
}

p,
ul,
ol,
dl {
	margin: 0;
}

a {
	color: var(--rot);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--rot-link-hover);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--rot);
	outline-offset: 2px;
}

strong {
	font-weight: 600;
}

/* ---------- Sprunglink ---------- */
.sprunglink {
	position: fixed;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--weiss);
	color: var(--text);
	border: 2px solid var(--rot);
	padding: 12px 20px;
	font-weight: 600;
	text-decoration: none;
}

.sprunglink:focus {
	left: 8px;
	top: 8px;
}

/* ---------- Raster und Breite ---------- */
.bahn {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 40px;
}

.abschnitt {
	padding: 20px 0;
	scroll-margin-top: calc(var(--kopfhoehe) + 12px);
}

.abschnitt-flaeche {
	background: var(--flaeche);
	padding: 20px 0;
}

.kopfgruppe {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
}

.eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pflaume);
}

.abschnitt-einleitung {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 12px;
}

.fliess {
	font-size: 16px;
	line-height: 1.5;
}

.fliess > * + * {
	margin-top: 12px;
}

/* ---------- Platzhalter und Redaktionsmarken ---------- */
.platzhalter {
	background: var(--platzhalter-flaeche);
	color: var(--text);
	border: 1px dashed var(--bernstein);
	padding: 1px 6px;
	font-weight: 600;
}

.redaktion {
	font-style: italic;
	color: var(--bernstein);
	font-weight: 600;
}

/* ---------- Schaltflaechen ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 18px;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	border: 2px solid var(--rot);
	background: var(--rot);
	color: var(--weiss);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.btn:hover {
	background: var(--rot-dunkel);
	border-color: var(--rot-dunkel);
	color: var(--weiss);
}

.btn.sekundaer {
	background: transparent;
	color: var(--text);
	border-color: var(--text);
}

.btn.sekundaer:hover {
	background: var(--flaeche);
	color: var(--text);
}

/* ---------- Identitaetsleiste (scrollt normal weg) ---------- */
.identitaet {
	background: var(--pflaume);
	color: var(--weiss);
}

.identitaet .bahn {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 13px;
}

.identitaet svg {
	flex-shrink: 0;
}

/* ---------- Kopfzeile: bleibt beim Scrollen oben stehen ---------- */
.kopf {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--weiss);
	border-bottom: 1px solid var(--linie);
}

.kopf .bahn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--kopfhoehe);
	padding-top: 8px;
	padding-bottom: 8px;
	flex-wrap: wrap;
}

.marke-block {
	display: flex;
	align-items: center;
	gap: 16px;
}

.marke {
	position: relative;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -0.02em;
	padding-right: 13px;
	color: var(--text);
	text-decoration: none;
	line-height: 1.2;
}

.marke-ecke {
	position: absolute;
	right: 0;
	top: 3px;
	width: 9px;
	height: 9px;
	border-top: 3px solid var(--rot);
	border-right: 3px solid var(--rot);
}

.marke-trenner {
	width: 1px;
	height: 32px;
	background: var(--linie);
}

.marke-namen {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.marke-namen .titel {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.25;
}

.marke-namen .unter {
	font-size: 12px;
	line-height: 1.25;
	color: var(--text-sekundaer);
}

.nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.nav a:not(.btn) {
	color: var(--text);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	display: inline-block;
}

.nav a:not(.btn):hover {
	border-bottom-color: var(--rot);
	color: var(--text);
}

.nav .btn {
	min-height: 40px;
}

/* ---------- Standhinweis: schmale Zeile unter der Kopfzeile ---------- */
.stand {
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-sekundaer);
}

.stand .bahn {
	padding-top: 6px;
	padding-bottom: 4px;
}

/* ---------- Kopfbereich der Startseite ---------- */
.hero .bahn {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 28px;
	padding-top: 14px;
	padding-bottom: 18px;
	align-items: start;
}

.hero-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hero-lead {
	font-size: 17px;
	line-height: 1.45;
	color: var(--text-sekundaer);
}

.hero-traeger {
	font-size: 15px;
	line-height: 1.45;
	color: var(--text-sekundaer);
}

.knopfreihe {
	display: flex;
	gap: 12px;
	padding-top: 2px;
	flex-wrap: wrap;
}

/* ---------- Lagebild ---------- */
.lagebild {
	border: 1px solid var(--linie);
	background: var(--flaeche-hell);
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lagebild-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.lagebild-kopf h2 {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	flex-shrink: 0;
}

.lagebild-kopf span {
	font-size: 12px;
	line-height: 1.3;
	color: var(--text-sekundaer);
	text-align: right;
}

.lagebild dl {
	display: grid;
	grid-template-columns: 42% 1fr;
	gap: 6px 14px;
	font-size: 14px;
	line-height: 1.4;
}

.lagebild dt {
	color: var(--text-sekundaer);
}

.lagebild dd {
	margin: 0;
}

.lagebild-fuss {
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-sekundaer);
	border-top: 1px solid var(--linie);
	padding-top: 8px;
}

/* ---------- Warnstreifen direkt unter dem Kopfbereich ---------- */
.warnstreifen {
	background: var(--bernstein-flaeche);
	border-top: 1px solid var(--bernstein-linie);
	border-bottom: 1px solid var(--bernstein-linie);
	color: var(--bernstein-text);
}

.warnstreifen .bahn {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 22px;
	padding-bottom: 22px;
}

.warnstreifen > .bahn > svg {
	flex-shrink: 0;
}

.warnstreifen-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.warnstreifen-zeile {
	font-size: 16px;
	line-height: 1.4;
}

.warnstreifen-zeile strong {
	color: var(--bernstein-titel);
	font-weight: 700;
}

.warnstreifen-regel {
	font-weight: 600;
	color: var(--bernstein-titel);
}

.warnstreifen-satz {
	font-size: 14px;
	line-height: 1.4;
}

.warnstreifen-link {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--bernstein-titel);
	text-align: right;
}

.warnstreifen-link:hover {
	color: var(--bernstein);
}

/* ---------- Was ist passiert: Prosa links, Aufgaben und Grenzen rechts ---------- */
.vorfall-raster {
	display: grid;
	grid-template-columns: 9fr 14fr;
	gap: 32px;
	align-items: start;
}

.notiz {
	background: var(--flaeche-hell);
	border-left: 4px solid var(--pflaume);
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.45;
}

.ombudsspalte {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--linie);
	padding-left: 32px;
}

.spaltentitel {
	font-size: 18px;
	margin-bottom: 8px;
}

.spaltentitel + .listen-einleitung {
	margin-top: 0;
}

.ombudsspalte .leistungsliste + .spaltentitel {
	margin-top: 20px;
}

.leistungsliste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	line-height: 1.45;
}

.leistungsliste li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.leistungsliste svg {
	flex-shrink: 0;
	margin-top: 3px;
}

.leistungsliste.grenzen {
	color: var(--text-sekundaer);
}

.leistungsliste.grenzen strong {
	color: var(--text);
}

.listen-einleitung {
	font-size: 15px;
	line-height: 1.45;
	margin-bottom: 8px;
}

/* ---------- Sofortmassnahmen ---------- */
.massnahmen-kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.massnahmen-kopf .kopfgruppe {
	margin-bottom: 8px;
}

.fortschritt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 240px;
	margin-bottom: 10px;
}

.fortschritt-text {
	font-size: 13px;
	color: var(--text-sekundaer);
}

progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 6px;
	border: 0;
	background: #E6E6E6;
	color: var(--gruen);
}

progress::-webkit-progress-bar {
	background: #E6E6E6;
}

progress::-webkit-progress-value {
	background: var(--gruen);
}

progress::-moz-progress-bar {
	background: var(--gruen);
}

.massnahmen-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	column-gap: 12px;
}

.massnahme {
	border: 1px solid var(--linie);
	padding: 18px;
	margin: 0 0 12px 0;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--weiss);
	break-inside: avoid;
	page-break-inside: avoid;
}

.check {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	margin: 1px 0 0 0;
	border: 2px solid var(--grau-rand);
	background-color: var(--weiss);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	cursor: pointer;
	flex-shrink: 0;
}

.check:checked {
	background-color: var(--gruen);
	border-color: var(--gruen);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.massnahme-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.massnahme-titel {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
	display: inline-block;
}

.check:checked ~ .massnahme-text .massnahme-titel {
	color: #6B6B6B;
	text-decoration: line-through;
}

.massnahme-text p {
	font-size: 15px;
	line-height: 1.45;
	color: var(--text-sekundaer);
}

.schrittliste {
	margin: 0;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--text-sekundaer);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.massnahmen-fuss {
	margin-top: 12px;
	border: 1px solid var(--linie);
	background: var(--flaeche-hell);
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.45;
}

/* ---------- Warnkasten: gezielte Taeuschung ---------- */
.warnkasten {
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-left: 6px solid var(--bernstein);
	padding: 22px 26px 24px 26px;
	color: var(--text);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.warnkasten-kopf {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.warnkasten-kopf svg {
	flex-shrink: 0;
	margin-top: 4px;
}

.warnkasten-kopf .kopfgruppe {
	margin-bottom: 0;
}

.warnkasten h2 {
	color: var(--text);
	font-size: 28px;
}

.warnkasten h3 {
	color: var(--text);
	font-size: 17px;
	margin-bottom: 8px;
	padding-top: 6px;
}

.warnkasten .eyebrow {
	color: var(--pflaume);
}

.warnkasten p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-sekundaer);
}

.warnkasten-lead {
	font-size: 16px;
	line-height: 1.5;
	color: var(--text);
	max-width: 62ch;
}

.merkmale {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 32px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-sekundaer);
}

.merkmale li {
	padding-left: 14px;
	border-left: 2px solid var(--bernstein-linie);
}

.merkmale strong {
	color: var(--text);
	display: block;
	margin-bottom: 2px;
}

.warn-zwei {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 32px;
	align-items: start;
	border-top: 1px solid var(--linie);
	padding-top: 10px;
}

.warn-zwei > div > * + * {
	margin-top: 8px;
}

.regel {
	display: inline-block;
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
	background: var(--bernstein-flaeche);
	border: 1px solid var(--bernstein-linie);
	padding: 6px 12px;
}

/* ---------- Karten (Ihre Rechte) ---------- */
.karten-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: stretch;
}

.karte {
	background: var(--weiss);
	border: 1px solid var(--linie);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.karte .norm {
	font-size: 12px;
	color: var(--pflaume);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.karte h3 {
	font-size: 18px;
	font-weight: 600;
}

.karte p {
	font-size: 15px;
	line-height: 1.45;
	color: var(--text-sekundaer);
}

/* ---------- Haeufige Fragen ---------- */
.faq-raster {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: 32px;
	align-items: start;
}

.faq-seite {
	position: sticky;
	top: 100px;
}

.faq-hinweis {
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-sekundaer);
}

.faq-liste {
	border-bottom: 1px solid var(--linie);
}

details.faq {
	border-top: 1px solid var(--linie);
}

details.faq > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	list-style: none;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 600;
	padding: 12px 0;
	cursor: pointer;
	color: var(--text);
}

details.faq > summary::-webkit-details-marker {
	display: none;
}

details.faq > summary:hover {
	color: var(--pflaume);
}

details.faq > summary svg {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

details.faq[open] > summary svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	details.faq > summary svg {
		transition: none;
	}
}

details.faq .antwort {
	font-size: 15px;
	line-height: 1.5;
	color: #333333;
	padding: 0 32px 14px 0;
}

details.faq .antwort > * + * {
	margin-top: 10px;
}

/* ---------- Kontakt ---------- */
.kontakt-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.kontakt-karte {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.kontakt-karte h3 {
	font-weight: 600;
	font-size: 18px;
}

.kontakt-wert {
	font-size: 15px;
	line-height: 1.45;
}

.kontakt-zusatz {
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-sekundaer);
}

.hinweis-zwei {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 16px;
	align-items: start;
}

.hinweisblock {
	border: 1px solid var(--linie);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	line-height: 1.45;
	scroll-margin-top: calc(var(--kopfhoehe) + 12px);
}

.hinweisblock h3 {
	font-size: 18px;
}

.hinweisblock.portal {
	border: 2px solid var(--rot);
}

.hinweisblock.portal h3 {
	color: var(--rot);
}

.notrufliste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.datensparsamkeit {
	margin-top: 12px;
	background: var(--flaeche);
	border-left: 4px solid var(--pflaume);
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.45;
}

/* ---------- Echtheitskasten ---------- */
.echtkasten {
	border: 2px solid var(--text);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.echtkasten .kopfgruppe {
	margin-bottom: 0;
}

.echt-kopfzeile {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: center;
}

.echtkasten p,
.echtkasten li {
	font-size: 15px;
	line-height: 1.45;
}

.echtliste {
	list-style: disc;
	margin: 0;
	padding-left: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 28px;
}

.adresszeile {
	border: 1px solid var(--linie);
	background: var(--flaeche);
	padding: 10px 14px;
}

/* ---------- Rechtstexte (Datenschutz, Impressum) ---------- */
.rechtstext {
	max-width: 80ch;
}

.rechtstext h2 {
	font-size: 24px;
	margin-top: 28px;
	margin-bottom: 10px;
}

.rechtstext h3 {
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 6px;
}

.rechtstext p,
.rechtstext li {
	font-size: 16px;
	line-height: 1.5;
}

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

.rechtstext ul {
	list-style: disc;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}

.anschriftblock {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 10px;
	font-size: 16px;
}

.fussnote {
	font-size: 14px;
	color: var(--text-sekundaer);
	margin-top: 10px;
}

/* ---------- Fusszeile ---------- */
.fuss {
	margin-top: 12px;
	border-top: 1px solid var(--linie);
	font-size: 13px;
	color: var(--text-sekundaer);
}

.fuss .bahn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding-top: 18px;
	padding-bottom: 18px;
	flex-wrap: wrap;
}

.fuss ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.fuss a {
	color: var(--text-sekundaer);
}

.fuss a:hover {
	color: var(--text);
}

/* ---------- Tablet: zwei Spalten ---------- */
@media (max-width: 1023px) {
	.bahn {
		padding: 0 28px;
	}

	h1 {
		font-size: 34px;
	}

	h2 {
		font-size: 26px;
	}

	.hero .bahn {
		grid-template-columns: 1fr;
	}

	.vorfall-raster {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.massnahmen-liste {
		columns: 2;
	}

	.faq-raster {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.faq-seite {
		position: static;
	}

	.karten-3 {
		grid-template-columns: 1fr 1fr;
	}

	.kontakt-raster {
		grid-template-columns: 1fr 1fr;
	}

	.warnstreifen .bahn {
		flex-wrap: wrap;
	}

	.warnstreifen-link {
		text-align: left;
	}
}

/* ---------- Mobil: eine Spalte, Kopfzeile nicht mehr sticky ---------- */
@media (max-width: 767px) {
	.bahn {
		padding: 0 16px;
	}

	h1 {
		font-size: 28px;
	}

	h2 {
		font-size: 24px;
	}

	/* Die Navigation bricht hier auf mehrere Zeilen um. Die Kopfzeile waere
	   dann hoeher als 120 Pixel und wuerde zu viel vom Bildschirm verdecken,
	   deshalb steht sie auf kleinen Bildschirmen nicht mehr fest oben. */
	.kopf {
		position: static;
	}

	.kopf .bahn {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.nav ul {
		gap: 10px 18px;
	}

	.massnahmen-liste {
		columns: 1;
	}

	.karten-3,
	.kontakt-raster,
	.hinweis-zwei,
	.merkmale,
	.warn-zwei,
	.echtliste,
	.echt-kopfzeile,
	.lagebild dl {
		grid-template-columns: 1fr;
	}

	.lagebild dt {
		font-weight: 600;
	}

	.lagebild dd + dt {
		margin-top: 6px;
	}

	.warnkasten,
	.echtkasten {
		padding: 16px;
	}

	.warnstreifen .bahn {
		flex-wrap: wrap;
		gap: 10px;
	}

	.warnstreifen > .bahn > svg {
		display: none;
	}

	details.faq .antwort {
		padding-right: 0;
	}

	.knopfreihe .btn {
		width: 100%;
	}

	.fuss .bahn {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Druckfassung: Checkliste und Kontakt sauber ausgeben ---------- */
@media print {
	@page {
		margin: 16mm;
	}

	body {
		font-size: 11pt;
		line-height: 1.4;
		color: #000000;
		background: #FFFFFF;
	}

	.identitaet,
	.nav,
	.sprunglink,
	.fortschritt,
	.knopfreihe {
		display: none !important;
	}

	.kopf {
		position: static;
	}

	.bahn {
		max-width: none;
		padding: 0;
	}

	.abschnitt {
		padding: 12pt 0;
	}

	.abschnitt-flaeche,
	.lagebild,
	.notiz,
	.massnahmen-fuss,
	.warnstreifen,
	.warnkasten,
	.datensparsamkeit,
	.adresszeile {
		background: #FFFFFF !important;
		color: #000000 !important;
	}

	.warnkasten h2,
	.warnkasten h3,
	.warnstreifen strong,
	.warnstreifen-regel,
	.warnstreifen-link,
	.regel {
		color: #000000 !important;
	}

	.platzhalter {
		background: #FFFFFF;
		border: 1px solid #000000;
	}

	.massnahmen-liste {
		columns: 1;
	}

	.massnahme {
		margin-bottom: 8pt;
	}

	.massnahme,
	.kontakt-karte,
	.karte,
	.hinweisblock,
	.echtkasten,
	.warnkasten,
	details.faq {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Kontrollkaestchen im Druck: schwarzer Rahmen, gesetzte Haken bleiben
	   als schwarzes Haekchen sichtbar (print-color-adjust erzwingt den Druck
	   der Hintergrundgrafik, die Browser sonst weglassen). */
	.check {
		border: 1.5pt solid #000000;
		background-color: #FFFFFF !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.check:checked {
		background-color: #FFFFFF !important;
		border-color: #000000;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	}

	.check:checked ~ .massnahme-text .massnahme-titel {
		color: #000000;
		text-decoration: none;
	}

	.kontakt-raster {
		grid-template-columns: 1fr 1fr;
	}

	.faq-seite {
		position: static;
	}

	details.faq > summary svg,
	.leistungsliste svg,
	.kontakt-karte svg,
	.warnkasten-kopf svg,
	.warnstreifen svg {
		display: none;
	}

	details.faq .antwort {
		display: block;
		padding-right: 0;
	}

	a {
		color: #000000;
		text-decoration: underline;
	}

	.fuss {
		border-top: 1pt solid #000000;
	}
}

@media (max-width: 767px) {
	.ombudsspalte {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--linie);
		padding-top: 20px;
	}
	.merkmale {
		grid-template-columns: 1fr;
	}
}