/* =====================================================
   United Concerts — THE MIRACLE OF ROXETTE (sandbox.html)
   Neuer Entwurf, angelehnt an die Referenzvorlage (schwarz/gold,
   Bandfoto-Hero, Tourdaten-Tabelle, Songliste). Übernommen aus
   staging.html: Schriftarten (Montserrat, self-hosted), Filmstreifen-
   Galerie, Ticker, Hero-Bild-Mechanik, Footer-Struktur, Kontaktformular.
   ===================================================== */

:root {
  --black:#0A0908;
  --black-mid:#151210;
  --black-soft:#1D1815;
  /* Palette v2: Türkis/Cyan-Akzent aus den Referenz-Buttons entnommen
     (solid: helles Aqua-Gradient auf schwarz; outline: Cyan-Glow). Variablennamen
     (--turkis/-light/-deep) bewusst beibehalten, um alle bestehenden Referenzen
     im CSS unverändert zu lassen — nur die Werte sind neu. */
  --turkis:#5CD9E8;
  --turkis-light:#A9EFF5;
  --turkis-deep:#1D8B99;
  --white:#FFFFFF;
  --off-white:#EFFCFC;
  --muted:#A79D89;

  --radius:12px;
  --radius-lg:18px;
  --max-width:1180px;
}

/* ---------- Fonts (self-hosted, wie staging.html) ---------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Black.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--off-white);
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:var(--max-width); margin:0 auto; padding:0 28px;}
section{position:relative; padding:110px 0;}

/* ---------- Legal Notice / Impressum ----------
   Eigenständige Seite (impressum.php), kein Hero davor — daher braucht die
   erste Sektion genug Top-Padding, um nicht unter der fixed Nav zu
   verschwinden. Kartenoptik/Nummern-Badges wie in der Kundenreferenz,
   aber in Türkis statt Blau. */
.legal-section{background:var(--black); padding-top:170px;}
.legal-container{max-width:760px;}
.legal-container .eyebrow{margin-bottom:16px;}
.legal-container h1{
  font-size:clamp(34px,5vw,52px); color:var(--white); text-transform:uppercase;
  font-weight:800; margin:0 0 32px;
}
.legal-intro{
  border-left:3px solid var(--turkis); background:rgba(92,217,232,.05);
  padding:20px 24px; border-radius:0 10px 10px 0; margin-bottom:56px;
}
.legal-intro p{color:var(--off-white); font-size:15px; line-height:1.7; margin:0;}
.legal-intro strong{color:var(--white);}

.legal-block{margin-bottom:44px;}
.legal-block-head{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.legal-num{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--turkis); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
}
.legal-block-head h2{font-size:clamp(18px,2.2vw,22px); color:var(--white); font-weight:700; margin:0;}

.legal-card{
  background:var(--black-mid); border:1px solid rgba(92,217,232,.15);
  border-radius:10px; padding:0 22px; margin-bottom:14px;
}
.legal-card--text{padding:20px 22px;}
.legal-card--text p{color:var(--off-white); font-size:14.5px; line-height:1.75; margin:0 0 14px;}
.legal-card--text p:last-child{margin-bottom:0;}
.legal-card--text a, .legal-value a{color:var(--turkis-light);}

.legal-row{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 20px;
  padding:16px 0; border-bottom:1px solid rgba(92,217,232,.1);
}
.legal-row:last-child{border-bottom:none;}
.legal-label{color:rgba(239,252,252,.5); font-size:13px; flex:0 0 auto;}
.legal-value{color:var(--white); font-weight:600; font-size:14px; text-align:right;}

.legal-right{margin-bottom:20px;}
.legal-right:last-child{margin-bottom:0;}
.legal-right-title{color:var(--turkis-light); font-weight:700; font-size:14.5px; margin:0 0 6px;}

/* Markiert Textstellen, die noch mit dem Kunden/Hoster final bestätigt
   werden müssen (im Rohtext eckig geklammert), damit sie vor dem Live-Gang
   nicht übersehen werden. */
.legal-flag{
  display:block; margin-top:10px; padding:12px 14px;
  border:1px dashed var(--turkis); border-radius:8px;
  background:rgba(92,217,232,.06); color:var(--turkis-light);
  font-size:13px; font-style:italic; line-height:1.6;
}

@media (max-width:640px){
  .legal-section{padding-top:140px;}
  .legal-row{flex-direction:column; align-items:flex-start; gap:4px;}
  .legal-value{text-align:left;}
}

h1,h2,h3{margin:0; font-weight:700; letter-spacing:.01em;}
p{margin:0;}
::selection{background:var(--turkis); color:var(--black);}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
  .ticker-track,
  .film-track,
  .scroll-cue,
  .play-ring{
    animation:none !important;
  }
}

/* ---------- Custom Cursor (Goldverlauf-Punkt, nur Desktop/Maus) ---------- */
@media (hover:hover) and (pointer:fine) {
  body.has-custom-cursor{cursor:none;}
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor .film-item{cursor:none;}
}
.custom-cursor{
  position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--turkis-light), var(--turkis) 55%, var(--turkis-deep) 100%);
  box-shadow:0 0 10px rgba(92,217,232,.65), 0 0 22px rgba(92,217,232,.3);
  pointer-events:none; z-index:9999;
  transform:translate3d(-50%,-50%,0);
  transition:opacity .2s ease, transform .18s ease, width .18s ease, height .18s ease;
  opacity:0;
}
.custom-cursor.is-visible{opacity:1;}
.custom-cursor.is-hover{width:26px; height:26px; background:radial-gradient(circle at 32% 30%, var(--turkis-light), var(--turkis) 60%, var(--turkis-deep) 100%); box-shadow:0 0 14px rgba(92,217,232,.75), 0 0 30px rgba(92,217,232,.4);}
.custom-cursor.is-down{width:10px; height:10px;}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; top:-60px; left:16px; z-index:2000;
  background:var(--turkis); color:var(--black);
  padding:12px 20px; border-radius:8px;
  font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-delay-1.is-visible{transition-delay:.1s;}
