body {
        margin: 0;
        font-family: 'Owners_wide_medium';
        cursor: none;
        background-color: black;
    }

    #customCursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        border: 3px solid white;
        border-radius: 50%;
        background-color: transparent; /* No fill initially */
        pointer-events: none; /* Prevent cursor from interfering with clicks */
        transition: transform 0.2s ease, background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
        z-index: 1000;
    }

    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: calc(var(--vh, 1vh) * 100); /* Use calculated viewport height */
        position: relative;
        z-index: auto;
        background-color: black
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        overflow: hidden;
        height: 14vh;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
        z-index: 3;
        color: white;
        top: 0;
    }

    .title-container {
        position: relative;
    }
    
    #profilbild {
        position: absolute;
        transform: translate(-35%, 1.3vh) rotate(15deg);
        margin: 0;
        height: 50px;
        width: auto;
        filter: drop-shadow(0px 0px 10px black);
    }

    #profilbild.invertiert {
        filter: saturate(0) brightness(10000);
    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        overflow: hidden;
        flex-shrink: 0;
        height: 10vh;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
        font-size: 15px;
        padding: 10px 0;
        position: sticky;
        bottom: 0;
        display: flex; /* Make footer a flex container */
        justify-content: space-between; /* Space out child elements */
        flex-wrap: wrap; /* Allow wrapping if content overflows (optional) */
        flex-shrink: 0; /* Prevent footer from shrinking */
        z-index: 0;
        overflow: hidden;
    }

    .grid-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0px; /* KEINE Lücke zwischen den Grids */
        padding: 0; /* Kein Padding */
        margin-top: 0; /* Kein Margin */
    
    }

    .Impressum {
        padding: 0px;
        margin: 0vw 30vw; /* Left and right spacing */
        color: white;
        text-decoration: none;
        font-size: 12px;
    }

    .Impressum a{
        color: white;
        cursor: none;
        text-decoration: none;
    }

    .Impressum a:hover{
        text-decoration: underline;
    }

    .about {
        padding: 0px;
        margin-top: 5vh;
        color: white;
        text-decoration: none;
        z-index: 2;
        flex: 1;
        filter: drop-shadow(-3px 0px 8px rgb(24, 24, 24));
        letter-spacing: .7px;
    }

    .about a{
        color: white;
        cursor: none;
        text-decoration: none;
    }

    .about a:hover{
        text-decoration: underline;
    }

    .about-image{
        z-index: 0;
        position: fixed;
        margin-left: 400px;
        translate: 0px -15vh;
        flex-shrink: 0;
    }

    .round-borders{
        rotate: 5deg;
        border-radius: 7px;
        overflow: hidden; /* <- wichtig, damit das Bild abgerundet wird */
        display: inline-block;
    }

    .round-borders img{
        width: 30vh;
        height: auto;
        display: block;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .about-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 3vw;
        width: 600px;
        margin: 10vh auto;
        color: white;
        font-size: 15px;
    }

    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(7, 1fr);
        gap: 0.8vw; /* Space between items */
        padding: 0px;
        margin: 0.4vw 0.8vw; /* Left and right spacing */
    }

    .grid-wrapper, .video-item {
        will-change: opacity, transform;
    }

    .grid-wrapper .video-item {
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }
    
    /* Video Item Styling */
    .video-item {
        position: relative;
        width: 100%;
        background: black;
        overflow: hidden;
        cursor: none;
        border-radius: 5px;
    }

    #item1 {
        grid-area: 1 / 1 / 3 / 3;
        height: 50vh; /*Größe für inside elemente*/
    }
    #item2 {grid-area: 1 / 3 / 2 / 4;}
    #item3 {grid-area: 1 / 4 / 3 / 5;}
    #item4{grid-area: 3 / 1 / 5 / 2;}
    #item5{grid-area: 3 / 2 / 4 / 3;}
    #item6{grid-area: 2 / 3 / 4 / 4;}
    #item7{grid-area: 3 / 4 / 4 / 5;}
    #item8{grid-area: 4 / 2 / 6 / 3;}
    #item9{grid-area: 4 / 3 / 5 / 4;}
    #item10{grid-area: 4 / 4 / 5 / 5;}
    #item11{grid-area: 5 / 1 / 7 / 2;}
    #item12{grid-area: 5 / 3 / 7 / 4;}
    #item13{grid-area: 5 / 4 / 7 / 5;}
    #item14{grid-area: 6 / 2 / 8 / 3;}
    #item15{grid-area: 7 / 1 / 8 / 2;}
    #item16{grid-area: 7 / 3 / 8 / 4;}
    #item17{grid-area: 7 / 4 / 8 / 5;}


    .image-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        cursor: none;
    }
    
    /* Still image styling */
    .still-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.3s ease-in-out;
    }
    
    /* Preview video styling */
    .preview {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1; /* Start with hidden preview */
        transition: opacity 0.5s ease-in-out;
    }

    /* Hover effect to show the preview video */
    .video-item:hover .preview {
        opacity: 0; /* Show video preview on hover */
    }

    .video-item:hover .still-image {
        opacity: 1; /* Hide still image on hover */
    }

    .video-title {
        position: absolute;
        bottom: 10px; /* Positioning at the bottom */
        float: left;
        margin-left: 1vw;
        margin-bottom: 1vh;
        color: white;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 5px;
        opacity: 0; /* Hidden by default */
        transition: opacity 0.5s ease-in-out;
        pointer-events: none; /* Prevents interaction */
        font-family: 'Owners_wide';
        font-size: 15px;
        letter-spacing: .7px;
        line-height: 80%;
    }

    .video-title > h1{
        font-size: 15px;
        font-family: 'Owners_wide_medium';
        letter-spacing: .7px;
    }

    .case {
        padding: 0px;
        margin: 0vw 25vw; /* Left and right spacing */
        color: white;
        text-decoration: none;
        font-size: 13px;
        letter-spacing: .5px;
    }

    .case-video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        height: 0;
        overflow: hidden;
        margin-bottom: 55px;
    }

    .case-video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 7px;
    }

    @supports (-webkit-touch-callout: none) {
        .footer {
            display: block; /* Ensure it's not hidden */
            position: static; /* Ensure normal flow */
        }
    }

    #title {
        font-size: 38px;
        font-family: "owners-xnarrow", sans-serif;
        text-decoration: none;
        color: rgb(255, 255, 255);
        cursor: none;
    }

    #title:hover {
        color: rgb(0, 0, 255);
        text-decoration: none;
        cursor: none;
    }

    .footer a {
        color: white;
        text-decoration: none;
        cursor: none;
    }

    .footer a:hover {
        text-decoration: underline;
        cursor: none;
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        transition: background-color 0.2s;
        z-index: 2;
        justify-content: right;
    }

    #menuButton {
        z-index: 4;
        color: rgb(0, 0, 255);
        font-size: 32px;
    }

    .menu-content {
        display: block;
        text-align: right;
        box-sizing: border-box;
        margin-right: 3vw;
        margin-top: 15vh;
        z-index: 100;
    }

    .menu-content a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: rgb(255, 255, 255);
    }

    .menu-content a:hover {
        text-decoration: underline;
        cursor: none;
    }

    #menuButton:hover {
        color: rgb(255, 255, 255);
    }
    
    @media (max-width: 1500px) {

        .portfolio-grid {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(10, 1fr);
        }

        #item1 { grid-area: 1 / 1 / 3 / 3; }
        #item2  { grid-area: 1 / 3 / 2 / 4; }
        #item3  { grid-area: 2 / 3 / 4 / 4; }
        #item4  { grid-area: 3 / 1 / 5 / 2; }
        #item5  { grid-area: 3 / 2 / 4 / 3; }
        #item6 { grid-area: 4 / 2 / 6 / 3; }
        #item7 { grid-area: 4 / 3 / 5 / 4; }
        #item8 { grid-area: 5 / 3 / 7 / 4; }
        #item9 { grid-area: 5 / 1 / 6 / 2; }
        #item10 { grid-area: 6 / 1 / 7 / 2; }
        #item11 { grid-area: 6 / 2 / 8 / 3; }
        #item12 { grid-area: 7 / 1 / 9 / 2; }
        #item13 { grid-area: 7 / 3 / 9 / 4; }
        #item14 { grid-area: 8 / 2 / 10 / 3; }
        #item15 { grid-area: 9 / 1 / 10 / 2; }
        #item16 { grid-area: 9 / 3 / 10 / 4; }
        #item17 { grid-area: 10 / 2 / 11 / 3; }

        .Impressum {
            padding: 0px;
            margin: 0vw 25vw; /* Left and right spacing */
        }

        .case {
            padding: 0px;
            margin: 0vw 20vw; /* Left and right spacing */
        }
    }

    

    @media (max-width: 1000px) {

        .about-image{
            order: 1;
            z-index: 0;
            position: fixed;
            margin: 0 auto;
            flex-shrink: 0;
            translate: 0 -20vh;
            padding-left: 6vw;
            padding-right: 6vw;
            rotate: 0deg;
            overflow: hidden;
        }

        .round-borders{
            rotate: 0deg;
            border-radius: 7px;
            overflow: hidden; /* <- wichtig, damit das Bild abgerundet wird */
            display: inline-block;
            height: 25vh;
        }
        
        .round-borders img{
            width: auto;
            rotate: 0deg;
            display: block;
            max-width: 100%;
            height: auto;
            border-radius: 0px;
        }

        .about{
            order: 2;
            margin-top: 10dvh;
        }

        .about-wrapper {
            align-items: center;          /* vertikal zentriert innerhalb des Containers */
            flex-direction: column;
            gap: 3vw;
            width: auto;
            margin: 10vh auto;
            translate: 0 10vh;
            padding-left: 6vw;
            padding-right: 6vw;
            color: white;
            font-size: 12px;
        }

        .content, .header, .footer {
            margin-left: 6vw;
            margin-right: 6vw;
        }

        .header {
            height: 10vh;
        }

        #title {
            font-size: 30px;
        }

        #profilbild{
            width: 45px;
            height: 45px;
            transform: translate(-35%, 0.8vh) rotate(15deg);
            filter: drop-shadow(-3px 0px 8px rgb(27, 27, 27));
        }

        .footer {
            height: 5vh;
        }

        .menu-content {
            margin-top: 11vh;
        }

        .footer{
            font-size: 10px;
            position: sticky;
            display: flex;
            flex-direction: row;
        }

        .menu-content {
            margin-right: 7vw;
        }

        #customCursor {
            display: none;
        }

        body {
            cursor: auto;
        }

        .header a {
            font-size: 25px;
        }

        #menuButton:hover {
            color: rgb(0, 0, 255);
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Two columns on desktop */
            grid-template-rows: repeat(14, 1fr);
            gap: 1.3vw;
            padding: 0px;
            margin: 0.6vw 1.2vw;
        }

        #item1 { 
            grid-area: 1 / 1 / 3 / 3; 
            height: 32vh;
        }

        #item2 { grid-area: 3 / 1 / 4 / 2; }
        #item3 { grid-area: 3 / 2 / 5 / 3; }
        #item4 { grid-area: 4 / 1 / 6 / 2; }
        #item5 { grid-area: 6 / 1 / 7 / 2; }
        #item6 { grid-area: 5 / 2 / 7 / 3; }
        #item7 { grid-area: 7 / 2 / 8 / 3; }
        #item8 { grid-area: 7 / 1 / 9 / 2; }
        #item9 { grid-area: 8 / 2 / 9 / 3; }
        #item10 { grid-area: 9 / 1 / 10 / 2; }
        #item11 { grid-area: 9 / 2 / 11 / 3; }
        #item12 { grid-area: 10 / 1 / 12 / 2; }
        #item13 { grid-area: 11 / 2 / 13 / 3; }
        #item14 { grid-area: 12 / 1 / 14 / 2; }
        #item15 { grid-area: 13 / 2 / 14 / 3; }
        #item16 { grid-area: 14 / 1 / 15 / 2; }
        #item17 { grid-area: 14 / 2 / 15 / 3; }

        .Impressum {
            padding: 0px;
            margin: 0vw 6vw; /* Left and right spacing */
        }

        .case {
            padding: 0px;
            margin: 0vw 6vw; /* Left and right spacing */
        }

    }