/* Preventra — Vertriebsseite (ADR 0049).
 *
 * Die Farb-, Abstands- und Schrifttoken kommen aus tokens.css, das scripts/website-bauen.py bei
 * jedem Bau aus dem app.css des Portals erzeugt (MANIFEST §3). Hier stehen nur Token, die es im
 * Portal nicht gibt — Verläufe, Glas und die dunklen Flächen —, und deren Kontraste rechnet
 * scripts/pruefe-website.py nach.
 *
 * Haltung (13.10.2026, nach dem Vorbild personio.de): Das Produkt steht im Einstieg, Farbflächen
 * gehen ineinander über statt durch Linien getrennt zu sein, Glaskarten auf den Verläufen, große
 * ruhige Typografie, Abschnitte blenden beim Scrollen weich ein. Keine Großbuchstaben per
 * Gestaltung, nur hell, bei reduzierter Bewegung steht alles still.
 *
 * Wie im Portal: keine style-Attribute, kein Inline-CSS, keine externen Ursprünge.
 */

:root {
    /* Dunkle Flächen: Säulen, Sicherheit, Fuß. */
    --site-buehne-tief: #0f011f;
    --site-aubergine: #2a0a55;
    --site-buehne-text: #ffffff;
    --site-buehne-text-2: #e8defc;
    --site-buehne-akzent: #c4a6ff;
    --site-buehne-linie: rgba(196, 166, 255, 0.28);

    /* Helle Verläufe: Flieder und Rosa, das Leuchten hinter dem Produkt. */
    --site-flieder: #f5eefe;
    --site-flieder-tief: #f1e7fe;
    --site-rosa: #d9b6f6;
    --site-leuchten: rgba(140, 82, 255, 0.38);
    --site-leuchten-weich: rgba(196, 160, 255, 0.45);
    --site-schatten-leuchten: 0 40px 120px -40px rgba(111, 1, 245, 0.45), 0 12px 32px -12px rgba(25, 3, 51, 0.18);

    /* Glas: halbdurchsichtige Karten auf den Verläufen. */
    --site-glas: rgba(255, 255, 255, 0.07);
    --site-glas-rand: rgba(255, 255, 255, 0.16);
    --site-glas-hell: rgba(255, 255, 255, 0.74);
    --site-glas-hell-rand: rgba(255, 255, 255, 0.95);
    --site-kopf: rgba(255, 255, 255, 0.82);
    --site-schatten-kopf: 0 8px 24px -16px rgba(25, 3, 51, 0.25);

    --site-geraet: #1b1b1f;
    --site-geraet-kante: #3a3a40;
    --site-flagge-schwarz: #000000;
    --site-flagge-rot: #dd0000;
    --site-flagge-gold: #ffce00;

    --site-breite: 1200px;
    --site-rand: 32px;
    --site-abschnitt: 128px;
    --site-radius: 6px;
    --site-radius-karte: 20px;
    --site-radius-gross: 28px;
    --site-tafel-rand: clamp(8px, 1.4vw, 20px);
    --site-tafel-radius: clamp(24px, 3vw, 44px);
    --site-schrift-lead: 19px;
    --site-schrift-h3: 20px;
    --site-schrift-h2: clamp(32px, 4vw, 52px);
    --site-schrift-h1: clamp(42px, 6.4vw, 84px);
    --site-weich: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Grundlagen ─────────────────────────────────────────────────────────────────────────────── */

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

html {
    scroll-padding-top: 88px;
}

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

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h2 {
    font-size: var(--site-schrift-h2);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

h3 {
    font-size: var(--site-schrift-h3);
}

p {
    margin: 0;
    text-wrap: pretty;
}

img,
svg {
    display: block;
}

a {
    color: var(--color-link);
}

:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--color-surface);
}

.rahmen {
    width: 100%;
    max-width: var(--site-breite);
    margin: 0 auto;
    padding: 0 var(--site-rand);
}

/* Hält Wörter wie „E-Mail“ in einer Zeile. Ein geschütztes Trennzeichen (U+2011) ginge auch, fehlt
   aber in der Teilmenge der Hausschrift — der Browser setzte es dann aus einer anderen Schrift. */
.ungetrennt {
    white-space: nowrap;
}

/* Kleine Einordnung über einer Überschrift — in normaler Schreibweise, nie in Versalien. */
.vorzeile {
    margin-bottom: 18px;
    color: var(--color-accent);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sprungmarke {
    position: absolute;
    left: var(--space-l);
    top: -100px;
    z-index: 100;
    padding: var(--space-s) var(--space-l);
    background: var(--color-surface);
    color: var(--color-text);
    border: 2px solid var(--color-text);
}

.sprungmarke:focus {
    top: var(--space-l);
}

.verweis {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.verweis:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
}

.lead {
    margin-top: 22px;
    max-width: 44em;
    color: var(--color-text-secondary);
    font-size: var(--site-schrift-lead);
}

.kopfzeile {
    max-width: 760px;
}

/* Abschnittskopf in der Mitte, wie die Abschnitte des Vorbilds. */
.kopfzeile-mitte {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.kopfzeile-mitte .lead {
    margin-left: auto;
    margin-right: auto;
}

/* Listen mit schlichtem Strich statt Symbolen. */
.liste {
    display: grid;
    gap: var(--space-s);
    margin: var(--space-l) 0 0;
    padding: 0;
    list-style: none;
}

.liste li {
    position: relative;
    padding-left: 24px;
}

.liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 12px;
    height: 2px;
    background: var(--color-accent-bg);
}

/* ── Knöpfe ─────────────────────────────────────────────────────────────────────────────────── */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border: 1px solid var(--color-accent-bg);
    border-radius: var(--radius-pill);
    background: var(--color-accent-bg);
    color: var(--color-on-accent);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, translate 0.25s var(--site-weich);
}

.knopf:hover {
    background: var(--color-accent-bg-hover);
    border-color: var(--color-accent-bg-hover);
    box-shadow: 0 10px 24px -10px var(--site-leuchten);
    translate: 0 -1px;
}

.knopf:active {
    background: var(--color-accent-bg-pressed);
    translate: 0 0;
}

/* Der Pfeil hinter einem Knopftext. Kein gap am Knopf: Er griffe auch um geschützte Wörter wie
   „E-Mail“ und setzte dort doppelte Abstände. */
.knopf span[aria-hidden="true"] {
    margin-left: 8px;
    transition: translate 0.25s var(--site-weich);
}

.knopf:hover span[aria-hidden="true"] {
    translate: 3px 0;
}

.knopf-gross {
    min-height: 52px;
    padding: 0 30px;
    font-size: 16px;
}

.knopf-zweit {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-stroke-strong);
}

.knopf-zweit:hover {
    background: var(--color-surface);
    border-color: var(--color-text);
    box-shadow: var(--shadow-4);
}

/* ── Kopf ───────────────────────────────────────────────────────────────────────────────────── */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--site-kopf);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Vom Skript gesetzt, sobald die Seite gescrollt ist. */
.kopf.gescrollt {
    border-bottom-color: var(--color-stroke);
    box-shadow: var(--site-schatten-kopf);
}

.kopf-innen {
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 72px;
}

/* Ohne Navigation (Rechtstexte, Fehlerseite) stehen die Aktionen trotzdem rechts. */
.kopf-aktionen {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    margin-left: auto;
}

