index2.html: stop fixed navbar from overlapping hero on mobile

On narrow screens the fixed top header switches to a stacked column
layout and the nav links wrap to several rows, so the header grows to
~170px tall — well past the hero's fixed 6rem top padding. With the hero
content vertically centered, the logo and title ended up hidden behind
the navbar (reported in discussion #9768).

Offset the hero's top padding by the measured header height
(--header-h, already set in JS) via max(6rem, --header-h + 1.5rem), so
the content always clears the header. Desktop is unaffected: the header
is shorter than 6rem there, so the 6rem value still wins.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ThomasWaldmann

index2.html

@@ -161,7 +161,10 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 6rem 1.5rem 4rem;
+  /* clear the fixed header: on mobile it wraps to several rows and grows
+     well past 6rem, so offset by its measured height (--header-h, set in JS)
+     to keep the logo/title from hiding behind it. Desktop keeps the 6rem look. */
+  padding: max(6rem, calc(var(--header-h, 62px) + 1.5rem)) 1.5rem 4rem;
 }
 
 .hero .logo svg {