/* Marktjagd — gemeinsame Grundlage für Konzeptseite und Spiel.
   Keine externen Schriften, keine CDNs: die Seite lädt nichts nach.
   (Supermarkt-WLAN, und DSGVO-sauber ohne Google-Fonts-Anfrage.) */

:root {
  --ink:        #0b0e14;
  --ink-2:      #11151d;
  --panel:      #161b25;
  --panel-2:    #1d2431;
  --line:       #2a3342;
  --text:       #f2f5fa;
  --muted:      #9aa6b8;
  --dim:        #7e8b9e;   /* >=4.5:1 auf --panel (Review: Kontrast kleiner Sekundärtexte) */

  --jagd:       #ff7a1a;   /* Signal-Orange: die Jagd */
  --jagd-soft:  #ffb072;
  --bestaetigt: #3ddc97;   /* bestätigt / richtig */
  --warn:       #ffd166;
  --danger:     #ff5f6d;
  --scout:      #8b7bff;   /* Scout-Auftrag */

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --shadow: 0 18px 40px -22px rgba(0,0,0,.9);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body { overflow-x: hidden; }

h1, h2, h3, h4 { line-height: 1.1; margin: 0; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; line-height: 1.6; }
a { color: var(--jagd-soft); }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

.num { font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 1rem 1.4rem;
  border-radius: 999px;
  font-weight: 750;
  font-size: 1rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  min-height: 52px;
  text-decoration: none;
}
a.btn { color: var(--text); }
/* Primär-Buttons IMMER dunkle Schrift auf Orange — a.btn gewann sonst mit --text
   (heller Text auf Orange = ~2:1, WCAG-Fail). */
a.btn.btn-primary { color: #23120a; }
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(180deg, #ff8f38, var(--jagd));
  color: #23120a;
  border-color: transparent;
  box-shadow: 0 10px 24px -12px rgba(255,122,26,.9);
}
.btn-ghost { background: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.tag {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  padding: .32em .7em; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.tag-jagd    { color: var(--jagd);       border-color: color-mix(in srgb, var(--jagd) 45%, transparent); }
.tag-ok      { color: var(--bestaetigt); border-color: color-mix(in srgb, var(--bestaetigt) 45%, transparent); }
.tag-scout   { color: var(--scout);      border-color: color-mix(in srgb, var(--scout) 45%, transparent); }
.tag-warn    { color: var(--warn);       border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* Wortmarke */
.wordmark {
  display: inline-flex; align-items: baseline; gap: .12em;
  font-weight: 900; letter-spacing: -.045em;
}
.wordmark b { color: var(--jagd); font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}