:root{
  --bg:#03050b;
  --panel:#090d18;
  --panel2:#0d1120;
  --text:#f7f9ff;
  --muted:#9ca8bf;
  --line:rgba(255,255,255,.10);
  --cyan:#36e0ff;
  --blue:#4579ff;
  --violet:#8757ff;
  --pink:#ff3dc8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
button,a{font:inherit}
img{display:block;max-width:100%}
.container{width:min(1180px,calc(100% - 34px));margin:auto}
.page-progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:5000;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--pink));box-shadow:0 0 18px var(--cyan)}

.site-header{
  position:fixed;left:0;right:0;top:0;height:84px;z-index:2000;
  background:linear-gradient(90deg,rgba(3,5,11,.96),rgba(10,13,27,.94) 55%,rgba(21,6,26,.94));
  border-bottom:1px solid rgba(74,211,255,.16);
  backdrop-filter:blur(22px);
  box-shadow:0 14px 45px rgba(0,0,0,.34);
}
.header-inner{height:100%;display:grid;grid-template-columns:220px 1fr 220px;align-items:center;gap:20px}
.brand{position:relative;width:205px;text-decoration:none}
.brand img{position:relative;z-index:2;width:100%;max-height:60px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 18px rgba(58,214,255,.30))}
.brand-glow{position:absolute;inset:20% 2%;background:linear-gradient(90deg,rgba(54,224,255,.25),rgba(133,87,255,.22),rgba(255,61,200,.18));filter:blur(18px);border-radius:50%;animation:brandGlow 2.2s ease-in-out infinite alternate}
@keyframes brandGlow{to{transform:scale(1.12);opacity:.55}}
.header-status{justify-self:center;color:#8d9bb3;font-size:9px;font-weight:900;letter-spacing:.14em;display:flex;gap:9px;align-items:center;text-transform:uppercase}
.header-status i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(54,224,255,.55);animation:live 1.5s infinite}
@keyframes live{70%{box-shadow:0 0 0 10px rgba(54,224,255,0)}}
.header-play{justify-self:end;height:46px;min-width:205px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:linear-gradient(120deg,var(--cyan),var(--blue),var(--violet),var(--pink));color:#fff;font-size:10px;font-weight:950;letter-spacing:.11em;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 0 30px rgba(52,166,255,.17)}

.hero{position:relative;padding:150px 0 88px;overflow:hidden;isolation:isolate}
.hero-stage-bg{position:absolute;inset:0;z-index:-4;background:url("images/brot-mit-ei.webp") center/cover no-repeat;opacity:.18;filter:saturate(1.1) contrast(1.05);transition:background-image .4s ease}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(3,5,11,.97) 0%,rgba(3,5,11,.84) 42%,rgba(3,5,11,.46) 70%,rgba(3,5,11,.84) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 45%,rgba(3,5,11,.20) 100%)}
.laser{position:absolute;z-index:-2;width:2px;height:120vh;top:-25vh;background:linear-gradient(transparent,rgba(58,225,255,.6),rgba(255,61,200,.6),transparent);filter:drop-shadow(0 0 12px rgba(54,224,255,.65));opacity:.16}
.laser-a{left:18%;transform:rotate(27deg);animation:laserA 10s ease-in-out infinite alternate}
.laser-b{right:17%;transform:rotate(-23deg);animation:laserB 12s ease-in-out infinite alternate}
.laser-c{left:54%;transform:rotate(12deg);opacity:.08}
@keyframes laserA{to{transform:translateX(110px) rotate(27deg)}}@keyframes laserB{to{transform:translateX(-90px) rotate(-23deg)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero-kicker{display:inline-block;color:var(--cyan);font-size:10px;font-weight:950;letter-spacing:.18em;margin-bottom:17px}
.hero h1{margin:0;font-size:clamp(52px,6.8vw,90px);line-height:.92;letter-spacing:-.06em;text-transform:uppercase}
.hero h1 span{background:linear-gradient(90deg,#69efff,#5a7fff 48%,#ff50d0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{max-width:690px;color:#c3ccdb;font-size:17px;line-height:1.75;margin:24px 0 0}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.primary-action,.secondary-action{min-height:50px;padding:0 18px;border-radius:13px;font-size:11px;font-weight:950;letter-spacing:.08em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.primary-action{border:0;color:#fff;background:linear-gradient(125deg,var(--cyan),var(--blue),var(--pink));box-shadow:0 14px 36px rgba(50,142,255,.24)}
.secondary-action{border:1px solid rgba(255,255,255,.12);color:#d8dfed;background:rgba(255,255,255,.035)}
.hero-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}.hero-tags span{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:rgba(6,10,22,.60);color:#8f9bb0;font-size:9px;font-weight:900;letter-spacing:.07em}
.hero-visual{position:relative}
.stage-card{position:relative;border:1px solid rgba(72,218,255,.22);border-radius:26px;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.46),0 0 50px rgba(41,171,255,.09);background:#070a12}
.stage-card>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.stage-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,5,11,.95),transparent 55%);pointer-events:none}
.stage-label{position:absolute;left:15px;top:15px;z-index:4;padding:7px 9px;border-radius:999px;background:rgba(4,7,16,.76);border:1px solid rgba(78,222,255,.25);color:#a6f0ff;font-size:8px;font-weight:950;letter-spacing:.12em;backdrop-filter:blur(10px)}
.stage-card-overlay{position:absolute;left:18px;right:18px;bottom:16px;z-index:5;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:end}
.stage-card-overlay>span{font-size:9px;color:var(--cyan);font-weight:950}.stage-card-overlay strong{display:block;font-size:22px}.stage-card-overlay small{display:block;color:#aab5c7;font-size:9px;margin-top:3px}
.stage-card-overlay button{width:44px;height:44px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue),var(--pink));color:#fff;cursor:pointer;box-shadow:0 0 25px rgba(54,196,255,.25)}
.stage-eq{height:52px;margin-top:16px;display:flex;justify-content:center;align-items:flex-end;gap:5px}.stage-eq i{width:4px;height:10px;border-radius:4px;background:linear-gradient(var(--pink),var(--cyan));animation:eq .65s ease-in-out infinite alternate}.stage-eq i:nth-child(2n){animation-delay:.12s}.stage-eq i:nth-child(3n){animation-delay:.25s}@keyframes eq{to{height:48px}}

.player-section{padding:20px 0 86px}
.section-label{color:var(--cyan);font-size:10px;font-weight:950;letter-spacing:.16em;margin-bottom:10px}
.player-shell{position:relative;padding:24px 60px 130px;border-radius:28px;border:1px solid rgba(72,215,255,.18);background:radial-gradient(circle at 50% 0%,rgba(64,112,255,.10),transparent 30%),linear-gradient(180deg,rgba(13,17,34,.95),rgba(5,7,16,.98));box-shadow:0 32px 90px rgba(0,0,0,.40)}
.cover-viewport{overflow:hidden;padding:10px 0 18px}.cover-track{display:flex;gap:18px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.cover-card{position:relative;flex:0 0 clamp(245px,30vw,345px);aspect-ratio:16/10;border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden;padding:0;background:#060912;color:#fff;cursor:pointer;opacity:.48;transform:scale(.91);transition:.35s;box-shadow:0 20px 55px rgba(0,0,0,.26)}
.cover-card img{width:100%;height:100%;object-fit:cover}.cover-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,4,10,.94),transparent 58%)}
.cover-info{position:absolute;left:14px;right:14px;bottom:12px;text-align:left;z-index:3}.cover-info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cover-info small{display:block;color:#9aa7ba;font-size:8px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cover-card.active{opacity:1;transform:scale(1);border-color:rgba(72,220,255,.64);box-shadow:0 0 36px rgba(50,184,255,.13),0 25px 65px rgba(0,0,0,.36)}
.cover-card.active::before{content:"NOW PLAYING";position:absolute;left:11px;top:11px;z-index:4;padding:6px 8px;border-radius:999px;background:linear-gradient(90deg,rgba(19,187,255,.88),rgba(136,64,255,.88));font-size:7px;font-weight:950;letter-spacing:.10em}
.carousel-arrow{position:absolute;top:34%;width:42px;height:68px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(4,7,16,.78);color:#fff;font-size:34px;cursor:pointer;z-index:6}.carousel-arrow.prev{left:9px}.carousel-arrow.next{right:9px}
.player-console{position:absolute;left:18px;right:18px;bottom:18px;min-height:76px;padding:9px 11px;border-radius:17px;border:1px solid rgba(88,213,255,.18);background:linear-gradient(90deg,rgba(5,8,19,.98),rgba(14,17,36,.98),rgba(28,8,34,.96));display:grid;grid-template-columns:42px 58px 42px minmax(180px,1fr) minmax(230px,1.25fr) auto;gap:8px;align-items:center}
.small-control,.loop-button{height:42px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.035);color:#fff;cursor:pointer}
.main-play{width:58px;height:58px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:conic-gradient(from 220deg,var(--cyan),var(--blue),var(--violet),var(--pink),var(--cyan));color:#fff;font-size:19px;cursor:pointer;box-shadow:0 0 30px rgba(51,185,255,.25)}
.now-playing{text-align:left;min-width:0}.now-playing span{display:block;color:var(--cyan);font-size:8px;font-weight:950;letter-spacing:.14em}.now-playing strong{display:block;margin-top:3px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing small{display:block;color:#8490a6;font-size:8px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline{display:grid;grid-template-columns:36px 1fr 36px;gap:7px;align-items:center}.timeline span{font-size:8px;color:#8590a4}#audioProgress{width:100%;accent-color:var(--cyan)}
.loop-button{padding:0 11px;color:#8090aa;font-size:8px;font-weight:900;letter-spacing:.08em}.loop-button.active{color:#fff;border-color:rgba(71,220,255,.34);background:rgba(61,137,255,.08)}
.dots{position:absolute;left:50%;bottom:105px;transform:translateX(-50%);display:flex;gap:6px}.dot{width:6px;height:6px;border:0;border-radius:999px;background:rgba(255,255,255,.22);padding:0;cursor:pointer}.dot.active{width:22px;background:linear-gradient(90deg,var(--cyan),var(--pink))}

.statement-section,.releases-section,.platforms-section,.final-cta{padding:90px 0}
.statement-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:start}
.statement-head span,.section-head .section-label{color:var(--cyan);font-size:10px;font-weight:950;letter-spacing:.17em}
.statement-head h2,.section-head h2,.final-card h2{font-size:clamp(40px,5vw,66px);line-height:.98;letter-spacing:-.045em;margin:10px 0 0}.statement-head h2 em,.section-head h2 em,.final-card h2 em{font-style:normal;color:var(--pink)}
.statement-copy{padding:28px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(14,18,34,.90),rgba(7,9,18,.94));box-shadow:0 22px 70px rgba(0,0,0,.24)}.statement-copy p{color:#c3ccda;font-size:16px;line-height:1.8;margin:0 0 14px}.statement-copy p:last-child{margin-bottom:0}
.releases-section{background:linear-gradient(180deg,transparent,rgba(28,34,70,.13),transparent)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:30px}.section-head>p{max-width:520px;color:#8f9bb0;line-height:1.7;font-size:14px;margin:0}
.release-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.release-card{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.09);cursor:pointer;box-shadow:0 18px 50px rgba(0,0,0,.25);transition:.28s}.release-card:hover{transform:translateY(-6px);border-color:rgba(76,216,255,.40);box-shadow:0 26px 70px rgba(0,0,0,.36),0 0 28px rgba(46,163,255,.10)}.release-card img{width:100%;height:100%;object-fit:cover;transition:.45s}.release-card:hover img{transform:scale(1.045)}
.release-meta{position:absolute;inset:0;padding:18px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:end;background:linear-gradient(0deg,rgba(2,4,10,.94),transparent 58%)}.release-no{font-size:9px;color:var(--cyan);font-weight:950}.release-meta h3{margin:0;font-size:21px}.release-meta p{margin:4px 0 0;color:#9ca8ba;font-size:9px;text-transform:uppercase;letter-spacing:.07em}.release-play{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--blue),var(--pink));font-size:11px}
.platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.platform-card{min-height:185px;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(145deg,rgba(14,18,34,.96),rgba(6,8,17,.98));display:flex;flex-direction:column;align-items:flex-start;transition:.25s}.platform-card:hover{transform:translateY(-5px);border-color:rgba(76,216,255,.30);box-shadow:0 24px 65px rgba(0,0,0,.28)}
.platform-symbol{width:50px;height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;background:rgba(255,255,255,.04);font-size:19px;font-weight:950}.platform-symbol.amazon{font-size:22px}
.platform-card h3{margin:14px 0 4px}.platform-card p{margin:0;color:#8390a6;font-size:10px}.platform-card a{margin-top:auto;color:#a6efff;font-size:10px;font-weight:900;text-decoration:none}

.final-card{position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.10);padding:56px 38px;background:linear-gradient(100deg,rgba(5,7,16,.96),rgba(20,8,30,.91));box-shadow:0 30px 90px rgba(0,0,0,.32)}.final-card-bg{position:absolute;inset:0;background:url("images/power-tower.webp") center/cover;opacity:.16;filter:saturate(1.15)}.final-card>*:not(.final-card-bg){position:relative}.final-card>span{color:var(--cyan);font-size:10px;font-weight:950;letter-spacing:.18em}.final-card button{margin-top:24px;border:0;border-radius:13px;padding:13px 17px;background:linear-gradient(125deg,var(--cyan),var(--blue),var(--pink));color:#fff;font-weight:950;font-size:11px;cursor:pointer}

.footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.07);background:#020307}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;color:#728097;font-size:11px}.footer-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.footer-links a,.footer-links button{border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 10px;background:rgba(255,255,255,.025);color:#93a1b7;text-decoration:none;font-size:10px;cursor:pointer}

.consent-banner[hidden]{display:none!important}.consent-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:4000;padding:17px;border:1px solid rgba(74,216,255,.22);border-radius:18px;background:rgba(7,10,22,.97);backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.58);display:grid;grid-template-columns:1.4fr .9fr auto;gap:16px;align-items:center}.consent-copy strong{font-size:14px}.consent-copy p{margin:5px 0;color:#a7b2c6;font-size:10px;line-height:1.5}.consent-copy a{color:#80eaff;font-size:10px}.consent-options{display:flex;flex-direction:column;gap:7px}.consent-options label{font-size:10px;color:#c1cada;display:flex;gap:7px;align-items:center}.consent-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.consent-actions button{border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:9px 10px;background:rgba(255,255,255,.04);color:#fff;font-size:9px;cursor:pointer}.consent-actions .primary{background:linear-gradient(125deg,var(--cyan),var(--blue),var(--pink))}

@media(max-width:980px){
  .header-inner{grid-template-columns:175px 1fr 185px}.brand{width:165px}.header-status{display:none}.header-play{min-width:180px}
  .hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-actions,.hero-tags{justify-content:center}.hero-visual{width:min(760px,100%);margin:auto}
  .player-console{grid-template-columns:42px 58px 42px 1fr}.timeline{grid-column:1/-2;grid-row:2}.loop-button{grid-column:-2/-1;grid-row:2}
  .statement-grid{grid-template-columns:1fr}.platform-grid{grid-template-columns:repeat(2,1fr)}.consent-banner{grid-template-columns:1fr}
}
@media(max-width:650px){
  .site-header{height:72px}.header-inner{grid-template-columns:135px 1fr;gap:10px}.brand{width:132px}.header-play{justify-self:end;min-width:150px;height:42px;font-size:8px}
  .hero{padding:112px 0 60px}.hero h1{font-size:clamp(44px,14vw,68px)}.hero-copy>p{font-size:15px}
  .player-shell{padding:18px 40px 195px}.cover-card{flex-basis:76vw}.carousel-arrow{width:34px;height:54px;font-size:28px}.carousel-arrow.prev{left:4px}.carousel-arrow.next{right:4px}
  .player-console{left:8px;right:8px;bottom:8px;grid-template-columns:36px 52px 36px 1fr;gap:6px}.main-play{width:52px;height:52px}.now-playing strong{font-size:12px}.now-playing small{display:none}.timeline{grid-column:1/-1;grid-row:2}.loop-button{grid-column:1/-1;grid-row:3;height:34px}.dots{bottom:158px}
  .section-head{display:block}.section-head>p{margin-top:16px}.release-grid,.platform-grid{grid-template-columns:1fr}.footer-inner{flex-direction:column}.footer-links{justify-content:center}.consent-banner{left:8px;right:8px;bottom:8px}
}


/* V12 Logo-Update + Originale Plattform-Symbole */
.brand img{
  width:100%;
  max-height:64px;
  object-fit:contain;
  border-radius:8px;
}

.platform-symbol.brand-logo{
  width:72px;
  height:72px;
  padding:10px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:inset 0 0 24px rgba(255,255,255,.03);
}

.platform-symbol.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.platform-card{
  gap:14px;
}

.platform-card h3{
  margin:0 0 5px;
}

.platform-card p{
  line-height:1.55;
}

.amazon-logo{
  width:110px;
  padding:10px 12px;
}

.amazon-logo img{
  object-fit:contain;
}

@media(max-width:650px){
  .platform-symbol.brand-logo{
    width:64px;
    height:64px;
  }
  .amazon-logo{
    width:100px;
    height:64px;
  }
}


/* ==========================================================
   V13 – PERSISTENTER PLAYER + RECHTLICHE SEITEN IM OVERLAY
   ========================================================== */

.legal-viewer[hidden]{display:none!important}
.legal-viewer{
  position:fixed;
  inset:0;
  z-index:3500;
  padding:18px;
  background:rgba(1,3,9,.74);
  backdrop-filter:blur(13px);
}
.legal-viewer-shell{
  width:min(1180px,100%);
  height:calc(100vh - 36px);
  margin:auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(82,218,255,.25);
  border-radius:22px;
  background:#050812;
  box-shadow:0 35px 110px rgba(0,0,0,.72),0 0 50px rgba(47,175,255,.08);
}
.legal-viewer-bar{
  min-height:64px;
  padding:10px 14px 10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,rgba(7,12,29,.98),rgba(21,7,29,.96));
}
.legal-viewer-bar span{
  display:block;
  color:var(--cyan);
  font-size:8px;
  font-weight:950;
  letter-spacing:.18em;
}
.legal-viewer-bar strong{
  display:block;
  margin-top:2px;
  font-size:14px;
}
.legal-viewer-bar button{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,rgba(29,55,103,.96),rgba(77,24,83,.96));
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.legal-viewer iframe{
  width:100%;
  flex:1;
  border:0;
  background:#03050b;
}
body.legal-open{overflow:hidden}

/* Cookie-/Datenschutzdialog */
.consent-banner{
  grid-template-columns:minmax(0,1.45fr) minmax(270px,.78fr) auto;
  max-height:min(88vh,780px);
  overflow:auto;
}
.consent-kicker{
  display:block;
  margin-bottom:5px;
  color:var(--cyan);
  font-size:8px;
  font-weight:950;
  letter-spacing:.16em;
}
.consent-copy>strong{
  display:block;
  font-size:16px;
}
.country-warning{
  margin:9px 0;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,170,67,.20);
  background:rgba(255,145,38,.055);
  color:#c9c1b5;
  font-size:10px;
  line-height:1.55;
}
.country-warning b{color:#ffcf8d}
.consent-detail{color:#8693a8!important}
.consent-options label{align-items:flex-start}
.consent-options label>span{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.consent-options label b{
  font-size:10px;
  color:#edf3ff;
}
.consent-options label small{
  color:#7f8ba0;
  font-size:8px;
  line-height:1.4;
}

@media(max-width:900px){
  .consent-banner{grid-template-columns:1fr}
}
@media(max-width:650px){
  .legal-viewer{padding:6px}
  .legal-viewer-shell{
    height:calc(100vh - 12px);
    border-radius:14px;
  }
}


/* ==========================================================
   V14 – FOOTER LOGO + STREAMING-FEINSCHLIFF
   ========================================================== */

.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer-brand img{
  width:165px;
  max-height:64px;
  object-fit:contain;
  mix-blend-mode:screen;
  filter:
    drop-shadow(0 0 12px rgba(54,224,255,.25))
    drop-shadow(0 0 20px rgba(255,61,200,.10));
}

.footer-brand span{
  white-space:nowrap;
}

/* Amazon Music bewusst größer als die anderen Plattformlogos */
.platform-card .amazon-logo{
  width:132px !important;
  height:76px !important;
  padding:8px 10px !important;
}

.platform-card .amazon-logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

@media(max-width:650px){
  .footer-brand{
    flex-direction:column;
    gap:8px;
  }

  .footer-brand img{
    width:150px;
  }

  .platform-card .amazon-logo{
    width:122px !important;
    height:70px !important;
  }
}


/* ==========================================================
   V15 – RELEASE HOVER SCHLEIER
   ========================================================== */

.release-card{
  isolation:isolate;
}

.release-card::before{
  content:"";
  position:absolute;
  inset:-12% auto -12% -40%;
  width:36%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transform:translateX(-180%) skewX(-22deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.05) 18%,
    rgba(255,255,255,0.16) 38%,
    rgba(255,255,255,0.30) 50%,
    rgba(255,255,255,0.14) 62%,
    rgba(255,255,255,0.04) 82%,
    rgba(255,255,255,0) 100%
  );
  mix-blend-mode:screen;
  filter:blur(1px);
}

.release-card:hover::before,
.release-card:focus-visible::before{
  opacity:1;
  animation:releaseSheen 0.9s ease forwards;
}

.release-meta{
  z-index:3;
}

@keyframes releaseSheen{
  0%{
    opacity:0;
    transform:translateX(-180%) skewX(-22deg);
  }
  12%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translateX(430%) skewX(-22deg);
  }
}


/* ==========================================================
   V16 – PREMIUM RELEASE LIGHT SWEEP
   ========================================================== */

.release-card{
  isolation:isolate;
}

.release-card img{
  transition:
    transform .65s cubic-bezier(.2,.8,.2,1),
    filter .65s ease;
}

.release-card:hover img,
.release-card:focus-visible img{
  transform:scale(1.06);
  filter:saturate(1.18) contrast(1.07) brightness(1.07);
}

/* Breiter, weicher Lichtschleier */
.release-card::before{
  content:"";
  position:absolute;
  top:-38%;
  bottom:-38%;
  left:-72%;
  width:58%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transform:skewX(-21deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(53,222,255,.03) 14%,
    rgba(83,226,255,.15) 31%,
    rgba(255,255,255,.38) 47%,
    rgba(255,255,255,.48) 51%,
    rgba(255,74,208,.20) 65%,
    rgba(255,255,255,.05) 82%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(5px);
  mix-blend-mode:screen;
}

/* Schmale helle Lichtkante für einen "Premium Gloss"-Moment */
.release-card::after{
  content:"";
  position:absolute;
  top:-44%;
  bottom:-44%;
  left:-42%;
  width:10%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transform:skewX(-21deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.35) 20%,
    rgba(255,255,255,.98) 48%,
    rgba(118,238,255,1) 53%,
    rgba(255,255,255,.80) 60%,
    rgba(255,255,255,0)
  );
  filter:blur(.6px);
  mix-blend-mode:screen;
  box-shadow:
    0 0 22px rgba(75,224,255,.45),
    0 0 42px rgba(255,60,199,.18);
}

.release-card:hover::before,
.release-card:focus-visible::before{
  animation:premiumVeil 1.10s cubic-bezier(.18,.75,.22,1) forwards;
}

.release-card:hover::after,
.release-card:focus-visible::after{
  animation:premiumEdge 1.10s cubic-bezier(.18,.75,.22,1) forwards;
}

.release-card:hover,
.release-card:focus-visible{
  box-shadow:
    0 28px 78px rgba(0,0,0,.42),
    0 0 0 1px rgba(74,225,255,.20),
    0 0 30px rgba(49,183,255,.17),
    0 0 48px rgba(255,56,198,.08);
}

.release-meta{
  z-index:4;
}

@keyframes premiumVeil{
  0%{left:-72%;opacity:0}
  9%{opacity:.48}
  38%{opacity:1}
  78%{opacity:.82}
  100%{left:122%;opacity:0}
}

@keyframes premiumEdge{
  0%{left:-42%;opacity:0}
  15%{opacity:.20}
  44%{opacity:1}
  70%{opacity:.78}
  100%{left:112%;opacity:0}
}

/* ==========================================================
   V16 – INLINE LEGAL VIEWER
   Der Player bleibt im selben Dokument und läuft weiter.
   ========================================================== */

.legal-viewer[hidden]{display:none!important}

.legal-viewer{
  position:fixed;
  inset:0;
  z-index:5000;
  padding:18px;
  background:rgba(1,3,9,.77);
  backdrop-filter:blur(15px);
}

.legal-viewer-shell{
  width:min(1180px,100%);
  height:calc(100vh - 36px);
  margin:auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(76,221,255,.25);
  border-radius:24px;
  background:
    radial-gradient(circle at 85% 0%,rgba(116,70,255,.10),transparent 30%),
    #050812;
  box-shadow:
    0 38px 120px rgba(0,0,0,.75),
    0 0 50px rgba(47,176,255,.08);
}

.legal-viewer-bar{
  min-height:70px;
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto 46px;
  align-items:center;
  gap:16px;
  padding:11px 14px 11px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,rgba(7,12,29,.99),rgba(21,7,29,.97));
}

.legal-viewer-heading span{
  display:block;
  color:var(--cyan);
  font-size:8px;
  font-weight:950;
  letter-spacing:.17em;
}

.legal-viewer-heading strong{
  display:block;
  margin-top:3px;
  font-size:15px;
}

.legal-viewer-tabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center;
}

.legal-viewer-tabs button{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#9eacc3;
  cursor:pointer;
  font-size:9px;
  font-weight:850;
}

.legal-viewer-tabs button.active{
  color:#fff;
  border-color:rgba(70,222,255,.35);
  background:linear-gradient(90deg,rgba(45,140,255,.15),rgba(198,52,255,.10));
}

.legal-close{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,rgba(30,55,102,.98),rgba(81,23,85,.98));
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

.legal-viewer-content{
  flex:1;
  overflow:auto;
  padding:38px max(24px,calc((100% - 900px)/2)) 70px;
  overscroll-behavior:contain;
}

.legal-inline{
  width:min(900px,100%);
  margin:auto;
  color:#eef3ff;
  line-height:1.72;
}

.legal-eyebrow{
  color:var(--cyan);
  font-size:9px;
  font-weight:950;
  letter-spacing:.17em;
}

.legal-inline h1{
  margin:8px 0 22px;
  font-size:clamp(40px,7vw,68px);
  line-height:1;
  letter-spacing:-.045em;
}

.legal-inline h2{
  margin:31px 0 7px;
  font-size:21px;
}

.legal-inline h3{
  margin:23px 0 6px;
  font-size:16px;
}

.legal-inline p,
.legal-inline li{
  color:#aab5c8;
}

.legal-inline a{
  color:#77e8ff;
}

.legal-inline .card{
  padding:28px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(14,18,34,.96),rgba(6,8,16,.97));
  box-shadow:0 24px 70px rgba(0,0,0,.26);
}

.legal-note,
.legal-inline .note{
  padding:13px 15px;
  border-left:3px solid var(--cyan);
  border-radius:0 12px 12px 0;
  background:rgba(52,199,255,.055);
  color:#9eb0c8;
}

.legal-inline .warn{
  padding:13px 15px;
  border-left:3px solid #ffae4f;
  border-radius:0 12px 12px 0;
  background:rgba(255,150,45,.06);
  color:#c7bcae;
}

.legal-inline .choice{
  margin:14px 0;
  padding:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.legal-inline .choice label{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.legal-inline .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}

.legal-inline .actions button{
  padding:11px 15px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#11172a;
  color:#fff;
  cursor:pointer;
}

.legal-inline .actions .primary{
  background:linear-gradient(135deg,var(--cyan),var(--blue),var(--pink));
}

.legal-inline .status{
  margin-top:15px;
  color:#8fe7ff;
  font-weight:700;
}

.footer-links button.legal-link{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#93a1b7;
  font-size:10px;
  cursor:pointer;
}

.consent-legal-link{
  padding:0;
  border:0;
  background:none;
  color:#80eaff;
  font-size:10px;
  text-decoration:underline;
  cursor:pointer;
}

body.legal-open{
  overflow:hidden;
}

@media(max-width:850px){
  .legal-viewer-bar{
    grid-template-columns:1fr 46px;
  }
  .legal-viewer-tabs{
    grid-column:1 / -1;
    grid-row:2;
    justify-content:flex-start;
  }
}

@media(max-width:650px){
  .legal-viewer{
    padding:6px;
  }
  .legal-viewer-shell{
    height:calc(100vh - 12px);
    border-radius:15px;
  }
  .legal-viewer-content{
    padding:25px 14px 55px;
  }
  .legal-inline .card{
    padding:20px 16px;
  }
}


/* ==========================================================
   V17 – ULTRA SHEEN + HELLERER HERO-HINTERGRUND
   ========================================================== */

/* TOP / HERO Hintergrund heller und lebendiger */
.hero-stage-bg{
  opacity:.30 !important;
  filter:saturate(1.22) contrast(1.08) brightness(1.16) !important;
}

.hero::before{
  background:
    linear-gradient(
      90deg,
      rgba(3,5,11,.90) 0%,
      rgba(3,5,11,.70) 40%,
      rgba(3,5,11,.28) 71%,
      rgba(3,5,11,.72) 100%
    ),
    linear-gradient(
      0deg,
      rgba(3,5,11,.84) 0%,
      transparent 42%,
      rgba(3,5,11,.12) 100%
    ) !important;
}

.hero::after{
  opacity:1 !important;
  background:
    radial-gradient(circle at 68% 22%, rgba(90,190,255,.11), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(255,72,201,.08), transparent 18%),
    linear-gradient(115deg,transparent 0 42%,rgba(55,220,255,.045) 46% 47%,transparent 50% 100%),
    linear-gradient(65deg,transparent 0 55%,rgba(255,54,199,.040) 58% 59%,transparent 62% 100%) !important;
}

/* Releases: noch stärkerer Premium-Schleier */
.release-card{
  perspective:1000px;
}

.release-card img{
  transition:
    transform .72s cubic-bezier(.2,.8,.2,1),
    filter .72s ease;
}

.release-card:hover img,
.release-card:focus-visible img{
  transform:scale(1.075);
  filter:saturate(1.22) contrast(1.10) brightness(1.10);
}

/* Breite leuchtende Grundfläche */
.release-card::before{
  top:-42% !important;
  bottom:-42% !important;
  left:-86% !important;
  width:74% !important;
  opacity:0;
  transform:skewX(-22deg) rotate(.2deg);
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(67,228,255,.03) 10%,
      rgba(77,226,255,.16) 22%,
      rgba(255,255,255,.28) 36%,
      rgba(255,255,255,.58) 49%,
      rgba(255,255,255,.34) 56%,
      rgba(255,74,212,.20) 68%,
      rgba(255,255,255,.06) 82%,
      rgba(255,255,255,0) 100%
    ) !important;
  filter:blur(7px) !important;
  mix-blend-mode:screen;
}

/* Scharfe helle Kante */
.release-card::after{
  top:-48% !important;
  bottom:-48% !important;
  left:-48% !important;
  width:12% !important;
  opacity:0;
  transform:skewX(-22deg);
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0),
      rgba(255,255,255,.28) 18%,
      rgba(255,255,255,.95) 44%,
      rgba(150,245,255,1) 50%,
      rgba(255,255,255,1) 56%,
      rgba(255,120,221,.42) 68%,
      rgba(255,255,255,0)
    ) !important;
  box-shadow:
    0 0 26px rgba(87,229,255,.55),
    0 0 54px rgba(255,73,202,.24),
    0 0 80px rgba(255,255,255,.18) !important;
  filter:blur(.4px) !important;
  mix-blend-mode:screen;
}

/* Extra Glow-Layer direkt über dem Bild */
.release-card .release-meta::before{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(99,235,255,.04) 24%,
      rgba(255,255,255,.18) 44%,
      rgba(255,255,255,.24) 50%,
      rgba(255,94,215,.12) 60%,
      rgba(255,255,255,0) 100%
    );
  mix-blend-mode:screen;
  transform:translateX(-34%);
  z-index:-1;
}

