/* Steuntje - groot, rustig, hoog contrast. Minimaal 64px touch-doelen. */
:root {
  --blauw: #0b5cad; --blauw-d: #084a8c;
  --rood: #c62828; --rood-d: #a01f1f;
  --groen: #1b7a3a; --geel: #fff3c4;
  --tekst: #14181f; --zacht: #4a5260; --lijn: #d5dae2;
  --achter: #f5f7fa; --kaart: #ffffff;
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root { --tekst: #f2f4f7; --zacht: #b8c0cc; --lijn: #3a4250; --achter: #11151b; --kaart: #1b212a; --geel: #3d3517; }
}
* { box-sizing: border-box; }
html { font-size: 20px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--achter); color: var(--tekst); line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
h1 { font-size: 1.5rem; margin: .4rem 0 .8rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.kop {
  display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem;
  padding-top: calc(.7rem + env(safe-area-inset-top));
  background: var(--blauw); color: #fff; position: sticky; top: 0; z-index: 5;
}
.logo { font-size: 1.4rem; }
.merk { font-weight: 700; font-size: 1.2rem; flex: 1; }
.kop-knop { background: transparent; border: 0; font-size: 1.5rem; min-width: 56px; min-height: 56px; cursor: pointer; }
main { max-width: 560px; margin: 0 auto; padding: 1rem; outline: none; }
.uitleg { font-size: 1.05rem; }
.klein { color: var(--zacht); font-size: .9rem; }
.groot-tekst { font-size: 1.3rem; font-weight: 700; margin: .2rem 0; }
.fout { color: var(--rood); font-weight: 600; min-height: 1.2em; }

.veld { display: block; font-weight: 600; margin: 1rem 0; }
.veld input, .veld textarea {
  display: block; width: 100%; margin-top: .35rem; font: inherit; padding: .8rem .9rem;
  border: 2px solid var(--lijn); border-radius: 12px; background: var(--kaart); color: var(--tekst);
}
.veld input:focus, .veld textarea:focus { border-color: var(--blauw); outline: 3px solid rgba(11,92,173,.25); }

.knop {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 64px; margin: .6rem 0; padding: .8rem 1rem;
  font: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
  color: #fff; background: var(--blauw);
}
.knop:focus-visible, .rol:focus-visible, .kamer:focus-visible, .tab:focus-visible, .schakelaar:focus-visible {
  outline: 4px solid #ffbf47; outline-offset: 2px;
}
.knop:disabled { opacity: .55; cursor: wait; }
.knop.groot { min-height: 110px; font-size: 1.4rem; }
.knop.rood { background: var(--rood); }
.knop.rood:active { background: var(--rood-d); }
.knop.blauw:active { background: var(--blauw-d); }
.knop.groen { background: var(--groen); }
.knop.wit { background: var(--kaart); color: var(--tekst); border-color: var(--lijn); }
.knop.spoed { background: var(--kaart); color: var(--rood); border-color: var(--rood); }
.knop.rand-rood { background: transparent; color: var(--rood); border-color: var(--rood); }

.rollen { display: grid; gap: .7rem; }
.rol {
  display: flex; align-items: center; gap: .9rem; text-align: left; font: inherit; color: var(--tekst);
  background: var(--kaart); border: 2px solid var(--lijn); border-radius: var(--radius);
  padding: 1rem; min-height: 84px; cursor: pointer;
}
.rol:active { border-color: var(--blauw); }
.rol-ico { font-size: 2rem; }
.vraag { font-weight: 700; margin-top: 1.4rem; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.tab {
  min-height: 60px; font: inherit; font-weight: 700; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--lijn); background: var(--kaart); color: var(--tekst);
}
.tab[aria-selected="true"] { background: var(--blauw); color: #fff; border-color: var(--blauw); }

.kamers { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.kamer {
  min-height: 76px; font: inherit; font-weight: 600; border-radius: 16px; cursor: pointer;
  border: 2px solid var(--lijn); background: var(--kaart); color: var(--tekst); padding: .5rem;
}
.kamer[aria-pressed="true"] { background: var(--groen); color: #fff; border-color: var(--groen); }

.bellen .knop { background: var(--groen); }
.banner {
  background: var(--geel); border: 2px solid #e0b400; border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1rem;
}
.banner.nood { background: #fde2e2; border-color: var(--rood); color: #3b0d0d; }
.banner.nood .knop.wit { color: #14181f; background: #fff; }
.blok { background: var(--kaart); border: 2px solid var(--lijn); border-radius: var(--radius); padding: .4rem 1rem 1rem; margin: 1rem 0; }
details.blok summary { cursor: pointer; font-weight: 700; padding: .8rem 0; min-height: 48px; }
.code { font-size: 2.2rem; font-weight: 800; letter-spacing: .3rem; text-align: center; margin: .4rem 0; }
.lijst { padding-left: 1.2rem; }
.lijst li { margin: .4rem 0; }
.lijst button { font: inherit; font-size: .85rem; margin-left: .5rem; background: none; border: 0; color: var(--rood); text-decoration: underline; cursor: pointer; min-height: 44px; }

.persoon { background: var(--kaart); border: 2px solid var(--lijn); border-radius: var(--radius); padding: 1rem; margin: .8rem 0; }
.persoon.alarm { border-color: var(--rood); background: #fde2e2; color: #3b0d0d; }
.persoon h2 { margin: 0 0 .3rem; }

.verzoek { background: var(--kaart); border: 2px solid var(--blauw); border-radius: var(--radius); padding: 1rem; margin: .8rem 0; }
.verzoek.mijn { border-color: var(--groen); }

.schakelaar-rij { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 700; font-size: 1.1rem;
  background: var(--kaart); border: 2px solid var(--lijn); border-radius: var(--radius); padding: .8rem 1rem; }
.schakelaar { width: 84px; height: 48px; border-radius: 24px; border: 0; background: #9aa3b0; position: relative; cursor: pointer; flex: none; }
.schakelaar span { position: absolute; top: 4px; left: 4px; width: 40px; height: 40px; border-radius: 50%; background: #fff; transition: left .15s; }
.schakelaar[aria-checked="true"] { background: var(--groen); }
.schakelaar[aria-checked="true"] span { left: 40px; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #14181f; color: #fff; padding: .9rem 1.2rem; border-radius: 14px; max-width: 92vw;
  font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.3); z-index: 20;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }