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);