/* ---------------- initialisierung ---------------- */
html, body, ul, ol, li, p, h1, h2, h3, h4 ,h5, h6, form, fieldset {
	border: 0;
	margin: 0;
	padding: 0;	
}

html {
	min-height: 100%;
}

body {
	background: #d7ebe9; /* Old browsers */
	/* background: linear-gradient(to bottom, #beece5 0%,#e5f3f2 30%); */
	background: linear-gradient(to bottom, #beece5 0%,#fff 30%);
	color: #666;
	font-family:'Sarabun', Verdana, Arial, Helvetica, sans-serif;
	margin: 0; 
	padding: 0; 
    text-align: center;
}
	

/* !bilder -------------------------------------------------- */
img,
iframe {
	border: none;
	font-size: .75em;
	max-width: 100%; 
	height: auto; 
	width: auto\9; /* ie8 */
	}

img {
	font: 80%/100% 'Sarabun', Verdana, Arial, Helvetica, sans-serif;
} /* fuer browser ohne bilddarstelllung */

a img {
	color: #666;
}

figure {
   margin: 0 0 2em;
   padding: 0;
}

figure.half {
    width: 45%;
}

img.imgleft,
figure.imgleft {
	float: left; 
	margin-right: 3em;
	margin-bottom: 1em;
}

img.imgright,
figure.imgright {
	float: right; 
	margin-left: 3em;
	margin-bottom: 1em;
}

figure.half.imgleft {
	margin-right: 1em;
}

figure.half.imgright {
	margin-left: 1em;
}

figure.imgleft img {
    float: none;
    margin: 0;
    padding: 0;
}

figcaption {
    font-size: .75rem;
	line-height: 1.3;
	margin-top: .5em;
}

img.nofloat {
    float: none;
}

.icon {
	float: left;
	margin: 3px 10px 10px 0;
}


/* ---------------- wrapper, header, nav ------------------- */
#wrapper {
	background: #fff;
/* 	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	box-shadow: 0 0 50px rgba(0,0,0,0.2); */
	color: #666;
	margin: 0 auto;
	text-align: left;
	width: 80em;
}

#header {
	background: url('../images/basic/bg-header-1280px.jpg') top left no-repeat #fff;
	height: 235px; 
	position: relative;
}

.logo {
	padding: 65px 0 0 25px; /* px wegen starrem hintergrund bild */
	filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
}

#toolbar {
	background: rgba(88,176,162,0.5); /* #9bd0c6 */
	color: #fff;
	font-size: .85rem;
	letter-spacing: .01em;
	overflow: auto;
	padding: 1.5em 8% 0 1em;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
	width: 66%;	
}

#toolbar img {
	border: none;
	margin-right: 1em;
	vertical-align: middle;
}

#toolbar span {
	margin-right: 1em; 
}

#toolbar a:link,
#toolbar a:visited {
	color: #fff;
	text-decoration: none; 
}

#toolbar a:hover {
	text-decoration: underline;
}

.tools {
	background-color: #6cbaac;
	display: inline-block;
	padding: .5em 1em .7em;
}

/* ------left------ */
#left {
	float: left; 
	margin-right: 5%;
	width: 29%;
}

#promo {
	float: left; 
	font-size: .75em; 
	line-height: 1.3;
	margin-top: 2em; 
	margin-bottom: 1em; 
	padding-left: 15%; 	
}

#promo img {
	margin-bottom: 10px;
}

#promo a:link {
	color: #42af9c;
	text-decoration: underline; 
}

#promo a:visited {
	color: #9fcdc5;
	text-decoration: underline; 	
}

#promo a:hover {
	color: #42af9c;
	text-decoration: none; 	
}
	
	
/* ------navigation------ */
#navcontainer {
	float: left; 
	font-size: 1rem;
	letter-spacing: .01em; 
	line-height: 1.4;
	padding-left: 13%;
	margin-top: 12.5em; 
	margin-bottom: 1.5em;
	width: 85%;	
}

ul#navlist {
	list-style: none;
	margin: 0; 
	padding: 0; 
}

ul#navlist li {
	padding-bottom: .4em; 
	padding-right: 0;
}

