/* Variables */
:root {
    --navigationGap: 50px;
    --titlePadding:50px;
    --titleBaseHeight: 150px;
    --titleHeight: calc(var(--titleBaseHeight) + var(--titlePadding));
    --footerHeight: 20px;
    --desktopNavWidth: 200px;
    --responsiveSize: 600px;
    --iconFont:"FontAwesome"
}

/* Font */
@font-face {
    font-family: 'FontAwesome';
    src: url("fonts/fontawesome-webfont.eot?v=4.7.0");
    src: url("fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format('embedded-opentype'), url("fonts/fontawesome-webfont.woff2?v=4.7.0") format('woff2'), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format('woff'), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format('truetype'), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Animations */

@keyframes flickerAnimation {
    /* flame pulses */
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* General */

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    font-family: 'Jost';
    background-image: url(header_crop.jpg);
    background-repeat: no-repeat;
    background-size: clamp(20%, 40%, 50%) auto;
}

/* Navigation */
nav {
    margin: 0;
    /* padding: 0px 0px 0px 10px; */
    display: flex;
    flex-direction: column;
}

nav a {
    text-decoration: none;
    color: black;
    font-size: 30px;
    padding: 0px 0px 0px 10px;
}

nav a.current::before {
    content: "\f105";
    font-family: var(--iconFont);
    margin-right: 5px;
}

nav.main .toogle {border:1px black solid;}
/* Footer */

footer {
    background-color: green;
    width: 100%;
    height: var(--footerHeight);
    font-style: italic;
    text-align: center;
    z-index:1;
}

/*Gallery*/


.imageBox {
    position: fixed;
    flex-direction: column;
    width:100vw;
    height: 100vh;
    z-index:998;
    top:0px;
    left:0px;
    display: flex;

}
.imageBox menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    height:50px;
    margin:0px;
    padding:0px;
    z-index:3;
    background-color: rgb(255, 255, 255);
}

.imageBox menu li{
    flex-grow: 1;
    cursor:pointer;
    text-align: center;
}




.imageBox .box {flex-grow: 1;
position:relative;
overflow:hidden;}

.imageBox figure {
    position: absolute;
    top:0px;
    height:100%;
    width:100%;
    padding:0px;
    margin:0px; 
    flex-grow:1;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: rgb(255, 255, 255);    
    overflow:hidden;
    
    box-sizing: border-box;
    z-index: auto;
}




.imageBox figure figcaption {
    width: 100%;    
    position: absolute;
    top:0px;
    left:0px;
    z-index:2;


    
}


.imageBox figure figcaption div {
    padding:10px;
}

.imageBox figure figcaption.read div {
    text-align: left;
    padding:10px;
    flex-grow:1;


}

.imageBox figure figcaption:not(.read) div {
    text-align: left;
    padding:10px;
    height:50px;
    overflow:hidden;
    background-color: rgba(255, 255, 255, 0.473);


}

.imageBox figure figcaption.read
{
    background-color: white;
}

.imageBox figure figcaption{
    display: block;
    position:absolute;
    text-align: left;    
    width:100%;
    left:0px;
    top:0px;    
    display:flex;
}


.imageBox figure figcaption:not(.read) button:before {content:"\f107  mehr"}
.imageBox figure figcaption.read button:before {content:"\f106  weniger"}
.imageBox figure figcaption button 
{
    font-family: var(--iconFont);
    padding:20px;
    position: absolute;
    top:100%;
    width:200px;
    right:0px;
    background-color:rgba(255, 255, 255, 0.473);
    border:none;
    cursor:pointer;
}

.imageBox figure figcaption.read button {background-color: white;}


.imageBox:not(.expanded) figure img {
max-width: 100%;
max-height: calc(100% - 50px);
margin-top:50px;

}




.imageBox.expanded figure img 
    {
        position: relative;
        opacity:1;}


menu li {
    display: flex;
    justify-content: center;
    align-items: center;
}
menu li:before {
    font-family: var(--iconFont);

}

.next::before {
    content: "\f054";

}
.prev::before {
    content: "\f053";

}

.close::before {
    content: "\f00d";

}

.rotate:before {
    content: "\f01e";

}

.expand:before {
    content: "\f065";

}
.expanded .expand:before {
    content: "\f066";

}


.touchpoint {
    position: absolute;
    width:40px;
    height:40px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.555);
    z-index:999;
    pointer-events: none;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.touchpoint:before {
    content: "\f047";
    font-family: var(--iconFont)
}


  /* Main Area */
    
  .container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index:1;
}