/* ============================================================
   sprint.css: designlaag voor /sprint
   ------------------------------------------------------------
   Waarom een eigen bestand en geen regels in style.css:
   style.css wordt door 47 pagina's geladen. Elke wijziging daar
   moet op al die pagina's nagekeken worden, en het ?v=-nummer
   moet overal mee omhoog. Deze laag hoort bij één pagina, hangt
   volledig aan eigen klassennamen met sp- ervoor, en wordt alleen
   door sprint.html ingeladen. Andere pagina's blijven onaangeraakt.

   De kleuren en fonts komen uit style.css (:root). Hier staan
   alleen vorm, ritme en beweging.
   ============================================================ */

.sprint {
  --sp-radius: 22px;
  --sp-radius-groot: 30px;
  --sp-schaduw: 0 26px 64px -24px rgba(0, 41, 38, 0.38);
  --sp-schaduw-diep: 0 40px 90px -30px rgba(0, 41, 38, 0.5);
  --sp-veer: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- knop op een mosgroene kaart: outline-lime ----------
   Letterlijk uit het ontwerp: "Button variant=outline-lime brandmark arrow",
   een transparante knop met een signaalgroene rand en tekst, het merkteken
   ervoor en de pijl erachter (die laatste komt al gratis mee via .btn::after
   in style.css, dat voor elke .btn geldt). Gebouwd op .btn--outline (al
   signaalgroen omlijnd), alleen het merkteken ontbrak daar. Er bestaat geen
   groene versie van img/cta-icon-white.png, dus het witte icoon wordt met
   een CSS-mask signaalgroen gekleurd in plaats van dat er een nieuw
   PNG-bestand bijkomt. Alleen voor de twee knoppen in de mosgroene kaarten
   van het prijsblok en de calculator; alle andere knoppen op de site
   blijven ongemoeid. */
.btn--outline-lime { background: transparent; color: var(--signal-green); border: 1.5px solid var(--signal-green); }
.btn--outline-lime::before {
  content: ''; width: 21px; height: 21px; flex-shrink: 0;
  background-color: var(--signal-green);
  -webkit-mask-image: url('img/cta-icon-white.png'); mask-image: url('img/cta-icon-white.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ---------- beweging ----------
   Eén mechanisme voor de hele pagina: een element krijgt .reveal in
   de HTML, reveal.js zet er .is-in op zodra het in beeld komt. Zonder
   JavaScript blijft alles gewoon staan (zie .geen-js hieronder), en
   wie beweging heeft uitgezet krijgt het meteen te zien. */
.sprint .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--sp-veer), transform 0.7s var(--sp-veer);
  transition-delay: var(--vertraag, 0s);
}
.sprint .reveal.is-in { opacity: 1; transform: none; }
.geen-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sprint .reveal { opacity: 1; transform: none; transition: none; }
  .sp-band__spoor { animation: none; }
  .sp-band { overflow-x: auto; }
}

/* ---------- hero ----------
   Was: één kolom tekst op een vlakke moss-achtergrond, met een H1 die
   op 1440px tot tegen de rand liep. Nu: tekst links in een eigen kolom,
   foto rechts in de merkboog, en een kleinere typemaat zodat de kop
   past in plaats van te vullen. */
.sp-hero { position: relative; overflow: hidden; padding: clamp(2.6rem, 5vw, 4.4rem) 0 clamp(2.6rem, 5vw, 4rem); }
.sp-hero::after {
  /* zachte lichtval van rechtsboven, geeft het vlak diepte zonder beeld */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 78% 8%, rgba(201, 242, 4, 0.10), transparent 62%);
}
.sp-hero > .container { position: relative; z-index: 3; }
.sp-hero__grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(2rem, 5vw, 4.6rem); align-items: center; }
.sp-hero h1 { font-size: clamp(2.15rem, 3.5vw, 3.35rem); line-height: 1.1; }
.sp-hero h1 .caps { font-size: 0.84em; letter-spacing: 0.01em; }
.sp-hero__sub { font-size: clamp(1.08rem, 1.4vw, 1.28rem); margin-top: 1.5rem; max-width: 30em; opacity: 0.92; }

/* Eyebrow als label in plaats van een zin die over twee regels valt. */
.sp-label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--signal-green);
  border: 1px solid rgba(201, 242, 4, 0.4); border-radius: 999px;
  padding: 0.55rem 1.1rem; margin-bottom: 1.7rem;
}
.sp-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--signal-green); flex: 0 0 auto; }

/* De feiten die eerst in de eyebrow gepropt zaten, staan nu onder de knop
   waar ze te lezen zijn in plaats van te scannen. */
