/*Layout verbreitern*/
*{
    box-sizing: border-box;
}

body, td, pre, address {
	color: 							#333;
    font-family: 					'open_sansregular', sans-serif;
    font-size: 						16px;
    line-height: 					1.5;

}

.justmobile{
    display: none;
}

.justdesktop{
    display: block;
}

@media screen and (max-width: 1024px){
    .justmobile{
        display: block;
    }
    
    .justdesktop{
        display: none;
    }
}

p {
	margin-bottom:15px;
	text-align:left;
	padding-right:20px;
	font-size:16px;
	 hyphens: auto;
}

.content, #navi, #secondnavi{
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}

.content.smallsized{
    width: auto;
    max-width: 600px;
    margin: 0 auto;
    float: right;
}

.col33{
    float: left;
    width: 33.33%;
    padding: 0 15px;
}

.col50{
    float: left;
    width: 50%;
    padding: 0 15px;
    position: relative;
}

.vh-50{
    height: 50vh;
}

.vh-30{
    height: 30vh;
}

.centerme{
    position: relative;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.clearme{
    clear: both;
    position: relative;
    display: block;
}

.text-center{
    text-align: center;
}

/*mainformats*/

.redbox{
    background-color: #e10707;
    display: inline-block;
    line-height: 50px;
    padding: 0 15px;
    color: #fff;
}

.redbox a, .redbox a:visited{
    color: #ffffff;
}

.px-5{
    padding: 0 5%;
}

.py-5{
    padding: 5% 0;
}

.p-5{
    padding: 5%;
}

@media screen and (max-width: 768px){
    .px-5, .py-5, .p-5{
        padding: 0;
    }

    .col50{
        float: none;
        width: 100%;
    }
}




.content-contenter{
    margin-top: 0;
    padding: 0px 20px 10px;
}

.grey{
    background-color: #ffffff;
    padding-top: 25px;
}

/*Header*/
.slidewrapper{
    margin-top: 330px;
}

.slidewrapper.sub{
    margin-top: 244px;
}

.fixedhead{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #ffffff;
}

.fixedhead.smushed .logoholder{

    height: 80px;

}

.fixedhead.smushed .bigred{
    opacity: 0;
    height: 0;
    position: relative;
    overflow: hidden;
}

.fixedhead.smushed .logoholder h1{
    opacity: 0;
    top: 100%;
    height: 0;
}


.fixedhead.smushed .logoholder img{
   height: 50px;
   width: auto;
}


.extrapic{
    transition: all .2s ease-in-out;
}

.logoholder{
    height: 200px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    transition: all .5s ease-in-out;
    position: relative;
}


.logoholder.sub{
    height: 110px;
}


.logoholder h1{
    text-align: center;
    transition: all .5s ease-in-out;
    height: 1em;
    font-size: 1.8em;
    position: relative;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
}

.logoholder img{
    height: 70px;
   width: auto;
    transition: all .5s ease-in-out;
    position: relative;
}

.bigred{
    color: #e10707;
    font-size: 3em;
    display: block;
    transition: all .5s ease-in-out;
    line-height: 1em;
}

.brand{
    position: absolute;
    left: 0;
    height: auto;
    width: 200px;
    left: 2.5%;
}

.brand img{
    width: 100%;
    height: auto;
}

.headeradresse{
    float: none;
    width: 100%;
    background: #e10707;
    position: relative;
    color: #ffffff;
    top: 0px;
    height: auto;
    right: unset;
    text-align: center;
    z-index: 100;
    padding: 15px 2.5%;
}


/*Navi*/
#navi-contenter, #secondnavi-contenter{
    height: auto;
    margin: 0;
}

#navi-contenter{
 border-bottom: 2px solid #f4f4f4;
}

#secondnavi-contenter{
    border-top: 2px solid #f4f4f4;
    height: 82px;
   }

#navi, #secondnavi{
    margin-bottom: 0;
}

#menu{
    float: left;
    max-width: 60%;
}

#menu, #secondmenu{
    text-align: center;
}

