@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-bold-webfont.woff2') format('woff2'),
         url('../font/opensans-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-bolditalic-webfont.woff2') format('woff2'),
         url('../font/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-italic-webfont.woff2') format('woff2'),
         url('../font/opensans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-regular-webfont.woff2') format('woff2'),
         url('../font/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');*/


/* ------------------------------------- general / allgemein ----------------------------- */

html {
	overflow-y:scroll; hyphens: auto;
}

body {
	background: none repeat scroll 0 0 #ffffff;
	font-size: 16px;
	font-family: Verdana, "Open Sans", Arial, sans-serif;
	color: #444;
}
.wunderblock h3 {xxbackground:#850000; xxcolor:#fff; border: xx1px solid #999; xxpadding:10px; }

    text-align: center;

h1, h2, h3, h4, h5, h6 {
	color: #314B68;
	font-weight: normal;
	line-height: 1.3;
	margin: 0.5rem 0;
}

h1 { font-size: 32px; padding:10px; font-family: Arial; font-weight:normal; background:#850000; margin-bottom:10px;}
h2 { font-size: 25px; xxbackground:#333; xxcolor:#fff; padding:20px; font-weight:normal;}
h3 { font-size: 25px; }
h4 { font-size: 23px; color:#FBF0BE; font-family: Arial; xxborder: 1px solid #999; padding:10px; xxbackground:#333333;}
h5 { font-size: 18px; color:#fff; font-weight:normal; margin-top: 20px;}
h6 { font-size: 0.9rem; color:#fff; }

.wub_hl_top .wub_headline, .wub_hl_bottom .wub_headline {font-family: Arial; background:#850000; color:#fff; padding:10px; text-align:left; font-size:25px;}
.wub_hl_top .wub_headline {xxtext-align:left;}

#footer-breit p {padding-left:20px;}


.mmz_merkzettel_item {background:#174076 url(../modules/znip_merkzettel/img/euro.jpg) no-repeat; color:#fff; padding-left:10px;}
.mmz_merkzettel_item.mmz_selected {color:#fff; background:#fff url(../modules/znip_merkzettel/img/merkzettel-delete.png)no-repeat; border:1px solid #999;}
.mmz_merkzettel_item.mmz_selected:hover {color:#174076; background:#fff url(../modules/znip_merkzettel/img/merkzettel-delete.png)no-repeat; border:1px solid #999;}
.mmz_merkzettel_item:hover, .mmz_merkzettel_item:hover {background:#174076 url(../modules/znip_merkzettel/img/euro.jpg) no-repeat; color:#fff; padding-left:10px;}



a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: #617D9B;
	transition: color 0.20s linear 0s;
	-o-transition: color 0.20s linear 0s;
	-ms-transition: color 0.20s linear 0s;
	-moz-transition: color 0.20s linear 0s;
	-webkit-transition: color 0.20s linear 0s;
}

a:hover {
	color: #90AAC0;
}

/* some space for anchor links to avoid being hidden by the stick nav
Padding für Sprungmarken, damit diese nicht von der sticky-Navigation überlagert werden
http://darktef.github.io/posts/2017-03-offset-html-anchors-for-fixed-header-with-css */


:target {
  display: block;
  position: relative;
  top: -120px; 
  visibility: hidden;
}

p, li, dl, blockquote, table, kbd {
	font-size: 1rem;
	line-height: 1.6;
}

hr {
	border: 0;
	border-top: 1px solid #e5e5e5;
	clear: both;
	height: 0;
	margin: 0.5rem auto;
}

/* ------------------------------------------- top nav styles-------------------------------------------*/

nav {	xxbackground: #314B68; }

.top-nav ul ul { background-color: #314B68; width:350px;}
.top-nav li a { padding:0.5rem 1rem; color: #fff; }
.top-nav li ul li a { xxbackground-color:  #314B68; }
.top-nav li a:hover, .aside-nav li a:hover { xxbackground-color: #90AAC0; }
.top-nav .active-item a { xxbackground: #546F8D; }




.wub_hl_top .wub_headline, .wub_hl_bottom .wub_headline, .wub_text_top .wub_text {xxfont-size:40px; xxtext-align:left;}
.mobile-version {display:none;}
#header-mobil {display:none;}
#navileiste {display:none;}
#navileiste-katergorie {display:none;}
#navileiste-katergorie table tr td, table tr th {display:none;}
/*#mobile-version {display:block;}
#header-desktop: {display:block;}*/

@media screen and (max-width:800px) {
	.top-nav li a {	background: none repeat scroll 0 0 #1c3849;	}
	.top-nav li a { color: #fff;}
	.top-nav li a:hover { background: none repeat scroll 0 0 #314B68; color: #fff; 	}
	.top-nav li ul li a { background: none repeat scroll 0 0 #2b4c61;	}
	.top-nav li ul li ul li a { background: none repeat scroll 0 0 #456274;	}
	.nav-text { color: #fff; }
	

table tr td, table tr th {background: #000;}

.mobile-version {display:block;}
.desktop-version {display:none;}

h2 {text-align:center; font-size: 22px;}
h5 { font-size: 18px; color:#fff; font-weight:normal; text-align:center;}
h6 { font-size: 0.9rem; color:#fff; text-align:center; }

#navileiste-kategorie {
	display: block;
	xxmax-height: 30px;
	width: 100%;
	border: 0px;	
	height: auto;
	border-top: 0px solid #666666;
	margin-top: 0px;
	background: #000;
	padding:5px 10px 5px 0;
}
	
#navileiste-kategorie td, table{	
	border-top: 0px solid #999999;
	border-bottom: 0px;
}

#navileiste-kategorie td, table img{	
	max-width: 100%;
	padding: 5px;
	margin-left: 10px;
	
	
	}
#navileiste {display:none;}



#header-mobil {
	display: block;	
	border: 0px;
	background: #fff;
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
	height: auto;
	border-top: 0px solid #666666;	
	margin-bottom: -5px;
	
	} 
#header-mobil img {
	max-width: 100%;

	}
	
#header-mobil td, table{	
	border-top: 0px solid #999999;
	border-bottom: 0px;
	}	
}

/* ------------------------------------------- aside nav styles-------------------------------------------*/


.aside-nav-noresponsee ul {
	margin:0;
	padding:0;	
}

.aside-nav-noresponsee li {
	list-style-type:none;	
}

.aside-nav-noresponsee li a:link,
.aside-nav-noresponsee li a:visited {
	display:block;
	padding:0.3rem 0.5rem;
	background-color:#eee;
	color:#314B68;
}

.aside-nav-noresponsee li ul li a:link {
	padding-left:2.5rem;
}

.aside-nav-noresponsee li a:hover,
.aside-nav-noresponsee li ul li.menu-current a {
	background-color:#ddd;
	color:#5588a3;
}


/* -------------------------------------------- parts / Bereiche ---------------------------------- */


.headerpic img {
	display:block;
}
.header {display:none;}

header .line,
section .line, footer .line {
	background-color:#fff;
	padding:0 !important;
}

.logo {
	padding:2rem;
	display:none;
}



.wbcesuche {
	padding:0.5rem 1.5rem;
}

.wbcesuche input[type=text] {
	background-color:transparent;
	border:0;
	border-bottom:1px solid #fff;
	color:#fff;
	display:none;
	
}

.wbcesuche input[type=submit] {
	font-family:sli;
	border:0;
	background-color:transparent;
	color:#fff;
	display:none;
	
}

::placeholder {color:#fff;}
:-ms-input-placeholder {color:#fff;}
::-ms-input-placeholder  {color:#fff;}

h1#contentstart {
	margin-top:-0.5rem;
}

.maincontent p, .maincontent li {
	padding-bottom:2px;
}

.maincontent li ul, .maincontent li ol {
	padding-top:0.5em;
}


.back-to-top {
	position:fixed;
	bottom:20px;
	right:20px;	
}

a.back-to-top, footer a:link, footer a:visited {
	border:0;
	padding:0 1em;
}

@media screen and (max-width:800px) {
	.wbcesuche {
		text-align:center;
	}
	.top-nav ul ul { background-color: green; width:350px; xxpadding-left:30px;}
}


/* --------------------------- pics ------------------------------------ */
img.picfull {width:100%; height:auto;}

@media screen and (min-width:640px) {
img.pic2left, img.pic3left, img.pic4left { margin: 0 1em 1em 0; height:auto; }

img.pic2right, img.pic3right,  img.pic4right { margin: 0 0 1em 1em; height:auto; }

img.pic2left {float:left; max-width:49%;}
img.pic2right {float:right; max-width:49%; }

img.pic3left {float:left; max-width:32%;}
img.pic3right {float:right; max-width:32%;}

img.pic4left {float:left; max-width:24%;}
img.pic4right {float:right; max-width:24%; }
}

@media screen and (max-width:640px) {
	img.pic2left, img.pic3left, img.pic4left,
	img.pic2right, img.pic3right,  img.pic4right { margin: 1em 0; width:100%; float:none; height:auto; }
}