@charset "utf-8";
/* CSS Document */

/* Mobile: 1318, iPad: 2600 , Desktop small: 3805, Desktop big: 5076 , ProjektInsta: */

@font-face { font-family: "Bank Gothic Light";
    src: url("../fonts20/bgothl.ttf") format("truetype");
}

.cssTest{
    width: 100%;
    color: red;
    border: solid;
    border-color: red;
}

body {
	font-size: 100%;
	color: gray;
	}

.voBoTnLo1 {
	display: none;
}

ul {
	list-style-type: none; /* alle Punkte werden entfernt */
	}

a 	{
	text-decoration: none; /* alle Unterstriche unter Anker werden entfernt */
	}

* { /* Diese Einstellung gelten für die gesamte Site */
	box-sizing: border-box;
	border: solid;
	border-width: 0px;
	border-color:yellow;
	margin: 0;
	padding: 0;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS";
/*	font-family: "calibri"; */
	}

#loader {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 6;
	margin: -75px 0 0 -75px;
	border: 16px solid orange;
	border-radius: 50%;
	border-top: 16px solid white;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  	0% { -webkit-transform: rotate(0deg); }
  	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  	0% { transform: rotate(0deg); }
  	100% { transform: rotate(360deg); }
}

.boWa1{
	width: 100%;
	padding: 2% 1% 2% 1%;
	margin: 0% 0% 0% 0%;
	position: absolute;
	z-index: 6;
	background-color: white;
/*	visibility: */
}

.boWaBi1{
	width: 20%;
	margin: 3% 0% 3% 40%;
}

.boWaTe1{
	font-family: Bank Gothic Light;
	text-align: center;
	font-size: 2.5vw;
	margin-top: 0%;
}

.boWaTe2{
	text-align: center;
	font-size: 1.8vw;
}

#heMaFo {
	width: 100%;
	border: solid;
	border-color:red;
	border-width: 0px;
	padding: 0.5%;
	background-image: url(../bilder20/farben/ws1.png)
	}
	
#heMaFo:after {
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.naCoUl2 {
	text-decoration-line: none;
	width: 100%;
}

.naTe2 {
	float:left;
	text-transform: uppercase;
	text-decoration-line: none;
}

.naTe2 a{
	color: black;
	font-weight: 400;
}

/***************************************************************/
/*                                                             */
/*                            Header                           */
/*                                                             */
/***************************************************************/

#he1 {
	width: 100%;
	border-color: orange;
	border-width: 0px;
	padding: 0%;
	}
	
#he1:after {
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

#tnLo1 {
	width: 15.4%;
}

#RpPi1 {
	float: left;
	width: 2.6%;
	padding-right: 0%;
	margin-right: 0%;
}

.heBi {
	float: left;
}

#cycler1 img.active1, #cycler2 img.active2, #cycler3 img.active3, #cycler4 img.active4, #cycler5 img.active5{
	z-index:3;
}

/* Headerbilder- Container */

#heBiCo1 {
	float: left;
	border-color: aqua;
	border-width: 0px;
}

#heBiCo1:after {
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

.hehe1 { /* Header-Headline 1 */
	text-align: center;
	text-transform: uppercase;
}
	
.hehe2 { /* Header-Headline 2 */
	text-align: center;
	text-transform: uppercase;
}
	
.hehe3 { /* Buchstabe "o" */
	text-align: center;
	text-transform: lowercase;
}

.hehe4 { /* Wort "smart" */
	text-align: center;
	text-transform: uppercase;
}

/***************************************************************/
	
.hehe5 {
  display: block;
  float: left;
}

.hehe7 {
  display: block;
  float: left;
}
	
.hehe8 {
  display: block;
  float: left;
}
	
/***************************************************************/

.heheCo0 {
	width: 99%;
	float: left;
	border-color: green;
	border-width: 0px;
	background-color: #f0f0f0;
	margin: 5.5% 0.5% 4.0% 0.5%;
	padding: 1.5% 1.0% 1.5% 1.0%;
}

/***************************************************************/
/*                                                             */
/*                             Main                            */
/*                                                             */
/***************************************************************/		

.naCo2 { /* Navigations-Container 2*/
	display: block;
	border-color: aqua;
	border-width: 0px;
	float: left;
}

.naCo2:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.naCoUl2 {
	display: block;
	border-color: aqua;
	border-width: 0px;	
}

.naCoUl2:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.maCo0 { /* Main-Container */
	display: block;
	width: 100%; 
	border-color: green;
	border-width: 0px;
	margin-bottom: 0.0%;
}

.maCo0:after { /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.maCoTe0, .maCoTe0Insta { /* Überschrift zum Main-Container*/
	float: left;
	text-transform: uppercase;	
}

.roSt0, .roSt0Insta {  /* roter Strich unter Überschrift */
	border: solid;
	border-width: 4px 0px 0px 0px;
	border-color: orange;
}

.maCoPr0 {
	width: 100%;
	float: left;
	border-width: 0px;
	border-color: blue;
}

.maCoInCo1, .maCoInCo2, .maCoInCo3, .maCoInCo4, .maCoInCo5, .maCoInCo6 { /* Main-Container-Inhalts-Container */
	display: block;
	width: 30.3%;
	float: left;
	border: solid;
	border-width: 0px;
	border-color: aqua;
}

.maCoInCo1:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.maCoIn1 {
	display: block;
	width: 100%;
	background-color: black;
}
	
.maCoInBi1 {
	display: block;	
	z-index: 1;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	border: solid;
	border-color: red;
	border-width: 0px;	
}

.maCoInTeCo1 {
	z-index: 2;
	display: block;
	width: 33.3%;
	position: absolute;
	border: solid;
	border-color: yellow;
	border-width: 0px;
	padding: 7.0% 0.0% 0.0% 0.0	
	}

.maCoInTe1, .maCoInTe2, .maCoInTe3, .maCoInTe4 {
	width: 100%;
	opacity: 0;
	color: white;
	text-align: center;
}

.maCoInTe1, .maCoInTe2 {
	text-transform: uppercase;
}

.maCoIn1:hover p {
	opacity: 1;
	-webkit-transition:all 0.50s ease-in-out;
	-moz-transition:all 0.50s ease-in-out;
	-o-transition:all 0.50s ease-in-out;
	-ms-transition:all 0.50s ease-in-out;	
	transition: all 0.50s ease-in-out;
	
}

.maCoIn1:hover, .maCoIn1:active p {
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}

.maCoIn1:hover {
	-webkit-transition:all 0.50s ease-in-out;
	-moz-transition:all 0.50s ease-in-out;
	-o-transition:all 0.50s ease-in-out;
	-ms-transition:all 0.50s ease-in-out;	
	transition: all 0.50s ease-in-out;	
	background-color: black;
}

.maCoIn1:hover, .maCoIn1:active {
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}
	
.maCoIn1:hover img {
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	-o-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
	opacity: 0.5;	
}

.maCoIn1:hover, .maCoIn1:active img {
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}

.maCoIn1:hover .maCoInBi1 {
	-webkit-transition:all 0.50s ease-in-out;
	-moz-transition:all 0.50s ease-in-out;
	-o-transition:all 0.50s ease-in-out;
	-ms-transition:all 0.50s ease-in-out;	
	transition: all 0.50s ease-in-out;
}

.maCoIn1:hover, .maCoIn1:active .maCoInBi1 {
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}

.maCoInBiZo1 img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition:all 0.50s ease-in-out;
	-moz-transition:all 0.50s ease-in-out;
	-o-transition:all 0.50s ease-in-out;
	-ms-transition:all 0.50s ease-in-out;	
	transition: all 0.50s ease-in-out;	
}

.maCoInNu1 { /* Projektbezeichnung unter den Projektbildern*/
	background-color: #D5D5D5;
	text-align: center;
	color: white;
	text-transform: uppercase;
}

.maCoInReMe{
	display: block;
	width: 95.8%;
	float: left;
	text-transform: uppercase;
	border-width: 0px;
	border-color: black;
	margin-left: 2.0%;
	text-align: right;
	color: orange;
}

/* Projekt-Karten */

.maCoPrKa0 {
	display: block;
}

.maCoPrKa0:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.maCoPrUe1 {
	float: left;
}


.maCoPrUe2 {
	float: left;	
	color: orange;
	font-weight: 600;
}

.maCoPrUe3 {
	float: left;	
	font-weight: 400;
}

.maCoUe1 {
	float: left;
}

.maCoUe2, .maCoUe2Insta {
	color: orange;
}

.maCoUe3, .maCoUe3Insta {	
}

.maCoPrDl1 {
	float: right;
}

.maCoPrDl2 {
	float: right;
}

.roSt1 {
	float: left;
}

.maCoPrGrBiTe0 {
	float: left;	
}

.maCoPrGrBi1 {
	float: left;
	opacity: 1;
}

.maCoPrGrBiBeTe1, .maCoPrGrBiBeTe2 { /* Beschreibungstext unter dem großen Bild */
	width: 100%;
	float: left;
	background-color: #D5D5D5;
	text-transform: uppercase;
	color: black;	
}

.maCoPrKlBiCo1 {
	display: block;
	float: left;
	width: 100%;
}

.maCoPrKlBiZo1 {
	position: absolute;
	width: 3%;
	border-color: red;
	border-width: 0px;
	margin-top: 0.50%;
	margin-bottom: 0.00%;
	margin-left: 1.50%;
	margin-right: 0.00%;
}

.maCoPrKlBi0 {
	float: left;
}

.maCoPrKlBi1 {
	float: right;
}

.maCoPrKlBiBeTe1, .maCoPrKlBiBeTe2 { /* Beschreibungstext unter den kleinen Bildern */
	width: 100%;	
	float: left;
	background-color: #D5D5D5;
	text-transform: uppercase;
	color: black;
}

.maCoPrTe1 {
	float: left;
}

.maCoPrTe2 {
	float: left;
}

.maCoPrTe3 {
	float: left;
}

.maCoPrTe4 {
	float: left;
}

	
.maCoPrTe5 {
	float: left;	
}

.maCoPrLi1 {
	float: right;
}

/********************** News / Referenzen **********************/
/***************************************************************/

.maCoNeRe0 {
	float: left;
}

.maCoNeRe0:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.maCoNeRe1 {
	float: left;
}

.maCoNeReIm0 { /* Einstellungen für Bilder in den News / Referenzen */
	float: left;
	border-color: aqua;
	border-width: 0px;
}

.maCoNeReIm1 { /* Einstellungen für Bilder in den News / Referenzen */
	float: right;
	border-color: aqua;
	border-width: 0px;
}

.maCoNeReTeCo1 {
	float: left;
	border-color: aqua;
	border-width: 0px;	
}

.maCoNeReDa1 { /* Einstellungen für das Datum in den News */
	float: left;
}

.maCoNeReDa2 { /* Einstellungen für das Datum in den Referenzen */
	float: left;
	font-weight: 700;	
}

.maCoNeReTeHe1 { /* Einstellungen für den text in den News / Referenzen */
	float: left;
	font-weight: 700;
}

.maCoNeReTe1 { /* Einstellungen für den Text in den News / Referenzen */
	float: left;
}

.maCoNeReLi1 { /* Einstellungen für den Link in den News / Referenzen */
	float: right;
}

.maCoNeReCo1 {
	float: left;
}

.maCoNeReCo1:after { /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}
	
.maCoNeReImTe0 { /* Einstellungen für den Text in den News / Referenzen */
	float: left;	
}

/***************************** Profil **************************/

.prCo0 { /* Profil Container*/
	float: left;
}

.prCo0:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.prBe0 { /*Profil Bereich */
	float: left;
}

.prBe1 { /*Profil Bereich */
	float: left;
}

.prBeTe0 { /*Profil Bereich Text0 */
	float: left;
}

.prBeTe1 { /*Profil Bereich Text1 */
	float: left;
}

.prBeTe2 { /*Profil Bereich Text2 */
	float: left;
}

.prBeEn1 { /*Profil Bereich Ende1 */
	float: left;
}

/*************************** Partner ***************************/

.maPaCo0 {
	float: left;
}

.maPaCo1 {
	float: left;
	background-color: #f8f8f8;
}

.maPaWs1 {
	float: left;	
}

.maPaBi1 {
	float: left;
	border-color: grey;
	border-width: 1px;	
}

.maPaTe0 {
	float: left;	
}

.maPaTe1 {
	float: left;	
}

.maPaTePa1 {
	float: left;
	display: block;
}

.maPaTePa2 {
	float: left;	
	display: block;
}

/********************** Main Google Maps ***********************/

.maGoMa0 {
	width: 100%;
}

.maGoCo1 {
	display: block;
	float: left;
	width: 97%;
	height: 600px;
	border-color: #D4D4D4;
	border-width: 1px;
	margin-left: 1.45%;
}

.maGoCo1:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.maGoMa1, .maGoMa2 {
	position: absolute;
}

.maGoMa1 {
	z-index: 2;
}

.maGoMa2 {
	z-index: 1;
}

.maGoMaTe0 {
	width: 100%;
	margin-left: 1.45%;
}

.maGoMaTe1, .maGoMaTe2 {
	border-color:#D4D4D4;
	border-width: 1px;
	background-color: #F3F3F3;
	color: grey;
	opacity: 1;
	float: left;
	width: 27.50%;
	margin: 0.00% 0.00% 0.00% 0.0%;
	padding: 1.00% 1.00% 1.20% 1.00%;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	border-top-right-radius: 25px;
}

.maGoMaTe2{
	background-color:#ffe3b0;
}

/*********************** Main Downloads ************************/

.maDoCo0{ /* Main Download Container */
	float: left;
}

.maDoUlCo1{ /* Main Download Unsortierte Liste Container */
	float: left;
}

.maDoUlKa1{ /* Main Download Unsortierte Liste Kategorie */
	float: left;
	text-transform: uppercase;
	color: orange;
}

.maDoUlKa11{ /* Main Download Unsortierte Liste Kategorie */
	float: left;
	text-transform: uppercase;
	color: orange;
}

.maDoUlKa12{ /* Main Download Unsortierte Liste Kategorie */
	float: left;
	text-transform: uppercase;
	color: orange;
}

.maDoLiEl1{ /* Main Download Listen Element */
	float: left;
}

.maDoLiEl11{ /* Main Download Listen Element */
	float: left;
}

.maDoLiElBi1{ /* Main Download Listen Element Bild */
	float: left;
	border-color: grey;
	border-width: 1px 1px 0px 1px ;
}

.maDoLiElTeCo1{
	float: left;
}

.maDoLiElTe1{ /* Main Download Listen Element Text */
	float: left;
	color: orange;
}

.maDoLiElTe2{ /* Main Download Listen Element Text */
	float: left;
	color: grey;
}

.maDoLiElTe3{ /* Main Download Listen Element Text */
	float: left;
	color: orange;
	text-transform: uppercase;
}

.maDoLiElTe4{ /* Main Download Listen Element Text */
	float: left;
	color: grey;
}

.maDoPf1, .maDoPf2, .maDoPf3, .maDoPf4, .maDoPf5 {
	float: left;
}

/*************************** Kontakt ***************************/

.maKoBi1, .maKoBi2, .maKoCo0, .maKoCo1, .maKoCo2, .maKoCo3, 
.maKoTe0, .maKoTe1, .maKoTe2, .maKoTe3, .maKoTe4, .maKoTe0Te1 
.maKoTe0Te2, .maKoQr1, .maKoWs1 {
	display: block;
	float: left;
	width: 100%;
}

/***************************************************************/

/** Profil, Kontakt, Impressum, Datenschutz allg. Einstell. ****/

.maXxTe0{
	display: block;
	width: 100%;
	float: left;
	margin-left: 1.5%;
}

.maXxTe1{
	display: block;	
	float: left;
	border-color: black;
	border-width: 0px;
}

.maXxTeX1:after {  /* Clear-Fix */
    content: "'.";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}	

.maXxTe2{
	float: left;
	display: block;
}

.maXxTe3{
	float: left;
	display: block;
}

.maXxTe4{
	display: block;
	float: left;
	color: orange;
}

.maXxTe2a{
	float: left;
	display: block;
	width: 100%;
	font-weight: 600;
	color: black;
}

.maXxTe2b{
	float: left;
	display: block;
	width: 100%;	
	margin-bottom: 1%;
	color: black;
}

.maXxTe2c{
	float: left;
	display: block;
	width: 100%;
	margin-bottom: 1%;
	font-weight: 600;
	color: black;
}

.maXxTe3a{
	float: left;
	display: block;
	font-weight: 600;
}


/***************************************************************/
/*                                                             */
/*                            Footer                           */
/*                                                             */
/***************************************************************/

.fo1 {
	background-color: #909090; /* Gesamthintergrund im Footer, Anschrift und Logo */
	border-color: red;
	border-width: 0px;
}

.fo1:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.foAnTnCo0 { /* Footerbereich um ThomNet- Addresse und ThomNet- Logo */
	float: left;
	}

.foAnTnCo0:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.foTnLo1 {
	float: left;
/*	background-color: grey; */
}

.foTnLo1:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.foAnTnCo1 { /* Adress- Container im Footer, Teil 1 */
	width: 100%;
	color: white;
	float: left;	
}

.foAnTnCo2 { /* Adress- Container im Footer, Teil 2 */
	color: white;	
	float: left;	
}

.foAnTnCo3 { /* Adress- Container im Footer, Teil 3 */
	color: white;	
	float: left;	
}

.foAnTnCo4 { /* Adress- Container im Footer, Teil 4 */
	color: white;	
	float: left;	
}

.foAnTnIm1 { /* Einstellungen für das Wort IMPRESSUM */
	text-transform: uppercase;
	}

.foTnLoTe1 {
	font-family: Bank Gothic Light;
	color: white;		
}

.foTnLoTe2 {
	color: white;		
}

.foTnLoImBe1:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}
.foTnLoIm1 {
	float: left;
}

.foTnLoBe0 {
	color: white;
	float: left;
}

.foTnLoBe0:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.foTnLoBe1 {
	float: left;	
}
	
.foTnLoBe2 {
	float: left;	
}	
	
.foTnLoBe3 {
	float: left;	
}

/* Netzwerk-Container */

.soNwCo1 {
	background-color: #a0a0a0; /* Hintergrundfarbe des Social Netwerk Containers */

	float: left;
}

