/*
 * PROJECT SOUNDTRACK – iPad / Tablet Layout
 * Wird nach style.css geladen und überschreibt ausschließlich Tablet-Probleme.
 */

/* Der Bereich soll auch dann sauber aussehen, wenn ältere Haupt-CSS gecacht ist. */
#upcoming .events-pass-grid{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:20px;
  align-items:stretch;
}

#upcoming .events-pass-grid>.panel{
  min-width:0;
  margin:0;
  box-sizing:border-box;
}

#upcoming .next-soundtrack-panel{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 50% 18%,rgba(214,168,75,.08),transparent 28%),
    linear-gradient(160deg,#0b0b0b 0%,#070707 68%,#050505 100%);
}

#upcoming .next-soundtrack-visual{
  position:relative;
  min-height:245px;
  margin:20px 0 24px;
  overflow:hidden;
  border:1px solid rgba(214,168,75,.32);
  background:
    radial-gradient(circle at 72% 30%,rgba(214,168,75,.18),transparent 24%),
    linear-gradient(135deg,#0a0907 0%,#050505 68%);
}

#upcoming .next-soundtrack-visual:before,
#upcoming .next-soundtrack-visual:after{
  content:"";
  position:absolute;
  left:-10%;
  width:120%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,168,75,.7),transparent);
  transform:rotate(-8deg);
}

#upcoming .next-soundtrack-visual:before{top:43%}
#upcoming .next-soundtrack-visual:after{
  top:61%;
  opacity:.42;
  transform:rotate(6deg);
}

#upcoming .next-soundtrack-glow{
  position:absolute;
  right:14%;
  top:18%;
  width:135px;
  height:135px;
  border:1px solid rgba(214,168,75,.52);
  border-radius:50%;
  box-shadow:0 0 55px rgba(214,168,75,.12),inset 0 0 55px rgba(214,168,75,.05);
}

#upcoming .next-soundtrack-number{
  position:absolute;
  left:22px;
  bottom:26px;
  color:#f4f1eb;
  font-family:Impact,'Arial Narrow Bold',sans-serif;
  font-size:clamp(3rem,5vw,5.2rem);
  line-height:.85;
  letter-spacing:.02em;
}

#upcoming .next-soundtrack-watermark{
  position:absolute;
  right:20px;
  bottom:18px;
  color:#d6a84b;
  font-size:.55rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

#upcoming .next-soundtrack-label{
  margin-bottom:9px;
  color:#d6a84b;
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

#upcoming .next-soundtrack-copy h3{
  margin:0 0 12px;
  font-size:clamp(1.75rem,3vw,3rem);
  line-height:1;
  text-transform:uppercase;
}

#upcoming .next-soundtrack-copy p{
  color:#c8c1b7;
  line-height:1.62;
}

#upcoming .next-soundtrack-status{
  margin:auto 0 0;
  border-top:1px solid #392a13;
}

#upcoming .next-soundtrack-status>div{
  display:grid;
  grid-template-columns:minmax(100px,.7fr) minmax(0,1fr);
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid #392a13;
}

#upcoming .next-soundtrack-status dt,
#upcoming .next-soundtrack-status dd{margin:0}

#upcoming .next-soundtrack-status dt{
  color:#8f8a82;
  font-size:.65rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#upcoming .next-soundtrack-status dd{
  color:#e2bd67;
  font-size:.72rem;
  letter-spacing:.05em;
  text-align:right;
  text-transform:uppercase;
}

#upcoming .backstage-pass-panel{
  background:
    radial-gradient(circle at 88% 10%,rgba(214,168,75,.10),transparent 26%),
    linear-gradient(145deg,#0d0b08 0%,#080808 58%,#050505 100%);
}

#upcoming .backstage-pass-panel h2{
  margin:.16em 0 .28em;
  font-size:clamp(2.6rem,5vw,5.2rem);
  line-height:.96;
}

#upcoming .backstage-intro{
  color:#cbc4b9;
  line-height:1.65;
}

#upcoming .backstage-reasons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:24px 0 26px;
}

#upcoming .backstage-reasons>div{
  min-height:118px;
  padding:17px;
  border:1px solid rgba(214,168,75,.28);
  background:rgba(255,255,255,.015);
  box-sizing:border-box;
}

#upcoming .backstage-reasons strong{
  display:block;
  margin-bottom:8px;
  color:#e2bd67;
  font-size:.73rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#upcoming .backstage-reasons span{
  color:#c9c1b6;
  font-size:.79rem;
  line-height:1.52;
}

#upcoming .backstage-inline-form{
  padding-top:22px;
  border-top:1px solid #392a13;
}

#upcoming .backstage-form-row{
  display:grid;
  grid-template-columns:minmax(145px,.7fr) minmax(220px,1.2fr);
  gap:10px;
}

#upcoming .backstage-form-row input,
#upcoming .backstage-form-row .btn{
  width:100%;
  min-height:52px;
  box-sizing:border-box;
}

#upcoming .backstage-form-row .btn{
  grid-column:1/-1;
}

#upcoming .backstage-consent{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:12px;
  line-height:1.45;
}

/* iPad und vergleichbare Tablets */
@media (min-width:761px) and (max-width:1180px){
  .container{
    width:min(94vw,1120px);
  }

  /* Menü auf Tablets als Hamburger statt gequetschter Sechsfachnavigation */
  .site-header .nav{
    height:82px;
    grid-template-columns:1fr auto!important;
    gap:18px!important;
  }

  .site-header .brand img{
    width:60px;
    height:60px;
  }

  .site-header .brand-text{
    font-size:.85rem;
  }

  .site-header .menu-toggle{
    display:block!important;
  }

  .site-header .menu{
    display:none!important;
    position:absolute;
    top:82px;
    left:0;
    right:0;
    z-index:100;
    padding:12px 5vw 18px;
    flex-direction:column;
    gap:0!important;
    background:#050505;
    border-bottom:1px solid #392a13;
  }

  .site-header .menu.open{
    display:flex!important;
  }

  .site-header .menu a{
    padding:12px 0!important;
    border-bottom:1px solid rgba(214,168,75,.14);
  }

  #upcoming .section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
    align-items:start!important;
  }

  #upcoming .section-head h2{
    max-width:100%!important;
    font-size:clamp(3.7rem,8.5vw,6.4rem)!important;
    overflow-wrap:normal;
  }

  #upcoming .section-head .lead{
    max-width:700px!important;
    margin:0!important;
  }

  #upcoming .events-pass-grid{
    grid-template-columns:1fr!important;
  }

  #upcoming .next-soundtrack-panel,
  #upcoming .backstage-pass-panel{
    padding:30px!important;
  }

  #upcoming .next-soundtrack-visual{
    min-height:280px;
  }

  #upcoming .next-soundtrack-copy{
    max-width:720px;
  }
}

/* Hochformat / schmalere Tablets */
@media (min-width:761px) and (max-width:900px){
  #upcoming .backstage-reasons{
    grid-template-columns:1fr!important;
  }

  #upcoming .backstage-form-row{
    grid-template-columns:1fr!important;
  }

  #upcoming .backstage-form-row .btn{
    grid-column:auto;
  }
}