.release-card:hover .release-meta::before,
.release-card:focus-visible .release-meta::before{
  animation:metaSweep 1.15s ease forwards;
}

.release-card:hover::before,
.release-card:focus-visible::before{
  animation:ultraVeil 1.18s cubic-bezier(.18,.75,.22,1) forwards !important;
}

.release-card:hover::after,
.release-card:focus-visible::after{
  animation:ultraEdge 1.18s cubic-bezier(.18,.75,.22,1) forwards !important;
}

.release-card:hover,
.release-card:focus-visible{
  box-shadow:
    0 30px 84px rgba(0,0,0,.46),
    0 0 0 1px rgba(79,229,255,.24),
    0 0 36px rgba(52,190,255,.20),
    0 0 56px rgba(255,64,203,.10),
    inset 0 0 24px rgba(255,255,255,.04) !important;
}

@keyframes ultraVeil{
  0%{left:-86%;opacity:0}
  10%{opacity:.58}
  34%{opacity:1}
  72%{opacity:.94}
  100%{left:132%;opacity:0}
}

@keyframes ultraEdge{
  0%{left:-48%;opacity:0}
  12%{opacity:.22}
  38%{opacity:1}
  74%{opacity:.88}
  100%{left:118%;opacity:0}
}

@keyframes metaSweep{
  0%{
    opacity:0;
    transform:translateX(-34%);
  }
  18%{
    opacity:.35;
  }
  46%{
    opacity:.95;
  }
  100%{
    opacity:0;
    transform:translateX(42%);
  }
}