.soNwCo1:after {
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.soNwBi1 {
	float: left;	
}

.naTe3 {
	float: left;
}

/*******************************************************************/
/*                                                                 */
/* Spezielle css- Eigenschaften für die Switche in Einstellungen, 1*/
/*                                                                 */
/*******************************************************************/
		
	input[type="checkbox"] {
		display: none; /* die Checkbox nimmt keinen Raum ein */
		opacity: 1; /* die eigentliche Checkbox ist nicht zu sehen */
		}
		
/* Normal Track */
	input[type="checkbox"].ios-switch + div {
		display: block;
		width: 40px; /* 40px */
		height: 20px; /* 20px */
		border: 1px solid rgba(0,0,0,.4);
		border-radius: 999px;
		background-color: rgba(0, 0, 0, 0.1);
		-webkit-transition-duration: 0.4s; /* Farbanimation des Switches */
		-webkit-transition-property: background-color, box-shadow;
		box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
		margin-left: 0px;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
		
/* Big Track */
	input[type="checkbox"].bigswitch.ios-switch + div {
		width: 50px; /* 50px, Switchweg- Breite */
		height: 25px; /* 25px, Switchweg- Höhe */
	}
		
/* Green Track 1
	input[type="checkbox"].green.ios-switch:checked + div {
		background-color: #00e359; /* Farbe bei gechecked
		border: 1px solid rgba(0, 162, 63,1); /* Border-Farbe im gecheckten Zustand
		box-shadow: inset 0 0 0 10px rgba(0,227,89,1); */
		
/* Green Track 2 */
	input[type="checkbox"].green.ios-switch:checked + div {
		background-color: blue; /* Farbe bei gechecked */
		border: 1px solid blue; /* Border-Farbe im gecheckten Zustand */
/*		background-color: #525252;  Farbe bei gechecked */
/*		border: 1px solid #525252; /* Border-Farbe im gecheckten Zustand */
		box-shadow: inset 0 0 0 10px blue;
		box-shadow: #888888;
	}
		
/* Normal Knob */
	input[type="checkbox"].ios-switch + div > div {
		float: left; /* Grundposition des switch- Knopfes: links*/
		width: 18px; 
		height: 18px;
		border-radius: inherit;
		background: #dfa65c; /* Farbe des Knopfes */
		-webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
		-webkit-transition-duration: 0.4s;
		-webkit-transition-property: transform, background-color, box-shadow;
		-moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
		-moz-transition-duration: 0.4s;
		-moz-transition-property: transform, background-color;
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
		pointer-events: none;
		margin-top: 1px;
		margin-left: 1px;
	}
		
/* Big Knob, Knopf in der Umrahmung */
	input[type="checkbox"].bigswitch.ios-switch + div > div {
		width: 23px; height: 23px; /*23, 23*/
		margin-top: 1px;
		}
		
/* Checked Big Knob (Blue Style) */
	input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
		-webkit-transform: translate3d(25px, 0, 0);
		-moz-transform: translate3d(16px, 0, 0);
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
	}
		
/* Green Knob */
	input[type="checkbox"].green.ios-switch:checked + div > div {
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px #525252;
		}
	
	.TextvorSwitch {
		clear: left;
		display: block;
		width: 12%;
		float: left;
		margin-top: 5px;
		padding: 0px;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
		font-size: 16px; /* Schrifthöhe */
		font-weight: 400; /* Darstellungsart der Schrift */
		color: #8e6c41;
		}

	.switchWrapper {
		display: block;
		width: 10.0%;
		float: left;
		margin: 0px;
		padding: 0px;
		}
						
	.TextnachSwitch1 {
		display: block;
		width: 35%;
		float: left;
		margin-top: 5px;
		padding: 0px;
		font-weight: 600;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
		font-size: 16px; /* Schrifthöhe */
		font-weight: 400; /* Darstellungsart der Schrift */
		color: #8e6c41;
		}

	.TextnachSwitch2 {
		display: block;
		width: 35%;
		float: left;
		margin-top: 5px;
		padding: 0px;
		font-weight: 600;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
		font-size: 16px; /* Schrifthöhe */
		font-weight: 400; /* Darstellungsart der Schrift */
		color: #8e6c41;
		}
		
	span.switchTexte {
		font-weight: bold;
		color: blue;
		}

#naTe3Ei {
	opacity: 0;
	width: 1%;
	font-size: 0.5vw;
	padding-top: 1%;
	margin-left: 15%;
}

#naTe1Ei {
	opacity: 0;
	font-size: 2.0vw;
	margin-top: 24%
}

#naTe1Pi, #naTe2Pi {
    color: orange;
}

.onOff1 {
	display: block;
}

.vierButton0 {
	display: block;
	width: 100%;
	border-width: 0px;
	border-color: black;
	float: left;
	margin-top: 3%;
	margin-bottom: 3%;
}

.vierButton0:after { /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.vierButton1 {
	display: block;
	width: 23.0%;
	border-width: 1px;
	border-color: grey;
	float: left;
	text-align: center;
	padding: 1.0%;
	margin-right: 2%;
	margin-left: 1%;
	margin-top:1%;
	border-radius: 5px;
	background-color: lightgray;
	font-weight: 500;
	font-size: 2.15vw;
}

/* Projekt-Insta */

.maCo0Insta { /* Main-Container */
	display: block;
	width: 100%;
}

.maCo0Insta:after { /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

/* class projectinsta vor den responsiv Einstellungen */
.projektinsta{
    width: 100%;
    float: left;
    margin-top: 1%;
}

.accordion{
    width: 100%;
    float: left;
}

.project-list{
    width: 99%;
    float: left;
    margin: 2.0%;
}

/* No Projects vor den responsiv Einstellungen */
.no-projects{
    width: 96%;
    float: left;
    background: white;
    border: 1px solid #888;
    aspect-ratio: 21 / 2;
    padding: 1.2%;
    margin-left: 1.8%;
    text-align: center;
    font-size: 0.7em;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center; 
}

/* Projekt-Button vor den responsiv Einstellungen */
.project-button {
    width: 97%;
    float: left;
    background: linear-gradient(to bottom, #dcdcdc, #a9a9a9);
    border: 1px solid #888;
    aspect-ratio: 21 / 2;
    margin-bottom: 1.5%;
    text-align: center;
    font-size: 1.0em;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Bilderliste vor den responsiv Einstellungen*/
.image-list{
    width: 99%;
    float: left;
    margin: 2.0%;
}

#imageList{
    width: 99%;
    float: left;
    margin: 2.0%;
}

/* Bilder vor den responsiv Einstellungen*/
.image-item {
    width: 97%;
    float: left;
    border: 1px solid #888;
    margin-bottom: 1.5%;
}

.image-item img {
    width: 100%;
    float: left;
}

.popup-overlay{
    width: 100%;
    color: red;
    float: left;
    border: solid;
    border-color: red;
} 

#popupOverlay{
	display: none; /* zum Testen */
    width: 100%;
    color: red;
    float: left;
    border: solid;
    border-color: red;
}

#naTe1Pi, #naTe2Pi{
	display: none;
}

.popup-box{
    width: 100%;
    color: red;
    float: left;
    border: solid;
    border-color: red;
}

.popup-footer{
    width: 100%;
    color: red;
    float: left;
    border: solid;
    border-color: red; 
}

#dontShowAgainBtn{
    width: 100%;
    color: red;
    float: left;
    border: solid;
    border-color: red; 
}

#popupCloseBtn{
    width: 100%;
    color: red;
    float: left;
    border: solid;
    border-color: red;
}
 
/***************************************************************/
/*                                                             */
/*       Media-Queries für das responsive Design, Mobile       */
/*                                                             */
/***************************************************************/

@media (max-width: 400px) {
	
	#loader {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 6;
		margin: -30px 0 0 -30px;
		border: 8px solid orange;
		border-radius: 50%;
		border-top: 8px solid white;
		width: 60px;
		height: 60px;
		-webkit-animation: spin 1s linear infinite;
		animation: spin 1s linear infinite;
	}

	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.naCo1 a {
	color: grey;
	font-weight: 400;
	}
	
	.naCo1 a:hover {
	color: orange;
	}
	
	.naCo1 a:active {
	color: orange;
	}
	
	.naTe1 {
      font-size: 3.5vw;
      text-transform: uppercase;		
      padding-left: 3.2%; 
      padding-right: 3.2%;
      padding-bottom: 0.0%;
      padding-top: 3.0%;
	}	
	
	#heBiCo1 {
	width: 73.5%;
	}
	
	#cycler5, #cycler4, #cycler3 {
	display: none;
	}
	
	.heBi {
	width: 49.9%;
	padding: 0.5%;		
	}
	
	.heBi img{
	width: 35.10%;
	position:absolute;
	z-index:1;
	}
	
	.heMoMe {
	display: none;
	width: 37%;
	position: absolute;
	border-color: aqua;
	border-width: 0px;
	z-index: 6;
	}
	
	#heMoMe1 {
	display: block;	
	}
	
	#tnLo1 {
	width: 24.4%;
	margin-left: 1.5%;
	margin-top: 0.2%;
	padding-bottom: 0.5%;		
	}
	
	.hehe1 { /* Header-Headline 1 */
	font-weight: 500;
	margin: 4% 0% 0% 0%;
	font-size: 5vw;
	}
	
	.hehe2 { /* Header-Headline 2 */
	font-weight: 300;
	margin: 0% 0% 5% 0%;
	font-size: 2.5vw;
	}
	
	.hehe3 { /* Header-Headline 1, Buchstabe "o" */
	font-weight: 500;
	font-size: 5vw;
	}
	
	.hehe4 { /* Header-Headline 1, Wort "smart" */
	font-weight: 500;
	font-size: 5vw;
	}
	
/***************************************************************/
	
	.hehe5 {
      text-align: center;
      width: 100.0%;
      padding: 1.0% 5.0% 1.0% 5.0%;
      margin: 1.0% 0.0% 0.0% 0.0%;
      font-size: 3.3vw;
      font-weight: 400;
	}

	.hehe7 {
      width: 100%;
      text-align: center;
      font-weight: 600;
      font-size: 3.8vw;
      margin: 2% 0% 1% 0%;
	}
	
	.hehe8 {
      display: block;
      text-align: center;
      width: 100%;
      margin-top: 4%;
      font-weight: 600;
      color: orange;
      font-size: 3.8vw;		
	}
	
/***************************************************************/	

	.heheCo0 {
	width: 96%;
	margin: 5.5% 2.0% 8.0% 2.0%;
	padding: 1.5% 1.0% 4.5% 1.0%;
	}
	
	.naCo2 {
	display: none;	
	}
	
	.maCoTe0, .maCoTe0Insta { /* Überschrift zum Main-Container, Mobile*/
	width: 96.1%;
	border-color: orange;
	border-width: 0px;		
	font-weight: 400;
	font-size: 3.80vw;
	margin: 2.0% 0.0% 0.0% 2.0%;	
	}
	
	.roSt0, .rost0Insta {  /* roter Strich unter Überschrift, Mobile */
	border-width: 2px 0px 0px 0px;
	margin: 3.5% 0.0% 2.0% 0.0%;
	}
	
	.roSt1, .roSt1Insta {  /* roter Strich unter Überschrift, Mobile */
	width: 97.2%;
	border-color: orange;
	border-width: 1px 0px 2px 0px;
	margin: 2.00% 0.00% 4.50% 1.40%;
	}	
	
	.maCoInCo1 { /* Main-Container-Inhalts-Container, oben, Mobile */
	display: block;	
	width: 96%;
	margin: 2.0% 2.0% 1.3% 2.0%;
	}
	
	.maCoInCo2, .maCoInCo3, .maCoInCo4, .maCoInCo5 { /* Main-Container-Inhalts-Container, 4 x mittig, Mobile */
	display: block;			
	width: 96%;		
	margin: 1.3% 2.0% 1.3% 2.0%;
	}
	
	.maCoInCo6 { /* Main-Container-Inhalts-Container, unten, Mobile */
	display: block;			
	width: 96%;		
	margin: 1.3% 2.0% 2.5% 2.0%;
	}
	
	.maCoInTeCo1 {
	width: 96%;
	padding: 10.0% 0.0% 0.0% 0.0%;
	}
	
	.maCoInTe1 {
	font-size: 4.0vw;
	padding: 14.0% 0.0% 0.0% 0.0%;
	}

	.maCoInTe2 {
	font-size: 4.0vw;
	}
	

	.maCoInTe3 {
	font-size: 4.0vw;
	}
	
	.maCoInTe4 {
	font-size: 4.0vw;
	}

	.maCoInNu1 { /* Projektbezeichnung unter den Projektbildern*/
	padding: 2% 0% 2% 0%;
	font-size: 3.5vw;
	font-weight: 400;
	color: black;
	}
	
    .maCoInReMe {
		margin-top: 2.0%;
		margin-bottom: 5.0%;
		font-weight: 400;
		font-size: 3.1vw;
    }
	
	/* Projekt-Karten */

	.maCoPrKa0 {
	display: block;
	border-color: aqua;
	border-width: 0px;
	margin: 0.0% 0.0% 2.0% 0.0%;
	}

	.maCoPrUe1 {
	width: 100%;
	text-transform: uppercase;
	border-color: aqua;
	border-width: 0px;
	margin: 3.0% 0% 1.0% 1.3%;
	font-size: 4.0vw;
	}
	
    .maCoPrUe3 {
        margin-left: 4%;
    }	
	
	.maCoUe1 {
		width: 80%;
		text-transform: uppercase;
		border-color: aqua;
		border-width: 0px;
		margin: 3.0% 0% 1.0% 1.3%;
		font-size: 4.0vw;
	}
		
	.maCoUe2 {
		font-weight: 600;
	}

	.maCoUe3 {
		margin-left: 5%;
	}


	.maCoPrDl1 {
	display: none;
	}
	
	.maCoPrDl2 {
	display: none;
	}

	.maCoPrGrBiTe0 {
	width: 97.2%;
	margin: 0.00% 0.00% 0.00% 1.40%;
	}
	
	.maCoPrGrBi1 {
	width: 100%;
	}
	
	.maCoPrGrBiBeTe1 { /* Beschreibungstext unter dem großen Bild */
	color: black;
	text-align: center;
	margin: 0% 0% 2.0% 0.0%;
	padding: 1.0% 0.0% 1.0% 0.0%;		
	font-size: 2.5vw;
	font-weight: 600;
	}
	
	.maCoPrGrBiBeTe2 { /* Beschreibungstext unter dem großen Bild, kurz */
	display: none;
	}	

	.maCoPrKlBi0 {
	border-color: aqua;
	border-width: 0px;
	width: 97.2%;
	margin: 1.00% 0.00% 2.50% 1.40%;		
	}
		
	.maCoPrKlBi1 {
	width: 100%;
	padding: 0% 0% 0.0% 0.0%;
	}
	
	.maCoPrKlBiZo1 {
	display: none;
	position: absolute;
	width: 3%;
	margin: 0.5% 0.0% 0.0% 1.5%;
	}	
	
	.maCoPrKlBiBeTe1 { /* Beschreibungstext unter den kleinen Bildern */
	color: black;
	width: 97,2%;
	text-align: center;
	margin: 0% 0% 4.0% 0.0%;
	padding: 1.7% 0.0% 1.7% 0.0%;		
	font-size: 2.26vw;
	font-weight: 600;		
	}
	
	.maCoPrKlBiBeTe2 {
	display: none;		
	}
	
	.maCoPrKlBeTe2 { /* Beschreibungstext im span- Element */
	display: inline-block;
	}

	.maCoPrTe1 { /* Text PROJEKTDATEN */
	width: 100%;
	border-color: aqua;
	border-width: 0px;
	text-transform: uppercase;
	margin: 2.0% 0.0% 0.5% 0.0%;
	color: orange;
	font-size: 3.80vw;
	}

	.maCoPrTe2 {
	display: block;
	width: 33.5%;
	margin: 0.0% 0.0% 0.0% 2.0%;
	border-color: aqua;
	border-width: 0px;
	font-weight: 600;
	font-size: 3.20vw;
	}

	.maCoPrTe3 {
	width: 100%;
	text-transform: uppercase;
	margin: 2.0% 0.0% 0.5% 0.0%;
	color: orange;
	font-size: 3.80vw;		
	}

	.maCoPrTe4 {
	border-color: blue;
	border-width: 0px;		
	width: 100%;
	margin: 0.0% 0.0% 1.0% 2.0%;
	font-size: 3.20vw;
	}	
	
	.maCoPrTe5 {
	display: block;
	width: 55.5%;
	margin: 0.0% 0.0% 0.0% 1.0%;
	font-size: 3.2vw;
	border-color: aqua;
	border-width: 0px;		
	}	

	.maCoPrLi1 {
	width: 100%;
	text-transform: uppercase;
	color: orange;
	text-align: right;
	font-size: 3.5vw;
	margin: 0.0% 0.0% 0.0% 0.0%;		
	}	
	
	/* Einstellungen zu den News / Referenzen, Mobile */
	
	.maCoNeRe0 {
	width: 100.0%;
	border-color: aqua;
	border-width: 0px;
	}
	
	.maCoNeRe1 { /* News / Referenzen- Container, Mobile */
	width: 96%; /* Einstellung Containergröße */
	margin-left: 2.0%; /* Abstand links */
	padding-top: 0.0%; /* Einstellen der relativen Höhe zu den Projekten */
	border-color: red; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	}
	
	.maCoNeReUe1 {
	text-transform: uppercase; /* Alles in Grossbuchstaben */	
	font-size: 4.0vw; /* Einstellung der Schrift News / Referenzen */		
	border-color: green; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	margin: 0% 0% 1% 2%; /* Abstand Wort News / Referenzen zu den eigentlichen News / Referenzen */
	}
	
	.maCoNeReCo1 { /* Container für eine News / Referenzen-Meldung */
	width: 100%;
	padding: 1% 0% 0% 2%;
	border-color: blue; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	}
	
	.maCoNeReIm0 { /* Einstellungen für Bilder in den News / Referenzen */
	width: 25%;	/* Größe im Container */
	margin: 1.2% 2% 2% 2%;
	}
	
	.maCoNeReIm1 { /* Einstellungen für Bilder in den News / Referenzen */
	display: none;
	}	
	
	.maCoNeReTeCo1 {  /* Einstellungen für die Texte in den Referenzen */
	width: 70%; /* Größe im Container */
	border-color: blue; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */		
	}	
	
	.maCoNeReDa1 { /* Einstellungen zum Datum News */
	color: orange;
	font-size: 3.20vw;
	margin: 0.5% 0% 0% 0%;	
	}
	
	.maCoNeReDa2 { /* Einstellungen zum Datum Referenzen */
	color: orange;
	font-size: 3.20vw;
	margin: 0.5% 0% 1% 3.5%;
	width: 100%;
	}	
	
	.maCoNeReTeHe1 { /* Einstellungen zum News / Referenzentext Header */
	width: 100%;	
	color: gray;
	font-size: 3.20vw;
	margin: 1% 0% 0% 2%;
	border-color: red;
	border-width: 0px;
	}
	
	.maCoNeReTe1 { /* Einstellungen zum News / Referenzentext */
	width: 100%;			
	color: gray;
	font-size: 3.20vw;
	margin: 2% 0% 0% 6%;
	padding: 0% 3% 0% 0%;		
	}	
	
	.maCoNeReLi1 { /* Einstellungen zum Link */
	display: block;
	color: orange;
	font-size: 3.20vw;
	margin: 2% 2% 0% 0%;
	text-transform: uppercase;
	}

