:root {
    --Hintergrund: #ffffff;
    --SignalGelb: #fbdd40;
    --SignalRot: #d1462f;
    --SignalGruen: #03c68c;
    --InaktivGrau: #ccc;
    --Schattengrau: #aaa;
    --Hightlight: #fbdd4080;
    /* Fuer den Lade-Spinner. Nicht loeschen! */
    --Hauptfarbe: #fff;
    --Kontrastfarbe: #c81e6c;
    /* TW-Colors */
    --TWGreen: #00c389;
    --TWCharcoal: #5b6770;
    --TWMidnight: #141b4d;
    --TWPineGreen: #007b4b;
    --TWSmoke: #d9d9d6;
    --TWSteel: #bbc7d6;
    --TWForest: #005844;
    --TWRed: #da291c;
    --TWOrange: #ff671f;
    --TWBlue: #1d428a;
    --TWIce: #a7c6ed;
    --TWYellow: #fbdd40;
    --TWLilac: #a7a4e0;
    --TWIris: #606eb2;
    --TWPurple: #671e75;
    --TWSalmon: #eaa794;
    --TWAqua: #2dccd3;
    --IceWhite: #fdfdff;
    --side-bar-width: 75px;
    --side-panel-width: 330px;
    --header-height: 60px;
    --side-panel-width-tq: 450px;
}

/* Absolute Center Spinner */
.ladekreis {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

/* Transparent Overlay */
.ladekreis:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(20, 20, 20, 0.4), rgba(0, 0, 0, 0.4));
    background: -webkit-radial-gradient(
        rgba(20, 20, 20, 0.4),
        rgba(0, 0, 0, 0.4)
    );
}

/* :not(:required) hides these rules from IE9 and below */
.ladekreis:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.ladekreis:not(:required):after {
    content: "";
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 3s infinite linear;
    -moz-animation: spinner 3s infinite linear;
    -ms-animation: spinner 3s infinite linear;
    -o-animation: spinner 3s infinite linear;
    animation: spinner 3s infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: var(--Hauptfarbe) 1.5em 0 0 0,
        var(--Hauptfarbe) 1.1em 1.1em 0 0, var(--Hauptfarbe) 0 1.5em 0 0,
        var(--Hauptfarbe) -1.1em 1.1em 0 0, var(--Hauptfarbe) -1.5em 0 0 0,
        var(--Hauptfarbe) -1.1em -1.1em 0 0, var(--Hauptfarbe) 0 -1.5em 0 0,
        var(--Kontrastfarbe) 1.1em -1.1em 0 0;
    box-shadow: var(--Hauptfarbe) 1.5em 0 0 0, var(--Hauptfarbe) 1.1em 1.1em 0 0,
        var(--Hauptfarbe) 0 1.5em 0 0, var(--Hauptfarbe) -1.1em 1.1em 0 0,
        var(--Hauptfarbe) -1.5em 0 0 0, var(--Hauptfarbe) -1.1em -1.1em 0 0,
        var(--Hauptfarbe) 0 -1.5em 0 0, var(--Kontrastfarbe) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.TextUnsichtbar {
    opacity: 0;
    transition-delay: 0s;
    transition-duration: 0.5s;
}
.TextSichtbar {
    opacity: 1;
    transition-delay: 0s;
    transition-duration: 0.8s;
}

.Hidden {
    display: none;
}