/* zock.es — Landingpage.
   Die Seite borgt sich die Sprache des Spiels: Blech, Messing, Holz, warmes
   Gold auf fast schwarzem Grund. Palette 1:1 aus `spiel/js/art.js` (P.ink,
   P.gold, P.warm, P.steel) und dem Panel-CSS in `spiel/index.html` —
   deshalb hier KEINE eigene Farbfindung, sondern dieselben Hexwerte.

   Schriften kommen aus dem Spielordner (`/spiel/fonts/`), nicht aus einer
   zweiten Kopie: eine Datei, ein Cache-Eintrag, und die Seite kann gar nicht
   in einer anderen Schrift enden als der Automat daneben.

   Die Kugeln sind die ECHTEN Materialfotos des Spiels (verkleinert nach
   WebP, s. Kommentar in index.html). Ein nachgebauter CSS-Verlauf sähe
   daneben sofort billiger aus als das, was im Automaten liegt. */

@font-face {
  font-family: 'Bungee';
  src: url('/spiel/fonts/bungee.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/spiel/fonts/chakra-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/spiel/fonts/chakra-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --ink: #080a10;
  --ink2: #0d111c;
  --steel: #171c2b;
  --edge: #4b4132;
  --gold: #f7c948;
  --gold-dim: #8a6a15;
  --text: #ded3bd;
  --dim: #9a8b70;
  --warm: #3a2a24;
  --neon: #ff2d78;
  --kalt: #35e6ff;
  --messing: linear-gradient(180deg, #f7c948 0%, #d9a423 45%, #8a6a15 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Kein `overflow: hidden` wie im Spiel — hier WIRD gescrollt. */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--gold); }

.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

/* --- Wortmarke: gerenderte Szene aus dem Automaten -------------------- */
/* Das Bild IST die Überschrift. Deshalb keine feste Breite, sondern eine
   Obergrenze plus Rahmen: darunter soll es wie ein Blick durch die Scheibe
   wirken, nicht wie ein eingeklebtes Banner. */
.marke {
  max-width: 940px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--gold-dim);
  box-shadow: 0 18px 44px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
}
.marke img { width: 100%; height: auto; }
/* Derselbe schräge Scheibenreflex wie über dem Schaufenster weiter unten —
   das verbindet Kopf und Bildschirmfoto sichtbar miteinander. */
.marke::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 0 46%, rgba(255,255,255,.055) 46% 52%, transparent 52%);
}

/* --- Kopf ------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(3rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  /* Kein Blech mehr im Hintergrund: seit die Wortmarke selbst eine Szene mit
     Blechwand ist, standen zwei Bleche übereinander und das Bild verlor seine
     Kante. Jetzt trägt der Kopf nur noch Tiefe und ein warmes Deckenlicht. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(247,201,72,.15), transparent 60%),
    linear-gradient(180deg, #0c1018 0%, #070910 100%);
  border-bottom: 3px solid var(--gold-dim);
  overflow: hidden;
}
/* Der Scheibenreflex sass frueher auf dem ganzen Kopf. Seit die Wortmarke ein
   gerahmtes Bild ist, hat sie ihren eigenen (`.marke::after`) — zwei schräge
   Lichtstreifen nebeneinander lasen sich wie ein Darstellungsfehler. */
.hero > * { position: relative; z-index: 1; }

.kicker {
  text-align: center; letter-spacing: .22em; text-transform: uppercase;
  font-size: .78rem; font-weight: 700; color: var(--gold);
  margin-bottom: 1.4rem;
}
h1 { margin: 0; }
.claim {
  text-align: center; max-width: 46ch; margin: 1.8rem auto 0;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--text);
}
.claim b { color: var(--gold); font-weight: 700; }

.knopfreihe {
  display: flex; flex-wrap: wrap; gap: .9rem;
  justify-content: center; margin-top: 2rem;
}