.kopf-anmelden {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.kopf-anmelden:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.marke {
    flex: none;
}

.marke-logo {
    width: 136px;
    height: auto;
}

/* Das eingebettete Logo der Startseite (scripts/website-bauen.py, ADR 0053): Die Höhe folgt aus
   dem Seitenverhältnis der Vorlage, wie bei der Bilddatei auf den übrigen Seiten. */
svg.marke-logo {
    aspect-ratio: 643.76 / 168.55;
}

.navigation {
    flex: 1;
    align-self: stretch;
}

.navigation ul {
    display: flex;
    justify-content: center;
    height: 100%;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation li {
    display: flex;
    align-items: center;
}

.navigation a {
    position: relative;
    padding: 8px 14px;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* Ein feiner Strich unter dem Wort: grau beim Überfahren, lila für den Abschnitt, in dem man gerade
   liest (vom Skript gesetzt). Die Form trägt die Bedeutung, die Farbe verstärkt sie nur. */
.navigation a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-stroke-strong);
    scale: 0 1;
    transition: scale 0.25s var(--site-weich), background-color 0.2s ease;
}

.navigation a:hover::after {
    scale: 1 1;
}

.navigation a[aria-current="true"]::after {
    background: var(--color-accent);
    scale: 1 1;
}

/* ── Einstieg ──────────────────────────────────────────────────────────────────────────────────
 *
 * Botschaft oben, darunter das Produkt im Leuchten. Der Verlauf läuft nach unten in Flieder aus und
 * geht ohne Kante in die dunkle Fläche der Säulen über.
 */

.einstieg {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 40% at 50% 62%, var(--site-leuchten), transparent 70%),
        radial-gradient(ellipse 90% 50% at 50% 70%, var(--site-leuchten-weich), transparent 75%),
        linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 30%, var(--site-flieder) 62%, var(--color-surface) 100%);
}

.einstieg-innen {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 88px;
    text-align: center;
}

.abzeichen {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
    padding: 7px 16px 7px 12px;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    background: var(--site-glas-hell);
    box-shadow: var(--shadow-2);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.einstieg h1 {
    max-width: 13em;
    font-size: var(--site-schrift-h1);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 600;
}

/* Das zweite Wort im Markenverlauf. Beide Enden erreichen auf Weiß den Kontrast für großen Text. */
.h1-akzent {
    color: var(--color-accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .h1-akzent {
        background: linear-gradient(100deg, var(--color-accent) 10%, var(--color-link) 90%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.einstieg-lead {
    max-width: 38em;
    margin-top: 30px;
    color: var(--color-text-secondary);
    font-size: 20px;
    line-height: 1.6;
}

.einstieg-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-m);
    margin-top: 40px;
}

/* ── Das Produkt im Einstieg: Reiter und Fenster ───────────────────────────────────────────── */

.produkt {
    position: relative;
    margin-top: 72px;
    padding-bottom: 96px;
}

.reiter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 28px;
    padding: 5px;
    border: 1px solid var(--site-glas-hell-rand);
    border-radius: var(--radius-pill);
    background: var(--site-glas-hell);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-4);
}

.reiter[hidden] {
    display: none;
}

.reiter-knopf {
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.reiter-knopf:hover {
    background: var(--color-accent-subtle);
}

/* Gewählt: dunkle Markenfläche UND ein Haken davor — Farbe trägt nie allein. */
.reiter-knopf[aria-selected="true"] {
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
}

.reiter-knopf[aria-selected="true"]::before {
    content: "✓ ";
}

.ansichten {
    display: grid;
    gap: 64px;
}

.ansicht[hidden] {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .ansichten.umschaltbar .ansicht:not([hidden]) {
        animation: ansicht-ein 0.5s var(--site-weich) both;
    }
}

@keyframes ansicht-ein {
    from {
        opacity: 0;
        translate: 0 14px;
        scale: 0.99;
    }
}

.fenster {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px;
    border: 1px solid var(--site-glas-hell-rand);
    border-radius: var(--site-radius-gross);
    background: var(--site-glas-hell);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--site-schatten-leuchten);
}

.fenster-leiste {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    border: 1px solid var(--color-stroke);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--color-surface);
}

.fenster-leiste i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-stroke-strong);
}

.fenster-leiste span {
    flex: 1;
    max-width: 320px;
    margin: 0 auto;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    color: var(--color-text-secondary);
    font-size: 13px;
    text-align: center;
    translate: -20px 0;
}

.fenster-bild {
    display: block;
}

.fenster-bild img,
.fenster-buehne {
    width: 100%;
    border: 1px solid var(--color-stroke);
    border-radius: 0 0 16px 16px;
    background: var(--color-surface);
}

.fenster-bild img {
    height: auto;
    aspect-ratio: 16 / 9.4;
    object-fit: cover;
    object-position: top left;
}

/* Die Bühne der Überblick-Szene im ersten Reiter — gleich hoch wie die Aufnahmen. */
.fenster-buehne {
    display: block;
    aspect-ratio: 16 / 9.4;
    padding: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 100%, var(--color-accent-tint), transparent 70%),
        var(--color-surface);
    overflow: hidden;
}

.ansicht-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 28px;
    margin-top: 22px;
}

.ansicht-text {
    color: var(--color-text-secondary);
    text-align: center;
}

.ansicht-text strong {
    color: var(--color-text);
}

/* Die Überblick-Szene: eine nachgebaute Startseite des Betriebs. Navigation links, oben drei
   Kennzahlen, darunter kommen die Einträge der Dienstleister nacheinander herein. */
.cockpit {
    position: relative;
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

.cockpit-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 12px;
    border-right: 1px solid var(--color-stroke);
    background: var(--color-canvas);
}

.cockpit-nav span {
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.cockpit-nav .aktiv {
    background: var(--color-accent-subtle);
    color: var(--color-text);
    font-weight: 600;
}

.cockpit-marke {
    width: 26px;
    height: 26px;
    margin: 0 0 14px 10px;
    padding: 0 !important;
    border-radius: 8px;
    background: var(--color-accent-bg);
}

.cockpit-haupt {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 28px 32px 72px;
}

.cockpit-titel {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.cockpit-unter {
    margin-top: 2px;
    color: var(--color-text-secondary);
}

.cockpit-kennzahlen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.kz {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--color-stroke);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
}

.kz small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.kz b {
    font-size: 18px;
    letter-spacing: -0.01em;
}

.cockpit-zwischen {
    font-weight: 600;
}

.cockpit-feed {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-stroke);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.cockpit-feed li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-stroke);
    box-shadow: inset 3px 0 0 var(--color-accent-bg);
    font-weight: 600;
}

.cockpit-feed li:last-child {
    border-bottom: 0;
}

