From e4760473a7e664100122a9a4c91f726f7cc9675d Mon Sep 17 00:00:00 2001
From: ulsklyc <ulas@kalayci.cloud>
Date: Thu, 26 Mar 2026 14:29:31 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Login-Seite=20zentriert=20+=20Hero-Berei?=
 =?UTF-8?q?ch=20mit=20Tagline=20=C3=BCber=20dem=20Formular?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/pages/login.js   |  6 ++++--
 public/styles/login.css | 39 ++++++++++++++++++++++++---------------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/public/pages/login.js b/public/pages/login.js
index eb751a8..330e311 100644
--- a/public/pages/login.js
+++ b/public/pages/login.js
@@ -13,9 +13,11 @@ import { auth } from '/api.js';
 export async function render(container) {
   container.innerHTML = `
     <main class="login-page" id="main-content">
+      <div class="login-hero">
+        <h1 class="login-hero__title">Oikos</h1>
+        <p class="login-hero__tagline">Familienplanung. Sicher. Datenschutzfreundlich. Open Source.</p>
+      </div>
       <div class="login-card card card--padded">
-        <h1 class="login-card__title">Oikos</h1>
-        <p class="login-card__subtitle">Familienplaner</p>
 
         <form class="login-form" id="login-form" novalidate>
           <div class="form-group">
diff --git a/public/styles/login.css b/public/styles/login.css
index 195d93f..005f1f8 100644
--- a/public/styles/login.css
+++ b/public/styles/login.css
@@ -6,33 +6,42 @@
 
 .login-page {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100dvh;
+  width: 100vw;
   padding: var(--space-4);
   background-color: var(--color-bg);
 }
 
+/* Hero-Bereich über dem Login-Formular */
+.login-hero {
+  text-align: center;
+  margin-bottom: var(--space-8);
+}
+
+.login-hero__title {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-accent);
+  letter-spacing: -0.02em;
+  margin-bottom: var(--space-2);
+}
+
+.login-hero__tagline {
+  font-size: var(--text-base);
+  color: var(--color-text-secondary);
+  max-width: 360px;
+  line-height: var(--line-height-relaxed, 1.6);
+}
+
+/* Login-Karte */
 .login-card {
   width: 100%;
   max-width: 380px;
 }
 
-.login-card__title {
-  font-size: var(--text-3xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-accent);
-  text-align: center;
-  margin-bottom: var(--space-1);
-}
-
-.login-card__subtitle {
-  font-size: var(--text-base);
-  color: var(--color-text-secondary);
-  text-align: center;
-  margin-bottom: var(--space-8);
-}
-
 .login-form__submit {
   width: 100%;
   margin-top: var(--space-2);