/* ============================================================
   VARIANT C — TWEELUIK
   De downloadpagina als twee helften: links CV StreetSmart, rechts CADviTool.
   Elke helft scrolt zelfstandig. Zweef je boven de ene helft, dan dimt de andere.
   Een tool die niet in de licentie zit staat uit, met één actie: contact.
   Laadt ná portal-v3.css; alleen de tweeluik-indeling en de per-helft-opmaak staan hier.
   ============================================================ */

body.tweeluik{overflow:hidden}
#kop{background:linear-gradient(180deg,var(--donker) 0%,var(--donker) 86%,rgba(12,12,12,0) 100%)}

.kanten{position:fixed;inset:0;z-index:1;display:grid;grid-template-columns:1fr 1fr}
.kant{position:relative;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--lijn-d) transparent;
  padding:clamp(7rem,16vh,11rem) clamp(1.5rem,4.5vw,4.5rem) clamp(4rem,10vh,6rem)}
.kant + .kant{border-left:1px solid var(--lijn-d)}
.kant .binnen{max-width:34rem;transition:opacity var(--dur-kort) var(--ease-soft)}
/* de andere helft dimt als je op de ene zweeft */
.kanten:has(.kant:hover) .kant:not(:hover) .binnen{opacity:.55}
.kanten.zweef-links .kant:last-child .binnen,.kanten.zweef-rechts .kant:first-child .binnen{opacity:.55}
.kant.uit .binnen{opacity:.5}
.kanten:has(.kant:hover) .kant.uit:hover .binnen{opacity:.8}

.kant h2{font-size:var(--fs-h2-klein);line-height:var(--lh-h2);letter-spacing:var(--ls-display);color:var(--licht)}
.kant h2 .punt{color:var(--rood)}
.kant .module{margin-top:.7rem;font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.kant .status{margin-top:var(--sp-kop-tekst);font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs)}
.kant .status.let{color:var(--rood)}
.kant .status.let .mailadres,.kant .status .mailadres{text-transform:none;color:var(--licht);border-bottom:1px solid var(--lijn-d)}
.kant .status.uit{color:var(--grijs-d)}
.kant .nieuwste .status,.kant .nieuwste .leeg{margin-top:0}

/* de nieuwste versie: één groot getal, één regel context, één knop */
.kant .nieuwste{margin-top:var(--sp-blok);padding-top:var(--sp-kop-tekst);border-top:1px solid var(--lijn-d)}
.kant .nieuwste .label{font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.kant .versie-groot{margin-top:.6rem;font-family:var(--disp);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-display);color:var(--licht);font-variant-numeric:tabular-nums}
.kant .versie-meta{margin-top:1rem;color:var(--grijs);font-size:var(--fs-klein);line-height:var(--lh-klein)}
.kant .versie-meta b{font-weight:500;color:var(--licht)}
.kant .knoppen{margin-top:var(--sp-tekst-knop)}
.kant .ws-knop.uit{white-space:normal}

/* wat er nieuw is: open, geen details — dit is waarvoor je komt */
.kant .notes{margin-top:var(--sp-blok)}
.kant .notes h3{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;font-weight:400;color:var(--grijs);margin-bottom:1.2rem}
.kant .notes-body{padding-left:0;border-left:0;max-width:none}
.kant .notes-body h4{font-family:var(--body);font-size:var(--fs-klein);letter-spacing:0;text-transform:none;font-weight:500;color:var(--licht);margin-top:1.2rem}
.kant .notes-body h4:first-child{margin-top:0}
.kant .notes-body ul{margin-top:.35rem}
.kant .notes-body li{color:var(--grijs)}

/* de grote downloadknop: label links, grootte rechts, pijl; bij hover vult hij crème */
.knop-groot{display:flex;align-items:center;gap:1rem;width:100%;max-width:26rem;height:3.6rem;padding:0 1.2rem;
  border:1px solid var(--licht);color:var(--licht);font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-knop-mono);text-transform:lowercase;
  transition:background var(--dur-tik) var(--ease-soft),color var(--dur-tik) var(--ease-soft),border-color var(--dur-tik)}
