/* ============================================================
   Coach Jan, de blog. Zelfde bouw als demensenzaak.be, ander
   kleurgebruik en andere inhoud. Beslist door Jan op 14 september:
   de blog volgt de MENSENzaak, alleen de kop van de home blijft donker.

   Kleuren: het palet van Coach Jan uit de stijlgids.
   Marine #0E1F2E, warm wit #F7F3EE, linnen #EDE5D8,
   roestamber #C17F3A, ink #2A3D4F, grijs #8A9BAA.
   ============================================================ */
:root{
  --marine:#0E1F2E;       /* tekst, de voet */
  --marine-2:#2A3D4F;     /* ink, tweede donkere kleur */
  --amber:#C17F3A;        /* de accentkleur, knoppen met donkere tekst */
  --accent-diep:#87521C;  /* roestamber als TEKST, op elke lichte grond: 5,84 op de grond, 5,16 op linnen, 4,79 op salie.
                             Zelfde naam als op de losse pagina's (20 september); de twee oude tekstambers bestaan niet meer */
  --accent-hover:#CF8C46; /* de knop onder de muis: marine erop haalt 5,97 */
  --salie:#DEDFD0;        /* proef 20 september: linnen met groen erin, de vierde grond */
  --salie-diep:#59634F;   /* het label op salie: 4,69. Nooit een knop, nooit een vlak */
  --salie-rand:#CDCFBC;   /* een haarlijn op salie */
  --amber-licht:#E8C79C;  /* op de donkere voet */
  --linnen:#EDE5D8;       /* lichte vlakken, de grond van een kaartbeeld */
  --randje:#E0D7C9;
  --grijs:#8A9BAA;
  --ink:#4A5A69;          /* bijtekst op licht */
  --tekst:#2A3D4F;        /* lopende tekst, een tint zachter dan de koppen */
  --bg:#F7F3EE;
  --wit:#ffffff;
  --inkt:#0E1F2E;
  --bijtekst-dk:#A8B3BE;  /* op de donkere voet, zoals op de andere pagina's */
  --accent-licht:#D9A066;
  --maxw:1180px;
  --lees:68ch;
  --pad:28px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:86px}
body{font-family:Kanit,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  color:var(--tekst);background:var(--bg);line-height:1.7;font-size:17.5px}
h1,h2,h3,h4{color:var(--marine)}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.lees{max-width:var(--lees);margin:0 auto}
h1,h2,h3,h4{font-weight:600;line-height:1.22;letter-spacing:-.4px;overflow-wrap:break-word}
h1,h2{hyphens:manual;text-wrap:balance}
h3,h4{hyphens:manual;text-wrap:pretty}
h1{font-size:clamp(31px,3.6vw,46px)}
h2{font-size:clamp(24px,2.6vw,31px)}
h3{font-size:20px}
p{text-wrap:pretty}
a{color:var(--accent-diep)}
/* wie met de tab-toets navigeert moet zien waar hij staat. Marine tekent zich
   af op het warme wit, op de donkere voet nemen we het lichte amber. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--marine);outline-offset:3px;border-radius:3px}
.voet a:focus-visible,.art-blok a:focus-visible{outline-color:var(--amber-licht)}
.punt{color:var(--amber)}

.proefbalk{background:var(--marine);color:var(--amber-licht);font-size:13.5px;text-align:center;padding:7px var(--pad)}
.proefbalk b{color:#fff;font-weight:500}
mark.invullen{background:#FFE9A8;color:var(--marine);padding:0 5px;border-radius:4px;border:1px dashed #C9A227;font-weight:400}

.label{font-weight:500;text-transform:uppercase;letter-spacing:2.2px;font-size:12.5px;color:var(--marine);
  display:flex;align-items:center;gap:12px;margin-bottom:18px}
.label::before{content:"";width:28px;height:2px;background:var(--amber);flex:none}

/* ---- saliegrond (proef, 20 september): dezelfde klasse als op de losse pagina's.
   Nooit achter een pentekening, nooit twee saliestroken na elkaar, geen groene knoppen. */
section.sectie--salie{background:var(--salie);--randje:var(--salie-rand)}
section.sectie--salie .label{color:var(--salie-diep)}

.btn{display:inline-block;width:fit-content;background:var(--amber);color:var(--marine);font-family:inherit;font-weight:600;font-size:16px;border:0;cursor:pointer;
  padding:16px 28px;border-radius:12px;text-decoration:none;
  transition:background-color .16s ease,transform .16s ease}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--marine);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}
.textlink{display:inline-block;font-weight:400;color:var(--accent-diep);text-decoration:none;
  border-bottom:1.5px solid var(--amber);padding-bottom:2px;transition:border-color .2s ease}
.textlink:hover{border-color:var(--accent-diep)}

/* ---- navigatie: zoals op demensenzaak.be ---- */
#nav{position:sticky;top:0;z-index:60;background:rgba(247,243,238,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--randje);transition:border-color .3s ease,box-shadow .3s ease}
#nav.vast{box-shadow:0 4px 20px rgba(14,31,46,.06)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:15px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:26px;position:relative}
.nav-logo img{height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--marine);font-weight:400;font-size:15.5px}
.nav-links a:not(.btn):hover{color:var(--accent-diep)}
.nav-links a[aria-current="page"]:not(.btn){color:var(--marine);font-weight:500;position:relative}
.nav-links a[aria-current="page"]:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:2px;border-radius:2px;background:var(--amber)}
.nav-actie{display:flex;align-items:center;gap:10px}
.nav-actie .btn{padding:12px 24px;font-size:14.5px;border-radius:10px;white-space:nowrap}
.nav-links .pijl{color:var(--amber);margin-left:5px}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px 6px;width:42px;height:38px;
  flex-direction:column;justify-content:center;gap:5px}
.hamburger span{display:block;height:2px;width:26px;border-radius:2px;background:var(--marine);
  transition:transform .22s ease,opacity .18s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .hamburger span{transition:none}
  #nav{transition:none}
}

/* ---- kop van de blog ---- */
/* de kop staat in het warme wit, het startblok eronder in linnen: twee kleuren
   bovenaan, zoals op demensenzaak.be. Een linnen kop liep in het startblok over
   en maakte er één groot vlak van (Jan, 15 september). */
.blog-kop{padding:76px 0 52px}
.blog-kop + .startblok{border-top:0}
.blog-kop h1{max-width:18ch}
/* niet op het label: dat bleef anders 19px groot staan */
.blog-kop p:not(.label){font-size:19px;max-width:52ch;margin-top:16px}
.blog-kop .kruimel{font-size:14.5px;color:var(--ink);margin:0 0 18px}

/* ---- startblok: waarmee je begint ---- */
.startblok{background:var(--linnen);padding:52px 0 62px;border-top:1px solid var(--randje);border-bottom:1px solid var(--randje)}
.startzin{font-size:clamp(21px,2.1vw,25px);line-height:1.35;margin:0}
.startzin span{display:inline;font-size:19px;font-weight:300;color:var(--ink)}
.startblok .artikels{padding:26px 0 0}

/* ---- de kaarten ---- */
.artikels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:26px 0 0;align-items:stretch}
.artikel{background:var(--wit);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--randje);text-decoration:none;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease}
.artikel:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,31,46,.08)}
.artikel:hover .verder{color:var(--marine);border-color:var(--marine)}
.artikel:hover h3{color:var(--accent-diep)}
.artikel-tekst{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
/* kort en in gewone letters: "6 min lezen" */
.artikel .bij{font-size:14px;color:var(--ink);margin-bottom:8px}
/* de titel is de baas op de kaart, niet de uitspraak erboven */
.artikel h3{font-size:21px;line-height:1.3;letter-spacing:0;margin-bottom:8px}
.artikel p{font-size:15.5px;color:var(--ink);margin-bottom:16px}
.artikel .verder{margin-top:auto;font-size:14.5px;color:var(--accent-diep);
  border-bottom:1.5px solid var(--amber);align-self:flex-start;padding-bottom:2px}
/* meer artikels laden is geen hoofdactie: een lijnknop */
.meer-knop{margin:20px auto 0;display:block;background:transparent;color:var(--marine);border:1.5px solid var(--marine);padding:14.5px 32px}
.meer-knop:hover{background:var(--marine);color:#fff}
.meer-tel{text-align:center;font-size:14.5px;color:var(--ink);margin-top:30px}
.lijst-slot{padding:0 0 92px}

/* ---- het artikel ---- */
.art-kop{padding:56px 0 0}
.art-kop .kruimel{font-size:14.5px;color:var(--ink);margin-bottom:16px}
.art-kop .kruimel a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--randje)}
.art-kop .meta{font-size:14.5px;color:var(--ink);margin-bottom:14px}
.art-kop .meta a{color:var(--accent-diep);text-decoration:none;border-bottom:1px solid var(--randje)}
.art-kop h1{max-width:20ch}
.art-beeld{padding:34px 0 0}
.art-beeld .kaart{border-radius:20px}
.art-body{padding:38px 0 30px;font-size:18.5px}
.art-body p{margin-bottom:1.15em}
.art-body h2{margin:1.9em 0 .55em;font-size:clamp(22px,2.3vw,28px)}
.art-body h3{margin:1.7em 0 .4em}
.art-body h2 + h3{margin-top:.9em}
.art-body ul,.art-body ol{margin:0 0 1.3em;padding-left:1.15em}
.art-body li{margin-bottom:.5em}
.art-body .art-beeld{margin:1.8em 0}
.art-body .art-beeld img{display:block;width:100%;height:auto;border-radius:6px}
.art-body blockquote{margin:1.8em 0;padding:0 0 0 22px;border-left:2px solid var(--amber)}
.art-body blockquote p{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:21px;line-height:1.45;margin:0}

