/* TOKENS */

:root {
    --black: #000000;
    --gold: #f6d451;
    --avdb-text: #f4f3f0;
    --avdb-muted: rgba(255, 255, 255, 0.44);
    --avdb-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --avdb-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --avdb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --avdb-pill: 999px;
    --nav-marge: 28px;

    /* Centrale layouttokens */
    --site-content-max: 1200px;
    --site-gutter: clamp(18px, 5%, 64px);
    --site-content-width: min(calc(100% - (2 * var(--site-gutter))), var(--site-content-max));
    --touch-target: 44px;

    /* Gedeelde effecten */
    --glas: blur(18px) saturate(140%);
    --glas-zacht: blur(18px) saturate(125%);
    --glans: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
    --paneel-schaduw: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 36px 70px -42px rgba(0, 0, 0, 0.95);
}

/* BASIS */

html {
    background-color: var(--black);
    background-image: linear-gradient(180deg, #101013 0%, #0a0a0c 28%, #050506 62%, var(--black) 100%);
    background-attachment: fixed;
}

body {
    position: relative;
    overflow-wrap: break-word;
    color: white;
    font-family: Georgia, "Times New Roman", serif;
    transition: opacity 0.08s ease;
}

body.page-leaving { opacity: 0.92; }

* { margin: 0; padding: 0; box-sizing: border-box; }

a { text-decoration: none; color: inherit; }

img, video, canvas { display: block; max-width: 100%; height: auto; }

svg { max-width: 100%; }

button, input, select, textarea { max-width: 100%; font: inherit; }

/* TOEGANKELIJKHEID */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 9999;
    padding: 10px 16px;
    background: #111114;
    border: 1px solid var(--gold);
    border-radius: var(--avdb-pill);
    font-family: var(--avdb-font-sans), sans-serif;
    font-size: 13px;
    color: var(--gold);
    transform: translate(-50%, calc(-100% - 20px));
    transition: transform 0.2s var(--avdb-ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

.Websites:focus-visible,
.AI-assistents:focus-visible,
.over-ons:focus-visible,
.Contact:focus-visible,
.navbar-logo a:focus-visible,
.footer-logo:focus-visible,
.footer-legal-link:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
    border-radius: 3px;
}

/* ACHTERGROND */

/* Laag 1 - gouden bloem rechtsboven, koele veeg linksonder */

html::before {
    content: "";
    position: fixed;
    inset: -20%;
    background-image:
        radial-gradient(closest-side circle at 74% 20%,
            rgba(246, 212, 81, 0.30) 0%, rgba(246, 212, 81, 0.09) 42%, transparent 70%),
        radial-gradient(closest-side circle at 16% 84%,
            rgba(150, 180, 235, 0.16) 0%, rgba(150, 180, 235, 0.04) 44%, transparent 70%);
    filter: blur(80px);
    animation: adem 90s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes adem {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-4%, 3%, 0) scale(1.12); }
}

/* Laag 2 - alleen de hoeken iets dieper, licht blijft licht */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(120% 95% at 50% 40%,
        transparent 52%, rgba(0, 0, 0, 0.32) 88%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Laag 3 - fijne korrel */

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

/* NAVBAR */

.Menu-Section {
    position: sticky;
    top: 0;
    padding-top: var(--nav-marge);
    z-index: 50;
    pointer-events: none;
}

.navbar {
    position: relative;
    width: fit-content;
    max-width: 92%;
    height: 46px;
    margin: 0 auto;
    padding: 4px 12px;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 28px;
    background-color: rgba(18, 18, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 23px;
    backdrop-filter: var(--glas);
    -webkit-backdrop-filter: var(--glas);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    font-family: var(--avdb-font-sans), sans-serif;
    transition: transform 0.45s var(--avdb-ease), border-color 0.35s ease-in-out;
    will-change: transform;
}

.navbar:hover { border: 1px solid rgba(255, 255, 255, 0.35); }

/* Weggeschoven bij naar beneden scrollen */

body.nav-verborgen .navbar {
    transform: translateY(calc(-100% - var(--nav-marge) - 10px));
}

/* Glans op de bovenrand */

.navbar::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

/* Logo + bedrijfsnaam */

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

.navbar-logo img { width: auto; height: 25px; display: block; }

.navbar-logo a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #f2f2f2;
    white-space: nowrap;
}

/* Navigatielinks + mobiele disclosure */

/* Op desktop gedragen de links zich weer als directe kinderen van de pill.
   Daardoor zijn afstanden en verhoudingen gelijk aan de oorspronkelijke navbar. */
.nav-links { display: contents; }

.nav-toggle {
    display: none !important;
    width: 46px;
    height: 42px;
    padding: 0;
    place-items: center;
    background-color: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.nav-toggle:hover {
    background-color: rgba(255, 255, 255, 0.055);
    border-color: rgba(246, 212, 81, 0.22);
}

.nav-toggle-icon {
    position: relative;
    width: 18px;
    height: 14px;
    display: block;
}

.nav-toggle-icon span,
.nav-toggle-icon::before {
    position: absolute;
    right: 0;
    height: 1px;
    background-color: currentColor;
    transform-origin: center;
    transition: top 0.22s var(--avdb-ease), width 0.22s var(--avdb-ease), transform 0.22s var(--avdb-ease), opacity 0.16s ease;
}

.nav-toggle-icon::before {
    content: "";
    top: 6.5px;
    width: 11px;
}

.nav-toggle-icon span:first-child { top: 2px; width: 18px; }
.nav-toggle-icon span:last-child { top: 11px; width: 15px; }

.nav-toggle[aria-expanded="true"] {
    border-color: rgba(246, 212, 81, 0.28);
    color: var(--gold);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { opacity: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:first-child,
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:last-child {
    top: 6.5px;
    width: 18px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:last-child { transform: rotate(-45deg); }

.nav-toggle:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 3px;
}

/* NAVIGATIE */

.Websites,
.AI-assistents,
.over-ons {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.2s ease;
}

/* Gouden lijn */

.Websites::after,
.AI-assistents::after,
.over-ons::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 1px;
    background-color: var(--gold);
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

/* Hover */

.Websites:hover,
.AI-assistents:hover,
.over-ons:hover { color: white; }

.Websites:hover::after,
.AI-assistents:hover::after,
.over-ons:hover::after { width: 65%; }

/* CONTACT */

.Contact {
    padding: 6px 15px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.92);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.Contact:hover { color: var(--gold); border-color: rgba(246, 212, 81, 0.35); }

/* GEDEELDE KOPPENSCHAAL */

/* Gouden punt */

.accent-dot { color: var(--gold); text-shadow: 0 0 24px rgba(246, 212, 81, 0.45); }

/* Goud accent (overige pagina's) */

.goud { position: relative; color: #d8bb5a; }

.goud::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #d8bb5a, rgba(216, 187, 90, 0));
}

.routes-head h2,
.showcase-heading,
.pricing-heading h2,
.werkwijze-intro h2 {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: var(--avdb-text);
}

/* GEDEELDE OPSOMMINGEN */

.route-punten,
.price-features {
    list-style: none;
    display: grid;
}

.route-punten { margin-top: 20px; gap: 9px; }
.price-features { margin-top: 24px; gap: 10px; }

.route-punten li,
.price-features li {
    position: relative;
    padding-left: 16px;
    font-weight: 300;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.48);
}

.route-punten li { font-size: 12.5px; }
.price-features li { font-size: 12px; }

.route-punten li::before,
.price-features li::before {
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 4px;
    background-color: rgba(246, 212, 81, 0.76);
    border-radius: 50%;
}

.route-punten li::before { top: 0.6em; }
.price-features li::before { top: 0.62em; }

/* GEDEELDE GLAZEN PANELEN */

.showcase-card,
.pricing-panel {
    position: relative;
    overflow: hidden;
    background-color: rgba(18, 18, 20, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: var(--glas-zacht);
    -webkit-backdrop-filter: var(--glas-zacht);
    box-shadow: var(--paneel-schaduw);
}

.showcase-card::before,
.pricing-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: var(--glans);
}

.showcase-card::before { z-index: 1; }
.pricing-panel::before { pointer-events: none; }

/* GEDEELDE GOUDEN CTA */

.pricing-cta,
.slot-cta,
.website-cta {
    position: relative;
    min-height: var(--touch-target);
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 30px;
    background-color: transparent;
    border: 1px solid rgba(246, 212, 81, 0.55);
    border-radius: var(--avdb-pill);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--gold);
    overflow: hidden;
    transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.slot-cta { white-space: nowrap; }

.pricing-cta::before,
.slot-cta::before,
.website-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s var(--avdb-ease);
    z-index: -1;
}

.pricing-cta span,
.slot-cta span,
.website-cta span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.pricing-cta:hover,
.slot-cta:hover,
.website-cta:hover {
    color: #0c0c0c;
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -18px rgba(246, 212, 81, 0.75);
}

.pricing-cta:hover::before,
.slot-cta:hover::before,
.website-cta:hover::before { transform: scaleX(1); }

.pricing-cta:hover span,
.slot-cta:hover span,
.website-cta:hover span { transform: translateX(4px); }

.pricing-cta:focus-visible,
.slot-cta:focus-visible,
.website-cta:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 5px;
    border-radius: var(--avdb-pill);
}

/* FOOTER */

.site-footer {
    position: relative;
    z-index: 2;

    margin-top: 8px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

    font-family: var(--avdb-font-sans), sans-serif;
}

.footer-inhoud {
    position: relative;

    width: var(--site-content-width);
    min-height: 168px;

    margin: 0 auto;
    padding: 24px 0 22px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);

    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 2px;

    align-content: center;
    align-items: center;
}

/* De bestaande wrappers blijven in de HTML staan,
   maar hun inhoud doet rechtstreeks mee in het hoofdgrid. */
.footer-primary,
.footer-meta {
    display: contents;
}

.footer-regel {
    width: 100%;
}

/* SOCIALS — lager en dichter bij contact */

.footer-socials-top {
    position: absolute;

    top: 42px;
    left: 50%;

    transform: translateX(-50%);

    margin: 0;
}

.footer-socials {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.social {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(246, 212, 81, 0.30);
    border-radius: 50%;

    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.social img {
    width: 19px;
    height: 19px;

    display: block;
    object-fit: contain;

    opacity: 0.62;

    transition: opacity 0.25s ease;
}

.social:hover {
    border-color: var(--gold);
    transform: translateY(-2px);

    box-shadow:
        0 12px 26px -14px
        rgba(246, 212, 81, 0.70);
}

.social:hover img {
    opacity: 1;
}

.social:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 3px;
}

/* LINKS — AVDB-BLOK — Exact verticaal gecentreerd als één visuele groep */

.footer-logo {
    grid-column: 1;
    grid-row: 1;

    justify-self: start;
    align-self: end;

    width: min(100%, 340px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    text-align: center;
}

.footer-logo img {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: block;
    object-fit: contain;
}

.footer-naam {
    display: block;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.3px;

    color: rgba(242, 242, 242, 0.88);

    transition: color 0.2s ease;
}

.footer-logo:hover .footer-naam {
    color: #fff;
}

.footer-logo:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
    border-radius: 3px;
}

.footer-meta > span:first-child {
    grid-column: 1;
    grid-row: 2;

    justify-self: start;
    align-self: center;

    width: min(100%, 340px);

    margin-top: 4px;

    text-align: center;

    font-size: 11.5px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.2px;

    color: rgba(255, 255, 255, 0.52);
}

.footer-signatuur {
    grid-column: 1;
    grid-row: 3;

    justify-self: start;
    align-self: start;

    width: min(100%, 340px);

    margin-top: 1px;

    text-align: center;

    font-size: 11.5px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.2px;

    color: rgba(255, 255, 255, 0.40);
}

/* MIDDEN — CONTACT — Direct onder de socials */

.footer-contact {
    grid-column: 2;
    grid-row: 1 / 4;

    justify-self: center;
    align-self: center;

    transform: translateY(30px);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 9px;

    text-align: center;

    font-size: 11.5px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.2px;

    color: rgba(255, 255, 255, 0.54);
}

.footer-contact a {
    transition: color 0.2s ease;
}

.footer-contact a:hover {
    color: var(--gold);
}

.footer-contact a:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
    border-radius: 2px;
}

