/* =========================================================================
   Firmpass – Redesign 2026 (Design-System-Layer)
   Helles Grunddesign mit Dark Mode, Verlauf Magenta -> Violett -> Orange.
   Wird seitenweise ausgerollt; Seiten ohne Umstellung nutzen weiter styles.css.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
    /* Marke */
    --acc1: #e5188a;
    --acc2: #8b5cf6;
    --acc3: #f97316;

    /* Verlauf für Flächen (Text auf Weiß >= 4.5:1) und für Textclipping */
    --grad: linear-gradient(100deg, #e5188a, #8b5cf6 60%, #f97316 135%);
    --grad-cta: linear-gradient(100deg, #c8106f, #7c3aed 55%, #b8480a 135%);

    /* Flächen & Text */
    --bg: #fdfbfd;
    --bg2: #ffffff;
    --tint: #f9f2f8;
    --ink: #221b28;
    --muted: #6f6678;
    --line: #eee2ec;

    /* Akzentfarben für Text (kontraststark, >= 4.5:1)
       --acc-text wird pro Zone umgebogen (siehe .zone-page). --acc1-text
       bleibt immer Pink und ist dort gedacht, wo bewusst alle drei
       Markenfarben nebeneinander stehen sollen. */
    --acc1-text: #cc0f7b;
    --acc-text: #cc0f7b;
    --acc-text-hover: #7c3aed;
    --acc2-text: #7c3aed;

    --shadow: 0 14px 36px rgba(139, 92, 246, .10);
    --shadow-sm: 0 4px 14px rgba(139, 92, 246, .08);

    /* Layout */
    --container: 1140px;
    --container-narrow: 820px;
    --gutter: clamp(1rem, 4vw, 1.5rem);
    --radius-sm: 12px;
    --radius: 16px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* Typografie */
    --font-head: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Ebenen */
    --z-header: 100;
    --z-cookie: 1000;

    color-scheme: light;
}

html[data-theme="dark"] {
    --bg: #141018;
    --bg2: #1e1824;
    --tint: #251d2d;
    --ink: #f4eff7;
    --muted: #a99fb4;
    --line: #342b3e;

    --acc1-text: #f472b6;
    --acc-text: #f472b6;
    --acc-text-hover: #c4b5fd;
    --acc2-text: #c4b5fd;

    --shadow: 0 14px 36px rgba(0, 0, 0, .45);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);

    color-scheme: dark;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sprungziele nicht unter dem klebenden Header verstecken */
    scroll-padding-top: 5.5rem;
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color .3s ease, color .3s ease;
}

main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--acc-text);
    text-decoration: none;
}

a:hover {
    color: var(--acc-text-hover);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-head);
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
}

p {
    margin: 0;
}

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

/* Nur für Screenreader */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: calc(var(--z-cookie) + 1);
    background: var(--bg2);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    font-weight: 600;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 12px;
}

/* ---------- Layout-Helfer ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.container-narrow {
    max-width: var(--container-narrow);
}

.gradient-text {
    color: var(--acc-text);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .gradient-text {
        background: var(--grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .75rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--grad-cta);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    color: #fff;
    box-shadow: var(--shadow);
}

/* Dezenter Lichtreflex, der in Ruhe über den Haupt-CTA wandert. Der Sheen liegt
   in einem ::after mit overflow:hidden, damit er die Pillenform nicht verlässt;
   `pointer-events: none` hält den Klickbereich unverändert. Bei reduzierter
   Bewegung stoppt die Animation über den globalen Motion-Block. */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 38%,
            rgba(255, 255, 255, .42) 50%,
            transparent 62%);
    transform: translateX(-120%);
    animation: btn-shimmer 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btn-shimmer {
    0% {
        transform: translateX(-120%);
    }

    /* Der Reflex läuft einmal durch und pausiert dann den Rest des Zyklus. */
    35%,
    100% {
        transform: translateX(120%);
    }
}

.btn-ghost {
    background: var(--bg2);
    color: var(--ink);
    border-color: var(--line);
}

.btn-ghost:hover {
    color: var(--ink);
    border-color: var(--acc2);
}

.btn-on-grad {
    background: #fff;
    color: #b30d6c;
}

.btn-on-grad:hover {
    color: #7c3aed;
}

.btn-on-grad-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .75);
}

.btn-on-grad-outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

.btn-sm {
    min-height: 40px;
    padding: .55rem 1.15rem;
    font-size: .875rem;
}

/* ---------- Header / Navigation ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
    .site-header {
        background: color-mix(in srgb, var(--bg) 82%, transparent);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
}

.site-nav {
    max-width: var(--container);
    margin: 0 auto;
    padding: .75rem var(--gutter);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.1875rem;
    letter-spacing: .18em;
    margin-right: auto;
    white-space: nowrap;
}

.brand:hover {
    opacity: .85;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--acc-text);
}

.nav-links a[aria-current="page"] {
    color: var(--acc-text);
    font-weight: 600;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.theme-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--bg2);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.theme-toggle:hover {
    border-color: var(--acc2);
    color: var(--acc-text);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

html[data-theme="dark"] .theme-toggle .icon-moon,
html:not([data-theme="dark"]) .theme-toggle .icon-sun {
    display: none;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--bg2);
    color: var(--ink);
    cursor: pointer;
}

.nav-toggle svg {
    width: 20px;
    height: 20px;
}

.nav-toggle[aria-expanded="true"] .icon-menu,
.nav-toggle:not([aria-expanded="true"]) .icon-close {
    display: none;
}

@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav-links {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem var(--gutter) 1rem;
        background: var(--bg2);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        display: none;
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-links a {
        display: flex;
        width: 100%;
        padding: .25rem 0;
        border-bottom: 1px solid var(--line);
        font-size: 1rem;
    }

    .nav-links li:last-child a {
        border-bottom: 0;
    }

    /* Kopf-CTA wandert ins Menü */
    .nav-actions .btn-primary {
        display: none;
    }

    .nav-links .nav-cta {
        margin-top: .75rem;
    }

    .nav-links .nav-cta a {
        width: 100%;
        border-bottom: 0;
        color: #fff;
    }
}

@media (min-width: 901px) {
    .nav-links .nav-cta {
        display: none;
    }
}

/* ---------- Hero (Seitenkopf) ---------- */
.page-hero {
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 20% -10%, rgba(229, 24, 138, .12), transparent 60%),
        radial-gradient(800px 400px at 85% 0%, rgba(139, 92, 246, .12), transparent 60%);
    pointer-events: none;
}

.page-hero-inner {
    position: relative;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
}

.page-hero h1 {
    font-size: clamp(2rem, 6vw, 2.875rem);
    font-weight: 800;
    margin-bottom: .5rem;
}

.page-hero p {
    font-size: clamp(1rem, 2.4vw, 1.09375rem);
    color: var(--muted);
    line-height: 1.6;
    max-width: 60ch;
    margin-inline: auto;
}

/* ---------- FAQ ---------- */
.faq-section {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 1.5rem) var(--gutter) clamp(3rem, 8vw, 4.5rem);
}

.faq-group {
    margin-bottom: clamp(1.75rem, 5vw, 2.25rem);
}

.faq-group:last-child {
    margin-bottom: 0;
}

.faq-group-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .875rem;
}

.faq-list {
    display: grid;
    gap: .75rem;
}

.faq-item {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color .2s ease;
}

.faq-item[open],
.faq-item:hover {
    border-color: color-mix(in srgb, var(--acc2) 35%, var(--line));
}

.faq-item summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius);
}

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

.faq-item summary:hover {
    color: var(--acc-text);
}

.faq-chevron {
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: var(--muted);
    transition: transform .25s ease, color .2s ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--acc-text);
}

.faq-answer {
    padding: 0 1.375rem 1.375rem;
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.7;
}

.faq-answer p + p {
    margin-top: .75rem;
}

.faq-answer a {
    color: var(--acc-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-answer a:hover,
.faq-answer a:focus-visible {
    color: var(--acc-text-hover);
}

/* Weiterführender Hinweis unter einer FAQ-Gruppe */
.faq-more {
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.7;
}

.faq-more a {
    color: var(--acc-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-more a:hover,
.faq-more a:focus-visible {
    color: var(--acc-text-hover);
}

/* Sanftes Aufklappen, wo unterstützt – sonst schaltet <details> hart um */
@supports (interpolate-size: allow-keywords) {
    html {
        interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .28s ease, content-visibility .28s allow-discrete;
    }

    .faq-item[open]::details-content {
        block-size: auto;
    }
}

/* ---------- FAQ-Seite: Themenspalte + farbige Themenbloecke ----------
   Nur faq.html (die FAQ-Bloecke der Unterseiten nutzen weiter .faq-section).
   Kopf und Fragen teilen sich eine Flaeche (wie .blog-top / .contact-top),
   links laeuft eine mitscrollende Themenliste mit, rechts stehen die Bloecke.
   Jeder Block traegt eine Markenfarbe (--faq-c / --faq-c-text); der
   Datenschutz-Block ist zugleich das dunkle Band der Seite (Prinzip 3) und
   deshalb als dunkle Flaeche statt als Vollbreiten-Band ausgefuehrt – im
   zweispaltigen Raster gibt es keine Vollbreite. */
.faq-top {
    background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 90%);
    padding-block: clamp(1.75rem, 3.5vw, 2.5rem) 0;
}

.faq-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem 2rem;
}

.faq-head h1 {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.12;
    margin: 0;
}

.faq-head-note {
    margin: 0 0 .3rem;
    color: var(--muted);
    font-size: .92rem;
}

.faq-head-note a {
    font-weight: 600;
    color: var(--acc-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-head-note a:hover,
.faq-head-note a:focus-visible {
    color: var(--acc-text-hover);
}

.faq-body {
    padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3rem);
}

.faq-layout {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

/* Leitfarbe je Thema. Pink und Violett kommen aus den nicht zonenabhaengigen
   Tokens, damit die Seitenzone (Orange) sie nicht umfaerbt. */
.faq-c-1 {
    --faq-c: var(--acc1);
    --faq-c-text: var(--acc1-text);
}

.faq-c-2 {
    --faq-c: var(--acc3);
    --faq-c-text: color-mix(in srgb, var(--acc3) 72%, var(--ink));
}

.faq-c-3 {
    --faq-c: #2c1b45;
    --faq-c-text: #2c1b45;
}

.faq-c-4 {
    --faq-c: var(--acc2);
    --faq-c-text: var(--acc2-text);
}

/* Das dunkle Plum des Datenschutz-Themas verschwindet im dunklen Theme. */
html[data-theme="dark"] .faq-c-3 {
    --faq-c: #a78bfa;
    --faq-c-text: #c4b5fd;
}

/* ---------- Themenspalte ---------- */
.faq-topics {
    position: sticky;
    top: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.faq-topics-title {
    margin: 0 0 .6rem;
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.faq-topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 9px;
    border-left: 3px solid var(--faq-c, var(--acc1));
    color: var(--ink);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.faq-topic:hover,
.faq-topic:focus-visible {
    background: var(--tint);
    color: var(--faq-c-text, var(--acc-text));
}

.faq-topic-count {
    flex: none;
    font-size: .75rem;
    color: var(--muted);
}

.faq-topics-card {
    margin-top: 1.1rem;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
}

.faq-topics-card b {
    font-size: .86rem;
}

.faq-topics-card p {
    margin: .3rem 0 .7rem;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
}

.faq-topics-card .btn {
    width: 100%;
}

/* ---------- Themenbloecke ---------- */
.faq-blocks {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 3vw, 2.5rem);
}

.faq-block {
    scroll-margin-top: 5.5rem;
}

.faq-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .7rem;
    margin-bottom: .9rem;
}

.faq-block-num {
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--faq-c-text, var(--acc-text));
}

.faq-block-head h2 {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.25rem;
    margin: 0;
}

.faq-block-note {
    margin-left: auto;
    font-size: .78rem;
    color: var(--muted);
}

/* Der Farbstrich markiert den geoeffneten Eintrag, nicht dauerhaft alle. */
.faq-block .faq-item {
    border-left: 3px solid transparent;
}

.faq-block .faq-item:hover {
    border-color: color-mix(in srgb, var(--faq-c, var(--acc2)) 38%, var(--line));
    border-left-color: transparent;
}

.faq-block .faq-item[open] {
    border-color: color-mix(in srgb, var(--faq-c, var(--acc2)) 38%, var(--line));
    border-left-color: var(--faq-c, var(--acc2));
}

.faq-block .faq-item summary:hover,
.faq-block .faq-item[open] .faq-chevron {
    color: var(--faq-c-text, var(--acc-text));
}

/* ---------- Dunkler Block (Datenschutz) ---------- */
.faq-block-dark {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, #2c1b45 0%, #41112e 90%);
    border-radius: 22px;
    padding: clamp(1.4rem, 2.5vw, 2rem);
}

.faq-block-dark::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .35), transparent 70%);
    pointer-events: none;
}

