/* ============================================================================
   PLATFORM 2026 — Glassmorphism-Redesign der #platform-Sektion (Startseite)
   Lädt NACH light-2026.css und übersteuert dessen Weiss-Karten-Regeln gezielt.
   Fix enthalten: light-2026.css `.stage--ink span { color: inherit }` kippte
   das Icon-Weiss von .smc-node__icon → dunkles Icon auf dunkelrotem Tile.
   ============================================================================ */

/* ── 3D-Raumwirkung im Hintergrund ──────────────────────────────────────── */
#platform { position: relative; overflow: hidden; isolation: isolate; }

/* Farb-Orbs (geben dem Glas etwas zum Verwischen) */
#platform::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(560px 420px at 12% 18%, rgba(220, 0, 24, 0.10), transparent 65%),
    radial-gradient(640px 480px at 88% 30%, rgba(255, 68, 88, 0.08), transparent 65%),
    radial-gradient(700px 520px at 50% 110%, rgba(29, 29, 31, 0.06), transparent 60%);
}

/* Perspektivischer Gitter-Boden */
#platform::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -6%; height: 62%;
  z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(220, 0, 24, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 0, 24, 0.10) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(820px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent 82%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent 82%);
  animation: pf-grid-drift 16s linear infinite;
}
@keyframes pf-grid-drift { to { background-position: 0 56px, 0 0; } }

/* Das alte flache Grid der Sektion ausblenden */
#platform .smc__grid-bg { display: none; }

/* ── Nodes: Glas-Karten ─────────────────────────────────────────────────── */
#platform .smc-node {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow:
    0 22px 55px rgba(15, 16, 25, 0.10),
    0 2px 6px rgba(15, 16, 25, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  border-radius: 22px !important;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease, border-color 0.5s ease;
}

/* Shining-Sweep über die ganze Karte — als ::before (das ::after gehört den
   →-Flusspfeilen aus sm-concept.css); kein overflow:hidden nötig, weil der
   Sweep über background-position innerhalb der Karte animiert wird. */
#platform .smc-node::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  background-size: 260% 100%; background-position: 190% 0;
  opacity: 0; pointer-events: none; z-index: 2;
}
#platform a.smc-node:hover::before { opacity: 1; animation: pf-sheen 0.95s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pf-sheen { to { background-position: -90% 0; } }

