claude_settings/plans/cheerful-churning-hejlsberg.md

# Plan: Keycloak Theme CSS Fix — Alle Login-Seiten

## Status

- ~~Flaw 1 (Service Unavailable)~~: **ERLEDIGT** — Ursache war das Files-Plugin, vom User deaktiviert
- **Flaw 2 (Theme Layout)**: Offen — CSS-Fix war unvollständig, PatternFly-Overrides fehlen

## Problem-Analyse (aus 4 Screenshots)

### Screenshot 1 — Username-Eingabe
- Logo "egonetix / IT Solutions" + "Log in" Titel LINKS neben der Card, kaum lesbar
- Card enthält nur: Username-Feld, Sign In Button, Passkey-Hint

### Screenshot 2 — Passkey Login
- "Passkey Login" Text LINKS, kaum lesbar
- Card enthält nur: Username, "Sign in with Passkey" Button, "Try Another Way"

### Screenshot 3 — Login-Methode wählen
- "Select login method" Text LINKS, kaum lesbar
- Card enthält: Username, Passkey-Button, Password-Button

### Screenshot 4 — Passwort-Eingabe
- **Mehrere Cards übereinandergestapelt!**
- Eine Card zeigt "robert.wiegand", eine andere das Passwort-Feld
- "Try Another Way" außerhalb beider Cards

## Root Cause

PatternFly v5 `.pf-v5-c-login__main` nutzt intern **CSS Grid** mit grid-template-areas. Das egonetix CSS setzt `display: flex` OHNE `!important`, wodurch PatternFly's Grid gewinnt. Die Kinder (header, body, footer) werden in separate Grid-Areas platziert statt als Flex-Column innerhalb einer Card.

Zusätzlich fehlen Grid-Overrides für `.pf-v5-c-login__container` und PatternFly-Transparenz-Regeln für Footer und innere Wrapper.

## Betroffene Datei

`/home/icke/keycloak/themes/egonetix/login/resources/css/egonetix.css` auf srvdocker02 (10.0.0.48)

## Fix: CSS-Änderungen

### Änderung 1 — Layout-Section: PatternFly-Grid killen

Ersetze den bestehenden Layout-Block:
```css
/* === Layout === */
.pf-v5-c-login,
.login-pf {
    background: transparent !important;
    min-height: 100vh;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pf-v5-c-login__container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
}
```

### Änderung 2 — Card-Section: `!important` auf alle Display/Grid-Properties

Ersetze den Card-Block:
```css
/* === Card (Glassmorphism) === */
.pf-v5-c-login__main {
    background: var(--ego-card-background) !important;
    backdrop-filter: var(--ego-card-backdrop) !important;
    -webkit-backdrop-filter: var(--ego-card-backdrop) !important;
    border-radius: var(--ego-border-radius) !important;
    box-shadow: var(--ego-card-shadow) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: var(--ego-card-padding) !important;
    width: var(--ego-card-width) !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
    /* Kill PatternFly grid, force flex column */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-template-areas: unset !important;
}
```

### Änderung 3 — Children-Section: Footer + Grid-Area-Overrides hinzufügen

Ersetze den Children-Block (`.pf-v5-c-login__main-footer` und `grid-column/grid-row` fehlten):
```css
/* === Children transparent (no double card) === */
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer,
#kc-form,
#kc-content-wrapper,
#kc-form-wrapper,
#kc-header-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Kill PatternFly grid-area assignments */
    grid-column: unset !important;
    grid-row: unset !important;
}
```

### Änderung 4 — Neue Regel: PatternFly-interne Card-Elemente transparent

Hinzufügen nach Children-Block:
```css
/* === Kill PatternFly card styling inside login === */
.pf-v5-c-login__main .pf-v5-c-card,
.pf-v5-c-login__main .pf-v5-c-card__body,
.pf-v5-c-login__main fieldset,
.pf-v5-c-login__main legend {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}
```

### Änderung 5 — Page-Title-Regel erweitern

Ersetze den Title-Block mit breiterer Abdeckung:
```css
/* === Page Title === */
#kc-page-title,
.pf-v5-c-login__main-header h1,
.pf-v5-c-login__main-header-desc,
h1#kc-page-title,
h1.pf-v5-c-title {
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ego-text-primary) !important;
    margin: 0 0 var(--ego-spacing-lg) 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
```

## Deployment

```bash
# 1. CSS lokal editieren und per SCP deployen
scp egonetix.css root@10.0.0.48:/home/icke/keycloak/themes/egonetix/login/resources/css/egonetix.css

# 2. Keycloak neustarten (Theme-Cache leeren)
ssh root@10.0.0.48 'docker restart keycloak'
```

## Verifikation

Alle 4 Seiten im Inkognito-Fenster testen:

| Seite | Was prüfen |
|-------|-----------|
| Username-Eingabe | Logo + "Log in" INNERHALB der Card, zentriert |
| Passkey Login | "Passkey Login" Titel INNERHALB der Card |
| Login-Methode wählen | "Select login method" Titel INNERHALB der Card |
| Passwort-Eingabe | NUR EINE Card, Passwort-Feld darin, kein Stacking |
| Responsive (Handy) | Card füllt Bildschirm, kein Overflow |