Standen bisher als freier Text neben dem Formular. Jetzt in einer eigenen Karte
mit demselben Verlaufsrand-Look wie der Rest der Seite, zusaetzlich mit einem
sanften Akzent-Glow (wie bei den Charakter-Story-Boxen) und kleinen Icons vor
den Ueberschriften, damit die wichtigen Kontaktinfos etwas mehr Aufmerksamkeit
bekommen, ohne aus dem Design zu fallen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Badges ("NEU", "HANDGEMACHT" ...) sitzen direkt auf Produktfotos mit
unterschiedlichsten Hintergründen — die alte, sehr transparente Pille
ging auf manchen Fotos optisch unter. Gleiche Farben/gleicher Stil,
aber kräftigerer (deutlich weniger transparenter) Hintergrund + eigener
Rand + dezenter Schlagschatten hinterm Text für Kontrast auf jedem
Untergrund.
Den eigentlichen Grund für das wacklige Verhalten beim Installieren des
Admin-Bereichs gefunden: Sveltia CMS liest selbst den "logo"-Eintrag in
config.yml (eigentlich nur fürs Branding IN der CMS-Oberfläche gedacht)
und fügt daraus automatisch EIGENE Icon-/Manifest-Verknüpfungen in den
<head> ein — u.a. ein live generiertes, eigenes Manifest als blob:-URL
— NACH unseren eigenen. Zwei "rel=manifest"-Links gleichzeitig sind
technisch erlaubt, aber welcher beim Installieren gewinnt, war nicht
zuverlässig vorhersagbar. Das erklärt, warum es mal geklappt hat und
mal nicht, unabhängig vom Icon-Inhalt selbst.
Fix: ein MutationObserver entfernt Sveltias eigene, automatisch
eingefügte Icon-/Manifest-Verknüpfungen sofort wieder, sobald sie
auftauchen — übrig bleiben ausschließlich unsere eigenen (Favicon =
echtes Logo, Install-Icon = lila V). Verifiziert: nach vollständigem
Laden inkl. Sveltia sind nur noch unsere 5 eigenen Verknüpfungen im
<head> vorhanden, 0 Installability-Errors.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Wichtige Verhaltensänderung: ein Charakter (aus dem Kategorien-Bereich im
Admin) ist ab jetzt nur noch eine VORBEREITETE Definition. Er erscheint
auf der Seite NUR, wenn ihm im Admin tatsächlich ein Produkt mit genau
diesem Charakter-Code zugeordnet wurde (das Feld "Charakter" am
Produkt = seine "Rolle"). Ohne zugeordnetes Produkt taucht er nirgends
mehr auf — auch nicht mehr als Platzhalter-Karte mit seinem Namen.
Konkret: HasiGott und Mama Hase verschwinden von der Hase-Seite, weil
für sie (noch) keine Produkte im Admin angelegt wurden. Sobald VanVan
ein Produkt mit charakter: hasigott anlegt, erscheint er automatisch.
Familien ganz ohne Produkte (Kuh, Wal, Oktopus, Schildkröte, Pinguin)
zeigen weiterhin die bereits vorbereiteten, namenlosen "Kommt bald"-
Karten (unverändert) — nur die NAMENTLICHE Vorab-Anzeige einzelner
Charaktere ohne Produkt entfällt.
Zusätzlich: der "Mehr über mich"-Button in der Story-Box hatte keinen
erklärenden Text — man wusste nicht, wohin/wozu er führt. Jetzt steht
davor "Wenn du mehr über mich erfahren möchtest, dann klicke [hier →]"
in allen 4 Sprachen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Logo, Markenname, Hauptnavigation, Sprachumschalter, Konto-/Warenkorb-
Icons sowie die zweite Kategorien-Leiste darunter sind jetzt insgesamt
etwas größer/luftiger (Schriftgrößen, Icon-Maße, Innenabstände moderat
erhöht) — wie gewünscht "bissl größer" statt eines kompletten Redesigns.
Dabei einen kleinen, durch die Vergrößerung ausgelösten Folgefehler
gleich mitbehoben: auf schmalen Handy-Breiten (<480px) hätte der neue,
größere Header nicht mehr komplett reingepasst und den Menü-Button (☰)
rechts aus dem sichtbaren Bereich geschoben, unerreichbar für Klicks.
Neue Media Query verkleinert dort gezielt Logo/Markentext und blendet
den Sprachumschalter-Text (bleibt nur der Globus) sowie den Pfeil aus —
geprüft: kein horizontales Überlaufen mehr bei 420px, 700px und
Desktop-Breite.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Fix: Auf der Haupt-Shop-Seite (/shop/) wirkten Produktkarten in derselben
Reihe unterschiedlich groß, je nachdem wie lang Titel/Beschreibung waren.
Ursache: jede Karte steckt dort zusätzlich in einem .product-slot-Div
(fürs Filtern/Sortieren per JS). CSS Grid streckt dieses Div zwar auf die
volle Zeilenhöhe, die Karte DARIN füllte diese Höhe aber nicht aus (ein
normales <div> reicht "stretch" nicht an sein Kind weiter). Jetzt ist
das Slot-Div selbst ein Flex-Container, wodurch sich die Karte darin auf
die volle Höhe ausdehnt — alle Karten einer Reihe sind jetzt exakt
gleich groß, unabhängig von der Textlänge.
Admin: "🚚 Eigene Versandkosten je Land" steht jetzt direkt unter
"🏷️ Rabatte" (vorher lag "Auf Lager" dazwischen).
Die "🤝 Partner-Rabattcodes" bereits vorhandene Sektion sitzt weiterhin
direkt unter "🎟️ Gutscheincodes" in der linken Bereichsliste (per
Screenshot verifiziert) — falls sie nicht sichtbar war, lag es an
gecachtem Admin-Tab, nicht an fehlender Konfiguration.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Mehrere Feinschliff-Punkte auf den Tier-Familien-Seiten (z.B. "Hase"):
- Abstand zwischen der Story-Box und der Kartenreihe verkleinert (vorher
durch zwei separate Section-Umrandungen unnötig groß) — beide Bereiche
teilen sich jetzt eine gemeinsame Section statt zwei gestapelte.
- Platzhalter-Karten (Charaktere ohne Foto) bekommen jetzt exakt die
gleiche Bildhöhe wie eine Karte mit echtem Foto (vorher griff nur die
allgemeine Mindesthöhe, wirkte kleiner/anders proportioniert).
- Neues optionales Feld `bannerName` an der Unterkategorie: überschreibt
NUR die große Bannerüberschrift (Breadcrumb/Chips bleiben unverändert)
— für "Hase" jetzt auf "HasiDog" gesetzt, den bekanntesten Charakter
der Familie.
- Unterkategorie-Seiten ganz ohne Produkte/Charaktere (z.B. Maschen-
markierer, Holzknöpfe) zeigen jetzt schon 3 vorbereitete Platzhalter-
Karten im selben Kartenstil statt nur einer nackten Textzeile — die
Seite "sieht schon fertig aus", auch bevor echte Produkte da sind.
Nebenbei einen Bug behoben: bei Unterkategorien ohne Charaktere, aber
MIT echten Produkten, erschien vorher zusätzlich fälschlich der
"noch keine Produkte"-Hinweis über der echten Produktreihe.
Neu: Mini-Bildkarussell direkt auf jeder Produktkarte (Shop-Grid,
Charakter-Kacheln, "Weitere Modelle", Sale-Seite, Startseite — überall
wo ProductCard verwendet wird). Sobald ein Produkt mehrere Fotos hat
(Admin-Bereich erlaubt das bereits über das Foto-Listenfeld), erscheinen
dezente ‹/›-Pfeile plus Punkte-Indikator direkt auf der Karte, ganz ohne
erst die Produktseite öffnen zu müssen.
Neu: Partner-Rabattcodes können im Admin jetzt gezielt auf "gilt NICHT
für Artikel, die schon im Sale sind" gestellt werden (giltAufSale:
false) — der Rabatt berechnet sich dann nur noch auf den regulär
bepreisten Teil des Warenkorbs, damit sich der Partner-Rabatt nicht
zusätzlich auf einen bereits reduzierten Preis obendrauf summiert.
Standardverhalten (Feld leer/true) bleibt wie bisher unverändert.
Alle Änderungen lokal mit Test-Daten durchgespielt (mehrere Testfotos,
Testprodukt im Sale + Partnercode mit/ohne giltAufSale, leere
Unterkategorie-Seite) und vor dem Commit wieder zurückgesetzt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die "Hallo, ich bin ..."-Box wirkte leer und generisch. Ohne Text zu
ändern, bekommt sie jetzt: ein großes, dezentes Anführungszeichen als
Wasserzeichen oben rechts (im Marken-Verlauf Cyan/Lila/Rosa), einen
sanften Farbschimmer rund um die ganze Box statt des flachen
Standard-Schattens, eine leicht verlaufsgefärbte Überschrift und einen
eigens gestalteten "hier"-Button im Akzent-Verlauf statt schlichtem
Outline-Rahmen (inkl. Hover-Anhebung). Bleibt ruhig/professionell,
fügt sich in den bestehenden Kartenstil der Seite ein.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher stand die persönliche Charaktergeschichte (Hallo-ich-bin-Text)
direkt in derselben Karte wie Foto und Kaufinfos. Jetzt zweigeteilt:
- Oben: jede Geschichte in einer eigenen, vollen Breite Karte
(character-stories/.character-story), übereinander gestapelt.
- Darunter: eine Kartenreihe wie im Shop-Grid, die für Charaktere mit
echtem Produkt direkt die vorhandene ProductCard-Komponente wiederverwendet
(Foto, Badges, Preis, Kurzbeschreibung — 1:1 wie überall sonst im Shop),
für Charaktere ohne Produkt ein passender Platzhalter im gleichen
Kartenstil. Keine Geschichten mehr in dieser Reihe.
Verifiziert per Puppeteer: alle drei Geschichten-Boxen ohne Preis, alle
drei Shop-Karten ohne Geschichtstext, HasiDog-Karte zeigt echten Preis
(42,00 € durchgestrichen, 25,00 €) über die wiederverwendete ProductCard-
Komponente.
Die großen abwechselnden Foto/Text-Boxen (voller Formularbreite je
Charakter, viel Leerraum bei kurzem Text) sind ersetzt durch kompakte
Karten im exakt gleichen Stil wie die Produktkarten im Shop-Grid: Foto
oben, Text darunter in voller Kartenbreite, alle Charaktere einer Familie
nebeneinander in einer Reihe statt einzeln untereinander.
Betrifft alle Tier-Familien (Hase, Kuh, Wal, Oktopus, Schildkröte,
Pinguin) — wächst weiterhin automatisch mit, sobald neue Charaktere
ergänzt werden. Die "Über die Kreative"-Seite nutzt dieselbe .intro-
CSS-Klasse für ihr eigenes Layout und ist unangetastet geblieben.
Verifiziert per Puppeteer: alle drei Hase-Karten korrekt (Foto, Text,
Link), "Über die Kreative" weiterhin fehlerfrei und unverändert.
Auf den Tier-Familien-Seiten (z.B. /shop/diy-plushies/hase/) standen Foto
und Text bisher als freischwebende Elemente nebeneinander, ohne Rahmen.
Jetzt bekommen beide Seiten die gleiche Verlaufsrand-"Kisten"-Optik wie
die Produktkarten im Shop-Grid — zwei gleichwertige, gerahmte Boxen
nebeneinander statt unauffälligem Text neben einem randlosen Foto.
Zusätzlich: HasiDog (1. Charakter der Hase-Familie) hat jetzt den Text
links und das Foto rechts (vorher umgekehrt) — die Abwechslung für
weitere Charaktere (HasiGott, Mama Hase, ...) bleibt erhalten, nur die
Startseite ist gespiegelt.
Verifiziert per Puppeteer-Screenshot: alle drei Hase-Charaktere zeigen
jetzt beide Karten im Verlaufsrand-Stil, HasiDog korrekt mit Text links.
Innerhalb eines Portrait-Frames (z.B. Charakter-Box ohne zugeordnetes
Produkt wie HasiGott/Mama Hase) hatte der Platzhalter keinen Rahmen/Ring,
während echte Fotos schon den dunklen Ring + Akzent-Leuchtrand hatten
(.portrait-frame img). Jetzt bekommt .img-placeholder innerhalb eines
Portrait-Frames genau denselben Rahmen — behält dabei seine eigene
Flex-Zentrierung für den "Produktfoto folgt"-Text.
Verifiziert per Puppeteer: Platzhalter hat jetzt denselben box-shadow-
Ring wie echte Fotos, Textzentrierung (display:flex) bleibt erhalten.
.price-old hatte nur in ProductCard.astro (Produktkarten im Shop-Grid)
eine CSS-Regel — auf der Produktdetailseite fehlte sie sitesweit
komplett, der alte Preis stand deshalb dort einfach nur normal daneben
statt durchgestrichen zu sein. Jetzt global definiert, gilt überall.
Verifiziert per Puppeteer: text-decoration ist jetzt line-through.
Ursache gefunden: wenn der Lagerbestand komplett im Warenkorb war, bekam
der "In den Warenkorb"-Button den kompletten langen Hinweissatz als
Text ("Maximale verfügbare Menge ist bereits im Warenkorb"). Der Button
wurde dadurch riesig (3 Zeilen) und hat die danebenliegende
Mengen-Steuerung samt "+"-Button optisch verschluckt — auf schmalen
Bildschirmen war der "+" komplett unsichtbar.
Fix: Der Button bekommt jetzt eine kurze Beschriftung ("Bereits im
Warenkorb"), der ausführliche Satz steht weiterhin im separaten
Hinweistext darunter. Zusätzlich .qty-row jetzt mit flex-wrap
abgesichert, damit ein zu langer Button-Text künftig einfach umbricht
statt die Mengen-Steuerung zu überlagern.
Verifiziert per Puppeteer auf schmalem Viewport (420px): "+" jetzt
sichtbar und klickbar, Button zeigt Kurztext, Hinweis zeigt weiterhin
den vollen Satz.
Die Chip-Reihe war linksbündig statt zentriert und nutzte einfache
Einzelfarb-Pillen. Jetzt mittig auf der Seite und im selben
Verlaufsrand-Stil wie die Karten der Seite (cyan → lila → rosa,
sanftes Leuchten, Hover-Anhebung) — wirkt dadurch "speziell" und
markentypisch, bleibt aber ruhig genug für den professionellen
Gesamtlook.
Verifiziert per Puppeteer-Screenshot.
Die vorherige gestrichelte Linie wirkte noch zu "einfach nur Striche".
Jetzt fließt ein sanfter, an den Rändern ausblendender Verlauf in den
drei Marken-Farben (wie der Karten-Rand der Seite) über die volle
Breite, mit einem kleinen glänzenden Knopf in der Mitte — eine dezente
Anspielung auf's Nähen/Basteln, passend zur Marke, ohne aufdringlich zu
wirken.
Verifiziert per Puppeteer-Screenshot mit zwei Artikeln im Warenkorb.
Passend zum "Bastelbedarf"-Charme: die Trennung zwischen Warenkorb-
Positionen ist jetzt ein gestrichelter Verlaufs-Stich in Marken-Akzent
und Lila statt einer kaum sichtbaren grauen 1px-Linie — fällt deutlich
mehr auf, bleibt aber dezent genug für den professionellen Rest der
Seite.
Verifiziert per Puppeteer-Screenshot mit zwei Artikeln im Warenkorb.
Jeder Artikel im Warenkorb hat jetzt eine Checkbox "Jetzt kaufen". Nur
angehakte Artikel zählen zur Zwischensumme, zum Versand, zum Gutschein
und zum Checkout — abgewählte Artikel bleiben sichtbar (leicht
abgedunkelt, mit "Bleibt im Warenkorb, wird noch nicht gekauft"-Hinweis)
im Warenkorb liegen, ohne mitgekauft zu werden. Die Auswahl wird pro
Artikel gespeichert (localStorage) und bleibt bis zur nächsten Änderung
bestehen. Der Checkout übernimmt automatisch nur die ausgewählten
Artikel.
Verifiziert per Puppeteer: Abwählen eines Artikels reduziert Summe/
Rechnungsliste sofort korrekt, Checkout zeigt nur den ausgewählten
Artikel, keine Konsolenfehler.
Die Zwischensumme-Box zeigte bisher nur die Endsumme, ohne die
einzelnen Artikel aufzulisten. Jetzt steht dort — genau wie beim
Checkout — eine kompakte Rechnungsübersicht (Menge × Artikel →
Zeilenpreis) direkt über der Zwischensumme.
Verifiziert per Puppeteer mit zwei verschiedenen Artikeln im Warenkorb:
Positionsliste zeigt korrekte Mengen/Preise, keine Konsolenfehler.
- Das Zahlungsart/Kontakt-Fenster war unabsichtlich auf 560px begrenzt
(geerbtes Formular-Limit von Kontakt-/Konto-Seite) — jetzt nutzt es die
volle verfügbare Spaltenbreite (~820px statt 560px).
- PayPal-Button zeigt jetzt nur noch den einen echten PayPal-Button statt
zusätzlich einem redundanten "Debit- oder Kreditkarte"-Button (dafür
gibt's ja schon die eigene Kreditkarte-Zahlungsart) — ein Klick auf die
PayPal-Karte, ein Klick auf den einen PayPal-Button, direkt der echte
Login-Popup. Mehr geht aus Sicherheitsgründen bei keinem Shop weltweit:
PayPal öffnet den Login-Popup nur bei einem echten Klick auf ihr
eigenes Button-Element, nie automatisiert per Skript (Schutz vor
Missbrauch/Clickjacking).
- Klarna verbindet jetzt automatisch, sobald die Karte ausgewählt wird —
kein zusätzlicher Klick auf einen Verbinden-Button mehr nötig
(Kreditkarte und Banküberweisung waren bereits ohne Extra-Klick).
Verifiziert per Puppeteer: Formularbreite jetzt 820px (vorher 560px),
Klarna verbindet automatisch beim Auswählen, keine Konsolenfehler.
- Zwei neue Unterkategorien unter "Hase" angelegt: "HasiGott" und "Mama
Hase", jeweils mit eigenem Charaktertext, bereit für echte Produktfotos
sobald VanVan sie im Adminbereich hinzufügt.
- Neue Logik: Innerhalb einer Tier-Familie (gleicher Slug-Präfix, z.B.
"hase-*") wechselt die Vorstellungsbox jetzt automatisch die Seite ab —
1. Mitglied Foto links/Text rechts (HasiDog, unverändert), 2. Mitglied
Foto rechts/Text links (HasiGott), 3. wieder links (Mama Hase), und so
weiter für alle künftigen Varianten.
- Kategorie-Seiten (z.B. "DIY Plushies") zeigen jetzt eine
Hauptkategorie-Überschrift zwischen der Unterkategorien-Chip-Reihe und
der eigentlichen Produktreihe darunter.
Verifiziert per Puppeteer gegen den echten Build: neue Seiten laden
fehlerfrei, HasiDog bleibt korrekt "nicht gespiegelt" (1. Familienmitglied),
Hauptkategorie-Überschrift sitzt an der richtigen Stelle.
- Zahlungsart-Auswahl umgebaut: jede Karte (PayPal/Klarna/Kreditkarte/
Banküberweisung) klappt den passenden "Verbinden"-Bereich jetzt SOFORT
in sich selbst auf, sobald man draufklickt — kein Zwischenschritt, kein
separates Panel weiter unten mehr. Rein CSS-gesteuert (:has()), reagiert
augenblicklich auf den Klick.
- Unterkategorie-Vorstellungsbox (z.B. HasiDog) zeigt jetzt wieder den
persönlichen Charaktertext ("Ich bin klein, knuffig, wuschelig...")
statt der Produktbeschreibung, plus den Cliffhanger-Satz "Wenn du mehr
über mich erfahren möchtest, dann klicke" vor dem Button — für alle 6
Tier-Serien (Kuh, Hase, Wal, Oktopus, Schildkröte, Pinguin). Foto und
Überschrift sind jetzt anklickbar und führen zur echten Produktseite,
damit trotz des reinen Charaktertexts nichts an Kaufbarkeit verloren
geht. Textspalte gegenüber Fotospalte verbreitert.
Verifiziert per Puppeteer gegen den echten Build: PayPal-Karte zeigt beim
Laden sofort den echten SDK-Button, Kreditkarte/Banküberweisung klappen
unmittelbar beim Klick auf (ohne Wartezeit geprüft), Bankdaten und
Charaktertext korrekt, keine Konsolenfehler.
- Breadcrumb-Schrift siteweit leicht vergrößert; die aktuelle Ebene
(Hauptkategorie auf Kategorie-/Produktseiten, Unterkategorie auf
Unterkategorie-Seiten) ist jetzt fett/weiß hervorgehoben statt nur
gleichförmig grau — auf allen Kategorie-, Unterkategorie- und
Produktseiten in allen 4 Sprachen.
- Unterkategorie-Seiten (Kuh, Hase, Wal, Oktopus, Schildkröte, Pinguin)
zeigen jetzt eine "Weitere Modelle"-Überschrift über der Produktreihe
unterhalb des featured Produkts — die Seite ist jetzt sichtbar darauf
ausgelegt, dass mit der Zeit beliebig viele weitere Varianten pro Serie
dazukommen, nicht nur ein einzelnes Vorzeige-Produkt.
Verifiziert per Puppeteer-Screenshot inkl. Test mit einem zweiten Produkt
in derselben Unterkategorie (danach wieder entfernt) — Layout skaliert
sauber.
Standard-Set für deutsche Online-Shops recherchiert und umgesetzt: PayPal,
Klarna, Kreditkarte (Visa & Mastercard, neu) und Banküberweisung (Vorkasse).
- PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-
Client-ID, kostenlos & ohne Konto testbar). Klick öffnet den echten
PayPal-Login-Popup und schließt eine (Test-)Zahlung wirklich ab. Für den
Live-Betrieb genügt später der Tausch gegen VanVans echte (kostenlose)
PayPal-Business-Client-ID.
- Banküberweisung (Vorkasse): braucht gar keine externe Anbindung — zeigt
jetzt VanVans echte Kontodaten an, die sie im neuen Adminbereich-Feld
"🏦 Bankverbindung" selbst einträgt. Damit ist diese Zahlungsart schon
zu 100% fertig, ganz ohne Drittanbieter.
- Klarna & Kreditkarte: echte Live-Anbindung braucht ein Händlerkonto bzw.
einen Zahlungsdienstleister (Phase 2, Cloudflare Worker). Bis dahin ein
sauber gestalteter, funktionierender Verbindungs-/Eingabe-Ablauf, der
1:1 austauschbar ist, sobald die echten Zugänge da sind.
- Auswahl einer Zahlungsart klappt jetzt direkt das passende Panel auf
statt nur eine Radiobox zu markieren.
Verifiziert per Puppeteer-Funktionstest gegen den echten Build: PayPal-
SDK lädt und rendert einen echten Button (iframe), Kreditkartenfelder,
Klarna-Demo-Verbindung und echte Bankdaten-Anzeige funktionieren
fehlerfrei, Adminbereich lädt weiterhin ohne Konfigurationsfehler.
"1. Zahlungsart" und "2. Kontakt & Lieferadresse" stehen jetzt Seite an
Seite, getrennt durch eine dezente Verlaufslinie mit kleinem
Garnrollen-Symbol in der Mitte (Naht-Motiv, passend zu "Bastelbedarf").
Auf schmalen Bildschirmen fällt die Trennung automatisch zurück auf eine
horizontale Linie und die Spalten stapeln sich normal.
Zusätzlich Feinschliff an der Sidebar und der Bestellübersicht:
- Sidebar (Gutschein/Versandhinweis) bekommt einen farbigen Akzentstreifen
links und eine gestrichelte "genähte" Trennlinie statt einer nüchternen
durchgezogenen Linie, plus Lieferwagen-Icon vor "Versandhinweis".
- "Gesamt"-Zeile in der Bestellübersicht wie ein Kassenbon-Abriss
(gestrichelte Linie) mit dem Betrag in Marken-Verlaufsfarbe.
- Eigene, zum Radiobutton-Stil passende Checkbox-Optik für AGB/Widerruf
statt der nüchternen Browser-Standard-Kästchen.
Verifiziert per Puppeteer-Screenshot (Desktop + Mobile), keine
Konsolenfehler.
Icon-Kacheln bei PayPal/Klarna/Banküberweisung von 34px auf 52px vergrößert
und mit echten Marken-Farbverläufen statt flacher Einzelfarbe versehen
(PayPal-Blau, Klarna-Rosa mit schwarzem Logo, dezentes Bank-Blaugrau).
Auswahlkarten insgesamt größer, mit Verlaufshintergrund, größerem
Radio-Button und weicherem Hover-/Auswahl-Glow für einen fertigeren,
"aus einem Guss"-Look.
Der große blaue "Jetzt entdecken"-Button neben dem featured Produkt (z.B.
HasiDog) fällt weg. Der kleine Text-Link ("hier"/"here"/"da"/"ici" zur
externen HasiDog-Universum-Seite) ist jetzt selbst ein richtiger,
klickbarer Button statt eines unauffälligen Inline-Links.
- Neues Rabatt-System: Prozent-/Betrag-Rabatt mit optionalem Ablaufdatum,
Mengenrabatt-Staffel pro Produkt, sowie site-weite Gutscheincodes.
Wird live im Warenkorb/Checkout berechnet (src/data/rabatt.ts,
src/data/gutscheine.ts, cart.ts) und ist im Adminbereich direkt unter dem
Preis bearbeitbar (config.yml: "Rabatte" + neue Collection
"Gutscheincodes"). Effektiver Preis + Rabatt-Badge auf Produktkarten und
Produktseite sichtbar.
- Mengen-Stepper auf der Produktseite vergrößert (bereits vorbereitet,
jetzt mit Build/Test verifiziert).
- Zahlungsart im Checkout auf Platz 1, mit markenfarbigen, fertig
gestalteten Buttons (PayPal/Klarna/Banküberweisung).
- Unterkategorie-Seiten zeigen jetzt VanVans eigene Produktbeschreibung
und das echte Fotos des Produkts statt Platzhaltertext, mit kleinem
Link zur HasiDog-Universum-Seite statt großem Button.
Verifiziert per Puppeteer-Funktionstest gegen den echten Production-Build
(Rabatt-Berechnung, Mengenrabatt, Gutschein-Einlösung, Checkout-Summary,
keine Konsolenfehler).
- Persönliche Vorstellung jedes DIY-Plushies-Charakters auf der jeweiligen
Unterkategorie-Seite (dezente Box im Kartenstil), inkl. eigener HasiDog-Seite
mit "Mehr über HasiDog"-Button
- Beschreibungstexte "DIY Plushies" und "Häkelzubehör" angepasst (Startseite +
Kategorieseiten, gemeinsame Datenquelle)
- Shop-Filter erweitert: Unterkategorien jetzt gruppiert unter ihrer Hauptkategorie
wählbar, inkl. Filterlogik
- Shop-Bannerbild jetzt auch auf allen Kategorie- und Unterkategorie-Seiten,
gleiche Größe/Abstände/Responsivität wie im Shop
- Keine Design-Änderung: bestehende Farben, Typografie, Karten, Buttons, Abstände
vollständig erhalten, alles fügt sich nahtlos ins bestehende Layout ein
- Alle Änderungen in DE/EN/CH/FR umgesetzt, Link-Audit durchgeführt
