/* ============================================================
   NextGen Tennis — nextgen-tennis.nl
   Huisstijl: diep bosgroen #004C25, wit, tennisbal-accent
   ============================================================ */

:root {
  --green-950: #041710;
  --green-900: #05241A;
  --green-800: #013B1D;
  --green-700: #004C25;
  --green-600: #0A6B38;
  --green-100: #DCEEE2;
  --ball: #D9F04A;
  --ball-soft: #E9F87F;
  --clay: #C75B2E;
  --cream: #F5F3EA;
  --cream-dark: #ECE8DA;
  --white: #FFFFFF;
  --ink: #0C1A12;
  --muted: #56685D;
  --muted-light: #A8C4B2;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  --container: 1200px;
  --header-h: 76px;

  --shadow-md: 0 10px 30px rgba(4, 23, 16, 0.12);
  --shadow-lg: 0 24px 60px rgba(4, 23, 16, 0.22);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Nooit horizontaal kunnen schuiven: de schuine gele balk en de
     lopende teksten steken bewust iets buiten beeld. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

/* Korrel-overlay voor een filmische look */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--ball); color: var(--green-950); }

:focus-visible {
  outline: 3px solid var(--ball);
  outline-offset: 3px;
  border-radius: 4px;
}

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- Typografie ---------- */
.display {
  font-family: var(--font);
  font-style: italic;
  font-weight: 850;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.96;
  /* Vangnet: een lange kop mag nooit buiten het scherm vallen */
  overflow-wrap: break-word;
  hyphens: none;
}

h1.display { font-size: clamp(3rem, 9.5vw, 8rem); }
h2.display { font-size: clamp(2.1rem, 5.4vw, 4.2rem); }
h3.display { font-size: clamp(1.4rem, 2.6vw, 2rem); }

.outline-text {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--stroke, var(--white));
}

.accent { color: var(--ball); }
.accent-green { color: var(--green-700); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}
.kicker--ball { color: var(--ball); }
.kicker--green { color: var(--green-600); }
.kicker--clay { color: var(--clay); }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; }

/* ---------- Layout ---------- */
.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.section--dark { background: var(--green-900); color: var(--white); }
.section--darker { background: var(--green-950); color: var(--white); }
.section--cream-dark { background: var(--cream-dark); }
.section--ball { background: var(--ball); color: var(--green-950); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .display { margin: 0.75rem 0 1rem; }
.section-head p { color: var(--muted); }
.section--dark .section-head p,
.section--darker .section-head p { color: var(--muted-light); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
  line-height: 1;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s, color 0.25s;
  will-change: transform;
}
.btn svg { width: 1em; height: 1em; transition: transform 0.25s var(--ease-out); }
.btn:hover { transform: translateY(-3px); }
.btn:hover svg { transform: translate(3px, -3px); }
.btn:active { transform: translateY(-1px); }

.btn--ball { background: var(--ball); color: var(--green-950); box-shadow: 0 8px 24px rgba(217, 240, 74, 0.35); }
.btn--ball:hover { background: var(--ball-soft); box-shadow: 0 14px 34px rgba(217, 240, 74, 0.45); }

.btn--green { background: var(--green-700); color: var(--white); box-shadow: 0 8px 24px rgba(0, 76, 37, 0.3); }
.btn--green:hover { background: var(--green-600); }

.btn--ghost { border: 2px solid rgba(255, 255, 255, 0.55); color: var(--white); }
.btn--ghost:hover { border-color: var(--ball); color: var(--ball); }

.btn--ghost-dark { border: 2px solid rgba(12, 26, 18, 0.35); color: var(--ink); }
.btn--ghost-dark:hover { border-color: var(--green-700); color: var(--green-700); }

.btn--lg { padding: 1.2rem 2.4rem; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
}
.site-header.scrolled {
  background: rgba(4, 23, 16, 0.82);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
}
/* Het matglas-effect alleen op desktop. Op mobiel zou het van de header
   een "kader" maken waarbinnen het schermvullende menu gevangen raakt. */
@media (min-width: 901px) {
  .site-header.scrolled {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
@media (max-width: 900px) {
  /* Egaal donkergroen i.p.v. doorschijnend: altijd goed leesbaar */
  .site-header.scrolled { background: var(--green-950); }
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand img { height: 46px; width: auto; }
@media (max-width: 900px) { .brand img { height: 38px; } }

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a:not(.btn) {
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  padding: 4px 0;
}
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--ball);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-out);
}
.main-nav a:not(.btn):hover::after,
.main-nav a.active:not(.btn)::after { transform: scaleX(1); transform-origin: left; }
.main-nav .btn { padding: 0.75rem 1.5rem; font-size: 0.85rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  z-index: 1102;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 1101;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
    /* Egaal merkgroen: goed leesbaar, niets schemert erdoorheen */
    background: var(--green-700);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out);
  }
  .main-nav a:not(.btn) {
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 850;
    text-transform: uppercase;
  }
  .nav-open .main-nav { opacity: 1; pointer-events: auto; }
  .nav-open { overflow: hidden; }

  /* BELANGRIJK: de matglas-laag (backdrop-filter) op de gescrolde header
     maakt van de header een "kader" waarbinnen het menu gevangen blijft.
     Zolang het menu open is zetten we die daarom uit, zodat het menu
     echt het hele scherm vult. */
  /* Logo en sluitknop moeten boven het schermvullende menu blijven staan,
     anders verdwijnen ze erachter zodra het menu opengaat. */
  .nav-open .brand,
  .nav-open .nav-toggle {
    position: relative;
    z-index: 1102;
  }

  .nav-open .site-header,
  .nav-open .site-header.scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: heroZoom 14s var(--ease-out) forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(200deg, rgba(4, 23, 16, 0.25) 0%, rgba(4, 23, 16, 0.55) 55%, rgba(4, 23, 16, 0.92) 100%),
    linear-gradient(90deg, rgba(0, 76, 37, 0.35), transparent 60%);
}
.hero__inner {
  padding: calc(var(--header-h) + 3rem) 0 4.5rem;
}
.hero__title { margin: 1.2rem 0 1.6rem; }
.hero__title .line {
  display: block;
  overflow: hidden;
}
.hero__title .line span {
  display: inline-block;
  transform: translateY(110%);
  animation: riseUp 0.9s var(--ease-out) forwards;
}
.hero__title .line:nth-child(2) span { animation-delay: 0.12s; }
.hero__title .line:nth-child(3) span { animation-delay: 0.24s; }
@keyframes riseUp { to { transform: translateY(0); } }