.faq-block-dark > * {
    position: relative;
}

.faq-block-dark .faq-block-num {
    color: #c4b5fd;
}

.faq-block-dark .faq-block-head h2 {
    color: #f4eff7;
}

.faq-block-dark .faq-block-note {
    color: #b3a6bf;
}

.faq-block-dark .faq-item {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .13);
    border-left-color: transparent;
    box-shadow: none;
    color: #f4eff7;
}

.faq-block-dark .faq-item summary {
    color: #f4eff7;
}

.faq-block-dark .faq-item:hover {
    border-color: rgba(167, 139, 250, .45);
    border-left-color: transparent;
}

.faq-block-dark .faq-item[open] {
    border-color: rgba(167, 139, 250, .45);
    border-left-color: #a78bfa;
}

.faq-block-dark .faq-item summary:hover,
.faq-block-dark .faq-item[open] .faq-chevron {
    color: #c4b5fd;
}

.faq-block-dark .faq-chevron {
    color: #a99fb4;
}

.faq-block-dark .faq-answer {
    color: #b3a6bf;
}

.faq-block-dark .faq-answer a {
    color: #c4b5fd;
}

.faq-block-dark .faq-answer a:hover,
.faq-block-dark .faq-answer a:focus-visible {
    color: #ddd6fe;
}

/* ---------- Abschlussband ---------- */
.faq-contact {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.faq-contact-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
}

.faq-contact-inner b {
    font-size: .94rem;
}

.faq-contact-inner p {
    margin: .1rem 0 0;
    font-size: .86rem;
    color: var(--muted);
}

/* Ab hier stehen die Themen als 2x2-Raster ueber den Fragen: alle vier
   bleiben sichtbar, es muss nichts seitlich gewischt werden. */
@media (max-width: 900px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .faq-topics {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .faq-topics-title {
        display: none;
    }

    .faq-topic {
        gap: .45rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        background: var(--bg2);
        padding: .45rem .7rem;
        font-size: .84rem;
        line-height: 1.3;
    }

    .faq-topic::before {
        content: "";
        flex: none;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--faq-c, var(--acc1));
    }

    .faq-topics-card {
        display: none;
    }
}

/* ---------- CTA-Band ---------- */
.cta-band {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(3rem, 8vw, 5.5rem);
}

.cta-band-inner {
    border-radius: var(--radius-lg);
    background: var(--grad-cta);
    padding: clamp(2rem, 6vw, 3.25rem) clamp(1.25rem, 5vw, 3rem);
    text-align: center;
    color: #fff;
}

.cta-band-inner h2 {
    font-size: clamp(1.5rem, 4.5vw, 1.875rem);
    font-weight: 800;
    margin-bottom: .75rem;
}

.cta-band-inner p {
    font-size: 1rem;
    margin-bottom: 1.625rem;
    opacity: .95;
}

.cta-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--line);
    background: var(--bg2);
}

.site-footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.125rem;
    font-size: .875rem;
    color: var(--muted);
}

.site-footer .brand {
    margin-right: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
    margin-left: auto;
}

.footer-links a {
    color: var(--muted);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.footer-links a:hover {
    color: var(--acc-text);
}

@media (max-width: 640px) {
    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links {
        margin-left: 0;
    }
}

/* ---------- Cookie-Banner ---------- */
.cookie-banner {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-cookie);
    background: var(--bg2);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .12);
    padding-bottom: env(safe-area-inset-bottom);
}

.cookie-banner-content {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.cookie-banner-text {
    flex: 1 1 320px;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--muted);
}

.cookie-banner-actions {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
}

/* ---------- Abschnitte ---------- */
.section {
    padding-block: clamp(2.75rem, 7vw, 4.5rem);
}

.section-tight {
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.section-tint {
    background: var(--tint);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-head {
    max-width: 62ch;
    margin-bottom: clamp(1.75rem, 4vw, 2.25rem);
}

.section-head-center {
    margin-inline: auto;
    text-align: center;
}

.section-title {
    font-size: clamp(1.75rem, 4.5vw, 2.375rem);
    font-weight: 700;
    letter-spacing: -.03em;
    margin-bottom: .625rem;
}

.section-title-sm {
    font-size: clamp(1.5rem, 3.6vw, 2rem);
}

.section-sub {
    font-size: clamp(1rem, 2.2vw, 1.0625rem);
    color: var(--muted);
    line-height: 1.6;
}

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

.text-center {
    text-align: center;
}

.note {
    font-size: .875rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ---------- Startseiten-Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 12% -10%, rgba(229, 24, 138, .14), transparent 60%),
        radial-gradient(800px 500px at 88% 0%, rgba(139, 92, 246, .14), transparent 60%),
        radial-gradient(600px 400px at 60% 110%, rgba(249, 115, 22, .10), transparent 60%);
}

.hero-inner {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 5.25rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.125rem, 6.4vw, 3.375rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 1.125rem;
}

.hero-lead {
    font-size: clamp(1.0625rem, 2.6vw, 1.1875rem);
    line-height: 1.6;
    color: var(--muted);
    max-width: 46ch;
    margin-bottom: 1.875rem;
}

.hero-actions {
    display: flex;
    gap: .875rem;
    flex-wrap: wrap;
    align-items: center;
}

.hero-note {
    font-size: .875rem;
    color: var(--muted);
    margin: 1.125rem 0 1.375rem;
}

.chips {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .4375rem .8125rem;
}

.chip svg {
    width: 15px;
    height: 15px;
    color: var(--acc-text);
}

/* Telefon-Mockups */
.phones {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: clamp(340px, 46vw, 600px);
}

.phone {
    background: #221b28;
    border-radius: 42px;
    padding: 11px;
    box-shadow: 0 30px 60px rgba(34, 27, 40, .28);
}

.phone img {
    display: block;
    width: 100%;
    border-radius: 32px;
}

.phone-front {
    position: relative;
    width: clamp(170px, 24vw, 280px);
    transform: rotate(-3deg);
    z-index: 1;
}

.phone-back {
    position: absolute;
    right: 0;
    top: 5%;
    width: clamp(150px, 21vw, 250px);
    border-radius: 38px;
    padding: 10px;
    transform: rotate(6deg);
    opacity: .9;
    box-shadow: var(--shadow);
}

.phone-back img {
    border-radius: 30px;
}

@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-lead {
        max-width: none;
    }

    .hero-home .hero-visual {
        justify-content: flex-start;
    }

    .phones {
        order: -1;
        min-height: 0;
        padding-block: 1rem;
        max-width: 100%;
    }

    .phone-front {
        width: min(46vw, 220px);
        margin-left: -10%;
    }

    .phone-back {
        position: relative;
        right: auto;
        top: auto;
        width: min(40vw, 190px);
        transform: rotate(-5deg);
    }
}

/* ---------- Browser-Mockup ---------- */
.browser {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--line);
}

.browser-dot {
    width: 11px;
    height: 11px;
    border-radius: var(--radius-pill);
    display: inline-block;
}

.browser-dot:nth-child(1) {
    background: var(--acc1);
}

.browser-dot:nth-child(2) {
    background: var(--acc2);
}

.browser-dot:nth-child(3) {
    background: var(--acc3);
}

.browser-title {
    margin-left: .75rem;
    font-size: .8125rem;
    color: var(--muted);
}

.browser img {
    display: block;
    width: 100%;
    height: auto;
}

/* Kleine Panel-Karten unter dem Mockup */
.panel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.panel-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-card img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--line);
}

.panel-card-body {
    padding: .875rem 1rem;
}

.panel-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: .9375rem;
    font-weight: 700;
}

.panel-card p {
    font-size: .8125rem;
    color: var(--muted);
    line-height: 1.5;
    margin-top: .3125rem;
}

.badge-new {
    font-size: .6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--grad-cta);
    border-radius: var(--radius-pill);
    padding: .125rem .5rem;
}

/* Screenshots mit Hell/Dunkel-Varianten: folgen dem Theme-Toggle (data-theme),
   nicht der OS-Einstellung – deshalb CSS-Umschaltung statt <picture>. Die
   data-theme-Selektoren sind spezifischer als `.browser img` / `.panel-card img`,
   sodass jeweils genau eine Variante sichtbar bleibt. */
html[data-theme="dark"] img.shot-light {
    display: none;
}

html:not([data-theme="dark"]) img.shot-dark {
    display: none;
}

@media (max-width: 900px) {
    .panel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .panel-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Karten-Raster / Feature-Karten ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.card-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1000px) {
    .card-grid,
    .card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 660px) {
    .card-grid,
    .card-grid-4,
    .card-grid-2 {
        grid-template-columns: 1fr;
    }
}

.card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(1.25rem, 3vw, 1.625rem);
    box-shadow: var(--shadow);
}

.feature-card {
    position: relative;
    display: block;
    color: var(--ink);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.feature-card:hover {
    color: var(--ink);
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--acc2) 40%, var(--line));
}

.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 1rem;
}

.feature-icon svg {
    width: 22px;
    height: 22px;
}

.card h3,
.feature-card h2 {
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.card p {
    font-size: .90625rem;
    color: var(--muted);
    line-height: 1.6;
}

.card-arrow {
    display: inline-block;
    margin-top: .875rem;
    font-weight: 600;
    font-size: .90625rem;
    color: var(--acc-text);
}

/* ---------- Schritte ---------- */
.step-num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.625rem;
    line-height: 1;
    margin-bottom: .625rem;
}

/* ---------- Fähigkeiten-Raster (kompakte Feature-Übersicht) ----------
   Bewusst textarm: das Icon trägt die Aussage, darunter stehen nur Label und
   eine kurze Zeile. Auf schmalen Screens bleiben zwei Spalten stehen, damit
   das Raster als Raster lesbar bleibt und nicht zur Liste zerfällt. */
.cap-grid {
    display: grid;
    /* Feste 3 Spalten statt auto-fit: neun Kacheln ergeben so ein sauberes
       3×3-Raster ohne angebrochene letzte Zeile. */
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    max-width: 900px;
    margin-inline: auto;
    list-style: none;
    padding: 0;
}

.cap {
    display: grid;
    justify-items: center;
    gap: .1875rem;
    text-align: center;
    padding: 1.125rem .75rem 1rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cap:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--zone, var(--acc2)) 45%, var(--line));
    box-shadow: var(--shadow-sm);
}

.cap-icon {
    width: 42px;
    height: 42px;
    margin-bottom: .375rem;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--zone-text, var(--acc-text));
    background: color-mix(in srgb, var(--zone, var(--acc2)) 14%, transparent);
}

.cap-icon svg {
    width: 21px;
    height: 21px;
}

.cap b {
    font-family: var(--font-head);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.25;
}

.cap>span:last-child {
    font-size: .8125rem;
    color: var(--muted);
    line-height: 1.35;
}

@media (max-width: 620px) {
    .cap-grid {
        grid-template-columns: 1fr 1fr;
        gap: .625rem;
    }

    .cap {
        padding: .9375rem .5rem .875rem;
    }
}

/* WhatsApp-Grün in Fließtext/Überschrift – im Dunkelmodus aufgehellt,
   damit der Kontrast auf dunklem Grund erhalten bleibt. */
.wa-text {
    color: #128c7e;
}

html[data-theme="dark"] .wa-text {
    color: #4ee08f;
}

/* ---------- Vergleich Früher / Mit Firmpass ---------- */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 760px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }
}

.compare-card h3 {
    font-family: var(--font-head);
    font-size: 1.1875rem;
    font-weight: 700;
    margin-bottom: 1.125rem;
}

.compare-card-old h3 {
    color: var(--muted);
}

/* Verlaufsrahmen für die Positiv-Karte */
.card-gradient-border {
    border-color: transparent;
    background-image: linear-gradient(var(--bg2), var(--bg2)), var(--grad);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.compare-list {
    display: grid;
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.compare-list li {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    font-size: .96875rem;
    line-height: 1.5;
}

.compare-list svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: .125rem;
}

.compare-card-old .compare-list {
    color: var(--muted);
}

.compare-card-old .compare-list svg {
    color: var(--muted);
}

.compare-card-new .compare-list svg {
    color: var(--acc-text);
}

/* ---------- Preis-Karten ---------- */
/* ---------- Pakete: Kopf + Karten in EINER Sektion ----------
   Hero und Preiskarten teilen sich eine Flaeche, damit die Karten ohne
   Scrollen sichtbar sind. Der Verlauf laeuft von --tint nach --bg aus. */
.pricing-top {
    background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 78%);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}

.pricing-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.pricing-head h1 {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.12;
    margin: 0 0 .5rem;
}

.pricing-lead {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
    max-width: 34rem;
}

.pricing-trust {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
    color: var(--muted);
}

/* flex-start statt center: bei zweizeiligen Punkten steht der Haken sonst
   mittig zwischen den Zeilen statt an der ersten. */
.pricing-trust li {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    line-height: 1.45;
}

.pricing-trust svg {
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: .22rem;
    color: var(--acc2-text);
}

/* Mittlere Spalte etwas breiter – das empfohlene Paket bekommt Gewicht. */
.price-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

.price-card {
    display: flex;
    flex-direction: column;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.6rem 1.6rem 1.5rem;
    /* Die Randkarten sitzen tiefer, damit die empfohlene Karte herausragt. */
    margin-top: 1.4rem;
}

/* Empfohlene Karte: Verlaufsrahmen als 2px-Polster um eine innere Karte. */
.price-card-hl {
    position: relative;
    background: var(--grad);
    border-radius: 22px;
    padding: 2px;
    box-shadow: 0 26px 70px -14px rgba(229, 24, 138, .32);
}

.price-card-hl-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    background: var(--bg2);
    border-radius: 20px;
    padding: 1.9rem 1.7rem 1.6rem;
}

.price-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #fff;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .32rem .9rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.price-name {
    font-family: var(--font-head);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}

.price-card-hl .price-name {
    color: var(--acc-text);
}

.price-audience {
    margin: 0 0 1.1rem;
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.5;
}

.price-amount {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
}

.price-value {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -.02em;
}

.price-card-hl .price-value {
    font-size: 2.4rem;
}

.price-per {
    color: var(--muted);
    font-size: .9rem;
}

.price-sub {
    margin: .3rem 0 0;
    font-size: .82rem;
    color: var(--muted);
}

.price-rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 1.2rem 0;
}

.price-listlabel {
    margin: 0 0 .7rem;
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* flex:1 schiebt den Button aller Karten auf dieselbe Grundlinie. */
.price-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .9rem;
    line-height: 1.45;
    flex: 1;
}

.price-list li {
    display: flex;
    gap: .55rem;
}

.price-list svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: .18rem;
    color: var(--acc-text);
}

.price-more {
    color: var(--muted);
}

/* Leerraum in Icon-Breite, damit der Verweis in der Textspalte bleibt. */
.price-more::before {
    content: "";
    width: 15px;
    flex: none;
}

.price-more a {
    font-size: .85rem;
}

.price-card .btn,
.price-card-hl-inner .btn {
    margin-top: 1.3rem;
}

.price-note {
    margin: .6rem 0 0;
    text-align: center;
    font-size: .76rem;
    color: var(--muted);
}

/* Umschalter Jahres-/Monatspreis */
.price-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem 1.6rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
    font-size: .84rem;
    color: var(--muted);
}

.price-toggle-btn {
    font: 600 .84rem var(--font-body);
    cursor: pointer;
    border-radius: var(--radius-pill);
    padding: .28rem .85rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
}

.price-toggle-btn[aria-pressed="true"] {
    border-color: transparent;
    background: var(--grad);
    color: #fff;
}

@media (max-width: 1000px) {
    .price-grid {
        grid-template-columns: 1fr;
        max-width: 34rem;
        margin-inline: auto;
    }

    /* Gestapelt braucht keine Karte einen Versatz. */
    .price-card {
        margin-top: 0;
    }
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ---------- Großkunden-Band (Rahmenlizenz) ----------
   Liegt auf dem dunklen Band und ist damit der Kontrastanker der Seite. */
.enterprise-split {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.enterprise-split h2 {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    margin: 0 0 .7rem;
}

.enterprise-lead {
    line-height: 1.65;
    margin: 0 0 1.2rem;
    font-size: .95rem;
}

.enterprise-points {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .92rem;
}

.enterprise-points li {
    display: flex;
    gap: .6rem;
    line-height: 1.5;
}

.enterprise-points svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: .15rem;
}

@media (max-width: 860px) {
    .enterprise-split {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ---------- Vergleichstabelle ---------- */
.table-wrap {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow-x: auto;
}

.matrix {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .90625rem;
}

.matrix th,
.matrix td {
    padding: .6875rem 1.375rem;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.matrix th:first-child,
.matrix td:first-child {
    text-align: left;
}

.matrix thead th {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .875rem;
}

.matrix tbody tr:last-child td {
    border-bottom: 0;
}

.matrix .yes {
    color: var(--acc-text);
    font-weight: 700;
}

.matrix .no {
    color: var(--muted);
}

/* ---------- Blog: Aufmacher, Changelog-Zeilen, Ideen-Band ----------
   Ein Beitrag traegt die Seite (.blog-featured), alles Weitere laeuft als
   schmale Zeilenliste. Damit bleibt die Seite auch mit wenigen Beitraegen
   ruhig und wirkt nicht wie eine halbleere Kachelwand. Kopf und Inhalt
   teilen sich eine Flaeche (wie .pricing-top / .contact-top). */
.blog-top {
    background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 60%);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--gutter) clamp(2.25rem, 4vw, 3.25rem);
}

.blog-head {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.blog-head h1 {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.12;
    margin: 0;
}

/* Aufmacher: Text links, dunkle Ablauf-Skizze rechts – das dunkle Band der Seite. */
.blog-featured {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    color: var(--ink);
    box-shadow: 0 22px 60px -18px rgba(139, 92, 246, .16);
    margin-bottom: 1.25rem;
    transition: transform .18s ease, border-color .18s ease;
}

.blog-featured:hover {
    color: var(--ink);
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--zone, var(--acc2)) 45%, var(--line));
}

.blog-featured-body {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.2rem);
}

.blog-featured-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
    margin-bottom: 1.1rem;
}

.blog-featured h2 {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.22;
    margin: 0 0 .7rem;
    max-width: 26rem;
}

.blog-featured-body p {
    flex: 1;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.65;
    margin: 0 0 1.3rem;
    max-width: 28rem;
}

.blog-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--zone-text, var(--acc-text));
}

.blog-more svg {
    width: 15px;
    height: 15px;
    transition: transform .18s ease;
}

.blog-featured:hover .blog-more svg {
    transform: translateX(3px);
}

/* Chip: Standard traegt die Leitfarbe der Seite, -alt die Ratgeber-Farbe. */
.blog-chip {
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .75rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background: color-mix(in srgb, var(--zone, var(--acc1)) 12%, transparent);
    color: var(--zone-text, var(--acc-text));
}

.blog-chip-alt {
    background: color-mix(in srgb, var(--acc3) 14%, transparent);
    color: color-mix(in srgb, var(--acc3) 72%, var(--ink));
}

.blog-featured-date {
    font-size: .82rem;
    color: var(--muted);
}

.blog-featured-visual {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 15rem;
    background: linear-gradient(150deg, #2c1b45 0%, #41112e 85%);
}

.blog-featured-visual::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 24, 138, .35), transparent 70%);
}

.blog-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(72%, 17rem);
}

.blog-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .8rem;
    font-weight: 500;
    color: #e9e2f2;
}

.blog-step::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--dot, #34d399);
}

/* Die mittlere Stufe sitzt eingerueckt – das liest sich als Ablauf, nicht als Liste. */
.blog-step-2 {
    margin-left: 1.2rem;
}

/* Changelog: schmale Zeilen statt Karten – Datum, Art, Titel, Chevron. */
.changelog {
    margin-bottom: 1.25rem;
}

.changelog-label {
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 .8rem;
}

.changelog-list {
    display: flex;
    flex-direction: column;
}

.changelog-row {
    display: grid;
    grid-template-columns: 7rem auto 1fr auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem .9rem;
    color: var(--ink);
    border-top: 1px solid var(--line);
    border-left: 3px solid transparent;
    transition: background .18s ease, border-color .18s ease;
}

.changelog-row:last-child {
    border-bottom: 1px solid var(--line);
}

.changelog-row:hover {
    color: var(--ink);
    background: var(--tint);
    border-left-color: var(--zone, var(--acc1));
}

.changelog-date {
    font-size: .82rem;
    color: var(--muted);
}

.changelog-title {
    font-weight: 600;
    font-size: .95rem;
}

.changelog-row > svg {
    width: 15px;
    height: 15px;
    color: var(--muted);
}

/* Ideen-Band: schmaler Abbinder statt grosser CTA-Box. */
.idea-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.1rem 1.4rem;
}

.idea-band-text {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.idea-band-icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--zone, var(--acc2)) 13%, transparent);
    color: var(--zone-text, var(--acc2-text));
}

.idea-band-icon svg {
    width: 18px;
    height: 18px;
}

.idea-band b {
    font-size: .94rem;
}

.idea-band p {
    font-size: .86rem;
    color: var(--muted);
    margin: 0;
}

@media (max-width: 860px) {
    .blog-featured {
        grid-template-columns: 1fr;
    }

    .blog-featured h2,
    .blog-featured-body p {
        max-width: none;
    }

    .blog-featured-visual {
        min-height: 12rem;
        padding: 1.4rem 0;
    }
}

/* Schmale Displays: Datum und Art in eine Zeile, Titel darunter, Chevron weg. */
@media (max-width: 640px) {
    .changelog-row {
        grid-template-columns: auto 1fr;
        gap: .5rem .7rem;
        padding: .9rem .75rem;
    }

    /* Ohne justify-self zieht der Chip die 1fr-Spalte auf volle Breite. */
    .changelog-row .blog-chip {
        justify-self: start;
    }

    .changelog-title {
        grid-column: 1 / -1;
    }

    .changelog-row > svg {
        display: none;
    }

    .idea-band {
        padding: 1rem 1.1rem;
    }

    .idea-band .btn {
        width: 100%;
        justify-content: center;
    }
}

.cta-facts {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .90625rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cta-facts span {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.cta-facts svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 860px) {
    .cta-facts {
        justify-content: center;
    }
}

/* ---------- Formulare ---------- */
.form-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    /* Violetter Glow statt Grauschatten (Prinzip 5) */
    box-shadow: 0 26px 70px -14px rgba(139, 92, 246, .18);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .875rem;
}

@media (max-width: 560px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.field {
    margin-bottom: .875rem;
}

.field label {
    display: block;
    font-size: .84375rem;
    font-weight: 600;
    margin-bottom: .375rem;
}

.field .hint {
    font-size: .8125rem;
    color: var(--muted);
    margin-top: .375rem;
}

.label-optional {
    font-weight: 400;
    color: var(--muted);
}

.input,
.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: .75rem .875rem;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.field textarea {
    resize: vertical;
    min-height: 7rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--acc2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc2) 25%, transparent);
    outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted);
    opacity: .8;
}

.check-row {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    font-size: .875rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 1rem;
}

/* Fehlerzustände (von script.js gesetzt) */
.field input.error,
.field select.error,
.field textarea.error {
    border-color: #b91c1c;
}

