/* Sanfte Übergänge und Einblendungen für die Anmeldeseite. Ändert kein Design, nur Bewegung.
   Regeln: LP_design/DESIGN.md. Wer „Bewegung reduzieren“ eingestellt hat, sieht alles ohne Animation. */

:root {
  --sanft: cubic-bezier(.455, .03, .515, .955);
  --auslaufen: cubic-bezier(.22, .61, .36, 1);
}

/* Kurze Zustandswechsel (Hover, Fokus) */
.knopf, .knopf-zweit { transition: background-color .2s ease, transform .2s ease; }
.anmeldeleiste input, .feld input { transition: outline-color .2s ease, border-color .2s ease; }
.fragen summary::after { transition: transform .35s var(--auslaufen); }
.fragen details[open] summary::after { transform: translateY(-50%) rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .knopf:hover, .knopf-zweit:hover { transform: translateY(-1px); }
  .knopf:active, .knopf-zweit:active { transform: none; }

  /* Kopfbereich: Bild blendet ruhig ein, Inhalt folgt Zeile für Zeile */
  .kopf-bild { animation: bild-auftritt 2.2s var(--sanft) both; }
  .kopf-inhalt > * { animation: hoch-einblenden 1.1s var(--auslaufen) both; }
  .kopf-inhalt > :nth-child(1) { animation-delay: .25s; }
  .kopf-inhalt > :nth-child(2) { animation-delay: .4s; }
  .kopf-inhalt > :nth-child(3) { animation-delay: .55s; }
  .kopf-inhalt > :nth-child(4),
  .kopf-inhalt > :nth-child(5) { animation-delay: .75s; }
  .kopf-inhalt > :nth-child(6) { animation-delay: .95s; }

  /* Beim Scrollen: bewegung.js setzt .einblenden und später .sichtbar */
  .einblenden {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--auslaufen), transform 1s var(--auslaufen);
    transition-delay: var(--verzug, 0s);
  }
  .einblenden.sichtbar { opacity: 1; transform: none; }

  /* Footer-Linie zeichnet sich einmal selbst */
  .footer-linie path { transition: stroke-dashoffset 1.8s var(--sanft); }
  .footer-linie g path { transition-delay: 1.1s; transition-duration: 1s; }
}

@keyframes bild-auftritt {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: none; }
}
@keyframes hoch-einblenden {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}