/*
 * teilungserklaerung-online.de
 * Gestaltungswelt "Schließplan": Planpapier aus Nickelgrau, Stahl als Tinte,
 * Messing als Fläche, Schlüsselkappen-Farben je Einheit.
 * Kein Build-Schritt. Tokens oben, Komponenten darunter, in Lesereihenfolge.
 */

/* ---------------------------------------------------------------
   Schrift: Archivo (OFL 1.1), variabel in Breite und Stärke,
   selbst gehostet. Eine Familie, drei Stimmen:
   schmal (62-72 %) für Matrixköpfe, normal für Text,
   breit (118-125 %) für geprägte Ziffern.
   --------------------------------------------------------------- */
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    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: "Archivo";
    src: url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
    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;
}

/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Papier: Nickel, leicht grünlich, nie Reinweiß */
    --papier: #e4e6e1;
    --papier-hell: #eff1ec;
    --papier-weiss: #fafbf8;
    --raster: #d0d4cd;
    --raster-stark: #a8ada5;

    /* Stahl: Tinte */
    --stahl: #17191a;
    --stahl-2: #3a3f40;
    --stahl-3: #545a5b;
    --stahl-4: #7d8382;

    /* Messing: die Pflichtfläche */
    --messing: #c9a03d;
    --messing-tief: #a47f22;
    --messing-dunkel: #3b2f0e;
    --messing-hell: #ecdcae;
    --messing-zart: #f4ecd3;

    /* Schlüsselkappen: nur für Einheiten */
    --kappe-1: #b23a28;
    --kappe-2: #2d7549;
    --kappe-3: #2b5c99;
    --kappe-4: #774796;
    --kappe-5: #ad5616;
    --kappe-6: #1d7880;

    /* Zustände */
    --fehler: #a3241a;
    --fehler-hell: #f5dcd6;
    --gut: #2a6a3c;
    --gut-hell: #d9eadb;

    /* Schrift */
    --schrift: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
    --schmal: 68%;
    --breit: 122%;

    --t-mini: 0.8125rem;
    --t-klein: 0.9375rem;
    --t-text: 1.125rem;
    --t-vorspann: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
    --t-titel: clamp(1.25rem, 1.12rem + 0.4vw, 1.4375rem);
    --t-ueber: clamp(1.75rem, 1.35rem + 1.5vw, 2.625rem);
    --t-gross: clamp(2.375rem, 1.55rem + 3.3vw, 4.375rem);
    --t-praegung: clamp(3rem, 2rem + 4.4vw, 5.75rem);

    /* Abstand, 4er-Raster */
    --a1: 0.25rem;
    --a2: 0.5rem;
    --a3: 0.75rem;
    --a4: 1rem;
    --a5: 1.5rem;
    --a6: 2rem;
    --a7: 3rem;
    --a8: 4rem;
    --a9: 6rem;
    --a10: 8rem;

    --rand: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);
    --breite: 77.5rem;
    --mass: 68ch;

    /* Form */
    --r-klein: 3px;
    --r: 6px;
    --strich: 1.5px;

    /* Tiefe: Versatz plus weiche Unschärfe */
    --schatten-1: 0 1px 2px rgb(23 25 26 / 0.12), 0 2px 6px rgb(23 25 26 / 0.06);
    --schatten-2: 0 6px 14px -4px rgb(23 25 26 / 0.22), 0 14px 30px -10px rgb(23 25 26 / 0.18);

    /* Bewegung */
    --aus: cubic-bezier(0.16, 1, 0.3, 1);
    --kurz: 160ms;
    --mittel: 260ms;
    --lang: 480ms;
}

[data-e="1"] { --e: var(--kappe-1); }
[data-e="2"] { --e: var(--kappe-2); }
[data-e="3"] { --e: var(--kappe-3); }
[data-e="4"] { --e: var(--kappe-4); }
[data-e="5"] { --e: var(--kappe-5); }
[data-e="6"] { --e: var(--kappe-6); }

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--a8);
    scrollbar-color: var(--stahl-4) var(--papier);
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--stahl);
    font-family: var(--schrift);
    font-size: var(--t-text);
    font-weight: 400;
    line-height: 1.6;
    overflow-wrap: break-word;
    font-kerning: normal;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--stahl);
}

::selection {
    background: var(--messing);
    color: var(--stahl);
}

img,
svg {
    display: block;
    max-width: 100%;
}

svg {
    height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
    margin: 0;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    hyphens: manual;
}

h3,
h4 {
    letter-spacing: 0;
}

p,
li,
dd {
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--messing-tief);
    transition: text-decoration-color var(--kurz) var(--aus), text-decoration-thickness var(--kurz) var(--aus);
}

a:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2.5px;
}

:focus-visible {
    outline: 3px solid var(--stahl);
    outline-offset: 3px;
    border-radius: 2px;
}

.fuss :focus-visible,
.auf-stahl :focus-visible {
    outline-color: var(--messing);
}

strong,
b {
    font-weight: 680;
}

small {
    font-size: var(--t-klein);
}

abbr[title] {
    text-decoration: underline dotted 1px;
    text-underline-offset: 0.2em;
    cursor: help;
}

hr {
    border: 0;
    border-top: 1px solid var(--raster-stark);
    margin: var(--a7) 0;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sprung {
    position: absolute;
    left: var(--a4);
    top: -100px;
    z-index: 100;
    padding: var(--a3) var(--a4);
    background: var(--stahl);
    color: var(--papier-hell);
    font-weight: 650;
    border-radius: var(--r);
    text-decoration: none;
}

.sprung:focus {
    top: var(--a3);
}

/* Ziffern: tabellarisch überall, wo gerechnet wird */
.ziffern,
table,
.preis,
.stempel,
.bruch {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Geprägte Ziffern: breite Archivo */
.stempel {
    font-stretch: var(--breit);
    font-weight: 720;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Schmale Versalien für Matrixköpfe und Feldbeschriftungen im Plan */
.versal {
    font-stretch: var(--schmal);
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--t-klein);
    line-height: 1.2;
}

/* ---------------------------------------------------------------
   Rahmen und Raster
   --------------------------------------------------------------- */
.rahmen {
    width: 100%;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
}

.rahmen--schmal {
    max-width: calc(52rem + 2 * var(--rand));
}

/* Planpapier: feines Raster für Bögen und Werkzeugflächen */
.planpapier {
    background-color: var(--papier-hell);
    background-image:
        linear-gradient(var(--raster) 1px, transparent 1px),
        linear-gradient(90deg, var(--raster) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
}

.abschnitt {
    padding-block: 3.5rem;
}

@media (min-width: 48rem) {
    .abschnitt {
        padding-block: 6rem;
    }
}

.abschnitt + .abschnitt {
    border-top: 1px solid var(--raster-stark);
}

.abschnitt__kopf {
    display: grid;
    gap: var(--a4);
    max-width: 46rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.abschnitt__kopf h2 {
    font-size: var(--t-ueber);
}

.abschnitt__kopf p {
    font-size: var(--t-vorspann);
    color: var(--stahl-2);
    line-height: 1.5;
}

.vorspann {
    font-size: var(--t-vorspann);
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   Kopf
   --------------------------------------------------------------- */
.kopf {
    position: relative;
    z-index: 20;
    background: var(--papier);
    border-bottom: 1px solid var(--raster-stark);
}

.kopf__innen {
    display: flex;
    align-items: center;
    gap: var(--a5);
    min-height: 4.5rem;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: var(--a3);
    color: var(--stahl);
    text-decoration: none;
    flex-shrink: 0;
}

.marke svg {
    width: auto;
    height: 2.25rem;
}

.marke__wort {
    display: grid;
    line-height: 1;
}

.marke__wort b {
    font-weight: 780;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.marke__wort span {
    font-stretch: var(--schmal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    color: var(--stahl-3);
    margin-top: 0.3em;
}

.nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--a5);
}

.nav__liste {
    display: flex;
    gap: var(--a1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__liste a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--a3);
    font-weight: 560;
    font-size: 1rem;
    text-decoration: none;
    border-radius: var(--r-klein);
    transition: background-color var(--kurz) var(--aus);
}

.nav__liste a:hover {
    background: var(--papier-hell);
}

.nav__liste a[aria-current="page"] {
    background: var(--stahl);
    color: var(--papier-hell);
}

/* Mobiles Menü: <details>, ohne Skript bedienbar */
.menue {
    display: none;
    margin-left: auto;
    position: relative;
}

.menue > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
    min-height: 2.75rem;
    padding: 0 var(--a4);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r);
    font-weight: 650;
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
}

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

.menue > summary svg {
    width: 1.125rem;
}

.menue[open] > summary {
    background: var(--stahl);
    color: var(--papier-hell);
}

.menue__flaeche {
    position: absolute;
    right: 0;
    top: calc(100% + var(--a2));
    width: min(20rem, calc(100vw - 2 * var(--rand)));
    padding: var(--a3);
    background: var(--papier-weiss);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r);
    box-shadow: var(--schatten-2);
}

.menue__flaeche ul {
    list-style: none;
    margin: 0 0 var(--a3);
    padding: 0;
}

.menue__flaeche a:not(.knopf) {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 var(--a3);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--raster);
}

.menue__flaeche .knopf {
    width: 100%;
}

@media (max-width: 60rem) {
    .nav {
        display: none;
    }

    .menue {
        display: block;
    }
}

/* ---------------------------------------------------------------
   Knöpfe
   --------------------------------------------------------------- */
.knopf {
    --k-grund: var(--stahl);
    --k-text: var(--papier-hell);
    --k-rand: var(--stahl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--a3);
    min-height: 3.25rem;
    padding: 0 var(--a5);
    background: var(--k-grund);
    color: var(--k-text);
    border: var(--strich) solid var(--k-rand);
    border-radius: var(--r);
    font: inherit;
    font-weight: 680;
    font-size: 1.0625rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--kurz) var(--aus),
        box-shadow var(--mittel) var(--aus),
        transform var(--mittel) var(--aus);
}

.knopf svg {
    width: 1.25rem;
    flex-shrink: 0;
    transition: transform var(--mittel) var(--aus);
}

.knopf:hover {
    --k-grund: #000;
    box-shadow: var(--schatten-2);
    transform: translateY(-1px);
}

.knopf:hover svg {
    transform: translateX(3px);
}

.knopf:active {
    transform: translateY(0);
    box-shadow: var(--schatten-1);
}

.knopf--klein {
    min-height: 2.75rem;
    padding: 0 var(--a4);
    font-size: 1rem;
}

.knopf--gross {
    min-height: 3.75rem;
    padding: 0 var(--a6);
    font-size: 1.1875rem;
}

.knopf--leer {
    --k-grund: transparent;
    --k-text: var(--stahl);
}

.knopf--leer:hover {
    --k-grund: var(--stahl);
    --k-text: var(--papier-hell);
}

.knopf--messing {
    --k-grund: var(--messing);
    --k-text: var(--stahl);
    --k-rand: var(--messing);
}

