/* =============================================================
   Flower Mountain Woodart — Design-System
   Grundlage: Design-System.md (Gestaltungsbogen, HEX)
   ============================================================= */

/* ------------------------------------------------- 1. Schriften */

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-v40-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/inter-tight-v9-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/inter-tight-v9-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/inter-tight-v9-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/inter-tight-v9-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------- 2. Tokens */

:root {
    /* Flächen */
    --bg:          #15120F;
    --bg-deep:     #0D0C0C;
    --surface:     #1C1815;
    --line:        #2A2420;
    --input:       #221D19;

    /* Text */
    --text:        #F4F1EB;
    --text-muted:  #E8E2D9;
    --text-meta:   #C3B7A2;
    --text-faint:  #8A8075;

    /* Akzente */
    --gold:        #C68B39;
    --gold-logo:   #AB9347;
    --gold-shadow: #8B5E26;
    --gold-light:  #E5C08E;
    --gradient-gold: linear-gradient(135deg, #8B5E26 0%, #C68B39 50%, #E5C08E 100%);

    /* Status */
    --available:   #7E9B6A;
    --reserved:    #EBD1A1;
    --sold:        #A8654F;
    /* Derselbe Ton, aufgehellt für Text: #A8654F erreicht auf dem
       Seitengrund nur 4,12:1 und fällt damit unter AA, sobald die
       Schrift kleiner als 18,66 px wird — also auf dem Handy. */
    --sold-text:   #F0C9BC;
    --error:       #C25A4B;

    /* Schrift */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Skala */
    --fs-display: clamp(2.5rem, 8vw + 1rem, 6.5rem);
    --fs-h2:      clamp(2rem, 5vw + 0.5rem, 3.75rem);
    --fs-h3:      clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    --fs-body:    clamp(0.95rem, 0.4vw + 0.85rem, 1.0625rem);
    --fs-label:   0.7rem;

    /* Maße */
    --radius: 4px;
    --shadow-product: 0 20px 60px -15px rgba(0, 0, 0, .5);
    --shadow-luxe:    0 30px 80px -20px rgba(0, 0, 0, .6);

    /* Großzügige Ränder prägen den Eindruck stärker als alles andere —
       übernommen von der Übergangsseite. */
    --rand:      clamp(1.5rem, 7vw, 7.5rem);
    --sektion:   clamp(5rem, 13vw, 12rem);
    --max-breite: 1680px;

    /* Der erste Block unter dem Seitenkopf bekommt weniger.
       Mit dem vollen Sektionsabstand standen auf breiten Bildschirmen
       187 px Leere zwischen Kopf und erstem Satz — der Kopf trägt seinen
       eigenen unteren Abstand ja schon. Eine Zahl für alle Unterseiten. */
    --sektion-kopf: clamp(3rem, 6vw, 5.5rem);

    /* Breite der Hinweiskästen über den Formularen. Alle drei standen auf
       68ch — sahen aber verschieden breit aus, weil `ch` an der Schriftgröße
       hängt und die drei Kästen verschieden große Schrift haben (612, 680
       und 655 px übereinander). Ein fester Wert bringt sie auf eine Kante. */
    --kastenbreite: 44rem;

    /* ---------------------------------------- Bildbühne der Unterseiten
     *
     * Drei Zahlen für den Kopf jeder Unterseite. Sie stehen hier und nicht
     * unten bei `.seitenkopf`, weil die Höhe der Bühne eine Entscheidung
     * über den ganzen Auftritt ist und nicht über ein einzelnes Bauteil.
     *
     * Warum überhaupt eine feste Höhe: Bis zum 27.8. war es
     * `min-height: min(70vh, 640px)`, und der Textblock trug oben ein
     * Polster von 10rem. Sobald ein Einleitungssatz drei statt zwei Zeilen
     * brauchte, sprengte der Block die Mindesthöhe — die Werkstattseite
     * stand deshalb ab 1440 px Breite 18 px höher als alle anderen
     * (648 gegen 630 px, gemessen). Die Höhe hing damit an der Länge eines
     * Textes, den Mike im Backend jederzeit ändern kann.
     *
     * Jetzt gibt die Bühne die Höhe vor und der Text sitzt darin. `max()`
     * um `min()` herum, weil beides gebraucht wird: nach oben mitwachsen mit
     * dem Fenster (`vh`), nach unten aber nie unter das fallen, was der
     * Text bei dieser Breite tatsächlich braucht — sonst käme der Sprung
     * auf einem flachen Fenster (etwa 1440 × 700) zurück.
     */
    --seitenkopf-hoehe:  max(32rem, min(70vh, 40rem));
    --seitenkopf-sockel: clamp(3rem, 6vw, 5rem);

    /* Kein Gestaltungsmaß, sondern eine Sicherung: Sollte ein Text aus dem
       Backend die Bühne doch einmal sprengen, hält dieses Polster ihn von
       der festen Navigation fern. Im Regelfall ist es unsichtbar. */
    --seitenkopf-schutz: clamp(5rem, 10vw, 7.5rem);
}

/* Ab Tabletbreite werden die Schriften größer, der Textblock also höher.
   Die Bühne zieht mit — und ihr Boden liegt über dem, was der längste
   Kopftext dort braucht (gemessen 608 px auf der Werkstattseite). */
@media (min-width: 900px) {
    :root { --seitenkopf-hoehe: max(39rem, min(76vh, 44rem)); }
}

/* ---------------------------------------------------- 3. Basis */

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Feines Korn über allem — nimmt den Flächen das Digitale.
   Übernommen von der Übergangsseite. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* <picture> ist von Haus aus inline und würde die Höhe der Crop-Container
   nicht durchreichen — deshalb überall dort auf Blockgröße zwingen. */
.hero__bild picture,
.usp__bild picture,
.produkt__bild picture,
.station__bild picture,
.holz picture,
.laufband__bild picture,
.galerie__bild picture,
.galerie__daumen picture,
.geschenk__bild picture,
.person__bild picture,
.seitenkopf__bild picture {
    display: block;
    width: 100%;
    height: 100%;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text);
    line-height: 1.15;
    margin: 0 0 .6em;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-display); line-height: 1.05; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
    margin: 0 0 1.2em;
    max-width: 68ch;
}

a {
    color: var(--gold);
    text-decoration-color: rgba(198, 139, 57, .4);
    text-underline-offset: .22em;
    transition: color .25s ease, text-decoration-color .25s ease;
}

a:hover {
    color: var(--gold-light);
    text-decoration-color: var(--gold-light);
}

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

::selection {
    background: var(--gold);
    color: var(--bg-deep);
}

.nur-fuer-screenreader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .8rem 1.4rem;
    background: var(--gold);
    color: var(--bg-deep);
    font-weight: 500;
}

.sprungmarke:focus {
    left: var(--rand);
    top: .75rem;
}

/*
 * Ein Wort, das nicht in die Zeile passt, darf umbrechen statt die Seite
 * seitlich wegzuschieben (WCAG 1.4.10).
 *
 * Hier stand am 19.8. zunächst zusätzlich `hyphens: auto`. Das war zu viel
 * des Guten: Es griff auch dort, wo genug Platz für einen sauberen Umbruch
 * an der Wortgrenze war, und trennte die Überschrift der Startseite zu
 * „Handgefertigte Uni-" / „kate". Die eigentliche Ursache — die Rechtsseiten
 * mit ihren Wortungetümen — ist über die Schriftgröße von
 * `.titel-unterseite` gelöst. `overflow-wrap` bleibt als Netz für den Fall,
 * dass später doch einmal ein Wort auftaucht, das nirgends hineinpasst.
 */
h1, h2, h3, h4 {
    overflow-wrap: break-word;
}

