/* ==========================================================================
   Sint-Michielschool — de volledige stylesheet van de statische site.
   Overgenomen uit style.css, met uitzondering van de globale resets
   (*, html, body, a, img, ul, section) die met Astra en Elementor botsen.

   De variabelen verwijzen door naar Elementor's globale kleuren, zodat de
   originele CSS ongewijzigd werkt én de site herbrandeerbaar blijft.
   ========================================================================== */

/* ==========================================================================
   Sint-Michielschool — originele stijlregels, letterlijk overgenomen uit
   style.css van de statische site.

   De variabelen hieronder verwijzen door naar Elementor's globale kleuren,
   zodat de originele CSS ongewijzigd blijft werken én de site herbrandeerbaar
   blijft vanuit Site Settings.
   ========================================================================== */

body {
  --white:       var(--e-global-color-stmswhite);
  --snow:        var(--e-global-color-stmssnow);
  --cloud:       var(--e-global-color-stmscloud);

  --teal:        var(--e-global-color-stmsteal);
  --teal-bright: var(--e-global-color-stmstealbrgt);
  --teal-deep:   var(--e-global-color-stmstealdeep);
  --teal-pale:   var(--e-global-color-stmstealpale);

  --coral:       var(--e-global-color-stmscoral);
  --coral-deep:  var(--e-global-color-stmscoraldeep);
  --coral-pale:  var(--e-global-color-stmscoralpale);

  --sunny:       var(--e-global-color-stmssunny);
  --sunny-deep:  var(--e-global-color-stmssunnydeep);
  --sunny-pale:  var(--e-global-color-stmssunnypale);

  --grape:       var(--e-global-color-stmsgrape);
  --grape-deep:  var(--e-global-color-stmsgrapedeep);
  --grape-pale:  var(--e-global-color-stmsgrapepale);

  --sky:         var(--grape);
  --sky-pale:    var(--grape-pale);
  --mint:        var(--teal);
  --mint-pale:   var(--teal-pale);

  --navy:        var(--e-global-color-stmsnavy);
  --text:        var(--e-global-color-text);
  --text-light:  var(--e-global-color-stmstextlight);

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .04);
  --shadow:    0 8px 30px rgba(0, 0, 0, .06);
  --shadow-lg: 0 16px 50px rgba(0, 0, 0, .08);

  --radius:    24px;
  --radius-lg: 32px;
  --marquee-h: 56px;
  --page-max:  1320px;
  --gutter:    2.5rem;
  --logo-h:    64px;
}

/* Vervangt de globale 'ul { list-style: none }' uit het origineel, nu beperkt
   tot de eigen onderdelen zodat Elementor-lijsten ongemoeid blijven. */
.visie-punten,
.footer-links,
.nav-menu,
.mobile-menu ul,
.tl-kaart ul {
  list-style: none;
}


/* ==========================================================================
   3. Herbruikbare onderdelen
   ========================================================================== */

/* Handgetekende onderstreping */
.doodle-underline {
  position: relative;
  display: inline-block;
}

.doodle-underline::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: -5%;
  width: 110%;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8 Q50 2 100 7 Q150 12 198 4' stroke='%233d9199' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Confetti-laag */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
}

/* Knoppen */
.btn-bouncy {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 50px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  position: relative;
  transition: all .2s;
}

.btn-teal {
  background: var(--teal);
  color: var(--navy);
  box-shadow: 0 5px 0 var(--teal-bright), 0 8px 20px rgba(107, 196, 202, .45);
}

.btn-teal:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 0 var(--teal-bright), 0 14px 30px rgba(107, 196, 202, .5);
}

.btn-teal:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 var(--teal-bright);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-outline {
  background: var(--white);
  color: var(--text);
  border: 2.5px solid var(--cloud);
  box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border: 2px solid;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 700;
  cursor: default;
  transition: all .3s;
}

.chip:hover {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: var(--shadow);
}

.chip.c-teal  { background: var(--teal-pale);  border-color: var(--teal);  color: var(--teal-deep); }

.chip.c-coral { background: var(--coral-pale); border-color: var(--coral); color: var(--coral-deep); }

.chip.c-sunny { background: var(--sunny-pale); border-color: var(--sunny); color: var(--sunny-deep); }

.chip.c-sky   { background: var(--sky-pale);   border-color: var(--sky);   color: var(--grape-deep); }

/* ==========================================================================
   4. Navigatie & mobiel menu
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.1rem 0;
  transition: padding .4s cubic-bezier(.22, 1, .36, 1),
              background .4s ease,
              box-shadow .4s ease;
}

.nav.scrolled {
  padding: .85rem 0;
  background: var(--white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .05);
}

/* Zelfde breedte en zijmarge als .hero-content → logo lijnt uit met de titel */
.nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}

.nav-logo {
  height: var(--logo-h);
  width: auto;
  transition: height .3s cubic-bezier(.22, 1, .36, 1), transform .3s;
}

.nav-brand:hover .nav-logo {
  transform: rotate(-3deg) scale(1.04);
}

.nav.scrolled .nav-logo {
  height: calc(var(--logo-h) * .82);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: .2rem;
}

.nav-link {
  position: relative;
  padding: .55rem 1.05rem;
  border-radius: 50px;
  font-family: 'Baloo 2', cursive;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  white-space: nowrap;
  transition: color .25s, background .25s, transform .25s cubic-bezier(.22, 1, .36, 1);
}

