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

body {
  background: #ffffff;
}

/* wrapper: begrenst het kader op max 1440px breed en centreert het.
   container-type: inline-size maakt dat alle cqw-eenheden hieronder
   zich verhouden tot DEZE breedte (max 1440px) i.p.v. het viewport. */
.hero-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  container-type: inline-size;
}

/* canvas = Figma frame (1440 x 1024), schaalbaar op cqw
   ipv vaste px. Alles blijft verhoudingsgewijs 1:1 t.o.v. Figma,
   maar stopt met groeien zodra 1440px bereikt is. */
.baraka-hero {
  position: relative;
  width: 100cqw;
  height: 71.1111cqw; /* 1024/1440 * 100cqw - houdt de Figma-aspect ratio aan */
  /* nooit hoger dan 900px en nooit hoger dan het scherm, zodat het
     kader altijd heel in beeld staat */
  max-height: min(900px, 100vh);
  background: #ffffff;
  overflow: hidden;
  /* geen border-radius: buitenhoeken zijn recht en volledig wit.
     De ronding zit nu op het INNER venster (.white-kader). */
}

.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* video section: node 2001:99 - x:-176 y:0 w:1792 h:1024
   height:100% i.p.v. vaste cqw, zodat de video bij de 900px-cap
   de hele hero blijft vullen (crop) en er geen gat ontstaat. */
.video-section {
  position: absolute;
  left: -12.2222cqw;
  top: 0;
  width: 124.4444cqw;
  height: 100%;
}

/* white kader: node 2001:97 - nu opgebouwd als een element dat exact
   het INNER venster is (met ronde hoeken), en met een enorme
   box-shadow spread alles daarbuiten massief wit vult.
   Een element = een vorm = geen naadjes/dunne randjes mogelijk. */
.white-kader {
  position: absolute;
  top: 1.8264cqw;
  right: 1.8021cqw;
  bottom: 1.8264cqw;
  left: 1.9021cqw;
  border-radius: 4cqw; /* INNER ronding - pas deze waarde aan naar smaak */
  box-shadow: 0 0 0 100vmax #ffffff; /* vult alles buiten het venster met wit */
  pointer-events: none;
}

/* logo: node 2002:4 - lager en iets kleiner dan in Figma, zodat het
   op de lichte muur valt en niet op het donkere plafond */
