/* ================================================================== eenoverlijden-mobiel.css - de mobiele weergave van /een-overlijden/. Hoort bij page-een-overlijden.php en laadt ná eenoverlijden.css, zodat de regels hier winnen. De basis- en desktopweergave staat in eenoverlijden.css; aan dit bestand sleutelen raakt de desktopweergave niet. Zelfde opzet als home.css / home-mobiel.css en watwijdoen.css / watwijdoen-mobiel.css. WAT HIER WEL EN NIET IN HOORT Alleen de secties van deze pagina. De mobiele hero staat NIET hier maar in home.css: .hero is een sitebrede component die ook de voorpagina gebruikt. Hier staat er alleen de afstelling voor het kruimelpad van deze pagina. Dat is dezelfde regel als bij home-mobiel.css: de scheidslijn is "deze pagina of sitebreed", niet "mobiel of niet". DE GRENZEN 880px structuur en ruimte, gelijk aan home-mobiel.css. 820px de tijdlijn klapt om van twee kolommen naar één. Die grens komt uit eenoverlijden.css en blijft daar staan; hem hier verplaatsen maakt een band van breedtes waarin de pagina half gestapeld staat. 620px telefoonafstelling: de lijn naar de zijkant. 560px raakvlakken, gelijk aan watwijdoen-mobiel.css. 900px sectie 3 houdt zijn eigen grens; die komt uit het aangeleverde ontwerp. HET REGISTER Wijzig je een sectie van deze pagina in eenoverlijden.css, loop dan deze tabel na en meet op 390 voordat je de stap afsluit. Dat is de werkregel in CLAUDE.md. | sectie | desktop | mobiel | |-----------------|------------------------------------|-------------------------------------------------------| | 1 hero | 2 kolommen, beeld rechts groot | uit home.css; hier alleen het vignet 42px lager, want | | | | er staat een kruimelpad boven de kop | | 2 weg | tijdlijn in het midden, om en om | lijn tegen de linkerzijkant, foto en tekst eronder, | | | | pillen hugen hun tekst | | 3 anders is | 2 kaarten naast elkaar | 1 kolom, minder ruimte boven de kop, kaartkoppen | | | | gecentreerd en 26px | | 4 faq | uitklapvragen, 820px breed | ongewijzigd | | 5 bel-band | ruimte 150px boven, 130px onder | 140 boven (de golf is 120px hoog), 48 onder, | | | | knoppen onder elkaar over de volle breedte | Aangemaakt 2026-08-14. Zie werk/04-archief/fase4-bouwverslagen/f4s2-plan-een-overlijden-mobiel-2026-08-14.md. ================================================================== */ /* ---------- 1. HERO ---------- De mobiele hero komt uit home.css (zoek daar op "HERO OP EEN TELEFOON"). Wat deze pagina anders maakt is het kruimelpad boven de kop: op de homepage is de kop het eerste element in de kolom, hier niet. ---------------------------------------------------------------- */ @media (max-width:880px){ /* Het vignet hoort naast de kop en niet naast het kruimelpad. 48px is de VOLLE hoogte van het kruimelpad: 22px regelhoogte plus 26px ondermarge (gezet in eenoverlijden.css). Nagemeten op 390: .crumbs loopt van 150 tot 172 en de kop begint op 198. Zo beginnen kop en vignet op dezelfde hoogte en klopt de min-height die home.css onder de kop reserveert vanzelf; die som mag deze waarde dus NIET verrekenen. Meet dit na als het kruimelpad van grootte verandert of over twee regels gaat breken. */ .eo .hero{--vignet-top:48px} } /* ---------- 2. DE WEG DIE WE SAMEN LOPEN ---------- Vanaf 820px staat alles al onder elkaar met de lijn links (eenoverlijden.css). Wat daar niet goed ging op een telefoon: de lijn stond op 31px binnen een .track die zelf 24px van de schermrand af staat, en de stipkolom was 62px breed met 20px ertussen. De inhoud begon dus op 106px van links terwijl er rechts 24px overbleef: 82px scheef, en een tekstkolom van maar 260px. De lijn is visuele steun om te volgen, geen inhoud. Hij mag tegen de zijkant. ---------------------------------------------------------------- */ @media (max-width:620px){ .eo .weg .wrap{padding:0 18px} .eo .track::before{left:9px} /* De stip is 8px en staat op justify-self:center in deze kolom, dus zijn midden valt op 9px en hij zit precies op de lijn. De ring eromheen (box-shadow 0 0 0 5px) is 18px in doorsnee en past nog net binnen de kolom. */ .eo .eo-step{grid-template-columns:18px 1fr;column-gap:14px} .eo .eo-step > .node{margin-top:11px} } @media (max-width:880px){ /* De pillen passend maken bij hun tekst. Als inline-flex is het label één flex-item dat de volle breedte pakt; de pijl valt dan op een eigen regel, ver van het laatste woord, en de pil is een brede doos met veel lucht. Vandaar inline-block met een inline pijl, precies zoals .rev-btn op de homepage. Zo hugt elke pil zijn eigen tekst en lezen de zeven pillen als één familie in plaats van zeven verschillende dozen. */ .eo .eo-step .meer{ display:inline-block;margin-top:18px;padding:10px 18px; font-size:12.5px;line-height:1.5;max-width:100%; } .eo .eo-step .meer .arr{display:inline-block;margin-left:8px} } /* ---------- 3. WAT ALS DE SITUATIE ANDERS IS ---------- Eigen grens van 900px; die komt uit het aangeleverde ontwerp en hoort bij het moment waarop de twee kaartkolommen stapelen. ---------------------------------------------------------------- */ @media (max-width:900px){ /* 110px boven de kop is de maat van een sectie die op desktop tussen twee brede banden staat. Op een telefoon is dat een leeg vlak van bijna een derde scherm voordat er iets te lezen valt. De ruimte onder blijft: daar volgt de overgang naar de vragen. */ .erika-anders{padding:64px 24px 110px} .erika-anders__head{margin-bottom:44px} /* De koppen gecentreerd en een tikje groter, op verzoek. De lopende tekst blijft links uitgelijnd: een alinea van vier regels centreren laat elke regel op een andere plek beginnen en dat leest slechter, zeker bij dit publiek. */ .erika-anders__card h3{font-size:26px;text-align:center} } /* ---------- 5. BEL-BAND ---------- Letterlijk de maatvoering van de slotsectie op /onze-zorg/, op verzoek overgenomen omdat de overgang naar de voet daar goed staat. Bron: de inline stijl op .wwd-slot in page-onze-zorg.php en het blok vanaf 560px in watwijdoen-mobiel.css. Op 390px komt dat neer op 88px boven en 92px onder, tegen 120 en 100 hiervoor. ---------------------------------------------------------------- */ @media (max-width:880px){ /* De 88px boven die /onze-zorg/ gebruikt kan hier niet: de golf boven deze sectie is 120px hoog en zakt op zijn diepste punt tot 90px (het pad loopt via 40 en 70 naar 90 aan de linkerkant). De labelpil "24 uur per dag bereikbaar" begon daardoor op 88px, dus precies op de onderrand van de golf, en plakte er links tegenaan. 140px zet hem 50px onder het diepste punt. Die 52px komt van onderen af, want daar was ruimte over: onder de knoppen volgt eerst nog de golf boven de voet (120px, dezelfde kleur, dus het leest als één donker vlak) en daarna de bovenruimte van de voet zelf. Van de onderste knop tot de eerste voettekst blijft zo 190px staan. Geen clamp op de bovenwaarde: de golf is 120px hoog op élke breedte, dus een maat die met het scherm meeschaalt loopt bij 880px opnieuw tegen dezelfde rand aan. De desktopregel in eenoverlijden.css staat om dezelfde reden op een vaste 150px. */ .eo .cta-band{padding:140px 0 48px} } @media (max-width:560px){ /* Twee pillen naast elkaar breken hier over drie regels; onder elkaar en over de volle breedte leest en raakt dat beter. Het publiek is vaak ouder. width op de knoppen alleen is niet genoeg: .alt is een flexrij met justify-content:center en krimpt anders mee met haar inhoud. */ .eo .cta-band .alt{flex-direction:column;align-items:stretch;gap:12px;width:100%} /* justify-content en niet text-align: .btn is inline-flex (home.css), en dan doet text-align niets. Zonder deze regel staat het label links in een knop die de volle breedte beslaat. */ .eo .cta-band .alt > .btn{width:100%;justify-content:center} }