/* ==========================================================================
   Trouwwebsite Koen & Sarah — mobile first
   ========================================================================== */

:root {
  /* basis */
  --bg: #fdfaf6;
  --wit: #ffffff;
  --tekst: #2b2523;
  --gedempt: #80766f;

  /* accenten uit het design */
  --rood: #b23a2e;        /* verhaal-tijdlijn, countdown-cijfers */
  --rood-diep: #8e2d23;
  --oranje: #d9822b;      /* programma-tijdlijn */
  --oranje-diep: #b06318;
  --roze: #c98d87;        /* dusty rose: knoppen, checkboxes */
  --roze-diep: #a96760;

  /* zachte sectievlakken */
  --lavendel: #efeaf6;    /* ons verhaal */
  --salie: #edf2ea;       /* locatie */
  --zand: #f7f2e9;        /* plattegrond + divider-band */
  --amber-zacht: #fbf3e4; /* cadeau */
  --nevel: #edf1f5;       /* muziek */
  --blos: #f9efe9;        /* rsvp */

  /* afgeleiden — bestaande namen blijven zodat knoppen/chips/focus meekleuren */
  --accent: var(--roze);
  --accent-diep: var(--roze-diep);
  --accent-zacht: #f3e2de;
  --lijn: rgba(43, 37, 35, 0.12);
  --ok-bg: #e6eedd;
  --ok-tekst: #3f5230;
  --fout-bg: #f6dcd6;
  --fout-tekst: #8c3325;
  --schaduw: 0 18px 50px rgba(43, 37, 35, 0.08);
  --radius: 20px;
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", cursive;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kop-hoogte: 68px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  font-variant-numeric: lining-nums;
}

h2 { font-size: clamp(34px, 7vw, 52px); letter-spacing: -0.02em; }
h3 { font-size: 22px; }

p { margin: 0 0 12px; }

a { color: var(--accent-diep); }

/* ---------- bouwstenen ---------- */

.omvat {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
}

.omvat--smal { max-width: 720px; }

.boventitel {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.scheiding {
  width: 72px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
  margin: 18px auto 22px;
}

.sectie {
  padding: 64px 0;
  text-align: center;
  scroll-margin-top: calc(var(--kop-hoogte) + 12px);
}

.sectie--wit { background: var(--wit); }

.sectie--lavendel { background: var(--lavendel); }
.sectie--salie { background: var(--salie); }
.sectie--zand { background: var(--zand); }
.sectie--amber { background: var(--amber-zacht); }
.sectie--nevel { background: var(--nevel); }
.sectie--blos { background: var(--blos); }

.sectie__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 4vw, 24px);
  color: var(--tekst);
  margin: 2px 0 10px;
}

.sectie__intro {
  max-width: 560px;
  margin: 0 auto 26px;
  color: var(--gedempt);
  font-size: 17px;
}

.klein {
  font-size: 13.5px;
  color: var(--gedempt);
  margin-top: 12px;
}

.optioneel {
  font-weight: 400;
  color: var(--gedempt);
  font-size: 13px;
}

.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.spring {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tekst);
  color: var(--wit);
  padding: 10px 16px;
  z-index: 100;
}

.spring:focus { left: 8px; top: 8px; }

/* knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--wit);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.knop:hover { background: var(--accent-diep); border-color: var(--accent-diep); }
.knop:active { transform: scale(0.98); }

.knop--geest {
  background: transparent;
  color: var(--accent-diep);
}

.knop--geest:hover { background: rgba(201, 141, 135, 0.14); color: var(--accent-diep); }

.knop--vol { width: 100%; }

.knop--klein {
  min-height: 38px;
  padding: 7px 18px;
  font-size: 14px;
}

.stille-knop {
  margin-top: 14px;
  background: none;
  border: none;
  font: inherit;
  font-size: 14px;
  color: var(--gedempt);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}

.chip {
  display: inline-block;
  margin: 0 0 22px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent-zacht);
  color: var(--accent-diep);
  font-size: 14px;
  font-weight: 600;
}

.volgt-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px dashed var(--accent);
  color: var(--accent-diep);
  font-size: 14.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.6);
}

.volgt-chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

/* fotoplek: nette placeholder zolang er nog geen echte foto staat */
.foto-plek {
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, var(--accent-zacht), var(--lavendel) 55%, var(--zand));
  aspect-ratio: 4 / 3;
}

