/* ═══════════════════════════════════════════════════════════════════════════
   KI FÜR KMU – seitenspezifisches Stylesheet
   Vollständig eigenständig (kein @import). Ladereihenfolge:
   1. style-4.min.css (global)  →  2. diese Datei (via $PAGE['extra_css'])
   Alle Regeln sind unter .ai-kmu-page gekapselt; Farben sind je Komponente
   explizit gesetzt (keine Vererbung aus ai-*, cs-*, .white, .dark-box).
   Farbsystem: ACTICON-Blau rgb(23,24,215) · Dunkel #02071a · Text #0d0e1a
   Motion: versteckte Startzustände nur unter .kmu-anim / .kmu-thread-live
   (werden per JS gesetzt) – ohne JS und bei reduced motion bleibt alles
   sofort sichtbar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero-Artwork (#bg.b6) – Replikat der Modul-Regeln, hier gekapselt ────── */
.ai-kmu-page #bg.b6 { background-color: #02071a; }
.ai-kmu-page #bg.b6::before { display: block; width: 100%; left: 0; }
.ai-kmu-page #bg.b6.a::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   GRUNDLAGEN: Sektionen, Köpfe, Labels
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-sec { padding: 5.5rem 0; }
.ai-kmu-page .kmu-sec-white { background-color: #ffffff; }
.ai-kmu-page .kmu-sec-grey  { background-color: #f4f5fa; }
.ai-kmu-page .kmu-sec-dark  { background-color: #02071a; }

.ai-kmu-page .kmu-section-head { max-width: 46rem; margin-bottom: 3rem; }

.ai-kmu-page .kmu-label {
    display: block;
    margin-bottom: 1rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .2rem;
    text-transform: uppercase;
    color: rgb(23, 24, 215);
}
.ai-kmu-page .kmu-label-dim { color: #8f9eff; }

.ai-kmu-page .kmu-sec-white .mainheadline,
.ai-kmu-page .kmu-sec-grey  .mainheadline { color: #0d0e1a; }
.ai-kmu-page .kmu-sec-dark  .mainheadline { color: #ffffff; }

.ai-kmu-page .kmu-section-lead {
    margin-top: 1.25rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, .62);
}

/* ═══════════════════════════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-hero-section { padding-bottom: 4.5rem; }

.ai-kmu-page .kmu-hero-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 1.5rem;
    align-items: stretch;
}

/* Linke Spalte: weißes Textpanel auf dunklem Artwork */
.ai-kmu-page .kmu-hero-text {
    background-color: rgba(255, 255, 255, .94);
    padding: 2.5rem 2.75rem;
}
.ai-kmu-page .kmu-hero-eyebrow {
    margin: 0 0 1rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .22rem;
    text-transform: uppercase;
    color: rgb(23, 24, 215);
}
.ai-kmu-page .kmu-hero-text .mainheadline { color: #0d0e1a; }
.ai-kmu-page .kmu-hero-sub {
    margin-top: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.55;
    color: #2a2a2a;
}
.ai-kmu-page .kmu-hero-desc {
    margin-top: 1rem;
    font-size: .95rem;
    line-height: 1.72;
    color: rgba(0, 0, 0, .62);
}

/* CTAs */
.ai-kmu-page .kmu-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2rem;
}
.ai-kmu-page .kmu-btn {
    display: inline-block;
    padding: .8rem 2.25rem .75rem;
    background-color: rgb(23, 24, 215);
    border: .125rem solid rgb(23, 24, 215);
    border-radius: .2rem;
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.ai-kmu-page .kmu-btn:hover {
    background-color: #0d0e1a;
    border-color: #0d0e1a;
    color: #ffffff;
}
.ai-kmu-page .kmu-btn:active { transform: scale(.97); }
.ai-kmu-page .kmu-btn-ghost {
    background-color: transparent;
    border-color: rgb(23, 24, 215);
    color: rgb(23, 24, 215);
}
.ai-kmu-page .kmu-btn-ghost:hover {
    background-color: rgb(23, 24, 215);
    border-color: rgb(23, 24, 215);
    color: #ffffff;
}

/* Vertrauenspunkte */
.ai-kmu-page .kmu-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: 1.9rem;
}
.ai-kmu-page .kmu-trust-item {
    position: relative;
    padding-left: .9rem;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .55);
}
.ai-kmu-page .kmu-trust-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: .38em;
    width: .35rem;
    height: .35rem;
    background-color: rgb(23, 24, 215);
}

/* Rechte Spalte: dunkle Flow-Karte */
.ai-kmu-page .kmu-hero-visual { display: flex; }
.ai-kmu-page .kmu-flow-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: rgba(2, 5, 22, .88);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 40px rgba(0, 0, 14, .5);
    backdrop-filter: blur(2px) brightness(.82);
    padding: 1.75rem 1.75rem 1.4rem;
}
.ai-kmu-page .kmu-flow-card-head { display: flex; flex-direction: column; gap: .3rem; }
.ai-kmu-page .kmu-flow-card-title {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffff;
}
.ai-kmu-page .kmu-flow-card-sub {
    font-size: .75rem;
    color: rgba(255, 255, 255, .55);
}
.ai-kmu-page #kmu-flow {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1.1rem;
    font-family: Montserrat, Arial, sans-serif;
}
.ai-kmu-page .kmu-flow-foot {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .72rem;
    color: rgba(255, 255, 255, .55);
}

/* ── Hero-Sequenz: Startzustände nur unter .kmu-anim (per JS gesetzt) ──── */
.ai-kmu-page #kmu-flow.kmu-anim .kmu-fs {
    opacity: 0;
    transform: translateY(6px);
}
.ai-kmu-page #kmu-flow.kmu-anim .kmu-fl,
.ai-kmu-page #kmu-flow.kmu-anim .kmu-check {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.ai-kmu-page #kmu-flow.kmu-anim .kmu-result { clip-path: inset(0 0 100% 0); }

