*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            /* Droid Template Style Guide */
            --primary: #0E1C29;
            --text: #00060B;
            --text-secondary: #858C9A;
            --text-muted: #858C9A;
            --accent: #DADFE6;
            --accent-bright: #0E1C29;
            --accent-dim: rgba(14, 28, 41, 0.08);
            --neutral: #E9EDF3;
            --bg: #f8fafc;
            --bg-muted: #f1f5f9;
            --bg-elevated: #ffffff;
            --bg-card: #ffffff;
            --bg-card-hover: #f8fafc;
            --border: #D1D5DB;
            --border-hover: #b8bcc4;
            --green: #0E1C29;
            --green-dim: rgba(14, 28, 41, 0.1);
            --accent-glow: rgba(14, 28, 41, 0.12);
            
            /* Typography */
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            
            /* Font Sizes - Droid Style */
            --fs-h1: clamp(40px, 5vw, 64px);
            --fs-h2: clamp(32px, 4vw, 48px);
            --fs-h3: clamp(24px, 3vw, 32px);
            --fs-h4: 24px;
            --fs-h5: 20px;
            --fs-body-lg: 20px;
            --fs-body: 18px;
            --fs-body-sm: 16px;
            
            --lh-body: 1.6;
            --fw-display: 600;
            --container-max: 1720px;
        }
        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }
        body {
            font-family: var(--font-sans);
            font-size: var(--fs-body);
            background: var(--bg);
            color: var(--text-secondary);
            line-height: var(--lh-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }
        ::selection {
            background: var(--primary);
            color: #fff;
        }
        .container { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px); }
        /* Droid-Style Navbar */
        nav {
            position: fixed;
            top: 1px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99999;
            width: calc(100% - 24px);
            max-width: var(--container-max);
            background: #fff;
            border-radius: 10px;
            padding: 15px clamp(16px, 3vw, 32px);
            transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
            box-sizing: border-box;
        }
        nav.scrolled {
            background: #fff;
        }
        nav .nav-row {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin: 0 auto;
            min-height: 0;
            min-width: 0;
            box-sizing: border-box;
            padding: 0;
        }
        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            line-height: 1;
        }
        .logo img {
            display: block;
            height: 42px;
            width: auto;
        }
        .nav-links {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            gap: 30px;
            list-style: none;
            margin: 0;
            margin-left: 40px;
            padding: 0;
            flex: 1;
            min-width: 0;
        }
        .nav-links li:last-child { flex-shrink: 0; margin-left: auto; }
        .nav-links a { display: inline-block; font-size: 16px; text-decoration: none; transition: color .3s; font-weight: 400; color: var(--text); }
        .nav-links a:hover { color: var(--text-secondary); }
        .nav-cta {
            padding: 10px 20px;
            background: var(--primary);
            color: #fff !important;
            border-radius: 100px;
            font-weight: 500 !important;
            font-size: 13px !important;
            transition: all .3s !important;
            white-space: nowrap;
        }
        .nav-cta:hover {
            background: #1a2d3d;
        }
        .nav-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-card);
            color: var(--text);
            cursor: pointer;
            transition: border-color .2s, background .2s;
            font-family: inherit;
        }
        .nav-toggle:hover {
            border-color: var(--border-hover);
            background: var(--bg-card-hover);
        }
        .nav-toggle:focus-visible {
            outline: 2px solid var(--accent-bright);
            outline-offset: 2px;
        }
        .nav-toggle-icon {
            position: relative;
            display: block;
            width: 18px;
            height: 2px;
            background: currentColor;
            border-radius: 1px;
            transition: background .2s ease;
        }
        .nav-toggle-icon::before,
        .nav-toggle-icon::after {
            content: '';
            position: absolute;
            left: 0;
            width: 18px;
            height: 2px;
            background: currentColor;
            border-radius: 1px;
            transition: transform .25s ease, top .25s ease;
        }
        .nav-toggle-icon::before { top: -6px; }
        .nav-toggle-icon::after { top: 6px; }
        nav.is-open .nav-toggle-icon { background: transparent; }
        nav.is-open .nav-toggle-icon::before {
            top: 0;
            transform: rotate(45deg);
        }
        nav.is-open .nav-toggle-icon::after {
            top: 0;
            transform: rotate(-45deg);
        }
        .nav-backdrop {
            display: none;
        }
        nav.is-open .nav-backdrop {
            display: none;
        }
        @media (min-width: 1025px) {
            .nav-links {
                overflow-x: auto;
                scrollbar-width: thin;
            }
            .nav-links a {
                white-space: nowrap;
            }
        }
        .page-hero {
            padding: 140px 32px 64px;
            text-align: center;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        .page-hero .s-label { display: inline-block; margin-bottom: 12px; }
        .s-label {
            display: inline-block;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--accent-bright);
            font-weight: 700;
            margin-bottom: 12px;
        }
        .s-title {
            font-family: var(--font-display);
            font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
            font-weight: 700;
            color: var(--text);
            line-height: 1.2;
            letter-spacing: -0.03em;
            margin-bottom: 16px;
        }
        .s-desc {
            font-size: clamp(1.0625rem, 0.8vw + 1rem, 1.25rem);
            color: var(--text-muted);
            max-width: 38rem;
            margin: 0 auto;
            font-weight: 400;
            line-height: 1.65;
        }
        .s-header { text-align: center; margin-bottom: 48px; }
        section { padding: 80px 0; }
        .btn {
            display: inline-flex; align-items: center; gap: 8px; justify-content: center;
            padding: 16px 36px; border-radius: 8px; font-size: 15px; font-weight: 600;
            text-decoration: none; transition: all .3s cubic-bezier(.4,0,.2,1); border: none; cursor: pointer;
            letter-spacing: -0.02em;
        }
        .btn-ghost {
            background: transparent; color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .btn-ghost:hover {
            border-color: var(--border-hover); color: var(--text);
            background: rgba(15, 23, 42, 0.04);
        }
        .btn-accent { background: var(--accent-bright); color: #fff !important; }
        .btn-accent:hover {
            opacity: .9; transform: translateY(-2px); box-shadow: 0 8px 32px var(--accent-glow);
        }
        .btn-white { background: #0f172a; color: #fff !important; }
        .btn-white:hover {
            opacity: .94; transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
        }
        .billing-toggle {
            display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 56px;
        }
        .billing-toggle__label { font-size: 16px; color: var(--text-muted); cursor: pointer; transition: color .3s; }
        .billing-toggle__label--active { color: var(--text); font-weight: 500; }
        .billing-toggle__switch {
            position: relative; width: 48px; height: 26px;
            background: var(--bg-card); border: 1px solid var(--border-hover);
            border-radius: 99px; cursor: pointer; padding: 0;
        }
        .billing-toggle__switch[aria-pressed="true"] { background: rgba(34, 37, 53, 0.08); border-color: var(--accent-bright); }
        .billing-toggle__knob {
            position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
            border-radius: 50%; background: var(--text-muted); transition: all .3s;
        }
        .billing-toggle__switch[aria-pressed="true"] .billing-toggle__knob { left: 25px; background: var(--accent-bright); }
        .billing-toggle__badge {
            padding: 4px 12px; background: var(--green-dim); color: var(--green);
            border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
        }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        .pr-card {
            /* padding-top: Platz für absolute Badge + Lücke bis .pr-name (alle Karten gleich → Titel fluchten) */
            padding: 92px 36px 48px;
            background: var(--bg-card);
            display: flex;
            flex-direction: column;
        }
        .pr-card.featured {
            position: relative;
            background: linear-gradient(180deg, rgba(34, 37, 53, 0.06) 0%, #fff 100%);
        }
        .pr-badge {
            display: inline-flex;
            align-self: flex-start;
            padding: 5px 14px;
            background: var(--accent-dim);
            color: var(--accent-bright);
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 20px;
        }
        .pr-card.featured .pr-badge {
            position: absolute;
            top: 32px;
            left: 36px;
            padding: 12px 16px;
            line-height: 1.25;
            margin-bottom: 0;
            z-index: 1;
        }
        .pr-name { font-size: 24px; font-weight: var(--fw-display); color: var(--text); margin-bottom: 8px; letter-spacing: -0.03em; }
        .pr-desc { font-size: 16px; color: var(--text-muted); margin-bottom: 28px; min-height: 48px; line-height: 1.55; }
        .pr-price { font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: var(--fw-display); color: var(--text); letter-spacing: -0.04em; line-height: 1; }
        .pr-price .pr-amount { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; }
        .pr-price .pr-period { font-size: 17px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
        .pr-old { font-size: 15px; color: var(--text-muted); text-decoration: line-through; margin-top: 6px; margin-bottom: 32px; }
        .pricing-grid.is-monthly .pr-price { margin-bottom: 44px; }
        .pr-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 0 0 36px 0;
            padding: 28px 0 0;
            padding-inline-start: 0;
            border-top: 1px solid var(--border);
            flex: 1;
        }
        .pr-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 16px;
            line-height: 1.5;
            color: var(--text-secondary);
            margin-left: 0;
            padding-left: 0;
        }
        .pr-list li.off {
            color: rgba(100, 116, 139, 0.75);
            opacity: 1;
        }
        .pr-list li.off:hover { color: rgba(71, 85, 105, 0.95); }
        .pr-list li.off .tip { border-bottom-color: transparent; }
        .pr-list .ck { flex-shrink: 0; color: var(--green); font-size: 16px; margin-top: 2px; }
        .pr-list .no { flex-shrink: 0; color: currentColor; font-size: 16px; margin-top: 2px; line-height: 1.4; }
        .pr-response { font-size: 14px; color: var(--text-muted); padding-top: 20px; border-top: 1px solid var(--border); }
        .pr-cta { width: 100%; margin-top: 24px; }
        .tip { position: relative; cursor: help; border-bottom: 1px dotted var(--text-muted); }
        .tip .tip-text {
            display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
            background: #0f172a; color: #f8fafc; padding: 10px 14px; border-radius: 8px;
            font-size: 13px; line-height: 1.5; width: 240px; text-align: center; z-index: 20;
            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.2);
        }
        .tip:hover .tip-text { display: block; }
        .pricing-tabs {
            display: none;
            flex-wrap: nowrap;
            gap: 8px;
            justify-content: stretch;
            margin-bottom: 20px;
            max-width: 440px;
            margin-left: auto;
            margin-right: auto;
        }
        .pricing-tabs__btn {
            flex: 1 1 0;
            min-width: 0;
            padding: 12px 8px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg-card);
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.25;
            cursor: pointer;
            transition: border-color .2s, background .2s, color .2s;
            font-family: inherit;
            text-align: center;
        }
        @media (min-width: 400px) {
            .pricing-tabs__btn { font-size: 13px; padding: 12px 10px; }
        }
        .pricing-tabs__btn:hover {
            border-color: var(--border-hover);
            color: var(--text-secondary);
        }
        .pricing-tabs__btn--active {
            border-color: var(--accent-bright);
            background: rgba(34, 37, 53, 0.08);
            color: var(--accent-bright);
        }
        .pricing-tabs__btn:focus-visible {
            outline: 2px solid var(--accent-bright);
            outline-offset: 2px;
        }
        .testimonials {
            background: var(--bg-muted);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }
        .t-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .t-card {
            padding: 36px;
            border-radius: 16px;
            border: 1px solid var(--border);
            background: #fff;
            box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
        }
        .t-stars {
            color: #fbbf24;
            font-size: 14px;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }
        .t-text {
            font-size: 17px;
            color: var(--text-secondary);
            line-height: 1.65;
            margin-bottom: 24px;
            font-style: normal;
        }
        .t-author {
            font-size: 15px;
            font-weight: var(--fw-display);
            color: var(--text);
        }
        .t-role {
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        section#faq {
            background: var(--bg);
            border-top: 1px solid var(--border);
        }
        .faq-list {
            max-width: 640px;
            margin: 0 auto;
        }
        .faq-item {
            border-bottom: 1px solid var(--border);
        }
        .faq-q {
            width: 100%;
            background: none;
            border: none;
            padding: 28px 0;
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
            text-align: left;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: inherit;
            transition: color .3s;
        }
        .faq-q:hover {
            color: var(--accent-bright);
            background: transparent;
        }
        .faq-q:focus,
        .faq-q:focus-visible,
        .faq-q:active {
            background: transparent;
        }
        .faq-q:focus {
            outline: none;
        }
        .faq-q:focus-visible {
            outline: 2px solid var(--accent-bright);
            outline-offset: 2px;
        }
        section#faq button.faq-q,
        section#faq button.faq-q:focus,
        section#faq button.faq-q:focus-visible,
        section#faq button.faq-q:active,
        section#faq .faq-item.open button.faq-q {
            color: var(--text);
        }
        section#faq button.faq-q:hover {
            color: var(--accent-bright);
        }
        .faq-q::after {
            content: '+';
            font-size: 20px;
            font-weight: 300;
            color: var(--text-muted);
            transition: transform .3s;
        }
        .faq-item.open .faq-q::after { transform: rotate(45deg); }
        .faq-a {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.45s cubic-bezier(.4, 0, .2, 1);
            overflow: hidden;
            padding-bottom: 0;
        }
        .faq-item.open .faq-a {
            grid-template-rows: 1fr;
            padding-bottom: 28px;
        }
        .faq-a > p {
            min-height: 0;
            overflow: hidden;
        }
        @media (prefers-reduced-motion: reduce) {
            .faq-a {
                transition: none;
            }
        }
        .faq-a p {
            margin: 0;
            padding-bottom: 28px;
            font-size: 17px;
            color: var(--text-muted);
            line-height: 1.65;
        }
        .plan-comparison {
            background: var(--bg);
            border-top: 1px solid var(--border);
            padding: 100px 0 120px;
        }
        .center-content-wrap { max-width: 640px; margin: 0 auto 48px; text-align: center; }
        .section-tag {
            display: inline-block;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--accent-bright);
            font-weight: 700;
            margin-bottom: 12px;
        }
        .align-center { text-align: center; }
        .plan-comparison h2 {
            font-family: var(--font-display);
            font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
            font-weight: 700;
            color: var(--text);
            margin-bottom: 16px;
            letter-spacing: -0.03em;
            line-height: 1.2;
        }
        .plan-comparison .lead {
            font-size: 18px; color: var(--text-muted); line-height: 1.65; font-weight: 400;
        }
        .comparison-table-mobile-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
        .comparison-table-outer {
            min-width: 640px;
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
        }
        .comparison-table--full {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            font-size: 15px;
        }
        .comparison-table--full thead th {
            padding: 16px 12px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            background: var(--bg-card);
            border-bottom: 1px solid var(--border);
            text-align: center;
            vertical-align: middle;
        }
        .comparison-table--full thead th.comparison-th-feature {
            text-align: left;
            color: var(--text-secondary);
            padding-left: 16px;
            padding-right: 12px;
        }
        .comparison-table { width: 100%; border-collapse: collapse; font-size: 15px; }
        .comparison-table__category {
            padding: 12px 16px;
            background: var(--bg-muted);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-bright);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }
        .comparison-table--full tbody tr:first-child .comparison-table__category {
            border-top: none;
        }
        .comparison-table__feature {
            padding: 12px 16px; color: var(--text-secondary); border-bottom: 1px solid var(--border);
            vertical-align: middle;
            word-wrap: break-word;
        }
        .comparison-table__cell {
            padding: 12px 12px; text-align: center; border-bottom: 1px solid var(--border);
            color: var(--text-muted); vertical-align: middle;
        }
        .comparison-table--full .comparison-table__cell { padding-left: 10px; padding-right: 10px; }
        .comparison-table tr:last-child td { border-bottom: none; }
        .comparison-table__cell:not(.comparison-table__feature) { font-variant-numeric: tabular-nums; }
        .comparison-table--full .comparison-table__cell[data-comparison-plan],
        .comparison-table--full thead th[data-comparison-plan] {
            font-variant-numeric: normal;
        }
        @media (min-width: 1025px) {
            .comparison-table--full tbody tr:has(.comparison-table__feature) td {
                transition: background-color .15s ease;
            }
            .comparison-table--full tbody tr:has(.comparison-table__feature):hover td {
                background-color: rgba(34, 37, 53, 0.06);
            }
        }
        .comparison-plan-pick {
            display: none;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            margin-bottom: 20px;
            max-width: 440px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
        .comparison-plan-pick__label {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--text-muted);
            font-weight: 600;
            text-align: center;
        }
        .comparison-plan-pick__btns {
            display: flex;
            flex-wrap: nowrap;
            gap: 8px;
            justify-content: stretch;
            width: 100%;
        }
        @media (max-width: 1024px) {
            .comparison-plan-pick { display: flex; }
            .comparison-table-mobile-wrap {
                overflow-x: visible;
                margin: 0;
                padding: 0;
            }
            .comparison-table-outer {
                min-width: 0;
                width: 100%;
            }
            .comparison-table-outer[data-comparison-active="0"] col:nth-child(1) { width: 45% !important; }
            .comparison-table-outer[data-comparison-active="0"] col:nth-child(2) { width: 55% !important; }
            .comparison-table-outer[data-comparison-active="0"] col:nth-child(3),
            .comparison-table-outer[data-comparison-active="0"] col:nth-child(4) { width: 0% !important; }
            .comparison-table-outer[data-comparison-active="1"] col:nth-child(1) { width: 45% !important; }
            .comparison-table-outer[data-comparison-active="1"] col:nth-child(2),
            .comparison-table-outer[data-comparison-active="1"] col:nth-child(4) { width: 0% !important; }
            .comparison-table-outer[data-comparison-active="1"] col:nth-child(3) { width: 55% !important; }
            .comparison-table-outer[data-comparison-active="2"] col:nth-child(1) { width: 45% !important; }
            .comparison-table-outer[data-comparison-active="2"] col:nth-child(2),
            .comparison-table-outer[data-comparison-active="2"] col:nth-child(3) { width: 0% !important; }
            .comparison-table-outer[data-comparison-active="2"] col:nth-child(4) { width: 55% !important; }
            .comparison-table--full thead th.comparison-th-feature {
                padding-left: 12px;
                padding-right: 8px;
            }
            .comparison-table__feature {
                padding-left: 12px;
                padding-right: 8px;
                hyphens: none;
                word-break: normal;
                overflow-wrap: break-word;
            }
            .comparison-table-outer[data-comparison-active] thead th[data-comparison-plan],
            .comparison-table-outer[data-comparison-active] tbody td[data-comparison-plan] {
                visibility: visible;
            }
            .comparison-table-outer[data-comparison-active="0"] thead th[data-comparison-plan]:not([data-comparison-plan="0"]),
            .comparison-table-outer[data-comparison-active="0"] tbody td[data-comparison-plan]:not([data-comparison-plan="0"]) {
                visibility: collapse !important;
                width: 0 !important;
                max-width: 0 !important;
                padding: 0 !important;
                border: none !important;
                overflow: hidden !important;
                font-size: 0 !important;
                line-height: 0 !important;
            }
            .comparison-table-outer[data-comparison-active="1"] thead th[data-comparison-plan]:not([data-comparison-plan="1"]),
            .comparison-table-outer[data-comparison-active="1"] tbody td[data-comparison-plan]:not([data-comparison-plan="1"]) {
                visibility: collapse !important;
                width: 0 !important;
                max-width: 0 !important;
                padding: 0 !important;
                border: none !important;
                overflow: hidden !important;
                font-size: 0 !important;
                line-height: 0 !important;
            }
            .comparison-table-outer[data-comparison-active="2"] thead th[data-comparison-plan]:not([data-comparison-plan="2"]),
            .comparison-table-outer[data-comparison-active="2"] tbody td[data-comparison-plan]:not([data-comparison-plan="2"]) {
                visibility: collapse !important;
                width: 0 !important;
                max-width: 0 !important;
                padding: 0 !important;
                border: none !important;
                overflow: hidden !important;
                font-size: 0 !important;
                line-height: 0 !important;
            }
        }
        .preise-cta {
            text-align: center;
            padding: 96px 32px;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            position: relative;
            background: var(--accent-bright);
            color: rgba(255, 255, 255, 0.9);
        }
        .preise-cta::before {
            display: none;
        }
        .preise-cta h2 {
            font-family: var(--font-display);
            font-size: clamp(1.75rem, 2.5vw + 1rem, 2.35rem);
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
            letter-spacing: -0.03em;
            line-height: 1.2;
            position: relative;
        }
        .preise-cta p {
            font-size: clamp(1rem, 0.5vw + 1rem, 1.125rem);
            color: rgba(255, 255, 255, 0.88);
            margin-bottom: 28px;
            line-height: 1.65;
            position: relative;
        }
        .preise-cta .btn-white {
            background: #fff;
            color: #0f172a !important;
            position: relative;
        }
        footer {
            border-top: 1px solid var(--border);
            padding-top: 56px;
            padding-bottom: 40px;
            padding-left: max(32px, env(safe-area-inset-left));
            padding-right: max(32px, env(safe-area-inset-right));
            background: var(--bg-muted);
            color: var(--text-secondary);
        }
        footer .container {
            padding-left: 0;
            padding-right: 0;
        }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
        .footer-brand { margin-bottom: 12px; }
        .footer-brand-link { display: inline-block; line-height: 0; text-decoration: none; }
        .footer-brand-link img { display: block; height: 40px; width: auto; }
        .footer-desc { font-size: 15px; color: var(--text-muted); line-height: 1.65; max-width: 280px; }
        footer h4 {
            font-size: 12px; font-weight: 700; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px;
        }
        .f-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .f-links a { font-size: 15px; color: var(--text-secondary); text-decoration: none; transition: color .3s; }
        .f-links a:hover { color: var(--accent-bright); }
        .footer-bottom {
            border-top: 1px solid var(--border);
            padding-top: 24px;
            display: flex; justify-content: space-between; font-size: 14px; color: var(--text-muted);
        }
        /* ====== Pair-Layout: 2 Karten (WordPress-Snippet, z.B. Business + Mission Critical) ====== */
        .pricing-grid--pair {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 32px !important;
            max-width: 1100px !important;
            margin-left: auto !important;
            margin-right: auto !important;
            background: transparent !important;
            border: none !important;
            overflow: visible !important;
        }
        .pricing-grid--pair .pr-card {
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
        }
        .pricing-grid--pair .pr-list {
            border-top: none !important;
            padding-top: 0 !important;
            margin-bottom: 24px !important;
        }
        .pricing-grid--pair .pr-response {
            border-top: none !important;
            background: var(--accent-dim) !important;
            color: var(--accent-bright) !important;
            padding: 12px 16px !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            margin: 0 0 20px !important;
        }
        .pricing-grid--pair .pr-response strong {
            color: var(--text);
            font-weight: 700;
        }
        .pricing-grid--pair .pr-features-title {
            font-weight: 600;
            color: var(--text);
            margin: 0 0 14px;
            font-size: 15px;
        }
        .pricing-grid--pair .pr-compare {
            display: inline-block;
            color: var(--accent-bright);
            text-decoration: none;
            font-size: 14px;
            margin: 4px 0 42px;
        }
        .pricing-grid--pair .pr-compare:hover { text-decoration: underline; }

        .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        @media (max-width: 1024px) {
            .pricing-tabs { display: flex; }
            .pricing-grid {
                display: block;
                max-width: 440px;
                margin: 0 auto;
                background: transparent;
                border: none;
                border-radius: 0;
                overflow: visible;
                gap: 0;
            }
            .pricing-grid .pr-card {
                display: none;
                width: 100%;
                border: 1px solid var(--border);
                border-radius: 8px;
                padding-top: 92px !important;
                margin: 0;
            }
            .pricing-grid .pr-card.pr-card--active {
                display: flex;
            }
            /* Pair-Layout (2 Karten) bleibt mobil immer sichtbar, ohne Tabs */
            .pricing-grid--pair {
                max-width: 480px !important;
            }
            .pricing-grid--pair .pr-card {
                display: flex !important;
                margin-bottom: 24px;
            }
            .pricing-grid--pair .pr-card:last-child {
                margin-bottom: 0;
            }
            .t-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            nav {
                width: calc(100% - 16px);
                top: 8px;
                border-radius: 10px;
                padding: 15px 16px;
            }
            nav:not(.is-open) {
                overflow: hidden;
            }
            nav.is-open {
                border-radius: 10px;
                overflow: visible;
            }
            nav.scrolled {
                background: #fff;
            }
            body.nav-open { overflow: hidden; }
            .nav-toggle {
                display: flex;
                position: relative;
                z-index: 10;
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
                cursor: pointer;
            }
            nav .nav-row {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 0;
                z-index: 2;
            }
            .logo { flex: 0 0 auto; }
            .logo img {
                height: 36px;
            }
            .nav-links {
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                flex: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                margin: 0;
                margin-left: 0;
                list-style: none;
                background: #fff;
                border-top: 1px solid var(--border);
                border-radius: 0 0 10px 10px;
                z-index: 3;
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                pointer-events: none !important;
                max-height: 0;
                min-height: 0;
                padding: 0 20px;
                border-bottom-width: 0;
                transform: none;
                transition:
                    opacity .22s ease,
                    visibility .22s ease,
                    max-height .32s ease,
                    padding .22s ease,
                    border-bottom-width .22s ease;
            }
            nav.is-open .nav-links {
                display: flex;
                opacity: 1;
                visibility: visible;
                pointer-events: auto !important;
                max-height: min(90vh, 640px);
                padding: 8px 20px 24px;
                border-bottom-width: 1px;
                overflow-y: auto;
                transform: none;
            }
            nav:not(.is-open) .nav-links * {
                pointer-events: none !important;
            }
            .nav-links li { border-bottom: 1px solid var(--border); }
            .nav-links li:last-child { border-bottom: none; margin-left: 0; }
            .nav-links a {
                display: block;
                padding: 16px 8px;
                font-size: 15px;
            }
            .nav-links .nav-cta {
                margin-top: 8px;
                text-align: center;
                display: block;
            }
        }
        @media (min-width: 1025px) {
            .pricing-tabs { display: none !important; }
            .pricing-grid .pr-card {
                display: flex !important;
            }
        }
        @media (max-width: 640px) {
            footer {
                padding-left: max(16px, env(safe-area-inset-left));
                padding-right: max(16px, env(safe-area-inset-right));
            }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
            .plan-comparison h2 { font-size: clamp(1.625rem, 5vw + 0.5rem, 2rem); }
        }

        /*
         * WordPress / GeneratePress: script/preise.js setzt body.sitedesk-has-nav wenn #nav existiert
         * (gleiche Logik wie index.css / index.js).
         */
        body.sitedesk-has-nav #primary .inside-article,
        body.sitedesk-has-nav #primary .entry-content,
        body.sitedesk-has-nav #primary .content-area,
        body.sitedesk-has-nav .site-content .content-area,
        body.sitedesk-has-nav #content.site-content,
        body.sitedesk-has-nav .wp-block-post-content,
        body.sitedesk-has-nav article .inside-article,
        body.sitedesk-has-nav main .entry-content,
        body.sitedesk-has-nav .site-main .entry-content {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        body.sitedesk-has-nav #primary .entry-content,
        body.sitedesk-has-nav .site-content .content-area,
        body.sitedesk-has-nav .wp-block-post-content,
        body.sitedesk-has-nav main .entry-content,
        body.sitedesk-has-nav .site-main .entry-content {
            max-width: none !important;
        }
        body.sitedesk-has-nav .container {
            max-width: none !important;
            width: 100%;
            box-sizing: border-box;
            padding-left: max(0px, env(safe-area-inset-left)) !important;
            padding-right: max(0px, env(safe-area-inset-right)) !important;
        }
        body.sitedesk-has-nav .site.grid-container,
        body.sitedesk-has-nav #page .site.grid-container,
        body.sitedesk-has-nav .one-container .site-content {
            max-width: none !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        body.sitedesk-has-nav .entry-content .wp-block-group.alignwide,
        body.sitedesk-has-nav .entry-content .wp-block-group:not(.alignfull) {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        body.sitedesk-has-nav .is-layout-constrained > .alignfull {
            margin-left: 0 !important;
            margin-right: 0 !important;
            width: 100% !important;
            max-width: none !important;
        }
        body.sitedesk-has-nav nav#nav {
            width: 100% !important;
            max-width: none !important;
            left: 0 !important;
            right: auto !important;
            transform: none !important;
            border-radius: 0;
            box-sizing: border-box;
            padding-left: max(12px, env(safe-area-inset-left)) !important;
            padding-right: max(12px, env(safe-area-inset-right)) !important;
        }
        @media (max-width: 1024px) {
            body.sitedesk-has-nav nav#nav {
                width: 100% !important;
                top: 0 !important;
                border-radius: 0 !important;
            }
        }
        /* GeneratePress / Block-Editor: Listen-Ul hat oft padding-inline-start — Feature-Zeilen mit Preis bündeln */
        body.sitedesk-has-nav .pr-card .pr-list {
            margin-left: 0 !important;
            padding-left: 0 !important;
            padding-inline-start: 0 !important;
        }
        body.sitedesk-has-nav .pr-card .pr-list li {
            margin-left: 0 !important;
            padding-left: 0 !important;
        }