/*Desktop*/




html, body, * {
    padding: 0;
    margin: 0;
    font-family: Calibri;
    word-wrap: normal;
    line-break: auto;
    scroll-behavior: smooth;
    width: auto;
}


body {
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
}

.hero {
    /*gesamter Content inkl. Navigation-Bar*/
/*    width: 100%;*/
    height: 100vh;
    padding: 0;
    margin: 0;

    /*    background: url(media/background.jpg) no-repeat fixed;
    background-position: center;
    background-size: cover;*/
}

.background_home {
    background: url(media/background2.jpg) no-repeat repeat;
    /*    background-position: center;*/
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    z-index: -1;
}
.background_download {
    background: url(media/bild23.jpg) no-repeat repeat;
    /*    background-position: center;*/
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    z-index: -1;
}

#link-img {
    height: 32px;
    width: auto;
    padding: 15px;
}

.navigation {
 float: left;
 overflow: hidden;
    
}

.navigation .button {
  border: none;
  outline: none;
  color: white;
  font-weight: bold;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0;
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
  }

  /* Rotate first bar */
.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
  }
  
  /* Fade out the second bar */
  .change .bar2 {opacity: 0;}
  
  /* Rotate last bar */
  .change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
  }
  
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  .navigation:hover .dropdown-content {
    display: block;
  }

.navbar {
    width: 100%;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-content:center;
    font-size: 20px;
    background-color: rgba(0,0,0, 0);
    animation: hintergrund;
    animation-timeline: scroll();

    position:fixed;
    top: 0;
    z-index: 3;
}

@keyframes hintergrund {
    from {
        background-color: rgba(0,0,0, 0);
    }
    to {
        background-color: rgba(0,0,0, 1);
    }
}


.navbar p {
    display: flex;
    margin: 0 15px;
    padding: 15px 0;
    text-decoration: none;
    color: #fff;
/*    font-family: sans-serif;*/
    font-weight: bold;
}

.navbar li {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-items: center;
    margin: 0 15px;
    text-decoration: none;
    color: #fff;
/*    font-family: sans-serif;*/
    font-weight: bold;
}

.navbar li a {
        text-decoration: none;
        color: #fff;
/*        font-family: sans-serif;*/
        font-weight: bold;
}

.navbar li a:hover{
    color: darkred;
}

#logo {
    width: 10%;
    height: 10%;
    margin: auto;
    display: flex;
    margin: 0 15px;
    padding: 15px 0;
}

#icon {
    width: 40px;
    height: 40px;
    justify-self: center;
    align-self: center;
}


.content {
    /*Eigentlicher Inhalt der Site
    in Unterkategorien verschiedene Hintergr�nde pro Kategorie hinzuf�gen!
    Schriftart/Gr��e �berall gleich, ist ja klar!
*/
    width: 100%;
/*    position: absolute;*/
    top: 30%;
    background-color: rgba(0,0,0,0.5);
/*    display: grid;
    grid-template-columns: 1fr 1fr;*/
    word-wrap: normal;
    line-break: auto;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-weight: 100;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

#logo-big {
    width: 60%;
    height: 60%;
}

h1 {
    padding: 50px 0;
/*    margin: 0px 40px;*/
    font-size: 4rem;
    color: #fff;
    line-height: 110px;
/*    font-family: Georgia;*/
    font-weight: bold;
    /*    font-family: sans-serif;*/
    display: flex;
    align-content: flex-start;
    justify-content: center;
    text-align: center;
}

h2 {
    padding: 50px 0;
/*    margin: 0 40px;*/
    font-size: 3em;
    color: #fff;
    line-height: 60px;
/*    font-family: Georgia;*/
    font-weight: bold;
    /*    font-family: sans-serif;*/
    display: flex;
    align-content: flex-start;
    justify-content: center;
    text-align: center;
}

h3 {
    padding: 50px 0;
/*    margin: 0 40px;*/
    font-size: 2em;
    color: indianred;
    text-shadow: black 1px 0 10px;
/*    line-height: 90px;
    font-family: Georgia;*/
    font-weight: bold;
    /*    font-family: sans-serif;*/
    display: flex;
    align-content: flex-start;
    justify-content: center;
    text-align: center;
}

.home {
    /*    width: 95%;*/
    height: auto;
    display: grid;
    grid-template-columns: 60% 40%;
    padding: 5% 0;
    margin: 0 5% 0 5%;
    /*    background: url(media/background.jpg) no-repeat;*/
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    backdrop-filter: blur(5px);
}

