/* Planet Love EME, Startseite Phase 2 (25.09.2026)
   Farben gemessen am Logo von Kay (Richtung A) und an seiner Aufnahme (Richtung B).
   Schriften lokal, alle SIL OFL, Lizenztexte in fonts/. */
@font-face{font-family:"Unbounded";src:url(../fonts/Unbounded-latin.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/InstrumentSans-latin.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/Fraunces-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/Fraunces-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --black:#000;--core:#FDFBF6;--champ:#E8D2BE;--glow:#FFC68D;--bronze:#C9A283;--lagoon:#1BA1AB;
  --display:"Unbounded","Helvetica Neue",Arial,sans-serif;
  --text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pulse:0;
  --pad:clamp(20px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--champ);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{overflow-x:clip;min-height:100vh}
img,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--glow);outline-offset:4px;border-radius:4px}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--core);color:#000;padding:10px 16px;border-radius:40px;text-decoration:none}
.skip:focus{top:16px}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.intro{max-width:46ch;margin-top:18px;font-size:clamp(17px,1.3vw,20px);color:var(--champ)}
.fine-print{font-size:13px;line-height:1.5;color:#cdb9a6;max-width:60ch}
h2{font-family:var(--display);font-weight:300;font-size:clamp(34px,5.2vw,84px);line-height:.98;letter-spacing:-.025em;color:var(--core);margin-top:14px;max-width:16ch}
h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;color:var(--core)}

/* Lader */
.loader{position:fixed;inset:0;z-index:150;background:#000;display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .9s ease,visibility .9s}
.loader.fertig,.loader.done{opacity:0;visibility:hidden}
.no-js .loader{display:none}
.loader-ring{width:min(46vw,300px);-webkit-mask:conic-gradient(#000 calc(var(--lp,0)*1turn),transparent 0);mask:conic-gradient(#000 calc(var(--lp,0)*1turn),transparent 0);filter:drop-shadow(0 0 24px rgba(255,198,141,.45))}
.loader-num{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--glow)}
.loader-text{font-family:var(--display);font-weight:300;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--champ)}

/* WebGL als feste Ebene hinter dem Inhalt */
.gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;opacity:0;transition:opacity .5s linear;pointer-events:none}
.has-gl .gl{opacity:var(--gl-o,1);transition:none}
main,.foot{position:relative;z-index:1}

/* Cursor */
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;display:none}
.fine-pointer .cursor{display:block}
.fine-pointer, .fine-pointer a, .fine-pointer button{cursor:none}
.fine-pointer input,.fine-pointer textarea,.fine-pointer select{cursor:text}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;border-radius:50%;transform:translate3d(-100px,-100px,0)}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--core)}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,198,141,.7);transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s}
.cursor.hover .cursor-ring{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(255,198,141,.12);border-color:var(--glow)}