.knop-groot .kg-label{flex:1}
.knop-groot .kg-rechts{color:var(--grijs);text-transform:none;transition:color var(--dur-tik)}
.knop-groot .pijl{width:1rem;height:1rem;flex:0 0 auto;transition:transform var(--dur-kort) var(--ease-soft)}
.knop-groot:hover{background:var(--creme);color:var(--donker);border-color:var(--creme)}
.knop-groot:hover .kg-rechts{color:var(--donker)}
.knop-groot:hover .pijl{transform:translateY(3px)}
.knop-groot.uit{border-color:var(--lijn-d);color:var(--grijs-d);cursor:default}
.knop-groot.uit:hover{background:none;color:var(--grijs-d);border-color:var(--lijn-d)}
.kant.uit .knop-groot{border-color:var(--grijs);color:var(--licht)}

/* eerdere versies: open, één regel per versie */
.kant .eerder h3{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;font-weight:400;color:var(--grijs);margin-bottom:.4rem}
.kant .eerder{margin-top:var(--sp-blok)}
.kant .eerder ul{margin-top:.6rem}
.kant .eerder li{display:flex;align-items:center;gap:1.4rem;padding:.7rem 0;border-top:1px solid var(--lijn-z);font-size:var(--fs-klein);color:var(--grijs)}
.kant .eerder li:last-child{border-bottom:1px solid var(--lijn-z)}
.kant .eerder .v{font-family:var(--disp);font-size:var(--fs-h4);letter-spacing:var(--ls-h4);color:var(--licht);min-width:5rem}
.kant .eerder .d{flex:1}
.kant .eerder .ws-knop{min-width:0;padding-right:1.2rem;color:var(--grijs)}

.kant .bestand{margin-top:var(--sp-blok);display:grid;gap:.5rem;font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);color:var(--grijs-d);word-break:break-all}
.kant .bestand button{font:inherit;letter-spacing:inherit;text-transform:uppercase;color:var(--grijs);border-bottom:1px solid var(--lijn-d);margin-left:.6rem;transition:color var(--dur-tik),border-color var(--dur-tik)}
.kant .bestand button:hover{color:var(--licht);border-color:var(--licht)}

/* alle release notes: dichtgeklapt aan het eind, per versie een kop met datum */
.kant .archief{margin-top:var(--sp-blok)}
.kant .archief summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs);transition:color var(--dur-tik)}
.kant .archief summary::-webkit-details-marker{display:none}
.kant .archief summary::before{content:"";width:.55rem;height:.55rem;border:1px solid currentColor;transform:rotate(45deg);transition:background var(--dur-tik)}
.kant .archief[open] summary::before{background:currentColor}
.kant .archief summary:hover{color:var(--licht)}
.kant .archief-item{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--lijn-z)}
.kant .archief-item h4{display:flex;align-items:baseline;gap:1rem;margin-bottom:.9rem}
.kant .archief-item h4 .v{font-family:var(--disp);font-size:var(--fs-h4);letter-spacing:var(--ls-h4);color:var(--licht)}
.kant .archief-item h4 .d{font-size:var(--fs-klein);color:var(--grijs)}

/* uit: één zin, één actie */
.kant .kant-tekst{margin-top:var(--sp-blok);color:var(--grijs);max-width:var(--maat-tekstkolom)}
.kant .kant-tekst b{font-weight:500;color:var(--licht)}
.kant .leeg{color:var(--grijs);max-width:var(--maat-tekstkolom)}

/* melding (downloads uit) hangt onder de kop, over beide helften */
.tweeluik .melding{position:fixed;left:50%;top:clamp(4.6rem,9vw,6.2rem);transform:translateX(-50%);z-index:3;margin:0;
  padding:.6rem .9rem;background:var(--donker);border:1px solid var(--lijn-d);max-width:min(40rem,calc(100% - 2rem))}
body.melding-aan .kant{padding-top:calc(clamp(7rem,16vh,11rem) + 3.4rem)}

@media (max-width:900px){
  body.tweeluik{overflow:auto}
  .kanten{position:static;grid-template-columns:1fr}
  .kant{overflow:visible;padding-top:0;padding-bottom:var(--sp-sectie-bot)}
  .kant:first-child{padding-top:clamp(7rem,16vh,9rem)}
  .kant + .kant{border-left:0;border-top:1px solid var(--lijn-d);padding-top:var(--sp-sectie-top)}
  .kanten:has(.kant:hover) .kant:not(:hover) .binnen{opacity:1}
  .tweeluik .melding{position:static;transform:none;margin:5.5rem 1.25rem 0;max-width:none}
  body.melding-aan .kant:first-child{padding-top:2rem}
}