*

{
	margin:0px;
	padding:0px;
	font-family:sans-serif;
}

html,body
{
	height:100%;
}

body 
{
	background:white;
	margin:auto;
}

img
{
	max-width:100%;
	height:auto;
}

h1
{
    font-weight:bold;
    font-size:1em;
	padding-bottom:7px;
	padding-top:7px;
}

h3
{
	font-size:1em;
	font-weight:bold;
	padding-bottom:7px;
}

p 
{
	padding-bottom:0.6em;
}

a
{
	color:black;
	text-decoration:none;
}

#mobile_titel
{
	display:none;
	transform:scale(0.0, 0.0);
}

#mainpage
{
	background:white;
	margin:auto;
	width:1300px;
	height:1000px;
	padding-top:25px;
	padding-bottom:25px;
	position:relative;
	top:-311px;
	right:177px;
	transform:scale(0.9);
}

#inhalt
{
	background:white;
	margin:auto;
	width:1500px;
	height:860px;
}

 /* ------------- Um die gewünschte Perspektive zu erzielen, musste ich dieses DIV sehr GROSS anlegen; durch die Verzerrung ragt sie nochmal um etwa die Hälfte aus dem ("normalen") Browserfenster heraus  */
#menue
{
	background:white;
	margin-right:0;
	margin-left:15px;
	width:600px;
	height:750px;
	float:left;
	transform:perspective(200px) rotateY(11deg);
	-moz-transform:perspective(200px) rotateY(11deg);
	-webkit-transform:perspective(200px) rotateY(11deg);
	-ms-transform:perspective(200px) rotateY(11deg);
}

#spacer_navi
{
	background:white;
	margin-right:0;
	margin-left:auto;
	width:30px;
	height:330px;
}

/*  B E G I N N   Flyout-Navigation/Menü in Listen */
nav  ul
{
	background:white;
	margin-right:0;
	margin-left:auto;
	width:300px;
	font-variant:small-caps;
}

nav  li
{
	text-align:right;
	list-style:none;
	position:relative;
	padding:0px;
	width:12em;
}

nav a
{
	display:block;
	padding:0.4em;
	text-decoration:none;
	color:black;
	font-size:1.3em;
	line-height:97%;
}

#kostenlink, #impressumlink
{
	padding:0.4em;
	text-decoration:none;
	color:black;
	font-size:1.3em;
	line-height:97%;
}

nav ul ul
{
	position:absolute;
	top:-5em; 
	left:12em;
/* Unternavigation ausblenden */
	font:0/0 serif;
	z-index:-1;
	_transition:font .4s;
}

nav ul li:hover ul,
nav ul a:focus ~ ul   
{
/*  Unternavigation einblenden */
	font:inherit;
	z-index:auto;                
}

nav li ul a 
{
	text-align:left;
	color:firebrick;
}

nav a:focus, nav a:hover 
nav li a:focus, nav li a:hover
{    
  _font-weight:semi-bold;
  text-shadow:1px 1px 1px rgba(0,0,0,0.4);
}	

