/* tala.mobil — Anmeldemaske.
   Erbt von keycloak.v2 (PatternFly v5) und ueberschreibt nur die Gestaltung.
   Farbwerte stammen aus dem Design-Kit v1.0. Schrift lokal, kein Google. */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --tala-red:#E3113C; --tala-red-hover:#C40E33; --tala-red-press:#9C0B29;
  --tala-navy:#162C39; --tala-navy-deep:#0E1E27;
  --tala-sand:#F5F2ED; --tala-sand-soft:#FBF9F6; --tala-sand-warm:#EAE4D7;
  --tala-bg:var(--tala-sand); --tala-card:#FFFFFF;
  --tala-text:var(--tala-navy); --tala-muted:#5E7484; --tala-border:#E4DED3;
}
html[data-tala="dark"]{
  --tala-bg:var(--tala-navy-deep); --tala-card:var(--tala-navy);
  --tala-text:var(--tala-sand); --tala-muted:#9DB2BE; --tala-border:#27424F;
}

html,body,.login-pf,.login-pf body{background:var(--tala-bg)!important;color:var(--tala-text)}
body,input,button,select,textarea,.pf-v5-c-form-control{
  font-family:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif!important}

/* Kopfbereich: Logo statt Schriftzug */
#kc-header,#kc-header-wrapper{background:none!important;border:0!important;
  font-size:0!important;padding:0!important;margin:0 0 20px!important;text-align:center}
#kc-header-wrapper::after{content:"";display:inline-block;width:190px;height:34px;
  background:url('../img/tala-logo-wordmark.svg') no-repeat center/contain}
html[data-tala="dark"] #kc-header-wrapper::after{
  background-image:url('../img/tala-logo-wordmark-light.svg')}

/* Anmeldekarte */
.pf-v5-c-login__main,.card-pf{
  background:var(--tala-card)!important;border:1px solid var(--tala-border)!important;
  border-radius:14px!important;box-shadow:0 1px 2px rgba(22,44,57,.06),0 8px 24px rgba(22,44,57,.08)!important}
.pf-v5-c-login__main-header-title,#kc-page-title,h1,h2{color:var(--tala-text)!important;letter-spacing:-.02em}

/* Eingabefelder.
   Der Rand eines Feldes ist auf einer weissen Karte das Einzige, was es
   als Feld ausweist — WCAG 2.2 verlangt dafuer 3:1. --tala-border kommt
   nur auf 1,34:1. Eigener Ton fuer BEDIENELEMENTE: 3,42:1 im Hellen,
   3,40:1 im Dunkeln. Karten und Trennlinien behalten den feinen Rand. */
:root{--tala-ctl-border:#948A71}
html[data-tala="dark"]{--tala-ctl-border:#607F90}

.pf-v5-c-form-control,.pf-v5-c-form-control input,input[type=text],input[type=password],input[type=email]{
  background:var(--tala-card)!important;color:var(--tala-text)!important;
  border:1px solid var(--tala-ctl-border)!important;border-radius:8px!important;min-height:36px}
.pf-v5-c-form-control:focus-within,input:focus{
  border-color:var(--tala-red)!important;outline:2px solid rgba(227,17,60,.18)!important;outline-offset:0!important}
.pf-v5-c-form__label-text{color:var(--tala-muted)!important;font-weight:600}

/* Rot nur fuer Aktionen — Kit-Regel */
.pf-v5-c-button.pf-m-primary,#kc-login,input[type=submit]{
  background:var(--tala-red)!important;border-color:var(--tala-red)!important;color:#fff!important;
  border-radius:8px!important;font-weight:600;min-height:36px}
.pf-v5-c-button.pf-m-primary:hover,#kc-login:hover{background:var(--tala-red-hover)!important;border-color:var(--tala-red-hover)!important}
.pf-v5-c-button.pf-m-primary:active,#kc-login:active{background:var(--tala-red-press)!important}
a,.pf-v5-c-button.pf-m-link{color:var(--tala-red)!important}
a:hover{color:var(--tala-red-hover)!important}

/* Hinweise und Fehler */
.pf-v5-c-alert{border-radius:10px!important}
#kc-info,#kc-info-wrapper,.pf-v5-c-login__main-footer-band{
  background:transparent!important;color:var(--tala-muted)!important;border-top:1px solid var(--tala-border)!important}

