From 0c4fad96499eba4dcef5295c917c44c0dd0194aa Mon Sep 17 00:00:00 2001
From: Florian Wilde <wilde.florian@gmail.com>
Date: Sat, 18 Jul 2026 01:29:27 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20Anmelden-Button=20=C3=BCberlappte=20auf?=
 =?UTF-8?q?=20Mobilger=C3=A4ten=20mit=20breitem=20Logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index a3fd595..a97af96 100644
--- a/app/page.tsx
+++ b/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 */}
-      <header className="relative mb-6">
+      {/* Kopfbereich: Login-Link eigene Zeile, Logo zentriert darunter.
+          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 */}