/* ==========================================================================
   DECLAER — universele header
   Overgezet uit Declaer-onze-diensten.html, blok "UNIVERSELE HEADER".
   Dat is de actuele gedeelde component; Declaer-header.html is een oudere
   versie zonder tagline en met een ander dropdownpatroon.
   ========================================================================== */

/* Egaal wit, zodat de balk loskomt van de lichtblauwe hero eronder.
   Doorschijnend warmwit liep visueel over in de hero en zweefde daardoor niet. */
.dhdr{position:sticky;top:0;z-index:70;background:var(--paper-2);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 3%,transparent),
             0 6px 18px -14px color-mix(in srgb,var(--ink) 22%,transparent);
  transition:box-shadow .2s ease;}
.dhdr.scrolled{box-shadow:0 10px 30px -14px color-mix(in srgb,var(--ink) 34%,transparent);}

.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--accent);color:var(--paper-2);
      padding:10px 16px;font-family:var(--display);font-weight:600;text-transform:uppercase;}
.skip:focus{left:8px;top:8px;}

.dhdr-main{display:flex;align-items:center;gap:22px;height:66px;}
.dhdr.scrolled .dhdr-main{height:56px;}

.dbrand{display:flex;align-items:center;gap:11px;color:var(--ink);flex:none;text-decoration:none;
        transition:transform .2s ease;transform-origin:left center;}
.dhdr.scrolled .dbrand{transform:scale(.9);}
.dbrand .tick{width:22px;height:22px;color:var(--accent-deep);flex:none;}
.dbrand-tx{display:flex;flex-direction:column;gap:2px;line-height:1;}
.dbrand-name{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.02em;}
.dbrand-tag{font-family:var(--body);font-style:italic;font-weight:400;font-size:10.5px;
            letter-spacing:.005em;color:var(--muted);white-space:nowrap;}
@media(max-width:600px){.dbrand-tag{display:none;}}

.dnav{display:flex;align-items:center;gap:4px;margin-left:14px;}
.dnav > a,.dd-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);padding:10px 12px;
  border-radius:8px;transition:color .15s ease,background .15s ease;}
.dnav > a:hover,.dd-btn:hover,.dd.open .dd-btn{color:var(--ink);
  background:color-mix(in srgb,var(--ink) 5%,transparent);}
.dnav .dd-btn.is-current,.dnav > a.is-current{color:var(--ink);}
.dnav [aria-current="page"]{color:var(--accent-deep);}
.dd-btn .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
.dd.open .dd-btn .chev{transform:rotate(180deg);}

.dd{position:static;}
.dd-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--sh-hover);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:5;}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none;}
.dd-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:30px;padding:30px 0 34px;}
.dd-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--faint);margin-bottom:12px;}
.dd-col a{display:block;min-height:24px;padding:8px 10px;margin:0 -10px;border-radius:8px;
  font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink);
  transition:background .14s ease,color .14s ease;}
.dd-col a small{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;
  color:var(--muted);margin-top:1px;letter-spacing:0;}
.dd-col a:hover{background:var(--accent-soft);color:var(--accent-deep);}

.dd-promo{background:var(--ink);color:var(--on-ink);border-radius:14px;padding:22px;
  display:flex;flex-direction:column;gap:10px;}
.dd-cta-t{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--paper-2);margin:0;}
.dd-promo p{margin:0;color:var(--muted-on-ink);font-size:13.5px;}
.dd-promo a{margin-top:auto;color:var(--accent-2);font-family:var(--display);font-weight:600;
  font-size:14px;display:inline-flex;gap:7px;align-items:center;}
.dd-all{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:14px;}
.dd-all a{color:var(--accent-deep);font-family:var(--display);font-weight:600;font-size:14.5px;
  display:inline-flex;gap:8px;align-items:center;}

.dd-mini{position:relative;}
.dd-mini .dd-panel{left:0;right:auto;width:max-content;min-width:238px;border:1px solid var(--line);
  border-radius:0 0 14px 14px;box-shadow:var(--sh-hover);}
.ddm-list{padding:12px;}
.ddm-list a{display:block;padding:10px 12px;border-radius:9px;font-family:var(--display);
  font-weight:600;font-size:15.5px;color:var(--ink);transition:background .14s ease,color .14s ease;}
.ddm-list a small{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;
  color:var(--muted);margin-top:1px;letter-spacing:0;}
.ddm-list a:hover{background:var(--accent-soft);color:var(--accent-deep);}

/* rechtercluster */
.dhdr-r{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none;}
.dhdr-r .tel{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;}
.dhdr-r .tel svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;}
.dbtn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;
  font-size:14.5px;padding:11px 19px;border:1.5px solid var(--accent-deep);background:var(--accent-deep);
  color:var(--paper-2);cursor:pointer;box-shadow:var(--sh-btn);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;}
.dbtn:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-2px);
  box-shadow:var(--sh-btn-hover);}
.dbtn .a{transition:transform .15s ease;}
.dbtn:hover .a{transform:translateX(4px);}

