/* Onze reizen — stijl "Bergkompas" (B-038): groen · crème · goud, serif-koppen, Figtree-tekst. Eén accent, lijniconen, 8-px-rooster.
   Ruggengraat van elk scherm: kaart vrij bovenin · knoppenrij over de rand · label + serif-titel + cijfers · kaarten · één groene knop onderin. */
:root {
  --bg: #f6f3ec; --vlak: #ffffff; --tekst: #1d2a22; --zacht: #5f6d64; --lijn: #e3ded2;
  --accent: #1d3b2a; --accent-tekst: #ffffff; --accent-zacht: #dcefe3; --goud: #b8893a; --goud-zacht: #f1e6cf; --goud-ink: #7a5a1e; --rood: #e25a3c; --fout: #a23b2a;
  --schaduw: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(29,59,42,.08);
  --serif: "Young Serif", Georgia, "Times New Roman", serif; --sans: Figtree, -apple-system, "SF Pro Text", system-ui, sans-serif;
  --kop-h: 50px; --hero-h: clamp(240px, 40svh, 420px); --sa-links: env(safe-area-inset-left); --sa-rechts: env(safe-area-inset-right); color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1c15; --vlak: #162820; --tekst: #ecebe4; --zacht: #a3b0a7; --lijn: #24382e;
  --accent: #8fc3a2; --accent-tekst: #0f1c15; --accent-zacht: #1f3a2b; --goud: #d4a55a; --goud-zacht: #3a3221; --goud-ink: #e2c489; --fout: #ef8b7a; --schaduw: none; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0f1c15; --vlak: #162820; --tekst: #ecebe4; --zacht: #a3b0a7; --lijn: #24382e;
  --accent: #8fc3a2; --accent-tekst: #0f1c15; --accent-zacht: #1f3a2b; --goud: #d4a55a; --goud-zacht: #3a3221; --goud-ink: #e2c489; --fout: #ef8b7a; --schaduw: none; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 16px/1.5 var(--sans); min-height: 100dvh; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg.ico { width: 20px; height: 20px; flex: 0 0 auto; }
.laden { padding: 40px 20px; color: var(--zacht); }

/* app-balk: alleen op hulpschermen (ik, leden, testplan, installeren) */
#kop { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 20px 8px; min-height: calc(var(--kop-h) + env(safe-area-inset-top)); background: var(--accent); color: var(--accent-tekst); }
body.reis #kop, body.login #kop { display: none; }
#logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 17px; }
.kompas { color: var(--goud); }
#nav { display: flex; gap: 6px; }
#nav a, #nav button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--goud); color: #1d3b2a; border: 0; text-decoration: none; font-weight: 700; font-size: 14px; }

main { max-width: 680px; margin: 0 auto; padding: 16px calc(20px + env(safe-area-inset-right)) 48px calc(20px + env(safe-area-inset-left)); }
body.reis main, body.login main { padding-top: 0; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 4px 0 0; letter-spacing: -.005em; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 26px 0 10px; }
h3 { font-size: 15px; margin: 0 0 6px; }
.sub { color: var(--zacht); margin: 0 0 16px; }
.klein { font-size: 13px; color: var(--zacht); }
.fout { color: var(--fout); font-size: 14px; }
.link { font-weight: 600; color: var(--accent); text-decoration: none; }
code { background: var(--lijn); padding: 2px 6px; border-radius: 6px; font-size: 15px; }
.intro { font-size: 16px; line-height: 1.55; margin: 8px 0 0; }

.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; padding: 16px; box-shadow: var(--schaduw); }
.kaart + .kaart { margin-top: 12px; }
.lijst { display: grid; gap: 12px; }

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-tekst); border: 0; border-radius: 999px; padding: 13px 20px; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; min-height: 48px; }
.knop.licht { background: var(--vlak); color: var(--accent); border: 1px solid var(--lijn); }
.knop.klein { padding: 8px 14px; min-height: 40px; font-size: 14px; }
.knop:disabled { opacity: .55; }
.rij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rij > * { flex: 1 1 auto; }
.kleine-knop { background: none; border: 0; color: var(--zacht); font-size: 13px; cursor: pointer; padding: 4px; display: inline-flex; align-items: center; }
.rond { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255,255,255,.92); color: var(--accent); text-decoration: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--lijn); color: var(--zacht); vertical-align: middle; white-space: nowrap; }
.status.geboekt { background: var(--accent-zacht); color: var(--accent); }
.status.voorstel, .status.overleg { background: var(--goud-zacht); color: var(--goud-ink); display: inline-block; } /* .voorstel is ook het voorstelblok in het plan (grid) — hier niet */

