/*Copyright: 2015 - 2016 PhSp Design, all rights reserved*/

html{
	overflow-y: scroll;
}

body{
color: #000;
background: #dcd8d8;
font-family: "Verdana", "Myriad", "Frutiger", "Liberation Sans", "Cantarell", "Helvetica", "Helvetica Neue", "Arial", "sans-serif";
font-size: 14px;
line-height: 24px;
word-wrap: break-word; /*extrem lange Wörter / Zeichnketten dürfen unterbrochen werden*/
padding: 0; /*für IE*/
margin: 0;
}

.page{
	width: 100%;
	min-width: 600px;
	max-width: 900px;
	margin: 0 auto;
}

.clear{
    clear: both;
}

.noscript{
	background: rgba(255,255,255,0.5);
	padding: 5px;
	z-index: 3;
	width: 100%;
	height: 40px;
	line-height: 35px;
}

p{
	padding: 0;
	margin: 20px 0;
}

ul{
	margin: 0;
	padding: 0;
}

h2{
	font-size: 16px;
	line-height: 32px;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

#top{
	height: 100px;
	position: relative;
	overflow: visible; /*damit dropdown angezeigt wird*/
	clear: both;
}

.logo-outer{
	position: absolute;
	margin: 25px 0 0 72px; /*margin-left = Abstand von Seitenrand (.page) zum ersten Buchstaben des Eintrages in .box ul tabs li a*/
	float: left;
	z-index: 1;
}

.logo{
	float: left;
	border: none; /*für IE 10 und geringer*/
}

.logo-typo{
	color: #000; /*damit die Schrift immer schwarz ist, statt wie übrige Links hellgrau zu werden*/
	float: left;
	margin-left: 10px;
	line-height: 35px;
}

#jumbo{
	width: 100%;
	clear: both;
	margin: 0;
	padding: 0;
	position: relative; /*(nur für absolute Positionierung der jumbo-box)*/
}

#jumbo-img{ /*von klasse in id geändert*/
    max-width: 100%;
    float: left;
    height: auto;
    width: auto\9; /*IE 8*/
	
	/*nur für konvexes jumbo-img design:*/
    /*position: relative;
    top: 18px;*/
}

/*jumbo-box-button f.k.a. pointer*/
.jumbo-box-button{
	border: 1px solid #e8e4e0; /*benötigt, da button*/
	background: none; /*benötigt, da button*/
	font-size: 16px;
	width: 30px; /*"width" u. "height" statt "padding", da button (sonst kein active-effekt)*/
	height: 30px;
	color: #e8e4e0;
	float: right;
	z-index: 2;
	transition-duration: 0.6s;
	position: absolute;
	bottom: 17px;
	right: 10px;
}

.jumbo-box-button:hover{
	color: #fff;
	border: 1px solid #fff;
	transition-duration: 0.6s;
}

.jumbo-box{
	width: auto; /*statt Prozentwerten*/
	/*min-width: 250px;
	max-width: 380px;
	min-height: 150px;*/
	width: 250px;
	height: 120px;
	color: #000;
	/*background: #e8e4e0*/
	position: absolute;
	z-index: 1;
	float: right;
	display: none;
	/*text-align: center; zum Zentrieren von ".jumbo-box-text"*/
	overflow: hidden;
	background-image: url("./images/jumbo-box-bg.png");
}

#jumbo-box1{
	bottom: 17px;
	right: 10px;
}

.jumbo-box-text{ /*(id = #jumbo-box-text-id)*/
	padding: 10px 20px;
	/*display: inline-block; zum Zentrieren von ".jumbo-box-text"*/
	text-align: left;
	font-size: 11px;
	line-height: 21px;
}
/*ENDE jumbo-box f.k.a. pointer*/

#middle{
	width: 100%;
	float: left;
	clear: both;
	background: #e8e4e0;
}

#middle-portfolio{
	width: 100%;
	float: left;
	clear: both;
}

/*#content{
	width: 600px;
	margin: 0 auto;
	background: #e8e4e0;
	overflow: hidden;
}*/

#content-fixedWidth{
	width: 600px;
	margin: 0 auto;
	background: #e8e4e0;
	overflow: hidden;
}

