/* CSS-Variablen für Transition-Dauer und Easing */
:root {
	--menu-transition-duration: 0.5s;
	--menu-transition-easing: ease;
}

/* Zentralisierte Sticky-Menü-Regel */
.navo {
	--accent: #1f497d;
	position: sticky !important;
	top: 0;
	z-index: 1000 !important;
	/* Workaround: explizit sticky, auch wenn Flex-Container folgen */
}

body.nav-open .navo {
	position: static !important;
	z-index: auto !important;
}
.right {
	display: flex;
	align-items: center;
}
.brand {
	display: inline-block;
	font-size: 1.2em;
	margin-right: 0.2em;
	vertical-align: middle;
	line-height: 1;
}
.left {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.hamburger-icon svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	transition: opacity var(--menu-transition-duration) var(--menu-transition-easing), transform var(--menu-transition-duration) var(--menu-transition-easing);
	will-change: opacity, transform;
}
.hamburger-icon {
	position: relative;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.hamburger-icon .icon-hamburger {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}
.hamburger-icon .icon-close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
}
.navham.active .hamburger-icon .icon-hamburger {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
}
.navham.active .hamburger-icon .icon-close {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}
.logo-img {
	height: 1.7em;
	width: auto;
	display: inline-block;
}
/* Gruppierte Link-Regeln für Menü */
.navo#menuo a,
.navo#menuo a:visited,
.navo#menuo a:hover,
.navo#menuo a:focus {
	color: #fff;
	text-decoration: none;
	background: none;
}
@media (min-width: 900px) {
	/* ...existing code... */
}
	body.nav-open .navo {
		position: static;
	}
