/* Basis: letterlijk uit de stijl van de homepage */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/geist.woff2") format("woff2") }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/fonts/big-shoulders-display.woff2") format("woff2") }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/space-mono-400.woff2") format("woff2") }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/space-mono-700.woff2") format("woff2") }
:root { --blauw: #0B75BF; --diep: #003E89; --zwart: #0C0E12; --zwart2: #181B21; --goud: #F2B81A; --goud2: #FFC933; --wit: #FFFFFF; --grijs: #F4F5F7; --lijn: #E3E6EB; --tekst: #0C0E12; --zacht: #55606E; --licht: #B4BBC6;
  --letter: "Geist", "Helvetica Neue", Arial, sans-serif; --rand: clamp(20px, 4.5vw, 72px); --hoek: 10px; --gaaf: cubic-bezier(.2,.8,.2,1);
  --ruimte: clamp(64px, 8vw, 112px); --schaduw: 0 1px 2px rgba(12, 14, 18, .05), 0 18px 40px -22px rgba(8, 30, 70, .38) }
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 88px; scrollbar-color: #8A929E var(--grijs) }
body { margin: 0; background: var(--wit); color: var(--tekst); font: 400 18px/1.55 var(--letter); -webkit-font-smoothing: antialiased; overflow-x: hidden }
::selection { background: var(--goud); color: var(--zwart) }
a { color: inherit; text-underline-offset: 3px }
img { display: block; max-width: 100% }
ul, ol { margin: 0; padding: 0; list-style: none }
p { margin: 0 }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 4px }
.overslaan { position: fixed; z-index: 20; left: 12px; top: -60px; padding: 10px 16px; background: var(--wit); color: var(--tekst); border-radius: 8px }
.overslaan:focus { top: 12px }
.w { padding-left: var(--rand); padding-right: var(--rand) }
.inner { max-width: 1320px; margin-left: auto; margin-right: auto }
h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; text-wrap: balance }
h3 { margin: 0; font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.22; letter-spacing: -.018em; font-weight: 600 }
@keyframes gleam { 0% { background-position: -100% 0 } 10% { background-position: 250% 0 } 100% { background-position: 250% 0 } }
.knop { --vertraging: 2s; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px; padding: 0 1.6rem; border: 0; border-radius: 4px; color: #0a0a0a; background: linear-gradient(180deg, #f7c533 0%, var(--goud) 45%, #d39200 100%); font: 900 1.3rem/1 "Big Shoulders Display", Impact, sans-serif; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 236, 170, .55), 0 3px 0 #8a5d00; transition: transform .08s ease, box-shadow .08s ease, filter .15s ease }
.knop::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 32%, rgba(255, 244, 210, .62) 50%, transparent 68%); background-size: 250% 100%; background-repeat: no-repeat; background-position: -100% 0; animation: gleam 9s ease-in-out infinite; animation-delay: var(--vertraging) }
.knop:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 236, 170, .65), 0 4px 0 #8a5d00, 0 10px 24px -10px rgba(242, 184, 26, .55) }
.knop:active { transform: translateY(3px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3), 0 0 0 #8a5d00 }
.knop svg { transition: transform .25s var(--gaaf) }
.knop:hover svg { transform: translateX(3px) }
.tag { display: inline-block; margin-bottom: .7rem; padding: .4rem .6rem; background: var(--goud); color: #0a0a0a; font: 700 .75rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase }
.donker { background: radial-gradient(70% 46% at 86% 0%, rgba(11, 117, 191, .38), transparent 72%), radial-gradient(50% 44% at 0% 100%, rgba(242, 184, 26, .1), transparent 72%), linear-gradient(180deg, #12151C, #090A0D); color: var(--wit); padding-top: var(--ruimte); padding-bottom: var(--ruimte) }
@media (prefers-reduced-motion: reduce) { .knop::after { animation: none } }
.media-kop { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px) }
.media-kop p { margin-top: 16px; color: #C9D2DE }
.gesprekken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.gesprek { display: flex; flex-direction: column; overflow: hidden; border-top: 3px solid var(--goud); border-radius: var(--hoek); background: radial-gradient(90% 60% at 100% 0%, rgba(11, 117, 191, .22), transparent 72%), linear-gradient(170deg, #1E222B, #0F1116); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 26px 54px -32px rgba(11, 117, 191, .7); color: var(--wit); text-decoration: none; transition: transform .2s var(--gaaf), box-shadow .2s }
.gesprek:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(242, 184, 26, .35), 0 30px 60px -30px rgba(11, 117, 191, .8) }
.gesprek-beeld { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000 }
.gesprek-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gaaf) }
.gesprek:hover .gesprek-beeld img { transform: scale(1.03) }
.gesprek-tekst { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px }
.gesprek-bron { font: 700 .74rem/1.3 "Space Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--goud) }
.gesprek-titel { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em }
.gesprek-meta { margin-top: auto; padding-top: 6px; font-size: 14.5px; color: var(--licht) }
@media (max-width: 960px) { .gesprekken { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) {
  .gesprekken { grid-template-columns: 1fr; gap: 12px }
  .gesprek { flex-direction: row; border-top: 0; border-left: 3px solid var(--goud) }
  .gesprek-beeld { flex: none; width: 40%; align-self: stretch; aspect-ratio: auto; min-height: 96px }
  .gesprek-beeld .post-speel { right: 6px; bottom: 6px; width: 28px; height: 28px }
  .gesprek-tekst { gap: 4px; padding: 10px 12px }
  .gesprek-bron { font-size: .66rem }
  .gesprek-titel { font-size: 15.5px }
  .gesprek-meta { padding-top: 2px; font-size: 13px }
  .lijst a { grid-template-columns: 3.2rem minmax(0, 1fr); gap: 12px; padding: 13px 2px }
  .rij-tekst { font-size: 16px }
  .rij-pijl { display: none }
  .media details { padding: 0 14px }
}
.voet { background: #090A0D; color: var(--licht); padding-top: 44px; padding-bottom: 36px; font-size: 15px; line-height: 1.5; border-top: 1px solid rgba(255, 255, 255, .12) }
.voet .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px 56px }
.voet-kop { display: flex; flex-direction: column; gap: 6px }
.voet-kop b { color: var(--wit); font-size: 18px; letter-spacing: -.02em }
.voet-menu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px }
.voet-menu div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px }
.voet-menu .groep { color: var(--wit); font-weight: 600 }
.voet a { text-decoration: none }
.voet a:hover, .voet a:focus-visible { color: var(--wit); text-decoration: underline }
@media (max-width: 960px) { .voet .inner { grid-template-columns: minmax(0, 1fr) } .voet-menu { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.cookiebalk { position: fixed; z-index: 12; left: 12px; right: 12px; bottom: 12px; max-width: 780px; margin: 0 auto; display: flex; align-items: center; gap: 14px 22px; padding: 16px 18px; background: linear-gradient(180deg, #1E222B, #0C0E12); color: #D9DDE4; border: 1px solid rgba(242, 184, 26, .3); border-top: 3px solid var(--goud); border-radius: var(--hoek); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65); font-size: 15px; line-height: 1.5 }
.cookiebalk b { color: var(--wit) }
.cookiebalk a { color: var(--goud2) }
.cb-knoppen { display: flex; gap: 10px; flex: none }
.cb-knop { min-height: 46px; padding: 0 18px; border: 2px solid var(--goud); border-radius: 4px; background: transparent; color: var(--wit); font: 600 15px var(--letter); cursor: pointer; transition: background .15s, color .15s }
.cb-knop:hover, .cb-knop:focus-visible { background: var(--goud); color: #0a0a0a }
.cb-open .onder { transform: translateY(110%) }
@media (max-width: 640px) { .cookiebalk { flex-direction: column; align-items: stretch; left: 8px; right: 8px; bottom: 8px; padding: 14px } .cb-knoppen > * { flex: 1 } }

/* Pagina's naast de homepage. Lettertypen, kleuren, knop, cookiebanner en voet komen woord voor woord
   uit de stijl van de homepage (site/bouw_site.py voegt ze hierboven toe). */
html { scroll-padding-top: 88px }
.kopbalk { position: sticky; top: 0; z-index: 9; background: linear-gradient(180deg, rgba(24, 27, 33, .98), rgba(12, 14, 18, .96)); color: var(--wit); border-bottom: 1px solid rgba(242, 184, 26, .28) }
.kopbalk > .inner { display: flex; align-items: center; gap: 16px; height: 68px }
.kopbalk .merk { margin-right: auto; font-weight: 700; font-size: 19px; letter-spacing: -.02em; text-decoration: none }
.kopbalk nav { display: flex; gap: 26px; margin-right: 12px; font-weight: 500; font-size: 16px }
.kopbalk nav a { padding: 4px 0; text-decoration: none; border-bottom: 2px solid transparent }
.kopbalk nav a:hover, .kopbalk nav a:focus-visible { border-bottom-color: var(--goud) }
.kopbalk .knop { min-height: 44px; padding: 0 1.1rem; font-size: 1.1rem }
@media (max-width: 960px) { .kopbalk nav { display: none } }

.paginakop { padding-top: clamp(36px, 6vw, 76px); padding-bottom: clamp(34px, 5vw, 60px); color: var(--wit); background: radial-gradient(70% 120% at 0% 0%, rgba(46, 151, 223, .55), transparent 70%), linear-gradient(180deg, var(--diep), #062A5C) }
.smal { max-width: 800px }
.kruimel ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: #C9D6E6 }
.kruimel li + li::before { content: "/"; margin-right: 8px; color: #8FA6C2 }
.kruimel a { color: var(--wit) }
.paginakop .tag { margin: 24px 0 0 }
.paginakop h1 { margin: 12px 0 0; font: 900 clamp(2.5rem, 6vw, 4.4rem)/1 "Big Shoulders Display", Impact, sans-serif; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance }
.paginakop .datum { margin-top: 16px; color: #C9D6E6; font-size: 15px }
.kopbeeld { margin: 0; background: var(--zwart) }
.kopbeeld img { width: 100%; height: clamp(220px, 36vw, 500px); object-fit: cover }

.tekst { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px) }
.tekst p, .tekst ul, .tekst ol, .tekst figure, .tekst .tabel { margin: 0 0 1.1em }
.tekst ul { padding-left: 1.3em; list-style: disc }
.tekst ol { padding-left: 1.4em; list-style: decimal }
.tekst li { margin-bottom: .5em }
.tekst h2 { margin: 1.7em 0 .55em; font-size: clamp(1.6rem, 2.8vw, 2.2rem) }
.tekst h3 { margin: 1.5em 0 .5em }
.tekst h4, .tekst h5, .tekst h6 { margin: 1.3em 0 .4em; font-size: 1.05rem; line-height: 1.3 }
.tekst .inner > :first-child { margin-top: 0 }
.tekst a { color: var(--diep); text-decoration-thickness: 1px }
.tekst a.knop { margin: .2em .6em 1em 0; color: #0A0A0A; text-decoration: none }
.tekst img { height: auto; margin: 0 0 1.1em; border-radius: var(--hoek) }
.tekst figure img { margin-bottom: .55em }
.tekst figcaption { color: var(--zacht); font-size: 15px }
.tekst .citaat { margin: 1.6em 0; padding: 22px 24px; background: var(--grijs); border-left: 3px solid var(--goud); border-radius: var(--hoek) }
.citaat blockquote { margin: 0; font-size: 1.04em }
.citaat blockquote p:last-child { margin-bottom: 0 }
.tekst .citaat figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--tekst) }
.tekst .citaat figcaption img { width: 48px; height: 48px; margin: 0; border-radius: 50%; object-fit: cover }
.citaat .wie { display: flex; flex-direction: column; font-size: 15px }
.citaat .wie span { color: var(--zacht) }
.tabel { overflow-x: auto }
.tekst table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45 }
.tekst th, .tekst td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lijn) }
.tekst thead th { background: var(--grijs); font-weight: 600 }

.berichten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px }
.bericht { display: flex; flex-direction: column; overflow: hidden; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek); box-shadow: var(--schaduw) }
.bericht img { width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 0; object-fit: cover; border-radius: 0 }
.bericht div { padding: 18px 20px 22px }
.bericht time { color: var(--zacht); font-size: 14px }
.bericht h2 { margin: 6px 0 10px; font-size: 1.45rem }
.bericht h2 a { color: var(--tekst); text-decoration: none }
.bericht h2 a:hover, .bericht h2 a:focus-visible { text-decoration: underline }
.bericht p { margin: 0; color: var(--zacht); font-size: 16px }
@media (max-width: 720px) { .berichten { grid-template-columns: minmax(0, 1fr) } }

.cta { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); color: var(--wit); background: var(--zwart) }
.cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem) }
.cta p { margin-top: 14px; color: #D6E2F0 }
.cta .knop { margin-top: 26px }

/* Reviews van bol.com op de boekpagina (10 november 2026). Sterren in het goud van de site; de score vult de sterren. */
.sterren { position: relative; display: inline-block; font-size: 1.15em; line-height: 1; letter-spacing: .08em;
  background: linear-gradient(90deg, var(--goud) calc(var(--score) / 5 * 100%), #D5DAE1 calc(var(--score) / 5 * 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent }
@media (forced-colors: active) { .sterren { color: CanvasText; background: none } }
.reviews { margin: 2.2em 0; padding: 26px 24px 18px; background: var(--grijs); border-radius: var(--hoek); border-top: 3px solid var(--goud) }
.reviews h2 { margin-top: 0 }
.reviews .score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1.05rem }
.reviews .score .sterren { font-size: 1.5em }
.tekst .reviewlijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.2em 0 1em; padding: 0; list-style: none }
.tekst .reviewlijst li { margin: 0; padding: 16px 18px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek) }
.reviewlijst .titel { margin: .5em 0 .3em }
.reviewlijst blockquote { margin: 0 }
.reviewlijst blockquote p { margin: 0 0 .5em }
.reviewlijst .wie { margin: 0; color: var(--zacht); font-size: 14px }
.reviews .bron { margin: 0; color: var(--zacht); font-size: 14px }

/* Boekomslag op de boekpagina's: compact naast de tekst, niet over de volle breedte (Michel, 10 november). */
.tekst a.omslag { display: block; width: min(240px, 62%); margin: 1.4em 0 1em }
.tekst a.omslag img { display: block; width: 100%; height: auto; margin: 0; border-radius: 4px; box-shadow: var(--schaduw) }
/* Boekblok "in het kort": omslag in de spotlight-studio naast een feitenlijst (Michel, 10 november: "zet naast elkaar"). */
.tekst .boekfeiten { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(22px, 3.5vw, 40px); align-items: center; margin: .4em 0 1.8em }
.tekst .boekfeiten a.omslag { position: relative; width: auto; margin: 0; padding: 30px 30px 38px; border-radius: var(--hoek); border-top: 3px solid var(--goud); overflow: hidden }
.tekst .boekfeiten a.omslag::after { content: ""; position: absolute; left: 50%; bottom: 26px; width: 58%; height: 20px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent) }
.tekst .boekfeiten a.omslag img { position: relative; z-index: 1; border-radius: 0; box-shadow: none; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(var(--boeklicht, 125, 196, 255), .18)); transition: transform .4s var(--gaaf) }
.tekst .boekfeiten a.omslag:hover img { transform: translateY(-5px) }
.tekst .boekfeiten-tekst > :last-child { margin-bottom: 0 }
.tekst ul.feiten { list-style: none; padding: 0; margin: 0 0 1.2em; border-top: 1px solid var(--lijn) }
.tekst ul.feiten li { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: 14px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--lijn); line-height: 1.45 }
.tekst ul.feiten strong { font: 700 .74rem/2 "Space Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--diep) }
@media (max-width: 640px) {
  .tekst .boekfeiten { grid-template-columns: 1fr }
  .tekst .boekfeiten a.omslag { width: min(280px, 100%) }
  .tekst ul.feiten li { grid-template-columns: 7em minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) { .tekst .boekfeiten a.omslag img { transition: none } }

/* Verrijking sector- en boekpagina's (10 november 2026): cijferband, gesprekken, boek- en sectorkaarten.
   Gesprekskaarten en het donkere blok komen letterlijk uit de homepage (basis_css). */
.tekst .inner > p:first-child { font-size: clamp(1.12rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--tekst) }
.cijfers { background: linear-gradient(180deg, var(--zwart2), var(--zwart)); color: var(--wit); border-bottom: 1px solid rgba(242, 184, 26, .28) }
.cijfers ul { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none }
.cijfers li { display: flex; flex-direction: column; gap: 4px; padding: clamp(18px, 2.4vw, 28px) clamp(12px, 2vw, 24px); border-left: 1px solid rgba(255, 255, 255, .08) }
.cijfers li:first-child { border-left: 0; padding-left: 0 }
.cijfers strong { font: 900 clamp(2rem, 3.6vw, 2.9rem)/1 "Big Shoulders Display", Impact, sans-serif; color: var(--goud); letter-spacing: .01em }
.cijfers span { color: #C9D2DE; font-size: 15px; line-height: 1.35 }
@media (max-width: 720px) {
  .cijfers ul { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cijfers li:nth-child(odd) { border-left: 0; padding-left: 0 }
  .cijfers li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08) }
}
.gesprekblok .gesprekken { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.gesprekblok .gesprekken.veel { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) } /* 8 kaarten: rijen van 4 */
.kaartenblok { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px) }
.kaartenblok.grijs { background: var(--grijs) }
.kaartenblok h2 { margin: 0 0 clamp(20px, 3vw, 32px); font-size: clamp(1.7rem, 3vw, 2.3rem) }
.kaartjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px }
.kaartje { display: flex; flex-direction: column; overflow: hidden; background: var(--wit); border: 1px solid var(--lijn); border-top: 3px solid var(--goud);
  border-radius: var(--hoek); box-shadow: var(--schaduw); color: var(--tekst); text-decoration: none; transition: transform .2s var(--gaaf), box-shadow .2s }
.kaartje:hover, .kaartje:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(12, 14, 18, .05), 0 24px 48px -22px rgba(8, 30, 70, .45) }
.kaartje-beeld { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zwart) }
.kaartje-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gaaf) }
.kaartje:hover .kaartje-beeld img { transform: scale(1.03) }
/* Boekkaart: het boek in een spotlicht. Lagen van boven naar onder: korrel (SVG-ruis), lichtbundel van boven,
   gloed achter het boek, lichtvlek op de vloer, zwarte studio met vignet. Michel, 10 november: geen witte vlakken,
   zwart als hoofdkleur en per boek een lichte accentgradient (GYST blauw, De Weg van de Uil groen). */
.boek-gyst { --boeklicht: 125, 196, 255 }
.boek-uil { --boeklicht: 118, 222, 160 }
.boeken .kaartje-beeld { position: relative; aspect-ratio: auto; height: 270px; padding: 26px 18px 30px }
.boeken .kaartje-beeld, .tekst .boekfeiten a.omslag {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .42 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
    radial-gradient(44% 84% at 50% -10%, rgba(var(--boeklicht, 125, 196, 255), .56), rgba(var(--boeklicht, 125, 196, 255), .16) 50%, transparent 78%),
    radial-gradient(50% 60% at 50% 55%, rgba(var(--boeklicht, 125, 196, 255), .22), transparent 72%),
    radial-gradient(36% 17% at 50% 90%, rgba(var(--boeklicht, 125, 196, 255), .55), transparent 72%),
    radial-gradient(140% 120% at 50% 15%, #16181D 0%, #0A0B0E 55%, #040405 100%) }
.boeken .kaartje:not(.foto) .kaartje-beeld::after { content: ""; position: absolute; left: 50%; bottom: 22px; width: 42%; height: 22px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent) }
.boeken .kaartje-beeld img { position: relative; z-index: 1; width: auto; height: 100%; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(var(--boeklicht, 125, 196, 255), .18)) }
.boeken .kaartje:not(.foto):hover .kaartje-beeld img { transform: translateY(-6px) }
.boeken .kaartje.foto .kaartje-beeld { padding: 0 }
.boeken .kaartje.foto .kaartje-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: none }
.kaartje-tekst { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 20px }
.kaartje-label { font: 700 .74rem/1.3 "Space Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--diep) }
.kaartje-titel { font-size: 1.2rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em }
.kaartje-oms { color: var(--zacht); font-size: 15.5px; line-height: 1.45 }
@media (prefers-reduced-motion: reduce) { .kaartje, .kaartje-beeld img { transition: none } }

/* Trainingspagina (taak 19): subregel en knop onder de H1, formulier en tweede tekstblok */
.paginakop .kop-sub { margin: 18px 0 0; max-width: 34em; color: #E3ECF6; font-size: clamp(1.06rem, 1.6vw, 1.22rem); line-height: 1.5 }
.paginakop .kop-knop { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px }
.paginakop .kop-knop span { color: #C9D6E6; font-size: 15px }
.contact + .tekst { padding-top: clamp(40px, 6vw, 72px) }