/* ============================================
   Portaal en beheer (ontwerpen in docs/superpowers/specs/ontwerpen/)
   Portaal: witte balk met label "Portaal". Beheer: donkere balk met oranje label "Beheer".
   ============================================ */
:root {
    --rand: #e2e8f0;
    --rand-licht: #f1f5f9;
    --inkt: #0f172a;
    --tekst: #334155;
    --gedempt: #64748b;
    --beheer: #c2410c;
    --beheer-licht: #ffedd5;
    --beheer-donker: #9a3412;
}

body.omgeving-portaal, body.omgeving-beheer, body.omgeving-los { background: #fff; color: var(--tekst); font-size: 15px; line-height: 1.6; }
body.omgeving-los { background: #f8fafc; }
.omgeving-portaal h1, .omgeving-beheer h1, .omgeving-los h1 { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--inkt); letter-spacing: -0.03em; margin: 0 0 4px; line-height: 1.2; }
.omgeving-portaal h2, .omgeving-beheer h2, .omgeving-los h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--inkt); margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.gedempt { color: var(--gedempt); }
.klein { font-size: 13px; }
.vet { font-weight: 600; }
.groen { color: #15803d; }
.oranje { color: #ea580c; }
.honing { position: absolute; left: -9999px; }

/* --- Bovenbalk --- */
.portaalbalk, .beheerbalk { height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--rand); background: #fff; font-size: 14px; }
.beheerbalk { background: var(--inkt); border-bottom-color: #1e293b; color: #cbd5e1; }
.portaalbalk-logo { display: flex; align-items: center; gap: 10px; min-width: 206px; text-decoration: none; }
.logo-tekst { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--inkt); letter-spacing: -0.03em; text-decoration: none; }
.logo-tekst span { color: var(--primary); }
.beheerbalk .logo-tekst { color: #fff; }
.beheerbalk .logo-tekst span { color: #38bdf8; }
.omgeving-label { font-size: 11px; font-weight: 700; color: var(--primary-donker); background: var(--primary-light); border-radius: 6px; padding: 2px 7px; text-transform: uppercase; letter-spacing: .04em; }
.beheerbalk .omgeving-label { color: #fff; background: var(--beheer); }
.vestiging-kiezer { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 6px; border: 1px solid var(--rand); border-radius: 10px; background: #fff; color: var(--inkt); }
.vestiging-kiezer select { border: none; font: inherit; font-weight: 700; color: var(--inkt); background: transparent; max-width: 320px; cursor: pointer; }
.vestiging-kiezer--vast { border-color: transparent; }
.vestiging-initialen { width: 32px; height: 32px; border-radius: 8px; background: var(--primary-light); color: var(--primary-donker); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; flex-shrink: 0; }
.vestiging-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.vestiging-tekst span { font-size: 12px; color: var(--gedempt); }
.balk-ruimte { flex-grow: 1; }
.balk-link { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primary-donker); text-decoration: none; }
.beheerbalk .balk-link { color: #cbd5e1; }
.balk-gebruiker { display: flex; align-items: center; gap: 10px; }
.gebruiker-rondje { width: 34px; height: 34px; border-radius: 50%; background: var(--inkt); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.beheerbalk .gebruiker-rondje { background: var(--beheer); }
.uitloggen button { font: inherit; background: none; border: none; color: #475569; cursor: pointer; padding: 10px 0; min-height: 44px; }
.beheerbalk .uitloggen button { color: #94a3b8; }
.beheer-zoek { display: flex; align-items: center; gap: 10px; width: 420px; max-width: 40vw; height: 40px; padding: 0 12px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; color: #94a3b8; }
.beheer-zoek input { flex-grow: 1; background: transparent; border: none; outline: none; color: #fff; font: inherit; }

/* --- Layout met menu --- */
.omgeving-layout { display: flex; min-height: calc(100vh - 64px); }
.omgeving-menu { width: 248px; flex-shrink: 0; background: #f8fafc; border-right: 1px solid var(--rand); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.omgeving-menu a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--tekst); font-weight: 500; text-decoration: none; }
.omgeving-menu a:hover { background: #eef2f7; }
.omgeving-menu a.actief { background: var(--primary-light); color: var(--primary-donker); font-weight: 700; }
.omgeving-beheer .omgeving-menu a.actief { background: var(--beheer-licht); color: var(--beheer-donker); }
.omgeving-menu a span { flex-grow: 1; }
.menu-teller { flex-grow: 0 !important; font-size: 11px; font-weight: 700; background: var(--beheer); color: #fff; border-radius: 999px; padding: 1px 7px; }
.menu-groep { font-size: 11px; font-weight: 700; color: var(--gedempt); text-transform: uppercase; letter-spacing: .06em; padding: 14px 12px 4px; }
.menu-score { margin-top: 20px; background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 14px; }
.menu-score a { font-size: 13px; font-weight: 600; min-height: 0; padding: 0; display: inline; color: var(--primary-donker); }
.menu-score-titel { font-size: 13px; font-weight: 600; color: var(--inkt); }
.menu-voet { margin-top: auto; font-size: 13px; color: #475569; padding: 16px 8px 0; }
.menu-voet a { display: inline; padding: 0; min-height: 0; color: var(--primary-donker); }
.omgeving-main { flex-grow: 1; min-width: 0; padding: 32px 40px 60px; display: flex; flex-direction: column; gap: 24px; max-width: 1100px; }

.voortgang { height: 8px; background: var(--rand); border-radius: 4px; margin: 8px 0; overflow: hidden; }
.voortgang div { height: 8px; background: #16a34a; }
.voortgang--groot { margin: 10px 0 14px; }

/* --- Blokken --- */
.blok { border: 1px solid var(--rand); border-radius: 12px; padding: 20px 22px; background: #fff; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.blok--accent { border: 2px solid var(--primary); }
.blok--donker { background: var(--inkt); color: #e2e8f0; border: none; }
.blok--donker p { margin: 0; font-size: 14px; color: #cbd5e1; }
.blok-titel { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--inkt); }
.blok-donker-titel { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff; line-height: 1.25; }
.blok-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.blok p { margin: 0; }
.kop-rij { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.twee-kolom { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.twee-kolom--form { gap: 24px; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.raster-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pil { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .04em; align-self: flex-start; }
.pil--groen { color: #15803d; background: #f0fdf4; }
.pil--wit { color: var(--inkt); background: #fff; }
.pil--oranje { color: var(--beheer); background: #fff7ed; }
.pil--grijs { color: #475569; background: var(--rand-licht); }

/* --- Knoppen (min. 44 px) --- */
.knop-primair, .knop-zacht, .knop-rand, .knop-wit, .knop-gevaar { font: inherit; font-weight: 700; min-height: 44px; padding: 0 22px; border-radius: 10px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.knop-primair { background: var(--primary-donker); color: #fff; }
.knop-primair:hover { background: #075985; color: #fff; }
.knop-primair[disabled], .knop-zacht[disabled] { opacity: .5; cursor: not-allowed; }
.knop-zacht { background: var(--primary-light); color: var(--primary-donker); font-weight: 600; }
.knop-rand { background: #fff; border: 1px solid #cbd5e1; color: var(--inkt); font-weight: 600; font-size: 14px; min-height: 40px; padding: 0 14px; }
.knop-wit { background: #fff; color: var(--inkt); margin-top: auto; }
.knop-gevaar { background: #fff; border: 1px solid #fecaca; color: #b91c1c; font-weight: 600; }
.knop-links { align-self: flex-start; }
.knop-tekst { font: inherit; background: none; border: none; color: var(--gedempt); cursor: pointer; min-height: 44px; }
.omgeving-beheer .knop-primair { background: var(--beheer); }
.omgeving-beheer .knop-primair:hover { background: var(--beheer-donker); }
.knop-groen { background: #15803d !important; }

/* --- Formulieren --- */
.veld { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--inkt); font-size: 14px; }
.veld input, .veld select, .veld textarea, .diensten-rij input[type=text], .domein-veld input { font: inherit; font-weight: 400; min-height: 44px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: var(--inkt); width: 100%; box-sizing: border-box; }
.veld textarea { padding: 10px 12px; line-height: 1.5; min-height: 0; }
.veld input:focus, .veld select:focus, .veld textarea:focus, .diensten-rij input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.veld-hint { font-size: 12px; font-weight: 500; color: #b45309; }
.veld-label { font-size: 14px; font-weight: 600; color: var(--inkt); }
.veld-voet { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--gedempt); }
.vinkje { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 500; color: var(--tekst); min-height: 28px; }
.vinkje input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.vinkjes-rij { display: flex; flex-wrap: wrap; gap: 8px 20px; }
fieldset.blok { margin: 0; }
fieldset.blok legend { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--inkt); padding: 0 6px; margin-left: -6px; }
fieldset.raster-2 legend { grid-column: 1 / -1; }
fieldset[disabled] { opacity: .75; }
.formulier-portaal { display: flex; flex-direction: column; gap: 18px; }
.opslaan-rij { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.euro-veld { display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; }
.euro-veld span { padding: 0 10px; color: var(--gedempt); background: var(--rand-licht); align-self: stretch; display: flex; align-items: center; }
.euro-veld input { border: none !important; border-radius: 0 !important; }

/* --- Meldingen --- */
.melding { border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.melding--goed { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.melding--let-op { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.melding--fout { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* --- Overzicht --- */
.takenlijst { display: flex; flex-direction: column; }
.taak { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rand-licht); font-size: 14px; }
.taak-vink { width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.taak-open { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cbd5e1; box-sizing: border-box; flex-shrink: 0; }
.taak-tekst { flex-grow: 1; }
.snel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.snel-tegel { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--rand); border-radius: 12px; color: var(--tekst); text-decoration: none; line-height: 1.4; }
.snel-tegel:hover { border-color: var(--primary); }
.snel-tegel svg { color: var(--primary-donker); flex-shrink: 0; }

/* --- Diensten --- */
.diensten-categorie { padding: 0; gap: 0; }
.diensten-categorie summary { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 22px; cursor: pointer; list-style: none; }
.diensten-categorie summary::-webkit-details-marker { display: none; }
.diensten-categorie summary h2::before { content: '▸ '; color: var(--gedempt); }
.diensten-categorie[open] summary h2::before { content: '▾ '; }
.diensten-tabel { border: none; margin: 0; padding: 0 0 8px; }
.diensten-rij { display: grid; grid-template-columns: 36px minmax(0, 1.4fr) 110px 110px minmax(0, 1.6fr); gap: 12px; align-items: center; padding: 8px 22px; border-top: 1px solid var(--rand-licht); font-size: 14px; }
.diensten-rij input[type=checkbox] { width: 20px; height: 20px; }
.diensten-rij label { color: var(--inkt); font-weight: 600; }
.diensten-kop { font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; border-top: none; }

/* --- Voorbeeldkaart --- */
.voorbeeld-zijbalk { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 10px; }
.voorbeeld-kaart { border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.voorbeeld-kop { display: flex; align-items: center; gap: 10px; color: var(--inkt); }

/* --- Losse pagina's (inloggen, claimen) --- */
.los-balk { height: 56px; border-bottom: 1px solid var(--rand); background: #fff; }
.los-balk-binnen { max-width: 1140px; margin: 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.los-main { padding: 40px 16px 60px; }
.omgeving-los .los-main { background: #f0f9ff; min-height: calc(100vh - 56px); }
.inlog-wrap { display: flex; justify-content: center; }
.kaart-los { width: 440px; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 36px; box-shadow: 0 8px 30px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 16px; }
.kaart-los h1 { font-size: 26px; }
.kaart-los p { margin: 0; color: #475569; }
.kaart-icoon { width: 56px; height: 56px; border-radius: 14px; background: var(--primary-light); color: var(--primary-donker); display: flex; align-items: center; justify-content: center; }
.kaart-voet { font-size: 13px; color: #475569; border-top: 1px solid var(--rand-licht); padding-top: 14px; }
.claim-wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.claim-wrap h1 { font-size: 30px; margin-top: 6px; }
.claim-bedrijf { flex-direction: row; align-items: center; gap: 16px; }
.claim-bedrijf-tekst { flex-grow: 1; min-width: 0; }
.initialen-groot { width: 52px; height: 52px; border-radius: 10px; background: var(--primary-light); color: var(--primary-donker); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; flex-shrink: 0; }
.claim-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.claim-routes--een { grid-template-columns: minmax(0, 1fr); }
.domein-veld { display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; font-size: 14px; }
.domein-veld input { border: none !important; border-radius: 0 !important; width: 45% !important; }
.domein-veld span { padding: 0 12px; background: var(--rand-licht); color: #475569; flex-grow: 1; align-self: stretch; display: flex; align-items: center; word-break: break-all; }

/* --- Meekijken --- */
.meekijkbalk { background: var(--beheer); color: #fff; padding: 10px 24px; display: flex; align-items: center; gap: 16px; font-size: 14px; }
.meekijkbalk form { margin-left: auto; }
.meekijkbalk button { font: inherit; font-weight: 700; background: #fff; color: var(--beheer); border: none; border-radius: 8px; min-height: 36px; padding: 0 14px; cursor: pointer; }

/* --- Beheer: lijsten en tabellen --- */
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tegel { border: 1px solid var(--rand); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--tekst); display: flex; flex-direction: column; }
.tegel--actie { border-color: #fdba74; background: #fff7ed; }
.tegel-getal { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--inkt); line-height: 1.2; }
.tegel--actie .tegel-getal { color: var(--beheer); }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { text-align: left; font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
.tabel td { padding: 10px; border-bottom: 1px solid var(--rand-licht); vertical-align: top; }
.tabel a { font-weight: 600; }
.oud { color: #991b1b; text-decoration: line-through; word-break: break-word; }
.nieuw { color: #166534; word-break: break-word; }
.claims-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.claim-item { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 10px; text-decoration: none; color: var(--tekst); margin-bottom: 8px; }
.claim-item.actief { border: 2px solid #ea580c; background: #fff7ed; }
.check-lijst { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.knoppen-rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.activiteit { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--rand-licht); font-size: 14px; }
.activiteit-tijd { width: 110px; flex-shrink: 0; color: var(--gedempt); font-size: 13px; }
.gegevens-lijst { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 16px; font-size: 14px; }
.gegevens-lijst dt { color: var(--gedempt); }
.gegevens-lijst dd { margin: 0; color: var(--inkt); word-break: break-word; }

/* --- Mobiel (ontwerp Portaal-Mobiel): compacte balk en menu onderaan --- */
@media (max-width: 860px) {
    .portaalbalk, .beheerbalk { padding: 0 12px; gap: 10px; height: 56px; }
    .portaalbalk-logo { min-width: 0; }
    .portaalbalk .logo-tekst, .balk-link, .gebruiker-naam, .balk-gebruiker, .beheer-zoek { display: none; }
    .vestiging-kiezer { border: none; padding: 0; height: auto; min-width: 0; }
    .vestiging-kiezer select { max-width: 55vw; }
    .omgeving-layout { display: block; min-height: 0; }
    .omgeving-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 64px; flex-direction: row; padding: 0; gap: 0; border-right: none; border-top: 1px solid var(--rand); background: #fff; z-index: 50; overflow-x: auto; }
    .omgeving-menu a { flex: 1 0 72px; flex-direction: column; justify-content: center; gap: 2px; font-size: 11px; padding: 4px; border-radius: 0; min-height: 64px; text-align: center; }
    .omgeving-menu a span { flex-grow: 0; }
    .omgeving-menu .menu-score, .omgeving-menu .menu-voet, .omgeving-menu .menu-groep, .menu-teller { display: none; }
    .omgeving-main { padding: 20px 16px 96px; gap: 18px; }
    .omgeving-portaal h1, .omgeving-beheer h1 { font-size: 24px; }
    .twee-kolom, .raster-2, .claim-routes, .snel-grid, .claims-layout { grid-template-columns: minmax(0, 1fr); }
    .raster-4, .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .diensten-kop { display: none; }
    .diensten-rij { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px 16px; }
    .diensten-rij label { grid-column: 2 / 4; }
    .diensten-rij input[name$="[vanaf]"] { grid-column: 2; }
    .diensten-rij input[name$="[tot]"] { grid-column: 3; }
    .diensten-rij input[name$="[toelichting]"] { grid-column: 2 / 4; }
    .diensten-categorie summary { padding: 16px; }
    .kaart-los { padding: 24px; }
    .voorbeeld-zijbalk { position: static; }
    .gegevens-lijst { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
    .gegevens-lijst dd { margin-bottom: 8px; }
    .tabel { display: block; overflow-x: auto; }
    .meekijkbalk { padding: 10px 16px; flex-wrap: wrap; }
}

/* --- Fase 2: foto's, badge, statistieken, outreach --- */
.knop-link { font: inherit; font-size: 13px; font-weight: 600; background: none; border: none; color: var(--primary-donker); cursor: pointer; padding: 0; min-height: 44px; text-decoration: underline; }
.knop-link--rood { color: #b91c1c; }
.knop-link[disabled] { opacity: .5; cursor: not-allowed; }
.inline-form { display: inline; }
.logo-rij { display: flex; gap: 18px; align-items: center; }
.logo-voorbeeld { width: 88px; height: 88px; border-radius: 12px; border: 1px solid var(--rand); object-fit: contain; background: #fff; flex-shrink: 0; }
.logo-voorbeeld--leeg { display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary-donker); font-family: var(--font-display); font-weight: 800; font-size: 26px; border: none; }
.logo-tekst-blok { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.upload-knop { cursor: pointer; }
.upload-knop:focus-within, .upload-vlak:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.foto-kaart { border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.foto-beeld { position: relative; aspect-ratio: 4 / 3; background: var(--rand-licht); }
.foto-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-beeld .pil { position: absolute; top: 8px; left: 8px; text-transform: none; letter-spacing: 0; }
.foto-alt { display: flex; gap: 8px; align-items: flex-end; padding: 12px 12px 0; }
.foto-alt .veld { flex-grow: 1; font-size: 13px; min-width: 0; }
.foto-alt .knop-rand { min-height: 44px; }
.foto-acties { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 4px; min-height: 44px; }
.foto-upload { border: 2px dashed #cbd5e1; min-height: 240px; }
.foto-upload.sleep { border-color: var(--primary); background: var(--primary-light); }
.foto-upload.bezig, form.bezig { opacity: .6; pointer-events: none; }
.upload-vlak { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; cursor: pointer; color: var(--inkt); }
.upload-vlak svg { color: var(--primary-donker); }
.badge-keuze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.badge-optie { border: 1px solid var(--rand); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; position: relative; }
.badge-optie:has(input:checked) { border: 2px solid var(--primary); padding: 13px; }
.badge-optie input { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; }
.badge-optie-naam { font-weight: 700; color: var(--inkt); font-size: 14px; }
.badge-voorbeeld { display: flex; align-items: center; justify-content: center; min-height: 96px; border-radius: 8px; background: var(--rand-licht); padding: 12px; }
.badge-voorbeeld svg { max-width: 100%; height: auto; }
.code-blok { margin: 0; background: var(--inkt); color: #e2e8f0; border-radius: 10px; padding: 16px; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.hulp-lijst { display: flex; flex-direction: column; }
.hulp-lijst details { border-top: 1px solid var(--rand-licht); }
.hulp-lijst summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--inkt); font-size: 14px; }
.hulp-lijst p { margin: 0 0 12px; }
.getal-blok { gap: 2px; }
.getal { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--inkt); line-height: 1.2; }
.veld--rij { flex-direction: row; align-items: center; gap: 10px; }
.veld--rij select { width: auto; }
.staven { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding-top: 8px; }
.staaf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--gedempt); }
.staaf-balk { width: 100%; max-width: 56px; background: #bae6fd; border-radius: 6px 6px 0 0; }
.staaf--actief .staaf-balk { background: var(--primary-donker); }
.staaf-waarde { font-weight: 700; color: var(--inkt); }
.stat-lijst { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0 0 8px; font-size: 14px; }
.stat-lijst dd { margin: 0; font-weight: 700; color: var(--inkt); text-align: right; }
.foto-controle { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.foto-controle .foto-kaart { padding-bottom: 12px; gap: 8px; }
.foto-controle .foto-kaart > div, .foto-controle .foto-kaart > form { padding: 0 12px; }
.foto-controle .foto-beeld { padding: 0 !important; }
.mail-voorbeeld { border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; }
.mail-voorbeeld-kop { background: var(--rand-licht); padding: 10px 14px; font-size: 13px; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 2px 8px; }
.mail-voorbeeld-kop span:nth-child(odd) { color: var(--gedempt); }
.mail-voorbeeld iframe { width: 100%; height: 560px; border: 0; display: block; background: #f0f9ff; }
.filter-rij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.filter-rij a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rand); text-decoration: none; color: var(--tekst); font-weight: 600; }
.filter-rij a.actief { background: var(--inkt); color: #fff; border-color: var(--inkt); }
@media (max-width: 860px) {
    .omgeving-menu a { flex: 1 0 64px; }
    .badge-keuze { grid-template-columns: minmax(0, 1fr); }
    .logo-rij { align-items: flex-start; }
    .staven { gap: 6px; }
}

/* --- Fase 3: reviews --- */
.sterren-keuze { border: none; padding: 0; margin: 0; }
.sterren-rij { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.sterren-rij input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterren-rij label { font-size: 40px; line-height: 1; color: #cbd5e1; cursor: pointer; min-width: 44px; min-height: 44px; text-align: center; }
.sterren-rij input:checked ~ label, .sterren-rij label:hover, .sterren-rij label:hover ~ label { color: #f59e0b; }
.sterren-rij input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.review-kaart { border: 1px solid var(--rand); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.review-kaart--let-op { border-color: #fdba74; }
.review-kop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.review-kop .sterren { color: #f59e0b; font-size: 16px; letter-spacing: 1px; }
.review-reactie { background: var(--rand-licht); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.review-melding { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 10px 14px; font-size: 14px; color: #9a3412; }
.signalen { display: flex; gap: 6px; flex-wrap: wrap; }
.signaal { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.signaal--goed { background: #f0fdf4; color: #15803d; }
.signaal--let-op { background: #fff7ed; color: #9a3412; }
.score-groot { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--inkt); line-height: 1; }
.link-veld { display: flex; gap: 8px; align-items: center; }
.link-veld input { flex-grow: 1; min-height: 44px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; min-width: 0; background: var(--rand-licht); color: var(--inkt); }
.qr-voorbeeld { width: 160px; height: 160px; align-self: center; }
.qr-voorbeeld svg, .qr-voorbeeld img { width: 100%; height: 100%; display: block; }
.knop-rij-select { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knop-rij-select select { min-height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0 10px; font: inherit; background: #fff; }
details.reageer > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.reageer > summary::-webkit-details-marker { display: none; }
details.reageer[open] > summary { display: none; }
.print-pagina { max-width: 210mm; margin: 0 auto; padding: 20px; }
.print-knoppen { margin-bottom: 12px; }
.print-vel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px dashed #cbd5e1; }
.print-kaartje { border: 1px dashed #cbd5e1; padding: 10mm 8mm; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4mm; min-height: 120mm; justify-content: center; }
.print-titel { font-family: var(--font-display); font-size: 17pt; font-weight: 800; color: #0f172a; line-height: 1.2; }
.print-tekst { font-size: 11pt; color: #334155; }
.print-qr { width: 45mm; height: 45mm; }
.print-qr svg { width: 100%; height: 100%; }
.print-link { font-size: 11pt; font-weight: 700; color: #0f172a; }
@media print {
    .print-knoppen { display: none; }
    .print-pagina { padding: 0; max-width: none; }
    @page { size: A4; margin: 12mm; }
}

/* --- Fase 4: Uitgelicht in portaal en beheer --- */
.plaats-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.plaats-optie { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 44px; font-size: 14px; line-height: 1.35; }
.plaats-optie:has(input:checked) { border-color: var(--primary); background: #f0f9ff; }
.plaats-optie input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.plaats-optie--vol { opacity: .6; cursor: not-allowed; }
.voordelen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 14px; }
.voordelen li { display: flex; gap: 8px; align-items: flex-start; }
.voordelen svg { color: #16a34a; flex-shrink: 0; margin-top: 3px; }
.prijs-rij { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.prijs-rij b { font-family: var(--font-display); font-size: 22px; color: var(--inkt); }
.bezetting { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-size: 14px; }
.bezet-rij { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bezet-vak { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--rand); vertical-align: middle; margin-left: 2px; }
.bezet-vak--actief { background: var(--primary-donker); }
.bezet-vak--aangevraagd { background: #fdba74; }
.trechter { display: flex; flex-direction: column; gap: 8px; }
.trechter-rij { display: grid; grid-template-columns: 220px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 14px; }
.trechter-balk { height: 18px; border-radius: 4px; min-width: 3px; }
.letop-rij { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rand-licht); font-size: 14px; }
.letop-rij::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ea580c; flex-shrink: 0; }
.letop-rij span { flex-grow: 1; }
@media (max-width: 860px) {
    .voordelen, .bezetting { grid-template-columns: minmax(0, 1fr); }
    .trechter-rij { grid-template-columns: minmax(0, 1fr) 40px; }
    .trechter-rij .trechter-balk { grid-column: 1 / 3; grid-row: 2; }
}