:root{
--header-height:80px;
--accent:#ff4d00;
--bg:#050509;
--text:#ffffff;
--text-muted:#aaa;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
font-family:Lato,sans-serif;
background:#050509;
color:#fff;
padding-left:150px;
}

/* HEADER */

.site-header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background:rgba(5,5,9,.92);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.08);
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
position:relative; /* ← das ist wichtig */
}

.logo-center{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}

.logo-center img{
height:110px;
}

/* SIDEBAR */

.side-menu{
position:fixed;
left:0;
top:var(--header-height);
height:calc(100vh - var(--header-height));
width:150px;
display:flex;
flex-direction:column;
background:rgba(5,5,9,.96);
border-right:1px solid rgba(255,255,255,.06);
z-index:9998;
overflow:visible;
}

/* TILE */

.menu-tile{
height:90px;
flex-shrink:0;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;

text-transform:uppercase;
letter-spacing:.14em;
font-size:14px;
font-weight:600;

color:#aaa;

border-bottom:1px solid rgba(255,255,255,.06);

transition:.25s;
text-decoration:none;
}

.menu-tile:hover{
background:linear-gradient(180deg,#ff6a00,#ff2a00);
color:#fff;
box-shadow:inset 0 0 20px rgba(255,80,0,.4),0 0 15px rgba(255,60,0,.3);
transform:translateX(6px);
}

.menu-icon{
font-size:22px;
}

/* CONTENT */

#page-content{
margin-top:0px;
min-height:calc(100vh - 80px);
position:relative;
transition:opacity .35s ease, transform .35s ease;
}

/* LOADER */

#page-loader{
position:fixed;
inset:0;
background:rgba(5,5,9,.95);
display:flex;
align-items:center;
justify-content:center;
z-index:9997;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}

#page-loader.active{
opacity:1;
pointer-events:auto;
}

.loader{
width:60px;
height:60px;
border-radius:50%;
border:4px solid rgba(255,255,255,.1);
border-top:4px solid var(--accent);
animation:spin 1s linear infinite;
}

@keyframes spin{
to{transform:rotate(360deg);}
}


/* Layout */

body{
background:#050509;
color:#fff;
padding-left:150px;
overflow-x:hidden;
}

/* HEADER */

.site-header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background:rgba(5,5,9,.92);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.08);
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
}

.logo-center{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}

.logo-center img{
height:110px;
}

/* SIDEBAR */

.side-menu{
position:fixed;
left:0;
top:80px;
height:calc(100vh - 80px);
width:150px;
display:flex;
flex-direction:column;
background:rgba(5,5,9,.96);
border-right:1px solid rgba(255,255,255,.06);
z-index:9998;
}

.menu-tile{
height:calc((100vh - 80px)/8);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
text-transform:uppercase;
letter-spacing:.14em;
font-size:14px;
font-weight:600;
color:#aaa;
border-bottom:1px solid rgba(255,255,255,.06);
transition:.25s;
text-decoration:none;
}

.menu-tile.active{
background:linear-gradient(180deg,#ff6a00,#ff2a00);
color:#fff;
}

.menu-tile:hover{
transform:translateX(6px);
background:linear-gradient(180deg,#ff6a00,#ff2a00);
color:#fff;
}

.menu-icon{
font-size:22px;
}

/* CONTENT */

#page-content{
padding-top:80px;
min-height:100vh;
position:relative;
transition:opacity .35s ease, transform .35s ease;
}

.page-enter{
opacity:0;
transform:translateY(40px);
}

.page-enter-active{
opacity:1;
transform:translateY(0);
}

/* LOADER */

#page-loader{
position:fixed;
inset:0;
background:rgba(5,5,9,.95);
display:flex;
align-items:center;
justify-content:center;
z-index:9997;
opacity:0;
pointer-events:none;
transition:.3s;
}

#page-loader.active{
opacity:1;
pointer-events:auto;
}

.loader{
width:60px;
height:60px;
border-radius:50%;
border:4px solid rgba(255,255,255,.1);
border-top:4px solid #ff4d00;
animation:spin 1s linear infinite;
}

