/* frontend/provider/theme-modern.css
 * Zweites Design für das Provider-Portal. Aktiv nur wenn <html data-design="modern"> gesetzt ist
 * (siehe theme-config.php + Boot-IIFE in index.html). Überschreibt ausschließlich vorhandene
 * CSS-Variablen und Selektoren aus dem Haupt-<style>-Block — keine neuen Klassen/IDs im HTML,
 * keine Änderung an JS-Bindings. Der alte <style>-Block bleibt unverändert als Fallback.
 */

[data-design="modern"] {
  --bg: #fafafa;
  --bg2: #ffffff;
  --bg3: #f2f2f2;
  --border: #e6e6e6;
  --text: #1d1d1d;
  --muted: #808080;
  --accent: #3b82f6;
  --accent2: #10b981;
  --warn: #b8873a;
  --danger: #ef4444;
}

[data-design="modern"] body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

[data-design="modern"] h2,
[data-design="modern"] .card h3,
[data-design="modern"] header .logo,
[data-design="modern"] .card .value,
[data-design="modern"] .modal h3 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
}

[data-design="modern"] h2 { font-weight: 800; letter-spacing: -0.01em; }
[data-design="modern"] .card .value { font-weight: 800; letter-spacing: -0.01em; }
[data-design="modern"] header .logo { font-weight: 800; }

/* ─── Karten & Flächen: mehr Tiefe statt platter Fläche ───────────────── */
[data-design="modern"] .card,
[data-design="modern"] .table-wrap,
[data-design="modern"] .modal,
[data-design="modern"] .setup-stepper,
[data-design="modern"] .setup-detail {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.10);
}

[data-design="modern"] .stats-grid .card,
[data-design="modern"] .card {
  padding: 18px 20px;
}

/* ─── Buttons ───────────────────────────────────────────────────────── */
[data-design="modern"] .btn {
  border-radius: 10px;
  font-weight: 600;
  transition: opacity .15s, transform .1s;
}
[data-design="modern"] .btn:active { transform: scale(.97); }

/* ─── Badges/Pills ──────────────────────────────────────────────────── */
[data-design="modern"] .badge {
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ─── Nav: aktiver Eintrag mit weicherem Indikator ─────────────────────── */
[data-design="modern"] nav a.active {
  border-radius: 0 10px 10px 0;
}

/* ─── Wordmark-Suffix ".link" in Markengrün ────────────────────────────── */
[data-design="modern"] header .logo .tld-accent {
  color: #10b981;
}

/* ─── Unter-Überschriften vereinheitlicht (waren 14/17/15px für dieselbe Rolle) ── */
[data-design="modern"] .card h3,
[data-design="modern"] .modal h3,
[data-design="modern"] .vl-tour-title {
  font-size: 15px;
}
