/* ===== PUBLIEKE OPDRACHTEN-ETALAGE — EIGEN LICHT THEMA (ronde 95) =====
   Aanleiding: de eigenaar legde de etalage naast striive.com (HeadFirst-
   marktplaats) en oordeelde "de ui is niet goed genoeg" — de pagina erfde
   tot nu toe de donkere login-portalstijl (portal.css: zware kaarten,
   canvas-deeltjesanimatie, gradient/scanline-overlays) én had een bug
   waarbij het logo over de paginatitel viel.

   Deze pagina laadt portal.css NIET MEER en draait volledig op dit eigen
   bestand — een bewuste knip, geen "aanpassing" van portal.css (dat blijft
   ongewijzigd voor de ingelogde SPA). Redenen:
     1. De opdracht was een VOLLEDIG herontwerp naar vacaturebank-kwaliteit,
        niet een tint-aanpassing van de bestaande donkere kaarten.
     2. portal.css's `body{background:#0a0a0a;color:#fff}` + de canvas/
        gradient/scanline-effecten horen bij de "hacker/dark" identiteit van
        het ingelogde portaal — een publieke vacaturebank is een ANDERE
        productoppervlakte met een eigen, lichte identiteit.
     3. Geen CSS-specificity-oorlog met 2600+ regels gedeelde stijl: dit
        bestand is zelfstandig leesbaar van boven naar beneden.
   portal-core.js (canvas-animatie, sessie-herstel, branding-fetch) wordt om
   dezelfde reden niet meer geladen — dat script veronderstelt DOM-elementen
   (#canvas-bg, #supplier-name, #dashboard-section, ...) die op deze publieke
   pagina niet (meer) bestaan.

   Bewust GEEN prefers-color-scheme-dark-variant: dit is geen thema-bewuste
   app-component maar een vaste marketing/vacaturebank-pagina — Striive zelf
   wisselt ook niet mee met de OS-voorkeur van de bezoeker.
*/

:root {
    --brand-primary: #f36c21;
    --brand-primary-dark: #ea580c;
    --brand-primary-light: #fb923c;
    --brand-primary-deep: #c2410c;
    --brand-primary-rgb: 243, 108, 33;

    --etalage-bg: #f7f6f4;
    --etalage-paneel: #ffffff;
    --etalage-tekst: #1c1b1a;
    --etalage-tekst-zacht: #55524d;
    --etalage-tekst-mute: #8a867e;
    --etalage-rand: #e7e4de;
    --etalage-rand-zacht: #efece6;
    --etalage-schaduw: 0 1px 2px rgba(20, 18, 14, 0.04), 0 8px 24px rgba(20, 18, 14, 0.06);
    --etalage-schaduw-lg: 0 4px 8px rgba(20, 18, 14, 0.05), 0 20px 48px rgba(20, 18, 14, 0.09);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body.etalage-body {
    /* De mobiele detail-overlay (sectie 7) staat off-canvas via
       transform: translateX(100%) op een position:fixed element — in
       sommige engines telt dat toch mee in de scrollbare documentbreedte,
       met een onnodige horizontale scrollbalk tot gevolg. overflow-x:hidden
       op het document is de standaardoplossing voor precies dit off-canvas-
       transform-patroon. */
    overflow-x: hidden;
}

body.etalage-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
    background: var(--etalage-bg);
    color: var(--etalage-tekst);
    -webkit-font-smoothing: antialiased;
}

body.etalage-detail-open {
    overflow: hidden;
}

@media (min-width: 900px) {
    body.etalage-detail-open {
        overflow: auto;
    }
}

a {
    color: inherit;
}

/* ===== 1. TOPBAR =====
   Statisch (géén position:fixed) — de vorige overlap-bug ontstond doordat
   een FIXED topbar over de hero heen zweefde en de main-content een
   handmatige padding-top moest gokken om eronder te blijven. Door de
   topbar gewoon in de documentflow te laten meelopen kán dat structureel
   niet meer misgaan, bij geen enkele viewportbreedte. */
.etalage-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--etalage-rand-zacht);
}

.etalage-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.etalage-logo-badge {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.etalage-logo-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--etalage-tekst);
    white-space: nowrap;
}

.etalage-logo-text span {
    font-weight: 400;
    color: var(--etalage-tekst-mute);
}

