/*
  Anmeldevorgang im Erscheinungsbild von LaaS Excellence.

  Gilt fuer JEDEN Bildschirm des Vorgangs, nicht nur fuer die Eingabe von
  Benutzername und Passwort: Fehlermeldung, zweiten Faktor einrichten,
  zweiten Faktor eingeben, Passwort aendern, abgelaufene Seite, Abmelden,
  Hinweis- und Fehlerseiten.

  Farbwerte, Radien und Formen sind dieselben wie in
  frontend/src/app/globals.css (Lastenheft Kapitel 11.2/11.3, Stand
  feat/redesign vom 19.08.2026). Wer sie dort aendert, aendert sie hier mit -
  einen gemeinsamen Ort dafuer gibt es nicht, weil Portal und Anmeldedienst
  zwei getrennte Anwendungen sind.

  Ziel: Wer sich anmeldet, soll nicht merken, dass dahinter ein eigener
  Anmeldedienst steht. Kein fremdes Logo, keine fremde Hintergrundgrafik,
  keine fremde Schrift, keine englischen Reste.

  Vier Regeln des Design-Systems, die diese Datei bewusst umsetzt
  (Ueberarbeitung vom 19.08.2026, DESIGN-UEBERARBEITUNG.md):

  - KEIN Schatten im Ruhezustand (Regel 8). Die Karte begrenzt die
    1-px-Linie, nicht ein Schatten.
  - Formularfehler laufen NICHT ueber Ampelrot (Regel 2). Der Fehlerrand
    ist dieselbe Tinte wie die Grundlinie, aber voll deckend; dazu das
    Warnzeichen und der Text in der kraeftigsten Tinte - dasselbe Muster
    wie components/Fehlermeldung.tsx im Portal.
  - Eingabefelder tragen die Feldflaeche (Regel 13): hell reines Weiss,
    dunkel heller als die Karte - sonst verschmilzt das Feld mit ihr.
  - Fokus: 2 px durchgezogen in Klarblau, 2 px Abstand (Regel 10).

  --------------------------------------------------------------------------
  WIE HIER GEARBEITET WIRD (bitte lesen, bevor etwas ergaenzt wird)
  --------------------------------------------------------------------------

  Keycloak baut seine Oberflaeche mit PatternFly 5. Jeder Baustein dort ist
  ueber eigene CSS-Variablen einstellbar, etwa
  --pf-v5-c-button--m-primary--BackgroundColor. Diese Variablen zu setzen ist
  der richtige Weg; dieselbe Eigenschaft mit !important zu ueberschreiben ist
  der falsche. Der Unterschied zeigt sich bei Zustaenden: Wer background mit
  !important setzt, faerbt Zeiger- und Fokuszustand gleich mit ein und muss
  danach jeden einzelnen wieder freiraeumen.

  !important steht deshalb nur dort, wo PatternFly keine Variable anbietet -
  im Wesentlichen beim Hintergrundbild, das Keycloak fest verdrahtet.
*/

/* ------------------------------------------------------------- Schriften -- */

/*
  Dieselben zwei Ebenen wie im Portal (Kapitel 11.3, G9-5, OF-8; seit dem
  CD-Paket vom 19.08.2026 die Hausschriften der Kanzlei, "Corporate A S E"
  von Kurt Weidemann): Corporate S traegt die Oberflaeche, Corporate A die
  Marke und die Seitentitel - der Demi-Schnitt, wie in den Word-Vorlagen
  der Kanzlei, hier als Gewicht 700 eingehaengt.

  Ausgeliefert werden sie von uns selbst, wie im Portal auch. Kein Aufruf an
  fonts.googleapis.com: Das waere ausgerechnet auf der Anmeldeseite eine
  Verbindung zu einem Dritten, die niemand bestellt hat.

  ⚠️ KOMMERZIELLE Schriften (kein OFL) - Herkunft und offene Lizenzfrage
  stehen in resources/fonts/LIESMICH.md.
*/
/* size-adjust wie im Portal (layout.tsx): Corporate S hat eine kleine
   x-Hoehe (0,474 em; Plus Jakarta Sans davor: 0,536 em) - ohne die
   Skalierung wirkte dieselbe px-Groesse ploetzlich kleiner und schmaler. */
