/* ============================================================
   Onterion FX — Award-Level-Effekte (sitewide) + Visuals D/E
   FX-Ausbau 2026-07-03. Alles transform/opacity/filter-basiert,
   prefers-reduced-motion deaktiviert sämtliche Bewegung.
   ============================================================ */

/* ================== Visual D: Operatives Cockpit ================== */
.viz-cockpit-wrap { max-width: 1040px; margin: 0 auto; }
.viz-cockpit {
  position: relative; overflow: hidden; padding: clamp(16px, 2.6vw, 26px);
  border-radius: var(--radius); border: 1px solid var(--glass-border);
  background:
    radial-gradient(640px 260px at 8% -10%, rgba(34, 211, 238, .1), transparent 62%),
    radial-gradient(640px 300px at 96% 110%, rgba(168, 85, 247, .12), transparent 62%),
    linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025) 60%);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 90px rgba(2, 6, 18, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
.vc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vc-dots { display: inline-flex; gap: 6px; }
.vc-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.vc-dots i:first-child { background: rgba(34, 211, 238, .55); }
.vc-title { font-size: .84rem; font-weight: 700; color: #C6D1E8; letter-spacing: .04em; }
.vc-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; color: #67E8F9;
  background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .32);
  padding: 4px 12px; border-radius: 999px;
}
.vc-pulse { width: 8px; height: 8px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 12px rgba(34, 211, 238, .9); animation: vcPulse 2.2s ease-in-out infinite; animation-play-state: paused; }
.viz-cockpit.play .vc-pulse { animation-play-state: running; }
@keyframes vcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.vc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vc-kpi { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border-soft); min-width: 0; }
.vc-kpi-label { display: block; font-size: .76rem; font-weight: 600; color: var(--mute-2); letter-spacing: .02em; }
.vc-val { display: flex; align-items: baseline; gap: 5px; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 800; color: #F4F7FE; letter-spacing: -.02em; line-height: 1.25; }
.vc-count { font-variant-numeric: tabular-nums; }
.vc-unit { font-size: .85rem; font-weight: 700; color: #67E8F9; }
.vc-delta { display: block; font-size: .73rem; font-weight: 600; color: var(--mute-2); margin-top: 2px; }
.vc-delta--up { color: #67E8F9; }

.vc-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.vc-chart { padding: 16px 16px 8px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-border-soft); min-width: 0; }
.vc-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vc-chart-head b { color: #E4EAF7; font-size: .92rem; }
.vc-chart-head span { color: var(--mute-2); font-size: .78rem; font-weight: 600; }
.vc-chart svg { display: block; width: 100%; height: auto; }
.vc-chart svg text { font-family: var(--font); fill: var(--mute-2); font-size: 11px; font-weight: 600; }
.vc-grid path { stroke: rgba(148, 163, 216, .13); stroke-width: 1; }
.vc-bars rect { fill: rgba(129, 140, 248, .22); transform-box: fill-box; transform-origin: bottom; }
.vc-linepath { fill: none; stroke: url(#vcLine); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .45)); }
.vc-area { fill: url(#vcArea); }
.vc-tip { fill: #22D3EE; filter: drop-shadow(0 0 8px rgba(34, 211, 238, .9)); }
.vc-tip-ring { fill: none; stroke: rgba(34, 211, 238, .55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: vcRing 2.4s ease-out infinite; animation-play-state: paused; }
.viz-cockpit.play .vc-tip-ring { animation-play-state: running; }
@keyframes vcRing { 0% { transform: scale(1); opacity: .9; } 75% { transform: scale(2.7); opacity: 0; } 100% { transform: scale(2.7); opacity: 0; } }

/* Chart-Aufbau beim Einscrollen (IO-Fallback; noscript-sicher via .js) */
@media (prefers-reduced-motion: no-preference) {
  .js .viz-cockpit-wrap.reveal .vc-bars rect { transform: scaleY(0); }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect { transform: none; transition: transform .9s var(--ease); }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(2) { transition-delay: .05s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(3) { transition-delay: .1s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(4) { transition-delay: .15s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(5) { transition-delay: .2s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(6) { transition-delay: .25s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(7) { transition-delay: .3s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(8) { transition-delay: .35s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(9) { transition-delay: .4s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(10) { transition-delay: .45s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(11) { transition-delay: .5s; }
  .js .viz-cockpit-wrap.reveal.in .vc-bars rect:nth-child(12) { transition-delay: .55s; }
  .js .viz-cockpit-wrap.reveal .vc-linepath { stroke-dasharray: 720; stroke-dashoffset: 720; }
  .js .viz-cockpit-wrap.reveal.in .vc-linepath { stroke-dashoffset: 0; transition: stroke-dashoffset 1.7s var(--ease) .45s; }
  .js .viz-cockpit-wrap.reveal .vc-area,
  .js .viz-cockpit-wrap.reveal .vc-tip,
  .js .viz-cockpit-wrap.reveal .vc-tip-ring { opacity: 0; }
  .js .viz-cockpit-wrap.reveal.in .vc-area { opacity: 1; transition: opacity .9s ease 1.5s; }
  .js .viz-cockpit-wrap.reveal.in .vc-tip { opacity: 1; transition: opacity .4s ease 2s; }
  .js .viz-cockpit-wrap.reveal.in .vc-tip-ring { opacity: 1; transition: opacity .4s ease 2s; }
  .js .viz-cockpit-wrap.reveal .vc-ev { opacity: 0; transform: translateX(16px); }
  .js .viz-cockpit-wrap.reveal.in .vc-ev { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .js .viz-cockpit-wrap.reveal.in .vc-ev:nth-child(1) { transition-delay: .8s; }
  .js .viz-cockpit-wrap.reveal.in .vc-ev:nth-child(2) { transition-delay: .95s; }
  .js .viz-cockpit-wrap.reveal.in .vc-ev:nth-child(3) { transition-delay: 1.1s; }
  .js .viz-cockpit-wrap.reveal.in .vc-ev:nth-child(4) { transition-delay: 1.25s; }
}

.vc-feed { display: flex; flex-direction: column; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-border-soft); min-width: 0; }
.vc-feed-title { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); }
.vc-feed ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.vc-ev { display: flex; align-items: flex-start; gap: 10px; }
.vc-ev-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 10px rgba(34, 211, 238, .7); animation: vcPulse 2.6s ease-in-out infinite; animation-play-state: paused; }
.viz-cockpit.play .vc-ev-dot { animation-play-state: running; }
.vc-ev-dot--warn { background: #FCD34D; box-shadow: 0 0 10px rgba(252, 211, 77, .6); }
.vc-ev b { display: block; color: #E4EAF7; font-size: .85rem; font-weight: 700; line-height: 1.35; }
.vc-ev small { color: var(--mute-2); font-size: .75rem; }
.vc-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.vc-chip { font-size: .71rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .13); color: #A9B6D2; background: rgba(255, 255, 255, .04); }
.vc-chip--ok { color: #67E8F9; border-color: rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .08); }

/* ================== Visual E: UI-Baukasten (Web-Apps) ================== */
.viz-appbuild-wrap { max-width: 980px; margin: 0 auto; }
.viz-appbuild {
  position: relative; overflow: hidden; padding: clamp(22px, 4.5vw, 48px);
  border-radius: var(--radius); border: 1px solid var(--glass-border-soft);
  background:
    radial-gradient(560px 260px at 10% 0%, rgba(34, 211, 238, .08), transparent 62%),
    radial-gradient(560px 280px at 92% 100%, rgba(168, 85, 247, .1), transparent 62%),
    linear-gradient(rgba(148, 163, 216, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 216, .055) 1px, transparent 1px),
    rgba(255, 255, 255, .015);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
}
.ab-window {
  position: relative; max-width: 720px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--glass-border); background: rgba(6, 10, 22, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 34px 90px rgba(2, 6, 18, .6), 0 0 44px rgba(34, 211, 238, .05);
}
.ab-topbar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .03); }
.ab-dots { display: inline-flex; gap: 6px; }
.ab-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.ab-dots i:first-child { background: rgba(34, 211, 238, .55); }
.ab-url { margin: 0 auto; font-size: .76rem; font-weight: 600; color: var(--mute-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-border-soft); border-radius: 999px; padding: 3px 16px; }
.ab-user { width: 22px; height: 22px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px rgba(34, 211, 238, .4); flex: none; }
.ab-body { display: flex; }
.ab-side { flex: none; width: clamp(84px, 17%, 128px); padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .02); }
.ab-nav { display: block; height: 11px; border-radius: 6px; background: rgba(255, 255, 255, .09); }
.ab-nav:nth-child(2) { width: 82%; } .ab-nav:nth-child(3) { width: 92%; }
.ab-nav:nth-child(4) { width: 70%; } .ab-nav:nth-child(5) { width: 86%; }
.ab-nav.on { background: linear-gradient(90deg, rgba(34, 211, 238, .55), rgba(129, 140, 248, .45)); box-shadow: 0 0 14px rgba(34, 211, 238, .3); }
.ab-content { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ab-toolbar { display: flex; gap: 10px; }
.ab-search { flex: 1; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-border-soft); }
.ab-cta { position: relative; flex: none; width: 92px; height: 30px; border-radius: 8px; background: var(--grad); }
.ab-cta::after { content: ""; position: absolute; inset: -5px; border-radius: 12px; box-shadow: 0 0 26px rgba(34, 211, 238, .55); opacity: .25; animation: abGlow 3s ease-in-out infinite; animation-play-state: paused; }
.viz-appbuild.play .ab-cta::after { animation-play-state: running; }
@keyframes abGlow { 0%, 100% { opacity: .15; } 50% { opacity: .6; } }
.ab-tiles { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 10px; }
.ab-tile { border-radius: 10px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); padding: 11px 12px; min-height: 56px; }
.ab-tile i { display: block; width: 52%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); margin-bottom: 9px; }
.ab-tile b { display: block; width: 64%; height: 13px; border-radius: 5px; background: linear-gradient(90deg, rgba(34, 211, 238, .45), rgba(129, 140, 248, .4)); }
.ab-tile--chart { display: flex; align-items: flex-end; gap: 5px; padding: 11px 14px; }
.ab-tile--chart s { flex: 1; text-decoration: none; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(34, 211, 238, .55), rgba(129, 140, 248, .18)); transform-origin: bottom; }
.ab-tile--chart s:nth-child(1) { height: 36%; } .ab-tile--chart s:nth-child(2) { height: 58%; }
.ab-tile--chart s:nth-child(3) { height: 44%; } .ab-tile--chart s:nth-child(4) { height: 76%; }
.ab-tile--chart s:nth-child(5) { height: 92%; }
.viz-appbuild.play .ab-tile--chart s { animation: abEq 2.6s ease-in-out infinite alternate; }
.viz-appbuild.play .ab-tile--chart s:nth-child(2) { animation-delay: .3s; }
.viz-appbuild.play .ab-tile--chart s:nth-child(3) { animation-delay: .6s; }
.viz-appbuild.play .ab-tile--chart s:nth-child(4) { animation-delay: .9s; }
.viz-appbuild.play .ab-tile--chart s:nth-child(5) { animation-delay: 1.2s; }
@keyframes abEq { from { transform: scaleY(.72); } to { transform: scaleY(1.06); } }
.ab-table { border: 1px solid var(--glass-border-soft); border-radius: 10px; overflow: hidden; }
.ab-row { position: relative; display: grid; grid-template-columns: 2fr 1.4fr 1fr 56px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .045); }
.ab-row--head { border-top: 0; background: rgba(255, 255, 255, .045); }
.ab-row i { display: block; height: 9px; border-radius: 4px; background: rgba(255, 255, 255, .09); }
.ab-row--head i { height: 7px; width: 72%; background: rgba(255, 255, 255, .14); }
.ab-badge { height: 14px !important; border-radius: 999px; background: rgba(252, 211, 77, .22) !important; border: 1px solid rgba(252, 211, 77, .38); }
.ab-badge.ok { background: rgba(34, 211, 238, .16) !important; border-color: rgba(34, 211, 238, .38); }
.ab-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .08), transparent); opacity: 0; pointer-events: none; }
.viz-appbuild.play .ab-row:nth-child(2)::after { animation: abRow 7.5s ease-in-out infinite; }
.viz-appbuild.play .ab-row:nth-child(3)::after { animation: abRow 7.5s ease-in-out infinite 2.5s; }
.viz-appbuild.play .ab-row:nth-child(4)::after { animation: abRow 7.5s ease-in-out infinite 5s; }
@keyframes abRow { 0%, 14% { opacity: 1; } 22%, 100% { opacity: 0; } }
.ab-cursor {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 3px rgba(34, 211, 238, .35), 0 0 16px rgba(34, 211, 238, .8);
  opacity: 0; z-index: 4; pointer-events: none;
}
.viz-appbuild.play .ab-cursor { animation: abCursor 9.5s cubic-bezier(.45, .05, .35, 1) infinite; }
@keyframes abCursor {
  0% { transform: translate(430px, 290px) scale(1); opacity: 0; }
  7% { opacity: 1; }
  16% { transform: translate(310px, 78px) scale(1); }
  26% { transform: translate(310px, 78px) scale(1); }
  38% { transform: translate(612px, 74px) scale(1); }
  42% { transform: translate(612px, 74px) scale(.72); }
  46% { transform: translate(612px, 74px) scale(1); }
  62% { transform: translate(420px, 246px) scale(1); opacity: 1; }
  74% { transform: translate(420px, 246px) scale(1); opacity: 1; }
  86% { transform: translate(470px, 320px) scale(1); opacity: 0; }
  100% { transform: translate(470px, 320px) scale(1); opacity: 0; }
}
.ab-tag {
  position: absolute; z-index: 3; font-size: .74rem; font-weight: 700; color: #A5F3FC;
  padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(34, 211, 238, .35);
  background: rgba(34, 211, 238, .09); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ab-tag--1 { left: 3.5%; top: 14%; transform: rotate(-4deg); }
.ab-tag--2 { right: 3%; top: 34%; transform: rotate(3deg); }
.ab-tag--3 { left: 5%; bottom: 13%; transform: rotate(2deg); }

/* Zusammenbau beim Einscrollen (IO; noscript-sicher via .js) */
@media (prefers-reduced-motion: no-preference) {
  .js .viz-appbuild-wrap.reveal .ab-part { opacity: 0; filter: blur(5px); }
  .js .viz-appbuild-wrap.reveal .ab-topbar { transform: translateY(-38px); }
  .js .viz-appbuild-wrap.reveal .ab-side { transform: translateX(-52px); }
  .js .viz-appbuild-wrap.reveal .ab-toolbar { transform: translateY(-26px) scale(.96); }
  .js .viz-appbuild-wrap.reveal .ab-tile:nth-child(1) { transform: translate(-34px, 28px) scale(.82) rotate(-3deg); }
  .js .viz-appbuild-wrap.reveal .ab-tile:nth-child(2) { transform: translateY(42px) scale(.82); }
  .js .viz-appbuild-wrap.reveal .ab-tile:nth-child(3) { transform: translate(36px, 26px) scale(.82) rotate(3deg); }
  .js .viz-appbuild-wrap.reveal .ab-table { transform: translateY(48px) scale(.96); }
  .js .viz-appbuild-wrap.reveal.in .ab-part { opacity: 1; filter: blur(0); transform: none; transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease); }
  .js .viz-appbuild-wrap.reveal.in .ab-topbar { transition-delay: .05s; }
  .js .viz-appbuild-wrap.reveal.in .ab-side { transition-delay: .18s; }
  .js .viz-appbuild-wrap.reveal.in .ab-toolbar { transition-delay: .34s; }
  .js .viz-appbuild-wrap.reveal.in .ab-tile:nth-child(1) { transition-delay: .48s; }
  .js .viz-appbuild-wrap.reveal.in .ab-tile:nth-child(2) { transition-delay: .58s; }
  .js .viz-appbuild-wrap.reveal.in .ab-tile:nth-child(3) { transition-delay: .68s; }
  .js .viz-appbuild-wrap.reveal.in .ab-table { transition-delay: .82s; }
  .js .viz-appbuild-wrap.reveal .ab-tag { opacity: 0; translate: 0 10px; }
  .js .viz-appbuild-wrap.reveal.in .ab-tag { opacity: 1; translate: 0 0; transition: opacity .6s var(--ease), translate .6s var(--ease); }
  .js .viz-appbuild-wrap.reveal.in .ab-tag--1 { transition-delay: 1.15s; }
  .js .viz-appbuild-wrap.reveal.in .ab-tag--2 { transition-delay: 1.3s; }
  .js .viz-appbuild-wrap.reveal.in .ab-tag--3 { transition-delay: 1.45s; }
}

/* ================== Masked Text-Reveals für Titel (IO-Fallback) ==================
   Nur für Titel INNERHALB eines .reveal-Containers: ein clip-path auf dem
   beobachteten Element selbst würde dessen IntersectionObserver-Fläche auf
   null klippen (Chrome) — .in käme nie an. Self-Reveal-Titel (h1/h2.reveal)
   bekommen den Wipe daher nur im sda-Scrub-Pfad (ohne IO-Abhängigkeit). */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal .section-title { clip-path: inset(-4% 103% -12% -3%); }
  .js .reveal.in .section-title {
    clip-path: inset(-4% -3% -12% -3%);
    transition: clip-path .95s var(--ease) .12s;
  }
}

/* ================== Scroll-getriebene Animationen (CSS Scroll-Driven,
   nur wenn unterstützt: html.sda via Feature-Detection; sonst greift
   der IntersectionObserver-Fallback aus main.js/style.css) ================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js.sda .reveal {
      opacity: 1; transform: none;
      animation: fxRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
    /* Karten: Scale + Blur beim Einscrollen (scrubbed) */
    .js.sda .fx-card.reveal, .js.sda .card.reveal, .js.sda .fx-trust-card.reveal,
    .js.sda .fx-stat.reveal, .js.sda .fx-case.reveal, .js.sda .fx-step.reveal {
      animation-name: fxRiseCard;
    }
    /* Titel: Masken-Wipe scrubbed statt IO-Transition */
    .js.sda .reveal .section-title, .js.sda .cta-band h2.reveal, .js.sda .fx-cta h2.reveal {
      animation: fxTitle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    /* Hero bleibt IO-basiert (above the fold — kein Scrub beim Laden) */
    .js.sda .fx-hero .reveal, .js.sda .page-hero .reveal {
      animation: none; opacity: 0; transform: translateY(30px);
    }
    .js.sda .fx-hero .reveal.in, .js.sda .page-hero .reveal.in {
      opacity: 1; transform: none;
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }
    .js.sda .fx-hero .reveal-d1.in, .js.sda .page-hero .reveal-d1.in { transition-delay: .08s; }
    .js.sda .fx-hero .reveal-d2.in, .js.sda .page-hero .reveal-d2.in { transition-delay: .16s; }
    .js.sda .fx-hero .reveal-d3.in, .js.sda .page-hero .reveal-d3.in { transition-delay: .24s; }
    .js.sda .fx-hero .reveal-d4.in, .js.sda .page-hero .reveal-d4.in { transition-delay: .32s; }
    /* Sticky-Story-Schritte steuert fx.js — kein Scrub */
    .js.sda .story-step { animation: none; }
  }
  @keyframes fxRise {
    from { opacity: 0; translate: 0 36px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes fxTitle {
    from { clip-path: inset(-4% 103% -12% -3%); opacity: 0; }
    to { clip-path: inset(-4% -3% -12% -3%); opacity: 1; }
  }
  @keyframes fxRiseCard {
    from { opacity: 0; translate: 0 46px; scale: .95; filter: blur(9px); }
    to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
  }
  /* Mobil: reduzierte Intensität (kein Blur, kürzerer Weg) */
  @media (max-width: 860px) {
    @keyframes fxRiseCard {
      from { opacity: 0; translate: 0 26px; scale: .98; filter: blur(0); }
      to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
    }
    @keyframes fxRise {
      from { opacity: 0; translate: 0 22px; }
      to { opacity: 1; translate: 0 0; }
    }
  }
}

/* ================== Sticky-Storytelling: Vorgehen (Startseite) ================== */
.story-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.story-rail { position: sticky; top: 118px; }
.story-rail .fx-head { margin-bottom: 26px; }
.story-meter { display: flex; align-items: center; gap: 16px; }
.story-num { font-size: 2.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.story-total { color: var(--mute-2); font-weight: 700; font-size: 1.05rem; }
.story-bar { flex: 1; max-width: 220px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.story-bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad); box-shadow: 0 0 12px rgba(34, 211, 238, .5); transform: scaleX(.25); transform-origin: left; transition: transform .5s var(--ease); }
.story-steps { display: grid; gap: 20px; counter-reset: fxstep; }
@media (min-width: 1021px) {
  .story-steps { gap: 24px; }
  .story-steps .story-step { min-height: clamp(200px, 30vh, 300px); display: flex; flex-direction: column; justify-content: center; padding: 34px 32px; }
  .story-steps .story-step h3 { font-size: 1.28rem; }
  .story-steps .story-step p { font-size: 1rem; max-width: 52ch; }
  .js .story-steps .story-step { opacity: .35; transform: scale(.97); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .5s, box-shadow .5s, background .5s; }
  .js .story-steps .story-step.on {
    opacity: 1; transform: none; border-color: rgba(34, 211, 238, .38);
    background: var(--glass-2);
    box-shadow: 0 0 54px rgba(34, 211, 238, .07), 0 26px 70px rgba(2, 6, 18, .5);
  }
}
@media (max-width: 1020px) {
  .story-grid { grid-template-columns: 1fr; gap: 8px; }
  .story-rail { position: static; }
  .story-meter { display: none; }
  .story-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .story-steps { grid-template-columns: 1fr; }
}

/* ================== Cursor-Glow (nur pointer:fine, Desktop) ================== */
.cursor-glow {
  position: fixed; left: -280px; top: -280px; width: 560px; height: 560px;
  border-radius: 50%; pointer-events: none; z-index: 3; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(34, 211, 238, .065), rgba(129, 140, 248, .035) 46%, transparent 72%);
  opacity: 0; transition: opacity .7s ease; will-change: transform;
}
.cursor-glow.on { opacity: 1; }

/* ================== Parallax-Hints ================== */
.fx-hero-wrap, .page-hero .container { will-change: transform; }
.page-hero::before { transform: translateY(var(--plx, 0)); }

/* ================== Responsive: Visuals ================== */
@media (max-width: 860px) {
  .vc-kpis { grid-template-columns: repeat(2, 1fr); }
  .vc-main { grid-template-columns: 1fr; }
  .ab-cursor { display: none; }
  .ab-tag { display: none; }
  .ab-body { min-height: 0; }
}
@media (max-width: 400px) {
  .vc-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vc-kpi { padding: 11px 12px; }
  .ab-side { width: 68px; padding: 12px 10px; }
  .ab-row { grid-template-columns: 1.6fr 1.2fr 1fr 40px; gap: 8px; padding: 9px 10px; }
}

/* ================== Header-Fix (QA 2026-07-03): backdrop-filter direkt auf
   .site-header machte den fixed Header zum Containing Block des fixed
   Mobile-Menüs (.nav-links) — dessen Items ragten auf gescrollten Seiten
   sichtbar ins Bild. Blur liegt jetzt auf ::before, der Header selbst
   bleibt filterfrei. ================== */
.site-header.scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(5, 8, 16, .72);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  transition: opacity .35s;
}
.site-header.scrolled::before { opacity: 1; }

/* ================== Formulare: Robustheit sitewide (360px-sicher) ================== */
input, select, textarea, button { max-width: 100%; }
select { text-overflow: ellipsis; }
.au-wrap select, .au-wrap .au-inp, .prose select { min-height: 48px; }

/* ================== Reduced Motion: alles aus ================== */
@media (prefers-reduced-motion: reduce) {
  .vc-pulse, .vc-ev-dot, .vc-tip-ring, .ab-cta::after, .ab-tile--chart s,
  .ab-row::after, .ab-cursor, .aurora { animation: none !important; }
  .ab-cursor { display: none; }
  .js .viz-cockpit-wrap .vc-bars rect { transform: none; transition: none; }
  .js .viz-cockpit-wrap .vc-linepath { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .js .viz-cockpit-wrap .vc-area, .js .viz-cockpit-wrap .vc-tip,
  .js .viz-cockpit-wrap .vc-tip-ring { opacity: 1; transition: none; }
  .js .viz-cockpit-wrap .vc-ev { opacity: 1; transform: none; transition: none; }
  .js .viz-appbuild-wrap .ab-part, .js .viz-appbuild-wrap .ab-tag { opacity: 1; transform: none; filter: none; translate: none; transition: none; }
  .ab-tag--1 { transform: rotate(-4deg); } .ab-tag--2 { transform: rotate(3deg); } .ab-tag--3 { transform: rotate(2deg); }
  .js .reveal .section-title, .js h1.reveal, .js h2.reveal { clip-path: none; transition: none; }
  .js .story-steps .story-step { opacity: 1; transform: none; transition: none; }
  .story-meter { display: none; }
  .cursor-glow { display: none; }
  .fx-hero-wrap, .page-hero .container { will-change: auto; }
}