/* Bewegung beim Scrollen (Vorschau 31.10.)
   Greift nur, wenn <html> die Klasse .mo trägt (gesetzt im <head>,
   nur ohne „Bewegung reduzieren“). Ohne JavaScript bleibt alles sichtbar. */

:root { --mo-ease: cubic-bezier(.2,.7,.2,1); }

/* 1 · Hero beim Laden: Zeile für Zeile */
.mo .hero__text > *, .mo .hero__title span {
  animation: mo-up .9s var(--mo-ease) both;
}
.mo .hero__text > .eyebrow { animation-delay: .05s; }
.mo .hero__title { animation-delay: .15s; }
.mo .hero__title span { animation-delay: .45s; }
.mo .hero__lead { animation-delay: .7s; }
.mo .hero__actions { animation-delay: .85s; }
.mo .hv__orb { animation: mo-fade 1.6s ease-out .3s both; }
@keyframes mo-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }

/* 2 · Abschnitte blenden beim Scrollen ein */
.mo .rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--mo-ease) var(--d, 0s), transform .8s var(--mo-ease) var(--d, 0s);
}
.mo .rv.is-in { opacity: 1; transform: none; }

/* 3 · Treppe: alle Balken starten bei 100 % und verlieren Ebene für Ebene */
.mo .tr__bar { animation: none; width: 100%; transition: width 1.3s var(--mo-ease); }
.mo .tr__steps li:nth-child(2) .tr__bar { transition-delay: .35s; }
.mo .tr__steps li:nth-child(3) .tr__bar { transition-delay: .7s; }
.mo .tr__steps li:nth-child(4) .tr__bar { transition-delay: 1.05s; }
.mo .tr__steps.is-in .tr__bar { width: var(--w); }
.mo .tr__bar b { font-variant-numeric: tabular-nums; }

/* 4 · Kette baut sich von links nach rechts auf */
.mo .kt__node { opacity: .25; transform: translateY(8px); transition: opacity .6s var(--mo-ease), transform .6s var(--mo-ease); }
.mo .kt__arrow { transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--mo-ease); }
.mo .kt__chain > :nth-child(1) { transition-delay: .1s; }
.mo .kt__chain > :nth-child(2) { transition-delay: .45s; }
.mo .kt__chain > :nth-child(3) { transition-delay: .8s; }
.mo .kt__chain > :nth-child(4) { transition-delay: 1.4s; }
.mo .kt__chain > :nth-child(5) { transition-delay: 1.75s; }
.mo .kt__chain > :nth-child(6) { transition-delay: 2.05s; }
.mo .kt__chain > :nth-child(7) { transition-delay: 2.4s; }
.mo .kt__node--on { transform: scale(.85); }
.mo .kt__chain.is-in .kt__node { opacity: 1; transform: none; }
.mo .kt__chain.is-in .kt__arrow { transform: none; }
@media (max-width: 980px) {
  .mo .kt__arrow { transform: scaleY(0); transform-origin: center top; }
}

/* 5 · Kompass: zittert, bis er im Bild ist, dann einmal die Kehrtwende */
.mo .kc__needle { animation: mo-kc-wait 1.8s ease-in-out infinite; }
.mo .kc__front { animation: none; fill: color-mix(in srgb, var(--accent-7) 55%, transparent); }
.mo .kc.is-in .kc__needle { animation: mo-kc-turn 2.6s forwards; }
.mo .kc.is-in .kc__front { animation: mo-kc-glow 2.6s forwards; }
@keyframes mo-kc-wait {
  0%, 100% { transform: rotate(-8deg); } 25% { transform: rotate(4deg); }
  50% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}
@keyframes mo-kc-turn {
  0% { transform: rotate(-8deg); animation-timing-function: ease-in-out; }
  12% { transform: rotate(4deg); } 24% { transform: rotate(-6deg); } 34% { transform: rotate(3deg); }
  42% { transform: rotate(-6deg); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  70% { transform: rotate(186deg); } 82% { transform: rotate(176deg); } 100% { transform: rotate(180deg); }
}
@keyframes mo-kc-glow { 0%, 45% { fill: color-mix(in srgb, var(--accent-7) 55%, transparent); } 72% { fill: var(--accent-9); } 100% { fill: var(--accent-7); } }

/* 6 · Kompaktleiste mit Fortschrittslinie, sobald der Hero verlassen ist */
html.mo { scroll-padding-top: 72px; }
.mo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in srgb, var(--white) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%); transition: transform .45s var(--mo-ease);
}
.mo-bar.is-on { transform: none; }
.mo-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.mo-bar__name { font-family: var(--font-head), sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }
.mo-bar ul { display: flex; gap: 28px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.mo-bar ul a { color: var(--ink-muted); text-decoration: none; transition: color .2s; }
.mo-bar ul a:hover, .mo-bar ul a.is-cur { color: var(--accent); }
.mo-bar .btn { padding: 10px 18px; font-size: 15px; }
.mo-bar__line { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
@media (max-width: 1240px) { .mo-bar ul { display: none; } }
@media (max-width: 600px) { .mo-bar__in { height: 56px; } .mo-bar__name { font-size: 16px; } }