html[data-theme="dark"] .field input.error,
html[data-theme="dark"] .field select.error,
html[data-theme="dark"] .field textarea.error {
    border-color: #fca5a5;
}

.error-message {
    display: none;
    font-size: .8125rem;
    font-weight: 500;
    color: #b91c1c;
    margin-top: .375rem;
}

html[data-theme="dark"] .error-message {
    color: #fca5a5;
}

/* Ladezustand des Absende-Buttons */
.btn-loader {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: var(--radius-pill);
    animation: fp-spin .7s linear infinite;
}

form.submitting .btn-loader {
    display: inline-block;
}

form.submitting .btn-text {
    opacity: .75;
}

form.submitting button[type="submit"] {
    pointer-events: none;
    opacity: .8;
}

@keyframes fp-spin {
    to {
        transform: rotate(360deg);
    }
}

.recaptcha-wrap {
    margin-bottom: .25rem;
}

/* Hinweis, solange der Spam-Schutz noch nicht geladen ist (siehe initLazyRecaptcha) */
.recaptcha-hint {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
}

.check-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin-top: .125rem;
    flex: none;
    accent-color: var(--acc2);
}

.form-success {
    text-align: center;
    padding: 2.5rem .625rem;
}

.form-success-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--grad-cta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 0 auto 1.125rem;
}

.form-success-icon svg {
    width: 26px;
    height: 26px;
}

.form-success h3 {
    font-family: var(--font-head);
    font-size: 1.375rem;
    margin-bottom: .625rem;
}

.form-success p {
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.6;
}

/* ---------- Kontakt-Layout ----------
   Ansprache links, Formular rechts – beide auf einer getoenten Flaeche,
   damit das Formular ohne Scrollen im Bild steht. */
.contact-top {
    background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 70%);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--gutter) clamp(2.25rem, 4vw, 3.25rem);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-grid h1 {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.12;
    margin: 0 0 .6rem;
}

.contact-lead {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.6rem;
    max-width: 30rem;
}

/* Argumente ohne Karte: getoentes Icon-Quadrat traegt die Zonenfarbe. */
.contact-points {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0 0 1.9rem;
    padding: 0;
}

.contact-point {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}

.contact-point-icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--point) 13%, transparent);
    color: var(--point-text);
}

.contact-point-icon svg {
    width: 17px;
    height: 17px;
}

.contact-point b {
    display: block;
    font-size: .94rem;
}

.contact-point p {
    font-size: .87rem;
    color: var(--muted);
    line-height: 1.55;
    margin: .1rem 0 0;
}

/* Je Argument eine der drei Markenfarben – gibt der Spalte Rhythmus.
   Bewusst --acc1-text statt --acc-text: letzteres ist auf dieser Seite
   (zone-2) auf Violett umgebogen, damit waeren zwei Punkte gleichfarbig. */
.contact-point-1 {
    --point: var(--acc1);
    --point-text: var(--acc1-text);
}

.contact-point-2 {
    --point: var(--acc2);
    --point-text: var(--acc2-text);
}

.contact-point-3 {
    --point: var(--acc3);
    --point-text: color-mix(in srgb, var(--acc3) 72%, var(--ink));
}

.contact-next {
    border-top: 1px solid var(--line);
    padding-top: 1.4rem;
}

.contact-next-label {
    margin: 0 0 .9rem;
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.contact-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    font-size: .88rem;
    color: var(--muted);
    counter-reset: contact-step;
}

.contact-steps li {
    display: flex;
    gap: .7rem;
    align-items: baseline;
    line-height: 1.5;
}

.contact-steps li::before {
    counter-increment: contact-step;
    content: counter(contact-step);
    flex: none;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 700;
    color: var(--acc-text);
}

.contact-mail {
    margin: 1.4rem 0 0;
    font-size: .88rem;
    color: var(--muted);
}

.contact-mail a {
    font-weight: 600;
}

/* Kopf der Formularkarte: Titel und Antwortversprechen auf einer Zeile. */
.form-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;
}

.form-card-head h2 {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.3rem;
}

.form-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--acc2-text);
    white-space: nowrap;
}

.form-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acc2);
}

.form-card-sub {
    color: var(--muted);
    font-size: .88rem;
    margin: 0 0 1.4rem;
}

.form-legal {
    margin: .75rem 0 0;
    font-size: .76rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}

/* Erfolgszustand: ersetzt das Formular in derselben Karte. */
.form-success {
    text-align: center;
    padding: 2.5rem 1rem;
}

.form-success-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--grad);
    display: inline-grid;
    place-items: center;
    margin-bottom: 1rem;
    color: #fff;
}

.form-success-icon svg {
    width: 26px;
    height: 26px;
}

.form-success h2 {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.3rem;
    margin: 0 0 .5rem;
}

.form-success p {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0 0 1.4rem;
}

/* ---------- Fließtext-Seiten (Rechtliches, Artikel) ---------- */
.prose {
    max-width: 72ch;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink);
}

.prose-wide {
    max-width: none;
}

.prose h2 {
    font-size: clamp(1.375rem, 3.2vw, 1.75rem);
    font-weight: 700;
    margin: 2.25rem 0 .75rem;
}

.prose h3 {
    font-size: clamp(1.125rem, 2.6vw, 1.25rem);
    font-weight: 700;
    margin: 1.75rem 0 .5rem;
}

.prose h2:first-child,
.prose h3:first-child {
    margin-top: 0;
}

.prose p,
.prose ul,
.prose ol {
    margin-bottom: 1rem;
    color: var(--muted);
}

.prose strong {
    color: var(--ink);
}

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

.prose li {
    margin-bottom: .375rem;
}

.prose li::marker {
    color: var(--acc-text);
}

.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--acc2);
    background: var(--tint);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--muted);
    font-style: italic;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: .9375rem;
}

.prose th,
.prose td {
    border: 1px solid var(--line);
    padding: .625rem .75rem;
    text-align: left;
    vertical-align: top;
}

.prose th {
    background: var(--tint);
    font-weight: 600;
}

.prose-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    font-size: .875rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li::after {
    content: "/";
    margin-left: .375rem;
    color: var(--line);
}

.breadcrumb li:last-child::after {
    content: none;
}

/* ---------- Downloads ---------- */
.doc-list {
    display: grid;
    gap: .75rem;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
    color: var(--ink);
    transition: border-color .18s ease, transform .18s ease;
}

.doc-item:hover {
    color: var(--ink);
    border-color: var(--acc2);
    transform: translateY(-2px);
}

.doc-item svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--acc-text);
}

.doc-item strong {
    display: block;
    font-family: var(--font-head);
    font-size: .9375rem;
}

.doc-item span {
    font-size: .84375rem;
    color: var(--muted);
}

/* ---------- Toasts (Formular-Rückmeldung) ---------- */
.toast-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: calc(var(--z-cookie) + 1);
    display: grid;
    gap: .5rem;
    max-width: min(24rem, calc(100vw - 2rem));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-left: 4px solid var(--acc2);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: .875rem 1rem;
    font-size: .90625rem;
    color: var(--ink);
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .25s ease, transform .25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-message {
    flex: 1;
}

.toast-icon {
    font-weight: 700;
}

.toast-close {
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .125rem;
}

.toast-close:hover {
    color: var(--ink);
}

.toast-success {
    border-left-color: #15803d;
}

.toast-success .toast-icon {
    color: #15803d;
}

.toast-error {
    border-left-color: #b91c1c;
}

.toast-error .toast-icon {
    color: #b91c1c;
}

html[data-theme="dark"] .toast-success .toast-icon {
    color: #86efac;
}

html[data-theme="dark"] .toast-error .toast-icon {
    color: #fca5a5;
}

/* =========================================================================
   Bestandsseiten
   Rechtliches, Feature-Unterseiten, Blog-Artikel, Umfrage und Checkout
   behalten ihre Inhalts-Markup-Klassen und werden hier auf die neuen
   Tokens und Komponenten gehoben.
   ========================================================================= */

/* ---------- Seitenkopf ---------- */
.legal-page,
.feature-page-content,
.umfrage-section,
.checkout-page,
.wiki-section,
.wiki-article-content {
    padding-block: clamp(2rem, 6vw, 3.5rem);
}

.legal-page,
.umfrage-hero,
.feature-page-hero,
.wiki-article-hero,
.checkout-page {
    position: relative;
}

.feature-page-hero,
.umfrage-hero,
.wiki-article-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 3vw, 2rem);
}

.feature-page-hero::before,
.umfrage-hero::before,
.wiki-article-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(800px 400px at 20% -10%, rgba(229, 24, 138, .12), transparent 60%),
        radial-gradient(800px 400px at 85% 0%, rgba(139, 92, 246, .12), transparent 60%);
}

.feature-page-hero > .container,
.umfrage-hero > .container,
.wiki-article-hero > .container {
    position: relative;
}

.page-title {
    font-family: var(--font-head);
    font-size: clamp(1.875rem, 5.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-bottom: .75rem;
    /* Lange deutsche Komposita („Datenschutzerklärung", „Widerrufsbelehrung") sprengen
       auf 320-px-Geräten sonst das Layout und erzeugen horizontales Scrollen. */
    hyphens: auto;
    overflow-wrap: break-word;
}

.page-subtitle,
.legal-intro,
.documents-intro,
.feature-page-subtitle {
    font-size: clamp(1rem, 2.3vw, 1.0625rem);
    color: var(--muted);
    line-height: 1.65;
    max-width: 68ch;
    margin-bottom: 1.5rem;
}

/* Auf den Modul-/Feature-Seiten ist der Untertitel das letzte Element im
   Seitenkopf. Sein Standard-Abstand addierte sich zum Padding des Kopfes und
   dem der folgenden Section – zusammen ein deutlich zu grosses Loch.
   Deshalb: kein Abstand unter dem Untertitel und knappes Padding an beiden
   aneinandergrenzenden Containern. */
.feature-page-hero .feature-page-subtitle {
    margin-bottom: 0;
}

.feature-page-hero {
    padding-bottom: clamp(.75rem, 1.5vw, 1rem);
}

.feature-page-hero + .feature-page-content,
.feature-page-hero + .section {
    padding-top: clamp(1rem, 2vw, 1.25rem);
}

.legal-meta {
    font-size: .875rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.legal-header {
    margin-bottom: 1.5rem;
}

/* ---------- Rechtstexte ---------- */
.legal-content {
    max-width: 72ch;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--muted);
}

.legal-content h2 {
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: 700;
    color: var(--ink);
    margin: 2.25rem 0 .75rem;
}

.legal-content h3 {
    font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
    font-weight: 700;
    color: var(--ink);
    margin: 1.75rem 0 .5rem;
}

.legal-content h2:first-child,
.legal-content h3:first-child {
    margin-top: 0;
}

.legal-content p,
.legal-content ul,
.legal-content ol {
    margin-bottom: 1rem;
}

.legal-content strong {
    color: var(--ink);
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.25rem;
}

.legal-content li {
    margin-bottom: .375rem;
}

.legal-content li::marker {
    color: var(--acc-text);
}

/* Kleingedrucktes am Ende eines Abschnitts (Rechtsgrundlage, Speicherdauer).
   Bewusst ohne `opacity`: das Abdunkeln drückt den Kontrast bei 14px unter die
   4,5:1-Grenze (WCAG AA). Die Abgrenzung leistet allein die kleinere Schrift. */
.legal-content .legal-basis {
    font-size: .875rem;
    color: var(--muted);
}

.legal-content a {
    color: var(--acc-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
    padding: .1em .35em;
    border-radius: .3rem;
    background: var(--tint);
    color: var(--ink);
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: .9375rem;
}

.legal-content th,
.legal-content td {
    border: 1px solid var(--line);
    padding: .625rem .75rem;
    text-align: left;
    vertical-align: top;
}

.legal-content th {
    background: var(--tint);
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Dokumenten-Download ---------- */
.documents-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.doc-card {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.375rem 1.5rem;
    box-shadow: var(--shadow);
    color: var(--ink);
    transition: transform .18s ease, border-color .18s ease;
}

.doc-card:hover {
    color: var(--ink);
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--acc2) 40%, var(--line));
}

.doc-card-title {
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 700;
}

.doc-card-desc {
    font-size: .90625rem;
    color: var(--muted);
    line-height: 1.55;
}

.doc-card-link {
    margin-top: .375rem;
    font-weight: 600;
    font-size: .90625rem;
    color: var(--acc-text);
}

/* ---------- Feature-Unterseiten ---------- */
.back-to-features {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .90625rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .5rem;
}

.back-to-features:hover {
    color: var(--acc-text);
}

.feature-page-hero-content {
    display: flex;
    gap: 1.125rem;
    align-items: flex-start;
}

.feature-page-icon {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 16px;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.feature-page-title {
    font-family: var(--font-head);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-bottom: .625rem;
}

.feature-detail-grid {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
}

.feature-layout-split,
.feature-layout-match-height {
    grid-template-columns: 1.05fr .95fr;
}

.feature-layout-text-cols {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
    .feature-layout-split,
    .feature-layout-match-height,
    .feature-layout-text-cols {
        grid-template-columns: 1fr;
    }
}

.feature-text-stack {
    display: grid;
    gap: clamp(1.25rem, 3vw, 1.75rem);
}

.feature-detail-text {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    box-shadow: var(--shadow);
}

.feature-detail-text h2 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    margin-bottom: .625rem;
}

.feature-detail-text h3 {
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .625rem;
}

.feature-detail-text p {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: .875rem;
}

.feature-detail-text p:last-child {
    margin-bottom: 0;
}

.feature-benefits-list {
    list-style: none;
    display: grid;
    gap: .625rem;
    margin: 0;
    padding: 0;
}

.feature-benefits-list li {
    position: relative;
    padding-left: 1.75rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--muted);
}