.footer-contact span {
    color: rgba(255, 255, 255, 0.18);
}

/* RECHTS — PRIVACY & COOKIES */

.footer-legal {
    grid-column: 3;
    grid-row: 1 / 4;

    justify-self: end;
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 9px;
}

.footer-legal-link {
    min-height: 38px;
    padding: 9px 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(246, 212, 81, 0.24);
    border-radius: var(--avdb-pill);

    background: rgba(246, 212, 81, 0.018);

    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.35px;

    color: rgba(255, 255, 255, 0.62);

    transition:
        color 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
}

.footer-legal-link:hover {
    color: var(--gold);
    border-color: rgba(246, 212, 81, 0.58);
    background: rgba(246, 212, 81, 0.045);
    transform: translateY(-1px);
}

.footer-legal-link:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
}

/* FOOTER RESPONSIVE */

/* TABLET — de contactregel (telefoon/mail) kan hier op twee regels
   uitvallen; extra ruimte eronder voorkomt overlap met de socials. */
@media (max-width: 1180px) and (min-width: 761px) {

    .footer-contact {
        transform: translateY(58px);
    }
}

@media (max-width: 860px) {

    .footer-inhoud {
        column-gap: 18px;
    }

    .footer-logo,
    .footer-meta > span:first-child,
    .footer-signatuur {
        width: min(100%, 280px);
    }

    .footer-contact {
        max-width: 230px;
    }
}

@media (max-width: 760px) {

    .site-footer {
        margin-top: 6px;
    }

    .footer-inhoud {
        min-height: 0;
        padding: 28px 0 30px;

        grid-template-columns: 1fr;
        grid-template-rows: auto;

        row-gap: 0;

        justify-items: center;
        text-align: center;
    }

    .footer-socials-top {
        position: static;

        grid-column: 1;
        grid-row: 1;

        transform: none;

        margin-bottom: 10px;
    }

    .footer-contact {
        grid-column: 1;
        grid-row: 2;

        width: 100%;
        max-width: none;

        margin-bottom: 20px;

        transform: none;

        justify-self: center;
        justify-content: center;
    }

    .footer-logo {
        grid-column: 1;
        grid-row: 3;

        width: 100%;
        max-width: 340px;

        justify-self: center;
        align-self: center;
    }

    .footer-meta > span:first-child {
        grid-column: 1;
        grid-row: 4;

        width: 100%;
        max-width: 340px;

        justify-self: center;
        align-self: center;

        margin-top: 4px;
    }

    .footer-signatuur {
        grid-column: 1;
        grid-row: 5;

        width: 100%;
        max-width: 340px;

        justify-self: center;
        align-self: center;

        margin-bottom: 16px;
    }

    .footer-legal {
        grid-column: 1;
        grid-row: 6;

        width: 100%;

        justify-self: center;
        justify-content: center;
    }
}

@media (max-width: 430px) {

    .footer-contact {
        flex-direction: column;
        gap: 4px;
    }

    .footer-contact span {
        display: none;
    }
}

