@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("lettertypen/fraunces-latin-opsz-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("lettertypen/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("lettertypen/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); }
/* Indeling: links uitgelijnd, één kolom van 72rem. De held is twee kolommen: de belofte links,
   rechts een gesprek dat je van uitnodiging tot wissen ziet verlopen. Daaronder rustige banden. */
:root {
  --dag: #faf7f0; --kaart: #ffffff; --kaart-hover: #fdfbf6;
  --amber: #f2a641; --amber-fel: #ffc670; --amber-tekst: #b5730f; --knop-inkt: #1c1204;
  --signaal: #0f9fd1; --signaal-rand: #0b88b4;
  --tekst: #1e1a12; --mist: #786f5c; --lijn: rgba(30,26,18,0.1); --lijn-veld: rgba(30,26,18,0.5);
  --nacht: #14110b; --nacht-tekst: #f6f2e8; --nacht-mist: #9aa3c2; --goed: #4ade80; --goed-tekst: #1f7a3d;
  --serif: "Fraunces", Georgia, serif; --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --r1: 0.5rem; --r2: 1.25rem; --r3: 2rem; --r4: clamp(2.5rem, 6vw, 3.5rem); --r5: clamp(3.5rem, 9vw, 6rem);
  --rond-klein: 10px; --rond-venster: 14px; --rond-kaart: 20px; --rond-pil: 999px;
  --schaduw: 0 1px 2px rgba(30,26,18,0.04), 0 16px 36px -20px rgba(30,26,18,0.22);
  --schaduw-knop: 0 14px 34px -14px rgba(242,166,65,0.7);
  --schaduw-venster: 0 30px 60px -28px rgba(30,26,18,0.55), 0 0 0 1px rgba(242,166,65,0.1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dag); color: var(--tekst); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signaal-rand); outline-offset: 2px; border-radius: 4px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); letter-spacing: -0.015em; text-wrap: balance; }

.achtergrond { position: absolute; inset: 0 0 auto 0; height: 62rem; z-index: 0; overflow: hidden; pointer-events: none; }
.gloed { position: absolute; left: 22%; top: 16rem; width: 70rem; height: 70rem; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(242,166,65,0.22), rgba(15,159,209,0.07) 45%, transparent 70%); }
.raster { position: absolute; inset: 0; background-image: linear-gradient(rgba(30,26,18,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(30,26,18,0.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(black 55%, transparent); mask-image: linear-gradient(black 55%, transparent); }

.breed { position: relative; z-index: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.label { font-family: var(--mono); font-size: 0.72rem; line-height: 1.4; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist); }
.kop { font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.15; font-weight: 560; }
.inleiding { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--mist); max-width: 38rem; }
.bijschrift { font-size: 0.88rem; line-height: 1.5; color: var(--mist); }

.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.8rem 1.7rem; border-radius: var(--rond-pil); border: 1px solid transparent; font-family: var(--sans); font-size: 0.98rem; line-height: 1.2; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.15s ease-out, background-color 0.15s ease-out; }
.knop-hoofd { background: linear-gradient(180deg, var(--amber-fel), var(--amber)); color: var(--knop-inkt); box-shadow: var(--schaduw-knop); }
.knop-rand { background: var(--kaart); color: var(--tekst); border-color: var(--lijn-veld); }
.knop:hover { transform: translateY(-1px); } .knop-rand:hover { background: var(--kaart-hover); }

/* ---------- kop van de pagina ---------- */
.balk { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r1) var(--r2); padding-block: var(--r2); }
.merk { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.woordmerk { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.015em; line-height: 1; } .woordmerk b { color: var(--amber-tekst); font-weight: 600; }
.beta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.55rem; border-radius: var(--rond-pil); border: 1px solid var(--amber-tekst); background: var(--kaart); font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; }
.beta i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(242,166,65,0.25); }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r1) var(--r2); }
.menu a { text-underline-offset: 0.25em; text-decoration-color: var(--lijn-veld); }
.menu a.knop { text-decoration: none; min-height: 2.75rem; padding: 0.5rem 1.1rem; }
@media (max-width: 46rem) { .menu .alleen-breed { display: none; } }

/* ---------- held ---------- */
.held { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r4); padding-block: var(--r3) var(--r5); align-items: center; }
@media (min-width: 60rem) { .held { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--r5); padding-block: var(--r4) var(--r5); } }
.held h1 { font-size: clamp(2.5rem, 6.6vw, 4.6rem); line-height: 1; font-weight: 600; margin-top: var(--r2); }
.held h1 em { font-style: normal; color: var(--amber-tekst); }
.held .inleiding { margin-top: var(--r2); }
.held-knoppen { display: flex; flex-wrap: wrap; gap: var(--r1); margin-top: var(--r3); }
.betablok { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r3); align-items: center; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid var(--amber-tekst); border-radius: var(--rond-kaart); background: var(--kaart); box-shadow: var(--schaduw); }
@media (min-width: 52rem) { .betablok { grid-template-columns: minmax(0, 1fr) auto; } }
.betablok-kop { font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; margin-top: 0.5rem; text-wrap: balance; }
.betablok-kop span { color: var(--amber-tekst); }
.betablok-tekst { margin-top: 0.8rem; color: var(--mist); font-size: clamp(1.02rem, 2vw, 1.15rem); max-width: 40rem; } .betablok-tekst b { color: var(--tekst); }
.betablok-knoppen { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.held-feiten { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: var(--r3); padding: 0; list-style: none; }
.held-feiten li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--mist); }
.held-feiten li::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--amber); }

