.header {
  width:100%;
  position:fixed;
  padding:0;
  background:#fff;
  height:60px;
  z-index:100;
  overflow-y: visible;
  &:after {
    content: '';
    clear: both;
    display: block;
  }
}

.header__logo {
  position:relative;
  text-decoration: none;
  color: inherit;
}

.header__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  opacity: 0;
}

.header__toggle {
  font-size:1.2em;
  z-index: 300;
  display: block;
  position: fixed;
  top:18px;
  left:1em;
  width: 1.8em;
  height: 1.2em;
  float: left;
  border-style: solid;
  border-color: #000;
  border-width: 2px 0;
  cursor: pointer;
  &:before,
  &:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    width: 100%;
    margin-top: -1px;
    background: #000;

  }
}

.header__menu {background:rgba(255,255,255,0.8);position: fixed;right: 100%;top: 0;height:100%;width: 300px;text-align:left;padding:60px 0 0;margin: 0;font-weight: normal;font-size: 1em;
box-sizing: border-box;transition: all 0.3s ease-in;z-index:200;
  li {list-style: none;}
  a {color: inherit;text-decoration: none;display: inline-block;padding:0;
    &:hover {text-decoration: underline;}
  }
}
.header__menu input[type=checkbox]{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0; display: block;cursor: pointer;}
.header__menu ul { margin: 0;padding: 0;overflow-y:auto;}
/*.header__menu > ul { margin-top: 60px;}*/
.header__menu a { display: block; padding: 0.5em 25px;color: #fff;text-decoration: none;}
.header__menu li { position: relative; float: left; width: 100%; list-style: none; color: #fff;transition: 0.5s;}
.header__menu > ul > li:last-child{}
.header__menu ul li:first-child{border-top: none;}
.header__menu ul > li.sub > a:after{position: relative;float: right;content: '▶';color: #fff;transition: 0.5s;}
.header__menu .submenu{max-height: 0;overflow: hidden;transition: max-height 0.5s ease-in-out;border-top: none;}
.header__menu input[type=checkbox]:checked ~ .submenu{max-height: 1999px;}
.header__menu input[type=checkbox]:checked ~ a:after{transform: rotate(90deg);color:#F93;}/*transform: rotate(90deg);*/
.header__menu .submenu li{}
.header__menu .submenu li a{padding-left: 50px;}
.header__menu .submenu li li a{padding-left: 75px;}
.header__menu .submenu li li li a{padding-left: 100px;}
.header__menu .submenu li.sub{list-style: none;}


.header__checkbox:checked {

  &~.header__toggle {

    border-color: transparent;
    &:before {
      transform: rotate(-45deg);
      transition: all 0.4s ease-out;
    }
    &:after {
      transform: rotate(45deg);
      transition: all 0.4s ease-out;
    }
  }

  &~.header__menu {
    transform: translateX(300px);
    transition: all 0.4s ease-out;
  }
}


html {background: #fff;color: #343A40;scroll-behavior: smooth;}

#login{position:fixed;right:0;bottom:0;width:40px;height:30px}
#login img{height: 100%;width:100%}
/*--------------*/

#flex-container {
   display:flex;
   flex-direction:column;
   min-height:100vh;
   min-height:100svh;
}
#flex-container > footer {
   margin-top:auto;
   min-height:200px;
   padding: 0;
   background:#FDF5E6!important;
   color:#343A40!important;
}
#logo-screen{width:785px;padding-top:6.8px}
.kontaktbutton{position:absolute;top:0;right:0;width:0}
.kontaktbild{position:relative;top:5px;left:-61px;width:48px;padding:3px}
.sozial{width:40px}
.controls{padding:25px 0 0 8px}
#navigation{margin:0;padding:1em 0;overflow-y:auto;height:100%;}
footer{font-size:16px}
footer h2{font-size:1.3em}
footer h3{font-size:1.2em}
footer a{line-height:2.2em;text-decoration:none}
footer a:hover{text-decoration:underline}
main{padding:60px 0 32px;}
figure{margin:0;padding:16px;line-height:1em;overflow: hidden}
figure a{text-decoration:none}
figcaption{display:block;height:30px;}

.external{background-image: url(../img/extern.svg);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 1.5em;
    padding-right: 1.8em;
  }
#externe_links li{padding:0.7em 0}
#firmenvideo{width:100%;height:manual}
#transcript{display:none}
#transcript:target{display:block;padding:150px 0}
@media (min-width:993px){
  #logo-mobile{display:none;}
}
@media (max-width:992px){
  #logo-mobile{}
  #logo-screen{display:none;}
  figure{}
}
@media (max-width:600px){
  #logo-mobile{width:200px; padding-top:4px}
  .header__menu {width:100vw;}
  .header__checkbox:checked { &~.header__menu {transform: translateX(100vw);}}
}
@media (max-width:992px) and (min-width:601px){
  #logo-mobile{ padding-top:7px}

}