@charset "utf-8";
/* CSS Document */
/*==============================*
* baukasten.css			       *
*                              *
* Version 1.0.0  - 06/2020     *
* CARMOTION Outplacement       *
*==============================*/


/*================================================================================
allgemeine Grundeinstellungen | Dokument
========================================*/
* {
margin:0;
padding:0;
font-size:100,01%;
font-family:Arial, Helvetica, sans-serif;
border:0;
border-image-width:0;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
text-decoration:none;
outline: none;
}

body {
overflow: scroll;
overflow-x: hidden;
}

video {
background:none;
}






/*================================================================================
allgemeine Grundeinstellungen | Projekt
========================================*/
/* Struktur */
.nopad{
padding: 0 !important;
}

.equal {
display: flex;
flex-wrap: wrap;
}




/* Farben */
.red{
background: #8b151a !important;
}
.white{
color: #fff;
}
.grau1{
color: #111;
}
.grau4{
color: #444;
}
.grau7{
color: #777;
}
.grau9{
color: #999 !important;
}



/* Text */
.center {
text-align: center !important;
}
.block{
text-align: justify;
}
.italic{
font-style: italic;
}
.vcenter {
margin: auto;
}

.space1 {
letter-spacing: .1rem !important;
}
.space2 {
letter-spacing: .25rem !important;
}
.space3 {
letter-spacing: .4rem !important;
}
.space4 {
letter-spacing: .6rem !important;
}
.space5 {
letter-spacing: 1rem !important;
}


/* Links - a-Tag */



/* Aktion */
button{
cursor: pointer;
}


/* Bild */
.IMG{
height: auto;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
margin-bottom: 0;
}
.IMGblock{
display: block;
}
	.IMG-Footer {
	width: 100%;
	background: #8b151a;
	height: .7rem;
	margin-top: -.3rem;
	}
	
	.IMG50 {
	max-width: 50px;
	}
	.IMG100{
	max-width: 100px;
	}
	.IMG150{
	max-width: 150px;
	}



/* Video */
.Video {
position:relative;	
}
	.VideoInhalt{
	position:absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: flex;
  	align-items: center;
  	justify-content: center;
	}



/* Animation */
	/*Zählen*/
.upcounter {
width:100%;
height:auto;
color:#0082C7;
line-height:40px;
font-weight:bold;
font-size:150%;
margin-left: -100px;
}
	.count{
	font-size: 4rem;
	}
	.counterzahl {
	text-align:center;
	}
 
	/*Erscheinen global*/
.animateme{
opacity: 0;
}





