/* =============================================================================
   Justiz.NRW — Onboarding-Quiz · Design-System  (Runde 2)

   Zwei Register, nicht eines: die Verhandlung ist dunkel, die Auflösung ist Akte.
   Der Wechsel dazwischen ist das ganze Konzept.

   Alle Größen hängen an der Bildhöhe, nicht an Pixeln — damit die Schrift auf
   der Leinwand gleich groß ist, egal ob der Beamer 720p oder 4K liefert.
   Keine externen Fonts: die Handys hängen im LAN ohne Weg ins Internet.
============================================================================= */

/* ----------------------------------------------------------- Metriken -----
   Palatino (Windows) und Georgia haben 12 % unterschiedliche Mittellänge.
   Ohne Normalisierung ist das Layout auf zwei Rechnern zwei Layouts.
-------------------------------------------------------------------------- */
@font-face {
  font-family: "Akte";
  src: local("Palatino Linotype"), local("Palatino"), local("Iowan Old Style");
  size-adjust: 104%; ascent-override: 88%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Akte";
  src: local("Georgia");
  size-adjust: 96%; ascent-override: 88%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  /* --- Nacht (Verhandlung) --- */
  --ink-900: #05080f;
  --ink-800: #0a0f1c;
  --ink-700: #111a2e;
  --surface: #1b2740;      /* Kartenfläche, deckend  */
  --surface-2:#243352;
  --line:    #56679a;      /* 3,4:1 — auf der Wand sichtbar */
  --line-soft:#33456a;

  /* --- Papier (Auflösung) --- */
  --paper:   #f2ede1;
  --paper-2: #ddd5c2;
  --paper-line: rgba(10,15,28,.09);

  --fg:      #f4f1e9;
  --fg-2:    #c3cbdd;
  --muted:   #98a5bf;

  /* --- Akzente --- */
  --brass:   #e0b93f;
  --brass-2: #f3dc9a;
  --brass-3: #7d6318;
  --seal:    #c8102e;
  --rhine:   #12a271;

  /* Antwortmarken — Form UND Farbe, damit Farbfehlsichtigkeit egal ist */
  --m1: #e0b93f;   /* Messing  · Quadrat */
  --m2: #e0576b;   /* Siegel   · Kreis   */
  --m3: #35c48f;   /* Rhein    · Raute   */
  --m4: #7fa8ff;   /* Papier   · Schild  */

  /* --- Typo --- */
  --serif: "Akte", "Palatino Linotype", Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;

  /* Modulare Skala, Faktor 1.25. Wurzel wird pro Dokument gesetzt. */
  --t-0: 0.800rem;
  --t-1: 1.000rem;
  --t-2: 1.250rem;
  --t-3: 1.563rem;
  --t-4: 1.953rem;
  --t-5: 2.441rem;
  --t-6: 3.052rem;
  --t-7: 3.815rem;
  --t-8: 4.768rem;

  /* Abstände: ein Raster, sechs Stufen */
  --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1.125rem;
  --s-4: 1.688rem; --s-5: 2.531rem; --s-6: 3.797rem;

  --r-sm: 5px; --r-md: 10px; --r-lg: 16px;

  --ease:      cubic-bezier(.22,.75,.28,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.3,1.5,.5,1);

  /* Namen aus der ersten Fassung. Ein ungültiges var() kippt die gesamte
     Deklaration — ohne diese Aliase verlieren die Handy-Tasten ihren Rand. */
  --ink-500:    #2c3a5c;
  --ink-400:    #46587f;
  --brass-deep: var(--brass-3);
  --brass-soft: var(--brass-2);
  --ok:   var(--rhine);
  --bad:  #e0576b;
  --warn: var(--brass);
}

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

html {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-synthesis: none;
}

body {
  background: var(--ink-800);
  color: var(--fg);
  font-family: var(--sans);
  overscroll-behavior: none;
  transition: background .5s var(--ease), color .5s var(--ease);
}

