/* ════════════════════════════════════════════════════════════════════
   THE ENGINEERS OF FINANCE — V2 · THEME LAYER (Light/Dark) + UI
   Lädt NACH styles.css. Dark = unverändert (Token-Defaults = Originalwerte).
   Light = [data-theme="light"]-Override. Plus Theme-Toggle & mobiles Menü.
   ════════════════════════════════════════════════════════════════════ */

/* ── Neue Token-Defaults (Dark, = bisherige Hardcodes) ── */
:root{
  color-scheme:dark;
  --paper-2:#57534A;
  --paper-3:#9A958C;
  --paper-surface:#ffffff;
  --paper-line:#E5DFD2;
  --paper-gold:#8E743C;
  --paper-hl:linear-gradient(115deg,#6E5829,#A98E4F);
  --surface-2:#17171b;
  --grid:rgba(255,255,255,.025);
  --ghost-stroke:rgba(255,255,255,.06);
  --hd-bg:rgba(9,9,11,.82);
  --menu-bg:#101013;
  --glow:rgba(183,153,88,.16);
  --chart-line:rgba(255,255,255,.22);
  --chart-dim:rgba(255,255,255,.42);
  --chart-gold-strong:#8E743C;
  --noise-op:.035;
}

/* ── LIGHT THEME ── */
[data-theme="light"]{
  color-scheme:light;
  /* Basis */
  --bg:#F4EFE4;
  --bg-2:#ECE6D8;
  --surface:#FFFFFF;
  --line:rgba(20,18,12,.10);
  --line-strong:rgba(20,18,12,.20);
  --gold:#A2823F;
  --gold-2:#8A6E32;
  --gold-3:#B89A5A;
  --grad-gold:linear-gradient(115deg,#6E5829,#9A7E3F 55%,#B7935A);
  --txt:#1A1712;
  --txt-2:#5C574C;
  --txt-3:#8A8576;
  /* Kontrast-/Break-Sektionen kippen auf DUNKEL */
  --paper:#121316;
  --paper-txt:#F4F1EA;
  --paper-2:#A8A49B;
  --paper-3:#6E6A62;
  --paper-surface:#1B1B20;
  --paper-line:rgba(255,255,255,.10);
  --paper-gold:#D4B978;
  --paper-hl:linear-gradient(115deg,#B79958,#F0DCAE);
  /* Effekte */
  --surface-2:#EAE3D4;
  --grid:rgba(20,18,12,.05);
  --ghost-stroke:rgba(20,18,12,.07);
  --hd-bg:rgba(244,239,228,.85);
  --menu-bg:#FFFFFF;
  --glow:rgba(183,153,88,.10);
  --chart-line:rgba(20,18,12,.24);
  --chart-dim:rgba(20,18,12,.50);
  --noise-op:.02;
}

/* ── Tokenisierte Overrides (greifen in beiden Themes) ── */
body::after{opacity:var(--noise-op)}
.grid-bg{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)}
.hd.scrolled{background:var(--hd-bg);border-bottom-color:var(--line)}
.submenu{background:var(--menu-bg)}
.hero-glow,.final .glow{background:radial-gradient(circle,var(--glow),transparent 60%)}
.ghost{-webkit-text-stroke:1px var(--ghost-stroke)}
.foot-word{-webkit-text-stroke:1px var(--ghost-stroke)}
.steps4 .st:hover{background:var(--surface-2)}
.b-paper{color:var(--bg)}

/* Break-Sektionen: Kinder über Tokens (statt Hardcodes) */
.sec-paper .lede,.sec-paper p{color:var(--paper-2)}
.sec-paper .tcard{background:var(--paper-surface);border-color:var(--paper-line)}
.sec-paper .tcard h3{color:var(--paper-txt)}
.sec-paper .mono{color:var(--paper-gold)}
.sec-paper .eyebrow-row::before{background:var(--paper-gold)}
.sec-paper .hl{background:var(--paper-hl);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-paper .chart-ph{border-color:var(--paper-line);background:var(--paper-surface);color:var(--paper-3)}
.sec-paper .stat{background:var(--paper-surface);border-color:var(--paper-line)}
.sec-paper .stat .cap{color:var(--paper-3)}
.sec-paper .stat .num{background:var(--paper-hl);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-paper .checks .ck{color:var(--paper-gold)}

/* Hero-Chart: theme-fähige Linien/Beschriftung */
.hero-chart .p1,.hero-chart .cline{stroke:var(--chart-line)}
.hero-chart .cdim{fill:var(--chart-dim)}
[data-theme="light"] .hero-chart .p2{stroke:var(--chart-gold-strong)}
[data-theme="light"] .hero-chart .cgold{fill:var(--chart-gold-strong);stroke:var(--chart-gold-strong)}

/* ════════════════════════════════════════════════════════════════════
   THEME-TOGGLE
   ════════════════════════════════════════════════════════════════════ */
.nav-actions{display:flex;align-items:center;gap:9px}
.theme-toggle{width:42px;height:42px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--txt-2);display:inline-grid;place-items:center;cursor:pointer;transition:.25s var(--ease);flex:none;padding:0;order:-1}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-1px)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ic-sun{display:block}
.theme-toggle .ic-moon{display:none}
[data-theme="light"] .theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-moon{display:block}

/* ════════════════════════════════════════════════════════════════════
   BURGER + MOBILES MENÜ  (State of the Art: Breakpoint 1024 px)
   ════════════════════════════════════════════════════════════════════ */
.nav-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex:none}
.nav-burger span{width:20px;height:2px;background:var(--txt);border-radius:2px;transition:.3s var(--ease)}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open{overflow:hidden}

.mobile-menu{position:fixed;inset:0;z-index:95;background:var(--bg);padding:108px 28px 44px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu.open{transform:none;opacity:1;visibility:visible}
.mobile-menu::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 90% 60% at 50% 0,#000 30%,transparent 75%)}
.mobile-menu > *{position:relative}
.mm-group{border-top:1px solid var(--line);padding:20px 0}
.mm-group:first-child{border-top:none}
.mm-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:12px}
.mm-link{display:flex;flex-direction:column;gap:2px;font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--txt);padding:9px 0}
.mm-sub{display:flex;flex-direction:column;gap:4px}
.mm-sub a{display:flex;flex-direction:column;gap:2px;font-size:19px;font-weight:600;color:var(--txt);padding:9px 0}
.mm-sub a small,.mm-link small{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.mm-sub a:active,.mm-link:active{color:var(--gold-2)}
.mm-cta{margin-top:30px}
.mm-cta .btn{width:100%;justify-content:center;font-size:16px;padding:18px}

/* Umschaltpunkt */
@media(max-width:1160px){
  .nav-links{display:none}
  .nav-actions > .btn{display:none}      /* Header-CTA wandert ins Menü */
  .nav-burger{display:flex}
}
@media(min-width:1025px){
  .mobile-menu{display:none}
}
/* Schmale Screens: nur die Logo-Marke, Schriftzug einblenden würde Platz rauben */
@media(max-width:560px){
  .logo{font-size:0;gap:0}
  .nav-actions{gap:10px}
  .wrap.nav{padding-left:20px;padding-right:20px}
}