/* AnnexCREATE – Web-Oberflächen (v3, Brandkit „Spektrum")
   ------------------------------------------------------------------
   Gestaltungsidee: Die Suite ist ein Spektrum aus zehn Elementen. Jede
   App hat eine feste Wellenlänge (Brandkit-Farbe) und eine Ordnungszahl.
   Daraus entstehen die drei Signaturen der Site:

     1. das Periodensystem der Apps (Hero + Bundle-Zusammensetzungen),
     2. der Spektrumsbalken als Marke und als Bundle-Fingerabdruck,
     3. die Elementkante — jede App-Zeile trägt ihre Farbe als Kante.

   Flächen bleiben neutral: hell = Papier, dunkel = Graphit. Farbe kommt
   ausschließlich aus den Elementfarben und dem Suite-Indigo. Es gibt
   keinen dauerhaft schwarzen Block im Hellmodus und keinen weißen im
   Dunkelmodus — beide Modi tragen dieselbe Struktur (Sonny, 09.08.2026).

   Themenwahl: `:root` hält den Hellmodus. Der Dunkelmodus kommt über
   `prefers-color-scheme` (nur wenn nicht ausdrücklich „hell" gewählt)
   UND über `[data-theme="dark"]`, damit der Schalter im Kopf in beide
   Richtungen gewinnt — dieselbe Logik wie der Erscheinungsbild-Schalter
   in den Apps. */

/* Marken-Schrift (BRANDKIT.md: Manrope für Wortmarke, Marketing, Homepage).
   Selbst gehostet, Latin-Teilmenge der Variable-Font (OFL, assets/fonts/Manrope-OFL.txt);
   kein Fremdserver. Fällt bis zum Laden auf die Systemschrift zurück. */
@font-face {
    font-family: "Manrope";
    src: url("assets/fonts/manrope-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Flächen und Schrift — Werte = BRANDKIT.md v2.6, neutrale Architektur */
    --paper: #FAF9F7;
    --surface: #FFFFFF;
    --surface-sunk: #F4F2ED;
    --surface-raised: #FFFFFF;
    --ink: #141317;
    --graphite: #3A3A42;
    --muted: #64646E;
    --hairline: #E6E4E0;
    --hairline-strong: #D5D1C9;

    /* Suite-Primär (Indigo, = AnnexHub) — --accent-text/-hover sind die tiefe
       Hub-Verlaufsstufe #4F46E5 (WCAG-Kontrast auf paper für Fließtext-Links;
       reines #6366F1 läge mit 4,38:1 knapp unter AA 4,5:1). */
    --accent: #6366F1;
    --accent-hover: #4F46E5;
    --accent-soft: rgba(99, 102, 241, 0.10);
    --accent-text: #4F46E5;
    --accent-on: #FFFFFF;
    --accent-btn: #5558E8;   /* Knopffläche: weiße Schrift 5,3:1 (PO8, WCAG AA); --accent bleibt Marke */
    --font-brand: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --warn-bg: #FBF3E2;
    --warn-text: #7C5210;
    --warn-edge: #E0992E;

    --shadow-card: 0 1px 2px rgba(20, 19, 23, 0.04), 0 8px 24px -16px rgba(20, 19, 23, 0.22);
    --shadow-lift: 0 2px 4px rgba(20, 19, 23, 0.05), 0 18px 40px -20px rgba(20, 19, 23, 0.32);
    --shadow-tile: drop-shadow(0 4px 10px rgba(20, 19, 23, 0.22));
    --shadow-swatch: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px -2px rgba(20, 19, 23, 0.25);
    --header-bg: rgba(251, 250, 248, 0.78);
    --tile-face: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%);

    /* Annex-Spektrallinie (warm → kühl). In beiden Modi identisch:
       das sind Markenkonstanten, keine Themenfarben. */
    --s-photo:   #EC4899;
    --s-pdf:     #E11D48;
    --s-motion:  #EF4444;
    --s-design:  #F97316;
    --s-publish: #E0992E;
    --s-calc:    #22C55E;
    --s-edit:    #14B8A6;
    --s-code:    #06B6D4;
    --s-text:    #3B82F6;
    --s-hub:     #6366F1;
    --s-office:  #8B5CF6;

    --maxw: 1120px;
    --gutter: 2rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #0C0B0F;
        --surface: #151419;
        --surface-sunk: #100F14;
        --surface-raised: #1C1B22;
        --ink: #F4F3F8;
        --graphite: #C7C5D2;
        --muted: #9694A3;
        --hairline: #292731;
        --hairline-strong: #3B3846;
        --accent: #8B88F5;
        --accent-hover: #A5A2FF;
        --accent-soft: rgba(139, 136, 245, 0.14);
        --accent-text: #A5A2FF;
        --accent-on: #141317;
        --accent-btn: #8B88F5;
        --warn-bg: #241D10;
        --warn-text: #E7B463;
        --warn-edge: #E0992E;
        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -18px rgba(0, 0, 0, 0.8);
        --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.55), 0 22px 48px -22px rgba(0, 0, 0, 0.9);
        --shadow-tile: drop-shadow(0 4px 10px rgba(12, 11, 15, 0.22));
        --shadow-swatch: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px -2px rgba(12, 11, 15, 0.25);
        --header-bg: rgba(12, 11, 15, 0.76);
        --tile-face: linear-gradient(180deg, #1E1D25 0%, #17161C 100%);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0C0B0F;
    --surface: #151419;
    --surface-sunk: #100F14;
    --surface-raised: #1C1B22;
    --ink: #F4F3F8;
    --graphite: #C7C5D2;
    --muted: #9694A3;
    --hairline: #292731;
    --hairline-strong: #3B3846;
    --accent: #8B88F5;
    --accent-hover: #A5A2FF;
    --accent-soft: rgba(139, 136, 245, 0.14);
    --accent-text: #A5A2FF;
    --accent-on: #141317;
        --accent-btn: #8B88F5;
    --warn-bg: #241D10;
    --warn-text: #E7B463;
    --warn-edge: #E0992E;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -18px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.55), 0 22px 48px -22px rgba(0, 0, 0, 0.9);
    --shadow-tile: drop-shadow(0 4px 10px rgba(12, 11, 15, 0.22));
    --shadow-swatch: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px -2px rgba(12, 11, 15, 0.25);
    --header-bg: rgba(12, 11, 15, 0.76);
    --tile-face: linear-gradient(180deg, #1E1D25 0%, #17161C 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-wrap: pretty;
}

/* Der Sprung an den Inhalt. Sichtbar, sobald er den Fokus bekommt —
   die einzige Bedienhilfe, die man nicht sieht, bis man sie braucht. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--accent-btn);
    color: var(--accent-on);
    padding: 0.6rem 1.1rem;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    font-size: 0.9375rem;
}
.skip-link:focus { left: 0; }

/* ---- Register: Mono-Eyebrow (Präzision, Ordnung, Messwerte) ---- */
.eyebrow {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.9rem;
}

/* ---- Kopf ---- */
header.site-header {
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--hairline);
    padding: 0.75rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.wordmark {
    font-weight: 600;
    font-size: 1.0625rem;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -0.015em;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
}

/* Die Wortmarke trägt das Spektrum als Miniatur: elf Wellenlängen,
   in derselben Reihenfolge wie die Suite. */
/* Die Marke: neun Felder, das mittlere hervorgehoben (Sonny-Wahl 21.08.2026,
   Entwurf 2 „Spektrum-Raster"). Vorher sieben Streifen nebeneinander — ein
   Merkmal, aber kein Zeichen: Es sagte nicht, wer das ist. Die Bundle tragen
   dieselbe Form in ihren eigenen Farben. */
.wordmark .spectrum-mark {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1.5px;
    width: 1.05rem;
    height: 1.05rem;
}
.wordmark .spectrum-mark i {
    border-radius: 1.5px;
}
/* Das mittlere Feld traegt die Akzentfarbe und steht etwas ueber die Kante
   hinaus — sonst waere das Raster neun gleiche Punkte und kein Zeichen. */
.wordmark .spectrum-mark i.mitte {
    border-radius: 2px;
    transform: scale(1.18);
}
.wordmark .dot { color: var(--accent); }

nav.site-nav { display: flex; align-items: center; gap: 1.15rem; }

nav.site-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9375rem;
    padding: 0.2rem 0;
    border-bottom: 1.5px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
nav.site-nav a:hover { color: var(--ink); }
nav.site-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
nav.site-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Kopf-Schalter: Sprache und Erscheinungsbild tragen dieselbe Form. */
.chip-button,
.lang-toggle {
    border: 1px solid var(--hairline-strong);
    background: var(--surface);
    color: var(--muted);
    border-radius: 7px;
    padding: 0.28rem 0.6rem;
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.chip-button:hover,
.lang-toggle:hover { color: var(--ink); border-color: var(--muted); }
.chip-button:focus-visible,
.lang-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 7px; }

/* Sprachauswahl (M5-B): kompaktes Dropdown im Kopf. */
.lang-select {
    position: relative;
    display: inline-block;
}
.lang-select-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 3.2rem;
    justify-content: space-between;
}
.lang-select-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.7;
}
.lang-select-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 10rem;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-lift);
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    z-index: 30;
}
.lang-select-menu[hidden] { display: none; }
.lang-select-menu li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--ink);
}
.lang-select-menu li:hover,
.lang-select-menu li:focus {
    background: var(--accent-soft);
    color: var(--accent-text);
    outline: none;
}
.lang-select-menu li[aria-selected="true"] {
    background: var(--surface-sunk);
    font-weight: 500;
}
.lang-select-menu .lang-code {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    min-width: 1.6rem;
    text-transform: uppercase;
    color: var(--muted);
}
.lang-select-menu li:hover .lang-code,
.lang-select-menu li:focus .lang-code,
.lang-select-menu li[aria-selected="true"] .lang-code { color: inherit; }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 2.4rem;
    justify-content: center;
}
.theme-toggle svg { width: 15px; height: 15px; display: block; }

