/* Ivy Beside: Bewegung
   Gilt nur, wenn js/motion.js laeuft (Klasse .m am <html>) und die Besucherin
   keine reduzierte Bewegung eingestellt hat. Ohne Skript ist alles sichtbar. */

/* ---------- Seitenwechsel ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .26s ease both}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}

/* ---------- Einblenden beim Scrollen ---------- */
.m .mv{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .85s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.m .mv.mv-in{opacity:1;transform:none}
.m .mv.mv-l{transform:translateX(-26px)}
.m .mv.mv-l.mv-in{transform:none}
.m .mv.mv-s{transform:scale(.94)}
.m .mv.mv-s.mv-in{transform:none}
.m figure.mv{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.m figure.mv.mv-in{clip-path:inset(0)}
.m figure.mv img{transform:scale(1.14);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.m figure.mv.mv-in img{transform:none}

/* ---------- Wort fuer Wort ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .95s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--i,0)*42ms + var(--d0,0ms))}
.go .w>i,.in .w>i,.mv-in .w>i{transform:none}

/* ---------- Seitenkopf ---------- */
.m .pagehead::before{animation:ring-in 1.7s cubic-bezier(.2,.7,.2,1) both,ring-drift 24s ease-in-out 1.7s infinite alternate;translate:calc(var(--px,0)*-22px) calc(var(--py,0)*-14px)}
.m .pagehead::after{animation:ring-in 2.1s cubic-bezier(.2,.7,.2,1) .15s both,ring-drift2 30s ease-in-out 2.2s infinite alternate;translate:calc(var(--px,0)*-40px) calc(var(--py,0)*-24px)}
@keyframes ring-in{from{opacity:0;transform:scale(.72)}}
@keyframes ring-drift{to{transform:translate(-2.4rem,1.8rem) scale(1.07)}}
@keyframes ring-drift2{to{transform:translate(2rem,2.6rem) scale(.94)}}
.m .pagehead h1::after{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .7s}
.m .pagehead.go h1::after{transform:none}
.m .pagehead .crumbs,.m .pagehead .meta{opacity:0;transition:opacity .9s ease .25s}
.m .pagehead .meta{transition-delay:.85s}
.m .pagehead.go .crumbs,.m .pagehead.go .meta{opacity:1}
.pagehead h1{view-transition-name:seitentitel}

/* ---------- Kopfzeile weicht beim Lesen ---------- */
header{transition:transform .38s cubic-bezier(.2,.7,.2,1),background .4s,border-color .4s}
header.away{transform:translateY(-101%)}
nav.main a{position:relative}

/* ---------- Zeiger ---------- */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #C9A24A;border-radius:50%;pointer-events:none;z-index:300;opacity:0;
  transition:opacity .3s,width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),margin .28s cubic-bezier(.2,.7,.2,1),background .28s;will-change:transform}
.cur.on{opacity:.85}
.cur.big{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(201,162,74,.13)}
.cur.down{width:24px;height:24px;margin:-12px 0 0 -12px;background:rgba(201,162,74,.3)}
.btn{will-change:transform}

/* ---------- Zeitleiste fuellt sich ---------- */
.m .timeline::before{background:var(--line,rgba(10,10,10,.14))}
.m .timeline::after{content:"";position:absolute;left:6px;top:.5rem;width:1px;height:calc((100% - 1rem)*var(--p,0));background:#C9A24A}
.m .step::before{transition:background .4s,transform .4s,box-shadow .4s}
.m .step.mv-in::before{box-shadow:0 0 0 5px rgba(201,162,74,.14)}

/* ---------- Kurzfakten ---------- */
.m .facts div.mv{transform:translateY(18px) scale(.97)}
.m .facts div.mv.mv-in{transform:none}
.facts div{transition:background .3s}
.facts div:hover{background:#151515}
.facts div:hover b{color:#fff}
.facts b{transition:color .3s}

/* ---------- Fragen ---------- */
details.q summary{transition:color .2s,padding-left .3s cubic-bezier(.2,.7,.2,1)}
details.q summary:hover{padding-left:.5rem}
details.q summary::after{transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* ---------- Laufband ---------- */
.ribbon{background:#0A0A0A;color:#E8CF95;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:1.15rem 0}
.ribbon .track{display:flex;width:max-content;animation:ribbon 46s linear infinite;font-family:'Spectral',Georgia,serif;font-style:italic;font-size:clamp(1.25rem,2.8vw,1.95rem);white-space:nowrap}
.ribbon:hover .track{animation-play-state:paused}
.ribbon span{display:inline-flex;align-items:center;padding-right:3.2rem}
.ribbon span::after{content:"";width:.5rem;height:.5rem;border:1px solid #C9A24A;border-radius:50%;margin-left:3.2rem}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* ---------- Wortmarke im Fuss ---------- */
.wordmark{overflow:hidden;margin-top:3rem;line-height:.78;white-space:nowrap;user-select:none;pointer-events:none}
.wordmark b{display:inline-block;font-family:'Spectral',Georgia,serif;font-weight:500;font-size:clamp(3rem,13.2vw,13rem);letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(201,162,74,.55);
  transform:translateX(calc((1 - var(--p,1))*-9%));transition:transform .2s linear}

/* ---------- Startseite ---------- */
.m .bandfig{overflow:hidden}
.m .bandfig img{transform:translateY(calc(var(--y,0)*1px)) scale(1.16);will-change:transform}
.m .portrait{transform:perspective(900px) rotateY(calc(var(--rx,0)*5deg)) rotateX(calc(var(--ry,0)*-4deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.m .rail{cursor:grab}
.m .rail.drag{cursor:grabbing;scroll-snap-type:none}
.m .rail.drag a{pointer-events:none}
.m .rail .card{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.m .rail .card:hover{transform:translateY(-8px);box-shadow:0 18px 40px -22px rgba(10,10,10,.45)}
.m .tr b{transition:color .4s,transform .6s cubic-bezier(.2,.7,.2,1)}
.m .tr.rv:not(.in) b{transform:translateX(-14px)}
.m .ch{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.m .ch:hover{transform:translateY(-6px)}
.m .strip .cell{transition:background .4s}
.m .strip .cell:hover{background:rgba(255,255,255,.03)}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .ribbon .track{animation:none}
  .w>i{transform:none!important}
}
@media(max-width:640px){
  .ribbon{padding:.85rem 0}
  .wordmark{margin-top:2rem}
}

@media print{
  .m .mv,.m figure.mv{opacity:1!important;transform:none!important;clip-path:none!important}
  .w>i{transform:none!important}
  .beside,.cur,.ribbon,.wordmark,.dock{display:none!important}
}

/* ---------- Die Ranke ---------- */
.beside.vine{width:56px;background:none!important;animation:none!important}
.beside.vine svg{display:block;overflow:visible}
.beside .stem{fill:none;stroke:#C9A24A;stroke-width:1.4;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.beside .leaf{fill:rgba(201,162,74,.16);stroke:#C9A24A;stroke-width:1;stroke-linejoin:round;opacity:0;transition:opacity .6s ease}
.beside .leaf.on{opacity:1}