/* ─────────────────────────────────────────────────────────────────────────
   Erfaro Grafik- & FX-System  ·  erfaro-fx.css
   ADDITIV zu erfaro.css + erfaro-motion.css. Kein Override bestehender Regeln.

   Jury-Kombi (seriös-premium):
     · FX3 (Daten-Viz) = Fundament: Renteneintritts-Ring + Babyboomer-Zeitleiste.
       Die Zahl IST der Beweis, nicht Deko. Endwert steht als Klartext im DOM.
     · FX2 (Line-Art) = didaktische Erklärstücke: Wissensstafette, Souveränitäts-
       Regler, Wissens-Graph. Erbt stroke-dashoffset-Draw vom Motion-System.
     · FX1 (Aurora/Grid) = NUR statische Backdrop-Textur: Punkt-Grid mit Radial-
       Maske ("Sicherheitsdruck") + Aurora 2-4% Deckkraft. KEIN Blur-Loop, KEIN
       backdrop-filter, KEIN will-change-Dauerlayer.

   Regel über alles: Petrol trägt. GENAU EIN Bernstein-Zielmarker pro Grafik.
   Jede Animation läuft EINMAL beim Eintreten und ruht dann (kein Loop).

   Robustheit (No-JS-First): CSS-Default IST der Endzustand (Ring voll, Zahl
   im DOM, Balken auf Ziel). Start-Offsets greifen NUR unter html.js-motion.
   Ohne JS / bei reduced-motion ist jede Grafik sofort vollständig sichtbar.
   Animiert wird ausschließlich transform / opacity / stroke-dashoffset
   -> CLS = 0, compositor-only, GPU-freundlich.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --fx-primary:#0f5468;
  --fx-primary-2:#1f6e80;
  --fx-petrol-100:#d9eef4;
  --fx-petrol-200:#b8dfeb;
  --fx-accent:#c6852a;      /* Bernstein: genau EIN Zielmarker pro Grafik */
  --fx-track:#e2e6ea;
  --fx-fg:#1a2a33;
  --fx-muted:#556570;
  --fx-ease-fill:cubic-bezier(.16,1,.3,1);
  --fx-ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ═══════════════════════════════════════════════════════════════════════
   FX1 · HERO-BACKDROP  ·  Punkt-Grid (Sicherheitsdruck) + statische Aurora
   Rein dekorativ, aria-hidden, z-index:-1, nie interaktiv. Kein Loop, kein
   Blur-Filter, kein backdrop-filter -> null GPU-Dauerlast.
   Markup:  <div class="fx-backdrop" aria-hidden="true">
              <span class="fx-grid"></span><span class="fx-aurora"></span>
            </div>   (als erstes Kind einer position:relative-Sektion)
   ═══════════════════════════════════════════════════════════════════════ */
.fx-host{position:relative;isolation:isolate}
.fx-host > .container{position:relative;z-index:1}

.fx-backdrop{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  overflow:hidden;border-radius:inherit;
}

/* Punkt-Grid mit weicher Radial-Ausblendung zu den Rändern ("geprägtes Papier") */
.fx-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(var(--fx-petrol-200) 1px,transparent 1.5px);
  background-size:24px 24px;
  opacity:.42;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 22%,#000 42%,transparent 80%);
          mask-image:radial-gradient(115% 85% at 50% 22%,#000 42%,transparent 80%);
}

/* Statische Aurora: EIN weicher Petrol-Radial, 2-4% Deckkraft, KEIN Blur-Filter,
   KEINE Animation. Nur ein CSS-Gradient -> billig, kein Compositor-Layer im Loop. */
.fx-aurora{
  position:absolute;inset:-20% -10% auto -10%;height:150%;
  background:
    radial-gradient(38% 46% at 22% 18%,rgba(31,110,128,.16),transparent 62%),
    radial-gradient(42% 50% at 84% 8%,rgba(15,84,104,.12),transparent 60%);
  opacity:.28;                 /* effektiv ~3-4% durch den weichen Radial-Falloff */
}