@media (max-width: 899.98px) {
	#menuToggle {
		position: static;
		z-index: 1001;
	}
	body.nav-open #menuo-list {
		display: block;
	}
	.navo {
		width: 100vw;
	}
	.navo ul {
		width: 100%;
		display: block;
	}
	.navo li {
		width: 100%;
	}
	.navo a {
		width: 100%;
		box-sizing: border-box;
		padding: 0.8em 1em;
	}
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.navo ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.5em;
	font-weight: 300;
}
.navo li span {
	display: block;
}
.navo a {
	display: block;
	color: rgba(249, 249, 249, .9);
	text-decoration: none;
	transition: color var(--menu-transition-duration) var(--menu-transition-easing), background var(--menu-transition-duration) var(--menu-transition-easing), height var(--menu-transition-duration) var(--menu-transition-easing);
}
.navo .menu-icon-symbol{
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.navo .menu-icon-svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
a, button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.no-touch .navo ul:hover a {
	color: rgba(249, 249, 249, .5);
}
.no-touch .navo ul:hover a:hover {
	color: rgba(249, 249, 249, 0.99);
}
.navo li:nth-child(1) {
  background: linear-gradient(to right, #1f497d, #183a63);
}
.navo li:nth-child(2) {
  background: linear-gradient(to right, #183a63, #142f55);
}
.navo li:nth-child(3) {
  background: linear-gradient(to right, #142f55, #10263f);
}
.navo li:nth-child(4) {
  background: linear-gradient(to right, #10263f, #0c1e32);
}
.navo li:nth-child(5) {
  background: linear-gradient(to right, #0c1e32, #091728);
}
.navo li:nth-child(6) {
  background: linear-gradient(to right, #091728, #060f1c);
}
@media (min-width: 900px) {
  .navo {
    --menu-gradient-width: min(100%, 1200px);
    background: linear-gradient(
      to right,
      #1f497d 0,
      #1f497d calc((100% - var(--menu-gradient-width)) / 2),
      #060f1c calc((100% + var(--menu-gradient-width)) / 2),
      #060f1c 100%
    );
  }

  .navo ul{
    max-width: min(1200px, calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
    height: 5em;
  }
  .navo li {
      float: left;
      width: 16.66666666666667%;
      text-align: center;
      -webkit-transition: border .5s;
      -moz-transition: border .5s;
      -o-transition: border .5s;
      -ms-transition: border .5s;
      transition: border .5s;
  }
	.navo a {
		display: block;
		box-sizing: border-box;
		width: auto;
	}
	.no-touch .navo li:nth-child(6n+1) a:hover,
	.no-touch .navo li:nth-child(6n+1) a:active,
	.no-touch .navo li:nth-child(6n+1) a:focus {
		border-bottom: 4px solid rgb(174, 78, 1);
	}
	.no-touch .navo li:nth-child(6n+2) a:hover,
	.no-touch .navo li:nth-child(6n+2) a:active,
	.no-touch .navo li:nth-child(6n+2) a:focus {
		border-bottom: 4px solid rgb(191, 117, 20);
	}
	.no-touch .navo li:nth-child(6n+3) a:hover,
	.no-touch .navo li:nth-child(6n+3) a:active,
	.no-touch .navo li:nth-child(6n+3) a:focus {
		border-bottom: 4px solid rgb(12, 110, 149);
	}
	.no-touch .navo li:nth-child(6n+4) a:hover,
	.no-touch .navo li:nth-child(6n+4) a:active,
	.no-touch .navo li:nth-child(6n+4) a:focus {
		border-bottom: 4px solid rgb(10, 75, 117);
	}
	.no-touch .navo li:nth-child(6n+5) a:hover,
	.no-touch .navo li:nth-child(6n+5) a:active,
	.no-touch .navo li:nth-child(6n+5) a:focus {
		border-bottom: 4px solid rgb(255, 153, 51);
	}
	.no-touch .navo li:nth-child(6n+6) a:hover,
	.no-touch .navo li:nth-child(6n+6) a:active,
	.no-touch .navo li:nth-child(6n+6) a:focus {
		border-bottom: 4px solid rgb(227, 119, 20);
	}
	.icon {
		padding-top: 0.4em;
      	color:#ffffff;
	}
	.icon + span {
		margin-top: 0.2em;
		transform: translateY(0);
		transition: transform var(--menu-transition-duration) var(--menu-transition-easing);
	}
	.navo a {
		height: 5em;
	}
	.no-touch .navo a:hover ,
	.navo a:active ,
	.navo a:focus {
		height: 5em;
	}	
	.no-touch .navo a:hover .icon + span {
		margin-top: 0.2em;
		transform: translateY(1em);
		-webkit-transition: transform .5s;
		-moz-transition: transform .5s;
		-o-transition: transform .5s;
		-ms-transition: transform .5s;
		transition: transform .5s;
	}
	.navo .menu-icon-symbol {
		position: relative;
		display: inline-block;
		margin: 0 auto;
		padding: 0.4em;
		border-radius: 50%;
		font-size: 1em;
	/*	box-shadow: 0 0 0 30px transparent;     animierter Kreis um Icon*/
		background: rgba(255,255,255,0.1);
		transform: translate3d(0, 0, 0);
		transition: box-shadow 0.6s ease-in-out;
	}
	.no-touch .navo a:hover .menu-icon-symbol,
	.no-touch .navo a:active .menu-icon-symbol,
	.no-touch .navo a:focus .menu-icon-symbol {		
		box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
		-webkit-transition: box-shadow .4s ease-in-out;
		-moz-transition: box-shadow .4s ease-in-out;
		-o-transition: box-shadow .4s ease-in-out;
		-ms-transition: box-shadow .4s ease-in-out;
		transition: box-shadow .4s ease-in-out;
	}
}
@media (min-width: 900px) and (max-width: 980px) {
	.navo ul {
		font-size: 1.2em;
	}
}
@media (max-width: 899.98px) {		
	.no-touch .navo ul li:nth-child(6n+1) a:hover,
	.no-touch .navo ul li:nth-child(6n+1) a:active,
	.no-touch .navo ul li:nth-child(6n+1) a:focus {
		background: rgb(227, 119, 20);
	}
	.no-touch .navo li:nth-child(6n+2) a:hover,
	.no-touch .navo li:nth-child(6n+2) a:active,
	.no-touch .navo li:nth-child(6n+2) a:focus {
		background: rgb(245, 160, 41);
	}
	.no-touch .navo li:nth-child(6n+3) a:hover,
	.no-touch .navo li:nth-child(6n+3) a:active,
	.no-touch .navo li:nth-child(6n+3) a:focus {
		background: rgb(44, 168, 219);
	}
	.no-touch .navo li:nth-child(6n+4) a:hover,
	.no-touch .navo li:nth-child(6n+4) a:active,
	.no-touch .navo li:nth-child(6n+4) a:focus {
		background: rgb(31, 120, 176);
	}
	.no-touch .navo li:nth-child(6n+5) a:hover,
	.no-touch .navo li:nth-child(6n+5) a:active,
	.no-touch .navo li:nth-child(6n+5) a:focus {
		background: rgb(255, 153, 51);
	}
	.no-touch .navo li:nth-child(6n+6) a:hover,
	.no-touch .navo li:nth-child(6n+6) a:active,
	.no-touch .navo li:nth-child(6n+6) a:focus {
		background: rgb(227, 119, 20);
	}
	.navo ul li {
		-webkit-transition: background 0.5s;
		-moz-transition: background 0.5s;
		-o-transition: background 0.5s;
		-ms-transition: background 0.5s;
		transition: background 0.5s;
	}	
}
.navo .navham{
	display: none;
	width: 100%;
	padding: 0.5em 0.5em 0.8em;
	font-weight: normal;
	text-align: center;
	color: #ffffff;
	font-size: 1.2em;
	background: linear-gradient(to right, #1f497d, #060f1c);
	border: none;
	border-bottom: 4px solid #f69200;
	cursor: pointer;
}
.icon-menu {
	position: relative;
  	color: rgba(249, 249, 249, 0.99);
	top: 3px;
	line-height: 0;
	font-size: 1.6em;
}
@media (max-width: 899.98px) {
	.navo .navham{
		margin: 0;
		display: block;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.no-js .navo ul {
		max-height: 30em;
		overflow: hidden;
	}
	.js .navo ul {
		max-height: 0em;
		overflow: hidden;
	}
	.js .navo .active + ul { 
		max-height: 30em;
		overflow: hidden;
		-webkit-transition: max-height .4s;
		-moz-transition: max-height .4s;
		-o-transition: max-height .4s;
		-ms-transition: max-height .4s;
		transition: max-height .4s;
	}
	.navo li span {
		display: inline-block;
		height: 100%;
	}
	.navo a {
		padding: 0.5em;
	}
	.navo li {
		margin: 0;
		padding: 0;
	}
	.icon + span {
		margin-left: 1em;
		font-size: 0.8em;
	}
	.navo li:nth-child(6n+1) {
		border-left: 8px solid rgb(174, 78, 1);
	}
	.navo li:nth-child(6n+2) {
		border-left: 8px solid rgb(191, 117, 20);
	}
	.navo li:nth-child(6n+3) {
		border-left: 8px solid rgb(13, 111, 150);
	}
	.navo li:nth-child(6n+4) {
		border-left: 8px solid rgb(10, 75, 117);
	}
	.navo li:nth-child(6n+5) {
		border-left: 8px solid rgb(255, 153, 51); 
	}
	.navo li:nth-child(6n+6) {
		border-left: 8px solid rgb(227, 119, 20); 
	}
	.touch .navo a {
		padding: 0.8em;
	}
}
.navo#menuo li.active > a,
.navo#menuo li.active > a:visited,
.navo#menuo li.active > a:focus,
.navo#menuo li.active > a:hover {
	color: #ff9800;
}
.navo#menuo a,
.navo#menuo a:visited {
	color: #fff;
}

