/*
 * Auftakt — Stylesheet. Ein Plakat als Website: Signalgelb als Fläche mit schwarzer Schrift (nie gelbe Schrift auf
 * Weiss), riesige Titel in der kräftigsten Grotesk des Systems, dicke Linien, keine Rundungen, harte Schatten statt
 * weicher. Dunkel: Schwarz mit Gelb. Alle Farben, Schriften und Abstände kommen als Variablen aus «design»
 * (theme.lava) und lassen sich im Backend unter Einrichtung › Design überschreiben. Kein Skript, keine Bewegung,
 * WCAG 2.2 AA in hell und dunkel.
 *
 * Flächen: Jede Fläche setzt ihre eigenen Farben (--fg, --bg, --soft, --strong, --on-strong, --rule) — Knöpfe,
 * Stempel, Linien und Fokus richten sich danach. «ctx-poster» ist die Bühne (gelb, dunkel schwarz), «ctx-ink» ein
 * schwarzes Band, «ctx-signal» bleibt in beiden Darstellungen gelb.
 */

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

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

.auftakt {
    --fg: var(--color-text);
    --bg: var(--color-background);
    --soft: var(--color-muted);
    --strong: var(--color-accent);
    --on-strong: var(--color-accent-text);
    --rule: var(--color-line);
    --link: var(--color-link);
    --focus: var(--color-focus);
    --shadow: var(--color-signal);
    --thick: 6px;
    --thin: 3px;
    --wide: 84rem;
    --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);

    margin: 0;
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--fg);
    background: var(--bg);
    font-kerning: normal;
}

.ctx-poster {
    --fg: var(--color-poster-text);
    --bg: var(--color-poster);
    --soft: var(--color-poster-muted);
    --strong: var(--color-poster-text);
    --on-strong: var(--color-poster);
    --rule: var(--color-poster-text);
    --link: var(--color-poster-text);
    --focus: var(--color-poster-text);
    --shadow: var(--color-poster-text);
}

.ctx-ink {
    --fg: var(--color-ink-text);
    --bg: var(--color-ink);
    --soft: var(--color-ink-muted);
    --strong: var(--color-ink-link);
    --on-strong: var(--color-ink);
    --rule: var(--color-ink-link);
    --link: var(--color-ink-link);
    --focus: var(--color-ink-text);
    --shadow: var(--color-ink-link);
}

.ctx-signal {
    --fg: var(--color-signal-text);
    --bg: var(--color-signal);
    --soft: var(--color-signal-muted);
    --strong: var(--color-signal-text);
    --on-strong: var(--color-signal);
    --rule: var(--color-signal-text);
    --link: var(--color-signal-text);
    --focus: var(--color-signal-text);
    --shadow: var(--color-signal-text);
}

.ctx-poster,
.ctx-ink,
.ctx-signal {
    color: var(--fg);
    background: var(--bg);
}

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

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight, 900);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: balance;
}

h2 {
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
}

