:root {
    --transparent: rgba(0, 0, 0, 0);
    --purple-100: #d6c1f7;
    --purple-200: #b39ce6;
    --purple-300: #8e71d2;
    --purple-400: #6d47b9;
    --purple-500: #572ca2;
    --purple-600: #482686;
    --purple-800: #2c1753;
    --purple-900: #180d2e;
    --primary-color: #0a7082;
    --secondary-color: #ffc107;
    --button-hover-color: #7ae614;
    --background-color: #919191;
    --font-color: #000;
}

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

body, html {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    color: var(--font-color);
    font-weight: bold;
    background: url("/img/back-site.png") no-repeat center;
 /* Pad naar je achtergrondafbeelding */
    background-size: cover; /* Zorg dat de afbeelding de hele viewport bedekt */
    background-position: center; /* Plaats de afbeelding gecentreerd */
    background-repeat: no-repeat; /* Voorkom dat de afbeelding wordt herhaald */
    background-attachment: fixed; /* Zorg dat de achtergrond blijft staan bij scrollen */
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}




/* Header */
.header {
    background-color: var(--secondary-color);
    padding: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 10vh;
    position: relative;
}

.header h1 {
    font-size: 2.5vw;
    font-weight: bold;
    color: var(--font-color);
    margin-left: 120px;
    transition: color 0.3s ease;
}

.header h1:hover {
    color: var(--primary-color);
}

.header a {
    text-decoration: none;
    color: inherit;
}

.intro-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;

  color: darken(#fff, 30%);
}

.intro-flex h2{
  font-size: clamp(18px, 4.5vw, 28px);
  line-height: 1.3;
}




.promo-video-container {
  background: transparent;
  width: 100%;
  display: flex;
  justify-content: center;
}

.promo-video-container1 {
  background: transparent;
  width: 100%;
  display: flex;
  justify-content: center;
}

.promo-video1 {
  width: 100%;
  max-width: 1000px;
  height: auto;
  object-fit: contain;
  background: none;
    border-radius: 12px; /* <– dit zorgt voor zachte, afgeronde hoeken */

}

.promo-video {
  width: 100%;
  max-width: 1000px;
  height: auto;
  object-fit: contain;
  background: none;
    border-radius: 12px; /* <– dit zorgt voor zachte, afgeronde hoeken */

}

.video-btn {
  background-color: #0a7082;
  border: none;
  padding: 4px 10px;
  margin: 0 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.video-btn:hover {
  background-color: #e0b200;
}




.intro-text {
  flex: 2;
}

.intro-image {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* ← Zorgt dat hij rechts staat */
  align-items: flex-start;
}

.index-logo {
  max-width: 150px;
  height: auto;
  margin-top: 20px;
}



/* Container met icoon links + woordmerk rechts */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;                 /* ruimte tussen icoon en woordmerk */
}

/* === LOGO'S (desktop-first, met fallback) === */
.logo-boven { 
  display: block; 
  line-height: 0;          /* verwijdert extra inline witruimte rond het img */
}
.logo-boven img {
  height: var(--logo-h, 60px);  /* gebruikt je variabele, 60px als fallback */
  width: auto;
  display: block;
}

/* Icoon links (kleine logo) */
.header-logo {
  height: 44px;            /* kies 40–56px naar smaak */
  width: auto;
  display: block;
  flex: 0 0 auto;          /* voorkomt ongewenst rekken/krimpen in flex-rijen */
}

/* === SUBTITLE === */
.subtitle { 
  margin: .25rem 0 0; 
  color: #555; 
}

/* === LOGIN/SIGNUP (samengevoegd + robuust) ===
   Deze regel overschrijft je dubbele definities netjes. */
.login-signup {
  display: flex;
  align-items: center;
  gap: .75rem;             /* consistente spacing */
  flex-wrap: wrap;         /* breek af op smalle schermen; geen overlap */
  margin-right: 20px;
  color: var(--primary-color);
  min-width: 0;            /* voorkomt overflow van lange inhoud */
}

/* === KLEIN SCHERM TWEAKS (desktop-first) === */
@media (max-width: 480px) {
  /* desgewenst woordmerk iets groter op heel smal scherm */
  :root { --logo-h: 64px; }

  /* centreren van loginrij als hij onder de logo's valt */
  .login-signup {
    justify-content: center;
    margin-right: 0;
    gap: .5rem;
  }
}


