/* ═══════════════════════════════════════════════════════════════════
   KV-LIGHT (W50.1) — Light-System statt Standard-Glow
   Eine echte Schatten/Licht-Physik: 1 Key-Light + 1 Fill-Light + Boden-Schatten.
   Konsistent über alle Cards, Panels, Hero-Layer.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Light-Sources ── */
  /* Key-Light: oben-rechts, kalt-grün (primär) */
  --kv-light-key-color:    oklch(80% .24 145);
  --kv-light-key-angle:    135deg;       /* Schatten zeigt nach unten-links */
  --kv-light-key-strength: .35;

  /* Fill-Light: unten-links, warm-cyan (sekundär, schwächer) */
  --kv-light-fill-color:    oklch(75% .14 200);
  --kv-light-fill-angle:    315deg;
  --kv-light-fill-strength: .15;

  /* Ambient (Boden-Schatten + Hintergrund-Tönung) */
  --kv-light-ambient: oklch(5% .005 145);

  /* ── Schatten-Tokens (3-Layer-Shadow für echte Tiefe) ── */
  /* Boden-Schatten (direkt unter Element) */
  --kv-shadow-ground:    0 1px 2px oklch(5% .005 145 / .35);
  /* Mittel-Schatten (Lift) */
  --kv-shadow-lift:      0 4px 12px oklch(5% .005 145 / .25);
  /* Tiefer Schatten (Premium, Cards) */
  --kv-shadow-premium:   0 24px 60px oklch(5% .005 145 / .35),
                         0 1px 0 oklch(100% 0 0 / .04) inset;   /* Inner-Top-Highlight */
  /* Massive Schatten (Modals, Hero-Card) */
  --kv-shadow-massive:   0 48px 120px oklch(5% .005 145 / .55),
                         0 16px 36px oklch(5% .005 145 / .25),
                         0 1px 0 oklch(100% 0 0 / .06) inset;

  /* Hover-States (Card hebt ab) */
  --kv-shadow-lift-hover:    0 8px 24px oklch(5% .005 145 / .40);
  --kv-shadow-premium-hover: 0 40px 100px oklch(5% .005 145 / .55),
                             0 1px 0 oklch(100% 0 0 / .08) inset;

  /* ── Glow-Akzente (sparsam, NUR für CTAs + Hero-Headline) ── */
  --kv-glow-key:    0 0 0 1px oklch(80% .24 145 / .20),
                    0 8px 32px oklch(80% .24 145 / .25);
  --kv-glow-key-strong: 0 0 0 1px oklch(80% .24 145 / .35),
                        0 12px 48px oklch(80% .24 145 / .45);
  --kv-glow-cyan:   0 0 0 1px oklch(75% .14 200 / .20),
                    0 8px 32px oklch(75% .14 200 / .25);
}

/* ═══════════════════════════════════════════════════════════════════
   MATERIAL-LAYER — wendet das Light-System auf einen Container an
   ═══════════════════════════════════════════════════════════════════ */

.kv-material {
  position: relative;
  background: oklch(11% .008 160);
  border: 1px solid oklch(100% 0 0 / .08);
  border-radius: 14px;
  box-shadow: var(--kv-shadow-premium);
  overflow: hidden;
  isolation: isolate;
}
/* Inner-Top-Highlight (Glass-Effekt) */
.kv-material::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(100% 0 0 / .035) 0%,
    transparent 25%
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
/* Subtle Noise (Materialität) */
.kv-material::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
/* Content über die Layer */
.kv-material > * { position: relative; z-index: 2; }

/* Material-Tiefen-Varianten */
.kv-material--lift     { box-shadow: var(--kv-shadow-lift); }
.kv-material--premium  { box-shadow: var(--kv-shadow-premium); }
.kv-material--massive  { box-shadow: var(--kv-shadow-massive); }

/* ═══════════════════════════════════════════════════════════════════
   GLASS-PANEL — translucent, frosted
   ═══════════════════════════════════════════════════════════════════ */

.kv-glass-panel {
  background: oklch(11% .008 160 / .55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid oklch(100% 0 0 / .10);
  border-radius: 14px;
  box-shadow: var(--kv-shadow-premium);
  position: relative;
  isolation: isolate;
}
.kv-glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(100% 0 0 / .06) 0%,
    transparent 35%
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.kv-glass-panel > * { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════════
   AGENT-PULSE — Wiedererkennungs-Marker (DNA)
   Pulsierender grüner Punkt mit Mikro-Aura. Überall wo ein KI-Agent
   aktiv ist, ZEIGT er sich hier. Wie der Heartbeat des Systems.
   ═══════════════════════════════════════════════════════════════════ */

.kv-agent-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kv-light-key-color);
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}
.kv-agent-pulse::before,
.kv-agent-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--kv-light-key-color);
  opacity: 0;
  animation: kvAgentPulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.kv-agent-pulse::after {
  animation-delay: 1.2s;
}
@keyframes kvAgentPulse {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(4.5); opacity: 0; }
}
/* Vergrößerte Variante (Hero, Visual-Markers) */
.kv-agent-pulse--lg { width: 10px; height: 10px; }
.kv-agent-pulse--lg::before,
.kv-agent-pulse--lg::after { animation-duration: 3s; }

/* ═══════════════════════════════════════════════════════════════════
   prefers-reduced-motion override
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .kv-agent-pulse::before,
  .kv-agent-pulse::after { animation: none; opacity: .4; transform: scale(1.5); }
}