/* App-laag en telefoonschermen (samengevoegd uit stijl-app.css + stijl-mobiel.css op 12-11-2026).
 * Volgorde is betekenisvol: latere regels winnen. Bronnen: stijl-app.css, stijl-mobiel.css. */

/* ═════ uit stijl-app.css ═════ */
/* ─────────────────────────────────────────────────────────────────────────────
   App-laag (komt als allerlaatste). 16-MARKTLEIDER-PLAN §4, opdracht Younes 11-11-2026:
   "warm gevoel, animerend, wauw op de telefoon". Regels van Younes blijven: altijd licht (donker alleen via de knop),
   geen rood als accent (rood alleen voor fouten), geen eigen knoppen voor tekstgrootte, menu breekt nooit af.
   Beweging staat uit als het toestel "minder beweging" vraagt (zie onderaan en app.css).
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #f7f3ec;              /* warm crème in plaats van kalkwit */
  --vlak-2: #f0ebe2;
  --honing: #e0a23a;          /* warm accent voor voortgang en mijlpalen */
  --honing-zacht: #fbf0da;
  --al-r: 20px;
  --al-schaduw: 0 1px 2px rgba(60, 45, 20, .05), 0 10px 30px -18px rgba(60, 45, 20, .35);
  --al-veer: cubic-bezier(.34, 1.4, .64, 1);
}
:root[data-theme="dark"] { --bg: #111312; --vlak-2: #202422; --honing: #f0c060; --honing-zacht: #3a2e14; --al-schaduw: 0 10px 30px -18px rgba(0, 0, 0, .8); }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── kaarten ── */
.al-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--al-r); box-shadow: var(--al-schaduw); padding: 18px; }
.al-kaart h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 12px; }
.al-kaart h2 .ic { width: 18px; height: 18px; color: var(--delft); }

/* ── Vandaag ── */
.al-vandaag { display: grid; gap: 14px; margin-bottom: 18px; }
.al-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.al-kop h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.05; margin: 2px 0 0; }
.al-datum { margin: 0; color: var(--zacht); font-size: .85rem; font-weight: 500; }
.al-datum::first-letter { text-transform: uppercase; }  /* "Woensdag 11 november": maand klein, zoals in het Nederlands */
.al-gast { font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--honing-zacht); color: color-mix(in srgb, var(--honing) 55%, var(--inkt)); white-space: nowrap; }
.al-held { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .al-held { grid-template-columns: minmax(0, 1fr); } }

.al-teller { position: relative; overflow: hidden; border-radius: var(--al-r); padding: 20px; color: #f6f1e6;
  background: radial-gradient(120% 140% at 100% 0%, #3c6b58 0%, #1e3a31 55%, #172e27 100%); box-shadow: var(--al-schaduw); }
.al-teller::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 199, 92, .35), transparent 65%); pointer-events: none; }
.al-teller-getal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.al-teller-getal b { font-family: var(--f-display); font-size: clamp(2.8rem, 13vw, 3.8rem); line-height: .95; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.al-teller-getal span { font-weight: 600; color: #f2c75c; }
.al-teller p { margin: 10px 0 0; color: #cfdcd4; font-size: .92rem; max-width: 46ch; }
.al-teller-leeg { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.al-teller-leeg b, .al-teller-gevonden b { display: block; color: #fff; font-size: 1.12rem; margin-bottom: 4px; }
.al-teller-leeg span, .al-teller-gevonden span { color: #cfdcd4; font-size: .9rem; display: block; max-width: 46ch; }
.al-teller-gevonden { display: flex; gap: 14px; align-items: center; }
.al-teller-ic .ic { width: 40px; height: 40px; color: #f2c75c; }
.knop.licht { background: #f6f1e6; color: #1e3a31; }
.knop.licht:hover { background: #fff; }

.al-voortgang { display: flex; align-items: center; gap: 14px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--al-r); box-shadow: var(--al-schaduw); padding: 16px 18px; }
.al-voortgang b { display: block; color: var(--inkt); line-height: 1.25; }
.al-voortgang span { color: var(--zacht); font-size: .88rem; }
.al-ring-wrap, .al-kop-ring { position: relative; width: 76px; height: 76px; flex: none; }
.al-ring { width: 100%; height: 100%; }
.al-ring-bak { fill: none; stroke: var(--vlak-2); stroke-width: 8; }
.al-ring-vol { fill: none; stroke: var(--honing); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-uit, ease-out); }
.al-ring-getal { position: absolute; inset: 0; display: grid; place-content: center; font-size: .78rem; color: var(--zacht); text-align: center; }
.al-ring-getal b { font-family: var(--f-display); font-size: 1.35rem; color: var(--inkt); display: inline; }

.al-volgende { border-left: 5px solid var(--delft); }
.al-volgende.let { border-left-color: var(--honing); background: linear-gradient(90deg, var(--honing-zacht), var(--vlak) 60%); }
.al-volgende h2 { font-size: 1.25rem; margin: 6px 0 4px; display: block; }
.al-volgende p { margin: 0 0 14px; color: var(--tekst); }

.al-ronde { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.al-ronde > span:nth-child(2) { flex: 1; min-width: 0; }
.al-ronde b { display: block; color: var(--inkt); }
.al-ronde small { color: var(--zacht); font-size: .86rem; }
.al-ronde-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--delft-zacht); color: var(--delft); flex: none; }
.al-ronde.let .al-ronde-ic { background: var(--honing-zacht); color: color-mix(in srgb, var(--honing) 60%, var(--inkt)); }
.al-ronde > .ic:last-child { width: 18px; height: 18px; color: var(--zacht); }

.al-datums ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.al-datums li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lijn); }
.al-datums li:first-child { border-top: 0; }
.al-dat { width: 46px; flex: none; text-align: center; border-radius: 12px; background: var(--vlak-2); padding: 5px 0 6px; font-size: .7rem; text-transform: uppercase; color: var(--zacht); font-weight: 600; line-height: 1.1; }
.al-dat b { display: block; font-family: var(--f-display); font-size: 1.25rem; color: var(--inkt); }
.al-dat-maand b { font-size: .95rem; padding: 7px 0; }
.al-datums li.let .al-dat { background: var(--honing-zacht); }
.al-dat-t { flex: 1; min-width: 0; font-weight: 600; color: var(--inkt); }
.al-dat-t small { display: block; font-weight: 400; color: var(--zacht); }
.al-datums li > a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--zacht); }
.al-datums li > a .ic { width: 18px; height: 18px; }

.al-stappen-kaart summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.al-stappen-kaart summary::-webkit-details-marker { display: none; }
.al-stappen-kaart summary span { font-weight: 600; color: var(--zacht); }
.al-stappen { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.al-stappen li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.al-stap-t { flex: 1; min-width: 0; }
.al-stap-t b { display: block; color: var(--inkt); font-weight: 600; }
.al-stap-t small { color: var(--zacht); }
.al-stappen li.klaar .al-stap-t b { color: var(--zacht); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--zacht) 50%, transparent); }
.al-vink { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--lijn); display: grid; place-items: center; color: #fff; transition: background .25s, border-color .25s, transform .3s var(--al-veer); }
.al-vink .ic { width: 15px; height: 15px; stroke-width: 2.6; }
li.klaar > .al-vink, li.klaar .al-plan-vink .al-vink { background: var(--kans); border-color: var(--kans); }
.al-stap-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--delft); }
.al-stap-link .ic { width: 18px; height: 18px; }
.al-zelf { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--zacht); min-height: 40px; cursor: pointer; }
.al-zelf input { width: 20px; height: 20px; accent-color: var(--kans); }

/* ── Feest (mijlpaal): de lichtjes in het huisje gaan één voor één aan ── */
.al-feest { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(20, 28, 24, .55); backdrop-filter: blur(4px); animation: al-in .25s ease-out both; }
.al-feest.weg { animation: al-uit .25s ease-in both; }
.al-feest-kaart { width: min(380px, 100%); background: var(--vlak); border-radius: 26px; padding: 26px 22px 22px; text-align: center; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); animation: al-pop .5s var(--al-veer) both; }
.al-feest-kaart h2 { margin: 6px 0 6px; font-size: 1.45rem; }
.al-feest-kaart p { color: var(--zacht); margin: 0 0 18px; }
.al-feest-huis { width: 120px; height: 120px; }
.al-fh-muur { fill: #a3432a; }
.al-fh-raam { fill: #2b3337; animation: al-licht .5s ease-out forwards; }
.al-fh-oog { fill: #f4f4f1; }
.al-fh-grond { stroke: #1e3a31; stroke-width: 4; }
@keyframes al-licht { to { fill: #f2c75c; filter: drop-shadow(0 0 6px rgba(242, 199, 92, .9)); } }
@keyframes al-in { from { opacity: 0; } }
@keyframes al-uit { to { opacity: 0; } }
@keyframes al-pop { from { transform: translateY(24px) scale(.92); opacity: 0; } }

/* ── Weekronde, stappenplannen ── */
.al-ronde-lijst, .al-site-lijst, .al-partners { list-style: none; margin: 0; padding: 0 18px 12px; }
.al-ronde-lijst li, .al-site-lijst li, .al-partners li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.al-ronde-lijst li > div { min-width: 0; flex: 1 1 180px; }
.al-ronde-lijst b, .al-site-lijst b, .al-partners b { display: block; color: var(--inkt); }
.al-ronde-lijst select { min-width: 150px; }
.al-site-lijst span { color: var(--zacht); }
.al-ronde-klaar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.knop.gelukt { background: var(--kans) !important; transform: scale(1.03); transition: transform .3s var(--al-veer), background .2s; }

.al-plan { list-style: none; margin: 0; padding: 4px 18px 14px; display: grid; }
.al-plan li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--lijn); }
.al-plan li:first-child { border-top: 0; }
.al-plan li > div { min-width: 0; }
.al-plan b { color: var(--inkt); }
.al-plan p { margin: 4px 0 6px; color: var(--tekst); }
.al-plan li.klaar b { color: var(--zacht); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--zacht) 50%, transparent); }
.al-plan-vink { position: relative; cursor: pointer; padding-top: 1px; }
.al-plan-vink input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.al-plan-vink input:focus-visible + .al-vink { outline: 3px solid var(--delft); outline-offset: 2px; }
.al-plan-vink input:checked + .al-vink { background: var(--kans); border-color: var(--kans); transform: scale(1.08); }
.al-gevonden-kaart { background: linear-gradient(135deg, var(--honing-zacht), var(--vlak) 70%); }
.al-gevonden-kaart h2 { margin: 0 0 6px; }
.paginakop { position: relative; }
.al-kop-ring { position: absolute; right: 0; top: 0; }
@media (max-width: 560px) { .al-kop-ring { position: relative; right: auto; top: auto; margin-top: 12px; } }

/* ── Woordenboek ── */
.al-zoekwoord { position: sticky; top: 64px; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); padding: 12px 0 8px; margin: 14px 0 6px; }
.al-zoekwoord .invoer { width: 100%; border-radius: 14px; min-height: 48px; font-size: 1rem; }
.al-letters { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.al-letters::-webkit-scrollbar { display: none; }
.al-letters a { flex: none; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--vlak); border: 1px solid var(--lijn); font-weight: 600; color: var(--inkt); text-decoration: none; }
.al-woorden { display: grid; gap: 8px; }
.al-woord { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; scroll-margin-top: 150px; transition: box-shadow .3s, border-color .3s; }
.al-woord summary { list-style: none; cursor: pointer; padding: 14px 16px; display: grid; gap: 2px; }
.al-woord summary::-webkit-details-marker { display: none; }
.al-woord summary b { color: var(--inkt); font-size: 1.05rem; }
.al-woord summary span { color: var(--zacht); font-size: .92rem; }
.al-woord[open] { box-shadow: var(--al-schaduw); }
.al-woord.flits { border-color: var(--honing); box-shadow: 0 0 0 3px var(--honing-zacht); }
.al-woord-in { padding: 0 16px 14px; }
.al-woord-in p { margin: 0 0 8px; }
.al-zie a { display: inline-block; margin: 4px 6px 0 0; padding: 4px 10px; border-radius: 99px; background: var(--delft-zacht); color: var(--delft); font-size: .85rem; font-weight: 600; text-decoration: none; }

/* ── Ik ── */
.al-ik { display: grid; gap: 14px; max-width: 760px; }
.al-ik-kop { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.al-ik-kop > div { flex: 1; min-width: 0; }
.al-ik-kop b { display: block; font-size: 1.15rem; color: var(--inkt); }
.al-ik-kop span { color: var(--zacht); font-size: .9rem; overflow-wrap: anywhere; }
.al-ik-kop > .ic { width: 18px; height: 18px; color: var(--zacht); }
.al-ik-av { width: 56px !important; height: 56px !important; flex: none; display: grid; place-items: center; border-radius: 18px !important; background: var(--delft-zacht); color: var(--delft); font-weight: 700; overflow: hidden; }
.al-ik-av img { width: 100%; height: 100%; object-fit: cover; }
.al-ik-av .ic { width: 26px; height: 26px; }
.al-ik-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.al-waarom { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.al-waarom li { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.al-waarom .ic { width: 16px; height: 16px; color: var(--kans); flex: none; }
.al-rijen { display: grid; }
.al-rij { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 52px; border: 0; border-top: 1px solid var(--lijn); background: none; width: 100%; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.al-rijen > .al-rij:first-child, .al-kaart > .al-rij:first-of-type { border-top: 0; }
.al-rij > span:nth-child(2) { flex: 1; min-width: 0; }
.al-rij b { display: block; color: var(--inkt); font-weight: 600; }
.al-rij small { color: var(--zacht); font-size: .85rem; }
.al-rij > .ic:last-child { width: 16px; height: 16px; color: var(--zacht); }
.al-rij-ic { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--vlak-2); color: var(--delft); }
.al-rij-ic .ic { width: 19px; height: 19px; }
.al-schakel { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--lijn); cursor: pointer; }
.al-kaart > .al-schakel:first-of-type { border-top: 0; }
.al-schakel input { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--vlak-3); position: relative; cursor: pointer; transition: background .2s; margin-top: 2px; }
.al-schakel input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--al-veer); }
.al-schakel input:checked { background: var(--kans); }
.al-schakel input:checked::after { transform: translateX(18px); }
.al-schakel input:focus-visible { outline: 3px solid var(--delft); outline-offset: 2px; }
.al-schakel input:disabled { opacity: .5; }
.al-schakel b { display: block; color: var(--inkt); font-weight: 600; }
.al-schakel small { color: var(--zacht); font-size: .85rem; display: block; }
.al-lijsten .al-schakel:first-child { border-top: 1px solid var(--lijn); }
.al-samen { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.al-samen .veld { flex: 1 1 180px; }
.al-mk-link { display: flex; gap: 8px; margin-top: 8px; }
.al-mk-link .invoer { flex: 1; min-width: 0; font-size: .85rem; }
.al-mk-lijst { list-style: none; margin: 8px 0 0; padding: 0; }
.al-mk-lijst li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.al-mk-lijst li b { display: block; }
.al-mk-lijst small { color: var(--zacht); }
.al-ik-voet { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; box-shadow: none; background: transparent; border-style: dashed; }

/* ── Kleine melding ── */
.al-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 150; max-width: min(92vw, 460px);
  padding: 12px 16px; border-radius: 14px; background: #1e3a31; color: #f6f1e6; font-size: .92rem; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--al-veer); }
.al-toast.aan { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 901px) { .al-toast { bottom: 28px; } }

/* ── Losse pagina's (inloglink, bevestigen, meekijken) ── */
.al-los { min-height: 100vh; min-height: 100dvh; padding: max(24px, env(safe-area-inset-top, 0px)) 16px 40px; display: grid; align-content: start; justify-items: center; gap: 18px;
  background: radial-gradient(120% 60% at 50% 0%, var(--honing-zacht), var(--bg) 70%); }
.al-los-merk { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--inkt); text-decoration: none; margin-top: 12px; }
.al-los-kaart { width: min(560px, 100%); }
.al-los-kaart h1 { font-size: 1.6rem; margin: 0 0 10px; }
.al-los-kaart h2 { font-size: 1rem; margin: 18px 0 6px; }
.al-mk-view { list-style: none; margin: 0; padding: 0; }
.al-mk-view li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.al-mk-view li span { color: var(--zacht); }
.al-mk-view li.let span, .al-mk-view li.let b { color: color-mix(in srgb, var(--honing) 60%, var(--inkt)); }
.al-mk-view li.goed span { color: var(--kans); }

