:root {
  /* === Basis kleuren === */
  --kleur-body: #E6F2FF;
  --kleur-tekst: #003366;
  --kleur-rand: #cbd6e2;
  --kleur-highlight: #fef9e7;

  /* === Accent === */
  --kleur-accent: #0055a5;
  --kleur-accent-dark: #003366;
  --kleur-accent-tekst: #c2d4f2;

  --gradient-accent: linear-gradient(to right, var(--kleur-accent), var(--kleur-accent-dark));
  --gradient-accent-hover: linear-gradient(to right, var(--kleur-accent-dark), var(--kleur-accent));

   /* === CTA === */
  --kleur-cta: #FFA500;
  --kleur-cta-hover: #FFD700;
  --kleur-tekst: #003366;
  --font-heading: 'Montserrat', sans-serif;

  --gradient-cta: linear-gradient(to right, var(--kleur-cta), var(--kleur-cta-hover));
  --gradient-cta-hover: linear-gradient(to right, #FFD700, #FFA500);
 
  /* === Header & Navigatie === */
  --kleur-header-bg: linear-gradient(to right, #E6F2FF, #d0f0eb, #8fbfb8);
  --kleur-nav-balk: #002244;

  /* === Footer === */
  --kleur-footer-bg: #0f2a4a;
  --kleur-footer-tekst: #e0e0e0;
  --kleur-footer-link: #c2d4f2;
  --kleur-footer-link-hover: #ffffff;

  /* === States === */
  --kleur-focus: var(--kleur-cta-hover);
  --kleur-disabled: #cccccc;
  --kleur-success: #4CAF50;
  --kleur-error: #D32F2F;

  /* === Gradients === */
  --gradient-hero: linear-gradient(to right, var(--kleur-body), #d0f0eb, #8fbfb8);
  --gradient-cta: linear-gradient(to right, var(--kleur-cta), var(--kleur-cta-hover));
  --gradient-cta-hover: linear-gradient(to right, #FFA500, #FFD700);

  /* === Typografie === */
  --font-heading: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;
  --font-accent: 'Cormorant Garamond', serif;
}

/* typografie buiten :root */
.ehbo-blok h1,
.ehbo-blok h2,
.ehbo-blok h3,
.ehbo-blok h4,
.ehbo-blok h5,
.ehbo-blok h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--kleur-accent-dark);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.AED-blok h1,
.AED-blok h2,
.AED-blok h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--kleur-accent-dark);
}
 /* === knop-accent === */
.knop-accent {
  display: inline-block;
  padding: 10px 24px;
  background-image: var(--gradient-accent);
  color: var(--kleur-accent-tekst);
  
  font-family: var(--font-heading);
  font-weight: bold;
  border: 2px solid rgba(0, 85, 165, 0.3); /* lichte rand */
  border-radius: 1.2em;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background-image 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

.knop-accent:hover {
  background-image: var(--gradient-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-color: rgba(0, 85, 165, 0.5);
}
/* === knop-cta === */
.knop-cta {
  display: inline-block;
  padding: 10px 24px;
  background-image: var(--gradient-cta);
  color: var(--kleur-tekst);
  font-family: var(--font-heading);
  font-weight: bold;
  border: 2px solid rgba(255, 165, 0, 0.3); /* lichte rand */
  border-radius: 1.2em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  text-decoration: none;
  transition: background-image 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

.knop-cta:hover {
  background-image: var(--gradient-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-color: rgba(255, 165, 0, 0.5); /* iets donkerder bij hover */
}
/* === renderzin / cta-line === */
.cta-line {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--kleur-accent-dark);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

body {
  font-family: var(--font-body);
  margin: 0;
  background-color:var(--kleur-body);
  color: var(--kleur-tekst);
}
.ehbo-header {
  position: relative;
}

.header-container {
  position: relative;
}
.hero-layout {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  min-height: 100vh; /* of een vaste hoogte zoals 600px */
}