.knopf--messing:hover {
    --k-grund: var(--messing-hell);
}

.knopf[disabled],
.knopf[aria-disabled="true"] {
    --k-grund: var(--raster);
    --k-text: var(--stahl-3);
    --k-rand: var(--raster-stark);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Ladezustand: Knopf bleibt lesbar, Ring dreht */
.knopf[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
}

.knopf[aria-busy="true"]::before {
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: drehen 0.8s linear infinite;
}

.knopf[aria-busy="true"] svg {
    display: none;
}

@keyframes drehen {
    to {
        transform: rotate(360deg);
    }
}

.textlink {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
    font-weight: 640;
}

.textlink svg {
    width: 1rem;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Auftakt (Startseite, erster Bildschirm): Messingfeld
   --------------------------------------------------------------- */
.auftakt {
    --loch: var(--messing);
    background: var(--messing);
    color: var(--stahl);
    padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
    border-bottom: var(--strich) solid var(--stahl);
}

.auftakt__raster {
    display: grid;
    grid-template-columns: minmax(0, 5.25fr) minmax(0, 6.75fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
}

.auftakt__text {
    display: grid;
    gap: var(--a5);
    padding-top: var(--a2);
}

.auftakt h1 {
    font-size: clamp(2.25rem, 1.3rem + 2.7vw, 3.625rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.auftakt .vorspann {
    color: var(--messing-dunkel);
    max-width: 34rem;
}

.auftakt__wege {
    display: grid;
    gap: var(--a4);
    margin-top: var(--a2);
}

.auftakt__belege,
.belege {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--a2) var(--a5);
    font-size: var(--t-klein);
    color: var(--messing-dunkel);
}

.auftakt__belege a,
.auftakt .belege a {
    color: var(--stahl);
    text-decoration-color: var(--stahl);
}

@media (max-width: 68rem) {
    .auftakt__raster {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------
   Schlüsselanhänger: die Wegkarte
   Ein Schild mit runder Lochseite, geprägter Nummer und Fakten.
   --------------------------------------------------------------- */
.anhaenger {
    --loch-grund: var(--loch, var(--papier));
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 var(--a3);
    min-height: 6.5rem;
    padding: var(--a4) var(--a5) var(--a4) var(--a3);
    background: var(--papier-weiss);
    color: var(--stahl);
    border: var(--strich) solid var(--stahl);
    border-radius: 3.25rem var(--r) var(--r) 3.25rem;
    text-decoration: none;
    transform-origin: 1.875rem 50%;
    transition:
        transform var(--lang) var(--aus),
        box-shadow var(--mittel) var(--aus),
        background-color var(--kurz) var(--aus);
}

/* Lochung: echtes Loch in der Fläche dahinter */
.anhaenger::before {
    content: "";
    grid-column: 1;
    justify-self: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--loch-grund);
    border: var(--strich) solid var(--stahl);
    box-shadow: inset 0 2px 3px rgb(23 25 26 / 0.35);
}

.anhaenger__nr {
    grid-column: 2;
    font-size: 2.25rem;
    color: var(--stahl);
}

.anhaenger__text {
    grid-column: 3;
    display: grid;
    gap: var(--a1);
    min-width: 0;
}

.anhaenger__titel {
    hyphens: auto;
    font-size: var(--t-titel);
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.anhaenger__fakt {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--a3);
    font-size: var(--t-klein);
    color: var(--stahl-2);
    line-height: 1.4;
}

.anhaenger__fakt .preis {
    font-weight: 700;
    color: var(--stahl);
}

.anhaenger__pfeil {
    grid-column: 4;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--stahl);
    color: var(--papier-hell);
    transition: transform var(--mittel) var(--aus), background-color var(--kurz) var(--aus);
}

.anhaenger__pfeil svg {
    width: 1.25rem;
}

a.anhaenger:hover {
    transform: rotate(-1.4deg);
    box-shadow: var(--schatten-2);
}

a.anhaenger:hover .anhaenger__pfeil {
    transform: translateX(3px);
    background: #000;
}

a.anhaenger:focus-visible {
    outline-offset: 4px;
    border-radius: 3.25rem var(--r) var(--r) 3.25rem;
}

@media (max-width: 30rem) {
    .anhaenger {
        grid-template-columns: 2.5rem 1.75rem minmax(0, 1fr);
        padding-right: var(--a4);
        border-radius: 2.5rem var(--r) var(--r) 2.5rem;
        transform-origin: 1.25rem 50%;
    }

    .anhaenger::before {
        width: 1.125rem;
        height: 1.125rem;
    }

    .anhaenger__nr {
        font-size: 1.75rem;
    }

    .anhaenger__pfeil {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Planbogen: Plan und Schließplan auf einem Blatt
   --------------------------------------------------------------- */
.bogen {
    position: relative;
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    background-color: var(--papier-hell);
    box-shadow: var(--schatten-2);
    color: var(--stahl);
}

.bogen__flaeche {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 0;
}

.bogen__plan {
    padding: var(--a5) var(--a4) var(--a4) var(--a5);
    border-right: 1px solid var(--raster-stark);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--a4);
}

.bogen__plan .bogen__anteil {
    padding-top: var(--a4);
    border-top: var(--strich) solid var(--stahl);
}

.bogen__matrix {
    padding: var(--a4) var(--a5) var(--a4) var(--a4);
    overflow-x: auto;
}

/* Prägung: der aufgerufene Anteil, monumental */
.bogen__anteil {
    display: grid;
    gap: var(--a1);
}

.bogen__anteil .bruch {
    font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
    letter-spacing: -0.02em;
}

.bruch small {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.375rem;
    letter-spacing: 0;
    color: var(--stahl-2);
}

.bogen__anteil .versal {
    color: var(--stahl-3);
}

/* Schriftfeld des Bogens */
.bogen__schriftfeld {
    display: grid;
    grid-template-columns: auto 1fr auto;
    border-top: var(--strich) solid var(--stahl);
    font-size: var(--t-mini);
}

.bogen__schriftfeld > * {
    padding: var(--a2) var(--a4);
    line-height: 1.35;
}

.bogen__schriftfeld > * + * {
    border-left: 1px solid var(--stahl);
}

.bogen__schriftfeld .versal {
    font-size: var(--t-mini);
}

@media (max-width: 47.5rem) {
    .bogen__flaeche {
        grid-template-columns: minmax(0, 1fr);
    }

    .bogen__plan {
        border-right: 0;
        border-bottom: 1px solid var(--raster-stark);
        padding: var(--a4);
    }

    .bogen__matrix {
        padding: var(--a3) var(--a3) var(--a4);
    }

    .bogen__schriftfeld {
        grid-template-columns: 1fr auto;
    }

    .bogen__schriftfeld > :first-child {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--stahl);
    }

    .bogen__schriftfeld > :nth-child(2) {
        border-left: 0;
    }
}

/* ---------------------------------------------------------------
   Plan (SVG): Schnitt oder Grundriss mit nummerierten Einheiten
   --------------------------------------------------------------- */
.plan {
    width: 100%;
    font-family: var(--schrift);
}

.plan .wand {
    fill: none;
    stroke: var(--stahl);
    stroke-width: 4;
    stroke-linejoin: miter;
}

.plan .linie {
    fill: none;
    stroke: var(--stahl);
    stroke-width: 1.5;
}

.plan .boden {
    fill: url(#schraffur);
    stroke: var(--stahl);
    stroke-width: 1.5;
}

.plan .mass {
    fill: none;
    stroke: var(--stahl-3);
    stroke-width: 1;
}

.plan .mass-text {
    fill: var(--stahl-2);
    font-size: 11px;
    font-stretch: 68%;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.plan .plan-text {
    fill: var(--stahl-2);
    font-size: 12px;
    font-stretch: 68%;
    font-weight: 640;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan .einheit {
    cursor: pointer;
    outline: none;
}

.plan .einheit__flaeche {
    fill: var(--e);
    fill-opacity: 0.13;
    stroke: var(--e);
    stroke-width: 3;
    transition: fill-opacity var(--mittel) var(--aus), opacity var(--mittel) var(--aus);
}

.plan .einheit__flaeche--snr {
    stroke-width: 2;
    stroke-dasharray: 4 3;
}

.plan .einheit__kreis {
    fill: var(--e);
    transition: transform var(--mittel) var(--aus);
    transform-box: fill-box;
    transform-origin: center;
}

.plan .einheit__nr {
    fill: #fff;
    font-size: 14px;
    font-weight: 760;
    font-stretch: 122%;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.plan .einheit:hover .einheit__flaeche,
.plan .einheit:focus-visible .einheit__flaeche {
    fill-opacity: 0.28;
}

.plan .einheit:focus-visible .einheit__flaeche {
    stroke: var(--stahl);
    stroke-width: 4;
}

.plan .einheit.ist-aufgerufen .einheit__flaeche {
    fill-opacity: 0.34;
    stroke-width: 4;
}

.plan .einheit.ist-aufgerufen .einheit__kreis {
    transform: scale(1.18);
}

.plan .einheit.ist-gedimmt .einheit__flaeche {
    fill-opacity: 0;
    stroke: var(--stahl-4);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.plan .einheit.ist-gedimmt .einheit__kreis {
    fill: var(--stahl-4);
}

/* ---------------------------------------------------------------
   Schließplan: die Matrix
   Zeilen = Räume, Spalten = Einheiten.
   Gefüllter Punkt = gehört dazu. Leerer Ring = gehört nicht dazu.
   --------------------------------------------------------------- */
.schliessplan {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--t-klein);
    line-height: 1.25;
}

.schliessplan caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: var(--a3);
}

.schliessplan th,
.schliessplan td {
    padding: 0;
    border-bottom: 1px solid var(--raster-stark);
    vertical-align: middle;
}

.schliessplan thead th {
    border-bottom: var(--strich) solid var(--stahl);
    padding-bottom: var(--a2);
    vertical-align: bottom;
}

.schliessplan thead .ecke {
    text-align: left;
    font-stretch: var(--schmal);
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--stahl-3);
    font-size: var(--t-mini);
}

/* Spaltenkopf: Schlüssel mit farbiger Kappe */
.schluessel {
    display: grid;
    justify-items: center;
    gap: var(--a1);
    width: 100%;
    min-width: 2.75rem;
    padding: var(--a1) 0 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: var(--r-klein);
}

.schluessel__kappe {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 2.25rem;
    border-radius: 0.9375rem 0.9375rem 0.375rem 0.375rem;
    background: var(--e);
    color: #fff;
    font-stretch: var(--breit);
    font-weight: 760;
    font-size: 0.9375rem;
    line-height: 1;
    transition: transform var(--mittel) var(--aus), background-color var(--mittel) var(--aus);
}

.schluessel__name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-stretch: var(--schmal);
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--t-mini);
    color: var(--stahl-2);
    min-height: 4.5rem;
    text-align: left;
}

.schluessel:hover .schluessel__kappe {
    transform: translateY(-2px);
}

.schluessel[aria-pressed="true"] .schluessel__kappe {
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--papier-hell), 0 0 0 4.5px var(--e);
}

.schliessplan tbody th[scope="row"] {
    text-align: left;
    font-weight: 500;
    padding: 0.4375rem var(--a3) 0.4375rem 0;
    min-width: 9rem;
}

.schliessplan tbody th[scope="row"] small {
    display: inline;
    margin-left: 0.3em;
    color: var(--stahl-3);
    font-size: var(--t-mini);
}

.schliessplan .gruppe th {
    padding: var(--a3) 0 var(--a1);
    border-bottom: 1px solid var(--stahl);
    font-stretch: var(--schmal);
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: var(--t-mini);
    text-align: left;
}

.schliessplan td {
    text-align: center;
    transition: background-color var(--mittel) var(--aus);
}

/* Der Punkt und der Ring: Leerstelle ist gezeichnet, nie leer */
.punkt {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--e, var(--stahl));
    transition: transform var(--mittel) var(--aus), background-color var(--mittel) var(--aus), box-shadow var(--mittel) var(--aus);
    transition-delay: var(--verzug, 0ms);
}

.punkt--leer {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--stahl-4);
    width: 0.75rem;
    height: 0.75rem;
}

.punkt--halb {
    background: linear-gradient(90deg, var(--e, var(--stahl)) 50%, transparent 50%);
    box-shadow: inset 0 0 0 1.5px var(--e, var(--stahl));
}

.schliessplan .anteile th,
.schliessplan .anteile td {
    border-bottom: 0;
    border-top: var(--strich) solid var(--stahl);
    padding-top: var(--a3);
}

.schliessplan .anteile th {
    text-align: left;
}

.schliessplan .anteile td {
    padding-inline: 0.3rem;
    font-stretch: var(--breit);
    font-weight: 720;
    font-size: 0.9375rem;
    color: var(--stahl);
}

@media (max-width: 30rem) {
    .schliessplan .anteile td {
        padding-inline: 0.2rem;
        font-size: 0.8125rem;
        font-stretch: 108%;
    }
}

.schliessplan .anteile td small {
    display: block;
    font-stretch: 100%;
    font-weight: 500;
    font-size: 0.6875rem;
    color: var(--stahl-3);
}

/* Aufruf einer Einheit: ihre Spalte leuchtet, die anderen werden Leerstelle */
.schliessplan td.ist-aufgerufen {
    background: var(--messing-zart);
}

.schliessplan td.ist-aufgerufen .punkt:not(.punkt--leer) {
    transform: scale(1.25);
    box-shadow: 0 0 0 3px var(--messing-zart), 0 0 0 4.5px var(--e);
}

.schliessplan td.ist-gedimmt .punkt:not(.punkt--leer) {
    background: transparent;
    box-shadow: inset 0 0 0 2.5px var(--e);
}

.schliessplan td.ist-gedimmt {
    color: var(--stahl-4);
}

.schliessplan.hat-aufruf .schluessel[aria-pressed="false"] .schluessel__kappe {
    background: var(--stahl-4);
}

@media (max-width: 30rem) {
    .schliessplan tbody th[scope="row"] {
        min-width: 7rem;
        font-size: var(--t-mini);
    }

    .schluessel {
        min-width: 2.25rem;
    }

    .schluessel__kappe {
        width: 1.625rem;
        height: 2rem;
    }

    .schluessel__name {
        min-height: 3.75rem;
    }

    .punkt {
        width: 0.875rem;
        height: 0.875rem;
    }

    .punkt--leer {
        width: 0.625rem;
        height: 0.625rem;
    }
}

/* Legende unter Matrix und Plan */
.legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2) var(--a4);
    margin: var(--a3) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-mini);
    color: var(--stahl-2);
}

