/*
    Das Designsystem von wksguard.de.

    **Die Farben sind die der App** (mobile-app/.../ui/theme/Theme.kt): fast
    schwarzer Grund, dunkelgraue Karten, Orange als einziger Akzent, schwarze
    Schrift darauf. Wer die App im Dienst benutzt, erkennt das Produkt auf der
    Verkaufsseite wieder - und umgekehrt. Das ist selten und der Grund, warum
    hier keine eigene Website-Palette erfunden wird.

    **Die Grautöne sind nicht neutral, sondern minimal warm.** Ein reines
    #1C1C1C neben Orange wirkt kalt und billig; die Karten liegen deshalb
    einen Hauch Richtung Akzent. Kein Blaustich - das war ausdrücklich die
    Vorgabe für die App und gilt hier genauso.

    **Ein Akzent je Abschnitt.** Orange trägt entweder den Handlungsaufruf
    oder eine Hervorhebung, nie beides nebeneinander. Sonst wird aus einer
    Betonung eine Tapete.

    **Motiv: die Route mit Kontrollpunkten.** Drei Punkte, verbunden - das
    Zeichen aus der Bildmarke. Es taucht als Abschnittsmarke wieder auf, weil
    es beschreibt, was das Produkt tut, statt zu dekorieren.

    Keine Webschrift: eine Schrift, die erst geladen werden muss, kostet auf
    dem Telefon im Funkloch mehr, als sie bringt. Charakter kommt hier aus
    Größensprung, Laufweite und der Schreibmaschinenschrift für Zahlen und
    Kennzeichnungen - was zu einem technischen Produkt ohnehin besser passt
    als eine dekorative Displayschrift.
*/

:root {
    --grund: #0b0b0d;
    --flaeche: #141417;
    --karte: #1c1c1f;
    --karte-hoch: #232326;
    --rand: #2a2a2e;
    --rand-hell: #3a3a3f;

    --akzent: #ff9500;
    --akzent-dunkel: #d97e00;
    --auf-akzent: #0b0b0d;

    --schrift: #f2f2f7;
    --gedaempft: #9a9aa0;
    --leise: #6e6e75;

    --gut: #4caf50;
    --warn: #ffb340;
    --schlecht: #ff453a;

    --huelle: 72rem;
    --schmal: 46rem;
    --radius: 0.75rem;
    --radius-klein: 0.5rem;

    /* Ein Sprung von 1.25 - groß genug für Hierarchie, klein genug, dass
       nichts springt. */
    --t-xs: 0.78rem;
    --t-s: 0.875rem;
    --t-m: 1rem;
    --t-l: 1.15rem;
    --t-xl: 1.5rem;
    --t-2xl: 2rem;
    --t-3xl: 2.6rem;
    --t-4xl: clamp(2.4rem, 1.4rem + 3.2vw, 3.9rem);

    --schriftfamilie: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schriftfamilie-fest: ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
        Consolas, "Liberation Mono", monospace;
}

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

html {
    scroll-behavior: smooth;
    /* Damit ein Sprungziel nicht unter der festen Kopfleiste landet. */
    scroll-padding-top: 5.5rem;
}

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

body {
    margin: 0;
    background: var(--grund);
    color: var(--schrift);
    font-family: var(--schriftfamilie);
    font-size: var(--t-m);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

:where(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Erstes fokussierbares Element: der Sprung in den Inhalt. */
.zum-inhalt {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--akzent);
    color: var(--auf-akzent);
    padding: 0.7rem 1.2rem;
    font-weight: 700;
    z-index: 100;
}
.zum-inhalt:focus { left: 0.5rem; top: 0.5rem; }

.huelle {
    width: min(var(--huelle), 100% - 2.5rem);
    margin-inline: auto;
}
.huelle-schmal {
    width: min(var(--schmal), 100% - 2.5rem);
    margin-inline: auto;
}

/* ------------------------------------------------------- Typografie */

h1, h2, h3, h4 {
    margin: 0 0 0.6em;
    line-height: 1.15;
    text-wrap: balance;
    letter-spacing: -0.022em;
    font-weight: 700;
}
h1 { font-size: var(--t-4xl); letter-spacing: -0.03em; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-l); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Fließtext bleibt bei rund 70 Zeichen - darüber verliert das Auge die
   Zeile. */
.text { max-width: 42rem; }
.text-mitte { max-width: 42rem; margin-inline: auto; text-align: center; }

.vorspann {
    font-size: var(--t-l);
    color: var(--gedaempft);
    max-width: 40rem;
}

.gedaempft { color: var(--gedaempft); }
.leise { color: var(--leise); font-size: var(--t-s); }

/* Die Dachzeile über einer Überschrift. Schreibmaschinenschrift und weite
   Laufweite: sie soll wie eine Kennzeichnung wirken, nicht wie ein Satz. */
.dachzeile {
    font-family: var(--schriftfamilie-fest);
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: 0 0 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Das Motiv: drei Punkte, verbunden - die Route aus der Bildmarke. */
.dachzeile::before {
    content: "";
    width: 2.2rem;
    height: 1px;
    background: linear-gradient(
        to right,
        var(--akzent) 0 25%,
        transparent 25% 45%,
        var(--akzent) 45% 55%,
        transparent 55% 75%,
        var(--akzent) 75% 100%
    );
    flex: none;
}

.zahl {
    font-family: var(--schriftfamilie-fest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ Kopf */

header.kopf {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--grund) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rand);
}
header.kopf > .huelle {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 0.8rem 0;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    font-size: 1.02rem;
    text-decoration: none;
    flex: none;
}
.marke svg { width: 1.7rem; height: 1.7rem; color: var(--schrift); }
.marke b { font-weight: 800; }
.marke b span { color: var(--akzent); }

.haupt-nav { margin-left: auto; display: flex; align-items: center; gap: 0.3rem; }
.haupt-nav > * { position: relative; }

.nav-link {
    display: inline-block;
    color: var(--gedaempft);
    text-decoration: none;
    font-size: var(--t-s);
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-klein);
    white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--schrift); }
