:root {

    /* GKD-Recklinghausen Logofarben */
    --schwarz: #000000;
    --dunkelblau: #142c46;
    --dunkelgruen: #004935;
    --mittelgruen: #016838;
    --hellgruen: #c1d100;
    --petrol: #007b8c;
    --lila: #923189;
    --pink: #d50074;

    --schriftart: "Calibri 12pt";

    /* Primärfarben */
    --hellgruen-050: #F3F6CC;
    --hellgruen-400: #D1DD40;
    --hellgruen-500: var(--hellgruen);
    --hellgruen-600: #A4B200;
    --hellgruen-800: #7D8800;
    --hellgruen-900: hsl(76, 100%, 11%);

    --petrol-000: #F8FFFF;
    --petrol-050: #D9EBEE;
    --petrol-200: #A6D1D7;
    --petrol-400: #73B6C0;
    --petrol-500: #3395A3;
    --petrol-600: #3395A3;
    --petrol-700: var(--petrol);
    --petrol-750: hsl(187, 100%, 23%);
    --petrol-800: #003f47;
    --petrol-900: #00252A;

    --lila-050: #EFE0ED;
    --lila-200: #D9B7D6;
    --lila-400: #BE83B8;
    --lila-600: #A85AA1;
    --lila-700: var(--lila);
    --lila-800: #42163E;

    --pink-500: var(--pink);
    --pink-700: hsl(337, 100%, 30%);
    --pink-900: hsl(327, 100%, 16%);

    --dunkelblau-400: hsl(211, 56%, 42%);
    --dunkelblau-600: hsl(211, 56%, 30%);
    --dunkelblau-800: hsl(211, 56%, 24%);
    --dunkelblau-900: hsl(211, 56%, 18%);

    --pf-v5-global--BackgroundColor--100: #fff;
    --pf-v5-global--BackgroundColor--150: #fafafa;
    --pf-v5-global--BackgroundColor--200: #f0f0f0;
    --pf-v5-global--BackgroundColor--light-100: #fff;
    --pf-v5-global--BackgroundColor--light-200: #fafafa;
    --pf-v5-global--BackgroundColor--light-300: #f0f0f0;
    --pf-v5-global--BackgroundColor--dark-100: #151515;
    --pf-v5-global--BackgroundColor--dark-200: #3c3f42;
    --pf-v5-global--BackgroundColor--dark-300: #212427;
    --pf-v5-global--BackgroundColor--dark-400: #4f5255;
    --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(3,3,3,0.62);
    --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(3,3,3,0.32);
    --pf-v5-global--Color--100: #151515;
    --pf-v5-global--Color--200: #6a6e73;
    --pf-v5-global--Color--300: #3c3f42;
    --pf-v5-global--Color--400: #8a8d90;
    --pf-v5-global--Color--light-100: #fff;
    --pf-v5-global--Color--light-200: #f0f0f0;

    /* Theme-Farben */
    --pf-v5-global--Color--light-300: #d2d2d2;
    --pf-v5-global--Color--dark-100: #151515;
    --pf-v5-global--Color--dark-200: #6a6e73;
    --pf-v5-global--active-color--100: var(--petrol-700);
    --pf-v5-global--active-color--200: var(--petrol-050);
    --pf-v5-global--active-color--300: var(--petrol-400);
    --pf-v5-global--active-color--400: var(--petrol-200);
    --pf-v5-global--disabled-color--100: #6a6e73;
    --pf-v5-global--disabled-color--200: #d2d2d2;
    --pf-v5-global--disabled-color--300: #f0f0f0;
    --pf-v5-global--primary-color--100: var(--hellgruen-400);
    --pf-v5-global--primary-color--200: var(--hellgruen-600);
    --pf-v5-global--primary-color--light-100: var(--hellgruen-050);
    --pf-v5-global--primary-color--dark-100: var(--hellgruen-800);
    --pf-v5-global--secondary-color--100: #6a6e73;
    --pf-v5-global--default-color--100: #73c5c5;
    --pf-v5-global--default-color--200: #009596;
    --pf-v5-global--default-color--300: #003737;
    --pf-v5-global--success-color--100: #3e8635;
    --pf-v5-global--success-color--200: #1e4f18;
    --pf-v5-global--info-color--100: #2b9af3;
    --pf-v5-global--info-color--200: #002952;
    --pf-v5-global--warning-color--100: #f0ab00;
    --pf-v5-global--warning-color--200: #795600;
    --pf-v5-global--danger-color--100: var(--pink-500);
    --pf-v5-global--danger-color--200: var(--pink-700);
    --pf-v5-global--danger-color--300: var(--pink-900);

    --pf-v5-global--link--Color: var(--dunkelblau-600);
    --pf-v5-global--link--Color--hover: var(--dunkelblau-900);
    --pf-v5-global--link--Color--visited: var(--lila);

    --pf-v5-c-form__label-required--Color: var(--pink-500);
}