.sp-feiten { display: flex; flex-wrap: wrap; gap: 0.7rem 1.9rem; margin-top: 2.1rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.sp-feit { display: grid; gap: 0.15rem; }
.sp-feit b { font-family: var(--font-heading); font-weight: 300; font-size: 1.42rem; line-height: 1.1; color: var(--signal-green); }
.sp-feit span { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.11em; font-weight: 700; opacity: 0.62; }

/* Foto in de merkboog, dezelfde vorm als .hero-photo op de homepage.
   .sp-boog is de vorm, .sp-hero__foto zet hem in de hero op maat. */
.sp-boog { position: relative; border-radius: 50% 50% var(--sp-radius) var(--sp-radius) / 30% 30% var(--sp-radius) var(--sp-radius); overflow: hidden; box-shadow: var(--sp-schaduw-diep); }
.sp-boog img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.sp-hero__foto { max-width: 460px; margin-left: auto; }
/* Het lijnenspel rechtsboven stond met de maten in de HTML zelf. Op een
   telefoon kwam het daardoor dwars door het label en de eerste regel van
   de kop te liggen. Nu staat het hier, met een eigen maat voor kleine
   schermen zodat het aan de rand blijft waar het hoort. */
.sp-hero__geo { width: 420px; right: -140px; top: -60px; }

/* ---------- feitenband ----------
   Smalle band onder de hero. Doet hetzelfde werk als een opsomming,
   maar leest als één beweging in plaats van als een lijstje. */
.sp-band { background: var(--core-black); color: var(--pure-white); border-top: 1px solid rgba(201, 242, 4, 0.18); border-bottom: 1px solid rgba(201, 242, 4, 0.18); overflow: hidden; padding: 0.95rem 0; }
.sp-band__spoor { display: flex; width: max-content; animation: sp-schuif 34s linear infinite; }
.sp-band__rij { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; }
.sp-band__rij span { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; white-space: nowrap; }
.sp-band__rij i { color: var(--signal-green); font-style: normal; font-size: 0.7rem; }
@keyframes sp-schuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- koppen ----------
   Op deze pagina stonden vier H2's volledig in .caps: hoofdletters in
   Almarai ExtraBold over drie regels. Naast de serif-koppen van de rest
   las dat als twee verschillende websites. De hoofdletters blijven, maar
   alleen op de accentzin binnen de kop. */
.sprint h2 { letter-spacing: -0.01em; }
/* De accentzin staat in hoofdletters in de vette schreefloze. Op ware
   grootte weegt die zwaarder dan de serif ervoor, waardoor een kop met een
   lange accentzin leest als twee koppen. Iets kleiner zetten herstelt de
   verhouding zonder aan de tekst te raken. */
.sprint h2 .caps { font-size: 0.83em; }
/* De kop blijft staan terwijl de kolom ernaast doorloopt. Zonder dit valt
   er onder een korte kop een gat van een halve schermhoogte. */
@media (min-width: 901px) {
  .sprint .koptekst > h2 { position: sticky; top: 7.2rem; }
}
.sp-kop-mid { text-align: center; max-width: 22em; margin-left: auto; margin-right: auto; }
.sp-intro-mid { text-align: center; max-width: 40em; margin: 1.3rem auto 0; opacity: 0.88; }

/* De ruit voor een opsommingsregel stond op 0.6rem en zweefde te hoog naast
   de regel. Iets groter en iets lager valt hij samen met de eerste regel. */
.sprint .checklist li::before { font-size: 0.7rem; top: 0.24em; }

/* ---------- cijfers ----------
   Waren twee kaarten met een percentage op body-formaat. Een cijfer dat
   het argument draagt, hoort ook het beeld te dragen. */
.sp-cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.sp-cijfer { border-top: 2px solid rgba(201, 242, 4, 0.45); padding-top: 1.6rem; }
.sp-cijfer b { display: block; font-family: var(--font-heading); font-weight: 300; font-size: clamp(4rem, 9vw, 7.5rem); line-height: 0.92; color: var(--signal-green); }
.sp-cijfer p { margin-top: 0.9rem; max-width: 18em; }
.sp-bron { margin-top: 2.4rem; font-size: 0.86rem; opacity: 0.62; }

/* ---------- fotobreker ----------
   Volle breedte, één regel eroverheen. Staat op de plekken waar eerst
   drie tekstsecties op rij stonden. */
/* background-attachment: fixed schaalt het beeld op de kijkhoogte in plaats
   van op de strook, waardoor je bij elke schermhoogte een andere uitsnede
   krijgt: op 900px zag je alleen nog haar kin. Vandaar scroll met een vaste
   uitsnede, zodat de foto doet wat de uitsnede belooft. */
.sp-breker { position: relative; min-height: clamp(340px, 42vw, 520px); display: flex; align-items: center; background-size: cover; background-position: center 26%; }
.sp-breker::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 41, 38, 0.86) 0%, rgba(0, 41, 38, 0.62) 48%, rgba(0, 41, 38, 0.34) 100%); }
.sp-breker .container { position: relative; z-index: 2; }
.sp-breker p { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height: 1.24; color: var(--pure-white); max-width: 17em; }
.sp-breker p em { font-style: normal; color: var(--signal-green); }

/* ---------- media ----------
   Twee beelden met een verschillende opdracht, dus twee verschillende
   kaders. De introductie is een gesprek en staat breed. De sfeerbeelden
   zijn met een telefoon rechtop gefilmd; die staan in een rechtopstaand
   kader in plaats van uitgerekt in een breed kader. */
.sp-media { max-width: 1000px; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; }
.sp-speler { position: relative; border-radius: var(--sp-radius-groot); overflow: hidden; box-shadow: var(--sp-schaduw-diep); background: var(--core-black); }
.sp-speler video { width: 100%; height: auto; display: block; }
.sp-speler--breed video { aspect-ratio: 1280/696; object-fit: cover; }
.sp-speler--staand { border-radius: var(--sp-radius); }
.sp-speler--staand video { aspect-ratio: 9/16; object-fit: cover; }

/* Eigen afspeelknop over de poster. Verdwijnt zodra er gespeeld wordt,
   zodat de kale browserknoppen niet het eerste zijn wat je ziet. */
.sp-speler__knop {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  color: var(--pure-white);
  background: linear-gradient(180deg, rgba(0, 41, 38, 0.10) 0%, rgba(0, 41, 38, 0.58) 100%);
  transition: opacity 0.35s var(--sp-veer);
}
.sp-speler__cirkel {
  width: clamp(52px, 5.4vw, 82px); aspect-ratio: 1; border-radius: 50%;
  background: var(--signal-green); display: grid; place-items: center;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  transition: transform 0.25s var(--sp-veer);
}
.sp-speler__knop:hover .sp-speler__cirkel,
.sp-speler__knop:focus-visible .sp-speler__cirkel { transform: scale(1.06); }
.sp-speler__cirkel::before {
  content: ''; width: 0; height: 0; border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.92rem;
  border-color: transparent transparent transparent var(--moss-green);
  margin-left: 0.22rem;
}
.sp-speler__tekst { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; padding: 0 1rem; text-align: center; }
.sp-speler.speelt .sp-speler__knop { opacity: 0; pointer-events: none; }

/* De vorige Sprint: de rechtop gefilmde beelden en drie stilstaande beelden
   uit diezelfde opname, in vier even hoge tegels. Zo staat het beeldmateriaal
   van de dag zelf naast elkaar in plaats van uitgerekt in een breed kader. */