h3 {
    font-size: 1.5rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

p,
ul,
ol,
dl,
figure,
blockquote,
details,
address {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 4px;
}

code,
pre {
    font-family: var(--font-code);
    font-size: 0.88em;
}

:focus-visible {
    outline: var(--thin) solid var(--focus);
    outline-offset: 3px;
}

::selection {
    background: var(--color-signal);
    color: var(--color-signal-text);
}

main {
    display: block;
}

main:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: var(--space-3);
    top: -5rem;
    z-index: 50;
    padding: var(--space-2) var(--space-4);
    background: var(--color-signal);
    color: var(--color-signal-text);
    border: var(--thin) solid var(--color-signal-text);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.skip-link:focus {
    top: var(--space-3);
}

/* Dachzeile: ein Stempel in der starken Farbe der Fläche */
.kicker {
    display: inline-block;
    margin: 0 0 var(--space-5);
    padding: 0.35em 0.65em 0.3em;
    background: var(--strong);
    color: var(--on-strong);
    font-size: 0.8125rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Plakattitel: Wörter bleiben ganz — getrennt wird nur auf schmalen Bildschirmen */
.stage-title,
.section-title,
.cta-title,
.page-title,
.legal-title,
.footer-name {
    hyphens: manual;
    -webkit-hyphens: manual;
}

@media (max-width: 40rem) {
    .stage-title,
    .section-title,
    .cta-title,
    .page-title,
    .legal-title {
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* ── Knöpfe und Links ──────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 3.25rem;
    padding: 0.65em 1.35em;
    background: var(--strong);
    color: var(--on-strong);
    border: var(--thin) solid var(--strong);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.button::after {
    content: '→' / '';
}

.button:hover {
    background: var(--bg);
    color: var(--fg);
    border-color: var(--fg);
}

.more {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    color: var(--fg);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration-thickness: var(--thin);
    text-underline-offset: 0.3em;
}

.more::after {
    content: '→' / '';
}

.more:hover {
    background: var(--strong);
    color: var(--on-strong);
    text-decoration: none;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin: 0;
}

/* Absperrband: Gelb und Schwarz schräg — gleich in beiden Darstellungen */
.stage::after,
.site-footer::before {
    content: '';
    display: block;
    height: 18px;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-signal) 0 14px,
        var(--color-signal-text) 14px 28px
    );
}

/* ── Kopf ──────────────────────────────────────────────── */
.site-header {
    position: relative;
    z-index: 30;
    background: var(--bg);
    border-bottom: var(--thick) solid var(--color-line);
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    width: min(100% - 2 * var(--gutter), var(--wide));
    min-height: 4.75rem;
    margin-inline: auto;
    padding-block: var(--space-2);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    min-height: 44px;
    margin-right: auto;
    color: var(--fg);
    text-decoration: none;
}

.brand-mark {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
}

.brand-name {
    min-width: 0;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.brand:hover .brand-name {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 0.15em;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav ul ul {
    display: none;
}

.nav li {
    display: flex;
}

.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fg);
    font-size: 0.9375rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

/* Aktuelle Seite: dicke Linie darunter, nicht nur Farbe (WCAG 1.4.1) */
.nav a:hover,
.nav a[aria-current='page'],
.nav .active > a {
    text-decoration: underline;
    text-decoration-thickness: 5px;
    text-underline-offset: 0.45em;
}

.header-account a.members-link,
.header-account button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg);
    background: none;
    border: 0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    cursor: pointer;
}

.header-account form {
    margin: 0;
}

/* Schmal: das Menü klappt als <details> auf — ohne Skript */
.menu {
    display: none;
    margin: 0;
}

.menu > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding-inline: var(--space-3);
    border: var(--thin) solid var(--fg);
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

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

.menu > summary::after {
    content: '+' / '';
    font-size: 1.25rem;
    line-height: 1;
}

.menu[open] > summary {
    background: var(--strong);
    color: var(--on-strong);
    border-color: var(--strong);
}

.menu[open] > summary::after {
    content: '−' / '';
}

.menu-panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    padding: var(--space-4) var(--gutter) var(--space-6);
    background: var(--bg);
    border-bottom: var(--thick) solid var(--color-line);
}

.menu-panel .nav ul {
    flex-direction: column;
    align-items: stretch;
}

.menu-panel .nav li + li {
    border-top: var(--thin) solid var(--fg);
}

.menu-panel .nav a {
    width: 100%;
    min-height: 3.5rem;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    letter-spacing: -0.01em;
}