@font-face {
  font-family: "Corporate S Portal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 113%;
  src: url("../fonts/CorporateS-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Corporate S Portal";
  font-style: normal;
  /* Kein 500er-Schnitt in der Familie - der Demi deckt 500 bis 700 ab,
     damit halbfette Beschriftungen nicht synthetisch verbreitert werden. */
  font-weight: 500 700;
  font-display: swap;
  size-adjust: 113%;
  src: url("../fonts/CorporateS-Demi.woff2") format("woff2");
}
@font-face {
  font-family: "Corporate A Portal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  /* Milder als die Sans: x-Hoehe 0,475 em gegen 0,500 em von PT Serif. */
  size-adjust: 105%;
  src: url("../fonts/CorporateA-Demi.woff2") format("woff2");
}

/* ---------------------------------------------------------------- Farben -- */

:root {
  --laas-schrift:
    "Corporate S Portal", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --laas-schrift-marke: "Corporate A Portal", Georgia, "Times New Roman", serif;

  /* Markenfarben - seit dem CD-Paket vom 19.08.2026 (Logokit der Kanzlei,
     Ampelfarben Koralle/Petrol/Blau); dieselben Werte wie in
     frontend/src/app/globals.css, die Herleitung steht dort. */
  --laas-tiefblau: #024e7c;
  --laas-klarblau: #0272b5;

  /* Rollenfarben, heller Zustand */
  --laas-grund: #fbfafa;
  --laas-karte: #ffffff;
  --laas-flaeche: #f2f2f2;
  /* Feldflaeche (Regel 13): hell reines Weiss, dunkel heller als die
     Karte. Eigener Wert, weil er sich anders dreht als die Karte. */
  --laas-feld: #ffffff;
  /* Die Grundlinie ist zu 12 % deckende Schwarztinte - halbtransparent,
     damit sie auf jeder Flaeche gleich ruhig wirkt. */
  --laas-rahmen: rgb(15 13 13 / 0.12);
  --laas-rahmen-stark: rgb(15 13 13 / 0.18);
  --laas-text-primaer: #0f0d0d;
  --laas-text-koerper: #3a3636;
  --laas-text-sekundaer: #655e5b;

  --laas-aktion: #0272b5;
  --laas-aktion-hover: #027ac1;

  /* Seit dem 19.08.2026 auf 0 - dieselbe Entscheidung wie im Portal
     (DESIGN-SYSTEM.md, Abweichung 10): eckiges Design, kein KI-Look. */
  --laas-radius-karte: 0px;
  --laas-radius-feld: 0px;
}

/*
  Dunkler Zustand - dieselben Werte wie im Portal (G9-3, OF-6, OF-24).

  Gesetzt wird er von resources/js/darstellung.js: gespeicherter Wunsch,
  sonst die Uhrzeit in Wien (17:00-05:00). Ausdruecklich NICHT ueber
  prefers-color-scheme - sonst haette dieselbe Person auf demselben Rechner
  ein helles Portal und eine dunkle Anmeldung.

  Zur Begruendung der Werte (alles sichtbar, aber nichts blendet, samt
  gemessener Kontraste) steht der lange Text in
  frontend/src/app/globals.css.
*/
:root[data-theme="dark"] {
  --laas-grund: #151312;
  --laas-karte: #201d1c;
  --laas-flaeche: #2a2726;
  /* Das Feld ist die hellste neutrale Flaeche - heller als die Karte,
     damit es sich abhebt statt zu verschmelzen (Regel 13). */
  --laas-feld: #2a2726;
  --laas-rahmen: rgb(255 255 255 / 0.12);
  --laas-rahmen-stark: rgb(255 255 255 / 0.2);
  --laas-text-primaer: #ece7e4;
  --laas-text-koerper: #d8d2cf;
  --laas-text-sekundaer: #a8a09c;

  --laas-klarblau: #62b1e5;

  --laas-aktion: #0277bc;
  --laas-aktion-hover: #027ac1;

  /* Damit auch Bildlaufleisten und Auswahllisten des Browsers passen. */
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* --------------------------------------------------------- Grundflaeche -- */

/*
  Keycloak legt ueber #keycloak-bg eine dunkle Fotografie. Die muss weg, sonst
  steht das Portal auf fremdem Grund. Hier ist !important noetig: Der Wert
  steht im Elterntheme direkt an der Regel, nicht in einer Variablen.

  An ihre Stelle tritt eine ruhige, einfarbige Flaeche - genau wie auf der
  Anmeldeseite des Portals (app/login/page.tsx). Bewusst ohne Verlauf: Das
  Portal arbeitet mit ruhigen Flaechen und Karten, nicht mit Effekten.
*/
html,
body#keycloak-bg,
.login-pf body,
body {
  background: var(--laas-grund) !important;
  background-image: none !important;
  color: var(--laas-text-primaer);
  font-family: var(--laas-schrift);
  min-height: 100vh;
}

body {
  /* Der Wechsel um 17:00 soll nicht wie ein Blitz wirken. */
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

/*
  PatternFly bringt fuer die Klasse pf-v5-theme-dark eine eigene, graue
  Palette mit. Wir setzen die Klasse selbst (siehe darstellung.js), damit
  Auswahllisten, Bildlaufleisten und Fokusringe mitziehen - die Flaechen
  darin sollen aber unsere Toene sein, nicht das PatternFly-Grau.
*/
:root.pf-v5-theme-dark body {
  background-color: var(--laas-grund);
  color: var(--laas-text-primaer);
}

:root.pf-v5-theme-dark .pf-v5-c-login__main {
  background-color: var(--laas-karte);
}

/* ------------------------------------------------------------ Wortmarke -- */

/* Das Logo des Anmeldedienstes ist eine Hintergrundgrafik - ersatzlos weg. */
div.kc-logo-text {
  background-image: none !important;
  height: auto !important;
  width: auto !important;
  margin: 0 auto 0.25rem !important;
}

div.kc-logo-text span {
  display: inline !important;
}

/*
  Ueber der Wortmarke steht das Signet des Portals: die Ampel der Kanzlei
  aus der Seitenleiste (Seitenleiste.tsx, Funktion Markenzeichen) - drei
  ueberlappende Kreise zu 75 % Deckkraft, Geometrie und Farben aus dem
  Logokit des CD-Pakets vom 19.08.2026 (DrT_Kompetenzampel.svg). Sie steht
  frei, ohne Kastenflaeche - wie im Logokit neben der schwarzen Wortmarke.
  Das ist der Wiedererkennungsanker, der die Anmeldung von einer beliebigen
  Maske unterscheidet.

  Als ::before mit eingebetteter SVG-Grafik, nicht ueber displayNameHtml:
  Der HTML-Filter von Keycloak laesst kein SVG durch, und eine zweite
  Bilddatei waere ein zweiter Ort, an dem das Zeichen gepflegt wird.
*/
#kc-header-wrapper::before {
  content: "";
  display: block;
  /* Proportionen der Ampel (16,76 : 31,27) bei 44 px Hoehe. */
  width: 1.5rem;
  height: 2.75rem;
  margin: 0 auto 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.76 31.27'%3E%3Ccircle cx='8.04' cy='8.12' r='5.6' fill='%23e86c69' opacity='0.75'/%3E%3Ccircle cx='8.04' cy='22.97' r='5.6' fill='%23027ac1' opacity='0.75'/%3E%3Ccircle cx='8.04' cy='15.55' r='5.6' fill='%23258e8b' opacity='0.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/*
  Die Wortmarke aus realm.displayNameHtml, gesetzt wie im Portal:
  Corporate A Demi, minimal enger gestellt.
*/
#kc-header-wrapper {
  /*
    !important ist hier unvermeidbar: Das Elterntheme setzt in styles.css
    Zeile 74 selbst `color: ... !important` auf Weiss - passend zu seiner
    dunklen Hintergrundfotografie, die wir entfernt haben. Ohne Gegenwehr
    stuende "LaaS" weiss auf hellem Grund, also unsichtbar.
  */
  color: var(--laas-text-primaer) !important;
  font-family: var(--laas-schrift-marke);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.2;
  padding-bottom: 0.25rem;
}

/*
  Die Wortmarke ist einfarbig - genau wie im Portal (app/login/page.tsx,
  components/dashboard/Kopfzeile.tsx). Dort steht sie durchgehend in
  text-primaer, nirgends zweifarbig.

  Vorher war "Excellence" tuerkis abgesetzt. Das sah gut aus und war trotzdem
  falsch, aus zwei Gruenden: Gemessen kam Tuerkis auf hellem Grund auf 2,6:1,
  NFR-05 verlangt fuer Schrift dieser Groesse mindestens 3:1. Und Kapitel 11.2
  weist Tuerkis den Zustaenden und Interaktionen zu, nicht der Marke.
*/
#kc-header-wrapper .laas-marke-zusatz {
  display: block;
  font-family: var(--laas-schrift);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--laas-text-sekundaer);
  margin-top: 0.35rem;
}

