/* ═══ ActNow OS · Grundbausteine im neuen Look (Ebene `app`, 21.10.2026) ═════════════════════════
   Übersetzt die vorhandenen ActNow-Klassen (.btn, .btn-primary, .card, .input, .badge, .page-head …)
   auf die Tokens. Liegt über der alten style.css (Ebene `legacy`) und gewinnt deshalb ohne
   !important. Nur Optik — Größen/Abstände bleiben, damit kein Layout verrutscht. */

html, body { font-family: var(--font-sans); }
body {
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--foreground);
  font-feature-settings: 'ss01', 'cv11';
}
:where(h1, h2, h3, h4) { font-family: var(--font-heading); letter-spacing: -0.015em; }
::selection { background: var(--primary-soft); color: var(--foreground); }
a { color: var(--primary-ink); }

/* Zahlen in gleich breiten Ziffern (Zeiten, Kennzahlen, Tabellen) */
:where(.zahl, .mono, td, .co-row strong, .stat-value, .kpi-value, time) { font-variant-numeric: tabular-nums; }

/* ── Knöpfe ── */
.btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform var(--dur-1) var(--ease-spring), background-color var(--dur-2) ease,
              box-shadow var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Hauptknopf: weiß auf Graphit, schwarz im hellen Modus (Grün bleibt Marken-Akzent, kein Knopf-Fluten) */
.btn-primary, .btn-success {
  background: var(--cta);
  color: var(--cta-foreground);
  border: 1px solid transparent;
  box-shadow: var(--glow-primary);
}
.btn-primary:hover:not(:disabled), .btn-success:hover:not(:disabled) { background: var(--cta-hover); box-shadow: var(--glow-primary); }
.btn-primary .icon, .btn-success .icon { color: currentColor; }

.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-press); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--foreground); border: 1px solid transparent; box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); }

.btn-danger {
  background: var(--destructive-soft);
  color: var(--destructive);
  border: 1px solid color-mix(in srgb, var(--destructive) 35%, transparent);
  box-shadow: none;
}
.btn-danger:hover:not(:disabled) { background: var(--destructive); color: #fff; }

.btn-sm { border-radius: 10px; }
.btn-icon { border-radius: 10px; }

/* Am Handy: Tippziele mindestens 44 px (kleine Knöpfe 36 px) */
@media (pointer: coarse) {
  .btn { min-height: var(--tap); }
  .btn-sm, .btn-icon { min-height: 36px; min-width: 36px; }
}

/* ── Karten (Glas) ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass-blur-v);
  backdrop-filter: var(--glass-blur-v);
}
.card-header { border-bottom-color: var(--border); }

/* ── Felder ── */
.input {
  background: var(--input);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--foreground);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease;
}
.input:hover { border-color: var(--selected-border); }
.input:focus { border-color: var(--info); background: var(--input); box-shadow: 0 0 0 4px var(--info-soft); }
.input::placeholder { color: var(--subtle-foreground); }
.input-label { color: var(--muted-foreground); letter-spacing: .04em; font-weight: 600; }
.input-hint { color: var(--subtle-foreground); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
::selection { background: var(--info-soft); }

/* ── Abzeichen ── */
.badge { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: .01em; }
.badge-blue   { background: var(--info-soft);        color: var(--info); }
.badge-green  { background: var(--success-soft);     color: var(--success); }
.badge-orange { background: var(--warning-soft);     color: var(--warning); }
.badge-red    { background: var(--destructive-soft); color: var(--destructive); }
.badge-purple { background: rgba(197, 138, 249, .14); color: #c58af9; }
.badge-gray   { background: var(--muted);            color: var(--muted-foreground); }

/* ── Seitenkopf ── */
.page-head h1 {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--foreground);
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
.page-head h1 .icon { color: var(--primary-ink); }
.page-sub { color: var(--muted-foreground); font-size: var(--text-base); }

/* ── Tabellen ── */
.table th, table th { color: var(--muted-foreground); font-weight: 600; }
.table td, .table th { border-color: var(--border); }

/* ── Text-Hilfsklassen der alten CSS ── */
.text-secondary { color: var(--muted-foreground); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--destructive); }

/* ── Fokus überall sichtbar (Tastatur) ── */
:where(button, a, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}