/* global gradient auf body/html - scrollt mit der Seite (nicht fixed) */
/* Grundlegender, seitenweiter Gradient (läuft über die komplette Seitenhöhe) */

:root {
    --panel-bg: rgba(2,10,12,0.62); /* Grundfarbe des Panels (dunkel, leicht transparent) */
    --panel-bg-2: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
    --panel-border: rgba(255,255,255,0.06); /* subtle border */
    --panel-radius: 12px;
    --panel-shadow: 0 12px 28px rgba(0,0,0,0.45);
    --panel-blur: 6px; /* backdrop blur (opt.) */
    --text-on-panel: #E6EAF6;
}

/* radial aus Ecke unten-rechts */
body {
    background: radial-gradient(circle at 92% 98%, #000000 0%, #000000 28%, #0b7e45 55%, #000000 100%);
    color: var(--text);
    min-height: 100vh;
    background-size: 140% 140%;
}


html {
    /* nicht: height:100% - wir erlauben html/body dynamische Höhe */
    min-height: 100%;
    box-sizing: border-box;
}

/* Variante 3: linear diagonal (oben links dunkelblau -> unten rechts dunkelgrün) */
/* Variante 2: dunkles, fast schwarzes Umfeld mit grünem Kern (u.rechts) */
/*
body {
    background: radial-gradient( circle at 92% 98%, #071013 0%, #0b2a20 28%, #08623d 55%, #000305 100% );
    background-repeat: no-repeat;
    background-size: 140% 140%;
    background-position: center;
    background-attachment: scroll;
    min-height: 100vh;
}
    */
/*
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: lightgray;
    background: linear-gradient(180deg, #130018 0%, #4B0F63 45%, #C800FF 100%);
}*/

html{
    scroll-behavior: smooth;
}


/* Container: darf den Body-Gradient nicht überdecken; soll mit Inhalt wachsen */
.container {
    position: relative;
    width: 100%;
    min-height: 100vh; /* mindestens Viewport-Höhe, wächst mit Inhalt */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background-color: transparent; /* keine eigene Hintergrundfarbe, damit Body-Gradient überall sichtbar bleibt */
    box-sizing: border-box;
}

.back-vid{
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -1;
    mix-blend-mode: lighten;
}

header{
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.123);
    backdrop-filter: blur(10px);
    padding: 0 30px;
    box-shadow: 0 0 15px #72a1de52;
    z-index: 999;
}

.left{
    display: flex;
    align-items: center;
}

.left img{
    width: 40px;
    margin: 0 15px;
}

header ul {
    display: flex;
    justify-content: space-between;
    width: 30%;
    padding: 15px 15px;
    border-radius: 50px;
    background-color: rgba(0, 0, 69, 0.30);
    backdrop-filter: blur(10px);
    box-shadow: 0, 0, 10px #727fde6f;
}

header ul li{
    list-style: none;
}

header ul a{
    text-decoration: none;
    color: white;
    font-weight: 700;
    margin: 0 10px;
}

.box-icons{
    display: flex;
    gap: 40px;
}

.box-icons a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 30px;
    height: 30px;
    border: 2px solid #727fde;
    text-decoration: none;
    color: lightgray;
    border-radius: 50%;
    transition: 0.3s;
}

.box-icons a:hover{
    background-color: #727fde;
    color: black;
    box-shadow: 0 0 15px #727fde6f;
}

.blackhole-box{
    z-index: -1;
    position: absolute;
    top: 0;
    width: 100%;
    justify-content: center;
    mix-blend-mode: lighten;
}

.blackhole-box video{
    width: 100%;
    margin-top: -23.5%;
}

.hero {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 60vh;
    height: auto;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
}

.hero-info{
    position: absolute;
    left: 15%;
    top: 18%;
}


.hero-info .hero-info-title{
    color: #727fde6f;
    padding: 8px 5px;
    border: 1px solid #727fde6f;
    width: 240px;
    background-color: #2200493d;
    box-shadow: 0 0 5px #727fde88;
    border-radius: 50px;
}

.hero-info h1{
    font-size: 60px;
    max-width: 600px;
    font-weight: 700;
    line-height: 70px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.hero-info p{
    max-width: 550px;
    line-height: 25px;
    margin-bottom: 40px;
    font-size: 20px;
}

.hero-info button{
    color: white;
    padding: 15px 35px;
    border-radius: 10px;
    border: 1px solid #727fde8e;
    background-color: #2200493d;
    box-shadow: 0 0 5px #727fde6f;
    cursor: pointer;
    transition: 0.3s;
}

    .hero-info button + button {
        display: block;
        margin-top: 12px; /* Abstand nach oben */
    }

.hero-info button:hover{
    box-shadow: 0 0 20px #727fde6f;
}

/* Gradient Animation */

.gradient{
    background: linear-gradient(to right, #008baa, #7e42a7, #6070fd, #2a46ff, #0099ff, #008baa);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 2.5s linear infinite;
}

@keyframes animate-gradient{
    to{
        background-position: 200%;
    }
}

.hero-vid-box{
    position: absolute;
    right: 15%;
}

.hero-vid-box video{
    height: 900px;
    mix-blend-mode: lighten;
}

.hero-vid-box img {
    display: block; /* entfernt inline-Abstände */
    height: 400px; /* fixe Höhe: deutlich kleiner als 900px (anpassen möglich) */
    max-height: 60vh; /* schützt vor zu großer Darstellung auf sehr kleinen Bildschirmen */
    width: auto; /* behält Seitenverhältnis */
    object-fit: cover; /* füllt den sichtbaren Bereich, schneidet ggf. Ränder ab */
    mix-blend-mode: lighten; /* optional: falls du den gleichen Blend-Effekt wie beim Video willst */
    overflow: hidden; /* sicherheitshalber, falls das img größer sein sollte */
    }


/*.scroll-down{
    height: 50px;
    width: 30px;
    border: 2px solid lightgray;
    position: absolute;
    left: 49%;
    bottom: 8%;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(211, 211, 211, 0.459);
}

.scroll-down::before,
.scroll-down::after{
    content: "";
    position: absolute;
    top: 20%;
    left: 50%;
    height: 10px;
    width: 10px;
    border: 2px solid lightgray;
    transform: translate(-50%, -100%) rotate(45deg);
    border-top: transparent;
    border-left: transparent;
    animation: scroll-down 2s ease-in-out infinite;
}

.scroll-down::before{
    top: 30%;
    animation-delay: 0.5s;
}

@keyframes scroll-down{
    0%{
        opacity: 0;
    }
    30%, 60%{
        opacity: 1;
    }
    100%{
        top: 90%;
        opacity: 0;
    }
}
    */


@media (max-aspect-ratio: 16/9){
    .back-vid{
        width: auto;
        height: 100%;
    }
}

@media (min-aspect-ratio: 16/9){
    .back-vid{
        width: 100%;
        height: auto;
    }
}

.info-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin-top: 100px;
}

.section-title{
    font-size: 40px;
    font-weight: 700;
}

.info-cards{
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20px;
    width: 100%;
    height: 100%;
    margin-top: 30px;
}

.card{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: auto;
    height: 40vh;
    overflow: hidden;
    border: 1px solid gray;
    background-color: #080020b7;
    border-radius: 20px;
    transition: 0.3s;
}

.card img{
    width: 80%;
    height: 50%;
    object-fit: cover;
}

.card h1{
    position: absolute;
    margin: 0;
    bottom: 40%;
    left: 5%;
    font-size: 25px;
    z-index: 1;
    color: lightgray;
}

.card p{
    position: absolute;
    bottom: 3%;
    left: 5%;
    z-index: 1;
    max-width: 300px;
    color: gray;
    font-size: 13px;
    line-height: 20px;
}

.card video{
    margin-top: 10%;
    width: 70%;
    height: 50%;
    object-fit: cover;
    mix-blend-mode: lighten;
}

.card button{
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    border: 1px solid #727fde8e;
    background-color: #2200493d;
    box-shadow: 0 0 5px #727fde6f;
    cursor: pointer;
    transition: 0.3s;
    position: absolute;
    bottom: 5%;
    left: 5%;
}

.card button:hover{
    box-shadow: 0 0 15px #727fde6f;
    opacity: 0.7;
}

.card:hover{
    box-shadow: 0 0 15px rgba(211, 211, 211, 0.493);
}

.card:nth-child(3){
    grid-row: span 2;
    height: 83vh;
}

.card:nth-child(3) p{
    bottom: 12%;
}

.card:nth-child(3) h1{
    bottom: 21%;
}

.card:nth-child(4){
    grid-column: span 2;
}

.card:nth-child(4) p{
    max-width: 650px;
}

.card:nth-child(4) h1{
    bottom: 35%;   
}

.my-projects{
    display: flex;
    flex-direction: column;
    gap: 130px;
    align-items: center;
    position: relative;
    width: 80%;
    /* height: 100vh; */
    height: auto; 
    min-height: 100vh;
    margin-top: 200px;
    margin-bottom: 200px;
}

.project-card{
    display: flex;
    width: 100%;
    height: 40%;
    align-items: center;
    gap: 10%;
    justify-content: center;
}

.project-vidbox{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    position: relative;
    cursor: pointer;
    min-width: 400px;
    transition: 0.5s;
    mix-blend-mode: exclusion;
}

.project-vidbox video{
    object-fit: cover;
    width: 100%;
    box-shadow: 0 0 10px lightgray;
    border-radius: 20px;
    transition: 0.5s;
}

.project-vidbox video:hover{
    box-shadow: 0 0 20px lightgray;
}

.project-info{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 50%;
    padding-left: 10%;
}

.project-info h1{
    width: 90%;
    font-size: 25px;
    font-weight: bold;
    text-wrap: nowrap;
    margin-bottom: 10px;
    margin-top: 0;
    max-width: 450px;
}

.project-info p{
    width: 90%;
    max-width: 400px;
    min-width: 300px;
    margin-bottom: 50px;
    margin-top: 0;
}

.project-info button{
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    border: 1px solid #727fde8e;
    background-color: #2200493d;
    box-shadow: 0 0 5px #727fde6f;
    cursor: pointer;
    transition: 0.3s;
}

.project-info button:hover{
    box-shadow: 0 0 15px #727fde6f;
    opacity: 0.7;
}

.hover-sign{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 100px;
}

.hover-sign::before,
.hover-sign::after{
    content:"👆";
    text-align: center;
    position: absolute;
    font-size: 50px;
    top: 20%;
    left: 40%;
    border-radius: 50%;
    animation: hoverAnimation 3s ease-in-out infinite;
}

@keyframes hoverAnimation{
    0%{
        box-shadow: 0 0 5px lightgray;
        transform: translate(100%, 50%) rotate(30deg);
    }
    100%{
        box-shadow: 0 0 15px lightgray;
        transform: translateX(80%, 50%) rotate(0deg);
    }
}

.hover-sign.active{
    display: none;
}

/* Skills Section */

.skills-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.skills-box{
    width: 100%;
    height: 90vh;
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center;
}

.skills-image{
    width: 70%;
    mix-blend-mode: lighten;
    opacity: 0.7;
}

.designer{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: start;
    top: 25%;
    left: 5%;
    max-width: 300px;
}

.coder{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: start;
    top: 25%;
    right: 5%;
    max-width: 300px;
}

.skills-box h1{
    font-size: 50px;
    display: flex;
    align-items: center;
}

.skills-box p{
    line-height: 23px;
}

/* SLIDER */

.slider{
    position: absolute;
    bottom: 5%;
    right: 20%;
    width: 60%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
    mix-blend-mode: difference;
    opacity: 0.8;
}

.slider .list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width)* var(--quantity));
    position: relative;
}

.slider .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1) - 10s)!important;
}

.slider .list .item img{
    width: 100%;
}

@keyframes autoRun {
    from {
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}

.slider:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(1);
}

.slider .item:hover{
    filter: grayscale(0);
}

/* Contact Section */
.contact-section{
    width: 80%;
    height: 100vh;
    display: flex;
    justify-content: center;
    gap: 10%;
    align-items: center;
    position: relative;
}

.contact-section h1{
    position: absolute;
    top: 10%;
    left: 40%;
}

.social-box{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.social-box a{
    color: lightgray;
    text-decoration: none;
    font-size: 20px;
    text-wrap: nowrap;
}

.social-box i{
    color: #727fde;
    font-size: 30px;
    margin-right: 10px;
}

.social-icons a i{
    color: white;
    margin-top: 40px;
}

.contact-box p{
    max-width: 400px;
    margin-top: 30px;
    margin-bottom: 5px;
}

.contact-box input{
    padding: 7.5px 30px;
    background-color: lightgray;
    width: 80%;
    height: 25px;
    border: none;
    outline: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.contact-box button{
    margin-top: 30px;
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    border: 1px solid #727fde8e;
    background-color: #2200493d;
    box-shadow: 0 0 5px #727fde6f;
    cursor: pointer;
    transition: 0.3s;    
}

.contact-box button:hover{
    box-shadow: 0 0 15px #727fde6f;
    opacity: 0.7;
}

footer{
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.128);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.356);
    z-index: 999;
}

footer h1{
    font-size: 30px;
}

.menu-icon{
    font-size: 35px;
    cursor: pointer;
    display: none;
}

/* SideBar */
.sidebar{
    position: fixed;
    right: 0;
    top: 0;
    bottom: 70%;
    width: 0%;
    background-color: #000000b8;
    backdrop-filter: blur(10px);
    z-index: 999;
    box-shadow: 0 0 20px rgba(211, 211, 211, 0.411);
    border-bottom-left-radius: 100%;
    opacity: 0;
}

.close-icon{
    font-size: 50px;
    color: lightgray;
    padding-left: 10px;
    cursor: pointer;
}

.sidebar ul{
    padding-left: 20px;
}

.sidebar ul li{
    list-style: none;
    margin-bottom: 30px;
}

.sidebar ul li a{
    text-decoration: none;
    color: lightgray;
    font-size: 30px;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(128, 128, 128, 0.256);
}

.sidebar .social-icons{
    padding-left: 20px;
    margin-top: 60px;
    text-wrap: nowrap;
}

.sidebar .social-icons a{
    font-size: 35px;
    padding: 5px 5px;
    cursor: pointer;
}

/* Open Sidebar Animation */
.sidebar.open-sidebar{
    animation: openSidebarAnimation 1.5s forwards;
}

