/* ==================================================================
   aanhuispersonaltraining.nl — stijlblad "Plattegrond"
   Bouwtekening: rasterlijnen, gestippelde kaders, maatvoering in
   monospace, één fel accent. Rechte hoeken, geen ronding.
   Klassevoorvoegsel: r-
   ================================================================== */

:root{
  --beton:#2f3336;
  --beton-diep:#1d2022;
  --geel:#ffc400;
  --geel-tekst:#7d6000;   /* geel als tekst op lichte vlakken (>=4.5:1) */
  --kalk:#f2f1ec;
  --kalk-warm:#e6e4db;
  --staal:#565d62;
  --lijn:#cbc7bc;
  --wit:#ffffff;
  --mono:"Consolas","DejaVu Sans Mono","Courier New",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--kalk);color:var(--beton-diep);
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-size:17px;line-height:1.68;
}

h1,h2,h3,h4{
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-weight:700;color:var(--beton-diep);margin:0 0 .5em;
  line-height:1.16;letter-spacing:-.018em;
}
h1{font-size:clamp(2rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.5rem,2.9vw,2.15rem)}
h3{font-size:1.14rem;letter-spacing:-.005em}
p{margin:0 0 1.05em}
a{color:var(--geel-tekst)}
a:hover{color:var(--beton-diep)}
img{display:block;max-width:100%;height:auto}

.r-veld{width:min(1180px,100% - 40px);margin-inline:auto}
.r-kolom{width:min(700px,100% - 40px);margin-inline:auto}

/* maatvoeringslabel in monospace — nergens anders in de reeks */
.r-maat{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--geel-tekst);
}
.r-maat--licht{color:var(--geel)}

