/* ----------------------------------------------------------------------------- * 
 *                      Atmosphäre: Farben und Schriften                         *
 *          Alle weiteren Styles stecken in der jeweiligen layout.css            *
 * ----------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------- * 
 * Verwendete Farben
 * 93,148,198 - hellblau
 * 107,204,20 - grün
 * 2,107,64 - dunkelgrün
 * 255,127,0 - orange
 * ----------------------------------------------------------------------------- */

html    {
    font-size: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.10em; 
    line-height: 1.5em; 
}

.page-wrapper {
	margin: 0 auto;
	background-color: white;
}

header {
	text-align: right;
}

.main {
	color: rgba(0, 0, 0, 0.80); /* schwarz */
}

footer {
	border-top: 4px solid rgba(107, 204, 20, 1.00); /* grün */
	font-size: 0.9em;
    text-align: right;
}

footer.hello {
	padding: 0 0 1em 0;
	color: white;
	font-size: 1.2em;
    text-align: left;
	background-color: rgba(93, 148, 198, 0.00); /* hellblau */
}

footer.hello i {
	color: rgba(107, 204, 20, 1.00); /* grün */
	font-size: 1.3em;
}

footer.hello a {
	color: white;
}

/* ----------------------------------------------------------------------------- * 
 *                         		  Animations     	                             *
 * ----------------------------------------------------------------------------- */
#call {
	overflow: hidden;
	position: relative;  /* Ancestor (äusseres Element, das absolut positionierte Elemente enthält) muss relativ positioniert sein, sonst beziehen sich absolute Koordinaten auf Viewport */
	width: 100%;
	height: 250px;	
	background-color: rgba(93, 148, 198, 0.05); /* hellblau */
}

#call #y1 {
	display: inline-block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 50%;
	height: 99%;
	z-index: 10;
	background-image: url(../images/cdc_worker.png);
	background-size: 58%;
	background-repeat: no-repeat;
	background-position: center center;
	animation-name: move-y1;
	animation-duration: 3.5s;
	animation-timing-function: ease;
}

@keyframes move-y1 {
    0%   {background-size: 0%;}
	75%   {background-size: 0%;}
    90%   {background-size: 64%;}
    100% {background-size: 58%;}
}

#call #y2 {
	display: inline-block;
	position: absolute;
	top: -18%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(93, 148, 198, 0.08); /* hellblau */
	animation-name: move-y2;
	animation-duration: 3.25s;
	animation-timing-function: ease;
}

@keyframes move-y2 {
    0%   {left: -200%; top: -98%; background-color: rgba(107, 204, 20, 1.00);}
    30%   {left: 0%; top: -98%; background-color: rgba(107, 204, 20, 1.00);}
    50%   {left: 0%; top: 0%; background-color: rgba(107, 204, 20, 1.00);}
    66%   {left: 0%; top: 0%; background-color: rgba(93, 148, 198, 1.00);}
    72%   {left: 0%; top: 0%; background-color: rgba(93, 148, 198, 0.80);}
    80%   {left: 0%; top: -25%; background-color: rgba(93, 148, 198, 0.60);}
    90% {left: 0%; top: -18%; background-color: rgba(93, 148, 198, 0.08);}
}

#call #y3 {
	display: inline-block;
	position: absolute;
	top: 0%;
	right: -6%;
	width: 80%;
	height: 99%;
	z-index: 10;
	background-image: url(../images/cdc_bubble.png );
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center center;
	animation-name: move-y3;
	animation-duration: 4.25s;
	animation-timing-function: ease;
}

@keyframes move-y3 {
    0%   {right: -100%;}
	82%   {right: -100%;}
    90% {right: -5.25%;}
    94% {right: -6%;}
}

#overview {
	overflow: hidden;
	position: relative;  /* Ancestor (äusseres Element, das absolut positionierte Elemente enthält) muss relativ positioniert sein, sonst beziehen sich absolute Koordinaten auf Viewport */
	width: 100%;
	height: 400px;	
	background-color: rgba(255, 255, 255, 1.00); /* weiss */
}

#overview #x1, #overview #x2, #overview #x3, #overview #x4, #overview #x5, #overview #x6 {
	display: inline-block;
	position: absolute;
	padding: 0.5em 0.5em;
	font-size: 1.10em;
	font-weight: 600;
	color: rgba(2, 107, 64, 1.00); /* dunkelgrün */
	animation-timing-function: ease;
}