/* ── Inloglink en opt-ins bij registreren/inloggen ── */
.al-of { display: flex; align-items: center; gap: 10px; color: var(--zacht); font-size: .85rem; }
.al-of::before, .al-of::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }
.al-optin { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--vlak-2); }
.al-optin label { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.al-optin input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--kans); }
.al-optin p { margin: 0; font-size: .8rem; color: var(--zacht); }
.al-link-gestuurd { padding: 14px; border-radius: 14px; background: var(--kans-zacht); color: var(--inkt); }

/* ─────────────── Telefoon: de app-ervaring ─────────────── */
@media (max-width: 900px) {
  body { background: var(--bg); }
  .tabbalk { grid-template-columns: repeat(5, minmax(0, 1fr)); background: color-mix(in srgb, var(--vlak) 86%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
    border-top: 1px solid color-mix(in srgb, var(--lijn) 70%, transparent); box-shadow: 0 -10px 30px -22px rgba(40, 30, 10, .5); }
  .tabbalk a { position: relative; padding: 9px 2px 10px; gap: 3px; font-size: .7rem; letter-spacing: .01em; transition: color .2s; -webkit-tap-highlight-color: transparent; }
  .tabbalk a svg { position: relative; z-index: 1; transition: transform .35s var(--al-veer); }
  .tabbalk a span { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tabbalk a::before { content: ""; position: absolute; top: 5px; left: 50%; width: 52px; height: 30px; border-radius: 99px; background: var(--delft-zacht); transform: translateX(-50%) scale(.4); opacity: 0; transition: transform .35s var(--al-veer), opacity .2s; }
  .tabbalk a[aria-current="page"] { color: var(--delft-diep); }
  .tabbalk a[aria-current="page"]::before { transform: translateX(-50%) scale(1); opacity: 1; }
  .tabbalk a[aria-current="page"] svg { transform: translateY(-1px); }
  :root[data-theme="dark"] .tabbalk a[aria-current="page"] { color: var(--delft); }

  .topbalk { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color: transparent; }
  .zoek .invoer { border-radius: 14px; background: var(--vlak); }
  .inhoud { padding-top: 14px; }
  .paneel { border-radius: var(--al-r); box-shadow: var(--al-schaduw); }
  .paneel.stand { overflow: hidden; }
  .paginakop h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.1; }
  .knop { min-height: 46px; border-radius: 14px; }
  .knop.klein { min-height: 40px; border-radius: 12px; }
  .invoer, select.invoer { min-height: 46px; border-radius: 12px; font-size: 1rem; }  /* 16px: iOS zoomt dan niet in */
  .stand-rij { padding-block: 14px; }
  .voetregel { padding-bottom: 8px; }
}

/* ── Tik-feedback (alleen waar je echt tikt) ── */
@media (hover: none) {
  .knop, .al-rij, .al-ronde, .al-datums li > a, .al-stap-link, .stand-link, .tabbalk a, .al-letters a, .al-zie a { transition: transform .15s ease, background-color .2s, color .2s; }
  .knop:active, .al-rij:active, .al-ronde:active, .al-datums li > a:active, .al-stap-link:active, .stand-link:active, .al-letters a:active, .al-zie a:active { transform: scale(.97); }
  .tabbalk a:active svg { transform: scale(.88); }
}

/* ── Binnenkomen: kaarten schuiven één voor één op hun plek ── */
.al-vandaag > *, .al-ik > *, .al-woorden > .al-woord:nth-child(-n+8) { animation: al-op .5s var(--ease-uit, ease-out) both; }
.al-vandaag > :nth-child(2), .al-ik > :nth-child(2) { animation-delay: .05s; }
.al-vandaag > :nth-child(3), .al-ik > :nth-child(3) { animation-delay: .1s; }
.al-vandaag > :nth-child(4), .al-ik > :nth-child(4) { animation-delay: .15s; }
.al-vandaag > :nth-child(5), .al-ik > :nth-child(5) { animation-delay: .2s; }
.al-vandaag > :nth-child(n+6), .al-ik > :nth-child(n+6) { animation-delay: .25s; }
@keyframes al-op { from { opacity: 0; transform: translateY(12px); } }

/* ── Voorkant op de telefoon: warmer, ronder ── */
@media (max-width: 900px) {
  .w-hero { background: radial-gradient(120% 70% at 85% 0%, var(--honing-zacht), transparent 60%), var(--bg); }
  .startkaart { border-radius: 22px; box-shadow: var(--al-schaduw); }
  .sk-prov { border-radius: 99px; min-height: 40px; transition: transform .15s, background-color .2s, color .2s; }
  .sk-prov[aria-pressed="true"] { transform: scale(1.03); }
  .pub-kop, .pub-nav { backdrop-filter: blur(10px); }
}

/* ── Minder beweging: niets schuift, niets veert ── */
@media (prefers-reduced-motion: reduce) {
  .al-vandaag > *, .al-ik > *, .al-woord, .al-feest, .al-feest-kaart { animation: none !important; }
  .al-fh-raam { animation: none; fill: #f2c75c; }
  .al-ring-vol, .al-vink, .al-schakel input::after, .tabbalk a::before, .tabbalk a svg, .al-toast { transition: none !important; }
}

/* ═════ uit stijl-mobiel.css ═════ */
/* ─────────────────────────────────────────────────────────────────────────────
   Telefoonschermen (app/mobiel.js). Komt na stijl-app.css. Alleen klassen met m- en de bovenbalk op de telefoon.
   Ontwerpregels Younes: altijd licht, geen rood als accent (alleen bij fouten/verwijderen), beweging volgt het toestel.
   ───────────────────────────────────────────────────────────────────────────── */
:root { --m-veer: cubic-bezier(.32, .72, 0, 1); --m-zacht: cubic-bezier(.2, .8, .2, 1); --m-r: 18px; }

/* ── Bovenbalk op de telefoon: logo, kleine titel bij scrollen, zoekknop ── */
.m-klein-titel, .m-zoekknop { display: none; }
@media (max-width: 900px) {
  /* Wat tijdens een overgang even opzij schuift, mag de pagina nooit breder maken (anders zoomt de telefoon uit). */
  html, body, .hoofd, .inhoud, .m-pub { overflow-x: clip; }
  .topbalk .zoek, .topbalk .kruimel { display: none !important; }
  .topbalk-in { position: relative; min-height: 54px; justify-content: space-between; }
  .m-klein-titel { display: block; position: absolute; left: 64px; right: 64px; text-align: center; font-weight: 650; font-size: 1rem; color: var(--inkt);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--m-zacht); pointer-events: none; }
  .topbalk.m-titel-aan .m-klein-titel { opacity: 1; transform: none; }
  .topbalk.m-titel-aan { border-bottom-color: color-mix(in srgb, var(--lijn) 80%, transparent); }
  .m-zoekknop { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-zoekknop .ic { width: 20px; height: 20px; }
  .inhoud.m-scherm { padding-top: 6px; }

  /* Overgangen tussen schermen */
  .inhoud.view[data-overgang="rechts"] { animation: m-van-rechts .38s var(--m-veer) both; }
  .inhoud.view[data-overgang="links"] { animation: m-van-links .38s var(--m-veer) both; }
  .inhoud.view[data-overgang="op"] { animation: m-op .4s var(--m-veer) both; }
  .inhoud.view[data-overgang="geen"] { animation: none; }
}
@keyframes m-van-rechts { from { opacity: 0; transform: translateX(28px); } }
@keyframes m-van-links { from { opacity: 0; transform: translateX(-28px); } }
@keyframes m-op { from { opacity: 0; transform: translateY(10px); } }
.m-in-rechts { animation: m-van-rechts .32s var(--m-veer) both; }
.m-in-links { animation: m-van-links .32s var(--m-veer) both; }

/* ── Kop met grote titel ── */
.m-kop { padding: 8px 2px 14px; }
.m-kop-rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.m-titel { font-family: var(--f-display); font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1; letter-spacing: -.02em; margin: 0; color: var(--inkt); }
.m-sub { margin: 8px 0 0; color: var(--zacht); font-size: .95rem; line-height: 1.45; }
.m-h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 10px; color: var(--inkt); }
.m-h2-los { margin: 20px 4px 10px; }
.m-noot { color: var(--zacht); font-size: .85rem; line-height: 1.45; margin: 10px 4px 0; }
.m-noot a { color: var(--delft); }
.m-hint { background: var(--honing-zacht); border-radius: 12px; padding: 10px 12px; font-size: .88rem; margin: 0 0 12px; }
.m-fout { color: var(--nee); font-size: .88rem; min-height: 1em; margin: 6px 0 0; }
.m-label { display: block; font-size: .85rem; font-weight: 600; color: var(--zacht); margin-bottom: 8px; }
.m-tel { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: var(--vlak-2); color: var(--zacht); font-size: .72rem; font-weight: 700; }

/* ── Kaarten ── */
.m-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--m-r); box-shadow: var(--al-schaduw); padding: 16px; margin-bottom: 12px; }
.m-kaart-plat { background: var(--vlak-2); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.m-kaart-plat > b { display: block; color: var(--inkt); }

/* ── Schakelaar (segmenten) met schuivende pil ── */
.m-segment { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px; margin: 0 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--vlak-2) 90%, var(--lijn)); }
.m-seg-pil { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 11px; background: var(--vlak); box-shadow: 0 1px 3px rgba(40, 30, 10, .12), 0 4px 12px -6px rgba(40, 30, 10, .25);
  transform: translateX(calc(var(--i) * 100%)); transition: transform .42s var(--m-veer); }