/* formulieren */
form { display: grid; gap: 10px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--zacht); font-weight: 600; }
input[type=text], input[type=password], input[type=url], input[type=search], input[type=date], input[type=time], select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); font-size: 17px; font-weight: 400; color: var(--tekst); }
textarea { min-height: 72px; resize: vertical; }
.vink { display: flex; align-items: center; gap: 10px; color: var(--tekst); font-size: 16px; font-weight: 400; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.vink:last-child { border-bottom: 0; }
.vink input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

/* inloggen */
body.login { background: var(--accent); }
.login-kop { height: calc(300px + env(safe-area-inset-top)); margin: 0 calc(-20px - env(safe-area-inset-right)) 0 calc(-20px - env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 32px; color: #fff; background: var(--accent); position: relative; overflow: hidden; }
.login-kop::before { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: rgba(255,255,255,.08); clip-path: polygon(0 60%, 18% 35%, 31% 55%, 49% 20%, 67% 50%, 82% 30%, 100% 55%, 100% 100%, 0 100%); }
.login-titel { font-family: var(--serif); font-size: 34px; margin-top: 14px; position: relative; }
.login-sub { font-size: 15px; color: rgba(255,255,255,.8); margin-top: 6px; position: relative; text-align: center; padding: 0 24px; }
.login-vlak { margin: 0 calc(-20px - env(safe-area-inset-right)) 0 calc(-20px - env(safe-area-inset-left)); background: var(--bg); border-radius: 28px 28px 0 0; padding: 28px calc(24px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); min-height: calc(100svh - 300px - env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 12px; }
.login-vlak form { gap: 12px; }
.login-install { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-top: auto; padding: 14px 16px; }
.login-install .ico { color: var(--accent); }

/* overzicht */
a.reis { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 12px 16px; }
a.reis .status { flex: 0 0 auto; } /* label nooit smaller dan zijn tekst (Canada 'in voorbereiding' stak uit) */
.reis .band { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; background: linear-gradient(135deg, #0f1c2e, #1d3b2a); }
.reis .band.disney-2027 { background: linear-gradient(135deg, #2a1c5e, #1d3b2a); }
.reis .band.canada-2028 { background: linear-gradient(135deg, #1f3b2d, #c9811a); }
.reis .band.berck-2026 { background: linear-gradient(135deg, #8fb3c9, #4e7a94); }
.reis > div { flex: 1; min-width: 0; }
.reis .titel { font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.reis .meta { color: var(--zacht); font-size: 13.5px; }
.merk { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--tekst); font-weight: 700; font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.14); }

/* kop: kaart + knoppenrij + titel */
.hero { position: relative; height: var(--hero-h); margin: 0 calc(-20px - env(safe-area-inset-right)) 0 calc(-20px - env(safe-area-inset-left)); background: #eceeea; overflow: hidden; }
.hero.laag { --hero-h: clamp(180px, 28svh, 260px); }
.hero .kaartlaag { position: absolute; inset: 0; }
.hero .tint { position: absolute; left: 0; right: 0; top: 0; height: calc(70px + env(safe-area-inset-top)); background: linear-gradient(180deg, rgba(246,243,236,.9), rgba(246,243,236,0)); pointer-events: none; z-index: 1; }
.hero .bovenrij { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; z-index: 2; pointer-events: none; }
.hero .bovenrij > * { pointer-events: auto; }
.hero .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--goud); color: #1d3b2a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.hero .maplibregl-map { position: absolute; inset: 0; font: inherit; }
.hero .maplibregl-canvas { outline: 0; }
.hero .maplibregl-ctrl-bottom-right { bottom: 30px; right: calc(4px + env(safe-area-inset-right)); z-index: 3; }
.maplibregl-ctrl-attrib { font-size: 9px; border-radius: 999px; }
.maplibregl-ctrl-attrib:not(.open) .maplibregl-ctrl-attrib-inner { display: none; }
.maplibregl-ctrl-attrib:not(.open) { background: rgba(255,255,255,.7) !important; padding: 0 !important; min-height: 20px; }
.maplibregl-ctrl-attrib a { color: #1d2a22 !important; }
.maplibregl-popup-content { font: 600 12px var(--sans); border-radius: 8px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.speld { width: 16px; height: 16px; border-radius: 999px; background: var(--goud); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
.speld.foto { background: var(--rood); }
.speld.groot { width: 28px; height: 28px; color: #fff; font: 700 11px/22px var(--sans); text-align: center; }
.speld.oud { background: var(--zacht); }
.speld.nu { background: #2b6f8f; width: 20px; height: 20px; box-shadow: 0 0 0 6px rgba(43,111,143,.25); }
.stop { width: 22px; height: 22px; border-radius: 999px; background: var(--goud); color: #1d3b2a; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); font: 700 11px/18px var(--sans); text-align: center; cursor: pointer; }

.kopblok { display: contents; }
.segment { position: relative; z-index: 2; margin: -24px 0 0; background: var(--vlak); border-radius: 999px; padding: 4px; display: flex; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.segment a { flex: 1; text-align: center; padding: 10px 0; border-radius: 999px; color: var(--zacht); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.segment a.actief { background: var(--accent); color: var(--accent-tekst); }
.segment.minis { gap: 4px; }
.segment.minis a { flex: 0 0 40px; height: 40px; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--lijn); }
.segment.minis a img { width: 100%; height: 100%; object-fit: cover; }
.segment.minis a.actief { box-shadow: inset 0 0 0 2px var(--accent); background: var(--lijn); }
.segment.minis a.meer { font-size: 12px; font-weight: 700; }
.segment.minis a.opkaart { flex: 1; gap: 6px; font-size: 13px; color: var(--accent); }
.titelblok { padding: 18px 0 0; }
.titelblok .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); font-weight: 600; }
.titelblok .regel { font-size: 14.5px; color: var(--zacht); margin-top: 4px; }
.cijfers { display: flex; gap: 22px; padding: 12px 0 2px; flex-wrap: wrap; }
.cijfers div { line-height: 1.1; } .cijfers b { font-size: 20px; font-family: var(--serif); font-weight: 400; display: block; } .cijfers span { font-size: 12px; color: var(--zacht); font-weight: 600; }
.cijfers .open b { color: #b8432a; }
section[data-tab] { padding-top: 12px; }

/* landscape: kaart lager, titel en knoppenrij op één regel */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --hero-h: clamp(170px, 50svh, 240px); }
  body.reis main { max-width: none; }
  .kopblok { display: flex; align-items: flex-start; gap: 16px; padding-top: 12px; }
  .kopblok .titelblok { order: 1; flex: 1; min-width: 0; padding-top: 0; }
  .kopblok .titelblok .titel { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kopblok .segment { order: 2; flex: 0 0 300px; margin: 0; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
  .kopblok .segment.minis { flex: 0 0 auto; }
  .cijfers { gap: 16px; padding-top: 6px; }
  body.reis .actiebalk { left: auto; right: calc(24px + env(safe-area-inset-right)); width: auto; background: none; padding: 0 0 12px; }
  body.reis .actiebalk .knop { flex: 0 0 auto; padding: 0 18px; min-height: 44px; }
  body.reis .actiebalk .knop.licht { width: 44px; }
}
@media (min-width: 720px) and (min-height: 521px) { .hero { margin: 16px 0 0; border-radius: 20px; } }

/* plan */
.voorstelkaart h2 { margin: 0 0 10px; }
.voorstel { display: grid; grid-template-columns: 72px 1fr; gap: 8px 12px; font-size: 14.5px; line-height: 1.45; }
.voorstel .k { color: var(--zacht); font-weight: 600; }
.links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.links a { font-weight: 600; font-size: 13.5px; color: var(--accent); text-decoration: none; }
.tijdlijn .tl { display: grid; grid-template-columns: 22px 1fr; gap: 0 12px; }
.tl-lijn { display: flex; flex-direction: column; align-items: center; }
.tl-lijn .bol { width: 12px; height: 12px; border-radius: 999px; border: 3px solid var(--goud); background: var(--vlak); box-sizing: border-box; margin-top: 5px; flex: 0 0 auto; }
.tl-lijn .bol.vol { background: var(--goud); } .tl-lijn .bol.foto { background: var(--rood); border-color: var(--rood); }
.tl-lijn .streep { flex: 1; width: 2px; background: var(--lijn); }
.tl:last-child .streep { display: none; }
.tl-inhoud { padding-bottom: 18px; min-width: 0; }
.dagkop { font-size: 12px; font-weight: 700; color: var(--goud); letter-spacing: .06em; text-transform: uppercase; }
.dagkop .km { color: var(--zacht); letter-spacing: 0; text-transform: none; font-weight: 600; margin-left: 4px; }
.dagtitel { font-weight: 600; font-size: 16px; margin-top: 2px; }
.dagtekst { font-size: 14.5px; color: var(--zacht); line-height: 1.5; margin-top: 2px; }
.bouw { margin-top: 10px; } .bouw summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.bouw .lijst { margin: 6px 0 4px; }
.bouwsteen .link { display: inline-block; margin-top: 4px; font-size: 13.5px; }
.openlijst { margin: 0; padding-left: 20px; color: var(--zacht); font-size: 14.5px; line-height: 1.6; }

/* vraagkaart: het vaste onderdeel */
.vraagkaart { background: var(--goud-zacht); border-left: 3px solid var(--goud); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.vraagkaart.compact { margin-top: 0; }
.vraagkaart.stil { background: var(--vlak); border-left-color: var(--lijn); }
.vraagkaart.stil .vraagkop { color: var(--zacht); }
.vraagkop { font-size: 12px; font-weight: 700; color: var(--goud-ink); letter-spacing: .06em; text-transform: uppercase; }
.vraagtekst { font-size: 15px; line-height: 1.45; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--lijn); background: var(--vlak); font-size: 14px; cursor: pointer; }
.chip.aan { border-color: var(--accent); background: var(--accent-zacht); font-weight: 600; }
.vraagkaart textarea { min-height: 48px; background: var(--vlak); font-size: 15px; }
.vraagvoet { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* stappen en berichten */
.stap { display: block; text-decoration: none; color: inherit; margin-top: 8px; padding: 0; overflow: hidden; }
.stap .tekst { padding: 12px 14px 4px; font-size: 14.5px; line-height: 1.45; }
.stapvoet { display: flex; justify-content: space-between; gap: 8px; padding: 8px 14px 12px; font-size: 12.5px; color: var(--zacht); }
.muur { display: grid; grid-template-columns: 2fr 1fr; gap: 3px; height: 170px; }
.muur.een { grid-template-columns: 1fr; height: 200px; }
.muur.twee { grid-template-columns: 1fr 1fr; }
.muur > * { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--lijn); }
.muur .rest { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
.muur .rest > * { min-height: 0; }
.muur .meer { position: relative; } .muur .meer::after { content: attr(data-meer); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; background: rgba(0,0,0,.35); }
.bericht { margin-top: 12px; padding: 0; overflow: hidden; }
.bericht .kopregel { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; }
.bericht .initiaal { width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--accent-tekst); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.bericht .van { font-weight: 600; font-size: 14.5px; }
.bericht .tijd { color: var(--zacht); font-size: 12.5px; }
.bericht .tekst { padding: 4px 16px 10px; white-space: pre-wrap; font-size: 15px; line-height: 1.55; }
.reacties { margin: 0 16px; border-top: 1px solid var(--lijn); padding: 10px 0 4px; display: grid; gap: 6px; }
.reactie { font-size: 15px; } .reactie b { margin-right: 4px; }
.reactie-form { display: flex; gap: 6px; padding: 8px 16px 14px; }
.reactie-form input { flex: 1; padding: 9px 12px; font-size: 15px; border-radius: 999px; }
.reactie-form button { padding: 9px 14px; min-height: 40px; }

/* stap open: foto's in de kop */
.hero.carrousel { background: #000; }
.strook { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strook::-webkit-scrollbar { display: none; }
.dia { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; }
.dia img, .dia video { width: 100%; height: 100%; object-fit: contain; }
.hero .teller { height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; }
.hero.carrousel .tint { display: none; }

/* plaatsen */
.fotokeuze { padding: 12px; }
.raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.raster > * { min-width: 0; }
.raster .tegel, .raster .kies { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; object-fit: cover; background: var(--lijn); display: flex; align-items: center; justify-content: center; color: var(--zacht); }
img.tegel { display: block; }
.handmatig { display: grid; gap: 8px; margin-top: 10px; } .handmatig input[type=date] { font-size: 15px; padding: 9px 12px; }
.raster .kies { border: 1.5px dashed var(--goud); background: transparent; color: var(--accent); cursor: pointer; }
.voortgang { height: 6px; background: var(--lijn); border-radius: 3px; overflow: hidden; }
.voortgang > div { height: 100%; background: var(--goud); width: 0; transition: width .2s; }

/* actiebalk, beheer, hulp */
.actiebalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 10px; padding: 10px calc(20px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); background: linear-gradient(180deg, transparent, var(--bg) 45%); pointer-events: none; }
.actiebalk > * { pointer-events: auto; }
.actiebalk .knop { flex: 1; box-shadow: 0 8px 20px rgba(29,59,42,.3); }
.actiebalk .knop.licht { flex: 0 0 52px; width: 52px; padding: 0; border-radius: 999px; box-shadow: none; }
main:has(.actiebalk) { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.beheer-details { margin-top: 20px; } .beheer-details summary { cursor: pointer; padding: 8px 0; }
.beheer { border-left: 4px solid var(--goud); margin-top: 10px; }
.beheer form.rij input { flex: 1 1 160px; } .beheer form.rij button { flex: 0 0 auto; }
.installeer { border-left: 4px solid var(--goud); }
#melding { position: fixed; left: calc(20px + env(safe-area-inset-left)); right: calc(20px + env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; background: var(--tekst); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--schaduw); z-index: 9; }
.kijker { position: fixed; inset: 0; background: #000; z-index: 20; display: grid; place-items: center; }
.kijker img, .kijker video { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.kijker button { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; background: rgba(255,255,255,.2); color: #fff; border: 0; border-radius: 999px; width: 40px; height: 40px; }
.kijker .orig { position: absolute; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.15); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 15px; white-space: nowrap; }
.plan-houder { margin: 12px calc(-20px - env(safe-area-inset-right)) 8px calc(-20px - env(safe-area-inset-left)); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); overflow: hidden; }
#plan-frame { display: block; width: 100%; min-width: 100%; border: 0; }

/* eigen reis: formulieren */
.formulier .kaart { display: grid; gap: 12px; }
.formulier .kaart + .kaart { margin-top: 12px; }
.formulier h2 { margin: 22px 0 10px; }
.rij.twee > label { flex: 1 1 140px; }
input[type=date] { min-height: 48px; -webkit-appearance: none; appearance: none; }
select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--zacht) 50%), linear-gradient(135deg, var(--zacht) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.zoeklijst { display: grid; gap: 6px; margin-top: 8px; }
.zoeklijst button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--bg); cursor: pointer; }
.pleklijst { display: grid; gap: 6px; margin-top: 8px; }
.plek-rij { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--bg); }
.plek-rij .stop { position: static; transform: none; }
.dagform { border-left: 4px solid var(--goud); }
.dagform .kleine-knop { flex: 0 0 auto; }

.bevestig { display: grid; gap: 10px; padding: 12px; margin-bottom: 10px; border-radius: 12px; background: var(--goud-zacht); color: var(--goud-ink); font-size: 14px; }
.bevestig .rij > * { flex: 0 0 auto; }

.antwoord { padding: 8px 10px; border-radius: 10px; background: var(--accent-zacht); font-size: 14px; }
.melding-kaart select { font-size: 14px; padding: 8px 32px 8px 10px; }
.melding-kaart input[type=text] { font-size: 15px; padding: 9px 12px; }

.startcode { display: grid; gap: 4px; flex: 1 1 100%; } .startcode code { font-size: 18px; letter-spacing: .04em; }

/* huishouden en paklijst */
.hh-kop { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--goud); font-weight: 600; margin: 6px 0 4px; }
.hh-lijst { display: grid; gap: 4px; }
.hh-rij { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--lijn); font-size: 15px; color: var(--tekst); }
.hh-rij:last-child { border-bottom: 0; }
.paklijst-groep { display: grid; gap: 2px; padding: 8px 12px; }
.pak-rij { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--lijn); font-size: 15px; font-weight: 400; color: var(--tekst); cursor: pointer; }
.pak-rij input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.pak-rij .pak-tekst { flex: 1; }
.pak-rij.af .pak-tekst { color: var(--zacht); text-decoration: line-through; }
.pak-rij .pak-weg { flex: 0 0 auto; opacity: .5; }
.pak-eigen { padding: 8px 4px 4px; }
.pak-eigen input { font-size: 15px; padding: 9px 12px; }
.voortgang[style*="display"] { height: 8px; }
@media (orientation: landscape) and (max-height: 520px) { .segment a { padding-left: 10px; padding-right: 10px; } }

.ideekaart { display: block; text-decoration: none; color: inherit; } .ideekaart .titel { font-family: var(--serif); font-size: 19px; line-height: 1.15; } .ideekaart .meta { color: var(--zacht); font-size: 13.5px; margin-top: 2px; } .ideekaart .waarom { font-size: 14.5px; margin-top: 8px; white-space: pre-wrap; }

/* wie gaat mee */
.wgm-rij { display: grid; grid-template-columns: minmax(0, 1fr) 1.2fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--lijn); }
.wgm-rij:first-child { border-top: 0; }
.wgm-naam { display: grid; line-height: 1.2; font-size: 14.5px; } .wgm-naam .klein { font-size: 12px; }
.wgm-balk { position: relative; height: 18px; background: var(--lijn); border-radius: 6px; overflow: hidden; }
.wgm-balk > div { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--accent); }
.wgm-balk > div.eigen { background: var(--goud); }
.wgm-balk > div.gast { background: repeating-linear-gradient(135deg, var(--goud) 0 6px, var(--goud-zacht) 6px 12px); }
.venster { background: var(--goud-zacht); border-color: transparent; color: var(--goud-ink); font-size: 14px; margin-bottom: 12px; }
.wissel { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--goud-ink); background: var(--goud-zacht); border-radius: 999px; padding: 2px 10px; }
.verb-rij { padding: 0 0 8px; } .verb-rij a { color: var(--accent); }

/* familie-stand / beheer-stand (B-040) */
/* beheer-stand: donker kopje in de bovenbalk (ingehaald: vaste strook bovenaan viel op iOS onder de wazige statusbalk en bedekte de bovenste rij) */
.stand-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: #2b2416; color: #f1e6cf; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
#nav .stand-chip { width: auto; height: 32px; padding: 0 12px; background: #2b2416; color: #f1e6cf; font-size: 12px; align-self: center; }
.hero .bovenrij .rechts .stand-chip { flex: 0 0 auto; }
.stand-keuze { margin: 10px 0 0; box-shadow: none; border: 1px solid var(--lijn); }
.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tegels .kaart + .kaart { margin-top: 0; }
.tegel { display: flex; flex-direction: column; gap: 4px; text-decoration: none; min-height: 112px; }
.tegel-ico { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.beheer-reis { display: block; text-decoration: none; }
.beheer-reis-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.beheer-reis-acties { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); font-size: 14px; }
.beheer-reis-acties a { font-weight: 600; color: var(--accent); text-decoration: none; }
.beheer-reis.dicht { opacity: .75; }
.beheer-reis .label { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.beheer-reis .label.lid { background: var(--accent-zacht); color: var(--accent); }
.beheer-reis .label.geen { background: var(--lijn); color: var(--zacht); }
.lid-rij + .beheer-rij { margin: -4px 0 6px; }

/* wat is er nieuw (B-046) */
.hero .bovenrij .rechts { display: flex; gap: 8px; align-items: center; }
.bel { position: relative; }
.bel .stip { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--rood); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; line-height: 1; }
#nav a.bel { background: var(--vlak); color: var(--accent); border: 1px solid var(--lijn); }
.nieuw-in-app { display: flex; gap: 10px; align-items: flex-start; background: var(--goud-zacht); border-color: var(--goud-zacht); margin: 0 0 12px; }
.nieuw-in-app .ster { font-size: 20px; line-height: 1.2; }
.nieuw-in-app a { color: var(--goud-ink); }
.nieuws-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nieuws-tabs { margin: 12px 0 4px; box-shadow: none; border: 1px solid var(--lijn); }
.nieuws-groep { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); font-weight: 600; margin: 16px 0 2px; }
.nieuws-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--lijn); text-decoration: none; color: inherit; }
.nieuws-ico { width: 36px; height: 36px; border-radius: 999px; background: var(--lijn); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 17px; }
.nieuws-item.ongelezen .nieuws-ico { background: var(--accent-zacht); }
.nieuws-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nieuws-tekst .wat { font-size: 15px; overflow-wrap: anywhere; }
.nieuws-item.ongelezen .wat { font-weight: 700; }
.nieuws-item .punt { width: 9px; height: 9px; border-radius: 999px; background: var(--rood); margin-top: 7px; flex: 0 0 auto; }
.versie ul { margin: 8px 0 0; padding-left: 18px; }
.versie-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.versie .nieuw { color: var(--rood); font-weight: 700; }

/* kopjes: vaste keuze (jij, altijd) en status bij meldingen */
.chip.vast { cursor: default; opacity: .85; }
.m-status { margin: 4px 0 8px; }

/* beheerblok bij een reis: open bovenaan Reacties (ontwerp W-Wiegaatmee) */
.beheer-blok { margin-top: 8px; }
.beheer-blok > .label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); font-weight: 600; margin: 4px 0 8px; }
.beheer-blok .kaart + .kaart { margin-top: 12px; }
.beheer-reis .reis-weg { color: #a33; padding: 0; }
#br .kaart + .kaart { margin-top: 12px; }

/* Wie gaat mee bovenaan het plan (Dimitri 12-10: 'splitsing voor personen niet te zien') */
.wgm-kaart { margin-bottom: 14px; }
.wgm-rij.leeg .wgm-balk > div { background: var(--accent-zacht); }
a.cijfer-link { display: block; line-height: 1.1; text-decoration: none; color: inherit; }
a.cijfer-link b { font-size: 20px; font-family: var(--serif); font-weight: 400; display: block; }
a.cijfer-link span { font-size: 12px; color: var(--accent); font-weight: 600; }

/* Wie gaat mee: standaard ingeklapt tot één regel (Dimitri, 12-10-2026) */
.wgm-kaart > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.wgm-kaart > summary::-webkit-details-marker { display: none; }
.wgm-kaart > summary h3 { margin: 0; }
.wgm-sam { display: grid; gap: 2px; min-width: 0; }
.wgm-pijl { font-size: 22px; line-height: 1; color: var(--goud-ink); transition: transform .15s; flex: 0 0 auto; }
.wgm-kaart[open] .wgm-pijl { transform: rotate(90deg); }

/* de Jutter (B-049/B-050, canvas rij 7 en 8) */
.sectielabel { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); font-weight: 600; margin: 18px 0 8px; }
.kansen-ingang { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin: 0 0 12px; background: var(--goud-zacht); border-color: var(--goud-zacht); }
.kansen-tekst { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kansen-ico { font-size: 22px; line-height: 1; }
.kansen-ingang .pijl { font-size: 22px; color: var(--goud-ink); }
.kaart.kans, .kaart.treffer { display: block; text-decoration: none; color: inherit; }
.kaart.moment { background: var(--goud-zacht); border-color: var(--goud-zacht); padding: 10px 14px; font-size: 13.5px; margin-bottom: 4px; }
.kans-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kans-kop b { font-size: 15.5px; min-width: 0; overflow-wrap: anywhere; }
.kans-tot { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--fout); }
.kans-prijs { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.kans-prijs .bedrag { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.kans-prijs.groot .bedrag { font-size: 26px; }
.kans-regel { font-size: 13.5px; margin-top: 4px; }
.kans-rij { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.kans-rij.raming { color: var(--zacht); }
.kans-rij.totaal { border-top: 1px solid var(--lijn); margin-top: 10px; padding-top: 10px; }
.kans-uitleg { font-size: 13.5px; line-height: 1.5; display: grid; gap: 4px; }
.kans-deadline { color: var(--fout); font-weight: 600; }
.kans-bronregel { margin-top: 8px; }
.kans-knoppen { display: flex; gap: 8px; margin-top: 12px; }
.kans-knoppen .knop { flex: 1; min-height: 44px; padding: 10px 12px; }
.kans-waarom { margin: 10px 0 6px; }
.kans-bron { margin-top: 14px; font-size: 13px; }
.kans-bron summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.kans-bron blockquote { margin: 8px 0; padding-left: 10px; border-left: 3px solid var(--lijn); color: var(--zacht); }
.kans-bron pre { white-space: pre-wrap; font: 12.5px/1.45 ui-monospace, Menlo, monospace; background: var(--bg); padding: 8px; border-radius: 8px; overflow-wrap: anywhere; }
.jutter-sectie { margin: 0 0 16px; }
.jutter-sectie > .sectielabel { margin-top: 4px; }
.jutter-sectie .kaart.treffer { border-color: var(--goud-zacht); }
.kaart.treffer.kort { opacity: .9; }
.schakel { width: 48px; height: 28px; border-radius: 999px; background: var(--lijn); border: 0; position: relative; cursor: pointer; flex: 0 0 auto; padding: 0; }
.schakel span { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.schakel.aan { background: var(--accent); }
.schakel.aan span { left: 23px; }
.schakel:disabled { opacity: .5; cursor: not-allowed; }
.jm-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jm-kop h3 { margin: 0; }
.jm-uitleg { margin-top: 6px; }
.jm-voor { background: var(--bg); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.jm-details { margin-top: 10px; }
.jm-details > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.jm-veld { font-size: 13.5px; font-weight: 600; margin: 10px 0 6px; }
.jm-prijs { flex-wrap: nowrap; }
.jm-prijs input { flex: 1 1 auto; min-width: 0; width: auto; }
.jm-prijs .chips { flex: 0 0 auto; flex-wrap: nowrap; }
.jb-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jb-aan { display: flex; align-items: center; gap: 8px; }
.jb-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.jb-cijfers .kaart, .jb-cijfers .kaart + .kaart { padding: 10px 6px; text-align: center; margin: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.jb-cijfers b { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.bj-kop2 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bj-kop2 > span { flex: 0 0 auto; }
.bj-kop2 a { text-decoration: none; color: inherit; min-width: 0; }
.bj-doel.uit { opacity: .6; }
.bj-acties { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 2px; }
.bj-acties .kleine-knop:first-child { padding-left: 0; }
.bj-streep { border-top: 1px solid var(--lijn); margin: 10px 0; }
.bj-plus { color: var(--accent); font-weight: 600; font-size: 14px; padding: 0; }
.bj-runs { font-size: 13px; line-height: 1.6; }
.bj-runs > div + div { margin-top: 6px; }
.bj-gemist .chips { margin: 8px 0; }
.bj-gemist .rij input { flex: 1 1 160px; min-width: 0; }
.gemist-item .kleine-knop { padding-left: 0; }
.nieuws-ico.soort-jutter, .nieuws-item.ongelezen .nieuws-ico.soort-jutter { background: var(--goud-zacht); }
/* antwoorden onder de vraag (alleen voor wie de reis beheert) */
.vraag-antwoorden { display: grid; gap: 4px; font-size: 14px; background: var(--vlak); border-radius: 10px; padding: 8px 10px; }
.vraagkaart.stil .vraag-antwoorden { background: var(--bg); }
.cijfers a.open { color: inherit; text-decoration: none; }
/* tussenstand per vraag (B-055): alleen keuzes, voor iedereen die de reis ziet */
.tussenstand { display: grid; gap: 2px; font-size: 14px; }
.tussenstand .stand-rij { display: flex; justify-content: space-between; gap: 10px; }
.tussenstand .stand-rij b { flex: 0 0 auto; color: var(--goud-ink); }
/* reisformulier: vakjes in groepen, voorstellen uit eigen woorden (v62) */
.tag-kop { font-size: 13px; color: var(--zacht); font-weight: 600; margin: 14px 0 6px; }
.tag-kop .klein { font-weight: 400; }
.soort-tip { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.soort-tip .chip { padding: 4px 10px; font-size: 13px; }
#data-uitleg:not(:empty) { margin-top: 8px; }
/* voorstel van Claude (v63) */
.cv-voorstel { margin-top: 12px; display: grid; gap: 8px; border-top: 1px solid var(--lijn); padding-top: 10px; }
.cv-voorstel ul { margin: 0 0 0 18px; padding: 0; }
.cv-vragen { margin: 0 0 0 18px; padding: 0; display: grid; gap: 8px; } /* v85, B-098 */
.cv-vragen .cv-opties { margin: 4px 0 2px; gap: 6px; }
.cv-vragen .chip { padding: 3px 10px; font-size: 13px; cursor: default; }
.slot { color: var(--accent); font-weight: 600; margin-top: 4px; } /* B-099: vertrouwelijke vraag */
.cv-tekst { white-space: pre-wrap; margin: 2px 0 0; }
.cv-bronnen { font-size: 13px; }
.cv-bronnen a { word-break: break-word; }

/* baby-logboek (B-070): gewicht, groei en vitamine — kleuren via de bestaande variabelen, dus ook donker */
.formulier-baby, .vitamine-blok { display: grid; gap: 12px; }
.formulier-baby input[type=number], .formulier-baby input[type=datetime-local], .vitamine-blok input[type=datetime-local] { width: 100%; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); font-size: 17px; font-weight: 400; color: var(--tekst); min-height: 48px; }
.knop.groot { width: 100%; min-height: 64px; font-size: 19px; }
.vit-vandaag, .groei { border-radius: 12px; }
.vit-vandaag { padding: 10px 12px; font-weight: 600; }
.vit-vandaag.goed, .groei.goed { background: var(--accent-zacht); color: var(--tekst); border-color: var(--accent); }
.vit-vandaag.laag, .groei.laag { background: var(--goud-zacht); color: var(--tekst); border-color: var(--goud); }
.groei { border-width: 2px; }
.groei-getal { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.baby-grafiek { width: 100%; height: auto; display: block; }
.baby-grafiek text { font-size: 11px; fill: var(--zacht); font-family: var(--sans); }
.baby-grafiek .raster { stroke: var(--lijn); stroke-width: 1; }
.baby-grafiek .lijn { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.baby-grafiek .stip circle { fill: var(--accent); }
.baby-grafiek .doel { stroke: var(--goud); stroke-width: 2; stroke-dasharray: 5 4; }
.baby-grafiek .who { fill: none; stroke: var(--lijn); stroke-width: 1.3; }
.baby-grafiek .who.mid { stroke: var(--zacht); stroke-width: 1.6; }
.groei-kop { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.baby-legenda { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.baby-legenda .sw { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--accent); }
.baby-legenda .sw.doel { border-top: 2px dashed var(--goud); }
.baby-legenda .sw.who { border-top: 1.5px solid var(--zacht); }
.baby-lijst { padding: 4px 16px; }
.baby-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.baby-rij:last-child { border-bottom: 0; }
.baby-ingang { background: var(--accent-zacht); border-color: var(--accent-zacht); }
.baby-ingang .pijl { color: var(--accent); }
.baby-ingang + .baby-ingang { margin-top: 0; }

/* portaal (B-071, Dimitri 14-10-2026: "De stijl is leuk voor de reisapp"): startscherm en modules in een neutrale schil — wit, lichtgrijs, antraciet, Public Sans
   (eigen kopie in /fonts, @fontsource 5.1.0). Alleen de tegel Reizen houdt een groen accent; de reismodule zelf blijft "Bergkompas". */
body.portaal {
  --bg: #f4f5f7; --vlak: #ffffff; --tekst: #1a1c1e; --zacht: #5f6672; --lijn: #e3e5e8; --accent: #2b2f36; --accent-tekst: #ffffff; --accent-zacht: #f0f1f3;
  --goud: #8a4b00; --goud-zacht: #fff3df; --goud-ink: #8a4b00; --serif: "Public Sans", -apple-system, "SF Pro Text", system-ui, sans-serif; --sans: "Public Sans", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --p-groen: #1d6b3a; --p-groen-zacht: #e8f0ea; --p-rood: #b42318; --p-chip: #f0f1f3; --p-uit: #c9cdd3; --schaduw: none;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.portaal {
  --bg: #121416; --vlak: #1c1f23; --tekst: #eceef1; --zacht: #9aa0a8; --lijn: #2b2f36; --accent: #e3e5e8; --accent-tekst: #121416; --accent-zacht: #2b2f36;
  --goud: #f0b35c; --goud-zacht: #3a2c17; --goud-ink: #f0b35c; --p-groen: #7cc49a; --p-groen-zacht: #1b2e22; --p-rood: #f0786b; --p-chip: #2b2f36; --p-uit: #3d424a; } }
:root[data-theme="dark"] body.portaal {
  --bg: #121416; --vlak: #1c1f23; --tekst: #eceef1; --zacht: #9aa0a8; --lijn: #2b2f36; --accent: #e3e5e8; --accent-tekst: #121416; --accent-zacht: #2b2f36;
  --goud: #f0b35c; --goud-zacht: #3a2c17; --goud-ink: #f0b35c; --p-groen: #7cc49a; --p-groen-zacht: #1b2e22; --p-rood: #f0786b; --p-chip: #2b2f36; --p-uit: #3d424a; }
body.portaal h1, body.portaal h2, body.portaal h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; }
body.portaal #kop { background: var(--vlak); color: var(--tekst); border-bottom: 1px solid var(--lijn); }
body.portaal #kop .kompas { color: var(--tekst); }
body.start #kop { display: none; }
body.start main { padding: 0; max-width: none; }
.start-wrap { display: flex; min-height: 100dvh; }
.start-zij { display: none; }
.start-hoofd { flex: 1; min-width: 0; max-width: 680px; margin: 0 auto; padding: 0 calc(20px + env(safe-area-inset-right)) 48px calc(20px + env(safe-area-inset-left)); }
.start-kop { background: var(--vlak); color: var(--tekst); border-bottom: 1px solid var(--lijn); margin: 0 calc(-20px - env(safe-area-inset-right)) 20px calc(-20px - env(safe-area-inset-left)); padding: calc(16px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 18px calc(20px + env(safe-area-inset-left)); }
.start-kop-rij { display: flex; justify-content: space-between; align-items: center; }
.start-kop .rechts { display: flex; gap: 10px; align-items: center; }
.start-kop .rond { background: var(--p-chip); color: var(--tekst); box-shadow: none; width: 44px; height: 44px; }
.start-kop .avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--tekst); color: var(--vlak); display: flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; }
.start-merk { font-weight: 700; letter-spacing: -.01em; font-size: 24px; }
.start-groet { font-size: 15px; color: var(--zacht); margin-top: 6px; }
.start-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.start-tegel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 18px; padding: 16px; min-height: 148px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; color: var(--tekst); text-decoration: none; }
.start-tegel svg { color: var(--accent); flex: 0 0 auto; }
.start-tegel.breed { grid-column: 1 / -1; }
.start-tegel.reizen svg { color: var(--p-groen); }
.start-tegel.beheer { border: 1px dashed var(--zacht); }
.start-tegel.beheer svg { color: var(--zacht); }
.start-tegel.lijstje { min-height: 0; justify-content: flex-start; gap: 8px; padding: 16px 18px; }
.t-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.t-kop { display: flex; align-items: center; gap: 10px; }
.t-naam { font-weight: 700; letter-spacing: -.01em; font-size: 20px; line-height: 1.15; }
.t-sub { font-size: 13px; color: var(--zacht); }
.t-label { font-size: 12px; font-weight: 600; background: var(--p-chip); color: var(--tekst); padding: 4px 10px; border-radius: 10px; white-space: nowrap; }
.t-label.let { background: var(--goud-zacht); color: var(--goud-ink); }
.t-label.rood { background: var(--p-rood); color: #fff; }
.t-label.groen { background: var(--p-groen-zacht); color: var(--p-groen); }
.t-rij { display: flex; gap: 10px; font-size: 14px; }
.t-rij b { min-width: 64px; color: var(--zacht); font-weight: 600; }
.start-voet { text-align: center; margin-top: 14px; }
body.start #nieuw-in-app { margin-bottom: 14px; }
@media (min-width: 1000px) {
  .start-zij { display: flex; flex-direction: column; gap: 24px; flex: 0 0 240px; background: var(--vlak); color: var(--tekst); border-right: 1px solid var(--lijn); padding: 28px 20px; box-sizing: border-box; position: sticky; top: 0; height: 100dvh; }
  .start-zij .start-merk { font-size: 26px; }
  .start-zij nav { display: flex; flex-direction: column; gap: 4px; }
  .start-zij nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--zacht); text-decoration: none; min-height: 44px; box-sizing: border-box; }
  .start-zij nav a.actief { background: var(--p-chip); color: var(--tekst); font-weight: 600; }
  .zij-voet { margin-top: auto; }
  .start-hoofd { max-width: 1120px; padding: 0 40px 48px; }
  .start-kop { background: none; border: 0; margin: 0 0 24px; padding: 36px 0 0; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; }
  .start-kop .start-merk { display: none; }
  .start-groet { font-weight: 700; letter-spacing: -.01em; font-size: 30px; color: var(--tekst); margin: 0; }
  .start-kop .rond { background: var(--vlak); border: 1px solid var(--lijn); }
  .start-tegels { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
  .start-tegel { min-height: 180px; padding: 22px; border-radius: 20px; }
  .start-tegel .t-naam { font-size: 24px; }
  .start-tegel.lijstje { min-height: 0; }
}
/* To do */
.td-kop { font-size: 12px; font-weight: 600; color: var(--zacht); text-transform: uppercase; letter-spacing: .04em; margin: 18px 4px 8px; }
.td-actie { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.td-actie + .td-actie, .td-vraag + .td-vraag { margin-top: 8px; }
.vakje { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; border: 2px solid var(--accent); background: var(--vlak); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--accent-tekst); }
.td-actie.klaar .vakje { background: var(--accent); }
.td-actie.klaar .td-titel { text-decoration: line-through; color: var(--zacht); }
.td-titel { font-size: 15px; font-weight: 600; }
.td-vraag { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.td-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--zacht); letter-spacing: .04em; }
.td-tekst { font-size: 15px; line-height: 1.4; }
.td-opties { display: flex; flex-wrap: wrap; gap: 8px; }
.td-optie { min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--lijn); background: var(--vlak); font-size: 14px; font-weight: 600; cursor: pointer; }
.td-optie.eerst { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
.td-vrij { display: flex; gap: 8px; width: 100%; }
.td-vrij input { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--lijn); border-radius: 12px; padding: 0 12px; background: var(--vlak); }
.td-antwoord { font-size: 13px; font-weight: 600; }
.termijn { align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.termijn:last-child { border-bottom: 0; }
.termijn-dag { flex: 0 0 92px; display: flex; flex-direction: column; }
.termijn.dringend .termijn-dag b { color: var(--goud-ink); }
.brief { margin: 6px 0 0; padding-left: 18px; }
.brief li + li { margin-top: 4px; }
.geld-cijfers { display: flex; justify-content: space-around; text-align: center; }
.geld-cijfers b { display: block; font-size: 24px; }
/* rechtenrooster met schakelaars */
.rooster-box { margin-top: 10px; overflow-x: auto; }
.rooster { display: grid; align-items: center; gap: 2px 2px; min-width: 100%; }
.kaart#modules { padding-left: 12px; padding-right: 12px; }
.r-kop { font-size: 10px; font-weight: 600; color: var(--zacht); text-transform: uppercase; letter-spacing: .03em; text-align: center; padding-bottom: 6px; border-bottom: 1px solid var(--lijn); overflow: hidden; text-overflow: ellipsis; }
.r-kop:first-child { text-align: left; }
.r-naam { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 0; }
.r-cel { display: flex; justify-content: center; }
.schakel { width: 40px; height: 26px; border-radius: 13px; border: 0; padding: 2px; cursor: pointer; background: var(--p-uit, #cfc9bb); display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; }
.schakel span { width: 22px; height: 22px; border-radius: 11px; background: var(--vlak); display: block; }
.schakel.aan { background: var(--accent); justify-content: flex-end; }
.schakel.vast { background: var(--zacht); opacity: .55; cursor: default; }
.schakel.anders { box-shadow: 0 0 0 2px var(--goud-ink); }
.schakel:disabled { opacity: .35; cursor: not-allowed; }
body.portaal #nav a, body.portaal #nav button { background: var(--tekst); color: var(--vlak); }
body.portaal #nav a.bel { background: var(--p-chip); color: var(--tekst); border: 0; }
body.portaal #kop .kompas { display: none; }
.td-antwoord { display: block; }
.td-antwoord svg { vertical-align: -3px; margin-right: 4px; }
.rooster .schakel { width: 34px; height: 22px; border-radius: 11px; }
.rooster .schakel span { width: 18px; height: 18px; border-radius: 9px; }
.r-kop { font-size: 9px; letter-spacing: 0; }
.rooster > * { min-width: 0; }
/* kraamweek-logboek en Vraagbaak (B-073) */
.baby-tabs { margin: 8px 0 12px; }
.log-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.log-kop h1 { margin: 0; }
.log-nav { display: flex; gap: 6px; }
.log-nav .knop { min-width: 44px; min-height: 44px; padding: 0 12px; }
.log-laatst { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.log-groot { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.log-snel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.log-snel button { min-height: 60px; font-weight: 700; border-radius: 14px; border: 1px solid var(--lijn); background: var(--vlak); cursor: pointer; }
.log-snel button.hoofd { grid-column: 1 / -1; min-height: 68px; font-size: 18px; background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }
.log-tel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.log-tel .kaart { display: grid; gap: 2px; padding: 10px; margin: 0; }
.log-tel b { font-size: 24px; font-variant-numeric: tabular-nums; }
.log-tel .t-label { justify-self: start; }
.log-rooster { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.log-rooster table { border-collapse: collapse; table-layout: fixed; width: max-content; font-size: 12px; font-variant-numeric: tabular-nums; } /* v101: alle uurkolommen even breed */
.log-rooster th, .log-rooster td { border: 1px solid var(--lijn); padding: 3px 2px; text-align: center; width: 40px; min-width: 40px; max-width: 40px; height: 32px; box-sizing: border-box; overflow: hidden; }
.log-rooster th:first-child, .log-rooster td:first-child { text-align: left; width: 100px; min-width: 100px; max-width: 100px; padding: 3px 8px; position: sticky; left: 0; background: var(--vlak); box-shadow: 1px 0 0 var(--lijn); z-index: 1; }
.log-rooster th:last-child, .log-rooster td:last-child { width: 44px; min-width: 44px; max-width: 44px; font-weight: 600; }
.log-rooster td.nu { background: var(--p-chip, #f0f1f3); }
#log-dlg { border: 0; border-radius: 18px; background: var(--vlak); color: var(--tekst); width: min(92vw, 460px); padding: 18px; }
#log-dlg::backdrop { background: rgba(0,0,0,.45); }
.log-form { display: grid; gap: 12px; }
.log-form label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.log-form input, .log-form select, .vraag-form textarea { width: 100%; min-height: 44px; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 10px; background: var(--bg); }
.kaart.alarm { border-left: 5px solid var(--goud-ink); }
.kaart.alarm b { color: var(--goud-ink); }
.vraag-form { display: grid; gap: 10px; }
.vraag-form .vink { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.vraag-form .vink input { width: auto; min-height: 0; }
.antwoord { white-space: pre-wrap; line-height: 1.5; }
.bronnen { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.log-snel button { font-size: 15px; padding: 0 4px; }
.log-snel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chip.groot { min-height: 44px; padding: 0 18px; font-size: 15px; }
.log-tel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .log-tel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* v72 · invoer nooit kleiner dan 16 px: anders zoomt iOS in bij het aantikken en schaalt niet terug (Dimitri 14-10-2026) */
input, select, textarea { font-size: 16px !important; }

/* v72 · één knoppenstelsel in het portaal (Dimitri 14-10-2026: "consistentie van de knoppen"):
   actie = rechthoek met ronde hoeken (14 px), 48 px hoog, 16 px, vet; primair antraciet, secundair wit met rand.
   keuze = kopje (pil), 44 px hoog; gekozen = antraciet met witte tekst. */
body.portaal .knop, body.portaal .log-snel button, body.portaal .td-optie, body.portaal .log-nav .knop { border-radius: 14px; min-height: 48px; font-size: 16px; font-weight: 600; padding: 0 16px; box-shadow: none; }
body.portaal .knop.klein { min-height: 40px; font-size: 15px; padding: 0 14px; border-radius: 12px; }
body.portaal .knop.licht, body.portaal .log-snel button, body.portaal .td-optie { background: var(--vlak); color: var(--tekst); border: 1px solid var(--lijn); }
body.portaal .knop:not(.licht), body.portaal .log-snel button.hoofd { background: var(--accent); color: var(--accent-tekst); border: 1px solid var(--accent); }
body.portaal .log-snel button.hoofd { min-height: 60px; font-size: 18px; }
body.portaal .td-optie.eerst { background: var(--vlak); color: var(--tekst); border-color: var(--lijn); }
body.portaal .chip { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; display: inline-flex; align-items: center; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); }
body.portaal .chip.aan { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); font-weight: 600; }
body.portaal .log-form .rij .knop { flex: 1; }

/* v73 · Linnen met serif en een accent per tegel (B-075, Dimitri 14-10-2026; bord "Start · Linnen met accenten" op het canvas Gezinsportaal).
   Overschrijft de antraciet-tokens van het portaal; de reismodule zelf blijft "Bergkompas". */
body.portaal {
  --bg: #faf6f0; --vlak: #ffffff; --tekst: #2f2a26; --zacht: #6f655d; --lijn: #ece3d8; --accent: #8f5a44; --accent-tekst: #ffffff; --accent-zacht: #f3ebe1;
  --p-chip: #f3ebe1; --p-uit: #ddd2c6; --p-rood: #b4533a; --p-groen: #4f6e4c; --p-groen-zacht: #e6ede4; --goud-zacht: #f5e2cc; --goud-ink: #86501f;
  --schaduw: 0 1px 2px rgba(60,40,30,.04), 0 6px 18px rgba(60,40,30,.06); --serif: "Young Serif", Georgia, serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.portaal {
  --bg: #1d1916; --vlak: #27211d; --tekst: #f1e9df; --zacht: #b5a89c; --lijn: #3a322c; --accent: #d39a7d; --accent-tekst: #1d1916; --accent-zacht: #3a2f28;
  --p-chip: #352d27; --p-uit: #4a4038; --p-rood: #e07a5f; --p-groen: #9cc196; --p-groen-zacht: #263526; --goud-zacht: #3d2f20; --goud-ink: #f0be86; --schaduw: none; } }
:root[data-theme="dark"] body.portaal {
  --bg: #1d1916; --vlak: #27211d; --tekst: #f1e9df; --zacht: #b5a89c; --lijn: #3a322c; --accent: #d39a7d; --accent-tekst: #1d1916; --accent-zacht: #3a2f28;
  --p-chip: #352d27; --p-uit: #4a4038; --p-rood: #e07a5f; --p-groen: #9cc196; --p-groen-zacht: #263526; --goud-zacht: #3d2f20; --goud-ink: #f0be86; --schaduw: none; }
body.portaal h1, body.portaal h2, body.portaal .t-naam, body.portaal .start-merk, body.portaal .start-groet-groot { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
body.portaal h3 { font-weight: 700; }
body.portaal .start-kop { background: var(--bg); border-bottom: 0; }
body.portaal .start-kop .avatar, body.portaal #nav a:not(.bel) { background: var(--accent); color: var(--accent-tekst); }
body.portaal .kaart, body.portaal .start-tegel { box-shadow: var(--schaduw); }
/* accent per module: streep bovenaan, icoon op een getint vlak, label in de accentkleur; in de module zelf de titel */
[data-mod="weer"] { --acc: #3f86b0; --acc-t: #e3eff6; }
[data-mod="agenda"] { --acc: #76619a; --acc-t: #ede8f4; }
[data-mod="todo"] { --acc: #ad7a2a; --acc-t: #f6edda; }
[data-mod="baby"] { --acc: #b26c68; --acc-t: #f6e6e3; }
[data-mod="gezin"] { --acc: #a8644a; --acc-t: #f5e5dc; }
[data-mod="geld"] { --acc: #6b784a; --acc-t: #eaeddf; }
[data-mod="reizen"] { --acc: #4f6e4c; --acc-t: #e6ede4; }
[data-mod="leden"] { --acc: #776b61; --acc-t: #efebe6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-mod] { --acc-t: color-mix(in srgb, var(--acc) 22%, #27211d); } }
:root[data-theme="dark"] [data-mod] { --acc-t: color-mix(in srgb, var(--acc) 22%, #27211d); }
.start-tegel[data-mod] { border-top: 4px solid var(--acc); }
.start-tegel.beheer { border-style: solid; border-color: var(--lijn); border-top: 4px solid var(--acc); }
.start-tegel .t-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--acc-t, var(--p-chip)); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.start-tegel .t-ico svg, .start-tegel.reizen svg, .start-tegel.beheer svg { color: var(--acc); }
.start-tegel[data-mod] .t-label:not(.rood):not(.let) { background: var(--acc-t); color: var(--acc); }
.start-tegel .t-naam { display: block; font-size: 21px; margin-top: 2px; }
.start-tegel .t-sub { display: block; margin-top: 3px; }
.start-tegel.lijstje .t-rij b { color: var(--acc); }
body.portaal[data-mod] main h1 { color: var(--acc); }
body.portaal[data-mod] .baby-tabs a.actief { background: var(--acc); color: #fff; }
/* weer */
.weer-temp { font-family: var(--serif); font-size: 34px; color: var(--tekst); }
.weer-ico svg { overflow: visible; }
.weer-bron { font-size: 11px; color: var(--zacht); }
@media (prefers-reduced-motion: no-preference) {
  .w-zon { transform-origin: 16px 16px; animation: w-draai 40s linear infinite; }
  .w-zonnetje { animation: w-puls 4s ease-in-out infinite; transform-origin: 12px 12px; }
  .w-drijf { animation: w-drijf 6s ease-in-out infinite; }
  .w-val { animation: w-val 1.4s linear infinite; }
  .w-flits { animation: w-flits 3s steps(1) infinite; }
  .w-ster { animation: w-puls 3s ease-in-out infinite; transform-origin: 23px 9px; }
}
@keyframes w-draai { to { transform: rotate(360deg); } }
@keyframes w-puls { 50% { transform: scale(1.12); } }
@keyframes w-drijf { 50% { transform: translateX(1.5px); } }
@keyframes w-val { from { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(3px); opacity: 0; } }
@keyframes w-flits { 0%, 92% { opacity: 1; } 94% { opacity: 0; } 96% { opacity: 1; } }
/* laden: lege kaarten op de plek van de vorige keer */
.start-tegel.skelet { pointer-events: none; }
.sk-regel { display: block; height: 14px; width: 70%; border-radius: 7px; background: var(--p-chip); }
.sk-regel.kort { width: 45%; }
@media (prefers-reduced-motion: no-preference) { .start-tegel.skelet .sk-regel, .start-tegel.skelet .t-ico { animation: sk 1.4s ease-in-out infinite; } }
@keyframes sk { 50% { opacity: .55; } }
body.portaal .kaart.installeer { border-left: 1px solid var(--lijn); }
.weer-rij { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.weer-temp { font-size: 30px; line-height: 1.1; }
.weer-oms { font-size: 13px; color: var(--zacht); }
.weer-bron { display: block; margin-top: 2px; }
/* v74 · geen gekleurde streep bovenaan de tegels (Dimitri 14-10-2026: "Het lijntje aan de bovenkant van de tegels vind ik niet zo mooi"); het accent zit in het icoonvlak en het label */
.start-tegel[data-mod], .start-tegel.beheer { border-top: 1px solid var(--lijn); }
/* v75 · bronvermelding weer als klein ⓘ (Dimitri 14-10-2026); de tegel zelf linkt via een dekkende link naar Weeronline */
#weer-tegel { position: relative; }
.tegel-dek { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.weer-info { position: absolute; right: 8px; bottom: 6px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--zacht); font-size: 15px; text-decoration: none; opacity: .8; }
/* B-076: lopende voeding en aanpasbare voedingen */
.log-loopt { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.log-loopt .log-groot { font-size: 34px; }
/* B-089 (v78): 'of achteraf invoeren' als rustige tekstlink direct onder de grote knop, binnen het raster */
.log-achteraf { grid-column: 1 / -1; display: flex; justify-content: center; margin: -4px 0 2px; }
.log-snel .log-achteraf button, body.portaal .log-snel .log-achteraf button { min-height: 32px; padding: 4px 10px; border: 0; background: none; box-shadow: none; color: var(--accent); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border-radius: 8px; }
.baby-rij.pasbaar { cursor: pointer; }
.baby-rij.pasbaar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
/* v78 (B-084): besluit bij een vraag, verwerken, en het voorstel van Claude naast het plan */
.besluit { background: var(--vlak); border-radius: 10px; padding: 8px 10px; font-size: 15px; overflow-wrap: anywhere; }
.vraagkaart.besloten { border-left-color: var(--lijn); }
.na-besluit summary { cursor: pointer; padding: 4px 0; }
.na-besluit[open] { display: flex; flex-direction: column; gap: 10px; }
.verwerk-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.verwerk-form { display: grid; gap: 8px; }
.verwerk-form textarea { min-height: 64px; }
.bouw-item { border-top: 1px solid var(--lijn); padding-top: 8px; margin-top: 8px; display: grid; gap: 6px; }
.cw-diff summary { cursor: pointer; }
.diff { margin-top: 6px; font-size: 14px; line-height: 1.4; display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; overflow-x: hidden; }
.df { padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; color: var(--zacht); }
.df-plus { background: rgba(46, 125, 50, .14); color: var(--tekst); }
.df-min { background: rgba(198, 40, 40, .12); color: var(--tekst); text-decoration: line-through; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* B-087 (v78): meerdere notities in één uur als losse blokjes onder elkaar */
.log-rooster td { vertical-align: middle; }
.log-rooster .cel-item { display: block; white-space: nowrap; line-height: 1.3; padding: 1px 0; border-radius: 4px; background: var(--goud-zacht); margin-top: 2px; font-size: 11px; text-align: center; overflow: hidden; text-overflow: clip; }
.log-rooster .cel-item:first-child { margin-top: 0; }
.log-rooster .cel-aantal { display: block; font-size: 10px; font-weight: 700; color: var(--goud-ink); line-height: 1.1; }
.vraag-uitleg summary { cursor: pointer; font-size: 14px; }
.vraag-uitleg ul { margin: 6px 0 0 18px; padding: 0; font-size: 14.5px; }
.vraag-uitleg .links { margin-top: 6px; }
/* B-094 · pauze in de lopende voeding */
.log-loopt { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.log-loopt.pauze { background: var(--acc-t, var(--p-chip)); }
.log-loopt.pauze #log-klok { opacity: .55; }
.log-pauzeknop { flex: 0 0 auto; }
/* afspraak openen (B-096, v84) */
.agenda-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.agenda-kop .klein { flex: 1 1 180px; }
.afspraak-knop { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--lijn); color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; min-height: 44px; }
.afspraak-knop:last-child { border-bottom: 0; }
.afspraak-knop.rij { flex-wrap: nowrap; }
.afspraak-knop > .afspraak-titel { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.afspraak-knop > .afspraak-pijl { flex: 0 0 auto; color: var(--zacht); font-size: 20px; line-height: 1; align-self: center; }
.afspraak-rij { cursor: pointer; }
#afspraak-dlg { border: 0; border-radius: 18px; background: var(--vlak); color: var(--tekst); width: min(92vw, 460px); padding: 18px; }
#afspraak-dlg::backdrop { background: rgba(0,0,0,.45); }
.afspraak-venster { display: grid; gap: 12px; }
.afspraak-venster h2 { margin: 0; overflow-wrap: anywhere; }
.afspraak-regel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.afspraak-regel.plaats span { flex: 1 1 160px; overflow-wrap: anywhere; }
.afspraak-notitie { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--zacht); }
.school-label { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 0 7px; border-radius: 999px; background: var(--p-chip, #eef0f3); color: var(--goud-ink, var(--tekst)); vertical-align: 1px; }
.bj-school { padding: 6px 0; }
/* v86 (B-101, B-103): eigen agenda en reizen in de agenda */
.eigen-label { background: var(--p-chip, #eef0f3); color: var(--tekst); max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: -3px; }
.reis-label { background: var(--accent); color: var(--accent-tekst); }
.ma-rij { padding: 8px 0; border-bottom: 1px solid var(--lijn); overflow-wrap: anywhere; }
.ma-vink { display: flex; gap: 8px; align-items: center; color: var(--tekst); }
#mr-link { width: 100%; font-size: 13px; }

/* B-107 (v89): afspraak maken/wijzigen in de app */
.afspraak-form label { display: grid; gap: 4px; font-size: 14px; color: var(--zacht, inherit); }
.afspraak-form label.vink { display: flex; border-bottom: 0; padding: 0; }
.afspraak-form input[type=time] { min-height: 48px; -webkit-appearance: none; appearance: none; }
.afspraak-form [hidden] { display: none !important; }
/* B-109 (v90): eigen to do's */
.td-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.td-kop-rij .knop { text-transform: none; letter-spacing: 0; }
.td-open { all: unset; cursor: pointer; flex: 1; min-width: 0; display: grid; gap: 2px; }
.td-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.td-actie.dringend .td-titel { color: var(--rood, #b3412f); }
.td-klaar { margin-top: 10px; } .td-klaar summary { cursor: pointer; margin: 0 4px 8px; }
.td-notitie { white-space: pre-wrap; }
.td-lijst { display: grid; gap: 2px; } .td-lijst .vink { border-bottom: 1px solid var(--lijn); } .td-af { text-decoration: line-through; color: var(--zacht); }
.td-bijlagen { display: grid; gap: 6px; } .td-bijlage { justify-content: space-between; gap: 8px; } .td-bijlage a { overflow-wrap: anywhere; }
.td-upload { cursor: pointer; justify-self: start; }
.td-bijlage .knop { flex: 0 0 auto; width: 44px; min-width: 44px; padding: 0; }
.todo-label { background: var(--accent-zacht); color: var(--tekst); }

/* B-109 v92: to do-formulier als blad over het hele scherm (Dimitri: "Hij past niet lekker"); notitie en afvinklijst in één blok */
#todo-dlg { border: 0; border-radius: 18px; background: var(--vlak); color: var(--tekst); width: min(92vw, 480px); padding: 18px; max-height: 88dvh; overflow: auto; }
#todo-dlg::backdrop { background: rgba(0,0,0,.45); }
#todo-dlg.blad { padding: 0; width: 100%; max-width: 560px; height: 100dvh; max-height: 100dvh; margin: 0 auto; border-radius: 0; overflow: hidden; }
@media (min-width: 600px) { #todo-dlg.blad { height: auto; max-height: 90dvh; margin: auto; border-radius: 18px; } }
.blad-form { display: flex; flex-direction: column; height: 100%; max-height: inherit; }
.blad-kop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid var(--lijn); background: var(--vlak); }
@media (min-width: 600px) { .blad-kop { padding-top: 12px; } }
.blad-kop h2 { margin: 0; font-size: 17px; text-align: center; white-space: nowrap; }
.blad-knop { background: none; border: 0; color: var(--accent); font: inherit; font-size: 16px; padding: 8px 4px; cursor: pointer; justify-self: start; min-height: 44px; }
.blad-knop.sterk { font-weight: 700; justify-self: end; }
.blad-knop:disabled { opacity: .5; }
.blad-inhoud { flex: 1; overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 14px; align-content: start; -webkit-overflow-scrolling: touch; }
.tdf-titel { font-size: 20px !important; font-weight: 600; border: 0 !important; background: transparent !important; padding: 6px 2px !important; }
.tdf-titel:focus { outline: none; box-shadow: inset 0 -2px 0 var(--accent); }
.tdf-blok { background: var(--bg); border: 1px solid var(--lijn); border-radius: 14px; padding: 10px 12px; display: grid; gap: 4px; }
.tdf-blok textarea { border: 0 !important; background: transparent !important; padding: 4px 0 !important; resize: none; min-height: 44px; field-sizing: content; }
.tdf-blok textarea:focus { outline: none; }
.tdf-regel { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--lijn); }
.tdf-regel input { flex: 1; border: 0 !important; background: transparent !important; padding: 10px 0 !important; min-width: 0; }
.tdf-regel input:focus { outline: none; }
.tdf-bol { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--zacht); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.tdf-bol.af { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
.tdf-x { background: none; border: 0; color: var(--zacht); font-size: 22px; line-height: 1; width: 36px; height: 36px; cursor: pointer; flex: 0 0 auto; }
.tdf-plus { background: none; border: 0; border-top: 1px solid var(--lijn); color: var(--accent); font: inherit; font-weight: 600; text-align: left; padding: 10px 0 4px; cursor: pointer; }
.tdf-groep { background: var(--bg); border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; }
.tdf-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; min-height: 52px; color: var(--tekst); font-size: 16px; }
.tdf-rij + .tdf-rij { border-top: 1px solid var(--lijn); }
.tdf-rij[hidden] { display: none; }
.tdf-rij input[type=date], .tdf-rij select { width: auto; max-width: 60%; min-height: 40px; padding: 6px 10px; border-radius: 10px; font-size: 16px; text-align: right; }
.tdf-wie { display: block; padding: 0 14px; }
.tdf-wie summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; }
.tdf-wie summary::-webkit-details-marker { display: none; }
.tdf-wie summary .klein { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.tdf-wie .chips { padding: 4px 0 14px; }
.tdf-uitleg { margin: 0 4px; }
.td-regel { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--lijn); font-size: 16px; color: var(--tekst); }
.td-regel:first-child { border-top: 0; } .td-notitie + .td-lijst .td-regel:first-child { border-top: 1px solid var(--lijn); }
.td-regel input { width: 20px; height: 20px; accent-color: var(--accent); }
.td-notitie { margin: 4px 0; white-space: pre-wrap; }
.tdf-rij, .tdf-rij > span, .tdf-wie summary > span:first-child { font-weight: 500; font-size: 16px; color: var(--tekst); }
.tdf-rij select { padding-right: 32px; text-align: left; }
.td-regel, .td-regel span { font-weight: 400; }

/* profielpagina (B-117): kop + lijsten met rijen, elk naar een eigen scherm */
.ik-kop { display: flex; align-items: center; gap: 16px; margin: 14px 0 20px; }
.ik-kop h1 { margin: 0; }
.ik-avatar { width: 64px; height: 64px; border-radius: 999px; background: var(--accent); color: var(--accent-tekst); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 28px; flex: 0 0 auto; }
.ik-lijst { background: var(--vlak); border-radius: 16px; overflow: hidden; margin-bottom: 16px; box-shadow: var(--schaduw); }
.ik-rij { display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 56px; text-decoration: none; color: var(--tekst); border-top: 1px solid var(--lijn); }
.ik-rij:first-child { border-top: 0; }
a.ik-rij:active { background: var(--accent-zacht); }
.ik-ico { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
.ik-tekst { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ik-tekst b { font-weight: 600; }
.ik-tekst .klein:empty { display: none; }
.ik-pijl { color: var(--zacht); font-size: 22px; line-height: 1; }
.ik-uit { color: var(--fout); }

/* B-118: personen in Ons huishouden */
.hh-persoon { border-bottom: 1px solid var(--lijn); }
.hh-persoon:last-child { border-bottom: 0; }
.hh-persoon .hh-rij { border-bottom: 0; align-items: center; }
.hh-aandacht { display: block; font-size: 13px; color: var(--goud-ink); margin-top: 2px; }
.hh-wijzig { display: grid; gap: 8px; padding: 4px 0 12px; }
.hh-wijzig label { display: grid; gap: 4px; }

/* v106: compacte meetlijst en vitamine, rest ingeklapt */
.baby-rij.kort { display: grid; grid-template-columns: 1fr auto 52px 32px; gap: 10px; padding: 7px 0; align-items: center; font-variant-numeric: tabular-nums; }
.baby-rij.kort .br-dag { color: var(--zacht); font-size: 14px; }
.baby-rij.kort .br-vs { text-align: right; }
.baby-rij.kort .kleine-knop { justify-self: end; }
.baby-meer > summary { cursor: pointer; padding: 10px 0 6px; color: var(--accent); font-weight: 600; font-size: 14px; }
.baby-meer[open] > summary { border-bottom: 1px solid var(--lijn); }

/* B-128: plekken uit het plan op de kaart */
.speld.dag { width: 14px; height: 14px; border-radius: 999px; background: var(--goud); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* B-131: strook op de acceptatieomgeving */
#acc-strook { position: relative; z-index: 50; background: #b8893a; color: #1d2a22; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 12px calc(6px); padding-top: calc(6px + env(safe-area-inset-top)); }
#acc-strook a { color: #1d2a22; }

/* B-130/R209: afwijkende temperatuur vast in beeld */
.temp-let-op { background: var(--goud-zacht); border: 1px solid var(--goud); color: var(--tekst); display: grid; gap: 4px; margin: 0 0 12px; }

/* Dimitri 15-10-2026: daglocatie met vast labeltje, zodat je weet waar de pin bij hoort */
.speld-dag-wrap { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.speld-label { font: 600 11px/1.2 var(--sans); color: #1d2a22; background: rgba(255,255,255,.92); padding: 2px 6px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.25); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.td-nieuw input { border: 0 !important; border-top: 1px solid var(--lijn) !important; border-radius: 0 !important; background: transparent !important; padding: 10px 0 !important; min-height: 44px; }
.td-nieuw input:focus { outline: none; }
.familie-label { background: var(--accent-zacht); color: var(--tekst); }
.hh-jarig { border-bottom: 0; padding: 2px 0 6px; font-size: 14px; }
#af-doel { margin: -4px 0 0; }
.td-regel-rij { display: flex; align-items: center; border-top: 1px solid var(--lijn); }
.td-regel-rij:first-child { border-top: 0; } .td-regel-rij .td-regel { flex: 1; border-top: 0 !important; }
.td-regel-weg { background: none; border: 0; color: var(--zacht); font-size: 22px; width: 40px; height: 40px; cursor: pointer; flex: 0 0 auto; }
.bp-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.bp-rij:first-child { border-top: 0; } .bp-rij > div { min-width: 0; overflow-wrap: anywhere; }
.bp-wie { width: auto !important; max-width: 46%; min-height: 40px; padding: 6px 10px !important; font-size: 15px !important; }
.td-herinner { flex-shrink: 0; padding: 2px 8px; min-height: 0; line-height: 1.3; font-size: 14px; letter-spacing: 0; } /* B-152 */
.td-meta .td-herinner { margin-left: 8px; }
/* B-153/B-154: Thuis — lijsten en weekmenu */
.th-tabs { display: flex; gap: 6px; margin: 14px 0 12px; background: var(--lijn); padding: 4px; border-radius: 14px; }
.th-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-radius: 10px; color: var(--zacht); text-decoration: none; font-weight: 500; }
.th-tab.aan { background: var(--vlak); color: var(--tekst); box-shadow: var(--schaduw, none); }
.th-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.th-chips::-webkit-scrollbar { display: none; }
.th-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); font: inherit; font-size: 14px; cursor: pointer; }
.th-chip.aan { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }
.th-chip.plus { padding: 8px 14px; font-size: 18px; line-height: 1; }
.th-n { background: var(--goud-zacht); color: var(--goud-ink); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.th-chip.aan .th-n { background: rgba(255,255,255,.25); color: inherit; }
.th-toevoegen { display: flex; gap: 8px; margin: 12px 0; }
.th-toevoegen input { flex: 1; min-width: 0; }
.th-lijst { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; }
.th-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.th-item + .th-item { border-top: 1px solid var(--lijn); }
.th-item.af .th-tekst { text-decoration: line-through; color: var(--zacht); }
.th-item.af .vakje { background: var(--accent); }
.th-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.th-bron { display: block; font-size: 12px; color: var(--zacht); }
.th-weg { background: none; border: 0; color: var(--zacht); font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.th-leeg { padding: 14px; }
.th-kop-af { margin: 16px 4px 6px; }
.th-beheer { gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.th-week { justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 500; }
.th-menu { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; }
.th-dag { display: flex; width: 100%; align-items: baseline; gap: 12px; padding: 13px 14px; background: none; border: 0; font: inherit; color: var(--tekst); text-align: left; cursor: pointer; }
.th-dag + .th-dag { border-top: 1px solid var(--lijn); }
.th-dag.vandaag { background: var(--accent-zacht); }
.th-dagnaam { width: 84px; flex-shrink: 0; color: var(--zacht); font-size: 14px; }
.th-dag.vandaag .th-dagnaam { color: var(--accent); font-weight: 500; }
.th-gerecht { font-family: var(--serif); font-size: 18px; }
.th-kies { color: var(--zacht); }
.th-gerechten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.th-ger { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); font: inherit; text-align: left; cursor: pointer; }
.th-ger.aan { border-color: var(--accent); background: var(--accent-zacht); }
#th-dlg.blad { padding: 0; width: 100%; max-width: 560px; height: 100dvh; max-height: 100dvh; margin: 0 auto; border-radius: 0; overflow: hidden; }
@media (min-width: 600px) { #th-dlg.blad { height: auto; max-height: 90dvh; margin: auto; border-radius: 18px; } }
#th-dlg textarea { width: 100%; box-sizing: border-box; }
#th-dlg { border: 0; background: var(--vlak); color: var(--tekst); }
#th-dlg::backdrop { background: rgba(0,0,0,.45); }
/* B-155: kindmodus en routines */
body.kindmodus #kop, body.kindmodus #acc-strook, body.kindmodus #stand-strook { display: none; }
body.kindmodus main#scherm { max-width: none; padding: 0; }
.kind { min-height: 100dvh; box-sizing: border-box; padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; background: var(--bg); }
.kind-avond { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.kind-kop { display: flex; justify-content: space-between; align-items: center; }
.kind-blokken { display: flex; gap: 10px; }
.kind-blok { width: 64px; height: 64px; border-radius: 20px; border: 2px solid var(--lijn); background: var(--vlak); color: var(--zacht); display: grid; place-items: center; cursor: pointer; }
.kind-blok.aan { border-color: var(--goud); color: var(--goud-ink); background: var(--goud-zacht); }
.kind-sterren { display: flex; align-items: center; gap: 6px; font-size: 30px; font-weight: 600; color: var(--goud-ink); background: var(--goud-zacht); padding: 8px 16px; border-radius: 999px; }
.kind-sterren svg { color: var(--goud); fill: var(--goud); }
.kind-taken { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; flex: 1; align-content: start; }
.kind-taak { position: relative; aspect-ratio: 1; border-radius: 28px; border: 3px dashed var(--lijn); background: var(--vlak); color: var(--accent); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease; -webkit-tap-highlight-color: transparent; }
.kind-taak svg { width: 46%; height: 46%; }
.kind-taak:active { transform: scale(.95); }
.kind-taak.af { border-style: solid; border-color: var(--goud); background: var(--goud-zacht); color: var(--goud-ink); }
.kind-vink { position: absolute; top: 10px; right: 10px; color: var(--goud); }
.kind-vink svg { width: 26px; height: 26px; fill: var(--goud); }
.kind-taak.wip { animation: kind-wip .7s ease; }
@keyframes kind-wip { 0% { transform: scale(1); } 30% { transform: scale(1.12) rotate(-4deg); } 60% { transform: scale(.96) rotate(3deg); } 100% { transform: scale(1); } }
.kind-voortgang { display: flex; gap: 8px; justify-content: center; }
.kind-voortgang span { width: 18px; height: 18px; border-radius: 50%; background: var(--lijn); transition: background .3s; }
.kind-voortgang span.af { background: var(--goud); }
.kind-doel { display: flex; align-items: center; gap: 12px; color: var(--accent); }
.kind-balk { flex: 1; height: 16px; border-radius: 999px; background: var(--lijn); overflow: hidden; }
.kind-balk i { display: block; height: 100%; background: var(--goud); border-radius: 999px; transition: width .5s ease; }
.kind-slot { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom)); right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--lijn); cursor: pointer; }
.kind-feest { position: absolute; inset: 0; pointer-events: none; }
.kind-feest i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: kind-val 3s ease-in forwards; }
@keyframes kind-val { to { top: 110%; transform: rotate(720deg); } }
.kind-dino { position: absolute; left: 50%; bottom: 18%; margin-left: -90px; animation: kind-dans .5s ease-in-out 6 alternate; }
@keyframes kind-dans { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-30px) rotate(6deg); } }
.kind.klaar .kind-taken { animation: kind-wip .7s ease 2; }
@media (prefers-reduced-motion: reduce) { .kind-taak.wip, .kind-dino, .kind-feest i, .kind.klaar .kind-taken { animation: none; } }
#kind-dlg { border: 0; border-radius: 18px; background: var(--vlak); color: var(--tekst); width: min(92vw, 360px); }
#kind-dlg::backdrop { background: rgba(0,0,0,.45); }
.kind-pin input { font-size: 28px; letter-spacing: .4em; text-align: center; width: 100%; box-sizing: border-box; margin: 12px 0; }
.th-kind + .th-kind { margin-top: 12px; }
.th-sterren { color: var(--goud-ink); background: var(--goud-zacht); padding: 4px 10px; border-radius: 999px; display: inline-flex; gap: 4px; align-items: center; }
.th-blok { margin-top: 10px; }
.th-taakrij { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.th-taakje { width: 36px; height: 36px; border-radius: 10px; border: 1px dashed var(--lijn); display: grid; place-items: center; color: var(--zacht); }
.th-taakje.af { border-style: solid; border-color: var(--goud); background: var(--goud-zacht); color: var(--goud-ink); }
.th-bel { align-items: center; gap: 8px; margin-top: 6px; }
.th-iconen { display: flex; flex-wrap: wrap; gap: 6px; }
.th-icoon { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.th-icoon.aan { border: 2px solid var(--accent); background: var(--accent-zacht); }
.kind-doel { padding-right: 48px; }
#verhuis-strook { position: relative; z-index: 50; background: var(--accent); color: var(--accent-tekst); text-align: center; font-size: 14px; font-weight: 600; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); } /* B-158 */
#verhuis-strook a { color: inherit; text-decoration: underline; }
body.kindmodus #verhuis-strook { display: none; }