/* ============================================================
   Mobiele ronde (24 oktober 2026)
   Zo'n 70 procent van de bezoekers komt binnen op een telefoon. Dit bestand
   laadt als laatste stylesheet op elke pagina (afwerken.py, zet_mobiel) en
   bevat alleen regels achter een mobiele mediaquery: desktop verandert niet.
   Gedrag dat JavaScript nodig heeft (uitklapfooter, menuslot, scrollreveal
   op /platform) staat in assets/js/mobiel.js. Zonder script blijft alles open
   en zichtbaar.
   ============================================================ */

/* ---------- 1. Formulieren: geen inzoomen op een iPhone ----------
   Safari zoomt in op elk veld onder 16px en zoomt daarna niet terug. Dat
   gebeurde bij contact, partners en het boekformulier op /afspraak (15 en
   15,2px). De selector is bewust zwaar, zodat paginaregels als
   .afs2-kaart .afs-veld input er niet overheen gaan. */
@media (max-width: 900px), (pointer: coarse) {
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
}

/* ---------- 2. De kop ---------- */
/* Belknop: belt de website-agent. afwerken.py (zet_belknop) zet hem naast
   "Boek gratis demo"; alleen zichtbaar waar ook het burgermenu staat. */
.nav-bel { display: none; }
@media (max-width: 900px) {
  .nav-bel {
    display: grid; place-items: center; flex: none; margin-left: auto;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28); color: var(--ping);
    transition: background-color .2s ease, border-color .2s ease;
  }
  .nav-bel:hover, .nav-bel:focus-visible { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
  .nav-bel:focus-visible { outline: 2px solid var(--ping); outline-offset: 2px; }
  .nav-bel svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .nav-bel + .nav-cta { margin-left: 0; }
}
@media (max-width: 620px) {
  /* 79 naar 64px: een vijfde minder kop op elk scherm. Rechts 16px: het
     burgericoon heeft zelf al ruim 10px lucht in zijn vlak. Alles flex: none,
     anders perst de kop de burgerknop naar 33px. Het logo is breed (4,6 keer
     zijn hoogte), dus dat krimpt mee met het scherm. Gemeten: past op 320,
     360, 375, 390 en 414px. */
  .nav-inner { height: 64px; gap: 4px; padding-right: 16px; }
  .nav-logo, .nav-bel, .nav-cta, .nav-burger { flex: none; }
  .nav-logo { display: block; padding: 10px 0; margin-right: auto; }
  .nav-logo img { height: 24px; }
  .nav-bel { margin-left: 0; }
  .nav-cta { padding: 11px 10px; font-size: 13.5px; }
  .nav-burger { width: 44px; height: 44px; margin-left: 0; }
  .nav.open .nav-links { top: 64px; }
  .filterbalk { top: 64px; }
}
@media (max-width: 400px) { .nav-logo img { height: 22px; } }
@media (max-width: 374px) {
  .nav-logo img { height: 20px; }
  .nav-cta { padding: 11px 9px; font-size: 13px; }
  .nav-bel { width: 40px; height: 40px; }
}
/* Op de allerkleinste telefoons past de belknop er niet naast; bellen staat daar in de hero. */
@media (max-width: 340px) { .nav-bel { display: none; } }

/* ---------- 3. Het uitklapmenu ----------
   Was een lijst van 22 links (ruim een scherm), met Tarieven en Contact
   helemaal onderaan buiten beeld. Nu: Tarieven en Contact bovenaan, de vier
   groepen als uitklaprijen (de knoppen en hun aria-expanded bestaan al, site.js
   regelt het openen en sluit de andere), en het menu scrolt zelf. v4.css
   (nav-v2) maakte van de knoppen grijze kopjes zonder klik; dat draaien we
   hier terug. De taalregel onderaan zet site.js er zelf in. */
