header {
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    background: var(--color-background);
    z-index: 1000;
    overflow: visible;
}

header .logo {
    transform: scale(1);
    transform-origin: center left;
    transition: transform 0.3s ease;
}
@media screen and (min-width: 1200px){
    header {
        transition: transform 0.3s ease-in-out;
    }
    header .menumain {
        border-bottom: 1px solid var(--color-gray);
    }
    #home header .menumain , #press-article header .menumain, #job-article header .menumain {
        border-bottom: none;
    }
    #home header.header-partial .menumain , #press-article header.header-partial .menumain, #job-article header.header-partial .menumain {
        border-bottom: 1px solid var(--color-gray);
    }
    header.header-full {
        transform: translateY(0);
    }
    header.header-partial {
        transform: translateY(-54%);
    }
    header.header-partial.no-announce {
        transform: translateY(-38%);
    }
    header.header-partial .menumain {
        border-bottom: 1px solid var(--color-gray);
    }
    header.header-hidden {
        transform: translateY(-100%);
    }
    header.header-partial .logo {
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.announcement-bar {
    background: var(--color);
    color: var(--color-background);
    display: none;
}
.announcement-bar > span {
    padding: var(--space-xs) var(--content-padding);
    max-width: var(--content-width);
    margin: 0 auto;
    display: block;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
}
.announcement-bar a {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    margin-left: 1rem;
}
.menu2 {
    border-bottom: 1px solid var(--color-gray);
    display: none;
}
.menu2 ul a {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight);
}
.menu2 ul a:hover {
    color: var(--color-primary);
    transition: 0.2s ease-in-out all;
}
.menu2 ul a:hover svg path {
    stroke: var(--color-primary);
}
.menu2 ul {
    display: flex;
    padding: var(--space-xs) var(--content-padding);
    max-width: var(--content-width);
    list-style: none;
    margin: 0 auto;
}
.menu2 li {
    padding: 0;
    margin: 0 1.4rem 0 0;
}
.menu2 li:last-child {
    margin: 0 0 0 auto;
}
.menu2 li:last-child svg {
    width: 0.8rem;
    height: auto;
    transform: translateY(0.14rem);
    margin-right: 0.2rem;
}
nav a, nav button {
    text-decoration: none;
    font-size: 1.24rem;
    color: var(--color);
}
nav ul ul a, nav ul ul button {
    font-size: 1.04rem;
}
.menumain {
    border-bottom: 1px solid var(--color-gray);
}
.menumain > div {
    padding: var(--space-xs) var(--content-padding);
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 0;
}
.menumain .logo {
    width: 160px;
    height: auto;
    display: block;
}
.menumain .logo svg, .menumain .logo img, .menumain .logo {
    line-height: 0;
}
.menu #btn-menu {
    width: 50px;
    height: 50px;
    background: none;
    cursor: pointer;
    border: 0;
    position: relative;
    z-index: 1001;
}
.menu #btn-menu span {
      display: block;
      position: absolute;
      height: 2px;
      width: 60%;
      background: var(--color);
      opacity: 1;
      left: 40%;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: 0.25s ease-in-out;
      -moz-transition: 0.25s ease-in-out;
      -o-transition: 0.25s ease-in-out;
      transition: 0.25s ease-in-out;
}
.menu #btn-menu:hover span {
    background: var(--color-primary);
}
.menu #btn-menu:focus span {
    background: var(--color) !important;
}
.menu #btn-menu[aria-expanded=false]:hover span {
    background: var(--color-primary);
}
.menu #btn-menu:focus span {
    background: var(--color);
}
.menu #btn-menu span:nth-child(1) {
    top: 16px;
}
.menu #btn-menu span:nth-child(2) {
    top: 26px;
}
.menu #btn-menu span:nth-child(3) {
    top: 36px;
}
.menu #btn-menu[aria-expanded=true] span:nth-child(1) {
    top: 26px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.menu #btn-menu[aria-expanded=true] span:nth-child(2) {
    top: 26px;
    opacity: 0;
}
.menu #btn-menu[aria-expanded=true] span:nth-child(3) {
    top: 26px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.close-submenu {
    width: 50px !important;
    height: 50px;
    background: none;
    cursor: pointer;
    border: 0;
    position: absolute;
    top: 3.2rem;
    right: 2.4rem;
    z-index: 1001;
    display: none;
}
.close-submenu span {
    display: block;
    position: absolute;
    height: 2px;
    width: 60%;
    background: var(--color);
    opacity: 1;
    left: 40%;
    top: 26px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.close-submenu span:nth-child(2) {
    top: 26px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#navigation {
    background: var(--color-lightgray);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow: scroll;
    width: 90%;
    min-width: 300px;
    max-width: 500px;
    padding: 6rem 1.4rem 3rem;
}
#navigation ul {
    margin: 0;
    list-style: none;
}
#navigation > ul > li {
    border-bottom: 1px solid var(--color-gray);
    padding: 0;
    list-style: none;
    margin-top: 0
}
#navigation > ul > li > button, #navigation > ul > li > a {
   display: flex;
   width: 100%;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-weight-headline);
    font-family: var(--font-family);
    padding: 1rem 0;
    background: transparent;
    border: none;
    box-shadow: none;
}


