/* ###### Navi ############# */

#navi, #hamburger {
	width: 100%;
}

#hamburger {
	display:none;
}


dfn, .ios_vo_only, .hide, #suchform label, .edih {
	position:absolute;
	left:-9000px;
	top:auto;
	display:inline;
	width:0;
	height:0;
	font-size: 0; /* h2 in der Navi */
}

#navi {
	clear:both;
	display:block; 
	font-size: 1em;
	z-index:10;
}

#navi a:hover, #navi a:focus {outline:none !important;}


.nav-menu {
	display: block; 
	background-color:#9ad5f7;
	position: relative;
	list-style: none;
	z-index: 15;
	font-size: 1em;
	line-height: 2.4em;
}


.nav-menu a {color:#444; text-decoration:none;}

.nav-menu a:hover:before,
.nav-menu a:focus:before {
	content: "▸";
	margin-left: -.8em;
	display:inline-block;
	width: .8em;
	line-height: .7em; /* der IE braucht das u.U. */
}

li.nav-item {
	display: inline-block;
	border-left:1px solid #fff;	
}
li.nav-item:first-child {border-left:1px solid transparent;}


.has_sub {cursor:default;}

.nav-item a, .current, .current.sub-nav {
	position: relative;
	display: inline-block;
}

.nav-item a {padding: 0 4px 0 14px;}
.current {padding: 0 4px 0 14px;min-width:4em;}
.current.sub-nav {padding: 0 4px 0 14px; border:0 none;}

.current:after {
	content: "\00A0✓";
	display:inline-block;
	width: 0;
	line-height: 1.5; /* der IE braucht das, weil er sonst zappelt */
}

.sub-nav {
	position: absolute; /* das fuer mobile weg */
	display: none;
	padding: 1em 1em 1em .3em;
	border: 1px solid #ccc;
	opacity: 0.9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	z-index:10;
}

.sub-nav.open {
    display: block;
	background:#9ad5f7;
}


.sub-nav.open li a {
	display:block;
	border-left:1px solid transparent;
}

.sub-nav ul {
	display: inline-block;
	vertical-align: top;
}

.sub-nav li {
	display: block;
	line-height:1.8em;
}

.has_sub:after { content:'\2630';/*font-size:18px;*/ }

/* ########### End Navi ############# */



/* ########## wdw_suche ############# */

input#suchbegriff {
	width: 12em;
	color:#000 !important;
/* die Lupe */
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAC4jAAAuIwF4pT92AAACMklEQVR4nK2UTUhUURTHf+fO00UuokAliJywWrSIgoLog+bhYjatovITMYgK2pTY5K5aROhMQoELBXc2MtOq6GNl71EEkUGrIEhyaldSQljY+N49LXRAZebpQP/l5f//3XMu5x7xfZ//KVONOdmdqRMRifLIehW6XYPbUc6rJYnIFoTfKK8NzsiL7NUPVQHdrvRJVRnF6laEAqqfQBoR9gIBSqohjI/l82fCUsapBEu0Dx3AkMXyTWJcqC/Gn5eCbvvgQRUZBu5/rynMAQ9LuYg3DG6jWlRjO73xa09WVuFNpN4RSBsiMyh3kt2ZukhgS0+6GSPHwOReZlNT5Tx+vm9G1N4Ddvwt6tFIYFgMm1BqRa2nilbqwTryFggkpnsigRJzLKiqSE0lGIAJ1CCsGqPybxgEBUQWQd0oIIbDKA5GpiOB3kR/AeUNyNlE+8CRcp6WnnSzWukFZuY/Tk+WzsuOjduZ3o/ILlQ3gzxItA5cF1145uVvzB+6OFpTN/fzOI6Tweg2rLZOTY0sVgSe6MjsU8iD7gRAJE5MxpVNnxMdg18RacSJ7Qb7h8Bebjjd/HRl3lkLE7WPEIkvH80iegnVOGqSCPWo/kLlrlA75ueufFFWT4GzCoY+RqQJAGUWq61+LuUtW4bWdlNungyA695yBDsMLMGEH2LCjhWwDcsA+P7NEGRh6VqdlSBs87P9k5HJCnKWGKpi9JyG5hTEXnm53vda8X9Ea919WK2q2tgb0T9pEOUHhBgZxwAAAABJRU5ErkJggg==') 4% 50% no-repeat;
	background-color: #eee;
	color:#fff;
	border:1px solid #aaa; 
	border-radius: 2em; 
	padding: 4px 5px 4px 35px; 
	font-size: 1em;
}

#suchform {
	position: absolute;
	right: 0;
	margin-top: 15px;
}


input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder{opacity:.3}
input:focus::-moz-placeholder{opacity:.3}
input:focus:-ms-input-placeholder{opacity:.3}
input:focus::input-placeholder{opacity:.3} 
input:hover::input-placeholder{opacity:.3}

#search input[type=submit] {display:none;}



input#suchbegriff:hover, input#suchbegriff:focus {
	background-color:#fff; color:#222 !important;
}


em {
	font-weight: bold;
	font-style: normal;
}


