/* CleanXperts — demo site styling
   Zwart/geel branding, zoals op de flyer */

:root{
  --black:#0b0b0d;
  --near-black:#1a1a1c;
  --yellow:#f6c60d;
  --yellow-dark:#d9ad00;
  --white:#ffffff;
  --gray-bg:#f4f4f2;
  --gray-border:#e3e3e0;
  --text:#161616;
  --muted:#6b6b6b;
  --green:#22c55e;
  --status-yellow:#eab308;
  --orange:#f97316;
  --red:#ef4444;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Segoe UI',Arial,Helvetica,sans-serif;
  background:var(--gray-bg);
  color:var(--text);
  line-height:1.5;
}
a{color:inherit;}
img{max-width:100%;}

/* ---------- Topbar / logo ---------- */
.topbar{
  background:var(--black);
  padding:18px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.logo{
  font-weight:800;
  font-size:26px;
  letter-spacing:1px;
  color:var(--white);
}
.logo span{color:var(--yellow);}
.logo-sub{
  color:var(--yellow);
  font-size:10px;
  letter-spacing:2px;
  font-weight:600;
  margin-top:2px;
}

/* ---------- Layout shell ---------- */
.page{
  max-width:1100px;
  margin:0 auto;
  padding:0 0 60px;
}
.page-narrow{
  max-width:460px;
  margin:0 auto;
  padding:0 0 60px;
}
.section{
  padding:28px 20px;
}

/* Een kopje boven een groepje velden. Ziet eruit als een label, maar is er
   geen: een <label for> die naar niets wijst, doet bij een klik niets en
   verwart een schermlezer. */
.veldkop{
  display:block;
  font-weight:700;
  font-size:13.5px;
  margin:0 0 10px;
}

/* ---------- Aanmeldpagina ----------
   Deze pagina wordt op twee heel verschillende manieren gebruikt: met de
   duim op een telefoon na het scannen van een QR-code, en met muis en
   toetsenbord achter een breed scherm. De telefoonweergave blijft precies
   zoals hij was; alles hieronder met een minimumbreedte geldt alleen op
   grotere schermen. */
.aanmeld-wrap{
  max-width:460px;
  margin:0 auto;
  padding:0 0 60px;
}
.aanmeld-kop{
  background:var(--black);
  color:var(--yellow);
  padding:16px 20px;
  text-align:center;
  margin:0;
  font-size:17px;
  font-weight:700;
}

/* Het zijblok bestaat op een telefoon niet. Bewust display:none en niet
   alleen "onzichtbaar": zo staat de inhoud ook niet in de tabvolgorde en
   leest een schermlezer hem niet twee keer voor. */
.aanmeld-zij{display:none;}

@media (min-width:1000px){
  .aanmeld-wrap{max-width:1040px;padding:0 24px 60px;}
  /* Op de telefoon plakt deze balk aan de kaart eronder. Op een breed
     scherm staat de kaart smaller dan de balk, en dan oogt een afgeronde
     bovenkant zonder onderkant als een fout. Daarom hier rondom rond. */
  .aanmeld-kop{
    border-radius:12px;
    padding:20px;
    font-size:17px;
  }
  .aanmeld-kolommen{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:24px;
    align-items:start;
  }
  .aanmeld-hoofd .card{margin:20px 0;padding:30px 34px;}

  .aanmeld-zij{
    display:block;
    /* Meelopen bij het scrollen, zodat het bedrag in beeld blijft terwijl
       iemand onderin het formulier zit te typen. */
    position:sticky;
    top:20px;
    margin-top:20px;
  }
  .zij-kaart{
    background:var(--white);
    border:1px solid var(--gray-border);
    border-radius:12px;
    padding:18px 20px;
    margin-bottom:14px;
  }
  .zij-kaart h3{margin:0 0 10px;font-size:15px;}
  .zij-stappen{margin:0;padding-left:18px;font-size:13.5px;line-height:1.65;}
  .zij-stappen li{margin-bottom:6px;}
  .zij-klein{margin:12px 0 0;font-size:12.5px;color:var(--gray-text,#6b6b70);line-height:1.55;}

  /* Het verplaatste prijsblok mag hier geen buitenmarge meenemen. */
  .aanmeld-zij #indicatie,
  .aanmeld-zij #zakelijk-vervolg{margin:0 0 14px !important;}

  /* Ruimere velden: een muisklik is minder nauwkeurig dan een duimtik,
     en op een breed scherm oogt een krap veld goedkoop. */
  .aanmeld-hoofd input[type="text"],
  .aanmeld-hoofd input[type="tel"],
  .aanmeld-hoofd input[type="email"],
  .aanmeld-hoofd select,
  .aanmeld-hoofd textarea{padding:12px 14px;font-size:15px;}
  .aanmeld-hoofd textarea{min-height:80px;}
  .aanmeld-hoofd .btn{font-size:16px;padding:14px 28px;}
}

/* Met een muis is er hover; met een duim niet. Alleen tonen waar het kan. */
@media (hover:hover){
  .aanmeld-hoofd .radio-item:hover,
  .aanmeld-hoofd .pill:hover{border-color:var(--black);cursor:pointer;}
}

/* Wie met de tab-toets door het formulier loopt, moet kunnen zien waar hij
   is. De standaardomlijning van de browser verdwijnt achter onze eigen
   stijlen, dus zetten wij er zelf een neer. */
.aanmeld-hoofd :is(input,select,textarea,button,a):focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
}

/* ---------- Hero / flyer-style card ---------- */
.hero{
  background:var(--black);
  color:var(--white);
  padding:40px 24px 32px;
  text-align:center;
}
.hero h1{
  color:var(--yellow);
  font-size:28px;
  font-weight:800;
  margin:0 0 6px;
  letter-spacing:.5px;
}
.hero p.sub{
  color:#d5d5d5;
  margin:0 0 18px;
  font-size:14px;
}
.hero .street-badge{
  display:inline-block;
  background:var(--yellow);
  color:var(--black);
  font-weight:700;
  padding:6px 16px;
  border-radius:999px;
  font-size:13px;
  margin-bottom:14px;
}
.checklist{
  list-style:none;
  padding:0;
  margin:18px 0;
  text-align:left;
  display:inline-block;
}
.checklist li{
  margin:8px 0;
  font-size:14px;
  color:#f1f1f1;
}
.checklist li::before{
  content:"✓ ";
  color:var(--yellow);
  font-weight:800;
  margin-right:6px;
}

/* ---------- Cards ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin:20px;
}
.card h2{
  margin-top:0;
  font-size:19px;
}
.card-flat{
  background:var(--white);
  border:1px solid var(--gray-border);
  border-radius:12px;
  padding:16px 18px;
  margin:10px 0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:var(--yellow);
  color:var(--black);
  font-weight:700;
  border:none;
  border-radius:10px;
  padding:14px 22px;
  font-size:15px;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
  width:100%;
}
.btn:hover{background:var(--yellow-dark);}
.btn-secondary{
  background:var(--near-black);
  color:var(--white);
}
.btn-outline{
  background:transparent;
  border:2px solid var(--black);
  color:var(--black);
}
.btn-small{
  width:auto;
  padding:8px 14px;
  font-size:13px;
  border-radius:8px;
}

/* ---------- Forms ---------- */
label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin:14px 0 6px;
  color:var(--text);
}
input[type=text],input[type=tel],input[type=email],textarea,select{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--gray-border);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  background:var(--white);
}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--yellow);
  border-color:var(--yellow-dark);
}
.radio-row, .pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.pill{
  border:1px solid var(--gray-border);
  border-radius:8px;
  padding:10px 16px;
  cursor:pointer;
  font-size:14px;
  background:var(--white);
  user-select:none;
}
.pill.selected{
  background:var(--yellow);
  border-color:var(--yellow-dark);
  font-weight:700;
}
.radio-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  cursor:pointer;
  font-size:14px;
}

