/*
@font-face {
    font-family: "bundessansweb";
    src: url("../fonts/BundesSchrift/BundesSansWeb-Bold.woff") format("woff"), url("../fonts/BundesSchrift/BundesSansWeb-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
    font-display: fallback;
}
*/

html {
    /*overflow-y: hidden;*/
    overflow-x: hidden;
    overflow-y: auto;
    background: #000;

    color: #333;

    /*font-family: 'Work Sans', sans-serif;*/

    user-select: text;

}

body {
    margin: 0;
    padding: 0;
}





.klappmenue {
    background-color: #e7e5db;
}

a.menuePunkt {
    color: #000;
}

a.menuePunkt:hover {
    color: #fff;
    background-color: #b8b299;
}

.menue-abdunkelung-flaeche {
   background-color: rgba(0,0,0,0.4);
}

.fehlermeldung,
.text-rot{
    color: #f00;
}

.startseiten-bereich{
    background: #ff0;

    background: #fff;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%, rgba(212,212,212,1) 100%);
}
.seiten-bereich {
    background: #fff;
}

.box-rand {
    border: none;
}
.kreis-grafik{
    background: #fff;
  /*  border: calc(2rem + 2rem) solid #999;*/
}

.kreis-grafik:hover{
  /*  background: #bbb; */



}
.schatten {
    box-shadow: 0rem 0rem 8rem 0rem rgba(0, 0, 0, 0.33);
}
.highscore-zeile-oben-unten {
    border-bottom: 1rem solid #7f7f7f;
}

.highscore-zeile-mitte {
    border-bottom: 1rem solid #d9d9d9;
}
.highscore-farbe-markiert {
    color: #0a66aa;
}

.highscore-farbe-normal {
    color: #fff;


}

.css-input {
    border-color: #888;
    background-color: #fff
}

/* //////////////////// canvas /////////////////////////////////////////////////// */
.cBack{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
}

/* //////////////////// seiten /////////////////////////////////////////////////// */



.schliessen-position{
    position: absolute;
    right: 5px;
    top:  10px;
}
.schliessen-zurueck-position{
    position: absolute;
    left:calc(6rem + 6rem);
    top:  calc(6rem + 6rem);
}




.seiten-bereich,
.startseiten-bereich{
  /*  padding: calc(16rem + 16rem);*/
}

.startseiten-bereich,
.seiten-bereich {
    position: relative;
    border-radius: 10px;
    overflow: hidden;

}


.seite-unsichtbar{
    opacity: 0;
    position: absolute;
    z-index: 1050;
    width: 100%;
    text-align: center;
}



.spiel-button{
    margin: 10rem 0 5rem 0;
}


/* ///////////////////// icons /////////////////////////////////////////////  */





.mittig{
    text-align: center;
}
#alles{
    visibility: hidden;

}
#preloader{
    text-align: center;
    padding-top: 60rem;
}
/*//////////////////////////////////////// bereich /////////////////////////////////////////////////////*/


/*  Größen von max-bereich und Hintergründen wird in JS Api.1.4.js berechnet */
.max-bereich {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;


}

/* ///////////////////////////////////////////// klappmenue  /////////////////// */

.klappmenue {
    position: absolute;
    top: calc(46rem + 46rem);
    right: calc(10rem + 10rem);
    width: 270rem;
    text-align: center;

    z-index: 1600;
    overflow: hidden;

    border-radius: 8rem;

    transition: transform 150ms ease-in-out;
}

a.menuePunkt {
    display: block;
    text-decoration: none;
    line-height: 27rem;
    cursor: pointer;
}

a.menuePunkt:hover {

}

.menue-abdunkelung-flaeche {
    /*display: none;*/
    position: fixed;
    z-index: 1110;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* ///////////////////////////////////////////// mehrfach verwendet /////////////////// */

p{
    margin-top: 14rem;
}

/*/////////////////////////////////////////////////// highscore */
.highscore-alles {
    position: relative;
    text-align: center;
    margin-top:24rem;
}

#highscore-laden {
    text-align: center;
    width: 100%;
    position: absolute;
    margin-top: 80rem;
}

.highscore-zeile {
    display: inline-block;
    width: 100%;
    max-width: 600rem;
}

.highscore-feld {
    display: inline-block;
    overflow: hidden;
}

.highscore-icon-links {
    text-align: left;
    width: 48rem;
}

.highscore-icon-rechts {
    text-align: right;
    width: 48rem;
}

.highscore-platz {
    text-align: center;
    width: 20%;
}

.highscore-nickname {
    text-align: left;
    width: 55%;
}

.highscore-score {
    text-align: center;
    width: 20%;
}

.highscore-icon {
    cursor: pointer;
}

/*///////////////////// formular ///////////////////////////////////////*/

.formular-label{
    display: block;
    width: 100%;
    margin-bottom: 4rem;
}


.inputfeld-bereich {
    display: inline-block;
    width: 100%;
    max-width: 620rem;
   
}

.css-radio-label {
    padding-right: 20rem;
}

.css-checkbox {
    display: inline-block;
    float: left;
    margin: 3rem 15rem 0 0;
}

.css-checkbox-label {
    display: inline-block;
    width: 85%;
    max-width: 600rem;
    text-align: left;
}

.css-input {
    border-style: solid;
    border-width: 2rem;
    border-radius: 5rem;
}

.css-input:focus {
    outline: none;
}

.css-input-select {
    padding: 2rem 0 2rem 0;
    width: calc(100% - 0rem)  ;
}
.inputfeld-bereich-datum{
    text-align: center;
}

.css-input-select-tag {
float: left;
}

.css-input-select-monat {

}

.css-input-select-jahr {
    float: right;
}

.css-input-select-tag,
.css-input-select-monat,
.css-input-select-jahr {
    width: calc(31% - 0rem);
}

.css-input-text {
    padding: 2rem 4rem 2rem 4rem;
    width: calc(100% - 12rem )  ;
}

.css-input-width-30 {
    width: calc(28.5% - 12rem )  ;
}

.css-input-width-50 {
    width: calc(48.5% - 12rem )  ;
}

.css-input-width-70 {
    width: calc(68.5% - 12rem )  ;
}

.css-input-rechts {
   float: right;
}