main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter) 5rem;
}

/* ---- Spektrumsbalken ---- */
.spectrum {
    display: flex;
    width: 100%;
    height: 0.375rem;
    border-radius: 3px;
    overflow: hidden;
    gap: 2px;
}
.spectrum span { flex: 1; }

/* ---- Hero: liegt auf dem Seitengrund, nicht in einem Kasten ---- */
.hero {
    padding: 4.5rem 0 2.5rem;
    text-align: center;
}
.hero h1 {
    font-size: clamp(2.4rem, 6.5vw, 4.25rem);
    font-weight: 700;
    letter-spacing: -0.038em;
    line-height: 1.02;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}
/* Zweite Zeile der Überschrift läuft im Spektrum-Verlauf — die einzige
   Stelle der Site, an der Schrift Farbe trägt. */
.hero h1 .spectral {
    background: linear-gradient(96deg, var(--s-photo), var(--s-design) 22%, var(--s-publish) 38%, var(--s-calc) 56%, var(--s-code) 72%, var(--s-hub) 86%, var(--s-office));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero .lead {
    color: var(--graphite);
    font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
    max-width: 40rem;
    margin: 0 auto 2.25rem;
}
.hero-cta {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.hero-note {
    color: var(--muted);
    font-size: 0.8125rem;
    margin: 1.1rem 0 0;
}

/* ---- Kopfbereich der Unterseiten ---- */
.page-head {
    padding: 3.25rem 0 0.5rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 2.25rem;
}
.page-head h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0 0 0.6rem;
    text-wrap: balance;
}
.page-head p {
    color: var(--muted);
    font-size: 1.0625rem;
    max-width: 44rem;
    margin: 0 0 2rem;
}

/* ---- Schaltflächen ---- */
.button {
    display: inline-block;
    background: var(--accent-btn);
    color: var(--accent-on);
    text-decoration: none;
    border-radius: 9px;
    padding: 0.7rem 1.45rem;
    font-weight: 550;
    font-size: 0.9375rem;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.button:hover { background: var(--accent-hover); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 9px; }
.button.secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--hairline-strong);
}
.button.secondary:hover { background: var(--surface-sunk); border-color: var(--muted); }
.button.ghost {
    background: transparent;
    color: var(--accent-text);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}