/* Speels stipje dat onder het actieve item opduikt */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: .28rem;
  left: 50%;
  width: 5px;
  height: 5px;
  background: var(--coral);
  border-radius: 50%;
  transform: translate(-50%, 6px) scale(0);
  opacity: 0;
  transition: all .25s cubic-bezier(.22, 1, .36, 1);
}

.nav-link:hover {
  background: var(--teal-pale);
  color: var(--teal-deep);
  transform: translateY(-2px) rotate(-1.5deg);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.nav-link.active {
  color: var(--teal-deep);
}

/* 'Onze school' met zijn uitklapmenu */
.nav-dropdown {
  position: relative;
}

.nav-link-drop {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.nav-chevron {
  width: 10px;
  height: 7px;
  transition: transform .25s;
}

.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: 100%;
  /* Padding van de knop (1.05rem) min die van een submenu-item (.5 + .8rem),
     zodat de tekst in het menu exact onder 'Onze school' begint */
  left: -.25rem;
  z-index: 5;
  min-width: 230px;
  margin-top: .5rem;
  padding: .5rem;
  background: var(--white);
  border: 2px solid var(--cloud);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s, transform .25s cubic-bezier(.22, 1, .36, 1), visibility .25s;
}

/* Onzichtbare brug zodat de muis van knop naar menu kan zonder gat */
.nav-submenu::before {
  content: '';
  position: absolute;
  top: -.6rem;
  left: 0;
  right: 0;
  height: .6rem;
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-submenu a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 12px;
  font-family: 'Baloo 2', cursive;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  white-space: nowrap;
  transition: background .2s, color .2s, transform .2s;
}

.nav-submenu a:hover {
  background: var(--teal-pale);
  color: var(--teal-deep);
  transform: translateX(3px);
}

.nav-cta {
  flex-shrink: 0;
  margin-left: .7rem;
  padding: .65rem 1.7rem;
  background: var(--coral);
  border-radius: 50px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--coral-deep);
  transition: transform .2s, box-shadow .2s;
}

.nav-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--coral-deep);
}

.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 var(--coral-deep);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .7rem;
  background: var(--white);
  border: 2px solid var(--cloud);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all .3s;
}

.nav-hamburger:hover {
  border-color: var(--teal);
  transform: rotate(-3deg);
}

.nav-hamburger span {
  width: 28px;
  height: 3px;
  background: var(--text);
  border-radius: 3px;
  transition: all .3s;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: rgba(255, 255, 255, .98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu a {
  font-family: 'Baloo 2', cursive;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy);
  transition: color .3s;
}

.mobile-menu a:hover {
  color: var(--teal-deep);
}

/* De pagina's onder 'Onze school' staan ingesprongen onder hun hoofditem */
.mobile-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-top: -.6rem;
}

.mobile-sub a {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-light);
}

.mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--navy);
  cursor: pointer;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Precies één schermhoogte min de marquee-balk: die valt zo op de onderrand */
  min-height: calc(100vh - var(--marquee-h));
  background: var(--white);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  /* .hero is een flexbox: zonder deze breedte krimpt de inhoud naar zijn
     eigen maat en lijnt de titel niet meer uit met het logo in de nav */
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 7rem var(--gutter) 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding: .5rem 1.2rem;
  background: var(--sunny-pale);
  border: 2px dashed var(--sunny);
  border-radius: 50px;
  color: var(--sunny-deep);
  font-family: 'Patrick Hand', cursive;
  font-size: 1rem;
  animation: wiggle 3s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(2deg); }
}

.hero h1 {
  margin-bottom: 1.5rem;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--navy);
}

.hero h1 .pop {
  color: var(--teal);
  display: inline-block;
  animation: popIn 1s ease .3s both;
}

.hero h1 .pop2 {
  color: var(--coral);
  display: inline-block;
  animation: popIn 1s ease .5s both;
}

@keyframes popIn {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.hero-sub {
  max-width: 500px;
  margin-bottom: 2rem;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-light);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-illustration {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-visie-kaart {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: 1rem;
  overflow: hidden;
  background: var(--white);
  border: 2.5px solid var(--cloud);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

/* Grote sfeerfoto bovenaan de kaart */
.hero-kaart-foto {
  display: block;
  margin: 0 0 .9rem;
  border-radius: 20px;
  overflow: hidden;
}

.hero-kaart-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* Zo blijft de kaart samen met de marquee-balk binnen één schermhoogte */
  max-height: 44vh;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.hero-kaart-foto:hover img {
  transform: scale(1.05);
}

.hero-kaart-label {
  display: inline-block;
  padding: .25rem .9rem;
  background: var(--snow);
  border-radius: 50px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-light);
}

.hero-kaart-titel {
  margin: .7rem 0 .2rem;
  font-family: 'Baloo 2', cursive;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
}

/* De vier visies als vakjes: elk met zijn puzzelstukje */
.visie-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  margin: 0;
}

.visie-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 92px;
  padding: .7rem .4rem;
  background: var(--snow);
  border: 2px solid var(--cloud);
  border-radius: 18px;
  transition: all .35s cubic-bezier(.22, 1, .36, 1);
}

