/* __________allgemein_____v5.9 */


@font-face
{
 font-family: 'freigeistmedium';
 src: url('fonts/rene_bieder_-_freigeist_medium-webfont.woff2') format('woff2'),
 url('fonts/rene_bieder_-_freigeist_medium-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}


body
{
 text-align: center;
 padding: 0 0 0 0;
 background-color: #ec670b;
}



#mainfrm
{
 background-color: #006969;
 max-width: 820px;
 max-height: 840px;
 min-width: 240px;
 width=100%;
 display: block;
 border-radius: 16px;
 padding: 0px 0px 16px 0px;
}


#lade
{
 font-family: 'freigeistmedium';
 max-width:870px;
 font-size:25px; 
 color: #fee7e3;
}


.ladelogo {
 border-left: 2px solid #aaaaaa;
 border-right: 2px solid #aaaaaa;
 border-bottom: 2px solid #aaaaaa;
 border-top: 2px solid #aaaaaa;
 border-radius: 6px;
 height: 35px;
 width: 35px;
}


/* Willkommenseite  */

#willkommen
{
 display:none; 
 font-family: 'freigeistmedium';
 max-width:820px;
 font-size:34px; 
 color: #fee7e3;
}


.wlkbild
{
 height:28%;
 width: 28%;
 border-left: 6px solid #aaaaaa;
 border-right: 6px solid #aaaaaa;
 border-bottom: 6px solid #aaaaaa;
 border-top: 6px solid #aaaaaa;
 border-radius: 6px;

 transition: all .2s ease-out;
 -webkit-transition: all .2s ease-out;
 transform: rotate(0deg);
}


#wlkgra {
 cursor: pointer;
 border-color: #aaaaaa;
}


#wlkani {
 cursor: pointer;
 border-color: #aaaaaa;
}


.wlktxt
{
 font-family: 'freigeistmedium';
 font-size:25px; color: #fee7e3;
}


#wlkbd
{
margin-top:20px;
}


#wlktsp
{
 margin-top:20px;
 font-family: 'freigeistmedium';
 font-size:48px;color: #fee7e3;
}




#main
{
 padding: 3px 3px 3px 3px;
 display: none;
 width = 100%;
 max-width: 800px;
}


#vorhangoben
{
 width: 100%;
 height: 78px;
 border-style: hidden;
 border-radius: 5px;
 margin-top:8px;
}


#zaehler
{
 margin-top: -73px;
 z-index:15;
}


.snoe
{
 height: 27px;
 width: 25%;
}


.idx
{
 border-left: 3px solid #f9d3e5;
 border-right: 3px solid #f9d3e5;
 border-bottom: 3px solid #f9d3e5;
 border-top: 3px solid #f9d3e5;
 border-radius: 6px;
 height: 50px;
 width: 50px;
}


#zaehler0
{
 transition: all .2s ease-out; 
 -webkit-transition: all .2s ease-out;
 transform: rotate(0deg);
}


#zaehler1
{
 transition: all .2s ease-out; 
 -webkit-transition: all .2s ease-out;
 transform: rotate(0deg);
}


#spielcontainer
{
 margin-top: 12px;
 padding: 0px 0px 0px 0px;
 display: flex; 
 flex-wrap: nowrap;
 justify-content:space-between;
 align-items: top;
}


.vorhang
{
width:70px;
height: 101%;
margin-top:-8px;
}


.bild
{
 width: 22.5%;
 border-left: 4px solid #aaaaaa;
 border-right: 4px solid #aaaaaa;
 border-bottom: 4px solid #aaaaaa;
 border-top: 4px solid #aaaaaa;
 border-radius: 6px;
 padding: 0px 0px 0px 0px;
 margin-left: 1px;
 margin-top: -1px;
 margin-right: 1px;
 margin-bottom: -1px;
 cursor: pointer;

 transition: all .2s ease-out; 
 -webkit-transition: all .2s ease-out;
 -ms-transition: all . 1.5s ease-out;
 -moz-transition: all . 1.5s ease-out;
 -o-transition: all . 1.5s ease-out;

 transform: rotate(0deg);
}


.fusscontainer
{
 display: flex;
 align-items: center;
 display: flex; 
 flex-wrap: nowrap;
 justify-content:space-between;
 font-family: 'freigeistmedium';
 color: #e9425c;
 margin-top: 20px;
}

.button
{
 font-family: 'freigeistmedium';
 color: #fae8e3;
 cursor: pointer;
 border-left: 3px solid #16bda3;
 border-right: 3px solid #16bda3;
 border-bottom: 3px solid #16bda3;
 border-top: 3px solid #16bda3;
 border-radius: 20px;
 margin-top: 0px;
 padding: 6px 0px 6px 0px;
 background-color: #e9425c;
 opacity: 1.0;
 min-width: 25%;
 margin-left: 8.5%;
 margin-right: 8.5%;
}

#nbut
{
 cursor: default;
 font-family: 'freigeistmedium';
 color: #aaaaaa;
}



.btnsted
{
 margin-top: 20px;
 cursor: pointer;
 font-size: 24px;
 color: #fee7e3;
 padding: 8px 0px 8px 0px;
 border-left: 3px solid #16bda3;
 border-right: 3px solid #16bda3;
 border-bottom: 3px solid #16bda3;
 border-top: 3px solid #16bda3;
 border-radius: 20px;
 width: 280px;
 background-color: #e9425c;
}



#zuende
{
 display: none;
 font-family: 'freigeistmedium';
 max-width: 870px;
 font-size: 34px; 
 color: #fee7e3;
}











/* medienanpassung  */



@media all and (max-width: 570px) {

/* Willkommenseite */

#lade
{
 font-size:20px;
}


#willkommen
{
 display:none;
 font-family: 'freigeistmedium';
 max-width: 568px;
 font-size: 27px; 
 color: #e9425c;
}


.wlkbild
{
 height: 109px;
 width: 109px;
}


.wlktxt
{
 font-size: 16px;
}


.wlktsp
{
 font-size: 32px;
}


.btnsted
{
 margin-top: 15px;
 width: 180px;
}


.button
{
 font-size: 14px;
 border-radius: 10px;
 width: 35%;
 margin-left: 5%;
 margin-right: 5%;
}


#ueberschrift
{
 font-family: 'freigeistmedium';
 font-size: 35px;
 height: 45px;
 margin-top:12px;
}


#vorhangoben
{
 height: 56px;
 width: 90%;
}


.vorhang
{
 display: none;
}

.snoe
{
 height: 25px;
 width: 25%;
}


#zaehler
{
 margin-top: -54px;
}


.idx
{
 height: 36px;
 width: 36px;
}


#spielcontainer
{
 margin-top: 6px;
}


.bild
{
 width: 20.0%;
}


#zuende
{
 font-size:24px; 
}

}



@media all and (max-width: 460px) {
#willkommen {max-height: 550px;}
#mainfrm {max-height: 560px;}
}

@media all and (max-width: 400px) {
.bild {width: 21.7%;}
#wlktsp {margin-top:15px; font-size:36px;}
#vorhangoben {width:100%;}
}

@media all and (max-width: 340px) {.bild { width: 21.3%;}}
@media all and (max-width: 300px) {.bild { width: 20.8%;}}
@media all and (max-width: 260px) {.bild { width: 20.5%;}}
@media all and (max-width: 230px) {.bild { width: 19.0%;}}