@viewport {
   width: device-width;
   user-zoom:fixed;
}

body{background-image: url(bilder/higr.png);background-repeat:repeat;}


#gges{position:absolute;top: 0px; background-color:#Fff0c5;height:100%;left: 0%; right:0%;width:100%; 
font-size: 120%;margin: 0 auto;overflow-x: hidden;}
#gges2{position:absolute;top: 0px; background-color:#Fff0c5;height:100%;left: 0%; right:0%;width:100%; 
font-size: 120%;margin: 0 auto;overflow-x: hidden;}


#gges3{position:absolute;top: 0px; background-color:#FFFFF0;height:100%;left: 0%; right:0%;width:100%; 
font-size: 120%;margin: 0 auto;overflow-x: hidden;}






#ber1{position:absolute;top: 0px; left: 0px; right:0px;background-color:#f8462c;width:100%;
color:white;border-style: solid;border-color:#f8462c;border-width: 5px;margin: 0 auto;
}

#ber12{position: absolute;top: 0px; left: 0px; background-color:#f8462c;width:100%;
color:white;border-style: solid;border-color:#f8462c;border-width: 5px;margin: 0 auto;
}

#ber2{float:left;background-color:#f8462c;font-size: 100%;}

#ber3{float:left;background-color:#fffff0;font-size: 100%;color:black;border-radius:5px;}

#ber4{float:left;background-color:#;font-size: 100%;}

#ber5{float:left;background-color:#fffff0;font-size: 100%;color:black;border-radius:5px;}

#ber22{float:left;background-color:#f8462c;font-size: 100%;}

#ber32{float:left;background-color:#fffff0;font-size: 100%;color:black;border-radius:5px;}

#ber42{float:left;background-color:#f8462c;font-size: 100%;}

#ber52{float:left;background-color:#fffff0;font-size: 100%;color:black;border-radius:5px;}


#ber6{float:right;background-color:#f8462c;}



#ber62{float:right;background-color:#f8462c;}
#ber72{float:right;background-color:#f8462c;}


#k1{ height: auto;width:auto;font-size: 90%;cursor: pointer;
padding: 4px 12px;background: #f8462c;
    border: 1px solid transparent;color: white;
 border-style: solid;
border-width: 2px;
border-color:#e43825;
  outline: none;
  cursor: pointer;
  border-radius: .4em;
   transition: .6s;
box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                rgba(0, 0, 0, .6) 0 1px 2px;} 
 
 #k1:hover {
     color:#dfee58;}
     
#button1{               
float:left;
padding-top:  0px;
 padding-bottom:0px;
 padding-left:0px;
 padding-right:0px;
 }


#intro{background-color:#FFFFF0;border-style: solid;border-width: 10px;border-radius:15px;border-color:#265a7e;font-weight:bold;width:33%;}

#us1{color:#f8462c;}
#werb{color:#265a7e;}
#ber7{float:left;background-color:#FFFFF0;border-style: solid;border-width: 10px;border-radius:15px;border-color:#265a7e;  }

fieldset{border:none;}

#kkn{font-size: 80%;
cursor: pointer;
    padding: 4px 12px;
 
    background: #265a7e;
    border: 1px solid transparent;
    color: white;
 border-style: solid;
border-width: 2px;
border-color:#143246;
  outline: none;
  cursor: pointer;
  border-radius: .4em;
   transition: .6s;
box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                rgba(0, 0, 0, .6) 0 1px 2px;}
  #kkn:hover{
     color:#dfee58;}               
#k2{ height: auto;width:auto;font-size: 90%;cursor: pointer;
padding: 4px 12px;background: #f8462c;
    border: 1px solid transparent;color: white;
 border-style: solid;
border-width: 2px;
border-color:#e43825;
  outline: none;
  cursor: pointer;
  border-radius: .4em;
   transition: .6s;
box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                rgba(0, 0, 0, .6) 0 1px 2px;} 


     






    

#logo{float:left;}
#gesu{padding-left:5%;}

.knopf{ height: auto;width:auto;font-size: 100%;cursor: pointer;
padding: 4px 12px;background: #f8462c;
    border: 1px solid transparent;color: white;
 border-style: solid;
border-width: 2px;
border-color:#e43825;
  outline: none;
  cursor: pointer;
  border-radius: .4em;
   transition: .6s;
box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                rgba(0, 0, 0, .6) 0 1px 2px;} 