.reveal-delay-2.is-visible{transition-delay:.2s;}
.reveal-delay-3.is-visible{transition-delay:.3s;}

/* ---------- Section helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  color:var(--turkis-light);
}
.eyebrow::before, .eyebrow::after{content:''; width:22px; height:1px; background:var(--turkis); display:inline-block;}

.section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.section-head .eyebrow{justify-content:center; margin-bottom:16px;}
.section-head h2{font-size:clamp(26px,4vw,42px); color:var(--white); text-transform:uppercase; letter-spacing:.02em;}
.section-head p{margin-top:16px; color:var(--off-white); font-size:15px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:6px;
  font-weight:700; font-size:13px; line-height:1; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn svg{width:15px; height:15px;}
.btn:hover{transform:translateY(-2px);}
.btn-gold{
  background:linear-gradient(135deg, var(--turkis-light), var(--turkis));
  color:var(--black);
  box-shadow:0 10px 30px -8px rgba(92,217,232,.55);
}
.btn-gold:hover{box-shadow:0 14px 36px -6px rgba(92,217,232,.8);}
.btn-outline{background:transparent; color:var(--turkis-light); border-color:var(--turkis);}
.btn-outline:hover{background:rgba(92,217,232,.1);}

.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--turkis-light);
  outline-offset:3px;
}

/* ---------- Logo (mit Text-Fallback, wie staging.html) ---------- */
.uc-logo-wrap{display:inline-flex; align-items:center; gap:10px;}
.uc-logo-wrap img{height:44px; width:auto; object-fit:contain;}
.uc-logo-fallback{
  display:none; align-items:center; gap:9px;
  font-weight:800; letter-spacing:.02em; font-size:15px; color:var(--white); text-transform:uppercase;
}
.uc-logo-fallback .mark{
  width:28px; height:28px; border-radius:6px;
  background:linear-gradient(135deg, var(--turkis-light), var(--turkis));
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:var(--black);
}
.uc-logo-wrap img.uc-logo-broken{display:none;}
.uc-logo-wrap img.uc-logo-broken + .uc-logo-fallback{display:inline-flex;}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  padding:18px 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
.nav.is-scrolled{
  background:rgba(10,9,8,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom-color:rgba(92,217,232,.12);
  padding:12px 0;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.7);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; flex-wrap:nowrap;}
.nav-links a{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--off-white); position:relative; padding:4px 0; white-space:nowrap;
  transition:opacity .2s ease, color .2s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--turkis); transition:width .25s ease;
}
.nav-links a:hover, .nav-links a.is-active{opacity:1; color:var(--turkis-light);}
.nav-links a:hover::after, .nav-links a.is-active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:16px;}
.nav .btn{padding:11px 20px; font-size:11px;}
.nav-toggle{display:none; background:none; border:none; padding:6px; cursor:pointer;}
.nav-toggle .bar{
  display:block; width:22px; height:2px; margin:5px 0;
  background:var(--turkis-light); border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] .bar-1{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bar-2{opacity:0;}
.nav-toggle[aria-expanded="true"] .bar-3{transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero (Neuentwurf v2: zweigeteilt) ----------
   Zwei Container statt Vollbild-Hintergrundfoto: links Logo + CTAs auf
   schwarzem Grund, rechts das Bandfoto — object-fit:cover in .hero-right,
   per CSS-Mask am linken Rand weich ausgeblendet, damit es nahtlos in die
   schwarze Hero-Fläche überläuft (kein harter Kante/Rahmen). Logo linksbündig,
   kein Badge-Kreis. Das Logo (roxette-logo.png) trägt bereits "Celebrating
   40 Years of Hits" + "Feat. The Roxette Experience", darum keine
   zusätzliche Kicker-/Subline-Textzeile, die das doppelt. */
.hero{
  position:relative;
  min-height:100vh; display:flex; align-items:stretch;
  background:var(--black);
  overflow:hidden;
}

.hero-left{
  position:relative; z-index:2;
  flex:0 0 clamp(620px,50vw,760px);
  display:flex; align-items:center;
  padding:150px clamp(28px,4vw,60px) 110px max(28px, calc((100vw - var(--max-width)) / 2 + 28px));
}
.hero-left-inner{max-width:660px; width:100%;}

/* Zentriert Logo + CTA-Buttons als Gruppe innerhalb der linken Spalte
   (width:fit-content + auto-Margin); die Buttons stehen zusätzlich selbst
   zentriert nebeneinander (justify-content:center in .hero-ctas), statt
   linksbündig zur Logo-Kante. */
.hero-center{
  width:fit-content; max-width:100%; min-width:0; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}

.hero .uc-logo-wrap{margin-bottom:44px; min-width:0; max-width:100%;}
.hero .uc-logo-wrap img{height:auto; width:clamp(560px,37vw,640px); max-width:100%;}

@media (min-width:901px){
  .hero .uc-logo-wrap{padding:0;}
  .hero-center{margin:0; align-items:flex-start; transform:translateX(0px);}
  .hero-ctas{justify-content:flex-start;}
}

.hero-ctas{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:nowrap;}

.hero-right{position:relative; flex:1 1 auto; min-width:0; overflow:hidden;}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 24%);
  mask-image:linear-gradient(to right, transparent 0%, #000 24%);
}
/* Leichtes Vignetten-Overlay, damit Logo/Buttons am Übergang lesbar bleiben
   und das Foto oben/unten nicht hart ausläuft. */
.hero-right::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,0) 18%, rgba(10,9,8,0) 78%, rgba(10,9,8,.45) 100%);
}