ul#navlist ul#navLevel2 {
	background-color: #f1faf9;
	border-bottom: dashed 1px #999; 	 
	margin-left: 0; 
	margin-bottom: .6em; 
	padding-bottom: .6em; 
} /* linieneinfassung (unten) der aktiven rubrik samt unterrubriken  */

ul#navlist li.navspacer {
	margin-top: 20px;
}

/* generelle link- und hoverfarben in allen ebenen */
ul#navlist a, 
#navcontainer a {
	color: #666; 
	display: block; 
	text-decoration: none;
}
	
ul#navlist a:hover, 
#navcontainer a:hover {
	color: #000;
}

/* aktive homepage */
ul#navlist #activeHome {
	color: #7c4b89; 
	font-weight: bold; 
}

/* aktive rubrik in level 1 kennzeichnen */
ul#navlist a#currentLevel1 {
	background-color: #f1faf9;
	border-top: dashed 1px #999;
	color: #7c4b89; 
	display: block;
	font-weight: bold; 	 
	margin-top: .6em; 
	padding-top: .6em; 	
} /* inkl. linieneinfassung (oben) der aktiven rubrik samt unterrubriken  */

/* aktive rubrik in level 2 und 3 kennzeichnen */
ul#navlist a#currentLevel2, 
ul#navlist a#currentLevel3 {
	color: #7c4b89; 
	font-weight: bold; 
	padding-bottom: 0;
}


/* aktive rubrik level 1, 2 und 3 kennzeichnen*/
ul#navlist li#activeLevel1, 
ul#navlist li#activeLevel2, 
ul#navlist li#activeLevel3 {
	
}

/*ul#navlist li#activeLevel1 {background-color: #f1faf9;}*/
ul#navlist li#activeLevel1 a#currentLevel1 {
	margin-bottom: -.6em;
	padding-bottom: .6em;
}

ul#navlist li#activeLevel1.single {
	background-color: #f1faf9;
	border-bottom: dashed 1px #999; 
	border-top: dashed 1px #999; 
	color: #7c4b89; 
	display: block; 
	font-weight: bold; 
	margin: .6em 0 .6em 0; 
	padding-top: .6em;
	padding-bottom: .7em; 
	padding-left: 0; 	
}
	
/* level 2 und 3 - aktive elternebene, aber nicht aktive unterrubrik - kennzeichnen */
ul#navLevel2 {
	list-style: none; 
	margin: 0; 
	padding: 3px 0 0 0;
}

ul#navLevel3 {
	list-style: none; 
	margin: 0; 
	padding: 0;
}


/* allgemeine formatierung der level 2 und 3, z.b. einrueckung */
ul#navLevel2 a {
	font-weight: normal; 
	padding-left: 2em; 
/* 	width: 210px; */
}

ul#navLevel3 a {
	display: block; 
	padding-left: 4em; 
/* 	width: 170px; */
}

/* smartphone-menu */
/* menu icon, wird dynamisch per js eingefügt */
#menu-icon {
	display: none;
}

.instagram {
	margin-top: 30px;
}

.instagram svg {
	margin-right: 5px;
	vertical-align: middle;
}



/* ---------------- content ------------------- */
#content {
	float: left;
	font-size: 1.05rem; 
	letter-spacing: .01em;
	line-height: 1.5;
	margin-top: 3em;	
	width: 56%;
	}
	
/* ------ breadcrumb ------ */
#content #breadcrumb {
	color: #666;
	font-size: .85rem;
	margin-bottom: 20px; 	
}

#content #breadcrumb span.active {
	color: #7c4b89; 
	font-weight: bold;
}

#content #breadcrumb a {	 
	border-bottom: none;
	color: #666; 
	font-weight: normal;
	text-decoration: none;
}

#content #breadcrumb a:hover {
	border-bottom: 1px solid #666;
	color: #666;
	text-decoration: none; 
}

#content img.wide {
	display: block;
	margin-bottom: 30px;
	width: 100%; 
}

#content .captionimage {
	float: left; 
	margin-right: 30px; 
	width: 150px;
}

#content .captionimage img {
	margin-bottom: 5px;
}

#content .captionimage p {
	font-size: .85rem; 
	line-height: 1.4em; 
	margin-bottom: 5px;
}

#content .captionimageright {
	float: left; 
	margin-right: 0; 
	width: 115px;
}

#content .captionimageright img {
	margin-bottom: 5px;
}

