/* coni.me – gemeinsame Marken-Grundlage
   Eine Palette für alle Logo-Varianten und alle Unterseiten.
   Kategorien: Spiele = coral, Werkzeuge = mint, Geschichten = sun, Mathe = sky. */

:root {
  --ink: #1f1b3a;        /* Tinte: fast schwarz mit Indigo-Stich */
  --ink-2: #4c4766;      /* Fließtext leise */
  --ink-3: #8a85a3;      /* Nebeninfos */
  --paper: #fffaf3;      /* warmes Papierweiß */
  --paper-2: #f5efe5;    /* Flächen */
  --paper-3: #ebe3d6;    /* Linien auf Papier */
  --line: #e4dccd;

  --coral: #ff6b57;
  --sun: #ffbf3c;
  --mint: #1fb58f;
  --sky: #4b7bff;
  --grape: #7b61ff;

  --coral-soft: #ffe1db;
  --sun-soft: #fff0cc;
  --mint-soft: #d4f3e9;
  --sky-soft: #dfe7ff;
  --grape-soft: #e7e1ff;

  --c-spiel: var(--coral);
  --c-werkzeug: var(--mint);
  --c-geschichte: var(--sun);
  --c-mathe: var(--sky);

  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-hand: "Caveat", "Comic Neue", "Segoe Print", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --shadow-1: 0 1px 2px rgba(31, 27, 58, .06), 0 4px 14px rgba(31, 27, 58, .07);
  --shadow-2: 0 2px 4px rgba(31, 27, 58, .06), 0 14px 34px rgba(31, 27, 58, .14);
  --shadow-hard: 4px 4px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-text); color: var(--ink); background: var(--paper); line-height: 1.55; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Kategorie-Pillen, überall gleich */
.cat-pill { display: inline-flex; align-items: center; gap: .35em; font: 600 .74rem/1 var(--font-text); letter-spacing: .02em; padding: .38em .7em; border-radius: 999px; background: var(--paper-2); color: var(--ink); white-space: nowrap; }
.cat-pill::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.cat-pill[data-cat="spiel"] { background: var(--coral-soft); color: #b8392a; }
.cat-pill[data-cat="werkzeug"] { background: var(--mint-soft); color: #11795e; }
.cat-pill[data-cat="geschichte"] { background: var(--sun-soft); color: #9a6400; }
.cat-pill[data-cat="mathe"] { background: var(--sky-soft); color: #2a4fc4; }