.hero__sub {
  max-width: 520px;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2.2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.5rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 3rem;
}
.hero__meta div strong {
  display: block;
  font-style: italic;
  font-weight: 850;
  font-size: 1.5rem;
  color: var(--ball);
}
.hero__meta div small {
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--ball);
  color: var(--green-950);
  padding: 0.9rem 0;
  transform: rotate(0.001deg);
}
.marquee--dark { background: var(--green-950); color: var(--ball); }
.marquee__track {
  display: inline-flex;
  animation: marquee 44s linear infinite;
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
}
.marquee__track span { display: inline-block; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- USP-kaarten ---------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.usp-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.usp-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--green-700);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s var(--ease-out);
}
.usp-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.usp-card:hover::before { transform: scaleY(1); }
.usp-card .usp-num {
  font-style: italic;
  font-weight: 850;
  font-size: 0.85rem;
  color: var(--clay);
  letter-spacing: 0.12em;
}
.usp-card h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.15rem;
  margin: 0.7rem 0 0.5rem;
  color: var(--green-800);
}
.usp-card p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Over ons ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

.photo-stack { position: relative; padding: 1rem 2.2rem 2.6rem 0; }
.photo-stack img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.photo-stack__main {
  transform: rotate(-2deg);
  transition: transform 0.4s var(--ease-out);
}
.photo-stack__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--ball);
  color: var(--green-950);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  line-height: 1.15;
  font-size: 1rem;
  box-shadow: var(--shadow-lg);
  transform: rotate(3deg);
}
.photo-stack:hover .photo-stack__main { transform: rotate(0deg) scale(1.01); }

.about-copy .display { margin: 0.75rem 0 1.4rem; }
.about-copy p { color: var(--muted); margin-bottom: 1.1rem; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 2px solid var(--cream-dark);
}
.stats-row strong {
  display: block;
  font-style: italic;
  font-weight: 850;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--green-700);
  line-height: 1;
}
.stats-row small {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
}

/* ---------- Trainers ---------- */
.trainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.75rem;
}
.trainer-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}
.trainer-card:hover { transform: translateY(-8px); border-color: rgba(217, 240, 74, 0.5); }
.trainer-card__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.trainer-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.6s var(--ease-out);
}
.trainer-card:hover .trainer-card__photo img { transform: scale(1.06); }
.trainer-card__body { padding: 1.5rem 1.5rem 1.75rem; }
.trainer-card__body h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.3rem;
}
.trainer-card__role {
  display: inline-block;
  margin: 0.5rem 0 0.9rem;
  background: var(--ball);
  color: var(--green-950);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}
.trainer-card__body p { color: var(--muted-light); font-size: 0.96rem; }

/* ---------- Pakketten ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.filter-bar button {
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--green-700);
  color: var(--green-700);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease-out);
}
.filter-bar button:hover { transform: translateY(-2px); }
.filter-bar button.active { background: var(--green-700); color: var(--white); }

.pakket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.6rem;
}
.pakket-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.85rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.3s;
}
.pakket-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.pakket-card.hidden { display: none; }
.pakket-card--featured { background: var(--green-800); color: var(--white); }
.pakket-card--featured .pakket-card__desc { color: var(--muted-light); }
.pakket-card--featured .pakket-card__feat li { border-color: rgba(255, 255, 255, 0.12); }

.pakket-card__chip {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.chip--rood { background: #FBDDD2; color: #A33711; }
.chip--oranje { background: #FDEBCF; color: #A96206; }
.chip--groen { background: var(--green-100); color: var(--green-700); }
.chip--volw { background: #DCE9F5; color: #1F5687; }
.chip--prive { background: #EFE3F8; color: #6A3695; }
.chip--geel { background: #FBF3C4; color: #7A6206; }
.chip--ball { background: var(--ball); color: var(--green-950); }

/* Pakket tijdelijk vol: kaart blijft staan, maar zonder inschrijfknop. */
.pakket-card__vol {
  margin: 0 0 0.9rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #A33711;
}

/* Toelichting onder de pakketten, bijvoorbeeld over baanhuur in de winter. */
.pakket-seizoen-notitie {
  margin: 1.6rem auto 0;
  max-width: 780px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

.pakket-card h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1.1;
}
.pakket-card__price {
  margin: 1rem 0 0.4rem;
  font-style: italic;
  font-weight: 850;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--green-700);
}
.pakket-card--featured .pakket-card__price { color: var(--ball); }
.pakket-card__price small {
  font-size: 0.95rem;
  font-weight: 700;
  color: inherit;
  opacity: 0.75;
}
.pakket-card__desc { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.2rem; }

