:root {
            --ink: #2f3438;
            --muted: #6f7880;
            --accent: #6f7f8c;
            --cta-bg-color: #f36f21;
            --background: #ffffff;
            --surface: #ffffff;
            --overlay-bg: rgba(255, 255, 255, 0.98);
            --border-color: rgba(47, 52, 56, 0.15);
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        }

/* -------------------------------------------------------------------------- */
        /* GRID LAYOUT (FULL SCREEN RESPONSIVE)        */
        /* -------------------------------------------------------------------------- */
        
        .project-grid {
            display: grid;
            width: 100%;
            /* Default: 3 Spalten (für "normale" Desktops und Laptops) */
            --grid-cols: 3;
            grid-template-columns: repeat(var(--grid-cols), 1fr);
            gap: 4px; 
            padding-top: 0;
        }

        /* Optional: Kein Body-Scroll, wenn wir per JS eine viewport-passende Auswahl treffen */
        @media (min-width: 601px) {
            body.category-fit { overflow: hidden; }
        }

        .grid-item {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3; 
            overflow: hidden;
            text-decoration: none;
            background-color: #f0f0f0; 
        }

        .grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
            display: block;
        }

        .grid-overlay {
            position: absolute; inset: 0;
            background-color: rgba(0, 0, 0, 0.3); 
            opacity: 0;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            transition: opacity 0.3s ease;
            padding: 1rem; text-align: center;
        }

        .grid-item:hover .grid-overlay { opacity: 1; }
        .grid-item:hover img { transform: scale(1.05); }

        .grid-title {
            color: white; font-size: 1.25rem; font-weight: 500; margin-bottom: 0.25rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            transform: translateY(10px); transition: transform 0.3s ease;
        }
        
        .grid-subtitle {
            color: rgba(255,255,255,0.8); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em;
            transform: translateY(10px); transition: transform 0.3s ease 0.05s;
        }

        .grid-item:hover .grid-title, .grid-item:hover .grid-subtitle { transform: translateY(0); }

        /* --- RESPONSIVE BREAKPOINTS --- */

        /* 1. ULTRAWIDE / LARGE SCREENS (ab 1800px): 4 Spalten */
        @media (min-width: 1800px) {
            .project-grid { --grid-cols: 4; }
        }

        /* 2. TABLET / SMALL LAPTOP (unter 1024px): 2 Spalten */
        @media (max-width: 1024px) {
            .project-grid { --grid-cols: 2; }
            .header-content { padding: 0 1rem; }
        }

        /* 3. MOBILE (unter 600px): 1 Spalte */
        @media (max-width: 600px) {
            .project-grid { --grid-cols: 1; }
.grid-item { aspect-ratio: 3 / 2; }
            .grid-title { font-size: 1.1rem; }
        }
    

/* -------------------------------------------------------------------------- */
/* TOUCH-FALLBACK (iPad/iPhone): Titel immer sichtbar (Variante A)             */
/* -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
    .grid-overlay {
        opacity: 1;
        /* dezenter Verlauf für Lesbarkeit, ohne Desktop-Look zu verändern */
        background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 65%);
        justify-content: flex-end;
    }
    .grid-title,
    .grid-subtitle {
        transform: none;
    }
    /* Kein Zoom-Effekt auf Touch */
    .grid-item:hover img { transform: none; }
}