WIP: Pixel header now fully responsive.

Slim header most likely broken at this point.

assets/css/style.css

@@ -523,7 +523,7 @@ li {
 }
 
 .content__inner_box {
-    margin: 0 1.5rem;
+    margin: 2.5rem 1.5rem 0 1.5rem;
 }
 
 .nav__wrapper, .header__wrapper, .content__box, .footer__wrapper {
@@ -548,47 +548,6 @@ li {
     background-color: var(--wtf-night-blue);
     color: var(--wtf-light-grey);
 }
-
-.content__inner_kachel_box {
-    margin: 0 1.5rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-
-.kachel {
-    padding: 1rem;
-    margin: 1rem;
-    width: 41%;
-    min-width: 120px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.kachel__icon {
-    background-color: #fff;
-    width: 105px;
-    height: 85px;
-    border-radius: 50px;
-    padding-top: 15px;
-    text-align: center;
-    align-self: center;
-}
-
-.kachel__icon.-light_grey {
-    background-color: var(--wtf-light-grey);
-}
-
-.kachel__icon.-orange {
-    background-color: var(--wtf-orange);
-}
-
-.kachel__icon.-light_blue {
-    background-color: var(--wtf-light-blue);
-}
 /* main - Ende */
 
 /* footer - Start */
@@ -692,6 +651,10 @@ footer {
     .secondary_nav__navlist {
         margin-right: 0.5rem;
     }
+
+    .content__inner_box {
+        margin-top: 2.5rem;
+    }
 }
 
 @media screen and (max-width: 1044px) and (min-width: 960px) {
@@ -702,7 +665,7 @@ footer {
     .bg_box__unicorns {
         background-image: url("../images/white_unicorns.svg");
         background-size: auto 150%;
-        background-position: top -100px right -800px ;
+        background-position: top -100px right -580px;
     }
 
     .header__top_box .header__button {
@@ -734,7 +697,7 @@ footer {
     .bg_box__unicorns {
         background-image: url("../images/white_unicorns.svg");
         background-size: auto 150%;
-        background-position: top -100px right -800px;
+        background-position: top -100px right -630px;
     }
 
     .header__claim {
@@ -746,7 +709,12 @@ footer {
     .header__sub_claim {
         grid-column: 1 / span 5;
         padding: 0;
-        margin: 0 1.5rem;
+        /*margin: 0 1.5rem;*/
+        margin: 2rem 1.5rem -3rem 1.5rem;
+    }
+
+    .content__inner_box {
+        margin-top: 2.5rem;
     }
 
     main {
@@ -806,6 +774,10 @@ footer {
     .secondary_nav__navlist {
         margin-right: 0.5rem;
     }
+
+    .content__inner_box {
+        margin: 2.5rem 1.5rem 0 1.5rem;
+    }
 }
 
 @media screen and (max-width: 789px) and (min-width: 596px) {
@@ -819,12 +791,12 @@ footer {
         justify-content: center;
     }
 
-    main {
+    .header__bg_box {
-        margin: 0;
+        background-image: none;
     }
 
-    .kachel {
+    main {
-        width: auto
+        margin: 0;
     }
 
     .bg_box__top_bar_left,
@@ -840,9 +812,19 @@ footer {
     }
 
     .header__claim {
-        margin: 1.5rem;
+        margin: 1.2rem 1.5rem 0 1.5rem;
         grid-row: 3 / span 1;
         grid-column: 1 / span 5;
+        background: var(--wtf-dark-blue);
+    }
+
+    .header__claim h2 span {
+        padding: 0 1.5rem;
+    }
+
+    .header__claim p {
+        margin: 0;
+        padding: 1.5rem;
     }
 
     .header__sub_claim {
@@ -850,11 +832,6 @@ footer {
         padding: 0;
         margin: 0 1.5rem 0 1.5rem;
     }
-    .header__claim p {
-        background: var(--wtf-dark-blue);
-        margin: 30px 0 -30px 0;
-        padding: 30px;
-    }
 
     .sub_claim__box {
         padding-bottom: 2.5rem;
@@ -883,6 +860,10 @@ footer {
     .primary_nav__navlist {
         display: flex !important;
     }
+
+    .content__inner_box {
+        margin: -0.5rem 1.5rem 0 1.5rem;
+    }
 }
 
 @media screen and (max-width: 595px) {
@@ -894,6 +875,10 @@ footer {
         display: none;
     }
 
+    .header__primary_nav {
+        background-color: transparent;
+    }
+
     .primary_nav__members, .primary_nav__lang_switch {
         display: block;
     }
@@ -904,10 +889,25 @@ footer {
         justify-content: center;
     }
 
+    .header__bg_box {
+        background-image: none;
+    }
+
     .header__claim {
-        margin: 0 0.5rem 0.5rem 0.5rem;
+        margin: 0.5rem 0.5rem 0 0.5rem;
         grid-row: 3 / span 1;
         grid-column: 1 / span 5;
+        background: var(--wtf-dark-blue);
+    }
+
+    .header__claim h2 span {
+        padding: 0 1.5rem;
+    }
+
+    .header__claim p {
+        margin: 0;
+        padding: 1.5rem;
+        background: var(--wtf-dark-blue);
     }
 
     .header__sub_claim {
@@ -919,20 +919,11 @@ footer {
     .header__claim h2, .header__sub_claim h2 {
         font-size: 2rem;
     }
-    .header__claim p {
-        background: var(--wtf-dark-blue);
-        margin: 25px 0 -20px 0;
-        padding: 20px;
-    }
 
     main {
         margin-top: 0.75rem;
     }
 
-    .kachel {
-        width: auto
-    }
-
     .bg_box__top_bar_left,
     .bg_box__top_bar_middle,
     .bg_box__top_bar_right,
@@ -1018,7 +1009,11 @@ footer {
     }
 
     .primary_nav__navlink:hover {
-        color: var(--wtf-light-grey);
+        color: var(--wtf-mid-grey);
     }
     /* mobile nav - Ende */
+
+    .content__inner_box {
+        margin: -0.5rem 1.5rem 0 1.5rem;
+    }
 }

content/contents.lr

@@ -6,7 +6,7 @@ claim_heading: ## <span>Werde <em>Teilchen&shy;beschleu&shy;nigerIn</em></span><
 ---
 claim_content: Booste Projekte mit Unterstütung von über 150 GenossInnen<br>Genossen&shy;schaftlich & solidarisch.
 ---
-subclaim_heading: ## Werkkooperative der Technikfreundinnen –<br />WTF Kooperative eG
+subclaim_heading: ## Werk&shy;koopera&shy;tive der Technik&shy;freundinnen –<br />WTF Koopera&shy;tive eG
 ---
 subclaim_content: