:root {
            --ink: #111827;
            /* Haupttext */
            --muted: #6b7280;
            /* Sekundärtext */
            --bg: #fafbfd;
            /* Seitenhintergrund */
            --paper: #ffffff;
            /* Artikelhintergrund */
            --line: #e7eef6;
            /* feine Linien */
            --accent: #0ea5e9;
            /* Akzent (blau) */
            --accent-2: #22c55e;
            /* Akzent (grün) */
        }

        html,
        body {
            background: var(--bg);
            color: var(--ink);
        }

        .container-800 {
            max-width: 800px;
        }

        /* ——— Kopfband (Anzeige) ——— */
        .ad-ribbon {
            background: linear-gradient(90deg, rgba(14, 165, 233, .1), rgba(34, 197, 94, .1));
            border-bottom: 1px solid var(--line);
        }

        .ad-badge {
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .06em;
            color: #0b6aa0;
            background: #e6f6ff;
            border: 1px solid #caecff;
            padding: .25rem .6rem;
            border-radius: 999px;
        }

        /* ——— Artikel ——— */
        .paper {
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: 0 18px 50px rgba(2, 6, 23, .06);
        }

        .title {
            font-weight: 800;
            line-height: 1.15;
            background: linear-gradient(90deg, var(--ink), #1f2937);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .subtitle {
            color: var(--muted)
        }

        /* elegante Unterstreichung */
        .accent-underline {
            position: relative;
            display: inline-block;
        }

        .accent-underline::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 6px;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            border-radius: 6px;
            opacity: .18;
        }

        /* Dropcap für ersten Absatz */
        .dropcap:first-letter {
            float: left;
            font-size: 3.2rem;
            line-height: .9;
            padding: .2rem .5rem .2rem 0;
            font-weight: 800;
            color: #0b6aa0;
        }

        /* Chips (Vorteile) */
        .chip {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .45rem .7rem;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: #f7fbff;
            color: #0b6aa0;
            font-weight: 600;
            font-size: .85rem;
        }

        /* Timeline (Schritte) – vertikal, ohne Karten */
        .stepper {
            position: relative;
            margin-left: .75rem;
        }

        .stepper::before {
            content: "";
            position: absolute;
            left: 10px;
            top: .25rem;
            bottom: .25rem;
            width: 2px;
            background: var(--line);
        }

        .step {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1.1rem;
        }

        .step::before {
            content: "";
            position: absolute;
            left: 3px;
            top: .3rem;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: linear-gradient(180deg, var(--accent), var(--accent-2));
            box-shadow: 0 0 0 4px rgba(14, 165, 233, .15);
        }

        .step strong {
            display: block;
        }

        /* Checkliste */
        .ticklist {
            list-style: none;
            padding-left: 0;
            margin: 0
        }

        .ticklist li {
            margin: .4rem 0;
            padding-left: 1.6rem;
            position: relative;
            color: var(--muted)
        }

        .ticklist li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .5rem;
            width: .7rem;
            height: .7rem;
            border-radius: 3px;
            background: conic-gradient(from 0deg, var(--accent) 0 40%, var(--accent-2) 40% 100%);
            box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
        }

        /* Info-Bänder */
        .infobar {
            background: linear-gradient(90deg, #f1faff, #f6fff7);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: .9rem 1rem;
        }

        /* Callout-Zitat */
        .callout {
            border-left: 4px solid var(--accent);
            background: linear-gradient(90deg, rgba(14, 165, 233, .08), transparent);
            border-radius: 12px;
            padding: 1rem 1.1rem;
            color: #0b6aa0;
            font-weight: 600;
        }

        /* CTA-Fußleiste (anders als раньше: schlank, editoriell) */
        .cta-rail {
            border-top: 1px solid var(--line);
            background: linear-gradient(90deg, rgba(14, 165, 233, .06), rgba(34, 197, 94, .06));
        }

        .btn-cta {
            background: #0b1324;
            color: #fff;
            border: 1px solid #0b1324;
            border-radius: 12px;
            padding: .8rem 1.1rem;
            font-weight: 700;
        }

        .btn-cta:hover {
            background: #151e37;
            border-color: #151e37;
        }

        /* sanftes Reveal */
        .reveal {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .6s ease, transform .6s ease;
        }

        .reveal.in {
            opacity: 1;
            transform: none;
        }
        .cookie-settings {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 1050;
            width: 280px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            font-family: system-ui, sans-serif;
            font-size: 14px;
            opacity: 0;
            transform: translateY(20px);
            transition: all .4s ease;
        }

        .cookie-settings.show {
            opacity: 1;
            transform: translateY(0);
        }

        .cookie-header {
            padding: 10px 14px;
            border-bottom: 1px solid #f1f1f1;
        }

        .cookie-body {
            padding: 10px 14px;
        }

        .cookie-actions {
            display: flex;
            justify-content: flex-end;
            gap: 6px;
            padding: 10px 14px;
            border-top: 1px solid #f1f1f1;
        }

        .cookie-actions .btn {
            font-size: 13px;
            padding: 4px 10px;
            border-radius: 6px;
        }