#content .captionimageright p {
	font-size: .85rem; 
	line-height: 1.2em; 
	margin-bottom: 5px;
}

#content a:link {
	color: #42af9c;
	text-decoration: none;
	border-bottom: 1px solid #42af9c; 	
}

#content a:visited {
	color: #9fcdc5;
	text-decoration: underline; 	
}

#content a:hover {
	color: #42af9c;
	text-decoration: none; 
}

#content a.anchorlink:link {
	border-bottom: 1px dotted #666;
	color: #666;
	text-decoration: none; 	
}

#content a.anchorlink:visited {
	color: #666; 
	border-bottom: 1px dotted #666;
	text-decoration: none; 	
}

#content a.anchorlink:hover {}

#content a.normallink:link {
	color: #42af9c;
	border-bottom: none;
	text-decoration: underline; 	
}

#content a.normallink:visited {
	color: #9fcdc5;
	text-decoration: underline; 
}

#content a.normallink:hover {
	color: #42af9c;
	text-decoration: none; 
}

#content h1 a:link, 
#content h1 a.normallink:link,
#content h2 a:link, 
#content h2 a.normallink:link,
#content h3 a:link, 
#content h3 a.normallink:link,
#content h4 a:link, 
#content h4 a.normallink:link {
	color: #7c4b89;
	border-bottom: none;
	text-decoration: none; 
}

#content .caption {
	font-size: .85rem; 
	line-height: 1em;
}

#content .row {	 
	margin-bottom: 20px;
	overflow: auto;
}

#content .row .left {
	float: left; 
	text-align: left;
	width: 45%; 
}

#content .row .right {
	float: right; 
	text-align: left;
	width: 45%; 
}

.row .left h3,
.row .right h3 {
	margin-top: 35px;
}

.row .left h3:first-of-type,
.row .right h3:first-of-type {
	margin-top: 70px;
}

.row .left p,
.row .right p {
	font-size: 1rem;
}

#content .row .left1third {
	float: left;  
	text-align: left;
	width: 30%;
}

#content .row .right2third {
	float: right; 
	text-align: left;
	width: 65%; 
}

#content .smallspace {
	margin-bottom: 5px;
}

#content ul {
	list-style-image: url(../images/basic/bullet.gif);
	margin: 5px 0 10px 15px; 	
}

#content li {
	margin-bottom: 2px;
}

#content ul.headingslist {	 
	color: #7c4b89;
	font-family:'Sarabun', Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1.1818em; 
	font-weight: normal;
	list-style: none;
	margin: 5px 0 10px 0;
}

#content ul.headingslist li {
	margin-bottom: 15px;
}

#content ul.headingslist ul {
	color: #666; 
	font-size: 0.8461em; 
	margin-bottom: 0;
}

#content ul.headingslist ul li {
	margin-bottom: 2px;
}

#content ul.publications {
	color: #7c4b89;
	list-style: none;
	margin: 5px 0 10px 0; 
 
}

#content ul.publications li {
	margin-bottom: 15px;
}

#content ul.publications li h3 {
	font-weight: normal; 
	font-size: 1.1em; 
	font-style: italic; 
	margin: 0;
}

#content ul.publications li p {
	margin-bottom: 0;
}

#content ul.sitemap {
	list-style: none; 
	margin-left: 0;
}

#content ul.sitemap li {
	list-style: none;
}

#content ul.sitemap li.siteLevel1 {
	font-weight: bold;
	margin-bottom: 20px; 
}

#content ul.sitemap li ul.siteLevel2 {
	padding-left: 20px;
}

#content ul.sitemap li ul.siteLevel2 li a {
	font-weight: normal;
}

#content ul.sitemap li ul.siteLevel3 {
	padding-left: 20px;
}

#content ul.urllist {
	list-style: none; 
	margin-left: 0;
}

#content ul.urllist li {
	list-style: none;
}

#content ul.urllist li.siteLevel1 {
	margin-bottom: 20px;
}

#content ul.urllist li ul.siteLevel2 {
	padding-left: 20px;
}

#content ul.urllist li ul.siteLevel2 li a {
	font-weight: normal;
}

#content ul.urllist li ul.siteLevel3 {
	padding-left: 20px;
}

.promo-content {
    margin-top: 5em;
}

.clear {
    clear: both;
}

img.buch {
	width: 40%;
}

