/* =========================================================================
   FF Mauer-Oehling — Designsystem „Leitstand 2.0"
   Tiefdunkle Leitstand-Farbgebung + weiche Editorial-Formensprache
   (Pills, Rot-Wash-Auswahl, 18px-Karten). Konzept: tasks/design-konzepte/
   ========================================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Public theme (override-bar via ThemeSettingsService → head.php :root) */
  --bg: #0b0d10;
  --bg-glow: #12151b;
  --bg-grid: #10131a;
  --surface: #12151b;
  --surface-2: #171b22;
  --surface-3: #1c212a;
  --surface-soft: #232935;
  --line: #232935;
  --line-soft: #1a1f28;

  --text: #dfe5ec;
  --text-strong: #ffffff;
  --text-soft: #a5aeba;
  --muted: #79828f;

  --primary: #e8323f;
  --primary-dark: #c8132c;
  /* Abgeleitet aus --primary, folgt damit automatisch Theme-Anpassungen. */
  --primary-soft: color-mix(in srgb, var(--primary) 78%, #ffffff);
  --primary-wash: color-mix(in srgb, var(--primary) 10%, transparent);
  --primary-ring: color-mix(in srgb, var(--primary) 32%, transparent);
  --accent: #e09b52;
  --ok: #33a06a;
  --ok-wash: rgba(51, 160, 106, .1);
  --warn: #bd7f24;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .3);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .35);
  --panel-shadow: var(--shadow-lg);
  /* Kachel-Verlauf: oben minimal heller (Theme: card_end → card_start). */
  --card-grad: linear-gradient(178deg, var(--card-light, var(--surface-2)), var(--card, var(--surface)));

  /* Component surface aliases (keep dark theme consistent everywhere) */
  --card: var(--surface);
  --card-light: var(--surface-2);
  --card-bg: var(--surface);
  --admin-card-bg: var(--surface);
  --admin-sidebar-bg: #0b0d11;
  --admin-sidebar-text: #d9e0ea;
  --admin-focus: var(--primary-soft);

  --container: 1320px;
  --container-wide: 1480px;
  --container-narrow: 1080px;

  --nav-height: 56px;
  --topbar-height: 66px;
  --admin-sidebar-width: 240px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  background: #0b0d10;
  min-height: 100%;
}
body {
  font-family: var(--font-sans);
  background: var(--bg, #0b0d10);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Leitstand-Atmosphäre: dezentes 48px-Raster + radialer Glow oben rechts. */
body.public-surface {
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
    radial-gradient(1100px 520px at 72% -12%, var(--bg-glow) 0%, var(--bg) 60%);
  background-size: 48px 48px, 48px 48px, auto;
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 2px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
}
/* Datenwerte (Zahlen, Uhrzeiten, Pegel) tragen Mono — Leitstand-Signatur. */
.mono, .data-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers ---------- */
.container { width: min(var(--container), 92vw); margin-inline: auto; }
.container-wide-page { width: min(var(--container-wide), 94vw); margin-inline: auto; }
.container-narrow { width: min(var(--container-narrow), 92vw); margin-inline: auto; }
.section { padding: 32px 0; }
.muted { color: var(--muted); }