:root {
    --clr-primary-100: #ebebeb;
    --clr-primary-100-header: #ebebebd2;
    --clr-primary-200: #B1A296;
    --clr-primary-200-header: #5D5C6180;
    --clr-primary-300-header: #ebebeb7c;
    --clr-primary-800: #5D5C61;
    --clr-background: rgb(0, 0, 0);
    --clr-background-header: rgb(0, 0, 0, 0.6);
    font-family: system-ui;
    --fs-big: 1rem;
    --fs-medium: 0.8rem;
    --fs-small: 0.7rem;
    --fs-nav: 1rem;
    --fs-media: 2rem;
    --fs-bandh1: 0.8rem;
    --fs-p-Im: 0.5rem;
    /* Nav */
    --bar-width: 40px;
    --bar-height: 5px;
    --hamburger-gap: 3px;
    --foreground: #434343;
    --background: white;
    --hamburger-margin: 5px;
    --animation-timing: 300ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    /* Padding */
    --pd-t-b: 2rem;
    --pd-l-r: 1rem;
    --pd-term-lr: 2rem;
    --pd-term-tb: calc(100vh / 60);
    --pd-book-l-r: 2.5rem;
    --pd-book-t: 2rem;
    --pd-down-l-r: 2rem;
    /* Foto */
    --logo-w: 80vw;
    --logo-h: 60vh;
    --fig-h: 10rem;
    --gal-fig: 30vh;
    --pic-r: 5px;
    --gal-arrow: 10vw;
    --fig-sec: calc(var(--gal-fig) + 20vh)
}

@media (min-width:375px) {
     :root {
        --pd-term-lr: 2rem;
        --pd-down-l-r: 2rem;
        --fs-p-Im: 0.5rem;
        /* Foto */
        --logo-w: 80vw;
        --fig-h: 13rem;
        --gal-fig: 30vh;
        --pic-r: 5px;
    }
}

@media (min-width:700px) {
     :root {
        --fs-big: 1.5rem;
        --fs-medium: 1.2rem;
        --fs-small: 0.85rem;
        --fs-nav: 1.1rem;
        --fs-media: 3rem;
        --fs-bandh1: 1.25rem;
        --fs-p-Im: 0.7rem;
        /* Padding */
        --pd-t-b: 2rem;
        --pd-l-r: 5rem;
        --pd-term-lr: 2rem;
        --pd-book-l-r: 10rem;
        --pd-down-l-r: 10rem;
        /* Foto */
        --logo-w: 70vw;
        --fig-h: 25rem;
        --gal-fig: 45vh;
        --pic-r: 5px;
    }
}

@media (min-aspect-ratio: 1/1) and (min-width:700px) {
     :root {
        --gal-fig: 60vh;
    }
}

@media (min-width:1000px) {
     :root {
        --fs-big: 1.7rem;
        --fs-medium: 1.2rem;
        --fs-small: 1.0rem;
        --pd-term-lr: 2rem;
        --pd-book-l-r: 15rem;
        --pd-down-l-r: 15rem;
        --fs-p-Im: 0.8rem;
        /* Foto */
        --logo-w: 80vw;
        --fig-h: 30rem;
        --gal-fig: 45vh;
        --pic-r: 5px;
    }
}

@media (min-aspect-ratio: 1/1) and (min-width:1000px) {
     :root {
        --gal-fig: 70vh;
    }
}

@media (min-width:1200px) {
     :root {
        --fs-big: 2rem;
        --fs-medium: 1.7rem;
        --fs-small: 1.25rem;
        --fs-nav: 1.25rem;
        --fs-media: 3rem;
        --fs-bandh1: 1.5rem;
        --fs-p-Im: 0.8rem;
        /* Padding */
        --pd-t-b: 2rem;
        --pd-l-r: 12rem;
        --pd-term-lr: 2rem;
        --pd-book-t: 2rem;
        --pd-book-l-r: 20rem;
        --pd-down-l-r: 20rem;
        /* Foto */
        --logo-w: 60vw;
        --fig-h: 30rem;
        --gal-fig: 55vh;
        --pic-r: 10px;
        --gal-arrow: 15vw;
    }
}

@media (min-aspect-ratio: 1/1) and (min-width:1200px) {
     :root {
        --gal-fig: 70vh;
    }
}