/* PatternFly zeichnet oben auf der Karte einen blauen Akzentbalken.
   Er gehoert nicht zur Marke — entfernen statt umfaerben, die Kit-Regel
   sagt: Rot nur fuer Aktionen, Flaechen bleiben ruhig. */
.pf-v5-c-login__main{border-top:0!important}
.pf-v5-c-login__main::before,.pf-v5-c-login__main::after{display:none!important}
.pf-v5-c-login__main-header{border-top:0!important;background:none!important}

/* Kontrollkaestchen und Umschalter in Markenfarbe statt PatternFly-Blau */
.pf-v5-c-check__input:checked{accent-color:var(--tala-red)}
.pf-v5-c-button.pf-m-control{background:transparent!important;border-color:var(--tala-border)!important;
  color:var(--tala-muted)!important}

/* Fokus ist NICHT der Akzent — Entscheidung vom 08.08.2026.
   Rot markiert Handlungen und Fehler. Ein fokussiertes Feld ist weder
   das eine noch das andere; in derselben Farbe sah es aus wie ein
   defektes. Gemessen unterschieden sich beide Zustaende nur mit 1,82:1,
   und der rote Fokusrahmen lag mit 2,62:1 unter den 3:1, die WCAG 2.2
   fuer Zustandsanzeigen verlangt.
   Der Fokus nimmt jetzt die Textfarbe des Modus — Marine im Hellen
   (14,45:1 gegen die Feldflaeche, 3,04:1 gegen das Fehlerrot), Sand im
   Dunkeln (12,94:1), wo Marine selbst die Flaeche ist. */
:root{--tala-fokus:var(--tala-navy); --tala-fokus-weich:rgba(22,44,57,.16)}
html[data-tala="dark"]{--tala-fokus:var(--tala-sand); --tala-fokus-weich:rgba(245,242,237,.20)}

.pf-v5-c-form-control:focus-within,input:focus{
  border-color:var(--tala-fokus)!important;
  outline:none!important;
  box-shadow:0 0 0 3px var(--tala-fokus-weich)!important}

/* Fehler bleibt rot — und ist jetzt zweifelsfrei etwas anderes als Fokus. */
.pf-v5-c-form-control.pf-m-error,input[aria-invalid="true"]{
  border-color:var(--tala-red)!important;
  box-shadow:0 0 0 3px rgba(227,17,60,.20)!important}

/* --- Hinweis- und Fehlerkaesten in den Farben des Kits --- */
/* PatternFly faerbt Hinweise blau. Im Design-Kit hat "Information"
   einen eigenen Ton (#26688F auf #E6EFF5); Blau kommt darin nicht vor
   und liest sich deshalb als Fremdkoerper. */
