/* Intake App - zie design.md (kleuren en maten exact uit Kampeermanager). */
@font-face { font-family: "Lato"; src: url("fonts/Lato-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "kenteken"; src: url("fonts/kenteken-webfont.woff2") format("woff2"); font-display: swap; }

:root {
  --groen: #21a157; --groen-d: #1b8548; --tekst: #343a40; --sterk: #15191d; --zacht: #868e96;
  --lijn: #ececec; --bg: #f8f9fa; --vlak: #fff; --geel: #ffc107; --rood: #e74c3c; --blauw: #0087cc;
  --r: 10px; --rk: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 17px/1.4 "Lato", system-ui, sans-serif; }
body { min-height: 100vh; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
h1 { font-size: 24px; color: var(--sterk); margin: 8px 0 4px; font-weight: 700; }
h2 { font-size: 20px; color: var(--sterk); margin: 24px 0 8px; font-weight: 700; }
p { margin: 8px 0; }
a { color: var(--blauw); }
.zacht { color: var(--zacht); font-size: 14px; }

.kop { background: var(--vlak); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top); }
.kop-in { max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 8px; }
.kop-titel { font-weight: 700; color: var(--groen); }
.kop-bedrijf { font-size: 14px; color: var(--zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scherm { max-width: 560px; margin: 0 auto; padding: 8px 16px 24px; }
.laden { color: var(--zacht); }
.stapjes { display: flex; gap: 6px; margin: 8px 0 4px; }
.stapjes span { flex: 1; height: 4px; border-radius: 2px; background: var(--lijn); }
.stapjes span.aan { background: var(--groen); }

.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 16px; margin: 12px 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kaart.waarsch { border-color: var(--geel); background: #fffaeb; }
.kaart.fout { border-color: var(--rood); background: #fdf0ee; }
.kaart.ok { border-color: var(--groen); }
.kaart h3 { margin: 0 0 6px; font-size: 18px; color: var(--sterk); }
.bron { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--lijn); color: var(--zacht); white-space: nowrap; }
.bron.rdw { color: var(--groen-d); border-color: #bfe3cd; background: #eef8f2; }
.bron.beeld { color: var(--blauw); border-color: #b9dcef; background: #eef7fc; }

.knop { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; border-radius: var(--rk); border: 0; font: 700 18px "Lato", system-ui, sans-serif; cursor: pointer; padding: 12px 16px; text-decoration: none; }
.knop.prim { background: var(--groen); color: #fff; }
.knop.prim:active { background: var(--groen-d); }
.knop.sec { background: var(--vlak); color: var(--sterk); border: 2px solid var(--lijn); }
.knop[disabled] { opacity: .45; cursor: default; }
.knop + .knop { margin-top: 10px; }
.link { background: none; border: 0; color: var(--blauw); font: inherit; text-decoration: underline; padding: 12px 0; min-height: 44px; cursor: pointer; }
.actiebalk { position: fixed; left: 0; right: 0; bottom: 0; background: var(--vlak); border-top: 1px solid var(--lijn); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 6; }
.actiebalk > div { max-width: 560px; margin: 0 auto; }

.veld { display: block; margin: 16px 0; }
.veld > span { display: block; font-size: 14px; color: var(--zacht); margin-bottom: 6px; }
input.tekst { width: 100%; min-height: 56px; border: 2px solid var(--lijn); border-radius: var(--rk); padding: 12px 14px; font: 400 20px "Lato", system-ui, sans-serif; color: var(--sterk); background: var(--vlak); }
input.tekst:focus { outline: none; border-color: var(--groen); }
.kenteken-wrap { display: flex; align-items: stretch; border: 3px solid var(--sterk); border-radius: 8px; overflow: hidden; background: #f7c600; }
.kenteken-wrap .eu { background: #003399; color: #fff; font: 700 14px system-ui; width: 40px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.kenteken-wrap input { flex: 1; min-width: 0; border: 0; background: transparent; font: 40px "kenteken", "Lato", sans-serif; text-transform: uppercase; text-align: center; padding: 8px 6px; color: var(--sterk); letter-spacing: 2px; }
.kenteken-wrap input:focus { outline: none; }
.geld { display: flex; align-items: center; border: 2px solid var(--lijn); border-radius: var(--rk); background: var(--vlak); padding-left: 16px; }
.geld:focus-within { border-color: var(--groen); }
.geld b { font-size: 28px; color: var(--zacht); }
.geld input { flex: 1; min-width: 0; border: 0; font: 700 34px "Lato", system-ui, sans-serif; padding: 14px 12px; color: var(--sterk); background: transparent; }
.geld input:focus { outline: none; }
.keuzes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keuzes.twee { grid-template-columns: repeat(2, 1fr); }
.keuze { min-height: 52px; border: 2px solid var(--lijn); background: var(--vlak); border-radius: var(--rk); font: 700 15px "Lato", system-ui, sans-serif; color: var(--sterk); cursor: pointer; padding: 6px; }
.keuze.aan { border-color: var(--groen); background: #eef8f2; color: var(--groen-d); }
.meldfout { color: var(--rood); font-weight: 700; margin: 8px 0; }

.volgende { text-align: center; padding: 20px 16px; }
.volgende .nr { font-size: 14px; color: var(--zacht); }
.volgende h3 { font-size: 22px; margin: 4px 0; }
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
@media (orientation: landscape) and (max-height: 500px) { .raster { grid-template-columns: repeat(4, 1fr); } }
.vak { position: relative; aspect-ratio: 4/3; border-radius: 8px; border: 2px dashed #cfd4d9; background: var(--vlak); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--zacht); padding: 4px; cursor: pointer; }
.vak.gedaan { border: 2px solid var(--groen); padding: 0; }
.vak.huidig { border-color: var(--groen); border-style: dashed; background: #eef8f2; color: var(--groen-d); font-weight: 700; }
.vak.over { opacity: .55; }
.vak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vak .lbl { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(21,25,29,.72); color: #fff; font-size: 11px; padding: 3px 4px; }
.vak .vink { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--groen); color: #fff; font-size: 14px; line-height: 22px; font-weight: 700; }
.vak .bezig { position: absolute; inset: 0; background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; color: var(--sterk); font-weight: 700; }
.vak.mislukt { border-color: var(--rood); }

.lijst { list-style: none; padding: 0; margin: 0; }
.lijst li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.lijst li:last-child { border-bottom: 0; }
.st { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--lijn); color: var(--zacht); }
.st.ok { background: var(--groen); color: #fff; }
.st.bezig { background: var(--blauw); color: #fff; animation: puls 1.2s ease-in-out infinite; }
.st.fout { background: var(--rood); color: #fff; }
.st.overgeslagen { background: var(--geel); color: var(--sterk); }
@keyframes puls { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .st.bezig { animation: none; } }
.lijst .sub { font-size: 14px; color: var(--zacht); }

.intakes li { cursor: pointer; align-items: center; }
.intakes .duim { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--lijn); flex: 0 0 64px; }
.label { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--lijn); white-space: nowrap; }
.label.gereed, .label.concept_klaar { background: #eef8f2; color: var(--groen-d); }
.label.verwerken, .label.ingediend { background: #eef7fc; color: var(--blauw); }
.label.fout { background: #fdf0ee; color: var(--rood); }

.velden { width: 100%; border-collapse: collapse; font-size: 15px; }
.velden td { padding: 8px 4px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.velden td:first-child { color: var(--zacht); width: 40%; }
.tekstvoorbeeld { font-size: 15px; }
.tekstvoorbeeld ul { padding-left: 20px; }
video.reel { width: 100%; max-height: 70vh; border-radius: var(--r); background: #000; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(100px + env(safe-area-inset-bottom)); background: var(--sterk); color: #fff; border-radius: var(--rk); padding: 12px 16px; z-index: 9; max-width: 528px; margin: 0 auto; }
@media (min-width: 700px) { body { padding-top: 16px; } }
.groei { flex: 1; min-width: 0; }
.groei strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
img.groot { width: 100%; border-radius: 8px; display: block; margin-bottom: 12px; }
.link.klein { font-size: 14px; padding: 0 4px; min-height: 0; }
.actiebalk .link { display: block; width: 100%; text-align: center; }