/* 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 {

   font-family: zeitung-micro, sans-serif;
font-weight: 400;
font-style: normal;;
}

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

    display: flex;

    flex-wrap:wrap;
    justify-content:center;
    align-items: center;
    flex-direction: row;

    width: 100%;
    padding: 0.5em 4vw;
    margin-top: 2em;
   

    
}
.site-header {
width:100vw;
    position: fixed;
    z-index: 10000;
    display: flex;
align-items: center;
    flex-wrap: wrap;
    justify-content:space-between;
    
    padding: 2em 2em 2em 2em;
/*   margin: 1em 1em 1em 1em;*/
    /* background-color: rgba(255, 255, 255, 0.2);
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

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

nav ul {
flex-direction: row;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: .20rem;
    font-size: 1.2rem;
}

ul:before {
    content: "";
    position: absolute;
    
    inset: auto anchor(right) anchor(bottom) anchor(left);
    background: lightblue;
    height: .2em;
    transition: .2s .2s;
}

ul li {
    background:
        conic-gradient(pink 0 0) bottom/100% 0% no-repeat;
    transition: .8s;
}

ul li:is(:hover, .active) {

    background-size: 100% 100%;
    transition: .2s .4s;
}

ul:has(li:hover) li.active:not(:hover) {

    background-size: 100% 0%;
    transition: .2s;
}

ul li a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.5;
    padding-inline: .2em;
    display: block;
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #f2f2f2;
    font-family: system-ui, sans-serif;
    background-color: rgba(0, 0, 56, 0.58);
}
}

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

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

nav a {
    position: relative;
   

    padding: 0.3em 0.6em 0.4em;
   

    font-size: 0.9em;
   
 
    white-space: nowrap;
  
    letter-spacing: 0.09em;
   
    transition: all 0.3s ease-out;
    border-radius: 5px;

}

.main-menu li:hover a,
.current a {

    color: white;
    text-decoration-color: white;
    background-color: rgba(196, 119, 158, 0.62)
}

/* HOVER-Effekt mit PSEUDO-Element 

nav li::before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;

    display: block;
    content: "";

    width: 100%;
    height: 100%;

    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;
    background-color: #000038


}


#home {
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    background-color: rgba(124, 117, 204, 0.49);
    background-size: 150%;
    background-repeat: no-repeat;
    
}



#about {
    background-color: rgba(191, 171, 115, 0.71);
    color: white;
}

#work {
    background-color:rgba(95, 180, 118, 0.62);
    color: white;
}

#contact {
    min-height: 60vh;
    background-color: rgba(188, 119, 154, 0.74);
    color: white;
}

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

#contact .content {
    flex-direction: row;
    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;
}
.flip-container {
    perspective: 1000px; }

/* Flip-Box */
.flip-box {
    width: 500px;
    height: 300px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
    cursor:not-allowed;
}


.flip-box-front, .flip-box-back {
    backface-visibility: hidden; 
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}


.flip-box-front {
    background-color: #4a90e2;
    color: white;
}


.flip-box-back {
    background-color: #50e3c2;
    color: white;
    transform: rotateY(180deg); 
}


.flip-container:hover .flip-box {
    transform: rotateY(180deg);
}
.welcome-box {
    flex-basis: 40ch;
    padding: 1.5em;
/* background-color: white */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.name {
   
   /* transform: rotate(90deg); */
    
}
h1 {
    margin-top: 0;
    margin-bottom: 0.5em;

   font-family: zeitung-micro, sans-serif;
font-weight: 700;
font-style: normal;
    font-size: 3em;
    line-height: 1em;
    letter-spacing: 0.2em;
    color: white;
    text-shadow: 0 12px 8px 
        rgba(0, 0, 0, 0.28)
}

h2 {
    margin-bottom: 0.4em;
    font-size: 2.4em;
   
font-weight: 600;
font-style: normal;
      text-shadow: 0 12px 8px rgba(0, 0, 0, 0.28)
    
}

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

h4 {
    margin-bottom: 1.5em;
    font-size: 3em;
  
font-weight: 600;
font-style: normal;
    line-height: 1.2em;
    letter-spacing: 0.09em;
}

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-left: 2em;;
    padding: 2em;
    padding-top: 4em;
   
    background-color: rgba(50, 102, 137, 0.65);
    border-radius: 60px;
     box-shadow: 0 10px 10px #001117;
   
}

.img-col {
    flex-basis: 400px;
    flex-grow: 1;
    max-width: 600px;
   /* background-color: #719bb3; */
    box-shadow: 0 5px 5px #000000;
    /*color: #00232F; */
    margin: 0;
    padding: 1em;
    border-radius: 60px;
    
}

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

}

.gallery-box h4 {
    flex-basis: 100%;
    text-align: center;
    text-shadow: 0 10px 10px #001117;
}

.gallery-box figure {
    position: relative;
    flex-basis: 30%;
    
    max-width: 600px;
    margin: 1.5%;
    box-shadow: 0 10px 10px #001117;
    border-radius: 60px;
    overflow: hidden;
}

/* 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: rgba(50, 102, 137, 0.74);
    color: white;

    opacity: 0;
    transition: opacity 0.3s 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: indianred;
}

.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;
    color: white;
}

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

img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
   
}

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.4em;
    padding: 0;
    background-color: white;
    border-radius: 60px;
}


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

.socialmedia-menu a:hover {
    transform: scale(1.2);
}


.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/down%20Kopie.svg");
}

.up {
    background-image: url("../img/up%20Kopie.svg");
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 2em 4vw;

    background-color: black;
    color: white;
    font-size: 0.9em;
}

.site-footer nav a {
    color: white;
    border-radius: 70px;
}

.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: rgba(0, 0, 0, 0.8);
}

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

.fancybox-is-open .fancybox-bg {
    background-color: rgba(0, 0, 0, 0.98);
    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: rgba(0, 0, 0, 1);
    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: 1200px;
        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:1080px) {
    
    
    .gallery-box figure {
        flex-basis: 80%;
        align-items: center;
    }
}

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

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

        width: 100%;
        min-height: 0;
        padding: 1em;
        background-color: #00232f;
    }

    .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-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;
    }

}


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