@font-face { font-family: 'calibriReload'; src: url('./Calibri.ttf') format('truetype'); }

html
/*, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, sambap, 
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 
time, mark, audio, video */
{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

@media screen and (max-width: 980px) {
#html {
	width: 100%;
}
}

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 

body {
	font-size: 100%; 
	padding: 0px;
	line-height: 1.3em;
	color: #222222; 
	font-family: Calibri, 'calibriReload', 'PT Sans', sans-serif, serif, Arial; 
} 

.grid {
	margin:0 auto; 
	padding: 0 0px; 
/*	width:80em; */
	width: 1280px;
} 

@media screen and (max-width: 1280px) {
.grid {
/*	width: 75em;*/
	width: 1200px;

}
}

@media screen and (max-width: 980px) {
.grid {
	width: 100%;
}
}

#container { 
  float:left;
  margin-top: 1.3em; /*wie #sidebarExtra */
  margin-bottom: 20px;
}

@media screen and (max-width: 980px) {
#container {
	width: 100%;
}
} 

#banner { 
	border: none; 
	height:320px; 
	top:60px; 
	width:100%; 
	opacity: 1; 
	cursor: pointer; 
} 

/********** Inhaltsspalte *******/

#mainContent {
	width: 665px; 
	float: left; 
	padding: 0em 0.8em 0em 0em; 
	margin-right:1px;
/*	margin-left: 1px; */
} 

@media screen and (max-width: 1280px) {
  #mainContent{
      width: 43.75em;
      max-width: 100%; 
  }
}

@media screen and (max-width: 980px) {
#mainContent {
	width: 76%;
}
}


@media screen and (max-width: 805px) {
#mainContent {
   clear: both;
   width: 100%;
}
}


#mainContent img { 
          max-width: 100%; 
} 

@media screen and (max-width: 805px) {
#mainContent .db325 .selfdb_report .selfdb_fieldBild  {
   width: 100%;
}
}


ol, ul { 
  margin: 0px; 
}
 
blockquote, q { 
          quotes: none; 
} 

blockquote:before, blockquote:after, 
q:before, q:after { 
          content: ''; 
          content: none; 
} 

table { 
          border-collapse: collapse; 
          border-spacing: 0; 
} 

strong {font-weight: bold;} 
p {margin: 0em 0em 0.5em 0em;} 
h1, h2, h3, h4, h5, h6, .x_head1, .x_head2, .x_head3 { 
          font-weight: normal; 
          line-height: 1.2em; 
          padding: 0.5em 0 0.25em; 
font-family: Calibri, 'calibriReload', 'PT Sans', sans-serif, serif, Arial; 
} 

h1, .db325 .selfdb_fieldBerschrift, .x_head1 { 
          font-size: 1.3em;           
          line-height:1em; 
          margin:0px; 
          padding: 3px 10px 0 10px; 
          margin-bottom:0.4em; 
          /*weitere Überschriftfarben in Templates Navigation ausgelagert*/ 
          border-left: 0.2em solid #008cd0; 
} 

h2, .x_head2 { 
          font-size: 1.2em; 
          margin-bottom:0.3em; 
          font-weight: bold; 
} 

h3, x_head3 { 
          font-size: 1.1em; 
          margin-bottom:0.2em; 
} 

h4 { 
          font-size: 1em; 
          margin-bottom:0.2em; 
} 

h5, h6 { 
          font-size: 1em; 
          margin-bottom:0.2em; 
} 

a, a:link, a:visited { 
          color: #000000; 
          text-decoration: underline;        
} 

a:hover, a:active {                     
          color: #888888; 
} 

hr { 
          border: none; 
          background: url(../image/bg_hr.png) center center no-repeat; 
          height: 10px; 
} 

/********** Header *******/

#header { 
	font-size:0.8em;           
	height:380px; 
}

#burger {
  display: none;
}

@media screen and (max-width: 805px) {
#header {
	height: 0px;
/*	padding-bottom:150px;*/
}