@keyframes openSidebarAnimation{
    to{
        width: 80%;
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    
    }
}

/* Close Sidebar Animation */
.sidebar.close-sidebar{
    animation: closeSidebarAnimation 1.5s forwards;
}

@keyframes closeSidebarAnimation{
    from{
        width: 80%;
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    }to{
        width: 0;
        opacity: 0;
        bottom: 70%;
        border-bottom-left-radius: 50%;
    }
}



/* Blur Effect Animation */
.autoBlur{
    animation: autoBlurAnimation linear both;
    animation-timeline: view();
}

@keyframes autoBlurAnimation {
    0%{
        filter: blur(40px);
        opacity: 0;
        mix-blend-mode: screen;
    }
    35%, 65%{
        filter: blur(0);
        opacity: 1;
        mix-blend-mode: normal;
    }
    100%{
        filter: blur(40px);
        opacity: 0;
        mix-blend-mode: screen;
    }
}

/* AUTO DISPLAY ANIMATION */
.autoDisplay{
    animation: autoDisplayAnimation both;
    animation-timeline: view();
}

@keyframes autoDisplayAnimation{
    from{
        filter: blur(10px);
        transform: translateY(-200px) scale(0);
        opacity: 0.2;
    }
    50%{
        opacity: 1;
        fill: blur(0);
        transform: translateX(0) scale(1);
    }
}

/* FADEIN-Right */
.fadeInRight{
    animation: fadeInAnimation both;
    animation-timeline: view();
}

@keyframes fadeInAnimation{
    0%{
        opacity: 0;
        transform: translateX(-500px) scale(0.2);
        filter: blur(20px);
        mix-blend-mode: screen;
    }
    35%, 65%{
        opacity: 1;
        transform: translateX(0px) scale(1);
        filter: blur(0);
        mix-blend-mode: normal;
    }
    100%{
        filter: blur(20px);
        mix-blend-mode: screen;
    }
}

/* TABLET RESPONSIVE */
@media screen and (max-width: 1000px){
    .blackhole-box video{
        margin-top: -20%;
    }

    .hero-info h1{
        font-size: 40px;
        max-width: 400px;
        line-height: 40px;
    }

    .hero-info p{
        max-width: 300px;
    }

    .hero-vid-box{
        right: 0;
    }

    .hero-vid-box video{
        height: 500px;
    }

    .section-title{
        font-size: 30px;
    }

    .info-cards{
        grid-template-columns: auto;
    }

    .card:nth-child(3){
        -ms-grid-column-span: 2;
        height: 70vh;
    }

    .info-cards .card h1{
        font-size: 20px;
    }

    .card:nth-child(3) h1{
        bottom: 25%;
    }

    .card video{
        height: 65%;
        margin-top: 5%;
    }

    .my-projects{
        margin-bottom: 300px;
    }

    .project-vidbox video{
        width: 250px;
        margin-left: -100px;
    }

    .project-info{
        padding-left: 0;
        margin-left: -50px;
    }

    .project-info h1{
        font-size: 20px;
        max-width: 200px;
        text-wrap: wrap;
    }

    .project-info p{
        font-size: 10px;
        text-wrap: wrap;
        max-width: 200px;
        min-width: 0;
    }

    .footer h1{
        font-size: 20px;
    }
}

/* MOBILE RESPONSIVE */

@media screen and (max-width: 700px){
    header{
        position: fixed;
        height: 50px;
    }

    header ul{
        display: none;
    }

    header .box-icons{
        display: none;
    }

    header h1{
        font-size: 25px;
    }

    .blackhole-box video{
        margin-top: -16%;
    }

    .hero{
        flex-direction: column;
    }

    .autoBlur{
        animation: none;
    }

    .hero-info{
        bottom: 5%;
    }

    .scroll-down{
        bottom: 5%;
    }

    .hero-info h1{
        line-height: 50px;
    }

    .hero-vid-box{
        top: 5%;
        right: 0%;
    }

    .card video{
        width: 100%;
    }

    .my-projects{
        margin-bottom: 600px;
    }

    .project-card{
        flex-direction: column;
        margin-left: 25%;
        gap: 30px;
    }

    .project-info{
        width: 85%;
    }

    .project-info h1{
        text-wrap: nowrap;
    }

    .project-info p{
        max-width: 300px;
    }

    .designer{
        top: 15%;
        left: 18%;
    }

    .coder{
        top: 50%;
        left: 18%;
    }

    .skills-box h1{
        margin-bottom: 0;
        margin-top: 70px;
    }

    .slider{
        bottom: 0;
    }

    .slider img{
        width: 60%;
    }

    .contact-section{
        flex-direction: column;
        margin-top: 100px;
        margin-bottom: 50px;
    }

    .contact-section .section-title{
        top: -40px;
        left: 25%;
    }

    footer h1{
        font-size: 17px;
    }

    .project-vidbox{
        min-width: 200px;
    }

    .menu-icon{
        display: inline;
    }
}

/* ---------------- Projects Section ---------------- */
.projects-section {
    padding: 32px 0 72px;
    background: transparent;
}

.section-title {
    text-align: center;
    font-size: 26px;
    margin: 0 0 28px 0;
    color: #EAEFFF;
}

/* Grid: 4 columns desktop, 2 columns tablet, 1 on mobile */
.projects-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
    justify-items: stretch;
    padding: 0 5%;
}

/* Breakpoints */
@media (max-width: 1100px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .projects-grid {
        grid-template-columns: 1fr;
        padding: 0 4%;
    }
}

/* Card */
.project-card {
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(3,3,8,0.35);
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}

    /* Hover */
    .project-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 36px rgba(3,3,8,0.45);
    }

/* Image */
.project-image {
    width: 100%;
    height: 160px; /* einheitliche Vorschaubildhöhe */
    object-fit: cover;
    display: block;
}

/* Body */
.project-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.project-title {
    margin: 0;
    font-size: 18px;
    color: #ffffff;
    font-weight: 700;
}

.project-genre {
    margin: 0;
    font-size: 13px;
    color: #BFC8FF;
}

.project-desc {
    margin: 0;
    font-size: 14px;
    color: #D1D6E6;
    line-height: 1.4;
    flex: 1;
}

/* ---- Überschreibungen für Projects (muss ans Ende der Datei) ---- */

/* Stelle sicher, dass die "alte" height:40% nicht mehr greift */
.projects-section .project-card {
    height: 40vh; /* kein prozentuales Height mehr */
    min-height: 260px; /* ausreichend große Karten, anpassen nach Wunsch */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    box-shadow: 0 12px 30px rgba(3,3,8,0.35);
    border-radius: 12px;
    overflow: hidden;
}

    /* Optional: größere Hover-Animation */
    .projects-section .project-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 22px 44px rgba(3,3,8,0.45);
    }

/* Mehr Platz für die Bilder (sichtbar größer) */
.projects-section .project-image {
    height: 240px; /* deutlich größer - ändere auf 200/260 etc. falls nötig */
    object-fit: cover;
    display: block;
}

/* Text größer / lesbarer */
.projects-section .project-title {
    font-size: 20px;
}

.projects-section .project-desc {
    font-size: 15px;
    line-height: 1.45;
}

/* projects-section: leicht nach oben ziehen (dezent) */
.projects-section {
    margin-top: -36px !important; /* negative margin = näher an Hero */
    padding-top: 8px !important; /* verringert oberen Innenabstand */
}

/* Mobile: negativen Margin nicht zu groß machen */
@media (max-width: 700px) {
    .projects-section {
        margin-top: -10px !important;
        padding-top: 12px !important;
    }
}

/* --- Header: Linke Gruppe (Logo + Icons) und rechte Navigation --- */
.header-left-group {
    display: flex;
    align-items: center;
    gap: 18px; /* Abstand zwischen Logo-Block und Icons */
}

/* .left bleibt wie gehabt; falls du Abstand zwischen Logo & Titel willst: */
.left {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Bild und "LutzCode" */
}

/* Box-icons direkt neben dem Logo (kleinerer Abstand als vorher) */
.box-icons {
    display: flex;
    gap: 12px; /* engerer Abstand, wirkt kompakter */
    margin-left: 6px;
}

/* Navigation auf der rechten Seite: ul wird nur so breit wie nötig */
.header-nav ul {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    background-color: rgba(0,0,69,0.20);
    border-radius: 50px;
    align-items: center;
}

/* Link-Styling (überschreibt evtl. alte header ul a Regeln) */
.header-nav a {
    color: white;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 8px;
    display: inline-block;
}

/* Falls vorher header ul { width: 30% } existiert, überschreiben wir es */
/* damit die Nav nicht mehr 30% breite nimmt */
header ul, .header-nav ul {
    width: auto;
}

/* kleine optische Anpassung: auf sehr großen Bildschirmen mehr Abstand */
@media (min-width: 1400px) {
    header {
        padding: 0 40px;
    }

    .header-nav ul {
        gap: 30px;
        padding: 12px 18px;
    }
}

/* Responsiveness: Mobile (behält bestehendes Verhalten: ausblenden und mobile menu-icon nutzen) */
@media screen and (max-width: 700px) {
    /* wie in deiner Datei: nav ausgeblendet, icons evtl. ausgeblendet */
    .header-nav ul {
        display: none;
    }

    /* wenn du trotzdem die icons links behalten willst, keine Änderung nötig,
     ansonsten: .box-icons { display: none; } ist bereits in deiner mobile CSS */
}


.designer.autoDisplay,
.coder.autoDisplay {
  /* Animation erst gar nicht laufen lassen: */
  animation: none !important;
  /* Direkt scharf und an der finalen Position: */
  filter: blur(0);
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* MORE CTA Button, bottom-right */
.project-cta {
    position: absolute;
    right: 16px;
    bottom: 16px;
    background-color: #001f7c38;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(114,127,222,0.25);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .project-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(114,127,222,0.30);
    }


/* === FORCE: MORE-Button permanent sichtbar + Cards höher machen === */

/* Ensure card is positioned and tall enough (vertical space) */
.project-card {
    position: relative !important; /* damit absolute CTA sich an Card orientiert */
    min-height: 320px !important; /* macht Karte vertikal grösser */
    padding-bottom: 84px !important; /* Platz für Button unten */
    overflow: visible !important; /* verhindert, dass der Button abgeschnitten wird */
}

/* Adjust preview image so text area grows */
.project-image {
    height: 240px !important;
    object-fit: cover !important;
}

/* Ensure the body area has room and text doesn't overlap the button */
.project-body {
    padding: 20px 20px 28px 20px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

/* Make CTA permanently visible and reachable */
.project-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    right: 18px !important;
    bottom: 18px !important;
    background: #727fde !important; /* change accent color if you want */
    color: #fff !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: 0 8px 20px rgba(114,127,222,0.25) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 50 !important;
}

    /* small hover polish (button still visible) */
    .project-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(114,127,222,0.30);
    }

/* Responsive: smaller cards on mobile but button still visible */
@media (max-width:700px) {
    .project-card {
        min-height: 380px !important;
        padding-bottom: 64px !important;
    }

    .project-image {
        height: 180px !important;
    }

    .project-cta {
        right: 12px !important;
        bottom: 12px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}


/* ----- Override: Cards kleiner / flacher machen ----- */
.projects-section .project-card {
    min-height: 320px !important; /* Gesamthöhe der Card verringern */
    max-height: 400px !important; /* optional: verhindert zu hohe Karten */
    padding-bottom: 36px !important; /* genug Platz für Button, aber weniger als vorher */
    overflow: hidden !important; /* sicherstellen, dass nichts rausragt */
}

/* Bild etwas kleiner machen, damit Textbereich ebenfalls kleiner wird */
.projects-section .project-image {
    height: 250px !important;
}

/* Optional: Textbereich kleiner machen */
.projects-section .project-body {
    padding: 12px 12px 12px 12px !important;
    gap: 6px !important;
    font-size: 13px;
}

/* ---------------- Breadcrumbs (hardcoded) ------------------ */
/* Platz unter Header sichern: Header-Höhe ist 70px in deiner CSS.
   Wir geben extra Puffer (z.B. 18px) damit es nicht direkt an der Header-Unterkante klebt. */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #E6EEFF;
    font-weight: 600;
    font-size: 14px;
    margin-top: 80px; /* Abstand oberhalb vom Breadcrumb-Block */
    /* links positionieren, so dass es unter LutzCode / Logo sitzt:
     header hat padding-left:30px; logo width ~40 + margin 15 → ~85px */
    padding-left: 90px; /* PASSE AN: erhöhe/verkleinere, falls es nicht genau unter dem Text sitzt */
    pointer-events: auto;
    z-index: 10;
}

    /* Links */
    .breadcrumbs a {
        color: #E6EEFF;
        text-decoration: none;
        background: rgba(255,255,255,0.03);
        padding: 4px 8px;
        border-radius: 6px;
    }

    /* Separator */
    .breadcrumbs .sep {
        color: rgba(230,238,255,0.6);
        padding: 0 6px;
    }

    /* Aktuelle Seite: kein Link */
    .breadcrumbs .current {
        color: #FFFFFF;
        background: transparent;
        padding: 0;
        font-weight: 700;
    }

/* Mobile: weniger padding-left, kleinere Schrift */
@media (max-width: 700px) {
    .breadcrumbs {
        padding-left: 16px;
        font-size: 13px;
        margin-top: 12px;
    }

        .breadcrumbs a {
            padding: 3px 6px;
        }
}

/* Breadcrumbs: links ausrichten ohne container zu verändern */
.breadcrumbs {
    width: 100%; /* volle Breite, damit justify-content wirkt */
    max-width: 1200px; /* optional: begrenzt die Breite wie dein Content */
    margin: 0 auto; /* zentriert die group innerhalb des Viewports (wenn du max-width nutzt) */
    margin-top: 80px;
    margin-left: 20px;
    justify-content: flex-start; /* linksbündig die Items anordnen */
    display: flex;
    align-items: center;
    padding-left: 90px; /* Abstand damit es unter dem Logo steht — ggf. anpassen */
    box-sizing: border-box;
}

