/* MAIN CSS */


* {
    box-sizing: border-box;
    margin: 0;
    outline: none;
}

/* verhindert das Anzeigen von Transitions beim Laden */
.preload {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}


body {
    background-color:;
    font-family: 'zeitung-mono', sans-serif;
}

.site-header {
    position: fixed; 
    z-index: 10000;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    padding: 0.5em 4vw;

      



background: linear-gradient(180deg, rgba(47,79,79,1) 0%, rgba(47,79,79,1) 20%, rgba(47,79,79,0) 90%, rgba(47,79,79,0) 100%);
}

.site-branding {
    width: 8vw;
    min-width: 6em;
    max-width: 8em;
}

nav ul {
    display: flex;
    padding: 0;
}

nav li {
    position: relative;
    margin: 0 0 0 1.2em;

    list-style: none;
    line-height: 1em;
}

nav a {
    position: relative;
    display: inline-block;

    padding: 0.3em 0.6em 0.4em;
    color: white;

    font-size: 0.9em;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1em;
    letter-spacing: 0.09em;

    transition: all 0.3s ease-out;
}

.main-menu li:hover a,
.current a{
    background-color: darkslategrey;
    color: white;
}

/* HOVER-Effekt mit PSEUDO-Element */

nav li:before {
    position: absolute;
    left: 0;
    top: 0;
    background-color: black;
    
    transform-origin: left center;
    transform: scale(0,1);
    transition: transform 0.4s ease-out;
}

/*
nav li:hover::before,
.current::before {
    transform: scale(1,1);
}

nav li:hover a,
.current a {
    color: white;
}
*/


section {
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 8vh 8vw;
}


#home {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-image:url(../img/pictures/Hintergrund/IMG_2024.jpg);
    
    background-size:cover;
    background-repeat: no-repeat;
  

    background-color: darkslategrey;
    color: white;
}

#about {
    background-color: white;
    color: white;
}

#work {
    background-color: #eee;
    color: black;
}

#contact {
    min-height: 60vh;
    background-color: white;
    color: black;
}

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

#contact .content {
    flex-direction: column;
    align-items: center;
    min-height: 40vh;
}

.section-header,
.content {
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
}

.section-header {
    margin-bottom: 3em;
    border-bottom: 3px solid;

    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.welcome-box {
    flex-basis: 20ch;
    padding: 1.5em;
/*    background-color: black;>*/
}

h1 {
    margin-top: 0;
    margin-bottom: 0.5em;

    font-family: 'zeitung', sans-serif;
    font-weight: 600;
    font-size: 4.5em;
    line-height: 1em;
    letter-spacing: 0.1em
}

h2 {
    margin-bottom: 0.2em;
    font-size: 2.4em;
    font-weight: 400;
}

h3 {
    margin-left: 0.1em;
    font-size: 1.2em;
    font-weight: 400;
}

h4 {
    margin-bottom: 0.8em;
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: 0.09em;
    
}

#about h4 {
    color: white;
}
#work h4{
    
    color: black;
}
h5 {
    margin-bottom: 0.8em;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: 0.09em;
}

h6 {
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0.09em;
}


.txt-col {
    flex-basis: 40ch;
    flex-grow: 2;
    max-width: 600px;
    margin: 0;
    padding: 2em;
    background-color: darkslategrey;
}

.img-col {
    flex-basis: 400px;
    flex-grow: 1;
    max-width: 600px;
    background-color: darkslategrey;
    color: white;
    margin: 0;
    padding: 1em;
}

.gallery-box {
    display: flex;
    flex-wrap: wrap;
    margin: 4em auto;
}

.gallery-box h4 {
    flex-basis: 100%;
    text-align: center;
}

.gallery-box figure {
    position: relative;
    flex-basis: 300px;
    flex-grow: 1;
    max-width: 600px;
    margin: 0.5em;
    box-shadow: 0 5px 5px rgba(120, 120, 120, 0.3);
}

/* KORRIGIERT */
.gallery-box.type-classic figure > a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
}
/* ENDE KORRIGIERT */

