html,
body {
	font-size: 1.0em;
	font-family: 'Varela Round', sans-serif;
	height: 100%;
	margin: 3px;
	/* overflow-x: scroll; */
}
.bodyvoll { max-width: 100% }
.body1300 { max-width: 1300px }
/* Generelle globale Einstellung */
img { border-width: 0px }
a:link { text-decoration: none; color:blue }
a:hover { font-weight:bold }
a:visited { color:blue }
:hover { transition: all 0.7s ease-out }
h1 { font-weight: 700 }

hr#weiss { height: 1px; width: 100%; visibility: hidden }
hr#linie { border: none; border-top: 1px solid #E00060; color: #FFFFFF; background-color: #FFFFFF; height: 1px }
/* Topper-Elemente */
/* --------------- */
.farbe-topper { background-color:#cccccc }
/* Navigation */
.navbar { display: flex; display: -webkit-flex; align-items: center; height:40px; width:100%; flex-direction: row }
	.navbar > div { flex: 1 1 auto; padding-left: 10px; padding-right: 10px }
	.navbar > div:nth-child(1){ max-width:40px; display:none }
	.navbar > div:nth-child(2){ text-align:left; width:auto }
	.navbar > div:nth-child(3){ text-align:right; width:auto }
	.navspan { font-size: 18px; color: #FFFFFF }
	.navspan:hover { color:blue }
	#navsymbol { display:none }
/* Unter-Navigation */
.unternavi { height:auto; padding: 10px; align-items: center; display:none; border: 1px solid #fc6 }
	.unternavi > div { flex: 1 1 auto }
	.unavspan { font-size: 16px; color: #666666 }
/* Mobil-Navigation */
.mobilnavi { height:auto; margin:5px; align-items: left; flex-wrap: wrap; display:none; border: 1px solid #fc6; flex-direction: column }
	.mobilnavi > div { flex: 1 1 auto; padding:5px }
	.mobilnavispan { font-size: 18px; color: #FFFFFF }
	.mobilnavispan:hover { color:blue }
/* Logo */
#logorahmen { max-width:1200px; height:100px; margin-top:10px; margin-bottom:3px; background-image: url("../images/chemistrylogo-1200.jpg") }
#logo-rechts { max-width:700px; float:left }
#logo-links { width:500px; text-align:center; float:right; height: 100px }
/* Seiten-Titel */
#titel {  background: #DDD; padding:1px 10px 1px 10px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-top: 1px solid #EEE; border-left: 1px solid #EEE; border-right: 1px solid #AAA; border-bottom: 1px solid #AAA }

/* Hauptbereich */
/* ------------ */
/* Allgemeine Elemente */
#haupttext { padding:10px; line-height: 1.4 }
div#bbox1 { width: 300px; border-width:0px; float:left; padding-right: 10px; margin-top: 10px; margin-right: 10px }
div#bildtext { width:280px; border-style:solid; border-width:1px; border-color: gray; background-color:DDDDDD; padding: 10px; margin-bottom: 5px; text-align: justify; font-size: small; line-height: 1.3 }
#info90 {
	text-align:justify;
	padding-left: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-right: 10px;
	background-color: #F2F2F2;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-top: 1px solid #EEE;
	border-left: 1px solid #EEE;
	border-right: 1px solid #AAA;
	border-bottom: 1px solid #AAA;
}
#newlin {
	padding-right: 10px;
	max-width: 200px;
	text-align:left;
	float:left;
}
#listen { padding-left:10px }
#lextl { background-color: #CCCCCC;	padding: 3px }
/* Anzeigeversionen */
/* 1. Zweigeteilt mit Zusatz rechts */
.main {
	width: 100%;
	  display: -webkit-flex;
      -webkit-flex-direction: row;
      display: main;
      flex-direction: row;
      flex-wrap: nowrap;
}
.main > div {
	  -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
}
.main > div:nth-child(1){ max-width:960px }
.main > div:nth-child(2){ flex-basis:320px; margin-left:20px; justify-content:right }
/* 1. Vollbild ohne Zusatz rechts */
.mainnull {
	width: 100%;
	  display: -webkit-flex;
      -webkit-flex-direction: row;
      display: main;
      flex-direction: row;
      flex-wrap: nowrap;
}
.mainnull > div {
	  -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
}
.mainnull > div:nth-child(1){ width:100% }
.mainnull > div:nth-child(2){  }

/* Spezielle Elemente */
.flex {
      /* basic styling */
      max-width: 1000px;
      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
}
.flex > div {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
      width: 33px;
      padding:5px;
      margin:5px;
      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
      border: 1px solid #555;
}
#dreierdiv { border: 1px solid #eeeeee }
#pbild { text-align:center }
#ptitel { font-weight:bold }
#ibild { max-width:100% }
.spalt2 { display: flex; flex-direction: row; border: 1px solid #eeeeee }
.spalt2 > sp1 {
	min-width: 300px;
    padding: 8px 4px;
    text-align:center;
}
.spalt2 > sp2 {
	width: auto;
    padding: 8px 4px;
}
.bbz { display: flex; flex-direction: column; align-items: center }
.bbz > bb1 { padding: 8px 4px; text-align:center; border: 1px solid #eeeeee }
.bbz > bb2 { padding: 8px 4px; background-color: #efefef; text-align:justify; border: 1px solid #eeeeee }
/* Tab */
.gtab {
    display: grid;
    width:100%;   
    grid-template-columns: 1fr 1fr 3fr 2fr 2fr 2fr 2fr;
    border-top: 1px solid black;
    border-bottom: 2px solid black;
    font-size: 1rem;
    wrap:nowrap;
}
.gtab > g1 { 
	padding: 4px 4px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    text-align:center;
}
.gtab > g2 {
    padding: 4px 4px;
    border-bottom: 1px solid #CCCCCC;
    text-align:center;
}
.gtab > g3 {
    padding: 4px 4px;
    border-bottom: 1px solid #CCCCCC;
    text-align:left;
}
/* Elemente im Zusatzrahmen */
#aktuell { padding: 10px; max-width: 290px; text-align:left }
#newimg { width:200px }
/* Responsive */
/* ---------- */
/* 800 pixel und mehr */
	@media screen and (min-width: 801px) {
		.mobilnavi > div { display:none }
		.mobilnavi { border: none }
	}
/* 800 pixel und weniger */
	@media screen and (max-width: 800px) {
		.flex { flex-direction: column }
		.flex > div { width: auto }
		.unternavi { display:none; border:none; padding:2px }
		.unternavi > span { display:none }
		.navbar > div:nth-child(1){ display:block }
		.navbar > div:nth-child(2){ display:none }
		#navsymbol { display:block }
		.main { flex-direction: column }
		.main > div:nth-child(2) { flex-basis:100%; justify-content:center; align-items:center }
		.gtab { font-size: .9rem }
}
/* 600 Pixel und weniger */
@media screen and (max-width: 600px) {
	#logorahmen { max-width:100%; height: 73px; background-image: url('../images/logo600.jpg') }
	.gtab { font-size: .7rem }
	.spalt2 { flex-direction: column; width:100% }
}
/* 400 pixel und weniger */
@media screen and (max-width: 400px) {
	#logorahmen { max-width:100%; height: 73px; background-image: url('../images/logo400.jpg') }
}
/* Cookies  */
#mbmcookie {position: fixed; bottom: 0; left: 0; right: 0; background: #eee; padding: 20px; font-size: 14px; font-family: verdana;}
#mbmcookie a.button {cursor: pointer; background: #ccc; padding: 8px 20px; margin-left: 10px; border-radius: 5px; font-weight: bold; float: right;}
#mbmcookie a.button:hover {background-color: #aaa;}
#mbmcookie p.cookiemessage {display: block; padding: 0; margin: 0;}