/* =====================================================================
   SCOUTR 2.0 - de startpagina

   Dit stond tot 14 september 2026 als twee <style>-blokken IN
   themes/scoutr/index.php: 375 regels, 33 hexwaarden, 360 losse
   pixelmaten en 47 keer !important, buiten het bereik van elke controle
   die over de CSS-bestanden loopt. Vandaar hierheen.

   De namen --roze, --nacht en dergelijke blijven bestaan: ze wijzen door
   naar de tokens en houden de driehonderd regels hieronder leesbaar.
   Nieuwe regels gebruiken de --sc-namen rechtstreeks.

   Wordt in main/style.php alleen op de startpagina geladen.
   ===================================================================== */

body > #container{padding:0}#nav-not-logged-in,footer#footer{display:none !important;visibility:hidden !important}

/* Het thema kleurt p, li en dergelijke bijna zwart. Binnen de
   landingspagina erven ze de kleur van hun blok. :where() houdt het
   gewicht op nul, zodat elke eigen regel hieronder nog wint. */
.sc-l :where(p,li,dd,dt,span,small,strong,b,i,a,h1,h2,h3,h4,article,div){color:inherit}
.sc-l{
  /* 2026-09-14: hier stonden veertien eigen hexwaarden, een duplicaat van
     tokens.css. Twee bronnen van waarheid liepen al uiteen (--zacht was
     #A8B3AC tegen --sc-tekst-zacht #C2CDC6, dat laatste haalt 9.42 op
     kampdoek tegen 7.5). De voorpagina is de maatstaf voor de rest van de
     site en moet dus uit dezelfde tokens lezen.
     Deze namen blijven bestaan zodat de 300 regels hieronder niet hoeven
     te veranderen; ze wijzen nu alleen door. */
  --roze:var(--sc-roze);
  --roze-op:var(--sc-roze);
  --roze-vlak:var(--sc-roze-vlak);
  --roze-vlak-op:var(--sc-roze-vlak-op);
  --nacht:var(--sc-nachtgroen);
  --kampdoek:var(--sc-kampdoek);
  --touw:var(--sc-touw);
  --den:var(--sc-den);
  --tekst:var(--sc-tekst);
  --zacht:var(--sc-tekst-zacht);
  --lijn:var(--sc-rand-stil);
  --band:var(--sc-band);

  background:var(--nacht);color:var(--tekst);
  --sc-eigen-letter: var(--sc-font-tekst);
  font-size:var(--sc-t-lees);line-height:1.6;-webkit-font-smoothing:antialiased;
  /* clip in plaats van hidden: hidden maakt van .sc-l een scrollcontainer,
     en dan blijft de plakkende kopbalk niet plakken. */
  overflow-x:clip;
}
.sc-l *{box-sizing:border-box}
.sc-l h1,.sc-l h2,.sc-l h3{--sc-eigen-letter: var(--sc-font-kop);
  font-weight:800;letter-spacing:-.025em;margin:0;color:var(--tekst);text-wrap:balance}
.sc-l p{margin:0}
.sc-l a{color:inherit;text-decoration:none}
.sc-l button{font:inherit}
.sc-l a:focus-visible,.sc-l button:focus-visible{outline:2px solid var(--touw);outline-offset:3px;border-radius:var(--sc-rond-sm)}
.sc-l img{max-width:100%}
.sc-l ul,.sc-l ol,.sc-l dl{margin:0;padding:0;list-style:none}
.sc-wrap{max-width:1060px;margin:0 auto;padding:0 var(--sc-r-6)}

/* ---------- rollende band ---------- */
.sc-band{height:16px;background:var(--band);background-size:96px 100%;animation:sc-schuif 6s linear infinite}
.sc-band--dun{height:9px;animation-duration:9s}
@keyframes sc-schuif{to{background-position:-96px 0}}

/* ---------- kop ---------- */
.sc-kopbalk{position:sticky;top:0;z-index:30;background:rgba(var(--sc-nachtgroen-rgb), .92);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--lijn)}
.sc-l .sc-kop{display:flex;align-items:center;justify-content:space-between;padding:var(--sc-r-4) 0;gap:var(--sc-r-5)}
.sc-l .sc-kop .sc-merk{display:inline-flex;align-items:center;justify-content:center;
  background:var(--tekst);border-radius:var(--sc-rond-lg);padding:var(--sc-r-2) var(--sc-r-3);
  box-shadow:0 2px 0 rgba(var(--sc-zwart-rgb), .35);transition:transform .18s ease}
.sc-l .sc-kop .sc-merk:hover{transform:rotate(-2deg) scale(1.03)}
.sc-l .sc-kop .sc-merk img{height:44px;width:auto;display:block}
.sc-l .sc-nav .sc-navknop{background:var(--roze-vlak);color:var(--sc-wit);font-weight:700;font-size:var(--sc-t-base);
  padding:var(--sc-r-3) var(--sc-r-5);border-radius:var(--sc-rond-pil);min-height:var(--sc-raak);display:inline-flex;align-items:center;
  white-space:nowrap;line-height:1}
.sc-l .sc-nav .sc-navknop:hover{background:var(--roze-vlak-op);color:var(--sc-wit)}
.sc-l .sc-nav a{position:relative;padding:var(--sc-r-2) 0}
.sc-l .sc-nav a:not(.sc-navknop)::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--roze);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease}
.sc-l .sc-nav a:not(.sc-navknop):hover::after{transform:scaleX(1)}
html,body{scroll-behavior:smooth}
[id]{scroll-margin-top:86px}
.sc-l .sc-merk{display:flex;align-items:center}
.sc-l .sc-merk img{height:46px;width:auto;display:block}
/* Het thema kleurt elk <nav> zwart met rgba(0,0,0,.5) en zet er een
   regelhoogte van 58px op. Dat gaf een zwarte doos achter de navigatie. */
.sc-l .sc-nav{display:flex;gap:var(--sc-r-6);font-size:var(--sc-t-base);align-items:center;
  background:transparent !important;box-shadow:none !important;border:0 !important;
  height:auto !important;line-height:1.4 !important}
.sc-l .sc-nav a{line-height:1.4}
.sc-l .sc-nav a{color:var(--zacht)}
.sc-l .sc-nav a:hover{color:var(--tekst)}

/* ---------- hero ---------- */
.sc-l .sc-hero{position:relative;padding:var(--sc-r-7) 0 var(--sc-r-9);
  display:grid;grid-template-columns:minmax(0,1.02fr) 350px;gap:var(--sc-r-8);align-items:center}
.sc-l .sc-hero h1{font-size:clamp(var(--sc-t-4xl),5.8vw,64px);line-height:1}
.sc-draai{display:grid;grid-template-columns:1fr;color:var(--roze);align-items:start}
.sc-draai b{grid-area:1/1;opacity:0;font-weight:800;
  transform:translateY(.28em);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none}
.sc-draai b.aan{opacity:1;transform:none}
.sc-l .sc-lead{margin-top:var(--sc-r-6);max-width:45ch;color:var(--zacht);font-size:var(--sc-t-xl)}
.sc-l .sc-acties{display:flex;flex-wrap:wrap;gap:var(--sc-r-4);align-items:center;margin-top:var(--sc-r-6)}
.sc-l .sc-knop{background:var(--roze-vlak);color:var(--sc-wit);font-weight:700;font-size:var(--sc-t-xl);padding:var(--sc-r-4) var(--sc-r-6);
  border:0;border-radius:var(--sc-rond-pil);cursor:pointer;display:inline-block;min-height:50px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .15s ease}
.sc-l .sc-knop:hover{background:var(--roze-vlak-op);transform:translateY(-2px) rotate(-1deg);color:var(--sc-wit)}
.sc-l .sc-knop:active{transform:translateY(1px)}
.sc-l .sc-knop-stil{background:none;color:var(--tekst);border:1px solid var(--sc-rand);
  padding:var(--sc-r-4) var(--sc-r-5);border-radius:var(--sc-rond-pil);font-size:var(--sc-t-base);cursor:pointer;min-height:50px;
  display:inline-flex;align-items:center;justify-content:center}
.sc-l .sc-knop-stil:hover{border-color:var(--touw);color:var(--tekst)}
.sc-l .sc-fijn{margin-top:var(--sc-r-4);font-size:var(--sc-t-sm);color:var(--zacht)}

/* vonken van het kampvuur */

/* ---------- kaartenstapel ---------- */
.sc-stapel{position:relative;height:430px;user-select:none}
.sc-kaart{position:absolute;inset:0;background:var(--kampdoek);border:1px solid var(--lijn);
  border-radius:var(--sc-rond-xl);padding:var(--sc-r-4);box-shadow:0 26px 54px rgba(var(--sc-zwart-rgb), .5);
  cursor:grab;touch-action:pan-y;will-change:transform}
.sc-kaart.weg{transition:transform .45s cubic-bezier(.4,0,.6,1),opacity .45s ease;opacity:0}
.sc-kaart:active{cursor:grabbing}
.sc-foto{position:relative;height:100%;border-radius:var(--sc-rond-lg);overflow:hidden;background-size:cover;background-position:center}
.sc-foto.sc-getekend::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(closest-side,var(--sc-vlies-1),transparent) 22% 26%/150px 150px no-repeat,
    radial-gradient(closest-side,rgba(var(--sc-roze-rgb), .16),transparent) 78% 16%/190px 190px no-repeat,
    repeating-linear-gradient(48deg,rgba(var(--sc-wit-rgb), .035) 0 2px,transparent 2px 9px);
  pointer-events:none}
.sc-foto.sc-getekend .sc-tent{position:absolute;left:50%;top:31%;width:132px;height:96px;
  transform:translateX(-50%);opacity:.5}
.sc-foto.sc-getekend .sc-tent i{position:absolute;bottom:0;width:0;height:0;
  border-left:44px solid transparent;border-right:44px solid transparent;
  border-bottom:84px solid rgba(var(--sc-wit-rgb), .13)}
.sc-foto.sc-getekend .sc-tent i:last-child{left:38px;border-left-width:28px;border-right-width:28px;
  border-bottom-color:rgba(var(--sc-roze-rgb), .22)}
.sc-voorbeeld{position:absolute;right:12px;top:12px;z-index:3;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  --sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs) !important;letter-spacing:.14em;
  line-height:1.5 !important;
  background:rgba(var(--sc-diep-rgb),.72);border:1px solid rgba(var(--sc-wit-rgb), .14);
  color:var(--touw);padding:var(--sc-r-2) var(--sc-r-3);border-radius:var(--sc-rond-pil)}
.sc-foto::after{content:"";position:absolute;left:-14%;right:-14%;top:57%;height:24px;transform:rotate(-9deg);
  background:var(--band);background-size:96px 100%;animation:sc-schuif 7s linear infinite}
.sc-vuur{position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(to top,rgba(var(--sc-nachtgroen-rgb), .97),rgba(var(--sc-nachtgroen-rgb), .55) 45%,transparent)}
/* max-width en ellipsis: "3 KM . GENT" naast "VOORBEELD" paste niet
   op een kaart van 304px en de twee liepen over elkaar heen. */
.sc-badge{position:absolute;top:12px;left:12px;--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs) !important;
  line-height:1.5 !important;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:var(--sc-spatie-data);background:rgba(var(--sc-nachtgroen-rgb), .82);border:1px solid var(--lijn);
  padding:var(--sc-r-2) var(--sc-r-3);border-radius:var(--sc-rond-sm);color:var(--touw);z-index:2}
.sc-naam{position:absolute;left:14px;right:14px;bottom:66px;z-index:2;
  --sc-eigen-letter: var(--sc-font-kop);font-weight:800;font-size:var(--sc-t-3xl) !important;line-height:1.1 !important}
.sc-naam small{font-weight:600;font-size:var(--sc-t-base) !important;color:var(--zacht);--sc-eigen-letter: var(--sc-font-tekst)}
.sc-klabel{position:absolute;left:14px;right:14px;bottom:40px;z-index:2;--sc-eigen-letter: var(--sc-font-data);
  font-size:var(--sc-t-xs) !important;line-height:1.5 !important;letter-spacing:var(--sc-spatie-data);background:var(--touw);color:var(--nacht);
  padding:var(--sc-r-1) var(--sc-r-3);border-radius:3px;font-weight:500;width:fit-content;max-width:calc(100% - 28px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-kregel{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;font-size:var(--sc-t-sm) !important;
  line-height:1.4 !important;color:var(--zacht);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-stempel{position:absolute;top:20px;z-index:3;--sc-eigen-letter: var(--sc-font-kop);font-weight:800;
  font-size:var(--sc-t-3xl);padding:var(--sc-r-2) var(--sc-r-4);border:3px solid;border-radius:var(--sc-rond-md);opacity:0}
.sc-stempel.ja{left:18px;color:var(--roze);border-color:var(--roze);transform:rotate(-14deg)}
.sc-stempel.nee{right:18px;color:var(--zacht);border-color:var(--zacht);transform:rotate(14deg)}
/* Een eigen naam. `.sc-knoppen` bestaat ook in scoutr.css, voor een
   rij tekstknoppen die op smalle schermen onder elkaar gaat staan.
   Die regel zette deze drie ronde knoppen in een kolom. */
.sc-kaartknoppen{display:flex !important;flex-direction:row !important;justify-content:center;
  align-items:center;gap:var(--sc-r-4);padding:var(--sc-r-4) 0 var(--sc-r-1)}
/* !important omdat scoutr-app.css elke <button> een minimumhoogte,
   20px zijpadding en een pilvorm geeft. Dat klopt voor een knop met
   een woord erin, maar maakte van deze ronde knoppen platte pillen. */
.sc .sc-rond, .sc-rond{width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important;
  border-radius:var(--sc-rond-pil) !important;border:1px solid var(--lijn) !important;background:var(--sc-kampdoek) !important;
  color:var(--zacht) !important;font-size:var(--sc-t-xl) !important;line-height:1 !important;padding:0 !important;
  display:grid !important;place-items:center;cursor:pointer;transition:transform .15s ease;flex:0 0 auto}
.sc .sc-rond:hover, .sc-rond:hover{transform:scale(1.12) !important}
.sc-rond.hart{width:60px !important;height:60px !important;min-width:60px !important;min-height:60px !important;
  background:var(--roze-vlak) !important;border-color:var(--roze-vlak) !important;color:var(--sc-wit) !important;font-size:var(--sc-t-2xl) !important}
.sc-leeg{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:var(--sc-r-4);
  border:1px dashed var(--lijn);border-radius:var(--sc-rond-xl);padding:var(--sc-r-6);opacity:0;pointer-events:none;transition:opacity .4s}
.sc-leeg.aan{opacity:1;pointer-events:auto}
.sc-tip{text-align:center;margin-top:var(--sc-r-3);--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs);
  letter-spacing:var(--sc-spatie-data);color:var(--zacht)}

/* ---------- match ---------- */
.sc-match{position:fixed;inset:0;display:grid;place-items:center;background:rgba(var(--sc-nachtgroen-rgb), .88);
  z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s;padding:var(--sc-r-5)}
.sc-match.aan{opacity:1;pointer-events:auto}
.sc-matchdoos{background:var(--kampdoek);border:1px solid var(--lijn);border-radius:var(--sc-rond-xl);padding:var(--sc-r-7);
  text-align:center;max-width:380px;transform:scale(.9);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.sc-match.aan .sc-matchdoos{transform:scale(1)}
.sc-matchdoos h3{font-size:var(--sc-t-3xl);color:var(--roze)}
.sc-matchdoos p{margin:var(--sc-r-4) 0 var(--sc-r-5);color:var(--zacht)}
.sc-snipper{position:fixed;width:9px;height:16px;top:-20px;z-index:10000;pointer-events:none}
@keyframes sc-val{to{transform:translateY(105vh) rotate(var(--dr));opacity:.1}}

/* ---------- ticker ---------- */
.sc-ticker{overflow:hidden;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  padding:var(--sc-r-4) 0;background:var(--kampdoek)}
.sc-spoor{display:flex;gap:var(--sc-r-7);width:max-content;animation:sc-rol 30s linear infinite;
  --sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs);letter-spacing:var(--sc-spatie-data);color:var(--touw);
  /* max-width uit het mobiele blok klemde de rij op de containerbreedte,
     waarna 56 namen samengeperst werden tot drie regels per naam. Een
     lopende band hoort breder te zijn dan het scherm; .sc-ticker snijdt af. */
  max-width:none}
.sc-spoor i{flex:0 0 auto;white-space:nowrap;font-style:normal}
.sc-ticker:hover .sc-spoor{animation-play-state:paused}
@keyframes sc-rol{to{transform:translateX(-50%)}}

/* ---------- secties ---------- */
.sc-l section{padding:var(--sc-r-9) 0;border-top:1px solid var(--lijn)}
.sc-l .sc-titel{font-size:clamp(var(--sc-t-3xl),3.6vw,var(--sc-t-4xl));line-height:1.08}
.sc-l .sc-onder{margin-top:var(--sc-r-4);max-width:56ch;color:var(--zacht)}
.sc-oog{--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs);letter-spacing:.16em;
  color:var(--touw);display:block;margin-bottom:var(--sc-r-4)}

/* takkenkiezer */
.sc-kiezer{display:flex;flex-wrap:wrap;gap:var(--sc-r-3);margin-top:var(--sc-r-7)}
/* Was 10,5px met .12em letterafstand: dat leest als een stempel, niet
   als iets waar je op kunt drukken. Nu 12px, minder letterafstand, en
   een vulling zodat het een knop lijkt. */
.sc-chip{--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs) !important;letter-spacing:.06em;
  color:var(--tekst);background:var(--kampdoek);border:1px solid var(--sc-rand);
  padding:var(--sc-r-3) var(--sc-r-4);border-radius:var(--sc-rond-sm);cursor:pointer;line-height:1.2 !important;
  transition:border-color .18s ease,transform .18s ease,background .18s ease;min-height:40px}
.sc-chip:hover{border-color:var(--touw);transform:translateY(-2px)}
.sc-chip[aria-pressed="true"]{background:var(--roze-vlak);border-color:var(--roze-vlak);color:var(--sc-wit)}
/* Een raster en geen flexrij.

   Met `flex:1 1 220px; min-width:200px` paste er op een telefoon van 390
   maar EEN blok naast elkaar, dus de zes leeftijdsgroepen stonden onder
   elkaar en de sectie werd zeshonderd pixels hoog.

   `repeat(auto-fit, minmax(148px, 1fr))` laat de browser zelf uitrekenen
   hoeveel er passen: twee op een telefoon, zes op een breed scherm. En
   alle vakken worden even hoog, wat bij flex met wrap niet gebeurt. */
.sc-uitslag{margin-top:var(--sc-r-6);display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  border:1px solid var(--lijn);border-radius:var(--sc-rond-lg);overflow:hidden;background:var(--lijn)}
.sc-rij{background:var(--kampdoek);padding:var(--sc-r-4) var(--sc-r-4);
  display:flex;flex-direction:column;gap:var(--sc-r-3)}
.sc-rij dt{--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs) !important;letter-spacing:var(--sc-spatie-data);
  line-height:1.4 !important;color:var(--touw);margin:0}
.sc-rij dd{margin:0;display:flex;flex-wrap:wrap;gap:var(--sc-r-2)}
.sc-naampje{font-weight:600;font-size:var(--sc-t-sm) !important;background:rgba(var(--sc-roze-rgb), .10);
  border:1px solid rgba(var(--sc-roze-rgb), .26);color:var(--tekst);
  padding:var(--sc-r-2) var(--sc-r-3);border-radius:var(--sc-rond-pil);line-height:1.35 !important}
@keyframes sc-op{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sc-naampje{animation:sc-op .4s backwards}

/* cijfers */
/* Vier cijfers, en de kolommen delen dat altijd op.

   Met `auto-fit, minmax(190px, 1fr)` kwamen er op 768px DRIE kolommen voor
   vier cellen. De vierde stond alleen op de tweede rij, en omdat de
   scheidingslijnen hier gemaakt worden met een achtergrond onder een gat
   van 2px, werd die lege plek een lichter blok van 465 bij 123. Bovendien
   paste de ondergrens van 190px niet meer bij 200% zoom: de cellen liepen
   tot x=211 in een venster van 195.

   Vandaar vaste stappen: vier, twee, een. Nooit een lege cel. */
.sc-cijfers{margin-top:var(--sc-r-7);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;
  border:1px solid var(--lijn);border-radius:var(--sc-rond-lg);overflow:hidden;background:var(--lijn)}
@media (max-width:900px){.sc-cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.sc-cijfers{grid-template-columns:minmax(0,1fr)}}
.sc-cijfer{background:var(--kampdoek);padding:var(--sc-r-6) var(--sc-r-6)}
.sc-cijfer strong{display:block;--sc-eigen-letter: var(--sc-font-kop);font-weight:800;
  font-size:clamp(var(--sc-t-3xl),4vw,var(--sc-t-4xl));letter-spacing:-.03em;color:var(--roze);line-height:1;
  font-variant-numeric:tabular-nums}
.sc-cijfer span{display:block;margin-top:var(--sc-r-3);font-size:var(--sc-t-sm);color:var(--zacht)}
.sc-bron{margin-top:var(--sc-r-4);--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs);
  letter-spacing:var(--sc-spatie-data);color:var(--zacht);opacity:.8}

/* kampstrook */
.sc-kamp{margin-top:var(--sc-r-7);border:1px solid var(--lijn);border-radius:var(--sc-rond-lg);padding:var(--sc-r-5) var(--sc-r-6);background:var(--kampdoek)}
.sc-maanden{display:grid;grid-template-columns:repeat(9,1fr);--sc-eigen-letter: var(--sc-font-data);
  font-size:var(--sc-t-xs);letter-spacing:var(--sc-spatie-data);color:var(--zacht);padding-bottom:var(--sc-r-3);border-bottom:1px solid var(--lijn)}
.sc-balkrij{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--sc-r-4);align-items:center;padding:var(--sc-r-3) 0}
.sc-balkrij>span{font-size:var(--sc-t-sm);color:var(--zacht)}
.sc-spoorje{position:relative;height:16px;background:var(--sc-kampdoek);border-radius:var(--sc-rond-sm);overflow:hidden}
.sc-balk{position:absolute;top:0;bottom:0;border-radius:var(--sc-rond-sm);background:var(--den);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.sc-balk.roze{background:var(--roze)}
.sc-balk.aan{transform:scaleX(1)}
.sc-kamp small{display:block;margin-top:var(--sc-r-4);font-size:var(--sc-t-sm);color:var(--zacht)}

/* stappen en veiligheid */
.sc-stappen{margin-top:var(--sc-r-7);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sc-r-5)}
.sc-stap{border-left:2px solid var(--den);padding:2px 0 2px var(--sc-r-5);transition:border-color .2s,transform .2s}
.sc-stap:hover{border-color:var(--roze);transform:translateX(3px)}
.sc-stap h3{font-size:var(--sc-t-xl);margin:var(--sc-r-3) 0 var(--sc-r-3)}
.sc-stap p{color:var(--zacht);font-size:var(--sc-t-base)}
.sc-stap .n{--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs);letter-spacing:var(--sc-spatie-data);color:var(--touw)}
.sc-veilig{margin-top:var(--sc-r-7);display:flex;flex-wrap:wrap;gap:2px;
  border:1px solid var(--lijn);border-radius:var(--sc-rond-lg);overflow:hidden;background:var(--lijn)}
/* min-width mag nooit breder zijn dan het scherm. 210px was op 200% zoom
   (een venster van 195) breder dan de hele pagina, dus deze vier kaarten
   liepen tot x=231 buiten beeld, en .sc-l snijdt dat af in plaats van het
   scrollbaar te maken. min() lost dat op zonder aan de gewone weergave te
   raken: boven de 210px verandert er niets. */
.sc-veilig article{flex:1 1 230px;min-width:min(210px, 100%);background:var(--kampdoek);padding:var(--sc-r-6)}
.sc-veilig h3{font-size:var(--sc-t-lees);margin-bottom:var(--sc-r-3)}
.sc-veilig p{color:var(--zacht);font-size:var(--sc-t-base)}

/* slotbanner */
.sc-slot{padding:var(--sc-r-9) 0}
.sc-banner{position:relative;overflow:hidden;border-radius:var(--sc-rond-xl);padding:clamp(var(--sc-r-7),5vw,var(--sc-r-8));
  background:radial-gradient(120% 140% at 12% 0%,var(--sc-kampdoek-hoog) 0%,var(--sc-kampdoek) 46%,var(--sc-nachtgroen) 100%);
  border:1px solid var(--lijn);isolation:isolate}
.sc-banner::before{content:"";position:absolute;inset:-40% -10% auto auto;width:460px;height:460px;
  background:radial-gradient(circle,rgba(var(--sc-roze-rgb), .30),transparent 62%);filter:blur(6px);z-index:-1}
.sc-banner::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--band);
  background-size:96px 100%;animation:sc-schuif 7s linear infinite}
.sc-banner h2{font-size:clamp(var(--sc-t-3xl),4.4vw,var(--sc-t-4xl));line-height:1.04;max-width:17ch;margin:0}
.sc-banner .sc-onder{margin-top:var(--sc-r-4);max-width:50ch}
.sc-banner .sc-acties{margin-top:var(--sc-r-6)}
.sc-l .sc-vinkjes{margin:var(--sc-r-6) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--sc-r-3) var(--sc-r-5);
  font-size:var(--sc-t-sm);color:var(--zacht)}
.sc-l .sc-vinkjes li{display:flex;align-items:center;gap:var(--sc-r-3);color:var(--zacht)}
.sc-vinkjes li::before{content:"";width:16px;height:16px;flex:0 0 16px;border-radius:var(--sc-rond-pil);
  background:var(--roze);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3.1L13 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3.1L13 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* voet */
.sc-l .sc-voet{border-top:1px solid var(--lijn);margin-top:var(--sc-r-3);padding:var(--sc-r-8) 0 0;color:var(--zacht);font-size:var(--sc-t-base)}
.sc-voetgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:var(--sc-r-7) var(--sc-r-7)}
.sc-voetkolom h4{--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs);letter-spacing:.14em;
  color:var(--touw);text-transform:uppercase;margin:0 0 var(--sc-r-4);font-weight:400}
.sc-voetkolom ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sc-voetkolom li{display:flex}
.sc-voetkolom a{color:var(--zacht);position:relative;display:inline-flex;align-items:center;
  min-height:44px;padding:2px 0}
.sc-voetkolom a:hover{color:var(--tekst)}
.sc-voetkolom a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;
  background:var(--roze);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.sc-voetkolom a:hover::after{transform:scaleX(1)}
.sc-l .sc-voetpitch{max-width:34ch;line-height:1.6;margin:var(--sc-r-4) 0 0;color:var(--zacht)}
.sc-l .sc-voetmerk{display:inline-flex;align-items:center;justify-content:center;
  background:var(--tekst);border-radius:var(--sc-rond-lg);padding:var(--sc-r-2) var(--sc-r-4)}
.sc-l .sc-voetmerk img{height:52px;width:auto;display:block}
.sc-l .sc-voetbew{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sc-r-2);margin:0;padding:0;list-style:none}
.sc-l .sc-voetbew li{flex:0 0 auto;--sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs);letter-spacing:.08em;
  border:1px solid var(--lijn);border-radius:var(--sc-rond-pil);padding:var(--sc-r-2) var(--sc-r-3);color:var(--touw);
  background:rgba(var(--sc-wit-rgb), .02)}
.sc-voetbalk a{color:var(--touw);display:inline-flex;align-items:center;min-height:40px;padding:0 2px}
.sc-voetbalk a:hover{color:var(--tekst)}
.sc-voetbalk{margin-top:var(--sc-r-8);border-top:1px solid var(--lijn);padding:var(--sc-r-5) 0 var(--sc-r-6);
  display:flex;flex-wrap:wrap;gap:var(--sc-r-3) var(--sc-r-6);justify-content:space-between;align-items:center;
  --sc-eigen-letter: var(--sc-font-data);font-size:var(--sc-t-xs);letter-spacing:var(--sc-spatie-data);color:var(--touw)}

