/* ===== GALERIE ===== */
:root {
    --primary-color: #7a5268;
}

#galerie {
    background:
        linear-gradient(rgba(250, 245, 240, 0.97), rgba(250, 245, 240, 0.88)),
        url(/img/hintergrund1.jpg) center / cover fixed;
    min-height: calc(100vh - 160px);
    padding-bottom: clamp(35px, 5vw, 65px);
}

#galerie h1 {
    color: var(--primary-color, #7a5268);
    text-align: center;
    font-size: clamp(24px, 4vw, 34px);
    padding: clamp(32px, 5vw, 60px) 20px clamp(8px, 1.5vw, 14px);
}

/* Dekorationslinie unter Überschrift */
#galerie h1::after {
    content: '';
    display: block;
    width: 45px;
    height: 2px;
    background: var(--accent, #b5706b);
    margin: 12px auto 0;
    border-radius: 2px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px clamp(12px, 3vw, 30px) 0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 28vw, 300px), 1fr));
    gap: clamp(12px, 2vw, 25px);
}

.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    border: 6px solid var(--warm-cream, #f7ede6);
    box-shadow: var(--shadow, 0 8px 28px rgba(90,50,40,0.09));
    transition: var(--transition, all 0.3s ease);
    cursor: pointer;
    display: block;
    outline: 1px solid rgba(181, 112, 107, 0.15);
    outline-offset: 3px;
}

.gallery img:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: var(--shadow-hover, 0 16px 40px rgba(90,50,40,0.14));
    border-color: var(--accent-light, #faeae9);
    outline-color: rgba(181, 112, 107, 0.35);
}

/* ===== TABLET (≤ 900px) ===== */
@media (max-width: 900px) {
    #galerie {
        background-attachment: scroll;
    }

    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* ===== MOBILE (≤ 600px) ===== */
@media (max-width: 600px) {
    #galerie {
        padding-bottom: 25px;
    }

    .container {
        padding: 12px 10px 0;
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .gallery img {
        border-radius: 12px;
        border-width: 3px;
        outline: none;
    }
}

/* Sehr kleine Screens (≤ 360px) */
@media (max-width: 360px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}