@charset "UTF-8";
/* Emesz & Partner - Login-Theme (Farben/Fonts: docs/08-corporate-identity.md), alles lokal, kein CDN */
@font-face { font-family: "Mulish"; font-weight: 500; font-display: swap; src: url(../fonts/Mulish-Medium.woff2?s=93640e13ba300c2d4dbafe0aa2a39f94da5c0e93) format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 700; font-display: swap; src: url(../fonts/Mulish-Bold.woff2?s=d1fe036d51412a7105abf63a6f3b01db41b482a5) format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 400; font-display: swap; src: url(../fonts/Hind-Regular.woff2?s=9a2f43c80c51e2377739e0d3577e2345b5de0894) format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 500; font-display: swap; src: url(../fonts/Hind-Medium.woff2?s=c44ed0cbfafbf3cae3257ee11a9707db6550f33d) format("woff2"); }

:root {
    --ep-orange: #EE720E;
    --ep-orange-dark: #BE5B0B;
    --ep-orange-20: rgba(238, 114, 14, .2);
    --ep-black: #231F20;
    --ep-text: #404040;
    --ep-grey: #878787;
    --ep-border: #D8D8D8;
    --ep-bg-light: #F1F1F1;

    /* Keycloak-Variablen */
    --keycloak-logo-url: url(../img/logo.svg?s=6a485522939839b81881a7811865e8fd3746d068);
    --keycloak-logo-height: 72px;
    --keycloak-logo-width: 237px;
    --keycloak-card-top-color: var(--ep-orange);

    /* PatternFly 5 auf CI umstellen */
    --pf-v5-global--primary-color--100: var(--ep-orange);
    --pf-v5-global--primary-color--200: var(--ep-orange-dark);
    --pf-v5-global--primary-color--light-100: #F5A25E;
    --pf-v5-global--link--Color: var(--ep-orange-dark);
    --pf-v5-global--link--Color--hover: var(--ep-orange);
    --pf-v5-global--active-color--100: var(--ep-orange);
    --pf-v5-global--FontFamily--text: "Hind", sans-serif;
    --pf-v5-global--FontFamily--heading: "Mulish", sans-serif;
    --pf-v5-global--FontFamily--redhat-updated--heading: "Mulish", sans-serif;
    --pf-v5-global--FontFamily--redhat-updated--text: "Hind", sans-serif;
    --pf-v5-global--Color--100: var(--ep-text);
    --pf-v5-global--BorderColor--100: var(--ep-border);
}

/* Heller Hintergrund statt Keycloak-Grafik, orangefarbene Linie oben wie im Portal */
.login-pf body {
    background: var(--ep-bg-light);
    border-top: 4px solid var(--ep-orange);
    font-family: "Hind", sans-serif;
    color: var(--ep-text);
}

/* Kopf: Logo statt Realm-Name */
#kc-header-wrapper {
    background: var(--keycloak-logo-url) no-repeat center center;
    background-size: contain;
    height: var(--keycloak-logo-height);
    width: var(--keycloak-logo-width);
    margin: 0 auto;
    font-size: 0;           /* Text "Emesz & Partner Lohnportal" nur fuer Screenreader */
    color: transparent;
}
.pf-v5-c-login__header { padding-block: 2rem 1.25rem; }

/* Karte */
.pf-v5-c-login__main { border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.pf-v5-c-login__main-header { border-top: 4px solid var(--ep-orange); }
.pf-v5-c-title, h1#kc-page-title { font-family: "Mulish", sans-serif; font-weight: 700; color: var(--ep-black); }

/* Buttons */
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--ep-orange);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ep-orange-dark);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ep-orange-dark);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ep-orange-dark);
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    border-radius: 4px;
}

/* Eingabefelder: Fokus in Orange */
.pf-v5-c-form-control { --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--ep-orange); --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--ep-orange); }
.pf-v5-c-form-control:focus-within { outline: 3px solid var(--ep-orange-20); outline-offset: 0; }

/* Fusszeile unter der Karte */
.pf-v5-c-login__container::after {
    content: "Emesz & Partner Wirtschaftspr\00FC fungs- und Steuerberatungs GmbH \00B7  vertraulich";
    grid-column: 1 / -1;
    display: block;
    text-align: center;
    font-size: .8rem;
    color: var(--ep-grey);
    padding: 1.5rem 0;
}

/* Anmeldemaske weiter oben (Wunsch EP): oben ausrichten statt vertikal zentrieren */
.pf-v5-c-login { align-items: start; }
.pf-v5-c-login__container { padding-top: clamp(.5rem, 5vh, 4rem); }