Fix: Anmelden-Button überlappte auf Mobilgeräten mit breitem Logo

Absolute Positionierung im Header kollidierte mit Logos in breitem
Seitenverhältnis (z. B. Banner-Format), da das Logo bei h-20 nahezu
bildschirmbreit gerendert wird. Anmelden-Link steht jetzt auf eigener
Zeile über dem Logo statt absolut positioniert in der oberen Ecke.

app/page.tsx

@@ -54,24 +54,32 @@ export default async function Home({
 
   return (
     <div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
-      {/* Kopfbereich: Logo zentriert, Login-Link rechts */}
+      {/* Kopfbereich: Login-Link eigene Zeile, Logo zentriert darunter.
-      <header className="relative mb-6">
+          Kein absolutes Positionieren mehr – ein breites Logo (z. B. ein
+          Banner-Format) konnte sonst mit dem Login-Link kollidieren. */}
+      <header className="mb-6">
+        <div className="flex justify-end mb-2">
+          <Link
+            href="/login"
+            className="text-sm text-gray-500 hover:text-[var(--c-primary)]"
+          >
+            Anmelden
+          </Link>
+        </div>
         <div className="flex justify-center">
           {logo ? (
             // eslint-disable-next-line @next/next/no-img-element
-            <img src={logo} alt="Logo" className="h-20 object-contain" />
+            <img
+              src={logo}
+              alt="Logo"
+              className="h-20 max-w-full object-contain"
+            />
           ) : (
             <h1 className="text-4xl font-extrabold tracking-tight text-[var(--c-primary)]">
               {SITE_TITLE}
             </h1>
           )}
         </div>
-        <Link
-          href="/login"
-          className="absolute right-0 top-0 text-sm text-gray-500 hover:text-[var(--c-primary)]"
-        >
-          Anmelden
-        </Link>
       </header>
 
       {/* Mobil: Tag (Standard) oder Woche umschaltbar */}