:root {
  --bg: #0b0b0e; --text: #f2f2f3; --muted:#b8b8bd; --brand:#ff4d7a; --accent:#ff4d7a;
}
html,body {
  background: var(--bg); 
  color: var(--text); 
  font-family: 'Montserrat', system-ui, sans-serif;
}
a {
  color: var(--accent); 
  text-decoration: none;
}
a:hover {
  opacity: .85;
}
.btn-brand {
  background: var(--brand); 
  color:#fff; 
  border: none;
}
.btn-outline-brand {
  border: 2px solid var(--brand); 
  color:#fff;
}
.nav-link {
  color: var(--text) !important; 
  opacity:.8
}
.nav-link.active, .nav-link:hover {
  color: var(--accent) !important;
}

/* Hero Video */
.hero {
  position: relative; 
  min-height: 92vh; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  overflow:hidden; 
  border-bottom: 1px solid #1a1a1f;
}
.hero video, .hero .video-fallback {
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  filter: contrast(1.05) brightness(.85) saturate(1.05);
}
.hero::after { /* Dark overlay */
  content:""; 
  position:absolute; 
  inset:0; 
  background: radial-gradient(ellipse at center, rgba(0,0,0,.2) 0%, rgba(0,0,0,.65) 70%);
}
.hero-content {
  position:relative; 
  z-index:2; 
  text-align:center; 
  max-width:900px; 
  padding: 2rem;
}
.hero-logo {
  font-weight:800; 
  letter-spacing:.08em; 
  font-size: clamp(2rem, 4vw, 4rem);
}
.hero-sub {
  color: var(--muted); 
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}
.cta-wrap {
  gap:.75rem;
}
/* Countdown */
.countdown {
  display:grid; 
  grid-template-columns: repeat(4, minmax(120px, 1fr)); 
  gap:.75rem; 
  margin-top:1rem;
}
.cd-item {
  background:#121218; 
  border:1px solid #1f1f26; 
  border-radius:14px; 
  padding:1rem;
}
.cd-num {
  font-size:2.25rem; 
  font-weight:800;
}
.cd-label {
  color:var(--muted); 
  text-transform:uppercase; 
  letter-spacing:.12em; 
  font-size:.75rem;
}
section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0;
  position: relative;
}
/* Section spacing */
.section-title {
  font-weight:800; 
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
}
.section-sub {
  color:var(--muted)
}
/* Cards / panels */
.panel {
  background:#121218; 
  border:1px solid #1f1f26; 
  border-radius:16px;
}
.panel:hover {
  border-color:#2a2a33;
}
.playlist-list li {
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:.75rem; padding:.6rem .75rem; 
  border-radius:12px;
}
.playlist-list li:hover {
  background:#15151c;
}
.track-title {
  font-weight:600;
}
.track-time {
  color:var(--muted);
}
/* Footer */
footer {
  border-top:1px solid #1a1a1f;
}
.social a {
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  width:40px; 
  height:40px; 
  border-radius:50%; 
  background:#16161c; 
  margin-right:.5rem;
}
.badge-soft {
  background:#15151c; 
  border:1px solid #262630; 
  color:#9fa0a6;
}
/* Responsive tweaks */
@media (max-width: 576px){
  .countdown {
    grid-template-columns: repeat(2, 1fr);
  }
}
.section-head {
  font-size: clamp(1.5rem, 4vw, 2.5rem); 
  font-weight: 800; 
  text-align: center; 
  width: 100%; 
  height: 250px;
  background: #ff4d7a; 
  color: black; 
  text-align: center; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.section-head img {
  max-height: 250px; 
}
/* Höhe für Smartphones (bis 576px Breite) */
@media (max-width: 576px) {
  .section-head {
    height: 130px; /* oder was du brauchst */
  }
}
.island-logo {
  border-radius: 300px; 
  max-height: 320px; 
  background: rgb(12,113,195);
}

.btn-social {
  min-height: 60px;              /* gleiche Höhe */
  border-radius: 8px;            /* leicht abgerundet */
  transition: all 0.3s ease;     /* sanfter Hover */
  font-weight: 500;              /* etwas kräftigerer Text */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* dezenter Schatten */
  width: 300px;        /* feste Breite, z. B. 200px */
  max-width: 100%;     /* verhindert Überlaufen auf kleinen Screens */
  margin: 0 auto;      /* sorgt dafür, dass die Buttons zentriert bleiben */
}

.btn-social:hover {
  background-color: #ffffff;     /* invertiert auf Hover */
  color: #000000;                /* Text dunkel */
  transform: translateY(-3px);   /* leichter Lift */
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.btn-social i {
  font-size: 1.4rem;
}

.thumbnail {
    cursor: pointer;
    transition: transform 0.2s;
}
.thumbnail:hover {
    transform: scale(1.05);
}

#about .panel {
  max-width: 480px;
  margin: 0 auto;
}

#about figure {
  margin: 0;
}

#about figcaption {
  opacity: 0.7;
}