/* Hoermann-Gestaltung fuer die Ory-Anmeldeseite (Kratos Self-Service UI). * * WARUM DIESE DATEI SO HEISST: Sie ersetzt `auth-layout.css` der Ory-Anwendung, eingehaengt per * `subPath` ueber `/usr/src/app/public/auth-layout.css` (siehe helm-values.yaml). Das ist die LETZTE * der sechs Stilvorlagen, die die Seite einbindet — damit gewinnt sie in der Kaskade, ohne dass an * der Anwendung selbst etwas geaendert werden muss. Die 224 Byte des Originals stehen unveraendert * am Anfang wieder drin; alles darunter ist neu. * * WARUM UEBERHAUPT: Die Anmeldung des Portals lief bis zum 30.08.2026 ueber oauth2-proxy mit einer * eigenen Hoermann-Seite (apps/qmhoe/oauth2/templates-entra/sign_in.html). Seit der Umstellung auf * Kette B (HOEHPP-2473) sieht ein Anmeldender stattdessen Orys Referenzoberflaeche im Ory-Blau — auf * einer Seite, die Zugangsdaten verlangt, ist ein unerwarteter Auftritt genau das falsche Signal. * Diese Datei zieht beide Seiten auf denselben Auftritt zusammen und erklaert den Unterschied. * * WAS HIER NICHT STEHT: der Text der Anmelde-Schaltflaeche. Der kommt aus `label` am OIDC-Provider * in cargo:apps/qmhoe/security/ory/kratos/helm-values.yaml — dort gehoert er hin, nicht ins CSS. * * DAS IST EINE ZWISCHENLOESUNG. Die richtige Antwort ist der Hoermann-eigene `authentication-service` * (Next.js mit @hoermann/elements-core), der die communicode-Cluster bedient; er braucht auf qmhoe * einen eigenen arm64-Bauweg und ist als spaetere Stufe vorgesehen. Bis dahin traegt diese Datei. * * ZUR TECHNIK: Texte werden ueber `content` an Pseudoelementen eingesetzt, weil die Anwendung keine * Vorlagen zum Ueberschreiben anbietet. Die Verankerung laeuft ueber `data-testid` und * Teilzeichenketten der Klassennamen (`[class*="..."]`), NICHT ueber die vollen Namen: die tragen * einen vanilla-extract-Hash, der sich bei jedem Versionswechsel aendert. Die Chart-Version ist zwar * gepinnt (0.63.0), aber ein Upgrade soll die Seite hoechstens blass machen, nicht zerlegen. * * References: * 1. https://github.com/ory/kratos-selfservice-ui-node * 2. apps/qmhoe/oauth2/templates-entra/sign_in.html (die Schwesterseite, gleiche Marke) */ /* --------------------------------------------------------------------------------------------- * Original aus dem Ory-Image, unveraendert. Ohne diesen Block verliert die Seite ihre Grundanordnung. * --------------------------------------------------------------------------------------------- */ .auth-container { display: flex; flex-direction: column; align-items: center; padding: 4rem; /* we need this padding since the footer will hide content at the bottom of the container */ padding-bottom: 5.5rem; } /* --------------------------------------------------------------------------------------------- * Marke. Dieselben Werte wie in sign_in.html, dort am 18.08.2026 aus dem laufenden Portal GEMESSEN. * Wer sie hier aendert, aendert sie auch dort — sonst driften die beiden Anmeldeseiten auseinander, * und genau das soll diese Datei verhindern. * --------------------------------------------------------------------------------------------- */ body { --hoe-blau: #023a7f; --hoe-blau-dunkel: #00327a; --hoe-gelb: #f8ad0d; --hoe-seite: #e8e8e8; --hoe-karte: #ffffff; --hoe-text: #000000; --hoe-text-leise: #5a5a5a; --hoe-linie: #cccccc; --hoe-flaeche: #e8e8e8; --hoe-knopf: var(--hoe-blau); --hoe-knopf-hover: var(--hoe-blau-dunkel); /* Die Theme-Variablen der Ory-Elemente auf dieselben Werte ziehen. Das faerbt alles mit, was hier nicht einzeln angefasst wird — Fehlermeldungen etwa, die im Regelfall gar nicht erscheinen. */ --ory-theme-font-family: Roboto, "Helvetica Neue", Arial, sans-serif; --ory-theme-accent-def: var(--hoe-knopf); --ory-theme-accent-emphasis: var(--hoe-knopf-hover); --ory-theme-accent-muted: var(--hoe-knopf-hover); --ory-theme-accent-subtle: var(--hoe-flaeche); --ory-theme-foreground-def: var(--hoe-text); --ory-theme-foreground-muted: var(--hoe-text-leise); --ory-theme-foreground-subtle: var(--hoe-text-leise); --ory-theme-foreground-on-accent: #ffffff; --ory-theme-background-surface: var(--hoe-karte); --ory-theme-background-canvas: var(--hoe-seite); --ory-theme-background-subtle: var(--hoe-flaeche); --ory-theme-border-def: var(--hoe-linie); margin: 0; background: var(--hoe-seite); color: var(--hoe-text); font: 300 18px/1.85 Roboto, "Helvetica Neue", Arial, sans-serif; } /* Dunkelmodus. Blau und Gelb bleiben — ein umgefaerbtes Logo waere kein Logo mehr. Der Knopf wird aufgehellt: #023a7f auf dunklem Kartengrund traegt zwar weissen Text, verschwindet aber optisch. */ @media (prefers-color-scheme: dark) { body { --hoe-seite: #16181c; --hoe-karte: #22262c; --hoe-text: #f2f2f2; --hoe-text-leise: #b6bcc4; --hoe-linie: #3a3f47; --hoe-flaeche: #2c3138; --hoe-knopf: #0b55ab; --hoe-knopf-hover: #0d61c2; } } ::selection { background: var(--hoe-blau); color: var(--hoe-gelb); } /* --------------------------------------------------------------------------------------------- * Anordnung: die Karte mittig, wie auf der Schwesterseite. Das Original klebt sie mit 4rem Abstand * an den oberen Rand. * --------------------------------------------------------------------------------------------- */ main[data-testid="app-express"] { display: block; min-height: 100vh; background: var(--hoe-seite); } .auth-container { justify-content: center; min-height: 100vh; padding: 1.5rem; gap: 0; } /* --------------------------------------------------------------------------------------------- * Die Karte. Kein Rundrahmen, kein Schatten — die Hoermann-Flaechen sind rechtwinklig. * `::before` traegt den blauen Kopf mit dem gelben Logo; das Logo steckt als Data-URI in dieser * Datei, weil der Cluster keinen Egress zu Font- oder CDN-Hosts hat. * --------------------------------------------------------------------------------------------- */ [data-testid="login-auth-card"] { position: relative; width: 100%; max-width: 30rem; padding: 0 0 2.5rem; border: 0; border-radius: 0; box-shadow: none; background: var(--hoe-karte); } [data-testid="login-auth-card"]::before { content: ""; display: block; height: 5rem; margin-bottom: 2rem; background: var(--hoe-blau) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%2068%22%3E%3Cpath%20fill%3D%22%23F8AD0D%22%20d%3D%22M18%2C43.4V25.8h6.7V33h4v-7.2h6.7v17.5h-6.7v-7.1h-4v7.1H18z%20M84.6%2C43.4v-9.5l5.7%2C10l6.2-9.7v9.2h6.6V25.8h-5.3L92.6%2C34l-5.2-8.1h-5.7v17.5H84.6z%20M130.3%2C43.4v-8.5l7.7%2C8.5h4.5V25.8h-2.8v9l-8.9-9h-4.1v17.5L130.3%2C43.4L130.3%2C43.4z%20M150%2C43.4v-8.5l7.7%2C8.5h4.5V25.8h-2.8v9l-8.9-9h-4.1v17.5H150z%20M66.8%2C43.4v-7.8l5.2%2C7.8h7.9l-5.8-8c2.4-0.7%2C3.8-3%2C3.5-5.3c-0.3-2.4-2.4-4.2-4.9-4.2H60v17.5H66.8z%20M66.8%2C34.1v-5.5h4v5.6L66.8%2C34.1z%20M104.8%2C43.4h3.1l1-2.4h7.5l1%2C2.4h7.5l-6.8-17.5H112L104.8%2C43.4z%20M115.3%2C38.1H110l2.7-6.5L115.3%2C38.1z%20M40.8%2C25.8c0-1-0.8-1.8-1.8-1.8c-1%2C0-1.8%2C0.8-1.8%2C1.8c0%2C1%2C0.8%2C1.8%2C1.8%2C1.8C39.9%2C27.6%2C40.8%2C26.8%2C40.8%2C25.8%20M58.4%2C25.8c0-1-0.8-1.8-1.8-1.8c-1%2C0-1.8%2C0.8-1.8%2C1.8c0%2C1%2C0.8%2C1.8%2C1.8%2C1.8C57.6%2C27.6%2C58.4%2C26.8%2C58.4%2C25.8%20M57.2%2C34.8c-0.1%2C5.1-4.3%2C9.1-9.5%2C9.1s-9.4-4.2-9.4-9.2c0-5.1%2C4.2-9.1%2C9.4-9.2c2.5%2C0%2C4.9%2C1%2C6.7%2C2.7C56.2%2C30%2C57.2%2C32.3%2C57.2%2C34.8%20M49.7%2C40.8V28.5h-4.1v12.3H49.7z%22%2F%3E%3C%2Fsvg%3E") no-repeat 3rem center; background-size: 130px auto; } /* Die Ory-Elemente sind Raster mit eigenen Abstaenden und Luecken. Bleiben die stehen, stapeln sie sich mit dem Innenabstand der Karte, und die Textspalte wird so schmal, dass die Beschriftung der Schaltflaeche vierzeilig umbricht. Deshalb: alles darunter auf Block ohne eigene Abstaende, und der Innenabstand kommt genau einmal von der obersten Ebene. */ [data-testid="login-auth-card"] div, [data-testid="login-auth-card"] form { display: block; padding: 0; gap: 0; } [data-testid="login-auth-card"] > div { padding: 0 3rem; } /* --------------------------------------------------------------------------------------------- * Ueberschrift. Das Original sagt "Sign in" — englisch, obwohl die Seite deutsch ausgeliefert wird, * und ohne jeden Hinweis auf Umgebung oder Anbieter. Der Originaltext wird auf Groesse 0 gesetzt * statt auf `display: none`, damit er fuer Vorleseprogramme erhalten bleibt. * `::before` traegt die Umgebungs-Kennzeichnung, `::after` die eigentliche Ueberschrift. * --------------------------------------------------------------------------------------------- */ [data-testid="login-auth-card"] h2 { font-size: 0; margin: 0; } [data-testid="login-auth-card"] h2::before { content: "QM-Umgebung · Ory Kratos"; display: inline-block; margin: 0 0 1.25rem; padding: 0.15rem 0.6rem 0.15rem 0.5rem; border-left: 4px solid var(--hoe-gelb); background: var(--hoe-flaeche); color: var(--hoe-text-leise); font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; text-transform: uppercase; } [data-testid="login-auth-card"] h2::after { content: "Anmeldung"; display: block; color: var(--hoe-text); font-size: 40px; font-weight: 300; line-height: 1.25; margin: 0 0 0.75rem; } /* Die Trennlinien der Vorlage entfallen: sie zerschneiden eine Karte, die nur eine Handlung hat. */ [data-testid="login-auth-card"] hr { display: none; } /* --------------------------------------------------------------------------------------------- * Einleitung ueber der Schaltflaeche, und darunter der Hinweis auf das Sprungziel. Nach der * Safe-Browsing-Warnung vom 18.08.2026 ist der zweite Satz der wichtigste der Seite: wer den Sprung * zu Microsoft erwartet, erschrickt nicht — und wer ihn nicht erwartet, ist genau die Person, die * eine echte Phishing-Seite nicht erkennt. * --------------------------------------------------------------------------------------------- */ [data-testid="login-flow-oidc"]::before { content: "Zugang zum Produktportal — dieser Bereich ist internen Mitarbeitenden vorbehalten."; display: block; margin: 0 0 1.5rem; color: var(--hoe-text-leise); font-size: 16px; line-height: 1.6; } [data-testid="login-flow-oidc"]::after { content: "Sie werden zur Anmeldung an login.microsoftonline.com weitergeleitet."; display: block; margin: 0.75rem 0 0; color: var(--hoe-text-leise); font-size: 15px; line-height: 1.6; } /* --------------------------------------------------------------------------------------------- * Die Anmelde-Schaltflaeche. Blau und nicht gelb wie der LOGIN-Knopf des Portals: auf Gelb * verschwindet das gelbe Quadrat des Microsoft-Logos (#ffb900 auf #f8ad0d), und gerade das Logo * traegt hier die Aussage. Ebenfalls wie auf der Schwesterseite KEINE Grossbuchstaben — der Text ist * zu lang und braeche sonst um. * --------------------------------------------------------------------------------------------- */ [class*="ory_elements__button_social"] { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; width: 100%; min-height: 55px; padding: 0.85rem 1.25rem; border: 1px solid transparent; border-radius: 0; background: var(--hoe-knopf); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: left; text-transform: none; cursor: pointer; transition: background 300ms ease-in-out; } [class*="ory_elements__button_social"]:hover { background: var(--hoe-knopf-hover); } [class*="ory_elements__button_social"]:focus-visible { outline: 3px solid rgba(2, 58, 127, 0.25); outline-offset: 2px; } /* Das Symbol im Knopf. Die Vorlage setzt hier `fa-brands fa-aad`, ein Zeichen, das die mitgelieferte Font-Awesome-Fassung nicht kennt — es bleibt leer. Ersetzt durch dieselben vier Microsoft-Quadrate, die auf der Schwesterseite stehen. Das zweite Symbol der Vorlage ist unsichtbar und haelt nur den Platz fuer die Zentrierung; da die Beschriftung hier linksbuendig steht, nimmt es der Beschriftung nur Breite weg und faellt deshalb weg. */ [class*="ory_elements__button_social"] i:last-of-type { display: none; } [class*="ory_elements__button_social"] i:first-of-type { flex: 0 0 auto; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%229%22%20height%3D%229%22%20fill%3D%22%23f25022%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%221%22%20width%3D%229%22%20height%3D%229%22%20fill%3D%22%237fba00%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%2211%22%20width%3D%229%22%20height%3D%229%22%20fill%3D%22%2300a4ef%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%229%22%20height%3D%229%22%20fill%3D%22%23ffb900%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; } /* --------------------------------------------------------------------------------------------- * Der Fussbereich der Karte. Im Original steht dort "Don\2019t have an account? Sign up" — auf einer * Umgebung, deren Konten aus dem Entra-Tenant kommen, ist das schlicht falsch: registrieren kann sich * hier niemand, der Verweis fuehrt in einen Ablauf, der nur wieder bei Entra endet. * * An seine Stelle tritt die Erklaerung, warum diese Seite anders aussieht als die andere. Ohne sie * ist der Unterschied zwischen den beiden Anmeldeseiten fuer einen Anmeldenden nicht einzuordnen — * und "sieht heute anders aus" ist bei einer Anmeldeseite kein harmloser Eindruck. * --------------------------------------------------------------------------------------------- */ [class*="ory_elements__message"] { display: block; font-size: 0; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hoe-linie); text-align: left; } /* Ebenfalls mit Karten-Vorfahren, aus demselben Grund wie unten beim Kennwort-Formular: ohne ihn gewinnt die `display: block`-Regel der Rasterelemente, und der Registrieren-Verweis kommt zurueck. */ [data-testid="login-auth-card"] [class*="ory_elements__message"] > * { display: none; } [class*="ory_elements__message"]::before { content: "Diese Seite gehört zu Ory Kratos; andere Oberflächen der Umgebung zeigen eine anders gestaltete — beide führen zu demselben Konto."; display: block; margin: 0 0 0.75rem; color: var(--hoe-text-leise); font-size: 15px; line-height: 1.5; } /* Der Hinweis auf das Plattform-Team, wortgleich zur Schwesterseite. Als Pseudoelement ohne klickbaren Verweis — `content` kann keinen Link erzeugen. Wer hier landet, kommt gerade nicht weiter; die Adresse abzuschreiben ist zumutbarer, als sie gar nicht zu nennen. */ [class*="ory_elements__message"]::after { content: "Kein Zugang, obwohl die Anmeldung gelingt? Dann fehlt die Freigabe für diese Umgebung. Plattform-Team: t.groeger.vkg@hoermann.de oder f.kueppers.vkg@hoermann.de"; display: block; color: var(--hoe-text-leise); font-size: 15px; line-height: 1.5; } /* --------------------------------------------------------------------------------------------- * Orys Fusszeile ("Protected by ORY"). Bleibt stehen — sie ist die ehrliche Auskunft darueber, * welche Anwendung diese Seite ausliefert, und beim Melden eines Anmeldeproblems die schnellste * Antwort auf die Frage "welche Anmeldeseite war es". Nur leiser gestellt. * --------------------------------------------------------------------------------------------- */ .ory-branding { opacity: 0.45; margin-top: 2rem; } /* --------------------------------------------------------------------------------------------- */ @media (max-width: 768px) { [data-testid="login-auth-card"]::before { height: 4.5rem; background-position-x: 1.5rem; } [data-testid="login-auth-card"] > div { padding: 0 1.5rem; } [data-testid="login-auth-card"] h2::after { font-size: 30px; } } /* --------------------------------------------------------------------------------------------- * Das Kennwort-Formular ausblenden. * * Seit dem 31.08.2026 ist in Kratos das Verfahren `password` eingeschaltet — nicht fuer Menschen, * sondern weil sich eine Maschine ohne Identity Provider nicht anmelden kann (iHaaS-Rueckruf, * HOEHPP-2476). Kratos kennt diese Unterscheidung nicht: das Verfahren gilt global, und die * Anmeldeseite bietet daraufhin allen ein Feld fuer Name und Kennwort an. * * Fuer einen Menschen ist es eine Falle. Die menschlichen Identitaeten haben keine * Kennwort-Zugangsdaten — jeder Versuch scheitert, und zwar mit einer Meldung, die nach einem * falschen Kennwort aussieht statt nach dem falschen Weg. Wer es zweimal probiert, meldet ein * Anmeldeproblem, das keines ist. * * Ausgeblendet und nicht entfernt: Kratos liefert das Formular weiter aus, der API-Anmeldefluss der * Maschinen bleibt also unberuehrt — er benutzt die Oberflaeche ohnehin nicht. * * ZU DEN SELEKTOREN: Das Kennwort-Formular traegt `data-testid="login-flow"`, das OIDC-Formular * `login-flow-oidc`. Die Namen legen das Gegenteil nahe — es gibt kein `login-flow-password` —, * deshalb steht es hier: am 31.08.2026 gegen die ausgelieferte Seite geprueft, nicht angenommen. * Der Vergleich muss exakt sein (`=`, nicht `^=`), sonst verschwindet die OIDC-Schaltflaeche mit. * --------------------------------------------------------------------------------------------- */ /* SPEZIFITAET IST HIER DER GANZE WITZ. Weiter oben setzt `[data-testid="login-auth-card"] form` die Rasterelemente auf `display: block` — Spezifitaet (0,1,1). Ein Ausblenden mit blossem `[data-testid="login-flow"]` hat (0,1,0) und verliert, egal wie weit unten es steht. Am 31.08.2026 genau so passiert: die Regel stand da, das Formular blieb sichtbar. Deshalb tragen alle Ausblendungen den Karten-Vorfahren mit — damit (0,2,x) gegen (0,1,1) gewinnt — und nicht `!important`, das den naechsten Leser ratlos laesst. */ [data-testid="login-auth-card"] form[data-testid="login-flow"], [data-testid="login-auth-card"] [data-testid="forgot-password-link"], [data-testid="login-auth-card"] [data-testid="signup-link"] { display: none; }