/* ════════════════════════════════════════════════════════════════
   LEISTUNGEN · KI & AUTOMATION — Visual-Layer
   Hero-Node-Graph (lebendig), Workflow-Diagramm-Flow, Use-Case-Motive,
   Prozess-Phase-Visuals. Scoped auf .leistungen-ki.
   Theme-safe: Knoten fill var(--surface), Text var(--t1), Akzent ok beide Modi.
   ════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   01 · HERO — lebender Automations-Graph statt Stock-Foto
   ═══════════════════════════════════════════════════════ */
.leistungen-ki .ld-hero--manifesto { align-items: center; }
.leistungen-ki .lk-hero-graph {
    position: relative; width: 100%; max-width: 620px; margin-inline: auto;
    aspect-ratio: 600 / 500;
    background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 62%);
    border-radius: 16px;
}
.leistungen-ki .lk-hero-graph svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Verbindungslinien */
.leistungen-ki .lk-conn { fill: none; stroke: var(--tdeco); stroke-width: 1.5;
    stroke-dasharray: 5 6; opacity: 0.55; }
.leistungen-ki .lk-conn--main { stroke: color-mix(in srgb, var(--accent) 45%, var(--tdeco)); opacity: 0.7; }

/* Knoten-Boxen */
.leistungen-ki .lk-node-box { fill: var(--surface); stroke: var(--tdeco); stroke-width: 1.5; }
.leistungen-ki .lk-node-label { fill: var(--t1); font-family: var(--font-mono); font-size: 13px;
    font-weight: 500; text-anchor: middle; dominant-baseline: middle; letter-spacing: 0.02em; }
.leistungen-ki .lk-node-sub { fill: var(--t3); font-family: var(--font-mono); font-size: 9px;
    text-anchor: middle; letter-spacing: 0.06em; text-transform: uppercase; }

/* zentraler n8n-Core — Ringe via SMIL r-Animation (kein transform-origin-Bug) */
.leistungen-ki .lk-core-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.leistungen-ki .lk-core-disc { fill: var(--accent); }
.leistungen-ki .lk-core-label { fill: #fff; font-family: var(--font-mono); font-size: 15px; font-weight: 600;
    text-anchor: middle; dominant-baseline: middle; letter-spacing: 0.04em; }

/* Daten-Pakete (SMIL bewegt, CSS stylt) */
.leistungen-ki .lk-pkt { fill: var(--accent); }
.leistungen-ki .lk-pkt--gold { fill: var(--gold); }
.leistungen-ki .lk-pkt-glow { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 80%, transparent)); }

/* Ergebnis-Häkchen am Output */
.leistungen-ki .lk-done { stroke: #2d9f5c; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 20; stroke-dashoffset: 20; animation: lk-done 4s ease-in-out infinite; }
@keyframes lk-done { 0%,40% { stroke-dashoffset: 20; } 55%,92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 20; } }

/* Figcaption: Basis-Style (absolut + schwarzer Gradient) für den Graph zurücksetzen */
.leistungen-ki .lk-hero-graph figcaption.lk-hero-caption {
    position: static; background: none; padding: 0; margin-top: 0.9rem;
    text-align: center; font-family: var(--font-mono); font-size: 0.64rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); }

/* ═══════════════════════════════════════════════════════
   02 · WERKZEUGKASTEN — Kompakt-Chip-Strip (theme-safe via Tokens)
   ═══════════════════════════════════════════════════════ */
.leistungen-ki .ld-tools--compact .lk-tool-chips {
    list-style: none; padding: 0; margin: 1.6rem auto 0; max-width: 760px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.leistungen-ki .lk-tool-chips li {
    font-family: var(--font-mono); font-size: 0.78rem; color: var(--t2);
    border: 1px solid var(--tdeco); border-radius: 999px; padding: 0.4rem 0.95rem;
    background: var(--surface); transition: border-color 0.25s, color 0.25s; }
@media (hover: hover) {
    .leistungen-ki .lk-tool-chips li:hover { color: var(--accent); border-color: var(--accent); } }

/* ═══════════════════════════════════════════════════════
   03 · USE-CASE-COVER — animierte Motive statt leerer Verlauf
   ═══════════════════════════════════════════════════════ */
/* Eyebrow auf die Textseite (statt Num/Tag aufs Bild → kein Overlap) */
.leistungen-ki .ld-spread-eyebrow {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--t3); margin: 0 0 0.7rem;
    display: flex; align-items: center; gap: 0.55rem; }
