Index: src/assets/css/style.css
===================================================================
--- src/assets/css/style.css	(revision cbe4f4ecdb97729fce5f1c9da048fae6b10e18a2)
+++ src/assets/css/style.css	(revision 7ca3ffcf846109ed0ca6ebd1a0832365fc85be1f)
@@ -507,5 +507,5 @@
 .masthead {
     border-bottom: 1px solid var(--rule);
-    padding: calc(1rem + var(--safe-top)) 0 1rem;
+    padding: calc(1rem + env(safe-area-inset-top, 0px)) 0 1rem;
     /* GEEN backdrop-filter hier: een voorouder met backdrop-filter blokkeert de
        frosted blur van het user-menu-dropdown eronder. Masthead is toch bijna
@@ -668,5 +668,5 @@
 
 /* Footer */
-.site-footer { padding: 2rem 0 calc(2rem + var(--safe-bot)); border-top: 1px solid var(--rule); margin-top: 4rem; font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); }
+.site-footer { padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); margin-top: 4rem; font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); }
 .site-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; }
 .site-footer a { color: var(--ink-muted); text-decoration-color: var(--rule); }
@@ -1678,5 +1678,5 @@
 }
 @media (max-width: 400px) {
-    .masthead { padding: calc(.5rem + var(--safe-top)) 0 .5rem; }
+    .masthead { padding: calc(.5rem + env(safe-area-inset-top, 0px)) 0 .5rem; }
     .masthead-inner { gap: .25rem; }
     .site-title { font-size: 1.05rem; }
@@ -2759,5 +2759,5 @@
 
 /* Masthead: compacter */
-.masthead { padding: calc(.55rem + var(--safe-top)) 0 .55rem; }
+.masthead { padding: calc(.55rem + env(safe-area-inset-top, 0px)) 0 .55rem; }
 .masthead-inner { gap: 1rem; }
 .site-title { font-size: 1.25rem; }
@@ -2787,5 +2787,5 @@
 
 /* Site footer compacter */
-.site-footer { padding: 1.25rem 0 calc(1.25rem + var(--safe-bot)); margin-top: 2rem; font-size: .78rem; }
+.site-footer { padding: 1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px)); margin-top: 2rem; font-size: .78rem; }
 .site-footer-inner { gap: .75rem; }