.visie-mini img {
  height: 42px;
  width: auto;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.visie-mini span {
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: .76rem;
  line-height: 1.2;
  color: var(--text);
  transition: color .3s;
}

.visie-mini:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.visie-mini:hover img {
  transform: rotate(-8deg) scale(1.14);
}

.vm-ontmoeten:hover   { background: var(--coral-pale); border-color: var(--coral); }

.vm-goedinjevel:hover { background: var(--sunny-pale); border-color: var(--sunny); }

.vm-zorgzaam:hover    { background: var(--teal-pale);  border-color: var(--teal); }

.vm-kwaliteit:hover   { background: var(--grape-pale); border-color: var(--grape); }

.vm-ontmoeten:hover   span { color: var(--coral-deep); }

.vm-goedinjevel:hover span { color: var(--sunny-deep); }

.vm-zorgzaam:hover    span { color: var(--teal-deep); }

.vm-kwaliteit:hover   span { color: var(--grape-deep); }

.hero-kaart-link {
  display: inline-block;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: .92rem;
  color: var(--teal-deep);
  transition: transform .25s;
}

.hero-kaart-link:hover {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   De puzzelcirkel — herbruikbaar, in de hero klein en in de visie groot.
   Elk stukje is een kwart cirkel met zijn middelpunt op een andere plek in
   het bestand. Breedte, hoogte en positie hieronder zijn zo berekend dat die
   middelpunten precies samenvallen in het hart van de cirkel.
   -------------------------------------------------------------------------- */

.puzzel-cirkel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}

.pc-stuk {
  position: absolute;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
}

.pc-kwaliteit   { width: 41.08%; height: 50.87%; left:  8.92%; top:  8.95%; z-index: 2; }

.pc-ontmoeten   { width: 50.87%; height: 41.08%; left: 40.13%; top:  9.00%; z-index: 3; }

.pc-zorgzaam    { width: 50.97%; height: 41.00%; left:  8.93%; top: 50.00%; z-index: 3; }

.pc-goedinjevel { width: 41.08%; height: 50.87%; left: 50.00%; top: 40.18%; z-index: 2; }

/* Twee van de vier bestanden zijn dezelfde vorm; draaien en spiegelen maakt
   er de ontbrekende kwadranten van */
.pc-kwaliteit { --basis: rotate(180deg); }

.pc-ontmoeten { --basis: scaleX(-1); }

.pc-zorgzaam,
.pc-goedinjevel { --basis: rotate(0deg); }

.pc-stuk {
  transform: translate(var(--tx, 0), var(--ty, 0)) var(--basis, rotate(0deg));
}

/* Het gekozen stukje schuift naar buiten, de rest treedt terug */
.pc-kwaliteit.actief   { --tx: -6%; --ty: -6%; }

.pc-ontmoeten.actief   { --tx:  6%; --ty: -6%; }

.pc-zorgzaam.actief    { --tx: -6%; --ty:  6%; }

.pc-goedinjevel.actief { --tx:  6%; --ty:  6%; }

.puzzel-cirkel .pc-stuk:not(.actief) {
  opacity: .4;
}

/* ==========================================================================
   6. Marquee-banner
   ========================================================================== */

.marquee-banner {
  position: relative;
  z-index: 5;
  height: var(--marquee-h);
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.1rem;
  color: var(--white);
  white-space: nowrap;
}

.marquee-item .dot {
  color: var(--sunny);
  font-size: 1.3rem;
}

/* ==========================================================================
   7. Statistieken
   ========================================================================== */

.stats-section {
  position: relative;
  padding: 5rem 2rem;
  background: var(--white);
}

.stats-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.stat-bubble {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  border-radius: 50%;
  cursor: default;
  transition: all .4s cubic-bezier(.22, 1, .36, 1);
}

.stat-bubble::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px dashed;
  border-radius: 50%;
  opacity: .3;
  animation: spinSlow 25s linear infinite;
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

.stat-bubble:hover {
  transform: scale(1.12) rotate(-5deg);
}

.stat-bubble.teal  { background: var(--teal-pale);  border-color: var(--teal); }

.stat-bubble.coral { background: var(--coral-pale); border-color: var(--coral); }

.stat-bubble.sunny { background: var(--sunny-pale); border-color: var(--sunny); }

.stat-bubble.sky   { background: var(--sky-pale);   border-color: var(--sky); }

.stat-bubble.teal::before  { border-color: var(--teal); }

.stat-bubble.coral::before { border-color: var(--coral); }

.stat-bubble.sunny::before { border-color: var(--sunny); }

.stat-bubble.sky::before   { border-color: var(--sky); }

.stat-num {
  font-family: 'Baloo 2', cursive;
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
}

.stat-bubble.teal  .stat-num { color: var(--teal-deep); }

.stat-bubble.coral .stat-num { color: var(--coral-deep); }

.stat-bubble.sunny .stat-num { color: var(--sunny-deep); }

.stat-bubble.sky   .stat-num { color: var(--grape-deep); }

.stat-label {
  margin-top: .2rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-light);
  text-align: center;
}

.section-header {
  max-width: 600px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .5rem;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.1rem;
  color: var(--teal-deep);
}

.section-header h2 {
  margin-bottom: .5rem;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--navy);
}

.section-header p {
  font-size: 1rem;
  color: var(--text-light);
}

/* ==========================================================================
   9. Over ons
   ========================================================================== */

.about {
  position: relative;
  background: var(--snow);
  overflow: hidden;
}