.etalage-topbar-acties {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.etalage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.etalage-btn:active {
    transform: translateY(1px);
}

.etalage-btn-outline {
    background: transparent;
    border-color: var(--etalage-rand);
    color: var(--etalage-tekst);
}

.etalage-btn-outline:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
}

.etalage-btn-solid {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.28);
}

.etalage-btn-solid:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

.etalage-btn-lg {
    padding: 13px 24px;
    font-size: 0.95rem;
}

/* ===== 2. HERO ===== */
.etalage-hero {
    padding: 56px 32px 44px;
    border-bottom: 1px solid var(--etalage-rand-zacht);
    background:
        radial-gradient(ellipse 60% 100% at 100% 0%, rgba(var(--brand-primary-rgb), 0.07) 0%, transparent 60%),
        var(--etalage-paneel);
}

.etalage-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.etalage-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.etalage-hero p {
    margin: 0 0 22px;
    max-width: 620px;
    color: var(--etalage-tekst-zacht);
    line-height: 1.6;
    font-size: 1rem;
}

/* ===== 3. MAIN / ZOEK + FILTERS ===== */
.etalage-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 32px 72px;
}

.etalage-zoekbalk {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--etalage-paneel);
    border: 1px solid var(--etalage-rand);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--etalage-schaduw);
}

.etalage-zoekveld {
    flex: 2 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--etalage-rand);
    border-radius: 9px;
    background: var(--etalage-bg);
}

.etalage-zoekveld i {
    color: var(--etalage-tekst-mute);
}

.etalage-zoekveld input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 11px 0;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--etalage-tekst);
    outline: none;
    min-width: 0;
}

.etalage-zoekveld input::placeholder {
    color: var(--etalage-tekst-mute);
}

.etalage-select {
    flex: 1 1 170px;
    padding: 11px 14px;
    border: 1px solid var(--etalage-rand);
    border-radius: 9px;
    background: var(--etalage-bg);
    color: var(--etalage-tekst);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}

.etalage-select:focus,
.etalage-zoekveld:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}

.etalage-teller-rij {
    margin: 16px 2px 18px;
    min-height: 26px;
}

.etalage-teller-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary-dark);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ===== 4. TWEEKOLOMS LAYOUT ===== */
.etalage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

@media (min-width: 900px) {
    .etalage-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    }
}

.etalage-lijst-kolom {
    min-width: 0;
}

/* ===== 5. COMPACTE LIJSTRIJEN (het hart van de Striive-look) ===== */
.etalage-lijst {
    background: var(--etalage-paneel);
    border: 1px solid var(--etalage-rand);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--etalage-schaduw);
}

.etalage-rij {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    /* Eigenaarsmelding 26-08: max-height kapte rijen met een lange uren-/
       locatietekst af (de titel viel half buiten beeld, bv. "Adviseur WBSO
       ICT" met de meerregelige Zwolle-urenomschrijving). min-height houdt
       het compacte ritme; een lange rij groeit gewoon mee. */
    min-height: 72px;
    border-bottom: 1px solid var(--etalage-rand-zacht);
    cursor: pointer;
    text-align: left;
    background: transparent;
    transition: background 0.12s ease;
    /* Ronde 98 — de rij is nu een ECHTE <a href="/opdrachten/{slug}"> (zie
       opdrachten.js::renderOpdrachten) i.p.v. een kale <div>, zodat
       crawlers de link zien; text-decoration/color-reset zodat dat visueel
       niets verandert t.o.v. de vorige div-rij. */
    text-decoration: none;
    color: inherit;
}

.etalage-lijst .etalage-rij:last-child {
    border-bottom: none;
}

.etalage-rij:hover,
.etalage-rij:focus-visible {
    background: rgba(var(--brand-primary-rgb), 0.045);
}

.etalage-rij:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.etalage-rij.is-actief {
    background: rgba(var(--brand-primary-rgb), 0.08);
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.etalage-rij-icoon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-primary-rgb), 0.09);
    color: var(--brand-primary-dark);
    font-size: 0.95rem;
}

.etalage-rij-body {
    flex: 1;
    min-width: 0;
}

