From a76889aaf86bd03b2cf50699497ee5cb21a3e5a9 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Thu, 22 Jan 2026 22:45:32 +0100
Subject: [PATCH] improvements

---
 assets/css/login.css | 188 ++++++++++++++++++++++++-------------------
 footer.php           |   3 +
 login.php            |  56 ++++++++-----
 style.css            |   8 +-
 4 files changed, 149 insertions(+), 106 deletions(-)

diff --git a/assets/css/login.css b/assets/css/login.css
index d9b5453..96d1aea 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -1,141 +1,161 @@
 /* assets/css/login.css
-   Geizhals-inspiriertes, cleanes Login-Layout
+   Login-Layout im Stil von style.css (dunkler Hintergrund + helle Cards)
 */
 
 :root{
-    --gh-bg: #f4f6f8;
-    --gh-card: #ffffff;
-    --gh-text: #1f2937;
-    --gh-muted: #6b7280;
-    --gh-border: #e5e7eb;
-    --gh-accent: #18a957;      /* "Deal"-Grün */
-    --gh-accent-2: #0f8a45;
+    /* nutzt eure globalen Farben aus style.css, mit Fallbacks */
+    --gh-bg: var(--bg-main, #151923);
+    --gh-card: var(--bg-card, #ffffff);
+    --gh-header: var(--bg-header, #1f2937);
+
+    --gh-text: var(--text-main, #151c2e);
+    --gh-muted: var(--text-muted, #6b7280);
+    --gh-border: var(--border-color, #e5e7eb);
+
+    --gh-primary: var(--color-primary, #2563eb);
+    --gh-primary-hover: var(--color-primary-hover, #1d4ed8);
+
     --gh-danger: #d92d20;
-    --gh-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
-    --gh-radius: 14px;
-    --gh-focus: 0 0 0 4px rgba(24, 169, 87, 0.18);
+
+    --gh-radius: var(--radius-lg, 16px);
+    --gh-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.08));
+
+    --gh-transition-fast: var(--transition-fast, 150ms ease);
+    --gh-transition-normal: var(--transition-normal, 250ms ease);
+
+    --gh-focus: 0 0 0 4px rgba(37, 99, 235, 0.28);
 }
 
-html, body{
-    height: 100%;
-}
-
-body{
-    margin: 0;
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
+/* Wir stylen nur innerhalb des Login-Bereichs, damit global nichts kaputtgeht */
+.auth{
+    min-height: calc(100svh - 56px);
+    padding: 34px 18px 60px;
+    background: var(--gh-bg);
     color: var(--gh-text);
-    background:
-            radial-gradient(1200px 500px at 20% 0%, rgba(24,169,87,0.10), transparent 55%),
-            radial-gradient(900px 400px at 90% 10%, rgba(59,130,246,0.08), transparent 60%),
-            var(--gh-bg);
 }
 
-/* Überschrift */
-h2{
-    max-width: 440px;
-    margin: 44px auto 14px;
-    padding: 0 18px;
-    font-size: 1.55rem;
-    letter-spacing: 0.2px;
-}
-
-/* Formular-Karte */
-form{
-    max-width: 440px;
-    margin: 0 auto;
-    padding: 22px 18px 18px;
+.auth__card,
+.auth__sideCard{
     background: var(--gh-card);
     border: 1px solid var(--gh-border);
     border-radius: var(--gh-radius);
     box-shadow: var(--gh-shadow);
 }
 
-label{
+.auth__title{
+    margin: 0;
+    font-size: 1.55rem;
+    letter-spacing: 0.2px;
+    color: var(--gh-text);
+}
+
+.auth__subtitle{
+    margin: 0;
+    color: var(--gh-muted);
+    font-size: 0.98rem;
+    line-height: 1.4;
+}
+
+.auth__field label{
     display: block;
-    margin: 12px 0 6px;
-    font-size: 0.95rem;
+    margin: 0 0 6px;
+    font-size: 0.85rem;
     color: var(--gh-muted);
 }
 
-input[type="text"],
-input[type="password"]{
+.auth__field input[type="text"],
+.auth__field input[type="password"]{
     width: 100%;
     box-sizing: border-box;
-    padding: 12px 12px;
+    padding: 0.75rem 0.8rem;
     border: 1px solid var(--gh-border);
-    border-radius: 12px;
-    background: #fbfbfc;
+    border-radius: var(--radius-sm, 6px);
+    background: #ffffff;
     color: var(--gh-text);
     outline: none;
-    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
+    transition: border-color var(--gh-transition-fast), box-shadow var(--gh-transition-fast);
 }
 
-input[type="text"]:focus,
-input[type="password"]:focus{
-    border-color: rgba(24,169,87,0.55);
+.auth__field input[type="text"]:focus,
+.auth__field input[type="password"]:focus{
+    border-color: rgba(37, 99, 235, 0.75);
     box-shadow: var(--gh-focus);
-    background: #ffffff;
 }
 
-/* Submit */
-input[type="submit"]{
+.auth__submit{
     width: 100%;
-    margin-top: 14px;
-    padding: 12px 14px;
+    padding: 0.75rem 0.8rem;
     border: 0;
-    border-radius: 12px;
-    background: linear-gradient(180deg, var(--gh-accent), var(--gh-accent-2));
+    border-radius: var(--radius-sm, 6px);
+    background: var(--gh-primary);
     color: #ffffff;
     font-weight: 650;
     cursor: pointer;
-    transition: transform 120ms ease, filter 120ms ease;
+    transition: background var(--gh-transition-fast), transform var(--gh-transition-fast);
 }
 
-input[type="submit"]:hover{
-    filter: brightness(1.02);
+.auth__submit:hover{
+    background: var(--gh-primary-hover);
     transform: translateY(-1px);
 }
 
-input[type="submit"]:active{
+.auth__submit:active{
     transform: translateY(0px);
 }
 
-/* Fehlertext (dein <p> oberhalb des Forms) */
-p{
-    max-width: 440px;
-    margin: 10px auto;
-    padding: 0 18px;
+.auth__muted{
+    margin: 8px 0 0;
     color: var(--gh-muted);
 }
 
-p:has(+ form){
-    /* der Absatz direkt vor dem Form: als Alert darstellen */
-    color: #ffffff;
-    background: var(--gh-danger);
-    border-radius: 12px;
-    padding: 10px 12px;
-    box-shadow: 0 8px 18px rgba(217, 45, 32, 0.18);
-}
-
-/* Register-Link */
-p a{
-    color: var(--gh-accent-2);
+.auth__muted a{
+    color: var(--gh-primary);
     text-decoration: none;
     font-weight: 600;
 }
 
-p a:hover{
+.auth__muted a:hover{
     text-decoration: underline;
 }
 
-/* Kleine Anpassungen für sehr schmale Displays */
-@media (max-width: 520px){
-    h2{
-        margin-top: 28px;
-        font-size: 1.35rem;
+.auth__sideCard{
+    padding: 18px;
+}
+
+.auth__tip{
+    margin-top: 14px;
+    padding: 12px 12px;
+    border-radius: var(--radius-md, 10px);
+    background: #f3f4f6;
+    border: 1px solid var(--gh-border);
+    color: var(--gh-text);
+}
+
+@media (max-width: 900px){
+    .auth__grid{
+        grid-template-columns: 1fr;
     }
 
-    form{
-        border-radius: 12px;
+    .auth__logo{
+        width: 120px;
+    }
+}
+
+@media (max-width: 520px){
+    .auth{
+        padding-top: 18px;
+    }
+
+    .auth__card{
+        padding: 18px;
+    }
+
+    .auth__header{
+        grid-template-columns: 1fr;
+    }
+
+    .auth__logo{
+        width: 140px;
+        grid-row: auto;
     }
 }
diff --git a/footer.php b/footer.php
index 19caa31..dfcd542 100755
--- a/footer.php
+++ b/footer.php
@@ -7,3 +7,6 @@
         </nav>
     </div>
 </footer>
+
+</body>
+</html>
diff --git a/login.php b/login.php
index 92b4962..8b5eff2 100644
--- a/login.php
+++ b/login.php
@@ -58,29 +58,49 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
 <?php include 'header.php'; ?>
 
-<!DOCTYPE html>
-<html>
-<body>
+<!-- Hinweis: header.php öffnet bereits <!DOCTYPE html>, <html>, <head> und <body>. -->
 <link rel="stylesheet" href="assets/css/login.css">
-<h2>Geizhals Login</h2>
 
-<?php if ($loginError): ?>
-    <p><?php echo htmlspecialchars($loginError, ENT_QUOTES, 'UTF-8'); ?></p>
-<?php endif; ?>
+<main class="auth" role="main">
+    <section class="auth__grid" aria-label="Login Bereich">
+        <div class="auth__card">
+            <header class="auth__header">
 
-<form action="login.php" method="POST">
-    <label for="uname">Username:</label>
-    <input type="text" id="uname" name="uname"><br>
-    <label for="pw">Password:</label>
-    <input type="password" id="pw" name="pw"><br><br>
-    <input type="submit" value="Login">
-</form>
+                <h2 class="auth__title">Login</h2>
+            </header>
 
-<p><a href="register.html">Register</a></p>
-</body>
-</html>
+            <?php if ($loginError): ?>
+                <p class="auth__alert" role="alert"><?php echo htmlspecialchars($loginError, ENT_QUOTES, 'UTF-8'); ?></p>
+            <?php endif; ?>
+
+            <form class="auth__form" action="login.php" method="POST" autocomplete="on">
+                <div class="auth__field">
+                    <label for="uname">Username</label>
+                    <input type="text" id="uname" name="uname" inputmode="text" autocomplete="username" required>
+                </div>
+
+                <div class="auth__field">
+                    <label for="pw">Passwort</label>
+                    <input type="password" id="pw" name="pw" autocomplete="current-password" required>
+                </div>
+
+                <div class="auth__actions">
+                    <input class="auth__submit" type="submit" value="Einloggen">
+                </div>
+            </form>
+
+            <div class="auth__links">
+                <p class="auth__muted">Neu hier? <a href="other/login.html">Account erstellen</a></p>
+                <p class="auth__muted"><a href="index.php">Zurück zur Startseite</a></p>
+            </div>
+        </div>
+
+    </section>
+</main>
 
 <?php
 mysqli_close($conn);
 include 'footer.php';
-?>
\ No newline at end of file
+?>
+
+<!-- footer.php schließt </body> und </html> -->
diff --git a/style.css b/style.css
index 70ed289..118fb5a 100755
--- a/style.css
+++ b/style.css
@@ -10,7 +10,7 @@
 }
 
 :root {
-    --bg-main: #f4f6f9;
+    --bg-main: #151923;
     --bg-card: #ffffff;
     --bg-header: #1f2937;
 
@@ -18,7 +18,7 @@
     --color-primary-hover: #1d4ed8;
     --color-accent: #10b981;
 
-    --text-main: #111827;
+    --text-main: #151c2e;
     --text-muted: #6b7280;
     --text-invert: #ffffff;
 
@@ -41,8 +41,8 @@
 body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif;
-    background: var(--bg-main);
-    color: var(--text-main);
+    background: var(--bg-main); !important;
+    color: var(--text-main); !important;
     line-height: 1.45;
 }