/* Optionale Bewegtbild-Ebene im Hero: dezenter Petrol-Loop HINTER dem Grid.
   Sehr niedrige Deckkraft + weiche Radial-Maske, damit Text ruhig lesbar bleibt.
   Wird per JS nur zugeschaltet (html.js-motion, kein reduced-motion, im Viewport).
   Default OHNE JS: unsichtbar -> kein Datentransfer erzwungen, kein Layout-Einfluss. */
.fx-video{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--fx-ease-out);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 26%,#000 30%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 26%,#000 30%,transparent 78%);
}
html.js-motion .fx-video.is-on{opacity:.12}
/* Auf schmalen Viewports Video zurücknehmen: Hero-Text steht dort direkt darüber. */
@media (max-width:720px){
  html.js-motion .fx-video.is-on{opacity:.07}
  .fx-video{-webkit-mask-image:radial-gradient(140% 80% at 50% 20%,#000 18%,transparent 70%);
                    mask-image:radial-gradient(140% 80% at 50% 20%,#000 18%,transparent 70%)}
}
@media (prefers-reduced-motion:reduce){.fx-video{display:none}}

/* Helle Variante fürs Petrol-Band (CTA auf dunklem Grund) */
.fx-backdrop--onpetrol .fx-grid{
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.5px);
  opacity:.16;
}
.fx-backdrop--onpetrol .fx-aurora{
  background:radial-gradient(50% 60% at 80% 10%,rgba(255,255,255,.10),transparent 62%);
  opacity:.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   FX3 · RENTENEINTRITTS-RING (Signature E1)
   Ein Ring, eine Zahl, ein Bernstein-Punkt am Ende. Liest sich wie ein Siegel.
   NO-JS-FIX (Jury): Default = ENDZUSTAND (dashoffset:0, Marker sichtbar, Zahl
   als Textknoten). Der LEERE Start-Offset greift NUR unter html.js-motion.
   ═══════════════════════════════════════════════════════════════════════ */
.rentenring{margin:0;max-width:300px;width:100%}
.rentenring__svg{display:block;width:100%;height:auto}   /* viewBox+auto => CLS 0 */

.rr-track{fill:none;stroke:var(--fx-petrol-100);stroke-width:14}
.rr-fill{
  fill:none;stroke:var(--fx-primary);stroke-width:14;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:120px 120px;
  /* Default = Endzustand: Ring gezeichnet. Kein leerer Start ohne JS. */
  stroke-dashoffset:0;
}
/* Bernstein-Endmarker: der EINE Akzent. Default sichtbar (No-JS). */
.rr-marker{fill:var(--fx-accent);opacity:1}
.rr-num{
  font:700 46px/1 Inter,system-ui,sans-serif;fill:var(--fx-fg);
  font-variant-numeric:tabular-nums;
}
.rr-unit{font:500 15px/1 Inter,system-ui,sans-serif;fill:var(--fx-muted)}
.rentenring__cap{
  margin:12px 0 0;font:500 12px/1.4 Inter,sans-serif;color:var(--fx-muted);text-align:center;
}
.rentenring__cap span{display:block;margin-top:2px;color:#4a5a64}  /* eigene Farbe statt opacity:.8 -> >=4.5:1 auf Weiß (WCAG AA) */

/* Enhancement: unter JS-Motion startet der Ring LEER und füllt sich bei .is-in.
   .rr-len wird pro Instanz per style="--rr-len:N" gesetzt (Umfang * Anteil). */
html.js-motion .rentenring .rr-fill{
  stroke-dashoffset:var(--rr-len,452);           /* leer: voller sichtbarer Bogen */
  transition:stroke-dashoffset 1200ms var(--fx-ease-fill);
}
html.js-motion .rentenring.is-in .rr-fill{stroke-dashoffset:0}
html.js-motion .rentenring .rr-marker{
  opacity:0;transition:opacity 300ms ease 1000ms;
}
html.js-motion .rentenring.is-in .rr-marker{opacity:1}

/* ═══════════════════════════════════════════════════════════════════════
   FX3 · BABYBOOMER-ZEITLEISTE (E2)
   Austritts-Säulen wachsen von 0 nach oben (scaleY), Peak-Jahr mit Bernstein-
   Kappe. Default = volle Höhe (No-JS). transform-origin unten -> kein Reflow.
   ═══════════════════════════════════════════════════════════════════════ */
.fx-timeline{margin:0;width:100%}
.fx-timeline__svg{display:block;width:100%;height:auto}
.tl-axis{stroke:var(--fx-track);stroke-width:1}
.tl-tick{font:500 11px/1 Inter,sans-serif;fill:var(--fx-muted)}
.tl-bar{fill:var(--fx-primary);transform-origin:bottom;transform:scaleY(1)}
.tl-bar--soft{fill:var(--fx-primary-2)}
.tl-cap{fill:var(--fx-accent)}          /* EIN Bernstein: Peak-Jahr-Kappe */
.fx-timeline__cap{
  margin:12px 0 0;font:500 12px/1.4 Inter,sans-serif;color:var(--fx-muted);text-align:center;
}

/* Enhancement: Säulen starten flach und wachsen gestaffelt bei .is-in.
   Jede .tl-bar traegt style="--i:N" fuer den Stagger. */
html.js-motion .fx-timeline .tl-bar,
html.js-motion .fx-timeline .tl-cap{
  transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;
  transition:transform 620ms var(--fx-ease-fill);
  transition-delay:calc(var(--i,0) * 70ms);
}
html.js-motion .fx-timeline.is-in .tl-bar,
html.js-motion .fx-timeline.is-in .tl-cap{transform:scaleY(1)}

/* ═══════════════════════════════════════════════════════════════════════
   FX2 · WISSENSSTAFETTE / ÜBERGABE-FLOW (Signature A)
   Line-Art zeichnet sich (erbt .line-draw), Bernstein-Punkt wandert A->B.
   KEIN SMIL/animateMotion (Jury-Risiko) -> reine CSS-offset-path-Bewegung,
   compositor-nah, mit hartem statischem Fallback am Ziel B.
   ═══════════════════════════════════════════════════════════════════════ */
.ef-relay{margin:0;max-width:520px;width:100%}
.ef-relay-svg{width:100%;height:auto;display:block}
.ef-relay-cap{margin:12px 0 0;font:500 14px/1.5 Inter,sans-serif;color:var(--fx-muted);text-align:center}

/* Pfad-Stagger: jede .ef-ln zeichnet nach der vorigen (--o = Reihenfolge) */
html.js-motion .line-draw.ef-relay-svg .ef-ln{transition-delay:calc(var(--o,0) * 220ms)}
html.js-motion .line-draw.ef-relay-svg .ef-arc{transition-duration:1200ms}

/* Wandernder Bernstein-Punkt: Default (und No-JS/reduced) = am Ziel B.
   .rr-dot folgt via offset-path dem Bogen; nur transform/opacity. */
.ef-relay-dot{fill:var(--fx-accent)}
html.js-motion .ef-relay-dot{
  offset-path:path("M120 96 q140 -74 260 8");
  offset-rotate:0deg;
  offset-distance:100%;                 /* Default schon am Ziel */
  transform:none;
}
html.js-motion .line-draw.ef-relay-svg.is-in .ef-relay-dot{
  animation:efRelayRun 1400ms var(--fx-ease-out) 800ms both;
}
@keyframes efRelayRun{from{offset-distance:0%}to{offset-distance:100%}}
/* Browser ohne offset-path: Punkt bleibt an seiner statischen cx/cy-Endlage sichtbar. */

/* Mobil: offset-path fährt in CSS-Pixeln (viewBox-Koordinaten, NICHT auf die
   gerenderte SVG-Breite skaliert) und wird nicht vom SVG-overflow geclippt ->
   Punkt landet rechts außerhalb = horizontaler Overflow. Daher abschalten;
   der statische cx=380/cy=104 im viewBox ist korrekt und wird geclippt. */
@media(max-width:560px){
  html.js-motion .ef-relay-dot{offset-path:none;transform:none}
  html.js-motion .line-draw.ef-relay-svg.is-in .ef-relay-dot{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   FX2 · SOUVERÄNITÄTS-REGLER (C)
   Achse Fremd-Cloud <-> On-Premise, Fülllinie + Griff rastet auf On-Prem-Ende.
   Griff = der EINE Bernstein-Marker. Default = Endlage (No-JS).
   ═══════════════════════════════════════════════════════════════════════ */
.ef-slider{margin:0;width:100%;max-width:560px}
.ef-slider__svg{display:block;width:100%;height:auto}
.sl-rail{stroke:var(--fx-track);stroke-width:4;stroke-linecap:round}
.sl-tick{stroke:var(--fx-petrol-200);stroke-width:1.5}
.sl-fill{stroke:var(--fx-primary);stroke-width:4;stroke-linecap:round}
.sl-knob{fill:#fff;stroke:var(--fx-accent);stroke-width:3}  /* EIN Bernstein */
.sl-label{font:600 12px/1 Inter,sans-serif;fill:var(--fx-muted);letter-spacing:.04em;text-transform:uppercase}
.sl-label--active{fill:var(--fx-primary)}
.ef-slider__cap{margin:12px 0 0;font:500 13px/1.5 Inter,sans-serif;color:var(--fx-muted);text-align:center}

/* Enhancement: Fülllinie zeichnet sich (line-draw), Griff gleitet ans Ende. */
html.js-motion .ef-slider .sl-knob{
  transform:translateX(var(--sl-travel,-220px));
  transition:transform 900ms var(--fx-ease-fill) 200ms;
}
html.js-motion .ef-slider.is-in .sl-knob{transform:translateX(0)}

/* ═══════════════════════════════════════════════════════════════════════
   FX2 · WISSENS-GRAPH / NETZWERK (D)
   Zentraler Knoten, Kanten zeichnen sich, Randknoten faden nach ihrer Kante ein.
   Rein dekorativ (aria-hidden). Default = fertiges Netz (No-JS).
   ═══════════════════════════════════════════════════════════════════════ */
.ef-graph{margin:0;width:100%;max-width:520px}
.ef-graph__svg{display:block;width:100%;height:auto}
.gr-edge{stroke:var(--fx-primary-2);stroke-width:1.5;fill:none}
.gr-node{fill:#fff;stroke:var(--fx-primary);stroke-width:1.5}
.gr-core{fill:var(--fx-primary)}
.gr-node--accent{fill:#fff;stroke:var(--fx-accent);stroke-width:2}  /* EIN Bernstein */
.ef-graph__cap{margin:12px 0 0;font:500 13px/1.5 Inter,sans-serif;color:var(--fx-muted);text-align:center}

/* Enhancement: Randknoten starten unsichtbar und faden gestaffelt ein (--i). */
html.js-motion .ef-graph .gr-node,
html.js-motion .ef-graph .gr-node--accent{
  opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;
  transition:opacity 400ms var(--fx-ease-out),transform 400ms var(--fx-ease-out);
  transition-delay:calc(var(--i,0) * 130ms + 500ms);
}
html.js-motion .ef-graph.is-in .gr-node,
html.js-motion .ef-graph.is-in .gr-node--accent{opacity:1;transform:scale(1)}
/* Kanten zeichnen sich über das bestehende .line-draw-System (stroke-dashoffset). */
html.js-motion .ef-graph .gr-edge{transition-delay:calc(var(--o,0) * 120ms)}

/* ═══════════════════════════════════════════════════════════════════════
   FX3/FX2 · SPARKLINE (E6) + SECTION-DIVIDER (E9)
   Mini-Line-Art an Kennzahlen bzw. dünne sich zeichnende Trennlinie.
   ═══════════════════════════════════════════════════════════════════════ */
.fx-spark{display:block;width:120px;height:32px;overflow:visible}
.fx-spark path{fill:none;stroke:var(--fx-primary);stroke-width:2;stroke-linecap:round}
.fx-spark .fx-spark__dot{fill:var(--fx-accent);stroke:none}   /* EIN Bernstein */

.fx-divider{display:block;width:100%;height:24px;overflow:visible;color:var(--fx-track)}
.fx-divider path{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round}
.fx-divider circle{fill:var(--fx-primary)}

/* ═══════════════════════════════════════════════════════════════════════
   FX2 · MICRO-INTERACTION (F)  ·  Icon-Underdraw bei Karten-Hover
   1px-Petrol-Linie unter dem Karten-Icon, nur scaleX (GPU).
   ═══════════════════════════════════════════════════════════════════════ */
html.js-motion .card .ic{position:relative}
html.js-motion .card .ic::after{
  content:"";position:absolute;left:8px;right:8px;bottom:-5px;height:2px;
  background:var(--fx-primary);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s var(--fx-ease-out);
}
@media (hover:hover){
  html.js-motion .card:hover .ic::after{transform:scaleX(1)}
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOSSAR · themenbezogene Kopfgrafik pro Begriff (.gl-fig)
   Kompakte Line-Art rechts neben dem Einleitungsabsatz (Desktop: float,
   Prosa umfliesst; Mobil: volle Breite, zentriert). Erbt .line-draw-Draw.
   Default = Endzustand (No-JS/reduced). GENAU EIN Bernstein-Akzent je Bild.
   ═══════════════════════════════════════════════════════════════════════ */
.gl-fig{
  margin:0 0 20px;width:100%;max-width:340px;
}
.gl-fig svg{display:block;width:100%;height:auto}   /* viewBox+auto => CLS 0 */
.gl-fig__cap{
  margin:10px 0 0;font:500 12px/1.45 Inter,sans-serif;color:var(--fx-muted);
}
@media (min-width:720px){
  .prose > .gl-fig{
    float:right;width:44%;max-width:320px;margin:6px 0 18px 28px;
  }
}
/* Gemeinsame Linien-/Flächen-Sprache der Begriffs-SVGs */
.gl-ln{stroke:var(--fx-primary);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.gl-ln--soft{stroke:var(--fx-primary-2)}
.gl-track{stroke:var(--fx-track);stroke-width:1.5;fill:none}
.gl-fill{fill:var(--fx-petrol-100)}
.gl-fill--2{fill:var(--fx-petrol-200)}
.gl-solid{fill:var(--fx-primary)}
.gl-solid--2{fill:var(--fx-primary-2)}
.gl-node{fill:#fff;stroke:var(--fx-primary);stroke-width:1.5}
.gl-accent{fill:var(--fx-accent)}                     /* EIN Bernstein: Fläche */
.gl-accent-s{fill:#fff;stroke:var(--fx-accent);stroke-width:2}  /* od. Umriss */
.gl-txt{font:600 11px/1 Inter,sans-serif;fill:var(--fx-muted);
  letter-spacing:.03em}
.gl-txt--water{font:600 11px/1 Inter,sans-serif;fill:var(--fx-primary-2);
  letter-spacing:.03em}

/* Begriffs-Netz auf der Glossar-Übersicht (Hub) */
.gl-hub{margin:26px 0 0;width:100%;max-width:620px}
.gl-hub svg{display:block;width:100%;height:auto}
.gl-hub__cap{margin:12px 0 0;font:500 13px/1.5 Inter,sans-serif;color:var(--fx-muted)}
.glh-edge{stroke:var(--fx-primary-2);stroke-width:1.4;fill:none}
.glh-node{fill:#fff;stroke:var(--fx-primary);stroke-width:1.5}
.glh-core{fill:var(--fx-primary)}
.glh-accent{fill:#fff;stroke:var(--fx-accent);stroke-width:2}
.glh-label{font:600 12px/1 Inter,sans-serif;fill:var(--fx-fg)}
.glh-core-label{font:700 13px/1 Inter,sans-serif;fill:#fff}

/* Enhancement: Hub-Randknoten faden nach ihrer Kante ein (--i), wie ef-graph */
html.js-motion .gl-hub .glh-node,
html.js-motion .gl-hub .glh-accent,
html.js-motion .gl-hub .glh-label{
  opacity:0;transition:opacity 420ms var(--fx-ease-out);
  transition-delay:calc(var(--i,0) * 90ms + 480ms);
}
html.js-motion .gl-hub.is-in .glh-node,
html.js-motion .gl-hub.is-in .glh-accent,
html.js-motion .gl-hub.is-in .glh-label{opacity:1}
html.js-motion .gl-hub .glh-edge{transition-delay:calc(var(--o,0) * 90ms)}

/* reduced-motion Absicherung siehe globaler Block unten (line-draw path) */
@media (prefers-reduced-motion:reduce){
  .gl-hub .glh-node,.gl-hub .glh-accent,.gl-hub .glh-label{opacity:1!important;transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   UNTERSEITEN · themenbezogene Hero-/Kern-Grafiken (.ef-hero)
   Grosse Line-Art rechts neben dem Hero-Text (Split), erbt die gemeinsame
   Linien-Sprache (.gl-ln/.gl-node/.gl-accent) und den line-draw-Aufbau.
   Default = Endzustand (No-JS/reduced). GENAU EIN Bernstein-Akzent je Bild.
   ═══════════════════════════════════════════════════════════════════════ */
.ef-hero{margin:0;width:100%;max-width:520px}
.ef-hero svg{display:block;width:100%;height:auto}   /* viewBox+auto => CLS 0 */
.ef-hero__cap{margin:14px 0 0;font:500 13px/1.5 Inter,sans-serif;color:var(--fx-muted)}
.ef-hero-wrap{display:flex;justify-content:center;align-items:center}
@media (min-width:861px){.ef-hero-wrap{justify-content:flex-end}}

/* Gestrichelte "Haus/Grenze"-Kontur (Wissen bleibt im Haus) */
.gl-bound{stroke:var(--fx-primary-2);stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 5}
.gl-fill--soft{fill:var(--fx-petrol-100);opacity:.6}

/* ═══════════════════════════════════════════════════════════════════════
   FX3 · DATEN-GAUGE (rechner)  ·  Halbkreis-Skala, Zeiger, Bernstein-Zielbogen.
   Default = Endzustand (Zeiger auf Ziel, Wertbogen voll). Zahl als Textknoten.
   ═══════════════════════════════════════════════════════════════════════ */
.ef-gauge{margin:0;width:100%;max-width:340px}
.ef-gauge svg{display:block;width:100%;height:auto}
.ef-gauge__cap{margin:12px 0 0;font:500 12px/1.45 Inter,sans-serif;color:var(--fx-muted);text-align:center}
.gg-track{fill:none;stroke:var(--fx-petrol-100);stroke-width:14;stroke-linecap:round}
.gg-fill{fill:none;stroke:var(--fx-primary);stroke-width:14;stroke-linecap:round;stroke-dashoffset:0}
.gg-needle{stroke:var(--fx-fg);stroke-width:3;stroke-linecap:round}
.gg-hub{fill:var(--fx-fg)}
.gg-cap-dot{fill:var(--fx-accent)}   /* EIN Bernstein: Zielmarke am Bogen-Ende */
.gg-num{font:700 34px/1 Inter,sans-serif;fill:var(--fx-fg);font-variant-numeric:tabular-nums}
.gg-unit{font:500 12px/1 Inter,sans-serif;fill:var(--fx-muted)}

html.js-motion .ef-gauge .gg-fill{
  stroke-dashoffset:var(--gg-len,220);
  transition:stroke-dashoffset 1100ms var(--fx-ease-fill);
}
html.js-motion .ef-gauge.is-in .gg-fill{stroke-dashoffset:0}
html.js-motion .ef-gauge .gg-needle{
  transform:rotate(-90deg);transform-origin:120px 120px;
  transition:transform 1100ms var(--fx-ease-fill);
}
html.js-motion .ef-gauge.is-in .gg-needle{transform:rotate(0deg)}
html.js-motion .ef-gauge .gg-cap-dot{opacity:0;transition:opacity 300ms ease 950ms}
html.js-motion .ef-gauge.is-in .gg-cap-dot{opacity:1}

/* ═══════════════════════════════════════════════════════════════════════
   FX2 · WERT-CHECKLISTE (preise)  ·  Häkchen zeichnen sich gestaffelt, ein
   Bernstein-Häkchen als Zielwert. Rein dekorativ neben dem Preis-Argument.
   ═══════════════════════════════════════════════════════════════════════ */
.ef-value{margin:0;width:100%;max-width:420px}
.ef-value svg{display:block;width:100%;height:auto}
.ef-value__cap{margin:12px 0 0;font:500 13px/1.5 Inter,sans-serif;color:var(--fx-muted)}
.vl-row{stroke:var(--fx-track);stroke-width:1.5}
.vl-check{stroke:var(--fx-primary);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vl-check--accent{stroke:var(--fx-accent)}   /* EIN Bernstein: der Zielwert */
.vl-ring{fill:none;stroke:var(--fx-primary-2);stroke-width:1.5}
.vl-ring--accent{stroke:var(--fx-accent)}

/* ═══════════════════════════════════════════════════════════════════════
   FX2 · SECTION-DIVIDER (dezent)  ·  dünne sich zeichnende Trennlinie mit
   Wissens-Knoten in der Mitte. Erbt line-draw. Ein Bernstein-Kernpunkt.
   ═══════════════════════════════════════════════════════════════════════ */
.ef-sep{display:block;width:100%;max-width:760px;margin:8px auto 0;height:30px;overflow:visible}
.ef-sep .es-ln{stroke:var(--fx-track);stroke-width:1.4;fill:none;stroke-linecap:round}
.ef-sep .es-node{fill:#fff;stroke:var(--fx-primary);stroke-width:1.6}
.ef-sep .es-core{fill:var(--fx-primary)}
.ef-sep .es-accent{fill:var(--fx-accent)}   /* EIN Bernstein */

/* ═══════════════════════════════════════════════════════════════════════
   HARTE DOPPEL-ABSICHERUNG: reduced-motion überstimmt ALLE FX-Effekte.
   Jede Grafik in ihren Endzustand, keine Bewegung.
   ═══════════════════════════════════════════════════════════════════════ */
/* NICHT an html.js-motion gebunden: greift auch, falls js-motion je unter
   reduced-motion aktiv würde. Primär läuft die Absicherung über den frühen
   JS-return (js-motion wird gar nicht gesetzt) + CSS-Default = Endzustand. */
@media (prefers-reduced-motion:reduce){
  .ef-gauge .gg-fill{stroke-dashoffset:0!important;transition:none!important}
  .ef-gauge .gg-needle{transform:rotate(0deg)!important;transition:none!important}
  .ef-gauge .gg-cap-dot{opacity:1!important;transition:none!important}
  .line-draw path{stroke-dasharray:1!important;stroke-dashoffset:0!important;transition:none!important}
  .rentenring .rr-fill{stroke-dashoffset:0!important;transition:none!important}
  .rentenring .rr-marker{opacity:1!important;transition:none!important}
  .fx-timeline .tl-bar,
  .fx-timeline .tl-cap{transform:scaleY(1)!important;transition:none!important}
  .ef-relay-dot{animation:none!important;offset-distance:100%!important}
  .ef-slider .sl-knob{transform:translateX(0)!important;transition:none!important}
  .ef-graph .gr-node,
  .ef-graph .gr-node--accent{opacity:1!important;transform:scale(1)!important;transition:none!important}
  .card .ic::after{transform:scaleX(0)!important;transition:none!important}
}

/* Flash-of-Hidden-Content-Fix: Hero-Inhalt sofort sichtbar, kein Reveal-Fade
   above-the-fold. Reveal-Animationen unterhalb bleiben aktiv. */
html.js-motion .hero [data-reveal],
html.js-motion .hero.fx-host [data-reveal]{opacity:1 !important;transform:none !important;}