app/app.vue

@@ -1,18 +1,11 @@
 <template>
-  <PpNavigation />
+  <div class="page-wrapper">
-  <NuxtLayout>
+    <PpHeader />
+    <div class="page">
       <NuxtPage />
-  </NuxtLayout>
+    </div>
+    <PpFooter />
+  </div>
 </template>
-
+<script setup lang="ts">
-<style>
+</script>
-.page-enter-active,
-.page-leave-active {
-  transition: all 2000ms;
-}
-.page-enter-from,
-.page-leave-to {
-  opacity: 0;
-  filter: blur(.5rem);
-}
-</style>

app/assets/styles/button.css

@@ -1,5 +1,5 @@
 .Button {
-    --padding: var(--padding-xs);
+    --padding: .2rem;
     --background: var(--color-main-dark);
     --color: var(--color-lightest);
     --background-hover: var(--color-main-dark);
@@ -8,7 +8,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--padding-default);
+    gap: 1rem;
     cursor: pointer;
     transition: var(--transition-default);
     outline: none;
@@ -19,13 +19,13 @@
     &.transparent {
         --background: transparent;
         box-shadow: none;
-        padding: var(--padding-s) var(--padding-l);
+        padding: .5em 1.5em;
         border-radius: var(--radius-default);
     }
 
     &.raised {
         box-shadow: var(--box-shadow-z2);
-        padding: var(--padding-s) var(--padding-l);
+        padding: .5em 1.5em;
         border-radius: var(--radius-default);
 
         &.danger {
@@ -37,7 +37,7 @@
     &.text {
         --background: transparent;
         --color: var(--color-darkest);
-        padding: var(--padding-s) var(--padding-l);
+        padding: .5em 1.5em;
         border-radius: var(--radius-default);
 
         &:hover {
@@ -62,13 +62,13 @@
         justify-content: center;
         align-items: center;
         border-radius: 100%;
-        padding: var(--padding-s);
+        padding: .5rem;
     }
 
     &.cta {
         background: var(--background);
         color: var(--color);
-        padding: var(--padding-s) var(--padding-l);
+        padding: .5rem 1.5rem;
         border-radius: var(--radius-default);
         box-shadow: var(--box-shadow-z2);
 
@@ -98,7 +98,7 @@
         --color: var(--color-main-darkest);
         border-radius: 100%;
         padding: var(--padding);
-        font-size: var(--font-size-l);
+        font-size: 1.1em;
 
         &:hover {
             scale: 1.2;
@@ -106,17 +106,17 @@
     }
 
     &.mini-button {
-        padding: var(--padding-s) var(--padding-l);
+        padding: .5rem 1.5rem;
         display: flex;
         flex-direction: column;
-        gap: var(--padding-xs);
+        gap: .5rem;
 
         & > .icon {
-            font-size: var(--font-size-xl);
+            font-size: 1.5rem;
         }
 
         & > span {
-            font-size: var(--font-size-s);
+            font-size: .8rem;
         }
     }
 }

app/assets/styles/buttonGroup.css

@@ -9,8 +9,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: var(--padding-xs);
+        gap: .5rem;
-        padding: var(--padding-s);
+        padding: .5rem;
         flex-grow: 1;
         background: var(--background);
         color: var(--color);

app/assets/styles/dialog.css

@@ -7,7 +7,7 @@ dialog {
     border: none;
     border-radius: var(--radius-default);
     background: var(--color-lightest);
-    font-size: var(--font-size-default);
+    font-size: 1rem;
     color: var(--color-darkest);
     position: relative;
 
@@ -40,7 +40,7 @@ dialog {
     & > .wrapper {
         display: flex;
         flex-direction: column;
-        gap: var(--padding-default);
+        gap: 1rem;
     }
 
     & header {

app/assets/styles/footer.css

@@ -12,27 +12,27 @@
 
     & .bottom {
         display: flex;
-        gap: var(--padding-default);
+        gap: 1rem;
         justify-content: space-between;
         color: var(--color-light);
     }
 
     & .socials {
-        font-size: var(--font-size-xl);
+        font-size: 1.5rem;
         justify-content: center;
-        margin-bottom: var(--padding-xl);
+        margin-bottom: 2rem;
     }
 
     & .data-links {
         justify-content: flex-end;
-        font-size: var(--font-size-s);
+        font-size: .8rem;
     }
 
     & ul {
         list-style: none;
         display: flex;
         align-items: center;
-        gap: var(--padding-default);
+        gap: 1rem;
 
         & a {
             color: var(--color-lightest);

app/assets/styles/form/search.css

@@ -1,15 +1,15 @@
 .Search {
     border-radius: 9999px;
     background: var(--color-lightest);
-    padding: 0 var(--padding-default);
+    padding: 0 1rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--padding-default);
+    gap: 1rem;
 
     & > input {
         all: unset;
         flex-grow: 1;
-        padding: var(--padding-s) 0;
+        padding: .5rem 0;
     }
 }

app/assets/styles/form/textfield.css

@@ -1,9 +1,9 @@
 .TextField {
   --border-color: var(--color-light);
   --label-color: var(--color-middle);
-  --label-position-top: var(--font-size-default);
+  --label-position-top: 0.4em;
-  --label-position-left: 2.5rem;
+  --label-font-size: 1rem;
-  --label-font-size: var(--font-size-default);
+  --icon-color: var(--color-main-dark);
   --message-color: var(--color-middle);
 
   position: relative;
@@ -15,11 +15,15 @@
 
   &:focus-within,
   &:has(input:not(:placeholder-shown)) {
+    --icon-color: var(--color-main-dark);
     --label-color: var(--color-main-dark);
+    --label-position-top: -11px;
+    --label-font-size: 0.8rem;
   }
 
   &.error {
-    --label-color: var(--color-error) !important;
+    --label-color: var(--color-error);
+    --icon-color: var(--color-error);
     --border-color: var(--color-error);
     --message-color: var(--color-error);
   }
@@ -27,46 +31,37 @@
   & .wrapper {
     display: flex;
     align-items: center;
-    padding: var(--padding-xxs) var(--padding-xs);
+    padding: 0.1rem 0.5rem;
     border: 1px solid var(--border-color);
     border-radius: var(--radius-default);
   }
 
   & label {
     position: absolute;
-    display: flex;
-    align-items: center;
-    color: var(--label-color);
-    gap: 2px;
-    top: -6px;
-    left: calc(var(--padding-xs) - 2px);
-    font-size: var(--font-size-s);
-    transition: var(--transition-default);
-
-    & > * {
     background: var(--color-lightest);
-      padding: 0 2px;
+    padding: 0.2rem;
-    }
+    left: 1.8rem;
+    color: var(--label-color);
+    top: var(--label-position-top);
+    font-size: var(--label-font-size);
+    transition: var(--transition-default);
   }
 
   & .icon {
-    position: relative;
+    color: var(--icon-color);
-    color: var(--label-color);
-    font-size: var(--font-size-default);
-    top: -1px;
   }
 
   & input {
     all: unset;
-    padding: var(--padding-xxs) var(--padding-s) var(--padding-xxs) 0;
+    padding: var(--padding-small);
-    font-size: var(--font-size-s);
+    font-size: 1rem;
     width: 100%;
     flex: 25% 1 0;
     color: var(--color-darkest);
   }
 
-  & > span {
+  & span {
     color: var(--message-color);
-    font-size: var(--font-size-xs);
+    font-size: 0.6rem;
   }
 }

app/assets/styles/general.css

@@ -1,7 +1,14 @@
 :root {
+  --padding-default: 1rem;
+  --padding-small: 0.5rem;
+  --padding-large: 2rem;
+  --radius-default: 3px;
+  --radius-border: 15px;
+  --transition-default: 150ms;
+
   --color-success: #328104;
   --color-error: #a20606;
-  --color-blue-light: #d7e1f1;
+  --color-blue-light: #0ddce7;
   --color-blue: #05b0ff;
   --color-blue-dark: #0266f2;
   --color-blue-darkest: #013174;
@@ -19,7 +26,6 @@
   --color-green-darkest-most: #157c2a;
 
   --color-main: var(--color-blue);
-  --color-main-lightest: var(--color-blue-light);
   --color-main-light: var(--color-blue-light);
   --color-main-dark: var(--color-blue-dark);
   --color-main-darkest: var(--color-blue-darkest);
@@ -29,9 +35,6 @@
   --color-accent-dark: var(--color-green-dark);
   --color-accent-darkest: var(--color-green-darkest);
 
-  --color-text: var(--color-darkest);
-  --color-text-invert: var(--color-lightest);
-
   --color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
   --color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
   --color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
@@ -42,29 +45,6 @@
   --box-shadow-upper: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 -3px 6px rgba(0, 0, 0, 0.23);
   --box-shadow-z2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   --box-shadow-inset: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23);
-
-  /* Font Sizes & Scaling Factor*/
-  --scaling-factor: 1.25;
-  --font-size-xs: calc(var(--font-size-s) / var(--scaling-factor));
-  --font-size-s: calc(var(--font-size-default) / var(--scaling-factor));
-  --font-size-default: 1rem;
-  --font-size-l: calc(var(--font-size-default) * var(--scaling-factor));
-  --font-size-xl: calc(var(--font-size-l) * var(--scaling-factor));
-  --font-size-xxl: calc(var(--font-size-xl) * var(--scaling-factor));
-
-  /* Paddings depend on Font-Size */
-  --padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));
-  --padding-xs: calc(var(--padding-s) / var(--scaling-factor));
-  --padding-default: var(--font-size-default);
-  --padding-s: calc(var(--padding-default) / var(--scaling-factor));
-  --padding-l: calc(var(--padding-default) * var(--scaling-factor));
-  --padding-xl: calc(var(--padding-l) * var(--scaling-factor));
-  --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor));
-
-  --radius-default: calc(var(--font-size-default) / 3);
-  --radius-border: var(--font-size-default);
-
-  --transition-default: 150ms;
 }
 
 * {
@@ -79,29 +59,43 @@ body {
   overflow-x: hidden;
   font-family: sans-serif;
   background: var(--color-main-darkest);
-  color: var(--color-text);
-  font-size: var(--font-size-default);
 }
 
-h1, h2, h3 {
+.dot {
-  margin: var(--padding-xl) 0 var(--padding-default);
+  --size: 10px;
-  text-wrap: balance;
+  width: var(--size);
-  hyphens: auto;
+  height: var(--size);
-  font-size: var(--font-size-xl);
+  top: 5px;
+  right: 25%;
+  border-radius: 50%;
+  background-color: var(--color-accent);
+  display: inline-block;
+  margin-right: 0.5rem;
+  position: absolute;
+  box-shadow: var(--box-shadow-z2);
+  scale: 0;
+  transition: var(--transition-default);
+
+  &.visible {
+    scale: 1;
+    animation: pulse 1s infinite;
+  }
 }
 
-h2 {
+@keyframes pulse {
-  margin: var(--padding-l) 0 var(--padding-default);
+  0% {
-  font-size: var(--font-size-l);
+    transform: scale(0.95);
-}
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+  }
 
-h3 {
+  100% {
-  margin: var(--padding-default) 0 var(--padding-default);
+    transform: scale(0.95);
-  font-size: var(--font-size-default);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
-}
+  }
-
-a:has(button) {
-  text-decoration: none;
 }
 
 .card {
@@ -121,7 +115,7 @@ a:has(button) {
 }
 
 .text-white {
-  color: var(--color-text-invert);
+  color: var(--color-lightest);
 }
 
 .bg-main {
@@ -136,16 +130,12 @@ a:has(button) {
   background-color: var(--color-main-dark);
 }
 
-.bg-main-darkest {
-  background-color: var(--color-main-darkest);
-}
-
 .bg-main-dark-hover:hover {
   background-color: var(--color-main-dark);
 }
 
 .gap-default {
-  gap: var(--padding-default);
+  gap: 1rem;
 }
 
 .bg-blue {
@@ -157,13 +147,13 @@ a:has(button) {
 }
 
 .padding {
-  gap: var(--padding-default);
+  gap: 1rem;
   padding: var(--padding-default);
 }
 
 .padding-small {
-  gap: var(--padding-default);
+  gap: 1rem;
-  padding: var(--padding-s);
+  padding: var(--padding-small);
 }
 
 .roboto-condensed {
@@ -180,5 +170,5 @@ a:has(button) {
 
 .grow {
   flex-grow: 1;
-  height: var(--padding-s);
+  height: 10px;
 }

app/assets/styles/header.css

@@ -2,37 +2,20 @@
     position: sticky;
     top: 0;
     z-index: 100;
+    background: var(--color-main-darkest);
     display: flex;
     align-items: center;
-    gap: var(--padding-default);
+    gap: 1rem;
     padding: var(--padding-default);
 
-    &:not(.lp) {
-        background: var(--color-main-darkest);
-    }
-
-    &.lp {
-        position: absolute;
-        backdrop-filter: blur(10px);
-        mask: linear-gradient(to top, transparent, black 20%);
-        width: 100%;
-        top: 0;
-    }
-
     & .logo {
         height: 40px;
     }
 
-    & .burger-button {
-        all: unset;
-        color: var(--color-lightest);
-    }
-
     & header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
         font-weight: bold;
 
         & a {
@@ -43,7 +26,7 @@
         & .header-text {
             display: flex;
             align-items: center;
-            gap: var(--padding-default);
+            gap: 1rem;
 
             & > div {
                 display: flex;
@@ -51,17 +34,52 @@
             }
 
             & .big {
-                font-size: var(--font-size-xl);
+                font-size: 1.5em;
             }
 
             & .small {
-                font-size: var(--font-size-s);
+                font-size: .8em;
                 font-weight: 100;
             }
         }
+
+        & input[type="checkbox"] {
+            display: none;
+        }
+
+        & input[type="checkbox"]:checked + nav {
+            translate: 0;
+        }
+
+        & nav,
+        & ul {
+            gap: 1em;
+        }
+
+        & nav {
+            position: fixed;
+            padding: var(--padding-default);
+            translate: 100% 0;
+            width: 100vw;
+            right: 0;
+            top: 0;
+            height: 100dvh;
+            transition: 150ms ease-in-out;
+            background: var(--color-lightest);
+            font-size: 2em;
+            align-items: end;
+            z-index: 100;
+        }
+
+        & ul {
+            width: 100%;
+            align-items: center;
+            & li {
+                list-style: none;
+            }
+        }
     }
 
-    &:not(.lp) {
     &:after, &:before {
         content: '';
         display: block;
@@ -81,5 +99,4 @@
         left: 0;
         mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000);
     }
-    }
 }

app/assets/styles/landingpage.css

@@ -1,30 +0,0 @@
-.home-hero {
-    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/img/hero-image.webp"); /* single color gradient for dark layer over image */
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-    color: var(--color-text-invert);
-    text-align: center;
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    button {
-        margin: var(--padding-xxl) auto 0;
-    }
-
-    .text {
-        padding: var(--padding-default);
-    }
-
-    h1 {
-        font-size: var(--font-size-xxl);
-    }
-}
-
-.home-text {
-    padding: var(--padding-xxl) var(--padding-default);
-    text-align: center;
-}
-

app/assets/styles/navigation.css

@@ -1,69 +0,0 @@
-.Navigation {
-    position: fixed;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    z-index: 5000;
-    width: 100vw;
-    height: 100dvh;
-    right: 0;
-    top: 0;
-    transition: 150ms ease-in-out;
-    pointer-events: none;
-
-    &.open {
-        pointer-events: all;
-        background: rgba(0, 0, 0, .5);
-
-        & nav {
-            translate: -1rem 0;
-        }
-    }
-
-    nav {
-        background: var(--color-lightest);
-        align-items: end;
-        box-shadow: var(--box-shadow-z2);
-        padding: var(--padding-default);
-        height: calc(100% - var(--padding-xxl));
-        width: 70%;
-        translate: 100% 0;
-        transition: 150ms ease-in-out;
-        border-radius: var(--radius-default);
-    }
-
-    & button {
-        justify-self: flex-end;
-        font-size: var(--font-size-xl);
-    }
-
-    & ul {
-        width: 100%;
-        align-items: flex-start;
-        font-size: var(--font-size-l);
-        gap: var(--padding-default);
-
-        & li {
-            list-style: none;
-            width: 100%;
-
-            & a {
-                text-decoration: none;
-                display: flex;
-                align-items: center;
-                gap: var(--padding-default);
-                color: var(--color-middle);
-                border-radius: var(--radius-default);
-                padding: var(--padding-xs) var(--padding-s);
-                transition: var(--transition-default);
-                background: transparent;
-                cursor: pointer;
-
-                &.active {
-                    background: var(--color-main-light);
-                    color: var(--color-main-dark);
-                }
-            }
-        }
-    }
-}

app/assets/styles/page.css

@@ -49,18 +49,10 @@
     overflow: hidden;
     background: var(--color-lightest);
     height: 100%;
-
-    h1:first-of-type,
-    h2:first-of-type,
-    h3:first-of-type,
-    p:first-of-type,
-    figure:first-of-type {
-        margin-top: 0;
-    }
 }
 
 .content-text {
-    padding: var(--padding-xl) var(--padding-default) 0;
+    padding: var(--padding-large) var(--padding-default) var(--padding-default);
     color: var(--color-darkest);
     text-align: center;
 }
@@ -75,6 +67,6 @@
 }
 
 .Legal {
-    padding: var(--padding-l) var(--padding-default);
+    padding: var(--padding-large) var(--padding-default);
     color: var(--color-darkest);
 }

app/assets/styles/priceCard.css

@@ -15,7 +15,7 @@
         & > * {
             flex-grow: 1;
             color: var(--color-lightest);
-            font-size: var(--font-size-xl);
+            font-size: 2rem;
             display: flex;
             align-items: center;
 
@@ -26,13 +26,13 @@
 
         & .bg-edit {
             background: var(--color-main-dark);
-            padding: var(--padding-xl);
+            padding: 2rem;
             text-align: left;
         }
 
         & .bg-delete {
             background: var(--color-error);
-            padding: var(--padding-xl);
+            padding: 2rem;
             text-align: right;
             justify-content: flex-end;
         }
@@ -42,7 +42,7 @@
         position: relative;
         background: var(--color-lightest);
         z-index: 2;
-        gap: var(--padding-default);
+        gap: 1rem;
         padding: var(--padding-default);
 
         &.animated {
@@ -56,14 +56,14 @@
             color: var(--color-darkest);
 
             & .icon {
-                font-size: var(--font-size-default);
+                font-size: 1rem;
                 cursor: pointer;
             }
         }
 
         & .name-price {
             display: flex;
-            gap: var(--padding-xs);
+            gap: .5rem;
 
             & > span:nth-child(1) {
                 font-weight: bold;
@@ -75,7 +75,7 @@
 
             & > span:nth-child(2)::before {
                 content: '•';
-                margin-right: var(--padding-xs);
+                margin-right: .5rem;
                 color: var(--color-middle);
             }
         }
@@ -84,19 +84,19 @@
             display: flex;
             flex-direction: row;
             width: 100%;
-            gap: var(--padding-default);
+            gap: 1rem;
             justify-content: space-between;
 
             & > .info {
                 flex-grow: 0;
                 align-items: center;
-                gap: var(--padding-xxs);
+                gap: .25rem;
                 font-weight: bold;
 
                 & > .price {
                     display: flex;
                     align-items: center;
-                    gap: var(--padding-xs);
+                    gap: .5rem;
 
                     & > .icon {
                         color: var(--color-main-dark);
@@ -104,7 +104,7 @@
                 }
 
                 & > .pro {
-                    font-size: var(--font-size-xs);
+                    font-size: .6rem;
                     color: var(--color-middle);
                     font-weight: lighter;
                 }

app/assets/styles/toolbar.css

@@ -8,6 +8,7 @@
     box-shadow: var(--box-shadow-upper);
 
     & > .Button {
-        font-size: var(--font-size-default);
+        --padding: 1rem;
+        font-size: 1rem;
     }
 }

app/components/Pp/Form/TextField.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="TextField">
     <div class="wrapper">
-      <input v-model="text" :type="type" :id="id" :placeholder="placeholder" @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
-      <label :for="id">
       <Icon v-if="icon" class="icon" :name="icon" mode="svg" />
-        <span>{{ label }}</span>
+      <input v-model="text" :type="type" :id="id" placeholder=" " @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
-      </label>
+      <label :for="id">{{ label }}</label>
     </div>
     <span v-if="message">{{ message }}</span>
   </div>
@@ -13,13 +11,12 @@
 
 <script setup lang="ts">
 type Props = {
-  type?: 'text' | 'number'
+  type?: 'text' | 'number';
-  message?: string
+  message?: string;
-  icon?: string
+  icon?: string;
-  label: string
+  label: string;
-  placeholder: string
+  id: string;
-  id: string
+  mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
-  mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal'
 };
 
 const { type = "text", mode = "text" } = defineProps<Props>();

app/components/Pp/Header.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="Header" :class="[type]">
+  <div class="Header">
+    <div>
       <header class="roboto-condensed">
         <NuxtLink class="header-text" to="/">
           <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
@@ -8,21 +9,25 @@
             <span class="small">Vergleichen. Schnell. Unkompliziert.</span>
           </div>
         </NuxtLink>
-      <button class="burger-button" @click="open()">
+        <label for="burger_nav_toggle" v-if="available">
-        <Icon name="uil:bars" size="2em" />
+          <Icon name="solar:hamburger-menu-broken" size="2em" />
-      </button>
+        </label>
+        <input type="checkbox" id="burger_nav_toggle" v-if="available" />
+        <nav class="flex-col" v-if="available">
+          <label for="burger_nav_toggle">
+            <Icon name="solar:close-circle-broken" />
+          </label>
+          <ul class="flex-col">
+            <li>Home</li>
+            <li>Übersicht</li>
+          </ul>
+        </nav>
       </header>
       <div id="subheader" />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-type Props = {
+const available = false
-  type ?: 'lp'
-}
-
-defineProps<Props>()
-
-const nav = useNavigation()
-const open = () => { nav.showNavigation() }
 </script>

app/components/Pp/Navigation.vue

@@ -1,41 +0,0 @@
-<template>
-  <section class="Navigation" :class="{ open }">
-    <nav>
-      <PpButton class="round text" @click="close()">
-        <Icon name="uil:times" mode="svg" />
-      </PpButton>
-      <ul class="flex-col">
-        <li v-for="page in pages">
-          <NuxtLink :to="page.route" @click="close()" active-class="active">
-            <Icon class="icon" :name="`uil:${page.icon}`" mode="svg" />
-            <span>{{ page.label }}</span>
-          </NuxtLink>
-        </li>
-      </ul>
-    </nav>
-  </section>
-</template>
-
-<script setup lang="ts">
-const nav = useNavigation()
-const close = () => nav.hideNavigation()
-const open = computed(() => nav.isNavigationVisible.value)
-
-const pages = [
-  {
-    label: 'Home',
-    icon: 'home',
-    route: '/'
-  },
-  {
-    label: 'Schnellrechner',
-    icon: 'calculator',
-    route: '/rechner'
-  },
-  // {
-  //   label: 'Über uns',
-  //   icon: 'users-alt',
-  //   route: '/about-us'
-  // }
-]
-</script>

app/components/Pp/PriceCardDialog.vue

@@ -16,8 +16,7 @@
               v-model="currentCard.name"
               id="card_name"
               label="Name"
-              icon="uil:pricetag-alt"
+              icon="uil:user"
-              :placeholder="randomName"
               :class="{ error: !validFields.name }"
               :message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
               @input="validFields.name = true"
@@ -26,7 +25,6 @@
               v-model="currentCard.price"
               id="card_price"
               label="Preis"
-              placeholder="2,49"
               icon="uil:euro"
               mode="decimal"
               :class="{ error: !validFields.price }"
@@ -39,7 +37,6 @@
               v-model="currentCard.roles"
               id="card_roles"
               label="Rollen"
-              placeholder="8"
               icon="uil:toilet-paper"
               mode="decimal"
               :class="{ error: !validFields.roles }"
@@ -50,7 +47,6 @@
               v-model="currentCard.sheets"
               id="card_sheets"
               label="Blatt"
-              placeholder="150"
               icon="uil:file-landscape"
               mode="decimal"
               :class="{ error: !validFields.sheets }"
@@ -61,7 +57,6 @@
               v-model="currentCard.layers"
               id="card_layers"
               label="Lagen"
-              placeholder="3"
               icon="uil:layer-group"
               mode="decimal"
               :class="{ error: !validFields.layers }"
@@ -99,25 +94,6 @@ const emit = defineEmits(['update'])
 const dialog = useTemplateRef<HTMLDialogElement>('dialog')
 const wrapper = useTemplateRef<HTMLElement>('wrapper')
 
-const market = [
-  'Lotl',
-  'Olda',
-  'Bäwä',
-  'Brutto',
-]
-
-const product = [
-  'Weichelig',
-  'Sau Rauh',
-  'Bissl Sanft',
-  'Ganz ok',
-  'Flauschi'
-]
-
-const generateRandomName = () => `${market[Math.floor(Math.random() * market.length)]} ${product[Math.floor(Math.random() * product.length)]}`
-
-const randomName = useState('randomName', () => generateRandomName())
-
 const checkPrice = () => {
   if (!currentCard) return false
   if (currentCard.price.length === 0) return false
@@ -162,7 +138,6 @@ onMounted(() => {
     validFields.roles = true
     validFields.sheets = true
     validFields.layers = true
-    randomName.value = generateRandomName()
   })
 
   onClickOutside(wrapper, () => dialog.value?.close())

app/composables/navigation.ts

@@ -1,24 +0,0 @@
-import { ref } from 'vue'
-
-const isNavigationVisible = ref(false)
-
-export const useNavigation = () => {
-  const toggleNavigation = () => {
-    isNavigationVisible.value = !isNavigationVisible.value
-  }
-
-  const showNavigation = () => {
-    isNavigationVisible.value = true
-  }
-
-  const hideNavigation = () => {
-    isNavigationVisible.value = false
-  }
-
-  return {
-    isNavigationVisible,
-    toggleNavigation,
-    showNavigation,
-    hideNavigation
-  }
-}

app/layouts/default.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="page-wrapper">
-      <PpHeader />
-      <div class="page">
-        <NuxtPage />
-      </div>
-      <PpFooter />
-    </div>
-</template>
-<script setup lang="ts">
-</script>

app/layouts/landingpage.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="page-wrapper">
-      <PpHeader type="lp" />
-      <div class="page">
-        <NuxtPage />
-      </div>
-      <PpFooter />
-    </div>
-</template>
-<script setup lang="ts">
-</script>

app/pages/index.vue

@@ -1,25 +1,154 @@
 <template>
-  <section class="Home flex-col content full">
+  <div class="nuxt-page-wrapper flex-col">
-    <div class="home-hero">
+    <ClientOnly>
-      <div class="text">
+      <PpDeleteDialog
-        <h1>
+        ref="deleteModal"
-          Du zahlst zuviel fürs Papier?
+        :current-card-index="currentCardIndex"
-        </h1>
+        @delete="removeCard(currentCardIndex)"
-        <NuxtLink to="/rechner">
+      />
-          <PpButton class="cta">Preise vergleichen</PpButton>
+      <PpPriceCardDialog
-        </NuxtLink>
+          ref="modal"
+          :current-card="currentCard"
+          :current-card-index="currentCardIndex"
+          @update="updateCard()"
+      />
+      <section class="content flex-col">
+        <div class="content-text">
+          <h1>Mit ProPapier Preise vergleichen und sparen</h1>
         </div>
+        <aside class="filter-bar">
+          <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
+            {{ button.label }}
+          </button>
+        </aside>
+        <div class="flex-col" role="list" v-if="cards.length">
+          <PpPriceCard
+            ref="priceCard"
+            v-for="(card, index) in cards"
+            :key="card.uuid"
+            :deletable="cards.length > 1"
+            :card="card"
+            @update="openModal(false, index)"
+            @remove="openDeleteModal()"
+          />
         </div>
-    <div class="home-text padding ">
+        <p class="info-text grow" v-else>
-      <p>
+          Du hast noch keinerlei Einträge angelegt.
-        Mit <strong>ProPapier</strong> vergleichst du schnell & unkompliziert Preise für Klo-, Küchen- und Haushaltspapier und sparst so bares Geld.
+          <br />Aber das ist gar nicht schlimm!
+          <br />Tippe einfach unten auf "+ Hinzufügen" und leg los.
         </p>
-    </div>
       </section>
+      <PpToolbar>
+        <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
+          <Icon class="icon" name="uil:plus" mode="svg" />
+          <span>Hinzufügen</span>
+        </PpButton>
+      </PpToolbar>
+    </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({
+import type { Card } from '../../shared/Card'
-  layout: 'landingpage'
+import type { Button } from '../../shared/ButtonGroup'
+import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
+
+const cards = useLocalStorage<Card[]>('cards', [])
+const currentSort = useLocalStorage<number>('sort', 0)
+const currentCard = ref<Card>()
+const currentCardIndex = ref<number>(-1)
+const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
+const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
+const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
+
+const createCard = (uuid : string) : Card => ({
+  uuid,
+  name: '',
+  price: '',
+  roles: '',
+  sheets: '',
+  layers: '',
 })
+
+
+const addCard = (card : Card) => {
+  cards.value.unshift({ ...card })
+  sort()
+}
+
+const removeCard = (index : number) => {
+  cards.value.splice(index, 1)
+  sort()
+}
+
+const updateCard = () => {
+  if (currentCardIndex.value === -1) {
+    addCard(currentCard.value!)
+    return
+  }
+
+  const newCard = { ...currentCard.value! }
+  cards.value.splice(currentCardIndex.value, 1, newCard)
+  sort()
+}
+
+const openModal = (createNew : boolean, index : number) => {
+  if (createNew) {
+    currentCardIndex.value = -1
+    currentCard.value = createCard(randomUUID())
+    modal.value?.$el.showModal()
+    return
+  }
+
+  currentCardIndex.value = index
+  currentCard.value = { ...cards.value[index]! }
+
+  modal.value?.$el.showModal()
+  return
+}
+
+const openDeleteModal = () => {
+  deleteModal.value?.$el.showModal()
+}
+
+const filterButtons = ref<Button[]>([
+  {
+    label: 'Rollen',
+    icon: 'uil:toilet-paper',
+    active: currentSort.value === 0,
+  },
+  {
+    label: 'Blatt',
+    icon: 'uil:file-landscape',
+    active: currentSort.value === 1,
+  },
+  {
+    label: 'Lagen',
+    icon: 'uil:layer-group',
+    active: currentSort.value === 2,
+  },
+])
+
+const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
+  cards.value.sort((a, b) => {
+    const aCard = priceCards.value?.find(card => card.uuid === a.uuid) || null
+    const bCard = priceCards.value?.find(card => card.uuid === b.uuid) || null
+    if (!aCard || !bCard) return 0
+    return aCard[key] - bCard[key]
+  })
+}
+
+const sort = async (index : number = currentSort.value) => {
+  currentSort.value = index
+  filterButtons.value.forEach(button => { button.active = false })
+  filterButtons.value[index]!.active = true
+
+  await nextTick()
+
+  switch (index) {
+    case 0: return sortBy('ppr')
+    case 1: return sortBy('pps')
+    case 2: return sortBy('ppl')
+  }
+}
 </script>

app/pages/other.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nuxt-page-wrapper flex-col">
+  <div>
     <ClientOnly>
       <PpDeleteDialog
           ref="deleteModal"
@@ -12,16 +12,20 @@
           :current-card-index="currentCardIndex"
           @update="updateCard()"
       />
-      <section class="content flex-col">
+      <div class="search-bar">
-        <div class="content-text">
+        <PpFormSearch
-          <h1>Mit ProPapier Preise vergleichen und sparen</h1>
+            v-model="search"
+            label="Suche nach Klopapier!"
+            id="search_field"
+        />
       </div>
+      <section class="content flex-col">
         <aside class="filter-bar">
           <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
             {{ button.label }}
           </button>
         </aside>
-        <div class="flex-col" role="list" v-if="cards.length">
+        <div class="flex-col" role="list">
           <PpPriceCard
               ref="priceCard"
               v-for="(card, index) in cards"
@@ -32,13 +36,17 @@
               @remove="openDeleteModal()"
           />
         </div>
-        <p class="info-text grow" v-else>
-          Du hast noch keinerlei Einträge angelegt.
-          <br />Aber das ist gar nicht schlimm!
-          <br />Tippe einfach unten auf "+ Hinzufügen" und leg los.
-        </p>
       </section>
       <PpToolbar>
+        <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
+          <Icon class="icon" name="uil:refresh" mode="svg" />
+          <span>Neu sortieren</span>
+          <span
+              class="dot"
+              :class="{ visible : isDirty}"
+              aria-hidden="true"
+          />
+        </PpButton>
         <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
           <Icon class="icon" name="uil:plus" mode="svg" />
           <span>Hinzufügen</span>
@@ -55,12 +63,15 @@ import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
 
 const cards = useLocalStorage<Card[]>('cards', [])
 const currentSort = useLocalStorage<number>('sort', 0)
+const isDirty = ref(false)
 const currentCard = ref<Card>()
 const currentCardIndex = ref<number>(-1)
 const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
 const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
 const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
 
+const search = ref('')
+
 const createCard = (uuid : string) : Card => ({
   uuid,
   name: '',
@@ -73,12 +84,12 @@ const createCard = (uuid : string) : Card => ({
 
 const addCard = (card : Card) => {
   cards.value.unshift({ ...card })
-  sort()
+  isDirty.value = true
 }
 
 const removeCard = (index : number) => {
   cards.value.splice(index, 1)
-  sort()
+  isDirty.value = true
 }
 
 const updateCard = () => {
@@ -89,7 +100,7 @@ const updateCard = () => {
 
   const newCard = { ...currentCard.value! }
   cards.value.splice(currentCardIndex.value, 1, newCard)
-  sort()
+  isDirty.value = true
 }
 
 const openModal = (createNew : boolean, index : number) => {
@@ -138,12 +149,12 @@ const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
   })
 }
 
-const sort = async (index : number = currentSort.value) => {
+const sort = (index : number) => {
   currentSort.value = index
   filterButtons.value.forEach(button => { button.active = false })
   filterButtons.value[index]!.active = true
 
-  await nextTick()
+  isDirty.value = false
 
   switch (index) {
     case 0: return sortBy('ppr')

nuxt.config.ts

@@ -41,7 +41,6 @@ export default defineNuxtConfig({
   css : [
     './app/assets/styles/general.css',
     './app/assets/styles/header.css',
-    './app/assets/styles/navigation.css',
     './app/assets/styles/footer.css',
     './app/assets/styles/button.css',
     './app/assets/styles/buttonGroup.css',
@@ -51,7 +50,6 @@ export default defineNuxtConfig({
     './app/assets/styles/toolbar.css',
     './app/assets/styles/page.css',
     './app/assets/styles/dialog.css',
-    './app/assets/styles/landingpage.css',
   ],
 
   site: {