/* aanvragen.css — de gedeelde aanvraag-app (11-11-2026). Tokens komen uit tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
/* hidden moet winnen van display: grid/flex hieronder; anders staan alle stappen en velden tegelijk open. */
[hidden] { display: none !important; }
body { background: var(--bg); }
.ta-hero { background: var(--navy); padding: 24px 16px; text-align: center; }
.ta-eyebrow { color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ta-hero h1 { color: #fff; font-size: 26px; margin: 6px 0 4px; }
.ta-hero p { color: rgba(255,255,255,.85); font-size: 14px; max-width: 640px; margin: 0 auto; }
.ta-wrap { max-width: 1120px; margin: 0 auto; padding: 24px 16px 48px; display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 20px; align-items: start; }
.ta-stappen { background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(29,61,89,.08)); padding: 8px; position: sticky; top: 92px; display: grid; gap: 2px; }
.ta-stap { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; color: var(--navy); font-size: 14px; }
.ta-stap .nr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 2px solid #DCE3EA; color: var(--muted); }
.ta-stap .wie { display: block; font-size: 12px; color: var(--hint); }
.ta-stap[aria-current="step"] { background: #E8F1F9; }
.ta-stap[aria-current="step"] .nr { border-color: var(--blue); color: var(--blue); }
.ta-stap.klaar .nr { background: var(--lime); border-color: var(--lime); color: #fff; }
.ta-stap:disabled { cursor: default; opacity: .6; }
.ta-scherm { display: grid; gap: 16px; min-width: 0; }
.ta-kaart { background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(29,61,89,.08)); padding: 20px; display: grid; gap: 14px; min-width: 0; }
.ta-kaart h2 { font-size: 19px; color: var(--navy); margin: 0; }
.ta-uitleg { color: var(--muted); font-size: 14px; margin: 0; max-width: 720px; }
.ta-zoek { position: relative; }
.ta-zoek input { width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid #CFD8E1; border-radius: 8px; color: var(--navy); }
.ta-suggesties { position: absolute; z-index: 1000; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #DCE3EA; border-radius: 8px; box-shadow: 0 6px 18px rgba(29,61,89,.12); }
.ta-suggesties button { width: 100%; text-align: left; background: none; border: 0; padding: 7px 8px; border-radius: 6px; font: inherit; font-size: 14px; color: var(--navy); cursor: pointer; }
.ta-suggesties button:hover, .ta-suggesties button:focus { background: #E8F1F9; }
.ta-kiezen { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; }
.ta-map { height: 380px; border-radius: 10px; border: 1px solid #DCE3EA; z-index: 0; }
.ta-lijst { display: grid; gap: 6px; align-content: start; max-height: 380px; overflow: auto; }
.ta-kopje { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ta-rij { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; border: 1px solid #DCE3EA; border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 14px; color: var(--navy); margin-bottom: 6px; }
.ta-rij input { margin-top: 3px; }
.ta-rij small { display: block; color: var(--muted); font-size: 12px; }
.ta-rij.aan { border-color: var(--lime); background: #F3F8E8; }
.ta-rij .ta-weg { justify-self: start; background: none; border: 0; color: var(--blue); text-decoration: underline; font: inherit; font-size: 12px; padding: 0; cursor: pointer; }
.ta-leeg { color: var(--muted); font-size: 14px; margin: 0; }
.ta-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-tabs button { border: 1px solid #DCE3EA; background: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; color: var(--navy); cursor: pointer; }
.ta-tabs button[aria-pressed="true"] { background: #E8F1F9; border-color: var(--blue); font-weight: 700; }
.ta-schuif { overflow-x: auto; }
.ta-tabel { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; color: var(--navy); }
.ta-tabel th, .ta-tabel td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid #EEF2F6; }
.ta-tabel th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ta-tabel td.getal { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.ta-tabel select, .ta-tabel input { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid #CFD8E1; border-radius: 6px; color: var(--navy); max-width: 100%; }
.ta-bron { font-size: 12px; color: var(--hint); }
.ta-nodig { color: #9A5B00; font-weight: 600; }
.ta-bewaard { color: var(--lime); font-size: 12px; font-weight: 700; margin-left: 6px; }
.ta-stuk { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid #EEF2F6; padding: 8px 0; font-size: 14px; color: var(--navy); }
.ta-keus { display: flex; flex-wrap: wrap; gap: 4px; }
.ta-keus button { border: 1px solid #DCE3EA; background: #fff; border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--navy); cursor: pointer; }
.ta-keus button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.ta-velden { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.ta-veld { display: grid; gap: 4px; }
.ta-veld label { font-size: 13px; font-weight: 600; color: var(--navy); }
.ta-veld select, .ta-veld input, .ta-veld textarea { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #CFD8E1; border-radius: 8px; color: var(--navy); }
.ta-onder { font-size: 12px; color: var(--hint); }
.ta-breed { grid-column: 1 / -1; }
.ta-samen { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.ta-blok { border: 1px solid #DCE3EA; border-radius: 10px; padding: 12px; display: grid; gap: 4px; font-size: 14px; color: var(--navy); }
.ta-blok h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 4px; }
.ta-knoppen { display: flex; gap: 8px; justify-content: flex-end; }
.ta-knop { font: inherit; font-weight: 700; font-size: 14px; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; background: var(--navy); color: #fff; }
.ta-knop.licht { background: #EEF2F6; color: var(--navy); }
.ta-knop.groen { background: var(--lime); }
.ta-knop:disabled { opacity: .45; cursor: default; }
#ta-melding:empty { display: none; }
#ta-melding { background: #F3F8E8; color: var(--navy); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
#ta-melding.fout { background: #FDECEC; }
.ta-voet { text-align: center; color: var(--hint); font-size: 12px; padding: 24px 16px; }
@media (max-width: 860px) {
  .ta-wrap { grid-template-columns: minmax(0,1fr); } /* 1fr liet een lange stapnaam de pagina verbreden */
  .ta-stappen { position: static; display: flex; overflow-x: auto; }
  .ta-stap { min-width: 150px; }
  .ta-kiezen, .ta-velden, .ta-samen { grid-template-columns: 1fr; }
  .ta-map { height: 300px; }
}
/* v2: keuzelijsten, snelle datums en de checklist van TIZV */
.ta-rijen { border: 0; padding: 0; margin: 0; min-width: 0; }
.ta-rijen legend { font-size: 13px; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 6px; }
.ta-rijen > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 8px; }
.ta-rijen .ta-rij { margin-bottom: 6px; align-items: center; }
.ta-snel { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ta-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--blue); text-decoration: underline; cursor: pointer; }
.ta-link[aria-pressed="true"] { color: var(--navy); font-weight: 700; text-decoration: none; }
.ta-blokkop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-bottom: 6px; border-bottom: 2px solid #DCE3EA; }
.ta-blokkop h3 { font-size: 15px; color: var(--navy); margin: 0; }
.ta-blokkop select, .ta-stuk select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid #CFD8E1; border-radius: 6px; color: var(--navy); max-width: 100%; }
.ta-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .ta-rijen > div { grid-template-columns: 1fr; } }