@media (min-width:1600px) {
     :root {
        --fs-big: 2.5rem;
        --fs-medium: 2rem;
        --fs-small: 1.25rem;
        --fs-nav: 1.25rem;
        --fs-media: 3rem;
        --fs-bandh1: 1.75rem;
        --fs-p-Im: 0.8rem;
        /* Padding */
        --pd-t-b: 2rem;
        --pd-l-r: 25rem;
        --pd-term-lr: 20rem;
        --pd-book-t: 2rem;
        --pd-book-l-r: 40rem;
        --pd-down-l-r: 40rem;
        /* Foto */
        --logo-w: 60vw;
        --fig-h: 35rem;
        --gal-fig: 55vh;
        --pic-r: 10px;
        --gal-arrow: 15vw;
    }
}

@media (min-width:2000px) {
     :root {
        --fs-big: 3rem;
        --fs-medium: 2.25rem;
        --fs-small: 1.5rem;
        --fs-nav: 1.5rem;
        --fs-media: 4rem;
        --fs-p-Im: 0.8rem;
        /* Padding */
        --pd-t-b: 2rem;
        --pd-l-r: 30rem;
        --pd-term-lr: 2rem;
        --pd-book-t: 2rem;
        --pd-book-l-r: 50rem;
        --pd-down-l-r: 50rem;
        /* Foto */
        --logo-w: 50vw;
        --fig-h: 35rem;
        --gal-fig: 60vh;
        --pic-r: 15px;
        --gal-arrow: 20vw;
    }
}

*,
*::before *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--fs-small);
}

html,
body {
    background-color: var(--clr-background);
    margin: 0;
    padding: 0;
}

.section {
    background-color: var(--clr-background);
    color: var(--clr-primary-100);
    padding: var(--pd-t-b) var(--pd-l-r);
}

.section_info {
    background-color: var(--clr-background);
    color: var(--clr-primary-100);
    padding: var(--pd-t-b) var(--pd-book-l-r);
}

.Titelbild {
    width: 100%;
    height: auto;
    display: block;
}


.Home {
    background-color: var(--clr-background);
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 75% 1fr 1fr;
    place-items: center;
}

.wrapper {
    text-align: center;
    align-items: center;
    background-color: var(--clr-background);
}

.Info {
    justify-content: center;
    text-align: justify;
}

.Logo_Overhead {
    width: min(var(--logo-w), var(--logo-h))
}




/* ###################### Text ######################  */

h1 {
    font-size: var(--fs-big);
    line-height: var(--fs-big);
    font-style: inherit;
    padding-bottom: var(--fs-big);
    padding-top: 0rem;
}

h2 {
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: var(--fs-small);
    font-style: inherit
}

p {
    font-size: var(--fs-small);
    line-height: var(--fs-small);
    font-weight: 100;
}

.Infotitel p {
    justify-content: center;
    text-align: justify;
    line-height: var(--fs-medium);
    padding-bottom: var(--fs-nav);
}

.headertext {
    font-size: var(--fs-big);
    color: #ebebeb;
    padding: 0;
    font-weight: 100;
}

.Ueberschrift h2 {
    font-size: var(--fs-nav);
    font-style: italic;
    padding-bottom: var(--fs-nav);
}


/* ###################### Navigationsleiste ######################  */

.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.41);
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: absolute;
    top: var(--hamburger-margin);
    right: calc(var(--pd-l-r) + 10px);
    z-index: 3;
}

.hamburger-menu:before,
.hamburger-menu:after,
.hamburger-menu input {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: #ebebeb;
    border-radius: 9999px;
    transform-origin: left center;
    transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), transform var(--animation-timing);
}

.hamburger-menu input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
    /* will-change: auto; */
}

.hamburger-menu input:checked {
    opacity: 0;
    width: 0;
}

.hamburger-menu:has(input:checked)::before {
    transform: rotate(45deg);
    width: var(--x-width);
    translate: 0 calc(var(--bar-height)/ -2);
}

.hamburger-menu:has(input:checked)::after {
    transform: rotate(-45deg);
    width: var(--x-width);
    translate: 0 calc(var(--bar-height)/ 2);
}