/***************************** Profil **************************/

.prCo0 { /* Profil Container*/
	float: left;
	border-color: red;
	border-width: 0px;
	width: 85.2%;
	margin-left: 1.5%;
}

.prCo0:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.prBe0 { /*Profil Bereich */
	float: left;
	text-transform: uppercase;
	width: 100%;
	color: grey;
	margin-top: 0%;
	margin-bottom: 0.3%;
}

.prBe1 { /*Profil Bereich */
	float: left;
	text-transform: uppercase;
	width: 100%;
	color: grey;
	margin-top: 1%;
	margin-bottom: 0.3%;
}

.prBeTe0 { /*Profil Bereich Text0 */
	float: left;
	width: 100%;
	margin-left: 1%;
	font-size: 1vw;		
}

.prBeTe1 { /*Profil Bereich Text1 */
	float: left;
	width: 100%;
	margin-left: 1%;
	font-size: 1vw;	
}

.prBeTe2 { /*Profil Bereich Text2 */
	float: left;
	width: 100%;
	margin-left: 0.8%;
	font-weight: 400;
	color: grey;
	font-size: 1vw;		
}

.prBeEn1 { /*Profil Bereich Ende1 */
	float: left;
	text-transform: uppercase;	
	width: 100%;
	color: black;
	margin-top: 1%;
	margin-bottom: 0.8%;
	font-size: 1vw;		
}
	
/*************************** Partner ***************************/	

	.maPaCo0 {
		width: 96%;
		margin-left: 3.4%
	}

	.maPaCo1 {
		width: 97.05%;
		margin-top: 1.5%;
		margin-right: 1%;
		margin-bottom: 3.0%;		
	}
	
	.maPaCoLi1 {
		display: block;
		width: 77.1%;
		float: left;	
		border-top-color: grey;
		border-top-width: 1px;
		margin-top: 2%;
		margin-bottom: 4%;
		margin-left: 10%;
	}	

	.maPaWs1 {
		width: 100%;	
	}

	.maPaBi1 {
		width: 100%;
		margin-left: 0.0%;
	}

	.maPaTe0 {
		width: 100%;
		font-size: 1.00vw;
		margin-bottom: 0.3%;
	}

	.maPaTe0Te1 {
		float: left;
		display: block;
		width: 95%;
		font-size: 3.20vw;
		color: black;
		font-weight: 600;
		margin-right: 0.5%;
		margin-top: 0.0%;
		margin-bottom: 1.3%;
	}

	.maPaTe0Te2 {
		float: left;
		display: block;
		width: 85%;
		font-size: 2.87vw;
		font-style: italic;
		margin-top: 0.1%;
		margin-bottom: 1.3%;	
	}

	.maPaTe1 {
		width: 46.5%;
		margin-left: 2.5%;
		color: grey;
	}

	.maPaTePa1 {
		width: 100%;
		font-size: 3.5vw;
		text-transform: uppercase;
		color: orange;
		margin-top: 6.0%;
	}

	.maPaTePa2 {
		width: 195%;	
		font-size: 3.50vw;
		margin-left: 3.5%;
		margin-top: 1.5%;
		margin-bottom: 4.0%;
	}
	
/********************** Main Google Maps ***********************/	
	
	.maGoCo1 {
	width: 97%;
	height: 300px;
	margin-left: 1.45%;
}
	
	.maGoMa1, .maGoMa2{ /* Einstellungen zur Anfahrt, mobile */
	width: 95.3%;
	height: 298px;
	}
	
	.maGoMaTe1, .maGoMaTe2 {
	width: 48.50%;
	padding: 1.70% 1.00% 2.20% 1.00%;
	border-top-right-radius: 15px;
	font-size: 3.2vw;
	}
	.maGoMaTe3, .maGoMaTe4 {
	display: none;
	}
	
/** Profil, Kontakt, Impressum, Datenschutz allg. Einstell. ****/

	.maXxTeX1{
		display: block;
		float: left;
		width: 97%;
		background-color: #f0f0f0;
		padding: 2% 4% 2% 4%;
		margin-bottom: 4.9%;
		margin-left: 0%
	}
	
    .maXxTe1{
        width: 97%;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 4.0vw;
        margin-bottom: 1.9%;
		padding: 1%;
    }

    .maXxTe2{
        width: 100%;
        color: black;
        font-size: 3.5vw;		
    }

    .maXxTe3{
        width: 100%;
        color: black;
        font-size: 3.5vw;		
    }

    .maXxTe4{
        width: 100%;
		font-size: 3.5vw;
		font-weight: 600;
    }
		
    .maXxTe2a{
        width: 100%;
        font-weight: 600;
        color: black;
        font-size: 3.5vw;		
    }

    .maXxTe2b{
        width: 100%;	
        margin-bottom: 2%;
        color: black;
	    font-size: 3.5vw;	
    }

    .maXxTe2c{
        width: 100%;
        margin-bottom: 2%;
        font-weight: 600;
        color: black;
        font-size: 3.5vw;		
    }

    .maXxTe3a{
        font-weight: 600;
        font-size: 3.5vw;		
    }
	
/*************************** Kontakt ***************************/

    .maKoBi1 {
		border-width: 2px;
		border-color: #f0f0f0;		
    }
	
	.maKoBi2 {
		border-width: 2px;
		border-color: #f0f0f0;		
    }
	
	.maKoCo0 {
		width: 97%;
		margin-left: 1.5%;
		border-width: 0px;
		border-color: black;
		margin-bottom: 1%;
    }
	
	.maKoCo1 {
		width: 100%;
		border-width: 0px;
		border-color: black;
    }
	
	.maKoCo2 {
		width: 99%;
		border-width: 0px;
		border-color: black;
		margin-left: 0.5%;		
		padding: 3%;
		padding-bottom: 2.3%;
		background-color: #f0f0f0;
		margin-bottom: 2%;
    }
	
	.maKoCo3 {
		display: none;
		width: 97%;
		border-width: 0px;
		border-color: black;
		margin-left: 2%;
    }
	
	.maKoTe0 {
		width: 100%;
		border-width: 0px;
		border-color: black;
		margin-bottom: 2%;
		font-size: 1.1vw;		
    }
	
	.maKoTe1 {
        color: orange;
        text-align: center;
        padding-top: 2.0%;
		padding-bottom: 3.5%;
		font-size: 3.5vw;		
	}
	
	.maKoTe2 {
		color: black;
		font-weight: 600;
		margin-bottom: 0.0%;
		font-size: 3.5vw;	
    }
	
	.maKoTe3 {
		color: black;
		font-size: 3.5vw;			
    }
	
	.maKoTe4 {
		color: black;
		margin-bottom: 1.5%;
		font-size: 3.5vw;		
    }	
	
	.maKoTe0Te1 {
		display: block;		
		font-weight: 600;
		color: black;
		font-size: 3.4vw;
    }
	
	.maKoTe0Te2 {
		display: block;
		color: black;
		font-style: italic;
		font-size: 3.1vw;
		padding-top: 2%;
	}
	
	.maKoTe0Te3 {
		display: none;
	}
	
	.maKoQr1 {
    } 

    .maKoWs1 {
    }

/*********** Einstellungen zum Footer, Mobile ******************/	
	
	.fo0 {
	margin: 0% 0% 0% 0.5%;	
	}
	
	.foAnTnCo0 {
	margin: 0% 0% 2.0% 0%;	
	}
	
	.foAnTnCo1 {
	padding-left: 2%;
	padding-right: 2%;
	font-size: 3.0vw;
	}
	
	.fo1 {
	margin-left: 0.5%;
	margin-right: 0.0%;
	margin-top: 2%;
	padding-bottom: 2%;
	}

	.foHo1 {
	width: 100%;	
	color: white;	
	border-color: yellow;
	border-width: 0px;
	float: left;
	font-size: 3.0vw;		
	}

	.foAnTnCo1 { /* Container, in dem sich IMPRESSUM und COPYRIGHT befindet */ 
	width: 100%;
	border-color: yellow;
	border-width: 0px;
	margin: 2% 0% 3% 0%;		
	}

	.foAnTnCo2 { /* Container, in dem sich der erste Teil der Adresse befindet */
	width: 46%;
	color: white;
	border-color: red;
	border-width: 0px;
	margin: 0% 0% 0% 4%;
	font-size: 3.0vw;
	}
	
	.foAnTnCo3 { /* Container, in dem sich der zweite Teil der Adresse befindet */
	width: 46%;
	color: white;
	border-color: red;
	border-width: 0px;
	margin: 0% 0% 0% 4%;
	font-size: 3.0vw;		
	}
	
	.foAnTnCo4 { /* Container, in dem sich der dritte Teil der Adresse befindet */
	width: 46%;
	color: white;
	border-color: red;
	border-width: 0px;
	margin: 3% 0% 0% 4%;
	font-size: 3.0vw;		
	}	
	
	.foAnTnIm1 { /* Einstellungen für das Wort IMPRESSUM */
	display: block;
	font-size: 4.0vw;
	}
	
	.foAnTnCr1 { /* Einstellungen für das Wort COPYRIGHT */
	color: orange;
	font-size: 2.0vw;
	margin: 0% 0% 0% 0%;	
	}
	
	.foAnTnTn1 { /* Einstellungen für THOMNET */
	margin: 0% 0% 0% 0%;
	}
	
	.foAnTnTh1 { /* Einstellungen für THOMAS HÜLSMANN */
	margin-top: 7.5%;
	font-weight: 700;
	}
	
	.foAnTnPe1 {  /* Einstellungen für PESTALOZZISTRASSE */
	margin-top: 6.5%;	
	}		

	.foAnTnPh1 { /* Einstellungen für PHONE */
	margin-top: 5%;	
	}
	
	.foAnTnMa1 {  /* Einstellungen für MAIL */
	margin: 3% 0% 0% 0%;
	}
	
	/* Einstellungen Logo im Footer */
	
	.foTnLo1 {
	display: none;
	}
	
	.soNwCo1 { /* Container für die Logos der sozialen Netzwerke */
	width: 99.5%;
	padding: 0.0% 0.0% 0.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.5%;
	border-color: green;
	border-width: 0px;
	background-color: #a0a0a0;
	}
	
	.soNwBi1 {
	width: 8.5%;
	margin-right: 4.0%;
	margin-left: 0.0%;
	margin-bottom: 2.0%;		
	margin-top: 2.0%;
	float: right;
	}
	
	.naTe3 {
	display: none;
	}

	.foTnLo2 {
	width: 99.5%;
	background-color: #b0b0b0;
	border-color: red;
	border-width: 0px;
	float: left;
	padding: 0.0% 0.0% 0.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.5%;		
	}
	
	.foTnLo2Co { /* Container zum Verschieben des ThomNet- Logos mit Text */
	width: 38%;
	margin: 1% 0% 0% 28%;	
	border-color: red;
	border-width: 0px;		
	}	

	.foTnLoTe1 { /* Einstellungen zu THOMNET im Footer */
	border-color: red;
	border-width: 0px;
	font-size: 5.7vw;
	font-weight: 400;
	margin: 6.0% 0.0% 0.0% 6.0%;		
	}

	.foTnLoTe2 { /* Einstellungen zu STEHT FÜR im Footer */
	font-size: 3.0vw;
	color: orange;
	margin: 0.0% 0.0% 1.0% 6.0%;		
	border-color: red;
	border-width: 0px;
	}
	
	.foTnLoImBe1 {
	margin: 6.3% 0.0% 0.0% 0.0%; /* Hier wird die vertikale Länge des Strichs neben dem Logo eingestellt */
	border-color: red; /* temporärer Test */
	border-width: 0px; /* temporärer Test */
	}
	
	.foTnLoIm1 { /*  */
	width: 23.1%;
	margin: 0.0% 0.0% 10.4% 6.0%;
	border-color: red;
	border-width: 0px;		
	}
	
	.foTnLoBe0 {
	width: 55%;
	font-size: 4.0vw;
	border-color: red;
	border-width: 0px;
	margin: 0.0% 0.0% 10.0% 6.0%;		
	}
		
	.foTnLoBe1 {
	margin: 5.5% 0.0% 0.0% 0.0%;
	}
	
	.foTnLoBe2 {
	margin: 13.0% 0.0% 0.0% 0.0%;		
	}	
	
	.foTnLoBe3 {
	margin: 13.0% 0.0% 0.0% 0.0%;		
	}
	
/*********************** Main Downloads ************************/

	.maDoCo0{ /* Main Download Container */
	margin-left: 3.25%;
	padding-top: 0%;
	}

	.maDoUlKa1{ /* Main Download Unsortierte Liste Kategorie */
	font-size: 4.2vw;
	margin-bottom: 3%;
	width: 100%;
	padding-top: 2%;
	font-weight: 400;
	}

	.maDoUlKa11{ /* Main Download Unsortierte Liste Kategorie */
	display: none;
	font-size: 3.2vw;
	margin-bottom: 3%;
	width: 40%;
	padding-top: 2%;
	font-weight: 400;
	}	
	
	.maDoUlKa12{ /* Main Download Unsortierte Liste Kategorie */
	font-size: 4.0vw;
	margin-bottom: 3%;
	width: 100%;
	padding-top: 0%;
	font-weight: 400;
	}	

	.maDoLiEl1{ /* Main Download Listen Element */
	margin-left: 1.0%;
	width: 97.00%;
	margin-bottom: 5%;
	}

	.maDoLiEl11{ /* Main Download Listen Element */
	margin-left: 1.0%;
	width: 97.00%;
	margin-bottom: 2%;
	}

	.maDoLiElBi1{ /* Main Download Listen Element Bild */
	width: 98.0%;
	margin-bottom: 0%;
	}

	.maDoLiElTeCo1{
	width: 98%;
	margin-left: 0%;
	border-color: grey;
	border-width: 0px 1px 1px 1px;
	background-color: #F4F4F4;
	}
	
	.maDoLiElTeCo2 {
	padding-top: 2%;
	padding-left: 2%;
	}
	
	.maDoLiElTeCo2:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

	.maDoLiElTe1{ /* Main Download Listen Element Text */
	font-size: 4.0vw;
	width: 29%;
	color: orange;
	text-transform: uppercase;
	font-weight: 600;
	}
	
	.maDoPf1, .maDoPf2, .maDoPf3, .maDoPf4, .maDoPf5 {
	padding-top: 1.55%;
	width: 5.5%;
	padding-right: 0.0%;
	}

	.maDoLiElTe2{ /* Main Download Listen Element Text */
	margin-left: 4%;
	font-size: 4.0vw;
	width: 95%;
	margin-bottom: 3%;		
	}

	.maDoLiElTe3{ /* Main Download Listen Element Text */
	margin-left: 6.5%;
	margin-top: 1%;
	font-size: 4.0vw;
	width: 90%;
	font-weight: 600;
	}
	
	.maDoLiElTe4{ /* Main Download Listen Element Text */
	margin-left: 6.5%;
	font-size: 4.0vw;
	width: 90%;
	margin-bottom: 4%;
	}
	
/* Spezielle css- Eigenschaften für die Switche in Einstellungen, mobile */
		
/* Normal Track */
	input[type="checkbox"].ios-switch + div {
		display: block;
		width: 40px; /* 40px */
		height: 20px; /* 20px */
	}
		
/* Big Track */
	input[type="checkbox"].bigswitch.ios-switch + div {
		width: 35px; /* 50px, Switchweg- Breite */
		height: 15px; /* 25px, Switchweg- Höhe */
	}

		
/* Normal Knob */
	input[type="checkbox"].ios-switch + div > div {
		width: 18px; 
		height: 18px;
	}
		
/* Big Knob, Knopf in der Umrahmung */
	input[type="checkbox"].bigswitch.ios-switch + div > div {
		width: 13px; height: 13px; /*23, 23*/
		margin-top: 0px;
		}
		
/* Checked Big Knob (Blue Style) */
	input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
		-webkit-transform: translate3d(19px, 0, 0); /*25*/
	}
	
	.TextvorSwitch {
		width: 13%;
		margin-top: 0%;
		padding: 1%;
		font-size: 3.5vw; /* Schrifthöhe */
		}

	.switchWrapper {
		width: 13.0%;
		}
						
	.TextnachSwitch1 {
		width: 25%;
		font-size: 3.5vw; /* Schrifthöhe */
		margin-top: 1.0%;
		}

	.TextnachSwitch2 {
		width: 47%;
		font-size: 3.5vw; /* Schrifthöhe */
		margin-top: 0.9%;
		}

	.vierButton0 {
		margin-top: 3%;
		margin-bottom: 3%;
		}

	.vierButton1 {
		width: 22.0%;
		font-size: 2.15vw;
		}
    
    /* Projekt-Insta */
    
    /* No Projects Mobile vor den responsiv Einstellungen */      
    .no-projects{
        width: 96%;
        float: left;
        background: white;
        border: 1px solid #888;
        aspect-ratio: 21 / 2;
        padding: 1.2%;
        margin-left: 1.8%;
        text-align: center;
        font-size: 0.7em;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center; 
    }

    /* Projekt-Button iPhone */
    .project-button {
        float: left;
        background: linear-gradient(to bottom, #dcdcdc, #a9a9a9);
        border: 1px solid #888;
        aspect-ratio: 21 / 2;
        margin-bottom: 1.5%;
        text-align: center;
        font-size: 1.0em;
        color: #333;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Bilderliste mobil */
    .image-list{
        width: 99%;
        float: left;
        margin: 2.0%;
    }
    
    /* Bilderliste mobil */
    #imageList{
        width: 99%;
        float: left;
        margin: 2.0%;
    }

    /* Bilder mobil */
    .image-item {
        width: 97%;
        float: left;
        border: 1px solid #888;
        margin-bottom: 1.5%;
    }

    .image-item img {
        width: 100%;
        float: left;
    }

}

