/* 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: RAUS mit A.1.70.22 --------------------------------------
   `.schau` und `.bildunterschrift` trugen das Bildschirmfoto aus dem laufenden
   Spiel. Stefan hat es entfernen lassen, weil sich der Kampf derzeit mehrmals
   täglich ändert und ein hinterherhinkendes Schaufensterbild einen Stand
   verspricht, den niemand vorfindet. Die Regeln sind mit raus, statt ungenutzt
   liegen zu bleiben: eine Klasse ohne Markup lädt dazu ein, sie irgendwo
   wieder anzuhängen, wo sie nicht hingehört. Im Git stehen sie (A.1.70.21).
   Kommt das Bild zurück, kommt auch die Rendering-Trennung wieder mit — siehe
   den Kommentar im Kopf von `index.html`. */

/* Der Hinweis unter der Wortmarke: das Kopfbild ist gemalt, nicht abgefilmt.
   Dezent, aber nicht versteckt — sie ist die einzige Stelle, die das noch
   sagt, seit das echte Bildschirmfoto als Gegenbeispiel fehlt. */
/* ⚠ ZENTRIERT wie alles im Kopf. Der erste Wurf liess sie linksbündig, und
   sie stand als einzige Zeile aus der Achse — neben zentriertem Kicker,
   Wortmarke und Claim liest sich das wie ein Versehen, nicht wie ein Hinweis. */
.rendering {
  margin: .55rem auto 0; text-align: center;
  font-size: .82rem; color: var(--dim); letter-spacing: .2px;
}

/* --- 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; }

/* --- „Was ist neu" (A.1.70.25) ---------------------------------------------
   Stefan: „mach den Changelog auf der startseite." Die TEXTE kommen aus
   `spiel/js/neues.js` — dieselbe Datei wie im Spiel, damit sie nur einmal
   gepflegt werden. Nur das Aussehen ist hier eigen: das Spiel ist stahlblau,
   die Startseite gold auf Holz, und eine fremd wirkende Tafel sähe nach
   Fremdkörper aus.
   ⚠ Die Klassennamen (.nbox/.nkopf/.nliste/.nv/.nvk/.nfuss/.nzu) baut
   `neues.js` — wer sie dort umbenennt, muss hier UND im Spiel nachziehen. */
/* ⚠ Grosszügige Klickfläche, ohne dass die Zeile auseinanderläuft: das
   negative `margin` nimmt das `padding` wieder zurück. Der Knopf war sonst
   60×27 px — klein für ein 9-px-Ziel, und er ist der einzige Weg zu dieser
   Liste. */
.fassung {
  font: inherit; font-variant-numeric: tabular-nums;
  background: none; border: 0; padding: 9px 7px; margin: -9px -7px;
  color: var(--gold); cursor: pointer;
  border-bottom: 1px dotted var(--gold-dim);
}
.fassung:hover, .fassung:focus-visible { color: #ffe6a2; border-bottom-color: var(--gold); }
.fassung.fehlt { color: var(--dim); border-bottom-style: none; cursor: default; }

#neues {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(6,5,3,.82);
}
#neues .nbox {
  width: min(640px, 100%); max-height: min(80vh, 680px);
  display: flex; flex-direction: column;
  background: #14100a; border: 2px solid var(--gold-dim); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.7);
}
#neues .nkopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem; border-bottom: 2px solid var(--gold-dim);
}
#neues .nkopf b {
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
#neues .nzu {
  background: none; border: 0; color: var(--dim); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: .3rem .5rem; margin: -.3rem -.5rem;
}
#neues .nzu:hover, #neues .nzu:focus-visible { color: var(--gold); }
/* Die Liste scrollt, Kopf und Fuss stehen — sonst wandert der Schliessen-Knopf
   bei 30 Einträgen aus dem Bild. */
#neues .nliste { overflow-y: auto; padding: .2rem 1.1rem .8rem; }
#neues .nv { padding: .8rem 0; border-bottom: 1px solid #2a2114; }
#neues .nv:last-child { border-bottom: 0; }
#neues .nvk { display: flex; align-items: baseline; gap: .6rem; }
#neues .nvk b { font-size: .72rem; letter-spacing: .1em; color: #8d7a52; }
#neues .nvk span { font-size: .7rem; color: var(--dim); }
#neues .nv.gross .nvk b { color: var(--gold); }
#neues .nv p { margin: .3rem 0 0; font-size: .9rem; line-height: 1.65; }
#neues .nfuss {
  padding: .7rem 1.1rem; border-top: 1px solid #2a2114;
  font-size: .72rem; letter-spacing: .1em; color: var(--dim);
}

/* --- 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); }
}