/* Vestra Bewoners-app
   Eigen stijlblad, los van style.css van de website: die is gebouwd rond een
   brede navigatiebalk en een lange voettekst, en die heeft een app niet nodig.
   De kleuren, letters en verhoudingen komen wel uit dezelfde huisstijl. */

:root{
  --navy-deep:#101C33;
  --navy-mid:#1C3157;
  --gold:#B7975B;
  --gold-soft:rgba(183,151,91,0.35);
  --paper:#F6F6F3;
  --paper-alt:#EFEEE9;
  --ink:#171712;
  --ink-soft:#55564F;
  --line:#DBDAD3;
  --rood:#9B2C2C;
  --groen:#2F6B4F;
  --kop-hoogte:56px;
  --tab-hoogte:60px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}

/* De app zet dingen aan en uit met het hidden-attribuut. Zonder deze regel
   verliest hidden van elke .klasse die zelf een display opgeeft (flex, grid),
   en staat bijvoorbeeld het berichtvenster meteen open. */
[hidden]{display:none !important;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Ruimte voor de vaste balken boven en onder, plus de veilige zone op iPhone.
     De veilige zone hoort hier net zo goed bij als in .app-kop zelf: staat de
     app op het beginscherm, dan wordt de kop hoger door de notch, en zonder
     dezelfde optelling hier verdwijnt de bovenste strook inhoud erachter.
     In de browser is de inset 0 en valt dat verschil niet op. */
  padding-top:calc(var(--kop-hoogte) + env(safe-area-inset-top, 0px));
  padding-bottom:calc(var(--tab-hoogte) + env(safe-area-inset-bottom, 0px));
  /* Anker-sprongen (#melden en verder) moeten ook onder de kop uitkomen. */
  scroll-padding-top:calc(var(--kop-hoogte) + env(safe-area-inset-top, 0px) + 8px);
  overscroll-behavior-y:none;
}

h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:600; color:var(--navy-deep); letter-spacing:-0.01em; line-height:1.25;}
h1{font-size:1.5rem; margin-bottom:8px;}
h2{font-size:1.08rem; margin-bottom:6px;}
a{color:var(--navy-mid);}
p{margin-bottom:10px;}
p:last-child{margin-bottom:0;}