.pakket-card__feat { margin: 0 0 1.6rem; flex: 1; }
.pakket-card__feat li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--cream-dark);
}
.pakket-card__feat li:last-child { border-bottom: none; }
.pakket-card__feat svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--green-600);
}
.pakket-card--featured .pakket-card__feat svg { color: var(--ball); }
.pakket-card .btn { justify-content: center; }

.student-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: linear-gradient(120deg, var(--green-800), var(--green-700));
  color: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}
.student-banner::after {
  content: "15%";
  position: absolute;
  right: -1.5rem;
  bottom: -2.8rem;
  font-style: italic;
  font-weight: 850;
  font-size: 11rem;
  color: rgba(217, 240, 74, 0.12);
  pointer-events: none;
  line-height: 1;
}
.student-banner h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 0.4rem;
}
.student-banner p { color: var(--muted-light); max-width: 560px; }

/* ---------- Testimonials ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}
.quote-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  padding: 2.2rem 1.9rem 1.9rem;
  position: relative;
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}
.quote-card:hover { transform: translateY(-6px); border-color: rgba(217, 240, 74, 0.45); }
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: -0.6rem;
  left: 1.4rem;
  font-size: 5.5rem;
  font-style: italic;
  font-weight: 850;
  color: var(--ball);
  line-height: 1;
}
.quote-card blockquote {
  font-size: 1.06rem;
  line-height: 1.55;
  margin: 1rem 0 1.3rem;
}
.quote-card figcaption {
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted-light);
}
.quote-card figcaption::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--ball);
  vertical-align: middle;
  margin-right: 10px;
}

/* ---------- Fotogalerij (scrollende band) ---------- */
.gallery-band { overflow: hidden; padding: 0.5rem 0 0; }
.gallery-band__track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  animation: marquee 45s linear infinite;
  padding: 1.5rem 0 2.5rem;
}
.gallery-band__track:hover { animation-play-state: paused; }
.gallery-band__track img {
  height: clamp(220px, 30vw, 340px);
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease-out);
}
.gallery-band__track img:hover { transform: scale(1.04) rotate(-1deg); }

/* ---------- CTA-banner ---------- */
.cta-banner {
  position: relative;
  isolation: isolate;
  color: var(--white);
  text-align: center;
  padding: clamp(6rem, 13vw, 10rem) 0;
  overflow: hidden;
}
.cta-banner__bg { position: absolute; inset: 0; z-index: -2; }
.cta-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 23, 16, 0.82), rgba(0, 76, 37, 0.72));
}
.cta-banner .display { margin: 0.9rem 0 1.1rem; }
.cta-banner p { max-width: 540px; margin: 0 auto 2.2rem; color: rgba(255, 255, 255, 0.85); }
.cta-banner .cta-alt { margin: 1.4rem auto 0; font-size: 0.92rem; }
.cta-banner .cta-alt a {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cta-banner .cta-alt a:hover { color: var(--ball); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin-inline: auto; }
.faq-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  margin-bottom: 0.9rem;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.faq-item button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
  padding: 1.3rem 1.5rem;
  font-weight: 800;
  font-size: 1.02rem;
}
.faq-item button .faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
  font-weight: 850;
  font-style: italic;
  transition: transform 0.35s var(--ease-out), background 0.3s, color 0.3s;
}
.faq-item.open button .faq-icon {
  transform: rotate(45deg);
  background: var(--green-700);
  color: var(--white);
}
.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}
.faq-item__body p { padding: 0 1.5rem 1.4rem; color: var(--muted); }

/* ---------- Formulieren ---------- */
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}
.section--dark .form-card,
.section--darker .form-card { color: var(--ink); }

fieldset {
  border: none;
  margin-bottom: 2.2rem;
}
fieldset legend {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--green-700);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
fieldset legend .step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ball);
  color: var(--green-950);
  display: inline-grid;
  place-items: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.86rem;
  margin-bottom: 0.4rem;
}
.field label span.req { color: var(--clay); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  transition: border-color 0.25s, background 0.25s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-600);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 110px; }

.check-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.check-pill { position: relative; }
.check-pill input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.check-pill span {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--cream-dark);
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.25s;
  user-select: none;
}
.check-pill input:checked + span {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--white);
}
.check-pill input:focus-visible + span { outline: 3px solid var(--ball); outline-offset: 2px; }
.check-pill input:disabled + span { opacity: 0.4; }

.check-line {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.94rem;
  margin-bottom: 0.8rem;
}
.check-line input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--green-700);
  flex-shrink: 0;
}
.check-line a { color: var(--green-700); font-weight: 700; text-decoration: underline; }

.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }

.form-success {
  display: none;
  text-align: center;
  padding: 3rem 1.5rem;
}
.form-success.visible {
  display: block;
  animation: succes-in 0.5s var(--ease-out) both;
}
@keyframes succes-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .form-success.visible { animation: none; }
}