/* Brand (Logo + Site name) als Link */
.left .brand {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Bild und Text */
    text-decoration: none; /* keine Unterstreichung */
    color: inherit; /* Textfarbe vom Eltern-Element übernehmen */
}

    /* Optional: Hover-Effekt */
    .left .brand:hover {
        transform: translateY(-2px);
        transition: transform .12s ease;
    }

    /* Sicherstellen, dass das img im Link genauso aussieht */
    .left .brand img {
        display: block;
        width: 40px; /* wie vorher */
    }

/* --- Contact form styling (für Formspree) --- */
.contact-form {
    max-width: 520px; /* Breite des Formulars */
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    color: #E6EAF6;
}

    /* einzelne Zeilen */
    .contact-form .form-row {
        display: block;
        margin-bottom: 18px;
    }

    /* Label oben */
    .contact-form .form-label {
        display: block;
        margin-bottom: 8px;
        color: #BFC8FF;
        font-size: 13px;
        font-weight: 700;
    }

    /* Input- / Textarea Styles (passen zu deinem Design) */
    .contact-form .form-input,
    .contact-form .form-textarea {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255,255,255,0.07);
        border: none;
        padding: 12px 14px;
        border-radius: 10px;
        color: #0f1020;
        font-size: 14px;
        outline: none;
        transition: box-shadow .12s ease, transform .06s;
    }

    /* Textarea etwas größer / mehr Zeilen */
    .contact-form .form-textarea {
        min-height: 160px;
        resize: vertical;
        line-height: 1.5;
    }

        /* Focus */
        .contact-form .form-input:focus,
        .contact-form .form-textarea:focus {
            box-shadow: 0 8px 20px rgba(114,127,222,0.18);
            transform: translateY(-1px);
        }

    /* Submit-Button (passe an deine vorhandenen Button-Klassen an) */
    .contact-form .form-actions {
        margin-top: 6px;
        text-align: left;
    }

    .contact-form .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #727fde;
        color: white;
        padding: 10px 14px;
        border-radius: 10px;
        font-weight: 700;
        border: none;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(114,127,222,0.2);
    }

        .contact-form .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 36px rgba(114,127,222,0.28);
        }

/* Responsive: auf schmalen Screens volle Breite nutzen */
@media (max-width: 700px) {
    .contact-form {
        max-width: 95%;
    }

        .contact-form .form-textarea {
            min-height: 140px;
        }
}

/* Buttons als Links: gleiche Optik wie .hero-info button */
.hero-info .btn {
    display: inline-block;
    color: white;
    padding: 15px 35px;
    border-radius: 10px;
    border: 1px solid #727fde8e;
    background-color: #2200493d;
    box-shadow: 0 0 5px #727fde6f;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none; /* verhindert Unterstreichung */
    font-weight: 600;
}

    .hero-info .btn + .btn {
        display: block;
        margin-top: 12px; /* falls du Buttons vertikal haben willst */
    }

    .hero-info .btn:hover {
        box-shadow: 0 0 20px #727fde6f;
        transform: translateY(-2px);
    }

/* Fix: hero buttons nicht full-width */
.hero-info .btn {
    display: inline-flex !important; /* bleibt so groß wie Inhalt */
    align-items: center;
    gap: 8px;
    padding: 15px 28px; /* anpassen wenn du andere Breite willst */
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap; /* verhindert Umbruch im Button-Text */
    box-sizing: border-box;
}

    .hero-info .btn + .btn {
        margin-top: 12px; /* Abstand zwischen den Buttons; kein display:block mehr */
        display: inline-flex !important;
    }


/* Re-usable "panel" look for any text container */
.panel {
    background: var(--panel-bg); /* fallback solide halbtransparent */
    background-image: var(--panel-bg-2); /* optional: leichter Gradient oben->unten */
    border-radius: var(--panel-radius);
    border: 0px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
    color: var(--text-on-panel);
    padding: 16px;
    box-sizing: border-box;
    /* Backdrop blur (glassy effect) - optional, remove if performance issue */
    -webkit-backdrop-filter: blur(var(--panel-blur));
    backdrop-filter: blur(var(--panel-blur));
}

/* Slight variation for smaller blocks (cards text area) */
.panel--card {
    padding: 18px;
    min-height: 120px;
}

/* For the hero text block, give larger padding and max-width */
.panel--hero {
    padding: 26px;
    max-width: 700px;
}

/* Make sure text colors inside panels are readable */
.panel h1, .panel h2, .panel h3, .panel p, .panel a {
    color: var(--text-on-panel);
}

/* If you want the "MORE" button sitting on the panel's bottom-right: */
.panel .project-cta {
    position: absolute; /* ensure parent is position:relative */
    right: 16px;
    bottom: 16px;
}

/* Responsive tweaks */
@media (max-width: 700px) {
    .panel {
        padding: 12px;
    }

    .panel--hero {
        padding: 18px;
        max-width: 95%;
    }
}

/* ---------- Unified card panel: card-bg + image on top (z-index) ---------- */

/* ensure consistent grid/card layout */
.projects-grid {
    gap: 24px;
}

    /* card = panel */
    .projects-grid .project-card {
        background: linear-gradient(180deg, rgba(2,10,12,0.92), rgba(2,10,12,0.92)); /* opaker Panel-Hintergrund */
        border-radius: 12px;
        box-shadow: 0 14px 36px rgba(0,0,0,0.55);
        overflow: visible; /* allow image overflow if needed */
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        min-height: 380px; /* all cards roughly same min height — anpassen */
        padding: 0 !important; /* inner padding handled by project-body */
        box-sizing: border-box;
    }

    /* image sits inside the card but above the card-bg visually */
    .projects-grid .project-image {
        display: block !important;
        width: 100% !important;
        height: auto !important; /* prefer natural height, not forced */
        max-height: 300px !important; /* limit, so images don't blow cards up */
        object-fit: cover !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        position: relative !important;
        z-index: 4 !important; /* ensure image is above the card background */
    }

    /* text panel fills the remaining area and sits above background but below image */
    .projects-grid .project-body {
        flex: 1 1 auto !important; /* grow to fill card vertical space */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 18px 18px 24px 18px !important; /* bottom padding so CTA not overlap text */
        box-sizing: border-box !important;
        background: transparent !important; /* card itself provides the background */
        z-index: 2 !important; /* below image but above card bg */
        color: var(--panel-text, #E6EAF6) !important;
        text-align: left !important;
    }

/* If you used .panel on project-body, keep it visually consistent */
.project-body.panel, .project-body.panel--card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* CTA button: keep visible on top of everything */
.projects-grid .project-cta {
    position: absolute !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 6 !important;
}

/* Optional: if you want image to slightly overlap the top edge (more "card art" feel) */
/* uncomment if desired */
/*
.projects-grid .project-image {
  margin-top: -16px;
  border-radius: 16px 16px 8px 8px;
}
*/

/* Responsive: stack to single column on mobile, reduce image height */
@media (max-width: 900px) {
    .projects-grid .project-image {
        max-height: 240px !important;
    }

    .projects-grid .project-card {
        min-height: 320px;
    }
}

@media (max-width: 700px) {
    .projects-grid {
        grid-template-columns: 1fr;
        padding: 0 12px;
    }

        .projects-grid .project-image {
            max-height: 200px !important;
        }

        .projects-grid .project-card {
            min-height: auto;
        }
}
/* ---- Einheitliche Card-Bilder: gleiche Größe / responsive ---- */
.projects-grid .project-image {
    display: block;
    width: 100%; /* volle Kartenbreite */
    height: clamp(160px, 20vw, 300px) !important; /* responsive Höhe (min|vw|max) */
    object-fit: cover; /* füllt Fläche, beschneidet sauber */
    object-position: center; /* Fokus zentriert */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    /* falls vorher irgendwelche max-height/height Regeln existieren: überschreiben */
    max-height: none !important;
}

/* Mobile: etwas kleinere Bildhöhe */
@media (max-width: 700px) {
    .projects-grid .project-image {
        height: clamp(140px, 28vw, 220px) !important;
    }
}

/* Quick fix: genug rechts Platz im Textbereich für den absolut positionierten CTA */
.projects-grid .project-body {
    padding: 18px 110px 24px 18px !important; /* top right bottom left */
    /* 110px = Platz für Button + Abstand; anpassen wenn dein Button breiter ist */
    box-sizing: border-box;
}

/* Responsive: weniger padding auf kleinen Bildschirmen */
@media (max-width: 700px) {
    .projects-grid .project-body {
        padding: 14px 14px 18px 14px !important; /* auf Mobile Button meist inline, kein extra Platz nötig */
    }
}

/* ------------------ Cards größer machen + 2 sichtbare Linien für project-desc ------------------ */

/* 1) Grid: höhere Zeilen auf großen Viewports (min / preferred / max) */
.projects-grid {
    /* mind. 460px, ideal 50vh, max 900px */
    grid-auto-rows: minmax(460px, min(50vh, 900px)) !important;
}

    /* 2) Karte nimmt Grid-Zeilenhöhe an */
    .projects-grid .project-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important; /* sehr wichtig, damit die Karte die Grid row height annimmt */
        min-height: 460px !important;
        box-sizing: border-box;
    }

    /* 3) Bild: proportionaler Anteil an der Kartenhöhe (Anpassen möglich) */
    .projects-grid .project-image {
        width: 100% !important;
        height: 44% !important; /* Bild nimmt 44% der Kartenhöhe -> ca. erste Hälfte */
        object-fit: cover !important;
        object-position: center;
        max-height: none !important;
    }

    /* 4) Textbereich füllt den Rest; Platz für CTA (Bottom padding) */
    .projects-grid .project-body {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        padding: 20px 20px 90px 20px !important; /* extra bottom padding damit CTA nicht überlappt */
        box-sizing: border-box;
        background: transparent !important; /* Hintergrund bleibt auf .project-card */
    }

    /* 5) ensure the MORE button won't overlap content (absolute safe) */
    .projects-grid .project-cta {
        position: absolute !important;
        right: 16px !important;
        bottom: 16px !important;
        z-index: 8 !important;
    }

/* 6) Force project-desc to at least 2 visible lines (responsive) */
.project-desc {
    line-height: 1.45; /* ideal für lesbarkeit */
    font-size: 14px; /* passe an deine Basisgröße an */
    min-height: calc(1.45em * 2) !important; /* mindestens 2 Zeilen */
    margin-bottom: 8px;
    overflow-wrap: break-word;
}

/* 7) Mobile / small screens: weniger Höhe damit Karten nicht zu groß werden */
@media (max-width: 900px) {
    .projects-grid {
        grid-auto-rows: minmax(380px, min(45vh, 720px)) !important;
    }

        .projects-grid .project-image {
            height: 48% !important;
        }

        .projects-grid .project-body {
            padding: 16px 16px 72px 16px !important;
        }
}

@media (max-width: 700px) {
    .projects-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto !important; /* content bestimmt Höhe mobil */
    }

        .projects-grid .project-image {
            height: 160px !important;
        }

        .projects-grid .project-card {
            min-height: auto !important;
            height: auto !important;
        }

        .projects-grid .project-body {
            padding-bottom: 24px !important;
        }

    .project-desc {
        min-height: calc(1.45em * 2) !important;
    }
    /* bleibt 2 lines */
}

/* ------------- Robust small-screen fixes ------------- */

/* 1) Sauberes box-sizing (verhindert unerwartete Breitenprobleme) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2) Verhindere horizontales Scrollen (falls Elemente leicht überstehen) */
html, body {
    overflow-x: hidden;
}

/* 3) Zentrale Max-Width & responsive Padding für die Grid-Region */
.projects-grid {
    width: 100%;
    max-width: 1200px; /* zentriert und begrenzt Breite */
    margin: 0 auto; /* zentriert das Grid */
    padding: 0 clamp(12px, 3vw, 32px); /* kleine, responsive Seitenabstände */
    box-sizing: border-box;
}

/* 4) Wenn header auf Mobile fixed ist: Content nicht darunter verstecken */
@media (max-width: 700px) {
    /* header ist bei dir schon fixed; sorgen wir für Abstand im Inhalt */
    .site-main {
        padding-top: 64px; /* Platz für den header (50px) + etwas Puffer */
    }

    /* grid: mobile einspaltig (falls noch nicht) und sicheres padding */
    .projects-grid {
        grid-template-columns: 1fr !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        /* project-card: stelle sicher, dass nichts die Box nach rechts schiebt */
        .projects-grid .project-card {
            min-width: 0; /* wichtig gegen flex/overflow issues */
            overflow: visible; /* erlauben (oder hidden wenn du Buttons lieber abschneidest) */
            margin: 0 auto;
        }

        /* project-body: verringere das extra-right-padding (desktop hatte mehr Platz für Button) */
        .projects-grid .project-body {
            padding: 14px !important; /* mobile: gleiche padding rundherum */
        }

        /* Wenn CTA absolut ist: lege den Abstand so, dass er nicht rausragt */
        .projects-grid .project-cta {
            right: 12px !important;
            bottom: 12px !important;
            transform: none !important;
        }

    /* Falls ein element (z.B. .box-icons) in header ausgeblendet ist, stellen wir sicher, dass die Breite trotzdem passt */
    header {
        left: 0;
        right: 0;
    }
}

/* 5) Extra-Schutz: Buttons/absolute Elemente dürfen nicht die Seite verbreitern */
.projects-grid .project-cta,
header .box-icons,
header .header-nav {
    max-width: 100%; /* verhindert, dass ein übergroßes Element die Seite verbreitert */
}

/* 6) Debughilfe (optional): sichtbare Umrandung für problematische Bereiche - entferne wenn OK */
@media (max-width:700px) {
    /* .projects-grid { outline: 1px dashed rgba(255,255,255,0.06); } */
    /* .projects-grid .project-card { outline: 1px dashed rgba(255,0,0,0.06); } */
}

/* ---------- Responsive grid: breitere cards auf großen Bildschirmen ---------- */

/* Container für das Grid: erlauben, mehr Platz zu nutzen auf großen Displays */
.projects-grid {
    width: 100%;
    max-width: 1600px; /* erhöht die nutzbare Breite auf großen Displays */
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 48px);
    box-sizing: border-box;
    display: grid;
    gap: 24px;
    /* auto-fit / minmax sorgt dafür, dass Spalten so groß wie möglich werden,
     aber nicht kleiner als 300px (du kannst 300px anpassen) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* grid-auto-rows legt die Zeilenhöhe (Kartenhöhe) fest; min ist 460px, preferred 45vh, max 1000px */
    grid-auto-rows: minmax(460px, min(45vh, 1000px));
}

