/* DATEI: format.css */

body{
    font-family: Arial, Helvetica, sans-serif; margin: 0; display: flex ; background-color: black; align-items: center; min-height: 100vh;
    flex-direction: column; width: 100%; overflow-x: hidden;}



h1{text-align: center; color: rgb(255, 255, 255); font-size: 500%; font-optical-sizing: auto;
    text-shadow: 15px 15px 15px rgba(0, 0, 0, 0.5); margin-top: 70px; justify-content: center;}
h2{
    text-align: center; color: rgb(255, 255, 255); font-size: 200%; margin-top: -50px;}

h4{
        text-align: center !important; color: rgb(255, 255, 255); width: 70%; margin-top: 50px;
        font-size: larger; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}

h4 a{
    color: white; font-weight: bold; transition: all 0.3s ease-in-out;}


h5{
    text-align: center; color: rgb(255, 255, 255); font-size: smaller; margin-top: 60px; margin-bottom: 30px;}
h6{
    text-align: center; color: rgb(255, 255, 255); font-size: smaller; margin-top: 150px; margin-bottom: 30px; margin-right: 2%; margin-left: 2%;}  


@media screen and (max-width: 1024px) {
    h1{font-size: 600%; margin-right: 1%; margin-left: 1%; }
    h2{font-size: 250%; margin-right: 2%; margin-left: 2%;}
    h4{font-size: xx-large; width: 90%;}
    h6{width: 92%;}
    h5{font-size: large;}
}

footer{
    text-align: center; color: rgb(255, 255, 255); font-size: smaller; margin-top: 150px; margin-bottom: 30px; margin-right: 2%; margin-left: 2%;
}



.header-instagram {
    position: absolute;
    left: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
    z-index: 10;
}

.header-instagram img {
    width: 24px;
    height: 24px;
}

.header-instagram:hover {
    transform: scale(1.1);
}


@media screen and (max-width: 480px) {
    .header-instagram {
        left: 15px;
        width: 50px;
        height: 50px;
    }
    .logo img {
        height: 50px;
        width: 50px;
    }
}





.button_instagram{cursor: pointer; justify-content: center; align-items: center; display: flex; 
    width: 70px; height: 70px; overflow: hidden; padding: 0; 
    
    backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;}

.button_instagram img{
    width: 35px; height: 35px; object-fit: contain; justify-content: center; align-items: center;}

.button_instagram:hover{
   transform: scale(1.05);}




.button_mailto{cursor: pointer; justify-content: center; align-items: center; display: flex; 
    width: 70px; height: 70px; overflow: hidden; padding: 0; 
    
    backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;}

.button_mailto img{
    width: 35px; height: 35px; object-fit: contain; justify-content: center; align-items: center;}

.button_mailto:hover{
   transform: scale(1.05);}






.button_portfolio{cursor: pointer; font-size: 20px; margin-top: 60px; margin-bottom: 0px;
    
  backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  
}

span{
    padding: 10px 30px; display: inline-block;}

.button_portfolio:hover{
   transform: scale(1.05);
}


.button_shop{cursor: pointer; font-size: 20px; margin: 0px 0px;
    
  backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.button_shop:hover {
   transform: scale(1.05);
}

@media screen and (max-width: 1024px) {
    .button_portfolio, .button_shop {
        font-size: 200%;
        padding: 8px 25px;
    }
    .button_instagram, .button_mailto {
        width: 130px;
        height: 130px;
    }
    .button_instagram img, .button_mailto img {
        width: 70px;
        height: 70px;
    }
}


/* Image Grid */

.watermark {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: auto;
    opacity: 0.1;
    z-index: 2;
    border-radius: 8px;
}

.image-container {
    position: relative;
    display: flex;
    width: 100%; 
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.image-container:hover {
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
    z-index: 10;
}

.image-container:hover .main-image{box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);}

.image-grid {
    --gap: 50px;
    --num-cols: 3;
    --row-hight: auto;
   
    box-sizing: border-box;
    padding: var(--gap);

    display: grid; grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-hight);
    gap: var(--gap); margin-top:200px; margin-right: 10%; margin-left: 10%;

backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    display: block;
}


