:root{
  --bg:#0f1011;
  --fg:#f0f0f0;
  --muted:#aaa;
  --brand:#EE1B00;
  --brand-2:#457b9d;
  --radius:0.25rem;
  --radius-btn:0.5rem;
  --shadow:0 4px 20px rgba(0, 0, 0, 0.4);
  --transition:0.3s ease;
  --font:system-ui,sans-serif
}

html {
  scroll-behavior: smooth;
}

*,::after,::before{
  box-sizing:border-box
}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  line-height:1
}
img,video{
  max-width:100%;
  display:block
}
a{
  color:var(--fg);
  text-decoration:none;
  transition:var(--transition)
}
a:hover{
  color:var(--brand)
}
.container{
  width:clamp(70vw, 80vw, 90vw);
  margin-inline:auto
}


@media (max-width:768px){
  
  .container{
   width:clamp(70vw, 90vw, 97vw);
   margin-inline:auto
  }

  .section__header h2{
  overflow: visible;
  }
 .section__header h2::after {
    right: 0.2em;
    width: 1.1em;
    height: 1.1em;
  }

}


.contact-info{
  display:flex;
  justify-content:center;
  align-items:center;
  max-width:90vw;
  margin-bottom: 0.5rem;
  /* margin:0 auto 0.5rem */
}
.contact-info a{
  font-size:1rem;
  color:var(--fg);
  padding:0.5rem
}
.contact-info p{
  font-size:1rem;
  color:var(--fg);
  padding:0.5rem;
  margin: 0rem;
}

.contact-info a:hover{
  font-size:1.2rem;
  color:var(--brand)
}
.container p{
  font-size:1rem
}
.section{
  scroll-margin-top:3rem;
  padding:clamp(1rem,2vw,3rem) 0
}
.section__header{
  text-align:left;
  margin-bottom:2rem;
  position:relative;
  max-width: 100%;
  overflow: hidden;
}
.section__header h2{
  position:relative;
  display:inline-block;
  font-size:clamp(2rem,1.2rem + 2vw,3rem);
  font-weight:700;
  margin-bottom:1rem;
  /* overflow: hidden; */
  /* padding-right: 2.5rem; */
}

/* Kobold bei den Überschriften */
#programm .section__header h2::after{
  content:"";
  position:absolute;
  bottom:0em;
  right:-1.8em;
  width:2.2em;
  height:2.2em;
  background:url(images/kobold.webp) no-repeat center/contain;
  pointer-events:none;
  transform:rotate(15deg);
  transform-origin:center;
} 

.section__header p{
  color:var(--muted);
  /* max-width:60vw; */
  margin:0;
  text-align:justify;
  font-size: 1.2rem;
  line-height: 1.2;
}
#about .section__header p{
  /* color:var(--muted); */
  color: var(--fg);
  /* max-width:60vw; */
  margin:0;
  margin-bottom: 0.3rem;
  text-align:left
}
#veranstalter .section__header p{
  /* color:var(--muted); */
  color: var(--fg);
  /* max-width:60vw; */
  margin:0;
  margin-bottom: 0.3rem;
  text-align:left
}