.cockpit-feed small {
    display: block;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.absender {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
    font-size: 12px;
    font-weight: 700;
}

.cockpit-hinweis {
    position: absolute;
    right: 20px;
    bottom: 18px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
    box-shadow: var(--shadow-8);
    font-size: 13px;
    font-weight: 600;
}

/* Die Firmen, die Preventra einsetzen — als Schrift, ohne fremde Logos. */
.einsatz {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 72px;
}

.einsatz p {
    color: var(--color-text-secondary);
    font-size: 15px;
}

.einsatz ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 64px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.einsatz li {
    color: var(--color-text);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* Die deutsche Flagge: drei WAAGERECHTE Streifen, Schwarz oben. */
.flagge {
    display: inline-block;
    flex: none;
    width: 21px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(
        var(--site-flagge-schwarz) 0 33.34%,
        var(--site-flagge-rot) 33.34% 66.67%,
        var(--site-flagge-gold) 66.67%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ── Abschnitte ─────────────────────────────────────────────────────────────────────────────── */

.abschnitt {
    padding: var(--site-abschnitt) 0;
}

.abschnitt-knapp {
    padding: 88px 0;
}

/* ── Säulen auf der Markenfläche ──────────────────────────────────────────────────────────── */

/* Die dunklen Flächen schweben als Tafeln mit runden Ecken auf dem Weiß. */
.saeulen,
.vertrauen {
    margin: 0 var(--site-tafel-rand);
    border-radius: var(--site-tafel-radius);
}

.saeulen {
    position: relative;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, var(--site-aubergine), transparent 70%),
        linear-gradient(180deg, var(--site-aubergine) 0%, var(--color-markenflaeche) 45%, var(--site-buehne-tief) 100%);
    color: var(--site-buehne-text);
}

.saeulen .vorzeile,
.vertrauen .vorzeile {
    color: var(--site-buehne-akzent);
}

.saeulen .lead,
.vertrauen .lead {
    color: var(--site-buehne-text-2);
}

/* Drei Säulen als dunkle Glaskarten, jede mit einem kleinen Bild statt einer Häkchenliste. */
.saeulen-raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 72px;
}

.saeule {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 32px;
    border: 1px solid var(--site-glas-rand);
    border-radius: var(--site-radius-gross);
    background: var(--site-glas);
    transition: translate 0.4s var(--site-weich), border-color 0.4s ease, box-shadow 0.4s ease;
}

.saeule:hover {
    translate: 0 -4px;
    border-color: var(--site-buehne-linie);
    box-shadow: 0 30px 70px -30px var(--site-leuchten);
}

.saeule h3,
.saeule p,
.saeule-weiter {
    margin-left: 18px;
    margin-right: 18px;
}

.saeule h3 {
    margin-top: 28px;
    font-size: 26px;
    letter-spacing: -0.025em;
}

.saeule p {
    margin-top: 10px;
    margin-bottom: 24px;
    color: var(--site-buehne-text-2);
}

.saeule-weiter {
    margin-top: auto;
    color: var(--site-buehne-akzent);
    font-weight: 600;
    text-decoration: none;
}

.saeule-weiter span {
    display: inline-block;
    transition: translate 0.25s var(--site-weich);
}

.saeule-weiter:hover {
    color: var(--site-buehne-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.saeule-weiter:hover span {
    translate: 4px 0;
}

/* Das Bild oben in der Säule: eine helle Bühne mit Leuchten. */
.saeule-bild {
    position: relative;
    display: grid;
    place-items: center;
    height: 244px;
    padding: 20px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 100%, var(--site-rosa), transparent 75%),
        linear-gradient(180deg, var(--site-flieder), var(--site-flieder-tief));
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
}

/* Grundfunktion: drei Einträge, leicht versetzt übereinander. */
.schwebe {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 72%;
    padding: 10px 14px;
    border: 1px solid var(--color-stroke);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-4);
    font-weight: 600;
}

.schwebe b {
    color: var(--color-link);
    font-size: 11px;
}

.schwebe i {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.schwebe-1 { top: 16px;  left: 6%;  rotate: -2deg; }
.schwebe-2 { top: 88px;  left: 22%; rotate: 1.5deg; }
.schwebe-3 { top: 160px; left: 10%; rotate: -1deg; }

/* Pakete: Schalter wie in den Einstellungen. Der Zustand steckt in der Lage des Knopfs, nicht
   nur in der Farbe. */
.schalter-liste {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.schalter-liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border: 1px solid var(--color-stroke);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
    font-weight: 600;
}

.schalter-liste small {
    display: block;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.schalter-liste i {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--color-stroke-strong);
}

.schalter-liste i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
}

.schalter-liste i.an {
    background: var(--color-accent-bg);
}

.schalter-liste i.an::after {
    left: 19px;
}

/* Sicherheit: drei Schichten übereinander, wie die dreifache Trennung. */
.schichten {
    display: grid;
    justify-items: center;
    width: 100%;
    perspective: 600px;
}

.schichten span {
    display: grid;
    place-items: center;
    width: 78%;
    height: 46px;
    margin-top: -6px;
    border: 1px solid var(--color-surface);
    border-radius: 12px;
    background: var(--color-accent-bg);
    box-shadow: 0 12px 24px -12px var(--color-markenflaeche);
    color: var(--color-on-accent);
    font-weight: 600;
    transform: rotateX(38deg);
}

.schichten span:nth-child(2) {
    width: 86%;
    background: var(--color-accent-bg-hover);
}

.schichten span:nth-child(3) {
    width: 94%;
    background: var(--color-markenflaeche);
}

/* Die fünf Merkmale als schlanke Leiste unter den Säulen. */
.merkmale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--site-buehne-linie);
}

.merkmale li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 24px 20px 0;
}

.merkmale li + li {
    border-left: 1px solid var(--site-buehne-linie);
}

.merkmale strong {
    font-size: 15px;
}

.merkmale span {
    color: var(--site-buehne-text-2);
    font-size: 14px;
}

.saeulen :focus-visible,
.vertrauen :focus-visible,
.fuss :focus-visible {
    outline-color: var(--site-buehne-text);
    box-shadow: 0 0 0 5px var(--color-markenflaeche);
}

/* ── So funktioniert es: sechs Karten ───────────────────────────────────────────────────────── */

.ideen-abschnitt {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--site-flieder) 55%, var(--color-surface) 100%);
}

.ideen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 72px;
}

.idee {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px;
    border: 1px solid var(--site-glas-hell-rand);
    border-radius: var(--site-radius-gross);
    background: var(--site-glas-hell);
    box-shadow: var(--shadow-4);
    transition: translate 0.4s var(--site-weich), box-shadow 0.4s ease;
}

.idee:hover {
    translate: 0 -4px;
    box-shadow: var(--shadow-8);
}

.idee-nr {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
    font-size: 15px;
    font-weight: 700;
}