.gallery-box figcaption {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 1.2em;
    background-color: darkslategrey;
    color: white;

    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.gallery-box figure:hover figcaption {
    opacity: 1;
}

/* KORRIGIERT 
.gallery-box.type-classic figcaption a,
.gallery-box.type-raster figcaption a{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
*/

/* GALLERY RASTER */
.gallery-box.type-raster {
    justify-content: center;
}

.inner-gallery {
    display: flex;
    flex-wrap: wrap;

    flex-grow: 1;
    max-width: 600px;
}

.inner-gallery figure {
    flex-grow: 1;
    margin: 0;
    box-shadow: none;
}

.inner-gallery {
    flex-basis: 500px;
}

.inner-gallery.half figure {
    flex-basis: 240px;
}

/* ENDE GALLERY RASTER */



/* GALLERY TEXT+IMAGE */
.type-txtimg {
    justify-content: center;
}

.type-txtimg figure {
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    /*justify-content: space-between;*/

    flex-basis: 30%;
    /*flex-grow: 0;*/
    min-width: 20rem;
    max-width: 100%;

    background-color: darkslategrey;
}

.type-txtimg figure:nth-of-type(even) {
    flex-direction: column-reverse;
}

.type-txtimg a {
    display: block;
    color: white;
}

.img-section {
    flex-basis: 50%;
    flex-grow: 0;
}

.type-txtimg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.type-txtimg figcaption {
    position: relative;
    justify-content: flex-start;
    height: auto;
    padding: 2em 1.2em;
    opacity: 1;
}

.type-txtimg figcaption h5 {
    font-size: 1.8em;
    margin-bottom: 0.4em;
}

.type-txtimg figcaption h6 {
    font-size: 1.1em;
    margin-bottom: 1.2em;
}

.type-txtimg figcaption p {
    text-align: left;
}

/* ENDE GALLERY TEXT+IMAGE */



figcaption {
    padding: 0.6em 1em 0.6em;
    font-size: 0.9em;
    text-align: center;
}

p {
    max-width: 60ch;
    margin-bottom: 2em;
    line-height: 1.5em;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

a {
    color: black;
}

li {
    margin: 1em 0;
}


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

.mailto {
    display: flex;
    margin: 1em;
    
    font-family: 'zeitung-mono', sans-serif;
    font-size: 1.2em;
    letter-spacing: 0.09em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    transition: transform 0.3s ease-out;

}

.mailto::after {
    content: "";
    width: 1.2em;
    height: 1.5em;
    margin-left: 0.7em;

    background-image: url("../img/examples/vector/copy.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

}

.copied::after {
    background-image: url("../img/examples/vector/copied.svg");
}

.socialmedia-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2em 1em;
}

.socialmedia-menu a {
    width: 3.5em;
    height: 3.5em;
    margin: 1.2em;
    padding: 0;
}

.socialmedia-menu a {
    display: block;
    text-decoration: none;
    transition: transform 0.4s ease-out;
}
.socialmedia-menu a:hover {
    transform: scale(1.15);
}


.goto {
    position: absolute;
    right: 4vh;
    bottom: 4vh;
    width: 4vh;
    height: 6vh;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
/*
.down {
    background-image: url("../img/examples/vector/down.svg");
}

.up {
    background-image: url("../img/examples/vector/up.svg");
}
*/
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 2em 4vw;
    
    background-color: blacdarkslategreyk;
    color: white;
    font-size: 0.9em;
}

.site-footer nav a {
    color: white;
}

.site-footer nav li:hover a {
    background-color: white;
    color: black;
}

/* HOVER-Effekt mit PSEUDO-Element 
.site-footer  nav li::before {
    background-color: white;
}

.site-footer nav li:hover a,
.site-footer .current a {
    color: black;
}
*/

.copyright {
    margin: 2em 2em 2em 0.5em;
}

/* Datenschutz und Impressum als Lightbox-Content */

.footer-content-lightbox {
    display: none;
    width: 70vw;
}

.footer-content-lightbox .fancybox-close-small {
    filter: invert(1);
}

.footer-content-lightbox h2 {
    font-size: 1.8em;
    margin-bottom: 0.8em;
}

.footer-content-lightbox h3 {
    font-size: 1.2em;
    margin-bottom: 0.4em;
}

.footer-content-lightbox ul {
    margin-bottom: 1.5em;
}

.footer-content-lightbox p {
    max-width: 75ch;
}

#impressum,
#datenschutz {
    font-size: 0.8em
}

#datenschutz article {
    margin-bottom: 6em;
}

/* ENDE FOOTER */



/* PLUGINS */

/* Fancybox mit seitlichem Abstand */
.fancybox-outer,
.fancybox-inner,
.fancybox-bg {
    left: 4vw;
    right: 4vw;
    background-color: transparent;
}

.fancybox-bg {
    background-color: darkslategrey;
}

.fancybox-slide {
    padding-bottom: 66px !important;
}

.fancybox-is-open .fancybox-bg {
    background-color: darkslategrey;
    opacity: 1;
    transition-timing-function: ease-in;
}

/* KORRIGIERT */
.footer-content-lightbox.fancybox-content {
    background-color: #fff;
}

.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-toolbar .fancybox-toolbar,
.fancybox-show-nav .fancybox-navigation .fancybox-button,
.fancybox-show-caption .fancybox-caption,
.fancybox-close-small,
.fancybox-button:hover {
    color: #fff;
    opacity: 1 !important;
}

.fancybox-infobar {
    margin-left: 16px;
}

.fancybox-close-small {
    margin-right: 6px;
}

.fancybox-button {
    background-color: transparent;
}