@media (max-width: 47.99rem) {
    .header-wide {
        display: none;
    }

    .header-tools {
        margin-left: auto;
    }

    .menu {
        display: block;
    }

    .brand-name {
        font-size: 1.375rem;
    }

    .brand-mark {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* Sehr schmal (bis 360 px): Marke, Umschalter und Menü in einer Zeile */
@media (max-width: 22.5rem) {
    .header-inner {
        column-gap: var(--space-2);
    }

    .brand {
        gap: var(--space-2);
    }

    .brand-mark {
        width: 2rem;
        height: 2rem;
    }

    .brand-name {
        font-size: 1.125rem;
    }

    .header-tools {
        gap: var(--space-2);
    }

    .menu > summary {
        padding-inline: var(--space-2);
    }
}

/* ── Bühne: Kernaussage riesig, Absperrband unten ──────── */
.stage-inner {
    display: grid;
    gap: var(--space-7);
    align-items: center;
    width: min(100% - 2 * var(--gutter), var(--wide));
    min-height: min(72svh, 48rem);
    margin-inline: auto;
    padding-block: clamp(3rem, 0.5rem + 4.5vw, 5rem);
}

.stage-text {
    min-width: 0;
}

.stage-title {
    margin: 0 0 var(--space-6);
    font-size: clamp(2.9rem, 1.6rem + 5.6vw, 8.75rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    text-wrap: balance;
}

.stage-lead {
    max-width: 34rem;
    margin-bottom: var(--space-6);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
}

.stage-lead > :last-child {
    margin-bottom: 0;
}

/* Der Rahmen bleibt schwarz: dunkel trennt er das gelbe Bild vom gelben Schatten */
.stage-art {
    position: relative;
    max-width: 30rem;
    margin: 0;
    border: var(--thick) solid var(--color-signal-text);
    box-shadow: 14px 14px 0 var(--shadow);
}

.stage-art img {
    width: 100%;
}

/* Stempel: immer Schwarz mit Gelb — auch dunkel auf dem gelben Bild */
.stamp {
    justify-self: start;
    margin: 0;
    padding: 0.55em 0.8em 0.5em;
    background: var(--color-signal-text);
    color: var(--color-signal);
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Der Stempel liegt auf der unteren linken Ecke des Bilds */
.stage-art .stamp {
    position: absolute;
    left: calc(-1 * var(--space-3));
    bottom: var(--space-5);
}

@media (min-width: 48rem) {
    .stage.has-art .stage-inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .stage-art {
        max-width: none;
    }

    .stage-art .stamp {
        left: calc(-1 * var(--space-6));
        bottom: var(--space-6);
    }
}

/* ── Abschnitte ────────────────────────────────────────── */
.section {
    padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
    border-top: var(--thick) solid var(--color-line);
}

.section-inner {
    width: min(100% - 2 * var(--gutter), var(--wide));
    margin-inline: auto;
}

.section-head {
    display: grid;
    gap: var(--space-5) var(--space-8);
    margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.section-head .kicker {
    justify-self: start;
    margin: 0;
}

.section-title {
    margin: 0;
    font-size: clamp(2.5rem, 1.4rem + 4.8vw, 6.25rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.section-intro {
    max-width: 30rem;
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
    font-weight: 600;
    line-height: 1.4;
}

@media (min-width: 60rem) {
    .section-head {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        align-items: end;
    }

    .section-head .kicker {
        grid-column: 1 / -1;
    }
}

.section-note {
    margin: var(--space-6) 0 0;
    color: var(--soft);
    font-size: 1rem;
    font-weight: 600;
}

/* ── Ankernavigation ───────────────────────────────────── */
/* Schmal ein Raster mit dicken Linien und grossen Feldern, breit eine Leiste, die oben stehen bleibt */
.anchors {
    position: relative;
    z-index: 20;
    padding-block: var(--space-5);
}

.anchors-inner {
    display: grid;
    gap: var(--space-4);
    width: min(100% - 2 * var(--gutter), var(--wide));
    margin-inline: auto;
}

.anchors-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--thin) solid var(--rule);
    border-left: var(--thin) solid var(--rule);
}

.anchors-list li {
    display: flex;
    border-right: var(--thin) solid var(--rule);
    border-bottom: var(--thin) solid var(--rule);
}

.anchors-list a {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.55em;
    min-height: 3.5rem;
    padding: var(--space-2) var(--space-4);
    color: var(--fg);
    font-size: 0.9375rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.anchors-nr {
    color: var(--strong);
    font-variant-numeric: tabular-nums;
}

.anchors-list a:hover {
    background: var(--strong);
    color: var(--on-strong);
}

.anchors-list a:hover .anchors-nr {
    color: var(--on-strong);
}

.anchors-list a:focus-visible {
    outline-offset: -6px;
}

.anchors-action {
    margin: 0;
}

.anchors-action .button {
    width: 100%;
}

@media (min-width: 64rem) {
    .anchors {
        position: sticky;
        top: 0;
        padding-block: 0;
    }

    .anchors-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 0;
    }

    .anchors-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        margin-left: calc(-1 * var(--space-4));
        background: none;
        border: 0;
    }

    .anchors-list li {
        border: 0;
    }

    .anchors-list li + li {
        border-left: var(--thin) solid var(--rule);
    }

    /* Breit: die Nummer über der Beschriftung — so passen sechs Sprungmarken und der Knopf auch bei 1024 px */
    .anchors-list a {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.2em;
        min-height: 4.25rem;
        padding-inline: var(--space-4);
    }

    .anchors-nr {
        font-size: 0.75rem;
    }

    .anchors-action {
        display: flex;
        align-items: center;
        padding-left: var(--space-5);
    }

    .anchors-action .button {
        width: auto;
    }

    /* Sprungziele bleiben unter der Leiste sichtbar */
    .onepager [id] {
        scroll-margin-top: 5.5rem;
    }
}

@media (min-width: 80rem) {
    .anchors-list {
        margin-left: calc(-1 * var(--space-5));
    }

    .anchors-list a {
        padding-inline: var(--space-5);
    }
}

/* ── Leistungen ────────────────────────────────────────── */
.service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--thin) solid var(--fg);
    border-left: var(--thin) solid var(--fg);
}

.service {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
    border-right: var(--thin) solid var(--fg);
    border-bottom: var(--thin) solid var(--fg);
}

.service-title {
    margin: var(--space-3) 0 0;
    font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.9rem);
}

.service-text {
    margin: 0;
    color: var(--soft);
}

.service-note {
    margin: auto 0 0;
    padding-top: var(--space-4);
    font-size: 0.9375rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-note::before {
    content: '→ ' / '';
}

@media (min-width: 40rem) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Breit drei Spalten — vier Leistungen in vier, zwei oder fünf in zwei/drei, damit keine Lücke bleibt, wo es geht */
@media (min-width: 64rem) {
    .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-grid:has(> li:nth-child(4):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .service-grid:has(> li:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Zeichen: ein gelbes Feld mit schwarzem Symbol (Maske aus dem Stylesheet, keine Datei) */
.symbol {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    background: var(--color-signal);
    border: var(--thin) solid var(--color-signal-text);
}

.symbol::before {
    content: '';
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--color-signal-text);
    mask: var(--icon) center / contain no-repeat;
}

.symbol-werkzeug {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M1 10.5h14v3H1z'/%3E%3Cpath d='M14 7h5l3 3v1h-4v2h4v1l-3 3h-5z'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-rad {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke-width='3'/%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4' stroke-width='1.5'/%3E%3Crect x='10' y='10' width='4' height='4' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.symbol-blitz {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 1 4 14h7l-2 9 11-14h-7z'/%3E%3C/svg%3E");
}

.symbol-abholen {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 5h13v11H1zM15 9h4l4 4v3h-8z'/%3E%3Cpath d='M4 16.5h4v4H4zM16 16.5h4v4h-4z'/%3E%3C/svg%3E");
}

.symbol-firma {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M4 21V3h10v18M14 9h6v12M1 21h22M7.5 7h3M7.5 11h3M7.5 15h3'/%3E%3C/svg%3E");
}

.symbol-uhr {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E");
}

.symbol-haken {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='square'%3E%3Cpath d='M3.5 12.5l5.5 5.5L20.5 6.5'/%3E%3C/svg%3E");
}

/* ── Ablauf: Nummern in gelben Feldern, verbunden mit einer dicken Linie ─ */
.step-list {
    display: grid;
    gap: var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.step-nr {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    background: var(--color-signal);
    color: var(--color-signal-text);
    border: var(--thin) solid var(--color-signal-text);
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 4.5rem;
    bottom: calc(-1 * var(--space-7));
    left: calc(2.25rem - var(--thick) / 2);
    width: var(--thick);
    background: var(--rule);
}

.step-title {
    margin: var(--space-2) 0 var(--space-2);
    font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.85rem);
    text-transform: uppercase;
}

.step-text {
    margin: 0;
    color: var(--soft);
}

@media (min-width: 60rem) {
    .step-list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .step {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .step-nr {
        width: 6rem;
        height: 6rem;
        font-size: 3.6rem;
    }

    .step:not(:last-child)::before {
        top: calc(3rem - var(--thick) / 2);
        bottom: auto;
        left: 6rem;
        right: calc(-1 * var(--space-6));
        width: auto;
        height: var(--thick);
    }

    .step-title {
        margin-top: 0;
    }
}

/* ── Zahlenkacheln ─────────────────────────────────────── */
.figures {
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--thin);
    margin: 0;
    background: var(--rule);
    border: var(--thin) solid var(--rule);
}

.figure-tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-4);
    min-height: 9rem;
    padding: var(--space-5) var(--space-4);
    background: var(--bg);
}

.figure-tile dd {
    order: -1;
    margin: 0;
    color: var(--strong);
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6.5rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.figure-tile dt {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

@media (min-width: 48rem) {
    .figure-tile dt {
        font-size: 0.9375rem;
        letter-spacing: 0.06em;
    }
}

@media (min-width: 48rem) {
    .figure-tile {
        min-height: 12rem;
        padding: var(--space-6) var(--space-5) var(--space-5);
    }
}

/* ── Text mit Bild ─────────────────────────────────────── */
.split-grid {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

.split-art {
    margin: 0 14px 14px 0;
    border: var(--thick) solid var(--fg);
    box-shadow: 14px 14px 0 var(--shadow);
}

.split-art img {
    width: 100%;
}

.split-text .section-title {
    margin-bottom: var(--space-6);
    font-size: clamp(2.1rem, 1rem + 3.6vw, 4.5rem);
}

.split-text .kicker {
    margin-bottom: var(--space-5);
}

.split-action {
    margin: var(--space-6) 0 0;
}

@media (min-width: 56rem) {
    .split-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(3rem, 6vw, 7rem);
    }

    .split-rechts .split-art {
        order: 2;
    }
}

/* ── Fliesstext ────────────────────────────────────────── */
.prose {
    max-width: 40rem;
    font-size: 1.1875rem;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose h2 {
    margin-top: var(--space-7);
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
    text-transform: uppercase;
}

.prose h3 {
    margin-top: var(--space-6);
}

.prose ul,
.prose ol {
    padding-left: 1.25em;
}

.prose ul {
    list-style: square;
}

.prose li + li {
    margin-top: var(--space-2);
}

.prose li::marker {
    color: var(--fg);
    font-weight: 900;
}

.prose a:hover,
.section-note a:hover {
    background: var(--strong);
    color: var(--on-strong);
    text-decoration: none;
}

.text-block {
    width: min(100% - 2 * var(--gutter), 42rem);
    max-width: none;
    margin: clamp(3rem, 2rem + 4vw, 6rem) auto;
}

/* ── Pakete und Preise ─────────────────────────────────── */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-7) var(--space-6);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-7) var(--space-6) var(--space-6);
    background: var(--bg);
    border: var(--thin) solid var(--fg);
}

.plan.is-highlight {
    border-width: var(--thick);
    box-shadow: 14px 14px 0 var(--color-border);
}

.plan-badge {
    position: absolute;
    top: 0;
    left: var(--space-5);
    margin: 0;
    padding: 0.4em 0.7em 0.35em;
    transform: translateY(-55%);
    background: var(--strong);
    color: var(--on-strong);
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.plan-name {
    margin: 0 0 var(--space-4);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: var(--thin) solid var(--fg);
}

.plan-amount {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 2rem + 2.4vw, 4.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.035em;
}

.plan-unit {
    color: var(--soft);
    font-size: 0.9375rem;
    font-weight: 700;
}

.plan-text {
    font-weight: 700;
}

.plan-features {
    margin-bottom: var(--space-5);
}

.plan-features ul {
    margin: 0;
    padding-left: 1.2em;
    list-style: square;
}

.plan-features li + li {
    margin-top: var(--space-2);
}

.plan-features li::marker {
    color: var(--fg);
}

.plan-action {
    margin: auto 0 0;
}

.plan-action .button {
    width: 100%;
}

/* ── Stimmen ───────────────────────────────────────────── */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-7) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.quote-grid li {
    display: flex;
}

.quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding-top: var(--space-5);
    border-top: var(--thick) solid var(--rule);
}

.quote::before {
    content: '«' / '';
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    padding-bottom: 0.1em;
    background: var(--color-signal);
    color: var(--color-signal-text);
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
}

.quote blockquote {
    margin: 0;
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

.quote blockquote p {
    margin: 0;
}

.quote figcaption {
    margin-top: auto;
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quote-detail {
    display: block;
    margin-top: var(--space-1);
    color: var(--soft);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* ── Fragen und Antworten ──────────────────────────────── */
.faq-grid {
    display: grid;
    gap: var(--space-6) var(--space-8);
}

.faq .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin-bottom: 0;
}

.faq .section-title {
    font-size: clamp(2.25rem, 1rem + 4.4vw, 5.5rem);
}

@media (min-width: 60rem) {
    .faq-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }
}

.faq-list details {
    margin: 0;
    border-top: var(--thin) solid var(--fg);
}

.faq-list details:last-child {
    border-bottom: var(--thin) solid var(--fg);
}

.faq-list summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    min-height: 4.5rem;
    padding-block: var(--space-4);
    font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
    font-weight: 900;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
}

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

.faq-list summary::after {
    content: '+' / '';
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--strong);
    color: var(--on-strong);
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
}

.faq-list details[open] summary::after {
    content: '−' / '';
}

.faq-list summary:hover {
    text-decoration: underline;
    text-decoration-thickness: var(--thin);
    text-underline-offset: 0.2em;
}

.faq-list .prose {
    padding-bottom: var(--space-5);
    font-size: 1.125rem;
}

/* ── Aufruf ────────────────────────────────────────────── */
.cta {
    padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
    border-top: var(--thick) solid var(--color-line);
}

.cta-inner {
    display: grid;
    gap: var(--space-6) var(--space-8);
    align-items: end;
    width: min(100% - 2 * var(--gutter), var(--wide));
    margin-inline: auto;
}

.cta-title {
    margin: 0;
    font-size: clamp(2.5rem, 0.9rem + 6.4vw, 7.5rem);
    line-height: 1;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.cta-text {
    margin: 0 0 var(--space-5);
    font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
    font-weight: 700;
    line-height: 1.4;
}

@media (min-width: 60rem) {
    .cta-inner {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    }
}

/* ── Kontakt ───────────────────────────────────────────── */
.contact-grid {
    display: grid;
    gap: var(--space-8);
}

.contact .section-head {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--space-6);
}

.contact .section-title {
    font-size: clamp(2.25rem, 1rem + 4.4vw, 5.5rem);
}

@media (min-width: 60rem) {
    .contact-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }
}