#overview #x1, #overview #x4 {
	background-color: rgba(93, 148, 198, 0.20); /* hellblau */
}

#overview #x2, #overview #x5 {
	background-color: rgba(93, 148, 198, 0.30); /* hellblau */
}

#overview #x3, #overview #x6 {
	background-color: rgba(93, 148, 198, 0.40); /* hellblau */
}

#overview #x1:hover, #overview #x2:hover, #overview #x3:hover, #overview #x4:hover, #overview #x5:hover, #overview #x6:hover {
	color: rgba(255, 255, 255, 1.00); /* weiss */
	background-color: rgba(107, 204, 20, 1.00); /* grün */
}

#overview #x1 {
	top: 0%;
	left: 0%;
	width: 49.5%;
	height: 32%;
	z-index: 1;
	text-align: left;
	animation-name: move-x1;
	animation-duration: 3s;
}

@keyframes move-x1 {
    0%   {left: -42em;}
    65%   {left: -42em;}
    100% {left: center;}
}

#overview #x2 {
	top: 33.833%;
	left: 0%;
	width: 49.500%;
	height: 32.333%;
	z-index: 2;
	text-align: left;
	animation-name: move-x2;
	animation-duration: 3.5s;
}

@keyframes move-x2 {
    0%   {left: -40em;}
    70%   {left: -40em;}
    100% {left: 0%;}
}

#overview #x3 {
	top: 67.666%;
	left: 0%;
	width: 49.500%;
	height: 32.333%;
	z-index: 3;
	text-align: left;
	animation-name: move-x3;
	animation-duration: 3.75s;
}

@keyframes move-x3 {
    0%   {left: -40em;}
    75%   {left: -40em;}
    100% {left: 0%;}
}

#overview #x4 {
	top: 0%;
	right: 0%;
	width: 49.500%;
	height: 32.333%;
	z-index: 4;
	text-align: right;
	animation-name: move-x4;
	animation-duration: 3s;
}

@keyframes move-x4 {
    0%   {right: -40em;}
    65%   {right: -40em;}
    100% {right: 0%;}
}

#overview #x5 {
	top: 33.833%;
	right: 0%;
	height: 32.333%;
	width: 49.500%;
	z-index: 5;
	text-align: right;
	animation-name: move-x5;
	animation-duration: 3.5s;
}

@keyframes move-x5 {
    0%   {right: -40em;}
    70%   {right: -40em;}
    100% {right: 0%;}
}

#overview #x6 {
	top: 67.666%;
	right: 0%;
	width: 49.500%;
	height: 32.333%;
	z-index: 6;
	text-align: right;
	animation-name: move-x6;
	animation-duration: 3.75s;
}

@keyframes move-x6 {
    0%   {right: -40em;}
    75%   {right: -40em;}
    100% {right: 0%;}
}

#overview #x7 {
	display: inline-block;
	position: absolute;
	top: 10%;
	left: 30%;
	width: 40%;
	height: 80%;
	z-index: 100;
	background-image: url(../images/overview_house.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center center;
	animation-name: move-x7;
	animation-duration: 2.25s;
	animation-timing-function: ease;
}

@keyframes move-x7 {
    0%   {background-size: 0%;}
	40%   {background-size: 0%;}
    73%   {background-size: 100%;}
    82% {background-size: 60%;}
    98% {background-size: 80%;}
}

/* ----------------------------------------------------------------------------- * 
 *                         		  Topvisuals                        	         *
 * ----------------------------------------------------------------------------- */

.main {
	background-position: right top;
	background-size: auto;
	background-repeat: repeat-x;
	background-image: url(../images/topvisual_01.jpg);
}

#leistungen .main {
	background-image: url(../images/topvisual_02.jpg);
}

#leistung1 .main {
	background-image: url(../images/topvisual_02a.jpg);
}

#leistung2 .main {
	background-image: url(../images/topvisual_02b.jpg);
}

#leistung3 .main {
	background-image: url(../images/topvisual_02c.jpg);
}

#leistung4 .main {
	background-image: url(../images/topvisual_02d.jpg);
}

#leistung5 .main {
	background-image: url(../images/topvisual_02e.jpg);
}

#leistung6 .main {
	background-image: url(../images/topvisual_02f.jpg);
}

#cdc .main {
	background-image: url(../images/topvisual_03.jpg);
}

#links .main {
	background-image: url(../images/topvisual_04.jpg);
}

#kontakt .main {
	background-image: url(../images/topvisual_05.jpg);
}