/* ---------------------------------------------------------------- Karte -- */

.pf-v5-c-login__container {
  --pf-v5-c-login__container--MaxWidth: 26rem;
  --pf-v5-c-login__container--xl--MaxWidth: 26rem;
  --pf-v5-c-login__container--xl--GridTemplateColumns: 26rem;
}

/*
  Die Einrichtung des zweiten Faktors ist der einzige Bildschirm mit einer
  vierstufigen Anleitung samt Schluessel. In 26 rem bricht dort jede zweite
  Zeile um. Er - und nur er - bekommt deshalb mehr Platz.

  :has() waehlt den Container anhand dessen aus, was in ihm steht. Kann ein
  Browser das nicht, bleibt die Karte schmal: enger gesetzt, aber vollstaendig
  bedienbar.
*/
.pf-v5-c-login__container:has(#kc-totp-settings) {
  --pf-v5-c-login__container--MaxWidth: 34rem;
  --pf-v5-c-login__container--xl--MaxWidth: 34rem;
  --pf-v5-c-login__container--xl--GridTemplateColumns: 34rem;
}

/*
  Kein Schatten im Ruhezustand (Regel 8) - die 1-px-Linie begrenzt die
  Karte, wie bei jeder Karte im Portal seit dem 06.08.2026.
*/
.pf-v5-c-login__main {
  --pf-v5-c-login__main--BackgroundColor: var(--laas-karte);
  --pf-v5-c-login__main--BoxShadow: none;
  border: 1px solid var(--laas-rahmen);
  border-radius: var(--laas-radius-karte);
  color: var(--laas-text-primaer);
}