@media (max-width: 900px) {
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 28px 28px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
  }
  .nav.open .nav-links > li { display: block; }
  .nav.open .nav-links > li:has(> .nav-link-los) { order: -1; }
  .nav.open .nav-links .nav-link-los {
    display: flex; align-items: center; min-height: 52px; padding: 0;
    font: 600 18px/1.2 var(--font-head); color: #fff;
  }
  .nav.open .nav-links > li:has(> .nav-link-los) + li:not(:has(> .nav-link-los)),
  .nav.open .nav-drop { border-top: 1px solid rgba(255, 255, 255, .12); }
  .nav.open .nav-drop-knop {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    min-height: 54px; padding: 0; background: none; border: 0; cursor: pointer; pointer-events: auto;
    font: 500 17px/1.2 var(--font-head); letter-spacing: normal; text-transform: none;
    color: rgba(255, 255, 255, .86); text-align: left;
  }
  .nav.open .nav-drop-knop[aria-expanded="true"] { color: #fff; }
  .nav.open .nav-drop-knop svg { display: block; width: 18px; height: 18px; transform: none; }
  .nav.open .nav-drop-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav.open .nav-paneel { display: none; }
  .nav.open .nav-drop.open .nav-paneel { display: grid; padding: 0 0 0 16px; border-left: 2px solid rgba(182, 248, 153, .4); border-radius: 0; margin-bottom: 12px; }
  .nav.open .nav-paneel a { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 44px; padding: 0; }
  .nav.open .nav-paneel strong { font-weight: 500; font-size: 16px; color: rgba(255, 255, 255, .9); }
  .nav.open .nav-links li.nav-taal-mobiel { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 0; padding-top: 0; }
  .nav.open .nav-links li.nav-taal-mobiel a { display: flex; align-items: center; min-height: 52px; padding: 0; font-size: 16px; color: rgba(255, 255, 255, .78); }
  /* Alleen html, nooit body: met overflow op body wordt body zelf de scrollcontainer,
     springt de vaste kop terug naar de bovenkant van de pagina en valt het menu buiten
     beeld zodra je niet helemaal bovenaan staat (gemeld door Boris, 24 oktober 2026). */
  html.menu-open { overflow: hidden; }
}
@media (max-width: 620px) {
  .nav.open .nav-links { max-height: calc(100dvh - 64px); padding-inline: 20px; }
}

/* ---------- 4. Footer ----------
   Was 1,5 tot 1,8 schermen: 23 links onder elkaar. mobiel.js maakt van
   Product, Sectoren en Bedrijf uitklaprijen (klasse .mob-acc); zonder script
   blijft alles open. Bellen en de juridische links blijven altijd zichtbaar. */
