add: backlink, technical aspects, nav

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

app/assets/styles/general.css

@@ -188,4 +188,10 @@ a:has(button) {
 .grow {
   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,11 +70,31 @@
     position: absolute;
 }
 
-.Legal {
+.Legal, .Wissen {
     padding: var(--padding-l) var(--padding-default);
     color: var(--color-darkest);
 
-    ul {
-        padding-left: var(--padding-default);
+    & 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/privacy.vue

@@ -1,53 +1,14 @@
 <template>
   <section class="Legal flex-col gap-default content full">
-    <h2>1) Einleitung und Kontaktdaten des Verantwortlichen</h2>
-    <p><b>1.1</b>&nbsp;Wir freuen uns, dass du unsere Website besuchst und bedanken uns f&uuml;r dein Interesse. Im Folgenden informieren wir dich &uuml;ber den Umgang mit deinen personenbezogenen Daten bei der Nutzung unserer Website. Personenbezogene Daten sind hierbei alle Daten, mit denen du pers&ouml;nlich identifiziert werden kannst.</p>
-    <p><b>1.2</b>&nbsp;Verantwortlicher f&uuml;r die Datenverarbeitung auf dieser Website im Sinne der Datenschutz-Grundverordnung (DSGVO) ist Fiona Lena Urban, Teichäckerweg 39, 76297 Stutensee , Tel.: 017631640961, E-Mail: fiona@webfussel.de. Der f&uuml;r die Verarbeitung von personenbezogenen Daten Verantwortliche ist diejenige nat&uuml;rliche oder juristische Person, die allein oder gemeinsam mit anderen &uuml;ber die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten entscheidet.</p>
-    <h2>2) Datenerfassung beim Besuch unserer Website</h2>
-    <p><b>2.1</b>&nbsp;Bei der blo&szlig; informatorischen Nutzung unserer Website, also wenn du dich nicht registrierst oder uns anderweitig Informationen &uuml;bermittelst, erheben wir nur solche Daten, die dein Browser an den Seitenserver &uuml;bermittelt (sog. &bdquo;Server-Logfiles&#8220;). Wenn du unsere Website aufrufst, erheben wir die folgenden Daten, die f&uuml;r uns technisch erforderlich sind, um dir die Website anzuzeigen:</p>
-    <ul>
-      <li>Unsere besuchte Website</li>
-      <li>Datum und Uhrzeit zum Zeitpunkt des Zugriffs</li>
-      <li>Menge der gesendeten Daten in Byte</li>
-      <li>Quelle/Verweis, von welchem du auf die Seite gelangtest</li>
-      <li>Verwendeter Browser</li>
-      <li>Verwendetes Betriebssystem</li>
-      <li>Verwendete IP-Adresse (ggf.: in anonymisierter Form)</li>
-    </ul>
-    <p>Die Verarbeitung erfolgt gem&auml;&szlig; Art. 6 Abs. 1 lit. f DSGVO auf Basis unseres berechtigten Interesses an der Verbesserung der Stabilit&auml;t und Funktionalit&auml;t unserer Website. Eine Weitergabe oder anderweitige Verwendung der Daten findet nicht statt. Wir behalten uns allerdings vor, die Server-Logfiles nachtr&auml;glich zu &uuml;berpr&uuml;fen, sollten konkrete Anhaltspunkte auf eine rechtswidrige Nutzung hinweisen.</p>
-    <p><b>2.2</b>&nbsp;Diese Website nutzt aus Sicherheitsgr&uuml;nden und zum Schutz der &Uuml;bertragung personenbezogener Daten und anderer vertraulicher Inhalte (z.B. Bestellungen oder Anfragen an uns) eine SSL-bzw. TLS-Verschl&uuml;sselung. Du kannst eine verschl&uuml;sselte Verbindung an der Zeichenfolge &bdquo;https://&#8220; und dem Schloss-Symbol in deiner Browserzeile erkennen.</p>
-    <h2>3) Kontaktaufnahme</h2>
-    <p>Im Rahmen der Kontaktaufnahme mit uns (z.B. per Kontaktformular oder E-Mail) werden &ndash; ausschlie&szlig;lich zum Zweck der Bearbeitung und Beantwortung deines Anliegens und nur im daf&uuml;r erforderlichen Umfang &ndash; personenbezogene Daten verarbeitet.</p>
-    <p>Rechtsgrundlage f&uuml;r die Verarbeitung dieser Daten ist unser berechtigtes Interesse an der Beantwortung deines Anliegens gem&auml;&szlig; Art. 6 Abs. 1 lit. f DSGVO. Zielt deine Kontaktierung auf einen Vertrag ab, so ist zus&auml;tzliche Rechtsgrundlage f&uuml;r die Verarbeitung Art. 6 Abs. 1 lit. b DSGVO. Deine Daten werden gel&ouml;scht, wenn sich aus den Umst&auml;nden entnehmen l&auml;sst, dass der betroffene Sachverhalt abschlie&szlig;end gekl&auml;rt ist und sofern keine gesetzlichen Aufbewahrungspflichten entgegenstehen.</p>
-    <h2>4) Webanalysedienste</h2>
-    <p>Plausible</p>
-    <p>Diese Website nutzt &bdquo;Plausible&#8220;, ein Webanalyse-Tool der Firma Plausible Insights O&Uuml; V&auml;striku tn 2, 50403, Tartu, Estland.</p>
-    <p>Es werden damit Interaktionen von zuf&auml;llig ausgew&auml;hlten, einzelnen Besuchern mit der Internetseite anonymisiert aufgezeichnet. So entsteht ein Protokoll von z.B. Mausbewegungen und -Klicks mit dem Ziel, Verbesserungsm&ouml;glichkeiten der jeweiligen Internetseite aufzuzeigen. Zu keinem Zeitpunkt werden personenbezogene Daten erhoben oder verarbeitet. Plausible erhebt bei der Nutzung dieser Internetseite ausschlie&szlig;lich nicht personenbezogene Daten wie Informationen zum Browser und zum User Agent. Diese werden in nicht personenbeziehbarer Form gespeichert und zu statistischen Zwecken ausgewertet. Eine L&ouml;schung findet statt, sobald die Daten f&uuml;r unsere Auswertungszwecke nicht mehr ben&ouml;tigt werden.</p>
-    <p>Sofern im Einzelfall doch personenbezogene Daten verarbeitet werden, erfolgt die Verarbeitung auf Basis unseres berechtigten Interesses an der statistischen Auswertung des Nutzungsverhaltens zu Optimierungszwecken gem&auml;&szlig; Art. 6 Abs. 1 lit. f DSGVO.</p>
-    <h2>5) Rechte des Betroffenen</h2>
-    <p><b>5.1</b>&nbsp;Das geltende Datenschutzrecht gew&auml;hrt dir gegen&uuml;ber uns als Verantwortlichen hinsichtlich der Verarbeitung deiner personenbezogenen Daten die nachstehenden Betroffenenrechte (Auskunfts- und Interventionsrechte), wobei f&uuml;r die jeweiligen Aus&uuml;bungsvoraussetzungen auf die angef&uuml;hrte Rechtsgrundlage verwiesen wird:</p>
-    <ul>
-      <li>Auskunftsrecht gem&auml;&szlig; Art. 15 DSGVO;</li>
-      <li>Recht auf Berichtigung gem&auml;&szlig; Art. 16 DSGVO;</li>
-      <li>Recht auf L&ouml;schung gem&auml;&szlig; Art. 17 DSGVO;</li>
-      <li>Recht auf Einschr&auml;nkung der Verarbeitung gem&auml;&szlig; Art. 18 DSGVO;</li>
-      <li>Recht auf Unterrichtung gem&auml;&szlig; Art. 19 DSGVO;</li>
-      <li>Recht auf Daten&uuml;bertragbarkeit gem&auml;&szlig; Art. 20 DSGVO;</li>
-      <li>Recht auf Widerruf erteilter Einwilligungen gem&auml;&szlig; Art. 7 Abs. 3 DSGVO;</li>
-      <li>Recht auf Beschwerde gem&auml;&szlig; Art. 77 DSGVO.</li>
-    </ul>
-    <p><b>5.2</b>&nbsp;WIDERSPRUCHSRECHT</p>
-    <p>WENN WIR IM RAHMEN EINER INTERESSENABW&Auml;GUNG DEINE PERSONENBEZOGENEN DATEN AUFGRUND UNSERES &Uuml;BERWIEGENDEN BERECHTIGTEN INTERESSES VERARBEITEN, HAST DU DAS JEDERZEITIGE RECHT, AUS GR&Uuml;NDEN, DIE SICH AUS DEINER BESONDEREN SITUATION ERGEBEN, GEGEN DIESE VERARBEITUNG WIDERSPRUCH MIT WIRKUNG F&Uuml;R DIE ZUKUNFT EINZULEGEN.</p>
-    <p>MACHST DU VON DEINEM WIDERSPRUCHSRECHT GEBRAUCH, BEENDEN WIR DIE VERARBEITUNG DER BETROFFENEN DATEN. EINE WEITERVERARBEITUNG BLEIBT ABER VORBEHALTEN, WENN WIR ZWINGENDE SCHUTZW&Uuml;RDIGE GR&Uuml;NDE F&Uuml;R DIE VERARBEITUNG NACHWEISEN K&Ouml;NNEN, DIE DEINE INTERESSEN, GRUNDRECHTE UND GRUNDFREIHEITEN &Uuml;BERWIEGEN, ODER WENN DIE VERARBEITUNG DER GELTENDMACHUNG, AUS&Uuml;BUNG ODER VERTEIDIGUNG VON RECHTSANSPR&Uuml;CHEN DIENT.</p>
-    <p>WERDEN DEINE PERSONENBEZOGENEN DATEN VON UNS VERARBEITET, UM DIREKTWERBUNG ZU BETREIBEN, HAST DU DAS RECHT, JEDERZEIT WIDERSPRUCH GEGEN DIE VERARBEITUNG DIR BETREFFENDER PERSONENBEZOGENER DATEN ZUM ZWECKE DERARTIGER WERBUNG EINZULEGEN. DU KANNST DEN WIDERSPRUCH WIE OBEN BESCHRIEBEN AUS&Uuml;BEN.</p>
-    <p>MACHST DU VON DEINEM WIDERSPRUCHSRECHT GEBRAUCH, BEENDEN WIR DIE VERARBEITUNG DER BETROFFENEN DATEN ZU DIREKTWERBEZWECKEN.</p>
-    <h2>6) Dauer der Speicherung personenbezogener Daten</h2>
-    <p>Die Dauer der Speicherung von personenbezogenen Daten bemisst sich anhand der jeweiligen Rechtsgrundlage, am Verarbeitungszweck und &ndash; sofern einschl&auml;gig &ndash; zus&auml;tzlich anhand der jeweiligen gesetzlichen Aufbewahrungsfrist (z.B. handels- und steuerrechtliche Aufbewahrungsfristen).</p>
-    <p>Bei der Verarbeitung von personenbezogenen Daten auf Grundlage einer ausdr&uuml;cklichen Einwilligung gem&auml;&szlig; Art. 6 Abs. 1 lit. a DSGVO werden die betroffenen Daten so lange gespeichert, bis du deine Einwilligung widerrufst.</p>
-    <p>Existieren gesetzliche Aufbewahrungsfristen f&uuml;r Daten, die im Rahmen rechtsgesch&auml;ftlicher bzw. rechtsgesch&auml;fts&auml;hnlicher Verpflichtungen auf der Grundlage von Art. 6 Abs. 1 lit. b DSGVO verarbeitet werden, werden diese Daten nach Ablauf der Aufbewahrungsfristen routinem&auml;&szlig;ig gel&ouml;scht, sofern sie nicht mehr zur Vertragserf&uuml;llung oder Vertragsanbahnung erforderlich sind und/oder unsererseits kein berechtigtes Interesse an der Weiterspeicherung fortbesteht.</p>
-    <p>Bei der Verarbeitung von personenbezogenen Daten auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO werden diese Daten so lange gespeichert, bis du dein Widerspruchsrecht nach Art. 21 Abs. 1 DSGVO aus&uuml;bst, es sei denn, wir k&ouml;nnen zwingende schutzw&uuml;rdige Gr&uuml;nde f&uuml;r die Verarbeitung nachweisen, die deine Interessen, Rechte und Freiheiten &uuml;berwiegen, oder die Verarbeitung dient der Geltendmachung, Aus&uuml;bung oder Verteidigung von Rechtsanspr&uuml;chen.</p>
-    <p>Bei der Verarbeitung von personenbezogenen Daten zum Zwecke der Direktwerbung auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO werden diese Daten so lange gespeichert, bis du dein Widerspruchsrecht nach Art. 21 Abs. 2 DSGVO aus&uuml;bst.</p>
-    <p>Sofern sich aus den sonstigen Informationen dieser Erkl&auml;rung &uuml;ber spezifische Verarbeitungssituationen nichts anderes ergibt, werden gespeicherte personenbezogene Daten im &Uuml;brigen dann gel&ouml;scht, wenn sie f&uuml;r die Zwecke, f&uuml;r die sie erhoben oder auf sonstige Weise verarbeitet wurden, nicht mehr notwendig sind.</p>
+    <h1>
+      Datenschutzerklärung
+    </h1>
+    <p>
+      Wir sammeln anonyme Daten zum Erstellen von Statistiken über die Anzahl der Besuche auf unserer Seite, um herauszufinden, wie viel Pflegeaufwand und Rechenleistung benötigt wird.
+    </p>
+    <p>
+      Alle persistierten Daten befinden sich ausschließlich auf Ihrem Endgerät im sogenannten "localStorage" und werden ausschließlich auf Ihrem Gerät verarbeitet.
+    </p>
   </section>
 </template>
 

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.

