/* Gedeelde stijl van slimbadkamer.nl — hersteld 29-08-2026.
   Stond eerst inline in index.php; naar een eigen bestand gehaald zodat alle pagina's
   dezelfde vormgeving delen en de browser hem één keer ophaalt. */
/* 🪤 Hier stonden PHP-tags (<?= $merk['primary'] ?>). Dit bestand wordt door nginx als
   STATISCH bestand geserveerd, dus de browser kreeg die tekst letterlijk binnen: --prim en de
   andere merkkleuren waren daardoor ongeldig op elke pagina die deze stijl laadt (alles behalve
   de homepage, die zijn stijl nog inline had). Knoppen en accenten vielen dus terug op geen
   kleur. Kleuren staan nu als waarde in het bestand; de bron is brand.json. */
:root{
  --prim:#B11E1E; --prim-dark:#930000;
  --sec:#f59e0b; --acc:#fffbeb;
  --ink:#1a1a1a; --grijs:#64748b; --lijn:#e2e8f0; --wit:#fff;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--wit)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* bovenbalk met vertrouwenspunten */
.top{background:#1a1a1a;color:#e5e7eb;font-size:.8rem}
.top .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:9px 20px}
.top ul{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;list-style:none}

/* kop */
.kop{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:20}
.kop .wrap{display:flex;align-items:center;gap:26px;padding:14px 20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem}
.logo .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(160deg,var(--prim),var(--prim-dark));
  display:grid;place-items:center;color:#fff;font-size:1rem}
.logo small{display:block;font-weight:600;font-size:.55rem;letter-spacing:.14em;color:var(--grijs)}
nav{display:flex;gap:22px;margin-left:14px;font-weight:600;font-size:.95rem;flex-wrap:wrap}
nav a.actief{color:var(--prim);border-bottom:2px solid var(--prim);padding-bottom:3px}
.kop .knoppen{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.knop{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:9px;font-weight:700;font-size:.92rem;border:1px solid var(--lijn);background:var(--wit)}
.knop.prim{background:var(--prim);color:#fff;border-color:var(--prim)}
.knop.prim:hover{background:var(--prim-dark)}

/* hero */
.hero{background:linear-gradient(150deg,#2a0d0d,#5c1414 45%,var(--prim));color:#fff;padding:64px 0 76px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.pil{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  padding:8px 15px;border-radius:999px;font-size:.86rem;font-weight:600}
.pil::before{content:"";width:8px;height:8px;border-radius:50%;background:#34d399}
h1{font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.06;margin:22px 0 0;font-weight:800;letter-spacing:-.02em}
h1 .streep{display:inline-block;border-bottom:5px solid var(--prim);padding-bottom:6px}
.hero p.lead{font-size:1.06rem;color:#f3e8e8;margin:20px 0 26px;max-width:33em}
.zoek{background:#fff;border-radius:13px;padding:9px;display:flex;gap:9px;flex-wrap:wrap;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.zoek input,.zoek select{flex:1 1 170px;border:0;padding:13px 14px;font:inherit;color:var(--ink);background:transparent;min-width:0}
.zoek input:focus,.zoek select:focus{outline:2px solid var(--acc);border-radius:8px}
.borg{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:.85rem;color:#f0dcdc}

/* configurator-venster */
.venster{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.35);color:var(--ink)}
.venster .balk{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#f1f5f9;border-bottom:1px solid var(--lijn)}
.stip{width:11px;height:11px;border-radius:50%}
.venster .url{margin-left:10px;font-size:.76rem;color:var(--grijs);background:#fff;border:1px solid var(--lijn);
  border-radius:6px;padding:4px 10px}
.doek{height:190px;background:repeating-linear-gradient(45deg,#fdf2f2,#fdf2f2 12px,#fbe9e9 12px,#fbe9e9 24px);
  display:grid;place-items:center;font-size:3.6rem;position:relative}
.live{position:absolute;top:12px;left:12px;background:#fff;border-radius:999px;padding:5px 12px;font-size:.72rem;
  font-weight:700;display:flex;align-items:center;gap:7px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e}
.subtot{position:absolute;right:12px;bottom:-18px;background:var(--prim);color:#fff;border-radius:11px;padding:9px 16px;
  box-shadow:0 8px 20px rgba(177,30,30,.4)}
.subtot span{display:block;font-size:.62rem;letter-spacing:.1em;opacity:.85}
.subtot b{font-size:1.12rem}
.venster .lijst{padding:26px 16px 16px}
.venster .lijst h4{margin:0 0 12px;font-size:.86rem;display:flex;justify-content:space-between;color:var(--grijs);font-weight:600}
.regel{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--lijn);font-size:.92rem}
.regel b{margin-left:auto;white-space:nowrap}
.wmo{display:flex;align-items:center;gap:11px;background:var(--acc);border:1px solid #fde68a;border-radius:11px;
  padding:11px 14px;margin:14px 16px 18px;font-size:.86rem}
.vink{width:26px;height:26px;border-radius:50%;background:#22c55e;color:#fff;display:grid;place-items:center;flex:0 0 auto}

/* secties */
section{padding:62px 0}
.sec-kop{text-align:center;max-width:44em;margin:0 auto 38px}
.sec-kop .label{color:var(--prim);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.sec-kop h2{font-size:clamp(1.6rem,3vw,2.15rem);margin:9px 0 10px;letter-spacing:-.01em}
.sec-kop p{color:var(--grijs);margin:0}
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;text-align:center}
.cijfers div{background:#fafafa;border:1px solid var(--lijn);border-radius:13px;padding:22px 14px}
.cijfers b{display:block;font-size:1.9rem;color:var(--prim);line-height:1.1}
.cijfers span{color:var(--grijs);font-size:.88rem}
.merkenrij{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;align-items:center;color:var(--grijs);
  font-weight:700;font-size:.95rem;margin-top:30px}
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.kaart{border:1px solid var(--lijn);border-radius:13px;padding:22px;background:var(--wit);transition:box-shadow .18s,transform .18s}
.kaart:hover{box-shadow:0 10px 26px rgba(0,0,0,.07);transform:translateY(-2px)}
.kaart .ico{font-size:1.9rem;line-height:1}
.kaart h3{margin:12px 0 6px;font-size:1.05rem}
.kaart p{margin:0;color:var(--grijs);font-size:.92rem}
.stap{counter-increment:s}
.stap .ico{width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--prim);display:grid;place-items:center;font-weight:800}
.stap .ico::before{content:counter(s)}
.stappen{counter-reset:s}
.grijsvlak{background:#fafafa;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.bedrijf{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--lijn);border-radius:13px;padding:22px;background:var(--wit)}
.avatar{width:52px;height:52px;border-radius:11px;background:linear-gradient(160deg,var(--prim),var(--prim-dark));
  color:#fff;display:grid;place-items:center;font-weight:800;flex:0 0 auto}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{background:var(--acc);color:#92400e;border-radius:999px;padding:4px 11px;font-size:.78rem;font-weight:600}
.zakelijk{background:linear-gradient(150deg,#2a0d0d,var(--prim));color:#fff;border-radius:16px;padding:40px}
.zakelijk ul{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:10px}
.zakelijk li::before{content:"✓ ";color:#34d399;font-weight:800}
.steden{display:flex;flex-wrap:wrap;gap:9px}
.steden a{border:1px solid var(--lijn);border-radius:999px;padding:7px 15px;font-size:.9rem;background:var(--wit)}
.steden a:hover{border-color:var(--prim);color:var(--prim)}
footer{background:#1a1a1a;color:#9ca3af;padding:40px 0;font-size:.88rem}
footer a:hover{color:#fff}

/* zwevende knoppen, zoals op de oorspronkelijke site */
.zweef{position:fixed;right:18px;bottom:18px;display:grid;gap:11px;z-index:30}
.zweef a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.25rem;
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
.zweef .chat{background:var(--prim)}.zweef .wa{background:#25d366}.zweef .tel{background:var(--prim-dark)}

/* MOBIELE-KOP-20260829 — hiervoor stond hier alleen `nav{display:none}`: op een telefoon
   verdween het menu zonder vervanging, dus je kon nergens heen. De bovenbalk met vier USP's
   en de twee knoppen vielen daaronder in een lange stapel. Nu: een menuknop die een paneel
   opent, en een bovenbalk die op smalle schermen alleen het telefoonnummer houdt. */

.menuknop{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--lijn);
  border-radius:10px;background:var(--wit);cursor:pointer;padding:0;
  flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menuknop span{display:block;width:20px;height:2px;background:#1a1a1a;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.menuknop[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuknop[aria-expanded="true"] span:nth-child(2){opacity:0}
.menuknop[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menuknop:focus-visible{outline:2px solid var(--prim);outline-offset:2px}

@media(max-width:900px){
  .hero .grid{grid-template-columns:1fr}

  /* De vier USP's kosten op een telefoon vier regels en zeggen daar weinig.
     Telefoonnummer en bedrijfsportaal blijven wel staan. */
  .top ul{display:none}
  .top .wrap{justify-content:center;padding:8px 16px;font-size:.78rem}

  .kop .wrap{gap:12px;padding:12px 16px;flex-wrap:wrap}
  .menuknop{display:flex}

  /* Menu wordt een paneel onder de kop in plaats van een rij die doorloopt. */
  nav{display:none;order:3;width:100%;flex-direction:column;gap:0;margin:0;
    border-top:1px solid var(--lijn);padding-top:6px}
  nav a{padding:13px 4px;border-bottom:1px solid var(--lijn);font-size:1rem}
  nav a.actief{border-bottom:1px solid var(--lijn);color:var(--prim);padding-bottom:13px}

  .kop .knoppen{order:4;width:100%;margin-left:0;display:none;gap:8px;padding:10px 0 4px}
  .kop .knoppen .knop{flex:1 1 100%;text-align:center;min-height:44px;
    display:flex;align-items:center;justify-content:center}

  .kop.open nav,
  .kop.open .knoppen{display:flex}

  /* ZWEEFKNOPPEN-20260829 — de drie zweefknoppen stonden op een telefoon boven op het
     zoekveld: ze dekten de dienstenkeuze af. Ze staan nu naast elkaar onderaan, iets kleiner,
     en de pagina krijgt onderaan ruimte zodat ze nooit de laatste regel bedekken. */
  .zweef{right:12px;bottom:12px;left:auto;grid-auto-flow:column;gap:9px}
  .zweef a{width:46px;height:46px;font-size:1.1rem}
  body{padding-bottom:74px}
}


/* ─────────────────────────────────────────────────────────────────────────────
   Aanvraagstroom — toegevoegd 29-08-2026.
   De site had geen enkel formulier; deze regels horen bij /offerte.php,
   /bedrijven.php, de homepage en de bevestigingspagina.
   ───────────────────────────────────────────────────────────────────────────── */

/* lichte kopstrook, voor pagina's zonder grote hero */
.strook{background:linear-gradient(160deg,#fff7f7,#fdeeee);border-bottom:1px solid #f6dada;padding:40px 0 34px}
.strook .pil{background:#fff;border-color:#f2d4d4;color:var(--prim)}
.strook .pil::before{background:#22c55e}
.strook p.lead{font-size:1.05rem;color:#4b5563;margin:14px 0 18px;max-width:38em}
.strook .borg{color:#6b7280;margin-top:14px}
.klein-h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:16px 0 0;line-height:1.15}

/* zoekbalk op een lichte achtergrond heeft wél een rand nodig */
.zoek.licht{box-shadow:0 6px 18px rgba(0,0,0,.06);border:1px solid var(--lijn);max-width:44em}

/* twee kolommen: inhoud + zijkolom */
.tweeluik,.tweeluik-breed{display:grid;gap:26px;align-items:start}
.tweeluik{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.tweeluik-breed{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
.tweeluik aside,.tweeluik-breed aside{display:grid;gap:16px}

/* het formulier zelf */
.aanvraag{border:1px solid var(--lijn);border-radius:14px;padding:24px;background:var(--wit);
  box-shadow:0 10px 30px rgba(0,0,0,.06)}
.aanvraag h3{margin:0;font-size:1.2rem}
.aanvraag .onder{color:var(--grijs);margin:6px 0 18px;font-size:.93rem}
.aanvraag label{display:block;font-weight:600;font-size:.9rem;margin:0 0 14px}
.aanvraag input,.aanvraag select,.aanvraag textarea{display:block;width:100%;margin-top:6px;padding:12px 13px;
  border:1px solid var(--lijn);border-radius:9px;font:inherit;color:var(--ink);background:var(--wit)}
.aanvraag input:focus,.aanvraag select:focus,.aanvraag textarea:focus{outline:2px solid var(--prim);outline-offset:1px;border-color:var(--prim)}
.aanvraag textarea{resize:vertical}
.aanvraag .rij{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.aanvraag button{width:100%;justify-content:center;margin-top:6px;padding:14px 18px;font-size:1rem;cursor:pointer}
.aanvraag .hint{color:var(--grijs);font-size:.83rem;margin:-8px 0 14px}
.aanvraag .fout{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:9px;padding:11px 13px;
  font-size:.92rem;margin:0 0 16px;font-weight:600}
.aanvraag a{color:var(--prim);text-decoration:underline}
/* honeypot: onzichtbaar voor mensen, wél invulbaar voor bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.klein{font-size:.85rem;color:var(--grijs);font-weight:400}

/* zijkolom-kaarten */
.stappenlijst{margin:14px 0 0;padding-left:20px;display:grid;gap:12px;font-size:.95rem}
.stappenlijst li{padding-left:2px}
.belkaart .knop{margin:6px 6px 0 0}
.wmo-kaart{background:var(--acc);border-color:#fde68a}
.leeg{border-left:4px solid var(--prim);background:#fffafa;margin-bottom:22px}
.uitslagregel{color:var(--grijs);font-size:.95rem;margin:0 0 16px}
.uitslagregel a{color:var(--prim);text-decoration:underline}
.bedrijf{margin-bottom:22px}
.filterlijst{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px;font-size:.94rem}
.filterlijst a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px}
.filterlijst a:hover{background:#fafafa;color:var(--prim)}
.filterlijst a.aan{background:var(--acc);color:var(--prim);font-weight:700}
.filterlijst span{color:var(--grijs);font-weight:600}
.bevestiging{text-align:center;padding:34px}
.vink.groot{width:52px;height:52px;font-size:1.5rem;margin:0 auto}
.bevestiging .stappenlijst{text-align:left;max-width:30em;margin:20px auto 0}

/* beloftes op de homepage — vervangt de tellers met 0 erin */
.beloftes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.beloftes div{background:#fafafa;border:1px solid var(--lijn);border-radius:13px;padding:20px 18px}
.beloftes b{display:block;font-size:1.02rem;margin-bottom:4px}
.beloftes span{color:var(--grijs);font-size:.9rem}

@media(max-width:900px){
  .tweeluik,.tweeluik-breed{grid-template-columns:1fr}
  .aanvraag .rij{grid-template-columns:1fr}
}

/* BEELD-TERUG-20260829 — de teruggebouwde site had 30 pagina's tekst en NUL afbeeldingen: de
   originelen verdwenen tussen 06-07 en 06-08 en vielen buiten elke back-up. Beeld komt uit twee
   eigen bronnen: veiligbaden (productfoto's) en onderhoud-renovatie (dienstfoto's). Bewust NIET
   uit `veiligbaden/assets/images/klant-uploads` — dat zijn 1353 foto's van badkamers bij klanten
   thuis, die horen niet op een ander merk zijn site. */
.hero{
  background:
    linear-gradient(150deg, rgba(42,13,13,.93), rgba(92,20,20,.88) 45%, rgba(122,26,26,.82)),
    url("/assets/img/hero.webp") center/cover no-repeat;
}
/* Eigen variant, zodat de gewone .kaart (o.a. in de koptekst) ongemoeid blijft. */
.kaart--foto{padding:0;overflow:hidden;display:flex;flex-direction:column}
.kaart--foto .foto{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:#eee}
.kaart--foto .inhoud{padding:18px 20px 20px}
.kaart--foto .ico{font-size:1.35rem;margin-right:.4em}
.kaart--foto h3{display:flex;align-items:center;margin:0 0 4px}
@media (prefers-reduced-motion:no-preference){
  .kaart--foto .foto{transition:transform .3s}
  .kaart--foto:hover .foto{transform:scale(1.04)}
}

/* INSPIRATIE-20260829 — een galerij met voorbeeldbeelden. Bewust met gemengde hoogtes: de
   foto's zijn staand én liggend, en ze bijsnijden naar één formaat kost juist het beeld dat je
   wilt tonen. `columns` doet dat zonder javascript en valt vanzelf terug naar één kolom. */
.inspiratie{columns:3;column-gap:14px}
.inspiratie figure{break-inside:avoid;margin:0 0 14px;border-radius:12px;overflow:hidden;background:#eee}
.inspiratie img{width:100%;height:auto;display:block}
@media (max-width:900px){.inspiratie{columns:2}}
@media (max-width:560px){.inspiratie{columns:1}}
.inspiratie-bron{margin-top:14px;font-size:.82rem;color:var(--dim);text-align:center}