/* het baken: letterlijk uit de huisstijl */
.baken { --maat: clamp(4rem, 9vw, 5.5rem); position: relative; width: var(--maat); height: var(--maat); margin: 1.4rem 0 var(--r3) 1.4rem; }
.baken-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(181,115,15,0.4); animation: sonar 3.6s cubic-bezier(0.2,0.6,0.4,1) infinite; }
.baken-ring.r2 { animation-delay: 1.2s; border-color: rgba(15,159,209,0.32); } .baken-ring.r3 { animation-delay: 2.4s; }
@keyframes sonar { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.baken-baan { position: absolute; inset: -30%; animation: draaien 24s linear infinite; pointer-events: none; }
.baken-baan.b2 { inset: -46%; animation-duration: 34s; animation-direction: reverse; }
.baken-punt { position: absolute; top: 0; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--signaal); box-shadow: 0 0 9px 2px rgba(15,159,209,0.6); }
.baken-baan.b2 .baken-punt { background: var(--amber-tekst); box-shadow: 0 0 9px 2px rgba(181,115,15,0.55); width: 4px; height: 4px; margin-left: -2px; }
@keyframes draaien { to { transform: rotate(360deg); } }
.baken-schijnwerper { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; }
.baken-schijnwerper::before { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0deg, transparent 328deg, rgba(255,214,140,0.95) 350deg, rgba(255,214,140,0.4) 358deg, transparent 360deg); animation: draaien 5s linear infinite; }
.baken-kern { position: absolute; inset: 26%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff9ea, var(--amber-fel) 38%, var(--amber) 68%, #b5730f 100%); box-shadow: 0 0 0 1px rgba(255,244,217,0.6) inset, 0 0 34px 7px rgba(242,166,65,0.4), 0 0 70px 24px rgba(242,166,65,0.18); animation: ademen 3.4s ease-in-out infinite; }
@keyframes ademen { 0%,100% { transform: scale(1); } 50% { transform: scale(1.055); } }
.baken-glans { position: absolute; top: 12%; left: 22%; width: 32%; height: 24%; border-radius: 50%; background: rgba(255,255,255,0.75); filter: blur(3px); opacity: 0.85; }

/* ---------- het verloop van een gesprek ---------- */
.verloop { min-width: 0; }
.scherm { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-kaart); box-shadow: var(--schaduw); padding: var(--r2); min-height: 21.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.scherm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r2); }
.scherm-titel { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; font-weight: 560; letter-spacing: -0.015em; margin-top: 0.3rem; }
.klok { flex: none; text-align: right; padding: 0.45rem 0.8rem; border-radius: var(--rond-venster); border: 1px solid var(--lijn); background: var(--kaart); }
.klok b { display: block; font-family: var(--mono); font-size: 1.45rem; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; }
.pillen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pil { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.24rem 0.65rem; border-radius: var(--rond-pil); border: 1px solid var(--lijn-veld); font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap; }
.pil::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--mist); }
.pil.goed { border-color: var(--goed-tekst); color: var(--goed-tekst); } .pil.goed::before { background: var(--goed-tekst); }
.tegels { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; min-height: 8rem; }
.tegel { position: relative; border-radius: var(--rond-venster); background: var(--nacht); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tegel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(242,166,65,0.28), transparent 60%); }
.tegel.spreekt { box-shadow: 0 0 0 2px var(--amber-fel); }
.tegel span { position: relative; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(246,242,232,0.12); color: var(--nacht-tekst); font-family: var(--serif); font-size: 1.2rem; font-weight: 560; }
.tegel em { position: absolute; left: 0.6rem; bottom: 0.55rem; font-style: normal; font-size: 0.76rem; padding: 0.12rem 0.55rem; border-radius: var(--rond-pil); background: var(--kaart); color: var(--tekst); }
.regels { display: flex; flex-direction: column; gap: 0.5rem; }
.regel { font-size: 0.92rem; line-height: 1.45; } .regel small { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mist); }
.regel.weg { color: transparent; background: repeating-linear-gradient(90deg, var(--lijn) 0 0.5rem, transparent 0.5rem 0.8rem); border-radius: 4px; height: 0.7rem; margin-block: 0.35rem; }
.regel.weg.kort { width: 62%; } .regel.weg.korter { width: 38%; }
.brief { border: 1px solid var(--lijn); border-radius: var(--rond-venster); padding: var(--r2); background: var(--dag); display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.nep-knop { display: inline-flex; padding: 0.6rem 1.2rem; border-radius: var(--rond-pil); background: var(--kaart); border: 1px solid var(--lijn-veld); font-weight: 700; font-size: 0.92rem; }
.stoelen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.stoel { border: 1px solid var(--lijn); border-radius: var(--rond-venster); padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; min-width: 0; }
.stoel b { font-family: var(--serif); font-size: 1.1rem; font-weight: 560; }
.scherm-voet { margin-top: auto; }
.stappen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; margin-top: 0.8rem; padding: 0; list-style: none; }
.stap { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding-top: 0.55rem; border-top: 3px solid var(--lijn); position: relative; }
.stap::after { content: ''; position: absolute; left: 0; top: -3px; height: 3px; width: 0; background: var(--amber); }
.stap[aria-selected="true"]::after { width: 100%; }
.verloop.loopt .stap[aria-selected="true"]::after { animation: vullen var(--duur, 4600ms) linear both; }
@keyframes vullen { from { width: 0; } to { width: 100%; } }
.stap small { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--mist); }
.stap span { display: block; font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: var(--mist); }
.stap[aria-selected="true"] span { color: var(--tekst); }
.stap:focus-visible { outline: 2px solid var(--signaal-rand); outline-offset: 3px; }
@media (max-width: 34rem) { .stap span { font-size: 0.7rem; letter-spacing: -0.01em; } .stappen { gap: 0.25rem; } }