#navigation > ul li button svg {
   width: 1.4rem;
   height: auto;
   transition: 0.2s ease-in-out all;
   pointer-events: none;
}
#navigation > ul > .login-mobile {
    border: none !important;
}
#navigation > ul > .login-mobile a {
    justify-content: flex-start;
    font-weight: var(--font-weight);
}
.login-mobile svg {
    width: 1.4rem;
    margin-right: 0.6rem;

}
#navigation > ul li button[aria-expanded="true"] svg {
   transform: rotate(180deg);
}
#navigation[aria-hidden=true] {
    display: block;
    transform: translateX(100%);
    transition: 0.2s ease-in-out all;
}
#navigation[aria-hidden=false] {
    transform: translateX(0);
    transition: 0.2s ease-in-out all;
}
#navigation .submenu-list li a {
    padding: 0 0 1.4rem;
    display: block;
}
#navigation .submenu-list li:first-child a {
    padding: 0.8rem 0 1.4rem;
    display: block;
}
#navigation .submenu-list[aria-hidden="true"] {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: 0.2s ease-in-out all;
}
#navigation .submenu-list[aria-hidden="false"] {
    max-height: 800px;
    transition: 0.2s ease-in-out all;
}
#navigation .submenu-list li:last-child a {
    padding: 0 0 1.4rem;
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    background-color: rgba(15, 20, 65, 0.5); 
}
.open-menu .overlay {
    display: block;
}

.submenu-headline {
    display: none;
}
.menuteaser {
    display: none;
}
@media screen and (min-width: 1200px){
    #navigation > ul > li > button, #navigation > ul > li > a {
        padding: 0.6rem 0;
    }
    nav a, nav button {
        font-size: 1.04rem;
    }
    .close-submenu {
        display: block !important;
    }
    .menumain .logo {
        width: 260px;
    }
    .announcement-bar {
        display: block;
    }
    .menu2 {
        display: block;
    }
    .open-menu .overlay {
        display: none;
    }
    .open-submenu .overlay {
        display: block;
    }
    .menumain > div {
        padding: var(--space-s) var(--content-padding);
    }
    #btn-menu {
        display: none;
    }
    .menu {
        width: 100%;
    }
    #navigation[aria-hidden=true], #navigation[aria-hidden=false] {
        transition: none;
    }
    #navigation {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100% !important;
        max-width: 100%;
        background: transparent;
        transition: none;
        overflow: visible;
    }
    #navigation > ul {
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }
    #navigation > ul > li {
        border-bottom: none;
    }
    #navigation > ul > li svg {
        display: none;
    }
    #navigation > ul > li, #navigation > ul > li button, #navigation > ul > li a {
        display: inline-block;
        width: auto;
        margin-left: 1.4rem;
    }
    #navigation .login-mobile {
        display: none;
    }
    #navigation[aria-hidden=false] {
        transform: none;
    }
    #navigation .submenu-list {
        position: fixed;
        background-color: var(--color-background);
        right: 0;
        max-width: 680px;
        min-width: 680px;
        top: 0;
        bottom: 0;
        max-height: none;
        z-index: 1001;
        overflow-y: scroll;
    }
    .submenu-headline {
        display: block;
        font-size: var(--font-size-h3);
        font-weight: bold;
        margin: 3.8rem 2.4rem 2rem;
        padding-bottom: 1.6rem;
        border-bottom: 1px solid var(--color-gray);
    }
    #navigation .submenu-list[aria-hidden="true"] {
        max-height: none !important;
        overflow: auto;
        transform: translateX(100%);
        
    }
    #navigation .submenu-list[aria-hidden="false"] {
        max-height: none;
        transform: translateX(0);
        transition: 0.3s ease-in-out all;
    }
    #navigation .submenu-list li a {
        padding: 0 0 1.8rem !important;
        margin-right: 2.4rem;
        margin-left: 2.4rem;
    }
    #navigation .submenu-list ul {
        padding-bottom: 0.4rem;
    }
    #navigation .submenu-list .desktop-columns {
        columns: 2;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
    }
    #navigation .submenu-list .desktop-columns li {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
    }
    .menuteaser {
        display: flex;
        border-top: 1px solid var(--color-gray);
        padding: 2rem 0;
        margin: 0 2.4rem;

    }
    .menuteaser span:first-child{
        width: 40%;
        display: block;
    }
    .menuteaser span:last-child{
        width: 60%;
        padding-left: 2rem;
        display: block;
    }
    .menuteaser span:last-child p:first-child {
        padding-bottom: 0.4rem;
    } 
    .menuteaser span:last-child a {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 0.2rem;
        text-decoration-thickness: var(--border);
        margin-left: 0 !important;
        padding-top: 0.4rem;
    } 
    #navigation > ul > li a, #navigation > ul > li button {
        transition: 0.2s ease-in-out all;   
    }
    #navigation > ul > li a:hover, #navigation > ul > li button:hover {
        color: var(--color-primary-dark);
    }
    #navigation > ul > li:nth-last-child(2) > a, #navigation > ul > li:nth-last-child(2) > button {
        border: 2px solid var(--color-primary);
        padding: 0.6rem 1rem;
        background-color: var(--color-primary);
        color: var(--color-background);
        border-radius: 10rem;
        transform: translateY(-0.05rem);
    }
    #navigation > ul > li:nth-last-child(2) > a:hover, #navigation > ul > li:nth-last-child(2) > button:hover {
        border: 2px solid var(--color-primary-dark);
        background-color: var(--color-primary-dark);
    }
}
@media screen and (min-width: 1400px){
    .menumain .logo {
        width: 330px;
    }
    header.header-partial {
        transform: translateY(-51%);
    }
}