.art-gratis{background:var(--wit);border:1px solid var(--randje);border-left:3px solid var(--amber);border-radius:20px;padding:26px 28px;margin:2.2em 0}
.art-gratis h3{margin-bottom:8px}
.art-gratis p{font-size:16.5px;color:var(--ink);margin-bottom:16px}
.art-gratis .btn{padding:13px 26px;font-size:15px}

.art-slot{background:var(--linnen);border-radius:20px;padding:26px 28px;margin:2.4em 0 2em}
.art-slot p:last-child{margin:0}

.art-delen{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  border-top:1px solid var(--randje);border-bottom:1px solid var(--randje);padding:16px 0;margin:0 0 34px}
.art-delen b{font-weight:500;font-size:15px;margin-right:4px}
.art-delen a,.art-delen button{font-family:inherit;font-size:14.5px;font-weight:400;color:var(--ink);
  background:transparent;border:1px solid var(--randje);border-radius:999px;padding:7px 15px;
  text-decoration:none;cursor:pointer}
.art-delen a:hover,.art-delen button:hover{border-color:var(--amber);color:var(--marine)}

/* het blok onderaan een artikel: donker, maar één blok en niet de hele pagina */
.art-blok{background:var(--marine-2);color:#fff;border-radius:22px;padding:34px 36px;margin:0 0 40px}
.art-blok .label{color:var(--amber-licht)}
.art-blok h2{color:#fff;margin-bottom:12px}
.art-blok p{color:#DCE3E8;margin-bottom:18px}

.auteur{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;
  border-top:1px solid var(--randje);padding-top:28px;margin-bottom:44px}
.auteur img{border-radius:16px}
.auteur h3{margin-bottom:8px}
.auteur p{font-size:16px;color:var(--ink);margin-bottom:10px}

.art-meer{background:var(--linnen);padding:56px 0 76px}
.art-meer .artikels{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- de nieuwsbrief, als eigen strook boven de voet ---- */
.brief-strook{background:var(--bg);border-top:1px solid var(--randje);padding:46px 0}
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.brief-kop{font-size:21px;font-weight:500;color:var(--marine)}
.brief-sub{font-size:15.5px;margin-top:6px;color:var(--ink)}
.brief-form{display:flex;gap:12px;flex-wrap:wrap}
.brief-form input{flex:1 1 220px;font-family:inherit;font-size:16px;font-weight:300;color:var(--marine);
  background:var(--wit);border:1px solid var(--randje);border-radius:12px;padding:15px 18px}

/* ---- de voet: dezelfde als op de rest van de site (proef-3.html) ---- */
.voet{background:var(--marine);color:#fff;padding:56px 0 40px;font-size:15.5px;border-top:1px solid rgba(255,255,255,.1)}
.voet p{margin:0 0 1.1em;max-width:31em}
.voet a{color:#fff;text-decoration:none}
.voet a:hover{color:var(--accent-licht);text-decoration:underline;text-underline-offset:4px}
.voet h3{font-size:13.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--bijtekst-dk);font-weight:500;margin-bottom:14px;line-height:1.7}
.voet ul{margin:0;padding:0;list-style:none}
.voet li{padding:5px 0}
.voet .fijn{font-size:13.5px;color:var(--bijtekst-dk);border-top:1px solid rgba(255,255,255,.12);padding-top:22px;max-width:none;margin:0}
.voet .voet-zin{color:#E6EAEE}
/* bovenaan de merkrij: logo, zin en icoontjes; daaronder vijf even brede kolommen (17 september) */
.voet .voet-merk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:40px;padding-bottom:34px;margin-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
.voet .voet-merk .merk--voet{margin:0}
.voet .voet-merk .voet-zin{margin:0;max-width:34em}
.voet a.voet-meer{white-space:nowrap;border-bottom:1px solid var(--accent-licht)}
.voet a.voet-meer:hover{text-decoration:none}
.voet .voet-rijen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 32px;margin-bottom:38px}
.voet .voet-sociaal{display:flex;margin:0 -11px 0 0}
.voet .voet-sociaal li{padding:0}
.voet .voet-sociaal a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:#fff;opacity:.75}
.voet .voet-sociaal a:hover{color:var(--accent-licht);opacity:1;text-decoration:none}
.voet .voet-sociaal svg{width:21px;height:21px;display:block}
.voet .voet-sociaal li:nth-child(1) svg{width:19px;height:19px}
.voet .voet-sociaal li:nth-child(4) svg{width:24px;height:24px}
@media (max-width:1180px){.voet .voet-rijen{column-gap:24px}}
@media (max-width:980px){
  .voet .voet-merk{grid-template-columns:1fr;gap:18px;align-items:start}
  .voet .voet-sociaal{margin:0 0 0 -11px}
  .voet .voet-rijen{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .voet .voet-rijen{grid-template-columns:1fr 1fr;gap:26px 20px}
  .voet .voet-rijen>div:last-child{grid-column:1 / -1}
}
.voet .merk--voet a{display:inline-block}
.voet .merk--voet a:hover{text-decoration:none}
.merk{display:block;line-height:0;text-decoration:none}
.merk--voet{margin:0 0 16px}
.merk--voet img{height:56px;width:auto}

@media (max-width:980px){
  .artikels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brief-grid,.voet-rijen{grid-template-columns:1fr 1fr}
  .art-meer .artikels{grid-template-columns:1fr}
}
@media (max-width:820px){
  .hamburger{display:flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg);border-bottom:1px solid var(--randje);padding:8px var(--pad) 18px}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--randje)}
  .nav-links a[aria-current="page"]:not(.btn)::after{left:0;right:auto;width:26px;bottom:6px}
  .nav-actie .btn{padding:10px 15px;font-size:13.5px}
  .blog-kop{padding:48px 0 36px}
}
@media (max-width:640px){
  :root{--pad:22px}
  .filterrij{flex-direction:column-reverse;gap:12px}
  .zoekvak{flex:1 1 auto;width:100%}
  /* flex:0 0 auto, anders wordt de basis van 640px hier een hoogte: een gat van 600px */
  /* drie knoppen: ze mogen naar een tweede regel, dan blijft "Alles" in beeld */
  .filterbalk{flex:0 0 auto;flex-wrap:wrap;gap:8px;max-width:100%}
  .filterbalk::-webkit-scrollbar{display:none}
  .artikels{grid-template-columns:minmax(0,1fr)}
  .startblok{padding:40px 0 46px}
  .art-kop{padding:36px 0 0}
  .art-body{font-size:17.5px}
  .auteur{grid-template-columns:84px 1fr;gap:18px}
  .brief-grid{grid-template-columns:minmax(0,1fr)}
  .voet h3{letter-spacing:1.6px}
  .kaart{min-height:176px}
  .kaart--breed{min-height:200px}
}

/* een label dat alleen voor een schermlezer bestaat */
.visueel-weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hoort een artikel bij een reeks, dan staat dat als klein merkje op het
   kaartje, zoals bij de MENSENzaak. */
.reeksmerk{display:inline-block;align-self:flex-start;font-size:12px;font-weight:500;letter-spacing:.4px;
  color:var(--accent-diep);background:var(--linnen);border-radius:999px;padding:4px 11px;margin-bottom:10px}

/* het gerenderde kaartbeeld, in de plaats van de html-versie */
.kaartbeeld{width:100%;height:auto;display:block}
.artikel .kaartbeeld{border-bottom:1px solid var(--randje)}
.art-beeld .kaartbeeld{border-radius:20px}

/* ---------------------------------------------------------------- 16 sept
   De kop van een artikel: foto links, tekst rechts op linnen. Geen vlak en
   geen uitspraak meer op de foto, want de titel staat er al naast. Onder 900
   pixels gaat de foto boven de tekst staan. */
.art-kop--foto{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-bottom:1px solid var(--randje)}
.art-kop--foto .art-kop-foto{margin:0;overflow:hidden;background:var(--linnen)}
.art-kop--foto .art-kop-foto img{width:100%;height:100%;object-fit:cover;display:block}
.art-kop--foto .art-kop-tekst{background:var(--linnen);display:flex;align-items:center;
  padding:clamp(34px,4.5vw,64px) clamp(22px,4vw,64px)}
.art-kop--foto .art-kop-tekst > div{max-width:26em}
.art-kop--foto h1{max-width:18ch;margin:0 0 14px}
.art-kop--foto .kruimel{margin-bottom:14px}
.art-kop--foto .meta{margin:0}
@media (max-width:900px){
  .art-kop--foto{grid-template-columns:1fr}
  .art-kop--foto .art-kop-foto{aspect-ratio:16/9}
}

/* De kaart draagt geen tekst meer op het beeld en geen samenvatting eronder.
   Een artikel zonder foto krijgt gewoon geen beeld, geen vervangvlak: dat leest
   als af in plaats van als half. */
.artikel .kaartbeeld{aspect-ratio:16/10;object-fit:cover}
.artikel--zonderbeeld .artikel-tekst{padding-top:26px}

/* De zinnen: negen groepjes, per familie. Het patroon van James Clear, in
   jouw woorden. */
.zinnen{padding:clamp(48px,5vw,72px) 0 clamp(40px,4.5vw,60px)}
.zinnen > .wrap > h2{font-size:clamp(25px,2.8vw,32px);max-width:20ch}
.zinnen .lead{font-size:19px;color:var(--ink);max-width:46ch;margin-top:12px}
.zinfamilie{margin-top:clamp(34px,3.6vw,48px)}
.zinfamilie > p{font-size:12.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--accent-diep);margin:0 0 18px}
.zingroepen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 34px}
.zingroep h3{font-size:19px;margin:0 0 10px;letter-spacing:0}
.zingroep h3 a{color:inherit;text-decoration:none}
.zingroep h3 a:hover{color:var(--accent-diep);text-decoration:underline;text-underline-offset:3px}
.zingroep ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--randje)}
.zingroep li{border-bottom:1px solid var(--randje)}
.zingroep li a{display:block;padding:11px 0;font-size:16px;line-height:1.35;
  color:var(--marine);text-decoration:none}