.sp-vorige__kop { max-width: 44em; margin: clamp(3.4rem, 6vw, 5rem) auto clamp(1.4rem, 3vw, 2rem); text-align: center; opacity: 0.88; }
.sp-vorige { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.sp-vorige figure { margin: 0; border-radius: var(--sp-radius); overflow: hidden; box-shadow: var(--sp-schaduw); }
.sp-vorige figure img, .sp-vorige .sp-speler video { width: 100%; aspect-ratio: 9/16; object-fit: cover; }

/* ---------- de casus en de drie stemmen ----------
   Dit blok stond eerst als vijf lagen onder elkaar: kop, tekst, een citaat van
   zestig woorden op vier centimeter hoog en gecentreerd terwijl de rest links
   staat, dan weer tekst, en onderaan drie recensies in kleine letters zonder
   kader. Het citaat brak de tekst in twee in plaats van hem te besluiten, en de
   drie stemmen zagen er het zwakst uit op de plek waar iemand net bewijs zoekt.

   Nu is het één casus en drie stemmen. De casus is een portret met een naambord
   naast een doorlopend verhaal, met het citaat als uitgelichte regel in dat
   verhaal in plaats van eroverheen. De drie stemmen zijn kaarten met evenveel
   gewicht als de rest van de pagina.

   Drie citaatvormen op deze pagina, elk met een eigen taak: de uitgelichte regel
   in de casus, de witte kaarten hier, en de mossgroene kaart bij de prijs. */
.sp-casus { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 33em); gap: clamp(2rem, 5vw, 4.4rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.sp-casus__zij { margin: 0; }
.sp-casus__zij .sp-boog { box-shadow: var(--sp-schaduw); }
.sp-casus__naam { margin-top: 1.5rem; display: grid; gap: 0.2rem; padding-left: 1.2rem; border-left: 3px solid var(--cobalt-blue); }
.sp-casus__naam b { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
.sp-casus__naam span { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.sp-casus__naam span:first-of-type { color: var(--core-black); opacity: 0.62; }
.sp-casus__naam span:last-of-type { color: var(--cobalt-blue); }
.sp-casus__tekst p { font-size: 1.05rem; }

/* De uitgelichte regel uit het gesprek. Leesbaar gezet, niet gebruld: een
   citaat van zestig woorden op koptekstgrootte is geen citaat meer maar een muur. */
.sprint .sp-citaat {
  margin: clamp(2rem, 4vw, 2.9rem) 0; padding: 0 0 0 clamp(1.5rem, 3vw, 2.2rem);
  background: none; border: 0; border-left: 3px solid var(--cobalt-blue); border-radius: 0;
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.28rem, 2.05vw, 1.72rem); line-height: 1.36;
  color: var(--cobalt-blue);
}
.sprint .sp-citaat::before { content: '“'; margin-left: -0.44em; }
.sprint .sp-citaat::after { content: '”'; }

/* Naam onder een losstaand citaat zonder foto, zelfde toon als het
   figcaption-label van .sp-stem, hergebruikt voor de reviews die op
   16 september 2026 los op de pagina bijkwamen. */
.sp-citaat-auteur {
  display: block; margin-top: clamp(0.4rem, 1vw, 0.7rem);
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.07em;
  font-weight: 700; color: var(--cobalt-blue);
}
.sp-citaat-auteur b { font-family: var(--font-body); font-weight: 800; color: var(--moss-green); }

.sp-stemmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(3.4rem, 6vw, 5rem); padding-top: clamp(2.4rem, 4vw, 3.4rem); border-top: 1px solid rgba(0, 41, 38, 0.14); }
.sp-stem { margin: 0; background: var(--pure-white); border-radius: var(--sp-radius); padding: clamp(1.6rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; gap: 1.5rem; box-shadow: 0 16px 42px -28px rgba(0, 41, 38, 0.45); }
.sprint .sp-stem blockquote {
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.45; color: var(--moss-green);
}
.sprint .sp-stem blockquote::before { content: '“'; margin-left: -0.42em; }
.sprint .sp-stem blockquote::after { content: '”'; }
.sp-stem figcaption { margin-top: auto; display: flex; align-items: center; gap: 0.85rem; }
.sp-stem figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sp-stem figcaption span { display: grid; gap: 0.12rem; font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--cobalt-blue); line-height: 1.4; text-wrap: balance; }
.sp-stem figcaption b { font-family: var(--font-body); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--moss-green); }

/* ---------- tijdlijn ----------
   Het dagverloop was een genummerde lijst waarin het uur in vet vooraan
   in de zin stond. Nu staat het uur apart, zodat je de dag kan scannen. */
.sp-tijdlijn { list-style: none; margin-top: clamp(2.2rem, 4vw, 3rem); position: relative; display: grid; gap: 0; }
.sp-tijdlijn > li { display: grid; grid-template-columns: 6.2rem 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); padding: 1.5rem 0; border-top: 1px solid rgba(0, 41, 38, 0.14); }
.sp-tijdlijn > li:last-child { border-bottom: 1px solid rgba(0, 41, 38, 0.14); }
.sp-tijdlijn .sp-uur { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.08em; font-size: 0.86rem; color: var(--cobalt-blue); padding-top: 0.35rem; }
.sp-tijdlijn h3 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.65rem); margin-bottom: 0.5rem; }
.sp-tijdlijn p { font-size: 1.02rem; }
.sp-tijdlijn li.sp-piek { background: rgba(66, 93, 251, 0.05); border-radius: var(--sp-radius); padding-left: 1.4rem; padding-right: 1.4rem; border-top-color: transparent; }
.sp-tijdlijn li.sp-piek + li { border-top-color: transparent; }
.sp-voorafje { border-left: 3px solid var(--cobalt-blue); padding-left: 1.4rem; margin-top: 1.8rem; }
.sp-voorafje strong { display: block; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--cobalt-blue); margin-bottom: 0.5rem; }

/* ---------- ja / nee ----------
   Stonden als twee identieke witte kaarten naast elkaar, waardoor ze
   even zwaar wogen terwijl de linker de belangrijkste is. */
.sp-keuze { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: start; }
.sp-keuze__kaart { border-radius: var(--sp-radius-groot); padding: clamp(2rem, 4vw, 3rem); }
.sp-keuze__kaart h3 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.18; }
.sp-keuze--ja { background: var(--moss-green); color: var(--pure-white); box-shadow: var(--sp-schaduw); }
.sp-keuze--ja h3 { color: var(--pure-white); }
.sp-keuze--ja .checklist li::before { color: var(--signal-green); content: '→'; font-size: 0.9rem; top: 0.05em; }
.sp-keuze--nee { background: transparent; border: 1px solid rgba(0, 41, 38, 0.16); }
.sp-keuze--nee .checklist li::before { color: var(--cobalt-blue); content: '→'; font-size: 0.9rem; top: 0.05em; }
.sp-keuze--nee .checklist li { opacity: 0.82; }

/* ---------- prijs ----------
   Twee kaarten die er identiek uitzagen, met het bedrag op dezelfde
   hoogte als de rest. De groepsdag is wat er nu loopt en krijgt daarom
   gewicht: een label bovenaan, een groene rand en meer schaduw. */