.knopfx{ height: auto;width:auto;font-size: 100%;cursor: pointer;
padding: 4px 12px;background: #f8462c;
    border: 1px solid transparent;color: white;
 border-style: solid;
border-width: 2px;
border-color:#black;
  outline: none;
  cursor: pointer;
  border-radius: .4em;
   transition: .6s;
box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                rgba(0, 0, 0, .6) 0 1px 2px;} 

#lehrer{float:left;}
#tausch{float:left;}
#spiel{float:left;}
#fuenf{float:left;}
#joker{float:left;}

.knopf:hover{color:#dfee58;}               
.knopfx:hover{color:#dfee58;} 
#k2:hover{color:#dfee58;}               

#beg{padding-top:10px;}

#frage {
   margin:auto; 
 width: 90%; 
    height:auto; 
    background-color:#D0E1D5;
    color: black;
   border-width: 10px; 
    border-color: #265a7e;
    padding-left: 5px;
    padding-right: 5px;
    padding-top:  0px;
    padding-bottom:0px;
    border-style: solid;
    border-radius: 15%;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
   hyphens: auto;

}


#antworta{float:left;
    width: 85%; 
    background-color:#FFFFF0;
    color: #3b088e;
    border-width: 30px; 
    border-color:#ee6758;
    padding-left: 5px;
    padding-top:  5px;
    padding-bottom:0px;
    padding-right: 5px;
    border-style: solid;
    border-radius: 15%;
    cursor:pointer;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;}

#antwortb{float:left;
    width: 85%; 
   background-color:#FFFFF0;
    color: #3b088e;
    border-width: 30px; 
    border-color:#ee6758;
    padding-left: 5px;
    padding-top:  5px;
    padding-bottom:0px;
    padding-right: 5px;
    border-style: solid;
    border-radius: 15%;
    cursor:pointer;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;}


#antwortc{float:left;
    width: 85%; 
    background-color:#FFFFF0;
    color: #3b088e;
    border-width: 30px; 
    border-color:#ee6758;
    padding-left: 5px;
    padding-top:  5px;
    padding-bottom:0px;
    padding-right: 5px;
    border-style: solid;
    border-radius: 15%;
    cursor:pointer;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;}


#antwortd{float:left;
    width: 85%; 
   background-color:#FFFFF0;
    color: #3b088e;
    border-width: 30px; 
    border-color:#ee6758;
    padding-left: 5px;
    padding-top:  5px;
    padding-bottom:0px;
    padding-right: 5px;
    border-style: solid;
    border-radius: 15%;
    cursor:pointer;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;}




a{text-decoration: none;}


#uef{color:#dfee58;
text-shadow: 2px 2px 2px #000;font-weight:bold;}
#uea{color:#265a7e;
font-weight:bold;}
#ueb{color:#265a7e;
font-weight:bold;}

#uec{color:#265a7e;
font-weight:bold;}

#ued{color:#265a7e;font-weight:bold;}
#ueh{color:red;
font-weight:bold;}

.passiv{height: auto;width:auto;font-size: 100%;
padding: 4px 12px;background: #C0C0C0;
    border: 1px solid transparent;color: white;
 border-style: solid;
border-width: 2px;
border-color:#909090;
  outline: none;
  
  border-radius: .4em;
   transition: .6s;
box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                rgba(0, 0, 0, .6) 0 1px 2px;} 


#urkunde{width: 85%;
background-color:#fffff0;
   border-width: 30px;
    padding-left: 10px;
    padding-top:  3%;
    padding-bottom:0px;
    padding-right: 5px;
    border-style: double;
    border-radius: 7.5%;
    border-color:#265a7e; 
    font-size: 130%;
    color: black;
    margin:0 auto;}
#s51{  font-size: 110%;-moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
   hyphens: auto;}
#s52{  font-size: 150%;color:#f8462c;}

#s53{ text-align:left; font-size: 120%;color:#265a7e;}
#s63{ text-align:left; font-size: 120%;color:#3CB371;}
#s54{  font-size: 110%;}
#s61{  font-size: 110%;}

