/* ============================================================
   Karten — Premium-Treatment, Port aus „feature-cards.html" (.fcard).
   Gradient-Stroke (::before, pink-kiss oben → violet-shoulder → hairline)
   + Dark-Glass-Fill (::after) + Hover-Lift. Restyle-in-place auf die
   bestehenden Homepage-Karten (#why .stat-card, #how .step). CSS-only
   Hover (kein rAF-3D-Tilt → kein JS-Risiko). Tokens statt Hex.
   Lädt nach dem Inline-Block → gewinnt per Quell-Reihenfolge.
   ============================================================ */
.stat-card,
.step {
  --accent-rgb: 139, 92, 246;            /* A · violet */
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  transition: transform .5s var(--ease-apple), box-shadow .45s var(--ease-apple);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    0 3px 14px rgba(var(--accent-rgb), 0.10);
}

/* Layer 1 — Gradient-Stroke */
.stat-card::before,
.step::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  z-index: -2;
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255, 61, 129, 0.55), transparent 55%),
    linear-gradient(180deg,
      rgba(139, 92, 246, 0.45) 0%,
      rgba(139, 92, 246, 0.18) 8%,
      rgba(240, 238, 230, 0.12) 22%,
      rgba(240, 238, 230, 0.06) 100%);
}

/* Layer 2 — Dark-Glass-Fill + Ecken-Aura + Top-Glow */
.stat-card::after,
.step::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-lg) - 1px);
  z-index: -1;
  background:
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb), 0.12) 0%, transparent 50%),
    radial-gradient(70% 28% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-obsidian) 100%);
}

.stat-card:hover,
.step:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    0 8px 28px rgba(var(--accent-rgb), 0.22);
}

/* Akzent je Section: #why (Statistik) magenta-lastig, #how (Steps) violet */
#why .stat-card { --accent-rgb: 255, 61, 129; }   /* K · magenta */
#how .step      { --accent-rgb: 139, 92, 246; }   /* A · violet  */

/* ── Grosse Wrapper-Karten: HODL-Fallstudie (.case) + Notion (.notion-card)
   bekommen denselben Premium-Rahmen; interne Layouts bleiben unberührt. ── */
.case,
.notion-card {
  --accent-rgb: 139, 92, 246;
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xl);
  transition: transform .5s var(--ease-apple), box-shadow .45s var(--ease-apple);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.48),
    0 4px 16px rgba(var(--accent-rgb), 0.10);
}
.case { --accent-rgb: 255, 61, 129; }              /* K · magenta (Fallstudie) */
.case::before,
.notion-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-xl) + 1px);
  z-index: -2;
  background:
    radial-gradient(120% 36% at 50% 0%, rgba(255, 61, 129, 0.50), transparent 55%),
    linear-gradient(180deg,
      rgba(139, 92, 246, 0.42) 0%,
      rgba(139, 92, 246, 0.16) 8%,
      rgba(240, 238, 230, 0.10) 22%,
      rgba(240, 238, 230, 0.05) 100%);
}
.case::after,
.notion-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  z-index: -1;
  background:
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb), 0.10) 0%, transparent 50%),
    radial-gradient(60% 24% at 50% 0%, rgba(255, 255, 255, 0.045), transparent 70%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-obsidian) 100%);
}

/* ── #difference Vergleichs-Spalten: konsistenter Rahmen, State-Akzent ── */
.compare-col {
  --accent-rgb: 139, 92, 246;
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  transition: transform .5s var(--ease-apple), box-shadow .45s var(--ease-apple);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 3px 14px rgba(var(--accent-rgb), 0.10);
}
.compare-col.bad  { --accent-rgb: 239, 68, 68; }    /* semantisch rot */
.compare-col.good { --accent-rgb: 91, 233, 220; }   /* S · cyan */
.compare-col::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  z-index: -2;
  background:
    radial-gradient(120% 38% at 50% 0%, rgba(var(--accent-rgb), 0.45), transparent 55%),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(240, 238, 230, 0.08) 22%, rgba(240, 238, 230, 0.04) 100%);
}
.compare-col::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-lg) - 1px);
  z-index: -1;
  background:
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-obsidian) 100%);
}
.compare-col:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.52), 0 8px 24px rgba(var(--accent-rgb), 0.20);
}

@media (max-width: 880px) {
  .stat-card, .step { border-radius: var(--radius-lg); }
}