.sp-prijs { display: grid; grid-template-columns: 1.1fr 0.9fr; grid-template-rows: auto auto; gap: clamp(1.6rem, 3.4vw, 2.6rem); margin-top: clamp(2.6rem, 5vw, 3.6rem); align-items: start; }
.sp-prijs__kaart { position: relative; background: var(--pure-white); border-radius: var(--sp-radius-groot); padding: clamp(2rem, 4vw, 3rem); box-shadow: var(--sp-schaduw); display: flex; flex-direction: column; gap: 1rem; }
.sp-prijs__kaart--hoofd { border-top: 4px solid var(--signal-green); box-shadow: var(--sp-schaduw-diep); }

/* Tweede herontwerp, zelfde dag: letterlijk uit
   AI-HQ/outputs/_temp/prijsblok-ontwerp-letterlijk-2026-09-16.html. Links de
   witte keuzekaart, rechts de mosgroene samenvatting met de review van Eva
   direct eronder in dezelfde kolom, zodat er geen leeg vlak ontstaat. Onder
   dat alles, in volle breedte, de groepskaart. */
.sp-prijs__traject { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.6rem, 3.4vw, 2.6rem); align-items: start; grid-column: 1 / -1; }
.sp-prijs__rechts { display: flex; flex-direction: column; gap: 16px; }
.sp-prijs__groep { grid-column: 1 / -1; }
@media (max-width: 1000px) {
  .sp-prijs__traject { grid-template-columns: 1fr; grid-column: 1; }
  .sp-prijs__groep { grid-column: 1; }
}

/* De ankerzinnen boven de brugzin: klein en gedempt, geen gewicht. */
.sp-prijs__anker { font-size: 0.92rem; opacity: 0.62; margin: 0 0 0.3rem; }

/* De brugzin: één alinea in de serif-letter, geen kop met blauwe zijlijn. */
.sp-prijs__brug { font-family: var(--font-heading); font-weight: 300; font-size: 24px; line-height: 1.3; color: var(--moss-green); max-width: 46ch; margin: 24px 0 0; }
/* Overgangszin: 20px tussen de brugzin en deze zin, 32px eronder tot de
   twee kolommen, letterlijk uit het ontwerp. */
.sp-prijs__overgang { margin: 20px 0 32px; }

/* Vlakke witte kaart: haarlijn van 1px (#c8c9c4), ronde hoeken van 20px,
   nooit een schaduw. Gedeeld door de keuzekaart, de review van Eva en de
   groepskaart. */
.sp-prijs__wit {
  background: var(--pure-white); border: 1px solid #c8c9c4; border-radius: 20px;
  box-shadow: none; padding: 28px; display: flex; flex-direction: column; gap: 26px;
}
.sp-kb__intro { display: flex; flex-direction: column; gap: 8px; }
.sp-kb__intro .sp-kb__hart-tekst { margin-top: 0; font-size: 28px; }
.sp-kb__intro .sp-kb__hart-variant { margin-top: 0; }

/* De mosgroene samenvatting: enige kaart in dit blok met een schaduw,
   letterlijk uit het ontwerp. Met hetzelfde zachte lichtvlak rechtsboven
   als de andere mosgroene vlakken op de site. */
.sp-prijs__moss {
  position: relative; overflow: hidden; background: var(--moss-green); color: var(--pure-white);
  border-radius: 20px; padding: 32px; box-shadow: 0 2px 4px rgba(0, 41, 38, 0.06), 0 18px 40px rgba(0, 41, 38, 0.14);
  display: flex; flex-direction: column; gap: 10px;
}
.sp-prijs__moss::before {
  content: ''; position: absolute; top: -140px; right: -130px; width: 320px; height: 320px;
  border-radius: 50%; opacity: 0.16; pointer-events: none;
  background: radial-gradient(circle, rgba(201, 242, 4, 0.9), transparent 70%);
}
.sp-prijs__moss > * { position: relative; z-index: 1; }
/* style.css zet ".section--grey p { color: var(--core-black) }" voor de hele
   grijze sectie waar deze kaart in staat. Dat is een expliciete regel, en
   die wint altijd van de overgeërfde witte tekstkleur van de kaart zelf,
   ongeacht volgorde of specificiteit. Elke alinea in de kaart moet dus
   opnieuw op wit gezet worden. */
.sp-prijs .sp-prijs__moss p { color: var(--pure-white); }
.sp-prijs__moss .sp-kb__samenvatting-titel { color: var(--pure-white); opacity: 0.68; }
.sp-prijs__traject-regel { font-size: 17px; margin: 0; }
.sp-prijs__bedrag-groot { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.5rem); color: var(--signal-green); margin: 0; }
.sp-prijs__bedrag-klein { font-size: 15px; opacity: 0.68; margin: 0; }
.sp-prijs__moss-onder { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.18); display: flex; flex-direction: column; gap: 4px; }
.sp-prijs__extra-regel { font-size: 15px; margin: 0; }
.sp-prijs__btw { font-size: 13px; opacity: 0.62; margin: 0; }
.sp-prijs__moss .btn-row { margin-top: 10px; }
.sp-prijs__onder-knop { font-size: 13px; opacity: 0.62; margin: 0; }

/* De review van Eva: witte kaart, ronde foto boven, quote eronder. */
.sp-prijs__eva { margin: 0; }
.sp-prijs__eva-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
/* style.css zet ".section--grey blockquote { background: ...; border-left: 3px
   solid var(--cobalt-blue); }" voor elk citaat in een grijze sectie. Dat is de
   sitebrede citaatstijl (grijs kader, blauwe zijlijn); het ontwerp wil de
   quote van Eva gewoon in de kaart, zonder kader. !important zoals
   .review-spot blockquote hieronder al doet voor dezelfde reden. */
.sp-prijs__eva-quote {
  margin: 0; font-family: var(--font-heading); font-weight: 300; font-size: 21px; line-height: 1.35; color: var(--moss-green);
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
}
.sp-prijs__eva-label { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--moss-green); }

