pixologe.de — System-Dokumentation

1. Architektur & Stack

Warum Astro SSG statt WordPress?

Der Wechsel von WordPress/Divi zu Astro Static Site Generation löst mehrere Kernprobleme auf einmal:

Technischer Stack

• Astro v6 — Static Output, MDX, Sitemap-Integration
• GT Pressura Extended (Black/Regular/Light) + GT Pressura Mono — selbst gehostet in /public/fonts/
• Sveltia CMS — Self-Editing unter /admin/ via Forgejo-API (noch aufzubauen)
• Forgejo auf git.pixologe.de als Git-Host (kein GitHub)
• nginx auf Hetzner VPS 46.225.210.39 als Reverse Proxy
• Listmonk auf newsletter.pixologe.de für Newsletter
• Python-Script Port 4000 für Kontaktformular → hi@pixologe.de
• lottie-web — lokal gebundelt, für Service-Icon-Animationen

Datei-Struktur

pixologe-site/                    # Monorepo-Wurzel
├── packages/
│   └── design-tokens/            # @pixologe/design-tokens
│       ├── tokens.css            # Shared Design-Tokens
│       └── CustomCursor.astro    # Gelbes Quadrat-Cursor (shared, beide Sites)
├── sites/
│   ├── pixologe-site/            # pixologe.de
│   │   ├── public/
│   │   │   ├── fonts/            # GT Pressura WOFF2/WOFF
│   │   │   ├── images/           # Logo, Hero-Illu, Badges, Divider-PNGs
│   │   │   └── lottie/           # Lottie JSON
│   │   └── src/
│   │       ├── components/
│   │       │   ├── layout/       # Layout.astro, Header.astro, Footer.astro
│   │       │   ├── sections/     # ReferencesSection, ReviewsSection, ContactSection, …
│   │       │   ├── seo/          # SchemaMarkup.astro (JSON-LD)
│   │       │   └── ui/           # Badge.astro, TornDivider.astro
│   │       ├── content/
│   │       │   ├── blog/         # Markdown-Beiträge
│   │       │   └── referenzen/   # Referenz-/Projekteinträge (18 Einträge)
│   │       ├── content.config.ts # Astro Content Collections
│   │       ├── pages/            # index.astro + alle Routen
│   │       └── styles/
│   │           └── tokens.css    # Design-Tokens, Reset, Global Button-Styles
│   └── antislop-site/            # antislop.de
└── package.json                  # npm workspaces

2. Design-System

Farben

Typografie

• GT Pressura Extended Black (900) — Überschriften, Buttons
• GT Pressura Extended Regular (400) — Fließtext, Navigation
• GT Pressura Extended Light (300) — Dekorative Texte, Akzente
• GT Pressura Mono Regular — alle Button-Labels, Code

Button-Regeln

• Font: GT Pressura Mono, 14px, uppercase, letter-spacing 0.06em
• Primär-Button: .btn-green → #7eca88 Hintergrund, dunkler Text, hover → #5fb863 + weißer Text
• Sekundär-Button: .btn-blue / .btn-outline → #7ca7b1 Hintergrund, dunkler Text, hover → #5a8d99 + weißer Text
• Niemals gelbe Buttons
• Niemals volle Breite (immer width: fit-content)

Torn Dividers

• variant="dark" → marker.png — dunkle Risskante für Übergänge AUF dunkle oder andersfarbige Sektionen
• variant="light" → torn-edge.png — weiße Risskante am UNTEREN Ende farbiger Sektionen
• bg-Prop: Hintergrundfarbe des Divider-Streifens selbst (= Farbe der darauffolgenden Sektion)
• flip-Prop: Bild vertikal spiegeln

3. Seitenstruktur & Sektionen

Das Template-Baukasten-Prinzip

Jede Sektion auf pixologe.de ist ein wiederverwendbarer Baustein. Design (Farben, Abstände, Typografie) steckt im Astro-Komponenten-Code. Inhalte (Texte, Bilder, Reviews) werden später über Sveltia CMS gepflegt — Daniel kann sie ohne Codeänderung bearbeiten. Neue Seiten entstehen durch Kombination bestehender Sektionen. Neue Sektionen werden hier dokumentiert, damit sie per Name referenzierbar bleiben.