.hero{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  height:100vh;
  width:100%;
  overflow:hidden;
  color:#fff
}
.hero__subtitle{
  font-size:clamp(.85rem,1.5vw,1rem)
}
.hero video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
  top:0;
  left:0;
  object-fit:cover
}
.hero img{
  width: clamp(70vw,80vw, 90vw);
}
.hero__inner{
  z-index:2
}
.hero__logo{
  width:auto;
  max-width:90vw;
  margin:0
}
.hero__logos-mobile{
  display:none;
  z-index:2
}
.hero__logo-item img{
  display:block;
  width:100%;
  height:auto
}
@media (max-width:768px){
  .hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:1.5rem
  }
  .hero__logos-mobile{
    margin-top:1.5rem;
    margin-bottom:10rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.75rem;
    width:100%
  }
  .hero__logo{
    display:none
  }
  .hero__logos-mobile img{
    max-width:90vw;
    border-radius:var(--radius);
    box-shadow:none
  }
  
}
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0
}
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
  z-index:998;
  display:none
}
.nav-overlay.is-active {
  display: block;
}
.nav__social-wrapper{
  display:block
}
@media (min-width:969px){
  .nav__social-wrapper{
    display:block
  }
  .nav__social{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
  }
  
}
@media (max-width:968px){
  .nav__social-wrapper{
    width:100%;
    margin-top:1rem
  }
  .nav__social{
    position:static;
    transform:none;
    justify-content:center
  }
  
}
.nav__social{
  display:flex;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0;
  justify-content:center
}
.nav__social a{
  color:var(--fg);
  font-size:1.4rem;
  transition:color .3s ease
}
.nav__social a:hover{
  color:var(--brand)
}
.nav__list{
  display:flex;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0
}
.nav__list a{
  color:#f0f0f0
}
.nav__list a:hover{
  color:var(--brand)
}
.nav__toggle{
  display:none;
  background:0 0;
  border:none;
  color:var(--fg);
  font-size:2rem;
  cursor:pointer
}
@media (max-width:968px){
  .nav__list{
    display:none;
    flex-direction:column;
    gap:1rem;
    background:rgba(0,0,0,.4);
    padding:1rem;
    margin-top:1rem;
    border-radius:var(--radius);
    position:absolute;
    top:100%;
    right:1rem;
    z-index:999
  }
  .nav__social{
    gap:.75rem
  }
  .nav__social a{
    font-size:1.1rem
  }
  .nav__toggle{
    display:block
  }
  .nav__list.is-open {
    display: flex;
  }
}
.btn{
  display:inline-block;
  padding:.6rem 1.1rem;
  border-radius:var(--radius-btn);
  border:none;
  cursor:pointer;
  font-size:1rem;
  transition:var(--transition)
}
.btn--ghost{
  background:0 0;
  color:var(--fg);
  border-radius:var(--radius-btn);
  border:1px solid var(--fg);
  padding:.5rem 1rem;
  margin-bottom:.2rem
}
.btn--ghost:hover{
  background:var(--fg);
  color:var(--bg)
}
.player{
  background:#1a1b1e;
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow)
}
.player__title{
  font-weight:600;
  margin-bottom:.5rem
}
.player__time{
  color:var(--muted);
  font-size:.9rem
}
.player__list{
  list-style:none;
  padding:0;
  margin:1rem 0 0
}
.player__item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.5rem 0;
  border-bottom:1px solid #333
}
.player__item:last-child{
  border-bottom:none
}
.player__btn{
  background:0 0;
  color:var(--fg);
  border:1px solid var(--fg);
  padding:.4rem .8rem;
  border-radius:var(--radius-btn);
  cursor:pointer;
  transition:var(--transition)
}
.player__btn:hover{
  background:var(--fg);
  color:var(--bg)
}
.table{
  width:100%;
  min-width:400px;
  border-collapse:collapse;
  background:#1a1b1e;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow)
}
.table-wrapper{
  width:100%;
  overflow-x:auto;
}
.table th{
  padding: 0.5rem 0.5rem 0.5rem 0.5rem; /* über den werten, zwischen den werten,unter den werten,zeilenende */
  text-align:left
}
.table th{
  background:#222;
  font-weight:600
}
.table td{
  font-size: 0.9rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem  /* über den werten, zwischen den werten,unter den werten,zeilenende */
}
#video{
  background:url(images/detailseite-bg.webp) center/cover no-repeat;
  position:relative;
  z-index:1
}
.video-card .open-video:hover{
  transform:scale(1.05)
}