.dlang{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.03em;color:var(--faint);}
.dlang .globe{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.6;margin-right:2px;}
.dlang a,.dlang .cur,.dlang .soon{padding:4px 5px;border-radius:5px;color:var(--faint);
  transition:color .14s ease,background .14s ease;}
.dlang [aria-current="true"]{color:var(--ink);font-weight:700;}
.dlang .soon{opacity:.55;cursor:default;}
.dlang a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);}
.dlang .sep{color:var(--line-2);}

/* burger + mobiel menu */
.dburger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line-2);border-radius:9px;
  padding:9px 12px;gap:8px;align-items:center;cursor:pointer;font-family:var(--display);font-weight:600;
  font-size:14px;text-transform:uppercase;color:var(--ink);}
.dburger .bars{width:18px;height:12px;position:relative;display:inline-block;}
.dburger .bars::before,.dburger .bars::after,.dburger .bars i{content:"";position:absolute;left:0;right:0;
  height:2px;background:currentColor;border-radius:2px;}
.dburger .bars::before{top:0;}
.dburger .bars i{top:5px;}
.dburger .bars::after{bottom:0;}

.dmenu{display:none;border-top:1px solid var(--line);background:var(--paper);
  max-height:calc(100dvh - 67px);overflow-y:auto;}
.dmenu.open{display:block;}
.dmenu .wrap{padding:8px 0 22px;}
.dmenu > .wrap > a,.dmenu-dd > button{display:flex;justify-content:space-between;align-items:center;
  width:100%;background:none;border:0;cursor:pointer;padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:18px;text-transform:uppercase;color:var(--ink);}
.dmenu-dd > button .chev{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
.dmenu-dd.open > button .chev{transform:rotate(180deg);}
.dmenu-sub{display:none;padding:6px 0 14px;}
.dmenu-dd.open .dmenu-sub{display:block;}
.dmenu a,.dmenu-sub a{min-height:24px;display:flex;align-items:center;}
.dmenu-sub .sub-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:12px 0 4px;}
.dmenu-sub a{display:block;padding:9px 0 9px 2px;font-family:var(--display);font-weight:600;
  font-size:15.5px;color:var(--muted);}
.dmenu-sub a:hover{color:var(--ink);}
.dmenu .dbtn{margin-top:18px;width:100%;justify-content:center;}

@media(max-width:1040px){
  .dnav,.dhdr-r .tel,.dhdr-r .dbtn{display:none;}
  .dburger{display:inline-flex;}
  .dhdr-r{gap:12px;}
  .dlang a{padding:8px 7px;}
}
@media(min-width:1041px){.dmenu{display:none !important;}}

@media(prefers-reduced-motion:reduce){
  .dd-panel,.dd-btn .chev,.dmenu-dd > button .chev,.dbtn,.dbtn .a,.dhdr-main,.dbrand{transition:none;}
}

/* ==========================================================================
   Afwijkende homepage-header (.hdr)
   Losse balk met ankernavigatie. Zie INSTALLATIE.md: dit wijkt bewust af van
   de gedeelde component en staat alleen op de voorpagina.
   ========================================================================== */

.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.hdr-in{display:flex;align-items:center;gap:24px;height:64px;}
.hdr .brand{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.02em;
  display:flex;align-items:center;gap:10px;color:var(--ink);}
.hdr .brand .tick{width:22px;height:22px;color:var(--accent-deep);}
.hdr .nav{display:flex;gap:26px;margin-left:26px;}
.hdr .nav a{font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);
  transition:color .15s ease;padding-block:8px;}
.hdr .nav a:hover{color:var(--ink);}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:18px;}
.hdr-r .txtlink{color:var(--ink);}
.hdr .btn{padding:10px 18px;font-size:14.5px;}
.menu-btn{display:none;align-items:center;gap:8px;margin-left:auto;background:none;
  border:1.5px solid var(--line-2);padding:9px 13px;cursor:pointer;font-family:var(--display);
  font-weight:600;font-size:14px;text-transform:uppercase;color:var(--ink);}
.menu-btn .bars{width:18px;height:12px;position:relative;display:inline-block;}
.menu-btn .bars::before,.menu-btn .bars::after,.menu-btn .bars i{content:"";position:absolute;
  left:0;right:0;height:2px;background:currentColor;}
.menu-btn .bars::before{top:0;}
.menu-btn .bars i{top:5px;}
.menu-btn .bars::after{bottom:0;}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);}
.mnav.open{display:block;}
.mnav .wrap{padding:6px 0 20px;}
.mnav a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--display);
  font-weight:600;font-size:18px;text-transform:uppercase;color:var(--ink);}
.mnav .btn{margin-top:18px;width:100%;justify-content:center;}

@media(max-width:940px){
  .hdr .nav,.hdr-r{display:none;}
  .menu-btn{display:inline-flex;}
}
@media(min-width:941px){.mnav{display:none !important;}}
.dbrand img {
  width: 200px;
}

