/* Vraag 't Anna — publieke site.
   DESKTOP-FIRST: de basisregels hieronder zijn het ontwerp op een breed scherm.
   Onderaan passen twee @media (max-width) de indeling aan naar tablet en telefoon.
   Alles op tokens, zodat kleur/afronding op één plek te wijzigen is. */

:root{
  --paars:#7A5AA8;
  --paars-diep:#42305F;
  --paars-zacht:#F3EEFA;
  --paars-rand:#E2D6F2;
  --mint:#E3F2EA;
  --mint-diep:#1F7A55;
  --perzik:#FDEDE1;
  --hemel:#E7F0FA;
  --papier:#FCFAF8;
  --wit:#FFFFFF;
  --inkt:#241E33;
  --grijs:#5C5570;
  --lijn:#EDE7F3;
  --r-blok:36px;
  --r-kaart:26px;
  --r-pil:999px;
  --schaduw:0 10px 30px rgba(66,48,95,.08);
  --schaduw-hoog:0 22px 60px rgba(66,48,95,.16);
  --wrap:1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:19px;line-height:1.65;font-weight:500;
  overflow-x:clip;
}
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","Nunito",system-ui,sans-serif;}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:40px}
section{padding-block:110px}
h1,h2,h3{line-height:1.1;margin:0 0 .45em;font-weight:800;letter-spacing:-.02em}
h1{font-size:64px}
h2{font-size:52px;letter-spacing:-.015em}
h3{font-size:26px;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:22px;color:var(--grijs);max-width:60ch}
.mini{font-size:17px;color:var(--grijs)}
.center{text-align:center}
.mw{max-width:660px;margin-inline:auto}
.center .lead{margin-inline:auto}

/* ── kop ─────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(252,250,248,.90);backdrop-filter:blur(12px);border-bottom:1px solid var(--lijn)}
.kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:21px;color:var(--paars-diep);white-space:nowrap}
.merk img{height:38px;width:38px;border-radius:50%}
.taal{display:flex;gap:4px;background:var(--paars-zacht);border-radius:var(--r-pil);padding:4px}
.taal button{
  font:inherit;font-size:16px;font-weight:700;border:0;cursor:pointer;
  background:transparent;color:var(--paars-diep);padding:8px 18px;border-radius:var(--r-pil);
  min-height:42px;transition:background .15s ease;
}
.taal button[aria-pressed="true"]{background:var(--wit);box-shadow:var(--schaduw)}

/* ── knoppen ─────────────────────────────────────────── */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:60px;padding:16px 36px;border-radius:var(--r-pil);
  background:var(--paars);color:#fff;text-decoration:none;
  font-weight:800;font-size:19px;border:0;cursor:pointer;
  box-shadow:0 10px 26px rgba(122,90,168,.30);
  transition:transform .15s ease, box-shadow .15s ease;
}
.knop:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(122,90,168,.36)}
.knop.stil{background:var(--wit);color:var(--paars-diep);border:2px solid var(--paars-rand);box-shadow:none}
.knop.stil:hover{box-shadow:var(--schaduw)}
.knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-block:30px}

/* ── hero ────────────────────────────────────────────
   Eén compositie: tekstkolom links, rechts een lila vlak met daarop de
   portretfoto en de chatkaart precies waar haar telefoon zit. */
.hero{padding-top:72px;padding-bottom:104px;position:relative}
.hero::before{
  content:"";position:absolute;inset-block-start:-260px;inset-inline-end:-200px;
  width:820px;height:820px;border-radius:50%;background:var(--paars-zacht);z-index:-2;
}
.hero::after{
  content:"";position:absolute;inset-block-end:-40px;inset-inline-start:-160px;
  width:340px;height:340px;border-radius:50%;background:var(--perzik);opacity:.55;z-index:-2;
}
.hero .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:72px;align-items:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
  background:var(--paars-diep);color:#fff;border-radius:var(--r-pil);
  padding:9px 20px;font-weight:800;font-size:15px;letter-spacing:.01em;
}
.hero h1{font-size:58px;margin-bottom:20px}
.hero .lead{font-size:21px;max-width:44ch;margin-bottom:30px}

