@font-face {
    font-family: WebdeSansLight;
    font-display: swap;
    src: url("https://s.uicdn.com/pos-cdn/polaris/21.46.0/dist/font/webde-sans-light.woff2") format("woff2"), url("https://s.uicdn.com/pos-cdn/polaris/21.46.0/dist/font/webde-sans-light.woff") format("woff");
}

@font-face {
    font-family: RobotoCondensedLight;
    font-display: swap;
    src: url("https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.woff") format("woff");
}

:root {
    --header-height: 56px;
    --lux-typography__font-family: Lux;
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    font-family: Verdana, Arial, 'sans-serif';
}

body {
    height: 100%;
    display: grid;
    grid-template-rows: min-content min-content 1fr min-content;
    grid-template-columns: auto;
    background-color: var(--lux-color-c-l94);
}

#login {
    display: none;
}

.message {
    display: none;
    width: 528px;
    padding: 32px;
    background-color: var(--lux-color-d);
    text-align: center;
    border-radius: 4px;
}

.message--visible {
    display: block;
}

.message__icon {
    width: 64px;
    height: 64px;
}

.message__icon--error {
    fill: var(--lux-color-h2);
}

.message__icon--success {
    fill: var(--lux-color-h3);
}

.message__head {
    margin: 0;
    padding: 16px 0;
}

.message__body p {
    padding-bottom: 16px;
}

.login-form {
    padding: 16px 0;
}

.header {
    height: var(--header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 48px;
    padding: 0 16px;
    border-top: 4px solid var(--lux-color-a);
    background: var(--lux-color-d);
}

.logo-container {
    margin-bottom: 24px;
}

.logo--large {
    display: inline;
}

.logo--small {
    display: none;
}

.gmx .logo {
    width: 62px;
    height: 20px;
}

.gmx .logo.logo--large {
    width: 68px;
    height: 22px;
}

.webde .logo {
    width: 32px;
    height: 32px;
}

.webde .logo.logo--large {
    width: 36px;
    height: 36px;
}

.gmx .header {
    border-top: 4px solid var(--lux-color-b);
    background: var(--lux-color-b);
}

.gmx .header .logo {
    fill: var(--lux-color-d);
}

.header .headline {
    margin-left: 20px;
    --lux-typography-headline-1__font-size: 22px;
    --lux-typography-headline-1__line-height: 37px;
    --lux-typography-headline-1__font-weight: 300;
    white-space: nowrap;
    color: var(--lux-color-c-l15);
}

.gmx .header .headline {
    margin-left: 10px;
    --lux-typography-headline-1__font-size: 28px;
    --lux-typography-headline-1__line-height: 40px;
    color: var(--lux-color-d);
}

.main {
    display: grid;
    grid-template-rows: min-content;
    justify-content: center;
}

.footer {
    position: sticky;
    bottom: 0;
    padding: 0 20px;
    border-top: 1px solid var(--lux-color-c-l82);
    text-align: center;
    --lux-typography-headline-3__font-weight: 400;
    background-color: var(--lux-color-c-l94);
}

.footer a {
    display: inline-block;
    padding: 20px 16px;
    color: var(--lux-color-c);
    text-decoration: none;
    white-space: nowrap;
}

.footer a:hover {
    text-decoration: underline;
}

.gmxat a[data-replace-href=kuendigen] {
    display: none;
}

/* small screen */
@media screen and (orientation: landscape) and (max-height: 615px),
screen and (orientation: portrait) and (max-width: 615px) {
    :root {
        --header-height: 48px;
    }

    .header {
        border-bottom: 1px solid var(--lux-color-c-l70);
        margin: 0;
    }

    .webde .logo--large {
        display: none;
    }

    .webde .logo--small {
        display: inline;
    }

    .header .headline {
        --lux-typography-headline-1__font-size: 20px;
        --lux-typography-headline-1__line-height: 24px;
    }

    .gmx .header .headline {
        --lux-typography-headline-1__font-size: 24px;
        --lux-typography-headline-1__line-height: 36px;
    }

    .main {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
    }

    .message {
        width: auto;
        border-radius: 0;
    }

    .footer {
        --lux-typography-headline-3__font-size: 14px;
        --lux-typography-headline-3__line-height: 22px;
    }

    .footer a {
        padding: 8px;
    }
}