@charset "utf-8";
/* Bakenroesterei — assets/css/styles.css
   Von Hand gesetzt: kein Praeprozessor, kein Bundler, keine Minifizierung.
   Was hier steht, ist genau das, was der Browser bekommt.
   Dreizehn Abschnitte in fixer Reihenfolge, technical.md Abschnitt 4.

   Bildidee: Ladeliste. Die Seite ist ein gerastertes Blatt Papier —
   Haarlinien statt Kacheln, Null Radius, keine Schatten, linker Randsteg
   mit Marke und breite Satzspalte rechts. Zahlen laufen tabellarisch und
   stehen rechtsbuendig.

   Schreibweise dieser Datei: eine Regel steht auf einer Zeile; wird sie zu
   lang, laeuft sie ueber mehrere Zeilen und die schliessende Klammer haengt
   an der letzten Deklaration. Gesetzt wird mit logischen Eigenschaften
   (block/inline), nicht mit physischen — der Satzspiegel denkt in Zeile und
   Spalte, nicht in oben und links. */

/* === 01 tokens ============================================================ */
/* Jede Farbe, jeder Grad, jeder Steg steht hier und nirgends sonst.
   Kontraste sind in DESIGN.md nachgerechnet und dort tabelliert. */
:root {
    /* Papier und Druck. */
    --papierton: #E9E4D8;
    --karton: #F2EEE4;
    --lineatur: #C9C2B2;
    --druck: #1B1A16;
    --druck-blass: #5C574A;
    --patina: #2F4B3F;
    --patina-tief: #22382E;
    --messington: #8A6A2F;
    --blanko: #FFFFFF;

    /* Schriften — geladen ueber den Partial fonts, nie selbst gehostet.
       Rollen: schmale Grotesk in den Titeln, Antiqua im Lauftext,
       Schreibmaschine auf allem, was gezaehlt oder gewogen wird. */
    --schrift-titel: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
    --schrift-lauf: "Spectral", Georgia, "Times New Roman", serif;
    --schrift-typ: "Space Mono", ui-monospace, "Courier New", monospace;

    /* Schriftgrade. */
    --grad-1: 0.75rem;
    --grad-2: 0.8125rem;
    --grad-3: 0.9375rem;
    --grad-4: 1.0625rem;
    --grad-5: 1.1875rem;
    --grad-6: 1.375rem;
    --grad-7: 1.875rem;
    --grad-8: 2.25rem;
    --grad-titel: clamp(2rem, 1.3rem + 2.8vw, 3.125rem);
    --grad-aufriss: clamp(2.5rem, 1.35rem + 4.6vw, 4.5rem);

    /* Durchschuss (Zeilenabstand). */
    --durchschuss-eng: 1.06;
    --durchschuss-titel: 1.16;
    --durchschuss-mittel: 1.42;
    --durchschuss-weit: 1.68;

    /* Sperrung (Laufweite). Kein gesperrtes Versal ausser auf Marken. */
    --sperrung-null: 0;
    --sperrung-fein: 0.03em;
    --sperrung-titel: -0.008em;

    /* Schnitte. */
    --schnitt-buch: 400;
    --schnitt-halb: 500;
    --schnitt-kraeftig: 600;
    --schnitt-fett: 700;

    /* Stege. */
    --steg-1: 0.25rem;
    --steg-2: 0.5rem;
    --steg-3: 0.75rem;
    --steg-4: 1.125rem;
    --steg-5: 1.75rem;
    --steg-6: 2.5rem;
    --steg-7: 3.5rem;
    --steg-8: 5.5rem;

    /* Filets (Linienstaerken). */
    --filet-1: 1px;
    --filet-2: 2px;
    --filet-3: 4px;

    /* Masse des Satzspiegels. */
    --blattbreite: 76rem;
    --satzbreite: 66ch;
    --randbreite: 11.5rem;
    --tastfeld: 2.75rem;

    /* Takt. */
    --takt-kurz: 110ms;
    --takt-lang: 210ms;
    --verlauf: cubic-bezier(0.32, 0.06, 0.24, 1);
}

/* === 02 base =============================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

/* overflow-wrap erbt an alle Nachfahren: deutsche Komposita wie
   Verbrauchsteuernummer, E-Mail-Adressen und USt-IdNr. brechen um, statt die
   Zeile zu sprengen. */
body {
    margin: 0; overflow-x: hidden; overflow-wrap: break-word;
    background-color: var(--papierton); color: var(--druck);
    font-family: var(--schrift-lauf); font-size: var(--grad-4);
    font-weight: var(--schnitt-buch); line-height: var(--durchschuss-weit);
    letter-spacing: var(--sperrung-null); -webkit-font-smoothing: antialiased; }

:is(img, picture, iframe, svg, video) { max-inline-size: 100%; }
img { display: block; block-size: auto; background-color: var(--karton); }

hr { border: 0; border-block-start: var(--filet-1) solid var(--lineatur); margin-block: var(--steg-6); }