/* ==========================================================
   V18 – CROSS LASER HOVER
   Krasse Laser von links und rechts, die sich über dem Release kreuzen
   ========================================================== */

.release-card{
  overflow:hidden;
  isolation:isolate;
}

.release-card img{
  transition:
    transform .78s cubic-bezier(.2,.8,.2,1),
    filter .78s ease;
}

.release-card:hover img,
.release-card:focus-visible img{
  transform:scale(1.08);
  filter:saturate(1.25) contrast(1.12) brightness(1.12);
}

/* Laser von links */
.release-card::before{
  content:"";
  position:absolute;
  top:-45%;
  left:-88%;
  width:145%;
  height:18%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transform:rotate(19deg);
  transform-origin:center;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(47,229,255,.04) 18%,
      rgba(74,235,255,.18) 28%,
      rgba(255,255,255,.90) 49%,
      rgba(100,241,255,1) 52%,
      rgba(255,255,255,.82) 56%,
      rgba(255,77,209,.26) 70%,
      rgba(255,255,255,0) 100%
    );
  filter:blur(1.2px);
  mix-blend-mode:screen;
  box-shadow:
    0 0 16px rgba(85,230,255,.72),
    0 0 34px rgba(68,221,255,.55),
    0 0 58px rgba(255,64,197,.20);
}

