/* ============================================================
   OFENKIND – gemeinsame Gestaltung für alle Displays
   Einzige Quelle für Farben, Schriften und Kopfzeile.

   WICHTIG: Farben und Schriften bitte nur hier ändern. Vorher hatte
   jede Seite ihren eigenen :root-Block – dadurch sind die Seiten
   auseinandergelaufen (halbes System in Barlow/#101318, halbes in
   Oswald/oklch). Seiten definieren nur noch ihr eigenes Layout.

   Werte stammen aus dem Auftritt auf ofenkind.de:
     Hintergrund  oklch(8% 0 0)        fast schwarz
     Text         oklch(96% .01 80)    warmes Off-White
     Ember        oklch(74% .03 80)    Akzent (Glut)
     Sand         #c1b9ac              Steinfarbe aus dem Ofen im Logo
   ============================================================ */

:root {
  /* ---- Marke ---- */
  --bg:         oklch(8% 0 0);
  --panel:      oklch(18% .005 60);
  --panel-edge: oklch(22% .01 60);
  --ink:        oklch(96% .01 80);
  --ink-dim:    oklch(96% .01 80 / 55%);
  --ember:      oklch(74% .03 80);
  --ember-glow: oklch(84% .025 80);
  --sand:       #c1b9ac;
  --sand-ink:   #2a271f;

  /* ---- Statusfarben (bewusst kräftig, müssen aus 3 m Abstand lesbar sein) ---- */
  --neu:      #4da3ff;
  --arbeit:   #ffb02e;
  --fertig:   #3ddc84;
  --abgeholt: #8d97a5;
  --danger:   #ff5d5d;

  /* ---- Schrift ---- */
  --font-display: "Oswald", "Barlow Condensed", sans-serif;
  --font-body:    "Inter", "Barlow", system-ui, sans-serif;

  --radius: 14px;

  /* Aliasse, damit ältere Seitenregeln weiterlaufen */
  --line:   var(--panel-edge);
  --accent: var(--arbeit);
  --ok:     var(--fertig);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* ---------- Kopfzeile mit Logo (auf jeder Seite gleich) ---------- */
header .logo { height: 56px; width: auto; flex: 0 0 auto; }
header h1 {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}

.badge {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--panel-edge); color: var(--ink-dim);
  white-space: nowrap;
}
.badge.live { color: var(--fertig); border-color: var(--fertig); }

.spacer { flex: 1; }

/* ---------- PIN-Gate (Küche, Abholstation, Kasse, Admin) ---------- */
#pin-gate .logo { width: min(380px, 80vw); height: auto; margin-bottom: .5rem; }
#pin-gate h2 {
  font-family: var(--font-display); font-size: 2rem; letter-spacing: .05em;
}