@media (max-width:900px){
  .hero{flex-direction:column; min-height:auto;}
  .hero-left{
    flex:none; width:100%; order:2;
    padding:44px 24px 90px; justify-content:center;
  }
  .hero-left-inner{max-width:520px; margin:0 auto;}
  .hero .uc-logo-wrap{margin-bottom:34px;}
  .hero .uc-logo-wrap img{width:clamp(300px,78vw,460px);}
  .hero-right{order:1; height:58vh; min-height:340px;}
  .hero-media{
    object-position:35% center;
    -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .hero-right::after{background:linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,0) 18%, rgba(10,9,8,.15) 70%, rgba(10,9,8,.75) 100%);}
}

@media (max-width:768px){
  .hero-ctas{flex-direction:column; flex-wrap:wrap; align-items:stretch;}
  .hero-ctas .btn{justify-content:center;}
}

.scroll-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--off-white);
  animation:bounce 2.2s ease-in-out infinite; z-index:2;
}
@keyframes bounce{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);}}

/* ---------- Countdown zur nächsten Show (gleich nach dem Hero) ----------
   Große Zahlen als Outline/Glow-Effekt (Referenzbild des Kunden, hier in
   der Gold/Schwarz-Palette dieses Entwurfs statt Neon-Mehrfarbig). IDs/
   Klassen (countdown-section/-wrap/-info/-venue/-date/-timer/-unit/-num/
   -label/-cta) 1:1 aus staging.html übernommen, main.js greift unverändert
   darauf zu. */
.countdown-section{background:var(--black); padding:70px 0; border-bottom:1px solid rgba(92,217,232,.12);}
/* .countdown-accent: dunkle statt heller/glühender Zahlen und Texte, für den
   Einsatz auf hellem (Cyan-)Grund. Sitzt jetzt direkt auf .countdown-wrap,
   da der Countdown in die Tour-Dates-Sektion integriert ist (kein eigener
   .countdown-section-Wrapper mehr, .split-band liefert den Verlauf). */
.split-band .countdown-wrap{margin-top:70px; padding-top:56px;}
.countdown-accent .eyebrow{color:var(--black);}
.countdown-accent .eyebrow::before, .countdown-accent .eyebrow::after{background:var(--black);}
.countdown-accent .countdown-venue{color:var(--black);}
.countdown-accent .countdown-date{color:rgba(10,9,8,.7);}
.countdown-accent .countdown-num{color:var(--black); filter:none;}
.countdown-accent .countdown-label{color:rgba(10,9,8,.75);}
.countdown-wrap{display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center;}
.countdown-info .eyebrow{justify-content:center; margin-bottom:12px;}
.countdown-venue{font-size:clamp(18px,2.2vw,24px); font-weight:700; color:var(--white);}
.countdown-date{display:block; margin-top:6px; font-size:14px; color:var(--off-white);}

.countdown-timer{display:flex; align-items:flex-start; justify-content:center; gap:clamp(24px,4vw,56px); flex-wrap:wrap;}
.countdown-unit{display:flex; flex-direction:column; align-items:center; gap:4px;}
.countdown-num{
  font-size:clamp(56px,9vw,120px); font-weight:700; line-height:1; letter-spacing:-.01em;
  color:var(--turkis-light);
  filter:drop-shadow(0 0 16px rgba(92,217,232,.55)) drop-shadow(0 0 40px rgba(92,217,232,.25));
}
.countdown-label{
  font-size:clamp(15px,1.8vw,22px); font-weight:800; letter-spacing:.02em; text-transform:capitalize;
  color:var(--off-white);
}
/* [hidden] hat dieselbe CSS-Spezifität wie .countdown-timer{display:flex}
   bzw. .btn{display:inline-flex} — ohne diese Regel würde "display:flex/
   inline-flex" trotz [hidden] gewinnen (gleiches Muster wie bei
   .lightbox[hidden] weiter unten). #countdownCta trägt zusätzlich zur
   .btn-Klasse das hidden-Attribut. */
.countdown-timer[hidden], .btn[hidden]{display:none;}

/* ---------- Ticker (aus staging.html übernommen) ---------- */
.ticker{position:relative; z-index:2; overflow:hidden; padding:20px 0; background:var(--black); border-top:1px solid rgba(92,217,232,.15); border-bottom:1px solid rgba(92,217,232,.15);}
.ticker-track{display:flex; width:max-content; animation:tickerScroll 30s linear infinite;}
.ticker-track span{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:clamp(26px,3.8vw,64px); font-weight:800; letter-spacing:.01em; text-transform:uppercase;
  color:var(--turkis-light); padding:0 30px;
}
.ticker-track span:nth-child(even){
  color:transparent;
  -webkit-text-stroke:1.5px var(--off-white);
  text-stroke:1.5px var(--off-white);
}
@keyframes tickerScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Other Shows (Marquee wie .ticker, aber Bild-Kacheln statt Text) ----------
   Gleiche Endlos-Scroll-Mechanik wie der Ticker (Inhalt 1:1 dupliziert,
   translateX von 0 auf -50%). Kachel-Rahmen wie .video-frame (Rand/Radius/
   Schatten), Format quadratisch statt 16:10. */