.idee h3 {
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.idee-text > p:not(.idee-nr):not(.weiter) {
    margin-top: 14px;
    color: var(--color-text-secondary);
}

.weiter {
    margin-top: var(--space-l);
}

.buehnenbild {
    display: grid;
    place-items: center;
    min-height: 380px;
    margin: auto 0 0;
    padding: 36px 24px;
    border: 1px solid var(--color-stroke);
    border-radius: var(--site-radius-karte);
    background:
        radial-gradient(ellipse 80% 70% at 50% 100%, var(--color-accent-tint), transparent 75%),
        var(--color-surface);
}

.ideen .netz {
    max-width: 400px;
}

/* ── Kleine Animationen ─────────────────────────────────────────────────────────────────────────
 *
 * Ein Baukasten statt sechs Einzelstücken: Jedes bewegte Element trägt eine Bewegungsart (a-…) und
 * eine Verzögerung (v0 … v12, je 0,3 s). Bewegt wird nur unter .laeuft — das Skript setzt die
 * Klasse, sobald die Szene sichtbar wird; ohne Skript steht sie im Markup und die Szene spielt beim
 * Laden.
 *
 * Der Ruhezustand jedes Elements ist sein ENDBILD. Die Animation führt nur dorthin (fill-mode both).
 * Wer reduzierte Bewegung eingestellt hat, sieht sofort das fertige Bild. Keine Szene dauert länger
 * als fünf Sekunden, keine wiederholt sich.
 */

.anim.wartet {
    opacity: 0;
}

.a-aus {
    opacity: 0;
}

.laeuft .a-ein { animation: a-ein 0.5s ease both; }
.laeuft .a-aus { animation: a-aus 0.3s ease both; }
.laeuft .a-pop { animation: a-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.laeuft .a-fall { animation: a-fall 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.laeuft .a-flug { animation: a-flug 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
.laeuft .a-flug-links { animation: a-flug-links 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

.laeuft .v0 { animation-delay: 0s; }
.laeuft .v1 { animation-delay: 0.3s; }
.laeuft .v2 { animation-delay: 0.6s; }
.laeuft .v3 { animation-delay: 0.9s; }
.laeuft .v4 { animation-delay: 1.2s; }
.laeuft .v5 { animation-delay: 1.5s; }
.laeuft .v6 { animation-delay: 1.8s; }
.laeuft .v7 { animation-delay: 2.1s; }
.laeuft .v8 { animation-delay: 2.4s; }
.laeuft .v9 { animation-delay: 2.7s; }
.laeuft .v10 { animation-delay: 3s; }
.laeuft .v11 { animation-delay: 3.3s; }
.laeuft .v12 { animation-delay: 3.6s; }

@keyframes a-ein {
    from { opacity: 0; transform: translateY(8px); }
}

@keyframes a-aus {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes a-pop {
    from { opacity: 0; transform: scale(0.6); }
}

@keyframes a-fall {
    from { opacity: 0; transform: translateY(-18px); }
}

@keyframes a-flug-links {
    from { opacity: 0; transform: translateX(-40px); }
}

/* Die Datei kommt von rechts, fällt in den Ordner und ist dann darin verschwunden. */
@keyframes a-flug {
    0% { opacity: 0; transform: translate(60px, -10px); }
    18% { opacity: 1; transform: translate(0, 0); }
    65% { opacity: 1; transform: translate(-40px, 76px) scale(0.92); }
    100% { opacity: 0; transform: translate(-60px, 86px) scale(0.7); }
}

/* ── Bausteine der Szenen ──────────────────────────────────────────────────────────────────── */

.szene {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.fenster-mini {
    border: 1px solid var(--color-stroke);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: var(--shadow-8);
    overflow: hidden;
    font-size: 14px;
}

.fenster-mini-kopf {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-stroke);
    background: var(--color-canvas);
    font-size: 13px;
    font-weight: 600;
}

.fenster-mini-fuss {
    padding: 10px 16px;
    border-top: 1px solid var(--color-stroke);
    color: var(--color-text-secondary);
    font-size: 13px;
}

.pille {
    justify-self: end;
    padding: 1px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-pressed);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pille-ok {
    background: var(--color-success-subtle);
    color: var(--color-success);
}

.pille-warn {
    background: var(--color-warning-subtle);
    color: var(--color-warning);
}

/* Ablage */
.ordnerliste,
.geraeteliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ordner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-stroke);
}

.ordner:last-child {
    border-bottom: 0;
}

.ordner-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.ordner-name::before {
    content: "";
    width: 16px;
    height: 12px;
    border-radius: 2px;
    background: var(--color-accent-bg);
}

.zahl {
    display: grid;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.zahl > span {
    grid-area: 1 / 1;
}

.zahl-neu {
    color: var(--color-text);
    font-weight: 600;
}

.datei-flug,
.hinweis-chip,
.toast,
.kennzahl-chip {
    position: absolute;
    border-radius: 8px;
    font-size: 13px;
}

.datei-flug {
    right: -8px;
    top: -28px;
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border: 1px solid var(--color-accent-bg);
    background: var(--color-surface);
    box-shadow: var(--shadow-8);
    font-weight: 600;
    opacity: 0;
}

.datei-flug small,
.toast small {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.hinweis-chip {
    right: 16px;
    top: -16px;
    padding: 4px 10px;
    background: var(--color-success-subtle);
    color: var(--color-success);
    font-weight: 600;
    box-shadow: var(--shadow-4);
}

.toast {
    left: 24px;
    right: 24px;
    bottom: -64px;
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border: 1px solid var(--color-stroke);
    border-left: 4px solid var(--color-accent-bg);
    background: var(--color-surface);
    box-shadow: var(--shadow-8);
}

/* Prüfstand */
.import {
    display: grid;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-stroke);
    color: var(--color-text-secondary);
    font-size: 13px;
}

.balken {
    height: 6px;
    border-radius: 3px;
    background: var(--color-surface-pressed);
    overflow: hidden;
}

.balken-fuell {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-accent-bg);
}

.laeuft .balken-fuell {
    animation: fuellen 1.1s ease both 0.2s;
}

@keyframes fuellen {
    from { width: 0; }
}

.geraeteliste li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-stroke);
}

.geraeteliste li:last-child {
    border-bottom: 0;
}

.geraeteliste .pille,
.eintrag .pille {
    grid-column: 2;
    grid-row: 1;
}

.kennzahl-chip {
    right: -14px;
    top: -18px;
    padding: 6px 12px;
    background: var(--color-warning-subtle);
    color: var(--color-warning);
    font-weight: 600;
    box-shadow: var(--shadow-8);
}

.kennzahl-chip b {
    font-size: 18px;
}

/* Kalender und Aufgabe */
.woche {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.tag {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 150px;
    padding: 8px;
    border-right: 1px solid var(--color-stroke);
    color: var(--color-text-secondary);
    font-size: 12px;
}

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

.tag b {
    color: var(--color-text);
    font-size: 15px;
}

.termin {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    border-left: 3px solid var(--color-accent-bg);
    border-radius: 4px;
    background: var(--color-accent-subtle);
    color: var(--color-text);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25;
}

.termin small {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.aufgabe {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-stroke);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: var(--shadow-4);
    font-size: 14px;
    font-weight: 600;
}

.aufgabe small {
    display: block;
    color: var(--color-success);
    font-size: 12px;
    font-weight: 500;
}

.haken {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-stroke-accessible);
    border-radius: 6px;
}

.haken-zeichen {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--color-success);
    color: var(--color-on-accent);
    font-size: 14px;
}

/* Verbandbuch */
.szene-verbandbuch {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 14px;
    max-width: 520px;
}

.aushang-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--color-stroke);
    border-top: 4px solid var(--color-accent-bg);
    border-radius: 6px;
    background: var(--color-surface);
    box-shadow: var(--shadow-4);
    text-align: center;
}

.aushang-mini small {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

/* Ein angedeuteter QR-Code: Er soll wie einer wirken, aber nichts kodieren. */
.qr {
    width: 72px;
    height: 72px;
    border: 5px solid var(--color-surface);
    outline: 2px solid var(--color-text);
    background:
        linear-gradient(var(--color-text) 0 0) 0 0 / 18px 18px no-repeat,
        linear-gradient(var(--color-text) 0 0) 100% 0 / 18px 18px no-repeat,
        linear-gradient(var(--color-text) 0 0) 0 100% / 18px 18px no-repeat,
        repeating-conic-gradient(var(--color-text) 0 25%, var(--color-surface) 0 50%) 0 0 / 8px 8px;
}

.pfeil {
    color: var(--color-accent);
    font-size: 24px;
    font-weight: 600;
}

.eintrag {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: 14px 16px;
    font-weight: 600;
}

.eintrag .pille {
    grid-row: 1 / span 2;
}

.verdeckt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.schloss {
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-subtle);
    color: var(--color-text);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

/* Protokoll */
.protokoll-mini {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 18px;
    border-radius: 10px;
    background: var(--site-buehne-tief);
    box-shadow: var(--shadow-8);
    color: var(--site-buehne-text-2);
    font-size: 13px;
    list-style: none;
}

.protokoll-mini li {
    display: flex;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--site-buehne-linie);
}

.protokoll-mini span {
    flex: none;
    width: 40px;
    color: var(--site-buehne-akzent);
    font-variant-numeric: tabular-nums;
}

.protokoll-sperre {
    border-bottom: 0 !important;
    color: var(--site-buehne-text);
    font-weight: 600;
}

/* ── Das Netz ───────────────────────────────────────────────────────────────────────────────────
 *
 * Eine erklärende Abbildung, kein Spiel: Linien zeichnen sich, Knoten blenden ruhig ein. Unter drei
 * Sekunden, deshalb ohne Anhalten-Schalter (WCAG 2.2.2 greift erst ab fünf). Der Ruhezustand ist
 * das Endbild; bei reduzierter Bewegung entfällt die Animation.
 */

.netz {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    margin: 0 auto;
}

/* Vom Skript gesetzt, solange die Abbildung unterhalb des sichtbaren Bereichs wartet. */
.netz.wartet {
    opacity: 0;
}

