/* hw-mobiel.css [2026-09-26] Weergave op telefoon, plus de tekstkaders die op elk scherm in kolommen uiteenvielen. Geladen vanuit _inc/nav.php, _inc/nav-taal.php en academy/_inc/nav.php, dus na de stijlen in de , met een versienummer in de link zodat telefoons deze versie direct ophalen (css staat een maand in de cache). Hoort bij /assets/hw-mobiel.js (tabellen met een eigen schuifbalk). */ /* 1. Lange woorden en webadressen breken op de rand af en blijven zo in beeld */ body{overflow-wrap:break-word} /* 2. Tekstkaders (callout): tekst, vet label en links lopen als een gewone alinea. holdwise-shared.css zette elk kader als rij (flex); dat is alleen bedoeld voor een kader met pictogram. Met html ervoor wint deze regel ook op pagina's waar holdwise-shared.css later laadt. */ html .callout{display:block} html .callout:has(> .callout-icon){display:flex} /* 3. Tabellen die breder zijn dan hun kolom: eigen schuifbalk (de wrapper maakt hw-mobiel.js) */ .hw-tscroll-vak{position:relative;max-width:100%} .hw-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .hw-tscroll > table{max-width:none} .hw-tscroll:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:2px} /* zachte schaduw rechts: er staat nog meer in de tabel; weg zodra je tot het eind hebt geschoven */ .hw-tscroll-vak::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none;background:linear-gradient(to left,rgba(13,27,62,.16),rgba(13,27,62,0));transition:opacity .2s} .hw-tscroll-vak.eind::after{opacity:0} /* 4. Kennisbankartikelen: de artikelkolom blijft binnen het scherm en de regel met datum en labels loopt door */ .page-wrap > main{min-width:0} .meta-line{flex-wrap:wrap;row-gap:6px} /* 5. Rekentools: een lange uitkomst loopt door op meer regels in plaats van rechts weg te vallen. Korte uitkomsten blijven op hun plek naast het label. Alleen regels met label en uitkomst (twee delen); regels met meer kolommen (vermogensplanner, salaristabel) blijven zoals ze zijn. */ .hw-calc .hw-calc-regel > span:last-child:nth-child(2){white-space:normal;flex-shrink:0;max-width:60%} /* De toelichting onder een label (kleine grijze regel) loopt ook door; hw-calc.css zette die op een regel */ .hw-calc .hw-calc-regel > span:first-child span{white-space:normal} .hw-calc .hw-calc-regel > span:first-child span.hw-yt-sub{font-weight:400;color:var(--ink-dim,#6B7388)} /* In een smal vak (telefoon): een lange uitkomst gaat naar een eigen regel, rechts uitgelijnd */ @container (max-width:560px){ .hw-calc .hw-calc-regel{flex-wrap:wrap} .hw-calc .hw-calc-regel > span:last-child:nth-child(2){white-space:normal;margin-left:auto;max-width:100%} } @media (max-width:600px){ .hw-calc .hw-calc-regel{flex-wrap:wrap} .hw-calc .hw-calc-regel > span:last-child:nth-child(2){white-space:normal;margin-left:auto;max-width:100%} } /* 6. Formuliervelden op telefoon minstens 16px: dan zoomt de iPhone niet in zodra je gaat typen */ @media (max-width:820px){ .hw-mk-form input,.hw-mk-form select,.hw-mk-form textarea, .hw-vraag-form input,.hw-vraag-form textarea, .hw-bm input,.mr-form input,.bt-card-bd input,.bt-card-bd select, #dg-s,#dg-d,.kb-search input,.hw-yt-filters select, #hv-b,#hv-r,#hv-j,#vb-w,#vb-in,input.t-search,.hw-zoek input{font-size:16px!important} }