@charset "UTF-8";

#DE,
#EN,
#ES {
  width: 5%;
  margin-left: 0.65%;
  position: relative;
  float: right;
  background: #313131; 
  padding: 1%;
  text-align: center;
  font-size: 1.2vw;
  font-weight: 700;
}
a{
  color: #313131; 
  text-decoration: none;
}
a:hover{
  color: #ff6f00;
}

#name a:hover{ color: #e0e0e0;}

#article a{ color: green;}

header a {
  text-decoration: none;
    color: #e0e0e0;    
}

footer a {
  text-decoration: none;
    color: #313131;    
}

footer a:hover{color: #313131 }
}

#RSTUVW img{position: absolute;}

#a,
#b,
#c,
#d,
#e,
#f,
#g,
#h,
#i,
#j,
#k,
#l,
#m,
#n,
#o,
#p,
#x,
#y,
#eim{
  position: relative;
  width: 24%;
  /*Bildgröße 300* 300 */
  float: left;
  font-size: 1.15vw;
}
#x{margin-top: 1.3%;}
#y{
margin-bottom: 1.3%;
float: right;
}
#a,
#b,
#c,
#e,
#f,
#g,
#i,
#j,
#k,
#m,
#n,
#o,
#eim{
margin-right: 1.3%;
}
#a,
#b,
#c,
#e,
#f,
#g,
#h,
#d,
#i,
#j,
#k,
#l{
margin-bottom:1.3%; 
}

#ab,
#cd,
#ef,
#gh,
#ij,
#kl,
#mn,
#op{
position: relative;
width: 49.3%;
float: left;   
}
#ab,
#cd,
#ef,
#gh,
#ij,
#kl{
margin-bottom: 1.3%;
}
#ab,
#ef,
#ij,
#mn{
margin-right: 1.3%;
}
#ae{
margin-bottom: 1.3%;
}
#ae,
#im,
#jn{
position: relative;
width: 24%;
float: left;
margin-right: 1.3%;   
}
#abc{
position: relative;
width: 74.6%;
float: left;
margin-right:1.25%; 
  
}
#abcd,
#abcd-title,
#abcd-spielend,
#efgh {
position: relative;
width: 100%;
float: left;
margin-bottom: 1.3%;    
}
#abcd-title-DL{
position: relative;
width: 100%;
float: left;
margin-bottom: 1.3%; 
color: #e0e0e0;   
}
#abcd-halb {
position:relative;
width: 100%;
float: left;
margin-bottom: 1.3%;
font-size: 1.4vw;
}
#aeim{
position: relative;
width: 24%;
float: left;
margin-right: 1.3%;
font-size: 1.15vw;
}
#mnop-ll,
#mnop,
#mnop-subtitle{
position: relative;
width: 100%;
float: left;
}
#mnop-subtitle-DL{
position: relative;
width: 100%;
float: left;
font-size: 1.4vw;
color: #e0e0e0;
}
#mnop-halb {
position: relative;
width: 100%;
float: left;
font-size: 1.4vw;
}
#dhlp{
  position: relative;
  width: 24%;
  float: right;
  font-size: 1.15vw;
}
#A,
#E{
position: relative;
width: 49.3%;
float: left;
margin-bottom: 1.3%;    
}
#E{
margin-right: 1.3%;
}
#E span{ 
           width: 100%;
          height: 100%; 
          margin: 0 0 0 0;
         padding:3;
}
#B,
#F{
position: relative;
width: 49.3%;
float: right; 
margin-bottom: 1.3%;    
}
#C{
position: relative;
width: 49.3%;
float: left;
}
#D{
position: relative;
width: 49.3%;
float: right; 
}
#AB,
#EF {
position: relative;
width: 100%;
margin-bottom: 1.3%;
float: left;
}
#AB:nth-child(2){
position: relative;
width: 100%;
margin:0;
float: left;
}
#AC {
position: relative;
width: 49.3%;
float: left;
margin-right: 1.3%; 
font-size: 1vw;     
}
#BD{
position: relative;
width: 49.3%;
float: right;
}
#Aij{
position: relative;
width: 49.3%;
float: left;
margin:0 1.3% 1.3% 0;    
}
#Acg{
position: relative;
width: 74.6%;
float: left; 
margin-bottom: 1.3%;    
}
#Bkl{
position: relative;
width: 49.3%;
float: right; 
margin-bottom: 1.3%;    
}
#Cko,
#fghjnD{
position: relative;
width: 74.6%;
float: left;
}
#Cko{margin-right: 1.3%;}
#bfB{margin-bottom: 1.3%;}
#bfB,
#jnD{
    position: relative;
