/*
Theme Name: Raidho
Author: Raidho Coaching Solutions
Version: 1.0
*/

/* Basic fixes */
html, body { height: 100%; }
body { overflow-x: hidden; }
section { position: relative; }

/* Overlay */
.mbr-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Content boven overlay */
.header5 > *:not(.mbr-overlay),
.header09 > *:not(.mbr-overlay),
#wie-zijn-wij > *:not(.mbr-overlay),
#diensten > *:not(.mbr-overlay) {
  position: relative;
  z-index: 2;
}

/* Maak inner backgrounds transparant (cards/rows mogen niet wit zijn) */
#wie-zijn-wij .container,
#wie-zijn-wij .row,
#diensten .container,
#diensten .row,
#diensten .item-wrapper,
#diensten .item-content,
#diensten .item-img,
#diensten .content-wrap,
#diensten .card,
#diensten .mbr-section-head,
#diensten .item {
  background-color: transparent !important;
  background-image: none !important;
}

/* 1 parallax achtergrond voor blok 1-4 */
#home-parallax.raidho-parallax-wrap {
  position: relative;
  overflow: hidden;
}

/* content boven de jarallax-laag */
#home-parallax .raidho-parallax-inner {
  position: relative;
  z-index: 2;
}

/* blokken binnen wrapper hebben geen eigen background */
#home-parallax .header5,
#home-parallax .header09,
#home-parallax #wie-zijn-wij,
#home-parallax #diensten {
  background: transparent !important;
}
/* Leesbaarheid op parallax-blokken */
#home-parallax h1,
#home-parallax h2,
#home-parallax h3,
#home-parallax h4,
#home-parallax h5,
#home-parallax p,
#home-parallax a,
#home-parallax li {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

/* Zorg dat knoppen tekst ook wit blijft (als theme het overschrijft) */
#home-parallax .btn {
  text-shadow: none;
}
/* Banner hoofdtekst (blok 1) donkerpaars i.p.v. wit */
#header05-1 h1 {
  color: #4a3b57 !important;
  text-shadow: none;
}
/* Bovenste header / navbar donkerpaars */
.menu.menu2,
.menu.menu2 .navbar,
.menu.menu2 .container,
.menu.menu2 .container-fluid {
  background-color: #4a3b57 !important;
}

/* Logo / navigatie tekst wit */
.menu.menu2 a,
.menu.menu2 .navbar-brand,
.menu.menu2 .nav-link {
  color: #ffffff !important;
}

/* Knop "Kosten" netjes laten contrasteren */
.menu.menu2 .btn {
  background-color: #2f203b;   /* iets donkerder paars */
  border-color: #2f203b;
  color: #ffffff;
}

/* Hover effect knop */
.menu.menu2 .btn:hover {
  background-color: #24172f;
  border-color: #24172f;
}
/* Frontpage hero-tekst dezelfde kleur als header */
#header05-1 h1,
#header05-1 p {
  color: #4a3b57 !important;
  text-shadow: none;
}
/* =========================================
   Frontpage tekstkleur – definitieve set
   Blok 1 t/m 4
========================================= */

/* TITELS: zwart */
#home-parallax h1,
#home-parallax h2 {
  color: #2f203b !important;
  text-shadow: none;
}

/* OVERIGE TEKST: paars */
#home-parallax h3,
#home-parallax h4,
#home-parallax h5,
#home-parallax h6,
#home-parallax p,
#home-parallax li,
#home-parallax a {
  color: #4a3b57 !important;
  text-shadow: none;
}
/* =========================================
   Typografie – rustiger voor neurodivergente lezers
========================================= */

/* TITELS: minder zwaar, meer adem */
#home-parallax h1 {
  font-weight: 600;          /* i.p.v. 700–800 */
  letter-spacing: 0.02em;
  line-height: 1.25;
}

#home-parallax h2 {
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.3;
}

#home-parallax h3 {
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

/* LOPENDE TEKST: rust en leesbaarheid */
#home-parallax p,
#home-parallax li {
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* Knoppen: duidelijk maar niet schreeuwerig */
#home-parallax .btn {
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Knoppen: tekst wit houden voor contrast */
#home-parallax .btn {
  color: #ffffff !important;
}
/* Diensten – beschrijvende tekst beter leesbaar */
#diensten p {
  font-size: 1.05rem;     /* iets groter dan standaard */
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.01em;
}
#diensten p {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
/* DIENSTEN: tekst onder kaarten centreren + beter leesbaar */
#diensten h5,
#diensten p {
  text-align: center !important;
}

