/* ==========================================================================
   EchteVacatures.nl — huisstijl
   Eén stylesheet, geen framework. Groen = vertrouwen/gecontroleerd,
   amber = actie. Alles op tokens, zodat kleuren op één plek staan.
   ========================================================================== */

:root {
    --groen-900: #07453C;   /* gelijk aan het logo, zodat het naadloos op de voet staat */
    --groen-800: #075B4F;
    --groen: #0b6b5f;
    --groen-600: #0d7d6d;
    --groen-300: #7cc6b9;
    --groen-100: #d7ece7;
    --groen-050: #eef7f4;

    --amber: #f4a02c;
    --amber-600: #d9861a;
    --amber-050: #fef6e9;

    --rood: #c0342c;
    --rood-050: #fdf1f0;
    --blauw-050: #eef4fb;
    --blauw: #2f6ca8;

    --ink: #101828;
    --ink-700: #303a4b;
    --grijs: #5b6675;
    --grijs-400: #8b95a3;
    --lijn: #e2e7ee;
    --lijn-zacht: #eef1f5;
    --wit: #ffffff;
    --bg: #f7f9fa;

    --radius: 12px;
    --radius-l: 18px;
    --radius-s: 8px;
    --schaduw-s: 0 1px 2px rgba(16, 24, 40, .05);
    --schaduw: 0 4px 16px rgba(16, 24, 40, .07);
    --schaduw-l: 0 16px 44px rgba(6, 61, 54, .13);

    --breedte: 1180px;
    --font: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--groen); text-decoration: none; }
a:hover { color: var(--groen-800); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: 1.18rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; }

hr { border: 0; border-top: 1px solid var(--lijn); margin: 2rem 0; }

:focus-visible { outline: 3px solid var(--groen-300); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--breedte); margin: 0 auto; padding: 0 20px; }
.container-smal { max-width: 780px; margin: 0 auto; padding: 0 20px; }

.skip {
    position: absolute; left: -9999px; top: 0; background: var(--groen); color: #fff;
    padding: .7rem 1.2rem; z-index: 200; border-radius: 0 0 var(--radius-s) 0;
}
.skip:focus { left: 0; }

/* ─── Kop ─────────────────────────────────────────────────────────────────── */

.site-header {
    background: var(--wit);
    border-bottom: 1px solid var(--lijn);
    position: sticky; top: 0; z-index: 60;
}

.header-inner {
    display: flex; align-items: center; gap: 28px;
    min-height: 70px;
}

.logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logo img { display: block; height: 38px; width: auto; }
.logo-voet img { height: 40px; }

.hoofdmenu { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }

.hoofdmenu a {
    color: var(--ink-700); font-weight: 600; font-size: .945rem;
    padding: .5rem .72rem; border-radius: var(--radius-s);
}
.hoofdmenu a:hover { background: var(--groen-050); color: var(--groen-800); text-decoration: none; }
.hoofdmenu a.actief { color: var(--groen); background: var(--groen-050); }
/* Ingelogd: een rondje met de cv-foto of de initialen, in plaats van "Mijn profiel". */
.hoofdmenu a.avatar-link { display: inline-flex; align-items: center; gap: .5rem; padding: 3px; border-radius: 999px; }
.avatar-rond {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; object-fit: cover;
    display: inline-grid; place-items: center; background: var(--groen); color: #fff;
    font-size: .82rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
}
.hoofdmenu a.avatar-link:hover .avatar-rond, .hoofdmenu a.avatar-link.actief .avatar-rond { box-shadow: 0 0 0 3px var(--groen-050), 0 0 0 5px var(--groen); }
.hoofdmenu a.avatar-link.actief, .hoofdmenu a.avatar-link:hover { background: transparent; }
.avatar-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kop-donker .avatar-rond { background: var(--amber); color: #3a2400; }

.menu-knop {
    display: none; margin-left: auto; background: none; border: 1px solid var(--lijn);
    border-radius: var(--radius-s); padding: .45rem .6rem; cursor: pointer; color: var(--ink);
    font-size: 1.15rem; line-height: 1;
}

/* ─── Donkere kop (pagina's zonder hero) ──────────────────────────────────── */

/* Inloggen, registreren en 404 zijn één kaart op een lege pagina. Met de gewone witte
   kop staat daar wit op bijna wit. Op die pagina's zet de layout body.kop-donker: de
   kop wordt de groene band (dezelfde --groen-900 als de voet, zodat het woordmerk-op-
   groen naadloos aansluit) en de pagina eronder wordt lichtgroen. */

.kop-donker { background: var(--groen-050); }

.kop-donker .site-header {
    background: var(--groen-900); border-bottom-color: rgba(255, 255, 255, .13);
}
.kop-donker .hoofdmenu a { color: rgba(255, 255, 255, .82); }
.kop-donker .hoofdmenu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.kop-donker .hoofdmenu a.actief { background: rgba(255, 255, 255, .15); color: #fff; }

/* De knoppen: de amber actieknop blijft zoals hij is, de randknop krijgt een lichte rand. */
.kop-donker .hoofdmenu .knop-rand {
    background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff;
}
.kop-donker .hoofdmenu .knop-rand:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.kop-donker .hoofdmenu .knop-actie { color: #40270a; }

.kop-donker .menu-knop { color: #fff; border-color: rgba(255, 255, 255, .32); }

.kop-donker .site-header .taalkiezer > summary {
    border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .85);
}
.kop-donker .site-header .taalkiezer > summary:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.kop-donker .site-header .vlag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.kop-donker .site-header .taallijst .vlag { box-shadow: 0 0 0 1px rgba(16, 24, 40, .14); }

/* ─── Knoppen ─────────────────────────────────────────────────────────────── */

.knop {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .78rem 1.4rem; border-radius: var(--radius-s); border: 1px solid transparent;
    font: inherit; font-weight: 650; font-size: .96rem; cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
    text-decoration: none; white-space: nowrap;
}
.knop:hover { text-decoration: none; }
.knop:active { transform: translateY(1px); }

.knop-primair { background: var(--groen); color: #fff; }
.knop-primair:hover { background: var(--groen-800); color: #fff; }

.knop-actie { background: var(--amber); color: #40270a; }
.knop-actie:hover { background: var(--amber-600); color: #2f1c05; }

.knop-rand { background: var(--wit); color: var(--groen-800); border-color: var(--groen-300); }
.knop-rand:hover { background: var(--groen-050); color: var(--groen-900); }

.knop-stil { background: var(--wit); color: var(--ink-700); border-color: var(--lijn); }
.knop-stil:hover { background: var(--lijn-zacht); color: var(--ink); }

.knop-gevaar { background: var(--wit); color: var(--rood); border-color: #f0c6c2; }
.knop-gevaar:hover { background: var(--rood-050); }

.knop-klein { padding: .48rem .85rem; font-size: .87rem; }
.knop-breed { width: 100%; }

/* ─── Hero ────────────────────────────────────────────────────────────────── */

.hero {
    background:
        radial-gradient(1100px 460px at 88% -8%, rgba(244, 160, 44, .17), transparent 62%),
        radial-gradient(760px 420px at 4% 100%, rgba(124, 198, 185, .22), transparent 60%),
        linear-gradient(168deg, var(--groen-900) 0%, var(--groen-800) 55%, #0a5f53 100%);
    color: #fff;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
}

.hero h1 { color: #fff; max-width: 20ch; }
.hero h1 mark { background: none; color: var(--amber); }

.hero-lead {
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    color: rgba(255, 255, 255, .88);
    max-width: 56ch; margin-bottom: 2rem;
}

.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    color: #fff; padding: .38rem .85rem; border-radius: 999px;
    font-size: .82rem; font-weight: 600; margin-bottom: 1.5rem;
    backdrop-filter: blur(4px);
}

/* Zoekbalk */

.zoekbalk {
    background: var(--wit);
    border-radius: var(--radius-l);
    box-shadow: var(--schaduw-l);
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    max-width: 880px;
}

.zoekveld { position: relative; display: flex; align-items: center; }
.zoekveld svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--grijs-400); }

.zoekbalk .zoekveld input {
    width: 100%; border: 1px solid transparent; background: var(--bg);
    border-radius: var(--radius-s); padding: .88rem .9rem .88rem 42px;
    font: inherit; font-size: .98rem; color: var(--ink);
}
.zoekbalk .zoekveld input::placeholder { color: var(--grijs-400); }
.zoekbalk .zoekveld input:focus {
    outline: none; border-color: var(--groen-300); background: var(--wit); box-shadow: none;
}

/* Aanvullijst onder een zoekveld */

.suggesties {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
    margin: 0; padding: 6px; list-style: none;
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    box-shadow: var(--schaduw-l);
    max-height: 320px; overflow-y: auto;
}
.suggesties[hidden] { display: none; }

.suggesties li {
    display: flex; align-items: baseline; gap: .55rem;
    padding: .55rem .7rem; border-radius: var(--radius-s);
    font-size: .94rem; color: var(--ink); cursor: pointer;
}
.suggesties li.actief { background: var(--groen-050); }
.suggesties li .naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggesties li .naam strong { font-weight: 800; color: var(--groen-800); }
.suggesties li .soort {
    font-size: .78rem; color: var(--grijs); background: var(--bg);
    border: 1px solid var(--lijn-zacht); border-radius: 5px; padding: .05rem .38rem;
    white-space: nowrap; flex: 0 0 auto;
}
.suggesties li .aantal {
    font-size: .82rem; font-weight: 700; color: var(--grijs-400);
    flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.suggesties li.leeg {
    color: var(--grijs); cursor: default; font-size: .9rem; justify-content: center;
    padding: .8rem .7rem;
}

.zoek-suggesties {
    margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: .87rem; color: rgba(255, 255, 255, .72);
}
.zoek-suggesties a {
    color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
    padding: .28rem .7rem; border-radius: 999px; font-weight: 500;
}
.zoek-suggesties a:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }

/* Cijferstrip */

.cijfers {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px; background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius); overflow: hidden; margin-top: 2.6rem;
}
.cijfers div { background: rgba(6, 61, 54, .42); padding: 1.05rem 1.2rem; }
.cijfers strong { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.cijfers span { font-size: .83rem; color: rgba(255, 255, 255, .78); }

/* ─── Secties ─────────────────────────────────────────────────────────────── */

.sectie { padding: clamp(2.75rem, 5vw, 4.25rem) 0; }
.sectie-wit { background: var(--wit); }
.sectie-zacht { background: var(--groen-050); }

.sectie-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.sectie-kop h2 { margin: 0; }
.sectie-kop p { margin: .35rem 0 0; color: var(--grijs); max-width: 62ch; }
.sectie-kop a { font-weight: 650; white-space: nowrap; }

.oogje {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--groen-600); margin-bottom: .5rem;
}

/* ─── Vacaturekaart ───────────────────────────────────────────────────────── */

.vacature-lijst { display: grid; gap: 14px; }
.vacature-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.vacature-kaart {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 20px 22px; box-shadow: var(--schaduw-s);
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
    position: relative; display: flex; flex-direction: column;
}
.vacature-kaart:hover {
    border-color: var(--groen-300); box-shadow: var(--schaduw); transform: translateY(-2px);
}
.vacature-kaart.uitgelicht { border-left: 4px solid var(--amber); }

.vacature-kaart h3 { margin: 0 0 .3rem; font-size: 1.12rem; font-weight: 700; }
.vacature-kaart h3 a { color: var(--ink); }
.vacature-kaart h3 a:hover { color: var(--groen); text-decoration: none; }

.vacature-top { display: flex; gap: 14px; align-items: flex-start; }

.werkgever-regel {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: .92rem; color: var(--grijs); margin-bottom: .7rem;
}
.werkgever-regel a { color: var(--ink-700); font-weight: 600; }
/* Werkgever, stip en plaats vormen één blok: de stip mag nooit een regel beginnen. */
.werkgever-regel .wie { display: inline; }
.werkgever-regel .wie .scheiding { padding: 0 .3rem; color: var(--grijs-400); }

.vacature-kaart p.samenvatting { color: var(--grijs); font-size: .93rem; margin: 0 0 1rem; }

.vacature-voet {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--lijn-zacht);
    font-size: .85rem; color: var(--grijs-400);
}

/* Logo-plaatshouder */

.avatar {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px;
    display: grid; place-items: center; font-weight: 800; font-size: .95rem;
    background: var(--groen-050); color: var(--groen-800); border: 1px solid var(--groen-100);
    overflow: hidden; letter-spacing: -.02em;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.avatar-groot { width: 68px; height: 68px; flex-basis: 68px; font-size: 1.3rem; border-radius: 14px; }

/* ─── Labels en badges ────────────────────────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .9rem; padding: 0; list-style: none; }

.tag {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--bg); border: 1px solid var(--lijn); color: var(--ink-700);
    padding: .24rem .6rem; border-radius: 6px; font-size: .81rem; font-weight: 550;
}
.tag-salaris { background: var(--amber-050); border-color: #f6dfb4; color: #7a4c07; font-weight: 650; }
.tag-remote { background: var(--blauw-050); border-color: #cfdff0; color: var(--blauw); }

.keurmerk {
    display: inline-flex; align-items: center; gap: .32rem;
    background: var(--groen-050); border: 1px solid var(--groen-100); color: var(--groen-800);
    padding: .2rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700;
    white-space: nowrap;
}
.keurmerk svg { width: 13px; height: 13px; }
.keurmerk-groot { font-size: .87rem; padding: .35rem .8rem; }
.keurmerk-groot svg { width: 15px; height: 15px; }

.status { display: inline-block; padding: .2rem .55rem; border-radius: 6px; font-size: .78rem; font-weight: 700; }
.status-online { background: var(--groen-050); color: var(--groen-800); }
.status-wacht { background: var(--amber-050); color: #7a4c07; }
.status-af { background: var(--rood-050); color: var(--rood); }

/* ─── Formulieren ─────────────────────────────────────────────────────────── */

.formulier { display: grid; gap: 1.15rem; }
/* align-content: start, anders rekken de rijen van een veld uit tot de hoogte van het
   veld ernaast. Het invoervak van een veld zonder helptekst werd daardoor hoger. */
.veld { display: grid; gap: .4rem; position: relative; align-content: start; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.veld-rij-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }

label { font-weight: 650; font-size: .92rem; color: var(--ink-700); }
.veld small { color: var(--grijs); font-size: .84rem; font-weight: 400; }

input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number],
input[type=date], input[type=search], input[type=file], input[type=password], select, textarea {
    width: 100%; padding: .72rem .85rem; font: inherit; font-size: .96rem; color: var(--ink);
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-s);
    transition: border-color .14s ease, box-shadow .14s ease;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
select { appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b6675'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2.1rem; }

input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--groen); box-shadow: 0 0 0 3px rgba(11, 107, 95, .13);
}
input.invoer-fout, select.invoer-fout, textarea.invoer-fout { border-color: var(--rood); }

.vinkje { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; }
.vinkje input { width: 19px; height: 19px; margin: 2px 0 0; flex: 0 0 19px; accent-color: var(--groen); }
.vinkje span { font-size: .93rem; color: var(--ink-700); }

.veld-fout { color: var(--rood); font-size: .86rem; font-weight: 600; }

.fout-samenvatting {
    background: var(--rood-050); border: 1px solid #f2ceca; border-left: 4px solid var(--rood);
    border-radius: var(--radius-s); padding: 1rem 1.2rem; color: #8a2620;
}
.fout-samenvatting ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ─── Meldingen ───────────────────────────────────────────────────────────── */

.melding {
    border-radius: var(--radius); padding: 1.15rem 1.35rem; border: 1px solid var(--lijn);
    background: var(--wit); display: flex; gap: .9rem; align-items: flex-start;
}
.melding-goed { background: var(--groen-050); border-color: var(--groen-100); color: var(--groen-900); }
.melding-fout { background: var(--rood-050); border-color: #f2ceca; color: #8a2620; }
.melding-let-op { background: var(--amber-050); border-color: #f6dfb4; color: #7a4c07; }
.melding-info { background: var(--blauw-050); border-color: #cfdff0; color: #1f4d7a; }
.melding strong { display: block; margin-bottom: .2rem; }
.melding p:last-child { margin-bottom: 0; }
.melding .icoon { font-size: 1.3rem; line-height: 1.2; }

/* ─── Overzichtspagina met filters ────────────────────────────────────────── */

.met-zijbalk { display: grid; grid-template-columns: 288px 1fr; gap: 30px; align-items: start; }

.filterpaneel {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 20px; position: sticky; top: 90px;
}
.filterpaneel h2 { font-size: 1.02rem; margin: 0 0 1rem; display: flex; justify-content: space-between; align-items: center; }
.filterpaneel h2 a { font-size: .82rem; font-weight: 600; }
.filtergroep { padding: 1rem 0; border-top: 1px solid var(--lijn-zacht); }
.filtergroep:first-of-type { border-top: 0; padding-top: 0; }
.filtergroep h3 { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); margin: 0 0 .65rem; }
.filtergroep label { display: flex; gap: .55rem; align-items: center; font-weight: 500; font-size: .92rem; padding: .16rem 0; cursor: pointer; }
.filtergroep input[type=radio], .filtergroep input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--groen); margin: 0; }

.actieve-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: .45rem; background: var(--groen-050);
    border: 1px solid var(--groen-100); color: var(--groen-900); border-radius: 999px;
    padding: .3rem .5rem .3rem .75rem; font-size: .85rem; font-weight: 600;
}
.filter-chip a { color: var(--groen-800); font-weight: 700; line-height: 1; padding: 0 .2rem; }
.filter-chip a:hover { text-decoration: none; color: var(--rood); }

.resultaat-balk {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.1rem; flex-wrap: wrap;
}
.resultaat-balk p { margin: 0; color: var(--grijs); font-size: .93rem; }
.resultaat-balk strong { color: var(--ink); }
.sorteer { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--grijs); }
.sorteer select {
    width: auto; padding: .45rem 2.2rem .45rem .7rem; font-size: .9rem;
    background-position: right .75rem center;
}

.leeg-resultaat {
    background: var(--wit); border: 1px dashed var(--lijn); border-radius: var(--radius);
    padding: 3rem 2rem; text-align: center;
}
.leeg-resultaat .icoon { font-size: 2.4rem; }

/* Paginering */

.paginering { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 2.25rem; flex-wrap: wrap; }
.paginering a, .paginering span {
    min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .7rem; border: 1px solid var(--lijn); border-radius: var(--radius-s);
    background: var(--wit); color: var(--ink-700); font-weight: 600; font-size: .92rem;
}
.paginering a:hover { border-color: var(--groen-300); background: var(--groen-050); text-decoration: none; }
.paginering .huidig { background: var(--groen); border-color: var(--groen); color: #fff; }
.paginering .uit { color: var(--grijs-400); background: var(--bg); }

/* ─── Detailpagina ────────────────────────────────────────────────────────── */

/* Paginakop: dezelfde groene band als de hero op de homepage. Alles wat erin staat is
   licht, dus de onderdelen die normaal donkere tekst hebben krijgen hieronder een
   variant voor op groen. Lichte vlakken binnen de kop (zoekbalk, knoppen, statuslabels)
   houden hun eigen kleuren. */
.detail-hero {
    background:
        radial-gradient(900px 380px at 92% -30%, rgba(244, 160, 44, .15), transparent 62%),
        linear-gradient(150deg, var(--groen-900) 0%, var(--groen-800) 100%);
    color: #fff;
    padding: 2.25rem 0 2.5rem;
}
.detail-hero h1 { color: #fff; }
.detail-hero > .container > p,
.detail-hero .container > .detail-kop p { color: rgba(255, 255, 255, .85); }
.detail-hero strong { color: #fff; }
.detail-hero a:not(.knop) { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
.detail-hero a:not(.knop):hover { color: #fff; }

.kruimels { font-size: .85rem; color: var(--grijs-400); margin-bottom: 1.1rem; }
.kruimels a { color: var(--grijs); }
.kruimels span { padding: 0 .35rem; }

.detail-hero .kruimels { color: rgba(255, 255, 255, .6); }
.detail-hero .kruimels a { color: rgba(255, 255, 255, .8); }
.detail-hero .kruimels a:hover { color: #fff; }
.detail-hero .kruimels span { color: rgba(255, 255, 255, .4); }

.detail-hero .werkgever-regel { color: rgba(255, 255, 255, .8); }
.detail-hero .werkgever-regel a { color: #fff; font-weight: 700; }
.detail-hero .werkgever-regel .scheiding { color: rgba(255, 255, 255, .45); }

.detail-hero .tag {
    background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .24); color: #fff;
}
.detail-hero .tag-remote {
    background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .32); color: #fff;
}
.detail-hero .tag-salaris {
    background: rgba(244, 160, 44, .22); border-color: rgba(244, 160, 44, .5); color: #ffdca6;
}
.detail-hero .keurmerk {
    background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff;
}
.detail-hero .avatar {
    background: rgba(255, 255, 255, .94); border-color: rgba(255, 255, 255, .55);
    color: var(--groen-900);
}
.detail-hero .sorteer { color: rgba(255, 255, 255, .8); }
.detail-hero .sorteer select { color: var(--ink); }
.detail-hero .zoekbalk { color: var(--ink); }
.detail-hero .knop-stil { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.detail-hero .knop-stil:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.detail-hero .knop-rand { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.detail-hero .knop-rand:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.detail-hero code { background: rgba(255, 255, 255, .14); padding: .1rem .35rem; border-radius: 4px; }

.detail-kop { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.detail-kop h1 { margin: 0 0 .5rem; font-size: clamp(1.65rem, 3.2vw, 2.35rem); }
.detail-kop .knoppen { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.detail-body { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; padding: 2.5rem 0 3.5rem; }

.blok {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 26px 28px; margin-bottom: 18px;
}
.blok h2 { font-size: 1.28rem; }
.blok h2:not(:first-child) { margin-top: 1.9rem; }
.blok .tekst { color: var(--ink-700); }
.blok .tekst p:last-child { margin-bottom: 0; }

.zijblok {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 22px; margin-bottom: 18px; position: relative;
}
.zijblok h3 { font-size: 1.02rem; margin-bottom: .9rem; }

.kenmerken { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.kenmerken li {
    display: flex; gap: 1rem; justify-content: space-between; align-items: baseline;
    padding: .6rem 0; border-bottom: 1px solid var(--lijn-zacht); font-size: .93rem;
}
.kenmerken li:last-child { border-bottom: 0; }
.kenmerken dt, .kenmerken .label { color: var(--grijs); flex: 0 0 auto; }
.kenmerken .waarde { font-weight: 650; text-align: right; color: var(--ink); }

.solliciteer-blok { background: var(--groen-050); border-color: var(--groen-100); }

/* ─── Uitleg / stappen ───────────────────────────────────────────────────── */

.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; counter-reset: stap; }
.stap {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 26px 24px; position: relative;
}
.stap::before {
    counter-increment: stap; content: counter(stap);
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--groen); color: #fff; font-weight: 800; font-size: .95rem; margin-bottom: 1rem;
}
.stap h3 { margin-bottom: .35rem; }
.stap p { color: var(--grijs); font-size: .93rem; margin: 0; }

.kaartjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.kaartje {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 24px; transition: border-color .14s ease, transform .14s ease;
}
.kaartje:hover { border-color: var(--groen-300); transform: translateY(-2px); }
.kaartje .icoon { font-size: 1.7rem; display: block; margin-bottom: .7rem; }
.kaartje h3 { margin-bottom: .3rem; }
.kaartje p { color: var(--grijs); font-size: .93rem; margin: 0; }
.kaartje a.blok-link { color: inherit; }

/* Sectortegels */

.sector-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.sector-tegel {
    display: flex; align-items: center; gap: .8rem; background: var(--wit);
    border: 1px solid var(--lijn); border-radius: var(--radius); padding: 15px 17px;
    color: var(--ink); font-weight: 650; font-size: .95rem;
    transition: border-color .14s ease, background .14s ease;
}
.sector-tegel:hover { border-color: var(--groen-300); background: var(--groen-050); text-decoration: none; color: var(--groen-900); }
.sector-tegel .icoon { font-size: 1.35rem; }
.sector-tegel small { display: block; font-weight: 500; color: var(--grijs); font-size: .8rem; }

/* Plaatslinks */

.plaats-links { display: flex; flex-wrap: wrap; gap: 8px; }
.plaats-links a {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px;
    padding: .4rem .9rem; font-size: .9rem; font-weight: 600; color: var(--ink-700);
}
.plaats-links a:hover { border-color: var(--groen-300); background: var(--groen-050); text-decoration: none; }
.plaats-links a b { color: var(--grijs-400); font-weight: 500; }

/* Vergelijkingstabel: wij versus de rest */

.vergelijk { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--wit);
    border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; font-size: .95rem; }
.vergelijk th, .vergelijk td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--lijn-zacht); }
.vergelijk thead th { background: var(--bg); font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs); }
.vergelijk tbody tr:last-child th, .vergelijk tbody tr:last-child td { border-bottom: 0; }
.vergelijk .ja { color: var(--groen); font-weight: 700; }
.vergelijk .nee { color: var(--rood); font-weight: 700; }
.vergelijk col.wij, .vergelijk .kolom-wij { background: var(--groen-050); }

.tabel-schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* CTA-strook */

.cta-strook {
    background: linear-gradient(135deg, var(--groen-900), var(--groen-600));
    color: #fff; border-radius: var(--radius-l); padding: clamp(2rem, 4vw, 3rem);
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.cta-strook h2 { color: #fff; margin: 0 0 .4rem; }
.cta-strook p { color: rgba(255, 255, 255, .85); margin: 0; max-width: 60ch; }
.cta-strook .knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Beheer ──────────────────────────────────────────────────────────────── */

.beheer-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 2rem; }
.beheer-cijfers div, .beheer-cijfers > a { display: block; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 16px 18px; color: inherit; text-decoration: none; }
.beheer-cijfers > a:hover { border-color: var(--groen); box-shadow: 0 2px 10px rgba(7, 69, 60, .08); }
.beheer-cijfers strong { display: block; font-size: 1.5rem; letter-spacing: -.03em; }
.beheer-cijfers span { font-size: .82rem; color: var(--grijs); }

.wachtrij-item { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; }
.wachtrij-item.verdacht { border-left: 4px solid var(--amber); }
.wachtrij-kop { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: .8rem; }
.screening-rapport {
    background: var(--bg); border: 1px solid var(--lijn); border-radius: var(--radius-s);
    padding: .9rem 1rem; font-size: .84rem; white-space: pre-wrap; color: var(--ink-700);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin: 0 0 1rem;
    max-height: 240px; overflow: auto;
}
/* De hele vacature in de wachtrij, met in het geel wat de tekstcontrole zag. */
.vacature-controle {
    border: 1px solid var(--lijn); border-radius: var(--radius-s); background: var(--wit);
    padding: .9rem 1.1rem; margin: 0 0 1rem; max-height: 28rem; overflow: auto; resize: vertical;
    font-size: .9rem; color: var(--ink-700);
}
.vacature-controle p { white-space: pre-wrap; margin: 0 0 .8rem; }
.vacature-controle h4 { margin: .9rem 0 .3rem; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--grijs); }
mark.signaal { background: #fff176; color: inherit; padding: 0 .15em; border-radius: 3px; box-shadow: 0 0 0 1px #f0d000; cursor: help; }
.import-voortgang { margin-top: .5rem; padding: .45rem .6rem; border-radius: var(--radius-s); background: var(--groen-050); color: var(--groen-900); font-size: .85rem; }
.import-voortgang.bezig { background: #fff7e0; color: #5a3d00; }
.beheer-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.beheer-acties form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.beheer-acties input[type=text], .beheer-acties select { width: auto; min-width: 190px; padding: .5rem .7rem; font-size: .9rem; }

/* ─── Voet ────────────────────────────────────────────────────────────────── */

.site-footer { background: var(--groen-900); color: rgba(255, 255, 255, .74); margin-top: auto; padding: 3.25rem 0 1.75rem; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.25rem; }
.site-footer h4 { color: #fff; font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: #fff; }
.site-footer .logo { color: #fff; }
.site-footer .logo em { color: #fff; }
.footer-onder {
    margin-top: 2.5rem; padding-top: 1.35rem; border-top: 1px solid rgba(255, 255, 255, .13);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem;
    color: rgba(255, 255, 255, .55);
}

.pagina { min-height: 60vh; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

.lange-tekst { max-width: 74ch; }
.lange-tekst h2 { margin-top: 2.25rem; }
.lange-tekst h3 { margin-top: 1.6rem; }
.lange-tekst ul, .lange-tekst ol { padding-left: 1.35rem; }
.lange-tekst li { margin-bottom: .45rem; }
.lange-tekst blockquote {
    margin: 1.6rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--groen-300);
    background: var(--groen-050); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--groen-900);
}

/* ─── Responsief ──────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
    .met-zijbalk { grid-template-columns: 1fr; }
    .filterpaneel { position: static; }
    .detail-body { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Het volledige menu (vijf links, twee knoppen en de taalkiezer) past niet in de kop met
   de ruime maten. Dit geldt op élke desktopbreedte en niet alleen op een smal scherm: de
   container is afgetopt op --breedte, dus boven ~1220px wordt de kop niet breder en helpt
   een extra brede monitor niets. Zonder deze maten valt 'vacature plaatsen' naar een
   tweede regel, en bij een langere vertaling (Duits, Frans) of ingezoomd nog eerder. */
@media (min-width: 1180px) {
    .header-inner { gap: 14px; }
    .hoofdmenu { gap: 0; }
    .hoofdmenu a { padding: .5rem .5rem; font-size: .88rem; }
    .hoofdmenu .knop { padding: .45rem .7rem; margin-left: 4px; }
}

/* Daaronder past het niet meer en gaat het menu achter de menuknop. Die grens ligt hoger
   dan de gebruikelijke tabletgrens (860px) omdat er twee knoppen in het menu staan: op
   1000px viel 'vacature plaatsen' anders naar een tweede regel. De rest van de
   responsieve regels blijft wél op 860px staan; die gaan over de inhoud, niet over de kop. */
@media (max-width: 1179px) {
    /* Volgorde in de kop: logo, taalkiezer, menuknop. De menuknop staat in de HTML vóór
       het menu dat hij bedient, dus hier zet order hem visueel weer achteraan. */
    .menu-knop { display: block; margin-left: 0; order: 2; }

    .hoofdmenu {
        display: none; position: absolute; top: 70px; left: 0; right: 0;
        background: var(--wit); border-bottom: 1px solid var(--lijn); flex-direction: column;
        align-items: stretch; padding: 12px 20px 18px; gap: 2px; box-shadow: var(--schaduw);
    }
    .hoofdmenu.open { display: flex; }
    .hoofdmenu .knop { margin-top: .5rem; }

    /* Het uitklapmenu is een eigen vlak onder de kop: op een donkere kop moet dat mee,
       anders staat de lichte menutekst op een witte achtergrond. */
    .kop-donker .hoofdmenu { background: var(--groen-900); border-bottom-color: rgba(255, 255, 255, .13); }

    /* De taalkiezer schuift met de menuknop mee naar rechts; de lijst hangt daar dus ook
       rechts uit (de standaard), anders loopt hij het scherm uit. */
    .header-inner .taalkiezer { margin-left: auto; order: 1; }
}

@media (max-width: 860px) {
    .zoekbalk { grid-template-columns: 1fr; }
    .veld-rij, .veld-rij-3 { grid-template-columns: 1fr; }
    .cta-strook { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .vacature-kaart { padding: 17px 18px; }
    .blok { padding: 20px 18px; }
    .detail-kop .knoppen { margin-left: 0; width: 100%; }
    .detail-kop .knoppen .knop { flex: 1; }
}

@media print {
    .site-header, .site-footer, .knoppen, .filterpaneel, .zijblok { display: none; }
    body { background: #fff; }
}

/* ─── Inloggen, profiel en dashboard ─────────────────────────────────────────── */

.uitlog-formulier { display: inline-flex; margin: 0; }

.paneel {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 24px 26px; margin-bottom: 18px;
}
.paneel > h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.paneel > h2 + p { color: var(--grijs); font-size: .93rem; }
.paneel-kop {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1.1rem;
}
.paneel-kop h2 { margin: 0; font-size: 1.25rem; }

/* Voortgangsbalk van de profielvolledigheid */

.voortgang { display: flex; align-items: center; gap: .8rem; }
.voortgang .balk {
    flex: 1; height: 9px; background: var(--lijn-zacht); border-radius: 999px; overflow: hidden;
}
.voortgang .balk span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--groen), var(--groen-300));
}
.voortgang strong { font-size: .9rem; color: var(--groen-800); min-width: 3.2em; text-align: right; }

/* Lijstjes met tijdlijn: werkervaring en opleiding */

.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn > li {
    position: relative; padding: 0 0 1.2rem 1.6rem; border-left: 2px solid var(--lijn);
}
.tijdlijn > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tijdlijn > li::before {
    content: ""; position: absolute; left: -6px; top: .42rem; width: 10px; height: 10px;
    border-radius: 50%; background: var(--groen-300); border: 2px solid var(--wit);
}
.tijdlijn .functie { font-weight: 700; color: var(--ink); }
.tijdlijn .waar { color: var(--ink-700); font-size: .94rem; }
.tijdlijn .periode { color: var(--grijs-400); font-size: .85rem; }
.tijdlijn .toelichting { color: var(--grijs); font-size: .92rem; margin: .35rem 0 0; white-space: pre-wrap; }
.tijdlijn .acties { position: absolute; right: 0; top: 0; display: flex; gap: 6px; }

/* Cv-lijst */

.cv-lijst { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 8px; }
.cv-lijst li {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    border: 1px solid var(--lijn); border-radius: var(--radius-s); padding: .7rem .9rem;
    background: var(--bg);
}
.cv-lijst li.standaard { border-color: var(--groen-300); background: var(--groen-050); }
.cv-lijst .naam { font-weight: 650; flex: 1; min-width: 0; word-break: break-all; }
.cv-lijst .meta { color: var(--grijs-400); font-size: .84rem; }
.cv-lijst form { display: inline-flex; margin: 0; }

/* Uitklapbaar formulier (werkervaring toevoegen) */

details.uitklap { border: 1px solid var(--lijn); border-radius: var(--radius-s); background: var(--bg); }
details.uitklap > summary {
    cursor: pointer; padding: .7rem 1rem; font-weight: 650; font-size: .94rem; color: var(--groen-800);
    list-style: none;
}
details.uitklap > summary::-webkit-details-marker { display: none; }
details.uitklap > summary::before { content: "+ "; font-weight: 800; }
details.uitklap[open] > summary::before { content: "− "; }
details.uitklap > div { padding: 0 1rem 1.1rem; }

/* Tabellen in het dashboard */

.tabel { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--wit); }
.tabel th, .tabel td {
    text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--lijn-zacht);
    vertical-align: top;
}
.tabel thead th {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs);
    background: var(--bg); border-bottom: 1px solid var(--lijn);
}
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .rechts { text-align: right; }
.tabel .bedrag { font-variant-numeric: tabular-nums; white-space: nowrap; }

.status-betaald { background: var(--groen-050); color: var(--groen-800); }
.status-open { background: var(--amber-050); color: #7a4c07; }
.status-mislukt { background: var(--rood-050); color: var(--rood); }
.status-gratis { background: var(--blauw-050); color: var(--blauw); }

/* Prijskaart */

.prijskaart {
    border: 1px solid var(--groen-100); background: var(--groen-050);
    border-radius: var(--radius); padding: 22px 24px;
}
.prijskaart .prijs {
    font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--groen-900);
    line-height: 1.1;
}
.prijskaart .prijs small { font-size: .82rem; font-weight: 600; color: var(--grijs); display: block; }
.prijskaart ul { list-style: none; margin: 1.1rem 0 0; padding: 0; font-size: .93rem; }
.prijskaart li { padding: .3rem 0 .3rem 1.5rem; position: relative; color: var(--ink-700); }
.prijskaart li::before {
    content: "✓"; position: absolute; left: 0; color: var(--groen); font-weight: 800;
}

/* Kandidaatkaart */

.kandidaat-kaart {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 20px 22px; display: flex; flex-direction: column; gap: .5rem;
}
.kandidaat-kaart:hover { border-color: var(--groen-300); }
.kandidaat-kaart .kop { font-weight: 700; font-size: 1.05rem; }
.kandidaat-kaart .regel { color: var(--grijs); font-size: .9rem; }

.teken-teller { color: var(--grijs-400); font-size: .82rem; }

.inlog-kaart {
    max-width: 460px; margin: 0 auto; background: var(--wit); border: 1px solid var(--lijn);
    border-radius: var(--radius-l); padding: 32px 30px; box-shadow: var(--schaduw);
}
.inlog-kaart h1 { font-size: 1.5rem; }
.inlog-kaart .beeldmerk { display: block; height: 44px; width: auto; margin-bottom: 1.4rem; }

/* ─── Venster voor inloggen en registreren ────────────────────────────────── */

/* De inhoud komt van /inloggen en /registreren zelf (zie site.js): daar staat dezelfde
   kaart, hier is hij het venster. Vandaar dat hij zijn eigen rand en schaduw afgeeft. */

dialog.modal {
    width: min(460px, calc(100vw - 28px));
    max-height: min(92vh, 940px);
    margin: auto; padding: 0; border: 0; border-radius: var(--radius-l);
    background: var(--wit); color: var(--ink);
    box-shadow: var(--schaduw-l);
    overflow: auto; overscroll-behavior: contain;
}
dialog.modal::backdrop { background: rgba(7, 69, 60, .58); }
dialog.modal[open] { animation: venster-in .16s ease-out both; }

@keyframes venster-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.modal-kaart { position: relative; }
.modal-kaart .inlog-kaart {
    max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: 30px 28px;
}
.modal-kaart .inlog-kaart h1 { padding-right: 2rem; }      /* ruimte voor de sluitknop */

.modal-sluiten {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    background: none; border: 0; border-radius: var(--radius-s); cursor: pointer;
    color: var(--grijs); font: inherit; font-size: 1.5rem; line-height: 1;
    padding: .1rem .45rem .25rem;
}
.modal-sluiten:hover { background: var(--lijn-zacht); color: var(--ink); }

.modal-laden { padding: 3.5rem 1rem; text-align: center; color: var(--grijs); }

/* De pagina eronder mag niet meescrollen zolang het venster openstaat. */
html.modal-open, html.modal-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    dialog.modal[open] { animation: none; }
}

@media (max-width: 560px) {
    .logo img { height: 30px; }
    .tabel { font-size: .87rem; }
    .tabel th, .tabel td { padding: .6rem .55rem; }
}

/* ─── Sleepvak voor bestanden ────────────────────────────────────────────────── */
/*
   Zonder JavaScript is dit een gewoon label bij een file-input: klikken opent de
   bestandskiezer. Met JavaScript kun je er ook een bestand op slepen.
*/

.sleepvak {
    display: grid; gap: 12px;
    border: 2px dashed var(--lijn); border-radius: var(--radius);
    background: var(--bg); padding: 20px;
    transition: border-color .14s ease, background-color .14s ease;
}
.sleepvak.sleep-actief { border-color: var(--groen); background: var(--groen-050); }
.sleepvak.heeft-bestand { border-style: solid; border-color: var(--groen-300); background: var(--groen-050); }

/* De echte input blijft bestaan voor toetsenbord en schermlezers, maar is onzichtbaar. */
.sleepvak input[type=file] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.sleepvak-label {
    display: flex; align-items: center; gap: 14px; cursor: pointer; font-weight: 400;
    text-align: left;
}
.sleepvak-icoon {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px;
    display: grid; place-items: center; font-size: 1.35rem;
    background: var(--wit); border: 1px solid var(--lijn);
}
.sleepvak.heeft-bestand .sleepvak-icoon { border-color: var(--groen-100); }
.sleepvak-tekst { display: grid; gap: .15rem; min-width: 0; }
.sleepvak-tekst strong { font-weight: 700; color: var(--ink); }
.sleepvak-tekst .knop-tekst { color: var(--groen); font-weight: 650; text-decoration: underline; }
.sleepvak-meta { font-size: .84rem; color: var(--grijs); }
.sleepvak-gekozen { font-size: .88rem; color: var(--groen-800); font-weight: 650; word-break: break-all; }
.sleepvak-fout { font-size: .88rem; color: var(--rood); font-weight: 600; }
.sleepvak input[type=file]:focus-visible + .sleepvak-label .sleepvak-icoon {
    outline: 3px solid var(--groen-300); outline-offset: 2px;
}
.sleepvak-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

@media (max-width: 560px) {
    .sleepvak-label { align-items: flex-start; }
}

/* LinkedIn-knop in de merkkleur van LinkedIn, zodat hij herkenbaar is */
.knop-linkedin { background: #0a66c2; color: #fff; }
.knop-linkedin:hover { background: #084e96; color: #fff; }
.detail-hero .knop-linkedin { background: #0a66c2; border-color: transparent; color: #fff; }

.scheiding-of {
    display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0;
    color: var(--grijs-400); font-size: .84rem; text-transform: uppercase; letter-spacing: .06em;
}
.scheiding-of::before, .scheiding-of::after {
    content: ""; flex: 1; height: 1px; background: var(--lijn);
}

/* ─── Taalkiezer ──────────────────────────────────────────────────────────────── */

.taalkiezer { position: relative; flex: 0 0 auto; }

.taalkiezer > summary {
    display: inline-flex; align-items: center; gap: .35rem; list-style: none; cursor: pointer;
    border: 1px solid var(--lijn); border-radius: var(--radius-s);
    padding: .45rem .6rem; font-size: .87rem; font-weight: 650; color: var(--ink-700);
}
.taalkiezer > summary::-webkit-details-marker { display: none; }
.taalkiezer > summary::marker { content: ""; }
.taalkiezer > summary:hover { background: var(--groen-050); color: var(--groen-800); }
.taalkiezer > summary svg { width: 15px; height: 15px; }

.taallijst {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 90;
    margin: 0; padding: 6px; list-style: none; min-width: 170px;
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
    box-shadow: var(--schaduw);
}
.taallijst a {
    display: block; padding: .5rem .7rem; border-radius: var(--radius-s);
    color: var(--ink-700); font-size: .92rem; font-weight: 550;
}
.taallijst a:hover { background: var(--groen-050); color: var(--groen-800); text-decoration: none; }
.taallijst a.actief { background: var(--groen-050); color: var(--groen-800); font-weight: 700; }

/* In de voet staat de kiezer op groen en klapt hij naar boven open. */
.site-footer .taalkiezer > summary {
    border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .85);
}
.site-footer .taalkiezer > summary:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.site-footer .taallijst { bottom: calc(100% + 6px); top: auto; }

@media (max-width: 860px) {
    /* In de voet staat de taalkiezer links onderaan, dus daar klapt de lijst naar rechts uit. */
    .site-footer .taallijst { right: auto; left: 0; }
}

/* Vlaggetjes in de taalkiezer */
.vlag {
    display: inline-block; width: 21px; height: 14px; flex: 0 0 21px;
    border-radius: 2px; overflow: hidden; line-height: 0;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .14);
}
.vlag svg { display: block; width: 100%; height: 100%; }
.taallijst a { display: flex; align-items: center; gap: .55rem; }
.site-footer .vlag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.site-footer .taallijst .vlag { box-shadow: 0 0 0 1px rgba(16, 24, 40, .14); }

/* ─── Inloggen, wachtwoord en tweestapsverificatie ────────────────────────── */

/* Een code van zes cijfers: los uit elkaar, zodat je ziet wat je typt. */
.code-invoer {
    font-family: var(--mono, ui-monospace, "Cascadia Mono", "Consolas", monospace);
    font-size: 1.5rem; letter-spacing: .35em; text-align: center; padding-left: .35em;
    max-width: 11ch;
}

/* De QR met het geheim ernaast. Het geheim staat er altijd bij: wie de code niet kan
   scannen moet er niet op vastlopen. */
.qr-blok { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1.2rem; }
.qr-beeld {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-s);
    padding: .6rem; line-height: 0; flex: 0 0 auto;
}
.qr-beeld svg { display: block; width: 190px; height: 190px; }
.qr-naast { flex: 1 1 260px; min-width: 0; }

.geheim {
    display: block; font-family: var(--mono, ui-monospace, "Cascadia Mono", "Consolas", monospace);
    font-size: 1.02rem; letter-spacing: .06em; word-break: break-all;
    background: var(--groen-050); border: 1px solid var(--groen-100);
    border-radius: var(--radius-s); padding: .7rem .85rem; color: var(--groen-900);
}

.herstelcodes {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem;
}
.herstelcodes code {
    display: block; text-align: center; font-size: 1rem; letter-spacing: .04em;
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-s);
    padding: .55rem .4rem;
}

/* Twee formulieren naast elkaar: nieuwe herstelcodes, en 2FA uitzetten. */
.twee-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem; }
.twee-kolommen .formulier { gap: .8rem; }

@media print {
    /* Herstelcodes afdrukken: alleen de codes, niet de menu's eromheen. */
    .site-header, .site-footer, .detail-hero, .melding, .knoppen { display: none; }
    .herstelcodes code { border-color: #000; }
}

/* ─── Honeypot (SpamRem) ─────────────────────────────────────────────────────
   Buiten beeld, niet met display:none: sommige bots slaan velden over die zo verborgen
   zijn. aria-hidden en tabindex=-1 in _SpamRem.cshtml houden schermlezers en het
   toetsenbord erbuiten. */
.honing {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Puntenoverzicht per maand (/mijn/punten) ───────────────────────────────── */
.maandkeuze { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem; }
.maandkeuze a {
    padding: .3rem .7rem; border: 1px solid var(--lijn); border-radius: 999px;
    font-size: .86rem; color: var(--groen-800); text-decoration: none;
}
.maandkeuze a:hover { background: var(--groen-050); }
.maandkeuze a.actief { background: var(--groen); border-color: var(--groen); color: #fff; }
.tabel tfoot th, .tabel tfoot td { border-top: 2px solid var(--lijn); font-weight: 650; }

/* ─── Cv maken (/profiel/cv-maken) ───────────────────────────────────────────── */
.ontwerp-keuze { border: 0; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ontwerp-keuze legend { font-weight: 650; margin-bottom: .5rem; }
.ontwerp-kaart {
    display: grid; gap: .3rem; padding: 12px; border: 2px solid var(--lijn); border-radius: 12px;
    cursor: pointer; background: var(--wit);
}
.ontwerp-kaart:has(input:checked) { border-color: var(--groen); background: var(--groen-050); }
.ontwerp-kaart input { position: absolute; opacity: 0; pointer-events: none; }
.ontwerp-kaart:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }
.ontwerp-kaart small { color: var(--grijs); font-size: .84rem; line-height: 1.35; }

/* Een miniatuur van het ontwerp, van vier lege vlakjes: kop, twee regels tekst, zijbalk. */
.ontwerp-plaatje { position: relative; display: block; aspect-ratio: 210 / 150; border: 1px solid var(--lijn); border-radius: 6px; background: #fff; overflow: hidden; }
.ontwerp-plaatje i { position: absolute; display: block; border-radius: 2px; background: #d5dedb; }
.ontwerp-klassiek i:nth-child(1) { left: 10%; top: 12%; width: 55%; height: 10%; background: var(--groen-900); }
.ontwerp-klassiek i:nth-child(2) { left: 10%; top: 30%; width: 80%; height: 2px; background: var(--groen); }
.ontwerp-klassiek i:nth-child(3) { left: 10%; top: 42%; width: 80%; height: 20%; }
.ontwerp-klassiek i:nth-child(4) { left: 10%; top: 70%; width: 80%; height: 18%; }
.ontwerp-modern i:nth-child(1) { left: 0; top: 0; width: 30%; height: 100%; background: var(--groen-900); border-radius: 0; }
.ontwerp-modern i:nth-child(2) { left: 38%; top: 12%; width: 50%; height: 10%; background: var(--groen-900); }
.ontwerp-modern i:nth-child(3) { left: 38%; top: 32%; width: 54%; height: 24%; }
.ontwerp-modern i:nth-child(4) { left: 38%; top: 64%; width: 54%; height: 24%; }
.ontwerp-compact i:nth-child(1) { left: 6%; top: 8%; width: 88%; height: 18%; background: var(--groen-050); border: 1px solid #cfe3dd; }
.ontwerp-compact i:nth-child(2) { left: 6%; top: 34%; width: 58%; height: 56%; }
.ontwerp-compact i:nth-child(3) { left: 68%; top: 34%; width: 26%; height: 26%; }
.ontwerp-compact i:nth-child(4) { left: 68%; top: 64%; width: 26%; height: 26%; }

.cv-foto { display: grid; gap: .8rem; }
.cv-foto-voorbeeld { width: 132px; height: 132px; object-fit: cover; border-radius: 10px; border: 1px solid var(--lijn); }
.cv-foto-knoppen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cv-foto-invoer { position: absolute; width: 1px; height: 1px; opacity: 0; }
.webcam { display: grid; gap: .6rem; max-width: 360px; }
.webcam video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #000; transform: scaleX(-1); }
.cv-rijen { display: grid; gap: .2rem; }
.rijbewijzen { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.cv-knoppen .knoppen { display: flex; flex-wrap: wrap; gap: .6rem; }

/* De uitsnijder: een vierkant venster met het beeld eronder, te slepen en te zoomen. */
.uitsnede { display: grid; gap: .7rem; max-width: 340px; }
.uitsnede-vak {
    position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px;
    background: #10231f; cursor: grab; touch-action: none; user-select: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7);
}
.uitsnede-vak.sleept { cursor: grabbing; }
.uitsnede-vak:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.uitsnede-vak img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.uitsnede-zoom { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center; font-size: .9rem; }
.uitsnede-zoom input { width: 100%; accent-color: var(--groen); }

/* ─── Beheer: vast menu links, pagina rechts ─────────────────────────────────── */
.beheer-schil { display: grid; grid-template-columns: var(--schil-menu) minmax(0, 1fr); gap: 0; align-items: start; }
.beheer-inhoud { min-width: 0; }
.schil-kop .detail-hero h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.beheer-inhoud .container { max-width: 1180px; }
.beheer-menu {
    position: sticky; top: 0; align-self: start; min-height: 60vh;
    display: flex; flex-direction: column; gap: 2px; padding: 1.2rem .8rem 2rem;
    order: -1; background: var(--wit); border-right: 1px solid var(--lijn); font-size: .92rem;
}
.beheer-menu a {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .45rem .7rem; border-radius: 8px; color: var(--ink); text-decoration: none;
}
.beheer-menu a:hover { background: var(--groen-050); color: var(--groen-900); }
.beheer-menu a.actief { background: var(--groen); color: #fff; font-weight: 650; }
.beheer-menu-kop { margin: 0 .7rem .6rem; font-weight: 800; font-size: 1.05rem; color: var(--groen-900); }
.beheer-menu-groep { margin: 1rem .7rem .25rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.beheer-menu .teller:empty { display: none; }
.beheer-menu .teller { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--amber); color: #3a2400; font-size: .75rem; font-weight: 700; text-align: center; }
.beheer-menu a.actief .teller { background: #fff; color: var(--groen-900); }
a.beheer-kaart { color: inherit; text-decoration: none; }
a.beheer-kaart:hover { border-color: var(--groen); }

@media (max-width: 900px) {
    .beheer-schil { grid-template-columns: 1fr; }
    .schil-kop .container { margin-left: auto; margin-right: auto; }
    .beheer-menu { order: -1; position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--lijn); padding: .6rem 12px; }
    .beheer-menu-kop, .beheer-menu-groep { display: none; }
}

/* ─── Mijn omgeving (/profiel, /account, /mijn): menu links, pagina rechts ────── */
.mijn-schil { display: grid; grid-template-columns: var(--schil-menu) minmax(0, 1fr); align-items: start; }
.mijn-inhoud { min-width: 0; }
/* De groene kop van beheer en "mijn omgeving" (@section Kop) staat boven het menu, over de volle
   breedte. De tekst lijnt uit met de inhoud eronder, die gecentreerd staat naast het menu. */
:root { --schil-menu: 236px; }
.schil-kop:empty { display: none; }
.schil-kop .detail-hero { padding: 1.6rem 0 1.4rem; }
.schil-kop .container {
    margin-left: calc(var(--schil-menu) + max(0px, (100% - var(--schil-menu) - var(--breedte)) / 2));
    margin-right: 0;
}
.mijn-menu {
    order: -1; position: sticky; top: 0; align-self: start; min-height: 60vh;
    display: flex; flex-direction: column; gap: 2px; padding: 1.2rem .8rem 2rem;
    background: var(--wit); border-right: 1px solid var(--lijn); font-size: .92rem;
}
.mijn-menu a {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .45rem .7rem; border-radius: 8px; color: var(--ink); text-decoration: none;
}
.mijn-menu a:hover { background: var(--groen-050); color: var(--groen-900); }
.mijn-menu a.actief { background: var(--groen); color: #fff; font-weight: 650; }
.mijn-menu-groep { margin: 1rem .7rem .25rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.mijn-menu-groep:first-child { margin-top: 0; }
.mijn-menu .teller:empty { display: none; }
.mijn-menu .teller { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--amber); color: #3a2400; font-size: .75rem; font-weight: 700; text-align: center; }
.mijn-menu .teller-stil { background: var(--groen-050); color: var(--groen-900); }
.mijn-menu a.actief .teller { background: #fff; color: var(--groen-900); }
.mijn-inhoud [id] { scroll-margin-top: 1rem; }

/* Tabs binnen een onderdeel (Shared/_MijnTabs): direct onder de groene kop, elke tab een
   eigen pagina. Op een smal scherm schuiven ze horizontaal in plaats van af te breken. */
.mijn-tabs {
    display: flex; gap: .25rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--lijn); margin-top: 1rem; scrollbar-width: thin;
}
.mijn-tabs a {
    flex: 0 0 auto; padding: .7rem 1rem; margin-bottom: -1px; white-space: nowrap;
    color: var(--grijs); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent;
}
.mijn-tabs a:hover { color: var(--groen-900); border-bottom-color: var(--groen-050); }
.mijn-tabs a.actief { color: var(--groen-900); border-bottom-color: var(--groen); }
.mijn-tabs a:focus-visible { outline: 2px solid var(--groen); outline-offset: -2px; }

@media (max-width: 900px) {
    .mijn-schil { grid-template-columns: 1fr; }
    .schil-kop .container { margin-left: auto; margin-right: auto; }
    .mijn-menu { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--lijn); padding: .6rem 12px; }
    .mijn-menu-groep { display: none; }
}

/* ─── Gesprek tussen werkgever en kandidaat (via ons) ─────────────────────────── */
.gesprek-rooster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.bericht { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; max-width: 88%; }
.bericht-kop { font-size: .84rem; color: var(--grijs); margin-bottom: 4px; }
.bericht-tekst { white-space: pre-wrap; }
.bericht-kandidaat { background: var(--groen-050); border: 1px solid #cfe3dd; }
.bericht-werkgever { background: #fff; border: 1px solid var(--lijn); margin-left: auto; }
.bericht-systeem { max-width: none; text-align: center; font-size: .84rem; color: var(--grijs); padding: 4px; }
@media (max-width: 900px) { .gesprek-rooster { grid-template-columns: 1fr; } .bericht { max-width: 100%; } }

/* Kiezer voor beroepen en vaardigheden (ESCO): labels als aangevinkte selectievakjes. Het
   vakje zelf is verborgen maar bereikbaar; het label is de knop. Zie site.js (data-kiezer). */
.kiezer-labels, .kiezer-voorstellen { display: flex; flex-wrap: wrap; gap: 6px; margin: .2rem 0 .5rem; }
.kiezer-labels:empty { display: none; }
.kiezer-label {
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; user-select: none;
    padding: .28rem .7rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
    background: var(--groen-050); color: var(--groen-900); border: 1px solid transparent;
}
.kiezer-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kiezer-label:has(input:focus-visible) { outline: 2px solid var(--groen); outline-offset: 2px; }
.kiezer-label:has(input:checked)::after { content: "×"; font-weight: 700; opacity: .7; }
.kiezer-label:has(input:not(:checked)) { background: var(--wit); border-color: var(--lijn); color: var(--grijs); text-decoration: line-through; }
.kiezer-voorstel:has(input:not(:checked)) { text-decoration: none; border-style: dashed; color: var(--ink-700); }
.kiezer-voorstel:has(input:not(:checked))::before { content: "+"; font-weight: 700; color: var(--groen); }
.kiezer-voorstel-kop { margin: .6rem 0 .2rem; font-size: .85rem; color: var(--grijs); }
.esco-bron { margin: .9rem 0 0; font-size: .8rem; color: var(--grijs-400); }

/* Beroep en vaardigheden op de vacaturepagina en in de kaart: klikbaar naar het filter. */
.esco-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0 0; padding: 0; list-style: none; }
.esco-labels a { display: inline-block; padding: .22rem .65rem; border-radius: 999px; background: var(--groen-050); color: var(--groen-900); font-size: .85rem; font-weight: 600; text-decoration: none; }
.esco-labels a:hover { background: var(--groen); color: #fff; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filter-esco input[type=text] { width: 100%; }
.zoekbalk-extra { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.zoekbalk-extra input[type=text] { border: 1px solid var(--lijn); border-radius: var(--radius-s); padding: .6rem .8rem; }
.zoekbalk-extra input[type=text] { flex: 1 1 220px; }