/* Abspielen: eine einmalige, gestaffelte Sequenz (~2.9s) */
.ai-kmu-page #kmu-flow.kmu-play .kmu-fs {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .55s cubic-bezier(.23, 1, .32, 1);
}
.ai-kmu-page #kmu-flow.kmu-play .kmu-fl {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .45s cubic-bezier(.77, 0, .175, 1);
}
.ai-kmu-page #kmu-flow.kmu-play .kmu-result {
    clip-path: inset(0 0 0 0);
    transition: opacity .4s cubic-bezier(.23, 1, .32, 1), transform .5s cubic-bezier(.23, 1, .32, 1), clip-path .55s cubic-bezier(.23, 1, .32, 1);
}
.ai-kmu-page #kmu-flow.kmu-play .kmu-check {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .4s cubic-bezier(.23, 1, .32, 1);
}

.ai-kmu-page #kmu-flow.kmu-play [data-step="1"] { transition-delay: 0s; }
.ai-kmu-page #kmu-flow.kmu-play [data-step="2"] { transition-delay: .09s; }
.ai-kmu-page #kmu-flow.kmu-play [data-step="3"] { transition-delay: .18s; }
.ai-kmu-page #kmu-flow.kmu-play [data-step="4"] { transition-delay: .5s; }
.ai-kmu-page #kmu-flow.kmu-play [data-step="5"] { transition-delay: .8s; }
.ai-kmu-page #kmu-flow.kmu-play [data-step="6"] { transition-delay: 1.2s; }
.ai-kmu-page #kmu-flow.kmu-play [data-step="7"] { transition-delay: 1.45s; }
.ai-kmu-page #kmu-flow.kmu-play [data-step="8"] { transition-delay: 1.85s; }
.ai-kmu-page #kmu-flow.kmu-play [data-step="9"] { transition-delay: 2.05s; }
.ai-kmu-page #kmu-flow.kmu-play circle.kmu-check { transition-delay: 2.35s; }
.ai-kmu-page #kmu-flow.kmu-play .kmu-check-tick  { transition-delay: 2.65s; }