.contact-facts {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-6) 0 0;
    padding: var(--space-6);
    border: var(--thin) solid var(--color-signal-text);
}

.contact-facts dt {
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-facts dd {
    margin: var(--space-1) 0 0;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.4;
}

.contact-facts address {
    margin: 0;
    font-style: normal;
}

.contact-facts a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    overflow-wrap: anywhere;
}

.contact-form {
    padding: clamp(1.5rem, 1rem + 2vw, 3rem);
    border: var(--thick) solid var(--fg);
    box-shadow: 14px 14px 0 var(--shadow);
}

/* ── Seiten: Inhaltsseite und Rechtsseite ──────────────── */
.page-hero {
    padding-block: clamp(3.5rem, 2rem + 6vw, 8rem)
        clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.page-hero-inner {
    width: min(100% - 2 * var(--gutter), var(--wide));
    margin-inline: auto;
}

.page-title {
    margin: 0;
    font-size: clamp(2.6rem, 0.9rem + 7vw, 8.5rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.page-intro {
    max-width: 38rem;
    margin-top: var(--space-6);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
}

.page-intro > :last-child {
    margin-bottom: 0;
}

.page-body > .section:first-child,
.page-body > .cta:first-child {
    border-top-color: transparent;
}

.legal-head {
    width: min(100% - 2 * var(--gutter), 42rem);
    margin: clamp(3rem, 2rem + 4vw, 6rem) auto 0;
    padding-bottom: var(--space-6);
    border-bottom: var(--thick) solid var(--color-line);
}

.legal-title {
    margin: 0;
    font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem);
    line-height: 1;
    text-transform: uppercase;
}

.legal .page-intro {
    font-size: 1.25rem;
}

.legal .text-block {
    margin-top: var(--space-7);
}

/* ── Formulare ─────────────────────────────────────────── */
.form {
    display: grid;
    gap: var(--space-5);
}

.form label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.form input:not([type='checkbox'], [type='radio'], [type='hidden']),
.form textarea,
.form select {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.6rem 0.8rem;
    font: inherit;
    color: var(--fg);
    background: var(--color-surface);
    border: var(--thin) solid var(--color-border);
    border-radius: 0;
}

.form textarea {
    min-height: 9rem;
    line-height: 1.5;
}

.form input:focus-visible,
.form textarea:focus-visible,
.form select:focus-visible {
    outline: var(--thin) solid var(--focus);
    outline-offset: 2px;
}

.form input[type='checkbox'],
.form input[type='radio'] {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    accent-color: var(--color-text);
}

.form button,
.account-signed-in button,
.members-join button {
    justify-self: start;
    min-height: 3.5rem;
    padding: 0.7em 1.6em;
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-strong);
    background: var(--strong);
    border: var(--thin) solid var(--strong);
    border-radius: 0;
    cursor: pointer;
}

.form button:hover,
.members-join button:hover {
    background: var(--bg);
    color: var(--fg);
    border-color: var(--fg);
}

.form-field {
    display: grid;
    gap: var(--space-1);
}

.form-help {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--soft);
}

