/* ==========================================================
   NerdBoost — base.css
   GEMEINSAME Bausteine ALLER Seiten: Farben, Grundgeruest,
   Kopfzeile, Navigation, Aufklappmenue, Skip-Link.

   WICHTIG: Diese Datei ist die einzige Quelle fuer den Seitenkopf.
   Aenderungen an Kopfzeile/Navigation NUR hier vornehmen —
   frueher lag das doppelt (style.css + index.html) und lief auseinander.

   Seitenspezifisch bleiben: Typografie, Hero, Buttons, Karten
   -> assets/style.css (Unterseiten) bzw. der <style>-Block in index.html
   ========================================================== */

:root{
  --green:#2ee06a; --green-dim:#1fa54d; --green-dark:#1fa54d; --green-soft:rgba(46,224,106,.12);
  --bg:#15181d; --bg2:#1b1f25; --bg3:#0f1216;
  --text:#f2f4f7; --muted:#c4ccd6; --faint:#8b939f;   /* heller, damit der Fließtext
     auf dem grüneren Grund seinen Kontrast behält */
  /* Flächen halbtransparent: sonst decken die Kaesten den festen Hintergrund zu
     und es wirkt beim Scrollen, als würde er sich mitbewegen */
  --flaeche:rgba(27,31,37,.74); --flaeche-tief:rgba(15,18,22,.7);
  --line:rgba(255,255,255,.09);          /* neutrale Trennlinie */
  --line-green:rgba(46,224,106,.28);     /* gruener Rahmen, kraeftig */
  --line-brand:rgba(46,224,106,.22);     /* gruener Rahmen, dezent */
  --maxw:1120px;
  --r:16px;
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit}

/* sichtbarer Fokus fuer Tastatur-Navigation */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--green); outline-offset:3px; border-radius:6px;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.accent{color:var(--green)}
.center{text-align:center}

.skip{position:absolute; left:-9999px; top:0; background:var(--green); color:#07130b;
  padding:12px 20px; font-weight:700; text-decoration:none; z-index:100; border-radius:0 0 10px 0}
.skip:focus{left:0}

/* Hinweis auf ein Ziel, das es noch nicht gibt (z.B. GitHub vor dem Release) */
.soon-link{display:block; color:var(--muted); padding:3px 0; opacity:.65; cursor:default}
.soon-link em{font-style:normal; font-size:12.5px; opacity:.85}

/* Platzhalter fuer Werte, die erst mit dem Release feststehen */
.wartet{color:var(--muted); font-style:italic; opacity:.8}

/* ===== Fester Seitenhintergrund =====
   Raster und gruener Schein liegen fest im Fenster (position:fixed) und
   scrollen NICHT mit: der Inhalt wandert darueber hinweg, der Hintergrund
   bleibt stehen. Beides haengt am <body>, damit es auf jeder Seite gleich
   sitzt — frueher steckte es im Hero und war nach dem ersten Scrollen weg. */
body::before,body::after{content:''; position:fixed; inset:0; pointer-events:none}
body::before{                      /* gruener Schein */
  z-index:-2;
  background:radial-gradient(125% 90% at 50% -6%,
    rgba(46,224,106,.35) 0%,
    rgba(46,224,106,.185) 36%,
    rgba(46,224,106,.075) 60%,
    rgba(46,224,106,.022) 78%,
    transparent 92%);
}
body::after{                       /* feines Raster, gibt Tiefe ohne Bild */
  z-index:-1; opacity:.62;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 18%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 18%, transparent 78%);
}