width: 74.6%;
float: right;
}
#Sbc,
#Vfg,
#Yno{
position: relative;
width: 49.3%;
    float: left;
    font-size: 1.15vw;
}
#Sbc,
#Vfg{
margin-bottom: 1.25%;
}
#RUi,#SVj,#TWk {
position: relative;
width: 32.5%;
float: left;
}
#RUi,#SVj{
margin-right: 1.25%;
}
#Acgijk{
width: 74.6%;      
margin-bottom: 1.3%; 
position: relative;    
}
#ABijkl{
position: relative;
width: 100%;
margin-bottom: 1.3%;
float: left;
}
#bfjnBD{
position: relative;
width: 74.6%;
float: right;
}  
}
#efghCD{
position: relative;
width: 100%;
float: right;
}

#R,
#S,
#T,
#U,
#V,
#W,
#X,
#Y,
#Z{
position: relative;
width: 32.5%;
float: left;    
}
#R,
#S,
#U,
#V,
#X,
#Y{
margin-right:1.25%;    
}

#R,
#S,
#T,
#U,
#V,
#W,
#RS{
margin-bottom:1.25%;    
}
#RS,
#UV,
#XY{
position: relative;
width: 66.25%;
float:left; 
}
#ST,
#VW,
#YZ{
position: relative;
width: 66.25%;
float: right; 
font-size: 1.15vw;
}
#RS,
#ST,
#VW{
margin-bottom:1.25%;
}
#rUX,#sVY,#tWZ {
position: relative;
width: 32.5%;
float: left;
}
#RUX, 
#SVY,
#rUX,#sVY{
margin-right:1.25%; 
}
#RST,#UVW,#XYZ,#ABCD {
position: relative;
width: 100%;
float: left;
}
#ABCD img{width:100%;}
#RST,#UVW,#ABCD{
margin-bottom:1.25%;
}

#RSTUVW {
position: relative;
width: 100%;
margin-bottom: 1.25%;
float: left;
}
#RSTUVW img{position: relative;}

#VWYZ,
#STVWYZ{
position: relative;
width: 66.25%;
float: right;
}
#PA-8-1{
position: relative;
width: 50%;
float: left;
}
#PA-8-2{
position: relative;
width: 50%;
float: right;
}
h1{
font-size: 2.3em;
text-align: justify;
color: white;
}
h2{
font-size: 2em;
text-align: justify;
color: white;
}
h3{
font-size: 1.1em;
text-align: justify;
color: white;
margin-top: 0.8em;
}
h4{
font-size:1em;
text-align: justify;
color: white;
}
h6{
font-size: 0.5em;
text-align: left;
color: black;
margin-bottom: -5%;
}
#eindrittelzweiviertel{
position: relative;
width: 32.5%;
float: left;     
margin-right: 1.25%;
}
#eindrittelzweiviertel2{
position: relative;
width: 32.5%;
float: left;  
margin-right: 1.25%; 
margin-bottom: 1.25%;    
}
#eindrittelzweiviertel3{
position: relative;
width: 32.5%;    
float: right;
} 
#einsdreivon4 {
position: relative;
width: 32.5%;
float: left;
margin-bottom: 1.3%;    
}
#einsdreivon4:nth-child(1), 
#einsdreivon4:nth-child(2){
margin-right: 1.25%;    
}

