* {
    box-sizing: border-box;
}

        /* font size on smaller screens*/
        @media (max-width: 768px) {
        html {
            font-size: 85%;
        }
        }

/* sachen zu body*/
body {
    font-family: 'IBM Plex Sans Variable', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 1rem 2rem; /* top and bot, left right */
    margin: 0rem;
}

        @media (max-width: 768px) {
            body {
                padding: 1rem 1rem;
            }
        }

        body.imprint{
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

/*sachen zu main*/
main.privacy,
main.imprint{
    padding: 3rem 0.5rem;
    flex: 1;
}

/*css für bestimmte elemente*/
    h1,
    h2,
    h3{
        font-size: 1.5rem;
        padding: 1rem 1rem;
    }

    p {
        font-weight: 300;
        font-size: 1rem;
        max-width: 75%;
    }

    a {
        text-decoration: none;
        color: grey;
    }

        /* a verhalten: focus on links using tab, important for accesibility */
        a:focus{
            outline: 2px solid black;
            outline-offset: 2px;
        }

        a:hover{
            color: black;
        }

/*ALLGEMEINER HEADER*/
/* header section*/
    /*generell ulheader*/
    ul.header {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 1rem 1rem;
        gap: 2rem;
    }

        /*sachen zu logog links*/
        header .logo img {
            height: 6vh;               
            width: auto;
            transition: transform .6s ease-in-out;          
        }

        ul.header li:first-child {
            margin-right: auto;
        }

        /* rotation bei hover mit maus*/
        .logo img:hover{
            transform: rotate(360deg);
        }
        
        /* links style*/
        .header li a {
            display: inline-block;
            color: grey;
            text-decoration: none;
            font-weight: 700;
            transition: color .2s ease, transform 0.2s ease;
        }

        .header li a:hover,
        .header li a:focus {
            color: black;
            transform: scale(1.1);
        }

    @media (max-width: 768px){
        ul.header{
            padding: 1rem 2rem 0 2rem;
        }
    }


/* PORTFOLIO HOME*/

/* hero graphic, video */
    .animation-section {
        display: flex;
        position: relative;
        height: auto;
        padding: 3rem 2rem;
        margin: 0;
        justify-content: center;
    }

        /*video style*/
        .animation-video {
            width: 90vw;
            display: block;
            border-radius: 8px;
            object-fit: contain;
            cursor: pointer;
        }

        /* Play-Icon */
        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            color: white;
            cursor: pointer;
            opacity: 0;             /* standardmäßig unsichtbar */
            transition: opacity 0.3s ease;
            pointer-events: none;    /* Klick geht ans Video, nicht Icon */
        }


        /* darkmode-toggle, half circle changes while hovering 
            .half-circle{
                width: 1.25rem;
                height: 1.25rem;
                border-radius: 50%;
                border: 1.5px solid black;
                bottom: 50%;
                right: 1rem;
                z-index: 1;
                position: fixed;
            &.half-fill {
                background-image:
                linear-gradient(-90deg, black 50%, transparent 50%),
                linear-gradient(90deg, white 50%, transparent 50%);
            }
            }
            .half-circle:hover{
                width: 1.25rem;
                height: 1.25rem;
                border-radius: 50%;
                border: 1.5px solid black;
                bottom: 50%;
                right: 1rem;
                z-index: 1;
                position: fixed;
                cursor: pointer;
            &.half-fill {
                background-image:
                linear-gradient(-90deg, white 50%, transparent 50%),
                linear-gradient(90deg, black 50%, transparent 50%);
            }
            }*/


/*allgemein GRID für projekt übersicht*/
.works {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 1rem;
    gap: 0.5rem;
    grid-template-columns: repeat(1, 1fr);
}

            /*verschiedene grid bei versch screenssize*/
            @media (min-width: 320px) and (max-width: 499px) {
                .works {
                    grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem;
                }
            }

            @media (min-width: 500px) and (max-width: 1023px) {
                .works {
                    grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1rem;
                }
            }

            @media (min-width: 1024px) {
                .works {
                    grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 1.5rem;
                }
            }

        /*spezifisch listeneintrag bei projekte*/
        .work {
            position: relative;
            display: flex;
            flex-direction: column;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
        }
        
        /*alles zu images*/
            /* Image: Quadratisch */
            .work img {
                width: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                display: block;
                transition: transform 0.3s ease;
            }

            /*image größe transformieren*/
            .work img:hover,
            .work img:active {
                transform: scale(1.05);
            }

            /*overlay für work grid am desktop */
            .overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.75);
                display: flex;
                align-items: center;
                justify-content: center;
                color: black;
                font-size: 1rem;
                text-align: center;
                opacity: 0;
                transition: opacity 0.3s ease;
                pointer-events: none;
            }

    /*responsive overlay sachen, bei mobilen geräten kein hover*/
        /* Hover Overlay auf Desktop */
        @media (min-width: 769px) {
            .work:hover .overlay {
                opacity: 1;
            }
        }

        @media (max-width: 768px) {
            .overlay {
                position: static;
                background: none;
                color: black;
                opacity: 1;
                margin-top: 0.75rem;
                text-align: center;
            }
        }

