/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* --- Startseite: XMAS  -------------------------------------------------------------------------------- */

div#qs { 
	overflow:				hidden;
	margin:					0.9em 0 0 0;
	width:					95%;
	height:					405px;
	background:				url("../images/animation_bg_qs.png") top left repeat-x;
	-webkit-box-shadow: 	4px 4px 8px rgba(67, 89, 95, 0.3);
	-moz-box-shadow: 		4px 4px 8px rgba(67, 89, 95, 0.3);
	box-shadow: 			4px 4px 8px rgba(67, 89, 95, 0.3);
  	background-color:		white;
	}

/* Baum */
	
#qs div#q1 { 
	display:					inline-block;
	position:					relative;
	top:						1.5em;
	left:						8em;
	width:						203px;
	height: 					285px;
	background:					url("../images/animation_bigQ_1.png") top right no-repeat;
    animation-name: 			move-q1;
    animation-duration: 		3.3s;
	animation-timing-function: 	ease;
	}

@keyframes move-q1 {
    0%   {top: 1.5em;left: 88em;}
	45%  {top: 1.5em;left: 88em;}
    100% {top: 1.5em;left: 8em;}
	}
	

/* Glas */
	
#qs div#q3 { 
	display:					inline-block;
	position:					relative;
	top:						-15.6em;
	left:						26.4em;
	width:						187px;
	height: 					255px;
	background:					url("../images/animation_bigQ_3.png") top right no-repeat;
    animation-name: 			move-q3;
    animation-duration: 		3.8s;
	animation-timing-function: 	ease;
	}

@keyframes move-q3 {
    0%   {top: -15.6em; left: 68em;}
	65% {top: -15.6em;left: 68em;}
    100% {top: -15.6em; left: 26.4em;}
	}



/* Phrase */
	
#qsddd div#qs-phrase { 
	display:					inline-block;
	position:					relative;
	top:						2em;
	left:						2em;
	width:						308px;
	height: 					23px;
	background:					url("../images/animation_phrase_qs.png") top right no-repeat;
	opacity:					0;
    animation-name: 			move-qs-phrase;
    animation-duration: 		7s;
	animation-timing-function: 	ease;
	}

@keyframes move-qs-phrase {
    0%   {opacity: 0;}
	15%  {opacity: 0;}
	35%  {opacity: 1;}
	45%  {opacity: 1;}
	65%  {opacity: 0;}
    100% {opacity: 0;}
	}
	
/* Claim */
	
#qs div#qs-claim { 
	display:					inline-block;
	position:					relative;
	top:						-16.1em;
	left:						2.9em;
	width:						686px;
	height: 					69px;
	background:					url("../images/animation_claim_qs.png") top right no-repeat;
	opacity:					1;
    animation-name: 			move-qs-claim;
    animation-duration: 		2s;
	animation-timing-function: 	ease;
	}

@keyframes move-qs-claim {
    0%   {opacity: 0;top: -16.1em; left: 88em;}
	25%  {opacity: 0;top: -16.1em; left: 28em;}
    100% {opacity: 1;top: -16.1em; left: 2.9em;}
	}


/* ----------------------------------------------------------------------------- */

body {
	background-position: right top;
	background-size: auto;
	background-repeat: repeat;
	background-color: rgba(93, 148, 198, 0.06); /* hellblau */
}

.page-wrapper {
    margin: 0 0.75em 0.75em 0.75em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.04);
}

/* Innenabstand für Inhalte */

header, footer, .main {
    padding: 0 1em;
}

footer {
    padding: 0.6em 1em;
}

/* Semantische Hauptbereiche */

header {
	height: 70px;
}	

header a img {
	height: 180px; /* Grösse Logo */
	padding: 0 1em 1em 1em; /* Einzug für Logo */
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mainContent {
	padding-top: 50px; /* Abstand für Marker*/
    width: 100%;
}

.mainContent section {
	padding-top: 42px; /* Abstand für Hauptinhalt (Titel h2, etc.) */
}

.mainContent section.first_column, .mainContent section.second_column {
	padding-top: 4px; /* Vertikaler Abstand auf Leistungsübersicht verkleinern */
}

.mainContent img {
	width: 100%; /* Grafik spaltenfüllend */
	height: auto;
	padding: 0 0 0 0;
	box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.20); /* schwarz */
}