/* ---------- banden ---------- */
.band { padding-block: var(--r5); border-top: 1px solid var(--lijn); }
.band-kop { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: var(--r4); max-width: 44rem; }
.drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--r2); }
.soort { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-kaart); box-shadow: var(--schaduw); padding: var(--r3); display: flex; flex-direction: column; gap: 0.7rem; }
.soort h3 { font-size: 1.6rem; font-weight: 560; line-height: 1.15; }
.soort .bewaar { margin-top: auto; padding-top: var(--r2); border-top: 1px solid var(--lijn); }

.twee { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r4); align-items: start; }
@media (min-width: 56rem) { .twee { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--r5); } }
.venster { background: var(--nacht); color: var(--nacht-tekst); border-radius: var(--rond-venster); box-shadow: var(--schaduw-venster); overflow: hidden; min-width: 0; }
.venster-balk { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(246,242,232,0.08); }
.venster-balk i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(246,242,232,0.2); }
.venster-balk span { margin-left: 0.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--nacht-mist); }
.venster pre { margin: 0; padding: var(--r2); font-family: var(--mono); font-size: 0.82rem; line-height: 1.9; overflow-x: auto; }
.venster .t { color: var(--nacht-mist); } .venster .ok { color: var(--goed); } .venster .a { color: var(--amber-fel); }
.punten { display: flex; flex-direction: column; gap: var(--r2); padding: 0; margin: 0; list-style: none; }
.punten li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.9rem; }
.punten li::before { content: ''; grid-row: span 2; width: 0.5rem; height: 0.5rem; margin-top: 0.55rem; border-radius: 50%; background: var(--amber); }
.punten b { font-weight: 700; } .punten span { color: var(--mist); grid-column: 2; }

.functies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0; border-top: 1px solid var(--lijn); }
.functie { padding: var(--r2) var(--r2) var(--r2) 0; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 0.25rem; }
.functie b { font-family: var(--serif); font-size: 1.15rem; font-weight: 560; letter-spacing: -0.015em; }
.functie span { color: var(--mist); font-size: 0.95rem; }

.prijs { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-kaart); box-shadow: var(--schaduw); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r3); align-items: center; }
@media (min-width: 56rem) { .prijs { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); align-items: start; } }
.momenten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--r2); }
.momenten article { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-kaart); padding: var(--r3); display: flex; flex-direction: column; gap: 0.6rem; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.momenten article:hover { transform: translateY(-3px); box-shadow: var(--schaduw); }
.momenten h3 { font-size: 1.35rem; font-weight: 560; line-height: 1.15; } .momenten p { color: var(--mist); }
.stempel { align-self: flex-start; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst) !important; border: 1px solid var(--lijn-veld); border-radius: var(--rond-pil); padding: 0.2rem 0.6rem; }
.vergelijk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--r2); margin-bottom: var(--r2); }
.tekening { margin: 0; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-kaart); padding: var(--r3); display: flex; flex-direction: column; gap: 0.9rem; }
.tekening svg { width: 100%; height: auto; display: block; }
.bellen rect { fill: rgba(30,26,18,0.09); } .bellen .ik { fill: rgba(30,26,18,0.2); }
.lijn-vol { stroke: var(--tekst); stroke-width: 6; stroke-linecap: round; } .lijn-stip { stroke: var(--lijn-veld); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.punt { fill: var(--amber); stroke: var(--tekst); stroke-width: 2; } .eind { fill: var(--tekst); } .leeg { fill: var(--kaart); stroke: var(--lijn-veld); stroke-width: 2; stroke-dasharray: 3 3; }
.t-klein { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--mist); text-transform: uppercase; } .t-groot { font-family: var(--serif); font-size: 17px; font-weight: 560; fill: var(--tekst); }
@media (min-width: 60rem) { .functies-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: var(--r2); } .vier .soort h3 { font-size: 1.4rem; }
.teams-kop { align-items: center; margin-bottom: var(--r4); } .teams-kop .band-kop { margin-bottom: 0; }
.teamscherm { padding: var(--r3); display: flex; flex-direction: column; gap: 0.9rem; min-height: 0; }
.team-tegoed { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.team-getal { font-family: var(--serif); font-size: 2.4rem; line-height: 1; font-weight: 600; letter-spacing: -0.015em; margin-top: 0.3rem; } .team-getal small { font-family: var(--sans); font-size: 0.9rem; font-weight: 400; color: var(--mist); letter-spacing: 0; }
.team-balk { height: 0.5rem; border-radius: var(--rond-pil); background: var(--dag); border: 1px solid var(--lijn-veld); overflow: hidden; } .team-balk i { display: block; height: 100%; width: 82%; background: var(--tekst); }
.team-leden { list-style: none; margin: 0; padding: 0; } .team-leden li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--lijn); }
.team-leden span { display: flex; flex-direction: column; min-width: 0; } .team-leden small { color: var(--mist); font-size: 0.82rem; }
.team-leden i { font-style: normal; font-weight: 600; font-size: 0.82rem; border: 1px solid var(--lijn-veld); border-radius: var(--rond-pil); padding: 0.3rem 0.7rem; white-space: nowrap; } .team-leden em { font-style: normal; color: var(--mist); font-size: 0.85rem; }
.bonkolom { display: flex; flex-direction: column; gap: var(--r2); align-items: stretch; min-width: min(100%, 19rem); }
.bonnetje { border: 1px solid var(--lijn-veld); border-radius: var(--rond-kaart); padding: var(--r2) var(--r3); background: var(--dag); }
.bonnetje dl { margin: 0.6rem 0 0; } .bonnetje dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--lijn-veld); align-items: baseline; }
.bonnetje dt { color: var(--mist); } .bonnetje dt small { display: block; font-size: 0.8rem; } .bonnetje dd { margin: 0; font-weight: 600; white-space: nowrap; }
.bonnetje s { position: relative; text-decoration: none; color: var(--mist); font-weight: 500; } .bonnetje s::after { content: ''; position: absolute; left: -0.15em; right: -0.15em; top: 50%; height: 2px; border-radius: 1px; background: var(--amber-tekst); transform: rotate(-7deg); }
.bon-totaal { padding-top: 0.9rem; } .bon-bedrag { display: flex; align-items: baseline; gap: 0.8rem; font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1; margin: 0.3rem 0 0.4rem; }
.bon-nu { font-size: 2.6rem; } .bon-na { font-size: 1.4rem; color: var(--mist); opacity: 0.6; filter: blur(0.5px); }
.teams-regels { margin-top: var(--r3); } .teams-voet { margin-top: var(--r2); max-width: 44rem; }
.prijs-groot { font-family: var(--serif); font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1; font-weight: 600; letter-spacing: -0.015em; }
.prijs ul { margin: var(--r2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; color: var(--mist); }
.prijs li { display: flex; gap: 0.7rem; align-items: baseline; } .prijs li b { color: var(--tekst); } .prijs li::before { content: ''; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--amber); transform: translateY(-0.15em); }

