/* cookie ****************************************/
#cookiedingsbums a {color:#fff; text-decoration:none;}
#cookiedingsbums a:hover {text-decoration:underline;}
#cookiedingsbums div {padding:10px; padding-right:40px;}
#cookiedingsbums {outline: 1px solid #7b92a9; text-align:right; border-top:1px solid #fff; background: #566171;; position:fixed;bottom:0px; z-index:10000; width:100%; font-size:16px; line-height:16px; color: #fff}
#cookiedingsbumsCloser {color: #fff; font: 14px/100% arial, sans-serif; position: absolute; right: 5px; text-decoration: none; text-shadow: 0 1px 0 #fff; top: 5px; cursor:pointer; border-bottom:1px solid #7b92a9; border-right:1px solid #7b92a9; padding:4px; background: #b11c3e;}
#cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}
/* ende cookie ***************************************/


/*Navigation*/
.navi-container {position: relative;}
#mainNav {background-color: #fab900!important; box-shadow: 0px 1px 3px #0000004f  !important; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; z-index: 9; }
#mainNav .navbar-brand {font-weight: 700; text-transform: uppercase; color: #2a464c;; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {color: #fff; }
#mainNav .navbar-nav > li.nav-item > a,#mainNav .navbar-nav > li.nav-item > a:focus {display: block; padding: 1rem 1rem; text-decoration: none; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; color: #fff; }
#mainNav .navbar-nav > li.nav-item > a:hover, #mainNav .navbar-nav > li.nav-item > a:focus:hover {color: #fff;}
#mainNav .navbar-nav > li.nav-item > a.active, #mainNav .navbar-nav > li.nav-item > a:focus.active {color: #fff !important; background-color: transparent; }
#mainNav .navbar-nav > li.nav-item.active > a {color: #fff !important; background-color: #EA1313!important; }
#mainNav .navbar-nav > li.nav-item > a.active:hover,#mainNav .navbar-nav > li.nav-item > a:focus.active:hover {background-color: transparent;}
.navbar-nav .dropdown-menu {background-color: #fab900; top: calc(100% - 2px); min-width: 100%;}
.navbar-nav .dropdown-menu .nav-item a:hover {color: #000; background-color: #fff;}
.navbar-nav .dropdown-menu .nav-item a {display: block; width: 100%; padding: .25rem 1.5rem; clear: both; font-weight: 400; color: #fff; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; text-decoration: none;}
.navbar-nav {margin-bottom: 20px;}
.nav-logo {position: absolute; right:0px; top:0px; z-index: 9; margin-right: 0px;}
.navbar {padding: 0rem 1rem!important;}
.navbar-nav .dropdown-menu {left: 0px;}
.navbar-toggler	{outline: none!important;}

@media (min-width: 1200px) {
  #mainNav {border-color: transparent; background-color: transparent; }
  #mainNav .navbar-brand {color: rgba(0, 0, 0, 0.7); }
  #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {color: #fff;}
  #mainNav .navbar-nav > li.nav-item > a {padding: 1rem 1rem;}
  #mainNav .navbar-nav > li.nav-item > a:hover, #mainNav .navbar-nav > li.nav-item > a:focus:hover {color: #fff;}
  #mainNav.navbar-shrink {border-bottom: 1px solid rgba(33, 37, 41, 0.1); background-color: #fff;}
  #mainNav.navbar-shrink .navbar-brand {color: #fff;}
  #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {color: #fff;}
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a, #mainNav.navbar-shrink .navbar-nav > li.nav-item > a:focus {color: #fff;}
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a:hover, #mainNav.navbar-shrink .navbar-nav > li.nav-item > a:focus:hover {color: #F05F40; }
  #mainNav li:hover > ul { display: block; opacity: 1;}
  .navbar-nav {margin-bottom: 0px;}
  #mainNav .dropdown-toggle::after, .mobil_button {display: none;}
}

footer {margin-top: 100px;}
footer .box_gelb .rechts a {color: #3D3D3D; padding: 0px 10px;  line-height: 50px;}
footer .box_gelb .links a {font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 0px; line-height: 50px;}
footer .copyright {border-top: 1px solid #fab900;}
footer .kreis {border: 1px solid #fff; border-radius: 50px; width: 50px; height: 50px; padding: 4px; margin: 0px 5px;}
footer .kreis:hover {border: 1px solid #ea1313;}
footer .box_grau {width: 100%; display:inline-block; float:left; background-color: #566171; padding: 30px 15px; font-size: 13px;}
footer .copyright img {margin-top: 10px; margin-right: 5px;}

/*generell*/
/* ALT     p {color: #868686;}*/
p {color: #566171;}
.box-weiss {box-shadow: 0px 1px 3px #0000004f; background-color: #fff;}
.box_gelb {width: 100%; display:inline-block; background-color: #fab900; float: left;}
.box_gelb p {color: #000;}
.box_blau {width: 100%; display:inline-block; background-color: #2a464c;}
.box_blau p	{color: #fff;}
.box_grau {width: 100%; display:inline-block; background-color: #566171;}
.box_grau p	{color: #fff;}
.bg_grau {background-color: #f6f6f6; display: inline-block; width: 100%; padding: 30px 0px; margin: 50px 0px;}
.text_gelb {color: #fab900;}
.text_weiss {color: #fff;}
.textbox_gelb{background-color: #fab900; box-shadow: 0px 1px 3px #0000004f; margin-top: 50px; margin-bottom: 30px; margin-left: -100px;}
.textbox_gelb_2 {background-color: #fab900; box-shadow: 0px 1px 3px #0000004f; margin-top: 50px; margin-bottom: 30px; margin-right: -100px; z-index: 9; position: relative; margin-left: 0px;}
.textbox_blau {background-color: #2a464c; box-shadow: 0px 1px 3px #0000004f; margin-top: 50px; margin-bottom: 30px; margin-left: -100px; color: #fff;}
.textbox_blau_2 {background-color: #2a464c; box-shadow: 0px 1px 3px #0000004f; margin-top: 50px; margin-bottom: 30px; margin-right: -100px; color: #fff; z-index: 9; position: relative; margin-left: 100px;}
.textbox_grau {background-color: #566171; box-shadow: 0px 1px 3px #0000004f; margin-top: 50px; margin-bottom: 30px; margin-left: -100px; color: #fff;}
.textbox_grau_2 {background-color: #566171; box-shadow: 0px 1px 3px #0000004f; margin-top: 50px; margin-bottom: 30px; margin-right: -100px; color: #fff; z-index: 9; position: relative; margin-left: 0px;}
.link-gelb a {color: #fab900;}

/*home*/
.home .header_bild {min-height: 650px; position: relative; background-image: url(../images/header-home.webp); background-position: left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;}
.home .header_bild h1 {padding-top: 20%;}
.home .produktboxen {margin-top: -110px;}
.home .kundengruppen .bild-box {overflow: hidden; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.home .kundengruppen img {-moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.home .kundengruppen img:hover {-moz-transform: scale(1.2);-webkit-transform: scale(1.2); transform: scale(1.2); -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.home .kundengruppen h3 {color: #fff; margin-top: 20px; margin-bottom: 15px;} 
.home .kundengruppen a {position: relative; display: inline-block; outline: none; color: #fff; text-decoration: none; letter-spacing: 1px; font-size: 1.2em;}
.home .kundengruppen a::before  {position: absolute; top: 60%; left: 50%; color: transparent; content: "•";  text-shadow: transparent 0px 0px; font-size: 1.2em; transform: translateX(-50%); pointer-events: none; transition: text-shadow 0.3s ease 0s, color 0.3s ease 0s;}
.kundengruppen a:hover, .kundengruppen a:focus {color: rgba(255, 255, 255, 0.6);}
.kundengruppen a:hover::before, .kundengruppen a:focus::before {color: #fff; text-shadow: 10px 0 #fff, -10px 0 #fff;}
.home .bilderbalken {margin: 100px 0px; display: inline-block; width: 100%;}
.home .link-gelb a {position: relative; display: inline-block; outline: none; color: #fab900; text-decoration: none; letter-spacing: 1px; font-size: 1.2em;}
.home .link-gelb a::before  {position: absolute; top: 60%; left: 50%; color: transparent; content: "•";  text-shadow: transparent 0px 0px; font-size: 1.2em; transform: translateX(-50%); pointer-events: none; transition: text-shadow 0.3s ease 0s, color 0.3s ease 0s;}
.link-gelb a:hover, .link-gelb a:focus {color: #868686;}
.link-gelb a:hover::before, .link-gelb a:focus::before {color: #fab900; text-shadow: 10px 0 #fab900, -10px 0 #fab900;}

/*Produktboxen bei Home und Kundengruppen*/
.produktbox {width: calc(20% - 16px); box-shadow: 0px 1px 3px #0000004f; text-align: center; padding-top: 120px; padding-bottom: 20px; float: left; margin: 0px 10px; background-color: #fff;}
.produktboxen {display: inline-block; width: 100%;  z-index: 999; position: relative;}
.produktboxen a {color: #000; text-decoration: none;  -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}
.produktboxen a:hover {color: #fff;} 
.produktboxen .feuermelder {background-image: url(../icon/feuermelder_rot.png); background-repeat: no-repeat; background-position: center 35px; margin-left: 0px;}
.produktboxen .feuermelder:hover {background-image: url(../icon/feuermelder_weiss.png); background-color: #EA1313;} 
.produktboxen .einbruch {background-image: url(../icon/einbruch_rot.png); background-repeat: no-repeat; background-position: center 35px;}
.produktboxen .einbruch:hover {background-image: url(../icon/einbruch_weiss.png); background-color: #EA1313;}
.produktboxen .sprachalarm {background-image: url(../icon/sprachalarm_rot.png); background-repeat: no-repeat; background-position: center 35px;}
.produktboxen .sprachalarm:hover {background-image: url(../icon/sprachalarm_weiss.png); background-color: #EA1313;}
.produktboxen .feuerwehrplan {background-image: url(../icon/feuerwehrplan_rot.png); background-repeat: no-repeat; background-position: center 35px;}
.produktboxen .feuerwehrplan:hover {background-image: url(../icon/feuerwehrplan_weiss.png);background-color: #EA1313;}
.produktboxen .anlagenkonzepte {background-image: url(../icon/konzepte_rot.png); background-repeat: no-repeat; background-position: center 35px; margin-right:0px;}
.produktboxen .anlagenkonzepte:hover {background-image: url(../icon/konzepte_weiss.png); background-color: #EA1313;}

/*Leistungen*/
.icon_produkt  {position: absolute; bottom: -35px;}
.produkte {margin-bottom: 100px;}
.produkte h2 {margin-top: 80px; margin-bottom: 20px;}
.produkt_header h1 {padding-top: 220px; text-align: right; padding-right: 140px;}
.unsere-leistungen-brandschutzplaene .header_bild {min-height: 450px; position: relative; background-image: url(../images/hd_brandschutzplaene.webp); background-position: left center;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;}
.unsere-leistungen-brandmeldeanlagen .header_bild {min-height: 450px; position: relative; background-image: url(../images/hd_brandmeldeanlagen.webp); background-position: left center;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;}
.unsere-leistungen-einbruchmeldeanlagen .header_bild {min-height: 450px; position: relative; background-image: url(../images/hd_einbruchmeldeanlagen.webp); background-position: left center;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;}
.unsere-leistungen-sprachalarmanlagen .header_bild {min-height: 450px; position: relative; background-image: url(../images/hd_sprachalarmanlagen.webp); background-position: left center;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;}
.unsere-leistungen-anlagenkonzepte .header_bild {min-height: 450px; position: relative; background-image: url(../images/hd_anlagenkonzepte.webp); background-position: left center;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;}


@media (max-width: 3700px) {
	.home .header_bild {background-position: left center;} 
	.home .header_bild h5 {font-size: 1.25rem; background-color: rgba(255, 255, 255, 0.75); padding: 5px; display: inline-block;}
}

@media (max-width: 1200px) {
	.navi-container {display: block!important; flex:none;}
	.navbar-toggler {margin: 10px 0px;}
	.float-menu	{position: absolute; margin-top: 60px; background-color: #fff;}
	.home .header_bild {background-position: left center;}
	#mainNav .navbar-nav > li.nav-item > a {color: #000;}
	#mainNav .navbar-nav > li.nav-item > a:hover {background-color: #fab900;}
	#mainNav .navbar-nav > li.nav-item.active > a {color: #fab900!important; background-color: #fff!important;}
	#mainNav .navbar-nav > li.nav-item.active > a:hover {background-color: #fab900!important; color: #fff!important;}
	.navbar-nav .dropdown-menu	{margin-top: -2px;}
	#mainNav .navbar-nav > li.nav-item > a:focus {background-color: #fab900; color: #fff;}
	.navbar-nav {margin-bottom: 0px;}
	.textbox_gelb {font-size: 1.2rem;}
    .textbox_gelb_2 {font-size: 1.2rem;}

/*	ALTER CODE
    .box_gelb img {margin-left: -85%; width: auto!important;}
	.box_blau img {margin-left: -100px; width: auto!important;}
	.box_grau img {margin-left: -100px; width: auto!important;}
*/
/*  NEUER CODE*/
    .box_gelb img, .box_grau img {height: auto !important; margin-left: 0; margin-right: 0;}

	.footer .text_gelb {width: 100%; display: inline-block;}
	
/*	.produkt_header h1 {text-align: left; padding-right: 0px;}*/
}

@media (max-width: 991px) {
	.home .header_bild {min-height: 500px;}
	.produktboxen .sprachalarm {margin-right: 0px;}		
	.produktboxen .feuerwehrplan {margin-left: 0px; width: calc(50% - 10px); margin-top: 15px;}
	.produktboxen .anlagenkonzepte {width: calc(50% - 10px); margin-top: 15px;}
	.produktbox {width: calc(33% - 12px);}
	.produkte {margin-bottom: 50px;}	
}

@media (max-width: 767px){
    a.nav-logo img {height: 100px;}
	.home .header_bild {min-height: 350px;}
	.home .produktboxen {margin-top: 20px;}
	.md-mobile-none {display: none!important;}
/*  ALTER CODE
	.box_gelb img {width: 100% !important; margin-left: 0px; margin-right: 0px;}
	.box_blau img {width: 100% !important; margin-left: 0px; margin-right: 0px;}
	.box_grau img {width: 100% !important; margin-left: 0px; margin-right: 0px;}
*/
/*  NEUER CODE */    
    .box_gelb img, .box_grau img {height: auto !important; margin-left: 0; margin-right: 0;}
    
	.produkte {margin-bottom: 10px;}
	.textbox_blau, .textbox_blau_2 {margin-top: -70px; margin-bottom: 40px; margin-left: 0px; margin-right: 0px;}
	.textbox_grau, .textbox_grau_2 {margin-top: -70px; margin-bottom: 40px; margin-left: 0px; margin-right: 0px;}
}

@media (max-width: 576px) {
	.float-menu {margin-left: -17px;}
	#mainNav .navbar-nav > li.nav-item > a, #mainNav .navbar-nav > li.nav-item > a:focus {font-size: 1rem;}
	.home .header_bild h1 {font-size: 1.5rem;}
	.produktboxen .produktbox {background-position: left center;}
	.produktbox {padding-top: 20px; width: 100%!important; margin-left: 0px; margin-top: 15px; margin-right: 0px;}
	.textbox_gelb_2 {margin-right: initial;}
	.textbox_gelb {margin-left: initial;}
}

@media (max-width: 500px){
	h1, h2 {font-size: 1.5rem;}
	h3	{font-size: 1rem;}
/*	ALTER CODE
    .nav-logo {width: calc(100% - 220px);}
*/
/*  NEUER CODE */    

	.produkt_header h1 {font-size: 1.5rem;}
	.header_bild {min-height: inherit!important;}
	.produkte h2 {margin-top: 50px; font-size: 1rem;}
	
}

@media (max-width: 450px) {
	.home .header_bild {min-height: 250px;}	
}