.legende li {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
}

/* ---------------------------------------------------------------
   Begriffe: Definitionsmatrix mit Signatur
   --------------------------------------------------------------- */
.begriffe {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: var(--strich) solid var(--stahl);
}

.begriff {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 17.5rem) minmax(0, 1fr);
    gap: var(--a5);
    align-items: start;
    padding: var(--a5) 0;
    border-bottom: 1px solid var(--raster-stark);
}

.begriff__zeichen {
    width: 5.5rem;
    height: auto;
    color: var(--stahl);
}

.begriff dt {
    font-weight: 740;
    font-size: var(--t-titel);
    line-height: 1.2;
    letter-spacing: -0.012em;
}

.begriff dd {
    color: var(--stahl-2);
    max-width: var(--mass);
}

@media (max-width: 47.5rem) {
    .begriff {
        grid-template-columns: 4rem minmax(0, 1fr);
        gap: var(--a2) var(--a4);
    }

    .begriff__zeichen {
        width: 4rem;
        grid-row: span 2;
    }
}

/* ---------------------------------------------------------------
   Weg-Abschnitt: Leistung im Detail (zweispaltig, kein Kartenraster)
   --------------------------------------------------------------- */
.weg {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
}

.weg__text {
    display: grid;
    gap: var(--a5);
}

.weg__text h2 {
    font-size: var(--t-ueber);
    display: flex;
    align-items: baseline;
    gap: var(--a4);
}

.weg__text h2 .stempel {
    font-size: 0.9em;
    color: var(--messing-tief);
}

.weg__text > p {
    max-width: var(--mass);
    color: var(--stahl-2);
}

@media (max-width: 60rem) {
    .weg {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Preistafel: geprägtes Schild */
.preistafel {
    display: grid;
    gap: var(--a4);
    padding: var(--a5);
    background: var(--papier-weiss);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r);
    box-shadow: var(--schatten-1);
}

.preistafel__preis {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--a2) var(--a3);
}

.preistafel__preis .stempel {
    font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
}

.preistafel__preis small {
    color: var(--stahl-2);
}

.preistafel .daten {
    border-top: 1px solid var(--raster-stark);
}

/* Datenliste: Zeilen wie im Plan */
.daten {
    display: grid;
    margin: 0;
}

.daten > div {
    display: grid;
    grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr);
    gap: var(--a4);
    padding: var(--a3) 0;
    border-bottom: 1px solid var(--raster-stark);
    font-size: var(--t-klein);
}

.daten dt {
    font-stretch: var(--schmal);
    font-weight: 640;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--stahl-3);
    font-size: var(--t-mini);
    padding-top: 0.15em;
}

.daten dd {
    font-weight: 560;
}

/* Lieferliste: Punkt-Signatur statt Häkchen-Icons */
.liste {
    display: grid;
    gap: var(--a3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--a3);
    align-items: baseline;
}

.liste li::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--stahl);
    transform: translateY(0.05em);
}

.liste li.ist-offen::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--stahl-4);
}

/* Ablauf: nummerierte Stationen, die Nummer trägt die Reihenfolge */
.ablauf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--strich) solid var(--stahl);
    counter-reset: station;
}

.ablauf li {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--a2);
    padding: var(--a5) var(--a5) var(--a5) 0;
    counter-increment: station;
}

.ablauf li + li {
    padding-left: var(--a5);
    border-left: 1px solid var(--raster-stark);
}

.ablauf li::before {
    content: counter(station);
    font-stretch: var(--breit);
    font-weight: 720;
    font-size: 2rem;
    line-height: 1;
    color: var(--stahl);
}

.ablauf h3 {
    font-size: 1.125rem;
    line-height: 1.25;
}

.ablauf p {
    font-size: var(--t-klein);
    color: var(--stahl-2);
}

.ablauf .ist-unser {
    background: var(--messing-zart);
}

.ablauf .ist-unser::before {
    color: var(--messing-tief);
}

.ablauf .zustaendig {
    font-stretch: var(--schmal);
    font-weight: 640;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--t-mini);
    color: var(--stahl-3);
}

@media (max-width: 47.5rem) {
    .ablauf li,
    .ablauf li + li {
        padding: var(--a4) 0 var(--a4) var(--a4);
        border-left: 0;
        border-bottom: 1px solid var(--raster-stark);
        grid-template-columns: 2.75rem minmax(0, 1fr);
        column-gap: var(--a3);
    }

    .ablauf li::before {
        grid-row: span 3;
        font-size: 1.75rem;
    }
}

/* ---------------------------------------------------------------
   Werkzeug-Anriss auf der Startseite: zwei ungleiche Flächen
   --------------------------------------------------------------- */
.werkbank {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--a5);
}

.werkbank > * {
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    display: grid;
    gap: var(--a4);
    align-content: start;
}

.werkbank h3 {
    font-size: var(--t-titel);
}

.werkbank p {
    color: var(--stahl-2);
}

@media (max-width: 60rem) {
    .werkbank {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------
   Beleg, Hinweis
   --------------------------------------------------------------- */
.beleg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--a5);
    align-items: end;
    padding-block: var(--a6);
    border-block: var(--strich) solid var(--stahl);
}

.beleg__satz {
    font-size: var(--t-ueber);
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.beleg__satz .stempel {
    font-size: 1.15em;
    letter-spacing: -0.02em;
}

.beleg__satz small {
    display: block;
    margin-top: var(--a3);
    font-size: var(--t-klein);
    font-weight: 450;
    letter-spacing: 0;
    color: var(--stahl-3);
}

@media (max-width: 47.5rem) {
    .beleg {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hinweis {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--a3);
    padding: var(--a4) var(--a5) var(--a4) var(--a4);
    background: var(--messing-zart);
    border: 1px solid var(--messing-tief);
    border-radius: var(--r);
    font-size: var(--t-klein);
    line-height: 1.5;
    color: var(--stahl);
}

.hinweis > svg {
    width: 1.5rem;
    margin-top: 0.05em;
    color: var(--messing-dunkel);
}

.hinweis strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.15em;
}

.hinweis--leise {
    background: transparent;
    border-color: var(--raster-stark);
}

.hinweis--leise > svg {
    color: var(--stahl-3);
}

.hinweis--fehler {
    background: var(--fehler-hell);
    border-color: var(--fehler);
}

.hinweis--fehler > svg {
    color: var(--fehler);
}

.hinweis--gut {
    background: var(--gut-hell);
    border-color: var(--gut);
}

.hinweis--gut > svg {
    color: var(--gut);
}

/* Auf Messing: Hinweis wird zur Plakette */
.auftakt .hinweis {
    background: rgb(250 251 248 / 0.55);
    border-color: var(--messing-dunkel);
}

/* Bewertung: Sterne als eigene Maske, kein Fremdlogo */
.bewertung {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--a1) var(--a3);
    color: inherit;
    text-decoration: none;
}

.bewertung > span:not(.sterne):not(.sr-only) {
    text-decoration-line: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    text-decoration-color: currentColor;
}

.bewertung:hover > span:not(.sterne):not(.sr-only) {
    text-decoration-thickness: 2.5px;
}