.niet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--r2) var(--r4); }
.niet div { display: flex; flex-direction: column; gap: 0.3rem; padding-top: var(--r2); border-top: 1px solid var(--lijn); }
.niet b { font-weight: 700; } .niet span { color: var(--mist); }

.vragen { display: flex; flex-direction: column; max-width: 48rem; border-top: 1px solid var(--lijn); }
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--r2); padding-block: var(--r2); font-family: var(--serif); font-size: 1.2rem; font-weight: 560; letter-spacing: -0.015em; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: ''; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--mist); border-bottom: 2px solid var(--mist); transform: translateY(-0.15rem) rotate(45deg); transition: transform 0.15s ease-out; }
.vragen details[open] summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.vragen p { padding-bottom: var(--r2); color: var(--mist); max-width: 40rem; }

.slot { padding-block: var(--r5); border-top: 1px solid var(--lijn); display: flex; flex-direction: column; align-items: flex-start; gap: var(--r2); }
.slot h2 { font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.02; font-weight: 600; max-width: 18ch; }
.voet { border-top: 1px solid var(--lijn); padding-block: var(--r3); display: flex; flex-wrap: wrap; gap: var(--r1) var(--r3); justify-content: space-between; }
.voet nav { display: flex; flex-wrap: wrap; gap: var(--r1) var(--r2); } .voet a { text-underline-offset: 0.25em; text-decoration-color: var(--lijn-veld); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .baken-ring, .baken-baan, .baken-schijnwerper::before, .baken-kern { animation: none; } .verloop.loopt .stap[aria-selected="true"]::after { animation: none; } .knop { transition: none; } }

/* =====================================================================
   De site in meerdere pagina's: zwevend menu, nieuwe voorpagina,
   paginakoppen en beweging. Bouwt voort op de regels hierboven.
   ===================================================================== */
:root { --rond-groot: 28px; --veer: cubic-bezier(0.2, 0.8, 0.2, 1); }
body { padding-top: 5.75rem; }
.achtergrond { top: 0; }
.gloed { left: calc(22% + var(--mx, 0px)); top: calc(16rem + var(--my, 0px)); transition: left 1.2s var(--veer), top 1.2s var(--veer); }

/* ---------- het zwevende menu ---------- */
.nav { position: fixed; z-index: 20; top: max(0.75rem, env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; width: min(72rem, calc(100% - 1.5rem)); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 1.35rem; border-radius: var(--rond-pil); border: 1px solid var(--lijn); background: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 14px 34px -22px rgba(30,26,18,0.4); transition: padding 0.3s var(--veer), background-color 0.3s, box-shadow 0.3s, width 0.3s var(--veer); view-transition-name: nav; }
.nav.klein { width: min(64rem, calc(100% - 1.5rem)); padding-block: 0.32rem; background: rgba(255,255,255,0.88); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 20px 44px -24px rgba(30,26,18,0.55); }
.nav .merk .woordmerk { font-size: 1.35rem; }
.nav-links { position: relative; display: none; align-items: center; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.nav-links a { position: relative; z-index: 1; display: block; padding: 0.6rem 0.95rem; border-radius: var(--rond-pil); font-size: 0.94rem; font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--mist); transition: color 0.15s; white-space: nowrap; }
.nav-links a:hover { color: var(--tekst); }
.nav-links a[aria-current="page"] { background: var(--tekst); color: var(--kaart); view-transition-name: nav-actief; }
.nav-zweef { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: var(--rond-pil); background: rgba(30,26,18,0.07); opacity: 0; pointer-events: none; transition: translate 0.3s var(--veer), width 0.3s var(--veer), opacity 0.2s; }
.nav-acties { display: flex; align-items: center; gap: 0.35rem; }
.nav-acties .inlog { display: none; padding: 0.6rem 0.9rem; font-size: 0.94rem; font-weight: 600; text-decoration: none; border-radius: var(--rond-pil); }
.nav-acties .inlog:hover { background: rgba(30,26,18,0.06); }
.nav-acties .knop { min-height: 2.75rem; padding: 0.5rem 1.2rem; }
.nav-menuknop { all: unset; box-sizing: border-box; cursor: pointer; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--lijn-veld); background: var(--kaart); display: grid; place-items: center; }
.nav-menuknop i { display: block; width: 1.05rem; height: 2px; border-radius: 1px; background: var(--tekst); box-shadow: 0 6px 0 var(--tekst); translate: 0 -3px; }
.nav-menuknop:focus-visible { outline: 2px solid var(--signaal-rand); outline-offset: 2px; }
@media (min-width: 30rem) { .nav-acties .inlog { display: block; } }
@media (min-width: 62rem) { .nav-links { display: flex; } .nav-menuknop { display: none; } }

