/*
 * Thema Beringerzand: de stijl van het park voor de gast (receptie en beheer houden de LeisureIQ-huisstijl).
 * Sinds 0.5.0 volgens de stijlelementen van beringerzand.nl (Alkatra en Inter; lettertypes in fonts/, SIL Open Font
 * License, OFL-*.txt). Sinds 0.8.0 de opbouw van de app van het park (mock-up van de marketing van Beringerzand,
 * 2 november 2026): bovenbalk met logo en menuknop, foto alleen op Mijn verblijf, kaarten met een tabje met rode rand,
 * navigatie onderin met lijn-iconen (actief groen), en vanaf 900px de navigatie links. Donker volgt de telefoon.
 *
 * Contrast (WCAG AA) nagerekend:
 *  - licht: tekst #1A1A1A op #FFFFFF en #FAF9F6 ruim; grijs #595959 op wit 7:1; titels (de mock-up
 *    gebruikt #2B94D2, 3,3:1; daarom #1A6E9F: 5,6:1 op wit en 5,3:1 op #FAF9F6, review 0.8.0 L1); groen #2E7D32 op wit
 *    5,1:1 voor de actieve tab; knoppen wit op #1B0EA0 12:1; rood #E1251B alleen als rand, als tekst #B81C14 (5,9:1).
 *  - donker: tekst #F0F0F0 op #2C2C2E 12:1; grijs #B4B4B4 op #2C2C2E 6,9:1; titels #7CC4EC op #2C2C2E 7,2:1; groen
 *    #81C784 op #1A1A1A 8,9:1.
 * Geen inline stijl: alles hier (de CSP verbiedt style-attributen).
 */
@font-face { font-family: "Alkatra"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/alkatra-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alkatra"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/alkatra-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  /* vaste merkkleuren */
  --rood: #E1251B;
  --rood-donker: #B81C14;
  --navy: #1B0EA0;
  --navy-hover: #E2251B;
  --lime: #C9D400;
  --lime-zacht: #8BC34A;
  --olijf: #A0AB1A;
  --wit: #FFFFFF;
  --zwart: #1A1A1A;
  --voetblauw: #0194D2;
  /* licht (standaard) */
  --grond: #FAF9F6;
  --vlak: #FFFFFF;
  --vlak2: #F2F1EC;
  --tekstkleur: #1A1A1A;
  --grijs: #595959;
  --lijn: rgba(0, 0, 0, 0.09);
  --titel: #1A6E9F;
  --groen: #2E7D32;
  --pil: #E8F5E9;
  --pil-tekst: #2E7D32;
  --nav: #FFFFFF;
  --nav-tekst: #595959;
  --schaduw: 0 4px 12px rgba(0, 0, 0, 0.08);
  --overlay: rgba(0, 0, 0, 0.35);
  --invoerrand: #8A8F94;
  --fout-vlak: #FDECEA; --fout-tekst: #8A1610;
  --ok-vlak: #E6F3D4; --ok-tekst: #24572A;
  --let-vlak: #FFF6D6; --let-tekst: #5A4300;
  --info-vlak: #EEF0FB; --info-tekst: #1B0EA0;
  --kop: "Alkatra", "Trebuchet MS", sans-serif;
  --tekst: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breed: 1120px;
}
/* Donker volgt de instelling van de telefoon (zoals de app van het park). */
@media (prefers-color-scheme: dark) {
  :root {
    --grond: #121212;
    --vlak: #2C2C2E;
    --vlak2: #1E1E20;
    --tekstkleur: #F0F0F0;
    --grijs: #B4B4B4;
    --lijn: rgba(255, 255, 255, 0.1);
    --titel: #7CC4EC;
    --groen: #81C784;
    --pil: #1F3A22;
    --pil-tekst: #A5D6A7;
    --nav: #1A1A1A;
    --nav-tekst: #A8A8A8;
    --schaduw: 0 4px 12px rgba(0, 0, 0, 0.4);
    --overlay: rgba(0, 0, 0, 0.6);
    --invoerrand: #8A8F94;
    --fout-vlak: #3A1B1A; --fout-tekst: #FFB4AB;
    --ok-vlak: #1F3A22; --ok-tekst: #A5D6A7;
    --let-vlak: #3B2F12; --let-tekst: #FFE08A;
    --info-vlak: #232048; --info-tekst: #C9C4FF;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; scroll-padding: 72px 0 100px; }
body { margin: 0; background: var(--grond); color: var(--tekstkleur); font-family: var(--tekst); font-size: 16px; line-height: 24px; font-weight: 400; overflow-x: hidden; }
a { color: var(--titel); }
a:hover { color: var(--rood); }
:focus-visible { outline: 3px solid var(--titel); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--kop); font-weight: 500; font-style: normal; color: var(--titel); }
h3 { font-size: 20px; line-height: 1.25; margin: 18px 0 6px; }
button { font: inherit; color: inherit; }

/* ---------- opbouw ---------- */
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; }
main { padding: 4px 16px 24px; outline: none; }
.laden { text-align: center; color: var(--grijs); padding-top: 60px; }