.m-segment button { position: relative; z-index: 1; min-height: 40px; border: 0; background: none; font: inherit; font-weight: 600; font-size: .84rem; letter-spacing: -.005em; color: var(--zacht); cursor: pointer; border-radius: 11px; transition: color .2s; -webkit-tap-highlight-color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.m-segment button[aria-selected="true"] { color: var(--inkt); }
.m-segment button[aria-selected="true"] .m-tel { background: var(--delft-zacht); color: var(--delft); }
.m-segment button:focus-visible { outline: 3px solid var(--delft); outline-offset: -3px; }

/* ── Cijfers in één rij ── */
.m-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.m-stats > div { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; padding: 12px 10px; text-align: center; box-shadow: var(--al-schaduw); }
.m-stats b { display: block; font-family: var(--f-display); font-size: 1.35rem; color: var(--inkt); line-height: 1.1; white-space: nowrap; }
.m-stats span { font-size: .74rem; color: var(--zacht); line-height: 1.2; display: block; margin-top: 2px; }
.m-stats > .let { background: var(--honing-zacht); border-color: color-mix(in srgb, var(--honing) 35%, var(--lijn)); }

/* ── Lijsten met rijen ── */
.m-lijst { list-style: none; margin: 0 0 12px; padding: 0; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--m-r); box-shadow: var(--al-schaduw); overflow: hidden; }
.m-lijst > li + li { border-top: 1px solid var(--lijn); }
.m-rij { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
.m-rij:active { background: var(--vlak-2); }
.m-rij .monogram { width: 40px; height: 40px; flex: none; border-radius: 12px !important; font-size: .8rem; }
.m-rij-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.m-rij-t b { color: var(--inkt); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.m-rij-t small { color: var(--zacht); font-size: .84rem; line-height: 1.3; }
.m-rij-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--vlak-2); color: var(--delft); }
.m-rij-ic .ic { width: 20px; height: 20px; }
.m-rij > .ic:last-child, .m-chev { width: 18px; height: 18px; flex: none; color: color-mix(in srgb, var(--zacht) 70%, transparent); }
.m-pil { flex: none; font-size: .74rem; font-weight: 650; padding: 5px 9px; border-radius: 99px; background: var(--vlak-2); color: var(--zacht); white-space: nowrap; }
.m-pil.let { background: var(--honing-zacht); color: color-mix(in srgb, var(--honing) 55%, var(--inkt)); }
.m-pil.goed { background: var(--kans-zacht); color: var(--kans); }
.m-pil .ic { width: 14px; height: 14px; vertical-align: -2px; }
.m-nieuw { animation: m-nieuw 1.6s var(--m-zacht) both; }
@keyframes m-nieuw { 0% { background: var(--honing-zacht); transform: scale(.97); } 30% { transform: none; } 100% { background: transparent; } }

