:root {
    --schriftart: sans-serif;
    --groesse: 1;
    --groesseUeberschrift: 2;
    --groesseUnterUeberschrift: 0.65;
    --schriftfarbe: #FFF;
    --hintergrundfarbe: #000;
    --akzentfarbe1: #0000;
    --akzentfarbe2: #5AA05A;
    --akzentfarbe1aktiv: #0000;
    --akzentfarbe2aktiv: #0000;
    --akzentfarbe3: #F66151;
    --rotation01: 0deg;
    --screenWidth: 100%;
    --animationlength: 0.6;
}

::selection {
    background: var(--akzentfarbe3);
}

@keyframes transition1 {
    0%{
        overflow: hidden;
        border: 6px 6px 6px 0px solid var(--schriftfarbe);
        filter: contrast(.5);
        rotate: 120deg;
        margin-top: -25%;
        margin-right: 100%;
        opacity: 0.5;
        scale: 0.2;
        filter: blur(4px);
        background: #2222;
    }
    50%{
        filter: blur(1px);
        rotate: 0deg;
        margin-top: 0%;
        margin-right: 0%;
        opacity: 0.4;
        scale: 0.5;
    }
    55%{
        border: 2px solid var(--schriftfarbe);
        rotate: 0deg;
        margin-top: 0%;
        margin-right: 0%;
        opacity: 0.4;
        scale: 0.5;
    }
    100%{
        overflow: hidden;
        filter: blur(0px);
        opacity: 1;
        scale: 1;
    }
}


@keyframes transition2 {
    0%{
        filter: blur(10px);
        margin-left: 100%;
        opacity: 0.1;
        rotate: 60deg;
        scale: 0.3;
    }
    50%{
        opacity: 0.3;
        rotate: -15deg;
    }
    100%{
        filter: none;
        scale: 1;
        margin-left: 0%;
        opacity: 1;
        rotate: 0deg;
    }
}

@keyframes transition12 {
    0%{
        transform-origin: 0%;
        filter: blur(5px);
        transform: translateX(calc(var(--screenWidth)*0.86));
        opacity: 0;
    }
    50%{
        opacity: 0.4;
        filter: blur(2px);
    }
    100%{
        transform: translateX(0%);
    }
}

@keyframes transition22 {
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    25%{
        opacity: 0;
        filter: blur(2px);
    }
    100%{
        transform: translateX(0%);
    }
}

@keyframes transition3 {
    0%{
        font-size: calc(var(--groesse)*0.8rem);
        transform: scaleY(1.2);
        background: var(--akzentfarbe2);
    }
    35%{
        font-size: calc(var(--groesse)*1.0rem);    
    }
    100%{
        background: var(--akzentfarbe2aktiv);
    }
}

@keyframes transition4 {
    0%{
        background: var(--akzentfarbe1);
        transform: translateX(0);
        border-radius: 0px 15px 15px 0px;
        height: calc(var(--groesse)*40px - 20px);
    }
    100%{
        background: #0000;
        border-radius: 0px 15px 15px 0px;
        height: calc(var(--groesse)*40px - 20px);
        transform: translateX(-100%);
    }
}

@keyframes transition41 {
    0%{
        transform: translateX(calc(var(--screenWidth) * 0.008));
    }
    100%{
        transform: translateX(calc(var(--screenWidth)*0.16));
    }
}

@keyframes transition5 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes transition6 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@media(prefers-reduced-motion) {
    .animate01 {
        animation: none!important;
    }
    .animate{
        animation: none!important;
    }
    .animate2{
        animation: none!important;
    }
        head{
        animation: none!important;
    }
}

.animate01 {
    animation: transition5 calc(var(--animationlength)*1500ms);
}

.animate{
    animation: transition12 calc(var(--animationlength)*700ms);
}
.animate2{
    animation: transition22 calc(var(--animationlength)*700ms);
}

.animate12{
    animation: transition1 calc(var(--animationlength)*500ms);
}
.animate22{
    animation: transition2 calc(var(--animationlength)*500ms);
}

/*
.animate{
    animation: transition1 700ms;
}
.animate2{
    animation: transition2 700ms;
}

.animate12{
    animation: transition12 500ms;
}
.animate22{
    animation: transition22 500ms;
}
*/

html{
    scrollbar-width: auto;
    scrollbar-color: var(--akzentfarbe3) rgb(0, 0, 0, 0);
    overflow-x: hidden;
}

html::-webkit-scrollbar {
    width: 0.5vw;
}

html::-webkit-scrollbar-thumb {
    background: var(--akzentfarbe3);
}

html::-webkit-scrollbar-track {
    background: rgb(0, 0, 0, 0);
}

.notselection{
    background: var(--schriftfarbe);
    color: var(--hintergrundfarbe);
}