#burger {
  display: block;
  width: 100%;
  background-color: #dddddd;
  float: left;
  text-align: center;
  /*font-size: 4em;
  line-height: 2em;*/
  font-size: 250%;
/*  line-height: 50px;*/
/*  height: 100px;*/
  padding-top: 20px;
}

#toggle-nav {
/*  float: left;*/
}

#toggle-nav img {
  height: 50px;
  margin: -10px 0px 10px 10px;
  float: left;
}
}
 
.wappen { 
	width:220px; 
	float:left; 
 margin-top: -5px;
} 

#searchbox { 
    float:right; 
    width:170px; 
    padding-top:12px; /*wie #nav-mini*/
} 

@media screen and (max-width: 1280px) {
	#searchbox {
	float:left;
}
}

@media screen and (max-width: 980px) {
#searchbox {
	padding-top: 0px;
}
}

#searchbox #suchfeld{ 
    width:110px; 
    font-size:0.8em; 
    display:inline-block; 
} 

#searchbox #suchbutton{ 
    width:50px; 
    font-size:0.8em; 
    display:inline-block; 
/*    float:left; entfällt, da Anzeige nicht wie vorgesehen*/
} 

#searchbox form{ 
} 

/*************** Header-Menü mit Piktogramme **********************/

#nav-mini { 
  float:left;
  padding-top:12px; /*wie #searchbox */
} 

#nav-mini ul { 
    display:inline-block; 
    float:right; 
           
} 
#nav-mini ul li { 
    list-style: none; 
    float:left;         
} 

#nav-mini a, #nav-mini a:link, #nav-main a:visited { 
    color: #000000; 
    text-decoration: none; 
} 

i { 
margin-right: 0.5em; 
} 

#nav-mini a:hover, #nav-mini a:active { 
  background: #dddddd; 
  border-color: #aaaaaa; 
  color: #ffffff; 
           
} 
#nav-mini ul li a {            
  padding: 14px 14px 14px 14px;
} 

@media screen and (max-width: 980px) {
  #nav-mini {
  padding-top: 0px;
  float: left;
}
}

@media screen and (max-width: 805px) {
li a.mobile-invisible {
  display: none;
}
}

/************** Horizontale Hauptnavigation **********************/

#header nav { 
  clear: both; 
  padding-top: 265px; 
z-index:100;
} 

@media screen and (max-width: 1280px) {
#header nav {
  width: 100%;
  position: relative;
}
}

#header nav ul * {
  transition-property: background;
  transition-duration: 0.7s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

#header nav ul {
    list-style-type:none;
    vertical-align:top;
    margin:0;
    padding:0;
}

#header nav li { 
	width: 215px; 
	height: 50px; 
	float: left; 
	list-style:none;
	display:inline;
	padding:0px;
	margin: 0px 5px 0px 0px;
	background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=100);	
}


@media screen and (max-width: 1280px) {
#header nav li {
	width: 19%;
}

#header nav ul ul {
  width: 99.8%;
}

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

#header nav li a:link { 
	text-decoration: none; 
	display: block; 
	color: #333333; 
	font-size: 150%; 
	/*padding: 2px 10px 10px 10px;*/ 
	padding: 2px 10px 0px 10px;
  /*min-height: 100%;*/
height: 2em;
} 

#header nav li.vse_navigation_link1 {border-left: 6px solid #008cd0;} 
#header nav li.vse_navigation_link2 {border-left: 6px solid #d24153;} 
#header nav li.vse_navigation_link3 {border-left: 6px solid #686caf;} 
#header nav li.vse_navigation_link4 {border-left: 6px solid #0a9961;} 
#header nav li.vse_navigation_link5 {border-left: 6px solid #f79052;} 

#header nav li[class^="vse_navigation_link"] ul {
margin-left: -6px;
}

#header nav li[class^="vse_navigation_link"] ul li a:hover {
  background-color: #ffffff;
  color: #000000;
  border: none;
}

#header nav li.vse_navigation_link1 ul li {border-left: 6px solid #008cd0; }

#header nav li.vse_navigation_link1 ul li a {
  background-color: rgb(0, 140, 208);
    background-color: rgba(0, 140, 208, 0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     filter: alpha(opacity=100);	
}
 
#header nav li.vse_navigation_link2 ul li {border-left: 6px solid #d24153;}
#header nav li.vse_navigation_link2 ul li a {
    background-color: rgb(210, 65, 83);
    background-color: rgba(210, 65, 83, 0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     filter: alpha(opacity=100);	
}
 
#header nav li.vse_navigation_link3 ul li {border-left: 6px solid #686caf;}
#header nav li.vse_navigation_link3 ul li a {
    background-color: rgb(104, 108, 175);
    background-color: rgba(104, 108, 175, 0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     filter: alpha(opacity=100);	
}
 
#header nav li.vse_navigation_link4 ul li {border-left: 6px solid #0a9961;} 
#header nav li.vse_navigation_link4 ul li a {
    background-color: rgb(10, 153, 97);
    background-color: rgba(10, 153, 97, 0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     filter: alpha(opacity=100);	
}

#header nav li.vse_navigation_link5 ul li {border-left: 6px solid #f79052;}
#header nav li.vse_navigation_link5 ul li a {
    background-color: rgb(247, 144, 82);
    background-color: rgba(247, 144, 82, 0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     filter: alpha(opacity=100);	
}

@media screen and (max-width: 980px) {
  #header nav li[class^="vse_navigation_link"] ul {
  margin: -0.25em;
}

#header nav li[class^="vse_navigation_link"]  ul li {border-left-width: 0.25em;}
}


/****** nav-Formatierung für Multilevelmenü **************************/
#header nav #dropdownlist1 li,
#header nav #dropdownlist2 li,
#header nav #dropdownlist3 li,
#header nav #dropdownlist4 li,
#header nav #dropdownlist5 li {
	height: auto;
	background-color: #ffffff; 
	float: left; 
	list-style:none;
	display:inline;
	padding:0;
	margin: 0px; 
}

#header nav #dropdownlist1 li a:link,
#header nav #dropdownlist2 li a:link, 
#header nav #dropdownlist3 li a:link, 
#header nav #dropdownlist4 li a:link,  
#header nav #dropdownlist5 li a:link { 
	text-decoration: none; 
	display: block; 
	color: #333333; 
	font-size: 120%; 
	padding: 10px 0px 10px 10px; 
  min-height: 1px;
}

#dropdownlist1,
#dropdownlist2,
#dropdownlist3,
#dropdownlist4,
#dropdownlist5
{
    position: relative;
    top: -12px;
    list-style: none;
    padding: 0px;
    margin: 0px 0px 0px 0px; 
    display: none;
}

#header nav li:hover > #dropdownlist1,
#header nav li:hover > #dropdownlist2,
#header nav li:hover > #dropdownlist3,
#header nav li:hover > #dropdownlist4,
#header nav li:hover > #dropdownlist5
{
    display: inline;
}

[id^="dropdownlist"] ul li div 
{
  border: none;
  min-height: auto;

}

[id^="dropdownlist"] ul li div a:hover
{
  border: none;
  min-height: auto;
} 

/*********** Notwenig, damit der letzte Punkt (Unsichtbare Autostart-Seite) nicht in dem Multilevelmenü dargestellt wird ********/
.A_footdiv, .B_footdiv, .C_footdiv, .D_footdiv, .E_footdiv {
  display: none;
}
/**************************************************************************************************************************************************/

@media screen and (max-width: 980px) {
#header nav {
	padding-top: 260px;
}

#header nav li {
	width: 19.5%;
	margin: 0px;
	min-height: 67px;
}

#header nav li li {
                     min-height: 0em;
}

#header nav li[class^="vse_navigation_link"] { 
	border-left-width: 0.3em; 
}
}

@media screen and (max-width: 805px) {
#header nav {
	padding-top: 0px;
}

#header nav ul li {
         width: 100%;
        border-top: 2px solid #ffffff;
}

