/* ============================================================
 * kartis.nl - one-pager stylesheet
 * Zes secties, genummerd. Structuur naar het Specia1ne-model.
 * Verbruikt de tokens uit colors_and_type.css.
 * ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:hover{color:var(--accent)}
img,svg{display:block;max-width:100%}
button{font:inherit}
h1,h2,h3,p{margin:0}

.wrap{max-width:1060px;margin:0 auto;padding:0 48px}
.mono{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase}

/* ---- sectiekop ---- */
.sec{border-bottom:1px solid var(--line)}
.sec--grijs{background:var(--bg-card)}
.sec-kop{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:44px}
.sec-kop span{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--fg-2);white-space:nowrap}
.sec-kop b{color:var(--accent);font-weight:700}

h2.h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-.025em;line-height:1.12;text-wrap:balance;margin-bottom:22px}
.lead{font-size:1.12rem;line-height:1.7;color:var(--fg-2);max-width:62ch}

/* ---- kop ---- */
.kop{position:sticky;top:0;z-index:400;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.kop-merk{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg)}
.kop-merk:hover{color:var(--fg)}
.kop-merk svg{height:26px;width:auto}
.kop-merk span{font-family:var(--font-mono);font-weight:600;letter-spacing:.15em;font-size:15px}
.kop-rechts{display:flex;align-items:center;gap:22px}
.kop-tel{font-family:var(--font-mono);font-size:13px;color:var(--fg-2);text-decoration:none;white-space:nowrap}
.kop-login{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 16px;border:1px solid var(--line-2);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--fg);text-decoration:none;white-space:nowrap}
.kop-login:hover{border-color:var(--fg-3);background:var(--bg-card);color:var(--fg)}
.kop-login:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- haken-knop: DE contactknop, overal dezelfde ----
   In rust alleen twee hoeken van 2px linksboven en rechtsonder, plus een
   pijl. GEEN volle rand: die is een keer toegevoegd en afgewezen. Bij hover
   groeien de hoeken dicht tot een rechthoek en vult het vlak zich. */