.downloads {
    backdrop-filter: blur(5px);
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    justify-self: center;
    padding: 5% 0 5% 0;
    margin: 0 5% 0 5%;
    min-height: 100vh;
}

.downloadable {

    top: 10%;
    padding: 10% 0 0 0;
    position: relative;
/*    max-width: 90%;*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    justify-items: center;
    justify-self: center;
    place-self: center;
    
}

.downloadable figure {
    background-color: rgba(0, 0, 0, 0);
}

.downloadable figure figcaption {
    padding: 1em;
    text-align: center;
    color: white;
    font-size: 1em;
}

.downloadable a {
    display: flex;
    justify-content: center;
    align-items: center;
}   

   .downloadable a img {
        object-fit: cover;
        max-width: 100%;
        height: auto;
        transition: opacity 0.25s ease-in-out;

        cursor: pointer;
        transition: .35s linear;
        justify-self: center;
        align-self: center;
        place-self: center;
    }

.downloadable a img:hover {
        transform: scale(1.2);
        z-index: 100;

    }

#text {
    padding: 0 0 0 0;
}


.home p {
    color: white;
    /*    font-family: sans-serif;*/

    margin-bottom: 50px;
    text-align: center;
    font-size: 1.5em;
}

    .home a {
        padding: 100px 0 5% 0;
        margin: 200px 0;
        margin-bottom: 50px;

        color: crimson;
        text-decoration: none;
        font-weight: normal;
/*        font-family: sans-serif;*/
        font-size: 27px;
        font-weight: bold;

    }

        .home a:hover {
            color: darkred;
        }


#image {
    background: url(media/publikum.jpg);
    background-size: cover;
    background-position: center;
    border-image: linear-gradient(0deg, cornflowerblue 0%, wheat 50%) 15 repeat
}


.band {
    padding: 5% 0;
    margin: 0 15%;
/*    width: 100%;*/
/*    height: 100vh;*/
    animation: fade-in linear;
    animation-timeline: view();
    /*    position: relative;*/
    display: flex;
    --s: 200px; /* size  */
    --m: 4px; /* margin */
    --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);
}

.members {
    /*    display: flex;*/
    font-size: 0;
/*    overflow: hidden;*/ /* disable white space between inline block element */
    /*    display: grid;*/
    /*    margin: calc(var(--s) + var(--g));*/
    z-index: 100;
    padding: 5% 0;
    margin: 0 0 10%;
}

    .members div {
        position: absolute;
        top: -75px;
        /*        transform: translate(0, -50%);*/

        background-color: grey;
        min-width: 50px;
        min-height: 50px;
        grid-area: 1/1;
        width: var(--s);
        margin: var(--m);
        aspect-ratio: 1.15;
        height: calc(var(--s) * 1.1547);
        display: inline-block;
        /*        display: inline-block;*/
        cursor: pointer;
        filter: grayscale(80%);
        transition: .5s linear;
        font-size: 16px;
        position: relative;
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
        margin-bottom: calc(var(--m) - var(--s) * 0.2885);
        /*Einstellungen f�r Hintergrundbild*/
        background-size: cover;
        filter: grayscale(60%);
        font-weight: bold;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }

        .members div p {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: .5s linear;
            z-index: 99;
        }

            .members div p img {
                width: 50px;
                height: auto;
                filter: invert(100%) sepia(6%) hue-rotate(240deg) brightness(114%) contrast(100%);
                -webkit-filter: drop-shadow(2px 2px 0 white) drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white) drop-shadow(-2px -2px 0 white);
                filter: drop-shadow(2px 2px 0 white) drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white) drop-shadow(-2px -2px 0 white);
            }

    .members::before {
        content: "";
        width: calc((var(--s)/2)  + var(--m));
        float: left;
        height: 120%;
        shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
    }

    .members div:hover {
        filter: grayscale(0%);
        opacity: 1;
        z-index: 100;
        transform: scale(2.0);
        object-fit: cover;
        position: relative;

        .beschriftung 
            {
                  color: transparent;
                  opacity: 0;
            }
    }


.lukas {
    background-image: url(media/lukas3.jpg);
}

.marcus {
    background-image: url(media/marcus.jpg);
}

.felix {
    background-image: url(media/felix.jpg);
}

.hannes {
    background-image: url(media/hannes.jpg);
}

.moritz {
    background-image: url(media/moritz.png);
}

