/*
 
selector { property:value(s); }
 
 
CSS Units:
 
PX --> ein Pixel bezieht sich auf einen dargestellten Pixel am jeweiligen Screen
 
VW --> ein VW ist ein Prozent der aktuellen Viewportbreite
VH --> ein VH ist ein Prozent der aktuellen Viewporthöhe
% --> ein % ist ein Prozent des direkten Elternelements
 
EM --> ein EM ist die aktive Schriftgröße des Elements in Bezug auf die Schriftgrößen-Einstellung des Users im Browser
REM --> ein REM ist die Standardschrift-Größe in den Einstellungen des Users im Browser
CH --> die Breite des Characters Null - eine 0 in der aktiven Schrift und Schriftgröße
 
 
*/

@import url(../fonts.css);

body {
    margin: 0;
    font-family: "Test National 2 Compressed";
    font-weight: 400;
    font-style: normal;
}



header {
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    display: flex;
    /* flex-direction: column-reverse; */
    /* align-items: center; */
    /* text-align: center; */
    justify-content: flex-end;
    flex-wrap: wrap;

}





/* MENU-LÖSUNG Alex */

.menu-container {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    width: 10rem;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-wrap: wrap;



}

.menu-container img {

    width: 18vw;
    height: 13.03vw;

}

.menu-container input {
    /* unsichtbare RADIO-BUTTONS liegen über den LABELS */
    opacity: 0;
    z-index: 1002;
}

.menu-container input,
.menu-icon {
    /*    display: block;*/
    position: fixed;
    right: 1.5rem;

    padding: 0 0.2em;
    box-sizing: border-box;

    font-size: 5vw;
    text-align: center;
    cursor: pointer;

}


.menu-icon {
    position: fixed;
    right: .2em;
    top: .2em;
    border-color: black;
    border-style: solid;
    border-width: thick;
    background: rgba(221, 221, 221, 0.5);
    font-stretch: condensed;
    z-index: 1000;
    max-width: 370px;
    padding: 1rem;
}

.on-menu {
    top: 1.5rem;
}

.off-menu {
    display: none;
    top: calc(11.5rem + 8vw);
    border-color: black;
    border-style: solid;
    border-width: thick;
    background: rgba(221, 221, 221, 0.5);
    font-stretch: condensed;
    z-index: 1000;
    max-width: 370px;
    padding: 1rem;
}

/* ~ verweist im Selektor auf ein nachfolgendes Element! -> CLOSE wird dargestellt */
.menu-container .on-menu:checked ~ .off-menu {
    display: block;
}


/* Das Menü wird absolut positioniert und über das gesamte Browserfenster gelegt. */
.main-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;

    width: 100vw;
    min-height: 100vh;
    padding: 1rem;
    box-sizing: border-box;

    background-color: #48ff1a;
    background-image: url("../img/flexcafe_ich.jpg");
    background-size: 27vh;
    background-repeat: repeat;
    /* Pfad anpassen */
    background-position: center;
}


/* wenn der MENU-BUTTON ausgewählt ist, wird das Menu gezeigt */
.menu-container .on-menu:checked ~ .main-menu {
    display: block;
}

.main-menu nav {
    display: flex;
    flex-wrap: wrap;
    width: 60vw;
}

.main-menu nav a {
    margin: 0.5rem;
    background: rgba(221, 221, 221, 0.5);
    border-color: black;
    border-style: solid;
    background: rgba(221, 221, 221, 0.5);
    font-stretch: condensed;
    z-index: 1000;
    max-width: 370px;
    padding: 1rem;
}


/*  ENDE MENU-LÖSUNG Alex */






.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}



.image-container figure {
    margin: 0;
    padding: 2em 0.5em 0 0.5em;
    width: 450px;
    flex-grow: 1;
    filter: grayscale(80%);
    transition: 0.3s;
}

.image-container figure:hover {
    filter: none;
}



h1 a {
    text-decoration: none;
    color: white;
}

