/* Grind Players - gemeinsames Aussehen aller Seiten.
   Dunkler, futuristischer Look: Schwarz-Grund, feines Taktik-Raster, gelber Flutlicht-Schein.
   Farben: Gelb #FFD400, Grund #0A0A0B. Schrift: Poppins.
   (Die alte helle Fassung liegt in grindplayers/werkzeug/alt-hell/) */
:root{
  color-scheme:dark;
  --gelb:#FFD400; --schwarz:#0A0A0B; --auf-gelb:#111111;
  --tinte:#F4F4F0; --karte:#131316; --feld:#0E0E11;
  --linie:#2A2A30; --grau:#A3A39C; --hell:#6F6F69;
  --schein:rgba(255,212,0,.55);
  --schrift:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rand:clamp(20px,5vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--schwarz);overflow-x:clip}
body{color:var(--tinte);font-family:var(--schrift);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative}

/* Hintergrund: Raster wie auf einer Taktiktafel, nach unten ausblendend ... */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 0%,#000 25%,transparent 80%);
          mask-image:radial-gradient(ellipse 90% 70% at 70% 0%,#000 25%,transparent 80%)}
/* ... und gelbes Flutlicht von oben rechts, schwach von unten links */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 85% -12%,rgba(255,212,0,.20),transparent 62%),
    radial-gradient(700px 420px at -8% 108%,rgba(255,212,0,.09),transparent 60%)}

a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
::selection{background:var(--gelb);color:var(--auf-gelb)}

/* Kopf */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--rand);max-width:1120px;margin:0 auto}
.kopf .marke img{height:54px;width:auto}
.kopf nav{display:flex;gap:22px;font-size:14px;font-weight:600}
.kopf nav a{text-decoration:none}
.kopf nav a:hover,.kopf nav a.da{box-shadow:inset 0 -3px 0 var(--gelb)}

main{max-width:1120px;margin:0 auto;padding:0 var(--rand)}

/* Knoepfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gelb);color:var(--auf-gelb);
  font:700 15px/1 var(--schrift);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  border:2px solid var(--gelb);border-radius:12px;padding:15px 22px;cursor:pointer;transition:transform .15s,box-shadow .2s}
.knopf:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(255,212,0,.18),0 12px 32px -10px var(--schein)}
.knopf:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.knopf.dunkel{background:var(--auf-gelb);color:#fff;border-color:var(--auf-gelb)}
.knopf.dunkel:hover{box-shadow:0 12px 28px -12px rgba(0,0,0,.6)}

.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gelb)}
.klein{font-size:13px;color:var(--grau)}
.klein a{color:var(--grau)}

/* Fuss */
.fuss{max-width:1120px;margin:72px auto 0;padding:28px var(--rand) 40px;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13px;color:var(--grau)}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--gelb)}
.fuss .links{display:flex;gap:18px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}