/* ══════════════════════════════════════════════════════════
   LAW4 — Gestaltung von law4.ch

   Liegt als Schicht über /css/main.css. Die Mechanik der Bewegung
   (Reveals, Scroll-Scrub, gepinnte Bühnen, Zähler, Magnet, Halo,
   Vorhang) bleibt dort und in /js/main.js unverändert. Alle drei
   Dateien sind die geteilte Design-Quelle: Sie werden unverändert
   nach workspace.law4.ch und advice.law4.ch kopiert
   (public/marketing/), dort tragen sie die Produktseiten.

   ORDNUNG OHNE ZIERLINIEN
   - Jede Seite ist in nummerierte Kapitel geteilt. Jedes Kapitel
     hat denselben Kopf: Nummer und Titel links, die Einleitung
     rechts, darunter der Inhalt (.chapter-head, .chapter-body).
   - Wiederkehrende Bausteine statt Sonderlösungen: Punkte stehen
     immer als Spalten mit Titel und Text (.items), Zahlen als
     .figures, Fliesstext als .prose-split, Abläufe als .process.
   - Getrennt wird durch Flächen (Papier und Weiss im Wechsel,
     Navy für Bühne, Grundsatz und Kontakt) und durch Weissraum.
     Linien gibt es nur dort, wo sie Bewegung zeigen: Fortschritt
     der Geschichte, der Ablauf, die Verbindung Advice → Workspace.

   Schrift: IBM Plex Sans für alles, IBM Plex Mono für Nummern
   und kleine Etiketten (deklariert in /fonts/plex.css). Keine
   Kursive; Betonung über Grauwert.
   ══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */

:root {
    /* main.css setzt alle Display-Zeilen über --display. Umgestellt
       auf die Grotesk, verliert die ganze Seite ihre Serife auf einmal. */
    --display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Flächen */
    --ground: #f3f2ee;
    --white: #ffffff;
    --navy: #0b1a3a;
    --navy-deep: #07122b;

    /* Text */
    --text: #0b1a3a;
    --text-soft: #434c5d;
    --text-muted: #6a7282;
    /* Grauwert für den zweiten Satz einer Überschrift (3.6:1 auf Papier,
       nur in Titelgrösse eingesetzt). */
    --quiet: #868c97;
    --quiet-dark: #9aa0aa;
    --on-dark: #f3f2ee;
    --on-dark-soft: rgba(243, 242, 238, 0.7);
    --on-dark-muted: rgba(243, 242, 238, 0.5);

    /* Raster und Abstände */
    --wrap: 1320px;
    --pad: clamp(20px, 4vw, 56px);
    --gap: 24px;
    --head-h: 68px;
    --s-section: clamp(96px, 10vw, 152px);
    --s-head: clamp(48px, 5vw, 80px);

    /* Titel — drei Grössen, mehr nicht */
    --t1: clamp(2.8rem, 6.8vw, 6.6rem);
    --t2: clamp(2.2rem, 4vw, 3.9rem);
    --t3: clamp(20px, 1.6vw, 24px);
    --lead: clamp(17px, 1.35vw, 19.5px);
}

/* Auf schmalen Bildschirmen rücken die Kapitel zusammen. Der Weissraum,
   der am Desktop ordnet, wäre am Telefon nur Scrollweg. */
@media (max-width: 960px) {
    :root {
        --s-section: clamp(72px, 11vw, 104px);
        --s-head: clamp(36px, 6vw, 56px);
    }
}

@media (max-width: 640px) {
    :root {
        --s-section: 72px;
        --s-head: 36px;
        --gap: 20px;
    }
}

html {
    background: var(--ground);
}

body {
    background: var(--ground);
    color: var(--text);
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.55;
}

/* Keine Kursive auf der Seite. Die Produkt-Mockups sind ausgenommen,
   weiter unten: Sie zeigen das Produkt, wie es ist. */
em,
.cta-heading em,
.manifesto-text em {
    font-style: normal;
}

::selection {
    background: var(--navy);
    color: var(--on-dark);
}

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

section {
    scroll-margin-top: var(--head-h);
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad);
}

/* ── Produkt bleibt Produkt ─────────────────────────────── */

/* Mockups, Plugin und Portal zeigen die echte Oberfläche: Inter und
   Instrument Serif, wie im Workspace. */
.app-mockup,
.intake-widget,
.browser-frame {
    --display: "Instrument Serif", Georgia, serif;
    --body: "Inter", -apple-system, "Segoe UI", sans-serif;
    font-family: var(--body);
}

.app-mockup em,
.intake-widget em,
.browser-frame em {
    font-style: italic;
}

/* ── Typografie ─────────────────────────────────────────── */

.t1,
.t2 {
    font-family: var(--display);
    font-weight: 600;
    color: var(--text);
    text-wrap: balance;
}

.t1 {
    font-size: var(--t1);
    line-height: 0.94;
    letter-spacing: -0.048em;
}

.t2 {
    font-size: var(--t2);
    line-height: 1;
    letter-spacing: -0.04em;
}

.t1 em,
.t2 em {
    color: var(--quiet);
}

.lead {
    font-size: var(--lead);
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 34em;
}

.eyebrow {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 28px;
}

/* Die Wort-Masken bekommen unten Luft für die Unterlängen; der
   negative Rand gleicht den Zuschlag im Zeilenfluss wieder aus. */
.word-mask {
    padding: 0.05em 0 0.2em;
    margin: -0.05em 0 -0.2em;
}

.text-link {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 500;
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.text-link span {
    transition: transform 0.3s var(--ease-out);
}

.text-link:hover span {
    transform: translateX(5px);
}

/* Kurze Aufzählung: ein kleiner Strich als Marke, sonst nichts. */
.dash {
    list-style: none;
}

.dash li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
}

.dash li + li {
    margin-top: 8px;
}

.dash li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 10px;
    height: 1.5px;
    background: currentColor;
    opacity: 0.45;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    box-shadow: none;
}

.status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Kapitel: ein Kopf, ein Körper ──────────────────────── */

.chapter {
    padding-block: var(--s-section);
}

.paper {
    background: var(--ground);
}

.white {
    background: var(--white);
}

/* Nummer und Titel links (sieben Spalten), Einleitung rechts
   (vier Spalten), unten bündig. Für jedes Kapitel gleich. */
.chapter-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
}

.chapter-title {
    grid-column: 1 / span 7;
}

.chapter-title.wide {
    grid-column: 1 / span 11;
}

.chapter-lead {
    grid-column: 9 / -1;
    padding-bottom: 0.3em;
}

.chapter-label {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-muted);
}

.chapter-no {
    color: var(--text);
    font-weight: 500;
}

.chapter-label.light {
    color: var(--on-dark-muted);
}

.chapter-label.light .chapter-no {
    color: var(--on-dark);
}

.chapter-label .scramble-glyphs.noise {
    color: var(--quiet);
}

.chapter-body {
    margin-top: var(--s-head);
}

/* ── Baustein: Punkte als Spalten ───────────────────────── */

.items {
    display: grid;
    column-gap: calc(var(--gap) * 2);
    row-gap: 48px;
}

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

.items.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.items.stack {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
}

.item-role {
    margin-bottom: 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-muted);
}

.item-title {
    margin-bottom: 10px;
    font-size: var(--t3);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.2;
    color: var(--text);
}

.item-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 30em;
}

.item .dash {
    margin-top: 20px;
}

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

.btn {
    height: 52px;
    padding: 0 22px;
    border-radius: 4px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    gap: 14px;
    white-space: nowrap;
}

.btn-solid {
    background: var(--navy);
    color: var(--on-dark);
}

.btn-solid:hover {
    background: #16295a;
}

.btn-solid::after {
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%);
}

.btn-paper {
    background: var(--ground);
    color: var(--text);
}

.btn-paper:hover {
    background: #fff;
}

.btn-paper::after {
    background: linear-gradient(105deg, transparent 38%, rgba(11, 26, 58, 0.1) 50%, transparent 62%);
}

.btn-line {
    background: transparent;
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(11, 26, 58, 0.3);
}

.btn-line:hover {
    box-shadow: inset 0 0 0 1px var(--navy);
    background: rgba(11, 26, 58, 0.04);
}

