/* ═══════════════════════════════════════════════════════════════════════════
   king-theme.css — Zentrales Design-System für KING
   Grundlage: doku/ui-ux/MODERNISIERUNG-KONZEPT.md + DESIGN-INVENTUR.md (2026-06-18)
   Eine Quelle für alle Module. Plain CSS, kein Framework.
   Reihenfolge: 1) Tokens  2) Legacy-Alias  3) Dark-Mode  4) Komponenten  5) A11y
   WICHTIG: In jede Seite VOR dem modul-eigenen Inline-<style> einbinden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. ZENTRALE TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Fonts (KING-Schriften beibehalten) */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Instrument Sans', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Farben – Flächen */
  /* GULF RACING: Weiß · Schwarz · Babyblau · Orange. Hintergrund = abgeschwächtes Hellblau. */
  --color-bg-primary:   #e9f5fb;  /* App-Hintergrund: Gulf-Hellblau, abgeschwächt */
  --color-bg-secondary: #ffffff;  /* Karten: Weiß */
  --color-bg-tertiary:  #ffffff;  /* Header: Weiß */
  --color-bg-sunken:    #d8ecf7;  /* tiefste Fläche: Hellblau */

  /* Text: Schwarz */
  --color-text-primary:   #131313;
  --color-text-secondary: #50616a;
  --color-text-tertiary:  #8a98a0;

  /* Rahmen: Schwarz (Gulf-Outline) */
  --color-border:        #1a1a1a;
  --color-border-strong: #000000;

  /* Gulf-Akzente: Gulf-Blau (lesbar) · Babyblau (Fläche) · Orange (Pop) · Schwarz */
  --color-accent:        #d6247f;
  --color-accent-strong: #11688f;
  --color-accent-light:  rgba(244,114,182,0.18);
  --color-accent-border: #1a1a1a;
  --c1:#f472b6; --c2:#ec4899; --c3:#d6247f; --c4:#ec4899;

  --color-success:       #2a7a4a;
  --color-success-light: rgba(42,122,74,0.09);
  --color-success-border:rgba(42,122,74,0.25);

  --color-danger:        #b03030;
  --color-danger-light:  rgba(176,48,48,0.09);
  --color-danger-border: rgba(176,48,48,0.25);

  --color-warning:       #be185d;
  --color-warning-light: rgba(154,80,16,0.09);
  --color-warning-border:rgba(154,80,16,0.25);

  --color-info:          #2855a0;
  --color-info-light:    rgba(40,85,160,0.09);
  --color-info-border:   rgba(40,85,160,0.25);

  /* Typo-Skala */
  --fs-xs:  0.625rem;  /* 10px – Labels/Caps   */
  --fs-sm:  0.75rem;   /* 12px – Hinweise      */
  --fs-base:0.875rem;  /* 14px – Fließtext     */
  --fs-md:  1rem;      /* 16px                 */
  --fs-lg:  1.125rem;  /* 18px                 */
  --fs-xl:  1.375rem;  /* 22px                 */
  --fs-2xl: 1.75rem;   /* 28px – Überschrift   */
  --fs-3xl: 2.25rem;   /* 36px – Hero          */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --ls-caps: 0.16em;   /* Letter-Spacing für Uppercase-Labels */

  /* Spacing (4px-Skala) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10:40px;
  --space-12:48px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.14);
  --shadow-2xl:0 24px 60px rgba(0,0,0,0.18);

  /* Transitions / Easing */
  --transition-fast: 0.13s ease;
  --transition-base: 0.20s ease;
  --transition-slow: 0.30s ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fokus-Ring */
  --focus-ring: 0 0 0 3px rgba(13,150,104,0.35);
}

/* ─── 2. LEGACY-ALIAS-BLOCK (KRITISCH) ────────────────────────────────────────
   Bestehende Variablennamen auf neue Tokens mappen, damit kein Modul bricht.
   Module migrieren schrittweise; bis dahin greifen diese Aliase. */