.logo {
  position: absolute;
  left: 39.97cqw;
  top: 17cqw;
  width: 41.6cqw;
  height: 17cqw;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* scroll group: overlay op volledige canvas */
.scroll-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* scroll pill bg: node 2001:101 - x:624 y:895 w:191 h:67 */
.scroll-pill {
  position: absolute;
  left: 43.3333cqw;
  bottom: 4.3056cqw; /* onder-verankerd i.p.v. top, zodat het bij de
                        900px-cap netjes onderaan blijft staan */
  width: 13.2639cqw;
  height: 4.6528cqw;
  background: #fdfffa;
  border-radius: 2.1875cqw;
}

/* scroll cirkel: node 2001:102 - x:751 y:899 w:59 h:59
   Zelf nagebouwd als CSS-cirkel met zachte beige gradient
   (kleuren afgeleid van de Figma-render, niet uit variables -
   Figma gaf geen design tokens terug voor deze node). */
.scroll-circle {
  position: absolute;
  left: 52.1528cqw;
  bottom: 4.5833cqw;
  width: 4.0972cqw;
  height: 4.0972cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #d2c9b6 0%, #c4baa4 50%, #ada288 100%);
}

/* arrow-down: node 2002:20 - x:765 y:913 w:32 h:32 */
.scroll-arrow {
  position: absolute;
  left: 53.125cqw;
  bottom: 5.4861cqw;
  width: 2.2222cqw;
  height: 2.2222cqw;
  animation: scroll-nudge 3s ease-in-out infinite;
}

/* Subtiele trilling: korte beweging in de eerste ~0.6s,
   daarna stil tot de cyclus van 3s opnieuw begint. */
@keyframes scroll-nudge {
  0%   { transform: translateY(0); }
  4%   { transform: translateY(0.18cqw); }
  8%   { transform: translateY(-0.12cqw); }
  12%  { transform: translateY(0.18cqw); }
  16%  { transform: translateY(-0.08cqw); }
  20%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* Respecteert de systeeminstelling voor minder beweging */
@media (prefers-reduced-motion: reduce) {
  .scroll-arrow { animation: none; }
}

/* scroll text: node 2002:23 - x:673 y:909 w:54 h:40 */
.scroll-text {
  position: absolute;
  left: 46.7361cqw;
  bottom: 5.2083cqw;
  font-family: 'League Spartan', sans-serif;
  font-weight: 400;
  font-size: 1.6667cqw;
  line-height: 2.7778cqw;
  color: #8f7e5c;
  white-space: nowrap;
}

/* nav: de pil vormt zich naar de inhoud, dus bij het weghalen of
   toevoegen van een menu-item klopt de breedte vanzelf */
.nav-menu {
  position: absolute;
  right: 4.2327cqw;  /* 35px vanaf de zichtbare foto */
  top: 4.2570cqw;    /* 35px vanaf de zichtbare foto */
  height: 4cqw;
  z-index: 40;       /* boven het prikbord (20) en de contactpagina (30) */
  display: flex;
  align-items: center;
  gap: 2.2458cqw;
  padding: 0 1.9cqw;
  background: #fdfffa;
  border-radius: 2cqw;
}

.nav-menu a {
  font-family: 'League Spartan', sans-serif;
  font-weight: 400;
  font-size: 1.5401cqw;
  line-height: 2.5667cqw;
  color: #8f7e5c;
  text-decoration: none;
  white-space: nowrap;
}

/* steunen knop: node 2010:40 - 92% van Figma-formaat */
.steunen-btn {
  position: relative;
  display: inline-grid;
  width: 6.9942cqw;
  height: 2.4383cqw;
}

.steunen-bg {
  position: absolute;
  left: 0;
  top: 0.0642cqw;
  width: 6.9942cqw;
  height: 2.3742cqw;
  border-radius: 1.187cqw;
  /* zelfde diagonale fade als het scroll-rondje (.scroll-circle),
     geen losse rectangle-afbeelding meer nodig */
  background: linear-gradient(135deg, #d2c9b6 0%, #c4baa4 50%, #ada288 100%);
  pointer-events: none;
}

.steunen-label {
  position: relative;
  margin-left: 0.8983cqw;
  font-family: 'League Spartan', sans-serif;
  font-weight: 400;
  font-size: 1.5401cqw;
  line-height: 2.5667cqw;
  color: #ebebeb;
  white-space: nowrap;
}

/* ============================================================
   PRIKBORD OVERLAY
   ============================================================ */

/* body mag niet natively scrollen: de overgang wordt door JS
   afgehandeld zodat de bounce in beide richtingen gelijk is */
html, body {
  overflow: hidden;
  height: 100%;
}

/* het kader staat altijd verticaal in het midden van het scherm */
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-wrap {
  position: relative;
  /* clipt het prikbord-paneel zolang het onder beeld staat,
     zodat het pas zichtbaar wordt als het omhoog komt */
  overflow: hidden;
}

/* klikbaar vlak over de scroll-pill */
.scroll-hit {
  position: absolute;
  left: 43.3333cqw;
  bottom: 4.3056cqw;
  width: 13.2639cqw;
  height: 4.6528cqw;
  border: none;
  background: transparent;
  border-radius: 2.1875cqw;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
}

/* het paneel zelf: start net onder beeld, schuift omhoog.
   inset 2.7778cqw = 40px bij volledige breedte (1440px), zodat er
   rondom 40px van de achtergrond zichtbaar blijft. */
.prikbord-panel {
  position: absolute;
  top: 2.7778cqw;
  right: 2.7778cqw;
  bottom: 2.7778cqw;
  left: 2.7778cqw;
  z-index: 20;
  /* visible i.p.v. hidden, anders knipt het paneel de schaduw
     van de afbeelding af (.hero-wrap clipt het geheel al) */
  overflow: visible;
  /* geen ronde hoeken */
  border-radius: 0;
  /* scale(0.8) = 20% kleiner, vanuit het midden */
  transform-origin: center center;
  transform: translateY(calc(100% + 8cqw)) scale(0.8);
  /* bounce-easing: licht doorschieten aan het eind */
  transition: transform 900ms cubic-bezier(0.34, 1.42, 0.42, 1);
  will-change: transform;
}

.prikbord-panel.is-open {
  transform: translateY(0) scale(0.8);
}

/* Het bord houdt exact de verhouding van Prikbord.jpg en wordt
   binnen het paneel gepast, zodat de posities uit het dashboard naar
   hetzelfde punt op de afbeelding wijzen.

   Dit rekent CSS zelf uit: het paneel is een maatcontainer, dus
   100cqw/100cqh zijn de breedte en hoogte daarvan. Eerder deed JS
   dit, maar dan kon het bord in een halve stand blijven hangen. */
.prikbord-panel {
  display: grid;
  place-items: center;
  container-type: size;
}

.prikbord-board {
  /* verhouding van Prikbord.jpg; JS werkt deze bij zodra de
     afbeelding geladen is, zodat een andere foto ook klopt */
  --ar-liggend: 1.5179;
  --ar-staand:  0.6588;

  position: relative;
  width: min(100cqw, calc(100cqh * var(--ar-liggend)));
  aspect-ratio: var(--ar-liggend);
  container-type: size;
  /* subtiele soft shadow */
  filter: drop-shadow(0 0.7cqw 1.5cqw rgba(60, 48, 30, 0.22));
}

.prikbord-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

.prikbord-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pin {
  position: absolute;
  transform-origin: center center;
}

.pin img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.4cqw 0.8cqw rgba(60, 48, 30, 0.3));
}

.pin-text {
  position: absolute;
  inset: 12%;
  display: grid;
  /* align-content + min-content rijen: regels blijven netjes onder
     elkaar i.p.v. uitgesmeerd over de hoogte van de sticker */
  align-content: center;
  justify-items: center;
  grid-auto-rows: min-content;
  text-align: center;
  font-family: 'League Spartan', sans-serif;
  /* font-size, font-weight en color komen uit de opslag, via JS */
  line-height: 1.25;
  overflow: hidden;
  word-break: break-word;
  /* pre-wrap: getypte enters blijven zichtbaar */
  white-space: pre-wrap;
}
.pin-text:empty { display: none; }

/* de scroll-knop blijft in alle standen bovenop liggen */
.scroll-group {
  z-index: 40;
}

/* bij de laatste stand wijst de pijl omhoog. De rotate-eigenschap
   staat los van transform, dus de trilling blijft werken en keert
   vanzelf mee naar boven. */
.is-contact-open .scroll-arrow {
  rotate: 180deg;
}
.scroll-arrow {
  transition: rotate 420ms cubic-bezier(0.34, 1.3, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .prikbord-panel { transition-duration: 1ms; }
}

/* =========================================================
   CONTACTPAGINA
   schuift over het prikbord bij de tweede scroll
   ========================================================= */

.contact-panel {
  position: absolute;
  /* valt precies samen met het venster binnen het witte kader */
  top: 1.8264cqw;
  right: 1.8021cqw;
  bottom: 1.8264cqw;
  left: 1.9021cqw;
  z-index: 30;
  overflow: hidden;
  border-radius: 4cqw;
  background: #efe9dd;
  transform: translateY(calc(100% + 6cqw));
  transition: transform 900ms cubic-bezier(0.34, 1.42, 0.42, 1);
  will-change: transform;
}

.contact-panel.is-open { transform: translateY(0); }

.contact-inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 3.4cqw;
  row-gap: 1.8cqw;
  /* ruimte boven voor de menupil en onder voor de scroll-knop */
  padding: 8cqw 5cqw 9.6cqw 6cqw;
}

.contact-info { grid-column: 1; grid-row: 1; }
.contact-form { grid-column: 1; grid-row: 2; }
.contact-map  { grid-column: 2; grid-row: 1 / 3; }

.contact-eyebrow {
  font-family: 'League Spartan', sans-serif;
  font-size: 1.25cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a2927055;
  color: #a29270;
  margin-bottom: 0.7cqw;
}

.contact-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 2.8cqw;
  line-height: 1.05;
  color: #5d4f3a;
  margin-bottom: 1.6cqw;
}