.btn-line.light {
    color: var(--on-dark);
    box-shadow: inset 0 0 0 1px rgba(243, 242, 238, 0.35);
}

.btn-line.light:hover {
    box-shadow: inset 0 0 0 1px var(--on-dark);
    background: rgba(243, 242, 238, 0.06);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Vorhang ────────────────────────────────────────────── */

.preloader {
    background: var(--navy);
}

.preloader-brand {
    gap: 24px;
}

.preloader-mark {
    width: clamp(76px, 9vw, 104px);
    height: auto;
    overflow: hidden;
}

.preloader-mark path {
    transform-box: fill-box;
    transform: translateY(170%);
    animation: preloaderRise 0.8s var(--ease-out) forwards;
}

.preloader-l {
    fill: #fff;
}

.preloader-4 {
    fill: #fff;
    animation-delay: 0.14s !important;
}

.preloader-line {
    background: rgba(243, 242, 238, 0.35);
}

.preloader-tag {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--on-dark-muted);
}

/* ── Kopfzeile ──────────────────────────────────────────── */

/* Kein transform auf .masthead: das Vollbild-Menü ist position:fixed
   in ihr und bräuchte sonst sie als Bezugsrahmen. Abgesetzt wird sie
   beim Scrollen durch Fläche und weichen Schatten, nicht durch eine
   Linie. */
.masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: var(--head-h);
    transition:
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}

.masthead.scrolled {
    background: rgba(243, 242, 238, 0.97);
    box-shadow: 0 10px 30px -24px rgba(11, 26, 58, 0.35);
}

.mast-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 32px;
}

.mast-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    animation: headItem 0.6s var(--ease-out) backwards 0.16s;
}

.mast-logo {
    height: 32px;
    width: auto;
}

.mast-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
}

.mast-nav > a:not(.nav-cta) {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text);
    padding-block: 6px;
}

@media (min-width: 1101px) {
    .mast-nav > a,
    .mast-nav > .lang-switch {
        animation: headItem 0.55s var(--ease-out) backwards;
    }

    .mast-nav > :nth-child(1) { animation-delay: 0.3s; }
    .mast-nav > :nth-child(2) { animation-delay: 0.36s; }
    .mast-nav > :nth-child(3) { animation-delay: 0.42s; }
    .mast-nav > :nth-child(4) { animation-delay: 0.48s; }
    .mast-nav > :nth-child(5) { animation-delay: 0.54s; }
    .mast-nav > :nth-child(6) { animation-delay: 0.6s; }
    .mast-nav > :nth-child(7) { animation-delay: 0.66s; }
}

/* Die «Magic Pill» aus main.js: eine zarte Fläche gleitet zwischen
   den Links. */
.mast-nav .nav-pill {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    margin: 0 -10px;
    padding: 0 10px;
    box-sizing: content-box;
    border-radius: 4px;
    background: rgba(11, 26, 58, 0.06);
    transition:
        left 0.4s var(--ease-out),
        width 0.4s var(--ease-out),
        top 0.4s var(--ease-out),
        opacity 0.25s ease;
}

.masthead .lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    opacity: 1;
    transform: none;
    font-family: var(--mono);
    font-size: 12.5px;
}

.masthead .lang-switch a {
    padding: 4px 6px;
    border-radius: 3px;
    color: var(--text-muted);
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.masthead .lang-switch a:hover {
    color: var(--text);
}

.masthead .lang-switch a.lang-active {
    color: var(--text);
    background: rgba(11, 26, 58, 0.07);
}

.mast-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 16px;
    border-radius: 4px;
    background: var(--navy);
    color: var(--on-dark);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.25s ease;
}

.mast-nav .nav-cta:hover {
    background: #16295a;
}

.mast-nav .nav-cta span {
    transition: transform 0.3s var(--ease-out);
}

.mast-nav .nav-cta:hover span {
    transform: translateX(3px);
}

.mast-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    position: relative;
    z-index: 3;
    animation: headItem 0.6s var(--ease-out) backwards 0.16s;
}

.mast-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--text);
    transition: transform 0.35s var(--ease-out);
}

.masthead.nav-open .mast-toggle span:first-child {
    transform: translateY(4.25px) rotate(45deg);
}

.masthead.nav-open .mast-toggle span:last-child {
    transform: translateY(-4.25px) rotate(-45deg);
}

@media (max-width: 1100px) {
    .mast-toggle {
        display: flex;
    }

    .mast-brand {
        position: relative;
        z-index: 3;
    }

    /* Vollbild-Menü auf Papier: grosse Zeilen mit Kapitelnummer. */
    .mast-nav {
        position: fixed;
        inset: 0;
        z-index: 2;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: calc(var(--head-h) + 28px + env(safe-area-inset-top, 0px)) var(--pad)
            calc(32px + env(safe-area-inset-bottom, 0px));
        background: var(--ground);
        overflow-y: auto;
        counter-reset: navlink;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-2%);
        transition:
            opacity 0.35s ease,
            transform 0.5s var(--ease-out),
            visibility 0s 0.5s;
    }

    .masthead.nav-open .mast-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            opacity 0.3s ease,
            transform 0.5s var(--ease-out);
    }

    .mast-nav > a:not(.nav-cta) {
        display: flex;
        align-items: baseline;
        gap: 18px;
        padding: 12px 0;
        font-size: clamp(28px, 7.5vw, 40px);
        font-weight: 600;
        letter-spacing: -0.035em;
        line-height: 1.15;
    }

    .mast-nav > a:not(.nav-cta)::before {
        counter-increment: navlink;
        content: counter(navlink, decimal-leading-zero);
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .mast-nav > a,
    .mast-nav > .lang-switch {
        opacity: 0;
        transform: translateY(22px);
        transition:
            opacity 0.4s var(--ease-out),
            transform 0.45s var(--ease-out);
    }

    .masthead.nav-open .mast-nav > a,
    .masthead.nav-open .mast-nav > .lang-switch {
        opacity: 1;
        transform: none;
    }

    .masthead.nav-open .mast-nav > :nth-child(1) { transition-delay: 0.06s; }
    .masthead.nav-open .mast-nav > :nth-child(2) { transition-delay: 0.1s; }
    .masthead.nav-open .mast-nav > :nth-child(3) { transition-delay: 0.14s; }
    .masthead.nav-open .mast-nav > :nth-child(4) { transition-delay: 0.18s; }
    .masthead.nav-open .mast-nav > :nth-child(5) { transition-delay: 0.22s; }
    .masthead.nav-open .mast-nav > :nth-child(6) { transition-delay: 0.26s; }
    .masthead.nav-open .mast-nav > :nth-child(7) { transition-delay: 0.3s; }

    .masthead .lang-switch {
        order: 2;
        margin: 26px 0 0;
        font-size: 15px;
    }

    .masthead .lang-switch a {
        padding: 10px 12px;
    }

    .mast-nav .nav-cta {
        order: 1;
        margin-top: 32px;
        height: 56px;
        justify-content: center;
        font-size: 16px;
    }
}

/* ── Eröffnung ──────────────────────────────────────────── */

.opening {
    position: relative;
    padding-top: calc(var(--head-h) + clamp(48px, 10vh, 120px));
    background: var(--ground);
}

.opening-line {
    display: block;
}

/* Die Zeichen fallen auf die Grundlinie statt zu kippen — nur der
   Startzustand, der Endzustand gehört main.css. */
.opening-title [data-chars]:not(.chars-shown) .char {
    transform: translate3d(0, 0.5em, 0);
}

.opening-foot {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
    margin-top: clamp(36px, 5vh, 56px);
}

.opening-foot .lead {
    grid-column: 1 / span 6;
}

.opening-foot .actions {
    grid-column: 8 / -1;
    justify-content: flex-end;
}

.opening-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin-top: clamp(32px, 5vh, 52px);
    list-style: none;
    font-size: 14.5px;
    color: var(--text-soft);
}

.opening-facts li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.opening-facts li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--navy);
}

/* Die navy Bühne, auf der das Produkt liegt. */
.opening-stage {
    position: relative;
    margin-top: clamp(56px, 9vh, 104px);
}

.opening-stage::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    bottom: 0;
    background: var(--navy);
}