@keyframes spin{
to{transform:rotate(360deg);}
}
/* LOGIN BUTTON */

.header-actions{
position:absolute;
right:30px;
top:50%;
transform:translateY(-50%);
display:flex;
align-items:center;
gap:20px;
}

.login-btn{
padding:8px 16px;
border-radius:6px;
border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.05);
color:#fff;
text-decoration:none;
font-size:13px;
letter-spacing:.1em;
text-transform:uppercase;
transition:.25s;
}

.login-btn:hover{
background:#ff4d00;
border-color:#ff4d00;
color:#fff;
}
	/* RADIO PLAYER */

#globalPlayer{

display:none;
align-items:center;
gap:18px;

position:fixed;

top:40px;
right:30px;

transform:translateY(-50%);

z-index:9999;

}

/* PLAY BUTTON */

#radioToggle{
width:38px;
height:38px;
border-radius:50%;
border:none;
background:#ff4d00;
color:#fff;
font-size:18px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}

#radioToggle:hover{
background:#ff6a00;
transform:scale(1.08);
}

/* RADIO TITLE */

#radioTitle{
font-size:12px;
letter-spacing:.18em;
color:#ccc;
white-space:nowrap;
}

/* WAVEFORM */

#radioWave{
display:flex;
gap:3px;
height:18px;
align-items:flex-end;
}

#radioWave span{
width:3px;
height:6px;
background:linear-gradient(#ff4d00,#ff9a00);
border-radius:2px;
opacity:.85;
}

#radioWave.active span{
animation:waveHeader 1s infinite ease-in-out;
}

#radioWave span:nth-child(1){animation-delay:.1s}
#radioWave span:nth-child(2){animation-delay:.2s}
#radioWave span:nth-child(3){animation-delay:.3s}
#radioWave span:nth-child(4){animation-delay:.4s}
#radioWave span:nth-child(5){animation-delay:.5s}
#radioWave span:nth-child(6){animation-delay:.6s}
#radioWave span:nth-child(7){animation-delay:.7s}
#radioWave span:nth-child(8){animation-delay:.8s}
#radioWave span:nth-child(9){animation-delay:.9s}
#radioWave span:nth-child(10){animation-delay:1s}

@keyframes waveHeader{
0%{height:6px}
50%{height:18px}
100%{height:6px}
}
	/* Ticket Hover Menü */

.ticket-tile{
position:relative;
cursor:pointer;
}

.ticket-hover{
position:absolute;
left:100%;
top:0;
height:100%;
background:#0b0b11;
display:flex;
align-items:center;
gap:12px;
padding:0 16px;
border-left:2px solid #ff4d00;
opacity:0;
transform:translateX(-10px);
pointer-events:none;
transition:.25s ease;
white-space:nowrap;
}

.ticket-hover a{
color:#fff;
text-decoration:none;
font-size:13px;
letter-spacing:.1em;
padding:6px 10px;
border-radius:4px;
border:1px solid rgba(255,255,255,.15);
transition:.2s;
}

.ticket-hover a:hover{
background:#ff4d00;
border-color:#ff4d00;
}

.ticket-tile:hover .ticket-hover{
opacity:1;
transform:translateX(0);
pointer-events:auto;
}
	.menu-icon-svg{
width:24px;
height:24px;
stroke:#aaa;
transition:.25s;
}

.menu-tile:hover .menu-icon-svg{
stroke:#fff;
transform:scale(1.1);
}
/* MOBILE MENU BUTTON */

.mobile-menu-toggle{
display:none;
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
font-size:26px;
cursor:pointer;
z-index:10000;
}

/* TABLET */

@media (max-width:1100px){

body{
padding-left:90px;
}

.side-menu{
width:90px;
}

.menu-tile span{
display:none;
}

.menu-icon-svg{
width:28px;
height:28px;
}

}

/* MOBILE */