/* Einmaliger, dezenter Impuls am Agenten */
.ai-kmu-page #kmu-flow.kmu-play .kmu-agent-box {
    animation: kmu-impulse .9s cubic-bezier(.23, 1, .32, 1) 1.35s 1;
}
@keyframes kmu-impulse {
    0%, 100% { stroke: rgba(143, 158, 255, .75); stroke-width: 1.3; }
    45%      { stroke: #c3ccff; stroke-width: 2.2; }
}

/* Roboterkopf: Augen leuchten einmal auf, Antenne sendet einen Impuls.
   Der Ping-Ring ist grundsätzlich unsichtbar (reines Bewegungsartefakt). */
.ai-kmu-page #kmu-flow .kmu-robot-ping {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.ai-kmu-page #kmu-flow.kmu-play .kmu-robot-eye {
    animation: kmu-eyes .7s cubic-bezier(.23, 1, .32, 1) 1.5s 1;
}
@keyframes kmu-eyes {
    0%, 100% { fill: #8f9eff; }
    45%      { fill: #ffffff; }
}
.ai-kmu-page #kmu-flow.kmu-play .kmu-robot-ping {
    animation: kmu-ping .8s cubic-bezier(.23, 1, .32, 1) 1.75s 1;
}
@keyframes kmu-ping {
    0%   { opacity: .85; transform: scale(.4); }
    100% { opacity: 0;   transform: scale(1.9); }
}

/* ═══════════════════════════════════════════════════════════════
   2. EINE LIZENZ IST NOCH KEINE LÖSUNG
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.ai-kmu-page .kmu-problem-item {
    background-color: #f6f7fc;
    border: 1px solid rgba(23, 24, 215, .08);
    padding: 1.6rem 1.5rem;
}
.ai-kmu-page .kmu-problem-item h3 {
    margin: 0 0 .6rem;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.4;
    color: #0d0e1a;
}
.ai-kmu-page .kmu-problem-item p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, .62);
}

.ai-kmu-page .kmu-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 2.5rem;
}
.ai-kmu-page .kmu-compare-col { padding: 2rem 2rem 1.75rem; }
.ai-kmu-page .kmu-compare-col h3 {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ai-kmu-page .kmu-compare-col ul { margin: 0; padding: 0; list-style: none; }
.ai-kmu-page .kmu-compare-col li {
    position: relative;
    padding: .35rem 0 .35rem 1.4rem;
    font-size: .9rem;
    line-height: 1.6;
}
.ai-kmu-page .kmu-compare-verdict {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.55;
}

/* Isolierte Nutzung: weiße Karte, neutral */
.ai-kmu-page .kmu-compare-iso {
    background-color: #ffffff;
    border: 1px solid #dfe1ec;
}
.ai-kmu-page .kmu-compare-iso h3 { color: rgba(0, 0, 0, .6); }
.ai-kmu-page .kmu-compare-iso li { color: rgba(0, 0, 0, .62); }
.ai-kmu-page .kmu-compare-iso li::before {
    content: "–";
    position: absolute;
    left: 0;
    top: .35rem;
    font-weight: 700;
    color: rgba(0, 0, 0, .38);
}
.ai-kmu-page .kmu-compare-iso .kmu-compare-verdict {
    border-top: 1px solid #e7e8f0;
    color: rgba(0, 0, 0, .55);
}

/* ACTICON: dunkle Karte mit blauem Akzent */
.ai-kmu-page .kmu-compare-acticon {
    background-color: #02071a;
    border: 1px solid rgba(143, 158, 255, .35);
}
.ai-kmu-page .kmu-compare-acticon h3 { color: #ffffff; }
.ai-kmu-page .kmu-compare-acticon li { color: rgba(255, 255, 255, .8); }
.ai-kmu-page .kmu-compare-acticon li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: .4rem;
    height: .4rem;
    background-color: #8f9eff;
}
.ai-kmu-page .kmu-compare-acticon .kmu-compare-verdict {
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: #8f9eff;
}

.ai-kmu-page .kmu-statement {
    margin: 3.25rem 0 0;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    color: #0d0e1a;
}
.ai-kmu-page .kmu-statement-sub {
    max-width: 44rem;
    margin: .9rem auto 0;
    font-size: .95rem;
    line-height: 1.65;
    text-align: center;
    color: rgba(0, 0, 0, .55);
}

/* ═══════════════════════════════════════════════════════════════
   3. BRANCHEN & EINSATZFÄLLE (Grid-Module)
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-branche-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.ai-kmu-page .kmu-branche {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e2e4ee;
    border-left: 3px solid rgb(23, 24, 215);
    padding: 1.75rem 1.75rem 1.6rem;
}
.ai-kmu-page .kmu-branche-head { margin-bottom: .85rem; }
.ai-kmu-page .kmu-branche-body { flex: 1; }
.ai-kmu-page .kmu-branche-kat {
    display: inline-block;
    margin-bottom: .55rem;
    padding: .25rem .55rem;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(23, 24, 215);
    background-color: rgba(23, 24, 215, .07);
}
.ai-kmu-page .kmu-branche-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    color: #0d0e1a;
}
.ai-kmu-page .kmu-branche-case {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, .65);
}
.ai-kmu-page .kmu-branche-footer {
    margin-top: 1.2rem;
    padding-top: 1.05rem;
    border-top: 1px solid #e7e8f0;
}
.ai-kmu-page .kmu-branche-footer-label {
    display: block;
    margin-bottom: .55rem;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .5);
}
.ai-kmu-page .kmu-branche-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ai-kmu-page .kmu-branche-tags li {
    padding: .35rem .65rem;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    color: #22232e;
    background-color: #f4f5fa;
    border: 1px solid #e2e4ee;
}
.ai-kmu-page .kmu-branche-hint {
    margin: .9rem 0 0;
    padding: .1rem 0 .1rem .85rem;
    border-left: 2px solid rgba(23, 24, 215, .4);
    font-size: .8rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, .55);
}
.ai-kmu-page .kmu-matrix-note {
    max-width: 52rem;
    margin: 2rem 0 0;
    font-size: .875rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, .55);
}

/* ═══════════════════════════════════════════════════════════════
   4. EIN AGENT IN DER PRAXIS (dunkle Sektion)
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-dark-lead {
    max-width: 46rem;
    margin: 1.25rem 0 3rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

/* Schritt-Listen (dunkel) */
.ai-kmu-page .kmu-steps { display: grid; gap: 1.7rem; }
.ai-kmu-page .kmu-step { display: flex; gap: 1.25rem; }
.ai-kmu-page .kmu-step-num {
    flex-shrink: 0;
    width: 3rem;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}
.ai-kmu-page .kmu-step-body h3 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
}
.ai-kmu-page .kmu-step-body p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}
.ai-kmu-page .kmu-steps-dark .kmu-step-num  { color: #8f9eff; }
.ai-kmu-page .kmu-steps-dark .kmu-step-body h3 { color: #ffffff; }
.ai-kmu-page .kmu-steps-dark .kmu-step-body p  { color: rgba(255, 255, 255, .65); }

.ai-kmu-page .kmu-steps-claude {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
}

.ai-kmu-page .kmu-claude-note {
    max-width: 46rem;
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .65);
}

/* ═══════════════════════════════════════════════════════════════
   5. ACTICON-JOURNEY (mit Faden)
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-journey {
    position: relative;
    max-width: 46rem;
    padding-left: 3.25rem;
    display: grid;
    gap: 2.75rem;
}

/* Faden: Spur + Füllung (Füllung wird per Scroll skaliert) */
.ai-kmu-page .kmu-journey-line {
    position: absolute;
    left: .65rem;
    top: .55rem;
    bottom: .55rem;
    width: 2px;
    background-color: rgba(23, 24, 215, .14);
}
.ai-kmu-page .kmu-journey-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(23, 24, 215);
    transform-origin: top center;
    transform: scaleY(1);            /* ohne JS: vollständig gezeichnet */
}
.ai-kmu-page .kmu-thread-live .kmu-journey-fill { transform: scaleY(0); }