.other-shows-section{background:var(--black);}
.other-shows-section .section-head{margin-bottom:44px;}
.shows-slider{position:relative; overflow:hidden; width:100%;}
.shows-track{display:flex; gap:22px; width:max-content; animation:tickerScroll 46s linear infinite;}
.shows-slider:hover .shows-track{animation-play-state:paused;}
.show-tile{
  position:relative; flex:0 0 auto; display:block;
  width:calc((100vw - 4 * 22px) / 5);
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  border:1px solid var(--turkis);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.55);
  transition:transform .35s ease, box-shadow .35s ease;
}
.show-tile img{width:100%; height:100%; object-fit:cover; display:block;}
.show-tile::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,8,.1), rgba(10,9,8,.4));}
.show-tile:hover{transform:translateY(-5px); box-shadow:0 26px 50px -18px rgba(92,217,232,.4); border-color:var(--turkis-light);}

/* ---------- The Show ---------- */
/* ---------- Show Intro Band (Gradient-Banner: Eyebrow + Headline + Kurztext) ----------
   Diagonaler Verlauf aus der Akzentfarbe (Türkis) in helles Off-White,
   Text in Schwarz (heller Hintergrund statt sonst dunkler Sektionen). */
.show-intro-band{
  position:relative;
  background:linear-gradient(135deg, var(--turkis) 0%, var(--turkis) 22%, var(--turkis-light) 68%, #F3FCFD 100%);
  padding:110px 0;
}
.show-intro-inner{max-width:820px; margin:0 auto; text-align:center;}
.show-intro-band .eyebrow{justify-content:center; color:var(--black);}
.show-intro-band .eyebrow::before, .show-intro-band .eyebrow::after{background:var(--black);}
.show-intro-band h2{
  margin-top:18px;
  font-size:clamp(28px,4.6vw,52px); font-weight:800; line-height:1.18;
  color:var(--black); text-transform:uppercase; letter-spacing:.01em;
}
.show-intro-text{
  margin-top:26px; max-width:640px; margin-left:auto; margin-right:auto;
  font-size:clamp(15px,1.6vw,18px); line-height:1.75; color:rgba(10,9,8,.78);
}

.show-section{background:var(--black); padding-bottom:40px;}
.show-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.show-photo{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.3; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);}
.show-photo img{width:100%; height:100%; object-fit:cover;}
.show-copy .eyebrow{margin-bottom:16px;}
/* .show-copy .show-quote statt nur .show-quote: .show-quote ist ein <p> und
   würde sonst von ".show-copy p{font-size:16px}" unten überschrieben — die
   hat durch den zusätzlichen Element-Selektor rein rechnerisch eine höhere
   Spezifität als die einzelne Klasse .show-quote, obwohl sie danach im
   Quelltext steht. Mit der zusätzlichen Klasse hier gewinnt zuverlässig
   diese Regel. */
.show-copy .show-quote{
  font-size:clamp(22px,3vw,32px); font-weight:700; color:var(--white); line-height:1.4;
  text-transform:uppercase; margin-bottom:20px;
}
/* Utility-Klasse für Farbakzente einzelner Wörter in Überschriften/Zitaten,
   z. B. <span class="text-accent">Wort</span>. Auf hellem Grund (z. B. den
   Cyan-Verlauf-Sektionen) turkis-deep statt turkis für ausreichend Kontrast
   verwenden. */
.text-accent{color:var(--turkis);}
.show-copy p{color:var(--off-white); font-size:16px; margin-bottom:14px;}
.show-copy .btn{margin-top:12px;}
/* Feature-Icons nach Kundenreferenz: schlanke Gold-Linien-Icons ohne
   Kreis-/Rahmen-Hintergrund, Icon zentriert über zweizeiligem Text.
   Die Reihe selbst bleibt als Gruppe linksbündig (nicht die ganze
   Sektion zentriert). */
.feature-row{display:flex; flex-wrap:wrap; align-items:flex-start; gap:34px 46px; margin-top:32px;}
.feature-item{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; width:132px;}
.feature-item .icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--turkis); background:rgba(92,217,232,.08);
  display:flex; align-items:center; justify-content:center;
}
.feature-item .icon svg{width:18px; height:18px; color:var(--turkis);}
.feature-row .feature-item:last-child .icon svg{width:24px; height:24px;}

/* Feature-Icons als eigene Sektion unter "The Show" (vormals Teil von
   .show-copy) — gleicher Hintergrund, kein eigenes Top-Padding (die
   Show-Sektion darüber liefert schon genug Abstand über ihr
   Bottom-Padding), Reihe zentriert statt linksbündig. */
.show-features-section{background:var(--black);}
.show-features-section .feature-row{justify-content:center; margin-top:0;}
.feature-item span{font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--turkis-light); line-height:1.35;}

/* Einleitungs-/Schlusstext um die Feature-Icons herum — zentriert wie die
   Icon-Reihe, auf Lesebreite begrenzt. */
.show-features-intro{max-width:720px; margin:0 auto 40px; text-align:center;}
.show-features-intro p{color:var(--off-white); font-size:16px; line-height:1.65; margin-bottom:12px;}
.show-features-intro p:first-child{color:var(--off-white); font-weight:700; font-size:17px;}
.show-features-closer{max-width:680px; margin:40px auto 0; text-align:center; color:var(--off-white); font-size:15px; line-height:1.65;}

