/* boat-bookd in de zonsopkomst-stijl: alles wat niet uit be-bookd (style.css en dash.css) komt. */

@keyframes dobberen { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes draaien { to { transform: rotate(360deg); } }
@keyframes wapperen { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg) translateY(1px); } }
@keyframes pulseren { 0%, 100% { opacity: .18; } 50% { opacity: .45; } }
@keyframes knipperen { 0%, 70%, 100% { opacity: 1; } 80% { opacity: .25; } }

.nowrap { white-space: nowrap; }
.lede--breed { max-width: 62ch; }

/* ------------------------------------------------------------------ bovenbalk */
.knop--klein { padding: .55rem 1.05rem; font-size: .95rem; }
.kop__links { display: flex; gap: 1.6rem; }
.kop__nav { align-items: center; gap: 1.6rem; }
.kop__nav .kop__links a { padding: .2rem 0; border-bottom: 2px solid transparent; }
.kop__nav .kop__links a:hover { text-decoration: none; border-bottom-color: currentColor; }
.kop__nav .kop__links a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--zon); }
.kop--licht .kop__links a, .kop--licht .telmenu summary { color: var(--nacht); }
.kop--licht .kop__links a[aria-current="page"] { color: var(--nacht); }
.kop--licht .kop__links a:hover { color: var(--zon-diep); }
.kop__nav a.knop { color: var(--nacht); }
.kop__nav a.knop:hover { color: var(--nacht); text-decoration: none; }

