/* ############################## alle Breiten ################################################# */

* {
	box-sizing:border-box;
}

nav {
	z-index:500;
	/*display: flex; 
	align-items: center;
	justify-content: center; 
	padding: 0;*/
}


#navi ul {
	margin-left:0;
	list-style-type: none;
	display:block;
}

#navi, #hamburger {
	width: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	
}

#hamburger {
	display:none;
}

#add{
	display:none;
}
#hamburger button {
	border: 0;
	padding: 0;
	margin-right: 0;
	margin-left: auto;
	background:transparent;
	/*background-color: var(--ddsbackred);*/
}

#hamburger .lang{
	padding-top:20px;
	
	color:var(--ddsrot);
	font-weight:800;
	
}

#news{
	display:none;
}
#navi {
	/*font-size: .8rem;*/
	font-family:  Verdana, sans-serif;
	/*letter-spacing: .5px;*/
	line-height:1em;
	font-weight: 620; 
	/*position:-webkit-sticky; position:sticky; top: -1px;*/
	z-index:10;
	-webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto;
	border-top:2px solid rgba(172,1,9, 0.9);
}

.headermenue{
	margin-top:2.6em;
	 margin-left:-3px;
	 line-height:0.1em;
}
.nav-menu {
	font-size: 1.5em;
	margin-bottom:1em;
}

.nav-menu a {
	color: var(--ddstextrot);
	text-decoration:none;
}

.nav-menu a:hover, .nav-menu a:active{ 
	background-color: rgba(172,1,9, 0.9); 
  }

.nav-menu a:active{ 
	color: rgba(255, 255, 255, 0.9); 
	
}

.nav-menu-active{ 
	color: rgba(255, 255, 255, 0.9); 
	background-color: rgba(172,1,9, 0.9); 
	padding-bottom:0.5em;
}


.nav-item-open  { 
	
	color:#fff;
	border-radius: 0 0.5em 0 0;
}

.nav-item-open:hover {
	color: var(--ddstextrot);
	

} 


.nohover {
	/*pointer-events:none;*/
	color: rgba(225, 225, 225, 0.9); 
}
  
/*
.nav-menu a:hover:before,
.nav-menu a:focus:before {
	content: "\25B7";
	display:inline-block;
	line-height:0; /*braucht der IE
	width: 0;
	position:relative; left: -15px;
}


.nav-menu a.open:before {
	transform:rotate(90deg);
	position:relative; left: -10px; top:-6px;
}

.nav-menu a.open.has_sub span {
 	/*display:none;  ist sehr unruhig 
}*/

.sub-nav-group li{
	border-bottom: 1px solid rgb(124, 124, 124);
	
}

.nav-item li span, .nav-item li a {padding: 2px 2px 2px 19px} /* 2px rechts wg. outline */

.sub-nav-group li:hover, .sub-nav-group li a:hover, .nav-item li a:focus {
	/*outline: 2px dotted;*/	
	background-color:rgba(161, 66, 79, 0.9); /* Edge und IE11 mögen kein default = inherit */
	
	color:#fff;
}


.has_sub {
	cursor:pointer;
	
	
}

.nav-item a, noscript li, .current, .current.sub-nav {
/*	position: relative;*/  /*https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela*/
	display: inline-block;
	/*padding: 10px 12px 10px 22px;*/
	padding: 0.4em 1.1em 0.5em 1.1em;	padding:8px;
}

.current { 
	background: transparent !important;
	position:relative !important;
}

.current:not(.img):before {
	content: "✔︎";
	display:inline-block;
	width: 0;
	position:relative; left: -15px;
	
}

.nav-item .current img {opacity:.5;}


.sub-nav {
	display: none;
}

.sub-nav-group li p {
	max-width: 25em;
}

.sub-nav-group::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
	height:6px;
}
.sub-nav-group::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(255, 255, 255, .7);
}
.sub-nav-group::-webkit-scrollbar-corner {
	background-color: transparent;
}


.sub-nav.open {
	display: block;
}


/* list of items within sub-navigation panel */
.sub-nav ul {
	display: inline-block;
/*	vertical-align: top;*/
}


.sub-nav-group .gliederung {
	margin: 0;
	font-family:Verdana, sans-serif;
	font-size:1em;
	font-weight:bold;
	
}