/* Der SPIELEN-Knopf ist ein Messingschild am Blech: gestanzt, nicht flach. */
.knopf {
  font-family: 'Bungee', system-ui, sans-serif;
  font-size: 1.05rem; letter-spacing: .06em;
  padding: .95rem 2.2rem; border-radius: 8px;
  text-decoration: none; display: inline-block;
  background: var(--messing); color: #241004;
  border: 1px solid #ffe08a;
  box-shadow: 0 5px 0 #5c460e, 0 10px 20px rgba(0,0,0,.55);
  transition: transform .12s ease, box-shadow .12s ease;
}
.knopf:hover { transform: translateY(2px); box-shadow: 0 3px 0 #5c460e, 0 7px 14px rgba(0,0,0,.55); }
.knopf:active { transform: translateY(5px); box-shadow: 0 0 0 #5c460e, 0 3px 8px rgba(0,0,0,.5); }
.knopf.leer {
  background: transparent; color: var(--text);
  border: 1px solid var(--edge); box-shadow: none;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
}
.knopf.leer:hover { border-color: var(--gold); color: var(--gold); transform: none; }

.kleingedruckt {
  text-align: center; margin-top: 1.3rem;
  font-size: .85rem; color: var(--dim);
}
.kleingedruckt span { white-space: nowrap; }

/* --- Abschnitte ------------------------------------------------------- */
section { padding: clamp(3rem, 7vw, 5rem) 0; }
section + section { border-top: 1px solid #1c2130; }

h2 {
  font-family: 'Bungee', system-ui, sans-serif;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  color: #fff2d0; font-weight: 400; line-height: 1.25;
  margin-bottom: .6rem;
}
h2 em { font-style: normal; color: var(--gold); }
.vorspann { color: var(--dim); max-width: 60ch; margin-bottom: 2.4rem; }

.raster { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Blechtafel — dieselbe Bauweise wie das Panel im Spiel: dunkle Fassung,
   schmale warme Lichtkante oben, kein heller Grundton. */
.tafel {
  background: linear-gradient(180deg, #141926, #0c101a);
  border: 1px solid #2a3142;
  border-top-color: #48506a;
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.35);
}
.tafel h3 {
  font-family: 'Bungee', sans-serif; font-weight: 400;
  font-size: 1rem; letter-spacing: .04em; color: var(--gold);
  margin-bottom: .5rem;
}
.tafel p { color: var(--text); font-size: .96rem; }
.zug { font-family: 'Bungee', sans-serif; color: var(--gold-dim); font-size: 2rem; line-height: 1; }

/* --- Zeug: das Wort IST der Gegenstand -------------------------------- */
.zeugreihe {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: 2rem;
}
.stueck {
  text-align: center; padding: 1.1rem .6rem 1rem;
  background: radial-gradient(80% 70% at 50% 25%, rgba(247,201,72,.09), transparent 70%), #0c101a;
  border: 1px solid #262d3d; border-radius: 10px;
}
.stueck img { height: 84px; width: auto; margin: 0 auto .8rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.stueck b {
  display: block; font-family: 'Bungee', sans-serif; font-weight: 400;
  font-size: .82rem; letter-spacing: .12em; color: #fff2d0;
}
.stueck small { color: var(--dim); font-size: .78rem; }

/* --- Gegner ----------------------------------------------------------- */
.buehne {
  display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center;
  align-items: flex-end; margin-top: 2rem;
  padding: 2rem 1rem 1.4rem;
  background: linear-gradient(180deg, #12172a 0%, #0a0e18 70%);
  border: 1px solid #232a3d; border-radius: 12px;
  /* Bodenlicht wie auf der Kampfbühne */
  box-shadow: inset 0 -60px 60px -50px rgba(53,230,255,.18);
}
.buehne figure { text-align: center; width: 122px; }
.buehne img { height: 118px; width: auto; margin: 0 auto .5rem; filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)); }
.buehne figcaption { font-size: .78rem; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }

/* --- Merkmalsliste ---------------------------------------------------- */
.liste { display: grid; gap: .9rem 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1rem; }
.liste div { padding-left: 1.6rem; position: relative; }
.liste div::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--messing); box-shadow: 0 0 0 2px rgba(247,201,72,.16);
}
.liste b { color: #fff2d0; }

/* --- Schaufenster (Bild aus dem laufenden Spiel) ---------------------- */
.schau {
  margin-top: 1.5rem; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--gold-dim);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  position: relative;
}
.schau img { width: 100%; height: auto; }
.schau::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 0 52%, rgba(255,255,255,.05) 52% 58%, transparent 58%);
}
.bildunterschrift { margin-top: .7rem; font-size: .85rem; color: var(--dim); }

/* --- Schlussband + Fuß ------------------------------------------------ */
.schluss {
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 100%, rgba(247,201,72,.12), transparent 60%),
    linear-gradient(180deg, #0b0f1a, #080a10);
  border-top: 3px solid var(--gold-dim);
}
.schluss h2 { margin-bottom: 1.4rem; }

footer {
  padding: 2.2rem 0 3rem; font-size: .85rem; color: var(--dim);
  border-top: 1px solid #1c2130;
}
.fussreihe { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
.stand { font-variant-numeric: tabular-nums; }

/* --- Rechtstexte (impressum.html / datenschutz.html) ------------------ */
/* Rechtstexte werden gelesen, nicht überflogen: über ~75 Zeichen je Zeile
   verliert man beim Rücksprung die Zeile. Der 1080er-Rahmen von `.wrap` ist
   für Raster gedacht, nicht für Fliesstext. */
.recht { padding: clamp(2rem, 6vw, 3.5rem) 0 4rem; max-width: 72ch; }
.recht h1 { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 1.6rem; color: #fff2d0; margin-bottom: 1.6rem; }
.recht h2 { font-size: 1rem; letter-spacing: .06em; margin: 2rem 0 .5rem; color: var(--gold); }
.recht h3 { font-size: .95rem; color: #fff2d0; margin: 1.2rem 0 .3rem; font-weight: 700; }
.recht p, .recht li { color: var(--text); font-size: .95rem; margin-bottom: .7rem; }
.recht ul { padding-left: 1.3rem; }
.zurueck { display: inline-block; margin-bottom: 1.8rem; font-size: .9rem; text-decoration: none; }
.zurueck:hover { text-decoration: underline; }

/* Kleine Schirme: die Szene im Kopf ist 2,4:1 — auf dem Handy schrumpft sie
   auf gut 100 px Höhe. Der Rahmen darf dann nicht mehr so schwer sein wie auf
   dem Desktop, sonst ist mehr Rand als Bild zu sehen. */
@media (max-width: 560px) {
  .marke { border-radius: 10px; border-width: 1px; box-shadow: 0 10px 24px rgba(0,0,0,.6); }
}