/* ============================================================
   punten.css — de punten van Bjorn van 15-10-2026 (laadt ná alle andere stylesheets).
   Staat los van de gegenereerde css (stijl/site/beeld/ikonen): een nieuwe bouw-wp-run laat dit bestand staan.
   ============================================================ */

/* ── Bovenstrook: "Rijles met een gouden randje" (Bjorn, screenshot 289) ── */
.lint-op{margin-right:0}
.lint-slogan{margin:0 auto;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.lint-slogan::before,.lint-slogan::after{content:"";display:inline-block;width:5px;height:5px;margin:0 10px 2px;border-radius:50%;background:currentColor;opacity:.45}
@media (min-width:761px) and (max-width:1000px){.lint-op{display:none}}
@media (max-width:760px){.lint-slogan::before,.lint-slogan::after{display:none}}
@media (max-width:640px){.lint-los{display:none}.lint-rij{justify-content:space-between!important;gap:12px}.lint-slogan{margin:0;font-size:13px}.lint-tel{font-size:13.5px}}
@media (max-width:359px){.lint-tel svg{display:none}}

/* ── Hero: de tekst in de gele knop precies in het midden (Bjorn, 281) ──
   De pijl na "Plan je proefles" was een masker zonder hoogte: hij nam wel ruimte in (1,05em + gat), dus stond de tekst links. */
.hz-kn.rk-a::after,.hz-kn .rk-a::after{content:none!important}
.hz-kn,.ph-knoppen .knop{text-align:center}

/* ── Home, telefoon: de foto's in de pakketkaarten helder, geen groene waas (Bjorn, 278) ──
   Het verloop over de onderste helft van de foto is weg; de titel staat nu onder de foto op het donkere vlak. */
@media (max-width:760px){
  .aanbod-twee .opl-foto::after,.z-cat .opl-foto::after{content:none!important;display:none!important}
  .aanbod-twee .opl h3,.z-cat .opl h3{margin:16px 0 0!important}
}

/* ── Home, vragen in twee groepen: auto en motor (Bjorn, 279) ── */
.vragen-groepen{display:grid;grid-template-columns:1fr 1fr;gap:28px 18px;max-width:1080px;margin:0 auto;align-items:start}
.vragen-groep{display:grid;gap:12px;align-content:start}
.vragen-groep > h3.vragen-groepkop{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:22px;line-height:1.2;color:var(--nacht)}
.vragen-groep > h3.vragen-groepkop::before{content:"";flex:none;width:44px;height:44px;border-radius:12px;background:var(--nacht) center/24px no-repeat}
.vragen-groep.auto > h3.vragen-groepkop::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3C450' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17H3v-5l2-5h14l2 5v5h-2'/%3E%3Cpath d='M3 12h18'/%3E%3Ccircle cx='7.5' cy='17' r='2'/%3E%3Ccircle cx='16.5' cy='17' r='2'/%3E%3Cpath d='M9.5 17h5'/%3E%3C/svg%3E")}
.vragen-groep.motor > h3.vragen-groepkop::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3C450' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='16' r='3'/%3E%3Ccircle cx='19' cy='16' r='3'/%3E%3Cpath d='M5 16l4-6h5l3 6'/%3E%3Cpath d='M14 10l-1-3h3'/%3E%3Cpath d='M9 10l3 6h4'/%3E%3C/svg%3E")}
.vragen-groep .vraag{margin:0}
@media (max-width:760px){
  .vragen-groepen{grid-template-columns:1fr;gap:30px}
  .vragen-groep{gap:10px}
  .vragen-groep > h3.vragen-groepkop{justify-content:center;font-size:20px}
  .vragen-groep > h3.vragen-groepkop::before{width:38px;height:38px;background-size:21px}
}

/* ── Home, TikTok: echte beelden uit hun eigen filmpjes, geen lege groene vlakken (Bjorn, 280) ── */
.filmpjes .als-li{position:relative;overflow:hidden;isolation:isolate;align-items:flex-end!important;min-height:150px;padding:16px!important;background:#111 center/cover no-repeat!important}
.filmpjes .als-li:nth-child(1){background-image:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.8) 100%),url("img/tt-waarom-720.jpg")!important;background-image:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.8) 100%),image-set(url("img/tt-waarom-720.webp") type("image/webp"),url("img/tt-waarom-720.jpg") type("image/jpeg"))!important}
.filmpjes .als-li:nth-child(2){background-image:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.8) 100%),url("img/tt-voorrang-720.jpg")!important;background-image:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.8) 100%),image-set(url("img/tt-voorrang-720.webp") type("image/webp"),url("img/tt-voorrang-720.jpg") type("image/jpeg"))!important}
.filmpjes .als-li::before{content:"";position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:8px;background:#000 center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.6 3c.4 2.2 1.8 3.7 4 3.9v3.2a7.4 7.4 0 0 1-4-1.3v6.4A6.2 6.2 0 1 1 10.4 9v3.3a3 3 0 1 0 2.9 3V3z'/%3E%3C/svg%3E")}
.filmpjes .als-li b{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.filmpjes .als-li small{color:rgba(255,255,255,.85)!important}
.filmpjes .speel{position:static!important;background:var(--goud-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M0 0l14 9-14 9z' fill='%2312291E'/%3E%3C/svg%3E") 17px center/14px 18px no-repeat!important}
.filmpjes .speel::after{content:none!important}
.filmpjes a.speel::after{content:""!important;position:absolute;inset:0;z-index:2;border:0;border-radius:14px}
.filmpjes a.speel:focus-visible{outline:none}
.filmpjes .als-li:focus-within{outline:3px solid var(--goud-licht);outline-offset:2px}
.filmpjes .als-li:hover .speel{transform:scale(1.06)}
.filmpjes .speel{transition:transform .2s ease}
@media (max-width:760px){.filmpjes .als-li{min-height:0;aspect-ratio:16/9}}

/* ── Geslaagdenstrook als gewone afbeeldingsblokken (Bjorn, algemeen 1) ── */
.strook-baan > figure.strook-tegel{margin:0}
.strook-baan > figure.strook-tegel img{display:block}

/* ── Taxi: het TVP-praktijkexamen in vijf opdrachten + de zes doelgroepen (Bjorn, 282) ── */
.z-examen{padding:96px 0}
.z-examen .sectiekop{max-width:760px;margin:0 auto 46px;text-align:center}
.z-ex-raster{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:36px;align-items:start;max-width:1120px;margin:0 auto}
.z-ex-stappen{display:grid;gap:12px;counter-reset:ex}
.z-ex-rij{display:flex;align-items:stretch;gap:6px;filter:drop-shadow(0 14px 22px rgba(18,41,30,.12))}
.z-ex-rij > p{margin:0;display:flex;align-items:center;min-height:68px;font-weight:700;line-height:1.25}
.z-ex-rij > p.z-ex-nr{flex:0 0 168px;padding:0 34px 0 22px;background:var(--nacht);color:var(--goud-licht);font:900 19px/1.1 Figtree,system-ui,sans-serif;letter-spacing:.01em;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);border-radius:12px 0 0 12px}
.z-ex-rij > p.z-ex-deel{flex:1 1 0;min-width:0;padding:0 34px 0 34px;margin-left:-16px;background:#fff;color:var(--nacht);font-size:16px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%)}
.z-ex-rij > p.z-ex-deel + p.z-ex-deel{background:#FBF3DE}
.z-ex-doel{position:relative;padding:30px 30px 26px;border-radius:22px;background:var(--nacht);color:#fff;box-shadow:0 30px 60px -34px rgba(18,41,30,.8)}
.z-ex-doel h3{margin:0 0 8px;font-size:23px;line-height:1.2;color:#fff}
.z-ex-doel h3 em{font-style:normal;color:var(--goud-licht)}
.z-ex-doel > p{margin:0 0 18px;color:rgba(255,255,255,.78);font-size:15.5px}
.z-ex-doel ol.z-ex-lijst{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:dg}
.z-ex-doel ol.z-ex-lijst > li{counter-increment:dg;display:flex;align-items:center;gap:14px;min-height:46px;padding:6px 14px 6px 6px;border-radius:12px;background:rgba(255,255,255,.07);font-weight:700;font-size:16px}
.z-ex-doel ol.z-ex-lijst > li::before{content:counter(dg);flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--goud-licht);color:var(--nacht);font:900 16px/1 Figtree,system-ui,sans-serif}
@media (max-width:1000px){.z-ex-raster{grid-template-columns:1fr;max-width:640px}}
@media (max-width:760px){
  .z-examen{padding:64px 0}
  .z-examen .sectiekop{margin-bottom:30px}
  .z-ex-stappen{gap:10px}
  .z-ex-rij{flex-wrap:wrap;gap:0;border-radius:14px;overflow:hidden;background:#fff;filter:none;box-shadow:0 14px 26px -18px rgba(18,41,30,.35)}
  .z-ex-rij > p{min-height:0}
  .z-ex-rij > p.z-ex-nr{flex:1 0 100%;padding:10px 16px;font-size:16px;clip-path:none;border-radius:0}
  .z-ex-rij > p.z-ex-deel{flex:1 1 0;margin:0;padding:13px 16px;font-size:15.5px;clip-path:none;justify-content:center;text-align:center}
  .z-ex-rij > p.z-ex-deel + p.z-ex-deel{border-left:1px solid rgba(18,41,30,.1)}
  .z-ex-doel{padding:24px 18px 20px}
  .z-ex-doel h3{font-size:21px;text-align:center}
  .z-ex-doel > p{text-align:center}
}

/* ══ 23-10 punten Bjorn ══ */
/* Menu: Vacatures onder Over ons (klapt open bij aanwijzen of met Tab) */
.kopnav-sub{position:relative;display:inline-flex;align-items:center}
.kopnav-sub > a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.75}
.kopnav-menu{position:absolute;top:100%;left:50%;z-index:60;padding-top:10px;transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.kopnav-sub:hover .kopnav-menu,.kopnav-sub:focus-within .kopnav-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.kopnav .kopnav-menu a{display:block;padding:11px 20px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:var(--nacht);box-shadow:0 18px 36px -16px rgba(0,0,0,.65);white-space:nowrap}
.kopnav .kopnav-menu a:hover,.kopnav .kopnav-menu a[aria-current="page"]{color:var(--goud-licht);border-color:rgba(255,255,255,.1)}
.schuif > a.schuif-sub{padding-left:24px;font-size:16.5px;font-weight:600;color:rgba(255,255,255,.82)}
.schuif > a.schuif-sub::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 2px 0;border-left:2px solid var(--goud-licht);border-bottom:2px solid var(--goud-licht);opacity:.8}
.schuif > a.schuif-sub[aria-current="page"]{color:var(--goud-licht)}

/* Motor AVB: elke oefening op een eigen regel */
.z-clusters.z-clusters-oef{gap:16px}
.z-clusters.z-clusters-oef > li{align-items:start}
.z-clusters.z-clusters-oef > li::before{grid-row:1 / 3}
.z-clusters .z-oef{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.z-clusters .z-oef li{counter-increment:none;display:block;position:relative;padding-left:16px;font-size:14.5px;line-height:1.45;color:var(--grijs)}
.z-clusters .z-oef li::before{content:"";position:absolute;left:1px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--goud);grid-row:auto}

/* Theorie: waarom geen dagcursus */
.z-dagcursus{margin-top:64px;max-width:860px;padding:44px 48px;border-radius:24px;text-align:center;background:linear-gradient(160deg,rgba(245,208,106,.16),rgba(245,208,106,.04));border:1px solid rgba(245,208,106,.5);box-shadow:0 34px 70px -34px rgba(0,0,0,.7)}
.z-dagcursus .kicker{justify-content:center;color:var(--goud-licht)}
.z-dagcursus h2{margin:8px 0 18px;color:#fff}
.z-dagcursus p:not(.kicker){max-width:660px;margin:0 auto 14px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.86)}
.z-dagcursus p:last-child{margin-bottom:0}
@media (max-width:760px){
  .z-dagcursus{margin-top:44px;padding:30px 22px}
  .z-dagcursus p:not(.kicker){text-align:left;font-size:16px}
}
/* 23-10 vacatures: alinea's los van elkaar, uitgelichte zin groen */
.z-artikel p+p,.z-artikel ul+p,.z-artikel p+ul{margin-top:12px}
.z-artikel p.z-accent{font-weight:700;color:var(--blauw-diep)}
/* 24-10 contactfoto vult het hele vak (geen witte rand boven) */
.contact-bjorn img{top:0;height:100%;object-fit:cover;object-position:center 35%}