/* ============================================================
   usp.css – USP-Karten und Faktenstrip
   Bock Maschinenbau GmbH
   Nutzt Design-Tokens aus variables.css.
   ============================================================ */

/* ── USP Strip ────────────────────────────────────────────── */
.usp-strip {
  background: var(--color-bg-dark);
  padding: var(--space-12) 0;
}

.usp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.usp-grid--spaced {
  margin-top: var(--space-8);
}

@media (min-width: 640px) { .usp-grid { grid-template-columns: repeat(2, var(--grid-track-fluid)); } }
@media (min-width: 1024px) { .usp-grid { grid-template-columns: repeat(3, var(--grid-track-fluid)); } }
@media (min-width: 1024px) { .usp-grid--4col { grid-template-columns: repeat(4, var(--grid-track-fluid)); } }

.usp-item,
.usp-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--on-dark-border-faint);
  background: var(--on-dark-surface-faint);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.usp-item:hover,
.usp-card:hover {
  background: var(--on-dark-surface);
  border-color: var(--on-dark-border);
  transform: translateY(-2px);
}

.usp-card {
  display: block;
}

.usp-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-2);
}

.usp-card p {
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.usp-icon {
  flex-shrink: 0;
  width: var(--space-14);
  height: var(--space-14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--on-dark-surface-soft);
  border: 1px solid var(--on-dark-border-soft);
  color: var(--color-accent-text);
  /* Icon-Kantenlänge: .bm-icon ist width:1em → font-size IST die Icon-Größe.
     50 % der Badge-Kantenlänge (--space-14 = 56px) → optisch ausbalanciert;
     text-xl (20px) wirkte im 56px-Siegel verloren. EIN Hebel für alle
     usp-/cert-seal-Badges, 20 Sprachen. */
  font-size: var(--space-7);
  line-height: 1;
  transition:
    color var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

.usp-item:hover .usp-icon {
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.usp-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-1);
}

.usp-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── USP – helle Variante ─────────────────────────────────────
   Gleiche Struktur/Layout wie der dunkle usp-Strip, nur Farben für
   Sektionen auf HELLEM Grund (z. B. /karriere/ perks). Nur Tokens –
   ein zentraler Modifier, überall wiederverwendbar. */
.usp-grid--light .usp-item {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

.usp-grid--light .usp-item:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-accent);
}

.usp-grid--light .usp-icon {
  background: var(--color-accent-bg);
  border-color: var(--color-accent-bg-hover);
  color: var(--color-accent-text);
}

.usp-grid--light .usp-item:hover .usp-icon {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.usp-grid--light .usp-title {
  color: var(--color-text);
}

.usp-grid--light .usp-text {
  color: var(--color-text-muted);
}

/* Selbsttragende helle Insel: eine .usp-grid--light bleibt auch INNERHALB einer
   .dark-section lesbar (z. B. tätigkeitsspezifische Job-USPs auf dunkler Sektion).
   Ohne dies erben .usp-title/.usp-text die von .dark-section überschriebenen HELLEN
   Text-Tokens → heller Text auf heller Karte. Wir re-assertieren die Hell-Kontext-
   Tokens aus den Roh-Kanälen (SSOT, keine Literale). Karten-Fläche (--color-bg-alt)
   wird von .dark-section nicht überschrieben und bleibt hell. */
/* Nur im HELLEN Theme: hier ist die Karte (--color-bg-alt) eine helle Insel, also
   dunkler Text. Im DARK Theme flippt --color-bg-alt selbst auf dunkel — dann NICHT
   dunklen Text pinnen (sonst dark-on-dark, .usp-title war 1.14:1), sondern die
   normalen flippenden Tokens greifen lassen (weißer Text auf dunkler Karte). */
:root:not([data-theme="dark"]) .dark-section .usp-grid--light {
  --color-text:       rgb(var(--c-ink));
  --color-text-muted: rgb(var(--c-slate-400));
  --color-border:     rgb(var(--c-slate-200));
}