.hero-beeld{position:relative}
.beeld-stage{position:relative}
/* lila vlak dat achter de foto uitsteekt — geeft de foto een plek in plaats van
   een losse rechthoek met een schaduw */
.beeld-stage::before{
  content:"";position:absolute;z-index:0;border-radius:46px;background:#EDE4F8;
  inset-block-start:-40px;inset-block-end:96px;inset-inline-start:74px;inset-inline-end:-52px;
}
.beeld-stage>img{
  position:relative;z-index:1;width:100%;
  aspect-ratio:3/4;object-fit:cover;object-position:64% 12%;
  border-radius:34px;box-shadow:0 28px 64px rgba(66,48,95,.20);
}
/* de chatkaart ligt op de plek van haar telefoon: linksonder, nooit over haar gezicht */
.hero-chat{
  position:absolute;z-index:2;width:57%;
  inset-inline-start:-68px;inset-block-end:-64px;
}
/* in de hero is de invoerregel overbodig — hij maakt de kaart alleen langer */
.hero-chat .fon-invoer{display:none}

/* de leus als pil — staat nu alleen nog in het slotblok */
.leus{
  display:inline-flex;align-items:center;gap:12px;margin-top:6px;
  background:var(--paars-diep);color:#fff;border-radius:var(--r-pil);
  padding:14px 28px;font-weight:800;font-size:19px;
}
.hero-chat .fon{border-radius:26px;padding:8px}
.hero-chat .fon-body{padding:12px 10px;gap:8px}
.hero-chat .bel{font-size:15px;padding:10px 13px;border-radius:17px}