header {
    justify-content: center;
    text-align: center;
    color: #ebebeb;
    position: fixed;
    width: 100%;
    padding: 0.3rem;
    z-index: 2;
    height: var(--hamburger-height);
}

header .divider {
    display: none;
}

header h1 {
    color: var(--clr-primary-200-header);
    font-size: var(--fs-big);
}

nav {
    text-align: center;
    top: 100%;
    right: 0;
    width: 50%;
    padding-top: var(--hamburger-height);
    height: 100vh;
}

nav ul {
    margin: 0;
    list-style: none;
}

nav li {
    margin-bottom: var(--fs-nav);
}

nav a {
    color: white;
    text-decoration: none;
    font-size: var(--fs-nav);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    font-weight: 500;
    z-index: 3;

}

nav a:hover {
    color: #B1A296;
}

.sidebar {
    transition: transform var(--animation-timing);
    transform: translateX(50%);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;

}

.hamburger-menu:has(input:checked)+.sidebar {
    transform: translateX(0);
    opacity: 1;
    background-color: var(--clr-background-header);
    backdrop-filter: blur(10px);
}

.hamburger-menu:has(input:checked)+.sidebar a {
    opacity: 1;
}


/* ###################### Termine ######################  */

.sectionT {
    background-color: var(--clr-background);
    color: var(--clr-primary-100);
    /* height: 100vh; */
    padding: var(--pd-t-b) var(--pd-book-l-r);
}

.event {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    border-style: solid;
    border-width: 0.1rem;
    border-radius: 5px;
}



.event-date {
  background: var(--clr-primary-200-header);
  color: white;
  padding: 1rem;
  text-align: center;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color 0.25s ease;
}


.event-date .day {
  font-size: var(--fs-bandh1);
  font-weight: bold;
}

.event-date .month {
  text-transform: uppercase;
  font-size: var(--fs-small);
}

.event-date .year {
  font-size: var(--fs-small);
  opacity: 0.8;
}

.event-info {
  padding: 1rem;
  flex: 1;
}

.event-info h2 {
  margin: 0;
  /* font-size: var(--fs-bandh1); */
  color: var(--clr-primary-100);
}

.event-info .location {
  margin-top: 0.3rem;
  color: var(--clr-primary-100-header);
  font-size: var(--fs-small);
}

.event-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
/* ###################### Media Icons ######################  */

.media-icons {
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 0.5fr);
}

.media-icons a {
    color: #fff;
    font-size: var(--fs-media);
    padding: 2rem;
    transition: 0.2s ease;
}

.media-icons a:hover {
    transform: scale(1.05)
}


/* ###################### Image Gallery ######################  */

.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 15px;
    width: 100%;
    max-width: 1200px;
}

/* --- Bilder --- */
.gallery img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}


.sectionGallery {
    background-color: var(--clr-background);
    color: var(--clr-primary-100);
    padding: var(--pd-t-b) var(--pd-book-l-r);
}

/* --- Mobile Ansicht: 1 Spalte --- */
@media (max-width: 600px) {
    .gallery {
    grid-template-columns: 1fr;
    }
}

/* ###################### Bandvorstellung ######################  */

.section_Besetzung {
    padding: var(--pd-t-b) var(--pd-book-l-r);
    background-color: var(--clr-background);
    color: var(--clr-primary-100);
}

.Besetzung {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, auto);
}

.Ueberschrift2 h1 {
    font-size: var(--fs-medium);
}

.Besetzung_Pic {
    max-height: 40vh;
    max-width: 35vw;
    border-radius: 5px;
    z-index: -1;
    display: block;
}

.image {
    position: relative;
    margin: 1rem;
    justify-content: center;
    align-items: center;
    display: inline-block;
}

/* ✅ Toggle-Input unsichtbar */
.image .toggle {
    display: none;
}

/* ✅ Overlay */
.content {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.5s;
    opacity: 0;
}

/* Überschrift im Overlay */
.content h1 {
    font-size: var(--fs-bandh1);
}

/* Desktop Hover (funktioniert nur bei Mausgeräten) */
@media (hover: hover) and (pointer: fine) {
    .image:hover .content {
        opacity: 1;
    }

    .event-link:hover .event {
        transform: translateY(-3px);
        cursor: pointer;
    }

    .event-link:hover .event-date {
        background-color: var(--clr-primary-300-header);
    }
}

