body {
  font-family: system-ui, sans-serif;
  margin: 4rem;
}

/* Typisiertes Custom Property statt loser --angle: 0deg-Variable — nur
   dadurch weiß der Browser, dass zwischen 0deg und 360deg interpoliert
   werden kann statt hart umzuspringen. */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.card {
  --angle: 0deg;
  width: 12rem;
  padding: 2rem;
  border: 4px solid transparent;
  border-radius: 0.75rem;
  font-weight: 600;
  background:
    linear-gradient(#222, #222) padding-box,
    conic-gradient(from var(--angle), #30a6e6, #df4b05, #30a6e6) border-box;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: --angle 1.2s linear;
  }
}

.card:hover {
  --angle: 360deg;
}

/* Ohne @property-Support (siehe SKILL.md) bleibt --angle einfach eine
   normale Variable: die transition-Zeile auf --angle wird ignoriert,
   der Rand bleibt beim initial-value 0deg statisch stehen — kein Bruch,
   nur keine Rotation. Kein Fallback-CSS nötig. */