/* FAZ-Azubis – gemeinsames, sachliches Gestaltungssystem */
:root {
  --brand-deep: #ef4b0b;
  --brand: #176b70;
  --brand-light: #dceeed;
  --page: #f4f7f6;
  --surface: #ffffff;
  --surface-soft: #edf3f2;
  --ink: #19373b;
  --muted: #64777a;
  --line: #d5e0df;
  --focus: #2b8a87;
  --shadow: 0 10px 28px rgba(18, 62, 67, .08);
  color-scheme: light dark;
}

html, body { min-height: 100%; }
body {
  background: var(--page) !important;
  color: var(--ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: .005em;
}

h1, h2, h3, strong, th { color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; }
h2 { font-size: 1.35rem; line-height: 1.2; }

.top, .topbar {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 0 rgba(18,62,67,.04);
}
.page, .page-shell { background: transparent !important; }
.card, .panel, .stat-card, .tip-card, .auth-card, .quiz-dialog {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow);
}
.card, .panel { padding: 24px; }
.muted, .user-name, .intro, .note { color: var(--muted) !important; }

input, textarea, select, .filter, .form input, .form select {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid #b9ccca !important;
  border-radius: 4px !important;
}
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent);
  outline-offset: 2px;
}
button, .button, .primary-button, .form button, .primary {
  border-radius: 4px !important;
  font-weight: 700;
}
.primary-button, .form button, .primary {
  background: var(--brand) !important;
  color: #fff !important;
}
.button, .logout, .delete {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: #b9ccca !important;
}
.button:hover, .logout:hover { border-color: var(--brand) !important; color: var(--brand) !important; }
.eyebrow { color: var(--brand) !important; }

.hero {
  background: linear-gradient(120deg, #dceeed, #f3f8f7) !important;
  border: 1px solid #c9dfdd;
  border-radius: 10px !important;
  box-shadow: var(--shadow);
}
.choice-card, .answer { border-radius: 6px !important; }
.tip-card { background: #fffaf0 !important; border-color: #eadbb5 !important; }

.side, .shared-admin-sidebar {
  background: var(--brand-deep) !important;
}
.side .nav, .shared-admin-sidebar a { border-radius: 4px !important; }
.side .nav.active, .side .nav:hover, .shared-admin-sidebar a.active, .shared-admin-sidebar a:hover {
  background: #c83d08 !important;
}
.layout, .main, .has-shared-admin-sidebar { min-height: 100vh; background: var(--page); }

@media (prefers-color-scheme: dark) {
  :root {
    --page: #101b1e;
    --surface: #19282c;
    --surface-soft: #21363a;
    --ink: #e8f0ef;
    --muted: #a7b9ba;
    --line: #354b4e;
    --brand-light: #234445;
    --shadow: 0 12px 32px rgba(0,0,0,.2);
  }
  body, .layout, .main, .has-shared-admin-sidebar { background: var(--page) !important; color: var(--ink) !important; }
  h1, h2, h3, strong, th, .brand, .topbar .brand { color: var(--ink) !important; }
  .hero { background: linear-gradient(120deg, #1d393b, #1a2d31) !important; border-color: #315458 !important; }
  .hero-copy, .progress-ring span { color: var(--muted) !important; }
  .tip-card { background: #2c2a20 !important; border-color: #5e522e !important; }
  input, textarea, select, .filter, .form input, .form select, .button, .logout, .delete {
    background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important;
  }
  .choice-card, .answer { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
  .bar, .quiz-progress { background: #32484b !important; }
  a { color: #72c7c2; }
}

.brand-mark img, .mark img, .shared-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.brand-mark, .mark, .shared-mark { overflow: hidden; }