/* Auf sehr großen Monitoren ggf. noch größere Min/Preferred Höhe */
@media (min-width: 2000px) {
    .projects-grid {
        max-width: 2000px;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        grid-auto-rows: minmax(520px, min(48vh, 1200px));
    }
}

/* Desktop: etwas großzügigere Bildhöhe (proportional) */
@media (min-width: 1200px) {
    .projects-grid .project-image {
        height: 46% !important; /* Bild nimmt fast die Hälfte der card-höhe */
    }
}

/* Mittleres Layout: 3 Spalten circa */
@media (max-width: 1400px) and (min-width: 900px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(420px, min(48vh, 900px));
    }
}

/* Kleinerer Bildschirm: 2 Spalten */
@media (max-width: 900px) and (min-width: 700px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(380px, min(45vh, 720px));
    }
}

/* Mobile keep as single column (your previous mobile styles likely already handle this) */
@media (max-width: 700px) {
    .projects-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important; /* content bestimmt height on phone */
        padding-left: 16px;
        padding-right: 16px;
    }

        .projects-grid .project-image {
            height: 160px !important;
        }
}

/* Make sure each card uses the grid row height */
.projects-grid .project-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Ensure body area uses remaining space and CTA has room */
.projects-grid .project-body {
    flex: 1 1 auto !important;
    padding: 20px 20px 96px 20px !important; /* extra bottom space for CTA */
    box-sizing: border-box;
}

/* CTA remains visible on top */
.projects-grid .project-cta {
    position: absolute !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 6 !important;
}

/* ------- Weniger vertikaler Abstand zwischen Cards auf großen Bildschirmen ------- */

/* Ziel: nur auf breiten/hochauflösenden Bildschirmen (nicht auf Mobile) */
@media (min-width: 1400px) {

    /* 1) weniger Abstand zwischen Grid-Zeilen/Spalten */
    .projects-grid {
        gap: 14px; /* Gesamtabstand (row + column) */
        row-gap: 12px; /* genauer: weniger vertikaler Abstand */
        padding-top: 18px; /* optional: etwas weniger Abstand oben im Grid */
        padding-bottom: 18px;
        max-width: 1600px; /* belasse die max-width, passt bei dir gut */
    }

    /* 2) Karten etwas flacher (geringere minimale Höhe) */
    .projects-grid {
        /* min = 420px (statt 520+), preferred = 42vh, max = 900px */
        grid-auto-rows: minmax(420px, min(42vh, 900px)) !important;
    }

        /* 3) Bild-Anteil leicht verringern, dadurch bleibt mehr Raum für Text ohne extra Höhe */
        .projects-grid .project-image {
            height: 42% !important; /* vorher war z.B. 50% - jetzt etwas kleiner */
        }

        /* 4) Textpanel-Padding reduzieren (vertikal weniger Luft) */
        .projects-grid .project-body {
            padding: 16px 20px 72px 20px !important; /* top/right/bottom/left */
        }
}

/* Kleine Anpassung auch für mittlere Bildschirme (optional) */
@media (min-width: 1000px) and (max-width: 1399px) {
    .projects-grid {
        gap: 16px;
        row-gap: 14px;
        grid-auto-rows: minmax(400px, min(42vh, 800px));
    }

        .projects-grid .project-image {
            height: 44% !important;
        }

        .projects-grid .project-body {
            padding: 16px 18px 78px 18px !important;
        }
}
/* ---------- Reduce vertical spacing between project cards (strong overrides) ---------- */

/* Grid: much smaller gaps */
.projects-grid {
  gap: 8px !important;         /* global gap */
  row-gap: 6px !important;     /* vertical gap between rows */
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* Reduce section top/bottom padding that can add extra space */
.projects-section {
  padding: 12px 0 16px !important;
  margin-top: 8px !important;
}

/* Section title spacing (smaller) */
.projects-section .section-title,
.section-title {
  margin: 0 0 10px 0 !important;   /* less space under the title */
  padding: 0 !important;
}

/* Make grid rows less tall (cards smaller height) */
.projects-grid {
  /* min row 320px, preferred 34vh, max 700px - tweak numbers if still too tall */
  grid-auto-rows: minmax(320px, min(34vh, 700px)) !important;
}

/* Ensure each card uses the grid row height */
.projects-grid .project-card {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Slightly reduce image portion so text area uses less vertical space */
.projects-grid .project-image {
  height: 40% !important;
}

/* make project-body use rest but with smaller paddings */
.projects-grid .project-body {
  padding: 14px 16px 64px 16px !important; /* less vertical padding */
}

/* If there is a parent container with gap, neutralize it */
.container, .my-projects, .info-section {
  gap: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Mobile: keep a bit more spacing on small screens for touch comfort */
@media (max-width: 700px) {
  .projects-grid {
    gap: 10px !important;
    row-gap: 10px !important;
    grid-auto-rows: auto !important;
  }
  .projects-grid .project-image { height: 160px !important; }
  .projects-grid .project-body { padding: 12px !important; }
}
/* reserve Platz rechts nur für die Kurzbeschreibung (verhindert Überlappung mit dem CTA) */
:root {
    --project-cta-space: 55px; /* Platz für Button + Sicherheitsabstand – anpassen falls nötig */
}

/* Nur die Kurzbeschreibung einkapseln */
.projects-grid .project-desc {
    padding-right: var(--project-cta-space) !important;
    box-sizing: border-box !important; /* wichtig, damit padding innerhalb der Box gerechnet wird */
    display: block;
    overflow-wrap: break-word;
}

/* Auf sehr schmalen Bildschirmen brauchen wir die Extra-Breite nicht */
@media (max-width: 700px) {
    .projects-grid .project-desc {
        padding-right: 12px !important;
    }
}

/* ---------------- Project media inside the dark panel ---------------- */
.project-content .project-media {
    margin: 16px 0 26px 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    gap: 16px;
}

    /* Einzelnes media-item (figure) */
    .project-content .project-media figure {
        margin: 0 0 12px 0;
        padding: 0;
        display: block;
        width: 100%;
    }

    /* Bild / Video Style: passt sich Breite an, bleibt innerhalb des Panels */
    .project-content .project-media img,
    .project-content .project-media video,
    .project-content .project-media .project-video {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.45);
        border: 1px solid rgba(255,255,255,0.03);
    }

    /* Caption */
    .project-content .project-media figcaption {
        font-size: 13px;
        color: #BFC8FF;
        margin-top: 8px;
    }

/* grid für mehrere thumbs */
.project-content .project-media-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 12px;
}

    .project-content .project-media-grid img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-radius: 8px;
    }

/* responsive: auf sehr kleinen Bildschirmen evtl. weniger Schatten / kleinere abstände */
@media (max-width: 700px) {
    .project-content .project-media img,
    .project-content .project-media video {
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    }

    .project-content .project-media-grid img {
        height: 100px;
    }
}

/* ---------------- Portfolio: größere, "volle" Vorschaubilder in den Cards ---------------- */
/* Vorschlag: ein sauberes Format 16:9, nicht zu flach */
.projects-grid .project-image {
  width: 100%;
  aspect-ratio: 16 / 9;     /* garantiert 16:9 - moderne Browser */
  height: auto;             /* Höhe kommt vom aspect-ratio */
  max-height: 360px;        /* limit falls Karten nicht zu riesig werden sollen */
  object-fit: cover;        /* füllt den Bereich & schneidet ggf. Ränder ab */
  object-position: center;  /* wo beschnitten wird (center / top / left) */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: block;
}

/* Falls aspect-ratio nicht komplett greift: Fallback mit fester Höhe */
@supports not (aspect-ratio: 1/1) {
  .projects-grid .project-image {
    height: 240px;          /* fallback-Höhe (anpassen) */
    object-fit: cover;
  }
}

/* Auf sehr großen Bildschirmen kannst du Höhe noch erhöhen */
@media (min-width: 1400px) {
  .projects-grid .project-image {
    max-height: 420px;
    aspect-ratio: 16/9;
  }
}

/* ---------------- Project page: Media-Grid (kleine thumbs unter Video) --------------- */
.project-content .project-media-grid img {
  width: 100%;
  height: 160px;            /* war vorher 120px — höher macht sie weniger flach */
  object-fit: cover;        /* wichtige Zeile: sauber beschnitten */
  object-position: center;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* Für größere thumbnails (falls du willst) */
@media (min-width: 1000px) {
  .project-content .project-media-grid img {
    height: 200px;
  }
}

/* Optional: wenn du mehrere Reihen mit gleicher Höhe möchtest */
/* ---------- Thumbnails: größere Zellen + ganze Bilder sichtbar (kein Crop) ---------- */
/* Grid: feste Reihenhöhe (Desktop größer), gleiche Zellen, stabile Layout-Flow */
.project-content .project-media-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* min cell width */
    grid-auto-rows: 260px; /* <-- Zellenhöhe: macht Thumbs deutlich größer (anpassen) */
    align-items: stretch;
    justify-items: center;
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
}

    /* Wrapper pro Zelle (nutze dieses HTML: <div class="thumb"><img ...></div>) */
    .project-content .project-media-grid .thumb {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px; /* kleiner Innenabstand, reduziert visuell "kleine" Bilder */
        background: rgba(0,0,0,0.04);
        border-radius: 8px;
        overflow: hidden;
    }

        /* Bild-Style: füllt Höhe, behält Seitenverhältnis, kein Crop */
        .project-content .project-media-grid .thumb img {
            height: 100%; /* füllt die komplette Zellenhöhe */
            width: auto; /* skaliert proportional */
            object-fit: contain; /* extra safety: zeigt das ganze Bild */
            object-position: center;
            display: block;
            border-radius: 6px;
            background: transparent;
        }

/* Desktop: noch größere Zellen, wenn Platz da ist */
@media (min-width: 1400px) {
    .project-content .project-media-grid {
        grid-auto-rows: 320px; /* mehr Höhe auf großen Bildschirmen */
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

        .project-content .project-media-grid .thumb {
            padding: 8px;
        }
}

/* Mobile: dichteres Grid, kleinere Zellen */
@media (max-width: 700px) {
    .project-content .project-media-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 140px;
        gap: 8px;
    }

        .project-content .project-media-grid .thumb {
            padding: 6px;
        }
}

/* ---------- Project media: smart layouts (single / two / grid) ---------- */
.project-content .project-media,
.project-media {
    width: 100%;
    box-sizing: border-box;
    margin: 18px 0 26px;
    color: #BFC8FF;
    font-size: 13px;
    line-height: 1.4;
}

    /* Basis figure (Wrapper für Bild + caption) */
    .project-media figure {
        margin: 0;
        padding: 0;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Bild default (used by all layouts) */
    .project-media img {
        display: block;
        width: auto; /* controlled per-layout */
        height: auto;
        max-width: 100%;
        border-radius: 8px;
    }

    /* ---------- 1) MEDIA SINGLE: 1 grosses Bild (full width inside panel) ---------- */
    .project-media.media-single figure,
    .project-media.media-single img {
        width: 100%;
        height: auto;
    }

    .project-media.media-single img {
        object-fit: contain; /* keine Beschneidung, Bild komplett sichtbar */
        object-position: top center; /* HUD oben bleibt sichtbar */
    }

    /* Caption under big image */
    .project-media.media-single figcaption {
        margin-top: 8px;
        color: #BFC8FF;
    }

    /* ---------- 2) MEDIA TWO: zwei große Thumbs nebeneinander ---------- */
    .project-media.media-two {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        align-items: stretch;
    }

        .project-media.media-two figure {
            height: 320px; /* macht die Thumbs groß — anpassen nach Wunsch */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            background: transparent; /* kein starkes Kästchen dahinter */
            border-radius: 10px;
            overflow: hidden;
        }

        .project-media.media-two img {
            height: 100%; /* füllt zelle in der Höhe */
            width: auto;
            object-fit: contain; /* wichtig: zeigt das ganze Bild */
            object-position: top center;
        }

        /* caption */
        .project-media.media-two figcaption {
            margin-top: 10px;
            color: #BFC8FF;
        }

    /* ---------- 3) MEDIA GRID: mehrere Thumbs (gleichmäßig & größer) ---------- */
    .project-media.media-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        grid-auto-rows: 260px; /* Zellenhöhe: groß genug, passt für viele Bilder */
        align-items: stretch;
        justify-items: center;
    }

        .project-media.media-grid figure {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent; /* kein störendes Kasten-Hintergrund */
            border-radius: 10px;
            overflow: hidden;
        }

        .project-media.media-grid img {
            height: 100%;
            width: auto;
            object-fit: contain; /* GANZES Bild sichtbar */
            object-position: center;
            display: block;
        }

        .project-media.media-grid figcaption {
            margin-top: 8px;
            color: #BFC8FF;
            font-size: 13px;
        }

