/* ============================================================
   ROSI Landing — Section Styles
   ============================================================ */

/* ============================================================
   NavBar
   ============================================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    background: rgba(9, 20, 38, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-slow),
                border-color var(--transition-slow),
                box-shadow var(--transition-slow),
                backdrop-filter var(--transition-slow);
}

.navbar--scrolled {
    background: rgba(3, 11, 23, 0.8);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom-color: var(--color-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text);
    text-decoration: none;
    transition: opacity var(--transition-base);
}

.navbar__brand:hover {
    opacity: 0.85;
}

.navbar__logo {
    height: 30px;
    width: auto;
    display: block;
}

@media (max-width: 480px) {
    .navbar__logo {
        height: 26px;
    }
}

.navbar__links {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    list-style: none;
    margin: 0 auto 0 0.75rem;
    padding: 0;
}

.navbar__links a {
    color: var(--color-text-muted);
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: color var(--transition-base), background var(--transition-base);
}

.navbar__links a:hover {
    color: var(--color-text);
    background: rgba(74, 158, 255, 0.08);
}

/* Rechte Aktionsgruppe: Sprache + CTA */
.navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: none;
}

/* Sprach-Pill: Globus + DE/EN als Segment-Umschalter */
.navbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.2rem 0.35rem 0.2rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.navbar__lang:hover {
    border-color: rgba(74, 158, 255, 0.4);
}

.navbar__lang-globe {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--color-text-muted);
    margin-right: 0.2rem;
}

.navbar__lang-btn {
    color: var(--color-text-muted);
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    line-height: 1;
    letter-spacing: 0.04em;
    transition: color var(--transition-base), background var(--transition-base);
}

.navbar__lang-btn:hover {
    color: var(--color-text);
}

.navbar__lang-btn--active {
    color: #06101f;
    background: var(--color-accent);
    font-weight: 600;
}

.navbar__cta {
    white-space: nowrap;
}

.navbar__toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    transition: background var(--transition-base);
}

.navbar__toggle:hover {
    background: rgba(74, 158, 255, 0.08);
}

/* Icon-Wechsel Hamburger ↔ X über aria-expanded (JS-gesteuert) */
.navbar__toggle-icon--close {
    display: none;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon--open {
    display: none;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon--close {
    display: inline;
}

.navbar__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    background: rgba(3, 11, 23, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-left: 1px solid var(--color-border);
    padding: calc(var(--nav-height) + 1rem) 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: 95;
    overflow-y: auto;
}

.navbar__drawer--open {
    transform: translateX(0);
}

.navbar__drawer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.navbar__drawer-links a {
    display: block;
    color: var(--color-text);
    padding: 0.85rem 0.6rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-border);
}

.navbar__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    z-index: 90;
}

.navbar__backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

/* Drawer-Sprachumschalter */
.navbar__lang--drawer {
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.95rem;
}

.navbar__lang--drawer .navbar__lang-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
}

.navbar__lang--drawer .navbar__lang-btn--active {
    color: #06101f;
    border-color: var(--color-accent);
    background: var(--color-accent);
}

/* Kuratierte 6 Links + Pill + CTA → kompakt; ab hier in den Drawer klappen */
@media (max-width: 920px) {
    .navbar__links,
    .navbar__actions {
        display: none;
    }
    .navbar__toggle {
        display: inline-flex;
    }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
    padding-top: calc(var(--nav-height) + 4rem);
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 600px at 80% 20%, rgba(74, 158, 255, 0.12), transparent 60%),
        radial-gradient(600px 500px at 10% 70%, rgba(38, 90, 166, 0.18), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero__title {
    font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
    line-height: 1.05;
    margin-bottom: 1.4rem;
    background: linear-gradient(180deg, #ffffff 0%, #b5cae6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.hero__title-accent {
    color: var(--color-accent);
    -webkit-text-fill-color: var(--color-accent);
}

.hero__sub {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    max-width: 60ch;
    margin-bottom: 2.2rem;
}

/* Markt-Beleg (kompakt): >70 % nutzen KI, nur 5,5 % mit EBIT-Effekt (McKinsey) */
.hero__stat {
    max-width: 540px;
    margin: 0 0 2rem;
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: rgba(15, 41, 77, 0.35);
}

.hero__stat-line {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.hero__stat-n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
    white-space: nowrap;
}

.hero__stat-n--accent {
    color: var(--color-accent);
}

.hero__stat-text {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.hero__stat-text strong {
    color: var(--color-text);
    font-weight: 600;
}

.hero__stat-src {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    opacity: 0.85;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(143, 163, 189, 0.4);
    text-underline-offset: 2px;
    transition: color var(--transition-base), opacity var(--transition-base),
                text-decoration-color var(--transition-base);
}

.hero__stat-src:hover,
.hero__stat-src:focus-visible {
    color: var(--color-accent);
    opacity: 1;
    text-decoration-color: var(--color-accent);
}

.hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 2.4rem;
}

.hero__trust {
    margin-top: 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    text-align: center;
}

.hero__visual {
    position: relative;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .hero {
        /* enger ans Viewport — die Copy soll above-the-fold stehen */
        padding-top: calc(var(--nav-height) + -2.75rem);
        padding-bottom: 3.5rem;
    }
    .hero__inner {
        grid-template-columns: 1fr;
    }
    /* Copy zuerst, Visual darunter (kein order:-1 mehr): die
       Value-Proposition + CTAs erscheinen sofort, das Visual folgt. */
    .hero__visual {
        max-width: 500px;
        margin: 1.75rem auto 0;
    }
    .hero__cta-row {
        margin-bottom: 0.5rem;
    }
}

/* Phone: CTAs vollbreit gestapelt → größere Touch-Targets */
@media (max-width: 480px) {
    .hero__sub {
        font-size: 1.05rem;
    }
    .hero__cta-row .btn {
        flex: 1 1 100%;
    }
}

/* ============================================================
   Hero-Visual — Live-KI-Assistent (Token-Stream)
   Choreografie via [data-phase] (js/hero-hud.js). Ohne JS bleibt
   die vollständige Konversation statisch sichtbar (Basis-Zustand).
   ============================================================ */

.aiui {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem 1rem 0.85rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(74, 158, 255, 0.22);
    background:
        radial-gradient(120% 80% at 82% 0%, rgba(74, 158, 255, 0.10), transparent 60%),
        radial-gradient(120% 80% at 0% 100%, rgba(184, 164, 255, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(8, 18, 36, 0.92), rgba(4, 11, 23, 0.94));
    box-shadow:
        0 30px 70px rgba(2, 9, 22, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

/* Wandernder Glow oben */
.aiui__glow {
    position: absolute;
    inset: -45% -10% auto -10%;
    height: 65%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(60% 100% at 50% 0%, rgba(74, 158, 255, 0.16), transparent 70%);
    animation: aiui-glow-drift 9s ease-in-out infinite;
}

.aiui__bar,
.aiui__chat,
.aiui__foot {
    position: relative;
    z-index: 1;
}

/* --- Kopfzeile --- */

.aiui__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(74, 158, 255, 0.14);
}

.aiui__avatar {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(150deg, #4A9EFF, #8B6BFF);
    box-shadow: 0 0 16px rgba(123, 107, 255, 0.5);
}

.aiui__avatar svg {
    width: 17px;
    height: 17px;
    animation: aiui-spark 3.6s ease-in-out infinite;
}

.aiui__id {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-right: auto;
}

.aiui__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-text);
}

.aiui__sub {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.aiui__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 9, 21, 0.6);
    border: 1px solid rgba(74, 158, 255, 0.2);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: var(--color-text);
    white-space: nowrap;
}

.aiui__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

.aiui__status[data-mode="think"] .aiui__status-dot {
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
    animation: aiui-blink 1s ease-in-out infinite;
}

.aiui__status[data-mode="gen"] .aiui__status-dot {
    background: var(--color-trace-agent);
    box-shadow: 0 0 8px var(--color-trace-agent);
    animation: aiui-blink 0.7s ease-in-out infinite;
}

.aiui__status[data-mode="done"] .aiui__status-dot {
    background: var(--color-trace-ok);
    box-shadow: 0 0 8px var(--color-trace-ok);
}

/* --- Live-Status (statisch „aktiv") --- */
.aiui__status[data-mode="live"] .aiui__status-dot {
    background: var(--color-trace-ok);
    box-shadow: 0 0 8px var(--color-trace-ok);
    animation: aiui-blink 1.6s ease-in-out infinite;
}

/* ============================================================
   Wissens-Hub — „All Ihr Wissen → eine klare Antwort"
   Bildhaftes SVG: Quell-Symbole fließen zur zentralen KI und
   weiter zur Antwort. Signal-Punkte wandern per stroke-dashoffset
   (pathLength auf 100 normiert). Bewegung nur mit .is-live
   (hero-hud.js, solange sichtbar) und nie bei reduced-motion.
   ============================================================ */

.aiui__hub {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0 0.2rem;
}

.hub {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Quell-Karten (Handbücher, Pläne …) — Hover zeigt Tooltip */
.hub__card {
    fill: rgba(74, 158, 255, 0.06);
    stroke: rgba(74, 158, 255, 0.22);
    stroke-width: 1;
    cursor: help;
    transition: fill 0.2s var(--ease-out), stroke 0.2s var(--ease-out);
}

.hub__card:hover {
    fill: rgba(74, 158, 255, 0.16);
    stroke: var(--color-accent);
}

/* Icon + Label durchlässig, damit der Hover immer das Karten-Rect trifft */
.hub__ic {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.hub__label {
    fill: var(--color-text);
    font-family: var(--font-display);
    font-size: 13px;
    pointer-events: none;
}

/* Datenquellen-Tooltip — an <body> gehängt, fixed positioniert (kein Clipping).
   Logik: js/hero-tooltips.js */
.hub-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    max-width: 232px;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(74, 158, 255, 0.4);
    background: rgba(8, 18, 36, 0.96);
    box-shadow: 0 12px 32px rgba(2, 9, 22, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.hub-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hub-tip__title {
    display: block;
    margin-bottom: 0.18rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--color-text);
}

.hub-tip__ex {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--color-accent);
}

.hub-tip--wide {
    max-width: 300px;
}

/* LLM-Tooltip: Modelle je Region/Kontinent */
.hub-tip__regions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.28rem 0.7rem;
    margin-top: 0.15rem;
}

.hub-tip__region {
    display: contents;
}

.hub-tip__region-name {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.hub-tip__region-models {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--color-accent);
}

.hub-tip__foot {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.42rem;
    border-top: 1px solid rgba(74, 158, 255, 0.18);
    font-family: var(--font-mono);
    font-size: 0.63rem;
    line-height: 1.4;
    color: var(--color-trace-ok);
}

/* Pipeline-Tooltip: 5 Stufen mit wanderndem Puls */
.tip-pipe {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.4rem;
    padding-left: 0.1rem;
}

.tip-pipe::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    background: rgba(74, 158, 255, 0.18);
}

.tip-pipe__row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6rem;
}

