/** * Web4Data Auth-Skin — der öffentliche Zugang zur Plattform. * * Mechanik: reines Präsentations-Layer über dem gemeinsamen Funktionskern * (login.php / forgot-password.php laden public/assets/css/auth-skin-.css * automatisch). Formulare, Knöpfe, 2FA, Passkey und View-Transitions bleiben * unberührt — hier wird nichts geschaltet, nur gestaltet. * * ── WARUM DIESE FASSUNG (13.10.2026) ──────────────────────────────────────── * Die vorige Fassung war als "Betriebskonsole für Plattform-Mitarbeitende" * entworfen: Nachtschwarz, Punktraster, Monospace, und oben links die Kennung * "web4data · betriebszugang". Diese Annahme stimmt nicht mehr — und vermutlich * nie: web4data.de/login ist der ÖFFENTLICHE Zugang. Dorthin zeigt "Zum Login" * im Fuß der Startseite und der Knopf "Anmelden" auf der 404-Seite. Wer von der * Marketingseite kommt, verliess eine helle, ruhige Seite und landete auf einer * schwarzen Terminal-Anmutung mit einem Wort, das kein Kunde über sich sagen * würde. Betreiber-Mitarbeitende melden sich an derselben Stelle an; eine * normale Anmeldeseite schadet ihnen nicht. * * Owner, 13.10.2026: "die login seite sieht extrem nach ki slop aus und * Betriebszugang klingt komisch. wir sollten die passenden Schriftarten * verwenden und auch ein helles und modernes ui/ux design was zu der APP und * der Marketing Webseite passt." * * ── DIE GESTALTUNG IST NICHT ERFUNDEN ─────────────────────────────────────── * Jeder Wert hier steht so schon in public/assets/css/marketing.css: * --ink #0B1437 · --ink-soft #475569 · --ink-mute #64748B · --line #E2E8F0 * --stone-50 #FAFAF9 (der warme Flächenwechsel) · --brand #581C87 * Die Schriftpaarung ebenso: Space Grotesk als Anzeigeschrift, Inter als * Lesesatz. Beide liegen in google-fonts-mkt.css, die login.php seit dem * 13.10.2026 lädt (vorher google-fonts.css — ohne Space Grotesk). * * Der Aufbau folgt dem Hausmuster der Geschwister-Überzüge: Anmeldespalte und * ein Markenpanel daneben (ClockData links, JuristData rechts). Gleiches * System, eigener Ton — hier die Dachmarke in Violett. * * ── DER ANSPRUCH IM PANEL IST EIN ZITAT, KEINE BEHAUPTUNG ─────────────────── * "Software für Kanzleien und Unternehmen. Entwickelt und gehostet in * Deutschland." steht wortgleich im Fuß jeder Marketingseite * (app/pages/marketing/_partials/footer.php). Eine Anmeldeseite ist der * falsche Ort, um einen NEUEN Satz über das Produkt zu erfinden; hier steht * derselbe, den die Website ohnehin trägt. Bewusst ohne Zahlenangabe: wie * viele Fachlösungen öffentlich angeboten werden, ist eine Portfoliofrage * (pd_marke_im_portfolio) und würde hier zur zweiten, driftenden Wahrheit. */ /* ── Grund ───────────────────────────────────────────────────────────────── !important ist hier nötig, nicht bequem: login.php setzt den dunklen Grund an ZWEI Stellen — im Basis-CSS und noch einmal in $__themeCss, das aus der Markenfarbe einen radialen Verlauf auf #070a10 baut. Beides muss weichen. */ body { background: #FAFAF9 !important; color: #0B1437; } /* Farbwolken und schwebende Fach-Icons aus: die Marketingseite hat keine, also hat die Anmeldeseite auch keine. */ .bg-canvas, .bg-icons { display: none !important; } /* Das leere Raster-Div wird zum Markenpanel umgewidmet (siehe unten). Unterhalb der Panelbreite trägt es nichts und bleibt unsichtbar. */ .bg-grid { background-image: none !important; } /* ── Kopfmarke ───────────────────────────────────────────────────────────── login.php zeigt seit dem 13.10.2026 das echte Lockup (/assets/img/logos/web4data-primary.svg). Die Breite steht im Markup und ist aus der viewBox gerechnet; hier wird nur die Höhe gesichert und zentriert. */ .logo-area { margin-bottom: 28px; } .logo-lockup { height: 30px; width: auto; max-width: 230px; margin: 0 auto 10px; opacity: 1; } .logo-sub { color: #64748B !important; font-size: 13px; letter-spacing: .01em; } /* ── Karte ───────────────────────────────────────────────────────────────── Ruhiger als vorher: eine Haarlinie statt dreier gestapelter Schatten, und ein Schatten, der auf hellem Grund überhaupt sichtbar ist (die alten Werte waren für Schwarz gerechnet und verschwanden auf Weiß). */ .auth-card { border: 1px solid #E2E8F0; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(11, 20, 55, .04), 0 18px 44px -24px rgba(11, 20, 55, .22) !important; } /* ── Typografie ──────────────────────────────────────────────────────────── Space Grotesk für die Überschrift, wie auf jeder Marketingseite. Fallback auf Inter und dann auf die Systemschrift — eine Anmeldeseite darf nie an einer Schriftdatei hängen. */ .card-header h1 { font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-weight: 600 !important; font-size: 24px !important; letter-spacing: -0.4px !important; color: #0B1437 !important; } .card-header p { color: #475569 !important; } .form-label { color: #334155 !important; } /* ── Fuß ─────────────────────────────────────────────────────────────────── Das Monospace aus der Konsolen-Fassung fällt weg; auf hellem Grund braucht es außerdem andere Farben als die für Schwarz gewählten. */ .security-badge { font-family: inherit !important; background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important; color: #475569 !important; letter-spacing: 0 !important; } .legal-links { font-family: inherit !important; font-size: 12px !important; letter-spacing: 0 !important; } .legal-links, .legal-links a { color: #64748B !important; } .legal-links a:hover { color: #0B1437 !important; } /* ── Ab Desktop-Breite: Anmeldung links, Markenpanel rechts ──────────────── Dasselbe Muster wie bei JuristData. Unterhalb von 1100 px bleibt die Seite eine einfache zentrierte Spalte — ein Panel, das die Hälfte eines Telefons einnimmt, ist kein Panel, sondern ein Hindernis. */ @media (min-width: 1100px) { body { justify-content: flex-start !important; } .bg-grid { position: fixed; top: 0; bottom: 0; right: 0; left: auto; width: 42%; z-index: 0; /* ── Drei Schichten, von oben nach unten ────────────────────────────── 1. Lichtkante oben links — gibt der Fläche eine Richtung. 2. Der Markenverlauf MIT Alpha (.78/.82/.93). Ohne Alpha wäre das Foto darunter unsichtbar; mit .93 war es praktisch unsichtbar. 3. Das Foto. ★ WARUM HIER KEIN MARKENZEICHEN MEHR LIEGT (13.10.2026). Zwischenstand war ein grosses, angeschnittenes "4" über dem Foto. Der Weg dahin, und warum er endet: - zuerst 40 px oben rechts -> Owner: "Die 4 oben rechts sieht ein bisschen verloren aus." Zutreffend: 40 px in einer 42-%-Spalte sind ein Aufkleber, kein Gestaltungsmittel. - dann gross und angeschnitten -> Owner: "jetzt ist die 4 grösser und präsenter, finde ich gar nicht schlecht". - mit dem Foto zusammen dann: "ich finde es sieht komisch aus." Die Ursache war nicht das eine oder das andere Motiv, sondern beide gleichzeitig: eine Kolonnade und eine grosse Ziffer sind ZWEI starke Formen, die um dieselbe Fläche streiten. Vier Fassungen nebeneinander gelegt (Foto weich/klar × Zeichen gross/klein/keins), Entscheidung: Foto führt, Zeichen weg. ★ Die Marke fehlt dadurch NICHT: das Lockup steht links über der Karte, gross und in Farbe. Ein zweites Markenzeichen auf derselben Seite ist Wiederholung, keine Wiedererkennung. ★ ZUM FOTO - Motiv: klassische Kolonnade, schwarzweiss. Unmissverständlich rechtsnah und dasselbe Bildvokabular, das die Marketingseiten für JuristData schon benutzen (Säulenarchitektur, Rechtsbibliothek). Ein zuvor geprüftes Betonmotiv war gegenstandslos, aber ohne Bezug zum Haus. - KEINE Personen, KEINE lesbare Schrift, KEINE Flaggen, KEINE Marken — damit weder Modell- noch Eigentumsfreigabe nötig: die Lizenz des Anbieters deckt nur die Rechte des FOTOGRAFEN, nicht die des Abgebildeten. Ein Bibliotheksmotiv wurde genau deshalb verworfen: darauf stand lesbar "Bertelsmann Lexikon" — eine fremde Marke. - Schwarzweiss, damit es sich unter dem Verlauf sauber einfärbt, statt mit ihm zu streiten. - Quelle, Autor und Lizenz stehen in docs/marketing-media-credits.md, wie bei jedem Fremdbild im Haus. Unsplash License: kommerziell, ohne Attributionspflicht. - Nur WebP (81 KB). Ein Browser ohne WebP bekommt keinen Fehler, sondern den Verlauf allein. Das background-color darunter sorgt dafür, dass die Fläche auch bei einem Ladefehler violett bleibt statt durchsichtig zu werden. - Textkontrast auf der Fläche gemessen (13.10.2026): Anspruchszeile weiss 16,4:1, Unterzeile 8,9:1 — beide weit über WCAG AA (4,5:1). */ background-image: radial-gradient(760px 520px at 18% -10%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(200deg, rgba(109, 40, 168, .78) 0%, rgba(88, 28, 135, .82) 46%, rgba(42, 10, 66, .93) 100%), url(/assets/img/auth/auth-panel-web4data-saeulen.webp) !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-position: 0 0, 0 0, center !important; background-size: cover, cover, cover !important; background-blend-mode: normal, normal, normal !important; background-color: #581C87 !important; } /* Der Anspruch. Zwei Zeilen mit zwei Gewichten — darum zwei Pseudo-Elemente: ::after trägt den Satz, ::before die Herkunftszeile. (body::before ist hier frei: login.php belegt es nur, wenn ein Mandant ein eigenes Hintergrundbild hinterlegt hat — auf web4data.de nie.) */ body::after { content: "Software für Kanzleien\A und Unternehmen."; white-space: pre-line; position: fixed; right: 56px; bottom: calc(13% + 46px); width: calc(42% - 112px); max-width: 430px; text-align: right; color: #FFFFFF; font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif; font-size: 30px; font-weight: 600; line-height: 1.28; letter-spacing: -0.4px; z-index: 1; text-wrap: balance; } body::before { content: "Entwickelt und gehostet in Deutschland."; position: fixed; right: 56px; bottom: 13%; width: calc(42% - 112px); max-width: 430px; text-align: right; color: rgba(255, 255, 255, .72); font-family: 'Inter', -apple-system, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; z-index: 1; /* Die Basis-Regel aus login.php für ein Mandanten-Hintergrundbild setzt inset:0 und einen Schleier. Hier ist sie nicht aktiv; die expliziten Werte oben halten das Element trotzdem an seinem Platz, falls diese Datei je neben einem Mandantenbild landet. */ inset: auto 56px 13% auto; background: none; } /* Anmeldespalte mittig in der linken Hälfte */ .login-wrapper, .page-wrapper { margin-left: calc((58% - 420px) / 2) !important; margin-right: 0 !important; } } /* Weniger Bewegung, wenn der Besucher das so eingestellt hat. Die Seite hat eine Einblend-Animation (pageIn); auf einer Anmeldeseite ist sie Zierde. */ @media (prefers-reduced-motion: reduce) { .login-wrapper { animation: none !important; } }