/* Anpassungen für sehr große Bildschirme */
@media (min-width: 1400px) {
    .project-media.media-two figure {
        height: 380px;
    }

    .project-media.media-grid {
        grid-auto-rows: 320px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

/* Mobile: scrollbare 1-column Reihen (platzsparend) */
@media (max-width: 700px) {
    .project-media.media-two {
        grid-template-columns: 1fr;
    }

        .project-media.media-two figure {
            height: 220px;
        }

    .project-media.media-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }
}
.project-wrapper {
    max-width: 1400px; /* erhöht nutzbare Breite (eher 1200-1600 ok) */
    width: calc(100% - 60px);
    margin: 28px auto 80px;
    padding: 0 24px;
    box-sizing: border-box;
}


/* --- FORCE: figure + figcaption immer unter dem Bild (kein Seit-an-Seit) --- */
.project-media,
.project-media * {
    box-sizing: border-box;
}

    /* Stelle sicher, dass figure ein Block ist und die volle Breite einnimmt */
    .project-media figure,
    .project-media .figure {
        display: block !important;
        width: 100% !important;
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        background: transparent !important; /* kein störender Kasten */
        overflow: visible !important;
    }

        /* Bild/Video: volle Breite des figure, caption kommt darunter */
        .project-media figure img,
        .project-media figure video,
        .project-media .figure img,
        .project-media .figure video {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important;
            object-fit: contain !important; /* zeigt das ganze Bild; wenn du crop willst: cover */
            object-position: top center !important;
            border-radius: 8px !important;
        }

        /* Caption steht IMMER unter dem Bild */
        .project-media figure figcaption,
        .project-media .figure figcaption {
            display: block !important;
            margin-top: 8px !important;
            color: #BFC8FF !important;
            font-size: 13px !important;
            line-height: 1.4 !important;
        }

    /* Falls du ein media-grid nutzt: jede Zelle zeigt figure oben + caption unten (keine flex-wrapping) */
    .project-media.media-grid {
        display: grid !important;
        gap: 12px !important;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        grid-auto-rows: auto !important;
        align-items: start !important;
    }

        .project-media.media-grid > figure {
            display: block !important;
            height: auto !important;
        }

    /* Entferne/überschreibe frühere "thumb" flex-wrappers, damit caption nicht daneben landet */
    .project-media .thumb {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
    }

/* Falls du vorher media-row/flex benutzt hast: das erlaubt Bild+Text nebeneinander.
   Damit die Captions unter Bildern bleiben, nutze media-row nur für *anders* intendierte Bereiche.
   Optional defensive rule: */
.media-row figure {
    display: block !important;
}

/* Mobile: alles stacked, sicherheitshalber */
@media (max-width: 900px) {
    .project-media.media-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* --- PICKUPS: Card-Grid mit einheitlichen Bildern --- */
.pickups-section {
    width: 100%;
    max-width: 1400px;
    margin: 36px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Grid: 4 cols desktop, 3 tablet, 2 small, 1 mobile */
.pickups-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
}

@media (max-width: 1200px) {
    .pickups-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .pickups-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* einzelne Card */
.pickup-card {
    background: rgba(0,0,0,0.12); /* dunkles Panel */
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px; /* sorgt dafür, dass cards gleiche Höhe haben können */
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
}

    /* Hover */
    .pickup-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 36px rgba(0,0,0,0.45);
    }

/* Bild-Wrapper: festen Bildbereich definieren (zB 210px high) */
.pickup-image {
    width: 100%;
    height: 220px; /* fixierte Vorschauhöhe */
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

    /* Das tatsächliche img: füllt Wrapper gleichmäßig.
   object-fit: cover -> füllt (abschneiden möglich)
   object-fit: contain -> zeigt ganzes Bild (evtl. letterbox)
*/
    .pickup-image img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* -> zeigt komplettes Pickup, keine abgeschnittenen HUDs */
        object-position: center;
        display: block;
        background: transparent;
    }

/* Body unter dem Bild */
.pickup-body {
    padding: 0 6px 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

/* Titel + Beschreibung */
.pickup-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #E6EAF6;
}

.pickup-desc {
    margin: 0;
    font-size: 13px;
    color: #BFC8FF;
    line-height: 1.35;
    flex: 1;
}

/* optional: kleine meta/label-zeile */
.pickup-meta {
    font-size: 12px;
    color: #9fb2ff;
    opacity: 0.9;
}

/* Wenn du möchtest, dass manche Cards höher sind, entferne min-height oben. */

/* Two-column text + side image inside the project panel */
.project-two-column {
    display: grid;
    grid-template-columns: 1fr 500px; /* Text nimmt Rest, Bild fixe Breite */
    gap: 28px;
    align-items: start; /* Bild oben ausrichten, Text fließt */
    margin-bottom: 22px;
    width: 100%;
    box-sizing: border-box;
}

/* Text-Seite: nutzt die volle Rest-Breite */
.project-two-text {
    /* nichts extra nötig, kann bei Bedarf typografisch angepasst werden */
}

/* Bild-Box (rechts) */
.project-two-image {
    margin: 0;
    padding: 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.08); /* dezenter Kasten hinter dem Bild - sieht sauber im Panel aus */
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    text-align: center;
}

    /* Bild: vollständig sichtbar (HUD nicht abgeschnitten) */
    .project-two-image img {
        width: 100%;
        height: auto;
        max-height: 420px; /* verhindert zu hohe Bilder, anpassen nach Wunsch */
        object-fit: contain; /* WICHTIG: zeigt das ganze Bild (nicht zugeschnitten) */
        display: block;
        border-radius: 6px;
    }

    /* figcaption styling */
    .project-two-image figcaption {
        font-size: 13px;
        color: #BFC8FF;
        margin-top: 8px;
    }

/* Responsive: eine Spalte auf kleinen Bildschirmen */
@media (max-width: 900px) {
    .project-two-column {
        grid-template-columns: 1fr; /* Bild wandert unter Text */
        gap: 14px;
    }

    .project-two-image {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Optional: wenn das Panel bereits ein padding hat und du keine extra "background" box am Bild willst,
   entferne die background-Eigenschaft in .project-two-image (setze sie auf transparent). */

.project-two-column {
    /* vorher: gap: 28px; */
    gap: 14px 10px; /* row-gap column-gap -> weniger vertikaler und horizontaler Abstand */
    align-items: start;
}

/* ---------------- Two-column: Text links, Bild rechts (Project page) ------------- */
/* Sehr spezifisch damit andere Regeln nicht drübergehen */
.project-page .project-content .project-two-column {
    display: flex;
    gap: 100px; /* Abstand zwischen Text und Bild */
    align-items: flex-start; /* Bild oben ausrichten */
    justify-content: left;
    margin: 18px 0 28px; /* Abstand zum umgebenden Text */
    flex-wrap: wrap; /* mobil untereinander */
}

    /* Textbereich soll so viel Platz nehmen wie möglich */
    .project-page .project-content .project-two-column .project-two-text {
        flex: 1 1 56%; /* wächst, nimmt ~56% min - anpassbar */
        min-width: 300px; /* verhindert zu engen Text auf sehr kleinen Breakpoints */
        max-width: 600px;
    }

    /* Bildbereich: feste max-breite, kommt nah an den Text */
    .project-page .project-content .project-two-column .project-two-image {
        flex: 0 0 36%; /* Bild nimmt ~36% Breite (anpassen) */
        max-width: 560px; /* begrenzt Bildbreite */
        margin: 0; /* kein extra Abstand rechts */
        display: block;
    }

        /* Bild selbst: volle Breite des Containers, proportional */
        .project-page .project-content .project-two-column .project-two-image img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
            object-fit: cover; /* schneidet bei Bedarf, zentriert */
            box-shadow: 0 10px 28px rgba(0,0,0,0.35);
        }

        /* figcaption (kleinerer Text) direkt unter dem Bild, zentriert */
        .project-page .project-content .project-two-column .project-two-image figcaption {
            margin-top: 8px;
            font-size: 13px;
            color: #BFC8FF;
            text-align: center;
        }

/* Mobile: untereinander, Bild über Text (falls gewünscht) */
@media (max-width: 900px) {
    .project-page .project-content .project-two-column {
        flex-direction: column-reverse; /* Bild zuerst oder ändere zu column wenn Text zuerst */
        gap: 12px;
    }

        .project-page .project-content .project-two-column .project-two-text {
            flex-basis: 100%;
            min-width: 0;
        }

        .project-page .project-content .project-two-column .project-two-image {
            flex-basis: 100%;
            max-width: 100%;
        }
}

/* Falls deine Seite Reglen mit höherer Spezifität überschreiben,
   du kannst testweise die wichtigsten Eigenschaften mit !important erzwingen */
.project-page .project-content .project-two-column .project-two-image {
    /* max-width: 560px !important; */
    /* margin: 0 !important; */
}



.project-subheading.center-large {
    font-size: 2rem; /* etwas größer (ca. 20px) */
    font-weight: 700; /* optional: kräftiger */
    text-align: center; /* zentriert */
    margin: 18px 0; /* etwas Abstand oben/unten */
    line-height: 1.2;
}

/* kleine Geräte: Schrift leicht reduzieren */
@media (max-width: 700px) {
    .project-subheading.center-large {
        font-size: 1.05rem;
    }
}

/* ============================
   WICHTIG: Breite stabilisieren
   ============================ */

/* Hauptbereich: immer volle Breite bis max 1600px (zentriert) */
.site-main {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    display: block !important; /* verhindert unerwünschte flex/grid-Effekte */
}

/* Sektion mit den Projekten ebenso sichern */
.projects-section,
#projects,
#projectsGrid,
#projectsGrid.categorized {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

/* Jede Kategorie-Section ebenfalls */
.category-section {
    width: 100%;
    max-width: 1600px;
    margin: 28px auto;
    box-sizing: border-box;
}

/* Inneres Grid: responsiv, füllt die Sektion */
#projectsGrid.categorized .projects-inner-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    width: 100%;
    box-sizing: border-box;
}

/* -------------------------
   Layout-Schutz & Kategorie-Grid
   ------------------------- */

/* Hauptbereich: stabilisieren */
.site-main {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Projekte-Wrapper */
#projects,
#projectsGrid,
#projectsGrid.categorized,
.projects-section {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

/* Jede Kategorie soll eine volle, zentrierte Reihe belegen */
.category-section {
    width: 100%;
    max-width: 1600px;
    margin: 28px auto;
    box-sizing: border-box;
    padding: 0 16px;
    display: block;
}

/* Inneres Grid: max. 4 Karten pro Zeile auf Desktop */
#projectsGrid.categorized .projects-inner-grid {
    display: grid;
    gap: 12px;
    /* Desktop: max 4 Spalten, Kartenbreite mindestens 260px */
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    width: 100%;
    box-sizing: border-box;
}

/* Responsive: weniger Spalten auf kleineren Viewports */
@media (max-width: 1200px) {
    #projectsGrid.categorized .projects-inner-grid {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
    }
}

@media (max-width: 900px) {
    #projectsGrid.categorized .projects-inner-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 520px) {
    #projectsGrid.categorized .projects-inner-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Damit die Cards dieselbe "visuelle Größe" behalten wie im Chrono-Grid, 
   stellen wir sicher, dass ihre Boxing gleich bleibt */
.project-card {
    box-sizing: border-box;
    /* wenn du feste Höhe hattest, kannst du sie hier ergänzen, 
     z.B. min-height: 360px; (nur falls notwendig) */
}

/* Kategorie-Section: kein horizontales padding mehr, damit Grid die volle Breite behält */
.category-section {
    width: 100%;
    max-width: 1600px; /* gleiche Max-Width wie Hauptgrid */
    margin: 28px auto;
    box-sizing: border-box;
    padding: 0; /* wichtig: entfernt zusätzlichen Innenabstand */
    display: block;
}

/* Titel oberhalb, nimmt keinen horizontalen Platz weg */
.category-title {
    text-align: center;
    margin: 0 0 12px;
    padding: 0; /* kein padding, reduziert keine Breite */
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1; /* kompakt */
}

/* Das innere Grid füllt die volle Breite der Section */
#projectsGrid.categorized .projects-inner-grid {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    /* grid-template-columns/gap setzen wir per JS (kopieren vom Original-Grid) */
}

/* Sicherstellen, dass die project-card dieselbe Box-Größe verwendet wie Chrono-Ansicht */
.project-card {
    box-sizing: border-box;
}

/* ======= Grid-Basis (gilt für Chrono- und Kategorie-View) ======= */
#projectsGrid, .projects-grid {
    display: grid;
    gap: 1.6rem;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
}

    /* Desktop: maximal 4 Spalten */
    .projects-grid,
    #projectsGrid.categorized .projects-inner-grid {
        grid-template-columns: repeat(4, minmax(260px, 1fr));
    }

/* Breakpoints (reduziert Spalten je schmaler) */
@media (max-width: 1200px) {
    .projects-grid,
    #projectsGrid.categorized .projects-inner-grid {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
    }
}

@media (max-width: 900px) {
    .projects-grid,
    #projectsGrid.categorized .projects-inner-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 520px) {
    .projects-grid,
    #projectsGrid.categorized .projects-inner-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ======= Kategorie-Wrapper unverändert breit halten ======= */
#projectsGrid.categorized {
    display: block; /* damit Kategorien untereinander stehen */
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
}

/* Kategorie-Section und Title */
.category-section {
    width: 100%;
    max-width: 1600px;
    margin: 28px auto;
    padding: 0;
    box-sizing: border-box;
}

.category-title {
    margin: 0 0 12px;
    padding: 0;
    line-height: 1;
    text-align: center;
}

/* Inneres Grid füllt die ganze Section und verwendet dieselben Spalten/Gap-Regeln */
.projects-inner-grid {
    display: grid; /* Fallback; Spaltenregel wird durch die Regeln oben getroffen */
    gap: 1.6rem;
    width: 100%;
    box-sizing: border-box;
}

/* ======= Card-Höhe: in Kategorien nutzen wir die CSS-Variable --card-min-height ======= */
.project-card {
    box-sizing: border-box;
    min-height: var(--card-min-height, auto); /* wird per JS gesetzt wenn Kategorie-Ansicht aktiv */
}

/* ---------------- Responsive Hero (Überschreiben der absoluten Werte) ---------------- */

/* Grundlegendes flex-layout: nebeneinander auf großen Bildschirmen, wrap bei Bedarf */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(36px, 6vw, 80px) 5%;
    box-sizing: border-box;
    min-height: 60vh;
    flex-wrap: wrap; /* erlaubt Umbruch auf kleine Bildschirme */
}

/* Wichtig: überschreibe absolute Positionen, damit Elemente im Flow sitzen */
.hero-info,
.hero-vid-box {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: 48%; /* nebeneinander: je ca. halbbreite */
    max-width: 720px;
    box-sizing: border-box;
}

    /* Text-Box: responsive Typo */
    .hero-info h1 {
        font-size: clamp(28px, 5vw, 60px);
        line-height: clamp(32px, 5.5vw, 70px);
        margin-top: 0.4rem;
        margin-bottom: 0.8rem;
    }

    .hero-info p {
        font-size: clamp(14px, 2.2vw, 20px);
        max-width: 100%;
        margin-bottom: 1.2rem;
    }

/* Bild-Box: passt Bild an Containerbreite an */
.hero-vid-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hero-vid-box img,
    .hero-vid-box video {
        width: 100%;
        height: auto;
        max-height: 60vh; /* schützt vor zu grossen Medien */
        object-fit: contain;
        display: block;
    }

/* Buttons in der Text-Box: nebeneinander, aber auf kleinen Screens umbrechen */
.hero-info .btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    margin-right: 12px;
    white-space: nowrap;
}

