/* = = = = = = = = = = = = = = = = = Datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */


/* ############################################################ */
/* Allgemein 													*/
/* ############################################################ */

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	font-family: 'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
	font-size: 62.5%;
	line-height: 1.6;
	font-weight: normal;
	height: 100%;
}

body {
	font-size: 1.4rem;
	margin: 0 auto;
}


/* Überschriften */

.ueberschrift-header {
	font-size: 3.0rem !important;
	font-weight: 700 !important;
}

h1, h2, h3, h4, h5 {
	color: #000;
	text-align: left;
	letter-spacing: 0px;
	font-weight: normal;
	text-transform: none;
}

h1 {
	font-size: 3.0rem;
	line-height: 3.7rem;
	margin-top: 0rem;
	margin-bottom: 5.2rem;
}

h2 {text-align:left;
	font-size: 2.4rem;
	line-height: 3.6rem;
	margin-top: 0rem;
	margin-bottom: 3.5rem;
	font-weight: bold;
}

h3 {
	font-size: 2.0rem;
	line-height: 2.8rem;
	margin-top: 1rem;
	margin-bottom: 2.5rem;
	letter-spacing:0 rem;
}

/* Allgemeine Links  */

a {
	background-color: transparent;
	color: #000 ;
	text-decoration: underline;
}

a:hover  {
	color: #000;
	text-decoration: none;
}

/* Absatz / Abstandshalter bei den Boxfenstern zum unteren Rand hin */

p.break  {
	line-height: 7rem;
	margin: 0;
}


/* Quelltext-Erklärungen - wenn vorhanden */
pre {
	white-space: pre-wrap;
	position: relative;
	font-size: 1.5rem;
	padding: 1rem 0.5rem 1rem 0.5rem;
	margin: 2rem auto;
	text-align: center;
	background: #f1f1f1;
	color: #000;
	border: none;
	font-family: 'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
}

pre .extra {
	display: inline-block;
	position: absolute;
	left: 0rem;
	top: 1rem;
	font-size: 2rem;
	color: #5F5F5F;
	font-weight: bold;
	transform: rotate(-45deg);
}



/* ############################################################ */
/* Speziell														*/
/* ############################################################ */

.container_haupt {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	background: #fff;
}

/* Bilder - anpassen der Grösse  */
/*
Wenn Sie eigene einzelne Bilder einbauen, unabhängig von unserem Bilderstystem,
dann werden diese Bilder maximal (max-width) so gross wie die Original-Abmessungen des Bildes
bwz. des umschliessenden Containers, wenn vorhanden.
*/

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

.img-shadow {
box-shadow: 8px 8px 15px 0px rgba(100,100,100,1);
}


/*   WEITER-BUTTON */

.btn span.weiter  {
	color: #fff;
	display: inline-block;
	background: #3f3f3f;
	text-decoration: none;
	padding: .4rem 1.6rem .4rem 1.2rem;
	border-radius: 0;
	cursor: pointer;
	margin: 0rem 0 0 0 ;
}

.btn span.weiter:hover {
	color: #fff;
	background: #000;
	text-decoration: none;
	box-shadow: 1px 1px 3px #9F9F9F;
}

.btn .weiter:before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brand' for Brands symbols. */
	font-weight: 900; /*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f0da";
	font-style: normal;
	font-variant-caps: normal;
	font-variant-ligatures: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
	color: #f44336;
	padding: .2rem 0;
	margin: 0 .6rem 0em .4rem;
	transition: transform .3s ease-out;
}

.btn .weiter:hover:before {
	transform:  translate(.5rem);
}

/*  liste - aufzaehlungspunkte */
.liste-1 , .liste-1 ul  {
	margin: 0;
	padding: 0;
}


.liste-1  li {
	list-style: none;
	line-height: 2.5rem;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0rem;
	margin: 0;
}

/* Die Font-Icons in liste-1 */

