/* ===== Design-Tokens (Clerk-Designsystem, Light) ===== */
:root {
  --bg: #f7f7f8;          /* gray-50 - hell, aber nicht grell-weiss */
  --bg-soft: #eeeef0;     /* gray-100 */
  --ink: #212126;         /* gray-900 */
  --dim: #747686;         /* gray-500 */
  --accent: #6c47ff;      /* purple-500 */
  --accent2: #5639cc;     /* purple-600-bereich (Verlaufsende fuer Lesbarkeit auf Hell) */
  --border: rgba(33, 33, 38, 0.09);
  --card: #ffffff;
  --card-hover: #ffffff;
  --radius: 14px;
  --wrap: 1080px;

  --gradient: linear-gradient(90deg, var(--accent), var(--accent2));
  --shadow: 0 1px 2px rgba(33, 33, 38, 0.05), 0 18px 48px rgba(33, 33, 38, 0.08);

  --fs-body: 16px;
  --fs-small: 14px;
}

/* Sanfte Einblend-Aktionen (respektiert Reduced-Motion) */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise-in 0.55s ease forwards; }
  .rise.d1 { animation-delay: 0.08s; }
  .rise.d2 { animation-delay: 0.16s; }
  .rise.d3 { animation-delay: 0.24s; }
  .rise.d4 { animation-delay: 0.32s; }
  @keyframes rise-in { to { opacity: 1; transform: none; } }
}

::selection { background: rgba(108, 71, 255, 0.25); color: var(--ink); }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}