#header nav ul li:first-child {border-top: 0px;}

#header nav li:hover > #dropdownlist1,
#header nav li:hover > #dropdownlist2,
#header nav li:hover > #dropdownlist3,
#header nav li:hover > #dropdownlist4,
#header nav li:hover > #dropdownlist5,
#header nav #dropdownlist1 li,
#header nav #dropdownlist2 li,
#header nav #dropdownlist3 li,
#header nav #dropdownlist4 li,
#header nav #dropdownlist5 li {
	display: none;
}

#header nav li[class^="vse_navigation_link"] {border-left-width: 0em; }
#header nav li.vse_navigation_link1 {background-color: #008cd0;} 
#header nav li.vse_navigation_link2 {background-color: #d24153;} 
#header nav li.vse_navigation_link3 {background-color: #686caf;} 
#header nav li.vse_navigation_link4 {background-color: #0a9961;} 
#header nav li.vse_navigation_link5 {background-color: #f79052;} 

#header nav li[class^="vse_navigation_link"]:hover { 
	background-color: #ffffff; 
}

#header nav li a:link
{
	font-size: 120%;
	/*padding: 0px;*/
                     padding-left: 1em;
}

#header nav li {
	min-height: 0px;
	height: 3em;
}
}

/********* Linke Marginalspalte *******/

#sidebarLeft{ 
	float: left; 
	width: 225px; 
} 

@media screen and (max-width: 1280px) {
#sidebarLeft {
    width: 14.9375em;
}
}

@media screen and (max-width: 980px) {
#sidebarLeft {
	width: 20%;
}
}

@media screen and (max-width: 805px) {
#sidebarLeft {
	clear: both;
	width: 100%;
}
}

/********* Rechte Marginalspalte *******/

#sidebarRight {
	width: 220px; 
	float:left;
}

@media screen and (max-width: 980px) {
#sidebarRight {
	width: 100%; 
	clear: both;
}
}

.box_right_image img {
	max-width: 95%; 

}

.box_right{
	width:100%;
	background-color: #FAFAFA;
	padding:0px;
	margin-bottom:1em;	
	padding-bottom:8px;
}

.box_right_title {
	border-left: 0.2em solid #999999;
	margin-bottom: 0.2em;
	padding-left:5px; 
	font-size: 110%;
}

.box_right_kontakt {
  margin-top: 15px;
}

.vse_werkzeug_list_item {
  padding:3px 0px 3px 0px;
}

.box_right_content, .box_right_liste, .box_right address
{
  padding-left: 10px;
}

@media screen and (max-width: 980px) {
.vse_werkzeug_list_item {
  float: left;
  width: 10em;
  height: 20px;
}

}

/************* Extraspalte ****************/

#sidebarExtra {
	float: left;
	margin-top: 1.3em; /*wie #container */
	padding-left: 1em;
} 

@media screen and (max-width: 1280px) {
#sidebarExtra {
  clear:both;
  float: none;
} 

.beteiligungslogo {
  float: left;
  margin-right: 4.5em;
}

#footer_side {
  margin: 0px auto;
  text-align:center;
  width:40em;
}
}

@media screen and (max-width: 805px) {
#sidebarExtra {
  display: none;
} 
}

/************* Fusszeile ****************/

.beteiligungslogo {
	margin-bottom: 3em; 
}

.beteiligungslogo img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#footer {
	background:url(../Bilder/footer.png) center center no-repeat;	
	padding-top:30px;
	height:50px;
	font-size:0.7em;
	text-align:center;
	clear:both;
} 

#footer_bottom { 
	padding-top:30px;
}

@media screen and (max-width: 805px) {
.row {
  clear: both;
  width: 100%;
}
}


/*toDo*/
.grid {
  min-width: 400px;
}


/*Veranstaltugen desitination one matzmorr10.01.2023*/
#et4pages_iframe {
    overflow: visible;
    width: 856px;
}

@media screen and (max-width: 980px) {
#et4pages_iframe {
   width: 100%;
}
}