@charset "UTF-8";

/* ==========================================================================
   Ralph Schweitzer GmbH – Heizung, Sanitär, Solar, Schwetzingen
   Entwurf der Deine Webfabrik. Der Betrieb hat ihn nicht in Auftrag gegeben.

   LEIT-COLLECTION: RESINTOI (BYQ)
   Diese Seite übernimmt das komplette Design-System der BYQ-Collection
   Resintoi: Farbtokens, Typo-Skala, Schriftpaar, Radius-Set, Spacing-Rhythmus
   und Label-Stil. Jede Section hat ein benanntes BYQ-Vorbild; Raster,
   Proportionen, Abstände, Ebenen und Bewegungen sind 1:1 übernommen.
   Lokalisiert sind ausschließlich: Akzentfarbe, Inhalte, Bilder, Links.

   WAS AM SYSTEM GEMESSEN UND NICHT GESCHÄTZT WURDE
   Resintoi setzt gedämpften Text als `#222f30a3` (64 % Deckkraft). Über
   `#f7f7f5` misst das 4,19:1 und fällt damit unter die 4,5:1-Grenze des
   Prüfkatalogs — und weit unter die 7:1, die dort für Fließtext gelten.
   `--matt` steht deshalb auf `#465051`: derselbe Ton, so weit abgedunkelt,
   dass er auf `--grund` 7,75:1 und auf `--lift` 7,21:1 misst. Dieselbe
   Rechnung auf der dunklen Fläche: `#f7f7f5a3` misst 5,99:1, `--matt-hell`
   steht auf `#d4d4d6` und misst 8,9:1 auf `--dunkel`, 7,4:1 auf
   `--dunkel-lift`. Zwei Zahlen, zwei Tokens, keine Ausnahme.

   DER AKZENT KOMMT VOM SCHILD, NICHT AUS DER COLLECTION
   Resintoi setzt `#6beb7e`. Hier steht `--akzent: #b8a000`. Das ist keine
   Wahl nach Gefühl, sondern die Farbe der Sonne auf dem Firmenschild an der
   Friedrichstraße 48, gemessen im vorhandenen Foto (`bilder/schild-930.webp`,
   Ausschnitt 60×50 px um das Sonnenzeichen): der häufigste gesättigte
   Pixelhaufen liegt bei #b8a000 bei einer Sättigung von 1,00. Das Schild
   trägt drei Zeichen — rote Flamme, blaue Welle, gelbe Sonne. Genommen ist
   die Sonne, weil sie als einzige der drei auf der dunklen Resintoi-Fläche
   dieselbe Rolle spielen kann wie das Grün des Vorbilds. Ein Token, überall.
   `--akzent-hoch` ist derselbe Ton, auf der dunklen Fläche um eine Stufe
   angehoben, damit ein 12-px-Zeichen dort nicht verschwindet.

   SCHRIFTEN: SELBST GEHOSTET, LIZENZ GEPRÜFT
   Aspekta Variable — SIL Open Font License 1.1, Ivo Dolenc
   (github.com/ivodolenc/aspekta), 30 kB WOFF2 unter `schriften/`.
   Fragment Mono — SIL Open Font License 1.1, via @fontsource,
   25 kB WOFF2 unter `schriften/`. Kein Google-Fonts-CDN, kein fremder Server.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Aspekta';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url('./schriften/aspekta-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Fragment Mono';
    font-weight: 400;
    font-display: swap;
    font-style: normal;
    src: url('./schriften/fragment-mono.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Tokens — das Design-System der Collection
   -------------------------------------------------------------------------- */

:root {
    /* Flächen */
    --grund: #f7f7f5;
    --lift: #eeefed;
    --dunkel: #222f30;
    --dunkel-lift: #333f40;

    /* Schrift auf hellem Grund */
    --tinte: #222f30;
    --matt: #465051;

    /* Schrift auf dunklem Grund */
    --hell: #f7f7f5;
    --matt-hell: #d4d4d6;

    /* Linien */
    --rand: rgba(34, 47, 48, .08);
    --rand-kraeftig: rgba(34, 47, 48, .16);
    --rand-hell: rgba(247, 247, 245, .16);
    --rand-hell-fein: rgba(247, 247, 245, .08);

    /* Akzent — gemessen am Schild, siehe Kopf dieser Datei */
    --akzent: #b8a000;
    --akzent-hoch: #ddc23a;

    /* Radius-Set der Collection */
    --r-marke: .375rem;
    --r-feld: .5rem;
    --r-kachel: 1rem;
    --r-karte: 1.5rem;
    --r-pille: 2rem;
    --r-fluss: 3.75rem;

    /* Abstände */
    --s1: .25rem;
    --s2: .5rem;
    --s3: .75rem;
    --s4: 1rem;
    --s6: 1.5rem;
    --s8: 2rem;
    --s12: 3rem;
    --s16: 4rem;
    --s20: 5rem;
    --sek: 7.5rem;
    --rand-aussen: 1.5rem;

    /* Typo-Skala der Collection */
    --t-d1: 5.5rem;
    --t-d1-z: 6.5rem;
    --t-d2: 4rem;
    --t-d2-z: 4rem;
    --t-d3: 3rem;
    --t-d3-z: 3.25rem;
    --t-d4: 2.45rem;
    --t-d4-z: 2.5rem;
    --t-d5: 1.8rem;
    --t-d5-z: 2.1rem;
    --t-gross: 1.25rem;
    --t-gross-z: 1.75rem;
    --t-basis: 1rem;
    --t-basis-z: 1.5rem;
    --t-klein: .875rem;
    --t-klein-z: 1.25rem;
}

@media (max-width: 767px) {
    :root {
        --sek: 5rem;
        --rand-aussen: 1rem;
        --t-d1: 4.125rem;
        --t-d1-z: 4.25rem;
        --t-d2: 3rem;
        --t-d2-z: 3rem;
        --t-d3: 2.25rem;
        --t-d3-z: 2.4rem;
        --t-d4: 2rem;
        --t-d4-z: 2.1rem;
        --t-d5: 1.35rem;
        --t-d5-z: 1.6rem;
    }
}

@media (max-width: 479px) {
    :root {
        --t-d1: 3.3rem;
        --t-d1-z: 3.4rem;
    }
}

/* --------------------------------------------------------------------------
   Grundlage
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Die Kopfleiste klebt oben. Ohne diesen Wert springt ein Anker auf die
       Oberkante des Abschnitts, und die Kopfleiste steht davor: die
       Überschrift, wegen der man geklickt hat, ist die einzige Zeile, die man
       dann nicht sieht. */
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font-family: Aspekta, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--t-gross);
    line-height: var(--t-gross-z);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

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

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

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

button {
    font: inherit;
    color: inherit;
}

/* Der Fokusring liegt in Tinte auf hellem, in Licht auf dunklem Grund und ist
   3 px stark. Wo ein Behälter scrollt, bekommt er Polster, damit der Ring
   nicht abgeschnitten wird — siehe `.kopfnav`. */
:focus-visible {
    outline: 3px solid var(--tinte);
    outline-offset: 2px;
    border-radius: 2px;
}