/* ------------------------------------------------- 4. Bausteine */

.huelle {
    width: 100%;
    max-width: var(--max-breite);
    margin-inline: auto;
    padding-inline: var(--rand);
}

.sektion {
    padding-block: var(--sektion);
}

.sektion--tief {
    background: var(--bg-deep);
}

.kapitelmarke {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin: 0 0 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kapitelmarke::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}

.betont {
    font-style: italic;
    color: var(--gold);
}

.haarlinie {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 0;
}

.meta {
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-meta);
    font-weight: 500;
}

/* Textlink mit Haarlinie — die ruhige Variante des Buttons */

.textlink {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    padding-block: .9rem;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
}

.textlink::after {
    content: '';
    width: clamp(2rem, 4vw, 3.5rem);
    height: 1px;
    background: var(--gold);
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.textlink:hover { color: var(--gold-light); }
.textlink:hover::after { width: clamp(3.5rem, 7vw, 6rem); }

.textlink--leise { color: var(--text-meta); }
.textlink--leise::after { background: #3A322B; }
.textlink--leise:hover { color: var(--text); }
.textlink--leise:hover::after { background: var(--gold); }

/* Buttons */

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 1.9rem;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    background: transparent;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-decoration: none;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.knopf:hover {
    background: var(--gold);
    color: var(--bg-deep);
    transform: translateY(-1px);
}

.knopf--voll {
    background: var(--gradient-gold);
    border-color: transparent;
    color: var(--bg-deep);
}

.knopf--voll:hover {
    color: var(--bg-deep);
    filter: brightness(1.08);
}

.knopf--schlicht {
    border-color: var(--line);
    color: var(--text-muted);
}

.knopf--schlicht:hover {
    border-color: var(--gold);
    background: transparent;
    color: var(--gold);
}

/* ---------------------------------------------------- 5. Kopf */
/* Fest, transparent über dem Bild — verdichtet sich beim Scrollen.
   Das Logo trägt die Marke und ist deshalb bewusst groß. */

.kopf {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    padding-block: clamp(1.1rem, 2.2vw, 1.9rem);
    border-bottom: 1px solid transparent;
    transition: background .5s ease, backdrop-filter .5s ease,
                padding .5s ease, border-color .5s ease;
}

.kopf[data-verdichtet='ja'] {
    background: rgba(13, 12, 12, .86);
    backdrop-filter: blur(16px);
    border-bottom-color: var(--line);
    padding-block: .85rem;
}

.kopf__inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.kopf__logo {
    width: clamp(180px, 16vw, 290px);
    height: auto;
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.kopf[data-verdichtet='ja'] .kopf__logo { width: clamp(145px, 12vw, 210px); }

/* Seiten ohne Bildkopf brauchen Abstand unter dem festen Kopf. */
.hat-kopfabstand main { padding-top: clamp(5.5rem, 9vw, 8rem); }

.navigation {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 2.6vw, 2.4rem);
}

.navigation a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    position: relative;
    padding-block: .4rem;
}

.navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    transition: right .35s cubic-bezier(.22, 1, .36, 1);
}

.navigation a:hover,
.navigation a[aria-current] { color: var(--gold); }

.navigation a:hover::after,
.navigation a[aria-current]::after { right: 0; }

.menue-knopf {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    padding: .6rem .85rem;
    cursor: pointer;
}

@media (max-width: 860px) {
    .menue-knopf { display: block; }

    .navigation {
        position: fixed;
        inset: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--bg-deep);
        border-bottom: 1px solid var(--line);
        padding: clamp(5.5rem, 14vw, 7rem) var(--rand) 2rem;
        transform: translateY(-102%);
        transition: transform .45s cubic-bezier(.4, 0, .2, 1);
        z-index: -1;
    }

    .navigation[data-offen='ja'] { transform: translateY(0); }

    .navigation a {
        width: 100%;
        padding-block: 1rem;
        border-bottom: 1px solid var(--line);
        font-size: .95rem;
        letter-spacing: .14em;
    }
}

/* ---------------------------------------------------- 6. Hero */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--bg-deep);
}

.hero__bild {
    position: absolute;
    inset: 0;
}

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

.hero__schleier {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(13,12,12,.72) 0%, rgba(13,12,12,.20) 30%, rgba(13,12,12,.55) 62%, rgba(21,18,15,.96) 100%),
        linear-gradient(96deg, rgba(13,12,12,.78) 0%, rgba(13,12,12,.30) 45%, transparent 72%);
}

.hero__inhalt {
    position: relative;
    width: 100%;
    padding-top: clamp(9rem, 18vw, 12rem);
    padding-bottom: clamp(4.5rem, 11vw, 8rem);
}

/* Senkrechter Hinweis am rechten Rand */
.hero__scroll {
    position: absolute;
    right: var(--rand);
    bottom: clamp(4.5rem, 11vw, 8rem);
    display: none;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-label);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--text-faint);
    writing-mode: vertical-rl;
}

.hero__scroll::after {
    content: '';
    width: 1px;
    height: clamp(3rem, 6vw, 5rem);
    background: linear-gradient(180deg, #3A322B, transparent);
}

@media (min-width: 1100px) { .hero__scroll { display: flex; } }

.hero__eyebrow {
    /* Die globale Textbreite von 68ch würde die Zeile umbrechen. */
    max-width: none;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1.6rem;
}

/*
 * 15ch waren zu schmal für die eigene Überschrift.
 *
 * „Handgefertigte Unikate" sind 22 Zeichen und brauchen bei der
 * Display-Größe rund 1190 px — in 15ch (etwa 1035 px) passte das nie. Die
 * Zeile brach deshalb ein zweites Mal um, zusätzlich zum gewollten Umbruch
 * vor dem goldenen Teil: drei Zeilen, wo zwei gemeint waren. Mit 20ch steht
 * die erste Zeile ab 600 px Bildschirmbreite geschlossen, und der Wechsel
 * von Weiß auf Gold trägt die Trennung allein.
 */
.hero h1 {
    max-width: 20ch;
    font-size: clamp(2.6rem, 7.2vw + .3rem, 7rem);
    margin-bottom: .5em;
}

/*
 * Der Satz unter der Überschrift im Kopfbereich.
 *
 * Bis zum 19. August standen hier 46ch. Neben einer Überschrift, die über
 * 1100 px läuft, sah dieser Satz aus wie eine schmale Spalte, die jemand
 * vergessen hat — er brach auf breiten Bildschirmen in drei bis vier kurze
 * Zeilen um. 62ch ist breit genug für zwei ruhige Zeilen und bleibt
 * innerhalb des dunklen Verlaufs, der die Schrift vom Bild abhebt.
 */
.hero__subline {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    max-width: 62ch;
    margin-bottom: 2.6rem;
}

.hero__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* ---------------------------------------------------- 7. USPs */

/*
 * Drei Kacheln, und deshalb entweder eine Spalte oder drei — nie zwei.
 *
 * Mit `auto-fit` ergaben sich auf Tablet-Breite zwei Spalten. Bei drei
 * Kacheln blieb unten rechts eine leere Fläche stehen, die durch den
 * Rasterhintergrund umrandet aussah wie eine vierte, vergessene Kachel.
 */
.usp-gitter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 3rem;
}

@media (min-width: 1000px) {
    .usp-gitter { grid-template-columns: repeat(3, 1fr); }
}

.usp {
    background: var(--bg);
    padding: 0;
    display: flex;
    flex-direction: column;
}