#diensten h5 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #2f203b !important;      /* donkerder titel */
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
  text-shadow: 0 1px 6px rgba(255,255,255,0.25);
}

#diensten p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #4a3b57 !important;      /* jouw merkpaars */
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 8px rgba(255,255,255,0.22);
}
/* DIENSTEN – backplate onder kaarten (donkerder & rustiger) */
#diensten h5,
#diensten p {
  text-align: center;
  display: inline-block;
  border-radius: 0.75rem;
}

/* Titel backplate */
#diensten h5 {
  padding: 0.35rem 0.85rem;
  margin-bottom: 0.4rem;

  background-color: rgba(74, 59, 87, 0.78); /* #4a3b57 */
  color: #f5f2f7;                          /* zacht wit */
  font-weight: 600;
  font-size: 1.05rem;
}

/* Tekst backplate */
#diensten p {
  padding: 0.5rem 0.95rem;

  background-color: rgba(74, 59, 87, 0.68); /* iets lichter */
  color: #f1edf4;
  font-size: 1.05rem;
  line-height: 1.6;

  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
/* ===== DIENSTEN: backplates + leesbaarheid fix ===== */

/* Forceer dat alle content in Diensten boven overlay ligt */
#diensten { position: relative; }
#diensten > *:not(.mbr-overlay) { position: relative; z-index: 2; }
#diensten .mbr-overlay { z-index: 1; }

/* De "ballonnen" (titel + tekst) */
#diensten h5,
#diensten p {
  text-align: center !important;
  display: inline-block;
  border-radius: 0.75rem;
  margin-left: auto;
  margin-right: auto;
}

/* Backplate titel */
#diensten h5 {
  padding: 0.35rem 0.85rem;
  margin-bottom: 0.4rem;
  background: rgba(47, 32, 59, 0.78);   /* #2f203b donker paars */
  color: #ffffff !important;            /* <-- FIX: tekst wit */
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Backplate tekst */
#diensten p {
  padding: 0.5rem 0.95rem;
  background: rgba(47, 32, 59, 0.70);   /* iets lichter dan titel */
  color: rgba(255,255,255,0.92) !important; /* <-- FIX: tekst licht */
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 36ch;
}

/* Belangrijk: voorkom dat jouw globale link-kleur dit weer donker maakt */
#diensten a { color: rgba(255,255,255,0.95) !important; }
/* === Diensten: perfect centreren onder afbeeldingen === */

/* Centreer hele kaart-inhoud */
#diensten .col-lg-4 {
  text-align: center;
}

/* Zorg dat titel + tekst exact onder de afbeelding vallen */
#diensten h5,
#diensten p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Beperk breedte zodat het rustig blijft */
#diensten h5 {
  max-width: 22ch;
}

#diensten p {
  max-width: 34ch;
}
/* Prijzen pagina: zelfde typografie-kleuren als home */
#prijzen-parallax h1,
#prijzen-parallax h2,
#prijzen-parallax h3,
#prijzen-parallax h4 { color: #2f203b !important; }

#prijzen-parallax p,
#prijzen-parallax li { color: #4a3b57 !important; }

/* Zorg dat pricing cards niet fel-wit worden door Mobirise defaults */
#prijzen-parallax .item-wrapper,
#prijzen-parallax .item-head,
#prijzen-parallax .item-content {
  background: rgba(255,255,255,0.12) !important;
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: blur(2px);
}

/* Contact form inputs: rustig en consistent */
#prijzen-parallax .form-control {
  border-radius: 12px;
}

}
/* ================================
   FIX: overlays mogen NOOIT boven content liggen
   (ook op Prijzen pagina)
================================ */

/* Elke section met overlay: basis stacking context */
section { 
  position: relative; 
}

/* Overlay altijd achter content */
section .mbr-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Alle directe children (behalve overlay) altijd boven overlay */
section > *:not(.mbr-overlay){
  position: relative;
  z-index: 2;
}
/* =========================================
   PRIJZEN – layout fix (1 versie, geen conflict)
========================================= */