#content{
	max-width: 900px;
	min-width: 600px;
	margin: 0 auto;
	background: #e8e4e0;
	overflow: hidden;
}

/*#content-portfolio{
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
}*/

/*#content-privacyAndImprint{
	max-width: 900px;
	min-width: 600px;
	margin: 0 auto;
	background: #e8e4e0;
	overflow: hidden;
	background: orange;
}*/

.column-outer-outer{
	padding: 45px 50px;
	text-align: center;
}

.column-outer{ /*Nur benötigt, damit die Spalten auch dann zentriert sind, wenn die "max-width" (bei ".column") verringert wird.*/
	display: inline-block;
	text-align: left;
}

.column{
	width: 50%;
	max-width: 400px; /*Erklärung: maximale Breite von "#content": 900 px, abzüglich 2 x 50 px padding (bei .column-outer-outer)*/
	float: left;
	box-sizing: border-box;
	padding: 0 20px;
}

.column p:first-child{
	margin-top: 0;
}

.column button{
	float: left;
}

/*für responsive .content-box (1 von 3)*/
/*ursprüngliche .project-box:*/

/*.project-box {
	width: calc(50% - 20px);
	height: 380px;
	float: left;
	padding: 10px;
	margin: 20px 0;
	overflow: hidden;
	position: relative;
}*/

.project-box {
	position: relative; /*für Positionierung von ".project-box-text"*/
}


.project-box-img{ /*für responsive .content-box (2 von 3)*/
	max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

.project-box-text{
	color: #fff;
	position: absolute;
	height: auto;
	width: 100%;
	background: #777;
	bottom: 0px;
	padding: 0 10px;
	box-sizing: border-box;
}

.big-image{
	margin-top: 60px;
}

#footer{
	width: 100%;
	float: left;
	clear: both;
	padding-top: 6%;
	background: #e8e4e0;
	/*background: #ddd;
	    background: -webkit-linear-gradient(#f7f7f7, #ddd);
    	background: -o-linear-gradient(#f7f7f7, #ddd);
    	background: -moz-linear-gradient(#f7f7f7, #ddd);
    	background-image: linear-gradient(#f7f7f7, #ddd);*/
	overflow: no-display; /*!evtl. zu "hidden" ändern?*/
}

#footer-portfolio{
	width: 100%;
	float: left;
	clear: both;
	padding-top: 6%;
	background: none;
	overflow: no-display; /*!evtl. zu "hidden" ändern?*/
}

.footer-text{
	width: 80%;
	margin: 15px 10% 25px 72px; /*margin-left = Abstand von Seitenrand (.page) zum ersten Buchstaben des Eintrages in .box ul tabs li a*/
	float: left;
	clear: both;
	color: #000;
	font-size: 11px;
	line-height: 21px;
}

/*Icons*/

.check{
	display: inline-block;
	background-image: url("images/check.png");
	background-repeat: no-repeat;
	width: 11px;
	height: 11px;
}

/*DROPDOWN MENU*/

#dropdown-menu-outer{
	position: absolute;
	top: 30px;
	right: 72px;
	/*float: right;
	margin: 25px 10% 25px 0;*/
	background: #dcd8d8; /*rgba(0, 0, 0, 0.6)*/
	overflow: hidden;
	border: 1px solid #777; /*#b4b4b4*/
	z-index: 2;
	transition-duration: 0.6s;
}

#dropdown-menu-outer:hover{
	border: 1px solid #000;
	transition-duration: 0.6s;
}

#dropdown-menu-button{
	width: 100px;
	color: #777; /*#b4b4b4*/
	background: none;
	border: none;
	line-height: 30px;
	overflow: hidden;
	transition-duration: 0.6s;
}

#dropdown-menu-button:hover{
	color: #000;
	transition-duration: 0.6s;
}

#dropdown-menu-options{
	font-size: 11px;
	list-style: none;
	display: none;
	overflow: hidden;
}

#dropdown-menu-options li{
	padding-left: 5px;
	transition-duration: 0.6s; /*diese und die folgenden vier code-zeilen "aktivieren", wenn list items bei hover einen hintergrund bekommen sollen*/
}