#ubild{padding-top:4%;}
#d7{padding-top:  0px;
padding-right:0px;}

#ergebnis{
   margin:auto; 
 width: 90%; 
    height:auto; 
    
   color: black;
   border-radius: 3%;
   border-width: 10px; 
    padding-left: 5px;
    padding-right: 5px;
    padding-top:  0px;
    padding-bottom:0px;
    border-style: groove;
    border-radius: 15%;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
   hyphens: auto;

}


#ergebnisspiel{
   margin:auto; 
 width: 90%; 
    height:auto; 
    
   color: white;
   border-radius: 3%;
   border-width: 10px; 
    padding-left: 5px;
    padding-right: 5px;
    padding-top:  0px;
    padding-bottom:0px;
    border-style: groove;
    border-radius: 15%;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
   hyphens: auto;

}







#d1{float:left;
    width: 85%; 
    background-color:#FFFFF0;
    color: #3b088e;
    border-width: 30px; 
    border-color:#ee6758;
    padding-left: 5px;
    padding-top:  5px;
    padding-bottom:0px;
    padding-right: 5px;
    border-style: solid;
   
    
   
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

#d2{float:left;
    width: 85%; 
    background-color:#FFFFF0;
    color: #3b088e;
    border-width: 30px; 
    border-color:#ee6758;
    padding-left: 5px;
    padding-top:  5px;
    padding-bottom:0px;
    padding-right: 5px;
    border-style: solid;
    border-radius: 15%;
   
   


   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;}

#cont1{display: table;}
#cont2{}
#cont3{}
#p1{
color:#265a7e;font-weight:bold;}


#spielfeld{position:absolute;z-index:2;
    background:transparent;
}

#gebiet{position:absolute;z-index:1;background:transparent;
}

#alles{float:top;top:600px;left:50px;}
#mitte{position:relative;top:0px;left:0px;z-index:3;}

#leiste{width:100%;}


#aa2 {
   margin:auto; 
 width: 30%; 
    height:auto; 
    background-color:#fffff0;
    color: black;
   border-width: 10px; 
    border-color: #265a7e;
    padding-left: 5px;
    padding-right: 5px;
    padding-top:  0px;
    padding-bottom:0px;
    border-style: solid;
    border-radius: 0%;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
   hyphens: auto;

}







@media only screen and (max-width: 380px) {
#aa2{width:80%;}
#urkunde { border-width: 10px;
          width: 87%;}}
@media only screen and (max-width: 480px) {
#urkunde { border-width: 15px;
          width: 83%;}}








@media only screen and (min-width: 901px){
#gges{ left: 10%; right:10%;width:80%; }
#gges2{ left: 10%; right:10%;width:80%; }
#gges3{ left: 10%; right:10%;width:80%; }
#ber1{left: 0%; width:99%;}
#ber12{left: 0%; width:99%;}
}
@media only screen and (min-width: 1101px){
#gges{ left: 15%; right:15%;width:70%; }
#gges2{ left: 15%; right:15%;width:70%; }
#gges3{ left: 15%; right:15%;width:70%; }
#ber1{left: 0%; width:99%;}
#ber12{left: 0%; width:99%;}
#ber7{width:40%;}

}






@media  screen and (max-width:490px) {
#intro{width:94%;font-size: 100%;margin-top:0px;}
#ber2{margin-top:1px;font-size: 80%;}
#ber3{margin-top:1px;font-size: 80%;}
#ber4{margin-top:1px;font-size: 80%;}
#ber5{margin-top:1px;font-size: 80%;}
#ber6{margin-top:1px;font-size: 80%;}
#ber22{margin-top:1px;font-size: 80%;}
#ber32{margin-top:1px;font-size: 80%;}
#ber42{margin-top:1px;font-size: 80%;}
#ber52{margin-top:1px;font-size: 80%;}
#ber62{margin-top:1px;font-size: 80%;}
#ber72{margin-top:1px;font-size: 80%;}
p {margin-bottom: 0px;
margin-top: 0px;}
#ber7{width:94%;margin-left:-5px;}
#logo{width:70%;float:right;}
#joker{font-size:80%;}


#frage{width:90%;border-width: 10px; min-height:50px;
background-color:#D0E1D5;color:black;border-style: groove;
font-size:80%;
border-radius: 3%;margin-top:6%;margin-left:1.5%;}