/* Gekleurde streep bovenaan */
.pijlers::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--teal) 0, var(--teal) 25%,
    var(--grape) 25%, var(--grape) 50%,
    var(--coral) 50%, var(--coral) 75%,
    var(--sunny) 75%, var(--sunny) 100%);
}

.about-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-collage {
  position: relative;
  min-height: 540px;
}

.collage-card {
  position: absolute;
  padding: .7rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: all .5s cubic-bezier(.22, 1, .36, 1);
}

.collage-card:hover {
  z-index: 10 !important;
  transform: scale(1.05) rotate(0deg) !important;
}

.collage-card img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.collage-card.c1 { width: 280px; height: 225px; top: 0; left: 2%; transform: rotate(-5deg); z-index: 3; }

.collage-card.c2 { width: 250px; height: 250px; top: 55px; right: 0; transform: rotate(4deg); z-index: 2; }

.collage-card.c3 { width: 305px; height: 205px; bottom: 0; left: 14%; transform: rotate(-2deg); z-index: 4; }

/* Plakband */
.tape {
  position: absolute;
  z-index: 5;
  width: 60px;
  height: 22px;
  background: rgba(248, 209, 116, .8);
  border-radius: 2px;
  transform: rotate(-35deg);
}

.tape.t1 { top: -8px; left: 30%; }

.tape.t2 { top: -8px; right: 15%; transform: rotate(25deg); }

.tape.t3 { top: -5px; left: 40%; transform: rotate(-20deg); }

.about-text {
  padding-top: 1.5rem;
}

.about-text h3 {
  margin-bottom: .3rem;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.4rem;
  color: var(--coral-deep);
}

.about-text h2 {
  margin-bottom: .8rem;
  font-family: 'Baloo 2', cursive;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
}

.about-text p {
  margin-bottom: .5rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-light);
}

.about-cta {
  margin-top: 1.6rem;
}

/* ==========================================================================
   10. Visie (de puzzel)
   ========================================================================== */

.pijlers {
  position: relative;
  background: var(--snow);
  padding: 0;
}

/* Hoge houder + sticky inhoud: terwijl je hier doorheen scrolt blijft de
   puzzel staan en schuift hij stukje voor stukje op */
.visie-scroll {
  height: 340vh;
}

.visie-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 4rem;
}

.visie-sticky .section-header {
  margin-bottom: 2rem;
}

.visie-layout {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  /* De tekstkaart houdt haar breedte, de rest is voor het logo */
  grid-template-columns: minmax(320px, 1fr) minmax(430px, 530px);
  gap: 3rem;
  align-items: center;
}

.puzzel-groot {
  max-width: 700px;
}

/* Het logo als puzzel: het stukje van de visie in beeld licht op,
   de rest van het merk treedt rustig terug */
.logo-puzzel-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-stuk {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
  opacity: .22;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1),
              opacity .45s ease,
              filter .45s ease;
}

.logo-stuk.actief {
  transform: scale(1.22);
  opacity: 1;
  filter: drop-shadow(0 6px 14px rgba(30, 36, 46, .22));
}

/* Tekstkaart */
.visie-panelen {
  position: relative;
}

.visie-paneel {
  padding: 2.4rem 2.6rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: paneelIn .45s cubic-bezier(.22, 1, .36, 1);
}

.visie-paneel[hidden] {
  display: none;
}

@keyframes paneelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.visie-nummer {
  display: inline-block;
  font-family: 'Baloo 2', cursive;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.visie-paneel h3 {
  position: relative;
  margin: .5rem 0 1.4rem;
  padding-bottom: 1rem;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
}

/* Streep onder de titel in plaats van een rand aan de zijkant */
.visie-paneel h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 5px;
  border-radius: 4px;
  background: var(--teal);
}

.visie-paneel p {
  color: var(--text-light);
  font-size: 1rem;
  margin-bottom: 1.4rem;
}

.visie-punten li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .6rem;
  font-size: .95rem;
  font-weight: 600;
}

.visie-punten li::before {
  content: '';
  position: absolute;
  top: .55rem;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px 8px 3px 8px;
  background: var(--teal);
}

.visie-paneel[data-visie="ontmoeten"]   h3::after,
.visie-paneel[data-visie="ontmoeten"]   .visie-punten li::before { background: var(--coral); }

.visie-paneel[data-visie="goedinjevel"] h3::after,
.visie-paneel[data-visie="goedinjevel"] .visie-punten li::before { background: var(--sunny); }

.visie-paneel[data-visie="zorgzaam"]    h3::after,
.visie-paneel[data-visie="zorgzaam"]    .visie-punten li::before { background: var(--teal); }

.visie-paneel[data-visie="kwaliteit"]   h3::after,
.visie-paneel[data-visie="kwaliteit"]   .visie-punten li::before { background: var(--grape); }

.visie-paneel[data-visie="ontmoeten"]   .visie-nummer { color: var(--coral-deep); }

.visie-paneel[data-visie="goedinjevel"] .visie-nummer { color: var(--sunny-deep); }

.visie-paneel[data-visie="zorgzaam"]    .visie-nummer { color: var(--teal-deep); }

.visie-paneel[data-visie="kwaliteit"]   .visie-nummer { color: var(--grape-deep); }

/* Legenda: springen naar een visie én zien hoe ver je bent */
.visie-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.6rem;
}