/* --- kopbalk --- */
.r-kop{background:var(--beton-diep);position:sticky;top:0;z-index:60}
.r-kop__binnen{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0;flex-wrap:wrap}
.r-logo{
  display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;
  font-weight:700;font-size:1.02rem;letter-spacing:-.01em;padding:14px 0;
}
.r-logo i{
  display:block;width:4px;height:22px;background:var(--geel);flex:none;
}
.r-logo span{font-weight:400;color:#b6b3aa}
.r-nav{display:flex;flex-wrap:wrap}
.r-nav a{
  color:#c9c6bc;text-decoration:none;font-size:.82rem;padding:14px 13px;
  font-family:var(--mono);letter-spacing:.04em;
}
.r-nav a:hover{background:#2a2e30;color:#fff}
.r-nav a[aria-current]{background:var(--geel);color:var(--beton-diep);font-weight:700}

/* --- opening met rasterachtergrond --- */
.r-start{
  background:var(--beton-diep);color:#d8d6cd;padding:0;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:44px 44px;
}
.r-start__raster{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.r-start__tekst{padding:66px 44px 66px 0}
.r-start h1{color:#fff;max-width:15ch}
.r-start p{color:#bcb9b0;max-width:44ch}
.r-start__film{position:relative;border-left:1px dashed rgba(255,255,255,.28)}
.r-start__film video{width:100%;height:100%;object-fit:cover;display:block;min-height:340px}
.r-start__stempel{
  position:absolute;left:18px;bottom:18px;background:var(--geel);color:var(--beton-diep);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;padding:5px 10px;font-weight:700;
}

/* --- knoppen, recht --- */
.r-doe{
  display:inline-block;text-decoration:none;font-weight:700;font-size:.86rem;
  font-family:var(--mono);letter-spacing:.06em;padding:14px 24px;
  background:var(--geel);color:var(--beton-diep);border:2px solid var(--geel);
}
.r-doe:hover{background:#e0ac00;border-color:#e0ac00;color:var(--beton-diep)}
.r-doe--lijn{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.r-doe--lijn:hover{background:#fff;color:var(--beton-diep);border-color:#fff}
.r-doe--donker{background:var(--beton-diep);border-color:var(--beton-diep);color:#fff}
.r-doe--donker:hover{background:#000;border-color:#000;color:#fff}
.r-doeknoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* --- secties --- */
.r-strook{padding:66px 0;border-top:1px solid var(--lijn)}
.r-strook--warm{background:var(--kalk-warm)}
.r-strook--donker{background:var(--beton);color:#d5d3ca;border-top-color:#3d4245}
.r-strook--donker h2,.r-strook--donker h3{color:#fff}
.r-strook--donker a{color:var(--geel)}
/* witte kaarten binnen een donkere strook houden hun eigen kleuren */
.r-strook--donker .r-partij h3{color:var(--beton-diep)}
.r-strook--donker .r-partij a.r-doe{color:#fff}

.r-titel{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;margin-bottom:40px}
.r-titel__code{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  background:var(--beton-diep);color:var(--geel);padding:6px 9px;white-space:nowrap;
}
.r-titel p{color:var(--staal);max-width:56ch;margin:.6em 0 0}
.r-strook--donker .r-titel p{color:#adaba2}

/* --- ruimtekaarten met gestippeld kader --- */
.r-ruimtes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.r-ruimte{
  background:var(--wit);border:1px dashed var(--lijn);padding:0;
  display:flex;flex-direction:column;
}
.r-ruimte__plan{background:var(--kalk-warm);border-bottom:1px dashed var(--lijn);padding:18px}
.r-ruimte__plan svg{display:block;width:100%;height:auto}
.r-ruimte__tekst{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.r-ruimte h3{margin:.35em 0 .4em}
.r-ruimte p{font-size:.94rem;color:#43494c;margin:0 0 14px}
.r-ruimte dl{margin:0;font-size:.86rem;display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
.r-ruimte dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--geel-tekst);padding-top:3px}
.r-ruimte dd{margin:0;color:#43494c}

/* --- checklijst --- */
.r-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--lijn)}
.r-lijst li{background:var(--kalk);padding:20px 22px}
.r-strook--donker .r-lijst{background:#3d4245}
.r-strook--donker .r-lijst li{background:var(--beton)}
.r-lijst h3{font-size:1.02rem;margin-bottom:.3em}
.r-lijst p{font-size:.93rem;color:#43494c;margin:0}
.r-strook--donker .r-lijst p{color:#b4b2a9}

/* --- aanbieders --- */
.r-partijen{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--beton-diep);border:2px solid var(--beton-diep)}
.r-partij{background:var(--wit);padding:26px 24px 28px;display:flex;flex-direction:column}
.r-partij__vlag{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;padding:5px 9px;align-self:flex-start;margin-bottom:16px}
.r-partij h3{margin-bottom:.4em}
.r-partij ul{list-style:none;margin:0 0 20px;padding:0}
.r-partij li{position:relative;padding-left:19px;font-size:.93rem;margin-bottom:8px;color:#43494c}
.r-partij li::before{content:"+";position:absolute;left:0;color:var(--geel-tekst);font-family:var(--mono);font-weight:700}
.r-partij .r-doe{margin-top:auto;align-self:flex-start;font-size:.76rem;padding:11px 18px}

/* --- tabelachtige rij --- */
.r-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.r-cel{background:var(--kalk);padding:22px 20px}
.r-cel b{display:block;font-size:1.9rem;line-height:1;margin-bottom:6px;font-family:var(--mono);color:var(--beton-diep)}
.r-cel span{font-size:.8rem;color:var(--staal)}

/* --- vragen --- */
.r-vragen{max-width:780px;border-top:2px solid var(--beton-diep)}
.r-vragen details{border-bottom:1px solid var(--lijn)}
.r-vragen summary{
  cursor:pointer;list-style:none;padding:18px 44px 18px 0;position:relative;
  font-weight:700;font-size:.99rem;
}
.r-vragen summary::-webkit-details-marker{display:none}
.r-vragen summary::after{
  content:"+";position:absolute;right:6px;top:16px;font-family:var(--mono);
  font-size:1.3rem;color:var(--geel-tekst);
}
.r-vragen details[open] summary::after{content:"–"}
.r-vragen p{padding:0 0 18px;margin:0;color:#43494c}

/* --- stukken --- */
.r-stukken{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.r-stuk{background:var(--wit);border:1px solid var(--lijn);display:flex;flex-direction:column}
.r-stuk img{aspect-ratio:16/10;object-fit:cover;width:100%}
.r-stuk__tekst{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.r-stuk h3{font-size:1.04rem;margin-bottom:.35em}
.r-stuk h3 a{color:var(--beton-diep);text-decoration:none}
.r-stuk h3 a:hover{color:var(--geel-tekst)}
.r-stuk p{font-size:.92rem;color:#43494c;margin:0 0 14px}
.r-stuk__link{margin-top:auto;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-decoration:none}

/* --- artikel --- */
.r-stukkop{background:var(--beton-diep);color:#d8d6cd;padding:52px 0 56px}
.r-stukkop h1{color:#fff}
.r-tekst{background:var(--wit);border:1px solid var(--lijn);padding:40px 44px;margin-top:-26px}
.r-tekst h2{margin-top:1.5em}
.r-tekst ul,.r-tekst ol{padding-left:1.2em}
.r-tekst li{margin-bottom:.45em}
.r-kader{
  border-left:4px solid var(--geel);background:var(--kalk-warm);
  padding:20px 24px;margin:1.7em 0;
}
.r-kader p:last-child{margin-bottom:0}

/* --- afsluiting --- */
.r-afsluiting{background:var(--geel);color:var(--beton-diep);padding:56px 0;text-align:center;border-top:1px solid var(--lijn)}
.r-afsluiting h2{color:var(--beton-diep)}
.r-afsluiting p{max-width:48ch;margin:0 auto 6px;color:#3b3524}

/* --- voet --- */
.r-voet{background:var(--beton-diep);color:#a5a29a;padding:46px 0 22px;font-size:.9rem}
.r-voet h4{color:#fff;font-family:var(--mono);font-size:.74rem;letter-spacing:.11em;margin-bottom:.9em}
.r-voet a{color:#cbc8bf;text-decoration:none}
.r-voet a:hover{color:var(--geel)}
.r-voet__kolommen{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:34px;margin-bottom:28px}
.r-voet__slot{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;font-size:.8rem;color:#8b8880}

@media(max-width:940px){
  .r-start__raster{grid-template-columns:1fr}
  .r-start__tekst{padding:48px 0 40px}
  .r-start__film{border-left:0;border-top:1px dashed rgba(255,255,255,.28)}
  .r-ruimtes,.r-partijen,.r-stukken,.r-voet__kolommen,.r-lijst{grid-template-columns:1fr}
  .r-rij{grid-template-columns:repeat(2,1fr)}
  .r-titel{grid-template-columns:1fr;gap:12px}
  .r-tekst{padding:26px 20px}
  .r-strook{padding:46px 0}
}