/* ===== Zeitreise-Leiste ===== */
.tl{position:fixed;right:14px;top:17vh;height:38vh;width:46px;z-index:26;display:flex;flex-direction:column;align-items:center;
  opacity:0;transform:translateX(30px);transition:opacity .6s,transform .7s var(--ease);pointer-events:none}
.tl.show{opacity:1;transform:none}
.tl-age{display:flex;flex-direction:column;align-items:center;line-height:1;margin-bottom:10px}
.tl-age b{font-size:1.9rem;font-weight:800;letter-spacing:-.04em;background:linear-gradient(180deg,hsl(var(--h,280),95%,78%),hsl(calc(var(--h,280) + 60),95%,66%));-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-age b.tick{animation:tlTick .45s var(--ease)}
@keyframes tlTick{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.tl-age span{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute,#9aa)}
.tl-line{position:relative;flex:1;width:4px;border-radius:4px;background:rgba(255,255,255,.12)}
.tl-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:4px;background:linear-gradient(180deg,hsl(var(--h,280),90%,65%),hsl(calc(var(--h,280) + 60),90%,62%));box-shadow:0 0 14px hsla(var(--h,280),90%,60%,.8)}
.tl-rv{position:absolute;left:50%;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;fill:#fff;filter:drop-shadow(0 0 8px hsl(var(--h,280),95%,65%));transform:translateY(0)}
.tl-dots{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.tl-dots li{position:absolute;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#2a2a40;border:2px solid rgba(255,255,255,.25);pointer-events:auto;cursor:pointer;transition:.3s}
.tl-dots li.past{background:hsl(var(--h,280),90%,65%);border-color:#fff}
.tl-dots li:hover{transform:scale(1.7)}
.tl-dots li::after{content:attr(data-y);position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:.65rem;font-weight:700;color:#fff;background:rgba(10,10,24,.85);padding:2px 7px;border-radius:99px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}
.tl-dots li:hover::after{opacity:1}
@media (max-width:1000px){.tl{display:none}}

/* ===== Countdown-Rueckblick ===== */
.cd-rueck{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cd-rueck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(1.15) brightness(.8)}
.cd-rueck img.on{opacity:.42;animation:rk .22s ease-out both}
@keyframes rk{0%{transform:scale(1.18) rotate(-.8deg)}100%{transform:scale(1.02) rotate(0)}}
.cd-rueck::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(8,6,24,.1),rgba(8,6,24,.78) 85%)}
.cd-year{position:absolute;z-index:2;left:0;right:0;bottom:7vh;text-align:center;font-weight:800;font-size:clamp(3rem,13vmin,8rem);letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.55);pointer-events:none;text-shadow:0 0 40px hsla(var(--h),95%,60%,.5)}
@media (prefers-reduced-motion:reduce){.cd-rueck{display:none}}

/* ===== Beat-Diashow ===== */
.ss.beat .ss-main{animation:none}
.ss-beatflash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%)}
.ss.beat .ss-beatflash{animation:bflash .28s ease-out}
@keyframes bflash{0%{opacity:1}100%{opacity:0}}
.lb-btn.on-beat{background:linear-gradient(120deg,#7c5cff,#ff5ca8);border-color:transparent}
.ss-beatlab{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:3;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,10,24,.6);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:99px;opacity:0;transition:opacity .4s;pointer-events:none}
.ss-beatlab.on{opacity:1}

/* ===== Foto-Memory ===== */
.memory{position:relative;padding:clamp(80px,12vh,140px) clamp(14px,4vw,56px) 60px;max-width:1100px;margin:0 auto;text-align:center}
.mem-eyebrow{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:hsl(var(--h,300),90%,75%);font-weight:700}
.mem-title{font-size:clamp(2.4rem,7vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:10px 0 8px;
  background:linear-gradient(90deg,#7c5cff,#ff5ca8 55%,#ffb454);-webkit-background-clip:text;background-clip:text;color:transparent}
.mem-sub{color:var(--mute,#9aa);max-width:560px;margin:0 auto 22px}
.mem-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-bottom:22px}
.mem-lvl{padding:8px 16px;border-radius:99px;font-weight:700;font-size:.9rem;background:rgba(255,255,255,.08);border:1px solid var(--line,rgba(255,255,255,.14));color:#fff;transition:.25s}
.mem-lvl.on{background:linear-gradient(120deg,#7c5cff,#ff5ca8);border-color:transparent}
.mem-stat{display:flex;gap:16px;margin-left:10px;font-variant-numeric:tabular-nums;color:#dfe2f6;font-size:.95rem}
.mem-stat b{color:#fff}
.mem-board{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:clamp(8px,1.6vw,16px);max-width:var(--mw,720px);margin:0 auto}
.mc{position:relative;aspect-ratio:1;perspective:900px;border-radius:14px;background:none;padding:0;cursor:pointer}
.mc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.mc.up .mc-in{transform:rotateY(180deg)}
.mc-f,.mc-b{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.mc-f{display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,hsl(var(--h,280),80%,45%),#1a1233 70%);border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.mc-f svg{width:46%;height:46%;fill:rgba(255,255,255,.85);filter:drop-shadow(0 0 10px rgba(255,255,255,.35))}
.mc:hover .mc-f{border-color:rgba(255,255,255,.5)}
.mc-b{transform:rotateY(180deg);background-size:cover;background-position:50% 22%;border:1px solid rgba(255,255,255,.3)}
.mc-b span{position:absolute;left:8px;bottom:8px;padding:2px 9px;border-radius:99px;font-size:.7rem;font-weight:800;background:rgba(8,6,24,.7);color:#fff}
.mc.ok .mc-b{box-shadow:0 0 0 3px hsl(145,80%,55%),0 0 24px hsla(145,90%,55%,.7);animation:mcOk .6s var(--ease)}
@keyframes mcOk{0%{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) scale(1.1)}100%{transform:rotateY(180deg) scale(1)}}
.mc.bad .mc-in{animation:mcBad .4s}
@keyframes mcBad{0%,100%{translate:0}25%{translate:-6px}75%{translate:6px}}
.mem-win{max-width:560px;margin:26px auto 0;padding:22px 26px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--line,rgba(255,255,255,.14));backdrop-filter:blur(10px);
  opacity:0;transform:translateY(20px) scale(.96);transition:.7s var(--ease);pointer-events:none;height:0;overflow:hidden;padding-top:0;padding-bottom:0;margin-top:0}
.mem-win.on{opacity:1;transform:none;pointer-events:auto;height:auto;padding:22px 26px;margin-top:26px}
.mem-win b{display:block;font-size:1.5rem;margin-bottom:6px}
.mem-win button{margin-top:12px}
@media (prefers-reduced-motion:reduce){.mc-in{transition:none}}

/* Lightbox: hochformatige Fotos ganz anzeigen (nicht am unteren Rand abschneiden) */
.lb-stage img{max-width:min(94vw,1500px);max-height:calc(100svh - 120px);width:auto;height:auto;object-fit:contain}
@media (max-width:720px){.lb-stage img{max-height:calc(100svh - 190px)}}