Kundenbereich-Vorschau, VanVans Geschichte neben ihr Foto, Emoji-Kreis entfernt

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]>

src/styles/global.css

@@ -679,6 +679,29 @@ a:focus-visible, button:focus-visible {
   border-radius: var(--radius-s);
 }
 
+/* "Über die Kreative": VanVans Geschichte steht direkt NEBEN ihrem Foto (statt darunter als
+   eigener Block). Weil die Textspalte dadurch deutlich höher wird als das Foto, wird hier oben
+   ausgerichtet statt gestreckt — sonst würde die Fotokarte mit viel leerem Raum mitwachsen.
+   Das Foto bleibt beim Lesen sichtbar (sticky), solange genug Platz da ist. */
+/* NUR im zweispaltigen Layout (ab 901px): oben ausrichten statt strecken + Foto bleibt beim
+   Lesen sichtbar. Bewusst NICHT global gesetzt — unterhalb von 900px stehen Foto und Text
+   ohnehin untereinander, und dort führt `align-items: start` zu einem echten Fehler: die
+   Grid-Zeile wird dann anhand des geschätzten Bild-Seitenverhältnisses berechnet und fällt
+   ~100px zu niedrig aus, wodurch das Foto in den Text darunter hineinragt (gemessen: 80px
+   Überlappung). Mit dem Standardverhalten (stretch) tritt das nicht auf. */
+@media (min-width: 901px) {
+  .intro-story { align-items: start; }
+  .intro-story .portrait-frame.portrait { position: sticky; top: 6.5rem; }
+}
+/* text-wrap: balance verteilt die Zeilen der Überschrift gleichmäßig — sonst rutscht bei
+   breiten Fenstern nur das 🩵 allein in eine eigene Zeile. */
+.intro-story-text h1 { margin-bottom: 0.6rem; text-wrap: balance; }
+.intro-story-text h2 {
+  margin-top: 2rem;
+  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
+}
+.intro-story-text p { max-width: 60ch; }
+
 /* Wechselt innerhalb einer Tier-Familie ab: Foto links/rechts, Text jeweils gegenüber — sorgt
    für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen. */
 .intro-reverse .portrait-frame.portrait { order: 2; }
@@ -1074,16 +1097,15 @@ a:focus-visible, button:focus-visible {
   color: var(--c-accent);
   margin: 2.2rem 0 0;
 }
+/* Das Kategorie-Emoji steht frei neben der Überschrift — vorher saß es in einem farbigen
+   Kreis, der auf Wunsch entfernt wurde (der Kreis hat das Emoji eher eingesperrt als
+   hervorgehoben und passte nicht zum ruhigen Rest der Seite). */
 .kategorie-section-label .label-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.9rem;
-  height: 1.9rem;
-  border-radius: 50%;
-  font-size: 1rem;
-  background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%);
-  color: #08181c;
+  font-size: 1.35rem;
+  line-height: 1;
 }
 .kategorie-section-label-rule {
   height: 2px;
@@ -1126,6 +1148,44 @@ a:focus-visible, button:focus-visible {
 .thumb.product-photo:hover { box-shadow: 0 0 0 3px rgba(10, 9, 16, 0.6), 0 0 0 4px var(--c-accent); }
 .badge-row { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
 
+/* Persönlicher Kundenbereich (/konto/angemeldet/) — Ansicht für angemeldete Kund:innen mit
+   Bestellhistorie, Sendungsverfolgung, Wunschliste und Profildaten. Nutzt durchgehend die
+   bestehende Karten-/Badge-Optik der Seite, damit sich nichts fremd anfühlt. */
+.account-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+.account-head h1 { margin: 0.2rem 0 0.5rem; }
+.account-head .lead { margin: 0; max-width: 52ch; }
+.account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
+.account-stat { text-align: center; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.2rem 1rem; }
+.account-stat-value { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--c-accent); line-height: 1; }
+@media (max-width: 620px) { .account-stats { grid-template-columns: 1fr; } }
+
+.order-list { display: flex; flex-direction: column; gap: 1.1rem; }
+.order-card { display: flex; flex-direction: column; gap: 0.9rem; }
+.order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+.order-no { display: block; font-weight: 700; font-size: 1.02rem; }
+.order-meta { color: var(--c-text-muted); }
+/* Bestellstatus in den Farben der jeweiligen Phase (siehe Pflichtenheft Punkt 12): unterwegs =
+   Akzentfarbe, abgeschlossen = ruhiges Grün, in Arbeit = neutral. */
+.order-status-versendet { background: color-mix(in srgb, var(--c-accent) 34%, transparent); border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
+.order-status-abgeschlossen { background: rgba(126, 200, 160, 0.28); border-color: rgba(126, 200, 160, 0.5); color: #cfeee0; }
+.order-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.order-items li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; color: var(--c-text-muted); }
+.order-item-price { color: var(--c-text); white-space: nowrap; }
+.order-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px dashed rgba(244, 241, 247, 0.14); padding-top: 0.9rem; }
+.order-total { font-size: 1.05rem; }
+.order-total strong { color: var(--c-accent); }
+.order-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.order-tracking-no { margin: 0; color: var(--c-text-muted); }
+.order-tracking-no code { font-size: 0.9em; letter-spacing: 0.02em; }
+.profile-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
+.profile-card .specs { margin-top: 0; width: 100%; }
+
 /* Kundenrezensionen — Herzen in Lila-Babyblau statt Sterne (siehe HeartRating.astro), damit
    Bewertungen sich erkennbar in die restliche Seite einfügen statt wie ein fremdes Bewertungs-
    Widget zu wirken. */