.liste-1  li:before {
	display:inline-block;
	font-family: 'Font Awesome 5 Free';
	content: "\f00c";
	font-style: normal;
	font-variant-caps: normal;
	font-variant-ligatures: normal;
	font-weight: 900;/* Weight of the font (by fontawesome)- use:
				   - 400 for Regular and Brands symbols;
				   - 900 for Solid symbols. */
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
	margin-right: 1rem;
	color: #f44336;
	font-size: 1.3rem;
	transition: all .3s ;
}




/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM #1  - mit DISPLAY:INLINE-BLOCK */
/*  für Boxen und Bilder */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

.wrapper-box {
	display: block;
	text-align: center;
	padding: 0rem;
}

.box {
	display: inline-block;
	width: 100%;
	vertical-align: top;
	padding: .2rem;
	margin: 0 -.2rem 0 -.2rem ;/* Ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
}

.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3 ,
.box-1_of_4 ,
.box-1_of_5 ,
.box-1_of_6 {
	width:100%;
}

.box-1_of_4b {
	width: 50%;
}

.wrapper-box .box img,
.wrapper-box .box a img {
	display: block;
	width: 100%;
	height: auto;
}


/* ############################################################ */
/* Bereich Logo 												*/
/* ############################################################ */


.logo {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
}

.logo-content {
	position: relative;
	display: table-cell;
	width: 100%;
	height: 100vh;
	padding: 0rem 0rem;
	margin: 0 ;
}

#name  {
	position: absolute;
	display: inline-block;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 30rem;
	height: 24rem;
	margin-top: -12rem;
	margin-left: -15rem;
	background: rgba(0,0,0,.5);
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 2.3rem;
	letter-spacing: 1px;
	padding: 0rem;
	text-shadow: 0px 0px 1px black;
	text-transform: uppercase;
}

#name .inhalt {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	height: 24rem;
	width: 30rem;
	padding: 1rem;
}

#name span {
	display: block;
	background: red;
	text-align: center;
	color: #fff;
	letter-spacing: 1px;
	text-shadow: none;
	font-size: 1.6rem;
	padding: 0 .5rem;
	text-transform: none;
}



/* Icons  */


.logo ul {
	text-align: center;
	padding: 0rem;
	margin: 0;
}

.logo li {
	list-style: none;
	padding: 0rem .5rem;
	margin: 0;display:inline
}

.logo .fas,
.logo .fab,
.logo .far {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 3rem;
	color: #fff ;
	text-align: center;
	margin: 0 auto;
}


/* ############################################################ */
/* Bereich Logo UNTERSEITEN										*/
/* ---- Unterseiten - index1,index2, index3 ----- 				*/
/* ############################################################ */

/*  siehe bei den Media Queries ab 960 Pixel  */
#name.unterseite { }




/* ############################################################ */
/* Bereich Content 												*/
/* ############################################################ */

.section-content {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #000 ;
}

.content {
	display: table-cell;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	padding: 10vh 0vw;
	text-align: left;
	vertical-align: middle;
}


/*  ----------------------------------------------------------------------------  */
/*  NTH-CHILD - jeder ungerade (odd) Abschnitt, also 1, 3, 5 , 7 usw. 			  */
/*  ----------------------------------------------------------------------------  */

.section-content:nth-child(odd) {
	background: #fff;
}

/*  ----------------------------------------------------------------------------  */
/*  NTH-CHILD - jeder gerade (even) Abschnitt , also 2, 4, 6 , 8 usw. 			  */
/*  ----------------------------------------------------------------------------  */

.section-content:nth-child(even) {
	background: #f1f1f1;
}


/*  ----------------------------------------------------------------------------  */
/*  infobox bei HOME  / Über uns / Leistungen / Aktuelles / Referenzen / Kontakt  */
/*  ----------------------------------------------------------------------------  */


/* -----GRID-SYSTEM #2  - mit DISPLAY:TABLE  ----- */

.info .wrapper-box-table {
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 0;
}

.info  .box-tabcell {
	min-height: 20rem;
	display: inline-block;
	background: transparent;
	width: 100%;
	padding: 2rem ;
	margin-bottom: 2rem;
	vertical-align: top;
	text-align: left;
}

