/* Jogi Feest- en eventwebsites: dezelfde opbouw als de bouw- en clubsite, in het thema van Melissa's ontwerp 'Webdesign voor events'
   (18 okt, 'het andere te kinderachtig'): warm crème met oudroze en goud, een sierlijke schreefletter (Fraunces), accentwoorden in
   goud en roze, een enkel woord in goud (een schrijfletter vond Melissa niet mooi), een grote feestfoto die links in het crème overloopt met een
   golfrand, kaarten met foto en een gekleurd rondje, zonder glinstering, zegel of hartje (wens Melissa 18 okt).
   Openingsfoto's: Melissa's eigen AI-beelden (ballonnen, champagne, confetti). Contrast: wit op roze #9c4a63 = 5,9:1, goud #8a6a2e op crème = 4,7:1. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Parisienne"; src: url("/fonts/parisienne.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --kop-letter: "Fraunces", Georgia, serif;
  --kop-gewicht: 500;
  --tekst-letter: "Golos Text", system-ui, sans-serif;
  --schrijf-letter: "Parisienne", cursive;
  --achtergrond: #faf6f1;
  --kop-achtergrond: rgba(250, 246, 241, .95);
  --kaart: #fffdfa;
  --vlak: #f3ebe3;
  --inkt: #2a2224;
  --zacht: #6e6260;
  --roos: #9c4a63;
  --roos-donker: #823a51;
  --roos-zacht: #f4e4e6;
  --goud: #c4a26a;
  --goud-groot: #a07c3f;
  --goud-tekst: #8a6a2e;
  --salie: #8fa77a;
  --paars: #8a6aa8;
  --blauw: #6f8fb5;
  --terra: #c8836a;
  --accent-groot: #9c4a63;
  --accent-tekst: #9c4a63;
  --accent-op-donker: #e9c6cf;
  --knop: #9c4a63;
  --knop-hover: #823a51;
  --knop-tekst: #fff;
  --donker: #3b2430;
  --op-donker: #e3d5d8;
  --lijn: #ece2d8;
  --lijn-sterk: #ddcdbf;
  --rond: 999px;
  --rond-groot: 18px;
  --opening-waas: linear-gradient(90deg, rgba(250, 246, 241, .95) 0%, rgba(250, 246, 241, .8) 28%, rgba(250, 246, 241, .25) 40%, rgba(250, 246, 241, 0) 47%);
  --opening-waas-tablet: linear-gradient(90deg, rgba(250, 246, 241, .97) 0%, rgba(250, 246, 241, .88) 50%, rgba(250, 246, 241, .3) 78%, rgba(250, 246, 241, 0) 100%);
}

/* Koppen: sierlijke schreefletter; accentwoorden in goud en roze (schrijfletter alleen Parisienne voor een enkel gouden woord, keuze Melissa 18 okt) */
h1, h2, h3 { letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--roos); }
h1 em { color: var(--goud-groot); }
h1 em.roos { color: var(--roos); }
/* Handgeschreven gouden woord, zoals in Melissa's ontwerp (Parisienne, keuze Melissa, op de site vergeleken) */
em.schrift, .opening-feest h1 em.schrift { font-family: var(--schrijf-letter); font-weight: 400; font-size: 1.3em; line-height: .8; letter-spacing: 0; color: var(--goud-groot); padding: 0 .05em; }
.opening-feest h1 em.schrift { padding-left: .14em; }
.label { letter-spacing: .16em; font-weight: 600; color: var(--roos); }
.knop { font-weight: 600; letter-spacing: .06em; }
.knop-lijn { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop-lijn:hover { background: var(--inkt); color: #fff; }

/* Kop: licht en rustig */
.kop { border-bottom-color: var(--lijn); }
.kop .merk-naam { color: var(--inkt); font-size: 1.15rem; font-weight: 500; }
.menu a:not(.knop) { letter-spacing: .12em; }
/* Logo: de naam altijd op twee regels, 'Feest- en event' met 'websites' eronder, in de kop en in de voet (wens Melissa 18 okt: 'dan is dat het logo') */
.merk-naam .merk-breek { display: block; }
.merk .merk-naam { line-height: 1.08; }
@media (max-width: 380px) { .kop .merk-naam { font-size: 1.05rem; } }

/* Opening: de feestfoto over de hele breedte, links zacht in het crème, met een golfrand onderaan */
.opening-feest { min-height: clamp(42rem, 52vw, 62rem); background: var(--achtergrond); }
.opening-feest .opening-foto { object-position: 100% 72%; }
.opening-feest::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 4vw, 60px); z-index: 0; background: var(--achtergrond); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C240 6 480 6 720 30s480 30 720-2V60H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C240 6 480 6 720 30s480 30 720-2V60H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.opening-feest .opening-binnen { position: relative; z-index: 2; padding-top: 4rem; padding-bottom: 6rem; }
.opening-feest .opening-tekst { max-width: min(36rem, 44vw); }
.opening-feest .label { color: var(--roos); }
.opening-feest h1 { color: var(--inkt); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.06; }
.opening-feest .intro { color: var(--zacht); }
.opening-prijs { display: block; margin-top: .5rem; font-weight: 600; color: var(--inkt); }
.opening-feest .knop-vol { background: var(--knop); color: #fff; }
.opening-feest .knop-vol:hover { background: var(--knop-hover); color: #fff; }
.opening-feest .knop-lijn { background: rgba(255, 255, 255, .55); color: var(--inkt); border-color: var(--inkt); }
.opening-feest .knop-lijn:hover { background: var(--inkt); color: #fff; }
.opening-feest .belofte { color: var(--zacht); }
.opening-feest .belofte .ico { color: var(--roos); }
.opening-punten { list-style: none; margin: 1.4rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--lijn-sterk); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .9rem; color: var(--inkt); }
.opening-punten li { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.opening-punten .ico { width: 1.05em; height: 1.05em; color: var(--roos); }
/* Tablet en kleine laptop: de foto met de laptop als brede band boven de tekst, anders valt de tekst over het scherm */
@media (max-width: 1200px) {
  .opening-feest { display: block; min-height: 0; padding: 0; }
  .opening-feest::before { display: none; }
  .opening-feest .opening-dias { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 8; }
  .opening-feest .opening-foto { object-position: 100% 60%; }
  .opening-feest::after { top: calc((100vw / 2) - 40px); bottom: auto; height: 42px; }
  .opening-feest .opening-binnen { padding-top: 1.6rem; padding-bottom: 3.5rem; }
  .opening-feest .opening-tekst { max-width: 40rem; }
  }
/* Telefoon: de foto (het feestdeel rechts) als band bovenaan met de golf, de tekst eronder op crème */
@media (max-width: 700px) {
  .opening-feest .opening-dias { aspect-ratio: 4 / 3; }
  .opening-feest .opening-foto { object-position: 86% 60%; }
  .opening-feest::after { top: calc((100vw * 3 / 4) - 26px); bottom: auto; height: 28px; }
  .opening-feest .opening-binnen { padding: 1.4rem 16px 2.6rem; }
  .opening-feest .label { color: var(--roos); }
  .opening-feest h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); color: var(--inkt); }

  .opening-feest h1 em.schrift { color: var(--goud-groot); }
  .opening-feest h1 em.roos { color: var(--roos); }
  .opening-feest .intro { font-size: .98rem; color: var(--zacht); }
  .opening-feest .knoppen { gap: .55rem; }
  .opening-feest .knop { min-height: 2.6rem; padding: .55rem 1rem; font-size: .74rem; }
  .opening-feest .knop-vol { background: var(--knop); color: #fff; }
  .opening-feest .knop-vol:hover { background: var(--knop-hover); color: #fff; }
  .opening-feest .knop-lijn { background: transparent; color: var(--inkt); border-color: var(--inkt); }
  .opening-feest .knop-lijn:hover { background: var(--inkt); color: #fff; }
  .opening-feest .belofte { margin-top: .8rem; font-size: .88rem; color: var(--zacht); }
  .opening-feest .belofte .ico { color: var(--roos); }
  .opening-punten { font-size: .82rem; gap: .4rem 1rem; margin-top: 1rem; padding-top: 1rem; }
  }

/* Kenmerken: rustige band met lichte gekleurde rondjes */
.kenmerken { padding: 2rem 0 2.4rem; background: var(--achtergrond); }
.kenmerken ul { list-style: none; max-width: 76rem; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.kenmerken li { display: flex; gap: .9rem; align-items: center; }
.ken-icoon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--roos-zacht); color: var(--roos); transition: transform .35s; }
.kenmerken li:nth-child(2) .ken-icoon { background: #f5ecdc; color: var(--goud-tekst); }
.kenmerken li:nth-child(3) .ken-icoon { background: #eaf0e4; color: #5b7347; }
.kenmerken li:nth-child(4) .ken-icoon { background: #eee8f4; color: #6d4f8a; }
.kenmerken li:hover .ken-icoon { transform: translateY(-3px); }
.ken-icoon .ico { width: 1.4rem; height: 1.4rem; stroke-width: 1.5; }
.kenmerken strong { display: block; font-size: .95rem; }
.kenmerken span { font-size: .88rem; color: var(--zacht); line-height: 1.45; }
@media (max-width: 1100px) { .kenmerken ul { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; } }
@media (max-width: 520px) { .kenmerken ul { grid-template-columns: 1fr; } }

/* Websites voor: kaarten met een foto, een gekleurd rondje op de rand en de tekst eronder (zoals in het ontwerp) */
.speciaal { background: var(--achtergrond); padding-top: clamp(2.5rem, 5vw, 4rem); }
.speciaal h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.vakken { list-style: none; max-width: 76rem; margin: 2.8rem auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.vak { --kleur: var(--roos); position: relative; background: var(--kaart); border-radius: var(--rond-groot); overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 1px 0 var(--lijn), 0 20px 40px -34px rgba(80, 40, 30, .45); transition: transform .3s, box-shadow .3s; }
.vak-2 { --kleur: var(--goud); }
.vak-3 { --kleur: var(--salie); }
.vak-4 { --kleur: var(--paars); }
.vak-5 { --kleur: var(--terra); }
.vak-6 { --kleur: var(--blauw); }
.vak-foto { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.vak-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.vak-icoon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-top: -1.8rem; border-radius: 50%; background: var(--kleur); color: #fff; border: 4px solid var(--kaart); position: relative; z-index: 1; }
.vak-icoon .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }
.vak > div { padding: .7rem 1.4rem 1.6rem; }
.vak strong { display: block; font: 500 1.2rem/1.25 var(--kop-letter); margin-bottom: .4rem; }
.vak > div > span { display: block; font-size: .92rem; line-height: 1.55; color: var(--zacht); text-wrap: pretty; }
@media (max-width: 1000px) { .vakken { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vakken { grid-template-columns: 1fr; } }

/* Wat erin zit: lichte band, tekst links, laptop en telefoon rechts (zoals in het ontwerp) */
.wat { background: var(--vlak); }
.wat .vinkjes .ico { background: var(--roos); color: #fff; border-radius: 50%; padding: .22rem; width: 1.3em; height: 1.3em; stroke-width: 2.6; margin-top: .12rem; }

/* Probeer het zelf: de feestpakket-samensteller van demo Vlag&Vonk (114) */
.samensteller { background: var(--achtergrond); }
.pk-binnen { max-width: 76rem; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.4rem 3rem; align-items: start; }
.pk-intro { grid-column: 1 / -1; max-width: 46rem; }
.pk-intro p:last-child { color: var(--zacht); margin: 0; }
.pakket { display: grid; gap: 1.7rem; padding: 2rem; border-radius: var(--rond-groot); background: var(--kaart); border: 1px solid var(--lijn); box-shadow: 0 30px 60px -48px rgba(80, 40, 30, .5); }
.pk-groep { border: 0; margin: 0; padding: 0; min-width: 0; }
.pk-groep legend, .pk-groep .legend { display: block; font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; padding: 0; color: var(--inkt); }
.gasten-rij { display: flex; align-items: center; gap: 1.2rem; }
.gasten-rij input[type="range"] { flex: 1; min-width: 0; accent-color: var(--roos); height: 2rem; cursor: pointer; }
.gasten-veld { display: inline-flex; align-items: center; gap: .5rem; flex: none; font-weight: 600; }
.gasten-veld input { width: 4.6rem; text-align: right; font: 600 1.2rem/1 var(--tekst-letter); padding: .5em .7em; border: 1.5px solid var(--lijn-sterk); border-radius: 12px; color: var(--inkt); background: #fff; }
.gasten-veld input[aria-invalid="true"] { border-color: #b03a2e; }
.hulp { margin: .5rem 0 0; font-size: .84rem; color: var(--zacht); }
.chips { display: grid; gap: .6rem; }
.chips-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips label > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; height: 100%; padding: .85rem .5rem; border: 1.5px solid var(--lijn-sterk); border-radius: 14px; background: #fff; text-align: center; line-height: 1.3; transition: border-color .25s, background-color .25s, transform .3s; }
.chips-2 label > span { flex-direction: row; gap: .6rem; }
.chips .ico { width: 1.5rem; height: 1.5rem; color: var(--roos); }
.chips b { font-weight: 600; font-size: .95rem; }
.chips small { font-size: .78rem; color: var(--zacht); }
.chips label:hover > span { border-color: var(--roos); transform: translateY(-2px); }
.chips input:checked + span { border-color: var(--roos); background: #fbf1f2; box-shadow: inset 0 0 0 1px var(--roos); }
.chips input:focus-visible + span, .schakel input:focus-visible + .schakel-baan { outline: 3px solid var(--goud-groot); outline-offset: 2px; }
.extra-rij { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; }
.schakel { position: relative; display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; cursor: pointer; }
.schakel small { font-weight: 400; color: var(--zacht); }
.schakel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schakel-baan { position: relative; width: 2.9rem; height: 1.65rem; border-radius: 1rem; background: #d9cdc6; transition: background-color .25s; flex: none; }
.schakel-baan::after { content: ""; position: absolute; left: 3px; top: 3px; width: calc(1.65rem - 6px); height: calc(1.65rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(42, 34, 36, .3); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.schakel input:checked + .schakel-baan { background: var(--roos); }
.schakel input:checked + .schakel-baan::after { transform: translateX(1.25rem); }
.schakel input:disabled ~ span { opacity: .45; }
.schakel:has(input:disabled) { cursor: not-allowed; }
.pk-uitkomst { position: sticky; top: 6rem; padding: 1.6rem 1.8rem 1.8rem; border-radius: var(--rond-groot); background: var(--donker); color: #fff; box-shadow: 0 30px 60px -34px rgba(59, 36, 48, .8); }
.plattegrond svg { display: block; width: 100%; height: auto; }
.plan-tent { fill: rgba(255, 255, 255, .05); stroke: var(--goud); stroke-width: 1.6; }
.plan-zaal { fill: rgba(255, 255, 255, .04); stroke: var(--op-donker); stroke-width: 1.4; stroke-dasharray: 6 5; }
.plan-nok { stroke: rgba(196, 162, 106, .45); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.plan-tafel { fill: #fff; }
.plan-stoel { fill: rgba(255, 255, 255, .55); }
.plan-sta { fill: none; stroke: #fff; stroke-width: 1.4; }
.plan-heater { fill: var(--terra); }
.plan-dans { fill: rgba(233, 198, 207, .14); stroke: var(--accent-op-donker); stroke-width: 1; }
.plan-dans-ruit { fill: rgba(233, 198, 207, .3); }
.plan-snoer { fill: none; stroke: #f3dca6; stroke-width: 1.2; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.plan-maat { fill: var(--op-donker); font: 600 13px var(--tekst-letter); }
.plan-onder { margin: .7rem 0 1rem; font-size: .84rem; color: var(--op-donker); text-align: center; }
.pk-regels { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: .92rem; }
.pk-regels li { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--op-donker); }
.pk-regels .aantal { font-weight: 600; color: #f3dca6; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-regels small { display: block; font-size: .78rem; color: #bfaab2; }
.pk-regels b { font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-totaal { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.pk-totaal p { margin: 0; }
.pk-totaal span { display: block; font-weight: 600; }
.pk-totaal small { display: block; font-size: .8rem; color: var(--op-donker); }
.pk-prijs { font: 500 clamp(2rem, 3vw, 2.5rem)/1 var(--kop-letter); color: #f3dca6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-fout { margin: 0; font-weight: 600; }
.pk-uitkomst.nieuw .pk-prijs { animation: tik .5s cubic-bezier(.3, 1.5, .5, 1); }
.pk-uitkomst.nieuw #plan .stuk { animation: plop .45s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes tik { 0% { transform: scale(.94); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes plop { 0% { transform: scale(0); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pk-voet { grid-column: 1; margin: 0; font-size: .9rem; color: var(--zacht); }
.pk-voet a { color: var(--roos); text-underline-offset: 3px; }
@media (max-width: 900px) { .pk-binnen { grid-template-columns: 1fr; } .pk-uitkomst { position: static; } }
@media (max-width: 560px) {
  .pakket { padding: 1.4rem 1.1rem; gap: 1.4rem; }
  .chips-3 { gap: .4rem; }
  .chips-3 label > span { padding: .7rem .3rem; }
  .chips-3 small { font-size: .7rem; }
  .chips-2 { grid-template-columns: 1fr; }
  .gasten-rij { gap: .8rem; }
  .pk-uitkomst { padding: 1.2rem 1.1rem 1.4rem; }
  .pk-regels li { grid-template-columns: 2.6rem minmax(0, 1fr) auto; font-size: .88rem; }
  .pk-totaal { flex-direction: column; align-items: flex-start; gap: .4rem; }
}
@media (max-width: 380px) { .chips-3 { grid-template-columns: 1fr; } .chips-3 label > span { flex-direction: row; gap: .5rem; } }

/* Er kan nog veel meer: lichte vakjes met een gekleurd rondje */
.kan-ook-blok { max-width: 76rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: 0 16px; }
.kan-kop { font: 500 1.45rem/1.2 var(--kop-letter); margin: 0; }
.kan-ook { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.kan-ook a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; height: 100%; padding: .95rem 1rem; border: 1px solid var(--lijn); border-radius: 16px; background: var(--kaart); color: var(--inkt); text-decoration: none; transition: border-color .25s, transform .25s, box-shadow .25s; }
.kan-ook a:hover { border-color: var(--roos); transform: translateY(-2px); box-shadow: 0 18px 30px -24px rgba(80, 40, 30, .5); }
.kan-icoon { --kleur: var(--roos); display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--kleur); color: #fff; transition: transform .3s; }
.kan-ook li:nth-child(2) .kan-icoon { --kleur: var(--goud); }
.kan-ook li:nth-child(3) .kan-icoon { --kleur: var(--salie); }
.kan-ook li:nth-child(4) .kan-icoon { --kleur: var(--terra); }
.kan-ook li:nth-child(5) .kan-icoon { --kleur: var(--paars); }
.kan-ook li:nth-child(6) .kan-icoon { --kleur: var(--blauw); }
.kan-ook a:hover .kan-icoon { transform: rotate(-8deg) scale(1.06); }
.kan-icoon .ico { width: 1.4rem; height: 1.4rem; stroke-width: 1.5; }
.kan-ook strong { display: block; font-size: .95rem; white-space: nowrap; }
.kan-ook small { display: block; font-size: .84rem; color: var(--zacht); line-height: 1.4; margin-top: .1rem; }
.kan-ook .kan-pijl { width: 1rem; height: 1rem; color: var(--roos); transition: transform .25s; }
.kan-ook a:hover .kan-pijl { transform: translateX(3px); }
@media (max-width: 1000px) { .kan-ook { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kan-ook { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .kan-ook a { grid-template-columns: auto 1fr; gap: .75rem; padding: .9rem .85rem; } .kan-ook .kan-pijl { display: none; } .kan-ook strong { font-size: .88rem; } }

/* Werkwijze: gekleurde rondjes (roze, goud, salie, paars, blauw) met een stippellijn ertussen */
.werkwijze { background: var(--vlak); }
.stappen li::before { border: 0; color: #fff; font: 500 1.3rem/1 var(--kop-letter); background: var(--roos); box-shadow: 0 10px 20px -12px rgba(80, 40, 30, .6); }
.stappen li:nth-child(2)::before { background: var(--goud-groot); }
.stappen li:nth-child(3)::before { background: #6c8757; }
.stappen li:nth-child(4)::before { background: #7a5a98; }
.stappen li:nth-child(5)::before { background: #55779e; }
.stappen li:hover::before { background-color: var(--inkt); color: #fff; }
.stappen { --stappen-lijn: var(--lijn-sterk); }
@media (min-width: 901px) {
  .stappen li:not(:last-child)::after { content: ""; position: absolute; top: 1.6rem; left: calc(50% + 2rem); width: calc(100% - 4rem + 1.6rem); border-top: 2px dotted var(--lijn-sterk); }
}

/* Net zo mooi op elke telefoon */
.op-telefoon { background: var(--achtergrond); }

/* Voorbeeldsites: kaarten met een lange schermafbeelding die bij aanwijzen of aanraken rustig naar beneden scrolt */
.voorbeelden { background: var(--vlak); }
.voorbeelden .kaart { background: var(--kaart); border-radius: var(--rond-groot); overflow: hidden; box-shadow: 0 1px 0 var(--lijn), 0 20px 40px -34px rgba(80, 40, 30, .45); transition: transform .3s, box-shadow .3s; }
.voorbeelden .kaart:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--lijn), 0 28px 46px -30px rgba(80, 40, 30, .5); }
.voorbeelden .kaart-beeld { background: none; padding: 0; border-radius: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.voorbeelden .kaart-voet { display: none; }
.voorbeelden .kaart-tekst { padding: 1.1rem 1.3rem 1.2rem; }
.voorbeelden .kaart-tekst strong { font-size: 1.25rem; }
.voorbeelden .kaart-beeld .scroll-beeld { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 0; transition: object-position 7s ease-in-out; }
.voorbeelden .kaart:hover .kaart-beeld .scroll-beeld, .voorbeelden .kaart:focus-visible .kaart-beeld .scroll-beeld, .voorbeelden .kaart:active .kaart-beeld .scroll-beeld { object-position: 50% 100%; transform: none; }

/* Prijzen */
.prijzen { background: var(--achtergrond); }
.prijskaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-groot); box-shadow: 0 30px 60px -48px rgba(80, 40, 30, .5); }
.prijs-helft + .prijs-helft { border-left: 1px solid var(--lijn); padding-left: 3rem; margin-left: -1.5rem; }
@media (max-width: 760px) { .prijs-helft + .prijs-helft { border-left: 0; padding-left: 0; margin-left: 0; padding-top: 1.8rem; border-top: 1px solid var(--lijn); } }
.rekenvoorbeeld { background: var(--vlak); }

/* Over mij */
.over-mij { background: var(--vlak); }
.over-mij-foto img { border-radius: var(--rond-groot); }

.vragen { background: var(--achtergrond); }
.vragenlijst summary { font-size: 1.15rem; }
.vragenlijst summary::after { color: var(--roos); }

/* Slot: lichte band zoals in het ontwerp: kop met een gouden woord, knoppen rechts met een schuine zin */
.slot { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--vlak), #f1e3df); border-top: 1px solid var(--lijn); }
.slot-binnen { position: relative; z-index: 2; max-width: 76rem; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; }
.slot h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 1.1rem 0 .6rem; }
.slot p { margin: 0; color: var(--zacht); }
.slot-noot { font-size: .9rem; margin-top: .6rem !important; }
.slot-noot a { color: var(--roos); }
.slot-actie { display: grid; justify-items: center; gap: .6rem; }
.slot-hand { font: 400 1.8rem/1 var(--schrijf-letter); color: var(--goud-tekst) !important; transform: rotate(-2deg); }
@media (max-width: 900px) { .slot-binnen { grid-template-columns: 1fr; } .slot-actie { justify-items: start; } }
@media (max-width: 700px) { .slot .knop { flex: 1 1 100%; } .slot .knoppen { width: 100%; } 
/* Voet */
.voet { background: var(--donker); }