/* ═══════════════════════════════════════════════════════════════════
   MineBotHost — Landing „The Desk"  (komplettes Redesign)
   Richtung: Trading-/Ops-Terminal in Minecraft-Material.
   Emerald = Geld/Live/Up · JetBrains Mono = Daten · Space Grotesk = Display.
   Eigenständiges Stylesheet – Dashboard/Admin nutzen weiter style.css.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#060809; --bg2:#080b0d; --panel:#0b0f12; --panel2:#0f1418;
  --line:#1a2127; --line2:#28323a; --grid:#0f171b;
  --ink:#eef3f1; --muted:#a6b2ac; --faint:#8b978f;
  --em:#31e07f; --em-deep:#12b866; --em-dim:#1f5f43;   /* Minecraft-emerald = Geld */
  --cy:#4bc4ff; --amber:#ffc24b; --red:#ff6a6a; --discord:#5865F2;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --body:'Inter',system-ui,sans-serif;
  --maxw:1200px; --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em;
  background-image:radial-gradient(720px 380px at 84% -12%, #31e07f14, transparent 60%);}
/* leiser Terminal-Raster-Hintergrund */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% -8%, #000 0%, transparent 62%);
  mask-image:radial-gradient(circle at 50% -8%, #000 0%, transparent 62%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
::selection{background:#31e07f33;color:#fff}
:focus-visible{outline:2px solid var(--em);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.ic{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.16em;flex:none;overflow:visible}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border:0;white-space:nowrap;
  font-family:var(--mono);font-weight:600;font-size:.9rem;letter-spacing:-.01em;padding:.8rem 1.25rem;
  border-radius:11px;min-height:46px;background:var(--em);color:#04140b;
  box-shadow:0 0 0 1px #31e07f55,0 10px 30px -14px #31e07f;transition:transform .14s,box-shadow .14s,filter .14s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 0 0 1px #31e07f99,0 14px 34px -12px #31e07f}
.btn:active{transform:translateY(0)}
.btn.discord{background:var(--discord);color:#fff;box-shadow:0 10px 30px -16px var(--discord)}
.btn.discord:hover{filter:brightness(1.08)}
.btn.ghost{background:#ffffff08;color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{background:#ffffff12;border-color:var(--em)}
.btn.sm{min-height:42px;padding:.6rem 1.05rem;font-size:.82rem}

/* ── Nav ── */
.term-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:#060809cc;border-bottom:1px solid var(--line)}
.term-nav .inner{display:flex;align-items:center;gap:1.3rem;height:62px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.brand .logo{width:30px;height:30px;filter:drop-shadow(0 3px 8px #31e07f4d)}
.brand b{color:var(--em)}
.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.32rem .72rem}
.status .led{width:7px;height:7px;border-radius:50%;background:var(--em);box-shadow:0 0 9px var(--em);animation:pulse 1.9s ease-in-out infinite}
.nav-links{display:flex;gap:1.5rem;margin-left:.4rem}
.nav-links a{font-family:var(--mono);font-size:.8rem;color:var(--muted);transition:color .14s}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.7rem}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:1.5rem;cursor:pointer;line-height:1}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Markt-Tape (Ticker) ── */
.tape{border-bottom:1px solid var(--line);background:#070a0c;overflow:hidden;position:relative}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.tape::before{left:0;background:linear-gradient(90deg,#070a0c,transparent)}
.tape::after{right:0;background:linear-gradient(270deg,#070a0c,transparent)}
.tape-track{display:flex;align-items:center;gap:2.2rem;width:max-content;white-space:nowrap;
  padding:.5rem 0;font-family:var(--mono);font-size:.74rem;color:var(--muted);animation:tape 52s linear infinite}
.tape:hover .tape-track{animation-play-state:paused}
.tk{display:inline-flex;align-items:center;gap:.5rem}
.tk .ic{width:.9em;height:.9em;color:var(--em)}
.tk b{color:var(--em);font-weight:600}.tk .who{color:var(--faint)}.tk .sep{color:var(--line2)}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Hero ── */
.hero{padding:60px 0 46px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:3rem;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.74rem;color:var(--em);
  border:1px solid var(--em-dim);background:#31e07f10;border-radius:999px;padding:.33rem .72rem}
.kicker::before{content:"//";color:var(--em-deep);font-weight:700}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:600;margin:1.15rem 0 0;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--em)}
.lede{font-family:var(--body);color:var(--muted);font-size:clamp(1rem,1.35vw,1.12rem);max-width:33em;margin:1.2rem 0 0}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.microstats{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1.7rem 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.microstats li{display:inline-flex;align-items:center;gap:.5rem}
.microstats b{color:var(--ink);font-weight:600}
.microstats .ic{color:var(--em);width:.95em;height:.95em}

/* ── Hero-Terminal (Signature) ── */
.term{background:linear-gradient(180deg,#0a0e11,#080b0d);border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 1px #ffffff06,0 42px 84px -52px #000,0 0 70px -34px #31e07f40}
.term-head{display:flex;align-items:center;gap:.5rem;padding:.66rem .9rem;border-bottom:1px solid var(--line);background:#0c1114}
.term-head .dots{display:flex;gap:.38rem}.term-head .dots i{width:10px;height:10px;border-radius:50%;background:#2a343b}
.term-head .name{font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-left:.35rem}
.term-head .live{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.68rem;color:var(--em)}
.term-head .live .ic{width:.85em;height:.85em}
.term-pnl{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.1rem 1.1rem .5rem}
.term-pnl .lbl{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;color:var(--faint)}
.term-pnl .amt{display:block;font-family:var(--disp);font-weight:700;font-size:2.35rem;line-height:1;color:var(--em);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:0 0 26px #31e07f4d;margin-top:.35rem}
.term-pnl .delta{font-family:var(--mono);font-size:.72rem;color:var(--em);display:inline-flex;align-items:center;gap:.3rem}
.term-pnl .delta .ic{width:.85em;height:.85em}
/* Voxel-Chart */
.term-chart{padding:.35rem 1.1rem .3rem}
.chart{display:flex;align-items:flex-end;gap:3px;height:86px}
.chart .bar{flex:1;min-height:4px;height:20%;border-radius:2px 2px 0 0;
  background-color:var(--em-deep);
  background-image:linear-gradient(180deg,var(--em),var(--em-deep)),repeating-linear-gradient(0deg,#0000 0 6px,#0a0d0fcc 6px 8px);
  background-blend-mode:normal;transition:height .55s cubic-bezier(.2,.8,.2,1);opacity:.82}
.chart .bar:last-child{opacity:1;box-shadow:0 0 12px -3px var(--em)}
.chart-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;color:var(--faint);margin-top:.35rem}
/* Live-Feed */
.term-feed{padding:.5rem 1.1rem 1rem;font-family:var(--mono);font-size:.76rem;line-height:1.75;color:#c3cfc9;
  border-top:1px solid var(--line);margin-top:.45rem}
.term-feed .ln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-feed .t{color:var(--faint)}.term-feed .tag{color:var(--cy)}.term-feed .ok{color:var(--em)}.term-feed .mon{color:var(--em)}
.term-feed .cur{display:inline-block;width:7px;height:1em;background:var(--em);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
.term-feed .ln.pop{animation:lineIn .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes blink{50%{opacity:0}}
@keyframes lineIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Markt-Datenzeile ── */
.market{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#070a0c}
.market .inner{display:flex;flex-wrap:wrap}
.mk{flex:1 1 190px;padding:1.2rem 1.5rem;border-right:1px solid var(--line)}
.mk:last-child{border-right:0}
.mk .k{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;color:var(--faint)}
.mk .v{font-family:var(--disp);font-weight:600;font-size:1.4rem;color:var(--ink);margin-top:.3rem;font-variant-numeric:tabular-nums}
.mk .v .u{color:var(--em)}

/* ── Sections ── */
.section{padding:72px 0}
.sec-head{max-width:640px;margin:0 0 34px}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.sec-head p{color:var(--muted);margin-top:.7rem}

/* ── Module (Bento) ── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.mod{grid-column:span 2;background:linear-gradient(180deg,#0b0f12,#090c0e);border:1px solid var(--line);border-radius:14px;
  padding:1.5rem;display:flex;flex-direction:column;gap:.65rem;position:relative;overflow:hidden;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.mod:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 26px 54px -36px #000}
.mod .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--em);
  background:#31e07f12;border:1px solid #31e07f2b}
.mod .ico .ic{width:20px;height:20px}
.mod h3{font-family:var(--disp);font-weight:600;font-size:1.1rem;margin-top:.3rem}
.mod p{color:var(--muted);font-size:.92rem;margin:0}
.mod.feat{grid-column:span 4;background:linear-gradient(160deg,#0c1c14,#081310);border-color:#31e07f3a}
.mod.feat .amt{font-family:var(--disp);font-weight:700;font-size:1.6rem;color:var(--em);font-variant-numeric:tabular-nums;text-shadow:0 0 22px #31e07f40}
.mod.full{grid-column:span 6;flex-direction:row;align-items:center;gap:1.3rem}
.mod.full .ico{flex:none}

/* ── Ablauf (Boot-Sequenz) ── */
.flow{display:grid;gap:.7rem;max-width:820px}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:1.25rem 1.4rem;background:#0a0e11;border:1px solid var(--line);border-radius:12px}
.step .no{font-family:var(--mono);color:var(--em);font-size:.85rem;font-weight:600}
.step .no::before{content:"> "}
.step h3{font-family:var(--disp);font-weight:600;font-size:1.05rem}
.step p{color:var(--muted);font-size:.92rem;margin:.32rem 0 0}

/* ── FAQ ── */
.faq{max-width:820px;display:grid;gap:.5rem}
.faq details{background:#0a0e11;border:1px solid var(--line);border-radius:11px;padding:1rem 1.25rem}
.faq details[open]{border-color:var(--line2)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--disp);font-weight:500;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--em);font-family:var(--mono);font-size:1.1rem}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--muted);margin:.7rem 0 0;font-size:.93rem}

/* ── CTA (Command-Prompt) ── */
.cta-final{padding:16px 0 80px}
.cta-box{border:1px solid var(--line2);border-radius:16px;padding:2.8rem 2rem;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(130% 150% at 50% -30%, #31e07f16, transparent 58%),#0a0e11}
.cmdline{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.85rem;color:var(--muted);
  background:#060809;border:1px solid var(--line);border-radius:10px;padding:.6rem 1rem;margin-bottom:1.4rem}
.cmdline .p{color:var(--em)}
.cmdline .cur{display:inline-block;width:7px;height:1.05em;background:var(--em);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
.cta-box h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.cta-box p{color:var(--muted);margin:.7rem auto 1.5rem;max-width:46ch}

/* ── Footer ── */
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--faint);font-family:var(--mono);font-size:.8rem}
.foot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
.foot .brand{font-size:1rem}
.foot-links{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot-links a{color:var(--muted)}.foot-links a:hover{color:var(--ink)}

/* ── Sprach-Umschalter ── */
.langfloat{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;gap:8px;padding:7px;border-radius:999px;
  background:#0a0e11ee;border:1px solid var(--line2);box-shadow:0 16px 40px -12px #000;backdrop-filter:blur(12px)}
.langfloat button{width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:pointer;overflow:hidden;background:none;
  display:block;opacity:.5;filter:grayscale(.5);transition:opacity .2s,filter .2s,box-shadow .2s;box-shadow:0 0 0 1px #ffffff1f}
.langfloat button:hover{opacity:1;filter:none}
.langfloat button.active{opacity:1;filter:none;box-shadow:0 0 0 2px var(--em)}
.langfloat img{width:100%;height:100%;object-fit:cover;pointer-events:none}

/* ── Responsive ── */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .nav-links,.status{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;
    background:var(--bg2);padding:1rem 24px;border-bottom:1px solid var(--line);margin:0}
  .bento{grid-template-columns:repeat(2,1fr)}
  .mod,.mod.feat,.mod.full{grid-column:span 1}
  .mod.full{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .hero{padding:44px 0 34px}
  .term-pnl .amt{font-size:1.95rem}
  .langfloat{right:14px;bottom:14px}
  /* Nav-Login auf Schmal → nur Icon (kein Umbruch, keine Brand-Überlappung) */
  #loginBtn span:last-child{display:none}
  #loginBtn{width:44px;padding:.6rem;gap:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}