/* =============================================================================
WACAL-Branding fuer die Anmeldeseite (Authelia 4.38)
-----------------------------------------------------------------------------
Authelia kennt nur die Themes light/dark/grey und laesst kein eigenes CSS zu.
Dieses Stylesheet wird von einem schlanken nginx davor eingefuegt.
FARBEN — aus einem Screenshot von shop.wacal.de gemessen (19.08.2026):
#1d205c Dunkelblau Flaechen, Markenkante
#2c2f83 Blau Buttons, Ueberschriften
#b33c26 Terrakotta Aktionen, Auszeichnungen
#d54a31 Hellrot Akzentlinie
#f6f7fb Grau Seitenhintergrund
WACAL nutzt bewusst KEIN Signalrot, sondern einen warmen Ziegelton.
STRUKTUR — headless gerendert und vermessen, nicht geraten:
#root
> div.hidden leer, nimmt aber eine volle Bildschirmhoehe ein
> div.MuiBox-root hier steckt der Inhalt
.MuiToolbar-root schmale Kopfleiste
#first-factor-stage
.MuiContainer-maxWidthXs <- die Anmeldekarte
svg#UserSvg <- Personen-Icon, KEIN
DREI FEHLER DER ERSTEN FASSUNG, damit sie nicht wiederkehren:
1. `#root > div { max-width:560px }` traf den Seitencontainer statt der
Karte. Folge: alles klebte links, die Kopfleiste brach nach 650 px ab.
2. `body:has(.MuiAppBar-root) .MuiContainer-root { max-width:940px }` sollte
nur die Einstellungsseite betreffen, griff aber auch hier und riss die
Kartenbreite auf. Jetzt ueber die maxWidth-Varianten getrennt.
3. `#root > .MuiGrid2-container` ging ins Leere - der Grid-Container ist
kein direktes Kind von #root.
========================================================================== */
:root {
--wacal-blau: #2c2f83;
--wacal-blau-dunkel: #1d205c;
--wacal-rot: #b33c26;
--wacal-rot-dunkel: #a9271c;
--wacal-rot-hell: #d54a31;
--wacal-grau: #f6f7fb;
--wacal-linie: #dde1ea;
--wacal-text: #1a1a1a;
--wacal-text-leise: #5a6270;
}
/* ---------- Seite --------------------------------------------------------- */
html, body { height: 100%; }
body {
background: var(--wacal-grau) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif !important;
color: var(--wacal-text) !important;
margin: 0;
}
/* Markenkante ganz oben ueber die volle Breite - dasselbe Motiv wie im
WACAL-Webshop: tiefblaues Band mit roter Linie darunter. */
body::before {
content: "";
position: fixed; top: 0; left: 0; right: 0; height: 10px;
background: var(--wacal-blau-dunkel);
border-bottom: 3px solid var(--wacal-rot-hell);
z-index: 1300;
}
/* ---------- Layout: senkrecht und waagerecht mittig ----------------------- */
/* Das leere Element schob den Inhalt um eine volle Bildschirmhoehe nach unten,
die Karte lag dadurch ausserhalb des sichtbaren Bereichs. */
#root > div.hidden { display: none !important; }
#root { min-height: 100vh; width: 100%; }
#root > .MuiBox-root {
/* `width:100%` ist der entscheidende Teil: ohne ihn behaelt der Kasten seine
eigene Breite von rund 560 px und sitzt am linken Rand - die Karte darin
ist dann zwar zentriert, aber eben nur innerhalb dieser 560 px. Genau das
war der Grund, warum die Anmeldung links klebte. */
width: 100% !important;
max-width: none !important;
min-height: calc(100vh - 13px);
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 34px 16px 24px;
box-sizing: border-box;
}
/* Auch die Zwischenebenen duerfen die Breite nicht einschnueren. */
#root > .MuiBox-root > .MuiGrid2-container,
#first-factor-stage {
width: 100% !important;
max-width: none !important;
justify-content: center !important;
margin: 0 !important;
}
/* DER GRUND FUER DEN LEEREN BLOCK UEBER DER KARTE - gemessen, nicht geraten:
Authelia gibt `#first-factor-stage` per eigener Regel `.jss7` eine Mindest-
hoehe von 90vh. Dieser Klotz fuellt fast das ganze Fenster, dem aeusseren
Kasten bleibt nichts mehr zu zentrieren. Die Karte sitzt dann mittig in
diesen 90vh - also sichtbar zu tief - und die Fusszeile faellt ans Ende des
Klotzes, weit weg von der Karte. Gemessen bei 757 px Fensterhoehe: Klotz
681 px, Seite 784 px hoch, die Anmeldung scrollte.
Mit `min-height: 0` traegt der Kasten wieder nur seinen Inhalt, und die
Zentrierung des Elternteils greift so, wie sie gemeint war. */
#first-factor-stage {
min-height: 0 !important;
}
/* Authelias schmale Kopfleiste wird nicht gebraucht - die Markenkante oben
uebernimmt ihre Aufgabe. */
/* Der blaue Klotz ueber der Karte ist ein ,
die Toolbar steckt darin. Auf die Toolbar zu zielen ging deshalb ins Leere.
Auf der Anmeldeseite ist der Kopf leer und wird nicht gebraucht - die
Markenkante oben genuegt. In den Einstellungen traegt er den Titel und
bleibt sichtbar. */
#root > .MuiBox-root > header { display: none !important; }
/* ---------- Die Anmeldekarte ---------------------------------------------- */
/* Nur `maxWidthXs` - das ist die schmale Variante, die ausschliesslich die
Anmeldung nutzt. Die Einstellungsseite nimmt eine breitere und bleibt
dadurch unberuehrt. */
.MuiContainer-maxWidthXs {
max-width: 470px !important;
width: 100% !important;
margin: 0 auto !important;
background: #fff;
border: 1px solid var(--wacal-linie);
border-radius: 12px;
box-shadow: 0 6px 28px rgba(29, 32, 92, .10);
padding: 32px 36px 30px !important;
box-sizing: border-box;
}
/* Innerhalb der Karte war der Abstand unter der Ueberschrift mehr als doppelt
so gross wie zwischen den Feldern - das las sich als Loch. Die allgemeine
Ueberschriftenregel weiter unten gilt auch fuer die Einstellungsseite und
bleibt deshalb unberuehrt; hier wird nur die Anmeldekarte gestrafft. */
.MuiContainer-maxWidthXs h1, .MuiContainer-maxWidthXs h2,
.MuiContainer-maxWidthXs h3, .MuiContainer-maxWidthXs h4,
.MuiContainer-maxWidthXs h5, .MuiContainer-maxWidthXs h6 {
/* "Anmelden" ist eine Zwischenueberschrift, nicht der Titel der Seite - den
traegt die Wortmarke darueber. In 25px konkurrierten beide miteinander. */
font-size: 19px !important;
margin: 14px 0 2px !important;
}
/* ---------- Wortmarke statt Personen-Icon --------------------------------- */
/* Zwei Sackgassen davor, damit sie niemand erneut probiert:
1. `img[alt="Authelia"]` - es gibt kein , das Icon ist ein