/* =================================================================
   MOTION-LAYER: Text-Reveal, Staffel-Einblendung, Spotlight-Karten,
   magnetische Knoepfe, Bild-Reveal, Inhaltsverzeichnis im Blog.
   Nur transform/opacity/filter, damit es auf dem Handy fluessig bleibt.
   Ohne JavaScript oder bei "Bewegung reduzieren" ist alles sofort sichtbar.
   ================================================================= */

/* ---------- Text-Reveal: Woerter steigen aus einer Maske ---------- */
.mo-w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.mo-w > span{ display:inline-block; transform:translate3d(0,105%,0); filter:blur(6px); opacity:0;
  transition:transform .9s cubic-bezier(.2,.75,.2,1), filter .9s ease, opacity .6s ease;
  transition-delay:calc(var(--i,0) * 55ms); will-change:transform; }
.mo-text.mo-da .mo-w > span{ transform:none; filter:none; opacity:1; }

/* ---------- Staffel-Einblendung ---------- */
.mo-auf{ opacity:0; transform:translate3d(0,26px,0); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.75,.2,1);
  transition-delay:calc(var(--i,0) * 80ms); }
.mo-auf.mo-da{ opacity:1; transform:none; }

/* ---------- Bild-Reveal ---------- */
.mo-bild{ overflow:hidden; }
.mo-bild img{ transform:scale(1.12); transition:transform 1.6s cubic-bezier(.2,.75,.2,1); }
.mo-bild.mo-da img{ transform:scale(1); }

/* ---------- Spotlight-Karten (nur Maus) ---------- */
.mo-spot{ position:relative; isolation:isolate; }
.mo-licht{ position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(79,108,149,.16), transparent 45%); }
.mo-spot > :not(.mo-licht){ position:relative; z-index:1; }
.mo-spot:hover .mo-licht{ opacity:1; }
.dunkel .mo-licht,.mo-spot.mo-hell .mo-licht{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 45%); }

/* ---------- Magnetische Knoepfe ---------- */
.mo-magnet{ translate:var(--tx,0) var(--ty,0); transition:translate .35s cubic-bezier(.2,.75,.2,1), transform .25s, box-shadow .25s, background-color .25s; }

/* ---------- Mockup kippt beim Scrollen gerade ---------- */
.mo-kipp{ perspective:1400px; }
.mo-kipp img{ transform:rotateX(var(--kx,0deg)) scale(var(--ks,1)); transform-origin:50% 100%; will-change:transform; }

/* ---------- Ratgeber-Titelblaetter kippen 3D ---------- */
.mo-tilt{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .45s cubic-bezier(.2,.75,.2,1); transform-style:preserve-3d; }
.mo-tilt .tb-gross{ transform:translateZ(30px); }

/* ---------- Wellenlinien in dunklen Abschnitten ---------- */
@keyframes moWellen{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-4%,3%,0); } }
@media (min-width:901px){ .dunkel::before{ animation:moWellen 22s ease-in-out infinite alternate; } }

/* ---------- Blog: Inhaltsverzeichnis ---------- */
.mo-toc{ position:fixed; top:140px; left:calc(50% + 360px); width:230px; z-index:40; padding:18px 0 18px 20px; border-left:1px solid #dfe3e9;
  opacity:0; transform:translateX(12px); pointer-events:none; transition:opacity .4s ease, transform .5s cubic-bezier(.2,.75,.2,1); }
.mo-toc.mo-zeigen{ opacity:1; transform:none; pointer-events:auto; }
.mo-toc b{ display:block; font-family:'Inter',sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#5d6b80; margin-bottom:14px; }
.mo-toc a{ position:relative; display:block; padding:6px 0; font-family:'Inter',sans-serif; font-size:.86rem; line-height:1.35; color:#6b7686; text-decoration:none; transition:color .25s; }
.mo-toc a::before{ content:""; position:absolute; left:-21px; top:6px; bottom:6px; width:2px; background:#22334d; transform:scaleY(0); transition:transform .35s cubic-bezier(.2,.75,.2,1); }
.mo-toc a:hover{ color:#22334d; }
.mo-toc a.mo-aktiv{ color:#22334d; font-weight:600; }
.mo-toc a.mo-aktiv::before{ transform:scaleY(1); }
.mo-toc-leiste{ position:absolute; left:-1px; top:0; width:1px; height:100%; background:#22334d; transform-origin:top; transform:scaleY(var(--lese,0)); }
.mo-mit-toc .phase h2{ max-width:740px; }
@media (max-width:1279px){ .mo-toc{ display:none; } }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  .mo-w > span,.mo-auf,.mo-bild img{ transform:none !important; filter:none !important; opacity:1 !important; transition:none !important; }
  .dunkel::before{ animation:none !important; }
  .mo-kipp img,.mo-tilt{ transform:none !important; }
  .mo-magnet{ translate:none !important; }
}