/* Jogi Coachingwebsites: dezelfde opbouw als de andere doelgroep-sites, naar Melissa's acht coachontwerpen (18 okt):
   rustig en licht, warm wit en zand met diep bosgroen, Baskervville met een schuin accentwoord ("missie voelbaar") + Onest,
   ronde knoppen, dunne lijniconen, de foto's in een boog (zoals een yogastudio), groene rondjes in de werkwijze en een groene slotband.
   Bewust anders dan de clubsite (donker met grasgroen). */
@font-face { font-family: "Baskervville"; src: url("/fonts/baskervville.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("/fonts/baskervville-cursief.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/onest.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --kop-letter: "Baskervville", Georgia, serif;
  --kop-gewicht: 500;
  --tekst-letter: "Onest", system-ui, sans-serif;
  --achtergrond: #faf7f1;
  --kop-achtergrond: rgba(250, 247, 241, .96);
  --kaart: #fff;
  --zand: #f2ebdf;
  --vlak: #efe7da;
  --inkt: #1c2a23;
  --zacht: #5a645e;
  --accent-groot: #24463a;
  --accent-tekst: #3d6b55;
  --accent-op-donker: #b4cfbd;
  --klei: #b98a5a;
  --knop: #24463a;
  --knop-hover: #31594a;
  --knop-tekst: #fff;
  --donker: #1d3a2f;
  --op-donker: #c8d5cc;
  --lijn: #e7dfd1;
  --lijn-sterk: #d5c9b6;
  --rond: 999px;
  --rond-groot: 18px;
}

body { font-size: 1.04rem; }
h1, h2, h3 { letter-spacing: -.01em; }
h1 em, h2 em { color: var(--accent-tekst); font-weight: 400; }
.label { letter-spacing: .16em; font-weight: 600; font-size: .76rem; color: var(--accent-tekst); }
.knop { text-transform: none; letter-spacing: .01em; font-size: .95rem; font-weight: 600; padding: .8rem 1.6rem; }
.knop-klein { font-size: .85rem; padding: .5rem 1.2rem; }
.knop-lijn { background: transparent; border-color: var(--lijn-sterk); }
.knop-lijn:hover { background: var(--accent-groot); border-color: var(--accent-groot); color: #fff; }
.vinkjes .ico { color: var(--accent-groot); }

/* Kop: licht, logo donker */
.kop .merk-naam { font-size: 1.32rem; font-weight: 500; }
.menu a:not(.knop) { text-transform: none; letter-spacing: .01em; font-size: .92rem; font-weight: 500; }
@media (max-width: 380px) { .kop .merk-naam { font-size: 1.1rem; } }

/* Opening: tekst links op warm wit, rechts de foto's in een boog (diashow) met laptop en telefoon met een echte coachsite ervoor */
.opening-coach { min-height: 0; background: radial-gradient(ellipse 60% 80% at 85% 40%, var(--zand) 0%, rgba(242, 235, 223, 0) 70%), var(--achtergrond); }
.opening-coach::before { display: none; }
.opening-coach .opening-binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 3rem; align-items: center; padding-top: 4rem; padding-bottom: 4.5rem; }
.opening-coach h1 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); line-height: 1.08; margin-bottom: .5em; }
.opening-coach h1 em { white-space: nowrap; }
.opening-coach .intro { color: var(--zacht); font-size: 1.1rem; max-width: 33rem; }
.opening-prijs { display: block; margin-top: .55rem; font-weight: 600; color: var(--inkt); }
.opening-punten { list-style: none; margin: 1.6rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .9rem; color: var(--zacht); }
.opening-punten li { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.opening-punten .ico { width: 1.2em; height: 1.2em; color: var(--accent-groot); stroke-width: 1.4; }
.opening-beeld { position: relative; padding: 0 0 2.5rem 9%; }
.boog { position: relative; isolation: isolate; overflow: hidden; width: 78%; margin-left: auto; aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; background: var(--vlak); box-shadow: 0 40px 70px -50px rgba(29, 58, 47, .55); }
.boog .opening-dias { z-index: 0; }
.boog .opening-foto { object-position: var(--plek, 50% 50%); }
.opening-apparaten { position: absolute; left: 0; bottom: 0; width: 74%; padding: 0 10% 8% 0; }
.opening-apparaten .laptop-scherm { box-shadow: 0 40px 70px -35px rgba(20, 35, 28, .6); }
@media (max-width: 1000px) {
  .opening-coach .opening-binnen { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3rem; }
  .opening-beeld { max-width: 34rem; width: 100%; margin: 0 auto; }
}
/* Telefoon: de boog met de foto's boven de tekst, laptop en telefoon er half overheen; tekst donker op licht */
@media (max-width: 700px) {
  .opening-coach { min-height: 0; align-items: stretch; }
  .opening-coach .opening-binnen { padding: 1.4rem 16px 2.6rem; gap: 1.6rem; }
  .opening-coach .opening-beeld { order: -1; max-width: 26rem; padding: 0 0 1.6rem 4%; }
  .opening-coach .boog { width: 74%; aspect-ratio: 5 / 5.6; }
  .opening-coach .opening-apparaten { width: 78%; }
    .opening-coach h1 { font-size: clamp(2.05rem, 8.6vw, 2.6rem); color: var(--inkt); }
  .opening-coach .label { color: var(--accent-tekst); font-size: .7rem; }
  .opening-coach h1 em { color: var(--accent-tekst); }
  .opening-coach .intro { color: var(--zacht); font-size: 1rem; }
  .opening-coach .belofte { color: var(--zacht); }
  .opening-coach .belofte .ico { color: var(--accent-tekst); }
  .opening-coach .knoppen { gap: .55rem; }
  .opening-coach .knop { flex: 1 1 100%; min-height: 2.8rem; font-size: .9rem; }
  .opening-coach .knop-vol { background: var(--knop); color: #fff; }
  .opening-coach .knop-vol:hover { background: var(--knop-hover); color: #fff; }
  .opening-coach .knop-lijn { color: var(--inkt); border-color: var(--lijn-sterk); }
  .opening-coach .knop-lijn:hover { background: var(--accent-groot); color: #fff; }
  .opening-punten { font-size: .84rem; gap: .45rem 1.1rem; margin-top: 1.1rem; padding-top: 1.1rem; }
}

/* Kenmerken: zandkleurige band met dunne groene lijniconen */
.kenmerken { padding: 2.2rem 0; background: var(--zand); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.kenmerken ul { list-style: none; max-width: 76rem; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); }
.kenmerken li { display: flex; gap: .9rem; align-items: flex-start; padding: .2rem 1.4rem; }
.kenmerken li + li { border-left: 1px solid var(--lijn-sterk); }
.kenmerken .ico { width: 2rem; height: 2rem; stroke-width: 1.2; color: var(--accent-groot); transition: transform .35s; }
.kenmerken strong { display: block; font-size: .96rem; font-weight: 600; margin-bottom: .1rem; }
.kenmerken span { font-size: .88rem; color: var(--zacht); line-height: 1.5; }
@media (max-width: 1100px) { .kenmerken ul { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; } .kenmerken li:nth-child(3) { border-left: 0; } }
@media (max-width: 520px) { .kenmerken ul { grid-template-columns: 1fr; } .kenmerken li { border-left: 0 !important; padding: 0; } }

/* Websites voor: elk een eigen hokje, met een rond zandkleurig icoon */
.speciaal h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.vakken { list-style: none; max-width: 76rem; margin: 2.8rem auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.vak { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-groot); padding: 1.8rem 1.3rem 1.6rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; transition: transform .3s, box-shadow .3s, border-color .3s; }
.vak-icoon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--zand); color: var(--accent-groot); margin-bottom: .5rem; transition: background-color .3s, color .3s; }
.vak-icoon .ico { width: 1.7rem; height: 1.7rem; stroke-width: 1.3; }
.vak strong { display: block; font: 500 1.28rem/1.2 var(--kop-letter); margin-bottom: .35rem; }
.vak > div > span { display: block; font-size: .9rem; line-height: 1.55; color: var(--zacht); text-wrap: pretty; }
@media (max-width: 1000px) { .vakken { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .vakken { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .vak { padding: 1.2rem .7rem; gap: .35rem; }
  .vak-icoon { width: 3rem; height: 3rem; margin-bottom: .3rem; }
  .vak strong { font-size: 1.08rem; }
  .vak > div > span { font-size: .82rem; }
}

/* Wat erin zit: laptop links, lijst rechts, op wit */
.wat { background: var(--kaart); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
@media (min-width: 901px) { .wat-binnen { grid-template-columns: 1.15fr 1fr; } .wat .apparaten { order: -1; } }
.wat .vinkjes .ico { background: var(--zand); color: var(--accent-groot); border-radius: 50%; padding: .22rem; width: 1.4em; height: 1.4em; stroke-width: 2.2; margin-top: .05rem; }

/* Probeer het zelf: het levenswiel van demo Zeegroen Coaching (112) als coachingswerkblad: één vel papier op het bosgroen,
   het wiel in zachte aquarelvlekken, schuifjes als potloodlijnen, de uitkomst als notitie onderaan het vel.
   Het enige opvallende blok van de pagina (frontend-design, 18 okt); de rest is bewust stil. */
.levenswiel { background: var(--donker); color: #fff; overflow-x: clip; }
.levenswiel .smal .label { color: var(--accent-op-donker); }
.levenswiel .smal h2 { color: #fff; }
.levenswiel .smal h2 em { color: var(--accent-op-donker); }
.levenswiel .smal > p:not(.label) { color: var(--op-donker); }
.werkblad { --papier: #fdfaf2; --potlood: #8d877b; --potlood-licht: #d9d2c4; position: relative; width: calc(100% - 32px); max-width: 64rem; margin: 3rem auto 0; padding: clamp(1.4rem, 3.5vw, 2.8rem) clamp(1.2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.4rem); color: var(--inkt);
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 40%), var(--papier); border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 2px 3px rgba(10, 25, 18, .25), 0 40px 70px -30px rgba(5, 15, 10, .75); }
@media (min-width: 761px) { .werkblad, .werkblad.in { transform: rotate(-.5deg); } }
.werkblad-kop { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 1.2rem; padding-bottom: .9rem; border-bottom: 1.5px solid var(--potlood-licht); }
.werkblad-kop > span:first-child { font: italic 500 clamp(1.5rem, 2.6vw, 1.9rem)/1.1 var(--kop-letter); color: var(--accent-groot); }
.werkblad-wie { font-size: .82rem; color: var(--zacht); }
.werkblad-binnen { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; }
.schuiven { display: flex; flex-direction: column; gap: 1.05rem; }
.schuif { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 1rem; }
.schuif label { font-weight: 500; font-size: .95rem; }
.schuif output { font: italic 500 1.55rem/1 var(--kop-letter); color: var(--accent-groot); min-width: 2ch; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.schuif input { grid-column: 1 / -1; }
/* Schuifjes als potloodlijn: dunne grijze lijn, het ingevulde deel bosgroen, een rond knopje */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; --vul: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-groot) 0 var(--vul), var(--potlood-licht) var(--vul) 100%); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--potlood-licht); }
input[type="range"]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--accent-groot); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; border-radius: 50%; background: var(--papier); border: 2px solid var(--accent-groot); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--papier); border: 2px solid var(--accent-groot); }
input[type="range"]:focus-visible { outline: 2px solid var(--klei); outline-offset: 4px; border-radius: 4px; }
.hulp { margin: .2rem 0 0; font-size: .84rem; color: var(--zacht); }
.wiel-terug { align-self: flex-start; font: 500 .88rem var(--tekst-letter); color: var(--zacht); background: none; border: 0; border-bottom: 1px solid currentColor; padding: .1rem 0; cursor: pointer; }
.wiel-terug:hover { color: var(--accent-groot); }
.wiel-vak { margin: 0; }
.wiel { display: block; width: 100%; height: auto; overflow: visible; }
.wiel-ringen circle { fill: none; stroke: var(--potlood-licht); stroke-width: 1; stroke-dasharray: 2 3; }
.wiel-ringen circle:first-child { stroke: var(--potlood); stroke-dasharray: none; stroke-width: 1.2; }
#wiel-taarten { opacity: .82; mix-blend-mode: multiply; }
.taart { transform-box: view-box; transform-origin: 190px 170px; transition: transform .9s cubic-bezier(.3, 1.2, .5, 1); }
.taart.focus { opacity: 1; }
.wiel-spaken line { stroke: var(--papier); stroke-width: 3; }
.wiel-namen text { font: italic 500 16px var(--kop-letter); fill: var(--inkt); }
.wiel-namen text.focus { fill: #8a5a2b; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* De uitkomst: onderaan hetzelfde vel, gescheiden door een potloodlijn */
.wiel-uitkomst { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.2rem clamp(1.4rem, 4vw, 3.5rem); margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1.5px dashed var(--potlood-licht); }
.advies-label { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .3rem; font-size: .84rem; font-weight: 500; color: var(--zacht); }
.advies-gem { white-space: nowrap; }
.advies-gem b { color: var(--inkt); font-weight: 600; }
.advies-focus { font: italic 500 clamp(1.9rem, 3.2vw, 2.4rem)/1.1 var(--kop-letter); color: var(--accent-groot); margin: 0 0 .5rem; }
.advies-tekst { font-size: .95rem; margin: 0; }
.advies-regel { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .15rem; font-weight: 600; }
.advies-regel .puntjes { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--potlood-licht); transform: translateY(-.25em); }
.advies-regel b { white-space: nowrap; font: 500 1.8rem/1 var(--kop-letter); font-variant-numeric: lining-nums tabular-nums; }
.advies-klein { margin: 0 0 .8rem; font-size: .86rem; color: var(--zacht); }
.uit-klein { font-size: .8rem; color: var(--zacht); margin: 0; }
@keyframes inkt { 0% { opacity: .35; } 100% { opacity: 1; } }
.wiel-uitkomst.nieuw .advies-focus, .wiel-uitkomst.nieuw .advies-regel b { animation: inkt .6s ease; }
.wiel-voet { max-width: 76rem; margin: 1.8rem auto 0; padding: 0 16px; font-size: .9rem; color: var(--op-donker); text-align: center; }
.wiel-voet a { color: #fff; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .werkblad-binnen, .wiel-uitkomst { grid-template-columns: 1fr; }
  .wiel-vak { max-width: 360px; width: 100%; margin-inline: auto; order: -1; }
}