/* Groepskaart: volle breedte, met prijs en inhoud, letterlijk uit het ontwerp. */
.sp-prijs__groep-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-prijs__groep-prijs { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.sp-prijs__groep-bedrag { font-family: var(--font-heading); font-weight: 300; font-size: 44px; color: var(--moss-green); margin: 0; }
.sp-prijs__groep-excl { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 41, 38, 0.48); margin: 0; }
.sp-prijs__chip { display: inline-flex; align-items: center; flex: none; padding: 0.35rem 0.9rem; border: 1px solid var(--cobalt-blue); border-radius: 999px; color: var(--cobalt-blue); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.sp-prijs__groep-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; font-size: 15px; line-height: 1.5; opacity: 0.8; }
.sp-prijs__groep-slot { margin: 0; padding-top: 16px; border-top: 1px solid #c8c9c4; font-size: 15px; font-weight: 700; color: var(--moss-green); }
@media (max-width: 900px) {
  .sp-prijs__groep-lijst { grid-template-columns: 1fr; }
}

/* Melding bovenaan /sprint, zolang de groep van 30 september nog in posts en mails rondgaat. */
.sp-melding { background: var(--signal-green); color: var(--moss-green); padding-block: 0.8rem; font-size: 0.95rem; text-align: center; }
.sp-melding p { margin: 0; }
.sp-melding a { color: var(--moss-green); font-weight: 800; text-decoration: underline; }
.card--gesloten > * { filter: grayscale(1); opacity: 0.5; }
.card--gesloten > .card-gesloten__melding { filter: none; opacity: 1; }
.sp-prijs__soort { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.76rem; color: var(--cobalt-blue); }
.sp-prijs__bedrag { font-family: var(--font-heading); font-weight: 300; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; color: var(--moss-green); }
.sp-prijs__bedrag small { font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-left: 0.4rem; }
.sp-prijs__kaart .checklist { margin-top: 0.4rem; }
.sp-prijs__kaart .checklist li { font-size: 1rem; }
.sp-prijs__kaart .btn-row { margin-top: auto; padding-top: 1.4rem; }

/* ---------- veelgestelde vragen ----------
   Zeventien vragen achter elkaar met een haarlijn ertussen leest als
   een tabel. Ze staan nu in drie groepen met een kop, en elke rij is
   een vlak dat je kan aanklikken in plaats van een streepje tekst. */
.sp-faq { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.sp-faq__groep > h3 { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--cobalt-blue); margin-bottom: 1.2rem; }
.sp-faq details { border: 1px solid rgba(0, 41, 38, 0.12); border-radius: var(--sp-radius); padding: 0; margin-bottom: 0.7rem; background: var(--pure-white); transition: box-shadow 0.25s var(--sp-veer), border-color 0.25s var(--sp-veer); }
.sp-faq details:hover { border-color: rgba(66, 93, 251, 0.4); box-shadow: 0 10px 30px -14px rgba(0, 41, 38, 0.3); }
.sp-faq details[open] { border-color: rgba(66, 93, 251, 0.4); box-shadow: 0 14px 36px -16px rgba(0, 41, 38, 0.28); }
.sp-faq summary { padding: 1.25rem clamp(1.2rem, 2.4vw, 1.8rem); font-size: 1.02rem; }
.sp-faq summary::after { content: ''; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(66, 93, 251, 0.4); position: relative; transition: background 0.25s var(--sp-veer); background-image: linear-gradient(var(--cobalt-blue), var(--cobalt-blue)), linear-gradient(var(--cobalt-blue), var(--cobalt-blue)); background-size: 11px 1.5px, 1.5px 11px; background-position: center, center; background-repeat: no-repeat; }
.sp-faq details[open] summary::after { background-size: 11px 1.5px, 1.5px 0; background-color: rgba(66, 93, 251, 0.08); }
.sp-faq details p { padding: 0 clamp(1.2rem, 2.4vw, 1.8rem) 1.4rem; margin-top: 0; max-width: 58em; }
.sp-faq details p + p { padding-top: 0.9rem; }

/* ---------- tussenknoppen ----------
   De pagina is ruim vijfentwintigduizend pixels lang. Wie halverwege beslist
   dat ze het wil, moest daarvoor eerst helemaal naar beneden. Op zes plekken
   staat nu een knop terug naar het aanbod of naar de video, telkens op het
   moment waarop de vraag vanzelf opkomt.

   Ze zijn met opzet omlijnd en niet gevuld: de gevulde kobaltknop blijft van
   de echte actie (reserveren, een gesprek plannen), zodat een sprong naar een
   ander stuk van de pagina daar niet mee concurreert. Groen omlijnd kan alleen
   op een donkere ondergrond, blauw omlijnd alleen op een lichte; omgekeerd
   zakt het contrast onder de grens van de publicatiepoort. */
.sp-sprong { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.sp-sprong--mid { justify-content: center; }

/* De sprong landt onder de blijvende kopbalk als er geen ruimte boven staat. */
.sp-anker { scroll-margin-top: 5.5rem; }

/* ---------- slot ---------- */
.sprint .slot-foto::before { background: linear-gradient(95deg, rgba(0, 41, 38, 0.9) 0%, rgba(0, 41, 38, 0.74) 55%, rgba(0, 41, 38, 0.52) 100%); }

/* ---------- keuzeblok (SHEFORGES SPRINT VIP) ----------
   Vervangt de vaste prijs op de hoofdkaart door drie keuzes en een
   samenvatting die live meebeweegt. De kaart zelf (achtergrond, rand,
   schaduw) blijft van .sp-prijs__kaart--hoofd; hier staat alleen wat
   binnen het blok verandert.

   Herontwerp 15 september 2026: looptijd en betalen staan nu als een
   echt gesegmenteerde knop (één gevulde balk, niet losse pillen met
   tussenruimte). Wat er in elk pakket zit, staat achter een
   uitklapper: dicht bij het openen toont hij alleen de checkpointregel,
   open toont hij de rest. Dat scheelt het meeste in hoogte. */
.sp-kb__hart-tekst { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.3; margin-top: 0.5rem; }
.sp-kb__hart-variant { font-size: 0.94rem; opacity: 0.78; margin-top: 0.5rem; max-width: 30em; }

.sp-kb__veld { border: 0; padding: 0; margin: 1.4rem 0 0; }
.sp-kb__label { display: block; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--cobalt-blue); margin-bottom: 0.6rem; padding: 0; }
/* Label tone="onLight" uit het ontwerp: mosgroen in plaats van kobalt.
   Gebruikt op het label van de groepskaart. */
.sp-kb__label--moss { color: var(--moss-green); }

/* Tweede herontwerp, letterlijk uit prijsblok-ontwerp-letterlijk-2026-09-16.html:
   geen gesegmenteerde knop meer (één grijze balk), maar losse knoppen met
   elk hun eigen rand, zoals het ontwerp ze beschrijft (pb-pill: skin(on)
   geeft elke knop een eigen border en background, nooit een gedeelde balk). */
.sp-kb__opties { display: grid; gap: 10px; }
.sp-kb__opties--traject { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-kb__opties--betalen { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sp-kb__optie {
  position: relative; cursor: pointer;
  border: 1px solid #c8c9c4; background: transparent; color: var(--moss-green);
  transition: border-color 0.2s var(--sp-veer), background 0.2s var(--sp-veer), color 0.2s var(--sp-veer);
}
/* De echte input blijft aanwezig voor toetsenbord en schermlezer, maar
   staat visueel verborgen: het label eromheen draagt de vorm. */
.sp-kb__optie input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sp-kb__optie:has(input:checked) { background: var(--moss-green); border-color: var(--moss-green); color: var(--pure-white); }
.sp-kb__optie:has(input:focus-visible) { outline: 2px solid var(--cobalt-blue); outline-offset: 2px; }

/* Lengte traject: drie losse knoppen, 12px hoeken, min. 64px hoog, naam en
   duur onder elkaar. */
.sp-kb__optie--traject {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 64px; padding: 12px 16px; border-radius: 12px;
}
.sp-kb__optie-naam { font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; }
.sp-kb__optie-duur { font-family: var(--font-body); font-size: 13px; line-height: 1.2; opacity: 0.8; }

/* Hoe je betaalt: twee losse pilknoppen. */
.sp-kb__optie--betaal {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 16px; border-radius: 9999px;
  font-size: 14px; font-weight: 700;
}

/* De uitklapper "wat zit erin": dicht toont hij alleen de checkpointregel
   en de knoptekst, open toont hij de rest. Native <details>, geen
   show/hide-code in sprint-keuzeblok.js voor nodig. De browserbrede regel
   "details { border-bottom: ...; padding: 1.1rem 0; }" in style.css (voor de
   FAQ) geldt voor elk <details>-element, dus die wordt hier en bij de
   "Hoe ik reken"-uitklapper in de calculator expliciet teruggezet. */
.sp-kb__uitklap { margin-top: 0.9rem; border-top: 1px solid rgba(0, 41, 38, 0.1); border-bottom: 0; padding-top: 0.7rem; padding-bottom: 0; }
.sp-kb__uitklap summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 0.8rem;
}
.sp-kb__uitklap summary::-webkit-details-marker { display: none; }
.sp-kb__uitklap summary::after { content: none; }
.sp-kb__uitklap summary > span:first-child { font-size: 0.9rem; opacity: 0.85; }
/* "WAT ERIN ZIT +" en "HOE IK REKEN +": één label, letterlijk uit het
   ontwerp (13px, 700, hoofdletters, letterafstand .08em, kobalt). Het
   plusteken staat al in de tekst (COPY), geen apart teken via CSS. */
.sp-kb__uitklap-toggle { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cobalt-blue); white-space: nowrap; }

.sp-kb__inhoud { margin-top: 0.8rem; display: grid; gap: 0.35rem; }
.sp-kb__inhoud p { font-size: 0.9rem; opacity: 0.82; margin: 0; }
/* inhoud_vast is een lijst van vijf punten, geen doorlopende zin meer. */
.sp-kb__vast { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.sp-kb__vast li { font-size: 0.9rem; opacity: 0.82; padding-left: 1.1rem; position: relative; }
.sp-kb__vast li::before { content: '\2192'; position: absolute; left: 0; color: var(--cobalt-blue); font-size: 0.85rem; }
.sp-kb__uitleg { font-size: 0.9rem; opacity: 0.82; margin: 0.7rem 0 0; }

/* Extra implementatiedagen: de teller en de korte uitleg op één rij. */
.sp-kb__veld--dagen { margin-top: 1.3rem; }
.sp-kb__stepper-rij { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sp-kb__uitleg--dagen { font-size: 0.82rem; opacity: 0.72; margin: 0; max-width: 22em; }
.sp-kb__stepper { display: inline-flex; align-items: center; gap: 0.8rem; flex: 0 0 auto; }
/* Rand en teken in kobalt, letterlijk uit het ontwerp. */
.sp-kb__stap {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--cobalt-blue);
  background: transparent; font-size: 1.15rem; font-weight: 800; line-height: 1; cursor: pointer;
  color: var(--cobalt-blue); transition: border-color 0.2s var(--sp-veer), opacity 0.2s var(--sp-veer);
}
.sp-kb__stap:hover:not(:disabled), .sp-kb__stap:focus-visible { border-color: var(--cobalt-blue); }
.sp-kb__stap:disabled { opacity: 0.35; cursor: not-allowed; }
.sp-kb__stap-getal { font-family: var(--font-heading); font-weight: 300; font-size: 1.4rem; min-width: 1.3rem; text-align: center; }
.sp-kb__melding { font-size: 0.84rem; opacity: 0.72; margin: 0.5rem 0 0; min-height: 1.2em; }

/* De samenvatting is het zwaartepunt van het blok: een groene bovenrand
   en een iets groter bedrag dan voorheen. */
.sp-kb__samenvatting {
  margin-top: 1.6rem; padding: 1.2rem 1.4rem; border-radius: var(--sp-radius);
  border-top: 3px solid var(--signal-green);
  background: rgba(0, 41, 38, 0.04); display: grid; gap: 0.2rem;
}
.sp-kb__samenvatting-titel { display: block; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--cobalt-blue); }
.sp-kb__bedrag-groot { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 3rem); color: var(--moss-green); margin-top: 0.2rem; }
.sp-kb__bedrag-klein { font-size: 0.86rem; opacity: 0.75; margin: 0; }
.sp-kb__extra-regel { font-size: 0.86rem; opacity: 0.82; margin: 0.4rem 0 0; }
.sp-kb__btw { font-size: 0.78rem; opacity: 0.6; margin: 0.5rem 0 0; }