.navigationsleiste{
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    width: calc(0.16 * var(--screenWidth));
    animation: none;
    height: 100vh;
    position: fixed;
    background: linear-gradient(to right, rgba(118,118,118,0.45) 0%, rgba(118,118,118,0.25) 85%);
    z-index: 10;
}

body:not(.noAnimation) .navigationsleiste{
    transition: transform calc(var(--animationlength)*500ms);
}

.zeitauswahlClickgeschw{
    width: 90%;
}

.divges{
    margin-left: 16%;
    height: 100vh;
    background: var(--hintergrundfarbe);
    overflow: visible;
    overflow-x: hidden;
}

body:not(.noAnimation) .divges{
    transition: all calc(var(--animationlength)*500ms);
}

body:not(.click) .divges:not(.settings){
    margin-left: 0%;
}

.listeNebeneinander a{
    overflow: hidden;
}

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: var(--schriftart);
    margin: 0;
    background: var(--hintergrundfarbe);
}

body:not(.noAnimation) .listeNebeneinander{
    transition: all calc(var(--animationlength)*500ms);
    /*transform 500ms, padding 500ms, margin 500ms, */
}

body:not(.click) .listeNebeneinander:not(.settings){
    transform: translateX(100%);
    padding: 0;
    margin-bottom: calc(var(--groesse)*-40px);
}

a{
    color: white;
    text-decoration: none;

}

li{
    overflow: hidden;
    z-index: 10;
}

li a{
    padding: 10px 10px 10px 10px;
    display: block;
    overflow: visible;
}

body:not(.noAnimation) li a{
    transition: all calc(var(--animationlength)*0.5s) ease;
}

.navigationsleiste li a.aktiv{
    /*background: var(--akzentfarbe1aktiv);*/
    transform: translateX(0);
}

body:not(.noAnimation):not(.samesite) .navigationsleiste li a.aktiv{
    animation: transition4 calc(var(--animationlength)*1000ms);
}

.navigationsleiste li a.aktiv div{
    transform: translateX(0);
}

body:not(.noAnimation):not(.samesite) .navigationsleiste li a.aktiv div{
    animation: transition41 calc(var(--animationlength)*1000ms);
}

.navigationsleiste li a:not(.aktiv){
    z-index: 10;
    background: linear-gradient(90deg, var(--akzentfarbe1aktiv)0%, var(--akzentfarbe1)30%, var(--akzentfarbe1)100%);
    background: var(--akzentfarbe1);
    height: calc(var(--groesse)*40px - 20px);
    transform: translateX(calc(var(--screenWidth)*-0.16));
    border-radius: 0px 15px 15px 0px;
    padding: 10px;
}

.navigationsleiste li a{
    display: flex!important;
    align-items: center!important;

}

.navigationsleiste li{
    position: sticky;
    padding: 0;
    margin: 0;
    height: calc(var(--groesse)*40px);
    overflow: visible;
    z-index: 10;
}

#activeBackgroundLeft{
    top: -100%;
    z-index: 3;
    position: absolute;
    background: var(--akzentfarbe1aktiv);
    border-radius: 0px 15px 15px 0px;
    left: 0%;
    width: calc(var(--screenWidth)*0.16);
    transform: translateX(0);
    height: calc(var(--groesse)*40px);
}

.navigationsleiste li a div{
    transform: translateX(calc(var(--screenWidth)*0.16));
    overflow: visible!important;
}

body:not(.noAnimation) .navigationsleiste li a div{
    transition: all calc(var(--animationlength)*0.5s) ease;
}

.navigationsleiste li:hover a:not(.aktiv){
    transform: translateX(0);
}

.navigationsleiste li:hover a:not(.aktiv) div{
    transform: translateX(calc(var(--screenWidth) * 0.008));
}

.head{
    color: white;
    margin: 0;
    padding: 0;
    padding-top: 2%;
    display: flex;
    justify-content: center;
    /*animation: transition2 700ms;*/
}

span{
    display: flex;
    justify-content: center;
}

.timer{
    display: flex;
    justify-content: space-around;
}

input{
    width: 7%;
    accent-color: var(--akzentfarbe3)!important;
    background: var(--hintergrundfarbe)!important;
    color: var(--schriftfarbe);
    border: 1px solid;
    font-size: calc(var(--groesse)*1rem);
    font-family: var(--schriftart);
    border-color: var(--schriftfarbe);
    border-radius: 3px;
}

body:not(.noAnimation) input{
    transition: all calc(var(--animationlength)*0.3s);
}

d{
    color: white;
    display: flex;
    justify-content: center;
}

body:not(.noAnimation) d{
    transition: all calc(var(--animationlength)*0.5s) ease;
}

hr{
    margin-bottom: 1%;
    margin-top: 1%;
    border-top: 1px solid var(--schriftfarbe);
}