.haken{position:relative;display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;cursor:pointer;padding:12px 22px;font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fg);transition:background 260ms ease,color 260ms ease}
.haken--groot{padding:16px 26px;font-size:18px}
.haken span.hk{position:absolute;width:11px;height:11px;pointer-events:none;transition:width 260ms cubic-bezier(.22,.61,.36,1),height 260ms cubic-bezier(.22,.61,.36,1)}
.haken span.hk-lb{left:0;top:0;border-left:2px solid var(--accent);border-top:2px solid var(--accent)}
.haken span.hk-ro{right:0;bottom:0;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.haken:hover{background:var(--accent);color:#fff}
.haken:hover span.hk{width:100%;height:100%}
.haken svg{width:1em;height:1em;flex:none}
.haken .lbl{position:relative}
.haken--licht{color:#fff}
.haken--licht span.hk-lb{border-left-color:#fff;border-top-color:#fff}
.haken--licht span.hk-ro{border-right-color:#fff;border-bottom-color:#fff}
.haken--licht:hover{background:#fff;color:var(--accent)}
.haken--flush{margin-left:-22px}
.haken--groot.haken--flush{margin-left:-26px}

/* ---- navigatierail ---- */
.sectierail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:300;display:flex;flex-direction:column;gap:2px}
.sectierail a{display:flex;align-items:center;gap:10px;padding:7px 10px;text-decoration:none;border-right:2px solid transparent;transition:border-color 200ms ease}
.sectierail a span{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);transition:color 200ms ease}
.sectierail a .nr{font-size:11px;font-weight:700}
.sectierail a .lb{font-size:10px}
.sectierail a[aria-current]{border-right-color:var(--accent)}
.sectierail a[aria-current] .nr{color:var(--accent)}
.sectierail a[aria-current] .lb{color:var(--fg)}

/* ---- 01 welkom ---- */
#signaal{overflow:hidden}
#signaal .wrap{padding-top:96px;padding-bottom:88px;position:relative}
.hero-in{position:relative;z-index:1}
.eyebrow{display:inline-block;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:500;color:var(--fg-2);background:var(--bg-card);padding:8px 14px;margin-bottom:28px}
h1.hero{font-size:clamp(2.6rem,6.6vw,5.4rem);font-weight:700;letter-spacing:-.04em;line-height:.98;margin-bottom:44px;max-width:15ch}
h1.hero span{display:block}
h1.hero .term{color:var(--accent)}
h1.hero .term i{display:inline-block;white-space:nowrap;font-style:normal;transition:opacity 400ms ease,transform 400ms ease}
h1.hero .term.uit i{opacity:0;transform:translateY(-.12em)}
.hero-body{max-width:52ch}
.hero-body .lead{margin-bottom:22px}
.hero-res{font-size:1.12rem;line-height:1.7;font-weight:600;color:var(--fg);margin-bottom:36px}
/* Het beeldmerk staat ACHTER de kop, doorschijnend. De bovenkant lijnt uit
   met de cap-height van "Feiten die" - GEMETEN waarde, niet geschat.
   De twee top-waarden verschillen omdat de laagbreedte (620 vs 560) de
   offset van het merk BINNEN de 560x520-viewBox meeschaalt: de vorm begint
   op y=95 in viewBox-eenheden, dus de offset is 95 * (breedte/560).
   De transform en de ringradii komen letterlijk uit OnePagerHero.jsx
   (MERK_X 130, MERK_Y 90, MERK_B 300, MERK_H 340; ringen 150/210/280/360/450).
   Verzin die niet: een afwijkende schaal zet de uitlijning stil weer 40px mis.
   Wijzigt de koptypografie of de ruimte erboven, dan opnieuw meten. */
.hero-merklaag{position:absolute;right:-70px;top:138px;width:620px;pointer-events:none;z-index:0;opacity:.62;-webkit-mask-image:linear-gradient(to top,#000 52%,transparent 100%);mask-image:linear-gradient(to top,#000 52%,transparent 100%)}
.hero-merklaag svg [stroke="#2563EB"],.hero-merklaag svg [fill="#2563EB"]{opacity:.4}
.hero-merklaag .merkvorm{opacity:.42}

/* ---- 02 scherpte ---- */
.kol3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.kol3 > div{background:var(--bg);padding:32px 30px 38px}
.kol3 .nr{font-family:var(--font-mono);letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--accent);margin-bottom:20px}
.kol3 h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.kol3 p{font-size:15px;line-height:1.65;color:var(--fg-2)}
.payoff{margin-top:44px;font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.payoff span{color:var(--accent)}

/* ---- genummerde rij (03 en 05) ----
   Hover licht het HELE blok op in --bg-card. Eerder stond hier een blauw
   draadje; dat was te klein om als hoverstaat te lezen. De negatieve marge
   plus gelijke padding laat de oplichting doorlopen tot buiten de tekstkolom. */
.rijlijst{border-top:2px solid var(--fg)}
.rij{display:grid;grid-template-columns:72px 1fr;gap:28px;padding:34px 24px;margin:0 -24px;border-bottom:1px solid var(--line);background:transparent;transition:background 200ms ease}
.rij:hover{background:var(--bg-card)}
.rij .rnr{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--accent);line-height:1.1}
.rij h3{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.rij .vraag{font-size:1.02rem;font-style:italic;color:var(--accent);margin-bottom:14px}
.rij p.tekst{color:var(--fg-2);max-width:66ch;line-height:1.7}
.rij .meta{margin-top:16px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--fg-2)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.chips span{font-family:var(--font-mono);font-size:12px;color:var(--fg-2);background:var(--bg-card);border:1px solid var(--line);padding:9px 14px}
.naschrift{margin:26px 0 34px;font-size:15px;color:var(--fg-3);max-width:68ch;line-height:1.7}

/* ---- 04 methode ---- */
.kol2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.kaart{background:var(--bg);border:1px solid var(--line);padding:40px 44px;margin-bottom:48px}
.bronlijn{display:flex;align-items:flex-start}
.bronlijn > .kant{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:700;color:var(--fg);flex:none;line-height:2px;padding-top:1px}
.bronlijn > .kant.bron{padding-right:16px}
.bronlijn > .kant.bev{padding-left:16px;color:var(--fg-2);transition:color 300ms ease}
.bronlijn > .kant.bev.aan{color:var(--accent)}
.bronlijn .baan{flex:1}
.bronlijn .spoor{position:relative;height:2px;background:var(--line-2)}
.bronlijn .voortgang{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform 120ms linear}
.bronlijn .halte{position:absolute;top:-4px;width:10px;height:10px;background:var(--bg);border:2px solid var(--line-2);transform:translateX(-50%) scale(.7);transition:border-color 300ms ease,transform 300ms ease}
.bronlijn .halte.aan{border-color:var(--accent);transform:translateX(-50%) scale(1)}
.haltes{position:relative;height:14px;margin-top:14px}
.haltes span{position:absolute;top:0;white-space:nowrap;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:400;color:var(--fg-2);transition:color 300ms ease}
.haltes span.aan{font-weight:500;color:var(--fg)}
.blok-na{padding-top:56px;margin-top:56px;border-top:1px solid var(--line)}
.blok-band{padding-top:56px;margin-top:8px;border-top:1px solid var(--line)}
.uitg{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--accent)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.badges span{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:500;padding:6px 12px;background:var(--badge-bg);color:var(--badge-ink)}

/* ---- netwerkband ---- */
.band-kop{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.band-kop span{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--fg-2)}
.band h3{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:600;letter-spacing:-.025em;max-width:26ch;margin-bottom:10px}
.band .band-lead{font-size:16px;line-height:1.65;color:var(--fg-2);max-width:62ch;margin-bottom:26px}
.band-tabs{display:inline-flex;gap:1px;flex-wrap:wrap;margin-bottom:20px;background:var(--line);border:1px solid var(--line)}
.signaalreis-wrap{margin:32px 0;border:1px solid var(--line);background:var(--bg)}
.signaalreis-frame{display:block;width:100%;height:700px;border:0;background:#fff}
.band-tabs button{border:0;border-radius:0;cursor:pointer;padding:10px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--bg);color:var(--fg);transition:background 180ms ease,color 180ms ease}
.band-tabs button[aria-pressed="true"]{background:var(--fg);color:#fff}
.band-doek{position:relative;height:420px;border:1px solid var(--line);background:var(--bg)}
.band-voet{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;margin-top:18px}
.band-voet p{font-size:15px;line-height:1.65;color:var(--fg-2);max-width:58ch}
.band-productlink{display:inline-flex;margin-top:14px;border-bottom:1px solid var(--primary);padding-bottom:4px;color:var(--fg);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.band-productlink:hover{color:var(--primary)}
.band-legenda{display:flex;flex-direction:column;gap:8px}
.band-legenda span{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:10px;color:var(--fg-2);white-space:nowrap}
.band-legenda i{flex:none;border-radius:50%}
.band-legenda i.lijn{border-radius:0;height:0}

/* ---- 06 contact ---- */
.tel-groot{font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--fg);text-decoration:none}

/* ---- voet ---- */
footer{padding:72px 0 56px}
footer .slot{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:600;letter-spacing:-.025em;margin-bottom:44px}
footer .slot span{color:var(--accent)}
footer .fbalk{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:12px;color:var(--fg-3)}
footer .fbalk a{color:var(--fg-3);text-decoration:none}
footer .flinks{display:flex;gap:18px;flex-wrap:wrap}

/* ---- contactpaneel ----
   Wit op #2563EB is 4,6:1 en haalt de norm net. Daarom staat er geen enkele
   getemperde tekst op dit paneel: geen opacity, geen wit-op-70%, en geen
   placeholders (die zijn per definitie gedempt). Elk veld heeft een echt
   label in mono wit op volle sterkte. */
.paneel-overlay{position:fixed;inset:0;z-index:600;background:var(--fg);opacity:0;pointer-events:none;transition:opacity 360ms ease}
.paneel-overlay.open{opacity:.28;pointer-events:auto}
.paneel{position:fixed;top:0;right:0;bottom:0;z-index:700;width:min(560px,100vw);background:var(--accent);transform:translateX(101%);transition:transform 420ms cubic-bezier(.22,.61,.36,1);overflow-y:auto;visibility:hidden}
.paneel.open{transform:translateX(0);visibility:visible}
.paneel-in{padding:34px 44px 56px;min-height:100%;display:flex;flex-direction:column}
.paneel-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:52px}
.paneel-bar .lab{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:#fff}
.paneel-bar .lab i{width:8px;height:8px;background:#fff}
.paneel-bar button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:3px}
.paneel h2{font-size:clamp(1.9rem,3.6vw,2.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:#fff;margin-bottom:10px}
.paneel .paneel-lead{font-size:17px;line-height:1.6;color:#fff;margin-bottom:40px}
.paneel form{display:flex;flex-direction:column;flex:1}
.veld{margin-bottom:30px}
.veld label{display:block;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:#fff;margin-bottom:6px}
.veld input,.veld textarea{width:100%;background:none;border:0;border-bottom:1px solid #fff;border-radius:0;color:#fff;font-family:var(--font-sans);font-size:17px;padding:10px 0 12px;outline:none}
.veld textarea{resize:vertical}
.veld input:focus,.veld textarea:focus{border-bottom-width:2px}
.paneel-slot{margin-top:auto;padding-top:44px;border-top:1px solid #fff}
.paneel-slot p{font-family:var(--font-mono);font-size:12px;line-height:1.7;color:#fff}
.paneel-slot a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.paneel-ok{color:#fff}
.paneel-ok .mark{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;margin-bottom:12px}
.paneel-fout{color:#fff;margin-top:14px;font-size:15px;line-height:1.6}
.verborgen{display:none}
/* Honeypot: geen display:none (bots negeren dat niet, en het zou het veld ook
   uit de DOM-boomstructuur voor de-facto-focus halen). Visueel verborgen,
   niet in de tabvolgorde, niet voor schermlezers - een mens komt er nooit. */
.vh-veld{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- opbouw bij scrollen ----
   Fade plus 12px, per blok een eigen ordening. Bij prefers-reduced-motion
   staat alles stil en zichtbaar. */
[data-onthul]{opacity:0;transform:translateY(12px);transition:opacity 520ms cubic-bezier(.22,.61,.36,1),transform 520ms cubic-bezier(.22,.61,.36,1)}
[data-onthul].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-onthul]{opacity:1!important;transform:none!important;transition:none!important}
  h1.hero .term i{transition:none}
  /* Het contactpaneel schoof over de volle schermbreedte in, ook bij een
     uitgesproken voorkeur voor minder beweging. */
  .paneel,.paneel-overlay{transition:none}
}

/* ---- responsief ---- */
@media (max-width:1260px){.sectierail{display:none}}
@media (max-width:1200px){.hero-merklaag{right:-40px;width:560px;top:146px}}
@media (max-width:900px){
  .kol2,.kol3,.band-voet{grid-template-columns:minmax(0,1fr);gap:32px}
  .kol3{gap:1px}
  .kop-bij{display:none}
  .cta-blok{text-align:center}
  .hero-merklaag{display:none}
  .wrap{padding:0 24px}
  .rij{grid-template-columns:48px 1fr;gap:18px}
}
@media (max-width:680px){.haltes{display:none}}
@media (max-width:600px){
  .kop .wrap{height:auto;min-height:74px;flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .kop-rechts{margin-left:auto;gap:12px}
}