:root {
    --akzent-farbe: #ddf23d;
}
   h1, h2, h3 {
        font-family: "Italiana", serif;
        font-size: 4rem;
        font-weight: 400;
        letter-spacing: 0.02em;
    }
    h4 {
        font-family: "Jura", monospace;
        font-size: 1.5rem;
    }


    html, body {
        min-width: 320px;
        min-height: 600px;
    }


    body { 
        font-family: "Jura", monospace;
        margin: 0;
    }
    body.detail { 
        overflow: hidden;
    }
    body.about { 
        padding: 0;
        overflow-x: hidden;
    }

    a {
        color: var(--akzent-farbe);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    a:hover {
        color: white;
    }

    .nav {
        position: fixed;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.8); 
        border-radius: 20px;
        padding: 1rem 0.8rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        z-index: 1000;
    }
    .nav a {
        color: white;
        text-decoration: none;
        writing-mode: vertical-rl; 
        transform: rotate(180deg); 
        font-family: "Jura", sans-serif;
        transition: color 0.3s ease;
    }
    .nav a:hover {
        color: var(--akzent-farbe); 
    }

 
   .button-wrapper {
        text-align: center;
        margin-top: 3rem;
        padding-bottom: 3rem;
    }
    .button {
        all: unset;
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        font-family: "Jura", sans-serif;
        font-size: 2em;
        padding: 0.8rem 3rem;
        border-radius: 40px;
        text-decoration: none;
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    .button:hover {
        transform: scale(1.05);
        color: var(--akzent-farbe);
    }




    /*Home-Seite*/
    body.home .nav{
        z-index: 0;
    }
    body.home.scrolled .nav {
    z-index: -1;
    pointer-events: none;
    }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1; 
        
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        background-color: white; 
        overflow: hidden;
        padding: 0;
    }
    .header-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .header-title {
        font-family: "Italiana", serif;
        font-size: clamp(5rem, 10vw, 10rem);
        white-space: nowrap;
        overflow: visible;
    }
    .scroll-subtitles {
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1;
    }
    .subtitle {
        font-family: "Jura", sans-serif;
        font-size: 2rem;
        color: black;
        transition: transform 0.1s ease-out;
        will-change: transform;
        position: relative;
    }
    .subtitle.top,
    .subtitle.bottom {
        opacity: 0.8;
    }
    .subtitle.bottom{
        padding-bottom: 1rem;
    }


    .about-wrapper {
        margin-top: 100vh; 
        position: relative;
        z-index: 1;
    }
    .about-section {
        display: flex;
        justify-content: center; 
        align-items: center; 
        gap: 2rem; 
        padding: 4rem 2rem;
        background-color: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: white;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        z-index: 10;
    }
    .deko-text-about {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        flex-shrink: 0;
    }
    .about-content {
        max-width: 500px;
    }


    .projects{
        background-color: white;
        z-index: 10;
    }
    .fav-projects {
        background-color: white;
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(6, 1fr);
        grid-column-gap: 2px;
        grid-row-gap: 2px;
        gap: 0;
    }
    .fav-projects img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%) contrast(110%);
    }
    .fav-projects img:hover{
        filter: none;
    }
    .fav-projects > div {
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    .div1 { grid-area: 1 / 1 / 4 / 5; }
    .div2 { grid-area: 1 / 5 / 3 / 7; }
    .div3 { grid-area: 1 / 7 / 3 / 10; }
    .div4 { grid-area: 4 / 1 / 7 / 3; }
    .div5 { grid-area: 4 / 3 / 7 / 5; }
    .div6 { grid-area: 3 / 5 / 7 / 8; }
    .div7 { grid-area: 3 / 8 / 7 / 10; }

    
    .project-link {
        border-top: 1px solid black; 
        padding: 0.5rem 1rem;  
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;       
    }
    .project-link:hover {
        background-color: rgb(221, 242, 61);
    }
    .project-link-unterste{
        border-top: 1px solid black; 
        border-bottom: 1px solid black;
        padding: 0.5rem 1rem;   
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;      
    }
    .project-link-unterste:hover {
        background-color: rgb(221, 242, 61);
    }
    .project-link a, .project-link-unterste a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        color: black;
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    .project-link a:hover, .project-link-unterste a:hover {
        transform: scale(1.04);
    }
    .project-link h3, .project-link-unterste h3,
    .project-link .number, .project-link-unterste .number{
        margin: 0;
        font-size: 3rem;
        font-family: "Italiana", serif;
        font-weight: 400;
        letter-spacing: 0.02em;
    }


    .footer {
        background-color: black;
        color: white;
        text-align: center;
        padding: 2rem 1rem;
        font-family: "Jura", sans-serif;
        margin-top: 0rem;
    }
    .footer-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
        margin-bottom: 1rem;
    }
    .footer-text {
        font-size: 0.85rem;
        opacity: 1;
    }




    /*About Me Seite*/
    .about-site-wrapper {
        position: relative;
    }
    .about-block {
        width: 100vw;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative; 
    }


    .block1 { z-index: 1; }
    .block2 { z-index: 2; }
    .block3 { z-index: 3; }
    .block4 { z-index: 4; }
    .block5 { z-index: 5; }


    .about-block.image {
        height: 100vh;
        position: sticky;
        top: 0;
        z-index: 2; 
        overflow: hidden;
    }
    .about-block.image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%) contrast(110%);
    }


    .about-block.text {
        min-height: 100vh;
        width: 100vw;
        padding: 3.5rem 0;
        
        box-sizing: border-box;
        position: relative;
        z-index: 3;
        display: flex;
        justify-content: center;
        align-items: flex-start; 
        overflow: auto; 
    }
    .about-block .inner {
        padding: 3.5rem;
        width: 100%;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 40px;
        box-shadow: 0 10px 50px rgba(0,0,0,0.1);
        box-sizing: border-box;
        margin: auto;
    }
    .icon-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap; /* wichtig für mobile */
        margin-top: 1rem;
    }
    .icon-row img {
        width: 50px;
        height: 50px;
        object-fit: contain;

        transition: transform 0.3s ease, filter 0.3s ease;
    }
    .icon-row img:hover {
        transform: scale(1.2);
        filter: brightness(1.2);
    }
    .icon-divider {
        border: none;
        height: 1px;
        width: 60%;
        margin: 4rem auto 1.5rem auto;

        background: linear-gradient(
            to right,
            transparent,
            rgba(0,0,0,0.4),
            transparent
        );
    }



    /*Kontaktseite*/
    body.contact::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url("media/about-me/image00004.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        filter: grayscale(100%) contrast(110%);
        z-index: -1;
    }


    .contact-wrapper {
        max-width: 700px;
        margin: 5rem auto;
        padding: 2rem;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: white;
        font-family: "Jura", sans-serif;
        border-radius: 40px;
    }
    .contact-wrapper h1 {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .contact-wrapper p {
        text-align: center;
        font-size: 1.3rem;
        line-height: 1.6;
        margin-bottom: 2rem;
        padding-left: 3rem; 
        padding-right: 3rem;
    }
    .contact-wrapper form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-left: 3rem; 
        padding-right: 3rem;
    }
    .contact-wrapper label {
        font-weight: bold; 
    }
    .contact-wrapper input,
    .contact-wrapper textarea {
        font-family: "Jura", sans-serif;
        padding: 0.8rem;
        border: none;
        border-radius: 20px;
        font-size: 1rem;
        background-color: rgba(255, 255, 255, 0.8);
        color: black;
         transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    .contact-wrapper input:hover,
    .contact-wrapper textarea:hover {
        background-color: rgb(221, 242, 61, 0.8);
        transform: scale(1.05);
    }
    .contact-wrapper a {
        display: block;
        text-align: center;
        margin-top: 2rem;
    }

    .contact-text {
        text-align: center;
        font-size: 1.3rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        padding: 0 3rem;
    }

    .divider {
        border: none;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,0.4),
            transparent
        );
        margin: 2rem auto;
        width: 70%;
    }
    .contact-info {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        padding: 0 3rem;
        flex-wrap: wrap; 
    }
    .contact-item {
        flex: 1;
        min-width: 200px;
        text-align: center;
        padding: 1rem;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(5px);
        transition: transform 0.3s ease, background-color 0.3s ease;
    }
    .contact-item:hover {
        transform: translateY(-5px);
        background: rgba(221, 242, 61, 0.2);
    }
    .label {
        display: block;
        font-size: 1.3rem;
        opacity: 0.7;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .contact-item a {
        color: white;
        text-decoration: none;
        font-size: 1.5rem;
    }
    .contact-item a:hover {
        text-decoration: underline;
    }



    /* Detailseiten*/
    .project h1{
        font-size: 3em;
        z-index: 5;
    }
    .project h2 {
        top: 0;
        background-color: white; 
        z-index: 10;
        padding: 0.5rem 0;
    }


    .carousel-wrapper {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden; 
    }
    .carousel {
        display: flex;
        transition: transform 0.5s ease-in-out;
        height: 100%;
        overflow: hidden;
    }


    .project {
        flex: 0 0 100vw;
        height: 100vh;
        overflow-y: auto;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-bottom: 5rem;
        box-sizing: border-box;
        position: relative;
    }


    .description-overlay {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: white;
        padding: 3.5rem;
        transition: bottom 0.4s ease;
        z-index: 999;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        max-height: 90vh;
        overflow-y: auto;
        box-sizing: border-box;
    }
    .description-overlay.active {
        bottom: 0;
    }
    .description-content {
        max-width: 800px;
        margin: auto;
    }


    .carousel-button {
        all: unset;
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        border-radius: 40px;
        position: absolute;
        bottom: 1rem;
        padding: 0.8rem 1rem;
        cursor: pointer;
        z-index: 10;
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    .carousel-button:hover {
        transform: scale(1.05);
        color: var(--akzent-farbe);

        
    }
    .carousel-button.prev {
        left: 1rem;
    }
    .carousel-button.next {
        right: 1rem;
    }

    .popup-trigger {
        cursor: pointer;
    }   

    .project img {
        border-radius: 3px;
    }
    .project video {
        border-radius: 3px;
    }
        .video-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
    }
    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 3px; 
    }




    /*Detailseiten individeulle Extras*/

     /*Drehende Karte*/
        .card-wrapper {
            display: flex;
            justify-content: center;
            margin-top: 2rem; 
        }
        .card {
            width: 300px; 
            height: 440px;
            perspective: 1000px; 
        }
        .card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        .card:hover .card-inner {
            transform: rotateY(180deg);
        }
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.25); 
            border-radius: 40px;
            overflow: hidden;
        }
        .card-front img, .card-back img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .card-back {
            transform: rotateY(180deg);
        }


     /*Logo Zoom*/
        .logo-wrapper {
            display: flex;
            justify-content: center;
            margin-top: 2rem; 
        }
        .logo {
            width: 300px;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        .logo:hover {
         transform: scale(1.10);
        }


     /*Video Layout*/
        .fixed-description {
            margin-top: 1rem;
            background: rgba(0, 0, 0, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: black;
            padding: 2rem;
            border-radius: 20px;
            box-sizing: border-box;
            max-width: 100%;
        }
        .fixed-description h3 {
            margin-top: 0;
            font-family: "Italiana", serif;
            font-size: 2.5rem;
        }
        .fixed-description h4 {
           color: black;
        }
        .fixed-description p {
            font-family: "Jura", monospace;
            font-size: 1.1rem;
            line-height: 1.5;
        }
    
   /*Grid Claw Machine*/
    .clawgrid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 1800px;
        margin: 2rem auto;
        padding: 0 2rem;
        box-sizing: border-box;
    }

    /* Row 1: Hero über volle Breite */
    .cdiv1 {
        width: 100%;
    }
    .cdiv1 video {
        width: 100%;
        aspect-ratio: 21 / 9;
        object-fit: cover;
        display: block;
        border-radius: 3px;
    }

    /* Row 2: 2/3 + 1/3 nebeneinander */
    .cdiv-row2 {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1rem;
    }

    /* Row 3: 50/50 nebeneinander */
    .cdiv-row3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    /* Row 4: 4 Videos gleich breit */
    .cdiv-row4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    /* Alle Medien einheitlich */
    .cdiv-row2 img,
    .cdiv-row2 video,
    .cdiv-row3 img,
    .cdiv-row3 video,
    .cdiv-row4 video {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        border-radius: 3px;
    }
    .cdiv-row4 video {
        aspect-ratio: 12 / 11;
    }
    .cdiv-row2 img:last-child {
        aspect-ratio: 9 / 10.1;  /* hochkant statt 16/9 */
    }

   


    /*Media Querys*/

    /*Tablet*/
 @media (max-width: 768px) {

    .nav {
        position: fixed;
        bottom: 10px;
        top: auto;
        left: 50%;
        transform: translateX(-50%);

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

        padding: 0.8rem 1.2rem;
        gap: 1.2rem;

        border-radius: 30px;
        z-index: 9999;
    }
    .nav a {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 1rem;
    }
    .nav {
        z-index: 9999 !important;
    }
    body.home .nav,
    body.home.scrolled .nav {
        z-index: 9999 !important;
        pointer-events: auto;
    }
}
    @media (min-width: 768px) {
        
     /*Home-Seite*/
        body.home .nav{
            z-index: 100;
        }
        body.home.scrolled .nav {
        z-index: 100;
        pointer-events: all;
        }

        .projects h2{
            padding-left: 6rem;
        }
        .project-link {
            padding: 0.5rem 6rem;         
        }
        .project-link-unterste{
            padding: 0.5rem 6rem;         
        }
        
     /*Detail-Seiten*/
        .project h2 {
            position: sticky;
        }
        .project {
            padding-left: 7rem;
            padding-right: 6rem;
           
        }
        .description-overlay {
            padding-left: 7rem;
            padding-right: 6rem;
        }
        .description-content {
            max-width: 1000px;
            margin: auto;
        }

     /*About-Seite*/
        .about-block.text {
            width: 84vw;
            max-width: 900px;
            margin: 0 auto; 
        }
        .about-block .inner {
            padding: 6rem;
        }
    }

    /* Desktop */
    @media (min-width: 1200px) {

        .description-overlay {
            padding-left: 7rem;
            padding-right: 6rem;
        }

    .project {
        padding-left: clamp(4rem, 8vw, 10rem);  
        padding-right: clamp(4rem, 8vw, 10rem);
        margin: 0 auto;
    }

     /*Feature Layout = oben ein Main, darunter Subs*/
        .project-grid.featured-layout {
            display: grid;
            grid-template-rows: auto auto;
            gap: 2rem;
            max-width: 1800px;
            margin: 0 auto;
        }
        .project-grid .main-image img {
            width: 100%;
            height: auto;
        }
        .project-grid .sub-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }
        .project-grid .sub-images img {
            width: 100%;
            height: auto; 
            object-fit: cover;
        }

     /*Abwandlung*/
        .project-grid.featured-layout.two .sub-images {
            grid-template-columns: 1fr 1.45fr;
        }

     /*Inverted Feature Layout= oben Subs, darunter Main*/
        .project-grid.inverted-feature-layout {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            max-width: 1800px;
            margin: 0 auto;
        }
        .inverted-feature-layout .top-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        .inverted-feature-layout .top-row img,
        .inverted-feature-layout .bottom-row img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            
        }
        .inverted-feature-layout .bottom-row img {
            width: 100%;
            height: auto;
        }

     /*Split Layout = rechts Main, links Subs*/
        .project-grid.vertical-split-layout {
            display: grid;
            grid-template-columns: 1fr 2fr; 
            gap: 2rem;
            align-items: stretch;
            max-width: 1800px;
            margin: 0 auto;
        }
        .vertical-split-layout .left-column {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        .vertical-split-layout .left-column img,
        .vertical-split-layout .right-column img {
            width: 100%;
            height: auto;
            
            object-fit: cover;
        }
        .vertical-split-layout .right-column img {
            height: 100%;
            object-fit: contain; 
        }
        .vertical-split-layout .right-column {
            display: flex;
            align-items: center;
            justify-content: center;
        }


     /*Stacked=einfach mittig übereinander*/
        .project-grid.stacked {
            display: flex;
            flex-direction: column;
            align-items: stretch; /* ← FIX */
            gap: 2rem;
            max-width: 1800px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        .project-grid.stacked img {
            width: 100%;
            max-width: 1800px;
            height: auto;
            object-fit: cover;
        }

     /*Einzelbilder*/
        .project-grid.single-centered {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem 1rem;
            max-width: 1800px;
            margin: 0 auto;
        }
        .project-grid.single-centered img{
            max-width: 1800px;
            object-fit: cover;
        }

        .detail img {
            max-height: 100vh;
            width: auto;
        }

    }