.nav-link[aria-current="page"] { background: var(--karte); }

/* Klappmenü ohne JavaScript. :focus-within hält es offen, solange jemand
   mit der Tastatur darin ist. */
.klapp > .nav-link::after {
    content: "";
    display: inline-block;
    width: 0.34em; height: 0.34em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.15em);
    margin-left: 0.45em;
}
.klapp-inhalt {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    translate: -50% 0;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 0.9rem;
    display: none;
    box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.7);
}

/*
    **Die Brücke über den Zwischenraum.**

    Die Klappe sitzt 0,5 rem unter dem Menüpunkt. Ohne diese unsichtbare
    Fläche verliert der Zeiger auf dem Weg nach unten den Kontakt, `:hover`
    fällt weg und das Menü schließt sich, **bevor** man es erreicht - es sah
    aus, als ginge es gar nicht auf. Der Streifen gehört zum Element, ist aber
    durchsichtig und deckt genau den Zwischenraum ab.
*/
.klapp-inhalt::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.65rem;
    height: 0.65rem;
}

.klapp:hover > .klapp-inhalt,
.klapp:focus-within > .klapp-inhalt,
.klapp.offen > .klapp-inhalt { display: block; }

/*
    Die Anmeldung sitzt rechts aussen, nicht in der Hauptnavigation - also
    braucht sie ihren eigenen Bezugsrahmen (`.haupt-nav > *` deckt sie nicht
    ab), und die Klappe haengt rechtsbuendig darunter. Mittig ausgerichtet
    stand sie zur Haelfte neben dem Fenster.
*/
.kopf > .huelle > .klapp { position: relative; }
.klapp-inhalt.rechts { left: auto; right: 0; translate: none; }

/*
    Geräte ohne Zeiger (Tablet im Querformat, Touch-Notebook) kennen kein
    `:hover`. Zwischen 48 und 60 rem ist die Hauptnavigation sichtbar, der
    Klappkasten fürs Telefon aber noch nicht - dort ließ sich das Untermenü
    gar nicht öffnen. Die Klasse `.offen` setzt das Skript in layout.mjs.
*/
@media (hover: none) {
    .klapp:hover > .klapp-inhalt { display: none; }
    .klapp.offen > .klapp-inhalt { display: block; }
}

.klapp-spalten { display: flex; gap: 2rem; }
.klapp-spalte { min-width: 15rem; }
.klapp-titel {
    font-family: var(--schriftfamilie-fest);
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--leise);
    padding: 0.3rem 0.6rem 0.5rem;
}
.klapp-inhalt a {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: var(--gedaempft);
    font-size: var(--t-s);
    white-space: nowrap;
}
.klapp-inhalt a:hover { background: var(--karte-hoch); color: var(--schrift); }
.klapp-inhalt a.hervor { color: var(--schrift); font-weight: 600; }
.klapp-fuss {
    border-top: 1px solid var(--rand);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.kopf-telefon {
    font-family: var(--schriftfamilie-fest);
    font-size: var(--t-s);
    color: var(--gedaempft);
    text-decoration: none;
    white-space: nowrap;
}
.kopf-telefon:hover { color: var(--schrift); }

/* ---------------------------------------------------------- Knöpfe */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: var(--akzent);
    color: var(--auf-akzent);
    font-weight: 700;
    font-size: var(--t-s);
    text-decoration: none;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-klein);
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s ease, translate 0.15s ease;
}
.knopf:hover { filter: brightness(1.08); translate: 0 -1px; }
.knopf.gross { padding: 1rem 1.8rem; font-size: var(--t-m); }

.knopf-still {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--schrift);
    border: 1px solid var(--rand-hell);
    font-weight: 600;
    font-size: var(--t-s);
    text-decoration: none;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-klein);
    white-space: nowrap;
}
.knopf-still:hover { border-color: var(--gedaempft); background: var(--karte); }

/* Ein Textverweis, der wie einer aussieht - mit Pfeil, der beim Zeigen
   mitgeht. */
.weiter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--akzent);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--t-s);
}
.weiter::after { content: "\2192"; transition: translate 0.15s ease; }
.weiter:hover { text-decoration: underline; }
.weiter:hover::after { translate: 3px 0; }

/* -------------------------------------------------------- Abschnitte */