.usp__bild {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.usp__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.usp:hover .usp__bild img { transform: scale(1.04); }

.usp__text {
    padding: 1.75rem 1.5rem 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.usp__nummer {
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--gold);
    margin-bottom: .9rem;
    font-weight: 500;
}

.usp h3 {
    font-size: 1.25rem;
    margin-bottom: .55em;
}

.usp p {
    font-size: .925rem;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

.usp__beleg {
    margin-top: auto;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.abschluss-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 3rem;
}

/* ------------------------------------------------ 8. Produkte */

.kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.kopfzeile h2 { margin-bottom: 0; }

.produkt-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.produkt {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.produkt:hover {
    border-color: var(--gold-shadow);
    transform: translateY(-3px);
    box-shadow: var(--shadow-product);
}

.produkt__bild {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-deep);
}

.produkt__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.produkt:hover .produkt__bild img { transform: scale(1.05); }

.produkt__marke {
    position: absolute;
    top: .85rem;
    left: .85rem;
    padding: .3rem .65rem;
    border-radius: 2px;
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    background: rgba(13, 12, 12, .78);
    backdrop-filter: blur(6px);
    color: var(--text-meta);
}

.produkt__marke--verkauft { color: var(--sold-text); }

/*
 * Reserviert bekommt die umgekehrte Marke: heller Grund, dunkle Schrift.
 * Eine reine Farbänderung wäre neben „Verfügbar" und „Verkauft" die dritte
 * Variante derselben Form und im Vorbeiscrollen kaum zu unterscheiden.
 */
.produkt__marke--reserviert {
    background: var(--reserved);
    color: #1C1815;
    backdrop-filter: none;
}

.produkt--reserviert .produkt__bild img { filter: saturate(.78); }

.produkt__text {
    padding: 1.4rem 1.35rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .55rem;
}

.produkt__kennung {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.produkt h3 {
    font-size: 1.15rem;
    margin: 0;
    line-height: 1.25;
}

.produkt__hoelzer {
    font-size: .85rem;
    color: var(--text-meta);
    margin: 0;
}

.produkt__fuss {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.produkt__preis {
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 500;
}

.produkt__preis del {
    display: block;
    font-size: .8rem;
    color: var(--text-faint);
    font-weight: 400;
}

.produkt__masse {
    font-size: .75rem;
    color: var(--text-faint);
    letter-spacing: .04em;
}

/* ------------------------------------------------- 9. Prozess */

/* Drei Stationen — wie beim USP-Raster: eine Spalte oder drei, nie zwei.
   Sonst stünde die dritte Station allein in der zweiten Reihe. */
.prozess {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: 1fr;
    margin-top: 3rem;
}

@media (min-width: 1000px) {
    .prozess { grid-template-columns: repeat(3, 1fr); }
}

.station {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

.station__bild {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

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

.station__text { padding: 1.75rem 1.5rem 2rem; }

.station__nummer {
    font-size: 2.6rem;
    font-family: var(--font-display);
    line-height: 1;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .75rem;
}

.station h3 {
    font-size: 1.2rem;
    margin-bottom: .5em;
}

.station p {
    font-size: .925rem;
    margin: 0;
}

/* ------------------------------------------------ 10. Material */

.hoelzer-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.holz {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 3 / 4;
}

.holz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.holz:hover img { transform: scale(1.06); }

.holz__text {
    position: absolute;
    inset: auto 0 0;
    padding: 1.5rem 1rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(13, 12, 12, .92));
}

.holz__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text);
    display: block;
}

.holz__botanisch {
    font-size: .7rem;
    font-style: italic;
    color: var(--text-meta);
}

.holz-liste {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.holz-marke {
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--text-meta);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .35rem .85rem;
}

/* -------------------------------------------------- 11. Archiv */

.laufband {
    overflow: hidden;
    position: relative;
    padding-block: 2.5rem;
    border-block: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.laufband__spur {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: laufen 60s linear infinite;
}

.laufband:hover .laufband__spur { animation-play-state: paused; }

@keyframes laufen {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.laufband__stueck {
    width: 260px;
    flex: none;
    text-decoration: none;
    color: inherit;
}

.laufband__bild {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    filter: grayscale(.35) brightness(.85);
    transition: filter .5s ease;
}

.laufband__stueck:hover .laufband__bild { filter: none; }

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

.laufband__name {
    display: block;
    margin-top: .7rem;
    font-size: .85rem;
    color: var(--text-meta);
}

/* ------------------------------------------------ 12. Kolophon */

.kolophon {
    text-align: center;
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.kolophon__marke {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--text);
    margin-bottom: 1rem;
}

.kolophon__zeile {
    font-size: var(--fs-label);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/*
 * Absätze sind grundsätzlich auf 68 Zeichen begrenzt. Bei dieser kleinen
 * Schrift ist die Textbox dadurch viel schmaler als der Kolophon und sitzt
 * links — `text-align: center` hätte den Text nur innerhalb dieser schmalen
 * Box zentriert, nicht im Bereich. Beide Zeilen bekommen deshalb die volle
 * Breite und werden selbst mittig gesetzt.
 */
.kolophon__marke,
.kolophon__zeile {
    max-width: none;
    margin-inline: auto;
    text-wrap: balance;
}

/* ---------------------------------------------------- 13. Fuß */

.fuss {
    background: var(--bg-deep);
    border-top: 1px solid var(--line);
    padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.fuss__gitter {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

/* Bis zum 19.8. standen hier h4. In der Gliederung sprang die Seite damit
   von h1 auf h4 — auf der Bestellseite ohne jede Zwischenstufe. Die
   Spaltenköpfe sind jetzt h2 und sehen unverändert aus. */
.fuss h2 {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin-bottom: 1.1rem;
    font-weight: 500;
}

.fuss ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/*
 * Schaltflaechen sind hier ausgenommen.
 *
 * `.fuss a:hover` ist spezifischer als `.knopf--widerruf:hover` (eine Klasse,
 * ein Element, eine Pseudoklasse gegen eine Klasse und eine Pseudoklasse) und
 * hat dessen Schriftfarbe ueberschrieben: Beim Ueberfahren wurde der
 * Hintergrund gold und die Schrift gleich mit — die Beschriftung verschwand.
 * Statt die Knopfregel hochzuruesten, nehmen wir Schaltflaechen aus der
 * allgemeinen Fusszeilenregel heraus; damit stimmt auch jeder kuenftige Knopf.
 */
.fuss a:not(.knopf) {
    color: var(--text-muted);
    text-decoration: none;
    font-size: .9rem;
}

.fuss a:not(.knopf):hover { color: var(--gold); }

.fuss p {
    font-size: .875rem;
    color: var(--text-meta);
    margin-bottom: .5em;
}

/* Der Verweis auf Instagram in der Werkstatt-Spalte.

   Zeichen und Wort stehen zusammen in einer Fläche: Ein Zeichen allein
   wäre für die Vorlesehilfe stumm und für den Finger auf dem Handy
   knapp — mit dem Wort daneben ist beides erledigt, ohne dass es eine
   Sonderbehandlung braucht. Die 44 px Mindesthöhe sind die Zielgröße
   aus WCAG 2.5.8. */
.fuss__sozial { margin-top: 1rem; }

.fuss__sozial a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
}

.fuss__sozial-zeichen { flex: none; }

/* Der KI-Hinweis über der Schlusszeile. Nicht so klein wie die Zeile
   darunter — er muss gelesen werden können, nicht nur vorhanden sein. */
.fuss__bilder {
    margin: 3rem 0 0;
    max-width: 80ch;
    font-size: .86rem;
    color: var(--text-meta);
}

/* Der Verweis soll nicht mitten im Namen umbrechen. */
.fuss__bilder a { white-space: nowrap; }

.fuss__unten {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-faint);
}

/* ------------------------------------------------- 14. Motion */

[data-enthuellen] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

[data-enthuellen='sichtbar'] {
    opacity: 1;
    transform: none;
}

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

    [data-enthuellen] {
        opacity: 1;
        transform: none;
    }

    .laufband__spur { animation: none; }
}

/* =============================================================
   15. Shop, Archiv und Produktdetail
   ============================================================= */

/* Der Kopfblock einer Unterseite — entweder direkt unter dem Bildkopf
   (Unikate, Archiv, Anfrage, Bestellen, Widerruf erklären) oder als
   Textkopf ohne Bild (Rechtsseiten). Beide Fälle teilen sich dieselbe
   Zahl, damit der Auftakt überall gleich sitzt. */
.sektion--kopf { padding-block: var(--sektion-kopf) clamp(2rem, 4vw, 3rem); }

/* Und derselbe Wert für Seiten, deren erster Block kein --kopf ist
   (Werkstatt). Sonst bliebe dort der volle Sektionsabstand stehen.

   Der Zuschlag von 1.5rem korrigiert einen Unterschied, der lange
   unbemerkt blieb: Unikate, Archiv, Anfrage und Bestellen beginnen mit
   einem Einleitungsabsatz, dessen oberer Rand von 1.5rem durch die Hülle
   nach außen durchschlägt und den Auftakt um 24 px vergrößert. Die
   Werkstattseite beginnt mit einer Kapitelmarke ohne Rand und stand
   deshalb 24 px höher — gemessen 86 gegen 110 px bei 1440 px Breite, und
   dieselben 24 px bei 390 und 834 px.

   Deshalb zwei Regeln statt einer: Der Rand des ersten Elements wird
   stillgelegt, der Abstand steht danach an genau einer Stelle. Er hängt
   damit nicht mehr davon ab, womit eine Seite anfängt, und kann beim
   Anlegen einer weiteren Unterseite nicht wieder auseinanderlaufen. */
.seitenkopf + .sektion > .huelle > :first-child { margin-top: 0; }

.seitenkopf + .sektion:not(.sektion--ohne-oben) {
    padding-top: calc(var(--sektion-kopf) + 1.5rem);
}

.sektion--ohne-oben { padding-top: 0; }

.einleitung {
    font-size: clamp(1rem, .5vw + .9rem, 1.15rem);
    max-width: 62ch;
    color: var(--text-muted);
    margin-top: 1.5rem;
}

.hinweis-leer {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
    color: var(--text-meta);
    max-width: 52ch;
}

/* ------------------------------------------------------- Filter */

.filter {
    border-block: 1px solid var(--line);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filter__gruppe { border: 0; padding: 0; margin: 0; }

.filter__label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin-bottom: .85rem;
    padding: 0;
}

.filter__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: .85rem;
    letter-spacing: .03em;
    cursor: pointer;
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.chip:hover { border-color: var(--gold-shadow); color: var(--text); }

.chip[aria-pressed="true"] {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(198, 139, 57, .08);
}

.chip__zahl { font-size: .7rem; color: var(--text-faint); }
.chip[aria-pressed="true"] .chip__zahl { color: var(--gold); }

.filter__reihe {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: flex-end;
}

.filter__gruppe--schmal { min-width: 190px; flex: 1 1 190px; max-width: 280px; margin: 0; }

.feld {
    width: 100%;
    padding: .7rem .9rem;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: .9rem;
}

.feld:focus-visible { border-color: var(--gold); }

.regler {
    width: 100%;
    accent-color: var(--gold);
    height: 2.2rem;
}

.filter__ergebnis {
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin: 0;
}

.filter__zuruecksetzen {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--gold-shadow);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 0 0 .15em;
    cursor: pointer;
}

.filter__zuruecksetzen:hover { color: var(--gold-light); border-color: var(--gold-light); }

[data-eintrag][hidden] { display: none; }

/* --------------------------------------------------- Brotkrume */

.brotkrume {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    font-size: var(--fs-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.brotkrume .huelle { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.brotkrume a { color: var(--text-meta); text-decoration: none; }
.brotkrume a:hover { color: var(--gold); }

/* ------------------------------------------------- Produktseite */

.werkstueck { padding-block: clamp(2rem, 4vw, 3.5rem) var(--sektion); }

.werkstueck__raster { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

@media (min-width: 950px) {
    .werkstueck__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
    .galerie { position: sticky; top: 100px; }
}

.galerie__gross {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-deep);
    aspect-ratio: 4 / 3;
}

.galerie__bild { margin: 0; position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.galerie__bild.ist-aktiv { opacity: 1; }
.galerie__bild picture, .galerie__bild img { width: 100%; height: 100%; object-fit: cover; }

.galerie__leer {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--text-faint);
    font-size: .9rem;
    text-align: center;
    padding: 2rem;
}

.galerie__auswahl { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }

.galerie__daumen {
    width: 84px;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-deep);
    cursor: pointer;
    opacity: .55;
    transition: opacity .3s ease, border-color .3s ease;
}

.galerie__daumen picture, .galerie__daumen img { width: 100%; height: 100%; object-fit: cover; }
.galerie__daumen:hover { opacity: .85; }
.galerie__daumen.ist-aktiv { opacity: 1; border-color: var(--gold); }

.werkstueck__kennung {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: var(--fs-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin-bottom: 1.25rem;
}

.werkstueck__stempel {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .25rem .7rem;
    color: var(--gold);
    font-size: .65rem;
}

.werkstueck__angaben h1 { font-size: clamp(1.9rem, 3vw + .6rem, 3.1rem); margin-bottom: .5em; }

.werkstueck__tagline { color: var(--text-meta); margin-bottom: 1.75rem; }
.werkstueck__tagline strong { color: var(--text); font-weight: 500; }

.werkstueck__preis {
    font-size: clamp(1.5rem, 2vw + .6rem, 2.1rem);
    font-family: var(--font-display);
    color: var(--text);
    margin-bottom: 1.75rem;
    line-height: 1.2;
}

.werkstueck__preis del { font-size: .55em; color: var(--text-faint); margin-left: .5rem; }

.werkstueck__preis--archiv { color: var(--sold-text); font-size: clamp(1.1rem, 1.4vw + .6rem, 1.5rem); }

.werkstueck__preiszusatz {
    display: block;
    font-family: var(--font-body);
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--text-faint);
    margin-top: .45rem;
}

.knopf--breit { width: 100%; justify-content: center; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }
.knopf[disabled]:hover { background: transparent; color: var(--gold); transform: none; }
.knopf--voll[disabled]:hover { background: var(--gradient-gold); color: var(--bg-deep); }

.kauf-block, .anfrage-block {
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold);
    border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    margin-bottom: 2.25rem;
}

.anfrage-block h2 { font-size: clamp(1.3rem, 1.6vw + .7rem, 1.8rem); margin-bottom: .6em; }
.anfrage-block p { font-size: .95rem; }

.kauf-block--reserviert { border-left-color: var(--reserved); }

.reserviert-hinweis {
    font-size: .95rem;
    color: var(--text-muted);
    margin: 0 0 1.3rem;
}

.reserviert-hinweis__marke {
    display: block;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--reserved);
    margin-bottom: .55rem;
}

.werkstueck__fussnote {
    font-size: .78rem;
    color: var(--text-faint);
    margin: .9rem 0 0;
    line-height: 1.6;
}

.werkstueck__fussnote a { color: var(--gold); }

.werkstueck__text { margin-bottom: 2.25rem; }
.werkstueck__text p { color: var(--text-muted); }

/* ------------------------------------------------- Datenblatt */

.datenblatt {
    margin: 0 0 2.25rem;
    border-top: 1px solid var(--line);
}

.datenblatt > div {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
}

.datenblatt dt {
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.datenblatt dd { margin: 0; color: var(--text-muted); font-size: .95rem; }

/* -------------------------------------------------- Akkordeon */

.akkordeon details {
    border-bottom: 1px solid var(--line);
}

.akkordeon details:first-child { border-top: 1px solid var(--line); }

.akkordeon summary {
    padding: 1.1rem 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text);
}

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

.akkordeon summary::after {
    content: '+';
    font-size: 1.2rem;
    color: var(--gold);
    line-height: 1;
    transition: transform .3s ease;
}

.akkordeon details[open] summary::after { transform: rotate(45deg); }

.akkordeon p {
    padding-bottom: 1.2rem;
    margin: 0;
    color: var(--text-meta);
    font-size: .93rem;
    max-width: 60ch;
}

/* =============================================================
   16. Neue Bausteine — Geschenk, Werkstatt, Seitenkopf
   ============================================================= */

.einleitung--leise { color: var(--text-faint); font-size: 1rem; }

/* Holz-Kacheln mit Kurztext */
.holz__nummer {
    display: block;
    font-size: .65rem;
    letter-spacing: .18em;
    color: var(--gold);
    margin-bottom: .3rem;
}

.holz__beschreibung {
    display: block;
    font-size: .78rem;
    color: var(--text-meta);
    line-height: 1.45;
    margin-top: .35rem;
}

.holz { aspect-ratio: 3 / 4.2; }
.holz__text { padding-top: 3rem; }

/* Geschenk-Abschnitt */
.geschenk {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .geschenk { grid-template-columns: 1fr 1fr; }
}

.geschenk__bild {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 4 / 3;
}

.geschenk__bild picture, .geschenk__bild img { width: 100%; height: 100%; object-fit: cover; }
.geschenk .knopf { margin-top: 1rem; }

/* Seitenkopf mit Bild — dieselbe Bühne auf jeder Unterseite.
   Höhe, Sockel und Schutzpolster stehen als Zahlen oben im Wurzelblock. */
.seitenkopf {
    position: relative;
    min-height: var(--seitenkopf-hoehe);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--bg-deep);
}

.seitenkopf__bild { position: absolute; inset: 0; }
.seitenkopf__bild picture, .seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; }

.seitenkopf__schleier {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(13,12,12,.6) 0%, rgba(13,12,12,.25) 40%, rgba(21,18,15,.95) 100%),
        linear-gradient(96deg, rgba(13,12,12,.75) 0%, transparent 65%);
}

/* Der Text sitzt unten auf der Bühne. Sein Abstand zur Unterkante ist die
   einzige Zahl, die den Auftakt bestimmt — sie gilt auf jeder Unterseite
   und in jeder Breite gleich. Das obere Polster ist nur die Sicherung aus
   dem Wurzelblock und trägt im Regelfall nichts zur Höhe bei. */
.seitenkopf__inhalt {
    position: relative;
    width: 100%;
    padding-block: var(--seitenkopf-schutz) var(--seitenkopf-sockel);
}

.seitenkopf h1 {
    font-size: var(--fs-h1-unterseite, clamp(2.2rem, 5vw + .5rem, 4.5rem));
    /* Breit genug, dass eine zweizeilige Überschrift nicht zufällig ein
       drittes Mal umbricht — der gewollte Umbruch steht als <br> im Text. */
    max-width: 26ch;
    text-wrap: balance;
    margin-bottom: .5em;
}

/* Person-Abschnitt */
.person { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

@media (min-width: 900px) {
    .person { grid-template-columns: 1.1fr .9fr; }
}

.person__bild {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 4 / 5;
}

.person__bild picture, .person__bild img { width: 100%; height: 100%; object-fit: cover; }

.zitat {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding-left: clamp(1.25rem, 2.5vw, 2rem);
    border-left: 2px solid var(--gold);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.4vw + .8rem, 1.7rem);
    font-style: italic;
    color: var(--text);
    line-height: 1.35;
    max-width: 34ch;
}

/* Werkstatt-Galerie */
/* Ebenfalls drei Bilder — eine Spalte oder drei, nie zwei. */
.werkstatt-galerie {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 1000px) {
    .werkstatt-galerie { grid-template-columns: repeat(3, 1fr); }
}

.werkstatt-galerie figure { margin: 0; }

.werkstatt-galerie figure > picture {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

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

.werkstatt-galerie figcaption {
    margin-top: .85rem;
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-meta);
}

/* Handwerk im Detail */
.handwerk { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; border-top: 1px solid var(--line); }

.handwerk > div {
    display: grid;
    gap: .6rem 2.5rem;
    padding: clamp(1.25rem, 2.5vw, 1.9rem) 0;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 800px) {
    .handwerk > div { grid-template-columns: minmax(180px, 28%) 1fr; }
}

.handwerk dt {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.1vw + .8rem, 1.35rem);
    color: var(--text);
}