.image-container:hover .main-image {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: all 0.3s ease-in-out;
}



.image-grid-col-2{ grid-column: span 2;}
.image-grid-row-2{ grid-row: span 2;}   

@media screen and (max-width: 1024px) {
    .image-grid {
        --num-cols: 1;
        --gap: 30px;
        backdrop-filter: none;
        margin: 5px;
    }
}

/* Album Grid */

.album-grid {

    margin-top: var(--margin-top); margin-left: 10%; margin-right: 10%;
   
    --gap: 50px;
    --num-cols:2;
    --row-hight: auto;
    --margin-top: 150px;
   
    box-sizing: border-box;
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-hight);
    gap: var(--gap);
}



.album-grid > a img {

    --width: auto;
    --hight: 300px;

    width: var(--width); height: var(--hight); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0.9; object-fit: cover;

    backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.album-grid > p {
    color: white; text-align: center; font-size: larger; padding: 60px 20px; margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); align-items: center; display: flex; justify-content: center;

     backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .album-grid {
        --num-cols: 1;
        --margin-top: 50px;
        grid-auto-rows: auto;
        gap: 20px;
        margin-left: 1%; margin-right: 1%;
        backdrop-filter: none;
    }
    .album-grid > p {
        padding: 30px 20px;
        font-size: xx-large;
        backdrop-filter: none;
    }
     .album-grid > a img {
        --width: 100%;
        --hight: auto;
        backdrop-filter: none;
    }
    
}

.album-grid > a img:hover {
    transform: scale(1.05); transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); opacity: 1; z-index: 2;
}

.album-grid-col-1{ grid-column: span 1;}
.album-grid-row-1{ grid-row: span 1;}


/* Portfolio Grid */

.portfolio-grid {

    margin-top: var(--margin-top); position: relative;
   
    --gap: 50px;
    --num-cols:2;
    --row-hight: auto;
    --margin-top: 150px;
   
    box-sizing: border-box;
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-hight);
    gap: var(--gap);
}



.portfolio-grid > a img {

    --width: auto;
    --hight: 500px;

    width: var(--width); height: var(--hight); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0.9; object-fit: cover; 

    backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.portfolio-grid > p {
    color: white; text-align: center; font-size: larger; padding: 60px 20px; margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); align-items: center; display: flex; justify-content: center;

     backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .portfolio-grid {
        --num-cols: 1;
        --margin-top: 50px;
        grid-auto-rows: auto;
        gap: 20px;
        margin-left: 1%; margin-right: 1%;
        backdrop-filter: none;
    }
    .portfolio-grid > p {
        padding: 30px 20px;
        font-size: xx-large;
        backdrop-filter: none;
    }
     .portfolio-grid > a img {
        --width: 100%;
        --hight: auto;
        backdrop-filter: none;
    }
    
}



.portfolio-grid-col-1{ grid-column: span 1;}
.portfolio-grid-row-1{ grid-row: span 1;}


.textoverlay-portfolio {
    position: absolute;
    display: flex;
    width: 50%;
    height: 30%;
    border-radius: 10px;
    font-size: xx-large;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    
    inset: 0; 
    color: white;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    left: 25%; transform: translateX(-25%);
    top: 50%; transform: translateY(-50%);
}

.portfolio-grid > a {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
}





.portfolio-grid > a img:hover {
    transform: scale(1.05); transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); opacity: 1; z-index: 2;
}


/* Shop Grid */

.shop-grid {

    margin-top: var(--margin-top); margin-left: 10%; margin-right: 10%;
   
    --gap: 50px;
    --num-cols:2;
    --row-hight: auto;
    --margin-top: 150px;
   
    box-sizing: border-box;
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-hight);
    gap: var(--gap);
}