/* Cards gelijk hoog en netjes onder elkaar */
#pricing01-1l .item-wrapper{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Afbeeldingen exact gelijk formaat */
#pricing01-1l .item-img{
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
#pricing01-1l .item-img img{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius:18px;
  display:block;
}

/* Kop “ballon” overal exact dezelfde hoogte */
#pricing01-1l .item-head{
  min-height:170px;          /* key: gelijkmaken */
  display:flex;
  flex-direction:column;
  justify-content:center;    /* centreert de kopinhoud */
  text-align:center;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,0.18);
}

/* Beschrijving start overal gelijk + vult card */
#pricing01-1l .item-content{
  margin-top:16px;
  flex:1;
  border-radius:16px;
  background:rgba(255,255,255,0.14);
  padding:16px 18px;
}

/* Optioneel: titel/subtitel rustiger */
#pricing01-1l .item-title{ margin-bottom:6px; font-weight:600; }
#pricing01-1l .item-subtitle{ line-height:1.4; }

}

/* Algemeen rustiger tekstbeeld */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
}

p {
  font-weight: 400;
  line-height: 1.6;
}
/* PRIJZEN: kop-ballon in alle 3 kolommen exact gelijk */
#pricing01-1l .item-head{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* tekst altijd netjes midden */
  text-align: center;
  min-height: 160px;         /* 🔑 vaste hoogte voor alle kolommen */
  padding: 18px 20px;
}

/* Titels/subtitels mogen wrappen maar houden rust */
#pricing01-1l .item-title{
  line-height: 1.15;
  margin: 0 0 8px 0;
}

#pricing01-1l .item-subtitle{
  line-height: 1.25;
  margin: 0;
}
/* PRIJZEN: kop-ballon in alle 3 kolommen exact gelijk */
#pricing01-1l .item-head{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* tekst altijd netjes midden */
  text-align: center;
  min-height: 160px;         /* 🔑 vaste hoogte voor alle kolommen */
  padding: 18px 20px;
}

/* Titels/subtitels mogen wrappen maar houden rust */
#pricing01-1l .item-title{
  line-height: 1.15;
  margin: 0 0 8px 0;
}

#pricing01-1l .item-subtitle{
  line-height: 1.25;
  margin: 0;
}
/* Over ons – thema kaarten */
.raidho-topic-card{
  background: rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 24px;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.raidho-topic-card h4{
  font-weight: 600;
  margin-bottom: 12px;
}

.raidho-topic-card p{
  line-height: 1.6;
  margin-bottom: 20px;
}
.raidho-topic-card{
  background: rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.raidho-topic-card h4{ margin-bottom: 10px; font-weight: 600; }
.raidho-topic-card p{ margin-bottom: 18px; line-height: 1.6; }
/* ==============================
   RAIDHO – Mobile readability fix
   (voorkomt rare woordafbreking)
============================== */

/* 1) Nooit "break-all" op tekst (dit veroorzaakt woord-splitting) */
html, body,
p, li, a, span, div,
h1, h2, h3, h4, h5, h6 {
  word-break: normal;
  overflow-wrap: anywhere;   /* vangt lange strings netjes op */
  word-wrap: break-word;     /* fallback */
  hyphens: auto;             /* nette afbreking waar nodig */
}

/* 2) Links/knoppen: geen lelijke afbreking, maar wel wrap als het moet */
a, .btn {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* 3) Voorkom horizontaal scrollen door te brede elementen */
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}
.container, .container-fluid {
  overflow-x: hidden;
}

/* 4) Rustigere typografie op mobiel (Mobirise display-classes zijn vaak te groot) */
@media (max-width: 768px) {
  .display-1 { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; line-height: 1.15 !important; }
  .display-2 { font-size: clamp(1.5rem, 5vw, 2.0rem) !important; line-height: 1.2 !important; }
  .display-5 { font-size: clamp(1.15rem, 4vw, 1.35rem) !important; line-height: 1.25 !important; }
  .display-7 { font-size: 1.05rem !important; line-height: 1.65 !important; }

  /* Kaarten/tekstvakken: minder krap */
  .raidho-topic-card { padding: 18px !important; }

  /* Knoppen: niet te breed/hoog, beter tappable */
  .btn { padding: 12px 16px !important; border-radius: 14px !important; }
}

/* 5) Als ergens alsnog "break-all" staat, overschrijf het hard */
* {
  word-break: normal !important;
}
/* =========================================
   MOBIEL FIX: geen rare woordafbrekingen
   (Mobirise/Bootstrap zetten soms hyphens/word-break aan)
========================================= */

/* Basis: NOOIT automatisch afbreken met streepjes */
html, body{
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Tekstblokken: normale woordafbreking, geen "overw-helm" etc. */
p, li, h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-4, .display-5, .display-7,
.mbr-section-title, .mbr-text, .nav-link{
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Alleen voor echt lange dingen (urls/mail/adresjes): dan mag ie wél breken */
a, .btn, .navbar-brand, .navbar-logo, .form-control, input, textarea{
  overflow-wrap: break-word; /* netjes breken zonder rare hyphenation */
  word-break: normal;
}

/* Mobiel typografie rustiger + beter leesbaar */
@media (max-width: 768px){
  .display-1{
    font-size: 2.0rem !important;
    line-height: 1.15 !important;
  }
  .display-2{
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }
  .display-7, p{
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }

  /* Optioneel maar vaak mooier op mobiel: lopende tekst niet centreren */
  .mbr-text, .display-7{
    text-align: left !important;
  }
}
/* Over ons – laatste rij (2 kolommen) netjes centreren */
@media (min-width: 992px) {
  #overons-themas .row {
    justify-content: center;
  }

  /* Beperk maximale breedte zodat het onder de 3 kolommen valt */
  #overons-themas .col-lg-4 {
    max-width: 360px;
  }
}
/* Over ons – eerste blok centreren */
#overons-main {
  text-align: center;
}