.sterne {
    --wert: 5;
    display: inline-block;
    flex-shrink: 0;
    width: 6em;
    height: 1.2em;
    background: linear-gradient(90deg, currentColor calc(var(--wert) / 5 * 100%), var(--stahl-4) 0);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.06 6.56.92-4.77 4.6 1.15 6.52L12 17.5l-5.88 3.1 1.15-6.52-4.77-4.6 6.56-.92z'/%3E%3C/svg%3E") left center / 1.2em 1.2em repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.06 6.56.92-4.77 4.6 1.15 6.52L12 17.5l-5.88 3.1 1.15-6.52-4.77-4.6 6.56-.92z'/%3E%3C/svg%3E") left center / 1.2em 1.2em repeat-x;
}

.auftakt .sterne {
    background: linear-gradient(90deg, var(--stahl) calc(var(--wert) / 5 * 100%), var(--messing-tief) 0);
}

.beleg .bewertung {
    font-size: var(--t-vorspann);
    line-height: 1.35;
}

.beleg .sterne {
    color: var(--messing-tief);
}

/* ---------------------------------------------------------------
   Fragen (FAQ)
   --------------------------------------------------------------- */
.fragen {
    border-top: var(--strich) solid var(--stahl);
    max-width: 56rem;
}

.frage {
    border-bottom: 1px solid var(--raster-stark);
}

.frage > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: var(--a4);
    align-items: center;
    padding: var(--a5) 0;
    font-weight: 680;
    font-size: var(--t-titel);
    line-height: 1.3;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
}

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

.frage > summary::after {
    content: "";
    justify-self: end;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--stahl);
    background:
        linear-gradient(var(--stahl), var(--stahl)) center / 0.75rem 1.5px no-repeat,
        linear-gradient(var(--stahl), var(--stahl)) center / 1.5px 0.75rem no-repeat;
    transition: transform var(--mittel) var(--aus), background-color var(--kurz) var(--aus);
}

.frage[open] > summary::after {
    transform: rotate(45deg);
    background-color: var(--messing);
}

.frage > summary:hover::after {
    background-color: var(--messing-hell);
}

.frage__antwort {
    padding: 0 3rem var(--a5) 0;
    color: var(--stahl-2);
    max-width: var(--mass);
    display: grid;
    gap: var(--a3);
}

/* ---------------------------------------------------------------
   Abschluss: Messingband mit beiden Wegen
   --------------------------------------------------------------- */
.abschluss {
    --loch: var(--messing);
    background: var(--messing);
    border-block: var(--strich) solid var(--stahl);
    padding-block: 3rem;
}

@media (min-width: 48rem) {
    .abschluss {
        padding-block: 5.5rem;
    }
}

.abschluss__raster {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.abschluss h2 {
    font-size: var(--t-ueber);
}

.abschluss p {
    color: var(--messing-dunkel);
    margin-top: var(--a3);
}

.abschluss__wege {
    display: grid;
    gap: var(--a4);
}

@media (max-width: 60rem) {
    .abschluss__raster {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------
   Fuß: Schriftfeld eines Plans
   --------------------------------------------------------------- */
.fuss {
    padding-block: var(--a8) var(--a6);
    background: var(--papier);
    font-size: var(--t-klein);
}

.schriftfeld {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    background: var(--papier-hell);
}

.schriftfeld__zelle {
    padding: var(--a4) var(--a5) var(--a5);
    display: grid;
    align-content: start;
    gap: var(--a3);
    min-width: 0;
}

.schriftfeld__zelle + .schriftfeld__zelle {
    border-left: 1px solid var(--stahl);
}

.schriftfeld h2 {
    font-stretch: var(--schmal);
    font-weight: 660;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: var(--t-mini);
    color: var(--stahl-3);
    line-height: 1.2;
}

.schriftfeld ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--a1);
}

.schriftfeld a:not(.marke) {
    text-decoration-color: var(--raster-stark);
    display: inline-block;
    padding-block: 0.2rem;
}

.schriftfeld__betreiber {
    font-weight: 640;
}

.schriftfeld__fusszeile {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--a2) var(--a5);
    padding: var(--a3) var(--a5);
    border-top: 1px solid var(--stahl);
    font-size: var(--t-mini);
    color: var(--stahl-3);
}

@media (max-width: 60rem) {
    .schriftfeld {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .schriftfeld__zelle:first-child {
        grid-column: 1 / -1;
    }

    .schriftfeld__zelle + .schriftfeld__zelle {
        border-left: 0;
        border-top: 1px solid var(--stahl);
    }

    .schriftfeld__zelle:nth-child(3) {
        border-left: 1px solid var(--stahl);
    }

    .schriftfeld__zelle:nth-child(4) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 40rem) {
    .schriftfeld {
        grid-template-columns: minmax(0, 1fr);
    }

    .schriftfeld__zelle:nth-child(3) {
        border-left: 0;
    }
}

/* ---------------------------------------------------------------
   Seitenkopf für Unterseiten (Formular, Werkzeug, Ratgeber)
   --------------------------------------------------------------- */
.seitenkopf {
    padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(1.75rem, 1rem + 2vw, 3rem);
    border-bottom: var(--strich) solid var(--stahl);
}

.seitenkopf h1 {
    font-size: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem);
    font-weight: 790;
    letter-spacing: -0.025em;
    line-height: 1.08;
    max-width: 32ch;
}

.seitenkopf .vorspann {
    margin-top: var(--a4);
    color: var(--stahl-2);
    max-width: 44rem;
}

.pfad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2);
    margin: 0 0 var(--a4);
    padding: 0;
    list-style: none;
    font-size: var(--t-mini);
    color: var(--stahl-3);
}

.pfad li + li::before {
    content: "/";
    margin-right: var(--a2);
    color: var(--raster-stark);
}

.pfad a {
    color: var(--stahl-2);
    text-decoration-color: var(--raster-stark);
}

/* ---------------------------------------------------------------
   Bestellung (Operate)
   --------------------------------------------------------------- */
.bestellung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
    padding-block: var(--a7) var(--a9);
}

@media (max-width: 64rem) {
    .bestellung {
        grid-template-columns: minmax(0, 1fr);
    }
}

.formular {
    display: grid;
    gap: var(--a7);
    min-width: 0;
}

/* Schritt: Fieldset mit geprägter Nummer */
.schritt {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    display: grid;
    gap: var(--a5);
}

.schritt > legend {
    display: flex;
    align-items: baseline;
    gap: var(--a3);
    width: 100%;
    padding: 0 0 var(--a3);
    margin-bottom: var(--a5);
    border-bottom: var(--strich) solid var(--stahl);
    font-size: var(--t-titel);
    font-weight: 760;
    letter-spacing: -0.012em;
    line-height: 1.2;
}

.schritt > legend .stempel {
    font-size: 1.375rem;
    min-width: 1.5em;
}

.schritt > legend .optional {
    margin-left: auto;
    font-stretch: var(--schmal);
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--t-mini);
    color: var(--stahl-3);
}

.schritt__hilfe {
    margin-top: calc(-1 * var(--a3));
    color: var(--stahl-2);
    font-size: var(--t-klein);
    max-width: var(--mass);
}

.zeile {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--a4);
}

.zeile > .feld {
    grid-column: span 12;
}

.zeile > .b-3 { grid-column: span 3; }
.zeile > .b-4 { grid-column: span 4; }
.zeile > .b-5 { grid-column: span 5; }
.zeile > .b-6 { grid-column: span 6; }
.zeile > .b-8 { grid-column: span 8; }
.zeile > .b-9 { grid-column: span 9; }

@media (max-width: 40rem) {
    .zeile > .b-6,
    .zeile > .b-8,
    .zeile > .b-9 {
        grid-column: span 12;
    }

    .zeile > .b-4 { grid-column: span 5; }
    .zeile > .b-8.mit-plz { grid-column: span 7; }
    .zeile > .b-3 { grid-column: span 4; }
    .zeile > .b-9.mit-nr { grid-column: span 8; }
}

/* Feld */
.feld {
    display: grid;
    gap: var(--a2);
    align-content: start;
    min-width: 0;
}

.feld__label {
    font-weight: 640;
    font-size: 1rem;
    line-height: 1.3;
}

.feld__label .optional {
    font-weight: 450;
    color: var(--stahl-3);
}

.feld__hilfe {
    font-size: var(--t-klein);
    color: var(--stahl-3);
    line-height: 1.45;
}

.eingabe,
.auswahl,
.textfeld {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 0.875rem;
    background: var(--papier-weiss);
    color: var(--stahl);
    border: var(--strich) solid var(--stahl-3);
    border-radius: var(--r-klein);
    font: inherit;
    font-size: 1.0625rem;
    line-height: 1.4;
    transition: border-color var(--kurz) var(--aus), box-shadow var(--kurz) var(--aus), background-color var(--kurz) var(--aus);
}

.eingabe::placeholder,
.textfeld::placeholder {
    color: var(--stahl-3);
    opacity: 1;
}

.eingabe:hover,
.auswahl:hover,
.textfeld:hover {
    border-color: var(--stahl);
}

.eingabe:focus-visible,
.auswahl:focus-visible,
.textfeld:focus-visible {
    outline: 3px solid var(--stahl);
    outline-offset: 2px;
    border-color: var(--stahl);
    background: #fff;
}

.textfeld {
    min-height: 7rem;
    resize: vertical;
}

.auswahl {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2317191a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.25rem;
}

.eingabe[readonly] {
    background: var(--papier-hell);
    border-style: dashed;
}

/* Fehler am Feld */
.feld.hat-fehler .eingabe,
.feld.hat-fehler .auswahl,
.feld.hat-fehler .textfeld,
.eingabe[aria-invalid="true"] {
    border-color: var(--fehler);
    border-width: 2px;
    background: #fffafa;
}

.feld__fehler {
    display: flex;
    gap: var(--a2);
    align-items: flex-start;
    color: var(--fehler);
    font-weight: 600;
    font-size: var(--t-klein);
    line-height: 1.4;
}

.feld__fehler svg {
    width: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.1em;
}

/* Fehlerübersicht oben im Formular */
.fehlerliste {
    display: grid;
    gap: var(--a3);
    padding: var(--a5);
    background: var(--fehler-hell);
    border: 2px solid var(--fehler);
    border-radius: var(--r);
}

.fehlerliste h2 {
    font-size: 1.1875rem;
    letter-spacing: 0;
    color: var(--fehler);
    display: flex;
    gap: var(--a2);
    align-items: center;
}

.fehlerliste h2 svg {
    width: 1.375rem;
}

.fehlerliste ul {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--a1);
}

.fehlerliste a {
    color: var(--fehler);
    font-weight: 600;
    text-decoration-color: currentColor;
}

/* Wahl: Leistung als Anhänger-Radio */
.wahl {
    display: grid;
    gap: var(--a3);
}

.wahl__option {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: var(--a1) var(--a4);
    align-items: center;
    padding: var(--a4) var(--a5) var(--a4) var(--a4);
    background: var(--papier-weiss);
    border: var(--strich) solid var(--stahl-3);
    border-radius: 2.5rem var(--r) var(--r) 2.5rem;
    cursor: pointer;
    transition: border-color var(--kurz) var(--aus), background-color var(--kurz) var(--aus), box-shadow var(--mittel) var(--aus);
}