/* Klein label boven de kop: meteen duidelijk dat het gelukt is. */
.success-kicker {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.34rem 0.9rem;
  border-radius: 999px;
  background: var(--ball);
  color: var(--green-950);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.success-lead {
  max-width: 520px;
  margin: 0 auto 1.6rem;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Samenvatting van het gekozen pakket en seizoen. */
.success-recap {
  max-width: 460px;
  margin: 0 auto 1.8rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  text-align: left;
}
.success-recap dl { margin: 0; }
.success-recap div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
}
.success-recap div + div { border-top: 1px solid rgba(1, 59, 29, 0.12); }
.success-recap dt { font-size: 0.88rem; color: var(--green-700); }
.success-recap dd { margin: 0; font-size: 0.9rem; font-weight: 750; color: var(--green-950); text-align: right; }

/* De drie stappen: wat gebeurt er nu. */
.success-steps {
  max-width: 520px;
  margin: 0 auto 1.9rem;
  padding: 0;
  list-style: none;
  counter-reset: stap;
  text-align: left;
}
.success-steps li {
  counter-increment: stap;
  position: relative;
  padding: 0 0 1.1rem 3rem;
}
.success-steps li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 850;
  display: grid;
  place-items: center;
}
/* Verbindingslijntje tussen de stappen. */
.success-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  bottom: 8px;
  width: 2px;
  background: var(--green-100);
}
.success-steps strong {
  display: block;
  font-size: 0.98rem;
  color: var(--green-900);
  margin-bottom: 0.18rem;
}
.success-steps span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}
/* Een lang e-mailadres mag afbreken, anders belandt de punt erna op een
   eigen regel. */
.success-steps [data-succes-mail] {
  font-weight: 700;
  color: var(--green-800);
  overflow-wrap: anywhere;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

@media (max-width: 560px) {
  .form-success { padding: 2.2rem 0.9rem; }
  .success-steps li { padding-left: 2.6rem; }
  .success-actions .btn { width: 100%; justify-content: center; }
}
.form-success .success-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
}
.form-success h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--green-800);
}
.form-success p { color: var(--muted); max-width: 420px; margin-inline: auto; }

.form-error {
  display: none;
  background: #FBE3DA;
  color: #8C2E0B;
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: 0.92rem;
  margin-top: 1.2rem;
}
.form-error.visible { display: block; }
.form-error a { font-weight: 800; text-decoration: underline; }

.btn[disabled] { opacity: 0.6; pointer-events: none; }

/* honeypot */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Subpagina-hero ---------- */
.page-hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(217, 240, 74, 0.14), transparent 60%),
    linear-gradient(150deg, var(--green-950), var(--green-800));
  color: var(--white);
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: 20%;
  width: 420px;
  height: 420px;
  border: 2px solid rgba(217, 240, 74, 0.16);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero::before {
  content: "";
  position: absolute;
  right: 60px;
  top: 55%;
  width: 190px;
  height: 190px;
  border: 2px solid rgba(217, 240, 74, 0.12);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero .display {
  margin: 0.9rem 0 1rem;
  max-width: 1100px;
  /* Iets kleiner dan de homepage-kop, zodat ook een lang woord als
     "VOORWAARDEN" altijd op een regel past en nooit afbreekt. */
  font-size: clamp(2.05rem, 7.4vw, 6.5rem);
}
.page-hero p { max-width: 620px; color: var(--muted-light); font-size: 1.1rem; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  margin-bottom: 3rem;
}
.contact-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.contact-card .icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.contact-card h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.contact-card p, .contact-card a { color: var(--muted); font-size: 0.95rem; }
.contact-card a:hover { color: var(--green-700); }
.contact-card a strong { color: var(--green-700); font-size: 1.05rem; }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  line-height: 0;
}
.map-wrap iframe {
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(0.2) saturate(0.9);
}

.split-2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } }

.aside-card {
  background: var(--green-800);
  color: var(--white);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.aside-card h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
}
.aside-card p { color: var(--muted-light); font-size: 0.97rem; margin-bottom: 1rem; }
.aside-card ul { margin-bottom: 1.6rem; }
.aside-card li {
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0;
  font-size: 0.95rem;
  align-items: flex-start;
}
.aside-card li svg { width: 18px; height: 18px; color: var(--ball); flex-shrink: 0; margin-top: 4px; }
.aside-card .btn { width: 100%; justify-content: center; }
.aside-card hr { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 1.4rem 0; }
.aside-card a.plain { color: var(--ball); font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-950);
  color: var(--white);
  padding: 4.5rem 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { height: 52px; margin-bottom: 1.2rem; }
.footer-brand p { color: var(--muted-light); font-size: 0.97rem; max-width: 300px; }

.site-footer h4 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--ball);
  margin-bottom: 1.1rem;
}
.site-footer li { margin-bottom: 0.55rem; }
.site-footer li a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.96rem;
  transition: color 0.2s;
}
.site-footer li a:hover { color: var(--ball); }
.footer-contact li {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.96rem;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.footer-contact svg { width: 17px; height: 17px; color: var(--ball); flex-shrink: 0; margin-top: 5px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.4rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.75); }
.footer-bottom a:hover { color: var(--ball); }
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
}

/* ---------- Reveal-animaties ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Tekstpagina's (privacy, voorwaarden) ---------- */
.prose { max-width: 760px; }
.prose h2 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--green-800);
  margin: 2.2rem 0 0.7rem;
}
.prose p, .prose li { color: var(--muted); margin-bottom: 0.9rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; }
.prose a { color: var(--green-700); font-weight: 700; text-decoration: underline; }

/* ---------- Diversen ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }

/* ============================================================
   V2 — visuele upgrade: preloader, cursor, split-text,
   parallax, tilt, stats-band, jeugdroute, footer-marquee
   ============================================================ */

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--green-950); }
::-webkit-scrollbar-thumb { background: var(--green-700); border-radius: 6px; border: 2px solid var(--green-950); }
::-webkit-scrollbar-thumb:hover { background: var(--green-600); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  background: var(--green-950);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader--done { transform: translateY(-101%); }
.preloader__inner { text-align: center; }
.preloader__logo { height: 56px; margin: 0 auto 1.6rem; animation: plFade 0.9s var(--ease-out) both; }
@keyframes plFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.preloader__ball {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ball-soft), var(--ball) 70%);
  margin: 0 auto 1.2rem;
  animation: plBounce 0.65s cubic-bezier(0.5, 0.05, 1, 0.5) infinite alternate;
}
@keyframes plBounce { from { transform: translateY(-26px); } to { transform: translateY(8px) scaleX(1.15) scaleY(0.85); } }
.preloader__bar {
  width: 180px;
  height: 3px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--ball);
  border-radius: 2px;
  animation: plBar 1.1s ease-in-out infinite;
}
@keyframes plBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(480%); } }
body.is-loading { overflow: hidden; }