/* ---------- Tour Dates + Watch the Show (zweispaltig) ---------- */
/* Hintergrund AUSSERHALB der Karte auf Türkis-Verlauf (wie die anderen
   Akzent-Sektionen) — der Inhalt INNERHALB der Karte bleibt unverändert
   auf Schwarz, siehe .split-col--solo weiter unten (dort bekommt die Karte
   eine solide dunkle Füllung, damit sie sich vom türkisen Rand absetzt). */
.split-band{background:linear-gradient(135deg, var(--turkis) 0%, var(--turkis) 22%, var(--turkis-light) 68%, #F3FCFD 100%);}
/* minmax(0,1fr) statt 1fr: verhindert, dass ein Grid-Item mit einem
   width:max-content-Kind (z. B. der Filmstreifen-Track) die Spalte über
   den Container hinaus aufdrückt (klassisches CSS-Grid-Minimum-Content-
   Problem — sonst läuft die Galerie rechts aus dem Rahmen). */
.split-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start;}
/* Tour Dates + Watch the Show: nicht nebeneinander, sondern immer
   untereinander (Tour Dates zuerst, Watch the Show darunter) — auch auf
   Desktop. Höhere Spezifität (.split-band .split-grid) gewinnt zuverlässig
   gegen die zweispaltige .split-grid-Grundregel, betrifft aber nicht die
   Songs/Gallery-Sektion weiter unten, die dieselbe Klasse nutzt. */
.split-band .split-grid{grid-template-columns:1fr; gap:64px;}
.split-col{min-width:0;}
.split-col--solo{
  padding:44px clamp(24px,4vw,56px);
  border:1px solid rgba(92,217,232,.35);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(92,217,232,.06), rgba(92,217,232,.01)), var(--black-mid);
  box-shadow:0 0 0 1px rgba(92,217,232,.06), 0 0 50px -10px rgba(92,217,232,.35);
}
.split-col h2{font-size:clamp(22px,3vw,32px); color:var(--white); text-transform:uppercase; margin-bottom:24px; display:flex; align-items:center; gap:12px;}
.split-col h2::before{content:''; width:22px; height:1px; background:var(--turkis); display:inline-block;}
.video-intro{color:var(--off-white); font-size:15px; line-height:1.6; margin:-8px 0 22px;}
.songs-intro{color:var(--off-white); font-size:15px; line-height:1.6; margin:-8px 0 22px;}

.tour-table{width:100%; border-collapse:collapse;}
.tour-table tr{border-bottom:1px solid rgba(92,217,232,.15);}
.tour-table td{padding:14px 8px; font-size:13.5px; vertical-align:middle;}
.tour-table .td-city{font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--white); width:26%;}
.tour-table .td-venue{color:var(--off-white); width:32%;}
.tour-table .td-date{color:var(--off-white); font-weight:600; width:22%; white-space:nowrap;}
.tour-table .td-cta{text-align:right; width:20%;}
.tour-tickets-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:8px; font-size:13px; font-weight:700;
  line-height:1; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(135deg, var(--turkis-light), var(--turkis)); color:var(--black);
}
.tour-tickets-link svg{width:14px; height:14px;}
.tour-sold-out{
  display:inline-block; padding:8px 14px; border-radius:8px; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#e0625a; border:1px solid rgba(224,98,90,.5);
}
.tour-empty{padding:20px 8px; color:var(--off-white); font-size:14px;}
.tour-table-actions{margin-top:26px; text-align:center;}

.video-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6); cursor:pointer;
  border:1px solid var(--turkis);
  max-width:calc(100% - 60px);
}
.video-frame img{width:100%; height:100%; object-fit:cover;}
.video-frame::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,8,.15), rgba(10,9,8,.55));}
/* Rotierender Text-Ring hinter dem Play-Button: SVG-Text auf Kreispfad,
   die ganze SVG dreht sich per CSS-Animation im Uhrzeigersinn (translate
   zur Zentrierung + rotate im selben transform — rotate dreht dabei immer
   um den eigenen Mittelpunkt der SVG-Box, unabhängig von der Zentrierung).
   pointer-events:none, damit der Ring den Klick auf .play-btn nicht abfängt. */
.video-frame .play-ring{
  position:absolute; top:50%; left:50%; z-index:2;
  width:168px; height:168px;
  transform:translate(-50%,-50%);
  animation:playRingSpin 20s linear infinite;
  pointer-events:none;
}
.video-frame .play-ring-bg{fill:var(--turkis); fill-opacity:.5;}
.video-frame .play-ring-text{
  font-family:'Montserrat', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.1em; fill:var(--black);
}
@keyframes playRingSpin{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}
.video-frame .play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:78px; height:78px; border-radius:50%; padding:0; cursor:pointer; appearance:none; -webkit-appearance:none;
  background:rgba(10,9,8,.55); backdrop-filter:blur(4px);
  border:2px solid var(--turkis);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, background .3s ease;
}
.video-frame .play-btn svg{width:24px; height:24px; fill:var(--turkis-light); margin-left:3px;}
.video-frame:hover .play-btn{transform:translate(-50%,-50%) scale(1.08); background:rgba(92,217,232,.85);}
.video-frame:hover .play-btn svg{fill:var(--black);}
.video-frame .play-btn.is-pressed{transform:translate(-50%,-50%) scale(.92);}
.video-caption{margin-top:18px; text-align:center; color:var(--off-white); font-size:14px;}
.video-caption strong{color:var(--turkis-light); font-weight:700;}