/* Lege staat */
.m-leeg { text-align: center; padding: 28px 18px; display: grid; justify-items: center; gap: 8px; background: var(--vlak); border: 1px dashed var(--lijn); border-radius: var(--m-r); margin-bottom: 12px; list-style: none; }
.m-leeg b { color: var(--inkt); font-size: 1.05rem; }
.m-leeg p { margin: 0; color: var(--zacht); max-width: 34ch; }
.m-leeg .stilleven { width: 110px; height: auto; margin-bottom: 4px; }

/* Acties onder een lijst */
.m-acties { display: grid; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--m-r); box-shadow: var(--al-schaduw); overflow: hidden; margin-bottom: 12px; }
.m-actie { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 0; background: none; width: 100%; font: inherit; color: var(--inkt); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-actie + .m-actie { border-top: 1px solid var(--lijn); }
.m-actie:active { background: var(--vlak-2); }
.m-actie > .ic:first-child { width: 20px; height: 20px; color: var(--delft); flex: none; }
.m-actie > span { flex: 1; min-width: 0; }
.m-kaart .m-actie { padding-inline: 0; }

/* Zwevende knop onderaan */
.m-fab-plek { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; justify-content: center; padding: 8px 0 4px; pointer-events: none; }
.m-fab { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--delft-diep); color: #f6f1e6; font: inherit; font-weight: 650; font-size: 1rem;
  box-shadow: 0 10px 24px -8px rgba(20, 40, 30, .55), 0 2px 6px rgba(20, 40, 30, .2); cursor: pointer; transition: transform .2s var(--m-veer); -webkit-tap-highlight-color: transparent; }
.m-fab .ic { width: 20px; height: 20px; }
.m-fab:active { transform: scale(.95); }

/* Uitklapblok */
.m-uitklap { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--m-r); box-shadow: var(--al-schaduw); margin-bottom: 10px; overflow: hidden; }
.m-uitklap > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 16px; font-weight: 650; color: var(--inkt); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-uitklap > summary::-webkit-details-marker { display: none; }
.m-uitklap > summary .m-chev { margin-left: auto; transition: transform .3s var(--m-veer); }
.m-uitklap[open] > summary .m-chev { transform: rotate(90deg); }
.m-uitklap[open] > :not(summary) { animation: m-op .3s var(--m-zacht) both; }
.m-uitklap-in { padding: 0 16px 16px; }
.m-uitklap > .m-lijst { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--lijn); margin: 0; }

/* Per site: hoeveel reacties lopen er */
.m-sites-balk { display: grid; gap: 12px; }
.m-sitebalk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; }
.m-sitebalk b { color: var(--inkt); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sitebalk span { font-size: .85rem; color: var(--zacht); font-weight: 600; }
.m-sitebalk i, .m-meter { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--vlak-2); position: relative; overflow: hidden; display: block; }
.m-sitebalk i::after, .m-meter i { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); border-radius: 99px; background: var(--kans); transition: width .6s var(--m-zacht); }
.m-meter i { display: block; }
.m-sitebalk i.vol::after { background: var(--honing); }
.m-sitebalk i.te-veel::after { background: var(--nee); }
.m-sitebalk small { grid-column: 1 / -1; color: var(--zacht); font-size: .8rem; }