.netz-linien {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ring {
    fill: none;
    stroke: var(--color-stroke-strong);
    stroke-width: 0.3;
    stroke-dasharray: 1 1.5;
}

.linie {
    stroke: var(--color-accent);
    stroke-width: 0.5;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

.knoten {
    position: absolute;
    translate: -50% -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.knoten span {
    font-weight: 600;
    line-height: 1.25;
    hyphens: manual;
}

.knoten small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.knoten-betrieb {
    left: 50%;
    top: 50%;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-accent-bg);
    color: var(--color-on-accent);
}

.knoten-betrieb span {
    font-size: clamp(15px, 1.6vw, 18px);
}

.knoten-betrieb small {
    color: var(--color-on-accent);
}

.knoten-anbieter {
    width: 34%;
    padding: 10px var(--space-s);
    border: 1px solid var(--color-stroke);
    border-top: 3px solid var(--color-accent-bg);
    background: var(--color-surface);
    border-radius: 8px;
    box-shadow: var(--shadow-4);
}

.knoten-anbieter span {
    font-size: clamp(12px, 1.3vw, 14px);
}

.knoten-1 { left: 22%; top: 22%; }
.knoten-2 { left: 78%; top: 22%; }
.knoten-3 { left: 78%; top: 78%; }
.knoten-4 { left: 22%; top: 78%; }

.laeuft .ring { animation: einblenden 0.6s ease both; }
.laeuft .knoten-betrieb { animation: einblenden 0.6s ease both 0.1s; }
.laeuft .linie { animation: zeichnen 0.7s ease-out both; }
.laeuft .linie-1 { animation-delay: 0.5s; }
.laeuft .linie-2 { animation-delay: 0.8s; }
.laeuft .linie-3 { animation-delay: 1.1s; }
.laeuft .linie-4 { animation-delay: 1.4s; }
.laeuft .knoten-anbieter { animation: einblenden 0.5s ease both; }
.laeuft .knoten-1 { animation-delay: 0.9s; }
.laeuft .knoten-2 { animation-delay: 1.2s; }
.laeuft .knoten-3 { animation-delay: 1.5s; }
.laeuft .knoten-4 { animation-delay: 1.8s; }

@keyframes einblenden {
    from { opacity: 0; }
}

@keyframes zeichnen {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

/* ── Vergleich ──────────────────────────────────────────────────────────────────────────────── */

.vergleich-abschnitt {
    padding-top: 48px;
}

.vergleich {
    max-width: 1040px;
    margin: 64px auto 0;
    border: 1px solid var(--color-stroke);
    border-radius: var(--site-radius-gross);
    background: var(--color-surface);
    box-shadow: var(--shadow-8);
    overflow: hidden;
}

.vergleich-kopf,
.vergleich-zeile {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
}

.vergleich-kopf {
    border-bottom: 1px solid var(--color-stroke);
    font-size: 15px;
    font-weight: 600;
}

.vergleich-kopf span {
    padding: 18px var(--space-xxl);
}

.vergleich-kopf span:first-child {
    grid-column: 2;
    color: var(--color-text-secondary);
}

.vergleich-kopf span:last-child {
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
}

.vergleich-zeilen {
    margin: 0;
}

.vergleich-zeile + .vergleich-zeile {
    border-top: 1px solid var(--color-stroke);
}

.vergleich-zeile dt,
.vergleich-zeile dd {
    margin: 0;
    padding: 20px var(--space-xxl);
}

.vergleich-zeile dt {
    font-weight: 600;
}

.vergleich-zeile .vorher {
    color: var(--color-text-secondary);
}

.vergleich-zeile .nachher {
    background: var(--site-flieder);
    font-weight: 500;
}

/* ── Funktionen: Kacheln unterschiedlicher Größe ────────────────────────────────────────────── */

.kacheln {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 64px;
}

.kachel {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: 32px;
    border: 1px solid var(--color-stroke);
    border-radius: var(--site-radius-gross);
    background: linear-gradient(180deg, var(--color-surface) 60%, var(--site-flieder) 100%);
    transition: translate 0.4s var(--site-weich), box-shadow 0.4s ease;
}

.kachel:hover {
    translate: 0 -3px;
    box-shadow: var(--shadow-8);
}

.kachel h3 {
    font-size: 22px;
    letter-spacing: -0.02em;
}

.kachel p {
    color: var(--color-text-secondary);
}

.kachel-breit {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    background:
        radial-gradient(ellipse 50% 80% at 85% 50%, var(--color-accent-tint), transparent 70%),
        linear-gradient(180deg, var(--color-surface) 60%, var(--site-flieder) 100%);
}

.kachel-hoch {
    grid-row: span 2;
}

.kachel-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-s);
}

.kachel-zusatz {
    margin-top: var(--space-s);
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-stroke);
}

.kachel-zusatz strong {
    color: var(--color-text);
}

/* Kleine Bilder oben in den Funktionskacheln: je eine Andeutung der Oberfläche. */
.kachel-bild {
    display: grid;
    place-items: center;
    min-height: 150px;
    margin: -12px -12px 14px;
    padding: 18px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 100%, var(--color-accent-tint), transparent 75%),
        var(--site-flieder);
    font-size: 13px;
    line-height: 1.3;
}

/* In der hohen Kachel füllt der Ordnerbaum das Bild. */
.kachel-bild-baum {
    flex: 1;
    place-items: stretch;
    align-content: center;
}

.kachel-bild-baum .baum {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-stroke);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-4);
}

.mini-woche {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.mini-woche span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--color-stroke);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
}

.mini-woche small {
    color: var(--color-text-secondary);
}

.mini-woche b {
    font-size: 20px;
}

.mini-woche i {
    margin-top: 6px;
    padding: 4px 6px;
    border-left: 3px solid var(--color-accent-bg);
    border-radius: 4px;
    background: var(--color-accent-tint);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.mini-aufgaben {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-aufgaben li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-stroke);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
    font-weight: 600;
}

.mini-aufgaben small {
    display: block;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.mini-haken {
    display: grid;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-stroke-accessible);
    border-radius: 6px;
    font-size: 12px;
}

.erledigt .mini-haken {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--color-on-accent);
}

.mini-chat {
    display: grid;
    gap: 8px;
    width: 100%;
}

.mini-chat p {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 14px;
    box-shadow: var(--shadow-2);
}

.mini-chat .fremd {
    justify-self: start;
    border-bottom-left-radius: 4px;
    background: var(--color-surface);
}

.mini-chat .eigen {
    justify-self: end;
    border-bottom-right-radius: 4px;
    background: var(--color-nachricht-eigen);
}

.mini-verbandbuch {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mini-verbandbuch .qr {
    flex: none;
    width: 64px;
    height: 64px;
}

.mini-eintrag {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--color-stroke);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
    font-weight: 600;
}