/* Laser von rechts */
.release-card::after{
  content:"";
  position:absolute;
  top:73%;
  right:-88%;
  width:145%;
  height:18%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transform:rotate(-19deg);
  transform-origin:center;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,71,199,.05) 18%,
      rgba(255,71,199,.20) 28%,
      rgba(255,255,255,.92) 49%,
      rgba(114,237,255,1) 52%,
      rgba(255,255,255,.82) 56%,
      rgba(74,226,255,.24) 70%,
      rgba(255,255,255,0) 100%
    );
  filter:blur(1.2px);
  mix-blend-mode:screen;
  box-shadow:
    0 0 16px rgba(255,82,206,.72),
    0 0 34px rgba(255,82,206,.48),
    0 0 58px rgba(76,230,255,.20);
}

/* Kreuzungs-Blitz in der Mitte */
.release-card .release-meta::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:34%;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(126,241,255,.50) 26%, rgba(255,75,205,.22) 48%, rgba(255,255,255,0) 72%);
  filter:blur(4px);
  mix-blend-mode:screen;
}

/* Zusatz-Laserflimmern */
.release-card .release-meta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(63,231,255,.18) 49%, transparent 54%),
    linear-gradient(65deg, transparent 0 44%, rgba(255,75,205,.16) 49%, transparent 54%);
  mix-blend-mode:screen;
}