/***************************************************************/
/*                                                             */
/*       Media-Queries für das responsive Design, Tablett      */
/*                                                             */
/***************************************************************/

@media (min-width: 401px)and (max-width: 850px) {
		
	#loader {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 6;
		margin: -40px 0 0 -40px;
		border: 10px solid orange;
		border-radius: 50%;
		border-top: 10px solid white;
		width: 80px;
		height: 80px;
		-webkit-animation: spin 1s linear infinite;
		animation: spin 1s linear infinite;
	}

	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.naCo1 a {
	color: grey;
	font-weight: 400;
	}
	
	.naCo1 a:hover {
	color:orange;
	}
	
	.naCo1 a:active {
	color: orange;
	}
	
	.naTe1 {
      font-size: 1.60vw;
      text-transform: uppercase;	
      margin-left: 3.2%; 
      margin-right: 3.2%;
      margin-bottom: 0.0%;
      margin-top: 1.8%;
	}
	
	#cycler5, #cycler4  {
	display: none;
	}
	
	#heBiCo1 {
	width: 80.0%;
	}

	.heBi {
	width: 33.3%;
	padding: 0.5%;		
	}
	
	.heBi img{
	width: 25.65%;
	position:absolute;
	z-index:1;
	}
	
	.heMoMe {
	display: none;
	width: 26%;
	position: absolute;
	border-color: aqua;
	border-width: 0px;
	z-index: 6;
	}
	
	#heMoMe1 {
	display: block;	
	}	
	
	#tnLo1 {
	width: 17.6%;
	margin-left: 1.5%;
	margin-top: 0.5%;
	padding-bottom: 0.5%;		
	}
	
	.hehe1 { /* Header-Headline 1 */
	font-weight: 500;
	margin: 3% 0% 0% 0%;
	font-size: 4vw;
	}
	
	.hehe2 { /* Header-Headline 2 */
	font-weight: 300;
	margin: 0% 0% 4% 0%;
	font-size: 1.8vw;
	}
	
	.hehe3 { /* Header-Headline 1, Buchstabe "o" */
	font-weight: 500;
	font-size: 4vw;
	}
	
	.hehe4 { /* Header-Headline 1, Wort "smart" */
	font-weight: 500;
	font-size: 4vw;
	}
	
/***************************************************************/
	
	.hehe5 { /* Text klein */
      width: 33.3%;
      text-align: center;
      padding: 0.0% 1.7% 0.0% 1.7%;
      font-size: 2.0vw;
	}

	.hehe7 { /* Text groß */
      width: 100%;
      text-align: center;
      font-weight: 600;
      font-size: 2.1vw;
      margin: 2% 0% 5% 0%;
	}
	
	.hehe8 {
      display: block;
      text-align: center;
      width: 100%;
      margin-top: 2%;
      margin-bottom: 0%;
      font-size: 2.2vw;
      color: orange;
      font-weight: 600;
	}
	
	.heheCo0 {
	width: 96%;
	margin: 5.5% 2.0% 5.0% 2.0%;
	padding: 1.5% 1.0% 3.0% 1.0%;
	}
	
/***************************************************************/	

	.naCo2 {
	display: none;	
	}
	
	.maCoTe0, .maCoTe0Insta { /* Überschrift zum Main-Container, Tablet*/
	width: 99%;
	font-weight: 400;
	font-size: 3.00vw;
	margin: 1.5% 0.0% 0.0% 2.0%;
	}

	.roSt0, .roSt0Insta {  /* roter Strich unter Überschrift, Tablet */
	border-width: 3px 0px 0px 0px;
	margin: 2% 03.0% 2.0% 0%;
	}
	
	.maCoPr0 {
	width: 101%;
	margin-top: 0.5%;
	margin-left: 1.1%;
	margin-bottom: 3%;
	}	
	
	.maCoInCo1, .maCoInCo2, .maCoInCo3, .maCoInCo4, .maCoInCo5, .maCoInCo6  {
	width: 46.50%;
	}
	
	.maCoInCo1 {
	margin: 1.0% 1.0% 1.0% 1.0%;
	}
	.maCoInCo2 {
	margin: 1.0% 1.0% 1.0% 1.0%;
	}
	.maCoInCo3 {
	margin: 1.0% 1.0% 1.0% 1.0%;
	}
	.maCoInCo4 {
	margin: 1.0% 1.0% 1.0% 1.0%;
	}
	.maCoInCo5 {
	margin: 1.0% 1.0% 1.0% 1.0%;
	}
	.maCoInCo6 {
	margin: 1.0% 1.0% 1.0% 1.0%;
	}
	
	.maCoInTeCo1 {
	width: 46.5%;
	border-width: 0px 0px 0px 0px;
	padding: 7.0% 0.0% 0.0% 0.0%;
	}
	
	.maCoInTe1 {
	font-size: 2.2vw;
	padding: 7.0% 0.0% 0.0% 0.0%;
	}

	.maCoInTe2 {
	font-size: 2.2vw;
	}

	.maCoInTe3 {
	font-size: 2.2vw;
	}
	
	.maCoInTe4 {
	font-size: 2.2vw;
	}
	
	.maCoInNu1 { /* Projektbezeichnung unter den Projektbildern*/
	padding: 2% 0% 2% 0%;
	font-size: 1.8vw;
	font-weight: 400;
	color: black;
	}
	
    .maCoInReMe {
		margin-top: 1.0%;
		margin-bottom: 1.0%;
		font-weight: 400;
		font-size: 2.18vw;
    }
	
	/* Projekt-Karten */

	.maCoPrKa0 {
	display: block;
	border-color: aqua;
	border-width: 0px;
	margin: 0.0% 0.0% 2.0% 0.0%;
	}

	.maCoPrUe1 {
	width: 100%;
	text-transform: uppercase;
	border-color: aqua;
	border-width: 0px;
	margin: 3.0% 0% 1.0% 1.3%;
	font-size: 2.2vw;
	}
	
    .maCoPrUe3 {
        margin-left: 4%;
    }		
	
	.maCoUe1 {
		width: 60%;
		text-transform: uppercase;
		border-color: aqua;
		border-width: 0px;
		margin: 3.0% 0% 1.0% 1.3%;
		font-size: 2.5vw;
	}
	
	.maCoUe2 {
		font-weight: 600;
	}

	.maCoUe3 {
		margin-left: 5%;
	}

	.maCoPrDl1 {
	display: none;
	}
	
	.maCoPrDl2 {
	display: none;
	}	

	.roSt1 {
	width: 97.2%;
	border-color: orange;
	border-width: 1px 0px 2px 0px;
	margin: 1.00% 0.00% 2.50% 1.40%;		
	
	}

	.maCoPrGrBiTe0 {
	width: 80.0%;
	margin: 0.00% 0.00% 0.00% 1.40%;
	}
	
	.maCoPrGrBi1 {
	width: 100%;
	}
	
	.maCoPrGrBiBeTe1 { /* Beschreibungstext unter dem großen Bild */
	color: black;
	text-align: center;
	margin: 0% 0% 0.0% 0.0%;
	padding: 1.0% 0.0% 1.0% 0.0%;		
	font-size: 1.5vw;
	font-weight: 600;
	}
	
	.maCoPrGrBiBeTe2 { /* Beschreibungstext unter dem großen Bild, kurz */
	display: none;
	}	

	.maCoPrKlBi0 {
	border-color: aqua;
	border-width: 0px;
	width: 16.96%;
	}
		
	.maCoPrKlBi1 {
	width: 100%;
	padding: 0% 0% 0.0% 7.0%;
	}
	
	.maCoPrKlBiZo1 {
	right: 12.00%;	
	width: 5%;
	margin: 0.5% 0.0% 0.0% 1.5%;
	}	
	
	.maCoPrKlBiBeTe1, .maCoPrKlBiBeTe2 { /* Beschreibungstext unter den kleinen Bildern */
	color: black;
	width: 93%;
	text-align: center;
	margin: 0% 0% 8.5% 7.0%;
	padding: 2.7% 0.0% 2.7% 0.0%;		
	font-size: 1.26vw;
	font-weight: 600;		
	}
	
	.maCoPrKlBiBeTe1 {
	display: none;		
	}	
	
	.maCoPrKlBeTe2 {
	display: none;
	}

	.maCoPrTe1 {
	width: 100%;
	border-color: aqua;
	border-width: 0px;
	text-transform: uppercase;
	margin: 2.0% 0.0% 0.5% 0.0%;
	color: orange;
	font-size: 2.2vw;
	}

	.maCoPrTe2 {
	display: block;
	width: 21.5%;
	margin: 0.0% 0.0% 0.0% 2.0%;
	border-color: aqua;
	border-width: 0px;
	font-weight: 600;
	font-size: 1.5vw;
	}

	.maCoPrTe3 {
	width: 100%;
	text-transform: uppercase;
	margin: 2.0% 0.0% 0.5% 0.0%;
	color: orange;
	font-size: 2.2vw;		
	}
	
	#maCoPrTe3 {
	display: none;
	}

	.maCoPrTe4 {
	width: 100%;
	margin: 0.0% 0.0% 0.0% 2.0%;
	font-size: 1.5vw;		
	}
	
	.maCoPrTe5 {
	display: block;
	width: 75.5%;
	margin: 0.0% 0.0% 0.0% 1.0%;
	font-size: 1.5vw;		
	}	

	.maCoPrLi1 {
	width: 100%;
	text-transform: uppercase;
	color: orange;
	text-align: right;
	font-size: 1.5vw;		
	}	
	
	/* Einstellungen zu den News / Referenzen, Tablet */
	
	.maCoNeRe0 {
	width: 100.0%;
	border-color: aqua;
	border-width: 0px;
	}
	
	.maCoNeRe1 { /* News / Referenzen- Container, Mobile */
	width: 96%; /* Einstellung Containergröße */
	margin-left: 2.0%; /* Abstand links */
	padding-top: 0.0%; /* Einstellen der relativen Höhe zu den Projekten */
	border-color: red; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	}
	
	.maCoNeReUe1 {
	text-transform: uppercase; /* Alles in Grossbuchstaben */	
	font-size: 3.0vw; /* Einstellung der Schrift News / Referenzen */		
	border-color: green; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	margin: 0% 0% 1% 2%; /* Abstand Wort News / Referenzen zu den eigentlichen News / Referenzen */
	}
	
	.maCoNeReCo1 { /* Container für eine News / Referenzen-Meldung */
	width: 100%;
	padding: 1% 0% 0% 2%;
	border-color: blue; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	}
	
	.maCoNeReIm0 { /* Einstellungen für Bilder in den News / Referenzen */
	width: 26%;	/* Größe im Container */
	margin: 1.2% 2% 2% 2%;
	}
	
	.maCoNeReIm1 { /* Einstellungen für Bilder in den News / Referenzen */
	display: none;
	}	
	
	.maCoNeReTeCo1 {  /* Einstellungen für die Texte in den Referenzen */
	width: 70%; /* Größe im Container */
	border-color: blue; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */	
	}
	
	.maCoNeReDa1 { /* Einstellungen zum Datum News */
	color: orange;
	font-size: 2.20vw;
	margin: 0.5% 0% 0% 2%;		
	}
	
	.maCoNeReDa2 { /* Einstellungen zum Datum Referenzen */
	color: orange;
	font-size: 2.20vw;
	margin: 0.5% 0% 0% 2%;
	width: 100%;
	}	
	
	.maCoNeReTeHe1 { /* Einstellungen zum News / Referenzentext Header */
	width: 97.0%;	
	color: gray;
	font-size: 2.20vw;
	margin: 1% 0% 0% 2%;
	border-color: red;
	border-width: 0px;
	}
	
	.maCoNeReTe1 { /* Einstellungen zum News / Referenzentext */
	width: 97%;			
	color: gray;
	font-size: 2.20vw;
	margin: 1.1% 0% 0% 4%;
	padding: 0% 3% 0% 0%;
	border-color: red;
	border-width: 0px;		
	}	
	
	.maCoNeReLi1 { /* Einstellungen zum Link */
	color: orange;
	font-size: 2.20vw;
	padding: 1% 2% 0% 0%;
	text-transform: uppercase;
	}
	
/***************************** Profil **************************/

.prCo0 { /* Profil Container*/
	float: left;
	border-color: red;
	border-width: 0px;
	width: 85.2%;
	margin-left: 1.5%;
}

.prCo0:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.prBe0 { /*Profil Bereich */
	float: left;
	text-transform: uppercase;
	width: 100%;
	color: grey;
	margin-top: 0%;
	margin-bottom: 0.3%;
}

.prBe1 { /*Profil Bereich */
	float: left;
	text-transform: uppercase;
	width: 100%;
	color: grey;
	margin-top: 1%;
	margin-bottom: 0.3%;
}

.prBeTe0 { /*Profil Bereich Text0 */
	float: left;
	width: 100%;
	margin-left: 1%;
	font-size: 1vw;		
}

.prBeTe1 { /*Profil Bereich Text1 */
	float: left;
	width: 100%;
	margin-left: 1%;
	font-size: 1vw;		
}

.prBeTe2 { /*Profil Bereich Text2 */
	float: left;
	width: 100%;
	margin-left: 0.8%;
	font-weight: 400;
	color: grey;
	font-size: 1vw;		
}

.prBeEn1 { /*Profil Bereich Ende1 */
	float: left;
	text-transform: uppercase;	
	width: 100%;
	color: black;
	margin-top: 1%;
	margin-bottom: 0.8%;
	font-size: 1vw;		
}
	
/*************************** Partner ***************************/	

	.maPaCo0 {
		width: 100%;
		margin-left: 1.4%
	}

	.maPaCo1 {
		width: 97.05%;
		margin-top: 1.5%;
		margin-right: 1%;
	}

	.maPaWs1 {
		width: 100%;	
	}

	.maPaBi1 {
		width: 41%;
		margin-left: 0.0%;
	}

	.maPaTe0 {
		width: 100%;
		font-size: 1.00vw;
		margin-bottom: 0.3%;
	}

	.maPaTe0Te1 {
		float: left;
		display: block;
		width: 65%;
		font-size: 2.00vw;
		color: black;
		font-weight: 600;
		margin-right: 0.5%;
		margin-top: 0.0%;
		margin-bottom: 0.3%;
	}

	.maPaTe0Te2 {
		float: left;
		display: block;
		width: 55%;
		font-size: 1.87vw;
		font-style: italic;
		margin-top: 0.1%;
		margin-bottom: 0.3%;	
	}

	.maPaTe1 {
		width: 46.5%;
		margin-left: 2.5%;
		color: grey;
	}

	.maPaTePa1 {
		width: 100%;
		font-size: 1.93vw;
		text-transform: uppercase;
		color: orange;
		margin-top: 3.0%;
	}

	.maPaTePa2 {
		width: 110%;	
		font-size: 1.75vw;
		margin-left: 3.5%;
		margin-top: 1.5%;
	}
	
/********************** Main Google Maps ***********************/	
	
	
	.maGoCo1 {
	width: 97%;
	height: 400px;
	margin-left: 1.45%;
}
	
	.maGoMa1, .maGoMa2{ /* Einstellungen zur Anfahrt, Tablet */
	width: 95.8%;
	height: 398px;
	}
	
	.maGoMaTe1, .maGoMaTe2 {
	width: 36.50%;
	padding: 1.30% 1.00% 1.50% 1.00%;
	border-top-right-radius: 15px;
	font-size: 1.85vw;
	}
	
/*********************** Main Downloads ************************/

	.maDoCo0{ /* Main Download Container */
	margin-left: 3.25%;
	padding-top: 0%;
	}

	.maDoUlKa1{ /* Main Download Unsortierte Liste Kategorie */
	font-size: 2.2vw;
	margin-bottom: 2%;
	width: 50%;
	padding-top: 1%;
	font-weight: 400;
	}

	.maDoUlKa11{ /* Main Download Unsortierte Liste Kategorie */
	font-size: 2.2vw;
	margin-bottom: 2%;
	width: 40%;
	padding-top: 1%;
	font-weight: 400;
	}	
	
	.maDoUlKa12{ /* Main Download Unsortierte Liste Kategorie */
	display: none;
	font-size: 1.54vw;
	margin-bottom: 1%;
	width: 0%;
	padding-top: 1%;
	font-weight: 400;
	}	

	.maDoLiEl1{ /* Main Download Listen Element */
	margin-left: 1.0%;
	width: 47.00%;
	margin-bottom: 2%;
	}

	.maDoLiEl11{ /* Main Download Listen Element */
	margin-left: 1.0%;
	width: 47.00%;
	margin-bottom: 2%;
	}

	.maDoLiElBi1{ /* Main Download Listen Element Bild */
	width: 98.0%;
	margin-bottom: 0%;
	}

	.maDoLiElTeCo1{
	width: 98%;
	margin-left: 0%;
	border-color: grey;
	border-width: 0px 1px 1px 1px;
	background-color: #F4F4F4;
	}
	
	.maDoLiElTeCo2 {
	padding-top: 2%;
	padding-left: 2%;
	}
	
	.maDoLiElTeCo2:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

	.maDoLiElTe1{ /* Main Download Listen Element Text */
	font-size: 2.0vw;
	width: 30%;
	color: orange;
	text-transform: uppercase;
	font-weight: 600;
	}
	
	.maDoPf1, .maDoPf2, .maDoPf3, .maDoPf4, .maDoPf5 {
	padding-top: 1.55%;
	width: 4.0%;
	padding-right: 0.5%;
	}

	.maDoLiElTe2{ /* Main Download Listen Element Text */
	margin-left: 4%;
	font-size: 2.0vw;
	width: 95%;
	margin-bottom: 3%;		
	}

	.maDoLiElTe3{ /* Main Download Listen Element Text */
	margin-left: 6.5%;
	margin-top: 1%;
	font-size: 2.0vw;
	width: 90%;
	font-weight: 600;
	}
	
	.maDoLiElTe4{ /* Main Download Listen Element Text */
	margin-left: 6.5%;
	font-size: 2.0vw;
	width: 90%;
	margin-bottom: 4%;
	}
	
	.maDoLiElAb1 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb2 {
	width: 100%;
	float: left;
	padding-bottom: 7.80%;
	}
	
	.maDoLiElAb3 {
	width: 100%;
	float: left;
	padding-bottom: 6.00%;
	}
	
	.maDoLiElAb4 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb5 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb6 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb7 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb8 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb9 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb10 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb11 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb12 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb13 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}	
	
	.maDoLiElAb14 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb15 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}
	
	.maDoLiElAb16 {
	width: 100%;
	float: left;
	padding-bottom: 18.900%;
	}
	
	.maDoLiElAb17 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}	
	
	.maDoLiElAb18 {
	width: 100%;
	float: left;
	padding-bottom: 00.00%;
	}
	
	.maDoLiElAb19 {
	width: 100%;
	float: left;
	padding-bottom: 18.900%;
	}
	
	.maDoLiElAb20 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}
	
