/* ============================================
   TENZIN VASTGOED — Projectportaal (PHP)
   Huisstijl: Montserrat · teal #1e5c50 · veel witruimte
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#e7efeb;
  font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#16332d;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
input,textarea,select,button{font-family:inherit;font-size:inherit}
input,textarea{outline:none}
img,svg{display:block}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
@keyframes tzfade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(30,92,80,0.18);border-radius:6px}
.tz-fade{animation:tzfade .3s ease}
.tz-fade-sm{animation:tzfade .2s ease}

.tz-in{width:100%;background:#f5f9f7;border:1px solid rgba(30,92,80,0.14);border-radius:9px;padding:11px 13px;font-size:14px;color:#16332d}
.tz-in:focus{border-color:#1e5c50}
.tz-in:focus-visible{border-color:#1e5c50;outline:2px solid #1e5c50;outline-offset:1px}
.tz-lbl{display:block;font-size:11px;font-weight:700;color:#5a786f;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.tz-primary{border:none;border-radius:9px;background:#1e5c50;color:#fff;font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:13px;cursor:pointer}
.tz-primary:hover{background:#2a7a6a}
.tz-ghost{border:1px solid rgba(30,92,80,0.16);background:#fff;color:#5a786f;border-radius:9px;font-weight:600;font-size:12px;padding:11px 16px;cursor:pointer}
.tz-ghost:hover{border-color:#1e5c50;color:#16332d}

/* dropdown toggling (server-rendered + lichte JS) */
.tz-menu{display:none}
.tz-menu.open{display:block}

/* Dienst-keuze tegels (robuust via :checked, geen fragiele JS) */
.tz-svc{position:relative;border-radius:9px;padding:10px 11px;cursor:pointer;display:flex;align-items:center;gap:9px;border:1px solid rgba(30,92,80,0.12);background:#fff}
.tz-svc input{position:absolute;opacity:0;width:1px;height:1px}
.tz-svc:has(input:checked){border-color:#1e5c50;background:rgba(42,122,106,0.06)}
.tz-svc:focus-within{outline:2px solid #1e5c50;outline-offset:2px}
.tz-svc__b{width:24px;height:24px;border-radius:6px;background:#eef4f1;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700;color:#1e5c50}
.tz-svc__n{flex:1;font-size:12.5px;font-weight:500;color:#33524a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tz-svc__c{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #9bb3ab;color:transparent}
.tz-svc:has(input:checked) .tz-svc__c{background:#1e5c50;border-color:#1e5c50;color:#fff}

/* Zichtbare focus-indicatie voor toetsenbordgebruikers (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid #1e5c50;
  outline-offset:2px;
  border-radius:6px;
}

/* Visueel verborgen, wel beschikbaar voor schermlezers */
.tz-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Responsief: hero-grid en kolommen inklappen op smalle schermen */
@media (max-width:640px){
  .tz-hero-grid{grid-template-columns:1fr!important}
  .tz-hero-aside{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}