/* ---------- Subtiele cursor-ring (native cursor blijft zichtbaar) ---------- */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 2147483100;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 1.6px solid #fff;
  mix-blend-mode: difference;
  opacity: 0.55;
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out), opacity 0.25s, background 0.25s, border-color 0.25s;
}
.cursor-ring.is-hover {
  width: 46px;
  height: 46px;
  opacity: 1;
  mix-blend-mode: normal;
  border-color: var(--ball);
  background: rgba(217, 240, 74, 0.14);
}

/* ---------- Split-text ---------- */
[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.06em 0.09em 0.08em 0.02em;
  margin: -0.06em -0.09em -0.08em -0.02em;
}
[data-split] .wi {
  display: inline-block;
  transform: translateY(115%) rotate(3deg);
  transition: transform 0.85s var(--ease-out);
  transition-delay: calc(var(--wd, 0) * 70ms);
  will-change: transform;
}
[data-split].split-in .wi { transform: none; }
@media (prefers-reduced-motion: reduce) { [data-split] .wi { transform: none !important; } }

/* ---------- Hero video ---------- */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero__bg > img, .hero__bg > video { will-change: transform; }
.hero__side {
  position: absolute;
  right: clamp(0.6rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 700px) { .hero__side { display: none; } }

/* ---------- Hero op de telefoon: rustiger en minder uitvergroot ---------- */
@media (max-width: 700px) {
  /* Iets minder hoog, zodat de 16:9-beelden niet extreem worden
     bijgesneden en de video natuurlijker oogt. */
  .hero { min-height: 88svh; }
  .hero__video { object-position: center 45%; }
  .hero__inner { padding-bottom: 0.5rem; }
  .hero__title { font-size: clamp(3.1rem, 17vw, 5rem); line-height: 0.92; }
  .hero__sub { font-size: 1rem; line-height: 1.55; max-width: 34ch; }
  .hero__actions { gap: 0.7rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    padding-top: 1.1rem;
    margin-bottom: 1.5rem;
  }
  .hero__meta div strong { font-size: 0.86rem; line-height: 1.15; }
  .hero__meta div small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
}
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  margin-bottom: 2.2rem;
}
.hero__scroll .ball {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ball);
  animation: scrollBall 1.4s ease-in-out infinite;
}
@keyframes scrollBall { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px) scaleY(0.85); } }
.hero__scroll:hover { color: var(--ball); }

/* ---------- Stats-band ---------- */
.stats-band {
  background: var(--ball);
  color: var(--green-950);
  transform: rotate(-1.4deg) scale(1.02);
  margin: 1.5rem 0;
  box-shadow: 0 18px 50px rgba(4, 23, 16, 0.15);
  position: relative;
  z-index: 3;
}
.stats-band__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
}
.stats-band__item {
  text-align: center;
  padding: 0.4rem 1rem;
  border-right: 2px solid rgba(4, 23, 16, 0.14);
}
.stats-band__item:last-child { border-right: none; }
@media (max-width: 820px) { .stats-band__item:nth-child(2n) { border-right: none; } }
.stats-band__item strong {
  display: block;
  font-style: italic;
  font-weight: 850;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
}
.stats-band__item small {
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.74rem;
  opacity: 0.8;
}

/* ---------- Jeugdroute ---------- */
.route {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
  position: relative;
}
.route--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .route { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .route { grid-template-columns: 1fr; } }
.route::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 4%;
  right: 4%;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--green-100) 0 14px, transparent 14px 26px);
  z-index: 0;
}
@media (max-width: 1000px) { .route::before { display: none; } }
.route-step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.route-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.route-step__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  color: #fff;
  font-style: italic;
  font-weight: 850;
  font-size: 0.85rem;
  box-shadow: 0 6px 16px rgba(4, 23, 16, 0.2);
}
.link-accent {
  color: var(--green-700);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-accent:hover { color: var(--green-600); }

/* Blauwe link, beschikbaar maar nu niet in gebruik
   (de ZLTB-link volgt de groene huisstijl). */
.link-blauw,
.check-line a.link-blauw {
  color: #1B5FCC;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-blauw:hover,
.check-line a.link-blauw:hover { color: #0F47A1; }

.route-step--blauw .route-step__dot { background: #2F6BB0; }
.route-step--rood .route-step__dot { background: #D93B2B; }
.route-step--oranje .route-step__dot { background: #EF8A1F; }
.route-step--groen .route-step__dot { background: #3E9B4F; }
.route-step--geel .route-step__dot { background: var(--ball); color: var(--green-950); }
.route-step--volw .route-step__dot { background: var(--green-700); }
.route-step h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.route-step .age {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay);
  margin: 0.25rem 0 0.6rem;
}
.route-step p { font-size: 0.92rem; color: var(--muted); }

/* ---------- Galerij: dubbele band ---------- */
.gallery-band__track--rev { animation-direction: reverse; animation-duration: 52s; padding-top: 0; }

/* ---------- Ribbon ---------- */
.pakket-card .ribbon {
  position: absolute;
  top: 20px;
  right: -42px;
  transform: rotate(45deg);
  background: var(--ball);
  color: var(--green-950);
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  padding: 0.4rem 3rem;
  box-shadow: 0 4px 12px rgba(4, 23, 16, 0.18);
  pointer-events: none;
}

/* ---------- Testimonials watermark ---------- */
.section--darker { position: relative; overflow: hidden; }
.section--darker .watermark {
  position: absolute;
  top: -4rem;
  right: -1rem;
  font-style: italic;
  font-weight: 850;
  font-size: clamp(16rem, 30vw, 26rem);
  line-height: 1;
  color: rgba(217, 240, 74, 0.05);
  pointer-events: none;
  user-select: none;
}

/* ---------- Page-hero met beeld ---------- */
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  filter: saturate(0.85);
}
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(4, 23, 16, 0.55), rgba(1, 59, 29, 0.35) 60%, rgba(4, 23, 16, 0.75));
}
.page-hero .container { position: relative; z-index: 1; }

/* ---------- Terug-naar-boven ---------- */
.fab-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green-950);
  color: var(--ball);
  display: grid;
  place-items: center;
  z-index: 900;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease-out), background 0.3s;
  box-shadow: 0 10px 26px rgba(4, 23, 16, 0.35);
}
.fab-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fab-top:hover { background: var(--green-800); }
.fab-top svg.ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.fab-top svg.ring circle {
  fill: none;
  stroke-width: 3;
}
.fab-top svg.ring .bg { stroke: rgba(217, 240, 74, 0.18); }
.fab-top svg.ring .fg { stroke: var(--ball); stroke-linecap: round; }
.fab-top .arrow { position: relative; z-index: 1; }