.button.ghost:hover { background: transparent; color: var(--ink); }
.button[disabled],
.button:disabled {
    background: var(--surface-sunk);
    color: var(--muted);
    border-color: var(--hairline);
    cursor: not-allowed;
}

/* ---- Abschnitte ---- */
.section { margin-top: 5rem; scroll-margin-top: 5rem; }
.section-head { margin-bottom: 1.75rem; max-width: 46rem; }
.section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.section-lead { color: var(--muted); font-size: 1.0125rem; margin: 0; }
.lp-hero-proof {
    color: var(--ink);
    font-weight: 650;
    font-size: 0.9375rem;
    line-height: 1.45;
    margin: 1rem 0 0;
}
.lp-hero-guide { margin: 0.75rem 0 0; font-size: 0.9375rem; }
.lp-hero-guide a { color: var(--accent-text); font-weight: 600; }

/* ---- Periodensystem der Apps (Signatur) ----
   Die Kachel ist der Grundbaustein: Ordnungszahl, Icon, Name, Aufgabe.
   Sie erscheint im Hero groß und in den Bundles klein wieder. */
.ptable {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.65rem;
    max-width: 62rem;
    margin: 2.75rem auto 2.5rem;
}
.pt-el {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    background: var(--tile-face);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--el, var(--accent));
    border-radius: 12px;
    padding: 1.15rem 0.5rem 0.85rem;
    box-shadow: var(--shadow-card);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.pt-el:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--hairline-strong);
    border-top-color: var(--el, var(--accent));
}
.pt-num {
    position: absolute;
    top: 0.45rem;
    left: 0.6rem;
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.pt-icon {
    width: 54px;
    height: 54px;
    filter: var(--shadow-tile);
}
.pt-name {
    color: var(--ink);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
}
.pt-disc {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--muted);
}

/* ---- App-Zeilen: eine App, ihre Aufgabe, ihre belegten Fähigkeiten ---- */
.app-list {
    display: grid;
    gap: 0.75rem;
}
.app-entry {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--el, var(--accent));
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-entry:hover { box-shadow: var(--shadow-lift); }
.app-entry .app-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.app-entry .app-figure img { width: 52px; height: 52px; }
.app-entry .app-figure .num {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--muted);
}
.app-entry h3 {
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: nowrap;
}
.app-entry h3 .role {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: color-mix(in srgb, var(--el, var(--muted)) 58%, var(--ink));
}
.app-entry > div > p {
    color: var(--graphite);
    font-size: 0.9375rem;
    margin: 0.45rem 0 0.85rem;
    max-width: 52rem;
}
.capabilities {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}
.capabilities li {
    font-size: 0.8125rem;
    color: var(--graphite);
    background: var(--surface-sunk);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

/* ---- Bundles: ein Bundle ist eine Verbindung aus Elementen ----
   Der Fingerabdruck oben zeigt die enthaltenen Wellenlängen, die
   Kachelreihe die Apps selbst. Wer die Farben einmal gelesen hat,
   erkennt ein Bundle, ohne die Liste zu lesen. */
.bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}
/* Ein einzelnes Produkt (D45): die Karte bleibt so breit wie eine von dreien,
   steht aber mittig — ohne diese Regel zieht `auto-fit` sie über die ganze
   Seitenbreite und die Preisangabe verliert ihren Halt. */
.bundle-grid.single {
    grid-template-columns: minmax(0, 26rem);
    justify-content: center;
}
.bundle {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.bundle:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.bundle.featured { border-color: var(--accent); }
.bundle-fingerprint { display: flex; height: 5px; }
.bundle-fingerprint span { flex: 1; }
.bundle-body { padding: 1.5rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.bundle h3 {
    margin: 0 0 0.15rem;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.bundle .tag {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--accent-text);
    background: var(--accent-soft);
    border-radius: 4px;
    padding: 0.16rem 0.42rem;
}
.bundle .bundle-for { color: var(--muted); font-size: 0.875rem; margin: 0 0 1.1rem; }
.bundle-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.bundle-parts li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--graphite);
    background: var(--surface-sunk);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 0.28rem 0.55rem 0.28rem 0.4rem;
}
.bundle-parts li img { width: 18px; height: 18px; }
/* Complete führt alle zehn Elemente — als reine Icon-Reihe, sonst frisst die
   Namensliste die halbe Karte. */
.bundle-parts.compact { gap: 0.35rem; }
.bundle-parts.compact li { padding: 0.3rem; }
.bundle-price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}
.bundle-price .amount {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.03em;
}
.bundle-price .qualifier { color: var(--muted); font-size: 0.8125rem; }
.bundle-price .strike { color: var(--muted); font-size: 0.875rem; text-decoration: line-through; }
.bundle .bundle-note { color: var(--muted); font-size: 0.75rem; margin: 0.6rem 0 0; }

/* ---- Bundle-Verpackungen in shop.html ---- */
.bundle-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem;
    align-items: stretch;
}
.bundle-showcase img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

/* ---- Merkmalsraster (Prinzipien, Suite-Fähigkeiten) ---- */
.trait-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
    gap: 1rem;
}
.trait {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 1.35rem 1.4rem;
    box-shadow: var(--shadow-card);
}
.trait h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.trait h3 .marker {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background: var(--el, var(--accent));
    flex: 0 0 auto;
}
.trait p { margin: 0; color: var(--muted); font-size: 0.875rem; }

/* ---- Betonter Abschnitt (Versprechen) ----
   Kein invertierter Kasten: eine flach getönte Fläche, die in beiden
   Modi zur Umgebung passt. */
.feature-panel {
    background: var(--accent-soft);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 2.25rem 2rem;
}
.feature-panel h2 { margin-top: 0; }
.feature-panel .panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.feature-panel .panel-grid h3 { font-size: 0.9375rem; margin: 0 0 0.35rem; font-weight: 650; }
.feature-panel .panel-grid p { margin: 0; color: var(--graphite); font-size: 0.875rem; }

/* ---- Zahlenband ---- */
.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
}
.figure {
    background: var(--surface);
    padding: 1.35rem 1.4rem;
}
.figure .value {
    font-size: 1.875rem;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.1;
    display: block;
    font-variant-numeric: tabular-nums;
}
.figure .label {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-top: 0.35rem;
    display: block;
}