.release-card:hover::before,
.release-card:focus-visible::before{
  animation:laserLeftCross 1s cubic-bezier(.18,.74,.24,1) forwards !important;
}

.release-card:hover::after,
.release-card:focus-visible::after{
  animation:laserRightCross 1s cubic-bezier(.18,.74,.24,1) forwards !important;
}

.release-card:hover .release-meta::before,
.release-card:focus-visible .release-meta::before{
  animation:laserBurst 1s ease forwards;
}

.release-card:hover .release-meta::after,
.release-card:focus-visible .release-meta::after{
  animation:laserFlicker 1s ease forwards;
}

.release-card:hover,
.release-card:focus-visible{
  box-shadow:
    0 30px 86px rgba(0,0,0,.48),
    0 0 0 1px rgba(86,231,255,.26),
    0 0 34px rgba(61,196,255,.26),
    0 0 62px rgba(255,67,201,.14),
    inset 0 0 28px rgba(255,255,255,.05) !important;
}

.release-meta{
  z-index:4;
}

@keyframes laserLeftCross{
  0%{
    left:-88%;
    top:-45%;
    opacity:0;
  }
  14%{
    opacity:.95;
  }
  44%{
    left:-8%;
    top:20%;
    opacity:1;
  }
  60%{
    left:9%;
    top:34%;
    opacity:1;
  }
  100%{
    left:58%;
    top:84%;
    opacity:0;
  }
}

@keyframes laserRightCross{
  0%{
    right:-88%;
    top:73%;
    opacity:0;
  }
  14%{
    opacity:.95;
  }
  44%{
    right:-8%;
    top:35%;
    opacity:1;
  }
  60%{
    right:9%;
    top:22%;
    opacity:1;
  }
  100%{
    right:58%;
    top:-26%;
    opacity:0;
  }
}

@keyframes laserBurst{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.18);
  }
  38%{
    opacity:.25;
  }
  52%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  70%{
    opacity:.9;
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.35);
  }
}

@keyframes laserFlicker{
  0%{opacity:0}
  28%{opacity:.06}
  48%{opacity:.35}
  56%{opacity:.18}
  64%{opacity:.42}
  78%{opacity:.18}
  100%{opacity:0}
}


/* ==========================================================
   V19 – STREAK VEILS + CENTER BLITZ
   Schleier mit Strichen fliegen von links und rechts ein,
   treffen sich in der Mitte mit Blitz und laufen weiter.
   ========================================================== */

.release-card{
  overflow:hidden;
  isolation:isolate;
}

.release-card img{
  transition:
    transform .76s cubic-bezier(.2,.8,.2,1),
    filter .76s ease !important;
}

.release-card:hover img,
.release-card:focus-visible img{
  transform:scale(1.07) !important;
  filter:saturate(1.22) contrast(1.11) brightness(1.10) !important;
}

/* Linker Schleier mit Strichstruktur */
.release-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-12% auto -12% -72% !important;
  width:56% !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:0 !important;
  transform:skewX(-20deg) !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0) 0 7px,
      rgba(255,255,255,.05) 7px 10px,
      rgba(79,233,255,.26) 10px 13px,
      rgba(255,255,255,.05) 13px 16px,
      rgba(255,255,255,0) 16px 28px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(65,227,255,.07) 18%,
      rgba(99,236,255,.16) 34%,
      rgba(255,255,255,.42) 48%,
      rgba(255,255,255,.56) 52%,
      rgba(255,92,215,.16) 68%,
      rgba(255,255,255,.04) 84%,
      rgba(255,255,255,0) 100%
    ) !important;
  filter:blur(4.6px) !important;
  mix-blend-mode:screen !important;
  box-shadow:
    0 0 18px rgba(75,229,255,.42),
    0 0 40px rgba(75,229,255,.22) !important;
}

/* Rechter Schleier mit Strichstruktur */
.release-card::after{
  content:"" !important;
  position:absolute !important;
  inset:-12% -72% -12% auto !important;
  width:56% !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:0 !important;
  transform:skewX(-20deg) !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0) 0 7px,
      rgba(255,255,255,.05) 7px 10px,
      rgba(255,80,205,.26) 10px 13px,
      rgba(255,255,255,.05) 13px 16px,
      rgba(255,255,255,0) 16px 28px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,70,203,.07) 18%,
      rgba(255,96,214,.16) 34%,
      rgba(255,255,255,.44) 48%,
      rgba(255,255,255,.57) 52%,
      rgba(91,236,255,.16) 68%,
      rgba(255,255,255,.04) 84%,
      rgba(255,255,255,0) 100%
    ) !important;
  filter:blur(4.6px) !important;
  mix-blend-mode:screen !important;
  box-shadow:
    0 0 18px rgba(255,82,207,.42),
    0 0 40px rgba(255,82,207,.22) !important;
}

/* Blitz in der Mitte */
.release-card .release-meta::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:24% !important;
  height:24% !important;
  z-index:-1 !important;
  pointer-events:none !important;
  opacity:0 !important;
  transform:translate(-50%,-50%) scale(.15) !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 16%,
      rgba(143,244,255,.82) 28%,
      rgba(255,72,206,.54) 44%,
      rgba(255,255,255,0) 70%) !important;
  filter:blur(3.5px) !important;
  mix-blend-mode:screen !important;
  box-shadow:
    0 0 28px rgba(255,255,255,.85),
    0 0 52px rgba(94,235,255,.46),
    0 0 72px rgba(255,78,207,.25) !important;
}