/* ---------------- Mobile / schmale Screens ---------------- */
@media (max-width: 900px) {
    .hero {
        padding: 28px 4%;
    }

    /* stack: Bild zuerst, Text darunter (besser für mobile UX) */
    .hero {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
    }

    .hero-info,
    .hero-vid-box {
        width: 100% !important;
        max-width: 100%;
    }

    .hero-info {
        padding-top: 12px;
    }

        .hero-info h1 {
            font-size: clamp(24px, 6.5vw, 42px);
            line-height: 1.08;
        }

        .hero-info p {
            font-size: 16px;
            margin-left: 0;
            margin-right: 0;
        }

    .hero-vid-box img,
    .hero-vid-box video {
        max-height: 40vh;
    }

    /* Buttons: zentriert und etwas mehr Abstand */
    .hero-info .btn {
        margin: 8px 6px;
    }
}

/* Extra small screens - sicherstellen, dass nichts raussteht */
@media (max-width: 420px) {
    .hero-info h1 {
        font-size: 20px;
        line-height: 1.05;
    }

    .hero-info p {
        font-size: 14px;
    }

    .hero-vid-box img {
        max-height: 32vh;
    }
}


/* ---------------- Hero: zentrieren auf breiten Bildschirmen ---------------- */
.hero {
    display: flex;
    align-items: center;
    justify-content: center; /* ganze Hero-Gruppe zentrieren */
    gap: clamp(1rem, 4vw, 5rem); /* Abstand zwischen Card und Bild */
    padding: clamp(36px, 6vw, 80px) 0%;
    box-sizing: border-box;
    flex-wrap: wrap; /* erlaubt Umbruch auf schmalen Bildschirmen */
    /* zentrale Begrenzung: verhindert, dass Card und Bild zu weit auseinander rücken */
    max-width: 1700px; /* bei Bedarf anpassen (z.B. 1100px oder 1400px) */
    margin: 0 auto; /* zentriert die Hero-Block in der Seite */
}

/* Entferne/überschreibe absolute Positionierungen */
.hero-info,
.hero-vid-box {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: auto;
  box-sizing: border-box;
}

/* Auf sehr großen Bildschirmen: Card etwas breiter als Bild */
@media (min-width: 1100px) {
  .hero-info {
    flex: 0 0 55%;
    max-width: 45%;
    text-align: left; /* falls du linksbündigen Text bevorzugst */
  }

  .hero-vid-box {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Mittlere Breiten: proportional anpassen */
@media (min-width: 901px) and (max-width: 1099px) {
  .hero-info { flex: 0 0 60%; max-width: 60%; }
  .hero-vid-box { flex: 0 0 40%; max-width: 40%; }
}

/* Kleine/handybreite Bildschirme: bereits von dir gut eingestellt (stack) */
@media (max-width: 900px) {
  .hero {
    flex-direction: column-reverse;
    text-align: center;
    gap: 1rem;
  }

  .hero-info,
  .hero-vid-box {
    width: 100% !important;
    max-width: 100%;
  }

  .hero-info { padding-top: 12px; }
}

/* ----------------------------
   Fix: Seitenränder & mobile Gutter
   ---------------------------- */

/* 1) Etwas weniger Seiten-Padding (kleiner als 24px) */
.project-wrapper {
    max-width: 1800px;
    margin: 40px auto 80px;
    padding: 0 16px; /* was 24px -> reduziert seitliche Lücke */
    box-sizing: border-box;
    width: calc(100% - 32px); /* stellt sicher, dass es nicht über den Viewport hinausläuft */
}

/* Falls deine .container global extra Padding hat: entfernen/überschreiben */
.container {
    padding-left: 0;
    padding-right: 0;
}

/* 2) Two-column: Text darf schrumpfen, verhindert erzwungene Breite */
.project-two-column {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* wichtig: min-width:0 damit die Text-Spalte wirklich schrumpfen kann */
.project-two-text {
    flex: 1 1 0;
    min-width: 0; /* verhindert, dass die Textspalte overflow erzwingt */
}

/* Bild-Seite in der Spalte: beschränken, damit sie nicht zu breit bleibt */
.project-two-image {
    flex: 0 0 320px; /* feste Max-Breiten-Vorgabe auf großer Ansicht */
    max-width: 40%;
}

    .project-two-image img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

/* 3) Mobile: Spalten untereinander, weniger Padding */
@media (max-width: 860px) {
    .project-wrapper {
        padding: 0 12px; /* noch weniger Seitenabstand auf kleinen Displays */
        margin: 20px auto 40px;
        width: 100%;
    }

    .project-two-column {
        flex-direction: column;
        gap: 12px;
    }

    .project-two-image {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .project-content {
        padding: 4px;
    }
    /* kompakteres Panel auf Mobil */
}

/* 4) Sehr kleine Telefone */
@media (max-width: 480px) {
    .project-wrapper {
        padding: 0 0px;
        width: calc(100% - 0px);
    }

    .project-title {
        font-size: 22px;
    }

    .project-meta {
        font-size: 13px;
        gap: 12px;
    }
}

/* ===================== Kategorie-Panel / Styles ===================== */
/* Basis für jede Kategorie-Section (Panel-Look für die Karten-Gruppe) */
.category-section {
    margin: 28px 0;
    padding: 16px;
    border-radius: 14px;
    box-sizing: border-box;
    transition: transform .18s ease, box-shadow .18s ease;
    /* leichter glasiger Hintergrund, lässt Body-Gradient durchscheinen */
    background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.12));
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 8px 30px rgba(2,10,12,0.45);
}

    /* etwas Abstand zwischen title und grid */
    .category-section .projects-inner-grid {
        padding: 14px;
        border-radius: 10px;
        /* leicht dunkleres Feld für die Karten (Kontrast zur Section) */
        background: linear-gradient(180deg, rgba(2,10,12,0.12), rgba(2,10,12,0.06));
        gap: 20px;
    }

/* größere, stärkere Kategorie-Überschrift */
.category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.6rem; /* größer */
    font-weight: 800;
    color: #f6f6f6;
    margin: 0 0 14px 0;
    letter-spacing: 0.6px;
}

    /* Accent stripe (kleines dekoratives Element links in der Überschrift) */
    .category-title::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 32px;
        border-radius: 6px;
        background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    }

/* Hover-Pop für die ganze Kategorie (subtil) */
.category-section:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(2,10,12,0.6);
}

/* ---------------- different accents per category ---------------- */
/* Klassen werden dynamisch von JS gesetzt: category-game-jam, category-experimental, category-art, category-web */

/* Game Jam: warmes orange/grün Accent */
.category-game-jam .category-title::before {
    background: linear-gradient(180deg, #FFD37A, #FFB84D);
}

.category-game-jam {
    border-left: 6px solid rgba(255,179,77,0.14);
}

/* Experimental: cyan / blauig */
.category-experimental .category-title::before {
    background: linear-gradient(180deg, #8BEAF9, #4FC3F7);
}

.category-experimental {
    border-left: 6px solid rgba(79,195,247,0.14);
}

/* Art: magenta / pink */
.category-art .category-title::before {
    background: linear-gradient(180deg, #FF9ED6, #FF6FB5);
}

.category-art {
    border-left: 6px solid rgba(255,111,181,0.14);
}

/* Web: lila / blau */
.category-web .category-title::before {
    background: linear-gradient(180deg, #BBA8FF, #7F7BFF);
}

.category-web {
    border-left: 6px solid rgba(127,123,255,0.14);
}

/* Fallback / Uncategorized */
.category-uncategorized .category-title::before {
    background: linear-gradient(180deg, #E0E0E0, #BDBDBD);
}

.category-uncategorized {
    border-left: 6px solid rgba(255,255,255,0.06);
}

/* Kleine responsive Anpassung: Titel etwas kleiner auf schmalen Screens */
@media (max-width: 700px) {
    .category-title {
        font-size: 1.2rem;
    }

    .category-section .projects-inner-grid {
        padding: 10px;
    }
}


/* =================== CATEGORY - FULL PANEL COLOR OVERRIDES =================== */
/* Paste this at the very end of style.css */

/* 1) Ensure the category sections use their own background and are visible */
#projectsGrid.categorized .category-section {
    background: none !important; /* neutralisiert ältere generische Regeln */
    position: relative !important;
    overflow: visible !important;
}

    /* 2) Make inner grid transparent so the section background shows through */
    #projectsGrid.categorized .category-section > .projects-inner-grid,
    #projectsGrid.categorized .category-section > .projects-inner-grid.panel {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0px !important; /* behält Innenabstand für Karten */
    }

    /* 3) Give each category a full-panel background (adjust colors as you like) */
    #projectsGrid.categorized .category-section.category-game-jam {
        background: linear-gradient(180deg, rgba(255,179,77,0.30), rgba(25,60,30,0.85)) !important;
        border-left: 8px solid rgba(255,179,77,0.45) !important;
    }

    #projectsGrid.categorized .category-section.category-experimental {
        background: linear-gradient(180deg, rgba(79,195,247,0.30), rgba(15,30,60,0.85)) !important;
        border-left: 8px solid rgba(79,195,247,0.38) !important;
    }

    #projectsGrid.categorized .category-section.category-art {
        background: linear-gradient(180deg, rgba(255,111,181,0.30), rgba(40,10,30,0.85)) !important;
        border-left: 8px solid rgba(255,111,181,0.38) !important;
    }

    #projectsGrid.categorized .category-section.category-web {
        background: linear-gradient(180deg, rgba(127,123,255,0.30), rgba(20,18,40,0.85)) !important;
        border-left: 8px solid rgba(127,123,255,0.38) !important;
    }

/* 4) keep cards readable: cards stay on top and keep their dark panels */
#projectsGrid.categorized .projects-inner-grid .project-card {
    position: relative;
    z-index: 3;
    /* fallback card background if needed */
    background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.95));
}

/* responsive tweak */
@media (max-width: 900px) {
    #projectsGrid.categorized .category-section {
        padding: 10px !important;
    }

        #projectsGrid.categorized .category-section > .projects-inner-grid {
            padding: 12px !important;
        }
}

/* ================= CATEGORY HEADER STYLING ================= */

/* Grundlayout der Überschrift */
#projectsGrid.categorized .category-section .category-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    margin: 0 0 18px 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #f5f7fa;
    background: rgba(8, 14, 18, 0.65);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: relative;
}

    /* Farbiger Akzent links in der Titelbox */
    #projectsGrid.categorized .category-section .category-title::before {
        content: "";
        width: 6px;
        height: 22px;
        border-radius: 4px;
        display: inline-block;
    }

/* ================= CATEGORY COLORS ================= */

/* Game Jam */
#projectsGrid.categorized .category-section.category-game-jam .category-title::before {
    background: rgba(255,179,77,0.95);
}

/* Experimental */
#projectsGrid.categorized .category-section.category-experimental .category-title::before {
    background: rgba(79,195,247,0.95);
}

/* Art */
#projectsGrid.categorized .category-section.category-art .category-title::before {
    background: rgba(255,111,181,0.95);
}

/* Web */
#projectsGrid.categorized .category-section.category-web .category-title::before {
    background: rgba(127,123,255,0.95);
}

/* ================= Optional: leichtes Hover-Feedback ================= */
#projectsGrid.categorized .category-section:hover .category-title {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

/* Responsive */
@media (max-width: 700px) {
    #projectsGrid.categorized .category-section .category-title {
        font-size: 1.1rem;
        padding: 8px 14px;
    }
}


.project-card {
    background: #0b0b0b;
    border-radius: 14px;
    border: 5px solid rgba(255,255,255,0.15);
}

/* Kategorie-Farben */
.category-game-jam .project-card {
    border-color: rgba(255,179,77,0.65);
}

.category-experimental .project-card {
    border-color: rgba(79,195,247,0.6);
}

.category-art .project-card {
    border-color: rgba(255,111,181,0.6);
}

.category-web .project-card {
    border-color: rgba(127,123,255,0.6);
}


/* === Simple outline as black border === */
#projectsGrid.categorized .projects-inner-grid .project-card,
.project-card {
    outline: 3px solid rgba(0,0,0,0.95) !important;
    outline-offset: 0px;
    border-radius: 12px !important;
}

/* --------------------- Disable category-wide hover effects --------------------- */
/* 1) Verhindert, dass beim Hovern über die gesamte Kategorie etwas "hochkommt" */
#projectsGrid.categorized .category-section:hover {
    transform: none !important;
    /* setze hier die normale (nicht-hover) Box-Shadow, damit es nicht "aufblinkt" */
    box-shadow: 0 18px 40px rgba(0,0,0,0.55) !important;
}

    /* 2) Verhindert, dass die Titel beim Hovern der Section nach oben springen */
    #projectsGrid.categorized .category-section:hover .category-title {
        transform: none !important;
        /* optional: behalte normalen Titel-Schatten */
        box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    }

    /* 3) Verhindert, dass beim Hovern der Section die einzelnen Karten ge-animatet werden */
    #projectsGrid.categorized .category-section:hover .project-card {
        transform: none !important;
        /* setze Standard-Shadow für Cards (nicht-hover Zustand) */
        box-shadow: 0 8px 26px rgba(0,0,0,0.55) !important;
    }

/* --------------------- Keep card hover-only behavior --------------------- */
/* Stelle sicher, dass einzelne Karten beim Überfahren trotzdem reagieren */
#projectsGrid.categorized .project-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.65) !important;
}

/* --------------------- Make card text permanently clear/readable --------------------- */
/* Erhöht den Kontrast: dunklen Card-Background + weiße, leicht geschärfte Schrift */
#projectsGrid.categorized .project-card,
#projectsGrid.categorized .project-card .project-content {
    background: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.95)) !important;
    color: #ffffff !important;
}

    /* Texte (Titel/Meta/Paragraph) klar weiß mit leichtem Text-Shadow für bessere Lesbarkeit */
    #projectsGrid.categorized .project-card h3,
    #projectsGrid.categorized .project-card h4,
    #projectsGrid.categorized .project-card p,
    #projectsGrid.categorized .project-card .project-meta,
    #projectsGrid.categorized .project-card .project-description {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }

    /* kleinere Meta-Texte ebenfalls */
    #projectsGrid.categorized .project-card small {
        color: #eaeaea !important;
        text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    }


