/* Bewegung auf allen Seiten (Philipp 26.10.2026: „animationen auf alle seiten übertragen“), nach dem Vorbild der Startseite.
   Wird als letztes Stylesheet eingebunden (build.py). Nur ohne prefers-reduced-motion; ohne Skript bleibt alles sichtbar, versteckt
   wird nur, was motion.js mit sm-warten markiert (Inhalte unterhalb des ersten Bildschirms). Startseiten-Eigenes: start-motion.css. */
:root{--sm-ease:cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:no-preference){
  /* Kopfbereiche: Elemente nacheinander von unten (reine CSS-Animation, kein Aufblitzen beim Laden) */
  .page-hero .wrap>:not(.page-hero__visual):not(.page-hero__text),.page-hero__text>*,
  .bb-titel .bb-zeile>*,.bb-artikel__kopf>*,.bb-projekt__kopf>*{animation:sm-hoch .9s var(--sm-ease) both}
  .page-hero .wrap>:nth-child(2),.page-hero__text>:nth-child(1),.bb-titel .bb-zeile>:nth-child(1),.bb-artikel__kopf>:nth-child(1),.bb-projekt__kopf>:nth-child(1){animation-delay:.05s}
  .page-hero .wrap>:nth-child(3),.page-hero__text>:nth-child(2),.bb-titel .bb-zeile>:nth-child(2),.bb-artikel__kopf>:nth-child(2),.bb-projekt__kopf>:nth-child(2){animation-delay:.16s}
  .page-hero .wrap>:nth-child(4),.page-hero__text>:nth-child(3),.bb-titel .bb-zeile>:nth-child(3){animation-delay:.3s}
  .page-hero .wrap>:nth-child(5),.page-hero__text>:nth-child(4),.bb-titel .bb-zeile>:nth-child(4){animation-delay:.42s}
  .page-hero .wrap>:nth-child(n+6),.page-hero__text>:nth-child(n+5){animation-delay:.52s}
  .page-hero__visual{animation:sm-bild 1.3s var(--sm-ease) .2s both}
  .page-hero__visual{translate:var(--sm-x,0) var(--sm-y,0);transition:translate .8s var(--sm-ease)}
  .bb-artikel__bild,.bb-projekt__spalten{animation:sm-hoch 1.1s var(--sm-ease) .3s both}

  /* Einblenden beim Scrollen: vorhandenes .reveal (leistung.js) mit längerem Weg, weicherer Kurve und Staffelung */
  .reveal{transform:translateY(36px);transition:opacity .9s var(--sm-ease),transform .9s var(--sm-ease);transition-delay:var(--sm-d,0s)}
  .sm-auf{transition:opacity .9s var(--sm-ease),translate .9s var(--sm-ease);transition-delay:var(--sm-d,0s)}
  .sm-auf.sm-warten{opacity:0;translate:0 36px}
  .sm-auf--rechts.sm-warten{translate:72px 0}

  /* Karten heben sich beim Überfahren leicht an; Knöpfe im Kopfbereich ziehen sanft zur Maus */
  @media (hover:hover){
    .fcard,.card,.weg,.bb-karte,.kr__karte{transition:translate .5s var(--sm-ease),box-shadow .5s ease,border-color 150ms linear,opacity .9s var(--sm-ease),transform .9s var(--sm-ease)}
    .fcard:hover,.card:hover,.weg:hover,.kr__karte:hover{translate:0 -6px;box-shadow:0 22px 44px -18px rgba(10,10,10,.18)}
    .bb-karte:hover{translate:0 -4px}
    .sm-magnet{transition:translate .4s var(--sm-ease),background 150ms linear,color 150ms linear,border-color 150ms linear!important;translate:var(--sm-mx,0) var(--sm-my,0)}
  }
}

/* Lesefortschritt oben am Fenster */
.sm-fortschritt{position:fixed;left:0;top:0;z-index:200;width:100%;height:2px;background:#0a0a0a;transform-origin:0 50%;scale:0 1;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sm-fortschritt{display:none}}

@keyframes sm-hoch{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
@keyframes sm-zeile{from{translate:0 110%}to{translate:none}}
@keyframes sm-bild{from{opacity:0;scale:.94}to{opacity:1;scale:1}}