.etalage-rij-titel {
    margin: 0 0 2px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--etalage-tekst);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.etalage-rij-functiegroep {
    margin: 0 0 3px;
    font-size: 0.76rem;
    color: var(--etalage-tekst-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.etalage-rij-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.74rem;
    color: var(--etalage-tekst-zacht);
    white-space: nowrap;
}

.etalage-rij-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.etalage-rij-meta i {
    color: var(--etalage-tekst-mute);
    font-size: 0.7rem;
}

.etalage-rij-rechts {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.etalage-stroom-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--etalage-bg);
    border: 1px solid var(--etalage-rand);
    color: var(--etalage-tekst-mute);
    white-space: nowrap;
}

.etalage-stroom-label.is-vast {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.3);
    color: #15803d;
}

.etalage-rij-rechts > i {
    color: var(--etalage-tekst-mute);
    font-size: 0.8rem;
}

/* ===== 6. PAGINATIE ===== */
.etalage-paginatie {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 18px 0 4px;
}

.etalage-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--etalage-rand);
    background: var(--etalage-paneel);
    color: var(--etalage-tekst);
    cursor: pointer;
}

.etalage-pager-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.etalage-pager-btn:not(:disabled):hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
}

.etalage-pager-label {
    font-size: 0.82rem;
    color: var(--etalage-tekst-mute);
}

/* ===== 7. DETAIL-KOLOM (rechterpaneel — desktop inline, mobiel overlay) ===== */
.etalage-detail-kolom {
    background: var(--etalage-paneel);
    border: 1px solid var(--etalage-rand);
    border-radius: 14px;
    box-shadow: var(--etalage-schaduw);
    min-height: 220px;
}

@media (min-width: 900px) {
    .etalage-detail-kolom {
        position: sticky;
        top: 84px;
        max-height: calc(100vh - 108px);
        overflow-y: auto;
    }
}

@media (max-width: 899.98px) {
    .etalage-detail-kolom {
        position: fixed;
        inset: 0;
        z-index: 60;
        border-radius: 0;
        border: none;
        transform: translateX(100%);
        transition: transform 0.22s ease;
        overflow-y: auto;
        box-shadow: none;
    }

    .etalage-detail-kolom.is-actief {
        transform: translateX(0);
    }
}

.etalage-detail-placeholder {
    padding: 40px 28px;
    text-align: center;
    color: var(--etalage-tekst-zacht);
}

.etalage-detail-placeholder i {
    font-size: 1.8rem;
    color: var(--brand-primary);
    margin-bottom: 14px;
}

.etalage-detail-placeholder h2 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--etalage-tekst);
}

.etalage-detail-placeholder p {
    margin: 0 0 20px;
    font-size: 0.86rem;
    line-height: 1.55;
}

.etalage-detail-content {
    padding: 26px 28px 30px;
}

.etalage-detail-sluit {
    display: none;
}

@media (max-width: 899.98px) {
    .etalage-detail-sluit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid var(--etalage-rand);
        background: var(--etalage-paneel);
        color: var(--etalage-tekst-zacht);
        cursor: pointer;
        margin-bottom: 16px;
    }
}

.etalage-detail-stroom-rij {
    margin-bottom: 12px;
}

.etalage-detail-client {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    color: var(--etalage-tekst-mute);
    background: var(--etalage-bg);
    border: 1px solid var(--etalage-rand-zacht);
    padding: 5px 11px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.etalage-detail-titel {
    margin: 0 0 16px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
}

.etalage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.etalage-chip {
    font-size: 0.74rem;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--etalage-bg);
    border: 1px solid var(--etalage-rand);
    color: var(--etalage-tekst-zacht);
}

.etalage-chip-functiegroep {
    background: rgba(var(--brand-primary-rgb), 0.09);
    border-color: rgba(var(--brand-primary-rgb), 0.25);
    color: var(--brand-primary-dark);
    font-weight: 600;
}

/* Sector-label (ronde 100 — SEO-laag 2): "Rijksoverheid" / "Overheid &
   publiek" — een neutrale, eigen kleur (niet de merkkleur van
   .etalage-chip-functiegroep hierboven) zodat de twee chip-soorten
   visueel uit elkaar te houden zijn. */
.etalage-chip-sector {
    background: rgba(15, 118, 110, 0.1);
    border-color: rgba(15, 118, 110, 0.3);
    color: #0f766e;
    font-weight: 600;
}