/* ---------- Kop ---------- */
.app-kop{
  position:fixed; top:0; left:0; right:0; z-index:40;
  height:calc(var(--kop-hoogte) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-left:16px; padding-right:10px;
  background:var(--navy-deep); color:#fff;
}
.merk{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;}
.merk img{display:block; filter:brightness(0) invert(1); opacity:.92;}
.merk-tekst{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.14em; line-height:1.1;
  display:flex; flex-direction:column;
}
.merk-tekst em{font-style:normal; color:var(--gold); letter-spacing:.1em; font-size:.68rem;}
.kop-rechts{display:flex; align-items:center; gap:8px;}
.kop-bel{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  color:#fff; background:rgba(255,255,255,.1);
}
.kop-bel svg{width:19px; height:19px;}
.pil{
  font-family:'IBM Plex Mono', monospace; font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.pil-offline{background:var(--gold); color:var(--navy-deep);}
.pil-wachtrij{background:rgba(255,255,255,.14); color:#fff;}

/* ---------- Beelden ---------- */
.binnen{max-width:620px; margin:0 auto; padding:20px 16px 28px;}
.lead{color:var(--ink-soft); font-size:.95rem; margin-bottom:18px;}
.klein{font-size:.8rem; color:var(--ink-soft);}
.leeg{
  color:var(--ink-soft); font-size:.9rem; text-align:center;
  border:1px dashed var(--line); border-radius:12px; padding:22px 16px; margin-top:14px;
}
.visueel-weg{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Spoedbalk ---------- */
.spoedbalk{
  background:var(--navy-deep); color:#fff; border-radius:14px;
  padding:14px 16px; margin-bottom:22px; font-size:.88rem;
  border-left:3px solid var(--gold);
}
.spoedbalk strong{color:var(--gold);}
/* Twee knoppen van gelijke breedte. Met flex werd "Bel 085 303 92 70" veel
   breder dan "WhatsApp" en stond het rommelig onder elkaar uitgelijnd. */
.spoedknoppen{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}
.knop-spoed{background:var(--gold); color:var(--navy-deep); border-color:var(--gold);}
.spoedbalk .knop-stil{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}

/* ---------- Knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:.9rem; font-weight:500;
  padding:11px 18px; border-radius:10px; cursor:pointer; text-align:center;
  background:var(--navy-deep); color:#fff; border:1px solid var(--navy-deep);
  text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.knop:active{transform:translateY(1px);}
.knop[disabled]{opacity:.55; cursor:default;}
.knop-stil{background:transparent; color:var(--navy-deep); border-color:var(--line);}
.knop-leeg{background:transparent; color:var(--ink-soft); border-color:transparent;}
.knop-groot{width:100%; padding:14px 18px; font-size:.98rem; margin-bottom:10px;}
.knop-klein{padding:7px 12px; font-size:.8rem; border-radius:8px;}
.btn-rij{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}

/* ---------- Formulier ---------- */
.veldgroep{border:none; margin:0 0 18px;}
.veldgroep legend{
  font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.veld{margin-bottom:14px;}
.veldrij{display:flex; gap:10px;}
.veldrij .veld{flex:1; min-width:0;}
.veld-kort{max-width:130px;}
label{display:block; font-size:.85rem; font-weight:500; margin-bottom:5px;}
.verplicht{color:var(--rood);}
.optioneel{font-weight:400; color:var(--ink-soft); font-size:.78rem;}
.labelkop{display:block; font-size:.85rem; font-weight:500; margin-bottom:6px;}
.fout-stil{background:#FBF4E6; color:#7A5A1E; border-color:#EBDCBF;}
.fout-stil a{color:#7A5A1E; text-decoration:underline;}

select{
  width:100%; font:inherit; font-size:1rem; padding:11px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  appearance:none;
  /* Eigen pijltje, zodat het veld op iOS en Android hetzelfde staat */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355564F' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
  padding-right:34px;
}
input[type=date]{
  width:100%; font:inherit; font-size:1rem; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
input[type=text], input[type=email], input[type=tel], input[type=search], textarea{
  width:100%; font:inherit; font-size:1rem;   /* 1rem: iOS zoomt in onder 16px */
  padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink);
}
input:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold); outline-offset:1px;
}
textarea{resize:vertical; min-height:96px;}
input[type=file]{
  width:100%; font-size:.85rem; padding:10px; background:#fff;
  border:1px dashed var(--line); border-radius:10px;
}
.hulp{font-size:.78rem; color:var(--ink-soft); margin-top:5px;}
.fout{
  background:#FDECEC; color:var(--rood); border:1px solid #F2C6C6;
  border-radius:10px; padding:10px 12px; font-size:.85rem; margin-bottom:12px;
}

.keuzerij{display:flex; flex-wrap:wrap; gap:7px;}
.keuze input{position:absolute; opacity:0; pointer-events:none;}
.keuze span{
  display:block; padding:8px 13px; border:1px solid var(--line); border-radius:999px;
  font-size:.85rem; background:#fff; cursor:pointer;
}
.keuze input:checked + span{background:var(--navy-deep); color:#fff; border-color:var(--navy-deep);}
.keuze input:focus-visible + span{outline:2px solid var(--gold); outline-offset:1px;}

.vinkje{
  display:flex; gap:10px; align-items:flex-start; font-weight:400;
  font-size:.85rem; color:var(--ink-soft); margin:12px 0 16px;
}
.vinkje input{margin-top:3px; width:18px; height:18px; flex-shrink:0; accent-color:var(--navy-deep);}
.vinkje em{font-style:normal; display:block; color:var(--ink-soft); font-size:.8rem;}
.vinkje-spoed{
  background:var(--paper-alt); border:1px solid var(--line);
  border-radius:10px; padding:12px;
}
.honingpot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.fotolijst{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.fotolijst figure{
  width:76px; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:#fff; position:relative;
}
.fotolijst img{display:block; width:100%; height:62px; object-fit:cover;}
.fotolijst figcaption{font-size:.62rem; padding:3px 4px; color:var(--ink-soft); text-align:center;}

/* ---------- Gelukt ---------- */
.gelukt{text-align:center; padding:26px 4px;}
.gelukt-vink{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; background:var(--groen); color:#fff;
}
.gelukt-vink svg{width:28px; height:28px;}
.gelukt .btn-rij{justify-content:center;}

/* ---------- Kaarten ---------- */
.kaart{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px; margin-top:16px;
}
.kaart-stil{background:var(--paper-alt);}
.lijst{margin:8px 0 10px; padding-left:18px; font-size:.9rem;}
.lijst li{margin-bottom:5px;}
.uitleg{
  margin-top:20px; font-size:.85rem; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:12px;
}
.uitleg summary{cursor:pointer; font-weight:500; color:var(--navy-deep);}
.uitleg p{margin-top:8px;}

/* ---------- Contact ---------- */
.contactrij{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.contactkaart{
  display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px;
}
.contactkaart svg{width:22px; height:22px; color:var(--gold); flex-shrink:0;}
.contactkaart span{display:flex; flex-direction:column; font-size:.78rem; color:var(--ink-soft); min-width:0;}
.contactkaart strong{font-size:.93rem; color:var(--navy-deep); font-weight:600;}
.contactkaart span{overflow-wrap:anywhere;}

/* ---------- QR ---------- */
.qr-vak{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px; margin:12px 0; text-align:center;
}
.qr-beeld{width:min(232px, 68vw); margin:0 auto;}
.qr-beeld svg{width:100%; height:auto; display:block; border-radius:6px;}
.qr-onder{
  font-family:'IBM Plex Mono', monospace; font-size:.7rem; color:var(--ink-soft);
  margin-top:10px; overflow-wrap:anywhere;
}

/* ---------- Gekozen woning ---------- */
/* ---------- Stappen van een melding ---------- */
.stapteller{
  display:flex; gap:6px; list-style:none; margin:0 0 14px; padding:0;
}
.stapteller li{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:.66rem; color:var(--ink-soft); text-align:center; line-height:1.2;
  padding-top:8px; border-top:3px solid var(--line);
}
.stapteller .stapnr{
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--paper-alt); color:var(--ink-soft);
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.7rem;
}
.stapteller li.nu{border-top-color:var(--gold); color:var(--navy-deep); font-weight:600;}
.stapteller li.nu .stapnr{background:var(--navy-deep); color:#fff;}
.stapteller li.af{border-top-color:var(--navy-mid);}
.stapteller li.af .stapnr{background:var(--navy-mid); color:#fff;}

/* Het adres dat de server bij de postcode heeft gevonden. */
.woningvak{
  background:var(--paper-alt); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-bottom:12px;
}
.woningvak strong{display:block; color:var(--navy-deep); font-size:1rem;}

.identbalk{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  background:var(--paper-alt); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:10px; padding:10px 12px; margin-bottom:18px;
  font-size:.82rem; color:var(--ink-soft);
}
.identbalk span{min-width:0; overflow-wrap:anywhere;}
.identbalk .knop-klein{flex-shrink:0; color:var(--navy-deep); text-decoration:underline;}

.werkregel{
  border-top:1px solid var(--line); padding:11px 0;
}
.werkregel:first-child{border-top:none; padding-top:2px;}
.werkregel:last-child{padding-bottom:2px;}

/* ---------- Logboek ---------- */
.logboek-balk{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.regel{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:12px; padding:14px; margin-bottom:10px;
}
.regel-wacht{border-left-color:var(--gold);}
.regel-verzonden{border-left-color:var(--groen);}
.regel-mislukt{border-left-color:var(--rood);}
.regel-kop{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.regel-soort{font-weight:600; font-size:.93rem; color:var(--navy-deep);}
.regel-tijd{font-family:'IBM Plex Mono', monospace; font-size:.68rem; color:var(--ink-soft); white-space:nowrap;}
.regel-tekst{font-size:.88rem; margin-top:6px; white-space:pre-wrap; overflow-wrap:anywhere;}
.regel-meta{
  font-family:'IBM Plex Mono', monospace; font-size:.66rem; color:var(--ink-soft);
  margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.06em;
}
.regel-acties{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px;}
.regel-acties .knop{padding:7px 12px; font-size:.8rem; border-radius:8px;}
.draad{
  margin-top:10px; padding-left:11px; border-left:2px solid var(--paper-alt);
  display:flex; flex-direction:column; gap:8px;
}
.draad-item{font-size:.82rem; color:var(--ink-soft);}
.draad-item b{color:var(--navy-deep); font-weight:600;}
.stempel{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:.6rem;
  letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:999px;
  background:var(--paper-alt); color:var(--ink-soft);
}
.stempel-wacht{background:#F7EEDC; color:#7A5A1E;}
.stempel-verzonden{background:#E7F1EC; color:var(--groen);}
.stempel-mislukt{background:#FDECEC; color:var(--rood);}

/* ---------- Vragen ---------- */
.vraag{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; margin-bottom:9px;
}
.vraag summary{
  cursor:pointer; font-weight:500; font-size:.92rem; color:var(--navy-deep);
  list-style:none; display:flex; justify-content:space-between; gap:12px;
}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary::after{content:'+'; color:var(--gold); font-size:1.1rem; line-height:1;}
.vraag[open] summary::after{content:'–';}
.vraag p{font-size:.88rem; color:var(--ink-soft); margin-top:9px;}

/* ---------- Berichtvenster ---------- */
.laag{
  position:fixed; inset:0; z-index:60; background:rgba(16,28,51,.55);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0; backdrop-filter:blur(2px);
}
.venster{
  background:var(--paper); width:100%; max-width:560px;
  border-radius:16px 16px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height:88vh; overflow-y:auto;
}
@media (min-width:640px){
  .laag{align-items:center; padding:20px;}
  .venster{border-radius:16px;}
}

/* ---------- Installbalk ---------- */
.installbalk{
  position:fixed; z-index:45; left:10px; right:10px;
  bottom:calc(var(--tab-hoogte) + env(safe-area-inset-bottom, 0px) + 10px);
  background:var(--navy-mid); color:#fff; border-radius:12px;
  padding:11px 13px; font-size:.83rem;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  box-shadow:0 8px 24px rgba(16,28,51,.25);
}
.installbalk span{flex:1; min-width:150px;}
.installbalk .knop-klein{background:var(--gold); border-color:var(--gold); color:var(--navy-deep);}
.installbalk .knop-leeg{color:rgba(255,255,255,.75);}

/* ---------- Tabbalk ---------- */
.tabbalk{
  position:fixed; z-index:50; left:0; right:0; bottom:0;
  height:calc(var(--tab-hoogte) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  display:flex; background:rgba(255,255,255,.97);
  border-top:1px solid var(--line); backdrop-filter:blur(8px);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-decoration:none; color:var(--ink-soft);
  font-size:.66rem; letter-spacing:.01em; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.tab svg{width:21px; height:21px;}
.tab[aria-current=page]{color:var(--navy-deep); font-weight:600;}
.tab[aria-current=page] svg{color:var(--gold);}
.tab[aria-current=page]::before{
  content:''; position:absolute; top:0; left:22%; right:22%; height:2px;
  background:var(--gold); border-radius:0 0 2px 2px;
}
.tabstip{
  position:absolute; top:8px; right:calc(50% - 20px);
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--gold); color:var(--navy-deep);
  font-size:.6rem; font-weight:600; line-height:16px; text-align:center;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}

/* ---------- Opvallende mededeling in een formulier ----------
   Gebruikt voor de huurder-melding, de waarschuwing bij een adres- of
   bankwijziging en de tip om de app op het beginscherm te zetten. */
.let-op{
  margin-top:10px;
  padding:12px 14px;
  border-left:3px solid var(--gold);
  background:var(--paper-alt);
  border-radius:0 8px 8px 0;
  font-size:.86rem;
  line-height:1.5;
  color:var(--ink);
}
.let-op strong{display:block; margin-bottom:3px; color:var(--navy-deep);}
.let-op-zacht{display:block; margin-top:7px; color:var(--ink-soft); font-size:.82rem;}


/* ---------- Zelf regelen: lijst met standaardformulieren ---------- */
.formlijst{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.formknop{
  display:flex; flex-direction:column; gap:2px; text-align:left;
  font:inherit; cursor:pointer;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.formknop:active{transform:translateY(1px);}
.formknop strong{color:var(--navy-deep); font-size:.92rem;}
.formknop span{color:var(--ink-soft); font-size:.8rem;}

/* ---------- Vergrendeld: alleen het herkenningsscherm ----------
   De tabbalk verdwijnt tot wij weten wie er kijkt, en de ruimte die de app
   onderaan voor die balk vrijhield mag dan weg. De spoedbalk blijft staan:
   bellen bij een lekkage mag nooit achter een controle zitten. */
body.vergrendeld .tabbalk{display:none;}
body.vergrendeld{padding-bottom:24px;}
body.vergrendeld .stapteller li[data-stap="3"]{display:none;}

/* De belknop in de spoedbalk als wit vlak, zodat hij los staat van het
   donkere blok eromheen en als eerste opvalt. */
.spoedbalk .knop-spoed{
  background:#fff; color:var(--navy-deep); border-color:#fff; font-weight:600;
}

/* ---------- Tekenvak voor de handtekening ----------
   touch-action uit, anders scrollt de pagina mee terwijl iemand tekent. */
.tekenvak{
  width:100%; height:150px; display:block;
  background:#fff; border:1px dashed var(--line); border-radius:10px;
  touch-action:none; cursor:crosshair;
}

/* Zes tabbladen in plaats van vijf: iets smaller, zodat "Volmacht" past. */
.tab{font-size:.62rem;}
.tab svg{width:20px; height:20px;}
.lijst{margin:8px 0 14px 18px; font-size:.9rem; color:var(--ink-soft);}
.lijst li{margin-bottom:5px;}

/* ---------- Hoogte van een beeld ----------
   Met weinig inhoud - één melding in het logboek bijvoorbeeld - was de pagina
   korter dan het scherm. Op een iPhone kwam de tabbalk dan los van de onderrand
   te staan. Elk beeld vult nu minstens het scherm, zodat de balk blijft waar
   hij hoort. dvh houdt rekening met de balken van de browser die in- en
   uitschuiven; vh is de terugval voor oudere toestellen. */
.beeld > .binnen{
  display:flex; flex-direction:column;
  min-height:calc(100vh - var(--kop-hoogte) - var(--tab-hoogte));
  min-height:calc(100dvh - var(--kop-hoogte) - var(--tab-hoogte)
                  - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* De QR-code om de app te delen hoort niet bovenaan Mijn VvE: eerst wat een
   bewoner voor zichzelf nodig heeft, daarna pas het delen. */
.kaart-onderaan{order:99;}

/* ---------- Vragen: categorieën ---------- */
.vraaggroep{margin-bottom:22px;}
.vraaggroep:last-of-type{margin-bottom:0;}
.vraagkop{
  font-family:'IBM Plex Mono', monospace; font-size:.62rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  margin:0 0 9px; padding-bottom:6px; border-bottom:1px solid var(--line);
}

/* ---------- Vooraf ingevulde velden ---------- */
/* Een zacht gouden randje laat zien dat wij het al wisten. Het blijft een
   gewoon veld: aanpassen mag altijd, en zodra iemand typt hoort de markering
   weg te zijn. */
.vooraf-melding{
  background:var(--paper-alt); border-radius:10px; padding:9px 12px;
  color:var(--ink-soft); margin-bottom:14px;
}
.veld-vooraf input, .veld-vooraf textarea, .veld-vooraf select{
  border-color:var(--gold); background:#FFFCF6;
}
.veld-vooraf input:focus, .veld-vooraf textarea:focus, .veld-vooraf select:focus{
  background:#fff;
}

/* ---------- Geen tekstselectie op de vaste onderdelen ---------- */
/* Op iOS pakt een veeg over de kopbalk of de tabbalk de tekst beet: hij kleurt
   blauw en er springt een kopieerballon op. Dat hoort bij tekst die je wilt
   overnemen, niet bij knoppen. Alleen de chroom van de app staat op none; de
   inhoud van een melding, een vraag of een logboekregel blijft gewoon te
   selecteren, want dat wil iemand soms wél kopiëren. */
.app-kop, .merk, .merk-tekst, .pil, .tabbalk, .tab,
.stapteller, .vraagkop, .vraag summary, .knop, .formlijst button, label,
.binnen > h1, .kaart > h2{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* Invoervelden zelf moeten juist wél selecteerbaar blijven, ook als het label
   eromheen dat niet is. */
input, textarea, select{
  -webkit-user-select:auto; user-select:auto; -webkit-touch-callout:default;
}