/* ==========================================================================
   MEITCraft – Stylesheet
   Konzept: Schwebende Eiswelt. Pixel-Kanten statt Glas, Minecraft-Buttons,
            Hotbar-Navigation mit XP-Leiste, Bernstein als Fackel-Akzent.
   Aufbau:  1 Fonts · 2 Tokens · 3 Basis · 4 Layout · 5 Komponenten
            6 Sektionen · 7 Animationen · 8 Responsive
   ========================================================================== */


/* 1. FONTS (lokal)
   ========================================================================== */
@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/pressstart2p-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}


/* 2. DESIGN-TOKENS
   ========================================================================== */
:root {
  /* Farben */
  --bg:      #050a1f;
  --bg-2:    #081235;
  --bg-3:    #030717;
  --panel:   #0b1a52;
  --panel-2: #0e2266;
  --line:    #2a4fb0;
  --text:    #eaf4ff;
  --text-2:  #b7cdf0;
  --muted:   #8fa9d4;
  --blue:    #2f8bff;
  --cyan:    #37e0ff;
  --ice:     #b8f4ff;
  --deep:    #1237c8;
  --amber:   #ffb340;   /* Fackel-Akzent */
  --ok:      #4dff9a;
  --danger:  #ff5a6e;

  --grad: linear-gradient(100deg, var(--ice), var(--cyan) 45%, var(--blue));

  /* Typografie */
  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-body:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, Menlo, Consolas, monospace;

  /* Abstände */
  --gutter:  5vw;
  --section: 100px;
  --px:      4px;       /* Pixelgröße für Kanten */
  --ease:    cubic-bezier(.2, .7, .2, 1);
}


/* 3. BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  padding-bottom: 120px;                 /* Platz für die Hotbar */
  background:
    radial-gradient(1200px 600px at 80% -10%, #0e2a7a55, transparent 60%),
    radial-gradient(900px 600px at 0% 40%, #0a3a8a33, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
code { font-family: var(--font-mono); }
img { max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--amber); color: #1a0f00; }

main, .footer { position: relative; z-index: 1; }
#snow { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }


/* 4. LAYOUT
   ========================================================================== */
.section {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--section) var(--gutter);
}
.section--band {
  max-width: none;
  background: linear-gradient(180deg, transparent, rgba(12, 34, 100, .3), transparent);
}
.section--band > * { max-width: 1080px; margin-inline: auto; }

.kicker {
  margin-bottom: 18px; text-align: center;
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: 3px; color: var(--amber);
}
.title {
  margin-bottom: 64px; text-align: center;
  font-family: var(--font-pixel); font-size: clamp(18px, 3.2vw, 30px); line-height: 1.5;
}
.title::after {                              /* Pixel-Trenner */
  content: ""; display: block; width: 120px; height: 8px; margin: 22px auto 0;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 16px);
  opacity: .7;
}
.title em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* 5. KOMPONENTEN
   ========================================================================== */

/* --- Pixel-Rahmen: Notch-Ecken ohne clip-path ---
   Farbe über --pc steuerbar. */
.card, .event, .stats > div, .rules div, details, .ip-box, .features li {
  --pc: var(--line);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--pc),
    0 var(--px) 0 0 var(--pc),
    calc(var(--px) * -1) 0 0 0 var(--pc),
    var(--px) 0 0 0 var(--pc);
  background: var(--panel);
  margin: var(--px);
}

