:root {
      --zwart: #05090f;
      --donker: #0b1220;
      --blauw: #1257d9;
      --blauw-donker: #0d43ad;
      --blauw-licht: #4d8dff;
      --tekst: #101828;
      --grijs: #5b6675;
      --lijn: #e3e7ee;
      --vlak: #f5f6f8;
      --wit: #ffffff;
      --kop: Bahnschrift, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
    body {
      margin: 0; background: var(--wit); color: var(--tekst);
      font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
      font-size: 1rem; line-height: 1.6;
    }
    a { color: inherit; }
    a:focus-visible, button:focus-visible, label:focus-visible {
      outline: 3px solid var(--blauw-licht); outline-offset: 3px;
    }
    .wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
    .ico { width: 1.1rem; height: 1.1rem; flex: none; }

    /* Knoppen */
    .knop {
      display: inline-flex; align-items: center; gap: 0.6rem;
      padding: 0.85rem 1.5rem; border-radius: 4px; font-weight: 600;
      text-decoration: none; background: var(--blauw); color: #fff; border: 0;
    }
    .knop:hover { background: var(--blauw-donker); }
    .link-pijl { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 600; color: #fff; }
    .link-pijl:hover { text-decoration: underline; }

    /* Header */
    header.top { background: var(--zwart); color: #fff; position: sticky; top: 0; z-index: 20; }
    header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
    .merk { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: #fff; }
    .merk svg { width: 3rem; height: 2.8rem; flex: none; }
    .merk .naam { font-family: var(--kop); font-weight: 800; font-size: 1.35rem; line-height: 1.05; letter-spacing: 0.04em; padding-left: 0.9rem; border-left: 1px solid #ffffff55; }
    .merk .naam small { display: block; font-family: "Segoe UI", system-ui, sans-serif; font-weight: 500; font-size: 0.55rem; letter-spacing: 0.08em; color: var(--blauw-licht); margin-top: 0.3rem; line-height: 1.3; }
    nav.hoofd { display: flex; align-items: center; gap: 1.35rem; }
    nav.hoofd a { text-decoration: none; font-size: 0.95rem; font-weight: 500; }
    nav.hoofd a:hover { color: var(--blauw-licht); }
    nav.hoofd .chev { display: inline-block; width: 0.5rem; height: 0.5rem; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-2px); margin-left: 0.45rem; }
    .burger { display: none; background: none; border: 0; color: #fff; }

    /* Hero */
    .hero { background: var(--zwart); color: #fff; display: grid; grid-template-columns: 1fr 1fr; min-height: 30rem; overflow: hidden; }
    .hero-tekst { padding: 3.5rem 2rem 3.5rem max(1.25rem, calc((100vw - 72rem) / 2 + 1.25rem)); align-self: center; }
    .hero .eyebrow { font-size: 0.95rem; letter-spacing: 0.02em; margin: 0 0 1rem; text-transform: uppercase; }
    .hero h1 { font-family: var(--kop); font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: 0.01em; margin: 0 0 1.6rem; }
    .hero h1 b { color: var(--blauw-licht); }
    .hero p.intro { font-size: 1.1rem; max-width: 27rem; margin: 0 0 1.8rem; color: #e8ecf3; }
    .hero .acties { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
    .hero .vinkje { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: #cfd6e2; }
    .hero .vinkje svg { color: var(--blauw-licht); width: 1.2rem; height: 1.2rem; }

    .hero-beeld { position: relative; min-height: 22rem; background: radial-gradient(circle at 60% 40%, #16335f 0%, #0a1526 70%); }
    .hero-beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--zwart) 0%, transparent 28%); pointer-events: none; }
    .hero-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
    .hero-beeld .plaat { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1.5rem 2rem 1.5rem 4rem; }
    .plaat text { fill: #b9c6dc; font-family: "Segoe UI", system-ui, sans-serif; font-size: 12.5px; font-weight: 600; }
    .draad { fill: none; stroke: var(--blauw-licht); stroke-width: 2.5; stroke-linecap: round; }

    /* Diensten */
    section.blok { padding: 3.5rem 0; }
    h2.kop { font-size: clamp(1.5rem, 3vw, 1.9rem); text-align: center; margin: 0 0 0.5rem; line-height: 1.25; }
    .kop-sub { text-align: center; color: var(--grijs); margin: 0 auto 2.2rem; max-width: 38rem; }
    .kaarten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
    .kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: 1.5rem 1rem 1.4rem; text-align: center; box-shadow: 0 2px 8px #10182810; }
    .kaart .groot { width: 3rem; height: 3rem; color: var(--blauw); margin: 0 auto 0.8rem; display: block; }
    .kaart h3 { margin: 0 0 0.4rem; font-size: 1rem; }
    .kaart p { margin: 0; font-size: 0.85rem; color: var(--grijs); line-height: 1.5; }

    /* Toestellen */
    .toestellen { background: var(--donker); color: #fff; padding: 3rem 0; }
    .toestellen .kop-sub { color: #a9b7cc; }
    .tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .tegel { background: #121c30; border: 1px solid #22314d; border-radius: 6px; padding: 1.2rem 1rem 1rem; text-align: center; }
    .tegel svg { width: 100%; height: 6.5rem; display: block; margin-bottom: 0.8rem; }
    .tegel h3 { margin: 0 0 0.2rem; font-size: 0.98rem; }
    .tegel p { margin: 0; font-size: 0.85rem; color: #a9b7cc; }

    /* Waarom */
    .waarom { background: var(--zwart); color: #fff; padding: 2.6rem 0; }
    .waarom h2 { text-align: center; font-size: 1.4rem; margin: 0 0 1.8rem; }
    .redenen { display: grid; grid-template-columns: repeat(4, 1fr); }
    .reden { display: flex; gap: 0.8rem; padding: 0 1.5rem; border-left: 1px solid #ffffff26; }
    .reden:first-child { border-left: 0; padding-left: 0; }
    .reden svg { width: 1.6rem; height: 1.6rem; color: var(--blauw-licht); flex: none; margin-top: 0.15rem; }
    .reden h3 { margin: 0 0 0.3rem; font-size: 0.98rem; }
    .reden p { margin: 0; font-size: 0.86rem; color: #b8c2d3; line-height: 1.5; }

    /* Over ons */
    .over { background: var(--vlak); }
    .over .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: center; }
    .over h2 { margin: 0 0 0.8rem; font-size: 1.7rem; line-height: 1.25; }
    .over p { color: var(--grijs); margin: 0 0 0.9rem; }
    .over ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
    .over li { display: flex; gap: 0.7rem; align-items: flex-start; background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: 0.9rem 1rem; }
    .over li svg { color: var(--blauw); width: 1.4rem; height: 1.4rem; flex: none; }

    /* Werkwijze */
    .stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .stap { text-align: center; position: relative; padding: 0 0.5rem; }
    .stap .nr { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--blauw); color: #fff; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; }
    .stap .groot { width: 3rem; height: 3rem; color: var(--tekst); display: block; margin: 0 auto 0.4rem; }
    .stap h3 { margin: 0 0 0.3rem; font-size: 1rem; }
    .stap p { margin: 0; font-size: 0.88rem; color: var(--grijs); }
    .stap:not(:last-child)::after { content: ""; position: absolute; top: 2.8rem; right: -3.2rem; width: 5.4rem; border-top: 1px dashed #aab2c0; }

    /* Footer */
    footer { background: var(--zwart); color: #fff; padding: 2.5rem 0 1.2rem; }
    .voet { display: grid; grid-template-columns: 1.3fr 1.1fr 1.3fr 1.3fr; gap: 2rem; padding-bottom: 1.8rem; }
    footer h4 { margin: 0 0 0.8rem; font-size: 0.95rem; }
    footer ul { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; color: #cfd6e2; }
    footer li { padding: 0.15rem 0; }
    footer .cols2 { columns: 2; column-gap: 2rem; }
    footer .contact li { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
    footer .contact svg { width: 1rem; height: 1rem; color: #fff; }
    footer p { margin: 0 0 0.8rem; font-size: 0.88rem; color: #cfd6e2; }
    footer a { text-decoration: none; }
    footer a:hover { text-decoration: underline; }
    .onder { border-top: 1px solid #ffffff26; padding-top: 1rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; font-size: 0.85rem; color: #cfd6e2; }
    .social { display: flex; gap: 1rem; }
    .social a { font-weight: 800; }

    /* Tablet en telefoon */
    @media (max-width: 62rem) {
      .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .redenen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0; }
      .reden:nth-child(3) { border-left: 0; padding-left: 0; }
      .stappen { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
      .stap::after { display: none; }
      .voet { grid-template-columns: 1fr 1fr; }
      .tegels { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 52rem) {
      .burger { display: block; cursor: pointer; padding: 0.4rem; }
      .burger span, .burger span::before, .burger span::after { display: block; width: 1.6rem; height: 2px; background: #fff; position: relative; }
      .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
      .burger span::before { top: -7px; } .burger span::after { top: 7px; }
      nav.hoofd { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--zwart); flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.25rem 1.5rem; border-top: 1px solid #ffffff26; }
      nav.hoofd.menu-open { display: flex; }
      header.top .wrap { position: relative; }
      .merk .naam { font-size: 1.05rem; }
      .hero { grid-template-columns: 1fr; }
      .hero-tekst { padding: 2.5rem 1.25rem 2rem; }
      .hero-beeld { min-height: 18rem; }
      .hero-beeld::after { background: linear-gradient(180deg, var(--zwart) 0%, transparent 25%); }
      .hero-beeld .plaat { padding: 1rem 2rem; }
      .over .wrap { grid-template-columns: 1fr; }
    }
    @media (max-width: 34rem) {
      .kaarten { grid-template-columns: repeat(2, 1fr); }
      .redenen { grid-template-columns: 1fr; }
      .reden { border-left: 0; padding: 0; }
      .stappen { grid-template-columns: 1fr; }
      .voet { grid-template-columns: 1fr; }
      .tegels { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  
    /* Gedeelde navigatie en afzonderlijke pagina’s */
    nav.hoofd a[aria-current="page"] { color: var(--blauw-licht); text-decoration: underline; text-underline-offset: 0.4rem; }
    a.kaart { display: block; text-decoration: none; transition: border-color 150ms, box-shadow 150ms; }
    a.kaart:hover { border-color: var(--blauw); box-shadow: 0 4px 14px #10182818; }
    .kaart-link { display: block; margin-top: 1rem; color: var(--blauw); font-size: 0.85rem; font-weight: 600; }
    .pagina-acties { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
    .over .pagina-acties { justify-content: flex-start; }
    .pagina-kop { background: var(--zwart); color: #fff; padding: 2.5rem 0 3rem; }
    .kruimel { margin: 0 0 1.4rem; font-size: 0.9rem; color: #b8c2d3; }
    .kruimel a { text-decoration: none; }
    .kruimel a:hover { text-decoration: underline; }
    .kruimel span { margin: 0 0.6rem; }
    .pagina-kop h1 { font-family: var(--kop); font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; margin: 0 0 1rem; }
    .pagina-kop .intro { color: #e8ecf3; max-width: 44rem; margin: 0; font-size: 1.1rem; }
    .detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; }
    .detail-tekst h2, .contact-kaart h2 { margin: 0 0 1rem; font-size: 1.6rem; line-height: 1.25; }
    .detail-tekst p { color: var(--grijs); }
    .detail-punten { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 1.5rem 0; }
    .detail-punten li { display: flex; align-items: flex-start; gap: 0.7rem; }
    .detail-punten svg { color: var(--blauw); width: 1.4rem; height: 1.4rem; flex: none; margin-top: 0.15rem; }
    .detail-beeld { display: grid; place-items: center; min-height: 16rem; background: var(--donker); border-radius: 6px; padding: 2rem; }
    .detail-beeld svg { width: 100%; max-width: 18rem; height: 12rem; color: var(--blauw-licht); }
    .pagina-cta { background: var(--vlak); padding: 2.5rem 0; text-align: center; }
    .pagina-cta h2 { margin: 0 0 0.6rem; font-size: 1.5rem; }
    .pagina-cta p { color: var(--grijs); margin: 0 0 1.3rem; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .contact-kaart { padding: 2rem; border: 1px solid var(--lijn); border-radius: 6px; }
    .contact-kaart p { color: var(--grijs); }
    .contact-adres { overflow-wrap: anywhere; color: var(--blauw); font-weight: 600; }
    @media (max-width: 52rem) {
      .detail-grid, .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .detail-beeld { min-height: 12rem; }
      .pagina-kop { padding: 2rem 0 2.5rem; }
      .contact-kaart { padding: 1.5rem; }
    }
    @media (prefers-reduced-motion: reduce) { a.kaart { transition: none; } }

/* CVE-feed, op elke pagina direct voor de footer */
.cve-feed { background: var(--vlak); border-top: 1px solid var(--lijn); padding: 3rem 0; }
.cve-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.cve-eyebrow { color: var(--blauw); margin: 0 0 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 700; }
.cve-heading h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.25; margin: 0 0 0.6rem; }
.cve-intro { max-width: 47rem; color: var(--grijs); margin: 0; font-size: 0.95rem; }
.cve-rss { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; color: var(--blauw); font-weight: 600; text-decoration: none; border: 1px solid var(--lijn); padding: 0.65rem 1rem; border-radius: 4px; background: #fff; }
.cve-rss:hover { border-color: var(--blauw); text-decoration: underline; }
.cve-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 1rem; align-items: end; }
.cve-field { min-width: 0; }
.cve-field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; }
.cve-field input, .cve-field select { width: 100%; min-width: 0; height: 2.8rem; background: #fff; color: var(--tekst); border: 1px solid #b9c2cf; border-radius: 4px; padding: 0.6rem 0.8rem; font: inherit; font-size: 0.9rem; }
.cve-field input:focus-visible, .cve-field select:focus-visible { outline: 3px solid var(--blauw-licht); outline-offset: 2px; }
.cve-button { min-height: 2.8rem; padding: 0.6rem 1rem; background: #fff; color: var(--blauw); border: 1px solid var(--blauw); border-radius: 4px; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.cve-button:hover:not(:disabled) { background: var(--blauw); color: #fff; }
.cve-button:disabled, .cve-field input:disabled, .cve-field select:disabled { opacity: 0.55; cursor: not-allowed; }
.cve-status { color: var(--grijs); font-size: 0.85rem; margin: 1rem 0 0.3rem; }
.cve-count { margin: 0 0 1rem; font-size: 0.9rem; font-weight: 600; }
.cve-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.cve-item { min-width: 0; background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: 1.2rem; }
.cve-item header, .cve-item-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.cve-id { color: var(--blauw); font-size: 0.95rem; font-weight: 700; text-decoration: none; }
.cve-id:hover { text-decoration: underline; }
.cve-date { font-size: 0.76rem; color: var(--grijs); white-space: nowrap; }
.cve-product { font-size: 0.82rem; color: var(--grijs); margin: 0.65rem 0 0.35rem; overflow-wrap: anywhere; }
.cve-name { font-size: 0.95rem; line-height: 1.45; margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.cve-badge { display: inline-block; background: #fff0e6; color: #92400e; border: 1px solid #ffd3ad; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.73rem; font-weight: 600; margin-bottom: 0.7rem; }
.cve-details { font-size: 0.85rem; color: var(--grijs); overflow-wrap: anywhere; }
.cve-details summary { color: var(--blauw); cursor: pointer; font-weight: 600; }
.cve-details summary:focus-visible { outline: 3px solid var(--blauw-licht); outline-offset: 3px; }
.cve-details p { margin: 0.7rem 0 0; }
.cve-details strong { color: var(--tekst); }
.cve-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; font-size: 0.85rem; }
.cve-source { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--lijn); font-size: 0.78rem; color: var(--grijs); }
.cve-source p { margin: 0.25rem 0; }
.cve-source a { color: var(--blauw); }
.cve-feed [hidden] { display: none !important; }
@media (max-width: 62rem) { .cve-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 52rem) {
  .cve-heading { flex-direction: column; gap: 1rem; }
  .cve-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .cve-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
  .cve-feed { padding: 2rem 0; }
  .cve-list { grid-template-columns: minmax(0, 1fr); }
  .cve-pagination { gap: 0.6rem; }
  .cve-pagination .cve-button { padding-left: 0.75rem; padding-right: 0.75rem; }
}

.cve-empty { grid-column: 1 / -1; padding: 1.2rem; border: 1px solid var(--lijn); border-radius: 6px; background: #fff; color: var(--grijs); }
.cve-status[data-state='error'], .cve-status[data-state='stale'] { color: #92400e; }

/* Contactformulier in een modaal venster */
.contact-modal { width: min(42rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: 10px; color: var(--tekst); background: #fff; box-shadow: 0 20px 80px #00000040; opacity: 0; transform: translateY(14px); transition: opacity 220ms ease, transform 220ms ease; }
.contact-modal::backdrop { background: #05090fb8; opacity: 0; transition: opacity 220ms ease; }
.contact-modal.is-visible { opacity: 1; transform: translateY(0); }
.contact-modal.is-visible::backdrop { opacity: 1; }
.contact-modal-body { position: relative; padding: 2rem; }
.contact-close { position: absolute; right: 1rem; top: 1rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--lijn); border-radius: 4px; background: #fff; color: var(--grijs); cursor: pointer; }
.contact-close:hover { background: var(--vlak); color: var(--tekst); }
.contact-close svg { width: 1.15rem; height: 1.15rem; }
.contact-eyebrow { margin: 0 3rem 0.4rem 0; color: var(--blauw); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.contact-modal h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.25; margin: 0 2.8rem 0.65rem 0; }
#contact-modal-intro { color: var(--grijs); margin: 0 0 1.3rem; font-size: 0.95rem; }
.contact-required { color: var(--grijs); font-size: 0.78rem; margin: 0 0 0.8rem; }
.contact-privacy { color: var(--grijs); font-size: 0.85rem; margin: 1rem 0 0; }
.contact-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.contact-form-wide { grid-column: 1 / -1; }
.contact-form-field { min-width: 0; }
.contact-form-field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem; }
.contact-form-field input, .contact-form-field textarea { width: 100%; min-width: 0; background: #fff; color: var(--tekst); border: 1px solid #b9c2cf; border-radius: 4px; padding: 0.65rem 0.8rem; font: inherit; font-size: 1rem; }
.contact-form-field textarea { resize: vertical; min-height: 7rem; }
.contact-form-field input:focus-visible, .contact-form-field textarea:focus-visible { outline: 3px solid var(--blauw-licht); outline-offset: 2px; }
.contact-form-field [aria-invalid="true"] { border-color: #b42318; }
.contact-trap { display: none; }
.contact-form-status { font-size: 0.9rem; margin: 1rem 0; color: var(--grijs); overflow-wrap: anywhere; }
.contact-form-status:empty { margin: 0; }
.contact-form-status[data-state="error"], .contact-modal[data-contact-state="error"] .contact-form-status { color: #b42318; }
.contact-form-status[data-state="success"], .contact-modal[data-contact-state="success"] .contact-form-status { color: #067647; }
.contact-form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.contact-form-actions .knop { font: inherit; font-weight: 600; cursor: pointer; }
.contact-form-actions .knop:disabled { opacity: 0.55; cursor: not-allowed; }
.contact-cancel { border: 0; background: transparent; color: var(--grijs); padding: 0.6rem 0; font: inherit; cursor: pointer; }
.contact-cancel:hover { color: var(--tekst); text-decoration: underline; }
@media (max-width: 34rem) { .contact-modal { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); border-radius: 6px; } .contact-modal-body { padding: 1.3rem; } .contact-form-grid { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; } .contact-modal h2 { margin-right: 2rem; } }
@media (prefers-reduced-motion: reduce) { .contact-modal, .contact-modal::backdrop { transition: none; transform: none; } }

/* Cookiemelding onderaan de website */
body.cookie-notice-open { padding-bottom: var(--cookie-notice-space, 12rem); }
.cookie-notice { position: fixed; inset: auto 0 0; z-index: 100; background: #25282e; color: #fff; border-top: 1px solid #ffffff33; padding: 0.8rem 0; max-height: 70dvh; overflow-y: auto; }
.cookie-notice[hidden] { display: none !important; }
.cookie-notice .wrap { max-width: 94rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.cookie-notice-message { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: start; gap: 0.8rem; }
.cookie-info-icon { width: 1.5rem; height: 1.5rem; margin-top: 0.3rem; }
.cookie-notice-copy { min-width: 0; }
.cookie-notice p { margin: 0; color: #fff; font-size: 0.8rem; line-height: 1.35; }
.cookie-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cookie-notice-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.25rem; margin-top: 0.8rem; font-size: 0.8rem; line-height: 1.35; }
.cookie-text-link { border: 0; padding: 0; background: transparent; color: #d0b1ff; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 0.12rem; cursor: pointer; }
.cookie-text-link:hover { color: #fff; }
.cookie-notice-actions { display: flex; align-items: center; gap: 0.75rem; }
.cookie-action { display: inline-flex; justify-content: center; align-items: center; min-width: 9.4rem; min-height: 2.75rem; border: 1px solid #e1e3e6; border-radius: 0; padding: 0.45rem 1rem; background: #34383e; color: #fff; font: inherit; font-size: 0.88rem; line-height: 1.3; cursor: pointer; }
.cookie-action:hover { background: #474c55; }
.cookie-notice [data-cookie-status] { color: #ffc8c2; margin-top: 0.5rem; }
.cookie-link { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.2rem; cursor: pointer; }
.cookie-link:hover { color: #fff; }
.cookie-settings { width: min(42rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); border: 1px solid #ffffff33; border-radius: 6px; padding: 2rem; overflow-y: auto; background: #25282e; color: #fff; }
.cookie-settings::backdrop { background: #05090faa; }
.cookie-settings h2 { margin: 0 2rem 0.75rem 0; font-size: 1.5rem; line-height: 1.25; }
.cookie-settings h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.cookie-settings p { margin: 0; color: #e0e3e9; font-size: 0.88rem; line-height: 1.5; }
.cookie-settings-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; background: transparent; color: #fff; border: 0; cursor: pointer; }
.cookie-settings-close svg { width: 1.25rem; height: 1.25rem; }
.cookie-category { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; margin-top: 1rem; border: 1px solid #ffffff33; }
.cookie-category > div { min-width: 0; flex: 1; }
.cookie-always-on { flex: none; color: #b7d1ff; font-size: 0.75rem; line-height: 1.5; }
.cookie-optional { cursor: pointer; }
.cookie-optional input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--blauw-licht); }
.cookie-optional strong { display: block; font-size: 0.95rem; line-height: 1.4; }
.cookie-optional small { display: block; margin-top: 0.4rem; color: #e0e3e9; font-size: 0.88rem; line-height: 1.5; }
.cookie-optional input:focus-visible { outline: 3px solid var(--blauw-licht); outline-offset: 3px; }
.cookie-information { margin-top: 1.25rem; scroll-margin-top: 1rem; }
.cookie-settings-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.cookie-settings .cookie-settings-status { margin-top: 1rem; color: #ffc8c2; }
@media (max-width: 68rem) {
  .cookie-notice .wrap { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .cookie-notice-actions { padding-left: 2.3rem; }
}
@media (max-width: 34rem) {
  .cookie-notice .wrap { padding-left: 1rem; padding-right: 1rem; }
  .cookie-notice-message { gap: 0.6rem; }
  .cookie-notice-actions { display: grid; grid-template-columns: 1fr 1fr; padding-left: 0; }
  .cookie-action { min-width: 0; }
  .cookie-notice-actions [data-cookie-manage] { grid-column: 1 / -1; }
  .cookie-settings { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); padding: 1.25rem; }
  .cookie-category { gap: 0.75rem; padding: 0.85rem; }
  .cookie-category:not(.cookie-optional) { flex-direction: column; gap: 0.5rem; }
  .cookie-settings-actions { display: grid; grid-template-columns: 1fr; }
}

/* Diensten als uitklapmenu */
.nav-diensten { position: relative; }
.diensten-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0; background: transparent; border: 0; color: inherit; font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; }
.diensten-toggle:hover, .diensten-toggle[aria-expanded="true"], .diensten-actief .diensten-toggle { color: var(--blauw-licht); }
nav.hoofd .diensten-toggle .chev { margin: 0 0.2rem 0 0.3rem; border-color: currentColor; transition: transform 200ms ease; }
nav.hoofd .diensten-toggle[aria-expanded="true"] .chev { transform: rotate(225deg) translate(-1px, -1px); }
.diensten-dropdown { position: absolute; top: 100%; left: -0.85rem; z-index: 1; width: 15rem; padding: 0.45rem; border: 1px solid #ffffff26; border-radius: 6px; background: var(--donker); box-shadow: 0 12px 28px #05090f40; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.nav-diensten.diensten-open .diensten-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.diensten-links { list-style: none; margin: 0; padding: 0; }
nav.hoofd .diensten-links a { display: inline-flex; width: fit-content; max-width: 100%; vertical-align: top; align-items: center; min-height: 2.75rem; padding: 0.55rem 0.85rem; border-radius: 3px; }
nav.hoofd .diensten-links a:hover, nav.hoofd .diensten-links a:focus-visible { background: #ffffff0d; color: var(--blauw-licht); }
.diensten-links li:last-child { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid #ffffff26; }
@media (max-width: 52rem) {
  nav.hoofd { max-height: calc(100dvh - 5rem); overflow-y: auto; }
  .nav-diensten { width: 100%; }
  .diensten-toggle { width: 100%; justify-content: space-between; }
  .diensten-dropdown { position: static; display: grid; grid-template-rows: 0fr; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s linear 200ms; }
  .diensten-links { min-height: 0; overflow: hidden; }
  .nav-diensten.diensten-open .diensten-dropdown { grid-template-rows: 1fr; }
  nav.hoofd .diensten-links a { padding-left: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .diensten-dropdown, nav.hoofd .diensten-toggle .chev { transition: none; }
}

/* Consult uitgelicht onder het dienstenoverzicht */
.kaarten .kaart-consult-uitgelicht { grid-column: 1 / -1; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1.5rem; text-align: left; }
.kaart-consult-uitgelicht .groot, .kaart-consult-uitgelicht .kaart-link { margin: 0; }
@media (max-width: 34rem) {
  .kaarten .kaart-consult-uitgelicht { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.8rem; padding: 1.2rem; }
  .kaart-consult-uitgelicht .groot { width: 2.5rem; height: 2.5rem; }
  .kaart-consult-uitgelicht .kaart-link { grid-column: 2; }
}

/* TikTok-profiel en video’s */
.footer-tiktok { margin-left: auto; }
.tiktok-page [hidden] { display: none !important; }
.tiktok-follow { margin-top: 1.4rem; }
.tiktok-intro { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.tiktok-intro h2 { margin: 0 0 0.4rem; font-size: 1.7rem; }
.tiktok-intro p { color: var(--grijs); margin: 0; }
.tiktok-intro > a { color: var(--blauw); text-decoration: none; font-weight: 600; }
.tiktok-consent { display: grid; justify-items: center; gap: 1rem; padding: 2.5rem 1.25rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); text-align: center; }
.tiktok-consent .groot { width: 3rem; height: 3rem; color: var(--blauw); }
.tiktok-consent h3, .tiktok-consent p { margin: 0; }
.tiktok-consent p { color: var(--grijs); max-width: 32rem; }
.tiktok-consent button { font: inherit; font-weight: 600; cursor: pointer; }
.tiktok-consent > a { color: var(--blauw); font-size: 0.9rem; }
.tiktok-profile { max-width: 45rem; margin: 0 auto; min-height: 10rem; }
.tiktok-profile-handle { color: var(--blauw); }
.tiktok-profile .tiktok-consent > a.knop { color: #fff; font-size: inherit; }
.tiktok-profile blockquote { margin: 0 auto; width: 100%; }
.tiktok-status { color: var(--grijs); margin: 1rem 0 0; text-align: center; font-size: 0.9rem; }
.tiktok-featured { background: var(--vlak); }
.tiktok-recent { border-top: 1px solid var(--lijn); }
.tiktok-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.tiktok-video-card { min-width: 0; border: 1px solid var(--lijn); border-radius: 6px; overflow: hidden; background: #fff; }
.tiktok-player { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; background: var(--donker); }
.tiktok-video-copy { padding: 1.2rem; }
.tiktok-video-copy h3 { margin: 0 0 0.6rem; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.tiktok-video-copy p { margin: 0 0 0.8rem; color: var(--grijs); font-size: 0.88rem; overflow-wrap: anywhere; }
.tiktok-video-copy a { color: var(--blauw); text-decoration: none; font-weight: 600; font-size: 0.88rem; }
.tiktok-video-cover { display: grid; place-items: center; min-height: 12rem; padding: 1.5rem; background: var(--donker); color: #fff; text-align: center; }
.tiktok-video-cover button { border: 1px solid #ffffff55; border-radius: 4px; padding: 0.8rem 1rem; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.tiktok-empty { text-align: center; color: var(--grijs); }
.tiktok-empty p { margin-top: 0; }
@media (max-width: 52rem) { .tiktok-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .tiktok-video-grid { grid-template-columns: minmax(0, 1fr); } .tiktok-consent { padding: 1.8rem 1rem; } }

/* Layoutkeuze in de footer en lokale navigatie-iconen. */
.hero-beta { display: none; }
header.top .merk { flex-shrink: 0; }
header.top .wrap { gap: 1rem; max-width: 96rem; }
nav.hoofd { margin-left: auto; gap: 1rem; }
nav.hoofd > a { white-space: nowrap; }
.header-tools { display: flex; align-items: center; flex-shrink: 0; gap: 0.6rem; }
.layout-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border: 0; border-radius: 0; padding: 0.25rem 0; background: transparent; color: inherit; font: inherit; line-height: 1.4; text-decoration: underline; text-underline-offset: 0.2rem; cursor: pointer; white-space: nowrap; }
.layout-toggle[hidden] { display: none; }
.layout-toggle:hover { color: #fff; }
.header-tools .burger { flex: none; min-width: 2.75rem; min-height: 2.75rem; }
.tiktok-logo, .contact-logo, .social-logo { display: block; width: 1.5rem; height: 1.5rem; flex: none; }
nav.hoofd .nav-tiktok, nav.hoofd .nav-contact, nav.hoofd .nav-social-placeholder, .footer-tiktok { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: none; padding: 0.5rem; border-radius: 50%; background: #fff; }
nav.hoofd .nav-tiktok:hover, nav.hoofd .nav-contact:hover, .footer-tiktok:hover { background: #e7efff; }
.tiktok-consent img.tiktok-logo { width: 3rem; height: 3rem; }
@media (max-width: 86rem) {
  .header-tools { display: flex; }
  header.top .wrap { position: relative; }
  .burger { display: block; cursor: pointer; padding: 0.6rem; }
  .burger span, .burger span::before, .burger span::after { display: block; width: 1.6rem; height: 2px; position: relative; background: #fff; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
  .burger span::before { top: -7px; }
  .burger span::after { top: 7px; }
  nav.hoofd { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-left: 0; padding: 1.2rem 1.25rem 1.5rem; background: var(--zwart); flex-direction: column; align-items: flex-start; gap: 1rem; max-height: calc(100dvh - 5.7rem); overflow-y: auto; }
  nav.hoofd.menu-open { display: flex; }
  .nav-diensten { width: 100%; }
  .diensten-toggle { width: 100%; justify-content: space-between; }
  .diensten-dropdown { position: static; display: grid; grid-template-rows: 0fr; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s linear 200ms; }
  .diensten-links { min-height: 0; overflow: hidden; }
  .nav-diensten.diensten-open .diensten-dropdown { grid-template-rows: 1fr; }
  nav.hoofd .diensten-links a { padding-left: 1rem; }
}
@media (max-width: 34rem) {
  header.top .wrap { padding-left: 1rem; padding-right: 1rem; gap: 0.5rem; }
  header.top .merk { gap: 0.5rem; }
  header.top .merk svg { width: 2.45rem; height: 2.3rem; }
  header.top .merk .naam { font-size: 0.95rem; padding-left: 0.55rem; }
  header.top .merk .naam small { font-size: 0.43rem; letter-spacing: 0.01em; }
  .header-tools { gap: 0.3rem; }
}
@media (max-width: 26rem) {
  header.top .wrap { gap: 0.35rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  header.top .merk svg { width: 2.15rem; height: 2.05rem; }
  header.top .merk .naam { font-size: 0.85rem; padding-left: 0.45rem; }
  header.top .merk .naam small { font-size: 0.4rem; }
  .header-tools { gap: 0.2rem; }
}
@media (prefers-reduced-motion: reduce) { .diensten-dropdown { transition: none; } }

/* De link naar de andere layout staat altijd rechtsonder in de footer. */
.onder { align-items: center; }
.footer-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.75rem; max-width: 100%; margin-left: auto; }
.footer-tools .footer-tiktok { margin-left: 0; }

/* Sociale media en e-mail vormen samen een compacte groep in het menu. */
nav.hoofd .nav-icons { display: flex; align-items: center; gap: 0.375rem; }
nav.hoofd .nav-social-placeholder { cursor: default; }

/* De taalkeuze blijft ook naast het mobiele menu direct bereikbaar. */
.language-menu { position: relative; flex: none; font-size: 0.85rem; }
.language-menu summary { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; min-width: 4.4rem; padding: 0.5rem 0.6rem; border: 1px solid #ffffff55; border-radius: 1.5rem; background: #ffffff0d; color: inherit; list-style: none; cursor: pointer; font-weight: 600; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary svg { width: 1.1rem; height: 1.1rem; }
.language-menu summary:focus-visible { outline: 3px solid var(--blauw-licht); outline-offset: 3px; }
.language-menu ul { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; width: 11rem; list-style: none; margin: 0; padding: 0.4rem; border: 1px solid #ffffff33; border-radius: 0.5rem; background: var(--donker); box-shadow: 0 10px 30px #0003; }
.language-menu li { margin: 0; }
.language-menu a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.8rem; border-radius: 0.3rem; color: #fff; text-decoration: none; white-space: nowrap; }
.language-menu a:hover, .language-menu a[aria-current="page"] { background: #ffffff15; color: var(--blauw-licht); }
html[data-layout="beta"] .language-menu summary { background: #f1f3f7; border-color: #d9dfea; color: var(--beta-navy); }
html[data-layout="beta"] .language-menu ul { background: #fff; border-color: var(--lijn); }
html[data-layout="beta"] .language-menu a { color: var(--beta-navy); }
html[data-layout="beta"] .language-menu a:hover, html[data-layout="beta"] .language-menu a[aria-current="page"] { background: #edf3fd; color: var(--blauw); }
@media (max-width: 26rem) { .language-menu summary { min-width: 3.8rem; gap: 0.25rem; padding: 0.5rem; font-size: 0.75rem; } }

/* Kleine diensticonen: bestaande breedte, regelhoogte en padding blijven gelijk. */
nav.hoofd .diensten-links a { gap: 0.5rem; }
.dienst-menu-icon { display: block; width: 1rem; height: 1rem; flex: 0 0 1rem; }

/* Ook langere vertaalde dienstnamen passen binnen hun bestaande kaart. */
.kaart { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

/* Compact language flags */
.language-menu summary{width:4.4rem;min-width:4.4rem;height:2.75rem;box-sizing:border-box;gap:.3rem;font-size:.75rem}.language-menu .language-flag{display:block;width:18px;height:12px;object-fit:cover;flex:0 0 18px;border-radius:1px;box-shadow:0 0 0 1px #0002}.language-menu a{gap:.5rem}@media(max-width:26rem){.language-menu summary{width:3.8rem;min-width:3.8rem;font-size:.7rem;gap:.25rem}.language-menu summary .language-flag{width:16px;flex-basis:16px}}

/* Support submenu */
.nav-support .diensten-links li:last-child{margin-top:0;padding-top:0;border-top:0}

.header-login{display:inline-flex;gap:.3rem;align-items:center;justify-content:center;min-height:2.75rem;padding:.4rem .55rem;border:1px solid #ffffff55;border-radius:1.5rem;color:inherit;text-decoration:none;font-size:.8rem;font-weight:600;white-space:nowrap}.header-login svg{width:18px;height:18px;flex:none}html[data-layout="beta"] .header-login{border-color:#d9dfea;background:#f1f3f7;color:var(--beta-navy)}.header-login:focus-visible{outline:3px solid #1257d9;outline-offset:3px}@media(max-width:34rem){.header-login{width:2.5rem;padding:.4rem}.header-login span{display:none}}