From 57936a79b8b4cdc94409c4973f80deec9e10b528 Mon Sep 17 00:00:00 2001
From: akarl <akarl@cycro-digital-solutions.com>
Date: Mon, 27 Jan 2020 15:31:00 +0100
Subject: [PATCH] Footer Stilleiste eingespielt

---
 frontend/_public/src/img/icons/gabel.svg      |  1 +
 frontend/_public/src/img/icons/kanne.svg      |  1 +
 frontend/_public/src/img/icons/loeffel.svg    |  1 +
 frontend/_public/src/img/icons/messer.svg     |  1 +
 frontend/_public/src/img/icons/mikrowelle.svg |  1 +
 frontend/_public/src/img/icons/mixer.svg      |  1 +
 .../_public/src/img/icons/pfannenwender.svg   |  1 +
 frontend/_public/src/img/icons/sekt.svg       |  1 +
 frontend/_public/src/img/icons/tasse.svg      |  1 +
 frontend/_public/src/img/icons/toaster.svg    |  1 +
 frontend/_public/src/img/icons/wein.svg       |  1 +
 frontend/_public/src/less/_mixin/fonts.less   | 10 +--
 .../_public/src/less/_modules/footer.less     | 80 +++++++++++++++++--
 frontend/_public/src/less/_modules/page.less  |  8 +-
 .../src/less/_variables/variables.less        |  6 ++
 frontend/index/index.tpl                      | 20 ++++-
 16 files changed, 123 insertions(+), 12 deletions(-)
 create mode 100644 frontend/_public/src/img/icons/gabel.svg
 create mode 100644 frontend/_public/src/img/icons/kanne.svg
 create mode 100644 frontend/_public/src/img/icons/loeffel.svg
 create mode 100644 frontend/_public/src/img/icons/messer.svg
 create mode 100644 frontend/_public/src/img/icons/mikrowelle.svg
 create mode 100644 frontend/_public/src/img/icons/mixer.svg
 create mode 100644 frontend/_public/src/img/icons/pfannenwender.svg
 create mode 100644 frontend/_public/src/img/icons/sekt.svg
 create mode 100644 frontend/_public/src/img/icons/tasse.svg
 create mode 100644 frontend/_public/src/img/icons/toaster.svg
 create mode 100644 frontend/_public/src/img/icons/wein.svg