@media (max-width:768px){
  .spalten-video{
    flex-direction:column
  }
  .spalten-video::before{
    left:0;
    right:0;
    top:50%;
    width:100%;
    height:2px
  }
  .video-card{
    flex:0 0 auto;
    text-align:center
  }
  
}
.modal{
  width:min(100% - 2rem,1000px);
  border:0;
  padding:0;
  background:0 0
}
.modal::backdrop{
  background:rgba(0,0,0,.7)
}
.modal__close{
  position:absolute;
  right:.75rem;
  top:.5rem;
  background:0 0;
  border:0;
  color:var(--fg);
  font-size:1.8rem;
  cursor:pointer
}
.video-embed{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow)
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#000
}
.video-card{
  display:flex;
  justify-content:center;
  margin:2rem auto;
  flex:0 0 50%;
  padding:1rem 1rem 1rem 0;
  box-sizing:border-box
}
.open-video{
  display:inline-block;
  position:relative;
  cursor:pointer;
  border:none;
  background:0 0
}
.play-icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3rem;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  pointer-events:none
}
.gallery-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
}
@media (max-width:600px){
  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
    gap:.5rem
  }
  .gallery-grid img{
    border-radius:var(--radius)
  }
  
}
.gallery-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .2s ease
}
.gallery-grid img:hover{
  transform:scale(1.05)
}
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000
}
.lightbox.hidden{
  display:none
}
.lightbox img{
  max-width:90%;
  max-height:80%;
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.lightbox__close{
  position:absolute;
  top:1rem;
  right:1.5rem;
  background:0 0;
  border:none;
  color:#fff;
  font-size:2.5rem;
  cursor:pointer
}
.lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:0 0;
  border:none;
  color:#fff;
  font-size:3rem;
  cursor:pointer;
  padding:0 1rem
}
#lightbox-prev{
  left:1rem
}
#lightbox-next{
  right:1rem
}
.newsletter{
  max-width:90vw;
  margin:0 auto;
  text-align:center
}
.newsletter__form{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-bottom:1rem
}
.newsletter__form input{
  flex:1;
  padding:.75rem;
  border-radius:var(--radius-btn);
  border:1px solid #333;
  background:#1a1b1e;
  color:var(--fg);
  font-size: 1rem;
}
.newsletter__form button{
  background:0 0;
  color:var(--fg);
  border:1px solid var(--fg);
  padding:.65rem 1.25rem;
  border-radius:var(--radius-btn);
  cursor:pointer
}
.newsletter__form button:hover{
  background:var(--fg);
  color:var(--bg)
}
.newsletter p{
  font-size:smaller;
  line-height:normal;
  margin:.25rem 0
}
@media (max-width:768px){
  .newsletter__form{
    flex-direction:column;
    align-items:stretch
  }
  
}
#about{
  background:url(images/about-bg.webp) center/cover no-repeat;
  position:relative;
  z-index:1
}
#about::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:-1
}
.about{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items:flex-start
}
.text p{
  text-align:justify;
  hyphens:auto
}

#downloads{
  background:url(images/detailseite-bg.webp) center/cover no-repeat;
  position:relative;
  z-index:1
}

.spalten{
  z-index:1;
  display:flex;
  position:relative;
  flex-wrap:wrap
}
.spalten::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:var(--fg)
}
.veranstalter_konzert{
  display:flex;
  /* flex-direction: column; */
  justify-content:center;
  align-items:center;
  max-width:90vw;
  margin-bottom: 0.5rem;
  /* flex:0 0 50%;
  padding:1rem 1rem 1rem 0;
  box-sizing:border-box */
}

.veranstalter_konzert .btn--ghost{
  margin:0.5rem; 
}

