/* Bewegung auf allen Website-Seiten (19.17, Wunsch Jeremias: „Motion-Effekte wie auf der alten WordPress-Seite“).
   Eingebunden in templates/baukasten/seite.html und templates/public/base.html – gilt für Startseite, Unterseiten,
   Landingpages, Artikel und einzelne Formulare gleich. Verhalten in bewegung.js (IntersectionObserver, keine Abhängigkeit).

   * Hover: Karten heben sich leicht an (Schatten), Knöpfe und Download-Kacheln ebenso, Bilder zoomen sanft.
   * Einblenden beim Scrollen: Abschnitte und Karten gleiten von unten ein (gestaffelt). Versteckt wird erst, wenn das
     Skript läuft (Klasse tnb-bewegung am <html>) – ohne Skript, im Editor und bei „Bewegung reduzieren“ ist alles sofort da.
   Farben nur aus der Palette (docs/DESIGN.md): Schatten in Navy #05173D mit Deckkraft. */

:root { --tnb-bw-kurve: cubic-bezier(.2, .7, .2, 1); --tnb-bw-schatten: 0 18px 40px -18px rgba(5, 23, 61, .28); }

/* ---------------------------------------------------------------- Hover */
.tnw .rahmen, .tnw .person, .tnw .formular-box, .tnw .zahl, .tnw .va-liste > div, .tnw .projekt-punkt, .tnw .info-karte,
.tnw .bewertung, .tnb-seite .tnb-karte > .tnb-widget-container, .tnb-seite .e-con.tnb-karte, .tnb-seite .tnb-posts--skin-cards .tnb-post {
  transition: translate .45s var(--tnb-bw-kurve), box-shadow .45s var(--tnb-bw-kurve), background-color .3s, border-color .3s;
}
@media (hover: hover) {
  .tnw .rahmen:hover, .tnw .bewertung:hover, .tnb-seite .tnb-karte > .tnb-widget-container:hover, .tnb-seite .e-con.tnb-karte:hover,
  .tnb-seite .tnb-posts--skin-cards .tnb-post:hover { translate: 0 -4px; box-shadow: var(--tnb-bw-schatten); }
  .tnw .rahmen.formular:hover, .tnw .rahmen.formular-rahmen:hover, .tnw .rahmen.info-rahmen:hover { translate: none; box-shadow: none; }
  .tnw .va-liste > div:hover, .tnw .projekt-punkt:hover { translate: 0 -2px; }
  .tnw .faq details:not([open]):hover { background: var(--zoll-hell, #EEEBE3); }

  /* Knöpfe: heben sich, Pfeilkreis rückt etwas nach rechts */
  .tnw .pille, .tnw .knopf-tuerkis, .tnw .datei, .tnw .dateiliste .datei, .tnb-seite .tnb-button, .tnw .tnf .s_website_form_send,
  .tnb-seite .tnf .s_website_form_send { transition: translate .35s var(--tnb-bw-kurve), box-shadow .35s var(--tnb-bw-kurve), filter .2s,
    background-color .2s, border-color .2s, color .2s; }
  .tnw .pille:hover, .tnw .knopf-tuerkis:hover, .tnb-seite .tnb-button:hover, .tnw .tnf .s_website_form_send:hover,
  .tnb-seite .tnf .s_website_form_send:hover { translate: 0 -2px; box-shadow: 0 12px 26px -12px rgba(5, 23, 61, .45); }
  .tnw .pille i { transition: transform .35s var(--tnb-bw-kurve); }
  .tnw .pille:hover i { transform: translateX(3px); }
  .tnw .datei:hover, .tnw .dateiliste .datei:hover { translate: 0 -2px; box-shadow: 0 10px 22px -14px rgba(5, 23, 61, .35); }

  /* Bilder: sanfter Zoom im Rahmen (der Rahmen schneidet ab) */
  .tnw .ueber-bild img, .tnw .bild-frei img, .tnw .bild.hoch img, .tnw .info-foto img { transition: transform .9s var(--tnb-bw-kurve); }
  .tnw .ueber-bild:hover img, .tnw .info-foto:hover img, .tnw .bild.hoch:hover img { transform: scale(1.035); }
}
.tnw .ueber-bild, .tnw .info-foto, .tnw .bild.hoch { overflow: hidden; }

/* ---------------------------------------------------------------- Einblenden beim Scrollen */
html.tnb-bewegung [data-tnb-ein] { opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--tnb-bw-kurve), transform .8s var(--tnb-bw-kurve), translate .45s var(--tnb-bw-kurve),
    box-shadow .45s var(--tnb-bw-kurve), background-color .3s;
  transition-delay: calc(var(--tnb-ein-nr, 0) * 90ms), calc(var(--tnb-ein-nr, 0) * 90ms), 0s, 0s, 0s; }
html.tnb-bewegung [data-tnb-ein="titel"] { transform: translateY(14px); transition-duration: .9s; }
html.tnb-bewegung [data-tnb-ein].tnb-da { opacity: 1; transform: none; }
/* Titelband: Bild und Text blenden beim Laden weich ein (reine CSS-Animation, läuft einmal beim ersten Zeichnen) */
@media (prefers-reduced-motion: no-preference) {
  .tnw :is(.hero-bild, .titel-bild) img { animation: tnb-bild-ein 1.4s var(--tnb-bw-kurve) both; }
  .tnw :is(.hero-in, .titel-in) > * { animation: tnb-text-ein .9s var(--tnb-bw-kurve) both; }
  .tnw :is(.hero-in, .titel-in) > :nth-child(2) { animation-delay: .08s; }
  .tnw :is(.hero-in, .titel-in) > :nth-child(3) { animation-delay: .16s; }
  .tnw :is(.hero-in, .titel-in) > :nth-child(n+4) { animation-delay: .24s; }
  [data-tnb-editor] .tnw :is(.hero-bild, .titel-bild) img, [data-tnb-editor] .tnw :is(.hero-in, .titel-in) > * { animation: none; }
}
@keyframes tnb-bild-ein { from { opacity: 0; transform: scale(1.04); } }
@keyframes tnb-text-ein { from { opacity: 0; transform: translateY(14px); } }

/* Editor-Leinwand und gedruckte Seiten: nichts verstecken */
[data-tnb-editor] [data-tnb-ein], .we-edit [data-tnb-ein] { opacity: 1 !important; transform: none !important; }
@media print { html.tnb-bewegung [data-tnb-ein] { opacity: 1 !important; transform: none !important; } }

/* Hinweis: Das Anheben beim Überfahren nutzt „translate“, das Einblenden „transform“ – so stören sich beide nicht. */
/* „Bewegung reduzieren“ im Betriebssystem: keine Bewegung, keine Verzögerung (das Skript schaltet sich dann gar nicht ein) */
@media (prefers-reduced-motion: reduce) {
  html.tnb-bewegung [data-tnb-ein] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tnw *, .tnb-seite * { transition-duration: .01ms !important; animation: none !important; }
  .tnw .rahmen:hover, .tnw .pille:hover, .tnw .datei:hover { translate: none !important; }
}