/* reset.css */
/* https://garden.bradwoods.io/notes/css/reset */
*, 
*::before, 
*::after {
  /* Use a more intuitive box-sizing model */
  box-sizing: border-box;
  /* https://www.youtube.com/watch?v=cH8VbLM1958 */
  min-width: 0;
  /* Remove all margins and padding */
  margin: 0;
  padding: 0;

}

/* Only show focus outline when the user is tabbing (not when clicking) */
/* Except for input and textarea */
*:focus:not(:is(input, textarea)) {
    outline: none;
}
*:focus-visible {
  outline: 1px solid blue;
}
html {
  /* Allow percentage-based heights */
  /* Setting width: 100% isn't required because it is a default for block-level elements (html and body are block level) */
  height: 100%;
  /* Sets font-size to 10px. 
  Percent units are used to ensure font will scale if user has a custom font-size browser setting (for ally).
  Using 10px as the base to make it easy to set font sizes in elements. Example: for 16px, use 1.6rem, for 32px, use 3.2rem, ...  */
  font-size: calc(100% / 16 * 10);
  line-height: 1.5;
  /* Prevent the browser from synthesizing missing typefaces */
  font-synthesis: none;
  font-smooth: always;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* Prevent mobile browsers increasing font-size */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  color: black;
}
body {
  height: 100%;
  /* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */
  overscroll-behavior: none;
  /* UI controls color (example: range input) */
  accent-color: black;
  /* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs  */
  background: white;
}
p {
  /* Prevents orphans (ensures the final line of text has at least two words). */
  text-wrap: pretty;
  /* Avoid text overflow */
  overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  /* Stronger effect than 'pretty'. Attempts to make each line of text the same length */
  text-wrap: balance;
}
strong {
  overflow-wrap: break-word;
}
/* Remove unintuitive behaviour such as gaps around media elements.  */
img, picture, video, canvas, svg, iframe {
  display: block;
}
input,textarea,button,button:disabled {
  font: inherit;
  color: inherit;
  border: none;
  border-radius: 0;
  background: none;
}
fieldset {
    border: none;
}
a {
  text-decoration: none;
  color: inherit;
}
ul, ol {
  list-style: none;
}


/* Kleurenpalet */
:root {
   --donkerblauw: #233e85;
   --lichtblauw: #dbebf6;
   --lichtblauw2: #e5f0f8;
	--lichtgroen: #caeacb;
	--donkergroen: #3a8d3b;
   --geel: #ffe4a9;
  --main-color: #4b76cc;
  --main-color-light: #f0faff;
  --main-color-dark: #0067b2;
  --inactive-button-bg: #c9c9c9;
  --red: #ed1c24;
  --black: #000000;
  --white: #ffffff;
  --green: #29af58;
  --brown: #b27036;
  --blue: #29abe2;
  --yellow: #ffb831;
  --gray-bg: #d7d7d7;
  --inactive: #b7b7b7;
	}

/* sticky footer, https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Sticky_footers */
.hvb-wrapper {min-height: 100%;display: grid;grid-template-rows: auto 1fr auto;}
/* general design */
body {font-family: "Chivo", sans-serif;}
/* headings */
h1, .h1 {font-size:4.2em;font-weight:700;line-height:1.2em}
h1 span {font-size:.75em;font-style:italic;font-weight:normal}
h2, .h2 {font-size:2.6em;font-weight:700}
h3, .h3 {font-size:1.8em;font-weight:700}
h4, .h4 {font-size:1.6em;font-weight:700}
p, li {font-size:1.6em;line-height:1.6em}
p.chapeau {font-weight:bold;font-size:1.8em;margin-bottom:1em }

