/* * Bentatec 2026 Edition | Spatial UI Light Mode
 * HTML-Struktur bleibt unangetastet.
 */

:root {
    /* Brand Colors im brillanten OKLCH-Raum */
    --brand-red: oklch(55% 0.22 25);
    --brand-red-glow: oklch(55% 0.22 25 / 15%);
    
    /* Light Mode Spatial UI */
    --bg-base: oklch(98% 0.01 240);
    --glass-surface: oklch(100% 0 0 / 50%);
    --glass-border: oklch(0% 0 0 / 6%);
    --glass-shadow: oklch(0% 0 0 / 4%);
    
    --text-main: oklch(25% 0.02 240);
    --text-muted: oklch(60% 0.02 240);
    
    --radius-lg: 28px;
    --radius-md: 20px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 3rem 2rem;
    position: relative;
    overflow-x: hidden;
    
    /* Organischer Mesh-Background ohne zusätzliches HTML-Tag */
    &::before {
        content: '';
        position: fixed;
        inset: -20%;
        z-index: -1;
        background-image: 
            radial-gradient(circle at 80% 20%, var(--brand-red-glow) 0%, transparent 40%),
            radial-gradient(circle at 20% 80%, oklch(85% 0.05 240 / 40%) 0%, transparent 50%);
        filter: blur(80px);
        animation: pulse 12s ease-in-out infinite alternate;
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05) translate(-2%, 2%); }
}

/* Header & Logo */
.header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 5rem;
    
    & .logo {
        height: 70px;
        width: auto;
        /* Subtiler roter Drop-Shadow für das Logo */
        filter: drop-shadow(0 10px 20px var(--brand-red-glow));
    }
}

/* Main Layout als Container für Queries */
.main-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    container-type: inline-size;
    container-name: link-container;
}

/* Dynamisches Grid statt Flexbox */
.link-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

/* Premium Glass Cards */
.shop-link {
    text-decoration: none;
    color: var(--text-main);
    background: var(--glass-surface);
    backdrop-filter: blur(40px) saturate(120%);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px var(--glass-shadow);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    
    &:hover {
        transform: translateY(-8px) scale(1.01);
        background: oklch(100% 0 0 / 70%);
        border-color: var(--brand-red);
        box-shadow: 
            0 25px 50px oklch(0% 0 0 / 8%),
            0 0 0 1px var(--brand-red);

        & .image-wrapper img {
            transform: scale(1.05);
        }
        
        & .link-text {
            color: var(--brand-red);
        }
    }
}

/* Bildbereich */
.image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1.75rem;
    background: oklch(0% 0 0 / 2%); /* Fallback falls Bild lädt */
    
    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
}

/* Typografie */
.link-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
    transition: color 0.4s ease;
}

/* Footer */
.footer {
    width: 100%;
    padding-top: 5rem;
    
    & .legal-nav {
        display: flex;
        justify-content: center;
        gap: 3rem;
        flex-wrap: wrap;
        
        & a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 500;
            transition: color 0.3s ease;
            
            &:hover {
                color: var(--brand-red);
            }
        }
    }
}

/* * Container Queries (Das Element reagiert auf den Platz im Container, 
 * nicht auf die Bildschirmgröße des Devices) 
 */
@container link-container (max-width: 900px) {
    .link-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Zentriert das 3. Element sauber in der nächsten Zeile */
    .shop-link:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

@container link-container (max-width: 500px) {
    .link-grid {
        grid-template-columns: 1fr;
    }
    
    .shop-link:last-child {
        max-width: 100%;
    }
}