/* ~~~~~~~~~~~~~~~~~~~~~~~~~ dropdown-menü ~~~~~~ */
.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown span {text-decoration:none; color:#5f6368; font-size:16px; margin:0 10px 0 10px;}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff4f2;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 3px 4px;
  z-index: 1;
  text-align:left;

}

.dropdown-content a:last-child{  border-bottom: 0px solid #ccc;}
.dropdown-content a {text-decoration:none; display:block; font-size:18px; color:#c73d38; white-space: nowrap; hyphens:no;   border-bottom: 1px solid #eee;  text-shadow: 2px 2px 10px #999; line-height:1.1; transition:all 2s; padding:2px;}
.dropdown-content a:hover {text-decoration:none; color:#fff;  background:#c73d38; text-shadow: 1px 1px 1px #000; line-height:1.1; transition:all 0.8s;}
.dropdown-content a.sel { color:#fff; background:#c73d38;  text-shadow: 1px 1px 1px #000; }
.dropdown-content a.unter {margin-left:16px; font-size:16px;}



.dropdown:hover .dropdown-content {
  display: block; transition: all 0.5s; height:auto;
}


.headerlinks { display:flex; align-items:flex-end; margin-top:10px; width:100%;}
.headerlinks a {text-decoration:none; color:#5f6368; font-size:18px; margin:0 10px 0 10px; }
.headerlinks a:hover {color:#c73d38; transition:all 1s;}


@media (width < 900px )  {
.headerlinks {
position:fixed; right:-100vw;
flex-direction:column;
align-items:center;

}
.headerlinks a {text-decoration:none; color:#5f6368; font-size:16px; margin:0 10px 0 10px; font-size:30px;}
.headerlinks a:hover {color:#c73d38; transition:all 1s;}



	
}




/* ~~~~~~~~~ Hamburger ~~~~~~~~~~~~~~~ */
@media (width >= 800px) {
#hamburger {display:none;}
}

@media (width < 800px )  {

		
			
#hamburger {
  --s: 30px; /* control the size */
  --c: #ED1C24; /* the color */
  z-index:101;
  width:30px; height:30px;
  height: var(--s);
  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% 80%,
    40% 100%;
  position: relative;
  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 + .headerlinks {
  position:fixed; transition: all 2s;  left:0px; background:#aabbcc; top:90px;
}


#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;
}


	

}