.hero-shot-wrap {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.hero-shot {
    max-width: 1100px;
}

.hero-shot .app-mockup {
    border-radius: 8px;
    border-color: rgba(11, 26, 58, 0.18);
    box-shadow: 0 50px 90px -46px rgba(2, 8, 20, 0.7);
}

.reference {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding-block: clamp(40px, 5vw, 64px) clamp(44px, 6vw, 72px);
    color: var(--on-dark);
}

.reference-label {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--on-dark-muted);
}

.reference-name {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* Der Hinweis sitzt im freien Rand links neben dem Produktbild, nie
   darauf. Unter 1500 Pixeln Breite bleibt neben dem Bild kein Rand
   (es ist bis 1100 Pixel breit und kippt unten noch etwas auf); dort
   entfällt er, «So entsteht ein Mandat» zeigt denselben Weg. */
.scroll-hint {
    left: calc((100vw - 1100px) / 2 - 176px);
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.scroll-hint-rail {
    width: 40px;
    height: 1px;
}

.scroll-hint-rail::after {
    top: 0;
    bottom: 0;
    left: 0;
    width: 14px;
    height: auto;
    animation-name: hintRunX;
}

@keyframes hintRunX {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    60%,
    100% {
        transform: translate3d(300%, 0, 0);
    }
}

.scroll-hint-label {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

.scroll-hint-rail {
    background: rgba(11, 26, 58, 0.15);
}

.scroll-hint-rail::after {
    background: linear-gradient(90deg, transparent, var(--navy));
}

@media (max-width: 1499px) {
    .scroll-hint {
        display: none;
    }
}

/* Schmale Desktop-Fenster: Einleitung und Knöpfe teilen sich die Zeile
   hälftig. Mit vier Spalten für die Knöpfe stünden sie untereinander,
   rechts aussen, und gehörten zu nichts. Dieselbe Regel gilt für den
   Kontakt, unten bei .cta-body. */
@media (max-width: 1280px) {
    .opening-foot .lead {
        grid-column: 1 / span 6;
    }

    .opening-foot .actions {
        grid-column: 7 / -1;
    }
}

/* Ab hier stehen die Knöpfe unter der Einleitung, an derselben Kante. */
@media (max-width: 1100px) {
    .opening-foot {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .opening-foot .lead,
    .opening-foot .actions {
        grid-column: 1;
    }

    .opening-foot .actions {
        justify-content: flex-start;
    }
}

/* ── 01 Plattform — zwei Produkte, eine Verbindung ──────── */

.product-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.product {
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 4vw, 56px);
    border-radius: 8px;
}

.product-advice,
.product.light {
    background: var(--white);
    color: var(--text);
}

/* Auf weissem Kapitel trägt die helle Kachel das Papier, sonst
   verschwände sie im Grund. */
.white .product.light {
    background: var(--ground);
}

.product-workspace,
.product.navy {
    background: var(--navy);
    color: var(--on-dark);
}

.product-for {
    margin-bottom: clamp(40px, 5vw, 72px);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-muted);
}

.product-workspace .product-for,
.product.navy .product-for {
    color: var(--on-dark-muted);
}

.product-name {
    margin-bottom: 18px;
    font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}

.product-name span {
    color: var(--quiet);
}

.product-workspace .product-name span,
.product.navy .product-name span {
    color: var(--quiet-dark);
}

.product-text {
    margin-bottom: 26px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 30em;
}

.product-workspace .product-text,
.product-workspace .dash li,
.product.navy .product-text {
    color: var(--on-dark-soft);
}

.product .dash {
    margin-bottom: 32px;
}

.product .text-link {
    margin-top: auto;
}

/* Die Verbindung — Namen ohne Kästen, Impulse als kleine Quadrate. */
.product-flow {
    max-width: 760px;
    margin: clamp(56px, 6vw, 88px) auto 0;
    justify-content: space-between;
    align-items: flex-start;
}

.flow-node,
.flow-node.navy {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}

.flow-node.navy {
    text-align: right;
}

.flow-node-title,
.flow-node.navy .flow-node-title {
    font-size: var(--t3);
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--text);
}

.flow-node-sub,
.flow-node.navy .flow-node-sub {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

.flow-line {
    height: 1.5px;
    max-width: none;
    margin: 13px clamp(20px, 3vw, 44px) 0;
    background: rgba(11, 26, 58, 0.22);
}

.flow-pulse {
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: var(--navy);
    box-shadow: none;
    transform: translate(-3.5px, -50%);
}

.flow-caption {
    top: 16px;
    /* Ohne feste Breite misst der Kasten nur die halbe Linie, und das
       Zentrieren verrutscht, sobald die Linie kürzer ist als der Text. */
    width: max-content;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Die Beschriftung sitzt in der Linie und würde mit ihr gestaucht,
   solange sie sich beim Scrollen aufzieht. Sie erscheint erst, wenn die
   Linie steht. */
.product-flow.live .flow-caption {
    opacity: 1;
}

/* ── 02 Fallaufnahme — die gepinnte Geschichte ──────────── */

.story {
    border-top: 0;
}

.story-pin {
    padding-top: calc(var(--head-h) + 16px);
    gap: clamp(18px, 3vh, 40px);
}

.story .t2,
.showcase .t2 {
    font-size: clamp(2rem, 3.2vw, 3.2rem);
}

.chapter-head.compact .chapter-title {
    grid-column: 1 / span 10;
}

.chapter-head.compact .chapter-label {
    margin-bottom: 16px;
}

/* Kürzere Spur: Dieselben fünf Schritte, aber auf gut der Hälfte des
   Scrollwegs (main.css: 720vh). Die Phasen in main.js sind Anteile der
   Spur und rücken mit. Website und Workspace stehen nebeneinander statt
   übereinander — das spart Höhe, und der Weg liest sich von links nach
   rechts. */
@media (min-width: 961px) {
    .story-track {
        height: 420vh;
    }

    .story-stage {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--gap);
        align-items: start;
    }

    .story-stage .stage-plugin {
        grid-column: 1 / span 5;
        grid-row: 1;
        align-self: start;
        margin: 0;
    }

    .story-stage .stage-workspace {
        grid-column: 7 / -1;
        grid-row: 1;
        align-self: start;
        width: auto;
        margin: clamp(56px, 11vh, 120px) 0 0;
    }

    .story-stage .stage-connector,
    .story-stage .stage-arrow {
        display: none;
    }
}

.stage-plugin {
    gap: 0;
}

/* Ebenen: Flugbahn < Postfach < Website mit Plugin < Karte (main.css: 5).
   Das Plugin ist nahtlos eingebettet und hat keinen eigenen Grund; die
   Bahn tritt deshalb erst am Rand des Browserfensters aus, statt durch
   das Plugin zu laufen, und endet am Rand des Postfachs. */
.story-stage .stage-path {
    z-index: 1;
}

.story-stage .stage-workspace {
    z-index: 2;
}

.story-stage .stage-plugin {
    z-index: 3;
}

.stage-caption {
    margin-bottom: 12px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text);
}

.stage-caption span {
    color: var(--text-muted);
}

/* Die Website der Kanzlei mit dem nahtlos eingebetteten Plugin
   (appearance="inline"): kein Kartenrahmen, kein Briefkopf, die Schrift
   der Seite. Seite und Plugin tragen die echten Masse, die der Demo-Seite
   (advice/plugin/demo/kanzlei-muster.html) und die des Plugins im
   zweispaltigen Blatt (advice/plugin/src/ui/styles.ts, Theme der
   Musterkanzlei: Tinte #1a2b4a, Akzent #c9a84c). `zoom` verkleinert alles
   zusammen auf die Bühne, wie ein Bildschirmfoto, aber mit scharfer
   Schrift. Die Töne, die das Plugin per color-mix() aus Tinte und Akzent
   mischt, stehen hier ausgerechnet. Wer das Plugin ändert, gleicht hier
   Zahl für Zahl an. */
.kw-window {
    overflow: hidden;
    border-radius: 8px;
    background: #f8f7f4;
    box-shadow:
        0 0 0 1px rgba(11, 26, 58, 0.1),
        0 40px 80px -46px rgba(11, 26, 58, 0.5);
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
}

.kw-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #ebe9e3;
}

