/* FX Fundamental Desk – heller Editorial-Stil.
   Wird NACH styles.css geladen und überschreibt dessen Farben. Struktur und Texte bleiben unverändert.
   Palette: warmes Off-White, fast schwarze Schrift, Champagner-Akzent, graphitfarbene Karten als dunkle Inseln. */
:root{
  color-scheme:only light;
  --bg:#f4efe6; --bg2:#eee8dd; --panel:#fbf9f5; --panel2:#ffffff;
  --line:rgba(60,50,35,.12); --line2:rgba(60,50,35,.22);
  --fg:#15151a; --mute:#5f5c56; --dim:#6f6a5f;
  --blue:#17181c; --blue2:#8f6b43; --blue-soft:rgba(166,124,82,.14);
  --bull:#0f8a5f; --bear:#c8353d;
  --glow:0 0 0 1px var(--line),0 16px 38px -22px rgba(40,30,15,.45);
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg)}
::selection{background:rgba(166,124,82,.28)}
:focus-visible{outline-color:#a67c52}

/* Typografie: ruhiger, editorial */
h1,h2{font-weight:600;color:var(--fg)}
h1{letter-spacing:-.03em}
.hl{color:#a67c52;text-shadow:none}
.eyebrow{color:var(--blue2)}
.lead{color:#4a4741}
.skip{background:var(--blue)}

/* Buttons */
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 26px -16px rgba(20,20,26,.75)}
.btn-primary:hover{background:#2c2e35;transform:translateY(-1px)}
.btn-outline{background:rgba(255,255,255,.6);color:var(--fg);border-color:var(--line2)}
.btn-outline:hover{border-color:#a67c52;background:rgba(166,124,82,.1)}
.btn-ghost:hover{color:var(--blue2)}

/* Navigation */
.nav{background:rgba(244,239,230,.86);border-bottom:1px solid var(--line)}
.logo{color:var(--fg)}
.logo img{box-shadow:0 0 0 1px rgba(20,20,26,.18),0 8px 16px -8px rgba(20,20,26,.55)!important}
.menu>a{color:var(--mute)} .menu>a:hover,.menu-simple a:hover{color:var(--fg)}
.burger{border-color:var(--line2)}
.burger span{background:var(--fg)}
@media (max-width:820px){.menu{background:#f7f3ec;box-shadow:0 24px 40px -28px rgba(40,30,15,.45)}}

/* Hero */
.hero{background:radial-gradient(900px 520px at 78% 0%,rgba(166,124,82,.16),transparent 70%)}
.globe{opacity:.8}
.benefits li::before{background:#a67c52;box-shadow:none}
.sources span{background:rgba(255,255,255,.55)}

/* Karten */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 14px 30px -24px rgba(40,30,15,.5)}
.card:hover{border-color:var(--line2)}
.feat:hover{box-shadow:var(--glow)}
.chart-card,.opps li{background:rgba(255,255,255,.6)}
.viz{background:rgba(255,255,255,.55)}
.track{background:#e4ddd0}
.dots i{background:#d3cab9}
.imp i{background:#d6cdbd}
.imp i.on{background:#a67c52}
.fill.up,.fill.dn{box-shadow:none}
.fill.nu,.sw.neu{background:#9a9890}
.chip.up{color:var(--bull);background:rgba(15,138,95,.1);border-color:rgba(15,138,95,.3)}
.chip.dn{color:var(--bear);background:rgba(200,53,61,.09);border-color:rgba(200,53,61,.3)}
.chip.nu{color:var(--mute);background:rgba(120,115,100,.1)}
.ic.up{background:rgba(15,138,95,.12);color:var(--bull);border-color:rgba(15,138,95,.35)}
.ic.dn{background:rgba(200,53,61,.1);color:var(--bear);border-color:rgba(200,53,61,.35)}
.ic.nu{background:rgba(120,115,100,.1)}
.matrix-wrap{scrollbar-color:#cfc6b5 transparent}
.matrix .mc{color:#1b1b20!important}
.sample-tag{color:var(--dim)}

/* Dunkle Inseln: Vorschau-Karte im Kopfbereich bleibt graphitfarben */
.dash{color:#eef2ff;--fg:#eef2ff;--mute:#a4aec4;--dim:#7e8aa6;--line:rgba(120,150,255,.14);--line2:rgba(120,150,255,.26);--panel:#0a1120;--panel2:#0d1628;--blue:#2b6bff;--blue2:#5c8dff;--blue-soft:rgba(43,107,255,.14);--bull:#22c55e;--bear:#ef4444;--glow:0 0 0 1px rgba(120,150,255,.14),0 34px 70px -34px rgba(8,16,44,.7)}
.dash .chart-card,.dash .opps li{background:rgba(5,8,15,.5)}
.dash .track{background:#0f1a2e}
.dash .dots i{background:#1b2740}
.dash .fill.up{box-shadow:0 0 12px rgba(34,197,94,.5)}
.dash .fill.dn{box-shadow:0 0 12px rgba(239,68,68,.5)}
.dash .fill.nu{background:#6c7a99}
.dash .chip.up{color:#22c55e;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3)}
.dash .chip.dn{color:#ef4444;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3)}
.dash .chip.nu{color:#a4aec4;background:rgba(150,160,190,.1)}
.dash .ic.up{background:rgba(34,197,94,.14);color:#22c55e;border-color:rgba(34,197,94,.35)}
.dash .ic.dn{background:rgba(239,68,68,.14);color:#ef4444;border-color:rgba(239,68,68,.35)}
.dash .ic.nu{background:rgba(150,160,190,.1)}

/* Preise */
.plan li{color:#3c3a36}
.plan li::before,.assure li::before{color:var(--blue2)}
.plan.pop{color:#eef2ff;background:linear-gradient(180deg,#1c2231,#0e1119);border-color:rgba(140,175,255,.4);box-shadow:0 34px 64px -32px rgba(8,16,44,.7);--fg:#f2f2f4;--mute:#aeb6c8;--dim:#8a93a8;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.22);--blue2:#cfae83}
.plan.pop li{color:#d9deea}
.plan.pop .btn-primary{background:#fff;color:#111;box-shadow:none}
.plan.pop .btn-primary:hover{background:#efe6d8}
.badge{background:var(--blue);color:#fff}
.plan.pop .badge{background:#a67c52}
.seg-lg{background:rgba(255,255,255,.7)}
.seg-lg button:hover{color:var(--fg)}
.seg-lg button.on{background:var(--blue);color:#fff;box-shadow:0 10px 22px -12px rgba(20,20,26,.7)}
.seg-lg button.on small{color:#e6d9c6}
.seg-lg button small{color:var(--blue2)}
.save-line{color:var(--blue2)}

/* FAQ, Schlussband, Fuß */
.faq details{background:rgba(255,255,255,.6)}
.final{background:radial-gradient(700px 320px at 50% 100%,rgba(166,124,82,.2),transparent 70%)}

/* Engine-Sektion (Fuß und Methodik unter der Visualisierung) */
html body #engine.desk-story{background:none}
html body #engine .ds-kicker{color:var(--blue2)}
html body #engine .ds-bottom{border-top:1px solid var(--line)}
html body #engine .ds-bottom p{color:var(--mute)}
html body #engine .ds-bottom strong{color:var(--fg)}
html body #engine .ds-method{border-top:1px solid var(--line)}
html body #engine .ds-method summary{color:var(--mute)}
html body #engine .ds-method p{color:var(--mute)}
html body #engine .ds-method a{color:var(--blue2);text-decoration:underline;text-underline-offset:3px}
html body #engine .eng-out li{background:rgba(255,255,255,.7);border-color:var(--line2)}
html body #engine a:focus-visible,#engine summary:focus-visible{outline-color:#a67c52}
#fe.fe{background:linear-gradient(180deg,#fbf8f2,#f0eadf);box-shadow:0 34px 70px -46px rgba(40,30,15,.55),inset 0 0 0 1px rgba(255,255,255,.75)}

/* Anmeldung, Konto, Rechtliches */
.auth-main{background:radial-gradient(800px 420px at 50% 0%,rgba(166,124,82,.14),transparent 70%)}
.auth-card input[type=email],.auth-card input[type=password],.auth-card input[type=text]{background:#fff;border-color:var(--line2);color:var(--fg)}
.auth-card input:focus{border-color:#a67c52;box-shadow:0 0 0 3px rgba(166,124,82,.25)}
.check-row input{accent-color:var(--blue)}
.check-row a,.auth-alt a{color:var(--blue2)}
.form-msg{color:#9b1c24}
.form-msg:not(:empty){background:rgba(200,53,61,.08);border-color:rgba(200,53,61,.4)}
.form-msg.ok{color:#5a4328}
.form-msg.ok:not(:empty){background:var(--blue-soft);border-color:rgba(166,124,82,.4)}
.pw-toggle{color:var(--blue2)} .pw-toggle:hover{background:var(--blue-soft)}
.auth-bullets li{color:#3c3a36} .auth-bullets li::before{color:var(--blue2)}
.auth-card small.ok{color:#5a4328}
.legal p{color:#3c3a36}
.todo{background:rgba(250,204,21,.28);color:#6b4e00}
.todo-banner{color:#6b4e00!important;background:rgba(250,204,21,.16);border-color:rgba(190,150,20,.5)}
.btn-danger{color:#b22a31;border-color:rgba(200,53,61,.5)} .btn-danger:hover{background:rgba(200,53,61,.1)}
.acc-banner{background:var(--blue-soft);border-color:rgba(166,124,82,.45);color:#3b3226}
.acc-banner b{color:var(--fg)}
.foot-links a{color:var(--mute)}

/* Matrix-Animation: Zellen blenden diagonal ein, sobald die Karte im Bild ist. Ohne JS bleibt alles sichtbar. */
.matrix .mc{transition:transform .18s ease,box-shadow .18s ease}
.matrix .mc:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 16px -10px rgba(40,30,15,.5);position:relative;z-index:1}
@keyframes mxPop{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes mxFade{from{opacity:0}to{opacity:1}}
.fx-js .matrix-wrap:not(.in) .matrix>*,.fx-js .matrix-wrap:not(.in) .legend{opacity:0}
.fx-js .matrix-wrap.in .matrix>.mc{animation:mxPop .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.fx-js .matrix-wrap.in .matrix>.mh,.fx-js .matrix-wrap.in .matrix>.mf{animation:mxFade .5s ease both;animation-delay:var(--d,0ms)}
.fx-js .matrix-wrap.in .legend{animation:mxFade .6s ease .9s both}

/* Hero-Vorschau: Linie zeichnet sich, Fläche blendet ein, Punkt poppt, Faktorzeilen laufen nacheinander ein.
   Läuft bei jedem Neuaufbau (Paar- oder Zeitraumwechsel) erneut. */
@keyframes hdDraw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes hdFade{from{opacity:0}to{opacity:1}}
@keyframes hdDot{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.6)}100%{opacity:1;transform:scale(1)}}
@keyframes hdRow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes hdPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 12px rgba(34,197,94,0)}}
@keyframes hdPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
#heroChart path[stroke="#5c8dff"]{stroke-dasharray:1400;animation:hdDraw 6s cubic-bezier(.45,.1,.3,1) .3s both}
#heroChart path[fill^="url"]{animation:hdFade 3s ease 3.6s both}
#heroChart path[stroke-dasharray="4 4"]{animation:hdFade 3s ease 1s both}
#heroChart circle{transform-box:fill-box;transform-origin:center;animation:hdDot 1s ease 6s both}
#heroChart line{animation:hdFade 1.5s ease both}
#thRows li{animation:hdRow .5s cubic-bezier(.2,.8,.2,1) both}
#thRows li:nth-child(1){animation-delay:.2s}#thRows li:nth-child(2){animation-delay:.3s}#thRows li:nth-child(3){animation-delay:.4s}
#thRows li:nth-child(4){animation-delay:.5s}#thRows li:nth-child(5){animation-delay:.6s}#thRows li:nth-child(6){animation-delay:.7s}
#thRows li:nth-child(7){animation-delay:.8s}#thRows li:nth-child(8){animation-delay:.9s}#thRows li:nth-child(n+9){animation-delay:1s}
#thLine .chip{animation:hdPop .5s cubic-bezier(.2,.8,.2,1) both,hdPulse 1.6s ease-out .5s 2}
#thConf{display:inline-block;animation:hdPop .6s cubic-bezier(.2,.8,.2,1) .2s both}
@media (prefers-reduced-motion:reduce){
  .matrix .mc,#heroChart *,#thRows li,#thLine .chip,#thConf{animation:none!important;transition:none!important}
  #heroChart path[stroke="#5c8dff"]{stroke-dasharray:none}
}