.mini-eintrag small {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.mini-eintrag i {
    align-self: flex-start;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
    font-size: 11px;
    font-style: normal;
}

.mini-balken {
    display: grid;
    gap: 10px;
    width: 100%;
}

.mini-balken-zeile {
    display: grid;
    gap: 4px;
}

.mini-balken-zeile small {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.mini-balken-zeile i {
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-bg);
}

.mini-balken-zeile i.lang {
    width: 88%;
}

.mini-balken-zeile i.kurz {
    width: 46%;
    background: var(--color-markenflaeche);
}

.mini-summe {
    justify-self: start;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
    font-weight: 600;
}

/* Handy mit der echten Prüfabfrage: Rahmen, Dynamic Island, Seitentasten. */
.handy {
    position: relative;
    flex: none;
    width: 216px;
    margin: 0 8px;
    padding: 9px;
    border-radius: 42px;
    background: var(--site-geraet);
    box-shadow:
        inset 0 0 0 2px var(--site-geraet-kante),
        0 30px 60px -24px rgba(25, 3, 51, 0.5);
}

.handy-schirm {
    overflow: hidden;
    aspect-ratio: 9 / 19.5;
    padding-top: 30px;
    border-radius: 33px;
    background: var(--color-canvas);
}

.handy-schirm img {
    width: 100%;
    height: auto;
}

.handy-insel {
    position: absolute;
    top: 19px;
    left: 50%;
    z-index: 1;
    width: 72px;
    height: 21px;
    border-radius: 11px;
    background: var(--site-geraet);
    translate: -50% 0;
}

.handy-taste {
    position: absolute;
    width: 3px;
    border-radius: 2px;
    background: var(--site-geraet-kante);
}

.handy-taste-oben { left: -3px; top: 96px; height: 26px; }
.handy-taste-unten { left: -3px; top: 134px; height: 46px; }
.handy-taste-rechts { right: -3px; top: 118px; height: 62px; }

/* Ordnerbaum */
.baum {
    display: grid;
    gap: 0;
    margin: 8px 0 0;
    padding: var(--space-l) 0 0;
    list-style: none;
    font-size: 14px;
}

.baum li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    hyphens: auto;
    gap: var(--space-s);
    padding: 8px 0;
    border-bottom: 1px solid var(--color-stroke);
    font-weight: 600;
}

.baum-tief {
    padding-left: var(--space-l) !important;
    font-weight: 400 !important;
}

.sicht {
    white-space: nowrap;
    padding: 0 var(--space-s);
    background: var(--color-success-subtle);
    color: var(--color-success);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
}

.sicht-intern {
    background: var(--color-surface-pressed);
    color: var(--color-text-secondary);
}

.kachel-fakten {
    display: grid;
    gap: 6px;
    margin: auto 0 0;
    padding: 16px 0 0;
    list-style: none;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.kachel-fakten strong {
    color: var(--color-text);
}

.sicht-mit {
    background: var(--color-accent-subtle);
    color: var(--color-text);
}

/* Protokoll */
.protokoll {
    flex: 1;
    border-collapse: collapse;
    font-size: 13px;
}

.protokoll td {
    padding: 7px var(--space-s);
    border-bottom: 1px solid var(--color-stroke);
}

.protokoll td:first-child {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Sicherheit und Made in Germany auf der dunklen Fläche ──────────────────────────────────── */

.vertrauen {
    background:
        radial-gradient(ellipse 60% 35% at 50% 0%, var(--site-aubergine), transparent 75%),
        linear-gradient(180deg, var(--site-buehne-tief) 0%, var(--color-markenflaeche) 55%, var(--site-buehne-tief) 100%);
    color: var(--site-buehne-text);
}

.glaskacheln {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 72px 0 0;
    padding: 0;
    list-style: none;
}

.glaskacheln li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 240px;
    padding: 36px 24px 30px;
    border: 1px solid var(--site-glas-rand);
    border-radius: var(--site-radius-gross);
    background:
        radial-gradient(ellipse 70% 60% at 50% 30%, var(--site-glas), transparent 75%),
        var(--site-glas);
    text-align: center;
}

.glaskacheln strong {
    margin-top: auto;
    font-size: 19px;
}

.glaskacheln span:not(.flagge) {
    color: var(--site-buehne-text-2);
    font-size: 15px;
}

.glaszeichen {
    width: 64px;
    height: 64px;
    margin: auto 0 22px;
    fill: none;
    stroke: var(--site-buehne-akzent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flagge-gross {
    display: block;
    width: 72px;
    height: 44px;
    margin: auto 0 32px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--site-glas-rand);
}

/* Das Datenblatt: sachlich wie ein Trust Center. Links die Angaben, rechts die Unterlagen. */
.trust {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 72px;
}

.datenblatt-rahmen {
    padding: 44px;
    border: 1px solid var(--site-glas-rand);
    border-radius: var(--site-radius-gross);
    background: var(--site-glas);
}

.datenblatt-rahmen h3 {
    font-size: 28px;
    letter-spacing: -0.025em;
}

.datenblatt-unter {
    margin-top: 6px;
    color: var(--site-buehne-text-2);
}

.datenblatt {
    margin: 28px 0 0;
}

.datenblatt div {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--site-buehne-linie);
}

.datenblatt dt {
    font-weight: 600;
}

.datenblatt dd {
    margin: 0;
    color: var(--site-buehne-text-2);
    font-size: 15px;
}

.unterlagen {
    position: sticky;
    top: 104px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    border-radius: var(--site-radius-gross);
    background:
        radial-gradient(ellipse 90% 60% at 100% 0%, var(--site-aubergine), transparent 70%),
        var(--color-markenflaeche);
    box-shadow: inset 0 0 0 1px var(--site-glas-rand), var(--site-schatten-leuchten);
}

.unterlagen h3 {
    font-size: 24px;
    letter-spacing: -0.02em;
}

.unterlagen > p {
    margin-top: 14px;
    color: var(--site-buehne-text-2);
    font-size: 15px;
}

.unterlagen-liste {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.unterlagen-liste li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
}

.unterlagen-liste svg,
.vertrauensleiste svg,
.nutzen svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.unterlagen-liste svg {
    color: var(--site-buehne-akzent);
}

.unterlagen .knopf {
    align-self: flex-start;
    margin-top: 24px;
}

/* Ein heller Knopf auf dunklem Grund. */
.knopf-hell {
    border-color: var(--color-surface);
    background: var(--color-surface);
    color: var(--color-markenflaeche);
}

.knopf-hell:hover {
    border-color: var(--site-flieder-tief);
    background: var(--site-flieder-tief);
}

.zertifikate {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--site-buehne-linie);
}

.zertifikate > p {
    color: var(--site-buehne-text-2);
    font-size: 14px;
}

.zertifikate-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.zertifikate-liste li {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border: 1px solid var(--site-glas-rand);
    border-radius: 12px;
    background: var(--site-glas);
    color: var(--site-buehne-text-2);
    font-size: 12px;
    line-height: 1.35;
}

.zertifikate-liste strong {
    margin-bottom: 2px;
    color: var(--site-buehne-text);
    font-size: 14px;
}

.zertifikate-quelle {
    margin-top: 12px;
    color: var(--site-buehne-text-2);
    font-size: 13px;
}

.vertrauen .verweis {
    color: var(--site-buehne-akzent);
}

/* ── Warum es Preventra gibt ─────────────────────────────────────────────────────────────────── */

.warum-abschnitt {
    background: linear-gradient(180deg, var(--color-surface), var(--site-flieder));
}

.zitat {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 72px 80px 56px;
    border: 1px solid var(--site-glas-hell-rand);
    border-radius: var(--site-radius-gross);
    background: var(--site-glas-hell);
    box-shadow: var(--shadow-8);
}

.zitat::before {
    content: "“";
    position: absolute;
    top: 8px;
    right: 56px;
    color: var(--color-accent-tint);
    font-size: 260px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.zitat > * {
    position: relative;
}

.zitat-satz {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.zitat-text {
    margin-top: 32px;
    color: var(--color-text-secondary);
    font-size: 18px;
    line-height: 1.7;
    columns: 2;
    column-gap: 56px;
}

.zitat-text p {
    margin-bottom: 18px;
    break-inside: avoid;
}

.unterschrift {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--color-stroke);
    line-height: 1.4;
}

.unterschrift-zeichen {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
    font-weight: 600;
}

/* ── Abschluss: Preise und Kontakt im Verlauf ───────────────────────────────────────────────────
 *
 * Wie der Schluss des Vorbilds: großer Kopf, zwei Karten nebeneinander, der Verlauf geht erst
 * UNTER den Karten ins Dunkle über, damit sie auf hellem Grund stehen.
 */

.abschluss {
    padding-bottom: 200px;
    background:
        radial-gradient(ellipse 60% 40% at 50% 30%, var(--site-leuchten-weich), transparent 70%),
        linear-gradient(180deg, var(--color-surface) 0%, var(--site-flieder) 25%, var(--site-flieder-tief) 62%, var(--site-rosa) 82%, var(--site-aubergine) 100%);
}

.abschluss-karten {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 64px;
}

.glaskarte,
.preiskarte {
    padding: 44px;
    border-radius: var(--site-radius-gross);
}

.glaskarte {
    border: 1px solid var(--site-glas-hell-rand);
    background: var(--site-glas-hell);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-8);
}

