.ns-layer{position:absolute;inset:0;overflow:hidden}
.ns-in-fade{animation:ns-fade .6s ease both}
.ns-in-slide{animation:ns-slide .6s cubic-bezier(.2,.8,.2,1) both}
.ns-in-zoom{animation:ns-zoom .6s ease both}
@keyframes ns-fade{from{opacity:0}}
@keyframes ns-slide{from{transform:translateX(100%)}}
@keyframes ns-zoom{from{opacity:0;transform:scale(1.08)}}
.ns-fill{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ns-frame{background:#fff}
.ns-stage{position:absolute;left:50%;top:50%;transform-origin:center;overflow:hidden}
.ns-region{position:absolute;overflow:hidden}
.ns-text{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 .15em;white-space:pre-wrap;box-sizing:border-box;overflow-wrap:anywhere;outline:none}
.ns-text-inner{outline:none;min-height:1em}
.ns-icon{position:absolute;inset:0;container-type:size;display:grid;place-items:center;overflow:hidden}
.ns-app{position:absolute;inset:0;container-type:size;overflow:hidden}
.ns-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}
.ns-ticker{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.ns-ticker-track{display:inline-block;padding-left:0;font-weight:600;will-change:transform}
@keyframes ns-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ns-wdays{display:flex;gap:6cqmin;margin-top:3cqmin;font-size:4.5cqmin}
.ns-wday{text-align:center;display:flex;flex-direction:column;gap:1cqmin}
.ns-rss{position:absolute;inset:0;display:flex;gap:5cqmin;padding:6cqmin;box-sizing:border-box;align-items:center}
.ns-rss img{width:40%;height:100%;object-fit:cover;border-radius:2cqmin}
.ns-rss-body{flex:1;min-width:0}
.ns-fadein{animation:ns-fade .6s ease both}
.ns-audio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:5vmin;opacity:.6}

/* ---------- Playlist-Übergänge ---------- */
@property --ns-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --ns-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ns-tr { animation-timing-function: ease-in-out; animation-fill-mode: both; z-index: 1; }
.ns-tr-fade { animation-name: nsx-fade; }
.ns-tr-burn { animation-name: nsx-burn; }
.ns-tr-fade-gray { animation-name: nsx-gray; }
.ns-tr-colorphase { animation-name: nsx-phase; }
.ns-tr-colordistance { animation-name: nsx-dist; }
.ns-tr-morph { animation-name: nsx-morph; }
.ns-tr-dreamy { animation-name: nsx-dreamy; }
.ns-tr-wipe { animation-name: nsx-wipe; }
.ns-tr-warp { animation-name: nsx-warp; }
.ns-tr-cross-warp { animation-name: nsx-crosswarp; }
.ns-tr-ripple { animation-name: nsx-ripple; }
.ns-tr-circle { animation-name: nsx-circle; }
.ns-tr-radial { animation-name: nsx-radial; -webkit-mask-image: conic-gradient(#000 var(--ns-a), transparent 0); mask-image: conic-gradient(#000 var(--ns-a), transparent 0); }
.ns-tr-wind { animation-name: nsx-wind; }
.ns-tr-slices { animation-name: nsx-p; -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(var(--ns-p) / 10), transparent calc(var(--ns-p) / 10) 10%); mask-image: repeating-linear-gradient(90deg, #000 0 calc(var(--ns-p) / 10), transparent calc(var(--ns-p) / 10) 10%); }
.ns-tr-crosshatch { animation-name: nsx-p; -webkit-mask-image: repeating-linear-gradient(45deg, #000 0 calc(var(--ns-p) / 12.5), transparent calc(var(--ns-p) / 12.5) 8%), repeating-linear-gradient(-45deg, #000 0 calc(var(--ns-p) / 12.5), transparent calc(var(--ns-p) / 12.5) 8%); mask-image: repeating-linear-gradient(45deg, #000 0 calc(var(--ns-p) / 12.5), transparent calc(var(--ns-p) / 12.5) 8%), repeating-linear-gradient(-45deg, #000 0 calc(var(--ns-p) / 12.5), transparent calc(var(--ns-p) / 12.5) 8%); }
.ns-tr-squares, .ns-tr-squares-wire { animation-name: nsx-p; -webkit-mask-image: linear-gradient(to right, #000 var(--ns-p), transparent 0), linear-gradient(to bottom, #000 var(--ns-p), transparent 0); mask-image: linear-gradient(to right, #000 var(--ns-p), transparent 0), linear-gradient(to bottom, #000 var(--ns-p), transparent 0); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-size: 10% 10%; mask-size: 10% 10%; }
.ns-tr-squares-wire { -webkit-mask-size: 20% 20%; mask-size: 20% 20%; }
.ns-tr-pixelize { animation-name: nsx-pixel; animation-timing-function: steps(6, end); }
.ns-tr-polkadots { animation-name: nsx-p; -webkit-mask-image: radial-gradient(circle, #000 calc(var(--ns-p) * .75), transparent calc(var(--ns-p) * .75 + 1%)); mask-image: radial-gradient(circle, #000 calc(var(--ns-p) * .75), transparent calc(var(--ns-p) * .75 + 1%)); -webkit-mask-size: 8vmin 8vmin; mask-size: 8vmin 8vmin; }
.ns-tr-flyeye { animation-name: nsx-flyeye; }
.ns-tr-squeeze { animation-name: nsx-squeeze; }
.ns-tr-waterdrop { animation-name: nsx-waterdrop; }
.ns-tr-slide { animation-name: ns-slide; }
.ns-tr-zoom { animation-name: ns-zoom; }
@keyframes nsx-fade { from { opacity: 0; } }
@keyframes nsx-burn { from { opacity: 0; filter: brightness(4); } 50% { filter: brightness(2); } }
@keyframes nsx-gray { from { opacity: 0; filter: grayscale(1); } 60% { filter: grayscale(1); } }
@keyframes nsx-phase { from { opacity: 0; filter: hue-rotate(180deg) saturate(3); } }
@keyframes nsx-dist { from { opacity: 0; filter: contrast(4) saturate(2); } }
@keyframes nsx-morph { from { opacity: 0; filter: blur(40px); transform: scale(1.15); } }
@keyframes nsx-dreamy { from { opacity: 0; filter: blur(12px); transform: translateY(5%) scale(1.04); } }
@keyframes nsx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nsx-warp { from { clip-path: inset(0 100% 0 0); transform: skewX(-12deg) scale(1.1); } to { clip-path: inset(0 0 0 0); } }
@keyframes nsx-crosswarp { from { opacity: 0; transform: scale(1.4) rotate(3deg); filter: blur(10px); } }
@keyframes nsx-ripple { from { clip-path: circle(0% at 50% 50%); filter: blur(8px); transform: scale(1.06); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes nsx-circle { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes nsx-radial { from { --ns-a: 0deg; } to { --ns-a: 360deg; } }
@keyframes nsx-wind { from { opacity: 0; transform: translateX(-25%) skewX(10deg); filter: blur(14px); } }
@keyframes nsx-p { from { --ns-p: 0%; } to { --ns-p: 100%; } }
@keyframes nsx-pixel { from { opacity: 0; filter: blur(30px); } }
@keyframes nsx-flyeye { from { opacity: 0; transform: scale(1.6); filter: blur(25px) saturate(2); } }
@keyframes nsx-squeeze { from { transform: scaleY(0); } }
@keyframes nsx-waterdrop { from { clip-path: circle(0% at 50% 50%); filter: blur(12px); transform: scale(1.12); } 70% { filter: blur(2px); } to { clip-path: circle(75% at 50% 50%); } }
/* Interaktive Playlists */
.ns-ia{position:absolute;left:0;right:0;bottom:0;z-index:40;pointer-events:none;display:flex;justify-content:center;padding:2.2vmin}
.ns-ia-bar{display:none;align-items:center;gap:1.2vmin;padding:1vmin 1.6vmin;border-radius:1.4vmin;pointer-events:auto;cursor:default;max-width:90%;flex-wrap:wrap}
.ns-ia.open .ns-ia-bar{display:flex}
.ns-ia.open .ns-ia-hint{display:none}
.ns-ia.no-hint .ns-ia-hint{display:none}
.ns-ia-hint{position:absolute;right:2vmin;bottom:2vmin;font-size:2.4vmin;padding:.6vmin 1.2vmin;border-radius:1vmin;opacity:.75}
.ns-ia-dark .ns-ia-bar,.ns-ia-dark .ns-ia-hint{background:rgba(20,22,30,.88);color:#fff}
.ns-ia-light .ns-ia-bar,.ns-ia-light .ns-ia-hint{background:rgba(255,255,255,.92);color:#23252f}
.ns-ia-bar>button{background:none;border:0;color:inherit;font-size:3.4vmin;line-height:1;min-width:5vmin;min-height:5vmin;cursor:pointer}
.ns-ia-dots{display:flex;gap:.8vmin;flex-wrap:wrap;align-items:center}
.ns-ia-dots button{width:1.6vmin;height:1.6vmin;padding:0;border-radius:50%;border:0;background:currentColor;opacity:.35;cursor:pointer}
.ns-ia-dots button.on{opacity:1}