#overons-main h2,
#overons-main p {
  margin-left: auto;
  margin-right: auto;
}
/* Over ons – extra ademruimte tussen secties */
#overons-main {
  margin-bottom: 30px;
}
/* Divider: nooit wit, subtiel paars */
.raidho-section-divider{
  width: 100%;
  height: 2px;
  max-width: 680px;
  margin: 0 auto 80px auto;
  background: rgba(74,59,87,0.22); /* #4a3b57 maar zacht */
  border-radius: 99px;
}

}
/* Zachte overgang tussen Over ons en Waar we mee werken */
#overons-main {
  padding-bottom: 120px;
}

/* Zorg dat volgende sectie optisch doorloopt */
#overons-themas {
  margin-top: -40px;
}
/* Zachte divider tussen secties – nooit wit */
#overons-main + #overons-themas::before {
  content: "";
  display: block;
  height: 60px; /* ademruimte */
  background: linear-gradient(
    to bottom,
    rgba(145,129,155,0.9),
    rgba(135,118,145,0.85)
  );
}
/* Veiligheidsnet: nooit wit tussen deze secties */
#overons-main,
#overons-themas {
  background-color: #91819b;
}
/* Over ons – kolommen tekst centreren */
#overons-themas .raidho-topic-card {
  text-align: center;
}
#overons-themas .raidho-topic-card p {
  line-height: 1.6;
}
/* Over ons – kolomkoppen gelijkwaardig aan paginakoppen */
#overons-themas .raidho-topic-card h4 {
  font-size: 1.35rem;       /* groter, maar niet schreeuwerig */
  font-weight: 600;
  margin-bottom: 12px;
  color: #2f203b;
}
/* Over ons – kolomtekst gelijk aan paginabody */
#overons-themas .raidho-topic-card p {
  font-size: 1rem;          /* gelijk aan display-7 */
  line-height: 1.6;
  color: #4a3b57;
  margin: 0;
}
/* Over ons – kolommen iets meer aanwezigheid */
#overons-themas .raidho-topic-card {
  padding: 28px;
}
/* Over ons – CTA knop rustiger en kleiner */
#overons-themas .mbr-section-btn .btn {
  font-size: 0.95rem;        /* kleiner dan standaard */
  padding: 10px 22px;        /* minder “bulk” */
  border-radius: 999px;      /* zacht, niet blokkerig */
  font-weight: 500;
}
/* Raidho logo modal (rustig) */
.raidho-logo-trigger{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  line-height:0;
}

