Fix About Tablet layout, center Hero CTA on Mobile

The sm:/lg: ratio collapse in About.tsx from the breakpoint migration
was wrong: the Tablet-specific wider text share wasn't just compensating
for the grid arriving too early, it's what the inner quote/bio row and
the photo's -ml-48 overlap actually need room for. Restores the
two-tier ratio (wider text, no overlap at sm:; real ratio + overlap
only at lg:), just anchored to sm: instead of the old md:.

Also centers the Hero CTA button below sm: (Mobile) per feedback.

app/components/Hero.tsx

@@ -95,10 +95,12 @@ export function Hero() {
             Ich helfe dir, zwischen Job, Familie und eigenen Projekten nicht unterzugehen
           </p>
 
-          {/* CTA */}
+          {/* CTA — centered below sm: (reads better against the centered
+              image/banner above it on true Mobile), left-aligned with the
+              rest of the text column again from sm: up. */}
           <Link
             href="/challenge"
-            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
+            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all self-center sm:self-auto"
           >
             {/* Letting this wrap to two lines below lg: (tried 2026-07-24)
                 put the icon beside a two-line text block, which read as