.wahl__option:hover {
    border-color: var(--stahl);
    box-shadow: var(--schatten-1);
}

.wahl__option input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Das Loch des Anhängers ist der Radiopunkt */
.wahl__loch {
    grid-row: span 2;
    justify-self: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--stahl);
    background: var(--papier);
    transition: background-color var(--kurz) var(--aus), box-shadow var(--kurz) var(--aus);
}

.wahl__titel {
    font-weight: 720;
    font-size: 1.125rem;
    line-height: 1.25;
}

.wahl__info {
    grid-column: 2;
    font-size: var(--t-klein);
    color: var(--stahl-2);
    line-height: 1.4;
}

.wahl__info--dauer {
    font-weight: 600;
    color: var(--stahl);
}

.wahl__option--fest .wahl__preis {
    grid-row: 1 / span 3;
}

.wahl__preis {
    grid-column: 3;
    grid-row: 1 / span 2;
    text-align: right;
    font-stretch: var(--breit);
    font-weight: 720;
    font-size: 1.25rem;
    line-height: 1.1;
}

.wahl__preis small {
    display: block;
    font-stretch: 100%;
    font-weight: 450;
    font-size: var(--t-mini);
    color: var(--stahl-3);
}

.wahl__option:has(input:checked) {
    border-color: var(--stahl);
    border-width: 2px;
    background: var(--messing-zart);
}

.wahl__option:has(input:checked) .wahl__loch {
    background: var(--stahl);
    box-shadow: inset 0 0 0 4px var(--messing-zart), 0 0 0 1.5px var(--stahl);
}

.wahl__option:has(input:focus-visible) {
    outline: 3px solid var(--stahl);
    outline-offset: 3px;
}

@media (max-width: 30rem) {
    .wahl__option {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        padding-right: var(--a4);
    }

    .wahl__preis {
        grid-column: 2;
        grid-row: auto;
        text-align: left;
        margin-top: var(--a1);
    }
}

/* Punktwahl: Radio und Checkbox in der Welt der Matrix */
.optionen {
    display: grid;
    gap: var(--a2);
}

.optionen--zweispaltig {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.option {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--a3);
    align-items: start;
    padding: var(--a3) var(--a4) var(--a3) var(--a3);
    border-radius: var(--r-klein);
    cursor: pointer;
    line-height: 1.45;
    transition: background-color var(--kurz) var(--aus);
}

.option:hover {
    background: var(--papier-hell);
}

.option input {
    appearance: none;
    margin: 0.0625rem 0 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    box-shadow: inset 0 0 0 1.5px var(--stahl);
    background: var(--papier-weiss);
    cursor: pointer;
    transition: background-color var(--kurz) var(--aus), box-shadow var(--kurz) var(--aus);
}

.option input[type="radio"] {
    border-radius: 50%;
}

.option input[type="checkbox"] {
    border-radius: var(--r-klein);
}

.option input[type="radio"]:checked {
    background: var(--stahl);
    box-shadow: inset 0 0 0 5px var(--papier-weiss), 0 0 0 1.5px var(--stahl);
}

.option input[type="checkbox"]:checked {
    background: var(--stahl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c9a03d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
    box-shadow: none;
}

.option input:focus-visible {
    outline: 3px solid var(--stahl);
    outline-offset: 3px;
}

.option--rahmen {
    border: var(--strich) solid var(--raster-stark);
    background: var(--papier-weiss);
}

.option--rahmen:has(input:checked) {
    border-color: var(--stahl);
    background: var(--messing-zart);
}

.option--pflicht {
    padding-block: var(--a4);
    border-bottom: 1px solid var(--raster);
    border-radius: 0;
}

.feld.hat-fehler .option input {
    box-shadow: inset 0 0 0 2px var(--fehler);
}

.option__zusatz {
    display: block;
    font-size: var(--t-klein);
    color: var(--stahl-3);
}

/* Aufklappbarer Volltext (z. B. Vollmacht) */
.volltext {
    border: 1px solid var(--raster-stark);
    border-radius: var(--r-klein);
    background: var(--papier-weiss);
    font-size: var(--t-klein);
}

.volltext > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--a3);
    padding: var(--a3) var(--a4);
    font-weight: 640;
    cursor: pointer;
    list-style: none;
}

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

.volltext > summary::after {
    content: "";
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--stahl);
    background:
        linear-gradient(var(--stahl), var(--stahl)) center / 0.625rem 1.5px no-repeat,
        linear-gradient(var(--stahl), var(--stahl)) center / 1.5px 0.625rem no-repeat;
    transition: transform var(--mittel) var(--aus);
}

.volltext[open] > summary::after {
    transform: rotate(45deg);
    background-color: var(--messing);
}

.volltext > div {
    padding: 0 var(--a4) var(--a4);
    color: var(--stahl-2);
    display: grid;
    gap: var(--a2);
}

/* Summe: Abrechnungsbogen, klebt auf großen Schirmen */
.summe {
    position: sticky;
    top: var(--a5);
    display: grid;
    gap: var(--a4);
    padding: var(--a5);
    background: var(--papier-weiss);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    box-shadow: var(--schatten-1);
}

.summe h2 {
    font-size: 1.1875rem;
}

.summe__zeilen {
    margin: 0;
    display: grid;
    font-size: var(--t-klein);
}

.summe__zeilen > div {
    display: flex;
    justify-content: space-between;
    gap: var(--a4);
    padding: var(--a2) 0;
    border-bottom: 1px solid var(--raster);
}

.summe__zeilen dt {
    color: var(--stahl-2);
}

.summe__zeilen dd {
    font-weight: 620;
    text-align: right;
}

.summe__gesamt {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--a4);
    padding-top: var(--a3);
    border-top: var(--strich) solid var(--stahl);
}

.summe__gesamt span:first-child {
    font-weight: 700;
}

.summe__gesamt .stempel {
    font-size: 1.875rem;
}

.summe__fein {
    font-size: var(--t-mini);
    color: var(--stahl-3);
    line-height: 1.45;
}

@media (max-width: 64rem) {
    .summe {
        position: static;
        order: -1;
    }
}

.abschicken {
    display: grid;
    gap: var(--a4);
    padding-top: var(--a5);
    border-top: var(--strich) solid var(--stahl);
}

.abschicken__betrag {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--a4);
    flex-wrap: wrap;
}

.abschicken__betrag .stempel {
    font-size: 2rem;
}

.abschicken .knopf {
    width: 100%;
}

/* Ergebnis-Bögen: Danke, Zahlung offen */
.ergebnis {
    display: grid;
    gap: var(--a5);
    max-width: 46rem;
    padding: 2rem;
    background: var(--papier-weiss);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    box-shadow: var(--schatten-1);
}

.ergebnis__marke {
    display: flex;
    align-items: center;
    gap: var(--a4);
}

.ergebnis__marke svg {
    width: 3.5rem;
    flex-shrink: 0;
}

.ergebnis h2 {
    font-size: var(--t-ueber);
}

.ergebnis__nr {
    display: inline-grid;
    gap: var(--a1);
    padding: var(--a3) var(--a4);
    border: 1px dashed var(--stahl-3);
    border-radius: var(--r-klein);
    justify-self: start;
}

.ergebnis__nr .stempel {
    font-size: 1.5rem;
}

.ergebnis--offen {
    background: var(--messing-zart);
}

/* Musterzustände im Entwurf */
.zustaende {
    display: grid;
    gap: var(--a7);
    padding-block: var(--a8);
    border-top: var(--strich) solid var(--stahl);
}

.zustaende > h2 {
    font-size: var(--t-ueber);
}

.zustand {
    display: grid;
    gap: var(--a4);
}

.zustand > h3 {
    font-stretch: var(--schmal);
    font-weight: 660;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: var(--t-mini);
    color: var(--stahl-3);
}

/* ---------------------------------------------------------------
   Werkzeuge (Operate): MEA-Rechner, Aufteilungs-Check
   --------------------------------------------------------------- */
.werkzeug {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 0;
    margin-block: var(--a7) var(--a8);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    background: var(--papier-weiss);
    box-shadow: var(--schatten-1);
}

.werkzeug--rechner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.werkzeug__eingabe {
    padding: 1.5rem;
    border-right: var(--strich) solid var(--stahl);
    display: grid;
    gap: var(--a5);
    align-content: start;
    min-width: 0;
}

.werkzeug__ausgabe {
    padding: 1.5rem;
    display: grid;
    gap: var(--a5);
    align-content: start;
    min-width: 0;
}

.werkzeug h2 {
    font-size: var(--t-titel);
}

@media (min-width: 64rem) {
    .werkzeug__eingabe,
    .werkzeug__ausgabe {
        padding: 2.25rem;
    }
}

@media (max-width: 60rem) {
    .werkzeug {
        grid-template-columns: minmax(0, 1fr);
    }

    .werkzeug__eingabe {
        border-right: 0;
        border-bottom: var(--strich) solid var(--stahl);
    }
}

/* MEA-Eingabetabelle */
.mea-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-klein);
}

.mea-tabelle th {
    text-align: left;
    font-stretch: var(--schmal);
    font-weight: 640;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--t-mini);
    color: var(--stahl-3);
    padding: 0 var(--a2) var(--a2) 0;
    border-bottom: var(--strich) solid var(--stahl);
}

.mea-tabelle td {
    padding: var(--a2) var(--a2) var(--a2) 0;
    border-bottom: 1px solid var(--raster);
    vertical-align: middle;
}

.mea-tabelle td:first-child {
    width: 2.25rem;
}

.mea-tabelle .eingabe {
    min-height: 2.75rem;
    padding: 0.5rem 0.625rem;
    font-size: 1rem;
}

.mea-tabelle .eingabe--zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    max-width: 7.5rem;
}

.mea-tabelle tfoot td {
    border-bottom: 0;
    border-top: var(--strich) solid var(--stahl);
    padding-top: var(--a3);
    font-weight: 680;
}

.kappe {
    display: inline-grid;
    place-items: center;
    width: 1.625rem;
    height: 2rem;
    border-radius: 0.8125rem 0.8125rem 0.3125rem 0.3125rem;
    background: var(--e, var(--stahl-3));
    color: #fff;
    font-stretch: var(--breit);
    font-weight: 760;
    font-size: 0.8125rem;
    line-height: 1;
}

.entfernen {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--stahl-3);
    border-radius: var(--r-klein);
    cursor: pointer;
}

.entfernen svg {
    width: 1.125rem;
}

.entfernen:hover {
    background: var(--fehler-hell);
    color: var(--fehler);
}

/* Schlüsselleiste: 1.000 Anteile als segmentierter Balken */
.leiste {
    display: flex;
    height: 3rem;
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    overflow: hidden;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--raster-stark) calc(10% - 1px) 10%),
        var(--papier-hell);
}

.leiste__teil {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 0;
    background: var(--e);
    color: #fff;
    font-stretch: var(--breit);
    font-weight: 740;
    font-size: 0.8125rem;
    border-right: 2px solid var(--papier-weiss);
    overflow: hidden;
}