:target { scroll-margin-block-start: var(--steg-7); }
::selection { background-color: var(--patina); color: var(--blanko); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* === 03 typography ========================================================= */
/* Titel in der schmalen Grotesk, Lauftext in der Antiqua. Das ist die
   Umkehrung der ueblichen Rollenverteilung und traegt das Schriftbild. */
:is(h1, h2, h3, h4) {
    margin-block: 0 var(--steg-3);
    font-family: var(--schrift-titel); line-height: var(--durchschuss-titel);
    letter-spacing: var(--sperrung-titel); color: var(--druck); text-wrap: balance; }

h1 { font-size: var(--grad-titel); font-weight: var(--schnitt-fett); line-height: var(--durchschuss-eng); }
h2 { font-size: var(--grad-7); font-weight: var(--schnitt-fett); }
h3 { font-size: var(--grad-6); font-weight: var(--schnitt-kraeftig); }
h4 { font-size: var(--grad-5); font-weight: var(--schnitt-kraeftig); }

p { margin-block: 0 var(--steg-4); max-inline-size: var(--satzbreite); }
strong { font-weight: var(--schnitt-kraeftig); color: var(--druck); }
small { font-size: var(--grad-3); }

a { color: var(--patina); text-decoration-line: underline; text-decoration-thickness: from-font;
    text-underline-offset: 0.14em; transition: color var(--takt-kurz) var(--verlauf); }

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--filet-3) solid var(--patina); outline-offset: var(--filet-2); }

:is(ul, ol) { margin-block: 0 var(--steg-4); padding-inline-start: var(--steg-5); max-inline-size: var(--satzbreite); }
li { margin-block-end: var(--steg-2); }

blockquote { margin: 0; }
figure { margin: 0 0 var(--steg-5); }
figcaption { margin-block-start: var(--steg-2); color: var(--druck-blass);
    font-size: var(--grad-3); line-height: var(--durchschuss-mittel); }

/* Schreibmaschine bleibt den Zahlen vorbehalten: Preisen, Uhrzeiten,
   Gewichten, Aktenzeichen. Nie im Lauftext, nie in Titeln (Regel E4). */
:is(.ziffer, code, time, kbd) {
    font-family: var(--schrift-typ); font-size: 0.94em;
    font-variant-numeric: tabular-nums; letter-spacing: var(--sperrung-null); }

/* Anriss: der Vorspann eines Abschnitts, Antiqua eine Stufe groesser. */
.anriss { font-size: var(--grad-5); font-weight: var(--schnitt-halb);
    line-height: var(--durchschuss-mittel); max-inline-size: var(--satzbreite); }

/* Stempel: die aufgedruckte Marke ueber einem Block — Jahr, Nummer, Sparte. */
.stempel {
    display: block; margin-block: 0 var(--steg-3);
    padding-block-start: var(--steg-2);
    border-block-start: var(--filet-2) solid var(--messington);
    font-family: var(--schrift-typ); font-size: var(--grad-1);
    letter-spacing: var(--sperrung-fein); text-transform: uppercase;
    color: var(--druck-blass); }

/* === 04 layout ============================================================== */
/* Blatt: der Satzspiegel. Lage: ein Stapelabschnitt darin.
   Rubrik: der tragende Griff des Layouts — schmaler Randsteg mit Marke,
   breite Satzspalte rechts, darueber ein Filet ueber die volle Breite. */
.blatt { inline-size: 100%; max-inline-size: var(--blattbreite); margin-inline: auto;
    padding-inline: var(--steg-4); }

.lage { padding-block: var(--steg-7); }
.lage--nahtlos { padding-block-start: var(--steg-5); }
.lage--getoent { background-color: var(--karton); }

.rubrik {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--steg-4);
    padding-block-start: var(--steg-3);
    border-block-start: var(--filet-2) solid var(--druck); }
.rubrik--fein { border-block-start-width: var(--filet-1); border-block-start-color: var(--lineatur); }
.rubrik + .rubrik { margin-block-start: var(--steg-6); }

.rubrik__rand { display: flex; flex-wrap: wrap; min-inline-size: 0;
    gap: var(--steg-1) var(--steg-4);
    font-family: var(--schrift-typ); font-size: var(--grad-1);
    line-height: var(--durchschuss-mittel); color: var(--druck-blass); }
/* Rechtsseiten tragen Ueberschriften wie Umsatzsteuer-Identifikationsnummer
   oder Verbraucherstreitbeilegung. Als Flex-Kind gilt min-width:auto, also
   sprengt ein unteilbares Kompositum die Zeile: min-inline-size:0 hebt das
   auf, hyphens trennt nach deutschen Regeln, anywhere faengt den Rest. */
.rubrik__marke { margin: 0; max-inline-size: none; min-inline-size: 0;
    hyphens: auto; overflow-wrap: anywhere; text-transform: uppercase;
    letter-spacing: var(--sperrung-fein); }
.rubrik__marke--stark { color: var(--druck); }
.rubrik__satz { min-inline-size: 0; }
/* Ein Randsteg ohne Marke ist ein Fehler, kein Mittel: er wird nicht gesetzt,
   und die Lage laeuft dann ueber die ganze Breite (Zweispalter weiter unten
   greift nur bei gefuelltem Steg). */
.rubrik--voll > .rubrik__rand, .rubrik__rand:empty { display: none; }
.rubrik__satz > :last-child { margin-block-end: 0; }
.rubrik__satz > :is(.beleg, .ausriss, .antrag):first-child { padding-block-start: 0;
    border-block-start: 0; }

/* Faecher: das Regal. Posten liegen darin nebeneinander, getrennt durch
   Haarlinien statt durch Rahmen oder Abstand. */
.faecher { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--steg-6); row-gap: 0; }
.faecher > * { min-inline-size: 0; }

/* Schacht: nur er rollt seitwaerts, der Seitenkoerper nie (Regel F6). */
.schacht { overflow-x: auto; margin-block-end: var(--steg-5); }

/* Liste: die Tabelle ist die Grundform dieser Seite, keine Einlage in eine
   Huelle. Kopf unter Volllinie, Zeilen unter Haarlinie, Zahlen rechts. */