.foto-plek__teken {
  font-family: var(--script);
  font-size: 34px;
  color: rgba(43, 37, 35, 0.28);
}

/* ---------- flash-berichten ---------- */

.flitsen {
  position: fixed;
  top: calc(var(--kop-hoogte) + 14px);
  left: 12px;
  right: 12px;
  z-index: 60;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}

.flits {
  max-width: 560px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--schaduw);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.flits--ok { background: var(--ok-bg); color: var(--ok-tekst); }
.flits--fout { background: var(--fout-bg); color: var(--fout-tekst); }

.flits.weg { opacity: 0; transform: translateY(-8px); }

/* ---------- vaste kop + menu ---------- */

.kop {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(calc(100% - 24px), 1020px);
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(43, 37, 35, 0.08);
}

.kop__logo {
  font-family: var(--serif);
  font-size: 22px;
  text-decoration: none;
  color: var(--tekst);
  letter-spacing: 0.04em;
}

.kop__logo span { color: var(--accent); }

.kop__nav { display: none; }

.kop__cta { margin-left: auto; }

.menu-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst);
  cursor: pointer;
}

.menu-knop__lijnen {
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu-knop__lijnen::before,
.menu-knop__lijnen::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease;
}

.menu-knop__lijnen::before { top: -5px; }
.menu-knop__lijnen::after { top: 5px; }

