/* ============================================================
   MONTANJE — STYLESHEET
   Donker thema. Aanpassen van kleuren: zie :root hieronder.
   ============================================================ */

:root {
  --bg:           #f1e9db;
  --bg-alt:       #e9dfc9;
  --bg-card:      #faf6ec;
  --bg-elev:      #ffffff;
  --line:         #d9c9a8;
  --line-soft:    #e4d6b8;

  --tekst:        #1a2430;
  --tekst-zacht:  #566270;
  --tekst-dim:    #8b95a1;

  --accent:       #22415f;
  --accent-hover: #2d5476;
  --accent-dim:   rgba(34, 65, 95, 0.12);

  --groen:        #3f7a5a;
  --rood:         #b8483a;

  --goud:         #b8863a;
  --goud-hover:   #c99a4e;
  --goud-dim:     rgba(184, 134, 58, 0.14);

  --navy-diep:      #101f33;
  --navy-diep-alt:  #16304d;
  --bone-tekst:     #f4ecd9;

  --radius:       12px;
  --radius-lg:    20px;
  --max:          1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-kop: "Fraunces", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.smal { max-width: 720px; }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }

p { color: var(--tekst-zacht); }
p + p { margin-top: 1rem; }

.lead { font-size: 1.1rem; color: var(--tekst-zacht); }

.label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.todo-marker {
  color: var(--accent) !important;
  background: var(--accent-dim);
  padding: 0 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ---------- Header ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 233, 219, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tekst);
  letter-spacing: -0.02em;
}
.logo span { color: var(--accent); }

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  color: var(--tekst-zacht);
  font-size: 0.94rem;
  font-weight: 500;
}
.nav-links a:hover { color: var(--tekst); }

/* Aanmelden-knop in header: witte tekst voor beter contrast */
.nav-links .knop {
  color: #ffffff !important;
  background: var(--accent);
}
.nav-links .knop:hover {
  color: #ffffff !important;
  background: var(--accent-hover);
}

.menu-knop {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--tekst);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1rem;
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line-soft); }
  .nav-links .knop { margin-top: 12px; text-align: center; border-bottom: none; }
  .menu-knop { display: block; }
}

/* ---------- Knoppen ---------- */

.knop {
  display: inline-block;
  background: var(--accent);
  color: #f5ecd9;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: var(--font);
}
.knop:hover { background: var(--accent-hover); color: #f5ecd9; }
.knop:active { transform: scale(0.98); }

.knop-rand {
  background: transparent;
  color: var(--tekst);
  border: 1px solid var(--line);
}
.knop-rand:hover { background: var(--bg-elev); color: var(--tekst); border-color: var(--tekst-dim); }

.knop-blok { width: 100%; padding: 15px 24px; font-size: 1rem; }

/* ---------- Secties ---------- */

section { padding: 88px 0; }
section.compact { padding: 56px 0; }
.sectie-alt { background: var(--bg-alt); }

.sectie-kop { max-width: 640px; margin-bottom: 48px; }
.sectie-kop.midden { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Hero ---------- */

.hero { padding: 104px 0 88px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.hero h1 { margin-bottom: 1.2rem; }
.hero .lead { margin-bottom: 2rem; max-width: 520px; }
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Fotoplaatshouders ---------- */

.foto {
  background: var(--bg-card);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--tekst-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.foto-hero  { aspect-ratio: 4 / 3; }
.foto-coach { aspect-ratio: 1 / 1; margin-bottom: 20px; }
.foto-breed { aspect-ratio: 21 / 9; }
.foto-icoon { font-size: 1.6rem; margin-bottom: 8px; opacity: 0.5; }

/* ---------- Kaarten ---------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.kaart {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.kaart-nummer {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.9rem;
  margin-bottom: 16px;
}
.kaart p { font-size: 0.94rem; }

/* ---------- Tarieven ---------- */

.tarief {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tarief.uitgelicht { border-color: var(--accent); }
.tarief-badge {
  position: absolute;
  top: -11px; left: 28px;
  background: var(--accent);
  color: #f5ecd9;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
}
.tarief-prijs {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 12px 0 2px;
}
.tarief-eenheid { font-size: 0.88rem; color: var(--tekst-dim); margin-bottom: 16px; }
.tarief p { font-size: 0.94rem; margin-bottom: 20px; }
.tarief ul { list-style: none; margin-bottom: 24px; flex: 1; }
.tarief li {
  font-size: 0.92rem;
  color: var(--tekst-zacht);
  padding: 7px 0 7px 26px;
  position: relative;
}
.tarief li::before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Coaches ---------- */

.coach { text-align: left; }
.coach h3 { margin-bottom: 2px; }
.coach-rol {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.coach p { font-size: 0.94rem; }

/* ---------- Formulieren ---------- */

.formulier { max-width: 680px; }

.veld { margin-bottom: 22px; }
.veld label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tekst);
  margin-bottom: 7px;
}
.veld .hint {
  font-size: 0.82rem;
  color: var(--tekst-dim);
  margin-bottom: 8px;
  line-height: 1.5;
}
.verplicht { color: var(--accent); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--tekst);
  padding: 12px 14px;
  font-size: 0.96rem;
  font-family: var(--font);
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--tekst-dim); }
textarea { resize: vertical; min-height: 110px; }
select { cursor: pointer; }

/* Safari op iOS geeft datumvelden een eigen, vaste breedte en negeert daarbij
   width:100%. Zonder onderstaande regels loopt het datumveld op de check-in
   buiten het scherm. appearance:none haalt die native maatvoering weg,
   min-width:0 laat het veld alsnog krimpen binnen zijn kolom. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  text-align: left;
}

/* Vangnet: geen enkel invoerveld mag breder worden dan zijn omgeving */
input, select, textarea { max-width: 100%; }

.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .veld-rij { grid-template-columns: 1fr; } }

.keuzes { display: flex; flex-direction: column; gap: 10px; }
.keuze {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.keuze:hover { border-color: var(--line); background: var(--bg-elev); }
.keuze input { margin-top: 4px; accent-color: var(--accent); flex-shrink: 0; }
.keuze span { font-size: 0.93rem; color: var(--tekst-zacht); }
.keuze strong { color: var(--tekst); font-weight: 500; display: block; }

.schaal { display: flex; gap: 8px; }
.schaal label {
  flex: 1;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 0;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--tekst-zacht);
  transition: all 0.15s;
  margin-bottom: 0;
}
.schaal input { display: none; }
.schaal input:checked + span { color: var(--accent); }
.schaal label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

fieldset { border: none; margin-bottom: 30px; }
legend {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tekst);
  margin-bottom: 4px;
  padding: 0;
}
.fieldset-hint {
  font-size: 0.88rem;
  color: var(--tekst-dim);
  margin-bottom: 18px;
}

