@CHARSET "UTF-8";

* {
  Xmargin: 0; Xpadding: 0;
  box-sizing: border-box; // This makes sure that the padding and border are included in the total width and height of the elements.
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
  font-family: 'Source Sans Pro', Calibri, Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  word-break: break-word;
  Xtext-align: justify;
  -webkit-text-size-adjust: 100%;
  XX-webkit-font-smoothing: antialiased;
  background: #ffffff;
  color: #222;
}
 

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.centered { top: 0; margin: 0 10vw; Xmin-height: 250px; width: 80vw; }

.h1,.h2,.h3,.h4,.h5,.h6 { font-face: 'Lato', Calibri, Arial, Helvetica, sans-serif; }


.tx-indexedsearch-searchbox-sword { width: 100px; }

/* creates triangle */
li.arrowright:before {
  width: 0;
  height: 0;
  position: absolute;
  margin-left: -10px;
  margin-top: 10px;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid black;
  z-index: 99999;
 }

li.arrowdown:before {
  width: 0;
  height: 0;
  position: absolute;
  margin-left: -13px;
  margin-top: 12px;
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  z-index: 99999;
 }
 
 

.greyout { display: none; background-color: #fafafa; position: fixed; width: 100vw; height: 100%; opacity: 0.8; z-index: 1000; }
.top { position: fixed; z-index: 2000; overflow: visible; top:0; height: 100px; width: 100%; background-color: #FFFFFF; border-bottom: solid 1px #999999; }
.topimage { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; top: 100px; max-height: 250px; overflow: hidden; }
.topimage img { width: 100vw !important; height: auto; }

.middle { width: 100%; top: 100px; position: relative; display: flex; flex-wrap: wrap; justify-content: start; align-content: flex-start; align-items: stretch; }
.text-1col { padding-top: 0; padding-bottom:50px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; align-items: stretch; }
.text-2col { padding-top: 0; padding-bottom:50px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; align-items: stretch; }
.text-center { text-align: center; }
.text a { text-decoration: none; color: #01519e; }
.text { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; align-items: stretch; }

.rand { margin-left: 2vw; margin-top: 70px; overflow: hidden; }
.rand .frame { padding: 5px; margin-bottom: 10px; border: solid 1px #eeeeee; border-radius: 5px; font-weight: 400; font-size: 0.9rem; }
.rand h1 { margin-top: 0; border: none; padding-bottom: 10px; color: #000000; font-size: 1em; }
.rand a { color: #01519e; text-decoration: none; }
.rand img { width: 100%; height: auto; }

/* Klickpfad */

.klickpfad { width: 100vw; padding: 10px 0; font-face: Open-Sans,arial,helvetica; font-size: 1em; }
.klickpfad a { text-decoration: none; color: #666666; }
.klickpfad ul { list-style-type: none; }
.klickpfad li { display: table-cell; }


.Xclearing { clear: both; }

div.frame-layout-0 { display: block; width: 100%; }
Xdiv.frame-layout-0 img { width: 100%; height: auto; }

/* Navigationsblock, 2 nebeneinander */
div.frame-layout-1  { width: 50%; margin: 1%; Xmin-height: 250px; border: solid 1px #ffffff; padding: 0; border-radius: 5px; overflow: hidden; }
div.frame-layout-1 h1 { display: block;  text-align: center; font-weight: 900; border: none; margin-bottom: 0.3em; }
div.frame-layout-1 .ce-bodytext { color: black; font-size: 0.9em; padding: 5px;}
div.frame-layout-1 a { display: block; width: 100%; height: 100%; color: black; text-decoration: none; border: none; }
div.frame-layout-1 .ce-textpic { height: 100%; overflow: hidden; Xtop: -33px; z-index: 500; }
div.frame-layout-1 img { width: 100%; height: auto; }

/* Navigationsblock, 3 nebeneinander */
div.frame-layout-2 { width: 33%; margin: 1%; min-height: 250px; border: solid 1px #ffffff; 0; border-radius: 5px; overflow: hidden; }
div.frame-layout-2 h1 { display: block;  text-align: center; font-weight: 900; border: none; margin-bottom: 0.3em; }
div.frame-layout-2 .ce-bodytext { color: black; font-size: 0.9em; padding: 5px;}
div.frame-layout-2 a { display: block; width: 100%; height: 100%; color: black; text-decoration: none; border: none;  }
div.frame-layout-2 .ce-textpic { height: 100%; overflow: hidden; Xtop: -33px; z-index: 500; }
div.frame-layout-2 img { width: 100%; height: auto; }

div.frame-layout-3 { display: block; width: 100%; }
div.frame-layout-3 .ce-textpic { width: 80vw; }
             
.ce-border img, .ce-border iframe {
    border: 1px solid #000;
    padding: 0px;
}
			 

.bottomnav { Xdisplay: box; position: relative; Xwidth: 1100px; padding-left: 115px; padding-right: 115px; }

.copyrightbar { background-color: #01519e; top: -1px; width: 100vw; padding: 20px 0; position: relative; top: 150px; }
.copyright { text-align: left; color: #bfd3e7; line-height: 1.5; font-size: 0.6em; }

.footer { display: block; width: 100vw; background-color: #01519e; margin: 0; border: none; position: relative;  top: 150px; Xleft: -10vw; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; align-items: stretch; }
.footer-column { font-size: 0.8em; color: white; #bfd3e7; margin: 0; padding-top: 25px; padding-bottom: 0; }
.footer a { text-decoration: none; color: white; X:#bfd3e7; }
.footer a:hover { color: #FFFFFF; border-bottom: solid 1px #ffffff;}
.footer li { list-style-type: none; }
.footer ul { padding: 0; }

p { margin-bottom: 0.5em; }
h1 { display: block; Xborder-bottom: solid 1px #01519e; Xmargin-top: 40px; margin-bottom: 1em; color: #000000; font-size: 1.5em; xtext-transform: uppercase; }
h2 { display: block; margin-bottom: 0.5em; font-size: 1.3em; }
h3 { margin-bottom: 0.5em; font-size: 1.1em; }

h2 a { color: #01519e; }

.contenttable td { border: none; }

.csc-textpic-intext-right .csc-textpic-imagewrap { margin-left: 60px !important; margin-top: 35px; margin-bottom: 35px; }
.csc-textpic-intext-left .csc-textpic-imagewrap { margin-right: 60px !important; margin-top: 35px; }


/* Navigationsmenü einblenden auf Mobile Devices */

    @keyframes XXXmenugrow {
		from { transform: translatex(100vw); Xscalex(0); }
		to   { transform: translatex(0); scalex(1); }
	}
	
#XXXmenu-show-btn:target .menu { display: block !important; Xtransition: transform 1s ease-in-out; }

.frame-type-form_formframework label { font-size: 0.8em; }
.frame-type-form_formframework input { width: 100%; background-color: #eeeeff; line-height: 30px; border: none; border-radius: 5px; padding-bottom: 1em; }
.frame-type-form_formframework textarea { width: 100%; height: 10em; background-color: #eeeeff; line-height: 30px; border: none; border-radius: 5px; padding-bottom: 1em; }
.frame-type-form_formframework button { margin-top: 1em; padding: 15px 50px; color: white; background-color: #01519e; border: none; border-radius: 5px; padding-bottom: 1em; }

.frame-type-shortcut { width: 100%; display: flex !important; flex-wrap: wrap; align-content: flex-start; }
.frame-type-shortcut > .ce-image { min-width: 500px; width: 48%; box-sizing: normal; }

.scrolltotop {
	display: inline-block;
	position: fixed;
	bottom: 15px;
	right: 15px;
	padding: 5px 8px;
	border-radius: 30px;
    Xborder: 1px solid rgba(255,255,255,0.5);
	text-color: white;
	background-color: #000;
	box-shadow: 0 0 10px #000;
    transition: all 0.3s ease-in-out;
	opacity: 1;
}

.scrolltotop:hover { opacity: 1; }

.scrolltotop a {
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   Xcontent: "\f509";
   font-size: 1em;
   float: left;
   color: white;
   -webkit-font-smoothing: antialiased;
}   

/* ************************************************************************************************* */
/* Smartphones */
/* ************************************************************************************************* */
@media screen and (min-width: 1px) and (max-width: 767px) {
	.top { position: absolute; }
	.top,.middle,.footer,.copyright { padding: 0 5px; }
	.text { width: 100%; }
	.rand { width: 100%; }
    div.frame-layout-0 { width: 100%;}
    div.frame-layout-1 { width: 100%;}
    div.frame-layout-2 { width: 100%;}
	div.frame-layout-3 { width: 100%; }
	.footer-column { width: 100%; }
	
    #menu-show-btn { Xdisplay: block; width: auto; height: auto; left: 10px; top: 48px; position: absolute; }
    #menu-hide-btn { display:none; width: auto; height: auto; left: 10px; top: 48px; position: absolute; }
	#Xmenu-button:checked { display: block; }
	.menu { display: none; Xmin-height: 100vh; Xanimation-name: menugrow; animation-duration: 0.5s; position:absolute; left: 0; top: 125px; z-index: 9000; Xheight: auto; width: 100vw; }

	.menu ul { display: block; position: relative; padding: 0; margin: 0; width: 100%; height: auto; margin-top: 0; top: 0; list-style-type: none; }
	.menu ul > li { display: block; background-color: #eee; line-height: 40px; overflow: visible; width: 100%; white-space: nowrap; }
	.menu ul li a { background-color: #eee; border: solid 1px #eeeeee; display: block; font-weight: 500; height: 40px; padding: 0 20px; text-decoration: none; color: #000000; }
	.menu ul li li a { background-color: #eee; border: solid 1px #eeeeee; display: block; font-weight: 500; height: 40px; padding: 0 40px; text-decoration: none; color: #000000; }
	.menu ul li li li a { background-color: #eee; border: solid 1px #eeeeee; display: block; font-weight: 500; height: 40px; padding: 0 60px; text-decoration: none; color: #000000; }
	.menu a:hover { color: #01519e;  }
	.Xmenu ul li.activelink a { color: #01519e; }
	
	/* Sub-Menü, Unterebenen zunächst verbergen */
	.menu ul ul { display: none; }
	.menu ul ul:after { clear: both; }

	/* Sub-Ebenen einblenden, wenn mit der Maus darüber */
	.menu ul > li:hover > ul { visibility: visible; display: block; }

	.tx-indexedsearch-searchbox-sword { margin-left: 10px; width: 80%; height: 2em; }

/* creates triangle */
li.arrowright:before {
  width: 0;
  height: 0;
  position: absolute;
  margin-left: 20px;
  margin-top: 10px;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid black;
  z-index: 99999;
 }

li.arrowdown:before {
  width: 0;
  height: 0;
  position: absolute;
  margin-left: 17px;
  margin-top: 12px;
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  z-index: 99999;
 }

    .companylogodiv { z-index: 1; Xbackground-color: red; position: absolute; top: 10px; right: 10px; margin:0; padding: 10px; height: 125px;  }
    .companylogo { max-width: 188px; float: right; }


.frame-type-shortcut { width: 100%; display: flex !important; flex-wrap: wrap; align-content: flex-start; }
.frame-type-shortcut > .ce-image { min-width: 0; max-width: 767px; width: 100%; box-sizing: normal; }


}

/************************************************************************************************** */
/* Tablet */
/************************************************************************************************** */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.top,.footer,.copyright { padding: 0 5vw; }
	.middle { width: 95%; padding: 0; }
	.text-1col { width: 100%; }
	.text-2col { width: 100%; }
	.rand { margin: 0 auto; width: 50%; }
	    div.frame-layout-0 { width: 100%;}
    div.frame-layout-1 { width: 50%;}
    div.frame-layout-2 { width: 33%;}
	div.frame-layout-3 { width: 100%; }

	.footer-column { width: 33%; }

    .companylogodiv { z-index: 1; Xbackground-color: red; position: absolute; top: 10px; right: 10px; margin:0; padding: 10px; height: 125px;  }
    .companylogo { max-width: 188px; float: right; }

    #menu-show-btn { Xdisplay: block; width: auto; height: auto; left: 10px; top: 48px; position: absolute; }
    #menu-hide-btn { display:none; width: auto; height: auto; left: 10px; top: 48px; position: absolute; }
	.menu { display: none; Xmin-height: 100vh; Xanimation-name: menugrow; animation-duration: 0.5s; position:absolute; left: -5px; top: 125px; z-index: 9000; Xheight: auto; width: 100vw; }

	.menu ul { display: block; position: relative; padding: 0; margin: 0; width: 100%; height: auto; margin-top: 0; top: 0; list-style-type: none; }
	.menu ul > li { display: block; line-height: 40px; overflow: visible; width: 100%; white-space: nowrap; }
	.menu ul li a { background-color: #eee; border: solid 1px #eeeeee; display: block; font-weight: 500; height: 40px; padding: 0 5px; text-decoration: none; color: #000000; }
	.menu ul li li a { background-color: #eee; border: solid 1px #eeeeee; display: block; font-weight: 500; height: 40px; padding: 0 15px; text-decoration: none; color: #000000; }
	.menu ul li li li a { background-color: #eee; border: solid 1px #eeeeee; display: block; font-weight: 500; height: 40px; padding: 0 25px; text-decoration: none; color: #000000; }
	.menu a:hover { color: #01519e;  }
	.Xmenu ul li.activelink a { color: #01519e; }
	
	/* Sub-Menü, Unterebenen zunächst verbergen */
	.menu ul ul { display: block; }
	.menu ul ul:after { clear: both; }

	/* Sub-Ebenen einblenden, wenn mit der Maus darüber */
	.menu ul > li:hover > ul { visibility: visible; Xdisplay: block; }
	
}

/************************************************************************************************** */
/* Desktop */
/************************************************************************************************** */
@media screen and (min-width: 1025px) {
	.top,.footer,.copyright { padding: 0 10vw; }
	.middle { padding: 0 10vw; }
	.text-1col { width: 100%; }
	.text-2col { width: 75%; }
	.rand { width: 20%; }
    div.frame-layout-0  { width: 100%;}
    div.frame-layout-1  { width: 48%;}
    div.frame-layout-2  { width: 31%;}
    div.frame-layout-3  { width: 80vw !important;}
    div.frame-layout-4  { width: auto; }
	.footer-column { width: 33%; }
    #menu-show-btn { display: none; }
    #menu-hide-btn { display: none; }

/* Hauptmenü */
.menu { position:relative; top: 50px; z-index: 10000; height: 0; max-width: 80vw; display: block; }
.Xmenu ul > li:focus > ul > li:hover > ul { visibility: visible; display: block; }
/* Sub-Menü, Unterebenen zunächst verbergen */
.Xmenu ul ul { display: none; background-color: green; width: 100%; height: auto; position: absolute; top: 40px; padding-left: 10px; background-color: red; }
.Xmenu ul ul:after { clear: both; }

.Xmenu ul ul li { display: block; overflow: visible; padding-right: 20px; border-bottom: 1px solid #eeeeee; width: 100%; }
.Xmenu ul ul li a { display: block; height: 40px; text-align: left; border-bottom: none !important; text-decoration: none; }

.Xmenu ul ul ul { display: block; background-color: blue; height: auto; position: relative; top: 0; padding: 0; padding-left: 10px; background-color: white; }
.Xmenu ul ul ul li { display: block; overflow: visible; padding-right: 0; }
.Xmenu ul ul ul li a { display: block; height: 40px; text-align: left; border-bottom: none !important; text-decoration: none; }

.menu ul { display: block; position: relative; padding: 0; margin: 0; width: auto; height: auto; margin-top: 0; top: 0; list-style-type: none; }
.menu ul li { display: inline-block; overflow: visible; width: auto; padding-right: 30px; white-space: nowrap;  }
.menu ul li a { display: block; font-weight: 500; height: 40px; text-decoration: none; color: #000000; }
.menu a:hover { color: #01519e;  }
.menu ul li.activelink a { color: #01519e; }

/* Sub-Menü, Unterebenen zunächst verbergen */
.menu ul ul { display: none; height: auto; position: absolute; top: 40px; padding-left: 20px; background-color: white; Xmargin-bottom: -100px; }
.menu ul ul:after { Xclear: both; }

.menu ul ul li { display: block; overflow: visible; padding-right: 20px; }
.menu ul ul li a { display: block; line-height: 2em; text-align: left; border-bottom: none !important; text-decoration: none; }

.menu ul ul ul { display: none; height: auto; position: relative; top: 0; padding: 0; padding-left: 20px; background-color: white; }
.menu ul ul ul li { display: block; overflow: visible; padding-right: 0; }

/* Sub-Ebenen einblenden, wenn mit der Maus darüber */
.menu ul li:hover ul { display: block; }

.companylogodiv { margin: 0; padding: 0; height: 69px; float:right; }
.companylogo { margin-right: 0; margin-top: 20px; max-width: 188px; }