.raidho-logo-modal{
  position:fixed;
  inset:0;
  background: rgba(47, 32, 59, 0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding: 18px;
}

.raidho-logo-modal-inner{
  width: min(720px, 96vw);
  max-height: 86vh;
  overflow:auto;
  background: rgba(145, 129, 155, 0.98);
  border-radius: 22px;
  padding: 28px 24px;
  position:relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  color: #2f203b;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.raidho-logo-large{
  width: 220px;
  max-width: 70%;
  display:block;
  margin: 6px auto 18px auto;
  border-radius: 18px;
}

.raidho-logo-title{
  text-align:center;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.raidho-logo-lead{
  text-align:center;
  max-width: 56ch;
  margin: 0 auto 18px auto;
  line-height: 1.6;
  opacity: 0.95;
}

.raidho-story-block{
  background: rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 12px 0;
}

.raidho-story-block h4{
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.raidho-story-block p{
  margin: 0;
  line-height: 1.65;
  font-size: 0.98rem;
}

.raidho-story-act{
  background: rgba(255,255,255,0.18);
}

.raidho-story-actions{
  display:flex;
  justify-content:center;
  margin-top: 16px;
}

.raidho-story-actions .btn{
  padding: 10px 18px;
  border-radius: 14px;
}

.raidho-logo-close{
  position:absolute;
  top: 10px;
  right: 14px;
  background:none;
  border:none;
  font-size: 1.8rem;
  cursor:pointer;
  color: #2f203b;
  opacity: 0.85;
}

.raidho-logo-close:hover{ opacity: 1; }

@media (max-width: 480px){
  .raidho-logo-modal-inner{ padding: 20px 16px; }
  .raidho-logo-large{ width: 190px; }
  .raidho-story-block p{ font-size: 0.96rem; }
}
/* =========================================
   UNIFORME BUTTONS (globaal, alle pagina’s)
   Kleur + afronding + typografie consistent
========================================= */

:root{
  --raidho-btn-bg: #4a3b57;       /* hoofdkleur */
  --raidho-btn-bg-hover: #3c3048; /* hover */
  --raidho-btn-text: #ffffff;
  --raidho-btn-radius: 14px;
  --raidho-btn-padding-y: 12px;
  --raidho-btn-padding-x: 18px;
}

/* Alle “knop” varianten aanpakken (Bootstrap + Mobirise + Fluent) */
a.btn,
button.btn,
input[type="submit"],
.raidho-logo-story .btn,
.fluentform .ff-btn,
.fluentform button,
.fluentform input[type="submit"]{
  background-color: var(--raidho-btn-bg) !important;
  border-color: var(--raidho-btn-bg) !important;
  color: var(--raidho-btn-text) !important;

  border-radius: var(--raidho-btn-radius) !important;
  padding: var(--raidho-btn-padding-y) var(--raidho-btn-padding-x) !important;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  line-height: 1.2;
  text-decoration: none !important;

  box-shadow: none !important;
  transition: transform .08s ease, background-color .12s ease, border-color .12s ease;
}

/* Hover/focus */
a.btn:hover,
button.btn:hover,
input[type="submit"]:hover,
.fluentform .ff-btn:hover,
.fluentform button:hover{
  background-color: var(--raidho-btn-bg-hover) !important;
  border-color: var(--raidho-btn-bg-hover) !important;
  transform: translateY(-1px);
}

a.btn:focus,
button.btn:focus,
input[type="submit"]:focus,
.fluentform .ff-btn:focus,
.fluentform button:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74, 59, 87, 0.25) !important;
}

/* Als Mobirise/Bootstrap “btn-warning” gebruikt wordt (zoals Kosten) -> ook uniform */
.btn-warning,
.btn-primary{
  background-color: var(--raidho-btn-bg) !important;
  border-color: var(--raidho-btn-bg) !important;
  color: var(--raidho-btn-text) !important;
}
/* =========================================
   BANNER DONKERDER MAKEN (globaal)
   Zodat knoppen eruit springen
========================================= */

/* Menu / banner achtergrond */
.menu.menu2,
.navbar,
#menu02-0,
#menu02-prijzen,
#menu02-overons {
  background-color: #3a2f45 !important; /* donkerder dan knop */
}

/* Tekst in banner/menu iets lichter */
.menu.menu2 a,
.menu.menu2 .nav-link,
.menu.menu2 .navbar-brand {
  color: #f3eef7 !important;
}
/* =========================================
   LOGO HOVER – subtiel oplichten
========================================= */

.navbar-logo img {
  transition: filter 0.25s ease, transform 0.25s ease;
}