.handwerk dd { margin: 0; color: var(--text-meta); font-size: .95rem; max-width: 62ch; }

/* =============================================================
   17. Überschriften-Stufen für Unterseiten
   -------------------------------------------------------------
   Die Startseite behält die große Display-Größe. Unterseiten
   führen mit der kleineren Stufe der Werkstattseite, und alle
   Abschnittsüberschriften darunter teilen sich eine Größe.
   ============================================================= */

:root {
    --fs-h1-unterseite: clamp(2.2rem, 5vw + .5rem, 4.5rem);
    --fs-h2-abschnitt:  clamp(1.6rem, 2.4vw + .8rem, 2.6rem);
}

.titel-unterseite {
    /*
     * Wie --fs-h1-unterseite, nur mit kleinerem Mindestwert.
     *
     * Diese Größe trägt die Rechtsseiten und die 404-Seite, und dort stehen
     * Wörter wie „Geschäftsbedingungen" — zwanzig Zeichen, die bei 35 px
     * Schrift auf einem 320 px breiten Bildschirm nicht in eine Zeile
     * passen. Sie brachen dann mitten im Wort um und schoben die Seite
     * seitlich weg. Ab etwa 440 px ist der Wert unverändert.
     */
    font-size: clamp(1.6rem, 5vw + .5rem, 4.5rem);
    /* Breit genug, dass die erste Zeile nicht zufällig umbricht — der
       gewollte Umbruch steht als <br> vor dem kursiven Teil. */
    max-width: 26ch;
    text-wrap: balance;
}