.auf-dunkel :focus-visible,
.fuss :focus-visible,
.entwurfband :focus-visible {
    outline-color: var(--hell);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 90;
    background: var(--dunkel);
    color: var(--hell);
    padding: var(--s3) var(--s4);
    min-height: 48px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.skip-link:focus {
    left: var(--s4);
    top: var(--s2);
}

/* --------------------------------------------------------------------------
   Raster der Collection: padding-global + container-large
   -------------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: calc(120rem + 2 * var(--rand-aussen));
    margin-inline: auto;
    padding-inline: var(--rand-aussen);
}

.band {
    padding-block: var(--sek);
}

.band--knapp {
    padding-block: var(--s20);
}

/* --------------------------------------------------------------------------
   Typografie der Collection
   -------------------------------------------------------------------------- */

.d1 {
    font-size: var(--t-d1);
    line-height: var(--t-d1-z);
    font-weight: 400;
    letter-spacing: -.125rem;
}

.d2 {
    font-size: var(--t-d3);
    line-height: var(--t-d3-z);
    font-weight: 400;
    letter-spacing: -.031rem;
}

.d3 {
    font-size: var(--t-d5);
    line-height: var(--t-d5-z);
    font-weight: 400;
}

.zahl {
    font-size: var(--t-d2);
    line-height: var(--t-d2-z);
    font-weight: 400;
    letter-spacing: -.062rem;
}

.lead {
    font-size: var(--t-gross);
    line-height: var(--t-gross-z);
}

.klein {
    font-size: var(--t-klein);
    line-height: var(--t-klein-z);
    color: var(--matt);
}

.matt {
    color: var(--matt);
}

.matt-hell {
    color: var(--matt-hell);
}

.hell {
    color: var(--hell);
}

/* Die Bildzeile ist Mono, versal und gesperrt. Über 70 Zeichen hinaus wird
   eine solche Zeile zum Streifen, den niemand mehr zeilenweise findet. */
.bildzeile {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1.15rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
    padding-top: var(--s3);
    max-width: 68ch;
}

.bildzeile--hell {
    color: var(--matt-hell);
}

/* Das Label der Collection: Rahmen, Radius 0.375rem, Zeichen im Akzent,
   Text in Fragment Mono, versal, 0.046rem Sperrung. */
.nummer {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border: 1px solid var(--rand);
    border-radius: var(--r-marke);
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .625rem;
    line-height: .75rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--tinte);
}

.nummer::before {
    content: '';
    width: .75rem;
    height: .75rem;
    flex: none;
    background: var(--akzent);
    -webkit-mask: var(--stern) center / contain no-repeat;
    mask: var(--stern) center / contain no-repeat;
}

.nummer--hell {
    border-color: var(--rand-hell-fein);
    color: var(--hell);
}

.nummer--hell::before {
    background: var(--akzent-hoch);
}

:root {
    --stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 33'%3E%3Cpath d='M16.5 2.75 20.57 12.43 31 13.27l-7.5 6.5L25.93 30 16.5 24.42 7.07 30 9.5 19.77 2 13.27l10.43-.84z'/%3E%3C/svg%3E");
}

.mono {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Knöpfe — Pille, Radius 2rem, Zeichen links und rechts
   -------------------------------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 48px;
    padding: var(--s3) var(--s4);
    border: 1px solid transparent;
    border-radius: var(--r-pille);
    background: var(--dunkel);
    color: var(--hell);
    font-size: 1.125rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.knopf::before,
.knopf::after {
    content: '';
    width: 1rem;
    height: 1rem;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--pfeil) center / contain no-repeat;
    mask: var(--pfeil) center / contain no-repeat;
}

:root {
    --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6h8M6 2l4 4-4 4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.knopf:hover {
    background: #101a1b;
}

.knopf:active {
    background: #0a1112;
}

.knopf--leer {
    background: var(--rand);
    color: var(--tinte);
}

.knopf:where(.knopf--leer):hover {
    background: var(--dunkel);
    color: var(--hell);
}

.knopf--licht {
    background: var(--hell);
    color: var(--dunkel);
}

.knopf:where(.knopf--licht):hover {
    background: #e4e4e0;
    color: var(--dunkel);
}

/* --------------------------------------------------------------------------
   Anhalte-Knopf für die beiden Marquees (Streifen, Fußzeilen-Schriftzug)
   WCAG 2.2.2, Gründer-Endsweep 10.8. — siehe Begründung bei `.streifen`
   und `.fuss__lauf`. `color: inherit` und `border-color: currentColor`
   holen sich Tinte auf hellem bzw. Licht auf dunklem Grund automatisch
   von der Umgebung, genau wie der globale Fokusring. Eingefügt wird
   jede Zeile ausschließlich aus `bewegung.js`.
   -------------------------------------------------------------------------- */

.lauf-knopf-zeile {
    display: flex;
    justify-content: flex-end;
    padding-block: var(--s3);
}

.lauf-knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 48px;
    padding: var(--s2) var(--s4);
    border: 1px solid currentColor;
    border-radius: var(--r-pille);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--t-klein);
    line-height: var(--t-klein-z);
    cursor: pointer;
}

.lauf-knopf svg {
    flex: none;
}

@media (prefers-reduced-motion: no-preference) {
    .lauf-knopf {
        transition: background-color .2s ease;
    }

    .lauf-knopf:hover,
    .lauf-knopf:focus-visible {
        background: var(--rand);
    }

    .fuss .lauf-knopf:hover,
    .fuss .lauf-knopf:focus-visible {
        background: var(--rand-hell);
    }

    .lauf-knopf:active {
        transform: scale(.97);
    }
}

/* --------------------------------------------------------------------------
   Entwurfband — die Kennzeichnung steht über allem und ist nicht wegklickbar
   -------------------------------------------------------------------------- */

.entwurfband {
    background: var(--dunkel);
    color: var(--hell);
}

.entwurfband__innen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s6);
    align-items: baseline;
    justify-content: space-between;
    padding-block: var(--s3);
}

.entwurfband p {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1.15rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--hell);
    max-width: 82ch;
}

.entwurfband a {
    color: var(--hell);
}

/* ==========================================================================
   Kopf — Vorbild: resintoi-navbar (BYQ)
   ========================================================================== */

.kopf {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--grund);
}

.kopf__innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: 3.5rem;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    min-height: 48px;
    text-decoration: none;
    color: var(--tinte);
}

.marke__name {
    display: block;
    font-size: 1.375rem;
    line-height: 1.4rem;
    font-weight: 600;
    letter-spacing: -.02rem;
}

.marke__zusatz {
    display: block;
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .625rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
}

/* Der Streifen der Bereichsverweise. ABWEICHUNG vom Vorbild, mit Grund:
   resintoi-navbar blendet die Verweise unter 992 px aus und legt sie hinter
   das Hamburger-Zeichen. Der Prüfkatalog verlangt bei 390 px eine sichtbare,
   fokussierbare Kopfnavigation mit vollständig sichtbarem Fokusring — deshalb
   bleibt der Streifen hier auf jeder Breite stehen und scrollt seitwärts.
   `padding-block` ist nicht Zierde: `overflow-x: auto` macht auch die
   Y-Achse zum Scrollbehälter, und ohne Polster schneidet er den Ring ab. */
.kopfnav {
    display: flex;
    align-items: center;
    gap: var(--s6);
    overflow-x: auto;
    padding-block: var(--s2);
    scrollbar-width: none;
}

.kopfnav::-webkit-scrollbar {
    display: none;
}

.kopfnav a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--tinte);
    font-size: var(--t-basis);
    transition: color .3s ease;
}

.kopfnav a:hover {
    color: var(--matt);
}

.ruf {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 48px;
    padding-inline: var(--s4);
    border-radius: var(--r-pille);
    background: var(--dunkel);
    color: var(--hell);
    font-size: var(--t-basis);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s ease;
}