.listeNebeneinander{
    height: calc((var(--groesse) + 0.5)*1.8rem);
    list-style-type: none;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    margin-bottom: 2%;
    background: linear-gradient(-90deg, rgba(118,118,118,0.6) 0%, rgba(118,118,118,0.25) 100%);
    position: relative;
}

#activeBackground{
    height: calc((var(--groesse) + 0.5)*1.8rem);
    position: absolute;
    z-index: 6;
    border-radius: 15px;
}

body.click #activeBackground {
    background: var(--akzentfarbe2aktiv); 
}

.nebeneinander{
    float: left;
    text-align: center;
    width: 33.333%;
}
    
body:not(.noAnimation) .nebeneinander a{
    transition: all calc(var(--animationlength)*0.3s)!important;
}

.listeNebeneinander a.aktiv{
    background: var(--akzentfarbe2aktiv);
}

@keyframes scaleBarFont {
    0%{
        scale: 1.0;
    }
    100%{
        scale: 1;
    }
}

body:not(.noAnimation) .listeNebeneinander li.aktiv a{
    animation: scaleBarFont calc(var(--animationlength)*500ms);
}

@keyframes backgroundLoadAktiv {
    0%{
        background: var(--akzentfarbe2);
        border-radius: 15px;
    }
    100%{
        background: none;
        border-radius: 0px;
    }
}

body:not(.noAnimation) .listeNebeneinander li.aktiv{
    animation: backgroundLoadAktiv calc(var(--animationlength)*800ms);
}

.listeNebeneinander li a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center!important;
}

body:not(.noAnimation) .listeNebeneinander a.aktiv{
    animation: transition3 calc(var(--animationlength)*1500ms);
}

.listeNebeneinander li:hover:not(.aktiv){
    background: var(--akzentfarbe2);
    border-radius: 15px;
}


.nebeneinander:hover a:not(.aktiv){
    scale: 1.3;
}

body:not(.noAnimation) .listeNebeneinander li{
    transition: all calc(var(--animationlength)*400ms);
}

.anderes{
    background: rgb(70, 10, 10);
    background: rgb(160, 80, 80);
}

#stoppuhr{
    font-size: xx-large;
}

#timer{
    font-size: xx-large;
}

#Zwischenergebnisse{
    padding: 0;
    margin: 0;
}

.Impressum  a{
    text-decoration: none;
    /*color: rgb(140, 160, 250)!important;*/
    color: var(--akzentfarbe2)!important;
}
.Impressum  a:hover{
    /*color: blue!important;*/
    color: var(--akzentfarbe2aktiv)!important;
}

#reaktionsfeld{
    border-radius: 10px;
    margin-top: 5%;
    border: 2px solid;
    border-color: var(--schriftfarbe);
    height: 20em;
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #222222;
}

#clickfeld{
    border-radius: 10px;
    margin-top: 5%;
    border: 2px solid;
    border-color: var(--schriftfarbe);
    height: 22em;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.white {
    background: rgb(200, 200, 200)!important;
}

.transparent {
    background: rgb(0, 0, 0, 0)!important;
    color: rgb(0, 0, 0, 0)!important;
    stroke: rgb(0, 0, 0, 0)!important;
    border-color: rgb(0, 0, 0, 0)!important;
}

.red {
    background: rgb(255, 150, 150)!important;
}

.green {
    background: rgb(150, 200, 150)!important;
}

.black{
    background: rgb(0, 0, 0)!important;
}

.gray{
    background: #222!important;
}

#reaktionsfeld d{
    color: black;
    font-size: 5em;
}

#clickfeld d{
    color: black;
    font-size: 5em;
}

polygon{
    stroke-width: 2%; 
    stroke: var(--schriftfarbe);
    border-radius: 200px;
}

circle{
    stroke-width: 2%; 
    stroke: var(--schriftfarbe);
    border-radius: 200px;
    fill: var(--hintergrundfarbe);
}

ellipse{
    stroke-width: 2%; 
    stroke: var(--schriftfarbe);
    fill: var(--hintergrundfarbe);
}

.kaestchen{
    border: 2px solid;
    border-color: var(--schriftfarbe);
    width: 33.3%;
    height: 150px;
}

.spanGesamtTicTacToeEnd{
    color: black;
}

#spielfeld{
    padding-left: 5%;
}

.feldGewonnen {
    border: 2px solid var(--schriftfarbe);
    width: 33.3%;
    height: 150px;
    background: var(--akzentfarbe3);
}

.feldGewonnen ellipse{
    stroke: var(--hintergrundfarbe);
    fill: var(--akzentfarbe3);
}

.feldGewonnen polygon{
    stroke: black;
}

.inputUmrechnerBinaer{
    margin-left: 0%;
    margin-right: 1%;
    width: 96%;
    height: auto;
    font-size: calc(var(--groesse) * 1.5rem);
    text-align: center;
}

.inputDivBinaer{
    font-size: 1.5rem;
    width: 33.33%;
}

