:root{--slide-transition:1150ms;--kenburns-duration:9150ms;--layer-transition:1150ms;--fg:#fff;--muted:rgba(255,255,255,.68);--glass:rgba(14,14,24,.58);--line:rgba(255,255,255,.18);--accent:#ff9d91}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0c0c13;color:var(--fg);font-family:Inter,Lato,"Segoe UI",Arial,sans-serif}button,input{font:inherit}.locked .stage{visibility:hidden}.login-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:#11121f;transition:opacity .8s,visibility .8s}.login-screen.done{opacity:0;visibility:hidden}.aurora{position:absolute;inset:-10%;filter:blur(46px);opacity:.9}.aurora i{position:absolute;border-radius:45% 55% 62% 38%;animation:drift 14s ease-in-out infinite alternate}.aurora i:nth-child(1){width:48vw;height:48vw;left:-8%;top:-12%;background:#f78f86}.aurora i:nth-child(2){width:42vw;height:42vw;right:-5%;top:4%;background:#678bff;animation-delay:-4s}.aurora i:nth-child(3){width:38vw;height:38vw;left:22%;bottom:-16%;background:#ffc75f;animation-delay:-7s}.aurora i:nth-child(4){width:32vw;height:32vw;right:12%;bottom:-12%;background:#bc79ff;animation-delay:-2s}@keyframes drift{to{transform:translate(6vw,4vh) rotate(15deg) scale(1.12)}}.login-card{position:relative;width:min(430px,calc(100vw - 34px));padding:38px;border:1px solid var(--line);border-radius:30px;background:rgba(18,18,30,.58);backdrop-filter:blur(28px);box-shadow:0 30px 90px rgba(0,0,0,.38)}.mini-heart{font-size:44px;font-weight:200}.kicker{font-size:10px;letter-spacing:.24em;color:#ffd2cc}.login-card h1{font-size:52px;letter-spacing:-.055em;margin:8px 0}.login-card>p{color:var(--muted);line-height:1.5}.login-card label{display:block;font-size:11px;letter-spacing:.11em;margin-top:18px;color:var(--muted)}.login-card input{display:block;width:100%;margin-top:8px;padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.09);color:white;outline:none}.login-card button[type=submit]{width:100%;margin-top:24px;padding:16px;border:0;border-radius:14px;background:#fff;color:#161622;font-weight:800;display:flex;justify-content:space-between;cursor:pointer}.login-card small{display:block;margin-top:18px;color:rgba(255,255,255,.42)}.login-error{min-height:18px;color:#ffd1cc!important;font-size:12px}.remember-row{display:flex!important;align-items:center;gap:10px;margin-top:18px!important;letter-spacing:0!important;text-transform:none;color:rgba(255,255,255,.76)!important;cursor:pointer}.remember-row input{display:inline-block!important;width:18px!important;height:18px!important;margin:0!important;padding:0!important;accent-color:#ff9d91}.remember-row span{font-size:13px}.top-actions{justify-self:end;display:flex;align-items:center;gap:8px}.top-actions .icon-btn{justify-self:auto}#logoutButton{opacity:.72}#logoutButton:hover{opacity:1}
.stage{position:fixed;inset:0;background:#08080d;perspective:1400px}.slides,.slide{position:absolute;inset:0}.slide{opacity:0;pointer-events:none;transform:scale(1.035);transition:opacity var(--slide-transition) ease,transform var(--slide-transition) cubic-bezier(.2,.75,.2,1),filter var(--slide-transition) ease;overflow:hidden;transform-style:preserve-3d;filter:blur(2px)}.slide.active{opacity:1;pointer-events:auto;transform:scale(1);filter:none}.slide.exit-left{transform:translateX(-8%) scale(1.035);opacity:0}.slide.exit-right{transform:translateX(8%) scale(1.035);opacity:0}.slide.fx-fade{transform:scale(1.018)}.slide.fx-slide-left{transform:translateX(5%) scale(1.025)}.slide.fx-slide-right{transform:translateX(-5%) scale(1.025)}.slide.active.fx-fade,.slide.active.fx-slide-left,.slide.active.fx-slide-right{transform:translateX(0) scale(1)}.backdrop{position:absolute;inset:-5%;background-position:center;background-size:cover;filter:blur(30px) brightness(.55) saturate(.95);transform:scale(1.13) translate3d(var(--tx,0),var(--ty,0),0);transition:transform .2s ease-out}.slide-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .2s ease-out}.slide-image img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);filter:saturate(.98);will-change:transform}.slide.active.fx-kenburns-in .slide-image img{animation:kenburnsIn var(--kenburns-duration) ease-out both}.slide.active.fx-kenburns-left .slide-image img{animation:kenburnsLeft var(--kenburns-duration) ease-out both}.slide.active.fx-kenburns-right .slide-image img{animation:kenburnsRight var(--kenburns-duration) ease-in-out both}.slide.active.fx-kenburns-up .slide-image img{animation:kenburnsUp var(--kenburns-duration) ease-in-out both}.slide.active.fx-kenburns-down .slide-image img{animation:kenburnsDown var(--kenburns-duration) ease-in-out both}.slide.active.fx-kenburns-diagonal .slide-image img{animation:kenburnsDiagonal var(--kenburns-duration) ease-in-out both}@keyframes kenburnsIn{from{transform:scale(1.02)}to{transform:scale(1.12)}}@keyframes kenburnsLeft{from{transform:scale(1.12) translateX(2.5%)}to{transform:scale(1.05) translateX(-2.5%)}}@keyframes kenburnsRight{from{transform:scale(1.12) translateX(-2.5%)}to{transform:scale(1.05) translateX(2.5%)}}@keyframes kenburnsUp{from{transform:scale(1.08) translateY(2.5%)}to{transform:scale(1.15) translateY(-2.5%)}}@keyframes kenburnsDown{from{transform:scale(1.15) translateY(-2.5%)}to{transform:scale(1.07) translateY(2.5%)}}@keyframes kenburnsDiagonal{from{transform:scale(1.06) translate(-2%,-1.5%)}to{transform:scale(1.14) translate(2%,1.5%)}}.slide.contain .slide-image img{object-fit:contain;width:min(92vw,1200px);height:91vh;filter:drop-shadow(0 24px 65px rgba(0,0,0,.5))}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,11,.75),transparent 58%),linear-gradient(0deg,rgba(6,6,11,.8),transparent 52%);pointer-events:none}.slide-copy{position:absolute;z-index:4;left:clamp(32px,7vw,110px);bottom:clamp(140px,18vh,210px);max-width:min(650px,68vw);padding:26px 30px;border-left:1px solid rgba(255,255,255,.55);background:linear-gradient(90deg,rgba(9,9,15,.42),transparent);text-shadow:0 4px 26px rgba(0,0,0,.55);transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .2s ease-out}.slide-copy .eyebrow{font-size:10px;letter-spacing:.24em;color:#ffd1cb}.slide-copy h1,.slide-copy h2{font-size:clamp(40px,6vw,78px);line-height:.98;letter-spacing:-.055em;margin:10px 0 18px}.slide-copy strong{display:block;color:#ffb3a8;font-weight:500}.slide-copy p{font-size:clamp(16px,1.6vw,22px);line-height:1.55;color:rgba(255,255,255,.82);margin:0}.heart-line{width:80px;height:70px;fill:none;stroke:#fff;stroke-width:2}.topbar{position:fixed;z-index:30;top:0;left:0;right:0;padding:20px 26px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:linear-gradient(180deg,rgba(7,7,12,.6),transparent);pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.18em}.brand span{font-size:24px}.counter{font-size:11px;letter-spacing:.2em;color:var(--muted)}.topbar .icon-btn{justify-self:end}.icon-btn{border:1px solid var(--line);background:rgba(10,10,18,.48);backdrop-filter:blur(14px);color:white;border-radius:999px;padding:10px 14px;cursor:pointer;font-size:10px;letter-spacing:.12em}.icon-btn.active{background:white;color:#111}.nav{position:fixed;z-index:30;top:47%;transform:translateY(-50%);width:54px;height:54px;border:1px solid var(--line);border-radius:50%;background:rgba(12,12,20,.48);backdrop-filter:blur(16px);color:#fff;font-size:38px;font-weight:200;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer;transition:.25s}.nav span{display:block;line-height:1;transform:translateY(-4px);pointer-events:none}.nav.next span{transform:translateY(-4px)}.nav:hover{background:#fff;color:#111;transform:translateY(-50%) scale(1.06)}.nav.prev{left:22px}.nav.next{right:22px}.dots{position:fixed;z-index:36;right:24px;bottom:24px;display:flex;gap:6px;max-width:calc(100vw - 840px);overflow:hidden;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(10,10,18,.34);backdrop-filter:blur(12px)}.dots button{flex:0 0 auto;width:5px;height:5px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.36);cursor:pointer;transition:.25s}.dots button.active{width:24px;border-radius:6px;background:#fff}.music-panel{position:fixed;z-index:35;left:50%;bottom:22px;transform:translateX(-50%) translate3d(var(--tx,0),var(--ty,0),0);width:min(760px,calc(100vw - 140px));display:grid;grid-template-columns:54px 1fr 44px auto 100px;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:22px;background:rgba(14,14,24,.68);backdrop-filter:blur(24px);box-shadow:0 18px 60px rgba(0,0,0,.35);transition:transform .2s ease-out}.cover-play{width:50px;height:50px;border-radius:50%;border:0;background:#fff;color:#15151f;font-size:19px;cursor:pointer}.now-playing small{display:block;font-size:8px;letter-spacing:.18em;color:rgba(255,255,255,.48)}.now-playing b{display:block;margin:3px 0 8px;font-size:14px}.timeline{height:4px;background:rgba(255,255,255,.16);border-radius:5px;cursor:pointer}.timeline i{display:block;width:0;height:100%;background:var(--accent);border-radius:inherit}.times{display:flex;justify-content:space-between;font-size:9px;color:rgba(255,255,255,.46);margin-top:5px}.list-btn{padding:0;width:40px;height:40px}.wav-link{font-size:10px;color:white;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;white-space:nowrap}.music-panel input{width:100px}.track-drawer{position:fixed;z-index:50;top:0;right:0;height:100%;width:min(430px,94vw);padding:30px;background:rgba(12,12,21,.91);backdrop-filter:blur(30px);border-left:1px solid var(--line);transform:translateX(105%);transition:.55s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 70px rgba(0,0,0,.4)}.track-drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px}.drawer-head small{font-size:9px;letter-spacing:.2em;color:#ffb7ad}.drawer-head h2{font-size:31px;letter-spacing:-.04em;margin:6px 0}.drawer-head button{border:0;background:none;color:white;font-size:34px;cursor:pointer}.track-item{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.09);cursor:pointer}.track-item:hover,.track-item.active{background:rgba(255,255,255,.07)}.track-item span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1)}.track-item small{display:block;color:var(--muted);margin-top:3px}.track-item a{color:#fff;font-size:10px;text-decoration:none}.loop-row{display:flex;gap:10px;margin-top:24px;color:var(--muted);font-size:12px}.swipe-hint{position:fixed;z-index:20;right:24px;bottom:105px;font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.38)}
@media(max-width:760px){.nav{top:46%}.nav span{transform:translateY(-3px)}.topbar{padding:14px 16px}.brand b{display:none}.nav{width:42px;height:42px;font-size:29px}.nav.prev{left:9px}.nav.next{right:9px}.slide-copy{left:20px;right:20px;bottom:160px;max-width:none;padding:20px}.slide-copy h1,.slide-copy h2{font-size:42px}.slide-copy p{font-size:15px}.music-panel{width:calc(100vw - 24px);bottom:12px;grid-template-columns:48px 1fr 40px;padding:10px 12px}.music-panel .wav-link,.music-panel input{display:none}.dots{right:12px;bottom:86px;left:auto;max-width:calc(100vw - 24px);padding:8px 10px}.swipe-hint{display:none}.counter{display:none}.slide.contain .slide-image img{width:100vw;height:100vh}.track-drawer{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.depth-layer,.depth-ui{transform:none!important}}

/* ============================================================
   V10 – SLIDER-REVOLUTION-ÄHNLICHE LAYER-EFFEKTE
   Die Namen entsprechen exakt der Effekt-Legende in config.js.
   ============================================================ */

/* Ken Burns aliases for the configurable kb-* classes */
.slide.active.kb-kenburns-in .slide-image img{animation:kenburnsIn var(--kenburns-duration) ease-out both}
.slide.active.kb-kenburns-left .slide-image img{animation:kenburnsLeft var(--kenburns-duration) ease-out both}
.slide.active.kb-kenburns-right .slide-image img{animation:kenburnsRight var(--kenburns-duration) ease-in-out both}
.slide.active.kb-kenburns-up .slide-image img{animation:kenburnsUp var(--kenburns-duration) ease-in-out both}
.slide.active.kb-kenburns-down .slide-image img{animation:kenburnsDown var(--kenburns-duration) ease-in-out both}
.slide.active.kb-kenburns-diagonal .slide-image img{animation:kenburnsDiagonal var(--kenburns-duration) ease-in-out both}

/* Image reveal layer */
.slide .slide-image{clip-path:inset(0);opacity:1}
.slide.img-mask-left .slide-image{clip-path:inset(0 100% 0 0)}
.slide.active.img-mask-left .slide-image{animation:imageMaskLeft 1.15s cubic-bezier(.22,.8,.2,1) forwards}
.slide.img-mask-right .slide-image{clip-path:inset(0 0 0 100%)}
.slide.active.img-mask-right .slide-image{animation:imageMaskRight 1.15s cubic-bezier(.22,.8,.2,1) forwards}
.slide.img-mask-center .slide-image{clip-path:inset(0 50%)}
.slide.active.img-mask-center .slide-image{animation:imageMaskCenter 1.2s cubic-bezier(.22,.8,.2,1) forwards}
.slide.img-blur-in .slide-image{opacity:0;filter:blur(18px);transform:scale(1.08) translate3d(var(--tx,0),var(--ty,0),0)}
.slide.active.img-blur-in .slide-image{animation:imageBlurIn 1.25s ease forwards}
.slide.img-zoom-reveal .slide-image{opacity:0;clip-path:inset(7% 7%);transform:scale(1.13) translate3d(var(--tx,0),var(--ty,0),0)}
.slide.active.img-zoom-reveal .slide-image{animation:imageZoomReveal 1.2s cubic-bezier(.2,.8,.2,1) forwards}
.slide.img-soft-fade .slide-image{opacity:0}
.slide.active.img-soft-fade .slide-image{animation:imageSoftFade 1.25s ease forwards}
@keyframes imageMaskLeft{to{clip-path:inset(0 0 0 0)}}
@keyframes imageMaskRight{to{clip-path:inset(0 0 0 0)}}
@keyframes imageMaskCenter{to{clip-path:inset(0 0)}}
@keyframes imageBlurIn{to{opacity:1;filter:blur(0);transform:scale(1) translate3d(var(--tx,0),var(--ty,0),0)}}
@keyframes imageZoomReveal{to{opacity:1;clip-path:inset(0);transform:scale(1) translate3d(var(--tx,0),var(--ty,0),0)}}
@keyframes imageSoftFade{to{opacity:1}}

/* Text layer entrances */
.slide-copy{opacity:0;will-change:transform,opacity,filter,clip-path}
.slide.active .slide-copy.text-fade-up{animation:textFadeUp .9s .38s cubic-bezier(.22,.8,.2,1) both}
.slide.active .slide-copy.text-slide-left{animation:textSlideLeft .95s .35s cubic-bezier(.22,.8,.2,1) both}
.slide.active .slide-copy.text-slide-right{animation:textSlideRight .95s .35s cubic-bezier(.22,.8,.2,1) both}
.slide.active .slide-copy.text-scale-in{animation:textScaleIn .9s .38s cubic-bezier(.22,.8,.2,1) both}
.slide.active .slide-copy.text-split-up,
.slide.active .slide-copy.text-split-left{animation:textCardFade .25s .28s both}
.slide-copy .split-title>span,.slide-copy .split-title strong>span{display:inline-block;opacity:0;will-change:transform,opacity,filter}
.slide.active .text-split-up .split-title>span,
.slide.active .text-split-up .split-title strong>span{animation:wordUp .72s cubic-bezier(.18,.8,.2,1) both;animation-delay:calc(.42s + var(--word)*.055s)}
.slide.active .text-split-left .split-title>span,
.slide.active .text-split-left .split-title strong>span{animation:wordLeft .72s cubic-bezier(.18,.8,.2,1) both;animation-delay:calc(.42s + var(--word)*.055s)}
.slide.active .text-split-up .eyebrow,.slide.active .text-split-up p,.slide.active .text-split-up .heart-line,
.slide.active .text-split-left .eyebrow,.slide.active .text-split-left p,.slide.active .text-split-left .heart-line{animation:textAux .75s .72s ease both}
@keyframes textCardFade{to{opacity:1}}
@keyframes textFadeUp{from{opacity:0;transform:translate3d(var(--tx,0),calc(var(--ty,0) + 45px),0)}to{opacity:1;transform:translate3d(var(--tx,0),var(--ty,0),0)}}
@keyframes textSlideLeft{from{opacity:0;transform:translate3d(calc(var(--tx,0) - 80px),var(--ty,0),0)}to{opacity:1;transform:translate3d(var(--tx,0),var(--ty,0),0)}}
@keyframes textSlideRight{from{opacity:0;transform:translate3d(calc(var(--tx,0) + 80px),var(--ty,0),0)}to{opacity:1;transform:translate3d(var(--tx,0),var(--ty,0),0)}}
@keyframes textScaleIn{from{opacity:0;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.86);filter:blur(10px)}to{opacity:1;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(1);filter:blur(0)}}
@keyframes wordUp{from{opacity:0;transform:translateY(34px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes wordLeft{from{opacity:0;transform:translateX(-38px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes textAux{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Subtle light sweep on the glass text card */
.slide-copy::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.13) 45%,transparent 68%);transform:translateX(-130%);mix-blend-mode:screen}
.slide.active .slide-copy::after{animation:lightSweep 1.5s 1.05s ease-out both}
@keyframes lightSweep{to{transform:translateX(140%)}}

/* Player layer entrances, selected per slide in config.js */
.music-panel.player-float-up{animation:playerFloatUp .75s cubic-bezier(.2,.8,.2,1)}
.music-panel.player-float-left{animation:playerFloatLeft .75s cubic-bezier(.2,.8,.2,1)}
.music-panel.player-float-right{animation:playerFloatRight .75s cubic-bezier(.2,.8,.2,1)}
.music-panel.player-glass-pop{animation:playerGlassPop .72s cubic-bezier(.18,.8,.2,1)}
.music-panel.player-soft-fade{animation:playerSoftFade .8s ease}
@keyframes playerFloatUp{from{opacity:0;transform:translateX(-50%) translate3d(var(--tx,0),calc(var(--ty,0) + 42px),0)}to{opacity:1;transform:translateX(-50%) translate3d(var(--tx,0),var(--ty,0),0)}}
@keyframes playerFloatLeft{from{opacity:0;transform:translateX(calc(-50% - 65px)) translate3d(var(--tx,0),var(--ty,0),0)}to{opacity:1;transform:translateX(-50%) translate3d(var(--tx,0),var(--ty,0),0)}}
@keyframes playerFloatRight{from{opacity:0;transform:translateX(calc(-50% + 65px)) translate3d(var(--tx,0),var(--ty,0),0)}to{opacity:1;transform:translateX(-50%) translate3d(var(--tx,0),var(--ty,0),0)}}
@keyframes playerGlassPop{from{opacity:0;transform:translateX(-50%) translate3d(var(--tx,0),var(--ty,0),0) scale(.88);filter:blur(10px)}to{opacity:1;transform:translateX(-50%) translate3d(var(--tx,0),var(--ty,0),0) scale(1);filter:blur(0)}}
@keyframes playerSoftFade{from{opacity:0}to{opacity:1}}

@media(max-width:760px){
  .slide.active .slide-copy{animation-duration:.7s}
  .slide-copy::after{display:none}
}

@media(max-width:760px){#logoutButton{font-size:9px;padding:9px 11px;width:auto;height:38px}#logoutButton::after{content:none}.top-actions{gap:6px}.top-actions .icon-btn{white-space:nowrap;letter-spacing:.08em}#autoToggle{padding:9px 11px;height:38px}}


/* Timing values are controlled in config.js -> gallery */
.slide.active.img-mask-left .slide-image,
.slide.active.img-mask-right .slide-image,
.slide.active.img-mask-center .slide-image,
.slide.active.img-blur-in .slide-image,
.slide.active.img-zoom-reveal .slide-image,
.slide.active.img-soft-fade .slide-image { animation-duration: var(--layer-transition) !important; }
.slide.active .slide-copy,
.music-panel.layer-enter { animation-duration: var(--layer-transition) !important; }

.wav-link.downloading{opacity:.65;pointer-events:none;cursor:wait}

/* Autoplay-Hinweis, nur wenn der Browser einen automatischen Start blockiert. */
.autoplay-notice{
 position:fixed;left:50%;bottom:1.25rem;z-index:1000;transform:translateX(-50%);
 border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:.72rem 1.05rem;
 color:#fff;background:rgba(18,18,25,.72);backdrop-filter:blur(18px) saturate(1.35);
 -webkit-backdrop-filter:blur(18px) saturate(1.35);box-shadow:0 12px 40px rgba(0,0,0,.28);
 font:700 .78rem/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.autoplay-notice span{margin-right:.45rem}.autoplay-notice[hidden]{display:none}

/* V16: gespeicherter Zugang – ein Klick für Browser-Audiofreigabe */
.login-card .forget-access{margin-top:10px;background:transparent!important;color:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important;font-size:.78rem!important;letter-spacing:.04em}
.login-card .forget-access:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}

/* V20 – sichtbarer iOS-Gyroskopstatus */

.motion-toggle.active{background:rgba(255,255,255,.94);color:#161620;border-color:transparent;box-shadow:0 8px 30px rgba(0,0,0,.22)}


@media(max-width:760px){}

/* v23: iPhone spacing and compact login controls */
@media (max-width:760px){
  .login-screen{overflow-y:auto;align-items:center;padding:18px 0;}
  .login-card{padding:26px 24px 24px;border-radius:24px;}
  .login-card h1{font-size:44px;margin:5px 0;}
  .login-card>p{margin:8px 0 12px;line-height:1.4;}
  .login-card label{margin-top:13px;}
  .login-card input{padding:12px 14px;}
  .remember-row{margin-top:14px!important;}
  .login-card button[type=submit]{margin-top:16px;padding:12px 15px;min-height:44px;border-radius:13px;align-items:center;}
  .login-card small{margin-top:12px;}

  /* Clear visual space between slide controls and player. */
  .dots{bottom:108px;}
}

/* Extra compact layout for short iPhone viewports. */
@media (max-width:760px) and (max-height:700px){
  .login-screen{align-items:flex-start;padding:10px 0;}
  .login-card{padding:20px 22px 18px;}
  .mini-heart{font-size:34px;line-height:1;}
  .login-card h1{font-size:38px;}
  .login-card>p{font-size:14px;margin:5px 0 8px;}
  .login-card label{margin-top:9px;}
  .login-card input{margin-top:5px;padding:10px 13px;}
  .remember-row{margin-top:10px!important;}
  .login-card button[type=submit]{margin-top:12px;padding:10px 14px;min-height:42px;}
  .login-error{min-height:14px;}
  .dots{bottom:104px;}
}


/* Geometrically centred play/pause icon — no font glyph alignment. */
.cover-play{
  position:relative;
  display:grid;
  place-items:center;
  padding:0;
  line-height:0;
  font-size:0;
}
.cover-play::before,
.cover-play::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.cover-play:not(.is-playing)::before{
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:13px solid currentColor;
  /* Optical correction for the asymmetric triangle. */
  transform:translate(calc(-50% + 1px),-50%);
}
.cover-play:not(.is-playing)::after{display:none}
.cover-play.is-playing::before,
.cover-play.is-playing::after{
  width:4px;
  height:16px;
  border:0;
  background:currentColor;
  border-radius:1px;
}
.cover-play.is-playing::before{transform:translate(calc(-50% - 4px),-50%)}
.cover-play.is-playing::after{transform:translate(calc(-50% + 4px),-50%)}

/* iPhone login button correction: actual button is type="button", not submit. */
#loginOpenButton{
  width:100%;
  margin-top:24px;
  padding:16px;
  min-height:50px;
  border:0;
  border-radius:14px;
  background:#fff;
  color:#161622;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

@media (max-width:760px){
  #loginOpenButton{
    margin-top:28px;
    min-height:46px;
    padding:12px 15px;
    border-radius:13px;
  }
}

@media (max-width:760px) and (max-height:700px){
  #loginOpenButton{
    margin-top:22px;
    min-height:44px;
    padding:10px 14px;
  }
}

/* iOS/WebKit memory protection: only the active slide participates in layout/compositing. */
@supports (-webkit-touch-callout: none) {
  .slide:not(.active):not(.exit-left):not(.exit-right) {
    visibility: hidden;
    content-visibility: hidden;
  }
  .slide:not(.contain) .backdrop { display: none; }
  .stage { perspective: none; }
  .slide { transform-style: flat; }
}

/* Private Hinweise – bewusst unauffällig */
.privacy-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.52);
  font: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  margin-top: 5px;
  padding: 4px 8px;
  cursor: pointer;
}
.privacy-link:hover { color: rgba(255,255,255,.86); }
.stage-privacy-link {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 35;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.38);
  font: inherit;
  font-size: 10px;
  letter-spacing: .04em;
  padding: 5px 7px;
  cursor: pointer;
}
.stage-privacy-link:hover { color: rgba(255,255,255,.78); }
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5,5,12,.68);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.privacy-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.privacy-card {
  position: relative;
  width: min(520px, 100%);
  max-height: min(78vh, 650px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  padding: 28px 26px 24px;
  background: rgba(24,24,36,.93);
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  color: rgba(255,255,255,.82);
}
.privacy-card h2 { margin: 2px 0 16px; color: #fff; font-size: 28px; }
.privacy-card p { margin: 0 0 13px; line-height: 1.55; font-size: 14px; }
.privacy-close {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 600px) {
  .privacy-card { border-radius: 20px; padding: 25px 21px 21px; }
  .stage-privacy-link { bottom: max(5px, env(safe-area-inset-bottom)); }
}