/* Grammatik der Mannschaftskasse Basis fuer die Minigame-Huellen.
   Quelle: D:/dev/privat/mannschaftskasse-basis/src/styles/{tokens,rollen,vokabular,schale}.css
   und DESIGN.md. Dies ist eine Kopie, keine zweite Designquelle: Werte nur dort aendern und
   hier nachziehen (Drift-Test). Spec: docs/superpowers/specs/2026-10-11-minigames-huelle.md
   Spiele sind immer dunkel. Vereinsfarben kommen ueber --verein-*-dunkel; die Beta ist neutral. */

@font-face { font-family: "Arimo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/arimo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Arimo"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/arimo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Arimo"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/arimo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Arimo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/arimo-latin-700-normal.woff2") format("woff2"); }

:root {
  --kasse-black: #000000;
  --kasse-surface: #0d0d0d;
  --kasse-surface-2: #161616;
  --kasse-white: #ffffff;
  --kasse-signal: #f6553c;
  --kasse-gray-700: #575757;
  --kasse-gray-500: #69727d;
  --kasse-gray-300: #9aa1a9;
  --kasse-gray-100: #f6f6f6;
  --kasse-border: #262626;
  --kasse-ampel-gelb: #f2b544;
  --kasse-ampel-gruen: #3f9c52;
  --kasse-marke: var(--verein-marke-dunkel, #ececec);
  --kasse-auf-marke: var(--verein-auf-marke-dunkel, #000000);
  --kasse-interaktion: var(--verein-interaktion-dunkel, #f2eee4);
  --kasse-auf-interaktion: #000000;
  --kasse-zeichen: #f2eee4;
  --kasse-radius: 0;
  --kasse-hover: color-mix(in oklab, var(--kasse-white) 8%, transparent);
  --kasse-flaeche-leise: color-mix(in oklab, var(--kasse-white) 5%, transparent);
  --kasse-scrim: rgb(0 0 0 / 0.6);
  --kasse-glass: rgb(0 0 0 / 0.55);
  --kasse-glass-kante: rgb(255 255 255 / 0.13);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.25rem; --fs-lg: 1.5625rem;
  --fs-xl: 1.9375rem; --fs-2xl: 2.4375rem; --fs-3xl: 3.0625rem;
  --dur-1: 160ms; --dur-2: 280ms; --ease-cine: cubic-bezier(0.16, 1, 0.3, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-caps: 0.08em; --tracking-display: -0.02em;
  --lh-tight: 1.1; --lh-snug: 1.35; --lh-body: 1.45; --measure: 56ch;
  --d-pad: 20px; --d-label: var(--sp-2);
  --font-display: "Arimo", sans-serif;
  --font-body: "Arimo", sans-serif;
  color-scheme: dark;
}

@supports not (color: color-mix(in oklab, white 5%, transparent)) {
  :root { --kasse-hover: var(--kasse-border); --kasse-flaeche-leise: var(--kasse-surface); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--kasse-black); color: var(--kasse-gray-100); font-family: var(--font-body); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--kasse-interaktion); outline-offset: 3px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Textrollen */
.label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); line-height: 1; text-transform: uppercase; }
.title { margin: 0; font-size: var(--fs-lg); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
.body { font-size: var(--fs-base); line-height: var(--lh-body); max-width: var(--measure); }
.meta { font-size: var(--fs-xs); color: var(--kasse-gray-300); }

/* Faehnchen: Ueberschrift einer Karte oder eines Blatts. Schraege per skewX, nie clip-path. */
.faehnchen { position: relative; isolation: isolate; display: inline-block; justify-self: start; max-width: 100%; padding: var(--sp-1) var(--sp-3); color: var(--kasse-auf-marke); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); line-height: 1; text-transform: uppercase; }
.faehnchen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kasse-marke); transform: skewX(-20deg); pointer-events: none; }
.faehnchen__zusatz { margin-left: var(--sp-2); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Kopfzeilen-Chip */
.chip { position: relative; isolation: isolate; padding: var(--sp-1) var(--sp-4); color: var(--kasse-auf-marke); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); line-height: 1; text-transform: uppercase; white-space: nowrap; animation: chip-rein var(--dur-1) var(--ease-cine) both; }
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kasse-marke); transform: skewX(-20deg); pointer-events: none; }
@keyframes chip-rein { from { opacity: 0; transform: translateY(4px); } }

/* Aktion: gerade, nie gefuellt; Gewicht ueber den Rahmen. */
.act { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--kasse-gray-500); background: transparent; color: var(--kasse-gray-100); font: inherit; font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-snug); text-decoration: none; transition: background var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std); }
.act:hover:not(:disabled) { background: var(--kasse-hover); }
.act:focus-visible { outline: 2px solid var(--kasse-interaktion); outline-offset: 2px; }
.act:disabled { opacity: 0.45; cursor: default; }
.act--voll { width: 100%; }
.act--primary { border: 2px solid var(--kasse-interaktion); color: var(--kasse-interaktion); }

/* Icon-Chip: leise Aktion, 32 px Koerper in 44 px Trefferflaeche. */
.ikon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 6px; padding: 0; border: 0; background: var(--kasse-flaeche-leise); color: var(--kasse-gray-300); transition: background var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std); }
.ikon::before { content: ""; position: absolute; inset: -6px; }
.ikon:hover:not(:disabled) { background: var(--kasse-hover); color: var(--kasse-gray-100); }
.ikon:focus-visible { outline: 2px solid var(--kasse-interaktion); outline-offset: 2px; }
.ikon svg { width: 20px; height: 20px; }
.ikon--glas { background: var(--kasse-glass); box-shadow: inset 0 0 0 1px var(--kasse-glass-kante); }

/* Karte und Blatt */
.karte { display: grid; gap: var(--d-label); padding: var(--d-pad); background: var(--kasse-surface-2); border: 1px solid var(--kasse-gray-700); }
.blatt { display: grid; gap: var(--d-label); width: 100%; max-width: 40rem; margin-inline: auto; padding: var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); background: var(--kasse-surface); color: var(--kasse-white); border-top: 2px solid var(--kasse-marke); }
.blatt__griff { width: 2.5rem; height: 4px; margin: 0 auto var(--sp-2); background: var(--kasse-gray-700); }
.scrim { background: var(--kasse-scrim); }

/* Hinweise und Meldungen */
.hinweis { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--kasse-flaeche-leise); color: var(--kasse-gray-100); font-size: var(--fs-sm); line-height: var(--lh-body); }
.hinweis--gut { color: var(--kasse-ampel-gruen); }
.msg-err { margin: 0; color: var(--kasse-signal); font-size: var(--fs-sm); }
.msg-info { margin: 0; color: var(--kasse-gray-300); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* Zahl: nie in Marke oder Interaktion, Betonung ueber Gewicht und Groesse. */
.zahl { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.zahl--gross { font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); }

@media (prefers-reduced-motion: reduce) {
  .act, .ikon { transition: none; }
  .chip { animation: none; }
}