/* Beginn farbliche Unterscheidung der einzelnen Menü-Punkte beim hover - INKL. die dazugehörigen Farbzuweisungen der EXTERNEN Dateien */
#homelink:hover
{color:#0B3861;}
#homelink:focus
{color:#0B3861;}
#home_text 
{color:#0B3861;}

#arbeitslink:hover
{color:darkgreen;}
#arbeitslink:focus
{color:darkgreen;}
#arbeit_text 
{color:darkgreen;}

#angebotlink:hover
{color:darkred;}
#angebotlink:focus
{color:darkred;}
#angebot_text 
{color:darkred;}

#qualifikationlink:hover
{color:darkolivegreen;}
#qualifikationlink:focus
{color:darkolivegreen;}
#qualifikation_text 
{color:darkolivegreen;}

			/* "Ablauf" = schwarz, braucht also nicht definiert zu werden */

#kostenlink:focus
{color:#0B3861;}
.kostenlink
{color:#0B3861;}
.kosten_text
{color:#0B3861;}

#methodiklink:hover
{color:#064806;}
#methodiklink:focus
{color:#064806;}
#methodik_text 
{color:#064806;}

			/* "Links" = schwarz, braucht also auch nicht definiert zu werden */
		
.impressum_text 
{color:firebrick;}



/* Ende farbliche Unterscheidung der einzelnen Menü-Punkte */

/*   E N D E    Flyout-Navigation/Menü in Listen */

/* Trennlinien können (leider) NICHT durch "Border" der jeweiligen Box ("Navi" bzw. "Monitor") erzeugt werden, da diese Boxen zur Darstellung der erwünschten Perspektive viel größer sein müssen */
#trenn_vertikal
{
	background:black;
	height:290px;
	width:3px;
	float:left;
	position:relative;
	top:378px;
	right:15px;
	z-index:3;
}

#content_rechts
{
	background:transparent;
	margin-left:0px;
	margin-top:45px;
	width:600px;
	height:700px;
	float:left;
	transform:perspective(400px) rotateY(-7deg);
	-moz-transform:perspective(400px) rotateY(-7deg);
	-webkit-transform:perspective(400px) rotateY(-7deg);
	-ms-transform:perspective(400px) rotateY(-7deg);
}

#spacer_iframe
{
	opacity:0;
	_background:blue;
	z-index:111;
	margin-right:auto;
	margin-left:0;
	width:30px;
	height:190px;
}

iframe
{
	background:transparent;
	width:550px;
	height:500px;
}

/*  B E G I N N   Selektoren-Formatierungen der hier eingebundenen EXTERNEN  html-Dateien */

.extern_pages
{
	background:transparent;
	_display:flex;
	_display:-webkit-flex; /* Safari */
/* zentriert VERTIKAL */
	_align-items:center;
/* zentriert HORIZONTAL: */
	_justify-content:center;
	width:550px;
	height:500px;
	margin-right:auto;
	margin-left:0;
	list-style-position:inside;
}


#arbeit_text li
{
	margin-left:1em;
}

/* ACHTUNG: der erste ("deaktivierte") Google-Font-Verweis funktioniert bei weniger Browsern als der zweite, deshalb so. */
#home_text h3
{
	_font-family: 'Shadows Into Light', cursive;
	font-family: 'shadows_into_lightregular';
	font-size: 3em;
	line-height:1.2em;
	font-weight:normal;
}

.extern_pages a:hover 
{ 
	text-decoration:underline;
}

.extern_pages a:visited
{
	color:#585858;
	font-weight:normal;
}

/*  E N D E   Definitionen der hier eingebundenen externen html-Dateien */

#trenn_horizontal_li
{
	background:black;
	height:3px;
	width:270px;
	transform:rotate(-22deg);
	position:relative;
	bottom:142px;
	left:341px;
	float:left;
	z-index:3;
}

#trenn_horizontal_re
{
	background:black;
	height:3px;
	width:430px;
	transform:rotate(6.5deg);
	position:relative;
	bottom:169px;
	left:330px;
	float:left;
	z-index:3;
}

#fusszeile
{
	background:transparent;
	_opacity:0.3;
	height:333px;
	width:585px;
	display:flex;
	align-items:center;
	justify-content:center;
	transform:perspective(1200px) rotateX(72deg)  rotateZ(25deg);
	-moz-transform:perspective(1200px) rotateX(72deg)  rotateZ(25deg);
	-webkit-transform:perspective(1200px) rotateX(72deg)  rotateZ(25deg);
	-ms-transform:perspective(1200px) rotateX(72deg)  rotateZ(25deg);
	position:absolute;
	right:220px;
	bottom:88px;
	transition:1s;
}

#fusszeile:hover
{
	_opacity:1;
	display:flex;
	bottom:35px;
	box-shadow:-20px 20px 20px rgba(0,0,0,0.4);
	transform:scale(0.6, 0.6);
	z-index:10;
}

.hinweis
{
	position:absolute;
	transform:scale(1.7, 1.7);
	left:-90px;
	bottom:250px;
	padding-top:0.8em;
	padding-left:1.1em;
	padding-right:0.6em;
	padding-bottom:0.9em;
	font-size:0.8em;
	background:white;
	min-height:50px;
	width:250px;
	box-shadow:5px 5px 11px rgba(0,0,0,0.4);
	z-index:11;
	opacity:0;
	transition-duration:0s;
	transition-timing-function:ease-out;
	transition-delay:0s;
}

.hinweis h4 
{
	padding-bottom:0.6em;
}

#fusszeile:hover .hinweis
{
	z-index:11;
	opacity:1;
	transition-duration:0.4s;
	transition-timing-function:ease-in-out;
	transition-delay:0.8s;
	-webkit-transition-duration:0.4s;
	-webkit-transition-timing-function:ease-in-out;
	-webkit-transition-delay:0.8s;

}

#fusszeile h2
{
	_font-family: 'Shadows Into Light', cursive;
	font-family: 'shadows_into_lightregular';
	font-size:4em;
	font-weight:normal;
	transition:1s;
}


@font-face {
    font-family: 'shadows_into_lightregular';
    src: url('shadowsintolight-webfont.woff2') format('woff2'),
         url('shadowsintolight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* ##########################################################################

             ---------- MEDIA QUERY ---------

#################################################################################### 
*/


@media screen and (max-width:640px) {



html,body
{
	background:white;
	height:100%;
}

body 
{
	background:white;
	margin:auto;
}

#mobile_titel
{
	display:block;
	display:flex;
	text-align:right;
	justify-content:center;
	padding-top:0.5em;
	padding-right:0.5em;
	color:black;
	transform:scale(1.0, 1.0);
}

#mobile_titel h1
{
    font-weight:normal;
    font-size:1.2em;
}

#spacer_navi, #trenn_vertikal, #trenn_horizontal_li, #trenn_horizontal_re,  #impressumlink_bild, #fusszeile
{
	display:none;
}

#mainpage
{
	background:transparent;
	margin:auto;
	width:100%;
	_height:900px;
	padding-top:0px;
	padding-bottom:0px;
	position: relative;
	top:0px;
	right:0px;
}

/*#inhalt
	width:1500px;
	height:900px;*/
#inhalt
{
	background:transparent;
	margin:auto;
	width:100%;
	_height:850px;
	_border-style: dotted solid;
}

/*#menue
	width:600px;
	height:800px;
	float:left;
	transform:perspective(200px) rotateY(11deg);
	-moz-transform:perspective(200px) rotateY(11deg);
	-webkit-transform:perspective(200px) rotateY(11deg);
	-ms-transform:perspective(200px) rotateY(11deg);*/
#menue
{
	width:350px;
	height:340px;
	_float:left;
	transform:perspective(0px) rotateY(0deg);
	-moz-transform:perspective(0px) rotateY(odeg);
	-webkit-transform:perspective(0px) rotateY(odeg);
	-ms-transform:perspective(0px) rotateY(odeg);
}

nav a
{
	background:transparent;
	display:block;
	padding:0.2em;
	line-height:97%;
}

#kostenlink, #impressumlink
{
	padding:0.2em;
	line-height:97%;
}

nav  ul
{
	width:350px;
}

nav  li
{
	padding-right:1em;
	width:11em;
}

/*#content_rechts
	margin-left:20px;
	margin-top:45px;
	width:600px;
	height:700px;
	float:left;
	transform:perspective(400px) rotateY(-7deg);
*/
#content_rechts
{
	padding:1.1em;
	margin-left:0px;
	margin-top:5px;
	width:100%;
	_height:530px;
	_float:left;
	transform:perspective(0px) rotateY(0deg);
	-moz-transform:perspective(0px) rotateY(0deg);
	-webkit-transform:perspective(0px) rotateY(0deg);
	-ms-transform:perspective(0px) rotateY(0deg);
	display:flex;
	display:-webkit-flex; /* Safari  */
	align-items:flex-start;
}


nav li ul a 
{
	text-align:left;
}
	
#spacer_iframe
{
	opacity:0;
	margin-right:auto;
	margin-left:0;
	_width:30px;
	_height:40px;
}
	
iframe
{
	background:transparent
	width:100%;
	_height:480px;
	display:flex;
	display:-webkit-flex; /* Safari  */
	flex-direction:column;
	align-content:flex-start;
}

/*.extern_pages
	background:rgba(1,1,1,0);
	display:flex;
	display:-webkit-flex; /* Safari 
	flex-direction:column;
	align-content:center;
	justify-content:center;
	width:550px;
	height:500px;
	margin-right:auto;
	margin-left:0;
	list-style-position:inside;
*/
.extern_pages
{
	background:transparent;
	display:flex;
	display:-webkit-flex; /* Safari  */
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	margin-right:auto;
	margin-left:0;
	list-style-position:inside;
}

#home_text h3
{
	font-family: 'shadows_into_lightregular';
	font-size:2em;
	line-height:1.2em;
	font-weight:normal;
}

.hinweis
{
	display:none;
}




}