/*Things you might want to change*/



.maxwidthcenter { width: 100%; max-width: 1200px; margin: 0 auto;}

.outercontentbox  {background: rgba(229,229,229)}}

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

	.maxwidthcenter { width: 94%; margin: 0 3%;}

}



.logo {position:absolute; top:-200px; left: 0%; width:15%; padding: 5px; max-width: 250px; background: rgba(255,255,255,0.0)}

.logo img {max-width: 300%;}



#mobilemenubox {background: rgba(255,255,255,0.5); box-shadow: 0px 3px 3px -4px rgba(0, 0, 0, 0.1); transition: background 1s, box-shadow 1s;}

.isscrolled #mobilemenubox {background: rgba(255,255,255,1); box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.3);}



#footerparallax {padding-top:30%;}

.bigfooter, .bigfooter a {background:#b21f1f; color:#fff ! important}





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

	.logo {position:absolute; top:-100px; width:35%; }

	#footerparallax {padding-top:80%;}

}



@font-face {

    font-family: 'Roboto';

    src: url('Roboto-Italic.woff2') format('woff2'),

        url('Roboto-Italic.woff') format('woff');

    font-weight: normal;

    font-style: italic;

    font-display: swap;

}



@font-face {

    font-family: 'Roboto';

    src: url('Roboto-LightItalic.woff2') format('woff2'),

        url('Roboto-LightItalic.woff') format('woff');

    font-weight: 300;

    font-style: italic;

    font-display: swap;

}





/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	Layout Basics

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body { 	

	background: #fff;

	margin: 0; padding: 0;

	height:100%;

	width:100%;

	

}





.wrapper { /* Alles vor topparallax, volle breite */

	width: 100%; 

	max-width: 2500px; 

	margin: 0 auto 0 auto;	

	box-shadow: 0px 20px 40px -20px rgba(0, 0, 0, 0.4);

	position: relative; top: 0;

	z-index: 10;

	overflow:hidden;	

}



.wrappercontent {

	/*background: url(img/body_bg.jpg) no-repeat fixed; 

	background-size: cover;*/

}

















/*Parallax Image*/

#topparallax, #topparallax_spacer {width:100%; padding-top:25%;}

#topparallax {z-index:0;  position:fixed; top: 0; background: #479cd4 url(img/parallaxdefault.jpg) no-repeat fixed; background-size: cover;}

#topparallax_spacer {position:relative;}



.frontpage #topparallax, .frontpage #topparallax_spacer {padding-top:30%;}



.hascontent10 #topparallax, .hascontent10 #topparallax_spacer {padding-top: 0% ! important;}



/*diverses*/

.logocontainer {height:0; position:relative;}

.outercontentbox {}





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

Contentbereich

*/



/*.contentbox {margin: 30px 4% 0 4%; }*/

.contentbox {margin: 0px 1% 0 1%; padding-top:30px;}





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

Alles rechts neben left

ab hier: 1/3 grid

*/

.mainbox {}



.content { /* main content */

	width: 73%;

	float: left;

	display:inline;

	margin-left: 0;

}





.contentgrid2 .content.contentnarrow {width: 50%;}

.contentgrid3 .content.contentnarrow {width: 66%;}



.mainbox .contentwide  {width:100%; margin:0 0 0 0;}













#rightbox { width: 25%; float: right; display:inline; border-left:1px #ddd solid; }

.contentgrid2 #rightbox {width: 48%;}

.contentgrid3 #rightbox {width: 30%;}



#rightbox .inner { margin: 0 3% 3px 3%; font-size:0.9em; line-height:135%}

#rightbox .inner img { max-width:100%; height:auto ! important;}









.clearcontent {height:60px; clear:both; }