/* ── Veegpaneel ── */
html.m-blad-open, html.m-blad-open body { overflow: hidden; }
.m-blad-achter { position: fixed; inset: 0; z-index: 180; background: rgba(18, 24, 20, .42); opacity: 0; transition: opacity .32s ease; -webkit-tap-highlight-color: transparent; }
.m-blad-achter.aan { opacity: 1; }
.m-blad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 181; display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh; background: var(--vlak); border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .45); transform: translateY(105%); transition: transform .42s var(--m-veer); will-change: transform; touch-action: pan-y; }
.m-blad.hoog { height: 92vh; height: 92dvh; max-height: none; }
.m-blad.aan { transform: translateY(0); }
.m-blad.sleep { transition: none; }
@media (min-width: 901px) { .m-blad { left: 50%; right: auto; width: 520px; margin-left: -260px; } }
.m-blad-greep { display: flex; justify-content: center; padding: 8px 0 2px; cursor: grab; touch-action: none; }
.m-blad-greep span { width: 40px; height: 5px; border-radius: 99px; background: var(--vlak-3); }
.m-blad-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px 10px 20px; touch-action: none; }
.m-blad-kop h2 { margin: 0; font-size: 1.2rem; color: var(--inkt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-blad-dicht { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; background: var(--vlak-2); color: var(--zacht); display: grid; place-items: center; cursor: pointer; }
.m-blad-dicht .ic { width: 18px; height: 18px; }
.m-blad-in { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(24px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; flex: 1; }
.m-blad-in > :first-child { margin-top: 0; }
.m-blad-sub { color: var(--zacht); margin: 0 0 10px; }
.m-blad-held { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.m-blad-held .monogram { width: 48px; height: 48px; border-radius: 14px !important; flex: none; }
.m-blad-held b { display: block; color: var(--inkt); font-size: 1.05rem; }
.m-blad-held small { color: var(--zacht); }
.m-blad .m-lijst { box-shadow: none; }

/* Feiten in tegels */
.m-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.m-feiten > div { background: var(--vlak-2); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.m-feiten span { display: block; font-size: .76rem; color: var(--zacht); font-weight: 600; }
.m-feiten b { display: block; color: var(--inkt); font-size: 1rem; margin-top: 2px; overflow-wrap: anywhere; }
.m-feiten b small { color: var(--zacht); font-weight: 500; }
.m-feiten-4 > div { background: var(--vlak); border: 1px solid var(--lijn); box-shadow: var(--al-schaduw); }

/* Velden */
.m-veld { display: grid; gap: 6px; margin: 0 0 12px; }
.m-veld > span { font-size: .86rem; font-weight: 600; color: var(--zacht); }
.m-veld .invoer, .m-veld select { width: 100%; }
.m-veld-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--lijn); }
.m-veld-rij > span { font-weight: 600; color: var(--inkt); }
.m-veld.m-veld-rij { border: 0; min-height: 0; }
.m-veld.m-veld-rij .invoer { width: 110px; text-align: center; }
.m-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.m-knoppen { display: grid; gap: 8px; margin: 14px 0 6px; }
.m-knoppen .knop { width: 100%; justify-content: center; }
.m-gevaar { color: var(--nee) !important; }
.m-zoekveld { display: flex; align-items: center; gap: 8px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 0 12px; margin-bottom: 10px; }
.m-zoekveld .ic { width: 18px; height: 18px; color: var(--zacht); flex: none; }
.m-zoekveld .invoer { border: 0 !important; background: none !important; box-shadow: none !important; padding-inline: 0; flex: 1; min-width: 0; outline: none; }
.m-zoekveld:focus-within { border-color: var(--delft); box-shadow: 0 0 0 3px var(--delft-zacht); }
.m-blad .m-zoekveld { background: var(--vlak-2); border-color: transparent; }

/* Chips */
.m-chips { display: flex; gap: 8px; }
.m-chips.m-scroll { overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 8px; scroll-snap-type: x proximity; }
.m-blad .m-chips.m-scroll { margin-inline: -20px; padding-inline: 20px; }
.m-chips.m-scroll::-webkit-scrollbar { display: none; }
.m-chips.m-wrap { flex-wrap: wrap; }
.m-chip { flex: none; scroll-snap-align: start; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--m-veer); -webkit-tap-highlight-color: transparent; }
.m-chip[aria-pressed="true"] { background: var(--delft-diep); border-color: var(--delft-diep); color: #f6f1e6; }
.m-chip:active { transform: scale(.94); }
.m-mini-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.m-mini-chips span { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--vlak-2); color: var(--zacht); }
.m-mini-chips span.goed { background: var(--kans-zacht); color: var(--kans); }

/* Keuzelijst (stand van een reactie) */
.m-keuzes { display: grid; gap: 6px; margin: 12px 0; }
.m-keuzes button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid var(--lijn); border-radius: 14px; background: var(--vlak); font: inherit; font-weight: 600; color: var(--inkt); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.m-keuzes button[aria-checked="true"] { border-color: var(--kans); background: var(--kans-zacht); }
.m-keuzes button[aria-checked="true"] .al-vink { background: var(--kans); border-color: var(--kans); transform: scale(1.08); }

/* ── Kansen ── */
.m-uitkomst { position: relative; overflow: hidden; border-radius: 22px; padding: 18px; margin-bottom: 14px; color: #f6f1e6; box-shadow: var(--al-schaduw); transition: background .5s; }
.m-uitkomst.ja { background: radial-gradient(130% 120% at 100% 0%, #3c6b58 0%, #1e3a31 60%, #172e27 100%); }
.m-uitkomst.nee { background: radial-gradient(130% 120% at 100% 0%, #b98a3a 0%, #7a5a22 60%, #5d4419 100%); }
.m-uitkomst::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 199, 92, .3), transparent 65%); pointer-events: none; }
.m-uit-kop { display: flex; gap: 10px; align-items: center; font-weight: 650; font-size: 1rem; }
.m-uit-ic { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
.m-uit-ic .ic { width: 17px; height: 17px; }
.m-uit-getal { margin: 14px 0 12px; display: grid; }
.m-uit-getal small { font-size: .86rem; color: #d7e3db; }
.m-uit-getal b { font-family: var(--f-display); font-size: clamp(2.4rem, 12vw, 3.2rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.m-schaal { position: relative; padding-top: 6px; }
.m-schaal-baan { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .15); }
.m-schaal-baan i:nth-child(1) { background: #8fd3ad; }
.m-schaal-baan i:nth-child(2) { background: #f2c75c; }
.m-schaal-baan i:nth-child(3) { flex: 1; background: rgba(255, 255, 255, .22); }
.m-schaal-pin { position: absolute; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: left .35s var(--m-veer); }
.m-uit-zin { margin: 14px 0 0; font-size: .88rem; color: #d7e3db; line-height: 1.45; }
.m-uit-zin b { color: #fff; }
.m-stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--vlak-2); border-radius: 14px; padding: 4px; }
.m-stepper button { width: 40px; height: 40px; border: 0; border-radius: 11px; background: var(--vlak); color: var(--inkt); font-size: 1.3rem; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.m-stepper button:active { transform: scale(.9); }
.m-stepper output { min-width: 40px; text-align: center; font-family: var(--f-display); font-size: 1.25rem; color: var(--inkt); font-variant-numeric: tabular-nums; }
output.tik { animation: m-tik .3s var(--m-veer); }
@keyframes m-tik { 40% { transform: scale(1.25); } }
.m-inkomen { padding: 14px 0 6px; border-bottom: 1px solid var(--lijn); margin-bottom: 4px; }
.m-inkomen > label { display: block; font-weight: 600; color: var(--inkt); }
.m-bedrag { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 4px; font-family: var(--f-display); font-size: 2rem; color: var(--inkt); }
.m-bedrag > span { color: var(--zacht); font-size: 1.4rem; }
.m-bedrag input, .m-bedrag output { font: inherit; color: inherit; border: 0; background: none; width: 100%; min-width: 0; padding: 0; outline: none; font-variant-numeric: tabular-nums; }
.m-bedrag input:focus { border-bottom: 2px solid var(--delft); }
.m-bedrag.klein { font-size: 1.5rem; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 8px 14px; margin: 0; }
.m-bedrag.klein:focus-within { border-color: var(--delft); box-shadow: 0 0 0 3px var(--delft-zacht); }
.m-bedrag.klein input:focus { border: 0; }
.m-schuif { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; margin: 4px 0; cursor: pointer; }
.m-schuif::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--kans), var(--honing)); }
.m-schuif::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--kans), var(--honing)); }
.m-schuif::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 2px solid var(--delft-diep); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.m-schuif::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--delft-diep); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.m-schuif:focus-visible { outline: 3px solid var(--delft); outline-offset: 2px; border-radius: 99px; }
.m-veld-blok { padding-top: 14px; }
.m-kaart .al-schakel { border-top: 0; border-bottom: 1px solid var(--lijn); padding: 14px 0; }
.m-swipe { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px 4px; padding: 4px 16px 12px; }
.m-swipe::-webkit-scrollbar { display: none; }
.m-swipe-kaart { flex: 0 0 72%; scroll-snap-align: start; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--m-r); padding: 16px; box-shadow: var(--al-schaduw); display: grid; gap: 4px; }
.m-swipe-kaart span { font-size: .8rem; font-weight: 650; color: var(--zacht); text-transform: uppercase; letter-spacing: .03em; }
.m-swipe-kaart b { font-family: var(--f-display); font-size: 1.7rem; color: var(--inkt); }
.m-swipe-kaart small { color: var(--zacht); }
.m-swipe-kaart.actief { border-color: var(--kans); background: linear-gradient(160deg, var(--kans-zacht), var(--vlak) 70%); }
.m-groot-getal { margin: 0 0 6px; color: var(--zacht); }
.m-groot-getal b { font-family: var(--f-display); font-size: 2rem; color: var(--inkt); margin-right: 4px; }
.m-link-kaart { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.m-link-kaart > span:nth-child(2) { flex: 1; min-width: 0; }
.m-link-kaart b { display: block; color: var(--inkt); }
.m-link-kaart small { color: var(--zacht); font-size: .85rem; }
.m-melding { display: flex; gap: 10px; align-items: flex-start; background: var(--delft-zacht); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.m-melding > .ic { width: 20px; height: 20px; flex: none; color: var(--delft); margin-top: 1px; }
.m-melding p { margin: 0; font-size: .9rem; line-height: 1.45; }
.m-melding.goed { background: var(--kans-zacht); }
.m-melding.goed > .ic { color: var(--kans); }
.m-bron { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--zacht); margin: 6px 4px 0; }
.m-bron .ic { width: 15px; height: 15px; }

/* ── Klaar ── */
.m-klaar-kop { display: flex; align-items: center; gap: 14px; }
.m-klaar-kop b { display: block; color: var(--inkt); }
.m-klaar-kop small { color: var(--zacht); font-size: .85rem; }
.m-ring { position: relative; width: 64px; height: 64px; flex: none; }
.m-ring svg { width: 100%; height: 100%; }
.m-ring > b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.05rem; }
.m-ring-bak { fill: none; stroke: var(--vlak-2); stroke-width: 7; }
.m-ring-vol { fill: none; stroke: var(--kans); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s var(--m-zacht); }
.m-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.m-tegel { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; min-height: 124px; padding: 14px; border-radius: var(--m-r); border: 1px solid var(--lijn); background: var(--vlak); box-shadow: var(--al-schaduw);
  font: inherit; color: inherit; cursor: pointer; transition: transform .2s var(--m-veer); -webkit-tap-highlight-color: transparent; }
.m-tegel:active { transform: scale(.96); }
.m-tegel b { color: var(--inkt); font-size: .95rem; line-height: 1.2; hyphens: manual; }
.m-tegel small { color: var(--zacht); font-size: .8rem; line-height: 1.3; }
.m-tegel-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--vlak-2); color: var(--zacht); margin-bottom: 6px; }
.m-tegel-ic .ic { width: 20px; height: 20px; }
.m-tegel::after { content: ""; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--vlak-3); }
.m-tegel.goed .m-tegel-ic { background: var(--kans-zacht); color: var(--kans); }
.m-tegel.goed::after { background: var(--kans); }
.m-tegel.goed small { color: var(--kans); font-weight: 600; }
.m-tegel.let .m-tegel-ic { background: var(--honing-zacht); color: color-mix(in srgb, var(--honing) 60%, var(--inkt)); }
.m-tegel.let::after { background: var(--honing); }
.m-checklijst { display: grid; gap: 4px; }
.m-checklijst label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--lijn); font-size: .92rem; cursor: pointer; }
.m-checklijst label:first-child { border-top: 0; }
.m-checklijst input { width: 22px; height: 22px; flex: none; accent-color: var(--kans); margin-top: 1px; }
.m-stand { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--vlak-2); font-weight: 600; font-size: .9rem; margin-bottom: 14px; }
.m-stand span { width: 10px; height: 10px; border-radius: 50%; background: var(--vlak-3); flex: none; }
.m-stand.goed { background: var(--kans-zacht); color: var(--kans); }
.m-stand.goed span { background: var(--kans); }
.m-stand.let { background: var(--honing-zacht); }
.m-stand.let span { background: var(--honing); }

