From 0ae990baadffbba5fa1c0350563ba3cd4d36a322 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Sun, 2 Aug 2026 23:05:14 +0200
Subject: [PATCH] Charakter-Story-Box aufgewertet: eigener Look statt
 schlichter Basiskarte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <noreply@anthropic.com>
---
 src/styles/global.css | 68 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 3 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 9e78dc7..c0ab09f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -808,9 +808,71 @@ a:focus-visible, button:focus-visible {
    volle Breite Karten übereinander gestapelt, GETRENNT von den Shop-Karten darunter (die zeigen
    nur noch Foto/Preis/Kaufinfos, keine Geschichten). */
 .character-stories { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.2rem; }
-.character-story { padding: 1.6rem 1.8rem; }
-.character-story h3 { margin: 0.15rem 0 0.6rem; font-size: 1.3rem; }
-.character-story p { margin: 0 0 0.8em; color: var(--c-text-muted); }
+
+/* Die Story-Karte bekommt einen eigenen, "besonderen" Auftritt statt der schlichten Basis-Karte:
+   ein großes, dezentes Anführungszeichen als Wasserzeichen (reine Formatierung, kein neuer Text),
+   einen sanften Marken-Farbschimmer rund um die Box (Verlauf aus den Signature-Farben Cyan/Lila/
+   Rosa, wie beim Verlaufsrand der Karten) und ein eigens gestalteter "hier"-Button im
+   Verlaufs-Look statt schlichtem Outline-Rahmen. */
+.character-story {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  padding: 2.2rem 2.4rem 2rem;
+  box-shadow:
+    var(--shadow-card),
+    0 0 46px -14px color-mix(in srgb, var(--c-accent) 40%, transparent),
+    0 0 80px -22px color-mix(in srgb, var(--c-sale) 28%, transparent);
+}
+.character-story:hover {
+  box-shadow:
+    var(--shadow-card-hover),
+    0 0 60px -12px color-mix(in srgb, var(--c-accent) 50%, transparent),
+    0 0 100px -18px color-mix(in srgb, var(--c-sale) 36%, transparent);
+}
+.character-story::after {
+  content: "“";
+  position: absolute;
+  z-index: 0;
+  top: -0.3rem;
+  right: 1rem;
+  font-family: var(--font-head);
+  font-size: 7rem;
+  line-height: 1;
+  color: transparent;
+  background: linear-gradient(160deg, var(--c-accent), var(--c-purple-glow) 55%, var(--c-sale));
+  -webkit-background-clip: text;
+  background-clip: text;
+  opacity: 0.18;
+  pointer-events: none;
+  user-select: none;
+}
+.character-story > * { position: relative; z-index: 1; }
+.character-story h3 {
+  margin: 0.2rem 0 0.7rem;
+  font-size: 1.5rem;
+  background: linear-gradient(120deg, var(--c-text) 45%, var(--c-accent) 130%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+.character-story p { margin: 0 0 1.1rem; max-width: 62ch; font-size: 1.02rem; color: var(--c-text-muted); }
+.character-story .btn {
+  background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow));
+  color: #08181c;
+  border-color: transparent;
+  font-weight: 700;
+  box-shadow: var(--shadow-card);
+}
+.character-story .btn:hover {
+  box-shadow: var(--shadow-card-hover), 0 10px 24px -8px color-mix(in srgb, var(--c-accent) 55%, transparent);
+  transform: translateY(-2px);
+}
+@media (max-width: 640px) {
+  .character-story { padding: 1.8rem 1.6rem 1.7rem; }
+  .character-story::after { font-size: 5rem; top: -0.2rem; }
+}
 
 /* Charakter-Karten ohne zugeordnetes Produkt (noch kein Foto/Preis) — gleiche Optik wie die
    echten Produktkarten (ProductCard.astro), damit die Reihe einheitlich aussieht. */