/* Compacte variant in de lijstrij/rechterzone (.etalage-rij-rechts) —
   zelfde formaat als .etalage-stroom-label ernaast, i.p.v. de grotere
   detail-chip hierboven. */
.etalage-rij-rechts .etalage-chip-sector {
    font-size: 0.66rem;
    padding: 3px 8px;
    border-radius: 999px;
}

.etalage-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin: 20px 0;
    padding: 16px;
    background: var(--etalage-bg);
    border-radius: 10px;
    border: 1px solid var(--etalage-rand-zacht);
}

.etalage-detail-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--etalage-tekst-mute);
    margin-bottom: 3px;
}

.etalage-detail-waarde {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--etalage-tekst);
}

.etalage-detail-samenvatting {
    color: var(--etalage-tekst-zacht);
    line-height: 1.65;
    font-size: 0.9rem;
    margin: 0 0 24px;
}

.etalage-detail-actie {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}

.etalage-detail-hint {
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--etalage-tekst-mute);
}

.etalage-detail-hint a {
    color: var(--brand-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.etalage-detail-hint a:hover {
    text-decoration: underline;
}

/* ===== 8. LEEG-/FOUTSTATUS + SPINNER ===== */
.etalage-status {
    padding: 48px 24px;
    text-align: center;
    color: var(--etalage-tekst-zacht);
}

.etalage-status i {
    font-size: 1.7rem;
    color: var(--etalage-tekst-mute);
    margin-bottom: 12px;
}

.etalage-status h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--etalage-tekst);
}

.etalage-status p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.etalage-spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 3px solid var(--etalage-rand);
    border-top-color: var(--brand-primary);
    animation: etalageSpin 0.8s linear infinite;
}

@keyframes etalageSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Kleine INLINE knop-spinner (ronde 99) — ``.etalage-spinner`` hierboven is
   een volle-paneel-laadstatus (30px); knoppen (opdracht-alerts.js/
   alert-bevestigen.js/alert-uitschrijven.js) hebben een kleinere, inline
   variant nodig terwijl ze "bezig" tonen. */
.etalage-btn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: etalageSpin 0.8s linear infinite;
}

/* ===== 9. CTA-BANNER (onderaan de lijst-kolom) ===== */
.etalage-cta-banner {
    margin-top: 22px;
    padding: 26px 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.08), rgba(var(--brand-primary-rgb), 0.03));
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.etalage-cta-banner h2 {
    margin: 0 0 4px;
    font-size: 1.02rem;
}

.etalage-cta-banner p {
    margin: 0;
    max-width: 420px;
    color: var(--etalage-tekst-zacht);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ===== 10. FOOTER ===== */
.etalage-footer {
    padding: 26px 32px 40px;
    text-align: center;
    color: var(--etalage-tekst-mute);
    font-size: 0.78rem;
}

/* ===== RESPONSIVE FIJNSLIJP ===== */
@media (max-width: 640px) {
    .etalage-topbar {
        padding: 14px 18px;
    }

    .etalage-hero {
        padding: 36px 18px 32px;
    }

    .etalage-main {
        padding: 22px 18px 56px;
    }

    .etalage-rij {
        max-height: none;
        padding: 12px 14px;
    }

    .etalage-cta-banner {
        padding: 20px;
    }
}

/* Smalle telefoons (bv. 375px breed): logo + 2 knoppen passen niet meer op
   één rij op de standaardmaten — gevonden tijdens de visuele controle van
   ronde 95 (de "Registreren"-knop viel deels buiten beeld). Ondertitel weg,
   knoppen compacter, i.p.v. laten overlappen/afknippen. */
@media (max-width: 480px) {
    .etalage-logo-text span {
        display: none;
    }

    .etalage-topbar-acties {
        gap: 6px;
    }

    .etalage-topbar .etalage-btn {
        padding: 8px 12px;
        font-size: 0.78rem;
    }
}

/* ===== 11. STANDALONE OPDRACHT-PAGINA (ronde 98 — SEO-fundament) =====
   GET /opdrachten/{slug} (routes/seo.py + services/seo_service.py) rendert
   server-side BUITEN de lijst/rechterpaneel-context van opdrachten.html —
   geen JS-lijst ernaast, geen sticky-rechterpaneel-scroll-choreografie.
   Hergebruikt .etalage-detail-kolom/-content 1-op-1 voor de visuele stijl
   (zelfde kaart, chips, detail-grid, CTA's), deze sectie voegt alleen de
   paginalayout eromheen toe + neutraliseert de sticky/fixed-positionering
   die daar voor het rechterpaneel-náást-de-lijst bedoeld is (die zou hier,
   zonder scrollende lijst ernaast, gewoon onzin geven). */
.etalage-opdracht-pagina {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 32px 72px;
}

.etalage-opdracht-terug {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--etalage-tekst-zacht);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
}

