/* ==========================================================================
   Design-Tokens — helles Labor
   --------------------------------------------------------------------------
   Grundgedanke: Der Schirm soll aussehen wie eine Laborbank bei Tageslicht,
   nicht wie ein Cockpit. Also viel Weiss, kuehle Graustufen, klare Kanten,
   weiche Schatten statt Leuchten. Farbe kommt fast nur vom Glatt-Rot und
   wird sparsam eingesetzt — sie markiert, was wichtig ist.

   Alle Masse gehen gegen eine gedachte Buehne von 1920x1080. --u ist dabei
   "ein Design-Pixel". Bewusst kein transform:scale() auf dem Wurzelelement:
   Text und SVG bleiben so auf 4K gestochen scharf.
   ========================================================================== */

:root {
  --u: min(0.0520833vw, 0.0925926vh);

  /* Flaechen: von Papierweiss bis zur Laborbank */
  --bg-0: #f4f6f8;
  --bg-1: #eaeef2;
  --bg-2: #dfe5eb;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-sunk: #eef2f6;

  /* Glatt-Rot als Leitfarbe. Wird pro Produkt aus dem JSON ueberschrieben. */
  --accent: #cc0000;
  --accent-rgb: 204 0 0;
  --accent-deep: #8f0000;

  /* Zweitfarben fuer Daten und Zustaende */
  --ink-blue: #1d4e6b;
  --ink-blue-rgb: 29 78 107;
  --ok: #1f8a5b;
  --warn: #b26a00;

  /* Schrift */
  --text: #16202a;
  --text-2: #46586a;
  --text-3: #7b8b9a;
  --text-4: #a9b6c2;

  /* Linien */
  --line: #d5dde5;
  --line-soft: #e6ecf1;
  --line-strong: #b9c6d1;

  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'DejaVu Sans Mono', monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Schatten: gestapelt und weich, wie Tageslicht von oben */
  --shadow-1: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(22, 32, 42, 0.04),
              0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(22, 32, 42, 0.05);
  --shadow-2: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(22, 32, 42, 0.05),
              0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(22, 32, 42, 0.08);
  --shadow-3: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(22, 32, 42, 0.06),
              0 calc(28 * var(--u)) calc(60 * var(--u)) rgba(22, 32, 42, 0.10);

  --radius: calc(4 * var(--u));
  --radius-lg: calc(8 * var(--u));
}

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

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
}

body {
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* Kiosk: keine Textauswahl, kein Kontextmenue, kein Cursor. */
  user-select: none;
  -webkit-user-select: none;
  cursor: none;
}

img {
  max-width: 100%;
  display: block;
}

/* --- Wiederkehrende Bausteine -------------------------------------------- */

/* Technische Kleinschrift: Laborprotokoll, nicht Cockpit */
.mono {
  font-family: var(--font-mono);
  font-size: calc(16 * var(--u));
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* Rubrik ueber einer Ueberschrift */
.kicker {
  font-family: var(--font-mono);
  font-size: calc(17 * var(--u));
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Karte: weisse Flaeche, weicher Schatten, feine Kante */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* Roter Markierungsstrich links — das einzige Chrome-Element, das bleibt */
.card--marked::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(20 * var(--u));
  bottom: calc(20 * var(--u));
  width: calc(3 * var(--u));
  background: var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- Standbild-Modus (?still=1) ------------------------------------------
   Alles sofort sichtbar, nichts in Bewegung. Nur fuer Screenshots und die
   Textabnahme gedacht — im Messebetrieb greift keine dieser Regeln. */

.is-still *,
.is-still *::before,
.is-still *::after {
  transition: none !important;
  animation: none !important;
}
.is-still .fade,
.is-still .word,
.is-still [class*='__'] {
  opacity: 1 !important;
  transform: none !important;
}
/* Der Aufblendblitz beim Erkennen legt sonst einen weissen Schleier ueber
   genau die Karte, die man fotografieren wollte. */
.is-still .bloom {
  opacity: 0 !important;
}