.tip-pipe__dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(74, 158, 255, 0.5);
    background: rgba(8, 18, 36, 0.96);
    animation: tip-pipe-dot 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.5s);
}

.tip-pipe__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.tip-pipe__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.74rem;
    color: var(--color-text);
}

.tip-pipe__meta {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--color-text-muted);
}

/* Verbindungen + wandernde Signal-Punkte */
.hub__wire {
    fill: none;
    stroke: rgba(74, 158, 255, 0.20);
    stroke-width: 1.5;
}

.hub__flow {
    fill: none;
    stroke: url(#hubFlow);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2 98;
    stroke-dashoffset: 100;
}

.hub.is-live .hub__flow {
    animation: hub-flow 2.6s linear infinite;
    animation-delay: var(--d, 0s);
}

/* Zentrale KI */
.hub__glow {
    fill: var(--color-accent);
    opacity: 0.16;
    transform-box: fill-box;
    transform-origin: center;
}

.hub.is-live .hub__glow {
    animation: hub-glow 3s ease-in-out infinite;
}

.hub__core {
    fill: url(#hubCore);
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 1;
}

.hub__spark {
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hub__name {
    fill: var(--color-text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    text-anchor: middle;
}

/* Lokales LLM — fließt von oben in die KI */
.hub__llm {
    fill: rgba(123, 107, 255, 0.12);
    stroke: rgba(123, 107, 255, 0.5);
    stroke-width: 1;
    cursor: help;
    transition: fill 0.2s var(--ease-out), stroke 0.2s var(--ease-out);
}

.hub__llm:hover {
    fill: rgba(123, 107, 255, 0.22);
    stroke: rgba(123, 107, 255, 0.75);
}

/* Technische Frage / Prompt — Eingang oben (blau abgesetzt) */
.hub__prompt {
    fill: rgba(74, 158, 255, 0.10);
    stroke: rgba(74, 158, 255, 0.5);
    stroke-width: 1;
    cursor: help;
    transition: fill 0.2s var(--ease-out), stroke 0.2s var(--ease-out);
}

.hub__prompt:hover {
    fill: rgba(74, 158, 255, 0.2);
    stroke: rgba(74, 158, 255, 0.75);
}

.hub__llm-label {
    fill: var(--color-text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    text-anchor: start;
    pointer-events: none;
}

/* Icons in den Pillen (Person / Chip) */
.hub__pill-ic {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.hub__pill-ic--prompt { stroke: var(--color-accent); }
.hub__pill-ic--llm    { stroke: var(--color-trace-agent); }

/* Unsichtbares Hover-Ziel über der zentralen KI */
.hub__hit {
    fill: transparent;
    pointer-events: all;
    cursor: help;
    stroke: transparent;
    stroke-width: 1;
    transition: stroke 0.2s var(--ease-out);
}

.hub__hit:hover {
    stroke: rgba(74, 158, 255, 0.5);
}

/* Antwort-Karte */
.hub__ans {
    fill: rgba(63, 224, 162, 0.08);
    stroke: rgba(63, 224, 162, 0.42);
    stroke-width: 1;
}

.hub__ans-ic {
    fill: none;
    stroke: var(--color-trace-ok);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hub__ans-h {
    fill: var(--color-text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
}

.hub__ans-s {
    fill: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
}

/* Anbindung-Karte (Integration weiterer Apps) — blau abgesetzt */
.hub__app {
    fill: rgba(74, 158, 255, 0.08);
    stroke: rgba(74, 158, 255, 0.42);
    stroke-width: 1;
}

.hub__app-ic {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Antwort- & Anbindung-Karten: Hover zeigt Tooltip */
.hub__ans,
.hub__app {
    cursor: help;
    transition: fill 0.2s var(--ease-out), stroke 0.2s var(--ease-out);
}

.hub__ans:hover {
    fill: rgba(63, 224, 162, 0.16);
    stroke: rgba(63, 224, 162, 0.65);
}

.hub__app:hover {
    fill: rgba(74, 158, 255, 0.16);
    stroke: rgba(74, 158, 255, 0.65);
}

/* Inhalte durchlässig, damit der Hover stets das Karten-Rect trifft */
.hub__ans-ic,
.hub__ans-h,
.hub__ans-s,
.hub__app-ic {
    pointer-events: none;
}

/* Q&A-Tooltip (Beispiel-Antwort zu einer DTC-Frage) */
.tip-qa {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    margin-top: 0.25rem;
}

.tip-qa__q {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--color-text);
}

.tip-qa__badge {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.04rem 0.35rem;
    border-radius: 5px;
    border: 1px solid rgba(74, 158, 255, 0.4);
    background: rgba(74, 158, 255, 0.16);
    color: var(--color-accent);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tip-qa__a {
    margin: 0;
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--color-text);
}

.tip-qa__src {
    margin: 0;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(63, 224, 162, 0.22);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.4;
    color: var(--color-trace-ok);
}

/* Aussage-Zeile */
.hub__tag {
    fill: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 13.5px;
    text-anchor: middle;
}

.hub__tag-b {
    fill: var(--color-text);
    font-weight: 600;
}

/* --- Fußzeile: einfache Nutzen-Versprechen --- */

.aiui__foot {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(74, 158, 255, 0.14);
}

.aiui__foot--values {
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.aiui__value {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    color: var(--color-text);
}

.aiui__value::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-trace-ok);
    box-shadow: 0 0 7px var(--color-trace-ok);
}

/* --- Responsive --- */

@media (max-width: 600px) {
    .aiui {
        padding: 0.85rem;
    }
    .aiui__foot--values {
        gap: 0.8rem;
    }
    .aiui__value {
        font-size: 0.7rem;
    }
}

/* --- Bewegungsreduktion: statische, vollständige Konversation --- */

@media (prefers-reduced-motion: reduce) {
    .aiui__glow,
    .aiui__avatar svg,
    .aiui__thinking i,
    .aiui__caret {
        animation: none !important;
    }
}

/* ============================================================
   Software-Stack Section
   ============================================================ */

.stack__diagram {
    max-width: 760px;
    margin: 3.5rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Produkt-Ebenen physisch gestapelt (überlappend, mit Tiefe) */
.stack__deck {
    display: flex;
    flex-direction: column;
    position: relative;
}

.stack__deck .stack__layer {
    position: relative;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

.stack__deck .stack__layer + .stack__layer {
    margin-top: -12px;
}

.stack__deck .stack__layer:nth-child(1) { z-index: 3; }
.stack__deck .stack__layer:nth-child(2) { z-index: 2; }
.stack__deck .stack__layer:nth-child(3) { z-index: 1; }

.stack__deck .stack__layer--core {
    box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.2), 0 12px 34px rgba(74, 158, 255, 0.16);
}

.stack__deck .stack__layer:hover {
    z-index: 4;
}

.stack__layer {
    display: flex;
    gap: 1.1rem;
    padding: 1.5rem 1.6rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.stack__layer:hover {
    border-color: rgba(74, 158, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.stack__layer--optional {
    border-style: dashed;
}

.stack__layer--core {
    border-color: rgba(74, 158, 255, 0.5);
    background:
        linear-gradient(180deg, rgba(74, 158, 255, 0.08), rgba(15, 41, 77, 0.4)),
        var(--color-card-bg);
    box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.2), 0 12px 40px rgba(74, 158, 255, 0.12);
}

.stack__layer--llm {
    border-color: rgba(63, 224, 162, 0.4);
}

.stack__layer--llm:hover {
    border-color: rgba(63, 224, 162, 0.6);
}

.stack__icon {
    flex: none;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.3);
    color: var(--color-accent);
}

.stack__icon svg {
    width: 24px;
    height: 24px;
}

.stack__layer--llm .stack__icon {
    background: rgba(63, 224, 162, 0.1);
    border-color: rgba(63, 224, 162, 0.35);
    color: var(--color-trace-ok);
}

.stack__layer-body {
    flex: 1;
    min-width: 0;
}

.stack__layer-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.stack__layer-title {
    margin: 0;
    font-size: 1.2rem;
}

.stack__badge {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
}

.stack__badge--core {
    color: var(--color-accent);
    border-color: rgba(74, 158, 255, 0.45);
    background: rgba(74, 158, 255, 0.08);
}

.stack__badge--must {
    color: #06121f;
    background: var(--color-accent);
    border-color: var(--color-accent);
    font-weight: 600;
}

.stack__badge--optional {
    color: var(--color-text-muted);
    border-style: dashed;
}

.stack__badge--llm {
    color: var(--color-trace-ok);
    border-color: rgba(63, 224, 162, 0.4);
    background: rgba(63, 224, 162, 0.08);
}

.stack__layer-desc {
    margin: 0 0 0.9rem;
}

.stack__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stack__chip {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: rgba(74, 158, 255, 0.06);
    border: 1px solid rgba(74, 158, 255, 0.18);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
}

.stack__chip--accent {
    color: var(--color-accent);
    border-color: rgba(74, 158, 255, 0.4);
}

.stack__layer--llm .stack__chip {
    background: rgba(63, 224, 162, 0.06);
    border-color: rgba(63, 224, 162, 0.2);
}

.stack__chip--llm-accent {
    color: var(--color-trace-ok);
    border-color: rgba(63, 224, 162, 0.45);
}

.stack__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.7rem 0;
    color: var(--color-accent);
}

.stack__connector svg {
    width: 22px;
    height: 22px;
    opacity: 0.85;
}

.stack__connector span {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.stack__connector--llm {
    color: var(--color-trace-ok);
}

.stack__note {
    text-align: center;
    margin: 1.8rem auto 0;
    max-width: 640px;
    color: var(--color-text-muted);
}

@media (max-width: 560px) {
    .stack__layer {
        padding: 1.2rem 1.1rem;
        gap: 0.85rem;
    }
    .stack__icon {
        width: 40px;
        height: 40px;
    }
    .stack__icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================================
   Use-Case: Autonomer Agent
   ============================================================ */

/* Auslöser-Kette */
/* Nummerierte Workflow-Stufen */
.usecase__stage {
    position: relative;
}

.usecase__stage--first {
    margin-top: 1.75rem;
}

.usecase__stepnum {
    position: absolute;
    top: -14px;
    left: -14px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    background: var(--color-accent);
    border: 3px solid #06101f;
    box-shadow: 0 6px 18px rgba(74, 158, 255, 0.4);
}

.usecase__trigger {
    padding: 1.3rem 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
}

.usecase__trigger-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.usecase__trigger-icon {
    flex: none;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.3);
    color: var(--color-accent);
}

.usecase__trigger-icon svg {
    width: 30px;
    height: 30px;
}

.usecase__trigger-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.2rem;
}

.usecase__trigger-title {
    margin: 0;
    font-size: 1.3rem;
}

.usecase__trigger-text {
    margin: 0 0 1.1rem;
    color: var(--color-text-muted);
}

.usecase__trigger-text strong {
    color: var(--color-text);
    font-weight: 600;
}

.usecase__trigger-report {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.usecase__trigger-person {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.usecase__trigger-person svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-accent);
}

.usecase__trigger-systems {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.usecase__trigger-system {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-accent);
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
}

/* Defect-Ticket */
.usecase__ticket {
    --stub: 210px;
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(74, 158, 255, 0.55);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(15, 41, 77, 0.65), rgba(3, 11, 23, 0.55));
    box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.2), 0 18px 50px rgba(74, 158, 255, 0.18);
    /* Ticket-Notches an der Perforation */
    -webkit-mask:
        radial-gradient(circle 11px at var(--stub) 0, transparent 96%, #000) 0 0 / 100% 51% no-repeat,
        radial-gradient(circle 11px at var(--stub) 100%, transparent 96%, #000) 0 100% / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 11px at var(--stub) 0, transparent 96%, #000) 0 0 / 100% 51% no-repeat,
        radial-gradient(circle 11px at var(--stub) 100%, transparent 96%, #000) 0 100% / 100% 51% no-repeat;
}

.usecase__ticket-stub {
    flex: none;
    width: var(--stub);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1.3rem 1.4rem;
    border-right: 2px dashed rgba(74, 158, 255, 0.5);
    background: rgba(74, 158, 255, 0.07);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.usecase__ticket-body {
    flex: 1;
    min-width: 0;
    padding: 1.3rem 1.5rem;
    align-self: center;
}

@media (max-width: 640px) {
    .usecase__ticket {
        flex-direction: column;
        -webkit-mask: none;
        mask: none;
    }
    .usecase__ticket-stub {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-right: none;
        border-bottom: 2px dashed rgba(74, 158, 255, 0.5);
    }
}

.usecase__ticket-tag {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    border: 1px solid rgba(74, 158, 255, 0.4);
    background: rgba(74, 158, 255, 0.1);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.usecase__ticket-id {
    color: var(--color-text);
    font-weight: 500;
}

.usecase__ticket-prio {
    color: #ff9b9b;
    border: 1px solid rgba(255, 110, 110, 0.45);
    background: rgba(255, 90, 90, 0.12);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.usecase__ticket-cat {
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.usecase__ticket-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.05rem, 1.4vw + 0.7rem, 1.35rem);
}

.usecase__ticket-meta {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.usecase__down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin: 0.6rem 0;
    color: var(--color-accent);
}

.usecase__down svg {
    width: 28px;
    height: 28px;
}

.usecase__down span {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Autonomie-Fazit (unter dem Fluss) */
.usecase__outro {
    max-width: 760px;
    margin: 1.5rem auto 0;
    text-align: center;
}

.usecase__outro-text {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
}

.usecase__outro-text strong {
    color: var(--color-text);
    font-weight: 600;
}

.usecase__outro-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.usecase__outro-tags span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-accent);
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
}

/* 3-Spalten-Fluss */
.usecase__flow {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-top: 0;
}

.usecase__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.usecase__col--agent {
    flex: 1.25 1 0;
}

.usecase__col-title {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent);
    margin-bottom: 0.2rem;
}

.usecase__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.usecase__arrow svg {
    width: 26px;
    height: 26px;
}

/* Wissens-/Ergebnis-Karten */
.usecase__item {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex: 1 1 0;
    padding: 0.55rem 0.7rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.usecase__item:hover {
    border-color: rgba(74, 158, 255, 0.5);
    transform: translateY(-2px);
}

.usecase__item-icon {
    flex: none;
    color: var(--color-accent);
    margin-top: 1px;
}

.usecase__item-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.usecase__item-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.usecase__item-title {
    font-weight: 600;
    font-size: 0.84rem;
    line-height: 1.25;
}

.usecase__item-sub {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--color-text-muted);
}

.usecase__item--pr {
    border-color: rgba(63, 224, 162, 0.45);
    background: rgba(7, 26, 26, 0.55);
    box-shadow: 0 0 0 1px rgba(63, 224, 162, 0.18);
}

.usecase__item--pr:hover {
    border-color: rgba(63, 224, 162, 0.65);
}

.usecase__item--pr .usecase__item-icon {
    color: var(--color-trace-ok);
}

/* Agent-Box */
.usecase__agent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.25rem 1.1rem;
    border: 1px solid rgba(74, 158, 255, 0.5);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(74, 158, 255, 0.1), rgba(15, 41, 77, 0.4)),
        var(--color-card-bg);
    box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.2), 0 16px 50px rgba(74, 158, 255, 0.15);
}

.usecase__agent-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(74, 158, 255, 0.12);
    border: 1px solid rgba(74, 158, 255, 0.4);
    color: var(--color-accent);
}

.usecase__agent-icon svg {
    width: 28px;
    height: 28px;
}

.usecase__agent-name {
    margin: 0.3rem 0 0;
    font-size: 1.35rem;
}

.usecase__agent-sub {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.usecase__agent-steps {
    counter-reset: agstep;
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    text-align: left;
}

.usecase__agent-steps li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--color-text);
}

.usecase__agent-steps li::before {
    counter-increment: agstep;
    content: counter(agstep);
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(74, 158, 255, 0.12);
    border: 1px solid rgba(74, 158, 255, 0.4);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
}

.usecase__agent-pipe {
    width: 100%;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
}

.usecase__agent-pipe-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.usecase__pipe-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.usecase__pipe-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--color-text-muted);
    background: rgba(74, 158, 255, 0.06);
    border: 1px solid rgba(74, 158, 255, 0.2);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
}

@media (max-width: 960px) {
    .usecase__flow {
        flex-direction: column;
    }
    .usecase__arrow {
        transform: rotate(90deg);
    }
}

/* ---- Animationen ---- */
@keyframes usecase-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

@keyframes usecase-flow-x {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@keyframes usecase-agent-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.2), 0 16px 50px rgba(74, 158, 255, 0.12); }
    50% { box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.4), 0 18px 60px rgba(74, 158, 255, 0.28); }
}