.liste { inline-size: 100%; border-collapse: collapse; text-align: start;
    font-size: var(--grad-4); }
.liste caption { text-align: start; }
.liste :is(th, td) { padding: var(--steg-2) var(--steg-3); vertical-align: top;
    text-align: start; border-block-end: var(--filet-1) solid var(--lineatur); }
.liste :is(th, td):first-child { padding-inline-start: 0; }
.liste :is(th, td):last-child { padding-inline-end: 0; }
.liste thead th {
    font-family: var(--schrift-titel); font-size: var(--grad-3);
    font-weight: var(--schnitt-kraeftig); color: var(--druck-blass);
    border-block: var(--filet-2) solid var(--druck); }
.liste tbody th { font-family: var(--schrift-titel); font-weight: var(--schnitt-kraeftig); }
.liste tbody tr:nth-child(even) { background-color: var(--karton); }
.liste .ziffer { text-align: end; white-space: nowrap; }
/* Kopfzelle oder Textzelle, die in einer Zahlenspalte steht. */
.liste .spalte-zahl { text-align: end; }
/* Varianten steuern nur die Breite. Eine schmale Zwei-Spalten-Liste soll
   nicht ueber den halben Satzspiegel laufen, eine sechsspaltige soll im
   Schacht rollen statt ihre Spalten zu quetschen. Weitere angemeldete
   Haken ohne eigene Regel: --abo, --staffel, --profile, --anlage,
   --ablauf, --konditionen. */
.liste--zeiten { max-inline-size: 26rem; }
.liste--sorten { min-inline-size: 46rem; }
.liste--abo { min-inline-size: 38rem; }
/* Breiten nach Spaltenzahl: die Liste soll im Schacht rollen, nicht in
   unlesbar schmale Spalten gequetscht werden. */
.liste--ablauf { min-inline-size: 26rem; }
.liste--konditionen { min-inline-size: 34rem; }
.liste--staffel { min-inline-size: 34rem; }
.liste--anlage { min-inline-size: 40rem; }
.liste--profile { min-inline-size: 46rem; }
.liste--hinweise { min-inline-size: 30rem; }
.liste--service { min-inline-size: 30rem; }
.liste--aendern { min-inline-size: 26rem; }

/* Plan: der eingebettete Kartenausschnitt. */
.plan { position: relative; inline-size: 100%; aspect-ratio: 16 / 10;
    background-color: var(--karton); border: var(--filet-1) solid var(--lineatur);
    border-block-start: var(--filet-2) solid var(--druck); }
.plan iframe { display: block; inline-size: 100%; block-size: 100%; }

