Inhaltliche Anpassung des Footers

frontend/_public/src/less/_modules/footer.less

@@ -4,94 +4,120 @@ footer {
     display: none; } }
 
 @media screen and (min-width: 48em) {
-
-  .footer-ribbon {
-    width: 90%;
-    margin: 0 auto;
-    &:after {
-      clear: both;
-      content: '';
-      display: table; }
-    .img--area {
-      width: calc(~'50% - 400px');
-      height: 150px;
-      .wbn--foot-img{
-        display: inline-block;
-        height: 100%;
-        &.wbn-gabel {
-          width: 28px;
-          background: url("@{baseUrlIcon}gabel.svg") bottom center no-repeat; }
-        &.wbn-loeffel {
-          margin-left: 5px;
-          width: 28px;
-          background: url("@{baseUrlIcon}loeffel.svg") center 36px no-repeat; }
-        &.wbn-messer {
-          margin-left: 5px;
-          width: 18px;
-          background: url("@{baseUrlIcon}messer.svg") bottom center no-repeat; }
-        &.wbn-pfannenwender {
-          margin-left: 40px;
-          width: 48px;
-          background: url("@{baseUrlIcon}pfannenwender.svg") bottom center no-repeat; }
-        &.wbn-kanne {
-          margin-left: 40px;
-          width: 84px;
-          background: url("@{baseUrlIcon}kanne.svg") bottom center no-repeat; }
-        &.wbn-mikrowelle {
-          margin-left: 40px;
-          width: 142px;
-          background: url("@{baseUrlIcon}mikrowelle.svg") bottom center no-repeat; }
-        &.wbn-mixer {
-          margin-right: 40px;
-          width: 75px;
-          background: url("@{baseUrlIcon}mixer.svg") bottom center no-repeat; }
-        &.wbn-toaster {
-          margin-right: 40px;
-          width: 120px;
-          background: url("@{baseUrlIcon}toaster.svg") center 61px no-repeat; }
-        &.wbn-wein {
-          margin-right: 5px;
-          width: 59px;
-          background: url("@{baseUrlIcon}wein.svg") center 53px no-repeat; }
-        &.wbn-sekt {
-          margin-right: 40px;
-          width: 46px;
-          background: url("@{baseUrlIcon}sekt.svg") center 47px no-repeat; }
-        &.wbn-tasse {
-          width: 82px;
-          background: url("@{baseUrlIcon}tasse.svg") bottom center no-repeat; } } }
-    .left--box,
-    .right--box {
-      float: left; }
-    .center--box {
-      float: left;
-      width: 800px;
-      height: 150px;
-      .first--headline {
-        margin-top: 35px;
-        font-size: 35px; }
-      .second--headline {
-        font-size: 17.8px; }
+  footer {
+    .footer-ribbon {
+      display: block;
+      width: 90%;
+      margin: 0 auto;
+      &:after {
+        clear: both;
+        content: '';
+        display: table; }
+      .img--area {
+        width: calc(~'50% - 400px');
+        height: 150px;
+        .wbn--foot-img{
+          display: inline-block;
+          height: 100%;
+          &.wbn-gabel {
+            width: 28px;
+            background: url("@{baseUrlIcon}gabel.svg") bottom center no-repeat; }
+          &.wbn-loeffel {
+            margin-left: 5px;
+            width: 28px;
+            background: url("@{baseUrlIcon}loeffel.svg") center 36px no-repeat; }
+          &.wbn-messer {
+            margin-left: 5px;
+            width: 18px;
+            background: url("@{baseUrlIcon}messer.svg") bottom center no-repeat; }
+          &.wbn-pfannenwender {
+            margin-left: 40px;
+            width: 48px;
+            background: url("@{baseUrlIcon}pfannenwender.svg") bottom center no-repeat; }
+          &.wbn-kanne {
+            margin-left: 40px;
+            width: 84px;
+            background: url("@{baseUrlIcon}kanne.svg") bottom center no-repeat; }
+          &.wbn-mikrowelle {
+            margin-left: 40px;
+            width: 142px;
+            background: url("@{baseUrlIcon}mikrowelle.svg") bottom center no-repeat; }
+          &.wbn-mixer {
+            margin-right: 40px;
+            width: 75px;
+            background: url("@{baseUrlIcon}mixer.svg") bottom center no-repeat; }
+          &.wbn-toaster {
+            margin-right: 40px;
+            width: 120px;
+            background: url("@{baseUrlIcon}toaster.svg") center 61px no-repeat; }
+          &.wbn-wein {
+            margin-right: 5px;
+            width: 59px;
+            background: url("@{baseUrlIcon}wein.svg") center 53px no-repeat; }
+          &.wbn-sekt {
+            margin-right: 40px;
+            width: 46px;
+            background: url("@{baseUrlIcon}sekt.svg") center 47px no-repeat; }
+          &.wbn-tasse {
+            width: 82px;
+            background: url("@{baseUrlIcon}tasse.svg") bottom center no-repeat; } } }
+      .left--box,
+      .right--box {
+        float: left; }
+      .center--box {
+        float: left;
+        width: 800px;
+        height: 150px;
+        .first--headline {
+          margin-top: 35px;
+          font-size: 35px; }
+        .second--headline {
+          font-size: 17.8px; }
+      }
     }
-  }
 
-  .footer--top-wrapper {
-    background: @brand-footer;
-    .container {
+    .footer--top-wrapper {
       background: @brand-footer;
-      color: #fff;
-      a, .column--headline {
-        color: #fff; } } }
-  .footer--bottom-wrapper {
-    border-top: 2px solid #fff;
-    background: @brand-payment;
-    .container {
+      .container {
+        background: @brand-footer;
+        color: #fff;
+        a, .column--headline {
+          color: #fff; } } }
+    .footer--bottom-wrapper {
+      border-top: 2px solid #fff;
       background: @brand-payment;
-      color: #fff;
-      a, .column--headline {
-        color: #fff; } } }
+      .container {
+        background: @brand-payment;
+        color: #fff;
+        a, .column--headline {
+          color: #fff; } } }
 
-  .footer-main .footer--column {
-    width: 33%;
-  }
+    &.footer-main {
+      .footer--column {
+        width: 33%;
+        .border--headline {
+          margin: 0 0 20px 0;
+          padding: 0;
+          span {
+            display: block;
+            width: 60px;
+            height: 5px;
+            background: #fff; } }
+        .footer--phone-link {
+          font-weight: 300;
+          display: block;
+          padding-left: 30px;
+          &:before {
+            content: 'Telefon'; } }
+        .footer--mail-link {
+          display: block;
+          padding-left: 30px;
+          &:before {
+            content: 'Kuvert'; } }
+        .footer--address-link {
+          display: block;
+          padding-left: 30px;
+          &:before {
+            content: 'Haus'; } }
+      } } }
 }