app/assets/styles/general.css

@@ -1,6 +1,7 @@
 :root {
   --padding-default: 1rem;
   --padding-small: 0.5rem;
+  --padding-large: 2rem;
   --radius-default: 3px;
   --transition-default: 150ms;
 
@@ -205,8 +206,4 @@ dialog {
   &::backdrop {
     background: rgba(0, 0, 0, 0.5);
   }
-}
-
-.Legal {
-  padding: var(--padding-default);
 }

app/assets/styles/page.css

@@ -53,6 +53,10 @@
     height: 100%;
 }
 
+.content-text {
+    padding: var(--padding-large) var(--padding-default) var(--padding-default);
+}
+
 .info-text {
     padding: 0 var(--padding-default);
     text-align: center;
@@ -60,4 +64,8 @@
     top: 40%;
     transform: translateY(-50%);
     position: absolute;
+}
+
+.Legal {
+    padding: var(--padding-large) var(--padding-default);
 }

app/components/Pp/Header.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="Header">
-    <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
+    <NuxtLink class="header-text" to="/">
+      <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
+    </NuxtLink>
     <div>
       <header class="roboto-condensed">
         <NuxtLink class="header-text" to="/">

app/pages/imprint.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <section class="Legal flex-col gap-default content full">
+      <h1>Impressum</h1>
       <div>
         <p>
           Fiona Lena Urban<br/>

app/pages/index.vue

@@ -18,6 +18,9 @@
         </div>
       </Teleport>
       <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 }}

app/pages/privacy.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="Legal flex-col gap-default content full">
-    <h3>
+    <h1>
       Datenschutzerklärung
-    </h3>
+    </h1>
     <p>
       Wir senden keinerlei Daten an Drittanbieter.
     </p>