section { padding: 5rem 0; }
section.eng { padding: 3.5rem 0; }
section.flaeche { background: var(--flaeche); }
/* Stoßen zwei eingefärbte Abschnitte doch einmal aneinander, wird der Abstand
   dazwischen kleiner statt doppelt - sie gehören dann sichtbar zusammen,
   kleben aber nicht. */
section.flaeche + section.flaeche { padding-top: 1.5rem; }

.abschnittskopf { margin-bottom: 2.5rem; max-width: 44rem; }
.abschnittskopf.mitte { margin-inline: auto; text-align: center; }
.abschnittskopf.mitte .dachzeile { justify-content: center; }

/* ------------------------------------------------------------ Bühne */

.buehne {
    padding: 4.5rem 0 4rem;
    position: relative;
    overflow: hidden;
}
/* Ein einziger, sehr zurückhaltender Lichtschein hinter der Bühne. Kein
   Verlauf über die ganze Seite - der wirkt schnell nach Vorlage. */
.buehne::before {
    content: "";
    position: absolute;
    inset: -30% 30% 40% -20%;
    background: radial-gradient(closest-side, rgb(255 149 0 / 0.09), transparent);
    pointer-events: none;
}
.buehne > .huelle { position: relative; }

.buehne-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
}

.haken {
    list-style: none;
    margin: 1.6rem 0 2rem;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}
.haken li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--gedaempft);
    font-size: var(--t-s);
}
.haken li::before {
    content: "";
    flex: none;
    width: 1.15rem; height: 1.15rem;
    margin-top: 0.22rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--akzent) 18%, transparent);
    /* Der Haken selbst als Maske - ein Zeichen, keine Bilddatei. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FF9500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

.vertrauenszeile {
    margin-top: 2.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rand);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    font-size: var(--t-xs);
    color: var(--leise);
    font-family: var(--schriftfamilie-fest);
}
.vertrauenszeile span { display: inline-flex; align-items: center; gap: 0.45rem; }
.vertrauenszeile span::before {
    content: "";
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--akzent);
    flex: none;
}

/* ------------------------------------------------------------ Karten */

.raster { display: grid; gap: 1.1rem; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.karte {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
a.karte { text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
a.karte:hover { border-color: var(--rand-hell); background: var(--karte-hoch); }
a.karte .weiter { margin-top: auto; padding-top: 0.6rem; }

.karte h3 { margin: 0; font-size: var(--t-l); }
.karte p { color: var(--gedaempft); font-size: var(--t-s); margin: 0; }

.karten-icon {
    width: 2.4rem; height: 2.4rem;
    border-radius: var(--radius-klein);
    background: color-mix(in srgb, var(--akzent) 14%, transparent);
    color: var(--akzent);
    display: grid;
    place-items: center;
    margin-bottom: 0.35rem;
}
.karten-icon svg { width: 1.3rem; height: 1.3rem; }

/* Nummerierte Schritte. Die Ziffer trägt hier echte Information - es ist
   eine Reihenfolge, kein Schmuck. */
.schritte { counter-reset: schritt; display: grid; gap: 1.1rem; }
.schritte > li { list-style: none; display: flex; gap: 1.1rem; align-items: flex-start; }
.schritte > li::before {
    counter-increment: schritt;
    content: counter(schritt);
    flex: none;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--akzent);
    color: var(--akzent);
    display: grid; place-items: center;
    font-family: var(--schriftfamilie-fest);
    font-size: var(--t-s);
    font-weight: 700;
}
.schritte h3 { margin: 0 0 0.2rem; font-size: var(--t-l); }
.schritte p { margin: 0; color: var(--gedaempft); font-size: var(--t-s); }

/* --------------------------------------------------------- Produktbild */

.bildrahmen {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--karte);
    overflow: hidden;
}
.bildrahmen figcaption {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--rand);
    font-size: var(--t-xs);
    color: var(--leise);
}
/* Solange keine echten Aufnahmen vorliegen, steht hier ein deutlich als
   solcher gekennzeichneter Platzhalter - kein Stockfoto. Ein erfundenes
   Produktbild ist schlechter als eine ehrliche Leerstelle. */
.platzhalterbild {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    gap: 0.5rem;
    background:
        repeating-linear-gradient(45deg, transparent 0 12px, rgb(255 255 255 / 0.015) 12px 24px),
        var(--karte-hoch);
    color: var(--leise);
    font-family: var(--schriftfamilie-fest);
    font-size: var(--t-xs);
    text-align: center;
    padding: 1.5rem;
}

/* ---------------------------------------------------------- Reiter */

.reiter { display: grid; gap: 1.5rem; }
.reiter-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.reiter input { position: absolute; opacity: 0; pointer-events: none; }
.reiter-knopf {
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--rand);
    border-radius: 100px;
    font-size: var(--t-s);
    color: var(--gedaempft);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.reiter-knopf:hover { border-color: var(--rand-hell); color: var(--schrift); }
.reiter input:checked + .reiter-knopf {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--auf-akzent);
    font-weight: 700;
}
.reiter input:focus-visible + .reiter-knopf { outline: 2px solid var(--akzent); outline-offset: 3px; }
.reiter-inhalt { display: none; }
.reiter input:checked ~ .reiter-inhalt { display: block; }

