/**
 * Arkendo value-cards (+ #nutzen intro).
 * Source: migration/arkendo/hubspot-theme/css/arkendo.css, tokens.css
 */

.ak-reveal { transition: opacity 0.5s ease, transform 0.5s ease; }
.ak-reveal--hidden { opacity: 0; transform: translateY(16px); }
.ak-reveal--on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ak-reveal,
  .ak-reveal--hidden,
  .ak-reveal--on {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-3 > * { min-width: 0; }

.value-card { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.value-card__icon { color: var(--color-accent); width: 48px; height: 48px; }

#nutzen > .ak-body { max-width: 740px; }

@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 699px) {
  .grid-3 { grid-template-columns: 1fr; }
}