/* =====================================================================
   Brune Solar - gedeeld stijlsysteem (design tokens + basis)
   Versie 2.0 "Premium"  |  05-07-2026
   Eén bron voor kleuren, typografie, witruimte en knoppen.
   Lichte basis, goud als accent — verfijnde afwerking.
   ===================================================================== */

:root{
  /* --- Kleuren: neutraal --- */
  --bg:#f8f5ee;          /* paginakleur, warm off-white */
  --surface:#fefdf9;     /* kaarten, panelen */
  --surface-2:#f0eadd;   /* subtiele blokken */
  --ink:#1b1814;         /* koppen, bijna-zwart groen */
  --text:#40392e;        /* lopende tekst */
  --muted:#877e6c;       /* bijschriften, secundair */
  --line:rgba(40,32,18,.14);   /* randen, scheidingen */
  --line-soft:rgba(40,32,18,.08);

  /* --- Kleuren: merk groen --- */
  --green-900:#241f1a;
  --green-700:#2b251e;   /* hoofdgroen */
  --green-500:#8a591b;
  --green-300:#d99c4a;
  --green-pale:#f5eee0;

  /* --- Kleuren: accent goud --- */
  --gold:#e08b28;        /* accent / CTA */
  --gold-deep:#a85a10;   /* hover, tekst op licht */
  --gold-soft:#f4dfc0;   /* zachte vlakken */
  --gold-grad:linear-gradient(180deg,#eda54e 0%,#e08b28 55%,#cf7717 100%);

  /* --- Typografie --- */
  --font-head:"Instrument Serif",Georgia,serif;
  --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-kicker:.72rem;
  --fs-small:.92rem;
  --fs-body:1.0625rem;
  --fs-lead:1.2rem;
  --fs-h3:clamp(1.2rem,1.05rem + .6vw,1.45rem);
  --fs-h2:clamp(1.6rem,1.25rem + 1.5vw,2.3rem);
  --fs-h1:clamp(2.1rem,1.55rem + 2.6vw,3.4rem);

  /* --- Witruimte (8-punts ritme) --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* --- Vorm --- */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;

  /* --- Schaduw: gelaagd en zacht --- */
  --shadow-sm:0 1px 2px rgba(22,36,27,.05),0 3px 10px rgba(22,36,27,.04);
  --shadow:0 1px 2px rgba(22,36,27,.06),0 12px 32px -14px rgba(22,36,27,.20);
  --shadow-lg:0 2px 4px rgba(22,36,27,.06),0 30px 64px -30px rgba(22,36,27,.30);

  /* --- Layout --- */
  --container:1080px;
  --container-wide:1240px;
  --container-narrow:760px;

  /* --- Breakpoints (ter referentie): 768px en 1080px --- */
}

/* =====================  Basis  ===================== */
.bs *{box-sizing:border-box}

.bs{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:rgba(224,139,40,.28);color:#16241b}

/* =====================  Typografie  ===================== */
.bs h1,.bs h2,.bs h3{
  font-family:var(--font-head);
  color:var(--ink);
  line-height:1.1;
  font-weight:400;
  margin:0 0 var(--sp-4);
  letter-spacing:-.018em;
  text-wrap:balance;
}
.bs h1{font-size:var(--fs-h1)}
.bs h2{font-size:var(--fs-h2)}
.bs h3{font-size:var(--fs-h3);line-height:1.25}
.bs p{margin:0 0 var(--sp-4);text-wrap:pretty}
.bs .lead{font-size:var(--fs-lead);color:var(--text);line-height:1.6}
.bs .muted{color:var(--muted)}

.bs .kicker{
  display:inline-block;
  font-family:var(--font-body);
  font-size:var(--fs-kicker);
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:var(--sp-3);
}

.bs a{color:var(--green-700);text-decoration:none;transition:color .15s ease}
.bs a:hover{color:var(--gold-deep)}

/* =====================  Layout  ===================== */
.bs .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
.bs .container.narrow{max-width:var(--container-narrow)}
.bs .container.wide{max-width:var(--container-wide)}
.bs .section{padding-block:var(--sp-9)}
.bs .section.tight{padding-block:var(--sp-7)}

/* =====================  Knoppen  ===================== */
.bs .btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  line-height:1;cursor:pointer;border:none;
  padding:14px 24px;border-radius:var(--r-pill);
  transition:transform .2s ease,box-shadow .25s ease,background .2s ease;
}
.bs .btn:hover{transform:translateY(-2px)}
.bs .btn .arrow{transition:transform .2s ease}
.bs .btn:hover .arrow{transform:translateX(3px)}
.bs .btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

.bs .btn-primary{background:var(--gold-grad);color:#231a05;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px -10px rgba(224,139,40,.75)}
.bs .btn-primary:hover{background:var(--gold-deep);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -10px var(--gold-deep)}

.bs .btn-green{background:linear-gradient(180deg,#3b342c,#2b251e);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px var(--green-700)}
.bs .btn-green:hover{background:var(--green-900);color:#fff}

.bs .btn-ghost{background:transparent;color:var(--green-700);border:1px solid var(--line);box-shadow:none}
.bs .btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)}

/* =====================  Kaart  ===================== */
.bs .card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.bs .card:hover{box-shadow:var(--shadow);border-color:var(--line)}

/* =====================  Mobiel  ===================== */
@media (max-width:768px){
  .bs .section{padding-block:var(--sp-7)}
  .bs .container{padding-inline:var(--sp-4)}
}

/* =====================================================================
   Uniforme header (alle pagina's behalve home gebruiken exact dit blok)
   Donkergroene balk, home-logo, uitgelijnd op de content-kolom.
   Globale classes (niet onder .bs) zodat het op elke pagina werkt.
   ===================================================================== */
.bsnav{position:sticky;top:0;z-index:1000;
  background:linear-gradient(180deg,#363028 0%,var(--green-700) 100%);
  border-bottom:1px solid rgba(224,139,40,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px -12px rgba(22,19,15,.6);
  font-family:var(--font-body)}
.bsnav-in{max-width:var(--container);margin-inline:auto;padding:0 var(--sp-5);
  height:84px;display:flex;align-items:center;gap:var(--sp-5)}
.bsnav-logo{display:inline-flex;align-items:center;flex-shrink:0}
.bsnav-logo img{height:46px;width:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}

.bsnav-toggle{position:absolute;opacity:0;pointer-events:none}
.bsnav-links{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.bsnav-links a{color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;
  font-weight:500;white-space:nowrap;letter-spacing:.01em;transition:color .15s}
.bsnav-links a:hover{color:#fff}
.bsnav-links a.active{color:var(--gold);border-bottom:2px solid var(--gold);padding-bottom:3px}
.bsnav-cta{background:var(--gold-grad);color:#231a05 !important;padding:10px 20px;
  border-radius:999px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px -10px var(--gold);
  transition:transform .2s ease,background .2s ease,box-shadow .25s ease}
.bsnav-cta:hover{background:var(--gold-deep);color:#fff !important;
  transform:translateY(-2px);border-bottom:none !important;padding-bottom:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 26px -10px var(--gold-deep)}
.bsnav-ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff !important;
  padding:9px 18px;border-radius:999px;font-weight:600;
  transition:transform .2s ease,background .2s ease,border-color .2s ease}
.bsnav-ghost:hover{background:rgba(255,255,255,.10);border-color:#fff;
  transform:translateY(-2px);border-bottom:1.5px solid #fff !important;padding-bottom:9px}
.bsnav-cta-green{background:var(--green-300);color:#0a2618 !important;padding:10px 20px;
  border-radius:999px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -10px rgba(217,156,74,.7);
  transition:transform .2s ease,background .2s ease}
.bsnav-cta-green:hover{background:#5fc187;color:#08231a !important;
  transform:translateY(-2px);border-bottom:none !important;padding-bottom:10px}

.bsnav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:8px;margin-left:auto}
.bsnav-burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.bsnav-toggle:checked ~ .bsnav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bsnav-toggle:checked ~ .bsnav-burger span:nth-child(2){opacity:0}
.bsnav-toggle:checked ~ .bsnav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1080px){
  .bsnav-burger{display:flex}
  .bsnav-links{position:absolute;top:100%;left:0;right:0;margin:0;padding:6px 0;
    flex-direction:column;align-items:stretch;gap:0;display:none;
    background:var(--green-700);box-shadow:0 14px 26px rgba(0,0,0,.28)}
  .bsnav-toggle:checked ~ .bsnav-links{display:flex}
  .bsnav-links a{padding:13px 24px;font-size:16px}
  .bsnav-links a.active{border-bottom:none;padding-bottom:13px}
  .bsnav-cta,.bsnav-ghost,.bsnav-cta-green{margin:8px 24px;text-align:center;align-self:flex-start}
}
@media (max-width:768px){
  .bsnav{position:fixed;top:0;left:0;right:0}
  body{padding-top:64px}
  .bsnav-in{height:64px}
}