/* -------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 0.7rem; }
.faq details {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    padding: 0 1.2rem;
}
.faq details[open] { border-color: var(--rand-hell); }
.faq summary {
    cursor: pointer;
    font-weight: 600;
    padding: 1.05rem 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--t-s);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    margin-left: auto;
    flex: none;
    width: 0.5em; height: 0.5em;
    border-right: 1.5px solid var(--akzent);
    border-bottom: 1.5px solid var(--akzent);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .antwort { padding: 0 0 1.15rem; color: var(--gedaempft); font-size: var(--t-s); }

/* ------------------------------------------------------------ Preise */

.preistabelle { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.preistabelle th, .preistabelle td {
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--rand);
}
.preistabelle th { color: var(--leise); font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.preistabelle td.preis { font-family: var(--schriftfamilie-fest); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--schrift); }
.tabellenhuelle { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--karte); }

/* Der Rechner. Zahlen in Schreibmaschinenschrift, damit sie beim Ändern
   nicht springen. */
.rechner { display: grid; gap: 1.5rem; }
.rechner-feld { display: grid; gap: 0.45rem; }
.rechner-feld label { font-size: var(--t-s); font-weight: 600; }
.rechner-feld .hinweis { font-size: var(--t-xs); color: var(--leise); }
.rechner input[type="number"], .rechner select {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    color: var(--schrift);
    border-radius: var(--radius-klein);
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-family: var(--schriftfamilie-fest);
    width: 100%;
}
.modulwahl { display: grid; gap: 0.6rem; }
.modulzeile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    cursor: pointer;
}
.modulzeile:hover { border-color: var(--rand-hell); }
.modulzeile input { accent-color: var(--akzent); width: 1.05rem; height: 1.05rem; flex: none; }
.modulzeile .name { font-weight: 600; font-size: var(--t-s); }
.modulzeile .art { font-size: var(--t-xs); color: var(--leise); }
.modulzeile .betrag { margin-left: auto; font-family: var(--schriftfamilie-fest); font-size: var(--t-s); white-space: nowrap; }

.summe {
    background: var(--karte);
    border: 1px solid var(--akzent);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: grid;
    gap: 0.4rem;
}
.summe .betrag {
    font-family: var(--schriftfamilie-fest);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-3xl);
    font-weight: 700;
    line-height: 1.1;
}
.summe .zeile { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-s); color: var(--gedaempft); }

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

.formular { display: grid; gap: 1.1rem; }
.formular-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.feld { display: grid; gap: 0.4rem; }
.feld label { font-size: var(--t-s); font-weight: 600; }
.feld label .pflicht { color: var(--akzent); }
.feld input, .feld select, .feld textarea {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    color: var(--schrift);
    border-radius: var(--radius-klein);
    padding: 0.75rem 0.9rem;
    font: inherit;
    width: 100%;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); }
.feld textarea { min-height: 7rem; resize: vertical; }
/* Honigtopf: für Menschen unsichtbar, für Robots verlockend. Kein Captcha -
   jedes Captcha kostet echte Anfragen. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------- Handlungsaufruf */

.aufruf {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 2.5rem;
    display: grid;
    gap: 1.2rem;
    justify-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.aufruf::before {
    content: "";
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 100%;
    background: radial-gradient(closest-side, rgb(255 149 0 / 0.10), transparent);
    pointer-events: none;
}
.aufruf > * { position: relative; }
.aufruf h2 { margin: 0; font-size: var(--t-2xl); }
.aufruf p { color: var(--gedaempft); max-width: 36rem; margin: 0; }
.aufruf .verstaerkung {
    font-size: var(--t-s);
    color: var(--gedaempft);
    max-width: 34rem;
    border-top: 1px solid var(--rand);
    padding-top: 1rem;
    margin: 0;
}

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

.brotkrume {
    padding: 1.2rem 0 0;
    font-size: var(--t-xs);
    color: var(--leise);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.brotkrume a { color: var(--gedaempft); text-decoration: none; }
.brotkrume a:hover { color: var(--schrift); text-decoration: underline; }
.brotkrume span[aria-hidden] { color: var(--rand-hell); }

/* ------------------------------------------------- Änderungsliste */

/*
    Bewusst schlicht: eine Änderungsliste wird gelesen, nicht bewundert. Was
    sie leisten muss, ist die Frage "betrifft mich das?" in wenigen Sekunden
    zu beantworten - deshalb steht die Art des Eintrags als Marke **vorn**,
    nicht am Ende der Zeile, und Fassungsnummer und Datum stehen in der
    Schreibmaschinenschrift, in der auf dieser Seite alle Zahlen stehen.

    Kein Orange auf den Marken: der Akzent trägt hier den Fassungskopf. Zwei
    Orange-Töne nebeneinander machen aus der Betonung eine Tapete.
*/

.aend-block {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--karte);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.1rem;
}
.aend-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    border-bottom: 1px solid var(--rand);
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
}
.aend-kopf h2 {
    margin: 0;
    font-size: var(--t-l);
    font-family: var(--schriftfamilie-fest);
    letter-spacing: -0.01em;
}
.aend-plattform { color: var(--akzent); }
.aend-bau { color: var(--leise); font-weight: 400; }
.aend-kopf time {
    margin-left: auto;
    font-family: var(--schriftfamilie-fest);
    font-size: var(--t-xs);
    color: var(--leise);
}