.melding {
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.92rem;
  margin-bottom: 22px;
  border: 1px solid;
}
.melding-info {
  background: var(--accent-dim);
  border-color: rgba(212,162,74,0.35);
  color: var(--tekst-zacht);
}
.melding-fout {
  background: rgba(184,72,58,0.10);
  border-color: rgba(184,72,58,0.4);
  color: #8a2f22;
}
.melding-ok {
  background: rgba(63,122,90,0.12);
  border-color: rgba(63,122,90,0.4);
  color: #2c5e40;
}
.verborgen { display: none; }

/* ---------- Stappen / voortgang ---------- */

.stappen { display: flex; gap: 6px; margin-bottom: 36px; }
.stap-balk {
  flex: 1; height: 3px;
  background: var(--line);
  border-radius: 2px;
}
.stap-balk.actief { background: var(--accent); }

/* ---------- FAQ ---------- */

details {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 12px;
}
details[open] { border-color: var(--line); }
summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 400;
  flex-shrink: 0;
}
details[open] summary::after { content: "−"; }
details p { margin-top: 14px; font-size: 0.94rem; }

/* ---------- CTA-blok ---------- */

.cta {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
}
.cta h2 { margin-bottom: 0.8rem; }
.cta p { max-width: 500px; margin: 0 auto 28px; }

/* ---------- Footer ---------- */

footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line-soft);
  padding: 56px 0 32px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

footer h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tekst-dim);
  margin-bottom: 14px;
}
footer ul { list-style: none; }
footer li { margin-bottom: 9px; }
footer a { color: var(--tekst-zacht); }
footer a:hover { color: var(--accent); }
footer p { font-size: 0.9rem; }

.footer-onder {
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--tekst-dim);
  font-size: 0.85rem;
}

/* ---------- Juridische pagina's ---------- */

.juridisch h2 { margin-top: 44px; font-size: 1.4rem; }
.juridisch h3 { margin-top: 28px; }
.juridisch p, .juridisch li { color: var(--tekst-zacht); font-size: 0.96rem; }
.juridisch ul, .juridisch ol { margin: 14px 0 14px 22px; }
.juridisch li { margin-bottom: 8px; }
.juridisch table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.92rem;
  /* Zonder vaste layout rekt een tabel op tot de langste cel past, waardoor
     de privacy- en voorwaardenpagina op een telefoon horizontaal ging
     schuiven. Vaste layout houdt hem binnen de kolombreedte. */
  table-layout: fixed;
}
.juridisch th, .juridisch td { overflow-wrap: anywhere; }
.juridisch th, .juridisch td {
  border: 1px solid var(--line-soft);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}
.juridisch th { background: var(--bg-card); color: var(--tekst); font-weight: 600; }
.juridisch td { color: var(--tekst-zacht); }