.contact-rows {
  display: grid;
  gap: 1.1cqw;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1.3cqw;
  text-decoration: none;
  color: #6b5c44;
  font-family: 'League Spartan', sans-serif;
  font-size: 1.3cqw;
  line-height: 1.45;
  transition: color 180ms ease;
}
.contact-row:hover { color: #3f3527; }

.contact-icon {
  flex: none;
  width: 2.3cqw;
  height: 2.3cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #d2c9b6 0%, #c4baa4 50%, #ada288 100%);
  color: #fdfffa;
}
.contact-icon svg { width: 58%; height: 58%; }

.contact-map {
  position: relative;
  height: 100%;
  border-radius: 2.4cqw;
  overflow: hidden;
  background: #ded5c4;
  box-shadow: 0 0.8cqw 2cqw rgba(60, 48, 30, 0.22);
}

.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .contact-panel { transition-duration: 1ms; }
}

/* =========================================================
   STEUNEN - pop-up precies op het kader
   ========================================================= */

.steun-overlay {
  position: absolute;
  /* valt samen met het venster binnen het witte kader */
  top: 1.8264cqw;
  right: 1.8021cqw;
  bottom: 1.8264cqw;
  left: 1.9021cqw;
  z-index: 50;
  border-radius: 4cqw;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 3cqw;
  background: rgba(46, 38, 26, 0.45);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.steun-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease, visibility 0s;
}