.zingroep li a:hover{color:var(--accent-diep)}
.zingroep .meer{display:inline-block;margin-top:12px;font-size:14.5px;color:var(--accent-diep);
  text-decoration:none;border-bottom:1px solid var(--randje)}
.zingroep .meer:hover{border-color:var(--accent-diep)}
.zingroep .leeg{font-size:15.5px;color:var(--ink);margin:0;padding:11px 0}
@media (max-width:900px){.zingroepen{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:620px){.zingroepen{grid-template-columns:1fr}}

/* De kop van de blog draagt de tekening, net als de schappagina's. */
.blog-kop--merk .wrap{display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(20px,4vw,52px);align-items:center}
.blog-merk{margin:0}
.blog-merk svg{display:block;width:100%;height:auto;max-width:520px;margin-left:auto}
@media (max-width:900px){
  .blog-kop--merk .wrap{grid-template-columns:1fr;gap:26px}
  .blog-merk svg{max-width:300px;margin:0}
}

/* ============================================================
   De vijf kamers: Aandacht, Grenzen, Keuzes, Richting, Regie.
   Hangt onder proef-blog.css en gebruikt dezelfde kleuren.

   Beslist op 16 september, na drie rondes kijken:
   - de kop in het warme wit, de vijf kamers eronder in linnen
   - in de stroken geen tekening, alleen tekst. De enige tekening
     op deze pagina staat in de kop.
   - Net verschenen in marine, als donker anker
   - de nieuwsbriefstrook daarna weer licht, en ruim genoeg om
     geen strookje te lijken tussen twee donkere vlakken
   ============================================================ */

/* ---- het linnen vlak met de vijf ---- */
.kamers{background:var(--linnen);border-top:1px solid var(--randje);
  border-bottom:1px solid var(--randje);
  padding:clamp(20px,2.4vw,32px) 0 clamp(28px,3vw,44px)}
.kamerlabel{font-size:12.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--accent-diep);margin:0 0 10px}
.kamerbij{color:var(--ink);font-size:16.5px;line-height:1.55;margin:0;max-width:46ch}

/* ---- de strook: links de zin, rechts de artikels, de link linksonder ---- */
.kamers--stroken .kamer{
  display:grid;grid-template-columns:1.05fr .95fr;
  grid-template-areas:"tekst rechts" "actie rechts";
  column-gap:clamp(24px,4vw,64px);row-gap:20px;
  align-items:start;align-content:start;
  padding:clamp(28px,3.4vw,42px) 0;
  border-top:1px solid #D8CBB8}     /* --randje verdwijnt in linnen */
.kamers--stroken .kamer:first-child{border-top:0}
.kamer-tekst{grid-area:tekst}
.kamer-rechts{grid-area:rechts}
.kamer-actie{grid-area:actie;margin:0;align-self:end}
.kamers--stroken .kamer h2{font-size:clamp(25px,2.9vw,34px);margin:0 0 12px;max-width:16ch}
.kamers--stroken .kamer h2 a{color:inherit;text-decoration:none}
.kamers--stroken .kamer h2 a:hover{color:var(--accent-diep);
  text-decoration:underline;text-underline-offset:4px}
.kamerlijst{list-style:none;margin:0;padding:0;border-top:1px solid #D8CBB8}
.kamerlijst li{border-bottom:1px solid #D8CBB8}
.kamerlijst li a{display:block;padding:11px 0;font-size:16px;line-height:1.35;
  color:var(--tekst);text-decoration:none}
.kamerlijst li a:hover{color:var(--accent-diep)}
@media (max-width:860px){
  /* op gsm: eerst de zin, dan de artikels, en pas dan de knop. Andersom
     kondigde de knop iets aan wat er nog niet stond. */
  .kamers--stroken .kamer{grid-template-columns:1fr;
    grid-template-areas:"tekst" "rechts" "actie";row-gap:18px}
  .kamer-actie{align-self:start}
  .kamers--stroken .kamer h2{max-width:none}
}

/* ---- vorm B: vijf kaarten met een tekening ----
   Zes kolommen, elke kaart twee breed: drie op de eerste rij. De laatste twee
   nemen er drie, zodat de tweede rij vol staat in plaats van scheef. */
.kamerraster{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.kamerkaart{grid-column:span 2;background:var(--wit);border:1px solid var(--randje);
  border-radius:20px;padding:26px 26px 30px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease}
.kamerkaart:nth-child(4),.kamerkaart:nth-child(5){grid-column:span 3}
.kamerkaart:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,31,46,.08)}
.kamerkaart:hover h2{color:var(--accent-diep)}
.kamerbeeld{margin:0 0 18px;height:112px;display:flex;align-items:center;justify-content:flex-start}
.kamerbeeld svg{height:100%;width:auto;max-width:100%}
.kamerkaart h2{font-size:23px;line-height:1.25;margin:0 0 10px}
.kamerkaart .kamerbij{font-size:15.5px;margin-bottom:18px;flex:1}
.kamerkaart .textlink{align-self:flex-start}
@media (max-width:980px){
  .kamerraster{grid-template-columns:repeat(2,1fr)}
  .kamerkaart,.kamerkaart:nth-child(4),.kamerkaart:nth-child(5){grid-column:span 1}
  .kamerkaart:nth-child(5){grid-column:span 2}
}
@media (max-width:640px){
  .kamerraster{grid-template-columns:1fr}
  .kamerkaart,.kamerkaart:nth-child(5){grid-column:span 1}
  .kamerbeeld{height:92px}
}

/* ---- net verschenen: het donkere anker van de pagina ---- */
.netverschenen{background:var(--marine);padding:clamp(40px,4.4vw,60px) 0;border:0}
.netverschenen .label{color:var(--amber-licht)}
.netverschenen .label::before{background:var(--amber)}
.verschenenlijst{list-style:none;margin:0;padding:0}
.verschenenlijst li{display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.14);padding:12px 0}
.verschenenlijst li:last-child{border-bottom:0}
.verschenenlijst a{color:#fff;text-decoration:none;font-size:16.5px}
.verschenenlijst a:hover{color:var(--amber-licht)}
.verschenenlijst span{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--amber-licht);opacity:.75;flex:none}
@media (max-width:620px){
  .verschenenlijst li{flex-direction:column;gap:4px}
}

/* ---- de nieuwsbriefstrook ----
   Licht, tussen het donkere blok en de donkere voet. Ze had 46px lucht en zag
   er daardoor geplet uit: nu ruim genoeg om een eigen band te zijn. */
.netverschenen + .brief-strook{background:var(--bg);border-top:0;
  padding:clamp(56px,5.6vw,80px) 0}

/* ---- de kamerpagina ----
   16 september, herwerkt. Vroeger een smal lint tekst met rechts niets, en
   onderaan drie uitgangen onder elkaar. Nu: de kop op linnen, naast de
   herkenning de artikels waarmee je begint, gratis en aanbod naast elkaar,
   en de andere vier kamers als rij in plaats van één regeltje. */
.kamer-kop{background:var(--linnen);border-bottom:1px solid var(--randje);
  padding:clamp(36px,4vw,56px) 0 clamp(30px,3.4vw,46px)}
.kamer-kop .kruimel{font-size:14.5px;color:var(--ink);margin-bottom:18px}
.kamer-kop .kruimel a{color:var(--ink)}
.kamer-kop h1{max-width:17ch;margin-bottom:14px}
.kamer-kop .lead{font-size:19px;color:var(--ink);max-width:48ch;margin:0}
.kamer-kop--merk .wrap{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,4vw,56px);align-items:center}
.kamer-merk{margin:0;display:flex;justify-content:center}
.kamer-merk svg{width:100%;max-height:230px}
@media (max-width:900px){
  .kamer-kop--merk .wrap{grid-template-columns:1fr;gap:22px}
  .kamer-merk svg{max-height:150px}
}