.etalage-opdracht-terug:hover {
    color: var(--brand-primary-dark);
}

.etalage-detail-kolom--standalone {
    position: static;
    max-height: none;
    overflow: visible;
    transform: none;
    box-shadow: var(--etalage-schaduw-lg);
}

.etalage-opdracht-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.etalage-opdracht-alles {
    margin: 20px 4px 0;
    font-size: 0.86rem;
}

.etalage-opdracht-alles a {
    color: var(--brand-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.etalage-opdracht-alles a:hover {
    text-decoration: underline;
}

/* Permalink-"deelknop" in het rechterpaneel van opdrachten.html (ronde 98,
   opdrachten.js::renderDetail) — een kopieer-link-knop naast de bestaande
   CTA's, géén vervanging daarvan. Puur visueel/progressive-enhancement:
   werkt de klik niet (bv. clipboard-API ontbreekt), dan blijft de link
   gewoon een normale <a href> naar de server-side pagina. */
.etalage-detail-deel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 9px;
    border: 1px solid var(--etalage-rand);
    background: var(--etalage-paneel);
    color: var(--etalage-tekst-zacht);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.etalage-detail-deel:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
}

@media (max-width: 640px) {
    .etalage-opdracht-pagina {
        padding: 22px 18px 56px;
    }
}

/* ===== 12. "MELDING INSTELLEN" (ronde 99 — publieke e-mail-alert, zie
   public/js/opdracht-alerts.js) — leeft in het rechterpaneel-placeholder-
   gebied (#etalage-detail-placeholder) van sectie 7 hierboven, past dus bij
   diezelfde lichte kaart-stijl i.p.v. een eigen paneel te introduceren. */
.etalage-alert-blok {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px dashed var(--etalage-rand);
    text-align: left;
}

.etalage-alert-blok i {
    font-size: 1.4rem;
    color: var(--brand-primary);
    margin-bottom: 8px;
    display: block;
    text-align: center;
}

.etalage-alert-blok h2 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--etalage-tekst);
    text-align: center;
}

.etalage-alert-blok > p {
    margin: 0 0 16px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--etalage-tekst-zacht);
    text-align: center;
}

#etalage-alert-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#etalage-alert-form input[type="email"],
#etalage-alert-form select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--etalage-rand);
    border-radius: 9px;
    background: var(--etalage-bg);
    color: var(--etalage-tekst);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

#etalage-alert-form select {
    cursor: pointer;
}

#etalage-alert-form input[type="email"]:focus,
#etalage-alert-form select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}

#etalage-alert-form button {
    width: 100%;
    justify-content: center;
}

/* Honeypot: buiten beeld + geen tabstop, blijft "aanwezig" voor een simpele
   form-filler-bot — zelfde afweging als .registreer-honeypot. */
.etalage-alert-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.etalage-alert-melding {
    padding: 10px 12px;
    border-radius: 9px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: left;
}

.etalage-alert-succes {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    color: #0f7a56;
}

.etalage-alert-fout {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #b91c1c;
}

/* ===== 13. LICHTE STANDALONE-PAGINA'S (alert-bevestigen.html/
   alert-uitschrijven.html, ronde 99) — dezelfde etalage-basisstijl
   (topbar/knoppen/variabelen) hierboven, plus een kleine gecentreerde kaart
   voor een boodschap + één actieknop. */
.etalage-smalle-main {
    max-width: 480px;
    margin: 0 auto;
    padding: 90px 24px 60px;
}

.etalage-smalle-kaart {
    background: var(--etalage-paneel);
    border: 1px solid var(--etalage-rand);
    border-radius: 14px;
    box-shadow: var(--etalage-schaduw);
    padding: 36px 30px;
    text-align: center;
}

.etalage-smalle-kaart i {
    font-size: 2rem;
    color: var(--brand-primary);
    margin-bottom: 14px;
}