.kw-url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 5px;
    background: #fff;
    font-size: 10.5px;
    color: var(--text-muted);
}

.kw-page {
    --kw-navy: #1a2b4a;
    --kw-gold: #c9a84c;
    --kw-paper: #f8f7f4;
    zoom: 0.47;
    color: #2c2c2c;
    -webkit-font-smoothing: antialiased;
}

.kw-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 28px;
    border-bottom: 1px solid #e5e5e0;
}

.kw-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.2px;
    color: var(--kw-navy);
}

.kw-logo b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--kw-navy);
    color: var(--kw-gold);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0;
}

.kw-links {
    display: flex;
    gap: 26px;
    font-size: 14.5px;
    font-weight: 500;
    color: #4b5563;
}

.kw-hero {
    padding: 44px 28px 26px;
    text-align: center;
}

.kw-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kw-gold);
}

.kw-eyebrow::before {
    content: "";
    width: 26px;
    height: 1.5px;
    background: var(--kw-gold);
}

.kw-title {
    margin-bottom: 12px;
    font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -1px;
    color: var(--kw-navy);
}

.kw-text {
    font-size: 18.5px;
    line-height: 1.65;
    color: #4b5563;
}

/* Das Plugin, nahtlos: es steht als Inhalt in der Seite, auf ihrem Grund,
   in ihrer Schrift. Die Schirme liegen übereinander und lösen sich ab wie
   im echten Trichter: der neue tritt von rechts ein. */
.story-stage .stage-widget {
    --pw-ink: #1a2b4a;
    --pw-accent: #c9a84c;
    --pw-text: #2c2c2c;
    --pw-muted: #6b7280;
    --pw-rule: #e1e3e8; /* Tinte 13 % */
    --pw-rule-2: #c8ccd4; /* Tinte 24 % */
    --pw-paper-2: #fbfaf8; /* Fläche 60 % */
    --pw-ok: #1e7a4b;
    --pw-in: 0.42s cubic-bezier(0.16, 0.68, 0.3, 1);
    position: relative;
    /* main.css positioniert .intake-widget absolut (right/bottom) und gibt
       ihm Breite, Schatten und Schrift einer schwebenden Karte. */
    inset: auto;
    display: flex;
    flex-direction: column;
    width: auto;
    min-height: 580px;
    margin: 0 28px 28px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 16px;
    line-height: normal;
    color: var(--pw-text);
}

.stage-widget svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pw-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Die Schrittleiste: «Anliegen» läuft; mit «Fall schildern» (.chosen)
   ist es erledigt und das Rechtsgebiet läuft; mit der Frage (.asked) ist
   auch das erledigt, und «Fragen» füllt sich. */
.pw-steps {
    display: flex;
    gap: 13px;
    flex: 0 0 auto;
    padding: 10px 2px 0;
    list-style: none;
}

.pw-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

.pw-bar {
    display: block;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--pw-rule);
}

.pw-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--pw-accent);
    transition:
        width 0.55s cubic-bezier(0.3, 0.6, 0.2, 1),
        background-color 0.25s ease;
}

.pw-label {
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #a3a8b0;
    transition: color 0.25s ease;
}

.pw-step-intent .pw-bar span,
.stage-widget.chosen .pw-step-area .pw-bar span {
    width: 100%;
}

.stage-widget.asked .pw-step-questions .pw-bar span {
    width: 40%;
}

.stage-widget.chosen .pw-step-intent .pw-bar span,
.stage-widget.asked .pw-step-area .pw-bar span {
    background: #e1cf9d; /* Akzent 55 % */
}

.pw-step-intent .pw-label,
.stage-widget.chosen .pw-step-area .pw-label,
.stage-widget.asked .pw-step-questions .pw-label {
    font-weight: 700;
    color: var(--pw-ink);
}

.stage-widget.chosen .pw-step-intent .pw-label,
.stage-widget.asked .pw-step-area .pw-label {
    font-weight: 600;
    color: var(--pw-muted);
}

.pw-body {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    flex: 1 1 auto;
}

/* Das zweispaltige Blatt: links die Ansprache und darunter die
   Zusicherung, rechts die Aktion, mittig in der Höhe. */
.pw-screen {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 40px;
    row-gap: 14px;
    min-width: 0;
    padding: 16px 2px 12px;
    transition:
        opacity 0.14s ease,
        transform 0.14s ease;
}

/* Was geht, geht rasch; was kommt, tritt danach ein. So stehen nie zwei
   Schirme übereinander, wie im Plugin, das den Schritt neu zeichnet. */
.stage-widget:not(.chosen) .pw-screen-intent,
.stage-widget.chosen:not(.asked) .pw-screen-area,
.stage-widget.asked .pw-screen-question {
    transition:
        opacity 0.3s ease 0.14s,
        transform var(--pw-in) 0.14s;
}

.pw-lead {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 4px;
}

.pw-work {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.pw-screen-area,
.pw-screen-question {
    opacity: 0;
    transform: translateX(16px);
}

.stage-widget.chosen .pw-screen-intent {
    opacity: 0;
    transform: translateX(-16px);
}

.stage-widget.chosen .pw-screen-area {
    opacity: 1;
    transform: none;
}

.stage-widget.asked .pw-screen-area {
    opacity: 0;
    transform: translateX(-16px);
}

.stage-widget.asked .pw-screen-question {
    opacity: 1;
    transform: none;
}

.pw-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 2px;
    background: var(--pw-accent);
}

.pw-count {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: #8c919c;
}

.pw-title {
    margin-bottom: 9px;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.18;
    letter-spacing: -0.35px;
    color: var(--pw-ink);
    text-wrap: balance;
}

.pw-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pw-muted);
    text-wrap: pretty;
}

.pw-desc strong {
    font-weight: 600;
    color: var(--pw-ink);
}

/* Der Einstieg: zwei Wege, «Fall schildern» in der Tinte, darunter der
   Ablauf an einer senkrechten Haarlinie. */
.pw-intents {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pw-intent {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 74px;
    padding: 14px 16px;
    border: 1px solid var(--pw-rule-2);
    border-radius: 9px;
    background: #fff;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease;
}

.pw-intent .pw-ico {
    width: 38px;
    height: 38px;
    border-radius: 9px;
}

.pw-intent .pw-ico svg {
    width: 20px;
    height: 20px;
}

.pw-intent-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.pw-intent .pw-nm {
    flex: 0 0 auto;
    font-size: 16px;
}

.pw-sub {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--pw-muted);
}

.pw-intent .pw-go {
    place-items: center;
    width: 26px;
    height: 26px;
    color: #98a0ae; /* Tinte 45 % */
    opacity: 1;
    transform: none;
}

.pw-intent .pw-go svg {
    width: 17px;
    height: 17px;
}

.pw-intent-main {
    border-color: var(--pw-ink);
    background: var(--pw-ink);
}

.pw-intent-main .pw-nm {
    color: #fff;
}

.pw-intent-main .pw-sub {
    color: rgba(255, 255, 255, 0.68);
}

.pw-intent-main .pw-ico {
    background: rgba(255, 255, 255, 0.12);
}

.pw-intent-main .pw-go {
    color: rgba(255, 255, 255, 0.62);
}

/* Gewählt sieht «Fall schildern» aus wie im echten Plugin unter dem Zeiger. */
.stage-widget.picked:not(.chosen) .pw-intent-main {
    border-color: #172641; /* Tinte 88 % mit Schwarz */
    background: #172641;
}

.stage-widget.picked:not(.chosen) .pw-intent-main .pw-ico {
    background: rgba(255, 255, 255, 0.18);
}

.stage-widget.picked:not(.chosen) .pw-intent-main .pw-go {
    color: #fff;
    transform: translateX(3px);
}

.pw-how {
    display: grid;
    margin-top: 16px;
    padding: 1px 0 1px 17px;
    border-left: 1px solid var(--pw-rule-2);
}

.pw-how-h {
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw-how-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pw-muted);
}

.pw-how-item:last-child {
    padding-bottom: 0;
}

.pw-how-item b {
    font-weight: 600;
    color: var(--pw-text);
}