/* Knoten je Phase */
.ai-kmu-page .kmu-phase { position: relative; }
.ai-kmu-page .kmu-phase::before {
    content: "";
    position: absolute;
    left: calc(-3.25rem + .65rem + 1px - .425rem);
    top: .3rem;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    background-color: rgb(23, 24, 215); /* ohne JS: aktiv */
    border: 2px solid rgb(23, 24, 215);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), background-color .3s ease, border-color .3s ease;
}
.ai-kmu-page .kmu-thread-live .kmu-phase::before {
    background-color: #ffffff;
    border-color: #c9cde4;
}
.ai-kmu-page .kmu-thread-live .kmu-phase.kmu-on::before {
    background-color: rgb(23, 24, 215);
    border-color: rgb(23, 24, 215);
    transform: scale(1.15);
}

.ai-kmu-page .kmu-phase-head {
    display: flex;
    align-items: baseline;
    gap: .8rem;
}
.ai-kmu-page .kmu-phase-num {
    font-size: 1.05rem;
    font-weight: 900;
    color: rgb(23, 24, 215);          /* ohne JS: aktiv */
    transition: color .3s ease;
}
.ai-kmu-page .kmu-thread-live .kmu-phase .kmu-phase-num { color: #9aa0bd; }
.ai-kmu-page .kmu-thread-live .kmu-phase.kmu-on .kmu-phase-num { color: rgb(23, 24, 215); }

.ai-kmu-page .kmu-phase-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.4;
    color: #0d0e1a;
}
.ai-kmu-page .kmu-phase-text {
    margin: .6rem 0 .8rem;
    font-size: .95rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, .62);
}
.ai-kmu-page .kmu-phase-points {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ai-kmu-page .kmu-phase-points li {
    padding: .32rem .6rem;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    color: #22232e;
    background-color: #f4f5fa;
    border: 1px solid #e2e4ee;
}

/* Mittlerer CTA-Block */
.ai-kmu-page .kmu-midcta {
    margin-top: 3.5rem;
    padding: 2.5rem 2rem;
    background-color: #f6f7fc;
    border: 1px solid rgba(23, 24, 215, .08);
    text-align: center;
}
.ai-kmu-page .kmu-midcta p {
    margin: 0 0 1.4rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    color: #0d0e1a;
}

/* ═══════════════════════════════════════════════════════════════
   6. WERKZEUG & AUSFÜHRUNG (Plattformen + Automatisierung)
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.ai-kmu-page .kmu-tool {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e2e4ee;
    border-top: 3px solid rgb(23, 24, 215);
    padding: 1.9rem 1.75rem 1.6rem;
}
.ai-kmu-page .kmu-tool h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0d0e1a;
}
.ai-kmu-page .kmu-tool-claim {
    margin: 0 0 1rem;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.5;
    color: rgb(23, 24, 215);
}
.ai-kmu-page .kmu-tool ul { margin: 0; padding: 0; list-style: none; flex: 1; }
.ai-kmu-page .kmu-tool li {
    position: relative;
    padding: .28rem 0 .28rem 1.15rem;
    font-size: .85rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, .62);
}
.ai-kmu-page .kmu-tool li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .74em;
    width: .35rem;
    height: .35rem;
    background-color: rgb(23, 24, 215);
}
.ai-kmu-page .kmu-tool-einsatz {
    margin: 1.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid #e7e8f0;
    font-size: .8rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, .55);
}

.ai-kmu-page .kmu-duo-statement {
    max-width: 46rem;
    margin: 2.75rem 0 0;
    padding: .35rem 0 .35rem 1.25rem;
    border-left: 3px solid rgb(23, 24, 215);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.5;
    color: #0d0e1a;
}
/* Übergabe-Kette: KI-Agent → Automatisierung → Mitarbeiter */
.ai-kmu-page .kmu-handover {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}
.ai-kmu-page .kmu-handover li {
    position: relative;
    padding: 1.4rem 1.5rem 1.3rem;
    background-color: #ffffff;
    border: 1px solid #e2e4ee;
}
.ai-kmu-page .kmu-handover li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -1.7rem;
    top: 50%;
    width: .6rem;
    height: .6rem;
    border-top: 2px solid rgb(23, 24, 215);
    border-right: 2px solid rgb(23, 24, 215);
    transform: translateY(-50%) rotate(45deg);
}
.ai-kmu-page .kmu-handover-role {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .22rem .55rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ai-kmu-page .kmu-handover li strong {
    display: block;
    margin-bottom: .35rem;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.4;
    color: #0d0e1a;
}
.ai-kmu-page .kmu-handover li p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.65;
    color: rgba(0, 0, 0, .62);
}