.form [role='alert'],
.form .error,
.form-error,
.form-errors,
.form-required {
    margin: 0;
    color: var(--error);
    font-weight: 700;
}

.form-errors {
    padding: var(--space-4);
    border: var(--thin) solid var(--error);
}

.form-errors ul {
    margin: var(--space-2) 0 0;
}

.form-thanks {
    margin: 0;
    padding: var(--space-5);
    background: var(--color-signal);
    color: var(--color-signal-text);
    border: var(--thin) solid var(--color-signal-text);
    font-size: 1.25rem;
    font-weight: 900;
}

.form-consent label {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.form-explanation {
    margin: 0;
    color: var(--soft);
}

/* Spamschutz des Kerns: in der Schrift der Fläche statt in Grün */
.auftakt .basalto-pruefung__status,
.auftakt .basalto-pruefung.ist-geprueft .basalto-pruefung__status {
    color: var(--fg);
    font-weight: 700;
    opacity: 1;
}

/* Im Kontaktblock: kurze Felder nebeneinander, Text, Einwilligung und Knopf über die ganze Breite */
@media (min-width: 40rem) {
    .contact-form .form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-5);
    }

    .contact-form .form > * {
        grid-column: 1 / -1;
    }

    .contact-form
        .form
        > :is(
            .form-text,
            .form-email,
            .form-tel,
            .form-select,
            .form-date,
            .form-number
        ) {
        grid-column: auto;
    }
}