.pw-how-no {
    flex: 0 0 auto;
    width: 13px;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #818a9b; /* Tinte 55 % */
}

.pw-areas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}

.pw-area {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 48px;
    padding: 9px 12px;
    border: 1px solid var(--pw-rule-2);
    border-radius: 9px;
    background: #fff;
    transition:
        border-color 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.pw-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: #f9f5ea; /* Akzent 12 % */
    color: var(--pw-accent);
    transition: background-color 0.16s ease;
}

.pw-ico svg {
    width: 18px;
    height: 18px;
}

.pw-nm {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.2;
    color: var(--pw-ink);
}

.pw-go {
    display: grid;
    color: var(--pw-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        color 0.16s ease;
}

.pw-go svg {
    width: 16px;
    height: 16px;
}

/* Gewählt sieht Mietrecht aus wie im echten Plugin unter dem Zeiger. */
.stage-widget.picked.chosen .pw-area-pick {
    border-color: #9fa6b3; /* Tinte 42 % */
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.05),
        0 10px 20px -14px rgba(16, 24, 40, 0.45);
}

.stage-widget.picked.chosen .pw-area-pick .pw-ico {
    background: #f4eedb; /* Akzent 20 % */
}

.stage-widget.picked.chosen .pw-area-pick .pw-go {
    opacity: 1;
    transform: none;
}

.pw-soon {
    margin-top: 13px;
    padding-top: 2px;
}

.pw-soon-h {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #9499a4;
}

.pw-soon-list {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.7;
    color: #7d838f;
}

.pw-soon-list .pw-sep {
    margin: 0 8px;
    color: #d6be79;
}

/* Die Zusicherung schliesst die Ansprache links ab. */
.pw-anchor {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    font-size: 11.5px;
    line-height: 1.5;
    color: #717885;
}

.pw-anchor svg {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    color: var(--pw-accent);
}

/* Das Anliegen tippt sich ein: main.js zieht die Breite jeder Zeile von
   0 auf data-w; der Text darin steht fest und wird dabei aufgedeckt. */
.story-stage .stage-widget .pw-text {
    position: relative;
    min-height: 104px;
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid var(--pw-rule-2);
    border-radius: 8px;
    background: #fff;
    transition:
        border-color 0.14s ease,
        box-shadow 0.14s ease;
}

.stage-widget.typed .pw-text {
    border-color: var(--pw-ink);
    box-shadow: 0 0 0 3px rgba(26, 43, 74, 0.13);
}

.pw-placeholder {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.55;
    white-space: nowrap;
    color: #a3a8b0;
}

.stage-widget.typed .pw-placeholder {
    visibility: hidden;
}

.story-stage .stage-widget .pw-text .type-line {
    display: block;
    width: 0;
    height: auto;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: none;
    font-style: normal;
    font-size: 16px;
    line-height: 1.55;
    white-space: nowrap;
    color: var(--pw-text);
}

/* Der Einstieg hat keine Navigation, das Rechtsgebiet nur «Zurück» (die
   Kachel ist schon der Schritt weiter). Auf der Frage kommt «Weiter»
   dazu, gesperrt, bis das Feld nicht mehr leer ist; beide stehen dann an
   der Kante der Aktion. */
.pw-nav {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px 2px;
    border-top: 1px solid var(--pw-rule-2);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
}

.stage-widget.chosen .pw-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.pw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.pw-btn svg {
    width: 18px;
    height: 18px;
}

.pw-btn-ghost {
    min-width: 120px;
    margin-right: auto;
    border-color: var(--pw-rule-2);
    background: #fff;
    color: var(--pw-ink);
}

.pw-btn-primary {
    display: none;
    min-width: 230px;
    border-color: var(--pw-rule-2);
    background: #f1f2f4; /* Tinte 6 % */
    color: #a3aab7; /* Tinte 40 % */
}

.stage-widget.asked .pw-btn-ghost {
    margin-right: 0;
}

.stage-widget.asked .pw-btn-primary {
    display: inline-flex;
}

.stage-widget.typed .pw-btn-primary {
    border-color: var(--pw-ink);
    background: var(--pw-ink);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 1px 2px rgba(16, 24, 40, 0.12);
}

/* Die Eingangsbestätigung trägt keine Schrittleiste und keine
   Navigation; sie legt sich auf dem Grund der Seite darüber. Links die
   Bestätigung, rechts Referenz und nächste Schritte. */
.pw-done {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 2px 12px;
    background: var(--kw-paper);
    opacity: 0;
    transform: translateX(16px);
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        transform var(--pw-in),
        visibility 0s linear 0.42s;
}

.stage-widget.sent .pw-done {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
        opacity 0.3s ease,
        transform var(--pw-in);
}

.pw-done-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    align-content: start;
    column-gap: 40px;
}

.pw-done-grid > .pw-badge,
.pw-done-grid > .pw-title,
.pw-done-grid > .pw-desc {
    grid-column: 1;
}

.pw-badge {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 9px;
    background: #e9f2ed;
    box-shadow: inset 0 0 0 1px #cee2d7;
    color: var(--pw-ok);
}

.pw-badge svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.4;
}

.pw-done .pw-title {
    margin-bottom: 8px;
}

.pw-confirm {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    padding: 10px 14px;
    border: 1px solid var(--pw-rule-2);
    border-radius: 9px;
    background: var(--pw-paper-2);
}

.pw-confirm-k {
    margin-bottom: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw-confirm-v {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--pw-ink);
}

.pw-confirm-v svg {
    width: 16px;
    height: 16px;
    color: var(--pw-muted);
}

.pw-next {
    display: grid;
    gap: 8px;
    grid-column: 2;
    grid-row: 4;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--pw-rule-2);
}

.pw-next-h {
    margin-bottom: 1px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw-next-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pw-muted);
}

.pw-next-item b {
    font-weight: 700;
}

.pw-next-no {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border-radius: 5px;
    background: #eff0f2; /* Tinte 7 % */
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pw-ink);
}

.pw-done .pw-anchor {
    margin-top: 26px;
    padding-top: 12px;
    border-top: 1px solid var(--pw-rule);
}

.pw-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 9px 2px;
    border-top: 1px solid var(--pw-rule);
    font-size: 11px;
    color: var(--pw-muted);
}

.pw-foot-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pw-foot-item svg {
    width: 12px;
    height: 12px;
    color: #898e99;
}

.pw-foot .pw-sep {
    opacity: 0.35;
}

/* Die Law4-Marke, gefüllt und in ihrer eigenen Tinte (plugin/src/ui/brand.ts). */
.stage-widget .pw-l4 {
    width: 14px;
    height: 14px;
    fill: #1a2b4a;
    stroke: none;
}

/* Wie gross die Miniatur steht, entscheidet allein der Zoom: Die Seite
   darin bleibt um 1040px breit, das Plugin also im zweispaltigen Blatt. */
@media (min-width: 961px) and (max-width: 1239px) {
    .kw-page {
        zoom: 0.41;
    }
}

@media (min-width: 961px) and (max-width: 1079px) {
    .kw-page {
        zoom: 0.355;
    }
}

/* Niedrige Laptop-Fenster: das Postfach rückt näher, die Website wird
   etwas kompakter, damit die ganze Szene ins Bild passt. */
@media (min-width: 961px) and (max-height: 860px) {
    .story-stage .stage-workspace {
        margin-top: 40px;
    }

    .kw-nav {
        height: 60px;
    }

    .kw-hero {
        padding: 30px 28px 16px;
    }

    .stage-caption {
        margin-bottom: 8px;
    }
}

/* Telefon und Tablet: untereinander. */
@media (max-width: 960px) {
    .stage-plugin {
        align-items: stretch;
    }

    .kw-page {
        zoom: 0.58;
    }
}

/* Telefon: dieselbe Website, kleiner gezoomt. Das Fenster zeigt einen
   Desktop-Browser, das Plugin bleibt im zweispaltigen Blatt. */
@media (max-width: 640px) {
    .kw-page {
        zoom: 0.42;
    }

    .kw-nav {
        padding: 0 20px;
    }

    .kw-links {
        display: none;
    }

    .kw-hero {
        padding: 32px 20px 20px;
    }

    .story-stage .stage-widget {
        margin: 0 20px 20px;
    }
}