@media (pointer: coarse) {

    .social,
    .footer-contact a,
    .footer-legal-link {
        min-height: var(--touch-target);
    }

    .social {
        width: var(--touch-target);
        height: var(--touch-target);
    }

    .footer-contact a {
        display: inline-flex;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .social,
    .footer-legal-link {
        transition: none;
    }
}

/* PRIVACYLINKS IN FORMULIER */

.contact-privacy a,
.contact-captcha-uitleg a {
    color: rgba(246, 212, 81, 0.82);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.contact-privacy a:hover,
.contact-captcha-uitleg a:hover {
    color: var(--gold);
}

/* AI-TRANSPARANTIE IN CIPHER */

.chat-privacy-note {
    margin: 0 14px 10px;
    padding: 10px 12px;
    border: 1px solid rgba(246, 212, 81, 0.14);
    border-radius: 10px;
    background: rgba(246, 212, 81, 0.035);
    font-family: var(--avdb-font-sans), sans-serif;
    font-size: 10.5px;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.54);
}

.chat-privacy-note strong {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
}

.chat-privacy-note a {
    margin-left: 3px;
    color: rgba(246, 212, 81, 0.82);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-privacy-note a:hover { color: var(--gold); }

/* CONTACTFORMULIER — Eén formulier, één vormgeving, één beveiliging. Elke pagina met een .contact-form krijgt exact hetzelfde onderdeel; de sectie eromheen blijft per pagina in de eigen stylesheet. Het formulier regelt ook zijn eigen breekpunten, zodat er in responsive.css niets meer over dit onderdeel hoeft te staan. */

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    /* Elk veld is precies zo hoog als zijn eigen inhoud. Zonder deze
       regel rekt een veld uit tot de hoogte van de rij, en wordt het
       invoervak groter zodra er in de kolom ernaast een toelichting
       onder een veld staat. */

    align-items: start;

    padding: clamp(24px, 3vw, 34px);
    background-color: rgba(18, 18, 20, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 18px;
    box-shadow: var(--paneel-schaduw);
    font-family: var(--avdb-font-sans), sans-serif;
}

/* De honeypot. Een bot vult hem in, een bezoeker ziet hem niet
   en een schermlezer slaat hem over. */

.contact-botcheck {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* VELDEN */

.contact-field {
    min-width: 0;
    display: grid;
    gap: 8px;

    /* Staat er in de rij ernaast een toelichting onder een veld, dan
       wordt die rij hoger. Zonder deze regel rekt het invoervak in de
       andere kolom mee en staat het formulier scheef. */

    align-content: start;
}

.contact-field-full { grid-column: 1 / -1; }

.contact-field label {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1px;
    color: rgba(255, 255, 255, 0.66);
}

.contact-field label span {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.28);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    padding: 12px 13px;
    background-color: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    outline: none;
    font-family: var(--avdb-font-sans), sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    caret-color: var(--gold);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-field select {
    min-height: 47px;
    cursor: pointer;
    color-scheme: dark;
}

.contact-field select option {
    background-color: #111113;
    color: rgba(255, 255, 255, 0.9);
}

.contact-field textarea {
    min-height: 148px;
    resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(246, 212, 81, 0.6);
    box-shadow: 0 0 0 3px rgba(246, 212, 81, 0.07);
}

/* Een korte toelichting onder een veld. Blijft rustig, tot het veld
   door de controle valt; dan trekt hij wel aandacht. */

.contact-field-hint {
    font-size: 10.5px;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.34);
    transition: color 0.2s ease;
}

/* Een veld dat door de controle is gevallen, wordt pas rood
   nadat de bezoeker het echt geprobeerd heeft. */

.contact-field input[aria-invalid="true"],
.contact-field select[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] {
    border-color: rgba(255, 145, 145, 0.55);
}

.contact-field input[aria-invalid="true"] ~ .contact-field-hint {
    color: rgba(255, 185, 185, 0.72);
}

/* CAPTCHA — hCaptcha levert een vaste widget van 303px breed. Op smalle schermen schalen we hem, in plaats van het formulier te laten uitlopen. Het blok houdt zijn eigen hoogte vast, zodat de layout niet verspringt zodra de widget geladen is. */

.contact-captcha {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
}

.contact-captcha-frame {
    min-height: 78px;
}

.contact-captcha iframe {
    border-radius: 8px;
}

.contact-captcha-uitleg {
    font-size: 10.5px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.34);
}

/* VERSTUREN EN TERUGKOPPELING */

.contact-submit {
    justify-self: start;
    cursor: pointer;
    font-family: var(--avdb-font-sans), sans-serif;
}

.contact-submit:disabled {
    cursor: wait;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

.contact-submit:disabled::before { transform: scaleX(0); }

.contact-privacy {
    align-self: center;
    max-width: 42ch;
    font-size: 10.5px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.52);
}

.contact-status {
    min-height: 1.6em;
    grid-column: 1 / -1;
    font-size: 11.5px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.48);
}

.contact-status[data-state="success"] { color: rgba(246, 212, 81, 0.82); }

.contact-status[data-state="error"] { color: rgba(255, 185, 185, 0.82); }