/* het menu op een telefoon: een heel scherm met grote namen */
.menupaneel { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: rgba(250,247,240,0.94); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); color: var(--tekst); overflow-y: auto; }
.menupaneel::backdrop { background: transparent; }
.menupaneel[open] { display: flex; flex-direction: column; animation: paneel-in 0.3s var(--veer) both; }
@keyframes paneel-in { from { opacity: 0; } }
.paneel-kop { display: flex; align-items: center; justify-content: space-between; padding: max(1.25rem, env(safe-area-inset-top, 0px)) 1.25rem 0.5rem 1.6rem; }
.paneel-sluit { all: unset; box-sizing: border-box; cursor: pointer; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--lijn-veld); background: var(--kaart); position: relative; }
.paneel-sluit::before, .paneel-sluit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 2px; margin: -1px 0 0 -0.525rem; border-radius: 1px; background: var(--tekst); rotate: 45deg; }
.paneel-sluit::after { rotate: -45deg; }
.paneel-sluit:focus-visible { outline: 2px solid var(--signaal-rand); outline-offset: 2px; }
.paneel-links { flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 1rem 1.6rem; list-style: none; }
.paneel-links a { display: flex; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--lijn); text-decoration: none; font-family: var(--serif); font-size: clamp(2rem, 9.5vw, 3.2rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.paneel-links small { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.13em; color: var(--mist); }
.paneel-links a[aria-current="page"] { color: var(--amber-tekst); }
.menupaneel[open] .paneel-links li { animation: omhoog 0.5s var(--veer) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
@keyframes omhoog { from { opacity: 0; translate: 0 1.4rem; } }
.paneel-voet { display: flex; gap: 0.6rem; padding: 1rem 1.6rem max(1.5rem, env(safe-area-inset-bottom, 0px)); }
.paneel-voet .knop { flex: 1; }

/* ---------- de held, groter ---------- */
.held h1 { font-size: clamp(2.9rem, 8.2vw, 5.6rem); line-height: 0.96; letter-spacing: -0.03em; }
.held h1 .rij { display: block; overflow: hidden; padding-bottom: 0.08em; }
.held h1 .rij > span { display: block; }
.js .held h1 .rij > span { animation: rij-in 0.9s var(--veer) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
@keyframes rij-in { from { translate: 0 110%; } }
/* Het baken achter de hero: midden onder het menu, achter de tekst. */
.held { position: relative; }
.held > div:first-child > :not(.baken) { position: relative; z-index: 1; }
.held .baken { position: absolute; top: var(--r3); left: 50%; translate: -50% 0; margin: 0; --maat: min(10.5rem, 34vw); z-index: 0; opacity: 0.42; filter: blur(5px); pointer-events: none; }
@media (max-width: 40rem) { .held .baken { top: 0.5rem; --maat: min(8.5rem, 34vw); } }

/* ---------- lopende band met momenten ---------- */
.loopband { position: relative; z-index: 1; overflow: hidden; border-block: 1px solid var(--lijn); padding-block: 1.1rem; -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.loopband div { display: flex; width: max-content; animation: lopen 46s linear infinite; font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 560; letter-spacing: -0.015em; color: var(--mist); white-space: nowrap; }
.loopband span { padding-inline: 1.25rem; }
.loopband span::after { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 2.5rem; border-radius: 50%; background: var(--lijn-veld); vertical-align: middle; }
@keyframes lopen { to { translate: -50% 0; } }

/* ---------- cijfers ---------- */
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--r3) var(--r2); padding-block: var(--r5); }
.cijfer { display: flex; flex-direction: column; gap: 0.5rem; padding-top: var(--r2); border-top: 1px solid var(--tekst); }
.cijfer b { font-family: var(--serif); font-size: clamp(2.8rem, 7vw, 4.4rem); line-height: 0.95; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cijfer b small { font-size: 0.42em; letter-spacing: -0.01em; font-weight: 560; margin-left: 0.15em; }
.cijfer span { color: var(--mist); max-width: 16rem; }

/* ---------- kaarten die oplichten onder de muis ---------- */
.gloei { position: relative; overflow: hidden; isolation: isolate; }
.gloei::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(24rem circle at var(--x, 50%) var(--y, 0%), rgba(242,166,65,0.17), transparent 62%); opacity: 0; transition: opacity 0.35s; }
.gloei:hover::before { opacity: 1; }

/* ---------- momenten in een mozaïek ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--r2); }
.bento article { grid-column: span 6; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-groot); padding: var(--r3); min-height: 13.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; transition: translate 0.3s var(--veer), box-shadow 0.3s; }
.bento article:hover { translate: 0 -4px; box-shadow: var(--schaduw); }
.bento .stempel { margin-bottom: auto; }
.bento h3 { font-size: 1.45rem; font-weight: 560; line-height: 1.12; }
.bento p { color: var(--mist); }
@media (min-width: 44rem) { .bento article { grid-column: span 3; } }
@media (min-width: 64rem) {
  .bento article { grid-column: span 2; }
  .bento article:nth-child(1), .bento article:nth-child(4) { grid-column: span 4; }
  .bento article:nth-child(5), .bento article:nth-child(6) { grid-column: span 3; }
  .bento article:nth-child(1) h3, .bento article:nth-child(4) h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
  .bento article:nth-child(1) p:last-child, .bento article:nth-child(4) p:last-child { max-width: 30rem; font-size: 1.05rem; }
}

/* ---------- deuren naar de andere pagina's ---------- */
.deuren { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r2); }
@media (min-width: 60rem) { .deuren { grid-template-columns: repeat(2, minmax(0, 1fr)); } .deur.breed-deur { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.deur { display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: var(--r3); background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-groot); padding: clamp(1.5rem, 4vw, 2.75rem); text-decoration: none; transition: translate 0.3s var(--veer), box-shadow 0.3s; }
.deur:hover { translate: 0 -4px; box-shadow: var(--schaduw); }
.deur-tekst { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.deur h3 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.1; font-weight: 560; }
.deur p { color: var(--mist); }
.verder { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-weight: 700; color: var(--tekst); }
.verder::after { content: '→'; transition: translate 0.25s var(--veer); }
a:hover > .verder::after, a:hover .verder::after, a.verder:hover::after { translate: 0.35rem 0; }
.deur .venster pre { font-size: 0.78rem; line-height: 1.8; }
.deur .teamscherm, .deur .bonnetje { box-shadow: none; }

/* ---------- kop van een losse pagina ---------- */
.paginakop { padding-block: var(--r4) var(--r5); display: flex; flex-direction: column; gap: var(--r2); align-items: flex-start; }
.paginakop h1 { font-size: clamp(2.5rem, 6.6vw, 4.6rem); line-height: 1; font-weight: 600; letter-spacing: -0.03em; max-width: 18ch; }
.paginakop h1 em { font-style: normal; color: var(--amber-tekst); }
.kruimel { display: flex; gap: 0.6rem; align-items: center; } .kruimel a { text-decoration: none; } .kruimel a:hover { text-decoration: underline; }

/* ---------- vijf stappen onder elkaar ---------- */
.tijdlijn { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; max-width: 46rem; }
.tijdlijn li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 var(--r2); padding-bottom: var(--r3); position: relative; }
.tijdlijn li::before { content: ''; position: absolute; left: 1.72rem; top: 3.4rem; bottom: 0.4rem; width: 1px; background: var(--lijn-veld); }
.tijdlijn li:last-child { padding-bottom: 0; } .tijdlijn li:last-child::before { display: none; }
.tijdlijn .nummer { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid var(--lijn-veld); background: var(--kaart); display: grid; place-items: center; font-family: var(--mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.08em; }
.tijdlijn h3 { font-size: 1.5rem; font-weight: 560; line-height: 1.15; margin-top: 0.75rem; }
.tijdlijn p { color: var(--mist); margin-top: 0.4rem; grid-column: 2; }

/* ---------- tarieven uit het platform ---------- */
.tarieven { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--r2); }
.tarief { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-kaart); padding: var(--r3); overflow-x: auto; }
.tarief table { width: 100%; border-collapse: collapse; margin-top: 0.8rem; font-variant-numeric: tabular-nums; }
.tarief th, .tarief td { padding: 0.5rem 0.4rem; text-align: right; border-bottom: 1px dashed var(--lijn-veld); white-space: nowrap; }
.tarief th:first-child, .tarief td:first-child { text-align: left; padding-left: 0; }
.tarief th { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mist); }
.tarief td { font-weight: 600; } .tarief td:first-child { font-weight: 400; color: var(--mist); }

