/* Behördenkennzahlen: design "amtlich-nüchtern". A calm official-form look: cool grey paper, white sheets with ruled fields,
   one deep authority blue, mono type for the codes themselves. One file, no framework. */

@font-face { font-family: "Atkinson"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
	--paper: #f2f4f7;
	--sheet: #ffffff;
	--ink: #1b2430;
	--ink-2: #44505f;
	--ink-3: #596575;
	--line: #d0d7e0;
	--line-strong: #9aa7b8;
	--blue: #1e3a5f;
	--blue-hover: #14294a;
	--blue-tint: #e8eef6;
	--blue-line: #b9c8dc;
	--mark: #fff3bf;           /* filter hit highlight */
	--font: "Atkinson", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
	--radius: 4px;
	--wrap: 1100px;
	--gutter: clamp(1rem, 4vw, 2rem);
	--step-0: clamp(1.0625rem, 1.03rem + .15vw, 1.1875rem);
	--step-1: clamp(1.25rem, 1.17rem + .35vw, 1.4375rem);
	--step-2: clamp(1.5rem, 1.35rem + .7vw, 1.875rem);
	--step-3: clamp(2rem, 1.6rem + 1.8vw, 3rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; padding-bottom: var(--s8); }
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #0a5bd3; outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--blue); color: #fff; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s4); top: -4rem; z-index: 100; background: var(--blue); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--radius); }
.skip-link:focus { top: var(--s3); }
.sprite { position: absolute; }
.mt5 { margin-top: var(--s5); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--font); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--step-3); letter-spacing: -.02em; }
h2 { font-size: var(--step-1); }
p { margin: 0 0 var(--s4); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.hint { font-size: .95rem; color: var(--ink-3); margin: var(--s3) 0 0; }
.block { padding-block: var(--s6) 0; }
.block > h2 { margin-bottom: var(--s4); }
.textlink { font-weight: 700; }
.plain { padding-left: 1.1em; margin: 0; }
.plain li { margin-bottom: var(--s2); }

/* ---------- Icons, buttons ---------- */
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i--sm { width: .9em; height: .9em; display: inline-block; vertical-align: -.1em; }
.i--back { transform: scaleX(-1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 3rem; padding: .6rem 1.25rem; border: 2px solid var(--blue); border-radius: var(--radius); background: var(--sheet); color: var(--blue); font-weight: 700; text-decoration: none; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }

/* ---------- Top bar and header ---------- */
.topbar { background: var(--blue); color: #dbe5f2; font-size: .85rem; }
.topbar__row { display: flex; justify-content: space-between; gap: var(--s4); padding-block: .35rem; }
.topbar a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.site-header { background: var(--sheet); border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 40; }
.site-header__row { display: flex; align-items: center; gap: var(--s5); min-height: 4.25rem; flex-wrap: wrap; padding-block: var(--s2); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); flex: none; }
.brand__mark { width: 2.25rem; height: 2.25rem; }
.brand__text { font-weight: 700; font-size: 1.2rem; line-height: 1.1; display: grid; letter-spacing: -.01em; }
.brand__text small { font-weight: 400; font-size: .78rem; color: var(--ink-3); letter-spacing: 0; }
.nav { display: flex; gap: var(--s1); margin-left: var(--s3); }
.nav a { padding: .6rem .85rem; text-decoration: none; color: var(--ink-2); font-weight: 700; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--blue); border-bottom-color: var(--blue-line); }
.nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }
.site-header__search { margin-left: auto; width: min(20rem, 100%); }
.nav-toggle { display: none; margin-left: auto; min-width: 2.75rem; min-height: 2.75rem; border: 2px solid var(--blue); border-radius: var(--radius); background: var(--sheet); color: var(--blue); align-items: center; justify-content: center; }

