*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
ul, ol { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; }


:root {
  --ground: #f6f7f4;      
  --panel:  #e7eee9;      
  --ink:    #202a25;      
  --muted:  #55625b;      
  --water:  #0e6f5c;      
  --water-dark: #0a4f42;
  --soil:   #8a6122;      
  --line:   #d3dcd5;      
  --font-display: Georgia, "Times New Roman", Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --container: 1040px;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}


h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.25; }
p { margin: 0 0 1em; }
a { text-decoration: none; }
a[href]:hover { text-decoration: underline; }


.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;
}
.sr-only:focus, .sr-only:focus-within {
  position: static;
  width: auto; height: auto;
  margin: 0.5rem; padding: 0.4rem 0.7rem;
  background: #fff;
  border: 1px solid var(--water);
  clip: auto;
}


.home, .pagina { display: block; }

.omhulsel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


#pagetitle          { order: -2; }
.tekstbrowser#boven { order: -1; }
.headerhouder        { order: 0; }
.horizontalenav      { order: 1; }
.contentcontainer    { order: 2; flex: 1 0 auto; width: 100%; }
.omhulsel > a.naarboven,
.omhulsel > a.toplink { order: 4; }


.contentcontainer > .watermerk {
  order: 99;
  flex: 1 1 100%;
  width: 100%;
  margin-top: 1rem;
}


#pagetitle { padding: 0; }


