/* CrisisKluis / Vicarium — één huisstijl, twee merken.

   Het onderwerp is opvolging en bevoegdheid: notaris-terrein, geen software-terrein. Vandaar
   diep groen met zand in plaats van het navy/teal dat Souffleur en CRA-Portal gebruiken — anders
   lijken alle drie de merken één product. Typografie wel hetzelfde (Cormorant boven Inter): dat
   is het huis.

   De twee merken delen dit bestand volledig. Het verschil zit in de TEKST en de STRUCTUUR van de
   pagina, niet in de opmaak — anders onderhoud je twee huisstijlen voor één product. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --diep:#16302a; --diep-licht:#24463d; --diep-donker:#0d1f1b;
  --zand:#c9a86a; --zand-licht:#dcc7a3; --zand-diep:#a8873f;
  --room:#f7f5f0; --wit:#ffffff;
  --grijs-100:#f4f5f4; --grijs-200:#e6e9e7; --grijs-300:#d0d5d2;
  --tekst:#1a1f1d; --tekst-licht:#4c5551; --tekst-dof:#6b736f;
  --lijn:#e2e6e3;
  --rood:#a03a2c;
  --breed:1180px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.7;color:var(--tekst);background:var(--wit);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.18;
  color:var(--diep)}
h1{font-size:clamp(2.3rem,4.6vw,3.7rem);letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.01em}
h3{font-size:clamp(1.1rem,1.9vw,1.35rem)}
p{color:var(--tekst-licht)}
a{color:var(--zand-diep)}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 28px}

header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--diep);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;font-weight:700}
.merk img{height:30px;width:auto}
nav.hoofd{display:flex;align-items:center;gap:26px;margin-left:auto}
nav.hoofd a{color:var(--tekst-licht);text-decoration:none;font-size:.92rem;font-weight:500}
nav.hoofd a:hover{color:var(--zand-diep)}
nav.hoofd a.knop{color:#fff}
@media(max-width:880px){nav.hoofd a.wijk{display:none}nav.hoofd{gap:16px}}

.knop{display:inline-block;padding:14px 30px;border-radius:4px;text-decoration:none;
  font-weight:600;font-size:.95rem;border:1px solid transparent;transition:.2s ease}
.knop.vol{background:var(--zand-diep);color:#fff}
.knop.vol:hover{background:#8f7233}
.knop.rand{border-color:var(--grijs-300);color:var(--diep);background:var(--wit)}
.knop.rand:hover{border-color:var(--zand-diep);color:var(--zand-diep)}
.knop.licht{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.knop.licht:hover{background:rgba(255,255,255,.12)}
.knoppen{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

section{padding:92px 0;border-top:1px solid var(--lijn)}
section.room{background:var(--room);border-top:0}
section.donker{background:var(--diep);border-top:0;color:#fff}
section.donker h2,section.donker h3{color:#fff}
section.donker p{color:rgba(255,255,255,.74)}
.kop-blok{max-width:64ch;margin-bottom:50px}
.kop-blok p{font-size:1.07rem;margin-top:16px}
.opschrift{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--zand-diep);margin-bottom:14px}
section.donker .opschrift{color:var(--zand)}

.hero{background:linear-gradient(158deg,var(--diep) 0%,var(--diep-licht) 100%);color:#fff;
  padding:118px 0 104px;border-top:0}
.hero h1{color:#fff;max-width:18ch}
.hero .lead{font-size:clamp(1.05rem,1.9vw,1.28rem);color:rgba(255,255,255,.8);
  max-width:58ch;margin-top:26px;font-weight:300}
.hero .fijn{margin-top:30px;font-size:.9rem;color:rgba(255,255,255,.55)}

.rooster{display:grid;gap:28px}
.rooster.k2{grid-template-columns:repeat(2,1fr)}
.rooster.k3{grid-template-columns:repeat(3,1fr)}
.rooster.k4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.rooster.k3,.rooster.k4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rooster.k2,.rooster.k3,.rooster.k4{grid-template-columns:1fr}}

.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:6px;padding:30px}
.kaart h3{margin-bottom:10px}
.kaart p{font-size:.95rem}
section.donker .kaart{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}

.stap{position:relative;padding-left:58px}
.stap .nr{position:absolute;left:0;top:2px;width:40px;height:40px;border-radius:50%;
  background:var(--zand-diep);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.95rem}
section.donker .stap .nr{background:var(--zand);color:var(--diep)}

.tabelbak{overflow-x:auto;border:1px solid var(--lijn);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--wit)}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--lijn);vertical-align:top}
th{background:var(--grijs-100);font-weight:600;color:var(--diep);font-size:.86rem;
  white-space:nowrap}
tr:last-child td{border-bottom:0}
td strong{color:var(--diep)}

.prijzen{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.prijzen{grid-template-columns:1fr}}
.plan{border:1px solid var(--lijn);border-radius:6px;padding:32px;background:var(--wit);
  display:flex;flex-direction:column}
.plan.uitgelicht{border-color:var(--zand-diep);box-shadow:0 8px 30px rgba(168,135,63,.12)}
.plan .naam{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;color:var(--diep);
  font-weight:600}
.plan .bedrag{font-size:2.1rem;color:var(--diep);font-weight:600;margin:12px 0 2px;
  letter-spacing:-.02em}
.plan .per{font-size:.85rem;color:var(--tekst-dof);margin-bottom:18px}
.plan ul{list-style:none;font-size:.92rem;color:var(--tekst-licht);flex:1}
.plan li{padding:7px 0 7px 22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;
  border-radius:50%;background:var(--zand-diep);opacity:.55}
.plan .knop{margin-top:24px;text-align:center;padding:12px 20px}

ul.vink{list-style:none}
ul.vink li{position:relative;padding:8px 0 8px 30px;color:var(--tekst-licht);font-size:.97rem}
ul.vink li::before{content:"";position:absolute;left:6px;top:17px;width:9px;height:9px;
  border:2px solid var(--zand-diep);border-top:0;border-right:0;transform:rotate(-45deg)}
section.donker ul.vink li{color:rgba(255,255,255,.78)}
section.donker ul.vink li::before{border-color:var(--zand)}

/* Waarschuwingsblok: het punt dat mensen missen (toegang is geen bevoegdheid). */
.let-op{border-left:3px solid var(--rood);background:#fdf6f4;padding:22px 26px;border-radius:4px;
  margin-top:34px}
.let-op strong{color:var(--rood)}
section.donker .let-op{background:rgba(255,255,255,.07);border-left-color:var(--zand)}
section.donker .let-op strong{color:var(--zand)}

.oproep{background:var(--diep);color:#fff;padding:88px 0;text-align:center;border-top:0}
.oproep h2{color:#fff;margin:0 auto;max-width:22ch}
.oproep p{color:rgba(255,255,255,.74);max-width:58ch;margin:18px auto 0}
.oproep .knoppen{justify-content:center}

footer{background:var(--diep-donker);color:rgba(255,255,255,.6);padding:62px 0 38px;
  font-size:.88rem}
footer .kolommen{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:820px){footer .kolommen{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px;font-weight:600}
footer a{color:rgba(255,255,255,.6);text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:#fff}
footer .onder{padding-top:26px;display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.42)}