/* ── Mitglieder (Modul «Mitglieder») ───────────────────── */
.account-login,
.members-panel {
    width: min(100% - 2 * var(--gutter), 40rem);
    margin: var(--space-8) auto;
    padding: var(--space-6);
    border: var(--thick) solid var(--fg);
    box-shadow: 14px 14px 0 var(--shadow);
}

/* Auf geschützten Seiten steht die Anmeldung an der Stelle der Einleitung — in der Bühne der Seite */
.page-intro .account-login,
.page-intro .members-panel {
    width: auto;
    max-width: 36rem;
    margin: var(--space-7) 0 var(--space-4);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}

.account-login h2,
.members-panel h2 {
    margin-top: 0;
    text-transform: uppercase;
}

.account-signed-in,
.members-join {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.account-signed-in p {
    margin: 0;
}

.account-signed-in button {
    color: var(--fg);
    background: transparent;
    border-color: var(--fg);
}

.account-status {
    padding: var(--space-3) var(--space-4);
    background: var(--color-signal);
    color: var(--color-signal-text);
    font-weight: 700;
}

/* ── Fuss: Absperrband, Name riesig, Rechtliches ───────── */
.site-footer {
    font-size: 1rem;
}

.footer-inner {
    width: min(100% - 2 * var(--gutter), var(--wide));
    margin-inline: auto;
    padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--space-7);
}

