/* ==========================================================================
   Mentorschap Arnhem - DJTD Consultancy
   Statische stijl, geen externe bestanden (geen Google Fonts: AVG)
   ========================================================================== */

/* --- lettertype, van onze eigen server ----------------------------------- */
/* Roboto is Apache-licentie, mag vrij meegeleverd worden.                    */
/* Alleen de Latijnse tekens: samen 35 kB in plaats van ruim 400 kB.          */

@font-face {
  font-family: "Roboto Web";
  src: url("/fonts/roboto-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Web";
  src: url("/fonts/roboto-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Web";
  src: url("/fonts/roboto-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --roze:        #DC3668;
  --roze-donker: #BE2A55;
  --blauw:       #1C3A59;
  --blauw-licht: #456785;
  --turquoise:   #00A99D;
  --tekst:       #262B31;
  --tekst-zacht: #4A5560;
  --grijs:       #EDEDED;
  --grijs-rand:  #D8DDE2;
  --wit:         #FFFFFF;

  --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M19 19H5V5h6V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-2v6z'/%3E%3C/svg%3E");

  --lees:  66ch;
  --breed: 1180px;
}

/* --- basis ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Roboto Web", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;     /* 17px - verfijnd, blijft prettig leesbaar */
  line-height: 1.62;
  color: var(--tekst);
  background: var(--wit);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--roze-donker); text-underline-offset: .18em; }
a:hover { color: var(--blauw); }

:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.22;
  color: var(--blauw);
  margin: 1.9rem 0 .7rem;
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.35rem + 1.35vw, 2.25rem); margin-top: 0; }
h2 { font-size: clamp(1.3rem, 1.15rem + .65vw, 1.6rem); }
h3 { font-size: 1.2rem; }
h4, h5 { font-size: 1.05rem; }

p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: .4rem; }

hr { border: 0; border-top: 1px solid var(--grijs-rand); margin: 2.5rem 0; }

.omhulsel { max-width: var(--breed); margin-inline: auto; padding-inline: 1.25rem; }

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--blauw); color: #fff; padding: .8rem 1.2rem; z-index: 100;
}
.overslaan:focus { left: 0; }

/* --- bovenbalk ------------------------------------------------------------ */

.bovenbalk {
  background: var(--blauw);
  color: #E4EAF0;
  font-size: .95rem;
}
.bovenbalk .omhulsel {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  justify-content: flex-end; padding-block: .5rem;
}
.bovenbalk a { color: #fff; text-decoration: none; font-weight: 500; }
.bovenbalk a:hover { color: #fff; text-decoration: underline; }
.bovenbalk svg { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .4em; }

/* --- kop met logo en menu ------------------------------------------------- */

.kop { border-bottom: 1px solid var(--grijs-rand); background: var(--wit); }
.kop .omhulsel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .9rem;
}
.kop__logo img { max-height: 74px; width: auto; }

.menuknop {
  display: none;
  background: none; border: 2px solid var(--grijs-rand); border-radius: 6px;
  padding: .5rem .8rem; font: inherit; font-weight: 500; color: var(--blauw);
  cursor: pointer; align-items: center; gap: .5rem;
}

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; }
.menu li { margin: 0; position: relative; }
.menu a {
  display: block; padding: .55rem .8rem; border-radius: 6px;
  color: var(--blauw); text-decoration: none; font-weight: 500;
}
.menu a:hover, .menu a:focus-visible { background: var(--grijs); color: var(--roze-donker); }
.menu [aria-current="page"] { color: var(--roze-donker); box-shadow: inset 0 -3px 0 var(--roze); }

/* submenu */
.menu ul.menu__sub {
  position: absolute; top: 100%; left: 0; min-width: 15rem;
  flex-direction: column; gap: 0;
  background: var(--wit); border: 1px solid var(--grijs-rand); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(28,58,89,.16);
  padding: .35rem; display: none; z-index: 30;
}
.menu li:hover > .menu__sub,
.menu li:focus-within > .menu__sub { display: flex; }
.menu__sub a { white-space: nowrap; }
.menu__sub a { font-weight: 400; }