.telmenu { display: none; position: relative; }
.telmenu summary {
  display: flex; align-items: center; gap: .45rem;
  list-style: none; cursor: pointer;
  color: #F3E6D6; font-weight: 500;
}
.telmenu summary::-webkit-details-marker { display: none; }
.telmenu summary::after {
  content: ""; width: .42rem; height: .42rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.telmenu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.telmenu__lijst {
  position: fixed; left: var(--gutter); right: var(--gutter); top: 4.25rem; z-index: 20;
  display: grid; gap: .25rem;
  padding: .6rem;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(11, 31, 53, .08), 0 30px 60px -20px rgba(11, 31, 53, .45);
  animation: menuOpen .22s var(--ease);
}
.kop__nav .telmenu__lijst a {
  padding: .85rem 1rem;
  border-radius: 14px;
  color: var(--nacht); font-weight: 600;
}
.kop__nav .telmenu__lijst a:hover, .kop__nav .telmenu__lijst a[aria-current="page"] { background: var(--zand); text-decoration: none; }

@media (max-width: 760px) {
  .kop__links { display: none; }
  .telmenu { display: block; }
  .kop__nav { gap: 1rem; }
}
@media (max-width: 380px) {
  .logo span { font-size: 1.1rem; }
  .knop--klein { padding: .5rem .8rem; font-size: .88rem; }
}

/* ------------------------------------------------------------------ hero's */
/* Elke header is even hoog: één schermhoogte, met onderaan het water en het zand. Past de tekst
   op een klein scherm niet, dan groeit de header mee in plaats van het zand te bedekken. */
.hero--home, .hero--intro { height: auto; max-height: none; min-height: 100vh; min-height: 100svh; }
.hero--home .hero__tekst, .hero--intro .hero__tekst { padding-bottom: 15rem; }
.hero--home h1 { font-size: clamp(3.4rem, 10vw, 6.5rem); }
.hero__onder {
  margin: 0 auto 1.1rem;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.25;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(7, 20, 38, .45);
}
.hero__onder strong { display: block; font-weight: 400; }
.hero__onder > span { display: block; color: #FFD9B0; }
.hero--home .hero__zin { max-width: 50ch; font-size: clamp(1.05rem, 1.9vw, 1.25rem); text-shadow: 0 2px 14px rgba(7, 20, 38, .45); }

.hero--intro h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.hero--intro .hero__zin { max-width: 52ch; font-size: clamp(1.02rem, 1.7vw, 1.2rem); text-shadow: 0 2px 14px rgba(7, 20, 38, .45); }

.hero--home .knop--rand { background: rgba(11, 31, 53, .42); border-color: rgba(255, 255, 255, .8); backdrop-filter: blur(6px); }
.hero--home .knop--rand:hover { background: rgba(11, 31, 53, .58); }
@media (max-width: 600px) { .voorwerp { transform: translateX(var(--tel, 0)); } }
.kop__nav .telmenu__lijst a.knop { justify-content: center; margin-top: .3rem; border-radius: 999px; background: #21C5C0; }
.knop--aqua { background: #21C5C0; color: var(--nacht); box-shadow: 0 10px 28px -12px rgba(14, 124, 134, .7); }
.knop--aqua:hover { background: #33D1CC; }

.wiel { transform-box: fill-box; transform-origin: center; animation: draaien 5s linear infinite; }
.straal { animation: pulseren 4s ease-in-out infinite; }
.lampje { animation: knipperen 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wiel, .straal, .lampje { animation: none; } }

/* ------------------------------------------------------------------ dashboard-demo's en functies */
.functies-sectie--pagina { padding-top: clamp(3rem, 6vw, 5rem); }
.functies-sectie--pagina .toon:first-child { margin-top: 0; }
.toon h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  margin-bottom: .5em;
  text-wrap: balance;
}
.toon__tekst > p:not(.toon__label) + p { margin-top: -.2em; }
.label-bouw {
  display: inline-block;
  margin-left: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: #FFF1E2;
  border: 1px solid rgba(184, 84, 26, .25);
  color: var(--zon-diep);
  font-size: .68rem;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* Stap 4: eigen kleuren. De primaire kleur wisselt tijdens het afspelen door vier paletten. */
@property --aqua { syntax: "<color>"; inherits: true; initial-value: #1AB5B0; }
.d-palet.p-1 { box-shadow: 0 0 0 calc(2 * var(--px)) #FFFFFF, 0 0 0 calc(4 * var(--px)) var(--navy); }
.d-hex .h { opacity: 0; }
.d-hex .h-1 { opacity: 1; }
.js .podium.speelt .dash--kleuren { animation: paletwissel 10s linear 1s both; }
.js .podium.speelt .d-palet.p-1 { animation: kies1 10s linear 1s both; }
.js .podium.speelt .d-palet.p-2 { animation: kies2 10s linear 1s both; }
.js .podium.speelt .d-palet.p-3 { animation: kies3 10s linear 1s both; }
.js .podium.speelt .d-palet.p-4 { animation: kies4 10s linear 1s both; }
.js .podium.speelt .d-hex .h-1 { animation: hex1 10s linear 1s both; }
.js .podium.speelt .d-hex .h-2 { animation: hex2 10s linear 1s both; }
.js .podium.speelt .d-hex .h-3 { animation: hex3 10s linear 1s both; }
.js .podium.speelt .d-hex .h-4 { animation: hex4 10s linear 1s both; }
.js .podium.speelt .d-staal--sec i { animation: secwissel 10s linear 1s both; }
@keyframes paletwissel {
  0%, 18% { --aqua: #1AB5B0; } 20%, 38% { --aqua: #2563EB; } 40%, 58% { --aqua: #EA580C; } 60%, 78% { --aqua: #16A34A; } 80%, 100% { --aqua: #1AB5B0; }
}
@keyframes secwissel {
  0%, 18% { background: #0B1F35; } 20%, 38% { background: #0F172A; } 40%, 58% { background: #1C1917; } 60%, 78% { background: #052E16; } 80%, 100% { background: #0B1F35; }
}
@keyframes kies1 { 0%, 19%, 80%, 100% { box-shadow: 0 0 0 calc(2 * var(--px)) #FFFFFF, 0 0 0 calc(4 * var(--px)) var(--navy); } 20%, 79% { box-shadow: none; } }
@keyframes kies2 { 0%, 19%, 40%, 100% { box-shadow: none; } 20%, 39% { box-shadow: 0 0 0 calc(2 * var(--px)) #FFFFFF, 0 0 0 calc(4 * var(--px)) var(--navy); } }
@keyframes kies3 { 0%, 39%, 60%, 100% { box-shadow: none; } 40%, 59% { box-shadow: 0 0 0 calc(2 * var(--px)) #FFFFFF, 0 0 0 calc(4 * var(--px)) var(--navy); } }
@keyframes kies4 { 0%, 59%, 80%, 100% { box-shadow: none; } 60%, 79% { box-shadow: 0 0 0 calc(2 * var(--px)) #FFFFFF, 0 0 0 calc(4 * var(--px)) var(--navy); } }
@keyframes hex1 { 0%, 19%, 80%, 100% { opacity: 1; } 20%, 79% { opacity: 0; } }
@keyframes hex2 { 0%, 19%, 40%, 100% { opacity: 0; } 20%, 39% { opacity: 1; } }
@keyframes hex3 { 0%, 39%, 60%, 100% { opacity: 0; } 40%, 59% { opacity: 1; } }
@keyframes hex4 { 0%, 59%, 80%, 100% { opacity: 0; } 60%, 79% { opacity: 1; } }

/* Stap 5: het boekvenster over de site van de verhuurder, in de kleur van die site */
.site--meerkoet .site__nav b { color: #0E5E66; }
.venster__waas { position: absolute; inset: 0; background: rgba(11, 31, 53, .18); }
.d-vars {
  --px: calc(95.6cqi / 1100);
  --aqua: #0E7C86; --aqua-tint: color-mix(in srgb, var(--aqua) 12%, #FFFFFF);
  --navy: #0B1F35; --ink: #3D5166; --muted: #5D7679; --line: #DBE6E8; --paper: #F3F8F9;
  color: var(--navy);
  font-size: calc(14 * var(--px));
}
.venster {
  position: absolute; left: 50%; top: 7%;
  width: 50%;
  margin-left: -25%;
  border-radius: calc(16 * var(--px));
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 .4cqi 1cqi rgba(11, 31, 53, .12), 0 5cqi 10cqi -3cqi rgba(11, 31, 53, .55);
}
.venster__kop { display: flex; align-items: center; justify-content: space-between; padding: calc(14 * var(--px)) calc(18 * var(--px)); background: var(--aqua); color: #FFFFFF; font-weight: 700; }
.venster__kop i { font-style: normal; opacity: .8; }
.venster__body { padding: calc(18 * var(--px)); }
.venster__body .d-voorbeeld__kop { margin-bottom: calc(2 * var(--px)); }
.venster__wat { margin: 0 0 calc(12 * var(--px)); color: var(--muted); font-size: calc(13 * var(--px)); }
.boeknu {
  position: absolute; right: 3cqi; bottom: 3cqi;
  padding: 1.1cqi 2.4cqi;
  border-radius: 99px;
  background: #0E7C86; color: #FFFFFF; font-weight: 700;
  box-shadow: 0 1.4cqi 2.6cqi -1cqi rgba(14, 124, 134, .7);
}
.js .podium.speelt .d-optie--wordt { animation: opduiken .5s var(--ease) var(--d, 0s) both, optiekies .3s 2.6s both; }
.js .podium.klaar .d-optie--wordt, .geen-js .d-optie--wordt { border: calc(1.5 * var(--px)) solid var(--aqua); background: var(--aqua-tint); }
@keyframes optiekies { to { border-color: var(--aqua); background: var(--aqua-tint); box-shadow: inset 0 0 0 calc(.5 * var(--px)) var(--aqua); } }
.js .podium.speelt .tel .keuze-wordt.wa-ja { animation-delay: 3.9s; }

/* Stap 6: de telefoon met de echte app */
.js .podium.speelt .tel--rustig { animation: none; }
.tel__scherm.app { background: #F3F8F9; }
.app-vlag svg, .d-logo svg { width: 100%; height: 100%; }
.app-kop .app-vlag { display: block; width: calc(34 * var(--tp)); height: calc(34 * var(--tp)); margin: 0 auto 0 calc(8 * var(--tp)); }

/* Mailings Flow */
.mailflow {
  position: relative; z-index: 2;
  width: 100%; max-width: 400px;
  padding: 1.25rem;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(11, 31, 53, .05), 0 40px 70px -34px rgba(120, 50, 20, .55);
  transform: rotate(-1.5deg);
}
.mailflow__kop { padding: 0 .25rem .9rem; border-bottom: 1px solid #F0E4D3; }
.mailflow__kop b { display: block; color: var(--nacht); font-family: var(--font-heading); font-weight: 400; font-size: 1.25rem; }
.mailflow__kop small { color: #6B7A8A; font-size: .82rem; }
.mailflow__lijst { position: relative; list-style: none; margin: 0; padding: .9rem 0 0; display: grid; gap: .55rem; }
.mailflow__lijst::before { content: ""; position: absolute; left: 1.15rem; top: 1.6rem; bottom: 1.4rem; width: 2px; background: repeating-linear-gradient(180deg, #F2C9A0 0 4px, transparent 4px 9px); }
.mailflow__lijst li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin: 0; padding: .6rem .5rem; border-radius: 14px; font-size: .9rem; line-height: 1.3; }
.mailflow__lijst b { display: block; color: var(--nacht); }
.mailflow__lijst small { color: #6B7A8A; font-size: .8rem; }
.mailflow__nu { background: #FFF6EC; box-shadow: inset 0 0 0 1px #F7D9B8; }
.mf-icoon { position: relative; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #E3F6F5; }
.mf-icoon svg { width: 1.15rem; fill: none; stroke: #0E8F8A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mailflow__nu .mf-icoon { background: var(--zon); }
.mailflow__nu .mf-icoon svg { stroke: #FFFFFF; }
.mf-badge { padding: .15rem .6rem; border-radius: 99px; background: #E3F6F5; color: #0E6E6A; font-style: normal; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.mf-badge--nu { background: #FDEAD6; color: #9A4A12; }
.mf-badge--later { background: #EEF2F4; color: #55636D; }

/* Analytics: balken die uitlopen */
.js .podium .stap-breed { transform: scaleX(0); }
.js .podium.speelt .stap-breed { animation: verbreden .9s var(--ease) var(--d, 0s) both; }
.js .podium.klaar .stap-breed { transform: none; }
@keyframes verbreden { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ Voor wie: tegels met een tafereel */
.wies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(2rem, 4vw, 3rem); }
.wies--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wie {
  display: flex; flex-direction: column;
  border-radius: 24px;
  background: #FFFFFF;
  overflow: hidden;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #FFFFFF, var(--schaduw-kaart), 0 30px 50px -36px rgba(150, 70, 30, .45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wie:hover, .wie:focus-visible { transform: translateY(-4px); box-shadow: inset 0 1px 0 #FFFFFF, var(--schaduw-hoog), 0 44px 70px -40px rgba(150, 70, 30, .55); }
.tafereel { width: 100%; height: auto; }
.tafereel g { transform-box: fill-box; transform-origin: center bottom; }
.wie:hover .t-boot, .wie:focus-visible .t-boot { animation: dobberen 1.8s ease-in-out infinite; }
.wie:hover .t-boot--2, .wie:focus-visible .t-boot--2 { animation-delay: -.9s; }
.wie:hover .t-wiel, .wie:focus-visible .t-wiel { transform-origin: center; animation: draaien 1.2s linear infinite; }
.wie:hover .t-vlag, .wie:focus-visible .t-vlag { transform-box: fill-box; transform-origin: left center; animation: wapperen 1s ease-in-out infinite; }
.wie__tekst { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.4rem 1.5rem; flex: 1; }
.wie__tekst strong { font-family: var(--font-heading); font-weight: 400; font-size: 1.4rem; color: var(--nacht); line-height: 1.15; }
.wie__tekst span { color: var(--ink); }
.wie__tekst em { margin-top: auto; padding-top: .6rem; font-style: normal; font-weight: 600; color: var(--zon-diep); }
@media (prefers-reduced-motion: reduce) { .wie * { animation: none !important; } .wie { transition: none; } }

/* ------------------------------------------------------------------ Vragen */
.wrap--vragen { max-width: 820px; }
.vragen { display: grid; gap: .75rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.vraag {
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: inset 0 1px 0 #FFFFFF, var(--schaduw-kaart);
}
.vraag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer; list-style: none;
  color: var(--nacht); font-weight: 600; font-size: 1.05rem;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+";
  display: grid; place-items: center; flex: none;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: #FFF1E2; color: var(--zon-diep);
  font-size: 1.25rem; font-weight: 500; line-height: 1;
  transition: transform .25s var(--ease);
}
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag__antwoord { padding: 0 1.4rem 1.3rem; }
.vraag__antwoord a { color: var(--zon-diep); }

/* ------------------------------------------------------------------ Doelgroeppagina's */
.kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.kaarten--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaart {
  position: relative;
  padding: 2.3rem 1.5rem 1.6rem;
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF, #FFFBF5);
  box-shadow: inset 0 1px 0 #FFFFFF, var(--schaduw-kaart), 0 30px 50px -36px rgba(150, 70, 30, .45);
}
.kaart h3 { font-size: 1.25rem; margin-bottom: .45rem; }
.kaart p { margin: 0; }
.kaart__nr { position: absolute; top: 1.1rem; right: 1.3rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; color: var(--zon-diep); }

.punten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.punt { padding: 1.4rem 1.4rem 1.5rem; border-radius: 22px; background: #FFFFFF; box-shadow: var(--schaduw-kaart); }
.punt__icoon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; background: radial-gradient(circle at 35% 30%, #FFF1CF, #FFD9A8); }
.punt__icoon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--zon-diep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.punt h3 { font-size: 1.12rem; margin: .9rem 0 .35rem; }
.punt p { margin: 0; font-size: .97rem; }

.uitlegs { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.uitleg { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.uitleg:nth-child(even) { grid-template-columns: minmax(0, 1fr) 8rem; }
.uitleg:nth-child(even) .uitleg__nr { order: 2; text-align: right; }
.uitleg__nr {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: .9;
  background: linear-gradient(180deg, #F8A65E, #F28C38 55%, #E9A07E);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.uitleg__tekst { max-width: 62ch; }
.uitleg__tekst h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: .6rem; }
.uitleg__tekst p { margin-bottom: .9em; }
.uitleg__tekst p:last-child { margin-bottom: 0; }
.uitleg__tekst a { color: var(--zon-diep); }

.sectie--kort { padding-block: 0 var(--sectie); }
.band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 32px;
  background: linear-gradient(165deg, #FFEBD1 0%, #FAD3AC 55%, #F2AF88 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 30px 60px -28px rgba(150, 70, 30, .45);
}
.band h2 { margin-bottom: .35em; }
.band .lede { margin: 0; max-width: 46ch; color: #5A4636; }
.band .eyebrow { margin-bottom: .6rem; }
.band__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 900px) {
  .kaarten, .punten, .wies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .kaarten, .kaarten--twee, .punten, .wies, .wies--twee { grid-template-columns: minmax(0, 1fr); }
  .uitleg, .uitleg:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .uitleg:nth-child(even) .uitleg__nr { order: 0; text-align: left; }
  .uitleg__nr { font-size: 2.75rem; }
}

/* ------------------------------------------------------------------ Lopende tekst (over ons, juridisch) */
.lees { max-width: 68ch; }
.lees h2 { margin-top: 1.6em; }
.lees h2:first-child { margin-top: 0; }
.lees h3 { font-size: 1.2rem; margin: 1.2em 0 .4em; }
.lees a { color: var(--zon-diep); }
.lees ul { padding-left: 1.2rem; }
.lees li { margin-bottom: .5em; }
.lees--blad {
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 3.25rem);
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: var(--schaduw-kaart);
}
.lees--blad h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.sectie--juridisch { padding-top: clamp(2.5rem, 5vw, 4rem); }
.melding { padding: .9rem 1.1rem; border-radius: 14px; background: #FFF1E2; box-shadow: inset 0 0 0 1px #F7D9B8; color: #6B3A12; }
.hint { font-size: .9rem; color: #6B7A8A; }
/* Nog in te vullen in de juridische pagina's: valt op, zodat niets per ongeluk zo live gaat. */
.invullen { background: #FFE3B8; color: #6B3A12; padding: 0 .25em; border-radius: 4px; }
.voetnoot { max-width: 62ch; margin: 1.75rem 0 0; }

.grenzen {
  position: relative;
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 28px;
  background:
    radial-gradient(1.5px 1.5px at 8% 22%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 31% 12%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 58% 18%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 84% 10%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(120% 90% at 85% 120%, rgba(242, 140, 56, .35), transparent 60%),
    linear-gradient(180deg, #14294A, #1E2F57);
  color: #FFFFFF;
  box-shadow: 0 40px 80px -40px rgba(20, 41, 74, .7);
}
.grenzen__lijst { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: 1.25rem 2.5rem; counter-reset: grens; }
@media (min-width: 720px) { .grenzen__lijst { grid-template-columns: 1fr 1fr; } }
.grenzen__lijst li { position: relative; display: grid; gap: .25rem; padding-left: 2.4rem; margin: 0; }
.grenzen__lijst li::before {
  counter-increment: grens; content: counter(grens);
  position: absolute; left: 0; top: .05em;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFF1CF, #F8A65E);
  color: var(--nacht);
  font: 700 .78rem/1.6rem var(--font-mono); text-align: center;
}
.grenzen__lijst strong { color: #FFFFFF; }
.grenzen__lijst span { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------------ Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__form {
  display: grid; gap: 1.1rem;
  padding: clamp(1.4rem, 4vw, 2.25rem);
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: inset 0 1px 0 #FFFFFF, var(--schaduw-kaart), 0 30px 50px -36px rgba(150, 70, 30, .45);
}
.contact__form .knop { justify-self: start; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.veld { display: grid; gap: .35rem; }
.veld label { font-weight: 600; color: var(--nacht); }
.veld input, .veld textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--lijn);
  border-radius: 14px;
  background: var(--zand);
  color: var(--nacht);
  font: inherit;
}
.veld textarea { resize: vertical; min-height: 9rem; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--zon); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(242, 140, 56, .18); }
.contact__fout { margin: 0; padding: .75rem 1rem; border-radius: 12px; background: #FDE8E7; color: #8F2318; }
.contact__klaar { margin: 0; padding: .9rem 1rem; border-radius: 12px; background: #E3F6F5; color: var(--nacht); }
.contact__privacy { margin: 0; }
.contact__privacy a { color: inherit; }
.contact__direct h2 { font-size: 1.5rem; }
.contact__direct dl { margin: 0 0 1.5rem; display: grid; gap: .9rem; }
.contact__direct dt { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--zon-diep); }
.contact__direct dd { margin: .1rem 0 0; color: var(--nacht); }
.contact__direct a { color: var(--zon-diep); }
@media (max-width: 800px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Voet */
.voet { padding-top: 2.5rem; }
.voet__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; }
.voet__raster h2 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #FFD9B0; margin-bottom: .8rem; }
.voet__raster ul { list-style: none; padding: 0; margin: 0; }
.voet__raster li { margin-bottom: .45rem; }
.voet__raster a { color: #DCE6F0; text-decoration: none; }
.voet__raster a:hover { color: #FFFFFF; text-decoration: underline; }
.voet__zin { margin: .8rem 0 0; font-size: .95rem; max-width: 30ch; }
.voet__contact { margin-top: 1.1rem; font-size: .95rem; }
.voet__regel { padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 860px) { .voet__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .voet__raster { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Telefoon: kleinere hero's en podia */
@media (max-width: 520px) {
  .hero--home .hero__tekst, .hero--intro .hero__tekst { padding-top: 6.5rem; padding-bottom: 12rem; }
  .hero__knoppen .knop { flex: 1 1 auto; justify-content: center; }
  .mailflow { transform: none; }
  .zwever--linksboven { max-width: calc(100% - 10rem); width: auto; }
  .venster { width: 66%; margin-left: -33%; top: 4%; }
}

/* ------------------------------------------------------------------ Cookiemelding (Cookiebanner.astro van de echte site) */
.voet__knop { padding: 0; border: 0; background: none; color: #DCE6F0; font: inherit; cursor: pointer; }
.voet__knop:hover { color: #FFFFFF; text-decoration: underline; }
.cookies { --line: #E7D3B7; --radius-lg: 20px; color: var(--ink); font-family: var(--font-body); }
.cookies a { color: var(--zon-diep); }
.cookies .btn { display: inline-flex; align-items: center; padding: .55rem 1.05rem; border-radius: 999px; font: 600 .9rem var(--font-body); cursor: pointer; }
.cookies .btn--primary { border: 0; background: #21C5C0; color: var(--nacht); }
.cookies .btn--primary:hover { background: #33D1CC; }
.cookies .btn--ghost { border: 1.5px solid var(--lijn); background: #FFFFFF; color: var(--nacht); }

/* ------------------------------------------------------------------ Homepage: functionaliteiten in het kort */
.fns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.fns > .fn { flex: 0 0 calc((100% - 3rem) / 4); }
.fn {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.35rem 1.35rem 1.4rem;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFFFF, #FFFBF5);
  box-shadow: inset 0 1px 0 #FFFFFF, var(--schaduw-kaart), 0 30px 50px -36px rgba(150, 70, 30, .45);
  color: var(--ink); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fn:hover, .fn:focus-visible { transform: translateY(-4px); box-shadow: inset 0 1px 0 #FFFFFF, var(--schaduw-hoog), 0 44px 70px -40px rgba(150, 70, 30, .55); }
.fn__icoon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: .55rem; border-radius: 14px; background: radial-gradient(circle at 35% 30%, #FFF1CF, #FFD9A8); }
.fn__icoon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--zon-diep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fn strong { font-family: var(--font-heading); font-weight: 400; font-size: 1.2rem; line-height: 1.2; color: var(--nacht); }
.fn span { font-size: .97rem; }
.fn em { align-self: flex-start; margin-top: auto; padding: .15rem .55rem; border-radius: 999px; background: #FFF1E2; border: 1px solid rgba(184, 84, 26, .25); color: var(--zon-diep); font: 500 .66rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.fn span + em { margin-top: .7rem; }
.fns__knop { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (max-width: 960px) { .fns > .fn { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 560px) { .fns > .fn { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .fn { transition: none; } }

/* Homepage: drie functies met een bewegende demo (kleine versie van de podia op /functionaliteiten/) */
.fns--drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.fns--drie > .fn { flex: none; }
.fn--beeld { padding: 0; overflow: hidden; }
.fn--beeld:hover { transform: none; }
.fn__tekst { display: flex; flex-direction: column; gap: .4rem; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
.fn__tekst em { margin-top: .5rem; }
.fn__link { margin-top: auto; padding-top: .8rem; font-weight: 600; color: var(--zon-diep); text-decoration: none; }
.fn__link:hover { text-decoration: underline; }
.podium--mini {
  height: 330px;
  padding: 1rem;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  box-shadow: none;
}
.podium--mini .tel { zoom: .54; }
.podium--mini .laptop, .podium--mini .overstap { width: 620px; max-width: none; flex: none; zoom: .5; }
.podium--mini .opnieuw { top: auto; bottom: .6rem; right: .6rem; font-size: .72rem; }
@media (min-width: 561px) and (max-width: 960px) { .podium--mini .laptop, .podium--mini .overstap { zoom: .74; } .podium--mini { height: 400px; } .podium--mini .tel { zoom: .66; } }
@media (max-width: 960px) { .fns--drie { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* Bovenbalk: blijft staan en blijft doorzichtig (keuze Max, 5 okt 2026: geen pil, niet wegschuiven). */

/* Functionaliteiten: de knop in de header houdt op de telefoon zijn eigen breedte. */
@media (max-width: 520px) {
  .hero--intro .hero__knoppen .knop { flex: 0 0 auto; }
}

/* Agenda: na de week wisselt de weergave naar Boten (per boot). --w op het podium zet het moment. */
.wissel { display: grid; grid-template-columns: minmax(0, 1fr); }
.wissel > * { grid-area: 1 / 1; min-width: 0; }
.wissel--rooster { flex: 1; min-height: 0; }
.wissel__na { visibility: hidden; }
.js .podium.speelt .wissel__voor { animation: wisseluit .45s var(--ease) var(--w, 5s) both; }
.js .podium.speelt .wissel__na { animation: wisselin .45s var(--ease) var(--w, 5s) both; }
.js .podium.klaar .wissel__voor { visibility: hidden; }
.js .podium.klaar .wissel__na { visibility: visible; }
@keyframes wisseluit { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes wisselin { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }

/* Pagina per functie (6 okt 2026): menu blijft op Functionaliteiten, stappen in vier, tegels met de andere functies. */
.kop__nav .kop__links a[aria-current="true"] { color: #FFFFFF; border-bottom-color: var(--zon); }
.kop--licht .kop__links a[aria-current="true"] { color: var(--nacht); }
.kop__nav .telmenu__lijst a[aria-current="true"] { background: var(--zand); }
.kaarten--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fn-uitleg__titel { max-width: 22ch; margin-bottom: clamp(2rem, 4vw, 3rem); text-wrap: balance; }
.fns--zes > .fn { flex-basis: calc((100% - 2rem) / 3); }
.fn__meer { margin-top: auto; padding-top: .8rem; font-weight: 600; color: var(--zon-diep); }
.toon__meer { display: inline-flex; gap: .4rem; margin-top: 1.2rem; font-weight: 600; color: var(--zon-diep); text-decoration: none; }
.toon__meer:hover { text-decoration: underline; }
@media (max-width: 960px) { .fns--zes > .fn { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 900px) { .kaarten--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kaarten--vier { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fns--zes > .fn { flex-basis: 100%; } }

/* Kopbalk: uitklapmenu Functionaliteiten (6 okt 2026). Bouwt op .merkmenu uit style.css. */
.fnmenu summary { padding: .2rem 0; border-bottom: 2px solid transparent; }
.fnmenu.merkmenu--actief summary { text-decoration: none; border-bottom-color: var(--zon); }
.kop--licht .fnmenu.merkmenu--actief summary { color: var(--nacht); }
.fnmenu .merkmenu__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(40rem, calc(100vw - 2 * var(--gutter))); }
.kop__nav .fnmenu .merkmenu__lijst a { flex-direction: row; align-items: center; gap: .75rem; padding: .85rem .9rem .8rem; border-bottom: 0; color: var(--nacht); }
.kop__nav .fnmenu .merkmenu__lijst a:hover, .kop__nav .fnmenu .merkmenu__lijst a[aria-current="page"] { background: var(--zand); color: var(--nacht); }
.kop__nav .fnmenu .merkmenu__lijst a.merkmenu__alle { color: var(--zon-diep); }
.fnmenu .merkmenu__lijst small { display: block; margin-top: .1rem; }
.fnmenu__icoon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: radial-gradient(circle at 35% 30%, #FFF1CF, #FFD9A8); }
.fnmenu__icoon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--zon-diep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kop__nav .fnmenu .merkmenu__lijst a.merkmenu__alle { justify-content: center; }
.telmenu__lijst { max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
/* Telefoonmenu (14 okt 2026): zelfde functies, iconen en kleuren als het uitklapmenu op de computer. */
.telmenu__lijst { gap: .1rem; }
.telmenu__kop { margin: .35rem .9rem .35rem; color: #6B7A8A; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kop__nav .telmenu__lijst a.telmenu__fn { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; font-weight: 600; line-height: 1.25; }
.telmenu__fn small { display: block; margin-top: .1rem; color: #6B7A8A; font-size: .8rem; font-weight: 400; }
.kop__nav .telmenu__lijst a.telmenu__alle { display: flex; justify-content: center; gap: .4rem; margin-top: .3rem; background: var(--zand); color: var(--zon-diep); }
.kop__nav .telmenu__lijst a.telmenu__alle:hover { background: #F6E6CF; }
.telmenu__streep { margin: .5rem .4rem; border: 0; border-top: 1px solid #EFE6DA; }
.telmenu__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.kop__nav .telmenu__knoppen a.knop { margin-top: 0; justify-content: center; }
.kop__nav .telmenu__lijst a.telmenu__inlog { border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px #D9CDBD; color: var(--nacht); }
.kop__nav .telmenu__lijst a.telmenu__inlog:hover { background: var(--zand); }