#menu ul, #secondmenu{
    width: 100%;
    height: auto;
    display: block;
}

#menu li{
    border-right: 0;
    padding: 0 0px;
}

#menu li a{
    line-height: 50px;
    padding: 0 10px;
}

#menu ul li a.first{
    padding: 0 10px;
}

#menu li a:hover{
    background-color: #f4f4f4;
    cursor: pointer;
}


/*secondmenu*/

#secondmenu ul{
	padding:0;
	margin:0;
	list-style-type:none;
	box-sizing:border-box;
	display: inline-block;
	font-family: 			'aleoregular';
    text-transform:			uppercase;
    width: 100%;
	}


#secondmenu li{
	float:left;
	position: static;
	border-right:			1px solid #abaaab;
	margin:0;
}

#secondmenu li:last-child{
	border-right:none;
}


/* top level links */
#secondmenu ul li a.has_sub,
#secondmenu ul li a.active_sub {
		pointer-events: none; /*CSS3 deaktiviert Link*/
		
}


#secondmenu ul li a.active_sub,
#secondmenu ul li a.active  {
		background-color: #fff;
		color:#e10707;
}


#secondmenu ul ul li.active,
#secondmenu ul ul li a.active{
		background-color: #fff;
		color:#e10707;
}



#secondmenu a{
	display:block;
	text-align:center;
	font-weight:normal;
	text-decoration:none;
    color:					#333;
    line-height: 50px;
	}
	

	
/* top level hover */
#secondmenu a:hover{
	background:#f4f4f4;
	color:					#e10707;
}
#secondmenu :hover > a{
	background:#f4f4f4;
	color:					#e10707;
	}

#secondmenu ul ul :hover > a {
	background:#f4f4f4;
	color:					#e10707;
}		




/* 2nd level ------------------------------------------------------------------------------ */
/* hide sublevels */
#secondmenu ul li ul{
	visibility:					hidden;
	position:					absolute;
	padding:					0px 0px 5px 0px;
	color:						#FFFFFF;
    display:					flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    /*Fullwidhtnav*/
    background: #e10707;
    left: 0;
    right: 0;
    padding: 30px calc(50% - 600px);
    

	}


/* 2nd level visible when top hover */
#secondmenu ul li:hover ul,
#secondmenu ul a:hover ul{
	visibility:visible;
	color:#FFFFFF;
	z-index:1333333300;
	}

#secondmenu ul li ul li{
	width:						33%;
}

/* 2nd level list */
#secondmenu ul ul li{
	padding:					0px;
	margin:						0px;
	left:						0px;
	background-color:			#e10707;
	color:						#fff;
	border-right:				0px solid #383a40;
	border-top:					1px solid #fff;

}

#secondmenu ul ul li:hover{
    background-color: #f4f4f4;
}


/* 2nd level links */
#secondmenu ul ul a{
	text-align:					left;
	display:					block;
	padding:					15px;
	color:						#fff;
	line-height:				2em;
	background-color:			#e10707;
	}

	

/* 3rd level ------------------------------------------------------------------------------ */
/* position 3rd level flyout */
#secondmenu ul ul ul{
	position:absolute;
	left:200px;
	top: 0px;
	padding:0px 0px 10px 0px;
	width:200px;
	}
	
#secondmenu ul ul ul li{
	float:none;
}
	
/* 3rd level hidden */
#secondmenu ul :hover ul ul{
	visibility:hidden;
	}

/* 3rd level visible when 2nd hover  */
#secondmenu ul :hover ul :hover ul{
	visibility:visible;
	}	

/* position 3rd level flyout left -> damit links nicht über den rand hinausfliegen */
#secondmenu ul ul ul.left {
	left:-250px;
	}
	
	
/* 4rd level ------------------------------------------------------------------------------ */
/* position 3rd level flyout */
#secondmenu ul ul ul ul{
	position:absolute;
	left:200px;
	top: 0px;
	padding:0px 0px 10px 0px;
	width:200px;
	}
	
#secondmenu ul ul ul ul li{
	float:none;
}
	
/* 3rd level hidden */
#secondmenu ul :hover ul ul ul ul{
	visibility:hidden;
	}