@keyframes usecase-step-pulse {
    0%, 100% { background: rgba(74, 158, 255, 0.12); box-shadow: none; }
    50% { background: rgba(74, 158, 255, 0.34); box-shadow: 0 0 10px rgba(74, 158, 255, 0.5); }
}

.usecase__down svg {
    animation: usecase-bob 1.8s ease-in-out infinite;
}

.usecase__arrow svg {
    animation: usecase-flow-x 1.8s ease-in-out infinite;
}

.usecase__agent {
    animation: usecase-agent-glow 3s ease-in-out infinite;
}

.usecase__agent-steps li::before {
    animation: usecase-step-pulse 2.5s ease-in-out infinite;
}

.usecase__agent-steps li:nth-child(1)::before { animation-delay: 0s; }
.usecase__agent-steps li:nth-child(2)::before { animation-delay: 0.4s; }
.usecase__agent-steps li:nth-child(3)::before { animation-delay: 0.8s; }
.usecase__agent-steps li:nth-child(4)::before { animation-delay: 1.2s; }
.usecase__agent-steps li:nth-child(5)::before { animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
    .usecase__down svg,
    .usecase__arrow svg,
    .usecase__agent,
    .usecase__agent-steps li::before {
        animation: none;
    }
}

/* ============================================================
   USP Section
   ============================================================ */

.usp__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (max-width: 1024px) {
    .usp__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .usp__grid {
        grid-template-columns: 1fr;
    }
}

.usp-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    cursor: default;
}

.usp-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), 0 0 32px rgba(74, 158, 255, 0.18);
    transform: translateY(-3px);
}

.usp-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(38, 90, 166, 0.3), rgba(74, 158, 255, 0.2));
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    color: var(--color-accent);
    flex-shrink: 0;
}

.usp-card__icon svg {
    width: 24px;
    height: 24px;
}

.usp-card__title {
    margin: 0;
    font-size: 1.35rem;
}

.usp-card__body {
    color: var(--color-text-muted);
    margin: 0;
    flex-grow: 1;
}

/* ============================================================
   RAG Pipeline Section
   ============================================================ */

.rag {
    background:
        radial-gradient(800px 400px at 50% 0%, rgba(38, 90, 166, 0.1), transparent 70%);
}

.rag__intro {
    max-width: 760px;
    margin: 3rem auto 0;
    text-align: center;
}

.rag__intro p {
    font-size: 1.05rem;
}

.rag__code-sample {
    margin-top: 2rem;
    background: rgba(0, 9, 21, 0.55);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    overflow-x: auto;
}