@media (min-width: 560px) {
    .blatt { padding-inline: var(--steg-5); }
    .faecher--zwei, .faecher--drei, .faecher--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .lage { padding-block: var(--steg-8); }
    .lage--nahtlos { padding-block-start: var(--steg-6); }
    .rubrik:has(> .rubrik__rand:not(:empty)) {
        grid-template-columns: var(--randbreite) minmax(0, 1fr); column-gap: var(--steg-6); }
    .rubrik--voll { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .rubrik__rand { flex-direction: column; gap: var(--steg-2); }
    .faecher--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .faecher--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* === 05 header ============================================================== */
.sprung { position: absolute; inset-block-start: var(--steg-2); inset-inline-start: var(--steg-2);
    z-index: 30; translate: 0 -220%; padding: var(--steg-3) var(--steg-4);
    background-color: var(--druck); color: var(--blanko); text-decoration: none;
    font-family: var(--schrift-titel); font-weight: var(--schnitt-kraeftig);
    transition: translate var(--takt-kurz) var(--verlauf); }
.sprung:focus { translate: 0 0; }

/* Der Kopf ist ein Deckblatt aus drei Baendern, keine Menuezeile mit Marke
   links und Punkten rechts: oben das Auskunftsband auf der Patinaplatte,
   darunter die Titelzeile mit dem Signet ueber die volle Breite, unten das
   Register als Inhaltsverzeichnis. Seine Ziffern setzt ein Zaehler, damit
   die Auszeichnung eine schlichte geordnete Liste bleibt. */
.leiste { position: relative; z-index: 20; background-color: var(--papierton);
    border-block-end: var(--filet-2) solid var(--druck); }
/* Die Filets im Kopf sollen genau dort ansetzen, wo der Satz beginnt. Statt
   Innenabstand bekommen die beiden unteren Baender deshalb die Satzbreite
   selbst — Kastenbreite gleich Satzbreite, Rand aussen. */
.leiste__kopf, .leiste__zug {
    inline-size: calc(100% - 2 * var(--steg-4));
    max-inline-size: calc(var(--blattbreite) - 2 * var(--steg-4));
    margin-inline: auto; }

/* Band eins: der Aufdruck auf der Platte. Hier steht Auskunft, nie Navigation
   — die Zeit des Tages, der Ruf, die Einwilligung. */
.leiste__band { background-color: var(--patina); color: var(--blanko); }
.leiste__bandsatz { inline-size: 100%; max-inline-size: var(--blattbreite);
    margin-inline: auto; padding: var(--steg-1) var(--steg-4);
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: var(--steg-5); row-gap: 0; }
.leiste__vermerk { display: flex; align-items: baseline; gap: var(--steg-2);
    margin: 0; max-inline-size: none; font-family: var(--schrift-typ);
    font-size: var(--grad-1); line-height: var(--durchschuss-mittel); }
.leiste__vermerk--schluss { margin-inline-start: auto; }
.leiste__marke { flex: none; text-transform: uppercase; letter-spacing: var(--sperrung-fein); }
/* Weiss auf Patina traegt 9,55:1. Die Verweisfarbe der Seite waere hier Gruen
   auf Gruen, deshalb erbt das Band weder Farbe noch Fokusring. */
.leiste__band a { display: inline-flex; align-items: center; min-block-size: 1.5rem;
    color: var(--blanko); text-decoration-thickness: from-font; }
.leiste__band :focus-visible { outline-color: var(--blanko); }

/* Band zwei: die Titelzeile. Das Signet steht allein auf ganzer Breite, nicht
   als linke Haelfte einer Kopfzeile. */
.leiste__kopf { border-block-end: var(--filet-1) solid var(--lineatur); }
.signet { display: inline-flex; align-items: baseline; gap: var(--steg-2);
    padding-block: var(--steg-3); font-family: var(--schrift-titel);
    font-size: var(--grad-6); font-weight: var(--schnitt-fett);
    line-height: var(--durchschuss-eng); letter-spacing: var(--sperrung-titel);
    color: var(--druck); text-decoration: none; }
.signet__zeichen { flex: none; color: var(--messington); font-size: var(--grad-2); }
.signet__wort { display: inline-block; }

/* Band drei: das Register. Auf dem Telefon steht davor die Klappe mit dem
   Umfang des Registers; aufgeklappt schiebt es den Inhalt nach unten, statt
   ihn zu ueberdecken — ein aufgeschlagenes Verzeichnis verdeckt nichts. */
.leiste__klappe { display: flex; align-items: center; gap: var(--steg-3);
    inline-size: 100%; min-block-size: var(--tastfeld); padding: 0;
    appearance: none; background: none; border: 0; border-radius: 0;
    color: var(--druck); font-family: var(--schrift-titel); font-size: var(--grad-4);
    font-weight: var(--schnitt-kraeftig); text-align: start; cursor: pointer; }
.leiste__klappe-nr { flex: none; font-family: var(--schrift-typ);
    font-size: var(--grad-1); font-variant-numeric: tabular-nums;
    letter-spacing: var(--sperrung-fein); color: var(--druck-blass); }
.leiste__klappe-wort { flex: none; }
.leiste__klappe-zeichen { margin-inline-start: auto; }
.leiste__klappe-zeichen::before { content: "\25BE"; display: block;
    font-family: var(--schrift-typ); font-size: var(--grad-2);
    transition: rotate var(--takt-lang) var(--verlauf); }
.leiste__klappe[aria-expanded="true"] .leiste__klappe-zeichen::before { rotate: 180deg; }

.register { display: none; padding-block-end: var(--steg-3); }
.register.ist-ausgeklappt { display: block; }
.register__folge { counter-reset: register; list-style: none;
    margin: 0; padding: 0; max-inline-size: none; }
.register__folge li { margin-block-end: 0; counter-increment: register; }
.register__folge a { display: flex; align-items: baseline; gap: var(--steg-3);
    min-block-size: var(--tastfeld); padding-block: var(--steg-2);
    border-block-start: var(--filet-1) solid var(--lineatur);
    font-family: var(--schrift-titel); font-size: var(--grad-5);
    font-weight: var(--schnitt-kraeftig); color: var(--druck); text-decoration: none; }
.register__folge a::before { content: counter(register, decimal-leading-zero);
    flex: none; font-family: var(--schrift-typ); font-size: var(--grad-1);
    font-variant-numeric: tabular-nums; letter-spacing: var(--sperrung-fein);
    color: var(--druck-blass); }
.register__folge a[aria-current="page"],
.register__folge a[aria-current="page"]::before { color: var(--patina); }

@media (min-width: 560px) {
    .leiste__bandsatz { padding-inline: var(--steg-5); }
    .leiste__kopf, .leiste__zug {
        inline-size: calc(100% - 2 * var(--steg-5));
        max-inline-size: calc(var(--blattbreite) - 2 * var(--steg-5)); }
}

@media (min-width: 900px) {
    .leiste__klappe { display: none; }
    .register { display: block; padding-block-end: 0; }
    /* Die acht Eintraege stehen ueber die ganze Blattbreite verteilt wie die
       Zeilen eines Inhaltsverzeichnisses, nicht als Block am rechten Rand. */
    .register__folge { display: flex; flex-wrap: wrap;
        justify-content: space-between; column-gap: var(--steg-4); }
    .register__folge a { padding-block: var(--steg-2); border-block-start: 0;
        border-block-end: var(--filet-2) solid transparent; font-size: var(--grad-4); }
    .register__folge a[aria-current="page"] { border-block-end-color: var(--messington); }
}

@media (hover: hover) {
    a:hover { color: var(--patina-tief); }
    .leiste__band a:hover { color: var(--blanko); text-decoration-thickness: var(--filet-2); }
    .leiste__klappe:hover, .register__folge a:hover { color: var(--patina); }
    .signet:hover .signet__wort { color: var(--patina); }
}

/* === 06 footer ============================================================== */
/* Der Fuss ist der Schlussvermerk des Blattes: das Signet auf ganzer Breite,
   darunter drei Zeilen aus Randmarke und Feld — dieselbe Rubrikfigur wie im
   Satzspiegel, keine Batterie aus vier gleichen Spalten. */
.kolophon { margin-block-start: var(--steg-8); background-color: var(--karton);
    border-block-start: var(--filet-3) solid var(--druck); }
.kolophon__satz { inline-size: 100%; max-inline-size: var(--blattbreite);
    margin-inline: auto; padding: var(--steg-5) var(--steg-4) var(--steg-4); }
.kolophon__signet { display: flex; align-items: baseline; gap: var(--steg-2);
    margin-block: 0 var(--steg-4); padding-block-end: var(--steg-3);
    max-inline-size: none; border-block-end: var(--filet-2) solid var(--messington);
    font-family: var(--schrift-titel); font-size: var(--grad-6);
    font-weight: var(--schnitt-fett); letter-spacing: var(--sperrung-titel);
    color: var(--druck); }
.kolophon__block { display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--steg-2) var(--steg-6); padding-block: var(--steg-4); }
.kolophon__block + .kolophon__block { border-block-start: var(--filet-1) solid var(--lineatur); }
.kolophon__rubrik { margin: 0; font-family: var(--schrift-typ);
    font-size: var(--grad-1); font-weight: var(--schnitt-buch);
    letter-spacing: var(--sperrung-fein); text-transform: uppercase;
    color: var(--druck-blass); }
.kolophon__feld { min-inline-size: 0; }
.kolophon__zeile { margin-block: 0 var(--steg-1); max-inline-size: var(--satzbreite);
    font-size: var(--grad-3); line-height: var(--durchschuss-mittel); color: var(--druck-blass); }
.kolophon__zeile:last-child { margin-block-end: 0; }
/* Die Verweisfelder laufen als gesetzte Zeile durch, nicht als Spalte:
   ein Register am Blattfuss, kein zweites Menue. */
.kolophon__folge { display: flex; flex-wrap: wrap; column-gap: var(--steg-5);
    row-gap: 0; list-style: none; margin: 0; padding: 0; max-inline-size: none; }
.kolophon__folge li { margin-block-end: 0; font-size: var(--grad-3); }
/* Tastziele im Kolophon: auf dem Telefon der meistgetippte Bereich der Seite. */
:is(.kolophon__folge, .kolophon__zeile) a { display: inline-flex; align-items: center;
    min-block-size: var(--tastfeld); }
.kolophon__abbinder {
    inline-size: calc(100% - 2 * var(--steg-4));
    max-inline-size: calc(var(--blattbreite) - 2 * var(--steg-4));
    margin: 0 auto; padding-block: var(--steg-4) var(--steg-6);
    border-block-start: var(--filet-2) solid var(--druck);
    font-size: var(--grad-2); line-height: var(--durchschuss-mittel); color: var(--druck-blass); }

@media (min-width: 560px) {
    .kolophon__satz { padding-inline: var(--steg-5); }
    .kolophon__abbinder {
        inline-size: calc(100% - 2 * var(--steg-5));
        max-inline-size: calc(var(--blattbreite) - 2 * var(--steg-5)); }
}

@media (min-width: 900px) {
    .kolophon__block { grid-template-columns: var(--randbreite) minmax(0, 1fr); }
}

/* === 07 hero ================================================================ */
/* Aufriss: kein zentrierter Block mit Bild darunter, sondern ein Kopfsatz.
   Links der Randsteg mit Aktenmarke und Kenndaten, rechts Titel und Anriss;
   das Bild laeuft als Streifen ueber die volle Blattbreite darunter. */
.aufriss { padding-block-start: var(--steg-6);
    border-block-end: var(--filet-1) solid var(--lineatur); }
.aufriss__satz { inline-size: 100%; max-inline-size: var(--blattbreite); margin-inline: auto;
    padding-inline: var(--steg-4); display: grid;
    grid-template-columns: minmax(0, 1fr); gap: var(--steg-4); align-items: start; }
.aufriss__rand:empty { display: none; }
.aufriss__rand { padding-block-start: var(--steg-2);
    border-block-start: var(--filet-2) solid var(--messington); }
.aufriss__stempel { margin: 0 0 var(--steg-2); max-inline-size: none;
    font-family: var(--schrift-typ); font-size: var(--grad-1);
    letter-spacing: var(--sperrung-fein); text-transform: uppercase; color: var(--druck-blass); }
.aufriss__daten { display: flex; flex-wrap: wrap; gap: var(--steg-1) var(--steg-4);
    list-style: none; margin: 0; padding: 0; max-inline-size: none; }
.aufriss__daten li { margin-block-end: 0; font-family: var(--schrift-typ);
    font-size: var(--grad-1); line-height: var(--durchschuss-mittel); color: var(--druck-blass); }
.aufriss__text { min-inline-size: 0; padding-block-start: var(--steg-3);
    border-block-start: var(--filet-2) solid var(--druck); }
.aufriss__titel { margin-block: 0 var(--steg-4); font-size: var(--grad-aufriss);
    font-weight: var(--schnitt-fett); line-height: var(--durchschuss-eng); }
.aufriss__anriss { font-size: var(--grad-5); font-weight: var(--schnitt-halb);
    line-height: var(--durchschuss-mittel); max-inline-size: var(--satzbreite); }
.aufriss__bild { inline-size: 100%; block-size: auto; max-block-size: 26rem;
    margin-block-start: var(--steg-6); aspect-ratio: 21 / 9; object-fit: cover;
    border-block-start: var(--filet-2) solid var(--druck); }

@media (min-width: 900px) {
    .aufriss { padding-block-start: var(--steg-7); }
    .aufriss__satz { padding-inline: var(--steg-5); }
    .aufriss__satz:has(> .aufriss__rand:not(:empty)) {
        grid-template-columns: var(--randbreite) minmax(0, 1fr); column-gap: var(--steg-6); }
    .aufriss__daten { flex-direction: column; gap: var(--steg-2); }
}

/* === 08 cards ================================================================ */
/* Kein Element dieses Abschnitts ist eine Kachel: keine Flaeche, kein Rahmen,
   kein Radius, kein Schatten. Getrennt wird mit Filets. */

/* Posten: der Eintrag in der Ladeliste. */
.posten { display: flex; flex-direction: column; gap: var(--steg-2);
    padding-block: var(--steg-3) var(--steg-5);
    border-block-start: var(--filet-1) solid var(--lineatur); }
.posten__titel { margin: 0; font-size: var(--grad-6); }
.posten__wert { margin: 0; font-family: var(--schrift-typ); font-size: var(--grad-5);
    font-variant-numeric: tabular-nums; color: var(--patina); }
.posten__text { margin: 0; font-size: var(--grad-3); line-height: var(--durchschuss-mittel); }
.posten__herkunft { margin: 0; font-family: var(--schrift-typ); font-size: var(--grad-1);
    letter-spacing: var(--sperrung-fein); text-transform: uppercase; color: var(--druck-blass); }
.posten__probe { margin: 0; font-style: italic; font-size: var(--grad-4);
    line-height: var(--durchschuss-mittel); }
.posten__nachtrag { margin-block: auto 0; padding-block-start: var(--steg-3);
    border-block-start: var(--filet-1) solid var(--lineatur); font-size: var(--grad-3); }
.posten__bild { inline-size: 100%; block-size: auto; margin-block-end: var(--steg-2);
    aspect-ratio: 3 / 2; object-fit: cover; }
/* Ganzflaechig anklickbarer Posten: das ganze Element ist der Verweis, nicht
   ein kleines "mehr" darin (Regel F4). */
.posten--verweis { color: inherit; text-decoration: none;
    transition: border-block-start-color var(--takt-kurz) var(--verlauf); }
.posten--verweis .posten__titel { text-decoration-line: underline;
    text-decoration-thickness: from-font; text-underline-offset: 0.14em; }

/* Signatur: die zeichnende Person unter dem Dokument. */
.signatur { padding-block-start: var(--steg-3);
    border-block-start: var(--filet-1) solid var(--lineatur); }
.signatur__amt { margin-block: 0 var(--steg-1); font-family: var(--schrift-typ);
    font-size: var(--grad-1); letter-spacing: var(--sperrung-fein);
    text-transform: uppercase; color: var(--patina); }
.signatur__nachweis { font-size: var(--grad-3); line-height: var(--durchschuss-mittel);
    color: var(--druck-blass); }

/* Vermerk: die Stimme steht als eingerueckter Aktenvermerk im Dokument —
   Filet darueber, Einzug, Quelle klein darunter. Keine Karte, kein Kasten. */
.vermerk { margin: 0 0 var(--steg-5); padding-block-start: var(--steg-3);
    border-block-start: var(--filet-2) solid var(--messington); }
.vermerk__wort { padding-inline-start: var(--steg-5); font-style: italic;
    font-size: var(--grad-5); line-height: var(--durchschuss-mittel); }
.vermerk__wort p:last-child { margin-block-end: 0; }
.vermerk__quelle { margin-block-start: var(--steg-3); padding-inline-start: var(--steg-5);
    font-family: var(--schrift-typ); font-size: var(--grad-2);
    letter-spacing: var(--sperrung-fein); color: var(--druck-blass); }

/* Beleg: der wiederverwendete Steckbrief — Sorten, Abo, Oeffnungszeiten. */
.beleg { margin-block-end: var(--steg-6); padding-block-start: var(--steg-3);
    border-block-start: var(--filet-2) solid var(--druck); }
.beleg__titel { font-size: var(--grad-7); }
.beleg__notiz { font-size: var(--grad-3); line-height: var(--durchschuss-mittel);
    color: var(--druck-blass); }
.beleg__notiz:last-child { margin-block-end: 0; }
.beleg__weiter { margin-block: var(--steg-4) 0; max-inline-size: none; }

/* Ausriss: der zitierte Ausschnitt eines anderen Dokuments. Numerierung als
   Aktenziffer, damit der Ausschnitt als Zitat lesbar bleibt. */
.ausriss { padding-block: var(--steg-3) var(--steg-5);
    border-block-start: var(--filet-2) solid var(--messington);
    border-block-end: var(--filet-1) solid var(--lineatur); }
.ausriss__titel { font-size: var(--grad-7); }
.ausriss__anriss { font-size: var(--grad-4); color: var(--druck-blass); }
.ausriss__folge { list-style: none; margin-block: 0 var(--steg-4); padding-inline-start: 0;
    counter-reset: ausriss; }
.ausriss__folge > li { position: relative; margin-block-end: var(--steg-4);
    padding-inline-start: var(--steg-6); counter-increment: ausriss; }
.ausriss__folge > li::before { content: counter(ausriss, decimal-leading-zero);
    position: absolute; inset-inline-start: 0; inset-block-start: 0.2em;
    font-family: var(--schrift-typ); font-size: var(--grad-1); color: var(--druck-blass); }
.ausriss__weiter { margin-block: var(--steg-4) 0; max-inline-size: none; }

@media (hover: hover) {
    .posten--verweis:hover { border-block-start-color: var(--druck); }
    .posten--verweis:hover .posten__titel { color: var(--patina); }
    .liste tbody tr:hover { background-color: var(--karton); }
}

/* === 09 buttons ============================================================== */
/* Keine Flaeche, kein Rahmen, kein Paar aus gefuelltem und umrandetem Knopf.
   Die Handlung ist eine Zeile des Dokuments: fuehrendes Zeichen, Unterstrich
   erst bei Beruehrung. Je Abschnitt steht eine Handlung; kommen mehrere
   zusammen, laufen sie als Spalte untereinander (.tatliste). */
.tat {
    display: inline-flex; align-items: baseline; gap: var(--steg-2);
    /* Lange E-Mail-Adressen sind ein einziges unteilbares Wort; in einem
       inline-flex-Kasten richtet sich die Breite nach max-content, wo
       break-word nicht greift. anywhere senkt auch die min-content-Breite. */
    max-inline-size: 100%; overflow-wrap: anywhere;
    min-block-size: var(--tastfeld); padding: var(--steg-2) 0;
    appearance: none; background: none; border: 0; border-radius: 0;
    color: var(--patina); font-family: var(--schrift-titel); font-size: var(--grad-4);
    font-weight: var(--schnitt-kraeftig); line-height: var(--durchschuss-mittel);
    letter-spacing: var(--sperrung-null); text-align: start; text-transform: none;
    text-decoration-line: none; cursor: pointer;
    transition: color var(--takt-kurz) var(--verlauf); }
/* Das fuehrende Zeichen ist ein Messingstrich, kein Pfeil aus der Schrift:
   gezeichnet statt gesetzt, damit es in jeder Schriftlage gleich steht und
   zum Filetwerk des Blattes gehoert. Messington nur als Linie, nie als Text. */
.tat::before { content: ""; flex: none; align-self: center;
    inline-size: var(--steg-4); block-size: var(--filet-2);
    background-color: var(--messington); }
/* Die tragende Handlung eines Bogens steht auf einem Messingstrich, damit sie
   auch ohne Flaeche als Bedienstelle lesbar bleibt. */
.tat--stark { font-size: var(--grad-5); color: var(--druck);
    border-block-end: var(--filet-2) solid var(--messington); }
.tat--stark::before { inline-size: var(--steg-5); }
.tat:is([disabled], [aria-disabled="true"]) { color: var(--druck-blass);
    border-block-end-color: var(--lineatur); cursor: not-allowed; }

/* Spalte aus mehreren Handlungen: je Zeile eine, getrennt durch Haarlinien.
   Zwei Handlungen stehen nie als Paar nebeneinander. */
.tatliste { display: grid; list-style: none; margin-block: var(--steg-4) 0;
    padding: 0; max-inline-size: var(--satzbreite); }
.tatliste > li { margin-block-end: 0;
    border-block-start: var(--filet-1) solid var(--lineatur); }
.tatliste > li:last-child { border-block-end: var(--filet-1) solid var(--lineatur); }
.tatliste .tat { display: flex; inline-size: 100%; }

@media (hover: hover) {
    .tat:hover { color: var(--patina-tief); text-decoration-line: underline;
        text-decoration-thickness: var(--filet-2); text-underline-offset: 0.18em; }
    .tat--stark:hover { color: var(--druck); text-decoration-line: none;
        border-block-end-color: var(--druck); }
    .tat:is([disabled], [aria-disabled="true"]):hover { color: var(--druck-blass);
        text-decoration-line: none; }
}

/* === 10 tabs-filters ========================================================= */
/* Mappe mit Laschen: die Reiter sitzen auf der Kante des Fachs, nicht als
   Pillen darueber. */
.mappe { margin-block-end: var(--steg-5); }
.mappe__laschen { display: flex; flex-wrap: wrap; gap: var(--steg-4);
    border-block-end: var(--filet-2) solid var(--druck); }
.mappe__lasche {
    appearance: none; display: inline-flex; align-items: center;
    min-block-size: var(--tastfeld); padding: var(--steg-2) 0;
    background: none; border: 0; border-block-end: var(--filet-3) solid transparent;
    border-radius: 0; margin-block-end: calc(var(--filet-2) * -1);
    color: var(--druck-blass); font-family: var(--schrift-titel);
    font-size: var(--grad-4); font-weight: var(--schnitt-kraeftig);
    line-height: var(--durchschuss-mittel); cursor: pointer;
    transition: color var(--takt-kurz) var(--verlauf),
        border-color var(--takt-kurz) var(--verlauf); }
.mappe__lasche[aria-selected="true"] { color: var(--druck); border-block-end-color: var(--messington); }
.mappe__fach { padding-block-start: var(--steg-5); }
.mappe__fach[hidden] { display: none; }

.merkmale { display: flex; flex-wrap: wrap; gap: var(--steg-2) var(--steg-4);
    list-style: none; margin: 0 0 var(--steg-4); padding: 0; max-inline-size: none; }
.merkmale li { margin-block-end: 0; font-family: var(--schrift-typ);
    font-size: var(--grad-1); letter-spacing: var(--sperrung-fein);
    text-transform: uppercase; color: var(--druck-blass); }

@media (hover: hover) {
    .mappe__lasche:hover { color: var(--druck); border-block-end-color: var(--lineatur); }
}

/* === 11 forms ================================================================ */
/* Der Antrag ist ein Formularbogen, kein Kasten auf einer Flaeche. */
.antrag { padding-block-start: var(--steg-3);
    border-block-start: var(--filet-2) solid var(--druck); }
.antrag__titel { font-size: var(--grad-7); }
.antrag__anriss { font-size: var(--grad-4); color: var(--druck-blass);
    max-inline-size: var(--satzbreite); }

.bogen { display: grid; gap: var(--steg-4); max-inline-size: var(--satzbreite); }
.bogen > .tat { justify-self: start; }
.bogen__zeile { display: flex; flex-direction: column; gap: var(--steg-1); }
.bogen__aufschrift { font-family: var(--schrift-titel); font-size: var(--grad-3);
    font-weight: var(--schnitt-kraeftig); line-height: var(--durchschuss-mittel);
    color: var(--druck); }
.bogen__muss { color: var(--patina); }
.bogen__feld {
    inline-size: 100%; min-block-size: var(--tastfeld); padding: var(--steg-2) var(--steg-3);
    background-color: var(--blanko); border: var(--filet-1) solid var(--druck-blass);
    border-radius: 0; color: var(--druck); font-family: var(--schrift-lauf);
    font-size: var(--grad-4); line-height: var(--durchschuss-mittel);
    transition: border-color var(--takt-kurz) var(--verlauf); }
.bogen__feld--weit { resize: vertical; }
.bogen__feld:focus-visible { border-color: var(--patina); }
.bogen__feld[aria-invalid="true"] { border-color: var(--messington); border-width: var(--filet-2); }
/* Beanstandungen werden am Rand angestrichen, nicht rot gefaerbt: die
   Palette dieses Projekts kennt kein Signalrot. */
.bogen__ruege { margin: 0; max-inline-size: none; padding-inline-start: var(--steg-2);
    border-inline-start: var(--filet-2) solid var(--messington);
    font-family: var(--schrift-typ); font-size: var(--grad-2);
    line-height: var(--durchschuss-mittel); color: var(--druck); }
.bogen__ruege[hidden] { display: none; }

.bogen__zeile--einwilligung { display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--steg-3); align-items: start; }
.bogen__kasten { inline-size: 1.5rem; block-size: 1.5rem; accent-color: var(--patina);
    margin: var(--steg-3) var(--steg-2) var(--steg-3) var(--steg-2); }