.etalage-smalle-kaart h1 {
    margin: 0 0 10px;
    font-size: 1.3rem;
    color: var(--etalage-tekst);
}

.etalage-smalle-kaart p {
    margin: 0 0 22px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--etalage-tekst-zacht);
}

.etalage-smalle-kaart .etalage-alert-melding {
    text-align: left;
}

/* ===== 14. VAKGEBIED-LANDINGSPAGINA'S (ronde 100 — SEO-laag 2,
   GET /opdrachten/vakgebied/{slug}, routes/seo.py + services/seo_service.py)
   — hergebruikt .etalage-opdracht-pagina (sectie 11) voor de paginabreedte/
   -padding en .etalage-rij/.etalage-chip*/.etalage-cta-banner (secties 5/9)
   voor de opdrachtenlijst/sector-chip/CTA-banner-stijl; deze sectie voegt
   alleen de nieuwe, vakgebied-specifieke elementen toe (H1/intro/lege-
   status/andere-vakgebieden-nav). ===== */
.etalage-vakgebied-titel {
    margin: 4px 0 12px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--etalage-tekst);
}

.etalage-vakgebied-intro {
    margin: 0 0 24px;
    max-width: 640px;
    color: var(--etalage-tekst-zacht);
    font-size: 0.92rem;
    line-height: 1.6;
}

.etalage-vakgebied-lijst {
    background: var(--etalage-paneel);
    border: 1px solid var(--etalage-rand);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--etalage-schaduw);
    margin-bottom: 24px;
}

.etalage-vakgebied-lijst .etalage-rij:last-child {
    border-bottom: none;
}

.etalage-vakgebied-leeg {
    padding: 32px 24px;
    margin: 0;
    text-align: center;
    color: var(--etalage-tekst-zacht);
    font-size: 0.9rem;
    line-height: 1.6;
}

.etalage-vakgebied-andere {
    margin: 28px 0 8px;
}

.etalage-vakgebied-andere h2 {
    margin: 0 0 10px;
    font-size: 0.92rem;
    color: var(--etalage-tekst);
}

.etalage-vakgebied-andere ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.etalage-vakgebied-andere li {
    margin: 0;
}

.etalage-vakgebied-andere a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--etalage-bg);
    border: 1px solid var(--etalage-rand);
    color: var(--etalage-tekst-zacht);
    font-size: 0.78rem;
    text-decoration: none;
}

.etalage-vakgebied-andere a:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
}

@media (max-width: 640px) {
    .etalage-vakgebied-titel {
        font-size: 1.25rem;
    }
}

/* ===== 15. AI-MATCHTEASER (ronde 102 — eigenaarsopdracht, dé USP-hook) =====
   "Upload je CV, zie direct op welke opdrachten je past" — publiek,
   ongeauthenticeerd blok tussen de hero en de opdrachtenlijst (zie
   public/opdrachten.html, public/js/matchteaser.js). Eigen sectie i.p.v.
   hergebruik van .etalage-alert-blok (sectie 12): dat blok leeft BINNEN het
   rechterpaneel-placeholder-gebied van de lijstweergave, dit is een
   full-width hero-achtige sectie op een heel andere plek in de pagina. */
.etalage-teaser {
    padding: 40px 32px 8px;
    background: linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.06) 0%, transparent 100%);
    border-bottom: 1px solid var(--etalage-rand-zacht);
}

.etalage-teaser-inner {
    max-width: 900px;
    margin: 0 auto;
}

.etalage-teaser-intro {
    text-align: center;
    margin-bottom: 24px;
}

.etalage-teaser-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-primary-dark);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.etalage-teaser-intro h2 {
    margin: 0 0 8px;
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.etalage-teaser-intro p {
    margin: 0 auto;
    max-width: 560px;
    color: var(--etalage-tekst-zacht);
    line-height: 1.6;
    font-size: 0.94rem;
}

.etalage-teaser-kaart {
    background: var(--etalage-paneel);
    border: 1px solid var(--etalage-rand);
    border-radius: 16px;
    box-shadow: var(--etalage-schaduw-lg);
    padding: 26px 28px 24px;
    margin-bottom: 32px;
}

/* Tabs: Upload CV / Plak profieltekst — client-side wissel, zie
   matchteaser.js::wisselTab. */
.etalage-teaser-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--etalage-rand-zacht);
}