#impressum .main {
	background-image: url(../images/topvisual_06.jpg);
}


/* ----------------------------------------------------------------------------- * 
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */

h1, h2, h3, h4, .button  {
    font-family: 'Titillium Web', sans-serif; /* Google-Font XXXXXX wenn verfügbar, sonst Fallback */
    font-style: normal;
    line-height: 1.45em; 
}

h1  {
	display: inline-block; /* Adapts to actual width of content */
	width: auto;
    font-size: 2.4em; 
	color: rgba(255, 255, 255, 1.00); /* weiss */
}


h1 .firstline  {
	display: inline-block;
	margin-bottom: 2px;
	padding: 0 0.45em 0.1em 0.45em;
    font-size: 0.9em;
	font-weight: 200;
	letter-spacing: 0.5px;
	background-color: rgba(107, 204, 20, 0.80); /* grün */
}

h1 .secondline  {
	display: inline-block;
	padding: 0 0.45em 0.1em 0.45em;
    font-size: 0.9em;
	font-weight: 200;
	background-color: rgba(107, 204, 20, 0.80); /* grün */
}

#leistungen h1 .firstline, #leistungen h1 .secondline, #leistung1 h1 .firstline, #leistung1 h1 .secondline, #leistung2 h1 .firstline, #leistung2 h1 .secondline, #leistung3 h1 .firstline, #leistung3 h1 .secondline, #leistung4 h1 .firstline, #leistung4 h1 .secondline, #leistung5 h1 .firstline, #leistung5 h1 .secondline,  #leistung6 h1 .firstline, #leistung6 h1 .secondline {
	background-color: rgba(43, 148, 198, 0.80); /* blau */
}

#cdc h1 .firstline, #cdc h1 .secondline  {
	background-color: rgba(255, 240, 0, 0.80); /* gelb */
}

#kontakt h1 .firstline, #kontakt h1 .secondline  {
	background-color: rgba(130, 86, 255, 0.80); /* violett */
}

#impressum h1 .firstline, #impressum h1 .secondline  {
	background-color: rgba(43, 148, 198, 0.80); /* blau */
}

h2  {
    font-size: 2.40em; 
	font-weight: normal;
    color: rgba(2, 107, 64, 1.00); /* dunkelgrün */
}

h3  {
    font-size: 1.55em; 
    font-weight: 400;
	color: rgba(2, 107, 64, 1.00); /* dunkelgrün */
	letter-spacing: 0.5px;
}

h4  {
    font-style: normal;
    font-size: 1.20em; 
}

hr {
    margin: 1.35em 0 1.10em 0;
	color: rgba(0, 0, 0, 0.10); /* schwarz */
}

#links .main hr {
    margin: 0.55em 0 0.55em 0;
	color: rgba(0, 0, 0, 0.06); /* schwarz */
}

div#marker  {
	display: inline-block; /* Adapts to actual width of content */
	width: auto;
	margin: 0;
	padding: 0.50em 0.80em;
	text-transform: uppercase;
    font-size: 1.00em; /* 22px */
    font-weight: 800;
	background-color: rgba(0, 0, 0, 1.00); /* schwarz */
}

div#marker a {
	color: white;
	text-decoration: none;
}	

div.graphics  {
	display: inline-block; /* Adapts to actual width of content */
	width: 100%;
	margin: 0.5em 0 0.4em 0;
	padding: 0.6em 0 0.6em 0.7em;	
    text-align: left;
	transform: uppercase;
    font-size: 0.90em; 
    font-weight: normal;
	color: rgba(2, 107, 64, 1.00); /* dunkelgrün */
	background-color: rgba(2, 107, 64, 0.06); /* dunkelgrün */
}

.highlight {
	border-bottom: 3px solid rgba(93, 148, 198, 0.60); /* hellblau */
}

.icon  {
	display: inline-block; /* Adapts to actual width of content */
	float: left;
	width: 120px;
	height: 120px;
	margin: 0.1em 0.5em 0.5em 0;
	padding: 0.75em 0;
	color: rgba(2, 107, 64, 1.00); /* dunkelgrün */
    font-size: 2.60em; /* xxxx */
	text-align: center;
	background-color: rgba(93, 148, 198, 0.10); /* hellblau */
}


.number  {
	display: inline-block; /* Adapts to actual width of content */
	float: left;
	width: auto;
	margin: 0 0.3em 0 0;
	padding: 0.25em 0;
	color: rgba(2, 107, 64, 1.00); /* dunkelgrün */
    font-size: 3.60em; /* xxxx */
	text-align: left;
}