h1 {
    display: none;
    font-size: 5em;
    color: white;
    background-color: none;
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 .5em .5em;

    text-shadow: 3px 3px 5px black;


    font-family: "Test National 2 Compressed";
    font-style: normal;
}



h2 {
    font-size: 10.8vw;
    font-weight: 400;
    text-transform: uppercase;

    font-family: "Test National 2 Compressed";
    font-style: normal;

    margin: -0.1em 0 2vh 0;
    z-index: 10;
}


.subheadline {
    font-size: 1.15vw;
    margin: 0;
    font-family: "Test National 2 Medium";
    font-weight: 100;
    font-style: normal;
    text-transform: none;
    line-height: 1.3em;
    letter-spacing: 0.01em;


}


h3 {
    font-size: 4em;
    font-weight: 400;
    text-transform: uppercase;

    font-family: "Test National 2 Compressed";
    font-style: normal;
}



article {
    background-color: white;
    overflow: hidden;
    padding: 0 2.5rem;
}



p,
ul {
    line-height: 0.9em;
    font-size: 5.2vw;
    max-width: 95%;
    margin: 1.8em 0;
    text-transform: uppercase;
    font-stretch: extra-expanded;
}



figcaption {
    text-align: center;
    padding-top: 1em;

    font-family: "droid-sans",
        sans-serif;
    font-weight: 400;
    font-style: normal;

}

strong {
    font-family: "Test National 2 Compressed";
    font-weight: 700;
    font-style: normal;
}


.duenneschrift {
    font-family: "PP Editorial New";
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1.1em;
    font-size: 4vw;
    letter-spacing: 0.02em;
}

.lwschrift {
    font-family: "Test National 2 Medium";
    font-weight: 300;
    font-style: normal;
    text-transform: none;
    font-size: 2.7em;
    line-height: 1.3em;
    letter-spacing: 0.01em;
}



ul {
    list-style: none;
    padding: 0;
}

li {
    border-top: solid 1px black;
    padding: 1em 2em 0 2em;
    margin-bottom: 3em;
    font-family: "PP Editorial New";
    font-size: 0.5em;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
}

a {
    color: black;
}


a:hover {
    text-decoration: none;
}


figure {
    margin-top: 3em;
    margin-bottom: 3em;
    padding-left: 3em;
    padding-right: 3em;
}



.more-space {
    letter-spacing: 0.02em;
}




.container {
    background-color: #eeeeee;
    padding: 1em;
}



.webdesign article {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 85vh;
}


.landingpagebild {
    /* border: black;
    border-radius: 1px;
    border-color:#403b3b;
    border-width: 1px; */
    width: 30vw;
}


.landingpagebild img {
    /* border: black;
    border-radius: 1px;
    border-color:#403b3b;
    border-width: 1px; */
    width: 30vw;
}


.landingpagebild1 {
    /* border: black;
    border-radius: 1px;
    border-color:#403b3b;
    border-width: 1px; */
    width: 30vw;
}


.landingpagebild1 img {
    /* border: black;
    border-radius: 1px;
    border-color:#403b3b;
    border-width: 1px; */
    width: 30vw;
}


.landingpagebild2 {
    /* border: black;
    border-radius: 1px;
    border-color:#403b3b;
    border-width: 1px; */
    display: flex;
    flex-direction: row;

}

img {
    width: 30vw;
}

.landingpagebild2 img {
    /* border: black;
    border-radius: 1px;
    border-color:#403b3b;
    border-width: 1px; */
    width: 25vw;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    display: block;
    margin: 0 auto;
    /* Horizontale Zentrierung */

}

.coverbild {
    max-width: 35vw;
    /*border: black solid 4px;
    border-radius: 3px;*/
}

.coverbild2 {
    width: 40vw;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    /*border: black solid 4px;
    border-radius: 3px;*/
}