.aend-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.aend-liste li {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.9rem;
    align-items: start;
    font-size: var(--t-s);
    color: var(--gedaempft);
    line-height: 1.6;
}

.aend-marke {
    font-family: var(--schriftfamilie-fest);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.2rem 0;
    border-radius: var(--radius-klein);
    border: 1px solid currentColor;
    /* Damit die Marke auf der Grundlinie der ersten Textzeile sitzt und nicht
       darüber schwebt. */
    margin-top: 0.15rem;
}
.marke-behoben { color: var(--gut); }
.marke-neu { color: var(--warn); }
.marke-geaendert { color: var(--gedaempft); }

@media (max-width: 34rem) {
    /* Auf dem Telefon steht die Marke über dem Text - zwei Spalten lassen für
       den Satz sonst zwölf Zeichen übrig. */
    .aend-liste li { grid-template-columns: 1fr; gap: 0.3rem; }
    .aend-marke { justify-self: start; padding-inline: 0.5rem; }
    .aend-kopf time { margin-left: 0; }
}

/* -------------------------------------------------------------- Fuß */

footer.fuss {
    background: var(--flaeche);
    border-top: 1px solid var(--rand);
    padding: 3.5rem 0 2rem;
    margin-top: 1rem;
}
.fuss-raster {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}
.fuss-spalte h4 {
    font-family: var(--schriftfamilie-fest);
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--leise);
    margin: 0 0 0.9rem;
    font-weight: 600;
}
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fuss-spalte a { color: var(--gedaempft); text-decoration: none; font-size: var(--t-s); }
.fuss-spalte a:hover { color: var(--schrift); text-decoration: underline; }

.fuss-unten {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rand);
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
    align-items: center;
    font-size: var(--t-xs);
    color: var(--leise);
}
.fuss-unten .rechts { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ------------------------------------------------- Mobile Leiste */

.mobil-leiste {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    background: color-mix(in srgb, var(--grund) 94%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--rand);
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
    gap: 0.6rem;
}
.mobil-leiste .knopf { flex: 1; }
.mobil-leiste .telefon {
    flex: none;
    width: 2.9rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--rand-hell);
    border-radius: var(--radius-klein);
    color: var(--schrift);
}

/* --------------------------------------------------------- Schmaler */

@media (max-width: 60rem) {
    .buehne-raster { grid-template-columns: 1fr; gap: 2.5rem; }
    .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raster.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
    section { padding: 3.5rem 0; }
    h2 { font-size: var(--t-2xl); }

    /* Die Navigation verschwindet **nicht** ersatzlos - sie zieht in den
       Klappkasten. In der ersten Fassung stand hier display:none ohne
       Ersatz; auf dem Telefon war die Seite damit navigationslos, und ein
       erheblicher Teil dieser Branche kommt vom Telefon. */
    .haupt-nav { display: none; }
    .kopf-telefon { display: none; }
    .burger { display: grid; }
    .kopf .knopf { display: none; }

    .raster.zwei, .raster.drei, .raster.vier { grid-template-columns: 1fr; }
    .formular-paar { grid-template-columns: 1fr; }
    .fuss-raster { grid-template-columns: 1fr; }
    .aufruf { padding: 1.8rem 1.3rem; }

    .mobil-leiste { display: flex; }
    body { padding-bottom: 4.5rem; }
}

/* Der Klappkasten fürs Telefon - wieder ohne JavaScript. */
.burger { display: none; margin-left: auto; }
.burger summary {
    list-style: none;
    cursor: pointer;
    width: 2.6rem; height: 2.6rem;
    display: grid; place-items: center;
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    color: var(--schrift);
}
.burger summary::-webkit-details-marker { display: none; }
.burger[open] summary { border-color: var(--akzent); color: var(--akzent); }
.burger-inhalt {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--grund);
    border-bottom: 1px solid var(--rand);
    padding: 1rem 1.25rem 1.6rem;
    max-height: 80vh;
    overflow-y: auto;
}
.burger-inhalt a { display: block; padding: 0.65rem 0; color: var(--gedaempft); text-decoration: none; border-bottom: 1px solid var(--rand); }
.burger-inhalt a:hover { color: var(--schrift); }
.burger-inhalt details > summary {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--rand);
    cursor: pointer;
    color: var(--schrift);
    font-weight: 600;
    list-style: none;
}
.burger-inhalt details > summary::-webkit-details-marker { display: none; }
.burger-inhalt details > summary::after {
    content: "+"; float: right; color: var(--akzent); font-weight: 700;
}
.burger-inhalt details[open] > summary::after { content: "\2212"; }
.burger-inhalt details a { padding-left: 1rem; font-size: var(--t-s); }