.first_column i, .second_column i {
	width: 100%; /* Teaser */
	height: 128px;
	padding: 0.4em 0;
	margin-bottom: 0.3em;
	color: rgba(93, 148, 198, 1.00); /* hellblau */
	font-size: 4em;
	text-align: center;
	z-index: -100;
	background-color: rgba(93, 148, 198, 0.06); /* hellblau */
}

.main aside section img {
	width: 100%; /* Grafik spaltenfüllend */
	height: auto;
}

.clearfix::after { /* Korrektur für Doppelspalten */
    content: "";
    clear: both;
    display: table;
}

/* ----------------------------------------------------------------------------- *
 *                          		   Randspalte                                *
 * ----------------------------------------------------------------------------- */
aside section {
	padding-top: 0; /* Nur eine Spalte (mobile), kein Abstand nach oben erforderlich */
    width: 100%;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: contain;
}

#leistungen aside section {
	min-height: 600px;
	background-image: url(../images/aside_5.png);
}

#cdc aside section {
	min-height: 600px;
	background-image: url(../images/aside_3.png);
}

#links aside section {
	min-height: 600px;
	background-image: url(../images/aside_4.png);
}

#kontakt aside section {
	min-height: 600px;
	background-image: url(../images/aside_7.png);
}

#impressum aside section {
	min-height: 600px;
	background-image: url(../images/aside_7.png);
}

/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
h1 {
	margin: 0.6em 0 0.6em 0; /* Abstand nach unten zum Subtitel */
    padding: 0 0;
}

h2 {
    margin: 1.0em 0 1.0em 0;
}

h2:first-child {
    margin-top: 2.0em;
}

h3 {
    margin: 0.40em 0 0.10em 0;
}

aside section h3 {
    padding: 0.20em 0 0.20em 0;
}

aside section {
	margin-bottom: 2.4em;
	border-top: 8px solid rgba(107, 204, 20, 1.00); /* grün */
	padding: 1.00em 0 0 0;
}

/* ----------------------------------------------------------------------------- *
 *                            	     Button 	                                 *
 * ----------------------------------------------------------------------------- */
.button {
    margin: 0.3em 0 1em 0;
	padding: 0.7em 1.5em 0.7em 1.5em;
	display: inline-block;
	width: auto;
	height: auto;
	border: 0.15em solid rgba(107, 204, 20, 1.00); /* grün */
	text-align: left;
	background-color: white; /* white */
}

aside .button {
	padding: 0.4em 0.4em 0.4em 0.4em; /* Randspalte mit  Buttons */
}

aside i.fa {
	width: 2.2em;
	padding-left: 0.3em;
	font-size: 1.1em; /* Icon Awesome */
	text-align: center;
}

.full {
	width: 100%;
}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
nav {
	margin-bottom: 1.2em;
	width: 75%;
}

nav ul {
    margin: 0 1.15em; /* Am Toggle-Button "MENÜ" ausgerichtet */
}

nav ul > li > a, nav ul > li > strong {
    padding: 0.40em 20px;
    display: block;
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 48em) {

	/* Aussenabstand zum Fenster */
	
	.page-wrapper {
    	margin: 0 1.15em 1.15em 1.15em;
	}
	
	nav ul li a {
		color: rgba(0, 0, 0, 0.50); /* schwarz */
	}
	
    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
        overflow: hidden;
    }

	.main {
		background-position: right top; /* Topvisual rechts bündig */
	}
	
    .mainContent {
        width: 60%;
        float: left;
        border-top: none;
    }

	/* Innenabstand für Inhalte */

	header, footer, .main {
    	padding: 0 1.25em;
	}

	footer {
    	padding: 0.6em 1.25em;
	}
	
	/* Größenanpassungen */
	
	header {
		height: 6px;
	}
	
	header a img {
   		height: 210px;
	}
	
	nav {
		margin-top: 0.10em;
		margin-bottom: 1.00em;
		width: 80%;
	}
	
    aside {
		margin-top: 24.5em;
		padding-left: 5.3%; /* Abstand zum Inhalt der Hautspalte setzen */
        width: 40%;
        margin-left: 60%;
        /* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
        margin-bottom: -99999px !important;
        padding-bottom: 99999px !important;
    }
	
	#leistung aside {
		border: 0; /* Keine Linie (nur bei Mobile) */
	}
	
	.button {
		padding: 0.1em 1.4em 0.1em 1.4em;
	}
	
	
    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
        overflow: hidden;
        font-size: 0.90em; /* 18px */
    }

    nav ul {
        margin: 0 20px;
    }

    nav ul li {
        float: left;
		margin: 0 0.8em;
        border: none;
        width: auto;
		background-color: rgba(255, 255, 255, 1.00); /* weiss - hellblau für Mobile rückgängig machen */
    }

    nav ul > li > a {
        padding: 0.2em 0 0.2em 0;
        display: inline-block;
		color: rgba(107, 204, 20, 1.00); /* grün */
    }
	
	nav ul li a#current {
		border-bottom: 3px solid rgba(107, 204, 20, 1.00); /* grün */
		color: rgba(107, 204, 20, 1.00); /* grün */
		background-color: white; /* weiss */
	}

	nav ul li a:hover {
		border-bottom: 3px solid rgba(0, 0, 0, 1.00); /* schwarz */
		color: rgba(0, 0, 0, 1.00); /* schwarz */
		background-color: white; /* weiss */
	}

}