/* CSS für gestaffelte Fade-In Animation von links */
.submenu-list[aria-hidden="false"] ul li,
.submenu-list[aria-hidden="false"] .menuteaser > span,
#navigation[aria-hidden="false"] > ul > li {
  animation: fadeInRight 0.8s ease-out forwards;
  opacity: 0;
}

.submenu-list[aria-hidden="false"] li:nth-child(1) { animation-delay: 200ms; }
.submenu-list[aria-hidden="false"] li:nth-child(2) { animation-delay: 300ms; }
.submenu-list[aria-hidden="false"] li:nth-child(3) { animation-delay: 400ms; }
.submenu-list[aria-hidden="false"] li:nth-child(4) { animation-delay: 500ms; }
.submenu-list[aria-hidden="false"] li:nth-child(5) { animation-delay: 600ms; }
.submenu-list[aria-hidden="false"] li:nth-child(6) { animation-delay: 700ms; }
.submenu-list[aria-hidden="false"] li:nth-child(7) { animation-delay: 800ms; }
.submenu-list[aria-hidden="false"] li:nth-child(8) { animation-delay: 900ms; }
.submenu-list[aria-hidden="false"] .menuteaser > span { animation-delay: 500ms; }

#navigation[aria-hidden="false"] > ul > li:nth-child(1) { animation-delay: 200ms; }
#navigation[aria-hidden="false"] > ul > li:nth-child(2) { animation-delay: 250ms; }
#navigation[aria-hidden="false"] > ul > li:nth-child(3) { animation-delay: 300ms; }
#navigation[aria-hidden="false"] > ul > li:nth-child(4) { animation-delay: 350ms; }
#navigation[aria-hidden="false"] > ul > li:nth-child(5) { animation-delay: 400ms; }
#navigation[aria-hidden="false"] > ul > li:nth-child(6) { animation-delay: 450ms; }
#navigation[aria-hidden="false"] > ul > li:nth-child(7) { animation-delay: 500ms; }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Nur auf Desktop */
@media (max-width: 1200px) {
  .submenu-list ul li,
  .submenu-list .submenu-item {
    animation: none !important;
    opacity: 1 !important;
  }
}
/* Nur auf Mobile */
@media (min-width: 1200px) {
  #navigation > ul > li{
    animation: none !important;
    opacity: 1 !important;
  }
}


/* Footer */
footer {
    background: var(--color-lightgray);
}

footer .content-width > span:first-child{
    display: block;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
footer .content-width > span:last-child{
    display: block;
    padding-bottom: var(--space-xl);
}
footer .content-width > span:first-child img, 
footer .content-width > span:first-child svg {
    max-width: 200px;
}
footer h2 {
    padding-top: var(--space-l);
    padding-bottom: 0.4rem;
    display: block;
    font-size:var(--font-size-h4);
    font-weight: var(--font-weight-headline);
}
footer ul {
    list-style: none;
}
footer a {
    color: var(--color);
    text-decoration: none;
    display: inline-block;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-weight: var(--font-weight);
}
footer .socials {
    display: flex;
    margin-bottom: 1.4rem;
}
footer .social {
    display: inline-block;
    width: 3rem;
    height: auto;
    margin-right: 0.4rem;
}
.footer-adress {
    padding-top: 0.4rem;
}
@media screen and (min-width: 600px) {
    footer .content-width > span:first-child > span {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 1rem;
    }
    footer .content-width > span:last-child{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

@media screen and (min-width: 900px) {
    footer .content-width > span:first-child > span {
        grid-template-columns: repeat(3, 1fr);
    }
    footer .social {
        width: 2rem;
        margin-right: 0.8rem;
    }
    footer .socials {
        margin-bottom: 0;
    }
    footer .content-width > span:first-child img,
    footer .content-width > span:first-child svg {
        max-width: 260px;
    }
}
@media screen and (min-width: 1024PX) {
    footer .content-width > span:first-child {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column-gap: 1rem;
    }
    footer .content-width > span:first-child img,
    footer .content-width > span:first-child svg {
        grid-column: span 5;
    }
    footer .content-width > span:first-child > span {
        grid-column: span 7;
    }
    footer h2 {
        padding-top: 0;
        margin-bottom: var(--space-m);
    }
}
@media screen and (min-width: 1200px) {
    footer .content-width > span:first-child img,
    footer .content-width > span:first-child svg {
        max-width: 300px;
    }
}