/* ---------- Watch the Show + 40 Years of Hits (zweispaltig) ---------- */
.songs-band{background:var(--black);}
.songs-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 22px;}
.song-item{
  font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--off-white);
  padding-bottom:10px; border-bottom:1px solid rgba(92,217,232,.15);
  display:flex; align-items:flex-start; gap:8px;
  line-height:1.3;
}
.song-item::before{content:'★'; color:var(--turkis); font-size:10px; margin-top:.35em;}
.songs-more{grid-column:1/-1; margin-top:4px; color:var(--off-white); font-size:13px; font-style:italic;}

/* ---------- Gallery (eigene, volle Breite) ----------
   Überschrift bleibt innerhalb von .container, der Filmstreifen selbst
   liegt außerhalb davon und läuft dadurch randlos über die volle
   Viewport-Breite (wie beim Ticker). */
.gallery-section{background:var(--black); padding-bottom:70px;}
.gallery-section .section-head{max-width:780px; margin-bottom:40px;}
.gallery-section .film-gallery{margin:0;}

/* ---------- Filmstreifen-Galerie (aus staging.html übernommen) ---------- */
.film-gallery{display:flex; flex-direction:column; gap:14px;}
.film-row{overflow:hidden; width:100%;}
.film-track{display:flex; align-items:stretch; gap:14px; width:max-content; animation:filmScroll 42s linear infinite;}
.film-row-2 .film-track{animation-duration:30s;}
@keyframes filmScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.film-item{
  position:relative; flex:0 0 auto; height:clamp(140px,20vw,225px); width:auto; aspect-ratio:16/9; border-radius:14px; overflow:hidden; cursor:pointer;
  background:linear-gradient(135deg, rgba(169,239,245,.22), rgba(92,217,232,.12)), var(--black-soft);
  border:1px solid rgba(92,217,232,.18);
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.film-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.film-item:hover{transform:translateY(-5px); box-shadow:0 20px 36px -16px rgba(92,217,232,.4); border-color:rgba(92,217,232,.6);}
/* Hochformat-Kacheln (Mobile-Aufnahmen der Fans/Crew) — echtes Handyfoto-
   Seitenverhältnis (9:16) statt fixer Breite: die Breite ergibt sich
   automatisch aus der (fließenden, per clamp() skalierenden) Zeilenhöhe
   von .film-item, damit auf jeder Viewport-Breite — nicht nur an einem
   festen Breakpoint — das volle Hochkant-Motiv sichtbar bleibt statt eines
   breiten Ausschnitts. */
.film-item--portrait{width:auto; aspect-ratio:9/16;}
.gallery-actions{margin-top:22px; text-align:center;}

/* ---------- Lightbox (aus staging.html übernommen) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,9,8,.94); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:40px;
}
.lightbox[hidden]{display:none;}
.lightbox-img{max-width:90vw; max-height:85vh; border-radius:12px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);}
.lightbox-close{
  position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(92,217,232,.4);
  color:var(--turkis-light); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover{background:rgba(92,217,232,.85); color:var(--black); transform:scale(1.06);}
.lightbox-close svg{width:20px; height:20px;}
.lightbox-close:focus-visible{outline:2px solid var(--turkis-light); outline-offset:3px;}

/* ---------- Downloads & Rider / Book Venue ---------- */
/* Zweispaltig nach Kundenreferenz: links dunkler Downloads-Container
   (Press Kit / Photos / Technical Rider / Stage Plot), rechts Foto mit
   Overlay, Headline, Kurztext und Booking-Button. */
.venue-band{position:relative;}
.venue-band{padding-top:0;}
.venue-band .section-head{max-width:760px;}
@media (min-width:769px){
  .venue-band .section-head h2{white-space:nowrap;}
}

.book-band{margin-top:70px;}

.downloads-band{margin-top:90px;}
.downloads-band h2{font-size:clamp(20px,2.2vw,26px); color:var(--turkis-light); text-transform:uppercase; letter-spacing:.03em; font-weight:800;}

/* Einfacher kurzer Strich statt Stern+zwei Linien (Stern-SVG und zweite
   Linie im HTML bleiben vorhanden, werden hier nur ausgeblendet). Farbe
   durchgehend statt Verlauf. */
.venue-divider{display:flex; align-items:center; gap:12px; margin:14px 0 26px;}
.venue-divider .line{height:2px; width:32px; background:var(--turkis);}
.venue-divider .line:last-child{display:none;}
.venue-divider svg{display:none;}

.download-list{display:flex; flex-direction:column; gap:14px;}
/* Symmetrisches 2-Spalten-Raster statt einer einzelnen Liste — jetzt, wo
   der Downloads-Block die volle Container-Breite hat statt nur eine
   schmale halbe Spalte. */
.download-list--grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.download-item{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border:1px solid rgba(92,217,232,.35); border-radius:10px;
  background:rgba(169,239,245,.03);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.download-item:hover{border-color:rgba(92,217,232,.85); background:rgba(92,217,232,.09); transform:translateY(-2px);}
.download-item .dl-icon{flex:0 0 auto; width:20px; height:20px; color:var(--turkis-light);}
.download-item .dl-label{flex:1 1 auto; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--off-white);}
.download-item .dl-arrow{flex:0 0 auto; width:17px; height:17px; color:var(--turkis);}

/* ---------- Contact / Booking form (aus staging.html übernommen) ---------- */
.contact-section{background:linear-gradient(135deg, var(--turkis) 0%, var(--turkis) 22%, var(--turkis-light) 68%, #F3FCFD 100%);}
.contact-wrap{max-width:760px; margin:0 auto; text-align:center;}
.contact-wrap .eyebrow{justify-content:center; color:var(--black);}
.contact-wrap .eyebrow::before, .contact-wrap .eyebrow::after{background:var(--black);}
.contact-wrap h2{font-size:clamp(26px,4.2vw,42px); color:var(--black); text-transform:uppercase; margin-top:16px;}
.contact-wrap > p{margin-top:16px; color:rgba(10,9,8,.75); font-size:16px;}

.booking-form{
  margin-top:44px; text-align:left;
  background:rgba(255,255,255,.35); border:1px solid rgba(10,9,8,.15);
  border-radius:var(--radius-lg); padding:38px; backdrop-filter:blur(6px);
}
.form-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin-bottom:20px;}
.field{display:flex; flex-direction:column; gap:8px; min-width:0;}
.field.full{grid-column:1/-1;}
.field label{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--black); opacity:.85;}
.field label .req{color:var(--turkis-deep);}
.field input, .field select, .field textarea{
  width:100%;
  font-family:inherit; font-size:14px; color:var(--black);
  background:rgba(255,255,255,.6); border:1px solid rgba(10,9,8,.18);
  border-radius:8px; padding:13px 14px; outline:none;
  transition:border-color .25s ease, background .25s ease;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(10,9,8,.45);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--turkis-deep); background:rgba(255,255,255,.85);}