.veranstalter_tanz{
  flex:0 0 50%;
  padding:1rem;
  box-sizing:border-box
}
@media (max-width:768px){
  .spalten{
    flex-direction:column
  }
  .spalten::before{
    left:0;
    right:0;
    top:50%;
    width:100%;
    height:2px;
    z-index: 0;
  }
  .veranstalter_konzert,.veranstalter_tanz{
    flex:0 0 auto;
    text-align:center;
    flex-direction: column;
  }
  
}
.veranstalter_tanz img{
  max-width:30vw
}
.veranstalter_konzert img{
  max-width:30vw
}
.container-header{
  margin:0;
  padding:0 1rem;
  height:3rem
}
.site-header{
  box-shadow:none;
  position:sticky;
  top:0;
  z-index:1000
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  pointer-events:none;
  z-index:-1;
  backdrop-filter:blur(3px)
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  gap:1rem;
  padding:.5rem 1rem
}
.logo{
  font-size:1.5rem;
  font-weight:200;
  color:var(--fg);
  text-decoration:none
}
.logo img{
  height:3rem;
  width:auto;
  display:block
}
.logo img:hover{
  transform:scale(1.2)
}
/* .logo span{
  color:var(--fg)
} */
.footer{
  text-align:center;
  padding:.5rem;
  font-size:.9rem;
  color:var(--muted);
  background:#1a1b1e
}
.footer__inner{
  max-width:90vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap
}
@media (max-width:768px){
  .footer__inner{
    flex-direction:column;
    justify-content:space-evenly
  }
  .footer__inner a{
    padding-bottom: 0.5rem;
  }
  .footer__inner small{
    padding-bottom: 0.8rem;
  }
  
}
.impressum p{
  margin-bottom:1rem;
  line-height:1.2
}
.impressum-footer{
  text-align:center;
  padding:2rem 1rem;
  font-size:.9rem;
  color:var(--muted);
  background:#000
}
.impressum-header{
  background:#1a1b1e;
  box-shadow:none;
  position:sticky;
  top:0;
  z-index:1000
}
.card{
  background:0 0;
  padding:0;
  box-shadow:none;
  border-radius:var(--radius)
}
.band-slider{
  display:flex;
  justify-content:space-evenly;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  transition:opacity .5s ease;
  border-radius:var(--radius);
  opacity:1
}
.band-slider.hidden{
  opacity:0
}
.member{
  flex:0 0 240px;
  cursor:pointer;
  text-align:center;
  padding:.5rem
}
.member img{
  width:100%;
  border-radius:var(--radius);
  display:block;
  box-shadow:var(--shadow)
}
.member-detail{
  opacity:1;
  transition:opacity .5s ease
}
.member-detail.hidden{
  display:none;
  opacity:0
}
.member-detail img.detail-img{
  max-width:300px;
  border-radius:var(--radius);
  margin-bottom:1rem
}
.member img{
  width:320px;
  height:auto;
  border-radius:var(--radius)
}
.member-text{
  text-align:center;
  margin-top:1rem
}
.member-name{
  font-weight:700;
  font-size:2rem
}
.member-instrument{
  font-size:1.5rem;
  color:var(--fg)
}
.member img:hover{
  transform:scale(1.05)
}
@media (max-width:768px){
  .member-detail .detail-content{
    display:flex;
    flex-direction:column;
    align-items:center
  }
  .member-detail .detail-img{
    width:80%;
    max-width:300px;
    margin-bottom:1rem
  }
  .member-detail .bio-text{
    text-align:left;
    font-size:1.5rem;
    line-height:1.4
  }
  
}
.back-btn{
  margin-left:auto;
  border-radius:var(--radius)
}
.back-btn.hidden{
  display:none
}
.detail-content{
  display:flex;
  gap:2rem;
  align-items:flex-start
}
.detail-img{
  max-width:250px;
  border-radius:var(--radius)
}
@media (max-width:768px){
  .detail-content{
    flex-direction:column
  }
  
}
.headline{
  display:flex;
  align-items:center;
  gap:1rem
}
dialog{
  border:none;
  border-radius:var(--radius);
  padding:1rem;
  width:clamp(60vw,400px ,90vw)
}
dialog::backdrop{
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(3px)
}
label{
  font-size:.9em;
  margin-bottom:3px
}
input{
  padding:6px
}
.modal{
  border:none;
  padding:0;
  background:0 0;
  width:100%;
  max-width:900px;
  margin:auto
}
.modal::backdrop{
  background:rgba(0,0,0,.8)
}
.modal-content{
  position:relative;
  background:#000;
  border-radius:12px;
  overflow:hidden
}
.modal-content iframe{
  width:100%;
  height:500px
}
.close{
  position:absolute;
  top:10px;
  right:20px;
  font-size:2rem;
  color:#fff;
  background:0 0;
  border:none;
  cursor:pointer
}