/* Karteninnenabstand 24 px - dasselbe Mass wie jede Portalkarte. */
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pf-v5-c-login__main-header {
  padding-bottom: 0.75rem;
}

/*
  Seitentitel: die H1 des Bildschirms, deshalb die Markenebene (Corporate A),
  20 px aus der Schriftskala 10/12/14/16/20/24/... - keine Zwischengroessen.
*/
#kc-page-title {
  color: var(--laas-text-primaer);
  font-family: var(--laas-schrift-marke);
  font-size: 1.25rem;
  /* Der Demi-Schnitt ist als 700 eingehaengt - er ist der Titelschnitt
     der Word-Vorlagen der Kanzlei. */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* -------------------------------------------------------------- Formular -- */

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: var(--laas-text-primaer);
  font-weight: 600;
  font-size: 0.875rem;
}

/*
  Das Sternchen an Pflichtfeldern. Nicht in Rot: Ampelrot gehoert den
  Fristen, nicht den Formularen (Regel 2).
*/
.pf-v5-c-form__label-required {
  color: var(--laas-text-sekundaer);
}

/*
  Eingabefelder.

  PatternFly baut ein Feld aus einem <span class="pf-v5-c-form-control"> mit
  dem <input> darin. Den Rahmen zeichnet nicht das Feld selbst, sondern sein
  ::before, die dickere Linie unten sein ::after. Wer stattdessen span UND
  input je einen eigenen Rahmen gibt, bekommt einen Kasten im Kasten - genau
  das war hier frueher zu sehen.

  Richtig ist: die untere Linie abschalten, den Rahmen ueber die Variablen von
  ::before setzen, die Ecken runden.

  Masse wie im Portal (Formularbausteine.tsx, eingabestil): Schrift 14 px,
  Innenabstand 10 auf 14 px, Feldflaeche nach Regel 13.
*/
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--laas-feld);
  --pf-v5-c-form-control--Color: var(--laas-text-primaer);
  --pf-v5-c-form-control--FontSize: 0.875rem;
  --pf-v5-c-form-control--PaddingTop: 0.625rem;
  --pf-v5-c-form-control--PaddingBottom: 0.625rem;
  --pf-v5-c-form-control--PaddingLeft: 0.875rem;
  --pf-v5-c-form-control--PaddingRight: 0.875rem;
  --pf-v5-c-form-control--before--BorderTopColor: var(--laas-rahmen);
  --pf-v5-c-form-control--before--BorderRightColor: var(--laas-rahmen);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--laas-rahmen);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--laas-rahmen);
  --pf-v5-c-form-control--before--BorderTopWidth: 1px;
  --pf-v5-c-form-control--before--BorderRightWidth: 1px;
  --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--before--BorderLeftWidth: 1px;
  /* Die dicke Linie unten ist PatternFly-Handschrift, nicht unsere. */
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-error--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--m-placeholder--Color: var(--laas-text-sekundaer);
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--laas-flaeche);
  border-radius: var(--laas-radius-feld);
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-radius: var(--laas-radius-feld);
}