/* ---------- Footer-marquee ---------- */
.footer-marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 2.6rem 0 1rem;
  user-select: none;
}
.footer-marquee .marquee__track {
  animation-duration: 60s;
  font-size: clamp(4rem, 9vw, 8rem);
  font-stretch: 118%;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.16);
}
.footer-marquee .accent-fill { color: rgba(217, 240, 74, 0.22); -webkit-text-stroke: 0; }

/* ---------- Tilt ---------- */
[data-tilt] { transform-style: preserve-3d; }
[data-tilt] > * { transform: translateZ(0); }

/* ---------- Over-ons handtekening ---------- */
.about-sign {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--cream-dark);
}
.about-sign img { height: 44px; width: auto; }
.about-sign strong { font-style: italic; font-weight: 850; text-transform: uppercase; font-size: 0.95rem; color: var(--green-800); display: block; }
.about-sign small { color: var(--muted); font-size: 0.8rem; }

/* ---------- Info-kaart (wintercapaciteit e.d.) ---------- */
.notice {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--white);
  border-left: 5px solid var(--clay);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-md);
  margin-top: 2.4rem;
}
.notice .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FBE9DF;
  color: var(--clay);
  display: grid;
  place-items: center;
  font-style: italic;
  font-weight: 850;
  font-size: 1.1rem;
}
.notice h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: var(--green-800);
}
.notice p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Zo werkt het ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 1.8rem; } }
.step { position: relative; }
.step__num {
  display: block;
  font-style: italic;
  font-weight: 850;
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--green-600);
}
.step h3 {
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 1.2rem;
  margin: 0.9rem 0 0.5rem;
  color: var(--green-800);
}
.step p { color: var(--muted); font-size: 0.98rem; }
.step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 0.6rem;
  right: -2rem;
  font-style: italic;
  font-weight: 850;
  font-size: 2.2rem;
  color: var(--clay);
  opacity: 0.5;
}
@media (max-width: 900px) { .step:not(:last-child)::after { display: none; } }

/* ---------- Knop-interactie: indrukken en focus ---------- */
.btn:active { transform: translateY(1px) scale(0.97); transition-duration: 0.08s; }
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ball);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { border-radius: 999px; }

/* ---------- Taalkeuze-vlag (vast knopje linksonder) ---------- */
.lang-fab {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 900;
  box-shadow: 0 10px 26px rgba(4, 23, 16, 0.35);
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  display: block;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.lang-fab:hover { transform: scale(1.12) rotate(-4deg); box-shadow: 0 14px 32px rgba(4, 23, 16, 0.45); }
.lang-fab svg { width: 100%; height: 100%; display: block; }
.lang-fab .lang-fab__label {
  position: absolute;
  left: 58px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--green-950);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
}
.lang-fab:hover .lang-fab__label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 820px) {
  /* Op mobiel pas tonen zodra je scrolt, zodat het vlaggetje nooit
     over de tekst in de hero valt. */
  .lang-fab {
    left: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
  }
  .lang-fab.show { opacity: 1; pointer-events: auto; transform: none; }
  .lang-fab .lang-fab__label { display: none; }
}

/* ---------- Sticky inschrijf-balk (alleen mobiel) ---------- */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(4, 23, 16, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(217, 240, 74, 0.25);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out);
}
.mobile-cta.show { transform: none; }
.mobile-cta .btn { flex: 1; justify-content: center; padding: 0.95rem 1rem; }
.mobile-cta__alt {
  flex-shrink: 0;
  color: var(--white);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 820px) {
  .mobile-cta { display: flex; }
  .fab-top { bottom: calc(96px + env(safe-area-inset-bottom)); right: 16px; width: 46px; height: 46px; }
  body.nav-open .mobile-cta { display: none; }
}

