/* telefoon.css - Specifiek voor schermen kleiner dan 768px */

@media (max-width: 768px) {
    
    /* 1. Algemene layout aanpassingen */
    body {
        font-size: 14px; /* Iets kleinere basislettertype voor mobiel */
    }

    /* 2. Navigatie */
    nav {
        height: auto;
        padding: 10px 15px;
        
        gap: 10px;
    }

    nav ul {
        gap: 15px;
        padding-bottom: 5px;
    }

    nav ul li a {
        font-size: 0.9em;
    }

    /* 3. Hero */
    .hero {
        height: 50vh; /* Iets minder hoog op mobiel */
    }

    /* 4. Merken Slider */
    .merken {
        height: 60px;
        padding: 15px 0;
    }

    .slide img {
        height: 60px;
        margin: 0 40px; /* Minder ruimte tussen logo's op mobiel */
    }

    /* 5. Info Sectie (Overlap foto's naar onderen) */
    .info {
        grid-template-columns: 1fr; /* Alles onder elkaar */
        padding-bottom: 40px;
    }

    .info .text-content {
        padding: 40px 20px;
        order: 1; /* Tekst eerst */
    }

    .info .image-wrapper {
        order: 2; /* Foto's onder de tekst */
        height: 350px; /* Ruimte voor de absolute foto's */
        display: flex;
        justify-content: center;
        overflow: hidden; /* Voorkom horizontaal scrollen door transform */
    }

    .info-image1, .info-image2 {
        width: 160px; /* Iets kleiner op mobiel */
        height: 220px;
    }

    .info-image1 {
        left: 10%;
        transform: translateY(-50%);
    }

    .info-image2 {
        left: auto;
        right: 10%;
        transform: translateY(-30%);
    }

    /* 6. Instagram Grid */
    .insta-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 naast elkaar op mobiel */
        max-width: 95%;
        gap: 5px;
    }

    .insta-title {
        font-size: 1.5rem;
    }

    /* 7. Quote/Items Sectie */
    .quote .img-container {
        grid-template-columns: 1fr; /* Stapel de quotes onder elkaar */
        gap: 50px;
    }

    .quote .item img {
        width: 150px; /* Cirkels kleiner maken */
    }

    /* 8. Footer (De 3 kolommen worden 1 kolom) */
    .footer {
        grid-template-columns: 1fr;
        text-align: center;
        margin-left: 0;
        gap: 40px;
    }

    .footer .nieuws, .footer .opening, .footer .locatie {
        padding: 0 20px;
    }

    footer input {
        width: 100%; /* Invoervelden volledige breedte */
        max-width: 300px;
    }

    .opening br {
        display: none; /* Haal de extra enters weg voor een compactere lijst */
    }

    .opening p {
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .locatie h4 {
        margin-top: 20px;
    }

    .credits {
        padding: 20px;
        border-top: 1px dashed var(--Toile);
    }

    .image-container {
        justify-content: center;
        align-content: center;
        position: relative;
        top: 200px;
        width: 50%;
    }

    .text-container-ons {
        width: 50%;
        height: auto;
    }

    
.hamburger {
        display: block; /* Maak zichtbaar op mobiel */
        width: 35px;
        height: 25px;
        position: relative;
        cursor: pointer;
        z-index: 1100; /* Zorg dat hij overal bovenop ligt */
    }

    .hamburger span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: var(--Olive); /* Gebruikt je variabele uit style.css */
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transition: .25s ease-in-out;
    }

    /* Positionering van de 3 streepjes */
    .hamburger span:nth-child(1) { top: 0px; }
    .hamburger span:nth-child(2) { top: 10px; }
    .hamburger span:nth-child(3) { top: 20px; }

    /* Animatie naar X als hij actief is */
    .hamburger.active span:nth-child(1) {
        top: 10px;
        transform: rotate(135deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }
    .hamburger.active span:nth-child(3) {
        top: 10px;
        transform: rotate(-135deg);
    }

    /* Het menu zelf */
    .menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--Toile); /* Jouw beige kleur */
        z-index: 1000;
        
        /* Centreren van de links */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Animatie: start buiten beeld aan de rechterkant */
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
    }

    /* Wanneer geactiveerd via JS */
    .menu.active {
        transform: translateX(0);
    }

    .menu ul {
        list-style: none;
        padding: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .menu ul li {
        margin: 30px 0;
    }

    .menu ul li a {
        font-family: 'Playfair Display', serif;
        font-size: 2rem;
        color: var(--Olive);
        text-decoration: none;
    }

    .insta-item {
    position: relative;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
}

}