/* ==========================================================================
   SOC Map — Dunkelblaues Fachregister, JetBrains Mono durchgängig.
   Baseline 14px, 4px-Spacing-Raster, konsistente Typographie über alle Seiten.
   ========================================================================== */

:root {
	/* Dunkelblaue Palette */
	--ink:      #F1F6FD;
	--paper:    #17344F;
	--paper-2:  #1D405F;
	--paper-3:  #284F70;
	--line:     #3B5D79;
	--line-2:   #6687A3;
	--muted:    #C1D4E5;

	--signal:   #9CCFFF;
	--foreign:  #E7ECF5;
	--focus:    #C7E5FF;
	--row-alt:  #1B3954;

	--bg:   var(--paper);
	--bg-2: var(--paper-2);
	--fg:   var(--ink);
	--card: var(--paper-2);
	--brd:  var(--line);
	--brd-2: var(--line-2);
	--soft: rgba(255, 255, 255, .03);
	--inv-fg: var(--paper);
	--inv-bg: var(--ink);

	--radius:   0;
	--radius-s: 0;

	/* 4px-Spacing-Raster */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-8: 32px;
	--s-10: 40px;
	--s-12: 48px;
	--s-16: 64px;

	/* Alles JetBrains Mono */
	--font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-display: var(--font);
	--font-serif:   var(--font);
	--font-sans:    var(--font);
	--font-mono:    var(--font);
	--motion:       160ms cubic-bezier(.2, .8, .2, 1);

	/* Konsistente Type-Skala (Baseline 14px) */
	--fs-xxs:  10px;
	--fs-xs:   11px;
	--fs-sm:   12px;
	--fs-base: 14px;
	--fs-md:   16px;
	--fs-lg:   20px;
	--fs-xl:   26px;
	--fs-xxl:  34px;

	--head-h:   56px;
	--content-max: 1440px;
	--prose-max:   980px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: 1.5;
	font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }

/* Alle Zahlen tabellarisch. */
table, .tabular, .num, .counters__num, .verzeichnis__table td, .verzeichnis__table th {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 {
	font-family: var(--font);
	color: var(--fg);
	font-weight: 500;
	letter-spacing: 0;
	margin: 0 0 var(--s-3);
}
h1 { font-size: var(--fs-xxl); line-height: 1.15; }
h2 { font-size: var(--fs-xl); line-height: 1.2; }
h3 { font-size: var(--fs-lg); line-height: 1.25; font-weight: 500; }
h4 { font-size: var(--fs-md); line-height: 1.3; font-weight: 500; }

p { margin: 0 0 var(--s-3); }

a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal); }

/* Fokus nur bei Tastatur (4d). */
:focus { outline: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; top: -40px; left: var(--s-2); z-index: 100;
	background: var(--fg); color: var(--inv-fg); padding: var(--s-2) var(--s-3); text-decoration: none;
	font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
}
.skip-link:focus { top: var(--s-2); }

/* ==========================================================================
   HEADER (4b: Notice-Bar aus dem Header raus, wandert in den Footer)
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 40;
	background: var(--bg);
	border-bottom: 1px solid var(--line-2);
	height: var(--head-h);
}
.site-header__inner {
	max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-6);
	display: flex; align-items: center; gap: var(--s-4); height: 100%;
}
.site-header__brand { display: inline-flex; align-items: center; gap: var(--s-2); color: inherit; text-decoration: none; }
.site-header__flag {
	display: inline-block; width: 22px; height: 14px; flex: 0 0 22px;
	border: 1px solid var(--line-2);
	background:
		linear-gradient(to bottom,
			#000 0%, #000 33.33%,
			#DD0000 33.33%, #DD0000 66.66%,
			#FFCE00 66.66%, #FFCE00 100%);
}
.site-header__wordmark {
	font-family: var(--font); font-weight: 600; font-size: var(--fs-md);
	letter-spacing: .02em; text-transform: uppercase;
}

.site-header__nav { display: flex; gap: var(--s-1); margin-left: var(--s-6); }
.site-header__nav a {
	color: var(--fg); text-decoration: none;
	font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em;
	padding: var(--s-2) var(--s-3); border: 1px solid transparent;
}
.site-header__nav a:hover, .site-header__nav a.is-active {
	color: var(--signal); border-color: var(--line-2);
}
.site-header__tools { margin-left: auto; display: inline-flex; gap: var(--s-2); }

/* ==========================================================================
   HERO / EYEBROW / COUNTERS
   ========================================================================== */
