*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ overflow-x:hidden; }

body{
  background-color:#000030;
  color:dimgrey;
  font-family:"trebuchet ms", helvetica, sans-serif;
  font-size:1em;
}

p{
  color:#D4D063;
  line-height:1.3em;
  margin-bottom:1em;
}

h1{
  color:#fff;
  font-size:1.6em;
  font-weight:bold;
  letter-spacing:0.05em;
  margin:0 0 1.2em;
  padding:1em 0 0;
}

h2{
  color:#fff;
  font-size:1.4em;
  margin-bottom:0.25em;
  padding-top:0.25em;
}

@media screen and (max-width:800px){
  h1.titel1{
    color:#fff;
    font-size:1.2em;
    font-weight:bold;
    letter-spacing:0.05em;
    margin:0 0 1.2em;
    padding:1em 0 0;
  }
}

@media screen and (max-width:800px){
  h2.titel2{
    color:#fff;
    font-size:1.0em;
    font-weight:bold;
    letter-spacing:0.05em;
    margin:0 0 1.2em;
    padding:1em 0 0;
  }
}

.list1{ color:#25B81C; }
.list2{ color:#25B81C; margin-left:1em; }

#websitevak{ width:100%; }
#middenstuk{ width:100%; }

/* =========================
   HEADER
========================= */
#balkboven{
  position:relative;
  margin:0 auto;
  padding:1.4em 0 1em;
  width:95%;
  min-height:330px;
}

/* clearfix */
#balkboven::after{
  content:"";
  display:table;
  clear:both;
}

/* logo links */
.logo{
  float:left;
  height:auto;
  margin-left:1em;
  width:clamp(200px, 22vw, 450px);
  max-width:48%;
}

/* menu rechts (altijd boven de lampen) */
#menu{
  float:right;
  display:block;
  position:relative;
  z-index:50;
}

#menu ul{ list-style:none; }

/* hamburger uit (jij wil menu altijd zichtbaar) */
#menuknop{ display:none !important; }
#menu-icoon{ display:none; }

/* menu: flex -> geen baseline issues (Contact niet lager) */
#hoofdmenu{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:0;
}

#hoofdmenu > li{
  float:none;
  display:flex;
  align-items:center;
  position:relative;
}

#hoofdmenu > li > a{
  color:#fff;
  text-decoration:none;
  font-size:1.8em;
  font-variant:small-caps;
  letter-spacing:0.05em;

  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;

  padding:1em 1.35em 1em 0.5em;
}

#hoofdmenu > li:last-child a{ padding-right:0; }
#hoofdmenu > li > a:hover{ color:lime; }

/* submenu (voor later) */
.submenu > ul{ display:none; }
#hoofdmenu > li:hover ul{
  display:block;
  position:absolute;
  z-index:60;
  top:100%;
  left:0;
}

.submenu > ul > li > a{
  background-color:steelblue;
  border-top:1px solid #fff;
  color:#fff;
  display:block;
  font-size:1.2em;
  font-variant:small-caps;
  letter-spacing:0.05em;
  padding:0.6em 0.75em 0.6em 0.5em;
  text-decoration:none;
  width:7em;
}
.submenu > ul > li > a:hover{ background-color:forestgreen; }

/* lampen: desktop gecentreerd */
.header-hero{
  position:absolute;
  top:50px;
  left:50%;
  transform:translateX(-50%);
  width:520px;
  height:260px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  z-index:1;
}

/* =========================
   1360 / laptops: lampen groter/breder + beetje links
========================= */
@media screen and (max-width:1450px){
  #balkboven{ min-height:320px; }

  .header-hero{
    width:420px;     /* groter/breder dan je kleine variant */
    height:230px;
    top:58px;
    left:46%;        /* beetje naar links -> ruimte voor menu rechts */
    transform:translateX(-50%);
  }

  .logo{
    width:clamp(180px, 20vw, 340px);
  }

  #hoofdmenu > li > a{
    font-size:1.40em;
    padding:0.85em 0.70em 0.85em 0.45em;
  }
}

/* nog kleiner */
@media screen and (max-width:1250px){
  #balkboven{ min-height:300px; }

  .header-hero{
    width:380px;
    height:210px;
    top:62px;
    left:44%;
  }

  #hoofdmenu > li > a{
    font-size:1.25em;
    padding:0.78em 0.58em 0.78em 0.40em;
  }
}

/* =========================
   MAIN CONTENT
========================= */
#hoofdvak{
  clear:both;
  margin:0 auto;
  width:95%;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

#tekstvak{
  flex: 1 1 700px;
  padding:1em;
  min-height:80vh;
  font-size:0.95em;
  line-height:1.3em;
  margin-bottom:1em;
}

#tekstvak ul,
#tekstvak ol{
  font-size:0.95em;
  line-height:1.3em;
  margin-bottom:1em;
  margin-left:2em;
}