div{
    overflow: visible;
}

.bigger{
    font-size: 1.5rem;
}

.zahlenfelder{
    margin-right: 5%;
    width: 30%;
}

.zahlenfelder d{
    font-size: 2rem!important;

}

.operatorenfelder d{
    font-size: 2rem!important;
}

.operatorenfelder{
    width: 50%;
}

.unused{
    height: 65px;
    width: 65px;
    margin: 5px;

}

.zahlenfelder div{
    border: 1px solid var(--hintergrundfarbe);
    border-radius: 3px;
    height: 65px;
    width: 65px;
    margin: 5px;
    background: #7775;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

body:not(.noAnimation) .zahlenfelder div{
    transition: scale calc(var(--animationlength)*200ms), border-radius calc(var(--animationlength)*500ms), background calc(var(--animationlength)*300ms), border calc(var(--animationlength)*1000ms);
}

.zahlenfelder div:hover{
    background: #777a;
    scale: 1.25;
    border-radius: 20px;
    border: 1px solid var(--akzentfarbe3);
}

.operatorenfelder div:hover{
    background: #777a;
    scale: 1.15;
    border-radius: 20px;
    border: 1px solid var(--akzentfarbe3);
}

body:not(.noAnimation) a{
    transition: all calc(var(--animationlength)*400ms);
}

.ausgabefeld{
    width: 95%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.operatorenfelder div{
    border: 1px solid var(--hintergrundfarbe);
    border-radius: 3px;
    height: 65px;
    width: 65px;
    margin: 5px;
    background: #7775;
    font-size: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

body:not(.noAnimation) .operatorenfelder div{
    transition: scale calc(var(--animationlength)*200ms), border-radius calc(var(--animationlength)*500ms), background calc(var(--animationlength)*300ms), border calc(var(--animationlength)*1000ms);
}

.ausgabefeld input{
    font-size: 4rem;
    width: 100%;
    height: 100%;
    background: #7775!important;
    padding-right: 2%;
    color: var(--schriftfarbe);
    text-align: right;
    border: 0;
}

.einheitentemp d{
    font-size: 1.5rem;
}

.einheitentemp input{
    width: 28.3%;
}

.einheitenlaeng d{
    font-size: 1.5rem;
    width: 3.5%;
}

@keyframes trans11{
    0%{
        scale: 1;
        rotate: 0;
    }
    50%{
        scale: 1.5;
        filter: blur(1px);
    }
    100%{
        scale: 1;
        rotate: 353deg;
    }
}

@keyframes trans12{
    0%{
        scale: 1;
        rotate: 0;
    }
    50%{
        scale: 1.5;
        filter: blur(1px);
    }
    100%{
        scale: 1;
        rotate: -353deg;
    }
}

@keyframes trans31{
    0%{
        scale: 1;
    }
    50%{
        scale: 1.5;
        filter: blur(1px);
    }
    100%{
        scale: 1;
    }
}

body:not(.noAnimation) input[type="checkbox"] {
    transition: all 0s;
}

body:not(.noAnimation) input[type="checkbox"]:checked {
    animation: trans11 calc(var(--animationlength)*0.5s);
}

body:not(.noAnimation) input[type="checkbox"]:not(:checked) {
    animation: trans12 calc(var(--animationlength)*0.5s);
    rotate: 0;
}

body:not(.noAnimation) input[type="checkbox"]:not(:checked):hover {
    rotate: 15deg;
}

body:not(.noAnimation) input[type="checkbox"]:checked:hover {
    rotate: -15deg;
}

body:not(.noAnimation) input[type="radio"]:checked {
    animation: trans31 calc(var(--animationlength)*0.5s);
}

body:not(.noAnimation) input:not([type="range"]):hover{
    transform: scale(0.97, 0.9);
    border-radius: 10px;
}

.einheitenlaeng input{
    width: 13.5%;
}

.kopfrechenfeld{
    height: 150px;
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 5rem!important;
    margin-right: 20px;
}
.inputergebniskopfrechnen {
    height: 150px;
    width: 33%;
    font-size: 5rem;
    background: var(--hintergrundfarbe);
    color: var(--schriftfarbe);
    border: 1px solid;
    border-color: var(--schriftfarbe);
}

.passwortgeneratorlaengenauswahl div input{
    width: 20px;
    height: 20px;
}

.passwortgeneratorlaengenauswahl {
    margin-left: 10%;
    margin-right: 10%;
    justify-content: space-between;
}

.gear {
    font-size: calc(var(--groesse)*2rem);
    justify-content: left;
}





#menuIcon{
    width: 50px;
    height: 50px;
    overflow: visible;
    transform: scale(calc(var(--groesse)*0.6));
}

body:not(.click) #menuIcon{
    background: var(--hintergrundfarbe);
    position: fixed;
}

body:not(.noAnimation) #menuIcon {
    transition: all calc(var(--animationlength)*0.2s);
}