@media screen and (max-width: 1024px) {
    .shop-grid {
        --num-cols: 1;
        --margin-top: 50px;
        grid-auto-rows: auto;
        gap: 20px;
        margin-left: 1%; margin-right: 1%;
        backdrop-filter: none;
    }
    .shop-grid > p {
        padding: 30px 20px;
        font-size: xx-large;
        backdrop-filter: none;
    }
     .shop-grid > a img {
        --width: 100%;
        --hight: auto;
        backdrop-filter: none;
    }
    
}

.shop-grid > a img:hover {
    transform: scale(1.05); transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); opacity: 1; z-index: 2;
}

.shop-grid-col-1{ grid-column: span 1;}
.shop-grid-row-1{ grid-row: span 1;}






/* Background */

#background{
    background-image: url("images/backgrounds/portrait_sideview_verdon.jpg");
    height: 100vh; width: 100%; background-size: cover; background-position: center; top: 0; left: 0;
    position:fixed; top: 0; z-index: -1; filter: blur(3px) brightness(0.5);}

#background-mighty-wings{
    background-image: url("portfolio/Mighty_Wings/mighty_wings_bw_pburmester.jpg");
    height: 100vh; width: 100%; background-size: cover; background-position: center; top: 0; left: 0;
    position:fixed; top: 0; z-index: -1; filter: blur(3px) brightness(0.5);}

#background-the-art-of-light{
    background-image: url("portfolio/The_art_of_light_2025/_1785499.jpg");
    height: 100vh; width: 100%; background-size: cover; background-position: center; top: 0; left: 0;
    position:fixed; top: 0; z-index: -1; filter: blur(3px) brightness(0.5);}

#background-masters-of-the-air{
    background-image: url("portfolio/masters_of_the_air/the_shadows_echo-1.jpg");
    height: 100vh; width: 100%; background-size: cover; background-position: center; top: 0; left: 0;
    position:fixed; top: 0; z-index: -1; filter: blur(3px) brightness(0.5);}

@media screen and (max-width: 1024px) {
    #background, #background-mighty-wings, #background-the-art-of-light, #background-masters-of-the-air {
        height:100vh; width: 100%;}
    }
    



/* Header */

.main-header {
    display: flex; justify-content: flex-end; padding: 20px 40px; position: relative; min-height: 70px; top: 0; left: 0; width: 100%;
    background-color: #333;color: white; z-index: 5; align-items: center; box-sizing: border-box; min-width: 100%;

    backdrop-filter: url(#liquid-prism-intense2);
  -webkit-backdrop-filter: url(#liquid-prism-intense2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.main-header::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px;
    

    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0) 100%
    );
    
    pointer-events: none;
}
    

.logo{
   position: absolute; left: 50%; transform: translateX(-50%); transition: all 0.3s ease-in-out;}

.logo img{
    height: 40px; width: auto; margin-top: 5px; transition: all 0.3s ease-in-out;}
.logo img:hover{transform: scale(1.1); transition: all 0.3s ease-in-out;}

@media screen and (max-width: 1024px) {
    .logo img{ height: 90px; width: auto;    
    }
    .main-header {
        padding: 40px 60px;
    }
}


.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    width: auto; justify-content: flex-end;
    margin-right: 25px;
    transition: all 0.3s ease-in-out;
}
.main-nav ul li:hover{transform: scale(1.1); transition: all 0.3s ease-in-out; text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);}
.main-nav ul li {transition: all 0.3s ease-in-out;}

.menu-toggle {
    display: none;
    cursor: pointer;
    z-index: 10;
    flex-direction: column;
    gap: 4px;
    transition: all 0.3s ease-in-out;
}


/* Mobile Navigation */

