Header finalisiert. Aufteilung optimiert.

ToDo: SubNavi mit Bildern (nur 2te Ebene)

frontend/_public/src/less/_mixin/fonts.less

@@ -1,3 +1,8 @@
+/* *** FONTS / BASICS *********************************************************************************************** */
+
+#fontsAnker {
+  color: red; }
+
 @font-face {
   font-family: 'wbn-icon';
   src:  url('../../fonts/wbn-icon.eot?ix8d2v');

frontend/_public/src/less/_modules/header.less

@@ -1,8 +1,15 @@
 /* *** HEADER / BASICS ********************************************************************************************** */
 
+#headerAnker {
+  color: red; }
+
 /* Header */
 .header-main {
   background: @brand-primary;
+  .logo-main {
+    width: 20%; }
+  .shop--navigation {
+    width: 80%; }
   > div {
     background: @brand-primary; }
   .header--navigation {
@@ -15,16 +22,19 @@
 
 /* Suche */
 .entry--search {
+  margin-top: 1.5em!important;
   background: @brand-primary!important;
   .main-search--form {
+    padding-top: 1em;
     box-shadow: none!important;
     label{
-      display: block;
-      width: 10%;
-      padding: 0.7em 0.5em 0 0;
+      display: inline-block;
+      width: auto;
+      padding: .5em 1em 0 0;
       float: left;
       text-transform: uppercase;
       font-weight: 700;
+      font-size: 16px;
       color: #fff; }
     input{
       width: 80%!important;
@@ -38,8 +48,9 @@
       padding-bottom: 0.2em!important;
       height: 2em!important; }
     button{
-      width: 10%!important;
+      width: 8% !important;
       float: left;
+      right: 4%!important;
       i{
         color: #fff; } } } }
 
@@ -64,40 +75,71 @@
             font-size: 35px; } } } } } }
 
 /* Service Navigation */
-.navigation--list {
-  .navigation--entry {
-    .account--link {
-      text-align: center;
-      background: transparent;
+
+.shop--navigation {
+  .navigation--list {
+    .navigation--entry {
+      height: 90px;
+      overflow: hidden;
       padding: 0 5px;
-      border-color: transparent;
-      .account--display {
-        display: block;
+      margin: 0 0 0 10px;
+      .account--link {
+        text-align: center;
+        background: transparent;
+        padding: 0 5px;
+        border-color: transparent;
+        .account--display {
+          display: block;
+          color: #fff;
+          font-weight: 300;
+          padding: 2px 5px!important; }
+        .wbn-icon-set {
+          display: block;
+          height: 35px!important;
+          margin-bottom: 2px;
+          &:before {
+            font-size: 35px;
+            color: #fff; } } }
+      .cart--link {
+        text-align: center;
+        background: transparent;
+        padding: 2px 5px;
+        border-color: transparent;
+        .cart--amount {
+          display: block;
+          color: #fff;
+          font-weight: 300;
+          padding: 2px 5px!important; }
+        .wbn-icon-set {
+          display: block;
+          height: 35px!important;
+          &:before {
+            font-size: 35px;
+            color: #fff; } } }
+      .cds--info-block {
+        text-align: center;
         color: #fff;
-        font-weight: 300;
-        padding: 2px 5px!important; }
-      .wbn-icon-set {
-        display: block;
-        height: 35px!important;
-        margin-bottom: 2px;
-        &:before {
-          font-size: 35px;
-          color: #fff; } } }
-    .cart--link {
-      text-align: center;
-      background: transparent;
-      padding: 2px 5px;
-      border-color: transparent;
-      .cart--amount {
-        display: block;
-        color: #fff;
-        font-weight: 300;
-        padding: 2px 5px!important; }
-      .wbn-icon-set {
-        display: block;
-        height: 35px!important;
-        &:before {
-          font-size: 35px;
-          color: #fff; } } } } }
+        .sw-icon-set {
+          display: block;
+          height: 35px!important;
+          margin-bottom: 2px;
+          &:before {
+            font-size: 30px;
+            color: #fff; }
+          &.icon--truck {
+            transform: scaleX(-1);
+            min-height: 45px;
+            padding-top: 0;
+            margin: -10px 0 12px 0;
+            &:before {
+              font-size: 60px; } }
+          &.icon--phone {
+            transform: scaleX(-1);
+            min-height: 45px;
+            padding-top: 5px;
+          &:before {
+            font-size: 30px; } } } }
+      &.entry--delivery {
+        margin-right: 1%; } } } }
 
 .cssAnker {}

frontend/_public/src/less/_modules/page.less

@@ -1,6 +1,21 @@
+/* *** PAGE / BASICS ************************************************************************************************ */
+
+#pageAnker {
+  color: red; }
+
 .container {
-  width: 100%;
-}
+  width: 100%; }
+
+.cds--block {
+  display: block; }
+.cds--bold {
+  font-weight: bold; }
+.cds--upper {
+  text-transform: uppercase; }
+.cds--justify {
+  text-align: justify; }
+
+
 @media (min-width: 48em) {
   .container {
     max-width: calc(~"100% - 24em");