/* Zorg dat padding en borders binnen de breedte vallen */
*, *::before, *::after {  box-sizing: border-box;}

/* Voorkom onbedoelde horizontale scrollbars */
html, body {  width: 100%; max-width: 1200px; margin: 0 auto; overflow-x: clip;}/* was max-width: 100% maar breder dan 2e helft, margin 0 auto = centreren - overflow-x:hidden; was confilct met sticky nav, daarom overflow-x: clip; */

html {
  scroll-padding-top: 80px; /* Zorgt voor ruimte boven het doel bij springen */
}

/* Automatisch naar één kolom springen op mobiel */
.container { display: flex;
             flex-direction: column; /* Stapelt elementen verticaal op mobiel (flex-direction: row; zet de items naast elkaar)*/
             gap: 16px;
             width: 100%;
             padding: 0 20px; /* Veilige marges aan de zijkanten */}

/* Afbeeldingen moeten automatisch kleiner worden als het scherm krimpt, zonder hun verhoudingen te verliezen. */
img {  max-width: 100%;
       height: auto;
       display: block;}
.icon-inline {display: inline;max-width: 100%;
       /* height: auto;                 'height' has no effect on an element with 'display: inline' */}
.icon-inline-pict1 {display: inline; width: 10%;align-items: center;}
.icon-inline-pict3 {display: inline; width: clamp(4em,6em,8em);}
.icon-inline-pict5 {display: inline; width: clamp(4em,6em,8em);}
.icon-inline-pictplusmin {display: inline; width: clamp(1.3em,1.5em,1.8em);}

.place-icon-zon {width:40em;display: flex; text-align: center;align-items: center;}
@media (max-width: 959px) {.place-icon-zon {width:100%;display: flex; text-align: center;align-items: center;font-size:0.8rem;}}
.place-icons-3 {width:100%;display: grid;grid-template-columns: 1fr 1fr 1fr;text-align: center;align-items: start;}
.place-icons-3-bottom {width:100%;display: grid;grid-template-columns: 1fr 1fr 1fr;text-align: center;align-items: end;}
.place-icons-3-top {width:100%;display: grid;grid-template-columns: 1fr 1fr 1fr;text-align: center;align-items: start;}
.place-icons-4-bottom {width:100%;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;text-align: center;align-items: end;}
.place-icons-4-top {width:100%;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;text-align: center;align-items: start;}
.place-icons-5 {width:100%;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;text-align: center;align-items: end;}/* align-items: end; = onderaan uitlijnen - align-items: start; = bovenaan - align-items: center; = midden)*/

.img-margin-top-bottom { border-radius: 8px;border:0.5px solid #333; max-width: 100%;margin-top:10px; margin-bottom:10px;
       height: auto;
       display: block;}
.logo{
  /* clamp(minimum, ideale_waarde, maximum) */
  width: clamp(200px, 308px, 308px);
  max-width: 200%;
  height: auto; /* Behoudt de juiste verhoudingen */
  display: block;}
@media (max-width: 959px) {.img-home {border-radius: 8px;width: 100%}}
@media (min-width: 960px) {.img-home {border-radius: 8px;width: 60%}}
.img-contact {width:65%; aspect-ratio: 16 / 10;object-fit: fill; float:right;border-radius: 8px;margin-top:25px;}

/* Lettergrootte: Gebruik min.16px (of 1rem) voor bodytekst. Als invulvelden (input) kleiner zijn dan 16px, zoomt iOS automatisch onhandig in wanneer de gebruiker erop tikt. */
body {  font-size: 0.95rem;font-family: Verdana, Arial, Helvetica;
        line-height: 1.7; /* Voldoende witruimte tussen regels text */}

/* Touch-targets: Knoppen en links moeten makkelijk aan te tikken zijn met een duim. Houd een minimale grootte aan van 44 × 44 pixels. */
.button {  display: inline-block;
           min-width: 44px;
           min-height: 44px;
           padding: 12px 24px;}