.animation{
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.animation.slide{
opacity: 1;
-moz-transform: translateX(100px) translateY(0px);
-webkit-transform: translateX(100px) translateY(0px);
-o-transform: translateX(100px) translateY(0px);
-ms-transform: translateX(100px) translateY(0px);
transform: translateX(100px) translateY(0px);
}

.showme {
}



/* Icons.boot */
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../fonts/glyphicons-halflings-regular.eot");
  src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-time:before {
  content: "\e023";
}
.glyphicon-map-marker:before {
  content: "\e062";
}
.glyphicon-wrench:before {
  content: "\e136";
}
.glyphicon-road:before {
  content: "\e024";
}
.glyphicon-earphone:before {
  content: "\e182";
}
.glyphicon-envelope:before {
  content: "\2709";
}
.glyphicon-home:before {
  content: "\e021";
}
.glyphicon-user:before {
  content: "\e008";
}
.glyphicon-duplicate:before {
  content: "\e224";
}
.glyphicon-menu-right:before {
  content: "\e258";
}



/* === Container Pfeil ===*/




/*================================================================================
Überschriften | Headlines
========================================*/
/* Allgemein */
.Head1Grau,
.Head2Grau,
.Head3Grau,
.Head4Grau,
.Head5Grau,
.Head6Grau{
color: #777;
font-weight: bold;
text-align: center;
}
	.Head1Grau{
	font-size: 1.7rem;
	letter-spacing: .2rem;
	padding: 1rem 0;
	}
	.Head2Grau{
	font-size: 1.3rem;
	letter-spacing: .1rem;
	padding: .5rem 0;
	}
	.Head3Grau{
	font-size: 1rem;
	letter-spacing: .05rem;
	padding: .2rem 0;
	}
	.Head4Grau,
	.Head5Grau{
	font-size: .8rem;
	padding: .1rem 0;
	}


.Head1Rot,
.Head2Rot,
.Head3Rot,
.Head4Rot,
.HeadWCC,
.HeadVideo{
color: #8b151a;
text-align: center;
font-weight: bold;
}
	.Head1Rot,
	.HeadWCC,
	.HeadVideo{
	font-size: 1.7rem;
	letter-spacing: .2rem;
	padding: 1rem 0;
	}
		.HeadWCC{
		font-style: italic;
		}
	.Head2Rot{
	font-size: 1.3rem;
	letter-spacing: .1rem;
	padding: .5rem 0;
	}
	.Head3Rot{
	font-size: 1rem;
	letter-spacing: .05rem;
	padding: .2rem 0;
	}
	.Head4Rot{
	font-size: .8rem;
	padding: .1rem 0;
	}


.Head1Weiss{
font-size: 1.3rem;
letter-spacing: .1rem;
color: #fff;
text-align: center;
font-weight: bold;
}


/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {
.Head1Grau,
.Head1Rot,
.HeadWCC,
.HeadVideo{
font-size: 2.5rem;
letter-spacing: .1rem;
}
.Head2Grau,
.Head2Rot{
font-size: 2.1rem;
}
.Head3Grau,
.Head3Rot{
font-size: 1.8rem;
}
.Head4Grau,
.Head4Rot{
font-size: 1.4rem;
}
.Head5Grau{
font-size: 1.1rem;
}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {
.Head1Grau,
.Head1Rot,
.HeadWCC,
.HeadVideo{
font-size: 3.2rem;
}
.Head2Grau,
.Head2Rot{
font-size: 2.6rem;
}
.Head3Grau,
.Head3Rot{
font-size: 2.2rem;
}
.Head4Grau,
.Head4Rot{
font-size: 1.7rem;
}
.Head5Grau{
font-size: 1.3rem;
}
.Head1Weiss{
font-size: 1.6rem;
}
}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {
.Head1Weiss{
font-size: 2rem;
}
}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/


/*================================================================================
Text
========================================*/
/* Allgemein */
.TextBlock1,
.TextBlock2{
font-size: .9rem;
letter-spacing: .04rem;
text-align: justify;
line-height: 1.4rem;
}


/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {
.TextBlock1{
font-size: 1rem;
line-height: 1.7rem;
}
.TextBlock2{
font-size: 1.15rem;
line-height: 1.9rem;
}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/


/*================================================================================
Listen [ul]
========================================*/
/* Allgemein */
ul li {
color: #777;
margin-left: 2.2rem;
line-height: 1.5rem;
font-size: .9rem;
}

.ListP{
list-style: none;
margin-top: 2rem;
}
	.ListP li {
	list-style:url(img/pfeilg.png);
	margin-bottom: 1rem;
	}

.ListH{
list-style: none;
margin-top: 2rem;
}
	.ListH li {
	list-style:url(img/hakengr.png);
	margin-bottom: 1rem;
	}




/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {
ul li {
font-size: 1rem;
margin-left: 2.5rem;
}
}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/





/*================================================================================
Preis-Box blau [Preisbox]
========================================*/
/* Allgemein */
.preisbox{
border: 2px solid #0082c9;
}

.preisheadline{
color: #666;
line-height: 3rem;
font-weight: bold;
font-size: 1rem;
letter-spacing: .1rem;
text-align: center;
}

.preistag{
background: #0082c9;
display: block;
text-align: center;
padding: 1.2rem 0;
color: #fff;
font-weight: bold;
font-size: 1.1rem;
letter-spacing: .1rem;
}

.preistexthead{
color: #666;
font-weight: bold;
text-align: center;
line-height: 3rem;
}

.preistext{
padding: 0 10%;
}

.preisbutton{
background: #0082c9;
cursor: pointer;
text-align: center;
padding: 1rem 3rem;
color: #fff;
font-size: 1rem;
font-weight: bold;
display: inline-block;
}
	.preisbutton:hover{
	background: #444;
	}


/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {
.preisheadline{
line-height: 4rem;
font-size: 1.5rem;
letter-spacing: .2rem;
}

.preistag{
padding: 2rem 0;
color: #fff;
font-size: 1.7rem;
letter-spacing: .2rem;
}

.preistexthead{
line-height: 4rem;
}
	
.preistext{
line-height: 1.5rem;
}
}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/


/*================================================================================
Preis-Box GRAU [Preisbox]
========================================*/
/* Allgemein */
.preisboxGrau{
border: 2px solid #444;
}

.preistagGrau{
background: #555;
display: block;
text-align: center;
padding: 1.2rem 0;
color: #fff;
font-weight: bold;
font-size: 1.1rem;
letter-spacing: .1rem;
}

.preisbuttonGrau{
background: #444;
cursor: pointer;
text-align: center;
padding: 1rem 3rem;
color: #fff;
font-size: 1rem;
font-weight: bold;
display: inline-block;
}
	.preisbuttonGrau:hover{
	background: #0082c9;
	}


/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {
.preistagGrau{
padding: 2rem 0;
color: #fff;
font-size: 1.7rem;
letter-spacing: .2rem;
}
}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/



/*================================================================================
blaue Box mit Pfeil
========================================*/
/* Allgemein */
.BoxInfo{
border: 2px solid #0082c9;
}

.BoxInfoHead{
position: relative;
padding: 2rem 3rem;
}

.BoxInfoHead::before{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 25px 25px 25px 25px;
border-color: transparent transparent transparent #0082c9;
position: absolute;
top: 50%;
left: 0;
box-sizing: border-box;
margin-top: -25px;
}

.BoxText{
padding: 4% 7%;
}

/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/


/*================================================================================
Roter Container mit Bild-Container 100%
========================================*/
/* Allgemein */
.Crot {
background: #8b151a;
}
.Cgrau {
background: #F2F2F2;
}

.bbp5{/*BlueBoxPad5rem*/
padding: 5rem;
}
.bbp6{
padding: 6rem;
}
.bbp7{
padding: 7rem;
}
.bbp70{
padding: 7rem 0;
}

/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/







/*================================================================================
Abstand Inhalt | Container [AC = Abstand Container]
========================================*/
/* Allgemein */
.AC1{
height: 6rem;
width: 100%;
}
.AC2{
width: 100%;
height: 3rem;
}
.AC3{
width: 100%;
height: 2rem;
}

/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {
.AC1{
height: 7.5rem;
}
.AC2{
height: 2.7rem;
}
.AC3{
height: 1.5rem;
}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {
.AC1{
height: 10rem;
}
.AC2{
height: 3.5rem;
}
.AC3{
height: 2rem;
}
}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/


/*================================================================================
Breite | Container [BC = Breite Container]
========================================*/
/* Allgemein */
.BC1 {
width: 100%;
margin: 0 auto;
}
.BC2 {
width: 90%;
margin: 0 auto;
}
.BC3 {
width: 80%;
margin: 0 auto;
}
.BC4 {
width: 70%;
margin: 0 auto;
}

/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {
.BC1 {
width: 90%;
}
.BC2 {
width: 80%;
}
.BC3 {
width: 70%;
}
.BC4 {
width: 60%;
}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {
.BC1 {
width: 80%;
}
.BC2 {
width: 70%;
}
.BC3 {
width: 60%;
}
.BC4 {
width: 50%;
}
}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {
.BC1 {
width: 70%;
}
.BC2 {
width: 60%;
}
.BC3 {
width: 50%;
}
.BC4 {
width: 40%;
}	
}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/



/*================================================================================
Klappleiste [Aufklappen]
========================================*/
/* Allgemein */
.BoxKlapp{
margin-bottom: 1rem;
}

	.BoxKlappLink{
	background: #eee;
	display: inline-block;
	cursor: pointer;
	padding: .8rem 1.1rem;
	width: 95%;
	font-size: 1.2rem;
	letter-spacing: .1rem;
	color:#888;
	border-bottom: 2px solid #0082c9;
	}

	.BoxKlappLinkZu{}

.BoxKlappInhalt{ 
display:none;
padding: .8rem 1.1rem;
}

/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/



/*================================================================================
Buttons Design
========================================*/
/* Allgemein */
.Button1Blau {
background-color: #0082c9;
color: #fff;
text-align: center;
padding: 3% 10%;
font-weight: bold;
letter-spacing: .1rem;
}
	.Button1Blau:hover{
	background-color: #444;
	}

.Button2Blau {
background-color: #0082c9;
color: #fff;
text-align: center;
padding: 1rem 3rem;
font-weight: bold;
letter-spacing: .1rem;
}
	.Button2Blau:hover{
	background-color: #444;
	}


.Button1Grau {
background-color: #eee;
color: #888;
text-align: center;
padding: 3% 10%;
font-weight: bold;
letter-spacing: .1rem;
}
	.Button1Grau:hover{
	background-color: #444;
	color: #fff;
	}

.Button2Grau {
background-color: #555;
color: #fff;
text-align: center;
padding: 1rem 3rem;
font-weight: bold;
letter-spacing: .1rem;
display: inline-block;
}
	.Button2Grau:hover{
	background-color: #111;
	}



.Button1BlauRund {
background-color: #0082c9;
color: #fff;
text-align: center;
padding: 3% 10%;
font-weight: bold;
letter-spacing: .1rem;
border-radius: 0px 20px 0px 20px;
}
	.Button1BlauRund:hover{
	background-color: #444;
	}

/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/



/*================================================================================
Warenkorb => Formular | Inhalt
========================================*/
/* Allgemein */
.CardBox{
border: 2px solid #999;
padding:3rem;
}



/* Adressfeld */
.label-gewerbe {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

	/* meine checkbox für Gwerbe */
	.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color:#8a0808;
	}
	/* checkbox Gwerbe Standard - unsichtbar */
	.label-gewerbe input {
  	position: absolute;
  	opacity: 0;
  	cursor: pointer;
  	height: 0;
  	width: 0;
	}

.label-gewerbe:hover input ~ .checkmark {
background-color: #999;
}
.label-gewerbe input:checked ~ .checkmark {
background-color: #2ea848;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.label-gewerbe input:checked ~ .checkmark:after {
display: block;
}
.label-gewerbe .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
} 

label,
input {
color: #777;
}

.AdresseEingabe {
border: 1px #999 solid;
width: 100%;
height: 2rem;
padding: 0 .5rem;
}
	.AdresseEingabe:hover,
	.AdresseEingabe:focus{
	background: #ccc;
	}

.anrede {
margin-right: 1rem;
}
.FormInput{
padding: 1rem 0;
}

.CardBoxFooter,
.OrderSiteFooter{
background: #999;
width: 100%;
margin-bottom: 2rem;
cursor: pointer;
text-align: center;
padding: 1rem 0;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
display: inline-block;
}
	.CardBoxFooter:hover {
	background: #8a0808;
	}
	.OrderSiteFooter:hover {
	background: #2ea848;
	}


/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/

/*================================================================================
SECTION - Kontakt
========================================*/
/* Allgemein */
.sectionkontakt{
padding: 1rem 0;
}

.asectionkontakt:hover .sectionkontakt {
background: #8b151a;
}
.asectionkontakt:hover .Head3Grau {
color: #fff !important;
}




/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {
.sectionkontakt{
padding: 3rem 0;
}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/

/*================================================================================

========================================*/
/* Allgemein */
/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/




/*================================================================================
HEADER - Kopfbereich | NAV, Logo, Share
========================================*/
/* Allgemein */
header {
min-height: 100px;
}


/* Kontaktband - Rot */
.HBannerRot{
display: none;
}

/* Hauptmenü */
.menuband{
display: none;
}





.drawer-menu-item{
color: #444;
}

.IMG-Logo{
max-width: 290px;
}

		.H-Band-scroll {
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		width: 100%;
		background: #fff;
		border-bottom: 1px solid #ccc;
		padding: .2rem 0;
		}

.Klein-Logo {
width: 75%;
text-align: center;
height: auto;
margin: .5rem auto;
}


/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {}

@media only screen and (min-width: 930px) {
/* Kontaktband - Rot */
.HBannerRot{
display: block;
background: #8b151a;
}

.social-link-header{
line-height: 3rem;
vertical-align: middle;
color: #fff;
font-weight: bold;
letter-spacing: .1rem;
font-size: .8rem;
}	
	
	
/* Hauptmenü */
.menuband{
display: flex;
}	.navband{
	margin: 0 auto;
	}
	
.nav {
list-style: none;
}
.nav > li {
float: left;
position: relative;
display: block;
}	
.nav > li > a {
position: relative;
display: block;
padding: 2rem 2rem;
color: #444;
font-weight: bold;
}
	.nav > li > a:hover{
	text-decoration: underline;
	}
		
.dropdown-menu {
    z-index: 1000;
    display: none;
    list-style: none;
	position: absolute;
	background: #fff;
	border-left: solid #444 .2rem;
}
.dropdown-menu > li {
    margin-left: 0rem;
}	
.dropdown-menu > li > a {
    display: block;
    clear: both;
    white-space: nowrap;
	padding: .7rem 1rem;
	color: #444;
}
	.dropdown-menu > li > a:hover {
		text-decoration: underline;
		color: #8b151a;
	}
.open > .dropdown-menu {
    display: block;
}
}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/





/*================================================================================
FOOTER - Fußbereich | Adressen, Infos, Links
========================================*/
/* Slogan */
.F-Slogan {
width: 100%;
text-align: center;
}
	.dieexperten {
	font-size: 1rem;
	color: #0082C7;
	letter-spacing: .1rem;
	font-weight: bold;
	}
		.dieexpertenita {
		font-style: italic;
		}


/* Allgemein */
footer {
margin-top: 2rem;
}
	footer p,
	footer a{
	color: #999;
	}

.footer{
background: #444;
}

/* Allgemein | Link+Text */
	.F-Nav{
	border-top: 1px #ccc solid;
	padding: .4rem 0;
	}

	.F-NavQuer a,
	.F-NavQuer p {
	color: #777;
	margin: .2rem .7rem;
	display: inline-block;
	}

	.F-Standort{
	padding: 2.5rem 0;
	}
		.F-Standort p{
		font-size: .7rem;
		}
			.F-Standort div:nth-child(2),
			.F-Standort div:nth-child(3){
			margin-top: 1rem !important;
			}

/* Anpassung Anzeige */
@media only screen and (min-width: 420px) {
.dieexperten {
font-size: 1.2rem;	
}
}

@media only screen and (min-width: 768px) {
.dieexperten {
font-size: 1.6rem;	
}
	
.F-Standort p{
font-size: .8rem;
}
	.F-Standort div:nth-child(2),
	.F-Standort div:nth-child(3){
	margin-top: 0rem !important;
	}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 850px) {
footer {
margin-top: 3rem;
}
	
.dieexperten {
font-size: 2rem;	
}
	
.F-Nav{
margin-bottom: 3rem !important;
}
}

@media only screen and (min-width: 930px) {
.F-Nav a {
margin: 0 .9rem;		
}
}

@media only screen and (min-width: 1000px) {
footer {
margin-top: 4rem;
}
}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {
footer {
margin-top: 5.5rem;
}
}

@media only screen and (min-width: 1550px) {}

@media only screen and (min-width: 2000px) {}
/*============================================================*/