/* =====================================================================
   DE BADKAMERSPECIALISTEN - eigen laag bovenop de zilver-1 template
   1. logo (rond beeldmerk, origineel bestand)
   2. de branche-draai: "Van sloop tot oplevering", zes fasen
   ===================================================================== */

/* 1. LOGO: het originele ronde logo, overal hetzelfde bestand */
.nav-logo img{height:76px !important;width:auto !important}
.nav-logo .logo-favicon{height:52px !important}
.footer-logo img{height:120px !important;width:auto}
.mmx-head .mmx-logo img{height:56px !important}
@media (max-width:768px){
  .nav-logo img{height:54px !important}
}

/* derde logokleur (zacht lila-blauw uit de tegelwand) subtiel in details */
:root{ --dbs-lila:#B3B7DD; --dbs-navy:#0E4585; --dbs-blauw:#1786D5; }

/* 2. DE DRAAI */
.dbs-traject{padding:var(--section-y,76px) 0;background:linear-gradient(180deg,#fff 0%,#EFF4F9 100%)}
.dbs-kop{text-align:center;max-width:720px;margin:0 auto 38px}
.dbs-kop h2{margin:14px 0 12px;color:var(--heading-brand,var(--dbs-navy))}
.dbs-kop p{margin:0 auto;color:var(--text-soft);font-size:17px;line-height:1.65}

.dbs-balk{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:1040px;margin:0 auto 30px}
.dbs-lijn{position:absolute;left:8.33%;right:8.33%;top:23px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--dbs-lila) 55%,#fff);z-index:0}
.dbs-lijn-vul{display:block;height:100%;width:0;border-radius:4px;background:var(--dbs-blauw);transition:width .85s cubic-bezier(.22,.61,.36,1)}
.dbs-fase{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--text-soft);min-width:0}
.dbs-fase-nr{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--dbs-lila);color:var(--dbs-navy);font-family:var(--font-heading);font-weight:800;font-size:15px;transition:background .45s cubic-bezier(.22,.61,.36,1),border-color .45s cubic-bezier(.22,.61,.36,1),color .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1)}
.dbs-fase-naam{font-family:var(--font-heading);font-weight:700;font-size:14.5px;text-align:center;line-height:1.25;color:var(--dbs-navy)}
.dbs-fase.is-klaar .dbs-fase-nr{background:var(--dbs-blauw);border-color:var(--dbs-blauw);color:#fff}
.dbs-fase.is-actief .dbs-fase-nr{background:var(--dbs-navy);border-color:var(--dbs-navy);color:#fff;transform:scale(1.12)}
.dbs-fase:hover .dbs-fase-nr{border-color:var(--dbs-blauw)}
.dbs-fase:focus-visible{outline:2px solid var(--dbs-blauw);outline-offset:6px;border-radius:12px}

.dbs-paneel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;max-width:1040px;margin:0 auto;background:#fff;border-radius:24px;overflow:hidden;border:1px solid color-mix(in srgb,var(--dbs-lila) 45%,#fff);box-shadow:0 24px 50px -28px rgba(14,69,133,.35)}
.dbs-beeld{margin:0;min-height:320px;position:relative}
.dbs-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dbs-tekst{display:grid;align-items:center;padding:38px 36px;min-width:0}
.dbs-inhoud{grid-area:1/1;text-align:center;opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.22,.61,.36,1),visibility 0s linear .45s}
.dbs-inhoud.is-actief{opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
.dbs-stap{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dbs-blauw);margin-bottom:10px}
.dbs-inhoud h3{font-size:clamp(24px,2.4vw,30px);margin:0 0 12px;color:var(--heading-brand,var(--dbs-navy))}
.dbs-inhoud p{margin:0 auto 20px;color:var(--text-soft);font-size:16px;line-height:1.7;max-width:420px}
.dbs-lijst{list-style:none;padding:0;margin:0 auto;width:fit-content;text-align:left;display:grid;gap:9px}
.dbs-lijst li{display:flex;align-items:flex-start;gap:10px;font-weight:600;color:var(--brand-dark);font-size:15.5px}
.dbs-lijst svg{flex:0 0 20px;width:20px;height:20px;margin-top:2px}

.dbs-feiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1040px;margin:26px auto 0}
.dbs-feit{background:#fff;border-radius:18px;padding:22px 18px;text-align:center;border:1px solid color-mix(in srgb,var(--dbs-lila) 45%,#fff);min-width:0}
.dbs-feit strong{display:block;font-family:var(--font-heading);font-size:19px;color:var(--dbs-navy);margin-bottom:6px;line-height:1.25}
.dbs-feit span{display:block;font-size:14px;line-height:1.5;color:var(--text-soft)}

@media (max-width:900px){
  .dbs-paneel{grid-template-columns:minmax(0,1fr)}
  .dbs-beeld{min-height:0;aspect-ratio:16/10}
  .dbs-feiten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .dbs-balk{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
  .dbs-lijn{display:none}
  .dbs-fase-nr{width:44px;height:44px}
  .dbs-fase-naam{font-size:13.5px}
  .dbs-tekst{padding:28px 20px}
  .dbs-feiten{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .dbs-lijn-vul,.dbs-fase-nr,.dbs-inhoud{transition:none !important}
}
.no-js .dbs-inhoud{opacity:1;visibility:visible;grid-area:auto;margin-bottom:28px}
.no-js .dbs-tekst{display:block}
@media print{ .dbs-balk{display:none} .dbs-inhoud{opacity:1;visibility:visible;grid-area:auto} .dbs-tekst{display:block} }

/* 3. INSTAGRAM: puur zwart, knop transparant met een rand in de Instagram-gradient (vaste regel) */
.hp-insta{background:#000000 !important}
.hp-insta-btn{background:transparent !important;color:#fff !important;position:relative;border-radius:999px}
.hp-insta-btn::before{content:"";position:absolute;inset:0;border-radius:999px;padding:2px;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}

/* 4. vinkjes altijd groen (vaste regel), ook in de waarom-lijst op de dienstpagina */
.why-list li::before{background:#16a34a !important}