Faustregel: Sektionsname → CSS-Klasse → Claude weiß sofort, wo etwas zu finden ist.

Homepage (/) — Sektionen in Reihenfolge

Globale Rahmen-Elemente

Vorhandene Seiten

BlogPreviewSection — Hinweis

BlogPreviewSection.astro enthält den unteren Torn Divider intern (baked in) — unten torn-edge.png (light, variant="light"). Der obere Torn Divider wurde entfernt. Beim Einbinden in Seiten keine zusätzlichen TornDivider drumherum setzen. Die Sektion bringt einen Kategorie-Filter mit (showFilter automatisch wenn >1 Kategorie).

5. SEO & Schema Markup

Grundsatz

Qualität vor Quantität. Nur Felder, die wirklich zum Inhalt passen — kein Schema-Overhead, keine erfundenen Werte. Orte (Köln, Bonn & Königswinter) nur einbauen, wenn es natürlich klingt — nie als Keyword-Stuffing. Format immer mit „&", nie „/".

Schema Markup (JSON-LD) — Pflicht bei jeder neuen Seite

Komponente: src/components/seo/SchemaMarkup.astro
Basis-Schemas (LocalBusiness + WebSite) kommen automatisch aus Layout.astro.
Seitenspezifisch einbinden via <SchemaMarkup slot="head" schema={...} />.

FAQ-Sektion — Pflicht auf jeder Service-Seite

Komponente: src/components/sections/FaqSection.astro
Einbinden zwischen <ReviewsSection /> und <ContactSection />.
Das FAQPage-Schema wird von der Komponente automatisch generiert — kein separater SchemaMarkup-Aufruf nötig.

• 5–7 Fragen pro Seite, individuell auf die Leistung zugeschnitten
• Pflicht-FAQ auf jeder Service-Seite: „An welchen Orten arbeitest du?" → Vor Ort bin ich in Köln, Bonn und Königswinter unterwegs — remote arbeite ich mit Kunden aus ganz Deutschland zusammen.
• Bei neuen Seiten: mindestens als Platzhalter anlegen (TODO-Antworten), dann mit Daniel abstimmen

LocalBusiness (dauerhaft in Layout)

Daniel Bandholtz | der pixologe | Laurentiusstr. 56, 53639 Königswinter | areaServed: Köln, Bonn, Königswinter, Deutschland. Einmal hinterlegt — nicht in seitenspezifischen Schemas wiederholen.

Lokale SEO

• Orte in H1/H2 und Meta-Descriptions einbauen — nur wenn thematisch sinnvoll
• Format: „aus Köln, Bonn & Königswinter" — nie als Liste hintereinander ohne Kontext
• GEO (AI-Suche): konkrete Aussagen zu Person, Leistung, Ort — kein generischer Agenturtext

6. Systemprompts für Claude

Diese Prompts kannst du kopieren und am Anfang einer neuen Session verwenden, um Claude schnell in den richtigen Kontext zu bringen.

Prompt A — Allgemeine Weiterentwicklung

Prompt B — Neue Seite bauen

Prompt C — Content migrieren

Prompt D — Bug beheben / Styling anpassen

4. Styleguide & CSS-Klassen

Alle wiederverwendbaren Klassen sind global in src/styles/tokens.css definiert und stehen auf jeder Seite zur Verfügung.

Typografie-Tokens

Farb-Tokens

Button-Klassen

Alle Buttons: Font Mono, 12px, uppercase, 1px letter-spacing, border-radius 5px, padding 9px 12px 7px.

Regel: Niemals gelbe Buttons. Niemals eigene Button-Stile in Komponenten — immer globale Klassen verwenden.

Wichtig: .btn-grey ist die helle Badge-Variante (ehemals btn-meta). .btn-blue ist die teal-farbige Variante (war früher irrtümlich btn-grey). Nicht verwechseln.

Scroll Fade-In (data-fade)

Elemente mit dem Attribut data-fade starten unsichtbar (opacity:0, translateY(28px)) und werden sichtbar, sobald sie in den Viewport scrollen. Der IntersectionObserver in Layout.astro fügt dazu die Klasse .is-visible hinzu — einmalig, dann wird das Element nicht mehr beobachtet.

Stagger-Delays werden rein per CSS via :nth-child gesetzt — kein Inline-Style nötig: Kind 2 → 75ms, Kind 3 → 150ms, Kind 4 → 225ms. Bei prefers-reduced-motion werden alle Elemente sofort als .is-visible markiert.

Aktuelle Anwendungen: .ref-card, .service-card, .blog-card, .vision__card, .help__col, .reviews__col, section.client-logos. Weitere Elemente einfach mit data-fade taggen.

Hero-Entrance-Animationen (HeroSection)

Die Hero-Elemente (Illustration, Headline, Sub, Rating, Signatur) animieren per CSS-@keyframes beim Seitenaufruf — kein IntersectionObserver, weil sie above-the-fold sind (kein JS-Flash-Risk). Stagger per animation-delay: 0 / 0.15s / 0.3s / 0.45s / 0.55s.

Button Hover — Wipe-Effekt

Alle Buttons nutzen einen linear-gradient-Wipe von links nach rechts. Das Gradient ist 200% breit — Hover-Farbe links, Basis-Farbe rechts. Default-Position: right center (Basisfarbe sichtbar). Hover-Position: left center (Hover-Farbe wischt rein). Transition: background-position 280ms ease. Kein Pseudo-Element, kein JS.

Blops (Blob-Animationen)

Animierte Farbverläufe im Hero-Bereich. Implementiert als .hero__blob--2 / --3 mit position: absolute im .hero__blobs-Container. Jede Hero-Sektion (HeroSection, Seiten-Heros, Referenz-Seiten) bringt ihre eigenen Farben. Auf Mobile (max-width: 600px): 72vw / 66vw (statt 24vw / 22vw auf Desktop).

Breakpoints

Verwendung: @media (max-width: 600px) { ... } — CSS Custom Properties funktionieren nicht in @media-Queries.

Layout-Klassen

Schriftarten

Alle Fonts selbst gehostet in /public/fonts/, preloaded im <head>, font-display: optional (kein Layout Shift).

7. Offene Punkte & Roadmap

✅ Erledigt