/* --- hero: kop en knoppen links, zwaan rechts -------------------------- */

.hero {
  max-width: var(--breed);
  margin-inline: auto;
  padding: clamp(1.6rem, 3vw, 2.8rem) 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: center;
}

.hero h1 {
  margin: 0 0 .9rem;
  font-size: clamp(1.7rem, 1.2rem + 1.55vw, 2.35rem);
}
.hero__uitleg {
  margin: 0 0 1.5rem;
  font-size: clamp(1rem, .97rem + .25vw, 1.12rem);
  color: var(--tekst-zacht);
  max-width: 32em;
}
.hero__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }

.hero__beeld { margin: 0; }
.hero__beeld img {
  width: 100%; height: auto;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(28,58,89,.24);
}
.hero__beeld figcaption {
  margin-top: .9rem;
  font-size: .97rem; line-height: 1.55; color: var(--tekst-zacht);
  border-left: 3px solid var(--roze); padding-left: .9rem;
}
.hero__beeld figcaption strong { color: var(--blauw); }
.hero__label {
  display: block;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .78rem; font-weight: 700; color: var(--roze-donker);
  margin-bottom: .35rem;
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 1.6rem; }
  /* op een telefoon eerst de kop, dan pas de foto */
  .hero h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2rem); }
  .hero__uitleg { margin-bottom: 1.3rem; }
  .hero__knoppen .knop { flex: 1 1 auto; text-align: center; }
}

.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- paginakop ------------------------------------------------------------ */