.titel-abschnitt {
    font-size: var(--fs-h2-abschnitt);
    max-width: 26ch;
    /* Verteilt die Wörter gleichmäßig auf die Zeilen, statt eine letzte
       Zeile mit einem einzelnen Wort stehen zu lassen. */
    text-wrap: balance;
}

/* Fließtext, neben dem nichts steht, nutzt die volle Spalte. */
.einleitung--breit { max-width: 74ch; }

/*
 * Und wo auch das noch zu schmal wirkt: die ganze Breite der Hülle.
 * Der globale Riegel von 68ch schützt die Lesbarkeit in Textkolonnen —
 * bei einem einzelnen Absatz, der über einem Bildraster steht, lässt er
 * die Zeile dagegen mitten auf der Seite abbrechen. Genau dort steht
 * `.volle-breite`. Sparsam einsetzen: über 90ch liest niemand gern.
 *
 * Nachtrag vom 19. August: „keine Grenze" war eine zu weite Auslegung.
 * Auf 1440 px kamen so 113 Zeichen je Zeile heraus, auf 1920 px über 150 —
 * eine Zeile, an deren Ende das Auge den Anfang der nächsten nicht mehr
 * findet. Die Deckelung ist jetzt so gesetzt, dass rund 85 Zeichen stehen:
 * deutlich breiter als der Riegel für Textkolonnen, aber noch lesbar.
 */
.volle-breite { max-width: 90ch; }

/* =============================================================
   18. Anfrageseite
   ============================================================= */

/* ------------------------------------------------ Bezugsstück */