@media print {
    header.kopf, .mobil-leiste, .aufruf { display: none; }
    body { background: #fff; color: #000; }
}

/*
    Die Zeile mit den Pflichtseiten (Impressum, Datenschutz, AGB) zwischen den
    Spalten und der Schlusszeile. Eigene Zeile statt einer fuenften Spalte:
    Sie gehoert nicht zum Angebot, muss aber von jeder Seite aus in einem Blick
    zu finden sein.
*/
.fuss-recht {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rand);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    font-size: 0.9rem;
}
.fuss-recht a { color: var(--gedaempft); text-decoration: none; }
.fuss-recht a:hover { color: var(--schrift); text-decoration: underline; }
.fuss-recht + .fuss-unten { margin-top: 1.2rem; padding-top: 1.2rem; }

/*
    Die Produktabbildungen - Portal und App nachgebaut (siehe abbildungen.mjs).

    **Die Farben sind die echten.** Portal: Kopfleiste in der Markenfarbe
    #7d1a63 (die Vorgabe aus app.blade.php), dunkle Seitenleiste, helle
    Inhaltsfläche - so, wie AppLayout.vue es setzt. App: fast schwarz mit
    orangem Akzent, wie ui/theme/Theme.kt. Wer das Produkt kennt, erkennt es
    wieder; wer es nicht kennt, sieht, was er bekommt.

    **Alles skaliert mit der Breite des Rahmens**, nicht mit der des
    Bildschirms (`container-type: inline-size` und `cqi`). Dieselbe Abbildung
    sitzt in der Bühne halbseitig und auf dem Telefon über die ganze Breite -
    ohne dass die Schrift unlesbar klein wird oder die Tabelle ausbricht.

    Eigene Datei, weil es ein abgeschlossener Bereich ist: wer am
    Designsystem arbeitet, muss hier nicht vorbeikommen, und wer die
    Abbildungen ändert, bringt das Designsystem nicht durcheinander.
    bauen.mjs hängt beide Dateien aneinander.
*/

.bildrahmen { container-type: inline-size; }

.ab-portal,
.ab-dok,
.ab-telefon { font-size: clamp(5.5px, 2.05cqi, 11px); }

/* ------------------------------------------------------------- Portal */