.pf-v5-c-alert.pf-m-info{background:#E6EFF5!important;border-color:#BBD3E2!important}
.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__icon{color:#26688F!important}

.pf-v5-c-alert.pf-m-success{background:#E4F2EE!important;border-color:#B6DED2!important}
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon{color:#12805F!important}

.pf-v5-c-alert.pf-m-warning{background:#FBF0DE!important;border-color:#EBD3A6!important}
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon{color:#B4761A!important}

.pf-v5-c-alert.pf-m-danger{background:#FDEBED!important;border-color:#F6C6CC!important}
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon{color:#E3113C!important}

/* Dunkel: das Kit arbeitet hier mit durchscheinenden Flaechen statt
   eigener Volltoene, damit die Karte darunter noch wirkt. */
html[data-tala="dark"] .pf-v5-c-alert.pf-m-info{background:rgba(105,170,214,.14)!important;border-color:rgba(105,170,214,.34)!important}
html[data-tala="dark"] .pf-v5-c-alert.pf-m-info .pf-v5-c-alert__title,
html[data-tala="dark"] .pf-v5-c-alert.pf-m-info .pf-v5-c-alert__icon{color:#69AAD6!important}
html[data-tala="dark"] .pf-v5-c-alert.pf-m-success{background:rgba(79,190,155,.14)!important;border-color:rgba(79,190,155,.34)!important}
html[data-tala="dark"] .pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title,
html[data-tala="dark"] .pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon{color:#4FBE9B!important}
html[data-tala="dark"] .pf-v5-c-alert.pf-m-warning{background:rgba(224,166,74,.14)!important;border-color:rgba(224,166,74,.34)!important}
html[data-tala="dark"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
html[data-tala="dark"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon{color:#E0A64A!important}
html[data-tala="dark"] .pf-v5-c-alert.pf-m-danger{background:rgba(240,114,126,.14)!important;border-color:rgba(240,114,126,.34)!important}
html[data-tala="dark"] .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
html[data-tala="dark"] .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon{color:#F0727E!important}

/* --- Handy --- */

/* Die Anmeldeseite liess sich auf dem Handy seitwaerts schieben. Schuld
   war ein UNSICHTBARER Sprechblasentext ("Login neu starten"): absolut
   positioniert, nowrap, 133px breit, ab x=367 — er ragte 110px ueber den
   Rand. Unsichtbare Elemente zaehlen fuer den scrollbaren Bereich mit.
   Auf schmalen Schirmen deshalb nach rechts ausrichten und umbrechen
   lassen, statt ihn zu verstecken — sonst waere er auch nicht mehr
   nutzbar, wenn er gebraucht wird. */
@media (max-width:480px){
  .kc-tooltip-text{
    left:auto!important; right:0!important;
    white-space:normal; max-width:60vw}
}

/* Der Anmeldeknopf ist die einzige Handlung dieser Seite. 36px ist die
   Standardhoehe des Kits fuer Bedienelemente in Formularen; fuer die
   Haupthandlung sieht das Kit `--tk-ctl-lg` mit 44px vor. Das ist
   zugleich die uebliche Mindestgroesse fuer Beruehrung. */
#kc-login,.pf-v5-c-button.pf-m-primary.pf-m-block{
  min-height:44px; font-size:16px}

/* Auf dem Handy soll die Karte die Breite nutzen und nicht in einem
   schmalen Kaestchen in der Mitte kleben. */
@media (max-width:520px){
  .pf-v5-c-login__main{border-radius:12px!important}
  .pf-v5-c-login__container{width:100%}
}

/* 16px verhindert, dass iOS beim Hineintippen in ein Feld die ganze
   Seite heranzoomt — bei kleinerer Schrift tut es das automatisch. */
.pf-v5-c-form-control,.pf-v5-c-form-control input,
input[type=text],input[type=password],input[type=email]{
  font-size:16px}

/* ============================================================
   Feinschliff — Angleichung an die Karten des Portals
   ============================================================ */

/* Der Titel stand auf font-weight 400 und wirkte neben dem Portal
   kraftlos. Das Kit setzt Ueberschriften auf 700 mit negativem
   Zeichenabstand (.tk-display: -0.03em). */
#kc-page-title,.pf-v5-c-title.pf-m-3xl{
  font-weight:700!important;
  letter-spacing:-.025em;
  font-size:1.65rem!important;
  line-height:1.2!important}

/* PatternFly legt unter jedes Eingabefeld einen zusaetzlichen Strich
   (.pf-v5-c-form-control::after) und faerbt ihn beim Fokus blau. Am
   fokussierten Feld lagen dadurch ein roter Rahmen UND ein blauer
   Unterstrich uebereinander — zwei Zustandsfarben an einem Element.
   Der Strich ist in unserer Gestaltung ueberfluessig: den Zustand
   traegt schon der Rahmen. */
.pf-v5-c-form-control{
  --pf-v5-c-form-control--after--BorderBottomColor:transparent;
  --pf-v5-c-form-control--after--BorderBottomWidth:0}
.pf-v5-c-form-control::after{display:none!important}

/* "Passwort vergessen?" stand rot und linksbuendig direkt unter dem
   Passwortfeld. Zusammen mit dem roten Fokusring las sich das wie eine
   Fehlermeldung unter einem fehlerhaften Feld — der haeufigste Grund,
   warum die Seite "kaputt" wirkte. Der Link ist eine Nebenhandlung und
   wird entsprechend leise: gedaempft, klein, rechts. Rot bleibt fuer
   Handlungen und echte Fehler reserviert. */
a[href*="reset-credentials"]{
  display:inline-block;
  color:var(--tala-muted)!important;
  font-size:.8125rem;
  font-weight:600;
  text-decoration:none}
a[href*="reset-credentials"]:hover{
  color:var(--tala-red)!important;text-decoration:underline}
#kc-form-options,.kc-form-options{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Der Sprachumschalter ist die unwichtigste Bedienung der Seite, sah
   aber aus wie ein Eingabefeld und konkurrierte mit der Ueberschrift. */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control{
  border-color:transparent!important;background:transparent!important}
.pf-v5-c-login__main-header-utilities select{
  color:var(--tala-muted)!important;font-size:.8125rem!important;font-weight:600}
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control:hover{
  border-color:var(--tala-border)!important}
.pf-v5-c-login__main-header{align-items:flex-start;gap:.75rem}

/* Abstaende wie in den Karten des Portals (.tk-card, Padding --tk-s5). */
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer{padding-left:1.5rem!important;padding-right:1.5rem!important}
.pf-v5-c-login__main-header{padding-top:1.75rem!important}
.pf-v5-c-login__main-footer{padding-bottom:1.5rem!important}
.pf-v5-c-form__group{margin-bottom:.25rem}

/* Beschriftungen etwas kraeftiger — sie sind die Orientierung im
   Formular, standen aber auf demselben Gewicht wie Fliesstext. */
.pf-v5-c-form__label-text{font-weight:600!important;font-size:.8125rem!important}

/* "Angemeldet bleiben" war kaum zu lesen. */
.pf-v5-c-check__label{color:var(--tala-text)!important;font-size:.875rem}

/* Ein echter Fehler bekommt einen doppelt so kraeftigen Rahmen wie der
   Fokus, dazu Symbol und Text von PatternFly. Damit unterscheiden sich
   die beiden Zustaende nicht mehr allein durch die Farbe (WCAG 1.4.1). */
.pf-v5-c-form-control.pf-m-error,input[aria-invalid="true"]{
  border-width:2px!important}

/* Tastaturbedienung muss sichtbar bleiben, auch im Kontrastmodus von
   Windows, der Schatten und Rahmenfarben verwirft. */
@media (forced-colors: active){
  .pf-v5-c-form-control:focus-within,input:focus,
  .pf-v5-c-button:focus-visible,a:focus-visible{
    outline:3px solid Highlight!important;outline-offset:2px!important}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Der Sprachumschalter war immer noch ein Kasten. Die Rahmenfarbe
   durchsichtig zu machen reicht nicht — der Rahmen selbst muss weg,
   sonst bleibt sein Platz erhalten und das Element wirkt weiter wie
   ein Eingabefeld. */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control{
  border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.pf-v5-c-login__main-header-utilities select{
  background:transparent!important;border:0!important;padding-right:1.25rem!important;cursor:pointer}

/* Keycloak legt zwei Fussbereiche an; ist keiner gefuellt, bleibt
   trotzdem ihr Innenabstand stehen — unten in der Karte klaffte
   dadurch eine leere Flaeche. */
.pf-v5-c-login__main-footer:empty,
.pf-v5-c-login__main-footer-band:empty{display:none!important;padding:0!important}

/* `:empty` greift hier nicht: die Fussbereiche enthalten Leerzeichen und
   Zeilenumbrueche und gelten damit als gefuellt. `:not(:has(*))` fragt
   dagegen nach Kind-ELEMENTEN und trifft den Fall. */
.pf-v5-c-login__main-footer:not(:has(*)),
.pf-v5-c-login__main-footer-band:not(:has(*)){
  display:none!important}