From b848f88399ab347c6b1dabfc1a5e1a9d2e94edb2 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Wed, 8 Apr 2020 14:46:41 +0200
Subject: [PATCH] seperate header css file

---
 kit/css/header.css              | 328 ++++++++++++++++++++++++++
 kit/css/menu.css                | 405 ++++++++++++++++++++++++++++++++
 kit/header.php                  |   1 +
 kit/style.css                   | 331 +-------------------------
 kit/template-parts/site-nav.php | 118 ++++++++++
 5 files changed, 853 insertions(+), 330 deletions(-)
 create mode 100644 kit/css/header.css
 create mode 100644 kit/css/menu.css
 create mode 100644 kit/template-parts/site-nav.php

diff --git a/kit/css/header.css b/kit/css/header.css
new file mode 100644
index 0000000..cdf4988
--- /dev/null
+++ b/kit/css/header.css
@@ -0,0 +1,328 @@
+header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 30;
+  height: 7.33333rem;
+  padding: 1rem 0;
+  background-color: #ffffff;
+}
+
+header::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: block;
+  height: 0.33333rem;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.15)), to(rgba(51, 51, 51, 0)));
+  background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
+  background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
+  background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
+}
+
+header + * {
+  display: block;
+  margin-top: 7.33333rem;
+}
+
+header .content-wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+header .header-logo-container {
+  position: static;
+  padding: 0.22222rem 0;
+  margin-right: auto;
+  color: #333333;
+  line-height: 1;
+}
+
+header .header-logo-container::after {
+  display: none;
+}
+
+header .header-button-container {
+  margin-left: 3.33333rem;
+}
+
+header:not(.sticky-header) nav {
+  margin-top: 3.11111rem;
+}
+
+header:not(.sticky-header) .header-button-container {
+  margin-top: 2.88889rem;
+}
+
+.header-logo {
+  display: block;
+  width: 10rem;
+  height: 4.61111rem;
+}
+
+.header-logo-text {
+  display: none;
+}
+
+.header-logo-mobile {
+  display: none;
+  width: 6.11111rem;
+  height: 2.77778rem;
+}
+
+.header-burger-button {
+  display: none;
+}
+
+.header-burger-button + label {
+  position: relative;
+  display: none;
+  width: 40px;
+  height: 40px;
+  background-image: url(../img/burger-menu.svg);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  cursor: pointer;
+}
+
+.header-burger-button + label span {
+  display: none;
+}
+
+.header-button {
+  position: relative;
+  display: block;
+  padding: 0.55556rem 2.5rem;
+  color: #ffffff;
+  font-weight: 500;
+  white-space: nowrap;
+  background-image: -webkit-gradient(linear, left bottom, left top, from(#009982), to(#00c8ad));
+  background-image: -webkit-linear-gradient(bottom, #009982, #00c8ad);
+  background-image: -o-linear-gradient(bottom, #009982, #00c8ad);
+  background-image: linear-gradient(0deg, #009982, #00c8ad);
+  border-radius: 3px;
+}
+
+.header-button:hover::before {
+  opacity: 1;
+}
+
+.header-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: #333333;
+  border-radius: 3px;
+  opacity: 0;
+  -webkit-transition: opacity .5s;
+  -o-transition: opacity .5s;
+  transition: opacity .5s;
+}
+
+.header-button span {
+  position: relative;
+  z-index: 1;
+}
+
+.header-lang {
+  position: absolute;
+  top: 10px;
+  right: calc((100% - 1170px) / 2);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.61111rem 0;
+}
+
+.header-lang li {
+  border-left: 1px solid #333333;
+  line-height: 1;
+}
+
+.header-lang li:first-child {
+  border-left: none;
+}
+
+.header-lang li a {
+  padding: 0 8px;
+  line-height: 1rem;
+  -webkit-transition: color .3s;
+  -o-transition: color .3s;
+  transition: color .3s;
+}
+
+.header-lang li a:hover {
+  color: #009982;
+}
+
+.header-lang li.active a {
+  color: #009982;
+  font-weight: 700;
+}
+
+.header-search {
+  display: none;
+}
+
+.header-search img {
+  width: 25px;
+  padding: 0.77778rem 0;
+}
+
+.header-search span {
+  display: none;
+}
+
+@media (max-width: 1280px) {
+  .header-lang {
+    right: 30px;
+  }
+}
+
+@media (max-width: 960px) {
+  header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 30;
+    height: 4.44444rem;
+    padding: 0.55556rem 0;
+  }
+  header + * {
+    margin-top: 4.44444rem;
+  }
+  header .header-logo {
+    display: none;
+  }
+  header .header-logo-mobile {
+    display: block;
+  }
+  header .header-button-container {
+    margin-left: 1.66667rem;
+  }
+  header .header-button {
+    padding: 0.66667rem 2.5rem;
+  }
+  header .header-burger-button + label {
+    -webkit-box-ordinal-group: 11;
+    -ms-flex-order: 10;
+    order: 10;
+    display: block;
+    margin-left: 15px;
+  }
+  header:not(.sticky-header) nav {
+    margin-top: 0;
+  }
+  header:not(.sticky-header) .header-button-container {
+    margin-top: 0;
+  }
+  + * {
+    display: block;
+    margin-top: 4.44444rem;
+  }
+  .header-lang {
+    position: static;
+    padding: 0.72222rem 0;
+    margin-right: 10px;
+    font-size: 18px;
+  }
+  .header-lang li {
+    line-height: initial;
+  }
+  .header-search {
+    display: block;
+  }
+}
+
+@media (max-width: 500px) {
+  header .header-button-container {
+    display: none;
+  }
+}
+
+.sticky-header {
+  height: 4.44444rem;
+  padding: 0.55556rem 0;
+}
+
+.sticky-header + * {
+  margin-top: 4.44444rem;
+}
+
+.sticky-header .header-logo {
+  display: none;
+}
+
+.sticky-header .header-logo-mobile {
+  display: block;
+}
+
+.sticky-header nav > ul > li:hover > a::after,
+.sticky-header nav > ul > li:active > a::after {
+  bottom: -1.72222rem;
+  height: 1.66667rem;
+}
+
+.sticky-header .header-button-container .header-button {
+  padding: 12px 35px;
+  font-size: 14px;
+}
+
+.sticky-header .header-lang {
+  position: static;
+  padding: 0.72222rem 0;
+  margin-bottom: 2px;
+  font-size: 18px;
+}
+
+.sticky-header .header-lang li {
+  line-height: initial;
+}
+
+.sticky-header .header-search {
+  display: none;
+}
+
+@media (max-width: 1280px) {
+  .sticky-header .header-lang {
+    margin-bottom: 4px;
+  }
+}
+
+@media (max-width: 960px) {
+  .sticky-header .header-search {
+    display: block;
+  }
+  .sticky-header .header-button-container .header-button {
+    padding: 0.66667rem 2.5rem;
+  }
+  .sticky-header nav {
+    padding: 0;
+  }
+}
diff --git a/kit/css/menu.css b/kit/css/menu.css
new file mode 100644
index 0000000..b92c164
--- /dev/null
+++ b/kit/css/menu.css
@@ -0,0 +1,405 @@
+nav .container-3-cols {
+  flex-wrap: wrap;
+}
+
+nav .container-3-cols .column {
+  margin-top: 1.66667rem;
+}
+
+nav .container-3-cols .column:nth-of-type(1), nav .container-3-cols .column:nth-of-type(2), nav .container-3-cols .column:nth-of-type(3) {
+  margin-top: 0;
+}
+
+nav .container-3-cols .column:nth-of-type(3n+1) {
+  margin-left: 0;
+}
+
+nav > ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+nav > ul > li {
+  margin-left: 2.5rem;
+}
+
+nav > ul > li > a {
+  position: relative;
+  display: block;
+  font-weight: 500;
+  line-height: 1;
+}
+
+nav > ul > li:hover > a,
+nav > ul > li:active > a {
+  color: #009982;
+}
+
+nav > ul > li:hover > a::after,
+nav > ul > li:active > a::after {
+  content: '';
+  position: absolute;
+  bottom: -1.61111rem;
+  left: 0;
+  width: 100%;
+  height: 1.55556rem;
+  border-bottom: 4px solid #009982;
+}
+
+nav > ul > li.opened .nav-first-level-opener::after {
+  transform: rotateX(90deg);
+}
+
+nav > ul > li .nav-first-level-opener {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+  display: none;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+}
+
+nav > ul > li .nav-first-level-opener span {
+  display: none;
+}
+
+nav > ul > li .nav-first-level-opener::before, nav > ul > li .nav-first-level-opener::after {
+  content: '';
+  position: absolute;
+  background-color: #009982;
+  transition: transform .3s;
+}
+
+nav > ul > li .nav-first-level-opener::before {
+  top: 45%;
+  right: 25%;
+  left: 25%;
+  width: 50%;
+  height: 10%;
+}
+
+nav > ul > li .nav-first-level-opener::after {
+  top: 25%;
+  bottom: 25%;
+  left: 45%;
+  width: 10%;
+  height: 50%;
+}
+
+@media (max-width: 1280px) {
+  nav > ul > li:hover a::after,
+  nav > ul > li:active a::after {
+    border-bottom-width: 3px;
+  }
+}
+
+@media (max-width: 1024px) {
+  nav > ul > li:hover a::after,
+  nav > ul > li:active a::after {
+    border-bottom-width: 2px;
+  }
+}
+
+@media (max-width: 960px) {
+  nav {
+    position: fixed;
+    top: 4.44444rem;
+    right: -360px;
+    z-index: 20;
+    width: 360px;
+    max-width: 100%;
+    height: calc(100vh - 80px + 20px);
+    padding: 0;
+    overflow: hidden;
+    overflow-y: scroll;
+    background-color: #f2f2f2;
+    transition: right .3s;
+  }
+  nav > ul {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  nav > ul > li {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    margin-left: 0;
+    border-bottom: 1px solid #cccccc;
+  }
+  nav > ul > li > a {
+    padding: 20px;
+    line-height: 1;
+    background-color: #ffffff;
+  }
+  nav > ul > li:nth-of-type(1) {
+    border-top: 1px solid #cccccc;
+  }
+  nav > ul > li:hover > a::after,
+  nav > ul > li:active > a::after {
+    display: none;
+  }
+  nav > ul > li .nav-first-level-opener {
+    display: block;
+  }
+  .header-burger-button:checked + label + nav {
+    right: 0;
+  }
+}
+
+.nav-second-level {
+  position: absolute;
+  top: 100%;
+  z-index: 10;
+  width: 17.77778rem;
+  padding-top: 2.5rem;
+  padding-bottom: 3.33333rem;
+  overflow: hidden;
+  transform: translateZ(0);
+  background-color: #f2f2f2;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity .3s, visibility .3s;
+}
+
+.nav-second-level::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  display: block;
+  width: 100%;
+  padding-top: 10px;
+}
+
+.nav-second-level.mega-flyout {
+  right: 0;
+  left: 0;
+  width: 100%;
+  min-width: 100%;
+  max-width: none;
+  padding-top: 4.44444rem;
+  padding-bottom: 8.88889rem;
+}
+
+.nav-second-level.mega-flyout::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: block;
+  height: 0.83333rem;
+  background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0));
+}
+
+.nav-second-level .content-wrap {
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.nav-second-level .container {
+  width: 100%;
+}
+
+.nav-second-level .container .column {
+  overflow: hidden;
+  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+
+.nav-second-level-group {
+  position: relative;
+}
+
+.nav-second-level-group + .nav-second-level-group {
+  margin-top: 2.66667rem;
+}
+
+.nav-second-level-group-headline {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 1rem;
+  margin-left: 2rem;
+  color: #009982;
+  font-weight: 700;
+}
+
+.nav-second-level-group-headline .icon {
+  position: absolute;
+  top: 1px;
+  left: -2rem;
+  width: 1.33333rem;
+  height: 1.33333rem;
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: contain;
+}
+
+.nav-second-level-group-headline span {
+  margin-left: -2rem;
+}
+
+.nav-second-level-group-headline .icon + span {
+  margin-left: 0;
+}
+
+.nav-second-level-group-headline:hover {
+  text-decoration: underline;
+}
+
+.nav-second-level-group.opened .nav-second-level-opener::after {
+  transform: rotateX(90deg);
+}
+
+.nav-second-level ul li a {
+  position: relative;
+  display: block;
+  margin-left: 1.33333rem;
+  font-size: 0.88889rem;
+  font-weight: 300;
+}
+
+.nav-second-level ul li a::before {
+  content: '';
+  position: absolute;
+  top: 0.33333rem;
+  left: -1.33333rem;
+  width: 0.88889rem;
+  height: 0.88889rem;
+  font-size: 1.44444rem;
+  background-image: url(img/arrow-right-grey.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.nav-second-level ul li a:hover {
+  text-decoration: underline;
+}
+
+.nav-second-level .nav-second-level-opener {
+  position: absolute;
+  top: 0.88889rem;
+  right: 14px;
+  z-index: 1;
+  display: none;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.nav-second-level .nav-second-level-opener span {
+  display: none;
+}
+
+.nav-second-level .nav-second-level-opener::before, .nav-second-level .nav-second-level-opener::after {
+  content: '';
+  position: absolute;
+  background-color: #009982;
+  transition: transform .3s;
+}
+
+.nav-second-level .nav-second-level-opener::before {
+  top: 45%;
+  right: 25%;
+  left: 25%;
+  width: 12px;
+  height: 2px;
+}
+
+.nav-second-level .nav-second-level-opener::after {
+  top: 25%;
+  bottom: 25%;
+  left: 45%;
+  width: 2px;
+  height: 12px;
+}
+
+nav ul li:hover .nav-second-level {
+  overflow: visible;
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (max-width: 960px) {
+  .nav-second-level,
+  nav ul li:hover .nav-second-level {
+    position: static;
+    width: 100%;
+    height: auto;
+    padding-top: 0;
+    padding-bottom: 0.83333rem;
+    border-top: 1px solid #cccccc;
+    overflow: hidden;
+    opacity: 1;
+    visibility: visible;
+  }
+  .nav-second-level.mega-flyout,
+  nav ul li:hover .nav-second-level.mega-flyout {
+    padding-top: 0;
+    padding-bottom: 0.83333rem;
+  }
+  .nav-second-level .container,
+  nav ul li:hover .nav-second-level .container {
+    flex-direction: column;
+  }
+  .nav-second-level .container-3-cols,
+  nav ul li:hover .nav-second-level .container-3-cols {
+    flex-direction: column;
+  }
+  .nav-second-level .container-3-cols .column,
+  .nav-second-level .container-3-cols .column + .column,
+  nav ul li:hover .nav-second-level .container-3-cols .column,
+  nav ul li:hover .nav-second-level .container-3-cols .column + .column {
+    width: 100%;
+    margin-left: 0;
+  }
+  .nav-second-level .container-3-cols .column:nth-of-type(n+3),
+  nav ul li:hover .nav-second-level .container-3-cols .column:nth-of-type(n+3) {
+    margin-top: 0;
+  }
+  .nav-second-level .content-wrap,
+  nav ul li:hover .nav-second-level .content-wrap {
+    padding: 0;
+  }
+  .nav-second-level::after,
+  nav ul li:hover .nav-second-level::after {
+    display: none;
+  }
+  .nav-second-level .nav-second-level-opener,
+  nav ul li:hover .nav-second-level .nav-second-level-opener {
+    display: block;
+  }
+  .nav-second-level-group + .nav-second-level-group {
+    margin-top: 0;
+  }
+  .nav-second-level-group-headline {
+    margin-top: 0.83333rem;
+    margin-bottom: 0;
+    margin-left: 2.77778rem;
+  }
+  .nav-second-level-group-headline .icon {
+    top: 0;
+    left: -1.55556rem;
+  }
+  .nav-second-level-group-headline span {
+    margin-left: -1.55556rem;
+  }
+  .nav-second-level-group-headline .icon + span {
+    margin-left: 0;
+  }
+  .nav-second-level-group ul {
+    padding: 0.83333rem 1.44444rem;
+    margin-top: 0;
+    overflow: hidden;
+  }
+  .opened > a {
+    color: #009982;
+  }
+}
diff --git a/kit/header.php b/kit/header.php
index 0720bf0..65cbaf1 100644
--- a/kit/header.php
+++ b/kit/header.php
@@ -15,6 +15,7 @@
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/cookieconsent.css" media="all">
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/magnific-popup.css" media="all">
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/swiper.css" media="all">
+    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/header.css" media="all">
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/menu.css" media="all">
 
     <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery-3.js" type="text/javascript"></script>
diff --git a/kit/style.css b/kit/style.css
index 8b4ac27..147acb0 100644
--- a/kit/style.css
+++ b/kit/style.css
@@ -1324,336 +1324,7 @@ body.page-theme-color-quaternary h2::after {
   src: local("Roboto Black Italic"), local("Roboto-BlackItalic"), url("../fonts/roboto-v18-latin-900italic.woff2") format("woff2"), url("../fonts/roboto-v18-latin-900italic.woff") format("woff");
 }
 
-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 30;
-  height: 7.33333rem;
-  padding: 1rem 0;
-  background-color: #ffffff;
-}
-
-header::after {
-  content: '';
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  display: block;
-  height: 0.33333rem;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.15)), to(rgba(51, 51, 51, 0)));
-  background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
-  background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
-  background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
-}
-
-header + * {
-  display: block;
-  margin-top: 7.33333rem;
-}
-
-header .content-wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-header .header-logo-container {
-  position: static;
-  padding: 0.22222rem 0;
-  margin-right: auto;
-  color: #333333;
-  line-height: 1;
-}
-
-header .header-logo-container::after {
-  display: none;
-}
-
-header .header-button-container {
-  margin-left: 3.33333rem;
-}
-
-header:not(.sticky-header) nav {
-  margin-top: 3.11111rem;
-}
-
-header:not(.sticky-header) .header-button-container {
-  margin-top: 2.88889rem;
-}
-
-.header-logo {
-  display: block;
-  width: 10rem;
-  height: 4.61111rem;
-}
-
-.header-logo-text {
-  display: none;
-}
-
-.header-logo-mobile {
-  display: none;
-  width: 6.11111rem;
-  height: 2.77778rem;
-}
-
-.header-burger-button {
-  display: none;
-}
-
-.header-burger-button + label {
-  position: relative;
-  display: none;
-  width: 40px;
-  height: 40px;
-  background-image: url(../img/burger-menu.svg);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: contain;
-  cursor: pointer;
-}
-
-.header-burger-button + label span {
-  display: none;
-}
-
-.header-button {
-  position: relative;
-  display: block;
-  padding: 0.55556rem 2.5rem;
-  color: #ffffff;
-  font-weight: 500;
-  white-space: nowrap;
-  background-image: -webkit-gradient(linear, left bottom, left top, from(#009982), to(#00c8ad));
-  background-image: -webkit-linear-gradient(bottom, #009982, #00c8ad);
-  background-image: -o-linear-gradient(bottom, #009982, #00c8ad);
-  background-image: linear-gradient(0deg, #009982, #00c8ad);
-  border-radius: 3px;
-}
-
-.header-button:hover::before {
-  opacity: 1;
-}
-
-.header-button::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: #333333;
-  border-radius: 3px;
-  opacity: 0;
-  -webkit-transition: opacity .5s;
-  -o-transition: opacity .5s;
-  transition: opacity .5s;
-}
-
-.header-button span {
-  position: relative;
-  z-index: 1;
-}
-
-.header-lang {
-  position: absolute;
-  top: 10px;
-  right: calc((100% - 1170px) / 2);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 0.61111rem 0;
-}
-
-.header-lang li {
-  border-left: 1px solid #333333;
-  line-height: 1;
-}
-
-.header-lang li:first-child {
-  border-left: none;
-}
-
-.header-lang li a {
-  padding: 0 8px;
-  line-height: 1rem;
-  -webkit-transition: color .3s;
-  -o-transition: color .3s;
-  transition: color .3s;
-}
-
-.header-lang li a:hover {
-  color: #009982;
-}
-
-.header-lang li.active a {
-  color: #009982;
-  font-weight: 700;
-}
-
-.header-search {
-  display: none;
-}
-
-.header-search img {
-  width: 25px;
-  padding: 0.77778rem 0;
-}
-
-.header-search span {
-  display: none;
-}
-
-@media (max-width: 1280px) {
-  .header-lang {
-    right: 30px;
-  }
-}
-
-@media (max-width: 960px) {
-  header {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 30;
-    height: 4.44444rem;
-    padding: 0.55556rem 0;
-  }
-  header + * {
-    margin-top: 4.44444rem;
-  }
-  header .header-logo {
-    display: none;
-  }
-  header .header-logo-mobile {
-    display: block;
-  }
-  header .header-button-container {
-    margin-left: 1.66667rem;
-  }
-  header .header-button {
-    padding: 0.66667rem 2.5rem;
-  }
-  header .header-burger-button + label {
-    -webkit-box-ordinal-group: 11;
-    -ms-flex-order: 10;
-    order: 10;
-    display: block;
-    margin-left: 15px;
-  }
-  header:not(.sticky-header) nav {
-    margin-top: 0;
-  }
-  header:not(.sticky-header) .header-button-container {
-    margin-top: 0;
-  }
-  + * {
-    display: block;
-    margin-top: 4.44444rem;
-  }
-  .header-lang {
-    position: static;
-    padding: 0.72222rem 0;
-    margin-right: 10px;
-    font-size: 18px;
-  }
-  .header-lang li {
-    line-height: initial;
-  }
-  .header-search {
-    display: block;
-  }
-}
-
-@media (max-width: 500px) {
-  header .header-button-container {
-    display: none;
-  }
-}
-
-.sticky-header {
-  height: 4.44444rem;
-  padding: 0.55556rem 0;
-}
-
-.sticky-header + * {
-  margin-top: 4.44444rem;
-}
-
-.sticky-header .header-logo {
-  display: none;
-}
-
-.sticky-header .header-logo-mobile {
-  display: block;
-}
-
-.sticky-header nav > ul > li:hover > a::after,
-.sticky-header nav > ul > li:active > a::after {
-  bottom: -1.72222rem;
-  height: 1.66667rem;
-}
-
-.sticky-header .header-button-container .header-button {
-  padding: 12px 35px;
-  font-size: 14px;
-}
-
-.sticky-header .header-lang {
-  position: static;
-  padding: 0.72222rem 0;
-  margin-bottom: 2px;
-  font-size: 18px;
-}
-
-.sticky-header .header-lang li {
-  line-height: initial;
-}
-
-.sticky-header .header-search {
-  display: none;
-}
-
-@media (max-width: 1280px) {
-  .sticky-header .header-lang {
-    margin-bottom: 4px;
-  }
-}
-
-@media (max-width: 960px) {
-  .sticky-header .header-search {
-    display: block;
-  }
-  .sticky-header .header-button-container .header-button {
-    padding: 0.66667rem 2.5rem;
-  }
-  .sticky-header nav {
-    padding: 0;
-  }
-}
-
-/* header menu in seperate css file */
+/* header & header menu in seperate css file */
 
 aside {
   position: fixed;
diff --git a/kit/template-parts/site-nav.php b/kit/template-parts/site-nav.php
new file mode 100644
index 0000000..514f0ee
--- /dev/null
+++ b/kit/template-parts/site-nav.php
@@ -0,0 +1,118 @@
+<nav>
+
+  <?php
+
+    wp_nav_menu(array(
+    'container' => 'false',
+    'menu_class' => '',
+    'theme_location'=>'primary',
+    'walker' => new kit_custom_main_menu
+  ));
+
+  ?>
+
+    <ul>
+
+      <!-- <li>
+
+          <a href="https://www.kit-ausbildung.de/de/ueber-das-kit">
+            Über das KIT
+          </a>
+
+          <section class="nav-second-level mega-flyout" style="">
+              <div class="content-wrap">
+                  <div class="container container-3-cols">
+
+
+
+
+                      <div class="column">
+                          <div class="nav-second-level-group">
+                              <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories">
+                                <img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-star-primary.svg" alt="" width="24" height="24">
+                                <span>Success Stories</span>
+                              </a>
+                              <div class="nav-second-level-opener">
+                                  <span>Untermenu öffnen / schließen</span>
+                              </div>
+                              <ul style="">
+                                  <li class="">
+                                      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/von-quito-nach-karsruhe-und-zurueck-1">Unser Auslandspraktikum in Dublin</a>
+                                  </li>
+                              </ul>
+                          </div>
+                      </div>
+
+
+
+
+                  </div>
+              </div>
+          </section>
+
+      </li> -->
+
+
+        <!-- <li>
+
+            <div class="nav-first-level-opener">
+                <span>Untermenu öffnen / schließen</span>
+            </div>
+
+            <a href="https://www.kit-ausbildung.de/de/ueber-das-kit">
+              Über das KIT
+            </a>
+
+            <section class="nav-second-level mega-flyout" style="">
+                <div class="content-wrap">
+                    <div class="container container-3-cols">
+                        <div class="column">
+                            <div class="nav-second-level-group">
+                                <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories">
+                                  <img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-star-primary.svg" alt="" width="24" height="24">
+                                  <span>Success Stories</span>
+                                </a>
+                                <div class="nav-second-level-opener">
+                                    <span>Untermenu öffnen / schließen</span>
+                                </div>
+                                <ul style="">
+                                    <li class="">
+                                        <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/von-quito-nach-karsruhe-und-zurueck-1">Unser Auslandspraktikum in Dublin</a>
+                                    </li>
+                                    <li class="">
+                                        <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/azubis-fuer-azubis-1">Glückwunsch und ein Grund zu feiern!</a>
+                                    </li>
+                                    <li class="">
+                                        <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/azubis-fuer-azubis">Azubis für AZUBIS</a>
+                                    </li>
+                                    <li class="">
+                                </ul>
+                            </div>
+                        </div>
+
+                        <div class="column">
+                            <div class="nav-second-level-group">
+                                <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/zahlen-und-fakten">
+                                  <img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-barchart-primary.svg" alt="" width="24" height="24">
+                                  <span>Zahlen und Fakten</span>
+                                </a>
+
+                            </div>
+                        </div>
+
+                        <div class="column">
+                            <div class="nav-second-level-group">
+                                <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/ansprechpartner-kontakt">
+                                  <img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-person-primary.svg" alt="" width="24" height="24">
+                                  <span>Ansprechpartner &amp; Kontakt</span>
+                                </a>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+        </li> -->
+
+    </ul>
+</nav>