.fancybox-can-swipe .fancybox-content, .fancybox-can-pan .fancybox-content {
    cursor: default !important;
}

/* Fancybox mit HTML-Inhalten */
.content-lightbox {
    display: none;
    width: 100%;
    padding: 1em;
    vertical-align: top;
    background-color: darkslategrey;
    color: white;
    overflow: scroll;
}

.inner-lightbox {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 125px);
    padding: 0;
}

.inner-lightbox .content {
    margin-bottom: 0;
}

.inner-lightbox .img-col {
    flex-basis: 320px;
    background-color: white;
}


/* MEDIA QUERIES */

@media screen and (min-width:1440px) {

    .site-header {
        padding: 0.5em 10vw;
    }

    .content,
    .section-header {
        width: 1160px;
        margin: 0 auto 4em;
    }

}


@media screen and (min-width:1920px) {

    .site-header,
    .site-footer {
        padding: 1em calc((100% - 1500px)/2);
    }

    .goto {
        right: calc((100% - 1500px)/2);
    }

    .fancybox-outer,
    .fancybox-inner,
    .fancybox-bg {
        left: calc((100% - 1500px)/2);
        right: calc((100% - 1500px)/2);
    }

}

/* GALLERY TEXT+IMAGE */
@media screen and (max-width:78rem) {
    .type-txtimg figure {
        flex-direction: row;
        flex-basis: 100%;
    }

    .type-txtimg figure:nth-of-type(even) {
        flex-direction: row-reverse;
    }

    /*    .img-section {
        flex-basis: 33%;
    }*/

    .type-txtimg figcaption {
        flex-basis: 40ch;
        flex-grow: 1;
    }
}

/* ENDE GALLERY TEXT+IMAGE */


@media screen and (max-width:50rem) {

    .site-header {
        position: relative;
        flex-direction: row;
        justify-content: center;

        width: 100%;
        min-height: 0;
        padding: 1em;
    }

    .site-branding {
        margin: 0;
    }

    section {
        padding: 3em 3vw;
    }

    #home {
        min-height: calc(100vh - 8rem);
    }

    .section-header {
        margin: 0 0 1em 0;
    }

    .welcome-box {
        margin: 0 0 4em 0;
    }

    .content {
        margin: 3em 0;
    }

    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 1.4em;
        line-height: 1.2em;
    }

    h3 {
        font-size: 1em;
    }

    .img-col {
        margin: 0;
    }

    .txt-col {
        padding: 1em;
    }

    .gallery-box figure {
        margin: 0 0.4em 1.2em;
    }

    /* GALLERY RASTER */
    .inner-gallery figure {
        margin: 12px;
    }

    /* GALLERY TEXT+IMAGE */
    .type-txtimg figure,
    .type-txtimg figure:nth-of-type(even) {
        flex-direction: column;
        flex-basis: 90%;
        flex-grow: 0;
    }

    /*    .img-section {
        flex-basis: 50%;
    }*/

    .type-txtimg figcaption {
        flex-basis: auto;
    }

    /* ENDE GALLERY TEXT+IMAGE */

    .mailto {
        font-size: 0.8em;
    }

    .site-footer {
        font-size: 1.2em;
    }

    .site-footer nav ul {
        flex-direction: column;
    }

    .site-footer nav li {
        margin: 1em 0;
    }

    .fancybox-outer,
    .fancybox-inner,
    .fancybox-bg {
        left: 0;
        right: 0;
    }

    .content-lightbox,
    .footer-content-lightbox {
        width: 100vw;
        padding: 2em 0.4em;
    }

}


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

    section {
        padding: 2em 0;
    }

    .section-header {
        flex-direction: column;
    }

    h1 {
        font-size: 2.4em;
    }

    h2 {
        font-size: 1.8em;
    }
    
    h3 {
        margin: 0.6em;
    }

    h4 {
        font-size: 1.4em;
    }

    /* GALLERY TEXT+IMAGE */
    .type-txtimg figure,
    .type-txtimg figure:nth-of-type(even) {
        flex-basis: 100%;
        min-width: 0;
    }

    .type-txtimg figcaption h5 {
        font-size: 1.2em;
    }

    /* ENDE GALLERY TEXT+IMAGE */

    .mailto {
        letter-spacing: 0;
    }

    .site-footer {
        font-size: 0.8em;
    }
}

@media screen and (min-width:87.5rem ) {  
    nav a{ font-size: 1.2em;
    }
}


@media screen and (min-height:1024px) {

    section {
        min-height: 80vh;
    }

    #home {
        min-height: 70vh;
    }

    .goto {
        width: 2em;
        height: 3em;
    }
}


@media screen and (hover: hover) {
    
    .mailto:hover {
        transform: scale(1.1);
    }
}

@media screen and (hover: none) {

    .gallery-box figcaption {
        position: relative;
        height: auto;
        opacity: 1;
    }

}