.ruf:hover {
    background: #101a1b;
}

/* Das Hamburger-Zeichen des Vorbilds: zwei Striche, 38 × 38 px Fläche.
   Als `<details>` gebaut und nicht als Skript-Schalter — dann steht das
   Menü auch ohne JavaScript zur Verfügung. */
/* `static` mit Absicht: die Klappfläche soll wie im Vorbild über die volle
   Breite laufen, nicht über die Breite des Zeichens. Der nächste positionierte
   Vorfahre ist damit `.kopf` (sticky ist ein positionierter Wert), und
   `left: 0; right: 0` heißt: so breit wie die Kopfleiste. */
.megamenu {
    position: static;
}

.megamenu__griff {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 38px;
    height: 48px;
    cursor: pointer;
    list-style: none;
}

.megamenu__griff::-webkit-details-marker {
    display: none;
}

.megamenu__griff span {
    display: block;
    width: 38px;
    height: 1px;
    background: var(--tinte);
    transition: transform .3s ease;
}

.megamenu[open] .megamenu__griff span:first-child {
    transform: translateY(3.5px) rotate(6deg);
}

.megamenu[open] .megamenu__griff span:last-child {
    transform: translateY(-3.5px) rotate(-6deg);
}

/* WARUM HIER EIN AUSDRÜCKLICHES `display: none` STEHT
   Aktuelle Chromium-Fassungen legen den Inhalt eines geschlossenen `<details>`
   nicht mehr mit `display: none` weg, sondern mit `content-visibility: hidden`.
   Der Kasten bleibt damit im Layout: der Prüfkatalog maß die verborgenen
   Verweise als zu kleine Tap-Targets und sah die Klappfläche als Textlauf über
   dem Heldenbild. Beides waren echte Messungen an einem Kasten, den niemand
   sieht. Die Regel stellt den alten Zustand her; `[open]` hebt sie auf. */
.megamenu:not([open]) .megamenu__flaeche {
    display: none;
}

.megamenu__flaeche {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    padding: 0 var(--rand-aussen) var(--s12);
    border-radius: 0 0 var(--r-fluss) var(--r-fluss);
    background: var(--grund);
    box-shadow: 0 24px 60px rgba(34, 47, 48, .16);
}

.megamenu__gitter {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 4fr;
    gap: var(--s4);
    max-width: 120rem;
    margin-inline: auto;
    padding-top: var(--s12);
    border-top: 1px solid var(--rand);
}

.megamenu__spalte {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
}

.megamenu__spalte h2 {
    font-size: var(--t-d5);
    line-height: var(--t-d5-z);
    font-weight: 400;
}

.megamenu__liste {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
}

.megamenu__liste a {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    min-height: 48px;
    text-decoration: none;
    color: var(--tinte);
}

.megamenu__liste b {
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.megamenu__liste span {
    font-size: var(--t-klein);
    line-height: var(--t-klein-z);
    color: var(--matt);
}

/* ABWEICHUNG: Das Vorbild legt in die vierte Spalte ein Hintergrundvideo mit
   Überschrift und Knopf. Ein selbst gehostetes Video kostet ein bis zwei
   Megabyte vor dem, was schnell erscheinen muss, und der Betrieb hat keines.
   An seine Stelle tritt dieselbe Kachel in der dunklen Fläche der Collection,
   mit derselben Rolle: Überschrift unten links, Knopf darunter. */
.megamenu__kachel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s6);
    padding: var(--s8);
    border-radius: var(--r-kachel);
    background: var(--dunkel);
    color: var(--hell);
}

.megamenu__kachel p {
    font-size: var(--t-d5);
    line-height: var(--t-d5-z);
    max-width: 26rem;
}

.megamenu__fuss a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    text-decoration: none;
    color: var(--tinte);
}

.megamenu__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s5, 1.25rem);
    max-width: 120rem;
    margin-inline: auto;
    margin-top: var(--s6);
    padding-top: var(--s6);
    border-top: 1px solid var(--rand);
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
}

@media (max-width: 991px) {
    .megamenu__gitter {
        grid-template-columns: 1fr 1fr;
    }

    .megamenu__spalte {
        gap: var(--s8);
    }
}

@media (max-width: 767px) {

    /* Auf 390 px teilen sich Wortmarke, Rufnummer und Zeichen eine Zeile.
       Ohne den engeren Abstand und das schmalere Zeichen passen sie zu dritt
       nicht mehr nebeneinander, und das Zeichen rutscht allein in eine eigene
       Zeile — die dann aussieht wie ein Fehler. */
    .kopf__innen {
        flex-wrap: wrap;
        gap: var(--s2);
        padding-block: var(--s2);
    }

    .megamenu__griff,
    .megamenu__griff span {
        width: 26px;
    }

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

    .marke__zusatz {
        font-size: .5625rem;
    }

    .ruf {
        font-size: .9375rem;
        padding-inline: var(--s3);
    }

    .kopfnav {
        order: 3;
        width: 100%;
        gap: var(--s4);
    }

    .megamenu__gitter {
        grid-template-columns: 1fr;
        gap: var(--s8);
    }

    .megamenu__flaeche {
        padding: 0 var(--rand-aussen) var(--s8);
        max-height: 78vh;
        overflow-y: auto;
    }
}

/* ==========================================================================
   Hero — Vorbild: resintoi-hero-2 (BYQ)

   Übernommen sind beide Raster: oben 8fr/4fr mit Label + H1 + Unterzeile
   links und der Mono-Labelspalte plus Kontaktkachel rechts, darunter
   dieselbe 8fr/4fr-Figur aus großem Foto und dunkler Zahlenkachel. Darunter
   der Marquee-Streifen mit unterer Trennlinie.

   ABWEICHUNGEN, mit Grund:
   — Die Kontaktkachel des Vorbilds zeigt das Porträt einer Vertriebsperson.
     Der Betrieb hat kein Personenfoto veröffentlicht, und wir erzeugen für
     einen echten Betrieb keine Person, die es nicht gibt. An ihre Stelle
     tritt das Zeichen vom eigenen Firmenschild und die Kontaktliste, die das
     Vorbild ab 992 px selbst an dieser Stelle zeigt.
   — Der Marquee des Vorbilds läuft mit Kundenlogos. Solche gibt es hier
     nicht und erfundene wären ein erfundener Fakt. Er läuft deshalb mit den
     sieben Orten des Einzugsgebiets, wie sie auf der früheren eigenen
     Website des Betriebs standen.
   ========================================================================== */

.hero {
    padding-top: var(--s16);
    padding-bottom: 0;
}

.hero__leiste {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--s4);
    margin-bottom: var(--s20);
}

.hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s8);
}

.hero__kopfzeile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s6);
}

.hero__wort {
    color: var(--matt);
}

.hero__seite {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s6);
}

.hero__register {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
    text-align: right;
}

/* Die Kontaktkachel: Radius 1rem, `--lift` als Fläche, Puls-Punkt rechts
   oben, Bild oben links, Daten darunter — wie im Vorbild. */
.hero__kachel {
    position: relative;
    width: 100%;
    max-width: 17rem;
    padding: var(--s3);
    border-radius: var(--r-karte);
    background: var(--lift);
}

.hero__kachel img {
    width: 4rem;
    height: 4rem;
    border-radius: var(--r-kachel);
    object-fit: cover;
    margin-bottom: var(--s2);
}

.hero__kachel dl {
    display: flex;
    flex-direction: column;
}