.sp-kb .btn-row { margin-top: 1.2rem; }
.sp-kb__onder { font-size: 0.82rem; opacity: 0.65; margin: 0.5rem 0 0; }

@media (max-width: 480px) {
  .sp-kb__opties { gap: 8px; }
  .sp-kb__optie--traject { padding: 10px 8px; }
  .sp-kb__optie--betaal { padding: 10px 8px; font-size: 13px; }
}

/* Tekst voor een schermlezer, niet voor het oog. Gebruikt op de labels die
   op de pagina zelf al als een kop of een uitleg zichtbaar staan, maar die
   elk veld toch een eigen, echt label nodig heeft. */
.sp-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- terugverdiencalculator ----------
   Herontwerp 16 september 2026, uit het Claude Design-ontwerp. Was een
   raster van aanklikbare taken met elk een eigen urenveld. Nu twee
   schuifbalken (wat een uur waard is, hoeveel uur er per maand naar dit
   soort taken gaat) in een witte kaart links, de uitkomst in een
   mosgroene kaart rechts. De takenlijst blijft, maar nu puur informatief
   in een uitklapper erboven: "Welke taken kan je meetellen". */
.sp-calc__label {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem; color: var(--cobalt-blue);
  margin: 0 0 0.6rem; display: block;
}
.sp-calc__fout { font-size: 0.78rem; color: var(--cobalt-blue); margin: 0.3rem 0 0; }