.feature-benefits-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3125rem;
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--acc-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.feature-benefits-list li strong {
    color: var(--ink);
}

/* Interne Querverlinkung ("Passt dazu") – Pfeil statt Haken, damit sich
   Navigations- und Nutzenlisten optisch unterscheiden. */
.related-links {
    list-style: none;
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
}

.related-links li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .9375rem;
    line-height: 1.55;
}

.related-links li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .375rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--acc-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.related-links a {
    color: var(--acc-text);
    text-decoration: none;
}

.related-links a:hover,
.related-links a:focus-visible {
    color: var(--acc-text-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.feature-detail-screenshots {
    display: grid;
    gap: 1rem;
    justify-items: center;
}

/* App-Screenshots bringen den Geräterahmen bereits mit */
.feature-screenshot-container {
    max-width: 100%;
}

.feature-screenshot {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 32rem;
    height: auto;
    filter: drop-shadow(0 22px 44px rgba(34, 27, 40, .28));
}

html[data-theme="dark"] .feature-screenshot {
    filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .55));
}

/* Browser-/Desktop-Screenshots als Karte rahmen */
.feature-screenshot-container:has(> .feature-screenshot[src*="browser"]),
.feature-screenshot-container:has(> .feature-screenshot[src*="desktop"]) {
    max-width: none;
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 10px;
    box-shadow: var(--shadow);
}

.feature-screenshot-container:has(> .feature-screenshot[src*="browser"]) .feature-screenshot,
.feature-screenshot-container:has(> .feature-screenshot[src*="desktop"]) .feature-screenshot {
    border-radius: 12px;
    filter: none;
}

/* ---------- Große CTA-Box (Bestandsseiten) ---------- */
.feature-page-cta,
.package-cta {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 4.5rem);
}

.cta-box-large {
    border-radius: var(--radius-lg);
    background: var(--grad-cta);
    color: #fff;
    padding: clamp(2rem, 6vw, 3.25rem) clamp(1.25rem, 5vw, 3rem);
    text-align: center;
}

.cta-title {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 4.5vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}

.cta-text {
    font-size: 1rem;
    opacity: .95;
    margin-bottom: 1.625rem;
}

.cta-benefits {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: .90625rem;
    font-weight: 600;
}

.cta-buttons {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons in der Verlaufs-Box umfärben */
.cta-box-large .btn-primary {
    background: #fff;
    color: #b30d6c;
}

.cta-box-large .btn-primary:hover {
    color: #7c3aed;
}

.cta-box-large .btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .75);
}

.cta-box-large .btn-outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

.back-link {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .875rem;
    color: var(--muted);
}

/* Alt-Button-Varianten auf das neue System mappen */
.btn-outline {
    background: var(--bg2);
    color: var(--ink);
    border-color: var(--line);
}

.btn-outline:hover {
    color: var(--ink);
    border-color: var(--acc2);
}

.btn-large {
    min-height: 50px;
    padding: .875rem 1.75rem;
    font-size: 1rem;
}

/* ---------- Blog-Artikel ---------- */
.wiki-article-container,
.wiki-article-hero > .container {
    max-width: 46rem;
    margin: 0 auto;
}

.wiki-article-meta,
.wiki-meta-time {
    font-size: .875rem;
    color: var(--muted);
}

.wiki-article {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--muted);
}

.wiki-article h2 {
    font-size: clamp(1.375rem, 3.2vw, 1.75rem);
    font-weight: 700;
    color: var(--ink);
    margin: 2.25rem 0 .75rem;
}

.wiki-article h3 {
    font-size: clamp(1.125rem, 2.6vw, 1.25rem);
    font-weight: 700;
    color: var(--ink);
    margin: 1.75rem 0 .5rem;
}

.wiki-article p,
.wiki-article ul,
.wiki-article ol {
    margin-bottom: 1rem;
}

.wiki-article strong {
    color: var(--ink);
}

.wiki-article ul,
.wiki-article ol {
    padding-left: 1.25rem;
}

.wiki-article li {
    margin-bottom: .375rem;
}

.wiki-article li::marker {
    color: var(--acc-text);
}

.wiki-checklist,
.wiki-steps,
.wiki-faq {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(1.25rem, 3vw, 1.625rem);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.wiki-tip {
    background: var(--tint);
    border: 1px solid var(--line);
    border-left: 3px solid var(--acc2);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.125rem 1.375rem;
    margin-bottom: 1.5rem;
}

.blog-figure {
    margin: 1.5rem 0;
}

.blog-figure-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.blog-figure-caption {
    font-size: .84375rem;
    color: var(--muted);
    margin-top: .5rem;
    text-align: center;
}

/* ---------- Formulare der Bestandsseiten ---------- */
.form-group {
    margin-bottom: .875rem;
}

.form-group > label {
    display: block;
    font-size: .84375rem;
    font-weight: 600;
    margin-bottom: .375rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: .75rem .875rem;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-group textarea {
    resize: vertical;
    min-height: 7rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--acc2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc2) 25%, transparent);
    outline: none;
}

.form-section-title {
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.form-text-hint {
    font-size: .8125rem;
    color: var(--muted);
    margin-top: .375rem;
    line-height: 1.5;
}

.form-actions {
    margin-top: 1.25rem;
}

.checkbox-group,
.radio-group {
    display: grid;
    gap: .5rem;
    margin-bottom: 1.125rem;
}

.checkbox-label,
.radio-label {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--muted);
    cursor: pointer;
    min-height: 44px;
    padding-block: .375rem;
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: .125rem;
    accent-color: var(--acc2);
}

.checkbox-label:hover,
.radio-label:hover {
    color: var(--ink);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.full-width {
    grid-column: 1 / -1;
}

/* ---------- Umfrage ---------- */
.umfrage-kicker {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--grad-cta);
    border-radius: var(--radius-pill);
    padding: .25rem .75rem;
    margin-bottom: .875rem;
}

.umfrage-hero-meta {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
}

.umfrage-pill {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .4375rem .8125rem;
}

.umfrage-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
}

@media (max-width: 900px) {
    .umfrage-layout {
        grid-template-columns: 1fr;
    }
}

.umfrage-aside {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 5.5rem;
}

@media (max-width: 900px) {
    .umfrage-aside {
        position: static;
    }
}

.umfrage-aside-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.375rem 1.5rem;
    box-shadow: var(--shadow);
}

.umfrage-aside-card h2 {
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.umfrage-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding-left: 1.125rem;
    font-size: .90625rem;
    color: var(--muted);
    line-height: 1.55;
}

.umfrage-list li::marker {
    color: var(--acc-text);
}

.umfrage-form-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 2.125rem);
    box-shadow: var(--shadow);
}

.umfrage-form-header {
    margin-bottom: 1.5rem;
}

.umfrage-form-header h2 {
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.umfrage-form-header p {
    font-size: .9375rem;
    color: var(--muted);
    line-height: 1.6;
}

.umfrage-block {
    border: 0;
    border-top: 1px solid var(--line);
    padding: 1.5rem 0 0;
    margin: 0 0 1.5rem;
}

.umfrage-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.umfrage-legend {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 0;
}

.umfrage-step-badge {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--grad-cta);
    color: #fff;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.umfrage-question {
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.55;
    margin: 1.125rem 0 .625rem;
}

.umfrage-hint {
    font-size: .84375rem;
    color: var(--muted);
    margin-bottom: .875rem;
}

.umfrage-options-cards {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.umfrage-option-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .75rem .875rem;
    margin: 0;
    align-items: center;
    transition: border-color .18s ease, background-color .18s ease;
}

.umfrage-option-card:hover {
    border-color: var(--acc2);
}

.umfrage-option-card:has(input:checked) {
    border-color: var(--acc2);
    background: var(--tint);
    color: var(--ink);
}

/* ---------- Checkout ---------- */
.checkout-header {
    text-align: center;
    margin-bottom: 2rem;
}

.checkout-header .page-subtitle {
    margin-inline: auto;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
}

@media (max-width: 960px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }
}

.checkout-main {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 2.125rem);
    box-shadow: var(--shadow);
}

.checkout-progress {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.75rem;
}

.checkout-progress-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .84375rem;
    color: var(--muted);
}

.progress-step-number {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
}

.checkout-progress-step.active .progress-step-number,
.checkout-progress-step.done .progress-step-number {
    background: var(--grad-cta);
    border-color: transparent;
    color: #fff;
}

.checkout-progress-step.active {
    color: var(--ink);
    font-weight: 600;
}

.checkout-progress-line {
    flex: 1;
    height: 2px;
    background: var(--line);
    border-radius: 2px;
}

.checkout-progress-line.done {
    background: var(--acc2);
}

@media (max-width: 620px) {
    .progress-step-label {
        display: none;
    }
}

.checkout-step-panel {
    display: none;
}

.checkout-step-panel.active {
    display: block;
}

.checkout-package-cards {
    display: grid;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.checkout-pkg-card {
    position: relative;
    display: grid;
    gap: .25rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.125rem;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.checkout-pkg-card:hover {
    border-color: var(--acc2);
}

.checkout-pkg-card:has(input:checked) {
    border-color: var(--acc2);
    background: var(--tint);
}

.checkout-pkg-badge {
    position: absolute;
    top: -.75rem;
    right: 1rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: var(--grad-cta);
    border-radius: var(--radius-pill);
    padding: .1875rem .75rem;
}

.checkout-pkg-name {
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 700;
}

.checkout-pkg-price {
    font-weight: 600;
    color: var(--acc-text);
}

.checkout-pkg-desc {
    font-size: .875rem;
    color: var(--muted);
    line-height: 1.5;
}

.checkout-step-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.checkout-checkboxes {
    margin-bottom: .5rem;
}

.checkout-sidebar-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .875rem 1.125rem;
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.toggle-price {
    color: var(--acc-text);
}

@media (max-width: 960px) {
    .checkout-sidebar-toggle {
        display: flex;
    }

    .checkout-sidebar {
        display: none;
    }

    .checkout-sidebar:not(.collapsed) {
        display: grid;
    }
}

.checkout-sidebar {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 5.5rem;
}

@media (max-width: 960px) {
    .checkout-sidebar {
        position: static;
    }
}

.order-summary-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.375rem 1.5rem;
    box-shadow: var(--shadow);
}

.order-summary-title {
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.order-summary-pkg {
    display: grid;
    gap: .25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.order-summary-pkg-name {
    font-weight: 600;
}

.order-summary-pkg-price {
    color: var(--acc-text);
    font-weight: 600;
}

.order-summary-features {
    list-style: none;
    display: grid;
    gap: .375rem;
    margin: 1rem 0;
    padding: 0;
    font-size: .875rem;
    color: var(--muted);
}

.order-summary-features li {
    position: relative;
    padding-left: 1.25rem;
}

.order-summary-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--acc-text);
    font-weight: 700;
}

.order-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .9375rem;
}