.gliederung:focus {outline:1px dotted #ddd;}

a.has_sub span {
	font-size:1.4em; 
	vertical-align:top; /* Die Position der Hamburger-Buttons */
	padding-right:2px;	
}


.ios_vo_only {
	position: absolute;
	top: auto;
	left: -9999px;
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
} 	

/**** Alle Menuepunkte die bei großen Auflösungen anders gelöst werden als bei smartphone */




/* ############################################################################################# */
/* Achtung! Wenn dieser breakpoint geändert wird, auch in onload.js bzw. onload_min.js als window:innerWidth ändern */
 
@media only screen and (min-width: 1024px) {
	/*#navi {
		display:flex; 	
	}*/
	
	/* lange Hauptmenü-Items kürzen: */
	.nav-menu li  a, .nav-menu li .current{
		-webkit-hyphens:none;-ms-hyphens:none; hyphens:none; /* Hyphenation macht die automatische Ermittlung der Breite der Menüitems kaputt */
			
		/* ########### (Viewport-Breite - Summe Breite alle Hauptnavi-Items mit fixer bzw. min Breite) / Anz. Naviitems mit flexibler Breite ######## */
		/* Der Wert lässt sich am besten mit den Developer Tools von Chrome oder Firefox durch Probieren ermitteln */		
		max-width: calc((100vw - 410px) / 2); 	
		 
	}
	
		

	.nav-menu {
		/*background:#6c6d6c;  Die Hintergrundfarbe des Hauptmenüs 
		border-top:solid 1px #fff;
		border-right:solid 1px #fff;
		border-bottom:solid 1px #fff;*/
		color:#fff;
		font-size:smaller;
		
	}
	
	
	.nav-menu a, .current, .sub-nav-group .gliederung, .sub-nav-group p  {
		color:rgba(172,1,9, 0.9); /* Schriftfarbe für Navi */
		color:rgb(50, 50, 50); 
		color: var(--ddstextrot);
	} 

	li.nav-item {
		display: table-cell;
	/*	border-left: 1px solid #fff;*/
		vertical-align: top;
		
	}
	
	
	.sub-nav-group li a {
		max-width: 100%;
	}
		
		
	#home_hell {
		min-width:3.5em;
	}
	
	
	.sub-nav {
		position: absolute;
		background:rgba(172,1,9, 0.95); /* Die Hintergrundfarbe der Dropdown */	
		/*opacity: 0.95;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";*/
		z-index:525;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
	/*	border:1px solid #fff;
		margin-left:-1px;*/
	}
	
		
	.sub-nav-group p {
	    padding: 0;
		margin-top: 0;
		font-size: .8rem;
	}
	

	.sub-nav li li {
		line-height: 1.4em;
		padding: 0 3px;
	}

	.nav-menu li li a, .nav-menu li li .current{
		white-space: normal;
		color:#fff;
	}


	/* Dropdown max Höhe, Scrollbar immer zeigen */
	/* Der FF/macOS zeigt zumindest beim Aufklappen kurz die Scrollbars*/
	ul .sub-nav-group {
		overflow: auto;
		padding: 1em;
	}

	.sub-nav-group li {padding:.2em 1em .2em 0;}

	#home_grey {display:none;} /* Home-Icon dunkel (mobil) verbergen */
	

		
}



/* ############ unterhalb einer Browserfenster-Mindestbreite Menü einzeilig ################### */
/*
@media only screen and (max-width: 860px) and (min-width:641px) { 
	
 

	li.nav-item img {vertical-align:bottom;}
	
	.sub-nav-group {
		max-height:70vh;
		max-width:23em;	/* erzwingt einspaltige Anzeige der Dropdowns abhängig von Viewport-Breite */
/*	}
	
	
	/* lange Menüitems kürzen, um Navi nur einzeilig zu zeigen: */	
/*	a.has_sub:hover, a.has_sub:focus {
		display:block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:normal; 
	}
	a.has_sub {
		display:block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
		
	.nav-menu li li a, .nav-menu li li .current{
		display:block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
	}

	.nav-item a, noscript li, .current, .current.sub-nav {
		padding: 10px 3px 10px 19px;
	}
	
	.nav-item a span:first-of-type {display:none;}
	

}	*/



/* ############################################################################################# */
/*@media only screen and (min-width: 861px)  { */
	/*#navi {		
		display:flex;	
	}
	 für bestimmte Submenü - hier nur Nr. 2 und 4 - Spaltenanzeige aktivieren - .sub-nav-group würde das global machen */
	/*	Edge und IE11 erzeugen hier u.U. horizontale Scrollbars. na und? sollen sie das eben */