/* ---------- Search ---------- */
.searchform { position: relative; }
.searchform__label { display: block; font-weight: 700; margin-bottom: var(--s2); font-size: .95rem; }
.site-header .searchform__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.searchform__row { display: flex; }
.searchform input[type="search"] { flex: 1; min-width: 0; min-height: 2.75rem; padding: .5rem .9rem; border: 2px solid var(--blue); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--sheet); font-size: 1rem; -webkit-appearance: none; appearance: none; }
.searchform input[type="search"]::placeholder { color: var(--ink-3); }
.searchform .btn { min-height: 2.75rem; border-radius: 0 var(--radius) var(--radius) 0; padding-inline: 1rem; }
.site-header .searchform .btn span { display: none; }
.searchform--big input[type="search"] { min-height: 3.5rem; font-size: 1.25rem; padding-inline: 1.1rem; }
.searchform--big .btn { min-height: 3.5rem; padding-inline: 1.5rem; font-size: 1.1rem; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; margin: 0; padding: var(--s1); list-style: none; background: var(--sheet); border: 2px solid var(--blue); border-radius: var(--radius); box-shadow: 0 10px 24px -10px rgba(27, 36, 48, .35); max-height: 22rem; overflow: auto; }
.suggest a { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: var(--s3); align-items: baseline; padding: .55rem .7rem; text-decoration: none; color: var(--ink); border-radius: 2px; }
.suggest a:hover, .suggest a.is-sel { background: var(--blue-tint); }
.suggest .code { font-family: var(--mono); font-weight: 600; color: var(--blue); }
.suggest .meta { color: var(--ink-3); font-size: .9rem; }
.suggest .none { padding: var(--s3); color: var(--ink-3); }
.suggest .all { display: block; padding: .55rem .7rem; font-weight: 700; border-top: 1px solid var(--line); margin-top: var(--s1); }

/* ---------- Start page ---------- */
.intro { background: var(--sheet); border-bottom: 1px solid var(--line-strong); padding-block: var(--s7); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s7); align-items: center; }
.intro h1 { margin-bottom: var(--s4); }
.intro .lead { margin-bottom: var(--s5); }
.lists3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.listlink { display: grid; grid-template-columns: 1fr auto; gap: .1rem var(--s3); align-items: center; padding: var(--s4) var(--s5); background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.listlink:hover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.listlink__t { font-weight: 700; font-size: var(--step-1); color: var(--blue); }
.listlink__d { grid-column: 1; color: var(--ink-3); font-size: .95rem; }
.listlink .i { grid-row: 1 / span 2; grid-column: 2; color: var(--blue); }
.twocol { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s7); }
.twocol h2 { margin-bottom: var(--s3); }
.faq details { border-top: 1px solid var(--line-strong); background: var(--sheet); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s4); font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--blue); transition: transform .2s ease; }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s4) var(--s4); margin: 0; max-width: 70ch; color: var(--ink-2); }
.schema { margin: 0; }
.schema__svg { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(27, 36, 48, .12)); }
.schema figcaption { margin-top: var(--s3); font-size: .85rem; color: var(--ink-3); text-align: center; }

/* ---------- Page head, crumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: .25rem .6rem; list-style: none; margin: 0; padding: var(--s4) 0 0; font-size: .9rem; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin-right: .6rem; color: var(--line-strong); }
.crumbs a { color: var(--ink-3); }
.pagehead { padding-block: var(--s5) var(--s5); }
.pagehead h1 { margin-bottom: var(--s3); }
.pagehead .lead { margin-bottom: var(--s4); }
.pagehead .searchform { max-width: 40rem; }

/* ---------- Chips, filter ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.chip { display: inline-flex; align-items: baseline; gap: .4rem; min-width: 2.75rem; justify-content: center; padding: .45rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--sheet); font-weight: 700; text-decoration: none; color: var(--ink); font-family: var(--mono); }
.chip small { font-family: var(--font); font-weight: 400; color: var(--ink-3); font-size: .78rem; }
a.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip.is-on small { color: #cfdbec; }
.chip.is-off { color: var(--line-strong); background: transparent; border-style: dashed; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-bottom: var(--s4); }
.filter label { font-weight: 700; }
.filter input { flex: 1 1 16rem; max-width: 24rem; min-height: 2.75rem; padding: .45rem .8rem; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--sheet); -webkit-appearance: none; appearance: none; }
.filter input:focus { border-color: var(--blue); }
.filter__count { color: var(--ink-3); font-size: .95rem; }

/* ---------- Data table ---------- */
.tablewrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 1rem; }
table.data th, table.data td { padding: .6rem .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.data thead th { background: var(--blue-tint); color: var(--blue); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--blue); }
table.data tbody tr:hover td, table.data tbody tr:hover th.code { background: #f6f9fd; }
table.data .code { font-family: var(--mono); font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
table.data .code a { text-decoration: none; padding: .1rem .2rem; border-radius: 2px; }
table.data .code a:hover { background: var(--blue-tint); text-decoration: underline; }
table.data .num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.grp th { background: var(--paper); color: var(--ink-2); font-family: var(--mono); font-size: 1rem; padding: .35rem .9rem; border-bottom: 1px solid var(--line-strong); position: static; text-transform: none; letter-spacing: 0; }
.badge { display: inline-block; min-width: 2.2rem; padding: .05rem .4rem; text-align: center; border: 1px solid var(--blue-line); border-radius: 2px; background: var(--blue-tint); color: var(--blue); font-family: var(--mono); font-size: .8rem; font-weight: 600; }
.badge--rp { background: #fff; border-style: dashed; }
.dash { color: var(--line-strong); }
.missing { color: var(--ink-3); font-style: italic; }
.empty { padding: var(--s6); border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--sheet); }
.empty p:last-child { margin: 0; }
.resultcount { font-weight: 700; margin-bottom: var(--s3); }
mark { background: var(--mark); color: inherit; padding: 0 .1em; }

/* ---------- Detail: the data sheet ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.sheet { background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.sheet__title { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); padding: var(--s3) var(--s5); border-bottom: 2px solid var(--blue); background: var(--blue-tint); }
.fields { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; margin: 0; background: var(--line); }
.field { padding: var(--s4) var(--s5); min-width: 0; background: var(--sheet); }
.field dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: .2rem; }
.field dd { margin: 0; font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
.field dd.mono { font-weight: 600; letter-spacing: .02em; }
.field--code { grid-column: 1 / -1; position: relative; padding-block: var(--s5); }
.field--code dd { font-size: clamp(2.5rem, 2rem + 3vw, 4rem); line-height: 1; color: var(--blue); letter-spacing: .08em; }
.field--code::before, .field--code::after { content: ""; position: absolute; width: .8rem; height: .8rem; border: 0 solid var(--blue); }
.field--code::before { left: var(--s3); top: var(--s3); border-width: 2px 0 0 2px; }
.field--code::after { right: var(--s3); bottom: var(--s3); border-width: 0 2px 2px 0; }
.field--wide { grid-column: 1 / -1; }
.note { margin: 0; padding: var(--s4) var(--s5); background: var(--paper); border-top: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; }
.explain { padding: var(--s5); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); }
.explain h2 { margin-bottom: var(--s3); font-size: 1.15rem; }
.pager { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s6) 0; }
.pager__a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; color: var(--ink); max-width: 48%; }
.pager__a:hover { border-color: var(--blue); }
.pager__a small { display: block; color: var(--ink-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.pager__a .i { color: var(--blue); }
.pager__a--next { margin-left: auto; text-align: right; }

/* ---------- Prose (legal) ---------- */
.prose { max-width: 70ch; padding-bottom: var(--s6); }
.prose h2 { font-size: var(--step-1); margin: var(--s6) 0 var(--s3); }
.prose h3 { margin: var(--s5) 0 var(--s2); }
.prose address { font-style: normal; margin-bottom: var(--s4); }

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; background: var(--blue); color: #dbe5f2; padding-block: var(--s6) var(--s5); font-size: .95rem; }
.site-footer a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: var(--s6); }
.site-footer h2 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: var(--s3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-footer .remote ul { display: grid; gap: .4rem; }
.site-footer__legal { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.2); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between; font-size: .85rem; color: #c5d3e6; }

/* ---------- Responsive ---------- */
@media (max-width: 62rem) {
	.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; margin: 0; padding: var(--s2) var(--gutter) var(--s4); background: var(--sheet); border-bottom: 1px solid var(--line-strong); }
	.nav.is-open { display: flex; }
	.nav a { padding: .9rem .2rem; border-bottom: 1px solid var(--line); }
	.nav-toggle { display: inline-flex; }
	.site-header__search { order: 3; margin-left: 0; width: 100%; }
	.site-header { position: static; }
	.intro__grid, .twocol, .detail { grid-template-columns: 1fr; }
	.intro__side { max-width: 26rem; }
	.lists3 { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 36rem) {
	.topbar__row span { display: none; }
	.fields { grid-template-columns: 1fr; }
	table.data th, table.data td { padding: .55rem .6rem; font-size: .95rem; }
	table.data .col-type { display: none; }
	.site-footer__grid { grid-template-columns: 1fr; }
	.pager { flex-direction: column; }
	.pager__a { max-width: none; }
	.searchform--big .btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; animation: none !important; } }
@media print {
	.topbar, .site-header, .site-footer, .searchform, .chips, .filter, .pager, .nav-toggle { display: none !important; }
	body { background: #fff; }
	.sheet, .explain, .tablewrap { border-color: #000; }
	a { color: #000; text-decoration: none; }
}