From 522cdfd36879860d9d57e4da20d1e5c2f850b77e Mon Sep 17 00:00:00 2001
From: Schalli <kschaller@ctl.de>
Date: Fri, 25 Sep 2026 14:49:01 +0200
Subject: [PATCH] style(web): Anmeldeseite geteilt mit dunklem Markenpanel und
 Farbmosaik

Ab lg links 45 % dunkles Panel (Ton der App-Leiste) mit Bildmarke,
Claim und stillem Mosaik aus den Modulfarben; rechts die Anmeldekarte
auf der Arbeitsflaeche. Darunter nur die Karte.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/(auth)/login/page.tsx | 145 ++++++++++++++++---------
 1 file changed, 94 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index 58377e6..639eefb 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -5,14 +5,13 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { login } from '@/lib/auth-actions';
 import { sanitizeNextPath } from '@/lib/safe-next';
-import { BRAND_YELLOW } from '@/components/brand/brand';
 import { TesseraLogo } from '@/components/brand/tessera-logo';
 import { DesktopDownloadLinks } from '@/components/desktop/desktop-download-links';
 
 /**
- * Split-screen login page (D-01).
- * Left: Tessera branding on the brand yellow background (BRAND_YELLOW).
- * Right: Login form on neutral background.
+ * Split-screen login page (D-01), Design „Mosaik“.
+ * Left (ab lg): dunkles Markenpanel mit Bildmarke, Claim und Farbmosaik.
+ * Right: Anmeldekarte auf der Arbeitsflaeche; unter lg nur die Karte.
  * No sidebar or header (D-04, handled by (auth) layout).
  */
 export default function LoginPage() {
@@ -42,41 +41,52 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-screen">
-      {/* Left: Branding panel (hidden on mobile, visible on md+) */}
-      <div
-        className="hidden md:flex md:flex-1 items-center justify-center"
-        style={{ backgroundColor: BRAND_YELLOW }}
-      >
-        <div className="px-8 text-gray-900">
-          <TesseraLogo
-            variant="horizontal"
-            size={104}
-            plateOutline={false}
-            tagline={t('branding.tagline')}
-            className="gap-6"
-            wordmarkClassName="text-5xl"
-            taglineClassName="text-lg text-gray-800 max-w-xs"
-          />
+    <div className="flex min-h-screen bg-background">
+      {/* Links (ab lg): dunkles Markenpanel im Ton der App-Leiste mit
+          grosser Bildmarke, Produktname, einem ruhigen Satz und einem
+          stillen Mosaik aus den Modulfarben — kein Verlauf, keine Animation. */}
+      <div className="relative hidden w-[45%] shrink-0 flex-col overflow-hidden bg-appbar px-14 py-12 text-appbar-foreground lg:flex">
+        <TesseraLogo
+          variant="horizontal"
+          size={40}
+          plateOutline="always"
+          className="gap-3"
+          wordmarkClassName="text-xl font-semibold tracking-normal text-appbar-foreground"
+        />
+
+        <div className="my-auto max-w-[30rem]">
+          <LoginMosaic />
+          <p className="mt-12 text-[32px] font-semibold leading-10 tracking-tight">
+            {t('branding.claim')}
+          </p>
+          <p className="mt-3 text-base leading-6 text-appbar-muted">
+            {t('branding.tagline')}
+          </p>
         </div>
       </div>
 
-      {/* Right: Login form */}
-      <div className="flex flex-1 items-center justify-center bg-background px-4 py-8">
-        <div className="w-full max-w-sm space-y-8">
-          {/* Mobile-only branding */}
-          <div className="text-center md:hidden">
-            <TesseraLogo variant="horizontal" size={32} />
-            <p className="mt-2 text-sm text-muted-foreground">
-              {t('branding.tagline')}
-            </p>
+      {/* Rechts: Anmeldekarte zentriert auf der Arbeitsflaeche */}
+      <div className="flex flex-1 items-center justify-center px-4 py-10">
+        <div className="w-full max-w-[400px]">
+          {/* Unter lg: Bildmarke ueber der Karte */}
+          <div className="mb-6 flex justify-center lg:hidden">
+            <TesseraLogo
+              variant="horizontal"
+              size={32}
+              className="gap-2.5"
+              wordmarkClassName="text-lg font-semibold tracking-normal"
+            />
           </div>
 
+          <div className="surface space-y-6 p-6 sm:p-8">
           {/* Login heading */}
-          <div className="text-center">
-            <h2 className="text-2xl font-bold text-foreground">
+          <div>
+            <h1 className="text-2xl font-semibold text-foreground">
               {t('login')}
-            </h2>
+            </h1>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {t('loginSubtitle')}
+            </p>
           </div>
 
           {/* Error message */}
@@ -87,12 +97,12 @@ export default function LoginPage() {
           )}
 
           {/* Login form */}
-          <form onSubmit={handleSubmit} className="space-y-5">
+          <form onSubmit={handleSubmit} className="space-y-4">
             {/* Username */}
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <label
                 htmlFor="username"
-                className="text-sm font-medium text-foreground"
+                className="block text-sm font-semibold text-foreground"
               >
                 {t('username')}
               </label>
@@ -102,16 +112,15 @@ export default function LoginPage() {
                 type="text"
                 required
                 autoComplete="username"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                placeholder={t('username')}
+                className="flex h-8 w-full rounded-md border border-input bg-card px-2.5 text-sm placeholder:text-muted-foreground"
               />
             </div>
 
             {/* Password */}
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               <label
                 htmlFor="password"
-                className="text-sm font-medium text-foreground"
+                className="block text-sm font-semibold text-foreground"
               >
                 {t('password')}
               </label>
@@ -121,33 +130,30 @@ export default function LoginPage() {
                 type="password"
                 required
                 autoComplete="current-password"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                placeholder={t('password')}
+                className="flex h-8 w-full rounded-md border border-input bg-card px-2.5 text-sm placeholder:text-muted-foreground"
               />
             </div>
 
-            {/* Remember me (D-02) */}
-            <div className="flex items-center gap-2">
+            {/* Angemeldet bleiben (D-02) und Passwort vergessen (D-03) in einer Zeile */}
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex items-center gap-2">
               <input
                 id="rememberMe"
                 name="rememberMe"
                 type="checkbox"
                 defaultChecked
-                className="h-4 w-4 rounded border-input text-primary focus:ring-ring"
+                className="h-4 w-4 rounded border-input"
               />
               <label
                 htmlFor="rememberMe"
-                className="text-sm text-muted-foreground"
+                className="whitespace-nowrap text-sm text-muted-foreground"
               >
                 {t('rememberMe')}
               </label>
             </div>
-
-            {/* Forgot password link (D-03) */}
-            <div className="flex justify-end">
               <Link
                 href="/reset-password"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                className="whitespace-nowrap text-sm link"
               >
                 {t('forgotPassword')}
               </Link>
@@ -157,7 +163,7 @@ export default function LoginPage() {
             <button
               type="submit"
               disabled={isPending}
-              className="flex w-full items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
+              className="btn btn-primary w-full"
             >
               {isPending ? (
                 <svg
@@ -186,11 +192,48 @@ export default function LoginPage() {
               )}
             </button>
           </form>
+          </div>
 
           {/* Desktop-App-Link (D-12), blendet sich aus ohne API-Antwort */}
-          <DesktopDownloadLinks />
+          <div className="mt-6">
+            <DesktopDownloadLinks />
+          </div>
         </div>
       </div>
     </div>
   );
 }
+
+/**
+ * Stilles Mosaik aus den Modulfarben (Design „Mosaik“): acht Kacheln in einem
+ * lockeren 4 x 3-Raster, eine davon in der Akzentfarbe und — wie die
+ * Signalkachel der Bildmarke — leicht gedreht. Rein dekorativ.
+ */
+function LoginMosaic() {
+  const tiles: { col: number; row: number; color: string; rotate?: boolean }[] = [
+    { col: 1, row: 1, color: 'oklch(0.56 0.09 195)' },
+    { col: 2, row: 1, color: 'oklch(0.55 0.14 292)' },
+    { col: 4, row: 1, color: 'oklch(0.58 0.14 250)' },
+    { col: 2, row: 2, color: 'oklch(0.62 0.135 68)' },
+    { col: 3, row: 2, color: 'var(--primary)', rotate: true },
+    { col: 4, row: 2, color: 'oklch(0.58 0.16 35)' },
+    { col: 1, row: 3, color: 'oklch(0.58 0.12 150)' },
+    { col: 3, row: 3, color: 'oklch(1 0 0 / 0.1)' },
+  ];
+  return (
+    <div aria-hidden="true" className="grid w-max grid-cols-4 grid-rows-3 gap-3">
+      {tiles.map((tile) => (
+        <span
+          key={`${tile.col}-${tile.row}`}
+          className="h-14 w-14 rounded-xl"
+          style={{
+            gridColumn: tile.col,
+            gridRow: tile.row,
+            backgroundColor: tile.color,
+            transform: tile.rotate ? 'rotate(12deg)' : undefined,
+          }}
+        />
+      ))}
+    </div>
+  );
+}