/* Hover + focus (toetsenbordvriendelijk) */
.navbar-logo a:hover img,
.navbar-logo a:focus img {
  filter: brightness(1.12) contrast(1.05)
          drop-shadow(0 0 6px rgba(255,255,255,0.25));
  transform: scale(1.03);
}
.navbar-logo a:hover img {
  filter: brightness(1.15) contrast(1.06)
          drop-shadow(0 0 8px rgba(122, 98, 150, 0.35));
}
/* =========================================
   MOBIEL: banner/navbar compacter
========================================= */
@media (max-width: 768px){

  /* Minder verticale ruimte in de banner */
  .menu.menu2,
  .menu.menu2 .navbar{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 56px;
  }

  /* Container iets strakker */
  .menu.menu2 .container,
  .menu.menu2 .container-fluid{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Logo iets kleiner */
  .menu.menu2 .navbar-logo img{
    height: 2.2rem !important; /* was 3rem */
    width: auto;
  }

  /* Toggler (hamburger) iets kleiner/strakker */
  .menu.menu2 .navbar-toggler{
    padding: 6px 8px !important;
    border: 0 !important;
  }

  /* Knoppen in banner compacter */
  .menu.menu2 .navbar-buttons .btn{
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    line-height: 1.1;
  }

  /* Menu-items compacter */
  .menu.menu2 .navbar-nav .nav-link{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
/* ==============================
   MOBIEL: compacte banner
   ============================== */
@media (max-width: 768px) {

  /* Navbar altijd één rij */
  .menu .navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  /* Logo links houden */
  .navbar-brand {
    flex: 0 0 auto;
  }

  /* Knoppen rechts naast elkaar */
  .menu .d-flex.align-items-center {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* Knoppen compacter op mobiel */
  .menu .btn {
    padding: 6px 10px;
    font-size: 0.9rem;
    line-height: 1.2;
  }

  /* Banner minder hoog */
  .menu {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
/* Prijzen – discreet voetnootblok */
#header09-q {
  padding: 40px 20px;            /* veel minder hoogte */
}

#header09-q h1 {
  font-size: 1.6rem;             /* kleiner dan andere headers */
  line-height: 1.3;
  margin-bottom: 12px;
  text-align: center;
}

#header09-q p {
  font-size: 0.95rem;            /* voetnoot-achtig */
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
  opacity: 0.85;                 /* minder nadruk */
  text-align: center;
}

/* Overlay iets lichter zodat het niet schreeuwt */
#header09-q .mbr-overlay {
  opacity: 0.65 !important;
}
/* Prijzen – betaalbaarheid: bewust laag profiel */
#header09-q {
  padding: 28px 16px !important;   /* veel compacter */
  margin-top: 20px;
  margin-bottom: 40px;
}

/* Zet het blok expliciet NIET als hero */
#header09-q .container {
  max-width: 760px;
}
#header09-q h1,
#header09-q h2,
#header09-q h3 {
  font-size: 1.2rem !important;   /* bewust klein */
  font-weight: 500;
  margin-bottom: 8px;
  text-align: left;               /* menselijker, minder hero */
}
#header09-q p {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.75;                  /* visueel terug */
  margin: 0;
}
#header09-q .mbr-overlay {
  opacity: 0.45 !important;       /* veel lichter */
  background-color: #91819b;
}
/* Prijzen – "niet kunnen betalen" als voetnoot */
#header09-q .display-6{
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

#header09-q .raidho-note{
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  opacity: 0.80 !important;
  margin: 0 !important;
}
/* Prijzen – koptekst "Wat als ik dit niet kan betalen?" centreren */
#header09-q h3 {
  text-align: center;
}
#header09-q {
  text-align: center;
}
body { outline: 5px solid lime !important; }
/* Prijzen: "Wat als ik dit niet kan betalen?" subtiel, als voetnoot */
#header09-q .container{
  max-width: 900px;
}

#header09-q h3{
  text-align: center !important;
  font-size: 1.15rem !important;
  line-height: 1.25 !important;
  margin: 0 0 8px 0 !important;
  font-weight: 600 !important;
  opacity: .9;
}

#header09-q p{
  text-align: center !important;
  font-size: .95rem !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: 820px;
  opacity: .9;
}
/* =========================================================
   PRIJZEN pagina (page-id-90 / page-template-page-prijzen)
   Force styling + parallax wrapper correct
========================================================= */