#menuIcon div{
    width: 50px;
    height: 5px;
    background: var(--schriftfarbe);
    margin-bottom: 17.5px;
    border-radius: 2px;
}

body:not(.noAnimation) #menuIcon div{
    transition: all calc(var(--animationlength)*700ms);
}

body.click #menuIcon div:nth-child(1){
    transform-origin: 0%;
    rotate: 45deg;
    width: 63px;
}

body.click #menuIcon div:nth-child(3){
    transform-origin: 0%;
    rotate: -45deg;
    width: 63px;
}

body.click #menuIcon div:nth-child(2){
    opacity: 0;
    transform: translateX(35px);
}

#menuIcon:hover{
    scale: 1.2;
}

#divmenuIcon {
    width: calc(var(--screenWidth)*0.08);
    height: 20vh;
    position: absolute;
    top : 78vh;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

#divsettings {
    width: calc(var(--screenWidth)*0.08);
    height: 20vh;
    position: absolute;
    top : 78vh;
    left: calc(var(--screenWidth)*0.08);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

#settings {
    transform: translateX(0);
    background: #0000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all calc(var(--animationlength)*500ms);
}

body:not(.noAnimation) .settingsGear{
    transition: all calc(var(--animationlength)*500ms);
}

body:not(.click) #navigationsleiste{
    transform: translateX(-100%);
}

@keyframes transitionHeadOld{
    0%{
        opacity: 1;
        transform: translateX(0);
    }
    50%{
        opacity: 0.4;
        filter: blur(2px);
    }
    100%{
        transform: translateX(calc(var(--screenWidth)*0.86));
        transform-origin: 0%;
        filter: blur(5px);
        opacity: 0;
    }
}

body:not(.noAnimation)  .headOld {
    animation: transitionHeadOld calc(var(--animationlength)*700ms);
}

.headOld {
    position: fixed;
    width: calc(var(--screenWidth)*0.84);
    left: calc(var(--screenWidth)*0.16);
    margin-top : 0px;
    top : 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(var(--screenWidth));
}

body:not(.click) #settings{
    transform: translateX(calc(var(--screenWidth)*-0.16));
}

body:not(.click) .settingsGear{
    transform: translateX(calc(var(--screenWidth)*-0.16));
    opacity: 0;
    z-index: 1;
}

body.click .settingsGear{
    opacity: 1;
    z-index: 10;
}







.gear:hover{
    font-size: calc(var(--groesse)*2.6rem);
}

body:not(.noAnimation) .gear {
    transition: all calc(var(--animationlength)*0.3s) ease;
}

d{
    font-size: calc(var(--groesse)*1rem);
    color: var(--schriftfarbe);
}
a{
    font-size: calc(var(--groesse)*1rem);
    color: var(--schriftfarbe);
}

h6{
    text-align: center;
    color: var(--schriftfarbe)!important;
    font-size: calc(var(--groesse)*0.65rem);
}

h1{
    text-align: center;
    color: var(--schriftfarbe)!important;
    font-size: calc(var(--groesse)*2rem);
    overflow: hidden;
    padding-top: 1vh!important;
}

body:not(.noAnimation) .sett h1 {
    transition: all calc(var(--animationlength)*0.5s) ease;
}

#graphNavigation div span div:hover d{
    scale: 1.8;
}

.durchsichtig {
    opacity: 0;
    scale: 0.3;
    /*transform: scale(0.3) rotateX(90deg) rotateY(90deg) rotateZ(90deg)!important;*/
}

.clock .hand.millisecondin {
    background: var(--akzentfarbe3);
}

#graph{
    cursor: crosshair;
    margin-top: 4px;
    width: 100%;
    height: 400px;
    border: 3px solid;
    border-color: var(--schriftfarbe);
}

.graphPoint {
    border: 0px;
    stroke: none;
    fill: white;
}

#seiteL {
    border: 3px solid;
    border-color: var(--akzentfarbe1);
    accent-color: var(--akzentfarbe1)!important;
    background: var(--hintergrundfarbe);
    color: var(--schriftfarbe);
}

#seiteR {
    border: 3px solid;
    border-color: var(--akzentfarbe2);
    accent-color: var(--akzentfarbe2)!important;
    background: var(--hintergrundfarbe);
    color: var(--schriftfarbe);
}

#ergebnisGleichung {
    border: 3px solid;
    border-color: #F6D32D;
    accent-color: #F6D32D!important;
    border-color: var(--akzentfarbe3);
    accent-color: var(--akzentfarbe3)!important;
    background: var(--hintergrundfarbe);
    color: var(--schriftfarbe);
}

#loeseButton{
    border: 0px;
    background: var(--hintergrundfarbe);
    color: var(--schriftfarbe);   
}