.hero { padding: var(--s-10) var(--s-6) var(--s-6); border-bottom: 1px solid var(--line-2); }
.hero__inner { max-width: var(--content-max); margin: 0 auto; }
.hero__eyebrow, .eyebrow {
	color: var(--muted); font-size: var(--fs-xs);
	letter-spacing: .16em; text-transform: uppercase;
	margin: 0 0 var(--s-4);
}
.hero__title { font-size: var(--fs-xxl); line-height: 1.15; margin: 0 0 var(--s-4); font-weight: 500; }
.hero__dek { font-size: var(--fs-md); line-height: 1.55; margin: 0; color: var(--muted); max-width: 80ch; }
.hero__dek b, .hero__dek strong { color: var(--fg); font-weight: 500; }

.counters { padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line-2); background: var(--paper-2); }
.counters__grid {
	list-style: none; margin: 0 auto; padding: 0; max-width: var(--content-max);
	display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0;
}
.counters__grid li {
	padding: var(--s-2) var(--s-4);
	display: flex; flex-direction: column; gap: var(--s-1);
	border-right: 1px solid var(--line-2);
}
.counters__grid li:last-child { border-right: 0; }
.counters__num { font-size: var(--fs-lg); font-weight: 500; line-height: 1; white-space: nowrap; color: var(--fg); }
.counters__slash { color: var(--muted); margin: 0 2px; font-weight: 400; }
.counters__lbl { color: var(--muted); font-size: var(--fs-xxs); letter-spacing: .1em; text-transform: uppercase; }

/* ==========================================================================
   FILTER
   ========================================================================== */
.filters { padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line-2); }
.filters__form { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-3); }
.filters__search input {
	width: 100%; padding: var(--s-3) var(--s-4); font: inherit; font-size: var(--fs-base);
	background: var(--paper-2); color: var(--fg); border: 1px solid var(--line-2);
}
.filters__search input::placeholder { color: var(--muted); }
.filters__search input:focus-visible { border-color: var(--focus); outline: 0; }

.filters__row {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0; border: 1px solid var(--line-2);
}
.filters__row label {
	min-width: 0;
	display: flex; flex-direction: column; gap: var(--s-1);
	padding: var(--s-2) var(--s-3);
	font-size: var(--fs-xxs); color: var(--muted);
	text-transform: uppercase; letter-spacing: .1em;
	border-right: 1px solid var(--line-2);
}
.filters__row label:last-child { border-right: 0; }
.filters__row select {
	min-width: 0; width: 100%;
	background: transparent; color: var(--fg); border: 0;
	padding: 2px 0; font-family: var(--font); font-size: var(--fs-base); min-height: 28px;
	appearance: none; -webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(-45deg, transparent 50%, currentColor 50%);
	background-position: right 4px center, right 0 center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 16px;
}
.filters__certs {
	min-inline-size: 0;
	border: 1px solid var(--line-2); padding: var(--s-2) var(--s-4); margin: 0;
	display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); align-items: center;
}
.filters__certs legend {
	padding: 0 var(--s-2); color: var(--muted);
	font-size: var(--fs-xxs); letter-spacing: .1em; text-transform: uppercase;
}
.filters__certs label { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); max-width: 100%; overflow-wrap: anywhere; }

.filters__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.filters__view { display: inline-flex; border: 1px solid var(--line-2); }
.filters__view button {
	appearance: none; border: 0; background: transparent; color: var(--fg);
	padding: var(--s-2) var(--s-4);
	font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
	cursor: pointer; min-height: 32px;
	border-right: 1px solid var(--line-2);
}
.filters__view button:last-child { border-right: 0; }
.filters__view button[aria-selected="true"] { background: var(--signal); color: var(--paper); }

.filters__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); min-height: 8px; }
.chip {
	background: transparent; border: 1px solid var(--line-2);
	padding: 3px var(--s-2) 3px var(--s-3);
	font-size: var(--fs-xxs); text-transform: uppercase; letter-spacing: .06em;
	display: inline-flex; gap: var(--s-1); align-items: center;
}
.chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: var(--fs-sm); line-height: 1; }

.btn {
	appearance: none; border: 1px solid var(--signal); background: var(--signal); color: var(--paper);
	padding: var(--s-2) var(--s-4);
	font-family: var(--font); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
	cursor: pointer; min-height: 32px;
}
.btn:hover { background: transparent; color: var(--signal); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--signal); color: var(--signal); }