img.buch.th {
	width: 20%;
}



/* ---------------- footer ------------------- */
#footer {
	clear: both; 
	color: #fff;	
	font-size: .85rem;
	letter-spacing: .03em;
	padding: 3em 0 0;	
}

#footer .totop {
	clear: both; 
	display: inline-block;
	margin: 2em 0 4em 34%; 	
}

#footer .totop a:link {
	color: #42af9c;
	font-size: .85rem;
	font-weight: normal;
	text-underline-offset: 3px;
}

#footer .totop a:visited {
	color: #42af9c; 	
}

#footer .totop a:hover {
	color: #42af9c;
	text-decoration: none;
}

#footercontact {
	background: #837087;
	line-height: 1.6;
	margin-left: 25%;
	overflow: auto; 
	padding: 1.5em 0 2.5em 7em;	
}

#footercontact a:link {
	color: #fff;
	text-decoration: none; 
}

#footercontact a:visited {
	color: #fff;
	text-decoration: none; 
}

#footercontact a:hover {
	text-decoration: underline;
}

#footerblock1 {
	float: left; 
}

#footerblock2 {
	float: left; 	 
	margin-left: 2em;
}

#footerblock3 {
	float: left;  
	margin-left: 2em;
}

#footerblock4 {
	float: left;
	margin-left: 2em;
}

.tools-links {
	display: none;
}



/* ---------------- typo ------------------- */
@font-face {
  font-family:'Sarabun';
  font-style: normal;
  font-weight: 300;
  src:url('../fonts/Sarabun-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family:'Sarabun';
  font-style: italic;
  font-weight: 300;
  src:url('../fonts/Sarabun-LightItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family:'Sarabun';
  font-style: normal;
  font-weight: 600;
  src:url('../fonts/Sarabun-Bold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family:'Sarabun';
  font-style: italic;
  font-weight: 600;
  src:url('../fonts/Sarabun-BoldItalic.ttf') format('truetype');
  font-display: swap;
}

h1, 
h2, 
h3, 
h4 {
	color: #7c4b89;
	font-family: Georgia, "Times New Roman", Times, serif; 
}

h1 {
	font-size: 2.1rem; 
	font-weight: normal; 
	line-height: 1.1; 
	margin-bottom: 2px;
}

h2 {
	font-family:'Sarabun', Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1.3rem; 
	font-weight: normal;
	letter-spacing: .01em; 
	line-height: 1.4;
	margin-bottom: 40px;
}

h3 {
	font-size: 1.05rem; 
	font-weight: bold; 
	margin-bottom: 5px; 
	margin-top: 35px;
}

h3.first {
	margin-top: 0;
}

.highlight-wide + h3,
table + h3 {
	margin-top: 4em;
}

h4 {
	font-size: 1.05rem; 
	font-weight: bold; 
	margin-bottom: 0;
}

.row + h4 {
	margin-top: 4em;
}

p {
	margin-bottom: 15px;
}

p.tight {
	margin-bottom: 10px;
}

p.wide {
	margin-bottom: 20px;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

.topspace {
	margin-top: 4em;
}

abbr[title] {
	border-bottom: 1px #777 dotted; 
	cursor: help;
}


/* ---------------- tabellen ------------------- */
table {
	border-collapse: collapse; 
	border-spacing: 2px;
}

td, th {
	border-bottom: 1px solid #999;
	padding-left: 0;
	padding-top: 5px;
	padding-bottom: 5px;	
	vertical-align: top; 
}

td {
	text-align: left;
}

th {
	color: #7c4b89;
	font-weight: bold; 
	font-family: Georgia, "Times New Roman", Times, serif; 	
	text-align: left;
}

table.layout3sp {
	width: 100%;
}

table.layout3sp td, 
table.layout3sp th {
	width: 30%;
}

table.layout2sp {
	width: auto;
}

table.layout2sp td, 
table.layout2sp th {
	padding-right: 20px;
}

table.layout2sp th {
	width: 28%;
}

table.noborder td, 
table.noborder th {
	border: none;
}

/* ---------------- tabellen kurzglossar ------------------- */
table.kurzglossar {
	border-collapse: separate; 
	margin-left: -4px; 
	margin-top: 5px;
}

table.kurzglossar td, 
table.kurzglossar th {
	background-color: #f1faf9; 
	border-bottom: none; 
	padding: 2px 10px;
}

table.kurzglossar th {
	background-color: #d4ebe7;
}


/* ---------------- definitionslisten (glossar) ------------------- */
dl {
	margin-top: 0;
}

dt {
	color: #7c4b89; 
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-size: 1.1818em; 
	font-weight: bold; 
	margin-top: 20px;
}

dd {
	margin-left: 0;
}


/* ---------------- formulare ------------------- */
form label {
	cursor: pointer;
	display: block;	
	margin-top: 20px;
	margin-bottom: -10px;
	}

textarea, 
input {	 
	background: #d7ebe9;
	width: 400px;
}
	
textarea {
	font-family:'Sarabun', Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em;
}

input {
	font-family:'Sarabun', Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em;
}

input#reset, 
input#submit {
	background: none;
	margin-right: 20px;
	margin-top: 20px;	
	width: auto;
	}

input:focus, 
select:focus, 
textarea:focus {
	background: #d9e6f3;
}

input[type="radio"] {
	float: left; 
	margin-right: 10px; 
	margin-left: 0; 
	width: 20px;
}

.double-digit {
	width: 30px;
}

#selbsttest label {
	margin: 0;
}

#selbsttest div {
	margin-bottom: 5px;
}

.result {
	margin-bottom: 2px; 
	padding: 3px;
}

.highlight,
.highlight-wide {
	background-color: #d7ebe9; 
	border: 1px solid #58b0a2; 
	color: #000; 
	width: 260px;
}

.highlight-wide {
    margin: 20px 0;
    padding: 15px;
    width: auto;
}

.highlight-wide h2 {
    margin-bottom: 5px;
}

.highlight-wide p:last-of-type {
	margin-bottom: 0;
}



/* ---------------- skip navigation ------------------- */
#skip {
	left: -1000px;
	position: absolute; 
	overflow: hidden; 
	top: -100px; 
	width: 10em; 
	z-index: 2; 
}