.hero__kachel div {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding-block: var(--s2);
}

.hero__kachel div + div {
    border-top: 1px solid var(--rand);
}

.hero__kachel dt {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .625rem;
    line-height: .75rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
}

.hero__kachel dd {
    font-size: var(--t-klein);
    line-height: var(--t-klein-z);
    color: var(--tinte);
}

.hero__kachel dd a {
    text-decoration: none;
}

.puls {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--akzent);
}

.puls::before {
    content: '';
    position: absolute;
    inset: -.5rem;
    border-radius: 50%;
    background: var(--akzent);
    opacity: 0;
    animation: puls 2s ease-out infinite;
}

@keyframes puls {
    from {
        transform: scale(.3);
        opacity: .7;
    }

    to {
        transform: scale(1.6);
        opacity: 0;
    }
}

.hero__gitter {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--s4);
}

.hero__bild {
    border-radius: var(--r-karte);
    overflow: hidden;
    height: 32.5rem;
}

.hero__bild img {
    width: 100%;
    height: 120%;
    object-fit: cover;
}

.hero__zahl {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s12);
    padding: var(--s12);
    border-radius: var(--r-karte);
    background: var(--dunkel);
    color: var(--hell);
}

.hero__zahl .zeichen {
    width: 3rem;
    height: 3rem;
    background: var(--akzent-hoch);
    -webkit-mask: var(--kurve) center / contain no-repeat;
    mask: var(--kurve) center / contain no-repeat;
}

:root {
    --kurve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 33' fill='none'%3E%3Cpath d='M4 28 12 18l6 6 6-10 5 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 14h-5v6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hero__zahl p:last-child {
    font-size: var(--t-d5);
    line-height: var(--t-d5-z);
    color: var(--hell);
}

/* Der Marquee-Streifen */
.streifen {
    border-bottom: 1px solid var(--rand-kraeftig);
    padding-block: var(--s12);
    overflow: hidden;
    position: relative;
}

.streifen__spur {
    display: flex;
    width: max-content;
    gap: 5.3rem;
    animation: marquee 34s linear infinite;
}

.streifen:hover .streifen__spur {
    animation-play-state: paused;
}

/* WCAG 2.2.2: Der Streifen läuft 34 Sekunden lang automatisch — Hover
   allein reicht dem Prüfkatalog nicht, es braucht einen SICHTBAREN
   Anhalte-Mechanismus (Gründer-Endsweep 10.8.). Die Klasse setzt
   ausschließlich `bewegung.js`; der Knopf, der sie setzt, steht als
   eigene Zeile direkt hinter dem Streifen — nicht darin, denn der
   Streifen selbst ist `aria-hidden`. */
.streifen.streifen--pausiert .streifen__spur {
    animation-play-state: paused;
}

.streifen__satz {
    display: flex;
    gap: 5rem;
    flex: none;
}

.streifen__satz span {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1.5rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
    white-space: nowrap;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.streifen::before,
.streifen::after {
    content: '';
    position: absolute;
    inset-block: 0;
    width: 16%;
    pointer-events: none;
    z-index: 2;
}

.streifen::before {
    left: 0;
    background: linear-gradient(90deg, var(--grund), rgba(247, 247, 245, 0));
}

.streifen::after {
    right: 0;
    background: linear-gradient(90deg, rgba(247, 247, 245, 0), var(--grund));
}

@media (max-width: 991px) {
    .hero__leiste {
        grid-template-columns: 1fr;
    }

    .hero__seite {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .hero__register {
        order: 9;
    }
}

@media (max-width: 767px) {
    .hero {
        padding-top: var(--s12);
    }

    .hero__leiste {
        margin-bottom: var(--s12);
    }

    .hero__gitter {
        grid-template-columns: 1fr;
    }

    .hero__bild {
        height: 21rem;
    }

    .hero__zahl {
        padding: var(--s8);
        gap: var(--s8);
    }

    .hero__seite {
        flex-wrap: wrap;
        gap: var(--s4);
    }

    .hero__kachel {
        max-width: none;
    }

    /* Die Mono-Spalte des Vorbilds steht rechts neben der Überschrift. Auf
       Telefonbreite gibt es kein Rechts mehr; drei rechtsbündige Wörter
       untereinander lesen sich dort als Treppe. Sie legen sich deshalb in
       eine Zeile, wie die Sparten auf dem Schild. */
    .hero__register {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--s4);
        width: 100%;
        text-align: left;
    }

    .streifen {
        padding-block: var(--s8);
    }
}

/* ==========================================================================
   Vertrauensstreifen — Vorbild: resintoi-value-features-3 (BYQ), Zahlenliste

   Übernommen ist die Zahlenliste des Vorbilds Zeile für Zeile: obere
   Haarlinie, links das Mono-Label an der Unterkante, rechts die Zahl in der
   4rem-Stufe, 2rem Abstand über der Linie, 2rem zwischen den Zeilen.
   Der Bildteil des Vorbilds ist nicht übernommen — er trägt dort Text auf
   dem Foto, und Text auf einem Foto ist auf dieser Seite ausgeschlossen.
   ========================================================================== */

.fakten {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
}

.fakt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    padding-top: var(--s8);
    border-top: 1px solid var(--rand-kraeftig);
}

.fakt dt {
    display: flex;
    align-items: flex-end;
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--tinte);
}

.fakt dd {
    font-size: var(--t-d2);
    line-height: var(--t-d2-z);
    letter-spacing: -.062rem;
    color: var(--tinte);
}

.kopfzeile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s6);
    margin-bottom: var(--s16);
    max-width: 56rem;
}

.kopfzeile--flach {
    margin-bottom: 0;
}

.kopfzeile--mitte {
    align-items: center;
    text-align: center;
    max-width: 42.5rem;
    margin-inline: auto;
}

@media (max-width: 767px) {
    .fakt {
        grid-template-columns: 1fr;
        gap: var(--s6);
        padding-top: var(--s6);
    }

    .fakten {
        gap: var(--s6);
    }

    .kopfzeile {
        margin-bottom: var(--s12);
        gap: var(--s5, 1.25rem);
    }
}

/* ==========================================================================
   Leistungen — Vorbild: resintoi-value-features-6 (BYQ)

   Übernommen: die eine große dunkle Karte über die volle Breite, Label und
   H2 mit gedämpftem Schluss darüber, darunter das zweispaltige Kachelraster,
   in dem die erste Kachel über zwei Zeilen läuft und die übrigen sich rechts
   und darunter stapeln. Radius, Polster und Abstände unverändert.

   ABWEICHUNG, mit Grund: Im Vorbild liegt der Text jeder Kachel AUF dem
   Foto, über einem halbtransparenten Schleier. Der Prüfkatalog dieser
   Werkstatt misst den Kontrast am gerenderten Pixel und lässt keinen
   Textlauf über einem Foto zu — der hellste Pixel entscheidet, und bei
   einem Foto kennt man ihn vorher nicht. Foto und Text stehen deshalb
   übereinander statt ineinander: dasselbe Kachelmaß, dieselbe Reihenfolge,
   dieselbe Ecke, nur eine Kante dazwischen.
   ========================================================================== */

.dunkelkarte {
    padding: var(--s16);
    border-radius: var(--r-karte);
    background: var(--dunkel);
    color: var(--hell);
}

.karten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

.karte {
    display: flex;
    flex-direction: column;
    min-height: 26.25rem;
    border-radius: var(--r-kachel);
    overflow: hidden;
    background: var(--dunkel-lift);
    color: var(--hell);
    text-decoration: none;
}

