/* Opa-scherm. Werkt op Safari 10 (iPad 4, iOS 10): geen gap bij flexbox, geen aspect-ratio, geen inset, geen color-mix. */
@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; }

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #0E141B; }
body { font-family: "Atkinson Hyperlegible", -apple-system, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
button { font-family: inherit; }
* { box-sizing: border-box; }

.scherm {
  --bg: #EEF1EC; --card: #FFFFFF; --ink: #18201C; --muted: #454F49; --line: #CBD3CE;
  --ok: #145A37; --ok-ink: #FFFFFF; --warn: #7A3F00; --warn-ink: #FFFFFF; --warn-soft: #F6E6D6; --ok-soft: #DCEFE3;
  --accent: #1F4E46; --done: #4F5853; --soft: #E2E8E3;
  --dp: #FFE7A3; --dp-ink: #3D2C00;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;
  background: var(--bg); color: var(--ink);
}
.scherm[data-modus="nacht"] {
  --bg: #0E141B; --card: #18212B; --ink: #EEF2F5; --muted: #B4BFC9; --line: #2C3946;
  --ok: #3FAE77; --ok-ink: #06140D; --warn: #E39A4B; --warn-ink: #1C1005; --warn-soft: #3A2A18; --ok-soft: #173326;
  --accent: #8CC9BC; --done: #8A96A1; --soft: #202B36;
}
/* Na 22:00: nog donkerder en minder fel. */
.scherm[data-diep="1"] {
  --bg: #05080B; --card: #0C1218; --ink: #D2DAE0; --muted: #AAB4BD; --line: #1C2630; --soft: #121A22; --accent: #6FA89B;
}
.scherm[data-dp="ochtend"] { --dp: #FFE7A3; --dp-ink: #3D2C00; }
.scherm[data-dp="middag"] { --dp: #FFD3A8; --dp-ink: #3F1F00; }
.scherm[data-dp="avond"] { --dp: #C9D5FF; --dp-ink: #101A4A; }
.scherm[data-dp="nacht"] { --dp: #2B3352; --dp-ink: #E4E9FF; }

/* ---------- Achtergrond van de klok (alleen het vlak achter de kaartjes) ---------- */
.opabg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.opabg .img { position: absolute; top: -30px; left: -30px; right: -30px; bottom: -30px; background-size: cover; background-position: center; }
.opabg .waas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.42); }
.scherm[data-modus="nacht"] .opabg.kleur { background-color: var(--bg) !important; }
.scherm[data-modus="nacht"] .opabg .waas { background: rgba(8,12,16,.62); }

/* ---------- iPad liggend: klok links, dag rechts ---------- */
.opa { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: flex; padding: 22px 26px; }
.links { padding-top: 0; width: 470px; -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-right: 28px; }
.links > * { -webkit-flex-shrink: 0; flex-shrink: 0; } /* nooit wegkrimpen (begroeting viel weg op een laag scherm) */
.klokknop { border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; width: 360px; height: 360px; border-radius: 50%; }
.klokknop svg { width: 100%; height: 100%; display: block; }
.dagdeel { font-size: 38px; font-weight: 700; margin: 12px 0 0; line-height: 1.1; padding: 6px 26px; border-radius: 999px; background: var(--dp); color: var(--dp-ink); text-align: center; }
.dagdeel.lang { font-size: 26px; padding: 8px 16px; }
.datum { font-size: 24px; color: var(--muted); margin: 10px 0 0; }
.rechts { -webkit-flex: 1; flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; margin-bottom: 56px; }
.rechts > * { margin-bottom: 14px; }

.top { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
.greet { font-size: 30px; font-weight: 700; margin: 4px 0 0; line-height: 1.2; width: 100%; overflow: hidden; }
.links .greet { font-size: 28px; text-align: center; margin: 0 0 8px; width: 100%; }
.wxrij { margin: 0 0 10px; }
.wxrij:empty { display: none; }
.wxrij .wx { display: block; }
.wxuitleg { font-size: 20px; font-weight: 400; color: var(--muted); margin-left: 12px; text-align: left; line-height: 1.2; max-width: 210px; }
.card.metvink { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding-left: 12px; }
.card.metvink > .check { margin-right: 4px; }
.card.done .t { color: var(--done); text-decoration: line-through; }
.check.aan { background: var(--ok); border-color: var(--ok); }
.check.aan svg { opacity: 1; }
.grid button.aan, .grid button[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-soft); }
.bijschrift { font-size: 21px; color: var(--muted); margin: 6px 0 0; text-align: center; max-width: 440px; }
.bijschrift:empty, .groethint:empty { display: none; }
.groethint { font-size: 22px; font-weight: 700; color: var(--ink); background: var(--soft); border-radius: 14px; padding: 10px 16px; margin: 12px 0 0; text-align: center; max-width: 440px; line-height: 1.3; }
.geluidbanner { display: none; position: absolute; left: 50%; bottom: 14px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 3; background: var(--accent); color: var(--bg); font-size: 20px; font-weight: 700; padding: 8px 18px; border-radius: 999px; pointer-events: none; }
.wx { border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: block; border-radius: 16px; padding: 6px 14px 6px 8px; -webkit-flex: none; flex: none; min-height: 64px; }
.binnen { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; text-align: left; }
.wx svg { width: 44px; height: 44px; margin-right: 6px; }
.wx b { font-size: 30px; }
.wxt { display: block; line-height: 1.05; }
.wxt b { display: block; }
.wxkort { display: block; font-size: 20px; font-weight: 700; color: var(--accent); white-space: nowrap; margin-top: 2px; }
.wxkort.nat { color: #1F5F99; }
.scherm[data-modus="nacht"] .wxkort.nat { color: #8CC0F0; }
/* Weervenster: nu + staafjes "Komende 2 uur" */
.wnu { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.wnu svg { width: 72px; height: 72px; margin-right: 12px; -webkit-flex: none; flex: none; }
.wnu b { font-size: 52px; margin-right: 16px; }
.sheet .wsom { font-size: 26px; font-weight: 700; margin: 0; }
.sheet .wmax { font-size: 21px; color: var(--muted); margin: 2px 0 0; }
.sheet .wlabel { font-size: 19px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 30px !important; }
.regen { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; height: 140px; border-bottom: 2px solid var(--line); padding: 0 2px; margin-bottom: 0 !important; }
.staaf { -webkit-flex: 1; flex: 1; margin: 0 4px; position: relative; }
.staaf i { display: block; border-radius: 8px 8px 0 0; background: #3E7CB1; position: relative; }
.staaf.droog i { background: var(--line); }
.scherm[data-modus="nacht"] .staaf i { background: #5B9BD5; }
.scherm[data-modus="nacht"] .staaf.droog i { background: var(--line); }
.staaf b { position: absolute; top: -26px; left: -6px; right: -6px; text-align: center; font-size: 17px; color: var(--muted); font-style: normal; }
.regenlabels { display: -webkit-flex; display: flex; padding: 6px 2px 0; }
.regenlabels span { -webkit-flex: 1; flex: 1; margin: 0 4px; text-align: center; font-size: 18px; color: var(--muted); white-space: nowrap; }
.sheet .wzin { font-size: 26px; font-weight: 700; line-height: 1.35; }
.sheet .wbron { font-size: 16px !important; margin-top: 10px !important; }

.rem { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: var(--accent); color: var(--bg); border-radius: 20px; padding: 14px 20px; font-size: 26px; font-weight: 700; line-height: 1.25; }
.rem small { display: block; font-size: 20px; font-weight: 400; }
.rem.nu { background: var(--warn); color: var(--warn-ink); }

.weerwaarschuwing { background: #FFE7A3; color: #3D2C00; border-radius: 16px; padding: 12px 16px; font-size: 24px; font-weight: 700; line-height: 1.3; }
.scherm[data-modus="nacht"] .weerwaarschuwing { background: #4A3A10; color: #FFE7A3; }
.bezoekregel { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: var(--ok-soft); border-radius: 16px; padding: 12px 16px; font-size: 24px; font-weight: 700; }
.bezoekregel svg { width: 34px; height: 34px; margin-right: 12px; -webkit-flex: none; flex: none; color: var(--ok); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 4px 6px; }
.card h2 { font-size: 19px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 12px 14px 2px; }
.leeg { font-size: 20px; color: var(--muted); margin: 8px 14px 14px; }
.tasks { list-style: none; margin: 0; padding: 0; }
.taak { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 8px 10px; }
.taak + .taak { border-top: 1px solid var(--line); }
.check { -webkit-flex: none; flex: none; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); background: transparent; cursor: pointer; padding: 0; margin-right: 16px; display: block; }
.check svg { display: block; width: 32px; height: 32px; margin: 0 auto; opacity: 0; }
.done .check { background: var(--ok); border-color: var(--ok); }
.done .check svg { opacity: 1; }
.zeg { border: 0; background: transparent; color: var(--ink); text-align: left; padding: 6px 0; cursor: pointer; -webkit-flex: 1; flex: 1; min-width: 0; min-height: 64px; }
.zeg .t { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; }
.zeg .w, .zeg .s { display: block; font-size: 22px; color: var(--muted); margin-top: 2px; }
.done .t { color: var(--done); text-decoration: line-through; }
.taak > svg { width: 30px; height: 30px; color: var(--muted); -webkit-flex: none; flex: none; margin-left: 8px; }

.afspraak, .db { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.db { padding: 6px 12px 6px 16px; }
.appt { border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; padding: 12px 14px 14px; -webkit-flex: 1; flex: 1; min-width: 0; }
.appt .row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.tag { background: var(--warn); color: var(--warn-ink); font-weight: 700; border-radius: 10px; padding: 4px 10px; font-size: 20px; margin: 0 10px 4px 0; }
.appt .t { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.how { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 21px; margin-top: 4px; }
.how svg { width: 30px; height: 30px; margin-right: 8px; -webkit-flex: none; flex: none; }
.how.zacht { color: var(--muted); }
.notfit { -webkit-flex: none; flex: none; border: 3px solid var(--warn); color: var(--warn); background: transparent; font-weight: 700; font-size: 22px; border-radius: 14px; padding: 8px 12px; line-height: 1.2; min-height: 64px; margin: 8px 8px 8px 12px; cursor: pointer; }
.off .t { text-decoration: line-through; color: var(--done); }

.duo { display: -webkit-flex; display: flex; }
.shopbtn { position: relative; -webkit-flex: 1; flex: 1; min-width: 0; display: block; text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; cursor: pointer; min-height: 88px; margin-right: 14px; }
.shopbtn:last-child { margin-right: 0; }
.shopbtn svg { width: 36px; height: 36px; -webkit-flex: none; flex: none; color: var(--accent); margin-right: 12px; }
.shopbtn b { font-size: 24px; }
.shopbtn span { font-size: 20px; color: var(--muted); }
.shopbtn span.soon { color: var(--accent); font-weight: 700; }
.shopbtn .tekst { min-width: 0; }
.shopbtn.metn .tekst { padding-right: 40px; }
.shopbtn .n { position: absolute; top: 10px; right: 10px; background: var(--accent); color: var(--bg); font-weight: 700; font-size: 19px; border-radius: 999px; min-width: 36px; height: 36px; line-height: 36px; text-align: center; padding: 0 8px; }
.duo.n3, .duo.n4 { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.duo.n3 .shopbtn:nth-child(2), .duo.n4 .shopbtn:nth-child(2), .duo.n4 .shopbtn:nth-child(4) { margin-right: 0; }
.duo.n3 .shopbtn:nth-child(3) { -webkit-flex-basis: 100%; flex-basis: 100%; margin: 14px 0 0; min-height: 72px; }
.duo.n4 .shopbtn { -webkit-flex-basis: -webkit-calc(50% - 7px); flex-basis: calc(50% - 7px); }
.duo.n4 .shopbtn:nth-child(n+3) { margin-top: 14px; }
.duo.veel .shopbtn:nth-child(2n) { margin-right: 0; }
.duo.veel .shopbtn:nth-child(2n+1) { margin-right: 14px; }
.foto { text-align: center; background: #000; border-radius: 18px; overflow: hidden; }
/* Foto's op volledig scherm */
.ov.fotoov { padding: 0; background: #0B0F0D; }
.ov.fotoov .sheet { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; padding: 0; background: #0B0F0D; color: #fff; box-shadow: none; overflow: hidden; }
.ov.fotoov .sheet > * { margin: 0; }
.fv { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.fvfoto { position: relative; -webkit-flex: 1; flex: 1; min-height: 0; margin: 14px 14px 0; background-color: #000; background-repeat: no-repeat; background-position: center; background-size: contain; border-radius: 14px; }
.fvpijl { position: absolute; top: 50%; margin-top: -48px; width: 96px; height: 96px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 64px; font-weight: 700; line-height: 88px; text-align: center; cursor: pointer; }
.fvpijl.fvl { left: 8px; }
.fvpijl.fvr { right: 8px; }
.fvonder { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 14px 20px 18px; }
.fvtekst { -webkit-flex: 1; flex: 1; min-width: 0; }
.fvcap { display: block; font-size: 30px; font-weight: 700; line-height: 1.2; }
.fvnr { display: block; font-size: 20px; opacity: .75; margin-top: 2px; }
.fvknop { -webkit-flex: none; flex: none; border: 0; cursor: pointer; font-size: 23px; font-weight: 700; min-height: 64px; padding: 0 22px; border-radius: 16px; background: rgba(255,255,255,.16); color: #fff; margin-left: 12px; white-space: nowrap; }
.fvknop.wit { background: #fff; color: #0B0F0D; }
.foto img { display: block; max-width: 100%; max-height: 480px; margin: 0 auto; }
.med { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.med img { width: 150px; height: 150px; object-fit: cover; border-radius: 18px; background: var(--soft); margin-right: 22px; -webkit-flex: none; flex: none; }
.med h3 { margin: 0 0 8px; }
.med p { margin: 0 0 6px; }

/* Hoek rechtsonder: "? Uitleg" links naast het zonnetje. De rechterkolom houdt daar ruimte vrij, zodat niets eronder valt. */
.hoek { position: absolute; right: 14px; bottom: 8px; z-index: 3; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.uitlegknop { border: 0; background: transparent; padding: 0 2px; height: 64px; cursor: pointer; margin-right: 2px; }
.uitlegknop .pil { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 50px; padding: 0 20px 0 8px; border-radius: 25px; background: var(--accent); color: var(--bg); font-size: 22px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.18); white-space: nowrap; }
.uitlegknop i { font-style: normal; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; background: rgba(255,255,255,.28); margin-right: 8px; font-size: 22px; }
.tandwiel { position: relative; display: block; width: 64px; height: 64px; border: 0; background: transparent; color: var(--muted); opacity: .45; padding: 0; cursor: pointer; }
.tandwiel > svg:last-child { position: absolute; left: 21px; top: 21px; width: 22px; height: 22px; }
.tandwiel .ring { position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; }
.tandwiel .ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 113; stroke-dashoffset: 113; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 20px 20px; transform-origin: 20px 20px; }
.tandwiel.vast { opacity: 1; }
.tandwiel.vast .ring circle { -webkit-transition: stroke-dashoffset 3s linear; transition: stroke-dashoffset 3s linear; stroke-dashoffset: 0; }
.offline { display: none; width: 30px; height: 30px; color: var(--muted); opacity: .6; margin-right: 10px; }
.offline svg { width: 30px; height: 30px; }

.zon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; opacity: 0; background: -webkit-linear-gradient(bottom, #FFB347 0%, #FFD98A 35%, rgba(255,240,200,0) 85%); background: linear-gradient(to top, #FFB347 0%, #FFD98A 35%, rgba(255,240,200,0) 85%); -webkit-transition: opacity 20s; transition: opacity 20s; }

.toast { display: none; position: absolute; left: 10%; right: 10%; bottom: 22px; z-index: 9; pointer-events: none; text-align: center; background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 14px; font-size: 24px; line-height: 1.35; }

/* ---------- Vensters ---------- */
.ov { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; background: rgba(10,15,12,.55); -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding: 20px; }
.ov.startov { background: var(--bg); }
.sheet { background: var(--card); color: var(--ink); border-radius: 26px; padding: 28px; width: 100%; max-width: 760px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.sheet > * { margin-top: 0; margin-bottom: 18px; }
.sheet > *:last-child { margin-bottom: 0; }
.sheet h3 { font-size: 36px; line-height: 1.15; }
.sheet p { font-size: 24px; line-height: 1.45; }
.sheet .small, .sheet .hint { font-size: 21px; color: var(--muted); }
.sheet .hint { margin-top: -8px; }
.sheet .groot { font-size: 32px; font-weight: 700; }
.sheet .fout { color: var(--warn); font-weight: 700; font-size: 21px; }
.sheet .melding-ok { background: var(--ok-soft); border-radius: 14px; padding: 12px 16px; font-weight: 700; }
.step { display: block; font-size: 19px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); margin-bottom: 6px !important; }
.btns { display: -webkit-flex; display: flex; }
.btns .big { -webkit-flex: 1; flex: 1; margin-right: 16px; }
.btns .big:last-child { margin-right: 0; }
.big { border: 0; cursor: pointer; text-align: center; font-size: 26px; font-weight: 700; border-radius: 18px; padding: 20px 14px; min-height: 72px; color: var(--ink); background: var(--soft); }
.big small { display: block; font-size: 20px; font-weight: 400; margin-top: 4px; opacity: .9; }
.big.ok { background: var(--ok); color: var(--ok-ink); }
.big.warn { background: var(--warn); color: var(--warn-ink); }
.big.plain { background: var(--soft); color: var(--ink); }
.keuze .big { display: block; width: 100%; margin-bottom: 16px; text-align: left; padding: 22px 24px; }
.slist { list-style: none; margin: 0; padding: 0; }
.slist li { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 8px 2px; border-top: 1px solid var(--line); }
.slist li:first-child { border-top: 0; }
.slist .t { font-size: 26px; font-weight: 700; -webkit-flex: 1; flex: 1; }
.slist .by { font-size: 19px; color: var(--muted); margin-left: 10px; }
.slist li.done .t { color: var(--done); text-decoration: line-through; }
.invoer { display: -webkit-flex; display: flex; }
.bigin { font-family: inherit; font-size: 26px; width: 100%; border: 3px solid var(--accent); border-radius: 16px; padding: 16px; background: var(--bg); color: var(--ink); -webkit-user-select: text; user-select: text; -webkit-appearance: none; }
.code-in { text-transform: uppercase; letter-spacing: .1em; text-align: center; }
.mic { -webkit-flex: none; flex: none; width: 72px; margin-left: 12px; border: 3px solid var(--accent); border-radius: 16px; background: var(--bg); color: var(--accent); cursor: pointer; }
.mic svg { width: 32px; height: 32px; }
.names { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-right: -12px; }
.names button, .grid button, .quick button { cursor: pointer; border: 3px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink); font-weight: 700; }
.names button { width: -webkit-calc(33.33% - 12px); width: calc(33.33% - 12px); margin: 0 12px 12px 0; padding: 18px 6px; font-size: 24px; min-height: 72px; }
.names button[aria-pressed="true"], .quick button[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-soft); }
.names .ander { border-style: dashed; }
.quick { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.quick button { font-size: 24px; padding: 12px 18px; margin: 0 10px 10px 0; min-height: 64px; }
.grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-right: -12px; }
.grid button { width: -webkit-calc(25% - 12px); width: calc(25% - 12px); margin: 0 12px 12px 0; padding: 14px 6px; font-size: 25px; min-height: 72px; text-align: center; }
.grid button small { display: block; font-size: 19px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.grid.two button { width: -webkit-calc(50% - 12px); width: calc(50% - 12px); }
.kal { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.kal > * { width: 14.28%; text-align: center; padding: 2px; }
.kal .kalkop { font-size: 19px; color: var(--muted); font-weight: 700; padding: 4px 0; }
.kal button { width: -webkit-calc(14.28% - 6px); width: calc(14.28% - 6px); margin: 3px; min-height: 64px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 22px; font-weight: 700; cursor: pointer; }
.kal button small { display: block; font-size: 15px; color: var(--accent); }
.kal span { width: -webkit-calc(14.28% - 6px); width: calc(14.28% - 6px); margin: 3px; }
.toggle { display: block; width: 100%; border: 3px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink); font-size: 24px; font-weight: 700; padding: 14px 16px; min-height: 72px; cursor: pointer; text-align: left; }
.toggle .vakje { width: 40px; height: 40px; border-radius: 10px; border: 3px solid var(--ink); margin-right: 14px; -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.toggle .vakje svg { width: 26px; height: 26px; opacity: 0; }
.toggle[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-soft); }
.toggle[aria-pressed="true"] .vakje { background: var(--ok); border-color: var(--ok); }
.toggle[aria-pressed="true"] .vakje svg { opacity: 1; }
.invite { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.qr { width: 220px; height: 220px; background: #fff; border-radius: 12px; padding: 8px; -webkit-flex: none; flex: none; margin-right: 26px; }
.code { font-size: 44px !important; font-weight: 700; letter-spacing: .12em; }
.startknop { display: block; width: 100%; min-height: 260px; border: 0; border-radius: 30px; background: var(--ok); color: var(--ok-ink); font-size: 44px; font-weight: 700; cursor: pointer; }

/* ---------- Telefoon of staand: alles onder elkaar ---------- */
@media (max-width: 700px), (orientation: portrait) {
  .opa { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 16px 70px; }
  .links { width: auto; margin: 0 0 14px; }
  .klokknop { width: 250px; height: 250px; }
  .dagdeel { font-size: 28px; }
  .datum { font-size: 20px; }
  .rechts { overflow: visible; padding-bottom: 0; }
  .greet { font-size: 23px; }
  .bijschrift, .groethint { max-width: none; }
  .geluidbanner { font-size: 17px; position: fixed; }
  .links { padding-top: 0; }
  .links .greet { font-size: 23px; }
  .wx { min-height: 64px; }
  .wx b { font-size: 24px; }
  .wx svg { width: 36px; height: 36px; }
  .wxkort { font-size: 18px; }
  .wnu b { font-size: 40px; }
  .wnu svg { width: 56px; height: 56px; }
  .sheet .wzin { font-size: 21px; }
  .regen { height: 110px; }
  .staaf { margin: 0 2px; }
  .staaf b { font-size: 14px; }
  .regenlabels span { font-size: 15px; margin: 0 2px; }
  .zeg .t, .appt .t { font-size: 22px; }
  .zeg .w, .zeg .s, .how { font-size: 20px; }
  .check { width: 64px; height: 64px; margin-right: 12px; }
  .rem { font-size: 21px; }
  .bezoekregel { font-size: 20px; }
  .duo { display: block; }
  .shopbtn { width: 100%; margin: 0 0 12px; min-height: 72px; }
  .duo.n3 .shopbtn:nth-child(3), .duo.n4 .shopbtn:nth-child(n+3) { margin: 0 0 12px; }
  .med img { width: 100px; height: 100px; margin-right: 14px; }
  .foto img { max-height: 340px; }
  .fvfoto { margin: 10px 8px 0; }
  .fvonder { -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 10px 12px 14px; }
  .fvtekst { -webkit-flex-basis: 100%; flex-basis: 100%; margin-bottom: 10px; }
  .fvcap { font-size: 23px; }
  .fvknop { -webkit-flex: 1; flex: 1; margin: 0 0 0 10px; font-size: 20px; padding: 0 10px; }
  .fvknop:first-of-type { margin-left: 0; }
  .afspraak, .db { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .sheet { padding: 20px; border-radius: 20px; }
  .sheet h3 { font-size: 27px; }
  .sheet p { font-size: 20px; }
  .btns { display: block; }
  .btns .big { display: block; width: 100%; margin: 0 0 12px; }
  .big { font-size: 22px; }
  .names button { width: -webkit-calc(50% - 12px); width: calc(50% - 12px); font-size: 20px; }
  .grid button { width: -webkit-calc(33.33% - 12px); width: calc(33.33% - 12px); font-size: 20px; }
  .invite { display: block; }
  .qr { margin: 0 0 14px; }
  .code { font-size: 32px !important; }
  .toast { font-size: 20px; left: 4%; right: 4%; }
  .startknop { font-size: 32px; min-height: 200px; }
  /* Telefoon of staand: de lijst stopt boven de hoek met "? Uitleg" en het zonnetje. */
  .opa { bottom: 76px; padding-bottom: 16px; }
  .rechts { margin-bottom: 0; }
  .uitlegknop .pil { font-size: 20px; height: 48px; }
}

@media (max-width: 700px) {
  .fvpijl { width: 72px; height: 72px; margin-top: -36px; font-size: 48px; line-height: 66px; }
}

/* ---------- Liggende telefoon (laag scherm): kleinere klok, alles past ---------- */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 701px) {
  .opa { padding: 10px 14px; }
  .links { width: 300px; margin-right: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-justify-content: flex-start; justify-content: flex-start; }
  .links .greet { font-size: 20px; margin-bottom: 6px; }
  .wxrij { margin-bottom: 6px; }
  .wx b { font-size: 24px; }
  .wx svg { width: 34px; height: 34px; }
  .wxuitleg { font-size: 17px; max-width: 170px; }
  .klokknop { width: 190px; height: 190px; -webkit-flex: none; flex: none; }
  .dagdeel { font-size: 22px; padding: 4px 16px; margin-top: 6px; }
  .datum { font-size: 17px; margin-top: 4px; }
  .groethint, .bijschrift { font-size: 17px; }
  .rechts { margin-bottom: 70px; padding-bottom: 8px; }
  .rechts > * { margin-bottom: 10px; }
  .zeg .t, .appt .t { font-size: 22px; }
  .zeg .w, .zeg .s, .how { font-size: 19px; }
  .rem, .bezoekregel, .weerwaarschuwing { font-size: 20px; }
  .shopbtn { min-height: 72px; padding: 10px 14px; }
  .shopbtn b { font-size: 21px; }
  .shopbtn span { font-size: 18px; }
  .sheet { padding: 16px 20px; }
  .sheet h3 { font-size: 26px; }
  .sheet p { font-size: 20px; }
  .big { font-size: 22px; padding: 12px; min-height: 64px; }
  .uitlegknop .pil { font-size: 20px; height: 46px; }
  /* Foto's: onderbalk smal */
  .fvpijl { width: 80px; height: 80px; margin-top: -40px; font-size: 52px; line-height: 74px; }
  .fvonder { padding: 8px 14px 10px; }
  .fvcap { font-size: 21px; }
  .fvnr { font-size: 16px; }
  .fvknop { font-size: 19px; }
  /* Weervenster compact: knoppen naast elkaar */
  .ov { padding: 8px; }
  .wnu svg { width: 44px; height: 44px; }
  .wnu b { font-size: 34px; }
  .sheet .wsom { font-size: 21px; }
  .sheet .wmax { font-size: 17px; }
  .sheet .wlabel { margin-bottom: 22px !important; font-size: 15px; }
  .sheet > * { margin-bottom: 10px; }
  .regen { height: 64px; }
  .staaf b { font-size: 13px; top: -19px; }
  .regenlabels span { font-size: 14px; }
  .sheet .wzin { font-size: 19px; }
  .sheet .wbron { display: none; }
}

/* ---------- Uitleg (rondleiding) ---------- */
.uitleg { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; }
.uitleg .spot { position: absolute; border-radius: 22px; box-shadow: 0 0 0 4px #FFD54A, 0 0 0 3000px rgba(8,12,10,.72); pointer-events: none; -webkit-transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.uitleg .bub { position: absolute; background: var(--card); color: var(--ink); border-radius: 24px; padding: 22px 24px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.4); -webkit-transition: left .3s ease, top .3s ease; transition: left .3s ease, top .3s ease; }
.uitleg .bub p { margin: 0 0 6px; font-size: 28px; font-weight: 700; line-height: 1.25; }
.uitleg .bub p.klein { font-size: 21px; font-weight: 400; color: var(--muted); margin-bottom: 16px; line-height: 1.35; }
.uitleg .urij { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.uitleg .volgende { border: 0; background: var(--accent); color: var(--bg); font-size: 26px; font-weight: 700; padding: 0 26px; min-height: 64px; border-radius: 18px; white-space: nowrap; cursor: pointer; }
.uitleg .stapnr { margin-left: 14px; font-size: 19px; color: var(--muted); white-space: nowrap; }
.uitleg .stoppen { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 21px; min-height: 64px; padding: 0 6px 0 12px; text-decoration: underline; cursor: pointer; white-space: nowrap; }
@media (max-width: 700px), (orientation: portrait) {
  .uitleg .bub { padding: 18px 18px 14px; }
  .uitleg .bub p { font-size: 23px; }
  .uitleg .bub p.klein { font-size: 19px; margin-bottom: 12px; }
  .uitleg .volgende { font-size: 22px; padding: 0 18px; }
  .uitleg .stapnr { font-size: 17px; margin-left: 10px; }
  .uitleg .stoppen { font-size: 19px; }
}
.uitleg .bub.compact { padding: 12px 16px 8px; border-radius: 18px; }
.uitleg .bub.compact p { font-size: 21px; margin-bottom: 4px; }
.uitleg .bub.compact p.klein { font-size: 17px; margin-bottom: 6px; }
.uitleg .bub.compact .volgende { font-size: 21px; padding: 0 16px; }
.uitleg .bub.compact .stapnr { font-size: 16px; margin-left: 10px; }
.uitleg .bub.compact .stoppen { font-size: 18px; }

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