/* BREEKPUNTEN VAN HET FORMULIER — 980 blijft tweekoloms; pas vanaf 640 gaat alles onder elkaar, precies zoals het formulier zich nu al gedroeg. */

@media (max-width: 640px) {
    .contact-form {
        width: min(100%, 560px);
        margin-inline: auto;
        grid-template-columns: minmax(0, 1fr);
        padding: 22px 20px;
    }

    .contact-field { grid-column: 1 / -1; }
    .contact-submit { justify-self: stretch; }

    /* max-width begrenst het blokje, maar zonder margin-inline:auto
       bleef het (ondanks text-align:center) links binnen het formulier
       hangen in plaats van echt te centreren. */
    .contact-privacy { max-width: 38ch; margin-inline: auto; text-align: center; }

    .contact-captcha { justify-items: center; }
    .contact-captcha-uitleg { text-align: center; }
}

@media (max-width: 430px) {
    .contact-form { padding: 20px 18px; }

    .contact-submit {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        text-align: center;
    }

    .contact-captcha-frame {
        min-height: 72px;
        transform: scale(0.92);
        transform-origin: top center;
    }
}

@media (max-width: 360px) {
    .contact-captcha-frame {
        min-height: 66px;
        transform: scale(0.84);
    }
}

@media (pointer: coarse) {
    .contact-submit { min-height: var(--touch-target); }
}

@media (prefers-reduced-motion: reduce) {
    .contact-submit,
    .contact-field input,
    .contact-field select,
    .contact-field textarea,
    .contact-field-hint { transition: none; }
}

/* TAALKEUZE — Eén rustige NL/EN-knop rechtsboven in de navigatiebalk, en een eenmalige suggestie voor bezoekers met een andere browsertaal. De knop staat bewust buiten .nav-links. Daardoor blijft hij op telefoons zichtbaar naast de menuknop, en blijft de selector .nav-toggle + .nav-links in responsive.css intact. */

/* DE KNOP — Een smalle schakelaar rechtsboven op de pagina, los van de navigatiebalk. Je ziet welke taal je nu leest en waar je heen gaat: NL | EN        (op een Nederlandse pagina) EN | NL        (op een Engelse pagina) De taal die je nu leest komt uit CSS. De knop draagt het lang-attribuut van de taal waar hij naartoe gaat, dus de andere is altijd de taal van de pagina zelf. Zo hoeft er in de HTML niets dubbel te staan. */

.lang-switch {
    position: fixed;
    z-index: 51;

    top: calc(var(--nav-marge) + 6px);
    right: max(var(--site-gutter), env(safe-area-inset-right));

    height: 34px;
    padding: 0 13px;

    display: inline-flex;
    align-items: center;

    background-color: rgba(18, 18, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: var(--avdb-pill);

    backdrop-filter: var(--glas);
    -webkit-backdrop-filter: var(--glas);

    box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.9);

    font-family: var(--avdb-font-mono), monospace;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.5px;

    color: rgba(255, 255, 255, 0.42);

    transition: color 0.22s ease, border-color 0.22s ease,
                background-color 0.22s ease, opacity 0.25s ease, transform 0.45s var(--avdb-ease);
}

/* De taal die je nu leest staat vooraan en is de heldere van de twee.
   De andere is stiller en kleurt goud zodra je erover gaat. */

.lang-switch::before {
    margin-right: 9px;
    padding-right: 9px;
    border-right: 1px solid rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.9);
    transition: border-color 0.22s ease;
}

.lang-switch[lang="en"]::before { content: "NL"; }
.lang-switch[lang="nl"]::before { content: "EN"; }

.lang-switch:hover {
    color: var(--gold);
    border-color: rgba(246, 212, 81, 0.32);
    background-color: rgba(22, 20, 16, 0.78);
}

.lang-switch:hover::before {
    border-right-color: rgba(246, 212, 81, 0.22);
}

.lang-switch:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
}

/* Schuift mee weg zodra de navigatiebalk wegschuift, zodat er tijdens
   het lezen niets over de pagina blijft zweven. shared.js zet die klasse
   al; hier hoeft niets voor te veranderen. */