.info  .box-tabcell-2 {
	min-height: 20rem;
	display: inline-block;
	background: transparent;
	color: #000;
	width: 100%;
	padding: 2rem;
	margin-bottom: 2rem;
	vertical-align: top;
	text-align: center;
}

.box-tabcell-3 {
	width: 48%;	
}

.box-tabcell-3-bild {
	padding: 0rem !important;	
}

.img-ref-1 {

}

.img-ref-2 {
	margin-top: 2rem;
	margin-bottom: .5rem;
}

.btn-ref-1 {

}

.btn-ref-2 {
	display: none;
}

.img-team {
	flex-direction: row;
    flex-wrap: nowrap;
    -ms-flex-wrap: none;
    justify-content: space-between;
    -ms-flex-pack: center;
    align-items: stretch;
    -ms-flex-align: stretch;
    display: flex;
}

.img-team-1 {
	max-width: 49%;
	margin-left: 0;
}

.img-team-2 {
	max-width: 49%;
	margin-right: 0;
}

hr { 
    width: 100%; 
    height: 1px; 
    margin: 0 auto;
    color: #000;
}


/*  ----------------------------------------  */
/*  Box LEISTUNGEN                            */
/*  ----------------------------------------  */


#leistungen .box {
	margin-bottom: 4rem;
}

#leistungen .box-1_of_3 {
	width: 100%;
	text-align: center;
}

#leistungen h3 {
	margin-top: .5rem;
	margin-bottom: .5rem;
	color: #000;
	font-size: 1.6rem;
	text-transform: uppercase;
	font-weight: bold;
}

/* icons  */

#leistungen .fas,
#leistungen .fab,
#leistungen .far {
	display: inline-block;
	background: transparent;
	color: #000 ;
	text-align: center;
	margin: 0 auto;
	margin: 1rem  .2rem 1rem .2rem;
	width: 10rem;
	height: 10rem;
	line-height: 10rem;
	font-size: 5rem;
	border-radius: 0;
}

#leistungen .box:nth-child(1) .fas {
	background: red;
	color: #fff;
}

#leistungen .box:nth-child(2) .fas {
	background: #00AFFF;
	color: #fff;
}

#leistungen .box:nth-child(3) .fas {
	background: #000;
	color: #fff;
}

#leistungen .box:nth-child(4) .fas {
	background: white;
	color: red;
}

#leistungen .box:nth-child(5) .fas {
	background: #fff;
	color: #00AFFF;
}

#leistungen .box:nth-child(6) .fas {
	background: #fff;
	color: #000;
}


/*  ----------------------------------------  */
/*  Box KONTAKT                               */
/*  ----------------------------------------  */

#kontakt .box {
	font-size: 1.4rem;
	padding: 0rem;
	margin-bottom: 1rem;
}

#kontakt .box-1_of_2 {
	width: 100%;
}

#kontakt ul {
	text-align: left;
 padding: 0rem;
 margin: 0;
}

#kontakt li {
	list-style: none;
	padding: 0rem;
	margin: 0;
}

#kontakt h3 {
	font-size: 1.6rem;
}


/* ----- Icons ----- */


#kontakt .fas,
#kontakt .fab,
#kontakt .far {
	display: inline-block;
	text-align: center;
	margin: 0rem .4rem 0rem -.2rem;
	padding: 0;
	width: 2.5rem;
	height: 2.5rem;
	line-height: 2.5rem;
	font-size: 1.4rem;
	color: #000;
	text-shadow: none;
}

.day {
	display: inline-block;
	width: 6rem;
	font-weight: normal;
}



/* ############################################################ */
/* Bereich Fuss 												*/
/* ############################################################ */

.section-fuss {
	width: 100%;
	color: #fff ;
	background: #2f2f2f;
	/* background-image: url(../images/logo02.jpg); */
	background-position: 50% 40%;
	background-repeat :no-repeat;
	background-size: cover;
}

.fuss-content {
	min-height: 15rem;
	margin: 0 auto;
	padding: 1rem 1rem 0rem 1rem ;
	font-size: 1.4rem;
}

/*  ----------------------------------------  */
/*  Box Fuss   							  	  */
/*  ----------------------------------------  */