docker-compose.yaml

@@ -1,47 +0,0 @@
-version: '3'
-
-services:
-  propapier:
-    image: oven/bun:latest
-    container_name: propapier
-    working_dir: /app
-    ports:
-      - "1338:3000"
-    volumes:
-      - propapier_data:/app
-    environment:
-      - NODE_ENV=production
-    command: >
-      sh -c "
-        # Install git and curl if not already installed
-        if ! command -v git &> /dev/null || ! command -v curl &> /dev/null; then
-          echo 'Installing required packages...'
-          apt-get update && apt-get install -y git curl
-        fi &&
-
-        # Clone repository if not already cloned
-        if [ ! -d /app/.git ]; then
-          echo 'Cloning repository...'
-          git clone https://git.webfussel.de/webfussel/propapier /tmp/propapier &&
-          cp -r /tmp/propapier/. /app/ &&
-          rm -rf /tmp/propapier
-        fi &&
-
-        # Install dependencies and start application
-        echo 'Installing dependencies...' &&
-        bun install &&
-        echo 'Building application...' &&
-        bun run build &&
-        echo 'Starting application...' &&
-        bun .output/server/index.mjs
-      "
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 40s
-
-volumes:
-  propapier_data:

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",

server/api/health.ts

@@ -1 +0,0 @@
-export default defineEventHandler((): string => 'ok' )