/* Effekte laut artefakte/10-INTERACTION-SPEC.md */

/* E8 — Anker-Scroll (CSS only) */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }

/* E3 — Scroll-Reveal: Ausgangszustand wird NUR per JS-Klasse gesetzt,
   ohne JS ist alles sofort sichtbar */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dauer-reveal) var(--ease-standard),
              transform var(--dauer-reveal) var(--ease-standard);
}
.js .reveal.ist-sichtbar { opacity: 1; transform: none; }
.js .reveal--verzoegert-1 { transition-delay: 60ms; }
.js .reveal--verzoegert-2 { transition-delay: 120ms; }

/* E4 — Karten-Lift */
@media (hover: hover) {
  .karte--klickbar:hover, .karte--klickbar:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--schatten-stark);
  }
  .wegweiser-karte:hover .pfeil-link svg { transform: translateX(4px); }
}
.karte--klickbar:active { background: var(--farbe-grund); }

/* E6 — Aufklapper/FAQ sanfte Höhe (progressive enhancement) */
@supports (interpolate-size: allow-keywords) {
  .faq details, details.aufklapper { interpolate-size: allow-keywords; }
  .faq details::details-content, details.aufklapper::details-content {
    block-size: 0; overflow-y: clip;
    transition: content-visibility 250ms allow-discrete, block-size 250ms var(--ease-standard);
  }
  .faq details[open]::details-content, details.aufklapper[open]::details-content { block-size: auto; }
}

/* Pflicht: reduced motion — alles aus */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .karte--klickbar:hover { transform: none; }
}