.login-signup a:hover {
    color: var(--primary-color);
}

body.iframe-page .login-signup {
    color: var(--secondary-color, #ffc107); /* Gele tekst */
}


/* Knoppen */
button, .start-btn, .start-trial-btn, .no-glow-btn {
    background-color: #8c52ff;
    color: white;
    padding: 0.5vw 1vw;
    border: none;
    cursor: pointer;
    font-size: 1.2vw;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Glow-effect voor de knop */
@keyframes glow {
    0% {
        box-shadow: 0 0 5px var(--button-hover-color);
    }
    50% {
        box-shadow: 0 0 20px var(--button-hover-color), 0 0 30px var(--button-hover-color);
    }
    100% {
        box-shadow: 0 0 5px var(--button-hover-color);
    }
}

.start-trial-btn {
    animation: glow 1.5s infinite;
}

.start-btn:hover, .start-trial-btn:hover {
    background-color: var(--button-hover-color);
    transform: scale(1.05);
}

button:active, .no-glow-btn:active {
    background-color: #5cbf12;
    transform: scale(0.95);
}

/* Navigatiebalk */
/* ===== NAVBAR ===== */
.navbar {
  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  border-top: 4px solid var(--secondary-color);
  border-bottom: 4px solid var(--secondary-color);
  flex-wrap: wrap; /* voorkomt dat knoppen in elkaar schuiven op kleinere schermen */
}

.navbar a {
  color: var(--font-color);
  text-decoration: none;
  font-size: clamp(14px, 1.5vw, 18px); /* schaalbaar: min 14px, max 18px */
  padding: 0.5rem 1rem;
  background-color: #6c757d;
  border: 2px solid var(--primary-color);
  font-weight: bold;
  text-align: center;
  display: inline-block;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.iframe-page .navbar a.active {
  color: #000 !important; /* Speciaal voor DEMO-pagina */
}

.navbar a:hover,
.navbar a.active {
  background-color: var(--secondary-color);
  color: var(--font-color);
}

/* ===== MOBIEL ===== */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column; /* Zet de knoppen onder elkaar */
    gap: 10px;
    padding: 15px 0;
  }

  .navbar a {
    width: 80%; /* Knoppen nemen bijna hele breedte in */
    font-size: 10px; /* vaste goed leesbare maat */
  }
}




/* Introductie */
.intro, .intro2 , .intro3 {
    flex: 3;
    padding: 2vw;
    padding-left: 4vw;
    border-radius: 5px;
    color: var(--font-color);
    margin: 2vw;
}

.intro {
    background-color: rgba(255, 193, 7, 0.5);
}

.intro2 {
    background-color: var(--primary-color);
}

.intro3 {
    background-color: var(--secondary-color);
}

.intro4 {
    max-width: 1800px;
    margin: 2vw auto;
    padding: 2vw 4vw;

    background-color: transparent;
    border-radius: 5px;

    color: #fff;
    font-size: 1.5rem;
    text-align: center;
}




/* Feedback & News sectie container */
.feedback-news-onepager-container {
    display: flex;
    justify-content: space-between;
    gap: 2vw; /* Afstand tussen feedback en nieuws */
    max-width: 90%; /* Beperkt de totale breedte */
    margin: 2vw auto; /* Zorgt voor centrale uitlijning */
}

.feedback, .news .onepager {
    flex: 1; /* Beide secties nemen evenveel ruimte in */
    min-width: 45%; /* Minimale breedte voor consistentie */
}

@media (max-width: 768px) {
    .feedback-news-container {
        flex-direction: column; /* Plaatst secties onder elkaar op kleine schermen */
        gap: 1rem; /* Iets minder ruimte tussen secties */
    }

    .feedback, .news, .onepager {
        width: 100%; /* Beide secties vullen de volledige breedte */
    }
}

/* Feedback sectie */
.feedback {
    background-color: var(--primary-color); /* Gebruik je primaire kleur voor achtergrond */
    color: var(--font-color); /* Tekstkleur variabel */
    padding: 1.5vw; /* Padding rondom */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px; /* Afgeronde hoeken */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Schaduw voor een mooie diepte */
    font-size: small; /* Kleinere tekst */
      background-color: rgba(10, 112, 130, 0.5); /* 50% transparantie */

}

.feedback textarea {
    width: 90%; /* Breedte van het invoerveld */
    max-width: 500px;
    height: 100px; /* Hoogte van het tekstgebied */
    padding: 10px;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    font-size: 1rem; /* Standaard lettergrootte */
    resize: none; /* Voorkomt het aanpassen van de grootte */
}

.feedback button {
    background-color: var(--secondary-color); /* Kleur van de knop */
    color: white; /* Tekstkleur */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer; /* Cursor verandert naar pointer bij hover */
    margin-top: 1vw;
    text-transform: uppercase; /* Hoofdletters voor knoptekst */
}

.feedback button:hover {
    background-color: var(--button-hover-color); /* Hoverkleur voor knop */
}

/* Nieuwssectie */
.news {
    background-color: var(--primary-color); /* Primaire kleur als achtergrond */
    color: var(--font-color); /* Tekstkleur */
    padding: 1.5vw; /* Padding rondom */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Schaduw voor diepte */
      background-color: rgba(10, 112, 130, 0.5); /* 50% transparantie */

}

.onepager {
    background-color: var(--primary-color); /* Primaire kleur als achtergrond */
    color: var(--font-color); /* Tekstkleur */
    padding: 1.5vw; /* Padding rondom */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Schaduw voor diepte */
      background-color: rgba(10, 112, 130, 0.5); /* 50% transparantie */

}

.news img {
    width: 100%; /* Afbeelding vult de breedte */
    max-width: 250px; /* Maximale breedte */
    height: auto; /* Hoogte aanpassen aan breedte */
    border-radius: 4px; /* Afgeronde hoeken */
}


/* Proces sectie */
.process-container {
    display: flex;
    justify-content: center;
    gap: 2vw;
    flex-wrap: wrap;
    margin: 2vw auto;
    width: 100%;
    max-width: 1200px;
}



/* Pricing sectie */
.pricing-options {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2vw auto;
}

.pricing-line {
    background-color: var(--secondary-color); /* Gele lijn */
    height: 10vh; /* Hoogte van de lijn */
    display: flex;
    justify-content: center; /* Horizontaal centreren */
    align-items: center; /* Verticaal centreren */
    width: 100vw; /* Hele breedte van het scherm */
}

.pricing-info {
/* 50% transparant blauw (#0a7082) */
    background-color: rgba(10, 112, 130, 0.5);
    border: none;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
}

.pricing-info h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--font-color);
}