/* ================= Fix: Card hover wieder aktivieren (höhere Spezifität) ================= */

/* Sicherstellen, dass einzelne Karten beim Hover anheben (überschreibt andere !important-Regeln) */
#projectsGrid.categorized .category-section .projects-inner-grid .project-card:hover,
#projectsGrid.categorized .projects-inner-grid .project-card:hover,
#projectsGrid.categorized .category-section:hover .projects-inner-grid .project-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.72) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
    z-index: 10 !important; /* sicherstellen, dass die Karte über anderen Inhalten liegt */
}

/* Falls es noch eine generelle "disable" Regel gibt, die transform:none !important setzt
   (z.B. #projectsGrid.categorized .category-section:hover .project-card { transform: none !important; }),
   diese explizit neutralisieren, wenn die Karte selbst gehovt wird: */
#projectsGrid.categorized .category-section:hover .projects-inner-grid .project-card:hover {
    transform: translateY(-6px) !important;
}

/* Optional: wenn du willst, dass Text beim Hover noch etwas "aufgehellt" wird */
#projectsGrid.categorized .projects-inner-grid .project-card:hover h3,
#projectsGrid.categorized .projects-inner-grid .project-card:hover p {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}

/* ================= Disable hover effects on touch / small screens ================= */

/* Primary: devices that do not support hover (touchscreens) */
@media (hover: none) {
    /* Prevent cards from translating/animating on touch devices */
    #projectsGrid.categorized .project-card:hover,
    #projectsGrid.categorized .projects-inner-grid .project-card:hover {
        transform: none !important;
        box-shadow: 0 8px 26px rgba(0,0,0,0.55) !important; /* standard card-shadow */
    }

    /* Prevent category-level hover effects as well (if any left) */
    #projectsGrid.categorized .category-section:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Reduce/disable transitions to avoid flicker on touch */
    #projectsGrid.categorized .project-card,
    #projectsGrid.categorized .project-card * {
        transition: none !important;
    }

    /* Make touch feel snappy and remove tap highlight */
    #projectsGrid.categorized .project-card {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* Fallback: small screens (optional) */
@media (max-width: 900px) {
    #projectsGrid.categorized .project-card:hover,
    #projectsGrid.categorized .projects-inner-grid .project-card:hover {
        transform: none !important;
        box-shadow: 0 8px 26px rgba(0,0,0,0.55) !important;
    }

    #projectsGrid.categorized .category-section:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    #projectsGrid.categorized .project-card,
    #projectsGrid.categorized .project-card * {
        transition: none !important;
    }
}

/* ===== simple TOC styling ===== */
.project-toc {
    max-width: 1100px;
    margin: 12px auto;
    padding: 10px 12px;
    background: rgba(8,12,14,0.6);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    color: #f3f7fb;
}

    .project-toc h3 {
        margin: 0 0 8px 0;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .project-toc ul {
        margin: 0;
        padding-left: 16px;
    }

    .project-toc li {
        margin: 6px 0;
        line-height: 1.25;
    }

    .project-toc a {
        color: rgba(220,225,230,0.95);
        text-decoration: none;
        padding: 4px 6px;
        border-radius: 6px;
    }

        .project-toc a:hover {
            background: rgba(255,255,255,0.03);
            color: #fff;
        }

/* kleine responsive Anpassung */
@media (max-width: 900px) {
    .project-toc {
        margin: 10px 12px;
    }
}

/* ========== Mobile Category Indicator (responsive, shows <= 900px) ========== */
.mobile-category-indicator {
    display: none;
}

@media (max-width: 900px) {
    .mobile-category-indicator {
        display: flex;
        position: fixed;
        z-index: 9999;
        top: 50vh;
        transform: translateY(-50%);
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 24px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        background: rgba(8,12,10,0.85);
        color: #fff;
        font-weight: 800;
        font-size: 0.95rem;
        pointer-events: none;
        opacity: 0;
        transition: opacity .22s ease, transform .22s ease;
        will-change: opacity, transform;
    }

        .mobile-category-indicator.left {
            left: 8px;
            right: auto;
            transform: translateY(-50%) translateX(-6px);
        }

        .mobile-category-indicator.right {
            right: 8px;
            left: auto;
            transform: translateY(-50%) translateX(6px);
        }

        .mobile-category-indicator .indicator-dot {
            width: 10px;
            height: 30px;
            border-radius: 6px;
            display: inline-block;
            box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
        }

        .mobile-category-indicator .indicator-text {
            display: inline-block;
            padding-left: 6px;
            padding-right: 8px;
            white-space: nowrap;
        }

        .mobile-category-indicator.visible {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

    @media (max-width: 420px) {
        .mobile-category-indicator {
            font-size: 0.9rem;
            padding: 6px 10px;
        }

            .mobile-category-indicator .indicator-dot {
                width: 8px;
                height: 26px;
            }
    }
}

/* category accent color mapping */
.mobile-category-indicator.cat-game-jam {
    background: linear-gradient(90deg, rgba(255,179,77,0.12), rgba(0,0,0,0.75));
}

.mobile-category-indicator.cat-experimental {
    background: linear-gradient(90deg, rgba(79,195,247,0.12), rgba(0,0,0,0.75));
}

.mobile-category-indicator.cat-art {
    background: linear-gradient(90deg, rgba(255,111,181,0.12), rgba(0,0,0,0.75));
}

.mobile-category-indicator.cat-web {
    background: linear-gradient(90deg, rgba(127,123,255,0.12), rgba(0,0,0,0.75));
}

.mobile-category-indicator.cat-game-jam .indicator-dot {
    background: rgba(255,179,77,0.95);
}

.mobile-category-indicator.cat-experimental .indicator-dot {
    background: rgba(79,195,247,0.95);
}

.mobile-category-indicator.cat-art .indicator-dot {
    background: rgba(255,111,181,0.95);
}

.mobile-category-indicator.cat-web .indicator-dot {
    background: rgba(127,123,255,0.95);
}
/* ================= Fixed category label for small screens ================= */
/* Single fixed label that follows the current category while scrolling.
   Visible only at small screens (<=900px). */

.fixed-category-label {
    display: none;
}

@media (max-width: 900px) {

    /* hide per-section rotated titles (we show one fixed label instead) */
    #projectsGrid.categorized .category-section .category-title {
        display: none !important;
    }

    /* fixed label container */
    .fixed-category-label {
        display: flex !important;
        position: fixed;
        z-index: 99999;
        right: 12px; /* right side of screen (change to left if desired) */
        top: 50%;
        transform: translateY(-50%) rotate(90deg); /* rotate so text reads vertically */
        transform-origin: center;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 12px;
        pointer-events: none; /* not interactive */
        background: rgba(8,14,18,0.80);
        color: #fff;
        font-weight: 800;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        transition: opacity .18s ease, transform .18s ease;
        opacity: 0;
        white-space: nowrap;
    }

        /* visible state */
        .fixed-category-label.visible {
            opacity: 1;
            transform: translateY(-50%) rotate(90deg);
        }

    /* small adjustments for tiny screens */
    @media (max-width: 420px) {
        .fixed-category-label {
            padding: 8px 12px;
            font-size: 0.95rem;
            right: 8px;
        }
    }

    /* small decorative dot (accent color) */
    .fixed-category-label .label-dot {
        width: 8px;
        height: 26px;
        border-radius: 6px;
        display: inline-block;
        box-shadow: 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .fixed-category-label .label-text {
        display: inline-block;
        padding-left: 6px; /* visual spacing between dot and text (after rotation) */
        padding-right: 6px;
    }
}

/* Category color classes (adjust alphas to taste) */
.fixed-category-label.cat-game-jam {
    background: linear-gradient(90deg, rgba(255,179,77,0.14), rgba(0,0,0,0.78));
}

.fixed-category-label.cat-experimental {
    background: linear-gradient(90deg, rgba(79,195,247,0.14), rgba(0,0,0,0.78));
}

.fixed-category-label.cat-art {
    background: linear-gradient(90deg, rgba(255,111,181,0.14), rgba(0,0,0,0.78));
}

.fixed-category-label.cat-web {
    background: linear-gradient(90deg, rgba(127,123,255,0.14), rgba(0,0,0,0.78));
}

/* dot color mapping */
.fixed-category-label.cat-game-jam .label-dot {
    background: rgba(255,179,77,0.95);
}

.fixed-category-label.cat-experimental .label-dot {
    background: rgba(79,195,247,0.95);
}

.fixed-category-label.cat-art .label-dot {
    background: rgba(255,111,181,0.95);
}

.fixed-category-label.cat-web .label-dot {
    background: rgba(127,123,255,0.95);
}
/* ===== Vertical category title on small screens: RIGHT side, no hover effects ===== */
@media (max-width: 900px) {

    /* make section relative and create right-side space for the vertical title (cards shift left) */
    #projectsGrid.categorized .category-section {
        position: relative !important;
        padding-right: 12px !important; /* Platz auf der rechten Seite für die Title-Box */
        padding-left: 20px !important; /* kleine linke Einrückung für cards */
        box-sizing: border-box !important;
    }

        /* vertical title: fixed to the right edge of each section, rotated and centered */
        #projectsGrid.categorized .category-section .category-title {
            position: absolute !important;
            right: 12px !important; /* Abstand vom rechten Rand der section */
            top: 50% !important; /* vertikal zentriert */
            transform-origin: center !important;
            transform: translateY(-50%) rotate(90deg) !important; /* 90deg for right-side vertical text */
            white-space: nowrap !important;
            padding: 10px 14px !important;
            border-radius: 10px !important;
            z-index: 50 !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 10px !important;
            font-size: 1rem !important;
            font-weight: 800 !important;
            color: #f5f7fa !important;
            /* keep the visual look, but remove hover transitions */
            background: rgba(8,14,18,0.72) !important;
            box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03) !important;
            -webkit-backdrop-filter: blur(4px) !important;
            backdrop-filter: blur(4px) !important;
            transition: none !important; /* keine Hover-Animation an der Title-Box */
            pointer-events: none !important; /* nicht interaktiv, verhindert Hover/Click */
        }

            /* Ensure the accent (::before) stays aligned alongside the rotated text */
            #projectsGrid.categorized .category-section .category-title::before {
                content: "" !important;
                width: 6px !important;
                height: 18px !important;
                border-radius: 4px !important;
                display: inline-block !important;
                margin-right: 8px !important;
                vertical-align: middle !important;
            }

        /* Make sure hover rules elsewhere can't change the title transform */
        #projectsGrid.categorized .category-section:hover .category-title,
        #projectsGrid.categorized .category-section:active .category-title {
            transform: translateY(-50%) rotate(90deg) !important;
            transition: none !important;
        }

        /* Reduce top margin so content doesn't have huge gaps */
        #projectsGrid.categorized .category-section > .projects-inner-grid {
            margin-top: 6px !important;
        }
}

/* Very small phones tweak */
@media (max-width: 420px) {
    #projectsGrid.categorized .category-section {
        padding-right: 0px !important;
    }

        #projectsGrid.categorized .category-section .category-title {
            right: 8px !important;
            padding: 8px 12px !important;
            font-size: 0.95rem !important;
            transform: translateY(-50%) rotate(90deg) !important;
        }
}
/* === Mobile category side label === */
@media (max-width: 900px) {
    .mobile-category-label {
        position: fixed;
        right: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        z-index: 999;
        padding: 8px 14px;
        border-radius: 10px;
        background: rgba(10, 14, 18, 0.85);
        color: #fff;
        font-weight: 800;
        pointer-events: none;
        white-space: nowrap;
        transition: none;
    }
}

/* === Right category labels: allow JS movement === */
@media (max-width: 900px) {
    .category-side-label {
        position: fixed !important;
        right: 8px;
        transform: translateY(-50%) rotate(90deg);
        transition: none !important;
        pointer-events: none;
        z-index: 200;
    }
}

/* === Rotate mobile category indicator by 90 degrees === */
@media (max-width: 900px) {

    #mobileCategoryIndicator {
        transform: translateY(-50%) rotate(-90deg) !important;
        transform-origin: center !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        transition: none !important;
    }
}

/* === Remove right-side category titles on mobile === */
@media (max-width: 900px) {
    #projectsGrid.categorized .category-section .category-title {
        display: none !important;
    }
}

/* === Move mobile category indicator further left === */
@media (max-width: 900px) {
    #mobileCategoryIndicator {
        left: -50px !important; /* weiter nach links schieben */
    }
}

/* ==== Mobile: Remove right gap/gutter ==== */
@media (max-width: 900px) {

    /* 1) Stelle sicher, dass der grid-Container volle Breite nutzt */
    #projectsGrid.categorized,
    #projectsGrid.categorized .projects-inner-grid {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

        /* 2) Entferne hart das extra right-padding, das früher für die rechten labels reserviert war */
        #projectsGrid.categorized .category-section {
            padding-right: 12px !important; /* 12px ist ein kleiner innerer Abstand; setze 0px wenn du es ganz eng willst */
        }

        /* 3) Falls einzelne cards oder inner-grids noch Padding haben */
        #projectsGrid.categorized .projects-inner-grid .project-card,
        #projectsGrid.categorized .projects-inner-grid {
            margin-right: 0 !important;
            padding-right: 0 !important;
        }

    /* 4) Falls ein centering-wrapper (z.B. .container / main) eine max-width setzt */
    .container, main, .site-main, .content, #main {
        max-width: 100% !important;
        padding-right: 0px !important;
        padding-left: 5px !important;
    }

    /* 5) Verhindere horizontales Scrollen von übereinandergeschobenen Elementen */
    html, body {
        overflow-x: hidden !important;
    }
}

@media (max-width: 900px) {
    .mobile-category-indicator.left {
        position: fixed;
        left: 6px;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        transform-origin: left center;
        z-index: 9999;
        /* verhindert Layout-Shifts */
        pointer-events: none;
    }
}

@media (max-width:900px) {
    #mobileCategoryIndicator {
        position: fixed !important;
        left: 6px !important;
        top: 50% !important;
        transform: translateY(-50%) rotate(-90deg) !important;
        pointer-events: none;
        z-index: 9999;
    }
}

@media (max-width:900px) {
    #mobileCategoryIndicator {
        position: fixed !important;
        left: 20px !important;
        transform: translateY(-50%) rotate(-90deg) !important; /* note: we use translateY(-50%) but set top via JS */
        transform-origin: left center !important;
        pointer-events: none;
        z-index: 9999;
    }
}