#antworta{width:90%;border-width: 10px; min-height:50px;
background-color:#fffff0;color:black;border-style: solid;
font-size:90%;border-color:#265a7e;
border-radius: 3%;margin-top:1.5%;margin-left:1.5%;}


#antwortb{width:90%;border-width: 10px; min-height:50px;
background-color:#fffff0;color:black;border-style: solid;
font-size:90%;border-color:#265a7e;
border-radius: 3%;margin-top:1.5%;margin-left:1.5%;}


#antwortc{width:90%;border-width: 10px; min-height:50px;
background-color:#fffff0;color:black;border-style: solid;
font-size:90%;border-color:#265a7e;
border-radius: 3%;margin-top:1.5%;margin-left:1.5%;}


#antwortd{width:90%;border-width: 10px; min-height:50px;
background-color:#fffff0;color:black;border-style: solid;
font-size:90%;border-color:#265a7e;
border-radius: 3%;margin-top:1.5%;margin-left:1.5%;}

#s51{  font-size: 70%;}
#s54{  font-size: 70%;}
#s61{  font-size: 70%;}
#s52{  font-size: 90%;}
#s53{  font-size: 90%;}
#s63{  font-size: 90%;}
#urkunde{border-width: 15px;}

#d1{width:90%;border-width: 10px; min-height:50px;
background-color:#fffff0;color:black;border-style: solid;
font-size:80%;border-color:#265a7e;
border-radius: 3%;margin-top:1.5%;margin-left:1.5%;}

#d2{width:90%;border-width: 10px; min-height:50px;
background-color:#fffff0;color:black;border-style: solid;
font-size:80%;border-color:#265a7e;
border-radius: 3%;margin-top:1.5%;margin-left:1.5%;}

#ergebnis{width:90%;border-width: 10px; min-height:50px;
border-style: groove;
font-size:80%;
border-radius: 3%;margin-top:6%;margin-left:1.5%;}

#ergebnisspiel{width:90%;border-width: 10px; min-height:50px;
border-style: groove;color:white;
font-size:80%;
border-radius: 3%;margin-top:6%;margin-left:1.5%;}

#p1{font-size:80%;}
#ber12{font-size:75%;}
#ber100{font-size:75%;}
#ber1{font-size:75%;}

}





@media  screen and (min-width:491px) and (max-width: 800px){
#intro{width:80%;font-size: 200%;}
#werb{font-size: 90%;}
#ber6{font-size: 80%;margin-right:5px;}
#ber2{margin-top:3px;}
#ber3{margin-top:3px;}
#ber4{margin-top:3px;}
#ber5{margin-top:3px;}
#ber22{margin-top:3px;}
#ber32{margin-top:3px;}
#ber42{margin-top:3px;}
#ber52{margin-top:3px;}
#ber62{margin-top:0px;font-size:80%;}

#ber72{font-size: 80%;margin-right:5px;}
p {margin-bottom: 10px;
margin-top: 10px;}
#ber7{width:40%;margin-left:5%;}
#joker{font-size:80%;}



#frage{width:70%;border-width: 15px; min-height:150px;
background-color:#D0E1D5;color:black;border-style: groove;
font-size:120%;
border-radius: 3%;margin-top:5%;}

#antworta{float:left;width:40%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:100%;border-color:#265a7e;
border-radius: 3%;margin-left:1.5%;margin-top:1%;}

#antwortb{float:left;width:40%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:100%;border-color:#265a7e;
border-radius: 3%;margin-left:2%;margin-top:1%;}

#antwortc{float:left;width:40%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:100%;border-color:#265a7e;
border-radius: 3%;margin-left:1.5%;margin-top:1%;}

#antwortd{float:left;width:40%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:100%;border-color:#265a7e;
border-radius: 3%;margin-left:2%;margin-top:1%;}

#s51{  font-size: 100%;}
#s54{  font-size: 100%;}
#s61{  font-size: 100%;}
#s52{  font-size: 110%;}
#s53{  font-size:110%;}
#s63{  font-size: 90%;}