/* Zeilenumbrueche einfuegen: */
/* .treffer:before,  vor der Trefferanzahl */
.mod:before, /* vor der URL */
.mod1:before { /* vor dem Aenderungsdatum */
	content: ".";
	display:block;
	visibility:hidden;
	height: 0;
}
	
#searchfooter {
	font-size: .8em;
	margin-top: 1em;
}

#suchtipheader {display:inline-block;}

#klapp0 {
	text-decoration: none;
	color: #888;
	font-size: .8em;
	font-weight:normal !important;
	outline:none 0;
}

#suchtipps a:focus, #suchtipps a:hover, #suchtipps a:active {text-decoration: underline;}


#output a {text-decoration:none;}

#output ol, #output ul {margin-top: 2em;}

#output li {margin: 1em 2.5em  ; clear:left;}

#output li span {font-size: .7rem;}

#output li img{ width: 240px; height: 135px;}

#output .klappen li {display:block;}

.weiter, #searchfooter, #output h3 {display:block; clear:left}
.weiter  {padding-top:1.5em;}

#suchtipps, #kl0 {font-size: .9em; color: #aaa;}

#suchbegriff {position:relative; bottom:3.35em; right: .7em; z-index:15; margin-top:0;}

#wait {position:relative; bottom:3.1em; right: .7em; z-index:30;}

#output  li {display:inline;}


@media only screen and (max-width: 1024px) {
	#suchform {
		right: 10px;
		margin-top: 48px;
	}
}

@media only screen and (max-width: 680px) {
	#suchform {
		left:15px;
		margin-top:60px;
	}
	
	input[type='text'],
	input[type='number'],
	textarea {
	  font-size: 16px !important;
	}
	
	#search input[type=submit] {
		display:block;
		position: relative;
		top: -82px;
		left: 11.5em;
		font-size:16px;
	}
	input#suchbegriff {width: 9em;}
	
}

/* ############### Ende Suche ################ */



/* ############## RWD Navi ################### */


@media only screen and (min-width: 680px) {
	#navi{	position:-webkit-sticky; position:sticky; top: 0px; }
	.nav-menu {
		padding-right:2em; /* damit Navi rechtzeitig umbricht und Submenü sichtbar bleibt */
	}
}

@media only screen and (max-width: 1024px) {
	#suchbegriff {z-index:2;}
}	

@media only screen and (max-width: 768px) and (min-width: 681px) {
	.nav-item a, .current {padding: 0 0 0 2px;min-width:3em;}
	.nav-menu a:hover:before, .nav-menu a:focus:before {content: "";}
}	

	
@media only screen and (max-width: 680px) {
	
	/* ######### Korrekturen Kopfbereich Konsumentenverband, damit Navi responsive und sticky ########### */
	#Kopfbereich {float:none;padding:0;}
	#Kopfbereich p {margin:0; padding:1em 0;}
	#Kopfbereich p img {margin-bottom:-1em;}
	html {padding-right:2px;} /*gegen das Geister-horizontal-Scrollen horizontal*/
	img {max-width:99%;}
	
	
	#klapp_hide, #klapp_show dfn, #klapp_hide dfn {display:none;}
	#klapp_show {display:block;}
	#hamburger {display:block; text-align:right; width:100%;background:transparent; }
	#hamburger img {margin: .4em; opacity:.5;}
    #hamburger span {font-size: .55em; margin-top: -35px; margin-right: 9px; display:block;}
	
	#navi {display:none;font-size: .9em; /*background:#666;*/ margin-bottom:1em;}
	.nav-menu {border-bottom:0 none; border-top:1px solid #888; background:#9ad5f7;}
	.nav-menu a {border-left:0;}

    li.nav-item {
		display: block; width: 99.5%;
		border-bottom: 1px solid #888;
		background:#9ad5f7;
	}
	
	.nav-item a, noscript li, .current, .current.sub-nav {
		font-size:1.5em;
	}
	

	.sub-nav {
		position: static;
		opacity: 1; /* Deckkraft  */
		border-bottom:0 none;
		background:#fff;
		padding: 1em;	
    }
	
	.current {background:#9ad5f7;}
	
	
    .sub-nav li  {
		font-size: 1em;
		width: 100%;
		line-height: 2.5em !important;
	}
	.sub-nav-group, .sub-nav-group li, .sub-nav-group li a {
		display: block !important;
		width: 97%; /* damit die ganze Breite tapbar ist */

    }

	.nav-item  {
		width: 94%;
	}
	
	.nav-item > a{
		padding: .5em 0 .5em 1em;
	}
	.sub-nav.open li a {
		padding: 0 20px 0 15px;
	}

	.nav-menu {padding-left:0;}
	.nav-menu a {display:block;}


	.nav-menu a:hover:before,
	.nav-menu a:focus:before {
	    display:none; /* braucht iOS, damit es sofort den Link auslöst*/
	}
	
	.current {padding: 4px 4px 4px 10px;}
    
	.current:before {content:"";line-height: .7em; margin-left:.3em;}	    
	.current:after {content: "\00A0✓";}
	#navi .hinweis {
		color:white;
		background-color: #666;
		padding: .1em 1em 1em;
	}
	
	
	.has_sub:after { content:'\2630';font-size:14px; }
	

}