.rag__code-sample .tok-key { color: var(--color-accent); }
.rag__code-sample .tok-str { color: #b8d4f0; }
.rag__code-sample .tok-com { color: #5b7193; font-style: italic; }

/* ============================================================
   Pipeline Diagram
   ============================================================ */

.pipeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pipeline__stage {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.pipeline__stage--open {
    border-color: var(--color-accent);
    background: rgba(15, 41, 77, 0.6);
}

.pipeline__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: transparent;
    border: 0;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
}

.pipeline__header:hover {
    background: rgba(74, 158, 255, 0.05);
}

.pipeline__index {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(74, 158, 255, 0.12);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.pipeline__title {
    flex: 1;
    font-weight: 500;
    font-size: 1.05rem;
}

.pipeline__sources {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-left: auto;
    padding-right: 0.5rem;
    display: none;
}

@media (min-width: 700px) {
    .pipeline__sources {
        display: inline;
    }
}

.pipeline__chevron {
    transition: transform var(--transition-base);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.pipeline__stage--open .pipeline__chevron {
    transform: rotate(180deg);
    color: var(--color-accent);
}

.pipeline__detail {
    padding: 0 1.25rem 1.25rem 4.25rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.pipeline__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.pipeline__tech span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
    background: rgba(74, 158, 255, 0.08);
    color: var(--color-accent);
    border: 1px solid rgba(74, 158, 255, 0.25);
    border-radius: 999px;
}

.pipeline__connector {
    width: 2px;
    height: 12px;
    background: linear-gradient(180deg, var(--color-accent), transparent);
    margin-left: 1.6rem;
    opacity: 0.5;
}

/* ============================================================
   Demo Applications
   ============================================================ */

.demos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (max-width: 980px) {
    .demos__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.demo-card {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    overflow: hidden;
    position: relative;
}

.demo-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 12px 40px var(--color-accent-glow);
}

.demo-card__visual {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(38, 90, 166, 0.25), rgba(15, 41, 77, 0.5));
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.demo-card__visual svg {
    width: 70%;
    height: 70%;
    opacity: 0.8;
}

.demo-card__visual--image {
    place-items: stretch;
    background: #06101f;
}

.demo-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform var(--transition-slow);
}

.demo-card:hover .demo-card__img {
    transform: scale(1.04);
}

.demo-card__tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    background: rgba(74, 158, 255, 0.1);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(74, 158, 255, 0.25);
    margin-bottom: 0.5rem;
    align-self: flex-start;
}

.demo-card__title {
    margin: 0;
    font-size: 1.4rem;
}

.demo-card__body {
    color: var(--color-text-muted);
    margin: 0;
    flex-grow: 1;
}

.demo-card__cta {
    margin-top: 0.5rem;
    color: var(--color-accent);
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.demo-card__cta::after {
    content: "→";
    transition: transform var(--transition-base);
}

.demo-card:hover .demo-card__cta::after {
    transform: translateX(4px);
}

/* ============================================================
   How RAG Works — Prinzip in 3 Schritten
   ============================================================ */

.howrag {
    padding-block: 3.75rem;
}

.howrag__flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.howrag__step {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.5rem 1.2rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.howrag__step:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 12px 40px var(--color-accent-glow);
}

.howrag__step--final {
    border-color: rgba(63, 224, 162, 0.45);
    background: linear-gradient(180deg, rgba(63, 224, 162, 0.06), var(--color-card-bg));
}

.howrag__step--final:hover {
    border-color: var(--color-trace-ok);
    box-shadow: 0 12px 40px var(--color-trace-ok-soft);
}

.howrag__num {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-accent);
    border: 3px solid #06101f;
}

.howrag__step--final .howrag__num {
    background: var(--color-trace-ok);
    color: #06101f;
}

.howrag__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.3);
    color: var(--color-accent);
    margin-top: 0.2rem;
}

.howrag__step--final .howrag__icon {
    background: rgba(63, 224, 162, 0.1);
    border-color: rgba(63, 224, 162, 0.4);
    color: var(--color-trace-ok);
}

.howrag__icon svg {
    width: 28px;
    height: 28px;
}

.howrag__step-title {
    margin: 0.4rem 0 0;
    font-size: 1.05rem;
}

.howrag__step-sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.howrag__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.howrag__arrow svg {
    width: 26px;
    height: 26px;
    animation: usecase-flow-x 1.8s ease-in-out infinite;
}

.howrag__note {
    margin: 2rem auto 0;
    max-width: 640px;
    text-align: center;
    color: var(--color-text-muted);
}

.howrag__note strong {
    color: var(--color-accent);
    font-weight: 600;
}

/* Hero-Schritt (Ihre Unterlagen) — der Kern des RAG-Prinzips */
.howrag__step--hero {
    border-color: rgba(74, 158, 255, 0.5);
    background: linear-gradient(180deg, rgba(74, 158, 255, 0.09), var(--color-card-bg));
    box-shadow: 0 10px 36px var(--color-accent-glow);
}

.howrag__step--hero:hover {
    box-shadow: 0 14px 46px var(--color-accent-glow);
}

.howrag__step--hero .howrag__icon {
    width: 64px;
    height: 64px;
    background: rgba(74, 158, 255, 0.16);
    border-color: rgba(74, 158, 255, 0.45);
}

.howrag__step--hero .howrag__icon svg {
    width: 32px;
    height: 32px;
}

.howrag__step-badge {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    border: 1px solid rgba(74, 158, 255, 0.35);
    background: rgba(74, 158, 255, 0.1);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}

/* Aha-Satz unter dem Flow */
.howrag__aha {
    margin: 1.85rem auto 0;
    max-width: 660px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.howrag__aha strong {
    color: var(--color-trace-ok);
    font-weight: 600;
}

/* Pills + Mini-Pfeil — geteilt mit der Agentic-Hybrid-RAG-Karte unten */
.howrag__pill {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.32rem 0.65rem;
}

.howrag__mini-arrow {
    flex: none;
    display: inline-flex;
    color: var(--color-text-muted);
}

.howrag__mini-arrow svg {
    width: 18px;
    height: 18px;
}

/* --- Erweiterung: Agentic Hybrid RAG --- */
.howrag__more-head {
    margin-top: 2.75rem;
    text-align: center;
}

.howrag__more-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.3rem, 2vw + 0.6rem, 1.7rem);
}

.howrag__more-accent {
    color: var(--color-accent);
}

.howrag__more-sub {
    margin: 0 auto;
    max-width: 560px;
    color: var(--color-text-muted);
}

.howrag__more {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

.howrag__more-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1.35rem 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.howrag__more-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 12px 40px var(--color-accent-glow);
}

.howrag__more-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.3);
    color: var(--color-accent);
}

.howrag__more-icon svg {
    width: 28px;
    height: 28px;
}

.howrag__more-card-title {
    margin: 0.2rem 0 0;
    font-size: 1.15rem;
}

.howrag__more-card-sub {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.howrag__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.howrag__loop {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-accent);
    cursor: default;
}

.howrag__note--final {
    margin-top: 1.5rem;
    color: var(--color-text);
}

.howrag__note--final strong {
    color: var(--color-accent);
}

@media (max-width: 720px) {
    .howrag__more {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .howrag__flow {
        flex-direction: column;
        align-items: stretch;
    }
    .howrag__arrow {
        transform: rotate(90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .howrag__arrow svg {
        animation: none;
    }
}

/* ============================================================
   Process Section
   ============================================================ */

.process {
    background:
        radial-gradient(700px 400px at 0% 50%, rgba(38, 90, 166, 0.08), transparent 70%);
}

.process__timeline {
    margin-top: 3.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.process-step {
    --node-size: 56px;
    --step-gap: 2.5rem;
    display: grid;
    grid-template-columns: var(--node-size) minmax(0, 1fr) minmax(220px, 300px);
    gap: 1.6rem;
    align-items: start;
    padding-bottom: var(--step-gap);
    position: relative;
}

.process-step:last-child {
    padding-bottom: 0;
}

.process-step__rail {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Durchgehende Spine: Linie vom Knoten zum nächsten Knoten */
.process-step:not(:last-child) .process-step__rail::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: var(--node-size);
    bottom: calc(-1 * var(--step-gap));
    width: 2px;
    background: linear-gradient(180deg,
        var(--color-accent) 0%,
        rgba(74, 158, 255, 0.18) 100%);
}

.process-step__node {
    position: relative;
    z-index: 1;
    width: var(--node-size);
    height: var(--node-size);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-accent);
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.3);
    box-shadow: 0 0 0 6px rgba(74, 158, 255, 0.04);
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                background var(--transition-base),
                box-shadow var(--transition-base);
}

.process-step__node svg {
    width: 26px;
    height: 26px;
}

.process-step:hover .process-step__node {
    transform: translateY(-2px) scale(1.04);
    border-color: var(--color-accent);
    background: rgba(74, 158, 255, 0.16);
    box-shadow: 0 0 0 8px rgba(74, 158, 255, 0.08),
                0 12px 30px var(--color-accent-glow);
}

/* Letzte Phase = laufender Betrieb → Grün + sanfter Live-Puls */
.process-step:last-child .process-step__node {
    color: var(--color-trace-ok);
    background: rgba(63, 224, 162, 0.1);
    border-color: rgba(63, 224, 162, 0.4);
    box-shadow: 0 0 0 6px rgba(63, 224, 162, 0.05);
}

.process-step:last-child:hover .process-step__node {
    border-color: var(--color-trace-ok);
    background: rgba(63, 224, 162, 0.16);
    box-shadow: 0 0 0 8px rgba(63, 224, 162, 0.1),
                0 12px 30px var(--color-trace-ok-soft);
}

.process-step__content {
    min-width: 0;
    padding-top: 0.1rem;
}

.process-step__phase {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.process-step:last-child .process-step__phase {
    color: var(--color-trace-ok);
}

.process-step__title {
    margin: 0.35rem 0 0;
    font-size: 1.2rem;
}

.process-step__content p {
    margin: 0.55rem 0 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Ergebnis-Karte (Deliverable) rechts — füllt die Breite, belegt das
   Versprechen „jede Phase liefert ein Ergebnis". */
.process-step__result {
    align-self: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: rgba(74, 158, 255, 0.04);
    transition: border-color var(--transition-base), background var(--transition-base);
}

.process-step:hover .process-step__result {
    border-color: rgba(74, 158, 255, 0.4);
    border-left-color: var(--color-accent);
    background: rgba(74, 158, 255, 0.07);
}

.process-step__result-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.process-step__result-label svg {
    width: 13px;
    height: 13px;
}

.process-step__result-text {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text);
}

.process-step:last-child .process-step__result {
    border-left-color: var(--color-trace-ok);
    background: rgba(63, 224, 162, 0.05);
}

.process-step:last-child:hover .process-step__result {
    border-color: rgba(63, 224, 162, 0.4);
}

.process-step:last-child .process-step__result-label {
    color: var(--color-trace-ok);
}

.process-step__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 1rem;
    margin-top: 0.6rem;
}

.process-step__duration,
.process-step__price {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-block;
    line-height: 1;
}

.process-step__duration {
    color: var(--color-accent);
}

.process-step__price {
    color: var(--color-trace-ok);
    padding: 0.25rem 0.55rem;
    background: rgba(63, 224, 162, 0.08);
    border: 1px solid rgba(63, 224, 162, 0.28);
    border-radius: 999px;
}

.process__pricing-note {
    margin: 2.5rem 0 0 calc(56px + 1.6rem);
    max-width: 640px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Live-Puls auf der letzten Phase (laufender Betrieb) */
@media (prefers-reduced-motion: no-preference) {
    .process-step:last-child .process-step__node::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 50%;
        border: 1px solid rgba(63, 224, 162, 0.5);
        animation: process-pulse 2.6s ease-out infinite;
    }
}

@keyframes process-pulse {
    0%   { transform: scale(1);    opacity: 0.6; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { opacity: 0; }
}

/* Ergebnis-Karte unter den Inhalt klappen, sobald es eng wird */
@media (max-width: 860px) {
    .process-step {
        grid-template-columns: var(--node-size) minmax(0, 1fr);
    }
    .process-step__result {
        grid-column: 2;
        align-self: stretch;
        margin-top: 0.3rem;
    }
}

@media (max-width: 700px) {
    .process-step {
        --node-size: 46px;
        gap: 1.1rem;
    }
    .process-step__node svg {
        width: 22px;
        height: 22px;
    }
    .process-step__title {
        font-size: 1.08rem;
    }
    .process__pricing-note {
        margin-left: calc(46px + 1.1rem);
    }
}

/* ============================================================
   Contact
   ============================================================ */

.contact {
    padding-bottom: 4rem;
}

.contact__layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    .contact__layout {
        grid-template-columns: 1fr;
    }
}

.contact__info p {
    font-size: 1.05rem;
}

.contact__meta {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    color: var(--color-text);
}

.contact__meta li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.contact__meta svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Direkter E-Mail-Link zum Vertrieb */
.contact__mail {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.6rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-base);
}

.contact__mail svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.contact__mail:hover,
.contact__mail:focus-visible {
    color: var(--color-accent);
}

/* Persönlicher Ansprechpartner: Maxi */
.contact__person {
    display: flex;
    gap: 1.4rem;
    align-items: center;
    padding: 1.8rem;
}

.contact__person-photo {
    position: relative;
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, #4A9EFF, #8B6BFF);
    box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.15);
}

