/* ============================================================
           KI AWARD LAYER (REV-220) · "Answer Engine" · page-scoped
           Cyan->Violett AI-Gradient + Motion-Demos (Sim/Scan/Graph)
           ============================================================ */
        :root {
            --ki-a: #22d3ee; --ki-b: #a78bfa;
            --ki-a-deep: #0891b2; --ki-b-deep: #6d28d9;
            --ki-ink: #07080d;
            --ki-grad: linear-gradient(100deg, #22d3ee, #a78bfa);
        }

        /* ---------- Hero: Answer-Engine-Stage (dark) ---------- */
        .ki-hero {
            background: var(--ki-ink);
            border-bottom: none;
            padding: clamp(116px, 13vw, 168px) 0 clamp(48px, 6.5vw, 76px);
            overflow: clip;
            isolation: isolate;
            position: relative;
        }
        .ki-hero::after {
            content: "";
            position: absolute;
            top: -35%;
            left: -10%;
            width: 55vmax;
            height: 55vmax;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.07), transparent 60%);
            filter: blur(58px);
            pointer-events: none;
            z-index: 0;
        }
        .ki-hero .container { position: relative; z-index: 1; }
        .ki-hero .spk-wm { -webkit-text-stroke: 1.5px rgba(255,255,255,.07); }
        .ki-hero .breadcrumb { color: rgba(255,255,255,.45); }
        .ki-hero .breadcrumb a { color: rgba(255,255,255,.7); }
        .ki-hero .breadcrumb a:hover { color: #fff; }
        .ki-hero .pillar-hero-eyebrow {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.18);
            color: rgba(255,255,255,.8);
        }
        .ki-hero h1 {
            color: #fff;
            font-size: clamp(2.1rem, 5vw, 3.9rem);
            line-height: 1.05;
            letter-spacing: -.035em;
            font-weight: 900;
            text-wrap: balance;
        }
        .ki-hero h1 .ki-grad-x {
            color: transparent;
            -webkit-text-stroke: 2px rgba(255,255,255,.85);
        }
        .ki-hero .pillar-hero-sub { color: rgba(255,255,255,.7); }
        .ki-hero .pillar-hero-sub strong { color: #fff; }
        .ki-hero .pillar-hero-sub code { background: rgba(255,255,255,.1); color: #fff; }
        .ki-hero .pillar-hero-checklist li { color: rgba(255,255,255,.75); }
        .ki-hero .pillar-hero-checklist li::before { color: rgba(255,255,255,.85); }

        /* ---------- Antwort-Simulator ---------- */
        .ki-sim {
            background: #0c0e15;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: var(--radius-lg);
            overflow: clip;
            box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
        }
        .ki-sim-bar {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255,255,255,.08);
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(255,255,255,.55);
        }
        .ki-sim-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
        .ki-sim-bar i:first-child { background: #ff5f57; }
        .ki-sim-bar i:nth-child(2) { background: #febc2e; }
        .ki-sim-bar i:nth-child(3) { background: #28c840; }
        .ki-sim-bar span { margin-left: 8px; }
        .ki-sim-bar em { margin-left: auto; font-style: normal; font-size: .62rem; color: rgba(255,255,255,.35); letter-spacing: .08em; }
        .ki-sim-q, .ki-sim-a { display: flex; gap: 12px; padding: 16px 16px 0; }
        .ki-sim-a { padding-bottom: 4px; }
        .ki-sim-avatar {
            flex: 0 0 auto;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .58rem;
            font-weight: 800;
            letter-spacing: .04em;
            background: rgba(255,255,255,.1);
            color: rgba(255,255,255,.7);
        }
        .ki-sim-avatar--ai { background: #fff; color: #07080d; }
        .ki-sim-q p {
            margin: 0;
            font-size: .88rem;
            line-height: 1.55;
            color: rgba(255,255,255,.85);
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 12px;
            padding: 10px 14px;
        }
        .ki-sim-text { position: relative; min-height: 96px; }
        .ki-sim-text p { margin: 0; font-size: .88rem; line-height: 1.65; color: rgba(255,255,255,.78); }
        .ki-sim-text p strong { color: #fff; }
        .ki-sim-text .ki-cite {
            display: inline-flex;
            align-items: center;
            font-size: .68rem;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.45);
            border-radius: 999px;
            padding: 1px 8px;
            margin-left: 4px;
            vertical-align: 2px;
            white-space: nowrap;
        }
        .ki-sim.is-cited .ki-cite { animation: kiCitePop .5s cubic-bezier(.22,1,.36,1) both; }
        @keyframes kiCitePop {
            0% { transform: scale(.6); opacity: 0; }
            60% { transform: scale(1.12); }
            100% { transform: scale(1); opacity: 1; }
        }
        .ki-sim-caret {
            display: none;
            position: absolute;
            width: 8px;
            height: 17px;
            background: #fff;
            margin-left: 3px;
            border-radius: 2px;
        }
        .ki-caret-in {
            display: inline-block;
            width: 8px;
            height: 15px;
            background: #fff;
            border-radius: 2px;
            margin-left: 3px;
            vertical-align: -2px;
            animation: kiBlink 1s steps(2) infinite;
        }
        @keyframes kiBlink { 50% { opacity: 0; } }
        .ki-sim-src {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 14px;
            padding: 12px 16px 16px;
            margin-top: 8px;
        }
        .ki-sim-srclbl {
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: rgba(255,255,255,.4);
        }
        .ki-sim-srcchip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: .72rem;
            font-weight: 700;
            color: #fff;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.3);
            border-radius: 999px;
            padding: 5px 12px;
        }
        .ki-sim-srcchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
        .ki-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
        .ki-chips span {
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .04em;
            color: rgba(255,255,255,.75);
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 999px;
            padding: 6px 12px;
        }

        /* ---------- Marquee + idx accents ---------- */

        /* ---------- Schema-Scanner (im JSON-LD-Bento) ---------- */
        .ki-scan {
            position: relative;
            margin-top: 18px;
            background: var(--ki-ink);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 14px;
            overflow: clip;
        }
        .ki-scan-code {
            margin: 0;
            padding: 16px 18px 14px;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: .74rem;
            line-height: 1.75;
            color: rgba(255,255,255,.55);
            white-space: pre;
            overflow-x: auto;
        }
        .ki-scan-code .k { color: #fff; }
        .ki-scan-code .v { color: rgba(255,255,255,.72); }
        .ki-scan-beam {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 26px;
            background: linear-gradient(180deg, transparent, rgba(255,255,255,.12), transparent);
            border-block: 1px solid rgba(255,255,255,.28);
            opacity: 0;
            pointer-events: none;
        }
        @media (prefers-reduced-motion: no-preference) {
            .ki-scan.is-on .ki-scan-beam { opacity: 1; animation: kiScan 3.2s ease-in-out infinite; }
            @keyframes kiScan { 0% { transform: translateY(6px); } 50% { transform: translateY(120px); } 100% { transform: translateY(6px); } }
        }
        .ki-scan-out {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            padding: 0 16px 16px;
        }
        .ki-scan-out span {
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .04em;
            color: #fff;
            border: 1px solid rgba(255,255,255,.32);
            border-radius: 999px;
            padding: 4px 11px;
            background: rgba(255,255,255,.06);
        }
        @media (prefers-reduced-motion: no-preference) {
            .ki-scan-out span { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
            .ki-scan.is-on .ki-scan-out span { opacity: 1; transform: none; }
            .ki-scan.is-on .ki-scan-out span:nth-child(2) { transition-delay: .15s; }
            .ki-scan.is-on .ki-scan-out span:nth-child(3) { transition-delay: .3s; }
            .ki-scan.is-on .ki-scan-out span:nth-child(4) { transition-delay: .45s; }
        }

        /* ---------- Zitations-Graph ---------- */
        .ki-graph { margin: clamp(36px, 5vw, 56px) auto 0; max-width: 860px; }
        .ki-graph figure { margin: 0; }
        .ki-graph svg { width: 100%; height: auto; display: block; }
        .ki-graph-node { fill: #fff; stroke: rgba(17,17,17,.14); stroke-width: 1; }
        .ki-graph-node--hub { fill: var(--ki-ink); stroke: rgba(17,17,17,.3); stroke-width: 1.5; }
        .ki-graph text { font-family: var(--font); font-size: 13px; font-weight: 700; fill: var(--dark); }
        .ki-graph .ki-graph-hubtxt { fill: #fff; font-weight: 800; }
        .ki-graph .ki-graph-subtxt { font-size: 10.5px; font-weight: 600; fill: var(--text-lighter); }
        .ki-graph-edge {
            fill: none;
            stroke: rgba(17,17,17,.45);
            stroke-width: 1.5;
        }
        .ki-graph-cap {
            text-align: center;
            font-size: .8rem;
            color: var(--text-light);
            margin-top: 12px;
        }
        @media (prefers-reduced-motion: no-preference) {
            .ki-graph-edge { stroke-dasharray: 420; stroke-dashoffset: 420; }
            .ki-graph.is-on .ki-graph-edge { animation: kiDraw 1.4s cubic-bezier(.22,1,.36,1) forwards; }
            .ki-graph.is-on .ki-graph-edge:nth-of-type(2) { animation-delay: .12s; }
            .ki-graph.is-on .ki-graph-edge:nth-of-type(3) { animation-delay: .24s; }
            .ki-graph.is-on .ki-graph-edge:nth-of-type(4) { animation-delay: .36s; }
            @keyframes kiDraw { to { stroke-dashoffset: 0; } }
            .ki-graph .ki-dot { opacity: 0; }
            .ki-graph.is-on .ki-dot { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .ki-graph .ki-dot { display: none; }
        }

        /* ---------- Bento + Form + Night Tints ---------- */
        .bento-card {
            transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .35s ease;
            will-change: transform;
        }
        .bento-card:hover {
            transform: translateY(-4px);
            border-color: rgba(17,17,17,.3) !important;
            box-shadow: 0 22px 48px -30px rgba(7,8,13,.4);
        }
        #kontakt input:focus, #kontakt select:focus, #kontakt textarea:focus {
            border-color: var(--dark) !important;
            box-shadow: 0 0 0 4px rgba(17,17,17,.12) !important;
            outline: none;
        }

        @media (max-width: 880px) {
            .ki-hero .spk-wm { display: none; }
        }
        @media (max-width: 720px) {
            .ki-sim-text { min-height: 120px; }
        }