: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;
}

/* 🔥 WICHTIG: FLEX AUTO HEIGHT */
.menu-tile{
flex:1; /* verteilt sich automatisch */
min-height:60px; /* verhindert zu klein werden */

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:var(--text-muted);
border-bottom:1px solid rgba(255,255,255,.06);

transition:all .25s ease;
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;
margin-right:35px;
}

/* 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;
}
	} 
.cart-flyout{
position:fixed;
top:0;
right:0;
width:100%;
max-width:420px;
height:100vh;
background:#0b0b0b;
padding:22px;
box-shadow:-20px 0 80px rgba(0,0,0,.9);

transform:translateX(100%);
transition:.35s ease;

z-index:20000;
overflow-y:auto;
}

/* MOBILE FULLSCREEN */
@media (max-width:600px){

.cart-flyout{
width:100%;
max-width:100%;
padding:18px;
border-radius:0;
}

}

/* SHOW */
.cart-flyout.show{
transform:translateX(0);
}

/* BACKDROP */
.cart-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);

opacity:0;
pointer-events:none;

transition:.25s;

z-index:19999;
}

.cart-backdrop.show{
opacity:1;
pointer-events:auto;
}

/* CART BUTTON */
.cart-btn{
width:46px;
height:46px;
border-radius:50%;
background:rgba(255,80,0,.18);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:20px;
position:relative;
transition:.25s;
}

.cart-btn:hover{
background:#ff4d00;
transform:scale(1.05);
}

/* COUNT */
.cart-count{
position:absolute;
top:-6px;
right:-6px;
background:#ff4d00;
min-width:20px;
height:20px;
padding:0 6px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:700;
}

/* ITEMS */
.cart-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.08);
gap:10px;
}

.cart-info{
flex:1;
}

.cart-info strong{
font-size:14px;
display:block;
}

.cart-price{
opacity:.7;
font-size:12px;
}

/* CONTROLS */
.cart-controls{
display:flex;
align-items:center;
gap:6px;
}

.cart-controls button{
width:30px;
height:30px;
border:none;
border-radius:6px;
background:#222;
color:#fff;
cursor:pointer;
}

.cart-remove{
background:#330000;
color:#ff4d00;
}

/* SUMMARY */
.cart-summary{
margin-top:25px;
}

.cart-row{
display:flex;
justify-content:space-between;
margin-bottom:6px;
}

.cart-row.small{
opacity:.7;
font-size:13px;
}

.cart-row.total{
font-size:18px;
font-weight:700;
margin-top:10px;
}

/* CTA */
.checkout-btn{
display:block;
margin-top:25px;
width:100%;
text-align:center;
padding:16px;
background:linear-gradient(90deg,#ff4d00,#ff9000);
border-radius:10px;
font-weight:700;
text-decoration:none;
color:#fff;
transition:.2s;
}

.checkout-btn:hover{
transform:translateY(-1px);
box-shadow:0 6px 20px rgba(255,77,0,.3);
}

.cart-flyout{
touch-action:pan-y;
}
	
@media (max-width:600px){

.cart-summary{
position:sticky;
bottom:0;
background:#0b0b0b;
padding-top:15px;
}

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

.account-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;
}

.account-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;
}

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

.account-tile:hover .account-hover{
opacity:1;
transform:translateX(0);
pointer-events:auto;
}
.avatar-menu{
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;
border:2px solid rgba(255,255,255,.2);
}
/* ACCOUNT SUBMENU */

.account-submenu{
height:0;
overflow:hidden;
transition:height .3s ease;
}

.account-submenu.open{
height:auto;
}

.menu-tile.sub{
background:rgba(255,255,255,.02);
font-size:13px;
padding-left:10px;
opacity:.9;
}

.menu-tile.sub:hover{
background:linear-gradient(180deg,#ff6a00,#ff2a00);
opacity:1;
}

/* optional: Pfeil Animation */

.account-toggle{
cursor:pointer;
}

.account-toggle::after{
content:"▾";
margin-left:auto;
font-size:14px;
opacity:.6;
transition:.2s;
}

.account-toggle.open::after{
transform:rotate(180deg);
}
.cart-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.cart-title{
font-size:16px;
letter-spacing:.12em;
text-transform:uppercase;
color:#fff;
}

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

.cart-close:hover{
background:#ff4d00;
transform:rotate(90deg);
}
@media (max-width:600px){

.cart-close{
width:42px;
height:42px;
font-size:20px;
}

.cart-title{
font-size:14px;
}

}
.avatar-initials{
width:36px;
height:36px;
border-radius:50%;

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

background:#ff4d00;
color:#fff;

font-weight:700;
font-size:14px;

border:2px solid rgba(255,255,255,.2);
}