/* Zorg dat de parallax wrapper zich als "page background" gedraagt */
.page-id-90 #prijzen-parallax.raidho-parallax-wrap {
  position: relative;
  z-index: 0;
}

/* Zorg dat ALLE content boven de jarallax background blijft */
.page-id-90 #prijzen-parallax .raidho-parallax-inner,
.page-id-90 #prijzen-parallax > .raidho-parallax-inner > section,
.page-id-90 #prijzen-parallax section {
  position: relative;
  z-index: 1;
}

/* Als je eerder een "card/box" styling had voor pricing items: forceer het hier */
.page-id-90 #pricing01-1l .item-wrapper {
  height: 100%;
}

/* Afbeeldingen in prijsblokken consistent */
.page-id-90 .raidho-prijs-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlays consistent (je gebruikt inline opacity + bg al, maar dit voorkomt rare blend issues) */
.page-id-90 #pricing01-1l .mbr-overlay,
.page-id-90 #header09-q .mbr-overlay,
.page-id-90 #form03-1m .mbr-overlay {
  pointer-events: none;
}

/* Fluent Forms binnen jouw design (als je eerdere styling niet pakt door specificity) */
.page-id-90 .fluentform .ff-el-form-control,
.page-id-90 .fluentform textarea.ff-el-form-control {
  width: 100%;
  max-width: 100%;
}
.page-id-90 #prijzen-parallax { position: relative; z-index: 0; }
.page-id-90 #prijzen-parallax .raidho-parallax-inner,
.page-id-90 #prijzen-parallax section { position: relative; z-index: 1; }
}
/* =========================================================
   PRIJZEN – Informatieblok onder prijzen (#header09-q)
   Rustiger, kleiner, minder aandacht
========================================================= */

.page-id-90 #header09-q h3 {
  font-size: 1.15rem;        /* was display-7 → te groot */
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.page-id-90 #header09-q p {
  font-size: 0.95rem;        /* kleiner maar goed leesbaar */
  line-height: 1.55;
  max-width: 52ch;           /* voorkomt brede, schreeuwerige tekst */
  opacity: 0.8;
  margin-bottom: 0;
}

/* Extra rust: iets minder padding boven/onder */
.page-id-90 #header09-q .container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* =========================================================
   PRIJZEN – Info blok centreren en versmallen (#header09-q)
========================================================= */

.page-id-90 #header09-q .container {
  max-width: 640px;        /* maakt het blok zelf smaller */
  margin-left: auto;
  margin-right: auto;
  text-align: center;     /* centreert titel + tekst */
}

/* Titel iets rustiger in gecentreerde context */
.page-id-90 #header09-q h3 {
  margin-left: auto;
  margin-right: auto;
}

/* Tekst mooi gecentreerd en compact */
.page-id-90 #header09-q p {
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   PRIJZEN – Header09 tekstblok exact laten passen
========================================================= */

.page-id-90 #header09-q .container {
  max-width: 56ch;          /* past strak bij lopende tekst */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;   /* ademruimte links/rechts */
  padding-right: 1.25rem;
  text-align: center;
}
.page-id-90 #header09-q h3 {
  max-width: 100%;
}

.page-id-90 #header09-q p {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   PRIJZEN – Verticale spacing finetuning
   Rustig, doorlopend, geen lege gaten
========================================================= */

/* 1. Prijzen → infoblok: minder witruimte onder prijzen */
.page-id-90 #pricing01-1l {
  padding-bottom: 3rem;
}

/* 2. Infoblok zelf: compact maar ademend */
.page-id-90 #header09-q {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

/* 3. Infoblok → contact: zachte overgang, geen gat */
.page-id-90 #form03-1m {
  padding-top: 3rem;
}

/* 4. Algemene correctie: voorkom dubbele margins in Mobirise blocks */
.page-id-90 #pricing01-1l .container,
.page-id-90 #header09-q .container,
.page-id-90 #form03-1m .container {
  margin-bottom: 0;
}
.page-id-90 #header09-q + section {
  margin-top: 0;
}
.modal-content {
  border-radius: 18px;
  padding: 10px 20px;
}

.modal-title {
  font-weight: 600;
  letter-spacing: 1px;
}

.privacy-link {
  text-decoration: underline;
  cursor: pointer;
}