.footer-name {
    margin: 0 0 var(--space-7);
    color: var(--strong);
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 0.8rem + 12.5vw, 13.5rem);
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-6);
    padding-top: var(--space-6);
    border-top: var(--thin) solid var(--rule);
}

.global-footer p {
    margin: 0 0 var(--space-1);
    color: var(--soft);
}

.global-footer .claim {
    margin-bottom: var(--space-3);
    color: var(--fg);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2;
}

.footer-title {
    margin: 0 0 var(--space-2);
    color: var(--strong);
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer .nav ul,
.footer-languages ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .nav a,
.footer-languages a,
.footer-languages span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--fg);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.footer-languages ul {
    flex-direction: row;
    gap: 0 var(--space-3);
}

.footer-languages [aria-current] {
    font-weight: 900;
    text-decoration: none;
}

.footer-top {
    align-self: start;
    margin: 0;
}

.footer-top a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0.4em 0.9em;
    color: var(--fg);
    border: var(--thin) solid var(--fg);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.footer-top a::after {
    content: '↑' / '';
}

.footer-top a:hover {
    background: var(--strong);
    color: var(--on-strong);
    border-color: var(--strong);
}

/* ── Einbettungen und Teilen (aus dem Kern) ────────────── */
.embed {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background: var(--color-surface);
}