/*
  Das <input> selbst traegt weder Rahmen noch eigene Flaeche.

  UND KEINEN EIGENEN FOKUSRING (11.08.2026). Chrome zeichnet auf einem
  fokussierten Feld von sich aus `outline: auto` mit `outline-offset: -2px` -
  also INNEN. Das ist normalerweise unsichtbar, weil es genau auf dem eigenen
  Rahmen liegt; hier hat das <input> aber `border: 0` und keinen Radius, und
  der Ring wurde als scharfkantiges Rechteck INNERHALB des runden Feldes
  sichtbar. Gemessen: `border-radius: 0px`, `outline: auto 1px rgb(0,95,204)`.

  Weggenommen wird er, nicht gerundet: Der aeussere Ring an
  `.pf-v5-c-form-control:focus-within` steht schon da und ist rund. Zwei
  Ringe uebereinander sind einer zu viel - und ein gerundeter innerer waere
  immer noch der zweite.

  <b>Der Fokus bleibt damit sichtbar</b> (NFR-05, WCAG 2.4.7): Der Ring des
  umgebenden <span> erscheint ueber `:focus-within`, sobald das <input> darin
  den Fokus hat. Ohne diesen Ring duerfte hier nichts abgeschaltet werden.
*/
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
}

.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > select:focus-visible,
.pf-v5-c-form-control > textarea:focus,
.pf-v5-c-form-control > textarea:focus-visible {
  outline: none;
}

/*
  Fokus an Eingabefeldern: der VERSTAERKTE RAHMEN, kein Aussenring
  (19.08.2026, auf Anweisung). Ring plus gefaerbter Rahmen wirkten wie
  eine doppelte, dicke Umrandung - und ein Textfeld zaehlt in Chrome auch
  beim Mausklick als :focus-visible, der Ring stand also bei jedem Klick
  da. Der Innenschatten macht aus dem 1-px-Rahmen eine 2-px-Kante, ohne
  dass das Feld springt. Knoepfe und Links behalten ihren Tastatur-Ring
  (Regel 10) - dort gibt es keinen Rahmen, der es uebernehmen koennte.
*/
.pf-v5-c-form-control:focus-within {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--laas-klarblau);
  border-radius: var(--laas-radius-feld);
}

.pf-v5-c-form-control:focus-within::before {
  border-color: var(--laas-klarblau);
}

/*
  Ausgefuellte Felder faerbt Chrome von sich aus blassgelb ein. Im dunklen
  Zustand steht dann ein hellgelber Balken mitten in der Karte.
*/
.pf-v5-c-form-control > input:-webkit-autofill,
.pf-v5-c-form-control > input:-webkit-autofill:hover,
.pf-v5-c-form-control > input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--laas-text-primaer);
  -webkit-box-shadow: inset 0 0 0 100px var(--laas-feld);
  caret-color: var(--laas-text-primaer);
}

/*
  Fehlerzustand eines Feldes - OHNE Ampelrot (Regel 2, dasselbe Muster wie
  components/Fehlermeldung.tsx im Portal): Der Rand ist dieselbe Tinte wie
  die Grundlinie, aber voll deckend statt zu 12 % - derselbe Ton, ein
  sichtbar anderer Strich. Das Warnzeichen im Feld und der Text darunter
  tragen die Aussage; die Randstaerke bleibt bei 1 px, damit das Formular
  beim Erscheinen der Meldung nicht springt.
*/
.pf-v5-c-form-control.pf-m-error {
  --pf-v5-c-form-control--before--BorderTopColor: var(--laas-text-primaer);
  --pf-v5-c-form-control--before--BorderRightColor: var(--laas-text-primaer);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--laas-text-primaer);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--laas-text-primaer);
  --pf-v5-c-form-control--m-error__icon--m-status--Color: var(
    --laas-text-primaer
  );
}