.field textarea{resize:vertical; min-height:110px;}
/* iOS Safari berücksichtigt bei type="date" das vertikale padding intern
   nicht zuverlässig (natives Shadow-DOM-Steuerelement) — das Feld wirkt
   dadurch kürzer als die Text-Felder trotz identischem CSS. min-height
   allein reichte nicht (von Anna auf echtem iPhone bestätigt); zusätzlich
   -webkit-appearance:none + line-height als bekannter Workaround, da Safari
   line-height für die Content-Box-Höhe oft eher respektiert als height. */
.field input[type="date"]{
  -webkit-appearance:none; appearance:none;
  min-height:48px; line-height:48px;
  padding-top:0; padding-bottom:0;
}
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0908' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:40px; cursor:pointer;
}
.field select:invalid{color:rgba(10,9,8,.45);}

/* ---------- intl-tel-input (Phone-Feld, Vorwahl-Dropdown) ----------
   Bibliothek ist selbst per CSS-Variablen themebar (offizielle Theming-
   API der Library), ähnlich wie das Altcha-Widget weiter unten. */
.iti{
  --iti-border-color: rgba(10,9,8,.18);
  --iti-hover-color: rgba(92,217,232,.12);
  --iti-country-selector-bg: #fff;
  --iti-icon-color: rgba(10,9,8,.6);
  display:block; width:100%;
}
.iti input.iti__tel-input{
  width:100%; font-family:inherit; font-size:14px; color:var(--black);
  background:rgba(255,255,255,.6); border:1px solid rgba(10,9,8,.18);
  border-radius:8px; padding:13px 14px; outline:none;
  transition:border-color .25s ease, background .25s ease;
}
.iti__selected-dial-code{color:var(--black); font-size:14px;}
.iti input.iti__tel-input:focus{border-color:var(--turkis-deep); background:rgba(255,255,255,.85);}
.field-check{display:flex; align-items:flex-start; gap:10px; margin-top:6px;}

/* ---------- Altcha-Widget (Spam-/Bot-Schutz) ----------
   Altcha ist per CSS-Custom-Properties themebar (offizielle Theming-API,
   keine internen Selektoren nötig). Werte an die helle Formular-Karte
   angepasst (booking-form sitzt auf hellem Cyan-Verlauf, siehe .field
   input weiter oben). */
altcha-widget{
  --altcha-color-base: rgba(255,255,255,.6);
  --altcha-color-border: rgba(10,9,8,.18);
  --altcha-color-text: var(--black);
  --altcha-color-border-focus: var(--turkis-deep);
  --altcha-border-radius: 8px;
  margin-top:18px;
  max-width:100%;
}
.field-check input{margin-top:3px;}
.field-check label{font-size:13px; color:rgba(10,9,8,.7); font-weight:400; text-transform:none; letter-spacing:normal;}
.field-check a{color:var(--turkis-deep); text-decoration:underline;}

.form-actions{margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.form-note{font-size:12px; color:rgba(10,9,8,.6);}
.form-success{
  display:none; margin-top:26px; padding:20px 22px; border-radius:var(--radius);
  background:rgba(255,255,255,.55); border:1px solid rgba(10,9,8,.25);
  color:var(--black); font-size:14px; align-items:center; gap:12px;
}
.form-success.is-visible{display:flex;}
.form-success svg{width:22px; height:22px; flex-shrink:0;}

/* ---------- Footer (1:1 Struktur/Klassen aus staging.html übernommen,
   nur die Farbwerte auf die Schwarz/Gold-Palette dieses Entwurfs gemappt) ---------- */
.site-footer{
  background:var(--black); border-top:1px solid rgba(92,217,232,.12);
  padding:80px 0 0; position:relative; z-index:2;
}
.footer-inner{
  max-width:var(--max-width); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
  padding:0 28px 56px;
}
.footer-logo{height:46px; margin-bottom:16px;}
.footer-ticketshop-link{display:inline-block; margin-top:18px;}
.footer-ticketshop-logo{height:40px; width:auto; display:block;}
.footer-tagline{
  color:var(--white); font-weight:800; line-height:.96; margin:0 0 18px;
  font-size:clamp(42px,8vw,68px);
}
.footer-tagline-line1{display:block;}
.footer-tagline-line2{
  display:block;
  font-size:.4615em;
  margin-top:2px;
  color:var(--white);
}
.footer-brand p{color:var(--off-white); font-size:14px; font-weight:300; line-height:1.6; max-width:360px;}

.footer-col h4{
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--off-white); opacity:.7; margin-bottom:18px;
}
.footer-col a{
  display:block; font-size:14px; color:var(--off-white);
  margin-bottom:12px; transition:color .2s ease, opacity .2s ease;
}
.footer-col a:hover{color:var(--turkis-light);}

