fix: header and subheader

Subheader claim always in now

app/assets/styles/header.css

@@ -24,9 +24,25 @@
         }
 
         & .header-text {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+
+            & > div {
+                display: flex;
+                flex-direction: column;
+            }
+
+            & .big {
                 font-size: 1.5em;
             }
 
+            & .small {
+                font-size: .8em;
+                font-weight: 100;
+            }
+        }
+
         & input[type="checkbox"] {
             display: none;
         }

app/assets/styles/page.css

@@ -68,4 +68,5 @@
 
 .Legal {
     padding: var(--padding-large) var(--padding-default);
+    color: var(--color-darkest);
 }

app/components/Pp/Header.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="Header">
-    <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="/">
-          ProPapier
+          <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
+          <div>
+            <span class="big">ProPapier</span>
+            <span class="small">Vergleichen. Schnell. Unkompliziert.</span>
+          </div>
         </NuxtLink>
         <label for="burger_nav_toggle" v-if="available">
           <Icon name="solar:hamburger-menu-broken" size="2em" />

app/pages/index.vue

@@ -12,11 +12,6 @@
           :current-card-index="currentCardIndex"
           @update="updateCard()"
       />
-      <Teleport to="#subheader">
-        <div class="search-bar">
-          <p class="roboto-condensed">Vergleichen. Schnell. Unkompliziert.</p>
-        </div>
-      </Teleport>
       <section class="content flex-col">
         <div class="content-text">
           <h1>Mit ProPapier Preise vergleichen und sparen</h1>