.vl-knop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: var(--white);
  border: 2px solid var(--cloud);
  border-radius: 50px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: .85rem;
  color: var(--text-light);
  cursor: pointer;
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
}

.vl-knop:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.vl-knop .stip {
  width: 10px;
  height: 10px;
  border-radius: 3px 8px 3px 8px;
}

.vl-knop[data-visie="ontmoeten"]   .stip { background: var(--coral); }

.vl-knop[data-visie="goedinjevel"] .stip { background: var(--sunny); }

.vl-knop[data-visie="zorgzaam"]    .stip { background: var(--teal); }

.vl-knop[data-visie="kwaliteit"]   .stip { background: var(--grape); }

.vl-knop.actief[data-visie="ontmoeten"]   { background: var(--coral-pale); border-color: var(--coral); color: var(--coral-deep); }

.vl-knop.actief[data-visie="goedinjevel"] { background: var(--sunny-pale); border-color: var(--sunny); color: var(--sunny-deep); }

.vl-knop.actief[data-visie="zorgzaam"]    { background: var(--teal-pale);  border-color: var(--teal);  color: var(--teal-deep); }

.vl-knop.actief[data-visie="kwaliteit"]   { background: var(--grape-pale); border-color: var(--grape); color: var(--grape-deep); }

/* ==========================================================================
   11. Schooldag (zigzag)
   ========================================================================== */

.dag {
  background: var(--snow);
}

.zigzag {
  max-width: 800px;
  margin: 0 auto;
}

.zig-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateX(-30px);
  transition: all .6s cubic-bezier(.22, 1, .36, 1);
}

.zig-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.zig-item:nth-child(even) {
  flex-direction: row-reverse;
  transform: translateX(30px);
}

.zig-item:nth-child(even).visible {
  transform: translateX(0);
}

.zig-time {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy);
  box-shadow: var(--shadow);
  transition: transform .3s;
}

.zig-item:hover .zig-time {
  transform: scale(1.1) rotate(-5deg);
}

.zig-item:nth-child(1) .zig-time { background: var(--teal); }

.zig-item:nth-child(2) .zig-time { background: var(--coral); }

.zig-item:nth-child(3) .zig-time { background: var(--sunny); }

.zig-item:nth-child(4) .zig-time { background: var(--grape); }

.zig-item:nth-child(5) .zig-time { background: var(--teal-bright); }

.zig-card {
  flex: 1;
  padding: 1.5rem 2rem;
  background: var(--white);
  border: 2px solid var(--cloud);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all .3s;
}

.zig-item:hover .zig-card {
  border-color: var(--teal);
  transform: translateY(-3px);
}

.zig-card h4 {
  margin-bottom: .2rem;
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
}

.zig-card p {
  font-size: .88rem;
  color: var(--text-light);
}

/* ==========================================================================
   13. Nieuws (polaroids)
   ========================================================================== */

.nieuws {
  background: var(--white);
}

.polaroid-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.polaroid {
  padding: 1rem 1rem 1.5rem;
  background: var(--white);
  border: 2px solid var(--cloud);
  border-radius: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all .4s cubic-bezier(.22, 1, .36, 1);
}

.polaroid:nth-child(1) { transform: rotate(-2deg); }

.polaroid:nth-child(2) { transform: rotate(1.5deg); }

.polaroid:nth-child(3) { transform: rotate(-1deg); }

.polaroid:hover {
  z-index: 5;
  transform: rotate(0deg) translateY(-10px) scale(1.03) !important;
  box-shadow: var(--shadow-lg);
}

.polaroid-img {
  position: relative;
  height: 200px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
}

