header {
     height: var(--header-height);
     background-color: var(--color-primary);
     box-shadow: 0 6px 6px #0000000d;
}
header a {
     text-decoration: none;
}
.logo {
     width: calc(100px + 4vw);
}
.header_mainline {
     height: 106px;
}
.header_subline {
     height: auto;
     padding: calc(4px + 0.1vw) 0 calc(10px + 0.35vw) 0;
}
.header_menuelement {
     width: calc(60px + 1.5vw);
     height: 76%;
     padding-left: var(--space-xsmall);
     padding-right: var(--space-xsmall);
     margin-right: clamp(-10px, -1.5vw, -4px);
     transition: 0.15s;
}
.header_menuelement:hover {
     transition: 0.15s;
     background-color: rgba(255, 255, 255, 0.129);
}
nav .header_menuelement:not(:last-of-type) {
     border-right: 1px solid rgba(0, 0, 0, 0.18);
     margin-right: unset;
}
.header_menuelement img {
     max-height: 34px;
}
.header_submenuelement {
     border: 2px solid var(--color-dark);
     padding: calc(8px + 0.3vw) calc(12px + 0.3vw);
     border-radius: 50px;
     background-color: var(--color-primary);
     margin-top: var(--space-xsmall);
     transition: 0.15s;
     font-size: var(--font-size-s) !important;
     line-height: var(--line-height-s) !important;
     font-weight: var(--font-medium) !important;
}
.header_submenuelement:hover {
     background-color: var(--color-dark);
     color: var(--color-primary);
     transition: 0.15s;
}
nav .header_submenuelement:not(:last-of-type) {
     margin-right: calc(var(--space-xsmall) + 0.3vw + 3px);
}
#searchform {
     width: calc(150px + 12vw);
     margin-right: auto;
     margin-left: var(--space-small);
}
.searchform_img {
     width: 30px;
     height: 30px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: -1%;
     z-index: 2;
     pointer-events: none;
}
.searchfield {
     width: 89%;
     font-size: 20px;
     border-radius: 50px;
     border: unset;
     padding: calc(5px + 0.06vw) 11% calc(5px + 0.06vw) calc(12px + 0.12vw);
     font-family: var(--font-catamaran);
     letter-spacing: -1px;
     box-shadow: -2px 2px 8px #0000003d;
}
.searchfield::placeholder {
     opacity: 0.4;
}
.searchbutton {
     width: 32px;
     height: 32px;
     padding: 0;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: -1%;
     cursor: pointer;
     background-color: transparent;
     border: none;
}
.burger, .burger_nab, .overlay {
     display: none;
}
.burger {
     width: 50px;
     height: 50px;
     position: relative;
     border-radius: 4px;
     z-index: 10;
}
.burger span {
     position: relative;
     margin-top: 9px;
     margin-bottom: 9px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -15px;
     margin-top: -1.5px;
}
.burger span, .burger span::before, .burger span::after {
     display: block;
     width: 30px;
     height: 3px;
     background-color: #2a2a2a;
     outline: 1px solid transparent;
     -webkit-transition-property: background-color, -webkit-transform;
     -moz-transition-property: background-color, -moz-transform;
     -o-transition-property: background-color, -o-transform;
     transition-property: background-color, transform;
     -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
     transition-duration: 0.3s;
}
.burger span::before, .burger span::after {
     position: absolute;
     content: "";
}
.burger span::before {
     top: -9px;
}
.burger span::after {
     top: 9px;
}
.burger.clicked span {
     background-color: transparent;
}
.burger.clicked span::before {
     -webkit-transform: translateY(9px) rotate(45deg);
     -moz-transform: translateY(9px) rotate(45deg);
     -ms-transform: translateY(9px) rotate(45deg);
     -o-transform: translateY(9px) rotate(45deg);
     transform: translateY(9px) rotate(45deg);
}
.burger.clicked span::after {
     -webkit-transform: translateY(-9px) rotate(-45deg);
     -moz-transform: translateY(-9px) rotate(-45deg);
     -ms-transform: translateY(-9px) rotate(-45deg);
     -o-transform: translateY(-9px) rotate(-45deg);
     transform: translateY(-9px) rotate(-45deg);
}
.burger.clicked span:before, .burger.clicked span:after {
     background-color: #ffffff;
}
.burger:hover {
     cursor: pointer;
}
.burger_nav {
     background-color: var(--color-primary);
     position: fixed;
     z-index: 9;
     top: 0;
     right: 0;
     height: calc(100vh - var(--space-xlarge) - var(--space-medium));
     max-width: 340px;
     width: 100%;
     padding: var(--space-xlarge) var(--space-medium) var(--space-medium) var(--space-medium);
     overflow-y: auto;
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
     -ms-transform: translateX(100%);
     -o-transform: translateX(100%);
     transform: translateX(100%);
     -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
     -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
     -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
     transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.burger_nav.show {
     -webkit-transform: translateX(0px);
     -moz-transform: translateX(0px);
     -ms-transform: translateX(0px);
     -o-transform: translateX(0px);
     transform: translateX(0px);
}
.burger_nav.show ul li {
     -webkit-transform: translateX(0px);
     -moz-transform: translateX(0px);
     -ms-transform: translateX(0px);
     -o-transform: translateX(0px);
     transform: translateX(0px);
     opacity: 1;
}
.burger_nav.show ul li:nth-child(1) {
     transition-delay: 0.15s;
}
.burger_nav.show ul li:nth-child(2) {
     transition-delay: 0.3s;
}
.burger_nav.show ul li:nth-child(3) {
     transition-delay: 0.45s;
}
.burger_nav.show ul li:nth-child(4) {
     transition-delay: 0.6s;
}
.burger_nav.show ul li:nth-child(5) {
     transition-delay: 0.75s;
}
.burger_nav.show ul li:nth-child(6) {
     transition-delay: 0.9s;
}
.burger_nav.show ul li:nth-child(7) {
     transition-delay: 1.05s;
}
.burger_nav.show ul li:nth-child(8) {
     transition-delay: 1.2s;
}
.burger_nav.show ul li:nth-child(9) {
     transition-delay: 1.35s;
}
.burger_nav.show .about, .burger_nav.show .social, .burger_nav.show ul.sub {
     -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
     -ms-transform: translateY(0px);
     -o-transform: translateY(0px);
     transform: translateY(0px);
     opacity: 1;
     transition-delay: 0.85s;
}
.burger_nav ul {
     list-style-type: none;
}
.burger_nav ul li {
     margin-bottom: 20px;
     -webkit-transform: translateX(40px);
     -moz-transform: translateX(40px);
     -ms-transform: translateX(40px);
     -o-transform: translateX(40px);
     transform: translateX(40px);
     opacity: 0;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
.burger_nav ul li:last-of-type {
     margin-bottom: 0px;
}
.burger_nav ul.sub {
     list-style-type: none;
     margin-top: 40px;
     -webkit-transform: translateY(30px);
     -moz-transform: translateY(30px);
     -ms-transform: translateY(30px);
     -o-transform: translateY(30px);
     transform: translateY(30px);
     opacity: 0;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
     transition: all 0.4s ease;
}
.burger_nav ul.sub li {
     margin-bottom: 10px;
}
.burger_nav ul.sub li:last-of-type {
     margin-bottom: 0px;
}
.overlay {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     background-color: #b7ac7f;
     opacity: 0;
     visibility: hidden;
}
.overlay.show {
     opacity: 0.8;
     visibility: visible;
}
@media screen and (max-width: 767px) {
     .burger, .burger_nab, .overlay {
          display: block;
     }
     header .header_menu, header .header_subline {
          display: none;
     }
     #searchform {
          width: 190px;
     }
     .searchfield {
          width: 100%;
          font-size: 18px;
          padding: 8px 40px 8px 15px;
     }
     .searchform_img {
          width: 30px;
          height: 30px;
          right: -46px;
     }
     .searchbutton {
          width: 38px;
          height: 34px;
          right: -52px;
          padding: 0;
     }
}
@media screen and (max-width: 575px) {
     #searchform {
          display: none;
     }
}