/*	#sub-nav2 ul, #sub-nav4 ul  {
		max-width:45em;
		column-count: 3;
		column-width: 12em;
		column-gap: 0;*/
/*	}

	#sub-nav2 ul ul, #sub-nav4 ul ul {
		display:block; /* IE und Edge braucht das! */
/*	}
	
	#sub2 a, #sub4 a {
		-webkit-hyphens:none; -ms-hyphens:none; hyphens:none;
	}
	
	.sub-nav-group li {
		-webkit-column-break-inside: avoid;
		          page-break-inside: avoid;
		               break-inside: avoid;
	}
		
} */


	
/* ################################ kleine Monitore - Smartphones ############################## */

@media only screen and (max-width:1024px) {
	
	navigation{
        height: 0vh;
    }

	header {
		padding:1px;
	}			
	#navi {
		position:relative;
	}
	.langua{
		position:absolute;
		width:40px;
		height:40px;
		top:3px;
		left:1px;
		padding:5px;
		text-align:left;
	}
	.langua a{
		width:40px;
		height:40px;
	}	
	
	#klapp_hide {display:none;}
	#klapp_show {display:block;}

	#hamburger {
		width:70px;
		height:60px;
		position:fixed;
		top: 1px;right:3px;
		background: transparent;
		display:block; 
		z-index:11;
	}

	#add{
		display:block;
	}

	.headermenue{
		margin:0;
		padding:0;		
	}

/*	#hamburger img {opacity:.5;}*/

	#navi {
		display:none;
	}
	
	#news{
		display:inline-block;
		width:100%;
	}
	.sub-nav-group {
		max-height: 49vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.nav-menu {
		border-bottom:0 none; 
		background:#d3d6d8;
		background-color: var(--ddsbackred);
		box-shadow: 0px 12px 16px 0px rgba(0,0,0,0.44), 0px 17px 50px 0px rgba(0,0,0,0.19);
		padding-left:0;
		min-width:18em;
		color:rgba(172,1,9, 0.95);
		font-size:1em;
	}
	
	.nav-menu a {
		border-left:0;
		display:block;
		min-height:35px;
		margin-right:35px;
	}
	
	.nav-menu a:hover {		
		color:#fff;
	}
	
	li.nav-item {
		border-bottom: 1px solid #888;
		padding-right:25px;
	}
	
	li.nav-item:last-of-type {
		border-bottom: 1px solid #999 ;
	}

	.sub-nav {
		position: static;
		opacity: 1;
		border-bottom:0 none;
	}
	
	.current.sub-nav {
		background:#d3d6d8;
	}
	
	
	.sub-nav li  {
		font-size: 1em;
		width: 100%;
		margin-right:45px;
	}
	
	.sub-nav-group ul:last-of-type {
		margin-bottom: 1em;
	}
	
	.sub-nav li li {
		padding-left:0.2em;
	}
	
	.sub-nav-group, .sub-nav-group li, .sub-nav-group li a {
		display: block !important;
		line-height:1em;
	}

    
	[id^='sub-nav']{
	/*	background:#e8e8e8 !important; /*Subnav*/
		background:rgba(172,1,9, 0.95) !important; 
	}
	

	.sub-nav-group {
		padding: 10px 0 2px 20px;
		max-width:100%;
	}
	
	.sub-nav-group::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, .5);
	}
	
	.sub-nav-group .gliederung {
		width:100%;
	}	
	
	.sub-nav-group p {
		margin-top:0;
	    padding: 0 1em 0 0;
	}
	
	.sub-nav-left {border-right: none }
	.current:before {content:"";line-height: .7em; }	    

	li.nav-item img {vertical-align:middle;}

	
	
	#home_hell {display:none;} /* Home-Icon hell (Desktop) verbergen */	
	

}

/* ############################# Querformat mobil nicht sticky ################################# */

@media only screen and (max-device-width: 640px) and (orientation:landscape) {

	#navi {
		/*position:-webkit-static;*/
		position:static;
		
	}
	#hamburger {
		position:absolute;
		width:38px;
		height:38px;
		margin-top:0;
		padding:0;
		
	}

	#hamburger button {
		width:38px;
		height:38px;
	}
	.sub-nav-group {
		max-height: 30vh;
	}

	.headermenue{
		margin:0;
		padding:0;		
	}
	

}