diff --git a/mockup-css/css/ecom.css b/mockup-css/css/ecom.css
new file mode 100644
index 0000000..c79d09c
--- /dev/null
+++ b/mockup-css/css/ecom.css
@@ -0,0 +1,479 @@
+:root {
+ font-family: "Fira Sans";
+ line-height: 1.15;
+
+ --u5: calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5 );
+ --u4: calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
+ --u3: calc(1em * 1.5 * 1.5 * 1.5);
+ --u2: calc(1em * 1.5 * 1.5);
+ --u1: calc(1em * 1.5);
+ --u0: calc(1em);
+ --u-1: calc(1em * 0.666);
+ --u-2: calc(1em * 0.666 * 0.666);
+ --u-3: calc(1em * 0.666 * 0.666 * 0.666);
+ --u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666);
+
+
+ --root-c-base: #ecf0f1;
+ --root-c-base-highlight: #bdc3c7;
+
+ --root-c-primary: #1abc9c;
+ --root-c-primary-highlight: #16a085;
+
+ --root-c-secondary: #9b59b6;
+ --root-c-secondary-highlight: #8e44ad;
+
+ --root-c-black: #2c3e50;
+ --root-c-black-highlight: #34495e;
+
+
+ --c-base: var(--root-c-base);
+ --c-base-highlight: var(--root-c-base-highlight);
+
+ --c-primary:var(--root-c-primary);
+ --c-primary-highlight: var(--root-c-primary-highlight);
+
+ --c-secondary: var(--c-secondary);
+ --c-secondary-highlight: var(--root-c-secondary-highlight);
+
+ --c-black: var(--root-c-black);
+ --c-black-highlight: var(--root-c-black-highlight);
+}
+
+.primary {
+ --c-base: var(--root-c-base);
+ --c-base-highlight: var(--root-c-base-highlight);
+
+ --c-primary:var(--root-c-primary);
+ --c-primary-highlight: var(--root-c-primary-highlight);
+
+ --c-secondary: var(--c-secondary);
+ --c-secondary-highlight: var(--root-c-secondary-highlight);
+
+ --c-black: var(--root-c-black);
+ --c-black: var(--root-c-black-highlight);
+}
+
+.secondary {
+ --c-base: var(--root-c-base);
+ --c-base-highlight: var(--root-c-base-highlight);
+
+ --c-primary:var(--root-c-secondary);
+ --c-primary-highlight: var(--root-c-secondary-highlight);
+
+ --c-secondary: var(--root-c-primary);
+ --c-secondary-highlight: var(--root-c-primary-highlight);
+
+ --c-black: var(--root-c-black);
+ --c-black-highlight: var(--root-c-black-highlight);
+}
+
+.inverted {
+ --c-base: var(--root-c-black);
+ --c-base-highlight: var(--root-c-black-highlight);
+
+ --c-primary:var(--root-c-primary);
+ --c-primary-highlight: var(--root-c-primary-highlight);
+
+ --c-secondary: var(--c-secondary);
+ --c-secondary-highlight: var(--root-c-secondary-highlight);
+
+ --c-black: var(--root-c-base);
+ --c-black-highlight: var(--root-c-base-highlight);
+}
+
+
+* {
+ margin: 0em;
+ padding: 0em;
+ box-sizing: border-box;
+}
+
+html, body {
+ font-size: var(--u0);
+ height: 100%;
+ background-color: var(--c-base);
+ color: var(--c-black)
+}
+
+main {
+ min-height: 100%;
+}
+
+
+h1, h2, h3, h4, h5 {
+ font-family: "Fira Mono";
+ padding-top: 1em;
+ padding-bottom: 0.618em;
+ text-transform: uppercase;
+}
+
+p {
+ padding-top: 1em;
+}
+
+h1 {
+ font-size: var(--u2);
+}
+
+h2 {
+ font-size: var(--u1);
+}
+
+h3, h4, h5 {
+ font-size: var(--u0);
+}
+
+img {
+ width: 100%;
+ object-fit: cover;
+}
+
+li {
+ list-style-type: none;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+table td,
+table th {
+ padding: var(--u0);
+ text-align: center;
+}
+
+table th {
+ background-color: var(--c-primary);
+ color: var(--c-base);
+}
+
+table tr:nth-child(2n+1) {
+ background-color: var(--c-base-highlight);
+}
+
+/*
+ * NAV
+ */
+
+nav {
+
+}
+
+nav h1 {
+ font-size: var(--u0);
+ margin: 0rem;
+}
+
+nav li {
+ display: flex;
+ flex-direction: column;
+}
+
+nav li li {
+ margin-left: var(--u0);
+}
+
+nav li a {
+ padding: var(--u0);
+ transition: all 0.1s ease-out;
+}
+
+nav li a:hover,
+nav li a.selected {
+ padding: var(--u0);
+ background-color: var(--c-primary);
+ color: var(--c-base);
+}
+/*
+ * FOOTER
+ */
+
+footer {
+ padding-top: var(--u3);
+ padding-bottom: var(--u1);
+}
+
+/*
+ * INPUTS
+ */
+
+form * {
+ width: 100%;
+}
+
+input[type="text"],
+input[type="password"] {
+
+ background-color: var(--c-base);
+
+ border: none;
+
+ border-radius: var(--u-2);
+ margin-top: var(--u0);
+ margin-bottom: var(--u0);
+
+ padding: var(--u0);
+ font-size: var(--u0);
+ color: var(--c-black);
+
+ /* box-shadow: var(--s-0-secondary); */
+}
+
+input[type="text"]::placeholder,
+input[type="password"]::placeholder {
+ color: var(--c-primary-highlight);
+ opacity: 50%;
+}
+
+button, .button {
+ font-family: "Fira Mono";
+ font-weight: bold;
+
+ background-color: var(--c-primary);
+ color: var(--c-base);
+
+ border: none;
+ border-radius: var(--u-2);
+
+ margin-bottom: var(--u0);
+ margin-top: var(--u0);
+
+ padding: var(--u0);
+
+ min-width: 10em;
+
+ font-family: "Fira Mono";
+ text-transform: uppercase;
+ font-size: var(--u0);
+
+ /* box-shadow: var(--s-0-secondary); */
+}
+
+button:active, .button:active {
+ background-color: var(--c-primary-highlight);
+}
+
+input[type="text"],
+input[type="password"],
+button,
+.button {
+ transition: all 0.1s ease-out;
+}
+
+label {
+ display: block;
+ min-width: 10em;
+ font-weight: bold;
+}
+
+/*
+ * HERO
+ */
+
+.hero {
+ background-color: var(--c-primary);
+ color: var(--c-base);
+}
+
+.hero-black {
+ background-color: var(--c-black);
+ color: var(--c-base);
+}
+
+/*
+ * LAYOUT
+ */
+
+.content-width {
+ max-width: 80rem;
+ margin-left: auto;
+ margin-right: auto;
+
+ padding-left: var(--u0);
+ padding-right: var(--u0);
+}
+
+.bar-flex {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+
+.bar-flex > * {
+ margin: var(--u0);
+}
+
+.bar-flex > .spacer {
+ flex: 1;
+}
+
+.sidebar-layout {
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.sidebar-layout > *:nth-child(2) {
+ flex: 1;
+}
+
+.grid {
+ display: flex;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+}
+
+.grid.vertical-center {
+ align-items: center;
+ height: 100%;
+}
+
+.grid.center {
+ justify-content: space-around;
+}
+
+.grid > * {
+ flex: 1;
+ margin: var(--u0);
+ padding: var(--u0);
+ border-radius: var(--u0);
+}
+
+.grid.base > * {
+ background-color: var(--c-base);
+ color: var(--c-black);
+}
+
+.grid.black > * {
+ background-color: var(--c-black);
+ color: var(--c-base);
+}
+
+.grid.primary > * {
+ background-color: var(--c-primary);
+ color: var(--c-base);
+}
+
+.grid.secondary > * {
+ background-color: var(--c-primary-highlight);
+ color: var(--c-base);
+}
+
+.hero-primary .grid.shadow > * {
+ /* box-shadow: var(--s-0-secondary); */
+}
+
+.hero-black .grid.shadow > * {
+ /* box-shadow: var(--s-0-secondary); */
+}
+
+.grid.s > .spacer {
+ box-shadow: none;
+
+ margin: calc(var(--u0) * 2);
+ padding: 0px;
+
+ width: 10rem;
+ max-width: 10rem;
+ min-width: 7.5rem;
+ height: 0px;
+}
+
+.grid.s > * {
+ max-width: 10rem;
+ min-width: 7.5rem;
+}
+
+
+.grid.m > .spacer {
+ box-shadow: none;
+
+ margin: calc(var(--u0) * 2);
+ padding: 0px;
+
+ width: 20rem;
+ max-width: 20rem;
+ min-width: 15rem;
+ height: 0px;
+ padding: 0px;
+}
+
+.grid.m > * {
+ width: 20rem;
+ max-width: 20rem;
+ min-width: 15rem;
+}
+
+.grid.l > .spacer {
+ box-shadow: none;
+
+ margin: calc(var(--u0) * 2);
+ padding: 0px;
+
+ width: 40rem;
+ max-width: 40rem;
+ min-width: 15rem;
+ height: 0px;
+ padding: 0px;
+}
+
+.grid.l > * {
+ width: 40rem;
+ max-width: 40rem;
+ min-width: 15rem;
+}
+
+.vertical-spacer.s {
+ min-height: 10rem;
+}
+
+.vertical-spacer.m {
+ min-height: 20rem;
+}
+
+.vertical-spacer.l {
+ min-height: 40rem;
+}
+
+/*
+ * Impov
+ */
+
+.input-icon {
+ /* box-shadow: var(--s-0-secondary); */
+ display: flex;
+ padding: 0px;
+
+ border-radius: var(--u0);
+}
+
+.input-icon > input {
+ flex: 1;
+ margin: 0px;
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ box-shadow: none;
+}
+
+.input-icon > button {
+ margin: 0px;
+
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ box-shadow: none;
+}
+
+
+/*
+ * CONTENT
+ */
+
+.price {
+ opacity: 75%;
+ font-size: var(--u1);
+ text-align: right;
+}
diff --git a/mockup-css/ecom-frontpage.html b/mockup-css/ecom-frontpage.html
new file mode 100644
index 0000000..005be60
--- /dev/null
+++ b/mockup-css/ecom-frontpage.html
@@ -0,0 +1,125 @@
+
+
+
+
+ Frontpage
+
+
+
+
+
+
+
+
+
+
Angebote
+
+
+
+
+ Lorem Ipsum
+ 25.14 €
+
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+
+
+
+
+
+ Lorem Ipsum
+ 10.14 €
+
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+
+
+
+
+
+ Lorem Ipsum
+ 25.14 €
+
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+
+
+
+
+
+ Lorem Ipsum
+ 10.14 €
+
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+
+
+
+
+
+ Lorem Ipsum
+ 44.14 €
+
+
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Personalisierte Empfehlungen
+
+
+
+
Werde jetzt Kunde
+
Jetzt Kunde werden und viele Vorteile sichern,
+ wie z.B. personalisierte Empfehlungen.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/mockup-css/form-view.html b/mockup-css/form-view.html
new file mode 100644
index 0000000..e40c930
--- /dev/null
+++ b/mockup-css/form-view.html
@@ -0,0 +1,158 @@
+
+
+
+
+ Frontpage
+
+
+
+
+
+
+
+
+
+
diff --git a/mockup-css/login.html b/mockup-css/login.html
new file mode 100644
index 0000000..0d31692
--- /dev/null
+++ b/mockup-css/login.html
@@ -0,0 +1,48 @@
+
+
+
+
+ Frontpage
+
+
+
+
+
+
+
+
+
diff --git a/mockup-css/pics/product-1.jpg b/mockup-css/pics/product-1.jpg
new file mode 100644
index 0000000..62f6e56
Binary files /dev/null and b/mockup-css/pics/product-1.jpg differ
diff --git a/mockup-css/pics/product-2.jpg b/mockup-css/pics/product-2.jpg
new file mode 100644
index 0000000..7f9ac2d
Binary files /dev/null and b/mockup-css/pics/product-2.jpg differ
diff --git a/mockup-css/pics/product-3.jpg b/mockup-css/pics/product-3.jpg
new file mode 100644
index 0000000..e72eedc
Binary files /dev/null and b/mockup-css/pics/product-3.jpg differ
diff --git a/mockup-css/pics/product-4.jpg b/mockup-css/pics/product-4.jpg
new file mode 100644
index 0000000..6b4238a
Binary files /dev/null and b/mockup-css/pics/product-4.jpg differ
diff --git a/mockup-css/pics/product-5.jpg b/mockup-css/pics/product-5.jpg
new file mode 100644
index 0000000..9df33c5
Binary files /dev/null and b/mockup-css/pics/product-5.jpg differ
diff --git a/mockup-css/pics/product-6.jpg b/mockup-css/pics/product-6.jpg
new file mode 100644
index 0000000..e62439b
Binary files /dev/null and b/mockup-css/pics/product-6.jpg differ
diff --git a/mockup-css/pics/product-7.jpg b/mockup-css/pics/product-7.jpg
new file mode 100644
index 0000000..8ed5b56
Binary files /dev/null and b/mockup-css/pics/product-7.jpg differ
diff --git a/mockup-css/undraw/undraw_successful_purchase_secondary.svg b/mockup-css/undraw/undraw_successful_purchase_secondary.svg
new file mode 100644
index 0000000..96780fa
--- /dev/null
+++ b/mockup-css/undraw/undraw_successful_purchase_secondary.svg
@@ -0,0 +1 @@
+