/* Zahlen laufen NIE in Serif — Georgia setzt Mediävalziffern ohne tnum,
   dadurch wackeln rechtsbündige Spalten und die 3 hängt unter der Linie. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-variant-ligatures: none;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; }

/* Laufweite folgt der Größe: Palatino ist für 10pt gezeichnet und fällt
   bei Displaygrößen ohne negative Sperrung auseinander. */
.t-3 { font-size: var(--t-3); letter-spacing: -.006em; }
.t-4 { font-size: var(--t-4); letter-spacing: -.012em; }
.t-5 { font-size: var(--t-5); letter-spacing: -.018em; }
.t-6 { font-size: var(--t-6); letter-spacing: -.022em; }
.t-7 { font-size: var(--t-7); letter-spacing: -.026em; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: .14em;      /* .28em ließ die Wörter zerfallen */
  word-spacing: .22em;
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--brass);
}

.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--brass-3) 15%, var(--brass) 50%, var(--brass-3) 85%, transparent);
  opacity: .5;
}

/* ---------------------------------------------------------------- Emblem --
   Das amtliche Wappenzeichen des Landes Nordrhein-Westfalen liegt in
   public/wappen-nrw.svg und bringt seine eigenen Farben mit. Nicht
   einfärben, nicht verzerren, nur skalieren.
-------------------------------------------------------------------------- */
.emblem {
  flex: none;
  display: block;
  width: auto;                 /* Seitenverhaeltnis 406:426 haelt sich selbst */
  object-fit: contain;
}

/* --------------------------------------------------------------- Buttons -- */
.btn {
  font-family: var(--sans);
  font-size: var(--t-1); font-weight: 600;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--brass-3);
  border-radius: var(--r-sm);
  background: rgba(224,185,63,.1);
  color: var(--brass-2);
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s var(--ease);
}
.btn:hover:not(:disabled) { background: rgba(224,185,63,.22); border-color: var(--brass); transform: translateY(-1px); }
.btn:disabled { opacity: .3; cursor: not-allowed; }
.btn-primary { background: var(--brass); color: var(--ink-900); border-color: var(--brass); font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: var(--brass-2); }
.btn-ghost { background: transparent; border-color: var(--line-soft); color: var(--muted); }
.btn-ghost:hover:not(:disabled) { border-color: var(--muted); color: var(--fg); }

/* ------------------------------------------------------ Antwortmarken -----
   Vier unterscheidbare Silhouetten. Der Moderator kann "das Siegel" rufen,
   und auf Handy und Leinwand steht dieselbe Marke.
-------------------------------------------------------------------------- */
.mark { flex: none; display: grid; place-items: center; }
.mark svg { width: 100%; height: 100%; fill: none; stroke-width: 3.2; overflow: visible; }
.mark.k0 svg { stroke: var(--m1); }
.mark.k1 svg { stroke: var(--m2); }
.mark.k2 svg { stroke: var(--m3); }
.mark.k3 svg { stroke: var(--m4); }
.mark.k0 { --mc: var(--m1); } .mark.k1 { --mc: var(--m2); }
.mark.k2 { --mc: var(--m3); } .mark.k3 { --mc: var(--m4); }

/* ------------------------------------------------------------ Animation -- */
@keyframes riseIn  { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
@keyframes popIn   { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes stampIn { 0% { opacity: 0; transform: rotate(-9deg) scale(2.4); }
                     70% { opacity: .95; transform: rotate(-9deg) scale(.94); }
                     100% { opacity: .9; transform: rotate(-9deg) scale(1); } }
@keyframes climb   { 0%,100% { box-shadow: none; } 30% { box-shadow: 0 0 0 2px var(--brass), 0 0 3rem -.5rem var(--brass); } }
@keyframes urgentPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-group(*) { animation: none !important; }
}

::selection { background: var(--brass); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }