/* ucre.css — UCRE-toevoegingen op Strak. Geen tweede kleur, geen tweede letter. */

/* Placeholder-slots. Verwijderen zodra foto en video geplaatst zijn. */
.fotoslot{background:#E7E5DD;border:1px solid var(--lijn);aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;text-align:center}
.fotoslot .mono{line-height:2;color:var(--grijs)}
.reelslot{margin-top:clamp(26px,4vw,44px);max-width:860px}
.reelslot .cap{display:flex;align-items:center;gap:8px;margin-top:10px}

/* Lijsten in Strak-grammatica: vierkant blokje, geen bolletje. */
ul.lijst{list-style:none;margin-top:8px}
ul.lijst li{position:relative;padding-left:20px;margin-bottom:12px;
  font-size:14px;line-height:1.65;color:var(--inkt-2);max-width:56ch;
  break-inside:avoid}
ul.lijst li::before{content:"";position:absolute;left:0;top:8px;
  width:7px;height:7px;background:var(--rood)}
ul.lijst.nee li::before{background:var(--grijs)}
.sec-inkt ul.lijst li{color:#C9C7BE}

/* Organisator-citaat. Rode kantlijn, radius 0, geen aanhalingstekens. */
.quote{background:#fff;border:1px solid var(--lijn);border-left:2px solid var(--rood);
  padding:20px 22px}
.quote p{font-size:14px;line-height:1.7;color:var(--inkt-2);margin:0}
.quote .bron{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--grijs)}

/* Honeypot voor het formulier. */
.hidden{position:absolute;left:-9999px}

/* Het merkdevice: één cijfer per oppervlak, mono-onderschrift eronder. */
.cijfers .cf .mono{color:var(--grijs);max-width:26ch}

@media (max-width:700px){
  ul.lijst[style*="column-count"]{column-count:1 !important}
}

/* ── Hardening (aug 2026) ─────────────────────────────────── */

/* Skip-link voor toetsenbord en screenreader */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--inkt);
  color:#fff;padding:12px 18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

/* Zichtbare focus, in merkrood, radius 0 */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,label:focus-visible{
  outline:2px solid var(--rood);outline-offset:2px;border-radius:0}

@media (max-width:860px){
  /* iOS zoomt in op inputs onder 16px. Dit voorkomt dat. */
  .strak-form input,.strak-form select,.strak-form textarea{font-size:16px}
  /* De EN/NL-toggle als volwaardige menuregel in het uitgeklapte menu */
  nav.main .lang-toggle{display:block;width:100%;padding:12px 0;
    border-bottom:1px solid var(--lijn);font-size:13px}
  nav.main .lang-toggle a{display:inline;width:auto;padding:0;border:none}
  /* De CTA onderaan het menu zonder onderrand-conflict */
  nav.main .hlink{padding:14px 0 4px}
}

/* Functionele tekst uit het decoratieve grijs: labels en formulier-meta
   moeten AA halen. Captions en sectienummers blijven merkconform. */
.strak-form label{color:var(--inkt-2)}
.strak-form .mono{color:var(--inkt-2)}
footer .f-rechts{color:var(--inkt-2)}
.nowstrip .mono{color:var(--inkt-2)}
/* Foto's behouden hun verhouding bij expliciete width/height-attributen */
.reelslot img,.portret img{height:auto}

/* ── Visie (aug 2026): de causale keten en de twee rekeningen ── */

/* De keten. Vijf stappen, hairlines, rode pijlpunten. Radius 0. */
.keten{display:flex;align-items:stretch;margin-top:clamp(30px,4.5vw,52px);
  border:1px solid var(--lijn);background:#fff}
.keten .stap{flex:1 1 0;min-width:0;position:relative;
  padding:20px 18px 22px;border-right:1px solid var(--lijn)}
.keten .stap:last-child{border-right:none}
.keten .stap .st-nr{display:block;color:var(--rood)}
.keten .stap h3{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(15px,1.4vw,18px);margin-top:10px;line-height:1.15}
.keten .stap p{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.8;color:var(--inkt-2);margin-top:8px}
.keten .stap .pijl{position:absolute;right:-7px;top:22px;width:12px;height:12px;
  background:var(--rood);z-index:2;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (max-width:860px){
  .keten{flex-direction:column}
  .keten .stap{border-right:none;border-bottom:1px solid var(--lijn);
    padding:18px 18px 22px}
  .keten .stap:last-child{border-bottom:none}
  .keten .stap .pijl{right:auto;left:20px;top:auto;bottom:-6px;
    clip-path:polygon(0 0,100% 0,50% 100%)}
}

/* De twee rekeningen. Twee tegels, één hairline-raster. */
.rekeningen{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);
  margin-top:clamp(24px,3.5vw,40px)}
.rekeningen .rek{background:#fff;padding:clamp(22px,3vw,34px);
  display:flex;flex-direction:column}
.rekeningen .rek .rk{display:inline-flex;align-items:center;gap:8px;
  color:var(--inkt-2)}
.rekeningen .rek h3{font-family:var(--fd);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(19px,2.2vw,26px);line-height:1.1;margin-top:14px;max-width:20ch}
.rekeningen .rek p{font-size:14px;line-height:1.7;color:var(--inkt-2);
  margin-top:12px;max-width:52ch}
.rekeningen .rek .rk-meta{display:block;margin-top:auto;padding-top:18px;
  color:var(--grijs)}
@media (max-width:860px){
  .rekeningen{grid-template-columns:1fr}
}