/* ---------- Confirmation ---------- */
.check-circle{
  width:72px;height:72px;
  border-radius:50%;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:36px;
  margin:0 auto 16px;
}
.info-box{
  background:var(--gray-bg);
  border-radius:10px;
  padding:16px;
  margin:18px 0;
  text-align:left;
}
.info-box h3{margin:0 0 10px;font-size:14px;}
.info-box ul{list-style:none;padding:0;margin:0;}
.info-box li{font-size:13.5px;margin:6px 0;}
.info-box li::before{content:"✓ ";color:var(--green);font-weight:800;}

/* ---------- Tables ---------- */
/* Brede tabellen zijn op een telefoon niet te lezen. .table-wrap maakt ze
   horizontaal scrollbaar in plaats van dat ze de pagina oprekken. */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{min-width:520px;}

table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
th,td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--gray-border);
}
th{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
tr.clickable{cursor:pointer;}
tr.clickable:hover{background:#fafafa;}

/* ---------- Status badges ---------- */
.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
}
.status .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.status-green{background:#e8f9ee;color:#15803d;}
.status-green .dot{background:var(--green);}
.status-yellow{background:#fef9e6;color:#92720a;}
.status-yellow .dot{background:var(--status-yellow);}
.status-orange{background:#fff1e6;color:#c2540a;}
.status-orange .dot{background:var(--orange);}
.status-red{background:#fdecec;color:#b91c1c;}
.status-red .dot{background:var(--red);}
.status-gray{background:#f0f0f0;color:#666;}
.status-gray .dot{background:#aaa;}
.status-blue{background:#e8f0fd;color:#1d4ed8;}
.status-blue .dot{background:#2563eb;}

/* ---------- Dashboard ---------- */
.dash-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 20px 0;
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  margin:20px;
}
.stat-card{
  background:var(--white);
  border-radius:12px;
  padding:16px 18px;
  box-shadow:var(--shadow);
}
.stat-card .num{font-size:26px;font-weight:800;}
.stat-card .label{font-size:12px;color:var(--muted);}

/* ---------- WhatsApp mockup ---------- */
.wa-frame{
  background:#e5ded8;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  max-width:340px;
  margin:0 auto;
}
.wa-topbar{
  background:#075e54;
  color:white;
  padding:12px 16px;
  font-weight:700;
  font-size:14px;
}
.wa-body{padding:16px;min-height:180px;}
.wa-bubble{
  background:white;
  border-radius:10px;
  padding:10px 12px;
  font-size:13.5px;
  max-width:85%;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
  white-space:pre-line;
}
.wa-time{font-size:10px;color:#888;text-align:right;margin-top:4px;}

/* ---------- WhatsApp-inbox ---------- */
.inbox{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start;}
@media (max-width:820px){.inbox{grid-template-columns:1fr;}}

.inbox-lijst{
  border:1px solid var(--lijn,#e3e3e6);
  border-radius:12px;
  overflow:hidden;
  max-height:70vh;
  overflow-y:auto;
  background:white;
}
.inbox-item{
  display:block;width:100%;text-align:left;
  padding:12px 14px;border:0;border-bottom:1px solid #eee;
  background:white;cursor:pointer;font:inherit;
}
.inbox-item:hover{background:#f7f7f8;}
.inbox-item[aria-current="true"]{background:#fff8dc;border-left:3px solid var(--geel,#f5c518);}
.inbox-item .naam{font-weight:700;font-size:14px;}
.inbox-item .laatste{font-size:12.5px;color:#666;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inbox-item .wanneer{font-size:11px;color:#999;margin-top:3px;}
.inbox-badge{
  display:inline-block;min-width:18px;padding:1px 6px;border-radius:9px;
  background:#25d366;color:white;font-size:11px;font-weight:700;text-align:center;
  margin-left:6px;
}

.gesprek{
  border:1px solid var(--lijn,#e3e3e6);border-radius:12px;
  background:#e5ded8;padding:14px;max-height:70vh;overflow-y:auto;
}
.gesprek .bericht{margin-bottom:10px;display:flex;}
.gesprek .bericht.uit{justify-content:flex-end;}
.gesprek .bel{
  background:white;border-radius:10px;padding:8px 11px;font-size:13.5px;
  max-width:75%;box-shadow:0 1px 2px rgba(0,0,0,.1);white-space:pre-wrap;
  word-break:break-word;
}
.gesprek .bericht.uit .bel{background:#dcf8c6;}
.gesprek .bel .wanneer{font-size:10px;color:#888;text-align:right;margin-top:4px;}

/* ---------- Legend ---------- */
.legend{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13.5px;
}
.legend-item{display:flex;align-items:center;gap:8px;}
.legend-dot{width:10px;height:10px;border-radius:50%;}

/* ---------- Zijbalk (beheeromgeving) ----------
   Vaste donkere navigatie links, met het logo bovenaan en de actieve
   pagina in het geel. Op smalle schermen schuift hij in en uit.
*/
:root{ --sidebar-breedte: 232px; }

.sidebar{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--sidebar-breedte);
  background:var(--black);
  display:flex;
  flex-direction:column;
  z-index:60;
  overflow-y:auto;
}
.sidebar-logo{
  padding:22px 20px 18px;
  border-bottom:1px solid #232326;
  text-decoration:none;
  display:block;
}
.sidebar-logo .logo{font-size:21px;}
.sidebar-logo .logo-sub{font-size:8.5px; letter-spacing:1.6px;}

.sidebar-nav{padding:12px 10px; display:flex; flex-direction:column; gap:2px;}
.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:9px;
  color:#c9c9cc;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:background .12s, color .12s;
}
.sidebar-nav a:hover{background:#1e1e21; color:var(--white);}
.sidebar-nav a.actief{
  background:var(--yellow);
  color:var(--black);
  font-weight:700;
}
.sidebar-nav a svg{width:18px; height:18px; flex:none;}

/* Uitklapbaar onderdeel (Instellingen) */
.sidebar-groep-knop{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 14px;
  border:none;
  border-radius:9px;
  background:transparent;
  color:#c9c9cc;
  font:inherit;
  font-size:14px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
}
.sidebar-groep-knop:hover{background:#1e1e21; color:var(--white);}
.sidebar-groep-knop.actief{background:var(--yellow); color:var(--black); font-weight:700;}
.sidebar-groep-knop svg{width:18px; height:18px; flex:none;}
.sidebar-groep-knop .chevron{
  margin-left:auto;
  font-size:17px;
  line-height:1;
  transition:transform .16s ease;
}
.sidebar-groep.open .sidebar-groep-knop .chevron{transform:rotate(90deg);}

.sidebar-subnav{display:none; flex-direction:column; gap:1px; margin:2px 0 6px;}
.sidebar-groep.open .sidebar-subnav{display:flex;}
.sidebar-nav a.sub{
  padding:8px 14px 8px 44px;
  font-size:13px;
  font-weight:400;
  color:#a3a3a8;
  border-radius:8px;
}
.sidebar-nav a.sub:hover{background:#1e1e21; color:var(--white);}
.sidebar-nav a.sub.actief{
  background:transparent;
  color:var(--yellow);
  font-weight:700;
  box-shadow:inset 2px 0 0 var(--yellow);
  border-radius:0 8px 8px 0;
}

.sidebar-voet{
  margin-top:auto;
  padding:14px 16px 18px;
  border-top:1px solid #232326;
  font-size:11.5px;
  color:#75757a;
}

/* Inhoud opschuiven zodat de zijbalk er niet overheen valt */
body.met-sidebar{padding-left:var(--sidebar-breedte);}
body.met-sidebar .page,
body.met-sidebar .page-narrow{max-width:1120px;}

/* Hamburgerknop: alleen zichtbaar op smalle schermen */
.sidebar-knop{
  display:none;
  position:fixed;
  top:12px; left:12px;
  z-index:70;
  background:var(--black);
  color:var(--yellow);
  border:1px solid #333;
  border-radius:9px;
  width:44px; height:44px;
  font-size:19px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:55;
}

@media (max-width:900px){
  body.met-sidebar{padding-left:0;}
  .sidebar{
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.3);
  }
  body.sidebar-open .sidebar{transform:translateX(0);}
  body.sidebar-open .sidebar-overlay{display:block;}
  .sidebar-knop{display:flex;}
  /* Ruimte maken voor de knop naast de paginakop */
  body.met-sidebar .dash-header{padding-left:56px;}
  body.met-sidebar .account-bar-inner{padding-left:64px;}
}

/* ---------- Account-balk ---------- */
#account-bar{background:var(--near-black);}
.account-bar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:9px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#ddd;
  font-size:13px;
}
.account-bar-inner strong{color:var(--yellow);}
.account-bar-inner button{
  background:transparent;
  border:1px solid #555;
  color:#ddd;
  border-radius:6px;
  padding:5px 12px;
  font-size:12px;
  cursor:pointer;
}
.account-bar-inner button:hover{border-color:var(--yellow);color:var(--yellow);}

/* ---------- Job-kaarten (medewerkerpagina, mobiel) ---------- */
.job-card{
  background:var(--white);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:14px 16px;
  margin:10px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.job-card-info{flex:1; min-width:0;}
.job-btn{
  background:var(--yellow);
  color:var(--black);
  border:none;
  border-radius:10px;
  padding:14px 18px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  min-height:48px;
}
.job-btn:hover{background:var(--yellow-dark);}
.job-btn:disabled{background:#e5e5e5;color:#888;cursor:default;}
.job-done-badge{color:var(--green);font-weight:700;font-size:13px;white-space:nowrap;}
.job-retry-btn{
  margin-top:4px;
  background:transparent;
  border:1px solid var(--gray-border);
  color:var(--text);
  border-radius:8px;
  padding:6px 10px;
  font-size:11.5px;
  cursor:pointer;
  white-space:nowrap;
}
.job-retry-btn:hover{border-color:var(--red);color:var(--red);}

/* ---------- Demo nav ---------- */
#demo-nav{
  background:var(--black);
  padding:14px 20px;
  margin-top:40px;
}
.demo-nav-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  font-size:13px;
}
.demo-nav-inner a{
  color:#ddd;
  text-decoration:none;
  padding:4px 0;
}
.demo-nav-inner a:hover{color:var(--yellow);}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

/* ---------- Toegankelijkheid: zichtbare focus voor toetsenbordgebruik ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.pill:focus-visible{
  outline:3px solid var(--yellow-dark);
  outline-offset:2px;
  border-radius:6px;
}
/* Rijen die als knop werken zijn ook per toetsenbord te bereiken */
tr.clickable:focus-visible{
  outline:3px solid var(--yellow-dark);
  outline-offset:-3px;
}

/* ---------- Mobiel ---------- */
@media (max-width:700px){
  .two-col{grid-template-columns:1fr;}

  /* Kop met titel + knoppen netjes onder elkaar i.p.v. samengeperst */
  .dash-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .dash-header > div{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .card{padding:18px 16px; margin:16px 12px;}
  .stat-grid{margin:16px 12px;}
  .hero{padding:32px 18px 26px;}
  .hero h1{font-size:23px;}

  /* Tikdoelen minimaal ~44px hoog voor vingers */
  .btn{padding:15px 20px;}
  .btn-small{padding:10px 14px;}
}


.muted{color:var(--muted);font-size:13px;}
.center{text-align:center;}
.mt0{margin-top:0;}
.small{font-size:12.5px;}

.progress-bar{
  width:100%;
  height:8px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
  margin:6px 0;
}
.progress-bar-fill{
  height:100%;
  background:var(--yellow);
}

/* ============================================================
   Publieke pagina's in de huisstijl: geel vlak, zwarte tekst.
   Gebruikt door index.html en de dienstenpagina's, zodat de
   opmaak op één plek staat in plaats van vier keer.
   ============================================================ */

body.home{ background:var(--yellow); color:var(--black); }
.home .wrap{ max-width:1100px; margin:0 auto; padding:0 22px; }

/* ---- Menubalk ---- */
.home-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; padding:20px 0 8px;
}
.home-logo{ display:flex; flex-direction:column; text-decoration:none; }
.home-logo .naam{
  font-size:27px; font-weight:900; letter-spacing:1.5px; line-height:1;
  color:var(--black);
}
.home-logo .naam span{
  display:inline-block; background:var(--black); color:var(--yellow);
  padding:0 6px; margin:0 1px; border-radius:4px;
}
.home-logo .sub{
  font-size:10.5px; letter-spacing:3px; margin-top:5px; font-weight:700;
  color:rgba(0,0,0,.62);
}
.home-menu{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Telefoonnummer: het zwaarste element in de balk, want daar wil je
   dat iemand op klikt. Op een telefoon belt het meteen. */
.home-tel, .home-whatsapp, .home-portaal{
  display:inline-flex; align-items:center; gap:9px;
  border-radius:999px; padding:11px 22px; text-decoration:none;
  font-weight:900; font-size:17px; letter-spacing:.2px; white-space:nowrap;
  transition:background .12s, transform .12s;
}
.home-tel svg, .home-whatsapp svg, .home-portaal svg{ width:19px; height:19px; flex:0 0 19px; }
.home-tel{ background:var(--black); color:var(--yellow); }
.home-tel:hover{ background:var(--near-black); transform:translateY(-1px); }
.home-whatsapp{
  background:transparent; color:var(--black); border:2px solid var(--black);
  font-size:15.5px; padding:9px 20px;
}
.home-whatsapp:hover{ background:rgba(0,0,0,.07); transform:translateY(-1px); }

/* Klantportaal: wit, zodat het duidelijk iets anders is dan contact
   opnemen — maar niet zwaarder dan het telefoonnummer. */
.home-portaal{
  background:var(--white); color:var(--black); border:2px solid var(--black);
  font-size:15.5px; padding:9px 20px;
}
.home-portaal:hover{ background:var(--gray-bg); transform:translateY(-1px); }

/* ---- Hero ---- */
.home-hero{ padding:46px 0 40px; }
/* De plaatsnamen in de H1: wel volwaardig onderdeel van de kop, maar
   rustiger gezet zodat de boodschap vooraan blijft staan. */
.h1-plaatsen{
  display:block; margin-top:10px;
  font-size:.45em; font-weight:700; line-height:1.35;
  letter-spacing:.2px; color:#3d3a2e;
}
@media (max-width:640px){ .h1-plaatsen{ font-size:.5em; } }
.home-hero h1{
  font-size:clamp(30px, 5.4vw, 54px); line-height:1.08; margin:0 0 18px;
  font-weight:900; letter-spacing:-.5px; max-width:15ch;
}
.home-hero p{
  font-size:clamp(15px, 1.9vw, 18px); max-width:62ch; margin:0 0 26px;
  color:rgba(0,0,0,.78);
}
.home-knoppen{ display:flex; gap:12px; flex-wrap:wrap; }
.knop-zwart, .knop-lijn{
  display:inline-block; text-decoration:none; font-weight:800; font-size:15px;
  padding:14px 26px; border-radius:999px; transition:transform .12s, background .12s;
}
.knop-zwart{ background:var(--black); color:var(--yellow); }
.knop-zwart:hover{ background:var(--near-black); transform:translateY(-1px); }
.knop-lijn{ border:2px solid var(--black); color:var(--black); }
.knop-lijn:hover{ background:rgba(0,0,0,.07); }
/* Zwarte knop met gele tekst. Staat hij op een zwart vlak, dan houdt de
   gele rand hem zichtbaar — anders valt de knop weg in de achtergrond. */
.knop-zwart-geel{
  display:inline-block; text-decoration:none;
  background:var(--black); color:var(--yellow);
  font-weight:900; font-size:15px; letter-spacing:.2px;
  padding:14px 26px; border-radius:999px;
  border:2px solid var(--yellow);
  transition:background .12s, transform .12s;
}
.knop-zwart-geel:hover{ background:var(--near-black); transform:translateY(-1px); }

/* ---- Lokale landingspagina's ---- */
.kruimelpad{
  font-size:13px; color:#3d3a2e; padding:14px 0 0;
}
.kruimelpad a{ color:var(--black); text-decoration:underline; }
.kruimelpad span{ opacity:.75; }

.plaats-wijken{ margin:34px 0 10px; }
.plaats-wijken h2{ margin:0 0 8px; font-size:clamp(20px,2.6vw,27px); }
.plaats-wijken p{ margin:0 0 16px; max-width:70ch; font-size:15px; }
.wijk-lijst{ display:flex; flex-wrap:wrap; gap:8px; }
.wijk-pil{
  background:var(--black); color:var(--yellow);
  font-size:13px; font-weight:700;
  padding:7px 14px; border-radius:999px;
}

.plaats-elders{ margin:38px 0 10px; }
.plaats-elders h2{ margin:0 0 14px; font-size:clamp(20px,2.6vw,27px); }
.plaats-links{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
a.plaats-link{
  display:block; background:var(--white); color:var(--black);
  border:2px solid var(--black); border-radius:12px;
  padding:11px 16px 13px; font-weight:800; font-size:14.5px;
  text-decoration:none; transition:background .12s, transform .12s;
}
a.plaats-link:hover{ background:var(--yellow); transform:translateY(-1px); }

/* De plaatsnaam is waar de bezoeker op zoekt; "Ramen wassen in" staat er
   klein boven. Die woorden zijn er voor zoekmachines, die de tekst in een
   link gebruiken om te bepalen waar de doelpagina over gaat. Ze wegdrukken
   met display:none zou dat voordeel juist tenietdoen — en dat is bovendien
   precies wat Google als verhulling aanmerkt. Dus gewoon zichtbaar, alleen
   klein. */
.plaats-boven{
  display:block; font-size:11px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:#6b6b70; margin-bottom:1px;
}
.plaats-naam{ display:block; font-size:17px; font-weight:900; }
a.plaats-link:hover .plaats-boven{ color:#4a4a4e; }

/* Werkgebied op de voorpagina */
.werkgebied{ margin:36px 0 8px; }
.werkgebied h2{ margin:0 0 8px; font-size:clamp(20px,2.6vw,27px); }
.werkgebied p{ margin:0 0 16px; max-width:70ch; font-size:15px; }

/* ---- Foto in volle breedte ---- */
.home-foto{
  position:relative; margin:8px 0 26px;
  border-radius:22px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}
.home-foto img{
  display:block; width:100%; height:auto;
  /* Vaste verhouding zodat de pagina niet verspringt tijdens het laden. */
  aspect-ratio:32 / 15; object-fit:cover;
}
.home-foto figcaption{
  position:absolute; left:0; bottom:0;
  background:var(--black); color:var(--yellow);
  font-size:12px; font-weight:900; letter-spacing:2px; text-transform:uppercase;
  padding:9px 16px; border-radius:0 14px 0 0;
}
@media (max-width:640px){
  .home-foto{ border-radius:16px; }
  .home-foto figcaption{ font-size:10.5px; padding:7px 12px; letter-spacing:1.5px; }
}

/* ---- Zwart uitgelicht blok ---- */
.home-uitgelicht{
  background:var(--black); color:var(--white);
  border-radius:22px; padding:34px; margin:8px 0 46px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:center;
}
.home-uitgelicht .label{
  display:inline-block; background:var(--yellow); color:var(--black);
  font-size:11.5px; font-weight:900; letter-spacing:2px;
  padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.home-uitgelicht h2{ margin:0 0 12px; font-size:clamp(22px,3vw,32px); line-height:1.15; }
.home-uitgelicht p{ margin:0 0 20px; color:#d6d6d8; font-size:15px; }
.home-uitgelicht ul{
  list-style:none; padding:0; margin:0 0 22px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px 18px;
}
.home-uitgelicht li{ font-size:14.5px; padding-left:24px; position:relative; }
.home-uitgelicht li::before{
  content:"✓"; position:absolute; left:0; color:var(--yellow); font-weight:900;
}
.qr-kaart{
  background:var(--white); border-radius:16px; padding:18px; text-align:center;
  color:var(--black);
}
.qr-kaart img{ display:block; margin:0 auto; }

/* ---- Diensten als knoppen ---- */
.home-kop{ font-size:clamp(22px,3vw,30px); margin:0 0 8px; font-weight:900; }
.home-introtekst{ color:rgba(0,0,0,.7); max-width:62ch; margin:0 0 26px; }
.diensten{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; margin-bottom:52px;
}
/* De hele kaart is klikbaar; hij gedraagt zich als een knop. */
a.dienst{
  background:var(--white); border-radius:18px; padding:26px 24px;
  border:2px solid rgba(0,0,0,.08); text-decoration:none; color:var(--text);
  display:flex; flex-direction:column;
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
a.dienst:hover, a.dienst:focus-visible{
  transform:translateY(-3px); border-color:var(--black);
  box-shadow:0 12px 26px rgba(0,0,0,.16); outline:none;
}
.dienst .ikoon{
  width:44px; height:44px; border-radius:12px; background:var(--yellow);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.dienst h3{ margin:0 0 8px; font-size:17px; color:var(--black); }
.dienst p{ margin:0 0 16px; font-size:14px; color:var(--muted); }
.dienst .pijl{
  margin-top:auto; font-size:14px; font-weight:800; color:var(--black);
  display:inline-flex; align-items:center; gap:7px;
}
a.dienst:hover .pijl{ gap:11px; }
.dienst .pijl span{ transition:margin .12s; }

/* ---- Dienstenpagina ---- */
.dienst-hero{
  display:grid; grid-template-columns:1.15fr 1fr; gap:34px; align-items:center;
  padding:34px 0 46px;
}
.dienst-hero h1{
  font-size:clamp(28px,4.6vw,46px); line-height:1.1; margin:0 0 16px; font-weight:900;
}
.dienst-hero .intro{ font-size:clamp(15px,1.9vw,18px); color:rgba(0,0,0,.78); margin:0 0 24px; }
.dienst-terug{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:800; font-size:14px; color:rgba(0,0,0,.7); margin:14px 0 0;
}
.dienst-terug:hover{ color:var(--black); }

/* Fotokader. Laadt de foto niet, dan blijft het zwarte vlak staan —
   nooit een gebroken plaatje op een pagina die u aan klanten laat zien. */
.dienst-foto{
  border-radius:22px; overflow:hidden; background:var(--black);
  min-height:260px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}
.dienst-foto img{ width:100%; height:100%; object-fit:cover; display:block; min-height:260px; }
.dienst-foto .merk{
  color:var(--yellow); font-weight:900; letter-spacing:3px; font-size:13px; padding:30px;
  text-align:center;
}

/* Zonder foto blijft dit vlak zwart met het merk erin. Bewust een rustig
   blok en geen willekeurige stockfoto: bij dit soort werk is een neutraal
   vlak passender dan een plaatje dat de situatie moet uitbeelden. */
.dienst-foto-leeg{ flex-direction:column; gap:6px; padding:30px; }
.dienst-foto-leeg .merk{ padding:0; font-size:20px; letter-spacing:5px; }
.dienst-foto-leeg .merk-sub{
  margin:0; color:rgba(255,255,255,.62);
  font-size:11px; letter-spacing:2px; font-weight:700; text-align:center;
}

.blokken{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px; margin-bottom:46px;
}
.blok{ background:var(--white); border-radius:18px; padding:24px; border:2px solid rgba(0,0,0,.08); }
.blok h3{ margin:0 0 8px; font-size:16.5px; }
.blok p{ margin:0; font-size:14px; color:var(--muted); }

.stappen{ counter-reset:stap; display:grid; gap:14px; margin-bottom:46px; }
.stap{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(0,0,0,.05); border-radius:16px; padding:18px 20px;
}
.stap-nr{
  flex:0 0 34px; height:34px; border-radius:50%; background:var(--black);
  color:var(--yellow); font-weight:900; display:flex; align-items:center;
  justify-content:center; font-size:15px;
}
.stap h4{ margin:2px 0 4px; font-size:15.5px; }
.stap p{ margin:0; font-size:14px; color:rgba(0,0,0,.72); }

.cta-blok{
  background:var(--black); color:var(--white); border-radius:22px;
  padding:32px; margin:0 0 46px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.cta-blok .home-knoppen{ flex-shrink:0; }
.cta-blok h2{ margin:0 0 6px; font-size:clamp(20px,2.6vw,26px); }
.cta-blok p{ margin:0; color:#d6d6d8; font-size:15px; max-width:52ch; }

/* Knop met witte omlijning: voor op een zwarte ondergrond. */
.knop-wit-lijn{
  display:inline-block; text-decoration:none; font-weight:800; font-size:15px;
  padding:14px 26px; border-radius:999px;
  border:2px solid rgba(255,255,255,.55); color:var(--white);
  transition:background .12s, border-color .12s;
}
.knop-wit-lijn:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }

/* ---- Voet ---- */
.home-voet{
  border-top:2px solid rgba(0,0,0,.15); padding:18px 0 30px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:13px; color:rgba(0,0,0,.62);
}
.home-voet a{ color:inherit; }

@media (max-width:760px){
  .home-uitgelicht, .dienst-hero{ grid-template-columns:1fr; }
  .home-uitgelicht{ padding:26px; }
}
@media (max-width:520px){
  .home-tel{ font-size:15.5px; padding:10px 18px; }
}

/* ============================================================
   Klant- en medewerkerpagina's in de gele huisstijl.
   Zelfde kleur en logo als de voorpagina; de kaarten blijven wit,
   zodat formulieren en tabellen leesbaar blijven.
   ============================================================ */

body.geel{ background:var(--yellow); }

.geel-header{
  max-width:1100px;
  margin:0 auto;
  padding:20px 22px 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* De accountbalk zwart houden zou een streep door het gele vlak trekken;
   op geel werkt een doorzichtige balk met zwarte tekst beter. */
body.geel #account-bar{ background:transparent; }
body.geel .account-bar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:4px 22px 14px;
  color:var(--black);
  border-bottom:2px solid rgba(0,0,0,.15);
}
body.geel .account-bar-inner button{
  background:var(--black);
  color:var(--yellow);
  border:none;
  border-radius:999px;
  padding:6px 14px;
  font-weight:800;
  cursor:pointer;
}
body.geel .account-bar-inner button:hover{ background:var(--near-black); }
body.geel .account-bar-inner a{ color:var(--black) !important; }

/* Kaarten iets steviger neerzetten op een gekleurde ondergrond. */
body.geel .card,
body.geel .card-flat{ border:2px solid rgba(0,0,0,.08); }
body.geel .card-flat{ background:var(--white); }

/* Koppen buiten een kaart staan direct op het geel. */
body.geel .dash-header h2{ color:var(--black); }
body.geel .info-box{ background:rgba(255,255,255,.75); }

/* De smalle kolom van het klantportaal en de inlogschermen mag op geel
   wat breder, anders staat er een dun wit lint midden op een groot vlak. */
body.geel .page-narrow{ max-width:560px; padding-left:16px; padding-right:16px; }

/* Op mobiel schuift het logo naar links en blijft het klein genoeg. */
@media (max-width:520px){
  .geel-header{ padding:16px 16px 4px; }
  .geel-header .home-logo .naam{ font-size:23px; }
}