@charset "UTF-8";
/* Screensize TMP */
#screensize { position:absolute;top:0px;left:0px;font-size:10px;color:#aaa; }
#screensize { display:none; }

/* CSS Document */

body { font-family: 'Open Sans', sans-serif; font-weight:400; color:#575656;font-size:11pt; line-height:140%; margin:0; padding:0; }
p { margin-top:0.5em; }
strong { font-weight:700; }
#main  {width:900px; margin-left:-450px; height:600px; position:absolute; left:50%; top:10%;  }


#leftcol { width:40%; height:100%; float:left; }
#logo { width:60%; }

#menu { position:absolute; bottom:0px; }
#menu a { background-color:#FFF;}
a { text-decoration:none; border-bottom:1px dotted; }
a, a:visited { color:#575656; }
a:hover, a:active  { color:#C00; border-bottom:1px solid;  }	
	
	
#illu { margin-left:30%;margin-top:40%; background-image:url(../images/pmotion-illu-231x220_vorab.jpg); background-repeat:no-repeat; background-size:auto 100%;}
#illu img { width:70%;  }
#illu p { font-size:0.7em; margin-left:20%; }

#rightcol { width:60%; height:100%; float:left; }
#rightcol .schlagwort { width:33%; text-align:center; height:14.25%; float:left; clear:left;  }
#rightcol .schlagwort p { white-space:nowrap;font-size:1.5em;margin-top:14%; margin-bottom:0px;}
.c1, .c7 { margin-left:66%; }
.c2, .c6 { margin-left:44%; }
.c3, .c5 { margin-left:22%; }
.c4 { margin-left:0%; }

#leftcol .imprint  { padding-top:15%;}
#rightcol.imprint  { height:90%; margin-top:10%;}
.kleingedrucktes { font-size:0.9em; }
h1 { color:#C00; font-weight:400; font-size:1.2em; }
/*
Einfärbung für LO+Test
*/
.vis div#main {background-color:#9FF;}
.vis div#leftcol {background-color:#F9F;}
.vis div#rightcol {background-color:#FF9;}
.vis #rightcol .schlagwort { background-color:#6CF; }
/*
Reponsive Breite kleinere Bilschirme
*/
@media only screen and (max-width: 950px) {	
#main  {width:800px; margin-left:-400px; height:600px;   }
#rightcol .schlagwort p {font-size:1.4em;}
}
@media only screen and (max-width: 800px) {	                /* ab hier kein Außenrand mehr */
#main  {width:100%; margin-left:0px; height:600px; left:0%;  }
#rightcol .schlagwort p {font-size:1.3em;}
body { font-size:10pt;}
#logo { width:60%;margin-left:10%; }
#illu img { width:80%;  }
#illu  { margin-left:15%;  }
#leftcol .imprint { margin-left:10%;}
#rightcol.imprint { width:55%;}
#menu {margin-left:4%}
}
@media only screen and (max-width: 600px) {		                /* ab hier keine Verteilung Schlagworte mehr */
.c1,.c2,.c3,.c4,.c5,.c6,.c7 { margin-left:0; }
#rightcol .schlagwort { width:100%; }
#rightcol.imprint {width:48%;}
body { font-size:9pt;}
#logo { width:70%;margin-left:10%; }
#illu  { margin-left:10%;  }
#illu img { width:90%;  }
}
@media only screen and (max-width: 500px) {	      /* ab hier 50/50 Spalte */
#leftcol { width:50%; }
#rightcol { width:50%; }
#logo { width:80%;margin-left:10%; }
#illu  { margin-left:0%;  }
}
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {	      /* altes iPhone Portraitformat und kleiner: 1 spaltig */
#leftcol,#rightcol, #leftcol .imprint, #rightcol.imprint { width:90%; float:none; height:auto; }
#rightcol .schlagwort { height:2em; }
#leftcol .imprint, #rightcol.imprint { margin-left:5%; }
#rightcol { width:100%; }
#logo { width:70%;margin-left:20%;margin-top:3em; }
#illu img { width:70%;  }
#illu  { margin-left:10%;  }
#main { height:auto; margin-top:0.5em; }
#menu { position:absolute; top:0;}
}
@media only screen and (max-device-width: 320px) {	      /* altes iPhone Portraitformat und kleiner: 1 spaltig */
#leftcol .imprint, #rightcol.imprint { width:90%; float:none; height:auto; }
#leftcol .imprint, #rightcol.imprint { margin-left:5%; }
}
/*
Reponsive Höhe kleinere Bilschirmet
*/
@media only screen and (max-height: 700px) {	
#main  { top:5%;   }
}
@media only screen and (max-height: 650px) {	
#main  { top:1%;   }
}
@media only screen and (max-height: 600px) {	
#main  { height:99%; min-height:300px;  }
#illu { margin-top:30%; }
}
@media only screen and (max-height: 500px) {	
#illu { margin-top:20%; }
#menu { top:470px; }
}
@media only screen and (max-height: 400px) {	
#illu { margin-top:5%; }
}
/*
Reponsive Breite größere Bilschirme; nur wenn Höhe das auch hergib
*/
@media only screen and (min-width: 1200px) and (min-height: 800px) {	
#main  {width:1050px; margin-left:-525px; height:700px;   }
body {font-size:12pt;}
}
@media only screen and (min-width: 1400px) and (min-height: 900px) {	
#main  {width:1200px; margin-left:-600px; height:800px;   }
body {font-size:13pt;}
}
@media only screen and (min-width: 1800px) and (min-height: 1100px) {	
#main  {width:1500px; margin-left:-600px; height:1000px;   }
body {font-size:14pt;}
}