input .not{
    border: 2px solid;
    border-color: var(--schriftfarbe);
    accent-color: var(--schriftfarbe)!important;
    background: var(--hintergrundfarbe);
    color: var(--schriftfarbe);    
}

#under{
    margin-left: 42px;
    width: 100%;
    height: 20px;
    border: 0px solid;
    border-color: var(--schriftfarbe);
}

#left{
    width: 50px;
    height: 411px;
    border: 0px solid;
    border-color: var(--schriftfarbe);
    margin-right: 2px;
}

.gleichsys {
    width: 35px;
    border: 1px solid;
    border-color: var(--schriftfarbe);
    accent-color: var(--akzentfarbe3)!important;
    background: var(--hintergrundfarbe);
    color: var(--schriftfarbe);
}



iframe {
    width: 84%;
    margin-left: 16%;
    height: 640px;
}

@keyframes transitionpopup {
    0% {
        filter: blur(5px);
        opacity: 0.1;
	scale: 0.5;
        /*transform: scale(0) rotateZ(100deg) rotateY(140deg) rotateX(-60deg);*/
    }
    100% {
        opacity: 1;
        filter: blur(0px);
	scale: 1;
        /*transform: scale(1) rotateZ(0deg) rotateY(0deg) rotateX(0deg);*/
    }
}

#aufford{
    transform: scale(1) rotateZ(0deg) rotateY(0deg) rotateX(0deg);
    overflow: visible!important;
    display: grid;
    place-content: top;
    position: absolute;
    border-radius: 15px;
    top: 30vh;
    left: 33%;
    width: 50%;
    padding-top: 1%;
    aspect-ratio: 2/1;
    background: var(--hintergrundfarbe);
    z-index: 100;
    border: 3px solid var(--akzentfarbe3);
    color: var(--schriftfarbe);
    box-shadow: 0px 0px 50px 5px var(--akzentfarbe3);
}

body:not(.noAnimation) #aufford{
    transform-style: preserve-3d;
    animation: transitionpopup calc(var(--animationlength)*300ms) linear;
    transition: all calc(var(--animationlength)*700ms);

}


.sett section:nth-child(1) {
    width: 100%;
    aspect-ratio: 3/1;
}
.sett section:nth-child(2) {
    width: 100%;
    aspect-ratio: 6/1;
}

#JANEIN{
    height:100%;
}

#JANEIN div{
    display: grid;
    place-content: center;
    border: 1px solid var(--schriftfarbe);
}

body:not(.noAnimation) #JANEIN div{
    transition: all calc(var(--animationlength)*250ms);
}

#JANEIN div:hover d{
    font-size: 1.5rem!important;
}

#JANEIN div:nth-child(1){
    border-radius: 0px 0px 0px 13px;
}

#JANEIN div:nth-child(2){
    border-radius: 0px 0px 13px 0px;
}

#JANEIN d{
    font-size: 2rem!important;
}

section{
    display: grid;
    place-content: top;
}

.BodyMass-Index-Input input{
    width: 35%;
    margin-left: 5%;
    margin-right: 1%;
}

#arrow1{
    position: absolute;
    font-size: 10rem;
    rotate: var(--rotation01);
    margin-left:0%;
    top: 0%;
    transform: translate(-50%, -50%);
    margin-top: 300px;
    margin-left: 500px;
    transform-origin: center;
}

.information{
    overflow: hidden;
    width: calc(var(--groesse)*20px);
    height: calc(var(--groesse)*35px);
    position: absolute;
    background: var(--schriftfarbe);
    color: var(--hintergrundfarbe);
    top: 10px;
    right: 15px;
    font-size: calc(var(--groesse)*2rem);
    border-radius: 100%;
    box-shadow: 0px 0px 5px 5px var(--schriftfarbe);
    z-index: 99999;
}

body:not(.noAnimation) .information{
    transition: all 0s;
}

.information:hover{
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: calc(var(--groesse)*1rem);
    border-radius: 2%;
    width: 45%;
    height: 75%;
    cursor: help;
}

body:not(.noAnimation) .information:hover{
    transition: width calc(var(--animationlength)*0.5s), height calc(var(--animationlength)*0.5s);
}

.information:hover > div:nth-child(1){
    opacity: 0;
    scale: 0;
}

.information:hover > div:nth-child(2){
    opacity: 1;
    scale: 1;
}

.information:not(:hover) > div:nth-child(1){
    opacity: 1;
    scale: 1;
}

.information:not(:hover) > div:nth-child(2){
    opacity: 0;
    scale: 0;
}

.information div{
    position: absolute;
}

@keyframes transitionUnload0{
    0%{
        opacity: 1;
        scale: 1;
    }
    100%{
        opacity: 0.3;
        scale: 0.1;
    }
}