/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 64em) {

	/* Aussenabstand zum Fenster */
	
	.page-wrapper {
    	margin: 0 1.75em 1.75em 1.75em;
	}
	
	nav {
		border-left: 0em solid rgba(107, 204, 20, 1.00); /* grün */		
    	font-size: 1.00em; /* Schrift vergrössern */
	}
	
	/* Innenabstand für Inhalte */

	header, footer, .main {
    	padding: 0 1.75em;
	}

	footer {
    	padding: 0.6em 1.75em;
	}
	
    /* Größenanpassungen */
	
	header a img {
    	height: 240px;
	}
	
    .mainContent {
        width: 65%;
    }

    aside {
        width: 35%;
        margin-left: 65%;
    }
			
	section.first_column {
        width: 50%;
		padding-right: 3%;
        float: left;
        border-top: none;
    }
		
    section.second_column {
		padding-left: 3%; /* Abstand zum Inhalt der Hautspalte setzen */
        width: 50%;
        margin-left: 50%;
        /* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
        margin-bottom: -99999px !important;
        padding-bottom: 99999px !important;
    }
	
    footer {
        clear: left;
    }
	
	#overview #x1, #overview #x2, #overview #x3, #overview #x4, #overview #x5, #overview #x6 {
		padding: 0.8em 1.2em;
		font-size: 1.15em; /* Schrift grösser als für Smartphone */
	}

	#call {
		height: 400px;	
	}
	
}
/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 88em) {
   
	 /* Größenanpassungen */
	
	.page-wrapper {
        margin: 0 auto; /* Einmitten */
		margin-bottom: 2em; /* Abstand nach zum unteren Fensterrand */
        max-width: 78em; /* Muss unbedingt kleiner sein als min-width! */
    }
}


/* ----------------------------------------------------------------------------- *
 *                      Beispiel Responsive-Nav im Basis-Layout                  *
 * ----------------------------------------------------------------------------- */
/* responsive-nav.js v1.0.14 by @viljamis - start */
/*
 #nav ul {
     margin: 0;
     padding: 0;
     width: 100%;
     display: block;
     list-style: none;
 }
 #nav li {
     width: 100%;
     display: block;
 }
 */
.js #nav {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: hidden;
    zoom: 1;
}

#nav.opened {
    max-height: 9999px;
}
/* responsive-nav.js v1.0.14 by @viljamis - ende */

/*
 * Eigene Anpassungen für den Toggle-Button
 */
#nav-toggle {
    display: inline-block;
    position: absolute;
    left: 1.85em;	
    top: 0.80em;
    cursor: pointer;
    padding: 0.35em 0.4em 0.35em 0.4em;
    color: white;
    background-color: rgba(107, 204, 20, 1.00); /* grün */
}

#nav-toggle:hover {
    background: rgba(0, 0, 0, 0.80); /* schwarz */
    color: white;
}

/* ----------------------------------------------------------------------------- *
 *                  Beispiel Responsive-Nav im im Desktop-Layout                 *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 48em) {
    /* responsive-nav.js v1.0.14 by @viljamis - start */
    .js #nav {
        position: relative;
    }

    .js #nav.closed {
        max-height: none;
    }

    #nav-toggle {
        display: none;
    }

    /* responsive-nav.js v1.0.14 by @viljamis - ende */
}