/* ── Woningsites ── */
.m-plak { position: sticky; top: 54px; z-index: 5; margin: 0 -16px 8px; padding: 8px 16px 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.m-plak .m-zoekveld { margin-bottom: 8px; }
.m-site { align-items: flex-start; padding-block: 12px; }
.m-site .monogram { margin-top: 2px; }
.m-prijs { flex: none; text-align: right; display: grid; }
.m-prijs b { color: var(--inkt); font-family: var(--f-display); font-size: 1.05rem; }
.m-prijs small { color: var(--zacht); font-size: .7rem; }
.m-site > .m-chev { align-self: center; }
.m-terug { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; color: var(--delft); font-weight: 600; text-decoration: none; margin: 0 0 4px -6px; padding-right: 8px; }
.m-terug .ic { width: 22px; height: 22px; }
.m-site-held { display: grid; justify-items: start; gap: 10px; padding: 4px 2px 6px; }
.m-mono-groot { width: 56px !important; height: 56px !important; border-radius: 16px !important; font-size: 1rem !important; }
.m-site-held .m-titel { font-size: clamp(1.7rem, 8vw, 2.2rem); }
.m-regel { padding: 10px 0; border-top: 1px solid var(--lijn); }
.m-regel:first-child { border-top: 0; padding-top: 0; }
.m-regel p { margin: 0 0 6px; }
.m-functies { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.m-functies li { display: flex; align-items: center; gap: 8px; color: var(--zacht); }
.m-functies li .ic { width: 18px; height: 18px; flex: none; }
.m-functies li.aan { color: var(--inkt); }
.m-functies li.aan .ic { color: var(--kans); }
.m-open { margin: 0; padding-left: 18px; color: var(--tekst); display: grid; gap: 6px; }
.m-uitklap-in .grafiek { margin: 0 -6px; }

/* ── Woningwacht ── */
.m-form .knop { width: 100%; justify-content: center; }
.m-pc-uit:not(:empty) { margin-top: 12px; animation: m-op .35s var(--m-veer) both; }
.m-stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vlak-3); margin-right: 6px; vertical-align: 1px; }
.m-stip.goed { background: var(--kans); }
.m-stappen { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 10px; }
.m-stappen b { display: block; color: var(--inkt); }
.m-stappen span { color: var(--zacht); font-size: .9rem; }