/* Kopf */
.top{position:fixed;inset:var(--banner-h,0px) 0 auto 0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--pad);transition:background .4s}
.top.scrolled{background:linear-gradient(#000c,#0000)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:auto;filter:drop-shadow(0 0 calc(4px + var(--pulse)*14px) rgba(255,198,141,.7))}
.brand span{font-family:var(--display);font-size:14.5px;letter-spacing:.02em;color:var(--core);white-space:nowrap}
.nav-list{display:flex;gap:26px;list-style:none;font-size:14.5px}
.nav-list a{text-decoration:none;color:var(--champ);position:relative}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--glow);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav-list a:hover::after,.nav-list a[aria-current]::after{transform:scaleX(1)}
.top-right{display:flex;align-items:center;gap:10px}
.sound-btn,.lang-btn,.menu-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(232,210,190,.4);border-radius:40px;padding:8px 14px;font-size:13.5px;color:var(--core);background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.sound-btn[aria-pressed=true]{border-color:var(--glow);color:var(--glow)}
.sound-bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.sound-bars i:nth-child(1){height:4px}.sound-bars i:nth-child(2){height:8px}.sound-bars i:nth-child(3){height:6px}.sound-bars i:nth-child(4){height:10px}
.sound-bars i{width:2px;height:6px;background:currentColor;border-radius:1px;transition:height .08s}
.menu-btn{display:none}

/* Die Reise */
.journey{position:relative;height:1150vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.layer{position:absolute;inset:0;width:100%;height:100%}
.still picture,.label-still picture{display:block;width:100%;height:100%}
.still img{width:100%;height:100%;object-fit:cover}
.has-gl .still{opacity:0}
.flight{opacity:0}
.backdrop{position:absolute;inset:-6%;opacity:0;background:#000}
.backdrop div{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.5) saturate(1.1);opacity:0;transform:scale(1.1);will-change:opacity}
.window{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0;border-radius:0;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.window-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.window-imgs img[data-stage="0"]{opacity:1}
.landing,.water{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ai-mark,.real-mark{position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.8);opacity:0;transition:opacity .4s;pointer-events:none}
.ai-mark.small{opacity:1;position:absolute}
.real-mark{letter-spacing:.06em;text-transform:none}
.ride-text{position:absolute;inset:0;pointer-events:none}
.beat{position:absolute;left:var(--pad);bottom:clamp(60px,11vh,120px);max-width:min(760px,88vw);opacity:0}
.beat-0{opacity:1;isolation:isolate}
.catalog-head::before{content:"";position:absolute;z-index:-1;left:-8vw;right:-8vw;top:-10vh;bottom:-10vh;background:radial-gradient(closest-side,rgba(0,0,0,.8),rgba(0,0,0,.5) 55%,transparent)}
.beat-0::before{content:"";position:absolute;z-index:-1;left:-18vw;right:-12vw;top:-22vh;bottom:-16vh;background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.45) 55%,transparent);pointer-events:none}
.title{font-family:var(--display);font-weight:300;font-size:clamp(46px,8.2vw,138px);line-height:.92;letter-spacing:-.03em;color:var(--core);margin-top:12px;text-shadow:0 0 60px rgba(0,0,0,.5)}
.subline{margin-top:22px;max-width:36ch;font-size:clamp(17px,1.4vw,21px);color:var(--champ)}
.scroll-hint{margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--glow);display:flex;align-items:center;gap:12px}
.scroll-hint::before{content:"";width:1px;height:34px;background:linear-gradient(var(--glow),transparent);animation:tropfen 2.2s ease-in-out infinite}
@keyframes tropfen{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.chapter{font-family:var(--display);font-weight:300;font-size:clamp(40px,6.6vw,110px);line-height:.95;letter-spacing:-.03em;color:var(--core);text-shadow:0 2px 40px rgba(0,0,0,.55)}
.chapter-line{margin-top:14px;font-size:clamp(17px,1.4vw,21px);color:var(--core);max-width:34ch;text-shadow:0 1px 18px rgba(0,0,0,.8)}

/* Sonnenstand */
.sunset{position:absolute;inset:0;pointer-events:none;opacity:0}
.clock{position:absolute;left:var(--pad);top:15vh;font-family:var(--serif);font-weight:400;font-size:clamp(84px,14.5vw,250px);line-height:.86;letter-spacing:-.04em;color:var(--core);font-variant-numeric:tabular-nums;text-shadow:0 0 calc(var(--pulse)*50px) rgba(255,198,141,.8)}
.clock-colon{opacity:.6}
.day-beats{position:absolute;left:var(--pad);top:calc(15vh + clamp(84px,14.5vw,250px) * .95);width:min(460px,44vw)}
.day-beat{position:absolute;left:0;top:0;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s}
.day-beat.on{opacity:1;transform:none;pointer-events:auto}
.day-beat p{font-size:clamp(18px,1.55vw,23px);line-height:1.45;color:var(--core)}
.day-beat .day-time{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--glow);margin-bottom:8px}
.sound-offer{margin-top:22px;display:inline-flex;align-items:center;gap:14px;padding:14px 22px 14px 16px;border-radius:40px;background:var(--core);color:#000;font-size:16px;pointer-events:auto}
.sound-offer-ring{width:22px;height:22px;border-radius:50%;border:2px solid #000;box-shadow:0 0 0 calc(var(--pulse)*10px) rgba(0,0,0,.18);animation:atmen 1.95s ease-in-out infinite}
@keyframes atmen{50%{transform:scale(.8)}}
.day-bar{position:absolute;left:var(--pad);bottom:clamp(40px,7vh,70px);display:flex;gap:clamp(12px,2vw,34px);list-style:none;font-family:var(--mono);font-size:12px;color:rgba(232,210,190,.55)}
.day-bar li.on{color:var(--glow)}
/* Fortschrittslinie über den Stationen (MM 05.10.2026) */
.day-bar::before,.day-bar::after{content:"";position:absolute;left:0;top:-12px;height:1px;width:100%;background:rgba(232,210,190,.18)}
.day-bar::after{width:calc(var(--dp,0) * 100%);background:linear-gradient(90deg,var(--bronze),var(--glow));box-shadow:0 0 10px rgba(255,198,141,.7)}
html[dir=rtl] .day-bar::before,html[dir=rtl] .day-bar::after{left:auto;right:0}
.day-bar li{transition:color .4s,transform .4s}
.day-bar li.cur{color:#fff;transform:translateY(-2px);text-shadow:0 0 12px rgba(255,198,141,.8)}
/* Nach dem Selbstflug: Hinweis, dass es per Scrollen weitergeht (05.10.2026) */
.sun-hint{position:absolute;left:var(--pad);bottom:calc(clamp(40px,7vh,70px) + 34px);margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--glow);display:flex;align-items:center;gap:12px;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.sun-hint.on{opacity:1;visibility:visible}
.sun-hint::before{content:"";width:1px;height:28px;background:linear-gradient(var(--glow),transparent);animation:tropfen 2.2s ease-in-out infinite}
.sunset .fine-print{position:absolute;left:var(--pad);bottom:14px;font-size:11.5px;color:#bfae9d}

/* Katalog */
.catalog{position:relative;height:320vh}
.catalog-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.catalog-head{position:absolute;left:var(--pad);top:clamp(90px,13vh,130px);max-width:440px;z-index:120;pointer-events:none}
.catalog-head h2{font-size:clamp(30px,3.4vw,54px)}
.catalog-head .intro{font-size:15.5px;max-width:34ch}
.ring-cards{position:absolute;inset:0;z-index:2;touch-action:pan-y;outline:none}
.ring-cards:focus-visible{outline:2px solid var(--glow);outline-offset:-10px}
.ring-card img{opacity:var(--dim,1)}
.ring-card .card-no,.ring-card .card-title{text-shadow:0 1px 8px #000}
.ring-card{position:absolute;left:0;top:0;width:clamp(120px,14vw,230px);transform-origin:50% 50%;will-change:transform,opacity;cursor:grab;user-select:none}
.ring-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);pointer-events:none}
.ring-card[aria-selected=true] img{box-shadow:0 0 0 1px var(--glow),0 0 calc(20px + var(--pulse)*40px) rgba(255,198,141,.55),0 20px 60px rgba(0,0,0,.6)}
.card-no{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--glow)}
.card-title{display:block;font-family:var(--display);font-size:13px;color:var(--core);line-height:1.25}
.release{position:absolute;right:var(--pad);top:50%;transform:translateY(-44%);width:min(400px,30vw);z-index:4;background:rgba(0,0,0,.55);backdrop-filter:blur(18px);border:1px solid rgba(232,210,190,.18);border-radius:14px;padding:18px}
.release-cover{position:relative}
.release-cover img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px}
.release-no{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--glow)}
.tag{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid rgba(255,198,141,.5);border-radius:20px;font-size:10.5px;color:var(--champ)}
.release-title{font-size:clamp(20px,1.7vw,27px);line-height:1.1;margin-top:6px}
.release-artist{color:var(--champ);margin-top:4px}
.release-data{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:12px;font-size:14px}
.release-data dt{color:#cdb9a6}
.release-data dd{color:var(--core)}
.player{margin-top:14px}
.play-btn{display:inline-flex;align-items:center;gap:12px;padding:11px 20px 11px 14px;border-radius:40px;background:var(--core);color:#000;font-size:15px}
.play-btn[disabled]{opacity:.4;cursor:not-allowed}
.play-icon{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.play-btn[aria-pressed=true] .play-icon,.film-start.playing .play-icon{width:11px;height:13px;border:0;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor;margin-left:0}
.spectrum{width:100%;height:46px;margin-top:12px}
.progress{height:2px;background:rgba(232,210,190,.2);margin-top:6px}
.progress span{display:block;height:100%;width:0;background:var(--glow)}
.player-time{font-family:var(--mono);font-size:11.5px;color:#cdb9a6;margin-top:6px}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:40px;border:1px solid var(--glow);color:var(--core);text-decoration:none;font-size:15px;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:40px;background:var(--core);color:#000;font-size:16px}
.cat-note{position:absolute;left:var(--pad);bottom:64px;z-index:3;max-width:300px}

/* Archiv */
.archive{position:relative;background:#000;padding:clamp(90px,14vh,160px) var(--pad) clamp(70px,10vh,120px)}
.archive-date{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,32px);color:var(--glow);margin-top:10px}
.archive-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,90px);margin-top:clamp(34px,6vh,70px);align-items:start}
.facts{display:grid;gap:0}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:16px 0;border-top:1px solid rgba(232,210,190,.18)}
.facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--glow);padding-top:3px}
.facts dd{color:var(--core);font-size:clamp(16px,1.25vw,19px)}
.flyer img{width:100%;height:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.flyer figcaption{font-size:13px;color:#cdb9a6;margin-top:10px}
.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.3fr;gap:clamp(18px,2.4vw,36px);margin-top:clamp(50px,9vh,100px);align-items:start}
.film-frame{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:9/16;background:#111}
.film-frame video{width:100%;height:100%;object-fit:cover}
.film-start{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:rgba(253,251,246,.92);color:#000;display:grid;place-items:center;transition:opacity .3s,transform .3s}
.film-start.playing{opacity:0}
.film-frame:hover .film-start.playing{opacity:1}
.film-frame .ai-mark{left:12px;right:auto;top:12px;bottom:auto}
.film figcaption{margin-top:12px;font-size:14.5px;color:var(--champ)}
.film figcaption b{color:var(--core);font-weight:600}
.place-clips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.place-clip{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:#111}

/* Welten */
.worlds{position:relative;background:#000;overflow:hidden}
.worlds-head{padding:clamp(80px,12vh,140px) var(--pad) 0}
.worlds-track{display:flex;gap:clamp(20px,3vw,48px);padding:clamp(40px,7vh,80px) var(--pad) clamp(80px,12vh,140px);width:max-content;will-change:transform}
.world{width:clamp(260px,30vw,470px)}
.world-img{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/5}
.world-img img{width:100%;height:118%;object-fit:cover;transform:translateY(var(--par,0px))}
.world-img .ai-mark{left:12px;right:auto;bottom:12px}
.world-no{font-family:var(--mono);font-size:12px;color:var(--glow);margin-top:18px;letter-spacing:.14em}
.world h3{font-size:clamp(24px,2.2vw,36px);margin-top:4px}
.world p:last-child{margin-top:8px;color:var(--champ);max-width:34ch}

/* Label */
.label{position:relative;height:260vh}
.label-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.label-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.has-gl .label-still{display:none}
.label-text{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(560px,44vw)}
.label-steps{margin-top:34px;display:grid;gap:18px}
.label-step{font-size:clamp(17px,1.35vw,20px);color:rgba(232,210,190,.62);transition:color .4s,transform .4s;padding-left:18px;border-left:1px solid rgba(232,210,190,.25)}
.label-step b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(20px,1.8vw,28px);color:rgba(253,251,246,.7)}
.label-step.on{color:var(--core);border-left-color:var(--glow);transform:translateX(6px)}
.label-step.on b{color:var(--glow)}

/* Demo */
.demo{position:relative;background:#000;padding:clamp(100px,16vh,180px) var(--pad);overflow:hidden}
.demo-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.demo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 20%,#000a 60%,#0005)}
.demo-inner{position:relative;max-width:980px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;margin-top:44px}
.field{display:grid;gap:8px;align-content:start}
.field.wide{grid-column:1/-1}
.field label{font-size:14.5px;color:var(--champ)}
input,textarea,select{font:inherit;font-size:17px;color:var(--core);background:rgba(0,0,0,.35);border:0;border-bottom:1px solid rgba(232,210,190,.5);padding:10px 2px;border-radius:0;width:100%}
select option{background:#111;color:var(--core)}
input::placeholder{color:rgba(232,210,190,.55)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--glow);outline-offset:4px}
[aria-invalid=true]{border-bottom-color:#ff9a7a}
.field-error{min-height:1.2em;font-size:13.5px;color:#ffb39b}
.check{grid-template-columns:auto 1fr;align-items:start;gap:14px}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--glow)}
.check .field-error{grid-column:1/-1}
.confirm{margin-top:44px;padding:34px;border:1px solid var(--glow);border-radius:14px;background:rgba(0,0,0,.55);max-width:640px}
.confirm-title{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.6vw,40px);color:var(--core);margin:10px 0}

/* Fuß */
.foot{background:#000;padding:clamp(70px,10vh,120px) var(--pad) 90px;display:grid;justify-items:center;text-align:center;gap:10px}
.foot-logo{width:min(560px,80vw);height:auto;filter:drop-shadow(0 0 calc(var(--pulse)*30px) rgba(255,198,141,.5))}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1100px;margin-top:40px;font-size:13.5px;color:#cdb9a6;text-align:left}
.pv-hinweis{font-size:13.5px}
.pv-hinweis a,.pl-legal a{color:#f3e2cf;text-underline-offset:3px}
address.pl-legal{font-style:normal;display:grid;gap:4px;align-content:start}
.pl-legal span span{unicode-bidi:isolate}
.pl-legal b{color:#f3e2cf;font-weight:600;margin-bottom:2px}

/* Handy */
@media (max-width:899px){
  .journey{height:900vh}
  .nav-list{display:none;position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:26px;background:rgba(0,0,0,.94);font-size:22px;font-family:var(--display);z-index:-1}
  .nav-list.open{display:flex}
  .menu-btn{display:inline-flex}
  .sound-btn{padding:8px 12px;gap:8px;font-size:12.5px}
  .brand span{display:none}
  .top{padding:14px 16px}
  .beat{left:20px;right:20px;bottom:90px}
  .clock{top:12vh;left:20px;font-size:26vw;text-shadow:0 2px 30px rgba(0,0,0,.6)}
  .day-beats{left:20px;right:20px;width:auto;top:auto;bottom:130px}
  .day-beat{top:auto;bottom:0}
  .day-beat p{text-shadow:0 1px 14px rgba(0,0,0,.9)}
  .day-bar{left:20px;right:20px;bottom:74px;gap:10px;font-size:10.5px;flex-wrap:wrap}
  .sun-hint{left:20px;right:20px;bottom:103px;font-size:10.5px;text-shadow:0 1px 10px rgba(0,0,0,.85)}
  .sun-hint::before{height:16px}
  .sunset .fine-print{left:20px;right:20px;bottom:40px;font-size:10.5px}
  .catalog{height:260vh}
  .catalog-stage{overflow:hidden}
  .catalog-head{left:20px;right:20px;top:78px}
  .catalog-head h2{font-size:28px}
  .catalog-head .intro{font-size:14px;margin-top:8px}
  .ring-card{width:34vw}
  .card-title{font-size:11.5px}
  .release{right:10px;left:10px;top:auto;bottom:10px;transform:none;width:auto;padding:12px;display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:start}
  .release-cover img{border-radius:6px}
  .release-no{margin-top:0;font-size:10.5px}
  .tag{display:none}
  .release-title{font-size:17px}
  .release-artist{font-size:14px;margin-top:0}
  .release-data{display:none}
  .player{margin-top:8px}
  .play-btn{padding:8px 14px 8px 10px;font-size:13.5px}
  .spectrum{height:22px;margin-top:6px}
  .player-time{display:none}
  .release .btn-ghost{padding:8px 14px;font-size:13.5px;margin-top:8px}
  .cat-note{display:none}
  .sunset::before{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(transparent,rgba(0,0,0,.7))}
  .archive-grid,.films{grid-template-columns:1fr}
  .films .film{max-width:420px}
  .facts div{grid-template-columns:1fr;gap:4px}
  .worlds-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .world{width:78vw;flex:0 0 auto;scroll-snap-align:center}
  .label{height:220vh}
  .label-text{top:auto;bottom:40px;transform:none;left:20px;right:20px;max-width:none;background:linear-gradient(transparent,rgba(0,0,0,.75) 25%);padding-top:30px}
  .form{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
}

/* Reduzierte Bewegung und ohne WebGL: statische Fassung, gleiche Inhalte */
.static .journey{height:auto}
.static .stage{position:relative;height:auto;overflow:visible}
.static .still{position:relative;display:block;height:100vh}
.static .still{opacity:1!important}
.static .flight,.static .backdrop,.static .landing,.static .water{display:none}
.static .ride-text{position:absolute;inset:0;height:100vh}
.static .beat{display:none}
.static .beat-0{display:block;opacity:1}
.static .window{position:relative;opacity:1;width:min(420px,90vw);height:auto;aspect-ratio:9/16;margin:60px auto 0;border-radius:14px}
.static .window-imgs img{opacity:0}
.static .window-imgs img.on{opacity:1}
.static .sunset{position:relative;opacity:1;pointer-events:auto;padding:30px var(--pad) 80px}
.static .clock{position:relative;left:auto;top:auto;font-size:clamp(84px,14.5vw,200px)}
.static .sunset::before{display:none}


.static .day-beats{position:relative;left:auto;top:auto;bottom:auto;right:auto;width:auto;display:grid;gap:22px;margin-top:20px}
.static .day-beat{position:relative;opacity:1;transform:none;pointer-events:auto}
.static .day-bar{display:none}
.static .sunset .fine-print{position:relative;left:auto;bottom:auto;margin-top:24px}
.static .catalog{height:auto}
.static .catalog-stage{position:relative;height:auto;overflow:visible;padding:110px 0 60px}
.static .catalog-head{position:relative;left:auto;top:auto;padding:0 var(--pad)}
.static .ring-cards{position:relative;display:flex;flex-wrap:wrap;gap:18px;padding:30px var(--pad);height:auto}
.static .ring-card{position:relative;transform:none!important;opacity:1!important}
.static .release{position:relative;right:auto;top:auto;transform:none;margin:0 var(--pad);width:auto;max-width:520px}
.static .cat-note{position:relative;left:auto;bottom:auto;margin:16px var(--pad)}
.static .label{height:auto}
.static .label-stage{position:relative;height:auto;min-height:100vh}
.static .label-still{display:block!important}
.static .label-step{color:var(--core)}
.static .journey,.static .catalog-stage,.static .stage{overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- Sprachen (27.09.2026): Flaggenwahl, Arabisch mit RTL, Tickets vorn ---- */
@font-face{font-family:"Noto Kufi Arabic";src:url(../fonts/NotoKufiArabic-arabic-400-700.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/IBMPlexSansArabic-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/IBMPlexSansArabic-arabic-500.woff2) format("woff2");font-weight:500 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
html:lang(ar){
  --display:"Noto Kufi Arabic","Unbounded","Helvetica Neue",Arial,sans-serif;
  --text:"IBM Plex Sans Arabic","Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --serif:"IBM Plex Sans Arabic","Fraunces",Georgia,serif;
  --mono:"IBM Plex Sans Arabic","Instrument Sans","Helvetica Neue",Arial,sans-serif;
}
/* Werte mit gemischter Schrift (123 BPM, Uhrzeiten) nach ihrem ersten Zeichen ausrichten */
html[dir=rtl] .release-data dd,html[dir=rtl] .facts dd,html[dir=rtl] .card-title,html[dir=rtl] .day-time,html[dir=rtl] .day-bar li{unicode-bidi:plaintext}
html[dir=rtl] .clock{direction:ltr;unicode-bidi:isolate}
/* Arabische Schrift verbindet Buchstaben: keine Sperrung, keine Großbuchstaben, mehr Zeilenhöhe */
html:lang(ar) *{letter-spacing:0!important}
html:lang(ar) .eyebrow,html:lang(ar) .ai-mark,html:lang(ar) .facts dt{text-transform:none}
html:lang(ar) h2,html:lang(ar) .chapter,html:lang(ar) .release-title,html:lang(ar) .confirm-title{line-height:1.3}
html:lang(ar) body{line-height:1.75}

/* Ticket-Knopf in der Kopfzeile */
.tix-btn{display:inline-flex;align-items:center;padding:8px 16px;border-radius:40px;background:var(--glow);color:#000;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.tix-btn:hover{background:var(--core)}
@media (min-width:900px){.nav-list li:first-child{display:none}}

/* Flaggen, als Grafik eingebettet (Emoji-Flaggen fehlen unter Windows) */
.flag{display:inline-block;flex:none;width:21px;height:14px;border-radius:2px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.flag-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0,0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
.flag-de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z'/%3E%3Cpath d='M0 1h5v2H0z' fill='%23DD0000'/%3E%3Cpath d='M0 2h5v1H0z' fill='%23FFCE00'/%3E%3C/svg%3E")}
.flag-ar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M0 0h12v2H0z' fill='%2300732F'/%3E%3Cpath d='M0 2h12v2H0z' fill='%23fff'/%3E%3Cpath d='M0 4h12v2H0z'/%3E%3Cpath d='M0 0h3v6H0z' fill='%23FF0000'/%3E%3C/svg%3E")}
.flag-fr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath d='M0 0h1v2H0z' fill='%23002654'/%3E%3Cpath d='M1 0h1v2H1z' fill='%23fff'/%3E%3Cpath d='M2 0h1v2H2z' fill='%23CE1126'/%3E%3C/svg%3E")}
.flag-es{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath d='M0 0h3v2H0z' fill='%23AA151B'/%3E%3Cpath d='M0 .5h3v1H0z' fill='%23F1BF00'/%3E%3C/svg%3E")}

/* Sprachwahl */
.lang-pick{position:relative}
.lang-btn{gap:8px}
.lang-code{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.06em}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:5;list-style:none;min-width:200px;padding:6px;background:rgba(8,8,10,.97);border:1px solid rgba(232,210,190,.25);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lang-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:9px;font-size:15px;color:var(--core);text-align:start;font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif}
.lang-menu button[lang=ar]{font-family:"IBM Plex Sans Arabic","Helvetica Neue",Arial,sans-serif}
.lang-menu button:hover,.lang-menu button:focus-visible{background:rgba(255,198,141,.13);outline:none}
.lang-menu button[aria-checked=true]{color:var(--glow)}
.lang-menu button[aria-checked=true]::after{content:"";margin-inline-start:auto;width:8px;height:8px;border-radius:50%;background:var(--glow)}

/* Tickets */
.tickets{position:relative;background:#000;padding:clamp(100px,16vh,170px) var(--pad) clamp(80px,12vh,140px);overflow:hidden}
.tickets-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.tickets-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 12%,#000c 55%,#0007)}
.tickets-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,90px);align-items:start}
.tickets-date{margin-top:18px;font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.tickets .facts{margin-top:clamp(28px,5vh,48px)}
.price{display:block;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,34px);line-height:1.15;color:var(--core)}
.price-note{display:block;margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--champ);opacity:.85}
.tickets-box{background:rgba(0,0,0,.6);border:1px solid rgba(232,210,190,.22);border-radius:18px;padding:clamp(22px,3vw,40px)}
.tickets-form-title{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.7vw,26px);color:var(--core)}
.form-tix{margin-top:22px;gap:16px 20px}
.tickets .confirm{margin-top:0}

/* Rechts nach links: Text und Bedienung spiegeln, Bühne und Szenen bleiben wie gefilmt */
html[dir=rtl] .tickets-bg::after{background:linear-gradient(270deg,#000 12%,#000c 55%,#0007)}
html[dir=rtl] .demo-bg::after{background:linear-gradient(270deg,#000 20%,#000a 60%,#0005)}
html[dir=rtl] .nav-list a::after{transform-origin:right}
html[dir=rtl] .worlds-track{direction:ltr}
html[dir=rtl] .worlds-track .world{direction:rtl}

@media (max-width:899px){
  .sound-btn .sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sound-btn{padding:8px 10px}
  .top-right{gap:7px}
  .tix-btn{padding:8px 13px;font-size:12.5px}
  .lang-btn,.menu-btn{padding:8px 11px;font-size:12.5px}
  .lang-code{display:none}
  .tickets-inner{grid-template-columns:1fr}
  .form-tix{grid-template-columns:1fr}
}
html[dir=rtl] .label-step{padding-left:0;border-left:0;padding-right:18px;border-right:1px solid rgba(232,210,190,.25)}
html[dir=rtl] .label-step.on{border-right-color:var(--glow);transform:translateX(-6px)}
html[dir=rtl] .tag{margin-left:0;margin-right:6px}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;inset-inline-start:0}
.tix-open{display:grid;gap:16px;justify-items:start;margin-bottom:28px}
.tix-open[hidden],#tix-list[hidden]{display:none}
.form-tix #te-form:empty{display:none}

/* Direkt zur Party (27.09.2026) */
.skip-intro{position:fixed;z-index:40;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-start:20px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,214,170,.55);background:rgba(10,8,6,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ffe3c4;font-size:14px;text-decoration:none;letter-spacing:.02em}
.skip-intro:hover,.skip-intro:focus-visible{background:rgba(255,190,130,.22)}
.static .skip-intro{display:none}
/* Frühbucher-Leiste (MM 05.10.2026): feste Pille unten rechts, leuchtet dezent, verschwindet im Buchungsbereich */
.deal{position:fixed;z-index:41;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-end:20px;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;border-radius:999px;border:1px solid rgba(255,198,141,.6);background:rgba(10,8,6,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--core);text-decoration:none;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s,visibility .5s,transform .5s,background .3s;animation:dealGlow 3.2s ease-in-out infinite}
.deal.on{opacity:1;visibility:visible;transform:none}
.deal:hover,.deal:focus-visible{background:rgba(40,26,14,.85)}
.deal-badge{flex:none;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;color:#120b05;background:linear-gradient(135deg,var(--glow),var(--bronze));border-radius:999px;padding:7px 11px}
.deal-text{display:flex;flex-direction:column;line-height:1.25}
#deal-until{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.deal-price{font-size:14px;color:var(--core)}
.deal-cta{flex:none;font-size:13px;font-weight:600;padding:9px 14px;border-radius:999px;background:var(--core);color:#120b05}
@keyframes dealGlow{0%,100%{box-shadow:0 0 0 rgba(255,198,141,0),0 8px 30px rgba(0,0,0,.45)}50%{box-shadow:0 0 26px rgba(255,198,141,.35),0 8px 30px rgba(0,0,0,.45)}}
@media (prefers-reduced-motion:reduce){.deal{animation:none}}
.static .deal{animation:none}
/* Knopf am Ende der Uhrzeiten */
.deal-inline{display:inline-flex;margin-top:18px;padding:11px 18px;border-radius:999px;background:linear-gradient(135deg,var(--glow),var(--bronze));color:#120b05;font-weight:600;font-size:14px;text-decoration:none;pointer-events:auto}
.deal-inline:hover,.deal-inline:focus-visible{filter:brightness(1.08)}
/* Staffel im Buchungsbereich */
.deal-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.deal-list li{display:grid;grid-template-columns:1fr auto 4.2em;gap:12px;align-items:baseline}
.deal-list .deal-pct{font-family:var(--mono);font-size:12px;color:var(--glow);text-align:end}
.deal-list li.vorbei{opacity:.45;text-decoration:line-through}
.deal-list li.jetzt{color:var(--glow);font-weight:600}
.deal-list li.jetzt .deal-when::after{content:attr(data-now);margin-inline-start:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--glow);color:#120b05;text-decoration:none}
@media (max-width:767px){
  .deal{top:calc(70px + env(safe-area-inset-top,0px));bottom:auto;inset-inline:12px;justify-content:space-between;gap:8px;padding:6px 6px 6px 8px;transform:translateY(-10px)}
  .deal-badge{font-size:12px;padding:6px 9px}
  .deal-price{font-size:12.5px}
  #deal-until{font-size:9.5px;letter-spacing:.1em}
  .deal-cta{font-size:12px;padding:8px 11px}
  .day-bar{flex-wrap:nowrap}
  .day-bar li{display:none}
  .day-bar li.cur{display:block;transform:none}
  .has-deal .clock{top:calc(128px + env(safe-area-inset-top,0px))}
}
/* Social-Links (aus der Verwaltung) */
.pl-social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.pl-social a{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border:1px solid rgba(255,198,141,.35);border-radius:999px;color:#f3e3d2;text-decoration:none;font-size:14px;letter-spacing:.02em;transition:border-color .25s,background .25s}
.pl-social a:hover,.pl-social a:focus-visible{border-color:#ffc68d;background:rgba(255,198,141,.1)}
.pl-social svg{flex:none}
@media (min-width:768px){.has-deal .ai-mark,.has-deal .real-mark{bottom:auto;top:10px}}