body.menu-open .menu-knop__lijnen { background: transparent; }
body.menu-open .menu-knop__lijnen::before { transform: translateY(5px) rotate(45deg); }
body.menu-open .menu-knop__lijnen::after { transform: translateY(-5px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background:
    radial-gradient(circle at top left, var(--lavendel) 0, transparent 45%),
    var(--bg);
  overflow-y: auto;
  padding: calc(var(--kop-hoogte) + 24px) 24px 48px;
}

.menu nav {
  display: grid;
  gap: 4px;
  max-width: 420px;
  margin: 0 auto;
}

.menu a {
  font-family: var(--serif);
  font-size: 27px;
  text-decoration: none;
  color: var(--tekst);
  padding: 9px 6px;
  border-bottom: 1px solid var(--lijn);
}

.menu a:last-child { border-bottom: none; }

body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */

.held {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0 22px 56px;
  background:
    radial-gradient(circle at 50% 0%, var(--blos) 0, transparent 55%),
    var(--wit);
}

/* hero-foto over de volle breedte, met golvende onderrand (design) */
.held__foto {
  align-self: stretch;
  margin: 0 -22px 14px;
  height: min(52svh, 460px);
  aspect-ratio: auto;
  overflow: hidden;
  clip-path: url(#golfrand);
}

.held__foto img { width: 100%; height: 100%; object-fit: cover; }

.held__script {
  font-family: var(--script);
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.25;
  color: var(--roze-diep);
  margin: 4px 0 8px;
}

.held__namen {
  font-size: clamp(42px, 11vw, 84px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.held__namen .amp {
  color: var(--accent);
  font-style: italic;
  padding: 0 0.06em;
}

.held__datum {
  font-size: clamp(18px, 4vw, 24px);
  font-family: var(--serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-bottom: 26px;
}

.aftellen {
  display: flex;
  gap: 10px;
  margin: 0 0 32px;
}

.aftellen__blok {
  min-width: 68px;
  padding: 12px 8px 10px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(43, 37, 35, 0.05);
}

.aftellen__blok span {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--rood);
  font-variant-numeric: lining-nums tabular-nums;
}

.aftellen__blok small {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedempt);
}

.held__acties {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 340px;
}

/* ---------- tussenbandjes: divider met tik-animatie per blok ---------- */

.tussenband {
  display: grid;
  place-items: center;
  height: 56px;
  background: var(--zand);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  color: var(--roze);
}

.tussenband svg { display: block; }

.tussenband__knop {
  display: grid;
  place-items: center;
  min-width: 160px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease;
}

.tussenband__knop:active { transform: scale(0.92); }

.tussenband__knop > * { grid-area: 1 / 1; }

/* svg-onderdelen laten transformeren rond hun eigen middelpunt */
.tussenband__knop g,
.tussenband__knop path,
.tussenband__knop circle,
.tussenband__knop ellipse { transform-box: fill-box; transform-origin: center; }

/* verstopte accenten */
.band-vonk, .band-flits, .band-rimpel { opacity: 0; }

/* --- wissel-bandjes (ringen<->datum, envelop<->hart) --- */
.band-laag { transition: opacity 0.45s ease, transform 0.45s ease; }
.band-laag--b { opacity: 0; transform: translateY(7px) scale(0.7); pointer-events: none; }
.is-om .band-laag--a { opacity: 0; transform: translateY(-7px) scale(0.7); }
.is-om .band-laag--b { opacity: 1; transform: none; }

.band-datum {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--roze-diep);
  white-space: nowrap;
}

/* --- programma: proostende glazen --- */
.band-glas { transform-origin: 50% 88%; }
.speel .band-glas--l { animation: band-proost-l 0.9s ease; }
.speel .band-glas--r { animation: band-proost-r 0.9s ease; }
.speel .band-vonk { animation: band-vonkje 0.9s ease; }

@keyframes band-proost-l { 30%, 55% { transform: rotate(9deg) translateX(1.5px); } }
@keyframes band-proost-r { 30%, 55% { transform: rotate(-9deg) translateX(-1.5px); } }
@keyframes band-vonkje {
  0%, 28% { opacity: 0; transform: scale(0.2); }
  45% { opacity: 1; transform: scale(1.25); }
  75%, 100% { opacity: 0; transform: scale(0.4); }
}

/* --- locatie: stuiterende pin --- */
.speel .band-pin { animation: band-stuiter 0.8s cubic-bezier(0.3, 1.4, 0.4, 1); }
.speel .band-rimpel { animation: band-rimpeling 0.8s ease; }

@keyframes band-stuiter {
  28% { transform: translateY(-7px); }
  52% { transform: translateY(0) scaleY(0.88) scaleX(1.1); }
  72% { transform: translateY(-3px); }
}
@keyframes band-rimpeling {
  0%, 40% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* --- plattegrond: kompasnaald draait een rondje --- */
.speel .band-naald { animation: band-draai 1s cubic-bezier(0.55, 0.15, 0.3, 1); }
@keyframes band-draai { to { transform: rotate(1turn); } }

/* --- dresscode: zwaaiende hanger --- */
.band-hanger { transform-origin: 50% 10%; }
.speel .band-hanger { animation: band-zwaai 1s ease-in-out; }
@keyframes band-zwaai {
  22% { transform: rotate(13deg); }
  48% { transform: rotate(-10deg); }
  72% { transform: rotate(5deg); }
}

/* --- cadeau: wiebelend pakje --- */
.speel .band-cadeau { animation: band-wiebel 0.7s ease; }
@keyframes band-wiebel {
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(3deg); }
}

/* --- foto's: camera klikt + flitsje --- */
.speel .band-camera { animation: band-klik 0.6s ease; }
.speel .band-flits { animation: band-flitsje 0.6s ease; }
@keyframes band-klik { 25% { transform: scale(0.88); } 48% { transform: scale(1.05); } }
@keyframes band-flitsje {
  0%, 22% { opacity: 0; transform: scale(0.2); }
  38% { opacity: 1; transform: scale(1.3); }
  65%, 100% { opacity: 0; }
}

/* --- muziek: dansende noot --- */
.band-noot { transform-origin: 50% 78%; }
.speel .band-noot { animation: band-dans 0.9s ease; }
@keyframes band-dans {
  20% { transform: translateY(-5px) rotate(-8deg); }
  40% { transform: translateY(0) rotate(6deg); }
  62% { transform: translateY(-3px) rotate(-4deg); }
  82% { transform: translateY(0) rotate(0deg); }
}

/* --- gastenboek: veer schrijft een krul --- */
.band-kras { stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset 0.5s ease; }
.speel .band-kras { animation: band-schrijf 1s ease forwards; }
.speel .band-veer { animation: band-pennetje 1s ease; }
@keyframes band-schrijf { to { stroke-dashoffset: 0; } }
@keyframes band-pennetje {
  18% { transform: rotate(-8deg) translate(-1px, 1px); }
  40% { transform: rotate(-4deg) translate(2px, 0); }
  62% { transform: rotate(-9deg) translate(5px, 1px); }
  84% { transform: rotate(-3deg) translate(8px, 0); }
}

/* ---------- tijdlijn (verhaal + programma) ---------- */

.tijdlijn {
  --tl-kleur: var(--accent);
  --tl-halo: var(--wit);
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
  position: relative;
}

.tijdlijn--rood { --tl-kleur: var(--rood); }
.tijdlijn--oranje { --tl-kleur: var(--oranje); }
.sectie--lavendel .tijdlijn { --tl-halo: var(--lavendel); }

.tijdlijn::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--tl-kleur);
}

