:root{
  --bg:#0a0a0a; --txt:#f3f3f3; --muted:#bcbcbc; --card:rgba(255,255,255,.05);
  --brd:rgba(255,255,255,.10); --accent:#e11d48; --accent-2:#f43f5e;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:url("media/stage-bg.png") center center / cover  fixed;color:var(--txt)}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:url("media/stage-bg.png") center center / cover  fixed;color:var(--txt)}
a{color:inherit;text-decoration:none}
/* Top info bar */
.bar{background:linear-gradient(90deg,#c026d3,#db2777,#e11d48);color:#fff;text-align:center;padding:10px 14px;font-size:14px;position:sticky;top:0;z-index:80}
/* Header navigation */
.site-header {
  position:sticky;
  top:0;
  z-index:70;
  background:transparent;
  border-bottom:1px solid transparent; /* optional: ganz entfernen */
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
}
.nav-links a,
.brand img {
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.brand img{width:280px;height:160px;object-fit:contain}
.brand span{display:none}
.nav{display:flex;align-items:center;gap:12px}
.burger{display:none;border:1px solid var(--brd);background:var(--card);padding:8px;border-radius:10px}
.burger span{display:block;width:20px;height:2px;background:#dcdcdc;margin:4px 0;transition:transform .2s ease, opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-links{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav-links li{display:flex}
.nav-links li.sep{width:1px;background:var(--brd);margin:0 8px}
.nav-links a{padding:10px 12px;border-radius:10px;color:#dcdcdc;font-size:14px}
.nav-links a:hover{background:var(--card)}
.nav-links a.active{background:var(--accent);color:#fff}
/* Content */
.content{max-width:1200px;margin:0 auto;padding:24px 16px}
.hero{position:relative;overflow:hidden;margin-top:8px;}

.hero-inner{position:relative;padding:48px 0;text-align:center;z-index:1;}
h1{font-size:42px;margin:0;font-weight:900;letter-spacing:.5px}
h2{font-size:28px;margin:0 0 8px}
p.muted{color:#cfcfcf;margin:6px 0 0}
.accent{color:#fb7185}
.chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--brd);background:var(--card);backdrop-filter:blur(6px);padding:8px 14px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin:12px 0 12px}
.cta-row{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{border-radius:14px;padding:10px 16px;font-weight:600;border:1px solid var(--brd);background:transparent;cursor:pointer}
.btn.primary{background:var(--accent);border-color:transparent;box-shadow:0 10px 30px rgba(225,29,72,.3)}
.btn.primary:hover{background:var(--accent-2)}
section{padding:28px 0}
.grid{display:grid;gap:16px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.m-0{margin:0}.w-max{width:max-content}
.list-none{list-style:none;padding-left:0}
.card{border:1px solid var(--brd);background:rgba(0,0,0,.5);border-radius:18px;padding:20px}
ul.clean{margin:12px 0 0;padding-left:18px;color:#cfcfcf}
.media-box{background:rgba(0,0,0,.5);border:1px solid var(--brd);border-radius:14px;padding:14px;text-align:center}
.square-icon{width:260px;height:130px;margin:0 auto 12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}
.square-icon img{width:240px;height:110px;object-fit:contain}
.small{font-size:13px;color:#b5b5b5}
.footer{border-top:1px solid var(--brd);margin-top:20px;padding:24px 0}
.link{text-decoration:underline;text-underline-offset:3px}
.divider{height:1px;background:var(--brd);margin:16px 0}
/* Responsive */
@media(min-width:820px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .brand img{width:120px;height:44px}
  .burger{display:block}
  .nav-links{position:fixed;top:96px;right:16px;left:16px;background:rgba(15,15,15,.98);border:1px solid var(--brd);border-radius:16px;padding:10px;flex-direction:column;gap:4px;display:none}
  .nav-links.open{display:flex}
  .nav-links li.sep{display:none}
  .content{padding-top:18px}
}


/* Card hover lift + glow */
.card{
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Media box subtle pulse on hover */
.media-box{ transition: transform .3s ease, box-shadow .3s ease }
.media-box:hover{ transform: translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.35) }

/* Buttons: glow + ripple */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: radial-gradient(40% 40% at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.14), transparent 60%);
  opacity:0; transition: opacity .25s ease;
  pointer-events:none; z-index:-1;
}
.btn:hover::after{ opacity:1 }
.btn:active{ transform: translateY(1px) }

/* Primary button stronger glow */
.btn.primary{ box-shadow: 0 10px 30px rgba(225,29,72,.35), 0 0 0 1px rgba(255,255,255,.06) inset }
.btn.primary:hover{ box-shadow: 0 16px 42px rgba(244,63,94,.45), 0 0 0 1px rgba(255,255,255,.08) inset }

/* Interactive link underline */
a:not(.btn):not(.brand) {
  background: linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
  transition: background-size .25s ease;
}
a:not(.btn):not(.brand):hover{ background-size: 100% 2px }

/* Hero parallax depth */
.hero .hero-inner{position:relative;padding:48px 0;text-align:center;z-index:1;}
@media (min-width: 720px){
  .hero .parallax {
    transform: translateY(var(--pyo,0px));
    transition: transform .12s ease-out;
    will-change: transform;
  }
}

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(12px) scale(.98); transition: opacity .6s ease, transform .6s ease }
.reveal.visible{ opacity:1; transform: translateY(0) scale(1) }

/* Custom cursor spotlight (very light) */
html{ --mx:50vw; --my:50vh }
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:url("media/stage-bg.png") center center / cover no-repeat fixed;color:var(--txt)}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(240px 240px at var(--mx) var(--my), rgba(255,255,255,.05), transparent 60%);
  mix-blend-mode: soft-light;
  z-index:5;
}

/* Audio player fit */
audio{ width:100% }
.square-icon{ transition: transform .3s ease }
.media-box:hover .square-icon{ transform: scale(1.03) }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important }
  body::before, body::after{ display:none }
}

/* === Hero background override (added 2025-10-04) === */
.hero{position:relative;overflow:hidden;margin-top:8px;}

.hero .hero-inner{position:relative;padding:48px 0;text-align:center;z-index:1;}