/* ===== Kopfzeile / Navigation ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(21,24,29,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header .wrap{display:flex; align-items:center; gap:16px; height:66px}
.brand{display:flex; align-items:center; gap:0; font-weight:800; font-size:21px;
  text-decoration:none; letter-spacing:-.02em; white-space:nowrap; margin-right:auto}
.brand svg{margin-right:11px}   /* Abstand nur zwischen Icon und Schriftzug, nicht zwischen 'nerd' und 'boost' */
.brand .b{color:var(--green)}
nav.main{display:flex; align-items:center; gap:24px}
nav.main a{text-decoration:none; color:var(--muted); font-size:15px; font-weight:600; transition:color .15s}
nav.main a:hover,nav.main a.active{color:var(--text)}
nav.main a.active{border-bottom:2px solid var(--green); padding-bottom:2px}
.burger{display:none; background:none; border:0; color:var(--text); cursor:pointer; padding:8px; margin-left:auto}
.burger svg{width:26px; height:26px}
.nav-cta{
  display:inline-block; padding:9px 18px; border-radius:30px;
  background:var(--green)!important; color:#07130b!important;   /* !important noetig: nav.main a{color:var(--muted)} ist spezifischer */
  font-weight:700; font-size:14px; line-height:1.55;   /* fest: sonst erbt der Knopf die
     Zeilenhoehe der jeweiligen Seite (1.55 vs 1.6 auf der Startseite) und wird dort hoeher */
  text-decoration:none; white-space:nowrap; border:0!important;
  transition:background .15s, transform .15s;
}
.nav-cta:hover{background:#4ceb84; transform:translateY(-1px)}
/* Auf der Download-Seite traegt der Knopf zusaetzlich .active. Ohne diese Regel
   greift nav.main a.active{padding-bottom:2px} und macht ihn 7px flacher als
   auf allen anderen Seiten. Spezifitaet muss darum >= nav.main a.active sein. */
nav.main a.nav-cta, nav.main a.nav-cta.active{padding:9px 18px; border-bottom:0}

@media (max-width:900px){
  nav.main{position:fixed; inset:66px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#12151a; border-bottom:1px solid var(--line); padding:8px 0;
    transform:translateY(-150%); transition:transform .25s ease; z-index:40}
  nav.main.open{transform:translateY(0)}
  nav.main a{padding:14px 24px; border-top:1px solid rgba(255,255,255,.05); font-size:16px}
  nav.main a.active{border-bottom:0; color:var(--green); padding-bottom:14px}   /* padding-bottom:2px der Desktop-Regel zuruecksetzen */
  nav.main a.nav-cta, nav.main a.nav-cta.active{margin:10px 24px; padding:9px 18px;
    text-align:center; justify-content:center; border-bottom:0}
  .burger{display:block}
}

/* ===== Aufklappmenue Boost-Stick ===== */
.dropdown{position:relative}
.dd-toggle{display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0;
  color:var(--muted); font-family:inherit; font-size:15px; font-weight:600; cursor:pointer}
.dd-toggle:hover,.dd-toggle[aria-expanded="true"],.dropdown.aktiv .dd-toggle{color:var(--text)}
.dropdown.aktiv .dd-toggle{border-bottom:2px solid var(--green); padding-bottom:2px}
.dd-toggle .chev{width:14px; height:14px; flex:none; transition:transform .18s}
.dd-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dd-menu{display:none; position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%);
  min-width:212px; background:#12151a; border:1px solid rgba(255,255,255,.10); border-radius:12px;
  padding:8px; z-index:60; box-shadow:0 18px 40px rgba(0,0,0,.5)}
.dd-menu.offen{display:block}
nav.main .dd-menu a{display:block; padding:11px 14px; border:0; border-radius:8px;
  font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap}
nav.main .dd-menu a:hover{background:rgba(46,224,106,.10); color:var(--text)}
nav.main .dd-menu a.active{color:var(--green); border:0}

@media (max-width:900px){
  .dropdown{display:block; width:100%}
  .dd-toggle{width:100%; justify-content:space-between; padding:14px 24px; font-size:16px;
    border-top:1px solid rgba(255,255,255,.05)}
  .dropdown.aktiv .dd-toggle{border-bottom:0; padding-bottom:14px; color:var(--green)}
  .dd-menu{position:static; transform:none; min-width:0; border:0; border-radius:0;
    background:rgba(0,0,0,.28); padding:0; box-shadow:none}
  nav.main .dd-menu a{padding:12px 24px 12px 42px; font-size:15px; border-radius:0;
    border-top:1px solid rgba(255,255,255,.04)}
}