/* ==========================================================================
   VERZEICHNIS-TABELLE
   ========================================================================== */
.verzeichnis { padding: var(--s-6); }
.verzeichnis__head {
	max-width: var(--content-max); margin: 0 auto var(--s-4);
	display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap;
}
.verzeichnis__stand {
	color: var(--muted); font-size: var(--fs-xs);
	text-transform: uppercase; letter-spacing: .08em;
}
.verzeichnis__scroll {
	max-width: var(--content-max); margin: 0 auto;
	border: 1px solid var(--line-2);
	overflow: auto;
	max-height: min(72vh, 840px);
	max-height: min(72dvh, 840px);
	position: relative;
	isolation: isolate;
	scrollbar-gutter: stable;
	scrollbar-color: var(--line-2) var(--paper);
	scroll-padding-top: 64px;
	scroll-padding-left: 212px;
}
.verzeichnis__table {
	width: 100%; border-collapse: separate; border-spacing: 0;
	font-size: var(--fs-sm);
	table-layout: fixed;
	min-width: 940px;
}
.verzeichnis__table[data-view="erweitert"] { min-width: 2280px; }
.verzeichnis__table th:nth-child(1) { width: 4%; }
.verzeichnis__table th:nth-child(2) { width: 21%; }
.verzeichnis__table th:nth-child(3) { width: 11%; }
.verzeichnis__table th:nth-child(4) { width: 13%; }
.verzeichnis__table th:nth-child(5) { width: 25%; }
.verzeichnis__table th:nth-child(6) { width: 8%; }
.verzeichnis__table th:nth-child(7) { width: 18%; }
.verzeichnis__table[data-view="erweitert"] th { width: auto; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(1) { width: 44px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(2) { width: 208px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(3) { width: 112px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(4) { width: 140px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(5) { width: 268px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(6) { width: 88px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(7) { width: 196px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(8) { width: 104px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(9) { width: 128px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(10) { width: 240px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(11) { width: 172px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(12) { width: 136px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(13) { width: 244px; }
.verzeichnis__table[data-view="erweitert"] th:nth-child(14) { width: 200px; }
.verzeichnis__hint {
	max-width: var(--content-max); margin: 0 auto var(--s-2);
	color: var(--muted); font-size: var(--fs-sm);
}
.verzeichnis__hint[hidden] { display: none; }

/* Anker-Nummer (5c) */
.verzeichnis__table td.col-idx, .verzeichnis__table th.col-idx {
	width: 44px; text-align: right; color: var(--muted);
	font-size: var(--fs-xxs);
	padding-right: var(--s-2); padding-left: var(--s-3);
}

/* Kopf: kompakt, sortierbare Anzeige (4f/5g) */
.verzeichnis__table thead th {
	position: sticky; top: 0;
	background: var(--paper-2);
	text-align: left;
	font-size: var(--fs-xs); letter-spacing: .02em;
	padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--signal); font-weight: 500;
	color: var(--muted); z-index: 5;
}
.verzeichnis__table thead th.is-sorted { color: var(--fg); }
.verzeichnis__table thead th[data-sort] button::after {
	content: " ↕"; color: var(--muted);
}
.verzeichnis__table thead th.is-sorted-asc button::after { content: " ↑"; color: var(--signal); }
.verzeichnis__table thead th.is-sorted-desc button::after { content: " ↓"; color: var(--signal); }
.table-sort {
	font: inherit; color: inherit; text-align: inherit; cursor: pointer;
	border: 0; background: none; padding: 4px 0; width: 100%;
	min-height: 32px; white-space: normal; line-height: 1.4;
}
.verzeichnis__table thead th.num { text-align: right; }

/* Body */
.verzeichnis__table tbody td {
	padding: var(--s-3);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	white-space: normal; overflow-wrap: anywhere; word-break: normal;
	line-height: 1.65;
}
.verzeichnis__table .col-detail, .verzeichnis__table .col-fakt { hyphens: auto; }
.verzeichnis__table .col-quelle { overflow-wrap: anywhere; }
.verzeichnis__table tbody td.num { text-align: right; }

/* Zebra (4b) — sehr subtil */
.verzeichnis__table tbody tr:nth-child(even) td { background: var(--row-alt); }
.verzeichnis__table tbody tr:hover td { background: var(--paper-3); }

/* Sticky Firmennamen-Spalte (4c) — nur horizontal-scroll relevant */
.verzeichnis__table td.col-firma, .verzeichnis__table th.col-firma {
	position: sticky; left: 0; background: var(--paper); z-index: 3;
	border-right: 1px solid var(--line-2);
	box-shadow: 1px 0 0 var(--line-2);
}
.verzeichnis__table thead th.col-firma { background: var(--paper-2); z-index: 6; }
.verzeichnis__table tbody tr:nth-child(even) td.col-firma { background: var(--row-alt); }
.verzeichnis__table tbody tr:hover td.col-firma { background: var(--paper-3); }

.verzeichnis__table[data-view="kompakt"] [data-view-only="erweitert"] { display: none; }

.row-firma {
	appearance: none; border: 0; background: transparent; font: inherit;
	font-size: var(--fs-base); font-weight: 500;
	color: var(--fg); text-align: left; cursor: pointer; padding: 0;
	max-width: 100%; white-space: normal; overflow-wrap: anywhere;
	hyphens: none; line-height: 1.5;
}
.row-firma:hover { color: var(--signal); }
.col-detail, .col-fakt, .col-quelle { max-width: 40ch; color: var(--muted); }
.col-certs { max-width: 26ch; }

/* Zertifikate als Kürzel-Reihe mit Trennstrichen (5d, anders als Pillen) */
.certs-list { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0; }
.certs-list__item { color: var(--fg); display: inline-block; overflow-wrap: anywhere; }
.certs-list__item.is-active { color: var(--signal); }
.certs-list__sep { color: var(--line-2); margin: 0 var(--s-1); }
.certs-list__item:not(:last-child)::after { content: " |"; color: var(--muted); }

/* Kununu / Jobs Mini-Bars (4e) */
.mini-bar {
	display: inline-grid; grid-template-columns: max-content 60px max-content;
	align-items: center; gap: var(--s-1);
	font-size: var(--fs-xxs); color: var(--muted);
}
.verzeichnis__table td:has(.mini-bar) { text-align: right; }
.mini-bar { grid-template-columns: max-content 40px max-content; white-space: nowrap; }
.mini-bar__num { color: var(--fg); }
.mini-bar__track { height: 4px; background: var(--line); border: 1px solid var(--line-2); }
.mini-bar__fill { height: 100%; background: var(--signal); display: block; }

.pill {
	display: inline-block; padding: 2px 6px;
	font-size: var(--fs-xxs); text-transform: uppercase; letter-spacing: .06em;
	border: 1px solid var(--line-2); color: var(--muted);
}
.pill--beides { border-color: var(--signal); color: var(--signal); }
.pill--MDR { border-style: dashed; }

.tag {
	display: inline-block; padding: 1px 5px; margin: 1px 2px 1px 0;
	font-size: var(--fs-xxs); letter-spacing: .04em;
	border: 1px solid var(--line-2); color: var(--muted);
}
.dot { display: inline-block; width: 8px; height: 8px; background: var(--fg); }
.dot--signal { background: var(--signal); }
.muted { color: var(--muted); }

/* ==========================================================================
   DRAWER — vollflächige Rechtsspalte (5f)
   ========================================================================== */
.drawer, .wizard {
	border: 0; padding: 0; background: transparent; color: var(--fg);
	max-width: none; max-height: none;
}
.drawer::backdrop, .wizard::backdrop { background: rgba(0, 0, 0, .55); }
.drawer__inner, .wizard__inner {
	background: var(--paper-2); color: var(--fg);
	border-left: 1px solid var(--line-2);
	width: min(560px, 100vw); max-height: 100dvh; overflow: auto;
	position: fixed; top: 0; right: 0; bottom: 0;
}
.drawer__head, .wizard__foot {
	padding: var(--s-4) var(--s-6);
	display: flex; align-items: center; gap: var(--s-3);
	border-bottom: 1px solid var(--line-2);
	position: sticky; top: 0; background: var(--paper-2); z-index: 2;
}
.drawer__head { justify-content: space-between; }
.drawer__head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 500; }
.drawer__close {
	appearance: none; border: 1px solid var(--line-2); background: transparent; color: var(--fg);
	width: 32px; height: 32px; font-size: var(--fs-md); line-height: 1; cursor: pointer;
}
.drawer__close:hover { border-color: var(--signal); color: var(--signal); }
.drawer__body { padding: var(--s-4) var(--s-6) var(--s-8); display: flex; flex-direction: column; gap: 0; }
.drawer__row {
	display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3);
	padding: var(--s-2) 0; border-bottom: 1px solid var(--line);
}
.drawer__row:last-child { border-bottom: 0; }
.drawer__row dt { color: var(--muted); font-size: var(--fs-xxs); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.drawer__row dd { margin: 0; color: var(--fg); font-size: var(--fs-sm); word-break: break-word; }

.wizard__form { padding: var(--s-4) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.wizard__form fieldset { border: 1px solid var(--line-2); padding: var(--s-3) var(--s-4); margin: 0; }
.wizard__form legend { padding: 0 var(--s-2); color: var(--muted); font-size: var(--fs-xxs); letter-spacing: .1em; text-transform: uppercase; }
.wizard__form label { display: inline-flex; align-items: center; gap: var(--s-1); margin: var(--s-1) var(--s-4) var(--s-1) 0; font-size: var(--fs-sm); }
.wizard__foot { border-bottom: 0; border-top: 1px solid var(--line-2); justify-content: flex-end; position: static; }

/* ==========================================================================
   PAGE BODY / LEGAL / METHODIK (einheitliche Prose)
   ========================================================================== */
.page-body { padding: var(--s-8) var(--s-6) var(--s-12); }
.page-body__inner { max-width: var(--content-max); margin: 0 auto; }
.prose { max-width: var(--prose-max); }
.prose > * { max-width: none; }
.prose p, .prose li { color: var(--fg); font-size: var(--fs-base); line-height: 1.6; margin: 0 0 var(--s-3); }
.prose h1 { font-size: var(--fs-xxl); margin: 0 0 var(--s-4); }
.prose h2 { font-size: var(--fs-xl); margin: var(--s-8) 0 var(--s-3); }
.prose h3 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-2); }
.prose .lead { font-size: var(--fs-md); color: var(--muted); }
.prose .muted { color: var(--muted); }
.prose ul, .prose ol { padding-left: var(--s-5); margin: 0 0 var(--s-3); }

.page-legal__head {
	display: flex; align-items: flex-start; gap: var(--s-4);
	padding: var(--s-2) 0 var(--s-6);
	border-bottom: 1px solid var(--line-2); margin-bottom: var(--s-6);
}
.page-legal__identity { display: flex; gap: var(--s-5); align-items: flex-start; }
.page-legal__lede { color: var(--muted); margin: var(--s-1) 0 0; }
.page-legal__section { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.page-legal__section:last-child { border-bottom: 0; }
.page-legal__section h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-2); }

/* ==========================================================================
   FOOTER (nimmt die Notice-Bar mit auf, 4b)
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line-2); background: var(--paper-2); padding: var(--s-8) var(--s-6) var(--s-10); }
.site-footer__inner {
	max-width: var(--content-max); margin: 0 auto;
	display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: var(--s-8); align-items: start;
}
.site-footer__brand { display: flex; gap: var(--s-3); align-items: center; }
.site-footer__title { margin: 0; font-size: var(--fs-md); font-weight: 500; }
.site-footer__note { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--fs-xxs); text-transform: uppercase; letter-spacing: .08em; }
.site-footer__meta p { margin: 0 0 var(--s-1); color: var(--fg); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.site-footer__meta .muted { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.site-footer__nav { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.site-footer__nav a { color: var(--fg); text-decoration: none; }
.site-footer__nav a:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a, .drawer__row dd, .prose a { overflow-wrap: anywhere; }

.site-footer__notice {
	margin-top: var(--s-6);
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--signal);
	background: var(--paper-3);
	font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
	display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
}
.site-footer__notice a { color: var(--signal); }

.four04 { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-16) var(--s-6); }
.four04 h1 { font-size: var(--fs-xxl); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
	.counters__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.counters__grid li:nth-child(5) { border-right: 0; }
	.counters__grid li:nth-child(n+6) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 1023px) {
	.site-header__nav { display: none; }
	.filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.filters__row label { border-right: 0; border-bottom: 1px solid var(--line-2); }
	.site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.hero { padding: var(--s-6) var(--s-5) var(--s-5); }
	.counters { padding: var(--s-3) var(--s-5); }
	.counters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.counters__num { font-size: var(--fs-md); }
	.filters { padding: var(--s-3) var(--s-5); }
	.filters__row { grid-template-columns: 1fr 1fr; }
	.verzeichnis { padding: var(--s-3); }
	.drawer__inner, .wizard__inner {
		width: 100vw; top: auto; height: 94dvh; border-left: 0; border-top: 1px solid var(--line-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0s !important; transition-duration: 0s !important; }
}