.bogen__aufschrift--kasten { padding-block: var(--steg-3); font-family: var(--schrift-lauf);
    font-size: var(--grad-3); font-weight: var(--schnitt-buch); }
.bogen__zeile--einwilligung .bogen__ruege { grid-column: 1 / -1; }

/* Koeder: fuer Menschen und Screenreader entfernt, fuer Bots sichtbar. */
.bogen__koeder { position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.bogen__quittung { margin: 0; max-inline-size: none; min-block-size: var(--steg-5);
    font-family: var(--schrift-typ); font-size: var(--grad-2);
    line-height: var(--durchschuss-mittel); color: var(--druck-blass); }
.bogen__quittung[data-lage="fehler"] { padding-inline-start: var(--steg-2);
    border-inline-start: var(--filet-3) solid var(--messington); color: var(--druck); }
.bogen__schutzhinweis { margin: 0; max-inline-size: var(--satzbreite);
    font-size: var(--grad-2); line-height: var(--durchschuss-mittel); color: var(--druck-blass); }

.grecaptcha-badge { visibility: hidden !important; }

/* === 12 modals ================================================================ */
.tafel[hidden] { display: none; }
.tafel { position: fixed; inset: 0; z-index: 40; display: flex;
    align-items: center; justify-content: center; padding: var(--steg-4); }
.tafel__verhang { position: absolute; inset: 0; background-color: var(--druck); opacity: 0.76; }
.tafel__kasten { position: relative; z-index: 1; inline-size: 100%;
    max-inline-size: var(--satzbreite); max-block-size: 84vh; overflow-y: auto;
    padding: var(--steg-5); background-color: var(--karton);
    border: var(--filet-1) solid var(--lineatur);
    border-block-start: var(--filet-3) solid var(--druck); }
.tafel__zeile { display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--steg-4); margin-block-end: var(--steg-4); }
.tafel__titel { margin-block-end: 0; }
.tafel__zu { appearance: none; display: inline-flex; align-items: center;
    justify-content: center; min-inline-size: var(--tastfeld); min-block-size: var(--tastfeld);
    padding: var(--steg-1) var(--steg-3); background: none;
    border: var(--filet-1) solid var(--druck); border-radius: 0; color: var(--druck);
    font-family: var(--schrift-typ); font-size: var(--grad-5); cursor: pointer;
    transition: background-color var(--takt-kurz) var(--verlauf); }
body.ist-gesperrt { overflow: hidden; }

@media (hover: hover) { .tafel__zu:hover { background-color: var(--papierton); } }

/* === 13 utilities ============================================================= */
.nur-vorlesen { position: absolute; inline-size: 1px; block-size: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.leise { color: var(--druck-blass); }
.hervor { color: var(--patina); }
.mittig { text-align: center; }
.schmal { max-inline-size: var(--satzbreite); }
.blankfolge { list-style: none; margin: 0; padding: 0; max-inline-size: none; }
.blankfolge li { margin-block-end: var(--steg-2); }

.luft-oben-4 { margin-block-start: var(--steg-4); }
.luft-oben-6 { margin-block-start: var(--steg-6); }
.luft-unten-6 { margin-block-end: var(--steg-6); }

/* Kennung: regulatorische Nummern — Kaffeesteuer, LUCID, DE-OEKO,
   Verbrauchsteuer — stehen als Datenzeile, nicht als Fliesstext. */
.kennung { display: inline-block; padding-inline-start: var(--steg-2);
    border-inline-start: var(--filet-3) solid var(--messington);
    font-family: var(--schrift-typ); font-size: var(--grad-1);
    letter-spacing: var(--sperrung-fein); color: var(--druck-blass); }