.footerbox {min-height:80px; position:relative; font-size:13px; color: #999; width: 100%; }

.footerbox .left {width: 0%; position:absolute; left:0; top:0;}

.footerbox  .center {width: 95%; margin: 10px 0 0 0; float:left; text-align:center;}



.bigfooter {clear:both; z-index:500}

#footerparallax {clear:both; z-index:500}







#gototopswitch {float:right; margin: 10px 10px 0 0}

#editthis {width: 0%;}













/* Top and Menu Box */

#topmenuboxwrapper, #topmenubox  {height:46px; width: 100%;  background:#b21f1f; margin:0 0 0 0; }

.menu_on_top #topmenuboxwrapper {height:0;}

 

 

.m_inner {position:relative; height:100%; }

#XXcentermenubox .m_inner {height:100%; }





#topmenubox.visible, .menu_on_top #topmenubox {position:fixed; top:0; z-index:1100; }

#topmenubox .m_inner {border-bottom: none ! important;}



/* Search Box in header */

li.search_box_li a {border: none ! important;}



.menuebox {width: 75%; height:100%; float:left; position:relative;} 

#openrightboxswitch, #closerightboxswitch, #mobilemenubox {display:none;}



/* nav: see below */









/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

.breadcrumbs {

	height:30px;

	line-height:100%;

	margin: 0 0 0 0;

	padding: 3px 0 3px 0;

	clear:both;	

}



.innerbc {

	font-size:14px;

	margin:10px 0 0 25%;

}



.breadcrumbs .innerbc span {

	background: transparent url(img/bclink.gif) no-repeat; 

	padding: 6px 2px 0px 12px; font-weight: normal; }

	

.breadcrumbs .innerbc a {

	padding:1px;

	border-bottom: 1px dotted #505567;

	text-decoration: none;

}

.breadcrumbs .innerbc a:hover {border-bottom: 1px solid #505567;}

	

.breadcrumbs .innerbc .menu-current a{

	color: #000000;

}





.frontpage .breadcrumbs {display:none;}



#aprevnext {display:block; width:90px; height:27px; float:right;}

#aprevnext a {display:block; width:40px; height:27px; float:right; opacity:0.5; border:none;}

#aprevnext a.aprev {background: url(img/prev.png) no-repeat center top;  }

#aprevnext a.anext {background: url(img/next.png) no-repeat center top;  }

#aprevnext a:hover {opacity:0.8}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

	####	Header Menu #####

	#######################



	Horizontal Drop-Down Menu based off :

	http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp

	

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */





/* Remove List Formattings

~~~~~~~~~~~~~~~~~~~~  */

#nav {

	position: absolute;

	bottom:0;	

	border: 0;	

	padding:0;

}

.menu_right #nav {right: 0; left:auto}



#nav ul,  #nav2 ul {

	list-style-type: none;

	list-style-image: none;

	margin: 0;

	padding: 0;

	width: auto;

	position: relative;

	z-index: 800;





}

#nav ul li,  #nav2 ul li {

	list-style-type: none;

	list-style-image: none;

	margin: 0;

	padding: 0;

}





/* Root Level Link Formatting */

#nav ul li {float: left; display:inline; color: #aaa; text-align: left; font-weight: normal; list-style-type: none; list-style-image: none ;}

#nav ul li a {display: block;  font-size: 16px; border-right:1px #ddd solid; color: #666; text-decoration: none; XXfont-weight: bold; background-repeat: no-repeat;}

#nav ul li a span {display:block; padding: 11px 12px 10px 12px; }

/* Root Level link hover */

#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current, #nav a.menu-parent { }





/*Current page Customisations*/

#nav a.menu-current		{font-weight: bold;}







/* 2nd Child menu */

#nav  li ul {position: absolute; right:10000px; width: 200px; opacity:0.0; text-transform: none; border:none;   font-size: 13px; background-image: url(img/glitzi.png) no-repeat right 0px; box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.4);}

#nav  li ul li {text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;  }

#nav  li ul li a {width: 200px;  text-align:left; height:auto; text-shadow: none; margin:0; padding: 0;  border-top: 1px solid #fff; font-weight: normal; font-size: 14px; background: none;}

#nav  li ul li a span {display:block; padding:8px; }







/* 2nd Child link hover */

#nav  li ul a:hover,  #nav  li ul a.menu-current {  text-shadow: 1px 2px 4px #000;}

#nav  li ul a.menu-expand {background: transparent url(img/arr-right.png) no-repeat right 5px ; }

#nav  li ul a.menu-parent {background: #cc0000 url(img/arr-right.png) no-repeat right 5px; }







/* Show and hide */

#nav  li:hover ul, #nav  li a:focus ul, #nav li.tabselected ul {left:-1px; opacity:1; transition:0.5s opacity;}

#nav  li ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}

#nav  li:hover ul ul, #nav  li.subMenu ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}

#nav  li:hover>ul, #nav  li li:hover>ul { opacity:1; margin-left: 0;  transition:0.5s opacity; z-index: 1000;}

#nav  ul li ul li:hover>ul {left: 60%;  opacity:0.9;}







/* 3rd Child Menu Appreances */

#nav  li ul li ul	{ width: 180px; margin: 10px 0 0 -40%; z-index: 2000; }

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

