/* ///////////////////// font size /////////////////////////////////////// */

body,
.button{
    font-size:  calc(6px + 12rem);
}
h1,h2 {
    font-size: calc(10px + 22rem);
    line-height: calc(12px + 24rem);;
}

h3 {
    font-size: calc(7px + 14rem);
}

.button-bereich {
    margin: 10rem 0 4rem 0;
    text-align: center;
    min-height: 46px;
}

.highscore-farbe-markiert ,
.highscore-farbe-normal {
    line-height: calc(23px + 23rem);
}

a.menuePunkt {
    line-height: calc(13px + 13rem);
}

.seiten-rahmen{
    pointer-events: none;
}

#SpielDebugAusgabeDivNeu,
.startseiten-bereich,
.seiten-bereich{
    pointer-events: all;
}


.avatar-vor,
.avatar-zurueck,
.highscore-anfang,
.highscore-zurueck,
.highscore-vor,
input,
select,
a{
    pointer-events: all;
}

.menue-icon-bereich {
    background: #000;
    height: 100px;
    width: 80%;
    position: absolute;
    z-index: 999;
bottom: 0;
}

.kreis-grafik{
    position: absolute;
    width: 40px;

    cursor: pointer;
    z-index: 1211;

    border-radius: 50%;

}

.info-position,
.hilfe-position,
.highscore-position,
.sound-position {
    top: 28px;
}




.sound-position{
    right: 50px;
}

.info-position{
    right: 90px;
}

.highscore-position{
    right: 130px;
}
.hilfe-position{
    right: 170px;
}


.logo-avatarauswahl-position,
.logo-position{
    position: absolute;
    width: 250px;
    top: 20px;
    left: 60px;
    z-index: 1111;
}
/*
.logo-avatarauswahl-position,
.logo-position{
    position: absolute;
    width: calc(88px + 176rem);
    top: calc(13px + 13rem);
    left: 60rem;
    z-index: 1111;
}
*/

.hs-podest{
    position: relative;
}

.hs-leer-oben{
    width: 100%;
}

.hs-pokale,
.hs-treppe{
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
}


.hs-avatar{
    background: rgba(250,0,0,0.2);
    position: absolute;
    width: 33%;
}

.hs-avatar-links{
    left:-5%;
    top:10%;
}
.hs-avatar-mitte{
    left:31%;
    top:4%;
}
.hs-avatar-rechts{
    left:67%;
    top:13%;
}

.hs-koerper{
    position: absolute;
    left:0;
    top:0;
    width:116%; /*width:220rem;*/
}

.hs-kopf{
    position: absolute;
    width:45%; /*width:84rem;*/
    left:38rem;
    top:18rem;
}

.hs-nicknames{
    position: relative;
}

.hs-nick-links{
    position: absolute;
    width: 30%;
    left: 1%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}
.hs-nick-mitte{
    position: absolute;
    width: 30%;
    left: 36%;
    top:0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}
.hs-nick-rechts{
    position: absolute;
    width: 30%;
    left: 71%;
    top:0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

.hs-fahne-links{
    position: absolute;
    width: 18%;
    left: 6%;
    top: 26%;
}

.hs-fahne-mitte{
    position: absolute;
    width: 18%;
    left: 42%;
    top: 13%;
}

.hs-fahne-rechts{
    position: absolute;
    width: 18%;
    left: 78%;
    top: 32%;
}

.avatar-zurueck,
.avatar-vor,
.highscore-zurueck,
.highscore-anfang,
.highscore-vor{
    display: inline-block;
    width: calc(20px + 20rem);
    height: calc(20px + 20rem);
    cursor: pointer;
    z-index: 1111;
    border-radius: 50%;
    margin-top: 10rem;
}

/*//////////////////////////////////////////////////////////////*/

.avatar-zurueck {
    background: url(../icons/icon-avatar-zurueck.png) #eee648;
    background-size:cover;
}
.avatar-zurueck:hover {
    background: url(../icons/icon-avatar-zurueck-over.png) #003399;
    background-size:cover;
}
/*//////////////////////////////////////////////////////////////*/

.avatar-vor {
    background: url(../icons/icon-avatar-vor.png) #eee648;
    background-size:cover;
}
.avatar-vor:hover {
    background: url(../icons/icon-avatar-vor-over.png) #003399;
    background-size:cover;
}




/*//////////////////////////////////////////////////////////////*/

.highscore-anfang {
    background: url(../icons/highscore-zum-anfang.png) #eee648;
    background-size:cover;
}
.highscore-anfang:hover {
    background: url(../icons/highscore-zum-anfang-over.png) #003399;
    background-size:cover;
}

/*//////////////////////////////////////////////////////////////*/

.highscore-zurueck {
    background: url(../icons/highscore-zurueck.png) #eee648;
    background-size:cover;
}
.highscore-zurueck:hover {
    background: url(../icons/highscore-zurueck-over.png) #003399;
    background-size:cover;
}
/*//////////////////////////////////////////////////////////////*/

.highscore-vor {
    background: url(../icons/highscore-vor.png) #eee648;
    background-size:cover;
}
.highscore-vor:hover {
    background: url(../icons/highscore-vor-over.png) #003399;
    background-size:cover;
}



/*//////////////////////////////////////////////////////////////*/

.highscore-close-icon,
.highscore-weiter-icon {
    position: absolute;
    width: calc(20px + 20rem);
    height: calc(20px + 20rem);
    cursor: pointer;
    z-index: 1111;
    border-radius: 50%;
   /* background: #000;*/
    right: calc(-22px - 22rem);
}

.highscore-close-icon {
    background: url(../icons/icon-schliessen.png) #eee648;
    background-size:cover;
}
.highscore-close-icon:hover {
    background: url(../icons/icon-schliessen-over.png) #003399;
    background-size:cover;
}

.highscore-close-icon{
    right: calc(-12px - 12rem);
    top:calc(-11px - 11rem);
}


.klick-hs-normal{
    top: 110rem;
}
.klick-hs-laender{
    top: 14rem;
}

.klick-highscore-startseite{
    position: absolute;
    top: calc(-22px - 44rem);
    left: calc(-10px - 40rem);
    cursor: pointer;
}

.klick-hs-flagge{
    cursor: pointer;
}