/* feine Strahlen nach dem Blitz */
.release-card .release-meta::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  opacity:0 !important;
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,.92) 50%, transparent 53%),
    linear-gradient(0deg, transparent 0 47%, rgba(255,255,255,.50) 50%, transparent 53%),
    linear-gradient(135deg, transparent 0 47%, rgba(105,239,255,.55) 50%, transparent 53%),
    linear-gradient(45deg, transparent 0 47%, rgba(255,82,207,.42) 50%, transparent 53%) !important;
  filter:blur(.9px) !important;
  mix-blend-mode:screen !important;
}

.release-card:hover::before,
.release-card:focus-visible::before{
  animation:veilLeftSweep 1.12s cubic-bezier(.2,.75,.25,1) forwards !important;
}

.release-card:hover::after,
.release-card:focus-visible::after{
  animation:veilRightSweep 1.12s cubic-bezier(.2,.75,.25,1) forwards !important;
}

.release-card:hover .release-meta::before,
.release-card:focus-visible .release-meta::before{
  animation:centerBolt 1.12s ease forwards !important;
}

.release-card:hover .release-meta::after,
.release-card:focus-visible .release-meta::after{
  animation:centerRays 1.12s ease forwards !important;
}

.release-card:hover,
.release-card:focus-visible{
  box-shadow:
    0 30px 86px rgba(0,0,0,.48),
    0 0 0 1px rgba(86,231,255,.24),
    0 0 34px rgba(61,196,255,.20),
    0 0 60px rgba(255,67,201,.12),
    inset 0 0 28px rgba(255,255,255,.05) !important;
}

.release-meta{
  z-index:4 !important;
}

@keyframes veilLeftSweep{
  0%{
    left:-72%;
    opacity:0;
  }
  12%{
    opacity:.78;
  }
  45%{
    left:20%;
    opacity:1;
  }
  52%{
    left:28%;
    opacity:1;
  }
  100%{
    left:112%;
    opacity:0;
  }
}

@keyframes veilRightSweep{
  0%{
    right:-72%;
    opacity:0;
  }
  12%{
    opacity:.78;
  }
  45%{
    right:20%;
    opacity:1;
  }
  52%{
    right:28%;
    opacity:1;
  }
  100%{
    right:112%;
    opacity:0;
  }
}

@keyframes centerBolt{
  0%,36%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.12);
  }
  45%{
    opacity:.55;
    transform:translate(-50%,-50%) scale(.52);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  57%{
    opacity:.95;
    transform:translate(-50%,-50%) scale(1.18);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.72);
  }
}

@keyframes centerRays{
  0%,42%{
    opacity:0;
    transform:scale(.4);
  }
  50%{
    opacity:1;
    transform:scale(1);
  }
  62%{
    opacity:.42;
  }
  100%{
    opacity:0;
    transform:scale(1.28);
  }
}


/* ==========================================================
   V20 – ROBUSTER RELEASE-HOVER-FIX
   Explizite DOM-Ebenen statt ::before/::after
   ========================================================== */

/* Alte Hover-Pseudo-Effekte vollständig deaktivieren */
.release-card::before,
.release-card::after,
.release-card .release-meta::before,
.release-card .release-meta::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}

/* Basis */
.release-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.release-card > img{
  position:relative;
  z-index:1;
  transition:
    transform .72s cubic-bezier(.2,.8,.2,1),
    filter .72s ease !important;
}

.release-card:hover > img,
.release-card:focus-visible > img{
  transform:scale(1.065) !important;
  filter:saturate(1.22) contrast(1.10) brightness(1.10) !important;
}

.release-meta{
  z-index:5 !important;
}

/* FX-Ebene */
.release-fx{
  position:absolute;
  inset:0;
  z-index:4;
  overflow:hidden;
  pointer-events:none;
}

/* Breite Schleier */
.fx-veil{
  position:absolute;
  top:-18%;
  width:46%;
  height:136%;
  opacity:0;
  filter:blur(5px);
  mix-blend-mode:screen;
}

.fx-veil-left{
  left:-52%;
  transform:skewX(-18deg);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      rgba(92,235,255,.08) 9px 12px,
      rgba(255,255,255,.18) 12px 14px,
      transparent 14px 25px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(64,225,255,.12) 24%,
      rgba(255,255,255,.48) 50%,
      rgba(117,239,255,.22) 67%,
      transparent
    );
  box-shadow:
    0 0 26px rgba(64,225,255,.30),
    0 0 60px rgba(64,225,255,.16);
}

.fx-veil-right{
  right:-52%;
  transform:skewX(18deg);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      rgba(255,78,205,.08) 9px 12px,
      rgba(255,255,255,.18) 12px 14px,
      transparent 14px 25px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(255,75,205,.14) 24%,
      rgba(255,255,255,.48) 50%,
      rgba(255,106,217,.22) 67%,
      transparent
    );
  box-shadow:
    0 0 26px rgba(255,74,205,.28),
    0 0 60px rgba(255,74,205,.14);
}

/* Dünne Striche */
.fx-streak{
  position:absolute;
  width:34%;
  height:3px;
  border-radius:999px;
  opacity:0;
  filter:blur(.2px);
  mix-blend-mode:screen;
}

.fx-streak-left{
  left:-40%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(70,229,255,.45),
    #fff 55%,
    rgba(91,239,255,.80),
    transparent
  );
  box-shadow:
    0 0 8px rgba(78,232,255,.75),
    0 0 18px rgba(78,232,255,.48);
}

.fx-streak-right{
  right:-40%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,84,207,.45),
    #fff 55%,
    rgba(255,93,211,.78),
    transparent
  );
  box-shadow:
    0 0 8px rgba(255,82,208,.72),
    0 0 18px rgba(255,82,208,.44);
}

.fx-streak.s1{top:29%}
.fx-streak.s2{top:49%;height:2px}
.fx-streak.s3{top:68%;height:4px}

/* Blitz */
.fx-flash{
  position:absolute;
  left:50%;
  top:50%;
  width:12%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.15);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 16%,
      rgba(130,244,255,.80) 28%,
      rgba(255,77,207,.42) 48%,
      rgba(255,255,255,0) 74%);
  filter:blur(2px);
  mix-blend-mode:screen;
  box-shadow:
    0 0 24px rgba(255,255,255,.95),
    0 0 52px rgba(84,235,255,.55),
    0 0 76px rgba(255,82,207,.26);
}

/* Blitz-Strahlen */
.fx-bolt{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:0;
  transform-origin:50% 0;
  opacity:0;
  background:linear-gradient(#fff,rgba(103,239,255,.85),transparent);
  box-shadow:0 0 10px rgba(255,255,255,.8);
}
.fx-bolt-a{transform:translate(-50%,-50%) rotate(55deg)}
.fx-bolt-b{transform:translate(-50%,-50%) rotate(-58deg)}

/* Animation wird durch JS-Klasse .fx-run gestartet */
.release-card.fx-run .fx-veil-left{
  animation:fxVeilLeft 1.15s cubic-bezier(.18,.72,.22,1) forwards;
}
.release-card.fx-run .fx-veil-right{
  animation:fxVeilRight 1.15s cubic-bezier(.18,.72,.22,1) forwards;
}

.release-card.fx-run .fx-streak-left.s1{animation:fxStreakLeft 1.00s .00s ease forwards}
.release-card.fx-run .fx-streak-left.s2{animation:fxStreakLeft 1.05s .04s ease forwards}
.release-card.fx-run .fx-streak-left.s3{animation:fxStreakLeft 1.10s .08s ease forwards}

.release-card.fx-run .fx-streak-right.s1{animation:fxStreakRight 1.00s .00s ease forwards}
.release-card.fx-run .fx-streak-right.s2{animation:fxStreakRight 1.05s .04s ease forwards}
.release-card.fx-run .fx-streak-right.s3{animation:fxStreakRight 1.10s .08s ease forwards}

.release-card.fx-run .fx-flash{
  animation:fxFlash 1.15s ease forwards;
}
.release-card.fx-run .fx-bolt-a,
.release-card.fx-run .fx-bolt-b{
  animation:fxBolt 1.15s ease forwards;
}

.release-card.fx-run{
  box-shadow:
    0 30px 86px rgba(0,0,0,.48),
    0 0 0 1px rgba(86,231,255,.25),
    0 0 36px rgba(61,196,255,.20),
    0 0 60px rgba(255,67,201,.12),
    inset 0 0 28px rgba(255,255,255,.05) !important;
}

@keyframes fxVeilLeft{
  0%{left:-52%;opacity:0}
  10%{opacity:.75}
  46%{left:27%;opacity:1}
  53%{left:34%;opacity:1}
  100%{left:116%;opacity:0}
}

@keyframes fxVeilRight{
  0%{right:-52%;opacity:0}
  10%{opacity:.75}
  46%{right:27%;opacity:1}
  53%{right:34%;opacity:1}
  100%{right:116%;opacity:0}
}

@keyframes fxStreakLeft{
  0%{left:-40%;opacity:0}
  12%{opacity:1}
  48%{left:33%;opacity:1}
  100%{left:112%;opacity:0}
}

@keyframes fxStreakRight{
  0%{right:-40%;opacity:0}
  12%{opacity:1}
  48%{right:33%;opacity:1}
  100%{right:112%;opacity:0}
}

@keyframes fxFlash{
  0%,39%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.15);
  }
  46%{
    opacity:.65;
    transform:translate(-50%,-50%) scale(.55);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  57%{
    opacity:.90;
    transform:translate(-50%,-50%) scale(1.35);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(2.0);
  }
}