.order-summary-total strong {
    font-family: var(--font-head);
    font-size: 1.25rem;
}

.checkout-trust {
    display: grid;
    gap: .625rem;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.25rem 1.375rem;
}

.checkout-trust-item {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    font-size: .875rem;
    color: var(--muted);
    line-height: 1.5;
}

.checkout-trust-icon svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--acc-text);
}

.checkout-testimonial {
    margin: 0;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--acc2);
    border-radius: 0 20px 20px 0;
    padding: 1.25rem 1.375rem;
    font-size: .9375rem;
    font-style: italic;
    color: var(--muted);
    line-height: 1.6;
}

.checkout-testimonial footer {
    margin-top: .625rem;
    font-style: normal;
    font-size: .84375rem;
}

/* Erfolgsanzeige nach dem Absenden */
.checkout-success-panel {
    display: none;
    text-align: center;
    padding: 2rem .625rem;
}

.checkout-success-panel.is-visible {
    display: block;
}

.checkout-success-burst {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-pill);
    background: var(--grad-cta);
    color: #fff;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.125rem;
}

.checkout-success-title {
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.checkout-success-steps {
    list-style: none;
    display: grid;
    gap: .625rem;
    margin: 0 auto 1.25rem;
    padding: 0;
    max-width: 22rem;
    text-align: left;
}

.checkout-success-step {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9375rem;
    color: var(--muted);
    opacity: .55;
}

.checkout-success-step.active,
.checkout-success-step.done {
    opacity: 1;
    color: var(--ink);
}

.checkout-step-icon {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: var(--radius-pill);
    border: 2px solid var(--line);
}

.checkout-success-step.active .checkout-step-icon {
    border-color: var(--acc2);
    border-top-color: transparent;
    animation: fp-spin .8s linear infinite;
}

.checkout-success-step.done .checkout-step-icon {
    background: var(--acc2);
    border-color: var(--acc2);
}

.checkout-success-done {
    font-size: .9375rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 44ch;
    margin: 0 auto;
}

/* ---------- Chat-Bühne (Feature-Seite Gruppenchat) ----------
   Bewusst als HTML/CSS statt als Screenshot: läuft dadurch in Hell und Dunkel
   ohne zweites Bild, veraltet nicht mit dem Panel-Redesign und kann Umfrage
   und Tipp-Anzeige vorführen. Eigener `chat-`-Namensraum, weil `.phone`,
   `.browser` und `.panel-card` oben schon für die Startseite belegt sind. */
.chat-stage {
    position: relative;
    max-width: 56.25rem;
    margin-inline: auto;
    isolation: isolate;
}

.chat-stage::before {
    content: "";
    position: absolute;
    inset: -8% -6% -14%;
    z-index: -1;
    background:
        radial-gradient(60% 55% at 22% 20%, rgba(229, 24, 138, .16), transparent 70%),
        radial-gradient(55% 50% at 82% 78%, rgba(249, 115, 22, .14), transparent 72%),
        radial-gradient(70% 60% at 60% 40%, rgba(139, 92, 246, .14), transparent 75%);
    filter: blur(6px);
}

/* Web-Panel */
.chat-panel {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
    max-width: 41.25rem;
}

.chat-winbar {
    display: flex;
    align-items: center;
    gap: .4375rem;
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--line);
    background: var(--tint);
}

.chat-winbar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
}

.chat-winbar span {
    margin-left: .625rem;
    font-size: .6875rem;
    color: var(--muted);
}

.chat-panel-body {
    display: grid;
    grid-template-columns: 11.625rem minmax(0, 1fr);
    min-height: 20.625rem;
}

.chat-sidebar {
    border-right: 1px solid var(--line);
    padding: .625rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.chat-sidebar h3 {
    font-family: var(--font-head);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 600;
    color: var(--muted);
    margin: .25rem .5rem .5rem;
}

.chat-sidebar h3 + h3 {
    margin-top: .6875rem;
}

.chat-kanal {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem .5rem;
    border-radius: 11px;
    font-size: .8125rem;
    color: var(--muted);
}

.chat-kanal-aktiv {
    background: var(--tint);
    color: var(--ink);
    font-weight: 600;
}

.chat-kanal > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-av {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: .625rem;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    background: var(--grad);
}

.chat-av-plain {
    background: var(--tint);
    color: var(--muted);
    border: 1px solid var(--line);
}

.chat-unread {
    margin-left: auto;
    flex: none;
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    border-radius: var(--radius-pill);
    background: var(--grad);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* Verlauf */
.chat-thread {
    padding: .875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6875rem;
}

.chat-daytag {
    align-self: center;
    font-size: .6875rem;
    color: var(--muted);
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .1875rem .625rem;
}

.chat-msg {
    display: flex;
    gap: .5rem;
    max-width: 88%;
    animation: chat-rise .6s cubic-bezier(.22, 1, .36, 1) both;
}

.chat-msg:nth-of-type(2) {
    animation-delay: .1s;
}

.chat-msg:nth-of-type(3) {
    animation-delay: .22s;
}

.chat-msg:nth-of-type(4) {
    animation-delay: .36s;
}

.chat-msg-own {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-bubble {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 16px 16px 16px 5px;
    padding: .5rem .75rem;
    font-size: .84375rem;
    line-height: 1.45;
    box-shadow: var(--shadow-sm);
}

.chat-msg-own .chat-bubble {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    border-radius: 16px 16px 5px 16px;
}

.chat-who {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--acc-text);
    margin-bottom: .0625rem;
}

.chat-time {
    font-size: .6875rem;
    color: var(--muted);
    margin-left: .3125rem;
}

.chat-msg-own .chat-time {
    color: rgba(255, 255, 255, .78);
}

.chat-reaction {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .375rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .125rem .5rem;
    font-size: .75rem;
    color: var(--muted);
    box-shadow: var(--shadow-sm);
}

.chat-reaction b {
    color: var(--ink);
    font-weight: 600;
}

/* Umfrage */
.chat-poll {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .6875rem .8125rem;
    box-shadow: var(--shadow-sm);
    min-width: 15.3125rem;
}

.chat-poll-kicker {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--acc2-text);
    margin-bottom: .375rem;
}

.chat-poll h4 {
    font-family: var(--font-head);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
}

.chat-poll-opt {
    margin-bottom: .4375rem;
    font-size: .78125rem;
}

.chat-poll-opt > div {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .1875rem;
}

.chat-poll-opt b {
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.chat-bar {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--tint);
    overflow: hidden;
}

.chat-bar i {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--grad);
    transform-origin: left;
    animation: chat-grow 1.1s cubic-bezier(.22, 1, .36, 1) .5s both;
}

.chat-poll-foot {
    font-size: .6875rem;
    color: var(--muted);
    margin: .5rem 0 0;
}

/* Handy */
.chat-phone {
    position: absolute;
    right: -.5rem;
    bottom: -2.25rem;
    width: 15.375rem;
    padding: 9px;
    border-radius: 34px;
    background: var(--bg2);
    border: 1px solid var(--line);
    box-shadow: 0 26px 60px rgba(88, 28, 135, .22), var(--shadow);
}

html[data-theme="dark"] .chat-phone {
    box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
}

.chat-phone-screen {
    border-radius: 26px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 20.125rem;
}

.chat-phone-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6875rem .75rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg2);
}

.chat-phone-head b {
    display: block;
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: -.01em;
}

.chat-phone-head small {
    display: block;
    font-size: .6875rem;
    color: var(--muted);
}

.chat-phone .chat-thread {
    flex: 1;
    padding: .6875rem .6875rem 0;
    gap: .5rem;
}

.chat-phone .chat-msg {
    max-width: 92%;
}

.chat-phone .chat-bubble {
    font-size: .78125rem;
    padding: .4375rem .625rem;
}

/* Tipp-Anzeige */
.chat-typing {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .6875rem;
    color: var(--muted);
}

.chat-dots {
    display: inline-flex;
    gap: 3px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .3125rem .4375rem;
}

.chat-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--acc2);
    animation: chat-hop 1.25s ease-in-out infinite;
}

.chat-dots i:nth-child(2) {
    animation-delay: .16s;
}

.chat-dots i:nth-child(3) {
    animation-delay: .32s;
}

.chat-composer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem .5rem .5625rem;
    padding: .4375rem .4375rem .4375rem .8125rem;
    border: 1px solid var(--line);
    background: var(--bg2);
    border-radius: var(--radius-pill);
}

.chat-composer span {
    flex: 1;
    font-size: .75rem;
    color: var(--muted);
}

