:root {
    --bg-black: #000;
    --text-white: #fff;
    --grid-color: rgba(255, 255, 255, 0.2); 
    --col: 8.3333333333%; 
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body, html { margin: 0; padding: 0; height: 100%; background-color: var(--bg-black); color: var(--text-white); font-family: sans-serif; overflow: hidden; }
.no-scroll { overflow: hidden; }

#bg-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('IMG_53242 weiß hintergrund.png') no-repeat center center; background-size: cover; z-index: 1; transition: opacity 0.4s; }
.grid-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px); background-size: var(--col) 100%; z-index: 2; pointer-events: none; }

header { position: fixed; top: 0; width: 100%; padding: 30px var(--col); background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(15px); display: flex; justify-content: space-between; z-index: 1000; }
.logo-box { cursor: pointer; }
.logo-box h1 { margin: 0; font-size: 20px; text-transform: uppercase; line-height: 1.1; }
.logo-box p { margin: 5px 0; font-size: 12px; opacity: 0.8; line-height: 1.3; }

.nav-controls { display: flex; align-items: center; gap: 20px; }
.back-arrow { font-size: 28px; cursor: pointer; display: none; color: white; }
.hamburger { cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.hamburger div { width: 30px; height: 2px; background-color: white; }

.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 120px; display: none; z-index: 100; overflow-y: auto; scrollbar-width: none; }
.page::-webkit-scrollbar { display: none; }
.active { display: block; }

.content-unit { padding: 0 var(--col); margin-bottom: 60px; width: 100%; }

.cat-item { margin-top: 50px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; }

.btn-main {
    background: transparent; border: 2px solid white; color: white;
    padding: 10px 25px; border-radius: 40px; cursor: pointer;
    font-size: 14px; font-weight: bold; text-align: center;
    display: inline-block; min-width: 140px; margin-bottom: 25px; 
    user-select: none; text-transform: uppercase;
}

.img-box, .img-s1, .cat-preview-img {
    width: 320px; aspect-ratio: 1/1;
    background-size: cover; background-position: center;
    background-color: #111; cursor: pointer; flex-shrink: 0;
}

.project-scroll { display: flex; overflow-x: auto; gap: 20px; width: 100%; scrollbar-width: none; }

footer { position: fixed; bottom: 0; width: 100%; height: 90px; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(15px); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--col); z-index: 1000; }
.f-left { display: flex; gap: 15px; }
.f-btn { border: 1.5px solid white; padding: 10px 20px; border-radius: 30px; cursor: pointer; color: white; background: black; font-size: 12px; font-weight: bold; white-space: nowrap; }
.social-link { color: white; text-decoration: none; font-size: 11px; font-weight: bold; opacity: 0.6; }

@media (max-width: 768px) {
    .img-box, .img-s1, .cat-preview-img { width: 85vw; }
    .content-unit { padding: 0 6vw; }
    header { padding: 25px 6vw; }
    .cat-item { margin-top: 60px; }
    
    footer { 
        height: 80px; 
        padding: 0 4vw; 
        flex-direction: row; 
        justify-content: space-between; 
        gap: 5px; 
    }
    .f-left { 
        flex-direction: row; 
        gap: 8px; 
    }
    .f-btn { 
        padding: 8px 12px; 
        font-size: 10px;    
    }
    .social-link {
        font-size: 9px;
    }
}

.project-name { font-size: 24px; font-weight: bold; margin: 40px 0 10px 0; text-transform: uppercase; letter-spacing: 1px; }
.project-description { font-size: 14px; line-height: 1.6; opacity: 0.8; max-width: 800px; margin-bottom: 30px; }

#modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 4000; display: none; justify-content: center; align-items: center; }
.card { background: white; color: black; padding: 40px; border-radius: 20px; width: 90%; max-width: 800px; max-height: 80vh; overflow-y: auto; position: relative; }
.close-btn { position: absolute; top: 20px; right: 25px; font-size: 35px; cursor: pointer; color: black; }

#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); z-index: 5000; display: none; justify-content: center; align-items: center; }
#lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer; }