@keyframes fxBolt{
  0%,42%{height:0;opacity:0}
  49%{height:48%;opacity:1}
  61%{height:66%;opacity:.55}
  100%{height:84%;opacity:0}
}


/* ==========================================================
   V21 – PERMANENTER BACKGROUND-FX IM LEGAL VIEWER
   ========================================================== */

.legal-viewer-shell{
  position:relative;
  isolation:isolate;
}

.legal-bg-fx{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
}

.legal-viewer-bar,
.legal-viewer-content{
  position:relative;
  z-index:2;
}

/* leichte zusätzliche Abdunklung für Lesbarkeit */
.legal-bg-fx::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(10,16,34,.18), transparent 35%),
    linear-gradient(180deg, rgba(5,8,18,.18), rgba(5,8,18,.34));
  z-index:1;
}

/* breite Schleier */
.legal-veil{
  position:absolute;
  top:-15%;
  width:42%;
  height:130%;
  opacity:0;
  filter:blur(7px);
  mix-blend-mode:screen;
  z-index:0;
}

.legal-veil-left{
  left:-52%;
  transform:skewX(-18deg);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 10px,
      rgba(92,235,255,.07) 10px 13px,
      rgba(255,255,255,.15) 13px 15px,
      transparent 15px 28px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(63,225,255,.10) 24%,
      rgba(255,255,255,.34) 50%,
      rgba(110,239,255,.18) 67%,
      transparent
    );
  box-shadow:
    0 0 28px rgba(64,225,255,.28),
    0 0 70px rgba(64,225,255,.14);
  animation:legalVeilLeft 5.4s cubic-bezier(.18,.72,.22,1) infinite;
}

.legal-veil-right{
  right:-52%;
  transform:skewX(18deg);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 10px,
      rgba(255,78,205,.07) 10px 13px,
      rgba(255,255,255,.15) 13px 15px,
      transparent 15px 28px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(255,75,205,.11) 24%,
      rgba(255,255,255,.34) 50%,
      rgba(255,106,217,.18) 67%,
      transparent
    );
  box-shadow:
    0 0 28px rgba(255,74,205,.24),
    0 0 70px rgba(255,74,205,.12);
  animation:legalVeilRight 5.4s cubic-bezier(.18,.72,.22,1) infinite;
}

/* zusätzliche Lichtstriche */
.legal-streak{
  position:absolute;
  width:26%;
  height:3px;
  border-radius:999px;
  opacity:0;
  filter:blur(.25px);
  mix-blend-mode:screen;
  z-index:0;
}

.legal-streak-left{
  left:-34%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(70,229,255,.35),
    #fff 55%,
    rgba(91,239,255,.78),
    transparent
  );
  box-shadow:
    0 0 8px rgba(78,232,255,.70),
    0 0 18px rgba(78,232,255,.44);
}

.legal-streak-right{
  right:-34%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,84,207,.35),
    #fff 55%,
    rgba(255,93,211,.72),
    transparent
  );
  box-shadow:
    0 0 8px rgba(255,82,208,.66),
    0 0 18px rgba(255,82,208,.40);
}

.legal-streak.ls1{top:22%; animation:legalStreakLeft 4.9s .00s ease-in-out infinite}
.legal-streak.ls2{top:36%; height:2px; animation:legalStreakLeft 5.1s .18s ease-in-out infinite}
.legal-streak.ls3{top:61%; height:4px; animation:legalStreakLeft 5.3s .34s ease-in-out infinite}
.legal-streak.ls4{top:77%; height:2px; animation:legalStreakLeft 5.0s .12s ease-in-out infinite}

.legal-streak.rs1{top:27%; animation:legalStreakRight 4.9s .00s ease-in-out infinite}
.legal-streak.rs2{top:44%; height:2px; animation:legalStreakRight 5.1s .18s ease-in-out infinite}
.legal-streak.rs3{top:57%; height:4px; animation:legalStreakRight 5.3s .34s ease-in-out infinite}
.legal-streak.rs4{top:73%; height:2px; animation:legalStreakRight 5.0s .12s ease-in-out infinite}

/* Blitz in der Mitte */
.legal-flash{
  position:absolute;
  left:50%;
  top:50%;
  width:10%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.15);
  border-radius:50%;
  opacity:0;
  z-index:0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 16%,
      rgba(130,244,255,.72) 28%,
      rgba(255,77,207,.34) 48%,
      rgba(255,255,255,0) 74%);
  filter:blur(2px);
  mix-blend-mode:screen;
  box-shadow:
    0 0 22px rgba(255,255,255,.90),
    0 0 48px rgba(84,235,255,.48),
    0 0 70px rgba(255,82,207,.22);
  animation:legalFlash 5.4s ease-in-out infinite;
}

.legal-bolt{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:0;
  transform-origin:50% 0;
  opacity:0;
  z-index:0;
  background:linear-gradient(#fff,rgba(103,239,255,.82),transparent);
  box-shadow:0 0 10px rgba(255,255,255,.75);
  animation:legalBolt 5.4s ease-in-out infinite;
}
.legal-bolt-a{transform:translate(-50%,-50%) rotate(55deg)}
.legal-bolt-b{transform:translate(-50%,-50%) rotate(-58deg)}
.legal-bolt-c{transform:translate(-50%,-50%) rotate(0deg)}

@keyframes legalVeilLeft{
  0%{left:-52%;opacity:0}
  8%{opacity:.08}
  14%{opacity:.38}
  45%{left:28%;opacity:.62}
  50%{left:34%;opacity:.68}
  100%{left:114%;opacity:0}
}

@keyframes legalVeilRight{
  0%{right:-52%;opacity:0}
  8%{opacity:.08}
  14%{opacity:.38}
  45%{right:28%;opacity:.62}
  50%{right:34%;opacity:.68}
  100%{right:114%;opacity:0}
}

@keyframes legalStreakLeft{
  0%{left:-34%;opacity:0}
  10%{opacity:.0}
  16%{opacity:.52}
  46%{left:33%;opacity:.90}
  100%{left:108%;opacity:0}
}

@keyframes legalStreakRight{
  0%{right:-34%;opacity:0}
  10%{opacity:.0}
  16%{opacity:.52}
  46%{right:33%;opacity:.90}
  100%{right:108%;opacity:0}
}

@keyframes legalFlash{
  0%,40%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.14);
  }
  46%{
    opacity:.44;
    transform:translate(-50%,-50%) scale(.48);
  }
  50%{
    opacity:.92;
    transform:translate(-50%,-50%) scale(.96);
  }
  56%{
    opacity:.70;
    transform:translate(-50%,-50%) scale(1.24);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.85);
  }
}

@keyframes legalBolt{
  0%,42%{height:0;opacity:0}
  49%{height:38%;opacity:.78}
  57%{height:56%;opacity:.46}
  100%{height:74%;opacity:0}
}


/* ==========================================================
   V22 – PERMANENTER BACKGROUND-FX AUF DER HAUPTSEITE
   ========================================================== */

