/* ============================================================
   NEU-THEME — Overlay für das neue Website-Design
   Stellt die aus Website/ übernommenen Seiten (Bodygraph-Rechner)
   auf die neue Designsprache um: Marcellus + Mulish, Cream /
   Pflaume / Salbei / Terrakotta, Pill-Navigation.
   Wird NACH style.css / hd.css geladen und bringt die Schriften
   selbst mit (@font-face fuer Marcellus und Mulish). Die fruehere
   fonts.css enthielt nur ungenutzte Schriften und ist am 22.08.2026
   entfallen.
   ============================================================ */

/* ---------- Fonts (lokal, DSGVO-konform) ---------- */
@font-face { font-family:'Marcellus'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/marcellus-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Marcellus'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/marcellus-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/mulish-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/mulish-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113; }
@font-face { font-family:'Mulish'; font-style:italic; font-weight:300 700; font-display:swap;
  src:url("../fonts/mulish-italic-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Mulish'; font-style:italic; font-weight:300 700; font-display:swap;
  src:url("../fonts/mulish-italic-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113; }

/* ---------- Design-Tokens auf die neue Farbwelt mappen ---------- */
:root{
  --font-serif: 'Marcellus', Georgia, serif;
  --font-sans:  'Mulish', system-ui, -apple-system, sans-serif;

  --color-bg:        #F5F0E8;  /* Cream */
  --color-surface:   #FBF8F2;  /* Cream 2 */
  --color-cream:     #ECE5D8;  /* Sand */
  --color-sand:      #DED4C8;
  --color-sand-light:#EFE8DD;
  --color-taupe:     #5F6E55;  /* Deep Sage — Labels, kleine Akzente (≥4,5:1 auf Cream, WEB-20260712-014) */
  --color-taupe-dark:#5C3D54;  /* Pflaume — Icons, Ghost-Buttons */
  --color-warm-dark: #432C3E;  /* Pflaume dunkel — dunkle Flächen, Primär-Button */
  --color-text:      #3D3833;
  --color-text-soft: #6B6358;
  --color-text-muted:#746B63;
  --color-border:    rgba(61,56,51,.16);
  --color-border-light:rgba(61,56,51,.08);
  --color-accent:    #5C3D54;  /* Pflaume — Akzent-Buttons */
  --color-accent-hover:#432C3E;
  --color-sage-soft: #C5CFBE;
  --color-copper:    #B0704F;  /* Terrakotta */
  --color-plum:      #5C3D54;

  /* Bodygraph-Farblogik v4:
     bewusst = Marken-Aubergine (wie der aktive Nav-Button) · unbewusst = Salbei.
     Tonwert-Unterschied bleibt, aber ohne Schwarz-Wirkung. */
  --neu-pers:      #5C3D54;
  --neu-pers-soft: #5C3D54;
  --neu-des:       #8B9A82;
  --neu-des-deep:  #66755C;
  --neu-des-text:  #5F6E55;
}

body{ background:var(--color-bg); }

/* Deko-Elemente (Auroras, Partikel, Ringe) dürfen visuell überstehen,
   aber nie horizontalen Dokument-Scroll erzeugen (Review WEB-20260712-008).
   clip statt hidden: erzeugt keinen Scroll-Container, sticky bleibt intakt. */
html{ overflow-x:hidden; overflow-x:clip; }

/* ---------- Neue Pill-Navigation ---------- */
.hd-nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(245,240,232,.86); border-bottom:1px solid rgba(61,56,51,.16); }
.hd-nav-in{ max-width:1200px; margin:0 auto; padding:14px 32px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; }
.hd-logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--color-text); flex-shrink:0; }
.hd-logo-n{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid #5C3D54; border-radius:50%; color:#5C3D54; font-family:var(--font-serif); font-size:13px; letter-spacing:.5px; }
.hd-logo-t{ font-family:var(--font-serif); font-size:19px; letter-spacing:.5px; white-space:nowrap; }
.hd-pills{ display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; }
.hd-pills::-webkit-scrollbar{ display:none; }
.hd-pill{ background:transparent; color:var(--color-text-soft); border:none; cursor:pointer; text-decoration:none;
  font-family:var(--font-sans); font-size:14.5px; font-weight:500; padding:9px 18px; border-radius:100px;
  letter-spacing:.2px; white-space:nowrap; transition:background .2s, color .2s; }
.hd-pill:hover{ background:rgba(92,61,84,.08); }
.hd-pill.on{ background:#5C3D54; color:#F5F0E8; }
.hd-lang{ background:none; border:1px solid rgba(61,56,51,.16); color:var(--color-text-soft); cursor:pointer;
  font-family:var(--font-sans); font-size:12px; font-weight:700; padding:7px 13px; border-radius:100px;
  letter-spacing:.5px; transition:all .2s; flex-shrink:0; }
.hd-lang:hover{ border-color:#5C3D54; color:#5C3D54; }
@media (max-width:900px){
  .hd-nav-in{ padding:10px 16px; flex-wrap:wrap; justify-content:center; gap:8px; }
  /* Alle Nav-Ziele sichtbar: Pills brechen in 2 Zeilen um, statt in einer
     versteckten Scroll-Reihe zu verschwinden (Review WEB-20260712-008). */
  .hd-pills{ order:3; width:100%; padding-inline:2px; flex-wrap:wrap; justify-content:center; row-gap:2px; }
  .hd-pill{ padding:7px 13px; font-size:13.5px; }
}
/* „Live Your Human Design" ist breiter als der frühere Name. Ohne diese Stufe
   schiebt das Lockup den Sprachumschalter bei 375 px aus dem Header. */
@media (max-width:560px){
  .hd-logo{ gap:9px; }
  .hd-logo-t{ font-size:16px; letter-spacing:.2px; }
}

/* ---------- Rechner-Hero: Aurora + Partikel ---------- */
.calc-hero{ position:relative; overflow:visible; }
.calc-hero .container{ position:relative; z-index:1; }
.calc-hero .eyebrow{ color:#5F6E55; letter-spacing:2.5px; font-weight:600; }
.calc-aurora{ position:absolute; left:50%; top:30%; width:640px; height:420px; border-radius:50%;
  transform:translate(-50%,-50%); filter:blur(70px); opacity:.4; pointer-events:none; z-index:0;
  background:conic-gradient(from 40deg, rgba(139,154,130,.45), rgba(92,61,84,.35), rgba(176,112,79,.28), rgba(139,154,130,.45));
  animation:neuAurora 40s linear infinite; }
@keyframes neuAurora{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.calc-particles{ position:absolute; inset:-30px 0; pointer-events:none; z-index:0; }
.calc-particles span{ position:absolute; border-radius:50%; box-shadow:0 0 8px currentColor;
  animation:neuFloaty var(--fd,11s) ease-in-out var(--fdel,0s) infinite, neuTwinkle calc(var(--fd,11s) * .7) ease-in-out var(--fdel,0s) infinite; }
@keyframes neuFloaty{ 0%,100%{ transform:translateY(0); opacity:.3;} 50%{ transform:translateY(-14px); opacity:.85;} }
@keyframes neuTwinkle{ 0%,100%{ opacity:.2;} 50%{ opacity:1;} }

/* ============================================================
   BÜHNE „KLARHEIT" — Redesign des Ergebnisbereichs
   Kein Nebel: klare Flächen, feine Linien, Mandala-Echo.
   Bewusst = Pflaume · Unbewusst = Terrakotta · Beides = Verlauf
   ============================================================ */

body.results-mode{ background:#F5F0E8; }

/* Bühne: klar statt neblig — Graph größer, Grund ruhiger */
body.results-mode .chart-flank{
  color:#3D3833;
  border-color:rgba(61,56,51,.10);
  background:linear-gradient(160deg, #FDFBF6 0%, #F8F3EA 55%, #F3ECE1 100%);
  box-shadow:0 30px 70px -34px rgba(67,44,62,.28);
  justify-content:center;
}
/* Vier-Spalten-Bühne NUR am Desktop. Ohne Media-Query würde diese Regel
   (neu-theme lädt zuletzt) die responsiven Breakpoints aus calc.css
   Z. 526/539 überschreiben — dann bliebe der Einzel-Bodygraph auf Handy/
   Tablet gequetscht (Chart ~136 px). Breakpoints 1260/820 gespiegelt. */
@media(min-width:1261px){
  body.results-mode .chart-flank{
    /* Chart-Spalte breit (Leisten weiter außen, gleiche Position für Bodygraph
       UND Mandala → nichts springt beim Umschalten; das Mandala nutzt die breite
       Mitte und wird groß) + breitere Info-Spalte gegen 3-zeiligen Kreuz-Namen /
       Typ-Wasserzeichen-Überlagerung. Der Bodygraph-Graph zentriert darin (bleibt
       gleich groß, nur mehr Luft). */
    grid-template-columns:minmax(108px,124px) minmax(0,660px) minmax(108px,124px) minmax(340px,420px);
  }
}
body.results-mode .chart-panel>svg{ max-height:720px; }
body.results-mode .chart-flank::before{
  background:
    linear-gradient(rgba(61,56,51,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,56,51,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(80% 85% at 50% 46%, #000 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(80% 85% at 50% 46%, #000 20%, transparent 100%);
}
/* Der alte Nebel-Ring entfällt komplett */
body.results-mode .chart-flank::after{ display:none; }
body.results-mode .chart-panel>svg{
  filter:drop-shadow(0 10px 16px rgba(67,44,62,.08));
}

/* Chart-Kulisse: bewusst KEINE. Die frühere Ring-Kulisse (.neu-rings) und
   das Farbrahmen-Experiment (04.07.2026) sind auf Alex' Wunsch entfernt —
   das Panel behält seine ruhige Standard-Kante aus calc.css.
   (neuRot/neuRotRev bleiben: das Berechnungs-Ritual nutzt sie.) */
@keyframes neuRot{ to{ transform:rotate(360deg); } }
@keyframes neuRotRev{ to{ transform:rotate(-360deg); } }
body.results-mode .chart-panel>svg#bodygraph{ position:relative; z-index:1; }

/* Chart-Typografie an die Website angleichen */
body.results-mode #bodygraph text{ font-family:var(--font-sans) !important; }

/* Offene Zentren: fast weiß, mit klarer Kontur (Kontur vor Fläche) */
body.results-mode #bodygraph #Head>path,
body.results-mode #bodygraph #Ajna>path,
body.results-mode #bodygraph #Throat>path,
body.results-mode #bodygraph #G>path,
body.results-mode #bodygraph #Ego>path,
body.results-mode #bodygraph #Sacral>path,
body.results-mode #bodygraph #SolarPlexus>path,
body.results-mode #bodygraph #Spleen>path,
body.results-mode #bodygraph #Root>path{
  fill:#FEFCF8;
  stroke:#AE9E85;
  stroke-width:2;
  filter:none;
}

/* Definierte Zentren: Farbe nach Definitionsquelle (Klassen setzt das Script)
   — überschreibt die Jewel-Palette des Aurora-Entwurfs */
body.results-mode #bodygraph .neu-cd-p path{ fill:var(--neu-pers-soft) !important; stroke:#432C3E !important; stroke-width:2 !important; }
body.results-mode #bodygraph .neu-cd-d path{ fill:var(--neu-des) !important; stroke:var(--neu-des-deep) !important; stroke-width:2 !important; }
body.results-mode #bodygraph .neu-cd-m path{ fill:url(#neuMixGrad) !important; stroke:#54404E !important; stroke-width:2 !important; }

/* Kanäle: das komplette Netz bleibt sichtbar — inaktive Kanäle als helle
   „Röhren" mit feiner Kontur (Referenz-Prinzip), Aktivierung = Füllung darin */
body.results-mode #bodygraph .gate-inactive{
  fill:#FCFAF4 !important; opacity:1;
  stroke:#D9CDB7; stroke-width:.9;
}
body.results-mode #bodygraph .gate-pers{ fill:var(--neu-pers) !important; stroke:#432C3E; stroke-width:.6; filter:none; transition:fill .25s ease; }
body.results-mode #bodygraph .gate-des{ fill:var(--neu-des) !important; stroke:#66755C; stroke-width:.6; filter:none; transition:fill .25s ease; }
body.results-mode #bodygraph .gate-both{ stroke:#4F4650; stroke-width:.6; filter:none; }
body.results-mode #bodygraph text[id^="GateText"]{ fill:#A2957F; }
body.results-mode #bodygraph .gate-text-active{ stroke:#FBF8F2; }
body.results-mode #bodygraph .gate-text-pers{ fill:#5C3D54 !important; }
body.results-mode #bodygraph .gate-text-des{ fill:#5F6E55 !important; }
body.results-mode #bodygraph .gate-text-both{ fill:#5D4A54 !important; }

/* Legende */
.legend-row .dot--both{ background:linear-gradient(180deg, #5C3D54 0 50%, #8B9A82 50% 100%) !important; }

/* Variable-Pfeile: links Design (Terrakotta), rechts Persönlichkeit (Pflaume) */
body.results-mode .vside--left .vk__num,
body.results-mode .vside--left .vk__ar{ color:var(--neu-des-text); }
body.results-mode .vside--right .vk__num,
body.results-mode .vside--right .vk__ar{ color:var(--neu-pers-soft); }

/* Kopfzeile & Kicker der Bühne */
body.results-mode .chart-panel__kicker,
body.results-mode .summary-kicker{ color:#6E7E61; }
body.results-mode .chart-panel .legend-row>span{
  color:#6B6358;
  border-color:rgba(61,56,51,.14);
  background:rgba(251,248,242,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

/* Planeten-Schienen: Salbei / Pflaume */
body.results-mode .planet-rail--des .rail-head{ color:var(--neu-des-text); }
body.results-mode .planet-rail--pers .rail-head{ color:var(--neu-pers-soft); }
body.results-mode .rail-head small{ color:#8B847A; }
body.results-mode .planet-rail--des .planet-tile{
  border-color:rgba(139,154,130,.45);
  background:linear-gradient(90deg, rgba(253,250,245,.94), rgba(197,207,190,.35));
  box-shadow:inset 3px 0 0 rgba(139,154,130,.65);
}
body.results-mode .planet-rail--des .planet-tile .ps,
body.results-mode .planet-rail--des .planet-tile .pg{ color:#5F6E55; }
body.results-mode .planet-rail--des .planet-tile .pn{ color:#77816B; }
body.results-mode .planet-rail--pers .planet-tile{
  border-color:rgba(92,61,84,.24);
  background:linear-gradient(90deg, rgba(253,250,246,.88), rgba(92,61,84,.10));
  box-shadow:inset -3px 0 0 rgba(92,61,84,.55);
}
body.results-mode .planet-rail--pers .planet-tile .ps,
body.results-mode .planet-rail--pers .planet-tile .pg{ color:var(--neu-pers); }
body.results-mode .planet-rail--pers .planet-tile .pn{ color:#746B63; }

/* „Dein Design"-Panel: klares Glas in Cream/Pflaume */
body.results-mode .design-summary{
  color:#3D3833;
  border-color:rgba(61,56,51,.10);
  background:linear-gradient(155deg, rgba(251,248,242,.94), rgba(240,232,221,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 18px 38px -20px rgba(67,44,62,.22);
}
body.results-mode .design-summary .result-card{ border-bottom-color:rgba(61,56,51,.10); }
body.results-mode .design-summary .result-card .label{ color:#6E7E61; }
body.results-mode .design-summary .result-card .value{ color:#432C3E; }
body.results-mode .type-card{
  border-color:rgba(92,61,84,.18);
  background:linear-gradient(145deg, rgba(251,248,242,.92), rgba(226,214,222,.42));
  /* mehr Luft oben, damit der Beschreibungstext klar unter dem „Generator"-
     Schriftzug sitzt (nicht direkt darangepatzt). */
  padding-top:56px;
}
body.results-mode .type-card::before{ color:#5C3D54; opacity:.12; }
body.results-mode .type-card p{ color:#6B6358; }
body.results-mode .type-card .type-card__name{ color:#5C3D54; }

/* Puls-Animationen: warm und dezent (ersetzen die Aurora-Keyframes) */
@keyframes energyCurrent{
  0%,100%{ opacity:.84; filter:none; transform:scale(.997); }
  45%,60%{ opacity:1; filter:drop-shadow(0 0 6px rgba(139,154,130,.42)); transform:scale(1.01); }
}
@keyframes gateSpark{
  0%,100%{ opacity:.82; filter:none; }
  50%{ opacity:1; filter:drop-shadow(0 0 4px rgba(139,154,130,.46)); }
}
@keyframes centerAura{
  0%,100%{ filter:drop-shadow(0 2px 4px rgba(67,56,51,.07)); }
  50%{ filter:drop-shadow(0 5px 12px rgba(61,41,57,.18)); }
}

/* ---------- WOW 1: Materialize-Welle Kopf → Wurzel + Glanzlauf ---------- */
@keyframes neuMatIn{
  from{ opacity:0; transform:scale(.55); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes neuGlowPass{
  0%,100%{ filter:none; }
  50%{ filter:drop-shadow(0 0 9px rgba(255,250,240,.95)) brightness(1.22); }
}
/* Nach dem Aufbau kehrt RUHE ein: kein Dauerpuls auf Kanälen und Tor-Zahlen —
   der gestaffelte Puls sah aus wie eine ständig wiederkehrende Welle.
   Nur die Zentren atmen weiter sanft (centerAura). */
body.results-mode #bodygraph .gate-pers,
body.results-mode #bodygraph .gate-des,
body.results-mode #bodygraph .gate-both{
  animation:
    neuMatIn 1.1s cubic-bezier(.25,.7,.3,1.08) var(--mat-delay,0s) backwards,
    neuGlowPass 1.2s ease var(--glow-delay,3s) 1;
}
body.results-mode #bodygraph .gate-text-active{ animation:none !important; }
body.results-mode #bodygraph [class*="center-def-"]{
  transform-box:fill-box; transform-origin:center;
  animation:neuMatIn 1s cubic-bezier(.25,.7,.3,1.08) var(--mat-delay,0s) backwards;
}

/* ---------- WOW 2: Lichtwelle über den Chart (Bronze → Pflaume) ---------- */
.chart-panel{ position:relative; }
.neu-sweep{ position:absolute; left:50%; top:50%; width:360px; height:360px; margin:-180px 0 0 -180px;
  border-radius:50%; pointer-events:none; opacity:0; z-index:3;
  background:radial-gradient(closest-side, transparent 56%, rgba(139,154,130,.36) 68%, rgba(92,61,84,.22) 78%, transparent 90%); }
.neu-sweep.go{ animation:neuSweep 1.9s var(--sweep-delay,.35s) cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes neuSweep{ 0%{ opacity:0; transform:scale(.22);} 16%{ opacity:1;} 100%{ opacity:0; transform:scale(2.3);} }

/* ---------- WOW 3: Hover-Verbindung Planeten-Kachel ↔ Chart ---------- */
.planet-tile{ cursor:default; }
#bodygraph .neu-hl-p{ filter:drop-shadow(0 0 8px rgba(92,61,84,.9)) brightness(1.12) !important; }
#bodygraph .neu-hl-d{ filter:drop-shadow(0 0 8px rgba(139,154,130,.95)) brightness(1.08) !important; }
#bodygraph text.neu-hl-p{ filter:drop-shadow(0 0 4px rgba(92,61,84,.9)) !important; }
#bodygraph text.neu-hl-d{ filter:drop-shadow(0 0 4px rgba(139,154,130,.95)) !important; }
body.results-mode .planet-rail--des .planet-tile.neu-active{
  border-color:rgba(139,154,130,.9) !important;
  box-shadow:inset 3px 0 0 rgba(139,154,130,.95), 0 8px 22px -12px rgba(102,117,92,.6) !important; }
body.results-mode .planet-rail--pers .planet-tile.neu-active{
  border-color:rgba(92,61,84,.65) !important;
  box-shadow:inset -3px 0 0 rgba(92,61,84,.8), 0 8px 22px -12px rgba(92,61,84,.6) !important; }

/* ---------- Buttons: einheitliches Marken-Aubergine (Hover dunkler) ---------- */
.calc-btn{ background:#5C3D54; }
.calc-btn:hover{ background:#432C3E; }
.ghost-btn--solid{ background:#5C3D54 !important; border-color:#5C3D54 !important; color:#F5F0E8 !important; }
.ghost-btn--solid:hover{ background:#432C3E !important; border-color:#432C3E !important; }
.btn--primary{ background:#5C3D54 !important; }
.btn--primary:hover{ background:#432C3E !important; }

/* ---------- WOW 5: Spotlight — beim Hover wird alles andere blass ---------- */
body.results-mode #bodygraph .gate-both{ transition:fill .25s ease; }
body.results-mode #bodygraph.neu-spot .gate-pers:not(.neu-hl-p):not(.neu-hl-d),
body.results-mode #bodygraph.neu-spot .gate-des:not(.neu-hl-p):not(.neu-hl-d),
body.results-mode #bodygraph.neu-spot .gate-both:not(.neu-hl-p):not(.neu-hl-d){
  fill:#E6DFD3 !important; stroke:#D9CDB7 !important; }
body.results-mode #bodygraph.neu-spot text.gate-text-pers:not(.neu-hl-p):not(.neu-hl-d),
body.results-mode #bodygraph.neu-spot text.gate-text-des:not(.neu-hl-p):not(.neu-hl-d),
body.results-mode #bodygraph.neu-spot text.gate-text-both:not(.neu-hl-p):not(.neu-hl-d){
  fill:#C3B7A3 !important; }

/* ---------- WOW 6: Berechnungs-Ritual (Übergangsmoment) ---------- */
.neu-ritual{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:24px; text-align:center;
  background:rgba(245,240,232,.94); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  opacity:0; pointer-events:none; transition:opacity .45s ease; }
.neu-ritual.show{ opacity:1; pointer-events:auto; }
.neu-ritual svg{ width:150px; height:150px; overflow:visible; }
.neu-ritual .r1{ transform-box:view-box; transform-origin:80px 80px; animation:neuRot 10s linear infinite; }
.neu-ritual .r2{ transform-box:view-box; transform-origin:80px 80px; animation:neuRotRev 7s linear infinite; }
.neu-ritual h3{ font-family:var(--font-serif); font-weight:400; font-size:25px; color:#3D3833; margin:0; }
.neu-ritual p{ font-family:var(--font-sans); font-size:13.5px; color:#746B63; margin:0; letter-spacing:.4px; }

/* ---------- WOW 7: Funken beim Reveal ---------- */
.neu-spark{ position:absolute; width:6px; height:6px; border-radius:50%; pointer-events:none;
  z-index:4; opacity:0; box-shadow:0 0 10px currentColor;
  animation:neuSparkPop 1.3s ease var(--sp-delay,0s) forwards; }
@keyframes neuSparkPop{
  0%{ opacity:0; transform:scale(.2); }
  25%{ opacity:1; transform:scale(1.4); }
  100%{ opacity:0; transform:scale(.4) translateY(-28px); }
}

/* ---------- WOW 8: „Auf einen Blick" gestaffelt + Wasserzeichen ---------- */
.design-summary.neu-in .result-card{ animation:neuRowIn .55s cubic-bezier(.2,.7,.3,1) both; }
.design-summary.neu-in .result-card:nth-child(1){ animation-delay:.15s; }
.design-summary.neu-in .result-card:nth-child(2){ animation-delay:.27s; }
.design-summary.neu-in .result-card:nth-child(3){ animation-delay:.39s; }
.design-summary.neu-in .result-card:nth-child(4){ animation-delay:.51s; }
.design-summary.neu-in .result-card:nth-child(5){ animation-delay:.63s; }
.design-summary.neu-in .result-card:nth-child(6){ animation-delay:.75s; }
@keyframes neuRowIn{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
.design-summary.neu-in .type-card::before{ animation:neuWmIn 1.5s .8s ease backwards; }
@keyframes neuWmIn{ from{ opacity:0; letter-spacing:.16em; } to{ opacity:.12; letter-spacing:normal; } }

/* ---------- WOW 9: Schimmer auf dem Berechnen-Button ---------- */
.calc-btn{ position:relative; overflow:hidden; }
.calc-btn::after{ content:""; position:absolute; inset:0; pointer-events:none;
  transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transition:transform .7s ease; }
.calc-btn:hover::after{ transform:translateX(130%) skewX(-18deg); }

/* ---------- WOW 4: 3D-Tilt der Chart-Bühne (Glättung übernimmt JS) ---------- */
.chart-panel{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .calc-aurora, .calc-particles span, .neu-sweep, .neu-spark{ animation:none !important; opacity:0; }
  .neu-ritual .r1, .neu-ritual .r2{ animation:none !important; }
  .neu-ritual{ display:none !important; }
  body.results-mode #bodygraph .gate-pers,
  body.results-mode #bodygraph .gate-des,
  body.results-mode #bodygraph .gate-both,
  body.results-mode #bodygraph [class*="center-def-"]{ animation:none !important; }
  .design-summary.neu-in .result-card{ animation:none !important; opacity:1 !important; }
  .calc-btn::after{ display:none; }
}