/* ZKFonline shared site styles.
   Extracted verbatim from the <style> block in index.html so that
   /support and future pages share one cacheable stylesheet. */

        /* ============================================================
           FONTS & BASE
        ============================================================ */
        .michroma { font-family: 'Michroma', sans-serif; letter-spacing: 0.08em; }

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

        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transition: background-color 0.4s ease, color 0.4s ease;
        }

        /* ============================================================
           DARK THEME (default)
        ============================================================ */
        :root,
        [data-theme="dark"] {
            --bg-page:          #061a2b;
            --bg-section-alt:   #041320;
            --bg-section-light: #082238;
            --bg-surface:       rgba(255,255,255,0.06);
            --bg-surface-mid:   rgba(8,40,64,0.58);
            --bg-surface-card:  #ffffff;

            --text-primary:   #f1f5f9;
            --text-secondary: #a3b1c2;
            --text-tertiary:  rgba(148,163,184,0.92);
            --text-on-card:   #0f172a;

            --border-glass:   rgba(255,255,255,0.12);
            --border-dim:     rgba(255,255,255,0.07);
            --border-blue:    rgba(56,189,248,0.18);

            --shadow-glass:   0 8px 40px rgba(0,0,0,0.45);
            --shadow-card:    0 4px 24px rgba(0,0,0,0.06);
            --shadow-hover:   0 14px 44px rgba(3,105,161,0.13);

            --nav-bg:         rgba(6,26,43,0.72);
            --nav-bg-solid:   rgba(6,26,43,0.95);
            --nav-border:     rgba(255,255,255,0.07);
            --nav-link:       rgba(226,232,240,0.70);
            --nav-link-hover: #ffffff;

            --hero-headline:  #ffffff;
            --hero-sub:       rgba(226,232,240,0.88);

            --step-bg:        #ffffff;
            --step-border:    rgba(226,232,240,0.75);
            --step-text:      #0f172a;
            --step-body:      #475569;
            --steps-section:  linear-gradient(180deg, #f1f5f9 0%, #ffffff 50%, #f8fafc 100%);

            --footer-bg:      #0b1220;
            --footer-border:  rgba(148,163,184,0.14);
            --footer-text:    rgba(203,213,225,0.90);
            --footer-copy:    rgba(163,174,189,0.95);

            --price-info-bg:  rgba(3,105,161,0.11);
            --price-info-border: rgba(56,189,248,0.18);
            --price-info-text: rgba(125,211,252,0.88);
            --price-row-border: rgba(255,255,255,0.06);

            --update-bg: linear-gradient(180deg, #041320 0%, #0f1f5c 50%, #041320 100%);
            --update-text: rgba(226,232,240,0.88);
            --update-sub:  rgba(148,163,184,0.84);
            --accent-text:    #38bdf8;
            --service-icon-color: #38bdf8;
            --quote-panel-bg: rgba(255,255,255,0.05);
            --quote-panel-border: rgba(255,255,255,0.09);
            --quote-text: rgba(226,232,240,0.90);
            --quote-footer-text: #38bdf8;
            --quote-mark-color: rgba(56,189,248,0.15);
        }

        /* ============================================================
           LIGHT THEME
        ============================================================ */
        [data-theme="light"] {
            --bg-page:          #ffffff;
            --bg-section-alt:   #f4f6f8;
            --bg-section-light: #f0f2f5;
            --bg-surface:       rgba(255,255,255,0.96);
            --bg-surface-mid:   #ffffff;
            --bg-surface-card:  #ffffff;

            --text-primary:   #111827;
            --text-secondary: #374151;
            --text-tertiary:  #576070;
            --text-on-card:   #111827;

            --border-glass:   rgba(17,24,39,0.10);
            --border-dim:     rgba(17,24,39,0.07);
            --border-blue:    rgba(3,105,161,0.16);

            --shadow-glass:   0 4px 24px rgba(17,24,39,0.09);
            --shadow-card:    0 2px 16px rgba(17,24,39,0.08);
            --shadow-hover:   0 10px 36px rgba(3,105,161,0.14);

            --nav-bg:         rgba(255,255,255,0.85);
            --nav-bg-solid:   #ffffff;
            --nav-border:     rgba(17,24,39,0.09);
            --nav-link:       #374151;
            --nav-link-hover: #111827;

            --hero-headline:  #111827;
            --hero-sub:       #374151;

            --step-bg:        #ffffff;
            --step-border:    rgba(17,24,39,0.09);
            --step-text:      #111827;
            --step-body:      #374151;
            --steps-section:  #f4f6f8;

            --footer-bg:      #1e293b;
            --footer-border:  rgba(148,163,184,0.18);
            --footer-text:    rgba(203,213,225,0.92);
            --footer-copy:    rgba(163,174,189,0.95);

            --price-info-bg:  rgba(3,105,161,0.05);
            --price-info-border: rgba(3,105,161,0.14);
            --price-info-text: #024a6e;
            --price-row-border: rgba(17,24,39,0.07);

            --update-bg: #ffffff;
            --update-text: #111827;
            --update-sub:  #374151;
            --accent-text:    #0369a1;
            --service-icon-color: #0369a1;
            --quote-panel-bg: #ffffff;
            --quote-panel-border: rgba(17,24,39,0.09);
            --quote-text: #111827;
            --quote-footer-text: #0369a1;
            --quote-mark-color: rgba(3,105,161,0.08);
        }

        /* ============================================================
           GLOBAL BG & TEXT
        ============================================================ */
        html { background-color: var(--bg-page); scroll-padding-top: 5rem; }
        body  { background-color: var(--bg-page); color: var(--text-primary); }

        /* ============================================================
           HERO MESH BACKGROUNDS
        ============================================================ */
        [data-theme="dark"] .bg-mesh-hero {
            background-color: #061a2b;
            background-image:
                radial-gradient(ellipse 80% 60% at 15% 15%, rgba(3,105,161,0.28) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 85% 85%, rgba(6,45,72,0.60) 0%, transparent 65%);
        }

        [data-theme="light"] .bg-mesh-hero {
            background-color: #ffffff;
            background-image:
                radial-gradient(ellipse 70% 50% at 10% 0%, rgba(3,105,161,0.06) 0%, transparent 60%),
                radial-gradient(ellipse 50% 40% at 90% 90%, rgba(219,234,254,0.35) 0%, transparent 65%);
        }

        [data-theme="dark"] .bg-mesh-pricing {
            background-color: #041320;
            background-image:
                radial-gradient(ellipse 70% 55% at 8% 85%, rgba(3,105,161,0.22) 0%, transparent 60%),
                radial-gradient(ellipse 55% 65% at 92% 10%, rgba(6,45,72,0.45) 0%, transparent 60%);
        }

        [data-theme="light"] .bg-mesh-pricing {
            background-color: #f4f6f8;
            background-image: none;
        }

        /* ============================================================
           GLASSMORPHISM COMPONENTS
        ============================================================ */
        .glass-dark {
            background: var(--bg-surface);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border: 1px solid var(--border-glass);
            border-radius: 1.25rem;
            box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,0.09);
        }

        .glass-hero-panel {
            background: var(--bg-surface);
            backdrop-filter: blur(26px);
            -webkit-backdrop-filter: blur(26px);
            border: 1px solid var(--border-glass);
            border-radius: 1.5rem;
            box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,0.08);
        }

        [data-theme="light"] .glass-hero-panel {
            background: #ffffff;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: 1px solid rgba(15,23,42,0.09);
            box-shadow: 0 2px 20px rgba(15,23,42,0.07);
        }

        .glass-pricing-card {
            background: var(--bg-surface-mid);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border: 1px solid var(--border-blue);
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 0 0 1px rgba(3,105,161,0.10), 0 28px 70px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.09);
        }

        [data-theme="light"] .glass-pricing-card {
            background: #ffffff;
            border: 1px solid rgba(3,105,161,0.14);
            box-shadow: 0 4px 32px rgba(15,23,42,0.10);
        }

        .glass-pricing-features {
            background: rgba(4,8,22,0.45);
            border-top: 1px solid rgba(56,189,248,0.11);
        }

        [data-theme="light"] .glass-pricing-features {
            background: #f8fafc;
            border-top: 1px solid rgba(3,105,161,0.10);
        }

        [data-theme="light"] .glass-dark {
            background: #ffffff;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: 1px solid rgba(15,23,42,0.09);
            box-shadow: 0 2px 20px rgba(15,23,42,0.07);
        }

        [data-theme="light"] .glass-quote-panel {
            background: #ffffff;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: 1px solid rgba(15,23,42,0.09);
            box-shadow: 0 2px 20px rgba(15,23,42,0.07);
        }

        .glass-quote-panel {
            background: var(--quote-panel-bg);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border: 1px solid var(--quote-panel-border);
            border-radius: 1.5rem;
            box-shadow: var(--shadow-glass);
            padding: 2.5rem;
            position: relative;
        }

        /* ============================================================
           ANNOUNCEMENT TOPBAR
        ============================================================ */
        .topbar {
            position: relative;
            background: linear-gradient(90deg, #024a6e 0%, #0369a1 55%, #025b8a 100%);
            color: #ffffff;
            border-bottom: 1px solid rgba(255,255,255,0.14);
        }

        [data-theme="light"] .topbar {
            background: #111827;
            border-bottom-color: rgba(17,24,39,0.12);
        }

        .topbar[hidden] { display: none; }

        .topbar-inner {
            max-width: 80rem;
            margin: 0 auto;
            padding: 0.5rem 2.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8125rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            line-height: 1.5;
        }

        .topbar-badge {
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            background: rgba(255,255,255,0.16);
            border: 1px solid rgba(255,255,255,0.28);
            padding: 0.15rem 0.6rem;
            border-radius: 9999px;
            white-space: nowrap;
        }

        .topbar-link {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: #ffffff;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            border-bottom: 1px solid rgba(255,255,255,0.55);
            padding-bottom: 1px;
        }

        .topbar-link:hover { border-bottom-color: #ffffff; }
        .topbar-link svg { width: 0.85rem; height: 0.85rem; }

        .topbar-close {
            position: absolute;
            top: 50%;
            right: 0.5rem;
            transform: translateY(-50%);
            width: 1.75rem;
            height: 1.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 9999px;
            background: none;
            color: rgba(255,255,255,0.72);
            cursor: pointer;
        }

        .topbar-close:hover { color: #ffffff; background: rgba(255,255,255,0.16); }
        .topbar-close svg { width: 0.9rem; height: 0.9rem; }

        .topbar-text-short { display: none; }

        @media (max-width: 640px) {
            .topbar-inner { font-size: 0.75rem; padding: 0.45rem 2.25rem; gap: 0.35rem; }
            .topbar-badge { font-size: 0.625rem; padding: 0.1rem 0.5rem; }
            .topbar-text-full  { display: none; }
            .topbar-text-short { display: inline; }
        }

        /* ============================================================
           NAVIGATION
        ============================================================ */
        .nav-glass {
            background: var(--nav-bg);
            backdrop-filter: blur(22px) saturate(1.5);
            -webkit-backdrop-filter: blur(22px) saturate(1.5);
            border-bottom: 1px solid var(--nav-border);
            box-shadow: 0 1px 24px rgba(0,0,0,0.15);
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        .nav-glass.scrolled {
            background: var(--nav-bg-solid);
            box-shadow: 0 2px 32px rgba(0,0,0,0.20);
        }

        .nav-logo {
            font-family: 'Michroma', sans-serif;
            font-size: 1.15rem;
            letter-spacing: 0.12em;
            color: var(--text-primary);
            text-decoration: none;
        }

        [data-theme="dark"] .nav-logo { text-shadow: 0 0 24px rgba(56,189,248,0.40); }

        .nav-link {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8125rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            color: var(--nav-link);
            padding: 0.4rem 0.9rem;
            border-radius: 9999px;
            transition: color 0.25s ease, background 0.25s ease;
            text-decoration: none;
        }

        .nav-link:hover {
            color: var(--nav-link-hover);
            background: rgba(3,105,161,0.08);
        }

        .btn-nav-cta {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            padding: 0.5rem 1.25rem;
            border-radius: 9999px;
            background: linear-gradient(135deg, #0369a1 0%, #025b8a 100%);
            color: #fff;
            border: 1px solid rgba(56,189,248,0.25);
            box-shadow: 0 0 16px rgba(3,105,161,0.30);
            transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-nav-cta:hover {
            background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
            box-shadow: 0 0 26px rgba(3,105,161,0.55);
            transform: translateY(-1px);
        }

        [data-theme="light"] .btn-nav-cta {
            background: #111827;
            color: #ffffff !important;
            border-color: transparent;
            box-shadow: none;
        }

        [data-theme="light"] .btn-nav-cta:hover {
            background: #374151;
            box-shadow: none;
        }

        /* Theme Toggle (icon button) */
        .theme-toggle {
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 9999px;
            border: 1px solid var(--border-glass);
            background: var(--bg-surface);
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            flex-shrink: 0;
        }

        .theme-toggle:hover {
            background: rgba(3,105,161,0.12);
            border-color: rgba(3,105,161,0.30);
            transform: scale(1.08);
        }

        .theme-toggle svg { width: 1.1rem; height: 1.1rem; }

        .icon-moon { display: block; }
        .icon-sun  { display: none; }
        [data-theme="light"] .icon-moon { display: none; }
        [data-theme="light"] .icon-sun  { display: block; }

        /* Mobile menu */
        #mobile-menu {
            background: var(--nav-bg-solid);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border-top: 1px solid var(--nav-border);
        }

        #mobile-menu a {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--nav-link);
            padding: 0.65rem 1rem;
            border-radius: 0.75rem;
            display: block;
            transition: color 0.25s, background 0.25s;
            text-decoration: none;
        }

        #mobile-menu a:hover { color: var(--nav-link-hover); background: rgba(3,105,161,0.08); }

        /* ============================================================
           HERO
        ============================================================ */
        .hero-section {
            min-height: 92vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 9rem 0 4rem;
        }

        .hero-blob-1 {
            position: absolute; top: -12%; right: -4%;
            width: 58%; height: 72%;
            background: radial-gradient(ellipse, rgba(3,105,161,0.18) 0%, transparent 68%);
            pointer-events: none; z-index: 0;
        }

        .hero-blob-2 {
            position: absolute; bottom: -18%; left: -6%;
            width: 48%; height: 64%;
            background: radial-gradient(ellipse, rgba(56,189,248,0.08) 0%, transparent 68%);
            pointer-events: none; z-index: 0;
        }

        [data-theme="light"] .hero-blob-1 {
            background: radial-gradient(ellipse, rgba(3,105,161,0.08) 0%, transparent 68%);
        }
        [data-theme="light"] .hero-blob-2 {
            background: radial-gradient(ellipse, rgba(3,105,161,0.05) 0%, transparent 68%);
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 1rem;
            border-radius: 9999px;
            background: rgba(3,105,161,0.14);
            border: 1px solid rgba(56,189,248,0.26);
            color: #7dd3fc;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8125rem;
            font-weight: 500;
            letter-spacing: 0.03em;
            backdrop-filter: blur(8px);
            margin-bottom: 1.5rem;
        }

        [data-theme="light"] .hero-badge {
            background: rgba(3,105,161,0.08);
            border-color: rgba(3,105,161,0.22);
            color: #025b8a;
        }

        .hero-headline {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(2.1rem, 4.5vw, 3.5rem);
            line-height: 1.1;
            letter-spacing: -0.025em;
            color: var(--hero-headline);
            margin-bottom: 2rem;
        }

        .hero-headline .accent {
            background: linear-gradient(135deg, #0369a1 0%, #38bdf8 60%, #0ea5e9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        [data-theme="light"] .hero-headline .accent {
            background: linear-gradient(135deg, #025b8a 0%, #0369a1 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }

        .benefit-check {
            width: 1.375rem; height: 1.375rem;
            color: #34d399;
            flex-shrink: 0;
            filter: drop-shadow(0 0 5px rgba(52,211,153,0.45));
        }

        [data-theme="light"] .benefit-check { filter: none; color: #059669; }

        .benefit-text {
            font-size: 1.0625rem;
            color: var(--text-secondary);
            line-height: 1.65;
        }

        .hero-hinweis {
            margin-top: 1.5rem;
            padding: 0.9rem 1.1rem;
            border-radius: 0.875rem;
            background: rgba(3,105,161,0.08);
            border: 1px solid rgba(56,189,248,0.14);
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.68;
        }

        [data-theme="light"] .hero-hinweis {
            background: rgba(3,105,161,0.05);
            border-color: rgba(3,105,161,0.12);
        }

        .btn-hero {
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.9rem 2.1rem;
            border-radius: 9999px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: 0.02em;
            color: #fff;
            background: linear-gradient(135deg, #0369a1 0%, #025b8a 60%, #033d72 100%);
            border: 1px solid rgba(56,189,248,0.22);
            box-shadow: 0 4px 22px rgba(3,105,161,0.40);
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .btn-hero:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 34px rgba(3,105,161,0.60);
        }

        .hero-image-wrapper {
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 28px 80px rgba(0,0,0,0.50);
            transition: transform 0.5s ease, box-shadow 0.5s ease;
        }

        [data-theme="light"] .hero-image-wrapper {
            box-shadow: 0 12px 48px rgba(15,23,42,0.18);
        }

        .hero-image-wrapper:hover {
            transform: translateY(-5px) scale(1.012);
            box-shadow: 0 36px 100px rgba(0,0,0,0.55), 0 0 40px rgba(3,105,161,0.18);
        }

        .hero-image-wrapper img { display: block; width: 100%; border-radius: 1.5rem; }

        @keyframes float-hero {
            0%, 100% { transform: translateY(0px); }
            40%       { transform: translateY(-9px); }
            70%       { transform: translateY(-4px); }
        }
        .animate-float-hero { animation: float-hero 7s ease-in-out infinite; }

        /* ============================================================
           LABELS & TITLES
        ============================================================ */
        .section-label {
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--accent-text);
            /* >= 4mm of air to the heading below (0.875rem was 3.7mm). */
            margin-bottom: 1.25rem;
        }

        [data-theme="dark"] .section-label { color: #38bdf8; }

        .section-title { font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; color: var(--text-primary); }

        /* ============================================================
           PRICING
        ============================================================ */
        .pricing-amount {
            font-family: 'Inter', sans-serif;
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.2;
        }

        [data-theme="dark"] .pricing-amount { color: #fff; }
        [data-theme="light"] .pricing-amount { color: #0f172a; }

        .badge-popular {
            display: inline-flex;
            align-items: center;
            padding: 0.22rem 0.8rem;
            border-radius: 9999px;
            background: rgba(3,105,161,0.14);
            border: 1px solid rgba(3,105,161,0.28);
            color: var(--accent-text);
            font-family: 'Montserrat', sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        [data-theme="dark"] .badge-popular { background: rgba(56,189,248,0.14); border-color: rgba(56,189,248,0.30); color: #7dd3fc; }

        .btn-pricing {
            display: flex; align-items: center; justify-content: center;
            padding: 0.9rem 1.5rem; border-radius: 9999px;
            font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9375rem;
            background: #fff; color: #033d72;
            box-shadow: 0 4px 16px rgba(0,0,0,0.16);
            transition: all 0.25s ease; text-decoration: none;
        }

        [data-theme="light"] .btn-pricing { background: #0369a1; color: #fff; box-shadow: 0 4px 16px rgba(3,105,161,0.35); }
        .btn-pricing:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,0,0,0.22); }
        [data-theme="light"] .btn-pricing:hover { background: #025b8a; box-shadow: 0 8px 26px rgba(3,105,161,0.45); }

        .btn-pricing-secondary {
            display: flex; align-items: center; justify-content: center;
            padding: 0.9rem 1.5rem; border-radius: 9999px;
            font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9375rem;
            background: linear-gradient(135deg, #0369a1 0%, #025b8a 100%);
            color: #fff; box-shadow: 0 4px 20px rgba(3,105,161,0.35);
            transition: all 0.25s ease; text-decoration: none;
        }

        .btn-pricing-secondary:hover { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(3,105,161,0.50); }

        .pricing-info-box {
            background: var(--price-info-bg);
            border: 1px solid var(--price-info-border);
            border-radius: 1rem;
            padding: 1.25rem 1.5rem;
        }

        .pricing-feature-row {
            display: flex; align-items: flex-start; gap: 0.875rem;
            padding: 0.875rem 0;
            border-bottom: 1px solid var(--price-row-border);
            font-size: 1rem;
        }

        .pricing-feature-row:last-child { border-bottom: none; }

        .pricing-card-text { color: var(--text-secondary); font-size: 1rem; line-height: 1.68; }
        [data-theme="light"] .pricing-card-text { color: #475569; }
        [data-theme="dark"] .pricing-card-text { color: rgba(148,163,184,0.84); }

        /* ============================================================
           UPDATE SERVICE
        ============================================================ */
        .update-section { background: var(--update-bg); position: relative; overflow: hidden; }

        [data-theme="dark"] .update-section::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse 60% 45% at 82% 28%, rgba(3,105,161,0.12) 0%, transparent 60%),
                radial-gradient(ellipse 42% 35% at 18% 72%, rgba(56,189,248,0.06) 0%, transparent 60%);
            pointer-events: none;
        }

        .service-icon { width: 1.375rem; height: 1.375rem; color: var(--service-icon-color); flex-shrink: 0; }
        [data-theme="dark"] .service-icon { filter: drop-shadow(0 0 4px rgba(56,189,248,0.40)); }

        .quote-mark {
            font-family: Georgia, serif; font-size: 5rem; line-height: 0.7;
            color: var(--quote-mark-color);
            position: absolute; top: 1.5rem; left: 1.75rem;
            pointer-events: none; user-select: none;
        }

        /* ============================================================
           STEPS SECTION
        ============================================================ */
        .steps-section { background: var(--steps-section); padding: 5rem 0; }
        [data-theme="light"] .steps-section { background: #f4f6f8; }

        .step-number {
            font-family: 'Michroma', sans-serif;
            font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.01em;
            background: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            margin-bottom: 0.95rem;
        }

        [data-theme="light"] .step-number { background: linear-gradient(135deg, #025b8a 0%, #0369a1 100%); -webkit-background-clip: text; background-clip: text; }

        .step-icon-bubble {
            width: 2.75rem; height: 2.75rem; border-radius: 0.875rem;
            background: linear-gradient(135deg, #0369a1 0%, #025b8a 100%);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 16px rgba(3,105,161,0.35);
            margin-bottom: 1.25rem; flex-shrink: 0;
        }

        .step-card {
            background: var(--step-bg);
            border-radius: 1.25rem; padding: 2rem;
            border: 1px solid var(--step-border);
            box-shadow: var(--shadow-card);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            height: 100%;
        }

        .step-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
        .step-card h3 { font-weight: 700; font-size: 1.15rem; color: var(--step-text); margin-bottom: 0.75rem; }
        .step-card p { font-size: 1rem; color: var(--step-body); line-height: 1.75; }

        /* ============================================================
           CTA
        ============================================================ */
        .cta-section {
            position: relative; overflow: hidden;
            background: linear-gradient(135deg, #033d72 0%, #025b8a 42%, #0369a1 72%, #024a6e 100%);
            padding: 5rem 0;
        }

        [data-theme="light"] .cta-section {
            background: linear-gradient(135deg, #024a6e 0%, #0369a1 50%, #025b8a 100%);
        }

        .cta-section::before {
            content: ''; position: absolute; inset: 0;
            background:
                radial-gradient(ellipse 55% 90% at 0% 50%, rgba(255,255,255,0.05) 0%, transparent 60%),
                radial-gradient(ellipse 65% 65% at 100% 50%, rgba(3,61,114,0.35) 0%, transparent 60%);
            pointer-events: none;
        }

        .cta-glass-overlay {
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 2rem; padding: 3rem;
            position: relative; z-index: 1;
        }

        .btn-cta {
            display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
            padding: 1.05rem 2.75rem; border-radius: 9999px;
            width: 100%; max-width: 24rem;
            font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em;
            background: #fff; color: #033d72;
            box-shadow: 0 4px 22px rgba(0,0,0,0.22);
            transition: all 0.25s ease; white-space: nowrap; text-decoration: none;
        }

        .btn-cta:hover { background: #eff6ff; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,0.28); }

        /* ============================================================
           FOOTER
        ============================================================ */
        .footer-section { background: var(--footer-bg); border-top: 1px solid var(--footer-border); padding: 3rem 0; }
        .footer-text { font-size: 0.875rem; color: var(--footer-text); line-height: 1.80; }
        /* Underlined, not colour-only: the link sits inside body text and 1.4.1
           requires a non-colour cue. */
        .footer-link { color: #38bdf8; text-decoration: underline; text-underline-offset: 2px; transition: color 0.25s; }
        .footer-link:hover { color: #7dd3fc; }
        .footer-divider { border-color: var(--footer-border); margin: 2rem 0; }
        .footer-copy { font-size: 0.8125rem; color: var(--footer-copy); }

        /* Responsive grid gap fix (lg:gap-* not in compiled CSS) */
        @media (min-width: 1024px) {
            .section-grid-gap { column-gap: 5rem; }
            .section-grid-gap > *:not(:first-child) { margin-top: 0 !important; }
        }

        /* Smooth theme transition on everything */
        *, nav, section, footer, div, p, h1, h2, h3, h4, span, a {
            transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
        }
        /* But don't transition transforms */
        a, button { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }

/* ============================================================
   REFERENCE LOGOS
   The committed Tailwind build has no h-40, so size these here.
   Logos, not screenshots — contain, never crop.
============================================================ */
.ref-logo {
    height: 9rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: #ffffff;
    border: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* ============================================================
   STEPS GRID
   Plain CSS on purpose: the committed Tailwind build has no
   lg:space-y-0, so `space-y-6` left a 24px top margin on cards
   2 and 3 and card 01 sat higher than the rest.
============================================================ */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

@media (min-width: 1024px) {
    .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ============================================================
   CTA LAYOUT (desktop)
   The committed Tailwind build orders .text-center after
   .lg\:text-left, and has no .lg\:ml-10 at all — so both the
   alignment and the gap have to be set here explicitly.
============================================================ */
@media (min-width: 1024px) {
    .cta-glass-overlay { text-align: left; }
    .cta-glass-overlay > :last-child { margin-left: 2.5rem; }
}

/* ============================================================
   TARIFE (three tiers) + honest comparison
   Plain CSS: the committed Tailwind build cannot be relied on.
============================================================ */
.tarif-grid {
    display: grid;
    /* auto-fit rather than a fixed 3 columns: the tracks are rem-based, so at
       200% text the row collapses to 2 then 1 instead of forcing the page into
       horizontal scrolling (WCAG 1.4.4). */
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 3rem;
}

@media (min-width: 900px) { .tarif-grid { gap: 1.75rem; } }

.tarif {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface-card);
    border: 1px solid var(--quote-panel-border);
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow-card);
}

.tarif-empfohlen {
    border: 2px solid #0369a1;
    box-shadow: 0 12px 40px rgba(3,105,161,0.18);
}

.tarif-badge {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: #0369a1;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.tarif-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-on-card);
}

.tarif-fuer {
    margin-top: 0.95rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-on-card);
    opacity: 0.75;
    min-height: 3rem;
}

.tarif-preis { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.95rem; }

.tarif-einrichtung {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-on-card);
}

.tarif-monat {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #0369a1;
    line-height: 1.15;
}

/* No opacity here: 0.8 blended #0369a1 to #3587b4 = 3.98:1 on white and failed
   WCAG AA. Size and weight already set it apart from the price. */
.tarif-monat-klein { font-size: 0.95rem; font-weight: 600; }

.tarif-laufzeit {
    margin-top: 0.95rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-on-card);
    opacity: 0.7;
}

.btn-tarif {
    display: block;
    margin-top: 1.5rem;
    padding: 0.85rem 1.25rem;
    border-radius: 9999px;
    text-align: center;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    border: 1px solid #0369a1;
    color: #0369a1;
    background: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.btn-tarif:hover { background: rgba(3,105,161,0.08); }

.btn-tarif-primaer {
    background: linear-gradient(135deg, #0369a1 0%, #025b8a 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(3,105,161,0.30);
}

.btn-tarif-primaer:hover { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); }

.tarif-liste {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--price-row-border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
}

.tarif-liste li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-on-card);
}

.tarif-liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 0.95rem;
    height: 0.5rem;
    border-left: 2px solid #059669;
    border-bottom: 2px solid #059669;
    transform: rotate(-45deg);
}

.tarif-vorkasse {
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border-radius: 0.7rem;
    background: var(--price-info-bg);
    border: 1px solid var(--price-info-border);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-on-card);
}

/* --- comparison --- */
.vergleich { margin-top: 4rem; }

.vergleich-titel {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 1.75rem;
}

.vergleich-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 768px) {
    .vergleich-grid { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
}

.vergleich-spalte {
    padding: 1.4rem 1.5rem;
    border-radius: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    text-align: center;
}

.vergleich-wir { border-color: #0369a1; background: var(--price-info-bg); }

.vergleich-kopf {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.vergleich-preis {
    margin-top: 0.95rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

.vergleich-wir .vergleich-preis { color: var(--accent-text); }

.vergleich-text {
    margin-top: 0.95rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ============================================================
   ANSPRECHPARTNER
============================================================ */
.kontakt-karte {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--step-bg);
    border: 1px solid var(--step-border);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: var(--shadow-card);
}

@media (min-width: 640px) { .kontakt-karte { flex-direction: row; gap: 1.75rem; padding: 2.5rem; } }

.kontakt-initialen svg { width: 2rem; height: 2rem; }

.kontakt-initialen {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0369a1 0%, #025b8a 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The card sits on --step-bg, which is #ffffff in BOTH themes, so this needs the
   solid azure — the dark-theme accent is a light sky tone and fails on white. */
.kontakt-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #0369a1;
}

.kontakt-name {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--step-text);
    margin-top: 0.95rem;
}

.kontakt-sub {
    margin-top: 0.95rem;
    font-size: 0.9375rem;
    color: var(--step-body);
    opacity: 0.9;
}

.kontakt-text {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--step-body);
}

.kontakt-mail { margin-top: 1rem; font-size: 1.0625rem; font-weight: 700; }
.kontakt-mail a { color: #0369a1; text-decoration: none; }
.kontakt-mail a:hover { text-decoration: underline; }

/* Legal-text responsibility note under the tiers */
.rechtstexte-hinweis {
    max-width: 52rem;
    margin: 2rem auto 0;
    padding: 1rem 1.25rem;
    border-radius: 0.8rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: center;
}

.rechtstexte-hinweis strong { color: var(--text-primary); }

/* The committed Tailwind build has no mb-14, so the heading block above the
   step cards had a 0mm gap to them. */
.abschnitt-kopf { margin-bottom: 3.5rem; }

/* Footer wordmark link: no underline, hover indication only */
.footer-innomega {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.footer-innomega:hover {
    color: var(--accent-text);
    border-bottom-color: currentColor;
}

/* Keep >= 4mm inside the step cards too (mt-3 is only 12px = 3.2mm). */
.step-card h3 { margin-bottom: 0.95rem; }
.step-card p + p, .step-card .mt-3 { margin-top: 0.95rem; }

/* ============================================================
   FAQ
   Native <details>/<summary>: keyboard-operable and announced by
   screen readers without a line of JavaScript.
============================================================ */
.faq-liste { display: flex; flex-direction: column; gap: 1rem; }

.faq {
    background: var(--bg-surface-card);
    border: 1px solid var(--quote-panel-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-on-card);
}

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

.faq summary::after {
    content: '';
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.35rem;
    border-right: 2px solid #0369a1;
    border-bottom: 2px solid #0369a1;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.faq[open] summary::after { transform: rotate(-135deg); }

.faq summary:hover { background: rgba(3,105,161,0.05); }

.faq summary:focus-visible {
    outline: 3px solid #0369a1;
    outline-offset: -3px;
}

.faq-antwort {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--text-on-card);
}

.faq-antwort p + p { margin-top: 1rem; }

/* ============================================================
   FOCUS VISIBILITY (WCAG 2.4.7)
   The nav CTA and the theme toggle had no visible focus ring at
   all, so keyboard users could not tell where they were.
============================================================ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0369a1;
    outline-offset: 3px;
    border-radius: 0.35rem;
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] summary:focus-visible,
[data-theme="dark"] [tabindex]:focus-visible {
    outline-color: #7dd3fc;
}

/* On the blue CTA band the azure ring would disappear */
.cta-section a:focus-visible,
.topbar a:focus-visible,
.topbar button:focus-visible {
    outline-color: #ffffff;
}

/* ============================================================
   NAV REFLOW (WCAG 1.4.4 - text resized to 200%)
   h-16 pins the bar to 4rem and the link row cannot wrap, so at
   200% text the nav pushed the page into horizontal scrolling.
============================================================ */
.nav-row { flex-wrap: wrap; height: auto; min-height: 4rem; row-gap: 0.5rem; }
.nav-links { flex-wrap: wrap; row-gap: 0.5rem; }

/* ============================================================
   LEGAL PAGES
============================================================ */
/* Long German compounds ("Datenschutz-Aufsichtsbehoerde") overflow a 320px
   viewport otherwise, which fails WCAG 1.4.10 reflow. */
.rechtstext {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--quote-text);
    overflow-wrap: break-word;
    hyphens: auto;
}

.rechtstext h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--quote-text);
    margin-top: 2.25rem;
    margin-bottom: 0.95rem;
}

.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { margin-bottom: 1.1rem; }
.rechtstext a { color: #0369a1; font-weight: 600; }
[data-theme="dark"] .rechtstext a { color: var(--accent-text); }