:root{
  --accent:#ffd166;
  --accent-light:#ffe4a8;
  --accent-border:#f3c97a;
  --accent-dark:#e8b45d;
  --dark:rgba(10,10,10,0.65);
  --glass:rgba(255,255,255,0.06);
  /*font-family: Tahoma, Verdana, sans-serif;*/
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
    
 body{min-height:100%;background:white;color:black;}
   
    h1 { text-align: center;font-size: 38px; margin-bottom: 40px; }
    h1{font-size:clamp(28px,6vw,56px);margin-bottom:16px;line-height:1.02;color: #fff;text-shadow:0 6px 20px rgba(0,0,0,0.45)}    
    h2 { font-size: 36px; margin-bottom: 30px;  color: var(--accent); font-weight: 600; }      
    h3 { font-size:30px; font-weight: 600; margin-bottom:25px;  color: var(--accent);text-align: center;}
   
    p, li { font-size: 17px; line-height: 1.65; }
    p { font-size:clamp(15px,1.8vw,18px); line-height:1.6; }
    p.lead{color:#fff;margin: auto;font-weight: bold;}
  

h3::before {
  content:"🦔";
  margin-right: 8px;
  opacity: .8;  
}
    
img { max-width:100% }


/*NAV*/ 

  .nav {
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 24px;
    background: linear-gradient(
      to bottom,
     rgba(0,0,0,0.45),
     rgba(0,0,0,0)
    );
  }
  .nav ul{list-style:none;display:flex;gap:18px;align-items:flex-start;}
  .nav a{color:#fff;text-decoration:none;font-weight:600;padding:10px 0; text-shadow: 2px 2px 6px rgba(150, 100, 40, 0.25);}
  .nav a:hover{background:rgba(255,255,255,0.15);}
  nav ul li a {color: #e6e9ec;text-shadow: 0 1px 2px rgba(0,0,0,0.4);}

  /*nav ul li a:hover {color: #44525e;}*/
  /*nav ul li:hover {color: #44525e;}
  nav ul li {border-color: #44525e;}*/
  nav ul li a.active{color:#8c8c8c;}

  .menu-btn{display:none;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:10px;border-radius:8px;color:#fff;cursor:pointer}
  .brand{color:#fff;font-weight:500;font-size:26px;letter-spacing:0.5px;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,0.15);display:flex;
  align-items:center;line-height:1;}

	  
.insta{
  margin-right: 20px;
  display: inline-block;
}
  .active{border-radius:0px;color:#44525e; }

  /* Mobile menu */
    .mobile-menu {position:fixed;top:0;left:0;right:0;bottom:0;background: var(--accent-dark);display:flex;align-items:center;justify-content:center;z-index:40;opacity:0;visibility:hidden;transition:opacity .25s ease;}
    .mobile-menu.open{opacity:1;visibility:visible}
    .mobile-menu ul{list-style:none;text-align:left;}
    .mobile-menu li{margin:14px 0}
    .mobile-menu a{color:white;font-size:20px;text-decoration:none;font-weight:600;padding:8px 16px;text-shadow:0 0 6px rgba(0,0,0,0.6)}

    /* Dropdown */
    .has-dropdown { position: relative; }

    .dropdown {
      display: none !important;
      position: absolute;
      top: 100%;
      left: 0;
      background: rgba(0,0,0,0.1);
      padding: 10px 0;
      border-radius: 8px;
      min-width: 180px;
      flex-direction: column;     
      justify-content:flex-start;
      align-items:flex-start;
      gap:0px;           
    }

    .dropdown li { 
      padding: 6px 20px;
      text-align: left;       
    }

    .dropdown a { 
      display:block;
      color:#fff;
      text-align:left;      
    }

    /* Alleen klik/touch */
    .dropdown.open {
      display: flex !important;    
    }

    /* Mobile override */
    .mobile-menu .dropdown {
      position: static;
      background: none;
      padding: 0;
    }

    /* Icoon */
    .dropdown-toggle::after {
      content: " ▾";
      font-size: 0.8em;
      display: inline-block;
      transition: transform 0.2s ease;
    }

    /* Rotatie bij open */
    .has-dropdown.open > .dropdown-toggle::after {
      transform: rotate(180deg);
    }


ul.dropdown { 
  display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap:0px;
}

ul.dropdown li{
  line-height: 1;
  font-weight: 400;
  padding-left:20px;
}
    

.leadbox-link {
  text-decoration: none;
  display: inline-block;
  color: inherit;
}

.leadbox-link:hover {
  text-decoration: none;
}

.lead{color: #f2efe7; 
  text-shadow: 
    0 0 8px rgba(255,255,255,0.3),
    0 0 12px rgba(255,255,255,0.2),
    0 0 16px rgba(255,255,255,0.1);     
}

 .leadbox {
      display: inline-block;           /* zodat de blur alleen achter de tekst zit */
      text-wrap: balance;
      padding: 12px 20px;              
      background: rgba(255, 255, 255, 0.15); /* semi-transparant wit */
      backdrop-filter: blur(6px);      
      border-radius: 10px;             
      color: #f2efe7;                  
      text-shadow: 0 2px 4px rgba(0,0,0,0.35); /* subtiel extra contrast */
      max-width: 350px;      
  }

.leadbox:hover {
      transform: translateY(-2px); 
      background: rgba(255, 255, 255, 0.25); /* iets meer contrast */
      box-shadow: 0 8px 20px rgba(0,0,0,0.25); 
      cursor: pointer;
    }

.naarhelp {text-decoration:none;color: #f2efe7;}
  

/*PARALLAX*/
.parallax {
   background-image: url("img/egelbijnacht.webp");  
   min-height: 100dvh; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;    
  align-items: flex-start;           
  flex-direction: column;  
  justify-content: center; 
  padding-left: 50px;    
}

/*main{padding-top:120px;max-width:1000px;margin:0 auto;background:white;color:black;}*/

/* block met 4 cards */

h2 {/*
  display: flex;
  align-items: center;
  justify-content: center;   /* centreert horizontaal */
  /*gap: 0.25em; /* kleine ruimte tussen icoon en 'Noord' */
  text-align: center;        /* fallback voor meerdere regels */
  width: 100%;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
  margin-top: clamp(40px, 8vh, 100px);
  color: #000066;   
  font-size: xx-large;
  font-weight: bold;
  text-wrap: balance;
}

.container{
  max-width:1000px;
  margin:60px auto;
  display:grid;
  gap:32px;
  grid-template-columns: repeat(2, 1fr); /* altijd maximaal 2 */
}
.basix {
  max-width: 60%;
  margin: 0 auto;
  font-weight: bold;

}

.card {  
display: flex;
flex-direction: column;
justify-content: space-between;
  border: 3px solid var(--accent);
  box-shadow:0 14px 36px var(--shadow);
  border-radius:14px;
  /*background:var(--card);
  transition:.2s;
  position:relative;overflow:hidden;/*border:3px solid var(--accent);*/
  padding:32px 24px;
  color:#1a1a1a;
  min-height: 320px;
}     

.card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.15);
  cursor:pointer;
}

.card li {
  margin-left: 16px;    
}

.card p {
  color: #2e3a26;
}

ul {
  position: relative;
  padding-bottom: 32px; /* ruimte voor 'Bekijk →' onderaan */
}
/*
.ul-cover-link {  
  position: absolute;
  inset: 0;                /* vult hele ul */
  /*z-index: 5;
  text-indent: -9999px;    /* tekst verbergen */
  /*opacity: 0;
  cursor: pointer;  
}
*/
.card:hover ul {
  background: rgba(255,255,255,0.06); 
  transition: 0.2s ease;
}
.card-nohover:hover {
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

.card:active {
  transform: translateY(-4px);
}

p.neplink{color:#ffae00; font-weight: bold;text-align: center;}

/* WIE WE ZIJN EN WAT WE DOEN*/

.container2{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 85vh;
  text-align: center;     
  background: #ffe4a8; 
  padding:100px;
}

 .wiewat {
    margin: 0 auto;
    max-width: 800px;      
    background:white;    
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
    position: relative; 
    overflow: visible;   /* voorkomt afsnijden bij hover- of border-effecten */
    border-radius: 12px;
    border: 3px solid #fbfaf7;
    padding:32px;
}

.wiewat p{
  text-align:left ;
  margin: 0 auto;
  max-width: none;
  background: white;  
  line-height: 1.7;
  padding: 0 30px 20px 30px; 
  background: transparent;   /* belangrijk */  
}

.wiewat p:nth-of-type(1),
.wiewat p:nth-of-type(2) {
  margin-bottom: 0px;   
}
.wiewat h3{
  margin-bottom: 24px;
  padding-top: 40px;   
}

.wiewat:hover, .wiewat:active{ 
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.15);
}

.wiewat-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  text-indent: -9999px;
  cursor: pointer;
}


/*WAARNEMING*/
#waarneming{
  display: flex;
  justify-content: center;   
  background-color: #fbfaf7;  
  }

.kaartje{
  display: flex;
  flex-direction: column; 
  align-items: center;  
  max-width: 600px;  
  margin-top:40px;
  margin-bottom: 40px;
}
	  
.mardjin{margin:10px;
  padding: 0 10px;
}
.bold{font-weight: bold;}
.red{color:red;}
.geo {
	max-width: 100%;
  	height: auto;
}

/*contactform*/

.parallax2 {
  position: relative;
  background-image: url('img/Noord.webp');  
  min-height: 100dvh;   
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  display: grid;
  place-items: center;
  padding: 40px 20px;
}
/* Donkere overlay */
.parallax2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);   /* pas de 0.45 aan voor meer of minder donker */
  z-index: 0;
}

/* Zorg dat content erboven staat */
.parallax2 > * {
  position: relative;
  z-index: 1;
}

.info-section {
  width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 90px 0;  
  background-image: url('img/Noord.png');  
  background-attachment: fixed;
  min-height: 100dvh; 
  background-size: cover;                  
  background-position: center;             
  background-repeat: no-repeat;  
  /*position: relative;*/
  border-top: 1px solid #d5d5d5;
  border-bottom: 1px solid #d5d5d5;
  color: #fefefe;                          
}

.info-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); 
  z-index: 0;
}

/* zorg dat de content boven de overlay komt */
.info-section .info-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.info-section h3,
.info-section p {
  color:white;
}


/* Contact form styles */
   
#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  width: 100%;  
  text-align: left; 
  padding: 40px;
  color: #4a433e;   
  }

  /* Labels en tekst */
#contact label {
   color: #4a433e;
}
/* Form fields */
#contact input,
#contact textarea {
   border: 2px solid #d9d3cd;
  background-color: #ffffff;
  color: #4a433e;  
}