:root {
  --bg:     var(--color-bg-primary);
  --s1:     var(--color-bg-secondary);
  --s2:     var(--color-bg-tertiary);
  --s3:     var(--color-bg-sunken);
  --border: var(--color-border);
  --dark:   var(--color-text-primary);
  --muted:  var(--color-text-secondary);
  --muted2: var(--color-text-tertiary);

  --gold:   var(--color-accent);
  --gd:     var(--color-accent-light);   /* helle Goldfläche  */
  --gl:     var(--color-accent-border);  /* Goldrahmen/-tint  */

  --green:  var(--color-success);
  --gn:     var(--color-success-light);

  --red:    var(--color-danger);
  --rn:     var(--color-danger-light);

  --blue:   var(--color-info);
  --bn:     var(--color-info-light);

  --orange: var(--color-warning);
  --on:     var(--color-warning-light);
}

/* ─── 3. DARK MODE (Tokens überschreiben) ─────────────────────────────────────
   DEAKTIVIERT (2026-06-19): App ist noch nicht durchgängig dark-fähig. Würde der
   Auto-Switch greifen, kämen bei OS-Dark-Mode dunkle Komponenten (.btn/.card/.stat,
   die --color-* nutzen) auf hell gestylte Seiten -> Mischmasch. Block bleibt als
   Vorlage erhalten; Trigger neutralisiert (and (max-width:0px) matcht nie).
   Wieder aktivieren: `and (max-width:0px)` entfernen, sobald alle Module dark-tauglich sind. */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  :root {
    --color-bg-primary:   #14130f;
    --color-bg-secondary: #1d1b15;
    --color-bg-tertiary:  #26241c;
    --color-bg-sunken:    #2f2c22;

    --color-text-primary:   #f0ece2;
    --color-text-secondary: #b3aa98;
    --color-text-tertiary:  #847c6c;

    --color-border:        #353027;
    --color-border-strong: #45402f;

    --color-accent:        #c3a861;
    --color-accent-strong: #d8bd76;
    --color-accent-light:  rgba(195,168,97,0.14);
    --color-accent-border: rgba(195,168,97,0.32);

    --color-success:       #4fae77;
    --color-success-light: rgba(79,174,119,0.14);
    --color-success-border:rgba(79,174,119,0.32);

    --color-danger:        #d96b6b;
    --color-danger-light:  rgba(217,107,107,0.14);
    --color-danger-border: rgba(217,107,107,0.32);

    --color-warning:       #d08a3e;
    --color-warning-light: rgba(208,138,62,0.14);
    --color-warning-border:rgba(208,138,62,0.32);

    --color-info:          #6f9fdc;
    --color-info-light:    rgba(111,159,220,0.14);
    --color-info-border:   rgba(111,159,220,0.32);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.55);
    --shadow-xl: 0 16px 40px rgba(0,0,0,0.6);
    --shadow-2xl:0 24px 60px rgba(0,0,0,0.7);

    --focus-ring: 0 0 0 3px rgba(195,168,97,0.45);
  }
}

/* ─── 4. KOMPONENTEN ──────────────────────────────────────────────────────── */

/* — Buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--color-bg-tertiary); color: var(--color-text-primary);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.btn-primary   { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover   { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn-secondary { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn-secondary:hover { color: var(--color-accent); border-color: var(--color-accent); }
.btn-success   { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success-border); }
.btn-success:hover   { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-danger    { background: var(--color-danger-light); color: var(--color-danger); border-color: var(--color-danger-border); }
.btn-danger:hover    { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

.btn-xs { padding: 0.3rem 0.6rem; font-size: 0.5rem; }
.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.56rem; }
.btn-lg { padding: 0.7rem 1.5rem; font-size: var(--fs-sm); }

/* — Cards — */
.card {
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5); overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}
.card-title {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-tertiary);
}
.card-body   { padding: var(--space-5); }
.card-footer {
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary); display: flex; align-items: center; gap: var(--space-3);
}

/* — Tabellen — */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  text-align: left; padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
.table tr:last-child td, .table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--color-bg-tertiary); }
/* Mediävalziffern (oldstyle figures) global abschalten: Cormorant rendert 0/1 sonst als O/I –
   für KPIs/Zahlen unleserlich. Versalziffern (lining) erzwingen; font-variant-numeric vererbt auf alle
   Elemente. Sans-/Mono-Zahlen sind ohnehin lining -> dort keine sichtbare Änderung. */
html { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.table-num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* — Badges — */
.badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary); color: var(--color-text-secondary);
}
.badge-accent  { color: var(--color-accent);  background: var(--color-accent-light);  border-color: var(--color-accent-border); }
.badge-success { color: var(--color-success); background: var(--color-success-light); border-color: var(--color-success-border); }
.badge-danger  { color: var(--color-danger);  background: var(--color-danger-light);  border-color: var(--color-danger-border); }
.badge-warning { color: var(--color-warning); background: var(--color-warning-light); border-color: var(--color-warning-border); }
.badge-info    { color: var(--color-info);    background: var(--color-info-light);    border-color: var(--color-info-border); }

/* — Overlay / Modal — */
.overlay {
  position: fixed; inset: 0; background: rgba(24,22,15,0.45);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  z-index: 1000; opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base);
}
/* .open ist die Theme-Konvention; viele Module togglen aber .on/.show/.active als "sichtbar".
   Alle als Sichtbar-Zustand anerkennen, sonst oeffnet das Modal display:flex, bleibt aber
   opacity:0/visibility:hidden -> unsichtbar ("Auftrag laesst sich nicht oeffnen"). */
.overlay.open, .overlay.on, .overlay.show, .overlay.active { opacity: 1; visibility: visible; }
.modal {
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl);
  width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column;
  transform: translateY(8px) scale(0.99); transition: transform var(--transition-base) var(--ease-out);
}
.overlay.open .modal, .overlay.on .modal, .overlay.show .modal, .overlay.active .modal { transform: none; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border);
}
.modal-title { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: var(--fw-medium); color: var(--color-text-primary); }
.modal-close {
  background: none; border: none; cursor: pointer; color: var(--color-text-tertiary);
  font-size: var(--fs-xl); line-height: 1; padding: var(--space-1); border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.modal-close:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }
.modal-body   { padding: var(--space-5); overflow-y: auto; }
.modal-footer {
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
}

/* — Toast — */
.toast {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); color: var(--color-text-primary);
  max-width: 320px; box-shadow: var(--shadow-lg); z-index: 1100;
  transform: translateX(160%); transition: transform var(--transition-base) var(--ease-out);
}
.toast.open { transform: none; }
.toast-success { border-left-color: var(--color-success); }
.toast-danger  { border-left-color: var(--color-danger); }
.toast-warning { border-left-color: var(--color-warning); }
.toast-info    { border-left-color: var(--color-info); }

/* — Formulare — */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-label {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--color-text-secondary);
}
.form-input, .form-select, .form-textarea {
  width: 100%; font-family: var(--font-sans); font-size: var(--fs-base);
  color: var(--color-text-primary); background: var(--color-bg-secondary);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem; outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-textarea { resize: vertical; min-height: 90px; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-accent); box-shadow: var(--focus-ring);
}
.form-input:disabled, .form-select:disabled, .form-textarea:disabled {
  background: var(--color-bg-tertiary); color: var(--color-text-secondary); cursor: not-allowed;
}
.form-input[aria-invalid="true"], .form-select[aria-invalid="true"], .form-textarea[aria-invalid="true"] {
  border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-light);
}
.form-hint  { font-size: var(--fs-sm); color: var(--color-text-tertiary); }
.form-error { font-size: var(--fs-sm); color: var(--color-danger); display: flex; align-items: center; gap: 0.3em; }

/* — Grids (EINE Media-Query → mobil 1 Spalte) — */
.grid     { display: grid; gap: var(--space-4); }
.grid-2   { grid-template-columns: repeat(2, 1fr); }
.grid-3   { grid-template-columns: repeat(3, 1fr); }
.grid-4   { grid-template-columns: repeat(4, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-2-1 { grid-template-columns: 1fr; }
}

/* — Stat / KPI-Kachel — */
.stat {
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-xs);
}
.stat-label  { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-tertiary); }
.stat-value  { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: var(--fw-medium); color: var(--color-text-primary); margin-top: var(--space-1); }
.stat-change { font-size: var(--fs-sm); margin-top: var(--space-1); }
.stat-change.up   { color: var(--color-success); }
.stat-change.down { color: var(--color-danger); }
.stat-bar { height: 4px; border-radius: var(--radius-full); background: var(--color-bg-sunken); margin-top: var(--space-2); overflow: hidden; }
.stat-bar > span { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }

/* — Ladezustände — */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-sunken) 37%, var(--color-bg-tertiary) 63%);
  background-size: 400% 100%; border-radius: var(--radius-sm); animation: king-skeleton 1.4s ease infinite;
}
@keyframes king-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--color-border); border-top-color: var(--color-accent);
  animation: king-spin 0.7s linear infinite; display: inline-block;
}
@keyframes king-spin { to { transform: rotate(360deg); } }

/* — Empty-State — */
.empty-state {
  text-align: center; padding: var(--space-10) var(--space-5); color: var(--color-text-secondary);
}
.empty-state-icon  { font-size: var(--fs-3xl); opacity: 0.4; margin-bottom: var(--space-3); }
.empty-state-title { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.empty-state-text  { font-size: var(--fs-base); color: var(--color-text-tertiary); }

/* — Hinweis-Boxen — */
.error-box, .warning-box, .success-box, .info-box {
  border: 1px solid; border-left-width: 3px; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-size: var(--fs-base); display: flex; gap: var(--space-2);
}
.error-box   { background: var(--color-danger-light);  border-color: var(--color-danger-border);  color: var(--color-danger); }
.warning-box { background: var(--color-warning-light); border-color: var(--color-warning-border); color: var(--color-warning); }
.success-box { background: var(--color-success-light); border-color: var(--color-success-border); color: var(--color-success); }
.info-box    { background: var(--color-info-light);    border-color: var(--color-info-border);    color: var(--color-info); }

/* — Einheitlicher Modul-Header (von king-nav.js in <div id="king-header"> injiziert) —
   Ersetzt die ~46 inline duplizierten Header-Blöcke. Kategorie/Titel kommen aus dem
   MODULE-Array von king-nav.js -> korrekte Eyebrow je Modul (nicht mehr überall „Vertrieb & Qualität"). */
.king-hdr { display: flex; align-items: center; gap: 18px; padding: 14px 32px;
  border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary); }
.king-hdr-logo  { height: 96px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(20,40,60,.18)); }
.king-hdr-brand { padding-right: 0.9rem; border-right: 1px solid var(--color-border); }
.king-hdr-king  { font-family: var(--font-serif); font-size: 2.1rem; font-weight: var(--fw-medium);
  letter-spacing: 0.18em; line-height: 1; color: #131313; }
.king-hdr-sub   { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.12em;
  color: var(--color-text-tertiary); margin-top: 0.2rem; }
.king-hdr-eyebrow { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--color-text-secondary); }
.king-hdr-h1    { font-family: var(--font-serif); font-size: 1.9rem; font-weight: var(--fw-medium);
  line-height: 1.1; color: var(--color-text-primary); }
@media (max-width: 768px) { .king-hdr { padding: 12px 16px; gap: 12px; flex-wrap: wrap; } .king-hdr-h1 { font-size: 1.5rem; } .king-hdr > div { min-width: 0; } .king-hdr-h1, .king-hdr-eyebrow { overflow-wrap: anywhere; } .king-hdr-logo { height: 70px; } }

/* — Editorial-Pimp: Header als „Masthead" (Gold-Hairline, Punkt-Signet, selbstbewusster Titel) — */
.king-hdr { position: relative; align-items: flex-end; padding-top: 18px; padding-bottom: 16px; border-bottom: none; }
.king-hdr-brand { align-self: center; }
.king-hdr-logo  { align-self: center; }   /* Helm mittig halten trotz align-items:flex-end (sonst „verschoben") */

/* — Globale Ausrichtung der Line-Icons (king-icons.js). Ohne diese Regel sitzen die
   inline-SVGs auf der Grundlinie und verschieben Nachbar-Elemente. — */
.king-icon { vertical-align: -0.15em; flex-shrink: 0; }
button .king-icon, .btn .king-icon, a .king-icon { vertical-align: middle; }
.king-hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #f472b6 0 38%, #ec4899 38% 100%); }
/* Orange noch präsenter: sekundär-/Outline-Buttons hover orange, Badges-Akzent orange */
.btn-secondary:hover, .btn-outline:hover { color:#ec4899 !important; border-color:#ec4899 !important; }
.king-hdr-h1::after{ content:""; display:block; width:64px; height:4px; background:#ec4899; margin-top:8px; border-radius:2px; }
.king-hdr-eyebrow { display: inline-flex; align-items: center; gap: 0.55em; margin-bottom: 0.3rem; }
.king-hdr-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-accent); flex: none; box-shadow: 0 0 0 3px var(--color-accent-light); }
.king-hdr-h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: var(--fw-regular); letter-spacing: -0.015em; line-height: 1.02; }