#skip a, 
#skip2 a {}

#skip1 a:focus, 
#skip2 a:focus, 
#skip1 a:active, 
#skip2 a:active {
	background: #fff;
	color: #000;
	text-decoration: underline; 	 	
	z-index: 99;
}

#blah:active {}




 /*------------------------------------------------------------------ 
-8. Media Queries
 -------------------------------------------------------------------*/

/* achtung: bei max-device-width wird es schwierig, da retina-displays eine höhere auflösung haben! */


		
/* !max-width: 1000px ----------------------------------- */
/* ab hier verändern sich die container flexibel */

@media screen and (max-width: 80em) {
	
/* 	h1 {color: gold;} */ /* breakpoint-indikator */
	
	#wrapper  {
		width: auto;
    }
    
    #footercontact {
	    padding: 1em 0 1.5em 4em;
    }
	
    
}


/* !max-width: 768px ----------------------------------- */
/* toolbar und footer über ganze breite */

@media screen and (max-width: 48em) {
	
/* 	h1 {color: red;} */ /* breakpoint-indikator */
	
	h4 {
		margin-top: 1.5em;
	}
	
	#toolbar {
		padding: 1em 5% 0 1em;
		width: 100%;	
	}
	
	#content {
		width: 62%;
	}
	
	#content .row .left1third,
    #content .row .right2third {
		float: none;  
		width: 100%;
	}
	
	#content .row .right2third {
		margin-bottom: 2em;
	}
	
	table.layout2sp {
		margin-top: 2em;
		width: 100%;
	}
	
	img.buch.th {
		width: 30%;
	}
	
	figure.half.imgleft {
		margin-right: 0;
	}
	
	figure.half.imgright {
		margin-left: 0;
	}
	
	#footercontact {
		margin: 0 auto;
		overflow: auto; 
		padding: 1em 10% 1.5em;
	}

}

/* !max-width: 768px ----------------------------------- */
/* einspaltig */

