/* De website (spec 61, ontwerp B110): rustig en neutraal, met het echte portaal als beeld. Alleen de tokens uit
   design-tokens.css (Midnight, licht en donker volgen het systeem) en DM Sans van de site zelf; één accent, het blauw
   van de ringen (--primary). Vormregel: knoppen 10 px, vlakken binnen een kaart 12 px, kaarten 16 px, grote panelen
   24 px, de telefoon 44 px, labels rond.
   Beweging zonder script: de telefoon toont om de beurt vier echte schermen, de beroepen schuiven voorbij, en een vraag
   klapt zacht open. Wie beweging heeft uitgezet (prefers-reduced-motion), ziet alles stil en compleet.
   Eerst de telefoon, vanaf 800 px de laptop. Geen inline stijl en geen script: de CSP staat alleen 'self' toe. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; interpolate-size: allow-keywords; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: var(--display-tracking); text-wrap: balance; }
h2 { font-size: 32px; font-weight: 700; line-height: 1.12; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
.binnen { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-4); }
.zacht { color: var(--secondary); }
.accent { color: var(--accent-text); }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Knoppen ------------------------------------------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: 0 22px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--motion), transform 120ms ease-out;
}
.knop:hover { background: var(--primary-hover); }
.knop:active { background: var(--primary-pressed); transform: scale(0.98); }
.knop:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.knop-tweede { background: var(--surface); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--control-border); }
.knop-tweede:hover { background: var(--surface-hover); }
.knop-tweede:active { background: var(--surface-muted); }
.knop-klein { min-height: 40px; padding: 0 16px; font-size: 15px; }
.acties { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Kop ----------------------------------------------------------------------------------------------- */
.kop .binnen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 72px; }
.merk { display: inline-flex; padding: var(--space-2) 0; }
.merk img { height: 24px; width: auto; }
.navigatie { display: none; gap: var(--space-6); margin-left: auto; }
.navigatie a { color: var(--secondary); font-size: 15px; font-weight: 500; text-decoration: none; }
.navigatie a:hover { color: var(--foreground); }

/* --- Opening: links de belofte, rechts het portaal ---------------------------------------------------------- */
.opening {
  padding: 24px 0 56px;
  background: radial-gradient(70% 60% at 50% 0%, var(--primary-subtle), transparent 70%);
}
.opening .binnen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.opening h1 { font-size: 42px; font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; }
.opening .intro { max-width: 32em; margin-top: var(--space-6); color: var(--secondary); font-size: 18px; }
.opening .acties { margin-top: var(--space-8); }
.zekerheden { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; color: var(--secondary); font-size: 15px; }
.zekerheden li { position: relative; padding-left: 24px; }
.zekerheden li::before, .punten li::before, .rekenlijst li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--accent-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* De telefoon: een lijst om een echte schermafdruk van het portaal (390 × 844, verzonnen gegevens). */
.telefoon {
  position: relative;
  width: min(100%, 300px);
  margin: 0 auto;
  padding: 9px;
  border-radius: 44px;
  background: #0b1022;
  box-shadow: 0 0 0 1px light-dark(#0b102233, #ffffff26), 0 40px 70px -40px light-dark(#141d4580, #000000);
}
.scherm { position: relative; overflow: hidden; aspect-ratio: 390 / 844; border-radius: 35px; background: var(--surface); }
.scherm picture { position: absolute; inset: 0; display: block; }
.scherm img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.portaal { margin: 0; }
.rondleiding { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.rondleiding li { padding: 4px 12px; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 13px; font-weight: 600; }
.rondleiding li:first-child { background: var(--primary-subtle); color: var(--accent-text-strong); }

/* --- De beroepen: een rustige band die voorbijschuift --------------------------------------------------- */
.beroepen { overflow: hidden; padding: 20px 0; border-block: 1px solid var(--border); background: var(--surface); }
.beroepen-titel { margin-bottom: var(--space-3); color: var(--muted); font-size: 14px; font-weight: 600; text-align: center; }
.beroepen-rij { display: flex; width: max-content; }
.beroepen-rij span { padding: 0 14px; color: var(--secondary); font-size: 18px; font-weight: 500; white-space: nowrap; }
.beroepen-rij .punt { padding: 0; color: var(--muted); }

/* --- Blokken ------------------------------------------------------------------------------------------- */
.blok { padding: 72px 0; }
.blok-tint { background: var(--surface-muted); }
.blok-kop { max-width: 40em; }
.blok-kop .zacht { margin-top: var(--space-3); font-size: 18px; }
.blok-kop.midden { margin: 0 auto; text-align: center; }

/* Hoe het werkt: drie stappen, elk met het echte scherm erbij. */
.stappen { display: grid; gap: 48px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: stap; }
.stap { display: grid; gap: var(--space-6); counter-increment: stap; }
.stap-tekst h3::before {
  content: counter(stap);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--primary-subtle);
  color: var(--accent-text-strong);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.stap-tekst p { margin-top: var(--space-2); color: var(--secondary); }
.stap .telefoon { width: min(100%, 260px); }

/* Wat je ervan merkt: een stukje portaal naast de voordelen. */
.merken { display: grid; gap: 40px; align-items: center; margin-top: 48px; }
/* De kaart staat los op de achtergrond, met de eigen rand en hoeken van het portaal (24 px op 700 × 366). */
.uitsnede { margin: 0; }
.uitsnede figcaption { margin-bottom: var(--space-3); color: var(--secondary); font-size: 15px; font-weight: 600; }
.uitsnede img { width: 100%; border-radius: 3.43% / 6.56%; box-shadow: 0 28px 48px -28px light-dark(#141d4559, #000000); }
.voordelen { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.voordelen h3 { font-size: 18px; }
.voordelen p { margin-top: var(--space-1); color: var(--secondary); }

/* Overstappen: een band met één boodschap. */
.overstap { display: grid; gap: var(--space-6); align-items: center; padding: 32px 24px; border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.overstap .zacht { margin-top: var(--space-3); }

/* --- Prijzen ------------------------------------------------------------------------------------------- */
.prijzen { display: grid; gap: var(--space-6); margin-top: 48px; }
.kaart { padding: 28px 24px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.kaart h3 + * { margin-top: var(--space-3); }
.bedrag { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--secondary); }
.bedrag .getal { color: var(--foreground); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.punten { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.punten li, .rekenlijst li { position: relative; padding-left: 28px; }
.kaart .knop { width: 100%; margin-top: var(--space-6); }

/* De rekenhulp: zonder script. Elk aangevinkt vakje telt zijn bedrag op bij een CSS-teller die bij € 85 begint. */
.reken { counter-reset: prijs 85; }
.reken fieldset { margin: 0; padding: 0; border: 0; }
.reken fieldset { margin-top: var(--space-4); }
/* De vennoten alleen bij een VOF of maatschap. Een verborgen keuze telt niet mee: display: none telt geen teller op. */
.vennoten { display: none; }
.reken:has(.vof:checked) .vennoten { display: block; }
.reken .hulp { margin-top: var(--space-2); color: var(--muted); font-size: 14px; }
.reken legend { margin-bottom: var(--space-3); padding: 0; color: var(--secondary); }
.keuzes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.keuze { position: relative; }
.keuze input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.keuze span {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--control-border);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.keuze input:checked + span { background: var(--primary); color: var(--primary-foreground); box-shadow: none; }
.keuze input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.schakel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-muted);
  cursor: pointer;
}
.schakel input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.schakel .plus { color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reken fieldset + .schakel { margin-top: var(--space-6); }
.reken .vorm .keuze span { padding: 0 16px; }
.plus-15:checked { counter-increment: prijs 15; }
.plus-25:checked { counter-increment: prijs 25; }
.plus-40:checked { counter-increment: prijs 40; }
.plus-80:checked { counter-increment: prijs 80; }
.plus-120:checked { counter-increment: prijs 120; }
.plus-160:checked { counter-increment: prijs 160; }
.uitkomst { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.uitkomst .totaal { white-space: nowrap; }
.uitkomst .totaal::before { content: "€ " counter(prijs); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kaart .noot { margin-top: var(--space-4); color: var(--secondary); font-size: 15px; }

.tarieven { width: 100%; margin-top: var(--space-3); border-collapse: collapse; font-size: 16px; }
.tarieven th, .tarieven td { padding: 12px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tarieven th { padding-right: var(--space-4); font-weight: 500; }
.tarieven td { color: var(--secondary); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarieven .uitleg { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }
.btw-noot { margin-top: var(--space-3); color: var(--muted); font-size: 14px; }

/* --- Over ons ------------------------------------------------------------------------------------------- */
.oprichter { display: grid; gap: 40px; align-items: center; }
.foto {
  display: grid;
  place-items: center;
  width: min(100%, 340px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px;
  background: var(--surface-muted);
  box-shadow: 0 0 0 1px var(--border);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto .invullen { margin: var(--space-4); font-size: 14px; text-align: center; }
.oprichter h2 + .zacht { margin-top: var(--space-4); }
.oprichter .zacht + .zacht { margin-top: var(--space-3); }
.citaat { margin: var(--space-6) 0 0; padding-left: var(--space-4); border-left: 3px solid var(--primary); font-size: 21px; font-weight: 500; line-height: 1.45; }
.citaat-naam { margin-top: var(--space-3); padding-left: var(--space-4); color: var(--muted); font-size: 15px; }
.citaat-naam a { color: var(--accent-text); }

/* --- Vragen ---------------------------------------------------------------------------------------------- */
.vragen-vlak { display: grid; gap: 32px; }
.vragen-vlak .zacht { margin-top: var(--space-3); }
.vragen { border-top: 1px solid var(--border); }
.vraag { border-bottom: 1px solid var(--border); }
.vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: 16px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 200ms ease-out;
}
.vraag[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.vraag p { max-width: 40em; padding: 0 0 20px; color: var(--secondary); }

/* --- Kennismaken ----------------------------------------------------------------------------------------- */
.slot { padding: 56px 24px; border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); text-align: center; }
.slot .zacht { max-width: 32em; margin: var(--space-3) auto 0; font-size: 18px; }
.slot .acties { justify-content: center; margin-top: var(--space-6); }
.slot .klein { margin-top: var(--space-4); color: var(--muted); font-size: 15px; }

/* Wat de boekhouder nog moet invullen (alleen zichtbaar in een conceptversie, website/bouw.py --concept). */
.invullen { padding: 1px var(--space-1); border: 1px dashed var(--warning); border-radius: var(--radius-sm); background: var(--warning-subtle); color: var(--warning); }

/* --- Voet ------------------------------------------------------------------------------------------------- */
.voet { padding: 40px 0 48px; border-top: 1px solid var(--border); color: var(--secondary); font-size: 15px; }
.voet .binnen { display: grid; gap: var(--space-6); }
.voet-merk img { height: 22px; width: auto; }
.voet strong { color: var(--foreground); font-weight: 600; }
.voet .gegevens p + p { margin-top: var(--space-3); }
.voet a { color: var(--secondary); }
.voet a:hover { color: var(--foreground); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.links a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- 404 -------------------------------------------------------------------------------------------------- */
.zoek { padding: 72px 0 120px; text-align: center; }
.zoek h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; }
.zoek .zacht { margin-top: var(--space-4); font-size: 18px; }
.zoek .acties { justify-content: center; margin-top: var(--space-8); }

/* --- De laptop ---------------------------------------------------------------------------------------------- */
@media (min-width: 800px) {
  body { font-size: 18px; }
  .binnen { padding: 0 var(--space-8); }
  h2 { font-size: 44px; }
  .navigatie { display: flex; }
  .opening { padding: 48px 0 96px; }
  .opening .binnen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
  .opening h1 { font-size: 68px; }
  .opening .intro { font-size: 20px; }
  .telefoon { width: 320px; }
  .blok { padding: 112px 0; }
  .stappen { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .stap { align-content: start; }
  .stap .telefoon { order: -1; width: 100%; max-width: 280px; margin: 0; }
  .merken { grid-template-columns: 1fr 1fr; gap: 72px; }
  .overstap { grid-template-columns: 1fr auto; padding: 40px 48px; }
  .prijzen { grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: stretch; }
  .eenmalig { grid-column: 1 / -1; }
  .kaart { padding: 36px; }
  .oprichter { grid-template-columns: 340px 1fr; gap: 72px; }
  .vragen-vlak { grid-template-columns: 1fr 1.7fr; gap: 64px; align-items: start; }
  .slot { padding: 80px 48px; }
  .zoek { padding: 120px 0 160px; }
  .zoek h1 { font-size: 56px; }
  .voet .binnen { grid-template-columns: auto 1fr auto; align-items: start; gap: 48px; }
}

/* --- Beweging: alleen als die niet uit staat --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* De rondleiding: vier schermen van 4 s, samen 16 s; het eerste staat er al bij het laden. */
  .rondleiding-scherm { opacity: 0; animation: rondleiding 16s infinite; }
  .rondleiding-scherm:nth-child(1) { opacity: 1; animation-delay: -1s; }
  .rondleiding-scherm:nth-child(2) { animation-delay: 3s; }
  .rondleiding-scherm:nth-child(3) { animation-delay: 7s; }
  .rondleiding-scherm:nth-child(4) { animation-delay: 11s; }
  .rondleiding li { animation: rondleiding-label 16s infinite; }
  .rondleiding li:nth-child(1) { animation-delay: -1s; }
  .rondleiding li:nth-child(2) { animation-delay: 3s; }
  .rondleiding li:nth-child(3) { animation-delay: 7s; }
  .rondleiding li:nth-child(4) { animation-delay: 11s; }
  .rondleiding li:first-child { background: var(--surface-muted); color: var(--muted); }
  .beroepen-rij { animation: schuif 60s linear infinite; }
  .beroepen:hover .beroepen-rij { animation-play-state: paused; }
  .vraag::details-content { block-size: 0; overflow: clip; transition: block-size 260ms ease-out, content-visibility 260ms allow-discrete; }
  .vraag[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knop, .vraag summary::after { transition: none; }
  .rondleiding-scherm:not(:first-child) { display: none; }
  .rondleiding { display: none; }
}
@keyframes rondleiding {
  0% { opacity: 0; }
  3%, 25% { opacity: 1; }
  28%, 100% { opacity: 0; }
}
@keyframes rondleiding-label {
  0% { background: var(--surface-muted); color: var(--muted); }
  3%, 25% { background: var(--primary-subtle); color: var(--accent-text-strong); }
  28%, 100% { background: var(--surface-muted); color: var(--muted); }
}
@keyframes schuif { to { transform: translateX(-50%); } }