.footer-bottom{border-top:1px solid rgba(92,217,232,.12); padding:24px 0; text-align:center;}
.footer-bottom p{font-size:13px; color:var(--off-white);}
.footer-credit-link{color:var(--turkis-light); text-decoration:none;}
.footer-credit-link:hover{text-decoration:underline;}

/* ---------- Social Sidebar (page-weit fixiert, 1:1 aus staging.html übernommen) ---------- */
.social-sidebar{
  position:fixed; z-index:950; display:flex; gap:12px;
  top:50%; right:24px; transform:translateY(-50%); flex-direction:column;
}
.social-sidebar-icon{
  width:42px; height:42px; border-radius:10%;
  background:var(--turkis); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.social-sidebar-icon svg{width:20px; height:20px;}
.social-sidebar-icon:hover{background:var(--turkis-light); transform:translateY(-2px);}

/* ---------- Utility ---------- */
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}


/* =====================================================
   Responsive
   ===================================================== */

@media (max-width:1024px){
  .show-grid{grid-template-columns:1fr;}
  .split-grid{grid-template-columns:1fr; gap:56px;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}

@media (max-width:1100px){
  /* Breakpoint bewusst breiter als der Hero-Breakpoint (900px): Auf
     größeren Tablets (Android-Tablets, iPad Pro querformat etc.) reichte
     die Breite für Logo + 6 Nav-Punkte + CTA-Button in einer Zeile nicht
     mehr aus — Nav-Text wurde umgebrochen/abgeschnitten. Ab hier greift
     stattdessen das Hamburger-Menü. */
  /* Mobile-Menü als "halber Vorhang": fixes Panel direkt unter dem Nav-Header,
     deckt nur die obere Hälfte des Viewports ab (nicht den ganzen Screen) und
     hat einen blickdichten dunklen Hintergrund, damit der Seiteninhalt
     dahinter nicht durchscheint. */
  .nav-links{
    position:fixed; top:60px; left:0; right:0; height:50vh;
    background:var(--black);
    flex-direction:column; justify-content:flex-start; align-items:center;
    gap:26px; padding:44px 24px; overflow-y:auto;
    box-shadow:0 24px 48px -16px rgba(0,0,0,.7);
    border-bottom:1px solid rgba(92,217,232,.15);
    z-index:1050;
    transform:translateY(-110%); opacity:0; pointer-events:none;
    transition:transform .4s ease, opacity .4s ease;
  }
  .nav-links.is-open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-toggle{display:block;}
  .feature-row{gap:22px 28px;}
}

@media (max-width:768px){
  /* Hero-Mobile-Layout liegt jetzt im 900px-Breakpoint oben (.hero-left/.hero-right). */
  .footer-inner{grid-template-columns:1fr; padding:0 20px 40px;}
  .site-footer{padding:56px 0 0;}
  .footer-tagline{font-size:clamp(46px,16vw,64px);}
  .footer-ticketshop-logo{height:40px;}
  .tour-table .td-venue{display:none;}
  .download-list--grid{grid-template-columns:1fr;}

  /* Abstand zwischen "Not only looking back" und der nächsten Sektion
     auf Mobile nochmal enger als am Desktop. */
  .show-section{padding-bottom:24px;}

  /* Video-Rahmen auf Mobile zentriert statt linksbündig. */
  .video-frame{margin:0 auto;}

  /* Ticker-Schrift auf Mobile doppelt so groß wie zuvor (Basiswert war
     effektiv der clamp-Mindestwert 26px, jetzt 52px). */
  .ticker-track span{font-size:clamp(52px,7.6vw,64px); padding:0 24px;}

  /* Countdown: alle vier Werte bleiben auf Mobile in einer Reihe statt
     umzubrechen (2x2) — Schrift entsprechend kleiner. */
  .countdown-timer{flex-wrap:nowrap; gap:3vw;}
  .countdown-num{
    font-size:clamp(36px,12vw,60px);
    filter:drop-shadow(0 0 8px rgba(92,217,232,.55)) drop-shadow(0 0 20px rgba(92,217,232,.25));
  }
  .countdown-label{font-size:11px;}

  /* Platz für die fixe Social-Sidebar am unteren Rand freihalten (1:1 aus staging.html) */
  body{padding-bottom:68px;}
  .social-sidebar{
    top:auto; bottom:0; left:0; right:0; transform:none;
    flex-direction:row; justify-content:center; gap:16px; padding:12px 0;
    background:rgba(10,9,8,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(92,217,232,.15);
  }
  .social-sidebar-icon{width:38px; height:38px;}
}

@media (max-width:640px){
  .form-row{grid-template-columns:1fr;}
  .songs-grid{grid-template-columns:1fr;}
  .tour-table .td-date{white-space:normal;}
}

@media (max-width:460px){
  .nav .uc-logo-fallback .word{display:none;}
  .nav-cta{gap:10px;}
  .nav .btn{padding:9px 14px;}
}