/* accessible Navigation for screen reader and keyboard user*/
#accessNav { position: absolute; top: -20em; z-index: 10; width: 100%;}
.AccessNav-item:focus { background: var(--focus); color: var(--black); position: absolute; top: 20em; left: 0; font-weight: 500; text-align: center; padding: calc(-0.5em + 30px) 0; width: 100%; z-index: 10000 !important}

/* hamburger navigation for mobile phones and tablets*/
.hamburger-container { width: max-content; position: absolute; top: 5px; left: 5px; color: var(--bg); transition: transform 0.5s ease }

.hamburger-container .checkbox { opacity: 0; position: absolute }
.hamburger-container .checkbox:focus ~ .hamburger { outline: 2px solid white; outline: auto; outline-offset: 4px }

@supports selector(:focus-visible) {
  .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger { outline: none }
}

.hamburger-container .drawer a { visibility: hidden; transition: visibility 0.5s linear; color: var(--white) }
.hamburger-container .checkbox:checked ~ .drawer a { visibility: visible }
.hamburger-container .checkbox:checked ~ .drawer { transform: translateX(0%) }
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) { transform: translateY(12px) rotate(45deg) }
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) { opacity: 0 }
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(4) { transform: translateY(-12px) rotate(-45deg) }

.hamburger { width: 30px; height: 30px; position: relative; display: block; transition: transform 0.5s ease; z-index: 1; cursor: pointer; padding-top: 5px }

.checkbox ~ .hamburger .slice { display: block; width: 100%; height: 2px; background-color: var(--primary); transition: all 0.5s ease }
.checkbox:checked ~ .hamburger .slice { background-color: var(--bg) }
.hamburger .slice:not(:first-child) { margin-top: 10px }

.drawer { position: fixed; left: 0; top: 0; height: 100%; width: max-content; max-width: 100%; padding: 22px; background: var(--primary); transform: translateX(-100%); transition: transform 0.5s ease }
.drawer .level_1 { padding: 0; list-style: none; margin-top: 3px; margin-left: 20px }
.drawer .level_1 .nav-list-item { padding-bottom: 10px }
.drawer .level_2 { padding: 0; list-style: none; margin-top: 3px; margin-left: 40px }

@media screen and (max-width: 480px) {
  .drawer { width: 100% }
}

@media (min-width: 768px) {
	/* navigation for desktop user */
    .mod_navigation { margin: 70px auto 0 }
	.hamburger-container { position: static; transition: none; margin: 0 auto; width: 920px }
	.hamburger-container .hamburger, .hamburger-container .checkbox { display: none }
	.drawer { position: static; transition: none; transform: none; background: none; width: auto; height: auto }
	.dropdown_title { background-color: transparent; border: none; font-family: inherit }
	.mod_navigation { background-color: var(--primary) }
	.drawer { display: grid; align-items: flex-start; padding: 0 }
	.drawer > ul { grid-auto-flow: column; margin: 0; padding: 0; display: grid }
	.drawer > ul > li { margin: 0 0.5rem; padding: 0 } /* margin problem for mobile?*/
	.hamburger-container .drawer > ul > li a { transition: none; visibility: visible; text-decoration: none; text-align: center; display: inline-block; color: var(--white); padding: 0.5rem; border-top: 3px solid var(--blue) }
	.drawer > ul > li a:hover { background: rgba(0, 0, 0, .5); border-top: 3px solid var(--white); transition: var(--navTransition) }
	.drawer > ul > li a:focus { border-top: 3px solid var(--white); transition: var(--navTransition) }
	.drawer > ul > li a:focus > a:hover,
	.drawer > ul > li a:focus > a:focus { border-top-color: var(--typo); color: var(--primary) }

	.drawer ul { list-style-type: none }

	.drawer .level_1 { padding: 0; list-style: none; margin-top: 3px; margin: 0 }

	.submenu { position: relative }
	.submenu .dropdown_title { display: inline-flex; align-items: center; visibility: hidden }
	.submenu .dropdown_title:after { content: ""; border: 0.35rem solid transparent; border-top-color: var(--white); visibility: visible }

	.submenu .level_2 { position: absolute; min-width: 15ch; left: 0; top: calc(100% - 0.25rem); transition: var(--navTransition); transform: rotateX(-90deg) translateX(-50%); transform-origin: top center; opacity: 0.3; padding: 0.5em 0; background-color: var(--white); box-shadow: 0 0.15em 0.25em rgba(0,0,0, 0.25) }
	.submenu .level_2 a { width: 100%; color: var(--primary) !important; display: block; padding: 0.5em; opacity: 0; border-top: 3px solid var(--bg); transition: var(--navTransition) }
	.submenu .level_2 a:hover { background-color: rgba(var(--primary-rgb), 0.10) }
	.submenu .level_2 a:focus { background-color: rgba(var(--primary-rgb), 0.10) }
	.submenu .level_3 a { width: 100%; color: var(--primary) !important; display: block; padding: 0.2em 0.5em !important; opacity: 0; border-top: 3px solid var(--bg) !important; transition: var(--navTransition) }
	.submenu:after { content: ""; border: 0.5rem solid transparent; border-bottom-color: var(--white); position: absolute; top: calc(100% - 1.25rem); left: 0; transform: translateX(-50%); transition: var(--navTransition); opacity: 0; will-change: opacity }

	.submenu:hover .dropdown_title,
	.submenu:focus-within .dropdown_title { border-top-color: var(--bg) }

	.submenu:hover .level_2,
	.submenu:focus-within .level_2 { opacity: 1; transform: rotateX(0) translateX(-50%); visibility: visible }

	.submenu:hover .level_2 a,
	.submenu:focus-within .level_2 a { opacity: 1 }

	.submenu:hover,
	.submenu:focus-within:after { opacity: 1 }
}