/* ============================================================
   components.css — Wiederverwendbare Bauteile
   (Cards, Stat-Box, Trust-Bar, Section-Header, Footer-Basis,
    Modal-Basis). Theme-agnostisch — V1/V2/V3 stylen darüber.
   ============================================================ */

/* ── Section-Wrapper ─────────────────────────────────────────────────── */
.sm-section {
  padding: clamp(64px, 8vw, 120px) 0;
}
.sm-section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.sm-section--dark {
  background: var(--sm-anthracite);
  color: var(--sm-text-on-dark);
}
.sm-section--cream { background: var(--sm-cream); }
.sm-section--slate { background: var(--sm-slate-100); }

.sm-section h2 {
  font-family: var(--sm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.sm-section--dark h2 { color: #fff; }

.sm-section-lead {
  max-width: 640px;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--sm-text-muted);
  line-height: 1.65;
}
.sm-section--dark .sm-section-lead { color: var(--sm-text-on-dark-muted); }

/* ── Card ────────────────────────────────────────────────────────────── */
.sm-card {
  background: var(--sm-white);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  padding: 28px;
  box-shadow: var(--sm-shadow-card);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.sm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sm-shadow-hover);
  border-color: var(--sm-border-strong);
}
.sm-card--on-dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--sm-border-dark);
  color: var(--sm-text-on-dark);
}
.sm-card--on-dark:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 106, 0, 0.35);
}

.sm-card h3 {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

/* ── Stat ────────────────────────────────────────────────────────────── */
.sm-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.sm-stat__num {
  font-family: var(--sm-font-display);
  font-weight: 900;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sm-orange);
}
.sm-stat__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sm-text-muted);
  margin-top: 6px;
}

/* ── Badge ───────────────────────────────────────────────────────────── */
.sm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--sm-orange-soft);
  border-radius: 99px;
  font-size: 11px; font-weight: 700;
  color: var(--sm-orange);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sm-badge--neutral {
  background: var(--sm-slate-100);
  color: var(--sm-text-muted);
}
.sm-badge--success {
  background: rgba(14, 138, 74, 0.10);
  color: var(--sm-success);
}

/* ── Footer (gemeinsame Basis) ───────────────────────────────────────── */
.sm-footer {
  background: var(--sm-anthracite-deep);
  color: var(--sm-text-on-dark);
  padding: 80px 0 32px;
}
.sm-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 56px;
}
.sm-footer h4 {
  font-family: var(--sm-font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.95);
}
.sm-footer ul { list-style: none; padding: 0; margin: 0; }
.sm-footer li { margin-bottom: 10px; }
.sm-footer a {
  color: var(--sm-text-on-dark-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s;
}
.sm-footer a:hover { color: var(--sm-orange); }
.sm-footer__bottom {
  border-top: 1px solid var(--sm-border-dark);
  padding-top: 28px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--sm-text-on-dark-faint);
}

@media (max-width: 800px) {
  .sm-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .sm-footer__grid { grid-template-columns: 1fr; }
}

/* ── Reveal-Animation (auf Sektionen, IntersectionObserver setzt .is-visible) ── */
.sm-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.sm-reveal.is-visible {
  opacity: 1; transform: none;
}

/* ── Toast / Inline-Hinweis ──────────────────────────────────────────── */
.sm-alert {
  padding: 14px 18px;
  border-radius: var(--sm-radius);
  border: 1px solid var(--sm-border);
  background: var(--sm-slate-50);
  font-size: 14px;
  margin: 12px 0;
}
.sm-alert--success { background: rgba(14, 138, 74, 0.08); border-color: rgba(14, 138, 74, 0.25); color: var(--sm-success); }
.sm-alert--error   { background: rgba(192, 57, 43, 0.08); border-color: rgba(192, 57, 43, 0.25); color: var(--sm-error); }
.sm-alert--info    { background: rgba(255, 106, 0, 0.07); border-color: rgba(255, 106, 0, 0.22); color: var(--sm-orange); }