@media (max-width:768px){

body{
padding-left:0;
}

.mobile-menu-toggle{
display:block;
position:absolute;
left:16px;          /* Abstand vom linken Bildschirmrand */
top:50%;
transform:translateY(-50%);
font-size:28px;
cursor:pointer;
z-index:10001;
}

.side-menu{
left:-220px;
width:220px;
transition:0.3s;
}

.side-menu.open{
left:0;
}

.menu-tile span{
display:block;
}

.menu-tile{
flex-direction:row;
justify-content:flex-start;
padding-left:20px;
gap:12px;
height:60px;
}
	} 
/* OVERLAY WINDOW */

#site-overlay{
position:fixed;
right:20px;
bottom:20px;
width:320px;
max-width:90vw;

background:rgba(10,10,16,.95);
border:1px solid rgba(255,255,255,.1);
border-radius:12px;

box-shadow:
0 10px 30px rgba(0,0,0,.6),
0 0 20px rgba(255,80,0,.15);

backdrop-filter:blur(12px);

z-index:9996;

opacity:0;
transform:translateY(20px);
pointer-events:none;

transition:.45s ease;
}

/* sichtbar */

#site-overlay.show{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

/* close button */

#overlayClose{
position:absolute;
right:10px;
top:8px;
font-size:14px;
cursor:pointer;
opacity:.7;
}

#overlayClose:hover{
opacity:1;
}



@media (max-width:768px){

#globalPlayer{

display:none;

position:fixed;
bottom:0;
left:0;

top:auto;
right:auto;

transform:none;

width:100%;
height:64px;

background:rgba(5,5,9,.96);
backdrop-filter:blur(10px);

border-top:1px solid rgba(255,255,255,.08);

align-items:center;
justify-content:center;

z-index:10000;

}

}

/* damit Content nicht darunter liegt */

body{
padding-bottom:80px;
}

}
@media (max-width:768px){

.ticket-hover{

position:static;
flex-direction:column;

height:auto;
width:100%;

padding:10px 20px;

border:none;

opacity:1;
transform:none;

display:none;

}

.ticket-tile.open .ticket-hover{
display:flex;
}

.ticket-hover a{
width:100%;
text-align:left;
}

}

.side-menu.open{
box-shadow:0 0 40px rgba(0,0,0,.8);
}

/* CONSENT OVERLAY */

#consent-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
backdrop-filter:blur(4px);
z-index:100000;
display:flex;
align-items:flex-end;
justify-content:center;
padding:20px;
}

#consent-overlay.hidden{
display:none;
}

.consent-box{
width:min(860px, 100%);
background:rgba(10,10,16,.98);
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,.5);
padding:24px;
color:#fff;
}

.consent-title{
font-size:24px;
font-weight:700;
margin-bottom:12px;
}

.consent-text{
font-size:15px;
line-height:1.65;
color:#c7c7c7;
margin-bottom:18px;
}

.consent-options{
display:grid;
grid-template-columns:1fr;
gap:12px;
margin-bottom:18px;
}

.consent-option{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
background:rgba(255,255,255,.03);
}

.consent-option input{
margin-top:3px;
accent-color:#ff4d00;
}

.consent-option strong{
display:block;
font-size:15px;
margin-bottom:4px;
}

.consent-option p{
margin:0;
font-size:13px;
line-height:1.5;
color:#aaa;
}

.consent-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.consent-btn{
padding:12px 18px;
border-radius:10px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.05);
color:#fff;
cursor:pointer;
font-size:13px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
transition:.25s;
}

.consent-btn:hover{
transform:translateY(-1px);
}

.consent-btn.primary{
background:#ff4d00;
border-color:#ff4d00;
}

.consent-btn.primary:hover{
background:#ff6a00;
border-color:#ff6a00;
}

.consent-links{
margin-top:14px;
font-size:12px;
color:#999;
}

.consent-links a{
color:#ff8a4d;
text-decoration:none;
}

.consent-links a:hover{
text-decoration:underline;
}

@media (max-width:768px){
  .consent-box{
    padding:18px;
    border-radius:14px;
  }

  .consent-title{
    font-size:20px;
  }

  .consent-actions{
    flex-direction:column;
  }

  .consent-btn{
    width:100%;
  }
}