/* Grundstil und wiederverwendbare Bausteine. Farben nur über tokens.css. */

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

/* `hidden` muss immer gewinnen, auch gegen display:flex/grid aus Komponenten-Klassen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
}

h1, h2, h3 { margin: 0 0 var(--sp-3); font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Zahlen, IDs, Hashes */
.mono, code, kbd, .id, .hash, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }

code {
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 4px;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
}

/* Layout */
.page { max-width: 1280px; margin: 0 auto; padding: var(--sp-5) var(--sp-4); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.card--raised { background: var(--surface-2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--hit);
  padding: 0 var(--sp-4);
  font: inherit; font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { border-color: var(--text-2); }
.btn--primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.btn--primary:hover { filter: brightness(1.08); border-color: var(--accent); }

/* Status-Badges und große Status-Buttons.
   Status nie nur über Farbe: immer Icon + Text. */
.status {
  --fg: var(--open-fg); --bgc: var(--open-bg); --bd: var(--open-bd);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 8px;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--fg); background: var(--bgc);
  border: 1px solid var(--bd); border-radius: var(--radius-sm);
  white-space: nowrap;
}
.btn.status { min-height: 64px; padding: 0 var(--sp-5); font-size: var(--fs-lg); border-radius: var(--radius); }
.btn.status:hover { filter: brightness(1.15); border-color: var(--fg); }

.status--pass  { --fg: var(--pass-fg);  --bgc: var(--pass-bg);  --bd: var(--pass-bd); }
.status--fail  { --fg: var(--fail-fg);  --bgc: var(--fail-bg);  --bd: var(--fail-bd); }
.status--block { --fg: var(--block-fg); --bgc: var(--block-bg); --bd: var(--block-bd); }
.status--skip  { --fg: var(--skip-fg);  --bgc: var(--skip-bg);  --bd: var(--skip-bd); }
.status--warn  { --fg: var(--warn-fg);  --bgc: var(--warn-bg);  --bd: var(--warn-bd); }
.status--info  { --fg: var(--info-fg);  --bgc: var(--info-bg);  --bd: var(--info-bd); }

.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Hinweisbalken */
.banner {
  --fg: var(--text); --bgc: var(--surface-2); --bd: var(--border);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--fg); background: var(--bgc);
  border: 1px solid var(--bd); border-radius: var(--radius);
}