.contact__person-initials {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.4rem;
    color: #fff;
}

.contact__person-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact__person-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.contact__person-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--color-text);
}

.contact__person-role {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.contact__person-text {
    margin: 0.6rem 0 1rem;
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    font-style: italic;
}

.contact__person .btn {
    align-self: flex-start;
}

@media (max-width: 520px) {
    .contact__person {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .contact__person .btn {
        align-self: center;
    }
}

/* ---------- Kontaktformular ---------- */

.contact__form-wrap {
    margin-top: 3rem;
}

.contact__form {
    padding: clamp(1.6rem, 3vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.contact__form-head h3 {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--color-text);
}

.contact__form-head p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

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

@media (max-width: 640px) {
    .contact__form-grid {
        grid-template-columns: 1fr;
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.field--full {
    grid-column: 1 / -1;
}

.field__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

.field__required {
    color: var(--color-accent);
    margin-left: 0.15rem;
}

.field__input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--color-text);
    background: rgba(3, 11, 23, 0.55);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.field__input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.field__input:hover {
    border-color: rgba(74, 158, 255, 0.45);
}

.field__input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.18);
    background: rgba(3, 11, 23, 0.75);
}

.field__textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.5;
}

.field__input.invalid {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
}

.field__error {
    color: #ff8a8a;
    font-size: 0.82rem;
    line-height: 1.3;
}

/* Honeypot — visuell und für Cursor verborgen, aber NICHT display:none,
   damit echte (a11y-) Bots ihn nicht überspringen. */
.contact__honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Einwilligungen / Checkboxen */
.contact__consent {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 1.1rem 1.2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(3, 11, 23, 0.35);
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    line-height: 1.5;
}

.consent__box {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.consent__text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.consent__text a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent__text a:hover,
.consent__text a:focus-visible {
    color: var(--color-text);
}

.consent__required {
    color: var(--color-accent);
    margin-left: 0.15rem;
    font-weight: 600;
}

.consent__error {
    margin-left: 1.85rem;
}

/* Aktions-Zeile */
.contact__form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
}

.contact__form-hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.contact__form-error {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 107, 107, 0.45);
    background: rgba(255, 107, 107, 0.08);
    color: #ffb3b3;
    font-size: 0.92rem;
}

/* Erfolgs-Karte */
.contact__form-success {
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    color: var(--color-text);
}

.contact__form-success svg {
    color: var(--color-trace-ok);
}

.contact__form-success h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
}

.contact__form-success p {
    margin: 0;
    max-width: 42ch;
    color: var(--color-text-muted);
}

/* Sende-Spinner im Button */
.contact__spinner {
    width: 0.95rem;
    height: 0.95rem;
    display: inline-block;
    margin-right: 0.5rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -0.18em;
    animation: contact-spin 0.8s linear infinite;
}

@keyframes contact-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 0.85rem 0;
    border-top: 1px solid var(--color-border);
    background: rgba(3, 11, 23, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer__logo {
    height: 20px;
    width: auto;
    display: block;
    opacity: 0.92;
}

.footer__tagline {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.footer__links a {
    color: var(--color-text-muted);
}

.footer__links a:hover {
    color: var(--color-text);
}

.footer__link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-base);
}

.footer__link-btn:hover {
    color: var(--color-text);
}

.footer__link-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.footer__social {
    display: inline-flex;
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.footer__social-link svg {
    width: 18px;
    height: 18px;
    display: block;
}

.footer__social-link:hover {
    color: var(--color-text);
}

.footer__social-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
    /* Footer im Dokumentfluss statt fixiert: auf kleinen Screens gibt das
       dauerhaft ~100px Viewport frei. Erscheint nur am Seitenende. */
    .footer {
        position: static;
        flex-shrink: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Sticky-Footer-Muster: hält den jetzt mitfließenden Footer auch bei
       kurzen Seiten (z. B. Impressum) zuverlässig am unteren Rand. */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        flex: 1 0 auto;
        padding-bottom: 0;
    }

    /* Cookie-Banner braucht den fixierten Footer nicht mehr freizuhalten */
    .cookie-consent {
        bottom: 1rem;
    }

    .footer__inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0.9rem 1.25rem;
    }
}

/* ============================================================
   Architektur / Betriebsmodelle
   ============================================================ */

.arch {
    background:
        radial-gradient(900px 600px at 50% 0%, rgba(184, 164, 255, 0.05), transparent 70%);
}

/* Drei modulare Bausteine */
.arch__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1rem;
    margin: 2.4rem 0 0;
}

.arch__legend-title {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.arch__legend-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.arch__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-text);
}

.arch__chip-ic {
    display: inline-flex;
    color: var(--color-accent);
}

.arch__chip-ic svg { width: 18px; height: 18px; }

/* Modell-Karten */
.arch__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-top: 2.4rem;
}

.arch__model {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.arch__model:hover {
    border-color: rgba(74, 158, 255, 0.5);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.arch__model--featured {
    border-color: rgba(63, 224, 162, 0.5);
    box-shadow: 0 0 0 1px rgba(63, 224, 162, 0.18), 0 14px 40px rgba(63, 224, 162, 0.10);
}

.arch__badge-top {
    position: absolute;
    top: -10px;
    left: 1.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-trace-ok);
    color: #06231a;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.arch__model-name {
    margin: 0;
    font-size: 1.15rem;
}

.arch__model-tag {
    margin: 0.25rem 0 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--color-accent);
}

.arch__layers {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.arch__layer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: rgba(8, 18, 36, 0.4);
}

.arch__layer-ic {
    display: inline-flex;
    color: var(--color-text-muted);
}

.arch__layer-ic svg { width: 20px; height: 20px; }

.arch__layer-name {
    font-size: 0.9rem;
    color: var(--color-text);
}

.arch__loc {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    padding: 0.22rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}

.arch__loc--onprem {
    color: var(--color-trace-ok);
    border: 1px solid rgba(63, 224, 162, 0.4);
    background: rgba(63, 224, 162, 0.10);
}

.arch__loc--ki {
    color: var(--color-accent);
    border: 1px solid rgba(74, 158, 255, 0.4);
    background: rgba(74, 158, 255, 0.10);
}

.arch__loc--cloud {
    color: var(--color-trace-agent);
    border: 1px solid rgba(184, 164, 255, 0.4);
    background: rgba(184, 164, 255, 0.10);
}

.arch__model-note {
    margin: auto 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Nutzen-Zeile */
.arch__benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    margin: 2.6rem 0 0;
}

.arch__benefit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.arch__benefit::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-trace-ok);
    box-shadow: 0 0 8px var(--color-trace-ok);
}

@media (max-width: 880px) {
    .arch__grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   Cookie-Consent
   ============================================================ */

.cookie-consent {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--footer-height) + 1rem);
    z-index: 200;
    width: min(680px, calc(100% - 2rem));
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent__card {
    background: rgba(9, 20, 38, 0.94);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.4rem;
}

.cookie-consent__title {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}

.cookie-consent__text {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    color: var(--color-text-muted);
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 560px) {
    .cookie-consent__actions {
        flex-direction: column-reverse;
    }

    .cookie-consent__actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Section Header (reusable)
   ============================================================ */

.section-header {
    max-width: 720px;
}

.section-header__title {
    margin: 0 0 0.6rem;
}

.section-header__sub {
    color: var(--color-text-muted);
    font-size: 1.08rem;
    margin: 0;
}

/* ============================================================
   Product Section — 3 Tier Karten
   ============================================================ */

.product {
    background:
        radial-gradient(900px 600px at 50% 100%, rgba(74, 158, 255, 0.06), transparent 70%);
}

.product__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (max-width: 1024px) {
    .product__grid {
        grid-template-columns: 1fr;
    }
}

.product-tier {
    position: relative;
    overflow: hidden;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

/* Akzent-Leiste am oberen Rand, fährt bei Hover ein */
.product-tier::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-trace-ok));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.product-tier:hover,
.product-tier:focus-within {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px var(--color-accent-glow);
}