/* Grijze knop */
#contact button[type="submit"] {
  background-color: #8a817c;   
  border: 2px solid #6f6763;   
  color: #ffffff;  
}

/* Hover */
#contact button[type="submit"]:hover {
  background-color: #756c67;   
  border-color: #5e5652;
 
}
#contact h3 {margin-bottom: 16px;}
  
    .contact-form{display:flex;flex-direction:column;gap:20px;max-width:500px;width:100%;margin-top:20px;background:#ffffff;color:#000;border: 3px solid#bfbfbf;border-radius:10px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
    .contact-form label{font-weight:600;margin-bottom:4px;display:block}

    .input-field{box-sizing: border-box;width:100%;padding:12px;border-radius:10px;border:2px solid transparent;outline:none;font-size:16px;background:#f7f7f7;color:#111;transition:border .25s ease, background .25s ease;} 
    /*.input-field:focus{border-color:var(--accent);background:#fff}*/
    .input-field:focus{border-color:var(--accent);background:rgba(255,255,255,0.15)}

    .error-message{color:#ff6b6b;font-size:14px;margin-top:4px;margin-bottom:4px;display:none}
    .input-error{border-color:#ff6b6b !important;background:rgba(255,0,0,0.12)}

    .contact-form {background-color: rgba(255,255,255,0.8); /* 0.8 = 80% zichtbaar, transparant */
}

    /*.submit-btn{padding:14px 20px;border:none;border-radius:10px;background:var(--accent);font-weight:700;font-size:16px;cursor:pointer;transition:opacity .25s ease;color:#000}
    .submit-btn:hover{opacity:0.85}*/

   
button[type="submit"] {
  background: #bfbfbf;
  color: #333;
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.25s ease;
  font-weight: 600;
}

button[type="submit"]:hover {
  background: #a6a6a6;
}

.verberg{
  color: white;
  /*text-shadow: 0 0 1px #000;*/
}

.verberg > span:nth-child(2) {
	display: none;
}

.pretty{
  text-wrap: balance;  
}

.balanced{
  text-wrap:balance;
}
.egelgroepen{
  display: flex;
  flex-direction: column;
  padding: 70px 20px;
  justify-content: center;
  align-items: center;
  min-height: 85vh;
  background-color: #666666;
  color: #ffffff;
}
.listbox{
  padding-top:40px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;
  width:100%;
  max-width:1000px;
}
ul li a{
  color: #ffcc00;
}
.listbox ul{
  padding:24px;
  background:rgba(255,255,255,.06);
  border-radius:12px;
  list-style:none;
  word-break:break-word;
}

.listbox h4{
  margin-bottom:16px;
  color:#ffd166;
}

.listbox li{
  margin-bottom:10px;
  line-height:1.6;
}

.listbox a{
  overflow-wrap:anywhere;
}
/*QR en FOOTER*/ 
footer{  
  padding:40px 0;
  text-align:center;
  color:white;
   background: linear-gradient(
    to bottom,
    var(--accent-light),
    var(--accent-dark)
  );
 }

footer p{
  margin: 0;
}

footer img{ max-width:220px; height:auto; }


@media (max-width: 1400px) {  
 .parallax { justify-content: flex-start;}
 h1 {padding-top:100px; }
}

@media (max-width: 1100px) {  
.parallax{justify-content: space-between;padding-bottom: 20px;}
}  

@media (max-width: 900px) {
  .container { grid-template-columns: 1fr; /* op mobiel 1 per rij */ }
  .card { min-height:auto; padding:18px;max-width:450px;margin: 0 auto;}
  .left-content{width:100%;padding:24px 12px}
  .nav ul{display:none}
  .menu-btn{display:inline-block}
  .parallax{justify-content: flex-start;}
   p.lead{ max-width: 225px;}
  .leadbox {max-width: 250px;}
  /*h1{padding-top:32px; margin-top: 20px;}*/
  .parallax { align-items: flex-start; padding-left: 24px;   /* exact gelijk aan .nav */ }
  .parallax h1 {text-align: left;  }
  .leadbox {margin-left: 0;text-align: left;  }
  p.lead {text-align: left; }
  .container2{padding: 50px;}
   
}

  @media (max-width: 768px) {
    .container {padding:12px;}
    h1 {padding-top: 32px; margin-top: 32px;}
    .parallax {justify-content: flex-start;}
    .kaartje{padding: 0px 10px 0px 10px;}
	.container2 {padding: 10px 10px 10px 10px;}
	.wiewat p {padding: 0 0 20px 0;}
	.wiewat h3 {padding-top: 10px;}
  }
        
 /* @media (max-width: 700px) {
    .wiewat { padding: 28px 18px;}
  }*/

 /* Maak nav compacter op kleine schermen */
@media (max-width: 600px) {  
  .brand { font-size: 20px; }
  .nav { top: 10px; padding: 0 14px; }
  .hero { padding: 80px 16px; min-height: 70vh; }
  .h1 { font-size: clamp(24px, 8vw, 40px); }
   #contact { padding: 24px 12px; }
  .contact-form { padding: 12px; gap:14px; }
}
  

/* iOS Safari: parallax uitschakelen */
@supports (-webkit-touch-callout: none) {
  .parallax, .parallax2, .info-section{
    background-attachment: scroll;
  }
}
@media (max-width:600px){
	
  .egelgroepen{
    padding:50px 16px;
  }

  .listbox{
    grid-template-columns:1fr;
    gap:20px;
  }

  .listbox ul{
    padding:18px;
  }

  .listbox h4{
    font-size:20px;
  }

}