/* ---------- vragen in groepen ---------- */
.vraaggroep { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r2) var(--r5); padding-block: var(--r4); border-top: 1px solid var(--lijn); }
@media (min-width: 56rem) { .vraaggroep { grid-template-columns: 14rem minmax(0, 1fr); } }
.vraaggroep h2 { font-size: 1.6rem; font-weight: 560; line-height: 1.15; }
.vraaggroep .vragen { border-top: 0; } .vraaggroep .vragen details:first-child summary { padding-top: 0; }

/* ---------- naar de volgende pagina ---------- */
.volgende { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--r1) var(--r3); padding-block: var(--r4); border-top: 1px solid var(--lijn); text-decoration: none; }
.volgende b { font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.volgende b::after { content: ' →'; display: inline-block; transition: translate 0.25s var(--veer); }
.volgende:hover b::after { translate: 0.5rem 0; }

/* ---------- voet ---------- */
.voet { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r3); padding-block: var(--r4) var(--r3); }
@media (min-width: 48rem) { .voet { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.voet .woordmerk { font-size: 1.8rem; }
.voet nav { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.voet nav p { margin-bottom: 0.3rem; }
.voet nav a { text-decoration: none; } .voet nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.voet-onder { grid-column: 1 / -1; padding-top: var(--r2); border-top: 1px solid var(--lijn); }

/* ---------- verschijnen bij het scrollen ---------- */
.js [data-toon] { opacity: 0; translate: 0 1.6rem; transition: opacity 0.8s var(--veer), translate 0.8s var(--veer); transition-delay: calc(var(--n, 0) * 80ms); }
.js [data-toon].zichtbaar { opacity: 1; translate: 0 0; }

/* ---------- van pagina naar pagina ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.18s ease-out both vt-uit; }
::view-transition-new(root) { animation: 0.38s var(--veer) both vt-in; }
@keyframes vt-uit { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 0.9rem; } }

@media (prefers-reduced-motion: reduce) {
  .loopband div, .menupaneel[open], .menupaneel[open] .paneel-links li, .js .held h1 .rij > span { animation: none; }
  .js [data-toon] { opacity: 1; translate: 0 0; transition: none; }
  .nav, .nav-zweef, .gloed, .bento article, .deur, .verder::after, .volgende b::after { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

.held-noot { margin-top: 0.9rem; }

/* ---------- de demo: boekpagina, transcript, melding ---------- */
.nep-diensten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.nep-dienst { border: 1px solid var(--lijn); border-radius: var(--rond-venster); padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.nep-dienst b { font-family: var(--serif); font-size: 1.08rem; font-weight: 560; }
.nep-dienst small { color: var(--mist); font-size: 0.8rem; }
.nep-dienst.gekozen { border-color: var(--tekst); box-shadow: 0 0 0 1px var(--tekst) inset; }
.nep-tijden { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nep-tijden span { padding: 0.35rem 0.8rem; border-radius: var(--rond-pil); border: 1px solid var(--lijn-veld); font-family: var(--mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.nep-tijden .gekozen { background: var(--tekst); border-color: var(--tekst); color: var(--kaart); }
.klok small { display: block; margin-top: 0.15rem; font-size: 0.68rem; color: var(--mist); }
.melding-gast { margin-top: auto; padding: 0.55rem 0.8rem; border-radius: var(--rond-venster); background: var(--dag); border: 1px dashed var(--lijn-veld); font-size: 0.86rem; color: var(--mist); }
.melding-gast b { color: var(--tekst); font-weight: 600; }

/* ---------- de schakelaars om uit te proberen ---------- */
.schakelpaneel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r3); background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-groot); box-shadow: var(--schaduw); padding: clamp(1.25rem, 4vw, 2.5rem); }
@media (min-width: 56rem) { .schakelpaneel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r5); align-items: start; } }
.schakel-lijst { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.schakel-lijst legend { padding: 0; margin-bottom: 0.6rem; }
.schakel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.85rem 0; border-top: 1px solid var(--lijn); cursor: pointer; }
.schakel:last-child { border-bottom: 1px solid var(--lijn); }
.schakel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schakel-knop { position: relative; width: 2.9rem; height: 1.7rem; border-radius: var(--rond-pil); background: var(--dag); border: 1px solid var(--lijn-veld); transition: background-color 0.2s var(--veer), border-color 0.2s; }
.schakel-knop::after { content: ''; position: absolute; top: 0.18rem; left: 0.2rem; width: 1.22rem; height: 1.22rem; border-radius: 50%; background: var(--kaart); box-shadow: 0 1px 3px rgba(30,26,18,0.3); transition: translate 0.25s var(--veer); }
.schakel input:checked + .schakel-knop { background: var(--tekst); border-color: var(--tekst); }
.schakel input:checked + .schakel-knop::after { translate: 1.2rem 0; }
.schakel input:focus-visible + .schakel-knop { outline: 2px solid var(--signaal-rand); outline-offset: 3px; }
.schakel input:disabled + .schakel-knop { opacity: 0.4; }
.schakel:has(input:disabled) { cursor: not-allowed; }
.schakel:has(input:disabled) .schakel-tekst { opacity: 0.55; }
.schakel-tekst { display: flex; flex-direction: column; min-width: 0; }
.schakel-tekst b { font-weight: 700; }
.schakel-tekst small { color: var(--mist); font-size: 0.88rem; line-height: 1.45; }
.schakel-uitkomst { display: flex; flex-direction: column; gap: var(--r2); min-width: 0; }
.schakel-titel { margin-top: 0.4rem; font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; font-weight: 560; letter-spacing: -0.015em; text-wrap: balance; }
.schakel-bewaar { margin-top: 0.5rem; padding: var(--r2); border-radius: var(--rond-kaart); background: var(--dag); border: 1px solid var(--lijn); }
.schakel-regel { color: var(--amber-tekst); font-weight: 600; }
.schakelpaneel.flits .schakel-titel, .schakelpaneel.flits .schakel-bewaar { animation: flits 0.5s var(--veer); }
@keyframes flits { from { opacity: 0.25; translate: 0 0.3rem; } }

/* ---------- pakketten ---------- */
.pakketten-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--r2); }
.pakket { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-kaart); box-shadow: var(--schaduw); padding: var(--r3); display: flex; flex-direction: column; gap: 0.6rem; }
.pakket h3 { font-size: 1.4rem; font-weight: 560; line-height: 1.15; }
.pakket-prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; padding-block: var(--r2); border-block: 1px solid var(--lijn); }
.pakket-prijs b { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pakket-prijs span { color: var(--mist); }
.pakketten-voet { margin-top: var(--r2); }

@media (prefers-reduced-motion: reduce) { .schakel-knop, .schakel-knop::after { transition: none; } .schakelpaneel.flits .schakel-titel, .schakelpaneel.flits .schakel-bewaar { animation: none; } }

/* De aankondiging van de overgang van de gratis lanceringsperiode naar betalen: een melding onderaan het scherm, wegklikbaar. */
.betabalk { position: fixed; z-index: 30; left: 50%; translate: -50% 0; bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); width: min(46rem, calc(100% - 1.5rem)); display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0.85rem 0.85rem 1.2rem; border: 1px solid var(--lijn); border-radius: var(--rond-kaart); background: rgba(255,250,240,0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--schaduw); }
.betabalk p { flex: 1; min-width: 0; margin: 0; font-size: 0.92rem; line-height: 1.5; }
.betabalk .verder { margin-left: 0.3rem; font-weight: 700; white-space: nowrap; }
.beta-sluit { flex: none; position: relative; width: 2.75rem; height: 2.75rem; margin: -0.4rem -0.2rem -0.4rem 0; border: 0; border-radius: var(--rond-pil); background: transparent; cursor: pointer; }
.beta-sluit::before, .beta-sluit::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1rem; height: 2px; margin: -1px 0 0 -0.5rem; border-radius: 2px; background: var(--tekst); rotate: 45deg; }
.beta-sluit::after { rotate: -45deg; }
.beta-sluit:hover { background: rgba(30,26,18,0.07); }
.betabalk[hidden], [data-beta][hidden], [data-lanceringskorting][hidden] { display: none; }

