/* CSS */
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url('https://fonts.googleapis.com/css?family=Quicksand');


#start_bh {
	padding-bottom: 40px;

}

#gesamteInhalt {
	
}

#cover {
	position:relative;
	margin-top:2em;
	width:100%;
	box-sizing:border-box;
}
#hintergrundbild {
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	margin-top:0px;
	margin-left:0px;
}
#hintergrundbild img {
	width:100%;
	height:100%;
}
#covertext {
	position:absolute;
	top:4em;
	left: 2em;
	width:45%;
	height:auto;
	z-index:2;
	background-color:rgba(255,255,255,0.3);
	color: #fff;
	font-family: Quicksand;
	padding: 0 10px;
}

#coverlink {
	position:absolute;
	width:auto;
	height:auto;
	z-index:3;
	top: 22em;
	margin-left:2em;
	
}
#coverlink a {
	text-decoration:none;
	color:#fff;
	padding:12px 24px;
	background-color: #ff8080;
	font-size:100%;
	font-family:Quicksand;
}


/* ANGEBOT */

#angebot {
	position:relative;
	top: 3em;
	width:920px;
	margin-left:20px;
}

#one {
	float:left;
	width:300px;
	border: 1px dotted #ccc;
	box-sizing: border-box;
	text-align:center;
	font-family: Quicksand;
}

#two {
	float:left;
	margin-left:10px;
	width:300px;
	border: 1px dotted #ccc;
	box-sizing: border-box;
	text-align:center;
	font-family: Quicksand;
}

#tree {
	float:left;
	margin-left:10px;
	width:300px;
	border: 1px dotted #ccc;
	box-sizing: border-box;
	text-align:center;
	font-family: Quicksand;
}

#angebot:after {
	content:"";
	clear:both;
	display:table;
}


/* LEHRERIN */
#lehrerin {
	margin-top: 2em;
	margin-left: 4em;
	width:100%;
}
#lehrerinBild img{
	border: 1px solid #ccc;
	float:left;
}
#lehrerinText {
	float:left;
	margin-left: 25px;
	margin-top:25px;
	color: rgba(104,214,249,1);
	font-family:"Quicksand";
	font-size:100%;
	line-height:150%;
}

#coverlink2 {
	margin-top:25px;
}

#coverlink2 a {
	text-decoration:none;
	color:#fff;
	padding: 5px 10px 5px 0px;
	background-color: #ff8080;
	font-size:100%;
	font-family:Quicksand;
}
#lehrerin:after {
	content:"";
	clear:both;
	display:table;
}

/* BESCHREIBUNG */

#beschreibung {
	
}

#thema1 {
	margin-top:2em;
	width:90%;
	font-family:Quicksand;
	margin-left:5%;
}

.zweispaltenbox {
	margin-top: 2em;
}
.boxtext {
	width: 60%;
	float:left;
	line-height:150%;

}
.bildbox {
	float:left;
	margin-left:5%;
}
#thema1 :after{
	content:"";
	clear:both;
	display: table;
}

#thema2 {
	margin-top:2em;
	width:90%;
	font-family:Quicksand;
	margin-left:5%;
}
#thema2 :after{
	content:"";
	clear:both;
	display: table;
}

#thema3 {
	margin-top:2em;
	width:90%;
	font-family:Quicksand;
	margin-left:5%;
}
#thema3 :after{
	content:"";
	clear:both;
	display: table;
}

.hyperlink {
	text-decoration:none;
	color: #000;
}

/* MEDIA QUERIES */
@media only screen and (max-width: 767px) {

/* COVER */	
#covertext {
	position:relative;
	top:1em;
	left: 5%;
	width:90%;
	height:auto;
	z-index:2;
	background-color:#fff;
	color: #000;
	font-family: Quicksand;
	padding: 0;
}

#coverlink {
	position:relative;
	width:auto;
	height:auto;
	z-index:3;
	top: 1em;
	margin-left:5%;
	
}

/* ANGEBOT */

#angebot {
	position:relative;
	margin-top: 3em;
	width:90%;
	margin-left:5%;
}

#one {
	float:left;
	width:100%;
}

#two {
	margin-top: 25px;
	margin-left:0;
	width:100%;
}

#tree {
	margin-top: 25px;
	margin-left:0px;
	width:100%;
}

#angebot:after {
	content:"";
	clear:both;
	display:table;
}

/* LEHRERIN */
#lehrerin {
	margin-top: 2em;
	margin-left: 5%;
	width:90%;
}
#lehrerinBild img{
	border: 1px solid #ccc;
	float:left;
}
#lehrerinText {
	float:left;
	margin-left: 0px;
	margin-top:25px;
	font-size:90%;
}

#coverlink2 {
	margin-top:25px;
}

#coverlink2 a {
	padding:5px 10px 5px 0;
	text-align:left;
	margin-left:0;
}

/* BESCHREIBUNG */

#thema1 {
	margin-top:2em;
	width:90%;
	font-family:Quicksand;
	margin-left:5%;
}

.zweispaltenbox {
	margin-top: 2em;
}
.boxtext {
	width: 100%;
	float:left;
	line-height:150%;

}
.bildbox {
	float:left;
	margin-top:10px;
	margin-left:0%;
	width:100%;
}
#thema1 :after{
	content:"";
	clear:both;
	display: table;
}

#thema2 {
	margin-top:2em;
	width:90%;
	font-family:Quicksand;
	margin-left:5%;
}
#thema2 :after{
	content:"";
	clear:both;
	display: table;
}

#thema3 {
	margin-top:2em;
	width:90%;
	font-family:Quicksand;
	margin-left:5%;
}
#thema3 :after{
	content:"";
	clear:both;
	display: table;
}

.hyperlink {
	text-decoration:none;
	color: #000;
}

}

@media only screen and (min-width : 768px) and (max-width : 1024px)  { 

/* COVER */	
#covertext {
	top:3em;
}
#coverlink {
	top: 19em;
}
/* ANGEBOT */

#angebot {
	position:relative;
	top: 3em;
	width:99%;
	margin-left:0.5%;
	box-sizing:border-box;
}

#one {
	float:left;
	width:33.333%;
	border:none;
	box-sizing: border-box;
	text-align:center;
	font-family: Quicksand;
}

#two {
	float:left;
	margin-left:0px;
	width:33.333%;
	border:none;
	box-sizing: border-box;
	text-align:center;
	font-family: Quicksand;
}

#tree {
	float:left;
	margin-left:0px;
	width:33.333%;
	border:none;
	box-sizing: border-box;
	text-align:center;
	font-family: Quicksand;
}
#one img, #two img, #tree img {
	width:100%;
}
#one h3, #two h3, #tree h3 {
	font-size:105%;
}
#one, #two, #tree {
	font-size: 95%;
}
#angebot:after {
	content:"";
	clear:both;
	display:table;
}
/* LEHRERIN */

#coverlink2 a {
	text-decoration:none;
	color:#fff;
	padding:5px 10px 5px 0px;
	background-color: #ff8080;
	font-size:100%;
	font-family:Quicksand;
}

/* BESCHREIBUNG */

.zweispaltenbox {
	margin-top: 2em;
}
.boxtext {
	width: 60%;
	float:left;
	line-height:150%;

}
.bildbox {
	float:left;
	margin-left:2%;
	width:38%;
	display:block;
	text-align:right;
}
.bildbox img {
	width:100%;
}
}