/* style.css */

        :root {
            --primary-color: rgb(88, 145, 203);
            --secondary-color: rgb(102, 184, 136); 
            --sticky-color: #31aab5;
            --background-color1: rgb(255, 255, 255);
            --background-color2: rgb(255, 255, 255);
            --text-color: #333;
            --footer-bg: #eee;
            --max-width: 1000px;
        } 

        body {
            font-family: Arial, sans-serif;
            background-color: rgb(250, 244, 235);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        body.poster-page {
            background: white; /* andere achtergrond */
        }

        body.news-page {
            background-color: rgb(250, 244, 235);            
        }

        main {
            flex: 1;
            padding: 2rem 1rem;
            max-width: var(--max-width);
            margin: 0 auto;
        }
        
        h1 {
            font-size: clamp(24px, 5vw, 32px);
            color: var(--primary-color);
        }

        h2 {
            font-size: clamp(20px, 4vw, 24px);
            color: var(--primary-color);
        }

        p, li, ul {
            line-height: 1.6;
            font-size: clamp(16px, 2.5vw, 18px);
        }

        .topnav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--primary-color);
            padding: 15px 40px;
            width: 100%;
            box-sizing: border-box; /* zorgt dat padding niet buiten breedte valt */
            flex-wrap: wrap;
            color: white;
        }

        .topnav .logo {
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .topnav nav {
            display: flex;
            gap: 1rem;
        }
        
        .topnav nav a {
            display: flex;
            align-items: center; /* verticale uitlijning midden */
            gap: 5px; /* ruimte tussen icoon en tekst */
            text-decoration: none;
            font-size: 16px;
            margin-left: 20px;
            color: white;
            text-decoration: none;
            font-weight: 500;
        }

        .topnav nav a:hover {
            text-decoration: underline;
        }
        
        .header-banner {
            height: 150px; /* vaste hoogte */
            width: 100%;                     /* altijd viewport breedte */
            box-sizing: border-box;
            background-image: url('pics/header breed.png');
            background-repeat: repeat-x;        /* herhaal horizontaal als niet breed genoeg */
            background-size: auto 100%;         /* hoogte vullen, breedte automatisch */
            background-position: top left;      /* start linksboven */
            overflow: hidden;              
        }

        .sub-banner {
            height: 20px;                /* vaste hoogte */
            width: 100%;                 /* full width */
            background-color: var(--primary-color);   /* kies je gewenste kleur */
        }

        .cta-button {
            display: inline-block;
            margin-top: 1rem;
            background-color: var(--primary-color);
            color: white;
            padding: 0.625rem 1.25rem;
            text-decoration: none;
            border-radius: 5px;
            font-size: clamp(14px, 2vw, 16px);
            transition: background-color 0.3s ease;
        }

        .cta-button:hover {
            background-color: #e11d48;
        }

        /* Algemene knopstijl voor de vragenlijst */
        .quiz-button {
            display: inline-block;
            margin-top: 1rem;
            background-color: var(--primary-color);
            color: white;
            padding: 0.625rem 1.25rem;
            border: none;
            border-radius: 5px;
            font-size: clamp(14px, 2vw, 16px);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* Hover-effect */
        .quiz-button:hover {
            background-color: var(--primary-color-hover, #003f7f);
        }

        /* Extra ruimte tussen knoppen */
        .quiz-button + .quiz-button {
            margin-left: 0.5rem;
        }
        
        @media (max-width: 650px) {            
            .btn-text-btn a:last-of-type {
                display: none;
            }
        }

        /* @media (max-width: 600px) {
            .topnav {
                flex-direction: column;
                align-items: flex-start;
            }

            .topnav nav {
                flex-direction: column;
                width: 100%;
                margin-top: 0.5rem;
            }

            .topnav nav a {
                padding: 0.5rem 0;
            }
        } */

        @media (max-width: 480px) {
            .tip,
            .download,
            .footer {
                padding: 0.75rem;
            }
            
            .cta-button,
            .quiz-button {
                width: 100%;
                text-align: center;
            }
        }
        
        .float_profielpic {
            float: left;        /* zet de afbeelding links en laat tekst eromheen lopen */
            width: clamp(100px,33%,300px);      /* 1/3 van de container */
            margin: 0 20px 20px 0; /* ruimte rondom het plaatje */
            height: auto;
        }       
        
        .float_normalpic_l {
            float: left;        /* zet de afbeelding links en laat tekst eromheen lopen */
            width: clamp(100px,25%,200px);      /* 1/3 van de container */
            margin: 0 20px 20px 0; /* ruimte rondom het plaatje */
            height: auto;
        }
               
        
        .float_normalpic_r {
            float: right;        /* zet de afbeelding rechts en laat tekst eromheen lopen */
            width: clamp(100px,25%,200px);      /* 1/3 van de container */
            margin: 0 20px 20px 0; /* ruimte rondom het plaatje */
            height: auto;
        }               
        
        .float_normalpicsmall_l {
            float: left;        /* zet de afbeelding links en laat tekst eromheen lopen */
            width: clamp(100px,10%,150px);      /* 1/10 van de container */
            margin: 0 20px 20px 0; /* ruimte rondom het plaatje */
            height: auto;
        }               
        
        .float_normalpicsmall_r {
            float: right;        /* zet de afbeelding rechts en laat tekst eromheen lopen */
            width: clamp(100px,10%,150px);      /* 1/10 van de container */
            margin: 0 20px 20px 0; /* ruimte rondom het plaatje */
            height: auto;
        }

        .icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }

        .klik_tegel {
            display: block;                
            background-color: white;  
            width: clamp(300px, 50%, 600px);      
            border-radius: 20px;             /* afgeronde tegelvorm */
            padding: 20px; 
            text-align: center;                  
            text-decoration: none;           
            color: inherit;                  
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: transform 0.2s, box-shadow 0.2s;
            margin: 20px auto;               
        }

        .klik_tegel:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        }

        .klik_tegel h1 {
            margin: 0 0 10px;
            font-size: 22px;
        }

        .klik_tegel h2 {
            margin: 0 0 15px;
            font-size: 16px;
            font-weight: normal;
            color: #555;
        }

        .choicepic {
            width: 100%;          /* vult de breedte van de tegel */
            border-radius: 12px;  /* afgeronde hoeken voor de foto */
            display: block;
        }

        .container {
            max-width: 1000px;
            /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
            margin: 0 auto;
            padding: 0.5rem;
            line-height: 1.5;
        }
        
        .container-img {
            width: 100%;      /* altijd de breedte van de container */
            height: auto;     /* hoogte schaalt automatisch mee */
            max-height: 350px;  /* of een waarde die mooi is op mobiel */
            object-fit: cover;  /* snijdt de foto af i.p.v. uitrekken */
            display: block;
        }

        .container::after {
            content: "";
            display: table;
            clear: both;
        }
        
        .ckleur1 {
            background-color: var(--background-color1);  /* lichtroze */
        }
        
        .ckleur2 {
            background-color: var(--background-color2);     /* lichtblauw */
        }

        .ckleur-titel{
            background-color: var(--primary-color);
            color: white;
        }

        .question-section {
            display: none;
        }

        .question-section.active {
            display: block;
        }

        .sticky-block {
            position: sticky;
            top: 0;
            padding: 0px;
            border-bottom: 3px solid black;
            background-color: var(--sticky-color);
            z-index: 100;
            text-align: center;    /* tekst centreren */
        }

        

        .sticky-block h1 {
            color:white;
        }

        .scroll-block {
            top: 0;
            padding: 1rem 2rem;
            min-height: 100px;
        }

        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 12px 10px;
            border-radius: 9999px;
            text-decoration: none;
            font-size: 1.125rem;
            cursor: pointer;
            transition: background-color 0.3s;
            user-select: none;
            width: 250px;          /* vaste breedte */
            text-align: center;    /* tekst centreren */
        }

        .scroll-btn{
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 12px 10px;
            border-radius: 9999px;
            text-decoration: none;
            font-size: 1.125rem;
            cursor: pointer;
            transition: background-color 0.3s;
            user-select: none;
            width: 10em;          /* vaste breedte was 300 */
            text-align: center;    /* tekst centreren */
        }

        .buy-btn{
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 12px 10px;
            border-radius: 9999px;
            text-decoration: none;
            font-size: 1.125rem;
            cursor: pointer;
            transition: background-color 0.3s;
            user-select: none;
            width: 110px;          /* vaste breedte was 150*/
            text-align: center;    /* tekst centreren */
        }

        .wide-btn{
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 12px 10px;
            border-radius: 9999px;
            text-decoration: none;
            font-size: 1.125rem;
            cursor: pointer;
            transition: background-color 0.3s;
            user-select: none;
            width: 100%;          
            text-align: center;    /* tekst centreren */
        }

        .btn-text-btn {
            display: flex;
            align-items: center;   /* alles mooi verticaal uitlijnen */
            justify-content: center; /* alles in het midden */
            gap: 1rem;             /* ruimte tussen knop en tekst */
        }

        .center-text{
            text-align: center;
        }

        .big-text {
            font-size: clamp(18px, 4vw, 24px); /* schaalt mee met schermbreedte */
            line-height: 1.6;
        }
        
        .lead-form .form-row {
            display: flex;
            gap: 10px; /* ruimte tussen de velden */
            flex-wrap: wrap; /* zodat ze op kleine schermen onder elkaar vallen */
        }

        .lead-form .form-row input {
            flex: 1; /* beide velden nemen evenveel ruimte in */
            min-width: 150px; /* voorkom te smalle velden */
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;                  /* ruimte tussen velden */
        }  

        form label {
            font-weight: bold;
            font-size: clamp(14px, 2vw, 16px);
        } 

        form input,
        form textarea {
            padding: 0.75rem 1rem;
            border: 2px solid var(--primary-color);
            border-radius: 8px;
            font-size: clamp(14px, 2vw, 16px);
            outline: none;
            transition: border-color 0.3s;
        }

        .contact-links .btn {
            margin: 0.5rem;   /* ruimte tussen de knoppen */
        }

        .contact-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .contact-iconlinks {
            display: flex;
            gap: 15px; /* ruimte tussen de iconen */
            align-items: center;
        }

        .contact-icon {
            width: 100px;  /* pas aan naar gewenste grootte */
            height: 100px;
            transition: transform 1s; /* voor een klein hover-effect */
        }

        .contact-icon:hover {
            transform: scale(1.2); /* iets groter bij hover */
            cursor: pointer;
        }

        .band {
            background-color: var(--primary-color); /* blauwe achtergrond */
            color: white;
            padding: 25px 20px;
            text-align: center;
        }

        .band h1 {
            margin: 0;
            font-size: 2rem;
            color: white; 
        }

        .band h2 {
            margin: 0;
            font-size: 1.5rem;
            color: white;
        }

        .poster {
            max-width: 900px;
            margin: 0 auto;
            background-color: var(--background-color1);
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            overflow: hidden; /* zodat titel mooi aansluit */
        }

        .poster-title {
            background-color: var(--primary-color); /* blauwe achtergrond */
            color: white;
            padding: 25px 20px;
            text-align: center;
        }

        .poster-title h1 {
            margin: 0;
            font-size: 2rem;
            color: white;
        }

        .poster-title h2 {
            margin: 0;
            font-size: 1.5rem;
            color: white;
        }

        /* Elke tip */
        .tip {
            display: flex;
            align-items: center;
            gap: 20px; /* ruimte tussen afbeelding en tekst */
            margin: 20px;
            flex-wrap: wrap; /* zorgt dat het mobiel netjes onder elkaar gaat */
        }

        /* Afbeelding */
        .tip img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 10px;
            flex-shrink: 0;
        }

        /* Tekst met lijn links van de tekst */
        .tip-text {
            flex: 1;
            padding-left: 20px;
        }

        /* Kopjes en paragrafen */
        .tip-text h3 {
            margin: 0 0 10px 0;
            font-size: 1.2rem;
            color: #333;
        }

        .tip-text h2 {
            font-size: clamp(20px, 4vw, 24px);
            color: var(--primary-color) !important;
            margin: 0 0 10px 0;
            padding-bottom: 0px;
        }

        .tip-text p,
        .tip-text li,
        .tip-text ul {
            margin: 0;
            line-height: 1.5;
            color: #555;
        }

        /* Responsive design voor kleinere schermen */
        @media (max-width: 600px) {
            .tip {
                flex-direction: column;
                align-items: flex-start;
            }

            .tip-text {
                border-left: none;
                padding-left: 0;
                margin-top: 10px;
            }

            .tip img {
                width: 100%;
                height: auto;
            }
        }

        hr {
            border: none;
            border-top: 2px solid var(--primary-color);
        }

        footer {
            background-color:var(--primary-color);   
            color: white;
            padding: 20px 0;
            text-align: center;
        }

        .footer-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .footer-links {
            margin-top: 10px;
        }

        .footer-link {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .menu-toggle {
            display: none;
            font-size: 1.8rem;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
        }
        
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }

            .topnav nav {
                display: none;
                flex-direction: column;
                width: 100%;
                background-color: var(--primary-color);
                margin-top: 0.5rem;
                padding-left: 1rem;   /* 🔹 ruimte links */
                box-sizing: border-box;
            }

            .topnav nav.active {
                display: flex;
            }

            .topnav nav a {
                padding: 0.75rem 1rem;  /* 🔹 ruimte links en rechts */
                border-top: 1px solid rgba(255,255,255,0.2);
            }
        }