1. Neue Seite /konto/angemeldet/ (alle 4 Sprachen): zeigt, was Kund:innen nach
dem Anmelden sehen - Begruessung, Kennzahlen, Bestellhistorie mit farbigem
Bestellstatus, Sendungsverfolgung (echter DHL-Link), Rechnung/Nochmal-
bestellen, Wunschliste, "Zuletzt angesehen" und Profildaten. Klar als
Vorschau gekennzeichnet: es gibt noch kein echtes Login und keine Datenbank
(Phase 2), die Bestellungen sind Beispieldaten fuer die Gestaltung. Von der
Login-Seite aus verlinkt, damit die Ansicht ueberhaupt erreichbar ist.
2. "Ueber die Kreative": der erste Abschnitt ihrer Geschichte ("Meine Reise
begann mit einer einzigen Masche") steht jetzt direkt neben dem Foto statt
darunter. Foto bleibt beim Lesen sichtbar (sticky), die restlichen
Abschnitte folgen wie bisher darunter.
3. Kategorie-Seiten: der farbige Kreis um das Emoji bei "Hauptkategorie" ist
entfernt, das Emoji steht jetzt frei neben der Ueberschrift.
Dabei gefundener und behobener eigener Fehler: das noetige "align-items: start"
fuer das neue Nebeneinander-Layout hat im gestapelten Handy-Layout die
Grid-Zeile zu niedrig berechnet, wodurch das Foto 80px in den Text darunter
ragte (per Messung im Browser nachgewiesen, nicht nur per Screenshot geraten).
Jetzt sauber auf Bildschirme ab 901px begrenzt - Handy misst 24px Abstand.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Neue HeartRating-Komponente (Herzen statt Sterne, Lila-Babyblau-Verlauf wie
der Rest der Markenoptik) + komplettes Rezensions-System:
- Produktkarten: Bewertungszeile (Herzen + Anzahl) unter dem Titel, nur wenn
Bewertungen vorhanden sind.
- Produktseite: volle "Kundenrezensionen"-Sektion mit Durchschnitt und
einzelnen Rezensionen (Name, Herzen, Datum, Text) bzw. "Noch keine
Bewertungen"-Hinweis.
- Shop-Filter: neuer "Mindestbewertung"-Filter im Filter-Sidebar + neue
Sortierung "Beste Bewertung".
- Startseite: "Was unsere Kund:innen sagen"-Sektion mit Gesamtbewertung und
den 3 neuesten Rezensionen - erscheint automatisch, sobald die erste echte
Bewertung existiert.
- Adminbereich: neues Feld "Bewertungen" pro Produkt (Name/Herzen/Text/Datum),
mit deutlichem Hinweis, dass hier nur echte Kundenrueckmeldungen eingetragen
werden duerfen - erfundene Bewertungen sind in Deutschland/der EU gesetzlich
verboten (UWG). Deshalb bewusst OHNE Beispiel-Bewertungen im Code: alle
Bereiche starten leer und blenden sich automatisch ein, sobald VanVan die
erste echte Rezension eintraegt.
Mit temporaeren Testdaten end-to-end durchgetestet (Herzen-Darstellung,
Rezensions-Section, Filter, Startseiten-Sektion) und vor dem Commit wieder
aus den echten Produktdaten entfernt. Gilt fuer alle 4 Sprachen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die zwei ueberlappenden Kreise (Visa/Mastercard-Anmutung) beim
Kreditkarte-Zahlungsoption wirkten wie ein fremdes Marken-Logo statt einem
neutralen eigenen Icon. Ersetzt durch ein schlichtes SVG-Kartensymbol, im
gleichen Stil wie die anderen Zahlungsarten-Icons (PayPal/Klarna).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Zwei Fotos betroffen:
1. "Ueber die Kreative"-Seite: eine alte, spezifischere CSS-Regel
(.intro .portrait-frame.portrait img) hat lautlos die bereits einmal
gefixte 2:3-Bildkorrektur wieder auf 1:1 zurueckgesetzt (per Computed-
Style-Debug bestaetigt: ratio war 1/1 statt 2/3). Diese Regel stammte aus
einem laengst ersetzten Layout (Foto+Text nebeneinander), das nirgends
mehr benutzt wird, ausser eben ungewollt hier durch geteilte Klassennamen.
aspect-ratio aus dieser Regel entfernt, die 2/3-Regel greift jetzt wieder.
2. Startseite "Die Kreative"-Bereich (vanvan-portrait.png, 1122x1402 ≈ 4/5):
nutzte noch die allgemeine 1:1-Regel und schnitt das Foto ebenfalls
quadratisch zu. Eigenes Seitenverhaeltnis (4/5) ergaenzt, width/height
Attribute korrigiert (640x800 statt 640x640) fuer korrekte Bildproportion
schon vor dem CSS-Laden.
Per Screenshot auf Desktop und Mobil verifiziert: beide Fotos jetzt komplett
sichtbar, inkl. Oktopus- und Schildkroeten-Plushie.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Der native <select> mit optgroups zeigte Kuh/Hase/Wal/Oktopus/Schildkroete/
Pinguin zwar technisch an, aber in der schmucklosen Browser-eigenen Liste
kaum erkennbar (kein Kontrast, keine Struktur). Ersetzt durch ein eigenes,
zum Rest der Seite passendes Dropdown (Verlaufsrand-Look wie beim
Sprach-Umschalter): Hauptkategorien mit Icon als Gruppen-Header, Tier-
Unterkategorien darunter eingerueckt mit denselben freundlichen Namen wie auf
den Kategorie-Seiten ("Kuh „Frieda"", "Hase „HasiDog"" usw.) statt schlichtem
Kategorienamen. Filterlogik, URL-Preset (?kategorie=) und Barrierefreiheit
(role=listbox/option, aria-selected) unveraendert erhalten. Gilt fuer alle 4
Sprachen, gebaut und per Screenshot in offenem und geschlossenem Zustand
geprueft.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Beide Beschriftungen waren identisch schlichter grauer Kleinschrift-Text, kaum
von normalem Fliesstext zu unterscheiden. Jetzt: "Unterkategorien" bekommt ein
kleines Icon + zwei kurze Verlaufslinien als dezenten Trenner, "Hauptkategorie"
zusaetzlich einen Farbverlaufs-Icon-Kreis (Kategorie-Icon) und einen schmalen
Leucht-Trenner darunter, der die eigentliche Produktreihe einleitet - bewusst
mit den schon vorhandenen Marken-Verlaufsfarben statt neuer Effekte.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Auf Wunsch geprueft, was in den Rechtstexten laut Gesetz zwingend stehen muss
(unabhaengig von VanVans persoenlichen Daten, die weiterhin als Platzhalter
bleiben). Ergaenzt:
- Impressum: veraltete Rechtsgrundlage "§ 5 TMG" korrigiert zu "§ 5 DDG"
(Digitale-Dienste-Gesetz hat das TMG im Mai 2024 abgeloest).
- AGB § 4: Kreditkarte als Zahlungsart ergaenzt (ist seit heute im Checkout
echt waehlbar, fehlte aber noch im Rechtstext).
- AGB § 10: Pflicht-Vorbehalt fuer zwingende Verbraucherschutzvorschriften
bei Rechtswahl deutschen Rechts gegenueber EU-Verbraucher:innen (Art. 6
Rom-I-VO).
- Datenschutzerklaerung: fehlenden Pflichtabschnitt "Kontaktformular" als
eigenen Verarbeitungszweck ergaenzt, Widerrufsrecht der Einwilligung
(Art. 7 Abs. 3 DSGVO), Pflichthinweis zu automatisierter Entscheidungs-
findung/Profiling (Art. 22 DSGVO) und konkretere Beschwerderecht-Formulierung
(Art. 77 DSGVO) ergaenzt.
- Versand & Zahlung (alle 4 Sprachen): Pflichthinweis auf Schweizer
Einfuhrumsatzsteuer/Zollgebuehren bei CH-Lieferungen ergaenzt (Art. 246a
EGBGB verlangt vorvertragliche Information ueber Zusatzkosten) sowie
Kreditkarte in den Zahlungsarten.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Beim Durchgehen aller FAQ-Antworten gegen den tatsaechlichen Seiteninhalt
aufgefallen: Kreditkarte ist seit heute ein echtes, waehlbares Zahlungsmittel
im Checkout, fehlte aber noch in der FAQ und auf der Versand&Zahlung-Seite.
Ausserdem: Sendungsverfolgung wird auf der Konto-Seite genannt, fehlte aber in
der FAQ-Antwort zum Kundenkonto. Zusaetzlich professioneller/konkreter
formuliert, aber ausschliesslich mit bereits vorhandenen Infos (keine neuen
Behauptungen erfunden):
- Versandkosten-Frage verweist jetzt auf die Versand&Zahlung-Seite fuer die
Staffelung unterhalb der 75-Euro-Grenze.
- Pflege-Antwort nennt konkrete, handhäkel-typische Pflege (Handwaesche,
kein Trockner, liegend trocknen).
- Widerruf-Antwort nennt die 14-Tage-Frist explizit und den Hinweis "bei
Standardartikeln gilt es regulaer" (1:1 aus der Widerrufsbelehrung-Seite
uebernommen).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
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]>
Familien ohne eigenes Produkt (z.B. Frieda bei der Kuh) zeigten die Story-Box
und die Platzhalterkarten darunter in zwei getrennten <section>-Bloecken -
dadurch addierten sich zwei section-Innenabstaende zu einem viel zu grossen
Zwischenraum (im Vergleich zur Hase-Seite, wo Story-Box und echte Produktkarte
in derselben Sektion stehen). Platzhalterkarten stehen jetzt in derselben
Sektion wie die Story-Box, Abstand ist ueberall einheitlich eng.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Der letzte Commit hatte Story-Boxen komplett an ein zugeordnetes Produkt
gekoppelt - das entfernte zwar wie gewuenscht HasiGott/Mama Hase (Hase-Familie
hat bereits HasiDog als Produkt), loeschte aber ungewollt auch die Box des
Haupt-Charakters bei Familien ohne eigenes Produkt (z.B. Frieda bei der Kuh).
Jetzt bekommt immer der erste/Haupt-Charakter einer Familie eine Story-Box,
zusaetzliche Charaktere weiterhin nur mit echtem Produkt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher wurden auf den Tier-Familien-Seiten Vorstellungsboxen für ALLE im Admin
angelegten Charaktere gezeigt, auch ohne zugeordnetes Produkt (z.B. HasiGott,
Mama Hase auf der Hase-Seite ohne echte Ware). Auf Wunsch entfernt: die
Story-Boxen erscheinen jetzt nur noch für Charaktere, denen im Admin auch
wirklich ein Produkt zugeordnet ist - genau wie die Shop-Karten darunter.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
"Über die Kreative" (und potenziell andere Menüpunkte) konnte bei
mittleren Fensterbreiten (zwischen ca. 860-1100px) in eine zweite Zeile
umbrechen — durch die kürzlich vergrößerte Kopfzeile plus den neuen
Installieren-Button wurde es dort schlicht zu eng für die Hauptnavi.
Fix: white-space:nowrap auf den Menüpunkten (bricht nie mehr um) +
den Umschaltpunkt zum Hamburger-Menü von 860px auf 1100px angehoben,
damit auf mittleren Breiten gar nicht erst versucht wird, alles
nebeneinander reinzuquetschen, sondern rechtzeitig auf das kompakte
Menü umgeschaltet wird. Geprüft: bei 1100px sauberer Wechsel zum
Hamburger-Menü, kein Umbruch und kein horizontaler Überlauf mehr bei
1150-1600px.
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]>
Das Foto-Karussell auf den Produktkarten (Shop-Grid, Startseite, Sale,
Charakter-Kacheln, "Weitere Modelle" — überall wo ProductCard.astro
verwendet wird) lässt sich jetzt zusätzlich zu den ‹/›-Pfeilen auch per
Wisch-Geste bedienen: Finger auf dem Handy oder Maus ziehen am PC.
Technisch über die Pointer-Events-API (deckt Touch UND Maus mit
derselben Logik ab). Ein Wisch zählt erst ab einer Mindeststrecke und
nur bei überwiegend horizontaler Bewegung, damit normales Scrollen der
Seite nicht versehentlich als Wisch missverstanden wird. Da die ganze
Karte ein Link ist, wird der nachfolgende Klick nach einem echten Wisch
unterdrückt — sonst würde man ungewollt zur Produktseite springen, nur
weil man durch die Fotos blättern wollte.
Gleiches Wischen jetzt auch auf der Produktdetailseite selbst, für das
große Hauptbild (springt zum nächsten/vorherigen Thumbnail).
Verifiziert: Wisch ändert das Bild UND verhindert nachweislich die
Navigation; normale Klicks navigieren weiterhin korrekt; die Pfeil-
Buttons funktionieren unverändert (kein Regressionsfehler).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Klarstellung zur gestrigen Änderung: die persönliche Vorstellung
("Hallo, ich bin Frieda...") ist reiner Text ohne Kaufversprechen und
wird jetzt wieder für JEDEN im Admin definierten Charakter gezeigt,
auch bevor ein passendes Produkt existiert (Frieda, Sam, Siggi, Gaby,
Pingi sind wieder mit ihrem echten Vorstellungstext auf ihren Seiten
zu sehen). Die "Mehr über mich"-Schaltfläche bleibt aber weiterhin nur
bei Charakteren mit hinterlegtem Link (aktuell nur HasiDog).
Die eigentliche Shop-Karte (Foto/Preis/Kaufinfos) bleibt dagegen streng
wie gestern festgelegt: die gibt es nach wie vor NUR für Charaktere mit
echtem, im Admin zugeordnetem Produkt — kein Vorstellungstext täuscht
mehr einen kaufbaren Artikel vor. Ohne Produkt erscheinen stattdessen
die bereits vorbereiteten, namenlosen "Kommt bald"-Karten darunter.
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]>
Analog zu "Hase" → "HasiDog" bekommen jetzt auch die restlichen fünf
Tier-Familien ihren Charakternamen als große Bannerüberschrift statt
des Artnamens: Kuh → Frieda, Wal → Sam, Oktopus → Siggi,
Schildkröte → Gaby, Pinguin → Pingi.
Die restliche Seitenstruktur (Story-Box + Kartenreihe) brauchte keine
Änderung — die Vorlage war schon vollständig datengetrieben und zeigt
automatisch für JEDE Familie mit Charakteren dieselbe Optik wie bei
Hase. Da bei diesen fünf Familien noch keine echten Produkte hinterlegt
sind, erscheint (wie bei HasiGott/Mama Hase auf der Hase-Seite auch)
nur die vorbereitete Platzhalter-Karte, aber noch keine Story-Box —
die blendet sich automatisch ein, sobald VanVan im Admin ein passendes
Produkt anlegt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
- Bannerüberschrift zeigt wieder "HasiDog" statt "Hase" (bannerName
erneut gesetzt).
- Die weiße "HasiDog"-Überschrift in der Story-Box darunter entfernt —
war doppelt, weil der cyanfarbene Obertitel ("Hallo, ich bin HasiDog.")
den Namen schon nennt. Das ist eine allgemeine Änderung an der
Story-Box-Vorlage (gilt für alle Charaktere/Familien, nicht nur Hase),
da die Überschrift überall strukturell redundant war.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Die Icons/Manifeste waren schon vorbereitet, aber es gab keinen echten
Weg, die Installation auch zu STARTEN, ohne das kleine, leicht zu
übersehende Icon im Browser selbst zu suchen. Jetzt:
- Ein Service Worker (public/sw.js) ist Voraussetzung dafür, dass
Browser die Seite überhaupt als "installierbare App" erkennen. Bewusst
minimal gehalten: strikt "network-first" — bei bestehender Verbindung
wird IMMER zuerst das echte Netzwerk gefragt, der Cache dient nur als
Rückfalllösung, wenn wirklich keine Verbindung besteht. Dadurch besteht
KEIN Risiko, dass der Adminbereich veraltete Inhalte zeigt, während man
online ist — als Bonus funktionieren bereits besuchte Seiten aber auch
kurz offline (mit echtem Offline-Test geprüft).
- Neuer "Installieren"-Button direkt in der Kopfzeile (Hauptseite) bzw.
unten rechts (Adminbereich) — erscheint automatisch, sobald der
Browser eine Installation wirklich anbietet, verschwindet danach
wieder bzw. bleibt komplett versteckt, wenn schon als App installiert.
Ein Klick reicht, kein Suchen im Browser-Menü mehr nötig.
- Beide Bereiche (Hauptseite + Admin) nutzen dieselben, bereits
vorhandenen Logo-Icons/Manifeste — landet also mit dem echten
VanVan-Logo auf dem Startbildschirm/Desktop.
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]>
Die Bannerüberschrift zeigte "HasiDog", direkt gefolgt von der
Story-Box, die den Namen nochmal als eigene Überschrift zeigt ("Hallo,
ich bin HasiDog. HasiDog ...") — wirkte doppelt. Banner zeigt jetzt
wieder den Familiennamen "Hase" (bannerName-Override entfernt, das
Feld selbst bleibt im Datenmodell bestehen, falls später mal gebraucht).
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]>
Neben dem allgemeinen Gutscheincode gibt es jetzt einen zweiten,
unabhängigen "Partner-Rabattcode"-Slot — für Codes, die VanVan gezielt
mit einzelnen Streamer:innen/Content-Creator:innen aushandelt. Kund:innen
lösen ihn genauso ein wie einen Gutschein (eigene, optisch identische Box
direkt unter dem Gutschein im Warenkorb bzw. im Checkout), beide Codes
können unabhängig voneinander gleichzeitig aktiv sein und ihre Rabatte
werden addiert (auf die Zwischensumme gedeckelt, damit der Preis nie
unter 0 € fällt).
Admin (Sveltia CMS): neuer Bereich "🤝 Partner-Rabattcodes", getrennt von
den allgemeinen Gutscheinen geführt. Pro Code lässt sich hinterlegen, zu
welcher Partnerin/welchem Partner er gehört (nur für VanVans eigene
Übersicht, wird Kund:innen nirgends gezeigt), Prozent- ODER Betrags-
Rabatt, optionales Ablaufdatum, ein "Aktiv"-Schalter zum Pausieren ohne
Löschen, sowie ein freies Notizfeld für die vereinbarten Konditionen
(z.B. Provision) — echtes automatisches Auswerten, wer wie oft welchen
Code einlöst, bräuchte ein eigenes Backend (Phase 2) und ist bewusst
nicht Teil dieser rein statischen Umsetzung.
Nebenbei einen bestehenden Bug behoben: die define:vars-Variablenliste
im Checkout-Skript war bei EN/CH/FR unvollständig (discountLabel,
couponInvalid, Klarna-/Bank-Texte fehlten) — dadurch wären dort Teile
der Checkout-Seitenleiste als "undefined" gerendert worden. Jetzt an
die vollständige Liste der DE-Version angeglichen.
Neu erstellte Dateien lokal mit Test-Codes durchgespielt (Gutschein +
Partnercode gleichzeitig eingelöst, Rabatte korrekt addiert, Admin-
Formular mit allen Feldern geprüft) und wieder auf leere Listen
zurückgesetzt vor dem Commit.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Bisher wurde als Icon nur Astros Standard-Platzhalter-SVG (ein Pfeil-Symbol,
kein eigenes Branding) verlinkt. Weil kein Web-App-Manifest mit Icons
hinterlegt war, generierten Browser beim "Auf PC installieren" automatisch
einen Buchstaben-Kreis ("V") als App-Icon statt des echten Logos.
Aus dem vorhandenen public/logo.png automatisch alle nötigen Icon-Größen
erzeugt (favicon.ico mit 16/32/48px, Apple-Touch-Icon 180px, sowie 192px/
512px normal + eigene "maskable"-Varianten mit Weißraum-Sicherheitszone,
damit runde/eckige OS-Zuschnitte beim Installieren nicht den Rand des
Logos abschneiden). Neues manifest.webmanifest verlinkt alle Icons plus
Name/Theme-Farbe für die Installation. Layout.astro und der
Admin-Bereich verlinken jetzt überall das echte Logo statt des alten
Platzhalters.
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 bekam jeder Charakter einer Tier-Familie (z.B. Hase) automatisch
seine eigene Story-Box, auch wenn für ihn noch gar kein Produkt existiert.
Das wirkte unfertig (z.B. HasiGott und Mama Hase zeigten volle
Persönlichkeitstexte, obwohl beide noch keine Produkte haben). Jetzt
erscheint die Story-Box nur noch für Charaktere mit mindestens einem
zugeordneten Produkt (aktuell also nur HasiDog). Die kompakten Karten
darunter (mit Platzhalter-Foto und "Produkte folgen bald") bleiben für
alle Charaktere sichtbar, damit die Familie als Ganzes trotzdem gezeigt
wird.
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.
Missverständnis aus einer früheren Anfrage korrigiert: die Überschrift
zwischen den Unterkategorie-Chips und der Produktreihe sollte das Wort
"Hauptkategorie" zeigen (spiegelbildlich zur "Unterkategorien"-
Beschriftung darüber), nicht den Kategorienamen ("DIY Plushies")
wiederholen. Jetzt im exakt gleichen dezenten Stil wie
"Unterkategorien" — beide Beschriftungen sind jetzt visuell symmetrisch.
Verifiziert per Puppeteer: Seite zeigt "UNTERKATEGORIEN" und
"HAUPTKATEGORIE" als passendes Beschriftungs-Paar.
Seit der Umstellung auf "eine Seite pro Tier-Familie" hießen die Chips
nur noch generisch (Kuh, Hase, Wal, ...). Jetzt zeigen sie zusätzlich
den ersten/bekanntesten Charakter der Serie in Anführungszeichen — z.B.
"Hase „HasiDog"" — behalten dabei aber die neue Datenstruktur
(Subcategory.characters) bei, damit Familien mit mehreren Charakteren
(wie Hase: HasiDog, HasiGott, Mama Hase) technisch weiterhin
funktionieren.
Neue Helper-Funktion subcategoryChipLabel() in categories.ts, pro
Sprache mit den richtigen Anführungszeichen (DE/CH „...", EN "...",
FR « ... »).
Verifiziert per Puppeteer: alle 6 Chips zeigen exakt die gewünschten
Labels.
Die Checkboxen standen bisher außerhalb des Zwei-Spalten-Layouts, über
die volle Formularbreite. Jetzt stehen sie direkt im Anschluss an
"Gemäß §19 UStG..." in derselben (rechten) Spalte — wie gewünscht direkt
unter der Bestellübersicht statt separat darunter.
Verifiziert per Puppeteer-Screenshot (Desktop + schmale Ansicht).
- Produktseite: Mengen-Stepper und manuelle Eingabe sind jetzt auf den
tatsächlichen Lagerbestand begrenzt (zählt bereits im Warenkorb
liegende Menge desselben Produkts mit). Ist das Maximum schon
erreicht, wird der "In den Warenkorb"-Button deaktiviert und zeigt
"Maximale verfügbare Menge ist bereits im Warenkorb"; bei wenig Rest-
bestand (≤5) erscheint stattdessen "Nur noch X auf Lager".
- Warenkorb-Seite: der "+"-Button bei der Mengenauswahl ist ebenfalls auf
den Lagerbestand begrenzt.
- Als zusätzliche Absicherung greift das Limit jetzt auch direkt in
addToCart()/updateQuantity() selbst (cart.ts) — unabhängig davon,
welche Oberfläche die Funktion aufruft, kann so nie mehr Menge als
Bestand ins localStorage gelangen.
Verifiziert per Puppeteer an einem Produkt mit Bestand 2: 6× auf "+"
klicken bleibt bei 2, manuelles Eintippen von 999 wird auf 2 geklemmt,
nach dem Hinzufügen ist der Button deaktiviert, der "+"-Button im
Warenkorb erhöht nicht weiter — keine Konsolenfehler.
"3. Bestellübersicht" stand bisher als eigener Block über die volle
Formularbreite unterhalb beider Spalten. Jetzt steht sie direkt in der
rechten Spalte, gestapelt unter "2. Kontakt & Lieferadresse" — beide
Spalten (Zahlungsart links, Kontakt + Bestellübersicht rechts) füllen
dadurch die gemeinsame Karte deutlich ausgewogener.
Verifiziert per Puppeteer-Screenshot gegen den echten Build.
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.
Bisher war jeder Charakter (HasiDog, Frieda, Sam, ...) eine eigene
Unterkategorie mit eigener Seite. Das passte nicht mehr, sobald eine
Familie mehrere Charaktere bekommt (HasiDog, HasiGott, Mama Hase) — die
sollten alle auf EINER Seite erscheinen, nicht auf drei getrennten.
Neues Modell:
- Unterkategorie = die ganze Tier-Familie (z.B. "hase", "kuh", "wal"),
nicht mehr ein einzelner Charakter.
- Jede Familie hat jetzt ein "characters"-Array (categories.ts,
config.yml) — beliebig viele Charaktere, jeder mit eigenem Namen,
Vorstellungstext und optionalem "Mehr über mich"-Link.
- Produkte bekommen ein neues optionales Feld "charakter", das sie einem
bestimmten Charakter innerhalb der Unterkategorie zuordnet (Product.
charakter in products.ts + Adminbereich-Feld).
- Die Unterkategorie-Seite zeigt jetzt JEDEN Charakter als eigene Box
untereinander, mit automatisch abwechselnder Foto-/Text-Seite (1. links,
2. rechts, 3. wieder links, ...). Ein Charakter ohne zugeordnetes
Produkt zeigt trotzdem schon seine Box (nur ohne Foto) — die Seite
"wächst" mit, sobald neue Charaktere/Produkte dazukommen, für jede
Tier-Familie (Hase, Kuh, Wal, Oktopus, Schildkröte, Pinguin).
- "Hase" hat jetzt drei Charaktere (HasiDog mit echtem Produkt, HasiGott
und Mama Hase als Platzhalter-Boxen).
- Unterkategorien-Chips zeigen jetzt sauber die Familiennamen (Kuh, Hase,
Wal, ...) statt "Kuh „Frieda"" etc.
- Alte, verwaiste /hasidog/-Seite entfernt (war durch die Umstellung
kaputt und nirgends mehr verlinkt).
Verifiziert per Puppeteer gegen den echten Build: /shop/diy-plushies/hase/
zeigt alle drei Charaktere korrekt alternierend, Ein-Charakter-Familien
(Kuh etc.) funktionieren unverändert, Adminbereich lädt ohne
Konfigurationsfehler, alte Hase-URLs geben korrekt 404.
- 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.
