/* ============================================================================
   NATRADING BY ADI — gemeinsames Stylesheet
   © 2026 natradingbyadi. Alle Rechte vorbehalten.
   ========================================================================== */

:root{
  color-scheme:dark;
  --bg:#080a0c; --karte:#0c0e11; --karte2:#101317;
  --linie:#1b1f25; --linie2:#252b32;
  --gruen:#33ff33; --gruenD:#1eaa1e; --grau:#9598a1;
  --txt:#c8ccd4; --mut:#7b818c;
  --sans:'Rajdhani',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Orbitron','Rajdhani',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg);overflow-x:hidden}
body{font-family:var(--sans);color:var(--txt);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--gruen);color:#000}
*{scrollbar-width:thin;scrollbar-color:#1f2a20 var(--bg)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1f2a20;border-radius:5px}
a{color:var(--gruen);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.eng{max-width:760px;margin:0 auto;padding:0 22px}

/* ═══ NAVIGATION ═══ */
nav.top{position:sticky;top:0;z-index:60;background:rgba(8,10,12,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:34px;height:34px;flex:0 0 34px}
.logo b{font-family:var(--disp);font-size:14px;font-weight:900;letter-spacing:.05em;
  color:var(--grau);text-transform:uppercase;white-space:nowrap}
.logo b i{color:var(--gruen);font-style:normal}
.logo b u{font-family:var(--sans);font-weight:300;font-size:8.5px;color:#9598a155;
  letter-spacing:.28em;padding:0 4px;text-decoration:none;vertical-align:middle}
.logo svg{width:38px;height:38px;flex:0 0 38px}
.menu{display:flex;gap:24px;align-items:center}
.menu a{color:var(--mut);font-size:16.5px;font-weight:500;white-space:nowrap}
.menu a:hover{color:var(--txt)}
.menu a.hier{color:var(--gruen);font-weight:600}
.knopf{background:var(--gruen);color:#000;font-family:var(--disp);font-weight:700;
  font-size:12px;letter-spacing:.12em;padding:11px 20px;border-radius:6px;
  text-transform:uppercase;white-space:nowrap;display:inline-block;border:1px solid var(--gruen)}
.knopf:hover{background:#5cff5c;border-color:#5cff5c}
.knopf.rand{background:none;color:var(--gruen);border-color:var(--gruenD)}
.knopf.rand:hover{background:#0f1c0d}
.burger{display:none;background:none;border:1px solid var(--linie2);border-radius:7px;
  width:42px;height:42px;color:var(--gruen);font-size:19px;cursor:pointer}
@media (max-width:900px){
  .burger{display:block}
  .menu{position:fixed;inset:68px 0 auto 0;background:var(--karte);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 22px 22px;border-bottom:1px solid var(--linie);
    display:none}
  .menu.offen{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--linie);font-size:18px}
  .menu .knopf{margin-top:14px;text-align:center;border-bottom:none}
}

/* ═══ HERO / KOPF ═══ */
.hero{padding:78px 0 66px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(51,255,51,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(51,255,51,.022) 1px,transparent 1px);
  background-size:34px 34px}
.hero::after{content:'';position:absolute;width:660px;height:340px;top:6%;left:50%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse,#33ff3310 0%,transparent 68%)}
.hero>*{position:relative;z-index:1}
.seitenkopf{padding:56px 0 40px;border-bottom:1px solid var(--linie);text-align:center}
.coin{width:104px;height:104px;margin:0 auto 26px;position:relative}
.coin .ring{width:100%;height:100%;position:absolute;top:0;left:0;animation:sp 22s linear infinite}
@keyframes sp{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.coin .face{position:absolute;inset:10px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 38% 35%,#1a1d22,#0c0e11);
  box-shadow:inset 0 0 14px rgba(0,0,0,.6)}
.eyebrow{display:inline-block;border:1px solid var(--gruenD);border-radius:4px;
  padding:7px 17px;font-size:11px;letter-spacing:.24em;color:var(--gruen);
  text-transform:uppercase;font-weight:600;margin-bottom:22px}
h1{font-family:var(--disp);font-size:clamp(28px,5.2vw,50px);font-weight:900;
  line-height:1.12;color:#fff}
h1 span{color:var(--gruen)}
.sub{color:var(--mut);font-size:clamp(17px,2.1vw,20px);max-width:60ch;margin:20px auto 0}
.motto{margin-top:26px;font-size:13px;letter-spacing:.2em;color:var(--gruen);font-weight:600}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.mini{margin-top:16px;font-size:15px;color:#5d636d}

/* ═══ ABSCHNITTE ═══ */
section{padding:70px 0;border-top:1px solid var(--linie)}
section:first-of-type{border-top:none}
.kopf{text-align:center;margin-bottom:42px}
.kicker{font-family:var(--disp);font-size:11px;letter-spacing:.22em;color:var(--gruen);
  text-transform:uppercase;font-weight:700}
h2{font-family:var(--disp);font-size:clamp(22px,3.4vw,32px);font-weight:900;color:#fff;
  margin-top:12px;line-height:1.2}
.kopf p{color:var(--mut);font-size:18px;max-width:58ch;margin:14px auto 0}
h3.zwisch{font-family:var(--disp);font-size:17px;color:#e6ebe6;font-weight:700;
  margin:34px 0 10px}
.fliess{max-width:70ch;font-size:18px}
.fliess+.fliess{margin-top:14px}
.fliess b{color:#e6ebe6}

/* ═══ BAUSTEINE ═══ */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:15px}
.karte{border:1px solid var(--linie);border-radius:11px;background:var(--karte);padding:26px}
.karte .nr{font-family:var(--disp);font-size:12px;letter-spacing:.16em;color:var(--gruenD);
  font-weight:700}
.karte h3{font-size:20px;font-weight:600;color:#e6ebe6;margin:11px 0 7px}
.karte p{font-size:16.5px;color:var(--mut);line-height:1.55}
.karte p b{color:var(--txt)}

.gegen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.gegen{grid-template-columns:1fr}}
.seite{border:1px solid var(--linie);border-radius:11px;background:var(--karte);padding:26px}
.seite.gut{border-color:#2a6b24;background:#0b120a}
.seite h3{font-family:var(--disp);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px;color:var(--mut)}
.seite.gut h3{color:var(--gruen)}
.seite li{list-style:none;padding:8px 0 8px 26px;position:relative;font-size:16.5px}
.seite li::before{content:'\2715';position:absolute;left:0;color:#6a6e78;font-size:14px}
.seite.gut li::before{content:'\2713';color:var(--gruen)}

.bildbox{border:1px solid var(--linie2);border-radius:11px;background:var(--karte);
  padding:14px;margin-top:26px}
.bildbox img{border-radius:6px}
.platzhalter{aspect-ratio:16/9;background:#0a0c0f;border:1px dashed #2f3740;border-radius:6px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  color:#4e545e;font-family:ui-monospace,monospace;font-size:14px;line-height:1.7}
.bildu{text-align:center;color:var(--mut);font-size:15px;margin-top:12px}

.gew{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #12161a}
.gew:last-child{border:none}
.gew .nm{flex:0 0 210px;font-size:16.5px}
.gew .bar{flex:1;height:8px;background:#161a1e;border-radius:4px;overflow:hidden}
.gew .bar i{display:block;height:100%;background:var(--gruen);border-radius:4px}
.gew .vl{flex:0 0 36px;text-align:right;font-family:var(--disp);font-size:14px;
  font-weight:700;color:var(--gruen)}
@media (max-width:560px){.gew .nm{flex:0 0 128px;font-size:15px}}

/* ═══ PREISE ═══ */
.testbox{border:1px solid var(--gruen);border-radius:12px;background:#0b120a;
  padding:30px;text-align:center;margin-bottom:18px}
.testbox .gross{font-family:var(--disp);font-size:clamp(22px,4vw,30px);font-weight:900;
  color:var(--gruen)}
.testbox p{font-size:17px;margin-top:10px;max-width:58ch;margin-left:auto;margin-right:auto}
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:15px;
  align-items:start}
.plan{border:1px solid var(--linie);border-radius:12px;background:var(--karte);
  padding:30px 26px;text-align:center;position:relative}
.plan.top{border-color:var(--gruen);background:#0b120a}
.plan .band{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--gruen);color:#000;font-family:var(--disp);font-size:10px;
  letter-spacing:.13em;font-weight:700;padding:4px 13px;border-radius:4px;white-space:nowrap}
.plan .dauer{font-family:var(--disp);font-size:12px;letter-spacing:.16em;color:var(--mut);
  text-transform:uppercase;font-weight:700}
.plan .preis{font-family:var(--disp);font-size:40px;font-weight:900;color:var(--gruen);
  line-height:1;margin:16px 0 4px}
.plan .preis small{font-size:17px;color:var(--mut);font-weight:400}
.plan .pm{font-size:15.5px;color:var(--mut)}
.plan .spar{display:inline-block;margin-top:11px;font-size:14px;color:#8fe36a;
  border:1px solid #2a6b24;background:#0f1c0d;border-radius:4px;padding:3px 11px}
.plan .knopf{margin-top:22px;width:100%}
.plan .fuss{margin-top:12px;font-size:14px;color:#565c66}

/* ═══ HINWEIS / FAQ ═══ */
.hinweis{border:1px solid var(--linie2);border-left:2px solid var(--gruen);
  border-radius:0 10px 10px 0;background:var(--karte);padding:18px 22px;margin-top:22px}
.hinweis b.t{font-family:var(--disp);font-size:11px;letter-spacing:.14em;color:var(--gruen);
  display:block;margin-bottom:7px;text-transform:uppercase}
.hinweis p{font-size:16.5px}
.hinweis p+p{margin-top:9px}
.faq{border:1px solid var(--linie);border-radius:10px;background:var(--karte);margin-bottom:10px}
.faq summary{padding:18px 22px;cursor:pointer;font-size:18px;font-weight:600;color:#e6ebe6;
  list-style:none;display:flex;gap:13px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--gruen);font-family:var(--disp);font-weight:900;
  flex:0 0 13px}
.faq[open] summary::before{content:'\2212'}
.faq .a{padding:0 22px 20px 48px;font-size:17px}
.faq .a p+p{margin-top:10px}

.zitat{border-left:2px solid var(--gruenD);padding:6px 0 6px 22px;margin:26px 0;
  font-size:20px;color:#dde3e8;font-weight:500;font-style:italic;max-width:62ch}

/* ═══ SCHLUSS & FUSS ═══ */
.schluss{text-align:center;background:radial-gradient(ellipse at 50% 0%,#33ff330e 0%,transparent 62%)}
footer{border-top:1px solid var(--linie);padding:44px 0 54px}
.fspalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;
  margin-bottom:30px}
.fspalten h4{font-family:var(--disp);font-size:10.5px;letter-spacing:.16em;color:var(--gruen);
  text-transform:uppercase;margin-bottom:12px}
.fspalten a,.fspalten span{display:block;color:var(--mut);font-size:16px;padding:4px 0}
.fspalten a:hover{color:var(--gruen)}
.risiko{padding-top:22px;border-top:1px solid var(--linie);font-size:13.5px;color:#565c66;
  line-height:1.65;max-width:84ch}
.risiko b{color:#7b818c}
.copy{margin-top:22px;font-size:11px;letter-spacing:.18em;color:#3f4550;text-align:center}

/* ═══ RECHTSTEXTE ═══ */
.recht h2{font-size:20px;margin:34px 0 10px;color:var(--gruen);letter-spacing:.02em}
.recht p{max-width:74ch;font-size:17px;margin-bottom:12px}
.todo{border:1px dashed #7a6320;background:#14110a;border-radius:8px;padding:16px 20px;
  color:#d8c9a4;font-size:16px;margin:16px 0}
.todo b{color:#ffc46b;display:block;margin-bottom:6px;font-family:var(--disp);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}

/* ═══ ROADMAP ═══ */
.stufe{border:1px solid var(--linie);border-radius:12px;background:var(--karte);
  padding:26px 28px;margin-bottom:14px;position:relative}
.stufe.fertig{border-color:#2a6b24;background:#0b120a}
.stufe.arbeit{border-color:#5c4318;background:#12100a}
.stufe .status{display:inline-block;font-family:var(--disp);font-size:10px;letter-spacing:.14em;
  font-weight:700;text-transform:uppercase;padding:4px 11px;border-radius:4px;border:1px solid;
  margin-bottom:13px}
.st-fertig{color:var(--gruen);border-color:#2a6b24;background:#0f1c0d}
.st-arbeit{color:#ffc46b;border-color:#5c4318;background:#1c1408}
.st-plan{color:#7fd8ff;border-color:#1d4356;background:#0b1a20}
.st-idee{color:var(--mut);border-color:var(--linie2);background:var(--karte2)}
.stufe h3{font-family:var(--disp);font-size:21px;color:#e6ebe6;font-weight:700;margin-bottom:9px}
.stufe p{font-size:17px;max-width:70ch}
.stufe p+p{margin-top:10px}
.stufe .meta{margin-top:14px;padding-top:13px;border-top:1px solid var(--linie);
  font-size:15px;color:var(--mut)}
.stufe .meta b{color:var(--txt)}
.balken{height:7px;background:#161a1e;border-radius:4px;overflow:hidden;margin-top:14px}
.balken i{display:block;height:100%;background:var(--gruen);border-radius:4px}
.legende{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}

/* ═══ UNTERNAVIGATION ═══ */
.subnav{background:var(--karte);border-bottom:1px solid var(--linie);position:sticky;top:68px;z-index:40}
.subnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:52px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.krume{font-size:14px;color:var(--mut);white-space:nowrap}
.krume a{color:var(--mut)}.krume a:hover{color:var(--gruen)}
.sublinks{display:flex;gap:6px;flex-wrap:wrap}
.sublinks a{font-size:15.5px;color:var(--mut);padding:6px 13px;border-radius:6px;
  border:1px solid transparent;white-space:nowrap}
.sublinks a:hover{background:var(--karte2);color:var(--txt)}
.sublinks a.hier{color:var(--gruen);border-color:#2a6b24;background:#0f1c0d;font-weight:600}
@media (max-width:900px){.subnav{top:0}}

/* ═══ GROSSE KARTE ═══ */
.grossekarte{display:block;border:1px solid #2a6b24;border-radius:12px;background:#0b120a;
  padding:34px;color:var(--txt)}
.grossekarte:hover{border-color:var(--gruen)}
.grossekarte h3{font-family:var(--disp);font-size:28px;color:#e6ebe6;font-weight:900;
  margin:10px 0 12px}
.grossekarte p{font-size:18px;max-width:66ch;color:var(--txt)}
.grossekarte .nr{font-family:var(--disp);font-size:12px;letter-spacing:.16em;font-weight:700}
.grossekarte .pfeil{display:inline-block;margin-top:20px;color:var(--gruen);font-weight:600;
  font-size:17px}

/* ═══ SOCIAL ═══ */
.social{display:flex;flex-direction:column;gap:2px}
.social a{display:flex!important;align-items:center;gap:10px;padding:7px 0;color:var(--mut);
  font-size:16px}
.social a:hover{color:var(--gruen)}
.social svg{width:19px;height:19px;flex:0 0 19px}
.socialreihe{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.socialreihe a{display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:8px;
  border:1px solid var(--linie2);background:var(--karte);color:var(--txt);font-size:16.5px;
  font-weight:500}
.socialreihe a:hover{border-color:var(--gruenD);color:var(--gruen)}
.socialreihe svg{width:20px;height:20px}

/* ═══ LOGOKARTE (Original aus natradingbyadi-logo-v3) ═══ */
.logokarte{position:relative;background:#0c0e11;padding:46px 66px;display:inline-flex;
  flex-direction:column;align-items:center;gap:26px;overflow:hidden;margin-bottom:30px}
.logokarte::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(226,255,0,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(226,255,0,.025) 1px,transparent 1px);
  background-size:28px 28px}
.lk-ecke{position:absolute;width:18px;height:18px}
.lk-tl{top:0;left:0;border-top:2px solid #33ff33;border-left:2px solid #33ff33}
.lk-tr{top:0;right:0;border-top:2px solid #33ff33;border-right:2px solid #33ff33}
.lk-bl{bottom:0;left:0;border-bottom:2px solid #9598a155;border-left:2px solid #9598a155}
.lk-br{bottom:0;right:0;border-bottom:2px solid #9598a155;border-right:2px solid #9598a155}
.lk-glow{position:absolute;width:280px;height:160px;top:50%;left:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse,#33ff3312 0%,transparent 65%)}
.lk-text{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.lk-marke{font-family:var(--disp);font-weight:900;font-size:30px;letter-spacing:.06em;
  line-height:1;color:#9598a1;text-transform:uppercase}
.lk-marke .hl{color:#33ff33}
.lk-marke .sep{font-family:var(--sans);font-weight:300;font-size:13px;color:#9598a155;
  letter-spacing:.3em;padding:0 5px;vertical-align:middle}
.lk-linie{width:100%;height:1px;
  background:linear-gradient(90deg,transparent,#9598a130,#33ff3350,#9598a130,transparent)}
.lk-unten{display:flex;align-items:center;gap:12px}
.lk-tag{font-size:10px;letter-spacing:4px;color:#9598a180;text-transform:uppercase}
.lk-punkt{width:6px;height:6px;background:#33ff33;border-radius:50%;
  box-shadow:0 0 6px #33ff33aa;animation:blinken 2.4s ease-in-out infinite}
@keyframes blinken{0%,100%{opacity:1}50%{opacity:.2}}
.logokarte .coin{margin-bottom:0}
@media (max-width:560px){
  .logokarte{padding:34px 26px;gap:20px}
  .lk-marke{font-size:22px}
}


/* ═══ BILDER ═══ */
.bildbox img{width:100%;border-radius:6px;display:block}
.portraitbox{border:1px solid var(--linie2);border-radius:11px;background:var(--karte);
  padding:14px;margin-bottom:34px;max-width:460px}
.portraitbox img{width:100%;border-radius:7px;display:block}