.polaroid-img img {
  width: 46%;
  height: auto;
  opacity: .65;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.polaroid:hover .polaroid-img img {
  transform: rotate(-8deg) scale(1.08);
}

.polaroid:nth-child(1) .polaroid-img { background: linear-gradient(135deg, var(--teal-pale), var(--sky-pale)); }

.polaroid:nth-child(2) .polaroid-img { background: linear-gradient(135deg, var(--sunny-pale), var(--coral-pale)); }

.polaroid:nth-child(3) .polaroid-img { background: linear-gradient(135deg, var(--grape-pale), var(--mint-pale)); }

.polaroid-caption {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.1rem;
  color: var(--navy);
  text-align: center;
}

.polaroid-date {
  margin-top: .3rem;
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  color: var(--text-light);
  text-align: center;
}

/* ==========================================================================
   14. Contact
   ========================================================================== */

.contact {
  background: var(--snow);
}

.contact-layout {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-fun h2 {
  margin-bottom: 1rem;
  font-family: 'Baloo 2', cursive;
  font-size: 2rem;
  font-weight: 800;
}

.contact-fun p {
  margin-bottom: 2rem;
  color: var(--text-light);
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  background: var(--white);
  border: 2px solid var(--cloud);
  border-radius: 16px;
  transition: all .3s;
}

.contact-card:hover {
  border-color: var(--teal);
  transform: translateX(5px);
  box-shadow: var(--shadow);
}

.contact-card .c-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

.contact-card .c-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-card:nth-of-type(1) .c-icon { background: var(--teal-pale); }

.contact-card:nth-of-type(2) .c-icon { background: var(--coral-pale); }

.contact-card:nth-of-type(3) .c-icon { background: var(--sunny-pale); }

.contact-card:nth-of-type(4) .c-icon { background: var(--sky-pale); }

.contact-card strong {
  display: block;
  font-size: .9rem;
}

.contact-card span {
  font-size: .82rem;
  color: var(--text-light);
}

.contact-form {
  align-self: start;
  background: var(--white);
  border: 2.5px solid var(--cloud);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Gekleurde kop op het formulier, met een puzzelstukje in de hoek */
.form-kop {
  position: relative;
  padding: 1.6rem 2.2rem;
  background: var(--teal-pale);
  border-bottom: 2.5px solid var(--cloud);
  overflow: hidden;
}

.form-kop h3 {
  font-family: 'Baloo 2', cursive;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
}

.form-kop p {
  margin-top: .15rem;
  font-size: .88rem;
  color: var(--teal-deep);
}

.form-stuk {
  position: absolute;
  top: -14px;
  right: -16px;
  width: 78px;
  opacity: .45;
  transform: rotate(14deg);
  pointer-events: none;
}

.form-body {
  padding: 1.8rem 2.2rem 2rem;
}

.form-noot {
  margin-top: .9rem;
  font-size: .78rem;
  text-align: center;
  color: var(--text-light);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: .3rem;
  font-family: 'Baloo 2', cursive;
  font-weight: 600;
  font-size: .88rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  background: var(--snow);
  border: 2.5px solid var(--cloud);
  border-radius: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  outline: none;
  transition: all .3s;
}

.form-group input:focus,
.form-group textarea:focus {
  background: var(--white);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-pale);
}

.form-group textarea {
  min-height: 130px;
  resize: vertical;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.footer {
  position: relative;
  padding: 4rem 2rem 2rem;
  background: var(--navy);
  color: rgba(255, 255, 255, .7);
  overflow: hidden;
}

.footer-grid {
  max-width: 1100px;
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
}

.footer-logo {
  height: 40px;
  margin-bottom: 1rem;
  filter: brightness(10);
}

.footer h4 {
  margin-bottom: .8rem;
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
  color: var(--white);
}

.footer p {
  font-size: .88rem;
  line-height: 1.7;
}

.footer-links a {
  display: block;
  padding: .25rem 0;
  font-size: .88rem;
  transition: all .3s;
}

.footer-links a:hover {
  color: var(--teal-bright);
  padding-left: .4rem;
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: .8rem;
}

.footer-bottom a {
  color: var(--teal-bright);
}

/* ==========================================================================
   16. Scroll-animaties
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all .7s cubic-bezier(.22, 1, .36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   17. Losse pagina's (Onze school, ...)
   ========================================================================== */

/* Geen hero om achter te staan: de balk krijgt hier meteen een witte grond */
.subpagina .nav {
  background: var(--white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .05);
}

.pagina-kop {
  padding: 9rem 0 0;
  background: var(--white);
}

/* Zelfde raster als .nav-inner (breedte én zijmarge binnen die breedte),
   zodat de tekst exact onder het logo begint */
.pagina-kop-inner,
.artikel-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* De leeskolom hangt links in dat raster */
.pagina-kop-inner > *,
.artikel-tekst {
  max-width: 820px;
}

.pagina-kop h1 {
  margin-top: .4rem;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
}

.kruimels {
  margin-bottom: 1.2rem;
  font-size: .85rem;
  color: var(--text-light);
}

.kruimels a {
  color: var(--text-light);
  transition: color .25s;
}

.kruimels a:hover {
  color: var(--teal-deep);
}

.kruimels span {
  margin: 0 .15rem;
}

/* Leestekst: gewoon op de pagina, geen kaart */
.artikel {
  padding: 2.5rem 0 5rem;
  background: var(--white);
}

.artikel-inner h2 {
  margin-bottom: 1.2rem;
  font-family: 'Baloo 2', cursive;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--navy);
}

.artikel-inner h3 {
  margin: 2rem 0 .8rem;
  font-family: 'Baloo 2', cursive;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--teal-deep);
}

.artikel-inner p {
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-light);
}

/* Tekst links in het raster, beeld in de kolom ernaast */
.artikel-inner {
  display: grid;
  grid-template-columns: minmax(0, 820px) 1fr;
  gap: 3rem;
  align-items: start;
}

.artikel-beeld {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.artikel-figuur {
  margin: 0;
}

.artikel-figuur img {
  display: block;
  width: 100%;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.artikel-figuur figcaption {
  margin-top: .6rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--text-light);
}

@media (max-width: 900px) {

  body { --logo-h: 52px; }

  .nav-menu { display: none; }
  .nav-hamburger { display: flex; }

  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin: 0 auto 2rem; }
  .hero-buttons { justify-content: center; }
  .hero-illustration { display: none; }
  .hero::after { display: none; }

  .stats-flex { gap: 1rem; }
  .stat-bubble { width: 140px; height: 140px; }
  .stat-num { font-size: 2.2rem; }

  .about-layout { grid-template-columns: 1fr; }
  .about-collage { min-height: 520px; }

  /* Geen vastgezette scroll op kleine schermen: gewoon in de flow */
  .visie-scroll { height: auto; }
  .visie-sticky { position: static; min-height: 0; padding: 4rem var(--gutter); }
  .visie-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .puzzel-groot { max-width: 320px; }
  .visie-paneel { padding: 2rem 1.8rem; }

  .polaroid-grid { grid-template-columns: 1fr; }
  .polaroid { transform: rotate(0deg) !important; }

  .contact-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  body { --gutter: 1.2rem; --logo-h: 44px; }

  section { padding: 3.5rem 1.2rem; }

  .hero-content { padding: 7rem var(--gutter) 3rem; }

  .stats-flex { flex-direction: column; align-items: center; }

  /* Beeld onder de tekst in plaats van ernaast */
  .artikel-inner { grid-template-columns: 1fr; gap: 2rem; }
  .artikel-beeld { flex-direction: row; flex-wrap: wrap; }
  .artikel-beeld .artikel-figuur { flex: 1 1 260px; }

  .visie-mini-grid { grid-template-columns: 1fr 1fr; }
  .hero-kaart-foto img { height: 170px; }

  .puzzel-groot { max-width: 260px; }

  .about-collage { min-height: auto; }
  .collage-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 1rem;
    transform: none !important;
  }
}

