Fix #130: Marke der Anmeldeseite an die Seitenleiste angleichen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -31,6 +31,8 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/).
 
 ### Fixed
 
+- Anmeldeseite: Die Marke zeigt wie die Seitenleiste nach dem Anmelden das Coinstack-Symbol
+  und den fetten, zweifarbigen Schriftzug „Finanzmanager“ statt einer grauen Statusmarke (#130)
 - Buchungsmaske: Eine falsche Splitsumme zeigte zwar die Fehlermeldung, riss aber über die
   Weiterleitung zur leeren Maske alle gerade erfassten Splitzeilen heraus; jetzt bleibt die
   Maske mit den eigenen Eingaben stehen, bis die Summe stimmt (#95)

Changes.md

@@ -1,5 +1,12 @@
 # Änderungen
 
+## Anmeldeseite: Marke wie in der Seitenleiste (12.10.2026)
+
+- Anlass (#130): Icon und Schrift des Logos auf der Anmeldeseite wichen von der Marke im angemeldeten Zustand ab.
+- Der schlichte Rahmen (`src/Views/layout/schlicht.php` – Anmeldung, Ersteinrichtung, Fehlerseite) zeigt jetzt das Coinstack-Symbol und den Schriftzug „Finanz**manager**“ im Schriftschnitt der Seitenleiste. Bisher erbte der Schriftzug die Regeln der kleinen Statusmarke (`.marke`) und stand grau mit Rahmen da.
+- Weil die Karte hell ist, trägt die erste Worthälfte die Textfarbe und die zweite die lesbare Akzentfarbe (`--akzent-schrift`); im dunklen Thema entspricht das dem Blau der Seitenleiste.
+- Tests: `tests/64_AnmeldeMarkeTest.php`, `tests/e2e/specs/smoke.spec.js`.
+
 ## Depotbuchung erfassen: Stück, Kurs und Betrag rechnen sich (12.10.2026)
 
 - Anlass (#129): Bei Kauf und Verkauf sollten sich Betrag, Stück und Kurs gegenseitig ergeben – Betrag = Stück × Kurs.

public/static/app.css

@@ -1782,12 +1782,23 @@ body.schlicht {
     max-width: 400px;
 }
 
-.marke.gross {
+/* Die Marke der Anmeldung gleicht der Seitenleiste: Symbol, Schriftschnitt und
+   zweite Worthälfte in Akzentfarbe. Weiß auf der hellen Karte wäre unsichtbar,
+   deshalb trägt die erste Hälfte die Textfarbe und die zweite die lesbare
+   Variante des Akzents. */
+.anmelde-marke {
+    display: flex;
+    align-items: center;
+    gap: .6rem;
     padding: 0 0 1.25rem;
     font-size: 1.3rem;
-    color: var(--text);
+    font-weight: 700;
+    letter-spacing: .01em;
 }
 
+.anmelde-marke .marken-text { color: var(--text); }
+.anmelde-marke .marken-text span { color: var(--akzent-schrift); }
+
 /* ── Auswertungen ────────────────────────────────────────────────────────── */
 
 /* Aufklappmenü ohne JavaScript: <details> in der Aktionsleiste. Ein eigenes

src/Views/layout/schlicht.php

@@ -22,7 +22,12 @@ use Finanzmanager\View;
 <body class="schlicht">
 <?php include __DIR__ . '/meldungen.php'; ?>
 <div class="karte-mitte">
-    <div class="marke gross">Finanzmanager</div>
+    <!-- Dieselbe Marke wie oben in der Seitenleiste: Coinstack-Symbol und
+         zweifarbiger Schriftzug. -->
+    <div class="anmelde-marke">
+        <img src="/static/coinstack.png" alt="" class="marken-symbol">
+        <span class="marken-text">Finanz<span>manager</span></span>
+    </div>
     <?= $inhalt ?>
 </div>
 </body>

tests/64_AnmeldeMarkeTest.php

@@ -0,0 +1,78 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Die Anmeldeseite (und jede andere Seite im schlichten Rahmen) trägt dieselbe
+ * Marke wie die Seitenleiste nach dem Anmelden: Coinstack-Symbol und
+ * zweifarbiger Schriftzug.
+ */
+class AnmeldeMarkeTest extends TestCase
+{
+    protected string $testName = 'Test 64: Marke der Anmeldeseite';
+
+    public function run(): void
+    {
+        $this->anmeldungZeigtSymbolUndSchriftzug();
+        $this->stilblattGleichtDerSeitenleiste();
+    }
+
+    private function anmeldungZeigtSymbolUndSchriftzug(): void
+    {
+        $seite = $this->rendereAnmeldung();
+
+        $this->assert(
+            str_contains($seite, '<div class="anmelde-marke">'),
+            'Die Anmeldeseite hat eine eigene Marke'
+        );
+        $this->assert(
+            str_contains($seite, '<img src="/static/coinstack.png" alt="" class="marken-symbol">'),
+            'Die Marke führt das Coinstack-Symbol wie die Seitenleiste'
+        );
+        $this->assert(
+            str_contains($seite, '<span class="marken-text">Finanz<span>manager</span></span>'),
+            'Der Schriftzug ist wie in der Seitenleiste zweigeteilt'
+        );
+        $this->assert(
+            !str_contains($seite, 'class="marke gross"'),
+            'Die alte Marke im Stil einer Statusmarke ist verschwunden'
+        );
+    }
+
+    private function stilblattGleichtDerSeitenleiste(): void
+    {
+        $css = (string)file_get_contents(dirname(__DIR__) . '/public/static/app.css');
+
+        $this->assert(
+            (bool)preg_match('/\.anmelde-marke\s*\{[^}]*font-weight:\s*700;/', $css),
+            'Der Schriftzug ist fett wie in der Seitenleiste'
+        );
+        $this->assert(
+            (bool)preg_match('/\.anmelde-marke\s*\{[^}]*display:\s*flex;[^}]*align-items:\s*center;/', $css),
+            'Symbol und Schriftzug stehen nebeneinander auf einer Linie'
+        );
+        $this->assert(
+            (bool)preg_match('/\.anmelde-marke \.marken-text span\s*\{\s*color:\s*var\(--akzent-schrift\);/', $css),
+            'Die zweite Worthälfte trägt die Akzentfarbe'
+        );
+        $this->assert(
+            !preg_match('/\.marke\.gross\s*\{/', $css),
+            'Die alte Regel für die große Statusmarke ist entfernt'
+        );
+    }
+
+    private function rendereAnmeldung(): string
+    {
+        $csrfToken = 'test';
+        $titel = 'Anmeldung';
+        $flash = [];
+
+        ob_start();
+        try {
+            include dirname(__DIR__) . '/src/Views/auth/login.php';
+        } finally {
+            $html = (string)ob_get_clean();
+        }
+        return $html;
+    }
+}

tests/e2e/specs/smoke.spec.js

@@ -27,10 +27,33 @@ async function anmelden(page) {
 test.describe('Grundgerüst', () => {
 	test('Anmeldeseite ist erreichbar', async ({ page }) => {
 		await page.goto('/login')
-		await expect(page.locator('h1, .marke')).toContainText(/Finanzmanager|Anmeldung/)
+		await expect(page.locator('h1, .anmelde-marke')).toContainText(/Finanzmanager|Anmeldung/)
 		await expect(page.locator('#benutzername')).toBeVisible()
 	})
 
+	test('Anmeldeseite zeigt dieselbe Marke wie die Seitenleiste', async ({ page }) => {
+		const stil = loc => loc.evaluate(k => {
+			const s = getComputedStyle(k)
+			return { familie: s.fontFamily, gewicht: s.fontWeight }
+		})
+
+		await page.goto('/login')
+		const marke = page.locator('.anmelde-marke')
+		await expect(marke.locator('img.marken-symbol')).toHaveAttribute('src', '/static/coinstack.png')
+		await expect(marke.locator('img.marken-symbol')).toBeVisible()
+		await expect(marke.locator('.marken-text')).toHaveText('Finanzmanager')
+		const anmeldung = await stil(marke.locator('.marken-text'))
+		// Die zweite Worthälfte hebt sich farblich ab, wie in der Seitenleiste.
+		const farben = await marke.locator('.marken-text').evaluate(k => [
+			getComputedStyle(k).color, getComputedStyle(k.querySelector('span')).color,
+		])
+		expect(farben[0]).not.toBe(farben[1])
+
+		await anmelden(page)
+		const leiste = await stil(page.locator('.seitenleisten-marke .marken-text'))
+		expect(anmeldung).toEqual(leiste)
+	})
+
 	test('Ohne Anmeldung führt jeder Weg zur Anmeldung', async ({ page }) => {
 		await page.goto('/einstellungen')
 		await expect(page).toHaveURL(/\/(login|einrichtung)/)