/* ---- Fragen & Antworten ---- */
.faq { border-top: 1px solid var(--hairline); }
.faq details {
    border-bottom: 1px solid var(--hairline);
    padding: 0.25rem 0;
}
.faq summary {
    cursor: pointer;
    padding: 1rem 2rem 1rem 0;
    font-weight: 550;
    font-size: 1rem;
    list-style: none;
    position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent-text); }
.faq details p {
    margin: 0 0 1.1rem;
    color: var(--graphite);
    font-size: 0.9375rem;
    max-width: 52rem;
}

/* ---- Karten (allgemein) ---- */
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 1rem;
}
.app-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 1.4rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.app-card.linked:hover {
    border-color: var(--hairline-strong);
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}
.app-card .swatch {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    margin-bottom: 0.85rem;
    box-shadow: var(--shadow-swatch);
}
.app-card h3 { font-size: 1.02rem; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
.app-card p { color: var(--muted); font-size: 0.875rem; margin: 0.5rem 0 0; }
.app-card.plain p { margin: 0; }

/* ---- Hinweisband ---- */
.notice {
    background: var(--warn-bg);
    color: var(--warn-text);
    border-radius: 10px;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    margin-bottom: 2rem;
}
.notice a { color: inherit; }

/* Baustellenband. Steht auf jeder Seite unter dem Kopf, solange die Suite
   nicht veröffentlicht ist: Die Seiten zeigen den geplanten Umfang, und das
   muss man ihnen ansehen können. Wird zum Go-Live entfernt — zusammen mit
   dem noindex in den Kopfzeilen. */
.notice.construction {
    max-width: var(--maxw);
    margin: 1.25rem auto 0;
    border-left: 3px solid var(--warn-edge);
    width: calc(100% - 2 * var(--gutter));
}
.notice.construction strong { margin-right: 0.35rem; }

/* ---- Tabellen ---- */
table.downloads,
table.docs {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
table.downloads th, table.downloads td,
table.docs th, table.docs td {
    text-align: left;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.9375rem;
}
table.downloads th, table.docs th {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--surface-sunk);
}
table.downloads tr:last-child td,
table.docs tr:last-child td { border-bottom: none; }
table.downloads td.app-name,
table.docs td.app-name { font-weight: 600; }
table.downloads td.muted,
.muted { color: var(--muted); }
table.downloads a, table.docs a { color: var(--accent-text); }

/* Breite Tabellen dürfen in sich rollen — die Seite selbst nie. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Preiskarten ---- */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.price-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}
.price-card h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 650; }
.price-card .price {
    font-size: 1.6rem;
    font-weight: 650;
    margin: 0.4rem 0;
    letter-spacing: -0.03em;
}
.price-card .price .unit { font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.price-card p { color: var(--muted); font-size: 0.875rem; flex: 1; margin: 0 0 1rem; }

/* ---- Formulare ---- */
.field-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    color: var(--muted);
}
.text-input,
textarea.text-input,
select.text-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}
.text-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* ---- Prosa (Impressum, Datenschutz, Widerruf, AVV, Versprechen) ---- */
.legal { max-width: 48rem; padding-top: 3.25rem; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.35rem); letter-spacing: -0.03em; margin: 0 0 0.5rem; font-weight: 700; text-wrap: balance; }
.legal h2 {
    font-size: 1.1875rem;
    letter-spacing: -0.015em;
    margin: 2.5rem 0 0.6rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--hairline);
    font-weight: 650;
}
.legal h3 { font-size: 1rem; margin: 1.5rem 0 0.4rem; font-weight: 650; }
.legal p, .legal li { color: var(--graphite); font-size: 0.9375rem; }
.legal a { color: var(--accent-text); }
.legal .lead { color: var(--muted); font-size: 1.0625rem; }
.legal address { font-style: normal; color: var(--graphite); }
.legal blockquote {
    margin: 1rem 0;
    padding: 0.9rem 1.1rem;
    background: var(--surface-sunk);
    border-left: 3px solid var(--hairline-strong);
    border-radius: 0 8px 8px 0;
}
.legal blockquote p { margin: 0; }

/* ---- Fuß ---- */
footer.site-footer {
    border-top: 1px solid var(--hairline);
    padding: 2.5rem var(--gutter);
    text-align: center;
    color: var(--muted);
    font-size: 0.8125rem;
    background: var(--surface);
}
footer.site-footer .footer-links {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    gap: 0.45rem 2.5rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    text-align: left;
}
footer.site-footer .footer-links a { color: var(--muted); text-decoration: none; }
footer.site-footer .footer-links a:hover { color: var(--ink); text-decoration: underline; }
/* Widerrufsfunktion (§ 356a BGB, Gate 6 B2): gut lesbar und hervorgehoben,
   nicht als eine Fußzeile unter vielen. */
