add: backlink, technical aspects, nav

Add "Wissen" to navigation, fix some smaller issues, add backlink to posts

app/assets/styles/general.css

@@ -189,3 +189,9 @@ a:has(button) {
   flex-grow: 1;
   height: var(--padding-s);
 }
+
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--padding-default);
+}

app/assets/styles/page.css

@@ -50,11 +50,7 @@
     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 {
+    & :is(h1, h2, h3, p, figure):first-of-type {
         margin-top: 0;
     }
 }
@@ -74,7 +70,31 @@
     position: absolute;
 }
 
-.Legal {
+.Legal, .Wissen {
     padding: var(--padding-l) var(--padding-default);
     color: var(--color-darkest);
+
+    & ul {
+        margin: 0 0 0 var(--padding-default);
+    }
+
+    & a {
+        color: var(--color-main-dark);
+        text-decoration: none;
+        transition: var(--transition-default);
+
+        &:hover {
+            color: var(--color-main-darkest);
+        }
+    }
+}
+
+ul.link-liste {
+    list-style: none;
+    margin: var(--padding-default) 0 0;
+    
+    & a {
+        text-decoration: none;
+        color: var(--color-text)
+    }
 }

app/components/Pp/Navigation.vue

@@ -7,7 +7,7 @@
       <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" />
+            <Icon class="icon" :name="page.icon" mode="svg" />
             <span>{{ page.label }}</span>
           </NuxtLink>
         </li>
@@ -24,14 +24,19 @@ const open = computed(() => nav.isNavigationVisible.value)
 const pages = [
   {
     label: 'Home',
-    icon: 'home',
+    icon: 'uil:home',
     route: '/'
   },
   {
     label: 'Schnellrechner',
-    icon: 'calculator',
+    icon: 'uil:calculator',
     route: '/rechner'
   },
+  {
+    label: 'Wissen',
+    icon: 'uil:brain',
+    route: '/wissen'
+  },
   // {
   //   label: 'Über uns',
   //   icon: 'users-alt',

app/pages/wissen/[slug].vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+const slug = useRoute().params.slug
+const { data: post } = await useAsyncData(`wissen-${slug}`, () => {
+  return queryCollection('wissen').path(`/wissen/${slug}`).first()
+})
+</script>
+
+<template>
+  <section class="Wissen content full flex-col gap-default">
+    <NuxtLink class="back" to="/wissen"><Icon name="uil:backward" />Zurück zur Übersicht</NuxtLink>
+    <ContentRenderer v-if="post" :value="post" :prose="false" class="flex-col gap-default"/>
+  </section>
+</template>

app/pages/wissen/index.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+const { data: posts } = await useAsyncData('all-wissen', () => {
+  return queryCollection('wissen')
+      .all()
+})
+</script>
+
+<template>
+  <template v-if="posts">
+    <section class="Wissen flex-col gap-default content full">
+      <h1>Wissen rund ums Papier</h1>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem delectus dolorum expedita id itaque nam quasi repellat sapiente tempora voluptatibus!
+      <ul class="link-liste">
+      <li v-for="post in posts" :key="post.path">
+        <NuxtLink :to="post.path">
+          <h2>{{ post.title }}</h2>
+          <p>{{ post.description }}</p>
+        </NuxtLink>
+      </li>
+      </ul>
+    </section>
+  </template>
+</template>

content.config.ts

@@ -0,0 +1,14 @@
+import { defineCollection, defineContentConfig } from '@nuxt/content'
+import { asSitemapCollection } from '@nuxtjs/sitemap/content'
+
+export default defineContentConfig({
+    collections: {
+        wissen: defineCollection(
+            // adds the robots frontmatter key to the collection
+            asSitemapCollection({
+                type: 'page',
+                source: 'wissen/*.md',
+            }),
+        ),
+    },
+})

content/wissen/klopapier-verbrauch-pro-jahr.md

@@ -0,0 +1,42 @@
+---
+date: 2025-05-23
+metaTitle: Wie viel Klopapier verbraucht ein Deutscher pro Jahr? | Fakten & Zahlen
+metaDescription: Entdecke, wie viele Rollen Toilettenpapier ein durchschnittlicher Deutscher jährlich verbraucht – inklusive Vergleich mit anderen Ländern, Einflussfaktoren und Tipps für mehr Nachhaltigkeit.
+---
+
+# Wie viele Rollen Klopapier verbraucht ein Deutscher durchschnittlich in einem Jahr?
+
+Toilettenpapier ist ein fester Bestandteil unseres Alltags – so alltäglich, dass wir selten über unseren tatsächlichen Verbrauch nachdenken. Doch wie viele Rollen Klopapier verbraucht eigentlich eine Person in Deutschland im Jahr?
+
+## Durchschnittlicher Verbrauch in Deutschland
+Laut Daten des Statistischen Bundesamtes und des Verbandes Deutscher Papierfabriken liegt der durchschnittliche Verbrauch pro Person in Deutschland bei etwa 15 bis 18 Kilogramm Toilettenpapier pro Jahr. Das entspricht ungefähr 90 bis 100 Rollen jährlich pro Kopf, je nach Dicke und Qualität der Rollen.
+
+## Woraus ergibt sich dieser Wert?
+Die Zahl ergibt sich aus dem durchschnittlichen Konsumverhalten sowie der Anzahl an Blättern pro Rolle. Typische deutsche Klopapierrollen haben etwa:
+- 150–200 Blatt pro Rolle
+- Ein durchschnittliches Blatt wiegt ca. 0,2 Gramm
+- Eine Rolle wiegt somit rund 150 x 0,2 g = 30 g
+- 100 Rollen à 30 g ergeben ca. 3 kg – tatsächlich liegt das Gewicht meist höher, da Verpackung und mehrere Lagen hinzukommen
+
+In der Industrie wird daher eher mit dem Gesamtgewicht des verbrauchten Toilettenpapiers gerechnet, um eine genauere Verbrauchsstatistik zu ermöglichen.
+
+## Vergleich: Deutschland und andere Länder
+Deutschland zählt weltweit zu den Top-Verbrauchern von Toilettenpapier. Zum Vergleich:
+- USA: etwa 141 Rollen pro Person und Jahr 
+- Großbritannien: ca. 127 Rollen 
+- Frankreich: etwa 71 Rollen 
+- Italien: ca. 60 Rollen
+
+In vielen asiatischen und südamerikanischen Ländern ist der Verbrauch deutlich geringer – unter anderem, weil dort häufiger Bidets oder Wasser statt Papier verwendet werden.
+
+## Einflussfaktoren auf den Verbrauch
+Der individuelle Verbrauch hängt unter anderem ab von:
+- Haushaltsgröße und Hygienegewohnheiten
+- Produktqualität (z. B. Anzahl der Lagen)
+- Verpackungseinheiten und Einkaufsverhalten
+- Verhalten in öffentlichen Toiletten (die nicht immer den privaten Verbrauch widerspiegeln)
+
+## Fazit
+Der durchschnittliche Deutsche verbraucht rund 90 bis 100 Rollen Toilettenpapier pro Jahr – das entspricht etwa einer Rolle alle 3–4 Tage. Im internationalen Vergleich liegt Deutschland damit im oberen Bereich. Angesichts wachsender Umweltbedenken setzen viele Konsumenten zunehmend auf recyceltes Toilettenpapier oder versuchen, ihren Verbrauch zu reduzieren.
+
+**Tipp:** Wer seinen Verbrauch senken oder nachhaltiger gestalten möchte, kann auf Recyclingpapier umsteigen, Mehrblattrollen verwenden oder sogar über alternative Hygienemethoden nachdenken.

nuxt.config.ts

@@ -46,7 +46,8 @@ export default defineNuxtConfig({
     'nuxt-ripple',
     '@nuxtjs/sitemap',
     '@nuxtjs/robots',
-    '@nuxtjs/plausible'
+    '@nuxtjs/plausible',
+    '@nuxt/content'
   ],
 
   css : [

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@iconify-json/simple-icons": "^1.2.32",
     "@iconify-json/uil": "^1.2.3",
+    "@nuxt/content": "^3.5.1",
     "@nuxt/fonts": "^0.11.3",
     "@nuxt/icon": "^1.10.3",
     "@nuxtjs/device": "^3.2.4",