/* -----GRID-SYSTEM #2  - mit DISPLAY:TABLE  ----- */

#fuss.wrapper-box-table {
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 0;
}

#fuss .box-tabcell {
	min-height: 20rem;
	display: inline-block;
	background: transparent;
	color: #fff;
	width: 100%;
	padding: 1rem 2rem 3rem 2rem;
	margin-bottom: 1rem;
	vertical-align: top;
	text-align: left;
	background: rgba(0,0,0,.5);
}

#fuss h3 {
	font-size: 1.5rem;
	line-height: 1.8rem;
	color: #fff;
	padding: 1rem 0;
	border-bottom: dotted 1px #fff;
	margin: 1rem 0;
	text-align: left;
}

#fuss ul {
	text-align: left;
	padding: 0rem;
	margin: 0;
}

#fuss li {
	list-style: none;
	padding: 0rem;
	margin: 0;
}



/*  ----------------------------------------  */
/*  Fuss-Menu  								  */
/*  ----------------------------------------  */


#fuss .menu {
	margin: 0 auto;
	padding: 0;
	font-size: 1.3rem;
	line-height: 1.8rem;
}

#fuss .menu ul {
	text-align: center;
	margin: 0;
	padding: 0;
}

#fuss .menu li {
	list-style-type: none;
	margin: 0;
	padding: .1rem  ;
}

#fuss .menu a {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	text-decoration : none;
	letter-spacing: 0rem;
	padding: 0rem ;
	margin: .1rem 0;
	color: #fff ;
}

#fuss .menu li a:hover {
	color: #fff;
	background: transparent;
	text-decoration: none;
}


/* Die Font-Icons im Fuss-Menu */

#fuss li a:before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	content: "\f35a";
	font-style: normal;
	font-variant-caps: normal;
	font-variant-ligatures: normal;
	font-weight: 400; /* Weight of the font (by fontawesome)- use:
				   - 400 for Regular and Brands symbols;
				   - 900 for Solid symbols. */
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
	margin-right: 1rem;
	color: #f44336;
	font-size: 1.3rem;
	transition: all .3s ;
}

.fuss2:before {
	content: "" !important;
	margin-right: 0px !important;
}

#fuss li a:hover:before {
	color: #fff;
}

#fuss .fas,
#fuss .fab,
#fuss .far {
	display: inline-block;
	text-align: center;
	margin: -4px;
	padding-right: 2rem;
	width: 2.5rem;
	height: 2.5rem;
	line-height: 2.5rem;
	font-size: 1.2rem;
	color: #f44336;
}


/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN 	*/
/* ############################################################ */

/* ==================================== ab 320 Pixel ================================== */


/* - - - - -  nur Info - - - - - */
/*  Für die kleinste Smartphone-Auflösung von 320 Pixel benötigen wir KEINE Bildschirmabfragen (Media Queries), denn hierfür gilt ja automtisch der gesamte vorstehende Quelltext-Code, weil wir das Template ja 'mobile-first' angelegt haben */



/* ==================================== ab 360 Pixel ================================== */

@media (min-width: 360px) {

/* keine Angabe */

}


/* ==================================== ab 400 Pixel ================================== */

@media (min-width: 400px) {

/* keine Angabe */

}


/* ==================================== ab 480 Pixel ================================== */

@media (min-width: 480px) {

.content {
	padding: 6vh 4vw;
}

.fuss-content {
	padding: 10vh 5vw;
}

#fuss .box-tabcell {
	padding: 1rem 3rem 3rem 3rem
}

}


/* ==================================== ab 580 Pixel ================================== */

@media (min-width: 580px) {


#name {
	width: 42rem;
	height: 26rem;
	margin-top: -13rem;
	margin-left: -21rem;
}

#name .inhalt {
	width: 42rem;
	height: 26rem;
}



/* - - - - -   GRID-SYSTEM #1   - - - - - */
.box-1_of_1 {
	width: 50%;
}

.box-1_of_2 {
	width: 50%;
}

.box-1_of_3 {
	width: 33.33%;
}

.box-1_of_4 {
	width: 50%;
}

#leistungen .box-1_of_3 {
	width: 50%;
}
/* - - - - - ENDE  GRID-SYSTEM #1 - - - - - */


}


/* ==================================== ab 640 Pixel ================================== */

@media (min-width: 640px) {

/* keine Angabe */


}


/* ==================================== ab 760 Pixel ================================== */

@media (min-width: 760px) {

html {
	font-size:70%;
}

.logo-content {
	height:40rem;
}

/* - - - - -   GRID-SYSTEM #1  - - - - - */
.box-1_of_2 {
	width: 50%;
}

#leistungen .box-1_of_3 {
	width: 33.33%;
}

/* - - - - - ENDE  GRID-SYSTEM #1  - - - - - */


#fuss .menu {
	font-size: 1.3rem;
	line-height: 1.6rem;
}


}


/* ===================================== ab 960 Pixel ================================= */

@media (min-width: 960px) {

#name  {
	width: 60rem;
	height: 26rem;
	margin-top: -10rem;
	margin-left: -30rem;
	font-size: 2.5rem;
	line-height: 3rem;
}

#name .inhalt {
	width: 60rem;
	height: 26rem;
}

/* Ausgleich wegen fehlerder Menue-Leiste auf den Unterseiten */
#name.unterseite {
	margin-top: -12.5rem;
	margin-left: -30rem;
}

/* - - - - -  GRID-SYSTEM #1   - - - - - */
.box-1_of_4 {
	width: 25%;
}

.box-1_of_5 {
	width: 20%;
}

.box-1_of_4b {
	width: 25%;
}

/* - - - - - ENDE  GRID-SYSTEM #1  - - - - - */


/* - - - - -  GRID-SYSTEM #2 - mit display:table/table-cell - - - - - */
.info .wrapper-box-table {
	border-spacing:1rem 0rem;
}

.info  .box-tabcell {
	display: table-cell;
	height: 20rem;
	width: 55%;
}

.info  .box-tabcell-2 {
	display: table-cell;
	height: 20rem;
	width: 45%;
}

.box-tabcell-3 {
	width: 48% !important;
}

#fuss.wrapper-box-table {
	border-spacing: 1rem 0rem;
}

#fuss .box-tabcell {
	display: table-cell;
	height: 20rem;
}

/* - - - - - ENDE  GRID-SYSTEM #2  - - - - - */

}


/* ===================================== ab 1024 Pixel ================================= */

@media (min-width: 1024px) {

/* keine Angabe */

}


/* ===================================== ab 1100 Pixel ================================= */

@media (min-width: 1100px) {

html {
	font-size: 75%;
}

pre {
	width: 50vw;
}

.fuss-content {
	padding: 4vh 4vw;
}

}


/* ===================================== ab 1200 Pixel ================================= */

@media (min-width: 1200px) {

.content {
	padding: 6vh 10vw;
}

}


/* ===================================== ab 1400 Pixel ================================= */

@media (min-width: 1400px) {

html {
	font-size:70%;
}

}


/* ===================================== ab 1500 Pixel ================================= */

@media (min-width: 1400px) {

.fuss-content {
	padding: 8vh 8vw;
}

}



/* ===================================== bis 961 Pixel ================================= */

@media (max-width: 961px) {

.liste-2, .liste-2 ul, .liste-2 ol  {
	padding-left: 2rem;
}

	
.img-ref-1 {
	margin-left: 0rem;
	margin-bottom: 2rem;
}

.img-ref-2 {
	margin-top: 0rem;
}

.box-tabcell-3-bild {
	padding: 0rem !important;	
}

.box-tabcell-4 {	
	margin-bottom: -4rem !important;
}

.btn-ref-1 {
	display: none;
}

.btn-ref-2 {
	display: flex;
}

.img-team {
    display: flow-root;
}

.img-team-1 {
	max-width: 100%;
	float: none;
	margin-bottom: 2.5rem;
}

.img-team-2 {
	max-width: 100%;
}


/* = = = = = = = = = = = = = = = = = = = = = Code ENDE = = = = = = = = = = = = = = = = = = = = = */