/* de herkenning, met rechts waar je begint */
.kamer-herken{padding:clamp(40px,4.6vw,64px) 0 clamp(36px,4vw,56px)}
.herken-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.herken-tekst p{margin-bottom:1.1em;max-width:60ch}
.herken-tekst p:first-child{font-size:20px;line-height:1.55;color:var(--marine)}
.herken-tekst p:last-child{margin-bottom:0}
.kamer-start .label{margin-bottom:14px}
.minilijst{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mini{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:center;
  background:var(--wit);border:1px solid var(--randje);border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;padding-right:18px;min-height:96px;
  transition:transform .25s ease,box-shadow .25s ease}
.mini img{width:128px;height:100%;min-height:96px;object-fit:cover}
.mini--zonderbeeld{grid-template-columns:minmax(0,1fr);padding:16px 18px}
.mini-tekst{display:flex;flex-direction:column;gap:3px;padding:12px 0}
.mini--zonderbeeld .mini-tekst{padding:0}
.mini-bij{font-size:13.5px;color:var(--ink)}
.mini-titel{font-weight:600;font-size:17px;line-height:1.3;color:var(--marine)}
.mini .reeksmerk{margin-bottom:2px}
.mini:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,31,46,.07)}
.mini:hover .mini-titel{color:var(--accent-diep)}
.kamer-start--leeg{background:var(--wit);border:1px solid var(--randje);
  border-left:3px solid var(--amber);border-radius:20px;padding:26px 28px}
.kamer-start--leeg h2{font-size:23px;margin-bottom:10px}
.kamer-start--leeg p{font-size:16.5px;color:var(--ink);margin-bottom:14px}
@media (max-width:860px){
  .herken-grid{grid-template-columns:1fr}
  .herken-tekst p:first-child{font-size:19px}
}
@media (max-width:420px){
  .mini{grid-template-columns:96px minmax(0,1fr);gap:12px;padding-right:14px;min-height:84px}
  .mini img{width:96px;min-height:84px}
  .mini-titel{font-size:16px}
}

/* wat verder nog in de kamer staat: onder Begin hier, in dezelfde kolom */
.kamer-ooklabel{margin-top:30px}
.kamer-start .kamerarchief{border-top:1px solid var(--randje)}
.kamerarchief{list-style:none;margin:0;padding:0}
.kamerarchief li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  border-bottom:1px solid var(--randje);padding:11px 0}
.kamerarchief a{color:var(--tekst);text-decoration:none;font-size:16px;line-height:1.4}
.kamerarchief a:hover{color:var(--accent-diep)}
.kamerarchief span{font-size:14px;color:var(--ink);flex:none}

/* eerst gratis, dan de grotere stap: naast elkaar, even hoog */
.kamer-duo{padding:0 0 clamp(48px,5vw,72px)}
.duo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:stretch}
.duo .art-gratis,.duo .art-blok{margin:0;display:flex;flex-direction:column}
/* de knop onderaan, ook al zet het blok zelf margin:0 op die regel */
.duo .art-gratis > p:last-child,.duo .art-blok > p:last-child{margin-top:auto!important}
.duo .art-blok h2{font-size:clamp(23px,2.3vw,28px)}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

/* de andere vier kamers */
.kamer-buren{background:var(--linnen);border-top:1px solid var(--randje);
  padding:clamp(40px,4.4vw,60px) 0 clamp(44px,4.8vw,64px)}
.kamer-buren .label{margin-bottom:10px}
.buurvraag{font-size:19px;color:var(--marine);margin:0 0 22px}
.burenrij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}  /* altijd de drie andere kamers (28 sep: vier kamers) */
.buurkamer{display:flex;flex-direction:column;gap:6px;background:var(--wit);
  border:1px solid var(--randje);border-top:3px solid #D8CBB8;border-radius:14px;
  padding:18px 20px 20px;text-decoration:none;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease}