#ergebnis{width:70%;border-width: 15px;height:auto;
color:black;border-style: groove;
font-size:120%;
border-radius:4px;margin-top:5%;}

#ergebnisspiel{width:70%;border-width: 15px;height:auto;
color:white;border-style: groove;
font-size:120%;
border-radius:4px;margin-top:5%;}





#d1{float:left;width:90%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:100%;border-color:#265a7e;
border-radius: 3%;margin-left:1.5%;margin-top:1%;}

#d2{float:left;width:90%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:100%;border-color:#265a7e;
border-radius: 0%;margin-left:1.5%;margin-top:1%;}
#p1{font-size:100%;}


}





@media  screen and (min-width:599px) and (max-width: 699px){
#antworta{margin-left:2.5%}
#antwortc{margin-left:2.5%}
#d1{margin-left:2.5%}
#d2{margin-left:2.5%}}




@media  screen and (min-width:700px) and (max-width: 800px){
#antworta{margin-left:3.5%}
#antwortc{margin-left:3.5%}
#d1{margin-left:3.5%}
#d2{margin-left:3.5%}

}





@media  screen and (min-width:801px){
#intro{width:50%;border-width: 15px;border-radius: 3%;}
#us1{font-size: 200%;}
#werb{font-size: 150%;}
#ber7{width:25%;margin-left:20%;border-width: 15px;border-radius: 3%;}
#logo{margin-left:0%;}
#ber2{margin-top:5px;}
#ber3{margin-top:5px;}
#ber4{margin-top:5px;}
#ber5{margin-top:5px;}
p{margin-bottom: 20px;
margin-top: 20px;}
#joker{font-size:80%;}
#frage{width:70%;border-width: 15px; min-height:150px;
background-color:#D0E1D5;color:black;border-style: groove;
font-size:150%;
border-radius: 3%;margin-top:3%;}

#antworta{float:left;width:40%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:150%;border-color:#265a7e;
border-radius: 3%;margin-left:6%;margin-top:1%;}

#antwortb{float:left;width:40%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:150%;border-color:#265a7e;
border-radius: 3%;margin-left:2%;margin-top:1%;}

#antwortc{float:left;width:40%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:150%;border-color:#265a7e;
border-radius: 3%;margin-left:6%;margin-top:1%;}

#antwortd{float:left;width:40%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:150%;border-color:#265a7e;
border-radius: 3%;margin-left:2%;margin-top:1%;}

#ergebnis{width:70%;border-width: 15px; height:auto;
color:black;border-style: groove;
font-size:150%;
border-radius: 3%;margin-top:3%;}

#ergebnisspiel{width:70%;border-width: 15px; height:auto;
color:white;border-style: groove;
font-size:150%;
border-radius: 3%;margin-top:3%;}



#d1{float:left;width:90%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:150%;border-color:#265a7e;
border-radius: 3%;margin-left:6%;margin-top:1%;}

#d2{float:left;width:90%;border-width: 15px; min-height:200px;
background-color:#fffff0;color:black;border-style: solid;
font-size:150%;border-color:#265a7e;
border-radius: 3%;margin-left:6%;margin-top:1%;}
#p1{font-size:150%;}

}

@media  screen and (min-width:980px){
#leiste{width:980px;}}

#tabi{width:310px;
overflow-x:hidden; overflow-y:auto;text-align:center;}
#tabb{width:290px;border: 5px solid crimson;text-align:center; }
tr:nth-child(even){background-color: #fff5ee}
tr:nth-child(odd){background-color: #ffa07a}

#ber10{float:left;margin-top:0px;}
#ber11{float:left;margin-top:0px;}
#ber100{float:right;margin-top:-20px;}
#terz{background-color:#ff0000;}

@media  screen and (max-width:490px){
#ber10{font-size:80%;}
#ber11{font-size:80%;}
}



#frage {border-color:#265a7e;border-style: groove;
       
                   
    background-color:#D0E1D5;
    color: #000000;
  

}

#uef{color:#265a7e;
text-shadow: 2px 2px 2px #ccc;font-weight:bold;}
#ergebnis{color:black;}