#platform a.smc-node:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(220, 0, 24, 0.35) !important;
  box-shadow:
    0 34px 80px rgba(15, 16, 25, 0.16),
    0 12px 32px rgba(220, 0, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* ── Icon-Tile: FIX dunkel-auf-dunkelrot + Glas-Gloss ───────────────────── */
#platform .smc-node__icon,
#platform .smc-node__icon i[data-lucide],
#platform .smc-node__icon svg {
  color: #fff !important;
  stroke: currentColor;
}
#platform .smc-node__icon {
  width: 48px; height: 48px; border-radius: 15px;
  background: linear-gradient(150deg, #ff2c40, #dc0018 55%, #96000f) !important;
  box-shadow:
    0 12px 28px rgba(220, 0, 24, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 10px rgba(0, 0, 0, 0.25) !important;
}
#platform .smc-node__icon svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }

/* ── Text-Feinschliff auf Glas ──────────────────────────────────────────── */
#platform .smc-node__step  { color: rgba(29, 29, 31, 0.62) !important; }
#platform .smc-node__title { color: #1d1d1f !important; }
#platform .smc-node__desc  { color: rgba(29, 29, 31, 0.62) !important; }

/* Metric als Glas-Pill */
#platform .smc-node__metric {
  color: var(--le-red, #dc0018) !important;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(220, 0, 24, 0.16);
  border-radius: 999px; padding: 5px 11px;
  align-self: flex-start;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Fluss-Pfeile kräftiger */
#platform .smc-flow__track .smc-node:not(:last-child)::after { color: rgba(220, 0, 24, 0.55) !important; }

/* KI-Core-Band ebenfalls als Glas */
#platform .smc-flow__core {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.40)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 18px 45px rgba(15, 16, 25, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border-radius: 18px !important;
}

/* ============================================================================
   HERO-BADGES — kompakte Glas-Chips (Fix: mobile wirkten die zwei Stat-Karten
   als riesige, halbleere Blöcke mit zentriertem Label)
   ============================================================================ */
.hero-stage__stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.hero-stat--qual {
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.55)) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 12px 30px rgba(15, 16, 25, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  overflow: visible !important;
  text-align: left !important;
}
/* Icon links, Text rechts */
.hero-stat__qual-row {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
}
.hero-stat__qual-icon {
  width: 38px !important; height: 38px !important;
  border-radius: 12px !important;
  display: grid !important; place-items: center !important;
  background: linear-gradient(150deg, #ff2c40, #dc0018 55%, #96000f) !important;
  color: #fff !important; flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(220, 0, 24, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.45),
              inset 0 -3px 8px rgba(0, 0, 0, 0.22) !important;
}
.hero-stat__qual-icon i[data-lucide],
.hero-stat__qual-icon svg { color: #fff !important; stroke: currentColor; width: 19px; height: 19px; }
.hero-stat__qual-value {
  font-size: clamp(15px, 1.6vw, 21px) !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
}
.hero-stat__label {
  margin-top: 4px !important;
  padding-left: 50px;               /* fluchtet mit dem Text neben dem Icon */
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  text-align: left !important;
}
.hero-stat__bar { margin-top: 12px !important; margin-left: 50px; }

@media (max-width: 640px) {
  .hero-stage__stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .hero-stat--qual { padding: 12px 12px !important; }
  .hero-stat__qual-row { gap: 10px !important; }
  .hero-stat__qual-icon { width: 34px !important; height: 34px !important; }
  .hero-stat__qual-value { font-size: 13.5px !important; letter-spacing: -0.015em !important; }
  .hero-stat__label { padding-left: 44px; font-size: 8.5px !important; letter-spacing: 0.1em !important; }
  .hero-stat__bar { display: none !important; }
}
@media (max-width: 340px) {
  .hero-stage__stats { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   NETWORK — „Vom ersten Klick bis zum unterschriebenen Vertrag"
   Scroll-getriebene 3D-Inszenierung (Scroll-Video-Feeling):
   JS setzt --nwp (0→1 Sektions-Fortschritt) + .nw-inview beim Eintritt.
   ============================================================================ */
#network { position: relative; overflow: hidden; isolation: isolate; perspective: 1400px; }

/* Tiefen-Hintergrund: Orbs + perspektivischer Boden, driftet mit dem Scroll */
#network::before {
  content: ""; position: absolute; inset: -12% -6%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(620px 460px at 85% 12%, rgba(220, 0, 24, 0.09), transparent 65%),
    radial-gradient(560px 420px at 8% 75%, rgba(255, 68, 88, 0.07), transparent 65%);
  transform: translateY(calc((1 - var(--nwp, 1)) * 60px));
}
#network::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -8%; height: 58%;
  z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(220, 0, 24, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 0, 24, 0.09) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(860px) rotateX(63deg)
             translateY(calc((1 - var(--nwp, 1)) * -40px));
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.45), transparent 80%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.45), transparent 80%);
}

/* Die ganze Bühne kippt beim Hereinscrollen sanft aus der Tiefe auf */
#network .stage__inner {
  transform: perspective(1300px)
             rotateX(calc((0.55 - clamp(0, var(--nwp, 1), 0.55)) * 14deg))
             translateY(calc((0.55 - clamp(0, var(--nwp, 1), 0.55)) * 60px));
  transform-origin: 50% 18%;
  will-change: transform;
}

/* Karten: fliegen gestaffelt aus der Tiefe ein */
#network .phase-grid { transform-style: preserve-3d; }
#network .phase-card {
  --pi: 0;
  opacity: 0;
  transform: translate3d(0, 64px, -140px) rotateX(18deg) scale(0.94);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--pi) * 110ms),
              opacity 0.8s ease calc(var(--pi) * 110ms),
              box-shadow 0.45s ease, border-color 0.45s ease;
}
#network .phase-card:nth-child(1) { --pi: 0; }
#network .phase-card:nth-child(2) { --pi: 1; }
#network .phase-card:nth-child(3) { --pi: 2; }
#network .phase-card:nth-child(4) { --pi: 3; }
#network .phase-card:nth-child(5) { --pi: 4; }
#network .phase-card:nth-child(6) { --pi: 5; }
#network.nw-inview .phase-card { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) scale(1); }