/* Er kan nog veel meer: zes stille regels op het bosgroen, met een link naar het onderdeel in een demo */
.kan-ook-blok { max-width: 64rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: 0 16px; }
.kan-kop { font: 500 1.6rem/1.2 var(--kop-letter); margin: 0; color: #fff; }
.kan-ook { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.4rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.kan-ook li { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.kan-ook a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; height: 100%; padding: 1rem .2rem; color: #fff; text-decoration: none; }
.kan-ook .ico { width: 1.6rem; height: 1.6rem; stroke-width: 1.3; color: var(--accent-op-donker); }
.kan-ook strong { display: block; font-size: .95rem; font-weight: 600; white-space: nowrap; }
.kan-ook small { display: block; font-size: .84rem; color: var(--op-donker); line-height: 1.4; margin-top: .1rem; }
.kan-ook .kan-pijl { width: 1rem; height: 1rem; transition: transform .25s; }
.kan-ook a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.kan-ook a:hover .kan-pijl { transform: translateX(3px); }
@media (max-width: 760px) { .kan-ook { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .kan-ook a { grid-template-columns: auto 1fr; gap: .75rem; } .kan-ook .kan-pijl { display: none; } .kan-ook strong { font-size: .9rem; } }

/* Werkwijze: groene rondjes met een dunne lijn ertussen */
.werkwijze { background: var(--achtergrond); }
.stappen li::before { background: var(--accent-groot); border-color: var(--accent-groot); color: #fff; font: 500 1.35rem/1 var(--kop-letter); }
.stappen li:hover::before { background: var(--accent-groot); border-color: var(--accent-groot); color: #fff; }
.stappen h3 { font-size: 1.3rem; }
.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); height: 1px; background: var(--lijn-sterk); }
}

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

/* Voorbeeldsites: kaarten met een lange schermafbeelding die bij aanwijzen of aanraken rustig naar beneden scrolt */
.voorbeelden { background: var(--kaart); border-top: 1px solid var(--lijn); }
.voorbeelden .kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-groot); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.voorbeelden .kaart:hover { border-color: var(--lijn-sterk); }
.voorbeelden .kaart-beeld { background: none; padding: 0; border-radius: 0; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--lijn); }
.voorbeelden .kaart-voet { display: none; }
.voorbeelden .kaart-tekst { padding: 1rem 1.2rem 1.15rem; align-items: center; }
.voorbeelden .kaart-tekst strong { font-size: 1.3rem; }
.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; }
/* Zeven kaarten: drie groot bovenaan, vier kleiner eronder */
@media (min-width: 1001px) {
  .kaarten-zeven { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.4rem; }
  .kaarten-zeven .kaart { grid-column: span 4; }
  .kaarten-zeven .kaart:nth-child(n+4) { grid-column: span 3; }
  .kaarten-zeven .kaart:nth-child(n+4) .kaart-tekst { padding-inline: 1rem; gap: .5rem; }
  .kaarten-zeven .kaart:nth-child(n+4) .kaart-tekst strong { font-size: 1.05rem; }
}
/* Tussen 1001 en 1279 px zijn vier kaarten naast elkaar te smal voor "Pasmaat Hardloopcoaching": dan twee per rij. */
@media (min-width: 1001px) and (max-width: 1279px) {
  .kaarten-zeven .kaart:nth-child(n+4) { grid-column: span 6; }
}
@media (min-width: 601px) and (max-width: 1000px) { .kaarten-zeven .kaart:first-child { grid-column: 1 / -1; } .kaarten-zeven .kaart:first-child .kaart-beeld { aspect-ratio: 16 / 8; } }
.onder-kaarten .knop-lijn { color: var(--inkt); }

