/* =========================
BASE
========================= */

*{
box-sizing:border-box;
}

html,body{
margin:0;
padding:0;
}

body{
background:#000;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
}

/* =========================
LAYOUT
========================= */

.container{
max-width:1300px;
margin:0 auto;
padding:0 20px;
}

/* global spacing for sections (NOT hero) */

section:not(.hero){
padding:60px 0;
text-align:center;
}

/* =========================
HERO
========================= */

.hero{
padding:0 !important;
position:relative;
width:100%;
aspect-ratio:1662 / 480;
max-height:480px;
overflow:hidden;
text-align:center;
}

/* video */

.hero-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}

/* overlay */

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,.35),
rgba(0,0,0,.75)
);
z-index:1;
}

/* hero content */

.hero-content{
position:absolute;
inset:0;
z-index:2;

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

gap:8px;
padding:20px;
}

/* logo */

.hero-logo img{
width:clamp(260px,32vw,520px);
height:auto;
opacity:.95;
filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
}

/* song title */

.hero-title{
margin:0;
font-size:clamp(20px,2.4vw,32px);
letter-spacing:3px;
text-transform:uppercase;
}

/* subtitle */

.hero-subtitle{
margin:0;
opacity:.85;
}

/* button */

.hero-button{
display:inline-block;
background:#d60000;
padding:14px 32px;
color:#fff;
text-decoration:none;
letter-spacing:2px;
font-weight:700;
text-transform:uppercase;
}

.hero-button:hover{
filter:brightness(1.15);
}

/* =========================
VIDEO SWITCH
========================= */

.desktop-video{
display:block;
}

.mobile-video{
display:none;
}

/* =========================
MUSIC
========================= */

.music-wrapper{
display:flex;
flex-direction:column;
gap:40px;
align-items:center;
}

.music-wrapper img{
width:100%;
max-width:420px;
height:auto;
}

/* =========================
TOUR
========================= */

.tour-item{
display:flex;
justify-content:space-between;
gap:20px;

border-bottom:1px solid #222;
padding:22px 0;

max-width:760px;
margin:0 auto;
}

.tour-item a{
color:#fff;
text-decoration:none;
opacity:.7;
}

.tour-item a:hover{
opacity:1;
}

/* =========================
SOCIAL
========================= */

.social-links{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}
.social{
padding-bottom:160px;
}

.social-links a{
color:#fff;
text-decoration:none;
opacity:.65;
text-transform:uppercase;
letter-spacing:2px;
font-size:14px;
}

.social-links a:hover{
opacity:1;
}

/* =========================
MOBILE
========================= */

@media (max-width:768px){

/* mobile video switch */

.desktop-video{
display:none;
}

.mobile-video{
display:block;
}

/* hero height */

.hero{
aspect-ratio:auto;
height:72vh;
min-height:520px;
max-height:none;
}

/* video crop */

.hero-video{
object-fit:cover;
object-position:50% 30%;
}

/* hero overlay content */

.hero-content{
justify-content:center;
padding:18px 14px;
gap:6px;
}

/* logo smaller */

.hero-logo img{
width:min(70vw,360px);
}

/* title */

.hero-title{
font-size:18px;
letter-spacing:2px;
}

/* subtitle */

.hero-subtitle{
font-size:14px;
}

/* button */

.hero-button{
padding:11px 18px;
font-size:12px;
line-height:1;
margin-top:6px;
}

/* section spacing */

section:not(.hero){
padding:90px 0;
}

/* tour mobile */

.tour-item{
flex-direction:column;
align-items:center;
text-align:center;
}

}

/* =========================
   VIDEOS – bigger on desktop
========================= */

.videos .container{
  max-width: 1400px;   /* breiter als normal */
}

.yt-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 große Kacheln */
  gap: 28px;
  margin-top: 40px;
}

.yt-card{
  display: block;
  text-decoration: none;
  color: #fff;
  background: #0b0b0b;
  border: 1px solid #1e1e1e;
  overflow: hidden;
}

.yt-thumb{ position: relative; }

.yt-thumb img{
  width: 100%;
  height: auto;
  display: block;
}

.yt-title{
  padding: 16px 16px 18px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .9;
}

.yt-card:hover{
  filter: brightness(1.06);
}

/* Tablet */
@media (max-width: 1100px){
  .yt-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 600px){
  .videos .container{ max-width: 1100px; }
  .yt-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* Mehr Luft unter den Social Links */
.social-links{
  margin-bottom: 160px;
}

.site-footer{
  background:#000;
  padding: 60px 0 140px;
}


.footer-links{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  margin:18px 0 8px;
}
.footer-links a{
  color:#fff;
  text-decoration:none;
  opacity:.6;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;
}
.footer-links a:hover{ opacity:1; }

/* Links im Content wie auf der Hauptseite */

.content a,
.page a {
  color: #ffffff;
  text-decoration: none;
}

.content a:hover,
.page a:hover {
  text-decoration: underline;
}

/* Abstand zwischen Social Links und Footer Links verkleinern */

.social-links{
  margin-bottom: 5px;
}

.footer-links{
  margin-top: 5px;
}