:root {
    --clUeberschrift: #eb2;
    --clUeberschrift2: #888;
    --clGruen: rgb(9, 175, 3);
    --clRechnung: #444;
    --clSchlussstrich: #cfba88;
    --clGold: #fc3;
    /* rgb(255,204,51) */
    --marginRzeichen: 0.2em;
}

h1 {
    font-weight: 300;
    color: var(--clUeberschrift);
    font-size: 1.8em;
    margin-bottom: 30px;
}

h2 {
    font-weight: 500;
}

.ueberschrift2 {
    font-size: 1.4em;
    color: var(--clUeberschrift2);
}

.regel {
    color: var(--clUeberschrift2);
    font-size: 1.2em;
    margin-top: 40px;
}

body {
    background-color: #fafafa;
    padding: 0px;
    margin: 0px;
    font-family: Monastry, Raleway, sans-serif;
    font-weight: 360;
}

#wrapper {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    text-align: left;
}

.zeile {
    border-bottom: 1px solid var(--clSchlussstrich);
}

#hinweise {
    position: relative;
    width: 898px;
    text-align: center;
    border-bottom: 1px solid var(--clSchlussstrich);
    font-size: 1.15em;
    line-height: 1.5em;
    color: #444;
}

#footer {
    margin-top: 12px;
    margin-bottom: 20px;
}

.fehlerMeld1,
.fehlerMeld2,
.fehlerMeld3,
.fehlerMeld4 {
    border: 1px solid #c00;
    background-color: rgba(204, 0, 0, 0.06);
    margin-bottom: 60px;
}

#help2click {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    font-size: 2em;
    color: rgb(211, 161, 11);
    text-align: center;
    background-color: rgba(255, 233, 108, 0.3);
    border: 1px solid rgb(211, 161, 11);
    border-radius: 50%;
    cursor: pointer;
}

#help2click:hover {
    background-color: rgba(255, 233, 108, 0.6);
    color: rgb(165, 125, 4);
}

#help2 {
    display: none;
    position: absolute;
    top: 50px;
    left: 320px;
    width: 360px;
    padding: 60px 30px 70px 60px;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(../pics/Pergamentrolle.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.closeHelp {
    position: absolute;
    top: 65px;
    right: 30px;
    border: 1px solid rgb(160, 131, 2);
    color: #c00;
    font-size: 1.6em;
    font-weight: bold;
    background-color: rgb(247, 224, 162);
    opacity: 0.6;
}

.closeHelp:hover {
    opacity: 1;
}

#erweiterungszahlen {
    margin-top: 18px;
    text-align: center;
}

#erweiterungszahl {
    margin-top: 28px;
    margin-left: 60px;
}

.erw {
    font-weight: bold;
    color: var(--clGruen);
}

.hn {
    font-weight: bold;
    color: rgb(220, 40, 240);
}

.rechnung {
    position: relative;
    width: 321px;
    height: 180px;
    margin-right: 16px;
    float: left;
    text-align: left;
    padding-top: 60px;
    padding-left: 40px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect x="0" y="0" width="20" height="20" fill="none" stroke="rgb(208,200,192)" stroke-width="0.5"/></svg>');
}

.zaehler,
.nenner {
    width: 2.2em;
    margin-left: 0;
    text-align: center;
    font-size: 1.6em;
    color: var(--clRechnung);
    border: 1px solid #e4e4e4;
}

#rechnung1 {
    width: 256px;
    padding-left: 105px;
}

#rechnung2 {
    width: 286px;
    padding-left: 75px;
}

#rechnung1 .zaehler,
#rechnung1 .nenner,
#rechnung2 .zaehler,
#rechnung2 .nenner {
    width: 1.8em;
    margin-left: 0.2em;
}

.bruchstrich {
    width: 3.7em;
    height: 0.3em;
    margin: 0.4em 0;
    background-color: var(--clRechnung);
}

#rGanze1 {
    margin-left: 0px;
}

.rGanze {
    vertical-align: 54%;
}

.ganze {
    font-size: 4em;
    width: 1.2em;
    text-align: center;
    border: 1px solid #e4e4e4;
}

.gleich,
.gleich2 {
    min-width: 0.4em;
    font-size: 6em;
    margin-right: var(--marginRzeichen);
    vertical-align: 8px;
}

.gleich2 {
    margin-left: var(--marginRzeichen);
}

.rBruch,
.plus,
.gleich,
.gleich2,
.rGanze {
    display: inline-block;
}

.plus,
.gleich,
.gleich2,
.ganze {
    color: var(--clRechnung);
}

.plus {
    font-size: 6.4em;
    margin: 0 var(--marginRzeichen);
}

.diagramm {
    float: left;
}

.dPlus,
.dGleich {
    float: left;
    font-size: 7em;
}

.dPlus {
    margin: 54px 20px 0 20px;
}

.dGleich {
    margin: 48px 20px 0 20px;
}

.schritt {
    margin-top: 2.5em;
}

.piechart {
    -webkit-animation: rotatecw 15s 0s linear infinite;
    animation: rotatecw 15s 0s linear infinite;
}

.piechartcw {
    -webkit-animation: rotatecw 3s 0s linear infinite;
    animation: rotatecw 3s 0s linear infinite;
}

.piechartccw {
    -webkit-animation: rotateccw 3s 0s linear infinite;
    animation: rotateccw 3s 0s linear infinite;
}

.zentriert {
    text-align: center;
}

@keyframes rotatecw {
    0% {
        -webkit-transform-origin: 130px 150px;
        -webkit-transform: rotate(0deg);
        transform-origin: 130px 150px;
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin: 130px 150px;
        -webkit-transform: rotate(360deg);
        transform-origin: 130px 150px;
        transform: rotate(360deg);
    }
}

@keyframes rotateccw {
    0% {
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: rotate(360deg);
        transform-origin: 50% 50%;
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: rotate(0deg);
        transform-origin: 50% 50%;
        transform: rotate(0deg);
    }
}

@media (max-width: 916px) {
    #hinweise,
    #wrapper {
        width: 100%;
    }
}