.auftakt .basalto-teilen__knopf {
    border-radius: 0;
}

/* ── Umschalter hell/dunkel ({% appearance %}) ─────────── */
.appearance-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: var(--thin) solid var(--fg);
    background: none;
    color: var(--fg);
    cursor: pointer;
}

.appearance-toggle:hover {
    background: var(--strong);
    color: var(--on-strong);
    border-color: var(--strong);
}

.appearance-toggle .appearance-sun,
.appearance-toggle[aria-pressed='true'] .appearance-moon {
    display: none;
}

.appearance-toggle[aria-pressed='true'] .appearance-sun {
    display: block;
}

/* ── Fehler und Markierung, hell und dunkel ────────────── */
:root {
    --error: #b3261e;
}

:root[data-theme='dark'] {
    --error: #ff8a80;
}

mark {
    background: var(--color-signal);
    color: var(--color-signal-text);
}

/* ── Druck: Inhalt in Schwarz auf Weiss ────────────────── */
@media print {
    .site-header .header-wide,
    .header-tools,
    .menu,
    .skip-link,
    .anchors,
    .stage::after,
    .site-footer::before,
    .footer-top,
    .contact-form {
        display: none;
    }

    .auftakt,
    .ctx-poster,
    .ctx-ink,
    .ctx-signal {
        --fg: #000;
        --bg: #fff;
        --soft: #333;
        --strong: #000;
        --on-strong: #fff;
        --rule: #000;

        color: #000;
        background: #fff;
    }

    .stage-art,
    .split-art,
    .plan.is-highlight {
        box-shadow: none;
    }
}