*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f4f3f1;
    color:#111;
    font-family:"Cormorant Garamond", serif;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.03), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,.02), transparent 35%);
    pointer-events:none;
}

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:30px 50px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:1000;
}

.logo{
    text-decoration:none;
    color:#111;
    font-size:2rem;
    letter-spacing:4px;
}

.menu-toggle{
    background:none;
    border:none;
    font-size:2rem;
    cursor:pointer;
}

.menu{
    position:absolute;
    top:90px;
    right:50px;
    background:rgba(244,243,241,.96);
    padding:30px;
    display:flex;
    flex-direction:column;
    gap:15px;

    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:.3s;
}

.menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.menu a{
    text-decoration:none;
    color:#111;
    text-transform:uppercase;
    letter-spacing:3px;
}

.menu a[href="ausstellungen.html"]{
    display:none;
}

.container{
    width:min(1100px,90%);
    margin:auto;
    padding-top:120px;
    padding-bottom:2cm;
}

.hero{
    text-align:center;
}

.subtitle{
    letter-spacing:6px;
    text-transform:uppercase;
}

.hero h1{
    font-size:clamp(3rem,8vw,7rem);
    font-weight:400;
    text-transform:uppercase;
    margin:20px 0;
}

.role{
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:30px;
}

.intro{
    max-width:700px;
    margin:auto;
    font-size:1.5rem;
    line-height:1.6;
}

.artwork{
    margin-top:60px;
    text-align:center;
}

.artwork img{
    width:100%;
    max-width:100%;
    filter:grayscale(100%);
}

.page-section{
    width:min(900px,90%);
    margin:180px auto;
}

.page-section h1{
    text-align:center;
    font-size:4rem;
    margin-bottom:50px;
    font-weight:400;
}

.page-section p{
    font-size:1.5rem;
    line-height:1.8;
}

.page-section--gallery{
    width:min(1200px,92%);
}

.gallery-series{
    margin-bottom:100px;
}

.gallery-series:last-child{
    margin-bottom:0;
}

.gallery-series-title{
    text-align:center;
    font-size:2rem;
    font-weight:400;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.gallery-series-desc{
    text-align:center;
    font-size:1.1rem;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#666;
    margin-bottom:40px;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.gallery--featured{
    grid-template-columns:1fr;
    max-width:500px;
    margin:0 auto;
}

.gallery-item{
    position:relative;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    overflow:hidden;
    aspect-ratio:4/3;
}

.gallery-item--wide{
    grid-column:span 2;
    aspect-ratio:16/9;
}

.gallery-item--featured{
    aspect-ratio:3/4;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(100%);
    transition:transform .6s ease, filter .6s ease;
}

.gallery-caption{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(17,17,17,.45);
    color:#f4f3f1;
    font-size:1.4rem;
    letter-spacing:4px;
    text-transform:uppercase;
    opacity:0;
    transition:opacity .4s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img{
    transform:scale(1.04);
    filter:grayscale(0%);
}

.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption{
    opacity:1;
}

.gallery-item:focus-visible{
    outline:2px solid #111;
    outline-offset:4px;
}

.lightbox{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(17,17,17,.92);
    padding:60px 80px;
    opacity:0;
    transition:opacity .35s ease;
}

.lightbox.is-open{
    opacity:1;
}

.lightbox[hidden]{
    display:none;
}

.lightbox-content{
    max-width:90vw;
    max-height:85vh;
    text-align:center;
}

.lightbox-image{
    max-width:100%;
    max-height:calc(85vh - 60px);
    object-fit:contain;
    display:block;
    margin:0 auto;
}

.lightbox-caption{
    color:#f4f3f1;
    font-size:1.2rem;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-top:20px;
}

.lightbox-close{
    position:absolute;
    top:24px;
    right:32px;
    background:none;
    border:none;
    color:#f4f3f1;
    font-size:2.5rem;
    line-height:1;
    cursor:pointer;
    opacity:.7;
    transition:opacity .2s;
}

.lightbox-close:hover{
    opacity:1;
}

.lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#f4f3f1;
    font-size:3rem;
    line-height:1;
    cursor:pointer;
    opacity:.5;
    padding:20px;
    transition:opacity .2s;
}

.lightbox-nav:hover{
    opacity:1;
}

.lightbox-prev{
    left:16px;
}

.lightbox-next{
    right:16px;
}

@media (max-width:768px){
    .gallery{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .gallery-item--wide{
        grid-column:span 2;
    }

    .lightbox{
        padding:50px 20px;
    }

    .lightbox-nav{
        font-size:2rem;
        padding:10px;
    }
}

@media (max-width:480px){
    .gallery{
        grid-template-columns:1fr;
    }

    .gallery-item--wide{
        grid-column:span 1;
    }
}

.page-section--about{
    width:min(1200px,92%);
}

.about-layout{
    display:grid;
    grid-template-columns:minmax(280px, 42%) 1fr;
    gap:60px;
    align-items:start;
}

.about-portrait{
    position:sticky;
    top:140px;
}

.about-portrait img{
    width:100%;
    display:block;
    filter:grayscale(100%);
}

.about-content{
    display:flex;
    flex-direction:column;
    gap:50px;
    padding-top:10px;
}

.about-block h2{
    font-size:1.4rem;
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.about-block p{
    font-size:1.5rem;
    line-height:1.8;
}

.page-section--contact{
    width:min(800px,90%);
}

.contact-intro{
    text-align:center;
    margin-bottom:80px;
}

.contact-email{
    margin-top:24px;
}

.contact-email a{
    color:#111;
    font-size:1.8rem;
    letter-spacing:2px;
    text-decoration:none;
    border-bottom:1px solid rgba(17,17,17,.3);
    transition:border-color .3s;
}

.contact-email a:hover{
    border-bottom-color:#111;
}

.legal-section{
    margin-top:70px;
    padding-top:50px;
    border-top:1px solid rgba(17,17,17,.12);
}

.legal-section h2{
    font-size:1.6rem;
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:24px;
}

.legal-section h3{
    font-size:1.2rem;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
    margin:32px 0 12px;
    color:#444;
}

.legal-section p{
    font-size:1.25rem;
    line-height:1.8;
    margin-bottom:12px;
}

.legal-section a{
    color:#111;
}

@media (max-width:768px){
    .about-layout{
        grid-template-columns:1fr;
        gap:40px;
    }

    .about-portrait{
        position:static;
        max-width:400px;
        margin:0 auto;
    }
}

.exhibition{
    margin-bottom:40px;
}