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

        :root {
            --bg: #f6f3fb;
            --card: #ffffff;
            --card-hover: #f4f0fb;
            --border: #e7e2f0;
            --border-light: #dcd5ea;
            --gold: #c8901a;
            --gold-dim: rgba(240, 185, 11, 0.15);
            --gold-glow: rgba(240, 185, 11, 0.3);
            --green: #16a34a;
            --green-dim: rgba(34, 197, 94, 0.15);
            --text: #4a546a;
            --text-dim: #6c7488;
            --text-muted: #8a92a6;
            --white: #161d2c;
        }

        @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/orbitron-400.woff2') format('woff2'); }
        @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/orbitron-800.woff2') format('woff2'); }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.7;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5 {
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            line-height: 1.2;
        }

        a { color: var(--gold); text-decoration: none; transition: opacity 0.2s; }
        a:hover { opacity: 0.85; }

        /* --- UNIFIED NAV --- */
        .nav-wrapper {
            position: fixed; top: 0; left: 0; right: 0; z-index: 100;
            background: rgba(255,255,255,0.82);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
        }
        .nav {
            display: flex; align-items: center; justify-content: space-between;
            max-width: 1200px; margin: 0 auto; padding: 16px 24px;
            position: relative;
        }
        .nav-brand {
            font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 400;
            letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted);
            text-decoration: none; display: flex; align-items: center; gap: 12px;
            transition: all 0.3s;
        }
        .nav-brand:hover { color: var(--white); }
        .nav-brand strong { font-weight: 800; color: var(--gold); text-shadow: 0 0 20px var(--gold-glow); }
        .nav-logo-line { width: 28px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
        .nav-links { display: flex; gap: 2px; list-style: none; flex-wrap: nowrap; align-items: center; padding: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
        .nav-links li { white-space: nowrap; }
        .nav-links a { font-size: 12.5px; color: var(--text-muted); text-decoration: none; font-weight: 500; padding: 6px 10px; border-radius: 10px; transition: all 0.3s; white-space: nowrap; }
        .nav-links a:hover { color: var(--gold); background: rgba(240,185,11,0.12); opacity: 1; }
        .nav-links a.active { color: var(--gold); background: rgba(240,185,11,0.12); }
        .nav-cta-termin, .nav-cta-compass {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px; border-radius: 8px;
            font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px;
            letter-spacing: 0.5px; text-decoration: none; white-space: nowrap;
            transition: all 0.2s;
        }
        .nav-cta-termin { background: linear-gradient(135deg, #C8A23C, #E8C84A); color: #0a0a14; margin-left: 12px; }
        .nav-cta-compass { background: linear-gradient(135deg, #F0B90B, #D4A20A); color: #000; margin-left: 8px; }
        .nav-cta-termin:hover, .nav-cta-compass:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(240,185,11,0.3); opacity: 1; }
        .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 12px; }
        .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-muted); margin: 6px 0; transition: all 0.4s; }
        @media (max-width: 1280px) {
            .nav-links { gap: 1px; margin-left: 10px; }
            .nav-links a { padding: 5px 7px; font-size: 11.5px; }
            .nav-cta-termin, .nav-cta-compass { padding: 6px 10px; font-size: 11px; }
        }
        @media (max-width: 1100px) {
            .nav-links a { font-size: 11px; padding: 5px 6px; }
            .nav-cta-termin, .nav-cta-compass { padding: 5px 8px; font-size: 10.5px; }
        }
        @media (max-width: 768px) {
            .nav-toggle { display: block; }
            .nav-cta-termin, .nav-cta-compass { display: none !important; }
            .nav-links { display: none; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; transform: none; background: rgba(247,243,251,0.98); justify-content: center; align-items: center; gap: 12px; z-index: 9990; margin: 0; }
            .nav-links.open { display: flex; }
            .nav-links a { font-size: 20px !important; padding: 14px 40px !important; font-weight: 600; }
        }

        /* --- LAYOUT --- */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        section { padding: 6rem 0; }

        /* --- REVEAL ANIMATION --- */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- HERO --- */
        .hero {
            padding: 10rem 0 6rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -50%; left: 50%; transform: translateX(-50%);
            width: 800px; height: 800px;
            background: radial-gradient(circle, var(--gold-dim) 0%, transparent 70%);
            pointer-events: none;
        }
        .hero-badge {
            display: inline-block;
            background: var(--gold-dim);
            border: 1px solid rgba(240, 185, 11, 0.3);
            color: var(--gold);
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.4rem 1rem;
            border-radius: 100px;
            margin-bottom: 2rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .hero h1 {
            font-size: clamp(2.2rem, 5.5vw, 4rem);
            color: var(--white);
            margin-bottom: 1.5rem;
            max-width: 800px;
            margin-left: auto; margin-right: auto;
        }
        .hero h1 span { color: var(--gold); }
        .hero-sub {
            font-size: clamp(1rem, 2vw, 1.2rem);
            color: var(--text-dim);
            max-width: 700px;
            margin: 0 auto 2.5rem;
            line-height: 1.8;
        }
        .hero-cta {
            display: inline-flex; align-items: center; gap: 0.75rem;
            background: var(--gold);
            color: #000;
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
            font-size: 1.1rem;
            padding: 1rem 2.5rem;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
        }
        .hero-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px var(--gold-glow);
            opacity: 1;
        }
        .hero-cta svg { width: 20px; height: 20px; }

        .trust-row {
            display: flex; justify-content: center; gap: 2rem;
            margin-top: 3.5rem;
            flex-wrap: wrap;
        }
        .trust-item {
            display: flex; align-items: center; gap: 0.5rem;
            color: var(--text-dim);
            font-size: 0.9rem;
            font-weight: 500;
        }
        .trust-item svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }

        /* --- SECTION HEADINGS --- */
        .section-label {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 0.75rem;
        }
        .section-title {
            font-size: clamp(1.6rem, 3.5vw, 2.4rem);
            color: var(--white);
            margin-bottom: 1rem;
        }
        .section-desc {
            color: var(--text-dim);
            font-size: 1.05rem;
            max-width: 650px;
            line-height: 1.8;
        }
        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .section-header .section-desc {
            margin-left: auto; margin-right: auto;
        }
        .gold-line {
            width: 60px; height: 3px;
            background: var(--gold);
            border-radius: 2px;
            margin: 1rem auto 0;
        }

        /* --- WHY CARDS --- */
        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
        }
        .why-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            transition: border-color 0.3s, transform 0.3s;
        }
        .why-card:hover {
            border-color: var(--gold);
            transform: translateY(-4px);
        }
        .why-icon {
            width: 48px; height: 48px;
            background: var(--gold-dim);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 1.25rem;
        }
        .why-icon svg { width: 24px; height: 24px; color: var(--gold); }
        .why-card h3 {
            font-size: 1.1rem;
            color: var(--white);
            margin-bottom: 0.75rem;
        }
        .why-card p {
            color: var(--text-dim);
            font-size: 0.95rem;
            line-height: 1.7;
        }

        /* --- STEPS --- */
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            position: relative;
        }
        .step {
            position: relative;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2.5rem 2rem 2rem;
        }
        .step-number {
            position: absolute;
            top: -18px; left: 2rem;
            width: 36px; height: 36px;
            background: var(--gold);
            color: #000;
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 1rem;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
        }
        .step h3 {
            font-size: 1.05rem;
            color: var(--white);
            margin-bottom: 0.75rem;
        }
        .step p {
            color: var(--text-dim);
            font-size: 0.95rem;
            line-height: 1.7;
        }

        /* --- PRICING --- */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.6rem;
            align-items: stretch;
        }
        @media (max-width: 1000px) {
            .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 700px) {
            .pricing-grid { grid-template-columns: minmax(0, 1fr); }
        }
        .pricing-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 2.5rem;
            position: relative;
            transition: border-color 0.3s;
            display: flex;
            flex-direction: column;
        }
        .pricing-card .pricing-features { flex: 1 1 auto; }
        .pricing-card .pricing-btn { margin-top: auto; }
        .pricing-card:hover { border-color: var(--border-light); }
        .pricing-card.featured {
            border-color: var(--gold);
            box-shadow: 0 0 40px rgba(240, 185, 11, 0.08);
        }
        .pricing-card.featured::before {
            content: 'BELIEBT';
            position: absolute;
            top: -12px; right: 2rem;
            background: var(--gold);
            color: #000;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 1px;
            padding: 0.3rem 1rem;
            border-radius: 6px;
        }
        .pricing-tier {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
        }
        .pricing-name {
            font-size: 1.5rem;
            color: var(--white);
            margin-bottom: 1rem;
        }
        .pricing-price {
            font-family: 'Outfit', sans-serif;
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 0.25rem;
            height: 5rem;                  /* FESTE Höhe → alle 3 Karten exakt gleich */
            display: flex; flex-direction: column; justify-content: flex-end;
        }
        .pricing-price span {
            display: block;                /* "einmalig" immer eigene Zeile */
            font-size: 1rem;
            font-weight: 400;
            color: var(--text-dim);
        }
        .pricing-price .amount {           /* € + Zahl bleiben EINE Flex-Zeile, groß & weiß */
            display: block;
            font-size: 2.8rem;
            font-weight: 800;
            line-height: 1;
            color: var(--white);
        }
        .pricing-price .amount .cur {      /* Euro-Zeichen sauber in Inter (Syne-€ wirkt klecksig) */
            display: inline;
            font-family: 'Inter', sans-serif;
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            letter-spacing: -1px;
            margin-right: 1px;
        }
        .pricing-price .poa {             /* "Individuell" — passt in die schmalere gleich-breite Karte */
            display: block;
            font-size: 2.15rem;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -0.5px;
            line-height: 1;
            white-space: nowrap;
        }
        .pricing-note {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            height: 1.1rem;                /* feste Service-Zeile → fluchtet */
        }
        .pricing-divider {
            height: 1px;
            background: var(--border);
            margin: 0 0 1.5rem;
        }
        .pricing-features { list-style: none; margin-bottom: 2rem; }
        .pricing-features li {
            display: flex; align-items: flex-start; gap: 0.75rem;
            padding: 0.5rem 0;
            font-size: 0.95rem;
            color: var(--text);
        }
        .pricing-features li svg {
            width: 18px; height: 18px;
            color: var(--green);
            flex-shrink: 0;
            margin-top: 2px;
        }
        .pricing-features li.highlight { color: var(--gold); font-weight: 600; }
        .pricing-features li.highlight svg { color: var(--gold); }
        .pricing-btn {
            display: block;
            width: 100%;
            text-align: center;
            padding: 0.9rem;
            border-radius: 10px;
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
        }
        .pricing-btn:hover { transform: translateY(-2px); opacity: 1; }
        .pricing-btn-primary {
            background: var(--gold);
            color: #000;
        }
        .pricing-btn-primary:hover { box-shadow: 0 6px 24px var(--gold-glow); }
        .pricing-btn-secondary {
            background: transparent;
            color: var(--gold);
            border: 2px solid var(--gold);
        }
        .pricing-btn-secondary:hover { background: var(--gold-dim); }

        /* --- MAINTENANCE --- */
        .maintenance {
            background: linear-gradient(135deg, rgba(19, 24, 32, 0.8), rgba(10, 14, 20, 0.8));
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 3rem;
        }
        .maintenance-grid {            /* eine zentrierte Fläche, kein Links/Rechts mehr */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2.75rem;
            margin-top: 2.5rem;
        }
        .maintenance-features {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.15rem 2.5rem;
            max-width: 820px;
            width: 100%;
        }
        .maintenance-features li {
            display: flex; align-items: flex-start; gap: 0.75rem;
            padding: 0.6rem 0;
            font-size: 0.95rem;
            color: var(--text);
        }
        .maintenance-features li svg {
            width: 18px; height: 18px;
            color: var(--green);
            flex-shrink: 0;
            margin-top: 3px;
        }
        .maintenance-summary {         /* zentrierter Abschluss, verschmilzt mit der Liste darüber */
            text-align: center;
            display: flex; flex-direction: column; align-items: center;
            max-width: 470px;
        }
        .maintenance-tier {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 1.5rem;
            text-align: center;
        }
        .maintenance-tier-name {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 0.25rem;
        }
        .maintenance-tier-price {
            font-family: 'Outfit', sans-serif;
            font-size: 2rem;
            font-weight: 800;
            color: var(--white);
        }
        .maintenance-tier-price span {
            font-size: 0.9rem;
            font-weight: 400;
            color: var(--text-dim);
        }
        .maintenance-alt {
            text-align: center;
            padding: 1rem;
            background: rgba(42, 48, 64, 0.3);
            border-radius: 10px;
            font-size: 0.9rem;
            color: var(--text-dim);
        }
        .maintenance-alt strong { color: var(--text); }
        /* Rundum-Sorglos Highlight-Karte (rechte Spalte) */
        .maintenance-highlight {     /* Teil der einen Karte — KEINE Linie, verschmilzt mit der Liste */
            align-self: center;
            display: flex; flex-direction: column; justify-content: center;
            text-align: center;
            padding: 0.5rem 0;
        }
        .mh-badge {
            width: 54px; height: 54px; border-radius: 14px;
            margin: 0 auto 1.25rem;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #F0B90B, #C8A23C);
            color: #0a0a14;
        }
        .mh-badge svg { width: 28px; height: 28px; }
        .mh-title {
            font-family: 'Outfit', sans-serif;
            font-size: 1.5rem; font-weight: 800; color: var(--white);
            margin-bottom: 0.75rem;
        }
        .mh-text {
            font-size: 0.98rem; line-height: 1.6; color: var(--text-dim);
            max-width: 340px; margin: 0 auto;
        }
        .mh-text strong { color: var(--text); font-weight: 600; }
        .mh-divider { height: 1px; background: var(--border); margin: 1.75rem auto; width: 80%; }
        .mh-extra-label {
            display: block; font-size: 0.8rem; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem;
        }
        .mh-extra-price {
            font-family: 'Inter', sans-serif; font-size: 1.9rem; font-weight: 800; color: var(--gold); letter-spacing: -0.3px;
        }
        .mh-extra-price span {
            font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 400; color: var(--text-dim);
        }
        @media (max-width: 768px) {
            .maintenance-highlight { padding: 1.5rem 0 0.5rem; }
        }

        /* --- DASHBOARD HIGHLIGHT --- */
        .dashboard-section {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 24px;
            overflow: hidden;
        }
        .dashboard-content { padding: 3rem; }
        .dashboard-mockup {
            background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            margin: 2rem 0 0;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
        /* Fertige Rechnung als schwebendes Dokument (Hochformat) */
        .invoice-doc {
            max-width: 430px;
            margin: 2.5rem auto 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 30px 70px rgba(0,0,0,0.55);
            border: 1px solid var(--border);
        }
        .invoice-doc img { width: 100%; display: block; }
        .mockup-header {
            display: flex; align-items: center; gap: 0.5rem;
            margin-bottom: 1.5rem;
        }
        .mockup-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
        }
        .mockup-dot:nth-child(1) { background: #ff5f56; }
        .mockup-dot:nth-child(2) { background: #ffbd2e; }
        .mockup-dot:nth-child(3) { background: #27c93f; }
        .mockup-rows { display: flex; flex-direction: column; gap: 0.75rem; }
        .mockup-row {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
            gap: 1rem;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            background: rgba(20,20,50,0.03);
            font-size: 0.85rem;
        }
        .mockup-row.header {
            background: transparent;
            color: var(--text-muted);
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .mockup-row:not(.header) { color: var(--text); }
        .mockup-amount { color: var(--green); font-weight: 600; }
        .mockup-tag {
            display: inline-block;
            background: var(--green-dim);
            color: var(--green);
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
        }
        .dashboard-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-top: 2rem;
        }
        .dashboard-feature {
            display: flex; align-items: flex-start; gap: 0.75rem;
            padding: 0.75rem;
        }
        .dashboard-feature svg {
            width: 18px; height: 18px;
            color: var(--gold);
            flex-shrink: 0;
            margin-top: 2px;
        }
        .dashboard-feature span {
            font-size: 0.95rem;
            color: var(--text);
        }
        .dashboard-tagline {
            text-align: center;
            margin-top: 2rem;
            font-family: 'Outfit', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--gold);
        }

        /* --- SECURITY --- */
        .security-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
        }
        .security-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
        }
        .security-icon {
            width: 56px; height: 56px;
            background: var(--green-dim);
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1.25rem;
        }
        .security-icon svg { width: 26px; height: 26px; color: var(--green); }
        .security-card h3 {
            font-size: 1.05rem;
            color: var(--white);
            margin-bottom: 0.75rem;
        }
        .security-card p {
            color: var(--text-dim);
            font-size: 0.9rem;
            line-height: 1.7;
        }

        /* --- ABOUT --- */
        .about-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 3rem;
            display: flex;
            gap: 3rem;
            align-items: center;
        }
        .about-avatar {
            width: 140px; height: 180px;
            background: linear-gradient(135deg, var(--gold), #d4a50a);
            border-radius: 20px;
            flex-shrink: 0;
            overflow: hidden;
            box-shadow: 0 0 0 2px rgba(240,185,11,0.25);
        }
        .about-avatar img {
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: center 18%;
            display: block;
        }
        .about-text h3 {
            font-size: 1.3rem;
            color: var(--white);
            margin-bottom: 0.25rem;
        }
        .about-role {
            color: var(--gold);
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .about-text p {
            color: var(--text-dim);
            font-size: 0.95rem;
            line-height: 1.8;
            margin-bottom: 1rem;
        }
        .about-stats {
            display: flex; gap: 2rem;
            margin-top: 1.5rem;
        }
        .about-stat {
            text-align: center;
        }
        .about-stat-number {
            font-family: 'Outfit', sans-serif;
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--gold);
        }
        .about-stat-label {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        /* --- FAQ --- */
        .faq-list { max-width: 800px; margin: 0 auto; }
        .faq-item {
            border-bottom: 1px solid var(--border);
        }
        .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 1.5rem 0;
            background: none;
            border: none;
            color: var(--white);
            font-family: 'Outfit', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
            gap: 1rem;
        }
        .faq-question:hover { color: var(--gold); }
        .faq-icon {
            width: 28px; height: 28px;
            border: 2px solid var(--border);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: transform 0.3s, border-color 0.3s;
        }
        .faq-icon svg { width: 14px; height: 14px; color: var(--text-dim); }
        .faq-item.active .faq-icon {
            transform: rotate(45deg);
            border-color: var(--gold);
        }
        .faq-item.active .faq-icon svg { color: var(--gold); }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.3s ease;
        }
        .faq-item.active .faq-answer {
            max-height: 300px;
            padding-bottom: 1.5rem;
        }
        .faq-answer p {
            color: var(--text-dim);
            font-size: 0.95rem;
            line-height: 1.8;
        }

        /* --- CTA SECTION --- */
        .cta-section {
            text-align: center;
            position: relative;
        }
        .cta-section::before {
            content: '';
            position: absolute;
            top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 600px; height: 600px;
            background: radial-gradient(circle, var(--gold-dim) 0%, transparent 70%);
            pointer-events: none;
        }
        .cta-section h2 {
            font-size: clamp(1.8rem, 4vw, 2.6rem);
            color: var(--white);
            margin-bottom: 1rem;
        }
        .cta-section p {
            color: var(--text-dim);
            font-size: 1.1rem;
            margin-bottom: 2.5rem;
        }

        /* --- FOOTER --- */
        .footer {
            border-top: 1px solid var(--border);
            padding: 2.5rem 0;
            text-align: center;
        }
        .footer-brand {
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 1rem;
            color: var(--white);
            margin-bottom: 0.5rem;
        }
        .footer-brand span { color: var(--gold); }
        .footer-tagline {
            color: var(--text-muted);
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }
        .footer-links a {
            color: var(--text-dim);
            font-size: 0.85rem;
        }
        .footer-links a:hover { color: var(--gold); }
        .footer-contact {
            color: var(--text-dim);
            font-size: 0.85rem;
            margin-bottom: 1.5rem;
        }
        .footer-disclaimer {
            max-width: 700px;
            margin: 0 auto;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 0.75rem;
            line-height: 1.7;
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 768px) {
            section { padding: 4rem 0; }
            .hero { padding: 7rem 0 4rem; }
            .trust-row { gap: 1rem; }
            .trust-item { font-size: 0.8rem; }
            .maintenance-features { grid-template-columns: 1fr; gap: 0.15rem; }
            .about-card { flex-direction: column; text-align: center; padding: 2rem; }
            .about-stats { justify-content: center; }
            .mockup-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; }
            .mockup-row > :nth-child(n+4) { display: none; }
            .pricing-grid { grid-template-columns: 1fr; }
            .maintenance { padding: 2rem; }
            .dashboard-content { padding: 2rem; }
        }

        @media (max-width: 480px) {
            .container { padding: 0 1rem; }
            .hero-cta { padding: 0.9rem 1.75rem; font-size: 1rem; }
        }