.bezug {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.4rem, 3vw, 2.25rem);
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold);
    border-radius: var(--radius);
    background: var(--surface);
}

@media (min-width: 800px) {
    .bezug { grid-template-columns: minmax(220px, 360px) 1fr; }
}

.bezug__bild {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 4 / 3;
}

.bezug__bild picture,
.bezug__bild img { width: 100%; height: 100%; object-fit: cover; }

.bezug__text .bezug__marke {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    /* Nicht var(--sold): der Ton erreicht auf der Kartenfläche nur 3,9:1. */
    color: var(--sold-text);
    margin: 0 0 .9rem;
}

.bezug__text h2 {
    font-size: clamp(1.35rem, 1.8vw + .7rem, 2rem);
    margin-bottom: .35em;
}

.bezug__text .bezug__kennung {
    font-size: .85rem;
    letter-spacing: .04em;
    color: var(--text-meta);
    margin-bottom: 1.1em;
}

.bezug__text p { color: var(--text-muted); font-size: .95rem; }

.bezug__text .bezug__wechsel {
    font-size: var(--fs-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 0;
}

/* ---------------------------------------------------- Ablauf */

.ablauf {
    list-style: none;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.ablauf__schritt {
    display: grid;
    gap: .35rem 2rem;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    padding: clamp(1.4rem, 3vw, 2.1rem) 0;
    border-bottom: 1px solid var(--line);
}

.ablauf__nummer {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--gold);
    padding-top: .35rem;
}

.ablauf__schritt h3 {
    font-size: clamp(1.1rem, 1.1vw + .8rem, 1.4rem);
    margin-bottom: .35em;
}

.ablauf__schritt p {
    margin: 0;
    color: var(--text-meta);
    font-size: .95rem;
    max-width: 68ch;
}

/* ----------------------------------------------- Bestätigung */

.bestaetigung {
    max-width: 68ch;
    padding: clamp(1.6rem, 4vw, 2.75rem);
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold);
    border-radius: var(--radius);
    background: var(--surface);
}

.bestaetigung__marke {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1rem;
}

.bestaetigung h2 {
    font-size: clamp(1.5rem, 2vw + .8rem, 2.2rem);
    margin-bottom: .5em;
}

.bestaetigung p { color: var(--text-muted); }

.bestaetigung__nachsatz {
    font-size: .88rem;
    color: var(--text-faint);
}