span {
  position: absolute;
  top: 0;
  width: 95%;
  margin:0.27em;
  color: white;
  text-align: center;
  height: 2.5em;
  line-height: 1em;
  background: #404040;
  /* Fallback IE 6-8 */
  background-color: rgba(0, 0, 0, 0);
    z-index: 2;
}
span ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
span ul li:nth-child(1) {
  font-size: 1.2vw;
  color: #363636;
  letter-spacing: 0.03em;
  line-height: 1em; 
}
span ul li:nth-child(2) {
  font-size: 5vw;
  letter-spacing: 0.03em;
  width: 100%;
  color: #363636;
  margin-top: 5%;
}
span ul li:nth-child(3) {
  font-size: 1.2vw;
  letter-spacing: 0.03em;
  width: 100%;
  color: #363636;
  margin-top: 3%;
}
span ul li:nth-child(4){
  font-size: 8vw;
  letter-spacing: 0.03em;
  width: 100%;
  color: #363636;
  margin-top: 40%;
  text-align: left;
  font-weight: 900;
}

span ul li:nth-child(5),
span ul li:nth-child(6) {
  font-size: 8vw;
  letter-spacing: 0.03em;
  width: 100%;
  color: #363636;
  margin-top: 5.5%;
  text-align: left;
  font-weight: 900;
}

main {
  background-color: #6d6f72;
  overflow: auto;
  padding: 6%;
}
img {
  max-width: 100%;
  height: auto;
}
main img {
  max-width: 100%;
  height: auto;
}
aside {
  background-color:#a7a9ac;
  overflow: auto;
  padding: 6%;
}
aside img {
  max-width: 100%;
  height: auto;
}
article {
  background-color:white;
  overflow: auto;
  padding: 6%;
}
article img {
  max-width: 100%;
  height: auto;
}

#beige {
  background-color:#ced5b0;
  overflow: auto;
  padding: 6%;
}
#beige img {
  max-width: 100%;
  height: auto;
}
#legal{
 background-color:#6d6f72;   
 overflow: auto;
  padding: 6%;
}
#kubular{
 background-color:#dbdcdd; 
    
 overflow: auto;
  padding: 6%;
}
#legal img,
#kubular img{
  max-width: 100%;
  height: auto;
}

body {
  font-size: 100%;
  color: #313131;
  font-family: Roboto, Helvetica, Arial, Verdana;
  background-color: #9b9b9b;
  width: 50%;
  min-height: inherit;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;
}
body {
  font-size: 1.7vw;
}
#pfeil-links {
  position: absolute;
  width: 6%;
  left: -1%;
  top: 47.5%;
}
#pfeil-links img {
  display: block;
  width: 100%;
}
#pfeil-rechts {
  position: absolute;
  width: 6%;
  right: -0.8%;
  top: 47.5%;
}
#pfeil-rechts img {
  display: block;
  width: 100%;
}
#pfeil-links a:hover img.aus-pfeil-links,
#pfeil-rechts a:hover img.aus-pfeil-rechts {
  display: none;
}
#pfeil-links a:hover img.an-pfeil-links,
#pfeil-rechts a:hover img.an-pfeil-rechts {
  display: block;
}
#pfeil-links img.an-pfeil-links,
#pfeil-rechts img.an-pfeil-rechts {
  display: none;
}
#buttons {
  position: absolute;
  width: 90%;
  top: 86.7%;
}
#b1 {
  position: relative;
  width: 3.5%;
  float: right;
  margin-right: 3.3%;
}
#b2,
#b3,
#b4,
#b5,
#b6,
#b7,
#b8,
#b9,
#b10,
#b11{
  position: relative;
  width: 3.5%;
  float: right;
  margin-right: 2.67%;
}
#b1 img,
#b2 img,
#b3 img,
#b4 img,
#b5 img,
#b6 img,
#b7 img,
#b8 img,
#b9 img,
#b10 img,
#b11 img{
  display: block;
  width: 100%;
}
#b1 a:hover img.aus1,
#b2 a:hover img.aus2,
#b3 a:hover img.aus3,
#b4 a:hover img.aus4,
#b5 a:hover img.aus5,
#b6 a:hover img.aus6,
#b7 a:hover img.aus7,
#b8 a:hover img.aus8,
#b9 a:hover img.aus9,
#b10 a:hover img.aus10,
#b11 a:hover img.aus11{
  display: none;
}