.tijdlijn__item {
  position: relative;
  width: 50%;
  padding: 0 18px 36px 0;
  text-align: right;
}

.tijdlijn__item:last-child { padding-bottom: 4px; }

.tijdlijn__item:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 36px 18px;
  text-align: left;
}

.tijdlijn__item::before {
  content: "";
  position: absolute;
  top: 7px;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--tl-kleur);
  box-shadow: 0 0 0 4px var(--tl-halo);
}

.tijdlijn__item:nth-child(even)::before {
  right: auto;
  left: -5px;
}

.tijdlijn__label {
  position: absolute;
  top: 3px;
  left: calc(100% + 16px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tl-kleur);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.tijdlijn__item:nth-child(even) .tijdlijn__label {
  left: auto;
  right: calc(100% + 16px);
}

.tijdlijn__inhoud h3 { font-size: 20px; margin-bottom: 8px; }

.tijdlijn__inhoud p {
  margin: 8px 0 0;
  color: var(--gedempt);
  font-size: 14.5px;
  hyphens: auto;
  overflow-wrap: break-word;
}

.tijdlijn__foto {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(43, 37, 35, 0.08);
}

.tijdlijn__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Gespiegelde tijdlijn: eerste item rechts van de lijn, dan links, enz.
   Zo spiegelt het programma de verhaal-tijdlijn. */
.tijdlijn--spiegel .tijdlijn__item {
  margin-left: 50%;
  padding-left: 18px;
  padding-right: 0;
  text-align: left;
}

.tijdlijn--spiegel .tijdlijn__item:nth-child(even) {
  margin-left: 0;
  padding-left: 0;
  padding-right: 18px;
  text-align: right;
}

.tijdlijn--spiegel .tijdlijn__item::before { right: auto; left: -5px; }
.tijdlijn--spiegel .tijdlijn__item:nth-child(even)::before { left: auto; right: -5px; }

.tijdlijn--spiegel .tijdlijn__item .tijdlijn__label {
  left: auto;
  right: calc(100% + 16px);
}

.tijdlijn--spiegel .tijdlijn__item:nth-child(even) .tijdlijn__label {
  right: auto;
  left: calc(100% + 16px);
}

/* ==========================================================================
   POORT-PIN — NIET WIJZIGEN
   De donkere poort blijft exact zoals vóór de redesign. Dit blok pint de
   oude tokens en de oude opmaak van gedeelde klassen op de poort-body,
   zodat wijzigingen aan de site de poort nooit kunnen raken.
   ========================================================================== */

body.poort-body {
  --bg: #f8f4ef;
  --wit: #ffffff;
  --tekst: #2f2a28;
  --gedempt: #7a6f68;
  --accent: #b98b73;
  --accent-diep: #7a4f3c;
  --accent-zacht: #ead8ce;
  --lijn: rgba(185, 139, 115, 0.25);
  --ok-bg: #e3ead9;
  --ok-tekst: #43552f;
  --fout-bg: #f3d9d2;
  --fout-tekst: #8c3b25;
  --schaduw: 0 18px 50px rgba(47, 42, 40, 0.09);
  --radius: 20px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kop-hoogte: 60px;
}

body.poort-body .boventitel {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

body.poort-body .klein {
  font-size: 13.5px;
  color: var(--gedempt);
  margin-top: 12px;
}

body.poort-body .knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--wit);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.poort-body .knop:hover { background: var(--accent-diep); border-color: var(--accent-diep); }
body.poort-body .knop:active { transform: scale(0.98); }
body.poort-body .knop--vol { width: 100%; }

body.poort-body .chip {
  display: inline-block;
  margin: 0 0 22px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent-zacht);
  color: var(--accent-diep);
  font-size: 14px;
  font-weight: 600;
}