.leistungen-ki .ld-spread-eyebrow b { color: var(--link); font-weight: 600; }
.leistungen-ki .ld-spread-cover { position: relative; overflow: hidden; }
.leistungen-ki .lk-motif { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
    opacity: 0.85; pointer-events: none; }
.leistungen-ki .ld-spread-num, .leistungen-ki .ld-spread-tag { position: relative; z-index: 2; }
/* Dark-Mode (dunkles Cover): helle Linien. Light-Mode-Override unten. */
.leistungen-ki .lk-motif-stroke { stroke: rgba(255,255,255,0.6); fill: none; stroke-width: 1.6; }
.leistungen-ki .lk-motif-fill { fill: rgba(255,255,255,0.55); }
.leistungen-ki .lk-lead-dot { fill: rgba(255,255,255,0.6); }
.leistungen-ki .lk-motif-accent { fill: var(--cover-accent, rgba(255,255,255,0.6)); }
/* Light-Mode: Cover wird hell (#fff→#ebebe8) → dunkle Linien, sonst unsichtbar */
html[data-theme-pref="light"] .leistungen-ki .lk-motif-stroke { stroke: rgba(29,29,29,0.42); }
html[data-theme-pref="light"] .leistungen-ki .lk-motif-fill { fill: rgba(29,29,29,0.4); }
html[data-theme-pref="light"] .leistungen-ki .lk-lead-dot { fill: rgba(29,29,29,0.45); }

/* Lead-Gen: Punkte wandern in den Trichter, ein Lead fällt raus */
.leistungen-ki .lk-lead-dot { animation: lk-lead 4s ease-in infinite; opacity: 0; }
.leistungen-ki .lk-lead-dot:nth-child(1) { animation-delay: 0s; }
.leistungen-ki .lk-lead-dot:nth-child(2) { animation-delay: 0.5s; }
.leistungen-ki .lk-lead-dot:nth-child(3) { animation-delay: 1s; }
.leistungen-ki .lk-lead-dot:nth-child(4) { animation-delay: 1.5s; }
@keyframes lk-lead { 0% { opacity: 0; transform: translate(0,0) scale(0.6); } 12% { opacity: 1; }
    60% { opacity: 1; transform: translate(var(--lk-dx,0), 28px) scale(1); } 100% { opacity: 0; transform: translate(0, 64px) scale(0.5); } }

/* Bild-Pipeline: Tiles laufen durch */
.leistungen-ki .lk-tile { animation: lk-tile 3.6s ease-in-out infinite; opacity: 0; }
.leistungen-ki .lk-tile:nth-child(1) { animation-delay: 0s; }
.leistungen-ki .lk-tile:nth-child(2) { animation-delay: 0.6s; }
.leistungen-ki .lk-tile:nth-child(3) { animation-delay: 1.2s; }
@keyframes lk-tile { 0% { opacity: 0; transform: translateX(-30px); } 20%,70% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(30px); } }

/* ZUGFeRD: QR baut sich auf */
.leistungen-ki .lk-qr rect { animation: lk-qr 3.4s steps(1) infinite; opacity: 0.2; }
.leistungen-ki .lk-qr rect:nth-child(3n) { animation-delay: 0.3s; }
.leistungen-ki .lk-qr rect:nth-child(3n+1) { animation-delay: 0.9s; }
.leistungen-ki .lk-qr rect:nth-child(3n+2) { animation-delay: 1.5s; }
@keyframes lk-qr { 0%,30% { opacity: 0.18; } 45%,90% { opacity: 0.85; } 100% { opacity: 0.18; } }

/* ═══════════════════════════════════════════════════════
   04 · PROZESS-PHASE-VISUALS (Timeline) — analog vis-fg-*
   ═══════════════════════════════════════════════════════ */
.leistungen-ki .ld-prozess-phase-visual { margin: 1.1rem 0 0; max-width: 100%; padding: 0.5rem;
    background: var(--surface, rgba(255,255,255,0.02)); border: 1px solid var(--tdeco, rgba(127,127,127,0.15)); border-radius: 6px; }