.steun-card {
  position: relative;
  width: min(46cqw, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 3.4cqw 3.6cqw 3cqw;
  border-radius: 2.4cqw;
  background: #fdfffa;
  box-shadow: 0 1.4cqw 3.4cqw rgba(40, 32, 20, 0.34);
  text-align: center;
  font-family: 'League Spartan', sans-serif;
  transform: translateY(2cqw) scale(0.96);
  transition: transform 420ms cubic-bezier(0.34, 1.4, 0.5, 1);
}

.steun-overlay.is-open .steun-card { transform: none; }

.steun-close {
  position: absolute;
  top: 1.2cqw;
  right: 1.2cqw;
  width: 2.4cqw;
  height: 2.4cqw;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #efe9dd;
  color: #6b5c44;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.steun-close svg { width: 62%; height: 62%; }
.steun-close:hover { background: #ded5c4; color: #3f3527; }

.steun-eyebrow {
  font-size: 1.1cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a29270;
  margin-bottom: 0.7cqw;
}

.steun-title {
  font-size: 2.6cqw;
  font-weight: 700;
  line-height: 1.1;
  color: #5d4f3a;
  margin-bottom: 0.9cqw;
}

.steun-intro {
  font-size: 1.25cqw;
  line-height: 1.5;
  color: #8f7e5c;
  margin-bottom: 2.2cqw;
}

/* eenmalig / maandelijks */
.steun-freq {
  display: inline-flex;
  gap: 0.3cqw;
  padding: 0.3cqw;
  border-radius: 150px;
  background: #efe9dd;
  margin-bottom: 1.8cqw;
}

.freq-opt {
  border: none;
  background: none;
  border-radius: 150px;
  padding: 0.6cqw 1.7cqw;
  font-family: inherit;
  font-size: 1.2cqw;
  color: #8f7e5c;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.freq-opt.is-active {
  background: #fdfffa;
  color: #5d4f3a;
  box-shadow: 0 0.15cqw 0.4cqw rgba(40, 32, 20, 0.12);
}

/* bedragen */
.steun-bedragen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7cqw;
  margin-bottom: 2.2cqw;
}

.bedrag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25cqw;
  height: 3.6cqw;
  border: 0.14cqw solid #ded5c4;
  border-radius: 1.2cqw;
  background: #fdfffa;
  font-family: inherit;
  font-size: 1.3cqw;
  color: #6b5c44;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.bedrag:hover { border-color: #c4baa4; }

.bedrag.is-active {
  background: linear-gradient(135deg, #d2c9b6 0%, #c4baa4 50%, #ada288 100%);
  border-color: transparent;
  color: #fdfffa;
}

.bedrag-eigen { padding: 0 0.6cqw; }
.bedrag-eigen input {
  width: 100%;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 1.3cqw;
  color: inherit;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.bedrag-eigen input::-webkit-outer-spin-button,
.bedrag-eigen input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bedrag-eigen input::placeholder { color: #b3a78e; }

.steun-cta {
  width: 100%;
  height: 4cqw;
  border: none;
  border-radius: 2cqw;
  background: linear-gradient(135deg, #a8906a 0%, #8f7757 100%);
  color: #fdfffa;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.5cqw;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.steun-cta:hover {
  transform: translateY(-0.12cqw);
  box-shadow: 0 0.6cqw 1.4cqw rgba(60, 48, 30, 0.3);
}

.steun-voet {
  margin-top: 1.3cqw;
  font-size: 1cqw;
  color: #b3a78e;
}

.steun-overlay button:focus-visible,
.steun-overlay input:focus-visible {
  outline: 0.2cqw solid #8f7757;
  outline-offset: 0.2cqw;
}

@media (prefers-reduced-motion: reduce) {
  .steun-overlay, .steun-card { transition-duration: 1ms; }
}

/* ---------- contactformulier ---------- */

.contact-form {
  display: grid;
  gap: 0.9cqw;
  font-family: 'League Spartan', sans-serif;
  align-self: end;
  width: 100%;
}

.veld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9cqw;
}

.veld {
  display: grid;
  gap: 0.35cqw;
}

.veld > span {
  font-size: 1.05cqw;
  letter-spacing: 0.06em;
  color: #a29270;
}

.veld input,
.veld textarea {
  width: 100%;
  border: 0.12cqw solid #ded5c4;
  border-radius: 1cqw;
  background: #fdfffa;
  padding: 0.75cqw 1cqw;
  font-family: inherit;
  font-size: 1.2cqw;
  line-height: 1.4;
  color: #5d4f3a;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.veld textarea {
  resize: none;
  min-height: 7cqw;
}

.veld input:focus,
.veld textarea:focus {
  border-color: #a8906a;
  box-shadow: 0 0 0 0.2cqw rgba(168, 144, 106, 0.2);
}

.veld input.is-fout,
.veld textarea.is-fout { border-color: #b4462f; }

/* verborgen val voor spamrobots */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-verstuur {
  justify-self: start;
  border: none;
  border-radius: 1.8cqw;
  padding: 0.9cqw 2.6cqw;
  background: linear-gradient(135deg, #a8906a 0%, #8f7757 100%);
  color: #fdfffa;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.3cqw;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.contact-verstuur:hover {
  transform: translateY(-0.12cqw);
  box-shadow: 0 0.5cqw 1.2cqw rgba(60, 48, 30, 0.26);
}
.contact-verstuur[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.contact-melding {
  font-size: 1.1cqw;
  line-height: 1.4;
  color: #6b7a52;
  min-height: 1.5cqw;
}
.contact-melding.is-fout { color: #b4462f; }

.contact-form :focus-visible {
  outline: 0.18cqw solid #8f7757;
  outline-offset: 0.18cqw;
}

/* =========================================================
   MOBIEL - tot 768px
   Dezelfde opbouw, maar op schermhoogte en met leesbare maten.
   Het prikbord schakelt bij deze grens vanzelf over op de
   mobiele plaatsing uit het dashboard (zie script.js).
   ========================================================= */

@media (max-width: 768px) {

  /* het kader vult het scherm */
  .hero-wrap { height: 100dvh; }

  .baraka-hero {
    height: 100%;
    max-height: none;
  }

  /* achtergrond vult en snijdt bij */
  .video-section {
    left: 0;
    width: 100%;
  }

  /* witte rand in vaste maten, anders wordt ze haarfijn */
  .white-kader,
  .contact-panel,
  .steun-overlay {
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border-radius: 26px;
  }

  .white-kader { border-radius: 26px; }

  /* ---------- navigatie ---------- */
  .nav-menu {
    top: 26px;
    right: 20px;
    height: 42px;
    gap: 16px;
    padding: 0 16px;
    border-radius: 21px;
  }
  .nav-menu a { font-size: 15px; line-height: 1.2; }

  .steunen-btn { width: 78px; height: 28px; }
  .steunen-bg  { top: 0; width: 78px; height: 28px; border-radius: 14px; }
  .steunen-label { margin-left: 11px; font-size: 15px; line-height: 28px; }

  /* ---------- logo ---------- */
  .logo {
    left: 50%;
    transform: translateX(-50%);
    top: 33vh;          /* op de lichte muur, onder het plafond */
    width: 74vw;
    height: 30vw;
  }

  /* ---------- scroll-knop ---------- */
  .scroll-pill {
    left: 50%;
    margin-left: -82px;
    bottom: 26px;
    width: 164px;
    height: 50px;
    border-radius: 25px;
  }
  .scroll-circle {
    left: 50%;
    margin-left: 26px;
    bottom: 30px;
    width: 42px;
    height: 42px;
  }
  .scroll-arrow {
    left: 50%;
    margin-left: 36px;
    bottom: 40px;
    width: 22px;
    height: 22px;
  }
  .scroll-text {
    left: 50%;
    margin-left: -60px;
    bottom: 38px;
    font-size: 17px;
    line-height: 26px;
  }
  .scroll-hit {
    left: 50%;
    margin-left: -82px;
    bottom: 26px;
    width: 164px;
    height: 50px;
    border-radius: 25px;
  }

  @keyframes scroll-nudge {
    0%   { transform: translateY(0); }
    4%   { transform: translateY(3px); }
    8%   { transform: translateY(-2px); }
    12%  { transform: translateY(3px); }
    16%  { transform: translateY(-1px); }
    20%  { transform: translateY(0); }
    100% { transform: translateY(0); }
  }

  /* ---------- prikbord ---------- */
  .prikbord-panel {
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    transform: translateY(calc(100% + 40px)) scale(1);
  }
  .prikbord-panel.is-open { transform: translateY(0) scale(1); }

  /* een kwartslag gedraaid; de stickers blijven rechtop staan,
     precies zoals in het dashboard */
  .prikbord-board {
    width: min(100cqw, calc(100cqh * var(--ar-staand)));
    aspect-ratio: var(--ar-staand);
  }
  .prikbord-img {
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* ---------- contactpagina ---------- */
  .contact-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 16px;
    padding: 84px 20px 92px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .contact-info { grid-column: 1; grid-row: 1; }
  .contact-map  { grid-column: 1; grid-row: 2; }
  .contact-form { grid-column: 1; grid-row: 3; }

  .contact-eyebrow { font-size: 11px; margin-bottom: 4px; }
  .contact-title   { font-size: 27px; margin-bottom: 14px; }

  .contact-rows { gap: 10px; }
  .contact-row  { font-size: 14px; gap: 10px; }
  .contact-icon { width: 26px; height: 26px; }

  .contact-form { gap: 10px; align-self: start; }
  .veld-rij { grid-template-columns: 1fr; gap: 10px; }
  .veld > span { font-size: 12px; }
  .veld input,
  .veld textarea {
    font-size: 16px;          /* 16px voorkomt inzoomen op iPhone */
    padding: 10px 12px;
    border-radius: 12px;
    border-width: 1px;
  }
  .veld textarea { min-height: 84px; }

  .contact-verstuur {
    width: 100%;
    padding: 13px 20px;
    font-size: 16px;
    border-radius: 24px;
  }
  .contact-melding { font-size: 13px; min-height: 18px; }

  .contact-map {
    height: 180px;
    border-radius: 18px;
  }

  /* ---------- steunen ---------- */
  .steun-overlay { padding: 18px; }

  .steun-card {
    width: 100%;
    padding: 26px 20px 22px;
    border-radius: 22px;
  }
  .steun-close { top: 12px; right: 12px; width: 30px; height: 30px; }
  .steun-eyebrow { font-size: 11px; margin-bottom: 6px; }
  .steun-title { font-size: 24px; margin-bottom: 8px; }
  .steun-intro { font-size: 14px; margin-bottom: 18px; }

  .steun-freq { gap: 3px; padding: 3px; margin-bottom: 16px; }
  .freq-opt { padding: 8px 16px; font-size: 14px; }

  .steun-bedragen {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 18px;
  }
  .bedrag { height: 46px; font-size: 16px; border-radius: 14px; border-width: 1px; }
  .bedrag-eigen input { font-size: 16px; }

  .steun-cta { height: 50px; font-size: 17px; border-radius: 25px; }
  .steun-voet { margin-top: 12px; font-size: 11px; }
}