.buurkamer--eerst{border-top-color:var(--amber)}
.buurkamer .kamerlabel{margin:0;color:var(--accent-diep)}
.buurzin{font-weight:600;font-size:18px;line-height:1.3;color:var(--marine)}
.buurzin::after{content:" \2192";color:var(--amber);font-weight:400}
.buurkamer:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,31,46,.07)}
.buurkamer:hover .buurzin{color:var(--accent-diep)}
@media (max-width:980px){.burenrij{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.burenrij{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mini,.buurkamer{transition:none}
  .mini:hover,.buurkamer:hover{transform:none}}
.kamer-buren + .brief-strook{border-top:0}

/* ---- toetsenbord ---- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--marine);outline-offset:3px;border-radius:3px}
.netverschenen a:focus-visible,.voet a:focus-visible{outline-color:var(--amber-licht)}

/* een kamer waar nog niets geschreven is */
.kamerleeg{color:var(--ink);font-size:16px;margin:0;padding:11px 0;
  border-top:1px solid #D8CBB8}

/* =================================================================
   Het artikelsjabloon, ronde van 16 september: rustiger lezen
   ================================================================= */

/* de kop: een inleiding onder de titel, de meta als laatste regel */
.art-lead{font-size:clamp(18.5px,1.6vw,21px);line-height:1.5;color:var(--marine-2);
  font-weight:300;max-width:34em;margin:0 0 18px}
.art-kop .art-lead{margin-top:-2px}
.art-kop--foto h1{margin-bottom:16px}
.art-kop .meta{margin:0}

/* de lopende tekst: gewicht 400 en een tint donkerder, alleen in een artikel */
.art-body{font-size:18.5px}
.art-body p,.art-body li{font-weight:400;color:#1F3244;line-height:1.72}
.art-body strong{font-weight:600;color:var(--marine)}

/* koppen: de tussenkop opent een nieuw deel, de subkop hoort bij de tekst */
.art-body h2{font-size:clamp(26px,2.7vw,33px);margin:2.3em 0 .6em;letter-spacing:-.5px}
.art-body h3{font-size:19.5px;font-weight:600;letter-spacing:-.2px;margin:1.8em 0 .3em;color:var(--marine)}
.art-body h2 + h3{margin-top:1em}
.art-body > .wrap > h2:first-child{margin-top:.4em}

/* de uitspraak: één plek per artikel waar het oog stopt */
.art-uitspraak{margin:2.6em calc(50% - 50vw);padding:clamp(40px,5vw,64px) 0;
  background:var(--linnen);border-top:1px solid #D8CBB8;border-bottom:1px solid #D8CBB8}
.art-uitspraak blockquote{max-width:var(--lees);margin:0 auto;padding:0 var(--pad);border:0}
.art-uitspraak blockquote p{font-family:"Playfair Display",Georgia,serif;font-style:italic;
  font-weight:500;font-size:clamp(25px,3vw,36px);line-height:1.3;color:var(--marine);
  max-width:24ch;margin:0}
.art-uitspraak blockquote p::before{content:"";display:block;width:44px;height:2px;
  background:var(--amber);margin-bottom:22px}

/* het donkere blok onderaan houdt zijn eigen kleuren en maten */
.art-body .art-blok h2{font-size:clamp(24px,2.6vw,31px);margin:0 0 12px}
.art-body .art-blok p{color:#DCE3E8;font-weight:300}
.art-body .art-slot p{color:#1F3244}

/* het gratis blok: even groot als de tekst, met de tekening erbij */
.art-body .art-gratis{padding:30px 32px}
.art-body .art-gratis h3{font-size:22px;font-weight:600;margin:4px 0 8px}
.art-body .art-gratis p{font-size:1em;font-weight:400;color:#1F3244;line-height:1.6}
.art-body .art-gratis .label{font-size:12.5px;color:var(--marine)}
.art-gratis--beeld{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:center}
.art-gratis-beeld{width:100%;height:auto;display:block}

/* de deelrij: de vraag erboven, de knoppen samen op één rij */
.art-delen{display:block}
.art-delen b{display:block;margin:0 0 12px}
.art-delen-knoppen{display:flex;flex-wrap:wrap;gap:10px}

/* eerst Jan, dan het aanbod */
.auteur{margin-bottom:36px;align-items:start}
/* 25 september: foto bovenaan, op de hoogte van de naam (Jan) */
.auteur img{margin-top:4px}
.auteur h3{margin-top:0}
.auteur img{border-radius:50%;width:120px;height:120px;object-fit:cover}
.art-delen + .auteur{border-top:0;padding-top:4px}
.auteur + .art-blok{margin-top:0}

@media (max-width:820px){
  .art-body{font-size:17.5px}
  .art-body h2{font-size:25px}
  .art-body h3{font-size:18.5px}
  .art-lead{font-size:18px}
  .art-body .art-gratis{padding:24px 22px}
  .art-gratis--beeld{grid-template-columns:1fr;gap:14px}
  .art-gratis-beeld{width:110px}
  .auteur img{width:84px;height:84px}
  .auteur{align-items:start}
  .art-gratis-beeld{width:160px}
}

/* ---- kamerpagina, tweede ronde (16 september) ----
   Eén labelstijl, twee afrondingen (20 voor blokken, 14 voor kaartjes), nadruk
   altijd met een amberen rand links, en de knop gewoon onder de tekst. */
.art-gratis .label{font-size:12.5px;color:var(--marine);margin-bottom:14px}
h2.label{line-height:1.4;text-wrap:initial}
.art-gratis h2{font-size:20px;margin-bottom:8px}
.art-blok{border-radius:20px}
.duo{align-items:start}
.duo .art-gratis > p:last-child,.duo .art-blok > p:last-child{margin-top:0!important}
.mini{border-radius:14px}
.mini-titel{margin:0}
.buurkamer{border-top:1px solid var(--randje);border-left:3px solid transparent}
.buurkamer--eerst{border-left-color:var(--amber)}
.kamer-kop .kruimel{font-size:14.5px;letter-spacing:.2px;margin-bottom:14px}

/* herkenning: eerste alinea, dan Begin hier, dan de rest. Op groot scherm
   staat Begin hier rechts over de volle hoogte. */
.herken-grid{grid-template-areas:"eerst start" "rest start";grid-template-rows:auto 1fr;row-gap:0}
.herken-eerst{grid-area:eerst}
.herken-rest{grid-area:rest;padding-top:1.1em}
.kamer-start{grid-area:start}
@media (max-width:860px){
  .herken-grid{grid-template-columns:1fr;grid-template-areas:"eerst" "start" "rest";row-gap:26px}
  .herken-rest{padding-top:0}
  .kamer-merk svg{max-height:100px}
  .kamer-kop--merk .wrap{gap:14px}
}

/* de nieuwsbriefstrook: vanaf tablet onder elkaar, de kop evenwichtig gebroken */
.brief-kop{text-wrap:balance}
@media (max-width:900px){
  .brief-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .brief-sub{max-width:52ch}
}
@media (max-width:480px){
  .brief-form .btn{flex:1 1 100%}
}
/* de grotere eerste alinea geldt alleen voor de echte eerste, niet voor de
   eerste van het tweede stuk */
.herken-rest p:first-child{font-size:inherit;line-height:inherit;color:inherit}
/* het pijltje plakt aan het laatste woord, anders staat het soms alleen op een regel */
.buurzin::after{content:"\00a0\2192"}

/* ---- kamerpagina, derde ronde (16 september) ----
   Gratis en aanbod waren twee losse blokken met een andere hoogte, andere
   binnenruimte en knoppen op een andere hoogte. Nu één kaart in twee helften:
   dezelfde hoogte, dezelfde maat, labels en knoppen op één lijn. Het verschil in
   gewicht zit in de knop: een lijnknop voor gratis, amber voor de grotere stap. */
.duo{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0;align-items:stretch;
  border:1px solid var(--randje);border-radius:20px;overflow:hidden;background:var(--wit)}
.duo .art-gratis,.duo .art-blok{border:0;border-radius:0;margin:0;padding:clamp(28px,3vw,40px);
  display:flex;flex-direction:column}
.duo .art-gratis .label,.duo .art-blok .label{font-size:12.5px;margin-bottom:14px}
.duo .art-gratis h2,.duo .art-blok h2{font-size:clamp(21px,2vw,24px);line-height:1.25;margin:0 0 10px}
.duo .art-gratis p,.duo .art-blok p{font-size:16.5px;line-height:1.6}
.duo .art-gratis > p:last-child,.duo .art-blok > p:last-child{margin-top:auto!important;padding-top:6px}
.duo .art-gratis .btn{background:transparent;color:var(--marine);box-shadow:inset 0 0 0 1.5px var(--marine)}
.duo .art-gratis .btn:hover{background:var(--marine);color:#fff}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

/* ---- de andere kamers, met hun tekening ---- */
.burenrij{gap:18px}
.buurkamer{padding:0;overflow:hidden;gap:0;border-left-width:1px;border-radius:14px}
.buurkamer--eerst{box-shadow:inset 0 3px 0 var(--amber);border-left-color:var(--randje)}
.buurbeeld{display:flex;align-items:center;justify-content:center;height:118px;
  padding:18px 14px 8px;border-bottom:1px solid var(--randje);background:var(--wit)}
.buurbeeld img{width:100%;height:100%;object-fit:contain}
/* Kleur per kamer, zoals in de werkboeken (Jan, 28 september): Aandacht salie, Richting duifblauw,
   Grenzen linnen; Keuzes en Regie blijven wit tot hun eigen weggever er is. */
.buurbeeld--aandacht{background:#DEDFD0}
.buurbeeld--richting{background:#D0DAE4}
.buurbeeld--grenzen{background:#EDE5D8}
.buurtekst{display:flex;flex-direction:column;gap:6px;padding:16px 20px 20px}
.buurkamer:hover .buurbeeld img{transform:scale(1.04)}
.buurbeeld img{transition:transform .35s ease}
@media (prefers-reduced-motion:reduce){.buurbeeld img{transition:none}.buurkamer:hover .buurbeeld img{transform:none}}

/* beide knoppen even groot, zodat ze op één lijn staan */
.duo .art-gratis .btn,.duo .art-blok .btn{padding:14px 28px;font-size:15.5px;line-height:1.3}
/* de eerste buurkamer: amber bovenaan, over het beeld heen */
.buurkamer--eerst{box-shadow:none;border-top:3px solid var(--amber)}
.buurzin{text-wrap:balance}
/* op gsm twee naast elkaar, zodat de tekening groot genoeg blijft om iets te zeggen */
@media (max-width:520px){
  .burenrij{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .buurbeeld{height:84px;padding:12px 8px 6px}
  .buurtekst{padding:12px 14px 16px;gap:4px}
  .buurkamer .kamerlabel{font-size:11px;letter-spacing:1.8px}
  .buurzin{font-size:15.5px}
}
/* De witte helft was ook echt smaller (1fr tegen 1.2fr), en de lichte rand viel
   weg tegen de grond, waardoor ze nog kleiner leek. Nu twee gelijke helften en
   een rand die je ziet. */
.duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid #CFC0AA}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

/* De test van sterkernadeval.be als gratis blok (17 september): in de vorm van de testpagina daar,
   met de tekening van jij tussen je team rechts, op linnen, en groter dan de gewone gratis blokken. */
.art-body .art-gratis--leiderstest{background:var(--linnen);border:0;border-radius:22px;
  padding:clamp(28px,4vw,44px);grid-template-columns:1fr 230px;gap:clamp(20px,3vw,36px);margin:2.6em 0}
.art-gratis--leiderstest .art-gratis-beeld{order:2;width:100%}
.art-body .art-gratis--leiderstest h3{font-size:clamp(24px,2.6vw,30px);font-weight:600;line-height:1.15;margin:6px 0 12px}
.art-body .art-gratis--leiderstest p{font-size:1em}
.art-gratis--leiderstest .btn{padding:14px 28px;font-size:15.5px}
@media (max-width:640px){
  .art-body .art-gratis--leiderstest{grid-template-columns:1fr}
  .art-gratis--leiderstest .art-gratis-beeld{order:-1;width:150px}
}

/* =================================================================
   De juridische pagina's (18 september): /algemene-voorwaarden/ en
   /privacy/. Eén rustige kop op linnen, een inhoudsopgave met ankers,
   daaronder lopende tekst op leesbreedte. Balk, voet, .wrap, .label
   en .btn komen uit dit bestand: hier staat alleen wat nieuw is.
   ================================================================= */
.jur-kop{background:var(--linnen);border-bottom:1px solid var(--randje);
  padding:clamp(36px,4vw,56px) 0 clamp(30px,3.4vw,44px)}
.jur-kop h1{max-width:18ch;margin-bottom:12px}
.jur-kop .jur-meta{font-size:15px;color:var(--ink);margin:0}

/* de leeskolom is .wrap .lees, dezelfde als in een artikel */
.jur{padding:clamp(34px,4vw,52px) 0 clamp(64px,7vw,96px)}
.jur p{margin:0 0 1.15em}
.jur ul{margin:0 0 1.35em;padding-left:1.15em}
.jur li{margin-bottom:.5em}
.jur-inleiding{font-size:19px;color:var(--marine);margin-bottom:1.1em}

/* ---- de inhoudsopgave ---- */
.jur-inhoud{background:var(--wit);border:1px solid var(--randje);border-radius:20px;
  padding:22px 26px 18px;margin:clamp(26px,3vw,36px) 0 0}
.jur-inhoud .label{margin-bottom:12px}
.jur-inhoud-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.jur-inhoud a{display:block;padding:6px 0;font-size:15.5px;line-height:1.45;
  color:var(--tekst);text-decoration:none}
.jur-inhoud a:hover{color:var(--accent-diep)}

/* ---- de artikels ---- */
.jur h2{margin:clamp(34px,4vw,46px) 0 .6em;padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--randje);font-size:clamp(22px,2.3vw,27px);scroll-margin-top:96px}
.jur h3{font-size:18.5px;font-weight:500;color:var(--marine);margin:1.9em 0 .45em}
.jur h2 + h3{margin-top:1.2em}
.artikel-nr{display:block;font-size:12.5px;font-weight:500;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--accent-diep);margin-bottom:8px}

/* ---- een blokje waar het onderscheid voor consumenten telt ---- */
.jur-blok{background:var(--linnen);border-radius:16px;padding:20px 24px;margin:0 0 1.5em}
.jur-blok p:last-child{margin-bottom:0}
.jur-blok-kop{display:block;font-size:12.5px;font-weight:500;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--accent-diep);margin-bottom:8px}

/* ---- de tabel: breder dan de leeskolom, op een telefoon kaartjes onder elkaar ---- */
.jur-tabel-rol{margin:0 0 1.6em;width:min(860px,calc(100vw - 2*var(--pad)));
  margin-left:50%;transform:translateX(-50%)}
.jur-tabel{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;
  background:var(--wit);border:1px solid var(--randje);border-radius:16px;overflow:hidden}
.jur-tabel th,.jur-tabel td{text-align:left;vertical-align:top;padding:13px 16px;
  border-bottom:1px solid var(--randje)}
.jur-tabel thead th{background:var(--linnen);color:var(--marine);font-weight:500;
  font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase}
.jur-tabel tbody tr:last-child td{border-bottom:0}
.jur-tabel td:first-child{color:var(--marine);font-weight:500}

/* ---- het contactblok onderaan: licht, want de voet is al marine ---- */
.jur-contact{background:var(--wit);border:1px solid var(--randje);border-left:3px solid var(--amber);
  border-radius:20px;padding:24px 28px;margin:clamp(40px,5vw,60px) 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 34px}
.jur-contact p{margin:0;font-size:16px;color:var(--ink)}
.jur-contact strong{color:var(--marine);font-weight:500}
.jur-contact a[href^="tel"]{white-space:nowrap}

@media (max-width:720px){
  .jur-inhoud-lijst{grid-template-columns:1fr}
}
@media (max-width:640px){
  .jur-contact{grid-template-columns:1fr}
  .jur-tabel{border-radius:16px}
  .jur-tabel thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .jur-tabel tbody,.jur-tabel tr,.jur-tabel td{display:block;width:100%}
  .jur-tabel tr{border-bottom:1px solid var(--randje)}
  .jur-tabel tr:last-child{border-bottom:0}
  .jur-tabel td{border-bottom:0;padding:5px 18px}
  .jur-tabel td:first-child{padding-top:18px;font-size:17.5px}
  .jur-tabel td:last-child{padding-bottom:18px}
  .jur-tabel td::before{content:attr(data-kop);display:block;font-size:11.5px;
    letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
  .jur-tabel td:first-child::before{content:none}
}

/* =================================================================
   De inschrijving op Coach Jan Magazine (18 september 2026)

   Eén component voor heel de site: dezelfde html, dezelfde klassen,
   dezelfde weg naar Simplero (contact.js -> api/testen.php). Hier staat
   alleen hoe ze eruitziet op de blog en in een artikel. De losse
   pagina's buiten de blog dragen hun eigen stijlblok en herhalen deze
   regels daar, net zoals ze dat met de balk en de voet doen.

   Voornaam, e-mailadres en de knop staan op één regel zolang er plaats
   is, en vallen daaronder onder elkaar.
   ================================================================= */
.cj-inschrijf{margin:0}
.cj-velden{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
/* 140 als basis, niet 190: dan passen twee velden en de knop ook in een halve
   kolom op één regel. Ze groeien daarna mee tot de ruimte op is. */
.cj-veld{flex:1 1 140px;min-width:0;display:flex}
.cj-veld input{width:100%;font-family:inherit;font-size:16px;font-weight:300;color:var(--marine);
  background:var(--wit);border:1px solid var(--randje);border-radius:12px;padding:14px 16px}
.cj-veld input::placeholder{color:#5C6B79;opacity:1}
.cj-veld input:focus-visible{outline:2px solid var(--accent-diep);outline-offset:1px}
.cj-velden .btn{flex:0 0 auto;padding:14px 26px;font-size:15.5px;border-radius:12px;white-space:nowrap}
.cj-velden .btn[disabled]{opacity:.7;cursor:default;transform:none;box-shadow:none}
/* op een smal scherm alles onder elkaar, en de knop over de volle breedte:
   een knop die half onder een veld hangt, leest als een fout */
@media (max-width:560px){
  .cj-veld,.cj-velden .btn{flex:1 1 100%}
}
/* de honingpot: mensen zien dit veld niet, robots vullen het in */
.cj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cj-fout{font-size:14.5px;color:#9A3412;margin:10px 0 0;min-height:1.2em}
.cj-fout:empty{margin:0;min-height:0}
/* één doorlopende regel over de volle breedte van het blok, en kleiner dan de
   rest: het is een voetnoot, geen alinea */
.cj-fijn{font-size:13px;line-height:1.5;color:var(--ink);margin:16px 0 0;max-width:none}
/* na het versturen: één rustige regel op de plaats van het formulier */
.cj-inschrijf--klaar{border-left:2px solid var(--amber);padding:2px 0 2px 18px}
.cj-klaar-titel{font-size:19px;font-weight:500;color:var(--marine);margin:0 0 4px;outline:0}
.cj-klaar-bij{font-size:16px;color:var(--ink);margin:0}

/* ---- de uitnodiging onder een artikel ----
   Het warmste moment op heel de site: iemand heeft net iets van Jan
   gelezen. Daarom staat ze meteen onder de tekst, in de leeskolom, en
   niet ergens onderaan de pagina. */
.art-magazine{background:var(--linnen);border-radius:20px;padding:clamp(26px,3.2vw,36px);margin:2.6em 0 2.2em}
.art-magazine .label{color:var(--accent-diep);margin-bottom:12px}
.art-body .art-magazine h2{font-size:clamp(23px,2.4vw,28px);margin:0 0 10px;letter-spacing:-.3px}
.art-body .art-magazine p{font-size:16.5px;line-height:1.6;font-weight:300;color:var(--ink);margin:0;max-width:42ch}
/* de tekening naast de uitnodiging, kleiner dan op een kamerpagina: hier zitten
   we in de leeskolom en moet de tekst de baas blijven */
.art-magazine-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:clamp(18px,3vw,30px);align-items:center;margin-bottom:24px}
.art-magazine-kop figure{margin:0}
.art-magazine-kop figure img{width:100%;height:auto;display:block;aspect-ratio:1000/666}
@media (max-width:560px){
  .art-magazine-kop{grid-template-columns:1fr;gap:18px}
  .art-magazine-kop figure img{max-width:260px}
}
.art-magazine .cj-veld input{background:var(--wit)}
.art-body .art-magazine .cj-fout{font-size:14.5px;margin:10px 0 0;color:#9A3412}
.art-body .art-magazine .cj-fijn,
.blog-magazine .cj-fijn{font-size:13px;line-height:1.5;margin:16px 0 0;max-width:none;color:var(--ink)}
.art-body .art-magazine .cj-klaar-bij{font-size:16px;margin:0}

/* ---- het redactionele blok op de blogindex ----
   Geen formulier: op de blog is de volgende stap /magazine/, niet een
   invulveld. Het staat tussen Net verschenen (marine) en de voet
   (marine), dus op de paginagrond: twee marine vlakken raken elkaar nooit. */
.blog-magazine{background:var(--bg);padding:clamp(44px,5vw,68px) 0}
.blog-magazine .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.blog-magazine .label{color:var(--accent-diep)}
.blog-magazine h2{font-size:clamp(25px,2.8vw,33px);margin:0 0 12px}
.blog-magazine p{font-size:18px;line-height:1.6;color:var(--ink);max-width:40ch;margin:0 0 20px}
.blog-magazine .textlink{font-size:17px}
.blog-magazine figure{margin:0}
.blog-magazine figure img{width:100%;height:auto;display:block;aspect-ratio:1000/666}
/* dezelfde strook, maar met het formulier erin: op een kamerpagina is dit de
   enige plek om mee te lezen, op de blogindex volstaat de link */
.blog-magazine--form .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.blog-magazine--form p{margin-bottom:24px}
.blog-magazine--form .cj-inschrijf{max-width:34em}
@media (max-width:820px){
  .blog-magazine .wrap{grid-template-columns:1fr;gap:26px}
  .blog-magazine figure{order:-1}
  .blog-magazine figure img{max-width:420px}
}

/* ---- de strook boven de voet, op een kamerpagina ----
   Dezelfde plaats als vroeger, maar nu met het echte formulier. */
@media (max-width:900px){
  .brief-grid{grid-template-columns:1fr;gap:18px}
}

/* ---- contrast op linnen ----
   Sinds 20 september is er één tekstamber, --accent-diep (#87521C), en die haalt
   ook op linnen 5,16. De uitzondering voor linnen van 19 september is daarmee weg. */

/* ---- kamerpagina's, correctieronde 23 september 2026 ----
   Ook in deze kamer staat niet meer onder Begin hier in de rechterkolom. Daardoor
   was de artikelkolom op Grenzen, Richting en Regie veel langer dan de herkenning,
   met links een leeg vlak tot aan Hoe wil je hiermee verder. Nu:
   groot scherm  herkenning links, Begin hier rechts (twee gelijke kolommen, dus
                 meer ruimte voor foto, leestijd en titel), daaronder Ook in deze
                 kamer over de volle breedte, in twee kolommen;
   gsm           dezelfde volgorde als vroeger: eerste alinea, Begin hier, Ook in
                 deze kamer, de rest van de herkenning. */
.herken-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"eerst start" "rest start" "ook ook";grid-template-rows:auto 1fr auto}
.kamer-ook{grid-area:ook;margin-top:clamp(40px,4.4vw,56px)}
.kamer-ook .kamer-ooklabel{margin-top:0}
.kamer-ook .kamerarchief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,5vw,72px);border-top:0}
.kamer-ook .kamerarchief li{display:block;padding:0;border-bottom:1px solid var(--randje)}
.kamer-ook .kamerarchief li:nth-child(-n+2){border-top:1px solid var(--randje)}
.kamer-ook .kamerarchief a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:12px 0;height:100%;box-sizing:border-box}
.kamer-ook .ook-titel{font-size:16px;line-height:1.4;color:var(--tekst);flex:1 1 auto}
.kamer-ook .ook-tijd{font-size:14px;color:var(--ink);flex:none;font-variant-numeric:tabular-nums}
.kamer-ook .kamerarchief a:hover .ook-titel{color:var(--accent-diep)}
.kamer-ook .kamerarchief a:focus-visible{outline:2px solid var(--marine);outline-offset:2px;border-radius:2px}
.mini-titel{text-wrap:pretty}
@media (max-width:860px){
  .herken-grid{grid-template-columns:1fr;grid-template-areas:"eerst" "start" "ook" "rest";
    grid-template-rows:auto}
  .kamer-ook{margin-top:0}
  .kamer-ook .kamerarchief{grid-template-columns:1fr}
  .kamer-ook .kamerarchief li:nth-child(2){border-top:0}
  .kamer-ook .kamerarchief a{padding:13px 0;min-height:48px;align-items:center}
  .kamer-ook .ook-titel{font-size:16.5px}
  .kamer-ook .ook-tijd{min-width:3.6em;text-align:right}
  /* de Magazine-tekening op de vijf kamerpagina's (en alleen daar: de strook met
     formulier staat nergens anders) iets kleiner op gsm */
  .blog-magazine--form .wrap{gap:18px}
  .blog-magazine--form figure img{max-width:250px}
}
/* De twee vervolgstapkaarten op een kamerpagina als paar. De samenkaart heeft een
   amberen bovenrand van 3 pixels tegen 1 bij de zelfkaart: 2 pixels minder
   binnenruimte, dan staan de twee labels en koppen op dezelfde hoogte. */
.kamer-herken + .routes .route-kaart--samen{padding-top:calc(clamp(26px,3vw,38px) - 2px)}
/* Grenzen: links het spiekbladformulier met de fijne regel van twee lijnen onder de
   knop, rechts de knop met één tekstlink eronder. Op groot scherm krijgt die link
   evenveel ruimte onder zich als de fijne regel, zodat de twee knoppen op één
   lijn staan. Op gsm staan de kaarten onder elkaar en geldt dit niet. */
@media (min-width:861px){
  .kamer-herken + .routes--bij-los .route-kaart--samen .route-bij{margin-bottom:16px}
}
/* Staan er in Ook in deze kamer minder dan vier stukken (nu alleen Keuzes, met één),
   dan hoort die korte lijst op groot scherm links onder de herkenning, in plaats
   van als losse regel over de volle breedte. Zonder :has blijft het de volle breedte. */
@media (min-width:861px){
  .herken-grid:has(.kamer-ook--kort){grid-template-areas:"eerst start" "rest start" "ook start";
    grid-template-rows:auto auto 1fr}
  .kamer-ook--kort{margin-top:32px}
  .kamer-ook--kort .kamerarchief{grid-template-columns:1fr}
  .kamer-ook--kort .kamerarchief li:nth-child(2){border-top:0}
}

/* ============================================================
   Blogpad, 25 september 2026 (Jan)
   - blogindex: Net verschenen als rustig leesblok in plaats van het
     donkere anker met zes kale titels; een link naar alle artikels
   - kamerpagina: de herkenning in één leeskolom, Begin hier als eigen band
     met drie volwaardige kaarten, Verder lezen als één lijst met uitleg
   - /blog/alle-artikels/: alles, per kamer
   De oude klassen (.kamer-start, .minilijst, .kamer-ook, .verschenenlijst)
   blijven staan voor het geval een oude pagina ze nog draagt.
   ============================================================ */

/* ---- kamerpagina: de herkenning ---- */
.herken-los{max-width:64ch}
.herken-los p{max-width:none}

/* ---- kamerpagina: Begin hier ---- */
.kamer-begin{background:var(--linnen);border-top:1px solid var(--randje);
  border-bottom:1px solid var(--randje);padding:clamp(36px,4.2vw,56px) 0 clamp(40px,4.6vw,60px)}
.kamer-begin .label{margin-bottom:8px}
.kamer-beginbij{color:var(--ink);font-size:16.5px;margin:0}
.artikels--begin{padding-top:22px}
.artikels--begin .artikel h3{font-size:20px}
.artikel .samenvatting{font-size:15.5px;line-height:1.55;color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ---- Verder lezen, en de lijsten op /blog/alle-artikels/ ---- */
.kamer-verder{padding:clamp(40px,4.6vw,60px) 0 clamp(8px,1.2vw,18px)}
.verderlijst{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--randje);max-width:860px}
.verderlijst li{border-bottom:1px solid var(--randje)}
.verderlijst a{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"reeks meta" "titel meta" "bij meta";
  column-gap:32px;padding:16px 0 17px;text-decoration:none;color:inherit}
.verderlijst .reeksmerk{grid-area:reeks;margin-bottom:6px}
.verder-titel{grid-area:titel;font-size:18px;font-weight:500;line-height:1.35;color:var(--marine);margin:0}
.verder-bij{grid-area:bij;font-size:15.5px;line-height:1.5;color:var(--ink);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.verder-meta{grid-area:meta;font-size:14px;color:var(--ink);white-space:nowrap;
  padding-top:3px;font-variant-numeric:tabular-nums}
.verderlijst a:hover .verder-titel{color:var(--accent-diep)}
.verderlijst a:focus-visible{outline:2px solid var(--marine);outline-offset:3px;border-radius:3px}
.verder-alles{margin:20px 0 0}
@media (max-width:640px){
  .artikels--begin .artikel .samenvatting{-webkit-line-clamp:3}
  .verderlijst a{grid-template-columns:minmax(0,1fr);grid-template-areas:"reeks" "titel" "bij" "meta";
    padding:15px 0 16px}
  .verder-titel{font-size:17px}
  .verder-meta{padding-top:6px;font-size:13.5px}
}

/* ---- blogindex: Net verschenen als leesblok ---- */
.netverschenen--lees{background:var(--bg);padding:clamp(48px,5.2vw,76px) 0 clamp(44px,4.8vw,64px);
  border-bottom:1px solid var(--randje)}
.netverschenen--lees .label{color:var(--marine)}
.netverschenen--lees .label::before{background:var(--amber)}
.nv-kop{font-size:clamp(26px,2.8vw,34px);margin:10px 0 26px}
.nv-groot{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--wit);
  border:1px solid var(--randje);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease}
.nv-beeld{margin:0;background:var(--linnen)}
.nv-groot .nv-beeld img{width:100%;height:100%;min-height:300px;object-fit:cover}
.nv-groot .nv-tekst{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.nv-groot h3{font-size:clamp(23px,2.3vw,29px);line-height:1.25;margin:8px 0 12px}
.nv-groot p:not(.nv-meta){font-size:16.5px;line-height:1.6;color:var(--ink);margin:0 0 18px}
.nv-meta{font-size:13.5px;color:var(--ink);margin:0}
.nv-verder{align-self:flex-start;font-size:15px;color:var(--accent-diep);
  border-bottom:1.5px solid var(--amber);padding-bottom:2px}
.nv-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.nv-klein{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;align-items:center;
  background:var(--wit);border:1px solid var(--randje);border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;padding-right:20px;
  transition:transform .25s ease,box-shadow .25s ease}
.nv-klein .nv-beeld{height:100%}
.nv-klein .nv-beeld img{width:168px;height:100%;min-height:118px;object-fit:cover}
.nv-klein .nv-tekst{padding:14px 0}
.nv-klein h3{font-size:18px;line-height:1.3;margin:5px 0 0}
.nv-groot:hover,.nv-klein:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,31,46,.07)}
.nv-groot:hover h3,.nv-klein:hover h3{color:var(--accent-diep)}
.nv-alles{margin:26px 0 0}
.netverschenen--lees + .blog-magazine{border-top:0}
@media (max-width:860px){
  .nv-groot{grid-template-columns:1fr}
  .nv-groot .nv-beeld img{min-height:0;aspect-ratio:16/10}
  .nv-twee{grid-template-columns:1fr;gap:14px;margin-top:14px}
}
@media (max-width:420px){
  .nv-klein{grid-template-columns:104px minmax(0,1fr);gap:14px;padding-right:14px}
  .nv-klein .nv-beeld img{width:104px;min-height:100px}
  .nv-klein h3{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){.nv-groot,.nv-klein{transition:none}
  .nv-groot:hover,.nv-klein:hover{transform:none}}

/* ---- /blog/alle-artikels/ ---- */
.alle-kop{padding-bottom:40px}
.alle-sprong{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0}
.alle-sprong a{display:inline-flex;gap:8px;align-items:baseline;padding:8px 16px;min-height:44px;
  border:1px solid var(--randje);border-radius:999px;background:var(--wit);text-decoration:none;
  color:var(--marine);font-size:15.5px;line-height:26px}
.alle-sprong a span{color:var(--ink);font-size:13.5px}
.alle-sprong a:hover{border-color:var(--amber);color:var(--accent-diep)}
.alle-kamer{padding:clamp(36px,4.2vw,56px) 0;border-top:1px solid var(--randje)}
.alle-kamer .kamerlabel{margin:0 0 8px}
.alle-kamer h2{font-size:clamp(24px,2.6vw,31px);margin:0 0 6px}
.alle-kamer h2 a{color:inherit;text-decoration:none}
.alle-kamer h2 a:hover{color:var(--accent-diep)}
.alle-kamer:last-of-type{padding-bottom:clamp(48px,5vw,72px)}

/* ---- kamerpagina: de vier andere vragen op gsm (Jan, 25 september 2026) ----
   Twee smalle kolommen maakten de zinnen klein en onrustig. Op gsm nu één kaart
   per rij: de tekening klein links, de vraag ruim rechts. Desktop: de drie andere kamers naast elkaar, over de hele breedte. */
@media (max-width:640px){
  .burenrij{grid-template-columns:1fr;gap:12px}
  .buurkamer{flex-direction:row;align-items:stretch}
  .buurbeeld{flex:0 0 116px;height:auto;min-height:84px;padding:10px 10px;
    border-bottom:0;border-right:1px solid var(--randje)}
  .buurtekst{flex:1;justify-content:center;padding:14px 16px 15px;gap:4px}
  .buurkamer .kamerlabel{font-size:12px;letter-spacing:1.8px}
  .buurbeeld img{height:64px;width:100%}
  .buurzin{font-size:17.5px;line-height:1.3;text-wrap:pretty}
}

/* ---- de uitspraak in een artikel (Jan, 25 september 2026) ----
   Twee zinnen: elke zin op een eigen regel. Eén lange zin: gelijkmatig verdeeld
   over de regels, zodat er geen los woord onderaan blijft hangen. */
.art-uitspraak blockquote p{text-wrap:balance}
.art-uitspraak .uitspraak-zin{display:block}

/* ---- vier kamers (26 september 2026) ----
   Bruggen bovenaan een kamerpagina: rustige tekstlinks voor wie zich in meer dan
   één zin herkent. De regel onder de stroken van de blog en de pagina
   /als-er-iets-veranderd-is/: de route na verandering, bewust geen kamer. */
.kamer-bruggen{max-width:64ch;margin-top:28px;padding-top:20px;border-top:1px solid var(--randje)}
.kamer-brug{font-size:16px;line-height:1.55;color:var(--bijtekst);margin:0 0 .7em}
.kamer-brug:last-child{margin-bottom:0}
.kamer-brug .textlink{display:inline}
.kamers-verandering{margin:22px 0 0;font-size:17px;line-height:1.5;color:var(--marine)}
.kamers-verandering .textlink{display:inline;margin-left:4px}
.verandering-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:30px 0 0}
.verandering-knoppen .btn{padding:14px 28px;border-radius:10px;text-decoration:none}
.verandering-boek{padding-top:clamp(28px,3vw,44px)}
.verandering-boek .label{margin-bottom:10px}

/* de kleine cirkel van Zo werk ik (26 september 2026), bron: gereedschap/cirkel.py */
.minicirkel{display:block;width:100%;height:auto;overflow:visible}
.minicirkel .schijf{fill:#E8D3B8}
.minicirkel .inkt{fill:#0E1F2E}
.minicirkel .lijn{fill:none;stroke:#0E1F2E;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.minicirkel .spaak{stroke:#C17F3A;stroke-width:1.5;stroke-dasharray:1.5 6;stroke-linecap:round}
.minicirkel .spoor{fill:none;stroke:#C17F3A;stroke-width:5;stroke-linecap:round;opacity:0}
.minicirkel .spoor.is-actief{opacity:1}
.minicirkel .vang{fill:transparent}
.minicirkel .halo{fill:#E8D3B8;opacity:0}
.minicirkel .stip{fill:#F7F3EE;stroke:#0E1F2E;stroke-width:2.4;transform-box:fill-box;transform-origin:center}
.minicirkel .beweging.is-actief .halo{opacity:1}
.minicirkel .beweging.is-actief .stip{fill:#C17F3A;stroke:#C17F3A;transform:scale(1.2)}
.minicirkel .beweging:focus{outline:none}
.minicirkel .beweging:focus-visible .vang{stroke:#0E1F2E;stroke-width:2.5}
@media (hover:hover){.minicirkel .beweging:hover .halo{opacity:.7}}
.minicirkel .midden{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:22px;fill:#0E1F2E;text-anchor:middle}
.minicirkel .midden--naam{display:none;font-size:28px}
.minicirkel.heeft-keuze .midden--vraag{display:none}
.minicirkel.heeft-keuze .midden--naam{display:block}
.minicirkel--donker .inkt{fill:#F7F3EE}
.minicirkel--donker .lijn{stroke:#F7F3EE}
.minicirkel--donker .spaak{stroke:#D9A066}
.minicirkel--donker .stip{fill:#0E1F2E;stroke:#F7F3EE}
.minicirkel--donker .halo{fill:#D9A066}
.minicirkel--donker .beweging:focus-visible .vang{stroke:#F7F3EE}
/* de strook Zo werk ik op de kamerpagina's en de route na een verandering */
.werkstrook{padding:clamp(52px,7vw,88px) 0;border-top:1px solid var(--randje)}
.werkstrook .wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center}
.werkstrook-beeld{margin:0;max-width:320px}
.werkstrook-tekst{max-width:36em}
.werkstrook .label{margin:0 0 14px}
.werkstrook-kop{font-family:Kanit,system-ui,sans-serif;font-weight:600;font-size:clamp(23px,2.4vw,29px);line-height:1.3;color:var(--marine);margin:0 0 14px}
.werkstrook-tekst p{margin:0 0 14px}
.werkstrook-link{margin:6px 0 0 !important;font-size:16.5px}
@media (max-width:720px){.werkstrook .wrap{grid-template-columns:1fr}.werkstrook-beeld{max-width:260px;margin:0 auto}}