.bestaetigung__wege {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

/* ------------------------------------------------- Formular */

.formular {
    margin-top: clamp(2rem, 4vw, 3rem);
    max-width: 62rem;
}

.formular__gruppe {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.formular__gruppe legend {
    padding: 0 1.25rem 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-meta);
}

.formular__zeile {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (min-width: 700px) {
    .formular__zeile { grid-template-columns: 1fr 1fr; }
    .formular__zeile--drei { grid-template-columns: repeat(3, 1fr); }
}

.formular__feld { margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.formular__zeile > .formular__feld { margin-bottom: 0; }

.formular__feld label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin-bottom: .6rem;
}

.pflicht {
    color: var(--gold);
    text-decoration: none;
    border: 0;
    margin-left: .15em;
}

.formular input[type='text'],
.formular input[type='email'],
.formular input[type='tel'],
.formular input[type='number'],
.formular textarea,
.formular select {
    width: 100%;
    padding: .85rem 1rem;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.5;
    transition: border-color .25s ease, background .25s ease;
}

.formular textarea {
    resize: vertical;
    min-height: 9rem;
    line-height: 1.65;
}

.formular select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                      linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: right 1.15rem center, right .85rem center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
    cursor: pointer;
}

.formular input::placeholder,
.formular textarea::placeholder { color: var(--text-faint); opacity: 1; }

.formular input:hover,
.formular textarea:hover,
.formular select:hover { border-color: #3A322B; }

.formular input:focus,
.formular textarea:focus,
.formular select:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-color: var(--gold);
    background: var(--surface);
}

/* Zahlenfelder ohne Pfeilchen — die Tastatur genügt. */
.formular input[type='number'] { -moz-appearance: textfield; }
.formular input[type='number']::-webkit-outer-spin-button,
.formular input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.formular__hinweis {
    font-size: .78rem;
    color: var(--text-faint);
    margin: .5rem 0 0;
    max-width: 52ch;
}

.formular__hinweis--gruppe { margin: 0 0 1.5rem; }

.formular__fehler {
    font-size: .82rem;
    color: #F0A99B;
    margin: .5rem 0 0;
    max-width: 58ch;
}

.formular__feld.hat-fehler input,
.formular__feld.hat-fehler textarea,
.formular__feld.hat-fehler select { border-color: var(--error); }

.formular__feld--kasten {
    padding: clamp(1.1rem, 2.5vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.formular__feld--kasten.hat-fehler { border-color: var(--error); }

.formular__feld .formular__ankreuz {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
    align-items: start;
    margin: 0;
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
    line-height: 1.6;
    cursor: pointer;
}

.formular__feld .formular__ankreuz input[type='checkbox'] {
    width: 1.15rem;
    height: 1.15rem;
    margin: .2rem 0 0;
    accent-color: var(--gold);
    cursor: pointer;
}

.formular__stoerung {
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
    padding: clamp(1.1rem, 2.5vw, 1.6rem);
    max-width: var(--kastenbreite);
    border: 1px solid var(--error);
    border-left: 3px solid var(--error);
    border-radius: var(--radius);
    background: rgba(194, 90, 75, .08);
    color: var(--text-muted);
    font-size: .92rem;
}

.formular__stoerung p { margin: 0; max-width: none; }
.formular__stoerung ul { margin: .75rem 0 0; padding-left: 1.2rem; }
.formular__stoerung li { margin-bottom: .35rem; }
.formular__stoerung a { color: #F0A99B; }

.formular__abschluss {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.formular__fussnote {
    font-size: .8rem;
    color: var(--text-faint);
    margin: 0;
    max-width: 64ch;
    line-height: 1.65;
}

/* Für Menschen unsichtbar — nur automatisierte Einsendungen füllen das aus. */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =============================================================
   19. Rechtstexte — Impressum, Datenschutz, AGB, Widerruf
   -------------------------------------------------------------
   Lange Fließtexte. Alles ist auf Lesbarkeit ausgelegt: ruhige
   Zeilenlänge, deutliche Abstände zwischen den Abschnitten, ein
   Inhaltsverzeichnis, das auf dem Desktop mitläuft.
   ============================================================= */

.rechtstext {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 1000px) {
    .rechtstext--mit-verzeichnis {
        grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
        gap: clamp(3rem, 6vw, 6rem);
    }
}

/* ---------------------------------------- Inhaltsverzeichnis */

.rechtstext__verzeichnis {
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
}

@media (min-width: 1000px) {
    .rechtstext__verzeichnis {
        position: sticky;
        top: clamp(6rem, 9vw, 8rem);
        max-height: calc(100vh - 11rem);
        overflow-y: auto;
    }
}

.rechtstext__verzeichnis-titel {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin: 0 0 1.1rem;
}

.rechtstext__verzeichnis ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: verzeichnis;
}

.rechtstext__verzeichnis li {
    counter-increment: verzeichnis;
    margin-bottom: .55rem;
    line-height: 1.45;
}

.rechtstext__verzeichnis a {
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    gap: .3rem;
    font-size: .82rem;
    color: var(--text-meta);
    text-decoration: none;
}

.rechtstext__verzeichnis a::before {
    content: counter(verzeichnis, decimal-leading-zero);
    color: var(--gold);
    font-size: .7rem;
    letter-spacing: .1em;
    padding-top: .18em;
}

.rechtstext__verzeichnis a:hover { color: var(--text); }

/* -------------------------------------------------- Textkörper */

/*
 * 72ch klangen nach Lehrbuch, ergaben aber gemessene 86 Zeichen je Zeile:
 * Die Einheit `ch` ist die Breite der Null, und die ist in dieser Schrift
 * breiter als der Durchschnittsbuchstabe. Auf Impressum und Widerrufs-
 * belehrung — den beiden Seiten ohne Inhaltsverzeichnis — lief der Text
 * damit auf 779 px. 64ch bringt alle vier Rechtsseiten auf dieselben rund
 * 76 Zeichen.
 */
.rechtstext__inhalt {
    max-width: 64ch;
    color: var(--text-muted);
}

.rechtstext__inhalt h2 {
    font-size: clamp(1.25rem, 1.4vw + .8rem, 1.7rem);
    margin: clamp(2.75rem, 5vw, 4rem) 0 .7em;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
    /* Damit ein Sprung aus dem Verzeichnis nicht unter dem Kopf landet. */
    scroll-margin-top: clamp(6rem, 10vw, 9rem);
}

.rechtstext__inhalt > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.rechtstext__inhalt h3 {
    font-size: clamp(1.05rem, 1vw + .75rem, 1.25rem);
    margin: 2.25em 0 .6em;
    color: var(--text);
    scroll-margin-top: clamp(6rem, 10vw, 9rem);
}

.rechtstext__inhalt p {
    margin: 0 0 1.15em;
    max-width: none;
    font-size: .95rem;
    line-height: 1.75;
}

.rechtstext__inhalt ul,
.rechtstext__inhalt ol {
    margin: 0 0 1.5em;
    padding-left: 1.4rem;
}

.rechtstext__inhalt li {
    margin-bottom: .7em;
    font-size: .95rem;
    line-height: 1.75;
}

.rechtstext__inhalt li::marker { color: var(--text-faint); }
.rechtstext__inhalt ol > li::marker { color: var(--gold); font-size: .85em; }

.rechtstext__inhalt strong { color: var(--text); font-weight: 500; }

.rechtstext__inhalt blockquote {
    margin: 1.75em 0;
    padding: 1rem 0 1rem 1.4rem;
    border-left: 2px solid var(--gold);
    background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.rechtstext__inhalt blockquote p {
    margin: 0;
    padding-right: 1.2rem;
    color: var(--text);
}

/* -------------------------------------- Verweise auf die anderen Seiten */

.rechtstext__weitere {
    margin-top: clamp(3.5rem, 8vw, 6rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
}

.rechtstext__weitere ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin: 0;
    padding: 0;
}

.rechtstext__weitere a {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
}

/* =============================================================
   20. Bild-Text-Bereiche und Schieber
   ============================================================= */

/* ------------------------------------------ Bild und Text nebeneinander */

.bild-text {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
    .bild-text { grid-template-columns: 1fr 1fr; }

    /* Die Anordnung wechselt von Abschnitt zu Abschnitt: einmal Bild
       links, im nächsten Bereich rechts. Im Quelltext steht das Bild
       immer zuerst — die Reihenfolge dreht nur die Darstellung, damit
       Vorleseprogramme weiter der inhaltlichen Folge begegnen. */
    .bild-text--bild-rechts .bild-text__bild { order: 2; }
}

.bild-text__text h2 { margin-bottom: .7em; }
.bild-text__text p { color: var(--text-muted); max-width: 56ch; }

.bild-text__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

/* ----------------------------------- Vierer-Kachel aus Werkstücken */

.archiv-kachel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(.6rem, 1.5vw, 1rem);
}

.archiv-kachel__stueck {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color .35s ease, transform .35s ease;
}

.archiv-kachel__stueck:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.archiv-kachel__stueck picture,
.archiv-kachel__stueck img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.archiv-kachel__stueck:hover img { transform: scale(1.05); }

.archiv-kachel__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem .85rem .7rem;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(180deg, transparent, rgba(13, 12, 12, .85) 55%);
}

/* Nur ein Stück vorhanden? Dann füllt es die Fläche allein. */
.archiv-kachel:has(> :only-child) { grid-template-columns: 1fr; }

/* -------------------------------------------------------- Schieber */

.schieber { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }

.schieber__spur {
    display: grid;
    grid-auto-flow: column;
    /* Ein Board je Ansicht, ein schmaler Streifen des nächsten
       bleibt sichtbar — sonst wäre nicht zu erkennen, dass es weitergeht. */
    grid-auto-columns: calc(100% - 1.6rem);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Platz für den Fokusrahmen und den Hover-Versatz der Karten. */
    padding: 4px 4px 1.25rem;
    margin: -4px -4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

@media (min-width: 700px)  { .schieber__spur { grid-auto-columns: calc(50% - 1rem); } }
@media (min-width: 1000px) { .schieber__spur { grid-auto-columns: calc(33.333% - 1.34rem); } }

.schieber__spur::-webkit-scrollbar { height: 4px; }
.schieber__spur::-webkit-scrollbar-track { background: transparent; }
.schieber__spur::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.schieber__eintrag { scroll-snap-align: start; min-width: 0; }

.schieber__steuerung {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.schieber__steuerung[hidden] { display: none; }

.schieber__knopf {
    width: 2.9rem;
    height: 2.9rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--gold);
    cursor: pointer;
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.schieber__knopf:hover:not(:disabled) {
    border-color: var(--gold);
    background: var(--surface);
    color: var(--gold-light);
}

.schieber__knopf:disabled {
    color: var(--text-faint);
    cursor: default;
    opacity: .45;
}

/* ---------------------------- Holzarten: Beschriftung unter dem Bild */

.holz {
    margin: 0;
    aspect-ratio: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.holz__bild { aspect-ratio: 3 / 3.4; overflow: hidden; }

.holz__bild picture,
.holz__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.holz__text {
    display: block;
    position: static;
    padding: 1.1rem 1rem 1.25rem;
    background: none;
}

.holz__nummer { margin-bottom: .35rem; }

.holz__name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text);
}

.holz__beschreibung { color: var(--text-meta); }

/* =============================================================
   19. Widerrufsschaltfläche — § 356a BGB
   -------------------------------------------------------------
   Pflicht seit dem 19. Juni 2026: ständig verfügbar, hervorgehoben
   platziert, leicht zugänglich. Deshalb eine eigene Zeile im Fuß
   mit Rahmen und Fläche statt eines weiteren Textlinks in der
   Liste „Rechtliches" — dort wäre sie schlechter zu finden als
   das Impressum, und genau das darf sie nicht sein.
   ============================================================= */

.fuss__widerruf {
    display: grid;
    gap: 1rem 2rem;
    align-items: center;
    padding-top: clamp(1.5rem, 4vw, 2.25rem);
    margin-top: clamp(1.5rem, 4vw, 2.25rem);
    border-top: 1px solid var(--line);
}

@media (min-width: 780px) {
    .fuss__widerruf { grid-template-columns: auto minmax(0, 1fr); }
}

.fuss__widerruf p {
    margin: 0;
    max-width: 64ch;
    font-size: .9rem;
    color: var(--text-meta);
}

/*
 * Verweise mitten im Fließtext bekommen eine Unterstreichung.
 *
 * Nicht aus Gewohnheit, sondern weil WCAG 1.4.1 es hier verlangt: Ein Link,
 * der sich nur durch die Farbe vom umgebenden Text abhebt, braucht dazwischen
 * einen Kontrast von mindestens 3:1. Gold auf Metatext erreicht 1,5:1 — für
 * jemanden mit Farbsehschwäche ist der Link damit unsichtbar. In Listen und
 * auf Schaltflächen stellt sich die Frage nicht; dort steht der Verweis
 * für sich.
 */
.fuss__widerruf p a {
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

.knopf--widerruf {
    justify-self: start;
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(198, 139, 57, .08);
    font-weight: 500;
}

.knopf--widerruf:hover,
.knopf--widerruf:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-deep);
}

/* ------------------------------------------- Die Erklärungsseite */

.widerruf-kasten {
    max-width: 68ch;
    padding: clamp(1.6rem, 4vw, 2.75rem);
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold);
    border-radius: var(--radius);
    background: var(--surface);
}

.widerruf-kasten dl { margin: 1.5rem 0 0; display: grid; gap: .55rem 1.25rem; }
@media (min-width: 620px) { .widerruf-kasten dl { grid-template-columns: auto minmax(0, 1fr); } }
.widerruf-kasten dt { color: var(--text-meta); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.widerruf-kasten dd { margin: 0; color: var(--text); }

.widerruf-eingang {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .92rem;
    color: var(--text-meta);
}

/* Pflichtangaben nach Artikel 19 GPSR — ruhig, aber lesbar. */
.produktsicherheit__hersteller { font-style: normal; }
.produktsicherheit__nummer { color: var(--text-meta); font-size: .9rem; }

/* =============================================================
   22. Bezahlvorgang — Eingabe, Übersicht, Ergebnis
   -------------------------------------------------------------
   Der Checkout borgt sich fast alles vom Formular und von den
   Rechtstexten. Eigen ist nur, was die Pflichtangaben nach
   § 312j Abs. 2 BGB tragen muss: ein ruhiger Rahmen, der klar
   vom Umfeld absteht, und die Zeile mit dem Gesamtpreis, die
   optisch schwerer wiegt als alles andere darin.
   ============================================================= */

.checkout-rahmen {
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
    padding: clamp(1.1rem, 2.5vw, 1.6rem);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    background: var(--surface);
    max-width: var(--kastenbreite);
}

.checkout-rahmen p {
    margin: 0 0 .6rem;
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.65;
    max-width: none;
}

.checkout-rahmen p:last-child { margin-bottom: 0; }
.checkout-rahmen strong { color: var(--text); font-weight: 500; }

.checkout-hinweis {
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
    max-width: var(--kastenbreite);
    padding: .9rem 1.15rem;
    border: 1px dashed var(--gold-shadow);
    border-radius: var(--radius);
    color: var(--text-meta);
    font-size: .88rem;
}

.checkout-hinweis strong { color: var(--gold); font-weight: 500; }

/* ------------------------------------------- Schritt 2: Prüfen */

.checkout-pruefen { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.checkout-daten {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    margin: clamp(1.5rem, 3vw, 2rem) 0;
}

@media (min-width: 760px) {
    .checkout-daten { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

.checkout-daten h3 {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin: 0 0 .7rem;
}

.checkout-daten p {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
}

/* --------------------------------- Die Pflichtangaben und der Knopf */

.checkout-bestellung {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    max-width: 62rem;
}

.checkout-bestellung > h2 { margin-top: 0; }

.checkout-posten {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem clamp(1.25rem, 3vw, 2rem);
    align-items: start;
    padding-bottom: clamp(1.25rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 620px) {
    .checkout-posten { grid-template-columns: 10rem 1fr auto; }
    .checkout-posten--ohne-bild { grid-template-columns: 1fr auto; }
}

.checkout-posten__bild {
    grid-column: 1 / -1;
    max-width: 10rem;
    border-radius: var(--radius);
    overflow: hidden;
}

@media (min-width: 620px) {
    .checkout-posten__bild { grid-column: auto; max-width: none; }
}

.checkout-posten__bild picture,
.checkout-posten__bild img { display: block; width: 100%; height: auto; }

.checkout-posten__kennung {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .4rem;
}

.checkout-posten__text h3 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.6vw + .8rem, 1.7rem);
    margin: 0 0 1rem;
    color: var(--text);
}

.checkout-posten__preis {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 620px) {
    .checkout-posten__preis { grid-column: auto; text-align: right; white-space: nowrap; }
}

.checkout-eigenschaften { margin: 0; display: grid; gap: .4rem 1.25rem; }

.checkout-eigenschaften > div {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: .5rem;
}

@media (max-width: 520px) {
    .checkout-eigenschaften > div { grid-template-columns: 1fr; gap: .1rem; }
}

.checkout-eigenschaften dt { color: var(--text-meta); font-size: .85rem; }
.checkout-eigenschaften dd { margin: 0; color: var(--text-muted); font-size: .92rem; }

.checkout-summe {
    margin: clamp(1.25rem, 3vw, 2rem) 0 0;
    display: grid;
    gap: .55rem;
}

.checkout-summe > div {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    color: var(--text-muted);
}

.checkout-summe dt { margin: 0; }
.checkout-summe dd { margin: 0; font-variant-numeric: tabular-nums; }

.checkout-summe__gesamt {
    margin-top: .6rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    font-size: 1.15rem;
}

.checkout-summe__gesamt dt,
.checkout-summe__gesamt dd { color: var(--text); font-weight: 500; }

.checkout-summe__zusatz {
    margin: 1rem 0 0;
    font-size: .85rem;
    color: var(--text-meta);
    line-height: 1.65;
    max-width: 68ch;
}

/*
 * Zwischen den Pflichtangaben und der Schaltfläche steht nichts —
 * kein Trenner, kein weiterer Abschnitt, kein zweiter Weg. Das
 * verlangt § 312j Abs. 2 BGB („unmittelbar über"), und es ist
 * zugleich das, was ein Mensch an dieser Stelle erwartet.
 */
.checkout-abschluss {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

/*
 * Der Satz unter dem Bestellknopf erklärt, was der Klick bewirkt. Er ist
 * kein Kleingedrucktes, sondern die Erläuterung zur verbindlichen
 * Erklärung — deshalb einen Ton heller als die übrigen Fußnoten.
 */
.checkout-abschluss .formular__fussnote { color: var(--text-meta); }

.knopf--bestellen { font-size: 1rem; }

.leise { color: var(--text-faint); }

/* =============================================================
   23. Preisangabe — § 11 PAngV
   -------------------------------------------------------------
   Der Bezugspreis („niedrigster Preis der letzten 30 Tage") steht
   unmittelbar unter dem Preis, nicht in einer Fußnote. Der BGH
   verlangt „unmissverständlich, klar erkennbar und gut lesbar"
   (I ZR 183/24 vom 9.10.2025) — deshalb dieselbe Textfarbe wie
   die übrigen Metaangaben und keine kleinere Stufe als die
   Ersparnis daneben.
   ============================================================= */

.preis { display: block; }

.preis__wert { display: inline; }

.preis__ersparnis {
    display: inline-block;
    margin-left: .6rem;
    padding: .1rem .45rem;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: .72em;
    font-weight: 500;
    letter-spacing: .04em;
    vertical-align: middle;
    white-space: nowrap;
}

.preis__bezug {
    display: block;
    margin-top: .45rem;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.45;
    color: var(--text-meta);
}

.preis__zusatz {
    display: block;
    margin-top: .45rem;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--text-meta);
}

/* Auf der Karte ist weniger Platz — der Pflichtsatz bleibt trotzdem
   vollständig und in lesbarer Größe. Gekürzt wird er nicht. */
.preis--karte .preis__bezug {
    font-size: .74rem;
    margin-top: .3rem;
}

.preis--karte .preis__ersparnis {
    margin-left: .4rem;
    font-size: .68em;
}

/* Der Bezugspreis auf der Produktkarte: eigene Zeile, volle Breite. */
.produkt__bezug {
    margin: .55rem 0 0;
    font-family: var(--font-body);
    font-size: .76rem;
    line-height: 1.4;
    color: var(--text-meta);
}