@media (max-width: 400px) {
    .kw-page {
        zoom: 0.38;
    }
}


#flowPathBg {
    stroke: rgba(11, 26, 58, 0.2);
    stroke-width: 1;
    stroke-dasharray: 2 6;
}

#flowPathFill {
    stroke: var(--navy);
    stroke-width: 1.5;
}

/* Die Karte auf dem Weg gehört zur Seite, nicht zum Produkt. */
.stage-card {
    border-radius: 6px;
    border: 0;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(11, 26, 58, 0.08),
        0 26px 50px -22px rgba(11, 26, 58, 0.45);
    font-family: var(--body);
}

.stage-card-title {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

.stage-card-line {
    font-size: 12.5px;
    color: var(--text);
}

.stage-card-meta {
    font-family: var(--mono);
    font-size: 10px;
}

.ws-toast {
    border-radius: 6px;
    background: var(--navy);
    font-family: var(--body);
}

.stage-workspace .app-mockup {
    border-radius: 8px;
}

.story-footer {
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
}

.story-progress {
    flex-shrink: 0;
    width: 120px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background: rgba(11, 26, 58, 0.1);
}

.story-captions {
    flex: 1;
    height: 28px;
    counter-reset: caption;
}

.story-captions p {
    counter-increment: caption;
    font-size: 16.5px;
    font-weight: 400;
    color: var(--text);
}

.story-captions p::before {
    content: counter(caption, decimal-leading-zero) " / 05";
    display: inline-block;
    width: 84px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ── 03 Workspace — die Modul-Bühne ─────────────────────── */

.showcase-pin {
    padding-top: calc(var(--head-h) + 16px);
}

.showcase-head,
.showcase-head .chapter-label {
    text-align: left;
}

.showcase-stage {
    display: block;
    position: relative;
}

.showcase-frame {
    width: min(860px, 64%);
    margin-left: auto;
    margin-right: 0;
}

.showcase-frame .app-mockup {
    zoom: 1.08;
    border-radius: 8px;
    border-color: rgba(11, 26, 58, 0.14);
    box-shadow: 0 34px 70px -40px rgba(11, 26, 58, 0.45);
}

/* Der Modultext steht frei neben dem Bild, nicht auf einer
   Glasscheibe. */
.module-panel {
    left: var(--pad);
    right: auto;
    width: min(340px, 28%);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.feature-icon,
.module-panel .feature-icon {
    display: none;
}

.feature-title,
.module-panel .feature-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--text);
    margin-bottom: 14px;
}

.feature-text,
.module-panel .feature-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-soft);
    margin-bottom: 20px;
}

.feature-bullets li,
.module-panel .feature-bullets li {
    position: relative;
    display: block;
    margin: 0;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
}

.feature-bullets li + li {
    margin-top: 8px;
}

.feature-bullets li::before {
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 10px;
    height: 1.5px;
    margin: 0;
    border-radius: 0;
    background: var(--text-soft);
    opacity: 0.6;
}

.showcase-footer {
    justify-content: flex-start;
    gap: 14px 32px;
    padding-top: 8px;
}

.showcase-progress {
    display: none;
}

.showcase-count {
    min-width: 5em;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text);
}

.showcase-tabs {
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.showcase-tabs button {
    padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.showcase-tabs button:hover {
    transform: none;
    color: var(--text);
}

.showcase-tabs button.active {
    background: var(--navy);
    color: var(--on-dark);
}

.module-status {
    margin: 0 0 0 auto;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

/* Mobile und reduzierte Bewegung: die Module untereinander,
   getrennt durch Weissraum. */
.stack-card {
    margin: 0 0 64px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.stack-card .app-mockup {
    margin-bottom: 24px;
    border-radius: 8px;
}

/* ── 04 Mandantenportal ─────────────────────────────────── */

.split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
}

.split-visual {
    grid-column: 1 / span 6;
}

.split-copy {
    grid-column: 8 / -1;
}

.split-copy .status {
    margin-bottom: 36px;
}

.browser-frame {
    border-radius: 8px;
    border: 0;
    box-shadow:
        0 0 0 1px rgba(11, 26, 58, 0.08),
        0 40px 80px -44px rgba(11, 26, 58, 0.5);
}

/* ── 05 Ablauf — vier Schritte auf hellem Grund ─────────── */

/* Vier gleiche Spalten. Der Knoten sitzt links über jedem Schritt.
   Die Spur ist um einen Steg breiter als die Schritte, damit der
   Impuls aus main.js (75 % der Spurbreite) genau auf dem letzten
   Knoten landet. */
.process {
    margin-top: 0;
    margin-right: calc(-1 * var(--gap));
}

.process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gap);
    margin-right: var(--gap);
}

.process-line,
.process-fill {
    top: 5px;
    left: 0;
    right: auto;
    width: 75%;
    height: 2px;
    border-radius: 2px;
}

.process-line {
    background: rgba(11, 26, 58, 0.1);
}

.process-fill {
    background: var(--navy);
}

.process-pulse {
    top: 6px;
    left: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 0;
    border-radius: 2px;
    background: var(--navy);
    box-shadow: 0 0 0 5px rgba(11, 26, 58, 0.1);
}

.process-step {
    align-items: flex-start;
    text-align: left;
    padding: 0 var(--gap) 0 0;
}

.process-num,
.process-step.lit .process-num {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 18px;
    padding-top: 34px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.process-num::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--ground);
    box-shadow: inset 0 0 0 1.5px rgba(11, 26, 58, 0.3);
    transition:
        background-color 0.45s ease,
        box-shadow 0.45s ease;
}

.process-step.lit .process-num {
    color: var(--text);
}

.process-step.lit .process-num::before {
    background: var(--navy);
    box-shadow: inset 0 0 0 1.5px var(--navy);
}

.process-num::after {
    inset: auto;
    top: -6px;
    left: -6px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border-color: var(--navy);
}

.process-title,
.process-step.lit .process-title {
    margin-bottom: 10px;
    font-size: var(--t3);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.2;
    color: var(--text);
}

.process-text {
    max-width: 22em;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-soft);
}

/* ── Grundsatz ──────────────────────────────────────────── */

.manifesto-pin {
    background: var(--navy);
    justify-content: flex-start;
}

.manifesto-inner .chapter-label {
    margin-bottom: 28px;
}

.manifesto-text {
    max-width: 14em;
    margin: 0;
    font-weight: 500;
    color: var(--on-dark);
}

.manifesto-text em {
    color: var(--quiet-dark);
}

/* ── 07 Warum — Zahlen, dann Gründe ─────────────────────── */

.figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: calc(var(--gap) * 2);
    margin-bottom: clamp(56px, 6vw, 96px);
}

.figure {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.figure-val {
    font-weight: 300;
    font-size: clamp(3.4rem, 7vw, 7rem);
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Die Ziffern-Walze bringt ihre eigene Zeilenhöhe mit; ohne den
   Abgleich stünde «CH» tiefer als die Nachbarn. */
.figure-val .odo {
    line-height: inherit;
}

.figure-label {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-muted);
}

/* ── 09 Fragen ──────────────────────────────────────────── */

.faq-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
}

.faq-side {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--head-h) + 40px);
}

.faq-side .lead {
    margin-top: 28px;
}

.faq-side .text-link {
    margin-top: 28px;
}

.faq-list {
    grid-column: 6 / -1;
    margin-top: 0;
    border-top: 0;
    counter-reset: faq;
}

/* Die Fragen stehen frei untereinander; die offene trägt eine
   leichte Fläche statt einer Linie. */
.faq-item,
.faq-item[open] {
    border-bottom: 0;
    border-radius: 8px;
    transition: background-color 0.35s ease;
}

.faq-item[open] {
    background: var(--ground);
}

.faq-item::after {
    display: none;
}

.faq-item summary {
    padding: 22px 24px 22px 64px;
    font-size: var(--t3);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text);
}