/* FOOTER POLISH 2026-04-23 */
.footer { padding: 40px 24px 32px !important; text-align: center !important; border-top: 1px solid rgba(20,20,50,0.07) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; background: transparent !important; }
.footer .footer-brand { font-family: 'Orbitron','Outfit',sans-serif; font-size: 13px; letter-spacing: 3px; color: #55556a; text-transform: uppercase; }
.footer .footer-brand strong { color: #f0b90b !important; font-weight: 800; }
.footer .footer-links { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px 24px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer .footer-links a { color: #8a8a9a !important; font-size: 13px !important; text-decoration: none !important; transition: color 0.2s; }
.footer .footer-links a:hover { color: #f0b90b !important; }
.footer .footer-copy { color: #55556a; font-size: 12px; }
/* MOBILE-FIX 2026-06-02: dekorative Glows (hero/cta ::before) nicht horizontal scrollen lassen */
html, body { overflow-x: hidden; }
/* === Cookie-Banner === */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:none;background:rgba(13,17,23,0.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);box-shadow:0 -12px 40px rgba(0,0,0,0.45)}
.cookie-banner.show{display:block}
.cookie-inner{max-width:1100px;margin:0 auto;padding:1.1rem 1.5rem;display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}
.cookie-text{flex:1 1 340px;min-width:0}
.cookie-text strong{display:block;font-size:0.95rem;color:var(--white);margin-bottom:0.3rem;font-weight:700}
.cookie-text p{font-size:0.82rem;line-height:1.65;color:var(--text-dim);margin:0}
.cookie-text a{color:var(--gold);text-decoration:underline}
.cookie-ok{background:var(--gold);color:#0a0a14;border:0;border-radius:10px;padding:0.85rem 2rem;font-size:0.9rem;font-weight:700;cursor:pointer;font-family:inherit}
.cookie-ok:hover{opacity:0.88}
@media(max-width:640px){.cookie-inner{flex-direction:column;align-items:stretch;gap:1rem}.cookie-ok{width:100%}}
/* === Ratgeber-Hub === */
#ratgeber-hub{padding:140px 0 5rem}
.rg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.rg-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.8rem;transition:border-color .3s,transform .3s;text-decoration:none}
.rg-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.rg-tag{align-self:flex-start;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);background:var(--gold-dim);padding:.3rem .7rem;border-radius:20px;margin-bottom:1rem}
.rg-card h3{color:var(--white);font-size:1.2rem;margin-bottom:.7rem;line-height:1.3}
.rg-card p{color:var(--text-dim);font-size:.92rem;line-height:1.6;flex:1;margin-bottom:1.2rem}
.rg-more{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);font-weight:600;font-size:.9rem}
.rg-more svg{width:16px;height:16px}
/* === Artikel === */
.article-wrap{max-width:820px;margin:0 auto;padding:140px 1.5rem 4rem}
.crumb{font-size:.8rem;color:var(--text-muted);margin-bottom:1.5rem}
.crumb a{color:var(--text-dim);text-decoration:none}.crumb a:hover{color:var(--gold)}
.art-kicker{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.8rem;margin-bottom:1rem}
.art-h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;color:var(--white);margin-bottom:1.2rem}
.art-meta{color:var(--text-muted);font-size:.85rem;margin-bottom:2rem;display:flex;gap:1.2rem;flex-wrap:wrap}
.art-lead{font-size:1.2rem;line-height:1.7;color:var(--text-dim);margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.article-body h2{font-size:1.55rem;color:var(--white);margin:2.6rem 0 1rem}
.article-body h3{font-size:1.18rem;color:var(--white);margin:1.8rem 0 .6rem}
.article-body p{color:var(--text-dim);line-height:1.85;margin-bottom:1.1rem;font-size:1.02rem}
.article-body ul,.article-body ol{color:var(--text-dim);line-height:1.8;margin:0 0 1.2rem 1.3rem}
.article-body li{margin-bottom:.5rem}
.article-body strong{color:var(--text)}
.article-body a{color:var(--gold);text-decoration:underline}
.article-body em{color:var(--text);font-style:italic}
.art-callout{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:12px;padding:1.2rem 1.5rem;margin:1.8rem 0}
.art-callout p{margin:0;color:var(--text-dim);line-height:1.7}
.art-cta{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2.2rem;margin:3rem 0;text-align:center}
.art-cta h3{margin:0 0 .6rem;color:var(--white);font-size:1.35rem}
.art-cta p{color:var(--text-dim);margin:0 0 1.5rem;line-height:1.7}
.art-faq{margin:3rem 0}
.art-faq h2{font-size:1.55rem;color:var(--white);margin-bottom:1.2rem}
.afaq{border:1px solid var(--border);border-radius:12px;margin-bottom:.8rem;background:var(--card);padding:1.1rem 1.4rem}
.afaq h3{margin:0 0 .5rem;font-size:1.05rem;color:var(--white)}
.afaq p{margin:0;color:var(--text-dim);line-height:1.75}
.related{margin:3rem 0 1rem}
.related h2{font-size:1.2rem;color:var(--white);margin-bottom:.8rem}
.related a{display:block;padding:.7rem 0;color:var(--gold);border-top:1px solid var(--border);text-decoration:none}
.related a:hover{padding-left:6px;transition:padding .2s}

/* dark mode */
:root[data-theme="dark"]{--bg:#0a0e14;--card:#131820;--card-hover:#1a2230;--border:#2a3040;--border-light:#384050;--gold:#F0B90B;--green:#22c55e;--text:#e8eaed;--text-dim:#8b95a5;--text-muted:#5a6577;--white:#ffffff;}
[data-theme="dark"] .nav-wrapper{background:rgba(5,5,8,0.92);}
@media(max-width:900px){[data-theme="dark"] .nav-links{background:#06070d !important;}}

.nav-right{display:flex;align-items:center;gap:10px;}
.theme-toggle{background:none;border:1px solid var(--border);border-radius:10px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted,#8a92a6);transition:color .25s,border-color .25s;padding:0;flex-shrink:0;}
.theme-toggle:hover{color:var(--gold);border-color:var(--gold);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .ic-sun{display:none;}.theme-toggle .ic-moon{display:block;}
[data-theme="dark"] .theme-toggle .ic-sun{display:block;}[data-theme="dark"] .theme-toggle .ic-moon{display:none;}

/* --- Mobile-Menü-Optimierung 2026-06-19 --- */
@media (max-width: 900px){
  .nav-links.open a{ color: var(--white) !important; opacity:1 !important; }
  .nav-toggle.open span{ background: var(--white) !important; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity: 0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
  body.nav-open{ overflow: hidden; }
  body.nav-open .cookie-banner{ display: none !important; }
}