.glaskarte h3,
.preiskarte h3 {
    font-size: 30px;
    letter-spacing: -0.03em;
}

.etikett {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
    font-size: 13px;
    font-weight: 600;
}

.etikett-hell {
    background: var(--site-glas);
    box-shadow: inset 0 0 0 1px var(--site-glas-rand);
    color: var(--site-buehne-text);
}

/* Drei Schritte mit großen Zahlen. */
.schritte {
    display: grid;
    gap: 12px;
    margin: 24px 0 32px;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.schritte li {
    display: flex;
    align-items: center;
    gap: 14px;
    counter-increment: schritt;
    font-weight: 500;
}

.schritte li::before {
    content: counter(schritt);
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-accent-tint);
    color: var(--color-link);
    font-size: 14px;
    font-weight: 700;
}

/* Das Formular steht in der Glaskarte und trägt selbst keinen Rahmen. */
.glaskarte .formular {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.glaskarte .feld input[type="text"],
.glaskarte .feld input[type="email"],
.glaskarte .feld input[type="tel"],
.glaskarte .feld textarea {
    min-height: 48px;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.glaskarte .feld input:focus-visible,
.glaskarte .feld textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 5px var(--color-accent-tint);
}

/* Die Preiskarte: dunkel, als Gegengewicht zur hellen. */
.preiskarte {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 80% 50% at 80% 0%, var(--site-aubergine), transparent 70%),
        var(--color-markenflaeche);
    color: var(--site-buehne-text);
    box-shadow: var(--site-schatten-leuchten);
}

.preiskarte-text {
    margin-top: 10px;
    color: var(--site-buehne-text-2);
}

.preisliste {
    display: grid;
    gap: 0;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.preisliste li {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 16px 0 16px 34px;
    border-top: 1px solid var(--site-buehne-linie);
    color: var(--site-buehne-text-2);
    font-size: 15px;
}

.preisliste li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 22px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--site-buehne-akzent);
    border-bottom: 2px solid var(--site-buehne-akzent);
    rotate: -45deg;
}

.preisliste strong {
    color: var(--site-buehne-text);
    font-size: 16px;
}

.preiskarte .kontakt-direkt {
    margin-top: auto;
    padding-top: 28px;
    color: var(--site-buehne-text-2);
}

.preiskarte .verweis {
    color: var(--site-buehne-akzent);
    font-size: 18px;
    font-weight: 600;
}

.preiskarte :focus-visible {
    outline-color: var(--site-buehne-text);
    box-shadow: 0 0 0 5px var(--color-markenflaeche);
}

.kontakt-direkt {
    margin-top: 24px;
    color: var(--color-text-secondary);
}

.formular {
    display: grid;
    gap: 18px;
    padding: 32px;
    border: 1px solid var(--color-stroke);
    background: var(--color-surface);
    border-radius: var(--site-radius-karte);
    box-shadow: var(--shadow-8);
}

.feld-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.feld {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.feld label,
.feld legend {
    padding: 0;
    font-size: 15px;
    font-weight: 600;
}

.optional {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--space-m);
    border: 1px solid var(--color-stroke-accessible);
    border-radius: var(--site-radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.feld textarea {
    resize: vertical;
}

.auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-xl);
    margin-top: var(--space-xs);
}

.auswahl label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    min-height: 24px;
    font-weight: 400;
}

.auswahl input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-accent-bg);
}

.feld-hinweis {
    color: var(--color-text-secondary);
    font-size: 14px;
}

.formular .knopf {
    justify-self: start;
}

.formular-status:empty {
    display: none;
}

.formular-status {
    padding: var(--space-m) var(--space-l);
    border-left: 3px solid var(--color-accent-bg);
    background: var(--color-info-subtle);
    border-radius: var(--site-radius);
}

/* ── Vertrauensleiste im Einstieg ──────────────────────────────────────────────────────────── */

.vertrauensleiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.vertrauensleiste li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    background: var(--site-glas-hell);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
}

.vertrauensleiste svg {
    margin-top: 0;
    color: var(--color-success);
}

/* ── Für wen ────────────────────────────────────────────────────────────────────────────────── */

.fuer-wen {
    background: linear-gradient(180deg, var(--color-surface), var(--site-flieder) 70%, var(--color-surface));
}

.reiter-klein {
    margin-top: 40px;
    margin-bottom: 48px;
}

.zielgruppe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: center;
}

.zielgruppe-text h3 {
    font-size: clamp(26px, 2.6vw, 34px);
    letter-spacing: -0.03em;
}

.zielgruppe-text > p {
    margin-top: 12px;
    color: var(--color-text-secondary);
    font-size: 18px;
}

.nutzen {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.nutzen li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.nutzen svg {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    padding: 3px;
    border-radius: 50%;
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
    stroke-width: 2.4;
}

.nutzen span {
    color: var(--color-text-secondary);
}

.nutzen strong {
    color: var(--color-text);
}

.fenster-klein {
    margin: 0;
}

.fenster-klein .fenster-bild img {
    aspect-ratio: 4 / 3;
}

/* ── Einführung: vier Schritte auf einer Linie ─────────────────────────────────────────────── */

.zeitleiste {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 72px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: zeit;
}

/* Die Linie hinter den Nummern. */
.zeitleiste::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-bg), var(--color-markenflaeche));
}

.zeitleiste li {
    position: relative;
    counter-increment: zeit;
}

.zeitleiste li::before {
    content: counter(zeit);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border: 4px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--color-stroke);
}

.zeitleiste h3 {
    font-size: 20px;
    letter-spacing: -0.02em;
}

.zeitleiste p {
    margin-top: 8px;
    color: var(--color-text-secondary);
    font-size: 16px;
}

/* ── Häufige Fragen ─────────────────────────────────────────────────────────────────────────── */

.fragen {
    padding-top: 32px;
}

.fragen-innen {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    gap: 72px;
    align-items: start;
}

.fragen h2 {
    font-size: clamp(30px, 3.2vw, 42px);
}

.fragen-liste {
    border-top: 1px solid var(--color-stroke);
}

.fragen-liste details {
    border-bottom: 1px solid var(--color-stroke);
}

.fragen-liste summary {
    position: relative;
    padding: 22px 48px 22px 0;
    font-size: 18px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

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

/* Plus und Minus als Form, nicht nur als Farbe. */
.fragen-liste summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border: 1px solid var(--color-stroke-strong);
    border-radius: 50%;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    transition: rotate 0.25s var(--site-weich), background-color 0.2s ease;
}

.fragen-liste details[open] summary::after {
    content: "–";
    background: var(--color-markenflaeche);
    border-color: var(--color-markenflaeche);
    color: var(--color-auf-markenflaeche);
}

.fragen-liste summary:hover::after {
    border-color: var(--color-text);
}

.fragen-liste details p {
    max-width: 44em;
    padding: 0 48px 24px 0;
    color: var(--color-text-secondary);
}

/* ── Fuß: Absender ──────────────────────────────────────────────────────────────────────────── */

.fuss-unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
}