.leiste__teil:last-child {
    border-right: 0;
}

.leiste__skala {
    display: flex;
    justify-content: space-between;
    margin-top: var(--a2);
    font-size: var(--t-mini);
    color: var(--stahl-3);
    font-variant-numeric: tabular-nums;
}

.ergebnis-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-klein);
}

.ergebnis-tabelle caption {
    text-align: left;
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: var(--a3);
}

.ergebnis-tabelle th,
.ergebnis-tabelle td {
    padding: var(--a3) var(--a2);
    border-bottom: 1px solid var(--raster);
    text-align: right;
    white-space: nowrap;
}

.ergebnis-tabelle th:first-child,
.ergebnis-tabelle td:first-child {
    text-align: left;
    padding-left: 0;
}

.ergebnis-tabelle thead th {
    font-stretch: var(--schmal);
    font-weight: 640;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--t-mini);
    color: var(--stahl-3);
    border-bottom: var(--strich) solid var(--stahl);
    white-space: normal;
    vertical-align: bottom;
}

.ergebnis-tabelle tbody td:first-child .kappe {
    margin-right: var(--a3);
    vertical-align: middle;
}

.ergebnis-tabelle tfoot td {
    font-weight: 700;
    border-top: var(--strich) solid var(--stahl);
    border-bottom: 0;
}

.tabelle-scroll {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--a2));
    padding-inline: var(--a2);
}

/* Prüfanzeige: Summe stimmt / stimmt nicht */
.pruefung {
    display: flex;
    align-items: center;
    gap: var(--a3);
    font-size: var(--t-klein);
    font-weight: 600;
}

.pruefung .punkt {
    flex-shrink: 0;
}

.pruefung.ist-gut .punkt {
    --e: var(--gut);
}

.pruefung.ist-falsch {
    color: var(--fehler);
}

.pruefung.ist-falsch .punkt {
    --e: var(--fehler);
}

/* Stempel über der Ergebnistabelle */
.werkzeug__bruch {
    display: grid;
    gap: var(--a1);
}

.werkzeug__bruch .bruch {
    font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem);
    letter-spacing: -0.02em;
}

.werkzeug__bruch .versal {
    color: var(--stahl-3);
}

/* MEA-Ergebnis auf schmalen Schirmen: ein Block je Einheit statt Querscrollen */
@media (max-width: 40rem) {
    .ergebnis-tabelle thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ergebnis-tabelle,
    .ergebnis-tabelle tbody,
    .ergebnis-tabelle tfoot,
    .ergebnis-tabelle caption {
        display: block;
    }

    .ergebnis-tabelle tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--a2) var(--a4);
        padding: var(--a4) 0;
        border-bottom: 1px solid var(--raster-stark);
    }

    .ergebnis-tabelle tfoot tr {
        border-top: var(--strich) solid var(--stahl);
        border-bottom: 0;
    }

    .ergebnis-tabelle th,
    .ergebnis-tabelle td,
    .ergebnis-tabelle tfoot td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .ergebnis-tabelle td:first-child {
        grid-column: 1 / -1;
        font-weight: 680;
    }

    .ergebnis-tabelle td:empty {
        display: none;
    }

    .ergebnis-tabelle td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-stretch: var(--schmal);
        font-weight: 640;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: var(--t-mini);
        color: var(--stahl-3);
    }
}

/* Antwortübersicht nach dem Check */
.check-uebersicht {
    display: grid;
    gap: var(--a4);
}

.check-uebersicht h2 {
    font-size: var(--t-titel);
}

.check-uebersicht dl {
    margin: 0;
    border-top: var(--strich) solid var(--stahl);
}

.check-uebersicht dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: var(--a1) var(--a4);
    align-items: baseline;
    padding: var(--a2) 0;
    border-bottom: 1px solid var(--raster-stark);
    font-size: var(--t-klein);
}

.check-uebersicht dt {
    color: var(--stahl-2);
}

.check-uebersicht dd {
    font-weight: 650;
}

.textknopf {
    min-height: 2.75rem;
    padding: 0 var(--a2);
    background: none;
    border: 0;
    color: var(--stahl);
    font: inherit;
    font-weight: 640;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--messing-tief);
    cursor: pointer;
}

.textknopf:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 30rem) {
    .check-uebersicht dl > div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .check-uebersicht dd {
        grid-column: 1;
    }

    .check-uebersicht .textknopf {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* Aufteilungs-Check: eine Frage pro Schritt */
.check-frage {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: var(--a4);
    min-width: 0;
}

.check-frage > legend {
    padding: 0;
    margin-bottom: var(--a3);
    font-size: var(--t-titel);
    font-weight: 740;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.check-frage[hidden] {
    display: none;
}

.check-fortschritt {
    display: flex;
    align-items: center;
    gap: var(--a2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-fortschritt li {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--stahl-4);
}

.check-fortschritt li.ist-erledigt {
    background: var(--stahl);
    box-shadow: none;
}

.check-fortschritt li[aria-current="step"] {
    box-shadow: inset 0 0 0 1.5px var(--stahl), 0 0 0 3px var(--papier-weiss), 0 0 0 4.5px var(--messing-tief);
}

.check-fortschritt__text {
    margin-left: var(--a3);
    font-size: var(--t-klein);
    color: var(--stahl-3);
}

.check-steuerung {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a3);
    justify-content: space-between;
    padding-top: var(--a4);
    border-top: 1px solid var(--raster);
}

.befund {
    display: grid;
    gap: var(--a4);
}

.befund__urteil {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--a4);
    align-items: center;
    padding: var(--a4) var(--a5);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r);
    background: var(--papier-hell);
}

.befund__urteil svg {
    width: 3rem;
}

.befund__urteil strong {
    display: block;
    font-size: var(--t-titel);
    font-weight: 760;
    line-height: 1.2;
}

.befund__urteil.ist-gut {
    background: var(--gut-hell);
    border-color: var(--gut);
}

.befund__urteil.ist-offen {
    background: var(--messing-zart);
    border-color: var(--messing-tief);
}

.befund__urteil.ist-schwer {
    background: var(--fehler-hell);
    border-color: var(--fehler);
}

.befund-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-klein);
}

.befund-matrix th,
.befund-matrix td {
    padding: var(--a3) 0;
    border-bottom: 1px solid var(--raster);
    text-align: left;
    vertical-align: top;
}

.befund-matrix th {
    font-weight: 560;
    padding-right: var(--a4);
}

.befund-matrix td:first-of-type {
    width: 2rem;
    text-align: center;
}

.befund-matrix td:last-child {
    color: var(--stahl-2);
}

.leer-zustand {
    display: grid;
    gap: var(--a3);
    justify-items: start;
    padding: var(--a5);
    border: 1px dashed var(--stahl-4);
    border-radius: var(--r);
    color: var(--stahl-2);
}

.leer-zustand svg {
    width: 4rem;
    color: var(--stahl-4);
}

/* ---------------------------------------------------------------
   Ratgeber (Read)
   --------------------------------------------------------------- */
.ratgeber {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
    padding-block: var(--a7) var(--a9);
}

@media (max-width: 64rem) {
    .ratgeber {
        grid-template-columns: minmax(0, 1fr);
    }
}

.inhalt {
    position: sticky;
    top: var(--a5);
    font-size: var(--t-klein);
}

.inhalt h2 {
    font-stretch: var(--schmal);
    font-weight: 660;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: var(--t-mini);
    color: var(--stahl-3);
    padding-bottom: var(--a2);
    border-bottom: var(--strich) solid var(--stahl);
}

.inhalt ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: kapitel;
}

.inhalt li {
    counter-increment: kapitel;
    border-bottom: 1px solid var(--raster);
}

.inhalt a {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: var(--a2);
    padding: var(--a2) 0;
    text-decoration: none;
    line-height: 1.35;
    color: var(--stahl-2);
}

.inhalt a::before {
    content: counter(kapitel);
    font-stretch: var(--breit);
    font-weight: 700;
    color: var(--stahl-4);
}

.inhalt a:hover,
.inhalt a[aria-current="true"] {
    color: var(--stahl);
}

.inhalt a[aria-current="true"]::before {
    color: var(--messing-tief);
}

@media (max-width: 64rem) {
    .inhalt {
        position: static;
    }
}

.prosa {
    max-width: var(--mass);
    font-size: 1.1875rem;
    line-height: 1.68;
    min-width: 0;
}

.prosa > * + * {
    margin-top: 1.1em;
}

.prosa h2 {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    margin-top: 2.4em;
    padding-top: var(--a4);
    border-top: var(--strich) solid var(--stahl);
}

.prosa h2:first-child {
    margin-top: 0;
}

.prosa h3 {
    font-size: 1.3125rem;
    margin-top: 1.8em;
}

.prosa h2 + *,
.prosa h3 + * {
    margin-top: 0.6em;
}

.prosa ul,
.prosa ol {
    padding-left: 1.4em;
}

.prosa li + li {
    margin-top: 0.4em;
}

.prosa ul li::marker {
    color: var(--messing-tief);
}

.prosa ol li::marker {
    font-stretch: var(--breit);
    font-weight: 700;
}

.prosa blockquote {
    padding: var(--a4) var(--a5);
    background: var(--papier-hell);
    border: 1px solid var(--raster-stark);
    border-radius: var(--r-klein);
    font-size: 1.0625rem;
}

.prosa .meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a1) var(--a5);
    font-size: var(--t-klein);
    color: var(--stahl-3);
}

.prosa table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.45;
}

.prosa caption {
    text-align: left;
    font-weight: 700;
    padding-bottom: var(--a3);
}

.prosa th,
.prosa td {
    hyphens: auto;
    text-align: left;
    vertical-align: top;
    padding: var(--a3) var(--a4) var(--a3) 0;
    border-bottom: 1px solid var(--raster-stark);
}

.prosa thead th {
    font-stretch: var(--schmal);
    font-weight: 660;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--t-mini);
    color: var(--stahl-3);
    border-bottom: var(--strich) solid var(--stahl);
}

.prosa tbody th {
    font-weight: 660;
}

.abbildung {
    margin-block: 2em;
    padding: var(--a4);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
}

.abbildung figcaption {
    margin-top: var(--a3);
    padding-top: var(--a3);
    border-top: 1px solid var(--raster-stark);
    font-size: var(--t-klein);
    color: var(--stahl-2);
    line-height: 1.5;
}

.merke {
    display: grid;
    gap: var(--a2);
    padding: var(--a5);
    background: var(--messing-zart);
    border: 1px solid var(--messing-tief);
    border-radius: var(--r);
    font-size: 1.0625rem;
}

.merke > strong:first-child {
    font-size: 1.125rem;
}

.weiter {
    margin-top: var(--a8) !important;
    display: grid;
    gap: var(--a4);
    padding: var(--a5);
    background: var(--messing);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    --loch: var(--messing);
}

.weiter h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--t-titel);
}

.weiter p {
    color: var(--messing-dunkel);
    font-size: 1.0625rem;
}

