:root {
    /* PatternFly Variablen für die Primärfarbe (TUC Grün) überschreiben */
    --pf-v5-global--primary-color--100: #008C4F;
    /* TUC Grün */
    --pf-v5-global--primary-color--200: #00703f;
    /* Etwas dunkler für Hover-Effekte */

    /* Link-Farben anpassen */
    --pf-v5-global--link--Color: #008C4F;
    --pf-v5-global--link--Color--hover: #00703f;
    }

:where(html, body) {
    margin: 0;
    padding: 0;
    height: 100%;
}

.pf-v5-c-form__label {
    font-size: 1.15rem;
}

/* TU Hintergrund verwenden */
.login-pf {
    background-image: url(../img/login.avif);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff !important;
    min-height: 100vh;
}

.pf-v5-c-login__container {
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    padding-inline-start: 0;
    grid-template-rows: minmax(auto, 8%) 1fr;
    grid-template-areas:
        "header"
        "main";
    padding-inline-end: 0 !important;
}

.pf-v5-c-login__header {
    grid-area: header;
    justify-self: start;
    background-image: url(../img/logo.avif);
    width: 22em;
    max-width: min(18em, 60vw);
    max-height: 12vh;
    margin: 0 0 0 1em;
    border-style: none;
    background-repeat: no-repeat;
    background-size: contain;
    text-shadow: none;
    color: transparent;
}

/* Text im Header ausblenden, damit nur das Logo sichtbar ist */
div.kc-logo-text span {
    display: none;
}

.pf-v5-c-login__main {
    grid-area: main;
    justify-self: center;
    align-self: center;
    width: calc(100% - 2rem);
    max-width: 100%;
    border-top: 5px solid #008C4F;
    box-shadow: 0 4px 10px rgba(128, 128, 128, 0.3);
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem;
}

/* ≥ 480px (phone landscape) */
@media (min-width: 480px) {
  .pf-v5-c-login__header {
    max-width: min(22em, 75vw);
    max-height: 15vh;
  }
  .pf-v5-c-login__main {
    max-width: 480px;
    padding: 2rem;
  }
}

/* ≥ 768px (tablet) */
@media (min-width: 768px) {
  .pf-v5-c-login__main {
    max-width: 640px;
  }
}

/* ≥ 1024px (small desktop) */
@media (min-width: 1024px) {
  .pf-v5-c-login__main {
    max-width: 720px;
  }
}

/* ≥ 1400px (large desktop) */
@media (min-width: 1400px) {
  .pf-v5-c-login__main {
    max-width: 720px;
  }
}

.pf-v5-c-login__main-header {
    grid-template-columns: 100%;
}

.pf-v5-c-login__main-header-utilities {
    grid-column: auto !important;
    grid-row: auto !important;
}

input[type="text"],
input[type="password"],
select {
    min-height: 44px;
}

.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary,
input[type="submit"] {
    background-color: #008C4F !important;
    border-color: #008C4F !important;
    min-height: 44px;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover,
input[type="submit"]:hover {
    background-color: #00703f !important;
    border-color: #00703f !important;
}

/* Fehlermeldungen in TUC Rot */
.pf-v5-c-alert.pf-m-danger,
.pf-c-alert.pf-m-danger {
    --pf-v5-c-alert--m-danger__icon--Color: #8C1C00;
    --pf-c-alert--m-danger__icon--Color: #8C1C00;
}

.pf-v5-c-button {
    font-size: 1.25rem;
}

.pf-v5-c-login :focus-visible {
    outline: 2px solid #008C4F;
    outline-offset: 2px;
}