/* ---------- bovenbalk ---------- */
.bovenbalk { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--grond); }
.logo img { display: block; height: 44px; width: auto; }
/* Het logo heeft donkere letters: in donker op een licht vlakje. */
@media (prefers-color-scheme: dark) { .logo img { background: #FAF9F6; border-radius: 10px; padding: 3px 8px; } }
.merk { font-family: var(--kop); font-weight: 500; font-size: 20px; color: var(--rood-donker); }
@media (prefers-color-scheme: dark) { .merk { color: #FF8A80; } }
.top-acties { display: none; }
.menu-knop { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--vlak); border: 0; box-shadow: var(--schaduw); cursor: pointer; color: var(--tekstkleur); flex: none; }
.menu-knop svg { stroke: currentColor; }
.talen { display: inline-flex; background: var(--vlak); border-radius: 22px; padding: 3px; box-shadow: var(--schaduw); }
.talen button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 18px; background: transparent; color: var(--grijs); font-size: 13px; font-weight: 700; cursor: pointer; }
.talen button[aria-pressed="true"] { background: var(--groen); color: var(--wit); }
@media (prefers-color-scheme: dark) { .talen button[aria-pressed="true"] { color: #10210F; } }

/* ---------- foto (alleen op Mijn verblijf, en bij inloggen) ---------- */
.held { position: relative; margin-bottom: 8px; }
.held-rand { position: absolute; inset: 0 0 auto 0; height: 170px; background: var(--lime-zacht); clip-path: ellipse(100% 100% at 90% 0%); transform: translateY(8px); }
.held-foto { position: relative; height: 160px; background: #2F5A2A url("hero.jpg") center / cover no-repeat; clip-path: ellipse(100% 100% at 90% 0%); }
.held-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 100%); }
.mascotte { position: absolute; left: 6px; top: 64px; width: 84px; height: auto; z-index: 2; pointer-events: none; clip-path: inset(0 0 2px 0); }
.held-tekst { position: absolute; left: 96px; right: 20px; top: 0; height: 160px; z-index: 1; display: flex; flex-direction: column; justify-content: center; text-align: right; color: var(--wit); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.held-tekst h1 { margin: 0; color: var(--wit); font-size: 30px; line-height: 1.1; font-weight: 500; text-wrap: balance; }
.held-tekst p { margin: 4px 0 0; font-family: var(--kop); font-size: 18px; line-height: 1.25; text-wrap: balance; }

/* ---------- paginatitel (de andere tabbladen) ---------- */
.titelbalk { padding: 14px 16px 12px; border-bottom: 1px solid var(--lijn); background: var(--grond); }
.titelbalk h1 { margin: 0; font-size: 24px; line-height: 1.2; }

/* ---------- navigatie onderin (telefoon) ---------- */
.zijbalk { display: contents; }
.navigatie { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 10; background: var(--nav); border-top: 1px solid var(--lijn); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.tabbladen { display: flex; align-items: stretch; min-height: 64px; }
.tabbladen [role="tab"] { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 4px 2px; background: none; border: 0; cursor: pointer; color: var(--nav-tekst); }
.tabbladen [role="tab"] svg { stroke: currentColor; }
.nav-kort { font-size: 11px; line-height: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-vol { display: none; }
.tabbladen [role="tab"][aria-selected="true"] { color: var(--groen); }
.tabbladen [role="tab"][aria-selected="true"] .nav-kort { font-family: var(--kop); font-weight: 500; font-size: 12px; }
/* Eerdere verblijven past onderin niet naast zes andere: dan via het menu. */
.tabbladen.met-eerder #tab-eerder { display: none; }
body.met-navigatie main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* Ingelogd staat wat in de voet stond in het menu en onder de navigatie (review 0.8.0, M4; zoals de mock-up). */
body.met-navigatie .voet { display: none; }
.zijbalk-extra { display: none; }
.tabpaneel:focus-visible { outline-offset: 6px; }

/* Meer boekingen: de keuze bovenaan */
.verblijf-keuze { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.keuze { min-height: 44px; padding: 0 16px; border: 1px solid var(--lijn); border-radius: 20px; background: var(--vlak); color: var(--tekstkleur); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--schaduw); }
.keuze[aria-pressed="true"] { background: var(--pil); color: var(--pil-tekst); border-color: transparent; }

/* ---------- kaarten met een tabje (rode rand) ---------- */
.kaart { margin-top: 18px; scroll-margin-top: 72px; }
.kaart-tab { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; position: relative; z-index: 1; padding: 9px 16px 8px; background: var(--vlak); border-top: 3px solid var(--rood); border-radius: 8px 8px 0 0; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05); max-width: 100%; }
.kaart-tab h2 { margin: 0; font-family: var(--tekst); font-weight: 700; font-size: 15px; line-height: 22px; color: var(--tekstkleur); }
.kaart-lijf { background: var(--vlak); border-radius: 0 12px 12px 12px; box-shadow: var(--schaduw); padding: 6px 20px 16px; }
.kaart-lijf > :first-child { margin-top: 10px; }
.tabpaneel > .kaart + .kaart, .tabpaneel > * + .kaart { margin-top: 18px; }
.label { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 700; }
.label-lime { background: var(--pil); color: var(--pil-tekst); }
.label-blauw { background: var(--info-vlak); color: var(--info-tekst); }
.label-grijs { background: var(--vlak2); color: var(--grijs); }
/* Per regel een grijs label met de waarde vet eronder. */
.gegevens { margin: 4px 0 0; display: block; }
.gegevens dt { display: block; padding-top: 12px; font-size: 13px; line-height: 18px; color: var(--grijs); }
.gegevens dd { margin: 0; padding: 2px 0 12px; border-bottom: 1px solid var(--lijn); font-weight: 700; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.gegevens dd:last-of-type { border-bottom: 0; }
.bron { margin: 12px 4px 0; font-size: 12px; line-height: 18px; color: var(--grijs); }
.zacht { color: var(--grijs); }
.klein { font-size: 14px; line-height: 20px; }
.hulp { margin: 18px 0 0; font-size: 14px; color: var(--grijs); }
.hulp a { color: var(--grijs); }
.fout { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--fout-vlak); color: var(--fout-tekst); }
.melding { padding: 12px 14px; border-radius: 8px; background: var(--let-vlak); color: var(--let-tekst); }
.ok { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--ok-vlak); color: var(--ok-tekst); }

/* ---------- personen (reisgezelschap) ---------- */
.lijst { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lijst li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; background: var(--grond); }
.groei { flex: 1; min-width: 0; }
.naam { display: block; font-weight: 700; }
.sub { display: block; font-size: 13px; line-height: 18px; color: var(--grijs); font-variant-numeric: tabular-nums; }
.bol { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--kop); font-weight: 500; font-size: 16px; }
.bol-0 { background: #CDDE00; color: #1A1A1A; }
.bol-1 { background: #00109F; color: #FFFFFF; }
.bol-2 { background: #DE271F; color: #FFFFFF; }
.bol-3 { background: #2F3A22; color: #FFFFFF; }
@media (prefers-color-scheme: dark) { .bol-3 { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); } }

/* ---------- kentekens: een plaatje (NL-stijl) ---------- */
.plaat { display: inline-flex; align-items: stretch; border: 2px solid #1A1A1A; border-radius: 5px; overflow: hidden; font-weight: 800; font-size: 17px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.plaat-nl { background: #003399; color: #FFCC00; font-size: 10px; padding: 0 4px 4px; display: flex; align-items: flex-end; }
.plaat-nr { background: #F7C600; color: #1A1A1A; padding: 3px 10px; }
.stand { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; }
.stand-binnen { background: var(--ok-vlak); color: var(--ok-tekst); }
.stand-buiten { background: var(--info-vlak); color: var(--info-tekst); }
.tekst-binnen { color: var(--ok-tekst); font-weight: 600; }
.kenteken-rij { flex-direction: column; align-items: stretch !important; }
.kenteken-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.kenteken-kop .knop-rand { margin-top: 0; }
.kenteken-kop .groei { flex: 1 1 180px; }
.kaartjes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.toevoegen-vlak { margin-top: 16px; }
.toevoegen-vlak > .zacht { margin: 6px 0 0; }

/* ---------- stroom ---------- */
.tegels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.tegel { flex: 1 1 140px; background: var(--grond); border-radius: 10px; padding: 12px 14px; border-left: 4px solid var(--lime-zacht); }
.cijfer { font-family: var(--kop); font-weight: 500; font-size: 26px; color: var(--titel); line-height: 1.2; font-variant-numeric: tabular-nums; }
.trips { margin-top: 10px; font-size: 14px; line-height: 20px; }
.trips summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--grijs); font-weight: 600; list-style: none; }
.trips summary::-webkit-details-marker { display: none; }
.trips summary::before { content: ""; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s; }
.trips[open] summary::before { transform: rotate(90deg); }
.trips p { margin: 6px 0; }
.trips-lijst { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trips-lijst li { padding: 6px 0 6px 10px; border-left: 3px solid var(--lime-zacht); }
.trips-lijst time { display: block; font-weight: 600; color: var(--tekstkleur); }
.trips-lijst .tip { display: block; color: var(--grijs); }

/* ---------- gastgegevens ---------- */
.kaart h3 { margin: 16px 0 2px; font-family: var(--tekst); font-weight: 700; font-size: 15px; color: var(--tekstkleur); }
.afgeschermd { letter-spacing: 1px; }
.volledig-vlak { margin-top: 14px; }
.volledig-vlak > .knop-rand { margin-top: 0; }
.zichtbaar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--info-vlak); color: var(--info-tekst); }
.zichtbaar .knop-link { margin-top: 0; color: var(--info-tekst); }

/* ---------- eerdere verblijven ---------- */
.historie-boeking { border-top: 1px solid var(--lijn); padding: 12px 0 16px; }
.historie-boeking h3 { margin-top: 4px; }

/* ---------- knoppen en formulieren (knoppen zoals .btn-primary in de app) ---------- */
.knop-hoofd { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 28px; border: 0; border-radius: 999px; background: var(--navy); color: var(--wit); font-family: var(--kop); font-weight: 500; font-size: 17px; line-height: 1.2; cursor: pointer; user-select: none; transition: background .18s ease, transform .18s ease; }
@media (hover: hover) { .knop-hoofd:hover { background: var(--navy-hover); transform: translateY(-2px); } }
.knop-hoofd:active { background: var(--navy-hover); transform: scale(0.96); }
.knop-hoofd:disabled { opacity: .6; cursor: wait; transform: none; }
.knop-rand { margin-top: 16px; min-height: 44px; padding: 6px 22px; border: 2px solid var(--navy); border-radius: 999px; background: var(--vlak); color: var(--navy); font-weight: 700; cursor: pointer; }
@media (prefers-color-scheme: dark) { .knop-rand { border-color: #9C94FF; color: #C9C4FF; } }
.knop-rand:hover { background: var(--info-vlak); }
.knop-gevaar { border-color: var(--fout-tekst); color: var(--fout-tekst); }
.knop-klein { min-height: 44px; font-size: 15px; padding: 6px 20px; }
.knop-link { margin-top: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--grijs); font-size: 15px; text-decoration: underline; cursor: pointer; }
.uitleg-link { margin: 14px 0 0; font-size: 14px; }
.inlogform label { display: block; font-weight: 600; margin: 18px 0 6px; }
.rij { display: flex; flex-wrap: wrap; gap: 10px; }
.rij input, .veld-blok input, .velden-adres input { flex: 1 1 220px; min-width: 0; min-height: 50px; padding: 0 16px; border: 1px solid var(--invoerrand); border-radius: 10px; font: inherit; font-size: 17px; background: var(--vlak); color: var(--tekstkleur); }
.veld-blok input, .velden-adres input { width: 100%; }
.wijzig-vlak { margin-top: 12px; }
.wijzig-vlak .ok { margin-bottom: 8px; }
.wijzig-form label, .veld-blok label { display: block; font-weight: 600; margin: 4px 0 2px; }
.wijzig-form .hint { margin: 0 0 8px; }
.wijzig-form .tussen { margin: 12px 0 6px; }
.wijzig-form .knoppen { margin-top: 12px; }
.wijzig-form .rij input.code-veld { flex: 0 1 200px; letter-spacing: 6px; font-size: 22px; text-align: center; }
.velden-adres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bevestig { margin-top: 4px; padding: 14px 16px; border-left: 4px solid var(--rood); background: var(--vlak2); border-radius: 0 8px 8px 0; }
.bevestig p { margin: 0 0 8px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.knoppen .knop-rand, .knoppen .knop-hoofd { margin-top: 0; }
.vink { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 15px; }
.vink input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.veld-blok { margin-top: 12px; }
.lijst li.logee-rij { flex-direction: column; align-items: stretch; gap: 8px; }
.logee-rij .groei { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.logee-rij .knop-link { align-self: flex-start; }
.kaart .gegevens + .zacht { margin-top: 12px; }

/* ---------- inloggen: de kaart met tabjes (zoals de zoekbalk op de website) ---------- */
.tabkaart { margin-top: 12px; max-width: 100%; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px 8px 0 0; background: var(--vlak2); color: var(--tekstkleur); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.tab.actief { background: var(--vlak); box-shadow: inset 0 3px 0 var(--rood); cursor: default; }
a.tab:hover, button.tab:not(.actief):hover { background: var(--pil); color: var(--pil-tekst); }
.tabkaart-vlak { background: var(--vlak); border-radius: 0 12px 12px 12px; box-shadow: var(--schaduw); padding: 22px 20px; }
.tabkaart-vlak h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }

/* ---------- account ---------- */
#wachtwoord { margin-top: 18px; }
.account-link { margin: 4px 0 0; }
.terug-rij { margin: 12px 0 0; }
.terug-rij a { text-decoration: none; }

/* ---------- menu (lade, telefoon) ---------- */
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 30; }
.lade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(86vw, 360px); background: var(--grond); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; overflow-y: auto; }
body.menu-open { overflow: hidden; }
.lade-kop { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px; }
.lade-kop h2 { margin: 0; font-size: 22px; }
.lade-inhoud { display: flex; flex-direction: column; flex: 1; }
.lade-sectie { padding: 12px 16px; display: grid; gap: 10px; }
.sectie-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grijs); }
.menu-lijst { background: var(--vlak); border-radius: 12px; box-shadow: var(--schaduw); overflow: hidden; }
.menu-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--lijn); background: none; color: var(--tekstkleur); text-decoration: none; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; }
.menu-link:last-child { border-bottom: 0; }
.menu-link:hover { color: var(--titel); }
.menu-link .sub { margin-left: auto; color: var(--grijs); font-weight: 500; font-size: 13px; }
/* Uitloggen: de knop, dan ruim afstand (28px) tot "Uitloggen op al je apparaten", zodat die niet per ongeluk wordt aangetikt. */
.uitlog-vlak { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.uitlog-knop { width: 100%; margin-bottom: 28px; }
.overal-knop { margin-top: 0; padding-left: 0; color: var(--rood-donker); font-weight: 600; }
@media (prefers-color-scheme: dark) { .overal-knop { color: #FF8A80; } }
.uitlog-vlak .zacht { margin: 0; }
.uitlog-vlak .bevestig { width: 100%; }
.lade-voet { margin-top: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--voetblauw); color: var(--wit); font-size: 19px; line-height: 1.35; font-weight: 700; }
.lade-voet strong { display: block; font-family: var(--kop); font-weight: 500; font-size: 22px; }
.lade-voet p { margin: 6px 0 0; }

/* ---------- voet: blauw met witte tekst, alles groot en vet (contrast) ---------- */
.voet { background: var(--voetblauw); color: var(--wit); }
.voet-binnen { max-width: var(--breed); margin: 0 auto; padding: 24px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 19px; line-height: 1.4; font-weight: 700; }
.voet-binnen * { font-size: inherit; font-weight: 700; }
.voet-binnen .voet-naam { font-family: var(--kop); font-weight: 500; font-size: 24px; }
.voet-klein { align-self: flex-end; }
.voet-account a { color: inherit; }

@media (max-width: 380px) {
  .velden-adres { grid-template-columns: 1fr; }
  .nav-kort { font-size: 10px; letter-spacing: -0.01em; }
  .tabbladen [role="tab"][aria-selected="true"] .nav-kort { font-size: 11px; }
  .held-tekst h1 { font-size: 26px; }
}

/* ---------- computer (vanaf 900px): navigatie links, taal en uitloggen in de bovenbalk, geen menu ---------- */
/* Sinds 0.9.0: een probleem melden via de QR-code bij een object, en Mijn meldingen. */
.melden-form label, .melden-form .veld-kop { display: block; font-weight: 600; margin: 16px 0 6px; }
.melden-form select, .melden-form textarea { display: block; width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--invoerrand); border-radius: 10px; font: inherit; font-size: 17px; background: var(--vlak); color: var(--tekstkleur); }
.melden-form textarea { min-height: 132px; resize: vertical; line-height: 1.4; }
.melden-tekens { margin: 4px 0 0; text-align: right; }
.melden-form .knoppen { margin-top: 18px; }
.foto-vlak .zacht { margin: 0 0 8px; }
.foto-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.foto-strip:empty { display: none; }
.foto { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--vlak2); box-shadow: var(--schaduw); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-weg { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #FFFFFF; font-size: 20px; line-height: 1; cursor: pointer; }
.foto-kiezer { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.foto-knop { display: inline-flex; align-items: center; margin-top: 10px; }
.foto-vlak:focus-within .foto-knop { outline: 3px solid var(--titel); outline-offset: 2px; }
.melden-noot { margin: 0 0 16px; }
.lijst li.melding-rij { align-items: flex-start; }
.melding-rij .label { flex: none; margin-top: 2px; }
.zij-link { background: var(--vlak); border-radius: 12px; box-shadow: var(--schaduw); }

@media (min-width: 900px) {
  .app { max-width: var(--breed); padding: 0 24px; display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 32px; grid-template-rows: auto auto 1fr; grid-template-areas: "top top" "zij kop" "zij main"; align-items: start; }
  body:not(.met-navigatie) .app { grid-template-areas: "top top" "kop kop" "main main"; }
  .bovenbalk { grid-area: top; padding: 16px 0; }
  .logo img { height: 64px; }
  .menu-knop#menu-open { display: none; }
  .top-acties { margin-left: auto; display: flex; align-items: center; gap: 20px; }
  .top-link { color: var(--tekstkleur); font-weight: 600; font-size: 15px; text-decoration: none; }
  .top-link:hover { color: var(--titel); text-decoration: underline; }
  .top-acties .knop-hoofd { min-height: 44px; padding: 8px 22px; font-size: 16px; }
  #held, #titelbalk { grid-area: kop; margin-top: 8px; }
  .held-foto, .held-rand { border-radius: 16px 16px 0 0; }
  .held-foto { height: 200px; }
  .held-rand { height: 210px; }
  .held-tekst { height: 200px; left: 140px; right: 32px; }
  .held-tekst h1 { font-size: 40px; }
  .held-tekst p { font-size: 20px; }
  .mascotte { width: 110px; top: 86px; left: 10px; }
  html { scroll-padding: 24px 0 24px; }
  main { grid-area: main; padding: 8px 0 48px; max-width: 760px; }
  body.met-navigatie main { padding-bottom: 48px; }
  body:not(.met-navigatie) main { max-width: 640px; }
  .zijbalk { display: grid; grid-area: zij; position: sticky; top: 112px; margin-top: 8px; gap: 20px; }
  .navigatie { position: static; transform: none; width: auto; max-width: none; padding: 8px; background: var(--vlak); border: 0; border-radius: 16px; box-shadow: var(--schaduw); }
  .tabbladen { flex-direction: column; gap: 2px; min-height: 0; }
  .tabbladen [role="tab"] { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 10px; color: var(--tekstkleur); }
  .tabbladen [role="tab"] svg { stroke: var(--nav-tekst); }
  .tabbladen.met-eerder #tab-eerder { display: flex; }
  .nav-kort { display: none; }
  .nav-vol { display: inline; font-size: 15px; font-weight: 600; }
  .tabbladen [role="tab"][aria-selected="true"] { background: var(--pil); }
  .tabbladen [role="tab"][aria-selected="true"] svg { stroke: var(--pil-tekst); }
  .tabbladen [role="tab"][aria-selected="true"] .nav-vol { color: var(--pil-tekst); font-family: var(--kop); font-weight: 500; font-size: 16px; }
  .zijbalk-extra { display: grid; gap: 10px; }
  .zijbalk-extra .uitlog-vlak { margin-top: 6px; }
  .lade, .overlay { display: none !important; }
  /* Gastgegevens: hoofdgast en reisgezelschap naast elkaar */
  .gast-kern { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
  .verblijf-keuze { margin-top: 18px; }
}
@media (min-width: 900px) and (hover: hover) {
  .tabbladen [role="tab"]:not([aria-selected="true"]):hover { background: var(--lijn); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}