/* ===============================================================
   Seitenbausteine der Plates-Templates (Phase 2)
   =============================================================== */

/* Knopf: Text und Pfeil */
.knopf > span {
    min-width: 0;
}

/* Auftakt mit langer H1 und Fließtext aus content/ */
.auftakt--lang h1,
.auftakt--angebot h1 {
    font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
}

.auftakt .vorspann > * + * {
    margin-top: 0.6em;
}

.auftakt .pfad,
.auftakt .pfad a {
    color: var(--messing-dunkel);
    text-decoration-color: var(--messing-dunkel);
}

.auftakt .pfad li + li::before {
    color: var(--messing-tief);
}

.auftakt .pfad {
    margin-bottom: 0;
}

.auftakt--angebot .auftakt__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
}

@media (max-width: 68rem) {
    .auftakt--angebot .auftakt__raster {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Preistafel der Angebotsseite */
.preistafel--gross {
    gap: var(--a5);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    box-shadow: var(--schatten-2);
}

.preistafel__titel {
    font-size: var(--t-titel);
    letter-spacing: -0.012em;
}

.preistafel__preis .stempel {
    letter-spacing: -0.02em;
}

.preistafel__liste ul {
    display: grid;
    gap: var(--a3);
    margin: 0;
    padding: var(--a4) 0 0;
    list-style: none;
    border-top: 1px solid var(--raster-stark);
    font-size: var(--t-klein);
    line-height: 1.5;
}

.preistafel__liste li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--a3);
    align-items: baseline;
}

.preistafel__liste li::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--stahl);
}

.preistafel__liste p {
    font-size: var(--t-klein);
}

.preistafel .knopf {
    width: 100%;
}

/* Die zwei Wege im Einzelnen */
.wegtafeln {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--a5);
}

.wegtafel {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--a4);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    background: var(--papier-weiss);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
}

.wegtafel__nr {
    font-size: 2.75rem;
    color: var(--stahl);
}

.wegtafel .prosa h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--t-titel);
}

.wegtafel .prosa ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--a2);
}

.wegtafel .prosa ul li {
    margin: 0;
    padding: var(--a2) 0;
    border-top: 1px solid var(--raster);
    font-weight: 600;
}

.wegtafeln__hinweis {
    margin-top: var(--a5);
    max-width: 56rem;
}

@media (max-width: 60rem) {
    .wegtafeln {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 30rem) {
    .wegtafel {
        grid-template-columns: minmax(0, 1fr);
    }

    .wegtafel__nr {
        font-size: 2rem;
    }
}

/* Langtext in Abschnitten: Titelspalte links, Lesespalte rechts */
.lesespalten {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--a5) clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
}

.lesespalten--ohne-titel .prosa {
    grid-column: 2;
}

.lesespalten__titel {
    font-size: var(--t-ueber);
    line-height: 1.1;
    position: sticky;
    top: var(--a5);
}

@media (max-width: 60rem) {
    .lesespalten {
        grid-template-columns: minmax(0, 1fr);
    }

    .lesespalten--ohne-titel .prosa {
        grid-column: 1;
    }

    .lesespalten__titel {
        position: static;
    }
}

.prosa--breit {
    max-width: 48rem;
    font-size: var(--t-text);
}

.prosa {
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
}

.prosa a {
    overflow-wrap: anywhere;
}

.knopf {
    max-width: 100%;
}

.prosa p > strong:first-child {
    font-weight: 720;
}

/* Nummerierte Listen im Text: geprägte Ziffern wie im Ablauf */
.prosa ol {
    list-style: none;
    padding-left: 0;
    counter-reset: schritt;
}

.prosa ol > li {
    position: relative;
    padding-left: 3rem;
    counter-increment: schritt;
}

.prosa ol > li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: -0.05em;
    width: 2.25rem;
    font-stretch: var(--breit);
    font-weight: 720;
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--messing-tief);
}

.prosa ol > li + li {
    margin-top: 0.9em;
}

.prosa .tabelle-scroll,
.prosa > table {
    margin-block: 1.4em;
}

.prosa > .knopf {
    margin-right: var(--a3);
}

.prosa > .knopf + .knopf {
    margin-top: var(--a3);
}

.prosa > .hinweis {
    margin-block: 1.4em;
}

/* Breite Tabellen im Text scrollen in sich */
.prosa table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

@media (min-width: 48rem) {
    .prosa table {
        display: table;
        overflow: visible;
    }
}

/* FAQ aus [FAQ]: Fragen als Zeilen des Plans */
.inhalt__faq {
    border-top: var(--strich) solid var(--stahl);
}

.inhalt__faq h3 {
    margin: var(--a4) 0 0;
    padding: var(--a5) 0 var(--a2);
    border-top: 1px solid var(--raster-stark);
    font-size: var(--t-titel);
    line-height: 1.3;
}

.inhalt__faq h3:first-child {
    margin-top: 0;
    border-top: 0;
}

.inhalt__faq h3 + p {
    margin-top: 0;
}

.inhalt__faq > p {
    color: var(--stahl-2);
}

.inhalt__faq > p + p {
    margin-top: 0.6em;
}

/* Quellen aus [QUELLEN] */
.inhalt__quellen {
    padding: var(--a4) var(--a5);
    background: var(--papier-hell);
    border: 1px solid var(--raster-stark);
    border-radius: var(--r-klein);
    font-size: var(--t-klein);
}

.inhalt__quellen ul {
    margin: 0;
    padding-left: 1.2em;
}

/* Seitenkopf: Metazeile */
.seitenkopf__meta {
    margin-top: var(--a3);
    font-size: var(--t-klein);
    color: var(--stahl-3);
}

.seitenkopf .vorspann > * + * {
    margin-top: 0.6em;
}

/* Verzeichnis (Ratgeber-Übersicht, 404) */
.verzeichnisse {
    display: grid;
    gap: var(--a8);
    padding-block: var(--a7) var(--a9);
}

.verzeichnis__titel {
    font-size: var(--t-titel);
    padding-bottom: var(--a3);
    border-bottom: var(--strich) solid var(--stahl);
}

.verzeichnis {
    margin: 0;
    padding: 0;
    list-style: none;
}

.verzeichnis li {
    border-bottom: 1px solid var(--raster-stark);
}

.verzeichnis__eintrag {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 1.5rem;
    gap: var(--a2) var(--a5);
    align-items: baseline;
    padding: var(--a5) 0;
    text-decoration: none;
    color: var(--stahl);
    transition: background-color var(--kurz) var(--aus);
}

.verzeichnis__eintrag:hover {
    background: var(--papier-hell);
}

.verzeichnis__name {
    font-size: var(--t-titel);
    font-weight: 740;
    line-height: 1.25;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--messing-tief);
}

.verzeichnis__text {
    color: var(--stahl-2);
    font-size: var(--t-klein);
}

.verzeichnis__eintrag svg {
    width: 1.25rem;
    align-self: center;
    transition: transform var(--mittel) var(--aus);
}

.verzeichnis__eintrag:hover svg {
    transform: translateX(3px);
}

@media (max-width: 47.5rem) {
    .verzeichnis__eintrag {
        grid-template-columns: minmax(0, 1fr) 1.25rem;
    }

    .verzeichnis__text {
        grid-column: 1;
    }

    .verzeichnis__eintrag svg {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

.leerseite {
    display: grid;
    gap: var(--a7);
    padding-block: var(--a7) var(--a9);
    max-width: calc(52rem + 2 * var(--rand));
    --loch: var(--papier);
}

/* Recht */
.recht {
    padding-block: var(--a7) var(--a9);
}

.recht__text {
    font-size: 1.0625rem;
}

/* ---------------------------------------------------------------
   MEA-Rechner: Reiter
   --------------------------------------------------------------- */
.werkzeug-reiter {
    margin-block: var(--a7) var(--a8);
}

.werkzeug-reiter > .werkzeug {
    margin-block: 0 var(--a5);
}

.werkzeug-reiter.hat-reiter > .werkzeug {
    margin: 0;
    border-top-left-radius: 0;
}

.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.reiter__knopf {
    position: relative;
    min-height: 3rem;
    padding: 0 var(--a5);
    margin-right: -1.5px;
    background: var(--papier-hell);
    color: var(--stahl-2);
    border: var(--strich) solid var(--stahl);
    border-bottom: 0;
    border-radius: var(--r) var(--r) 0 0;
    font: inherit;
    font-weight: 660;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--kurz) var(--aus), color var(--kurz) var(--aus);
}

.reiter__knopf:hover {
    background: var(--messing-zart);
    color: var(--stahl);
}

.reiter__knopf[aria-selected="true"] {
    z-index: 1;
    background: var(--papier-weiss);
    color: var(--stahl);
    box-shadow: inset 0 3px 0 var(--messing);
}

.reiter__knopf[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--papier-weiss);
}

.reiter__knopf:focus-visible {
    outline-offset: -4px;
}

@media (max-width: 30rem) {
    .reiter__knopf {
        flex: 1 1 auto;
        padding: 0 var(--a3);
        font-size: var(--t-klein);
    }
}

.hat-reiter .werkzeug__eingabe > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hat-reiter .werkzeug__einleitung {
    margin-top: 0;
    font-weight: 600;
    color: var(--stahl);
}

.werkzeug__einleitung {
    color: var(--stahl-2);
    margin-top: calc(-1 * var(--a3));
}

.werkzeug__datenschutz {
    padding-top: var(--a3);
    border-top: 1px solid var(--raster);
    font-size: var(--t-mini);
    color: var(--stahl-3);
}

.werkzeug__ausgabe-titel {
    font-size: var(--t-titel);
}

.werkzeug .zeile > [class^="b-"] {
    min-width: 0;
}

.zeile > .b-12 {
    grid-column: span 12;
}

.feld--gruppe {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.feld--gruppe legend {
    padding: 0;
    margin-bottom: var(--a2);
}

.feld--gruppe .option {
    padding-block: var(--a2);
}

.feld--frei {
    margin-top: var(--a3);
}

.feld--knopf {
    align-content: end;
}

.eingabe--kurz {
    max-width: 5.5rem;
}

.ist-unvollstaendig .werkzeug__ausgabe > *:not(.werkzeug__ausgabe-titel) {
    opacity: 0.4;
    transition: opacity var(--mittel) var(--aus);
}

/* Ergebnisliste: Betrag groß, Beschriftung schmal */
.ergebnisliste {
    display: grid;
    margin: 0;
    border-top: var(--strich) solid var(--stahl);
}

.ergebnisliste > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--a4);
    padding: var(--a3) 0;
    border-bottom: 1px solid var(--raster-stark);
}

.ergebnisliste dt {
    font-weight: 600;
}

.ergebnisliste dd.stempel {
    font-size: 1.5rem;
}

.rechenweg {
    padding: var(--a3) var(--a4);
    background: var(--papier-hell);
    border: 1px dashed var(--raster-stark);
    border-radius: var(--r-klein);
    font-size: var(--t-klein);
}