/* ---------- Hulpklassen ---------- */

.midden { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   V2 — verdiepingsslag op navy + bone
   Doel: van vlak duo-kleurtje naar iets met meer laag en karakter.
   Serif kop-font, een donkere navy-band voor hero/footer/uitgelicht
   tarief, en een terughoudend goud-accent voor kleine hoogtepunten.
   ============================================================ */

h1, h2 { font-family: var(--font-kop); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-weight: 600; }
h2 { font-weight: 500; }

/* Zachtere, iets luxere kaarten met een subtiele schaduw i.p.v. platte rand */
.kaart, .tarief, .cta, details {
  box-shadow: 0 1px 2px rgba(16,31,51,0.04), 0 10px 28px rgba(16,31,51,0.06);
}

/* Pil-knoppen met wat meer gewicht en een zachte schaduw */
.knop {
  border-radius: 999px;
  padding: 13px 26px;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(16,31,51,0.14);
}
.knop-rand { box-shadow: none; }

/* ---------- Hero: donkere navy-band als openingsmoment ---------- */

.hero {
  background: linear-gradient(165deg, var(--navy-diep) 0%, var(--navy-diep-alt) 100%);
  border-bottom: 1px solid rgba(244,236,217,0.08);
}
.hero .label { color: var(--goud); }
.hero h1 { color: var(--bone-tekst); }
.hero p, .hero .lead { color: rgba(244,236,217,0.72); }
.hero .knop:not(.knop-rand) {
  background: var(--goud);
  color: #211505;
}
.hero .knop:not(.knop-rand):hover { background: var(--goud-hover); }
.hero .knop-rand {
  color: var(--bone-tekst);
  border-color: rgba(244,236,217,0.3);
}
.hero .knop-rand:hover { background: rgba(244,236,217,0.08); border-color: rgba(244,236,217,0.5); }
.hero .foto {
  background: rgba(244,236,217,0.05);
  border-color: rgba(244,236,217,0.22);
  color: rgba(244,236,217,0.55);
}

/* ---------- Uitgelicht tarief: zelfde donkere band, als "spotlight" ---------- */

.tarief.uitgelicht {
  background: linear-gradient(165deg, var(--navy-diep) 0%, var(--navy-diep-alt) 100%);
  border-color: transparent;
}
.tarief.uitgelicht h3,
.tarief.uitgelicht .tarief-prijs { color: var(--bone-tekst); }
.tarief.uitgelicht p,
.tarief.uitgelicht li { color: rgba(244,236,217,0.72); }
.tarief.uitgelicht .tarief-eenheid { color: rgba(244,236,217,0.5); }
.tarief.uitgelicht li::before { background: var(--goud); }
.tarief.uitgelicht .tarief-badge { background: var(--goud); color: #211505; }
.tarief.uitgelicht .knop-rand {
  color: var(--bone-tekst);
  border-color: rgba(244,236,217,0.3);
}
.tarief.uitgelicht .knop-rand:hover { background: rgba(244,236,217,0.08); border-color: rgba(244,236,217,0.5); }

/* ---------- Footer: bookend met dezelfde navy-band ---------- */

footer {
  background: var(--navy-diep);
  border-top: none;
  color: rgba(244,236,217,0.8);
}
footer .logo { color: var(--bone-tekst); }
footer .logo span { color: var(--goud); }
footer h4 { color: rgba(244,236,217,0.45); }
footer p, footer li { color: rgba(244,236,217,0.68); }
footer a { color: rgba(244,236,217,0.78); }
footer a:hover { color: var(--goud); }
.footer-onder {
  border-top-color: rgba(244,236,217,0.14);
  color: rgba(244,236,217,0.45);
}

/* ============================================================
   Vaste actieknop op mobiel
   Op een telefoon verdwijnt de knop uit de hero zodra je scrolt,
   waardoor de belangrijkste actie de rest van de pagina onzichtbaar
   is. Deze balk blijft onderin staan. Op desktop blijft de knop in
   de navigatiebalk zichtbaar, dus daar is de balk overbodig.
   ============================================================ */

.cta-balk { display: none; }

@media (max-width: 860px) {
  .cta-balk {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(241, 233, 219, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* Zolang de knop in de hero nog in beeld staat is de balk overbodig.
     script.js zet deze klasse; blijft die uit (geen JS), dan is de balk
     gewoon altijd zichtbaar — dat is de veilige uitkomst. */
  .cta-balk.cta-balk-verborgen {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  .cta-balk .knop {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--goud);
    color: #211505;
    box-shadow: none;
  }
  .cta-balk .knop:hover { background: var(--goud-hover); color: #211505; }

  /* Ruimte onderaan de pagina, zodat de balk de footer niet afdekt */
  body:has(.cta-balk) { padding-bottom: 82px; }
}