.paginakop { background: var(--roze); color: #fff; padding-block: 1.6rem; }
.paginakop h1 { color: #fff; margin: 0; }

.kruimels { background: #F7F8FA; border-bottom: 1px solid var(--grijs-rand); font-size: .95rem; }
.kruimels ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0; padding-block: .65rem;
}
.kruimels li { margin: 0; }
.kruimels li + li::before { content: "›"; margin-right: .45rem; color: var(--tekst-zacht); }
.kruimels a { color: var(--tekst-zacht); }
.kruimels [aria-current] { color: var(--tekst); }

/* --- hoofdinhoud ---------------------------------------------------------- */

.inhoud { padding-block: 2.2rem 2.8rem; }
.inhoud .omhulsel > * { max-width: var(--lees); }
.inhoud .omhulsel > h1,
.inhoud .omhulsel > h2,
.inhoud .omhulsel > .blokken,
.inhoud .omhulsel > .voorstel { max-width: none; }

/* --- voorstelblok: tekst links, portret rechts --------------------------- */

.voorstel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: 2.4rem;
}
.voorstel__tekst { max-width: 40rem; }
.voorstel__tekst > :first-child { margin-top: 0; }
.voorstel__tekst > :last-child { margin-bottom: 0; }

/* contactkaartje voor Denise, naast de introtekst */
.persoonskaart {
  width: 100%; max-width: 20rem;
  background: var(--wit);
  border: 1px solid var(--grijs-rand);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(28,58,89,.12);
  padding: 1.7rem 1.4rem 1.5rem;
  text-align: center;
}
.persoonskaart .persoonskaart__foto {
  width: 128px; height: 128px;
  border-radius: 50%; object-fit: cover; object-position: center 34%;
  margin: 0 auto 1rem;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--roze);
}
.persoonskaart__naam { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--blauw); }
.persoonskaart__rol  { margin: .15rem 0 1.2rem; color: var(--tekst-zacht); font-size: .98rem; }
.persoonskaart__acties { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.persoonskaart__acties li { margin: 0; }
.pk-knop {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .7rem 1rem; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.pk-knop svg { width: 1.2rem; height: 1.2rem; fill: currentColor; flex: none; }
.pk-knop::after { content: none !important; }
.pk-knop--bellen { background: var(--roze); color: #fff !important; }
.pk-knop--bellen:hover { background: var(--roze-donker); }
.pk-knop--mail { background: #fff; color: var(--blauw) !important; border: 2px solid var(--grijs-rand); }
.pk-knop--mail:hover { border-color: var(--blauw); }

@media (max-width: 720px) {
  .voorstel { grid-template-columns: 1fr; gap: 1.8rem; }
  .persoonskaart { margin-inline: auto; }
}

/* --- contentpagina met contactkaartje als zijbalk ------------------------- */

.met-zijbalk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.inhoud .omhulsel > .met-zijbalk { max-width: none; }
.hoofdkolom { min-width: 0; }
.hoofdkolom > * { max-width: var(--lees); }
.hoofdkolom > h1,
.hoofdkolom > h2,
.hoofdkolom > .verder { max-width: none; }
.met-zijbalk .persoonskaart { position: sticky; top: 1.5rem; }
/* in de smallere hoofdkolom geen gefloatte foto's: die botsen met de zijbalk */
.hoofdkolom .portret { float: none; display: block; margin: 0 0 1.4rem; }

@media (max-width: 860px) {
  .met-zijbalk { grid-template-columns: 1fr; }
  .met-zijbalk .persoonskaart { position: static; margin: 1.5rem auto 0; }
}

.inhoud img { border-radius: 8px; margin: 1.4rem 0; }
.inhoud img[width]:not([width="100%"]) { display: inline-block; }

.inhoud ul, .inhoud ol { padding-left: 1.35rem; }

/* intro-alinea, iets groter en zachter */
.inhoud .lead {
  font-size: 1.15rem; line-height: 1.55; color: var(--tekst-zacht);
  margin-bottom: 1.3rem;
}

/* wetscitaat als nette blockquote */
.wetcitaat {
  margin: 1.6rem 0; padding: .1rem 0 .1rem 1.2rem;
  border-left: 4px solid var(--roze);
  color: var(--tekst);
}
.wetcitaat p { font-style: italic; margin-bottom: .5rem; }
.wetcitaat cite { font-style: normal; font-size: .95rem; color: var(--tekst-zacht); }

/* takenlijst met vinkjes in plaats van bolletjes */
.taken { list-style: none; padding-left: 0; margin-bottom: 1.4rem; }
.taken li {
  position: relative; padding-left: 2rem; margin-bottom: .55rem;
}
.taken li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 1.3rem; height: 1.3rem; flex: none;
  background: var(--turquoise);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.portret {
  float: right; width: 220px; margin: .3rem 0 1.2rem 1.8rem;
  border-radius: 10px; box-shadow: 0 6px 18px rgba(28,58,89,.18);
}
@media (max-width: 620px) {
  .portret { float: none; width: 190px; margin: 0 0 1.2rem; }
}

.inhoud table {
  border-collapse: collapse; width: 100%; max-width: var(--lees); margin-bottom: 1.5rem;
}
.inhoud th, .inhoud td {
  border: 1px solid var(--grijs-rand); padding: .6rem .8rem; text-align: left;
}
.inhoud th { background: var(--grijs); color: var(--blauw); }

/* opvallende melding, bijv. tarieven nog in te vullen */
.melding {
  border-left: 5px solid var(--turquoise);
  background: #F1FAF9; padding: 1rem 1.2rem; border-radius: 0 8px 8px 0;
  margin-bottom: 1.5rem;
}
.melding p:last-child { margin-bottom: 0; }

/* --- drie blokken op de startpagina --------------------------------------- */

.blokken { display: grid; gap: 1.3rem; grid-template-columns: repeat(3, 1fr); margin-block: 2.1rem; }
.blokken:first-child { margin-top: 0; }
.blok {
  border: 1px solid var(--grijs-rand); border-top: 5px solid var(--roze);
  border-radius: 10px; padding: 1.35rem 1.4rem; background: var(--wit);
  display: flex; flex-direction: column;
}
.blok h2 {
  margin: 0 0 .55rem; font-size: 1.05rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--roze-donker);
}
.blok p { color: var(--tekst-zacht); flex: 1; }
.blok a {
  font-weight: 700; text-transform: uppercase; font-size: .92rem; letter-spacing: .05em;
  display: inline-block; padding-block: .5rem;
}

/* --- externe links: klein pictogram, opent in nieuw tabblad --------------- */

a[target="_blank"]:not(.knop):not(.voet__aegis a):not(.contactkaart__lijst a)::after {
  content: "";
  display: inline-block;
  width: .62em; height: .62em;
  margin-left: .32em;
  vertical-align: .04em;
  background: currentColor;
  opacity: .75;
  -webkit-mask: var(--pijl) center / contain no-repeat;
          mask: var(--pijl) center / contain no-repeat;
}
.voet__aegis a::after { content: none; }

/* --- knoppen -------------------------------------------------------------- */

.knop {
  display: inline-block; background: var(--roze); color: #fff !important;
  padding: .8rem 1.5rem; border-radius: 6px; font-weight: 700; text-decoration: none;
}
.knop:hover { background: var(--roze-donker); }
.knop--licht { background: #fff; color: var(--roze-donker) !important; }
.knop--licht:hover { background: var(--grijs); }
.knop--rand {
  background: transparent; color: var(--blauw) !important;
  border: 2px solid var(--blauw); padding-block: calc(.8rem - 2px);
}
.knop--rand:hover { background: var(--blauw); color: #fff !important; }

/* --- oproepbalk ----------------------------------------------------------- */

.oproep { background: var(--roze); color: #fff; padding-block: 1.6rem; }
.oproep .omhulsel {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.oproep p { margin: 0; font-size: 1.1rem; font-weight: 500; }

/* --- voettekst ------------------------------------------------------------ */

.voet { background: var(--blauw); color: #D5DEE7; padding-block: 2.8rem 2rem; }
.voet a { color: #fff; }
.voet h2 { color: #fff; font-size: 1.1rem; margin: 0 0 .9rem; }
.voet__kolommen { display: grid; gap: 2.2rem; grid-template-columns: 1.2fr .9fr 1fr; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: .5rem; }
.voet address { font-style: normal; line-height: 1.75; }
.voet__aegis img { max-width: 210px; background: none; }
.voet__aegis a { display: inline-block; }

.voetbalk { background: var(--roze-donker); color: #fff; font-size: .95rem; }
.voetbalk .omhulsel {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  justify-content: space-between; padding-block: .8rem;
}
.voetbalk a { color: #fff; }

/* --- smallere schermen ---------------------------------------------------- */

@media (max-width: 900px) {
  .blokken { grid-template-columns: 1fr; }
  .voet__kolommen { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body { font-size: 1.0625rem; }
  .menuknop { display: inline-flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--wit); border-bottom: 1px solid var(--grijs-rand);
    box-shadow: 0 12px 24px rgba(28,58,89,.12); padding: .6rem 1.25rem 1rem; z-index: 40;
  }
  .kop .omhulsel { position: relative; flex-wrap: wrap; }
  .menu.is-open { display: block; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a { padding: .75rem .4rem; border-bottom: 1px solid var(--grijs); }
  .menu ul.menu__sub {
    position: static; display: flex; border: 0; box-shadow: none;
    padding: 0 0 0 1.1rem; min-width: 0;
  }
  .bovenbalk .omhulsel { justify-content: center; }
  .oproep .omhulsel { flex-direction: column; align-items: flex-start; }
}

/* --- afdrukken ------------------------------------------------------------ */

@media print {
  .bovenbalk, .menu, .menuknop, .oproep, .banner, .kruimels { display: none; }
  body { font-size: 11pt; color: #000; }
  .voet { background: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   Zwevende contactknop
   ========================================================================== */

.contactzweef {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
}

/* de samengevouwen pil */
.contactzweef__pil {
  position: relative;
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--roze); color: #fff;
  border: 0; border-radius: 999px; padding: .5rem 1.8rem .5rem .5rem;
  font: inherit; font-weight: 700; font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 10px 30px rgba(220,54,104,.5);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.contactzweef__pil:hover {
  background: var(--roze-donker); transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 36px rgba(220,54,104,.6);
}
.contactzweef__pil img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff;
}
/* zachte pulserende ring om de aandacht te trekken */
.contactzweef__pil::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(220,54,104,.55);
  animation: contactPuls 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes contactPuls {
  0%   { box-shadow: 0 0 0 0 rgba(220,54,104,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(220,54,104,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,54,104,0); }
}
@media (prefers-reduced-motion: reduce) {
  .contactzweef__pil::after { animation: none; }
}

/* op desktop staat de contactkaart al vast in beeld (zijbalk + bovenbalk);
   de zwevende knop is daar dubbelop en zou de kaart overlappen. Alleen op
   telefoon/tablet tonen, waar het de handigste snelle actie is. */
@media (min-width: 861px) {
  .contactzweef { display: none; }
}
.contactzweef.is-open .contactzweef__pil { display: none; }

/* de uitgeklapte kaart */
.contactkaart {
  position: relative;
  width: min(21rem, calc(100vw - 2.5rem));
  background: var(--blauw); color: #fff;
  border-radius: 18px; padding: 2.9rem 1.5rem 1.5rem;
  box-shadow: 0 18px 48px rgba(15,30,45,.42);
  text-align: center;
  animation: kaartOp .18s ease-out;
}
@keyframes kaartOp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contactkaart { animation: none; }
  .contactzweef__pil { transition: none; }
}

.contactkaart__foto {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--blauw);
  box-shadow: 0 0 0 2px var(--roze);
}

.contactkaart__sluit {
  position: absolute; top: .6rem; right: .6rem;
  width: 2.1rem; height: 2.1rem; padding: .35rem;
  background: rgba(255,255,255,.14); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
}
.contactkaart__sluit:hover { background: rgba(255,255,255,.26); }
.contactkaart__sluit svg { width: 100%; height: 100%; fill: currentColor; }

.contactkaart__naam { margin: .2rem 0 .1rem; font-size: 1.3rem; font-weight: 700; }
.contactkaart__rol  { margin: 0 0 1rem; color: #AFC0D0; font-size: .98rem; line-height: 1.45; }

.contactkaart__lijst { list-style: none; margin: 0 0 1.2rem; padding: 0; text-align: left; }
.contactkaart__lijst li { margin: 0; border-top: 1px solid rgba(255,255,255,.16); }
.contactkaart__lijst a {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem .2rem; color: #fff; text-decoration: none; font-weight: 500;
}
.contactkaart__lijst a:hover { color: #fff; text-decoration: underline; }
.contactkaart__lijst a::after { content: none; }
.contactkaart__lijst svg { width: 1.4rem; height: 1.4rem; fill: var(--roze); flex: none; }

.contactkaart__knop {
  display: block; background: var(--roze); color: #fff !important;
  padding: .85rem 1rem; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.contactkaart__knop:hover { background: var(--roze-donker); }
.contactkaart__knop::after { content: none !important; }

@media (max-width: 480px) {
  .contactzweef { right: .8rem; bottom: .8rem; left: .8rem; align-items: flex-end; }
  .contactzweef__pil { padding-right: 1.1rem; }
}

@media print { .contactzweef { display: none; } }

.contactkaart__uren {
  margin: .85rem 0 0; font-size: .88rem; line-height: 1.45; color: #AFC0D0;
}

/* de zwevende knop mag de footerlinks niet afdekken (alleen waar de knop
   nog zichtbaar is: tussen 821 en 860px; daarboven is de knop verborgen) */
@media (min-width: 821px) and (max-width: 860px) {
  .voetbalk .omhulsel { padding-right: 13rem; }
}
@media (max-width: 820px) {
  .voetbalk .omhulsel { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Cookievenster, linksonder (rechtsonder zit de contactknop)
   ========================================================================== */

.cookievenster {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 70;
  width: min(23rem, calc(100vw - 2.5rem));
  background: var(--wit); color: var(--tekst);
  border: 1px solid var(--grijs-rand); border-top: 5px solid var(--roze);
  border-radius: 12px; padding: 1.3rem 1.4rem;
  box-shadow: 0 16px 40px rgba(15,30,45,.28);
  animation: cookieOp .2s ease-out;
}
@keyframes cookieOp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cookievenster { animation: none; } }

.cookievenster h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.cookievenster p { margin: 0 0 1rem; font-size: .97rem; line-height: 1.6; }

.cookievenster__knoppen { display: flex; gap: .7rem; }

/* weigeren en accepteren even opvallend: eis van de Autoriteit Persoonsgegevens */
.cookieknop {
  flex: 1; padding: .7rem .9rem; border-radius: 8px;
  font: inherit; font-weight: 700; font-size: .97rem; cursor: pointer;
}
.cookieknop--nee { background: var(--wit); color: var(--blauw); border: 2px solid var(--blauw); }
.cookieknop--nee:hover { background: var(--grijs); }
.cookieknop--ja { background: var(--roze); color: #fff; border: 2px solid var(--roze); }
.cookieknop--ja:hover { background: var(--roze-donker); border-color: var(--roze-donker); }

.cookievenster__meer { margin: .9rem 0 0; font-size: .9rem; }
.cookievenster__meer a { color: var(--tekst-zacht); }

@media (max-width: 820px) {
  .cookievenster { left: .8rem; right: .8rem; bottom: 5.5rem; width: auto; }
}

@media print { .cookievenster { display: none; } }

/* ==========================================================================
   Verbeteringen uit de doorloop
   ========================================================================== */

/* --- blok met verwante pagina's ------------------------------------------ */

.verder {
  margin-top: 2.4rem;
  border-top: 2px solid var(--grijs-rand);
  padding-top: 1.4rem;
  max-width: none !important;
}
.verder h2 { margin-top: 0; font-size: 1.2rem; }
.verder ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.verder li { margin: 0; display: flex; flex-direction: column; }
.verder span { flex: 1; }
.verder a {
  display: block; font-weight: 700; text-decoration: none;
  padding: .9rem 1rem .3rem;
  border: 1px solid var(--grijs-rand); border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.verder a:hover { background: #F7F8FA; text-decoration: underline; }
.verder span {
  display: block; font-size: .95rem; color: var(--tekst-zacht);
  padding: 0 1rem .9rem;
  border: 1px solid var(--grijs-rand); border-top: 0;
  border-radius: 0 0 8px 8px;
}

/* --- contactpagina: bellen en mailen als grote knoppen -------------------- */

.contactwegen {
  display: grid; gap: 1rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  max-width: none !important;
}
.contactweg {
  display: block; text-decoration: none;
  background: var(--blauw); color: #fff !important;
  border-radius: 10px; padding: 1.1rem 1.3rem;
  transition: background .15s ease;
}
.contactweg:hover { background: #16304a; }
.contactweg__label {
  display: block; font-size: .85rem; letter-spacing: .12em;
  text-transform: uppercase; color: #A9C0D4; margin-bottom: .2rem;
}
.contactweg__waarde { display: block; font-size: 1.3rem; font-weight: 700; }
.contactweg::after { content: none !important; }

/* --- ruimere raakvlakken op een telefoon --------------------------------- */

@media (max-width: 820px) {
  .voet li a,
  .inhoud ul li > a:only-child,
  .kruimels a {
    display: inline-block;
    padding-block: .45rem;
  }
  .voet li { margin-bottom: .2rem; }
  .voetbalk a { display: inline-block; padding-block: .5rem; }
  .bovenbalk a { display: inline-block; padding-block: .35rem; }
  .voet address a { display: inline-block; padding-block: .35rem; }
}