footer.site-footer .footer-links a.footer-withdraw,
footer.site-footer a.footer-withdraw {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
@media (max-width: 600px) {
    footer.site-footer .footer-links {
        grid-auto-flow: row;
        grid-template-rows: auto;
        grid-template-columns: repeat(2, auto);
        gap: 0.45rem 1.5rem;
    }
}

code {
    background: var(--surface-sunk);
    border: 1px solid var(--hairline);
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    font-size: 0.875em;
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Der Ed25519-Schlüssel im Notfallversprechen ist 64 Zeichen ohne
       Trennstelle: bei 375 px schob er die ganze Seite auf 551 px
       (N0, 02.09.2026). `break-word` bricht nur, was allein nicht in
       eine Zeile passt — Befehlsnamen bleiben am Stück. */
    overflow-wrap: break-word;
}

/* Fließtext-Verweise tragen den Akzent, nicht das Browser-Blau. Die
   Ausnahmen sind Flächen, die selbst schon eine Form haben: Schaltflächen,
   Element-Kacheln und die Wortmarke. */
main a:not(.button):not(.pt-el):not(.wordmark),
.notice a {
    color: var(--accent-text);
}
main a:not(.button):not(.pt-el):not(.wordmark):hover { color: var(--ink); }
.notice a { color: inherit; }

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

/* ---- Bewertungsskala 1–5 (feedback.html) ----
   Schaltflächen statt Sterne-Radios: per Tastatur erreichbar, ohne
   Icon-Satz, und ein Screenreader liest sie als das, was sie sind. */
.rating-group { border: none; margin: 0 0 1.35rem; padding: 0; }
.rating-group legend { font-size: 0.9375rem; font-weight: 550; margin-bottom: 0.5rem; padding: 0; }
.rating-row { display: flex; gap: 0.5rem; }
.rating-button {
    flex: 0 0 auto;
    min-width: 2.75rem;
    padding: 0.5rem 0;
    border: 1px solid var(--hairline-strong);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.rating-button:hover { border-color: var(--accent); }
.rating-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rating-button.selected { border-color: var(--accent); background: var(--accent); color: var(--accent-on); }
.rating-scale { display: inline-block; margin-top: 0.375rem; font-size: 0.8125rem; }

/* ---- App-Seiten (app-<name>.html) ---- */
.app-hero {
    padding-top: 3rem;
    margin-bottom: 2rem;
}
.app-hero-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.app-hero-icon {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    border-radius: 22%;
    box-shadow: var(--shadow-lift);
}
.app-hero-text { flex: 1 1 18rem; }
.app-hero-text .eyebrow {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin: 0 0 0.4rem;
}
.app-hero-text h1 {
    margin: 0 0 0.6rem;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.app-hero-text .lead {
    margin: 0;
    color: var(--graphite);
    font-size: 1.05rem;
    max-width: 46rem;
}
.app-hero-text .role {
    display: inline-block;
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--accent-soft);
    color: color-mix(in srgb, var(--accent-text) 58%, var(--ink));
    margin-top: 0.5rem;
}

.app-screenshot {
    margin: 2rem 0 3rem;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.9375rem;
}
.app-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bildschirmfotos in hell und dunkel (M1, 22.08.2026).
   Beide Bilder stehen im Markup, hier wird umgeblendet — ein `<picture>` mit
   `prefers-color-scheme` kennt nur den System-Zustand und wuerde den
   Umschalter der Seite uebergehen. Die drei Zustaende sind dieselben wie beim
   uebrigen Erscheinungsbild: automatisch, hell, dunkel. */
.app-screenshot .shot-dunkel { display: none; }
.app-screenshot .shot-hell { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .app-screenshot .shot-hell { display: none; }
    :root:not([data-theme="light"]) .app-screenshot .shot-dunkel { display: block; }
}

:root[data-theme="dark"] .app-screenshot .shot-hell { display: none; }
:root[data-theme="dark"] .app-screenshot .shot-dunkel { display: block; }
:root[data-theme="light"] .app-screenshot .shot-hell { display: block; }
:root[data-theme="light"] .app-screenshot .shot-dunkel { display: none; }

.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.feature-list li {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 1rem;
    /* „Rund-/Kalligrafie-/Muster-/Scatter-/Bürstenpinsel“ bricht sonst bei 375 px nicht. */
    overflow-wrap: anywhere;
}
.feature-list .num {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-text);
    line-height: 1.4;
}
.feature-list h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.feature-list p {
    margin: 0;
    color: var(--graphite);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.app-bundles {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-card);
}
.app-bundles h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 650;
}
.app-bundles .bundle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.app-bundles .bundle-list li {
    display: flex;
    align-items: center;
    /* Das Complete-Bundle zeigt zehn Symbole plus Text: in einer Zeile sind
       das 418 px und damit breiter als ein Telefon (N0, 02.09.2026). Ohne
       diesen Umbruch scrollten alle zehn App-Seiten bei 375 px waagerecht. */
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface-sunk);
    font-size: 0.9375rem;
}
.app-bundles .bundle-list li img {
    width: 22px;
    height: 22px;
}

.app-nav {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.app-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--graphite);
    text-decoration: none;
    font-size: 0.9375rem;
}
.app-nav a:hover { color: var(--ink); }
.app-nav .next { margin-left: auto; }

/* ---- Anpassung an schmale Fenster ---- */
@media (max-width: 900px) {
    .ptable { grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
    .pt-icon { width: 44px; height: 44px; }
}
@media (max-width: 720px) {
    :root { --gutter: 1.15rem; }
    header.site-header { flex-wrap: wrap; gap: 0.6rem; }
    /* Sechs Verweise plus zwei Schalter passen nicht in eine Zeile — sie
       umbrechen, statt die Seite waagerecht zu verschieben. */
    nav.site-nav {
        gap: 0.75rem 1rem;
        font-size: 0.875rem;
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }
    .ptable { grid-template-columns: repeat(2, 1fr); }
    .hero { padding-top: 3rem; }
    .section { margin-top: 3.5rem; }
    .app-entry { grid-template-columns: 1fr; gap: 0.85rem; padding: 1.25rem; }
    .app-entry .app-figure { flex-direction: row; align-items: center; gap: 0.6rem; justify-content: flex-start; }
    .feature-panel { padding: 1.6rem 1.25rem; }
    .app-hero-icon { width: 72px; height: 72px; }
    .app-hero-text h1 { font-size: 1.75rem; }
    .feature-list li { grid-template-columns: 1fr; gap: 0.35rem; }
    .feature-list .num { margin-bottom: 0.2rem; }
    .bundle-showcase { grid-template-columns: 1fr; max-width: 26rem; margin-left: auto; margin-right: auto; }
}
@media (max-width: 420px) {
    .ptable { grid-template-columns: repeat(2, 1fr); }
}

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

/* ---- Einwilligungsband (09.08.2026) ----
   Erscheint nur, wenn überhaupt eine Messkennung hinterlegt ist. Ablehnen
   steht zuerst und trägt dieselbe Größe und Gestalt wie Zustimmen (beide
   `button secondary`, Gate 6 W9) — eine versteckte oder blassere Ablehnung
   wäre keine freiwillige Einwilligung. */
.consent-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    max-width: 34rem;
    margin-left: auto;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-lift);
}
.consent-banner p { margin: 0 0 0.9rem; font-size: 0.875rem; color: var(--graphite); }
.consent-banner a { color: var(--accent-text); }
.consent-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.consent-actions .button { font-size: 0.875rem; padding: 0.5rem 1.1rem; }