/* --- Markenlogo --- */
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-pixel); font-size: 14px; }
.brand img { filter: drop-shadow(0 0 10px rgba(55, 224, 255, .6)); transition: transform .4s; }
.brand:hover img { transform: rotate(-8deg) scale(1.1); }
.brand b { font-weight: 400; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Minecraft-Buttons ---
   Hell oben-links, dunkel unten-rechts, schwarzer Außenrand. */
.mc-btn {
  --face: #2f6fe0; --hi: #7fb4ff; --lo: #153a9c; --ink: #fff;
  display: inline-block; padding: 18px 26px; cursor: pointer; border: 0;
  font-family: var(--font-pixel); font-size: 12px; text-align: center; text-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
  color: var(--ink); background: var(--face);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--lo), inset var(--px) var(--px) 0 var(--hi), 0 0 0 var(--px) #02061a;
  margin: var(--px);
  transition: transform .08s, filter .15s;
}
.mc-btn:hover  { filter: brightness(1.15); }
.mc-btn:active { transform: translateY(2px); box-shadow: inset var(--px) var(--px) 0 var(--lo), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--hi), 0 0 0 var(--px) #02061a; }
.mc-btn--amber { --face: #ffb340; --hi: #ffe3a3; --lo: #b86f0a; --ink: #2a1600; text-shadow: 2px 2px 0 rgba(255, 255, 255, .3); }
.mc-btn--sm { padding: 12px 16px; font-size: 10px; }
.mc-btn--lg { padding: 22px 36px; font-size: 14px; }

/* --- Kopfzeile --- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
}
.top__right { display: flex; align-items: center; gap: 12px; }

/* --- HUD: XP-Leiste + Hotbar --- */
.hud { position: fixed; left: 50%; bottom: 16px; z-index: 100; translate: -50% 0; width: max-content; max-width: 96vw; }

.hotbar { display: flex; gap: 4px; padding: var(--px); background: #02061a; box-shadow: 0 0 0 var(--px) #2a3f80, 0 10px 40px rgba(0, 0, 0, .6); }
.slot {
  position: relative; display: grid; place-items: center; width: 58px; height: 58px;
  background: #13235c; box-shadow: inset 3px 3px 0 #0a1440, inset -3px -3px 0 #2e4aa6;
  transition: background .15s;
}
.slot i { width: 32px; height: 32px; transition: transform .15s; }
.slot i svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.slot em { position: absolute; top: 3px; left: 5px; font: normal 9px/1 var(--font-pixel); color: var(--muted); }
.slot span {                                 /* Tooltip */
  position: absolute; bottom: calc(100% + 18px); left: 50%; translate: -50% 6px; padding: 7px 10px; white-space: nowrap; pointer-events: none;
  font: 9px/1 var(--font-pixel); color: var(--text); background: #0a0420; border: 2px solid #3a1a8a; opacity: 0; transition: .15s;
}
.slot:hover { background: #1b3180; }
.slot:hover i { transform: translateY(-3px); }
.slot:hover span { opacity: 1; translate: -50% 0; }
.slot.is-active { background: #1b3180; box-shadow: inset 3px 3px 0 #0a1440, inset -3px -3px 0 #2e4aa6, 0 0 0 4px var(--amber), 0 0 0 7px #02061a; z-index: 1; }
.slot.is-active i { transform: translateY(-3px) scale(1.08); }

/* --- Spielmodi-Karten --- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; perspective: 1000px; }

.card { position: relative; padding: 30px 26px; transform-style: preserve-3d; transition: transform .15s, box-shadow .2s, background .2s; overflow: hidden; }
.card::before {                              /* Spotlight, folgt der Maus */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(55, 224, 255, .22), transparent 60%);
}
.card:hover { --pc: var(--cyan); background: var(--panel-2); }
.card:hover::before { opacity: 1; }
.card__num { position: absolute; top: 16px; right: 18px; font-family: var(--font-pixel); font-size: 11px; color: rgba(143, 169, 212, .5); }
.card h3 { margin: 26px 0 8px; font-size: 20px; transform: translateZ(30px); }
.card p { font-size: 15px; color: var(--muted); }

/* --- Isometrische CSS-Würfel --- */
.cube {
  --s: 46px; --top: #b8f4ff; --left: #2f8bff; --right: #1237c8;
  position: relative; width: calc(var(--s) * 1.73); height: calc(var(--s) * 2);
  transform: translateZ(40px); animation: bob 4s ease-in-out infinite;
}
.cube i { position: absolute; inset: 0; }
.cube i:nth-child(1) { background: var(--top);   clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%); }
.cube i:nth-child(2) { background: var(--left);  clip-path: polygon(0 25%, 50% 50%, 50% 100%, 0 75%); }
.cube i:nth-child(3) { background: var(--right); clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%); }
.cube--grass { --top: #7dff9a; --left: #2fae5a; --right: #187a3c; }
.cube--ice   { --top: #d7fbff; --left: #52c8ff; --right: #2a7ee0; }
.cube--gold  { --top: #ffe9a0; --left: #ffb938; --right: #c27a12; }
.cube--dia   { --top: #b8fff4; --left: #2fe0cf; --right: #12908f; }

/* --- Zahlen & Feature-Liste --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin-bottom: 48px; text-align: center; }
.stats > div { padding: 26px 10px; }
.stats strong {
  display: block; margin-bottom: 10px; font-family: var(--font-pixel); font-size: clamp(22px, 3.4vw, 34px);
  color: var(--amber); text-shadow: 3px 3px 0 #5a3500;
}
.stats span { font-size: 14px; color: var(--muted); }

.features { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.features li { padding: 22px 22px 22px 26px; transition: transform .2s, background .2s; }
.features li:hover { --pc: var(--amber); transform: translateY(-4px); background: var(--panel-2); }
.features h3 { margin-bottom: 4px; font-size: 17px; color: var(--ice); }
.features p { font-size: 14px; color: var(--muted); }

/* --- Events --- */
.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 28px; }
.event { padding: 28px 26px; transition: transform .2s, background .2s; }
.event:hover { --pc: var(--cyan); transform: translateY(-5px); background: var(--panel-2); }
.event time { display: block; margin: 16px 0 6px; font-family: var(--font-mono); font-size: 13px; color: var(--cyan); }
.event h3 { margin-bottom: 8px; font-size: 20px; }
.event p { font-size: 15px; color: var(--muted); }

.badge { display: inline-block; padding: 5px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.badge--soon { color: #2a1600; background: var(--amber); }
.badge--done { color: var(--muted); background: rgba(143, 169, 212, .15); border: 1px solid var(--line); }

/* --- Tabs (Java / Bedrock) --- */
.tabs { display: flex; justify-content: center; gap: 12px; margin: -20px auto 44px; }
.tabs__btn {
  --face: #13235c; --hi: #2e4aa6; --lo: #0a1440;
  padding: 14px 22px; cursor: pointer; border: 0; font-family: var(--font-pixel); font-size: 11px; color: var(--muted);
  background: var(--face); box-shadow: inset 3px 3px 0 var(--hi), inset -3px -3px 0 var(--lo), 0 0 0 var(--px) #02061a; margin: var(--px);
}
.tabs__btn:hover { color: var(--ice); }
.tabs__btn.is-active { color: #2a1600; --face: var(--amber); --hi: #ffe3a3; --lo: #b86f0a; }

/* --- Beitritts-Schritte & Terminal --- */
.join { max-width: 640px; margin-inline: auto; }

.steps { position: relative; list-style: none; display: grid; gap: 24px; }
.steps::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 30px; width: 4px; background: repeating-linear-gradient(var(--cyan) 0 8px, transparent 8px 16px); opacity: .5; }
.steps li { position: relative; display: flex; align-items: flex-start; gap: 20px; }
.steps li > span {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  font-family: var(--font-pixel); font-size: 14px; color: #2a1600;
  background: var(--amber); box-shadow: inset 4px 4px 0 #ffe3a3, inset -4px -4px 0 #b86f0a, 0 0 0 4px #02061a;
}
.steps h3 { margin-bottom: 2px; }
.steps p { font-size: 15px; color: var(--muted); }


/* --- Regeln --- */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; counter-reset: rule; }
.rules div { position: relative; counter-increment: rule; padding: 20px 20px 20px 74px; transition: transform .2s, background .2s; }
.rules div:hover { --pc: var(--cyan); transform: translateY(-3px); background: var(--panel-2); }
.rules div::before {
  content: "0" counter(rule); position: absolute; left: 20px; top: 50%; translate: 0 -50%;
  font-family: var(--font-pixel); font-size: 16px; color: var(--amber); text-shadow: 2px 2px 0 #5a3500;
}

/* --- FAQ --- */
.faq { display: grid; gap: 18px; max-width: 780px; margin-inline: auto; }
details { transition: background .2s; }
details[open] { --pc: var(--cyan); background: var(--panel-2); }
summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; list-style: none; cursor: pointer; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-pixel); font-size: 16px; color: var(--amber); }
details[open] summary::after { content: "–"; }
details p { padding: 0 22px 20px; color: var(--muted); }

/* --- Toast --- */
.toast {
  position: fixed; top: 24px; left: 50%; z-index: 300; translate: -50% -140px;
  padding: 14px 24px; font-family: var(--font-pixel); font-size: 11px; color: #2a1600;
  background: var(--amber); box-shadow: inset 4px 4px 0 #ffe3a3, inset -4px -4px 0 #b86f0a, 0 0 0 4px #02061a;
  transition: translate .3s var(--ease);
}
.toast.show { translate: -50% 0; }


/* 6. SEKTIONEN
   ========================================================================== */

/* --- Hero --- */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 20px;
  min-height: 100vh; padding: 110px var(--gutter) 130px;
  background: linear-gradient(180deg, #02061a 0%, #06133f 55%, #0b2a77 100%);
}
/* Gestufter Schnee-Horizont am Hero-Ende */
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 90px; pointer-events: none; background: var(--bg);
  clip-path: polygon(0 60%, 6% 60%, 6% 40%, 14% 40%, 14% 55%, 22% 55%, 22% 30%, 31% 30%, 31% 50%, 40% 50%, 40% 65%, 49% 65%, 49% 45%, 58% 45%, 58% 25%, 67% 25%, 67% 50%, 76% 50%, 76% 38%, 85% 38%, 85% 58%, 93% 58%, 93% 42%, 100% 42%, 100% 100%, 0 100%);
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__text, .hero__world { position: relative; z-index: 2; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero__actions--center { justify-content: center; margin-bottom: 0; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 2px; color: var(--amber); }
.eyebrow i { width: 10px; height: 10px; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: blink 1.4s steps(2) infinite; }

h1 { font-family: var(--font-pixel); font-size: clamp(32px, 7vw, 76px); line-height: 1.2; letter-spacing: -2px; }
h1 span { display: block; }
h1 .w1 { color: #fff; text-shadow: 0 0 30px rgba(120, 200, 255, .6), 5px 5px 0 #0a1f7a; }
h1 .w2 {
  background: linear-gradient(100deg, var(--ice), var(--cyan), var(--blue), var(--cyan), var(--ice)) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(5px 5px 0 #0a1f7a); animation: shine 5s linear infinite;
}
.lead { max-width: 520px; margin: 26px 0 32px; font-size: clamp(16px, 2vw, 19px); color: var(--text-2); }

.ip-box { --pc: var(--cyan); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 10px 10px 10px 22px; background: rgba(8, 20, 66, .85); }
.ip-box small { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.ip-box code { font-size: 21px; font-weight: 700; color: var(--ice); text-shadow: 0 0 14px rgba(55, 224, 255, .6); }

.status {
  display: flex; align-items: center; gap: 10px; width: fit-content; margin-top: 22px; padding: 6px 14px;
  font-size: 14px; color: var(--muted); background: rgba(5, 10, 31, .6); border: 2px solid var(--line);
}
.dot { width: 10px; height: 10px; background: #667; }
.status.online .dot  { background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: blink 2s steps(2) infinite; }
.status.offline .dot { background: var(--danger); }

.hero__world { display: flex; flex-direction: column; align-items: center; }
#island { width: 100%; height: min(60vh, 560px); cursor: grab; touch-action: pan-y; }
#island:active { cursor: grabbing; }
.hint { font-family: var(--font-pixel); font-size: 10px; color: var(--muted); }

/* --- Abschluss (CTA) --- */
.cta { position: relative; padding: 110px var(--gutter); text-align: center; background: radial-gradient(600px 300px at 50% 60%, rgba(47, 139, 255, .28), transparent 70%); }
.cta img { filter: drop-shadow(0 0 28px rgba(55, 224, 255, .7)); animation: float 5s ease-in-out infinite; }
.cta .title { margin: 20px 0 12px; }
.cta p { margin-bottom: 30px; color: var(--muted); }

/* --- Footer --- */
.footer { padding: 50px var(--gutter); text-align: center; font-size: 13px; color: var(--muted); background: var(--bg-3); border-top: 4px solid var(--line); }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.footer .brand { color: var(--text); margin-right: 10px; }
.footer__small { margin-top: 8px; opacity: .7; }
.footer__small a:hover { color: var(--amber); }


/* 7. ANIMATIONEN
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

@keyframes float   { 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes bob     { 50% { transform: translateZ(40px) translateY(-8px); } }
@keyframes shine   { to  { background-position: -250% 0; } }
@keyframes blink   { 50% { opacity: .25; } }


/* 8. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 100px; }
  .hero__world { order: -1; }
  #island { height: 320px; }
  .hero__actions, .status { justify-content: center; margin-inline: auto; }
  .lead { margin-inline: auto; }
  h1 { letter-spacing: -1px; }
}

@media (max-width: 600px) {
  :root { --section: 70px; }
  .top { padding-block: 10px; }
  .brand span { display: none; }
  .slot { width: 46px; height: 46px; }
  .slot i { width: 26px; height: 26px; }
  .slot em { display: none; }
  .ip-box { gap: 12px; }
}

/* 9. UNTERSEITEN
   ========================================================================== */
.section--narrow { max-width: 860px; }
.section--band.section--narrow { max-width: none; }
.section--band.section--narrow > * { max-width: 860px; }

.hero--page { display: block; min-height: 0; padding: 140px var(--gutter) 90px; text-align: center; }
.hero--page .hero__text { max-width: 760px; margin-inline: auto; }
.hero--page h1 { font-size: clamp(24px, 5vw, 52px); line-height: 1.35; letter-spacing: -1px; text-shadow: 4px 4px 0 #0a1f7a; }
.hero--page .lead { margin-inline: auto; margin-bottom: 0; }
h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(4px 4px 0 #0a1f7a); }

a.card { display: block; }
.more { margin-top: 44px; text-align: center; font-family: var(--font-pixel); font-size: 11px; }
.more a, .textlink { color: var(--amber); }
.more a:hover, .textlink:hover { color: var(--ice); text-decoration: underline; }
.note { margin-top: 28px; text-align: center; font-size: 13px; color: var(--muted); }
.prose { max-width: 680px; margin: 0 auto 34px; text-align: center; color: var(--text-2); }
.prose--center { margin-bottom: 48px; }

.features--big { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.features--big li { padding: 26px 26px 26px 30px; }
.features--big h3 { font-size: 19px; }
.features--big p { font-size: 15px; }

/* Spielmodi-Detailseite */
.mode { display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: center; padding: 34px 0; }
.mode + .mode { border-top: 4px dotted rgba(90, 170, 255, .25); }
.mode__art { position: relative; display: grid; place-items: center; height: 170px; background: var(--panel); box-shadow: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); margin: var(--px); }
.mode__art .cube { transform: none; }
.mode__art span { position: absolute; top: 12px; left: 14px; font-family: var(--font-pixel); font-size: 11px; color: rgba(143, 169, 212, .6); }
.mode h2 { margin-bottom: 10px; font-family: var(--font-pixel); font-size: clamp(16px, 2.4vw, 22px); }
.mode p { margin-bottom: 14px; color: var(--text-2); }
.ticks { list-style: none; display: grid; gap: 6px; }
.ticks li { position: relative; padding-left: 24px; font-size: 15px; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--amber); }

/* Tabellen */
.table-wrap { max-width: 820px; margin-inline: auto; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--panel); box-shadow: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
.table th { padding: 16px 20px; text-align: left; font-family: var(--font-pixel); font-size: 10px; font-weight: 400; color: var(--amber); background: rgba(47, 139, 255, .12); border-bottom: 3px solid var(--line); }
.table td { padding: 16px 20px; color: var(--text-2); border-bottom: 1px solid rgba(90, 170, 255, .15); }
.table tr:last-child td { border-bottom: 0; }
.table td:first-child { font-weight: 700; color: var(--ice); }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 24px; }
.member { --pc: var(--line); padding: 28px 18px; text-align: center; background: var(--panel); margin: var(--px);
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--pc), 0 var(--px) 0 0 var(--pc), calc(var(--px) * -1) 0 0 0 var(--pc), var(--px) 0 0 0 var(--pc); transition: transform .2s, background .2s; }
.member:hover { --pc: var(--cyan); transform: translateY(-5px); background: var(--panel-2); }
.avatar { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 16px; background: #0a1440; box-shadow: inset 4px 4px 0 #050c2b, inset -4px -4px 0 #1b2f7a; }
.avatar i { width: 64px; height: 64px; }
.avatar svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.member h3 { margin-bottom: 8px; font-size: 17px; }
.badge--role { color: var(--ice); background: rgba(47, 139, 255, .25); border: 1px solid var(--line); }

/* Rechtstexte */
.legal h2 { margin: 34px 0 10px; font-family: var(--font-pixel); font-size: 13px; line-height: 1.6; color: var(--ice); }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--text-2); font-size: 15px; }

/* Beitreten: IP-Box + Status zentriert */
.ip-box--center { display: flex; width: fit-content; margin: 44px auto 0; }
.status--center { margin-inline: auto; }

@media (max-width: 700px) {
  .mode { grid-template-columns: 1fr; gap: 20px; }
  .mode__art { height: 140px; }
  .hero--page { padding-block: 120px 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Regelwerk (Paragraphen-Akkordeon) */
.regelwerk { display: grid; gap: 18px; }
.regelwerk summary { font-family: var(--font-pixel); font-size: 12px; line-height: 1.6; justify-content: flex-start; align-items: center; gap: 14px; }
.regelwerk summary::after { margin-left: auto; }
.par { color: var(--amber); text-shadow: 2px 2px 0 #5a3500; }
.paras { list-style: none; display: grid; gap: 12px; padding: 4px 22px 22px; }
.paras li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; color: var(--text-2); font-size: 15px; }
.paras b { font-family: var(--font-mono); font-size: 13px; color: var(--cyan); padding-top: 2px; }

.hero--page + .section { padding-top: 50px; }

.cube--hc { --top: #ffb3b3; --left: #e5484d; --right: #9c1c2b; }

/* Team: wenige Mitglieder zentriert */
.team--few { grid-template-columns: repeat(auto-fit, 220px); justify-content: center; }
.member--open { opacity: .75; }
.member--open .avatar { background: transparent; box-shadow: inset 0 0 0 4px #1b2f7a; }
.avatar img { display: block; width: 64px; height: 64px; image-rendering: pixelated; }

/* Team: kompletter Skin beim Hovern */
.member--skin .avatar { position: relative; overflow: visible; }
.avatar__head { transition: opacity .2s, transform .3s var(--ease); }
.avatar .avatar__body {
  position: absolute; left: 50%; bottom: 8px; width: auto; height: 210px; max-width: none;
  image-rendering: pixelated; pointer-events: none; opacity: 0;
  transform: translate(-50%, 16px) scale(.8); transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .35));
  transition: opacity .25s, transform .35s var(--ease);
}
.member--skin:hover .avatar { background: transparent; box-shadow: none; }
.member--skin:hover .avatar__head { opacity: 0; transform: scale(.6); }
.member--skin:hover .avatar__body { opacity: 1; transform: translate(-50%, 0) scale(1); }
.member--skin { z-index: 2; }


/* ---- Statistik-Seiten ---- */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 24px; }
.statcard { background: var(--panel); border: 3px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.statcard__label { color: var(--muted); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.statcard strong { font-family: var(--font-pixel); font-size: 1.15rem; line-height: 1.4; color: var(--ice); }