#nav  li ul li ul li a 	{ width: 100%;}







/* Positioning the Pop-out Drops */

#nav li {position: relative;}



#nav ul ul ul {

	position: absolute;

	top: 1px;

	left: 100%;

}







/* Better: */

#nav li:hover {

	z-index: 1000;	/* ...and here. this makes sure active item is always above anything else in the menu */

	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)

							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */

}





.menu_right #nav  li:hover ul, .menu_right #nav  li a:focus ul, .menu_right #nav li.tabselected ul  {left:-100px;}

.menu_right #nav  ul li ul li:hover>ul {}





/* end menu */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



#footer_menu {padding-bottom: 10px;}

#footer_menu a { display: inline-block; padding: 2px 10px; border-right: 1px solid #999;}

#footer_menu a:first-child {border-left: 1px solid #999;}

#footer_menu a.menu-current {font-weight:bold;}



	

	/*Extra cookie_permission */

#cookie_permission {position:fixed; top:0; right:0; z-index:9950; width: 200px; padding:10px; background: #555; text-align:center; font-size: 0.9em; line-height:120%; border-radius: 0 0 0 25px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.2); }

#cookie_permission p , #cookie_permission a {color:#fff;}

#cookie_permission a.cookieaccepted {color:#000; background: #eeb300; display:block; padding:5px; border-radius: 15px; border: 1px solid #fff; font-weight:bold;}











#gototopswitch {float:right; margin:10px 0 0 0;}



/* Login Box */



#showlogin {display:block; float:left; position:relative;  width:30px; text-align:right; margin:10px 6px 0 0; }

#login-box {position:absolute; width:250px; left:10px; top:-10px; padding:5px; font-size:11px; z-index:2000; background: #eee; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);}

#login-box td {vertical-align: top; }

#login-box .loginsubmit {border:0;}

#login-box .inputfield {width:100px; border: 1px solid #c9e8f9; padding:1px; line-height: 1em;}



/*COuld bee visible on Desktop*/

#nav2 {width:250px; height: auto; position:absolute; left:-300px; }	



.showonmobiles  {display:none;}







a.footerblock {display: block; color:#000; width:30%; margin: 20px 3% 0 0%; height: 100%; float:left; background-size: 12% auto, auto; opacity:0.6; transition: 0.5s opacity;}

a.footerblock span {display:block; float:left; font-size:1em; line-height:120%; padding:10px 0 0 0; }



a.footerblock img {float:left; width:15%; margin: 0 2% 20px 0; }

a.footerblock:hover {opacity:0.8; transition: 0.9s opacity;}



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

Responsive:

*/





/*Smaller Screens */

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

	

	.container {padding-top: 2px;}		

	.mainbox .contentwide  {width:96%; margin:0 0 0 2%;}

	#rightbox { width: 33%;}

	#rightbox .inner { margin: 0 5% 0 5%;}

	

	

	#topmenuboxwrapper, #topmenubox, .logocontainer{ display:none;}

	

	#mobilemenubox {display:block; position: fixed; top: 0; left: 0; width:100%; height:60px; z-index:1000;}			

	.toggleMobileMenu {position: absolute; top: 5px; right: 10px; display:block; width:37px; height:52px; background: url(img/menuswitch.png) no-repeat top right;}

	.mobilelogo img  {height:100%; margin-left: 4%;}

	



	

	/*Nav*/

	

	.breadcrumbs { height:560px; }

	

	#nav2 {width:250px; height: auto; position:absolute; left:-300px; top:100px; z-index:2000; transition: left 1s; }

	#nav2  {box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);}

	

	#nav2 li {width:250px;  padding: 0 0 0 0; }

	#nav2 li a {display:block; padding: 12px 0 12px 20px; font-size:18px;  text-decoration: none; border-bottom: 1px solid #fff;}

	#nav2 li li a {padding: 10px 0 10px 30px; font-size:16px;  }

	#nav2 li li li a {padding: 8px 0 8px 40px; font-size:14px; }

	#nav2 li li li li a {padding: 6px 0 6px 50px; font-size:13px; ;}

	

	#nav2 li ul {display:none;}

	#nav2 li.menu-parent > ul, #nav2 li.menu-current > ul {display:block;}

	#nav2 li.is_opened > ul, #nav2 li.is_opened > ul {display:block;}

	

	#nav2 li a.menu-expand {background: transparent url(img/arr-down.png) no-repeat left center ;}

	#nav2 li a.menu-current { text-shadow: 1px 2px 4px #000;}

	

	#nav2 ul li a.menu-expand.is_opened, #nav2 ul li a.menu-parent {font-weight:bold; background-image: url(img/arr-right.png) no-repeat 2px center ; }

	#nav2close {display:none; z-index:1990; position:absolute; top:0; width:100%;  height: 900px; background-image:none;}

	

	

	

	.breadcrumbs { width: 100%; height: auto; }

	.innerbc { margin: 2px 0 5px 2%; width: 96%; }

	.innerbc span  {display: block; float:left; padding: 2px 2px 2px 12px; margin: 0 0 5px 0;}

	.innerbc b  {display: none;}

	

	.mobilemenuopen  #nav2 {left:0; }

	.mobilemenuopen #nav2close {display:block;} 

	

	

	.wrappercontent {

	background-image: none; 



}

	

	 

	h1 { font-size: 2.2em;}

	h2 {font-size: 1.8em;}

	h3 {font-size: 1.6em; }

	

	

}





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