.chat-send {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--grad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

@keyframes chat-rise {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes chat-grow {
    from {
        transform: scaleX(.06);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes chat-hop {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .45;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* Unter 52rem trägt das Panel nichts mehr – nur das Handy zeigen. */
@media (max-width: 52rem) {
    .chat-stage {
        max-width: 26.25rem;
    }

    .chat-panel {
        display: none;
    }

    .chat-phone {
        position: static;
        width: 100%;
        max-width: 20rem;
        margin-inline: auto;
    }
}

/* =========================================================================
   Startseite 2026 – „Kein Einheitsbrei" (siehe DESIGN_KONZEPT.md)
   Farbzonen statt Dauerverlauf, nummerierte Kicker, dunkles Ablauf-Band,
   nachgebaute App-Flaechen statt Screenshots, dezente Scroll-Reveals.
   ========================================================================= */

/* ---------- Tokens der nachgebauten App-Flaechen ----------
   Spiegeln die Panel-/App-Oberflaeche (shadcn-Tokens des Web-Panels), damit
   Mini-UIs auf der Seite genauso aussehen wie das echte Produkt. */
:root {
    --app-bg: hsl(300, 33.3%, 98.8%);
    --app-card: #ffffff;
    --app-fg: hsl(272.2, 19.4%, 13.1%);
    --app-muted-fg: hsl(270, 8.1%, 43.5%);
    --app-border: hsl(310, 26%, 91%);
    --app-input: hsl(309, 22%, 82%);
    --app-hover: hsl(308.6, 36.8%, 96.3%);
    --app-primary: hsl(326.6, 81%, 46%);
    --app-success: hsl(158, 64%, 40%);
    --app-warning: hsl(24.6, 95%, 38%);
}

html[data-theme="dark"] {
    --app-bg: hsl(270, 20%, 7.8%);
    --app-card: hsl(270, 20%, 11.8%);
    --app-fg: hsl(277.5, 33.3%, 95.3%);
    --app-muted-fg: hsl(268.6, 12.3%, 66.5%);
    --app-border: hsl(268.4, 18.1%, 20.6%);
    --app-input: hsl(268, 16%, 32%);
    --app-hover: hsl(270, 21.6%, 14.5%);
    --app-primary: hsl(326.6, 81%, 46%);
    --app-success: hsl(158, 60%, 50%);
    --app-warning: hsl(24.6, 95%, 53.1%);
}

/* ---------- Farbzonen ----------
   Jeder Themenbereich traegt EINE Leitfarbe: Kicker, Icon, Akzentstrich und
   der farbige Glow hinter der Mini-UI kommen aus denselben drei Tokens. */
.zone-1 {
    --zone: var(--acc1);
    --zone-text: var(--acc-text);
    --zone-glow: rgba(229, 24, 138, .30);
}

.zone-2 {
    --zone: var(--acc2);
    --zone-text: var(--acc2-text);
    --zone-glow: rgba(139, 92, 246, .30);
}

.zone-3 {
    --zone: var(--acc3);
    --zone-text: color-mix(in srgb, var(--acc3) 72%, var(--ink));
    --zone-glow: rgba(249, 115, 22, .28);
}

/* Inline-SVG-Sprite (z. B. der Demo-QR-Code): liegt einmal im Dokument und
   wird per <use> mehrfach eingebunden – currentColor bleibt dabei erhalten. */
.fp-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Scroll-Reveal ----------
   Nur aktiv, wenn JS laeuft (html.fp-js aus theme-init.js) – ohne JS bleibt
   alles sichtbar. redesign.js setzt .is-in, sobald das Element im Bild ist. */
.fp-js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
}

.fp-js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}

.fp-js [data-reveal="0.12"].is-in {
    transition-delay: .12s;
}

.fp-js [data-reveal="0.15"].is-in {
    transition-delay: .15s;
}

.fp-js [data-reveal="0.24"].is-in {
    transition-delay: .24s;
}

.fp-js [data-reveal="0.36"].is-in {
    transition-delay: .36s;
}

@keyframes fpFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fpPop {
    0% {
        opacity: 0;
        transform: scale(.6);
    }

    70% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fpBar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .fp-js [data-reveal],
    .fp-js [data-reveal].is-in {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Startseiten-Hero (2026) ----------
   Beide Spalten beginnen oben auf derselben Hoehe. Die rechte Spalte wird
   auf die Hoehe der linken gestreckt; das Telefon sitzt oben, die Kachel
   "Und 10 weitere Bausteine" unten buendig. Damit die Spalte nicht hoeher
   wird als die linke, ist das Telefon verkleinert (siehe --appphone-zoom). */
.hero-home .hero-inner {
    padding-block: clamp(2.25rem, 5vw, 3.25rem);
    align-items: stretch;
}

/* Verkleinertes Telefon – nur im zweispaltigen Hero.
   Der Nachbau besteht aus festen Pixelmassen (274 x 577). Er wird deshalb
   in voller Groesse gerendert und anschliessend als Ganzes skaliert:
   `transform: scale` bildet ihn massstabsgetreu ab, waehrend `zoom` jeden
   Einzelwert neu runden wuerde und den Nachbau dabei verzerrt.
   Der Rahmen aussen traegt die verkleinerten Masse, damit die Spalte
   tatsaechlich kuerzer wird – transform allein aendert das Layout nicht.
   Die Skalierung liegt bewusst in einer min-width-Query: unterhalb davon
   ist die Seite einspaltig und das Telefon behaelt seine volle Groesse. */
@media (min-width: 901px) {
    .hero-home .appphone-fit {
        --appphone-scale: .53;
        width: calc(274px * var(--appphone-scale));
        height: calc(577px * var(--appphone-scale));
    }

    .hero-home .appphone {
        width: 274px;
        transform: scale(var(--appphone-scale));
        transform-origin: top left;
    }
}

.hero-kicker {
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acc-text);
    margin-bottom: 1rem;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.4rem;
    margin: 1.4rem 0 0;
    padding: 1.1rem 0 0;
    list-style: none;
    border-top: 1px solid var(--line);
    font-size: .85rem;
    color: var(--muted);
}

.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.hero-trust svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--acc2-text);
}

.hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
    justify-content: space-between;
    min-width: 0;
}

/* Nachgebautes Telefon – in beiden Themes dunkel, wie die echte App. */
.appphone-fit {
    width: min(274px, 100%);
    animation: fpFadeUp .8s cubic-bezier(.22, 1, .36, 1) both;
}

.appphone {
    width: 100%;
    background: #39323f;
    border-radius: 48px;
    padding: 9px;
    box-shadow: var(--shadow);
}

.appphone-screen {
    background: #141018;
    border-radius: 40px;
    overflow: hidden;
    color: #f4eff7;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.appphone-top {
    background: linear-gradient(115deg, #41112e 0%, #2c1b45 70%, #241a3e 100%);
    padding: 10px 20px 14px;
}

.appphone-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
}

.appphone-status > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.appphone-notch {
    width: 74px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: #000;
}

.appphone-battery {
    background: #22c55e;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: #08130b;
}

.appphone-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.appphone-brand .brand {
    font-size: 15px;
    letter-spacing: .28em;
}

.appphone-body {
    padding: 14px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.appphone-card {
    background: #1e1824;
    border-radius: 20px;
    padding: 14px 16px;
    animation: fpFadeUp .7s cubic-bezier(.22, 1, .36, 1) .35s both;
}

.appphone-card-qr {
    padding: 16px 16px 18px;
    animation-delay: .2s;
}

.appphone-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.appphone-card-sub {
    font-size: 11px;
    color: #a99fb4;
    margin: 3px 0 14px;
}

.appphone-qr {
    display: grid;
    place-items: center;
    animation: fpPop .8s cubic-bezier(.22, 1, .36, 1) .5s both;
}

.appphone-qr svg {
    width: 118px;
    height: 118px;
    color: #ffffff;
}

.appphone-streak {
    text-align: center;
    font-size: 12px;
    margin-bottom: 12px;
}

.appphone-streak span {
    color: #a99fb4;
}

.appphone-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appphone-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 600;
}

.appphone-bar-head span {
    font-size: 11px;
    font-weight: 400;
    color: #a99fb4;
}

.appphone-bar {
    height: 5px;
    border-radius: var(--radius-pill);
    background: #342b3e;
    overflow: hidden;
}

.appphone-bar i {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--acc1);
    transform-origin: left;
    animation: fpBar .9s cubic-bezier(.22, 1, .36, 1) .7s both;
}

.appphone-bars > div:nth-child(2) .appphone-bar i {
    animation-delay: .85s;
}

.appphone-bars > div:nth-child(3) .appphone-bar i {
    animation-delay: 1s;
}

.appphone-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 16px;
    margin-top: 2px;
    color: #6f6678;
}

.appphone-nav-active {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #2a2331;
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #f4eff7;
}

/* Kleine Uebersicht „und 10 weitere Bausteine" unter dem Telefon */
.hero-more {
    width: 100%;
    max-width: 330px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: .8rem 1rem;
    box-shadow: var(--shadow-sm);
    animation: fpFadeUp .7s cubic-bezier(.22, 1, .36, 1) .55s both;
}

.hero-more-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
}

.hero-more-head a {
    text-decoration: none;
    white-space: nowrap;
}

.hero-more-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
    text-align: center;
}

.hero-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-size: .64rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.hero-more-item span:first-child {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad);
    display: grid;
    place-items: center;
}

.hero-more-item svg {
    width: 13px;
    height: 13px;
    color: #fff;
}

.hero-more-rest span:first-child {
    background: var(--tint);
    border: 1px dashed var(--muted);
    font: 700 11px var(--font-head);
    color: var(--ink);
}

.hero-more-rest {
    color: var(--muted);
}

/* ---------- Abschnittsrhythmus ----------
   Luft entsteht ueber Tint-Wechsel und das dunkle Band, nicht ueber Riesen-
   Paddings – deshalb ein knapperer Abstand als .section. */
.section-compact {
    padding-block: clamp(2rem, 4vw, 3.25rem);
}

/* ---------- Feature-Spotlights ---------- */
.spotlights {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}

.spotlight {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2.5rem;
    align-items: center;
}

/* Mini-UI links, Text rechts – bricht die Wiederholung auf */
.spotlight-flip {
    grid-template-columns: 1.05fr 1fr;
}

.spotlight-flip .miniui {
    order: -1;
}

.spot-title {
    font-family: var(--font-head);
    font-size: clamp(1.3rem, 3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
}

/* „Neu“ steht jetzt direkt neben dem Titel – optisch an der Grundlinie
   ausrichten, damit die Pille nicht an der Oberkante klebt. */
.spot-title .badge-new {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -.1em;
    margin-left: .45rem;
}

.spot-text {
    margin: 0 0 1rem;
    color: var(--muted);
    line-height: 1.65;
}

.spot-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.spot-list li {
    display: flex;
    gap: .55rem;
    font-size: .92rem;
}

.spot-list svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    color: var(--acc2-text);
}

.spot-link {
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
}

/* ---------- Nachgebaute App-Flaechen (Mini-UIs) ----------
   Rand + Schatten sind fuer genau diese Flaechen reserviert; der Schatten ist
   ein farbiger Glow in der Zonenfarbe statt eines grauen Standardschattens. */
.miniui {
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 26px 70px -14px var(--zone-glow);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--app-fg);
    min-width: 0;
}

.mu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border);
    font-size: 14px;
    font-weight: 700;
}

.mu-head-meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--app-muted-fg);
    white-space: nowrap;
}

/* Anwesenheit per QR-Code */
.mu-scan {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding-top: 14px;
    align-items: center;
}

.mu-qr {
    width: 120px;
    height: 120px;
    border-radius: 14px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    display: grid;
    place-items: center;
}

.mu-qr svg {
    width: 84px;
    height: 84px;
    color: var(--app-fg);
}

.mu-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.mu-row {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 8px 11px;
    font-size: 13px;
}

.mu-row-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--app-muted-fg);
    white-space: nowrap;
}

.mu-check {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: var(--app-success);
    display: grid;
    place-items: center;
}

.mu-check svg {
    width: 12px;
    height: 12px;
    color: #fff;
}

.mu-row-open {
    border-style: dashed;
    border-color: var(--app-input);
    color: var(--app-muted-fg);
}

.mu-row-open .mu-check {
    background: none;
    border: 1.5px dashed var(--app-input);
}

/* Gruppenchat */
.mu-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border);
}

.mu-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: var(--grad);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.mu-chat-title {
    font-weight: 600;
    font-size: 14px;
}

.mu-chat-sub {
    font-size: 12px;
    color: var(--app-muted-fg);
}

.mu-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
}

.mu-bubble {
    max-width: 78%;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: 14px 14px 14px 4px;
    padding: 9px 12px;
    font-size: 13px;
}

.mu-bubble b {
    color: var(--app-primary);
    font-size: 12px;
}

.mu-bubble-own {
    align-self: flex-end;
    background: var(--grad);
    border: 0;
    border-radius: 14px 14px 4px 14px;
    color: #fff;
}

.mu-poll {
    max-width: 86%;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 11px 13px;
    font-size: 13px;
}

.mu-poll-opts {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mu-poll-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 3px;
}

.mu-poll-label span:last-child {
    color: var(--app-muted-fg);
}

.mu-poll-bar {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--app-hover);
    overflow: hidden;
}

.mu-poll-bar i {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--grad);
}

.mu-poll-bar-muted i {
    background: var(--app-input);
}

.mu-reactions {
    display: flex;
    gap: 6px;
}

.mu-reactions span {
    background: var(--app-hover);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    font-size: 12px;
}

/* Formulare */
.mu-status {
    font-size: 11px;
    font-weight: 600;
    color: var(--app-success);
    border: 1px solid var(--app-success);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    white-space: nowrap;
}

.mu-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
}

.mu-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

.mu-field svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--app-muted-fg);
}

.mu-field-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--app-muted-fg);
    text-align: right;
}

.mu-field-cond {
    border-style: dashed;
    border-color: var(--app-primary);
}

.mu-field-cond svg,
.mu-field-cond .mu-field-meta {
    color: var(--app-primary);
    font-weight: 600;
}

/* Web-Panel-Dashboard im Browser-Mockup */
.mu-dash {
    background: var(--app-bg);
    padding: 18px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--app-fg);
}

.mu-dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.mu-dash-hello {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
}

.mu-dash-sub {
    font-size: 12px;
    color: var(--app-muted-fg);
}

.mu-dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--app-primary);
    color: #fff;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.mu-dash-btn svg {
    width: 13px;
    height: 13px;
}

.mu-dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.mu-dash-kpi {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 12px 14px;
}

.mu-dash-kpi-label {
    font-size: 12px;
    color: var(--app-muted-fg);
    margin-bottom: 4px;
}

.mu-dash-kpi-value {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.02em;
}

.mu-dash-kpi-bar {
    height: 5px;
    margin-top: 6px;
    border-radius: var(--radius-pill);
    background: var(--app-hover);
    overflow: hidden;
}

.mu-dash-kpi-bar i {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--app-primary);
}

.mu-dash-list {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 12px 14px;
}

.mu-dash-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.mu-dash-list-head span {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-primary);
}

.mu-dash-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--app-border);
    font-size: 13px;
}

