:root{
  font-family:Inter,Arial,sans-serif;
  color:#f5f1e8;
  background:#0c1420;
  --ink:#f5f1e8;
  --accent:#e9bf81;
}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- dev preview harness (index only) ---------- */
/* only in developer mode (?tune, see index.html); visitors never see the preview bar */
html:not(.dev) .toolbar{display:none}
.prototype{padding:0}
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px;flex-wrap:wrap;background:#0a1119}
.toolbar strong{letter-spacing:.14em;font-size:12px}
.switch{display:flex;gap:6px;background:#1a2632;padding:5px;border-radius:999px}
.switch button{border:0;cursor:pointer;color:#d6dde0;background:transparent;padding:10px 16px;border-radius:999px;font:inherit}
.switch button.active{background:var(--accent);color:#17202b}
.viewport{margin:auto;transition:width .35s ease;max-width:100%;background:#0f1b27}
.viewport.desktop{width:100%}
.viewport.tablet{width:820px;box-shadow:0 20px 80px #0008}
.viewport.mobile{width:390px;box-shadow:0 20px 80px #0008}

/* ---------- language toggle ---------- */
html:not([data-lang="en"]) [data-lang-text="en"]{display:none}
html[data-lang="en"] [data-lang-text="de"]{display:none}
.lang-switch{display:flex;gap:2px;background:#1a2632;padding:4px;border-radius:999px}
.lang-switch button{border:0;cursor:pointer;color:#9fb0ba;background:transparent;padding:6px 11px;border-radius:999px;font:inherit;font-size:11px;letter-spacing:.06em}
.lang-switch button.active{background:var(--accent);color:#17202b}

/* ---------- site chrome ---------- */
.site{overflow:hidden;--sky:#152b41;--glow:#e0a45f;--hill:#344b4d;--deep:#0b1723;background:#0e1b27}
.site[data-scene=desert]{--sky:#503b40;--glow:#eda96d;--hill:#8d6249;--deep:#332c35}
.site[data-scene=mountain]{--sky:#1c354e;--glow:#a7bdd0;--hill:#405b6a;--deep:#172b3b}
.site[data-scene=ocean]{--sky:#1e4254;--glow:#e7ac6c;--hill:#235761;--deep:#112c3b}
.site[data-scene=space]{--sky:#0c1330;--glow:#8fa6ff;--hill:#1c2550;--deep:#070a1c}

.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 5%;background:#0c1722eb;position:relative;z-index:3}
.brand{letter-spacing:.19em;font-size:17px;font-weight:700;text-decoration:none;display:block}
.brand small{display:block;letter-spacing:.25em;color:#d7b887;font-size:9px;margin-top:5px}
/* original STORAGE POSITION logo (gold lettering, background keyed out) */
.brand-logo{position:relative;display:block;line-height:0}
.brand-logo img{display:block;height:28px;width:auto}
/* homepage: the logo fades in once and a gold highlight sweeps across the letters */
.prototype .brand-logo img{animation:logo-in 1.2s ease-out both}
.prototype .brand-logo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,#fff8d6 48%,transparent 66%) no-repeat;background-size:250% 100%;background-position:130% 0;
  -webkit-mask:url(logo/storage-position-logo.webp) center/100% 100% no-repeat;mask:url(logo/storage-position-logo.webp) center/100% 100% no-repeat;
  mix-blend-mode:screen;animation:logo-shine 1.6s ease-in-out .9s both}
@keyframes logo-in{from{opacity:0;transform:scale(.96);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes logo-shine{from{background-position:130% 0}to{background-position:-30% 0}}
@media(prefers-reduced-motion:reduce){.prototype .brand-logo img,.prototype .brand-logo::after{animation:none}.prototype .brand-logo::after{display:none}}
.nav-right{display:flex;align-items:center;gap:22px}
.links{display:flex;gap:28px;font-size:13px}
.links a{cursor:pointer;text-decoration:none;opacity:.85}
.links a:hover,.links a.current{opacity:1;color:var(--accent)}

.footline{border-top:1px solid #ffffff20;padding:15px 5%;font-size:11px;color:#9dafbc;background:#101b26;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.footline .foot-links{display:flex;gap:16px;flex-wrap:wrap}
.footline .visits{color:#9dafbc;white-space:nowrap}
.footline .visits b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.footline .visits[hidden]{display:none}
.footline a{text-decoration:none;color:#9dafbc}
.footline a:hover{color:var(--accent)}

/* ---------- hero + landscape ---------- */
.hero{min-height:100vh;overflow:hidden;position:relative;isolation:isolate;display:flex;align-items:center;padding:60px 5% 42px;background:radial-gradient(circle at 72% 31%,var(--glow) 0,transparent 12%),linear-gradient(165deg,var(--sky),#334957 48%,var(--hill) 68%,var(--deep) 70%);transition:background .5s}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#0b142022 80%,#091522a0);z-index:-1}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#091522b8 0%,#09152244 55%,transparent);z-index:-1}
.landscape{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.landscape svg{width:100%;height:100%;display:block}
.landscape .mountain,.landscape .coast,.landscape .stars{display:none}
.site[data-scene=mountain] .landscape .desert,.site[data-scene=ocean] .landscape .desert,.site[data-scene=space] .landscape .desert{display:none}
.site[data-scene=mountain] .landscape .mountain{display:block}
.site[data-scene=ocean] .landscape .coast{display:block}
.site[data-scene=space] .landscape .stars{display:block}

/* real photo layer: sits above the illustrated SVG fallback, so dropping a file
   in assets/backgrounds/ upgrades the scene automatically with no markup change */
.hero-photo{position:absolute;inset:-6%;z-index:-2;background-size:cover;background-position:center 22%;filter:saturate(1.05) brightness(.82);animation:kenburns 36s ease-in-out infinite alternate;will-change:transform}
.site[data-scene=desert] .hero-photo{background-image:url(backgrounds/desert.jpg)}
.site[data-scene=mountain] .hero-photo{background-image:url(backgrounds/mountain.jpg)}
.site[data-scene=ocean] .hero-photo{background-image:url(backgrounds/ocean.jpg)}
.site[data-scene=space] .hero-photo{background-image:url(backgrounds/space.jpg)}
.hero.is-playing .hero-photo{animation-play-state:paused;transition:filter .6s}
.hero.is-playing .hero-photo{filter:saturate(.9) brightness(.55)}
@keyframes kenburns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.15) translate(-2.5%,-1.5%)}}
@media(prefers-reduced-motion:reduce){.hero-photo{animation:none}}

/* real looping video per scene; sits over the static photo once it can actually play,
   so a missing/unsupported clip just falls back to the still image underneath */
.hero-video{position:absolute;inset:-6%;z-index:-2;width:112%;height:112%;object-fit:cover;object-position:center 22%;filter:saturate(1.05) brightness(.82);display:none}
.site[data-scene=desert] .hero-video[data-scene=desert].ready,
.site[data-scene=mountain] .hero-video[data-scene=mountain].ready,
.site[data-scene=ocean] .hero-video[data-scene=ocean].ready,
.site[data-scene=space] .hero-video[data-scene=space].ready{display:block}
.hero.is-playing .hero-video{filter:saturate(.9) brightness(.55);transition:filter .6s}
@media(prefers-reduced-motion:reduce){.hero-video{display:none !important}}
.site[data-scene=mountain] .hero{background:linear-gradient(180deg,#7a9aaa 0%,#cad8d4 49%,#53797c 100%)}
.site[data-scene=ocean] .hero{background:linear-gradient(180deg,#426e82 0%,#e4b989 58%,#226273 59%,#123849 100%)}
.site[data-scene=desert] .hero{background:linear-gradient(180deg,#3e5366 0%,#d28e65 57%,#926750 100%)}
.site[data-scene=space] .hero{background:linear-gradient(180deg,#050814 0%,#131c3e 55%,#1c2550 100%)}

.hero-grid{display:grid;grid-template-columns:38% 62%;align-items:center;gap:20px;min-height:490px;width:100%}
.kicker{color:#ebca92;letter-spacing:.28em;text-transform:uppercase;font-size:11px}
.headline{font-family:Georgia,serif;font-size:clamp(38px,4.2vw,68px);font-weight:400;line-height:1.08;margin:19px 0}
.copy{line-height:1.7;max-width:390px;color:#e7e6df;font-size:15px}
.cta{display:inline-block;background:var(--accent);border-radius:999px;color:#17212b;font-weight:700;text-decoration:none;padding:14px 22px;margin-top:20px;font-size:13px}

/* ---------- player stage ---------- */
.device-stage{display:flex;align-items:center;justify-content:center;position:relative}
.screen-content{position:relative;z-index:1;text-shadow:0 2px 8px #000}
.screen-content small{display:block;letter-spacing:.2em;font-size:10px}
.screen-content strong{font-family:Georgia,serif;font-size:23px;font-weight:400}

/* real YouTube playback: a JS-fitted iframe (see fitIframeContain in app.js) that fits fully
   inside the screen shape without cropping. Any leftover strip (from the screen's own
   aspect ratio, or from pillarboxing baked into the source video itself) is filled with
   plain black here rather than the screen's decorative gradient, so it reads as one
   continuous black letterbox instead of a visible seam. */
.video-embed{position:absolute;inset:0;overflow:hidden;z-index:0;display:none;background:#000}
.video-embed.active{display:block}
.video-embed iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0}
#deviceStage.has-video .screen-content{display:none}


/* ---------- "in hand" lifestyle photo (real photo, not illustrated) ---------- */
.hero-copy{position:relative;z-index:2}
.device-stage:not(.showing-hand) .hand-view{display:none}

/* the "in hand" photo hugs the right edge of the browser window on desktop (the hero's own
   5% padding, which the inset:0 containing block already respects, keeps it off the true
   edge) while the whole hand still fits on screen instead of bleeding off it. On the
   stacked tablet/mobile layout there's no side-by-side text to align away from, so it
   stays centered there (see the .tablet/.mobile/@media overrides below). The image sizes
   itself (max-width/max-height, auto/auto) so .hand-view shrinks to exactly its rendered
   box, which keeps .hand-screen's percentage-based position locked to the actual screen
   graphic at any scale. */
.device-stage.showing-hand{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:flex-end}
/* Desktop size: the player keeps its full size (902 px wide, or less if the window is too low)
   as the window narrows, and the photo runs off the right edge instead - the hand/forearm gets
   cropped, the display stays put. The photo's left edge stays where the 57.2vw column begins.
   Only once just 64 % of the photo is left visible (a little past the display's right edge,
   with part of the thumb) does it start to scale down. The stacked layouts reset this below. */
.hand-view{position:relative;
  --hand-w:min(902px,calc(81.4vh * 1.3155),calc((100vh - var(--bars-h,142px)) * 1.3155),calc(57.2vw / .64));
  margin-right:min(0px,calc(57.2vw - var(--hand-w)))}
/* The photo's own screen glass is cut out (transparent) in the source image, except for the
   thumbnail that overlaps its top-right corner - so the .hand-screen layer underneath (video
   or the idle gradient) shows through as if it were actually playing on the device's display.
   That only reads correctly if the two are pixel-congruent, so .hand-screen uses the exact
   same rect (as % of the image) that was cut out of the photo, and the photo must stack above
   it (z-index, since .hand-screen's own position:absolute would otherwise win regardless of
   DOM order). */
.hand-view > img{position:relative;z-index:2;display:block;width:var(--hand-w);height:auto;max-width:none;max-height:none}
/* Traced directly from the cut-out hole in "Hand mit Player_inkl_transparenz_1800.png"
   (1872x1423): bounding box x 87-1122, y 37-477 (1035x440px) -> left 4.65%, top 2.6%,
   width 55.29%, height 30.92%. Re-sampled every 8px along both edges (112 points) instead
   of every 50px - the coarser pass skipped a bulge in the hole right where the thumb first
   touches it (around 25% down), leaving that sliver uncovered so the hero background showed
   through there; the dense trace follows the thumb notch and corner rounding without
   missing that peak. */
.hand-screen{
  position:absolute;z-index:1;left:4.65%;top:2.6%;width:55.29%;height:30.92%;
  clip-path:polygon(8.50% 0%, 5.99% 1.82%, 5.02% 3.64%, 4.25% 5.45%, 3.67% 7.27%, 3.29% 9.09%, 3.09% 10.91%, 3.09% 12.73%, 2.90% 14.55%, 2.90% 16.36%, 2.71% 18.18%, 2.71% 20%, 2.71% 21.82%, 2.51% 23.64%, 2.51% 25.45%, 2.32% 27.27%, 2.32% 29.09%, 2.32% 30.91%, 2.13% 32.73%, 2.13% 34.55%, 1.93% 36.36%, 1.93% 38.18%, 1.93% 40%, 1.74% 41.82%, 1.74% 43.64%, 1.55% 45.45%, 1.55% 47.27%, 1.55% 49.09%, 1.35% 50.91%, 1.35% 52.73%, 1.35% 54.55%, 1.16% 56.36%, 1.16% 58.18%, 1.16% 60%, 0.97% 61.82%, 0.97% 63.64%, 0.97% 65.45%, 0.77% 67.27%, 0.77% 69.09%, 0.77% 70.91%, 0.58% 72.73%, 0.58% 74.55%, 0.39% 76.36%, 0.39% 78.18%, 0.39% 80%, 0.19% 81.82%, 0.19% 83.64%, 0.19% 85.45%, 0% 87.27%, 0% 89.09%, 0% 90.91%, 0% 92.73%, 0.10% 94.55%, 0.48% 96.36%, 1.06% 98.18%, 2.03% 100%, 98.16% 100%, 99.13% 98.18%, 99.71% 96.36%, 100% 94.55%, 100% 92.73%, 100% 90.91%, 100% 89.09%, 100% 87.27%, 100% 85.45%, 100% 83.64%, 100% 81.82%, 99.81% 80%, 99.81% 78.18%, 99.81% 76.36%, 99.81% 74.55%, 99.81% 72.73%, 99.81% 70.91%, 99.81% 69.09%, 99.61% 67.27%, 99.61% 65.45%, 99.61% 63.64%, 99.42% 61.82%, 99.42% 60%, 99.42% 58.18%, 99.42% 56.36%, 99.42% 54.55%, 99.42% 52.73%, 99.23% 50.91%, 98.65% 49.09%, 98.26% 47.27%, 97.68% 45.45%, 97.29% 43.64%, 96.91% 41.82%, 96.71% 40%, 96.33% 38.18%, 95.94% 36.36%, 95.75% 34.55%, 95.36% 32.73%, 95.17% 30.91%, 95.17% 29.09%, 95.17% 27.27%, 95.17% 25.45%, 95.17% 23.64%, 95.27% 21.82%, 95.56% 20%, 95.94% 18.18%, 96.43% 16.36%, 97.20% 14.55%, 98.55% 12.73%, 98.65% 10.91%, 98.45% 9.09%, 98.26% 7.27%, 97.68% 5.45%, 97.10% 3.64%, 96.14% 1.82%, 94.20% 0%);
  overflow:hidden;
  background:linear-gradient(135deg,#2d2f33,#1c1e21 55%,#17181a);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;text-shadow:0 2px 6px #000;
}
/* the video plane gets a perspective matrix3d from app.js (fitIframeContain) */
.hand-screen .video-embed{transform-origin:0 0}
/* hit area over the display, only while a video plays (link cursor, hover title bar) */
.screen-hit{position:absolute;z-index:3;left:4.65%;top:2.6%;width:55.29%;height:30.92%;display:none;cursor:pointer}
#deviceStage.has-video .screen-hit{display:block}
/* muted autostart: "turn sound on" pill in the middle of the display, above the hit area */
.screen-unmute{position:absolute;z-index:4;left:32.3%;top:19%;transform:translate(-50%,-50%) rotate(-1deg);padding:.45em 1em;border-radius:999px;
  border:1px solid #e9bf81;background:#0b1420e0;color:#f3e3c3;font:600 clamp(10px,1vw,14px)/1.2 Inter,Arial,sans-serif;cursor:pointer;
  box-shadow:0 6px 18px #000a;animation:unmute-pulse 1.8s ease-in-out infinite}
.screen-unmute:hover{background:#e9bf81;color:#1b1206}
.screen-unmute[hidden]{display:none}
@keyframes unmute-pulse{50%{box-shadow:0 6px 18px #000a,0 0 0 6px #e9bf8133}}
.screen-zoom .screen-unmute{opacity:0}
/* YouTube-style title bar shown on hover, inside the video plane */
.screen-info{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s ease;color:#fff;font-family:Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#000b 0%,#0000 32%,#0000 68%,#000a 100%)}
.video-embed.show-info .screen-info{opacity:1}
.si-top{position:absolute;left:5%;right:4%;top:6%;display:flex;align-items:center;gap:8px}
.si-avatar{flex:none;width:26px;height:26px;border-radius:50%;background:#e9bf81;color:#1b1206;font:700 10px/26px Arial,sans-serif;text-align:center}
.si-text{min-width:0}
.si-title{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
.si-author{display:block;font-size:11px;opacity:.85}
.si-bottom{position:absolute;left:5%;right:4%;bottom:13%;display:flex;justify-content:space-between;font-size:11px;text-shadow:0 1px 3px #000}
.si-progress{position:absolute;left:5%;right:4%;bottom:8%;height:3px;background:#ffffff4d;border-radius:2px}
.si-progress i{display:block;height:100%;width:0;background:#f00;border-radius:2px}
/* zoom into the display: page chrome fades, photo and CD window fade, the hero rises above the rest */
body.screen-zoom{overflow:hidden}
.screen-zoom .hero{z-index:40;overflow:visible}
.screen-zoom .site,.screen-zoom .viewport{overflow:visible}
.screen-zoom .toolbar,.screen-zoom .nav,.screen-zoom .hero-copy{opacity:0;transition:opacity .3s ease}
.screen-zoom .hand-view > img,.screen-zoom .hand-cd,.screen-zoom .hand-btn{opacity:0;transition:opacity .4s ease .25s}
.screen-zoom .hand-screen{clip-path:none}
.hand-view > img,.hand-cd{transition:opacity .4s ease}
/* engraved "Nostalgischer DVD Player" on the housing: subtle, etched-looking lettering */
.hand-print{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;transition:opacity .4s ease}
.hand-print text{font-family:Georgia,"Times New Roman",serif}
.hand-print .hp-main{font-size:25px;font-style:italic;letter-spacing:3.2px}
.hand-print .hp-sub{font-size:12.5px;letter-spacing:4px;text-transform:uppercase}
.hand-print .hp-ink{fill:#4d545b;opacity:.62}
.hand-print .hp-light{fill:#ffffff;opacity:.75}
.hand-print .hp-sub{opacity:.85}
.screen-zoom .hand-print{opacity:0}
/* real full screen of the display itself */
.hand-screen:fullscreen{clip-path:none;background:#000;width:100%;height:100%;left:0;top:0}
.hand-screen:fullscreen .screen-info{display:none}
/* our "back to the player" button over YouTube's full-screen button (bottom right) */
.screen-exit{display:none;position:absolute;right:0;bottom:0;z-index:5;width:76px;height:60px;border:0;padding:0 14px 8px 0;cursor:pointer;
  align-items:flex-end;justify-content:flex-end;background:radial-gradient(circle at 70% 70%,#000c 0,#0008 45%,transparent 72%);opacity:.8;transition:opacity .2s}
.screen-exit:hover,.screen-exit:focus-visible{opacity:1;outline:none}
.screen-exit:hover svg{transform:scale(1.12)}
.screen-exit svg{transition:transform .2s}
.hand-screen:fullscreen .screen-exit{display:flex}

/* ---------- player menu projected onto the display (≡ button) ----------
   Same perspective plane as the video (transform set in app.js), clipped by the screen
   shape. Opens like a projector switching on: a bright line spreading from the middle. */
.hand-screen .video-embed iframe{filter:brightness(var(--display-brightness,1))}
.screen-menu{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;transform-origin:0 0;container-type:size;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}
.screen-menu.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease;animation:sm-project .55s ease-out}
@keyframes sm-project{
  0%{clip-path:inset(49% 2% 49% 2%);filter:brightness(2.6)}
  40%{clip-path:inset(0 0 0 0);filter:brightness(1.6)}
  100%{clip-path:inset(0 0 0 0);filter:none}}
.sm-dim{position:absolute;inset:0;background:#04080ccc;-webkit-backdrop-filter:blur(3px) saturate(.7);backdrop-filter:blur(3px) saturate(.7)}
.sm-glass{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,#ffffff12 42%,transparent 54%),repeating-linear-gradient(180deg,#ffffff06 0 1px,transparent 1px 3px)}
/* content keeps clear of the slanted left edge and of the thumb on the right */
.sm-inner{position:absolute;left:6.5%;right:10.5%;top:10%;bottom:11%;display:flex;gap:3.5%;color:#e9e6dc;text-align:left;
  font:clamp(7px,6.4cqh,15px)/1.35 Inter,Arial,sans-serif}
.sm-tabs{flex:0 0 26%;display:flex;flex-direction:column;gap:.35em}
.sm-tabs button{font:inherit;text-align:left;color:#cfd6da;background:#ffffff0d;border:1px solid #ffffff1c;border-radius:.45em;padding:.35em .65em;cursor:pointer}
.sm-tabs button:hover{border-color:#e9bf8199;color:#fff}
.sm-tabs button.on{color:#1b1206;background:linear-gradient(180deg,#f3d59e,#d6a257);border-color:#f3d59e;font-weight:600}
.sm-tabs button[data-tab=close]{margin-top:auto;color:#9fb0ba}
.sm-panel{flex:1;min-width:0;display:flex}
.sm-scroll{position:relative;flex:1;min-width:0;overflow-y:auto;scrollbar-width:none;padding-right:.4em;overscroll-behavior:contain}
.sm-scroll::-webkit-scrollbar{display:none}
.sm-title{font-family:Georgia,serif;color:#e9bf81;font-size:1.05em;margin-bottom:.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-row{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.28em 0;border-bottom:1px solid #ffffff12}
.sm-segs{display:flex;gap:.25em;flex-wrap:wrap;justify-content:flex-end}
.sm-segs button,.sm-wide{font:inherit;font-size:.88em;padding:.18em .6em;border-radius:.4em;border:1px solid #ffffff2a;background:#ffffff0a;color:#dfe3e2;cursor:pointer}
.sm-segs button:hover,.sm-wide:hover{border-color:#e9bf8199}
.sm-segs button.on{background:#e9bf81;color:#1b1206;border-color:#e9bf81}
.sm-wide{width:100%;padding:.35em .6em;text-align:left}
.sm-range{display:flex;align-items:center;gap:.5em;flex:0 0 62%}
.sm-range input{flex:1;min-width:0;accent-color:#d6a257;height:1em}
.sm-range em{font-style:normal;min-width:2.8em;text-align:right;color:#e9bf81;font-variant-numeric:tabular-nums}
.sm-tracks{list-style:none;margin:.35em 0 0;padding:0}
.sm-tracks li{display:flex;gap:.6em;padding:.22em .45em;border-radius:.4em;cursor:pointer;border:1px solid transparent}
.sm-tracks b{flex:none;width:1.9em;color:#8d9ca6;font-weight:400;font-variant-numeric:tabular-nums}
.sm-tracks span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-tracks i{flex:none;font-style:normal;color:#8d9ca6;font-variant-numeric:tabular-nums}
.sm-tracks li:hover{background:#e9bf811c;color:#e9bf81}
.sm-tracks li.playing{color:#e9bf81;font-weight:600}
.sm-tracks li.playing b::before{content:"▶";font-size:.75em;margin-right:.25em;color:#e9bf81}
/* highlight moved with the player's ⏮/⏭ buttons */
.screen-menu [data-mi].focus{border-color:#e9bf81;box-shadow:0 0 .5em #e9bf8166;outline:none}
.screen-menu input[data-mi].focus{outline:1px solid #e9bf81;outline-offset:2px;box-shadow:none}
/* scroll bar in the player's brushed aluminium: arrow buttons, dark groove, ribbed thumb */
.sm-bar{flex:0 0 1.15em;display:none;flex-direction:column;gap:.25em;margin-left:.35em}
.sm-bar.active{display:flex}
.sm-bar-btn{flex:none;height:1.15em;padding:0;border:0;border-radius:.35em;cursor:pointer;position:relative;
  background:linear-gradient(180deg,#f4f6f8,#b3b9bf 60%,#9aa1a8);box-shadow:inset 0 1px 0 #fff,0 1px 2px #000a}
.sm-bar-btn::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:.28em solid transparent}
.sm-bar-btn.up::before{border-bottom-color:#3a3f44;margin-top:-.14em}
.sm-bar-btn.down::before{border-top-color:#3a3f44;margin-top:.14em}
.sm-bar-btn:active{background:linear-gradient(180deg,#b3b9bf,#e3e6e9)}
.sm-track{flex:1;position:relative;border-radius:.6em;cursor:pointer;
  background:linear-gradient(90deg,#07090b,#1c2125 50%,#07090b);box-shadow:inset 0 1px 3px #000,0 0 0 1px #ffffff1a}
.sm-thumb{position:absolute;left:1px;right:1px;top:0;border-radius:.55em;cursor:grab;touch-action:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,#00000030 2px 3px) center/55% 34% no-repeat,
    linear-gradient(90deg,#8a9198,#f1f3f5 42%,#c2c7cc 62%,#8a9198);
  box-shadow:inset 0 1px 0 #ffffffb0,0 1px 3px #000c}
.sm-thumb:active{cursor:grabbing}
/* while the menu is open, clicks go through the photo onto the menu */
#deviceStage.menu-open .hand-view > img{pointer-events:none}
#deviceStage.menu-open .screen-hit{display:none}
#deviceStage.menu-open .hand-btn.menu{box-shadow:0 0 0 2px #e9bf81cc,0 0 14px 3px #e9bf8188}
.hand-screen .screen-content small{display:block;letter-spacing:.18em;font-size:8px;opacity:.85}
.hand-screen .screen-content strong{font-family:Georgia,serif;font-size:15px;font-weight:400;display:block;margin-top:3px}

/* The window (a dome cut into the same source photo: bounding box x 634-1009, y 566-703,
   375x137px -> left 33.9%, top 39.8%, width 20%, height 9.6%) only shows a sliver of a much
   bigger disc: fitted a circle to the player body's own curve (center 594.6,409 / radius
   557px in the 1872x1423 source - matches the device's rounded lower half almost exactly,
   confirmed against a reference mockup) and sized the spinning cover art to 93% of that
   radius, centered on that same point rather than on the small window. So the art rotates
   around the player's own center, like a real CD glimpsed through a narrow slot, instead of
   spinning inside its own peep-hole. */
.hand-cd{
  position:absolute;z-index:1;left:33.9%;top:39.8%;width:20%;height:9.6%;
  overflow:hidden;
  clip-path:ellipse(148.51% 406.51% at -10.51% -114.6%);
  background:#0c1013;
}
.hand-cd img{
  position:absolute;left:-10.51%;top:-114.6%;width:276.23%;height:756.1%;
  transform:translate(-50%,-50%) rotate(0deg);
  max-width:none;max-height:none;border-radius:50%;object-fit:cover;
}
/* Tinted, slightly mirrored cover glass over the window, in the player's brushed-aluminium
   tone. While playing it fades in (slowly) so the spinning disc only faintly shows through;
   on pause/stop it fades out again (faster) while the disc coasts to a halt - so the disc
   stays visible spinning down for a moment. The spin itself is driven from app.js; all
   timings are the --cd-* variables below (tweakable live with ?tune in the URL). */
:root{--cd-cover-ms:1400ms;--cd-reveal-ms:1200ms;--cd-glass:.92}
.hand-cd::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 22%,#ffffff55 34%,transparent 46%),
    repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#d9dde1 0%,#aab1b8 55%,#8e959c 100%);
  box-shadow:inset 0 3px 6px #0006,inset 0 -1px 2px #fff8;
  opacity:0;transition:opacity var(--cd-reveal-ms) ease-out;
}
.hand-cd.covered::after{opacity:var(--cd-glass);transition:opacity var(--cd-cover-ms) ease-in}

/* ?tune: live sliders for the CD cover/spin timings */
.cd-tune{position:fixed;left:12px;bottom:12px;z-index:60;width:270px;padding:12px 14px;border-radius:12px;background:#0b1420ee;border:1px solid #ffffff26;color:#e7e6df;font:12px/1.4 Inter,Arial,sans-serif;box-shadow:0 10px 30px #0008}
.cd-tune b{display:block;margin-bottom:8px;letter-spacing:.08em;color:var(--accent)}
.cd-tune label{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin:6px 0}
.cd-tune input{grid-column:1/-1;width:100%}
.cd-tune output{color:var(--accent);font-variant-numeric:tabular-nums}
.cd-tune .row{display:flex;gap:8px;margin-top:10px}
.cd-tune button{flex:1;border:1px solid #ffffff40;background:#ffffff12;color:#fff;border-radius:8px;padding:6px;cursor:pointer;font:inherit}
.cd-tune button:hover{border-color:var(--accent)}

/* Hit areas over the buttons printed on the photo. Centers and diameters measured in the
   1872x1423 source: eject 75,535 (the small knob on the left rim), play/pause 750,807,
   stop 848,780, prev 937,735, next 1008,676, menu 1065,602 (each ~84px across) - as % of
   the image, so they stay on their buttons at any scale. Invisible until hovered/focused. */
.hand-btn{position:absolute;z-index:3;width:4.6%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;transition:box-shadow .15s,background .15s,opacity .4s}
.hand-btn:hover,.hand-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #e9bf8199,0 0 14px 3px #e9bf8166}
.hand-btn:active{background:#0000002e;box-shadow:inset 0 2px 6px #0007}
.hand-btn.eject{left:4.0%;top:37.6%;width:3.4%}
.hand-btn.playpause{left:40.06%;top:56.71%}
.hand-btn.stop{left:45.30%;top:54.81%}
.hand-btn.prev{left:50.05%;top:51.65%}
.hand-btn.next{left:53.85%;top:47.51%}
.hand-btn.menu{left:56.89%;top:42.30%}
/* playing: the play/pause button glows steadily, paused: it pulses */
.device-stage[data-state=playing] .hand-btn.playpause{box-shadow:0 0 0 2px #7bffb0aa,0 0 12px 2px #7bffb066}
.device-stage[data-state=paused] .hand-btn.playpause{animation:hand-btn-pulse 1.4s ease-in-out infinite}
@keyframes hand-btn-pulse{50%{box-shadow:0 0 0 2px #e9bf81cc,0 0 14px 3px #e9bf8188}}


/* ---------- CD slider overlay ----------
   The slider fills the overlay with the selected CD in the middle. Clicking that CD slides
   in the ALBUM panel (details + track list) from the right; the slider then narrows to the
   left part and the selected CD re-centers there. Stacked on small screens. */
.cd-overlay{
  position:fixed;inset:0;z-index:50;background:#070d15f0;
  display:flex;align-items:stretch;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.cd-overlay.open{opacity:1;pointer-events:auto}
/* a selection starts playing: the whole overlay swipes out to the right */
.cd-overlay.swipe-out{transform:translateX(100%);opacity:0;pointer-events:none;transition:transform .5s ease-in,opacity .5s ease-in}
.cd-close{position:absolute;top:22px;right:26px;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font-size:16px;cursor:pointer;z-index:3}
.cd-close:hover{background:#ffffff24}
.cd-stage{position:relative;flex:0 0 100%;min-width:0;display:flex;align-items:center}
.cd-overlay.info-open .cd-stage{flex-basis:58%}
.cd-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font-size:16px;cursor:pointer;z-index:2;transition:background .2s,border-color .2s}
.cd-nav:hover{background:#e9bf8133;border-color:var(--accent)}
.cd-nav.prev{left:18px}
.cd-nav.next{right:18px}
.cd-track-wrap{width:100%;overflow:hidden;padding:0 60px}
.cd-track{position:relative;display:flex;align-items:center;will-change:transform}
.cd-item{flex:none;width:min(30vmin,300px);display:flex;align-items:center;justify-content:center;padding:0 18px;transition:transform .4s ease,opacity .4s ease;opacity:.4;transform:scale(.72)}
.cd-item.active{opacity:1;transform:scale(1)}
.cd-disc{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 20px 60px #000a,0 0 0 5px #ffffff12;background:#111;cursor:pointer}
.cd-disc img{width:100%;height:100%;object-fit:cover;display:block}
.cd-disc:before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle at 50% 50%,#ffffff10 0 1px,transparent 1px 7px),radial-gradient(circle at 32% 28%,#ffffff35,transparent 45%)}
.cd-disc:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:11%;height:11%;border-radius:50%;background:#0c1420;box-shadow:0 0 0 3px #ffffff25 inset;z-index:2}

.cd-info{position:absolute;top:0;right:0;bottom:0;width:42%;overflow-y:auto;padding:90px 48px 40px;border-left:1px solid #ffffff14;background:linear-gradient(90deg,#0b1420f2,#0b1420d9);color:#f0ead9;display:flex;flex-direction:column;transform:translateX(100%);opacity:0;visibility:hidden;transition:transform .45s ease,opacity .45s ease,visibility 0s linear .45s}
.cd-overlay.info-open .cd-info{transform:none;opacity:1;visibility:visible;transition:transform .45s ease,opacity .45s ease}
/* panel content as one centered column */
.cd-info > *{width:100%;max-width:600px;margin-left:auto;margin-right:auto}
/* heading and text start where the track numbers start (the .num cell's 30px ▶ gutter) */
.cd-info-kicker,.cd-info-title,.cd-info-desc{padding-left:30px;padding-right:10px}
/* title + teaser on the left, the DVD front cover on the right */
.cd-info-head{display:flex;align-items:flex-start;gap:22px;margin-bottom:22px}
.cd-info-text{flex:1;min-width:0}
.cd-info-text .cd-info-desc{margin-bottom:0}
.cd-info-coverbtn{flex:none;position:relative;padding:0;border:0;background:none;margin-top:6px;margin-right:10px;cursor:default;font:inherit;color:inherit}
.cd-info-coverbtn[hidden]{display:none}
.cd-info-cover{display:block;width:clamp(110px,10vw,160px);aspect-ratio:458/454;object-fit:cover;border-radius:4px;box-shadow:0 12px 28px #000b,0 0 0 1px #ffffff1f;transition:transform .25s ease,box-shadow .25s ease}
/* cover with a booklet: clickable, lifts on hover, small label underneath */
.cd-info-booklet{display:none;margin-top:7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-align:center}
.cd-info-coverbtn.has-booklet{cursor:pointer}
.cd-info-coverbtn.has-booklet .cd-info-booklet{display:block}
html[data-lang="en"] .cd-info-coverbtn.has-booklet .cd-info-booklet[data-lang-text="de"],html:not([data-lang="en"]) .cd-info-coverbtn.has-booklet .cd-info-booklet[data-lang-text="en"]{display:none}
.cd-info-coverbtn.has-booklet:hover .cd-info-cover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 18px 34px #000c,0 0 0 1px #e9bf8199}
/* "Text" badge on tracks with a song text */
.lyr-badge,.sm-lyr{margin-left:.6em;padding:.1em .5em;border:1px solid #e9bf8188;border-radius:.4em;background:#e9bf8114;color:#e9bf81;font:inherit;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;vertical-align:middle}
.lyr-badge:hover,.sm-lyr:hover{background:#e9bf81;color:#1b1206}
.sm-lyr{flex:none;margin:0 .2em}
.sm-lyrics small{display:block;color:#9fb0ba;font-size:.8em;margin-bottom:.4em}
.sm-lyrics p{margin:.55em 0;line-height:1.45}

/* ---------- CD booklet viewer ---------- */
.booklet{position:fixed;inset:0;z-index:65;background:#05090ef2;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.booklet.open{opacity:1;pointer-events:auto}
.bk-stage{perspective:1600px}
.bk-page{width:min(84vh,86vw,640px);aspect-ratio:1;overflow-y:auto;overscroll-behavior:contain;border-radius:6px;background:linear-gradient(160deg,#16222e,#0d151d);color:#e7e6df;
  box-shadow:0 30px 80px #000,0 0 0 1px #ffffff1a;transform-origin:left center;scrollbar-width:thin;scrollbar-color:#aab1b8 #0b1016;outline:none}
.bk-page.bk-image{overflow:hidden;background:#000}
.bk-page.turn-next{animation:bk-turn-next .5s ease-out}
.bk-page.turn-prev{animation:bk-turn-prev .5s ease-out}
@keyframes bk-turn-next{from{transform:rotateY(-70deg);opacity:.2}to{transform:none;opacity:1}}
@keyframes bk-turn-prev{from{transform:rotateY(35deg);transform-origin:right center;opacity:.2}to{transform:none;opacity:1}}
.bk-full{display:block;width:100%;height:100%;object-fit:contain}
.bk-text{padding:7% 8%;font-size:clamp(13px,1.9vh,16px);line-height:1.65}
.bk-text h3{font-family:Georgia,serif;font-weight:400;font-size:1.7em;margin:0 0 .6em;color:#f3e3c3}
.bk-text p{margin:0 0 1em}
.bk-float{float:left;width:46%;margin:0 5% 3% 0;border-radius:4px;box-shadow:0 10px 24px #000a}
.bk-center{text-align:center}
.bk-sub{color:#c7d0d4;font-style:italic}
.bk-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:4%;margin-top:6%}
.bk-stories figure{margin:0}
.bk-stories figcaption{font-family:Georgia,serif;color:#e9bf81;margin-bottom:.5em}
.bk-stories img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;box-shadow:0 8px 18px #000a}
.bk-stories p{font-size:.88em;color:#c7d0d4;margin-top:.7em}
.bk-lyrics small{letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-size:.7em}
.bk-lyrics h3{margin-top:.2em}
.bk-credits{color:#9fb0ba;font-size:.88em}
.bk-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font-size:16px;cursor:pointer}
.bk-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font-size:16px;cursor:pointer}
.bk-nav.prev{left:18px}
.bk-nav.next{right:18px}
.bk-nav:disabled{opacity:.25;cursor:default}
.bk-close:hover,.bk-nav:not(:disabled):hover{border-color:var(--accent);background:#e9bf8126}
.bk-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.bk-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:#ffffff40;cursor:pointer}
.bk-dots button.on{background:var(--accent)}
@media(max-width:640px){.bk-nav{top:auto;bottom:8px;transform:none;width:38px;height:38px}.bk-dots{bottom:22px}.bk-stories{grid-template-columns:1fr 1fr 1fr;gap:3%}}
.cd-info-kicker{display:block;font-size:10px;letter-spacing:.28em;color:var(--accent)}
.cd-info-title{font-family:Georgia,serif;font-weight:400;font-size:clamp(26px,2.4vw,38px);line-height:1.15;margin:8px 0 14px}
.cd-info-desc{margin:0 0 22px;font-size:13.5px;line-height:1.6;color:#c7d0d4;max-width:560px}
.cd-tracks{width:100%;max-width:560px;border-collapse:separate;border-spacing:0 2px;font-size:13.5px}
.cd-tracks th{text-align:left;font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8d9ca6;padding:0 10px 8px;border-bottom:1px solid #ffffff1a}
.cd-tracks td{padding:8px 10px;color:#dfe3e2;border-top:1px solid transparent;border-bottom:1px solid transparent;transition:color .15s,background .15s,border-color .15s}
.cd-tracks td:first-child{border-left:1px solid transparent;border-radius:8px 0 0 8px}
.cd-tracks td:last-child{border-right:1px solid transparent;border-radius:0 8px 8px 0}
/* room left of the number for the ▶ shown on hover */
.cd-tracks .num{position:relative;width:58px;padding-left:30px;color:#8d9ca6;font-variant-numeric:tabular-nums}
.cd-tracks .dur{width:60px;text-align:right;color:#8d9ca6;font-variant-numeric:tabular-nums}
.cd-tracks tbody tr{cursor:pointer;outline:none}
/* hovered/focused row: yellow text, a touch bolder, framed - click plays that track */
.cd-tracks tbody tr:hover td,.cd-tracks tbody tr:focus-visible td{color:var(--accent);background:#e9bf8112;border-color:#e9bf8166}
.cd-tracks tbody tr:hover td:nth-child(2),.cd-tracks tbody tr:focus-visible td:nth-child(2){font-weight:600}
.cd-tracks tbody tr:hover td.num::before,.cd-tracks tbody tr:focus-visible td.num::before{content:"▶";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:11px}

@media(max-width:900px),(max-width:1180px) and (orientation:portrait){
  .cd-overlay{flex-direction:column;overflow-y:auto}
  .cd-stage{flex:none;height:min(46vh,340px)}
  .cd-overlay.info-open .cd-stage{flex-basis:auto}
  .cd-info{position:static;width:auto;flex:none;overflow:visible;border-left:0;border-top:1px solid #ffffff14;padding:24px 22px 40px;display:none}
  .cd-overlay.info-open .cd-info{display:flex}
}
@media(max-width:640px){.cd-info-cover{width:92px}.cd-info-head{gap:14px}.cd-track-wrap{padding:0 44px}.cd-nav{width:38px;height:38px;font-size:13px}.cd-item{width:min(48vmin,220px)}.cd-info-title{font-size:24px}.cd-tracks{font-size:12.5px}}
/* Preview harness (index.html): the Tablet/Smartphone switch only narrows the page frame,
   but the overlay is fixed to the whole window and the media queries above follow the
   window width - so it would show the desktop layout. Pin it to the frame's width and
   repeat the stacked (tablet) and small-screen (smartphone) rules for those modes. */
.viewport.tablet .cd-overlay{left:max(0px,calc(50% - 410px));right:max(0px,calc(50% - 410px))}
.viewport.mobile .cd-overlay{left:max(0px,calc(50% - 195px));right:max(0px,calc(50% - 195px))}
:is(.viewport.tablet,.viewport.mobile) .cd-overlay{flex-direction:column;overflow-y:auto}
:is(.viewport.tablet,.viewport.mobile) .cd-stage{flex:none;height:min(46vh,340px)}
:is(.viewport.tablet,.viewport.mobile) .cd-overlay.info-open .cd-stage{flex-basis:auto}
:is(.viewport.tablet,.viewport.mobile) .cd-info{position:static;width:auto;flex:none;overflow:visible;border-left:0;border-top:1px solid #ffffff14;padding:24px 22px 40px;display:none}
:is(.viewport.tablet,.viewport.mobile) .cd-overlay.info-open .cd-info{display:flex}
.viewport.mobile .cd-info-cover{width:92px}
.viewport.mobile .cd-info-head{gap:14px}
.viewport.mobile .cd-track-wrap{padding:0 44px}
.viewport.mobile .cd-nav{width:38px;height:38px;font-size:13px}
.viewport.mobile .cd-item{width:min(48vmin,220px)}
.viewport.mobile .cd-info-title{font-size:24px}
.viewport.mobile .cd-tracks{font-size:12.5px}
.viewport.mobile .cd-info{padding:20px 16px 36px}

/* ---------- album grids ---------- */
.album-area{background:#101b26;padding:48px 5% 58px}
.section-top{display:flex;align-items:end;justify-content:space-between;gap:20px}
.section-top h2{font-family:Georgia,serif;font-size:32px;font-weight:400;margin:0 0 8px}
.section-top p{margin:0;color:#b8c2c9;font-size:13px}

/* ---------- homepage intro (original Startseite welcome/loop-making text) ---------- */
.intro-area{border-bottom:1px solid #ffffff12}
.intro-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:20px 48px;margin-top:26px}
.intro-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;align-self:start}
.intro-points li{position:relative;padding-left:22px;color:#dfe4e6;font-size:14px;line-height:1.5}
.intro-points li:before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.intro-text p{line-height:1.8;color:#c7d0d4;font-size:14px;margin:0 0 16px}
.intro-text p:last-child{margin-bottom:0}
@media(max-width:640px){.intro-grid{grid-template-columns:1fr;gap:22px}}
.albums{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:25px}
.albums.full{grid-template-columns:repeat(5,1fr)}
.album{border:1px solid #ffffff30;background:#192836;color:#fff;text-align:left;padding:14px;border-radius:12px;cursor:pointer;min-width:0}
.album.selected{border-color:var(--accent);background:#263541}
.art{aspect-ratio:1.55;border-radius:7px;overflow:hidden;position:relative;display:flex;align-items:end;padding:14px;font-family:Georgia,serif;font-size:19px;line-height:1.05;background:linear-gradient(135deg,#473742,#d2a270 55%,#4b5764)}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art span{position:relative;z-index:1}
.album[data-scene=mountain] .art{background:linear-gradient(135deg,#1c3448,#a4bac7 55%,#293c45)}
.album[data-scene=ocean] .art{background:linear-gradient(135deg,#114357,#4b8a8d 55%,#f0b77e)}
.album[data-scene=space] .art{background:linear-gradient(135deg,#0a0e24,#3c3f77 55%,#151933)}
.album-meta{display:block;margin-top:12px;font-size:12px;color:#c1cbd0}
.album-teaser{display:block;margin-top:6px;font-size:11px;color:#8a97a0;line-height:1.5}
.more{white-space:nowrap;color:var(--accent);font-size:13px;text-decoration:none}

/* ---------- simple content pages (about/kontakt/legal) ---------- */
.page{background:#101b26;min-height:60vh}
.page-hero{padding:70px 5% 40px;background:linear-gradient(165deg,#152b41,#334957 60%,#0b1723)}
.page-hero h1{font-family:Georgia,serif;font-size:clamp(30px,4vw,46px);font-weight:400;margin:10px 0 0}
.page-body{padding:20px 5% 70px;max-width:820px;margin:auto}
.page-body p{line-height:1.8;color:#dfe4e6;font-size:15px}
.page-body h2{font-family:Georgia,serif;font-weight:400;font-size:22px;margin-top:34px}
.portrait-row{display:flex;gap:16px;margin:20px 0 30px;flex-wrap:wrap}
.portrait-row img{border-radius:12px;width:220px;height:220px;object-fit:cover;flex:1 1 220px}

/* ---------- bands page ---------- */
.band-page{max-width:1080px}
.band-index{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 10px}
.band-index a{text-decoration:none;font-size:12.5px;padding:7px 13px;border-radius:999px;border:1px solid #ffffff2e;background:#ffffff0a;color:#dfe4e6}
.band-index a:hover{border-color:var(--accent);color:var(--accent)}
.band{padding:34px 0 10px;border-top:1px solid #ffffff14;margin-top:26px;scroll-margin-top:20px}
.band h2{margin:0}
.band-style{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;font-size:11px;margin-top:6px}
.band-caption{margin:16px 0 8px;color:#c7d0d4}
.band-link{margin:4px 0}
.band-link a{color:var(--accent);word-break:break-all;font-size:13.5px}
.band-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:10px 0 6px}
.band-gallery a{display:block;border-radius:8px;overflow:hidden;background:#0b1420;aspect-ratio:4/3;box-shadow:0 6px 18px #0006}
.band-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.band-gallery a:hover img{transform:scale(1.05)}

/* photo lightbox (bands page) */
.lightbox{position:fixed;inset:0;z-index:70;background:#05090ef2;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:calc(100vw - 140px);max-height:calc(100vh - 80px);border-radius:6px;box-shadow:0 20px 60px #000}
.lb-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font-size:16px;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font-size:16px;cursor:pointer}
.lb-nav.prev{left:18px}
.lb-nav.next{right:18px}
.lb-close:hover,.lb-nav:hover{border-color:var(--accent);background:#e9bf8126}
@media(max-width:640px){.band-gallery{grid-template-columns:repeat(2,1fr);gap:6px}.lightbox img{max-width:100vw}.lb-nav{width:38px;height:38px;bottom:16px;top:auto;transform:none}}
.legal-note{color:#8a97a0;font-size:12px;margin-top:40px}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.contact-card{background:#192836;border:1px solid #ffffff20;border-radius:14px;padding:22px}
.contact-card address{font-style:normal;line-height:1.8}
.field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;letter-spacing:.05em;color:#b8c2c9}
.field input,.field textarea{background:#0e1b27;border:1px solid #ffffff30;border-radius:8px;color:var(--ink);padding:10px 12px;font:inherit}
.field.check{flex-direction:row;align-items:flex-start;gap:10px}
.field.check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.field.check label{font-size:12.5px;line-height:1.55;letter-spacing:normal;color:#b8c2c9}
.field.check a{color:var(--accent)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form{position:relative}
.form-note{font-size:12.5px;line-height:1.6;color:#9fb0ba;margin:4px 0 16px}
.form-note a{color:var(--accent)}
.submit:disabled{opacity:.6;cursor:wait}
.submit:focus-visible{outline:2px solid #fff;outline-offset:2px}
.form-status{margin:14px 0 0;font-size:14px;min-height:1.4em}
.form-status.ok{color:#9be3b5}
.form-status.error{color:#ffb4a8}
.submit{align-self:flex-start;background:var(--accent);border:0;border-radius:999px;color:#17212b;font-weight:700;padding:12px 22px;font-size:13px;cursor:pointer}

/* ---------- responsive: tablet / mobile (dev harness classes on index) ---------- */
.tablet .nav{height:66px}
.tablet .links{gap:15px}
.tablet .hero{min-height:0;padding:44px 5% 65px}
.tablet .hero-grid{grid-template-columns:1fr;min-height:0}
.tablet .headline{font-size:48px}
.tablet .copy{max-width:600px}
.tablet .albums{grid-template-columns:repeat(2,1fr)}
.tablet .albums.full{grid-template-columns:repeat(3,1fr)}
/* stacked single-column layout: the "in hand" photo loses its desktop bleed-off-the-edge
   treatment and goes close to full width instead, since a small photo would make the
   embedded video too small to watch. */
.tablet .device-stage{margin-top:34px}
/* the "in hand" photo is absolutely positioned to cover the whole hero (see the
   .device-stage.showing-hand rule above); on the stacked single column that means it
   would otherwise sit directly on top of the hero-copy text instead of beside it, so
   hide the text and reserve enough height for the photo. */
.tablet .hero-grid.showing-hand .hero-copy{display:none}

.mobile .nav{height:59px}
.mobile .brand{font-size:13px}
.mobile .brand-logo img{height:17px}
.tablet .brand-logo img{height:24px}
.mobile .links{font-size:11.5px;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px}
.mobile .nav-right{gap:10px}
.mobile .hero{padding:36px 18px 62px;min-height:0}
.mobile .hero-grid{grid-template-columns:1fr;gap:2px;min-height:0}
.mobile .headline{font-size:37px;margin:13px 0}
.mobile .copy{font-size:13px;line-height:1.5}
.mobile .cta{margin-top:7px}
/* same reasoning as .tablet above: the photo goes close to full width so its embedded
   video screen stays big enough to actually watch. */
.mobile .device-stage{margin-top:50px}
/* same reasoning as .tablet above */
.mobile .hero-grid.showing-hand .hero-copy{display:none}
.mobile .album-area{padding:28px 18px 34px}
.mobile .section-top h2{font-size:25px}
.mobile .section-top p{font-size:11px}
.mobile .albums{grid-template-columns:repeat(2,1fr);gap:9px;margin-top:18px}
.mobile .albums.full{grid-template-columns:repeat(2,1fr)}
.mobile .album{padding:7px}
.mobile .art{font-size:14px;padding:8px}
.mobile .album-meta{font-size:10px;margin-top:7px}
.mobile .album-teaser{display:none}
.mobile .more{font-size:11px}
.mobile .footline{padding:14px 18px}

@media(max-width:520px){
  html.dev .prototype{padding:10px}
  .toolbar{justify-content:center}
  .toolbar strong{width:100%;text-align:center}
  .switch button{padding:8px 10px;font-size:12px}
}

/* real responsive fallback for content pages viewed at native width - the .tablet/.mobile
   classes above only simulate these widths inside the on-page preview harness, they never
   apply to an actual visitor's browser, so the same layout fixes need to be repeated here
   for real narrow windows/devices (a real tablet is exactly this width and never gets a
   .tablet class). */
@media(max-width:900px),(max-width:1180px) and (orientation:portrait){
  .links{gap:15px}
  .contact-grid{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .device-stage{margin-top:34px}
  .hero-grid.showing-hand .hero-copy{display:none}
}
@media(max-width:640px){
  .brand-logo img{height:18px}
  .hero-grid{grid-template-columns:1fr}
  .albums{grid-template-columns:repeat(2,1fr)}
  .albums.full{grid-template-columns:repeat(2,1fr)}
  .links{font-size:11.5px;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px}
  .nav-right{gap:10px}
  .device-stage{margin-top:50px}
}

/* ---------- hero starts flush with the top of the browser (index only) ----------
   The preview toolbar and the site nav float over the hero photo as translucent bars
   instead of pushing it down, so the 100vh hero ends exactly at the bottom of the
   window and the "in hand" photo's forearm meets that edge. --bars-h (toolbar + nav
   height) is measured in app.js; the hero content is padded down by it. */
.prototype{position:relative}
.prototype .toolbar{position:absolute;top:0;left:0;right:0;z-index:20;background:#0a1119a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.prototype .switch{background:#1a2632b3}
.prototype .site{position:relative}
.prototype .nav{position:absolute;top:var(--toolbar-h,66px);left:0;right:0;background:#0c172299;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.prototype .site .hero{padding-top:calc(var(--bars-h,142px) + 24px)}
.prototype .device-stage.showing-hand{align-items:flex-end}
/* the photo stage stays below the bars, so the photo (and its toggle) is never hidden under them */
.prototype .device-stage.showing-hand{top:var(--bars-h,142px)}

/* ---------- hand + player in every stacked layout ----------
   (Tablet/Smartphone preview, real windows up to 900 px, portrait tablets up to 1180 px)
   One rule instead of fixed per-mode sizes, so photo and hero always fit together:
   - photo height --hand-h = 607 px as long as possible: when the width runs short, the photo
     runs off the right edge (hand/forearm cropped, the device's left rim stays 1.3cqw from the
     left edge) until only 64 % of it is visible, a little past the display - only then does it
     scale: 117cqw = 98.7cqw / (.64 * 1.3155, the photo's aspect ratio). The hero drops its
     side padding here, the only content left in it is the absolutely positioned photo;
   - flush right and bottom, so the forearm always runs out of the picture;
   - pushed down by 16.7 % of its height (its lower sixth disappears below the hero's edge), via
     `translate` so it composes with the zoom-into-the-display transform;
   - the hero gets exactly the height for that plus a gap --hand-gap below the bars, as tall
     as the nav bar itself (--nav-h, measured in app.js).
   cqw refers to the hero, which is made a size container for this. */
:is(.tablet,.mobile) .hero{container-type:inline-size;padding-left:0;padding-right:0;padding-bottom:0;--hand-h:min(607px,117cqw);--hand-gap:var(--nav-h,76px)}
:is(.tablet,.mobile) .hero-grid.showing-hand{min-height:calc(var(--hand-h) * .833 + var(--hand-gap) - 24px)}
:is(.tablet,.mobile) .device-stage.showing-hand{justify-content:flex-end;align-items:flex-end}
:is(.tablet,.mobile) .hand-view{translate:0 16.7%;margin-right:min(0px,calc(98.7cqw - var(--hand-h) * 1.3155))}
:is(.tablet,.mobile) .hand-view > img{height:var(--hand-h);width:auto;max-width:none;max-height:none}
@media(max-width:900px),(max-width:1180px) and (orientation:portrait){
  .hero{container-type:inline-size;padding-left:0;padding-right:0;padding-bottom:0;--hand-h:min(607px,117cqw);--hand-gap:var(--nav-h,76px)}
  .hero-grid.showing-hand{min-height:calc(var(--hand-h) * .833 + var(--hand-gap) - 24px)}
  .device-stage.showing-hand{justify-content:flex-end;align-items:flex-end}
  .hand-view{translate:0 16.7%;margin-right:min(0px,calc(98.7cqw - var(--hand-h) * 1.3155))}
  .hand-view > img{height:var(--hand-h);width:auto;max-width:none;max-height:none}
}

/* ---------- stacked layouts: burger menu + hero copy below the player ----------
   Same breakpoints as the stacked hero (and the Tablet/Smartphone preview). The nav keeps
   logo + subtitle on the left and DE/EN + a burger button on the right; the links fold into
   a drop-down under the bar. */
.nav-burger{display:none;flex:none;width:40px;height:40px;border-radius:10px;border:1px solid #ffffff2e;background:#ffffff0d;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#e7e6df;transition:transform .25s ease,opacity .2s ease}
.nav-burger:hover{border-color:var(--accent)}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-burger span:nth-child(2){opacity:0}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero-below{padding:34px 5% 40px;background:linear-gradient(180deg,#0b1520,#0e1b27)}
.hero-below[hidden]{display:none}
.hero-below .hero-copy{max-width:640px}
.hero-below .headline{margin:14px 0}
.hero-below .copy{max-width:none}
:is(.tablet,.mobile) .nav-burger{display:flex}
:is(.tablet,.mobile) .nav .links{display:none}
:is(.tablet,.mobile) .nav.open .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px 5% 14px;
  background:#0c1722f5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid #ffffff14;box-shadow:0 14px 30px #0008;font-size:15px}
:is(.tablet,.mobile) .nav.open .links a{padding:12px 0;border-bottom:1px solid #ffffff12}
:is(.tablet,.mobile) .nav-right{gap:12px}
.mobile .hero-below{padding:26px 18px 32px}
@media(max-width:900px),(max-width:1180px) and (orientation:portrait){
  .nav-burger{display:flex}
  .nav .links{display:none}
  .nav.open .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px 5% 14px;
    background:#0c1722f5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid #ffffff14;box-shadow:0 14px 30px #0008;font-size:15px;flex-wrap:nowrap}
  .nav.open .links a{padding:12px 0;border-bottom:1px solid #ffffff12}
  .nav-right{gap:12px}
}
@media(max-width:640px){.hero-below{padding:26px 18px 32px}.hero-below .headline{font-size:34px}.brand small{letter-spacing:.14em;white-space:nowrap}}
.mobile .brand small{letter-spacing:.14em;white-space:nowrap}

/* ---------- YouTube consent dialog (asked once before the first video loads) ---------- */
.consent{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;background:#04080cc7;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.consent[hidden]{display:none}
.consent-box{max-width:520px;padding:26px 28px;border-radius:14px;background:linear-gradient(160deg,#16222e,#0d151d);border:1px solid #e9bf8155;box-shadow:0 30px 80px #000c;color:#e7e6df}
.consent-box h2{font-family:Georgia,serif;font-weight:400;font-size:24px;margin:0 0 12px;color:#f3e3c3}
.consent-box p{font-size:14px;line-height:1.65;color:#cfd6da;margin:0 0 20px}
.consent-box a{color:var(--accent)}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent-actions button{font:inherit;font-size:14px;padding:11px 18px;border-radius:999px;cursor:pointer}
.consent-yes{border:0;background:var(--accent);color:#17212b;font-weight:700}
.consent-no{border:1px solid #ffffff40;background:transparent;color:#e7e6df}
.consent-actions button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.footline .copyright{color:#9dafbc}

/* ---------- privacy settings dialog (footer, every page) ---------- */
.foot-btn{border:0;background:none;padding:0;font:inherit;color:#9dafbc;cursor:pointer;text-decoration:none}
.foot-btn:hover{color:var(--accent)}
.foot-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.privacy-settings .consent-box{max-width:560px;max-height:calc(100vh - 36px);overflow-y:auto}
.ps-item{padding:14px 0;border-top:1px solid #ffffff14}
.ps-item h3{margin:0 0 6px;font-size:15px;color:#f3e3c3;font-weight:600}
.ps-item p{margin:0 0 10px;font-size:13.5px}
.ps-item button{font:inherit;font-size:13.5px;padding:9px 16px;border-radius:999px;cursor:pointer}
.ps-small{font-size:12px !important;color:#9fb0ba !important;margin-top:8px !important}
.ps-status{min-height:1.4em;margin:6px 0 12px !important;color:#9be3b5 !important}
.privacy-settings .consent-actions{align-items:center;justify-content:space-between}
.privacy-settings .consent-actions a{color:var(--accent);font-size:13.5px}
.ps-item button:focus-visible,.privacy-settings a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- legal pages (privacy policy, legal notice) ---------- */
.legal h2{font-size:19px;margin:30px 0 8px}
.legal p{margin:0 0 12px}
.legal a{color:var(--accent)}
.legal-lead{font-size:16px !important;color:#f0ead9 !important}
.legal-btn{font:inherit;font-size:14px;padding:10px 18px;border-radius:999px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.legal-btn:hover{background:var(--accent);color:#17212b}
.legal-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.legal-date{margin-top:28px !important;font-size:13px !important;color:#9fb0ba !important}