Smaller Screens */

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

	

	.contentbox .mainbox .content, .contentbox .mainbox #rightbox  {float: none; width:100%; border-left:none; display:block; padding: 0;}

	.contentbox, .content {width:96%; margin:0%; float: none; padding: 30px 2%;}

	

	#rightbox  {border-top:10px solid #999; padding-top:20px;}

	#rightbox .inner { margin: 0 0 0 0;}

	



	.topheader  {padding-bottom: 30%;  background-size:  100% auto, auto; background-image: url(img/header-mobile.jpg);}

	

	

	#topparallax, #topparallax_spacer {padding-top:35%;}

	.frontpage #topparallax, .frontpage #topparallax_spacer {padding-top:45%;}



	

	h1 { font-size: 2.0em;}

	h2 {font-size: 1.6em;}

	h3 {font-size: 1.4em; }

	#topparallax p {line-height:120%;}



	



}



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

Smaller Screens */

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

#topparallax, #topparallax_spacer {padding-top:55%;}

	.frontpage #topparallax, .frontpage #topparallax_spacer {padding-top:65%;}

	

	#topparallax .ptext {bottom:0; }

	.topheader p { font-size:1.4em; }

	h1 { font-size: 1.8em;}

	h2 {font-size: 1.6em;}

	h3 {font-size: 1.3em;}

}

 }

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

   Tauch-Service Ullmann - neuer Footer

   ========================================================= */
.bigfooter {
    width: 100%;
    clear: both;
    background: #b21f1f;
    color: #ffffff;
    box-sizing: border-box;
}

.bigfooter,
.bigfooter h3,
.bigfooter strong,
.bigfooter p,
.bigfooter span,
.bigfooter div,
.bigfooter a {
    color: #ffffff !important;
}
.bigfooter a {

    color: #fff;

    text-decoration: none;

}



.bigfooter a:hover {

    text-decoration: underline;

}



.footerbox {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    position: relative;

    box-sizing: border-box;

}



.footerbox-inner {

    width: 100%;

    padding: 35px 5% 20px 5%;

    box-sizing: border-box;

}



.footer-spalten {

    display: flex;

    justify-content: space-between;

    gap: 40px;

    width: 100%;

}



.footer-spalte {

    flex: 1;

    min-width: 0;

    font-size: 15px;

    line-height: 1.7;
}



.footer-spalte h3 {

    margin: 0 0 12px 0;

    font-size: 20px;

    color: #fff;

    font-weight: bold;

}



.footer-spalte a {

    color: #fff;

}



.footer-trennlinie {

    width: 100%;

    height: 1px;

    background: rgba(255,255,255,0.4);

    margin: 25px 0 15px 0;

}



.footer-copyright {

    text-align: center;

    font-size: 13px;

    padding-bottom: 5px;

}



#gototopswitch {

    position: absolute;

    right: 15px;

    top: 10px;

    z-index: 10;

}





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

   Tablet

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



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



    .footer-spalten {

        flex-wrap: wrap;

        gap: 25px;

    }



    .footer-spalte {

        flex: 0 0 calc(50% - 15px);

    }



}





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

   Handy

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



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



    .footerbox-inner {

        padding: 30px 7% 20px 7%;

    }



    .footer-spalten {

        display: block;

    }



    .footer-spalte {

        width: 100%;

        margin-bottom: 25px;

    }



    .footer-spalte h3 {

        font-size: 19px;

    }



    .footer-copyright {

        line-height: 1.5;

    }



}