html {
  height: 100%;
  scrollbar-gutter: stable;
}
/* ============================================================
   Op Pad met Ellen – stijl.css  (fluid / responsive)
   Kleuren: var(--k1)  var(--k2)  var(--k3)  var(--k4)  var(--k5)
   Fonts  : Fira Sans, Cabin Sketch (Google)
   ============================================================ */
:root {
/*  --k1: #c37dad; */
  --k1: #e4157e;
  --k1-dark: #3786b0;
  --k2: #ffffff;
  --k3: #e4157e;
  --k4: #98b8c6;
  --k4-shadow: #8aabba;
  --k4-muted: #8aab99;
  --k5: #2b4169;
  --k6: #f4faf7;
}
* {
  box-sizing: border-box;
}
/* ── Body ───────────────────────────────────────────────── */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px 2vw;
  background-color: #eef2f5;
  font-family: 'Libre Baskerville', serif;
  border-top: 4px solid var(--k1);
}
/* ── Logo-placeholder ───────────────────────────────────── */
.logoplaat {
  height: 100%;
  width: auto;
  display: block;
  margin: 0;
}
/* ── Header ─────────────────────────────────────────────── */
.hoofd {
  overflow: hidden;
  border-radius: 10px;
  padding: 0;
  height: 300px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 10px;
}
.hoofd > a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: #eef2f5;
}
.logo {
  width: clamp(200px, 45%, 450px);
  height: auto;
}
.hoofd-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 10px 10px 0 0;
}
.partner-logos {
  display: flex;
  align-items: center;
  gap: 12px;
}
.partner-logos img {
  height: 44px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.image-recht {
  width: clamp(200px, 52%, 540px);
  height: clamp(80px, 10vw, 120px);
  margin: 0 0 10px;
  background: var(--k1);
  border-radius: 8px;
}
/* ── Social ─────────────────────────────────────────────── */
.social {
  position: static;
  height: auto;
  margin-top: 8px;
  text-align: center;
}
.list-unstyled {
  padding: 0 5px;
  margin-bottom: 10px;
  list-style: none;
  display: flex;
  justify-content: center;
}
.list-inline li {
  display: inline-block;
}
.social-icons .fa {
  font-size: 1.8em;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: var(--k2);
  transition: all 0.3s ease-in-out;
}
.social-icons .fa:hover,
.social-icons .fa:active {
  color: var(--k5);
  box-shadow: 1px 1px 3px var(--k5);
}
.social-icons.icon-rotate .fa:hover {
  transform: scale(1.1) rotate(360deg);
}
/* ── Ticker ─────────────────────────────────────────────── */
.tagline {
  font-family: 'Libre Baskerville', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #fff;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 10px rgba(0,0,0,0.5);
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  margin: 0;
}
/* ── Navigatie ──────────────────────────────────────────── */
#navigatie {
  margin: 0 0 10px;
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  height: auto;
}
ul.sdt_menu {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(11px, 1.2vw, 15px);
  width: 100%;
  display: flex;
  z-index: 999;
}
ul.sdt_menu a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-transform: uppercase;
  outline: none;
  z-index: 999;
}
ul.sdt_menu li {
  flex: 1;
  height: 44px;
  margin: 0 0.3vw;
  border-radius: 4px;
  background: var(--k3);
  position: relative;
  cursor: pointer;
  z-index: 999;
  padding: 8px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease;
}
ul.sdt_menu li:hover {
  background: #125f80;
}
ul.sdt_menu li:first-child {
  margin-left: 0;
}
ul.sdt_menu li.draai--home {
  flex: 0 0 auto;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.sdt_menu li.draai--home .sdt_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
ul.sdt_menu li.draai--home .sdt_link {
  font-size: 16px;
  float: none;
}
ul.sdt_menu li.draai--home .sdt_descr {
  float: none;
  text-align: center;
}
ul.sdt_menu li:last-child {
  margin-right: 0;
}
ul.sdt_menu li span span.sdt_link {
  color: #fff;
  font-size: clamp(8px, 1vw, 12px);
  float: left;
  font-weight: 600;
}
ul.sdt_menu li span span.sdt_descr {
  color: rgba(255,255,255,0.75);
  float: left;
  clear: both;
  width: 100%;
  font-size: clamp(7px, 0.6vw, 9px);
  letter-spacing: 0.5px;
  z-index: 999;
}
/* ── Lichaam ────────────────────────────────────────────── */
.lichaam {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
}
/* ── Voorinfo-blokken ───────────────────────────────────── */
.voorinfo {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #fff;
  width: calc(40% - 10px);
  height: clamp(250px, 35vw, 420px);
  overflow: hidden;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.voorinfo--hoog {
  background-color: var(--k3);
  height: auto;
  min-height: 200px;
  padding: 12px;
}

.voorinfo2 {
  position: relative;
  display: block;
  border-radius: 5px;

  width: calc(60% - 10px);
  min-height: 200px;

}
.halftekst-foto {
  flex: 0 0 40%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.halftekst {
  display: block;
  position: relative;
  height: 100%;

  padding: 10px;
}
.halftekst p, .halftekst .blauw { color:var(--k5); }
.voorinfo--hoog .halftekst:last-child { padding: 20px; color: #fff;}
.koppie {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
/* ── Onder-blokken ──────────────────────────────────────── */
.voorinfoonder {
  position: relative;
  border-radius: 5px;
  background-color: var(--k1);
  color: #fff;
  width: calc(48% - 14px);
  height: auto;
  padding: 20px;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.voorinfoonder2 {
  position: relative;
  border-radius: 5px;
  background-color: #eef2f5;
  width: calc(50% - 10px);
  padding: 20px;
  color: #1a1a1a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.voorinfoonder2--info h3 {
  margin: 0 0 10px;
  color: var(--k1);
}
.voorinfoonder2.voorinfoonder2--info p {
  margin: 0 0 0.6em;
  line-height: 1;
  color: var(--k5);
}
.voorinfoonder3 {
  position: relative;
  border-radius: 5px;
  background-color: var(--k1);
  color: #fff;
  width: calc(48% - 14px);
  height: 600px;
  padding: 0;
  object-fit: cover;
  object-position: 50% 40%;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.voorinfoonder2 p, .voorinfoonder2 p1 { color: var(--k5); }
/* ── Verderinfo ─────────────────────────────────────────── */
.verderinfo {
  border-radius: 8px;
  background: #ffffff;
  color: var(--k5);
  width: 100%;
  padding: 24px 24px 40px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.verderinfo p, .verderinfo p1 {
  color: var(--k5);
}
.verderinfo h2, .verderinfo .paginatitel {
  color: var(--k1);
  font-size: clamp(16px, 1.8vw, 24px);
  text-transform: none;
  font-weight: 700;
  margin-bottom: 14px;
}
.verderinfo p {
  margin-bottom: 0.6em;
}
.verderinfo p:empty,
.verderinfo p:has(> br:only-child) {
  display: none;
}
/* ── Typografie ─────────────────────────────────────────── */
p {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--k2);
}
p1 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.5px;
  line-height: 1;
  color: #fff;
  display: block;
}
p2 {
  font-family: 'Libre Baskerville', serif;
  display: inline-block;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 3px;
  color: var(--k3);
}
ul {
  padding-bottom: 0.5vw;
}
h1 {
  font-size: clamp(22px, 3vw, 36px);
  font-family: 'Libre Baskerville', serif;
}
h2 {
  font-family: 'Libre Baskerville', serif;
  color: var(--k4);
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
}
h3 {
  font-family: 'Libre Baskerville', serif;
  color: var(--k3);
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 900;
  text-align: left;

  margin: 0;
}
h4 {
  font-family: 'Libre Baskerville', serif;
  color: var(--k5);
  font-size: clamp(10px, 1.2vw, 18px);
  font-weight: 900;
  text-align: left;
  margin: 0.5vw 0 0 0;
}
h5 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(14px, 1.4vw, 20px);
  color: var(--k1);
}
h6 {
  font-family: 'Libre Baskerville', serif;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 25px);
  font-weight: 900;
  text-shadow: 2px 2px var(--k4-shadow);
  margin: 0;
}
.h7 {
  font-family: 'Libre Baskerville', serif;
  color: var(--k3);
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 10px;
}
/* ── Klasse-helpers (vervanging inline styles) ───────────── */
.paginatitel {
  color: var(--k5);
  font-family: 'Libre Baskerville', serif;
}
.blauw {
  color: var(--k5);
}
.wit {
  color: #fff;
}
.fout {
  color: var(--k3);
}
/* Login */
.login-vlak {
  width: clamp(280px, 45%, 520px);
  padding: 30px;
  margin: 20px auto;
}
.login-vlak label {
  color: #fff;
  font-family: 'Libre Baskerville', serif;
  text-transform: uppercase;
  font-size: 13px;
}
/* Contact */
/* Info-padding */
.info-padding {
  padding: 16px 32px 32px 0;
  position: relative;
}
.info-padding p {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1;
  margin: 0 0 4px;
  color: var(--k5);
}
.info-padding p:empty,
.info-padding p:has(> br:only-child) { margin: 0; line-height: 0.4; font-size: 8px; }
.info-padding h3 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1;
}
.voorinfo2 > .info-padding {padding:16px 0 32px 0; line-height:1;}
.koppie-wrap {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(100px, 14vw, 160px);
  isolation: isolate;
}
.koppie-wrap > .koppie {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 100% 10%;
  filter: grayscale(1) brightness(1.5);
}
.koppie-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #98b8c6;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Winkelitem beschrijving */
.winkelitem-omschr {
  font-size: 13px;
  color: #444;
  margin: 4px 0;
}
/* Knopje klein */
.knopje-klein {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
}
.knopje.knopje-klein {
  background-color: #2a5f7a;
  border: none;
  color: #fff;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.knopje.knopje-klein:hover {
  background-color: #1e4a5e;
}
/* ── HR ─────────────────────────────────────────────────── */
hr {
  clear: both;
  position: relative;
  border: 0;
  margin: 20px;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );
}
/* ── Div-animatie ───────────────────────────────────────── */
.draai {
  transition: background 0.2s ease;
}
/* ── Links (nieuws) ─────────────────────────────────────── */
a.kliknieuws {
  position: absolute;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: clamp(14px, 1.5vw, 22px);
  line-height: 50px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: 999;
}
a.kliknieuws:hover {
  color: #fff;
}
/* ── Nieuwsitem ─────────────────────────────────────────── */
.nieuwsitem {
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d0d8df;
}
.nieuwsitem:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.nieuwsitem h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--k1);
  margin: 0 0 4px;
}
.nieuwsitem p {
  font-size: 13px;
  margin: 0;
}
.nieuws-meer {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--k1);
  text-decoration: none;
  text-align: right;
}
.nieuws-meer:hover { text-decoration: underline; }
/* ── Praktijk ───────────────────────────────────────────── */
.praktijk-flex {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: stretch;
}
.praktijk-flex .verderinfo {
  flex: 1 1 0;
  width: auto;
}
/* ── Nieuwspagina ───────────────────────────────────────── */
.nieuwsbericht {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #dde4ea;
}
.nieuwsbericht:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.nieuwsbericht h3 {
  color: var(--k1);
  font-size: clamp(15px, 1.4vw, 20px);
  margin: 0 0 4px;
}
.nieuws-datum {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}
.nieuws-foto {
  float: right;
  width: 30%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 12px 20px;
}
/* ── Webshop ────────────────────────────────────────────── */
.winkelgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5vw;
  width: 100%;
  padding: 10px 0;
}
.winkelitem {
  position: relative;
  width: clamp(160px, 20%, 230px);
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow: hidden;
}
.winkelitem img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 3px;
}
.winkelitem h3 {
  font-size: clamp(11px, 1.1vw, 15px);
  margin: 8px 0 4px 0;
}
.winkelitem .prijs {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 900;
  color: var(--k1);
}
.winkelitem .soort {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(9px, 0.85vw, 12px);
  color: var(--k2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.winkelleeq {
  width: 100%;
  padding: 40px;
  text-align: center;
  color: var(--k2);
  font-family: 'Libre Baskerville', serif;
}
/* ── Knoppen ────────────────────────────────────────────── */
.knopje {
  display: inline-block;
  background-color: #2a5f7a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  margin-top: 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: none;
}
.knopje:hover {
  background-color: #1e4a5e;
}
/* ── Formulieren ────────────────────────────────────────── */
.contact-flex {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.contact-formulier {
  flex: 0 0 calc(40% - 27px);
}
.contact-foto {
  flex: 0 0 calc(25% - 27px);
}
.contact-info {
  flex: 0 0 calc(35% - 27px);
  font-size: 14px;
}
.contact-info.webtekst-inhoud p {
  margin: 0;
  line-height: 1;
}
.contact-info a {
  color: var(--k1);
  text-decoration: none;
}
.contact-info a:hover {
  text-decoration: underline;
}
.contact-info.webtekst-inhoud h2,
.contact-info.webtekst-inhoud h3 {
  margin-top: 1em;
  margin-bottom: 0.2em;
}
.contact-info.webtekst-inhoud > :first-child { margin-top: 0; }
.contactformulier {
  max-width: 100%;
  margin: 0;
}
.contactformulier .veld {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.contactformulier label {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--k5);
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(13px, 1.1vw, 15px);
  padding: 10px 12px;
  background: var(--k6);
  border: 1.5px solid var(--k4);
  border-radius: 6px;
  color: var(--k5);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
:focus-visible {
  outline: 3px solid var(--k1);
  outline-offset: 3px;
  border-radius: 3px;
}
ul.sdt_menu li:focus-within,
ul.sdt_menu li a:focus-visible,
ul.sdt_menu2 li:focus-within,
ul.sdt_menu2 li a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--k1);
  outline: 3px solid var(--k1);
  outline-offset: 2px;
}
textarea {
  resize: vertical;
}
input[type="submit"] {
  border: none;
  color: #fff;
  font-size: clamp(13px, 1vw, 15px);
  background: var(--k1);
  border-radius: 6px;
  padding: 10px 24px;
  margin-top: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Libre Baskerville', serif;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.2s;
}
input[type="submit"]:hover {
  background: var(--k5);
}
/* ── Footer ─────────────────────────────────────────────── */
.footer {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  margin: 30px 0 0;
  border-top: 1px solid #cdd8df;
  padding: 16px 0 10px;
}
.foot {
  display: flex;
  justify-content: center;
  gap: 8vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot li {
  display: block;
}
.foot li.filler {
  display: none;
}
.filler {
  width: 100%;
  display: inline-block;
  height: 0;
}
a.voet {
  font-family: "PT Sans", sans-serif;
  font-size: clamp(11px, 1vw, 15px);
  letter-spacing: 1.5px;
  color: var(--k3);
  text-decoration: none;

}
a.voet:hover {
  color: var(--k4-muted);
}
/* ── Modifier-klassen ergotherapie / index ──────────────── */
.missie-h3 {
  font-size: 18px;
}
.voorinfoonder.voorinfoonder--vol {
  width: 100%;
  background-color: #fff;
  color: var(--k5);
}
.voorinfoonder.voorinfoonder--vol h2,
.voorinfoonder.voorinfoonder--vol h3 {
  color: var(--k3);
}
.verderinfo--mt {
  margin-top: 10px;
}
/* ── Submenu navigatie2 ─────────────────────────────────── */
.navigatie2-wrapper {
  height: 38px;
  overflow: hidden;
  margin: 0 0 10px;
  width: 100%;
}
#navigatie2 {
  height: 38px;
  transform: translateY(-100%);
  transition: transform 0.7s ease-out;
}
ul.sdt_menu2 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Libre Baskerville', serif;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
ul.sdt_menu2 a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-transform: uppercase;
  outline: none;
}
ul.sdt_menu2 li {
  flex: 1;
  height: 38px;
  border-radius: 4px;
  background: var(--k1-dark);
  cursor: pointer;
  padding: 0 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
ul.sdt_menu2 li:hover {
  background: var(--k4);
}
ul.sdt_menu2 li span span.sdt_link2 {
  color: #fff;
  font-size: clamp(11px, 1.1vw, 14px);
  text-align: center;
  font-weight: 600;
}
/* ── Webtekst HTML-inhoud ───────────────────────────────── */
.ergfoto {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30%;
  aspect-ratio: 1 / 1.2;
  object-position: 50% 35%;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 16px 20px;
}

.ergfoto2 {
float:left;
  aspect-ratio: 4 / 3;
  width: 30%;
  object-fit: cover;
  object-position: 0 30%;
  border-radius: 4px;
  margin: 0 20px 16px 0;
}

.aabm {
  width:40%;
  margin-right:auto;
  padding:12px 22px;
  background:var(--k1-dark);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
  transition:background .2s;
}

.aabm:hover {background:#2a6888;}

.webtekst-foto {
  float: right;
  width: 30%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 16px 20px;
}
.contact-foto-simpel {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0;
}
.webtekst-foto-kader {
  float: right;
  width: 30%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  margin: 0 0 16px 20px;
  overflow: hidden;
  position: relative;
}
.webtekst-foto-inhoud {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overmij-foto-mobiel {
  display: none;
}
.overmij-foto{
  object-position: 50% 35%;
}
.overmij-kader {
  width: 50%;
}
.vergoeding-foto-mobiel {
  display: none;
}
.vergoeding-kader {
  width: 30%;
}
.webtekst-foto-kader ~ .winkelgrid {
  width: auto;
}
.hoeikwerk-kader {
  height: 528px;
}
.hoeikwerk-foto {
  object-position: 50% 30%;
}
.rugzak-foto {
  object-position: 50% 30%;
}
.webtekst-inhoud {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.3px;
  line-height: 1;
  color: inherit;
}
.webtekst-inhoud p {
  margin: 0 0 0.6em;
  color: var(--k5);
}
.webtekst-inhoud p:last-child {
  margin-bottom: 0;
}
.webtekst-inhoud p:empty,
.webtekst-inhoud p:has(> br:only-child) {
  display: none;
}
.webtekst-inhoud.extra-ruimte p {
  margin-bottom: 1.2em;
}
.webtekst-inhoud.roze-koppen h2,
.webtekst-inhoud.roze-koppen h3 {
  color: var(--k3);
}
.webtekst-inhoud ul {
  list-style: disc outside;
  padding-left: 1.6em;
  margin: 0 0 0.3em;
}
.webtekst-inhoud ol {
  list-style: decimal outside;
  padding-left: 1.6em;
  margin: 0 0 0.6em;
}
.webtekst-inhoud li {
  margin: 0 0 0.1em;
}
.webtekst-inhoud h2 {
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 700;
  margin: 0.8em 0 0.3em;
}
.webtekst-inhoud h3 {
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 600;
  margin: 0.6em 0 0.2em;
}
.webtekst-inhoud strong {
  font-weight: 700;
}
.webtekst-inhoud em {
  font-style: italic;
}
.webtekst-inhoud u {
  text-decoration: underline;
}
.webtekst-inhoud p,
.webtekst-inhoud h2,
.webtekst-inhoud h3 {
  color: inherit;
}
.voorinfoonder {
  color: #fff;
}
/* ── Tekstgrootte-widget ─────────────────────────────────── */
#fs-widget {
  display: flex;
  gap: 3px;
}
#fs-widget button {
  border: 1.5px solid var(--k4-shadow);
  border-radius: 4px;
  background: #fff;
  color: var(--k5);
  cursor: pointer;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  transition:
    background 0.15s,
    color 0.15s;
}
#fs-widget button:first-child {
  font-size: 13px;
}
#fs-widget button:last-child {
  font-size: 17px;
}
#fs-widget button.fs-actief {
  background: var(--k1);
  color: #fff;
  border-color: var(--k1);
}
/* ── fs-groot overrides ──────────────────────────────────── */
html.fs-groot p,
html.fs-groot p1 {
  font-size: clamp(16px, 1.35vw, 20px);
}
html.fs-groot .webtekst-inhoud {
  font-size: clamp(16px, 1.35vw, 20px);
}
html.fs-groot .contactformulier label {
  font-size: clamp(14px, 1.1vw, 16px);
}
html.fs-groot input[type="text"],
html.fs-groot input[type="email"],
html.fs-groot input[type="password"],
html.fs-groot textarea {
  font-size: clamp(16px, 1.3vw, 18px);
}
/* ── Blog layout ─────────────────────────────────────────── */
.blog-wrap {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.blog-post {
  flex: 1;
  min-width: 0;
}
.blog-zijkant {
  width: 220px;
  flex-shrink: 0;
}
.blog-zijkant-titel {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  color: var(--k5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px;
}
.blog-link {
  display: block;
  color: var(--k1);
  text-decoration: none;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 600;
  line-height: 1;
  margin: 0 0 2px;
}
.blog-link:hover {
  color: var(--k2);
}
.blog-link--actief {
  color: var(--k5);
}
.blog-link-datum {
  display: block;
  font-size: 11px;
  color: var(--k3);
  margin-bottom: 10px;
}
.blog-datum {
  text-align: right;
  font-size: 13px;
  color: var(--k3);
  margin: -6px 0 14px;
}
.blog-ondertitel {
  font-style: italic;
  color: var(--k3);
  margin: 0 0 6px;
  font-size: clamp(13px, 1.1vw, 16px);
}
.blog-foto {
  float: right;
  width: 30%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 16px 20px;
}
/* ── Bestelpagina ─────────────────────────────────────────── */
.bestel-wrap        { display: flex; gap: 2vw; align-items: flex-start; }
.bestel-fotos       { flex: 1; text-align: center; }
.bestel-omschr-blok { flex: 1; }
.bestel-foto {
  width: 100%;
  aspect-ratio: 1 / 1; height: auto;
  object-fit: cover;
  cursor: zoom-in;
  border-radius: 6px;
  margin-bottom: 10px;
}
.bestel-naam {
  font-weight: 700;
  color: var(--k5);
  margin: 0 0 4px;
}
.bestel-omschr {
  font-size: 13px;
  color: #444;
  margin: 6px 0;
  text-align: left;
}
.bestel-prijs {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  color: var(--k1);
  margin: 0;
}
.bestel-thumbs {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 6px 0 10px;
}
.bestel-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.65;
  border: 2px solid transparent;
}
.bestel-thumb.actief {
  opacity: 1;
  border-color: var(--k1);
}
.bestel-form {
  flex: 1;
}
.veld-split { display: flex; gap: 1vw; }
.verzend-opties { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.verzend-optie { display: flex; align-items: center; gap: 8px; font-weight: 400; text-transform: none; cursor: pointer; }
.verzend-optie input { width: auto; margin: 0; }
.veld-split > div { flex: 1; }
/* ── Blog paginering ──────────────────────────────────────── */
.blog-paginas {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
.blog-paginas a {
  color: var(--k1);
  font-size: 13px;
  text-decoration: none;
  padding: 2px 5px;
  opacity: 0.6;
}
.blog-paginas a:hover { opacity: 1; }
.blog-paginas .pagvoor {
  font-size: 11px;
  color: #999;
  flex: 1;
  text-align: center;
}
.privacy-contact {
  margin-top: 1.5em;
  padding: 1em 1.2em;
  border-left: 3px solid var(--kleur1, #7a9e7e);
  background: #f8f8f6;
  line-height: 1;
  font-size: 0.95em;
}
.privacy-contact a { color: inherit; }
.privacy-datum {
  font-size: 0.85em;
  color: #888;
  margin: 0 0 1.2em;
}
.terug-link {
  display: inline-block;
  margin-bottom: 1.2em;
  font-size: 0.9em;
  color: #666;
  text-decoration: none;
}
.terug-link:hover { color: #333; }
.hoofd::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/plaatjes/kompas.jpeg') 110% 57% / 80% auto no-repeat;
  /* filter: grayscale(1);*/
  z-index: -1;
}
/*
.hoofd::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74,130,160,0.82) 0%, rgba(74,130,160,0.50) 100%);
  z-index: -1;
}
*/
.contact-tekst, .contact-tekst p { font-size: clamp(11px, 1.1vw, 15px); text-transform: none; text-align: center; line-height: 1; padding: 12px; margin-top: 20px; color: var(--k2); letter-spacing: 0.08em; }
.contact-tekst::before, .contact-tekst::after { content: ''; display: block; width: 36px; height: 2px; background: var(--k1); margin: 0 auto 8px; }
.contact-tekst::after { margin: 8px auto 0; }

.watin {
  position: absolute;
  bottom: 2vw;
  right: 2vw;
  width: 62vw;
  display:flex;
  flex-direction:column;
  gap:12px;
}