.pricing-info .start-trial-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centreert de container */
    gap: 20px; /* Ruimte tussen afbeelding en tekst */
}

.pricing-info .start-trial-img {
    width: 80px; /* Pas breedte aan naar wens */
    height: auto; /* Houdt proporties van afbeelding */
    border-radius: 8px; /* Optioneel: afgeronde hoeken */
}

.pricing-info .start-trial-text-button {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pricing-info .start-trial-btn {
    padding: 1rem 2rem;
    background-color: #8c52ff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    text-transform: uppercase;
    cursor: pointer;
    animation: glow 1.5s infinite;
}

.pricing-info .start-trial-btn:hover {
    background-color: var(--button-hover-color);
}


@keyframes glow {
    0% {
        box-shadow: 0 0 5px var(--button-hover-color);
    }
    50% {
        box-shadow: 0 0 20px var(--button-hover-color), 0 0 30px var(--button-hover-color);
    }
    100% {
        box-shadow: 0 0 5px var(--button-hover-color);
    }
}

.pricing-info .start-trial-btn:hover {
    background-color: var(--button-hover-color);
}

/* Earnings-sectie */
.earnings-section {
    background-color: #ffc107;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 30px;
    text-align: center;
}

/* Video-container */
.video-container {
    margin-top: 20px;
    text-align: center;
}

.video-container iframe {
    width: 100%;
    max-width: 600px;
    height: 315px; /* Standaard YouTube-video hoogte */
    border: none;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Earnings-link */
.earnings-link {
    margin-top: 20px;
}

.earnings-link .btn {
    background-color: #8c52ff;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.earnings-link .btn:hover {
    background-color: #7ae614;
}

/* Earningssectie styling */
.earnings-section {
    flex: 1;
    min-width: 45%;
    background-color: #ffc107;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    text-align: center;
}

/* Knop styling */
.earnings-section .btn, .profile-actions .btn {
    margin-top: 10px;
    display: inline-block;
    padding: 10px 20px;
    background-color: #8c52ff;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

.earnings-section .btn:hover {
    background-color: #7ae614;
}


/* Assistance sectie */
.assistance {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2vw auto;
    padding: 2vw;
    background-color: rgba(10, 112, 130, 0.5);
}

.assistance .option {
    flex: 1;
    text-align: center;
    background-color: var(--secondary-color);
    border-radius: 5px;
    padding: 1.5vw;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.assistance .option img {
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.assistance .option h3 {
    margin-bottom: 1rem;
}

.image-row {
  display:flex; justify-content:space-between; align-items:center; gap: 20px; flex-wrap:wrap;
}

.gif-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px 0;
}


.image-container {
  flex: 1;
  max-width: 30%;
  background-color: var(--secondary-color);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Deze regel pakt nu AL je plaatjes in de container */
.image-container img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* hover-tekst blijft zoals voorheen */
.image-container .image-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.image-container:hover .image-text {
  opacity: 1;
}

/* Visually hidden (voor toegankelijkheid) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Losse sectie met nette spacing en centrering */
.goals-container {
  display: grid;
  place-items: center;
  padding: 16px 0 32px;
}

/* Responsive, makkelijk schaalbaar via --max-w */
.image-container1 {
  --max-w: 960px;         /* pas grootte simpel aan */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --border-w: 0px;        /* bv. 3px */
  --border-color: #0a7082;

  width: min(100%, var(--max-w));
  margin-inline: auto;    /* centreert de container */
}

.image-container1 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: var(--border-w) solid var(--border-color);
}


.image-container2 {
  flex: 1;
  max-width: 25%;
  background-color: var(--primary-color);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;            /* ruimte tussen PNG & GIF */
  position: relative;   /* voor de hover-tekst */
  overflow: hidden;     /* voorkomt overflow */
}


.image-container2 .static-image,
.image-container2 .gif-image {
  max-width: 45%;       /* beide afbeeldingen 45% van de container */
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.image-container2 .image-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.image-container2:hover .image-text {
  opacity: 1;
}


/* ===== TEAM-SECTIE ===== */
.team{
  padding:2rem 1rem;
}
.team h2{
  text-align:center;
  font-size:2rem;
  margin-bottom:2rem;
}

/* Grid: 2 kolommen, responsive */
.team-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2rem;
  max-width:2000px;
  margin:0 auto;
}
/* Op kleinere schermen 1 kolom */
@media (max-width:600px){
  .team-grid{ grid-template-columns:1fr; }
}

/* Kaartje */
.team-member{
  background-color:#0a7082;
  padding:1.5rem;
  border-radius:1rem;
  color:#fff;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}

/* Foto-container (bevat 2 img's: .default en .hover) */
.team-photo{
  position:relative;
  width:300px;
  height:300px;
  margin:0 auto 1rem;
}
@media (max-width:600px){
  .team-photo{ width:220px; height:220px; }
}

/* Afbeeldingen overlappen perfect en faden */
.team-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: 0;
  border:3px solid #ffc107;
  transition:opacity .3s ease;
}
.team-photo img.default{ opacity:1; }
.team-photo img.hover{ opacity:0; }
.team-photo:hover img.default{ opacity:0; }
.team-photo:hover img.hover{ opacity:1; }

/* Naam, rol, bio */
.team-member h3{
  margin:.5rem 0 .25rem;
  font-size:1.3rem;
}
.team-member .role{
  margin:0 0 .5rem;
  font-weight:600;
  opacity:.9;
}
.team-member .bio{
  margin:.5rem 0 1rem;
  line-height:1.6;
  text-align:left;
  max-width:70ch;
}

/* LinkedIn icoon */
.linkedin-icon{
  width:28px;
  height:28px;
  display:inline-block;
  margin-top:.5rem;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
  transition:transform .15s ease, filter .15s ease;
}
.linkedin-icon:hover{
  transform:translateY(-1px);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
}


/* Rol */
.role {
  margin: 0 0 1rem;
  font-size: 1rem;
  opacity: 0.9;
}

/* Bio-tekst */
.bio {
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  margin-top: auto;
}
.linkedin-icon {
  width: 100px;
  height: 100px;
  margin-top: 1rem;
  /* optioneel: centreren */
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Zorg dat de body en html de volledige hoogte innemen */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Zorg dat de main content alle beschikbare ruimte gebruikt */
main {
    flex: 1; /* Neemt alle beschikbare ruimte in tussen de header en de footer */
}

/* Zorg dat de footer aan de onderkant blijft */
.contact-info {
    background-color: #6c757d;
    color: var(--font-color);
    padding: 20px;
    text-align: center;
    font-size: 16px;
    border-top: 3px solid var(--secondary-color);
    position: relative;
    bottom: 0;
    width: 100%;
}



/* Responsive Design */
@media (max-width: 768px) {
    .header h1 {
        font-size: 5vw;
    }

    .navbar {
        flex-direction: column;
    }

    .pricing-options, .assistance, .image-row {
        flex-direction: column;
    }

    .image-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .pricing-info {
        width: 100%;
    }

    .image-container img {
        max-width: 100%;
    }



}

/* Container is eerst onzichtbaar */
#widgetContainer {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;               /* altijd bovenop */
    /* geef ‘m hier direct de gele kleur */
  background-color: var(--secondary-color);
}


/* Zodra .active wordt toegevoegd: tonen */
#widgetContainer.active {
  display: block;
}

/* Dit is jouw ronde knop‑stijl */
.widget-toggle {
  width: 80px;        /* breedte van de knop */
  height: 80px;       /* hoogte van de knop */
  background-color: var(--secondary-color)IMPORTANT; /* Gele achtergrond */
  background-image: url('/img/logorechtsonder2.png');
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.8);
  opacity: 0;
}

/* animatie bij tonen */
#widgetContainer.active.widget-toggle {
  transform: scale(1);
  opacity: 1;

  
}

/* Helper voor screenreaders */
.sr-only {
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  border: 0;
}

/* Basis header layout */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 1rem;
  background: var(--secondary-color);   /* voorbeeldkleur */
}