.product-tier:hover::before,
.product-tier:focus-within::before {
    transform: scaleX(1);
}

.product-tier__head {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.product-tier__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    color: var(--color-accent);
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.28);
    transition: transform var(--transition-base),
                background var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.product-tier__icon svg {
    width: 28px;
    height: 28px;
}

.product-tier:hover .product-tier__icon,
.product-tier:focus-within .product-tier__icon {
    transform: translateY(-2px) scale(1.06);
    background: rgba(74, 158, 255, 0.18);
    border-color: var(--color-accent);
    box-shadow: 0 8px 22px var(--color-accent-glow);
}

.product-tier__tag {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.28);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent);
    line-height: 1;
}

.product-tier__tag-num {
    color: var(--color-text);
    font-weight: 600;
}

.product-tier__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.product-tier__tagline {
    margin: 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.4;
}

.product-tier__body {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
    font-size: 0.94rem;
}

.product-tier__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.product-tier__features li {
    position: relative;
    padding-left: 1.25rem;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.45;
}

.product-tier__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 9px;
    height: 1px;
    background: var(--color-accent);
}

.product-tier__apps {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.product-tier__apps-label {
    display: block;
    margin-bottom: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
}

.product-tier__apps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.product-tier__apps-list li {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-accent);
    padding: 0.32rem 0.65rem;
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.22);
    border-radius: 6px;
    line-height: 1;
}

.product-tier__best {
    margin: auto 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.product-tier__best-label {
    display: inline-block;
    margin-right: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
}

.product-tier__link {
    display: inline-block;
    margin-top: 0.65rem;
    font-size: 0.9rem;
    color: var(--color-accent);
    font-weight: 500;
}

.product-tier__link:hover {
    color: var(--color-text);
}

/* ----- Zusatz-Infos, die bei Hover/Fokus eingeblendet werden ----- */
.product-tier__reveal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.3rem 1.8rem 1.6rem;
    background: linear-gradient(180deg,
                rgba(7, 18, 38, 0.78),
                rgba(7, 18, 38, 0.97) 38%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--color-accent);
    box-shadow: 0 -16px 34px rgba(2, 8, 20, 0.45);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-base),
                opacity var(--transition-base),
                visibility var(--transition-base);
}

.product-tier:hover .product-tier__reveal,
.product-tier:focus-within .product-tier__reveal {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.product-tier__reveal-label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent);
}

.product-tier__reveal-text {
    margin: 0;
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.product-tier__reveal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.product-tier__reveal-chips span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-trace-ok);
    padding: 0.28rem 0.6rem;
    background: rgba(63, 224, 162, 0.08);
    border: 1px solid rgba(63, 224, 162, 0.3);
    border-radius: 6px;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .product-tier__reveal {
        transition: opacity var(--transition-base), visibility var(--transition-base);
        transform: none;
    }
}

/* ----- Billing-Toggle (CSS-only via versteckte Radios + :has()) ----- */

.billing-toggle__input {
    /* Visuell versteckt, aber fokussierbar */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.billing-toggle {
    margin: 2.5rem 0 1rem;
    padding: 0.32rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(0, 9, 21, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.billing-toggle__legend {
    /* fieldset-legend visuell ausblenden, semantisch erhalten */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.billing-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
    user-select: none;
}

.billing-toggle__label:hover {
    color: var(--color-text);
}

/* Aktive Position einfärben — via :has() ankoppeln */
.product:has(#product-bill-monthly:checked) .billing-toggle__label[for="product-bill-monthly"],
.product:has(#product-bill-yearly:checked)  .billing-toggle__label[for="product-bill-yearly"] {
    background: var(--color-accent);
    color: #ffffff;
}

/* Tastatur-Fokus auf den Radios → Outline an die zugehörige Label-Pill */
#product-bill-monthly:focus-visible ~ .billing-toggle .billing-toggle__label[for="product-bill-monthly"],
#product-bill-yearly:focus-visible  ~ .billing-toggle .billing-toggle__label[for="product-bill-yearly"] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.billing-toggle__badge {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #001a0d;
    background: var(--color-trace-ok);
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    line-height: 1;
}

/* ----- Pricing-Block in jeder Tier-Karte ----- */

.pricing {
    background: rgba(74, 158, 255, 0.04);
    border: 1px solid rgba(74, 158, 255, 0.18);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pricing__main {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1;
}

.pricing__amount {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.pricing__currency {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.pricing__period {
    margin-left: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Toggle-Default: Monatlich sichtbar, Jährlich versteckt */
.pricing__main--yearly { display: none; }

/* Bei aktiver Jährlich-Auswahl → Sichtbarkeit umschalten */
.product:has(#product-bill-yearly:checked) .pricing__main--monthly { display: none; }
.product:has(#product-bill-yearly:checked) .pricing__main--yearly  { display: flex; }

.pricing__row {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.pricing__label {
    flex-shrink: 0;
    min-width: 4.5rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
}

.pricing__value {
    color: var(--color-text);
    flex: 1;
}

.pricing__note {
    margin: 0.25rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(74, 158, 255, 0.12);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.product__pricing-note {
    margin: 2.5rem auto 0;
    max-width: 740px;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    font-style: italic;
}

@media (max-width: 600px) {
    .pricing {
        padding: 0.9rem 0.95rem;
    }
    .pricing__amount {
        font-size: 2rem;
    }
    .pricing__currency {
        font-size: 1.15rem;
    }
    .billing-toggle__label {
        padding: 0.45rem 0.85rem;
        font-size: 0.7rem;
    }
}

/* ============================================================
   FAQ Section
   ============================================================ */

.faq {
    background:
        radial-gradient(900px 500px at 100% 30%, rgba(38, 90, 166, 0.08), transparent 70%);
}

.faq__list {
    margin: 3rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 1080px;
}

.faq-item {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.faq-item:hover {
    border-color: rgba(74, 158, 255, 0.4);
}

.faq-item[open] {
    border-color: var(--color-accent);
    background: rgba(15, 41, 77, 0.55);
}

.faq-item__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
}

/* native disclosure-Triangle ausblenden */
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::marker { content: ""; }

.faq-item__summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

.faq-item__num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 28px;
}

.faq-item__question {
    flex: 1;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.faq-item__chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform var(--transition-base), color var(--transition-base);
}

.faq-item:hover .faq-item__chevron {
    color: var(--color-accent);
}

.faq-item[open] .faq-item__chevron {
    transform: rotate(180deg);
    color: var(--color-accent);
}

.faq-item__body {
    padding: 0 1.4rem 1.4rem calc(1.4rem + 28px + 1rem);
    color: var(--color-text-muted);
    animation: faq-body-in 320ms var(--ease-out);
}

.faq-item__body p {
    margin: 0 0 0.9rem;
    line-height: 1.65;
    font-size: 0.98rem;
}

.faq-item__body p:last-child {
    margin-bottom: 0;
}

.faq-item__body strong {
    color: var(--color-text);
    font-weight: 600;
}

.faq-item__body em {
    color: var(--color-text);
    font-style: italic;
}

.faq-item__list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.faq-item__list li {
    position: relative;
    padding-left: 1.25rem;
    line-height: 1.6;
    font-size: 0.96rem;
    color: var(--color-text-muted);
}

.faq-item__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 8px;
    height: 1px;
    background: var(--color-accent);
}

.faq-item__closer {
    margin-top: 1.1rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.92rem !important;
    color: var(--color-text-muted);
}

.faq-mono {
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--color-accent);
    padding: 0.05em 0.3em;
    background: rgba(74, 158, 255, 0.08);
    border-radius: 3px;
    border: 1px solid rgba(74, 158, 255, 0.18);
}

@keyframes faq-body-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .faq-item__summary {
        padding: 1rem 1.1rem;
        gap: 0.75rem;
    }
    .faq-item__question {
        font-size: 1rem;
    }
    .faq-item__body {
        padding: 0 1.1rem 1.2rem 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item__body { animation: none; }
    .faq-item__chevron { transition: none; }
}

/* ============================================================
   Agentic RAG Trace — Live-Pipeline-Panel
   ============================================================ */

.rag__trace-wrap {
    margin-top: 4.5rem;
}

.agentic-trace {
    --trace-cycle: 16s;
    --trace-stagger: 1.6s;
    --trace-card-h: 138px;

    position: relative;
    padding: 1rem 0.85rem 1.25rem;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(74, 158, 255, 0.07), transparent 70%),
        linear-gradient(180deg, rgba(0, 9, 21, 0.65), rgba(15, 41, 77, 0.35));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
}

/* dezenter Scanline-Overlay für Telemetrie-Feel */
.agentic-trace::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(74, 158, 255, 0.025) 0,
        rgba(74, 158, 255, 0.025) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 0;
}

.agentic-trace > * {
    position: relative;
    z-index: 1;
}

/* ----- Head: Badge + Live-Indicator + Caption ----- */

.agentic-trace__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
}

.agentic-trace__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: var(--color-trace-agent-soft);
    border: 1px solid rgba(140, 100, 255, 0.4);
    border-radius: 999px;
    color: var(--color-trace-agent);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1;
}

.agentic-trace__badge-icon {
    animation: trace-badge-spin 6s linear infinite;
}

.agentic-trace__live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-trace-ok);
}

.agentic-trace__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-trace-ok);
    box-shadow: 0 0 0 0 var(--color-trace-ok-soft);
    animation: trace-live-pulse 2s ease-out infinite;
}

.agentic-trace__caption {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-left: auto;
}

@media (max-width: 700px) {
    .agentic-trace__caption {
        margin-left: 0;
        width: 100%;
    }
}

/* ----- Viewport (scrollt horizontal auf schmalen Screens) ----- */

.agentic-trace__viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.5rem 0 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 158, 255, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
}

.agentic-trace__viewport::-webkit-scrollbar {
    height: 6px;
}

.agentic-trace__viewport::-webkit-scrollbar-thumb {
    background: rgba(74, 158, 255, 0.25);
    border-radius: 3px;
}

