/* Souffleur — huisstijl.
   Bewust in het idioom van CRA-Portal (navy + teal, Cormorant Garamond boven Inter): dat is de
   uitstraling die een inkoper bij een fabrikant herkent als een bedrijf, niet als een demo.
   Het roze van het beeldmerk blijft in het logo staan en verder nergens; als paginakleur leest
   het als consumenten-app.

   Eén bestand voor alle taalversies. De Chinese variant heeft een ANDERE structuur (dichter,
   meer tabellen), niet een ander uiterlijk — vandaar dat de extra bouwstenen hier onderaan staan
   en niet in een eigen bestand. */

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

:root{
  --navy:#0a1628; --navy-licht:#1a2a4a; --navy-diep:#050d18;
  --teal:#0d7377; --teal-licht:#14919b; --teal-diep:#095456;
  --room:#f8f6f3; --wit:#ffffff;
  --grijs-50:#fafafa; --grijs-100:#f5f6f7; --grijs-200:#e8eaec; --grijs-300:#d1d5d9;
  --grijs-500:#787f88; --grijs-700:#4b535c;
  --tekst:#1a1a1a; --tekst-licht:#4b535c; --tekst-dof:#6b7280;
  --lijn:#e3e6ea;
  --breed:1200px; --smal:820px;
  --rond-s:4px; --rond-m:8px; --rond-l:12px;
}

*,*::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;
  font-weight:400;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(--navy)}
h1{font-size:clamp(2.4rem,4.8vw,3.9rem);letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.01em}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{color:var(--tekst-licht)}
a{color:var(--teal)}

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

/* --- kop --- */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  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(--navy);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.45rem;font-weight:700;
  letter-spacing:-.01em}
.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(--teal)}
.taalkeuze{display:flex;gap:10px;align-items:center;padding-left:22px;
  border-left:1px solid var(--lijn);font-size:.85rem}
.taalkeuze a{color:var(--grijs-500);text-decoration:none}
.taalkeuze a[aria-current]{color:var(--navy);font-weight:600}
@media(max-width:900px){nav.hoofd a.wijk{display:none}}
@media(max-width:620px){.taalkeuze{padding-left:0;border-left:0}
  nav.hoofd{gap:14px}}

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

/* --- vlakken --- */
section{padding:96px 0;border-top:1px solid var(--lijn)}
section.room{background:var(--room);border-top:0}
section.donker{background:var(--navy);border-top:0;color:#fff}
section.donker h2,section.donker h3{color:#fff}
section.donker p{color:rgba(255,255,255,.72)}
.kop-blok{max-width:64ch;margin-bottom:52px}
.kop-blok p{font-size:1.08rem;margin-top:16px}
.opschrift{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--teal);margin-bottom:14px;font-family:'Inter',sans-serif}
section.donker .opschrift{color:var(--teal-licht)}

/* --- hero --- */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-licht) 100%);color:#fff;
  padding:120px 0 108px;border-top:0}
.hero h1{color:#fff;max-width:17ch}
.hero .lead{font-size:clamp(1.05rem,1.9vw,1.3rem);color:rgba(255,255,255,.78);
  max-width:58ch;margin-top:26px;font-weight:300}
.hero .fijn{margin-top:30px;font-size:.9rem;color:rgba(255,255,255,.55)}

/* --- roosters --- */
.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:var(--rond-m);
  padding:30px}
.kaart h3{margin-bottom:10px}
.kaart p{font-size:.95rem}
section.room .kaart{background:var(--wit)}
section.donker .kaart{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

/* genummerde stappen */
.stap{position:relative;padding-left:56px}
.stap .nr{position:absolute;left:0;top:2px;width:38px;height:38px;border-radius:50%;
  background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.95rem;font-family:'Inter',sans-serif}
section.donker .stap .nr{background:var(--teal-licht);color:var(--navy)}

/* --- tabel (kern van de Chinese variant, maar overal bruikbaar) --- */
.tabelbak{overflow-x:auto;border:1px solid var(--lijn);border-radius:var(--rond-m)}
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(--navy);white-space:nowrap;
  font-size:.86rem;letter-spacing:.02em}