/** Profil, Kontakt, Impressum, Datenschutz allg. Einstell. ****/

	.maXxTeX1{
		display: block;
		float: left;
		width: 97%;
		background-color: #f0f0f0;
		padding: 1% 2% 1% 2%;
		margin-bottom: 1.9%;
		margin-left: 0%;
		font-size: 1.5vw;				
	}
	
    .maXxTe1{
        width: 97%;
        text-transform: uppercase;
        font-weight: 400;
        margin-bottom: 0.9%;
		font-size: 1.5vw;	
    }

    .maXxTe2{
        width: 100%;
        color: black;		
    }

    .maXxTe3{
        width: 100%;
        color: black;		
    }

    .maXxTe4{
        width: 100%;
		font-size: 1.5vw;
		font-weight: 600;
    }
	
			
    .maXxTe2a{
        width: 100%;
        font-weight: 600;
        color: black;
        font-size: 1.5vw;		
    }

    .maXxTe2b{
        width: 100%;	
        margin-bottom: 2%;
        color: black;
	    font-size: 1.5vw;	
    }

    .maXxTe2c{
        width: 100%;
        margin-bottom: 2%;
        font-weight: 600;
        color: black;
        font-size: 1.5vw;		
    }

    .maXxTe3a{
        font-weight: 600;
        font-size: 1.5vw;		
    }
	
/*************************** Kontakt ***************************/

    .maKoBi1 {
		border-width: 2px;
		border-color: #f0f0f0;		
    }
	
	.maKoBi2 {
		border-width: 2px;
		border-color: #f0f0f0;		
    }
	
	.maKoCo0 {
		width: 97%;
		margin-left: 1.5%;
		border-width: 0px;
		border-color: black;
		margin-bottom: 1%;
    }
	
	.maKoCo1 {
		width: 28%;
		border-width: 0px;
		border-color: black;
    }
	
	.maKoCo2 {
		width: 42%;
		border-width: 0px;
		border-color: black;
		margin-left: 2%;		
		padding: 1%;
		padding-bottom: 1.3%;
		background-color: #f0f0f0;
    }
	
	.maKoCo3 {
		width: 26%;
		border-width: 0px;
		border-color: black;
		margin-left: 2%;
    }
	
	.maKoTe0 {
		width: 100%;
		border-width: 0px;
		border-color: black;
		margin-bottom: 2%;
		font-size: 1.1vw;		
    }
	
	.maKoTe1 {
        color: orange;
        text-align: center;
        padding-top: 1.5%;
		font-size: 1.4vw;		
	}
	
	.maKoTe2 {
		color: black;
		font-weight: 600;
		margin-bottom: 0.0%;
		font-size: 1.45vw;	
    }
	
	.maKoTe3 {
		color: black;
		font-size: 1.45vw;			
    }
	
	.maKoTe4 {
		color: black;
		margin-bottom: 1.5%;
		font-size: 1.45vw;		
    }	
	
	.maKoTe0Te1 {
		font-weight: 600;
		color: black;
		font-size: 1.45vw;		
    }
	
	.maKoTe0Te2 {
		color: black;
		font-style: italic;
		font-size: 1.45vw;			
	}
	
	
	.maKoTe0Te4 {
		display: none;
	}
	
	.maKoQr1 {
    } 

    .maKoWs1 {
    }

/***************************************************************/	
	
	/* Einstellungen zum Footer, Tablet */	
	
	.fo0 {
	margin: 0% 0% 0% 0.5%;	
	}
	
	.foAnTnCo0 {
	margin: 0% 0% 2.0% 0%;	
	}
	
	.foAnTnCo1 {
	padding-left: 2%;
	padding-right: 2%;
	font-size: 3.0vw;
	}
	
	.fo1 {
	margin-left: 0.5%;
	margin-right: 0.0%;
	margin-top: 2%;
	padding-bottom: 1%;
	}

	.foHo1 {
	width: 100%;	
	color: white;	
	border-color: yellow;
	border-width: 0px;
	float: left;
	font-size: 3.0vw;		
	}

	.foAnTnCo1 { /* Container, in dem sich IMPRESSUM und COPYRIGHT befindet */ 
	width: 100%;
	border-color: yellow;
	border-width: 0px;
	margin: 2% 0% 3% 0%;		
	}

	.foAnTnCo2 { /* Container, in dem sich der erste Teil der Adresse befindet */
	width: 30%;
	color: white;
	border-color: red;
	border-width: 0px;
	margin: 0% 0% 0% 4%;
	font-size: 2.0vw;
	}
	
	.foAnTnCo3 { /* Container, in dem sich der zweite Teil der Adresse befindet */
	width: 28%;
	color: white;
	border-color: red;
	border-width: 0px;
	margin: 0% 0% 0% 4%;
	font-size: 2.0vw;		
	}
	
	.foAnTnCo4 { /* Container, in dem sich der dritte Teil der Adresse befindet */
	width: 28%;
	color: white;
	border-color: red;
	border-width: 0px;
	margin: 0% 0% 0% 4%;
	font-size: 2.0vw;		
	}	
	
	.foAnTnIm1 { /* Einstellungen für das Wort IMPRESSUM */
	display: block;
	font-size: 3.0vw;
	}
	
	.foAnTnCr1 { /* Einstellungen für das Wort COPYRIGHT */
	color: orange;
	font-size: 1.5vw;
	margin: 0% 0% 0% 0%;	
	}
	
	.foAnTnTn1 { /* Einstellungen für THOMNET */
	margin: 0% 0% 0% 0%;
	}
	
	.foAnTnTh1 { /* Einstellungen für THOMAS HÜLSMANN */
	margin-top: 6%;
	font-weight: 700;
	}
	
	.foAnTnPe1 {  /* Einstellungen für PESTALOZZISTRASSE */
	margin-top: 5%;	
	}		

	.foAnTnPh1 { /* Einstellungen für PHONE */
	margin-top: 5%;	
	}
	
	.foAnTnMa1 {  /* Einstellungen für MAIL */
	margin: 0% 0% 0% 0%;
	}
	
	/* Einstellungen Logo im Footer */
	
	.foTnLo1 {
	display: none;
	}
	
	.soNwCo1 { /* Container für die Logos der sozialen Netzwerke */
	width: 99.5%;
	padding: 0.0% 0.0% 0.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.5%;
	border-color: green;
	border-width: 0px;
	background-color: #a0a0a0;
	}
	
	.soNwBi1 {
	width: 4.5%;
	margin-right: 2.0%;
	margin-left: 0.0%;
	margin-bottom: 2.0%;		
	margin-top: 2.0%;
	float: right;
	}
	
	.naTe3 {
	display: none;
	}	

	.foTnLo2 {
	width: 99.5%;
	background-color: #b0b0b0;
	border-color: red;
	border-width: 0px;
	float: left;
	padding: 0.0% 0.0% 0.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.5%;		
	}
	
	.foTnLo2Co { /* Container zum Verschieben des ThomNet- Logos mit Text */
	width: 28%;
	margin: 1% 0% 0% 38%;	
	border-color: red;
	border-width: 0px;		
	}	

	.foTnLoTe1 { /* Einstellungen zu THOMNET im Footer */
	border-color: red;
	border-width: 0px;
	font-size: 3.7vw;
	font-weight: 400;
	margin: 4.0% 0.0% 0.0% 6.0%;		
	}

	.foTnLoTe2 { /* Einstellungen zu STEHT FÜR im Footer */
	font-size: 1.5vw;
	color: orange;
	margin: 0.0% 0.0% 1.0% 6.0%;		
	border-color: red;
	border-width: 0px;
	}
	
	.foTnLoImBe1 {
	margin: 6.3% 0.0% 0.0% 0.0%; /* Hier wird die vertikale Länge des Strichs neben dem Logo eingestellt */
	border-color: red; /* temporärer Test */
	border-width: 0px; /* temporärer Test */
	}
	
	.foTnLoIm1 { /*  */
	width: 15.1%;
	margin: 0.0% 0.0% 7.4% 6.0%;
	border-color: red;
	border-width: 0px;		
	}
	
	.foTnLoBe0 {
	width: 55%;
	font-size: 2.0vw;
	border-color: red;
	border-width: 0px;
	margin: 0.0% 0.0% 10.0% 6.0%;		
	}
		
	.foTnLoBe1 {
	margin: 4.5% 0.0% 0.0% 0.0%;
	}
	
	.foTnLoBe2 {
	margin: 6.0% 0.0% 0.0% 0.0%;		
	}	
	
	.foTnLoBe3 {
	margin: 7.0% 0.0% 0.0% 0.0%;		
	}
	
/* Spezielle css- Eigenschaften für die Switche in Einstellungen, Tablett */
		
/* Normal Track */
	input[type="checkbox"].ios-switch + div {
		width: 40px; /* 40px */
		height: 20px; /* 20px */
	}
		
/* Big Track */
	input[type="checkbox"].bigswitch.ios-switch + div {
		width: 35px; /* 50px, Switchweg- Breite */
		height: 15px; /* 25px, Switchweg- Höhe */
	}

		
/* Normal Knob */
	input[type="checkbox"].ios-switch + div > div {
		width: 18px; 
		height: 18px;
	}
		
/* Big Knob, Knopf in der Umrahmung */
	input[type="checkbox"].bigswitch.ios-switch + div > div {
		width: 13px; height: 13px; /*23, 23*/
		margin-top: 0px;
		}
		
/* Checked Big Knob (Blue Style) */
	input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
		-webkit-transform: translate3d(19px, 0, 0); /*25*/
	}
	
	.TextvorSwitch {
		width: 11%;
		margin-top: 0%;
		padding: 1%;
		font-size: 3.0vw; /* Schrifthöhe */
		}

	.switchWrapper {
		width: 10.0%;
		margin-top: 1%;
		}
						
	.TextnachSwitch1 {
		width: 25%;
		font-size: 3.0vw; /* Schrifthöhe */
		margin-top: 1.0%;
		}

	.TextnachSwitch2 {
		width: 47%;
		font-size: 3.0vw; /* Schrifthöhe */
		margin-top: 0.9%;
		}


	.vierButton0 {
		margin-top: 3%;
		margin-bottom: 3%;
		}

	.vierButton1 {
		width: 22.0%;
		font-size: 2.15vw;
		}
    
    /* Projekt-Insta */
    
    /* No Projects Tablett  */ 
    .no-projects{
        width: 96%;
        float: left;
        background: white;
        border: 1px solid #888;
        aspect-ratio: 21 / 2;
        padding: 1.2%;
        margin-left: 1.8%;
        text-align: center;
        font-size: 0.9em;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center; 
    }

    /* Projekt-Button Tablett */
    .project-button {
        width: 48%;
        margin-right: 1%;
        border: 1px solid #888;
        aspect-ratio: 21 / 3;
        margin-bottom: 1.5%;
        font-size: 1.2em;
    }
    
    
    /* Bilderliste Tablett */
    .image-list{
        width: 96%;
        float: left;
        margin: 2.0%;
    }
    
    /* Bilderliste Tablett */
    #imageList{
        width: 96%;
        float: left;
        margin: 2.0%;
    }

    /* Bilder Tablett */
    .image-item {
        width: 48%;
        float: left;
        border: 1px solid #888;
        margin-bottom: 1.5%;
    }

    .image-item img {
        width: 100%;
        float: left;
    }    
}

/***************************************************************/
/*                                                             */
/*   Media-Queries für das responsive Design, Desktop, small   */
/*                                                             */
/***************************************************************/

@media (min-width: 851px) and (max-width: 1199px) {
	
	body {
	display: block;
	width: 95%;
	margin: 0 auto;
 	background-image:url(../bilder20/farben/gr2.png);
	background-size: 100% 100%;
	}
	
	
	#loader {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 6;
		margin: -65px 0 0 -65px;
		border: 10px solid orange;
		border-radius: 50%;
		border-top: 10px solid white;
		width: 100px;
		height: 100px;
		-webkit-animation: spin 1s linear infinite;
		animation: spin 1s linear infinite;
	}

	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.naCoUl1 {
	display: none;
	}	

	#heBiCo1 {
	width: 84.4%;
	}
	
	.heBi {
	width: 25.0%;
	padding: 0.5%;		
	}
	
	.heBi img{
	width: 19.10%;
	position:absolute;
	z-index:1;
	}
	
	#cycler5  {
	display: none;
	}
	
	.heMoMe0 { /* Ausschalten des modalen Menüs */
	display: none;
	}	
	
	#tnLo1 {
	width: 13.9%;
	margin-left: 1.5%;
	margin-top: 0.4%;
	padding-bottom: 0.5%;		
	}

	.hehe1 { /* Header-Headline 1 */
	font-weight: 500;
	margin: 4% 0% 0% 0%;
	font-size: 3vw;
	}
	
	.hehe2 { /* Header-Headline 2 */
	font-weight: 300;
	margin: 0% 0% 4% 0%;
	font-size: 1.5vw;
	}
	
	.hehe3 { /* Header-Headline 1, Buchstabe "o" */
	font-weight: 500;
	font-size: 3vw;
	}
	
	.hehe4 { /* Header-Headline 1, Wort "smart" */
	font-weight: 500;
	font-size: 3vw;
	}
	
/***************************************************************/
	
	.hehe5 {
      text-align: center;
      width: 33.3%;
      padding: 1.0% 2.0% 1.0% 2.0%;
      margin: 1.0% 0.0% 0.0% 0.0%;
      font-size: 1.4vw;
      font-weight: 400;
	}

	.hehe7 {
      width: 100%;
      text-align: center;
      font-weight: 600;
      font-size: 1.6vw;
      margin: 0% 0% 3% 0%;
	}
	
	.hehe8 {
      display: block;
      text-align: center;
      width: 100%;
      margin-top: 1%;
      margin-bottom: 1%;		
      font-weight: 600;
      color: orange;
      font-size: 1.6vw;		
	}
	
	.heheCo0 {
      width: 96%;
      margin: 2.0% 0.0% 4.0% 2.0%;
      padding: 0.0% 0.0% 1.5% 0.0%;
	}
	
