@charset "UTF-8";
/* CSS Document */
  :root{
    /* Primair (blijft VA-paars), warmer accent en zachte achtergronden */
    --brand:   #7b2db4;   /* paars */
    --brand-2: #c44b89;   /* framboos-rose (warmer dan fuchsia) */
    --accent-warm: #ff8a5b;    /* perzik/oranje accent */
    --warm-cream: #fff7f0;     /* zachte achtergrond */
    --warm-cream-2: #fff0e6;   /* iets dieper */
    --ink: #3e2c2a;            /* warme tekstkleur */
    --muted: #6d5a55;          /* warme grijsbruin voor secundaire tekst */
  }

  /* Basiskleuren & typografie */
  body{ color:var(--ink); background: linear-gradient(#fffdfb, #fff8f1); }
  .text-secondary{ color: var(--muted) !important; }

 .btn-brand{
    --bs-btn-color:#fff;
    --bs-btn-bg:var(--brand);
    --bs-btn-border-color:var(--brand);

    --bs-btn-hover-bg:#69269a;
    --bs-btn-hover-border-color:#69269a;
    --bs-btn-hover-color:#fff;   /* deze maakt de tekst wit op hover */

    --bs-btn-focus-shadow-rgb:123,45,180;
}
  .link-brand{ color: var(--brand); }
  .link-brand:hover{ color:#69269a; }

  .rounded-4{ border-radius:1rem!important; }
  .rounded-5{ border-radius:1.5rem!important; }
  .shadow-soft{ box-shadow: 0 12px 34px rgba(64,32,16,.07); }

  /* Warmer hero-achtergrond */
  .bg-hero{
    background:
      radial-gradient(60rem 60rem at 10% -10%, rgba(255,138,91,.12), transparent 60%),
      radial-gradient(50rem 50rem at 120% 10%, rgba(196,75,137,.10), transparent 50%),
      linear-gradient(var(--warm-cream), #faf4ff);
  }

  /* Badges iets warmer */
  .badge-pill{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.4rem .75rem; border-radius:999px; background:white;
    border:1px solid rgba(180,110,80,.15); font-size:.8rem;
  }

  /* Dienstencards */
  .service-card{
    transition:transform .2s ease, box-shadow .2s ease, background .3s ease;
    background: linear-gradient(180deg, #ffffff, #fffaf6);
    border-color: rgba(180,110,80,.18)!important;
  }
  .service-card:hover{ transform:translateY(-4px); box-shadow:0 16px 42px rgba(64,32,16,.09); }

  /* CTA band nu met warme overgang */
  .bg-cta{
    background-image: linear-gradient(90deg, var(--brand), var(--accent-warm));
  }

  /* Transparante navbar met warme tint */
  .navbar-blur{
    backdrop-filter: saturate(160%) blur(6px);
    background: rgba(255,250,246,.82);
    border-bottom: 1px solid rgba(184,120,94,.25);
  }
	
	/* Navbar 20px hoger maken */
.navbar {
  min-height: 100px; /* standaard ~72px + 20px extra */
}
.navbar .nav-link,
.navbar .btn {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
	/* Knop in navigatiemenu zonder padding */
.navbar-nav .btn {
  padding:10px!important;
  line-height: 1; /* zorgt dat tekst niet te veel hoogte inneemt */
}
	/* Fix: logo blijft op z'n plek bij openklappen menu */
.navbar .container {
  align-items: center;
}

.navbar {
  min-height: 100px; /* vaste hoogte, evt. aanpassen */
}

.navbar-brand img {
  display: block;
}



  /* Utilities */
  .icon-pill{
    width: 3rem; height:3rem; display:grid; place-items:center;
    background: rgba(255,138,91,.12);
    color: var(--brand); border-radius: .9rem; font-size:1.25rem;
  }

  /* Warme kaarten (vervang bg-white waar gewenst) */
  .warm-card{
    background: linear-gradient(180deg, #fffdfb, var(--warm-cream));
  }
  .warm-card.border{ border-color: rgba(184,120,94,.22)!important; }

  /* Kleine fix voor anker scroll onder sticky navbar */
  :target::before{ content:""; display:block; height:72px; margin-top:-72px; visibility:hidden; }

/* Subpage hero */
.bg-subhero {
  background:
    radial-gradient(40rem 40rem at 0% -20%, rgba(196,75,137,.08), transparent 60%),
    linear-gradient(180deg, #fff8f3, #fff2eb);
  padding: 5rem 0 4rem;
  text-align: center;
  border-bottom: 1px solid rgba(184,120,94,.2);
}

.bg-subhero h1 {
  color: var(--brand);
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: .75rem;
}

.bg-subhero p {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 650px;
  margin: 0 auto;
}
h2 {
    color: #a8408e;
    font-size: 140%;
}
h3 {
    color: #a8408e;
    font-size: 120%;
}
p {
    margin-bottom: 2rem;
}
a {
    color: #a8408e;
}
a:hover {
    color: #a8408e;
	text-decoration: none;
}
body {
}
.vlak-bg {
    background-color: #f3e5d3;
}

	
	/* Navigatie beter passend maken op iPad */
@media (min-width: 768px) and (max-width: 1024px) {
  .navbar-nav {
    gap: .5rem; /* minder ruimte tussen items */
  }
  .navbar-nav .nav-link {
    font-size: 0.95rem; /* iets kleiner */
    white-space: nowrap; /* voorkomt afbreken */
  }
  .navbar-nav .btn {
    font-size: 0.95rem;
    padding: .4rem 1rem;
    white-space: nowrap;
  }
}
	/* Logo verkleinen rond iPad Pro breedtes */
@media (max-width: 1200px) {
  .navbar-brand img {
    height: 35px; /* was 50px */
  }
}
	/* Minder ruimte tussen menu-items in hamburgermenu */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link {
    padding-top: .4rem;
    padding-bottom: .4rem;
  }
  .navbar-nav {
    gap: 0; /* haalt extra ruimte tussen items weg */
  }
	 .navbar { position: sticky; top: 0; }
  .navbar .container { position: relative; align-items: center; }

  /* Haal het ingeklapte menu uit de document-flow:
     - verschijnt als overlay direct onder de navbar
     - beïnvloedt de hoogte van de header niet (dus geen 'jump')
  */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: rgba(255,250,246,.98); /* matcht jouw .navbar-blur */
    border-bottom: 1px solid rgba(184,120,94,.25);
    box-shadow: 0 10px 24px rgba(64,32,16,.08);

    padding: .5rem 1rem;
    z-index: 1000;

    /* nette fade/slide zonder layout shift */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .navbar-collapse.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  /* Houd de header-rij stabiel in hoogte */
  .navbar {
    min-height: 72px;           /* evt. 56–72px naar smaak */
    padding-top: .25rem;
    padding-bottom: .25rem;
  }

  /* Stabiliseer het logo (geen baseline-shift) */
  .navbar-brand img {
    height: 40px;               /* ruimtewinst; pas aan indien gewenst */
    display: block;
  }

  /* Zorg dat de toggler boven het overlay-menu klikbaar blijft */
  .navbar-toggler { z-index: 1001; }

  /* Compactere items in het overlay-menu (optioneel) */
  .navbar-nav .nav-link { padding: .5rem 0; }
  .navbar-nav { gap: 0; }
  .navbar-nav .btn { padding: 10px !important; line-height: 1; }
}
  /* Overlay-menu: smooth fade + slide */
  .navbar-collapse {
    will-change: opacity, transform;
    transition: opacity .22s ease, transform .22s ease;
  }
  .navbar-collapse.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered nav-items voor extra finesse */
  .navbar-collapse.show .nav-item {
    opacity: 0;
    animation: navItemIn .22s ease forwards;
  }
  .navbar-collapse.show .nav-item:nth-child(1) { animation-delay: .04s; }
  .navbar-collapse.show .nav-item:nth-child(2) { animation-delay: .08s; }
  .navbar-collapse.show .nav-item:nth-child(3) { animation-delay: .12s; }
  .navbar-collapse.show .nav-item:nth-child(4) { animation-delay: .16s; }
  .navbar-collapse.show .nav-item:nth-child(5) { animation-delay: .20s; }
  .navbar-collapse.show .nav-item:nth-child(6) { animation-delay: .24s; }
  .navbar-collapse.show .nav-item:nth-child(7) { animation-delay: .28s; }

  @keyframes navItemIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Hamburger: subtiele draai bij openen */
  .navbar-toggler {
    transition: transform .18s ease;
  }
  .navbar-toggler[aria-expanded="true"] {
    transform: rotate(90deg);
  }
ul.checklist {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}

ul.checklist li {
  position: relative;
  padding-left: 28px; /* ruimte voor het icoon */
  margin: 6px 0;
}

ul.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-image: url("../images/check.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
ul:not(nav ul) {
  margin-bottom: 30px;
}

/* HERO met ringen */
.dienst-hero {
  position: relative;
  overflow: hidden;                 /* geen scrollbars door negatieve offsets */
  padding: 56px 0;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  background: linear-gradient(135deg, #F3ECFA, #FDEBEF);
}

.dienst-hero .hero-inner {
    position: relative;
    z-index: 2;                       /* altijd boven de ringen */
    /* [disabled]max-width: 1100px; */
    margin: 0 auto;
    padding: 0 24px;
}

.dienst-hero h1 {
    color: #6d398c;
    margin: 0 0 8px;
}
.dienst-hero p  { color: #4C2D85; opacity: .85; margin: 0 0 16px; }

/* ringenlaag */
.rings-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;                       /* achter de tekst */
  pointer-events: none;
}

.hero .hero-inner,
.dienst-hero .hero-inner {
  position: relative;
  z-index: 2;
}

/* generieke ring met variabelen */
.ring {
  --size: 360px;                    /* diameter */
  --stroke: 18px;                   /* lijndikte */
  --color: rgba(234,220,251,.95);   /* lila */

  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 9999px;
  box-shadow: inset 0 0 0 var(--stroke) var(--color);
  opacity: .85;
  will-change: transform;
  animation: ring-float 10s ease-in-out infinite;
}

/* posities + individuele kleuren */
.r1 {
  --size: 520px; --stroke: 22px; --color: rgba(220,198,246,.95); /* #DCC6F6 */
  top: -160px; right: -140px;
}
.r2 {
  --size: 260px; --stroke: 18px; --color: rgba(243,227,203,.95); /* #F3E3CB */
  top: 24px; left: 32%;
  animation-delay: .8s;
}
.r3 {
  --size: 180px;
  --stroke: 14px;
 --color: rgba(250,211,220,.95); /* #FAD3DC */

  bottom: -60px; left: 12%;
  animation-delay: 1.6s;
}

/* optioneel: extra ring linksboven */
.r4 {
  --size: 420px; --stroke: 16px;   --color: rgba(224,230,250,.95); /* #E0E6FA */
  top: -60px; left: -140px;
  animation-delay: 2.3s;
}


.hero {
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}
.btn-outline-secondary {
    --bs-btn-color: #7b2db4;
    --bs-btn-border-color: #7b2db4;
     --bs-btn-hover-color: #7b2db4;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}




@keyframes ring-float {
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-10px) }
  100% { transform: translateY(0) }
}

/* mobiel bijsturen */
@media (max-width: 768px) {
  .dienst-hero { padding: 40px 0; }
  .r1 { --size: 380px; right: -180px; top: -180px; }
  .r2 { --size: 200px; --stroke: 14px; left: 24%; top: 20px; }
  .r3 { --size: 140px; --stroke: 12px; left: 6%; bottom: -50px; }
  .r4 { --size: 280px; --stroke: 12px; left: -160px; top: -80px; }
}



/* Respecteer 'reduced motion' voorkeuren */
@media (prefers-reduced-motion: reduce) {
  .navbar-collapse,
  .navbar-toggler,
  .navbar-collapse.show .nav-item {
    transition: none !important;
    animation: none !important;
	}}

/* kleine schermen */
@media (max-width: 768px) {
  .dienst-hero { padding: 40px 0; }
  .c1 { width: 160px; height: 160px; top: -30px; right: -20px; }
  .c2 { width: 120px; height: 120px; right: 12%; }
  .c3 { width: 200px; height: 200px; left: -40px; }
  .c4 { width: 90px; height: 90px; left: 30%; }
}