/* Feldreihe für Formulare mit mehreren kurzen Angaben nebeneinander. */
.feld-reihe { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.feld-reihe > div { flex: 1; min-width: 11rem; }
.feld-reihe .text-input { margin-bottom: 0; }

/* ---- Hilfsklassen für Inline-Stile (K63) ---- */
.hint { font-size: 0.8125rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1-25 { margin-bottom: 1.25rem; }
.hstack {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.no-margin { margin: 0; }
.nowrap { white-space: nowrap; }
.centered-form { max-width: 24rem; margin: 0 auto 2rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-0-8 { margin-top: 0.8rem; }
.mt-1-5 { margin-top: 1.5rem; }
.mt-1-25 { margin-top: 1.25rem; }
.maxw-44 { max-width: 44rem; }
.list-graphite { margin: 0; padding-left: 1.2rem; color: var(--graphite); }
.hero-cta.centered { justify-content: center; }


/* ==================================================================
   Bundle-Landingpages (bundle-creative / bundle-office / bundle-complete)
   ------------------------------------------------------------------
   Konzept: docs/konzepte/LANDINGPAGES_BUNDLES.md

   Diese drei Seiten duerfen mehr Raum und mehr Rhythmus haben als die
   nuechternen App-Seiten — aber sie bleiben im selben Farbsystem. Sie
   holen sich nur eine Leitfarbe je Bundle (`--lp-accent`, gesetzt am
   `main`) und verwenden sonst dieselben Token wie der Rest der Site.

   Kein zweites Farbschema, kein eigener Dunkelmodus: Wer hier landet,
   soll dieselbe Seite sehen, nur lauter.
   ================================================================== */

.lp {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter) 6rem;
}

/* **Eine Leitfarbe je Seite, und sie traegt bis zum Kaufknopf.**
   Ein oranger Rahmen ueber einem indigofarbenen Knopf waeren zwei Akzente auf
   einer Seite. Die Suite-Farbe bleibt die Marke im Kopf und im Fuss; im
   Inhalt der Landingpage gilt die Farbe des Bundles. */
.lp .button {
    background: var(--lp-btn);
    border-color: var(--lp-btn);
    color: var(--accent-on);
}
.lp .button:hover { filter: brightness(0.92); background: var(--lp-btn); }
.lp .button.ghost {
    background: transparent;
    border-color: var(--hairline-strong);
    color: var(--ink);
}
.lp .button.ghost:hover { filter: none; border-color: var(--muted); }

/* --- Hero: geteilt, nicht mittig. Text links, laufendes Programm rechts. */
.lp-hero {
    display: grid;
    /* Text bekommt mehr Spalte als das Bild: Bei 5fr/6fr lief die
       Ueberschrift von Office auf drei Zeilen, und die Grenze sind zwei. */
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 3rem;
    align-items: center;
    padding: 4rem 0 3rem;
}
.lp-hero-text h1 {
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.022em;
    margin: 0 0 1rem;
    /* 24ch, gemessen: Bei 15ch liefen alle drei Ueberschriften auf drei
       Zeilen, bei 20ch noch die von Office. Zwei Zeilen sind die Grenze,
       daran haengt, ob der Kaufweg ohne Scrollen sichtbar bleibt. */
    max-width: 24ch;
}
.lp-hero-text .lead {
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
    max-width: 42ch;
}
.lp-hero-buy {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.lp-price .amount {
    font-size: 2rem;
    font-weight: 640;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.lp-hero-shot {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lift);
    background: var(--surface);
}
.lp-hero-shot img,
.lp-shot-wide img { width: 100%; height: auto; display: block; }

/* Hell/Dunkel wie bei den App-Seiten: beide Bilder liegen im Markup, das
   Stylesheet blendet um. Ein `<picture>` mit prefers-color-scheme wuerde
   den Schalter im Kopf uebergehen. */
.lp .shot-dunkel { display: none; }
.lp .shot-hell { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lp .shot-hell { display: none; }
    :root:not([data-theme="light"]) .lp .shot-dunkel { display: block; }
}
:root[data-theme="dark"] .lp .shot-hell { display: none; }
:root[data-theme="dark"] .lp .shot-dunkel { display: block; }
:root[data-theme="light"] .lp .shot-hell { display: block; }
:root[data-theme="light"] .lp .shot-dunkel { display: none; }

/* --- Der Schmerz: drei Aussagen, getrennt durch Linien statt Kacheln. */
.lp-pain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--hairline);
}
.lp-pain {
    padding: 1.75rem 1.5rem 0 0;
    border-right: 1px solid var(--hairline);
}
.lp-pain:last-child { border-right: 0; padding-right: 0; }
.lp-pain:not(:first-child) { padding-left: 1.5rem; }
.lp-pain h3 {
    font-size: 1.0625rem;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.lp-pain p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; margin: 0; }

/* --- Ablauf: vier Schritte als Band, jeder mit der Farbe seiner App. */
.lp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    counter-reset: lp-step;
}
.lp-steps li {
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--step-color, var(--lp-accent));
}
.lp-step-num {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--step-color, var(--lp-accent)) 60%, var(--ink));
    margin-bottom: 0.5rem;
}
.lp-steps h3 { font-size: 1rem; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.lp-steps p { color: var(--muted); font-size: 0.9063rem; line-height: 1.55; margin: 0 0 0.75rem; }
.lp-step-app {
    font-size: 0.8125rem;
    font-weight: 560;
    color: color-mix(in srgb, var(--step-color, var(--lp-accent)) 60%, var(--ink));
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.lp-step-app:hover { border-bottom-color: currentColor; }

/* --- Breites Bild: eine ruhige Pause zwischen zwei Textstrecken. */
.lp-shot-wide figure {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lift);
}

/* --- Was enthalten ist: Zeilen mit Elementkante, kein Kachelfeld. */
.lp-app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.lp-app {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas: "icon name" "icon use";
    column-gap: 0.875rem;
    row-gap: 0.15rem;
    align-items: center;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--app-color, var(--lp-accent));
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.lp-app:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.lp-app img { grid-area: icon; }
.lp-app-name { grid-area: name; font-weight: 600; letter-spacing: -0.01em; }
.lp-app-role {
    font-weight: 460;
    font-size: 0.8125rem;
    color: var(--muted);
    margin-left: 0.35rem;
}
.lp-app-use { grid-area: use; color: var(--muted); font-size: 0.875rem; line-height: 1.45; }

/* --- Preis: Text links, die Zahl rechts in Ruhe. */
.lp-price-block {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2.5rem;
    align-items: start;
}
.lp-price-text p { color: var(--muted); line-height: 1.65; margin: 0; max-width: 46ch; }
.lp-price-card {
    padding: 1.75rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--lp-accent);
    box-shadow: var(--shadow-card);
}
.lp-price-amount {
    display: block;
    font-size: 2.75rem;
    font-weight: 660;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.lp-price-note { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; margin: 0 0 1.25rem; }
.lp-price-vat { color: var(--muted); font-size: 0.75rem; line-height: 1.5; margin: 0.875rem 0 0; }

/* --- Zusagen: zwei Spalten, Linien statt Kacheln. */
.lp-promise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2rem;
}
.lp-promise { padding-top: 1rem; border-top: 1px solid var(--hairline); }
.lp-promise h3 { font-size: 0.9375rem; margin: 0 0 0.3rem; letter-spacing: -0.005em; }
.lp-promise p { color: var(--muted); font-size: 0.875rem; line-height: 1.55; margin: 0; }