@media screen and (max-width: 48em) {
	
/* 	h1 {color: green;} */ /* breakpoint-indikator */
	
	#header {
		height: 200px;
	}
	
	.logo {
		padding-left: 40px;
	}
	
	#toolbar {
		background-color: #6cbaac;
		padding-top: 0;
	}
	
	#left {
		float: none; 
		margin: 0 auto;;
		width: 100%;
	}
	
	#content {
		float: none;
		margin: 0 auto;
		width: 80%;
	}
	
	#menu-icon {
		background: #786873 url(../images/basic/icon-menu.svg) no-repeat 10% center;
		color: #fff;
		cursor: pointer;
		display: block; /* show menu icon */
		font-size: 1em;
		height: 2.2em;
		overflow: auto;
		padding: 1em 0 0 15%;
		width: auto;
		}
	
	#menu-icon:hover {
		background-color: #786873;
		}
	
	#menu-icon.active {
		background-color: #786873;
		}
	
	/* ------navigation------ */
	#navcontainer {
		float: none; 
		font-size: 1rem;
		padding-left: 0;
		margin-top: 0; 
		margin-bottom: 1.5em;
		width: 100%;	
	}
	
	#navcontainer ul {
		display: none; /* visibility will be toggled with jquery */
	}
	
	ul#navlist {
		background: #ece8f1;
	}
	
	ul#navlist li {
	    border-bottom: 1px solid #fff;
	    padding-bottom: .6em;
	    padding-top: .5em;
	    padding-left: 10%;
	}
	
	ul#navlist li ul li:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	
	ul#navlist ul#navLevel2 {
		background-color: #ece8f1;
		border-bottom: none; 	 
		margin-left: 0; 
		margin-bottom: .6em; 
		padding-bottom: .6em; 
	} /* linieneinfassung (unten) der aktiven rubrik samt unterrubriken  */
	
	ul#navlist li.navspacer {
		margin-top: 0;
	}
	
	/* generelle link- und hoverfarben in allen ebenen */
	ul#navlist a, 
	#navcontainer a {
		color: #666; 
		display: block; 
		text-decoration: none;
	}
		
	ul#navlist a:hover, 
	#navcontainer a:hover {
		color: #000;
	}
	
	/* aktive homepage */
	ul#navlist #activeHome {
		color: #7c4b89; 
		font-weight: bold; 
		padding-left: 10%;
	}
	
	/* aktive rubrik in level 1 kennzeichnen */
	ul#navlist a#currentLevel1 {
		background-color: #ece8f1;
		border-top: none;
		color: #7c4b89; 
		display: block;
		font-weight: bold; 	 
		margin-top: 0; 
		padding-top: 0;	
	} /* inkl. linieneinfassung (oben) der aktiven rubrik samt unterrubriken  */
	
	/* aktive rubrik in level 2 und 3 kennzeichnen */
	ul#navlist a#currentLevel2, 
	ul#navlist a#currentLevel3 {
		color: #7c4b89; 
		font-weight: bold; 
		padding-bottom: 0;
	}
	
	
	/* aktive rubrik level 1, 2 und 3 kennzeichnen*/
	ul#navlist li#activeLevel1, 
	ul#navlist li#activeLevel2, 
	ul#navlist li#activeLevel3 {
		
	}
	
	/*ul#navlist li#activeLevel1 {background-color: #f1faf9;}*/
	ul#navlist li#activeLevel1 a#currentLevel1 {
		margin-bottom: -.6em;
		padding-bottom: .6em;
	}
	
	ul#navlist li#activeLevel1.single {
		background-color: #ece8f1;
		border-bottom: 1px solid #fff;
		border-top: none;
		color: #7c4b89; 
		display: block; 
		font-weight: bold; 
		margin: 0; 
		padding-top: .5em; 
		padding-left: 10%; 	
	}
	
		
	/* level 2 und 3 - aktive elternebene, aber nicht aktive unterrubrik - kennzeichnen */
	ul#navLevel2 {
		list-style: none; 
		margin: 0; 
		padding: 0;
	}
	
	ul#navLevel3 {
		list-style: none; 
		margin: 0; 
		padding: 0;
	}
	
	/* allgemeine formatierung der level 2 und 3, z.b. einrueckung */
	ul#navLevel2 a {
		padding-left: 0em; 
	}
	
	ul#navLevel3 a {
		padding-left: 0em; 
	}
	
	ul#navlist .instagram {
		margin: .5em 0 .5em;
		padding-left: 10%;
		padding-bottom: .5em;
	}
	
	table.layout3sp {
        width: 100%;
    }
	
	#content {
		font-size: 1rem;
	}
	
	#content p,
	#content dd {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	
	img.imgleft {
		display: block;
		float: none; 
		margin-right: 0;
		margin-bottom: 2em;
	}
	
	#footer .totop {
		margin: 2em 0 4em 10%; 	
	}
	
	#footerblock1 {
    	float: none;
    	width: 100% 
    }
    
    #footerblock2,
    #footerblock3,
    #footerblock4 {
    	float: none; 	 
    	margin-left: 0;
    	margin-top: .5em;
    	width: 100%;
    }
    
    figure.half {
        width: 100%;
    }
    
    figure.imgleft,
    figure.imgright {
        float: none;
        margin: 0 0 2em;
    }
	
	
}