@keyframes transitionUnload1{
    0%{
        opacity: 1;
        scale: 1;
        transform: translateX(0%);
        filter: blur(0px);
    }
    50%{
        filter: blur(2px);
        opacity: 0.4;
    }
    100%{
        opacity: 0;
        scale: 1;
        transform: translateX(-100%);
        filter: blur(5px);
    }
}

#animateUnload{
    margin-left: 16%;
    opacity: 1;
    scale: 0;
    z-index: 0;
    left: 0%;
    position: absolute;
    width: 84%;
    height: 100vh;
}

body:not(.noAnimation) #animateUnload.ani0{
    animation: transitionUnload1 calc(var(--animationlength)*500ms);
}

body:not(.noAnimation) #animateUnload.ani1{
    animation: transitionUnload0 calc(var(--animationlength)*500ms);
}

#cookieAllow{
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    height: 10vh;
    top: 90vh;
    background: #222;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: right;
    color: #fff;
    font-size: 2rem;
}

body:not(.noAnimation) #cookieAllow{
    transition: all calc(var(--animationlength)*500ms);
}

.cookieAllowHide{
    transform: translateY(-200vh);
    scale: 0.5;
    opacity: 0;
}

#cookieAllow a{
    color: #fff;
    font-size: 2rem;
}

body:not(.noAnimation) #cookieAllow a{
    transition: all calc(var(--animationlength)*300ms);
}

#cookieAllow a:hover{
    color: #bbc;
    scale: 0.95;
}

#cookieAllow div{
    border-radius: 10px;
    margin-left: 1%;
    margin-right: 1%;
    height: 80px;
    width: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
}

body:not(.noAnimation) #cookieAllow div{
    transition: all calc(var(--animationlength)*300ms);
}

#cookieAllow div:hover{
    font-size: 1.7rem;
}

#annehmen{
    background: #353;
    margin-right: 2.5%!important;
}
#ablehnen{
    background: #533;
    margin-left: 4%!important;
}

.mein_counter table {
    color: var(--schriftfarbe)!important;
}

p{
    color: var(--schriftfarbe);
}

#zeichenfeld{
    width: 100%;
    height: 70vh;
    background: #f00;
}




/*css Uhr*/