/* === Mobile: make category indicator background opaque === */
@media (max-width: 900px) {
    /* base opaque background for the left indicator */
    #mobileCategoryIndicator,
    .mobile-category-indicator {
        background-color: #0b2e20 !important; /* dunkles, undurchsichtiges Feld (ersetze nach Wunsch) */
        color: #fff !important; /* weiße Textfarbe für Kontrast */
        box-shadow: 0 6px 14px rgba(0,0,0,0.45) !important;
        opacity: 1 !important; /* stelle sicher, dass es nicht transparent ist */
        border-radius: 8px !important;
        padding: 6px 10px !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

        /* --- optional: per-category colors (wenn du verschiedene Farben willst) --- */
        /* Passe die Hex-Farben an oder entferne diese Gruppe, wenn du einheitliche Farbe willst */
        #mobileCategoryIndicator.cat-game-jam {
            background-color: #8b5e18 !important;
        }
        /* gold/braun */
        #mobileCategoryIndicator.cat-experimental {
            background-color: #0f7b78 !important;
        }
        /* türkis */
        #mobileCategoryIndicator.cat-art {
            background-color: #7a2b5f !important;
        }
        /* pink/purple */
        #mobileCategoryIndicator.cat-web {
            background-color: #244f9f !important;
        }
    /* blau */

    /* If you also have rotated .category-title elements that should be opaque: */
    #projectsGrid.categorized .category-section .category-title {
        background-color: #0b2e20 !important; /* same base color */
        color: #fff !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.35) !important;
    }
}

/* ===== Lightbox CSS (falls noch nicht eingefügt) ===== */
.img-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2,6,6,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

    .img-lightbox-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

.img-lightbox-inner {
    max-width: 94vw;
    max-height: 92vh;
    padding: 12px;
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

    .img-lightbox-inner img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        border-radius: 6px;
    }

.zoomable {
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.img-lightbox-inner {
    cursor: zoom-out;
}

/* ==== Global lightbox CSS (paste at end of style.css) ==== */
.img-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,6,6,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.img-lightbox-overlay.visible { opacity: 1; pointer-events: auto; }
.img-lightbox-inner {
  max-width: 94vw;
  max-height: 92vh;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
.img-lightbox-inner img {
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  border-radius:6px;
}
.zoomable { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.img-lightbox-inner { cursor: zoom-out; }


/* --- Option B: Abschnitts-Panel (stärker) --- */
.project-section { /* wenn du Sections verwendest */
    background: rgba(0,0,0,0.06); /* leichter Panel-Hintergrund */
    border-radius: 10px;
    padding: 18px 22px 26px 22px;
    margin-bottom: 26px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.01), 0 8px 20px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.02);
}

    /* Titel als Badge, leicht herausstehend */
    .project-section > h2,
    .project-section > h3 {
        display: inline-block;
        background: rgba(10,40,30,0.9);
        color: #fff;
        padding: 8px 14px;
        border-radius: 8px;
        margin: 0 0 12px -6px; /* small negative left to overlap panel edge */
        box-shadow: 0 10px 18px rgba(0,0,0,0.45);
        font-weight: 700;
    }


/* ===========================
   Styles für Pickup-Karten
   Ziel: <article class="pickup-card">...
   Füge ans ENDE von style.css
   =========================== */

.pickup-card {
    background: #0b3e33; /* dunkles, einfarbiges Panel - passe Hex an */
    color: #ffffff; /* Text bleibt weiß */
    border: 4px solid rgba(0,0,0,0.85); /* kräftige, dunkle Umrandung (ähnlich Portfolio) */
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.55), /* Außen-Schatten */
    inset 0 1px 0 rgba(255,255,255,0.02); /* leichter innerer Glanz */
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    overflow: hidden;
    position: relative;
}

    /* Bildbereich: Bild groß anzeigen, abgerundete Ecken */
    .pickup-card .pickup-image {
        display: block;
        margin-bottom: 12px;
    }

        .pickup-card .pickup-image img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
            object-fit: cover;
            box-shadow: 0 8px 18px rgba(0,0,0,0.45);
        }

    /* Textbereich - transparent, damit Hintergrund schön wirkt */
    .pickup-card .pickup-body {
        background: transparent;
        padding: 6px 0 0 0;
    }

    /* Titel / Beschreibung / Meta */
    .pickup-card .pickup-title {
        margin: 0 0 8px 0;
        font-weight: 700;
        font-size: 1.05rem;
        color: #fff;
    }

    .pickup-card .pickup-desc {
        margin: 0 0 10px 0;
        color: rgba(255,255,255,0.9);
        line-height: 1.4;
        font-size: 0.95rem;
    }

    .pickup-card .pickup-meta {
        font-size: 0.85rem;
        color: rgba(255,255,255,0.7);
    }

    /* Hover-Effekt: leichte Hebung und stärkerer Schatten */
    .pickup-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 60px rgba(0,0,0,0.66), inset 0 1px 0 rgba(255,255,255,0.02);
        border-color: rgba(0,0,0,0.95);
    }

/* Mobile: etwas kompakter */
@media (max-width: 760px) {
    .pickup-card {
        padding: 12px;
        border-width: 3px;
        border-radius: 10px;
    }

        .pickup-card .pickup-title {
            font-size: 1rem;
        }

        .pickup-card .pickup-desc {
            font-size: 0.92rem;
        }
}

/* Volle Breite (alternative) */
main h4,
article h4,
.project-page h4 {
    padding-bottom: 0.4rem;
    margin-bottom: 0.8rem;
    border-bottom: 2px solid rgba(255,255,255,0.06); /* dezente Linie */
}

/* Lightbox caption: klar lesbar auf weißem Hintergrund */
.img-lightbox-caption {
    display: block;
    background: #ffffff; /* komplett weiß, nicht transparent */
    color: #111111; /* schwarze Schrift für besten Kontrast */
    padding: 10px 14px; /* innenabstand */
    margin: 12px auto 0; /* Abstand nach oben (unter dem Bild) */
    border-radius: 8px; /* abgerundete Ecken */
    max-width: min(84vw, 720px); /* breit genug, auf kleinen Bildschirmen begrenzt */
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.3;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    box-sizing: border-box;
    z-index: 100000; /* sicher über dem Bild */
}

/* wenn du willst: Caption etwas kleiner auf Mobile */
@media (max-width: 520px) {
    .img-lightbox-caption {
        font-size: 0.88rem;
        padding: 8px 10px;
        max-width: 92vw;
    }
}

/* Sidebar: immer im geschlossenen Zustand starten (offscreen) */
.sidebar {
    position: fixed;
    top: 0;
    right: -360px; /* außerhalb des Viewports */
    width: 320px;
    height: 100vh;
    background: rgba(6, 40, 30, 0.95);
    box-shadow: -12px 0 30px rgba(0,0,0,0.6);
    z-index: 9999;
    padding: 18px;
    overflow-y: auto;
    /* WICHTIG: keine transitions im Default-Zustand, damit beim Laden nichts animiert */
    transition: none;
    opacity: 0;
    visibility: hidden;
}

    /* Offscreen/geschlossen (duplicate for clarity) */
    .sidebar.close-sidebar {
        right: -360px;
        opacity: 0;
        visibility: hidden;
    }

    /* Wenn geöffnet: positioniere sichtbar und aktiviere Übergang */
    .sidebar.open-sidebar {
        /* Animation vom Offscreen-Zustand in den sichtbaren Zustand */
        right: 12px; /* oder 0 je nachdem wie du es willst */
        opacity: 1;
        visibility: visible;
        /* Transition hier aktivieren — so tritt die Bewegung NUR beim Öffnen ein */
        transition: right 0.28s cubic-bezier(.2,.9,.2,1), opacity 0.28s ease;
    }

/* ---------------------------------------------------------
   FORCE fix: ensure .project-cta sits absolute on small screens
   and reserve padding in the body so text can't flow under it.
   Paste as LAST rules in style.css
   --------------------------------------------------------- */

/* VERY specific selector chain to win specificity wars */
#projectsGrid.categorized .projects-inner-grid .project-card {
    position: relative !important;
}

    /* reserve space under card content */
    #projectsGrid.categorized .projects-inner-grid .project-card .project-body {
        padding-bottom: 84px !important; /* reserve space for button */
        box-sizing: border-box !important;
    }

    /* absolute position for the CTA button */
    #projectsGrid.categorized .projects-inner-grid .project-card .project-cta {
        position: absolute !important;
        right: 14px !important;
        bottom: 14px !important;
        z-index: 9999 !important;
        display: inline-block !important;
        white-space: nowrap !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }

/* tweak for very narrow devices */
@media (max-width: 420px) {
    #projectsGrid.categorized .projects-inner-grid .project-card .project-body {
        padding-bottom: 96px !important;
    }

    #projectsGrid.categorized .projects-inner-grid .project-card .project-cta {
        right: 10px !important;
        bottom: 10px !important;
        padding: 7px 10px !important;
        font-size: 0.88rem !important;
    }
}

.menu-icon {
    position: relative;
    z-index: 5000;
}

.mobile-category-indicator {
    z-index: 3000;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000; /* höher als alles andere */
}

.container {
    padding-top: 70px;
}

@media (max-width: 700px) {
    .container {
        padding-top: 50px;
    }
}
.category-title.clone {
    display: none !important;
}

/* Video-Thumb (kleine Vorschau) */
.project-two-image.video-thumb {
    position: relative;
    cursor: pointer;
    max-width: 560px; /* wie bei deinen anderen rules, anpassen */
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    background: rgba(0,0,0,0.04);
    border-radius: 10px;
    overflow: visible;
}

    .project-two-image.video-thumb .preview-video {
        display: block;
        width: 100%;
        height: auto;
        max-height: 420px;
        object-fit: contain;
        border-radius: 8px;
        transition: transform .22s ease, box-shadow .22s ease;
        box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    }

    /* kleine Hover-Polish */
    .project-two-image.video-thumb:hover .preview-video {
        transform: scale(1.02);
        box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    }

    /* Fullscreen / enlarged state (applied by JS) */
    .project-two-image.video-thumb.fullscreen {
        position: fixed !important;
        inset: 0 !important; /* top:0; right:0; bottom:0; left:0; */
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 20px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999 !important;
        background: rgba(2,6,6,0.85);
        border-radius: 0 !important;
    }

        /* Video inside fullscreen: maximize (keep aspect ratio) */
        .project-two-image.video-thumb.fullscreen .preview-video {
            width: auto !important;
            height: 90vh !important;
            max-width: 94vw !important;
            object-fit: contain;
            transform: none !important;
            box-shadow: 0 28px 60px rgba(0,0,0,0.6);
            border-radius: 6px;
        }

        /* Caption: im fullscreen kleiner und deutlich sichtbar */
        .project-two-image.video-thumb.fullscreen figcaption {
            position: absolute;
            bottom: 22px;
            left: 20px;
            right: 20px;
            color: #E6EAF6;
            text-align: center;
            z-index: 1000000;
            font-size: 13px;
        }

/* Make sure your existing .img-lightbox-overlay rules don't visually conflict.
   If you prefer the existing image lightbox, we could hook into that instead. */
/* Video in Cards: ähnlich wie .project-image (Bild) darstellen */
.project-card .project-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px; /* passt an: gleiche Höhe wie deine Bilder */
    object-fit: cover; /* Füllt die Fläche, ohne das Layout zu verschieben */
    border-top-left-radius: 8px; /* falls deine cards abgerundete Ecken haben */
    border-top-right-radius: 8px;
    vertical-align: middle;
    background: #000; /* wenn Video noch nicht geladen: schwarzer Hintergrund */
}

/* für kleine Bildschirme evtl. kleinere Höhe */
@media (max-width: 700px) {
    .project-card .project-image {
        max-height: 160px;
    }
}

/* falls du später Hover-Effekte auf Bild/Video willst */
.project-card:hover .project-image {
    transform: none; /* bei Bedarf scale/box-shadow hinzufügen */
}

/* ----- Force thumbnails to 16:9 and always show full video (no crop) ----- */
/* Put this at the very end of style.css so it overrides prior rules. */

.projects-grid .project-image {
    /* Use CSS aspect-ratio where supported */
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; /* modern browsers keep 16:9 box */
    max-height: 320px !important; /* optional: cap height so cards don't grow too large */
    object-fit: contain !important; /* show full frame (letterbox if needed) */
    object-position: center center !important;
    background: #000; /* letterbox color when using contain */
    display: block !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

/* Fallback for older browsers that don't support aspect-ratio:
   Wrap the media in a container with .media-wrap class (see note below). */
.project-card .media-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 fallback (9/16 = 56.25%) */
    overflow: hidden;
    background: #000;
}

    .project-card .media-wrap video,
    .project-card .media-wrap img {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

/* Slight responsive tweak: on very small screens slightly reduce max-height */
@media (max-width: 700px) {
    .projects-grid .project-image {
        max-height: 220px !important;
    }

    .project-card .media-wrap {
        padding-top: 56.25%;
    }
    /* keep 16:9 */
}

/* --- FIX hero video color / transparency --- */
.hero-vid-box {
    position: relative;
    z-index: 5; /* über hero overlays */
    isolation: isolate; /* trennt blend-modes */
    background: #0b1f14; /* neutraler dunkler Hintergrund */
    padding: 10px; /* Platz für Border */
    border-radius: 16px;
}

    /* Video selbst */
    .hero-vid-box video {
        display: block;
        width: 100%;
        height: auto;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        filter: none !important;
        border-radius: 12px;
    }

/* =========================
   HERO – Mobile Fix
   ========================= */

@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
        padding-top: 120px; /* Platz für Header */
    }

    .hero-info {
        width: 100%;
        max-width: 520px;
        z-index: 2;
    }

    .hero-vid-box {
        width: 100%;
        max-width: 520px;
        order: -1; /* 👉 Video kommt VOR den Text */
        z-index: 1;
    }

        .hero-vid-box video {
            width: 100%;
            height: auto;
            object-fit: contain;
        }
}

/* Verhindert, dass ein Tap direkt auf das <video> das native play/pause auslöst.
   Klicks/Taps landen stattdessen auf der Card (parent) */
.project-card .project-image {
    pointer-events: none;
}