/* Checkbox aktiviert → Overlay dauerhaft sichtbar */
.image .toggle:checked + label .content {
    opacity: 1;
}



/* ###################### Unterscheidung Quer/Hochformat ######################  */

@media (min-aspect-ratio: 1/1) {
     :root {
        --pd-term-tb: calc(100vh / 120);
    }


}


/* @media (min-aspect-ratio: 1.5/1) {
     :root {
        --pd-term-tb: calc(100vh / 300);
    }
} */






/* ###################### Booking/Downloads ######################  */


.sectionD {
    background-color: var(--clr-background);
    color: var(--clr-primary-100);
    padding-inline: var(--pd-down-l-r);
}

.sectionD ul {
    list-style: none;
}

.sectionD a {
    color: white;
    text-decoration: none;
    font-size: var(--fs-nav);
}

.download-container {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.download {
    border-style: solid;
    border-width: 0.1rem;
    border-radius: 5px;
}

.download p {
    line-height: var(--fs-big);
}

.download:hover {
    background-color: var(--clr-primary-200-header)
}


/* ###################### Impressum/Datenschutz ######################  */

.Impressum {
    text-align: center;
    align-items: center;
    background-color: var(--clr-background);
    height: 100vh;
}

.Impressum p {
    font-size: var(--fs-p-Im);
}

.Impressum a {
    color: white;
    text-decoration: none;
}


/* ###################### Impressum/Datenschutz INDEX  ######################  */

.footer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.footeritem {
    display: flex;
    justify-content: center;
}

.footeritem a {
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: var(--fs-p-Im);
    font-weight: 500;
    font-style: normal;
}

.footeritem p {
    color: white;
    font-size: var(--fs-p-Im);
    font-weight: 500;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    /* text-align: center; */
}

.footeritem button {
    background-color: var(--clr-background);
    font-size: var(--fs-p-Im);
    color: white;
    border: none;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
}

.footeritem button:hover {
    cursor: pointer;
}

.createdby {
    display: grid;
    margin-top: var(--fs-p-Im);
}

.createdby p {
    color: white;
    font-size: var(--fs-p-Im);
    font-weight: 100;
    font-style: italic;
}


/* ###################### Divider ######################  */

.divider {
    position: relative;
    margin-top: 25px;
    margin-bottom: 25px;
    height: 2px;
}

.divider_end {
    position: relative;
    margin-top: 25px;
    height: 2px;
}

.divider_end::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    width: 70%;
    height: 2px;
    background-image: linear-gradient(to right, transparent, rgb(121, 121, 121), transparent);
}

.divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    width: 70%;
    height: 2px;
    background-image: linear-gradient(to right, transparent, rgb(121, 121, 121), transparent);
}

@media screen and (min-width: 700px) {
    /* Navitongationsleiste */
    header .divider {
        display: block;
    }
    .headertext {
        display: none;
    }
    nav {
        width: 100%;
        all: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--clr-background-header);
        height: calc(var(--fs-nav) * 1.5);
        background-color: var(--clr-background-header);
        backdrop-filter: blur(10px);
    }
    nav a {
        opacity: 1;
    }
    nav li {
        margin: 0 2rem;
    }
    nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    .Daten {
        grid-template-columns: 1fr 1fr;
    }
    .hamburger-menu:before,
    .hamburger-menu:after,
    .hamburger-menu input {
        display: none;
    }
    .sidebar {
        transform: translateX(0);
        width: 100%;
    }
    .masonry {
    column-count: 1;
  }
    
}

@media screen and (min-width: 1200px) {
    /* Navitongationsleiste */
    nav li {
        margin-left: 3rem;
        margin-bottom: 0;
    }


}

@media screen and (min-width: 1900px) {
    /* Navitongationsleiste */
    nav li {
        margin-left: 3rem;
        margin-bottom: 0;
    }
}



/* ###################### Video ######################  */

.video-container {
  max-width: 800px;     /* oder 100%, je nach Layout */
  margin: 0 auto;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  padding: var(--pd-t-b) var(--pd-book-l-r);
}

.video-container iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

@supports not (aspect-ratio: 16/9) {
  .video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9-Verhältnis */
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}