/***************************************************************/		
			
	/* Einstellungen Navigation Desktop, small */
	
	.naCoUl2 {
	width: 100%;
	}
		
	.naCo2 {
	width: 84%;
	margin-top: 19.70%;
	margin-bottom: 3.5%;
	margin-left: 0.2%;
	}
	
	.naCo2 a {
	color: grey;
	font-weight: 400;		
	}
	
	.naCo2 a:hover {
	color: orange;
	}
	
	.naCo2 a:active {
	color: orange;
	}
	
	.naTe2 {
	font-size: 1.49vw;
	padding-left: 0.2%; 
	padding-right: 2.5%;
	}
	
	.naTe2 a{
	color: black;
	font-weight: 400;
}
	
	#naTr1 {
	display: none;	
	}
	
	.maCoTe0, .maCoTe0Insta { /* Überschrift zum Main-Container, Desktop, small */
	width: 69.0%;
	font-weight: 400;
	font-size: 2.20vw;
	margin: 0.0% 0.0% 0.0% 2.0%;
	border-color: red;
	border-width: 0px;	
	}

	.maCoTe0Insta { /* Überschrift zum Main-Container, Desktop, small */
	width: 100.0%;	
	}
    
	.roSt0, .roSt0Insta {  /* orangener Strich unter Überschrift, Desktop, small */
	width: 96.5%;
	border-width: 3px 0px 0px 0px;
	margin: 2% 4.7% 1.5% 0%;
	}	
    
	.maCoPr0 {
	width: 70%;
	margin-top: 0.5%;
	margin-left: 1.3%
	}
	
	.maCoInCo1, .maCoInCo2, .maCoInCo3, .maCoInCo4, .maCoInCo5, .maCoInCo6  {
	width: 46.6%;	
	}

	.maCoInCo1 {
	margin: 1% 1% 1% 1%;
	}
	.maCoInCo2 {
	margin: 1% 1% 1% 1%;
	}
	.maCoInCo3 {
	margin: 1% 1% 1% 1%;
	}
	.maCoInCo4 {
	margin: 1% 1% 1% 1%;
	}
	.maCoInCo5 {
	margin: 1% 1% 1% 1%;
	}
	.maCoInCo6 {
	margin: 1% 1% 1% 1%;
	}
	
	.maCoInTeCo1 {
	width: 30.7%;
	border-width: 0px 0px 0px 0px;
	padding: 4.5% 0.0% 0.0% 0.0%
	}

	.maCoInTe1 {
	font-size: 1.2vw;
	padding: 10.0% 0.0% 0.0% 0.0%;
	}

	.maCoInTe2 {
	font-size: 1.2vw;
	}
	
	.maCoInTe3 {
	font-size: 1.2vw;
	}
	
	.maCoInTe4 {
	font-size: 1.2vw;
	}
	
	.maCoInNu1 { /* Projektbezeichnung unter den Projektbildern*/
	padding: 2% 0% 2% 0%;
	font-size: 1.2vw;
	font-weight: 400;
	color: black;
	}
	
    .maCoInReMe {
		margin-top: 2.5%;
		margin-bottom: 2%;
		font-weight: 400;
		font-size: 1.4vw;
    }
	
	/* Projekt-Karten */

	.maCoPrKa0 {
	display: block;
	border-color: aqua;
	border-width: 0px;
	margin: 0.0% 0.0% 2.0% 0.0%;
	}

	.maCoPrUe1 {
	width: 75%;
	text-transform: uppercase;
	border-color: aqua;
	border-width: 0px;
	margin: 3.0% 0% 1.0% 1.3%;
	font-size: 2.0vw;
	}

    .maCoPrUe3 {
        margin-left: 4%;
    }		

	.maCoUe1 {
		width: 60%;
		text-transform: uppercase;
		border-color: aqua;
		border-width: 0px;
		margin: 3.0% 0% 1.0% 1.3%;
		font-size: 1.8vw;
	}

	.maCoUe2 {
		font-weight: 600;
	}

	.maCoUe3 {
		margin-left: 5%;
	}

	
	.maCoPrDl1 {
	width: 20%;
	text-transform: uppercase;
	text-align: right;
	border-color: aqua;
	border-width: 0px;
	margin: 3.9% 1.4% 1.0% 1.3%;
	font-size: 1.3vw;
	color: orange;
	}
	
	.maCoPrDl2 {
	width: 26%;
	text-transform: uppercase;
	text-align: right;
	border-color: aqua;
	border-width: 0px;
	margin: 1.2% 1.4% 1.0% 1.3%;
	font-size: 1.3vw;
	color: orange;
	}	

	.roSt1 {
	width: 97.2%;
	border-color: orange;
	border-width: 1px 0px 2px 0px;
	margin: 1.00% 0.00% 2.50% 1.40%;		
	
	}

	.maCoPrGrBiTe0 {
	width: 80.0%;
	margin: 0.00% 0.00% 0.00% 1.40%;
	}
	
	.maCoPrGrBi1 {
	width: 100%;
	}
	
	.maCoPrGrBiBeTe1 { /* Beschreibungstext unter dem großen Bild */
	color: black;
	text-align: center;
	margin: 0% 0% 0.0% 0.0%;
	padding: 1.0% 0.0% 1.0% 0.0%;		
	font-size: 1.5vw;
	font-weight: 600;
	}
	
	.maCoPrGrBiBeTe2 { /* Beschreibungstext unter dem großen Bild, kurz */
	display: none;
	}	

	.maCoPrKlBi0 {
	border-color: aqua;
	border-width: 0px;
	width: 16.76%;
	}
		
	.maCoPrKlBi1 {
	width: 100%;
	padding: 0% 0% 0.0% 7.0%;
	}
		
	.maCoPrKlBiZo1 {
	right: 14.70%;	
	width: 4%;
	margin: 0.5% 0.0% 0.0% 1.5%;
	}
	
	.maCoPrKlBiBeTe1, .maCoPrKlBiBeTe2 { /* Beschreibungstext unter den kleinen Bildern */
	color: black;
	width: 93%;
	text-align: center;
	margin: 0% 0% 8.5% 7.0%;
	padding: 2.0% 0.0% 2.0% 0.0%;		
	font-size: 0.8vw;
	font-weight: 600;		
	}
	
	.maCoPrKlBiBeTe1 {
	display: none;		
	}	

	.maCoPrTe1 {
	width: 100%;
	border-color: aqua;
	border-width: 0px;
	text-transform: uppercase;
	margin: 2.0% 0.0% 0.5% 0.0%;
	color: orange;
	font-size: 2.2vw;
	}

	.maCoPrTe2 {
	display: block;
	width: 21.5%;
	margin: 0.0% 0.0% 0.0% 2.0%;
	border-color: aqua;
	border-width: 0px;
	font-weight: 600;
	font-size: 1.5vw;
	}

	.maCoPrTe3 {
	width: 100%;
	text-transform: uppercase;
	margin: 2.0% 0.0% 0.5% 0.0%;
	color: orange;
	font-size: 2.2vw;		
	}
	
	#maCoPrTe3 {
	display: none;
	}	

	.maCoPrTe4 {
	width: 100%;
	margin: 0.0% 0.0% 0.0% 2.0%;
	font-size: 1.5vw;		
	}
	
	.maCoPrTe5 {
	display: block;
	width: 75.5%;
	margin: 0.0% 0.0% 0.0% 1.0%;
	font-size: 1.5vw;		
	}	

	.maCoPrLi1 {
	width: 100%;
	text-transform: uppercase;
	color: orange;
	text-align: right;
	font-size: 1.5vw;		
	}
	
	/* Einstellungen zu den News / Referenzen, Desktop small*/
	
	.maCoNeRe0 {
	width: 28.0%;
	border-color: aqua;
	border-width: 0px;
	padding: 0% 0.0% 0% 0%;
	}
	
	.maCoNeRe1 { /* News / Referenzen- Container */
	width: 100%; /* Einstellung Containergröße */
	margin-left: 1.0%; /* Abstand links */
	padding-top: 1.0%; /* Einstellen der relativen Höhe zu den Projekten */
	border-color: red; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	}
	
	.maCoNeReUe1 {
	text-transform: uppercase; /* Alles in Grossbuchstaben */	
	font-size: 2.2vw; /* Einstellung der Schrift News / Referenzen */		
	border-color: green; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	margin: 1.5% 0% 1% 0%; /* Abstand Wort News / Referenzen zu den eigentlichen News / Referenzen */
	}
	
	.maCoNeReCo1 { /* Container für eine News / Referenzen-Meldung */
	width: 100%;
	padding: 1% 0% 0% 2%;
	border-color: blue; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	}
	
	.maCoNeReIm0 { /* Einstellungen für Bilder in den News / Referenzen */
	display: none;
	width: 26%;	/* Größe im Container */
	margin: 1.2% 2% 2% 2%;
	}
	
	.maCoNeReIm1 { /* Einstellungen für Bilder in den News / Referenzen */
	display: block;
	width: 50%;	/* Größe im Container */
	margin: 1.2% 2% 2% 10%;
	}	
	
	.maCoNeReDa1 { /* Einstellungen zum Datum News*/
	color: orange;
	font-size: 1.60vw;
	margin: 0.5% 0% 0% 7%;		
	}
	
	.maCoNeReDa2 { /* Einstellungen zum Datum Referenzen*/
	color: orange;
	font-size: 1.30vw;
	margin: 0.5% 0% 0% 0%;
	width: 100%;
	}	
	
	.maCoNeReTeHe1 { /* Einstellungen zum News / Referenzentext Header */
	width: 100.0%;	
	color: gray;
	font-size: 1.30vw;
	margin: 2% 0% 0% 0%;
	}
	
	.maCoNeReTe1 { /* Einstellungen zum News / Referenzentext */
	width: 100%;			
	color: gray;
	font-size: 1.30vw;
	margin: 2.0% 0% 0% 0%;
	padding: 0% 3% 0% 0%;		
	}	
	
	.maCoNeReLi1 { /* Einstellungen zum Link */
	color: orange;
	font-size: 1.30vw;
	padding: 2% 2% 3% 0%;
	text-transform: uppercase;
	}
	
/***************************** Profil **************************/

.prCo0 { /* Profil Container*/
	float: left;
	border-color: red;
	border-width: 0px;
	width: 85.2%;
	margin-left: 1.5%;
}

.prCo0:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

.prBe0 { /*Profil Bereich */
	float: left;
	text-transform: uppercase;
	width: 100%;
	color: grey;
	margin-top: 0%;
	margin-bottom: 0.3%;
}

.prBe1 { /*Profil Bereich */
	float: left;
	text-transform: uppercase;
	width: 100%;
	color: grey;
	margin-top: 1%;
	margin-bottom: 0.3%;
}

.prBeTe0 { /*Profil Bereich Text0 */
	float: left;
	width: 100%;
	margin-left: 1%;
	font-size: 1vw;		
}

.prBeTe1 { /*Profil Bereich Text1 */
	float: left;
	width: 100%;
	margin-left: 1%;
	font-size: 1vw;		
}

.prBeTe2 { /*Profil Bereich Text2 */
	float: left;
	width: 100%;
	margin-left: 0.8%;
	font-weight: 400;
	color: grey;
	font-size: 1vw;		
}

.prBeEn1 { /*Profil Bereich Ende1 */
	float: left;
	text-transform: uppercase;	
	width: 100%;
	color: black;
	margin-top: 1%;
	margin-bottom: 0.8%;
	font-size: 1vw;		
}
	
/*************************** Partner ***************************/	

	.maPaCo0 {
		width: 100%;
		margin-left: 1.4%
	}

	.maPaCo1 {
		width: 97.05%;
		margin-top: 1.5%;
		margin-right: 1%;
	}

	.maPaWs1 {
		width: 100%;	
	}

	.maPaBi1 {
		width: 41%;
		margin-left: 0.0%;
	}

	.maPaTe0 {
		width: 100%;
		font-size: 1.00vw;
		margin-bottom: 0.3%;
	}

	.maPaTe0Te1 {
		float: left;
		display: block;
		width: 55%;
		font-size: 1.70vw;
		color: black;
		font-weight: 600;
		margin-right: 0.5%;
		margin-top: 0.0%;
		margin-bottom: 0.3%;
	}

	.maPaTe0Te2 {
		float: left;
		display: block;
		width: 55%;
		font-size: 1.57vw;
		font-style: italic;
		margin-top: 0.1%;
		margin-bottom: 0.3%;	
	}

	.maPaTe1 {
		width: 55.5%;
		margin-left: 2.5%;
		color: grey;
	}

	.maPaTePa1 {
		width: 100%;
		font-size: 1.83vw;
		text-transform: uppercase;
		color: orange;
		margin-top: 3.0%;
	}

	.maPaTePa2 {
		width: 95%;	
		font-size: 1.45vw;
		margin-left: 3.5%;
		margin-top: 1.5%;
	}
	
/********************** Main Google Maps ***********************/
	
	.maGoCo1 {
	width: 97%;
	height: 500px;
	margin-left: 1.45%;
}

	.maGoMa1, .maGoMa2{ /* Einstellungen zur Anfahrt, Desktop, small */
	width: 91%;
	height: 498px;	
	}
	
	.maGoMaTe1, .maGoMaTe2 {
	width: 27.50%;
	padding: 1.00% 1.00% 1.20% 1.00%;
	border-top-right-radius: 25px;
	font-size: 1.35vw;
	}
	
/*********************** Main Downloads ************************/

	.maDoCo0{ /* Main Download Container */
	margin-left: 3.25%;
	padding-top: 0%;
	}

	.maDoUlKa1{ /* Main Download Unsortierte Liste Kategorie */
	font-size: 1.54vw;
	margin-bottom: 1%;
	width: 65%;
	padding-top: 1%;
	font-weight: 400;
	}

	.maDoUlKa11{ /* Main Download Unsortierte Liste Kategorie */
	font-size: 1.54vw;
	margin-bottom: 1%;
	width: 30%;
	padding-top: 1%;
	font-weight: 400;
	}	
	
	.maDoUlKa12{ /* Main Download Unsortierte Liste Kategorie */
	display: none;
	font-size: 1.54vw;
	margin-bottom: 1%;
	width: 0%;
	padding-top: 1%;
	font-weight: 400;
	}	

	.maDoLiEl1{ /* Main Download Listen Element */
	margin-left: 1.0%;
	width: 31.20%;
	margin-bottom: 2%;
	}

	.maDoLiEl11{ /* Main Download Listen Element */
	margin-left: 33.0%;
	width: 31.20%;
	margin-bottom: 2%;
	}

	.maDoLiElBi1{ /* Main Download Listen Element Bild */
	width: 98.0%;
	margin-bottom: 0%;
	}

	.maDoLiElTeCo1{
	width: 98%;
	margin-left: 0%;
	border-color: grey;
	border-width: 0px 1px 1px 1px;
	background-color: #F4F4F4;
	}
	
	.maDoLiElTeCo2 {
	padding-top: 2%;
	padding-left: 2%;
	border-color: red;
	border-width: 0px;
	}
	
	.maDoLiElTeCo2:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

	.maDoLiElTe1{ /* Main Download Listen Element Text */
	font-size: 1.3vw;
	width: 30%;
	color: orange;
	text-transform: uppercase;
	font-weight: 600;
	}
	
	.maDoPf1, .maDoPf2, .maDoPf3, .maDoPf4, .maDoPf5 {
	padding-top: 1.55%;
	width: 4.0%;
	padding-right: 0.5%;
	}

	.maDoLiElTe2{ /* Main Download Listen Element Text */
	margin-left: 4%;
	font-size: 1.3vw;
	width: 95%;
	margin-bottom: 2%;		
	}

	.maDoLiElTe3{ /* Main Download Listen Element Text */
	margin-left: 6.5%;
	margin-top: 1%;
	font-size: 1.3vw;
	width: 90%;
	font-weight: 600;
	}
	
	.maDoLiElTe4{ /* Main Download Listen Element Text */
	margin-left: 6.5%;
	font-size: 1.3vw;
	width: 90%;
	margin-bottom: 4%;
	}
	
	.maDoLiElAb1 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb2 {
	width: 100%;
	float: left;
	padding-bottom: 7.80%;
	}
	
	.maDoLiElAb3 {
	width: 100%;
	float: left;
	padding-bottom: 6.00%;
	}
	
	.maDoLiElAb4 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb5 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb6 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb7 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb8 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb9 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb10 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb11 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb12 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb13 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}	
	
	.maDoLiElAb14 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb15 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}
	
	.maDoLiElAb16 {
	width: 100%;
	float: left;
	padding-bottom: 18.900%;
	}
	
	.maDoLiElAb17 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}	
	
	.maDoLiElAb18 {
	width: 100%;
	float: left;
	padding-bottom: 00.00%;
	}
	
	.maDoLiElAb19 {
	width: 100%;
	float: left;
	padding-bottom: 18.900%;
	}
	
	.maDoLiElAb20 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}
	
	/** Profil, Kontakt, Impressum, Datenschutz allg. Einstell. ****/

	.maXxTeX1{
		display: block;
		float: left;
		width: 97%;
		background-color: #f0f0f0;
		padding: 1% 2% 1% 2%;
		margin-bottom: 1.9%;
		margin-left: 0%
	}
	
    .maXxTe1{
        width: 97%;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.8vw;
        margin-bottom: 0.9%;
    }

    .maXxTe2{
        width: 100%;
        color: black;
        font-size: 1.6vw;		
    }

    .maXxTe3{
        width: 100%;
        color: black;
        font-size: 1.6vw;		
    }

    .maXxTe4{
        width: 100%;
		font-size: 1.6vw;
		font-weight: 600;
    }

/*************************** Kontakt ***************************/

    .maKoBi1 {
		border-width: 2px;
		border-color: #f0f0f0;		
    }
	
	.maKoBi2 {
		border-width: 2px;
		border-color: #f0f0f0;		
    }
	
	.maKoCo0 {
		width: 97%;
		margin-left: 1.5%;
		border-width: 0px;
		border-color: black;
		margin-bottom: 1%;
    }
	
	.maKoCo1 {
		width: 28%;
		border-width: 0px;
		border-color: black;
    }
	
	.maKoCo2 {
		width: 42.3%;
		border-width: 0px;
		border-color: black;
		margin-left: 2%;		
		padding: 1%;
		padding-bottom: 1.6%;
		background-color: #f0f0f0;
    }
	
	.maKoCo3 {
		width: 25.7%;
		border-width: 0px;
		border-color: black;
		margin-left: 2%;
    }
	
	.maKoTe0 {
		width: 100%;
		border-width: 0px;
		border-color: black;
		margin-bottom: 2%;
		font-size: 1.1vw;		
    }
	
	.maKoTe1 {
        color: orange;
        text-align: center;
        padding-top: 1.5%;
		font-size: 1.3vw;		
	}
	
	.maKoTe2 {
		color: black;
		font-weight: 600;
		margin-bottom: 0.0%;
		font-size: 1.3vw;	
    }
	
	.maKoTe3 {
		color: black;
		font-size: 1.3vw;			
    }
	
	.maKoTe4 {
		color: black;
		margin-bottom: 1.5%;
		font-size: 1.3vw;		
    }	
	
	.maKoTe0Te1 {
		font-weight: 600;
		color: black;
		font-size: 1.3vw;		
    }
	
	.maKoTe0Te2 {
		color: black;
		font-style: italic;
		font-size: 1.3vw;			
	}
	
	
	.maKoTe0Te4 {
		display: none;
	}	
	
	.maKoQr1 {
    } 

    .maKoWs1 {
    }

