/* ======================================================================
   Artificial Invaders — gemeinsames Theme
   Farbsystem 1:1 aus dem Spiel-Wiki übernommen, erweitert um Site-Komponenten.
   ====================================================================== */
:root{
  /* Spiel-Palette (aus wiki.html) */
  --bg:#050e1a; --panel:#0d2140; --panel2:#0a1428; --line:#243966;
  --text:#f2f2da; --dim:#9e7767; --cyan:#25acf5; --gold:#e69b22; --xp:#94bf30;
  --c-gew:#807980; --c-sel:#1793e6; --c-epi:#773bbf; --c-myt:#f53141; --c-leg:#faa032; --c-spe:#5cb888;
  --lv1:#116061; --lv2:#243966; --lv3:#6e4250; --lv4:#852264; --lv5:#db4b16;
  --a:#29A637; --b:#DD2E34; --x:#0F74B3; --y:#F3B928;
  /* Abgeleitet */
  --cyan-soft:rgba(37,172,245,.14);
  --gold-soft:rgba(230,155,34,.12);
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --radius:12px;
  --maxw:1200px;
  --header-h:62px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.55;font-size:15px;min-height:100vh;
  display:flex;flex-direction:column;
}
img{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2}
.muted{color:var(--dim)}
.center{text-align:center}
.mono{font-family:"Consolas",ui-monospace,monospace}

/* Subtiler animierter Sternen-/Scanline-Hintergrund (passt zum Alien-Shooter) */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35) 0, transparent 2px),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.25) 0, transparent 2px),
    radial-gradient(1px 1px at 40% 80%, rgba(37,172,245,.4) 0, transparent 2px),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,.3) 0, transparent 2px),
    radial-gradient(1200px 600px at 50% -10%, rgba(37,172,245,.10), transparent 70%);
  background-repeat:repeat;background-size:520px 520px,420px 420px,640px 640px,360px 360px,100% 100%;
}

/* ---------- Top-Navigation ---------- */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--header-h);
  background:rgba(8,18,36,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  max-width:var(--maxw);margin:0 auto;height:100%;
  display:flex;align-items:center;gap:18px;padding:0 18px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:2px;
  color:var(--cyan);text-shadow:0 0 14px rgba(37,172,245,.45);font-size:1.05em;white-space:nowrap}
.brand img{width:26px;height:26px}
.brand:hover{text-decoration:none}
.navlinks{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.navlinks a{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:8px;
  color:var(--text);font-size:.92em;font-weight:600}
.navlinks a:hover{background:var(--panel);text-decoration:none}
.navlinks a.active{background:var(--cyan-soft);color:var(--cyan)}
.navlinks a img{width:17px;height:17px}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  color:var(--text);border-radius:8px;padding:7px 10px;font-size:1.1em;cursor:pointer}

/* ---------- Layout-Container ---------- */
main{flex:1 0 auto;width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:30px 18px}
.container.narrow{max-width:820px}