/* Hamburger standaard verborgen */
.nav-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle__bar {
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
}

/* Nav standaard horizontaal */
.navbar {
  display: flex;
  gap: .75rem;
}
.navbar a {
  color: black;
  text-decoration: none;
  padding: .5rem;
}

/* ===== Mobiel ===== */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }          /* toon hamburger */
  .navbar {
    display: none;                        /* verberg menu */
    flex-direction: column;
    background: var(--primary-color)
    width 100%;
  }
  .navbar.open { display: flex; }         /* toon menu als open */
}

/* A11y helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Header layout */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Hamburger */
.nav-toggle {
  background: var(--secondary-color);
  border: 0;
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle__bar {
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
}

/* Nav: standaard zichtbaar (desktop) */
.navbar {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  background: var(--primary-color);   /* ✅ achtergrond altijd primaire kleur */
}
.navbar a {
  display: inline-block;
  padding: .6rem .8rem;
  text-decoration: none;
  color: black;                        /* ✅ contrasterende tekstkleur */
}

/* Mobiel: inklapbaar menu */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  body.has-hamburger .navbar {
    display: none;
  }
  body.has-hamburger .navbar.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--primary-color); /* ✅ achter knoppen primaire kleur */
  }
  body.has-hamburger .navbar.open a {
    border-bottom: 1px solid rgba(255,255,255,0.15); /* subtiele scheiding */
  }
}

