/* ==========================================================
   KWK Animationen – gemeinsame Styles
   1) Scroll-Reveal   2) Kennzahlen-Band (Marquee)
   ========================================================== */

/* ---------- 1) Scroll-Reveal ----------
   Grundzustand gilt nur mit JS (html.js), sonst bleibt alles sichtbar. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Mobile-Optimierungen ---------- */

/* Anker-Sprünge landen nicht unter dem Sticky-Header */
[id] { scroll-margin-top: 5rem; }

@media (max-width: 639px) {
  /* iOS zoomt bei Formularfeldern unter 16px Schriftgröße hinein */
  input, select, textarea { font-size: 16px !important; }
  /* Checkboxen als Touch-Ziel vergrößern */
  input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
}

/* ---------- 2) Kennzahlen-Band (Marquee) ----------
   Inhalt ist im Markup dupliziert; Verschiebung um -50 % = nahtloser Loop. */
.marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: kwk-marquee 36s linear infinite;
}
@keyframes kwk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}