/* ---------- Hero ---------- */
.hero{position:relative;text-align:center;padding:74px 18px 60px;overflow:hidden;
  border-bottom:3px solid var(--cyan);
  background:linear-gradient(135deg,#0a1428,#102a52 65%,#13325f)}
.hero h1{margin:0;font-size:clamp(2.2em,6vw,4em);letter-spacing:4px;color:var(--cyan);
  text-shadow:0 0 26px rgba(37,172,245,.5)}
.hero .tagline{margin:14px auto 0;max-width:640px;color:var(--text);font-size:1.12em;opacity:.92}
.hero .sub{margin:8px 0 0;color:var(--dim);font-size:.9em}
.hero-icons{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-icons img{width:34px;height:34px;opacity:.9;filter:drop-shadow(0 0 6px rgba(37,172,245,.25))}
.hero .cta{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:9px;
  font-weight:700;font-size:.96em;cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;text-decoration:none}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-primary{background:var(--cyan);color:#04121f;box-shadow:0 6px 18px rgba(37,172,245,.32)}
.btn-primary:hover{box-shadow:0 9px 24px rgba(37,172,245,.45)}
.btn-gold{background:var(--gold);color:#1a1205;box-shadow:0 6px 18px rgba(230,155,34,.3)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:var(--panel);border-color:var(--cyan)}
.btn img{width:18px;height:18px}
.btn.lg{padding:14px 26px;font-size:1.05em}

/* ---------- Section-Karten ---------- */
section,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:22px}
h2.shead{margin:0 0 14px;color:var(--cyan);border-bottom:2px solid var(--line);padding-bottom:10px;
  font-size:1.5em;display:flex;align-items:center;gap:12px}
h2.shead .h2ic{width:32px;height:32px;flex:0 0 32px;object-fit:contain}
h2.shead .num{color:var(--dim);font-size:.62em;font-weight:600;margin-left:auto}
h3{color:var(--gold);margin:22px 0 10px;font-size:1.08em}

/* ---------- Feature-Kacheln (Startseite) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:8px}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;color:var(--text);position:relative;overflow:hidden;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.tile:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow);text-decoration:none}
.tile .ic{width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--cyan-soft);margin-bottom:14px;font-size:1.6em}
.tile .ic img{width:30px;height:30px}
.tile h3{margin:0 0 6px;color:var(--text)}
.tile p{margin:0;color:var(--dim);font-size:.9em}
.tile .arrow{position:absolute;right:18px;top:22px;color:var(--cyan);opacity:0;transition:opacity .14s,transform .14s}
.tile:hover .arrow{opacity:1;transform:translateX(3px)}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--gold);font-weight:600;background:var(--panel2)}
tbody tr:hover td,table tr:hover td{background:rgba(255,255,255,.025)}
code{background:var(--panel2);padding:1px 6px;border-radius:4px;color:var(--xp);
  font-family:"Consolas",monospace;font-size:.92em}
.formula{background:var(--panel2);border-left:3px solid var(--cyan);padding:10px 14px;
  border-radius:0 6px 6px 0;margin:10px 0;font-family:"Consolas",monospace;font-size:.9em}
.note{background:var(--gold-soft);border:1px solid var(--gold);border-radius:8px;
  padding:10px 14px;margin:12px 0;font-size:.92em}

/* ---------- Rarität-Pills ---------- */
.pill{display:inline-block;padding:1px 9px;border-radius:11px;font-size:.8em;font-weight:700;
  color:#05080f;white-space:nowrap}
.gew{background:var(--c-gew)} .sel{background:var(--c-sel);color:#fff} .epi{background:var(--c-epi);color:#fff}
.myt{background:var(--c-myt);color:#fff} .leg{background:var(--c-leg)} .spe{background:var(--c-spe)}

/* ---------- Tasten-Glyphen ---------- */
.key{display:inline-block;min-width:18px;text-align:center;border-radius:4px;padding:0 5px;
  font-weight:700;color:#05080f}
.ka{background:var(--a)} .kb{background:var(--b);color:#fff} .kx{background:var(--x);color:#fff} .ky{background:var(--y)}

/* ---------- Inline-Icon ---------- */
.inl{width:20px;height:20px;vertical-align:middle;object-fit:contain;margin:0 2px}

/* ---------- Formulare ---------- */
.field{margin:14px 0}
.field label{display:block;margin-bottom:6px;font-weight:600;font-size:.92em}
.field .hint{color:var(--dim);font-size:.82em;margin-top:4px}
input,textarea,select{
  width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);padding:10px 12px;font-family:inherit;font-size:.95em}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px var(--cyan-soft)}
textarea{resize:vertical;min-height:120px}
/* Honeypot — versteckt für Menschen, sichtbar für naive Bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.msg{padding:11px 14px;border-radius:8px;margin:12px 0;font-size:.92em;display:none}
.msg.ok{display:block;background:rgba(92,184,136,.12);border:1px solid var(--c-spe);color:#bff0d6}
.msg.err{display:block;background:rgba(245,49,65,.12);border:1px solid var(--c-myt);color:#ffc6cc}

/* ---------- Badges / Status ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:7px;font-size:.78em;font-weight:700;
  background:var(--panel2);border:1px solid var(--line)}
.badge.open{color:var(--cyan);border-color:var(--cyan)}
.badge.done{color:var(--xp);border-color:var(--xp)}
.badge.wip{color:var(--gold);border-color:var(--gold)}

/* ---------- Footer ---------- */
footer{flex-shrink:0;border-top:1px solid var(--line);background:var(--panel2);
  color:var(--dim);font-size:.86em;margin-top:40px}
footer .inner{max-width:var(--maxw);margin:0 auto;padding:26px 18px;
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer a{color:var(--dim)}
footer a:hover{color:var(--cyan)}
footer .fl{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media(max-width:780px){
  .navlinks{display:none;position:absolute;top:var(--header-h);left:0;right:0;
    flex-direction:column;background:rgba(8,18,36,.98);border-bottom:1px solid var(--line);
    padding:10px 14px;gap:2px}
  .navlinks.show{display:flex}
  .navtoggle{display:inline-block}
}