/***************************************************************/
	
	/* Einstellungen zum Footer, Desktop small*/	
	
	.fo1 {  /* Gesamthintergrund im Footer, Anschrift und Logo */
	width: 99.5%;
	margin: 1.0% 0.3% 0.0% 0.3%;		
	}
	
	.foAnTnCo0 { /* Container, in dem sich die gesamte Anschrift befindet */
	width: 68.7%;	
	}
	
	.foAnTnCo1 {
	padding: 1.0% 0% 1.0% 2.0%;			
	}
	
	.foAnTnIm1 { /* Text IMPRESSUM */
	font-size: 2.3vw;
	}
	
	.foAnTnCr1 {  /* Text Copyright */
	font-size: 1.0vw;
	color: orange;
	margin: 0.0% 0.0% 1.0% 0.0%;			
	}	

	.foAnTnCo2 { /* Text ThomNet- Anschrift 1 */
	padding: 0.0% 0% 0.0% 2.0%;
	font-size: 1.5vw;		
	border-color: red;
	border-width: 0px
	}

	.foAnTnCo3 {  /* Text ThomNet- Anschrift 2 */
	padding: 0.0% 0% 0.0% 3.5%;
	font-size: 1.5vw;	
	border-color: red;
	border-width: 0px	
	}

	.foAnTnCo4 {  /* Text ThomNet- Anschrift 3 */
	padding: 0.0% 0% 0.0% 3.5%;
	font-size: 1.5vw;		
	border-color: red;
	border-width: 0px		
	}
	
	.foAnTnTh1 { /* Text Dipl.-Ing. Thomas Hülsmann */
	padding: 7.0% 0.0% 0.0% 0.0%;
	font-weight: 700;
	}
	
	.foAnTnPe1 { /* Text Pestalozzistrasse */
	padding: 7.0% 0.0% 0.0% 0.0%;			
	}
	
	.foAnTnPh1 { /* Text Phone */ 
	padding: 5.0% 0.0% 0.0% 0.0%;
	}
	
	.foAnTnMo1 { /* Text Mobil */ 
	padding: 0.0% 0.0% 10.0% 0.0%;		
	}
	
	.foAnTnIn1 { /* Text Internet */ 
	padding: 0.0% 0.0% 0.0% 0.0%;
	}
	
	.foAnTnUs1 { /* Text Umsatzsteuer */ 
	padding: 5.0% 0.0% 0.0% 0.0%;
	}
	
	/* Einstellungen Logo im Footer */
	
	.foTnLo1 {
	width: 30.0%; /* Einstellung der Größe des ThomNet- Logos */
	margin-left: 0.0%; /* Verschieben des Inhalts im Logo- Container nach rechts */
	border-left-color: white; /* Farbe Strich neben Logo*/
	border-left-color: #cacaca;	/* Farbe Strich neben Logo*/	
	border-left-width: 0px; /* Einstellung der Breite des vertikalen Strichs neben dem ThomNet- Logo */
	}
	
	.foTnLo2 {
	display: none;	
	}	

	.foTnLoTe1 {
	border-color: red;
	border-width: 0px;
	font-size: 3.0vw;
	font-weight: 400;
	margin: 2.0% 0.0% 0.0% 6.0%;		
	}

	.foTnLoTe2 {
	font-size: 1.0vw;
	color: orange;
	margin: 0.0% 0.0% 1.0% 6.0%;		
	border-color: red;
	border-width: 0px;
	}
	
	.foTnLoImBe1 {
	margin: 6.3% 0.0% 0.0% 0.0%; /* Hier wird die vertikale Länge des Strichs neben dem Logo eingestellt */
	border-color: red; /* temporärer Test */
	border-width: 0px; /* temporärer Test */
	}
	
	.foTnLoIm1 { /*  */
	width: 12.1%;
	margin: 0.0% 0.0% 7.4% 6.0%;
	border-color: red;
	border-width: 0px;		
	}
	
	.foTnLoBe0 {
	width: 55%;
	font-size: 1.5vw;
	border-color: red;
	border-width: 0px;
	margin: 0.0% 0.0% 10.0% 6.0%;		
	}
		
	.foTnLoBe1 {
	margin: 4.5% 0.0% 0.0% 0.0%;
	}
	
	.foTnLoBe2 {
	margin: 6.0% 0.0% 0.0% 0.0%;		
	}	
	
	.foTnLoBe3 {
	margin: 7.0% 0.0% 0.0% 0.0%;		
	}
	
	.soNwCo1 { /* Container für die Logos der sozialen Netzwerke */
	width: 99.5%;
	margin: 0.0% 0% 0% 0.3%;
	}
	
	.soNwBi1 {
	width: 2.9%;
	margin-right: 0.0%;
	margin-right: 1.32%;
	margin-bottom: 1.0%;		
	margin-top: 1.0%;
	float: right;
	}
		
	.naTe3 {
	text-align: center;
	width: 15%;
	text-transform: uppercase;
	margin: 1.0% 0.0% 0.0% 1.3%;
	padding: 0.0% 0.0% 0.2% 0.0%;
	font-size: 1.8vw;
	color: white;
	border-color: black;
	border-width: 0px;
	}
	
	.naTe3:hover {
	color: orange;
	}
		
/* Spezielle css- Eigenschaften für die Switche in Einstellungen, PC klein */
		
/* Normal Track */
	input[type="checkbox"].ios-switch + div {
		width: 40px; /* 40px */
		height: 20px; /* 20px */
	}
		
/* Big Track */
	input[type="checkbox"].bigswitch.ios-switch + div {
		width: 35px; /* 50px, Switchweg- Breite */
		height: 15px; /* 25px, Switchweg- Höhe */
	}

		
/* Normal Knob */
	input[type="checkbox"].ios-switch + div > div {
		width: 18px; 
		height: 18px;
	}
		
/* Big Knob, Knopf in der Umrahmung */
	input[type="checkbox"].bigswitch.ios-switch + div > div {
		width: 13px; height: 13px; /*23, 23*/
		margin-top: 0px;
		}
		
/* Checked Big Knob (Blue Style) */
	input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
		-webkit-transform: translate3d(19px, 0, 0); /*25*/
	}
	
	.TextvorSwitch {
		width: 6%;
		margin-top: 1%;
		padding: 0%;
		font-size: 1.8vw; /* Schrifthöhe */
		}

	.switchWrapper {
		width: 5.0%;
		margin-top: 0.9%;
		}
						
	.TextnachSwitch1 {
		width: 13%;
		font-size: 1.8vw; /* Schrifthöhe */
		margin-top: 0.9%;
		}

	.TextnachSwitch2 {
		width: 47%;
		font-size: 1.8vw; /* Schrifthöhe */
		margin-top: 0.9%;
		}

	.vierButton0 {
		margin-top: 2%;
		margin-bottom: 2%;
		}

	.vierButton1 {
		width: 22.0%;
		font-size: 1.5vw;
		}
    
    /* Projekt-Insta */
    
    /* No Projects Desktop Small  */   
    .no-projects{
        width: 96%;
        float: left;
        background: white;
        border: 1px solid #888;
        aspect-ratio: 21 / 2;
        padding: 1.2%;
        margin-left: 1.8%;
        text-align: center;
        font-size: 1.2em;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center; 
    }

    /* Projekt-Button Desktop Small */
    .project-button {
        width: 31.7%;
        margin-right: 1%;
        border: 1px solid #888;
        aspect-ratio: 21 / 4;
        margin-bottom: 1.5%;
        font-size: 1.2em;
    }
    
        
    /* Bilderliste Desktop small */
    .image-list{
        width: 96%;
        float: left;
        margin: 2.0%;
    }
    
    /* Bilderliste Desktop small */
    #imageList{
        width: 96%;
        float: left;
        margin: 2.0%;
    }

    /* Bilder Desktop small */
    .image-item {
        width: 31.7%;
        float: left;
        border: 1px solid #888;
        margin-bottom: 1.5%;
    }

    .image-item img {
        width: 100%;
        float: left;
    }
}
		
/***************************************************************/
/*                                                             */
/*    Media-Queries für das responsive Design, Desktop, big    */
/*                                                             */
/***************************************************************/

@media (min-width: 1200px) and (max-width: 4000px) {

	body {
	display: block;
	width: 80%;
	height: 100%;
	margin: 0 auto;
 	background-image:url(../bilder20/farben/gr1.png);
	background-size: 100% 100%;
	}
	
		
	#loader {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 6;
		margin: -70px 0 0 -70px;
		border: 12px solid orange;
		border-radius: 50%;
		border-top: 12px solid white;
		width: 120px;
		height: 120px;
		-webkit-animation: spin 1s linear infinite;
		animation: spin 1s linear infinite;
	}

	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	
	.naCoUl1 {
	display: none;
	}	

	#heBiCo1 {
	width: 87.0%;
	}
	
	.heBi {
	width: 20.0%;
	padding: 0.5%;		
	}
	
	.heBi img{
	width:13.20%;
	position:absolute;
	z-index:1;
}	
	
	.heMoMe0 { /* Ausschalten des modalen Menüs */
	display: none;
	}
	
	#tnLo1 {
	width: 11.3%;
	margin-left: 1.5%;
	margin-top: 0.5%;
	padding-bottom: 0.5%;		
	}

	.hehe1 { /* Header-Headline 1 */
	font-weight: 500;
	margin: 4% 0% 0% 0%;
	font-size: 2.5vw;
	}
	
	.hehe2 { /* Header-Headline 2 */
	font-weight: 300;
	margin: 0% 0% 1% 0%;
	font-size: 1.25vw;
	}
	
	.hehe3 { /* Header-Headline 1, Buchstabe "o" */
	font-weight: 500;
	font-size: 2.5vw;
	}
	
	.hehe4 { /* Header-Headline 1, Wort "smart" */
	font-weight: 500;
	font-size: 2.5vw;
	}
	
/***************************************************************/
	
	.hehe5 {
      text-align: center;
      width: 33.3%;
      padding: 1.0% 1.0% 1.0% 1.0%;
      margin: 1.0% 0.0% 0.0% 0.0%;
      font-size: 1.1vw;
      font-weight: 400;
	}

	.hehe7 {
      width: 100%;
      text-align: center;
      font-weight: 600;
      font-size: 1.3vw;
      margin: 0% 0% 3% 0%;
	}
	
	.hehe8 {
      display: block;
      text-align: center;
      width: 100%;
      margin-top: 0.5%;
      margin-bottom: 0%;		
      font-weight: 600;
      color: orange;
      font-size: 1.3vw;		
	}
	
	.heheCo0 {
      width: 96%;
      margin: 4.0% 0.0% 2.0% 2.0%;
      padding: 0.0% 0.0% 2.0% 0.0%;
	}
	
/***************************************************************/		
	
	.heLe {
	display: block;
	margin: 3%;	
	}
	
	.naCoUl2 {
	width: 100%;
	}
	
	.naCo2 {
	width: 87%;
	margin-top: 16.0%;
	}
	
	.naCo2 a {
	color: grey;
	font-weight: 400;
	}
	
	.naCo2 a:hover {
	color: orange;
	}
	
	.naCo2 a:active {
	color: orange;
	}
	
	.naTe2 {
	font-size: 1.2vw;
	padding-left: 0.5%; 
	padding-right: 2.5%;
	}

	.naTe2 a{
	color: black;
	font-weight: 400;
}	
	#naTr1 {
	display: none;	
	}
	
	.maCoTe0, .maCoTe0Insta { /* Überschrift zum Main-Container, Desktop, big*/
	width: 70%;
	font-weight: 400;
	font-size: 1.60vw;
	margin: 2.0% 0.0% 0.0% 1.5%;
	border-color: red;
	border-width: 0px;	
	}

	.roSt0, .roSt0Insta {  /* roter Strich unter Überschrift, Desktop, big */
	border-width: 3px 0px 0px 0px;
	margin: 2.0% 0.1% 2.0% 0%;
	}
	
	.maCoPr0 {
	width: 73%; /* Größe des Containers für die aktuellen Projekte einstellen */
	margin: 0.0% 0% 0% 0.75%; /* Alle Projekt werden leicht nach unten geschoben */
	}	
	
	.maCoInCo1, .maCoInCo2, .maCoInCo3, .maCoInCo4, .maCoInCo5, .maCoInCo6  {
	width: 46.9%;
	}
	
	/* Main Container Inhalte Container, 6 mal*/
	.maCoInCo1 {
	margin: 1% 1% 1% 1%; /* 0% 1% 1% 2% */
	}
	.maCoInCo2 {
	margin: 1% 1% 1% 1%; /* 0% 1% 1% 2% */
	}
	.maCoInCo3 {
	margin: 1% 1% 1% 1%; /* 0% 1% 1% 2% */
	}
	.maCoInCo4 {
	margin: 1% 1% 1% 1%; /* 0% 1% 1% 2% */
	}
	.maCoInCo5 {
	margin: 1% 1% 1% 1%; /* 0% 1% 1% 2% */
	}
	.maCoInCo6 {
	margin: 1% 1% 1% 1%; /* 0% 1% 1% 2% */
	}
	
	.maCoInTeCo1 {
	width: 27.7%;
	border-width: 0px 0px 0px 0px;
	padding: 5.0% 0.0% 0.0% 0.0%
	}
	
	.maCoInTe1 {
	font-size: 1.2vw;
	padding: 3.0% 0.0% 0.0% 0.0%;
	}

	.maCoInTe2 {
	font-size: 1.2vw;
	}

	.maCoInTe3 {
	font-size: 1.2vw;
	}
	
	.maCoInTe4 {
	font-size: 1.2vw;
	}
	
	.maCoInNu1 { /* Projektbezeichnung unter den Projektbildern*/
	padding: 2% 0% 2% 0%;
	font-size: 1.0vw;
	font-weight: 600;
	color: black;
	}
	
    .maCoInReMe {
		margin-top: 2.5%;
		margin-bottom: 3%;
		font-weight: 400;
		font-size: 1.1vw;
    }	
	
	/* Projekt-Karten */

	.maCoPrKa0 {
	display: block;
	border-color: aqua;
	border-width: 0px;
	margin: 0.0% 0.0% 2.0% 0.0%;
	}

	.maCoPrUe1 {
	width: 75%;
	text-transform: uppercase;
	border-color: aqua;
	border-width: 0px;
	margin: 3.0% 0% 1.0% 1.3%;
	font-size: 1.5vw;
	}
	
    .maCoPrUe3 {
        margin-left: 4%;
    }		
	
	.maCoUe1, .ma {
		width: 60%;
		text-transform: uppercase;
		border-color: aqua;
		border-width: 0px;
		margin: 3.0% 0% 1.0% 1.3%;
		font-size: 1.5vw;
	}

    .maCoUe2, .maCoUe2Insta {
		font-weight: 600;
    }

    .maCoUe3, .maCoUe2Insta {
		margin-left: 5%;
    }


	.maCoPrDl1 {
	width: 20%;
	text-transform: uppercase;
	text-align: right;
	border-color: aqua;
	border-width: 0px;
	margin: 3.5% 1.4% 1.0% 1.3%;
	font-size: 1.0vw;
	color: orange;
	}
	
	.maCoPrDl2 {
	width: 22%;
	text-transform: uppercase;
	text-align: right;
	border-color: aqua;
	border-width: 0px;
	margin: 2.8% 1.4% 0.0% 1.3%;
	font-size: 1.0vw;
	color: orange;
	}	

	.roSt1 {
	width: 97.2%;
	border-color: orange;
	border-width: 2px;
	margin: 0.50% 0.00% 1.90% 1.40%;		
	
	}
	
	.maCoPrGrBiTe0 {
	width: 80.0%;
	margin: 0.00% 0.00% 0.00% 1.40%;
	}
	
	.maCoPrGrBi1 {
	width: 100%;		
	}
	
	.maCoPrGrBiBeTe1 { /* Beschreibungstext unter dem großen Bild */
	color: black;
	text-align: center;
	margin: 0% 0% 0.0% 0.0%;
	padding: 1.0% 0.0% 1.0% 0.0%;		
	font-size: 1.5vw;
	font-weight: 600;
	}
	
	.maCoPrGrBiBeTe2 { /* Beschreibungstext unter dem großen Bild, kurz */
	display: none;
	}	

	.maCoPrKlBi0 {
	border-color: aqua;
	border-width: 0px;
	width: 16.8%;
	margin: 0.0% 0.0% 0.0% 0.5%		
	}
		
	.maCoPrKlBi1 {
	width: 100%;
	padding: 0% 0% 0.0% 7.0%;
	}
	
	.maCoPrKlBiZo1 {
	right: 20.30%;	
	width: 3%;
	margin: 0.5% 0.0% 0.0% 1.5%;
	}
	
	.maCoPrKlBiBeTe1, .maCoPrKlBiBeTe2 { /* Beschreibungstext unter den kleinen Bildern */
	color: black;
	width: 93%;
	text-align: center;
	margin: 0% 0% 8.5% 7.0%;
	padding: 2.0% 0.0% 2.0% 0.0%;		
	font-size: 0.7vw;
	font-weight: 600;		
	}
	
	.maCoPrKlBiBeTe1 {
	display: none;		
	}	

	.maCoPrTe1 {
	width: 100%;
	border-color: aqua;
	border-width: 0px;
	text-transform: uppercase;
	margin: 2.0% 0.0% 0.5% 0.0%;
	color: orange;
	font-size: 1.5vw;
	}

	.maCoPrTe2 {
	display: block;
	width: 18.5%;
	margin: 0.0% 0.0% 0.0% 2.0%;
	border-color: aqua;
	border-width: 0px;
	font-weight: 600;
	}

	.maCoPrTe3 {
	width: 100%;
	text-transform: uppercase;
	margin: 2.0% 0.0% 0.5% 0.0%;
	color: orange;
	font-size: 1.5vw;		
	}
	
	#maCoPrTe3 {
	display: none;
	}	

	.maCoPrTe4 {
	width: 100%;
	margin: 0.0% 0.0% 0.0% 2.0%;		
	}
	
	.maCoPrTe5 {
	display: block;
	width: 76.5%;
	margin: 0.0% 0.0% 0.0% 1.0%;	
	}	

	.maCoPrLi1 {
	width: 100%;
	text-transform: uppercase;
	color: orange;
	text-align: right;
	}
	
	/* Einstellungen zu den News / Referenzen, Desktop big*/
	
	.maCoNeRe0 {
	width: 25.0%;
	border-color: aqua;
	border-width: 0px;
	padding: 0% 0.0% 0% 0%;
	margin-bottom: 1%;
	}
	
	.maCoNeRe1 { /* News / Referenzen- Container */
	width: 100%; /* Einstellung Containergröße */
	margin-left: 0.0%; /* Abstand links */
	padding-top: 1.0%; /* Einstellen der relativen Höhe zu den Projekten */
	border-color: red; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	}
	
	.maCoNeReUe1 {
	text-transform: uppercase; /* Alles in Grossbuchstaben */	
	font-size: 1.5vw; /* Einstellung der Schrift News / Referenzen */		
	border-color: green; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	margin: 0% 0% 1% 0%; /* Abstand Wort News / Referenzen zu den eigentlichen News / Referenzen */
	}
	
	.maCoNeReCo1 { /* Container für eine News / Referenzen-Meldung */
	width: 100%;
	padding: 1% 0% 0% 2%;
	border-color: blue; /* Testrahmen um Container */
	border-width: 0px; /* Testrahmen um Container */
	}
	
	.maCoNeReIm0 { /* Einstellungen für Bilder in den News / Referenzen */
	display: none;
	width: 26%;	/* Größe im Container */
	margin: 1.2% 2% 2% 2%;
	}
	
	
	.maCoNeReIm1 { /* Einstellungen für Bilder in den News / Referenzen */
	display: block;
	width: 55%;	/* Größe im Container */
	margin: 1.2% 2% 2% 09%;
	}	
	
	.maCoNeReDa1 { /* Einstellungen zum Datum */
	color: orange;
	font-size: 1.30vw;
	margin: 0.5% 0% 0% 0%;		
	}
		
	.maCoNeReDa2 { /* Einstellungen zum Datum */
	color: orange;
	font-size: 1.20vw;
	margin: 0.5% 0% 0% 5%;
	width: 100%;
	}
	
	.maCoNeReTeHe1 { /* Einstellungen zum News / Referenzentext Header */
	width: 100.0%;	
	color: gray;
	font-size: 1.00vw;
	margin: 2% 0% 0% 0%;
	}
	
	.maCoNeReTe1 { /* Einstellungen zum News / Referenzentext */
	width: 100%;			
	color: gray;
	font-size: 1.00vw;
	margin: 2.0% 0% 0% 0%;
	padding: 0% 3% 0% 0%;		
	}	
	
	.maCoNeReLi1 { /* Einstellungen zum Link */
	color: orange;
	font-size: 1.10vw;
	padding: 2% 2% 5% 0%;
	text-transform: uppercase;
	}

/***************************** Profil **************************/

.prCo0 { /* Profil Container*/
	border-color: red;
	border-width: 0px;
	width: 85.2%;
	margin-left: 1.5%;
}

.prBe0 { /*Profil Bereich */
	text-transform: uppercase;
	width: 100%;
	color: grey;
	margin-top: 0%;
	margin-bottom: 0.3%;
}

.prBe1 { /*Profil Bereich */
	text-transform: uppercase;
	width: 100%;
	color: grey;
	margin-top: 1%;
	margin-bottom: 0.3%;
}

.prBeTe0 { /*Profil Bereich Text0 */
	width: 100%;
	margin-left: 1%;
	font-size: 1vw;	
}

.prBeTe1 { /*Profil Bereich Text1 */
	width: 100%;
	margin-left: 1%;
	font-size: 1vw;	
}

.prBeTe2 { /*Profil Bereich Text2 */
	width: 100%;
	margin-left: 0.8%;
	font-weight: 400;
	color: grey;
	font-size: 1vw;
}

.prBeEn1 { /*Profil Bereich Ende1 */
	text-transform: uppercase;	
	width: 100%;
	color: black;
	margin-top: 1%;
	margin-bottom: 0.8%;
	font-size: 1vw;	
}
	
/*************************** Partner ***************************/	

	.maPaCo0 {
		width: 100%;
		margin-left: 1.4%
	}

	.maPaCo1 {
		width: 48.05%;
		margin-top: 1.5%;
		margin-right: 1%;
	}

	.maPaWs1 {
		width: 100%;	
	}

	.maPaBi1 {
		width: 51%;
		margin-left: 0.0%;
	}

	.maPaTe0 {
		width: 100%;
		font-size: 1.00vw;
		margin-bottom: 0.3%;
	}

	.maPaTe0Te1 {
		float: left;
		display: block;
		width: 35%;
		font-size: 1.00vw;
		color: black;
		font-weight: 600;
		margin-right: 0.5%;
		margin-top: 0.0%;
		margin-bottom: 0.3%;
	}

	.maPaTe0Te2 {
		float: left;
		display: block;
		width: 55%;
		font-size: 0.87vw;
		font-style: italic;
		margin-top: 0.1%;
		margin-bottom: 0.3%;	
	}

	.maPaTe1 {
		width: 46.5%;
		margin-left: 2.5%;
		color: grey;
	}

	.maPaTePa1 {
		width: 100%;
		font-size: 0.93vw;
		text-transform: uppercase;
		color: orange;
		margin-top: 3.0%;
	}

	.maPaTePa2 {
		width: 95%;	
		font-size: 0.75vw;
		margin-left: 3.5%;
		margin-top: 1.5%;
	}
	
/********************** Main Google Maps ***********************/	
	
	.maGoCo1 {
	width: 97%;
	height: 600px;
	margin-left: 1.45%;
}
	
	.maGoMa1, .maGoMa2{ /* Einstellungen zur Anfahrt, Desktop, big */
	width: 76.66%;
	height: 598px;
	}
	
	.maGoMaTe1, .maGoMaTe2 {
	width: 27.50%;
	padding: 1.00% 1.00% 1.20% 1.00%;
	border-top-right-radius: 25px;
	font-size: 1.05vw;
	}
	
	/*********************** Main Downloads ************************/

	.maDoCo0{ /* Main Download Container */
	margin-left: 3.25%;
	padding-top: 0%;
	}

	.maDoUlKa1{ /* Main Download Unsortierte Liste Kategorie */
	font-size: 1.2vw;
	margin-bottom: 1%;
	width: 49%;
	padding-top: 1%;
	font-weight: 400;
	}

	.maDoUlKa11{ /* Main Download Unsortierte Liste Kategorie */
	font-size: 1.2vw;
	margin-bottom: 1%;
	width: 48%;
	padding-top: 1%;
	font-weight: 400;
	}
	
	.maDoUlKa12{ /* Main Download Unsortierte Liste Kategorie */
	display: none;
	font-size: 1.2vw;
	margin-bottom: 1%;
	width: 48%;
	padding-top: 1%;
	font-weight: 400;
	}	

	.maDoLiEl1{ /* Main Download Listen Element */
	margin-left: 1.0%;
	width: 23.00%;
	margin-bottom: 2%;
	}

	.maDoLiEl11{ /* Main Download Listen Element */
	margin-left: 25.0%;
	width: 23.00%;
	margin-bottom: 2%;
	}

	.maDoLiElBi1{ /* Main Download Listen Element Bild */
	width: 98.0%;
	margin-bottom: 0%;
	}

	.maDoLiElTeCo1{
	width: 98%;
	margin-left: 0%;
	border-color: grey;
	border-width: 0px 1px 1px 1px;
	background-color: #F4F4F4;
	}
	
	.maDoLiElTeCo2 {
	padding-top: 2%;
	padding-left: 2%;
	border-color: red;
	border-width: 0px;
	}
	
	.maDoLiElTeCo2:after {  /* Clear-Fix */
	content: "'.";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

	.maDoLiElTe1{ /* Main Download Listen Element Text */
	font-size: 0.8vw;
	width: 30%;
	color: orange;
	text-transform: uppercase;
	font-weight: 600;
	}
	
	.maDoPf1, .maDoPf2, .maDoPf3, .maDoPf4, .maDoPf5 {
	padding-top: 1.35%;
	width: 7.3%;
	padding-right: 0.5%;
	}

	.maDoLiElTe2{ /* Main Download Listen Element Text */
	margin-left: 4%;
	font-size: 0.8vw;
	width: 95%;
	margin-bottom: 3%;
	}

	.maDoLiElTe3{ /* Main Download Listen Element Text */
	margin-left: 6.5%;
	font-size: 0.8vw;
	width: 90%;
	}
	
	.maDoLiElTe4{ /* Main Download Listen Element Text */
	margin-left: 6.5%;
	font-size: 0.8vw;
	width: 90%;
	margin-bottom: 4%;
	}
	
	.maDoLiElAb1 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb2 {
	width: 100%;
	float: left;
	padding-bottom: 7.60%;
	}
	
	.maDoLiElAb3 {
	width: 100%;
	float: left;
	padding-bottom: 6.00%;
	}
	
	.maDoLiElAb4 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb5 {
	width: 100%;
	float: left;
	padding-bottom: 0.00%;
	}
	
	.maDoLiElAb6 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb7 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb8 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb9 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb10 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb11 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb12 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb13 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}	
	
	.maDoLiElAb14 {
	width: 100%;
	float: left;
	padding-bottom: 6.50%;
	}
	
	.maDoLiElAb15 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}
	
	.maDoLiElAb16 {
	width: 100%;
	float: left;
	padding-bottom: 18.900%;
	}
	
	.maDoLiElAb17 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}	
	
	.maDoLiElAb18 {
	width: 100%;
	float: left;
	padding-bottom: 00.00%;
	}
	
	.maDoLiElAb19 {
	width: 100%;
	float: left;
	padding-bottom: 18.900%;
	}
	
	.maDoLiElAb20 {
	width: 100%;
	float: left;
	padding-bottom: 18.90%;
	}	
	
/** Profil, Kontakt, Impressum, Datenschutz allg. Einstell. ****/

	.maXxTeX1{
		display: block;
		float: left;
		width: 97%;
		background-color: #f0f0f0;
		padding: 1% 2% 1% 2%;
		margin-bottom: 1.9%;
		margin-left: 0%
	}
	
    .maXxTe1{
        width: 97%;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.3vw;
        margin-bottom: 0.9%;
    }

    .maXxTe2{
        width: 100%;
        color: black;
    }

    .maXxTe3{
        width: 100%;
        color: black;
    }

    .maXxTe4{
        width: 100%;
		font-size: 1.3vw;
		font-weight: 600;
    }

/*************************** Kontakt ***************************/

    .maKoBi1 {
		border-width: 2px;
		border-color: #f0f0f0;		
    }
	
	.maKoBi2 {
		border-width: 2px;
		border-color: #f0f0f0;		
    }
	
	.maKoCo0 {
		width: 97%;
		margin-left: 1.5%;
		border-width: 0px;
		border-color: black;
		margin-bottom: 1%;
    }
	
	.maKoCo1 {
		width: 28%;
		border-width: 0px;
		border-color: black;
    }
	
	.maKoCo2 {
		width: 42%;
		border-width: 0px;
		border-color: black;
		margin-left: 2%;		
		padding: 1%;
		padding-bottom: 1.3%;
		background-color: #f0f0f0;
    }
	
	.maKoCo3 {
		width: 26%;
		border-width: 0px;
		border-color: black;
		margin-left: 2%;
    }
	
	.maKoTe0 {
		width: 100%;
		border-width: 0px;
		border-color: black;
		margin-bottom: 2%;
		font-size: 1.1vw;		
    }
	
	.maKoTe1 {
        color: orange;
        text-align: center;
        padding-top: 1.5%;
		font-size: 1.1vw;		
	}
	
	.maKoTe2 {
		color: black;
		font-weight: 600;
		margin-bottom: 0.0%;
		font-size: 1.1vw;	
    }
	
	.maKoTe3 {
		color: black;
		font-size: 1.1vw;			
    }
	
	.maKoTe4 {
		color: black;
		margin-bottom: 1.5%;
		font-size: 1.1vw;		
    }	
	
	.maKoTe0Te1 {
		font-weight: 600;
		color: black;
		font-size: 1.1vw;		
    }
	
	.maKoTe0Te2 {
		color: black;
		font-style: italic;
		font-size: 1.1vw;			
	}
	
	.maKoTe0Te4 {
		display: none;
	}
	
	.maKoQr1 {
    } 

    .maKoWs1 {
    }

/***************************************************************/
	
	/* Einstellungen zum Footer, Desktop big*/	
	
	.fo1 {  /* Gesamthintergrund im Footer, Anschrift und Logo */
	width: 99.5%;
	margin: 1.0% 0.3% 0.0% 0.3%;		
	}
	
	.foAnTnCo0 { /* Container, in dem sich die gesamte Anschrift befindet */
	width: 68.7%;	
	}
	
	.foAnTnCo1 {
	padding: 1.0% 0% 1.0% 2.0%;			
	}
	
	.foAnTnIm1 { /* Text KONTAKT */
	font-size: 1.8vw;
	}
	
	.foAnTnCr1 {  /* Text Copyright */
	font-size: 0.8vw;
	color: orange;
	margin: 0.0% 0.0% 1.0% 0.0%;			
	}	

	.foAnTnCo2 { /* Text ThomNet- Anschrift 1 */
	padding: 0.0% 0% 0.0% 2.0%;
	font-size: 1.05vw;		
	border-color: red;
	border-width: 0px
	}

	.foAnTnCo3 {  /* Text ThomNet- Anschrift 2 */
	padding: 0.0% 0% 0.0% 3.5%;
	font-size: 1.05vw;	
	border-color: red;
	border-width: 0px	
	}

	.foAnTnCo4 {  /* Text ThomNet- Anschrift 3 */
	padding: 0.0% 0% 0.0% 3.5%;
	font-size: 1.05vw;		
	border-color: red;
	border-width: 0px		
	}
	
	.foAnTnTh1 { /* Text Dipl.-Ing. Thomas Hülsmann */
	padding: 7.0% 0.0% 0.0% 0.0%;
	font-weight: 700;
	}
	
	.foAnTnPe1 { /* Text Pestalozzistrasse */
	padding: 7.0% 0.0% 0.0% 0.0%;			
	}
	
	.foAnTnPh1 { /* Text Phone */ 
	padding: 5.0% 0.0% 0.0% 0.0%;
	}
	
	.foAnTnMo1 { /* Text Mobil */ 
	padding: 0.0% 0.0% 10.0% 0.0%;		
	}
	
	.foAnTnIn1 { /* Text Internet */ 
	padding: 0.0% 0.0% 0.0% 0.0%;
	}
	
	.foAnTnUs1 { /* Text Umsatzsteuer */ 
	padding: 5.0% 0.0% 0.0% 0.0%;
	}	
	
	/* Einstellungen Logo im Footer */
	
	.foTnLo1 {
	width: 27.0%; /* Einstellung der Größe des ThomNet- Logos */
	margin-left: 3.3%; /* Verschieben des Inhalt im Logo- Container nach rechts */
	border-left-color: white; /* Farbe Strich neben Logo*/
	border-left-color: #cacaca;	/* Farbe Strich neben Logo*/	
	border-left-width: 0px; /* Einstellung der Breite des vertikalen Strichs neben dem ThomNet- Logo */
	}
	
	.foTnLo2 {
	display: none;	
	}		

	.foTnLoTe1 { /* Text THOMNET */
	border-color: red;
	border-width: 0px;
	font-size: 2.4vw;
	font-weight: 100;
	margin: 2.0% 0.0% 0.0% 6.0%;		
	}

	.foTnLoTe2 { /* Text STEHT FÜR */
	font-size: 1.0vw;
	color: orange;
	margin: 0.0% 0.0% 1.0% 6.0%;		
	border-color: red;
	border-width: 0px;
	}
	
	.foTnLoImBe1 {
	margin: 4.5% 0.0% 0.0% 0.0%; /* Hier wird die vertikale Länge des Strichs neben dem Logo eingestellt */
	border-color: red; /* temporärer Test */
	border-width: 0px; /* temporärer Test */
	}
	
	.foTnLoIm1 { /* ThomNet Logo */
	width: 12.1%;
	margin: 0.0% 0.0% 7.4% 6.0%;
	border-color: red;
	border-width: 0px;		
	}
	
	.foTnLoBe0 { /* 3 Texte zur Bedeutung voin THOMNET */
	width: 55%;
	font-size: 1.05vw; /* Einstellung der Textgröße*/
	border-color: red;
	border-width: 0px;
	margin: 0.0% 0.0% 10.0% 6.0%;		
	}
		
	.foTnLoBe1 {
	margin: 5.5% 0.0% 0.0% 0.0%;
	}
	
	.foTnLoBe2 {
	margin: 8.0% 0.0% 0.0% 0.0%;		
	}	
	
	.foTnLoBe3 {
	margin: 9.0% 0.0% 0.0% 0.0%;		
	}
	
	.soNwCo1 { /* Container für die Logos der sozialen Netzwerke */
	width: 99.5%;
	margin: 0.0% 0% 0% 0.3%;
	}
	
	.soNwBi1 {
	width: 2.15%;
	margin-right: 0.91%;
	margin-bottom: 1.0%;		
	margin-top: 1.0%;
	float: right;
	}
		
	.naTe3 {
	text-align: center;
	width: 15%;
	text-transform: uppercase;
	margin: 0.9% 0.0% 0.0% 1.3%;
	padding: 0.0% 0.0% 0.2% 0.0%;
	font-size: 1.4vw;
	color: white;
	border-color: black;
	border-width: 0px;
	}
	
	.naTe3:hover {
	color: orange;
	}
	
		
/* Spezielle css- Eigenschaften für die Switche in Einstellungen, PC groß */
		
/* Normal Track */
	input[type="checkbox"].ios-switch + div {
		width: 40px; /* 40px */
		height: 20px; /* 20px */
	}
		
/* Big Track */
	input[type="checkbox"].bigswitch.ios-switch + div {
		width: 35px; /* 50px, Switchweg- Breite */
		height: 15px; /* 25px, Switchweg- Höhe */
	}

		
/* Normal Knob */
	input[type="checkbox"].ios-switch + div > div {
		width: 18px; 
		height: 18px;
	}
		
/* Big Knob, Knopf in der Umrahmung */
	input[type="checkbox"].bigswitch.ios-switch + div > div {
		width: 13px; height: 13px; /*23, 23*/
		margin-top: 0px;
		}
		
/* Checked Big Knob (Blue Style) */
	input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
		-webkit-transform: translate3d(19px, 0, 0); /*25*/
	}
	
	.TextvorSwitch {
		width: 6%;
		margin-top: 1%;
		padding: 0%;
		font-size: 1.5vw; /* Schrifthöhe */
		}

	.switchWrapper {
		width: 5.0%;
		margin-top: 1.0%;
		}
						
	.TextnachSwitch1 {
		width: 15%;
		font-size: 1.5vw; /* Schrifthöhe */
		margin-top: 0.9%;
		}

	.TextnachSwitch2 {
		width: 47%;
		font-size: 1.5vw; /* Schrifthöhe */
		margin-top: 0.9%;
		}

	.vierButton0 {
		margin-top: 1%;
		margin-bottom: 1%;
		}

	.vierButton1 {
		width: 22.0%;
		font-size: 1.5vw;
		}
    
    /* No Projects Desktop big  */   
        .no-projects{
        width: 96%;
        float: left;
        background: white;
        border: 1px solid #888;
        aspect-ratio: 21 / 2;
        padding: 1.2%;
        margin-left: 1.8%;
        text-align: center;
        font-size: 1.2em;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center; 
    }

    /* Projekt-Button Desktop big */
    .project-button {
        width: 31.7%;
        margin-right: 1%;
        border: 1px solid #888;
        aspect-ratio: 21 / 4;
        margin-bottom: 1.5%;
        font-size: 1.2em;
    }
    
    /* Bilderliste Desktop big */
    .image-list{
        width: 96%;
        float: left;
        margin: 2.0%;
    }
    
    /* Bilderliste Desktop big */
    #imageList{
        width: 96%;
        float: left;
        margin: 2.0%;
    }

    /* Bilder desktop big */
    .image-item {
        width: 31.7%;
        float: left;
        border: 1px solid #888;
        margin-bottom: 1.5%;
    }

    .image-item img {
        width: 100%;
        float: left;
    }
}