/* De uitklapper "Welke taken kan je meetellen": een pilknop met een rand
   in kobaltblauw en een plusteken, geen doorlopende lijn zoals de andere
   uitklappers op de pagina. De browserbrede regel "details { border-bottom:
   ...; padding: 1.1rem 0 }" in style.css (voor de FAQ) geldt voor elk
   <details>-element en werd hier niet teruggezet, waardoor er toch een lijn
   onder de knop stond; nu expliciet op 0. */
.sp-calc3__taken-uitklap { max-width: 1080px; margin: clamp(1.6rem, 4vw, 2.4rem) auto 0; border-bottom: 0; padding: 0; }
.sp-calc3__taken-toggle {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid var(--cobalt-blue); border-radius: 999px; color: var(--cobalt-blue);
  font-family: var(--font-body); font-weight: 700; font-size: 0.88rem;
  padding: 0.6rem 1.2rem; transition: background 0.2s var(--sp-veer);
}
.sp-calc3__taken-toggle::-webkit-details-marker { display: none; }
.sp-calc3__taken-toggle::after { content: '+'; font-size: 1.1rem; line-height: 1; }
.sp-calc3__taken-uitklap[open] .sp-calc3__taken-toggle::after { content: '\2212'; }
.sp-calc3__taken-toggle:hover { background: rgba(66, 93, 251, 0.06); }

.sp-calc3__taken-kolommen {
  margin-top: 1.2rem; padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--pure-white); border-radius: 20px; border: 1px solid #c8c9c4; box-shadow: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem);
}
.sp-calc3__taken-kop {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.7rem; color: var(--cobalt-blue); margin: 0 0 0.8rem;
}
.sp-calc3__taken-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.sp-calc3__taken-lijst li { font-size: 0.86rem; opacity: 0.82; }
/* De naam loopt door in dezelfde zin (met de dubbele punt uit het ontwerp),
   geen apart blok meer op een eigen regel. */
.sp-calc3__taken-lijst strong { font-weight: 700; color: var(--moss-green); opacity: 1; }
.sp-calc3__taken-notitie {
  margin: 1rem 0 0; padding: 0.8rem 0.9rem; border-radius: var(--sp-radius);
  background: rgba(66, 93, 251, 0.06); font-size: 0.78rem; opacity: 0.85;
}

.sp-calc3 {
  max-width: 1080px; margin: 24px auto 0;
}
.sp-calc3__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.4rem); align-items: stretch; }

.sp-calc3__invoer {
  background: var(--pure-white); border-radius: 20px; border: 1px solid #c8c9c4;
  padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: none;
  display: flex; flex-direction: column; gap: 1.6rem;
}

/* Elk schuifveld: label, dan het grote cijfer met de pilvormige invoer
   ernaast, dan de schuifbalk eronder. */
.sp-calc3__veld { display: block; }
.sp-calc3__veld-lezer { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.sp-calc3__cijfer-groot {
  font-family: var(--font-heading); font-weight: 300; font-size: clamp(2rem, 4.4vw, 2.9rem);
  color: var(--core-black);
}
.sp-calc3__pil {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid rgba(0, 41, 38, 0.16); border-radius: 999px;
  padding: 0.4rem 0.9rem; background: var(--pure-white);
}
.sp-calc3__pil input {
  width: 4.4rem; border: 0; background: none; font-family: var(--font-body);
  font-size: 0.92rem; color: var(--core-black); text-align: right; padding: 0;
}
.sp-calc3__pil input:focus-visible { outline: 2px solid var(--cobalt-blue); outline-offset: 2px; border-radius: 4px; }
.sp-calc3__pil-eenheid { font-size: 0.74rem; opacity: 0.6; white-space: nowrap; }
.sp-calc3__veld input[type="range"] {
  width: 100%; margin-top: 0.8rem; accent-color: var(--moss-green); height: 1.6rem; cursor: pointer;
}
.sp-calc3__veld input[type="range"]:focus-visible { outline: 2px solid var(--cobalt-blue); outline-offset: 2px; }

/* De uitklapper "Hoe ik reken" hergebruikt .sp-kb__uitklap, maar staat
   onderaan de witte kaart in plaats van binnenin een fieldset. */
.sp-calc3__reken-uitklap { margin-top: auto; }

/* De mosgroene uitkomstkaart: vlak, geen schaduw, met het lichtvlak
   rechtsboven zoals de rest van de mosgroene vlakken op de site. */
.sp-calc3__resultaat {
  position: relative; overflow: hidden; background: var(--moss-green); color: var(--pure-white);
  border-radius: 20px; box-shadow: none; padding: clamp(1.6rem, 4vw, 2.6rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem;
}
.sp-calc3__resultaat::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 82% 6%, rgba(201, 242, 4, 0.16), transparent 60%);
}
.sp-calc3__resultaat > * { position: relative; z-index: 1; }
.sp-calc3__uitkomst { display: grid; gap: 0.9rem; }
.sp-calc3__blok { margin: 0; }
.sp-calc3__uitkomst .sp-calc3__blok + .sp-calc3__blok { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 0.9rem; }
.sp-calc3__leeg-kop { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.3; margin: 0; }
.sp-calc3__leeg-hint { font-size: 0.86rem; opacity: 0.75; margin: 0.6rem 0 0; }
.sp-calc3__label {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.68rem; color: var(--signal-green); margin: 0;
}
.sp-calc3__uitkomst-mid { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0.2rem 0 0; color: var(--pure-white); }
.sp-calc3__uitkomst-groot { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem); margin: 0.2rem 0 0; color: var(--pure-white); }
.sp-calc3__uitkomst-accent { color: var(--signal-green); }
.sp-calc3__sub { font-size: 0.86rem; opacity: 0.82; margin: 0.3rem 0 0; }
.sp-calc3__prompt { font-size: 0.86rem; opacity: 0.75; margin: 0.6rem 0 0; }