/*infos um mich auf ig und mail zu kontaktieren*/
ul.contact{
    list-style: none;
    margin: 20px 0 0 0; /* top, right, bottom, left */
    padding: 2rem 1rem;
}

    /*happenings when hover, focus*/
        .contact li a:hover,
        .contact li a:focus{
            color: black;
        }

                @media (max-width: 768px){
            ul.contact{
                padding: 1rem 2rem;
            }
        }

/*FOOTER*/
/*footer auch schön machen*/
ul.footer{
        font-size: 0.75rem;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 3rem 1rem;
        gap: 1rem;
    }

    /*link footer zb imrint oder policy*/
    footer li a{
        color: grey;
        text-decoration: none;
        font-weight: 700;
        transition: color 0.2s ease;
    }

    /*footer special effects*/
        footer li a:hover,
        footer li a:focus{
            color: black;
        }

        /* bei mobil kürzeres copyright*/
            .short{
                display: none;
            }

            @media (max-width: 768px){
                .long {
                    display: none
                }
                .short {
                    display: inline;
                }
            }

            footer li .long,
            footer li .short{
                font-size: 0.75rem;
            }

        @media (max-width: 768px){
            ul.footer{
                padding: 1.5rem 1rem;
            }
        }

/*PROJEKT Posterübersicht*/

/* Wrapper zentriert alles im Viewport */
.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

    /*div als ul container*/
    .carousel {
        max-width: 100%;
        max-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /*meine poster ul*/
        .carousel-images {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            position: relative;
        }

        /*die dazugehörigen li*/
        .carousel-images li {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        /*class active*/
        .carousel-images li.active {
            display: flex;
        }

                /*meine posters*/
                .carousel-images img {
                    max-width: 100%;
                    max-height: 70vh;
                    width: auto;
                    height: auto;
                    object-fit: contain;
                    display: block;
                }

                /*figcaption zu poster*/
                .carousel-images figcaption {
                    margin-top: 1rem;
                    font-size: 0.8rem;
                    color: black;
                    text-align: center;
                }

        /*kleine pfeile links rechts*/
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1rem;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 10; /*auf jeden fall sichtbar*/
            color: black;
            user-select: none;
        }

        .prev { left: 1rem; }
        .next { right: 1rem; }

/* POSTER INFOTEXT*/

    /*text style*/
    .text-list {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 1rem;
    margin: 0;
    }

    .text-list li {
    flex: 1;
    }

    /*auch mein text responsiv, bei mobil switch zu column*/
    @media (max-width: 768px) {
    .text-list {
        flex-direction: column;
    }
    .posters{
        padding: 0.5rem;
    }
    }

/* ABOUT */

/* meine ul mit about info und bild*/
ul.about {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 1rem;
    margin: 0;
}

    /* left column: text */
    .about-text {
        flex: 2;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .about-text p{
        margin: 0;
    }

        /*geschachtelte uls in meiner about-ul*/
        .life{
            padding: 0 1rem;
        }
        .skills{
            list-style: none;
            margin: 0;
            padding: 0 1rem;
            font-weight: 300;
        }

        .adobe{
            list-style: none;
            margin: 0;
        }

    /*mein bild rechts neben infotext*/
    .about-image {
        display: flex;
        flex: 3;
        max-height: 80vh;
    }

        /*mehr zu meinem bild!*/
        .about-image figure{
            flex: 1;
            margin: o;
        }

        .about-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

@media (max-width: 500px){
    .about{
        flex-direction: column;
        align-items: stretch;
    }
    .about-image{
        width: 100%;
        height: 45vh;
        max-height: none;
    }
    .about-image figure{
        flex: 1;
        margin: 0;
        width: 100%;
    }
    .about-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width:500px){
    .about{
        flex-direction: row-reverse;
    }
}

/*POLICY*/

/* css spezifisch für policy*/
    ul.Policy{
        font-weight: 300;
        font-size: 1rem;
        max-width: 75%;
    }