/* --- Grenzen: der Abschnitt, den niemand sonst schreibt. */
.lp-limits {
    padding: 1.75rem;
    border-radius: 16px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-edge);
}
.lp-limits .section-title { margin-bottom: 0.75rem; color: var(--warn-text); }
.lp-limits p { color: var(--warn-text); line-height: 1.65; margin: 0; max-width: 62ch; }
.lp-limits-link { margin-top: 0.875rem !important; }
.lp-limits-link a { color: var(--warn-text); font-weight: 560; }

/* --- Abschluss. */
.lp-close {
    text-align: center;
    padding: 3.5rem 1.5rem;
    border-radius: 18px;
    background: var(--surface-sunk);
    border: 1px solid var(--hairline);
}
.lp-close h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}
.lp-close > p { color: var(--muted); max-width: 52ch; margin: 0 auto 1.75rem; line-height: 1.6; }
.lp-close-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.lp-switch { margin: 2rem 0 0; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.lp-switch a { color: var(--muted); font-size: 0.875rem; }
.lp-switch a:hover { color: var(--ink); }

/* --- Mobil: alles einspaltig, Linien wandern von rechts nach unten. */
@media (max-width: 900px) {
    .lp-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.5rem; }
    .lp-hero-text h1 { max-width: none; }
    .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-price-block { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
    .lp { padding-left: 1.25rem; padding-right: 1.25rem; }
    .lp-pain-grid { grid-template-columns: 1fr; }
    .lp-pain {
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
        padding: 1.25rem 0;
    }
    .lp-pain:not(:first-child) { padding-left: 0; }
    .lp-pain:last-child { border-bottom: 0; }
    .lp-steps { grid-template-columns: 1fr; }
    .lp-app-grid { grid-template-columns: 1fr; }
    .lp-promise-grid { grid-template-columns: 1fr; }
}

/* Bewegung nur, wo sie etwas sagt: die Karten heben sich beim Zeigen an.
   Wer Bewegung abbestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    .lp-app { transition: none; }
    .lp-app:hover { transform: none; }
}

/* Weg von der Preisuebersicht zur Landingpage des Bundles (23.08.2026). */
.bundle-more { margin: 1rem 0 0; }
.bundle-more a {
    font-size: 0.875rem;
    font-weight: 560;
    color: var(--accent-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.bundle-more a:hover { border-bottom-color: currentColor; }

/* ---- Motive: Bildmaterial als Grund, nicht als Aussage (09.09.2026) ----
   Vier Bilder liegen in `assets/motive/`. Sie stehen hinter dem Text, nicht
   neben ihm: eine Ebene aus einem Pseudo-Element, deckungsschwach und nach
   unten ausgeblendet. Die Deckung ist der einzige Stellwert: der Hero der
   Startseite folgt `--motiv-deckung`, die drei Bundle-Motive (Karte wie
   Landingpage) `--motiv-deckung-bundle`. Beide fallen im Dunkelmodus, weil
   dort schon wenig Helligkeit viel Unruhe macht.

   Kein `<img>` im Markup: Die Bilder tragen keine Information, die ein
   Screenreader vorlesen muesste. Deshalb Hintergrund, deshalb kein alt. */
:root {
    --motiv-deckung: 0.12;
    --motiv-deckung-bundle: 0.16;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --motiv-deckung: 0.10;
        --motiv-deckung-bundle: 0.14;
    }
}

:root[data-theme="dark"] {
    --motiv-deckung: 0.10;
    --motiv-deckung-bundle: 0.14;
}

:root[data-theme="light"] {
    --motiv-deckung: 0.12;
    --motiv-deckung-bundle: 0.16;
}

/* Startseite: die Werkstatt hinter der Ueberschrift. Die Ebene greift um
   die Innenabstaende von `main` herum, damit sie am Rand nicht als Kasten
   endet, bleibt aber innerhalb der Seitenbreite — eine 100vw-Ebene erzeugt
   auf schmalen Fenstern einen waagerechten Bildlauf. */
.hero { position: relative; }
.hero > * { position: relative; z-index: 1; }
.hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    background: url("/assets/motive/werkstatt.webp") center 28% / cover no-repeat;
    opacity: var(--motiv-deckung);
    /* Nach allen vier Seiten ausgeblendet: Ohne die Ellipse endet das Bild
       an der Innenkante von `main` als sichtbarer grauer Kasten. */
    -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
    pointer-events: none;
}

/* Bundle-Karten der Preisuebersicht: jedes Bundle traegt sein eigenes
   Motiv, angehaengt an das `data-sku`, das ohnehin im Markup steht. */
.bundle[data-sku="annexcreate-creative"] { --motiv: url("/assets/motive/creative.webp"); }
/* Complete traegt ein dunkles Motiv: bei gleicher Deckung wie die beiden
   hellen legt es einen sichtbaren Blaustich ueber die ganze Karte. */
.bundle[data-sku="annexcreate-complete"] {
    --motiv: url("/assets/motive/complete.webp");
    --motiv-deckung-bundle: 0.10;
}
.bundle[data-sku="annexcreate-office"] { --motiv: url("/assets/motive/office.webp"); }

.bundle[data-sku] { position: relative; }
.bundle[data-sku] .bundle-body { position: relative; z-index: 1; }
.bundle[data-sku]::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: var(--motiv) center / cover no-repeat;
    opacity: var(--motiv-deckung-bundle);
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
    mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
    pointer-events: none;
}