#b1 a:hover img.an1,
#b2 a:hover img.an2,
#b3 a:hover img.an3,
#b4 a:hover img.an4,
#b5 a:hover img.an5,
#b6 a:hover img.an6,
#b7 a:hover img.an7,
#b8 a:hover img.an8,
#b9 a:hover img.an9,
#b10 a:hover img.an10,
#b11 a:hover img.an11{
  display: block;
}
#b1 img.an1,
#b2 img.an2,
#b3 img.an3,
#b4 img.an4,
#b5 img.an5,
#b6 img.an6,
#b7 img.an7,
#b8 img.an8,
#b9 img.an9,
#b10 img.an10,
#b11 img.an11{
  display: none;
}

@font-face {
  font-family: 'robotoblack';
  src: url('fonts/Roboto-Black-webfont.eot');
  src: url('fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Black-webfont.woff') format('woff'), url('fonts/Roboto-Black-webfont.ttf') format('truetype'), url('fonts/Roboto-Black-webfont.svg#robotoblack') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'robotobold';
  src: url('fonts/Roboto-Bold-webfont.eot');
  src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Bold-webfont.woff') format('woff'), url('fonts/Roboto-Bold-webfont.ttf') format('truetype'), url('fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'robotoregular';
  src: url('fonts/Roboto-Regular-webfont.eot');
  src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Roboto-Regular-webfont.woff') format('woff'), url('fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
hr{
height:1px;
background:white;
border: none;
width: 104%;
display: block;
margin: -2 0 -0.5 0;
}
em i {
  font-style: italic;
}
strong b {
  font-weight: bold;
}
#name {
  width: 31.8%;
  position: relative;
  float: left;
  color: #e0e0e0;
  padding-top: 1%;
  font-weight: 500;
  font-size: 1.2vw;
}
#only {
  width: 30%;
  position: relative;
  float: right;
  padding-top: 1%;
  font-weight: 500;
  font-size: 1.2vw;
  text-align: right;
}
#titel {
  width: 45%;
  margin-left: 2.5%;
  position: relative;
  float: left;
  padding-top: 1%;
  font-weight: 500;
  font-size: 1.2vw;
}
#deutsch,
#english,
#espa {
  width: 8.8%;
  margin-left: 2.5%;
  position: relative;
  float: left;
  color: #e0e0e0;
}
header,
footer {
  background-color: #6d6f72;
  display: block;
  margin: 4% 0% 4% 0%;
  overflow: auto;
}
header {
  padding: 2% 6% 2% 6%;
}
footer {
  padding: 1.5% 6% 1.5% 6%;
}
#kontakt {
  width: 8.8%;
  position: relative;
  float: left;
  top: 0.22rem;
  color: #e0e0e0;
  font-weight: 500;
  font-size: 1.2vw;
}
#mailtel {
  width: 53.5%;
  margin-left: 2.5%;
  position: relative;
  float: left;
  top: 0.22rem;
}
#mail,
#skype,
#linkedIn,
#fb {
  width: 5%;
  margin-left: 3.8%;
  position: relative;
  top: -0.4%;
  float: left;
}
#impressum{  
  width: 15%;
  position: relative;
  float: right;
  top: 0.22rem;
  color: #47494c;
  padding-top: 0.6%;
  font-weight: 500;
  text-align: right;
  font-size: 1.2vw;
}
h1{
  font-size: 3.1vw;
  font-weight: 500;
margin: 1% 0 0 0.5%;}
h2 {
  font-size: 1.7em;
  font-weight: 500;
margin: 1% 0 0 0.5%;}
h4 {
  font-size: 0.8em;
  font-weight: 500;
margin: 1% 0 0 0.5%;}

* {
  box-sizing: border-box;
}