.agentic-trace__flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding-bottom: 1.25rem;
    width: 100%;
    /* Schwelle, unterhalb der horizontal gescrollt wird — auf typischen
       Desktops (≥ 1200 px Viewport) fitten alle 8 Karten ohne Scroll. */
    min-width: 1040px;
}

/* ----- Trace-Karten ----- */

.trace-card {
    position: relative;
    /* Karten verteilen sich gleichmäßig auf den verbleibenden Platz. */
    flex: 1 1 0;
    min-width: 100px;
    min-height: var(--trace-card-h);
    padding: 0.6rem 0.55rem;
    background: rgba(15, 41, 77, 0.35);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow: hidden;
    animation: trace-card-cycle var(--trace-cycle) ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger));
    will-change: border-color, background, box-shadow;
}

/* dezenter Top-Scan-Beam, läuft beim Aktivieren über die Karte */
.trace-card::after {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(74, 158, 255, 0.16),
        transparent
    );
    pointer-events: none;
    opacity: 0;
    animation: trace-card-scan var(--trace-cycle) ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger));
}

.trace-card__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    min-width: 0;
    animation: trace-head-cycle var(--trace-cycle) ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger));
}

.trace-card__head--mono {
    color: var(--color-text);
}

.trace-card__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.trace-card__title {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-card__title--mono {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0;
    color: var(--color-text);
}

.trace-card__meta {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.trace-card__meta--mono {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.67rem;
}

.trace-card__line {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.trace-card__line--mono {
    font-family: var(--font-mono);
    font-size: 0.67rem;
    color: var(--color-text-muted);
}

.trace-card__line--dim {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.trace-card__line--quote {
    font-style: italic;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.trace-card__hl {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 500;
}

.trace-card__check {
    color: var(--color-trace-ok);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* Sub-Tools innerhalb search_qdrant */
.trace-subs {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.trace-sub {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--color-text-muted);
    padding: 0.15rem 0.4rem;
    background: rgba(0, 9, 21, 0.5);
    border: 1px solid rgba(74, 158, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    animation: trace-sub-cycle var(--trace-cycle) ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger) + var(--s, 0) * 0.18s + 0.3s);
}

/* search_qdrant: leicht stärker akzentuiert, da im Bild der „active highlight" */
.trace-card--search {
    background: rgba(15, 41, 77, 0.5);
}

.trace-card--agent .trace-card__icon {
    animation: trace-agent-spin 4s linear infinite;
    transform-origin: center;
}

/* ----- Connectors zwischen Karten ----- */

.trace-link {
    flex: 0 0 36px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0;
}

.trace-link--tight {
    flex-basis: 18px;
}

/* Connector-Label sitzt als kleines Chip oberhalb der Schiene und darf
   horizontal etwas über die Connector-Slot-Breite hinausragen — der dunkle
   Hintergrund liegt sauber über dem Panel-BG. */
.trace-link__label {
    position: absolute;
    bottom: calc(50% + 12px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    padding: 0.15rem 0.45rem;
    background: rgba(3, 11, 23, 0.85);
    border: 1px solid rgba(74, 158, 255, 0.18);
    border-radius: 4px;
    pointer-events: none;
    animation: trace-link-label-cycle var(--trace-cycle) ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger) + 0.4s);
}

.trace-link__rail {
    position: relative;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
    overflow: hidden;
}

.trace-link__fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--color-accent) 0%,
        var(--color-trace-ok) 100%
    );
    transform-origin: left center;
    transform: scaleX(0);
    animation: trace-link-fill-cycle var(--trace-cycle) ease-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger) + 0.7s);
}

.trace-link__pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow:
        0 0 8px var(--color-accent),
        0 0 16px var(--color-accent-glow);
    opacity: 0;
    animation: trace-link-pulse-cycle var(--trace-cycle) ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger) + 0.55s);
}

/* ----- Status-Track ----- */

.agentic-trace__track {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 1.1rem 0 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
    border-top: 1px solid var(--color-border);
    width: 100%;
    min-width: 1040px;
}

.track-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    position: relative;
    padding-right: 0.5rem;
}

.track-step__bar {
    position: relative;
    width: 100%;
    height: 1px;
    background: var(--color-border);
    overflow: hidden;
}

.track-step__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-trace-ok);
    transform: scaleX(0);
    transform-origin: left;
    animation: trace-track-bar-cycle var(--trace-cycle) ease-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger) + 0.5s);
}

.track-step__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-border);
    margin-left: -3px;
    animation: trace-track-dot-cycle var(--trace-cycle) ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger));
}

.track-step__label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-left: -6px;
    animation: trace-track-label-cycle var(--trace-cycle) ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * var(--trace-stagger));
}

@media (max-width: 700px) {
    .agentic-trace {
        --trace-card-h: 132px;
        padding: 0.85rem 0.75rem 1.1rem;
    }
    .trace-card {
        min-width: 96px;
        padding: 0.55rem 0.5rem;
    }
    .trace-link {
        flex-basis: 32px;
    }
    .trace-link--tight {
        flex-basis: 16px;
    }
    .trace-link__label {
        font-size: 0.55rem;
        padding: 0.12rem 0.4rem;
    }
}

/* ============================================================
   Legal (Impressum / Datenschutz)
   ============================================================ */

.legal__content {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 3rem);
}

.legal__block + .legal__block {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--color-border);
}

.legal__block h2 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.legal__block h3 {
    font-size: 1.02rem;
    margin: 1.5rem 0 0.5rem;
    color: var(--color-text);
}

.legal__block h4 {
    font-size: 0.95rem;
    margin: 1.1rem 0 0.4rem;
    color: var(--color-text);
}

.legal__block > :first-child {
    margin-top: 0;
}

.legal__block p:last-child {
    margin-bottom: 0;
}

.legal__list {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    color: var(--color-text-muted);
}

.legal__list li {
    margin-bottom: 0.3rem;
}

.legal__table-wrap {
    overflow-x: auto;
    margin: 0.75rem 0 1rem;
}

.legal__table {
    width: 100%;
    min-width: 540px;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.legal__table th,
.legal__table td {
    text-align: left;
    vertical-align: top;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.legal__table th {
    background: rgba(74, 158, 255, 0.06);
    color: var(--color-text);
    font-weight: 600;
}

.legal__address {
    font-style: normal;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.legal__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    color: var(--color-text-muted);
}

.legal__back {
    margin-top: 2.5rem;
}

/* ---- Download-Karten (AGB / EB) ---- */
.legal__downloads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 720px) {
    .legal__downloads {
        grid-template-columns: 1fr;
    }
}

.legal__download {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(3, 11, 23, 0.45);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}

.legal__download:hover,
.legal__download:focus-visible {
    border-color: var(--color-accent);
    background: rgba(74, 158, 255, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.legal__download-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(74, 158, 255, 0.12);
    color: var(--color-accent);
}

.legal__download-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.legal__download-title {
    font-weight: 600;
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--color-text);
}

.legal__download-meta {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.legal__download-tag {
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* ============================================================
   Blazor Reconnect-UI — überschreibt die Standard-Anzeige
   ("Rejoining the server …"). Wird über die Klassen
   .components-reconnect-show / -failed / -rejected gesteuert.
   ============================================================ */

#components-reconnect-modal.reconnect {
    /* Standard: unsichtbar — Blazor schaltet Zustands-Klassen zu */
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* Sichtbar in allen aktiven Zuständen */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    animation: reconnect-fade-in 200ms ease-out;
}

@keyframes reconnect-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reconnect__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 9, 21, 0.72);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.reconnect__dialog {
    position: relative;
    width: min(420px, 100%);
    text-align: center;
    padding: 2.5rem 2rem 2.25rem;
    background: linear-gradient(180deg, rgba(15, 41, 77, 0.92), rgba(3, 11, 23, 0.92));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), 0 0 40px rgba(74, 158, 255, 0.12);
}

/* ---------- Animierter Scanning-Orb ---------- */
.reconnect__orb {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem;
}

.reconnect__ring {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: 2px solid transparent;
}

.reconnect__ring--1 {
    border-top-color: var(--color-accent);
    border-right-color: var(--color-accent);
    animation: reconnect-spin 1.1s linear infinite;
}

.reconnect__ring--2 {
    inset: 14px;
    border-bottom-color: var(--color-trace-ok);
    border-left-color: var(--color-trace-ok);
    opacity: 0.7;
    animation: reconnect-spin 1.6s linear infinite reverse;
}

.reconnect__ring--3 {
    inset: 0;
    border-color: var(--color-accent);
    opacity: 0.18;
    animation: reconnect-pulse 1.8s ease-out infinite;
}

.reconnect__core {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 16px var(--color-accent-glow), 0 0 4px var(--color-accent);
    animation: reconnect-breathe 1.4s ease-in-out infinite;
}

@keyframes reconnect-spin {
    to { transform: rotate(360deg); }
}

@keyframes reconnect-pulse {
    0%   { transform: scale(0.7); opacity: 0.35; }
    100% { transform: scale(1.25); opacity: 0; }
}

@keyframes reconnect-breathe {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(0.72); opacity: 0.7; }
}

/* ---------- Texte / Zustände ---------- */
.reconnect__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.6rem;
}

.reconnect__text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
}

.reconnect__attempt {
    margin: 1rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--color-accent);
}

.reconnect__retry-in {
    color: var(--color-text-muted);
}

.reconnect__btn {
    margin-top: 1.4rem;
}

/* Standardmäßig alle Zustands-Blöcke ausblenden … */
.reconnect__state {
    display: none;
}

/* … und je nach Blazor-Klasse den passenden einblenden */
#components-reconnect-modal.components-reconnect-show .reconnect__state--reconnecting,
#components-reconnect-modal.components-reconnect-failed .reconnect__state--failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect__state--rejected {
    display: block;
}

/* Orb nur während aktiver Wiederverbindung animiert zeigen;
   in Fehlerzuständen ruhig stellen */
#components-reconnect-modal.components-reconnect-failed .reconnect__orb,
#components-reconnect-modal.components-reconnect-rejected .reconnect__orb {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal.reconnect { animation: none; }
    .reconnect__ring,
    .reconnect__core {
        animation-duration: 0s;
        animation-iteration-count: 1;
    }
    .reconnect__ring--1 { border-right-color: transparent; }
}

/* ============================================================
   DemoRAG — interaktive Agentic-Hybrid-RAG-Demo
   ============================================================ */