.otherside {
	float: right;
	margin: 0 0 0 0.3em;
	text-align: right;
}

/* ----------------------------------------------------------------------------- * 
 *                           		  Tabelle     	                             *
 * ----------------------------------------------------------------------------- */
	
table {
    border-collapse: collapse;
    width: 100%;
	margin-top: 1.2em;
}

td {
	padding: 0.35em 1em 0.35em 0; /* nach rechts Zwischenraum zwischen Spalten! */
   	border-top: 1px solid rgba(0, 0, 0, 0.10); /* schwarz */
   	border-bottom: 1px solid rgba(0, 0, 0, 0.10); /* schwarz */
    vertical-align: top;
	font-size: 0.9em;
    text-align: left;
}

td:nth-of-type(3) { /* Breite für dritte Spalte für alle Abschnitte (tables) gleich breit (Seite Links) */
	width: 30%;
}

tr:hover {
	background-color: rgba(107, 204, 20, 0.05); /* grün */
}

/* ----------------------------------------------------------------------------- * 
 *                           		  Listen     	                             *
 * ----------------------------------------------------------------------------- */

.fa-ul li i {
    padding: 0.16em 0.05em 0 0.05em; /* Korrektur Position */
	font-size: 1.15em;
	color: rgba(93, 148, 198, 1.00); /* hellblau */
}

.fa-ul li {
    padding: 0.15em 0 0.25em 0; /* Abstand zwischen Items */
}

aside .button i {
    padding: 0 0.10em 0 0.10em; /* Korrektur Position */
	font-size: 2.0em;
	color: rgba(107, 204, 20, 1.00); /* grün */
}

#links .main i {
    padding: 0 0.10em 0 0.10em; /* Korrektur Position */
	font-size: 1.05em;
	color: rgba(0, 0, 0, 0.15); /* schwarz */
}

ul, ol {
    padding: 1em 0;
    margin: 0 0 0.625em 20px;
	list-style-type: square;
}

/* ----------------------------------------------------------------------------- * 
 *                             Buttons und Links     	                         *
 * ----------------------------------------------------------------------------- */

.button  {
    font-size: 1.2em; 
	line-height: 3.2em;
    font-weight: normal;
	white-space: nowrap;
    color: rgba(107, 204, 20, 1.00); /* grün */
}

aside .button  {
	line-height: 2.1em;
}

.button:hover {
	border-color: rgba(107, 204, 20, 1.00); /* grün */
	color: white;
	background-color: rgba(107, 204, 20, 1.00); /* grün */
}

aside .button:hover i {
	color: white;
}

aside a .selected {
	border-color: rgba(93, 148, 198, 1.00); /* hellblau */ 
	color: rgba(255, 255, 255, 1.00); /* weiss */
	background-color: rgba(93, 148, 198, 1.00); /* hellblau */ 
}

aside a .selected i {
	color: rgba(255, 255, 255, 1.00); /* weiss */
}

a:link, a:visited { /* URL, E-Mail-Adressen, etc. */
	color: rgba(107, 204, 20, 1.00); /* grün */
    text-decoration: none;
}

ul.main-nav a:link, ul.main-nav a:visited {
	color: rgba(0, 0, 0, 1.90); /* schwarz */
    text-decoration: none;
}

a:hover, a:focus, a:active {
	color: rgba(107, 204, 20, 1.00); /* grün */
}

#links .main a:hover, a:focus, a:active { /* Linksammlung mit underline */
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------- * 
 *                                    Navigation                                 *
 * ----------------------------------------------------------------------------- */

nav {
    font-family: 'Ubuntu', sans-serif;
	font-weight: 800;
    font-size: 0.95em; 
	text-transform: uppercase;
	border-left: 0; /* Kein Balken bei Mobile */
}

nav ul li {
    list-style: none;
	background-color: rgba(194, 210, 229, 0.20); /* hellblau - nur für Mobile */
}

nav ul li a#current {
	border-bottom: 3px solid rgba(255, 255, 255, 1.00); /* weiss */
	color: rgba(255, 255, 255, 1.00); /* weiss */
	background-color: rgba(107, 204, 20, 1.00); /* grün */
}

nav ul li a:link, nav ul li a:visited {	
	border-bottom: 3px solid rgba(255, 255, 255, 1.00); /* weiss */
}

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