.gkd-body {
    background: linear-gradient(to right, var(--petrol) 0%, var(--lila) 100%);
}

.gkd-login-main {
    border-top: 4px solid var(--hellgruen);
    border-radius: 0.5rem;
    background: var(--petrol-000);
    color: var(--petrol-800);
    accent-color: var(--petrol);
}

.gkd-logo {
    background-image: url(../img/gkd-re-logo-white.svg);
    background-position: center;
    background-repeat: no-repeat;
    height: 9rem;
}

.pf-v5-c-brand > div {
    text-align: center;
    font-size: 2rem;
}

.gkd-button-primary {
    color: var(--hellgruen-900) !important;
    font-weight: bold;
    border-radius: 0.5rem;
}

.gkd-button-secondary {
    color: var(--hellgruen-900) !important;
}

.gkd-button-secondary::after {
    border-radius: 0.5rem !important;
}

.gkd-footer {
    margin-top: 1rem;
    border-radius: 0.5rem;
    background: var(--petrol-050);
    display: flex;
    flex-wrap: wrap;

    &:has(.gkd-footer-end) {
        margin-top: unset;
        border-top-left-radius: unset;
        border-top-right-radius: unset;

        background: var(--lila-050);
    }
}

.gkd-footer-band {
    padding-block-end: 1.5rem;
    padding-block-start: 1.5rem;
    padding-inline-end: 1rem;
    padding-inline-start: 1rem;
    text-align: center;
}

.gkd-footer-band-item {
    color: var(--petrol-750);
    font-weight: bold;
}

.gkd-footer-end {
    color: var(--lila-700);
}

.gkd-footer-helper-text {
    /* Leere Regel */
}

.gkd-checkbox-label {
    color: var(--petrol-800);
	font-size: var(--pf-v5-c-check__label--FontSize);
	font-weight: var(--pf-v5-c-check__label--FontWeight);
	line-height: var(--pf-v5-c-check__label--LineHeight);
}

.gkd-alert {
    border-radius: 0.5rem !important;
}

.gkd-login-container {
    grid-template-columns: 34rem;
    grid-template-areas: "header"
                         "main";
    gap: 2rem;
}

@media (min-width: 768px) {
    div.pf-v5-c-login__main-header {
        grid-template-columns: 70% 30%;
    }
}

.gkd-input:focus-within {
   --pf-v5-c-form-control--after--BorderBottomColor: unset;
}

#password-show-password {
    color: var(--petrol-750);
}

.pf-v5-c-login__header {
    margin-block-start: unset;

    & .pf-v5-c-brand {
        margin-block-end: unset;
    }
}

.pf-v5-c-helper-text.gkd-input-helper-text {
    --pf-v5-c-helper-text--FontSize: 1rem;
}

.pf-v5-c-form-control__toggle-icon {
    --pf-v5-c-form-control__toggle-icon--Color: var(--petrol-750);
}