tr:last-child td{border-bottom:0}
td strong{color:var(--navy)}

/* --- prijzen --- */
.prijzen{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.prijzen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.prijzen{grid-template-columns:1fr}}
.plan{border:1px solid var(--lijn);border-radius:var(--rond-m);padding:30px;background:var(--wit);
  display:flex;flex-direction:column}
.plan.uitgelicht{border-color:var(--teal);box-shadow:0 8px 30px rgba(13,115,119,.10)}
.plan .naam{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;color:var(--navy);
  font-weight:600}
.plan .bedrag{font-size:2rem;color:var(--navy);font-weight:600;margin:12px 0 2px;
  font-family:'Inter',sans-serif;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(--teal);opacity:.5}
.plan .knop{margin-top:22px;text-align:center;padding:12px 20px}

/* --- feiten --- */
.feiten{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
@media(max-width:760px){.feiten{grid-template-columns:repeat(2,1fr)}}
.feit .getal{font-size:2.4rem;font-weight:600;color:var(--teal-licht);
  font-family:'Inter',sans-serif;letter-spacing:-.03em;line-height:1.1}
.feit .wat{font-size:.88rem;color:rgba(255,255,255,.62);margin-top:6px}
section.room .feit .getal{color:var(--teal)}
section.room .feit .wat{color:var(--tekst-dof)}

/* --- lijstjes --- */
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(--teal);border-top:0;border-right:0;transform:rotate(-45deg)}
section.donker ul.vink li{color:rgba(255,255,255,.75)}
section.donker ul.vink li::before{border-color:var(--teal-licht)}

/* --- oproep --- */
.oproep{background:var(--navy);color:#fff;padding:88px 0;text-align:center;border-top:0}
.oproep h2{color:#fff;margin:0 auto;max-width:20ch}
.oproep p{color:rgba(255,255,255,.72);max-width:56ch;margin:18px auto 0}
.oproep .knoppen{justify-content:center}

/* --- voet --- */
footer{background:var(--navy-diep);color:rgba(255,255,255,.6);padding:64px 0 40px;
  font-size:.88rem}
footer .kolommen{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:38px;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)}

/* --- Chinese variant: dichter zetsel, want die leesconventie verwacht meer per scherm --- */
html[lang^="zh"] body{font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',
  'Inter',sans-serif;line-height:1.85;font-size:15.5px}
html[lang="zh-Hant"] body{font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',
  'Inter',sans-serif}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3,html[lang^="zh"] h4{
  font-family:inherit;font-weight:700;letter-spacing:0;line-height:1.35}
html[lang^="zh"] h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
html[lang^="zh"] h2{font-size:clamp(1.45rem,2.6vw,1.95rem)}
html[lang^="zh"] h3{font-size:1.08rem}
html[lang^="zh"] section{padding:64px 0}
html[lang^="zh"] .hero{padding:78px 0 70px}
html[lang^="zh"] .kop-blok{margin-bottom:36px}
html[lang^="zh"] .merk{font-family:inherit;font-weight:700;font-size:1.2rem}
html[lang^="zh"] .plan .naam{font-family:inherit;font-size:1.15rem;font-weight:700}
html[lang^="zh"] footer h4{font-family:inherit}
/* Ankerbalk: de Chinese pagina is lang en informatiedicht, dus krijgt hij een eigen
   inhoudsopgave die meeschuift. De Westerse variant heeft die bewust niet. */
.ankers{background:var(--grijs-100);border-bottom:1px solid var(--lijn);position:sticky;top:74px;
  z-index:30}
.ankers .wrap{display:flex;gap:26px;overflow-x:auto;padding-top:12px;padding-bottom:12px;
  font-size:.88rem;white-space:nowrap}
.ankers a{color:var(--tekst-licht);text-decoration:none}
.ankers a:hover{color:var(--teal)}