/* Glas-Look + 3D-Hover passend zur Plattform-Sektion */
#network .phase-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.46)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.45);
  backdrop-filter: blur(16px) saturate(1.45);
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 20px 50px rgba(15, 16, 25, 0.09),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
#network.nw-inview .phase-card:hover {
  transform: translate3d(0, -8px, 24px) rotateX(2.5deg) scale(1.015);
  border-color: color-mix(in srgb, var(--phase-c, #dc0018) 45%, transparent) !important;
  box-shadow: 0 32px 75px rgba(15, 16, 25, 0.15),
              0 10px 30px color-mix(in srgb, var(--phase-c, #dc0018) 18%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* ============================================================================
   SCROLL-3D-LAYER (ganze Startseite) — Scroll-Video-Feeling
   Ein rAF-Treiber setzt --sp (0→1 Sichtbarkeits-Fortschritt) pro .scene-section
   und markiert Sektionen beim Eintritt mit .sc-in. html.sp-on = Treiber aktiv
   (alle Vorab-Versteck-Zustände hängen daran → ohne JS bleibt alles sichtbar).
   ============================================================================ */

/* Jede Bühne kippt sanft aus der Tiefe auf, während sie hereinscrollt
   (ausgenommen: Hero, Pipeline-Monitor mit eigenem Tilt, #network eigene Regel) */
.sp-on main .scene-section:not(#home):not(#pipeline):not(#network) .stage__inner {
  transform: rotateX(calc((0.5 - clamp(0, var(--sp, 1), 0.5)) * 9deg))
             translateY(calc((0.5 - clamp(0, var(--sp, 1), 0.5)) * 40px));
  transform-origin: 50% 12%;
  transition: transform 0s;
  will-change: transform;
}

/* Deko-Blobs schweben parallax (translate kollidiert nicht mit Inline-transform) */
.sp-on main .scene-section .stage__blob {
  translate: 0 calc((1 - var(--sp, 1)) * 60px);
}

/* ── Erfolgs-Kurve #growth-chart: Kamera-Fahrt auf die 3D-Balken ─────────── */
.sp-on #growth-chart .chart3d-stage {
  transform: rotateX(calc((0.55 - clamp(0, var(--sp, 1), 0.55)) * 10deg))
             translateY(calc((0.55 - clamp(0, var(--sp, 1), 0.55)) * 30px));
  transform-origin: 50% 100%;
  transition: transform 0s;
}
/* Headline-Counter als Glas-Chip mit Live-Puls */
#growth-chart .chart3d-headline {
  display: inline-block;
  padding: 18px 30px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.5));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 40px rgba(15, 16, 25, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
#growth-chart .chart3d-headline__label {
  display: inline-flex; align-items: center; gap: 7px;
}
#growth-chart .chart3d-headline__label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; animation: smt-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes smt-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── #funnel: leichte Kamera-Drehung beim Durchscrollen ──────────────────── */
.sp-on #funnel .funnel-premium {
  transform: rotateY(calc((0.5 - clamp(0, var(--sp, 1), 0.5)) * -8deg));
  transform-origin: 50% 50%;
  transition: transform 0s;
  will-change: transform;
}

/* ── SM-TECH-Teaser: Karten fliegen gestaffelt aus der Tiefe ein ─────────── */
.sp-on main .scene-section .smc-grid > * {
  opacity: 0;
  transform: translate3d(0, 54px, -100px) rotateX(14deg);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--gi, 0) * 100ms),
              opacity 0.7s ease calc(var(--gi, 0) * 100ms),
              box-shadow 0.4s ease, border-color 0.4s ease;
}
.sp-on main .scene-section .smc-grid > *:nth-child(2) { --gi: 1; }
.sp-on main .scene-section .smc-grid > *:nth-child(3) { --gi: 2; }
.sp-on main .scene-section .smc-grid > *:nth-child(4) { --gi: 3; }
.sp-on main .scene-section .smc-grid > *:nth-child(5) { --gi: 4; }
.sp-on main .scene-section .smc-grid > *:nth-child(6) { --gi: 5; }
.sp-on main .scene-section.sc-in .smc-grid > * { opacity: 1; transform: none; }

/* ── Finale #cta: Glas-Panel + Tiefenraum = Erfolg als Zielbild ──────────── */
#cta { position: relative; overflow: hidden; isolation: isolate; }
#cta::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(600px 440px at 22% 20%, rgba(220, 0, 24, 0.09), transparent 65%),
    radial-gradient(640px 480px at 80% 85%, rgba(255, 68, 88, 0.08), transparent 65%);
}
#cta::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -8%; height: 56%;
  z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(220, 0, 24, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 0, 24, 0.09) 1px, transparent 1px);
  background-size: 58px 58px;
  transform: perspective(840px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.45), transparent 80%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.45), transparent 80%);
}
#cta .stage__inner > .reveal-up {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.46));
  -webkit-backdrop-filter: blur(16px) saturate(1.45);
  backdrop-filter: blur(16px) saturate(1.45);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 28px;
  padding: clamp(30px, 5vw, 60px);
  box-shadow: 0 26px 65px rgba(15, 16, 25, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sp-on main .scene-section .stage__inner,
  .sp-on #growth-chart .chart3d-stage,
  .sp-on #funnel .funnel-premium,
  .sp-on main .scene-section .stage__blob { transform: none !important; translate: none !important; }
  .sp-on main .scene-section .smc-grid > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  #growth-chart .chart3d-headline__label::before { animation: none !important; }
  #platform::after { animation: none !important; }
  #platform .smc-node, #platform .smc-node::before { transition: none !important; animation: none !important; }
  #network::before, #network::after, #network .stage__inner { transform: none !important; }
  #network .phase-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}