/*
  Fehlertext unter dem Feld. Nach Kapitel 11.2 nie allein ueber Farbe - das
  Warnzeichen im Feld bleibt stehen, und der Text sagt in Worten, was los
  ist. Er laeuft in der kraeftigsten Tinte, nicht in Rot (Regel 2).

  Achtung bei Erweiterungen: Die Klasse kc-feedback-text gehoert NICHT hierher.
  Keycloak vergibt sie zwar am Fehlertext, aber ebenso an der Ueberschrift
  jedes Hinweisstreifens - auch am gelben "Sie muessen einen zweiten Faktor
  einrichten". Wer sie hier aufnimmt, schrumpft diesen Hinweis auf
  Fussnotengroesse.
*/
/* Keycloak haengt an die Kennung den Feldnamen an (input-error-username,
   input-error-password) - deshalb der Praefix-Selektor statt einer Liste,
   die beim naechsten Bildschirm unvollstaendig waere. */
.pf-v5-c-helper-text__item.pf-m-error,
.pf-v5-c-helper-text__item-text.pf-m-error,
[id^="input-error"] {
  color: var(--laas-text-primaer);
  font-size: 0.75rem;
  font-weight: 500;
}

/*
  Keycloak laesst an mehreren Stellen eine leere Feldgruppe stehen - dort
  saessen "Angemeldet bleiben" und "Passwort vergessen", beides ist in diesem
  Realm abgeschaltet. Sichtbar ist davon nur eine Luecke ueber dem Knopf.

  :empty geht hier nicht: Zwischen den beiden Tags stehen Zeilenumbruch und
  Einrueckung, und die zaehlen als Inhalt. :not(:has(*)) fragt stattdessen,
  ob ueberhaupt ein Element darin steckt.
*/
.pf-v5-c-form__group:not(:has(*)) {
  display: none;
}

/* Feldgruppe mit Knopf daneben (Passwort einblenden, Anmeldung neu starten). */
.pf-v5-c-input-group {
  --pf-v5-c-input-group--BackgroundColor: transparent;
  gap: 0.5rem;
}

/* Ankreuzfelder ("Von anderen Geraeten abmelden"). */
.pf-v5-c-check__input,
input[type="checkbox"] {
  accent-color: var(--laas-aktion);
  width: 1rem;
  height: 1rem;
}

.pf-v5-c-check__label,
label {
  color: var(--laas-text-primaer);
  font-size: 0.875rem;
}

/* --------------------------------------------------------- Schaltflaechen -- */

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: var(--laas-radius-feld);
  --pf-v5-c-button--FontWeight: 600;
  font-family: var(--laas-schrift);
}

/*
  Hauptschaltflaeche. Im hellen Zustand Tiefblau wie im Portal, im dunklen ein
  kraeftigeres Blau - ein dunkler Knopf auf dunklem Grund waere kaum zu sehen.
  Genau dafuer gibt es --laas-aktion. Masse wie der Anmeldeknopf des Portals
  (app/login/page.tsx): Schrift 14 px, halbfett, 10 px Innenabstand.
*/
.pf-v5-c-button.pf-m-primary,
input.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--laas-aktion);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--laas-aktion-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--laas-aktion-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--laas-aktion-hover);
  --pf-v5-c-button--m-primary--Color: #ffffff;
  --pf-v5-c-button--m-primary--hover--Color: #ffffff;
  --pf-v5-c-button--m-primary--focus--Color: #ffffff;
  --pf-v5-c-button--m-primary--active--Color: #ffffff;
  font-size: 0.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Fokus auch am Knopf: 2 px durchgezogen, 2 px Abstand (Regel 10). */
.pf-v5-c-button:focus-visible {
  outline: 2px solid var(--laas-klarblau);
  outline-offset: 2px;
}

/*
  Der Knopf neben einem Feld (Auge zum Einblenden, Pfeil zum Neustart). Er
  gehoert optisch zum Feld: gleicher Rahmen, gleiche Ecken. Hover hebt wie
  bei den ruhigen Knoepfen des Portals nur die Linie an (rahmen-stark),
  keine Farbflaeche (Regel 9).
*/
.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--BackgroundColor: var(--laas-feld);
  --pf-v5-c-button--m-control--Color: var(--laas-text-sekundaer);
  --pf-v5-c-button--m-control--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--active--after--BorderBottomWidth: 0;
  border: 1px solid var(--laas-rahmen);
  border-radius: var(--laas-radius-feld);
  background-color: var(--laas-feld);
  color: var(--laas-text-sekundaer);
}

.pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-button.pf-m-control:focus {
  color: var(--laas-text-primaer);
  border-color: var(--laas-rahmen-stark);
  background-color: var(--laas-feld);
}

/*
  PatternFly zeichnet unter diesem Knopf zusaetzlich eine Linie ueber ::after.
  Die passt zu seinem eigenen Aussehen (Feld mit Unterstrich), nicht zu einem
  Knopf mit Rahmen ringsum - sonst steht unter dem Auge ein Strich, der
  nirgendwo hingehoert. Die Variable allein genuegt nicht, weil ::after auch
  eine eigene Farbe mitbringt.
*/
.pf-v5-c-button.pf-m-control::after {
  display: none;
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--Color: var(--laas-klarblau);
  --pf-v5-c-button--m-secondary--BorderColor: var(--laas-klarblau);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--laas-flaeche);
  --pf-v5-c-button--m-secondary--hover--Color: var(--laas-klarblau);
}

/* ------------------------------------------------------------------ Links -- */

a,
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--laas-klarblau);
  --pf-v5-c-button--m-link--hover--Color: var(--laas-aktion-hover);
  color: var(--laas-klarblau);
}

a:hover {
  color: var(--laas-aktion-hover);
}

/* -------------------------------------------------------------- Hinweise -- */

/*
  Streifen ueber dem Formular: "Sie muessen Ihr Passwort aendern", "Sie
  muessen einen zweiten Faktor einrichten", Erfolgs- und Fehlermeldungen.

  Alle laufen ueber die ruhige Sekundaerflaeche statt ueber gelbe, gruene
  und rote Toenungen (Ueberarbeitung vom 19.08.2026): Das Portal kennt
  seit dem Redesign keine getoenten Hinweiskaesten mehr, und Ampelrot ist
  den Fristen vorbehalten (Regel 2). Das Symbol links und der Text tragen
  die Aussage - nie die Farbe allein (Kapitel 11.2). Fehlermeldungen
  bekommen den voll deckenden Rand, dasselbe Muster wie der Fehlerbanner
  des Portals (components/Fehlermeldung.tsx).
*/
.pf-v5-c-alert {
  --pf-v5-c-alert--BorderTopWidth: 0;
  --pf-v5-c-alert--BoxShadow: none;
  --pf-v5-c-alert__icon--Color: var(--laas-text-primaer);
  --pf-v5-c-alert__title--Color: var(--laas-text-primaer);
  border: 1px solid var(--laas-rahmen);
  border-radius: var(--laas-radius-feld);
  background-color: var(--laas-flaeche);
  color: var(--laas-text-primaer);
  font-size: 0.875rem;
}

.pf-v5-c-alert__title {
  font-weight: 600;
  line-height: 1.45;
}

.pf-v5-c-alert.pf-m-warning {
  --pf-v5-c-alert--m-warning__icon--Color: var(--laas-text-primaer);
  --pf-v5-c-alert--m-warning__title--Color: var(--laas-text-primaer);
}

.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-error {
  --pf-v5-c-alert--m-danger__icon--Color: var(--laas-text-primaer);
  --pf-v5-c-alert--m-danger__title--Color: var(--laas-text-primaer);
  border-color: var(--laas-text-primaer);
}

.pf-v5-c-alert.pf-m-success {
  --pf-v5-c-alert--m-success__icon--Color: var(--laas-text-primaer);
  --pf-v5-c-alert--m-success__title--Color: var(--laas-text-primaer);
}

.pf-v5-c-alert.pf-m-info {
  --pf-v5-c-alert--m-info__icon--Color: var(--laas-text-primaer);
  --pf-v5-c-alert--m-info__title--Color: var(--laas-text-primaer);
}

/* -------------------------------------------- Zweiten Faktor einrichten -- */

/*
  Der einzige Bildschirm mit laengerem Fliesstext: vier Schritte, eine Liste
  von Apps, ein Schluessel, vier Einstellwerte. Ohne eigene Regeln steht das
  als graue Wand da. Fliesstext laeuft wie im Portal in der Koerpertinte,
  nicht in der Titeltinte.
*/
#kc-totp-settings {
  color: var(--laas-text-koerper);
  font-size: 0.875rem;
  line-height: 1.55;
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