body{
  position:relative;
  isolation:isolate;
}

/* Alle Hauptinhalte über den FX-Layer legen */
.site-header,
main,
.footer,
.consent-banner,
.legal-viewer{
  position:relative;
  z-index:2;
}

/* Globaler Hintergrundeffekt */
.main-bg-fx{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

/* Lesbarkeit sichern */
.main-bg-fx::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(8,14,30,.10), transparent 34%),
    linear-gradient(180deg, rgba(3,5,11,.06), rgba(3,5,11,.10));
  z-index:1;
}

/* breite Schleier */
.main-veil{
  position:absolute;
  top:-18%;
  width:42%;
  height:136%;
  opacity:0;
  filter:blur(8px);
  mix-blend-mode:screen;
  z-index:0;
}

.main-veil-left{
  left:-52%;
  transform:skewX(-18deg);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 10px,
      rgba(92,235,255,.06) 10px 13px,
      rgba(255,255,255,.12) 13px 15px,
      transparent 15px 28px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(63,225,255,.09) 24%,
      rgba(255,255,255,.26) 50%,
      rgba(110,239,255,.14) 67%,
      transparent
    );
  box-shadow:
    0 0 32px rgba(64,225,255,.22),
    0 0 78px rgba(64,225,255,.10);
  animation:mainVeilLeft 6.0s cubic-bezier(.18,.72,.22,1) infinite;
}

.main-veil-right{
  right:-52%;
  transform:skewX(18deg);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 10px,
      rgba(255,78,205,.06) 10px 13px,
      rgba(255,255,255,.12) 13px 15px,
      transparent 15px 28px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(255,75,205,.10) 24%,
      rgba(255,255,255,.26) 50%,
      rgba(255,106,217,.14) 67%,
      transparent
    );
  box-shadow:
    0 0 32px rgba(255,74,205,.20),
    0 0 78px rgba(255,74,205,.10);
  animation:mainVeilRight 6.0s cubic-bezier(.18,.72,.22,1) infinite;
}

/* zusätzliche Striche */
.main-streak{
  position:absolute;
  width:24%;
  height:3px;
  border-radius:999px;
  opacity:0;
  filter:blur(.25px);
  mix-blend-mode:screen;
  z-index:0;
}

.main-streak-left{
  left:-30%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(70,229,255,.28),
    #fff 55%,
    rgba(91,239,255,.60),
    transparent
  );
  box-shadow:
    0 0 8px rgba(78,232,255,.58),
    0 0 16px rgba(78,232,255,.30);
}

.main-streak-right{
  right:-30%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,84,207,.28),
    #fff 55%,
    rgba(255,93,211,.56),
    transparent
  );
  box-shadow:
    0 0 8px rgba(255,82,208,.54),
    0 0 16px rgba(255,82,208,.28);
}

.main-streak.ms1{top:18%; animation:mainStreakLeft 5.5s .00s ease-in-out infinite}
.main-streak.ms2{top:33%; height:2px; animation:mainStreakLeft 5.8s .16s ease-in-out infinite}
.main-streak.ms3{top:59%; height:4px; animation:mainStreakLeft 6.1s .28s ease-in-out infinite}
.main-streak.ms4{top:78%; height:2px; animation:mainStreakLeft 5.7s .11s ease-in-out infinite}

.main-streak.mr1{top:24%; animation:mainStreakRight 5.5s .00s ease-in-out infinite}
.main-streak.mr2{top:41%; height:2px; animation:mainStreakRight 5.8s .16s ease-in-out infinite}
.main-streak.mr3{top:56%; height:4px; animation:mainStreakRight 6.1s .28s ease-in-out infinite}
.main-streak.mr4{top:72%; height:2px; animation:mainStreakRight 5.7s .11s ease-in-out infinite}

/* Blitz in der Mitte */
.main-flash{
  position:absolute;
  left:50%;
  top:50%;
  width:8%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.15);
  border-radius:50%;
  opacity:0;
  z-index:0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.92) 16%,
      rgba(130,244,255,.54) 28%,
      rgba(255,77,207,.24) 48%,
      rgba(255,255,255,0) 74%);
  filter:blur(2px);
  mix-blend-mode:screen;
  box-shadow:
    0 0 20px rgba(255,255,255,.70),
    0 0 42px rgba(84,235,255,.32),
    0 0 62px rgba(255,82,207,.14);
  animation:mainFlash 6.0s ease-in-out infinite;
}

.main-bolt{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:0;
  transform-origin:50% 0;
  opacity:0;
  z-index:0;
  background:linear-gradient(#fff,rgba(103,239,255,.60),transparent);
  box-shadow:0 0 10px rgba(255,255,255,.55);
  animation:mainBolt 6.0s ease-in-out infinite;
}
.main-bolt-a{transform:translate(-50%,-50%) rotate(55deg)}
.main-bolt-b{transform:translate(-50%,-50%) rotate(-58deg)}
.main-bolt-c{transform:translate(-50%,-50%) rotate(0deg)}

@keyframes mainVeilLeft{
  0%{left:-52%;opacity:0}
  10%{opacity:.06}
  16%{opacity:.24}
  45%{left:28%;opacity:.44}
  50%{left:34%;opacity:.50}
  100%{left:114%;opacity:0}
}

@keyframes mainVeilRight{
  0%{right:-52%;opacity:0}
  10%{opacity:.06}
  16%{opacity:.24}
  45%{right:28%;opacity:.44}
  50%{right:34%;opacity:.50}
  100%{right:114%;opacity:0}
}

@keyframes mainStreakLeft{
  0%{left:-30%;opacity:0}
  10%{opacity:0}
  18%{opacity:.34}
  46%{left:33%;opacity:.65}
  100%{left:106%;opacity:0}
}

@keyframes mainStreakRight{
  0%{right:-30%;opacity:0}
  10%{opacity:0}
  18%{opacity:.34}
  46%{right:33%;opacity:.65}
  100%{right:106%;opacity:0}
}

@keyframes mainFlash{
  0%,40%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.14);
  }
  46%{
    opacity:.24;
    transform:translate(-50%,-50%) scale(.44);
  }
  50%{
    opacity:.58;
    transform:translate(-50%,-50%) scale(.90);
  }
  56%{
    opacity:.42;
    transform:translate(-50%,-50%) scale(1.18);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.70);
  }
}

@keyframes mainBolt{
  0%,42%{height:0;opacity:0}
  49%{height:34%;opacity:.52}
  57%{height:52%;opacity:.26}
  100%{height:70%;opacity:0}
}


/* ==========================================================
   V23 – DATENSCHUTZHINWEIS OBEN AUF DER HOMEPAGE
   ========================================================== */

/* Banner nicht mehr unten, sondern oben über dem Hero-Bild */
.consent-banner{
  position:fixed !important;
  top:96px !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  width:min(1180px,calc(100% - 34px)) !important;
  z-index:4200 !important;
  border:1px solid rgba(78,224,255,.30) !important;
  background:
    linear-gradient(100deg,rgba(5,10,24,.96),rgba(15,9,28,.95),rgba(23,7,25,.95)) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 34px rgba(65,210,255,.10) !important;
  backdrop-filter:blur(18px) !important;
}

/* damit das Banner optisch in den TOP/Hero gehört */
.consent-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(62,226,255,.04),transparent 40%,rgba(255,64,203,.045));
}

/* Inhalt über dem Effekt halten */
.consent-banner > *{
  position:relative;
  z-index:1;
}

/* auf kleineren Geräten direkt unter den Header */
@media(max-width:650px){
  .consent-banner{
    top:80px !important;
    width:calc(100% - 16px) !important;
    max-height:calc(100vh - 92px) !important;
  }
}


/* ==========================================================
   V24 – FOOTER LEGAL LINKS FIX
   ========================================================== */

/* Der Legal-Viewer muss als echtes Vollbild-Overlay arbeiten.
   Diese Regel überschreibt die globale V22-Hintergrundregel. */
.legal-viewer{
  position:fixed !important;
  inset:0 !important;
  z-index:5000 !important;
}

/* Footer-Links eindeutig klickbar */
.footer-links{
  position:relative;
  z-index:5;
}

.footer-links .legal-link{
  position:relative;
  z-index:6;
  pointer-events:auto;
}

/* Der globale Hintergrundeffekt darf niemals Mausklicks abfangen */
.main-bg-fx,
.main-bg-fx *,
.legal-bg-fx,
.legal-bg-fx *{
  pointer-events:none !important;
}