* {
	box-sizing: border-box;
}

html
{
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height: 100%;
	color: #fff;
	text-rendering: optimizeLegibility;
}

@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx),(min-resolution:144dpi)
{
	html { font-weight: 300; }
}

body {
	background-color: #4e4e4d;
	font: normal 16px sans-serif;
	font-family: 'Open Sans',sans-serif;
	margin: 0;
}


h1, h2, h3 { margin-top: 0; }
h1 { font-size: 1.5rem; font-weight: bold; }
h2 { font-size: 1.3rem; font-weight: bold; margin-bottom: 0.6rem; }
h3 { font-size: 1rem; font-weight: bold; margin-bottom: 0; }
h2.coloured { font-size: 1.5rem; color: #ef5638; }

a { color: inherit; text-decoration: none; }
/*a:hover { color: #ef5638; }*/
a:hover { color: #ff9100; }
#content .btn { color: #fff; }
.caret { border-top: 4px solid #fff; }

.fw-bold { font-weight: bold; }
.fw-normal { font-weight: normal; }

p { margin-top: 0; }

figure { margin: 0 0 1em 0; }

figcaption {
	background-color: #eee;
	border-radius: 0 0 3px 3px;
	padding: 0.75em;
}

/* styles für intros mit Bild */
.flexbox {display:flex; flex-flow:row wrap; justify-content: space-between;}
figure.introbild-left {position:relative; width:48%;height:max-content;padding:0; }
figure.introbild-left img {width: 100%; height: auto; display:block;}
figure.introbild-left figcaption {height:100%;background-color:transparent;}
figure.introbild-left figcaption a {color:white !important; display: inline-block; width: 100%; height: 100%;text-shadow: 2px 2px rgba(0,0,0,0.2);}
figure.introbild-left figcaption a:hover {text-shadow: 2px 2px rgba(0,0,0,0.4);}
figure.introbild-left p.img_caption {display:none;}
.introbild-text {width:48%;}
.introbild-text a {color:white !important;}
.introbild-text a:hover {text-decoration:underline;}
.flexrow-divider {width:100%;height:1rem;}
div.img_caption {width:auto !important;} 
@media(min-width:600px){
	figure.introbild-left figcaption {
      position:absolute; 
	  top:0; width:100%; 
	  text-align:center; 
	  font-weight: bold;
	  font-size:3rem;
      padding:0;
	}
}

/* Wrapper alle ausser steine */
#wrapper {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 100;
}

/* Wrapper um den weissen Inhaltsbereich */

#content-wrapper { width: 100%; }

/* Container */
#header,
#content,
#footer { box-sizing: border-box; max-width: 960px; margin: 0 auto; padding: 1.25em 0; }
#content { padding: 1.25em; background-color: #444; overflow: auto; }
#header { padding-bottom: 0; }

/* Header Wrapper */

#header-wrapper{
	position: relative;
	max-width: max-content;
	margin: auto;
}

/* Header */

#header #title { padding: 0 1em 1em; }

/* MENU */

#header #nav-trigger { display: block; padding: 1em; cursor: pointer; }

	.line {
		width: 40px;
		height: 4px;
		background: #ffffff;
		margin-bottom: 5px;
	}

#header nav {
	display: flex;
	width: 100%;
	height: auto;
	background: rgba(0, 0, 0, 0.8);
	position: absolute;
	top: 0px;
	left: -100vw;
	z-index: 100;
	transition: left .5s;
	justify-content: left;
	text-align: left;
}
#header nav ul {
	display: block;
	width: 100%;
}
#header nav > ul {
	margin-left: 1em;
}
#header nav li { font-size: 1em; margin: 0.4em; }
#header nav li a.xclose { display: block; font-size: 2em; text-align: right; }
#header nav ul li ul {
	position: relative;
	top: 0;
	left: 0;
	background-color: transparent;
	padding: 0;
	border: 0;
}
#header nav li ul li { font-size: 1.2em; }
#header nav ul li ul li a { color: white; }
#header nav>ul>li.active>a,
#header nav>ul>li.current>a { color: #ff9100; }
#header nav ul.nav-child>li.active>a,
#header nav>ul.nav-child>li.current>a { color: #ff9100; }