.leistungen-ki .ld-prozess-phase-visual .lk-visual { width: 100%; aspect-ratio: 16 / 9; max-width: none; }
.leistungen-ki .ld-prozess-phase-visual svg { width: 100%; height: 100%; display: block; }
.leistungen-ki .ld-prozess-phase-visual figcaption { margin-top: 0.5rem; font-family: var(--font-mono);
    font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); text-align: center; }
/* gemeinsame Bausteine, theme-safe */
.leistungen-ki .lk-v-box { fill: var(--surface); stroke: var(--tdeco); stroke-width: 1.4; }
.leistungen-ki .lk-v-line { stroke: var(--tdeco); stroke-width: 1.4; fill: none; }
.leistungen-ki .lk-v-text { fill: var(--t2); font-family: var(--font-mono); font-size: 8px; }
.leistungen-ki .lk-v-accent { fill: var(--accent); }
.leistungen-ki .lk-v-accent-s { stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.leistungen-ki .lk-v-ok { stroke: #2d9f5c; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* — 01 AUDIT: Lupe wandert über Prozess, Pain-Dot pulst — */
.vis-ki-audit .lk-lens { animation: lk-lens 6s ease-in-out infinite; }
@keyframes lk-lens { 0%,100% { transform: translate(0,0); } 50% { transform: translate(54px,10px); } }
.vis-ki-audit .lk-pain { transform-box: fill-box; transform-origin: center; animation: lk-pain 1.8s ease-in-out infinite; }
@keyframes lk-pain { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* — 02 STACK: Tool-Tiles, eins wird gewählt — */
.vis-ki-stack .lk-pick { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lk-pick 7s ease-in-out infinite; }
.vis-ki-stack .pk1 { animation-delay: 0.8s; } .vis-ki-stack .pk2 { animation-delay: 2.0s; } .vis-ki-stack .pk3 { animation-delay: 3.2s; }
@keyframes lk-pick { 0%,8% { opacity: 0; transform: scale(0.6); } 16% { opacity: 1; transform: scale(1.2); } 24%,90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* — 03 BUILD: Knoten verbinden sich, Test-Häkchen — */
.vis-ki-build .lk-wire { fill: none; stroke: var(--tdeco); stroke-width: 1.5;
    stroke-dasharray: 60; stroke-dashoffset: 60; animation: lk-wire 6s ease-in-out infinite; }
.vis-ki-build .w2 { animation-delay: 0.6s; } .vis-ki-build .w3 { animation-delay: 1.2s; }
@keyframes lk-wire { 0%,4% { stroke-dashoffset: 60; } 30%,90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 60; } }
.vis-ki-build .lk-check { stroke-dasharray: 16; stroke-dashoffset: 16; animation: lk-check 6s ease-in-out infinite; }
@keyframes lk-check { 0%,55% { stroke-dashoffset: 16; } 70%,92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 16; } }

/* — 04 ÜBERGABE: Doc raus + Key + LIVE-Badge — */
.vis-ki-handover .lk-doc { opacity: 0; animation: lk-doc 7s ease-in-out infinite; }
@keyframes lk-doc { 0%,6% { opacity: 0; transform: translateY(10px); } 18%,90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.vis-ki-handover .lk-live { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lk-live 7s ease-in-out infinite; }
@keyframes lk-live { 0%,58% { opacity: 0; transform: scale(0.6); } 68% { opacity: 1; transform: scale(1.18); } 78%,90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* ═══════════════════════════════════════════════════════
   Reduced Motion
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .leistungen-ki .lk-pkt, .leistungen-ki .lk-core-ring { display: none !important; }
    .leistungen-ki [class*="lk-"], .leistungen-ki [class*="vis-ki-"] * { animation: none !important; }
    .leistungen-ki .lk-done, .leistungen-ki .vis-ki-build .lk-wire,
    .leistungen-ki .vis-ki-build .lk-check { stroke-dashoffset: 0 !important; }
    .leistungen-ki .lk-pick, .leistungen-ki .lk-doc, .leistungen-ki .lk-live,
    .leistungen-ki .lk-tile, .leistungen-ki .lk-lead-dot { opacity: 1 !important; }
}