.faq-item summary::before {
    left: 24px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

.faq-item[open] summary::before,
.faq-item summary:hover::before {
    color: var(--text);
}

.faq-toggle,
.faq-item[open] .faq-toggle {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 0;
    background: none;
}

.faq-toggle::before,
.faq-item[open] .faq-toggle::before {
    width: 14px;
    height: 1.5px;
    background: var(--text);
}

.faq-toggle::after,
.faq-item[open] .faq-toggle::after {
    width: 1.5px;
    height: 14px;
    background: var(--text);
}

.faq-answer p {
    max-width: 40em;
    padding: 0 24px 26px 64px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-soft);
}

/* ── 10 Kontakt ─────────────────────────────────────────── */

.cta {
    background: var(--navy);
    text-align: left;
    padding-block: var(--s-section);
}

.cta-heading {
    margin: 0;
    color: var(--on-dark);
    transform-origin: 0 50%;
}

.cta-heading em,
.cta .t1 em {
    color: var(--quiet-dark);
}

.cta-body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: clamp(48px, 5vw, 72px);
    align-items: end;
}

.cta-body .lead {
    grid-column: 1 / span 6;
    color: var(--on-dark-soft);
}

.cta-body .actions {
    grid-column: 8 / -1;
    justify-content: flex-end;
}

.contact-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
}

.contact-facts dt {
    margin-bottom: 6px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--on-dark-muted);
}

.contact-facts dd {
    font-size: 17px;
    color: var(--on-dark);
}

.contact-facts a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Wie in der Eröffnung: im schmalen Fenster hälftig, darunter die
   Knöpfe unter dem Text. */
@media (max-width: 1280px) {
    .cta-body .lead {
        grid-column: 1 / span 6;
    }

    .cta-body .actions {
        grid-column: 7 / -1;
    }
}

@media (max-width: 1100px) {
    .cta-body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .cta-body .lead,
    .cta-body .actions,
    .contact-facts {
        grid-column: 1;
    }

    .cta-body .actions {
        justify-content: flex-start;
    }

    .contact-facts {
        margin-top: 20px;
    }
}

/* ── Fusszeile ──────────────────────────────────────────── */

.site-footer {
    background: var(--navy-deep);
    border-top: 0;
}

.footer-top {
    gap: var(--gap);
    padding-block: clamp(56px, 7vw, 88px) clamp(40px, 5vw, 56px);
}

.footer-logo {
    height: 38px;
    margin-bottom: 22px;
}

.footer-tag {
    max-width: 26em;
    font-size: 15px;
    color: var(--on-dark-muted);
}

.footer-col-title {
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(243, 242, 238, 0.42);
}

.footer-col a {
    font-size: 15px;
    color: rgba(243, 242, 238, 0.78);
}

.footer-bottom {
    padding-block: 20px 26px;
    border-top: 0;
}

.footer-bottom::before {
    display: none;
}

.footer-copy,
.footer-ch {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--on-dark-muted);
}

.footer-ch-cross {
    border-radius: 2px;
}

/* Der Knopf «nach oben» schwebt unten rechts über der letzten Zeile.
   Wo der Seitenrand schmaler ist als er, hält die Zeile Abstand. */
@media (max-width: 1460px) {
    .footer-bottom {
        padding-right: max(var(--pad), 88px);
    }
}

/* Tablet: die Marke über die ganze Breite, darunter die drei Spalten
   nebeneinander. main.css setzt hier zwei, und «Rechtliches» rutschte
   allein in eine dritte Zeile. */
@media (max-width: 860px) {
    .footer-top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 40px;
    }
}

/* Telefon: zwei Spalten statt einer langen Liste. */
@media (max-width: 520px) {
    .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
    }
}

/* Kontakt-Links sind Zeilen im Fliesstext; die Fläche, die auf einen
   Finger reagiert, wird grösser als die Schrift, ohne die Zeile zu
   verschieben. */
.contact-facts a,
.footer-contact a {
    padding-block: 8px;
    margin-block: -8px;
}

/* ── Begleiter: Kapitelverzeichnis, Fortschritt, Halo ───── */

.side-rail {
    gap: 8px;
}

.side-rail a {
    gap: 12px;
    font-family: var(--mono);
}

.side-rail i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-style: normal;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s ease;
}

.side-rail a:hover i,
.side-rail a.active i {
    background: none;
    color: #fff;
    transform: none;
}

.side-rail span {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.read-progress i {
    background: var(--navy);
}

.read-progress i::after {
    display: none;
}

.cursor-halo {
    border-color: rgba(11, 26, 58, 0.3);
}

.cursor-halo.on-target {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    background: rgba(11, 26, 58, 0.05);
    border-color: rgba(11, 26, 58, 0.5);
}

.to-top {
    background: var(--ground);
    border-color: rgba(11, 26, 58, 0.12);
    box-shadow: 0 10px 30px -18px rgba(11, 26, 58, 0.4);
    color: var(--text);
}

.to-top-ring circle {
    stroke: var(--navy);
}

.page-veil {
    background: var(--navy);
}

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

@media (max-width: 1100px) {
    .chapter-title {
        grid-column: 1 / span 8;
    }

    .chapter-lead {
        grid-column: 9 / -1;
    }

    .items.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    :root {
        --head-h: 60px;
    }

    .chapter-head,
    .faq-layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .chapter-title,
    .chapter-title.wide,
    .chapter-head.compact .chapter-title,
    .chapter-lead,
    .faq-side,
    .faq-list {
        grid-column: 1;
    }

    /* Bild und Text bleiben auf dem Tablet nebeneinander, je zur Hälfte.
       Untereinander stünde das Portal in voller Breite da, fast so hoch
       wie der Bildschirm, mit Schrift in Fussnotengrösse. */
    .split-visual {
        grid-column: 1 / span 6;
    }

    .split-copy {
        grid-column: 7 / -1;
    }

    .items.three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .faq-side {
        position: static;
        margin-bottom: 24px;
    }

    .story-pin {
        padding-top: clamp(64px, 12vw, 96px);
    }

    .story-footer {
        display: block;
    }

    .story-captions {
        height: auto;
    }

    /* Die fünf Schritte als Liste: Nummer in eigener Spalte, der Satz
       bricht unter sich selbst um, nicht unter die Nummer. */
    .story-captions p {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        align-items: baseline;
        padding-left: 0;
    }

    .story-captions p::before {
        position: static;
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
    }

    /* Website und Postfach untereinander, an der Satzkante und nicht
       breiter als ein Tablet im Hochformat sie zeigen würde. */
    .story-stage .stage-plugin,
    .story-stage .stage-workspace,
    .story-stage .stage-arrow {
        align-self: flex-start;
        width: 100%;
        max-width: 640px;
        margin-inline: 0;
    }

    .stage-arrow i {
        border-radius: 4px;
        border-color: rgba(11, 26, 58, 0.15);
        background: none;
        color: var(--text);
    }

    /* Die Verbindung bleibt eine Zeile: Advice links, Workspace rechts,
       die Linie dazwischen. Was über sie läuft, steht mittig darunter.
       Hochkant gestellt las sie sich als lose Liste. */
    .product-flow {
        flex-direction: row;
        align-items: flex-start;
        max-width: 640px;
        margin-inline: 0;
        padding-bottom: 44px;
    }

    .flow-line {
        margin: 13px clamp(16px, 4vw, 32px) 0;
    }

    .flow-caption {
        top: 48px;
    }

    .process {
        margin-right: 0;
    }

    .process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-right: 0;
        row-gap: 48px;
    }

    .faq-item summary {
        padding-left: 52px;
    }

    .faq-item summary::before {
        left: 16px;
    }

    .faq-answer p {
        padding-left: 52px;
    }
}

/* Bis 720 Pixel stehen Bild und Text des Portals untereinander, die
   beiden Produkte ebenso. */
@media (max-width: 720px) {
    .split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }

    .split-visual,
    .split-copy {
        grid-column: 1;
    }

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

/* Tablet: die sechs Module als Raster zu zweit statt als Wischreihe.
   main.css legt sie unter 960 Pixeln in eine Reihe zum Wischen; dort
   blieben die Karten rechts ausserhalb unsichtbar, weil ihre Einblendung
   erst beim Hineinscrollen auslöst, und die Reihe sah aus wie eine Karte
   neben leerem Raum. */