/* ── telefoon & chat ─────────────────────────────────── */
.fon{background:#fff;border-radius:34px;padding:10px;box-shadow:var(--schaduw-hoog);border:1px solid var(--lijn)}
.fon-kop{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;border-bottom:1px solid var(--lijn)}
.fon-kop .bol{width:34px;height:34px;border-radius:50%;background:var(--paars);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.fon-kop b{font-size:16px;display:block;line-height:1.2}
.fon-kop span{font-size:13px;color:var(--mint-diep);font-weight:700}
.fon-body{padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.bel{max-width:88%;padding:11px 15px;border-radius:20px;font-size:16px;line-height:1.5}
.bel.ik{align-self:flex-end;background:var(--paars-zacht);border-end-end-radius:6px}
.bel.zij{align-self:flex-start;background:#F3F1EF;border-end-start-radius:6px}
.bel.waarschuwing{align-self:flex-start;background:var(--perzik);border-end-start-radius:6px}
.bron{font-size:13px;color:var(--grijs);font-weight:700;margin-top:6px;display:block}
.fon-invoer{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--lijn);color:#A9A2B8;font-size:15px}
.fon-invoer .rond{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;background:var(--paars);flex:none}

/* ── vragenkaarten ───────────────────────────────────── */
.raster{display:grid;gap:22px;grid-template-columns:repeat(4,1fr);margin-top:52px}
.vraagkaart{
  background:var(--wit);border-radius:var(--r-kaart);padding:30px 26px;
  border:1px solid var(--lijn);box-shadow:var(--schaduw);
  transition:transform .18s ease, box-shadow .18s ease;
}
.vraagkaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-hoog)}
.vraagkaart .icoon{font-size:38px;line-height:1;margin-bottom:16px}
.vraagkaart b{display:block;font-size:19px;margin-bottom:6px}
.vraagkaart span{font-size:17px;color:var(--grijs)}

/* ── grote kleurvlakken ──────────────────────────────── */
.vlak{border-radius:var(--r-blok);padding:80px 72px}
.vlak.paars{background:var(--paars-zacht)}
.vlak.mint{background:var(--mint)}
.vlak.perzik{background:var(--perzik)}
.vlak.hemel{background:var(--hemel)}
.vlak.diep{background:var(--paars-diep);color:#fff}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}

/* ── kanalen ─────────────────────────────────────────── */
.kanalen{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.kanaal{
  display:flex;align-items:center;gap:11px;background:var(--wit);
  border-radius:var(--r-pil);padding:14px 24px;font-weight:800;font-size:18px;
  box-shadow:var(--schaduw);border:1px solid var(--lijn);
}
.kanaal em{font-style:normal;font-size:23px}
.kanaal.straks{opacity:.7}
.kanaal .later{font-size:14px;font-weight:700;color:var(--grijs)}

/* ── twee antwoorden ─────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:44px}
.duo-kop{display:flex;align-items:center;gap:12px;font-weight:800;margin-bottom:16px;font-size:19px}
.vink{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;font-size:17px}
.vink.ja{background:var(--mint-diep)}
.vink.nee{background:var(--paars)}

/* ── vrienden: Anna boven, lijn, vier eronder ────────── */
.vriendenblok{margin-top:56px;position:relative}
.anna-bol{
  width:158px;height:158px;border-radius:50%;background:var(--paars);color:#fff;
  display:grid;place-items:center;text-align:center;font-weight:800;font-size:21px;
  margin:0 auto;box-shadow:var(--schaduw-hoog);line-height:1.2;position:relative;z-index:2;
}
.balk{height:56px;position:relative}
.balk::before{content:"";position:absolute;top:0;left:50%;width:2px;height:26px;background:var(--paars-rand);transform:translateX(-50%)}
.balk::after{content:"";position:absolute;top:26px;left:12.5%;right:12.5%;height:2px;background:var(--paars-rand)}
.vrienden{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.vriend{
  background:var(--wit);border-radius:var(--r-kaart);padding:30px 22px;text-align:center;
  border:1px solid var(--lijn);box-shadow:var(--schaduw);position:relative;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.vriend::before{content:"";position:absolute;top:-30px;left:50%;width:2px;height:30px;background:var(--paars-rand);transform:translateX(-50%)}
.vriend .plek{height:72px;display:grid;place-items:center;width:100%}
.vriend .plek img{max-height:64px;max-width:172px;width:auto;object-fit:contain}
.vriend .naam{font-weight:800;font-size:19px;color:var(--paars-diep)}
.vriend span{font-size:16px;color:var(--grijs);line-height:1.45}

/* ── waarom ──────────────────────────────────────────── */
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.punt{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--wit);border-radius:var(--r-kaart);padding:24px;border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.punt em{font-style:normal;font-size:34px}
.punt b{font-size:18px;line-height:1.3}

/* ── signaal ─────────────────────────────────────────── */
.signaalrij{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center;margin-top:44px}
.signaal{background:var(--wit);border-radius:var(--r-kaart);padding:32px;box-shadow:var(--schaduw);border:1px solid var(--lijn);text-align:center}
.signaal .groot{font-size:62px;font-weight:800;color:var(--paars);line-height:1}
.pijl{font-size:42px;color:var(--paars);text-align:center;line-height:1}
html[dir="rtl"] .pijl{transform:scaleX(-1)}
.uitkomst{background:var(--paars-diep);color:#fff;border-radius:var(--r-kaart);padding:32px;text-align:center;font-weight:800;font-size:22px}

/* ── stappen ─────────────────────────────────────────── */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;align-items:start}
.stap{background:var(--wit);border-radius:var(--r-kaart);padding:32px;border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.stap .wanneer{display:inline-block;background:var(--paars-zacht);color:var(--paars-diep);border-radius:var(--r-pil);padding:6px 18px;font-weight:800;font-size:16px;margin-bottom:16px}
.stap ul{margin:12px 0 0;padding-inline-start:22px;color:var(--grijs);font-size:17px}
.stap li{margin-bottom:6px}

/* ── gratis ──────────────────────────────────────────── */
.niets{white-space:nowrap;font-size:150px;font-weight:800;line-height:.95;color:var(--paars);margin:10px 0 20px;letter-spacing:-.04em}
.logostrip{display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:center;margin-top:40px}
.logostrip img{max-height:36px;max-width:180px;width:auto;object-fit:contain;opacity:.85}
.logostrip .naam{font-weight:800;color:var(--paars-diep);font-size:19px}

/* ── slot & voet ─────────────────────────────────────── */
.slot{font-size:66px;font-weight:800;line-height:1.08;margin-bottom:30px;letter-spacing:-.02em}
footer{background:var(--paars-diep);color:#CFC3E2;padding-block:64px;margin-top:30px}
footer a{color:#fff}
footer .voetlijnen{display:flex;flex-wrap:wrap;gap:16px 32px;font-size:17px;margin-top:24px}
.ai-melding{background:rgba(255,255,255,.10);border-radius:var(--r-kaart);padding:22px 26px;font-size:17px;line-height:1.55;margin-top:26px;max-width:80ch}

.beeld{border-radius:var(--r-blok);overflow:hidden;box-shadow:var(--schaduw-hoog)}
.beeld img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ── animatie (subtiel) ──────────────────────────────── */
.op{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.op.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.op{opacity:1;transform:none;transition:none}}

/* ═══ TABLET — tot 980px ═════════════════════════════════ */
@media (max-width:980px){
  body{font-size:18px}
  .wrap{padding-inline:28px}
  section{padding-block:76px}
  h1{font-size:52px} h2{font-size:40px} h3{font-size:23px}
  .lead{font-size:20px}
  .vlak{padding:56px 44px}
  .hero{padding-top:44px;padding-bottom:72px}
  .hero .wrap{grid-template-columns:1fr;gap:0}
  .hero::before{inset-block-start:-200px;inset-inline-end:-180px;width:560px;height:560px}
  .hero::after{width:220px;height:220px;inset-inline-start:-110px}
  .hero h1{font-size:46px}
  .hero-beeld{margin-top:44px;max-width:520px;margin-inline:auto}
  /* de kaart staat op smal scherm ONDER de foto in de flow; het lila vlak zou daar
     overheen vallen, en de grote cirkel in de hero doet dat werk al */
  .beeld-stage::before{display:none}
  .beeld-stage>img{aspect-ratio:4/3;object-position:62% 16%}
  /* smal scherm: de kaart wordt te smal om over de foto te hangen — dus in de flow,
     met een kleine overlap zodat het één geheel blijft */
  .hero-chat{position:relative;inset:auto;z-index:3;width:min(360px,94%);margin:-52px auto 0}
  .split{grid-template-columns:1fr;gap:36px}
  .raster{grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
  .signaalrij{grid-template-columns:1fr;gap:18px}
  .pijl{transform:rotate(90deg)}
  html[dir="rtl"] .pijl{transform:rotate(90deg)}
  .stappen{grid-template-columns:1fr;gap:18px}
  .drie{grid-template-columns:1fr;gap:14px}
  .niets{font-size:110px}
  .slot{font-size:48px}
  .vrienden{grid-template-columns:repeat(2,1fr);gap:18px}
  .balk::after{left:25%;right:25%}
  .vriend:nth-child(n+3)::before{display:none}
}

/* ═══ TELEFOON — tot 620px ═══════════════════════════════ */
@media (max-width:620px){
  :root{--r-blok:28px;--r-kaart:22px}
  .wrap{padding-inline:20px}
  .merk{font-size:17px;gap:8px}
  .merk img{height:30px;width:30px}
  .taal button{font-size:14px;padding:7px 13px;min-height:38px}
  section{padding-block:56px}
  h1{font-size:40px} h2{font-size:32px} h3{font-size:21px}
  body{font-size:18px}
  .lead{font-size:19px}
  .vlak{padding:38px 22px}
  .knop{min-height:56px;padding:14px 28px;font-size:18px;width:100%}
  .leus{font-size:17px;padding:12px 22px}
  .vraagkaart{padding:20px 18px}
  .vraagkaart .icoon{font-size:30px;margin-bottom:10px}
  .vraagkaart b{font-size:17px} .vraagkaart span{font-size:16px}
  .duo{grid-template-columns:1fr;gap:24px}
  .vrienden{grid-template-columns:1fr;gap:14px}
  .balk{height:34px}
  .balk::before{height:34px} .balk::after{display:none}
  .vriend::before{display:none}
  .vriend{flex-direction:row;text-align:start;gap:16px;padding:18px}
  .vriend .plek{width:110px;height:52px;flex:none}
  .anna-bol{width:120px;height:120px;font-size:18px}
  .niets{font-size:78px}
  .slot{font-size:36px}
  .signaal{padding:22px} .signaal .groot{font-size:46px}
  .uitkomst{padding:20px;font-size:19px}
  .stap{padding:22px}
  .logostrip{gap:22px}
  footer{padding-block:44px}
}

/* ═══ TOEVOEGINGEN STRUCTUUR B ═══════════════════════════ */

/* de vork in de hero */
.vork{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);
  padding:28px 30px;box-shadow:var(--schaduw);margin-block:32px;
}
.vork-vraag{font-weight:800;font-size:21px;margin:0}
.vork .knoppen{margin-block:18px 0}
.vork .knop{min-height:56px;padding:14px 28px;font-size:18px}
.vork-paneel{margin-top:22px;padding-top:22px;border-top:1px solid var(--lijn)}
.vork-paneel h3{margin-bottom:10px}
.vork-paneel p{font-size:18px;color:var(--grijs)}
.vork-paneel .knop{margin-top:8px}

/* punt-kaarten met tekst eronder */
.punt span.mini{line-height:1.5}
.punt b{display:block}

/* het verhaal */
.verhaal{list-style:none;margin:34px 0 0;padding:0;position:relative}
.verhaal::before{content:"";position:absolute;inset-block:8px;inset-inline-start:9px;width:2px;background:var(--paars-rand)}
.verhaal li{position:relative;padding-inline-start:40px;margin-bottom:26px}
.verhaal li::before{
  content:"";position:absolute;inset-inline-start:0;top:9px;width:20px;height:20px;
  border-radius:50%;background:var(--paars);border:4px solid var(--papier);
}
.verhaal b{display:block;font-size:19px;margin-bottom:4px}
.verhaal span{color:var(--grijs);font-size:18px}

/* kantoorblok */
.etiket{
  display:inline-block;background:var(--wit);color:var(--mint-diep);
  border-radius:var(--r-pil);padding:7px 18px;font-weight:800;font-size:15px;margin-bottom:20px;
}
.kt-rij{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:52px}
.kt-prijs .niets{margin:4px 0 14px}
.kt-volgend{background:var(--wit);border-radius:var(--r-kaart);padding:32px;border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.kt-volgend .knop{margin-top:18px}

/* vriendkaart: vakgebied boven, logo als bewijs eronder */
.vriend .vakgebied{font-weight:800;font-size:18px;color:var(--paars-diep);line-height:1.3}
.vriend .plek{opacity:.9}

@media (max-width:980px){
  .kt-rij{grid-template-columns:1fr;gap:28px;margin-top:36px}
  .vork{padding:24px}
  .vork-vraag{font-size:19px}
}
@media (max-width:620px){
  .vork{padding:20px;margin-block:24px}
  .hero h1{font-size:36px}
  .hero .lead{font-size:18px;margin-bottom:24px}
  .eyebrow{font-size:13px;padding:8px 16px;margin-bottom:18px}
  .hero-beeld{margin-top:34px}
  .hero-chat{width:96%;margin:-46px auto 0}
  .hero-chat .bel{font-size:15px}
  .vork .knop{width:100%}
  .verhaal li{padding-inline-start:34px;margin-bottom:20px}
  .verhaal b{font-size:18px} .verhaal span{font-size:17px}
  .vriend{flex-direction:column;text-align:center;gap:12px}
  .vriend .plek{width:100%}
  .etiket{font-size:14px}
  .kt-volgend{padding:22px}
}


/* vier partners als links */
.vrienden-links a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.vrienden-links a:hover{border-bottom-color:#fff}
.vrienden-links span{opacity:.5;margin-inline:4px}
a.vriend{text-decoration:none;transition:transform .18s ease, box-shadow .18s ease}
a.vriend:hover{transform:translateY(-4px);box-shadow:var(--schaduw-hoog)}

/* brede fotoband binnen een kleurvlak (blok "Anna weet niet alles") */
.band{
  margin:36px 0 8px;border-radius:28px;overflow:hidden;
  box-shadow:0 18px 44px rgba(66,48,95,.14);
}
.band img{width:100%;aspect-ratio:2.4/1;object-fit:cover;object-position:center 28%}
@media (max-width:980px){ .band{margin:28px 0 4px} .band img{aspect-ratio:2/1} }
@media (max-width:620px){ .band{border-radius:20px;margin:22px 0 2px} .band img{aspect-ratio:3/2} }

/* ── inlogknop in de kop + paneel met de vier omgevingen ─────────────── */
.kop-rechts{display:flex;align-items:center;gap:12px}
.knop-inlog{
  font:inherit;font-size:16px;font-weight:800;cursor:pointer;
  background:var(--paars);color:#fff;border:0;border-radius:var(--r-pil);
  padding:11px 24px;min-height:44px;
  box-shadow:0 6px 16px rgba(122,90,168,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.knop-inlog:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(122,90,168,.34)}
.knop-inlog[aria-expanded="true"]{background:var(--paars-diep)}

.inlogpaneel{
  position:absolute;inset-inline:0;top:100%;z-index:60;
  background:var(--wit);border-bottom:1px solid var(--lijn);
  box-shadow:0 22px 44px rgba(66,48,95,.16);
  padding-block:28px 26px;
}
.inlog-kop{font-weight:800;font-size:19px;margin:0 0 18px}
.inlog-opties{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.inlog-optie{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  text-decoration:none;padding:20px 16px;border-radius:var(--r-kaart);
  border:1px solid var(--lijn);background:var(--papier);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.inlog-optie:hover{transform:translateY(-3px);box-shadow:var(--schaduw);border-color:var(--paars-rand)}
.inlog-optie .plek{height:44px;display:grid;place-items:center;width:100%}
.inlog-optie .plek img{max-height:40px;max-width:150px;width:auto;object-fit:contain}
.inlog-optie b{font-size:17px;color:var(--paars-diep)}
.inlog-optie span:not(.plek){font-size:15px;color:var(--grijs);line-height:1.4}
.inlog-voet{margin:18px 0 0}

@media (max-width:980px){
  .inlog-opties{grid-template-columns:repeat(2,1fr);gap:12px}
  .knop-inlog{font-size:15px;padding:10px 18px;min-height:42px}
  .kop-rechts{gap:8px}
}
@media (max-width:620px){
  .inlog-opties{grid-template-columns:1fr;gap:10px}
  .inlog-optie{flex-direction:row;text-align:start;gap:14px;padding:14px}
  .inlog-optie .plek{width:96px;height:36px;flex:none}
  .inlog-optie .plek img{max-height:32px;max-width:96px}
  .inlog-optie b{font-size:16px}
  .inlog-optie span:not(.plek){font-size:14px}
  .knop-inlog{font-size:14px;padding:9px 14px;min-height:40px}
  .inlogpaneel{padding-block:20px}
  .inlog-kop{font-size:17px;margin-bottom:14px}
}