/* ════════ GLOBALER REBRAND (4-Farben-Hell) ════════
   Erzwingt die helle Blau-Palette auf den gängigen Legacy-Tokens, die Module INLINE definieren
   (sonst bleibt deren Gold/Creme). !important schlägt modul-eigene :root-Werte ordnungsunabhängig.
   Bewusst NUR eindeutig-solide Tokens (Akzent/Flächen/Text/Rahmen) – mehrdeutige Tint-Tokens
   (--gd/--gl/--gn …) bleiben unangetastet, die färben die Modul-Agenten korrekt um. */
:root{
  --gold:#d6247f !important; --accent:#d6247f !important; --primary:#d6247f !important;
  --bg:#e9f5fb !important; --card:#ffffff !important; --surface:#ffffff !important; --panel:#ffffff !important;
  --s1:#ffffff !important; --s2:#f0f8fc !important; --s3:#e3f1f8 !important;
  --line:#1a1a1a !important; --border:#1a1a1a !important;
  --dark:#131313 !important; --txt:#131313 !important; --text:#131313 !important;
  --muted:#50616a !important; --muted2:#8a98a0 !important;
  --c1:#f472b6 !important; --c2:#ec4899 !important; --c3:#d6247f !important; --c4:#ec4899 !important;
}
/* Gulf: Orange als kräftige Action-/Highlight-Farbe – Primär-Buttons + Eyebrow-Punkt orange */
.btn-primary, .btn-gold, .btn.btn-gold, button.btn-gold { background:#ec4899 !important; border-color:#ec4899 !important; color:#fff !important; }
.btn-primary:hover, .btn-gold:hover, .btn.btn-gold:hover { background:#d96c10 !important; border-color:#d96c10 !important; }
.king-hdr-eyebrow::before { background:#ec4899 !important; box-shadow:0 0 0 3px rgba(236,72,153,0.18) !important; }

/* ════════ Marketing-Politur: Tiefe + Lebendigkeit (attraktiver fürs Auge) ════════ */
/* Karten/KPIs: weiche Schwebe-Hebung + edler Schatten beim Hover */
.card, .kpi, .stat, .panel, .module-card { transition: transform .16s ease, box-shadow .16s ease !important; }
.card:hover, .kpi:hover, .stat:hover, .panel:hover, .module-card:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 30px rgba(20,40,60,.12) !important; }
/* Orange Action-Buttons mit sattem Schatten + Lift */
.btn-primary, .btn-gold { box-shadow: 0 3px 10px rgba(236,72,153,.30) !important; transition: transform .14s ease, box-shadow .14s ease !important; }
.btn-primary:hover, .btn-gold:hover { box-shadow: 0 6px 18px rgba(236,72,153,.40) !important; transform: translateY(-1px) !important; }
/* App-Hintergrund: flaches, helles Babyblau (kein Verlauf) */
body { background: #e9f5fb !important; }
/* KPI-Zahlen markanter */
.kpi .v, .stat-v, .kpi-value, .ck-kpi-value { font-weight:600; letter-spacing:-.01em; }

/* ════════ VERSPIELT: rund, kräftig, lebendig (Gulf-Spielfreude) ════════ */
/* Chunky-Rundungen überall */
.card, .kpi, .stat, .panel, .module-card, .modal-card, .ch, .card-header, .card-h { border-radius:18px !important; }
.ch, .card-header, .card-h { border-top-left-radius:18px !important; border-top-right-radius:18px !important; }
/* Pill-Buttons mit Orange-Verlauf (Primär/Action) */
.btn, .btn-primary, .btn-gold, .btn-secondary, .btn-outline { border-radius:999px !important; font-weight:600 !important; }
.btn-primary, .btn-gold, .btn.btn-gold { background:#ec4899 !important; border:none !important; color:#fff !important; }
.btn-primary:hover, .btn-gold:hover { background:#e06a0c !important; }
/* KPI/Stat: kräftiger SOLIDER Orange-Balken oben (flat, kein Verlauf) + verspielte Hebung */
.kpi, .stat, .module-card { position:relative !important; overflow:hidden !important; }
.kpi::before, .stat::before { content:""; position:absolute; top:0; left:0; right:0; height:6px; background:#ec4899; }
/* Karten-Köpfe: flache, helle Babyblau-Fläche (kein Verlauf) */
.ch, .card-header, .card-h, .panel-head { background:#eaf4fb !important; }
/* Bouncy-Hover: anheben + minimal vergrößern */
.card:hover, .kpi:hover, .stat:hover, .panel:hover, .module-card:hover { transform:translateY(-4px) scale(1.006) !important; box-shadow:0 16px 40px rgba(20,40,60,.16) !important; }
/* Badges/Chips runder + kräftiger */
.badge, .chip, .tag { border-radius:999px !important; font-weight:600 !important; }
/* Aktiver Tab/Nav verspielt unterstreichen */
.tab.akt, .nav-item.on { font-weight:600 !important; }

/* ════════ Logo-Helm prominent: in ALLEN Modul-Headern deutlich größer ════════
   Viele Module haben einen eigenen Header (<header class="hdr"><img style="height:44px">) statt des
   king-nav-Headers -> Inline-Höhe gewinnt. !important + src-Selektor hebt den Helm überall an. */
.king-hdr-logo { height:150px !important; }
.hdr img[src*="logo_helm"], header img[src*="logo_helm"],
.top img[src*="logo_helm"], .topbar img[src*="logo_helm"],
img[src*="logo_helm"],
.top .helm, .hdr-logo {
  height:120px !important; width:auto !important; max-width:none !important;
  filter: drop-shadow(0 2px 7px rgba(20,40,60,.20));
}
/* Header darf mitwachsen statt zu beschneiden */
.hdr, header.hdr, .top, .topbar, .king-hdr { overflow:visible !important; }
/* Mobil: großer Helm + Wortmarke + Titel passen nicht in schmale Eigen-Header
   -> Helm kleiner und Header umbrechen lassen (sonst horizontaler Overflow). */
@media (max-width:768px){
  .king-hdr-logo, .hdr img[src*="logo_helm"], header img[src*="logo_helm"], img[src*="logo_helm"]{ height:60px !important; }
  .hdr, header.hdr, .top, .topbar, .king-hdr { flex-wrap:wrap !important; }
}

/* — KPI-Kachel-Raster: ersetzt das „1px-Gitter" (gap:1px;background:border) durch echte Karten — */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-4); }

/* ─── 5. ACCESSIBILITY ────────────────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm);
}
/* Maus-Klick erzeugt keinen Ring, Tastatur schon */
*:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ════════ FLAT-MARKETING 2.0: mehr Pep, null Verläufe ════════ */
/* KPI-Zahlen groß & fett (Impact) */
.kpi .v, .stat-v, .kpi-value, .ck-kpi-value, .kpi-num, .kpi .num {
  font-size: clamp(1.9rem, 2.4vw, 2.5rem) !important; font-weight:800 !important;
  letter-spacing:-.02em !important; line-height:1.04 !important; color:#131313 !important;
}
/* KPI-Labels: klein, gesperrt, Gulf-blau (Farbpunkt) */
.kpi .l, .kpi-label, .stat-label, .ck-kpi-label, .kpi .k {
  text-transform:uppercase !important; letter-spacing:.08em !important;
  font-size:.7rem !important; font-weight:700 !important; color:#d6247f !important;
}
/* Aktiver Tab: solider Orange-Unterstrich (flat) */
.tab.active, .tabs .active, .seg.active, .tab.akt, [role="tab"][aria-selected="true"] {
  border-bottom:3px solid #ec4899 !important; color:#131313 !important; font-weight:700 !important;
}
/* Karten-Kopf: kleiner Orange-Akzent-Tick links */
.ch, .card-header, .card-h, .panel-head { border-left:4px solid #ec4899 !important; }
/* Text-Links in Gulf-Blau – NUR echte Inline-Links in Fließtext/Tabellen,
   NIE Button-/Aktions-Anker (sonst blaue Schrift auf blauem Button-Grund). */
p a, li a, td a, .prose a, .text a, .hint a, .hinweis a { color:#d6247f; }