/* ── Voorkant ── */
.m-pub { min-height: 100vh; min-height: 100dvh; background: var(--bg); padding-bottom: env(safe-area-inset-bottom, 0px); }
.m-pub-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.m-pub-merk { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; color: var(--inkt); text-decoration: none; }
.m-pub-knop { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 99px; background: var(--delft-diep); color: #f6f1e6; font-weight: 650; font-size: .92rem; text-decoration: none; }
.m-pub > section { margin: 0 16px 18px; }
.m-held { text-align: center; padding: 18px 8px 6px; background: radial-gradient(90% 70% at 50% 20%, var(--honing-zacht), transparent 70%); }
.m-held-huis { width: 112px; height: 112px; margin: 0 auto 8px; display: block; animation: m-zweef 5s ease-in-out infinite; }
@keyframes m-zweef { 50% { transform: translateY(-5px); } }
.m-held h1 { font-family: var(--f-display); font-size: clamp(2rem, 9.5vw, 2.6rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 10px; color: var(--inkt); }
.m-held p { margin: 0 auto; max-width: 30ch; color: var(--tekst); font-size: 1.02rem; line-height: 1.45; }
.m-check { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 24px; box-shadow: var(--al-schaduw); overflow: hidden; }
.m-check-kop { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; }
.m-check-kop h2 { margin: 0; font-size: 1.15rem; }
.m-stippen { display: flex; gap: 6px; }
.m-stippen i { width: 7px; height: 7px; border-radius: 99px; background: var(--vlak-3); transition: width .35s var(--m-veer), background-color .3s; }
.m-stippen i.aan { width: 22px; background: var(--delft); }
.m-check-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.m-check-rail::-webkit-scrollbar { display: none; }
.m-check-kaart { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 14px 18px 18px; display: grid; gap: 12px; align-content: start; }
.m-check-kaart h3 { margin: 0; font-size: 1.35rem; color: var(--inkt); }
.m-stapnr { font-size: .78rem; font-weight: 700; color: var(--delft); text-transform: uppercase; letter-spacing: .04em; }
.m-volgende, .m-check-uit .knop { width: 100%; justify-content: center; margin-top: 4px; }
.m-uit-rij { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--vlak-2); margin-bottom: 8px; }
.m-uit-rij b { font-family: var(--f-display); font-size: 1.8rem; color: var(--inkt); line-height: 1.05; }
.m-uit-rij span { color: var(--zacht); font-size: .9rem; }
.m-pijlers h2, .m-niet h2, .m-cta h2 { font-size: 1.2rem; margin: 0 0 10px; color: var(--inkt); }
.m-pijlers .m-swipe { margin-inline: -16px; }
.m-pijler { flex: 0 0 64%; scroll-snap-align: start; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--m-r); background: var(--vlak); border: 1px solid var(--lijn); box-shadow: var(--al-schaduw);
  text-decoration: none; color: inherit; transition: transform .2s var(--m-veer); }
.m-pijler:active { transform: scale(.97); }
.m-pijler b { color: var(--inkt); font-size: 1.05rem; }
.m-pijler small { color: var(--zacht); font-size: .88rem; line-height: 1.4; }
.m-feit { background: var(--delft-diep); color: #e7efe9; border-radius: 22px; padding: 18px; }
.m-feit b { font-family: var(--f-display); font-size: 3rem; color: #f2c75c; line-height: 1; }
.m-feit p { margin: 6px 0 8px; line-height: 1.45; }
.m-feit small { color: #a9bdb2; font-size: .78rem; }
.m-niet ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.m-niet li { display: flex; gap: 10px; align-items: center; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px; font-weight: 600; color: var(--inkt); }
.m-niet li .ic { width: 18px; height: 18px; color: var(--kans); flex: none; }
.m-cta { text-align: center; background: linear-gradient(160deg, var(--honing-zacht), var(--vlak) 70%); border: 1px solid var(--lijn); border-radius: 22px; padding: 20px 18px; display: grid; gap: 10px; }
.m-cta p { margin: 0; color: var(--tekst); }
.m-cta .knop { justify-content: center; }
.m-tekstlink { color: var(--delft); font-weight: 600; }
.m-pub-voet { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 18px 16px 28px; border-top: 1px solid var(--lijn); font-size: .88rem; }
.m-pub-voet a { color: var(--zacht); }

/* ── Zoeken ── */
.m-z-groep { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); margin: 16px 4px 8px; }

/* ── Minder beweging ── */
@media (prefers-reduced-motion: reduce) {
  .m-blad, .m-blad-achter, .m-seg-pil, .m-schaal-pin, .m-ring-vol, .m-klein-titel, .m-stippen i, .m-sitebalk i::after { transition: none !important; }
  .m-held-huis, .m-nieuw, output.tik, .m-in-rechts, .m-in-links, .m-pc-uit:not(:empty) { animation: none !important; }
}

/* Vandaag op de telefoon: het oude blok "Hoe je ervoor staat" is dubbel (alles staat al op Vandaag of in een eigen tab) */
@media (max-width: 900px) { #view .al-vandaag ~ .paneel.stand, #view .al-vandaag ~ .ov-bron { display: none; } }

/* Woonlasten */
.m-lasten-titel { font-size: clamp(1.6rem, 7.5vw, 2rem) !important; line-height: 1.1 !important; }
.m-lasten-held .knop.licht { justify-content: center; width: 100%; }
.m-tijdlijn .al-dat { width: 50px; flex: none; text-align: center; border-radius: 12px; background: var(--vlak-2); padding: 8px 0; text-transform: uppercase; }
.m-tijdlijn .al-dat b { font-size: .95rem; color: var(--inkt); }
.m-tijdlijn .m-dat-nu { background: var(--honing-zacht); }
.m-tijdlijn li.nu .m-rij-t b { color: var(--inkt); }
a.m-tegel { text-decoration: none; min-height: 112px; }

/* Uitklapbare onderwerpen (Hulp en routes, woonlasten-check) */
section.wl-kaart[data-m-vouw] { padding: 0 !important; overflow: hidden; border-radius: var(--m-r); }
section.wl-kaart[data-m-vouw] > h2 { margin: 0 !important; padding: 0 !important; font-size: 1.05rem; }
.m-vouw-knop { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 0 16px; border: 0; background: none; font: inherit; font-weight: 650; color: var(--inkt); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-vouw-knop > .ic:first-child { width: 20px; height: 20px; color: var(--delft); flex: none; }
.m-vouw-knop .m-chev { margin-left: auto; transition: transform .3s var(--m-veer); }
.m-vouw-knop[aria-expanded="true"] .m-chev { transform: rotate(90deg); }
.m-vouw-in { padding: 0 16px 16px; }
.m-in-op { animation: m-op .32s var(--m-zacht) both; }
a.m-tegel::after { display: none; }
@media (max-width: 900px) {
  .wl-snel { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 8px; margin-inline: -16px; padding: 4px 16px 10px; }
  .wl-snel::-webkit-scrollbar { display: none; }
  .wl-snel a { flex: none; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .m-vouw-knop .m-chev, .m-in-op { transition: none !important; animation: none !important; } }

/* ── Reactiehulp (app/reactiehulp.js): datums bij een uitnodiging, agenda, berichten ── */
.rh { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--lijn); width: 100%; }
.rh-velden { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-velden .veld { flex: 1 1 160px; min-width: 0; }
.rh-noot { margin: 6px 0 0; }
.rh-knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rh-bericht { margin-top: 10px; }
.rh-bericht textarea { width: 100%; font: inherit; line-height: 1.45; resize: vertical; }
.r-nieuw { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.r-nieuw .veld { flex: 1 1 140px; min-width: 0; }