*, *::before, *::after { 
  box-sizing: border-box; 
}

html { 
  scroll-behavior: smooth; 
}

body { 
  margin: 0; 
  background: #080808; 
  color: #fff; 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
  line-height: 1.5; 
  -webkit-font-smoothing: antialiased; 
  overflow-x: hidden; /* Verhindert ungewolltes seitliches Scrollen */
}

.topline { 
  height: 4px; 
  background: linear-gradient(90deg, #e30613, #ff3344, #b8000b); 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

/* Dynamischer Container für alle Bildschirmgrößen */
.container { 
  width: 100%; 
  max-width: 1180px; 
  padding-left: clamp(16px, 4vw, 32px); 
  padding-right: clamp(16px, 4vw, 32px); 
  margin: auto; 
}

/* Header & Navigation */
.header { 
  position: sticky; 
  top: 0; 
  z-index: 100; 
  background: rgba(8, 8, 8, 0.9); 
  backdrop-filter: blur(12px); 
  border-bottom: 1px solid #1c1c1c; 
}

.nav { 
  min-height: 80px; 
  height: auto; 
  padding: 10px 0;
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

.brand { 
  display: flex; 
  align-items: center; 
  gap: clamp(10px, 2vw, 16px); 
}

.brand img { 
  width: clamp(45px, 8vw, 65px); 
  height: clamp(45px, 8vw, 65px); 
  object-fit: cover; 
  border-radius: 12px; 
}

.brand span { 
  display: flex; 
  flex-direction: column; 
  line-height: 1.1; 
}

.brand b { 
  font-size: clamp(10px, 1.5vw, 13px); 
  letter-spacing: 2px; 
  color: #aaa; 
}

.brand strong { 
  font-size: clamp(20px, 4vw, 28px); 
  letter-spacing: 1px; 
  color: #fff; 
}

.navlinks { 
  display: flex; 
  gap: 20px; 
}

.navlinks a { 
  color: #aaa; 
  font-size: 14px; 
  font-weight: 600; 
  transition: color 0.2s; 
}

.navlinks a:hover { 
  color: #e30613; 
}

.menu-toggle { 
  display: none; 
  background: none; 
  border: 0; 
  cursor: pointer; 
  flex-direction: column; 
  gap: 6px; 
  padding: 5px; 
}

.menu-toggle span { 
  display: block; 
  width: 26px; 
  height: 2px; 
  background: #fff; 
  border-radius: 2px; 
  transition: 0.3s; 
}

/* Hero Section */
.hero { 
  position: relative; 
  overflow: hidden; 
  padding: clamp(40px, 8vw, 80px) 0 clamp(35px, 6vw, 70px); 
  background: radial-gradient(circle at 80% 20%, rgba(227, 6, 19, 0.12), transparent 40%), #080808; 
}

.hero-glow { 
  position: absolute; 
  width: min(400px, 80vw); 
  height: min(400px, 80vw); 
  right: -100px; 
  top: 20px; 
  background: #e30613; 
  filter: blur(150px); 
  opacity: 0.1; 
  pointer-events: none;
}

.hero-grid { 
  display: grid; 
  grid-template-columns: 1.1fr 0.9fr; 
  gap: clamp(30px, 5vw, 50px); 
  align-items: center; 
}

.live-pill { 
  display: inline-flex; 
  gap: 8px; 
  align-items: center; 
  padding: 6px 14px; 
  border: 1px solid #333; 
  border-radius: 99px; 
  color: #e30613; 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: 1.5px; 
  background: #121212; 
}

.live-pill i, .dot { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: #e30613; 
  display: inline-block; 
  box-shadow: 0 0 10px #e30613; 
  animation: pulse 1.5s infinite; 
}

@keyframes pulse { 
  0% { opacity: 1; } 
  50% { opacity: 0.4; } 
  100% { opacity: 1; } 
}

.hero h1 { 
  font-size: clamp(32px, 6vw, 70px); 
  line-height: 1.05; 
  margin: 20px 0; 
  font-weight: 800; 
}

.hero h1 span { 
  color: #e30613; 
}

.lead { 
  font-size: clamp(15px, 2vw, 17px); 
  color: #aaa; 
  max-width: 580px; 
}

.hero-actions { 
  display: flex; 
  gap: 12px; 
  margin-top: 25px; 
  flex-wrap: wrap; 
}

.primary, .secondary { 
  border-radius: 10px; 
  padding: 12px 22px; 
  font-weight: 700; 
  border: 1px solid transparent; 
  cursor: pointer; 
  font-size: 14px; 
  transition: 0.2s; 
  text-align: center;
}

.primary { 
  background: #e30613; 
  color: #fff; 
  box-shadow: 0 4px 20px rgba(227, 6, 19, 0.3); 
}

.primary:hover { 
  background: #ff1e2d; 
}

.secondary { 
  background: #141414; 
  border-color: #262626; 
  color: #fff; 
}

.secondary:hover { 
  border-color: #444; 
}

.mini-stats { 
  display: flex; 
  gap: 20px; 
  margin-top: 25px; 
  color: #777; 
  font-size: 12px; 
  font-weight: 600; 
  flex-wrap: wrap;
}

/* Dynamische Player Card */
.player-card { 
  background: #111; 
  border: 1px solid #222; 
  border-radius: 20px; 
  padding: clamp(15px, 3vw, 24px); 
  box-shadow: 0 20px 40px rgba(0,0,0,0.6); 
  width: 100%;
}

.player-head { 
  display: flex; 
  justify-content: space-between; 
  color: #777; 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: 1px; 
}

.player-head span:first-child { 
  color: #e30613; 
}

.cover { 
  margin-top: 15px; 
  width: 100%;
  aspect-ratio: 16 / 9; 
  border-radius: 14px; 
  overflow: hidden; 
  position: relative; 
  background: #181818; 
}

.cover img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.equalizer { 
  position: absolute; 
  bottom: 14px; 
  left: 14px; 
  display: flex; 
  align-items: flex-end; 
  gap: 4px; 
  height: 30px; 
  opacity: 0; 
  transition: opacity 0.3s; 
}

.playing .equalizer { 
  opacity: 1; 
}

.equalizer b { 
  width: 4px; 
  height: 10px; 
  background: #e30613; 
  border-radius: 2px; 
  animation: eq 0.8s infinite alternate; 
}

.equalizer b:nth-child(2) { animation-delay: 0.15s; height: 20px; }
.equalizer b:nth-child(3) { animation-delay: 0.3s; height: 14px; }
.equalizer b:nth-child(4) { animation-delay: 0.45s; height: 25px; }
.equalizer b:nth-child(5) { animation-delay: 0.6s; height: 18px; }

@keyframes eq { 
  to { height: 6px; } 
}

.now { 
  padding: 15px 4px 10px; 
}

.now small { 
  color: #666; 
  font-size: 10px; 
  font-weight: 800; 
  letter-spacing: 1.5px; 
}

.now h2 { 
  margin: 3px 0; 
  font-size: clamp(16px, 2.5vw, 20px); 
  font-weight: 700; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.now p { 
  margin: 0; 
  color: #888; 
  font-size: 13px; 
}

.player-controls { 
  display: flex; 
  justify-content: center; 
  padding: 5px 0 10px; 
}

.play-btn { 
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  border: 0; 
  background: #e30613; 
  color: #fff; 
  font-size: 20px; 
  cursor: pointer; 
  box-shadow: 0 8px 25px rgba(227, 6, 19, 0.4); 
  transition: transform 0.2s; 
}

.play-btn:hover { 
  transform: scale(1.05); 
}

.volume-row { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  color: #666; 
  font-size: 12px; 
}

.volume-row input { 
  flex: 1; 
  accent-color: #e30613; 
  cursor: pointer; 
}

/* Ticker */
.ticker { 
  background: #e30613; 
  color: white; 
}

.ticker-inner { 
  min-height: 42px; 
  display: flex; 
  align-items: center; 
  gap: 15px; 
  font-size: 12px; 
  white-space: nowrap; 
  overflow: hidden; 
}

.ticker-inner span { 
  font-weight: 900; 
  background: rgba(0,0,0,0.2); 
  padding: 3px 8px; 
  border-radius: 4px; 
  flex-shrink: 0;
}

.ticker-inner em { 
  opacity: 0.85; 
  font-style: normal; 
}

/* Sections */
.section { 
  padding: clamp(40px, 8vw, 80px) 0; 
}

.dark-section { 
  background: #0c0c0c; 
  border-top: 1px solid #161616; 
  border-bottom: 1px solid #161616; 
}

.section-title { 
  text-align: center; 
  margin-bottom: clamp(24px, 5vw, 40px); 
}

.section-title.left { 
  text-align: left; 
}

.section-title span { 
  font-size: 11px; 
  color: #e30613; 
  font-weight: 900; 
  letter-spacing: 2px; 
}

.section-title h2 { 
  font-size: clamp(24px, 3.5vw, 40px); 
  margin: 6px 0; 
  font-weight: 800; 
}

.section-title p { 
  color: #888; 
  margin: 0; 
  font-size: clamp(13px, 1.8vw, 15px); 
}

/* Dynamisches Music Grid */
.music-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
  gap: 16px; 
}

.music-card { 
  min-height: 200px; 
  padding: 22px; 
  border-radius: 16px; 
  border: 1px solid #1a1a1a; 
  background: #111; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  position: relative; 
  overflow: hidden; 
  transition: transform 0.2s, border-color 0.2s; 
}

.music-card:hover { 
  transform: translateY(-4px); 
  border-color: #333; 
}

.music-card::before { 
  content: ""; 
  position: absolute; 
  width: 120px; 
  height: 120px; 
  border-radius: 50%; 
  right: -30px; 
  top: -30px; 
  background: #e30613; 
  opacity: 0.15; 
  filter: blur(10px); 
}

.music-card span { color: #e30613; font-weight: 900; font-size: 13px; }
.music-card h3 { font-size: 20px; margin: 4px 0; }
.music-card p { color: #888; margin: 0; font-size: 13px; }
.c90::before { background: #3b82f6; }
.c00::before { background: #a855f7; }
.cp::before { background: #22c55e; }

/* Alexa Banner & Playlist History */
.alexa-banner { 
  background: linear-gradient(135deg, #161616, #1c1012); 
  border: 1px solid #331518; 
  border-radius: 16px; 
  padding: clamp(16px, 3vw, 25px); 
  display: flex; 
  align-items: center; 
  gap: 20px; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); 
  max-width: 800px; 
  margin: 0 auto; 
}

.alexa-icon { 
  font-size: 32px; 
  background: rgba(227,6,19,0.1); 
  width: 60px; 
  height: 60px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 50%; 
  border: 1px solid rgba(227,6,19,0.2); 
  flex-shrink: 0; 
}

.alexa-content h3 { margin: 0 0 5px 0; font-size: 18px; color: #fff; }
.alexa-content p { margin: 0 0 12px 0; color: #aaa; font-size: 13px; }
.alexa-command { 
  display: inline-block; 
  background: #080808; 
  border: 1px solid #333; 
  color: #ff3344; 
  padding: 8px 14px; 
  border-radius: 8px; 
  font-weight: 700; 
  font-size: 13px; 
  font-family: monospace; 
  word-break: break-word;
}

.history-box { 
  background: #111; 
  border: 1px solid #222; 
  border-radius: 16px; 
  overflow: hidden; 
  max-width: 800px; 
  margin: 0 auto; 
  box-shadow: 0 15px 35px rgba(0,0,0,0.5); 
}

.history-item { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 14px 20px; 
  border-bottom: 1px solid #1a1a1a; 
  font-size: 14px; 
}

.history-item:last-child { border-bottom: 0; }
.history-item:hover { background: #151515; }
.history-song { font-weight: 700; color: #fff; }
.history-artist { color: #aaa; font-weight: 400; }
.history-time { 
  font-size: 12px; 
  color: #fff; 
  background: #080808; 
  padding: 4px 10px; 
  border-radius: 6px; 
  border: 1px solid #333; 
  font-weight: 600; 
  flex-shrink: 0;
}

.history-loading { padding: 30px; text-align: center; color: #777; font-size: 13px; }

/* Wish Grid & Form */
.wish-grid { 
  display: grid; 
  grid-template-columns: 1fr 0.9fr; 
  gap: clamp(30px, 5vw, 50px); 
  align-items: start; 
}

.wish-points { 
  display: grid; 
  gap: 12px; 
  margin-top: 30px; 
}

.wish-points div { 
  background: #111; 
  border: 1px solid #1c1c1c; 
  border-radius: 12px; 
  padding: 15px; 
}

.wish-points b { display: block; margin-left: 28px; margin-top: -22px; font-size: 14px; }
.wish-points small { display: block; color: #777; margin-left: 28px; margin-top: 2px; font-size: 12px; }

.wish-box { 
  background: #111; 
  border: 1px solid #222; 
  border-radius: 18px; 
  overflow: hidden; 
  box-shadow: 0 15px 35px rgba(0,0,0,0.5); 
}

.box-head { background: #e30613; padding: 14px 18px; font-weight: 800; font-size: 14px; }
.wish-box form, .apply-form-box form { padding: clamp(15px, 3vw, 20px); display: grid; gap: 14px; }
.wish-box label, .apply-form-box label { font-size: 12px; color: #888; font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.wish-box label small, .apply-form-box label small { font-weight: 400; color: #666; }

.wish-box input, .wish-box textarea, .apply-form-box input, .apply-form-box textarea, .apply-form-box select { 
  width: 100%; 
  background: #080808; 
  color: #fff; 
  border: 1px solid #222; 
  border-radius: 8px; 
  padding: 11px; 
  font: inherit; 
  outline: none; 
  transition: border-color 0.2s; 
}

.wish-box input:focus, .wish-box textarea:focus, .apply-form-box input:focus, .apply-form-box textarea:focus, .apply-form-box select:focus { 
  border-color: #e30613; 
}

.wish-box textarea, .apply-form-box textarea { resize: vertical; }
.full { width: 100%; }

/* Weather */
.weather-wrap { 
  background: #111; 
  border: 1px solid #222; 
  border-radius: 16px; 
  overflow: hidden; 
}

.weather-wrap iframe { 
  display: block; 
  width: 100%; 
  height: clamp(380px, 60vh, 550px); 
  border: 0; 
}

/* Platforms Grid */
.platforms-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 20px; 
  max-width: 950px; 
  margin: 0 auto; 
}

.platform-card { 
  background: #111; 
  border: 1px solid #222; 
  border-radius: 16px; 
  padding: 25px; 
  text-align: center; 
  transition: transform 0.2s, border-color 0.2s; 
  display: block; 
}

.platform-card:hover { transform: translateY(-4px); border-color: #e30613; }
.platform-card .p-icon { font-size: 32px; display: inline-block; margin-bottom: 12px; }
.platform-card h3 { margin: 0 0 6px 0; font-size: 18px; }
.platform-card p { margin: 0; color: #888; font-size: 13px; }

/* Apply Box */
.apply-form-box { 
  background: #111; 
  border: 1px solid #222; 
  border-radius: 18px; 
  max-width: 700px; 
  margin: 0 auto; 
  box-shadow: 0 15px 35px rgba(0,0,0,0.5); 
}

.form-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 14px; 
}

/* Footer */
footer { 
  border-top: 1px solid #1c1c1c; 
  padding: 30px 0; 
  color: #666; 
  font-size: 12px; 
  background: #060606; 
}

.footer-inner { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 15px; 
}

.footer-inner div { display: flex; flex-direction: column; gap: 3px; }
.footer-inner strong { color: #fff; letter-spacing: 1px; font-size: 13px; }
.footer-links { display: flex; gap: 15px; flex-wrap: wrap; }
.footer-links a { color: #888; font-weight: 600; transition: color 0.2s; }
.footer-links a:hover { color: #e30613; }

/* Dynamic News Grid & Cards */
.news-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); 
  gap: 24px; 
  margin-top: 30px; 
}

.news-card { 
  background: #111; 
  border: 1px solid #222; 
  border-radius: 16px; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  transition: transform 0.2s, border-color 0.2s; 
}

.news-card:hover { transform: translateY(-4px); border-color: #e30613; }
.news-card-img { height: 180px; width: 100%; object-fit: cover; background: #181818; }
.news-card-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.news-card-date { font-size: 11px; color: #e30613; font-weight: 800; letter-spacing: 1px; margin-bottom: 8px; }
.news-card-title { font-size: 18px; font-weight: 700; margin: 0 0 10px 0; color: #fff; line-height: 1.3; }
.news-card-text { font-size: 13px; color: #aaa; margin: 0 0 15px 0; white-space: pre-line; flex-grow: 1; }
.news-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #e30613; margin-top: auto; }
.news-card-link:hover { text-decoration: underline; }

/* Breakpoints & Responsive Tweaks */
@media(max-width: 900px) {
  .hero-grid, .wish-grid { 
    grid-template-columns: 1fr; 
  }
  
  .navlinks { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background: #0c0c0c; 
    border-bottom: 1px solid #222; 
    flex-direction: column; 
    padding: 20px; 
    gap: 15px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
  }
  
  .navlinks.open { 
    display: flex; 
  }
  
  .menu-toggle { 
    display: flex; 
  }
  
  .alexa-banner { 
    flex-direction: column; 
    text-align: center; 
  }
  
  .history-item { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 6px; 
  }
}

@media(max-width: 600px) {
  .hero-actions {
    flex-direction: column;
  }

  .primary, .secondary {
    width: 100%;
  }

  .mini-stats { 
    flex-direction: column; 
    gap: 6px; 
  }
  
  .footer-inner { 
    flex-direction: column; 
    align-items: flex-start; 
  }
}