@charset "utf-8";

/* ================================
   TYPOGRAFIE BASIS (rem + variabelen)
   ================================ */

:root{
  --tekst-kleur: #666;
  --tekst-subtiel: #777;

  --link-kleur: #666;
  --link-hover: #39F;
  --link-visited: #336600;

  --font-sans: Calibri, "Segoe UI", Arial, Helvetica, sans-serif;

  /* 1rem ˜ 16px ? schaalt subtiel mee */
  --base-font-size: clamp(1rem, 0.98rem + 0.2vw, 1.0625rem);
  --base-line-height: 1.6;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
}

html{
  font-size: var(--base-font-size);
}

body{
  font-family: var(--font-sans);
  color: var(--tekst-kleur);
  line-height: var(--base-line-height);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* ================================
   BASIS ELEMENTEN
   ================================ */

p{
  margin: 0 0 var(--space-3);
}

/* Koppen (optioneel, maar correct aanwezig) */
h1, h2, h3{
  font-family: var(--font-sans);
  color: var(--tekst-kleur);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
  font-weight: 700;
}

h1{ font-size: 2rem; }      /* ±32px */
h2{ font-size: 1.5rem; }    /* ±24px */
h3{ font-size: 1.25rem; }   /* ±20px */

/* Lijsten */
ul, ol{
  margin: 0 0 var(--space-3) 1.25rem;
  padding: 0;
}

li{
  margin: 0.35rem 0;
}

/* Links */
a:link{ color: var(--link-kleur); text-decoration: none; }
a:visited{ color: var(--link-visited); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: none; }
a:active{ color: var(--link-kleur); text-decoration: none; }

a:focus-visible{
  outline: 3px solid rgba(57,153,255,0.65);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ================================
   TEKSTVARIANTEN (jouw systeem)
   ================================ */

.standaardletter{
  font-family: var(--font-sans);
  font-size: 1rem;          /* ±16–17px */
  line-height: 1.6;
  font-weight: 300;
  color: var(--tekst-kleur);
}

.extraklein{
  font-size: 0.75rem;       /* ±12px */
  line-height: 1.4;
  color: var(--tekst-kleur);
}

.standaardvet{
  font-size: 1.125rem;      /* 18px */
  line-height: 1.3;
  font-weight: 700;
  color: var(--tekst-kleur);
}

.middel{
  font-size: 1.125rem;      /* 18px */
  line-height: 1.5;
  font-weight: 300;
  color: var(--tekst-kleur);
}

.middelvet{
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--tekst-kleur);
}

.grootvet{
  font-size: 1.5rem;        /* 24px */
  line-height: 1.2;
  font-weight: 700;
  color: var(--tekst-kleur);
}

.extragrootvet{
  font-size: 2.25rem;       /* 36px */
  line-height: 1.1;
  font-weight: 700;
  color: var(--tekst-kleur);
}

/* ================================
   LEAD-TEKST (Welkom + Quote)
   ================================ */

.lead .standaardletter{
  font-size: 1.125rem;      /* minimaal 18px */
  line-h

/* ================================
   SECTIETITELS (CONSISTENT)
   ================================ */

/* Basis sectietitel */
.sectietitel{
  font-family: var(--font-sans);
  font-size: 1.25rem;      /* ±20px */
  line-height: 1.25;
  font-weight: 700;
  color: var(--tekst-kleur);
  margin: 0 0 0.75rem;
}

/* Sectietitel op donkere achtergrond (zoals contactblok) */
.prefooter .sectietitel,
.site-footer .sectietitel{
  color: #ffffff;
}

/* Optioneel: iets subtielere variant */
.sectietitel--sub{
  font-weight: 600;
  font-size: 1.125rem;
}
/* ================================
   LEAD / OPENING TITEL
   ================================ */

.lead-title{
  font-family: var(--font-sans);
  font-size: 1.75rem;      /* ±28px */
  line-height: 1.2;
  font-weight: 600;
  color: var(--tekst-kleur);
  margin: 0 0 1rem;
}
/* ================================
   Footer kleurcorrectie (force white)
   ================================ */

.prefooter,
.site-footer,
.prefooter *,
.site-footer *{
  color: #fff !important;
}

/* Links in footer altijd wit */
.prefooter a,
.site-footer a{
  color: #fff !important;
}

.prefooter a:hover,
.site-footer a:hover{
  color: rgba(255,255,255,0.85) !important;
}
.prefooter ul,
.site-footer ul{
  list-style-position: inside;
}