/* 3rd level visible when 2nd hover  */
#secondmenu ul :hover ul :hover ul{
	visibility:visible;
	}	

/* position 3rd level flyout left -> damit links nicht über den rand hinausfliegen */
#secondmenu ul ul ul ul.left {
	left:-200px;
	}


#secondmenu li{
    width: 16.6%;
    border-right: 0;
    padding: 0 5px;
}

#secondmenu li a{
    font-size: 16px;
    padding: 15px 5px;
}
#secondmenu li a.navipunkt5{
    font-size: 16px;
    padding: 15px 5px;
    background-color: #e10707;
    color: #ffffff;
}

#secondmenu li ul li a.navipunkt5{
    font-size: 16px;
    padding: 15px ;
    background-color:#e10707;
		color:#fff;
}

#secondmenu li ul li a.navipunkt5:hover {
	background:#f4f4f4;
	color:					#e10707;
}	

#secondmenu li a:hover{
    background-color: #f4f4f4;
    cursor: pointer;
}



.headliner{
    background-color: #f4f4f4;
    padding: 25px 15px 10px;
    margin-bottom: 25px;
    box-shadow: none;
}

@media screen and (max-width: 1024px){

    

    .logoholder{
        height: 180px;
        width: 100%;
        text-align: center;
        overflow: hidden;
        transition: all .5s ease-in-out;
        position: relative;
    }
    
    
    .logoholder.sub{
        height: 80px;
    }
    
    
    .logoholder h1{
        text-align: center;
        transition: all .5s ease-in-out;
        height: auto;
        font-size: 18px;
        line-height: 1.5;
        padding: 0 15px;
        position: relative;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
    }

    #secondmenu li a.active {
        color: #fff !important;
        background-color: #e10707 !important;
    }

    #secondmenu li a.active_sub {
        color: #fff !important;
        background-color: #e10707;
    }

    #menu ul li a.first {
        padding: 18px 15px 18px 15px;
        padding-left: 15px;
    }

    #menu ul li ul li a.first {
        padding: 18px 15px 18px 15px;
        padding-left: 15px;
    }

    #secondmenu li a.navipunkt5{
        padding: 18px 15px;
    }

    #secondmenu ul ul li{
        border-right:				0px solid #383a40;
        border-top:					0px solid #383a40;
    
    }

   

    #secondmenu li ul li a.navipunkt5{
        font-size: 16px;
        padding: 0px;
        background-color: #f9f9f9;
        padding-left: 10px;
        line-height: 50px;
        text-decoration: none;
        color: #000;
    }

    #menu li a{
        color: #e10707;
    }

    #secondmenu ul li ul li a 	{
		background-color:#fff;
        color:#333333;
        border-top: 0;
		
    }
    
    #secondmenu ul li ul li a:hover 	{
		background-color:#e10707;
		color:#fff;
	}


    .fixedhead{
        position: relative;
    }

    .slidewrapper, 
    .slidewrapper.sub{
        margin-top: auto;
    }

    #menu{
        float: none;
        max-width: unset;
    }

    #secondmenu li{
        width: 100%;
        float: none;
        height: auto;
        padding: 0;
    }

    #secondmenu li a{
        padding: 0 10px;
    }

    #secondmenu ul li ul{
        position: relative;
    }

    #secondmenu ul li ul li{
        width: 100%;
    }

    #navi-contenter .smallsized{
        float: none;
        max-width: unset;
        border-top: 2px solid #fff;
        background-color: #e10707;
        padding: 0;
    }

    #navi-contenter .smallsized .redbox{
        width: 33%;
    }
}


/*Slider*/

.box{
    margin:0;
    width: 100%;
}


/*Footer*/

#footer-content{
    max-width: 1200px;
    width: 100%;
}

/*Blog*/

.uebersichtblog{
    width: 120%;
    margin-left: -10%;
    padding: 0 5% 5% 5%;
    margin-bottom: 2%;
    border-bottom: #ffffff dashed 2px;
}