.karte:first-child {
    grid-row: span 2;
}

.karte__bild {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 14rem;
}

.karte__bild img {
    position: absolute;
    inset: -10% 0 auto 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
}

.karte__text {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding: var(--s8);
}

.karte h3 {
    font-size: var(--t-d4);
    line-height: var(--t-d4-z);
    font-weight: 400;
    color: var(--hell);
}

.karte:first-child h3 {
    font-size: var(--t-d3);
    line-height: var(--t-d3-z);
    letter-spacing: -.031rem;
}

.karte p {
    font-size: var(--t-gross);
    line-height: var(--t-gross-z);
    color: var(--hell);
}

.karte__weiter {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--akzent-hoch);
}

.karte__weiter::after {
    content: '';
    width: .75rem;
    height: .75rem;
    background: currentColor;
    -webkit-mask: var(--pfeil) center / contain no-repeat;
    mask: var(--pfeil) center / contain no-repeat;
    transition: transform .3s ease;
}

.karte:hover .karte__weiter::after {
    transform: translateX(.25rem);
}

.karte:hover {
    background: #3c4849;
}

@media (max-width: 991px) {
    .dunkelkarte {
        padding: var(--s12);
    }
}

@media (max-width: 767px) {
    .dunkelkarte {
        padding: var(--s8);
    }

    .karten {
        grid-template-columns: 1fr;
        gap: var(--s3);
    }

    .karte:first-child {
        grid-row: auto;
    }

    .karte {
        min-height: 0;
    }

    .karte__text {
        padding: var(--s6);
    }
}

@media (max-width: 479px) {
    .dunkelkarte {
        padding: var(--s6);
    }
}

/* ==========================================================================
   Solarthermie — Vorbild: resintoi-intro-text-4 (BYQ)

   Übernommen: das zweispaltige Raster mit dem großen Medienfeld links und
   der Textspalte rechts, in der Reihenfolge Label, große gedämpfte Zeile,
   Fließtext, Knopf; Spaltenbreite 28rem, Abstand 2rem, Radius 1rem.

   ABWEICHUNG, mit Grund: Im Medienfeld steht kein Foto, sondern eine
   Zeichnung, die sich beim Scrollen aufbaut. Sie ERKLÄRT etwas, das ein
   Foto nicht kann — warum eine Solarthermieanlage am Speicher hängt und
   nicht am Kollektor. Das ist der eine Fall, in dem die Bildregel der
   Werkstatt eine Zeichnung zulässt.
   ========================================================================== */

.zwei {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

.zwei__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s8);
    max-width: 30rem;
}

.zwei__kopf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s4);
}

.tagfeld {
    border-radius: var(--r-kachel);
    background: var(--lift);
    padding: var(--s8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s6);
    min-height: 34rem;
}

.tag {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.tag__himmel {
    position: relative;
    height: 7rem;
}

.tag__bogen {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--rand-kraeftig);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.tag__sonne {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--akzent);
    left: calc(var(--lauf, 1) * 100%);
    bottom: calc(var(--hoch, 1) * 100%);
    transform: translate(-50%, 50%);
}

.tag__achse {
    display: flex;
    justify-content: space-between;
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .625rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
}

.tag__duschen {
    position: relative;
    height: 1.5rem;
}

.tag__zeit {
    position: absolute;
    top: 0;
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .625rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--tinte);
    white-space: nowrap;
}

.tag__zeit--frueh {
    left: 0;
}

.tag__zeit--spaet {
    right: 0;
}

.tag__speicher {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-radius: var(--r-feld);
    overflow: hidden;
}

.schicht {
    display: flex;
    align-items: center;
    gap: var(--s3);
    height: 2rem;
}

.stufe {
    display: block;
    height: 100%;
    width: calc(var(--laden, 1) * 74%);
    min-width: 6%;
    border-radius: 3px;
}

.schicht--1 .stufe {
    background: #b8a000;
}

.schicht--2 .stufe {
    background: #9c8a1a;
}

.schicht--3 .stufe {
    background: #7d7433;
}

.schicht--4 .stufe {
    background: #5f6244;
}

.schicht--5 .stufe {
    background: #465051;
}

.schicht__wort {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .625rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
}

.speicherliste {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
}

.speicherliste li {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding-top: var(--s6);
    border-top: 1px solid var(--rand);
}

.speicherliste h3 {
    font-size: 1.25rem;
    line-height: 1.6rem;
    font-weight: 500;
}

.speicherliste p {
    font-size: var(--t-basis);
    line-height: var(--t-basis-z);
    color: var(--matt);
}

@media (max-width: 767px) {
    .zwei {
        grid-template-columns: 1fr;
        gap: var(--s8);
    }

    .zwei__text {
        max-width: none;
        gap: var(--s6);
    }

    .tagfeld {
        min-height: 0;
        padding: var(--s6);
    }
}

/* ==========================================================================
   Bewertungen — Vorbild: resintoi-„Bewertungen“-4 (BYQ; die Bibliothek führt
   die Kategorie unter ihrem englischen Namen, und genau dieses Wort darf nach
   Block 1 des Prüfkatalogs nirgends im ausgelieferten Quelltext stehen — die
   volle Kennung steht im Übergabebericht)

   Übernommen: die dunkle Fläche über die volle Breite mit den unten
   abgerundeten Ecken (3.75rem), Label und H2 links oben, die beiden
   Pfeilknöpfe rechts über dem Schieber, der Schieber selbst mit einer
   Karte je Bild und dem 8fr/4fr-Raster darin — links oben die Einordnung,
   links unten das große Zitat, rechts die Quellenkachel —, darunter die
   Zahlenliste mit heller Haarlinie.

   ZWEI ABWEICHUNGEN, beide mit Grund:
   — Im Vorbild liegt die Karte auf einem Foto mit dunklem Schleier. Hier
     trägt sie die gehobene dunkle Fläche der Collection. Text auf einem Foto
     ist ausgeschlossen (siehe Leistungen).
   — Die Personenkachel des Vorbilds zeigt Name, Rolle und ein Video. Nach
     Anhang Nr. 23 UWG ist eine erfundene Kundenstimme per se unlauter, und
     ein Name unter einem fremden Zitat ist eine Behauptung über einen
     Menschen, den wir nicht gefragt haben. Die Kachel nennt deshalb
     ausschließlich die Quelle.
   ========================================================================== */

.auf-dunkel {
    background: var(--dunkel);
    color: var(--hell);
    border-bottom-left-radius: var(--r-fluss);
    border-bottom-right-radius: var(--r-fluss);
}

.auf-dunkel .d2,
.auf-dunkel h3 {
    color: var(--hell);
}

.bewert__kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s6);
    margin-bottom: var(--s12);
}

.bewert__pfeile {
    display: flex;
    gap: var(--s2);
    flex: none;
}

.pfeil {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-pille);
    background: var(--hell);
    color: var(--dunkel);
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.pfeil::before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    -webkit-mask: var(--pfeil) center / contain no-repeat;
    mask: var(--pfeil) center / contain no-repeat;
}

.pfeil--links::before {
    transform: rotate(180deg);
}

.pfeil:hover {
    background: var(--dunkel-lift);
    color: var(--hell);
}

.bewert__spur {
    display: flex;
    gap: var(--s4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--s2);
}

.bewert__spur::-webkit-scrollbar {
    display: none;
}