@media (min-width: 641px) and (max-width: 960px) {
    .showcase-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 56px var(--gap);
        overflow: visible;
        scroll-snap-type: none;
    }

    .showcase-stack .stack-card {
        display: block;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .items.three,
    .items.four,
    .process-steps,
    .contact-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-facts {
        row-gap: 20px;
    }

    /* Zwei Zahlen nebeneinander brauchen die Breite für ihre Etiketten
       («Mitgründer:innen» ist ein Wort). */
    .figures {
        column-gap: var(--gap);
    }

    .opening {
        padding-top: calc(var(--head-h) + 44px);
    }

    .opening-facts {
        flex-direction: column;
    }

    .btn {
        height: 50px;
        font-size: 14.5px;
    }

    /* Knöpfe in voller Breite: zwei verschieden lange Knöpfe
       untereinander lesen sich als Versehen. */
    .actions > .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .t1.manifesto-text {
        font-size: clamp(2rem, 9.4vw, 2.6rem);
    }

    /* Telefon: Die Module bleiben eine Reihe zum Wischen. Die nächste
       Karte ragt sichtbar herein, das ist der Hinweis aufs Wischen; dafür
       stehen alle Karten gleich da statt erst beim Hineinscrollen. */
    .showcase-stack .stack-card {
        flex-basis: 84%;
    }

    .showcase-stack .stack-card[data-reveal] {
        opacity: 1;
        transform: none;
    }

    .story-captions p {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    /* main.css stellt die Verbindung hier hochkant. Sie bleibt liegen,
       wie auf dem Tablet. */
    .flow-line {
        flex: 1;
        width: auto;
        max-width: none;
        height: 1.5px;
        margin-block: 13px 0;
        background: rgba(11, 26, 58, 0.22);
    }

    .flow-pulse {
        top: 50%;
        left: 0;
        animation-name: flowPulse;
    }

    .flow-caption {
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    /* Der Ablauf hochkant: die Knoten an einer Linie, links, der Text
       daneben. Ohne Linie hingen die Quadrate verloren im Weissraum. */
    .process-steps {
        row-gap: 0;
    }

    .process-step {
        position: relative;
        padding: 0 0 40px 34px;
    }

    .process-step:last-child {
        padding-bottom: 0;
    }

    .process-step:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 20px;
        bottom: 6px;
        width: 2px;
        border-radius: 2px;
        background: rgba(11, 26, 58, 0.12);
    }

    .process-num,
    .process-step.lit .process-num {
        position: static;
        padding-top: 0;
        margin-bottom: 10px;
    }

    .process-num::before {
        top: 3px;
    }

    .process-num::after {
        top: -3px;
        left: -6px;
    }

    .faq-item summary {
        padding: 18px 16px 18px 44px;
    }

    .faq-item summary::before {
        left: 12px;
    }

    .faq-answer p {
        padding: 0 16px 22px 44px;
    }
}

/* ── Unterseiten ────────────────────────────────────────── */

/* Die Seite, auf der man steht, trägt in der Kopfzeile eine Marke. */
@media (min-width: 1101px) {
    .mast-nav > a[aria-current="page"]:not(.nav-cta) {
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 8px;
    }
}

@media (max-width: 1100px) {
    .mast-nav > a[aria-current="page"]:not(.nav-cta)::after {
        content: "";
        width: 8px;
        height: 8px;
        align-self: center;
        background: var(--navy);
    }
}

/* Eröffnung ohne Produktbild: derselbe Kopf wie auf der Startseite,
   darunter direkt die navy Fläche (.band) oder das erste Kapitel. */
.opening.page {
    padding-bottom: clamp(80px, 10vw, 136px);
}

.opening.page .t1 {
    font-size: clamp(2.6rem, 6.2vw, 6rem);
}

/* Navy Fläche mit Zahlen — wie die Bühne unter dem Produktbild der
   Startseite. */
.band {
    background: var(--navy);
    color: var(--on-dark);
    padding-block: clamp(64px, 7vw, 104px);
}

.figures.light {
    margin-bottom: 0;
}

.figures.light .figure-val {
    color: var(--on-dark);
}

.figures.light .figure-label {
    color: var(--on-dark-muted);
}

/* Fliesstext: ein Satz als Anker links, die Erzählung rechts. */
.prose-split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
}

.prose-quote {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--head-h) + 40px);
    font-size: clamp(24px, 2.3vw, 34px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
    text-wrap: balance;
}

.prose {
    grid-column: 7 / -1;
}

.prose p {
    max-width: 36em;
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--text-soft);
}

.prose p + p {
    margin-top: 1.1em;
}

.prose strong {
    font-weight: 600;
    color: var(--text);
}

/* Zwei Spalten für Punkte mit längerem Text. */
.items.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 56px;
}

/* Team: Monogramm, Name, Rolle, Werdegang. */
.monogram {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 28px;
    border-radius: 4px;
    background: var(--navy);
    color: var(--on-dark);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 500;
}

.people .item-title {
    margin-bottom: 6px;
}

.people .item-role {
    margin-bottom: 18px;
}

.people .item-text {
    font-size: 15px;
}

.place {
    margin-top: clamp(56px, 6vw, 88px);
}

/* Kontakt: zwei Wege als Flächen, wie die beiden Produkte auf der
   Startseite. Die ganze Fläche ist der Link. */
.ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.way {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(260px, 26vw, 360px);
    padding: clamp(32px, 4vw, 56px);
    border-radius: 8px;
    background: var(--ground);
    color: var(--text);
    transition: background-color 0.3s ease;
}

.way:hover {
    background: #ebe9e3;
}

.way.navy {
    background: var(--navy);
    color: var(--on-dark);
}

.way.navy:hover {
    background: #12254f;
}

.way-label {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-muted);
}

.way.navy .way-label {
    color: var(--on-dark-muted);
}

.way-value {
    margin-top: auto;
    padding-top: 48px;
    font-size: clamp(1.8rem, 3.2vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.way-hint {
    max-width: 26em;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-soft);
}

.way.navy .way-hint {
    color: var(--on-dark-soft);
}

.way-go {
    position: absolute;
    top: clamp(32px, 4vw, 56px);
    right: clamp(32px, 4vw, 56px);
    font-size: 22px;
    line-height: 1;
    transition: transform 0.35s var(--ease-out);
}

.way:hover .way-go {
    transform: translateX(6px);
}

/* Ein Link unter der Verbindung Advice → Workspace, mittig wie sie. */
.flow-more {
    margin-top: clamp(32px, 4vw, 48px);
    text-align: center;
}

/* Produktseiten: ein Modul je Zeile — Text und echte Oberfläche
   nebeneinander, die Seiten wechseln von Zeile zu Zeile. */
.module-rows {
    display: grid;
    row-gap: clamp(88px, 10vw, 152px);
}

.module-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
}

.module-copy {
    grid-column: 1 / span 4;
}

.module-visual {
    grid-column: 6 / -1;
}

.module-row.reversed .module-copy {
    grid-column: 9 / -1;
    grid-row: 1;
}

.module-row.reversed .module-visual {
    grid-column: 1 / span 7;
    grid-row: 1;
}

.module-copy .item-title {
    font-size: clamp(24px, 2.2vw, 32px);
    letter-spacing: -0.03em;
}

.module-copy .dash {
    margin-top: 20px;
}

.module-visual .app-mockup {
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(11, 26, 58, 0.08),
        0 40px 80px -44px rgba(11, 26, 58, 0.5);
}

/* 404: nur die Marke oben, die Eröffnung mittig in der Höhe. */
.lost-page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.lost-head {
    display: flex;
    align-items: center;
    height: var(--head-h);
}

.opening.lost {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0 var(--head-h);
}

@media (max-width: 960px) {
    .prose-split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }

    .prose-quote,
    .prose {
        grid-column: 1;
    }

    .prose-quote {
        position: static;
    }

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

    .flow-more {
        text-align: left;
    }

    .module-row,
    .module-row.reversed {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }

    .module-copy,
    .module-visual,
    .module-row.reversed .module-copy,
    .module-row.reversed .module-visual {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 640px) {
    .items.two {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }

    .way {
        min-height: 0;
    }
}

/* ── Ruhezustand: reduzierte Bewegung ───────────────────── */

@media (prefers-reduced-motion: reduce) {
    .preloader-mark path {
        transform: none;
        animation: none;
    }
}