body.poort-body .aftellen {
  display: flex;
  gap: 10px;
  margin: 0 0 32px;
}

body.poort-body .aftellen__blok {
  min-width: 68px;
  padding: 12px 8px 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(47, 42, 40, 0.06);
}

body.poort-body .aftellen__blok span {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}

body.poort-body .aftellen__blok small {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedempt);
}

body.poort-body .flitsen {
  position: fixed;
  top: calc(var(--kop-hoogte) + 10px);
  left: 12px;
  right: 12px;
  z-index: 60;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}

body.poort-body .flits {
  max-width: 560px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--schaduw);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

body.poort-body .flits--ok { background: var(--ok-bg); color: var(--ok-tekst); }
body.poort-body .flits--fout { background: var(--fout-bg); color: var(--fout-tekst); }
body.poort-body .flits.weg { opacity: 0; transform: translateY(-8px); }

/* Poort-eigen overrides opnieuw bevestigd: deze moeten van de base-pins
   hierboven winnen, precies zoals ze dat vóór de redesign van de kale
   klassen wonnen. */
body.poort-body .poort__boven { color: #cf9f7c; margin-bottom: 12px; }
body.poort-body .aftellen--poort { margin-bottom: 30px; }

body.poort-body .poort .aftellen__blok {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(220, 174, 137, 0.28);
  box-shadow: none;
}

body.poort-body .poort .aftellen__blok span { color: #f2e4d1; }
body.poort-body .poort .aftellen__blok small { color: #b99f88; }

body.poort-body .poort .chip { background: rgba(220, 174, 137, 0.2); color: #f2e4d1; }

body.poort-body .poort .klein { color: #a8907a; }
body.poort-body .poort .klein a { color: #dcae89; }

@media (min-width: 560px) {
  body.poort-body .aftellen__blok { min-width: 84px; }
}

/* ---------- poort: donkere, mystieke scène met intro-choreografie ---------- */

.poort {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 44px 22px 26px;
  background:
    radial-gradient(circle at 50% 36%, #4f3d33 0%, #33271f 55%, #201a15 100%);
}

.poort__deeltjes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.poort__midden {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.poort__ringen {
  width: 132px;
  margin-bottom: 2px;
  overflow: visible;
}

.poort__ring {
  fill: none;
  stroke: #dcae89;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 7px rgba(233, 195, 152, 0.5));
}

.poort__ring--2 { stroke: #c69674; }

.poort__boven { color: #cf9f7c; margin-bottom: 12px; }

.poort__namen {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 12vw, 76px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #f7ead9;
  text-shadow: 0 0 26px rgba(233, 195, 152, 0.35);
}

.poort__namen .amp {
  color: #d9a98d;
  font-style: italic;
  padding: 0 0.06em;
}

.poort__datum {
  margin: 14px 0 22px;
  font-family: var(--serif);
  font-size: clamp(15px, 3.4vw, 19px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cdb39b;
}

.aftellen--poort { margin-bottom: 30px; }

.poort .aftellen__blok {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(220, 174, 137, 0.28);
  box-shadow: none;
}

.poort .aftellen__blok span { color: #f2e4d1; }
.poort .aftellen__blok small { color: #b99f88; }

.poort .chip { background: rgba(220, 174, 137, 0.2); color: #f2e4d1; }

.poort__kaart {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(220, 174, 137, 0.28);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 26px 22px 20px;
}

.poort__slot { font-size: 24px; margin: 0 0 6px; }

.poort__tekst { color: #cbb9a4; font-size: 15.5px; }

.poort__taalvraag {
  margin: 2px 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cf9f7c;
}

.taal-knoppen { display: grid; gap: 10px; }

.taal-knoppen form { display: contents; }

.taal-knop {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 174, 137, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #f2e4d1;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.taal-knop:hover {
  background: rgba(220, 174, 137, 0.2);
  border-color: #dcae89;
}

.poort__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.poort__form input {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-size: 16px;
  text-align: center;
  color: #f7ead9;
  background: rgba(32, 26, 21, 0.55);
  border: 1px solid rgba(220, 174, 137, 0.32);
  border-radius: 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.poort__form input::placeholder { color: rgba(233, 220, 203, 0.45); }

.poort__form input:focus {
  border-color: #dcae89;
  box-shadow: 0 0 0 3px rgba(220, 174, 137, 0.22);
}

.poort .klein { color: #a8907a; }
.poort .klein a { color: #dcae89; }

.taal-wissel {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.taal-wissel__knop {
  min-width: 44px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(220, 174, 137, 0.35);
  background: none;
  color: #cbb9a4;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.taal-wissel__knop:hover { background: rgba(220, 174, 137, 0.16); }

.taal-wissel__knop--actief,
.taal-wissel__knop--actief:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--wit);
  cursor: default;
}

.poort__credit {
  margin-top: 34px;
  font-size: 12.5px;
  color: #8d7a69;
}

/* taalwissel in de voet van de lichte site */
.taal-wissel--voet { margin-top: 12px; }

.taal-wissel--voet .taal-wissel__knop {
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.25);
}

.taal-wissel--voet .taal-wissel__knop:hover { background: rgba(255, 255, 255, 0.1); }

.taal-wissel--voet .taal-wissel__knop--actief,
.taal-wissel--voet .taal-wissel__knop--actief:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--wit);
}

/* eerste bezoek: de scène bouwt zich rustig op */
html.intro-actief .poort__ring {
  stroke-dashoffset: 100;
  animation: poort-teken 1.7s ease forwards 0.3s;
}

html.intro-actief .poort__ring--2 { animation-delay: 0.8s; }

html.intro-actief .poort__boven { opacity: 0; animation: poort-zacht 1.2s ease forwards 1s; }
html.intro-actief .poort__namen { opacity: 0; animation: poort-namen 2s ease forwards 1.3s; }
html.intro-actief .poort__datum { opacity: 0; animation: poort-zacht 1.4s ease forwards 2.1s; }
html.intro-actief .aftellen--poort { opacity: 0; animation: poort-zacht 1.4s ease forwards 2.5s; }
html.intro-actief .poort__kaart { opacity: 0; animation: poort-omhoog 1.2s ease forwards 2.9s; }
html.intro-actief .poort__credit { opacity: 0; animation: poort-zacht 1.2s ease forwards 3.5s; }

/* overgeslagen (tik/toets) of afgerond: alles direct zichtbaar */
html.intro-klaar .poort__boven,
html.intro-klaar .poort__namen,
html.intro-klaar .poort__datum,
html.intro-klaar .aftellen--poort,
html.intro-klaar .poort__kaart,
html.intro-klaar .poort__credit {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html.intro-klaar .poort__ring {
  animation: none !important;
  stroke-dashoffset: 0 !important;
}

@keyframes poort-teken {
  to { stroke-dashoffset: 0; }
}

@keyframes poort-zacht {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes poort-namen {
  from { opacity: 0; letter-spacing: 0.22em; transform: translateY(10px); }
  to { opacity: 1; letter-spacing: 0.02em; transform: none; }
}

@keyframes poort-omhoog {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- overgang poort -> site ---------- */

/* Vertrek: na een ingestuurde code zakt de inhoud weg tussen de lichtjes. */
html.poort-vertrek .poort__midden {
  opacity: 0;
  transform: translateY(-10px) scale(0.99);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Aankomst: de site begint in hetzelfde donker, dat rustig oplost. */
.aankomst {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 36%, #4f3d33 0%, #33271f 55%, #201a15 100%);
  animation: aankomst-weg 0.9s ease forwards 0.12s;
}

@keyframes aankomst-weg {
  to { opacity: 0; visibility: hidden; }
}

body.binnenkomst .held > * {
  opacity: 0;
  animation: held-op 0.8s ease forwards;
}

body.binnenkomst .held > *:nth-child(1) { animation-delay: 0.35s; }
body.binnenkomst .held > *:nth-child(2) { animation-delay: 0.45s; }
body.binnenkomst .held > *:nth-child(3) { animation-delay: 0.55s; }
body.binnenkomst .held > *:nth-child(4) { animation-delay: 0.65s; }
body.binnenkomst .held > *:nth-child(5) { animation-delay: 0.75s; }
body.binnenkomst .held > *:nth-child(6) { animation-delay: 0.85s; }

@keyframes held-op {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- locatie ---------- */

.locatie-kaart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--schaduw);
  margin-bottom: 18px;
}

.locatie-kaart address {
  font-style: normal;
  font-size: 16.5px;
  line-height: 1.7;
}

.kaart-omlijsting {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--lijn);
  box-shadow: var(--schaduw);
}

.kaart-omlijsting iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

/* ---------- plattegrond ---------- */

.plattegrond {
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
  box-shadow: var(--schaduw);
  margin: 0 auto;
}

/* ---------- programma: locatieregel met pin ---------- */

.programma-locatie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  max-width: 560px;
  margin: 0 auto 30px;
  font-size: 14.5px;
  color: var(--gedempt);
}

.programma-locatie__pin { flex: none; color: var(--oranje); }

.programma-locatie strong { color: var(--tekst); font-weight: 600; }

.programma-locatie__route {
  color: var(--oranje-diep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- dresscode ---------- */

.kleuren__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  margin: 16px 0 2px;
}

.kleuren {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.kleuren__bol {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid var(--wit);
  box-shadow: 0 4px 14px rgba(43, 37, 35, 0.18);
}

/* ---------- formulieren ---------- */

.formulier {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  text-align: left;
}

.formulier--kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 24px 20px 26px;
  box-shadow: var(--schaduw);
}

.formulier label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}

.formulier input,
.formulier textarea {
  width: 100%;
  margin-top: 6px;
  padding: 13px 14px;
  font: inherit;
  font-size: 16px; /* voorkomt inzoomen op iOS */
  color: var(--tekst);
  background: var(--bg);
  border: 1px solid var(--lijn);
  border-radius: 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formulier--kaart input,
.formulier--kaart textarea { background: var(--wit); }

.formulier input:focus,
.formulier textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 141, 135, 0.2);
}

.formulier textarea { resize: vertical; }

.formulier__rij { display: grid; gap: 16px; }

.formulier .knop { justify-self: start; }
.formulier .knop--vol { justify-self: stretch; }

/* segment-keuzes (radio's als knoppen) */

.segment {
  border: none;
  margin: 0;
  padding: 0;
}

.segment legend {
  font-size: 14.5px;
  font-weight: 600;
  padding: 0;
  margin-bottom: 8px;
}

.segment__opties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.segment__opties label {
  flex: 1 1 130px;
  position: relative;
}

.segment__opties input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.segment__opties span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--wit);
  font-weight: 600;
  font-size: 14.5px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.segment__opties input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--wit);
}

.segment__opties input:focus-visible + span {
  outline: 2px solid var(--accent-diep);
  outline-offset: 2px;
}

[data-alleen-ja] { display: grid; gap: 16px; }

[data-alleen-ja].uit,
[data-introducee].uit { display: none; }

/* allergie-vinkjes */

.vinkjes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 2px 0 16px;
}

.formulier .vinkje {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

.formulier .vinkje input {
  appearance: auto;
  -webkit-appearance: auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  flex: none;
  border: none;
  background: none;
  box-shadow: none;
  accent-color: var(--roze);
  cursor: pointer;
}

/* honeypot: onzichtbaar voor mensen */
.niet-invullen {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* ---------- muziek: spotify-embed ---------- */

.spotify-omlijsting {
  max-width: 560px;
  margin: 0 auto 22px;
  border-radius: 14px;
  overflow: hidden;
}

.spotify-omlijsting iframe { display: block; border: 0; }

/* ---------- gastenboek ---------- */

.berichten {
  margin-top: 34px;
  display: grid;
  gap: 14px;
  text-align: left;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.bericht {
  background: var(--blos);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  border-bottom-left-radius: 6px;
  padding: 16px 18px 12px;
  box-shadow: 0 8px 22px rgba(47, 42, 40, 0.05);
}

.bericht__tekst {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
}

.bericht__meta {
  margin: 0;
  font-size: 13px;
  color: var(--gedempt);
}

/* ---------- voet ---------- */

.voet {
  background: var(--tekst);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 44px 20px 38px;
}

.voet__namen {
  font-family: var(--serif);
  font-size: 30px;
  margin-bottom: 4px;
  color: var(--wit);
}

.voet p { margin: 0 0 6px; font-size: 14px; }

.voet__credit {
  margin-top: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-body { background: var(--bg); }

.login {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login__kaart {
  width: 100%;
  max-width: 400px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 32px 26px;
  text-align: center;
}

.login__titel {
  font-size: 34px;
  margin-bottom: 10px;
}

.login .formulier { text-align: left; }

.waarschuwing {
  background: var(--fout-bg);
  color: var(--fout-tekst);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  text-align: left;
}

.waarschuwing code { font-size: 13px; }

.admin-kop {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(253, 250, 246, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lijn);
}

.admin-kop nav {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

.admin-kop .stille-knop { margin: 0; }

.admin {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  display: grid;
  gap: 22px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.stat {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
}

.stat span {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}

.stat small { color: var(--gedempt); font-size: 12.5px; }

.admin-blok {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 18px 16px 20px;
  box-shadow: 0 8px 22px rgba(47, 42, 40, 0.04);
}

.admin-blok__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-blok h2 { font-size: 24px; }

.code-form {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px dashed var(--lijn);
  border-radius: 14px;
}

.code-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.code-form input,
.code-form select {
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--tekst);
  background: var(--bg);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  outline: none;
}

.code-form input:focus,
.code-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 141, 135, 0.2);
}

.code-form button { align-self: end; justify-self: start; }

@media (min-width: 700px) {
  .code-form { grid-template-columns: 1.2fr 1fr 1fr auto; align-items: end; }
}

.code-chip {
  display: inline-block;
  background: var(--accent-zacht);
  color: var(--accent-diep);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.tabel-scroll { overflow-x: auto; }

.admin table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 640px;
}

.admin th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gedempt);
  padding: 8px 10px;
  border-bottom: 1px solid var(--lijn);
  white-space: nowrap;
}

.admin td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(43, 37, 35, 0.1);
  vertical-align: top;
}

.rij--nee td { color: var(--gedempt); }

.verwijder button {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--lijn);
  background: none;
  color: var(--fout-tekst);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}

.verwijder button:hover { background: var(--fout-bg); }

.bericht--admin {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bericht--admin .bericht__tekst { font-size: 16px; }

/* ==========================================================================
   Groter scherm
   ========================================================================== */

@media (min-width: 560px) {
  .formulier__rij { grid-template-columns: 1fr 1fr; }
  .held__acties { flex-direction: row; justify-content: center; max-width: none; }
  .aftellen__blok { min-width: 84px; }
}

@media (min-width: 900px) {
  .sectie { padding: 96px 0; }

  .kop { padding: 0 10px 0 26px; }

  .kop__nav {
    display: flex;
    gap: 20px;
    margin-left: auto;
    font-size: 14px;
  }

  .kop__nav a {
    text-decoration: none;
    color: var(--tekst);
    opacity: 0.75;
    transition: opacity 0.15s ease;
  }

  .kop__nav a:hover { opacity: 1; }

  .kop__cta { margin-left: 0; }

  .menu-knop { display: none; }

  .tijdlijn__item { padding: 0 44px 48px 0; }
  .tijdlijn__item:nth-child(even) { padding: 0 0 48px 44px; }
  .tijdlijn--spiegel .tijdlijn__item { padding-left: 44px; padding-right: 0; }
  .tijdlijn--spiegel .tijdlijn__item:nth-child(even) { padding-left: 0; padding-right: 44px; }
  .tijdlijn__label { font-size: 13.5px; }
  .held__foto { height: min(62svh, 560px); margin-bottom: 22px; }

  .kaart-omlijsting iframe { height: 380px; }

  .locatie-kaart {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 26px 30px;
  }

  .formulier--kaart { padding: 34px 34px 36px; }
}

/* ---------- rustige animaties ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}