@media screen and (max-width: 1024px) {
    .menu-toggle { 
        display: flex;
        flex-direction: column;
        gap: 1px;
        cursor: pointer;
        z-index: 100;
        transition: all 0.3s ease-in-out;
        height: 100%;
        box-shadow: none;
    }
        .main-nav ul {
        display: none; 
        flex-direction: column;
        justify-content: center; 
        align-items: center;
        
        position: fixed;
        top: 150px;
        left: 0;
        width: 100%;
        height: calc(100vh - 150px);
        
        background: rgba(0, 0, 0, 0.95);
        z-index: 1000;
        margin: 0;
        padding: 0;
        transform: none;
        backdrop-filter: blur(10px);
        font-size: 2rem;
    }

    .main-nav ul.show {
        display: flex !important;
        backdrop-filter: blur(4px);
    }

    .menu-toggle.open .bar:nth-child(1) {
        transform: translateY(20.3px) rotate(45deg) scale(1.1);
        gap: 0;
        box-shadow: none;
    }

    .menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
        gap: 0;
        box-shadow: none;
    }

    .menu-toggle.open .bar:nth-child(3) {
        transform: translateY(-20.3px) rotate(-45deg) scale(1.1);
        gap: 0;
        box-shadow: none;
    }
}


.menu-toggle:hover .bar{transform: scale(1.1); transition: all 0.3s ease-in-out;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);}

.bar {
    display: block;
    width: 50px !important;
    height: 8px !important; 
    border-radius: 6px;
    background-color: white;
    flex-shrink: 0;
    margin: 6px 0;
    padding: 0;
    border: none;
    line-height: 0;
    transition: all 0.3s ease-in-out;
}



.main-nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.main-nav a:hover {transform: scale(1.05);}





/* Animation mobile */

@media screen and (max-width: 1024px) {
    .main-nav ul {

        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.4s ease-in-out;
        
        display: flex;
        flex-direction: column;
        position: absolute;

    }

    .main-nav ul.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}



/* Footer */

footer {
    width: 100%;
    padding: 30px 0;
    margin-top: 100px;
    text-align: center;
}


footer p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    margin: 10px;
}


/* Footer shop */

.shop-footer {
    width: 100%;
    padding: 30px 0;
    margin-top: 100px;
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.shop-footer p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}





/* --- LIGHTBOX STYLES --- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 10000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
}

/* Wird von JavaScript aktiviert, wenn ein Bild angeklickt wird */
.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 95%;
    max-height: 95vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    overflow-y: auto; 
    padding: 10px;
    
    /* Dezent gestaltete Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

#lightbox-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    border-radius: 4px;
    flex-shrink: 0; 
}

#lightbox-shopify-container {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 280px; 
    margin-top: 10px;
    color: white;
}

/* Zwingt das Shopify-Fenster, die neue Höhe komplett auszunutzen */
#lightbox-shopify-container iframe {
    width: 100% !important;
    height: 280px !important;
    border: none !important;
}

.close-lightbox {
    position: absolute;
    top: 40px;
    right: 50px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 50px;
    font-weight: 200;
    cursor: pointer;
    transition: color 0.3s;
}
.close-lightbox:hover {
    color: white;
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 40px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9), 0px 1px 3px rgba(0, 0, 0, 0.7);
}
.lightbox-arrow:hover {
    color: white;
    transform: translateY(-50%) scale(1.2);
    text-shadow: 0px 6px 15px rgba(0, 0, 0, 1);
}
.left-arrow { left: 40px; }
.right-arrow { right: 40px; }

.image-container {
    cursor: pointer;
}

/* Optimierung für Mobilgeräte */
@media screen and (max-width: 768px) {
    .lightbox-content { max-width: 90%; }
    .left-arrow { left: 10px; z-index: 10001; }
    .right-arrow { right: 10px; z-index: 10001; }
    .close-lightbox { top: 20px; right: 25px; font-size: 40px; }
}