.marit {
    background-image: url(media/marit.jpg);
}

.kontaktieren {
    background-image: url(media/home-back.jpg);
}


.tour {
/*    width: 100%;*/
margin: 5px 5px;
display: block;
    position: relative;
    align-self: flex-start;
/*    min-height: 100vh;*/
    align-content: center;
    justify-content: center;
    background-color: rgb(0, 0, 0);
    animation: bg-shift linear;
    animation-timeline: view();
    animation-range: entry;
/*    z-index: 50;*/
    
}

    .tour p {
        color: white;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        padding: 15px 15px 15px 15px;
        animation: bg-shift linear;
        animation-timeline: view();
        animation-range: entry;
    }

.tour table {
/*    font-family: sans-serif;*/
    color: #fff;
    font-size: 1.5em;
    align-content: center;
    justify-content: center;
    padding: 10px 20px 10px 20px;
    margin: 0 15% 0 15%;
    table-layout:auto;
    border-collapse: separate;
    border-spacing: 0 50px;
    min-width: 70%;
        animation: fade-in linear;
    animation-timeline: view();
/*    animation-range: entry 50%;*/

}

    .tour h2 {
        animation: fade-in linear;
        animation-timeline: view();
/*        animation-range: entry 10%;*/
    }

.vergangenes {
    /*    width: 100%;*/
    color: white;
margin: 20px 5px;
padding-bottom: 20px;
display: block;
    position: relative;
    align-self: flex-start;
/*    min-height: 100vh;*/
    align-content: center;
    justify-content: center;
    background-color: rgb(0, 0, 0);
    animation: bg-shift linear;
    animation-timeline: view();
    animation-range: entry;
    align-items: center;
/*    z-index: 50;*/
font-size: 1.2em;


}
.vergangenes p {
    color: white;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 10px;
    animation: bg-shift linear;
    animation-timeline: view();
    animation-range: entry;
}

.vergangenes ul {
    color: white;
    list-style: none;
    justify-content: space-between;
    align-content:center;
    text-align: center;

}

.vergangenes ul li {
    color: white;
    display:inline-block;
    padding: 15px 5px;
    align-self: center;
}

@keyframes fade-in {
    0% {color: rgba(0,0,0,0);
        opacity: 0;
    }

    10% {
        color: rgba(0,0,0,0);
        opacity: 0;
    }
    50% {
        color: rgba(255,255,255,1);
        opacity: 1;
    }
}

@keyframes bg-shift {
    from {background-color: rgb(195, 1, 1, 0);}
    to {background-color: rgba(0,0,0,1);}
}

.ort {
    text-decoration: none;
    color: #fff;
}

.ort a {
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    color:crimson;
}

.ort a:hover{
    color: darkred;
}

.datum {
    font-weight: bold;
    border-bottom: 2px solid white;
    border-image: linear-gradient(0.25turn, rgba(255,106,0), crimson, black);
    border-image-slice: 1;
    width: 50%;
}

.galerie {
/*    height: 100vh;*/
/*    animation: fade-in linear;*/
/*    animation-timeline: view();*/
    z-index: 0;
    padding: 0 5%;
    margin: 5% 0;
}

.bilder {
    /*alles viereckig und nebeneinander - nur gut bei gleich gro�en fotos*/
    /*width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10%, 100%), 1fr));
    width: calc(3*var(--size) + 2*var(--gap));*/
    /*    grid-gap: .5rem;*/
    /*justify-items: center;
    margin: 0;
    padding: 0;*/

    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-count: 5;
    -moz-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;

}

.bilder figure {
      padding: .1rem;
      font-size: 1.2rem;
      text-align: center;
      background-color: #333;
      color: #d9d9d9;
    position: relative;
      
}

figure {
    position: relative;
    margin: 0;
/*    padding: .5em;*/
/*    width: 100%;*/
/*    border: thin solid gainsboro;*/
    background: white;
    width: 100%;
}


.bilder figure img {
            max-width: 100%;
        height: auto;
        object-fit: cover;
        transition: opacity 0.25s ease-in-out;
        filter: grayscale(60%);
        cursor: pointer;
        transition: .35s linear;
    width: 100% !important;
    height: auto !important;
}

.galery-img:hover {
    filter: grayscale(0%);
    z-index: 100;
    opacity: 1;
    transform: scale(1.1);
    width: calc(var(--size)*var(--zoom));
    height: calc(var(--size)*var(--zoom));
    position: relative;
    margin: 0;
    /*    padding: .5em;
    width: 100%;*/
    border: thin solid gainsboro;
    /*    background: white;
    width: 100%;*/
    object-fit: cover;
    

}