@media (max-width: 900px) {
  .sp-calc3__layout { grid-template-columns: 1fr; }
  .sp-calc3__taken-kolommen { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .sp-calc3__taken-kolommen { grid-template-columns: 1fr; }
}

/* ---------- responsief ---------- */
@media (max-width: 1000px) {
  .sp-vorige { grid-template-columns: repeat(2, 1fr); }
  .sp-prijs, .sp-keuze { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  .sp-casus__zij { position: sticky; top: 7.2rem; }
}
@media (max-width: 900px) {
  .sp-casus { grid-template-columns: 1fr; }
  .sp-casus__zij { max-width: 380px; }
  .sp-hero__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  /* De foto stond hier eerst boven de tekst (order: -1). Op een telefoon
     landde je daardoor op een portret zonder te weten waar de pagina over
     gaat: de kop, de belofte en de knop kwamen pas na een halve schermhoogte
     beeld. Nu leest de hero op een telefoon in de volgorde waarin je hem ook
     zou vertellen: waarover het gaat, wat het je oplevert, de knop, en dan
     pas het beeld erbij. */
  .sp-hero__foto { max-width: 330px; margin-left: 0; margin-top: 0.6rem; }
  .sp-hero__geo { width: 290px; right: -118px; top: -104px; opacity: 0.32; }
  .sp-cijfers { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (max-width: 620px) {
  .sp-vorige { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .sp-tijdlijn > li { grid-template-columns: 1fr; gap: 0.4rem; }
  .sp-tijdlijn .sp-uur { padding-top: 0; }
  .sp-feiten { gap: 1.1rem 1.4rem; }
}

/* ============================================================
   TWEEDE HERONTWERP: sectienavigatie, voortgangsbalk en de
   nieuwe herbruikbare stukjes (16 september 2026)
   ------------------------------------------------------------
   Uit het tweede Claude Design-ontwerp voor /sprint. Het eerste
   herontwerp (prijsblok, calculator, hierboven) liet deze laag nog
   liggen: een voortgangsbalk, een sectienavigatie die meescrolt,
   citaten met een portret erbij, de staafjes bij de cijfers, de
   tegel-hover en de ja/nee-schakelaar bij "voor wie".
   ============================================================ */

/* voortgangsbalk */
.sp2-voortgang { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--signal-green); z-index: 120; transition: width .12s linear; }

/* zes stemmen in twee rijen van drie */
.sprint .sp-stemmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .sprint .sp-stemmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sprint .sp-stemmen { grid-template-columns: 1fr; } }

/* het open-teken van de FAQ: alleen de cirkel, niet ook het streepje uit style.css */
.sprint .sp-faq details[open] summary::after { content: ''; }

/* citaat met portret */
.sp2-met-portret { display: flex; gap: 1.1rem; align-items: flex-start; margin: clamp(2rem,4vw,2.9rem) 0; }
.sp2-met-portret img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; margin-top: .5rem; }
.sprint .sp2-met-portret .sp-citaat { margin: 0; }
@media (max-width: 520px) { .sp2-met-portret img { width: 48px; height: 48px; } }

/* de ankerbalk is op deze pagina de enige blijvende balk; de sitekop schuift mee weg */
.sprint .site-header { position: static; }
.sprint .sp-anker { scroll-margin-top: 7.5rem; }
.sprint .sp-label { white-space: nowrap; }

/* sectienavigatie */
.sp2-nav { position: sticky; top: 0; z-index: 60; background: #18252d; border-bottom: 1px solid rgba(201,242,4,.18); }
.sp2-nav__rij { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .7rem clamp(1.2rem,4vw,2.5rem); max-width: 1260px; margin: 0 auto; }
.sp2-nav a { flex: 0 0 auto; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; color: rgba(255,255,255,.7); text-decoration: none; padding: .45rem .85rem; border-radius: 999px; border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.sp2-nav a:hover { color: var(--signal-green); border-color: rgba(201,242,4,.45); }
.sp2-nav a.sp2-actief { color: var(--moss-green); background: var(--signal-green); border-color: var(--signal-green); }
.sp2-nav__cta { margin-left: auto; }
.sp2-nav a.sp2-nav__cta { color: var(--signal-green); border-color: rgba(201,242,4,.5); }
.sp2-nav a.sp2-nav__cta:hover { background: rgba(201,242,4,.12); }

/* staafdiagram bij de cijfers */
.sp2-staaf { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 1.1rem; }
.sp2-staaf i { display: block; height: 100%; border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.22,.61,.36,1) .18s; }
.reveal.is-in .sp2-staaf i, .is-in .sp2-staaf i { transform: scaleX(1); }

/* compacte lijsten in het systeemblok */
.sp2-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sp2-lijst li { position: relative; padding-left: 1.1rem; font-size: .93rem; line-height: 1.45; }
.sp2-lijst li::before { content: '\2192'; position: absolute; left: 0; top: 0; color: var(--cobalt-blue); font-size: .82rem; }
.sp2-lijst--groen li::before { color: var(--signal-green); }

/* aanklikbare kaart-hover, o.a. Bezitten/Beheersen en de bezwarentegels */
.sp2-tegel { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), border-color .3s; }
.sp2-tegel:hover { transform: translateY(-4px); }

/* schakelaar "is dit voor jou" */
.sp2-schakel { flex: 1 1 220px; display: flex; flex-direction: column; gap: .25rem; text-align: left; cursor: pointer; padding: 1rem 1.3rem; border-radius: 16px; border: 1px solid rgba(0,41,38,.18); background: #fff; color: var(--moss-green); font-family: var(--font-body); transition: background .25s, color .25s, border-color .25s; }
.sp2-schakel b { font-family: var(--font-heading); font-weight: 300; font-size: 1.25rem; line-height: 1.2; }
.sp2-schakel span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.sp2-schakel:hover { border-color: var(--cobalt-blue); }
.sp2-schakel[data-actief="true"] { background: var(--moss-green); border-color: var(--moss-green); color: #fff; }
.sp2-schakel[data-actief="true"] span { opacity: 1; color: var(--signal-green); }

@media (max-width: 760px) {
  .sp2-nav__rij { gap: .35rem; padding: .55rem clamp(1.2rem,4vw,2.5rem); }
  .sp2-nav a { font-size: .62rem; padding: .4rem .7rem; letter-spacing: .1em; }
  .sp2-nav__cta { margin-left: 0; }
}