#dropdown-menu-options li:hover{
	background: #e8e4e0; /*#f7f7f7*/
	transition-duration: 0.6s;
}

#dropdown-menu-options li a{
	display: block;
	color: #808080;
	transition-duration: 0.6s; /*notwendig, damit fade-in UND fade-out*/
}

#dropdown-menu-options li a:hover{
	color: #000;
}

/*ENDE*/

/*BUTTONS*/

button{
	outline: none; /*!!! funktioniert nicht in Iceweasel 38.7.0 | entfernt die outline von allen buttons. So wird die gepunktete Outline (dotted outline), die fokusierte Objekte umgibt ausgeblendet.*/
}

.display-buttons-outer{
	background: blue;
	position: relative;
	width: 400px;
	height: 10px; /*hier 0, damit #jumbo-img richtig positioniert ist, bei einer höhe größer als 0 würde ein Abstand entstehen*/
	margin: 0 auto;
}

.display-buttons{
	position: absolute;
	bottom: 10px; /*hier -10px für konvexes jumbo-img design*/
	display: inline-block;
	font-size: 20px;
}



.display-buttons ul li a{
	color: #e8e4e0; /*#b4b4b4*/
}

.button-standard{
	height: 45px;
	font-size: 16px;
	color: #777; /*#b4b4b4*/
	background: none;
	border: 1px solid #777; /*#b4b4b4*/
	display: block;
	padding: 0 40px 0 40px;
	margin: 60px auto 40px auto;
	transition-duration: 0.6s;
}

.button-standard:hover{
	color: #000;
	border: 1px solid #000;
}

/*bitte beachten: In Z. 198 wurde festgelegt: .column button: float: left;*/