@media (max-width:880px){
  /* minmax(0,1fr) en niet 1fr.

     Een grid-track van `1fr` heeft als ondergrens `auto`, en dat is de
     min-content-breedte van wat erin staat. Bij 200% zoom op een telefoon
     van 390 (dus een viewport van 195) werd die track 184px breed in een
     vak van 140, en omdat .sc-l op `overflow-x: clip` staat werd dat niet
     scrollbaar maar afgesneden: 109 elementen liepen buiten beeld, tot en
     met de knop "Maak je profiel". WCAG 1.4.4 vraagt dat bij 200% niets
     verloren gaat. */
  .sc-l .sc-hero{grid-template-columns:minmax(0,1fr);gap:var(--sc-r-7);padding:var(--sc-r-6) 0 var(--sc-r-8)}
  .sc-l .sc-hero > *{min-width:0}
  /* Alleen op de grote kop, en alleen als het woord echt niet past.
     Niet op alles: een brede `overflow-wrap` heeft hier eerder de
     minimumbreedte van elk woord tot één letter teruggebracht. */
  .sc-l .sc-hero h1{overflow-wrap:break-word;hyphens:auto}
  /* De kopbalk EN de navigatie erin mogen afbreken. Alleen de kop laten
     afbreken hielp niet: de knop zit in .sc-nav, en die stond zelf op
     nowrap, dus hij bleef tot x=217 doorlopen op een venster van 195. */
  .sc-l .sc-kop{flex-wrap:wrap;row-gap:var(--sc-r-2)}
  .sc-l .sc-nav{flex-wrap:wrap;row-gap:var(--sc-r-2);justify-content:flex-end}
  .sc-l .sc-nav .sc-navknop{max-width:100%}
  .sc-stapel{max-width:330px;margin:0 auto;width:100%;height:400px}
  .sc-stappen{grid-template-columns:1fr}
  .sc-voetgrid{grid-template-columns:1fr 1fr;gap:var(--sc-r-7) var(--sc-r-6)}
  .sc-rij{flex:1 1 100%}
  .sc-balkrij{grid-template-columns:1fr;gap:var(--sc-r-2)}
  .sc-l .sc-nav a.sc-verberg{display:none}
}
@media (max-width:600px){
  .sc-wrap{padding:0 var(--sc-r-5)}
  .sc-l{font-size:var(--sc-t-base)}
  .sc-l section{padding:var(--sc-r-8) 0}
  .sc-slot{padding:var(--sc-r-8) 0}
  .sc-l .sc-merk img{height:38px}
  .sc-l .sc-acties .sc-knop,.sc-l .sc-acties .sc-knop-stil{width:100%}
  .sc-uitslag,.sc-kamp{padding:var(--sc-r-5)}
  .sc-voetgrid{grid-template-columns:1fr;gap:var(--sc-r-6)}
  .sc-l .sc-nav{gap:var(--sc-r-4)}
  .sc-l .sc-nav .sc-navknop{font-size:var(--sc-t-sm);padding:var(--sc-r-3) var(--sc-r-4)}
  .sc-l .sc-kop .sc-merk img{height:38px}
  .sc-l .sc-voet{padding-top:var(--sc-r-7)}
  .sc-banner{border-radius:var(--sc-rond-xl)}
}
/* de cookiemelding van het thema in de Scoutr-stijl */

@media (prefers-reduced-motion:reduce){
  html,body{scroll-behavior:auto}
  .sc-l *,.sc-band{animation:none !important;transition:none !important}
  .sc-draai b{position:static;opacity:1;transform:none}
  .sc-draai b~b{display:none}
  .sc-balk{transform:scaleX(1)}
  .sc-naampje{opacity:1;transform:none}
}


/* =====================================================================
   200% zoom op een telefoon: 195 CSS-pixels

   De harde overloop was er al uit (drie ondergrenzen breder dan het
   scherm). Wat overbleef was leesbaarheid: een slotblok dat 38px vulling
   hield en daardoor 62px inhoud overliet, cijfers die middenin het getal
   braken, woorden zonder afbreekstreepje, en een knoppenrij van 184px in
   een vak van 140.
   ===================================================================== */

@media (max-width: 420px) {
  /* Vulling schaalt mee. Op 195px bleef er anders 62px inhoud over in een
     blok van 140, en brak "jeugdbewegi" middenin af. */
  .sc-l .sc-banner { padding: var(--sc-r-5) var(--sc-r-4) !important; }
  .sc-l .sc-vinkjes li { white-space: normal; }

  /* Een getal breekt nooit. "271.000" werd "271.00 / 0". */
  .sc-l .sc-cijfer strong { white-space: nowrap; }

  /* Nederlands breekt met een streepje, niet middenin het woord.
     `hyphens: auto` werkt omdat <html lang="nl"> gezet is. */
  .sc-l .sc-veilig h3,
  .sc-l .sc-veilig p,
  .sc-l .sc-stap h3,
  .sc-l .sc-stap p { hyphens: auto; }

  /* De swipeknoppen: 48 + 60 + 48 plus twee keer 14 is 184, en dat past
     niet in 140. Ze mogen krimpen en afbreken. */
  .sc-l .sc-kaartknoppen {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sc-r-3);
    max-width: 100%;
  }
  .sc-l .sc-kaartknoppen > * { flex: 0 0 auto; }
}