/* Landingpage eines Bundles: dasselbe Motiv hinter dem Hero. Welches,
   sagt `--lp-motiv` am `<main>` — dort steht schon die Akzentfarbe. */
.lp-hero { position: relative; }
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    background: var(--lp-motiv) center / cover no-repeat;
    opacity: var(--motiv-deckung-bundle);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.5) 52%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.5) 52%, transparent 100%);
    pointer-events: none;
}

/* Gesonderte Bestätigung der Vorabfassung im Shop (§ 327h BGB, D101) */
.check-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    text-align: left;
    color: var(--graphite);
    cursor: pointer;
}
.check-row input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: var(--accent);
}

/* ---- Abo-Rechner (umstieg.html, Schleuse S6, D102) ----
   Eine Zeile je Abo-Kategorie: Häkchen, Betrag, Zeitraum, darunter der
   Hinweis auf den Beispielwert. Schmal: Häkchen über die volle Breite. */
.rechner-abos { margin-top: 0; }
.rechner-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem 9rem;
    gap: 0.35rem 0.85rem;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hairline);
}
.rechner-zeile .check-row { margin-top: 0; }
.rechner-betrag { display: flex; align-items: center; gap: 0.4rem; }
.rechner-beispiel { grid-column: 1 / -1; margin: 0; }
.rechner-kern { font-size: 1.25rem; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 0.4rem; }
.rechner-tabelle td:not(:first-child), .rechner-tabelle th:not(:first-child) { text-align: right; }
.rechner-wunsch { border: 0; padding: 0; margin: 0; min-width: 0; }
.rechner-wunsch .check-row { margin-top: 0.5rem; }
.hp-feld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
    .rechner-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rechner-zeile .check-row { grid-column: 1 / -1; }
    /* Die Paketspalte wiederholt nur den Einmalpreis aus dem Satz darüber —
       schmal fällt sie weg, damit „Unterschied" ohne Rollen sichtbar bleibt. */
    .rechner-tabelle th:nth-child(3), .rechner-tabelle td:nth-child(3) { display: none; }
    .rechner-tabelle th, .rechner-tabelle td { padding: 0.7rem 0.55rem; }
}


/* =====================================================================
   PO7 / PO8 (29.09.2026): Nachschärfen nach dem Website-Audit
   `docs/befunde/PO7_PO8_WEBSITE_AUDIT_2026-09-29.md`
   ===================================================================== */

/* Marken-Schrift auf Überschriften und Wortmarke (PO7-01). */
h1, h2, .wordmark, .lp-price-amount, .lp-price .amount { font-family: var(--font-brand); }
h1, h2 { text-wrap: balance; }

/* Leitfarbe der Landingpages: Knopf und Textfarbe je Modus mit Kontrast (PO8-02, PO8-03).
   Fläche = Leitfarbe abgedunkelt (hell) bzw. aufgehellt (dunkel); Text = Leitfarbe zur Schriftfarbe gemischt. */
.lp {
    --lp-btn: color-mix(in srgb, var(--lp-accent) 62%, black);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lp { --lp-btn: color-mix(in srgb, var(--lp-accent) 88%, white); }
}
:root[data-theme="dark"] .lp { --lp-btn: color-mix(in srgb, var(--lp-accent) 88%, white); }

/* Verpackung der Bundles (M4): transparente Box-Bilder, kein Rahmen, kein Schatten aus dem Stylesheet. */
.lp-box {
    display: block;
    width: 100%;
    max-width: 15rem;
    height: auto;
    margin: 0 auto 0.75rem;
}
.bundle-showcase img {
    border-radius: 0;
    box-shadow: none;
}

/* Rückmeldung beim Drücken auch für die Kopf-Schalter (PO7-05). */
.chip-button:active,
.lang-toggle:active { transform: translateY(1px); }

/* Schmale Fenster: der Kopf braucht sonst rund 136 px und bleibt beim Scrollen kleben (PO8-01).
   Er scrollt mit, die Ziele sind mindestens 44 px hoch (PO8-04), der Fuß ebenso (PO8-05). */
@media (max-width: 720px) {
    header.site-header { position: static; }
    nav.site-nav a { padding: 0.65rem 0.15rem; }
    nav.site-nav { gap: 0 0.9rem; }
    .chip-button { min-height: 44px; padding: 0.5rem 0.85rem; }
    footer.site-footer .footer-links a { display: inline-block; padding: 0.7rem 0; }
    footer.site-footer .footer-links { gap: 0 1.5rem; }
    /* Einwilligungsband: bleibt vollständig lesbar, nimmt aber weniger vom Bild (PO8-06). */
    .consent-banner { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; padding: 0.85rem 1rem; }
    .consent-banner p { font-size: 0.8125rem; line-height: 1.45; margin-bottom: 0.65rem; }
    .consent-actions .button { flex: 1 1 auto; padding: 0.6rem 0.9rem; }
}

/* Welle-1-Revision (05.10.2026): Beispielwerte als Beispiel kennzeichnen,
   Preistabelle mobil umbrechen statt abschneiden (W5, K1). */
.rechner-beispiel { font-style: italic; }
@media (max-width: 600px) {
    .preise-tabelle th, .preise-tabelle td { padding: 0.65rem 0.5rem; overflow-wrap: anywhere; }
    .preise-tabelle th { letter-spacing: 0.02em; }
}