#tekstvak ul li,
#tekstvak ol li{
  padding-right:2em;
  position:relative;
  left:2em;
}

#tekstvak img{
  max-width:95%;
  height:auto;
}

#extravak{
  flex: 0 1 320px;
  font-size:0.85em;
  margin:1em 0 0;
  padding:0.5em;
}

#inhoudextravak{ text-align:center; }

/* facebook feed hoogte limiteren */
.fbfeed-wrap{
  height:600px;
  overflow:hidden;
}

/* fb iframe breedte */
.fb-venster .fb-page,
.fb-venster .fb-page span,
.fb-venster .fb-page span iframe{
  width:100% !important;
}

/* =========================
   FOOTER
========================= */
#balkbeneden{
  background-color:#5D1A6B;
  clear:both;
  width:100%;
}

#inhoudbalkbeneden{
  padding:2em 0;
  text-align:center;
  width:100%;
}

#inhoudbalkbeneden span{
  border-right:1px solid #fff;
  color:#fff;
  display:inline-block;
  font-size:0.8em;
  padding:0.5em 2em;
  white-space:nowrap;
}

#inhoudbalkbeneden span:last-child{
  border-right:0 none transparent;
}

#inhoudbalkbeneden a{
  color:#fff;
  text-decoration:none;
}

.socialmedia{ margin-left:2em; }

/* =========================
   OVERIG
========================= */
.banner{
  display:flex;
  justify-content:center;
  align-items:center;
  height:300px;
  border:1px solid black;
}

.contact-trigger{ display:block; width:100%; text-align:center; }
.contact-trigger a{ display:inline-block; }

.contact-img{
  width:400px;
  height:auto;
  cursor:pointer;
  display:inline-block;
}

hr.lijn{
  border:0;
  border-top:4px solid #5D1A6B !important;
  border-radius:4px;
  margin:16px 0;
}

.highlights{ color:#fff; }
.stappen{ color:#fff; }

.cta-knop,
.cta-knop:link,
.cta-knop:visited{
  color:#fff !important;
  text-decoration:none !important;
}
.cta-knop:hover,
.cta-knop:focus{
  color:#fff !important;
  text-decoration:none !important;
}

/* =========================
   MOBIEL (≤800px)
========================= */
@media screen and (max-width:800px){

  #balkboven{
    width:100%;
    padding:1.0em 0 1.1em;
    min-height:0;
  }

  .logo{
    float:none;
    display:block;
    margin:0.7em auto 0.5em;
    width:clamp(280px, 84vw, 480px);
    max-width:92%;
  }

  #menu{
    float:none;
    width:98%;
    margin:0 auto 0.7em;
    text-align:center;
  }

  /* menu 1 regel */
  #hoofdmenu{
    justify-content:center;
    flex-wrap:nowrap;
    align-items:center;
  }

  #hoofdmenu > li{
    display:inline-flex;
    align-items:center;
  }

  #hoofdmenu > li > a{
    font-size:0.95em;
    height:28px;
    line-height:28px;
    padding:0 0.28em;
    letter-spacing:0.01em;
    white-space:nowrap;
  }

  /* lampen full width */
  .header-hero{
    position:static;
    transform:none;
    display:block;
    width:100%;
    max-width:100%;
    height:150px;
    margin:0 auto;
    border-radius:0;
  }

  /* main stack */
  #hoofdvak{ width:100%; }

  #tekstvak{
    flex:1 1 100%;
    width:96%;
    margin:0 auto 1em;
  }

  #tekstvak ul li,
  #tekstvak ol li{
    padding-right:0;
    position:static;
    left:0;
  }

  /* extravak rood */
  #extravak{
    flex:1 1 100%;
    width:98%;
    margin:0 auto;
    background-color:#8B0033;
    border-top:1px solid rgba(255,255,255,0.35);
    padding:0.8em 0.2em;
  }
  #extravak h2,
  #extravak p,
  #extravak ul,
  #extravak li{ color:#fff; }
  .list2{ color:#fff; }

  /* footer clean: geen “vage code” */
  #inhoudbalkbeneden{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.55em;
    padding:1.2em 0;
  }

  /* verberg jouwstats scripts (dit voorkomt die rare code) */
  #inhoudbalkbeneden script{
    display:none !important;
  }

  #inhoudbalkbeneden span{
    border-right:0 none transparent;
    border-bottom:1px solid rgba(255,255,255,0.65);
    padding:0.55em 0;
    width:100%;
  }

  .socialmedia{
    margin-left:0;
    height:28px;
    width:auto;
    display:block;
  }
}

/* extra klein */
@media screen and (max-width:400px){
  #hoofdmenu > li > a{
    font-size:0.92em;
    padding:0 0.22em;
  }

  .submenu > ul > li > a{
    padding:0.5em;
    width:5em;
  }

  .contact-img{ width:240px; }
}