@media (max-width: 720px) {
  .footer { padding: 40px 0 28px; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-inner > div:first-child { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px; width: 100%; }
  .footer-inner > div:first-child .footer-logo { grid-column: 1; grid-row: 1; }
  .footer-inner > div:first-child .footer-social { grid-column: 2; grid-row: 1; margin: 0; min-height: 44px; }
  .footer-inner > div:first-child .tagline { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .footer-logo img { height: 28px; }
  .footer-links { margin-left: 0; width: 100%; display: block; }
  .footer.mob-acc .footer-links > div { border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer.mob-acc .footer-links > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .footer.mob-acc .footer-links h3, .footer.mob-acc .footer-links h4 { margin: 0; }
  .footer-acc-knop {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0; background: none; border: 0; cursor: pointer;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left;
  }
  .footer-acc-knop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
  .footer-acc-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
  .footer-acc-knop:focus-visible { outline: 2px solid var(--ping); outline-offset: 2px; }
  .footer.mob-acc .footer-links ul { display: none; gap: 0; padding: 0 0 10px; }
  .footer.mob-acc .footer-links > div.open ul { display: grid; grid-template-columns: 1fr 1fr; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 15px; }
  .footer-onder { margin-top: 24px; gap: 6px; flex-direction: column; }
  .footer-onder a { display: inline-block; padding: 10px 0; }
}

/* ---------- 5. Homepage: sectortegels als rijen ----------
   Twee kolommen van 160px gaven tegels van bijna 290px hoog met afgebroken
   namen ("Woning-corporaties") en veel lege ruimte: samen anderhalf scherm.
   Op een telefoon nu één rij per sector: icoon, naam, taak en de afspeelknop
   rechts. De hele rij blijft de link naar de sectorpagina (h3 a::after). */
@media (max-width: 620px) {
  .sgrid { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-sm) 24px var(--radius-sm) var(--radius-sm); }
  .stegel {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
    min-height: 0; padding: 14px 14px 14px 16px;
  }
  .stegel-icoon { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: 2px; }
  .stegel-icoon svg { width: 22px; height: 22px; }
  .stegel h3 { grid-column: 2; grid-row: 1; margin: 0; padding-right: 0; font-size: 16.5px; }
  .stegel h3 a { -webkit-hyphens: none; hyphens: none; }
  .stegel-tekst { grid-column: 2; grid-row: 2; min-height: 0; margin-top: 2px; }
  .stegel.actief .stegel-tekst { min-height: 96px; }
  .stegel p, .ondertitel .ot-regel { font-size: 14px; }
  .stegel-wie { grid-column: 2; grid-row: 3; margin-top: 4px; }
  .stegel-voet { grid-column: 3; grid-row: 1 / span 3; margin: 0; padding: 0; align-self: center; }
  .stegel .golfvorm, .stegel-pijl { display: none; }
  .stegel-play .gbol { width: 48px; height: 48px; }
}

/* ---------- 6. Demokaart onderaan ----------
   Was ongeveer anderhalf scherm. Zelfde inhoud, strakker: kleinere kop,
   stappen dichter op elkaar en de gegevens in twee kolommen. */
@media (max-width: 620px) {
  .af-demokaart { gap: 28px; padding: 34px 22px 26px; }
  .af-demokaart h2 { font-size: 30px; margin-bottom: 14px; }
  .af-demokaart p { font-size: 16px; margin-bottom: 24px; }
  .af-demokaart .cta-row { gap: 10px; }
  .af-stappen li { padding: 14px 0; column-gap: 14px; }
  .af-stappen b { font-size: 16.5px; }
  .af-stappen span:not(.af-nr) { font-size: 14.5px; line-height: 1.5; }
  .af-nr { width: 28px; height: 28px; font-size: 14px; }
  .af-stappen li { grid-template-columns: 28px 1fr; }
  /* Het e-mailadres krijgt de hele breedte (anders breekt het midden in
     het woord); dense vult het gat ernaast met het adres. */
  .af-demo-voet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; gap: 16px 18px; padding-top: 20px; }
  .af-demo-voet div:has(> a[href^="mailto:"]) { grid-column: 1 / -1; }
  .af-demo-voet a, .af-demo-voet span:not(.label) { font-size: 15px; }
  .af-demo-voet a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}

/* ---------- 7. Aanraakdoelen ----------
   Kleine pauzeknoppen (26 tot 34px) krijgen een onzichtbare rand, zodat de
   tikzone 44px is zonder dat het ontwerp verandert. */
@media (pointer: coarse), (max-width: 900px) {
  :is(.gm-pauze, .tra-pauze, .sx-pauze, .pf-pauze, .fb5-pauze) { position: relative; }
  :is(.gm-pauze, .tra-pauze, .sx-pauze, .pf-pauze, .fb5-pauze)::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
  .fb5-pauze { position: absolute; }
  .widget-note-meer summary { padding-block: 11px; }
  .sx-s-nu, .sx-s-met { min-height: 40px; }
  /* Losse tekstlinks en schakelaars van 21 tot 36px hoog */
  :is(.af-link a, .link-pijl, .band-donker p > a, .jr-kort-link, .kn-link, .tra-tijd a, .jr-slot a[href^="tel:"]) { display: inline-flex; align-items: center; min-height: 44px; }
  :is(.vh-schakel, .pt-kies) { min-height: 44px; }
  .taalbalk a, .taalbalk button { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- 8. Feitenband: tekst loopt niet meer onder de pauzeknop ---------- */
@media (max-width: 620px) {
  .fb5::after { background: linear-gradient(90deg, #548ea2, rgba(84, 142, 162, 0) 8%, rgba(67, 119, 138, 0) 74%, #43778a 88%); }
  .fb5-pauze { background: #43778a; opacity: 1; }
}

/* ---------- 9. Platform: het gesprek staat stil op een telefoon ----------
   De scène loopt op desktop rond en maakt zich na elke ronde leeg. Op een
   telefoon is hij 1.500px hoog: wie halverwege leest, zag hem onder zijn
   duim verdwijnen. mobiel.js zet .mob-lees: elke regel komt in beeld zodra je
   ernaartoe scrolt en blijft dan staan. */
@media (max-width: 720px) {
  .js .pf-scene.pf-actief.mob-lees [data-t]:not(.pf-op),
  .js .pf-scene.pf-actief.mob-lees.pf-leeg [data-t] { opacity: 1; transform: none; }
  .js .pf-scene.mob-lees [data-t].mob-wacht { opacity: 0; transform: translateY(10px); }
  .js .pf-scene.mob-lees [data-t] { transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
  .pf-scene.mob-lees .pf-pauze { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pf-scene.mob-lees [data-t].mob-wacht { opacity: 1; transform: none; }
}

/* ---------- 10. Soepel scrollen op een telefoon ----------
   Gemeld door Boris (24 oktober 2026): de homepage liep vast als animaties bezig
   waren. Een telefoon moet een vervaging opnieuw rekenen zodra er iets onder of in
   beweegt. Dat gebeurde bij elke scrollstap (de vaste kop vervaagt wat eronder
   schuift) en bij elk beeld (de hero-waas van 468 x 1.693 px met blur 110px om
   drie bewegende vlekken, het belpaneel daarbovenop, en tien draaiende gloedbollen).
   Op een telefoon nu: een bijna dichte kop zonder vervaging, een stilstaande waas,
   een paneel zonder achtergrondvervaging en stilstaande gloed in de sectorrijen en
   de videoknop. De ring om de bollen draait nog wel; die kost geen vervaging. */
@media (max-width: 720px) {
  .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(1, 30, 38, .96); }
  .aurora span:nth-child(n) { animation: none; }
  .luister, .vk-klaar .vk-label { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gbol-aura, .vk-aura { animation: none; }
}