/* !max-width: 600px ----------------------------------- */
/* toolbar anpassen */

@media screen and (max-width: 37.5em) {
	
	#toolbar {
		padding: 0;
	}
	
	#toolbar span {
		display: block;
		margin-bottom: .8em;
		margin-right: 10%;
		padding-top: .4em;
	}
	
	#toolbar img {
		margin-right: 1.5em;
	}
	
	#toolbar img[alt~="English"] {
		margin-right: 0;
	}
	
	#toolbar a:link {
		display: inline-block;
		margin-bottom: .3em;
		margin-top: .3em;
	}
	
	.tools {
		display: block;
		padding: .7em 10% .7em;
		text-align: left;
	}
	
	/* tools links oben in header ausblenden, dafür in footer einblenden */
	.tools {
		display: none;
	}
	
	#toolbar {
		background: transparent;
	}
	
	#header {
		background: url('../images/basic/bg-header-mobil-600px.jpg') top left no-repeat #fff;
		height: 130px;
	}
	
	.logo {
		padding-left: 10%;
		padding-top: 40px;
	}
	
	#menu-icon {
		padding-left: 17%;
	}
	
	#content #breadcrumb {
		margin-bottom: 30px;
	}
	
	img.buch,
	img.buch.th {
		width: 50%;
	}
	
	#footercontact {
		padding: 2em 10%;
	}
	
	.tools-links {
		display: block;
	}
	
	.tools-links ul {
		margin-top: 2em;
		margin-bottom: 3em;
	}
	
	.tools-links li {
		border-top: 1px solid #fff;
		list-style-type: none;
		padding-top: .7em;
		padding-bottom: .7em;
	}
	
	.tools-links li:last-of-type {
		border-bottom: 1px solid #fff;
	}
	
	#footer {
		font-size: 1rem;
	}
	
	
	
	
}



/* !max-width: 470px ----------------------------------- */
/* einspaltig */

@media screen and (max-width: 29.5em) {
    
/*     h1 {color: gray;} */ /* breakpoint-indikator */
    
    #toolbar {
	    padding-right: 0;
    }
    
    .tools {
		padding: .5em 10% .7em;
	}
	
	#menu-icon {
		padding-left: 20%;
	}
    
    /* #menu-icon {
	    background: #786873 url(../images/basic/menu-icon-weiss.png) no-repeat 3em center;
	    padding: 1em 0 0 6em;
    } */
    
    #content .row .left,
    #content .row .right {
        float: none;
        width: 100%;
    }
	
	#content .row.topspace {
		margin-top: 2em;
	}
	
	#content .row .left1third {
		margin-bottom: 3.5em;
	}
    
    #content .captionimage {
	    float: none;
		margin-bottom: 2em;
		width: 100%
    }
	
	
	img.buch,
	img.buch.th {
		width: 100%;
	}
    
    #footer {
        font-size: .87em;
    }
    
    #footercontact {
        line-height: 1.4;
    }
    
}



/* !max-width: 304px ----------------------------------- */
/* header */

@media screen and (max-width: 19em) {
	
	
	
}


/* !print ----------------------------------- */

@media print {
    
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
	    }

    a,
    a:visited {
        text-decoration: underline;
	    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
	    }

    pre,
    blockquote {
        border: 1px solid #888;
        page-break-inside: avoid;
	    }

    thead {
        display: table-header-group; /* h5bp.com/t */
	    }

    tr,
    img {
        page-break-inside: avoid;
	    }

    img {
        max-width: 100% !important;
	    }

    @page {
        margin: 0.5cm;
	    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
	    }

    h2,
    h3 {
        page-break-after: avoid;
	    }
	
				
}