/*
 * Zweck: Gemeinsames Gerüst-CSS der vier neuen Startseiten-Sections (Phase 0, .agent/pakete/
 *   startseite-neu-phase0.md) — Abstände, Container, Section-Rhythmus, Farb-Tokens.
 * Hauptverantwortung: NUR das, was alle vier Sections teilen. Section-eigenes Aussehen (Hero-
 *   Video, Fortschrittsbalken, Formular-Layout, Ablauf-Karten) kommt in die jeweils eigene Datei
 *   (hero.css, fortschritt.css, anmeldung.css, ablauf.css).
 * Eingebunden über page({ stylesheets: [...] }) NACH /css/site.css, siehe lib/routes.js.
 */

.rc-start {
  padding: 64px 0;
}

.rc-start .container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.rc-start--hero {
  background: #12222B;
  color: #fff;
}

.rc-start--anmeldung {
  background: #a90055;
  color: #fff;
}

.rc-start--anmeldung a {
  color: inherit;
}

.rc-start--fortschritt,
.rc-start--ablauf {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .rc-start * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Einblenden beim Scrollen (Sections 3 und 4, public/js/startseite-einblenden.js) ---
   Nur mit Skript aktiv (Klasse rc-einblenden-js); Versatz je Teil setzt das Skript. */
.rc-einblenden-js [data-einblenden-teil] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rc-einblenden-js [data-einblenden-teil="links"] {
  transform: translateX(-48px);
}

.rc-einblenden-js [data-einblenden-teil="rechts"] {
  transform: translateX(48px);
}

.rc-einblenden-js [data-einblenden-teil="zoom"] {
  transform: scale(0.85);
}

.rc-einblenden-js.ist-sichtbar [data-einblenden-teil] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rc-einblenden-js [data-einblenden-teil] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}