/* Stimmrecht: drei Prinzipien als Zeilen mit Balken */
.stimmrecht {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--strich) solid var(--stahl);
}

.stimmrecht__zeile {
    display: grid;
    gap: var(--a2);
    padding: var(--a4) 0;
    border-bottom: 1px solid var(--raster-stark);
}

.stimmrecht__wert {
    font-weight: 680;
}

.stimmrecht__zeile--gesetz .stimmrecht__wert::after {
    content: "gesetzlich";
    margin-left: var(--a2);
    padding: 0.1rem 0.45rem;
    border-radius: var(--r-klein);
    background: var(--stahl);
    color: var(--papier-hell);
    font-stretch: var(--schmal);
    font-weight: 640;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--t-mini);
    vertical-align: 0.1em;
}

.stimmrecht__balken {
    height: 0.625rem;
    background: var(--papier-hell);
    border: 1px solid var(--raster-stark);
    border-radius: 999px;
    overflow: hidden;
}

.stimmrecht__balken span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--stahl);
    border-radius: 999px;
}

.stimmrecht__zeile--gesetz .stimmrecht__balken span {
    background: var(--messing-tief);
}

.stimmrecht__hinweis {
    font-size: var(--t-klein);
    color: var(--stahl-3);
}

/* ---------------------------------------------------------------
   Aufteilungs-Check
   --------------------------------------------------------------- */
.check-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.werkzeug--check:not(.hat-skript) .check-frage + .check-frage {
    padding-top: var(--a5);
    border-top: 1px solid var(--raster);
}

/* Nach der Auswertung: Antworten oben, Befund darunter, keine leere Spalte */
.werkzeug--check.ist-ausgewertet {
    grid-template-columns: minmax(0, 1fr);
}

.werkzeug--check.ist-ausgewertet .werkzeug__eingabe {
    border-right: 0;
    border-bottom: var(--strich) solid var(--stahl);
}

.werkzeug--check.ist-ausgewertet .check-uebersicht dl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    column-gap: var(--a6);
}

.werkzeug--check.ist-ausgewertet .befund {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--a6);
    align-items: start;
}

.werkzeug--check.ist-ausgewertet .befund > h3,
.werkzeug--check.ist-ausgewertet .befund__urteil,
.werkzeug--check.ist-ausgewertet .befund-matrix {
    grid-column: 1;
}

.werkzeug--check.ist-ausgewertet .befund > h4,
.werkzeug--check.ist-ausgewertet .befund__schritte,
.werkzeug--check.ist-ausgewertet .befund > .anhaenger,
.werkzeug--check.ist-ausgewertet .befund > .feld__hilfe {
    grid-column: 2;
}

.werkzeug--check.ist-ausgewertet .befund > h4 {
    grid-row: 1;
}

.werkzeug--check.ist-ausgewertet .befund__schritte {
    grid-row: 2 / span 2;
}

@media (max-width: 60rem) {
    .werkzeug--check.ist-ausgewertet .befund {
        grid-template-columns: minmax(0, 1fr);
    }

    .werkzeug--check.ist-ausgewertet .befund > * {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

.befund h3 {
    font-size: var(--t-titel);
}

.befund h4 {
    font-size: 1.125rem;
}

.befund__schritte {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--a2);
}

.befund .anhaenger {
    --loch-grund: var(--papier-weiss);
}

.befund .anhaenger__titel {
    font-size: 1.125rem;
}

.befund-matrix td:first-of-type {
    padding-right: var(--a3);
}

@media (max-width: 40rem) {
    .befund-matrix,
    .befund-matrix tbody {
        display: block;
    }

    .befund-matrix tr {
        display: grid;
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: var(--a1) 0;
        padding: var(--a3) 0;
        border-bottom: 1px solid var(--raster);
    }

    .befund-matrix th,
    .befund-matrix td {
        display: block;
        padding: 0;
        border: 0;
    }

    .befund-matrix th {
        grid-column: 1 / -1;
        font-weight: 680;
    }

    .befund-matrix td:first-of-type {
        width: auto;
        text-align: left;
        padding-top: 0.15em;
    }
}

/* ---------------------------------------------------------------
   Bestellformular: Bausteine aus dem Katalog (components/formularfeld)
   --------------------------------------------------------------- */
.felder {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--a4);
}

.felder > .feld {
    grid-column: span 12;
}

.felder > .feld--breit { grid-column: span 8; }
.felder > .feld--schmal { grid-column: span 4; }
.felder > .feld--halb { grid-column: span 6; }
.felder > .feld--kurz { grid-column: span 4; }
.felder > .feld--voll { grid-column: span 12; }

@media (max-width: 40rem) {
    .felder > .feld--halb,
    .felder > .feld--kurz {
        grid-column: span 12;
    }

    .felder > .feld--breit { grid-column: span 7; }
    .felder > .feld--schmal { grid-column: span 5; }
}

.felder--zusatz {
    margin-top: var(--a5);
    padding-top: var(--a5);
    border-top: 1px solid var(--raster);
}

.feld__frei {
    font-weight: 450;
    color: var(--stahl-3);
}

.feld__info {
    display: block;
    font-size: var(--t-klein);
    color: var(--stahl-3);
    line-height: 1.45;
}

.feld .eingabe[aria-invalid="true"],
.feld select.eingabe[aria-invalid="true"],
.feld textarea.eingabe[aria-invalid="true"] {
    border-color: var(--fehler);
    border-width: 2px;
    background: #fffafa;
}

select.eingabe {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2317191a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.25rem;
}

textarea.eingabe {
    min-height: 6.5rem;
    resize: vertical;
}

/* Haken (Checkbox) in der Matrix-Sprache */
.haken {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--a3);
    align-items: start;
    padding: var(--a4) 0;
    border-bottom: 1px solid var(--raster);
    cursor: pointer;
    line-height: 1.5;
}

.haken__kasten {
    display: none;
}

.haken input {
    appearance: none;
    margin: 0.0625rem 0 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--r-klein);
    box-shadow: inset 0 0 0 1.5px var(--stahl);
    background: var(--papier-weiss);
    cursor: pointer;
}

.haken input:checked {
    background: var(--stahl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c9a03d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
    box-shadow: none;
}

.haken input:focus-visible {
    outline: 3px solid var(--stahl);
    outline-offset: 3px;
}

.haken--fehler input {
    box-shadow: inset 0 0 0 2px var(--fehler);
    background-color: #fffafa;
}

.zustimmung .feld__fehler {
    margin: var(--a2) 0 0 2.25rem;
}

/* Honigtopf für Bots: unsichtbar, nicht im Fokus */
.honig {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Adressvorschläge unter dem Feld Straße */
.felder > .feld {
    position: relative;
}

.adressliste {
    position: absolute;
    z-index: 10;
    top: calc(100% - 0.25rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--a1);
    list-style: none;
    background: var(--papier-weiss);
    border: var(--strich) solid var(--stahl);
    border-radius: var(--r-klein);
    box-shadow: var(--schatten-2);
    max-height: 16rem;
    overflow-y: auto;
}

.adressliste li {
    padding: var(--a2) var(--a3);
    border-radius: var(--r-klein);
    cursor: pointer;
    font-size: 1rem;
}

.adressliste li:hover,
.adressliste li[aria-selected="true"] {
    background: var(--messing-zart);
}

/* Leistung fest gewählt: der Anhänger leuchtet */
.wahl {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wahl__option--fest {
    cursor: default;
    border-color: var(--stahl);
    border-width: 2px;
    background: var(--messing-zart);
}

.wahl__option--fest .wahl__loch {
    background: var(--stahl);
    box-shadow: inset 0 0 0 4px var(--messing-zart), 0 0 0 1.5px var(--stahl);
}

.abschicken__titel {
    font-size: var(--t-titel);
}

.posten {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--strich) solid var(--stahl);
}

.posten li {
    display: flex;
    justify-content: space-between;
    gap: var(--a4);
    padding: var(--a3) 0;
    border-bottom: 1px solid var(--raster-stark);
    font-weight: 600;
}

.posten li span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.attrappe {
    margin-top: var(--a4);
    max-width: 44rem;
}

/* Absenden läuft: Ring im Knopf, Knopf gesperrt */
form[data-sendet] .bestellen {
    cursor: progress;
    pointer-events: none;
}

form[data-sendet] .bestellen::before {
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: drehen 0.8s linear infinite;
}

.summe .belege {
    flex-direction: column;
    align-items: flex-start;
    color: var(--stahl-2);
}

/* Danke-Seite */
.danke {
    padding-block: var(--a7) var(--a9);
}

.danke .ergebnis {
    max-width: none;
}

.danke .ergebnis h1 {
    font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
    letter-spacing: -0.02em;
}

.danke__raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--a6) clamp(2rem, 1rem + 3vw, 4rem);
    padding-top: var(--a5);
    border-top: var(--strich) solid var(--stahl);
}

.danke__raster > div {
    display: grid;
    gap: var(--a4);
    align-content: start;
}

.danke__raster h2 {
    font-size: var(--t-titel);
}

@media (max-width: 60rem) {
    .danke__raster {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ablauf--senkrecht {
    grid-template-columns: minmax(0, 1fr);
}

.ablauf--senkrecht li,
.ablauf--senkrecht li + li {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: var(--a3);
    padding: var(--a4) 0 var(--a4) var(--a3);
    border-left: 0;
    border-bottom: 1px solid var(--raster-stark);
}

.ablauf--senkrecht li::before {
    grid-row: span 2;
    font-size: 1.75rem;
}


/* ---------------------------------------------------------------
   Bewegung
   Ein Moment: der Aufruf einer Einheit. Alles ist ohne Bewegung sichtbar.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    a.anhaenger:hover {
        transform: none;
    }

    .knopf[aria-busy="true"]::before {
        animation: none;
        border-right-color: currentColor;
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Hoher Kontrast erzwungen: Punkte und Ringe bleiben unterscheidbar */
@media (forced-colors: active) {
    .punkt {
        background: CanvasText;
        forced-color-adjust: none;
    }

    .punkt--leer {
        background: Canvas;
        box-shadow: inset 0 0 0 1.5px CanvasText;
    }

    .anhaenger,
    .wahl__option,
    .bogen,
    .summe {
        border-color: CanvasText;
    }
}

/* ---------------------------------------------------------------
   Druck: Bestellbestätigung und Ratgeber sauber auf Papier
   --------------------------------------------------------------- */
@media print {
    .kopf,
    .fuss,
    .abschluss,
    .menue,
    .inhalt,
    .weiter {
        display: none !important;
    }

    body {
        background: #fff;
        font-size: 11pt;
    }

    .auftakt {
        background: #fff;
    }

    a {
        text-decoration: none;
    }
}

/* Anmerkung: Pflichtangaben in kleiner, ruhiger Schrift (kein Warnkasten) */
.anmerkung {
    margin: var(--a3) 0 0;
    font-size: var(--t-klein);
    line-height: 1.5;
    color: var(--stahl-3);
}

.preistafel .anmerkung {
    font-size: 0.8125rem;
}