.flexcontainer {
    display: flex;

    -webkit-align-items: top; 
    align-items: top; 
}

.blogtext{
    padding: 0 0% 0% 5%;
}

.blogtitel{
    padding: 0 2% 2% 2%;
    text-align: center;
    font-size: 1.5em;
}

.uebersichtblog b{
    font-size: 20px;
    display: block;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media screen and (max-width: 1400px){
    .uebersichtblog{
        width: 100%;
        margin-left: 0%;
        padding: 5% 0;
        margin-bottom: 50px;
        border-bottom: #ffffff dashed 2px;
    }

}

@media screen and (max-width: 1024px){

    .content-contenter{
        margin-top: 0;
        padding: 0px 0px 10px;
    }

    .uebersichtblog{
        width: 100%;
        margin-left: 0%;
        padding: 0%;
        margin-bottom: 50px;
        border-bottom: #ffffff dashed 2px;
    }

    .uebersichtblog:hover{
        background-color: transparent;
    }


    
    .flexcontainer {
        display: block;
    
        -webkit-align-items: top; 
        align-items: top; 
    }
    
    .blogtext{
        padding: 0;
    }
    
    .blogtitel{
        padding: 0;
        text-align: center;
        font-size: 1.5em;
    }

    .video-responsive{
        margin-bottom: 20px;
    }

    .headliner{
        background-color: #f4f4f4;
        padding: 25px 15px 10px;
        margin-bottom: 25px;
        box-shadow: none;
    }
}

.red{
    padding: 50px 15px;
    box-shadow: none;
}

@media screen and (max-width: 768px){
    h1{
        font-size: 1.2em;
    }

    .content{
        padding-top: 5%;
        padding-bottom: 5%;
    }
}


.uebersichtblog p a{
    display: inline-block;
    margin-top: 15px;
}

a.btn{
    transition: all .5s ease-in-out;
    background: #008000;
    color: #fff !important;
    text-decoration: none;
    padding: 10px;
}

a.btn:hover{
    background-color: #333333;
}

ul{
    list-style-type: disc;
}


/*ShopLink 2021*/

.gallygallery .container{
    padding: 0;
    max-width: unset;
}

#secondmenu ul li.shoplink a{
    background: #e10707;
    color: #fff;
    transition: all .3s ease-in-out;
}

#secondmenu ul li.shoplink a:hover{
    background: #333333;
    color: #fff;
}

#menu .shoplink, #secondmenu ul ul li.shoplink{
    display: none;
}

@media screen and (max-width: 1024px){
    #menu #secondmenu .shoplink{
        display: block;
    }

    #secondmenu ul li.shoplink a{
        background: #333333;
        color: #fff;
        transition: all .3s ease-in-out;
    }
    
    #secondmenu ul li.shoplink a:hover{
        background: #333333;
        color: #fff;
    }
    
}

footer a{
    color: #fff;
}

footer a:visited{
    color: #fff;
}

.red .btn{
    background-color: #333333;
}

#map_canvas{
    height: 100%!important;
}

.bigbtn.shop{
    left: auto;
    /*right: 15%;*/
    right: 0;
    width: 25%;
    display: flex;
}

.bigbtn.termin{
    left: auto;
    width: 15%;
    display: none;
}

@media screen and (max-width: 768px){
    .bigbtn.shop{
        right: 0%;
        width: 30%;
    }

    .bigbtn.termin{
        width: 30%;
        display: none;
    }
}

/*2022*/

footer{
    margin-top: -6px;
}

.footermap {
    float: none; 
    width: 100%;
}

.footermap iframe{
    width: 100%;
    height: 100%;
    min-height: 350px;
}

#gallygallery_header{
    background-image: url(../img/terminbuchung.jpg);
    background-size: cover;
    background-position: center center;
}

footer .col-md-4{
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: center;
}

@media screen and (max-width: 768px){
    footer .col-md-4{
        padding-bottom: 0;
    }

    footer .col-md-4:last-of-type{
        padding-bottom: 2em;
    }
}

footer .col-md-4 p{
    text-align: center;
}

.d-none{
    display: none;
}