/* Per pakket: de gele knop om gratis te proberen, onderaan de kaart. */
#pakketten .pakket { display: flex; flex-direction: column; }
.pakket-proef { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin: auto 0 0; padding-top: 1.1rem; text-align: center; }
.pakket-proef .knop { width: 100%; }
.pakket-proef [data-pakket-noot] { color: var(--mist); font-size: 0.85rem; }

/* ---------- de app in de kop van de voorpagina ---------- */
.appvoorbeeld { min-width: 0; }
.appvenster { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 1.5rem; box-shadow: 0 50px 90px -40px rgba(30,26,18,0.45), 0 2px 6px rgba(30,26,18,0.05); overflow: hidden; }
.appvenster-balk { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; background: #f3eee2; border-bottom: 1px solid var(--lijn); }
.appvenster-balk i { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #e2d9c4; }
.appvenster-balk span { margin-left: 0.8rem; flex: 1; max-width: 16rem; padding: 0.12rem 0.7rem; border-radius: var(--rond-pil); background: var(--kaart); border: 1px solid var(--lijn); font-size: 0.7rem; text-align: center; color: var(--mist); }
.appvenster-inhoud { display: flex; background: var(--dag); text-align: left; }
.appzij { width: 9.6rem; flex: none; box-sizing: border-box; padding: 1rem 0.75rem; background: var(--kaart); border-right: 1px solid var(--lijn); display: none; flex-direction: column; gap: 0.35rem; }
@media (min-width: 34rem) { .appzij { display: flex; } }
.appzij-merk { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; padding: 0 0.5rem 0.6rem; }
.appzij-merk b { color: var(--amber-tekst); font-weight: 600; }
.appzij-punt { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.5rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.74rem; white-space: nowrap; color: #5b5240; }
.appzij-punt.actief { background: #fdf0da; color: #8a560a; font-weight: 700; }
.appzij-label { margin: 0.65rem 0 0.1rem; padding: 0 0.65rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9a917c; }
.appzij-klein { padding: 0.35rem 0.65rem; font-size: 0.75rem; color: #5b5240; }
.appmain { flex: 1; min-width: 0; box-sizing: border-box; padding: 1.1rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 0.75rem; }
.applabel { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist); }
.appnaam { margin: 0.15rem 0 0; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.015em; }
.appnaam em { font-style: normal; color: var(--amber-tekst); }
.appvolgende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; padding: 0.85rem 1rem; border-radius: 1.1rem; background: var(--kaart); border: 1px solid var(--lijn); }
.apptijd { flex: none; font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.appwie { flex: 1 1 7rem; min-width: 0; line-height: 1.3; }
.appwie b { display: block; font-size: 0.88rem; }
.appwie small { display: block; font-size: 0.75rem; color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appknop { flex: none; margin-left: auto; padding: 0.5rem 0.9rem; border-radius: var(--rond-pil); background: linear-gradient(180deg, var(--amber-fel), var(--amber)); color: var(--knop-inkt); font-weight: 700; font-size: 0.76rem; white-space: nowrap; }
.appdirect { display: flex; gap: 0.5rem; }
.appdirect-punt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem; border-radius: 0.9rem; background: var(--kaart); border: 1px solid var(--lijn); font-weight: 700; font-size: 0.78rem; }
.appdirect-punt i { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 0.55rem; display: grid; place-items: center; }
.appdirect-punt .chat { background: #e3f4fb; color: #0b88b4; }
.appdirect-punt .spraak { background: #fdf0da; color: #b5730f; }
.appdirect-punt .beeld { background: #e3f6e9; color: #1f7a3d; }
.applijst { border-radius: 1.1rem; background: var(--kaart); border: 1px solid var(--lijn); overflow: hidden; }
.applijst-kop { display: block; padding: 0.55rem 0.9rem 0.3rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); }
.applijst-rij { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.9rem; border-top: 1px solid var(--lijn); font-size: 0.8rem; }
.applijst-rij b { width: 2.7rem; flex: none; font-variant-numeric: tabular-nums; }
.applijst-rij span { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.applijst-rij em { flex: none; padding: 0.12rem 0.55rem; border-radius: var(--rond-pil); font-style: normal; font-weight: 700; font-size: 0.65rem; }
.applijst-rij .goed { background: #e3f6e9; color: #1f7a3d; }
.applijst-rij .wacht { background: #fdf0da; color: #8a560a; }
.appgesprek { position: relative; margin: -2.4rem 0 0 auto; width: min(19rem, 92%); box-sizing: border-box; padding: 1rem 1.1rem; border-radius: 1.25rem; background: var(--kaart); border: 1px solid var(--lijn); box-shadow: 0 30px 60px -28px rgba(30,26,18,0.45); text-align: left; }
.appgesprek-titel { margin: 0.25rem 0 0; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.appgesprek-regel { margin: 0.6rem 0 0; font-size: 0.78rem; color: #5b5240; }
.appgesprek-regel small { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mist); }
.appgesprek-knoppen { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.appgesprek-knoppen span { padding: 0.35rem 0.8rem; border-radius: var(--rond-pil); border: 1px solid var(--lijn-veld); font-weight: 600; font-size: 0.72rem; }
.appgesprek-noot { margin: 0.65rem 0 0; font-size: 0.7rem; color: var(--mist); }
.appnoot { margin-top: 1rem; max-width: 26rem; }
@media (min-width: 60rem) { .appgesprek { margin-right: -0.75rem; } }

/* De decoratieve ringen om het baken steken op een telefoon een paar pixels uit: de pagina schuift nooit opzij. */
html, body { overflow-x: clip; }