/* Gedeeld door modules.html, contact.html en de modulepagina's in modules/.
   index.html heeft bewust een eigen blok: dat bestand moet zelfstandig
   blijven voor de artifact-versie. Verandert hier een kleur of een letter,
   pas hem dan ook daar aan. */
:root{
  --paper:#FFFFFF; --paper-2:#EDF1F3; --ink:#0E1A21; --ink-2:#33454F; --muted:#5F727D;
  --line:#D8E0E5; --line-2:#B4C3CC;
  --brand:#123F5E; --brand-tint:#DBE7EF; --coral:#C2461F;
  --btn-bg:#123F5E; --btn-fg:#FFFFFF;
  /* Ronding van bedienbare dingen: knoppen, schakelaars, keuzevlakken.
     Een volle pilvorm, omdat het logo en de tekeningen rond zijn: ronde
     bogen in de letters, ronde uiteinden aan elke lijn. Vormen binnen de
     tekeningen houden hun eigen ronding, die staat los hiervan. */
  --radius:999px;
  --disp:"Gabarito","Helvetica Neue",Arial,sans-serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0C161C; --paper-2:#111F27; --ink:#E9EFF3; --ink-2:#BCCBD4; --muted:#8BA0AB;
  --line:#22333D; --line-2:#354C58;
  --brand:#7CB9E0; --brand-tint:#1A3A4A80; --coral:#FF8B60;
  --btn-bg:#7CB9E0; --btn-fg:#0C161C;
}}
:root[data-theme="dark"]{
  --paper:#0C161C; --paper-2:#111F27; --ink:#E9EFF3; --ink-2:#BCCBD4; --muted:#8BA0AB;
  --line:#22333D; --line-2:#354C58;
  --brand:#7CB9E0; --brand-tint:#1A3A4A80; --coral:#FF8B60;
  --btn-bg:#7CB9E0; --btn-fg:#0C161C;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.012em;text-wrap:balance;margin:0;line-height:1.06}
p{margin:0}
a{color:inherit}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:28px}
.btn{display:inline-block;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font-weight:600;font-size:.95rem;padding:12px 20px;border-radius:var(--radius);border:2px solid var(--btn-bg);transition:transform .12s ease}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:hover{transform:translate(0,-2px)}
a:focus-visible{outline:2px solid var(--brand);outline-offset:4px}

/* thema-omschakeling voor de tekeningen, gelijk aan index.html */
img.t-licht{display:block} img.t-donker{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) img.t-licht{display:none}
  :root:not([data-theme="light"]) img.t-donker{display:block}
}
:root[data-theme="dark"] img.t-licht{display:none}
:root[data-theme="dark"] img.t-donker{display:block}
:root[data-theme="light"] img.t-licht{display:block}
:root[data-theme="light"] img.t-donker{display:none}

/* koptekst met de navigatie op een schaprand */
header{position:sticky;top:0;z-index:30;background:var(--paper)}
.bar{display:flex;align-items:flex-end;gap:36px;padding-top:20px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto;padding-bottom:14px}
.logo img{height:46px;width:auto}
.logo b{font-family:var(--disp);font-weight:700;font-size:1.5rem;letter-spacing:-.035em}
.rail{display:flex;gap:4px}
.rail a{position:relative;text-decoration:none;color:var(--ink-2);font-size:.95rem;padding:6px 14px 14px;transition:transform .16s cubic-bezier(.3,1.4,.5,1),color .16s}
.rail a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:4px;border-radius:2px;background:var(--brand);opacity:0;transition:opacity .16s}
.rail a:hover{transform:translateY(-5px);color:var(--ink)}
.rail a:hover::after,.rail a[aria-current]::after{opacity:1}
.rail a[aria-current]{color:var(--ink);font-weight:600}
.shelfline{height:5px;background:var(--ink);border-radius:2px}
.bar .btn{margin-bottom:10px;padding:9px 16px}
@media(max-width:940px){
  /* op een telefoon verdween de navigatie helemaal, nu schuift ze onder het
     logo door in een rij die je opzij kunt vegen */
  .bar{flex-wrap:wrap;gap:10px 16px;align-items:center;padding-top:14px}
  .logo{padding-bottom:0}
  .logo img{height:36px}
  .bar .btn{margin-bottom:0;padding:8px 14px;font-size:.85rem}
  .rail{order:3;width:100%;overflow-x:auto;gap:0;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail a{padding:2px 14px 12px;white-space:nowrap;font-size:.92rem}
  .rail a:hover{transform:none}
}

/* kop van de pagina */
.top{display:grid;grid-template-columns:1fr .9fr;gap:56px;align-items:end;padding-block:72px 60px}
h1{font-weight:800;letter-spacing:-.02em;font-size:clamp(2.6rem,5.4vw,4.2rem)}
.top p{color:var(--ink-2);font-size:1.09rem;max-width:46ch}
.back{display:inline-block;margin-top:20px;font-size:.95rem;color:var(--brand);text-decoration:none;border-bottom:2px solid var(--brand);padding-bottom:2px}
@media(max-width:940px){.top{grid-template-columns:1fr;gap:24px;align-items:start;padding-block:44px 40px}}

/* afsluiting */
.slot{background:var(--paper-2);padding-block:72px;border-top:1px solid var(--line)}
.slot h2{font-size:clamp(1.7rem,3vw,2.3rem);max-width:20ch}
.slot p{color:var(--ink-2);margin-top:14px;max-width:48ch}
.slot .knoppen{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
footer{border-top:1px solid var(--line);padding-block:32px;font-size:.9rem;color:var(--muted);display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
@media(max-width:820px){
  .wrap{padding-inline:20px}
  h1{font-size:clamp(2.1rem,8vw,2.8rem)}
  .top{padding-block:32px 28px}
  .top p{font-size:1rem}
  .groep{padding-block:18px 46px}
  .groep > h2{padding-top:26px;font-size:1.35rem}
  .kaarten{margin-top:28px;gap:32px}
  .slot{padding-block:52px}
  .slot .knoppen .btn{flex:1 1 auto;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}