.headerhouder {
  background: linear-gradient(180deg, var(--water-dark), var(--water));
  color: #eef7f3;
}
.headertop { background: rgba(0,0,0,0.15); }
.servicebalk {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: #d7e9e2;
}
.servicebalk a { color: #fff; }
.servicebalk a[href]:hover { text-decoration: underline; }
.servicebalk .pijplijn { display: none; }
.servicebalk span:last-child { margin-left: auto; opacity: 0.85; }

.headerfoto {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.4rem 1rem 1.6rem;
  min-height: 64px;
  display: flex;
  align-items: center;
}
.headerfoto a { display: flex; align-items: center; gap: 0.6rem; color: #fff; }
.headerfoto .opvulling { display: none; }
.headerfoto .sitetitel {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.headerfoto .sitetitel::before {
  content: "";
  display: inline-block;
  width: 1.6em; height: 1.6em;
  margin-right: 0.5rem;
  vertical-align: -0.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23eef7f3' stroke-width='4' stroke-linecap='round' d='M6 40c8 0 8-10 16-10s8 10 16 10 8-10 16-10'/%3E%3Cpath fill='none' stroke='%23eef7f3' stroke-width='4' stroke-linecap='round' d='M6 50c8 0 8-10 16-10s8 10 16 10 8-10 16-10'/%3E%3Ccircle cx='32' cy='18' r='9' fill='none' stroke='%23eef7f3' stroke-width='4'/%3E%3C/svg%3E") center/contain no-repeat;
}


.headerbottom {
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q15 14 30 7 T60 7 T90 7 T120 7 V14 H0 Z' fill='%23f6f7f4'/%3E%3C/svg%3E")
    repeat-x bottom / 120px 14px;
}


.horizontalenav {
  background: var(--water-dark);
  border-bottom: 3px solid var(--soil);
}
.horizontalenav > ul.nav_menu_level_1 {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.horizontalenav .nav_menu_level_1 > li {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.horizontalenav .nav_menu_level_1 > li:first-child { border-top: 0; }
.horizontalenav .nav_menu_level_2 {
  list-style: none;
  padding: 0.4rem 0 0.2rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.horizontalenav .nav_menu_level_2 a {
  color: #d7e9e2;
  font-weight: 400;
  font-size: 0.88rem;
}
.horizontalenav .nav_menu_level_2 a[href]:hover { color: #fff; text-decoration: underline; }


.verticalenav {
  background: var(--panel);
  border-left: 3px solid var(--soil);
  padding: 0.8rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: 2px;
}
.verticalenav h2 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--soil);
  margin: 0 0 0.5rem;
}
.verticalenav ul.nav_menu_level_1,
.verticalenav ul.nav_menu_level_2 {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.verticalenav ul.nav_menu_level_2 { padding-left: 0.8rem; margin-top: 0.3rem; }
.verticalenav li { color: var(--ink); font-size: 0.9rem; }
.verticalenav a { color: var(--water-dark); }
.verticalenav a[href]:hover { text-decoration: underline; }
.verticalenav li.geselecteerd > a,
.verticalenav li.geselecteerd { color: var(--soil); font-weight: 700; }


.contentcontainer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.middenkolom  { order: 1; min-width: 0; }
.linkerkolom  { order: 2; min-width: 0; }
.rechterkolom { order: 3; min-width: 0; }
.rechterkolom:empty, .linkerkolom:empty { display: none; }


.broodkruimel {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.broodkruimel a { color: var(--water); }
.broodkruimel .tussenteken::before { content: "\2192"; margin: 0 0.4em; color: var(--muted); }


.paginatitel {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--soil);
  display: inline-block;
}
.highlight, .artikel, .index, .mailform { margin-bottom: 1.25rem; }
.highlight .inhoud, .artikel .inhoud { }
.kop h4 { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--water-dark); }
.middeninhoud .inhoud p { color: var(--ink); }


.linkerkolom > h2 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--soil);
  margin: 0 0 0.75rem;
}
.nieuwsberichten { display: flex; flex-direction: column; gap: 0.9rem; }
.nieuwsitem {
  background: var(--panel);
  border-left: 3px solid var(--water);
  padding: 0.7rem 0.9rem;
  border-radius: 2px;
}
.nieuwsitem .kop h4 { font-size: 0.98rem; margin: 0 0 0.3rem; }
.nieuwsitem .kop a { color: var(--water-dark); }
.nieuwsitem .info { font-size: 0.78rem; color: var(--muted); }
.nieuwsitem .info a { color: var(--soil); }
.nieuwsitem .pijplijn { margin: 0 0.35em; }


.resultaten dl { margin: 0 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.resultaten dt.link span, .resultaten dt.link a { font-family: var(--font-display); font-size: 1.05rem; color: var(--water-dark); }
.resultaten dd.datum { font-size: 0.8rem; color: var(--soil); margin: 0.15rem 0 0.4rem; }
.resultaten dd.tekst { margin: 0; color: var(--ink); }
.pager_boven { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; font-size: 0.9rem; }
.pager_boven .huidige { font-weight: 700; color: var(--water); }
.pager_boven a { color: var(--water); }


.zoeken { background: var(--panel); padding: 0.9rem; border-radius: 3px; }
.zoeken h2 { font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--soil); margin: 0 0 0.6rem; }
.zoeken fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 0.4rem; }
.zoeken fieldset.verborgen { display: none; }
.zoekbox { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 2px; }
.zoekbutton { background: var(--water); color: #fff; border: 0; padding: 0.45rem 0.8rem; border-radius: 2px; cursor: pointer; }
.zoekbutton:hover { background: var(--water-dark); }
.zoeken > a { display: inline-block; margin-top: 0.5rem; font-size: 0.82rem; color: var(--water); }

.servicelinks { margin-top: 0.9rem; }
.servicelinks ul.links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; }
.servicelinks .pijplijn { display: none; }
.servicelinks .print, .servicelinks .mailafriend, .servicelinks .mailredactie, .servicelinks .RSS { color: var(--muted); }


.externLink::after { content: " \2197"; font-size: 0.85em; color: var(--soil); }


.formulier fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.formulier fieldset.verborgen { display: none; }
.formulier .rij { margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.formulier .label label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.formulier .verplicht { color: var(--soil); }
.formulier .invoer .input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
}
.formulier .invoer .input:focus { outline: 2px solid var(--water); outline-offset: 1px; }
.formulier textarea.input { min-height: 8rem; resize: vertical; }
.formulier .knoppen input[type="submit"] {
  background: var(--water);
  color: #fff;
  border: 0;
  padding: 0.6rem 1.3rem;
  border-radius: 2px;
  font-weight: 600;
  cursor: pointer;
}
.formulier .knoppen input[type="submit"]:hover { background: var(--water-dark); }
.inleiding { color: var(--muted); margin-bottom: 1rem; }
.afsluiter { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }


.watermerk {
  background: var(--panel);
  border-top: 3px solid var(--water);
  margin-top: auto;
}
.wapen {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem 1rem 0.5rem;
  min-height: 1px;
}
.footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.8rem 1rem 1.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.footer a { color: var(--water-dark); }
.footer .pijplijn { margin: 0 0.5em; }

.linkerkolom .footer { padding-left: 0; padding-right: 0; margin-top: 1rem; border-top: 1px solid var(--line); }


a.naarboven, a.toplink {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: var(--water);
  color: #fff !important;
  font-size: 0.78rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  text-decoration: none !important;
  z-index: 20;
}
a.naarboven:hover, a.toplink:hover { background: var(--water-dark); }


.sitemap ul, .index ul { list-style: none; padding-left: 1rem; }
.sitemap li, .index li { margin: 0.2rem 0; }


.hotspot_popup { display: none; }


@media (min-width: 768px) {
  body { font-size: 16.5px; }
  .servicebalk { font-size: 0.82rem; }
  .headerfoto .sitetitel { font-size: 1.9rem; }
  .paginatitel { font-size: 2rem; }

  .horizontalenav > ul.nav_menu_level_1 {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  .horizontalenav .nav_menu_level_1 > li {
    position: relative;
    border-top: 0;
    padding: 0.85rem 1rem;
  }
  .horizontalenav .nav_menu_level_1 > li:hover { background: rgba(255,255,255,0.08); }
  .horizontalenav .nav_menu_level_2 {
    display: none;
    position: absolute;
    left: 0; top: 100%;
    background: var(--water-dark);
    padding: 0.6rem 0.9rem;
    min-width: 220px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 10;
  }
  .horizontalenav .nav_menu_level_1 > li:hover .nav_menu_level_2,
  .horizontalenav .nav_menu_level_1 > li:focus-within .nav_menu_level_2 { display: flex; }

  .verticalenav ul.nav_menu_level_1 { flex-direction: column; }

  
  .contentcontainer {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 220px;
    grid-template-areas:
      "linker midden rechter"
      "voet   voet    voet";
    align-items: start;
    padding-top: 2rem;
  }
  .middenkolom  { grid-area: midden; }
  .linkerkolom  { grid-area: linker; }
  .rechterkolom { grid-area: rechter; }
  .contentcontainer > .watermerk { grid-area: voet; }
}