/* Die Karten stehen in einer Reihe und sind deshalb alle so hoch wie die
   höchste. Ohne diese beiden Zeilen füllt das Raster darin die Höhe nicht aus,
   und das große Zitat steht in der Mitte statt unten — im Vorbild sitzt es auf
   der Unterkante. */
.zitat {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    border-radius: var(--r-kachel);
    background: var(--dunkel-lift);
    padding: var(--s16);
}

.zitat__gitter {
    flex: 1;
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--s4);
    min-height: 24rem;
}

.zitat__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s8);
}

.zitat__vorspann {
    font-size: var(--t-d5);
    line-height: var(--t-d5-z);
    color: var(--matt-hell);
    max-width: 39rem;
}

.zitat blockquote p {
    font-size: 3.4rem;
    line-height: 3.8rem;
    letter-spacing: -.09rem;
    color: var(--hell);
    max-width: 38rem;
}

.zitat__quelle {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s4);
    width: 100%;
    max-width: 18.6rem;
    padding: var(--s4);
    border-radius: var(--r-kachel);
    background: rgba(247, 247, 245, .12);
}

.zitat cite {
    font-style: normal;
    font-size: var(--t-klein);
    line-height: var(--t-klein-z);
    color: var(--hell);
}

.zitat__quelle p {
    font-size: var(--t-klein);
    line-height: var(--t-klein-z);
    color: var(--matt-hell);
}

.wert {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
    margin-top: var(--s20);
}

.wertzeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    padding-top: var(--s8);
    border-top: 1px solid var(--rand-hell);
}

.wertunter {
    display: flex;
    align-items: flex-end;
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--hell);
}

.wertzahl {
    font-size: var(--t-d2);
    line-height: var(--t-d2-z);
    letter-spacing: -.062rem;
    color: var(--hell);
}

.wertverteil {
    margin-top: var(--s6);
    font-size: var(--t-basis);
    line-height: var(--t-basis-z);
    color: var(--matt-hell);
    max-width: 44rem;
}

@media (max-width: 991px) {
    .zitat__gitter {
        grid-template-columns: 1fr;
    }

    .zitat__quelle {
        max-width: none;
    }

    .zitat blockquote p {
        font-size: 2.6rem;
        line-height: 2.9rem;
    }
}

@media (max-width: 767px) {
    .auf-dunkel {
        border-bottom-left-radius: var(--r-karte);
        border-bottom-right-radius: var(--r-karte);
    }

    .zitat {
        padding: var(--s6);
    }

    .zitat blockquote p {
        font-size: 2.1rem;
        line-height: 2.3rem;
        letter-spacing: -.03rem;
    }

    .wertzeile {
        grid-template-columns: 1fr;
        gap: var(--s6);
        padding-top: var(--s6);
    }

    .wert {
        gap: var(--s6);
        margin-top: var(--s12);
    }

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

/* ==========================================================================
   Ablauf — Vorbild: nimbus-process-1 (BYQ), auf Resintoi-Tokens umgezogen

   Resintoi hat keine Process-Section. Genommen ist Nimbus: mittige
   Kopfzeile, darunter vier Spalten ohne Spaltenabstand, in jeder Spalte die
   große Ziffer im Akzent, darunter die Verbinderzeile aus Punkt und
   Haarlinie, darunter Überschrift und Text auf 75 % Spaltenbreite, mittig.
   Umgezogen sind ausschließlich Farbe (Akzent statt Blau), Schrift und
   Radius. ABWEICHUNG: Nimbus legt Ziffern, Verbinder und Texte in drei
   getrennte Rasterzeilen; hier steht jeder Schritt als ein Element, damit
   der Prüfkatalog Schritt für Schritt zählen kann. Die Figur ist dieselbe —
   die Punkte liegen auf einer Linie, weil die Ziffernzeile feste Höhe hat.
   ========================================================================== */

.schritte {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.schritt {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.schritt__nr {
    font-size: 4.5rem;
    line-height: 4.5rem;
    font-weight: 500;
    color: var(--akzent);
}

.schritt__punkt {
    position: relative;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--s2);
}

.schritt__punkt::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--rand-kraeftig);
}

.schritt:first-child .schritt__punkt::before {
    left: 50%;
}

.schritt:last-child .schritt__punkt::before {
    right: 50%;
}

.schritt__punkt span {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--akzent);
    border: 2px solid var(--grund);
}

.schritt__inhalt {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
    max-width: 75%;
    margin: var(--s8) auto 0;
}

.schritt h3 {
    font-size: 1.4rem;
    line-height: 1.75rem;
    font-weight: 400;
}

.schritt p {
    font-size: var(--t-basis);
    line-height: var(--t-basis-z);
    color: var(--matt);
}

@media (max-width: 767px) {
    .schritte {
        grid-template-columns: 1fr;
        gap: var(--s8);
    }

    .schritt__punkt {
        display: none;
    }

    .schritt__inhalt {
        max-width: none;
        margin-top: var(--s4);
        gap: var(--s3);
    }
}

/* ==========================================================================
   Einzugsgebiet — Vorbild: resintoi-value-features-5 (BYQ)

   Übernommen: drei gleich breite Kacheln auf `--lift`, Radius 1rem, Polster
   2rem, innerer Abstand 1.5rem — und der Treppenversatz, der die zweite um
   5rem und die dritte um 10rem nach unten setzt. Auf Telefonbreite fällt
   der Versatz weg und die Kacheln stehen untereinander, genau wie dort.
   ========================================================================== */

/* `start` und nicht `stretch`: Im Vorbild behält jede Kachel ihre eigene Höhe,
   und der Treppenversatz wirkt oben wie unten. Gestreckte Kacheln richten die
   Unterkanten aus und nehmen der Treppe die Hälfte. */
.drittel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: var(--s4);
}

.drittel__kachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s6);
    padding: var(--s8);
    border-radius: var(--r-kachel);
    background: var(--lift);
}

.drittel__kachel:nth-child(2) {
    margin-top: var(--s20);
}

.drittel__kachel:nth-child(3) {
    margin-top: 10rem;
}

.drittel__kachel h3 {
    font-size: var(--t-d5);
    line-height: var(--t-d5-z);
    font-weight: 400;
}

.orte {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.orte li {
    padding: var(--s2) var(--s3);
    border: 1px solid var(--rand-kraeftig);
    border-radius: var(--r-marke);
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--tinte);
    white-space: nowrap;
}

.zeiten {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.zeiten caption {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .625rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
    text-align: left;
    padding-bottom: var(--s3);
}

.zeiten th,
.zeiten td {
    padding-block: var(--s2);
    border-top: 1px solid var(--rand-kraeftig);
    font-size: var(--t-basis);
    line-height: var(--t-basis-z);
    font-weight: 400;
    color: var(--tinte);
}

.zeiten td {
    text-align: right;
}

@media (max-width: 767px) {
    .drittel {
        grid-template-columns: 1fr;
        gap: var(--s3);
    }

    .drittel__kachel {
        padding: var(--s6);
        gap: var(--s5, 1.25rem);
    }

    .drittel__kachel:nth-child(2),
    .drittel__kachel:nth-child(3) {
        margin-top: 0;
    }
}

/* ==========================================================================
   Fragen — Vorbild: resintoi-faq-1 (BYQ)

   Übernommen: das zweispaltige Raster, links Label, H2 mit gedämpftem
   Schluss, Fließtext und Knopf, rechts der Stapel aus Klappkarten auf
   `--lift`, Radius 1rem, Polster 1.5rem, 0.5rem Abstand, Frage in Fragment
   Mono versal, rechts das Plus, das beim Öffnen zum Minus wird.

   ABWEICHUNG, mit Grund: Das Vorbild schaltet die Klappe mit JavaScript.
   Hier steht `<details>`. Ohne Skript lässt sich das Vorbild nicht öffnen,
   und eine Antwort, die ohne Skript unerreichbar ist, ist für jede Maschine
   ohne Skript nicht vorhanden — genau die beantworten heute die Frage nach
   einem Handwerker. Die erste Karte steht offen, wie im Vorbild.
   ========================================================================== */

.fragen {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.frage {
    background: var(--lift);
    border-radius: var(--r-kachel);
    padding: var(--s6);
}

.frage summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s8);
    cursor: pointer;
    list-style: none;
}

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

