/* Import mmenu.css */ @import url('mmenu.css'); 
/* Import fonts.css (inkl. icons.css) */ @import url('fonts.css'); 
/* Import creatix24.css (inkl. demo.css) */ @import url('creatix.css'); 

/* Nav */
a {color: #fff;}
a:hover,a:focus {color: #9fb7b8;}
a:visited {color: #fff;}
a:focus {color: #9fb7b8;}

html, body {font-family: 'Metropolis', sans-serif; line-height: 1.5em; font-size: inherit; background-color: #111133;
	color: #fff; font-weight: 400;}

/* General and Typography */ 
h1, h2, h3, h4, h5, h6 {font-weight: 900; padding: 0;}
h1 {font-size: 28px; font-size: 1.75rem; line-height: 1.25; margin-top: 2em; margin-bottom: 1em;}
h2 {font-size: 23px; font-size: 1.4375rem; font-weight: 400; line-height: 1.2173913043; margin-top: 2.4347826087em; margin-bottom: 1.2173913043em;}
h3 {font-size: 19px; font-size: 1.1875rem; line-height: 1.1052631579; margin-top: 2.9473684211em; margin-bottom: 1.4736842105em;}
h4, h5, h6 {font-size: 16px; font-size: 1rem; line-height: 1.3125; margin-top: 3.5em; margin-bottom: 1.75em;}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {	margin-top: 0;}
blockquote {font-family: Arial, sans-serif;}

#header h1 {margin-top: 0; margin-bottom: 0; padding: 10px 0;text-wrap: nowrap; padding-top: 21px;}
	@media screen and  (max-width: 500px) {#header h1 {display: block;   clear: both; padding-top: 10px; padding-left: 10px;}}
#header img#logo {max-width: 210px;  float: left; padding-right: 10px; padding-left: 10px;}
	@media screen and  (min-width: 769px) {#header img#logo {display: block;  position: relative;  top: 26px; padding-right: 20px;}}


@media screen and (min-width: 768px) { nav#menu>ul { padding: 0; justify-content: flex-start; margin-left: 213px;margin-top: -20px;}
													nav#menu>ul li { padding-right: 35px; padding-top: 0;}
													nav#menu>ul li a {  text-transform: uppercase; text-decoration: none;} 
													nav#menu>ul li a:hover { color: #96adad;}} 



h4 {letter-spacing: 0.140625em; text-transform: uppercase;}
h6 {font-style: italic;}
h1+h2, h2+h3 {	margin-top: -10px;}

/* Colors */

#content a {color: #fff; text-decoration:underline; padding: 0 4px; letter-spacing: 1px;}
#content a:hover {text-decoration:none; background: #d4ecf2; color:#111133;}
#content a:focus {color: #9fb7b8;}



/* Display */

#container {max-width: 1200px;} 
#content {max-width: 1200px; margin-top: 30px; padding-left: 10px;} 
@media screen and (min-width: 768px) { article.col-10 { padding-left: 25px; }}

figure#buchtitel {padding-right: 20px; padding-bottom: 30px;}
figure#buchtitel img {padding : 10px; border: 1px dotted white;}
figure#buchtitel figcaption {font-size: 85%}


footer {margin-top: 50px;}
footer h2 {margin-bottom: 0;}
@media screen and (max-width: 768px) { footer h2 {margin-bottom: -10px;}}
footer .col-6 {padding-top: 0;margin-top: -10px; word-spacing: 5px;}
footer .col-6 span{ word-spacing: 0;}
@media screen and (max-width: 768px) { footer .col-6 p.text-right { text-align: left;}}
footer a {text-decoration: none;}



/* tabs  css-tricks.com/css3-tabs/ */
.tabs { position: relative; clear: both; min-height: 1400px; /* This part sucks */;}
.tab { float: left;}
.tab label { color: #fff; border: 1px solid #fff; font-size: 1.05rem; text-transform: uppercase; cursor: pointer; background: #111133; padding: 10px 20px; margin-left: -1px; position: relative; left: 1px;}
.tab [type=radio] { display: none;}
.content { position: absolute; top: 50px; left: 0;  background: #111133; right: 0; bottom: 0; padding-top: 20px;}
[type=radio]:checked ~ label { background: #96adad;  z-index: 2;color: #111133;}
[type=radio]:checked ~ label ~ .content { z-index: 1;}