:root{--bg:#08090b;--card:#121419;--text:#fff;--muted:#9ca3af;--a:#ff6b35;--b:#ff9f1c;--border:rgba(255,255,255,.1)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 15% 10%,rgba(255,107,53,.16),transparent 28%),var(--bg)}

.app{width:min(1100px,calc(100% - 32px));margin:50px auto}.head{text-align:center;margin-top:81px;margin-bottom:35px}.logo{font-size:clamp(3rem,8vw,5rem);font-weight:900;letter-spacing:.12em}.sub{color:var(--muted);letter-spacing:.2em;font-size:.8rem}
.player{display:grid;grid-template-columns:340px 1fr;gap:32px;padding:28px;background:var(--card);border:1px solid var(--border);border-radius:28px}
.now{min-height:420px;border-radius:22px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,var(--a),var(--b));position:relative;overflow:hidden}.now:before{content:"♫";position:absolute;right:-10px;top:-70px;font-size:17rem;opacity:.13}.badge{font-size:.72rem;letter-spacing:.15em;font-weight:bold}.title{font-size:2rem;font-weight:800;line-height:1.05;margin-top:10px}.artist{margin-top:9px}
h2{margin:0 0 14px}.tracks{border-top:1px solid var(--border)}.track{width:100%;display:grid;grid-template-columns:45px 1fr auto;gap:14px;align-items:center;padding:15px 10px;border:0;border-bottom:1px solid var(--border);background:transparent;color:white;text-align:left;cursor:pointer}.track:hover,.track.active{background:rgba(255,255,255,.06)}.track.active{border-left:3px solid var(--a)}.number,.track-artist{color:var(--muted)}.track-title{font-weight:bold}.track-artist{display:block;font-size:.85rem;margin-top:3px}
.controls{padding-top:24px}.time{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.75rem}input[type=range]{width:100%;accent-color:var(--a)}.buttons{display:flex;justify-content:center;align-items:center;gap:22px;margin:18px 0}.control{border:0;background:transparent;color:white;font-size:1.4rem;width:46px;height:46px;border-radius:50%;cursor:pointer}.play{width:62px;height:62px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 8px 25px rgba(255,107,53,.3)}.volume{display:flex;align-items:center;gap:10px;color:var(--muted)}.note{text-align:center;color:#747b86;font-size:.78rem;margin-top:18px}
@media(max-width:800px){.player{grid-template-columns:1fr;padding:18px;gap:20px}.now{min-height:240px}}@media(max-width:500px){.app{width:calc(100% - 18px);margin:22px auto}.player{padding:12px}.track{grid-template-columns:32px 1fr}.track .duration{display:none}.now{min-height:210px}}

nav{
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
    backdrop-filter:blur(16px);
    background:rgba(0,0,0,.45);
    border-bottom:1px solid var(--border);
}

.nav-container{
    max-width:1400px;
    margin:auto;
    padding:20px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px;
}

.logo1{
    font-size:1.8rem;
    font-weight:900;
    letter-spacing:4px;
}


nav ul{
    display:flex;
    list-style:none;
    /*gap:35px;*/
}

/*
nav a{
    color:white;
    text-decoration:none;
    font-weight:600;
}
*/

.nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-list a {
  color: white;
  text-decoration: none;
  font-weight:600;
}

.section-title{
    text-align:center;
    font-size:3rem;
    margin-bottom:20px;
    margin-top:81px;
}
footer{
    border-top:1px solid var(--border);
    padding:50px;
    text-align:center;
    color:var(--muted);
}    
.socials{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-top:20px;
}

.socials a{
    color:white;
    text-decoration:none;
}

/* Hamburger-Icon standardmäßig auf Desktop ausblenden */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: white;
  transition: 0.3s;
}

/* Mobile Ansicht (Bildschirmbreite unter 768px) */
@media (max-width: 768px) {
    .hamburger {
    display: flex;
    }

    .nav-list {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    background-color:black;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }

    .nav-list.active {
    left: 0;
    }

    .hero {
    display: flex;
    align-items:center;
    justify-content:center;
    }  

    .hero img {
    width: clamp(320px, 32vw, 320px);
    height: auto;
    max-width: 100%;
    display: block;
    flex: 0 1 440px;
    object-fit: contain;
    border-radius: 18px;
    }    
    
    .glass img {
    width: clamp(320px, 32vw, 320px);
    height: auto;
    max-width: 100%;
    display: block;
    flex: 0 1 440px;
    object-fit: contain;
    border-radius: 18px;
    }    
}