#header nav ul li ul li {
	font-size: 0.8em;
}

#header nav ul li ul li a { /*color: black;*/ }

/* Content Section */
/*
#content {
	background-color: yellow;
}
*/
#content { padding-top: 5em; }

.page-header { border: 0; padding-top: 20px; }

#content a { color: #ef5638; }
#content a:hover { color: #a6bbdf; }
a.arrowlink
{
	background: url("../images/css/arrowlink.png") no-repeat 0 5px;
	padding-left: 16px;
	font-weight: bold;
}
a.arrowlink:hover { background-image: url("../images/css/arrowlink-hover.png"); }

#content img {
	width: 100%;
}

.pull-left { width: 100%; margin-right: 0; }
.pull-left img { width: 100%; }

#content section {  }

.btn {background-color:transparent;}
.btn:hover {background-color:rgba(255,255,255,0.2);}
.sige_small a { color:#555 !important; }

/* eigene Page- und Inhalts-Klassen */


.mit-hintergrundbild {
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding: 2rem;
  color: #000;
}
.mit-hintergrundbild h1 {
  font-weight: bold;
  font-size: 3rem;
  line-height: 4rem;
  text-transform: uppercase;
}
.mit-hintergrundbild .h1-groesse1 { font-size: 3rem; }
.mit-hintergrundbild .h1-groesse2 { font-size: 2.5rem; }
.mit-hintergrundbild .h1-groesse3 { font-size: 2rem; }
.hintergrund-kreativ {
  background-image: url('../../../images/11_031_2.jpg');
  min-height: 250px;
}

.bildreihe-horizontal {display:flex; flex-flow: row nowrap; justify-content: space-between; margin-bottom: 1rem;}
.bildreihe-horizontal figure { margin-left: 0; margin-right: 1em; }


/* Formulare und Loginbereich */

fieldset { padding: 0.5em; border: 1px solid #ccc; border-radius: 5px; }
legend { padding: 1em; font-weight: bold; }

/* Sidebar */

.sidebar {
	border: 1px solid #a2a2a2;
}

/* Footer */

#footer {
	color: #fff;
	padding: 1em 1em 7em 1em;
	border-top: 1px solid white;
	font-size: 0.8rem;
}

#footer a {
	text-decoration: underline;
}

#footer ul li a {
	text-decoration: none;
}

#footer ul li.active,
#footer ul li.current {
	color: #ff9100;	
}

@media (min-width: 1000px) {
	#header #title {
		position: absolute;
		top: 3rem;
		left: 38.5rem;
		padding: 0;
		font-size: 2rem;
		font-weight: 400;
		color:
		black;
	}
	#header #title #regina { display: none; }
}

@media (min-width: 700px) {

	#content img {
		width: auto;
	}
	.pull-left { width: auto; margin-right: 1rem; }
	.pull-left img { width: auto; }
	#header #nav-trigger { display: none; }
	#header nav li a.xclose { display: none; }
	
	#header nav {
		position: relative;
		top: 0;
		left: auto !important;
		display: flex;
		border: 0;
		width: auto;
		height: auto;
		background: rgba(0, 0, 0, 0.2);
		transition: none;
		/*justify-content: center;*/
		text-align: left;
	}

	#header nav ul {
		position: relative;
		list-style: none;
		display: flex;
		margin: 10px 0 0 0;
		padding: 0;
		width: auto;
	}
	#header nav > ul {
		margin-left: 1em;
	}

	#header nav li {
		margin-right: 1em;
		white-space: nowrap;
	}
	#header nav>ul>li:last-child { margin-right: 0; }

	#header nav ul li ul {
		position: absolute;
		top: 2em; left: 0em;
		box-sizing: border-box;
		padding: 0.25em 0.25em 0.25em 0.1em;
		border-bottom: 2px solid gray;
	}
}

@media (min-width: 900px) {
	#header nav li {
		font-size: 1.3em;
	}
}
