/*
 * Detail-Page-spezifische Styles (Issue 19.5 Design-Block).
 *
 * Aktuell nur die Reveal-Animation für die 4 Detail-Sektionen. CSS-only,
 * kein JS, kein nonce (Datei via <link rel="stylesheet"> geladen — nicht
 * inline). Respektiert prefers-reduced-motion.
 *
 * Die Reveal läuft EINMAL beim ersten Render (animation-fill-mode: backwards
 * hält den from-Zustand vor Animations-Start). Gestaffelt via delay-Klassen,
 * damit die Sektionen sequenziell einfaden statt gleichzeitig.
 *
 * Keine Schatten, kein transform-scale — nur Fade + 24px Y-Translate, wie
 * im Christian-Styleguide beschrieben.
 */

@keyframes mq-reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mq-reveal {
  animation: mq-reveal 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.mq-reveal-1 { animation-delay: 0ms; }
.mq-reveal-2 { animation-delay: 80ms; }
.mq-reveal-3 { animation-delay: 160ms; }
.mq-reveal-4 { animation-delay: 240ms; }

/*
 * Card-Reveal für die Übersichtsseite (/immobilien). Der Renderer klont pro
 * Listing eine Card aus dem <template>. Alle Cards teilen die Klasse
 * `mq-reveal-card` — die Stagger-Delays werden per nth-of-type verteilt, sodass
 * die Cards zeilenweise im Grid einfaden. Delay-Rhythmus (60ms) ist enger als
 * bei den Detail-Sektionen (80ms), weil bei 9+ Cards ein längerer Rhythmus
 * die Gesamt-Animation sichtbar zäh macht.
 *
 * Die 12 explizit gelisteten Delays reichen für 3 Zeilen à 4 Cards (Christian-
 * typisches Grid-Layout auf md/lg). Weitere Cards erben den letzten Delay-Wert
 * — sichtbar, weil sich die Animation dann synchron zeigt, aber besser als
 * jedes Ende neu zu definieren.
 */
.mq-reveal-card { animation-delay: 0ms; }
.mq-reveal-card:nth-of-type(2)  { animation-delay:  60ms; }
.mq-reveal-card:nth-of-type(3)  { animation-delay: 120ms; }
.mq-reveal-card:nth-of-type(4)  { animation-delay: 180ms; }
.mq-reveal-card:nth-of-type(5)  { animation-delay: 240ms; }
.mq-reveal-card:nth-of-type(6)  { animation-delay: 300ms; }
.mq-reveal-card:nth-of-type(7)  { animation-delay: 360ms; }
.mq-reveal-card:nth-of-type(8)  { animation-delay: 420ms; }
.mq-reveal-card:nth-of-type(9)  { animation-delay: 480ms; }
.mq-reveal-card:nth-of-type(10) { animation-delay: 540ms; }
.mq-reveal-card:nth-of-type(11) { animation-delay: 600ms; }
.mq-reveal-card:nth-of-type(n+12) { animation-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
  .mq-reveal {
    animation: none;
  }
}