:root{
  --green:#4F8F7B;
  --green2:#8FBE9F;
  --soft:#EAF4EE;
  --cream:#FFF7E8;
  --gold:#F0C75E;
  --text:#2F4A43;
  --muted:#61756E;
  --white:#fff;
  --shadow:0 24px 70px rgba(36,55,53,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.72}
.container{width:min(1120px,calc(100% - 40px));margin:0 auto}
.header{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(47,111,100,.10)}
.header-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 16px}
.logo-top img{width:170px;display:block;margin:0 auto 10px}
.navlinks{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;font-weight:800;color:var(--green)}
.navlinks a{text-decoration:none;font-size:15px}
.button{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff!important;text-decoration:none;padding:13px 22px;border-radius:999px;font-weight:900;box-shadow:0 12px 28px rgba(47,111,100,.18)}
.button.light{background:var(--cream);color:var(--green)!important;box-shadow:none;border:1px solid rgba(47,111,100,.15)}
.hero{position:relative;overflow:hidden;padding:78px 0 88px;text-align:center;background:linear-gradient(180deg,#fff 0%,#f7fbf9 100%)}
.hero:before{content:"";position:absolute;left:-110px;top:-120px;width:360px;height:360px;border-radius:50%;background:rgba(232,185,87,.20)}
.hero:after{content:"";position:absolute;right:-130px;top:65px;width:420px;height:420px;border-radius:50%;background:rgba(95,155,139,.18)}
.hero-content{position:relative;z-index:1;max-width:880px}
.label{margin:0 0 10px;color:var(--green);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:13px}
h1,h2,h3{line-height:1.15;margin-top:0;color:var(--green)}
h1{font-size:clamp(40px,6vw,70px);margin-bottom:22px;color:#3F806E}
h2{font-size:clamp(30px,4vw,48px);margin-bottom:18px}
h3{font-size:24px;margin-bottom:12px}
.lead{font-size:21px;color:var(--muted);max-width:820px;margin-left:auto;margin-right:auto}
.actions{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.section,.intro{padding:86px 0}
.flow-block,.text-flow{max-width:880px;margin:0 auto}
.flow-block{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border-radius:46px;padding:54px}
.flow-block p{font-size:18px;color:rgba(255,255,255,.90)}
.flow-block .label{color:#fff}
.flow-list{margin-top:30px;border-top:1px solid rgba(255,255,255,.25)}
.flow-list p{margin:0;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.light-list{border-top:1px solid rgba(47,111,100,.18)}
.light-list p{border-bottom:1px solid rgba(47,111,100,.18);color:var(--muted)}
.soft{background:var(--soft)}
.text-flow p{font-size:18px;color:var(--muted)}
.center{text-align:center}
.max{max-width:780px;margin-left:auto;margin-right:auto;color:var(--muted)}
.aanbod-flow{margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:54px}
.aanbod-flow>div{position:relative;padding-left:72px}
.symbol{position:absolute;left:0;top:0;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--green);font-size:25px}
.aanbod-flow p{color:var(--muted);font-size:17px}
.highlight{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff}
.highlight-box{text-align:center;max-width:900px}
.highlight p{font-size:20px;color:rgba(255,255,255,.88)}
.style-section{background:#fbfdfc}
.palette-line{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:32px}
.palette-line span{width:110px;height:70px;border-radius:999px;box-shadow:0 12px 28px rgba(36,55,53,.10)}
.contact{background:var(--cream)}
.contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:50px;align-items:start}
.contact-panel{background:#fff;border-radius:36px;padding:38px;box-shadow:var(--shadow)}
.contact-panel a{color:var(--green);font-weight:900}
.note{background:var(--cream);border-radius:18px;padding:12px 14px;color:var(--muted);font-size:14px}
.footer{background:var(--text);color:#fff;padding:28px 0}
.footer-grid{display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.82)}
@media(max-width:850px){
  .navlinks{gap:16px}
  .aanbod-flow,.contact-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .container{width:min(100% - 28px,1120px)}
  .logo-top img{width:145px}
  .hero{padding:52px 0 62px}
  .section,.intro{padding:64px 0}
  .flow-block,.contact-panel{padding:28px;border-radius:30px}
  .aanbod-flow>div{padding-left:0}
  .symbol{position:relative;margin-bottom:16px}
  .footer-grid{flex-direction:column}
}


/* Kopjes op gekleurde vlakken */
.flow-block h2,
.highlight h2 {
  color: #ffffff;
}

/* Warme subtiele accentkleur voor kleine labels */
.label {
  color: #4F8F7B;
}

.flow-block .label,
.highlight .label {
  color: #ffffff;
}


/* Bovenste menu/kopjes expliciet warm groen */
.navlinks,
.navlinks a,
.header .navlinks a,
.header-inner .navlinks a {
  color: #4F8F7B !important;
}

.navlinks a:hover,
.header .navlinks a:hover {
  color: #2F6F64 !important;
}

/* Logo/menu achtergrond warm en rustig */
.header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid rgba(79, 143, 123, 0.18) !important;
}

/* Algemene tekstkopjes passend groen */
h1, h2, h3 {
  color: #4F8F7B !important;
}

/* Kopjes op donkere vlakken wit houden */
.flow-block h1,
.flow-block h2,
.flow-block h3,
.highlight h1,
.highlight h2,
.highlight h3 {
  color: #ffffff !important;
}

/* Hoofdtitel iets dieper groen */
.hero h1 {
  color: #3F806E !important;
}


/* Bovenste titel Zorghuis Zon & Maan groter dan de slogan */
.hero-brand-title {
  margin: 0 0 12px;
  color: #4F8F7B;
  font-weight: 900;
  font-size: clamp(28px, 4.5vw, 54px);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 58px) !important;
  color: #3F806E !important;
  font-weight: 800;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


/* Slogan onder de naam iets kleiner en rustiger */
.hero h1 {
  font-size: clamp(28px, 4vw, 46px) !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
  max-width: 820px;
}


/* Aanbod met drie vloeiende onderdelen */
.aanbod-flow {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 34px !important;
}

@media(max-width: 980px) {
  .aanbod-flow {
    grid-template-columns: 1fr !important;
  }
}


/* Uniformiteit kopjes + slogan/ondertekst */
.section > .container > .label,
.container > .label,
.label.center {
  text-align: center !important;
  display: block;
}

.section h2,
.intro h2,
.aanbod h2,
.text-flow h2,
.highlight h2,
.style-section h2,
.contact h2 {
  text-align: center !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  color: #4F8F7B !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  max-width: 900px !important;
}

.section h2 + p,
.aanbod h2 + p,
.style-section h2 + p,
.highlight h2 + p,
.text-flow h2 + p,
.contact h2 + p,
.max {
  text-align: center !important;
  font-size: clamp(17px, 2vw, 20px) !important;
  line-height: 1.7 !important;
  color: #61756E !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* De hoofdnaam bovenaan groter dan de slogan */
.hero-brand-title {
  text-align: center !important;
  font-size: clamp(32px, 5vw, 58px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: #4F8F7B !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero h1 {
  text-align: center !important;
  font-size: clamp(26px, 3.6vw, 42px) !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  color: #3F806E !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Kopjes op donkere vlakken wit houden */
.flow-block h2,
.highlight h2 {
  color: #ffffff !important;
}

.flow-block h2 + p,
.highlight h2 + p {
  color: rgba(255,255,255,.90) !important;
}

/* Contactblok inhoud links laten waar dat mooier leest */
.contact-panel h3,
.contact-panel p {
  text-align: left !important;
}


/* Hoofdtitel bovenin in dezelfde warme groentint als het logo */
.hero-brand-title {
  color: #7FA36A !important;
}

/* Slogan eronder iets donkerder groen voor goed contrast */
.hero h1 {
  color: #4F8F7B !important;
}


/* Hoofdtitel bovenin aangepast naar de kleur van 'ZORGHUIS' in het logo */
.hero-brand-title {
  color: #566D60 !important;
}


/* Vervang grote titel door logo in de hero */
.hero-brand-title {
  display: none !important;
}

.hero-brand-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px auto;
}

.hero-brand-logo img {
  width: min(100%, 300px);
  height: auto;
  display: block;
}

/* Slogan netjes onder het logo */
.hero h1 {
  text-align: center !important;
  font-size: clamp(26px, 3.6vw, 42px) !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  color: #4F8F7B !important;
  max-width: 820px !important;
  margin: 0 auto 18px auto !important;
}

@media (max-width: 620px) {
  .hero-brand-logo img {
    width: min(100%, 230px);
  }
}


/* Logo in de hero als wit rondje in plaats van vierkant */
.hero-brand-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 280px;
  margin: 0 auto 18px auto;
  background: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(36, 55, 53, 0.10);
}

.hero-brand-logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
}

/* Mobiel iets kleiner */
@media (max-width: 620px) {
  .hero-brand-logo {
    width: 210px;
    height: 210px;
  }

  .hero-brand-logo img {
    width: 80%;
    height: 80%;
  }
}


/* Alle hoofd-koppen dezelfde lettergrootte geven */
h2,
.section h2,
.aanbod h2,
.text-flow h2,
.highlight h2,
.style-section h2,
.contact h2,
.intro h2 {
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px !important;
}


/* Contactformulier */
.contact-form {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.contact-form label {
  font-weight: 800;
  color: #4F8F7B;
  margin-top: 4px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(79, 143, 123, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  font: inherit;
  color: #243735;
  background: #ffffff;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4F8F7B;
  box-shadow: 0 0 0 4px rgba(79, 143, 123, 0.12);
}

.form-button {
  border: 0;
  cursor: pointer;
  margin-top: 8px;
}

.direct-contact {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(79, 143, 123, 0.18);
}

.direct-contact p {
  margin: 8px 0;
}


/* Definitieve uniformiteit hoofd-koppen */
h2,
.intro h2,
.section h2,
.aanbod h2,
.text-flow h2,
.highlight h2,
.contact h2 {
  font-size: 42px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-align: center !important;
  color: #4F8F7B !important;
  margin: 0 auto 16px auto !important;
  max-width: 900px !important;
}

/* Op donkere vlakken blijven hoofd-koppen wit, maar wel even groot */
.flow-block h2,
.highlight h2 {
  font-size: 42px !important;
  color: #ffffff !important;
}

/* Mobiel: ook overal dezelfde verhouding */
@media (max-width: 620px) {
  h2,
  .intro h2,
  .section h2,
  .aanbod h2,
  .text-flow h2,
  .highlight h2,
  .contact h2,
  .flow-block h2,
  .highlight h2 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
}

/* Contactgegevens boven formulier */
.top-contact {
  margin: 0 0 24px 0 !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(79, 143, 123, 0.18) !important;
  border-radius: 18px !important;
  background: #FFF7E8 !important;
}

.form-title {
  margin-top: 22px !important;
}

.contact-panel h3 {
  color: #4F8F7B !important;
}


/* Meerdere pagina's */
.page-hero {
  padding: 70px 0 54px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
}

.page-hero h1 {
  font-size: clamp(36px, 5vw, 58px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  color: #4F8F7B !important;
  text-align: center !important;
  margin: 0 auto 16px auto !important;
}

.page-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 850px;
  text-align: center;
}

.page-actions {
  justify-content: center;
  margin-top: 24px;
}

/* Definitief gelijke kopgroottes */
h2,
.intro h2,
.section h2,
.aanbod h2,
.text-flow h2,
.highlight h2,
.contact h2 {
  font-size: 42px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px !important;
}

.flow-block h2,
.highlight h2 {
  color: #ffffff !important;
}

/* Aanbod op aparte pagina netjes als drie onderdelen */
.aanbod-flow {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 34px !important;
}

@media (max-width: 980px) {
  .aanbod-flow {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  h2,
  .intro h2,
  .section h2,
  .aanbod h2,
  .text-flow h2,
  .highlight h2,
  .contact h2 {
    font-size: 32px !important;
  }
}


/* Tarievenpagina */
.tarieven-list {
  margin-top: 28px;
  margin-bottom: 28px;
}

.tarieven-list p {
  background: rgba(255, 247, 232, 0.75);
  border-radius: 18px;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Menu met extra kopje tarieven netjes laten passen */
.navlinks {
  row-gap: 10px !important;
}


/* Onze basis centreren en groter maken dan de slogan eronder */
.intro .flow-block .label {
  display: block !important;
  text-align: center !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  margin: 0 auto 14px auto !important;
  color: #ffffff !important;
}

.intro .flow-block h2 {
  text-align: center !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin: 0 auto 18px auto !important;
  color: #ffffff !important;
}

@media (max-width: 620px) {
  .intro .flow-block .label {
    font-size: 28px !important;
  }

  .intro .flow-block h2 {
    font-size: 22px !important;
  }
}


/* Kleurverschil tussen het ouders-deel en werkwijze-deel */
.parents-part,
.method-part {
  border-radius: 34px;
  padding: 34px;
  margin: 0 auto 28px auto;
}

.parents-part {
  background: #FFF7E8;
  border: 1px solid rgba(232, 185, 87, 0.28);
}

.method-part {
  background: #EAF4EE;
  border: 1px solid rgba(79, 143, 123, 0.22);
}

.parents-part p,
.method-part p {
  text-align: left !important;
}

@media (max-width: 620px) {
  .parents-part,
  .method-part {
    padding: 24px;
    border-radius: 26px;
  }
}


/* Juridische informatie onderaan contactpagina */
.legal-contact {
  background: #ffffff;
  padding-top: 56px;
}

.legal-panel {
  background: linear-gradient(180deg, #FFF7E8 0%, #ffffff 100%);
  border: 1px solid rgba(79, 143, 123, 0.16);
  border-radius: 38px;
  padding: 42px;
  box-shadow: 0 18px 50px rgba(36,55,53,.08);
}

.legal-intro {
  max-width: 820px;
  margin: 0 auto 28px auto;
  text-align: center;
  color: #61756E;
  font-size: 18px;
}

.legal-accordion {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.legal-item {
  background: #ffffff;
  border: 1px solid rgba(79, 143, 123, 0.18);
  border-radius: 26px;
  box-shadow: 0 12px 32px rgba(36,55,53,.06);
  overflow: hidden;
}

.legal-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 28px;
  color: #243735;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.legal-item summary::-webkit-details-marker {
  display: none;
}

.legal-item summary::after {
  content: '+';
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #EAF4EE;
  color: #4F8F7B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}

.legal-item[open] summary::after {
  content: '−';
}

.legal-item-content {
  border-top: 1px solid rgba(79, 143, 123, 0.14);
  padding: 0 28px 26px 28px;
}

.legal-item-content p {
  color: #61756E;
  margin: 18px 0 0 0;
}

.legal-item-content a {
  color: #4F8F7B;
  font-weight: 900;
}

@media (max-width: 620px) {
  .legal-panel {
    padding: 26px;
    border-radius: 30px;
  }

  .legal-item summary {
    padding: 20px 22px;
    font-size: 20px;
  }

  .legal-item-content {
    padding: 0 22px 22px 22px;
  }
}