:root {
    --groesseTime: 400px;
  }
  
  #divclock {
    padding-top: 2%;
    padding-bottom: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  .clock {
    width: var(--groesseTime);
    height: var(--groesseTime);
    border-radius: 50%;
    position: relative;
    background: #8888;
  }
  
  .clock .number {
    --rotation: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(var(--rotation));
    font-size: 1.5rem;
  }
  
  .punkteuhr{
    height: 10px;
    width: 10px;
    position: relative;
  }
  
  .clock .point {
    padding-top: 2%;
    --rotationpoint: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(var(--rotationpoint));
    font-size: 1rem;
    color: white;
  }
  
  .clock .strich {
    padding-top: 2%;
    --rotationpoint: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(var(--rotationpoint));
  }
  
  .clock .number1 { --rotation: 30deg; }
  .clock .number2 { --rotation: 60deg; }
  .clock .number3 { --rotation: 90deg; }
  .clock .number4 { --rotation: 120deg; }
  .clock .number5 { --rotation: 150deg; }
  .clock .number6 { --rotation: 180deg; }
  .clock .number7 { --rotation: 210deg; }
  .clock .number8 { --rotation: 240deg; }
  .clock .number9 { --rotation: 270deg; }
  .clock .number10 { --rotation: 300deg; }
  .clock .number11 { --rotation: 330deg; }
  
  
  .clock .point1 { --rotationpoint: 6deg; }
  .clock .point2 { --rotationpoint: 12deg; }
  .clock .point3 { --rotationpoint: 18deg; }
  .clock .point4 { --rotationpoint: 24deg; }
  .clock .point5 { --rotationpoint: 30deg; }
  .clock .point6 { --rotationpoint: 36deg; }
  .clock .point7 { --rotationpoint: 42deg; }
  .clock .point8 { --rotationpoint: 48deg; }
  .clock .point9 { --rotationpoint: 54deg; }
  .clock .point10 { --rotationpoint: 60deg; }
  .clock .point11 { --rotationpoint: 66deg; }
  .clock .point12 { --rotationpoint: 72deg; }
  .clock .point13 { --rotationpoint: 78deg; }
  .clock .point14 { --rotationpoint: 84deg; }
  .clock .point15 { --rotationpoint: 90deg; }
  .clock .point16 { --rotationpoint: 96deg; }
  .clock .point17 { --rotationpoint: 102deg; }
  .clock .point18 { --rotationpoint: 108deg; }
  .clock .point19 { --rotationpoint: 114deg; }
  .clock .point20 { --rotationpoint: 120deg; }
  .clock .point21 { --rotationpoint: 126deg; }
  .clock .point22 { --rotationpoint: 132deg; }
  .clock .point23 { --rotationpoint: 138deg; }
  .clock .point24 { --rotationpoint: 144deg; }
  .clock .point25 { --rotationpoint: 150deg; }
  .clock .point26 { --rotationpoint: 156deg; }
  .clock .point27 { --rotationpoint: 162deg; }
  .clock .point28 { --rotationpoint: 168deg; }
  .clock .point29 { --rotationpoint: 174deg; }
  .clock .point30 { --rotationpoint: 180deg; }
  .clock .point31 { --rotationpoint: 186deg; }
  .clock .point32 { --rotationpoint: 192deg; }
  .clock .point33 { --rotationpoint: 198deg; }
  .clock .point34 { --rotationpoint: 204deg; }
  .clock .point35 { --rotationpoint: 210deg; }
  .clock .point36 { --rotationpoint: 216deg; }
  .clock .point37 { --rotationpoint: 222deg; }
  .clock .point38 { --rotationpoint: 228deg; }
  .clock .point39 { --rotationpoint: 234deg; }
  .clock .point40 { --rotationpoint: 240deg; }
  .clock .point41 { --rotationpoint: 246deg; }
  .clock .point42 { --rotationpoint: 252deg; }
  .clock .point43 { --rotationpoint: 258deg; }
  .clock .point44 { --rotationpoint: 264deg; }
  .clock .point45 { --rotationpoint: 270deg; }
  .clock .point46 { --rotationpoint: 276deg; }
  .clock .point47 { --rotationpoint: 282deg; }
  .clock .point48 { --rotationpoint: 288deg; }
  .clock .point49 { --rotationpoint: 294deg; }
  .clock .point50 { --rotationpoint: 300deg; }
  .clock .point51 { --rotationpoint: 306deg; }
  .clock .point52 { --rotationpoint: 312deg; }
  .clock .point53 { --rotationpoint: 318deg; }
  .clock .point54 { --rotationpoint: 324deg; }
  .clock .point55 { --rotationpoint: 330deg; }
  .clock .point56 { --rotationpoint: 336deg; }
  .clock .point57 { --rotationpoint: 342deg; }
  .clock .point58 { --rotationpoint: 348deg; }
  .clock .point59 { --rotationpoint: 354deg; }
  .clock .point60 { --rotationpoint: 360deg; }
  
  .clock .strich1 { 
    stroke-width: 1%; 
    --rotationpoint: 0deg; 
  }
  .clock .strich2 { 
    stroke-width: 1%; 
    --rotationpoint: 30deg; 
  }
  .clock .strich3 { 
    stroke-width: 1%; 
    --rotationpoint: 60deg; 
  }
  .clock .strich4 { 
    stroke-width: 1%; 
    --rotationpoint: 90deg; 
  }
  .clock .strich5 { 
    stroke-width: 1%; 
    --rotationpoint: 120deg; 
  }
  .clock .strich6 { 
    stroke-width: 1%; 
    --rotationpoint: 150deg; 
  }
  .clock .strich7 { 
    stroke-width: 1%; 
    --rotationpoint: 180deg; 
  }
  .clock .strich8 { 
    stroke-width: 1%; 
    --rotationpoint: 210deg; 
  }
  .clock .strich9 { 
    stroke-width: 1%; 
    --rotationpoint: 240deg; 
  }
  .clock .strich10 { 
    stroke-width: 1%; 
    --rotationpoint: 270deg; 
  }
  .clock .strich11 { 
    stroke-width: 1%; 
    --rotationpoint: 300deg; 
  }
  .clock .strich12 { 
    stroke-width: 1%; 
    --rotationpoint: 330deg; 
  }
  
  
  .clock .hand:not(#millisecondsHand){
    --rotation: 0;
    position: absolute;
    bottom: 50%;
    left: 50%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform-origin: bottom;
    transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
  }
  
  .clock::after {
    content: '';
    position: absolute;
    background: #888;
    z-index: 11;
    width: 15px;
    height: 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  
  .clock .hand.second {
    width: 2px;
    height: 45%;
    background-color: red;
    z-index: 8;
  }
  
  .clock .hand.millisecond {
    height: 55%;
    display: flex;
    justify-content: right;
    z-index: 200;
  }
  
  .clock .hand.millisecondin {
    width: 20px;
    height: 10px;
    z-index: 200;
    border-radius: 0%;
    border-top: 10px solid var(--hintergrundfarbe);
  }
  
  .clock .hand.minute {
    width: 5px;
    height: 38%;
    background-color: rgb(255, 200, 200);
    z-index: 9;
  }
  
  .clock .hand.hour {
    width: 8px;
    height: 31%;
    background-color: white;
    z-index: 10;
  }
  
/*Z.1000*/

input[type="button"]:hover{
    border: 1px solid var(--schriftfarbe)!important;
    box-shadow: 2px 2px 20px var(--schriftfarbe);
}