/* Zorg dat nav niet onder hero verdwijnt */
.navbar {
  position: relative;
  z-index: 30;
}

/* Merk (logo + titel) naast elkaar */
.header > a {
  display: inline-flex;          /* << naast elkaar */
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  width: auto;                   /* niet 100% breed */
  flex: 0 0 auto;
}

.header-logo {
  width: 80px;     /* maak groter (proberen: 60px, 80px, 100px) */
  height: auto;    /* behoudt verhouding */
  display: block;
}

.header h1 {
  margin: 0;                     /* default marge weghalen */
  line-height: 1;
  white-space: nowrap;           /* niet afbreken */
  font-size: clamp(18px, 3.2vw, 28px);
}

/* optioneel: iets kleiner op heel kleine schermen */
@media (max-width: 420px){
  .header-logo { width: 30px; }
  .header h1 { font-size: 18px; }
}

/* Responsive label voor de target-knop */
.pg-target {
  /* wat ademruimte die mee schaalt met de celgrootte */
  padding-inline: clamp(4px, calc(var(--cell) / 18), 10px);
}

.pg-target .pg-target-txt{
  display: block;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .2px;
  text-transform: uppercase;          /* zoals in je screenshot */
  text-align: center;
  white-space: normal;                /* mag afbreken naar 2 regels indien nodig */
  overflow-wrap: anywhere;            /* voorkom overflow */
  /* schaal met de celmaat; valt terug op min/max */
  font-size: clamp(10px, calc(var(--cell) / 8.5), 16px);
}