.mu-dash-item b {
    font-weight: 600;
}

.mu-dash-item-place {
    font-size: 11.5px;
    color: var(--app-muted-fg);
}

.mu-dash-item-date {
    font-size: 12px;
    color: var(--app-muted-fg);
    white-space: nowrap;
}

/* ---------- Kompakte Feature-Spalten („Und ausserdem") ---------- */
.zone-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.zone-bar {
    height: 3px;
    width: 44px;
    border-radius: var(--radius-pill);
    background: var(--zone);
    margin-bottom: .85rem;
}

.zone-kicker {
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--zone-text);
    margin-bottom: .9rem;
}

.zone-items {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.zone-item {
    display: flex;
    gap: .7rem;
}

.zone-item > svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    color: var(--zone-text);
}

.zone-item-title {
    display: inline-block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.zone-item-title:hover,
.zone-item-title:focus-visible {
    color: var(--zone-text);
    text-decoration: underline;
}

.zone-item p {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
}

.zone-progress {
    margin-top: .2rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg2);
    padding: .8rem .9rem;
}

.zone-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: .4rem;
}

.zone-progress-head b {
    color: var(--ink);
}

.zone-progress-bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--line);
    overflow: hidden;
}

.zone-progress-bar i {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--grad);
}

/* ---------- Web-Panel-Abschnitt ---------- */
.panel-split {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 2.5rem;
    align-items: center;
}

.panel-split .browser {
    min-width: 0;
}

.panel-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.panel-list li {
    display: flex;
    gap: .55rem;
    font-size: .92rem;
}

.panel-list svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    color: var(--acc2-text);
}

/* ---------- Dunkles Ablauf-Band ----------
   Der Kontrastanker in der Seitenmitte: bleibt in beiden Themes dunkel. */
.section-dark {
    background: #1c1522;
    color: #f4eff7;
}

.section-dark .section-title {
    color: #fdfbfd;
}

.section-dark .section-sub {
    color: #b3a6bf;
}

.section-dark .note {
    color: #a596b2;
}

.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--grad);
    opacity: .35;
}

.timeline-step {
    position: relative;
    text-align: center;
}

.timeline-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    display: grid;
    place-items: center;
    font: 700 15px var(--font-head);
    margin: 0 auto .8rem;
    box-shadow: var(--shadow-sm);
}

.timeline-step b {
    font-family: var(--font-head);
    font-size: .98rem;
    color: #f4eff7;
}

.timeline-step p {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: #b3a6bf;
    line-height: 1.55;
}

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
    .spotlight,
    .spotlight-flip {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .spotlight-flip .miniui {
        order: 0;
    }

    .spotlights {
        gap: 2.25rem;
    }

    .zone-cols {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .panel-split {
        grid-template-columns: 1fr;
    }

    .timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }

    .timeline::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .miniui {
        padding: 14px;
    }

    .mu-scan {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .mu-rows {
        width: 100%;
    }

    .mu-dash-kpis {
        grid-template-columns: 1fr;
    }

    .timeline {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero-more-grid {
        gap: .35rem;
    }
}

/* =========================================================================
   Konzept-Rollout auf alle Seiten (DESIGN_KONZEPT.md)
   Jede Seite traegt EINE Leitfarbe, gesetzt als .zone-1/2/3 am <body>.
   Kicker, Icons, Akzentstriche, Hover und Glows leiten sich daraus ab; der
   Marken-Verlauf bleibt Hero, CTA-Band, primaeren Buttons und Logo
   vorbehalten. Ohne Zonenklasse fallen alle Regeln auf die bisherigen
   Marken-Tokens zurueck – bestehende Seiten aendern sich dadurch nicht.
   ========================================================================= */

/* Helle Variante der Zonenfarbe fuer das dunkle Band (Kontrast auf #1c1522) */
.zone-1 {
    --zone-on-dark: #f472b6;
}

.zone-2 {
    --zone-on-dark: #c4b5fd;
}

.zone-3 {
    --zone-on-dark: #fdba74;
}

/* ---------- Kicker (Eyebrow) ----------
   Steht ueber der grossen Ueberschrift und benennt die Zone. Auf der
   Startseite zusaetzlich nummeriert (01 · KERNFEATURE). */
.page-kicker {
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--zone-text, var(--acc-text));
    margin-bottom: .55rem;
}

.section-dark .page-kicker {
    color: var(--zone-on-dark, #c4b5fd);
}

/* ---------- Seitenkopf der Unterseiten ----------
   Getoente Flaeche statt Verlaufskachel (Prinzip 1). */
.feature-page-icon {
    background: color-mix(in srgb, var(--zone, var(--acc1)) 14%, transparent);
    color: var(--zone-text, var(--acc-text));
}

.feature-page-hero::before {
    background:
        radial-gradient(800px 400px at 20% -10%, color-mix(in srgb, var(--zone, var(--acc1)) 14%, transparent), transparent 60%),
        radial-gradient(800px 400px at 85% 0%, rgba(139, 92, 246, .10), transparent 60%);
}

/* ---------- Textbloecke der Unterseiten ----------
   Prinzip 4: Rand + Schatten bleiben den App-Flaechen vorbehalten. Statt der
   Karte trennt ein 44px-Akzentstrich in der Zonenfarbe die Bloecke. */
.feature-detail-text {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.feature-detail-text > h2::before,
.feature-detail-text > h3::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--zone, var(--acc1));
    margin-bottom: .85rem;
}

.feature-text-stack {
    gap: clamp(1.75rem, 4vw, 2.5rem);
}

.feature-page-content {
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

/* ---------- Listen, Pfeile, Karten in der Zonenfarbe ---------- */
.feature-benefits-list li::before,
.related-links li::before {
    background-color: var(--zone-text, var(--acc-text));
}

.related-links a,
.card-arrow {
    color: var(--zone-text, var(--acc-text));
}

.feature-icon {
    background: color-mix(in srgb, var(--zone, var(--acc1)) 14%, transparent);
    color: var(--zone-text, var(--acc-text));
}

.feature-card:hover {
    border-color: color-mix(in srgb, var(--zone, var(--acc2)) 40%, var(--line));
}

.back-to-features:hover {
    color: var(--zone-text, var(--acc-text));
}

/* ---------- App-Flaechen: farbiger Glow statt Grauschatten (Prinzip 5) ---------- */
.feature-screenshot-container:has(> .feature-screenshot[src*="browser"]),
.feature-screenshot-container:has(> .feature-screenshot[src*="desktop"]) {
    box-shadow: 0 26px 70px -14px var(--zone-glow, rgba(139, 92, 246, .28));
}

/* ---------- Dunkles Band ----------
   Genau ein Band pro Seite (Prinzip 3). Umschliesst auf den Unterseiten den
   FAQ-Block; die Bausteine darin bekommen dunkle Flaechen. */
.section-dark {
    border-block: 1px solid #2a2033;
}

.section-dark .faq-section {
    padding-block: clamp(2rem, 5vw, 3rem);
}

.section-dark .faq-group-title {
    color: #fdfbfd;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .section-dark .faq-group-title.gradient-text {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: #fdfbfd;
    }
}

.section-dark .faq-item {
    background: #241c2c;
    border-color: #39304a;
    box-shadow: none;
    color: #f4eff7;
}

.section-dark .faq-item[open],
.section-dark .faq-item:hover {
    border-color: color-mix(in srgb, var(--zone-on-dark, #c4b5fd) 45%, #39304a);
}

.section-dark .faq-item summary:hover,
.section-dark .faq-item[open] .faq-chevron {
    color: var(--zone-on-dark, #c4b5fd);
}

.section-dark .faq-chevron {
    color: #a99fb4;
}

.section-dark .faq-answer,
.section-dark .faq-more,
.section-dark .note,
.section-dark p {
    color: #b3a6bf;
}

.section-dark .faq-answer a,
.section-dark .faq-more a,
.section-dark a:not(.btn) {
    color: var(--zone-on-dark, #c4b5fd);
}

.section-dark h2,
.section-dark h3,
.section-dark b,
.section-dark strong {
    color: #f4eff7;
}

.section-dark .card {
    background: #241c2c;
    border-color: #39304a;
    box-shadow: none;
    color: #f4eff7;
}

/* Sekundaerer Button auf dem Band: nur Kontur, damit der primaere fuehrt. */
.section-dark .btn-ghost {
    background: transparent;
    border-color: #4a3d55;
    color: #f4eff7;
}

.section-dark .btn-ghost:hover {
    color: #f4eff7;
    border-color: var(--zone-on-dark, #c4b5fd);
}

.section-dark .feature-icon {
    background: color-mix(in srgb, var(--zone-on-dark, #c4b5fd) 16%, transparent);
    color: var(--zone-on-dark, #c4b5fd);
}

.section-dark .feature-benefits-list li,
.section-dark .compare-list li {
    color: #b3a6bf;
}

.section-dark .feature-benefits-list li::before {
    background-color: var(--zone-on-dark, #c4b5fd);
}

.section-dark .feature-benefits-list li strong {
    color: #f4eff7;
}

/* ---------- Seitenkopf der Bestandsseiten in der Zonenfarbe ---------- */
.page-hero::before {
    background:
        radial-gradient(800px 400px at 20% -10%, color-mix(in srgb, var(--zone, var(--acc1)) 14%, transparent), transparent 60%),
        radial-gradient(800px 400px at 85% 0%, rgba(139, 92, 246, .10), transparent 60%);
}

/* ---------- Karten-Raster ohne Boxen (Prinzip 4) ----------
   Fuer lange, gleichfoermige Feature-Listen: getoentes Icon, Titel, Text –
   ohne Rand, Schatten und Karte-in-Karte. */
.card-grid-plain {
    gap: clamp(1.5rem, 3vw, 1.75rem) clamp(1.75rem, 4vw, 2.5rem);
}

.card-grid-plain > .card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.card-grid-plain > .card:hover {
    transform: none;
    border-color: transparent;
}

.card-grid-plain .feature-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    margin-bottom: .7rem;
}

.card-grid-plain .feature-icon svg {
    width: 18px;
    height: 18px;
}

.card-grid-plain .card h3,
.card-grid-plain .feature-card h2 {
    font-size: 1rem;
}

.card-grid-plain > .feature-card:hover h2,
.card-grid-plain > .feature-card:hover h3 {
    color: var(--zone-text, var(--acc-text));
}

/* ---------- Weitere Bausteine in der Zonenfarbe ---------- */
.compare-card-new .compare-list svg,
.promise-icon {
    color: var(--zone-text, var(--acc-text));
}

.promise-icon {
    background: color-mix(in srgb, var(--zone, var(--acc1)) 14%, transparent);
}

/* ---------- Seitenzone faerbt den Akzent-Token um ----------
   Nur am <body> (.zone-page): dort sollen Links, Haken, Chevrons und alle
   anderen Akzenttraeger der Seite dieselbe Leitfarbe tragen. Zonenklassen an
   einzelnen Abschnitten (z. B. die Spotlights der Startseite) bleiben davon
   unberuehrt und faerben nur Kicker, Icon, Strich und Glow. */
.zone-page.zone-2 {
    --acc-text: var(--acc2-text);
}

.zone-page.zone-3 {
    --acc-text: color-mix(in srgb, var(--acc3) 72%, var(--ink));
    --acc-text-hover: color-mix(in srgb, var(--acc3) 86%, var(--ink));
}

/* Im dunklen Theme wuerde ein dunkles Band mit dem Seitenhintergrund
   verschmelzen. Damit der Kontrastanker erhalten bleibt, wird das Band dort
   eine Stufe heller als die Seite – die Bausteine darin noch eine Stufe
   heller. */
html[data-theme="dark"] .section-dark {
    background: #241c2c;
    border-color: #3a2f45;
}

html[data-theme="dark"] .section-dark .faq-item,
html[data-theme="dark"] .section-dark .card {
    background: #2f2639;
    border-color: #453a52;
}

/* ---------- Motion / Print ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .site-header,
    .cookie-banner,
    .cta-band,
    .skip-link {
        display: none !important;
    }

    .faq-item::details-content {
        block-size: auto !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}