/* header home */
.hvb-hero {background:#fff url("/img/home-header.jpg") no-repeat center 30%;background-size:cover;height:40vh;padding-top:100px}
.hvb-hero h1 {background-image: url("/img/hulp-voor-bestuivers.svg");background-repeat: no-repeat;background-size:contain;width:30vw;max-width:479px;min-width:300px;height:222px;margin:0 auto}
.hvb-hero h1 span {display:none}

.hbv-content.groene-maatregelen {background:var(--lichtblauw) url("/img/groene-maatregelen/bg.gif") no-repeat center bottom;background-size:contain;padding-bottom:500px}
@media (max-width: 1340px) {.hbv-content {padding:0 20px 300px}}
/* blocks home */
.hbv-cards {background: #fafafa;}
.hbv-cards-container {max-width:1280px;margin:0 auto;padding:6.4em 0}
.hbv-home {display: flex;flex-wrap:wrap;justify-content:center;gap: 6.4em 3.2em;}
.hbv-card {background:var(--white);min-width:240px;max-width:400px}
.hbv-card a {display:block;border-radius: 4px;padding-bottom:32px}
.hbv-card a span {background-size:cover;background-repeat:no-repeat;background-position: center top;display:block;width:100%;height:20vw;max-height:400px;min-height:320px;border-top-left-radius: 4px; border-top-right-radius: 4px}
.hbv-card h2 {text-align:center;font-size:2em;font-weight:400;color: var(--main-color);margin:24px 0}
.hbv-card p {margin:0 24px}

/* background images */
.jth {background-image: url("/img/card-jouw-tuin-helpt.jpg")}
.hdb {background-image: url("/img/card-helpdesk-bijenlandschap.jpg")}
.wwb {background-image: url("/img/card-wegwijzer-bestuivers.jpg")}
.tga {background-image: url("/img/card-terreingericht-advies.jpg")}
.rbl {background-image: url("/img/card-routekaart-bijenlandschap.jpg")}
.bvb {background-image: url("/img/card-bijvriendelijk-beplanten.jpg")}
.okb {background-image: url("/img/card-overzichtskaart-bijeninitiatieven.jpg")}
.lga {background-image: url("/img/card-landschapsgericht-advies.jpg")}
.vvg {background-image: url("/img/card-verbetering-van-gewasbescherming.png")}

/* footer */
/* Footer 11-2025 */
.fsp {background-color: var(--main-color-light);border-top: 1px solid var(--main-color);box-shadow: inset 0 15px 15px -15px rgba(74,118,204,0.5);}
.fc {max-width:1280px;margin:0 auto;display: grid;grid-template-columns:1fr 2fr;}
.kip {font-weight: 700;text-transform: uppercase;font-size: 1.6em;line-height: 1.2em;padding-top:14px}
.kip a, .kip a:visited {text-decoration:none;color: var(--main-color);max-width:20em;display:inline-block}
.kip a:hover {text-decoration:underline}
.sp {text-align:right}
.sp a {text-decoration:none;display:inline-block;background-repeat:no-repeat;background-position:center center;}
.sp a:hover {}
.sp a span {display:none}
.sp-wur {width:190px;height:62px;background-image: url("/img/footer-wur.svg");background-size: 169px 32px;} /* wur */
.sp-eis {width:100px;height:62px;background-image: url("/img/footer-eis.svg");background-size: 38px 42px;}/* eis */
.sp-lvvn {width:130px;height:62px;background-image: url("/img/footer-lvvn.svg");background-size: 110px 40px;}/* lvvn */
.sp-nbs {width:151px;height:62px;background-image: url("/img/footer-nbs.svg");background-size: 131px 40px;}/* bijenstrategie */
@media (max-width:920px) /* mobiel */
{.fc {grid-template-columns:1fr} .kip {text-align:center} .kip a, .kip a:visited {max-width:500em;}.sp{text-align:center}}

/* margins */
.mt-0 {margin-top:0}
.mt-05 {margin-top:.5em}
.mt-1 {margin-top:1em}
.mt-2 {margin-top:2em}
.mt-3 {margin-top:3em}
.mb-0 {margin-bottom:0}
.mb-05 {margin-bottom:.5em}
.mb-1 {margin-bottom:1em}
.pb-2 {padding-bottom:2em!important}
.pb-3 {padding-bottom:3em!important}

/* Vervolgpagina's */
.container {max-width: 1280px;padding: 0;margin:0 auto}
/* grids */
/* generieke grids */
.half-half {display: grid;gap: 2.35%; grid-template-columns: 1fr 1fr}
@media (max-width: 770px) {.half-half {grid-template-columns: 1fr}}
.een-twee {display: grid;gap: 2.35%; grid-template-columns: 1fr 2fr}
@media (max-width: 770px) {.een-twee {grid-template-columns: 1fr}}
.twee-een {display: grid;gap: 2.35%; grid-template-columns: 2fr 1fr}
@media (max-width: 770px) {.twee-een {grid-template-columns: 1fr}}

#header {background-image:url("/assets/images/header-bg-1900x1200.jpg");background-position: 50% 20%; background-size: cover; background-repeat: no-repeat;} 
#header .blue {background-image:url("/img/blauw70.png")}
.sectie-titel a {color:white;font-size:1.2em;font-weight:bold;line-height:.9em;padding-top:1em;display:inline-block}
.sectie-titel a span {font-size:.633em;display:block}
.identity {text-align:right}
.identity div {text-align:center;display:inline-block}
.identity a:link, .identity a:visited {font-size:2.3em;color:white;text-decoration:none;display:inline-block;margin-top:16px;padding:50px 0 12px;background-image:url("hulp-voor-bestuivers.svg");background-size:114px 54px;background-repeat: no-repeat;background-position:top center}

#navigatie {min-height:50px;background-color: var(--lichtblauw2);border-bottom:1px solid var(--main-color)}
#navigatie li {display:inline-block;font-size:1.6em;padding:12px 20px 0 0}
#navigatie li a {display:block;min-height:38px;color:var(--main-color)}
#navigatie li a.actief, #navigatie li a:hover {border-bottom:5px solid var(--main-color);color:black}

.inhoud a {color:var(--main-color);text-decoration:underline}
.inhoud a:hover {color:var(--donkerblauw)}
.inhoud ul.lijst {list-style-type: disc;margin-left:16px}
.inhoud ul.lijst li {padding-left:8px}

.downloads {background:var(--lichtblauw2);padding:3em 3em 3.5em;border-radius:9px;}
.downloads img {max-width:99%}
/* tekstopmaak */
.toelichting {padding-bottom:3em}
.bijschrift {font-style:italic;font-size:1.2em}

/* gebruikte gebieden en ecoprofielen */
.gebied-ecoprofiel {background:var(--lichtblauw2);padding:1.9em;border-radius:9px;}
/*.gebied-ecoprofiel a {font-size:1.6em;border-width: 2px;border-style:solid;padding:8px 14px 8px 45px;border-radius:100px;background-repeat:no-repeat;background-position:left center;background-size:42px 40px;display:inline-block;margin:0 10px 10px 0}
*/
/* shadow inside:
 -webkit-box-shadow: inset 0px 0px 10px 7px rgba(74,118,204,0.18);box-shadow: inset 0px 0px 10px 7px rgba(74,118,204,0.18);*/

/* afbeeldingen */
.foto img {max-width:100%}

/* bladeren door de eco-profielen */
.bladeren {display: grid;gap: 5.35%; grid-template-columns:38px 1fr 38px;vertical-align:middle;margin-bottom:1em}
.ecoprofielen {background:var(--lichtblauw2);padding:1.9em;border-radius:9px;}
.ecoprofielen p {font-size:1.44em;line-height:1.5em;margin-bottom:1.5em}
.ecoprofielen img {max-width:100%}
.knop-klein {max-width:42px;max-height:42px;}
.knop-klein a:link {border:1px solid var(--volblauw);border-radius:6px;color:var(--volblauw);width:36px;height:36px;display:block}
.knop-klein a.vorige {background:var(--lichtblauw) url("/extra/vorige.svg") center center no-repeat;background-size:22px 13px;}
.knop-klein a.vorige:hover {background:#cce2f2 url("/extra/vorige-hover.svg") center center no-repeat;background-size:22px 13px;}
.knop-klein a.volgende {background:var(--lichtblauw) url("/extra/volgende.svg") center center no-repeat;background-size:22px 13px;}
.knop-klein a.volgende:hover {background:#cce2f2 url("/extra/volgende-hover.svg") center center no-repeat;background-size:22px 13px;}
.knop-klein a:link span {display:none}
.profiel {text-align:center;vertical-align:middle}
.profiel h3 {margin:0;margin-top:8px}


/* breadcrumbs T */
.container.breadcrumb {margin-bottom:0}
.container.breadcrumb ul {padding: 10px 16px 0 0;list-style: none;margin:0 0 16px;}
.container.breadcrumb ul li {display: inline;font-weight:bold}
.container.breadcrumb ul li+li:before {padding: 8px;color: black;/*content: "/\00a0";*/}
.container.breadcrumb ul li a {color: #000; text-decoration: none;font-size:1.6em;font-weight:normal;background-image:url("/img/chevron.svg");background-repeat: no-repeat;background-position: right center;background-size: 8px 12px; padding-right:16px;margin-right:8px}
.container.breadcrumb ul li a:hover {color: var(--donkerblauw);text-decoration: underline}

/* openklapper */
.openklapper {display:block;width:100%;;padding:0 16px;border-top:2px solid var(--lichtblauw2)}
/* niet meer nodig? .openklapper:before, .openklapper:after {content: " ";display: block;height: 1px;width: 100%;background: var(--lichtblauw)}*/
.openklapper summary::marker {content: none}
.openklapper summary:focus {outline:none;}
summary h2.titel {color:var(--main-color);width:100%;padding:10px 0 15px 36px;font-size:1.8em;font-weight:normal;background: url("/img/section-closed.svg") no-repeat left 12px;background-size:22px 22px}
[open] summary h2 {background: url("/img/section-opened.svg") no-repeat left 12px;background-size:22px 22px;color:black;font-weight:700}
summary h2.titel:hover {cursor:pointer;text-decoration:underline}
[open] summary h2.titel:hover {color:var(--donkerblauw)}
[open] {background:var(--lichtblauw2)}
.last {border-bottom:2px solid var(--lichtblauw2)}
.maatregelen {padding-bottom:30px}
/* filters */
.filters {}
.filters a, .gebied-ecoprofiel a {font-size:1.6em;color:black;text-decoration:none;background-color:white;padding:4px 14px 4px 38px;border-radius:100px;background-repeat:no-repeat;background-position:left center;background-size:31px 30px;display:inline-block;margin:0 10px 10px 0}
.filters a:hover {color:black}

.tg-bebouwd-gebied {background-image:url("/img/groene-maatregelen/tg-bebouwd-gebied.svg")}
.tg-bebouwd-gebied:hover, .tg-bebouwd-gebied.actief {background-color:#f4cecd}
.tg-intensief-landbouwgebied {background-image:url("/img/groene-maatregelen/tg-intensief-landbouwgebied.svg")}
.tg-intensief-landbouwgebied:hover, .tg-intensief-landbouwgebied.actief {background-color:#f7ddc4}
.tg-landbouwzone {background-image:url("/img/groene-maatregelen/tg-landbouwzone.svg")}
.tg-landbouwzone:hover, .tg-landbouwzone.actief {background-color:#bfcfe1}
.tg-natuurgebied {background-image:url("/img/groene-maatregelen/tg-natuurgebied.svg")}
.tg-natuurgebied:hover, .tg-natuurgebied.actief {background-color:#c8e0c9}

.ep-bos {background-image:url("/img/groene-maatregelen/ep-bos.svg")}
.ep-bos:hover, .ep-bos.actief {background-color:#e7cfc4}
.ep-bosrand-grazig {background-image:url("/img/groene-maatregelen/ep-bosrand-grazig.svg")}
.ep-bosrand-grazig:hover, .ep-bosrand-grazig.actief {background-color:#e8dfbc}
.ep-grazig-droog {background-image:url("/img/groene-maatregelen/ep-grazig-droog.svg")}
.ep-grazig-droog:hover, .ep-grazig-droog.actief {background-color:#cee7cd}
.ep-grazig-nat-droog {background-image:url("/img/groene-maatregelen/ep-grazig-nat-droog.svg")}
.ep-grazig-nat-droog:hover, .ep-grazig-nat-droog.actief {background-color:#bfdcec}
.ep-heide-stuifzand {background-image:url("/img/groene-maatregelen/ep-heide-stuifzand.svg")}
.ep-heide-stuifzand:hover, .ep-heide-stuifzand.actief {background-color:#d9c6de}

/* linklijst overzicht */
.linklijst {padding-bottom:2em}
.linklijst h4 {font-size:2em;font-weight:normal}
.linklijst li {font-size:1.8em;font-weight:normal}
.linklijst li a {color:var(--main-color);padding-left:20px;background-image:url("/img/chevron-b.svg");background-repeat:no-repeat;background-position:left center;background-size:8px 13px;text-decoration:none}
.linklijst a:hover {text-decoration:underline}
.linklijst li span {font-style:italic;font-size:.8em}
/* effects */
.neumorphic {box-shadow: 10px 10px 20px rgba(204, 209, 216, 0.48000000000000004), -10px -10px 20px rgba(252, 255, 255, 0.6799999999999999);border-radius: 4px;transition: all .15s ease-in-out; }
.neumorphic:hover {transform: scale(1.01)}