.etalage-teaser-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 4px 11px;
    margin-right: 18px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--etalage-tekst-mute);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.etalage-teaser-tab.is-actief {
    color: var(--brand-primary-dark);
    border-bottom-color: var(--brand-primary);
}

.etalage-teaser-veld {
    margin-bottom: 14px;
}

.etalage-teaser-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 18px;
    border: 1.5px dashed var(--etalage-rand);
    border-radius: 12px;
    background: var(--etalage-bg);
    color: var(--etalage-tekst-zacht);
    text-align: center;
    font-size: 0.86rem;
    cursor: pointer;
}

.etalage-teaser-upload:hover,
.etalage-teaser-upload.is-dragover {
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
    background: rgba(var(--brand-primary-rgb), 0.05);
}

.etalage-teaser-upload i {
    font-size: 1.5rem;
    color: var(--brand-primary);
}

.etalage-teaser-upload.heeft-bestand {
    border-style: solid;
    color: var(--etalage-tekst);
}

#etalage-teaser-tekst {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--etalage-rand);
    border-radius: 12px;
    background: var(--etalage-bg);
    color: var(--etalage-tekst);
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

#etalage-teaser-tekst:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}

.etalage-teaser-avg {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--etalage-tekst-mute);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#etalage-teaser-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

/* ===== Resultaten ===== */
.etalage-teaser-resultaat {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--etalage-rand);
}

.etalage-teaser-resultaat-titel {
    margin: 0 0 14px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--etalage-tekst);
}

.etalage-teaser-rij {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--etalage-rand);
    border-radius: 11px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
}

a.etalage-teaser-rij:hover {
    border-color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.04);
}

.etalage-teaser-rij-score {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary-dark);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
}

.etalage-teaser-rij-score span {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--etalage-tekst-mute);
    margin-top: 2px;
}

.etalage-teaser-rij-inhoud {
    flex: 1 1 auto;
    min-width: 0;
}

.etalage-teaser-rij-titel {
    margin: 0 0 3px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--etalage-tekst);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.etalage-teaser-rij-meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--etalage-tekst-mute);
}

.etalage-teaser-rij i.fa-chevron-right {
    flex: 0 0 auto;
    color: var(--etalage-tekst-mute);
}

.etalage-teaser-leeg,
.etalage-teaser-onbeschikbaar {
    text-align: center;
    padding: 18px 12px;
    color: var(--etalage-tekst-zacht);
    font-size: 0.86rem;
}

.etalage-teaser-cta {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--etalage-rand);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.etalage-teaser-cta p {
    margin: 0 0 4px;
    width: 100%;
    font-size: 0.82rem;
    color: var(--etalage-tekst-zacht);
}

@media (max-width: 640px) {
    .etalage-teaser {
        padding: 30px 18px 4px;
    }

    .etalage-teaser-kaart {
        padding: 20px 16px 18px;
    }

    .etalage-teaser-rij-titel {
        white-space: normal;
    }
}


/* ============================================================
   20. VAKGEBIED-LINKBLOK (SEO-audit 24-08-2026, punt 6) — het server-side
   gerenderde "Opdrachten per vakgebied"-blok dat routes/seo.py in de
   placeholder onderaan opdrachten.html zet. Bewust rustig vormgegeven:
   het is een echt navigatie-element voor bezoekers EN het crawlbare pad
   naar de vakgebied-landingspagina's — geen verstopte linkfarm.
   ============================================================ */
.etalage-vakgebied-links {
    max-width: 1180px;
    margin: 2.5rem auto 1.5rem;
    padding: 0 1.25rem;
}

.etalage-vakgebied-links h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--etalage-tekst-zacht, #5a6472);
    margin: 0 0 .75rem;
}

.etalage-vakgebied-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.etalage-vakgebied-links a {
    display: inline-block;
    padding: .35rem .8rem;
    border: 1px solid var(--etalage-rand, #dde3ea);
    border-radius: 999px;
    font-size: .85rem;
    color: inherit;
    text-decoration: none;
    background: var(--etalage-kaart, #fff);
}

.etalage-vakgebied-links a:hover {
    border-color: var(--etalage-accent, #2563eb);
    color: var(--etalage-accent, #2563eb);
}