#kc-totp-settings > li {
  margin-bottom: 1rem;
}

#kc-totp-settings > li::marker {
  color: var(--laas-text-sekundaer);
  font-weight: 600;
}

#kc-totp-settings p {
  margin: 0 0 0.4rem;
}

#kc-totp-settings ul {
  list-style: disc;
  padding-left: 1.1rem;
  color: var(--laas-text-sekundaer);
  font-size: 0.875rem;
}

/*
  Der Schluessel wird abgetippt. Deshalb Festbreitenschrift (I und l, 0 und O
  sind sonst nicht zu unterscheiden), abgesetzte Flaeche, mit einem Klick
  vollstaendig markierbar.
*/
#kc-totp-secret-key {
  display: inline-block;
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--laas-text-primaer);
  background-color: var(--laas-flaeche);
  border: 1px solid var(--laas-rahmen);
  border-radius: var(--laas-radius-feld);
  padding: 0.5rem 0.7rem;
  margin: 0.15rem 0 0.35rem;
  user-select: all;
  word-break: break-word;
}

/* Der QR-Code stuende sonst hart auf der Kartenflaeche. */
#kc-totp-secret-qr-code {
  display: block;
  border: 1px solid var(--laas-rahmen);
  border-radius: var(--laas-radius-feld);
  background: #ffffff;
  padding: 0.5rem;
  margin: 0.35rem 0;
}

/* ------------------------------------------ Hinweis-, Fehler-, Infoseiten -- */

/*
  Abmelden bestaetigen, Sitzung abgelaufen, Hinweis- und Fehlerseiten. Sie
  bestehen fast nur aus einem Absatz und einem Knopf. Fliesstext in der
  Koerpertinte, wie im Portal.
*/
#kc-info-message,
#kc-error-message,
#kc-logout-confirm,
.instruction,
.pf-v5-c-login__main-body p {
  color: var(--laas-text-koerper);
  font-size: 0.875rem;
  line-height: 1.6;
}

p.instruction {
  margin: 0 0 1.25rem;
}

/* ------------------------------------------------------------- Fusszeile -- */

.pf-v5-c-login__main-footer,
.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-links {
  color: var(--laas-text-sekundaer);
  font-size: 0.8125rem;
}

/*
  Auf den meisten Bildschirmen ist die Fusszeile leer - dort saessen
  Registrierung und "Passwort vergessen", beides gibt es hier nicht. Sichtbar
  bleibt sonst nur ein zu tiefer Kartenrand unter dem Knopf.
*/
.pf-v5-c-login__main-footer:not(:has(*)) {
  padding-top: 0;
  padding-bottom: 0;
}

/*
  Sprachauswahl ausblenden: Die Oberflaeche ist durchgehend deutsch (NFR-03).
  Der Realm fuehrt ohnehin nur eine Sprache - der Umschalter erschiene erst ab
  zweien, sichtbar werden soll er aber auch dann nicht.
*/
#kc-locale,
.pf-v5-c-login__main-header-utilities {
  display: none;
}

/* ----------------------------------------------------------- Kleines Bild -- */

/*
  NFR-01 verlangt 390 px Breite. PatternFly stellt die Karte dort ohnehin
  schon frei - hier geht es nur darum, dass die Raender nicht zu breit sind
  und die Wortmarke nicht ueber drei Zeilen laeuft.
*/
@media (max-width: 30rem) {
  /*
    PatternFly laesst die Karte auf dem Handy bis an beide Bildschirmkanten
    laufen. Das Portal haelt dort einen Rand (app/login/page.tsx, `px-4`) -
    eine Karte ohne Rand sieht aus, als waere sie abgeschnitten.

    Als echte Eigenschaft, nicht ueber die --pf-v5-...-Padding-Variablen:
    Die gibt es in dieser PatternFly-Version nicht (gemessen am 19.08.2026,
    computed padding blieb 0) - die alte Fassung dieser Regel war deshalb
    wirkungslos, und die Karte klebte an der Kante.
  */
  .pf-v5-c-login__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .pf-v5-c-login__main-header,
  .pf-v5-c-login__main-body,
  .pf-v5-c-login__main-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  #kc-header-wrapper {
    /* 20 px aus der Schriftskala - keine Zwischengroessen (Regel 4). */
    font-size: 1.25rem;
  }

  #kc-totp-settings {
    padding-left: 1.1rem;
  }
}