/* Prijzen */
.prijzen { background: var(--achtergrond); }
.prijskaart { border: 1px solid var(--lijn); box-shadow: 0 30px 60px -45px rgba(29, 58, 47, .4); }
.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(--zand); }

/* Over mij: diep groen, foto links (zoals in de ontwerpen) */
.over-mij { background: var(--donker); color: #fff; }
.over-mij h2 { color: #fff; }
.over-mij h2 em { color: var(--accent-op-donker); }
.over-mij .label { color: var(--accent-op-donker); }
.over-mij-tekst > p:not(.label) { color: var(--op-donker); }
.over-mij-foto img { border-radius: 999px 999px var(--rond-groot) var(--rond-groot); }
@media (max-width: 760px) { .over-mij-foto img { border-radius: 160px 160px var(--rond-groot) var(--rond-groot); } }

.vragen { background: var(--achtergrond); }
.vragenlijst summary { font-size: 1.3rem; }

/* Slot: groene band, tekst links, de zee-foto in een boog rechts */
.slot-coach { position: relative; overflow: hidden; background: var(--donker); color: #fff; padding: clamp(3.6rem, 7vw, 5.5rem) 0; }
.slot-coach::before { content: ""; position: absolute; left: -6rem; bottom: -7rem; width: 22rem; height: 22rem; border-radius: 50%; border: 1px solid rgba(180, 207, 189, .18); box-shadow: 0 0 0 2.5rem rgba(180, 207, 189, .04), 0 0 0 5rem rgba(180, 207, 189, .03); }
.slot-coach .slot-binnen { position: relative; max-width: 76rem; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 3rem; align-items: center; }
.slot-coach .label { color: var(--accent-op-donker); }
.slot-coach h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.9rem); max-width: 16ch; }
.slot-coach h2 em { color: var(--accent-op-donker); }
.slot-coach p { color: var(--op-donker); }
.slot-coach .knoppen { margin: 1.5rem 0 .2rem; }
.slot-coach .knop-vol { background: #fff; color: var(--donker); }
.slot-coach .knop-vol:hover { background: var(--zand); color: var(--donker); }
.slot-coach .knop-lijn { color: #fff; border-color: rgba(255, 255, 255, .5); }
.slot-coach .knop-lijn:hover { background: #fff; color: var(--donker); border-color: #fff; }
.slot-noot { font-size: .9rem; margin: .8rem 0 0; }
.slot-noot a { color: #fff; text-underline-offset: 3px; }
.slot-boog { justify-self: end; width: 100%; max-width: 22rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--rond-groot) var(--rond-groot); }
.slot-boog img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (max-width: 800px) {
  .slot-coach .slot-binnen { grid-template-columns: 1fr; gap: 2.2rem; }
  .slot-boog { order: -1; justify-self: start; max-width: 15rem; aspect-ratio: 1 / 1; border-radius: 999px; }
  .slot-coach .knop { flex: 1 1 100%; }
}

/* Voet */
.voet { background: #15291f; }

/* Cijfers in Baskervville op de regel (geen kleine 'oude' cijfers in prijzen en rondjes) */
body, h1, h2, h3, .prijsregel, .bedrag, .schuif output, .advies-traject b { font-variant-numeric: lining-nums; }
.stappen li::before { font: 600 1.15rem/1 var(--tekst-letter); }

/* Smalle telefoon: hokjes onder elkaar, icoon links, zodat 'Welzijnspraktijken' heel blijft */
@media (max-width: 400px) {
  .vakken { grid-template-columns: 1fr; }
  .vak { flex-direction: row; text-align: left; align-items: center; padding: 1rem 1.1rem; gap: 1rem; }
  .vak-icoon { flex: none; margin: 0; }
  .vak strong { margin-bottom: .1rem; }
}

/* Rustig (frontend-design, 18 okt): niets springt omhoog bij aanwijzen; blokken komen alleen zacht in beeld, zonder te schuiven */
.vak, .voorbeelden .kaart { transition: border-color .3s; }
.telefoons a, .telefoons a:hover { transform: none; }
.telefoons li:nth-child(2) a, .telefoons li:nth-child(2) a:hover { transform: translateY(-22px); }
@media (max-width: 600px) { .telefoons li:nth-child(2) a, .telefoons li:nth-child(2) a:hover { transform: translateY(-12px); } }
.in { transform: none; transition: opacity 1s ease; }

/* Smalste telefoons (300 px): lange namen als "Pasmaat Hardloopcoaching" passen net. */
@media (max-width: 340px) { .voorbeelden .kaart-tekst strong { font-size: 1.12rem; } }