/* =========================================================================
   Land der Hildegard — Bewegung

   Bewusst sparsam: Überschriften und Bilder blenden beim Heranscrollen
   ein, der Kopfbereich schrumpft, Links bekommen einen wachsenden
   Unterstrich. Fließtext bewegt sich nicht — er soll gelesen und nicht
   angeschaut werden.

   Alle Startzustände hängen an der Klasse .reveal, die erst per
   JavaScript gesetzt wird. Ohne JavaScript ist damit nichts unsichtbar.
   Wer prefers-reduced-motion gesetzt hat, sieht alles sofort und
   unbewegt (Block am Ende dieser Datei).
   ========================================================================= */

/* --- Einblenden beim Scrollen -------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 450ms cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 450ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Unterstrich, der von links aufwächst --------------------------------
   Nur dort, wo der Unterstrich nicht ohnehin schon zur Orientierung
   gebraucht wird. Fließtextlinks behalten ihre feste Unterstreichung —
   ein Link muss auch im Stillstand als Link erkennbar sein.             */

/* Der Widerrufsknopf in der Fußzeile ist ein <button>, verhält sich für
   die Besucherin aber wie die Links daneben — er bekommt deshalb
   denselben wachsenden Unterstrich (siehe einwilligung.css). */
.nav__link,
.footer__links a,
.footer__einstellungen {
  position: relative;
  text-decoration: none;
}

.nav__link::after,
.footer__links a::after,
.footer__einstellungen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease-out;
  pointer-events: none;
}

/* `[aria-current]` steht in derselben Liste: Der Bereich, in dem man
   gerade ist, trägt denselben Strich wie der überfahrene Punkt — nur
   dauerhaft. Er wird von animationen.js gesetzt, ohne JavaScript
   erscheint er gar nicht erst. Bei prefers-reduced-motion fällt unten
   nur der Übergang weg, der Strich bleibt sichtbar. */
.nav__link[aria-current]::after,
.nav__link:hover::after,
.nav__link:focus-visible::after,
.footer__links a:hover::after,
.footer__links a:focus-visible::after,
.footer__einstellungen:hover::after,
.footer__einstellungen:focus-visible::after {
  transform: scaleX(1);
}

/* --- Kopfbereich beim Scrollen ------------------------------------------- */

.header {
  transition:
    box-shadow 200ms ease-out,
    background-color 200ms ease-out;
}

.header__inner {
  transition: padding-block 200ms ease-out;
}

.header.is-scrolled {
  box-shadow: 0 6px 18px rgba(36, 31, 29, 0.14);
}

/* --- Bilder blenden sich beim Nachladen weich ein ------------------------
   Die Klasse setzt das Skript nur auf Bilder, die beim Ausführen noch
   nicht fertig geladen sind. Was aus dem Zwischenspeicher kommt, bleibt
   sofort sichtbar — sonst flackert es bei jedem zweiten Aufruf.        */

.img--fade {
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.img--fade.is-loaded {
  opacity: 1;
}

/* --- Ruhemodus ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-revealed,
  .nav__link::after,
  .footer__links a::after,
  .footer__einstellungen::after,
  .header,
  .header__inner,
  .header.is-scrolled,
  .img--fade {
    transition: none !important;
    animation: none !important;
  }

  .reveal,
  .img--fade {
    opacity: 1 !important;
    transform: none !important;
  }
}