/* x10aix — Startseite. Gemeinsame Tokens: /styles.css */


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

        body {
            font-family: var(--x-font-ui);
            background: var(--x-bg);
            color: var(--x-ink);
            line-height: var(--x-lh-prose);



        }

        .scan-lines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0.15),
                    rgba(0, 0, 0, 0.15) 1px,
                    transparent 1px,
                    transparent 2px);
            pointer-events: none;
            z-index: 1000;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .terminal-border {
            border: 1px solid var(--x-line-strong);
            background: var(--x-bg-terminal);
            box-shadow:
                inset 0 0 10px rgba(0, 0, 0, 0.8),
                0 0 20px rgba(0, 0, 0, 0.5);
            padding: 8px;
            margin: 20px 0;
        }

        header {
            text-align: center;
            padding: 40px 20px;
            border-bottom: 1px solid var(--x-line-strong);
            position: relative;
            /* Background image replaced by <img> tag for LCP optimization */
            overflow: hidden;
            min-height: 70vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .header-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom,
                    rgba(20, 18, 15, 0.80) 0%,
                    rgba(20, 18, 15, 0.82) 40%,
                    rgba(20, 18, 15, 0.85) 100%);
            z-index: 1;
        }

        /* HDR-Bildschirme: Video erscheint heller als CSS-Overlay (SDR vs. HDR Luminanz).
           Overlay-Deckkraft erhöhen um gleiche Lesbarkeit zu gewährleisten. */
        @media (dynamic-range: high) {
            header::before {
                background: linear-gradient(to bottom,
                        rgba(20, 18, 15, 0.94) 0%,
                        rgba(20, 18, 15, 0.95) 40%,
                        rgba(20, 18, 15, 0.96) 100%);
            }
        }

        header>* {
            position: relative;
            z-index: 2;
        }

        .logo {
            font-size: 48px;
            color: var(--x-ink-bright);
            text-shadow:
                2px 2px 0 var(--x-line-hair),
                4px 4px 0 rgba(0, 0, 0, 0.5);
            letter-spacing: 4px;
            margin-bottom: 10px;
        }

        .tagline {
            font-size: 16px;
            color: var(--x-ink-muted);
            margin-top: 10px;
        }

        .status-bar {
            background: var(--x-statusbar-bg);
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12.5px;
            border: 1px solid var(--x-blue-deep);
        }

        .status-indicator {
            color: var(--x-execute);
            animation: blink 3s infinite;
        }

        @keyframes blink {

            0%,
            49% {
                opacity: 1;
            }

            50%,
            100% {
                opacity: 0;
            }
        }

        .section {
            padding: 30px;
            margin: 20px 0;
        }

        .section-title {
            font-size: 24px;
            color: var(--x-ink-bright);
            margin-bottom: 20px;
            text-align: center;
            text-transform: uppercase;
            border-bottom: 1px solid var(--x-line-strong);
            padding-bottom: 10px;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .service-card {
            background: var(--x-bg-raised);
            border: 1px solid var(--x-line);
            padding: 20px;
            position: relative;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg,
                    transparent,
                    var(--x-blue) 50%,
                    transparent);
        }

        .service-card h3 {
            font-size: 18px;
            color: var(--x-blue-light);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .service-card p {
            font-size: 15px;
            line-height: 1.4;
            color: var(--x-ink-soft);
        }

        .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            background: var(--x-blue);
            border: 1px solid var(--x-blue-deep);
        }

        .benefits {
            background: var(--x-bg-sunken);
            padding: 20px;
            margin: 20px 0;
        }

        .benefit-item {
            padding: 15px;
            margin: 10px 0;
            background: var(--x-bg-raised);
            border-left: 3px solid var(--x-blue);
            font-size: 15px;
        }

        .benefit-item::before {
            content: '▶ ';
            color: var(--x-execute);
            margin-right: 10px;
        }

        .contact-section {
            background: linear-gradient(180deg, var(--x-bg) 0%, var(--x-bg-terminal) 100%);
        }

        .form-container {
            max-width: 600px;
            margin: 0 auto;
            background: var(--x-bg-raised);
            padding: 30px;
            border: 1px solid var(--x-line-strong);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-size: 15px;
            color: var(--x-blue-light);
            margin-bottom: 8px;
        }

        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 12px;
            font-family: var(--x-font-ui);
            font-size: 15px;
            background: var(--x-bg-terminal);
            border: 1px solid var(--x-line-strong);
            color: var(--x-ink);
            outline: none;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        textarea:focus {
            border-color: var(--x-blue);
            box-shadow: 0 0 10px rgba(107, 141, 184, 0.3);
        }

        textarea {
            resize: vertical;
            min-height: 150px;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            font-family: var(--x-font-ui);
            font-size: 16px;
            background: var(--x-blue-deep);
            color: var(--x-ink-bright);
            border: 1px solid var(--x-blue);
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.3s;
        }

        .submit-btn:hover {
            background: var(--x-blue);
            box-shadow: 0 0 20px rgba(107, 141, 184, 0.5);
            transform: translateY(-2px);
        }

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

        footer {
            text-align: center;
            padding: 30px;
            background: var(--x-bg-terminal);
            border-top: 1px solid var(--x-line-strong);
            font-size: 12.5px;
            color: var(--x-ink-muted);
        }

        .interest-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        @media (max-width: 600px) {
            .interest-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }

        .glitch {
            animation: glitch 3s infinite;
        }

        @keyframes glitch {

            0%,
            90%,
            100% {
                transform: translate(0);
            }

            92% {
                transform: translate(-2px, 2px);
            }

            94% {
                transform: translate(2px, -2px);
            }

            96% {
                transform: translate(-2px, -2px);
            }
        }

        .pixel-pattern {
            background-image:
                repeating-linear-gradient(0deg,
                    transparent,
                    transparent 2px,
                    rgba(107, 93, 79, 0.1) 2px,
                    rgba(107, 93, 79, 0.1) 4px),
                repeating-linear-gradient(90deg,
                    transparent,
                    transparent 2px,
                    rgba(107, 93, 79, 0.1) 2px,
                    rgba(107, 93, 79, 0.1) 4px);
        }

        @media (max-width: 600px) {
            header {
                min-height: auto;
                padding: 60px 15px;
                background-size: cover;
                background-position: center 30%;
            }

            header::before {
                background: rgba(20, 18, 15, 0.85);
            }
        }

        h1.logo,
        header .logo {
            text-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
        }

        header .tagline,
        header>div {
            text-shadow: 0 0 15px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.8);
        }

        .hero-cta {
            margin-top: 30px;
        }

        .cta-button {
            display: inline-block;
            padding: 12px 32px;
            background: rgba(74, 107, 138, 0.8);
            color: var(--x-ink-bright);
            font-family: var(--x-font-ui);
            font-size: 15px;
            text-decoration: none;
            border: 1px solid rgba(74, 107, 138, 0.6);
            letter-spacing: 1px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .cta-button:hover {
            background: rgba(74, 107, 138, 1);
            border-color: var(--x-ink-bright);
            box-shadow: 0 0 15px rgba(74, 107, 138, 0.4);
            text-shadow: 0 0 8px rgba(232, 212, 160, 0.5);
        }

        /* Chatbot Widget Styles - Moved to <link> tag */

        /* === DOS Navigation Bar === */
        .dos-nav {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(30, 28, 25, 0.95);
            border-bottom: 1px solid rgba(168, 153, 104, 0.3);
            backdrop-filter: blur(4px);
            font-family: var(--x-font-ui);
            font-size: 12.5px;
        }

        .nav-link {
            color: var(--x-ink-muted);
            text-decoration: none;
            padding: 4px 12px;
            transition: all 0.2s ease;
        }

        .nav-link:hover {
            color: var(--x-ink-bright);
            text-shadow: 0 0 6px rgba(232, 212, 160, 0.4);
        }

        .nav-cta {
            color: var(--x-ink-bright);
            background: rgba(232, 160, 48, 0.2);
            border: 1px solid var(--x-enable);
        }

        .nav-cta:hover {
            background: rgba(232, 160, 48, 0.4);
            color: var(--x-enable);
            text-shadow: 0 0 6px rgba(232, 160, 48, 0.4);
        }

        /* === Footer Contact Links === */
        .footer-contact a {
            color: var(--x-ink-muted);
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-contact a:hover {
            color: var(--x-ink-bright);
        }

        .footer-sep {
            margin: 0 12px;
            color: #5a5340;
        }

        /* === Responsive Nav === */
        @media (max-width: 600px) {
            .dos-nav {
                flex-wrap: wrap;
                font-size: 15px;
                gap: 4px;
            }

            .nav-link {
                padding: 4px 8px;
            }

            .cta-button {
                font-size: 12.5px;
                padding: 10px 24px;
            }
        }

        @media (max-width: 768px) {
            .mission-content {
                flex-direction: column !important;
            }

            .mission-content p {
                text-align: center !important;
            }
        }

        /* Sounding Board Accents */
        .color-amber {
            color: var(--x-enable);
        }

        .border-amber {
            border-color: var(--x-enable) !important;
        }

        .color-cyan {
            color: var(--x-establish);
        }

        .border-cyan {
            border-color: var(--x-establish) !important;
        }

        .pricing-card {
            background: var(--x-bg-raised);
            padding: 20px;
            flex: 1;
            min-width: 250px;
            border: 1px solid var(--x-line-strong);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: block;
            color: inherit;
        }

        .pricing-card.border-amber:hover {
            background: rgba(232, 160, 48, 0.1);
            box-shadow: 0 0 15px rgba(232, 160, 48, 0.4);
            transform: translateY(-2px);
        }

        .pricing-card.border-cyan:hover {
            background: rgba(0, 188, 212, 0.1);
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
            transform: translateY(-2px);
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            background: var(--x-bg-raised);
            border: 1px solid var(--x-line-strong);
        }

        .comparison-table th {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--x-line);
            background: var(--x-bg-sunken);
            color: var(--x-blue-light);
            font-size: 15px;
        }

        .comparison-table td {
            padding: 12px;
            border-bottom: 1px solid var(--x-line-hair);
            font-size: 15px;
            width: 50%;
            vertical-align: top;
        }

        @media (max-width: 600px) {
            .pricing-container {
                flex-direction: column;
            }

            .comparison-table th,
            .comparison-table td {
                font-size: 12.5px;
                padding: 8px;
            }
        }

        /* EEEE Cycle Grid Styles */
        .cycle-container {
            max-width: 800px;
            margin: 0 auto 40px auto;
        }

        .cycle-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            position: relative;
        }

        @media (max-width: 768px) {
            .cycle-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        .cycle-card {
            background: var(--x-bg-raised);
            border: 1px solid var(--x-line);
            padding: 25px;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 150px;
        }

        .cycle-card:hover {
            transform: translateY(-2px);
        }

        .cycle-card h3 {
            font-size: 24px;
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        /* Themed Hover Effects */
        .cycle-card.theme-enable h3 { color: var(--x-enable); }
        .cycle-card.theme-enable:hover {
            border-color: var(--x-enable);
            background: rgba(232, 160, 48, 0.1);
            box-shadow: 0 0 15px rgba(232, 160, 48, 0.3);
        }

        .cycle-card.theme-establish h3 { color: var(--x-establish); }
        .cycle-card.theme-establish:hover {
            border-color: var(--x-establish);
            background: rgba(0, 188, 212, 0.1);
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        }

        .cycle-card.theme-execute h3 { color: var(--x-execute); }
        .cycle-card.theme-execute:hover {
            border-color: var(--x-execute);
            background: rgba(95, 211, 95, 0.1);
            box-shadow: 0 0 15px rgba(95, 211, 95, 0.3);
        }

        .cycle-card.theme-evolve h3 { color: var(--x-blue); }
        .cycle-card.theme-evolve:hover {
            border-color: var(--x-blue);
            background: rgba(107, 141, 184, 0.1);
            box-shadow: 0 0 15px rgba(107, 141, 184, 0.3);
        }

        .cycle-card .subtitle {
            font-size: 15px;
            color: var(--x-ink-soft);
        }

        /* Visual Connectors for Desktop */
        @media (min-width: 769px) {
            .cycle-card:nth-child(3) {
                order: 4; /* Move Execute to Bottom Right visually */
            }
            .cycle-card:nth-child(4) {
                order: 3; /* Move Evolve to Bottom Left visually */
            }

            .cycle-card:nth-child(1)::after {
                content: '→';
                position: absolute;
                right: -32px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--x-ink-muted);
                font-size: 24px;
                z-index: 1;
            }
            .cycle-card:nth-child(2)::after {
                content: '↓';
                position: absolute;
                bottom: -32px;
                left: 50%;
                transform: translateX(-50%);
                color: var(--x-ink-muted);
                font-size: 24px;
                z-index: 1;
            }
            .cycle-card:nth-child(3)::after {
                content: '←';
                position: absolute;
                left: -32px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--x-ink-muted);
                font-size: 24px;
                z-index: 1;
            }
            .cycle-card:nth-child(4)::after {
                content: '↑';
                position: absolute;
                top: -32px;
                left: 50%;
                transform: translateX(-50%);
                color: var(--x-ink-muted);
                font-size: 24px;
                z-index: 1;
            }
        }

        /* Visual Connectors for Mobile */
        @media (max-width: 768px) {
            .cycle-card:not(:last-child)::after {
                content: '↓';
                position: absolute;
                bottom: -26px;
                left: 50%;
                transform: translateX(-50%);
                color: var(--x-ink-muted);
                font-size: 24px;
                z-index: 1;
            }
        }

        .pillar-detail {
            background: var(--x-bg-sunken);
            border: 1px solid var(--x-line-hair);
            padding: 30px;
            margin-top: 30px;
            border-left-width: 3px;
            border-left-style: solid;
        }

        .pillar-detail h3 {
            font-size: 18px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--x-line-hair);
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pillar-detail.theme-enable { border-left-color: var(--x-enable); }
        .pillar-detail.theme-enable h3 { color: var(--x-enable); }

        .pillar-detail.theme-establish { border-left-color: var(--x-establish); }
        .pillar-detail.theme-establish h3 { color: var(--x-establish); }

        .pillar-detail.theme-execute { border-left-color: var(--x-execute); }
        .pillar-detail.theme-execute h3 { color: var(--x-execute); }

        .pillar-detail.theme-evolve { border-left-color: var(--x-blue); }
        .pillar-detail.theme-evolve h3 { color: var(--x-blue); }


                .faq-container {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                    margin-top: 30px;
                }
                .faq-item {
                    background: var(--x-bg-raised);
                    border: 1px solid var(--x-line);
                    transition: all 0.3s ease;
                }
                .faq-item:hover, .faq-item[open] {
                    border-color: var(--x-blue);
                    box-shadow: 0 0 15px rgba(107, 141, 184, 0.3);
                }
                .faq-item:hover summary {
                    color: var(--x-ink-bright);
                }
                .faq-item summary {
                    padding: 20px;
                    font-size: 16px;
                    color: var(--x-blue-light);
                    cursor: pointer;
                    list-style: none;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .faq-item summary::after {
                    content: '▼';
                    font-size: 12.5px;
                    color: var(--x-ink-muted);
                    transition: transform 0.3s;
                }
                .faq-item[open] summary::after {
                    transform: rotate(180deg);
                    color: var(--x-blue);
                }
                /* Hide native marker in WebKit */
                .faq-item summary::-webkit-details-marker {
                    display: none;
                }
                .faq-content {
                    padding: 0 20px 20px 20px;
                    font-size: 15px;
                    color: var(--x-ink-soft);
                    line-height: 1.5;
                }
                .faq-content.highlight-amber {
                    border-left: 3px solid var(--x-enable);
                    margin-left: 20px;
                    padding-left: 15px;
                }


/* Zielgestaltung der Startseite, September 2026. */
.home-page { font-size:var(--x-fs-body); line-height:var(--x-lh-prose); }
.home-page .scan-lines { opacity:.3; }
.home-page header { padding:72px 20px; border-bottom-width:var(--x-bw-hair); }
.home-page header:has(.header-bg-overlay)::before { display:none; }
.home-page .logo { font-family:var(--x-font-display); font-size:var(--x-fs-wordmark); font-weight:400; line-height:1.15; }
.home-page .tagline { font-size:var(--x-fs-h4); font-weight:700; letter-spacing:.06em; }
.home-page .hero-audience { font-size:var(--x-fs-body-sm); letter-spacing:var(--x-ls-ui); }
.home-page .hero-intro { font-size:var(--x-fs-lead); line-height:var(--x-lh-prose); }
.home-page .terminal-border, .home-page .service-card, .home-page .form-container,
.home-page .pricing-card, .home-page .cycle-card, .home-page .pillar-detail,
.home-page .faq-item, .home-page .sounding-intro, .home-page #thankYouMessage { border-radius:var(--x-radius); }
.home-page .terminal-border { border-width:var(--x-bw-hair); box-shadow:var(--x-shadow-crt); }
.home-page .section-title { font-size:var(--x-fs-h2); font-weight:700; text-transform:none; border-bottom-width:var(--x-bw-hair); line-height:var(--x-lh-head); }
.home-page .status-bar { border-width:var(--x-bw-hair); border-radius:var(--x-radius-sm); font-size:var(--x-fs-ui); flex-wrap:wrap; gap:6px 20px; }
.home-page .status-bar .secure-status { color:var(--x-ink-bright); }
.home-page .dos-nav { font-size:var(--x-fs-ui); flex-wrap:wrap; }
.home-page .nav-link { border-radius:var(--x-radius-sm); padding:8px 12px; font-weight:600; }
.home-page .nav-cta { background:var(--x-tint-enable); }
.home-page .cta-button, .home-page .submit-btn { font-size:var(--x-fs-body); font-weight:600; letter-spacing:.02em; border-radius:var(--x-radius-sm); border-width:1px; background:var(--x-bg-terminal); color:var(--x-ink-bright); }
.home-page .hero-cta .cta-button { background:var(--x-statusbar-bg); }
.home-page .cta-button:hover, .home-page .submit-btn:hover { background:var(--x-tint-evolve); color:var(--x-ink-bright); transform:translateY(-2px); }
.home-page .cta-button:active, .home-page .submit-btn:active, .home-page .pricing-card:active, .home-page .cycle-card:active { transform:translateY(0); }
.home-page .mission-content p { font-size:var(--x-fs-body); line-height:var(--x-lh-prose); }
.home-page .mission-signature, .home-page .video-badge { font-size:var(--x-fs-ui); }
.home-page .video-trigger { position:relative; cursor:pointer; max-width:260px; width:100%; padding:0; border:0; background:transparent; color:inherit; flex-shrink:0; }
.home-page .video-trigger img { image-rendering:pixelated; }
.home-page #yt-frame { border:1px solid var(--x-line-strong); border-radius:var(--x-radius); }
.home-page .video-close { font:600 var(--x-fs-ui)/1.65 var(--x-font-ui); color:var(--x-ink); padding:8px; border:0; background:transparent; cursor:pointer; }
.home-page .sounding-intro { border-width:var(--x-bw-hair); }
.home-page .sounding-details { margin:0 0 15px; text-align:center; font-size:var(--x-fs-ui); }
.home-page .sounding-details a { color:var(--x-cyan-doc); text-underline-offset:4px; }
.home-page .command-line { font:var(--x-fs-ui)/1.65 var(--x-font-mono); color:var(--x-blue-light); overflow-wrap:anywhere; }
.home-page .comparison-table { border-collapse:separate; border-spacing:0; border-radius:var(--x-radius); overflow:hidden; border-width:var(--x-bw-hair); }
.home-page .comparison-table th { font-size:var(--x-fs-micro); font-weight:600; border-bottom-width:var(--x-bw-hair); }
.home-page .comparison-table td { font-size:var(--x-fs-body-sm); line-height:var(--x-lh-prose); border-bottom-width:var(--x-bw-hair); }
.home-page .pricing-container { flex-wrap:wrap; }
.home-page .pricing-card { min-width:min(250px,100%); border-width:var(--x-bw-hair); }
.home-page .pricing-card h3 { font-size:var(--x-fs-h3); font-weight:700; }
.home-page .price { font:400 32px/1.3 var(--x-font-display); }
.home-page .price span { font:400 var(--x-fs-meta)/1.65 var(--x-font-ui); }
.home-page .price-badge { border-radius:var(--x-radius-pill); font-size:var(--x-fs-micro); }
.home-page .pricing-card ul { font-size:var(--x-fs-body-sm); }
.home-page .cycle-card { padding:25px 20px; border-width:1px; }
.home-page .cycle-card h3 { font-size:var(--x-fs-h3); font-weight:700; }
.home-page .cycle-card .subtitle { font-size:var(--x-fs-body-sm); }
.home-page .cycle-card.theme-evolve h3, .home-page .pillar-detail.theme-evolve h3 { color:var(--x-blue-light); }
.home-page .cycle-card[aria-current="true"] { border-color:var(--phase); background:var(--phase-tint); }
.home-page .theme-enable { --phase:var(--x-enable); --phase-tint:var(--x-tint-enable); }
.home-page .theme-establish { --phase:var(--x-establish); --phase-tint:var(--x-tint-establish); }
.home-page .theme-execute { --phase:var(--x-execute); --phase-tint:var(--x-tint-execute); }
.home-page .theme-evolve { --phase:var(--x-evolve); --phase-tint:var(--x-tint-evolve); }
.home-page .pillar-detail { border-width:var(--x-bw-hair); border-left-width:3px; padding:25px; }
.home-page .pillar-detail h3 { font-size:var(--x-fs-h3); line-height:var(--x-lh-head); }
.home-page .icon { width:18px; height:18px; border:0; border-radius:3px; flex-shrink:0; }
.home-page .form-container { border-width:var(--x-bw-hair); }
.home-page label { font-size:var(--x-fs-body); font-weight:600; }
.home-page input[type="text"], .home-page input[type="email"], .home-page textarea, .home-page select { width:100%; padding:12px; font:400 var(--x-fs-body)/1.65 var(--x-font-ui); background:var(--x-bg-terminal); border:1px solid var(--x-line-strong); border-radius:var(--x-radius-sm); color:var(--x-ink); }
.home-page select { cursor:pointer; }
.home-page :is(input, textarea, select, button, a, summary):focus-visible { outline:2px solid var(--x-blue-light); outline-offset:3px; box-shadow:var(--x-shadow-focus); }
.home-page .form-group { border-radius:var(--x-radius-sm); }
.home-page .form-group label:has(input[type="radio"]) { font-size:var(--x-fs-body-sm); font-weight:500; }
.home-page .consent-label { font-size:var(--x-fs-body-sm); font-weight:400; }
.home-page .consent-label a { color:var(--x-cyan-doc); }
.home-page .faq-container { gap:10px; }
.home-page .faq-item { border-width:var(--x-bw-hair); }
.home-page .faq-item summary { font-size:var(--x-fs-body); font-weight:600; padding:15px 20px; gap:15px; }
.home-page .faq-item summary::after { font-size:var(--x-fs-ui); flex-shrink:0; }
.home-page .faq-content { font-size:var(--x-fs-body); line-height:var(--x-lh-prose); }
.home-page .faq-content.highlight-amber { border-left-width:3px; }
.home-page .kompass-home-teaser { max-width:1160px; margin:40px auto; padding:30px; border:var(--x-bw-hair) solid var(--x-line-strong); border-radius:var(--x-radius); background:var(--x-bg-sunken); color:var(--x-ink); font:var(--x-fs-body)/var(--x-lh-prose) var(--x-font-ui); }
.home-page .kompass-home-teaser h2 { font-size:var(--x-fs-h2); color:var(--x-ink-bright); line-height:var(--x-lh-head); margin:0 0 20px; }
.home-page .kompass-home-teaser p { margin:0 0 15px; }
.home-page footer { border-top-width:var(--x-bw-hair); font-size:var(--x-fs-ui); line-height:1.7; color:var(--x-ink-muted); }
.home-page footer p { margin:8px 0; }
.home-page footer a { color:var(--x-cyan-doc); }
.home-page .footer-sep { color:var(--x-ink-muted); }
.home-page section, .home-page .pillar-detail { scroll-margin-top:90px; }
.home-page .skip-link { position:absolute; top:10px; left:10px; padding:10px 15px; background:var(--x-bg-terminal); color:var(--x-ink-bright); z-index:2000; transform:translateY(-150%); }
.home-page .skip-link:focus { transform:translateY(0); }
@media (max-width:768px) {
  .home-page .section { padding:25px 20px; }
  .home-page .kompass-home-teaser { margin:30px 20px; padding:25px 20px; }
}
@media (max-width:600px) {
  .home-page header { padding:60px 20px; min-height:auto; }
  .home-page .logo { font-size:clamp(32px,8vw,48px); letter-spacing:2px; }
  .home-page .tagline { font-size:13.5px; letter-spacing:.02em; }
  .home-page .container { padding:12px; }
  .home-page .dos-nav { gap:3px; padding:8px; }
  .home-page .nav-link { padding:8px; font-size:11.5px; }
  .home-page .section { padding:25px 15px; }
  .home-page .form-container { padding:20px 15px; }
  .home-page .pricing-container { gap:15px; }
  .home-page .comparison-table th, .home-page .comparison-table td { padding:10px; overflow-wrap:anywhere; }
  .home-page .pillar-detail { padding:20px 15px; }
  .home-page .cta-button { padding:12px 20px; }
  .home-page .kompass-home-teaser { margin:30px 12px; padding:25px 15px; }
  .home-page section, .home-page .pillar-detail { scroll-margin-top:130px; }
}
@media (prefers-reduced-motion:reduce) { .home-page .glitch, .home-page .status-indicator { animation:none; } }
@media (dynamic-range:high) { .home-page .header-bg-overlay { background:var(--x-protect-hero-hdr) !important; } }
/* Startseite v1.0: obere Navigation auch mobil mindestens 14 px */
.home-page .topbar .nav-link { font-size:var(--x-fs-ui); }
/* Startseite v1.1: Erfahrung als gefüllter Rahmen mit Rand wie Mission */
.home-page .proof[data-circuit-box] { border:1px solid; border-radius:var(--x-radius,10px); }
.home-page .proof.tabbed, .home-page .kompass-home-teaser.tabbed { margin-top:calc(var(--x-tab-h) + var(--x-section-gap)); }
@media (max-width:768px){.home-page .cycle-card[aria-current="true"]::after{display:none}.home-page .cycle-grid>.pillar-detail{margin-top:-14px}}
.home-page .video-channel { font:600 var(--x-fs-ui)/1.65 var(--x-font-ui); color:var(--x-cyan-doc); padding:8px 0; text-underline-offset:4px; }
.home-page .video-channel:hover { color:var(--x-ink-bright); }

/* v3.4 (2026-10-18): Kundenstimmen am Ende der Startseite. Der Rahmen div.home-review hat dieselbe Breite und dieselben
   Abstände wie der KI-Kompass-Teaser. Gestaltung der Kundenstimme selbst: circuit-site.css v1.7, Abschnitt 16 */
.home-page .home-review { max-width:1160px; margin:calc(var(--x-tab-h) + var(--x-section-gap)) auto 40px; }
.home-page .home-review > .x-review.tabbed { margin-top:0; }
.home-page .home-review > .x-review.tabbed + .x-review.tabbed { margin-top:calc(var(--x-tab-h) + var(--x-section-gap)); }
@media (max-width:768px) { .home-page .home-review { margin:calc(var(--x-tab-h) + var(--x-section-gap)) 20px 30px; } }
@media (max-width:600px) { .home-page .home-review { margin:calc(var(--x-tab-h) + var(--x-section-gap)) 12px 30px; } }