diff --git a/frontend/_public/src/img/icons/gabel.svg b/frontend/_public/src/img/icons/gabel.svg
new file mode 100644
index 0000000..2bfda82
--- /dev/null
+++ b/frontend/_public/src/img/icons/gabel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25.054" height="110.27" viewBox="0 0 25.054 110.27"><defs><style>.a{fill:#14438c;}</style></defs><g transform="translate(0 0)"><path class="a" d="M14.473,24.185l.145-22.29A1.832,1.832,0,0,0,12.785.062H12.34A1.832,1.832,0,0,0,10.521,1.88l-.137,22.305-5.5.057L5.925,2.015A1.832,1.832,0,0,0,4.09.11H4.053A1.832,1.832,0,0,0,2.245,1.759L.088,24.218S0,28.479,0,28.85a12.018,12.018,0,0,0,4.3,9.734c9.344,10.583,2.845,21.49,2.827,24.06-.024,2.862-1.033,41.974-1.033,41.974h.031c0,.031-.027.057-.013.1a5.771,5.771,0,0,0,5.878,5.548,6,6,0,0,0,5.975-5.614c0-.06-.031-.092-.015-.137,0,0-.432-38.535-.409-41.842,0-3-5.343-15.445,3.813-24.808l.051-.051a12.435,12.435,0,0,0,3.633-8.294c.011-.225.015-4.095.015-4.095L23.2,1.686A1.832,1.832,0,0,0,21.365,0H21.07a1.832,1.832,0,0,0-1.832,1.882l.643,22.063Z" transform="translate(0.002 0)"/></g></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/kanne.svg b/frontend/_public/src/img/icons/kanne.svg
new file mode 100644
index 0000000..cb36ccb
--- /dev/null
+++ b/frontend/_public/src/img/icons/kanne.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="78.716" height="127.027" viewBox="0 0 78.716 127.027"><defs><style>.a{fill:#14438c;}</style></defs><path class="a" d="M98.191,43.47H77.533l-16.9,9.809h54.463Z" transform="translate(-48.549 -34.808)"/><path class="a" d="M179.13,8.594l.889-6.876A1.594,1.594,0,0,0,178.441,0h-2.632a1.594,1.594,0,0,0-1.578,1.718l.889,6.876Z" transform="translate(-137.814)"/><path class="a" d="M78.482,111.644a9.871,9.871,0,0,0-4.319-6.236l-.135-.088A9.718,9.718,0,0,0,66.6,103.99c-.142.032-.279.067-.416.1l.625-2.911H51.381L48.1,142.835h-2.63l3.282-41.655H29.866l3.282,41.655H30.52L27.238,101.18H0l14.16,11.005,6.53,30.664a.754.754,0,0,0-.608.741v2.961a.753.753,0,0,0,.75.754h0l-9.015,60.74h15.41L30.559,147.3h2.624l-3.332,60.746H48.77L45.438,147.3h2.624l3.332,60.746H66.8L57.77,147.264a.753.753,0,0,0,.508-.712v-2.961a.755.755,0,0,0-.371-.649l1.762-8.265a9.688,9.688,0,0,0,2.082.229,9.913,9.913,0,0,0,2.143-.235,9.789,9.789,0,0,0,6.183-4.358l7.08-11.18A9.942,9.942,0,0,0,78.482,111.644ZM74.011,117.1l-7.08,11.182a6.073,6.073,0,0,1-6.474,2.7l4.758-22.336a6.083,6.083,0,0,1,6.8-.143l.135.086A6.2,6.2,0,0,1,74.011,117.1Z" transform="translate(0 -81.019)"/></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/loeffel.svg b/frontend/_public/src/img/icons/loeffel.svg
new file mode 100644
index 0000000..febd388
--- /dev/null
+++ b/frontend/_public/src/img/icons/loeffel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.339" height="114.837" viewBox="0 0 22.339 114.837"><defs><style>.a{fill:#14438c;}</style></defs><g transform="translate(0)"><path class="a" d="M15.16,38.382l-.733.333-.137.8C8.815,73.394,21.144,103.194,12,114.27a1.466,1.466,0,0,1-1.213.566h-.011a2.209,2.209,0,0,1-1.785-.744C-.122,103.5,13.208,67.554,7.65,39.339l-.137-.733-.663-.313C2.014,35.887-.033,28.152,0,19.463.031,8.91,5.173,0,11.241,0c2.84.009,5.555,1.942,7.651,5.449a27.628,27.628,0,0,1,3.444,14.1c-.026,8.851-2.2,16.594-7.177,18.837Z" transform="translate(0.002)"/></g></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/messer.svg b/frontend/_public/src/img/icons/messer.svg
new file mode 100644
index 0000000..958f8ea
--- /dev/null
+++ b/frontend/_public/src/img/icons/messer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.89" height="110.924" viewBox="0 0 11.89 110.924"><defs><style>.a{fill:#14438c;}</style></defs><g transform="translate(0)"><path class="a" d="M11.519,109.577c-.09.328-.432,1.347-1.118,1.347a8.325,8.325,0,0,1-7.023-7.946L4.593,61.092c-.066-.04-4.764-3.809-4.593-9.2C.156,46.924.383,20.561.841,9.4,1.143,1.832,8.549.31,11.885,0Z" transform="translate(0.005)"/></g></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/mikrowelle.svg b/frontend/_public/src/img/icons/mikrowelle.svg
new file mode 100644
index 0000000..735d4f0
--- /dev/null
+++ b/frontend/_public/src/img/icons/mikrowelle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="137.097" height="109.317" viewBox="0 0 137.097 109.317"><defs><style>.a{fill:#14438c;}</style></defs><rect class="a" width="13.4" height="13.4" rx="6.7" transform="translate(112.397 24.215)"/><rect class="a" width="13.4" height="13.4" rx="6.7" transform="translate(112.397 48.794)"/><rect class="a" width="86.843" height="76.887" rx="38.443" transform="translate(13.733 12.777)"/><path class="a" d="M123.035,0H14.061A14.063,14.063,0,0,0,0,14.059V88.373a14.063,14.063,0,0,0,14.059,14.061h4.993a1.871,1.871,0,0,0-.03.29V107.4a1.907,1.907,0,1,0,3.815,0v-4.669a1.871,1.871,0,0,0-.03-.29H115a1.871,1.871,0,0,0-.03.29v4.677a1.907,1.907,0,0,0,3.815,0v-4.677a1.871,1.871,0,0,0-.03-.29h4.291A14.061,14.061,0,0,0,137.1,88.373V14.061A14.061,14.061,0,0,0,123.035,0ZM102.1,79.775A11.425,11.425,0,0,1,90.687,91.187H23.621A11.425,11.425,0,0,1,12.209,79.775v-57.1a11.425,11.425,0,0,1,11.412-11.41H90.687A11.425,11.425,0,0,1,102.1,22.676Zm25.219-24.206a8.159,8.159,0,0,1-8.149,8.149h-.148a8.159,8.159,0,0,1-8.149-8.149v-.148a8.157,8.157,0,0,1,8.149-8.149h.148a8.157,8.157,0,0,1,8.149,8.149Zm0-24.583a8.159,8.159,0,0,1-8.149,8.149h-.148a8.159,8.159,0,0,1-8.149-8.149v-.148a8.157,8.157,0,0,1,8.149-8.149h.148a8.157,8.157,0,0,1,8.149,8.149Z"/></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/mixer.svg b/frontend/_public/src/img/icons/mixer.svg
new file mode 100644
index 0000000..723fe80
--- /dev/null
+++ b/frontend/_public/src/img/icons/mixer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="66.702" height="144.521" viewBox="0 0 66.702 144.521"><defs><style>.a{fill:#14438c;}</style></defs><g transform="translate(-0.011)"><g transform="translate(0.011 0)"><path class="a" d="M130.975,516.128a8.717,8.717,0,0,0-3.715-5.975l-3.749,7.685a1.928,1.928,0,0,1-3.46-1.688l3.625-7.428a8.844,8.844,0,0,0-1.333-.111h-1.127a8.754,8.754,0,0,0-8.632,7.518l-.03.214a8.717,8.717,0,0,0,8.63,9.919h1.187a8.715,8.715,0,0,0,8.638-9.917Z" transform="translate(-88.427 -399.861)"/><path class="a" d="M66.609,459.765l-4.642-33.46A10.977,10.977,0,0,0,51.1,416.83H15.625a10.977,10.977,0,0,0-10.867,9.475L.116,459.765a10.981,10.981,0,0,0,10.865,12.5H55.742a10.981,10.981,0,0,0,10.867-12.5Zm-23.191-6.089A12.534,12.534,0,0,1,33.954,458H32.769a12.561,12.561,0,0,1-12.437-14.3l.03-.214A12.606,12.606,0,0,1,32.79,432.643h1.125a12.606,12.606,0,0,1,12.429,10.838l.03.214A12.576,12.576,0,0,1,43.418,453.677Z" transform="translate(-0.011 -327.743)"/><path class="a" d="M94.113,380.25H71.6c-3.475,0-6.411.756-6.9,1.774L63,386.782h39.707l-1.7-4.758C100.533,381.006,97.59,380.25,94.113,380.25Z" transform="translate(-49.505 -298.912)"/><path class="a" d="M35.783,128.152c.586,5.433,4.183,9.476,8.43,9.476H71.734c4.247,0,7.846-4.043,8.43-9.476l4.369-52.7a14.226,14.226,0,0,0,.056-2.369H31.359a14.231,14.231,0,0,0,.058,2.369Z" transform="translate(-24.624 -57.424)"/><path class="a" d="M76.194,18.58H39.937c-4.538,0-8.156,4.546-8.487,10.129H84.679C84.348,23.126,80.73,18.58,76.194,18.58Z" transform="translate(-24.715 -14.599)"/><path class="a" d="M135.3,0h-9.242A2.6,2.6,0,0,0,123.8,2.691h13.754A2.591,2.591,0,0,0,135.3,0Z" transform="translate(-97.329 0)"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/pfannenwender.svg b/frontend/_public/src/img/icons/pfannenwender.svg
new file mode 100644
index 0000000..7ba8f1c
--- /dev/null
+++ b/frontend/_public/src/img/icons/pfannenwender.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43.613" height="147.417" viewBox="0 0 43.613 147.417"><defs><style>.a{fill:#14438c;}</style></defs><g transform="translate(-0.011)"><g transform="translate(0.011 0)"><path class="a" d="M34.576,0H9.066A9.053,9.053,0,0,0,.122,10.463l3.923,29.19A13.52,13.52,0,0,0,17.411,51.069h.117L13.6,138.913a8.145,8.145,0,0,0,8.135,8.5h.172a8.145,8.145,0,0,0,8.137-8.5L26.122,51.069h.117A13.521,13.521,0,0,0,39.6,39.65l3.917-29.187A9.055,9.055,0,0,0,34.576,0ZM14.787,34.606a2.152,2.152,0,0,1-4.3,0V8.782a2.152,2.152,0,1,1,4.3,0ZM19.669,8.782a2.152,2.152,0,1,1,4.3,0V34.606a2.152,2.152,0,0,1-4.3,0Zm2.152,132.1a2.325,2.325,0,1,0,0-.01ZM33.156,34.606a2.152,2.152,0,0,1-4.3,0V8.782a2.152,2.152,0,1,1,4.3,0Z" transform="translate(-0.011 0)"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/sekt.svg b/frontend/_public/src/img/icons/sekt.svg
new file mode 100644
index 0000000..34bd4af
--- /dev/null
+++ b/frontend/_public/src/img/icons/sekt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="39.112" height="105.613" viewBox="0 0 39.112 105.613"><defs><style>.a{fill:#14438c;}</style></defs><g transform="translate(0 0)"><path class="a" d="M18.917,105.533a87.173,87.173,0,0,1-11.673-.9,44.276,44.276,0,0,1-4.458-.838C1.742,103.531,0,103.081,0,101.626c0-1.506,1.811-2.071,2.681-2.346a53.682,53.682,0,0,1,6.857-1.459c5.535-.913,5.916-3.577,6.178-5.539.077-1.075.409-20.18.409-26.041v-.066c0-1.331,0-2.482-4.246-6.155C5.189,54.236,1.695,43.927,1.506,29.384A123.439,123.439,0,0,1,4.11,3.56,3.4,3.4,0,0,1,7.332.877L12.393.312a65.689,65.689,0,0,1,14.324,0l5.061.565A3.4,3.4,0,0,1,35,3.56a123.922,123.922,0,0,1,2.611,25.825c-.2,14.543-3.69,24.853-10.38,30.635-4.248,3.673-4.246,4.826-4.246,6.159v.066c0,5.861.331,24.966.409,26.037.262,1.96.642,4.628,6.177,5.541A54.166,54.166,0,0,1,36.43,99.28c.87.275,2.681.847,2.681,2.346s-1.77,1.913-2.824,2.171a45.989,45.989,0,0,1-4.551.8,110.268,110.268,0,0,1-12.155.93Z" transform="translate(0 0.08)"/></g></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/tasse.svg b/frontend/_public/src/img/icons/tasse.svg
new file mode 100644
index 0000000..c3c394e
--- /dev/null
+++ b/frontend/_public/src/img/icons/tasse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="76.028" height="44.755" viewBox="0 0 76.028 44.755"><defs><style>.a{fill:#14438c;}</style></defs><path class="a" d="M93.94,243.042a4.04,4.04,0,0,0,4.04,4.04h17.464a4.04,4.04,0,0,0,4.04-4.04V243H93.94Z" transform="translate(-78.217 -202.327)"/><path class="a" d="M63.995,1.841h-7V0H0V23.768A16.041,16.041,0,0,0,16.041,39.809H40.95A16.044,16.044,0,0,0,56.822,26.088l7.173,0A12.051,12.051,0,0,0,76.028,14.06v-.184A12.051,12.051,0,0,0,63.995,1.841ZM70.021,14.06a6.026,6.026,0,0,1-6.026,6.026h-7V7.867h7a6.026,6.026,0,0,1,6.026,6.016Z"/></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/toaster.svg b/frontend/_public/src/img/icons/toaster.svg
new file mode 100644
index 0000000..3e1e5da
--- /dev/null
+++ b/frontend/_public/src/img/icons/toaster.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="119.025" height="89.633" viewBox="0 0 119.025 89.633"><defs><style>.a{fill:#14438c;}</style></defs><path class="a" d="M119.019,53.029A19.869,19.869,0,0,0,99.151,33.16H19.869A19.869,19.869,0,0,0,0,53.029v55.435a3.485,3.485,0,0,0,3.483,3.485H9.406v2.1a1.866,1.866,0,1,0,3.732,0V111.94h90.122v2.1a1.866,1.866,0,1,0,3.732,0v-2.1h8.552a3.485,3.485,0,0,0,3.483-3.485ZM27.064,84.608H22.69V99.431a1.866,1.866,0,0,1-3.732,0V84.608H14.591a1.866,1.866,0,1,1,0-3.732h4.374V47.265a1.866,1.866,0,0,1,3.732,0V80.883h4.374a1.866,1.866,0,1,1,0,3.732Z" transform="translate(0 -26.286)"/><rect class="a" width="77.03" height="5.801" transform="translate(20.994)"/></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/img/icons/wein.svg b/frontend/_public/src/img/icons/wein.svg
new file mode 100644
index 0000000..2e9139e
--- /dev/null
+++ b/frontend/_public/src/img/icons/wein.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="54.854" height="100.029" viewBox="0 0 54.854 100.029"><defs><style>.a{fill:#14438c;}</style></defs><g transform="translate(0)"><path class="a" d="M27.314,100.029c-6.277,0-12.175-.25-16.635-.7A41.511,41.511,0,0,1,5.5,98.537c-.925-.223-2.847-.687-2.847-2.212,0-1.576,2.018-2.03,3.1-2.273a47.857,47.857,0,0,1,5.724-.807c10.848-1.8,12.1-5.315,12.2-5.71a9.859,9.859,0,0,0,.424-2.386c.108-2.315.381-22.487-.325-29.568-.026-.277-.038-.543-.049-.8-.075-1.739-.158-3.71-7.517-8.046-1.55-.913-3.016-1.718-4.31-2.435-3.7-2.033-6.622-3.639-8.655-6.145C1.108,35.511.1,32-.027,26.775-.114,22.651.8,16.534,1.6,11.132,2.063,8,2.5,5.044,2.675,2.941A3.485,3.485,0,0,1,6.368,0H49.716a3.487,3.487,0,0,1,3.7,3.049c.1,2.087.32,4.915.557,7.917.437,5.508.929,11.752.837,15.809-.12,5.272-1.139,8.8-3.3,11.459-2.058,2.52-5.028,4.141-8.789,6.192-1.31.715-2.663,1.452-4.152,2.318-7.507,4.359-7.479,6.468-7.458,8.328v.376c0,5.441-.256,18.183-.393,25.029-.054,2.609-.094,4.684-.092,4.914a9.438,9.438,0,0,0,.32,2.146c.106.395,1.355,3.9,12.2,5.708a47.757,47.757,0,0,1,5.729.807c1.085.244,3.1.7,3.1,2.273,0,1.525-1.922,1.99-2.847,2.212a41.461,41.461,0,0,1-5.176.788C39.5,99.779,33.59,100.029,27.314,100.029Z" transform="translate(0.033)"/></g></svg>
\ No newline at end of file
diff --git a/frontend/_public/src/less/_mixin/fonts.less b/frontend/_public/src/less/_mixin/fonts.less
index fb448cf..43c7a18 100644
--- a/frontend/_public/src/less/_mixin/fonts.less
+++ b/frontend/_public/src/less/_mixin/fonts.less
@@ -5,11 +5,11 @@
 
 @font-face {
   font-family: 'wbn-icon';
-  src:  url('../../fonts/wbn-icon.eot?ix8d2v');
-  src:  url('../../fonts/wbn-icon.eot?ix8d2v#iefix') format('embedded-opentype'),
-    url('../../fonts/wbn-icon.ttf?ix8d2v') format('truetype'),
-    url('../../fonts/wbn-icon.woff?ix8d2v') format('woff'),
-    url('../../fonts/wbn-icon.svg?ix8d2v#wbn-icon') format('svg');
+  src:  url('@{baseUrlFonts}wbn-icon.eot?ix8d2v');
+  src:  url('@{baseUrlFonts}wbn-icon.eot?ix8d2v#iefix') format('embedded-opentype'),
+    url('@{baseUrlFonts}wbn-icon.ttf?ix8d2v') format('truetype'),
+    url('@{baseUrlFonts}wbn-icon.woff?ix8d2v') format('woff'),
+    url('@{baseUrlFonts}wbn-icon.svg?ix8d2v#wbn-icon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
diff --git a/frontend/_public/src/less/_modules/footer.less b/frontend/_public/src/less/_modules/footer.less
index 2e65379..6644a1b 100644
--- a/frontend/_public/src/less/_modules/footer.less
+++ b/frontend/_public/src/less/_modules/footer.less
@@ -1,10 +1,80 @@
-
-
-
-
-
+footer {
+  border: none!important;
+  .footer-ribbon {
+    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--top-wrapper {
     background: @brand-footer;
     .container {
diff --git a/frontend/_public/src/less/_modules/page.less b/frontend/_public/src/less/_modules/page.less
index f987715..3b2b61b 100644
--- a/frontend/_public/src/less/_modules/page.less
+++ b/frontend/_public/src/less/_modules/page.less
@@ -12,8 +12,14 @@
   font-weight: bold; }
 .cds--upper {
   text-transform: uppercase; }
-.cds--justify {
+.cds--align-justify {
   text-align: justify; }
+.cds--align-left {
+  text-align: left; }
+.cds--align-right {
+  text-align: right; }
+.cds--align-center {
+  text-align: center; }
 
 
 @media (min-width: 48em) {
diff --git a/frontend/_public/src/less/_variables/variables.less b/frontend/_public/src/less/_variables/variables.less
index 80e717e..4bff93b 100644
--- a/frontend/_public/src/less/_variables/variables.less
+++ b/frontend/_public/src/less/_variables/variables.less
@@ -5,3 +5,9 @@
 
 @link-red     :   #D9400B;
 
+/* *** Paths ******************************************************************************************************** */
+
+@baseUrlImage   : "../../img/";
+@baseUrlIcon    : "../../img/icons/";
+@baseUrlLogo    : "../../img/logos/";
+@baseUrlFonts   : "../../fonts/";
\ No newline at end of file
diff --git a/frontend/index/index.tpl b/frontend/index/index.tpl
index 04a1550..b668e6c 100644
--- a/frontend/index/index.tpl
+++ b/frontend/index/index.tpl
@@ -144,7 +144,25 @@
             {block name="frontend_index_footer"}
                 <footer class="footer-main">
                     <div class="footer-ribbon">
-                        Bilder
+                        <div class="img--area left--box cds--align-right">
+                            <span class="wbn--foot-img wbn-gabel"></span>
+                            <span class="wbn--foot-img wbn-loeffel"></span>
+                            <span class="wbn--foot-img wbn-messer"></span>
+                            <span class="wbn--foot-img wbn-pfannenwender"></span>
+                            <span class="wbn--foot-img wbn-kanne"></span>
+                            <span class="wbn--foot-img wbn-mikrowelle"></span>
+                        </div>
+                        <div class="txt--area center--box cds--align-center">
+                            <span class="first--headline cds--block cds--bold">HORN-GASTRONOMIESHOP</span>
+                            <span class="second--headline cds--block">Ihr Shop für Gastronomiebedarf, Hotellerie und Catering</span>
+                        </div>
+                        <div class="img--area right--box cds--align-left">
+                            <span class="wbn--foot-img wbn-mixer"></span>
+                            <span class="wbn--foot-img wbn-toaster"></span>
+                            <span class="wbn--foot-img wbn-wein"></span>
+                            <span class="wbn--foot-img wbn-sekt"></span>
+                            <span class="wbn--foot-img wbn-tasse"></span>
+                        </div>
                     </div>
                     {block name="frontend_index_footer_container"}
                         {include file='frontend/index/footer.tpl'}