/* Logi-Ser huisstijl v3 — roos #B8635A, groen #2F5545, wit; warm wit #FDF8F6, salie #E7EFE7, blush #F9E8E4 */
* { box-sizing: border-box; }
body { margin: 0; background: #FDF8F6; font-family: 'Lora', Georgia, serif; color: #2C2A28; }
a { color: #B8635A; text-decoration: none; }
a:hover { color: #9C4E46; }
img { max-width: 100%; }
html { scroll-behavior: smooth; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
h1, h2, h3 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; }

.knop { display: inline-block; font-weight: 600; border-radius: 999px; }
.knop-primair { background: #B8635A; color: #fff; font-size: 15px; padding: 12px 24px; white-space: nowrap; }
.knop-primair:hover { background: #9C4E46; color: #fff; }
.knop-groot { font-size: 17px; padding: 16px 32px; }

/* Zwevende intake-knop */
.intake-knop { position: fixed; right: 24px; bottom: 24px; z-index: 60; background: #2F5545; color: #fff; font-size: 16px; font-weight: 600; padding: 16px 28px; border-radius: 999px; box-shadow: 0 14px 32px rgba(47,85,69,.3); display: flex; align-items: center; gap: 10px; }
.intake-knop:hover { background: #B8635A; color: #fff; }
.intake-knop .stip { width: 9px; height: 9px; border-radius: 50%; background: #E8B5AD; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(253,248,246,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #EADFDA; }
.header-inner { display: flex; align-items: center; gap: 26px; padding-top: 14px; padding-bottom: 14px; }
.logo { height: 62px; width: auto; display: block; }
.hoofdnav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.hoofdnav a { font-size: 15px; font-weight: 500; color: #4A4540; }
.hoofdnav a:hover { color: #B8635A; }
.header-acties { display: flex; align-items: center; gap: 18px; }
.taal { display: flex; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.taal a { padding: 5px 9px; border-radius: 999px; color: #6E6862; }
.taal a.actief { background: #2F5545; color: #fff; }

.kicker { font-size: 13px; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 600; color: #B8635A; margin: 0 0 14px 0; }
.sectietitel { font-size: 48px; font-weight: 600; letter-spacing: -.5px; color: #2F5545; }
.sectie-intro { font-size: 17px; line-height: 1.65; color: #4A4540; margin: 22px 0 34px; max-width: 560px; }

/* Hero */
.hero-band { background: #FDF8F6; color: #2C2A28; position: relative; overflow: hidden; }
.hero-band::after { content: ''; position: absolute; bottom: -240px; left: -160px; width: 520px; height: 520px; border-radius: 50%; background: #D8E4D6; opacity: .6; }
.hero { position: relative; z-index: 1; display: flex; align-items: stretch; min-height: 680px; }
.hero > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 84px 76px 84px 6%; }
.hero h1 { font-size: 78px; letter-spacing: -1px; line-height: 1.03; margin: 0 0 26px 0; color: #2F5545; text-wrap: balance; }
.hero-intro { font-size: 18px; line-height: 1.7; color: #4A4540; margin: 0 0 36px 0; max-width: 520px; text-wrap: pretty; }
.hero-cta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.hero-cta .tekstlink { font-size: 17px; font-weight: 600; color: #2F5545; padding: 16px 4px; border-bottom: 2px solid #E8B5AD; }
.hero-cta .tekstlink:hover { color: #B8635A; }
.hero-usps { display: flex; gap: 34px; margin-top: 52px; border-top: 1px solid #EADFDA; padding-top: 26px; flex-wrap: wrap; }
.hero-usps p { margin: 0; }
.hero-usps .u-titel { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: #2F5545; }
.hero-usps .u-sub { font-size: 14px; color: #6E6862; }
.hero-beeld { width: 44%; min-width: 320px; flex-shrink: 0; position: relative; }
.hero-beeld .beeld { height: 100%; overflow: hidden; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-badge { position: absolute; left: -34px; bottom: 60px; background: #fff; border-radius: 999px; box-shadow: 0 14px 34px rgba(47,85,69,.16); padding: 16px 26px; display: flex; align-items: center; gap: 13px; }
.hero-badge .stip { width: 10px; height: 10px; border-radius: 50%; background: #B8635A; flex-shrink: 0; }
.hero-badge p { font-size: 15px; font-weight: 500; margin: 0; color: #2F5545; }

.band { background: #fff; }
.sectie { padding: 92px 0; }
.sectiekop { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 52px; flex-wrap: wrap; }
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stap { border-radius: 18px; padding: 32px 30px 36px; background: #E7EFE7; }
.stap:nth-child(even) { background: #F9E8E4; }
.stap .nr { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 600; color: #B8635A; margin: 0 0 12px 0; }
.stap h3 { font-size: 26px; margin-bottom: 10px; color: #2F5545; }
.stap p { font-size: 15px; line-height: 1.65; color: #4A4540; margin: 0; }

.split { display: flex; gap: 76px; align-items: center; flex-wrap: wrap; }
.split > div:not(.split-beeld):not(.team-beeld) { flex: 1; min-width: 0; }
.split-beeld { width: 430px; max-width: 100%; border-radius: 24px; overflow: hidden; aspect-ratio: 1/1; box-shadow: 0 22px 50px rgba(184,99,90,.14); }
.split-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

#aanbod { background: #F9E8E4; }
.aanbod-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.aanbod-kaart { background: #fff; border-radius: 16px; padding: 22px 24px; min-width: 0; }
.aanbod-kaart p { margin: 0; }
.aanbod-kaart .a-titel { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; margin-bottom: 6px; color: #2F5545; }
.aanbod-kaart .a-sub { font-size: 15px; line-height: 1.55; color: #4A4540; }
.voorwie { margin-top: 34px; padding-top: 30px; border-top: 1px solid #EFD6D0; }
.voorwie .vw-titel { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; margin: 0 0 14px; color: #2F5545; }
.vw-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 26px; }
.vw-lijst p { font-size: 15.5px; margin: 0; color: #4A4540; display: flex; gap: 10px; min-width: 0; }
.vw-lijst .bolletje { color: #B8635A; flex-shrink: 0; }

.split-boven { align-items: flex-start; }
.bio { display: flex; flex-direction: column; gap: 18px; max-width: 620px; margin-top: 22px; }
.bio p { font-size: 17px; line-height: 1.75; color: #4A4540; margin: 0; text-wrap: pretty; }
.bio .bio-sig { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; color: #B8635A; margin-top: 6px; }
.team-beeld { width: 390px; max-width: 100%; flex-shrink: 0; border-radius: 20px; aspect-ratio: 4/5; background: #D8E4D6; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.team-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.team-beeld span { font-size: 14px; color: #4F6B58; background: #FDF8F6; padding: 9px 16px; border-radius: 999px; font-style: italic; }

.fotostrip { background: #FDF8F6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fotostrip div { height: 320px; overflow: hidden; }
.fotostrip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Wat ouders vertellen */
.ouders { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.ouder { background: #E7EFE7; border-radius: 22px; padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ouder:nth-child(even) { background: #F9E8E4; }
.ouder p { margin: 0; }
.ouder .aanhaling { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 46px; line-height: .6; color: #B8635A; }
.ouder .o-tekst { font-size: 16.5px; line-height: 1.65; color: #33453B; flex: 1; }
.ouder .o-naam { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; color: #2F5545; }

/* Goed om te weten */
.praktisch { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.pr-kaart { background: #fff; border: 1px solid #EADFDA; border-radius: 20px; padding: 30px 32px; min-width: 0; }
.pr-kaart p { margin: 0; }
.pr-kaart .p-titel { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; margin-bottom: 8px; color: #2F5545; }
.pr-kaart .p-sub { font-size: 15.5px; line-height: 1.6; color: #4A4540; }

.donker { background: #2F5545; color: #F4F0EC; }
.donker .sectietitel, .donker h2, .donker h3 { color: #F4F0EC; }
.donker .kicker { color: #E8B5AD; }
.donker-tekst { font-size: 17px; line-height: 1.75; color: #CBDBD1; max-width: 620px; }

.faq-wrap { max-width: 900px; margin: 0 auto; padding: 92px 32px; }
.faq-wrap .centreer { text-align: center; }
.faq-lijst { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.faq-lijst details { background: #fff; border-radius: 16px; padding: 22px 28px; }
.faq-lijst summary { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; font-weight: 600; cursor: pointer; color: #2F5545; }
.faq-lijst details p { font-size: 15px; line-height: 1.7; color: #4A4540; margin: 14px 0 0 0; }
.donker .faq-lijst details { background: #3B6754; }
.donker .faq-lijst summary { color: #F4F0EC; }
.donker .faq-lijst details p { color: #CBDBD1; }

/* Aanmelden */
.aanmeld-inner { display: flex; gap: 60px; flex-wrap: wrap; align-items: flex-start; }
.aanmeld-tekst { flex: 1; min-width: 300px; max-width: 420px; }
.aanmeld-tekst .sectietitel { font-size: 54px; text-wrap: balance; }
.contact-blok { background: #E7EFE7; border-radius: 20px; padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.contact-blok p { margin: 0; }
.contact-blok .c-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: #6E7A66; margin-bottom: 5px; }
.contact-blok .c-waarde { font-size: 18px; color: #2F5545; font-weight: 500; line-height: 1.5; }
.formulier { flex: 1.3; min-width: 320px; background: #fff; border: 1px solid #EADFDA; border-radius: 24px; padding: 40px 42px; color: #2C2A28; display: flex; flex-direction: column; gap: 18px; }
.formulier .f-titel { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; margin: 0; color: #2F5545; }
.formulier label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; min-width: 0; }
.formulier input, .formulier select, .formulier textarea { border: 1px solid #EADFDA; border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: 'Lora', Georgia, serif; background: #FDF8F6; width: 100%; min-width: 0; }
.formulier textarea { resize: vertical; }
.form-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.formulier button { background: #B8635A; color: #fff; font-size: 16px; font-weight: 600; padding: 15px; border: none; border-radius: 999px; cursor: pointer; font-family: 'Lora', Georgia, serif; }
.formulier button:hover { background: #9C4E46; }
.form-noot { font-size: 13px; color: #8B8378; margin: 0; line-height: 1.6; }
.melding { border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 600; }
.melding.ok { background: #E7EFE7; color: #3D6B47; }
.melding.fout { background: #F9E8E4; color: #9C4E46; }

.site-footer { background: #223F33; color: #A6BDAE; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 52px 32px; flex-wrap: wrap; }
.footer-merk { display: flex; flex-direction: column; gap: 14px; }
.footer-logo { height: 56px; width: auto; }
.footer-gegevens { font-size: 14px; margin: 0; line-height: 1.6; }
.footernav { display: flex; gap: 24px; font-size: 14px; flex-wrap: wrap; }
.footernav a { color: #A6BDAE; }
.footernav a:hover { color: #F4F0EC; }
.copyright { font-size: 13px; margin: 0; }

/* Statement — foto links, groen paneel rechts */
.statement { background: #2F5545; color: #F4F0EC; display: flex; min-height: 600px; overflow: hidden; flex-wrap: wrap; }
.statement-beeld { width: 44%; min-width: 320px; }
.statement-beeld img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.statement-tekst { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 90px 7%; min-width: 320px; }
.statement-tekst .kicker { color: #E8B5AD; margin-bottom: 22px; }
.statement-tekst h2 { font-size: 62px; letter-spacing: -.5px; line-height: 1.08; margin: 0 0 22px; max-width: 560px; color: #F4F0EC; }
.statement-sub { font-size: 19px; line-height: 1.7; color: #CBDBD1; margin: 0; max-width: 480px; text-wrap: pretty; }

.menu-toggle { display: none; }
.menu-knop { display: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.menu-knop span { display: block; width: 24px; height: 3px; background: #2F5545; border-radius: 2px; }

@media (max-width: 1080px) {
  .menu-knop { display: flex; }
  .hoofdnav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #FDF8F6; border-bottom: 1px solid #EADFDA; flex-direction: column; gap: 0; padding: 8px 0; }
  .hoofdnav a { padding: 14px 32px; }
  .menu-toggle:checked ~ .hoofdnav { display: flex; }
  .header-inner { position: relative; flex-wrap: wrap; }
  .hero { flex-direction: column-reverse; min-height: 0; }
  .hero > div:first-child { padding: 48px 28px 56px; }
  .hero-beeld { width: 100%; min-width: 0; height: 380px; }
  .hero-badge { left: 24px; bottom: -26px; }
  .split { flex-direction: column; align-items: stretch; }
  .split-beeld, .team-beeld { width: 100%; }
  .stappen { grid-template-columns: 1fr 1fr; }
  .aanmeld-inner { flex-direction: column; }
  .aanmeld-tekst, .formulier { width: 100%; max-width: 100%; }
  .fotostrip { grid-template-columns: 1fr 1fr; }
  .fotostrip div { height: auto; }
  .fotostrip img { aspect-ratio: 4/5; height: 100%; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-merk { align-items: center; }
  .statement { flex-direction: column; }
  .statement-beeld { width: 100%; }
  .statement-beeld img { height: 380px; min-height: 0; }
  .statement-tekst { padding: 60px 32px; }
  .statement-tekst h2 { font-size: 42px; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 48px; }
  .hero-beeld { height: 300px; }
  .sectietitel { font-size: 34px; }
  .aanmeld-tekst .sectietitel { font-size: 38px; }
  .stappen, .aanbod-lijst { grid-template-columns: 1fr; }
  .header-acties .knop { display: none; }
  .intake-knop { right: 14px; bottom: 14px; font-size: 15px; padding: 14px 22px; }
  .fotostrip img { aspect-ratio: 1/1; }
  .statement-beeld img { height: 300px; }
  .formulier { padding: 30px 26px; }
}