/* ---------- Extra micro-interacties ---------- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease-out);
  pointer-events: none;
}
.btn:hover::before { left: 130%; }

.usp-card .usp-num { display: inline-block; transition: transform 0.35s var(--ease-out), color 0.35s; }
.usp-card:hover .usp-num { transform: scale(1.35) rotate(-6deg); color: var(--green-600); }

@keyframes dotBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-9px); }
  70% { transform: translateY(2px) scaleY(0.9); }
}
.route-step:hover .route-step__dot { animation: dotBounce 0.55s var(--ease-out); }

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
}
.contact-card .icon { transition: background 0.3s, color 0.3s; }
.contact-card:hover .icon { animation: wiggle 0.5s var(--ease-out); background: var(--green-700); color: var(--white); }

.faq-item { transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.faq-item:hover { transform: translateX(6px); }

.stats-band__item strong { transition: transform 0.3s var(--ease-out); }
.stats-band__item:hover strong { transform: scale(1.1) rotate(-2deg); }

.trainer-card__body h3 { transition: color 0.3s; }
.trainer-card:hover .trainer-card__body h3 { color: var(--ball); }

.quote-card::before { transition: transform 0.35s var(--ease-out); }
.quote-card:hover::before { transform: rotate(-10deg) scale(1.15); }

.pakket-card__price { display: inline-block; transition: transform 0.3s var(--ease-out); }
.pakket-card:hover .pakket-card__price { transform: translateX(6px); }

.site-footer li a { display: inline-block; transition: transform 0.25s var(--ease-out), color 0.2s; }
.site-footer li a:hover { transform: translateX(5px); }

/* ---------- Taalswitch ---------- */
.lang-switch {
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 0.32rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  font-style: italic;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: border-color 0.25s, color 0.25s;
}
.lang-switch:hover { border-color: var(--ball); color: var(--ball) !important; }
.lang-switch::after { display: none !important; }
@media (max-width: 900px) {
  .main-nav .lang-switch { font-size: 1rem !important; padding: 0.45rem 1.1rem !important; }
}

/* ---------- Nieuwsbrief in footer ---------- */
.footer-news { margin-top: 1.4rem; }
.footer-news label {
  display: block;
  font-style: italic;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--ball);
  margin-bottom: 0.6rem;
}
.footer-news .row { display: flex; gap: 0.5rem; max-width: 320px; }
.footer-news input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}
.footer-news input::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer-news input:focus { outline: none; border-color: var(--ball); }
.footer-news button {
  background: var(--ball);
  color: var(--green-950);
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
  font-weight: 800;
  font-style: italic;
  font-size: 0.85rem;
  transition: transform 0.25s var(--ease-out), background 0.25s;
}
.footer-news button:hover { transform: translateY(-2px); background: var(--ball-soft); }
.footer-news .ok {
  display: none;
  color: var(--ball);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
.footer-news.done .row { display: none; }
.footer-news.done .ok { display: block; }

/* ---------- Telefoon: links prettig aantikbaar maken ---------- */
@media (max-width: 700px) {
  .site-footer li { margin-bottom: 0.15rem; }
  .site-footer li a { padding: 0.45rem 0; }
  .footer-bottom a { display: inline-block; padding: 0.35rem 0.2rem; }
  .link-accent,
  .cta-banner .cta-alt a,
  .badge-note a,
  .prose a { display: inline-block; padding: 0.2rem 0; }
  .faq-item__body a { padding: 0; }

  /* Bel- en maillinks en losse tekstlinks ruimer aantikbaar */
  .aside-card a.plain,
  .aside-card p a,
  .form-note a,
  .hero__scroll { display: inline-block; padding: 0.35rem 0; }
  .mobile-cta__alt { padding: 0.6rem 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .cursor-ring { display: none; }
  .stats-band { transform: none; }
}
.badge-note {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  background: var(--green-100);
  color: var(--green-800);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-weight: 700;
  font-size: 0.88rem;
}
.badge-note a {
  color: var(--green-700);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================================
   AFWERKING
   Kleine details die het verschil maken tussen "een nette site" en een site
   waar mensen even bij stilstaan. Alles hieronder is puur cosmetisch: haal je
   dit blok weg, dan werkt de site nog precies hetzelfde.
   ============================================================================ */

/* ---------- Alleen voor schermlezers ----------
   Tekst die onzichtbaar is maar wel wordt voorgelezen. Gebruikt om de
   koppenstructuur logisch te houden zonder het ontwerp te veranderen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Tekstselectie in de huisstijl ---------- */
::selection { background: var(--ball); color: var(--green-950); }

/* ---------- Schuifbalk ---------- */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--green-700) var(--cream-dark); scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb {
  background: var(--green-700);
  border-radius: 99px;
  border: 3px solid var(--cream-dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--green-600); }

/* ---------- Eén herkenbare focusring op de hele site ----------
   Belangrijk voor wie met het toetsenbord navigeert: je ziet altijd precies
   waar je bent. Alleen bij toetsenbordgebruik, niet bij een muisklik. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ball);
  outline-offset: 3px;
  border-radius: 6px;
}
.site-header a:focus-visible,
.main-nav a:focus-visible { outline-color: var(--ball); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--ball); outline-offset: 1px; }

/* ---------- Knoppen: lichtveeg bij hover ----------
   Een subtiele glans die één keer over de knop trekt. Geeft het gevoel dat
   de knop reageert, zonder druk of speels te worden. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
.btn--green::after,
.btn--ghost::after { background: linear-gradient(115deg, transparent 40%, rgba(217, 240, 74, 0.14) 50%, transparent 60%); }
.btn:active { transition-duration: 0.08s; }

/* Knop tijdens verzenden: draaiend rondje in plaats van alleen tekst. */
.btn[disabled] { cursor: progress; opacity: 0.85; }
.btn[disabled]::after { display: none; }
.btn.bezig::before {
  content: "";
  width: 1em;
  height: 1em;
  margin-right: 0.15rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: knop-draai 0.7s linear infinite;
  flex: none;
}
@keyframes knop-draai { to { transform: rotate(360deg); } }

/* ---------- Navigatie: streepje dat meegroeit ---------- */
@media (min-width: 901px) {
  .main-nav a:not(.btn) { position: relative; }
  .main-nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--ball);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.32s var(--ease-out);
  }
  .main-nav a:not(.btn):hover::after,
  .main-nav a:not(.btn):focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ---------- Pakketkaarten: rustig omhoog, rand licht op ---------- */
.pakket-card {
  transition: transform 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out),
              border-color 0.34s var(--ease-out);
}
.pakket-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 76, 37, 0.28);
}
.pakket-card__price { transition: color 0.3s var(--ease-out); }
.pakket-card:hover .pakket-card__price { color: var(--green-600); }