.button-red{
	height: 45px;
	font-size: 16px;
	color: #fff;
	background: #cf023a;
		background: -webkit-radial-gradient(#cf023a, rgba(232,2,65,1));
		background: -o-radial-gradient(#cf023a, rgba(232,2,65,1));
		background: -moz-radial-gradient(#cf023a, rgba(232,2,65,1));
		background: radial-gradient(#cf023a, rgba(232,2,65,1));
	border: 1px solid #fff;
	display: block;
	padding: 0 40px 0 40px;
	margin: 60px auto 40px auto;
	box-shadow: 5px 5px 20px grey;
}

.button-red:hover{
	background: #fff;
		background: -webkit-radial-gradient(rgba(232,2,65,1), #cf023a);
		background: -o-radial-gradient(rgba(232,2,65,1), #cf023a);
		background: -moz-radial-gradient(rgba(232,2,65,1), #cf023a);
		background: radial-gradient(rgba(232,2,65,1), #cf023a);
	box-shadow: 2px 2px 10px grey;
}

/*ENDE*/


/*FARBEN ÄNDERN (DROPDOWN MENU)

.dropdown-menu-options-heading{
	display: block;
	color: #b4b4b4;
}

#colours{
	width: 80px;
	padding-left: 5px;
	list-style: none;
	overflow: hidden;
}

#colours li a{
	float: left;
	display: inline-block;
	color: #b4b4b4;
	transition-duration: 0.6s;
	margin-right: 5px;
}

#colours li a:last-of-type{
	margin-right: none;
}
*/
/*ENDE*/

/*TABS - D. L. JQUERY (modifiziert und ergänzt)*/
#tabs-outer{
	width: 100%;
	min-width: 600px; /*nur wichtig, wenn width = >600px*/
	margin: 0 auto;
	text-align: center; /*nötig zum Zentrieren von ".tabs"*/
}

.tabs{
	width: 100%; /*(weil in .boxes fourboxes. Die eigentliche Größe wird dort bestimmt.)*/
	height: 100%;
	list-style: none;
	display: inline-block; /*nötig zum Zentrieren von ".tab"*/
}

.tabs li{
	width: 100%; /*(weil in .boxes fourboxes. Die eigentliche Größe wird dort bestimmt.)*/
	height: 100%;
	display: inline-block;
}

.tabs a{
	height: 100%;
	background: none;
	color: #777; /*#b4b4b4*/
	display: block;
	line-height: 50px; /*95px für konvexes jumbo-img design - Wert ist geringer als .fourboxes (.fourboxes ist 80px hoch), damit der Text auf der Y-Skala weiter nach unten rückt.*/
	padding: 0 10px;
	text-decoration: none;
	transition-duration: 0.6s; /*notwendig, damit fade-in UND fade-out*/
}

.tabs a:hover{ /*wenn ".tabs a:hover" vor ".tabs a.current", dann kein hover-effekt bei ausgewähltem tab. andersherum schon.*/
	color: #000; /*#808080*/
	transition-duration: 0.6s;
}

.tabs a.current{
	color: #000; /*#808080*/
	/*background: #f7f7f7;*/ /*!!*/
}

.tab-content{
	width: 100%;
	/*text-align: center;*/ /*nötig zum Zentrieren von ".tab"*/
}

.tab{
	width: 100%;
	/*display: inline-block;*/ /*nötig zum Zentrieren von ".tab"*/
	text-align: left; /*nötig zum Zentrieren von ".tab"*/
}

.tab table{
	width: 100%;
	margin: 60px 0 60px 0;
	text-align: center;
}

.tab tr{
	display: inline-block;
	vertical-align: top;
}

td{
	text-align: left;
}

.td-left-2cols{
	width: calc (50% - 20px);
	padding-left: 0px;
}

.td-right-2cols{
	width: calc (50% - 20px);
	padding-left: 40px;
}

.td-left{
	width: calc (50% - 20px);
	padding-left: 0px;
}

.td-right{
	width: calc (50% - 20px);
	padding-left: 40px;
}
/*ENDE Tabs - Des. Lea. jQuery*/

/*boxes*/
.boxes{
	width: 100%;
	height: auto;
	clear: both;
	background: #e8e4e0;
}

.box{
	float: left;
	text-align: center;
}

.fourboxes{
	width: 25%;
	height: 50px; /*80px für konvexes jumbo-img design*/
	/*background: #ccc;*/ /*!!*/

	/*position: relative;
	top: -25px;*/

	/*background: #3b377c;
		background: -webkit-radial-gradient(#464389, #3b377c);
		background: -o-radial-gradient(#464389, #3b377c);
		background: -moz-radial-gradient(#464389, #3b377c);
		background: radial-gradient(#464389, #3b377c);*/
}

.twoboxes{
	width: 50%;
	text-align: left;
}

.twoboxes:nth-child(2){
	width: calc(50% - 20px);
	padding: 10px;
}

/*ENDE boxes*/

.super-box-outer{
	height: 40px;
	width: 600px;
	display: block;
	border: 1px solid rgba(255,255,255,0);
	margin-bottom: 20px;
}

.super-box-img{
	height: 40px;
	width: 40px;
	float: left;
}

#super-box-img1{
	background-image: url("./images/super-box-img1.png");
}

#super-box-img2{
	background-image: url("./images/super-box-img2.png");
}

#super-box-img3{
	background-image: url("./images/super-box-img3.png");
}

#super-box-img4{
	background-image: url("./images/super-box-img4.png");
}

.super-box-txt{
	height: 40px;
	width: calc(100% - 40px);
	line-height: 40px;
	float: left;
}

.tab-img{
	/*margin-bottom: 0px;*/
}

/* Kontaktformular */

input{
	width: 80%;
	height: 20px;
	border: 1px solid #777; /*#b4b4b4*/
	padding: 5px;
	box-shadow: none;
	font-size: 14px;
}

textarea{
	width: 80%;
	border: 1px solid #777; /*#b4b4b4*/
	padding: 5px;
	resize: vertical;
	font-family: Verdana, sans-serif; /*notwendig*/
	font-size: 14px;
}

/*ENDE Kontaktforumular*/

a{
	outline: none; /*entfernt die outline von allen Links. So wird die gepunktete Outline (dotted outline), die fokusierte Objekte umgibt ausgeblendet.*/
	color: #777;
	text-decoration: none;
	transition-duration: 0.6s;
}

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

a:hover, a:active{
	color: #000;
	transition-duration: 0.6s;
	text-decoration: none;
}

a:focus{ /*focus, damit die Website trotz entfernen der Outline (siehe "* {outline: none;}") barrierefrei bleibt.*/
 	color: #000 !important; /*#ffb27f*/
 }