body.nav-verborgen .lang-switch {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

/* Vanaf hier wordt de navigatiebalk breed genoeg om de knop te raken.
   Daarom zakt hij dan net onder de balk, nog steeds rechts. Dit gebeurt
   al ruim vóór de 760px-hamburgergrens: op tablets blijft het volledige
   linkenmenu zichtbaar (dat klapt pas bij 760px in), en juist dan kan de
   navbar-pill al breed genoeg zijn om de knop rechtsboven te raken. */

@media (max-width: 1180px) {
    .lang-switch {
        top: calc(var(--nav-marge) + 70px);
        height: 32px;
        padding: 0 12px;
        font-size: 9.5px;
    }

    .lang-switch::before {
        margin-right: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 430px) {
    .lang-switch { top: calc(var(--nav-marge) + 66px); }
}

/* Op aanraakschermen wordt het aanraakvlak groter dan de knop zelf.
   Zo haalt hij ruim de 44 px zonder dat het pilletje log wordt. */

@media (pointer: coarse) {
    .lang-switch::after {
        content: "";
        position: absolute;
        inset: -7px -9px;
    }
}

/* DE SUGGESTIE — lang.js zet dit blok in de pagina zodra de browsertaal niet bij de taal van de pagina past. Zonder Javascript gebeurt er niets; de knop in de navbar blijft dan gewoon werken. */

.lang-hint {
    position: fixed;
    z-index: 9997;

    left: max(20px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));

    width: min(330px, calc(100vw - 40px));

    padding: 15px 16px 14px;

    background-color: rgba(18, 18, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;

    backdrop-filter: var(--glas);
    -webkit-backdrop-filter: var(--glas);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 56px -28px rgba(0, 0, 0, 0.95);

    font-family: var(--avdb-font-sans), sans-serif;

    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;

    transition: opacity 0.3s ease, transform 0.4s var(--avdb-ease);
}

.lang-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lang-hint-tekst {
    max-width: 30ch;
    padding-right: 22px;

    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.62);
}

.lang-hint-acties {
    margin-top: 13px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.lang-hint-ga {
    min-height: 34px;
    padding: 8px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(246, 212, 81, 0.05);
    border: 1px solid rgba(246, 212, 81, 0.34);
    border-radius: var(--avdb-pill);

    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.2px;

    color: var(--gold);

    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lang-hint-ga:hover {
    border-color: var(--gold);
    background-color: rgba(246, 212, 81, 0.1);
}

.lang-hint-nee {
    padding: 0;

    background: none;
    border: 0;
    cursor: pointer;

    font-family: inherit;
    font-size: 12px;
    font-weight: 300;

    color: rgba(255, 255, 255, 0.4);

    transition: color 0.2s ease;
}

.lang-hint-nee:hover { color: rgba(255, 255, 255, 0.72); }

/* Het kruisje rechtsboven in het blokje */

.lang-hint-sluit {
    position: absolute;
    top: 9px;
    right: 9px;

    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;

    font-family: inherit;
    font-size: 13px;
    line-height: 1;

    color: rgba(255, 255, 255, 0.34);

    transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-hint-sluit:hover {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.06);
}

.lang-hint-ga:focus-visible,
.lang-hint-nee:focus-visible,
.lang-hint-sluit:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--avdb-pill);
}

/* Op smalle schermen staat de suggestie over de volle breedte en
   ruim boven de AI-knop, zodat ze elkaar nooit overlappen. */

@media (max-width: 560px) {
    .lang-hint {
        right: max(20px, env(safe-area-inset-right));
        bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--orb-size, 53px) + 20px);
        width: auto;
    }

    .lang-hint-tekst { max-width: none; }
}

@media (pointer: coarse) {
    .lang-hint-ga,
    .lang-hint-nee { min-height: var(--touch-target); }

    .lang-hint-sluit {
        width: var(--touch-target);
        height: var(--touch-target);
        top: 4px;
        right: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lang-switch,
    .lang-hint,
    .lang-hint-ga,
    .lang-hint-nee,
    .lang-hint-sluit { transition: none; }

    .lang-hint { transform: none; }
}