/* ==========================================================================
   In de kijker
   ========================================================================== */

.kijker {
  position: relative;
  background: var(--white);
  overflow: hidden;
}

.kijker-grid {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1rem var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6rem;
}

/* Zachte kaarten zoals elders op de site, met een eigen accentkleur */
.kijker-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: 1.8rem 1.6rem 1.5rem;
  background: var(--white);
  border: 2.5px solid var(--cloud);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s, border-color .35s;
}

/* Kleurvlakje dat vanuit de hoek meekleurt met het onderwerp */
.kijker-kaart::before {
  content: '';
  position: absolute;
  top: -46px;
  right: -46px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.kijker-kaart:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.kijker-kaart:hover::before {
  transform: scale(1.15);
}

/* Volgnummer in de hoek, rustig op de achtergrond */
.kijker-nr {
  position: absolute;
  top: .7rem;
  right: 1.1rem;
  z-index: 2;
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.kijker-icoon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: .4rem;
  border-radius: 16px;
}

.kijker-icoon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kijker-kaart h4 {
  font-family: 'Baloo 2', cursive;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
}

.kijker-kaart p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* De link staat onderaan, zodat alle kaarten dezelfde ritmiek houden */
.kijker-link {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: .92rem;
}

.kijker-link em {
  display: inline-block;
  font-style: normal;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.kijker-kaart:hover .kijker-link em {
  transform: translateX(5px);
}

/* Elk onderwerp zijn eigen kleur */
.k-teal   .kijker-icoon { background: var(--teal-pale); }

.k-coral  .kijker-icoon { background: var(--coral-pale); }

.k-sunny  .kijker-icoon { background: var(--sunny-pale); }

.k-grape  .kijker-icoon { background: var(--grape-pale); }

.k-teal   .kijker-icoon svg { stroke: var(--teal-deep); }

.k-coral  .kijker-icoon svg { stroke: var(--coral-deep); }

.k-sunny  .kijker-icoon svg { stroke: var(--sunny-deep); }

.k-grape  .kijker-icoon svg { stroke: var(--grape-deep); }

.k-teal::before   { background: var(--teal-pale); }

.k-coral::before  { background: var(--coral-pale); }

.k-sunny::before  { background: var(--sunny-pale); }

.k-grape::before  { background: var(--grape-pale); }

.k-teal   .kijker-nr, .k-teal   .kijker-link { color: var(--teal-deep); }

.k-coral  .kijker-nr, .k-coral  .kijker-link { color: var(--coral-deep); }

.k-sunny  .kijker-nr, .k-sunny  .kijker-link { color: var(--sunny-deep); }

.k-grape  .kijker-nr, .k-grape  .kijker-link { color: var(--grape-deep); }

.k-teal:hover   { border-color: var(--teal); }

.k-coral:hover  { border-color: var(--coral); }

.k-sunny:hover  { border-color: var(--sunny); }

.k-grape:hover  { border-color: var(--grape); }

/* Accenten binnen een artikel */
.artikel-intro {
  font-size: 1.12rem !important;
  color: var(--text) !important;
}

.info-blok {
  margin: 0 0 1.2rem;
  padding: 1.3rem 1.5rem;
  background: var(--snow);
  border-top: 4px solid var(--teal);
  border-radius: 4px 4px 16px 16px;
}

.info-blok:nth-of-type(even) {
  border-top-color: var(--coral);
}

.info-blok h3 {
  margin: 0 0 .4rem !important;
  font-size: 1.1rem !important;
  color: var(--navy) !important;
}

.info-blok p {
  margin-bottom: 0 !important;
}

.artikel-link {
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  color: var(--teal-deep);
  transition: transform .25s;
}

.artikel-link:hover {
  color: var(--coral-deep);
}

/* Hulpblok onderaan een pagina */
.artikel-hulp {
  margin-top: 2.4rem;
  padding: 1.8rem 2rem;
  background: var(--teal-pale);
  border-radius: var(--radius);
}

.artikel-hulp h3 {
  margin: 0 0 .3rem !important;
  color: var(--navy) !important;
}

.artikel-hulp p {
  margin-bottom: 1.2rem !important;
}

.artikel-hulp-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* ==========================================================================
   Stappenplan (aanmelden en inschrijven)
   ========================================================================== */

/* Het is een <section>, dus de algemene sectiepadding hier uitzetten */
.stappen-blok {
  margin: 2.6rem 0 0;
  padding: 0;
  scroll-margin-top: 7rem;
}

/* Pagina met de tijdlijn naast de tekst */
.met-tijdlijn {
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 3.5rem;
}

.met-tijdlijn .stappen-blok {
  grid-column: 2;
  margin-top: 0;
}

.stappen-kop {
  margin-bottom: 1.6rem;
}

.stappen-motto {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .35rem 1rem;
  background: var(--sunny-pale);
  border: 2px dashed var(--sunny);
  border-radius: 50px;
  font-family: 'Patrick Hand', cursive;
  font-size: 1rem;
  color: var(--sunny-deep);
}

.stappen-kop h2 {
  margin: 0 !important;
}

/* Tijdlijn: datum links, uitleg rechts, om beurten gespiegeld */
.tijdlijn {
  position: relative;
  padding: .5rem 0;
}

.tijdlijn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 3px;
  background: var(--cloud);
  border-radius: 3px;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: .9rem;
  align-items: start;
  margin-bottom: 1.8rem;
}

.tl-item:last-child {
  margin-bottom: 0;
}

.tl-datum {
  grid-column: 2;
  grid-row: 1;
}

.tl-pil {
  display: inline-block;
  padding: .5rem 1.2rem;
  border-radius: 50px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
  white-space: nowrap;
}

.tl-inhoud {
  grid-column: 2;
  grid-row: 2;
}

.tl-inhoud h3 {
  margin: .3rem 0 .8rem !important;
  font-size: 1.25rem !important;
  color: var(--navy) !important;
}

.tl-plek {
  font-family: 'Patrick Hand', cursive;
  font-size: .95rem;
  font-weight: 400;
}

.tl-kaart {
  padding: 1.4rem 1.5rem;
  background: var(--white);
  border: 2.5px solid var(--cloud);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}

.tl-kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.tl-kaart p {
  margin-bottom: .8rem !important;
  font-size: .95rem !important;
}

.tl-kaart p:last-child {
  margin-bottom: 0 !important;
}

.tl-let-op {
  padding: .8rem 1rem;
  background: var(--coral-pale);
  border-radius: 14px;
  color: var(--text) !important;
}

.tl-link {
  display: inline-block;
  margin-top: .3rem;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: .92rem;
}

/* Het bolletje op de lijn */
.tl-stip {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  margin: .45rem 0 0;
  background: var(--white);
  border: 4px solid var(--cloud);
  border-radius: 50%;
}

/* Elke stap zijn eigen kleur */
.s-1 .tl-pil  { background: var(--teal-pale); }

.s-2 .tl-pil  { background: var(--sunny-pale); }

.s-3 .tl-pil  { background: var(--coral-pale); }

.s-1 .tl-stip { border-color: var(--teal); }

.s-2 .tl-stip { border-color: var(--sunny); }

.s-3 .tl-stip { border-color: var(--coral); }

.s-1 .tl-plek, .s-1 .tl-link { color: var(--teal-deep); }

.s-2 .tl-plek, .s-2 .tl-link { color: var(--sunny-deep); }

.s-3 .tl-plek, .s-3 .tl-link { color: var(--coral-deep); }

.stap-kaart > p:first-of-type {
  margin-top: 1.2rem;
}

.stap-kaart > *:last-child {
  margin-bottom: 1.4rem !important;
}

.stap-kaart p {
  margin-bottom: .7rem !important;
  font-size: .95rem !important;
}

.stap-kaart p:last-child {
  margin-bottom: 0 !important;
}

.stap-datum {
  padding: .8rem 1rem;
  background: var(--teal-pale);
  border-radius: 14px;
  color: var(--text) !important;
}

.stap-let-op {
  padding: .8rem 1rem;
  background: var(--coral-pale);
  border-radius: 14px;
  color: var(--text) !important;
}

@media (max-width: 900px) {
  .met-tijdlijn { grid-template-columns: 1fr; gap: 2.5rem; }
  .met-tijdlijn .stappen-blok { grid-column: 1; margin-top: .5rem; }
}

/* ==========================================================================
   Paginabreedte voor de volle-breedte secties
   ========================================================================== */

.elementor .e-con.e-parent > .e-con.e-child:first-child {
  max-width: var(--container-max-width, none);
  margin-left: auto;
  margin-right: auto;
}

/* De header regelt zijn eigen breedtes: de topbalk loopt door tot de
   schermrand, de navigatie centreert zichzelf via .nav-inner. */
#stms-header > .e-con.e-child:first-child {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* De hero staat bewust buiten het contentraster en loopt rechts door tot de
   rand, zodat hij groter oogt dan de rest van de pagina.

   Links lijnt hij wél uit met het logo in de navigatie: dat staat op
   (schermbreedte - paginabreedte) / 2 + zijmarge. De max() vangt schermen op
   die smaller zijn dan de paginabreedte. */
#stms-hero > .e-con.e-child:first-child {
  max-width: none !important;
  padding-left: max(
    var(--gutter),
    calc((100vw - var(--page-max)) / 2 + var(--gutter))
  ) !important;
  /* Rechts landt de visual precies op de rechterrand van het contentraster,
     zodat hij niet tegen de schermrand plakt maar wél in het raster past. */
  padding-right: max(
    var(--gutter),
    calc((100vw - var(--page-max)) / 2)
  ) !important;
}

/* De marquee loopt bewust wél over de volle breedte door */
#stms-marquee > .e-con.e-child:first-child {
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}