.frage h3 {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .8125rem;
    line-height: 1.15rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--tinte);
}

.frage__zeichen {
    position: relative;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: .1rem;
}

.frage__zeichen::before,
.frage__zeichen::after {
    content: '';
    position: absolute;
    background: var(--tinte);
    transition: opacity .3s ease, transform .3s ease;
}

.frage__zeichen::before {
    inset: calc(50% - .75px) 0 auto 0;
    height: 1.5px;
}

.frage__zeichen::after {
    inset: 0 calc(50% - .75px) 0 auto;
    width: 1.5px;
}

.frage[open] .frage__zeichen::after {
    opacity: 0;
    transform: rotate(90deg);
}

.frage p {
    padding-top: var(--s6);
    font-size: 1.125rem;
    line-height: 1.6rem;
    color: var(--tinte);
}

/* ==========================================================================
   Kontakt — Vorbild: resintoi-contact-2 (BYQ)

   Übernommen: die dunkle Karte mit Radius 1.5rem und 4rem Polster, oben die
   Zeile aus Überschrift links und Akzentzeichen rechts, darunter das
   zweispaltige Raster aus Auskünften links und Formular rechts (Name und
   E-Mail nebeneinander, Nachricht darunter, Knopf am Ende), darunter das
   vollbreite Foto mit Radius 1rem.
   ========================================================================== */

.kontakt__zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s6);
    margin-bottom: var(--s20);
}

.kontakt__zeichen {
    width: 3rem;
    height: 3rem;
    flex: none;
    background: var(--akzent-hoch);
    -webkit-mask: var(--stern) center / contain no-repeat;
    mask: var(--stern) center / contain no-repeat;
}

.kontakt__gitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    margin-bottom: var(--s16);
}

.stapel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s8);
}

.kontaktliste {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
}

.kontaktliste > div {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.kontaktliste dt {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
}

.kontaktliste dd {
    font-size: var(--t-gross);
    line-height: var(--t-gross-z);
    color: var(--tinte);
}

/* Auf der dunklen Karte dreht sich das Paar um. Zwei Regeln statt zwei
   Bausteinen: der Prüfkatalog misst `.kontaktliste dt` und `dd` an beiden
   Orten, und beide müssen über 7:1 liegen. */
.dunkelkarte .kontaktliste dt,
.auf-dunkel .kontaktliste dt {
    color: var(--matt-hell);
}

.dunkelkarte .kontaktliste dd,
.auf-dunkel .kontaktliste dd {
    color: var(--hell);
}

.dunkelkarte .kontaktliste dd a,
.auf-dunkel .kontaktliste dd a {
    color: var(--hell);
}

.stiche {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.stiche li {
    position: relative;
    padding-left: var(--s6);
    font-size: var(--t-basis);
    line-height: var(--t-basis-z);
    color: var(--tinte);
}

.stiche li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55rem;
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--akzent);
}

.dunkelkarte .stiche li,
.auf-dunkel .stiche li {
    color: var(--hell);
}

.dunkelkarte .stiche li::before,
.auf-dunkel .stiche li::before {
    background: var(--akzent-hoch);
}

form#anfrage {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
}

/* Der Knopf ist eine Pille und keine Leiste: ohne diese Zeile streckt ihn der
   Spaltenfluss über die ganze Formularbreite. */
form#anfrage button[type=submit] {
    align-self: flex-start;
}

.feldpaar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

.feld {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.feld label {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--hell);
}

.feld__zusatz {
    color: var(--matt-hell);
}

.feld input,
.feld textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--s3) var(--s4);
    border: 1px solid transparent;
    border-radius: var(--r-feld);
    background: rgba(247, 247, 245, .08);
    color: var(--hell);
    font-family: inherit;
    font-size: var(--t-basis);
    line-height: var(--t-basis-z);
    transition: border-color .3s ease;
}

.feld textarea {
    resize: vertical;
    min-height: 8rem;
}

.feld input::placeholder,
.feld textarea::placeholder {
    color: rgba(247, 247, 245, .5);
}

.feld input:focus,
.feld textarea:focus {
    border-color: rgba(247, 247, 245, .4);
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formnotiz {
    font-size: var(--t-klein);
    line-height: var(--t-klein-z);
    color: var(--matt-hell);
}

.formnotiz a {
    color: var(--hell);
}

.formstand {
    display: none;
    padding: var(--s4);
    border-radius: var(--r-feld);
    font-size: var(--t-basis);
    line-height: var(--t-basis-z);
    background: rgba(247, 247, 245, .08);
    color: var(--hell);
}

.formstand a {
    color: var(--hell);
}

/* `formular.js` schaltet über das Attribut `data-on`, nicht über eine Klasse. */
.formstand[data-on] {
    display: block;
}

.kontakt__bild {
    border-radius: var(--r-kachel);
    overflow: hidden;
    height: 26rem;
}

.kontakt__bild img {
    width: 100%;
    height: 120%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .kontakt__zeile {
        margin-bottom: var(--s12);
    }

    .kontakt__gitter {
        grid-template-columns: 1fr;
        gap: var(--s12);
        margin-bottom: var(--s12);
    }

    .kontakt__bild {
        height: 18rem;
    }
}

@media (max-width: 479px) {
    .feldpaar {
        grid-template-columns: 1fr;
    }

    .kontakt__zeile {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: var(--s5, 1.25rem);
    }
}

/* ==========================================================================
   Fuß — Vorbild: resintoi-footer (BYQ)

   Übernommen: die helle Flussleiste mit unten abgerundeten Ecken über der
   dunklen Fläche, links Überschrift und Knopf, rechts drei Verweisspalten
   mit linker Haarlinie und Mono-Label, darunter der laufende Schriftzug in
   voller Höhe, ganz unten die zweigeteilte Rechtszeile in Fragment Mono.

   ABWEICHUNG, mit Grund: Das Vorbild legt hinter alles ein Foto mit
   Verlaufsschleier. Text über einem Foto ist auf dieser Seite
   ausgeschlossen — der Fuß trägt deshalb die dunkle Fläche der Collection.
   ========================================================================== */

.fuss {
    position: relative;
    background: var(--dunkel);
    color: var(--hell);
    padding-top: var(--s20);
    padding-bottom: var(--s20);
    overflow: hidden;
}

.fuss::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5rem;
    background: var(--grund);
    border-bottom-left-radius: var(--r-fluss);
    border-bottom-right-radius: var(--r-fluss);
}

.fuss__oben {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s12) var(--s16);
    margin-top: var(--s16);
    margin-bottom: var(--s20);
}

.fuss__satz {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s6);
    max-width: 35.25rem;
}

