/* Stannek, Unterseite „KI und Automation“. Nutzt die Bausteine aus drucksysteme.css (Hero, Kacheln, Schritte). */

.kx-hero-bg {
  background:
    radial-gradient(40% 50% at 78% 45%, rgba(46, 230, 176, 0.25), transparent 70%),
    radial-gradient(55% 60% at 70% 50%, rgba(39, 82, 236, 0.55), transparent 70%),
    linear-gradient(180deg, #0c1a44 0%, #07112e 100%);
}
.kx-hero h1 span { background: linear-gradient(90deg, #8ff5d6, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Netz-Grafik */
.kx-hub { margin: 0; width: 100%; max-width: 560px; justify-self: center; }
.kx-hub svg { width: 100%; height: auto; overflow: visible; }
.kx-ring { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-dasharray: 4 8; }
.js-motion .kx-ring { animation: kx-turn 60s linear infinite; transform-origin: 280px 240px; }
.js-motion .kx-ring-2 { animation-direction: reverse; animation-duration: 40s; }
@keyframes kx-turn { to { transform: rotate(360deg); } }
.kx-link { stroke: rgba(143, 245, 214, 0.45); stroke-width: 1.6; fill: none; }
.kx-pulses circle { fill: var(--accent); }
.kx-core circle { fill: var(--blue); stroke: var(--accent); stroke-width: 2; }
.kx-core text { fill: #fff; text-anchor: middle; font-family: var(--font-display); }
.kx-core-k { font-size: 22px; font-weight: 800; }
.kx-core-s { font-size: 12px; fill: #cfe0ff !important; }
.kx-node rect { fill: rgba(12, 26, 68, 0.85); stroke: rgba(255, 255, 255, 0.4); }
.kx-node text { fill: #fff; text-anchor: middle; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .kx-pulses { display: none; } }

/* Werkzeuge */
.kx-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) { .kx-tools { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kx-tools { grid-template-columns: repeat(3, 1fr); } .kx-tool.is-key { grid-row: span 2; } }
.kx-tool { display: grid; gap: 0.75rem; align-content: start; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 24px; border: 1px solid var(--line); background: var(--white); }
.kx-tool h3 { font-size: 1.6rem; }
.kx-tool > p { color: var(--muted); }
.kx-badge { justify-self: start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: 999px; background: #e6ecfe; color: var(--blue); }
.kx-points { list-style: none; margin: 0.2rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.45rem; }
.kx-points li { position: relative; padding-left: 1.4rem; font-size: 0.97rem; }
.kx-points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.kx-link-out { font-weight: 600; text-decoration: none; margin-top: 0.3rem; }
.kx-link-out:hover { text-decoration: underline; }
.kx-tool.is-key { background: linear-gradient(160deg, var(--blue), #1a3184); color: #fff; border-color: transparent; }
.kx-tool.is-key h3 { color: #fff; font-size: 2rem; }
.kx-tool.is-key > p, .kx-tool.is-key .kx-points li { color: #dbe3fd; }
.kx-tool.is-key .kx-points { border-top-color: rgba(255, 255, 255, 0.2); }
.kx-tool.is-key .kx-badge { background: var(--accent); color: var(--night); }
.kx-tool.is-key .kx-link-out { color: #fff; }

/* Sicherheit */
.kx-safe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 800px) { .kx-safe-list { grid-template-columns: repeat(4, 1fr); } }
.kx-safe-list li { display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.kx-safe-list b { font-family: var(--font-display); color: #fff; font-size: 1.15rem; }
.kx-safe-list span { color: var(--on-night-muted); }

/* Zusammenspiel-Grafik (überarbeitet) */
.kx-box rect { fill: rgba(12, 26, 68, 0.85); stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; }
.kx-box-main rect { fill: var(--blue); stroke: var(--accent); stroke-width: 2; }
.kx-box-kd rect { fill: #0e2a5c; stroke: var(--accent); stroke-width: 2; }
.kx-box-n8n rect { stroke: #ff9f6b; }
.kx-box-nyx rect { stroke: #b59cff; }
.kx-k { fill: #fff; text-anchor: middle; font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.kx-k-sm { font-size: 18px; }
.kx-s { fill: #cfe0ff; text-anchor: middle; font-family: var(--font-display); font-size: 12.5px; }
.kx-node text { font-size: 14px; }
.kx-link-soft { stroke: rgba(255, 255, 255, 0.35); stroke-dasharray: 3 5; }
.kx-link-n8n { stroke: rgba(255, 159, 107, 0.6); }
.kx-link-nyx { stroke: rgba(181, 156, 255, 0.6); stroke-dasharray: 6 6; }
.kx-pulses .kx-p-n8n { fill: #ff9f6b; }
.kx-pulses .kx-p-nyx { fill: #b59cff; }