/* Familie-app: mobiel eerst, werkt ook op een laptop.
   Huisstijl Thuisklok (brandboek, tokens.json): kleuren als CSS-variabelen, koppen in Bricolage Grotesque (800),
   tekst in Atkinson Hyperlegible. Beide lettertypen staan op onze eigen server (geen Google Fonts: AVG-belofte). */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; src: url("/fonts/atkinson-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; src: url("/fonts/atkinson-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; src: url("/fonts/bricolage-800.woff2") format("woff2"); font-display: swap; }

:root {
  /* Merkkleuren (brandboek) */
  --groen: #1F4E46; --koraal: #F28C6B; --blauw: #24508F; --achtergrond: #F4F7F6; --kaart: #FFFFFF; --tekst: #13201C;
  --tekst-zacht: #3F4C47; --lijn: #DCE3DF; --zacht-blauw: #DDE7F5; --zacht-groen: #DCEFE3; --wijzerplaat: #FFF8EC;
  --gedaan: #1E7A4C; --let-op: #B4610E;
  --kop-letter: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  /* Wat de app gebruikt, afgeleid van de merkkleuren */
  --bg: var(--achtergrond); --card: var(--kaart); --ink: var(--tekst); --muted: var(--tekst-zacht); --line: var(--lijn);
  --ok: var(--gedaan); --ok-ink: #FFFFFF; --warn: var(--let-op); --warn-ink: #FFFFFF; --warn-soft: #F6E6D6; --ok-soft: var(--zacht-groen);
  --rood: #B42318; --rood-soft: #FDE8E6; --accent: var(--groen); --accent-ink: #FFFFFF; --done: #6E7A75; --soft: var(--zacht-blauw);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --groen: #7FC4B4; --koraal: #F59A7C; --blauw: #8FAEE8; --achtergrond: #0E1513; --kaart: #18211E; --tekst: #EEF2F0;
    --tekst-zacht: #A9B6B0; --lijn: #2C3833; --zacht-blauw: #1D2A3A; --zacht-groen: #173326; --gedaan: #3FAE77; --let-op: #E39A4B;
    --ok-ink: #06140D; --warn-ink: #1C1005; --warn-soft: #3A2A18; --rood: #FF8A80; --rood-soft: #3A1B19; --accent-ink: #0B1A17; --done: #6B7884;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --groen: #7FC4B4; --koraal: #F59A7C; --blauw: #8FAEE8; --achtergrond: #0E1513; --kaart: #18211E; --tekst: #EEF2F0;
  --tekst-zacht: #A9B6B0; --lijn: #2C3833; --zacht-blauw: #1D2A3A; --zacht-groen: #173326; --gedaan: #3FAE77; --let-op: #E39A4B;
  --ok-ink: #06140D; --warn-ink: #1C1005; --warn-soft: #3A2A18; --rood: #FF8A80; --rood-soft: #3A1B19; --accent-ink: #0B1A17; --done: #6B7884;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Atkinson Hyperlegible", -apple-system, "Segoe UI", system-ui, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
a { color: var(--accent); }

.app { max-width: 640px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.kop { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.kop h1 { margin: 0; font-size: 21px; line-height: 1.2; }
.kop .wissel { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; }
.kop .wissel h1 span[aria-hidden] { font-size: 15px; color: var(--muted); }
.kop .wissel .stip { position: absolute; top: -2px; right: -10px; }
.kop p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.inhoud { flex: 1; padding: 14px 16px calc(env(safe-area-inset-bottom) + 96px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
/* Niets mag de kolom breder maken dan het scherm (bijv. een invoerveld met een vaste breedte). */
.panel { grid-template-columns: minmax(0, 1fr); }
.veld input { width: 100%; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--card); padding: 6px 6px calc(env(safe-area-inset-bottom) + 8px); }
.tabs-binnen { max-width: 640px; margin: 0 auto; display: contents; }
.tabs button { position: relative; border: 0; background: none; cursor: pointer; text-align: center; font-size: 13px; color: var(--muted); padding: 6px 0; border-radius: 10px; display: grid; justify-items: center; gap: 2px; min-height: 52px; }
.tabs button svg { width: 24px; height: 24px; }
.tabs button[aria-selected="true"] { color: var(--accent); font-weight: 700; background: var(--soft); }
.stip { position: absolute; top: 4px; left: calc(50% + 8px); width: 10px; height: 10px; border-radius: 50%; background: var(--rood); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.panel h2, .panel h3 { margin: 0; font-size: 17px; }
.panel.letop { border: 2px solid var(--rood); }
.panel.aandacht { border: 2px solid var(--warn); background: var(--warn-soft); }
.panel.zacht { background: var(--soft); border-color: transparent; }
.kopje { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 8px 2px -4px; }
.letop-label { color: var(--rood); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .05em; }
.meta { color: var(--muted); font-size: 14px; }
.leeg { color: var(--muted); font-size: 15px; margin: 0; }
.rij { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.groei { flex: 1; min-width: 0; }

.lbl { display: block; font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .03em; margin-bottom: 4px; }
.veld { display: flex; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.veld input, .veld textarea, .veld select { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px; outline: none; }
.veld textarea { min-height: 76px; resize: vertical; }
.veld:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ok-soft); }
.veld .spraak { border: 0; background: none; cursor: pointer; padding: 0 12px; color: var(--accent); display: grid; place-items: center; min-width: 44px; }
.veld .spraak svg { width: 22px; height: 22px; }
.veld .spraak.luistert { color: var(--rood); animation: puls 1s infinite; }
@keyframes puls { 50% { opacity: .4; } }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drie { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
select.los, input.los { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 11px; min-width: 0; width: 100%; min-height: 44px; }
.voorstellen { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.voorstellen button { border: 0; background: var(--card); text-align: left; padding: 10px 12px; cursor: pointer; border-top: 1px solid var(--line); }
.voorstellen button:first-child { border-top: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button, .chip-knop { border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; background: var(--bg); cursor: pointer; min-height: 40px; font-size: 15px; }
.chips button[aria-pressed="true"] { border-color: var(--accent); background: var(--ok-soft); font-weight: 700; }
.keuzes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.keuzes button { border: 1px solid var(--line); border-radius: 12px; padding: 10px 2px; text-align: center; font-size: 14px; display: grid; justify-items: center; gap: 4px; background: var(--bg); cursor: pointer; min-height: 64px; }
.keuzes button svg { width: 28px; height: 28px; }
.keuzes button[aria-pressed="true"] { border-color: var(--accent); background: var(--ok-soft); font-weight: 700; }
.dagen { display: flex; gap: 6px; flex-wrap: wrap; }
.dagen button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 14px; font-weight: 700; }
.dagen button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.reken { background: var(--soft); border-radius: 12px; padding: 10px 12px; font-size: 15px; line-height: 1.45; }

.knop { border: 0; cursor: pointer; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 13px 16px; border-radius: 12px; text-align: center; min-height: 48px; }
.knop.vol { width: 100%; }
.knop.zacht { background: var(--soft); color: var(--ink); }
.knop.ok { background: var(--ok); color: var(--ok-ink); }
.knop.warn { background: var(--warn); color: var(--warn-ink); }
.knop.rood { background: var(--rood); color: #fff; }
.knop[disabled] { opacity: .5; cursor: default; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.knoppen .knop { flex: 1 1 auto; }
.mini { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 8px 11px; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 40px; }
.mini.ok { border-color: var(--ok); color: var(--ok); }
.mini.rood { border-color: var(--rood); color: var(--rood); }

.lijst { list-style: none; margin: 0; padding: 0; display: grid; }
.lijst > li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.lijst > li:first-child { border-top: 0; }
.lijst .t { font-weight: 700; }
.lijst .doorgestreept .t { text-decoration: line-through; color: var(--done); }
.vink { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: none; cursor: pointer; display: grid; place-items: center; }
.vink svg { width: 20px; height: 20px; opacity: 0; }
.vink.aan { background: var(--ok); border-color: var(--ok); }
.vink.aan svg { opacity: 1; }
.label { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.label.aan { background: var(--ok-soft); color: var(--ok); }
.label.uit { background: var(--soft); color: var(--muted); }
.label.nodig { background: var(--warn-soft); color: var(--warn); }
.label.rood { background: var(--rood-soft); color: var(--rood); }

.sw { border: 0; cursor: pointer; width: 50px; height: 30px; border-radius: 999px; background: var(--line); position: relative; flex: none; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sw[aria-checked="true"] { background: var(--ok); }
.sw[aria-checked="true"]::after { left: 23px; }
.blok { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.blok:first-of-type { border-top: 0; }
.blok small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
a.knop { text-decoration: none; display: inline-block; }
.stat { background: var(--soft); border-radius: 12px; padding: 10px; display: grid; gap: 2px; }
.stat b { font-size: 24px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.balken { display: grid; gap: 8px; }
.balken > div { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr 44px; gap: 8px; align-items: center; font-size: 14px; }
.balk { height: 10px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.balk i { display: block; height: 100%; background: var(--ok); border-radius: 5px; }
.balk i.laag { background: var(--warn); }
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabel th { text-align: left; color: var(--muted); font-weight: 700; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.tabel td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelhouder { overflow-x: auto; }

.melding { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 84px); transform: translateX(-50%); z-index: 9; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 12px; font-size: 15px; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.melding.fout { background: var(--rood); color: #fff; }
.melding.met-knop { display: flex; align-items: center; gap: 14px; text-align: left; }
.melding-knop { all: unset; cursor: pointer; font-weight: 700; text-decoration: underline; padding: 6px 2px; white-space: nowrap; color: inherit; }
/* Meldingen bovenaan Vandaag: kruisje rechtsboven */
.panel.kaart-weg { position: relative; }
.panel.kaart-weg > h3, .panel.kaart-weg > .letop-label { padding-right: 40px; }
.weg-x { all: unset; cursor: pointer; position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--muted); }
.weg-x:hover, .weg-x:focus-visible { background: var(--soft); color: var(--ink); }
.weg-x:focus-visible { outline: 3px solid var(--accent); }
.alles-weg { justify-self: end; }
.venster-ov { position: fixed; inset: 0; z-index: 10; background: rgba(10,15,12,.5); display: grid; align-items: end; justify-items: center; }
.venster { background: var(--bg); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 18px 16px calc(env(safe-area-inset-bottom) + 18px); display: grid; gap: 12px; }
.venster h2 { margin: 0; font-size: 20px; }
@media (min-width: 700px) { .venster-ov { align-items: center; } .venster { border-radius: 20px; } }

.welkom { padding: 32px 16px; display: grid; gap: 16px; max-width: 480px; margin: 0 auto; }
.welkom h1 { font-size: 28px; margin: 0; }
.welkom p { margin: 0; line-height: 1.5; }
.logo { width: 64px; height: 64px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.logo svg { width: 40px; height: 40px; }
.stappen { display: flex; gap: 6px; }
.stappen i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.stappen i.klaar { background: var(--accent); }
.pin { letter-spacing: .4em; font-size: 22px; text-align: center; }
.qrblok { display: grid; justify-items: center; gap: 8px; }
.qrblok img { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 8px; }
.code-groot { font-size: 32px; font-weight: 700; letter-spacing: .12em; }
.mailtekst { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; max-height: 220px; overflow: auto; }
.stem { display: flex; gap: 8px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.stem[aria-pressed="true"] { border-color: var(--accent); background: var(--ok-soft); }
.stem .groei { cursor: pointer; }
.schuif { width: 100%; accent-color: var(--accent); }
.uitleg-ios { display: grid; gap: 10px; counter-reset: stap; }
.uitleg-ios > div { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.uitleg-ios > div::before { counter-increment: stap; content: counter(stap); width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; }
.ios-icoon { display: inline-block; vertical-align: middle; width: 22px; height: 22px; color: #0A84FF; }
:focus-visible { outline: 3px solid #3B82F6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.tabel td:first-child { white-space: nowrap; }

.lijst > li.breed { flex-wrap: wrap; }
.lijst > li.breed > .groei { flex-basis: 100%; }
.lijst > li.breed > .knoppen:empty { display: none; }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
label.rij { min-height: 44px; }
/* Catalogus met koppelingen (slimme apparaten) */
.catalogus { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.catalogus .tegel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card, #fff); color: inherit; font: inherit; cursor: pointer; }
.catalogus .tegel.grijs { opacity: .6; cursor: default; }
.catalogus .tegel .label { white-space: normal; }

/* Kop: status + rondje "?" (uitleg van de app) */
.kop-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.hulp { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 19px; display: grid; place-items: center; position: relative; }
.hulp::after { content: ""; position: absolute; inset: -5px; } /* groter tikvlak (44 px) */
.hulp:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Rondleiding (zelfde stijl als op de klok, zonder spraak) */
.rondleiding { display: none; position: fixed; inset: 0; z-index: 20; }
.r-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 4px #FFD54A, 0 0 0 3000px rgba(8,12,10,.7); pointer-events: none; transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.r-bub { position: fixed; box-sizing: border-box; background: var(--card); color: var(--ink); border-radius: 20px; padding: 18px 18px 12px; box-shadow: 0 18px 50px rgba(0,0,0,.35); transition: left .3s ease, top .3s ease; }
.r-tekst { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.r-uitleg { margin: 0 0 12px; font-size: 15px; color: var(--muted); line-height: 1.4; }
.r-rij { display: flex; align-items: center; gap: 10px; }
.r-rij .knop { white-space: nowrap; }
.r-nr { font-size: 13px; color: var(--muted); white-space: nowrap; }
.r-stop { all: unset; cursor: pointer; margin-left: auto; font-size: 15px; color: var(--muted); text-decoration: underline; padding: 12px 4px; }
.r-bub.compact { padding: 12px 14px 6px; }
.r-bub.compact .r-tekst { font-size: 17px; }
.r-bub.compact .r-uitleg { font-size: 14px; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .r-spot, .r-bub { transition: none; } }

/* ---------- Familieklok: kleuren per gezinslid, vorm van een scherm ---------- */
.kleurstip { display: inline-block; border-radius: 50%; border: 2px solid; vertical-align: -2px; flex: none; }
.kleuren { display: flex; flex-wrap: wrap; gap: 8px; }
.kleur-knop { width: 44px; height: 44px; border-radius: 50%; border: 3px solid; cursor: pointer; padding: 0; }
.kleur-knop[aria-checked="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--ink); }
.modi { display: grid; gap: 8px; }
.modus-knop { text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; min-height: 56px; color: var(--ink); }
.modus-knop[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--ok-soft); }
.modus-knop[disabled] { opacity: .55; cursor: default; }
.chips .gaat.niet { border-style: dashed; color: var(--muted); text-decoration: line-through; background: var(--soft); }
.segment { display: flex; background: var(--soft); padding: 4px; border-radius: 10px; gap: 4px; }
.segment button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 9px 4px; min-height: 44px; font-size: 14px; cursor: pointer; color: var(--ink); }
.segment button[aria-pressed="true"] { background: var(--card); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.stappen { padding-left: 20px; display: grid; gap: 12px; margin: 0; }
.code-vak { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--soft); border-radius: 8px; padding: 8px 10px; word-break: break-all; margin: 6px 0; user-select: all; -webkit-user-select: all; }
.voorstel-foto { max-width: 100%; max-height: 260px; border-radius: 10px; object-fit: contain; background: var(--soft); justify-self: start; }
.stand { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: plek; }
.stand li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--soft); counter-increment: plek; }
.stand li::before { content: counter(plek); font-weight: 700; width: 18px; }
.stand li:first-child { background: #FFF1B8; color: #1D2430; }
.twee-kol { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
/* Achtergrond van de klok */
.stalen { display: flex; flex-wrap: wrap; gap: 8px; }
.staal { all: unset; cursor: pointer; width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--line); position: relative; box-sizing: border-box; background-size: cover; background-position: center; }
.staal.foto { width: 76px; height: 54px; }
.staal[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }
.staal[aria-pressed="true"]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: #18201C; text-shadow: 0 0 3px #fff; }
.staal:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bgvoorbeeld { height: 130px; border-radius: 12px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.bgvoorbeeld .img { position: absolute; inset: -12px; background-size: cover; background-position: center; }
.bgvoorbeeld .waas { position: absolute; inset: 0; background: rgba(255,255,255,.42); }
.bgvoorbeeld span { position: absolute; left: 10px; top: 8px; font-weight: 700; font-size: 15px; color: #18201C; }
.bgvoorbeeld i { position: absolute; left: 14px; bottom: 12px; width: 62px; height: 62px; border-radius: 50%; border: 4px solid #18201C; background: #fff; }
.bgvoorbeeld b { position: absolute; right: 12px; top: 34px; width: 46%; height: 70px; border-radius: 10px; background: #fff; border: 1px solid #D3DAD5; }
.schuif { display: flex; align-items: center; gap: 10px; }
.schuif input { flex: 1; }

/* Installatie-uitleg per apparaat */
.stappen { margin: 0; padding-left: 22px; display: grid; gap: 6px; line-height: 1.45; }
.installatie select { width: 100%; }

/* Thuisklok Pro (nacht 13→14 okt): slotje op Gratis, inspreken, eigen mailadres, actieknop. */
.label.pro { background: var(--accent); color: var(--accent-ink); vertical-align: 2px; }
.pro-slot { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.pro-slot svg { flex: none; }
.inspreek { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; }
.inspreek svg { width: 22px; height: 22px; }
.inspreek.luistert { animation: puls 1s infinite; }
.voorstel-zin { margin-top: 8px; }
.adres-veld .domein { padding: 0 12px; color: var(--muted); white-space: nowrap; align-self: center; }
.adres-fout { color: var(--rood); }
.adres-vrij { color: var(--ok); font-weight: 700; }
ol.stappen { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 10px; }
ol.stappen li { line-height: 1.45; }
/* ---------- Huisstijl Thuisklok (nacht 13→14 okt): koppen, logo, merk ---------- */
h1, h2, .welkom h1, .kop h1, .panel h2, .venster h2 { font-family: var(--kop-letter); font-weight: 800; letter-spacing: -0.02em; }
.panel h3 { font-family: var(--kop-letter); font-weight: 800; letter-spacing: -0.01em; }
.logo-merk { display: block; width: 200px; max-width: 70%; height: auto; }
.logo-merk.wit { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-merk { display: none; } :root:not([data-theme="light"]) .logo-merk.wit { display: block; } }
:root[data-theme="dark"] .logo-merk { display: none; }
:root[data-theme="dark"] .logo-merk.wit { display: block; }
.kop-merk { width: 28px; height: 28px; flex: none; margin-right: 8px; vertical-align: middle; }
.kop-links { display: flex; align-items: center; min-width: 0; }
.slotje { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.slotje img { height: 20px; width: auto; }
.boodschap-export { display: flex; flex-wrap: wrap; gap: 8px; }