/* ---------- Contactkaarten ---------- */
.contact-card { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.contact-card .icon { transition: transform 0.35s var(--ease-out), background 0.3s; }
.contact-card:hover .icon { transform: scale(1.06); }

/* ---------- Foto's: heel licht inzoomen in hun kader ---------- */
.trainer-card figure,
.gallery-band__track a,
.pakket-card figure { overflow: hidden; }
.trainer-card img { transition: transform 0.6s var(--ease-out); }
.trainer-card:hover img { transform: scale(1.045); }

/* ---------- Footerlinks: schuiven een klein stukje op ---------- */
.footer-col a,
.footer-bottom a {
  transition: color 0.22s, transform 0.22s var(--ease-out);
  display: inline-block;
}
.footer-col a:hover,
.footer-bottom a:hover { color: var(--ball); transform: translateX(3px); }

/* ---------- Formuliervelden: rustige gloed bij focus ---------- */
.field input,
.field select,
.field textarea {
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: 0 0 0 4px rgba(217, 240, 74, 0.28);
}
/* Een veld dat is afgekeurd pas rood maken nadat iemand het heeft aangeraakt,
   niet meteen bij het openen van de pagina. */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid { border-color: #C0492B; }

/* ---------- Aanvinkvakjes wat groter en prettiger ---------- */
.check-line input[type="checkbox"],
.check-line input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--green-700);
  cursor: pointer;
  flex: none;
}
.check-line { cursor: pointer; }
.check-line:hover span { color: var(--green-800); }

/* ---------- Filterknoppen op de pakkettenpagina ---------- */
.filter-bar button { transition: background 0.24s, color 0.24s, transform 0.24s var(--ease-out), border-color 0.24s; }
.filter-bar button:hover { transform: translateY(-2px); }

/* Kaarten die wegfilteren: uitfaden in plaats van wegspringen. */
.pakket-card { animation: kaart-in 0.4s var(--ease-out) both; }
@keyframes kaart-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Zachte scroll bij ankerlinks ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Zodat een aangeklikt anker niet onder de vaste balk verdwijnt. */
  :target { scroll-margin-top: calc(var(--header-h) + 20px); }
  [id] { scroll-margin-top: calc(var(--header-h) + 20px); }
}

/* ---------- Alles rustig houden voor wie dat wil ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn::after,
  .pakket-card { animation: none !important; transition: none !important; }
  .btn:hover,
  .pakket-card:hover,
  .contact-card:hover,
  .footer-col a:hover { transform: none !important; }
  html { scroll-behavior: auto; }
}


/* ---------- Taalknop: rustiger gedrag ----------
   Verschijnt overal pas zodra je een stukje hebt gescrold, niet alleen op
   mobiel. Zo staat hij nooit over de eerste knoppen of over de hero-tekst
   zodra iemand de pagina opent. */
.lang-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.lang-fab.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
/* Geen kanteling bij hover: alleen een klein beetje groter. */
.lang-fab:hover { transform: scale(1.08); }
.lang-fab.show:hover { transform: scale(1.08); }

/* De kicker staat nu binnen de h1, zodat de belangrijkste zoekwoorden in de
   hoofdkop van de pagina staan. Hij moet daar niet de reuzenletters van
   .display overnemen. */
.hero__title-kicker {
  display: block;
  font-size: 0.78rem !important;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

/* Lange Nederlandse samenstellingen ("studentenkorting", "privacyverklaring")
   passen op een smal scherm niet op één regel. Zonder hulp breekt de browser
   ze midden in het woord af. Met afbreekstreepjes leest dat een stuk netter.
   Werkt omdat de taal op <html lang="..."> staat. */
.page-hero .display,
.display {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
}

/* ==========================================================================
   Correcties na de bugcheck van 13 augustus
   ========================================================================== */

/* Op een smalle telefoon (320px, bijvoorbeeld een iPhone SE) paste het
   e-mailveld met de knop ernaast niet meer op één regel: de knop liep 8px
   buiten het scherm. Nu breekt hij netjes af naar een eigen regel. */
.footer-news .row {
  flex-wrap: wrap;
}
@media (max-width: 359px) {
  .footer-news .row input,
  .footer-news .row button {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Een aanvinkregel met korte tekst was maar 25px hoog en daarmee lastig aan
   te tikken op een telefoon. Alle regels krijgen nu minstens 44px, de maat
   die als comfortabel geldt. Het vakje blijft bovenaan uitgelijnd, want bij
   de langere teksten loopt de tekst over meerdere regels door. */
.check-line {
  min-height: 44px;
  padding: 0.35rem 0;
}
.check-line input {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}