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


body {	height: 100%;
		background-color: #141414; /* For browsers that do not support gradients */
		background-image:
			radial-gradient(rgba(240,240,255,.1), rgba(20,20,20,.1) 60%),  
			repeating-linear-gradient(30deg, #222, #222, 3px, #252525 3px, #252525 6px);
		font-family: 'Barlow', sans-serif;
		line-height: 1.4;
		}

.IE-body {
		background-color: #141414; /* For browsers that do not support gradients */
		}

.safari_only { background-size: 6rem;
	background-image: url(../img/muster_streifen.svg),
		radial-gradient(rgba(240,240,240,.1), rgba(20,20,20,.1) 60%);}

h1 {font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
    margin-bottom:1.5rem;
	}
    @media (min-width: 992px)  {
			h1 {margin-bottom: 2.5rem;}
			}
    @media (min-width: 1200px)  {
			h1 {font-size: 2.5rem;
                margin-bottom: 3.5rem;}
			}
    @media (min-width: 1500px)  {
			h1 {font-size: 3rem;
                margin-bottom: 4rem;}
			}
h2 {
    font-weight: 700;
	text-transform: uppercase;}
h3 {font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;}
h4 {font-size: 1.25rem;
	font-weight: 500;
	text-transform: uppercase;}
	@media (min-width: 992px)  {
			h4 {font-size: 1rem;}
			}
	@media (min-width: 1200px) {
			h4 {font-size: 1.25rem;}
			}

a {color: #fff;}
a:hover {color: #41af46;
	text-decoration: none;}

.lead {
    font-size: 1.3rem;
    font-weight: 500;
	}

.light {
    font-weight: 400;
	}

.lh0 {line-height: 0;}
.lh18 {line-height: 1.8;}

.mt-0-5 {margin-top: 0.5rem;}
@media (max-width: 576px) {.pl-xs-0 {padding-left: 0;}}

.mt--1 {margin-top: -1rem;}
    
.mt--2 {margin-top: -2rem;}
    @media (min-width: 992px) {.mt-lg--2 {margin-top: -2rem;}}
.mt--3 {margin-top: -3rem;}
    @media (max-width: 992px) {.mt-lg--3 {margin-top: -3rem;}}

.test1 {margin-top: 2rem;}
	    @media (min-width: 576px) {.test1 {margin-top: 5rem;}}

.w-90 {width: 90%;}

.text-shadow-strong {text-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.99);}
.text-shadow-soft {text-shadow: 0 0 0.37rem rgba(0, 0, 0, 0.50);}


/*! GO BACK TO TOP BUTTON */
#gototop {
    width: 6%;    
    position: fixed; /* Fixed/sticky position */
    bottom: 0.4rem; /* Place the button at the bottom of the page */
    right: 0.6rem; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    cursor: pointer; /* Add a mouse pointer on hover */
    }
    @media (min-width: 576px) {#gototop {display: none; /* Hidden by default */
                                        width: 5%;
                                        bottom: 0.4rem;
                                        right: 1rem;}}
    @media (min-width: 765px) {#gototop {width: 3%;
                                        bottom: 0.5rem;
                                        right: 1.1rem; }}
	@media (min-width: 1200px) {#gototop {width: 2%;} }
    @media (min-width: 1500px) {#gototop {width: 1.5%;
                                        bottom: 1.25rem;
                                        right: 1.75rem; } }
    .gototopichon {fill:none;
                stroke:#FFFFFF;   
                stroke-width:2;
                stroke-linecap:round;
                stroke-linejoin:round;}
        .gototopichon:hover {stroke:#41af46;}

/*! Aufzählung mit Pfeilen statt Bullet-Points */
    ul.pfeil {
        list-style: none;
        margin-left: 0;
        padding-left: 1.2em;
        }
        ul.pfeil li {
                margin-top: 0.5rem;
                margin-bottom: 0.5rem;
                }
        ul.pfeil li:before {
                content: url("../img/icons/pfeil.svg");
                float: left;
                margin-top: 0.1rem;
                margin-right: 0.5rem;
                width: 0.6rem;
                }


/*! Cookiebar Plugin */
 
	.cookie-message {
	    position:fixed;
	    bottom:0;left:0;right:0;
	    padding:1rem 2rem 1rem 2rem;
	    background:rgba(20,20,20,.85);
	    z-index: 99;
        color: #fff;
		font-size: 1rem;
		text-align: center;
	    }

	.cookie-message a { 
            cursor:pointer;
	        }

    .cookie-message .btn {margin-left: 0.5rem; margin-right: 0.5rem; font-size: 0.8rem;}	
	
    a:not([href]):not([tabindex]):hover { 
            color: #000;
	        }


/* Header-Logo */
	@media (min-width: 576px) {.mb-md--1-xl--3-xxl--4 {margin-bottom: -1.2rem; margin-top: 1rem;}}
		@media (min-width: 768px) {.mb-md--1-xl--3-xxl--4 {margin-bottom: -1rem; }}
		@media (min-width: 1200px) { .mb-md--1-xl--3-xxl--4 {margin-bottom: -3rem;} }
		@media (min-width: 1500px) { .mb-md--1-xl--3-xxl--4 {margin-bottom: -3.2rem;} }

	.w-xs-65-sm-50-lg-30 {width: 65%;}
		@media (min-width: 576px) {.w-xs-65-sm-50-lg-30 {width: 50%;} }
		@media (min-width: 992px) {.w-xs-65-sm-50-lg-30 {width: 40%;} }
		
		

/* Navigation */
	.navbar-dark .navbar-toggler {
		border:none;
        }

    .hamburger {
        position: fixed; 
        right: 0.75rem;
        z-index: 999;
        }
        @media (min-width: 576px) {.hamburger {padding-top: 0;}}
		@media (min-width: 1200px) {.hamburger {right: 2.5rem;}}

	.navbar-side {
		height: 100%;
        width: 100%;
		position: fixed;
		top: 0;
		right: 0;
		padding: 0;
		list-style: none;
		background-color: #141414;
	       overflow-y: scroll;
		z-index: 1000;
		   
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: 300ms ease;
		transition: 300ms ease;
		}
		@media (min-width: 250px) {.navbar-side {width: auto;}}
        @media (min-width: 576px) {.navbar-side {padding: 1rem;}}
        @media (min-width: 768px) {.navbar-side {padding: 1.5rem;}}

    .reveal {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-transition: 300ms ease;
		transition: 300ms ease;
		}

	.navbar-side-item {
		margin: 0 2rem 0 1.7rem;
		padding: 1.1rem 0.7rem;
		border-bottom: 0.08rem solid #ddd;
		}

	.side-link {
		color: #ddd;
		text-transform: uppercase;
		}
		.side-link:hover {color: #41AF46;}

		.act {	text-transform: uppercase; 
				color: #41AF46; 
				font-weight: 600;
			}
			.act:hover {color: #41AF46;}
	
			.weiss {color: #fff;}
			.weiss:hover {color: #ddd;}



	.navbarSide-x-Button {
		color: #ddd;
        margin-right: -0.75rem;
		margin-left:auto;
		font-weight: 700;
		cursor: pointer;
		}
		.navbarSide-x-Button:hover {color: #41AF46;}

	.overlay {
	  position: fixed;
	  display: none;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  cursor: pointer;
	  background-color: #141414;
	  opacity: 0.3;
	  z-index: 990;
	}
	
	


/* Diagonal */
	.diag {
		position: relative;
		-webkit-clip-path: polygon(	0 30%, 
									100% 0%, 
									100% 70%, 
									0% 100%);
		clip-path: polygon(	0 30%, 
							100% 0%, 
							100% 70%, 
							0% 100%);   /* Koordinaten der Eckpunkte werden in Prozent angegeben --> responsive */
		}

	.diag-green-p {
		padding-top: 6rem;
		padding-bottom: 6rem;
		margin-bottom:  3rem;}
		@media (min-width: 576px) {
				.diag-green-p {
					padding-top: 8rem;
					padding-bottom: 8rem }
				}
		 @media (min-width: 768px) {
				.diag-green-p {
					padding-top: 9rem;
					padding-bottom: 12rem }
				}
		@media (min-width: 992px) { 
			.diag-green-p {
					padding-top: 12rem;
					padding-bottom: 14rem;
					}
			}
		@media (min-width: 1200px) { 
			.diag-green-p {
					padding-top: 14rem;
					padding-bottom: 18rem;
					}
			}	
		@media (min-width: 1500px) { 
			.diag-green-p {
					padding-top: 16rem;
					padding-bottom: 20rem;
					}
			}
        

	.diag-green-p2 {
		padding-top: 6rem;
		padding-bottom: 6rem;
		margin-bottom:  3rem;}
		@media (min-width: 576px) {
				.diag-green-p2 {
					padding-top: 7.4rem;
					padding-bottom: 6rem }
				}
		 @media (min-width: 768px) {
				.diag-green-p2 {
					padding-top: 9rem;
					padding-bottom: 7rem }
				}
		@media (min-width: 992px) { 
				.diag-green-p2 {
						padding-top: 8rem;
						padding-bottom: 7.6rem;
						}
				}
		@media (min-width: 1200px) { 
				.diag-green-p2 {
						padding-top: 8.5rem;
						padding-bottom: 9.5rem;
						}
				}
        @media (min-width: 1500px) { 
				.diag-green-p2 {
						padding-top: 10rem;
						padding-bottom: 12rem;
						}
				}

	.diag-green {
		background-color: #41AF46;
		background-image: radial-gradient(rgba(200,200,255,.1), rgba(20,20,20,.1) 85%); /* Gradient from light (middle) to dark (outside) */
		position: relative;
					-webkit-clip-path: polygon(	0 17vw, 
									100% 0%, 
									100% calc(100% - 17vw), 
									0% 100%);
					clip-path: polygon(	0 17vw, 
									100% 0%, 
									100% calc(100% - 17vw), 
									0% 100%); }
	.diag-black {
		background-color: #222;
		background-image: radial-gradient(rgba(200,200,255,.1), rgba(20,20,20,.1) 85%); /* Gradient from light (middle) to dark (outside) */
		position: relative;
					-webkit-clip-path: polygon(	0 17vw, 
									100% 0%, 
									100% calc(100% - 17vw), 
									0% 100%);
					clip-path: polygon(	0 17vw, 
									100% 0%, 
									100% calc(100% - 17vw), 
									0% 100%); }

	.diag-gray-p {
		padding-top: 3rem;
		padding-bottom: 0;}
		@media (min-width: 576px) {
				.diag-gray-p {padding-top: 8rem;}
				}
        @media (min-width: 768px) {
				.diag-gray-p {padding-top: 10rem;}
				}
		@media (min-width: 992px) { 
			.diag-gray-p {padding-top: 13rem;}
			}
		@media (min-width: 1200px) { 
			.diag-gray-p {padding-top: 16rem; padding-bottom: 0.5rem;}
			}	
		@media (min-width: 1500px) { 
			.diag-gray-p {padding-top: 19rem; padding-bottom: 0.7rem;}
			}	

	.diag-gray {
			background-color: #141414; /* For browsers that do not support gradients */
			background-image: repeating-linear-gradient(30deg, #222, #222, 3px, #252525 3px, #252525 6px);
			
			position: relative;
						-webkit-clip-path: polygon(	0 17vw, 
										100% 0%, 
										100% 100%, 
										0% 100%);
						clip-path: polygon(	0 17vw, 
										100% 0%, 
										100% 100%, 
										0% 100%); }
			
	


	.diag-shadow {
		filter: drop-shadow(0 0 0.75rem rgba(0, 0, 15, 0.8));}
	
	/* Diagonalen im Safari */
	.diag-safari { 
			background-size: 6rem; 
			background-image: url(../img/muster_streifen.svg),
							radial-gradient(rgba(240,240,240,.1), rgba(20,20,20,.1) 60%);
			}

	/* Diagonalen im IE */
		.browser_hide {display: none;}

		.svg-wrap {
			position: relative;
			height: auto;
			}		

		.svg1 {	position: absolute;
				width: 100%;
				height: 16vw;
				top: 0;}
		.svg2 {	position: absolute;
				width: 100%;
				height: 16vw;
				bottom: 0;}

		.IE-header-mb {margin-bottom: 0rem;}
			@media (min-width: 1200px) {.IE-header-mb {margin-bottom: 0rem;}}

		.IE-green1-py /* Geschäftsfelder */ 
            {padding-top: 6rem; padding-bottom: 6rem;}
            @media (min-width: 576px) {.IE-green1-py {padding-top: 9rem; padding-bottom: 9rem; }}
		    @media (min-width: 768px) {.IE-green1-py {padding-top: 11em; padding-bottom: 12em;}}
		    @media (min-width: 1200px){.IE-green1-py {padding-top: 11rem; padding-bottom: 15rem;}}
            @media (min-width: 1500px){.IE-green1-py {padding-top: 14rem; padding-bottom: 19rem;}}
            @media (min-width: 1700px){.IE-green1-py {padding-top: 17rem; padding-bottom: 22rem;}}

        .IE-green2-py /* Vorteile */ 
            {padding-top: 6rem; padding-bottom: 6rem;}
            @media (min-width: 576px) {.IE-green2-py {padding-top: 6.7rem; padding-bottom: 5rem;}}
		    @media (min-width: 768px) {.IE-green2-py {padding-top: 9rem; padding-bottom: 6.5rem;}}
		    @media (min-width: 1200px){.IE-green2-py {padding-top: 9rem; padding-bottom: 10rem;}}
            @media (min-width: 1500px){.IE-green2-py {padding-top: 10rem; padding-bottom: 11rem;}}
            @media (min-width: 1700px){.IE-green2-py {padding-top: 12rem; padding-bottom: 13rem;}}

		.IE-gray-my {margin-top: 0rem; 
                    margin-bottom: 0rem;}


/* Cards */
	.card-p {padding: 0 1.5rem 1.5rem 1.5rem;}
		@media (min-width: 576px) {.card-p {padding: 0 0.5rem 1rem 0.5rem;}}
		@media (min-width: 768px) {.card-p {padding: 0 0.75rem 1.5rem 0.75rem;}}
		@media (min-width: 1200px){.card-p {padding: 0 1rem 0 1rem;}}
			

	.card {	height: 23rem;
			background-color: #343a40;
			border: none;}
		@media (min-width: 768px) {.card {height: 27rem;}}
		@media (min-width: 1200px){.card {height: 25rem;}}
			
	.bg-card {background-size: cover;}

		.bg-card-1 {background-image:url('../img/bereich_event_1x.jpg');}
            @media /* Retina Displays */
              screen and (-webkit-min-device-pixel-ratio: 2),
              screen and (min-resolution: 192dpi),
              screen and (min-resolution: 2dppx) {
                  .bg-card-1 {background-image:url('../img/bereich_event_2x.jpg');}
            }
		.bg-card-2 {background-image:url('../img/bereich_show_1x.jpg');}
            @media /* Retina Displays */
              screen and (-webkit-min-device-pixel-ratio: 2),
              screen and (min-resolution: 192dpi),
              screen and (min-resolution: 2dppx) {
                  .bg-card-2 {background-image:url('../img/bereich_show_2x.jpg');}
            }
		.bg-card-3 {background-image:url('../img/bereich_ladungen_1x.jpg');}
            @media /* Retina Displays */
              screen and (-webkit-min-device-pixel-ratio: 2),
              screen and (min-resolution: 192dpi),
              screen and (min-resolution: 2dppx) {
                  .bg-card-3 {background-image:url('../img/bereich_ladungen_2x.jpg');}
            }
		.bg-card-4 {background-image:url('../img/bereich_express_1x.jpg');}
            @media /* Retina Displays */
              screen and (-webkit-min-device-pixel-ratio: 2),
              screen and (min-resolution: 192dpi), 
              screen and (min-resolution: 2dppx) {
                  .bg-card-4 {background-image:url('../img/bereich_express_2x.jpg');}
            }



	.card-shadow {box-shadow: 0.04rem 0.04rem 0.25rem 0.08rem rgba(0, 0, 0, 0.3);} /* [horizontal shadow] [vertical shadow] [blur] [spread] [color] */
        .card-shadow:hover {box-shadow: 0.04rem 0.04rem 0.5rem 0.08rem rgba(0, 0, 0, 0.6);} 


	.card-overlay-down {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 1.1rem;
		}

	.bg-card-title {
		padding: 1rem;
		background: radial-gradient(rgba(200,200,255,.1), rgba(20,20,20,.1) 70.71%); /* Gradient from light (middle) to dark (outside) */
		border-radius: .25rem .25rem 0 0;
		}

	.bg-card-text {
		padding: 0.7rem 0.4rem;
		font-size: 0.9rem;
		border-radius: 0 0 .25rem .25rem;
		}	

	.hov:hover {
		color: #41af46;
		font-weight: 600;
		}

/* Vorteile */
	@media (min-width: 992px) {	.vorteil-wrap {padding-left: 9%; padding-right: 9%;} }
	
    .vorteil_1 {margin-top: 0;}
	.vorteil_2 {margin-top: 1.5rem;}
	.vorteil_3 {margin-top: 1.5rem;}

		@media (min-width: 576px) {	.vorteil_1 {margin-top: 2rem;}
									.vorteil_2 {margin-top: 0;}
									.vorteil_3 {margin-top: -2rem;} }
        @media (min-width: 765px) {	.vorteil_1 {margin-top: 2.25rem;}
									.vorteil_2 {margin-top: -0.25rem;}
									.vorteil_3 {margin-top: -2.75rem;} }
		@media (min-width: 992px) {	.vorteil_1 {margin-top: 4rem;}
									.vorteil_2 {margin-top: 1.5rem;}
									.vorteil_3 {margin-top: -1rem;} }
		@media (min-width: 1200px) {.vorteil_1 {margin-top: 7rem;}
									.vorteil_2 {margin-top: 4rem;}
									.vorteil_3 {margin-top: 1rem;} }

	.vorteil-img55 {
		width: 55%;
		margin-left: 22.5%;
		margin-right: 22.5%;
        margin-bottom: 0.6rem;
		}
    .vorteil-img60 {
		width: 60%;
		margin-left: 20%;
		margin-right: 20%;
        margin-bottom: 0.6rem;
		}
    .vorteil-img65 {
		width: 65%;
		margin-left: 17.5%;
		margin-right: 17.5%;
        margin-bottom: 0.6rem;
		}
    .vorteil-img70 {
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
        margin-bottom: 0.6rem;
		}

    
	.vorteil-text {
			font-size: 0.9rem;
			line-height: 1.2;
			}	

/* USP */
	.USP {
		text-align: center;
        color: #fff;
        /* Drehung */
        -webkit-transform: rotate(-10deg);/* Safari */
        -moz-transform: rotate(-10deg);/* Firefox */
        -ms-transform: rotate(-10deg);/* IE */
        -o-transform: rotate(-10deg);/* Opera */
        transform: rotate(-10deg);/* Allgemein */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/* Internet Explorer */
        }
        @media (min-width: 576px) {	.USP {margin-top: 0; margin-bottom: 1rem;} }
        @media (min-width: 765px) {	.USP {margin-top: 0; margin-bottom: 2rem;} }
        @media (min-width: 992px) {	.USP {margin-top: 0.8rem; margin-bottom: 1.5rem;} }
        @media (min-width: 1200px) {.USP {margin-top: 1.2rem; margin-bottom: 1rem;} }
        @media (min-width: 1500px) {.USP {margin-top: 3.5rem; margin-bottom: 2.2rem;} }

        .USP-lead {
            font-weight: 400;
            font-size: 1.5rem;
            }

/* Kontakt */
    .contact-img {
                width: 95%;
                height: 100%;
                object-fit: cover;
                }
    .IE-contact-img {
                width: 95%;
                height: auto;
                }

    .kontakt-img {
                width: 100%;
                margin-bottom: 2rem;
                }

    .contact-icons {            
                position: absolute;
                left: 0; 
                top: 0;
                height: 100%; 
                width: 100%;
                fill:#fff
                }
                .contact-icons:hover {
                                fill: #41af46;
                                cursor: pointer;
                                }

    .scaling-svg-container {
         position: relative; 
         height: 0; 
         width: 100%;
        margin-top: 1rem;
         padding: 0;
         padding-bottom: 100%;
        }
        @media (min-width: 450px) {.scaling-svg-container {
                                    width: 60%;
                                    margin-left: auto;
                                    margin-right: auto;
                                    }}
        @media (min-width: 765px) {.scaling-svg-container {
                                    width: 80%;
                                    }}
        @media (min-width: 992px) {.scaling-svg-container {
                                    width: 50%;
                                    }}


/* Footer */
	footer p {font-size: 0.85rem;
		        color: #ddd;
	            }

    footer a {font-size: 0.85rem;
		color: #ddd;
	}

	.text-right-md-justify {text-align: right;}
    @media (min-width: 768px) {.text-right-md-justify {text-align: justify;
                                                        text-align-last: right;} }
    @media (min-width: 1200px) {.text-right-md-justify {text-align-last: center;} }
	
	footer b {font-weight: 600;
	}

	.footer-nav a {color: #fff;
            line-height: 2rem;
	        text-transform: uppercase;}
	.footer-nav a:hover {color: #41AF46;
		text-decoration: none;
		}
    @media (min-width: 1200px) {.footer-nav a {line-height: 0rem;} }


	@media (max-width: 576px) { .d-trenner-none {display: none;}  }