.demorag {
    background:
        radial-gradient(800px 500px at 0% 0%, rgba(74, 158, 255, 0.06), transparent 70%);
}

.demorag__app {
    margin-top: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(74, 158, 255, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(0, 9, 21, 0.6), rgba(15, 41, 77, 0.28));
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Kopfzeile der Konsole */
.demorag__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
    background: rgba(3, 11, 23, 0.4);
}

.demorag__dots {
    display: inline-flex;
    gap: 0.4rem;
    flex: none;
}

.demorag__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.demorag__dot:first-child { background: rgba(255, 110, 110, 0.55); }
.demorag__dot:nth-child(2) { background: rgba(255, 200, 90, 0.55); }
.demorag__dot:nth-child(3) { background: rgba(63, 224, 162, 0.55); }

.demorag__head-title {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demorag__modes {
    display: inline-flex;
    margin-left: auto;
    gap: 2px;
    padding: 3px;
    flex: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
}

.demorag__mode {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-base), background var(--transition-base);
}

.demorag__mode:hover { color: var(--color-text); }

.demorag__mode--active[data-mode="rag"] {
    color: #06101f;
    background: var(--color-accent);
    font-weight: 600;
}

.demorag__mode--active[data-mode="plain"] {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

/* Bühne (Konversation/Ablauf) */
.demorag__body {
    min-height: 220px;
    max-height: 540px;
    overflow-y: auto;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
}

.demorag__placeholder {
    margin: auto;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    max-width: 42ch;
}

.demorag__msg,
.demorag__panel,
.demorag__answer,
.demorag__think,
.demorag__pipe,
.demorag__foot {
    animation: demorag-in 0.35s ease both;
}

@keyframes demorag-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Nutzerfrage */
.demorag__msg--user {
    align-self: flex-end;
    max-width: 85%;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgba(74, 158, 255, 0.35);
    border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
    background: rgba(74, 158, 255, 0.1);
}

.demorag__msg-who {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}

.demorag__msg-text { margin: 0; color: var(--color-text); line-height: 1.5; }

/* „Denkt nach" + Typing-Dots */
.demorag__think {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.demorag__typing { display: inline-flex; gap: 3px; }

.demorag__typing i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: demorag-blink 1s infinite ease-in-out;
}

.demorag__typing i:nth-child(2) { animation-delay: 0.15s; }
.demorag__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes demorag-blink {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40%           { opacity: 1;    transform: translateY(-2px); }
}

/* Pipeline-Fortschritt */
.demorag__pipe {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(0, 9, 21, 0.3);
}

.demorag__pipe-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    transition: color var(--transition-base);
}

.demorag__pipe-step.is-active { color: var(--color-text); }
.demorag__pipe-step.is-done { color: var(--color-text); }

.demorag__pipe-ic {
    width: 18px; height: 18px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    position: relative;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.demorag__pipe-step.is-active .demorag__pipe-ic {
    border-color: var(--color-accent);
    border-top-color: transparent;
    animation: demorag-spin 0.7s linear infinite;
}

.demorag__pipe-step.is-done .demorag__pipe-ic {
    border-color: var(--color-trace-ok);
    background: var(--color-trace-ok);
    animation: none;
}

.demorag__pipe-step.is-done .demorag__pipe-ic::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #06101f;
}

@keyframes demorag-spin { to { transform: rotate(360deg); } }

/* Panels (Quellen / Kontext) */
.demorag__panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    padding: 0.9rem 1rem;
}

.demorag__panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.7rem;
}

.demorag__panel-title svg { width: 15px; height: 15px; }

.demorag__sources {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.demorag__src {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-border);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: rgba(0, 9, 21, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.demorag__src.is-in { opacity: 1; transform: none; }

.demorag__src-ic {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.3);
    color: var(--color-accent);
}

.demorag__src-ic svg { width: 18px; height: 18px; }

.demorag__src-body { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }

.demorag__src-name { font-weight: 600; font-size: 0.9rem; color: var(--color-text); }

.demorag__src-snip {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.demorag__src-score {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 96px;
    flex: none;
}

.demorag__src-score-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
}

.demorag__src-score-label {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.demorag__src-score-val {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-trace-ok);
}

.demorag__src-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.demorag__src-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-trace-ok));
    transition: width 0.6s ease;
}

.demorag__context {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* Antworten */
.demorag__answer {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
}

.demorag__answer--rag {
    border-color: rgba(63, 224, 162, 0.4);
    background: linear-gradient(180deg, rgba(63, 224, 162, 0.06), var(--color-card-bg));
}

.demorag__answer--plain {
    border-color: rgba(255, 160, 90, 0.3);
    background: linear-gradient(180deg, rgba(255, 160, 90, 0.05), var(--color-card-bg));
}

.demorag__badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.7rem;
}

.demorag__badge--rag {
    color: var(--color-trace-ok);
    border: 1px solid rgba(63, 224, 162, 0.4);
    background: rgba(63, 224, 162, 0.08);
}

.demorag__badge--plain {
    color: #ffc88a;
    border: 1px solid rgba(255, 160, 90, 0.4);
    background: rgba(255, 160, 90, 0.08);
}

.demorag__answer-text {
    margin: 0;
    line-height: 1.65;
    color: var(--color-text);
}

.demorag__cite {
    font-family: var(--font-mono);
    font-size: 0.7em;
    color: var(--color-trace-ok);
    padding: 0 0.15em;
    cursor: default;
}

.demorag__nosrc {
    margin-top: 0.8rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 160, 90, 0.08);
    border: 1px solid rgba(255, 160, 90, 0.25);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.demorag__nosrc strong { color: #ffc88a; }

.demorag__cited {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(63, 224, 162, 0.2);
}

.demorag__cited-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.demorag__cited-list {
    margin: 0;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.demorag__foot { display: flex; justify-content: flex-end; }

.demorag__replay {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.demorag__replay:hover { color: var(--color-text); border-color: var(--color-accent); }

/* Eingabe-/Auswahlbereich */
.demorag__compose {
    padding: 1.1rem 1.2rem 1.3rem;
    border-top: 1px solid var(--color-border);
    background: rgba(3, 11, 23, 0.3);
}

.demorag__q-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.demorag__q-hint {
    margin-left: 0.5rem;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
    color: var(--color-accent);
}

.demorag__chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.6rem;
    margin: 0.6rem 0 1rem;
}

/* Beispiel-Fragen: bewusst als anklickbare Vorschlags-Buttons gestaltet */
.demorag__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text);
    background: rgba(74, 158, 255, 0.07);
    border: 1px solid rgba(74, 158, 255, 0.32);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    animation: demorag-chip-hint 2.6s ease-in-out infinite;
    transition: border-color var(--transition-base),
                background var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

/* Aktions-Pfeil signalisiert „hier klicken“ */
.demorag__chip::after {
    content: "→";
    flex: none;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.75;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.demorag__chip:hover {
    border-color: var(--color-accent);
    background: rgba(74, 158, 255, 0.14);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--color-accent-glow);
    animation: none;
}

.demorag__chip:hover::after {
    transform: translateX(3px);
    opacity: 1;
}

.demorag__chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    animation: none;
}

.demorag__chip--active {
    border-color: var(--color-accent);
    background: rgba(74, 158, 255, 0.18);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    animation: none;
}

.demorag__chip--active::after {
    content: "✓";
    opacity: 1;
}

@keyframes demorag-chip-hint {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 158, 255, 0); }
    50%      { box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1); }
}

.demorag__input {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.4rem 0.4rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
}

.demorag__input-text {
    flex: 1;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demorag__input-text.is-filled { color: var(--color-text); }

.demorag__send { white-space: nowrap; }
.demorag__send:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 560px) {
    .demorag__head { flex-wrap: wrap; }
    .demorag__modes { margin-left: 0; width: 100%; justify-content: center; }
    .demorag__src {
        grid-template-columns: 30px 1fr;
        grid-template-areas: "ic body" "score score";
    }
    .demorag__src-ic { grid-area: ic; }
    .demorag__src-body { grid-area: body; }
    .demorag__src-score { grid-area: score; width: 100%; }
    .demorag__src-bar { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .demorag__msg,
    .demorag__panel,
    .demorag__answer,
    .demorag__think,
    .demorag__pipe,
    .demorag__foot { animation: none; }
    .demorag__src { opacity: 1; transform: none; transition: none; }
    .demorag__src-bar-fill { transition: none; }
    .demorag__typing i { animation: none; }
    .demorag__pipe-step.is-active .demorag__pipe-ic { animation: none; }
    .demorag__chip { animation: none; }
}

/* ============================================================
   Mobile-Optimierung — globaler Feinschliff
   ------------------------------------------------------------
   Zentralisiert die seitenweiten Mobil-Anpassungen: vertikale
   Sektionsabstände (sonst fix 7rem überall), gestraffte
   Innenabstände und Touch-Zugänglichkeit. Komponenten-spezifische
   Regeln stehen weiterhin in ihren jeweiligen Blöcken oben.
   ============================================================ */

/* Tablet & darunter: großzügige Desktop-Abstände zurücknehmen */
@media (max-width: 768px) {
    :root {
        --section-padding-y: 4.5rem;
    }
    .howrag {
        padding-block: 3rem;
    }
}

/* Phone: deutlich kompakter → spürbar kürzerer Scroll-Weg */
@media (max-width: 480px) {
    :root {
        --section-padding-y: 3.25rem;
    }
    .howrag {
        padding-block: 2.5rem;
    }

    /* Abstand zwischen Section-Header und Inhalt straffen */
    .usp__grid,
    .demos__grid,
    .product__grid,
    .arch__grid,
    .faq__list,
    .rag__intro,
    .contact__layout {
        margin-top: 2rem;
    }
    .stack__diagram,
    .process__timeline {
        margin-top: 2.25rem;
    }
    .billing-toggle {
        margin-top: 1.75rem;
    }
    .arch__grid {
        gap: 1rem;
    }
}

/* Touch-Geräte ohne Hover: die per Hover eingeblendeten „Im Detail"-
   Inhalte der Produktkarten inline sichtbar machen — sonst sind sie
   auf dem Smartphone gar nicht erreichbar. */
@media (hover: none) {
    .product-tier__reveal {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 1rem 0 0;
        margin-top: 0.4rem;
        border-top: 1px solid var(--color-border);
    }
}