/* === Popup basis === */
.popup{
  display:none;                          /* standaard verborgen */
  position:fixed;
  bottom:20px;
  right:20px;
  width:300px;
  max-width:90vw;
  background:var(--secondary-color, #ffb800); /* fallback geel */
  color:#000;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  z-index:10000;                         /* boven navbar e.d. */
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-align:center;
  padding:16px;

  /* animatie start (komt overeen met .open) */
  transform:translateY(6px) scale(.95);
  opacity:0;
  transition:transform .25s ease-out, opacity .25s ease-out;
  will-change:transform, opacity;
}

/* Zichtbare/actieve staat (JS voegt .open toe) */
.popup.open{
  display:block;
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Sluitknop */
#popupClose{
  position:absolute;
  top:8px;
  right:12px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  color:#000;
}

/* Foto */
.popup-photo{
  width:84px;
  height:84px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:10px;
  border:3px solid #fff; /* contrast */
}

/* Knoppen */
.popup-btn{
  display:block;
  margin:10px auto;
  padding:10px 12px;
  border-radius:8px;
  background:#000;
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
.popup-btn:hover{ background:#222; }

/* Kleiner scherm: full-width met zijmarges */
@media (max-width:480px){
  .popup{
    right:12px;
    left:12px;
    bottom:12px;
    width:auto;                 /* vult breedte tussen left/right */
  }
}


/* ===== HAMBURGER MENU – OVERRIDES ===== */

/* Knop standaard verbergen (desktop), tonen op mobiel */
.nav-toggle {
  background: none;
  border: 0;
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle__bar {
  width: 24px;
  height: 2px;
  background: #000;
  display: block;
}

/* Nav desktop: zichtbaar als rij */
#mainNav.navbar {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  background: var(--primary-color) !important;
  border-top: 4px solid var(--secondary-color);
  border-bottom: 4px solid var(--secondary-color);
}

/* Links */
#mainNav.navbar a {
  color: var(--font-color);
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  padding: .5rem 1rem;
  background-color: #6c757d;
  border: 2px solid var(--primary-color);
}

/* === NAV HOVER: geel zoals voorheen === */
#mainNav.navbar a {
  transition: background-color .2s ease, color .2s ease, transform .02s ease;
}

/* Hover + focus (toetsenbord) */
#mainNav.navbar a:hover,
#mainNav.navbar a:focus-visible {
  background-color: var(--secondary-color) !important; /* geel */
  color: var(--font-color) !important;                 /* zwarte tekst */
}

/* Actieve pagina mag ook geel blijven */
#mainNav.navbar a.active {
  background-color: var(--secondary-color) !important;
  color: var(--font-color) !important;
}

/* Kleine ‘tap’ feedback op mobiel */
#mainNav.navbar a:active {
  transform: scale(0.985);
}


/* Mobiel gedrag */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  /* standaard dicht */
  #mainNav.navbar {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  /* open-stand via JS */
  #mainNav.navbar.open {
    display: flex;
    background: var(--primary-color) !important;
  }

  #mainNav.navbar a {
    width: 90%;
    text-align: center;
    margin: 4px 0;
  }
}

/* Kleine bugfixes van eerdere regels */
.widget-toggle { background-color: var(--secondary-color) !important; } /* ipv 'IMPORTANT' */
.navbar { background: var(--primary-color); } /* semicolon + geldige regel */