.ab-portal { background: #f4f4f5; color: #18181b; overflow: hidden; }

.ab-kopf {
    height: 3.1em;
    background: #7d1a63;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1em;
}
.ab-marke { font-weight: 800; letter-spacing: 0.07em; font-size: 1.05em; }
.ab-marke i { font-style: normal; opacity: 0.75; }
.ab-kopf-rest { display: flex; align-items: center; gap: 0.8em; }
.ab-glocke { width: 1.3em; height: 1.3em; border-radius: 0.25em; background: rgb(255 255 255 / 0.28); }
.ab-avatar {
    width: 1.9em; height: 1.9em; border-radius: 50%;
    background: rgb(0 0 0 / 0.28);
    display: grid; place-items: center;
    font-size: 0.78em; font-weight: 700;
}

.ab-koerper { display: flex; min-height: 17em; }

.ab-seite { width: 9.5em; background: #27272a; padding: 0.8em 0.6em; flex: none; }
.ab-suche { height: 1.7em; border-radius: 0.3em; background: #3f3f46; margin-bottom: 0.7em; }
.ab-menue {
    display: flex; align-items: center; gap: 0.55em;
    padding: 0.42em 0.5em; border-radius: 0.3em;
    color: #a1a1aa; font-size: 0.92em;
}
.ab-menue i {
    width: 0.95em; height: 0.95em; border-radius: 0.2em;
    background: currentColor; opacity: 0.55; flex: none;
}
.ab-menue.aktiv { background: rgb(0 0 0 / 0.3); color: #fff; }

.ab-inhalt { flex: 1; padding: 0.9em 1em; min-width: 0; }
.ab-inhalt-kopf { font-weight: 700; font-size: 1.1em; margin-bottom: 0.7em; }

.ab-filter { display: flex; gap: 0.4em; margin-bottom: 0.7em; }
.ab-filter span { width: 4.2em; height: 1.5em; border-radius: 0.8em; background: #e4e4e7; }
.ab-filter .ab-orange-chip { background: #ff9500; width: 3em; }

.ab-tabelle {
    width: 100%; border-collapse: collapse;
    background: #fff; border-radius: 0.3em; overflow: hidden;
}
.ab-tabelle th {
    text-align: left; font-size: 0.82em;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: #71717a; padding: 0.5em 0.6em;
    border-bottom: 1px solid #e4e4e7; font-weight: 600;
}
.ab-tabelle td { padding: 0.5em 0.6em; border-bottom: 1px solid #f4f4f5; white-space: nowrap; }
.ab-tabelle tr:last-child td { border-bottom: 0; }
.ab-rot { color: #b91c1c; font-weight: 600; }
.ab-gruen { color: #15803d; }
.ab-matrix td:not(:first-child),
.ab-matrix th:not(:first-child) { text-align: center; }
.ab-haken { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 0.2em; background: #7d1a63; }
.ab-leer { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 0.2em; border: 1px solid #d4d4d8; }

.ab-kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; margin-bottom: 0.8em; }
.ab-kz { background: #fff; border-radius: 0.3em; padding: 0.6em; display: grid; gap: 0.15em; }
.ab-kz i { font-style: normal; font-size: 0.8em; color: #71717a; }
.ab-kz b { font-size: 1.5em; line-height: 1; }

.ab-block { background: #fff; border-radius: 0.3em; padding: 0.7em 0.8em; }
.ab-block-titel { font-weight: 700; margin-bottom: 0.5em; font-size: 0.95em; }
.ab-zeile { display: flex; gap: 0.7em; padding: 0.32em 0; border-bottom: 1px solid #f4f4f5; }
.ab-zeile:last-child { border-bottom: 0; }
.ab-zeit { color: #71717a; font-variant-numeric: tabular-nums; flex: none; }

.ab-plan { background: #fff; border-radius: 0.3em; padding: 0.6em; overflow: hidden; }
.ab-plan-kopf,
.ab-plan-zeile {
    display: grid;
    grid-template-columns: 5.5em repeat(14, 1fr);
    gap: 0.18em; align-items: center;
}
.ab-plan-kopf span { font-size: 0.78em; color: #71717a; text-align: center; }
.ab-plan-zeile { margin-top: 0.18em; }
.ab-plan-name { font-size: 0.85em; white-space: nowrap; overflow: hidden; }
.ab-tag { height: 1.5em; border-radius: 0.15em; background: #f4f4f5; }
.ab-tag.t1 { background: #7d1a63; }
.ab-tag.t2 { background: #a855a0; }
.ab-tag.t3 { background: #ff9500; }

.ab-legende { display: flex; gap: 1em; margin-top: 0.6em; font-size: 0.85em; color: #52525b; }
.ab-legende span { display: inline-flex; align-items: center; gap: 0.35em; }
.ab-legende i { width: 0.8em; height: 0.8em; border-radius: 0.15em; display: inline-block; }
.ab-legende .t1 { background: #7d1a63; }
.ab-legende .t2 { background: #a855a0; }
.ab-legende .t3 { background: #ff9500; }

.ab-karte { background: #fff; border-radius: 0.3em; overflow: hidden; }
.ab-karte svg { width: 100%; display: block; }

/* ------------------------------------------------------------ Telefon */

.ab-telefon {
    background: #0b0b0d; color: #f2f2f7;
    border-radius: 1.4em; border: 0.35em solid #26262a;
    overflow: hidden; display: flex; flex-direction: column;
}
.ab-t-kopf {
    display: flex; align-items: center; gap: 0.6em;
    padding: 0.9em 1em 0.7em; border-bottom: 2px solid #ff9500;
}
.ab-t-zurueck {
    width: 0.55em; height: 0.55em;
    border-left: 1.5px solid #ff9500; border-bottom: 1.5px solid #ff9500;
    transform: rotate(45deg);
}
.ab-t-titel { font-size: 0.88em; font-weight: 700; letter-spacing: 0.09em; }
.ab-t-koerper { padding: 0.7em 0.8em; flex: 1; }

.ab-t-leiste { display: flex; justify-content: space-between; font-size: 0.85em; color: #8e8e93; margin-bottom: 0.6em; }
.ab-orange { color: #ff9500; font-weight: 700; }

.ab-punkt {
    display: flex; align-items: center; gap: 0.6em;
    background: #1c1c1f; border-radius: 0.4em;
    padding: 0.55em 0.7em; margin-bottom: 0.35em;
}
.ab-p-marke { width: 1.1em; height: 1.1em; border-radius: 50%; flex: none; border: 1.5px solid #6b6b70; }
.ab-punkt.fertig .ab-p-marke { background: #4caf50; border-color: #4caf50; }
.ab-punkt.offen .ab-p-marke { border-color: #ff9500; background: rgb(255 149 0 / 0.2); }
.ab-p-text { display: grid; gap: 0.1em; min-width: 0; }
.ab-p-text b { font-size: 0.92em; font-weight: 600; }
.ab-p-text i { font-style: normal; font-size: 0.8em; color: #8e8e93; }
.ab-punkt.frei { opacity: 0.5; }

.ab-t-hinweis { margin-top: 0.6em; font-size: 0.78em; color: #8e8e93; text-align: center; }
.ab-t-warnung {
    background: rgb(255 149 0 / 0.13); border: 1px solid #ff9500; color: #ff9500;
    border-radius: 0.35em; padding: 0.45em 0.6em; font-size: 0.82em; margin-bottom: 0.7em;
}

.ab-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45em; }
.ab-kachel {
    background: #1c1c1f; border-radius: 0.45em; padding: 0.8em 0.6em;
    display: grid; gap: 0.4em; justify-items: center; font-size: 0.85em;
}
.ab-kachel.hell { background: #ff9500; color: #0b0b0d; font-weight: 700; }
.ab-k-icon { width: 1.5em; height: 1.5em; border-radius: 0.3em; background: currentColor; opacity: 0.5; }
.ab-kachel.hell .ab-k-icon { opacity: 0.8; }
.ab-t-fuss { padding: 0.55em; text-align: center; font-size: 0.78em; color: #6e6e75; border-top: 1px solid #26262a; }

/* ----------------------------------------------------------- Dokument */

.ab-dok { background: #fff; color: #18181b; padding: 1.2em 1.3em; }
.ab-dok-kopf { display: flex; align-items: center; gap: 0.7em; border-bottom: 1.5px solid #18181b; padding-bottom: 0.6em; }
.ab-dok-logo { width: 2.2em; height: 2.2em; border-radius: 0.25em; background: #7d1a63; flex: none; }
.ab-dok-firma { font-weight: 700; display: grid; gap: 0.1em; }
.ab-dok-firma i { font-style: normal; font-weight: 400; font-size: 0.82em; color: #52525b; }
.ab-dok-titel { font-size: 0.95em; margin: 0.8em 0 0.5em; color: #3f3f46; }
.ab-dok-tabelle { width: 100%; border-collapse: collapse; }
.ab-dok-tabelle th { text-align: left; font-size: 0.8em; padding: 0.35em 0.4em; border-bottom: 1px solid #18181b; }
.ab-dok-tabelle td { padding: 0.35em 0.4em; border: 1px solid #d4d4d8; font-size: 0.88em; }
.ab-dok-fuss { margin-top: 0.8em; font-size: 0.78em; color: #71717a; text-align: right; }
.ab-dok-unterschrift { margin-top: 1.2em; }
.ab-dok-unterschrift span {
    display: block; width: 9em; height: 2.2em;
    border-bottom: 1px solid #18181b;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'%3E%3Cpath d='M6 24c8-16 14 4 22-6s10 8 18-2 12 6 20-4 14 5 22-3' fill='none' stroke='%2318181b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ab-dok-unterschrift i { font-style: normal; font-size: 0.78em; color: #71717a; }

/* --------------------------------------------------- Portal + Telefon */

.ab-beides { position: relative; }
.ab-beides-telefon {
    position: absolute; right: -3%; bottom: -6%; width: 30%;
    filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.55));
}
/* Auf sehr schmalen Geräten überdeckt das Telefon die Tabelle, statt sie zu
   ergänzen - dann lieber nur das Portal zeigen. */
@media (max-width: 30rem) {
    .ab-beides-telefon { display: none; }
}

/*
    Die Kontrollpunkt-Spalte im Rundgangnachweis: eine Zeile je erfasstem
    Punkt, so wie im echten PDF. Kleiner gesetzt, weil es die Belegzeile ist
    und nicht die Kopfzeile - und mit `white-space: normal`, damit die Spalte
    auf dem Telefon umbrechen darf.
*/
.ab-punkte { display: grid; gap: 0.1em; font-size: 0.82em; color: #3f3f46; }
.ab-dok-tabelle td.ab-offen { color: #b91c1c; font-weight: 700; }

/*
    Der Produktschieber.

    **Geblättert wird vom Browser, nicht von JavaScript.** Der Streifen ist ein
    Rollbereich mit `scroll-snap-type: x mandatory`; Wischen auf dem Telefon,
    die Zweifingergeste auf dem Trackpad und die Tabulatortaste funktionieren
    dadurch von selbst und fühlen sich an wie das, was das Betriebssystem
    ohnehin macht. Pfeile und Punkte sind Zutat - fällt das Skript aus, bleibt
    der Schieber vollständig benutzbar.

    Die Bildlaufleiste wird versteckt, weil sie unter dem Bild eine graue
    Kante zieht, die nach Fehler aussieht. Die Punkte sagen dasselbe, nur
    absichtlich.
*/

.schieber {
    position: relative;
    /* Damit die Pfeile über den Rand hinausragen dürfen, ohne die Seite
       seitlich rollen zu lassen. */
    margin-inline: -0.5rem;
    padding-inline: 0.5rem;
}

.schieber-spur {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.5rem;
}
.schieber-spur::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
    .schieber-spur { scroll-behavior: auto; }
}

.schieber-bild {
    flex: 0 0 min(100%, 46rem);
    scroll-snap-align: center;
    margin: 0;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
    container-type: inline-size;
}

.schieber-bild figcaption {
    padding: 0.9rem 1.1rem 1rem;
    border-top: 1px solid var(--rand);
    display: grid;
    gap: 0.2rem;
}
.schieber-bild figcaption b { font-size: var(--t-s); }
.schieber-bild figcaption span { font-size: var(--t-xs); color: var(--gedaempft); }

/* ------------------------------------------------------------- Pfeile */

.schieber-pfeil {
    position: absolute;
    top: 38%;
    z-index: 2;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 1px solid var(--rand-hell);
    background: color-mix(in srgb, var(--grund) 82%, transparent);
    backdrop-filter: blur(8px);
    color: var(--schrift);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.schieber-pfeil:hover { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.schieber-pfeil svg { width: 1.3rem; height: 1.3rem; }
.schieber-pfeil.zurueck { left: -0.5rem; }
.schieber-pfeil.vor { right: -0.5rem; }
.schieber-pfeil[disabled] { opacity: 0.28; pointer-events: none; }

/* Auf dem Telefon wird gewischt - Pfeile waeren dort nur im Weg. */
@media (max-width: 48rem) {
    .schieber-pfeil { display: none; }
}

/* ------------------------------------------------------------- Punkte */

.schieber-punkte {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
}
.schieber-punkte button {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--rand-hell);
    cursor: pointer;
    transition: background 0.15s ease, width 0.15s ease;
}
.schieber-punkte button[aria-selected="true"] {
    background: var(--akzent);
    width: 1.6rem;
    border-radius: 0.3rem;
}