/* Rollenfarben: KI blau, Automatisierung dunkel, Mitarbeiter Freigabe-Grün */
.ai-kmu-page .kmu-handover-ki { border-top: 3px solid rgb(23, 24, 215); }
.ai-kmu-page .kmu-handover-ki .kmu-handover-role {
    color: rgb(23, 24, 215);
    background-color: rgba(23, 24, 215, .08);
}
.ai-kmu-page .kmu-handover-auto { border-top: 3px solid #0d0e1a; }
.ai-kmu-page .kmu-handover-auto .kmu-handover-role {
    color: #0d0e1a;
    background-color: rgba(13, 14, 26, .07);
}
.ai-kmu-page .kmu-handover-mensch { border-top: 3px solid #3dbb6e; }
.ai-kmu-page .kmu-handover-mensch .kmu-handover-role {
    color: #1c6b3c;
    background-color: rgba(74, 222, 128, .16);
}

.ai-kmu-page .kmu-handover-example {
    max-width: 52rem;
    margin: 1.75rem 0 0;
    font-size: .9rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, .62);
}
.ai-kmu-page .kmu-handover-example strong { color: #0d0e1a; font-weight: 800; }

.ai-kmu-page .kmu-duo-links {
    margin: 1.5rem 0 0;
    font-size: .9rem;
    color: rgba(0, 0, 0, .62);
}

/* ═══════════════════════════════════════════════════════════════
   7. WARUM ACTICON (4 Gründe)
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.ai-kmu-page .kmu-why {
    background-color: #f6f7fc;
    border: 1px solid rgba(23, 24, 215, .08);
    padding: 1.7rem 1.6rem;
}
.ai-kmu-page .kmu-why h3 {
    margin: 0 0 .6rem;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.45;
    color: #0d0e1a;
}
.ai-kmu-page .kmu-why p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.68;
    color: rgba(0, 0, 0, .62);
}

/* ═══════════════════════════════════════════════════════════════
   8. FAQ + Verwandte Leistungen
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-faq-list {
    max-width: 52rem;
    margin-top: 2.25rem;
    border-top: 1px solid #dcdeeb;
}
.ai-kmu-page .kmu-faq-item { border-bottom: 1px solid #dcdeeb; }
.ai-kmu-page .kmu-faq-item summary {
    position: relative;
    padding: 1.15rem 2.75rem 1.15rem 0;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.5;
    color: #0d0e1a;
    cursor: pointer;
    list-style: none;
}
.ai-kmu-page .kmu-faq-item summary::-webkit-details-marker { display: none; }
.ai-kmu-page .kmu-faq-item summary::after {
    content: "";
    position: absolute;
    right: .6rem;
    top: 1.45rem;
    width: .55rem;
    height: .55rem;
    border-right: .15rem solid rgb(23, 24, 215);
    border-bottom: .15rem solid rgb(23, 24, 215);
    transform: rotate(45deg);
    transition: transform .25s cubic-bezier(.23, 1, .32, 1);
}
.ai-kmu-page .kmu-faq-item[open] summary::after {
    transform: rotate(-135deg);
    top: 1.65rem;
}
.ai-kmu-page .kmu-faq-answer {
    margin: 0;
    padding: 0 2.75rem 1.35rem 0;
    font-size: .875rem;
    line-height: 1.75;
    color: rgba(0, 0, 0, .62);
}

.ai-kmu-page .kmu-related { margin-top: 3.5rem; }
.ai-kmu-page .kmu-related-lead {
    margin: 0 0 .9rem;
    font-size: .9rem;
    font-weight: 700;
    color: #0d0e1a;
}
.ai-kmu-page .kmu-related-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
}
.ai-kmu-page .kmu-related-links li { font-size: .875rem; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   9. KONTAKT (auf .bg-foot / .bg-dark-trans)
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page .kmu-contact-lead {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}
.ai-kmu-page .kmu-contact-trust {
    max-width: 42rem;
    margin: 1.75rem auto 0;
    font-size: .85rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .68);
}
.ai-kmu-page .kmu-contact-trust strong {
    display: inline-block;
    margin-bottom: .2rem;
    font-size: .95rem;
    font-weight: 800;
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   FOKUS-ZUSTÄNDE
   ═══════════════════════════════════════════════════════════════ */
.ai-kmu-page a:focus-visible,
.ai-kmu-page summary:focus-visible {
    outline: 2px solid rgb(23, 24, 215);
    outline-offset: 3px;
}
.ai-kmu-page .kmu-sec-dark a:focus-visible,
.ai-kmu-page .kmu-compare-acticon a:focus-visible,
.ai-kmu-page .bg-dark-trans a:focus-visible {
    outline-color: #8f9eff;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION – alles sofort sichtbar, keine Bewegung
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ai-kmu-page .kmu-btn,
    .ai-kmu-page .kmu-faq-item summary::after {
        transition: none;
    }
    .ai-kmu-page .kmu-btn:active { transform: none; }

    /* Hero-Sequenz statisch */
    .ai-kmu-page #kmu-flow .kmu-fs,
    .ai-kmu-page #kmu-flow .kmu-fl,
    .ai-kmu-page #kmu-flow .kmu-check {
        opacity: 1 !important;
        transform: none !important;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        transition: none !important;
        animation: none !important;
    }
    .ai-kmu-page #kmu-flow .kmu-result { clip-path: none !important; }
    .ai-kmu-page #kmu-flow .kmu-agent-box { animation: none !important; }
    .ai-kmu-page #kmu-flow .kmu-robot-eye,
    .ai-kmu-page #kmu-flow .kmu-robot-ping { animation: none !important; }

    /* Faden vollständig statisch */
    .ai-kmu-page .kmu-journey-fill {
        transform: scaleY(1) !important;
        transition: none !important;
    }
    .ai-kmu-page .kmu-phase::before,
    .ai-kmu-page .kmu-phase-num { transition: none !important; }
    .ai-kmu-page .kmu-thread-live .kmu-phase::before {
        background-color: rgb(23, 24, 215) !important;
        border-color: rgb(23, 24, 215) !important;
        transform: none !important;
    }
    .ai-kmu-page .kmu-thread-live .kmu-phase .kmu-phase-num { color: rgb(23, 24, 215) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ≤ 960px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .ai-kmu-page .kmu-sec { padding: 4rem 0; }

    .ai-kmu-page .kmu-hero-inner { grid-template-columns: 1fr; }
    .ai-kmu-page .kmu-hero-text { padding: 2rem 1.75rem; }

    .ai-kmu-page .kmu-compare { grid-template-columns: 1fr; }
    .ai-kmu-page .kmu-branche-grid { grid-template-columns: 1fr; }
    .ai-kmu-page .kmu-steps-claude { grid-template-columns: 1fr; gap: 1.7rem; }
    .ai-kmu-page .kmu-tools-grid { grid-template-columns: 1fr; }

    /* Übergabe-Kette vertikal, Pfeile zeigen nach unten */
    .ai-kmu-page .kmu-handover { grid-template-columns: 1fr; gap: 2.25rem; }
    .ai-kmu-page .kmu-handover li:not(:last-child)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -1.55rem;
        transform: translateX(-50%) rotate(135deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ≤ 680px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .ai-kmu-page .kmu-sec { padding: 3.25rem 0; }

    .ai-kmu-page .kmu-hero-text { padding: 1.6rem 1.35rem; }
    .ai-kmu-page .kmu-hero-sub { font-size: 1rem; }
    .ai-kmu-page .kmu-flow-card { padding: 1.25rem 1.1rem 1rem; }

    .ai-kmu-page .kmu-cta-row { flex-direction: column; align-items: stretch; }
    .ai-kmu-page .kmu-btn { text-align: center; }

    .ai-kmu-page .kmu-problem-grid,
    .ai-kmu-page .kmu-why-grid { grid-template-columns: 1fr; }

    .ai-kmu-page .kmu-statement { font-size: 1.35rem; }

    .ai-kmu-page .kmu-compare-col { padding: 1.5rem 1.35rem 1.35rem; }

    .ai-kmu-page .kmu-branche { padding: 1.4rem 1.25rem 1.3rem; }

    .ai-kmu-page .kmu-step { gap: .9rem; }
    .ai-kmu-page .kmu-step-num { width: 2.1rem; font-size: 1.4rem; }

    /* Journey: vereinfachte Linie, engerer Gutter */
    .ai-kmu-page .kmu-journey { padding-left: 2.25rem; gap: 2.25rem; }
    .ai-kmu-page .kmu-journey-line { left: .45rem; }
    .ai-kmu-page .kmu-phase::before {
        left: calc(-2.25rem + .45rem + 1px - .375rem);
        width: .75rem;
        height: .75rem;
    }

    .ai-kmu-page .kmu-midcta { padding: 1.75rem 1.25rem; }
}