# Redesign stempelwiese.de — Planungsdokument **Status:** v1.2 — Ziele, Marken-Richtung, Systemtyp und Rollen entschieden **Stand:** 31.07.2026 **Grundlage:** Technische Bestandsaufnahme der Live-Site (Theme-CSS, Sitemaps, Startseite) **Zweck dieses Dokuments:** Rahmen setzen, nicht Umsetzung planen. Es beantwortet *worauf zielen wir, was fassen wir an, was lassen wir liegen* — genug, um in die Design-Entwürfe zu gehen. Plattformwahl und Regelwerk kommen bewusst **nach** den Visuals. --- ## 1. Worum es geht Stempelwiese ist Steffis Stampin' Up!-Auftritt: Bastel-Content (Blog + YouTube) als Reichweitenmotor, der auf zwei Erlösquellen einzahlt — Produktbestellungen über den Stampin' Up!-Shop und die Gewinnung neuer Demonstratorinnen. Die Seite läuft auf einem eigenen, modular gebauten WordPress-Theme (v7.0.2) mit sauberem Token-System und 41 festen Modulen. **Arbeitshypothese:** Redesign heißt hier *neuer technischer Unterbau, neue Oberfläche, neue Struktur — gleiche URLs, gleicher Content-Bestand.* WordPress bleibt, das Theme-Fundament nicht. --- ## 2. Ist-Stand | | | |---|---| | Blogposts | **2.117** (11 Sitemaps) | | Statische Seiten | 65 | | Tag-Taxonomie | 10 Sitemaps — sehr breit gestreut | | Video-Sitemap | zuletzt aktualisiert 10.07.2026 | | Post-Sitemap | zuletzt aktualisiert 03.02.2025 | **Wichtigster Befund:** 2.117 indexierte Blog-URLs. Das ist der Traffic-Motor und gleichzeitig das größte Risiko. Jede URL-Änderung, jeder Rendering-Bruch trifft direkt Reichweite und damit Umsatz. **Zweiter Befund:** Videos aktuell (07/2026), Blogposts nicht (02/2025). Auf der Startseite stehen unter „Neue Blogeinträge" Weihnachtsthemen aus 2024. Der Schwerpunkt hat sich zu YouTube verschoben. **Stack:** WordPress · eigenes Theme `stempelwiese` v7.0.2 · Rank Math Pro (SEO) · Fluent Forms · Splide · Fontello · ACF (soll raus) · **drei parallele Analytics-Stacks** (Site Kit/gtag, Fathom, Plausible ohne Token) ### Struktur (Ist) Startseite · Blog (2.117 Posts + Kategorien + Tags) · Archiv · Produktwelt (`/stampin-up-produkte` mit 11 Unterseiten) · Produktreihen · Kataloge · **Angebote (~20 Aktionsseiten, viele saisonal/abgelaufen)** · Bestellen + Gutschein · Demonstrator · Bonus · Neu / Produkt des Monats / Sale-A-Bration / Auslaufliste · Live (YouTube) · Newsletter · zwei Rechner-Tools · zwei Länderseiten (CH, AT/NL) · Über mich · Kontakt · Suche Auffällig: `/angebote` ist der größte Einzelblock und teils veraltet. Die beiden Rechner-Tools sind echte Nutzwert-Assets und im aktuellen Design kaum sichtbar. ### Warum die Seite aussieht, wie sie aussieht Das ist der Befund, der die Design-Richtung am stärksten beeinflusst: Die Seite war vorher Divi, dann Elementor, dann das jetzige Modul-Theme. Der Wechsel auf feste Module war **keine Design-Entscheidung, sondern eine Personal-Entscheidung**: Die redaktionelle Pflege lag bei jemandem ohne Designgefühl. Enge Module mit wenig Spielraum waren die Leitplanke, damit nichts kaputtgehen konnte. Das erklärt die Struktur der 41 Module — die Varianten-Paare (`teaser-grid-a`/`-b`, `slider-type-a`/`-b`, `note-type-a` bis `-d`, `image-copy-teaser`/`-2`) sind keine gewachsene Redundanz, sondern *eingebaute Wahlmöglichkeiten*: „hier hast du zwei Optionen, mehr nicht". **Diese Prämisse gilt nicht mehr.** Die Person ist nicht mehr im Team, und KI-gestützte Pflege verschiebt das Problem komplett. Freiheit ist kein Risiko mehr, sondern die Möglichkeit. **Konsequenz für dieses Projekt:** Die 41 Module sind ein historischer Befund, **keine Anforderungsliste**. Sie zeigen, welche Inhaltsarten es auf der Seite gibt — nicht, welche Bausteine der Neubau haben muss. Die Entwürfe orientieren sich nicht daran. Für die Referenz, welche Inhaltsarten heute existieren: Layout (Hero, Long-Copy, Teaser) · Blog (Header, Footer, Teaser, Kategorien, Tags) · Bild & Medien (9 Varianten von Bild-Text-Kombinationen) · Produkt & Kommerz (Kataloge, Deals, Farben, Erklärstücke) · Interaktion (CTA, FAQ, Formular, Suche, Slider, Teaser-Grids) · Notizen/Deko (6 Varianten der handschriftlichen „Note"-Ästhetik — typografische Spezialität der Seite). ### Design-System (Ist) **Schriften:** `MagdaPro` + `MagdaPro-Bold` (Display & Body) · `Stempelwiese v003 Regular` (eigene Hausschrift/Deko) · Fontello Icons **Farben** — ~40 Tokens als CSS Custom Properties: | Rolle | Token | Wert | |---|---|---| | Marke / Akzent | `--base-color-pink-100` | `#f28ca2` | | Text / Dunkel | `--base-color-blue-100` | `#223a59` | | Seitenhintergrund | `--base-color-pink-20` | `#fce8ec` | | Sekundär hell | `--base-color-blue-light-100` | `#6f9abd` | | Signal warm / grün | `--base-color-yellow-100` / `--base-color-green-100` | `#fed391` / `#58a687` | | Neutral warm | `--base-color-sand-50` | `#fbf3ed` | Die Token-Basis ist gut, aber es fehlt eine **semantische Ebene** — es gibt `--base-color-pink-100`, aber kein `--color-accent`, `--color-text`, `--color-surface`. Jede Farbentscheidung ist fest verdrahtet statt umschaltbar. **Responsive (Ist):** `--base-unit: min(1px, calc((100 / 1440) * 1vw))` — das Layout skaliert proportional von 1440px herunter, `base.css` hat **null Media Queries**. Auf 13"-Laptop und Tablet schrumpft alles inkl. Fließtext mit, statt umzubrechen. --- ## 3. Ziele — entschieden **Primärziel: Modernisierung + Pflegbarkeit.** Wechsel der darunterliegenden Theme-Plattform, weg von der gewachsenen Eigenkonstruktion. Wichtig: *Pflegbarkeit* heißt hier nicht mehr „Leitplanken für jemanden ohne Designgefühl". Es heißt: **gestalterische Freiheit bei verlässlicher Konsistenz** — Inhalte entstehen KI-gestützt entlang eines Regelwerks, nicht durch Zusammenklicken vorgegebener Bausteine. **Geschäftliches Ziel, das dauerhaft mitläuft: Wachstum.** Beides zählt — Bestellungen und Demonstratorinnen. **Schwerpunkt Verkauf**, Tendenz zunehmend. Was das praktisch heißt: | Ebene | Konsequenz | |---|---| | **System & Pflege** (primär) | Das Ergebnis ist ein **Regelwerk**, kein Baukasten. Tokens, Skalen, Layout-Prinzipien, Do/Don't — explizit genug, dass eine KI zuverlässig danach bauen kann. | | **Verkauf** (Schwerpunkt) | Die Materialbrücke vom Content zum Shop ist die wichtigste wiederkehrende Stelle im Design. Sie muss im Blogpost, auf Produkt- und Angebotsseiten gleich gut funktionieren. | | **Demonstratorinnen** (mitlaufend) | Die Recruiting-Strecke wird mitgedacht und aufgeräumt, bekommt aber nicht den ersten Platz auf der Startseite. | | **Blog-Traffic** | Nebenbedingung: darf nicht schlechter werden. Wird nicht aktiv ausgebaut. | --- ## 4. Zielgruppen | Zielgruppe | Job to be done | Wo sie landen | Wo sie hinsollen | |---|---|---|---| | **Bastel-Sucherin** | Anleitung für ein konkretes Projekt | Blogpost via Google/Pinterest | Materialliste → Shop | | **Stammkundin** | Aktuelle Aktionen, neuer Katalog | Startseite, `/angebote` | Bestellung, Newsletter | | **Einsteigerin** | „Was ist Stampin' Up! überhaupt?" | `/einsteiger`, `/stampin-up` | Erstbestellung | | **Demonstratorin in spe** | „Lohnt sich das für mich?" | `/stampin-up-demonstrator` | Starterset-Anmeldung | | **YouTube-Zuschauerin** | Material zum Video | `/live`, Videobeschreibung | Blogpost + Shop | Mit Schwerpunkt Verkauf sind Bastel-Sucherin und Stammkundin die beiden, für die das Design zuerst arbeitet. **Dazu kommt eine sechste Nutzerin, die im Design oft vergessen wird: die Person, die die Seite pflegt.** Beim Primärziel Pflegbarkeit ist der Redaktionsweg Teil des Produkts, nicht Nebensache. **Wer das ist:** primär **Steffi**. Frank baut die Tools und Skills drumherum. Das hat eine Konsequenz fürs Regelwerk: Es ist **Input für die Tools**, nicht Schulungsmaterial für Steffi. Strukturiert und maschinenlesbar schlägt didaktisch. Steffi arbeitet mit den Tools — die Regeln stecken darin, nicht in einem Dokument, das sie lesen muss. *(Die Tool-Ebene selbst ist aktuell nicht mission critical und wird hier nicht geplant.)* --- ## 5. Scope ### Drin Neuer Theme-Unterbau · neues visuelles System auf Basis der bestehenden Marke · **Regelwerk statt Baukasten** · Startseite, Blogpost, Blog-Hub, Navigation · Produkt- und Angebotsseiten · Recruiting-Strecke · semantische Token-Ebene · Responsive-Modell · Barrierefreiheit (Kontrast, Fokus, Tastatur) · ACF ablösen ### Raus — bewusst nicht Teil dieses Projekts - **Keine URL-Änderungen** an den 2.117 Blogposts. Nicht verhandelbar. - **Keine inhaltliche Überarbeitung des Bestands.** Alte Posts werden migriert, nicht neu geschrieben. - **Kein CMS-Wechsel.** WordPress bleibt — gewechselt wird die Theme-/Building-Ebene darüber. - **Kein Nachbau der 41 Module.** Was neu entsteht, entsteht aus dem Design, nicht aus dem Bestand. - **Kein eigener Shop.** Übergabepunkt zu Stampin' Up! bleibt wie er ist. - **Keine echte Mehrsprachigkeit.** CH- und AT/NL-Seiten bleiben Einzelseiten. - **Kein Community-Bereich, keine App, keine neue Newsletter-Infrastruktur.** ### Später Rechner-Tools zu eigenständigen Reichweiten-Assets ausbauen · Tag-Taxonomie aufräumen · Materiallisten als strukturiertes Datenfeld · automatische Video↔Post-Verknüpfung --- ## 6. Informationsarchitektur (Soll) — Vorschlag **Vier klare Einstiege statt einer flachen Menüliste:** | Einstieg | Bündelt (URLs bleiben) | |---|---| | **Inspiration** | Blog, Videos, Kategorien, Tags, Archiv — ein Hub, gefiltert nach Anlass/Technik/Produkt | | **Produkte** | Produktwelt, Produktreihen, Kataloge, Farben — mit Brücke „von der Idee zum Material" | | **Angebote** | Aktionen, Neu, Produkt des Monats, Sale-A-Bration, Auslaufliste — aktuelles vorn, abgelaufenes archiviert | | **Mitmachen** | Einsteiger, Stampin' Up! erklärt, Demonstrator, Bonus — ein Pfad statt drei parallelen Seiten | Dazu bleibt: Über mich, Kontakt, Newsletter, Tools. **Abgrenzung: Menüumbau ≠ URL-Umbau.** Die vier Einstiege sind Navigations- und Hub-Ebene. Bestehende Seiten behalten ihre URL. Wird doch eine bewegt, gibt es einen 301er und einen Eintrag in der Redirect-Liste. `TODO` — Passt die Bündelung zu Steffis Sicht? Vor allem: Gehören Blog und Video in einen Hub, oder sind das für sie zwei Welten? --- ## 7. Templates & Design-Richtung ### Templates in Prio-Reihenfolge | Prio | Template | Warum | |---|---|---| | **P0** | Blogpost (Single) | 2.117× — größter Hebel, größtes Risiko, und die wichtigste Verkaufsstelle | | **P0** | Startseite | Erster Eindruck, Einstieg in aktuelle Angebote | | **P0** | Header / Navigation / Footer | Trägt die vier Einstiege | | P1 | Blog-Hub / Übersicht | Trägt die neue Inspiration-Ebene | | P1 | Produktkategorie · Angebots-Landingpage | Conversion-Stellen, Schwerpunkt Verkauf | | P2 | Recruiting-Strecke | Wird aufgeräumt, aber nicht zuerst | | P2 | Inhaltsseite · Kontakt/Newsletter · Suche/Archiv · Tools · 404 | Wenig Aufwand, kein Risiko | **Für die Entwürfe zählen zwei:** Startseite und Blogpost. Der Rest folgt daraus. ### Design-Richtung — was gesetzt ist **Bleibt:** Der Stil. MagdaPro, die handschriftlich-verspielte „Note"-Ästhetik, der freundliche, handgemachte Charakter. Das ist Wiedererkennung. **Darf sich bewegen:** Die Farben. Pink und Blau bleiben als Marken-Idee erkennbar, dürfen aber moderner werden — gesättigter, klarer, mit besserer Abstufung zwischen Fläche und Text. Das löst nebenbei ein konkretes Problem: Pink `#f28ca2` auf hellem Grund erfüllt WCAG AA für Fließtext **nicht**. Eine modernisierte Palette macht das von vornherein richtig, statt es nachträglich zu flicken. **Kommt neu dazu:** - **Semantische Token-Ebene** über den Primitiven (`--color-accent`, `--color-text`, `--color-surface` …). Ein saisonaler Farbdreh wird dann eine Token-Änderung statt einer Suchen-und-Ersetzen-Aktion. - **Typo- und Abstands-Skala.** Heute gibt es Tokens für Farbe, aber keine dokumentierte Stufenleiter für Größe und Abstand. Sie ist die wichtigste Regel, die Freiheit trägt: freie Komposition, feste Stufen. - **Zustände.** Hover, Fokus, Aktiv, Deaktiviert, Fehler, Leer — heute nirgends systematisch definiert. - **Responsive-Modell.** Vorschlag: weg vom globalen Downscaling, hin zu `clamp()`-Typo mit echten Umbrüchen zwischen 600 und 1100px. Wird an den Entwürfen sichtbar gemacht, nicht vorher theoretisch entschieden. **Zwei Randbedingungen für die Entwürfe:** 1. **Frei vom Bestand denken.** Nicht fragen „welches der 41 Module passt hier", sondern „was braucht die Seite". 2. **Plattformwahl nicht vorwegnehmen.** Nichts einbauen, was nur ein bestimmter Page-Builder kann. --- ## 8. Vom Entwurf zum Regelwerk Die Reihenfolge ist bewusst: **erst kreativ werden, dann Regeln ableiten.** Nicht umgekehrt. Aus den Entwürfen entsteht kein Baukasten, sondern ein Regelwerk. Adressat sind Franks Tools und Skills, nicht Steffi direkt — also strukturiert und maschinenlesbar, nicht als Styleguide zum Nachlesen. Grober Zuschnitt, wird nach den Visuals konkret: - **Fest** — Farb-Tokens, Typo-Stufen, Abstands-Stufen, Zustände, Kontrastregeln - **Geführt** — Layout-Prinzipien, Bildbehandlung, Rhythmus zwischen Abschnitten, wann welche Textlänge - **Frei** — Komposition, Reihenfolge, Anzahl der Abschnitte, Bildauswahl Der entscheidende Unterschied zu heute: **Früher saß die Leitplanke im Page-Builder** — die Software verhinderte Fehler, indem sie Optionen wegnahm. Künftig sitzt sie im Regelwerk, das Franks Tools ausführen. Freiheit im Ergebnis, Führung im Prozess. Das ist eine echte Anforderung an die Qualität des Regelwerks, kein Nebenprodukt: Es muss so präzise sein, dass ein Skill zuverlässig danach bauen kann. --- ## 9. Die Plattformfrage — nach den Visuals Der Wechsel der Theme-Plattform *ist* das Primärziel. Trotzdem kommt die Entscheidung nach den Entwürfen — weil das Design mitbestimmt, was die Plattform können muss. **Was schon feststeht:** ACF soll raus. WordPress bleibt. Feste Module sind kein Ziel mehr. **Was offen ist:** Gutenberg (mit eigenen Blöcken), Bricks, Elementor, Divi — oder eine Kombination. **Wonach wir das später entscheiden:** - **Wie gut lässt sich das System KI-gestützt bespielen?** Das wichtigste Kriterium. Konkret: Kann ein Skill das Content-Format, in dem eine Seite gespeichert wird, zuverlässig erzeugen und wieder lesen? - Wie viel gestalterische Freiheit bei wie viel struktureller Konsistenz? - Was passiert mit 2.117 Bestandsposts im neuen Rendering? - Wie werden die ACF-Inhalte übernommen? - Portabilität: wie leicht kommt man wieder raus? Die Seite hat schon zwei Plattformwechsel hinter sich — es wird nicht der letzte sein. **Einmal klar gesagt:** Ein Plattformwechsel ist deutlich mehr Arbeit als das bestehende Theme weiterzuentwickeln. Der Gewinn — freie, KI-gestützte Pflege ohne Entwickler — kann das wert sein. Das größte Risiko sitzt aber nicht beim neuen Design, sondern bei den 2.117 Bestandsposts. --- ## 10. Ebenfalls später - **Analytics aufräumen** — drei Stacks, einer ohne Token. Vor der ersten echten Erfolgsmessung fällig. - **Baseline messen** — Core Web Vitals, Top-100-Posts nach Traffic, Ranking-Snapshot. Kann jederzeit parallel laufen. - **Rolle des Blogs** — Archiv pflegen oder Publikation wiederbeleben? Wird konkret beim Blog-Hub. - **Angebots-Lifecycle** — Vorschlag: abgelaufene Aktionen online lassen fürs SEO, sichtbar als abgelaufen markieren, aus der Navigation nehmen. --- ## 11. Risiken | Risiko | Gegenmaßnahme | |---|---| | **Freiheit ohne wirksame Regeln** — die Seite läuft optisch auseinander. Genau das Problem, das die Module ursprünglich gelöst haben. | Das Regelwerk muss explizit und prüfbar sein, nicht wohlmeinend. Plus ein leichter Konsistenz-Check bei neuen Seiten. | | **Plattformwechsel trifft 2.117 Bestandsposts** — neues Rendering, alte Shortcodes, ACF-Inhalte | Vor der Plattformwahl an echten Altposts testen, nicht an Dummy-Content. Stichprobe über **alle** Jahrgänge. | | **SEO-Einbruch** — die Posts sind der Traffic | URLs einfrieren. Rank Math + Schema 1:1 übernehmen. Baseline vor Launch, Rollback bereit. | | **Neuer Lock-in** — Builder-Content ist oft nicht portabel | Als Kriterium in die Plattformwahl. Dritter Wechsel soll nicht wieder ein Neubau werden. | | **Responsive-Umstellung** trifft jede Seite gleichzeitig | Eigene Phase, nicht nebenbei | | **Shop-/Affiliate-Links in Altposts** — direkt umsatzrelevant | Vor dem Umbau inventarisieren | | **Scope-Drift** — „wenn wir eh dabei sind…" | Abschnitt 5 als Filter. Neues Thema → Liste „Später". | --- ## 12. Harte Regeln für den Launch Unabhängig davon, welche Plattform es wird: - Keine der 2.117 Blog-URLs liefert 404 oder einen unbeabsichtigten Redirect - Rank-Math-Meta und Article-Schema bleiben identisch - Core Web Vitals gleich oder besser als vorher - Blogpost-Rendering geprüft mit Stichproben aus **jedem** Jahrgang - Lesbar und bedienbar auf 375 / 768 / 1024 / 1440 / 1920 px - Kontrast WCAG AA — die neue Palette erfüllt das von Anfang an - **Steffi legt eine neue Seite mit den Tools an — auf Anhieb optisch konsistent, ohne dass jemand Code anfasst.** Das ist die Abnahme fürs Primärziel. --- ## 13. Nächster Schritt **Visuals.** 2–3 differenzierte Entwürfe für **Startseite** und **Blogpost** — Stil erhalten, Farben modernisiert, Materialbrücke zum Shop als wiederkehrendes Element, frei vom Bestandsdenken. Daran entscheidet sich die Richtung. Daraus dann das Regelwerk (Abschnitt 8), und erst danach die Plattformfrage (Abschnitt 9) mit dem Design als Anforderungsliste. Parallel möglich, unabhängig von allem: Baseline messen.