

.item a {
	color:#fff;
	text-decoration:none;
		transition: all 1s;
}


.item a:hover {
	color:#fff;
	background: #010101;
	transition: all 1s;
}

.acmenu{

	    box-sizing: border-box;
		    text-decoration: none;
    list-style: none;



    width: 280px;
    height: auto;
	background: #00682d;
	max-height:calc(100vh - 10px);
    border-radius: 8px;
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	    
}


.acmenu li {list-style:none; margin-left:3px;}

.acmenu .btn{
    display:block;
    padding: 6px;
    border-bottom: solid 1px #232323;
    border-top: solid 1px #efefef;
    position: relative;
}


.offen
{
    background: #333333;
    overflow: hidden;
    max-height: auto !important;
    transition: max-height .8s ease-out;
}


.acmenu .submenu {
    background: #333333;
    overflow: hidden;
    max-height: 0;
    transition: max-height .8s ease-out;
}

.acmenu .submenu a, .acmenu .offen a{
    display:block;
    padding: 3px;
    position: relative;
	transition: 1s all;
}

.acmenu .submenu a::before, .acmenu .offen a::before{
    content:'';
    display:block;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 5px;
    background: #ec774b;
    opacity: 0;
    transition: all .8s;

}

.acmenu .submenu  a:hover, .acmenu .offen  a:hover{
    padding-left: calc(3px + 5px);
}

.acmenu .submenu a:hover::before, .acmenu .offen a:hover::before{
    opacity: 1;
}

.item:target .submenu{
    max-height: 20rem;
}






a.aktu::after{
    content: "";
    display:block;
    position: absolute;
    top:0;
    right:0;
    height: 100%;
    width: 6px;
    background: #ec774b;

	
	}
a.aktu {	background: #454545;}













/* ~~~~~~~~~~~~~~~ Hamburger - MenÃ¼ ~~~~~~~ */


@media (width >= 900px) {
	#hamburger, #hamburgerback {display:none;}
	nav {	position:sticky; top:5px;    margin-left:10px;
	margin-top:50px;}
}

@media (width < 900px )  {
nav {  position: fixed; width:calc(100vw - 60px); left:-100vw; top:0px; transition: all 2s; flex-direction:column; display:flex; align-items:stretch; justify-content:center; height:auto; z-index:9999999;}
.acmenu {width:85vw;}


#hamburgerback {
	position:fixed; top:2px; right:2px; width:40px; height:40px; overflow:hidden; z-index:10; background:#464956;border: thin solid white;
}


#hamburger {

	margin:6px -8px 0 0;
  --s: 30px; /* control the size */
  --c: #fff; /* the color */

  z-index:101;
  height: var(--s);
  width:30px;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-inline: calc(var(--s)/2) solid #0000; 
  box-sizing: content-box;
  --_g1: linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0) 
         no-repeat content-box border-box;
  --_g2: radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000) 
         repeat-y content-box border-box;
  background: 
    var(--_g2) left  var(--_p,0px) top,
    var(--_g1) left  calc(var(--s)/10 + var(--_p,0px)) top,
    var(--_g2) right var(--_p,0px) top,
    var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;
  background-size: 
    20% 81%,
    41% 100%;

  clip-path: inset(0 25%);
  -webkit-mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000);
  cursor: pointer;

  transition: 
    background-position .3s var(--_s,.3s), 
    clip-path 0s var(--_s,.6s);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
    
}
#hamburger:before,
#hamburger:after {
  content:"";
  position: absolute;
  border-radius: var(--s);
  inset: 40% 0;
  background: var(--c);
  transition: transform .3s calc(.3s - var(--_s,.3s));

}


#hamburger:checked {

  clip-path: inset(0);
  --_p: calc(-1*var(--s));
  --_s: 0s; 
}








#hamburger:checked + nav {
  transition: all 2s; top:10px; left:5vw; right:5vw;
}


#hamburger:checked:before {
  transform: rotate(45deg);
}
#hamburger:checked:after {
  transform: rotate(-45deg);
}
#hamburger:focus-visible {
  clip-path: none;
  -webkit-mask: none;
  border: none;
  outline: 2px solid var(--c);
  outline-offset: 5px;
 
}




}