/*
    Copyright (c) Computer-L.A.N. GmbH (http://www.computer-lan.de).
    Alle Rechte vorbehalten.
*/

:root {
    --clr-primary-main: rgb(3, 50, 108);
    --clr-primary-main-70: rgba(3, 50, 108, 0.7);
    --clr-primary-dark: rgb(2, 35, 75);
    --clr-secondary-main: rgb(25, 118, 210);
    --clr-secondary-dark: rgb(17, 82, 147);
    --clr-text: rgb(0 0 0 / 0.87);
    --clr-text-inverse: white;
    --clr-input-background: rgb(241, 241, 241);
    --clr-border: rgb(176, 176, 176);
    --clr-error: rgb(244, 67, 54);

    --spacing: 0.5rem;
}

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--clr-text-inverse);
    background: linear-gradient(180deg, var(--clr-primary-main-70) 0%, var(--clr-text-inverse) 100%);
    background-repeat: no-repeat;
    color: var(--clr-text);
}

main {
    width: min(450px, 90%);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

main .belowcard {
    margin-top: 3rem;
}

.password-hint {
    font-size: 0.8rem;
    font-weight: bolder;
}

label,
small,
a,
.error-text {
    line-height: 1;
}

a {
    color: var(--clr-link, var(--clr-secondary-main));
    text-decoration: underline;
    cursor: pointer;
}

a:hover {
    --clr-link: var(--clr-secondary-dark);
    text-decoration: underline;
}

header h1 {
    font-size: 1.7em;
    text-align: center;
    font-weight: bold;
    margin: calc(2 * var(--spacing)) 0;
}

.logo-container {
    height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1em;
}

.logo {
    max-height: 100%;
}

.form {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.checkbox {
    display: flex;
    flex-direction: row;
}

.checkbox input[type="checkbox"] {
    margin: 0 10px;
}

.card {
    box-shadow: 5px 5px 20px 3px rgba(0,0,0,0.7);
    border-radius: 20px;
    color: var(--clr-text);
    background-color: white;
    width: 100%;
    padding: calc(2 * var(--spacing)) 0 calc(2 * var(--spacing)) 0;
    position: relative;
}

.card:not(.lan-custom)::after {
    content: '';
    position: absolute;
    left: -70%;
    top: 30%;
    width: 350px;
    background-image: url("/pages/assets/arrow-bg.png");
    background-position: center left 10%;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
    opacity: 0.5;
    min-height: 400px;
}

.card.spaced {
    margin-top: calc(10 * var(--spacing));
}

.card-body,
.card-footer {
    padding: calc(2 * var(--spacing)) calc(4 * var(--spacing));
}

.card-footer {
    padding-block-start: 0;
}

.card-body {
    padding-block-end: 0;
}

.error-text {
    margin-block-start: var(--spacing);
    color: var(--clr-error);
}

.error-text:empty {
    display: none;
}

.form-text,
.form-group {
    margin-block-end: calc(3 * var(--spacing));
}

.form-group {
    display: flex;
    flex-direction: column-reverse;
}

.form-group > label {
    color: var(--clr-label, var(--clr-text));
    margin-block-end: var(--spacing);
}

.form-group > input:focus ~ label {
    --clr-label: var(--clr-primary-main);
}

.form-group > .error-text:not(:empty) ~ label {
    --clr-label: var(--clr-error);
}

.form-group > .error-text:not(:empty) ~ input {
    --clr-input-error: var(--clr-error);
}

.form-group > input {
    padding: var(--spacing) calc(1.5 * var(--spacing));
    border-color: var(--clr-input-error, var(--clr-border));
    background-color: var(--clr-input-background);
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    outline: 0;
}

.form-group > input:hover {
    border-color: var(--clr-input-error, var(--clr-text));
}

.form-group > input:focus {
    outline: 2px solid var(--clr-input-error, var(--clr-primary-main));
    outline-offset: -1px;
}

.btn,
.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none;
}

.btn {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--spacing) calc(1.5 * var(--spacing));
    background-color: var(--clr-btn-bg, var(--clr-primary-main));
    color: var(--clr-text-inverse);
    outline: 0;
    margin: 0;
    margin-top: calc(2 * var(--spacing));
    border-width: 1px;
    border-style: solid;
    border-radius: 15px;
    border-color: var(--clr-btn-border, var(--clr-primary-dark));
}

.btn:hover,
.btn:focus {
    --clr-btn-bg: var(--clr-primary-dark);
}

.btn:active {
    --clr-btn-bg: var(--clr-secondary-main);
    --clr-btn-border: var(--clr-secondary-dark);
}

.btn-caption.hide {
    display: none;
}

.btn-spinner {
    display: none;
    aspect-ratio: 1 / 1;
    height: calc(3 * var(--spacing));
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    border-top-color: var(--clr-text-inverse);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

.btn-spinner.show {
    display: inline-block;
}

.textinline {
    height: 1rem;
    margin: 0 var(--spacing);
}

.footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    text-align: -webkit-right;
    padding: var(--spacing);
}

.footer > a {
    color: var(--clr-text);
    display: inline-block;
    padding-inline: var(--spacing);
    text-align: right;
    align-self: flex-end;
    position: relative;
}

.footer > a:not(:last-child)::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 2px;
    left: calc(100% - 0.25 * var(--spacing));
    background-color: var(--clr-text);
}

.mbl-start-0 {
    margin-block-start: 0;
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.wartungsarbeiten__container {
    max-width: 60%;
    margin: auto;
    text-align: center;
}

.wartungsarbeiten__header {
    color: var(--clr-text);
    font-size: 2em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
}

.wartungsarbeiten__text {
    color: var(--clr-text);
    font-size: 1em;
}

.auslastung__container {
    max-width: 60%;
    margin: auto;
    text-align: center;
}

.auslastung__text {
    color: var(--clr-text);
    font-size: 1em;
}

.auslastung__timer {
    color: var(--clr-text);
    font-size: 2em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
}

.auslastung__icon {
    max-width: 50%;
    display: inline-block;
    vertical-align: middle;
}

.text-center {
    text-align: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.back-button {
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.back-button:hover {
    background-color: hsl(213, 95%, 95%);
}

.back-button:active,
.back-button:focus {
    outline: 1px solid var(--clr-primary-main-70);
}