.foto-haufen {
    display: grid;
    grid-template-columns: repeat(3, auto);
    padding: 5px;
    /* Minimale Abstände */
    place-content: left;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.foto-haufen img {
    width: auto;
    max-width: 600px;
    height: auto;
    grid-column: span 5;
    /* Zufällige Spaltenbreite */
    grid-row: span 5;
    /* Unterschiedliche Höhen */
}

.foto-haufen img:nth-child(odd) {
    grid-column: span 2;
}


.graphischebilder img {
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0px;
}


.musikflexcontainer {
    display: flex;
    flex-direction: column;
}

.section1 {
    height: 110vh;
    /* Jeder Abschnitt ist eine volle Bildschirmhöhe */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10vh;
}


.section2 {
    height: 110vh;
    /* Jeder Abschnitt ist eine volle Bildschirmhöhe */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3vw;
}

.section2 p {
    font-size: 12vw;
}


.section3 {
    height: 130vh;
    /* Jeder Abschnitt ist eine volle Bildschirmhöhe */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}



.section4 {
    height: 110vh;
    /* Jeder Abschnitt ist eine volle Bildschirmhöhe */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3vw;
}

.section4 p {
    font-size: 5vw;
}




.sectiontextblock {
    height: 50vh;
    /* Jeder Abschnitt ist eine volle Bildschirmhöhe */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    margin-top: 10vh;
}

.sectiontextzeile {
    height: 10vh;
    /* Jeder Abschnitt ist eine volle Bildschirmhöhe */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    margin-top: 40vh;

}

.sectiontextzeile p {
    font-size: 4vw;
}


.section11 {
    height: 110vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10vh;
    margin-bottom: 50vh;
}

.section11 img {
    height: 150vh;
    /* Jeder Abschnitt ist eine volle Bildschirmhöhe */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10vh;
    width: 90vw;
    height: auto;
}


.section12 {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section12 img {
    height: 90vh;
    /* Jeder Abschnitt ist eine volle Bildschirmhöhe */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40vw;
    height: auto;
}



main {
    background-color: white;
}


.mamavideo {
    width: 24.17vw;
    margin-bottom: 0;
}

video {
    margin-top: 10vh;
    margin-bottom: 5vh;
}

.querformatvideo {
    width: 60vw;
    display: block;
    /* Stellt sicher, dass es als Block-Element behandelt wird */
    margin-left: 0;
    /* Entfernt alle Ränder nach links */
    margin-right: auto;
}

.querformatvideo2 {
    width: 60vw;
    display: block;
    /* Stellt sicher, dass es als Block-Element behandelt wird */
    margin-left: 0;
    /* Entfernt alle Ränder nach links */
    margin-right: auto;
    margin-top: 0;
}

.smvideo {
    width: 25vw;
}

.loop {
    width: 24vw;
}

.merchvideo {
    width: 26vw;
    margin-top: 0;
}

.merchvideo video{
    margin-left: 30vw;
}



footer {
    font-family: "Test National 2 Medium";
    margin: 2.5rem;
    font-size: 1.1vw;
    font-weight: 200;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.maildinglinks {}

.maildingrechts {
    font-size: 2.7em;
}





/* MEDIA QUERIES */


@media screen and (max-width: 700px) {

    .duenneschrift {
        font-weight: 200;
    }


    .landingpagebild {
        width: 80vw;
    }

    .landingpagebild1 {
        display: none;
    }

    .landingpagebild2 img {
        width: 40vw;
    }

    .loop {
        width: 90vw;
    }

    #loophide{
        display: none;
    }

    .section1 {
        height: 90vh;
    }

    .sectiontextblock {
        height: 25vh;
        margin-top: 0;
    }

    .section2 {
        height: 35vh;
    }

    .section3 {
        flex-direction: column;
        height: 270vh;
    }

    .smvideo {
        width: 70vw;
    }


    .coverbild2 {
        width: 80vw;
        /*border: black solid 4px;
    border-radius: 3px;*/
    }
    
    .querformatvideo2 {
        width: 80vw;
    }
    
    
    .section11 {
        height: 50vh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    
       .section11 img{
        width: 40vw;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    .foto-haufen img {
        width: 80vw;
    }
    
}