.button-hoog-laagseizoen { display: inline-block;
           width: 20em;max-width:100%;
           height: 8em;
           padding: 1em;background-color:lavender;border:2px solid #333;border-radius:2px;}
@media (min-width: 960px) {.button-hoog-laagseizoen {  display: none;}}
.button-hoog-laagseizoen a:link{  text-decoration:none; font-size:1rem;}
.full {width:100%;}
.pc {width:100%;}
@media (max-width: 959px)  {.pc {  display: none;}}

/* Ontwerp je CSS bij voorkeur mobile-first. Schrijf de basis-CSS direct voor het mobiele scherm en gebruik @media queries om stijlen toe te voegen wanneer het scherm breder wordt (tablet/desktop). */
/* 1. Dit geldt voor mobiel (standaard) */
.card-grid {  display: grid;
              grid-template-columns: 1fr; /* Één kolom op mobiel */}

/* 2. Dit geldt voor grotere schermen (vanaf tablets/laptops) */
@media (min-width: 960px) {  .card-grid {grid-template-columns: repeat(3, 1fr); /* Drie kolommen op desktop */  }}

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

/* Flexbox layout om de footer altijd onderaan te houden */
.page-layout {  display: flex;
                flex-direction: column;
                min-height: 100vh; /* Volledige schermhoogte */}

/* Gemeenschappelijke styling voor visualisatie */
header, nav, article, aside, footer {  padding: 20px;
                                       margin: 5px;
                                       border-radius: 8px;}

.main-header { background-color: white; color: white; }
.main-nav { background-color: #333; color: white;           position: sticky;top: 0;z-index: 1000; /* Zorgt ervoor dat de navbar boven de rest van de content blijft */}
.second-nav { background-color: #333; color: white;}
.content-article { background-color: white; flex: 1; } /* was background-color: #f4f4f4; */
.sidebar { background-color: #e2e2e2;}
.sidebar ul li {font-size: 1rem;margin-left:25px;}/* sidebar pratische info */
.content-article ul li {font-size: 1rem;margin-left:25px;}
.main-footer { background-color: #333; color: white; font-size:11px; text-align: left; margin-top: auto; }
.main-footer a{text-decoration: none;color: white;}
.rij-footer {display: flex;align-items: center;gap: 1px;width: 100%;}
.kolom-footer {flex: 1;padding: 15px; box-sizing: border-box;}


/* --- 1. MOBIELE LAYOUT (Standaard) --- */
.main-content {  display: flex;
                 flex-direction: column; /* Alles onder elkaar op mobiel */
                 flex: 1;}

/* --- 2. DESKTOP LAYOUT (Vanaf 768px breedte) --- */
@media (min-width: 960px) {
  .main-content {    flex-direction: row; /* Zet article en aside naast elkaar */
                     max-width: 1200px; /* breedte artikel + aside*/
                     width: 100%;
                     margin: 0 auto; /* Centreer de content op grote schermen */  }
  .content-article {    flex: 4; /* Neemt 80% van de breedte in (flex 3 - flex 1 = 75% + 25%*/  }
  .sidebar         {    flex: 1; /* Neemt 20% van de breedte in */    margin-left: 15px;  }}

/********** ZWEVENDE KNOP back to top (emoticon wijst naar boven) **********/
.floating-containermax768{
position: fixed;padding-right: 120px;right:0;bottom: 120px;}
.floating-buttonmax768{position: absolute;width: 75px;height: 75px;background: white;border:0px solid white;border-radius: 50%;font-size: 11px;color:white;text-align: center;line-height: 80px;cursor: pointer;}
.floating-buttonmax768 img{width:60px; height:60px; text-align: center;padding-top:12px;padding-left:10px;}

.floating-containermin768{
position: fixed;padding-right:140px;right:0;bottom: 120px;}
.floating-buttonmin768{position: absolute;width: 80px;height: 80px;background: white;border:0px solid white;border-radius: 50%;font-size: 11px;color:white;text-align: center;line-height: 80px;cursor: pointer;}
.floating-buttonmin768 img{width:65px; height:65px;text-align: center;padding-top:10px;padding-left:10px;}



/********** OPMAAK SECOND HEADER **********/
.header2 {
    display: flex;
    flex-direction: column; /* Stapel de rijen verticaal */
    gap: 0px;              /* Ruimte tussen de rijen */
    width: 100%;color: #2a2a2a;}
.header2 li{list-style-type:none;padding-top:5px;font-size: clamp(13px, 2vw, 13px);padding-right:5px;padding-left:5px;}
.header2 a{text-decoration: none;color:#2a2a2a;}
.header2 ul li ul {position: absolute;width: 17em;left: -999em;float: none;border-bottom: none;}
.header2 ul li:hover ul {left:auto; padding:10px;}/*afstand lijst 4 talen tov vlaggen */
.header2 ul li ul li {padding: 8px; background-color:white;}
.rij-header {
    display: flex;          /* Zet de kolommen horizontaal naast elkaar */
    align-items: center;    /* Verticaal centreren */
    gap: 1px;              /* Ruimte tussen de kolommen */
    width: 100%;}
.kolom-header {
    flex: 1;                /* Verdeel de ruimteLayout: geef beide kolommen gelijke breedte */
    padding: 15px;
    box-sizing: border-box; /* Zorgt dat padding de 50% breedte niet verpest */}
.afbeeldingen-container {display: flex;gap: 5px; /* Ruimte tussen de afbeeldingen */}
.afbeeldingen-container-links {display: flex;gap: 10px;margin-left: 40px; /* Ruimte tussen de afbeeldingen */}
.container-socials1 {display: flex;gap: 5px; /* Ruimte tussen de afbeeldingen */}
.container-socials2 {display: flex;gap: 5px; /* Ruimte tussen de afbeeldingen */}
.banner-home {  width: 80%;height: 120px;object-fit: fill;margin-left: auto;margin-right: auto;border-radius:12px;}
.banner-footer {  width: 100%;height: 120px;object-fit: fill;margin-left: auto;margin-right: auto;border-radius:12px;}

/********** OPMAAK SECOND NAV **********/
@media (min-width: 960px) {.second-nav{height:60px;margin-top:-20px;}}   /*hoogte van de zwarte balk*/
@media (min-width: 960px) {.second-nav li{float:left;list-style-type:none;padding-top:0px;}}   /*left=vlnr - geen dots of... - verticale positie binnen zwarte balk*/
@media (min-width: 960px) {.second-nav a{text-decoration: none;color:white;padding:5px;margin-top:5px;margin-bottom:5px;margin-right:12px;margin-left:23px;border-radius:10px;}}
@media (min-width: 960px) {.second-nav a:hover, .second-nav a:active{background-color:white;color: #2a2a2a;}}
@media (min-width: 960px) {.second-nav .huidige_pagina{background-color:white;color: #2a2a2a;}}
@media (min-width: 960px) {.second-nav ul li ul {position:absolute;width: 17em;left: -999em;float: none;}}
@media (min-width: 960px) {.second-nav ul li:hover ul {left:auto; padding:13px;}}   /*positie uitklapmenu tov zwarte balk*/									  
@media (min-width: 960px) {.second-nav ul li ul li{padding-left: 0px;padding-right: 15px;padding-top: 12px;padding-bottom: 12px;
                             margin-left:5px;background-color:white;width:330px;border:1px solid grey;border-radius:8px;}}   /*inhoud, kleur, breedte en rand uitklapmenu*/	
@media (min-width: 960px) {.second-nav ul li ul li a{text-decoration: none;color:#2a2a2a;}}
/********** ZOEKVELD SECOND NAV **********/
@media (min-width: 960px) {.zoekveldnav  {width:250px;border:0px;padding:0;}} /** opmaak zoekvak in zoekkkader **/
@media (min-width: 960px) {.invoerveldnav{width:200px;height:80px;border:1px solid grey;}} /** opmaak binnen zoekkader **/
@media (min-width: 960px) {.invoerveldnav::placeholder {font-size:14px;font-style: italic;color:black;opacity: 1;}}/* grootte en kleur tekst placeholder, opacity voor browser-consistentie */
@media (min-width: 960px) {.zoekennav2    {width:65px;height:20px;border:1px solid grey;}} /** opmaak veld 'zoeken' **/
@media (min-width: 960px) {.second-nav .klapzoeken    {list-style-type:none;margin-left:40px;margin-top:-5px;}}  /** positie zoekknop in zwarte balk **/
@media (min-width: 960px) {.second-nav .klapzoeken img {width:25px; height:25px;background: white;border:0px solid white;border-radius: 50%;}}
@media (min-width: 960px) {.second-nav .klapzoeken img:hover {transform:scale(4);transition-duration:0s;}}
@media (min-width: 960px) {.second-nav .klapzoeken  li {width:305px;height:130px;border:2px solid grey;position:absolute;padding:5px;margin-top:8px;margin-left:-50px;float: none;}} 

/*NAVINDEX: index, google, campercontact, camperstop, 2 QR-pagina's */
@media (min-width: 960px) {.navindex{height:75px;background-color:#333;margin-top:-20px;text-align:center;color: white;padding-top:0px; padding-bottom:3px;word-spacing:5px;}}
@media (max-width: 959px) {.navindex{height:100px;background-color:#333;margin-top:-18px;text-align:center;color: white;padding-top:4px; padding-bottom:3px;word-spacing:5px;}}

/* NAV main */

.navbar{display:flex;justify-content:space-between;align-items:center;
background-color:#2e4a62;/*Voorbeeldcampingblauw/groentint=#2e4a62*/
color:white;padding:15px 20px;position:relative;z-index:100;}

/*Verbergalletechnischecheckboxes*/
.menu-toggle,.sub-toggle{display:none;}

/*---MOBIELEHAMBURGERICOON---*/
.hamburger{
display:flex;flex-direction:column;justify-content:space-between;width:30px;
height:21px;cursor:pointer;z-index:1000;}

.bar{height:3px;width:100%;background-color:white;border-radius:3px;transition:all0.3sease;}

/* --- MOBIELE NAVIGATIE LINKS (SLIDE-OUT) --- */
.nav-links {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background-color: #1a2a38;
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 80px 10px 20px 10px;
  overflow-y: auto; /* Zorgt dat je kunt scrollen binnen het menu als het lang is */
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
}

/* Links & Titels styling */
.nav-links li a, .dropdown-title {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #283e52;
}

.direct-link {border-bottom: 1px solid #283e52;}
.arrow {font-size: 0.7rem;transition: transform 0.3s ease;}

/* --- ACCORDEON SUB-MENUS (STANDAARD DICHT) --- */
.submenu, .submenu-xtra {
  list-style: none;
  background-color: #121e28;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out;
}

.submenu li a {
  padding: 10px 15px 10px 30px; /* Extra inspringing voor sub-items */
  font-size: 0.95rem;
  border-bottom: 1px solid #1c2d3d;
}

.submenu-xtra li a {
  padding: 3px 15px 5px 30px; /* aangepast aangezien meer items bij praktische info */
  font-size: 0.9rem;
  border-bottom: 1px solid #1c2d3d;
}

/* Zoekveld specifieke styling binnen het menu */
.search-box-container {
  padding: 15px 20px;
}
.invoerveldnav {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.zoekennav1 {
  width: 100%;
  padding: 8px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#form-zoeken {border: none;}/* enkel voor dit formulier geen border, formulieren Bravenet nog wel dashed*/

/* --- MOBIELE OVERLAY (= over pagina wanneer wordt uitgeklapt --- */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* --- INTERACTIE / TRIGGERS OP MOBIEL --- */

/* Open het slide-out menu */
.menu-toggle:checked ~ .nav-links {transform: translateX(0);}

/* Activeer overlay */
.menu-toggle:checked ~ .menu-overlay {opacity: 1;pointer-events: auto;}

/* Open een sub-menu accordeon */
.sub-toggle:checked ~ .submenu {max-height: 450px; /* Ruim genoeg instellen voor de langste lijst (Fit & Fun) */}
.sub-toggle:checked ~ .submenu-xtra {max-height: 1000px; /* Langer voor de lijst praktische info */}

/* Draai het pijltje bij opengeklapt sub-menu */
.sub-toggle:checked ~ .dropdown-title .arrow {transform: rotate(180deg);}

/* Hamburger animatie naar een X */
.menu-toggle:checked ~ .hamburger .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle:checked ~ .hamburger .bar:nth-child(2) { opacity: 0; }
.menu-toggle:checked ~ .hamburger .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


/* --- RESPONSIVE DESKTOP RESET (Vanaf 992px) --- */
@media (min-width: 992px) {.hamburger, .menu-overlay {display: none;}
.nav-links {position: static;width: auto;height: auto;flex-direction: row;padding: 0;transform: translateX(0);background-color: transparent;overflow: visible;}
.nav-links li a, .dropdown-title {padding: 15px 20px;border-bottom: none;font-size: 1rem;}
.direct-link {border-bottom: none;}
.dropdown {position: relative;}

  /* Op desktop tonen we het sub-menu als een klassieke zwevende dropdown bij hover */
.submenu, .submenu-xtra{position:absolute;top:100%;left:0;width:220px;background-color:#2e4a62;max-height:0;box-shadow:0px8px16pxrgba(0,0,0,0.15);}

/*Openenbijhoveropdesktopinplaatsvanklik*/
.dropdown:hover.submenu{max-height:500px;overflow:visible;}

  .submenu li a {
    padding: 12px 20px;
    border-bottom: 1px solid #3a5c7a;
  }

  /* Pijltje overbodig of anders gedragen op desktop */
  .dropdown:hover .dropdown-title .arrow {
    transform: rotate(180deg);
  }
}

/*FOTO'S DE CAMPING*/
@media (max-width: 959px) {.container-de-camping {max-width: 100%;margin: 0 auto;}}
@media (min-width: 960px) {.container-de-camping {max-width: 75%;margin: 0 auto;}}
.rij-de-camping {display: flex;align-items: flex-start;justify-content: space-between;gap: 20px;margin-bottom: 30px;}
.rij-de-camping.omgekeerd {flex-direction: row-reverse;}/* Draait de volgorde van tekst en foto om voor rij 2 en 4 */
.tekst-camping {flex: 1.2;font-size: 1rem;}
.tekst-camping p {margin-bottom: 10px;font-size:1rem;}
.afbeelding {flex: 1;}
.afbeelding img {width: 100%;height: auto;display: block;border-radius:8px;}
@media (max-width: 650px) {.rij-de-camping, .rij-de-camping.omgekeerd {flex-direction: column;}}/* Zorgt dat alles netjes onder elkaar komt op mobiele schermen */

/*FOTO'S EN VIDEO'S DE CAMPING*/
@media (max-width: 959px) {.foto-video img, .foto-video iframe{width:95%;height:auto;}}
@media (min-width: 960px) {.foto-video img, .foto-video iframe{width:75%;height:auto;}}
.foto-video p {margin-bottom: 3rem;font-size:1rem;letter-spacing:2px;}

/* GRID 2 GELIJKE KOLOMMEN - Taalkeuze index-pagina */
@media (max-width: 959px) {.container-index {width:100%;margin: 0 auto;display: grid;grid-template-columns: 1fr 1fr; /* of repeat(1, 1fr); -> 2 gelijke kolommen */gap: 15px;}}
@media (min-width: 960px) {.container-index {width:60%;margin: 0 auto;display: grid;grid-template-columns: 1fr 1fr; /* of repeat(1, 1fr); -> 2 gelijke kolommen */gap: 25px;}}
.item-index-rechts {margin-right:0px;padding: 0px}
.item-index-links {float:left;padding: 0px}
.img-taalkeuze {border-radius: 8px;width: 100%;border:1px solid #333;}
@media (min-width: 960px) {.img-taalkeuze:hover{transform:scale(1.08);transition-duration:1s;position:relative;}}


/* GRID 3 GELIJKE KOLOMMEN - reviews */
@media (max-width: 959px) {.container-reviews {width:100%;margin: 0 auto;display: grid;grid-template-columns: 1fr 1fr;gap: 1em;}}
@media (min-width: 960px) {.container-reviews {width:100%;margin: 0 auto;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 1em;}}
.img-reviews {width: 80%;border:1px solid grey;} /* width="185" height="135" */
@media (min-width: 960px) {.img-reviews:hover{transform:scale(1.08);transition-duration:1s;position:relative;}}

/* Desktop lay-out: Schermen breder dan 768px */
@media (min-width: 960px){.container2kolommen {flex-direction: row; /* Zet de kolommen naast elkaar */}
                          .kolom-2kolommen {width: 50%; /* Elk krijgt nu netjes de helft van de ruimte */}}
.kolom-2kolommen{width:50%;}
.rij-2kolommen{width:100%;height: 200px;}
/* Container: Standaard verticaal gestapeld (Mobiel) */
.container2kolommen {display: flex;flex-direction: column;gap: 16px;width: 100%;padding: 0 20px;box-sizing: border-box; /* Zorgt dat padding de breedte niet overschrijdt */}
.kolom-2kolommen {width: 100%;} /* Kolom: Standaard volledige breedte op mobiel */
.rij-2kolommen {width: 100%;min-height: 200px;} /* Rij: Flexibele hoogte in plaats van vaste 200px (voorkomt overflow) */
@media (min-width: 960px) {.container2kolommen {flex-direction: row; /* Zet de kolommen naast elkaar bij schermen breder dan 768px*/  }
.kolom-2kolommen {width: 50%; /* Elk krijgt nu netjes de helft van de ruimte */}}




/* GRID 2 ONGELIJKE KOLOMMEN (1-4 op pc; 1-3 op mobiel -Prijslijst camping vervanging tabel */
@media (max-width: 959px) {.grid-container-prijslijst {
  display: grid;
  grid-template-columns: 1fr 3fr; /* VB Drie kolommen met ongelijke breedte, waarde 1e, 2e en 3e kolom, vb.1fr 2fr(=dubbel van 1e) 100px; */
  gap: 16px;  }}
@media (min-width: 960px) {.grid-container-prijslijst {
  display: grid;
  grid-template-columns: 1fr 4fr; /* VB Drie kolommen met ongelijke breedte, waarde 1e, 2e en 3e kolom, vb.1fr 2fr(=dubbel van 1e) 100px; */
  gap: 16px;  }}
.brede-kolom-prijslijst {grid-column: span 2; /* Dit item neemt nu de ruimte van 2 kolommen in */background-color: lavender;padding-top:10px;padding-bottom:10px;}
.grid-item-prijslijst {padding: 0px;background-color: white;width: 100%}
.grid-item-prijslijst ul li{font-size: 1rem;margin-left:25px;}
.link-zonder-opmaak a:link{text-decoration:none;color:#2a2a2a;}

.visvergunning {display: grid;grid-template-columns: repeat(4, 1fr);max-width: 100%;font-size: clamp(0.8rem, 2vw, 1rem);text-align: center;border-top: 1px solid grey;border-left: 1px solid grey;}
.kolom-vis {border-right: 1px solid grey;border-bottom: 1px solid grey;padding: 10px 15px;display: flex;align-items: center;justify-content: center;gap: 5px;}
.kolom-vis-header {font-weight: bold;}

/********** ASIDE **********/
@media (min-width: 960px) {aside{width:200px;float:left;font-size:13px;padding-left:25px;padding-right:15px;padding-top:5px;padding-bottom:5px;}}
@media (max-width: 959px)  {aside{display: none}}
aside ul li {margin-left:-20px;padding-top:2px;padding-bottom:2px;}
aside ul li a:link, aside ul li a:visited, aside ul li a:active, aside ul li a:hover{text-decoration:none;color:#2a2a2a;}
aside ul li ul li a:link, aside ul li ul li a:visited, aside ul li ul li a:active, aside ul li ul li a:hover{text-decoration:none;color:#2a2a2a;}	

/*18/11/25: fixed-aside enkel nog bij mentions legales, mag dan weg */
.fixed-aside {width:200px;position:fixed;float:left;font-size:12px;font-weight:bold;padding-left:25px;padding-right:15px;padding-top:2px;padding-bottom:2px;}
.fixed-aside ul li{margin-left:-15px;padding-top:2px;padding-bottom:2px;}
.fixed-aside a:link, .fixed-aside a:visited, .fixed-aside a:active{text-decoration:none;color:#2a2a2a;}
.fixed-aside a:hover{text-decoration:underline;color:#2a2a2a;}

/* .home = opmaak balk highlights in aside */
.home {text-align:center;width:200px;float:left;font-size:13px;padding-left:35px;padding-right:5px;padding-top:5px;padding-bottom:5px;}
.home a:link, .home a:visited, .home a:active{text-decoration:none;color:#2a2a2a;}/* is enkel van toepassing als er terug tekst in zou komen */
.home a:hover {text-decoration:underline;color:#2a2a2a;} /* is enkel van toepassing als er terug tekst in zou komen */

/********** ARTICLE: OPMAAK LIJSTEN INDIEN NIETS AFWIJKEND **********/
article ul li{padding-bottom:3pt;margin-left:0px;font-size: clamp(13px, 2vw, 13px);}  
article a:link, article a:visited, article a:active, article a:hover{text-decoration:underline;color:#2a2a2a;}
article ul li a:link, article ul li a:visited, article ul li a:active{text-decoration:none;color:#2a2a2a;}
article ul li a:hover{text-decoration:underline;color:#2a2a2a;}

/********** ARTICLE met aside **********/
@media (min-width: 960px) {.content-article{float:right;padding-left:15px;padding-right:10px;padding-top:15px;margin-right:10px;}}
@media (max-width: 959px)  {article{float:left; padding-left:10px;padding-right:10px;padding-top:5px;margin-left:25px;margin-right:10px;border-left:0px;}}

/********** ARTICLE opmaak kader TROEVEN **********/
.troeven li{font-size: 1rem;padding-bottom:10px;line-height:1.6rem;}
.troeven li a:link, .troeven li a:visited, .troeven li a:active, .troeven li a:hover{text-decoration:underline;color:#2a2a2a;
							font-size:1rem;line-height:15pt;}
@media (min-width: 960px) {article .troeven{
	margin-left:5px;margin-top:10px;
	padding-top:15px;padding-bottom:15px;padding-right:20px;padding-left:30px;
	width:85%;
	border:1px solid black;border-radius:15px;
	background: #ffffff; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #7d8f87 100%); /* FF3.6-15 */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#7d8f87)); /* Chrome4-9,Safari4-5 */
	background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#7d8f87 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#7d8f87 100%); /* Opera 12+ */
	background: radial-gradient(ellipse at center,  #ffffff 0%,#7d8f87 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}}
@media (max-width: 959px) {article .troeven{
	margin-left:0px;
	padding-top:15px;padding-bottom:15px;padding-right:20px;padding-left:30px;
	width:90%;
	border:1px solid black;border-radius:15px;
	background: #ffffff; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #7d8f87 100%); /* FF3.6-15 */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#7d8f87)); /* Chrome4-9,Safari4-5 */
	background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#7d8f87 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#7d8f87 100%); /* Opera 12+ */
	background: radial-gradient(ellipse at center,  #ffffff 0%,#7d8f87 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}}



/********** VERHUUR **********/
.h1{font-family: Verdana, Arial, Helvetica;color: #2a2a2a;font-size:1.5rem;font-weight:bold;text-align:center;}/********** h1 gecentreerd **********/
.img-float {float: left;margin-right: 20px; /* ruimte tussen de afbeelding en de tekst */margin-bottom: 10px;width: 400px;border-radius:8px;}
@media (min-width: 960px) {.img-float:hover{transform:scale(2.5);transition-duration:0s;position:relative;left:145px;top:60px;}}
@media (max-width: 959px) {.img-float-right {float: right;margin-left: 20px; /* ruimte tussen de afbeelding en de tekst */margin-bottom: 10px;width: 35%;}}
@media (min-width: 960px) {.img-float-right {float: right;margin-left: 20px; /* ruimte tussen de afbeelding en de tekst */margin-bottom: 10px;width: 25%;}}
.kop-verhuur {line-height: 1.6;word-spacing:2px;font-weight:normal;padding-left:15px;} /* eerste foto + tekst verhuur (was h3) */
.prijstabelkleurhoofd          {font-size:0.85rem;border: 0.2px solid #e2e2e2;gap: -5px;padding-left:5px;text-align:center; background-color:lavender;}
.prijstabel-verhuur-3-1-1-1-1-1{display: grid;grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr;}/********** PC **********/
.prijstabel-verhuur-3-1-1-1{display: grid;grid-template-columns: 2fr 1fr 1fr 1fr;}/********** MOBIEL **********/
.prijstabel-verhuur-2-1-1-1-1-1{display: grid;grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;}/********** prijstabellen PC **********/
.prijstabelkleurleft           {font-size:0.85rem;border: 0.2px solid #e2e2e2;gap: -5px;padding-left:5px;background-color:lavender;}
.prijstabelkleurright          {font-size:0.85rem;border: 0.2px solid #e2e2e2;gap: -5px;padding-left:5px;text-align:right; background-color:lavender;}
.prijstabelkleur               {font-size:0.85rem;border: 0.2px solid #e2e2e2;gap: -5px;text-align:center; background-color:lavender;}
.prijstabelleft                {font-size:0.85rem;border: 0.2px solid #e2e2e2;gap: -5px;padding-left:5px;text-align:left;}
.prijstabelleft ul li          {font-size:0.85rem;padding-left:5px;text-align:left;}
.prijstabel                    {font-size:0.85rem;border: 0.2px solid #e2e2e2;gap: -5px;text-align:center;}
.prijstabelkleurlefthoofd      {font-size:0.85rem;border: 0.2px solid #e2e2e2;gap: -5px;padding-left:5px;text-align:left; background-color:lavender;}
.lagerij {font-size:1px;height:4px;}
.prijstabelkleurhoofdbig  {width:auto;font-size:20px;border:2px solid grey;padding-left:5px;padding-bottom:10px;padding-top:10px;text-align:center; background-color:lavender;}
.xtrafotos-verhuur {display:grid;grid-template-columns: 1fr 1fr 1fr;max-width: 100%;gap:5px;}
.xtrafotos-verhuur-2 {display:grid;grid-template-columns: 1fr 1fr;max-width: 100%;gap:5px;}
.xtrafotos-verhuur-3 {display:grid;grid-template-columns: 1fr 1fr 2fr;max-width: 100%;gap:5px;}/*bij paillotte en willerby 1 rij met 3 foto's*/
.scale2_5, .scale2_5right, .scale2_5left{border-radius:8px;}
@media (min-width: 960px) {.scale2_5:hover{transform:scale(2.5);transition-duration:0s;position:relative;top:60px}}
@media (min-width: 960px) {.scale2_5right:hover{transform:scale(2.5);transition-duration:0s;position:relative;right:145px;top:60px}}
@media (min-width: 960px) {.scale2_5left:hover{transform:scale(2.5);transition-duration:0s;position:relative;left:145px;top:60px;}}
.zie-ook-verhuur {display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;max-width: 100%;gap:5px;font-size:0.8rem;}

/********** TABEL wat waar in een notendop **********/
@media (min-width: 960px) {.tabelwatwaar    {width:100%;display: grid;grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;font-size:0.85rem;text-align:center;
                  padding-top:5px;border: 0.2px solid #e2e2e2;gap: 15px;line-height: min(1.5);}}
@media (max-width: 959px) {.tabelwatwaar    {width:100%;display: grid;grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;font-size:0.6rem;text-align:center;
                  padding-top:5px;border: 0.2px solid #e2e2e2;gap: 5px;line-height: min(1.5);}}
.tabelwatwaar img{text-align:center;display:inline;}


/********** button voor titels article fit en fun en verhuur **********/
.buttononclick {background-color: white;font-family: Arial;text-decoration:none;font-size:0.9rem;color:#2a2a2a;border: 1px solid black;border-radius:10px;padding-top:8px;padding-bottom:8px;padding-left:30px;padding-right:30px;text-align:center;display: inline-block;cursor: pointer;}

/********** ARTICLE Fit en Fun **********/
@media (max-width: 959px) {.width80proc{width:100%;}}
@media (min-width: 960px) {.width80proc{width:80%;}}

@media (max-width: 959px) {.fitenfunhoofdblok {display:grid;grid-template-columns: 1fr;gap:10px;padding:10px;border:2px solid grey;background-color:#e9e9e9;}}
@media (min-width: 960px) {.fitenfunhoofdblok {width: 100%;display:grid;grid-template-columns: 1fr 2fr;gap:20px;padding:10px;border:4px solid grey;background-color:#e9e9e9;}}

.fitenfunsubmenu {border:1px solid grey;}

@media (max-width: 959px) {.fitenfunsubmenuraster {display:grid;grid-template-columns: 1fr;gap:10px;padding:10px;}}
@media (min-width: 960px) {.fitenfunsubmenuraster {display:grid;grid-template-columns: 1fr 2fr;gap:20px;padding:10px;}}
.fitenfunsubmenuraster a:link, .fitenfunsubmenuraster a:visited, .fitenfunsubmenuraster a:active{text-decoration:none;color:#2a2a2a;}
.fitenfunsubmenuraster a:hover{text-decoration:underline;color:#2a2a2a;}

@media (max-width: 959px) {.fitenfunsubmenuresto {padding: 10px;display: grid;grid-template-columns: 1fr; gap: 1.5rem;align-items: start;}}
@media (min-width: 960px) {.fitenfunsubmenuresto {padding: 10px;display: grid;grid-template-columns: 1fr 2fr; gap: 1.5rem;align-items: start;}}
.gridrestopict {display: grid;grid-template-columns: auto 1fr;gap: 1.25rem 1.25rem;align-items: start;}
.pictfitenfunresto {width: 30px;height: 30px;justify-self: center;margin-top: -0.15em;aspect-ratio: 1 / 1;object-fit: fill;}
.tekstresto {line-height: 1.4;}
.tekstresto a:link, .tekstresto a:visited, .tekstresto a:active{text-decoration:none;color:#2a2a2a}
.tekstresto a:hover {text-decoration:underline;color:#2a2a2a;}

.vervormd16-10{width: 100%;aspect-ratio: 16 / 10;object-fit: fill;}/*verhouding 16/9 forceren + object-fit: fill; = verhouding forceren / object-fit: cover; = bijsnijden*/
.vervormd16-10pc{width: 100%;aspect-ratio: 16 / 10;object-fit: fill;}
@media (max-width: 959px) {.vervormd16-10pc{display:none;}}
.imgresto img {width: 100%;height: auto;display: block;}
.spiegelresto {width: 100%;aspect-ratio: 16 / 10;object-fit: fill;opacity:0.2;transform:rotateX(180deg);margin-top:-25px;}
@media (max-width: 959px) {.imgresto .spiegelresto {display:none;}}

.fitenfunblokpictogrammen {line-height:40px;}
.fitenfunblokpictogrammen a:link, .fitenfunblokpictogrammen a:visited, .fitenfunblokpictogrammen a:active{text-decoration:none;color:#2a2a2a;}
.fitenfunblokpictogrammen a:hover{text-decoration:underline;color:#2a2a2a;}

.tekstvoorpicto {padding:10px;}/*bij knooppunten staat nog extra tekst in blok pictrogrammen*/

.pictfitenfun {display: inline-block;float:left; margin-left:10px;width:30px;height:30px;aspect-ratio: 1 / 1;object-fit: fill;}

@media (max-width: 959px) {.kajak {display: grid;grid-template-columns: 2fr 1fr 1fr 1fr;gap: 0px;width: 100%;margin-bottom:5px;}}
@media (min-width: 960px) {.kajak {display: grid;grid-template-columns: 2fr 1fr 1fr 1fr;gap: 0px;width: 80%;margin-bottom:5px;}}
.prijzen-kajak {font-size:0.95rem;border: 0.5px solid grey;gap: 5px;text-align:center;padding:15px;}

.tableresto {border:1px solid grey;} /*WEG!!!!!!!!!!!!!!!!!!!!!!!!!*/
.tableresto td {width:auto;padding-left:5px;padding-right:10px;padding-top:10px;padding-bottom:10px;vertical-align: top;}
.tableresto a:link, .tableresto a:visited, .tableresto a:active{text-decoration:none;color:#2a2a2a;}
.tableresto a:hover{text-decoration:underline;color:#2a2a2a;}

.groen {color:#5D9C34;font-weight:bold;}
.blauw {color:#46a9cd;font-weight:bold;}
.rood {color:#FC0404;font-weight:bold;}
.oranje {color:#FF8A33;font-weight:bold;}
.geel {color:#F6E00C;font-weight:bold;}

.hr-groen  {height:12px;border-width:0;background-color:#5D9C34;margin-top:0px;margin-bottom:-2px;}
.hr-blauw  {height:12px;border-width:0;background-color:#46a9cd;margin-top:0px;margin-bottom:-2px;}
.hr-rood   {height:12px;border-width:0;background-color:#FC0404;margin-top:0px;margin-bottom:-2px;}
.hr-oranje {height:12px;border-width:0;background-color:#FF8A33;margin-top:0px;margin-bottom:-2px;}
.hr-geel   {height:12px;border-width:0;background-color:#F6E00C;margin-top:0px;margin-bottom:-2px;}


/********** ARTICLE zonder aside **********/
.articlenoaside{width:80%;margin: 0 auto;padding-left:10px;padding-right:10px;padding-top:5px;border-left:0px;}

/********** ARTICLE zonder aside voor reviews**********/
.articlereviews{width:92%;float:left;padding-left:100px;padding-right:100px;padding-top:5px;margin-left:25px;margin-right:10px;border-left:0px;}
.articlereviews img{margin-right:50px;margin-bottom:10px;}

/********** ARTICLE zonder aside voor reserverings- en andere formulieren met code via Bravenet **********/
.articlereservation{width:93%;float:left;padding-left:15px;padding-right:10px;padding-top:5px;margin-right:10px;
					font-size:15px;font-family:Arial, Helvetica, sans-serif;color:#000000;border-left:0px}
.articlereservation ul li{padding-bottom:3pt;margin-left:-20px;font-size:13px;}  
.articlereservation a:link{text-decoration:none;color:#2a2a2a;}
.articlereservation a:hover{text-decoration:underline;color:#2a2a2a;}
.articlereservation ul li a:link{text-decoration:none;color:#2a2a2a;}
.articlereservation ul li a:hover{text-decoration:underline;color:#2a2a2a;}
/* FORMULIER extra tov Bravenet voor kader */
form {border-width: 1px;border-style: dashed;border-color: #cccccc;padding: 15px;width: 100%;}

/********** HEADING ELEMENTS EN ANDERE SPECIFIEKE OPMAAK **********/
h1{font-family: Verdana, Arial, Helvetica;color: #2a2a2a;font-size:1.5rem;font-weight:bold;}
h2{font-family: Verdana, Arial, Helvetica;color: #2a2a2a;font-size:1.15rem;font-weight:bold;}
h3{font-family: Verdana, Arial, Helvetica;color: #2a2a2a;font-size:1rem;line-height:1.3;word-spacing:2px;font-weight:normal;padding-left:15px;}
h4{font-family: Verdana, Arial, Helvetica;color: #2a2a2a;font-size:1rem;font-weight:bold;margin-top:20px;margin-bottom:10px;}
h5{font-family: Verdana, Arial, Helvetica;color: #2a2a2a;font-size:1.45px;font-weight:bold;border-bottom:3px solid black;border-left:3px solid black;padding-bottom:5px;}
/*h5 enkel voor titels article fit en fun*/
.padding15{padding:15px;}
.padding8{padding:8px;}
.alignright{text-align:right;}
.backtotop{background-color: white;border: 1px solid black;border-radius:10px;padding-top:1px;padding-bottom:3px;padding-left:5px;padding-right:5px;float:right;}
.backtotop a:link{font-family: Arial;text-decoration:none;font-size:13px;color:#2a2a2a;}
.pictcenter img{text-align:center;}

/******************************/
/********** TABELLEN **********/
/******************************/

/********** TABEL standaard **********/
table{width:100%; border-collapse:collapse;}
th, td{width:98px; height:20px;padding-left:5px;}

/********** TABEL stylenoaside **********/
.tablenoaside {width:100%; border-collapse:collapse;overflow:scroll;}
.tablenoaside th, .tablenoaside td{width:auto;height:20px;padding-left:5px;}


.trefwoord{font-family: Verdana, Arial, Helvetica;color:white;font-size:clamp(0.2rem, 1vw, 0.5rem);font-style: italic;}
.trefwoord a:link, .trefwoord a:visited, .trefwoord a:active{text-decoration:none;color:white}


/********** LIJNEN **********/
hr            {border: none;height: 1px; background-color: #333333; margin-top: 20px; margin-bottom:20px;}
hr.gestippeld {border: none; border-top: 3px dotted #8c8b8b;}
hr.streepjes  {border: none; border-top: 1px dashed #8c8b8b;}
hr.dubbel     {border: none; border-top: 3px double #333333;  height: 3px;}
hr.centraal   {border: none; height: 2px; background-color: #007bff;  width: 50%;  margin: 20px auto;}/*4. Kortere lijn in het midden van de pagina*/






/********** DISPLAY NONE OP HET EINDE (dan niet overuled door andere code) **********/
@media (max-width: 959px) {.header2{display: none}}
@media (min-width: 960px) {.header1{display: none}}

@media (max-width: 959px) {.floating-buttonmin768{display: none}}
@media (min-width: 960px) {.floating-buttonmax768{display: none}}

@media (max-width: 959px) {.second-nav{display: none}}
@media (min-width: 960px) {.main-nav{display: none}}

@media (max-width: 959px) {.tabel-verhuur-pc{display: none}}
@media (min-width: 960px) {.tabel-verhuur-mobiel{display: none}}

@media (max-width: 767px) {.tabel-adres-pc{display: none}}
@media (min-width: 768px) {.tabel-adres-mobiel{display: none}}/*vanaf 768 kan foto wel naast adres*/

@media (max-width: 767px) {.symbolen-pc{display: none}}
@media (min-width: 768px) {.symbolen-mobiel{display: none}}/*vanaf 768 ok*/

/********** SOCIALS (onderaan op home + contact) **********/
@media (max-width: 959px) {.container-socials2 {display: none}}
@media (min-width: 960px) {.container-socials1 {display: none}}