@media(max-width:500px){
  .hdr .nav,.hdr-r{display:none;}
  .menu-btn{display:inline-flex;}
  .dbrand img {
    width: 100px;
  }
}
.home .dc-rating.section--flush-top--wrap {
  margin-bottom: -110px;
}


a.hero-textlink {
  align-items: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 4px;
  transition: color .15s ease;
}

form br {
  display: none !important;
}


/* ==========================================================================
   Blok: contactformulier
   Overgezet uit Declaer-contact.html.

   Vier velden in één kolom, bewust: elk extra veld kost gemiddeld vier procent
   conversie, en een verplicht telefoonnummer is in zakelijke formulieren de
   grootste afhaker. Adres, telefoon en mail staan er zichtbaar naast en niet
   erachter verstopt.
   ========================================================================== */

.cgrid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(26px,3.6vw,52px);align-items:start;}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;gap:32px;}}

/* ---------- het formulier ---------- */
.cform{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.8);padding:clamp(24px,2.6vw,34px);}
.cform h2{font-size:clamp(23px,2.3vw,29px);text-transform:uppercase;letter-spacing:-.018em;line-height:1.02;}
.cform .fintro{color:var(--muted);font-size:15.5px;margin-top:10px;}

.fields{margin-top:24px;display:flex;flex-direction:column;gap:18px;}
.f label{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;
  letter-spacing:.005em;margin-bottom:7px;}
.f label .opt{font-family:var(--body);font-weight:400;font-size:13px;color:var(--faint);letter-spacing:0;}

/* Contact Form 7 wikkelt elk veld in een inline span. Zonder deze regel klopt
   de breedte van de invoervelden niet zodra de plugin de opmaak overneemt. */
.f .wpcf7-form-control-wrap{display:block;}

.f input,.f textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line-2);border-radius:10px;padding:12px 14px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;}
.f textarea{min-height:118px;resize:vertical;line-height:1.55;}
.f input:hover,.f textarea:hover{border-color:var(--muted);}
.f input:focus,.f textarea:focus{outline:none;background:var(--paper-2);border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);}
.f .hint{margin-top:7px;font-size:13px;color:var(--faint);}

.cform .btn,.cform .wpcf7-submit{margin-top:24px;width:100%;justify-content:center;}

/* De risicoregel hoort direct onder de knop: daar zit de laatste twijfel. */
.fnote{margin-top:14px;font-size:14px;color:var(--muted);text-align:center;}
.fnote b{color:var(--ink);font-weight:600;}

/* ---------- meldingen van Contact Form 7 ----------
   De plugin zet zelf een tweede klasse op deze regel, afhankelijk van de
   uitkomst. Beide varianten staan hieronder. */
.wpcf7-response-output{margin:18px 0 0;padding:14px 16px;border-radius:10px;font-size:14.5px;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  color:var(--accent-deep);display:none;}
.wpcf7-response-output.on,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{display:block;}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7-response-output.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink);}
.wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:13px;color:var(--err-ink);}
.f input.wpcf7-not-valid,.f textarea.wpcf7-not-valid{border-color:var(--err-ink);}
.wpcf7-spinner{display:none;}

/* ---------- directe routes ---------- */
.cdirect{display:flex;flex-direction:column;gap:14px;}
.dcard2{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-card);
  padding:20px 22px;display:flex;gap:16px;align-items:flex-start;
  transition:transform .16s ease,box-shadow .16s ease;}
.dcard2:hover{transform:translateY(-2px);box-shadow:var(--sh-hover);}
.dcard2 .ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);flex:none;
  display:grid;place-items:center;}
/* De iconen zijn lijntekeningen: stroke krijgt de accentkleur, fill blijft
   leeg. Zonder de fill:none vult de browser het pad zwart. */
.dcard2 .ic svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.dcard2 .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.dcard2 .v{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.012em;margin-top:5px;line-height:1.2;}
.dcard2 .v a{color:var(--ink);display:inline-flex;align-items:center;min-height:26px;}
.dcard2:hover .v a{color:var(--accent-deep);}
.dcard2 .m{color:var(--muted);font-size:13.5px;margin-top:5px;}
.dcard2 .m a{color:var(--accent-deep);}
.dcard2 .m a:hover{text-decoration:underline;}

/* ---------- wegwijzer ----------
   Stuurt bezoekers met een andere vraag meteen naar het juiste adres, in
   plaats van via het algemene formulier. */
.cnext{margin-top:8px;border-top:1px solid var(--line);padding-top:22px;}
.cnext .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.croute-l{margin:14px 0 0;}
.croute-l dt{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.006em;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--line);}
.croute-l dt:first-child{padding-top:0;margin-top:0;border-top:0;}
.croute-l dd{margin:5px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6;}
.croute-l dd a{color:var(--accent-deep);}
.croute-l dd a:hover{text-decoration:underline;}

/* ---------- melding voor de redacteur ---------- */
.dc-leeg{background:var(--accent-soft);border:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:10px;padding:16px 18px;color:var(--accent-deep);font-size:14.5px;}