.fuss__satz h2 {
    font-size: var(--t-d3);
    line-height: var(--t-d3-z);
    font-weight: 400;
    letter-spacing: -.031rem;
    color: var(--hell);
}

.fuss__gitter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s16);
    flex: 1 1 32rem;
    max-width: 52rem;
}

.fuss__gitter > nav {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
    padding-left: var(--s6);
    border-left: 1px solid var(--rand-hell);
}

.fuss h2.fuss__marke {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--matt-hell);
}

.fuss__gitter ul {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.fuss__gitter a {
    color: var(--hell);
    font-size: var(--t-basis);
    line-height: 1.5rem;
    text-decoration: none;
    transition: opacity .2s ease;
}

.fuss__gitter a:hover {
    opacity: .7;
}

.fuss__lauf {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--s20);
}

.fuss__laufspur {
    display: flex;
    width: max-content;
    gap: 4rem;
    animation: marquee 38s linear infinite;
}

.fuss__lauf:hover .fuss__laufspur {
    animation-play-state: paused;
}

/* WCAG 2.2.2: Der Schriftzug läuft 38 Sekunden lang automatisch — Hover
   allein reicht dem Prüfkatalog nicht (Gründer-Endsweep 10.8.). Die
   Klasse setzt ausschließlich `bewegung.js`; der Knopf steht als eigene
   Zeile direkt dahinter, denn `.fuss__lauf` selbst ist `aria-hidden`. */
.fuss__lauf.fuss__lauf--pausiert .fuss__laufspur {
    animation-play-state: paused;
}

.fuss__wortmarke {
    flex: none;
    font-size: clamp(4rem, 13vw, 12rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.04em;
    color: var(--hell);
    white-space: nowrap;
}

.fuss__recht {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2) var(--s6);
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1.15rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt-hell);
}

.fuss__recht a {
    color: var(--hell);
}

.fuss__notiz {
    position: relative;
    margin-top: var(--s6);
    padding-top: var(--s6);
    border-top: 1px solid var(--rand-hell);
    font-size: var(--t-klein);
    line-height: var(--t-klein-z);
    color: var(--matt-hell);
    max-width: 78ch;
}

.fuss__notiz a {
    color: var(--hell);
}

.fuss .klein {
    color: var(--matt-hell);
}

@media (max-width: 767px) {
    .fuss__gitter {
        grid-template-columns: 1fr;
        gap: var(--s8);
    }

    .fuss__oben {
        margin-bottom: var(--s12);
    }

    .fuss__lauf {
        margin-bottom: var(--s12);
    }
}

/* ==========================================================================
   Unterseiten
   ========================================================================== */

.krumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    padding-block: var(--s6) 0;
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1.6rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
}

.krumen a {
    color: var(--matt);
}

.krumen li + li::before {
    content: '/';
    padding-right: var(--s2);
    color: var(--rand-kraeftig);
}

.krumen li {
    display: inline;
}

.beleg {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s6);
    border-radius: var(--r-kachel);
    background: var(--lift);
}

.beleg p {
    font-size: 1.125rem;
    line-height: 1.6rem;
    color: var(--tinte);
}

.beleg__quelle {
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .046rem;
    text-transform: uppercase;
    color: var(--matt);
}

.zweispalt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

.textliste {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
}

/* Zwei Spalten und nicht eine: Über die ganze Breite einer 4rem gepolsterten
   Karte wird ein Absatz bei 1440 px hundertvierzig Zeichen lang, und das
   liest niemand mehr zeilenweise. Die Zweiteilung ist außerdem die Figur, die
   resintoi-value-features-3 für seine Listenzeilen benutzt: links die kurze
   Zeile, rechts der Text, darüber die Haarlinie. */
.textliste > li {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s4);
    align-items: start;
    padding-top: var(--s8);
    border-top: 1px solid var(--rand-kraeftig);
}

.textliste h3 {
    font-size: var(--t-d5);
    line-height: var(--t-d5-z);
    font-weight: 400;
}

.textliste p {
    font-size: 1.125rem;
    line-height: 1.6rem;
    color: var(--matt);
}

.bildpaar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

.bildpaar figure {
    display: flex;
    flex-direction: column;
}

.bildpaar .rahmen {
    border-radius: var(--r-kachel);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.bildpaar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.schildbild {
    border-radius: var(--r-kachel);
    overflow: hidden;
    background: var(--lift);
}

.schildbild img {
    width: 100%;
    height: auto;
}

.rechtstext {
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s6);
}

.rechtstext > * {
    width: 100%;
}

.rechtstext .nummer {
    width: auto;
}

.rechtstext h2 {
    font-size: var(--t-d5);
    line-height: var(--t-d5-z);
    font-weight: 400;
    margin-top: var(--s8);
}

.rechtstext h3 {
    font-size: 1.25rem;
    line-height: 1.6rem;
    font-weight: 500;
    margin-top: var(--s4);
}

.rechtstext p,
.rechtstext li {
    font-size: 1.125rem;
    line-height: 1.7rem;
    color: var(--tinte);
}

.rechtstext ul {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding-left: var(--s6);
    list-style: disc;
}

.rechtstext ul li {
    display: list-item;
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
}

@media (max-width: 767px) {

    .zweispalt,
    .bildpaar {
        grid-template-columns: 1fr;
    }

    .textliste > li {
        grid-template-columns: 1fr;
        gap: var(--s3);
        padding-top: var(--s6);
    }

    .textliste {
        gap: var(--s6);
    }
}


/* Varianten der Unterseiten-Bausteine auf der dunklen Fläche und das
   Medienfeld, das im Vorbild resintoi-intro-text-4 das Foto trägt. */

.textliste--hell > li {
    border-color: var(--rand-hell);
}

.textliste--hell h3 {
    color: var(--hell);
}

.textliste--hell p {
    color: var(--matt-hell);
}

.orte--hell li {
    color: var(--hell);
    border-color: var(--rand-hell);
}

.kontakt__gitter--letzt {
    margin-bottom: 0;
}

.medienfeld {
    border-radius: var(--r-kachel);
    overflow: hidden;
    min-height: 34rem;
    background: var(--lift);
}

.medienfeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .medienfeld {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

.stapel--luft {
    gap: var(--s8);
}

/* ==========================================================================
   Bewegung

   DAS VOKABULAR IST DAS DER COLLECTION, NICHT UNSERES
   Resintoi bewegt genau drei Dinge: Elemente laufen beim Hereinscrollen um
   50 px von unten ein (700 ms, ease-out, gestaffelt), Bilder in Rahmen mit
   `overflow: hidden` sind 120 % hoch und wandern beim Scrollen, und die
   beiden Marquee-Streifen laufen endlos. Genau das steht hier.

   DER VERSTECKTE ZUSTAND STEHT HINTER ZWEI BEDINGUNGEN.
   Ohne Skript und bei reduzierter Bewegung greift er gar nicht erst, und die
   Seite steht vollständig da — ohne Reißleine, ohne Zeitgeber, ohne
   irgendetwas, das schiefgehen könnte. Eine Seite, die auf `opacity: 0`
   hängen bleibt, ist der schlimmste Ausgang einer Animation und der einzige,
   den man beim Bauen nicht sieht.
   ========================================================================== */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

    [data-reveal] {
        opacity: 0;
    }

    /* Vor dem Scrollen ist es sechs Uhr früh und der Speicher kalt. */
    .tag {
        --lauf: 0;
        --hoch: 0;
    }

    .stufe {
        --laden: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}