.fuss-standort {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ── Fuß ────────────────────────────────────────────────────────────────────────────────────── */

.fuss {
    padding: 80px 0 var(--space-xxl);
    background: linear-gradient(180deg, var(--site-aubergine), var(--site-buehne-tief));
    color: var(--site-buehne-text-2);
    font-size: 15px;
}

.fuss-raster {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.fuss-logo {
    width: 128px;
    height: auto;
    margin-bottom: var(--space-l);
}

.fuss-titel {
    margin-bottom: var(--space-m);
    color: var(--site-buehne-text);
    font-weight: 600;
}

.fuss ul {
    display: grid;
    gap: var(--space-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fuss a {
    color: var(--site-buehne-text-2);
    text-decoration: none;
}

.fuss a:hover {
    color: var(--site-buehne-text);
    text-decoration: underline;
}

.fuss-unten {
    margin-top: 56px;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--site-buehne-linie);
    font-size: 14px;
}

/* ── Rechtstexte ────────────────────────────────────────────────────────────────────────────── */

.rechtstext {
    max-width: 46em;
    padding-top: 64px;
    padding-bottom: var(--site-abschnitt);
}

.rechtstext h1 {
    font-size: var(--site-schrift-h2);
}

.rechtstext h2 {
    margin-top: 40px;
    font-size: 22px;
}

.rechtstext p,
.rechtstext ul {
    margin-top: var(--space-m);
}

/* ── Einblenden beim Scrollen ───────────────────────────────────────────────────────────────────
 *
 * Nur mit Skript (es setzt .js an <html>) und nur ohne Wunsch nach reduzierter Bewegung. Ohne
 * Skript ist alles sofort sichtbar; das Skript setzt .sichtbar, sobald ein Block ins Bild kommt.
 */

@media (prefers-reduced-motion: no-preference) {
    .js .einblenden {
        opacity: 0;
        translate: 0 28px;
        transition: opacity 0.8s ease, translate 0.8s var(--site-weich);
    }

    .js .einblenden.sichtbar {
        opacity: 1;
        translate: 0 0;
    }

    /* Nebeneinander stehende Karten kommen nacheinander. */
    .js .saeulen-raster .einblenden:nth-child(2),
    .js .ideen .einblenden:nth-child(even),
    .js .abschluss-karten .einblenden:nth-child(2) {
        transition-delay: 0.12s;
    }

    .js .saeulen-raster .einblenden:nth-child(3) {
        transition-delay: 0.24s;
    }

    /* Die Karten heben sich beim Überfahren — dafür braucht translate nach dem Einblenden eine
       kurze Übergangszeit statt der langen. */
    .js .einblenden.sichtbar.saeule,
    .js .einblenden.sichtbar.idee {
        transition: opacity 0.8s ease, translate 0.4s var(--site-weich), box-shadow 0.4s ease;
    }
}

/* ── Schmale Bildschirme ────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .navigation {
        display: none;
    }

    .merkmale {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;
    }

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

    .unterlagen {
        position: static;
    }

    .fuss-raster {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .fuss-raster > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    :root {
        --site-rand: 20px;
        --site-abschnitt: 88px;
    }

    .einstieg-innen {
        padding-top: 56px;
    }

    .produkt {
        margin-top: 48px;
        padding-bottom: 64px;
    }

    .saeulen-raster,
    .ideen,
    .glaskacheln,
    .zielgruppe,
    .fragen-innen,
    .abschluss-karten {
        grid-template-columns: minmax(0, 1fr);
    }

    .glaskacheln li {
        min-height: 0;
    }

    .zitat {
        padding: 64px 28px 36px;
    }

    .zitat::before {
        right: 20px;
        font-size: 160px;
    }

    .zitat-text {
        columns: 1;
    }

    .datenblatt-rahmen,
    .unterlagen {
        padding: 32px 22px;
    }

    .zielgruppe,
    .fragen-innen {
        gap: 36px;
    }

    .zeitleiste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }

    .zeitleiste::before {
        display: none;
    }

    .fenster-buehne {
        aspect-ratio: auto;
    }

    .buehnenbild {
        min-height: 0;
        padding: 56px 16px 72px;
    }

    .idee {
        padding: 28px 22px;
    }

    .vergleich-kopf {
        display: none;
    }

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

    .vergleich-zeile dt {
        padding-bottom: 0;
    }

    .vergleich-zeile .vorher .nur-vorlesen,
    .vergleich-zeile .nachher .nur-vorlesen {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
        font-weight: 600;
    }

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

    .kachel-breit,
    .kachel-hoch {
        grid-column: auto;
        grid-row: auto;
    }

    .kachel-breit {
        flex-direction: column;
        align-items: stretch;
    }

    .handy {
        align-self: center;
    }
}

@media (max-width: 600px) {
    :root {
        --site-rand: 16px;
        --site-abschnitt: 72px;
    }

    .kopf-anmelden {
        display: none;
    }

    .kopf .knopf {
        min-height: 36px;
        padding: 0 var(--space-m);
        font-size: 14px;
    }

    .marke-logo {
        width: 112px;
    }

    .einstieg-lead {
        font-size: 18px;
    }

    .einstieg-aktionen .knopf {
        width: 100%;
    }

    .reiter {
        border-radius: 22px;
    }

    .reiter-knopf {
        min-height: 38px;
        padding: 0 14px;
        font-size: 14px;
    }

    .fenster {
        padding: 6px;
        border-radius: var(--site-radius-karte);
    }

    .fenster-leiste span {
        display: none;
    }

    .einsatz ul {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

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

    .datenblatt div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

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

    .vertrauensleiste li {
        font-size: 13px;
    }

    .glaskarte,
    .preiskarte,
    .saeule {
        padding: 28px 22px;
    }

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

    .cockpit-nav,
    .cockpit-feed small,
    .cockpit-feed .pille {
        display: none;
    }

    .cockpit-haupt {
        padding: 18px 14px 64px;
    }

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

    .cockpit-feed li {
        grid-template-columns: auto minmax(0, 1fr);
    }

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

    .ordner .zahl {
        display: none;
    }

    .ordner-name,
    .termin {
        min-width: 0;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .woche {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tag:nth-child(-n + 2) {
        display: none;
    }

    .datei-flug {
        right: 0;
        max-width: 80%;
    }

    .hinweis-chip {
        right: 8px;
    }

    .kennzahl-chip {
        right: 0;
    }

    .geraeteliste li,
    .eintrag {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .szene-verbandbuch {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .pfeil {
        rotate: 90deg;
    }

    .tag {
        min-height: 120px;
        padding: 6px 4px;
    }

    .termin small {
        display: none;
    }

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

    .kachel {
        padding: var(--space-xl);
    }

    .knoten-anbieter {
        width: 40%;
        padding: 6px var(--space-xs);
    }

    .knoten small {
        display: none;
    }

    .fuss-raster {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Systemeinstellungen ────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .anim,
    .anim * {
        animation: none !important;
    }

    .anim.wartet {
        opacity: 1;
    }

    .saeule,
    .idee,
    .kachel,
    .knopf {
        transition: none;
    }

    .saeule:hover,
    .idee:hover,
    .kachel:hover,
    .knopf:hover {
        translate: none;
    }
}

@media (forced-colors: active) {
    .knoten,
    .kachel,
    .saeule,
    .preiskarte,
    .idee,
    .glaskarte,
    .glaskacheln li,
    .vergleich,
    .buehnenbild,
    .fenster,
    .fenster-mini,
    .reiter {
        border: 1px solid CanvasText;
    }

    .h1-akzent {
        -webkit-text-fill-color: currentColor;
        background: none;
    }

    .linie,
    .ring {
        stroke: CanvasText;
    }
}

@media print {
    .kopf,
    .einstieg-aktionen,
    .reiter,
    .formular {
        display: none;
    }

    .saeulen,
    .vertrauen,
    .abschluss,
    .fuss {
        background: none;
        color: inherit;
    }
}