.kontakt {
/*    width: 100%;*/
/*    height: 100vh;*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 30px;
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    /*    font-family: sans-serif;
*/
    position: relative;
    align-items: flex-start;
    background-color: black;
    animation: fade-in linear;
    animation-timeline: view();
    text-align: center;
}

.kontakt h1 {
    font-size: 60px;
}

.kontakt a {
    font-style: italic;
    color: crimson;
    text-decoration: none;
    font-weight: normal;
}

#veranstalter {
    font-weight: bold;
    font-size: 25px;
    padding: 20px;
}

.kontakt a:hover{
    color: darkred;
    text-decoration: underline;
}

.kontaktdaten {
    justify-content: flex-start;
    align-content: flex-start;

    justify-items: center;
    justify-self: center;

}

.kontakt ul {
    margin: 100px;
/*    padding: 10% 10% 10% 10%;*/
    display: flex;
    justify-content: space-between;
    align-content: center;
    font-size: 20px;
}

    .kontakt ul li {
        list-style: none;
        display: inline-flex;
        align-items: center;
        justify-items: center;
/*        margin: 0 15px;*/
        text-decoration: none;
        color: #fff;
        font-family: sans-serif;/*
*/        font-weight: bold;
    }

    .kontakt ul li img {
        transform: scale(60%);
    }

.formular {
    justify-content: flex-start;
    align-content: flex-start;
}


.impressum {
    background-color: rgb(15,15,15);
    animation: fade-in linear;
    animation-timeline: view();
    align-content: center;
    justify-content:center;

}

.impressum h1 {
    font-size: 30px;
    text-align: center;
}

.impressum ul li {
        list-style: none;
        margin: 0 15px;
        text-decoration: none;
        color: #fff;
/*        font-family: sans-serif;*/
        line-height: 40px;
        text-align: center;


}

@media only screen and (min-width: 1420px) {
    /*    .body {
        width: 100%;
    }*/

/*    .band {
        --s: 200px;
    }*/
}

@media only screen (min-width: 1280px) and (max-width: 1420px) {
    .background_home {
        background-size: cover;
        background-position: center;
        position: fixed;
    }

    /*    .body {
        width: 100%;
    }*/

    .bilder {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

    .home {
        display: grid;
        align-items: stretch;
        flex-flow: column wrap;
    }

    .downloadable {
        display: grid;
        align-items: stretch;
        flex-flow: column wrap;
    }

    .members {
        margin: 0 10% 10% 10%;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1280px) {
    .background_home {
        background-size: cover;
        background-position: center;
        position: fixed;
    }

    /*    .body {
        width: auto;
    }*/

    .bilder {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

    .home {
        display: flex;
        align-items: stretch;
        flex-flow: column wrap;
    }

    .downloadable {
        display: flex;
        align-items: stretch;
        flex-flow: column wrap;
    }

/*    .band {
        --s: 150px;
    }*/


    .kontakt {
        display: flex;
        align-items: stretch;
        flex-flow: column wrap;
    }
}

@media only screen and (min-width: 624px) and (max-width: 1000px) {
    .background_home {
        background-size: cover;
        background-position: center;
        position: fixed;
    }
    
/*    .body {
        width: auto;

    }*/

    .bilder {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

    .home {
        display: flex;
        align-items: stretch;
        flex-flow: column wrap;
    }

    .downloadable {
        display: flex;
        align-items: stretch;
        flex-flow: column wrap;
    }

/*    .band {
        --s: 150px;
    }*/

    .members {
        margin: 0 10% 10% 10%;
    }

    .tour table {
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    }

    .tour p {
        padding: 0 0 0 0;
    }

    .kontakt {
        display: flex;
        align-items: stretch;
        flex-flow: column wrap;
    }
}

/*@media screen and (max-width: 624px) {*/
/*
    .hero {
        width: 624px;
    }*/

    /*.background_home {
        background-size: cover;
        background-position: center;
        position: fixed;
        height: 100vh;
        background-position: center;
    }
    
    .bilder {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

    .home {
        display: flex;
        align-items: stretch;
        flex-flow: column wrap;
    }

    .members {
        margin: 0;
    }

    .kontakt {
        display: flex;
        align-items: stretch;
        flex-flow: column wrap;
    }
}*/