• nginx-Konfiguration: /nginx/pixologe.conf (301-Redirects, /api/contact, HTTPS)
• Sveltia CMS: public/admin/config.yml (Forgejo-Backend)
• Alle 6 Blog-Posts migriert, Kategorie-Seiten, Filter auf Blog + Homepage
• Torn Dividers in BlogPreviewSection + ReviewsSection baked in
• Mobile-Fixes 375px; Seiten /termin/, /impressum/, /datenschutz/
• Lottie-Animationen: 8 JSON-Files in /public/lottie/, ServicesSection integriert
• Dieter-API (Datenschutz + Impressum): Widget per <slot name="head"> eingebunden
• Marquee-Hintergrundtext in HeroSection (strategie/web/print/ai/)
• Globale Sektionen: ProjectHeroSection, ProjectStatsSection, ProjectDetailSection
• Referenzen-Inhalte von pixologe.de migriert (18 Einträge inkl. Bilder + Filter)
• Seiten /referenzen/ (Übersicht) + /referenzen/[slug]/ (Detail) gebaut
• Referenzen-Übersicht im Blog-Stil (Illustration, blau-grauer Hintergrund, Filter)
• Mega-Menü (Header): Angebot / Referenzen / Kontakt / Blog — CSS + JS, linksbündig; „Angebot"-Trigger ist <button> (nicht klickbar, nur Dropdown)
• Nav umgebaut auf drei Positionierungs-Kategorien: Sichtbarkeit / Identität / Klarheit — jede öffnet vollbreites Mega-Panel. Neue Service-Seiten: /logo/ (Logogestaltung) und /corporate-design/ (Corporate Design). H1 aller Service-Seiten als flüssiger Satz (2 Zeilen + Typewriter-Endung). Mega-Panels als direkte Kinder des <header>, position: absolute — volle Breite garantiert, kein Push-down.
• font-synthesis: none — nur echte Schriftschnitte (Black 900 / Regular 400 / Light 300)
• Button Hover: Wipe-Effekt von links nach rechts (linear-gradient, background-position)
• Scroll Fade-In: data-fade-Attribut + IntersectionObserver in Layout.astro (kein Framework, DSGVO-konform)
• Hero-Entrance: CSS-Keyframes für Illustration, Headline, Sub, Rating, Signatur (staggered)
• Blops: Mobile 72vw/66vw (war 24vw), Blops auch auf /referenzen/ + Referenz-Detail-Seiten
• Unterseiten /webseiten/, /design/, /beratung/, /datenschutz-optimierung/ mit eigenen Hero + Inhalten
• „Termin vereinbaren"-Button in Nav und CtaSection verlinkt auf /termin/#termin-buchen; allgemeine Kontakt-/Let's-Talk-Buttons auf /termin/
• Schema Markup (JSON-LD): SchemaMarkup.astro in src/components/seo/; LocalBusiness + WebSite automatisch via Layout; seitenspezifisch via slot="head"
• Referenzen-Block auf Service-Seiten und Referenz-Detailseiten: kategoriespezifisch gefiltert + „Alle Referenzen"-Button
• Navigation: zwei CTA-Buttons rechts (btn-blue "Kontakt" + btn-green "Termin vereinbaren"), kein separater "Kontakt"-Navlink
• Header-Transparenz: vereinheitlicht auf 90% (default, Megamenü, Mobile), 95% gescrollt
• Lottie-Überlauf-Fix: MutationObserver in Layout.astro beobachtet alle [data-lottie-src]-Container; sobald Lottie das SVG einfügt, wird svg.style.overflow = 'visible' gesetzt. Zusätzlich CSS-Override in tokens.css. Icon-Container überall auf 70px vergrößert.
• CtaSection: showCall prop default false — "Anrufen"-Button wird nicht mehr angezeigt. Nur termin.astro übergibt showCall=true.
• Alle "Anrufen"-Buttons auf Service-Seiten und Homepage → "Kontakt" → /termin/
• Alle "Let's Talk!"-Buttons → /termin/ (nicht mehr /termin/#termin-buchen)
• Help-Sektion: gleiche Höhe aller drei Karten via CSS Grid stretch (kein align-items: start), kein border-radius auf .help__col
• Bilder: hero-illustration.webp (43KB), google-reviews.webp (21KB) — PNG-Originale ersetzt
• Page Transition: Slide-Animation subtiler — cover 0.2s ease-in, reveal 0.28s ease-out, JS-Timeout 210ms
• Hero LCP: <link rel="preload"> für hero-illustration.webp in Layout.astro
• BlogPreviewSection: oberer Torn Divider (torn-edge-blue.png) entfernt
• Torn Divider auf termin.astro vor Kontaktformular entfernt
• Navigation: 3 Pillars (Sichtbarkeit / Identität / Klarheit) je 4 Items + Sublines im Mega-Panel. Neue Einträge: Illustration, Nachhaltiges Design, Dauerhafte Betreuung, Digitale Souveränität.
• VisionSection: Pillar-Titel als Card-H3 + Sublines (Punkte-Separator) + aktualisierte Benefit-Texte
• ServicesSection: 8 Kacheln → 4 Benefit-Cards "Was du von mir bekommst" (01–04, ohne Lottie)
• HelpSection von Homepage entfernt (bleibt auf Unterseiten als Conversion-Element)
• ContactSection: zweispaltiges Layout — Links sticky (Illu, Headline, CTAs), Rechts Formular. Formular kompakter (gap, textarea, Button linksbündig)
• Telefonnummer 01577 930 4354 in ContactSection, CtaSection & termin.astro eingetragen
• ReferencesSection: Einleitungssatz + 30px Abstand über "Alle Referenzen"-Button (gilt global)
• ReviewsSection: Headline-Größe (font-size-3xl) + row-gap Fix für Mobile
• Logo-Parade (AboutSection): Logos auf 100px vergrößert
• CustomCursor.astro — geteilte Komponente in packages/design-tokens/. Gelbes Quadrat als Cursor (--color-primary), mix-blend-mode: normal, hover: 32×32px, hidden bei Maus-out. <style is:global> für body { cursor: none }. Wird in beiden Layout.astro eingebunden.
• Footer komplett neu strukturiert: 2 Zeilen (4-spaltig oben: Brand|Newsletter|Legal; 4-spaltig unten: Leistungs-Navigation mit allen 15 Service-Links in 3 Kategorien). Border-top/bottom 2px auf Services-Zeile.
• Footer Trust-Badges verlinkt: exali → exali.de/siegel/pixologe, Dieter → dieter.cello.so, antislop → antislop.de. EWPCL ohne Link.
• Neue Service-Seite /ki-integration/ — Nav (KLARHEIT-Panel) + Footer eingebunden.
• Neue Service-Seite /wordpress-reparatur/ — Footer eingebunden.
• Mega-Menü: .mega-grid--5 CSS-Klasse ergänzt (grid-template-columns: repeat(5, 1fr)) für KLARHEIT-Panel mit 5 Einträgen.
• GoatCounter Analytics in beiden Layout.astro: pixologe (stats.pixologe.de/count.js) + antislop (stats.antislop.de/count.js).
• Listmonk Newsletter vollständig eingerichtet: newsletter.pixologe.de live, SMTP via newsletter@pixologe.de (smtp.goneo.de:587 STARTTLS), Double-Opt-In aktiv. Listen: antislop (UUID: a6521839-686a-4cc7-8aa6-7e5e15c7ce7e) + pixologe (UUID: 723f350e-f101-4339-875b-f929044f8e85). CORS für antislop.de + pixologe.de in nginx konfiguriert.
• antislop Footer: Newsletter-Formular direkt im Footer eingebaut (ersetzt separate NewsletterSection). ContactForm-Styling an Footer-Form angeglichen. Nav + Rechtliches als eigene Sektion mit Trennlinie.
• pixologe Footer: Listmonk-UUID eingetragen (723f350e-f101-4339-875b-f929044f8e85).

Daniel muss liefern

• Logo-Parade optimieren → Logos prüfen, ggf. SVG-Versionen, Reihenfolge & Auswahl anpassen
• OG-Bild → /public/og-default.jpg (1200×630px) fehlt noch
• Impressum-Text → Dieter-Widget aktiv, aber echte Daten (Adresse, USt-IdNr.) noch einpflegen
• Neue Service-Seiten: Inhalte → Texte für /illustration/, /nachhaltiges-design/, /betreuung/, /webseitenueberarbeitung/, /webseitenpflege/, /seo/ abstimmen

Code — noch offen

• Neue Service-Seiten anlegen: /webseitenueberarbeitung/, /webseitenpflege/, /seo/, /illustration/, /nachhaltiges-design/, /betreuung/ — alle Nav-Links zeigen dorthin, Seiten existieren noch nicht (404)
• Alte Seiten /wordpress/ + /wordpress-pflege/ → auf neue URLs redirecten oder umbauen
• /datenschutz-optimierung/ → umbenennen zu /digitale-souveraenitaet/ + nginx 301-Redirect
• FAQ-Sektionen auf Service-Seiten (/webseiten/, /design/, /beratung/, /datenschutz-optimierung/) — mit FAQPage-Schema
• Kontaktformular: Frontend + Backend fertig — SMTP-Passwort noch in contact-server/contact-server.service eintragen (SMTP_PASS=…)

Infrastruktur (VPS)

• nginx-Config deployen: /etc/nginx/sites-enabled/pixologe
• Astro-Build: npm run build → /var/www/pixologe/dist/
• SSL via Certbot: certbot --nginx -d pixologe.de -d www.pixologe.de
• Forgejo aufsetzen auf git.pixologe.de (für Sveltia CMS)
• ✅ Listmonk auf newsletter.pixologe.de live — beide UUIDs eingetragen, SMTP aktiv
• Python-Script (Port 4000) für Kontaktformular deployen

8. Für Daniel — Manuelle Änderungen

Diese Sektion erklärt in Klartext, wo die Inhalte der Website liegen und wie du sie bearbeitest — falls du mal ohne Claude oder ohne VS Code direkt etwas ändern musst.

Blogbeiträge

Jeder Blogbeitrag ist eine einzelne Markdown-Datei im Ordner src/content/blog/. Der Dateiname (ohne .md) wird zur URL: src/content/blog/mein-thema.md → pixologe.de/blog/mein-thema/

Jede Datei beginnt mit einem Frontmatter-Block:

---
title: "Titel des Beitrags"
description: "Kurzbeschreibung (für SEO und Kartenvorschau)"
pubDate: 2025-06-01
categories: ["Design", "KI"]
tags: ["webdesign", "tipps"]
draft: false
---

Hier kommt der Text in Markdown...

draft: true → Beitrag ist unsichtbar auf der Website (gut zum Vorbereiten). draft: false → Beitrag erscheint live.

Referenzen (Projekte)

Genau wie Blogbeiträge, aber im Ordner src/content/referenzen/. URL: pixologe.de/referenzen/projektname/

Wichtige Frontmatter-Felder:

---
title: "Projektname"
description: "Kurzbeschreibung"
pubDate: 2025-01-15
categories: ["Webdesign"]
image: "/images/referenzen/projektname.webp"
imageAlt: "Bildbeschreibung"
url: "https://www.kunde.de"       # Externer Link auf Projekt-Button
feedbackQuote: "Tolles Feedback..."
feedbackAuthor: "Max Muster, Firma"
draft: false
---

Beschreibungstext des Projekts...

Bilder hinzufügen

Alle Bilder liegen in public/images/. Unterordner:

• public/images/referenzen/ — Projektbilder (Referenz-Detailseiten)
• public/images/ — allgemeine Bilder (Hero, Logo, Divider, etc.)

Format: möglichst WebP, maximal ~200 KB für große Bilder. Datei dort ablegen, dann im Frontmatter oder direkt im Markdown-Text referenzieren: /images/referenzen/mein-projekt.webp

Website deployen (lokal → live)

Im Projektordner auf deinem Rechner einmal ausführen:

./deploy.sh

Das Script baut die Seite (npm run build) und überträgt die fertigen HTML-Dateien per SSH auf den VPS. Voraussetzung: SSH-Key ~/.ssh/hetzner_privacybot ist vorhanden. Dauert ca. 30–60 Sekunden.

VPS — Server-Zugriff per SSH

ssh -i ~/.ssh/hetzner_privacybot root@46.225.210.39

IP-Adresse: 46.225.210.39 | Anbieter: Hetzner (CPX22, Köln)

Dienste auf dem VPS

Externe Dienste

Livegang-Checkliste (einmalig)

Diese Schritte sind nötig, sobald pixologe.de im DNS auf den VPS zeigt:

• DNS-A-Record bei Goneo von 82.100.237.6 auf 46.225.210.39 umstellen
• SSL-Zertifikat ausstellen: certbot --nginx -d pixologe.de -d www.pixologe.de
• Website deployen: ./deploy.sh
• Newsletter-UUID in src/components/forms/NewsletterForm.astro eintragen

Sveltia CMS — Inhalte im Browser bearbeiten

Sobald Sveltia CMS eingerichtet ist, kannst du Blogbeiträge und Referenzen direkt unter pixologe.de/admin/ im Browser anlegen und bearbeiten — ohne VS Code oder Terminal. Login läuft über Forgejo (git.pixologe.de). Status: noch aufzubauen.

10. Analytics & Tracking

Alle Tracking-Lösungen sind selbst gehostet auf dem Hetzner VPS — keine US-Drittanbieter, DSGVO-konform.

GoatCounter (Seitenaufrufe)

Leichtgewichtiger Zähler, datenschutzfreundlich, kein Cookie-Banner nötig.

Eingebunden in beiden Layout.astro via <script data-goatcounter="…" async src="…">.

Umami (detaillierte Analyse)

Self-hosted Analytics mit Dashboard, Geräte-/Herkunfts-Auswertung.

GoAccess (Bot-Tracking / Nginx-Logs)

Analysiert Nginx-Access-Logs direkt auf dem VPS. Nützlich für Bot-Erkennung und rohe Zugriffszahlen.

Aliases in /root/.bashrc:

9. antislop.de — Zweite Website

antislop.de ist eine eigenständige Publikation von Daniel — ein Blog / Meinungsportal zum Thema generative KI, KI-Slop, Ethik, Datenschutz und Ressourcenverbrauch. Sie läuft im selben Monorepo wie pixologe.de, hat aber ein eigenes Dark Theme und eigene Inhalte. Zielgruppe: Designerinnen und Designer, Entwicklerinnen und Entwickler, alle, die KI bewusst einsetzen wollen.

Monorepo-Struktur

pixologe-site/                    # Wurzel des Monorepos
├── packages/
│   └── design-tokens/            # @pixologe/design-tokens
│       ├── tokens.css            # Shared Design-Tokens
│       └── CustomCursor.astro    # Shared Custom Cursor (gelbes Quadrat)
├── sites/
│   ├── pixologe-site/            # pixologe.de — Haupt-Portfolio-Site
│   └── antislop-site/            # antislop.de — Dark-Theme-Blog
└── package.json                  # npm workspaces

Beide Sites teilen das gleiche Design-Token-Paket (@pixologe/design-tokens), überschreiben dann aber ihre eigenen Farbvariablen.

Stack

• Astro SSG (static output) — gleicher Stack wie pixologe.de
• Dark Theme via src/styles/theme.css — überschreibt globale Token-Farben
• Dev-Server: Port 4322 (npm run dev -w antislop-site im Monorepo-Root)
• Build-Output: sites/antislop-site/dist/
• Keine eigene DB, kein Backend — reiner Static Blog

Dark Theme — Farb-Overrides

Datei: sites/antislop-site/src/styles/theme.css

Regel: Für echte Hintergründe immer var(--color-bg) oder var(--color-bg-light) verwenden — niemals var(--color-white).

Seiten

Blog-Posts (Inhalt)

Alle Posts in sites/antislop-site/src/content/blog/ als .md-Dateien.

Aktuelle Posts (12 Stück, Stand April 2026):

Frontmatter-Format

---
title: 'Titel des Beitrags'
description: "Kurzbeschreibung (SEO + Karten-Preview)"
pubDate: 2026-02-18
author: "Daniel"
categories: ["Ethik", "Sicherheit"]
draft: false
---

## Abschnitt

Fließtext...

## Häufige Fragen (FAQ)

**Frage?**

Antwort.

## Quellen

1. [Quellenname](https://url.example.com)

Kategorien (fix — keine neuen anlegen)

• Design — Auswirkungen auf Werbung, Brand Design, Kreativprozesse
• Ethik — KI-Slop, Desinformation, gesellschaftliche Auswirkungen
• Gesellschaft — Gesellschaftliche Folgen, Arbeitsmarkt, Demokratie
• Sicherheit & Datenschutz — Deepfakes, DSGVO, EU AI Act, Datenmissbrauch
• Umwelt — Energieverbrauch, CO₂, Ressourcen, Rechenzentren

Slug-Mapping: Sicherheit & Datenschutz → sicherheit-datenschutz (via catSlug(): lowercase + &→- + spaces→-)

Sektionen (antislop-spezifisch)

Wichtig: Sektionen wie VisionSection, AboutSection, ServicesSection, ReviewsSection, ReferencesSection existieren zwar als Dateien (kopiert von pixologe.de), werden aber auf antislop nicht verwendet. Sie können für die Design-Phase als Ausgangspunkt dienen oder gelöscht werden.

Offene Punkte — antislop.de

• Favicon / OG-Bild für antislop.de anpassen
• Sveltia CMS auch für antislop einrichten
• Weitere Blog-Posts laufend ergänzen (Blog-Agenten laufen täglich)