Frontend-Polish: Navbar, Roadmap, Galerie und Karten aufgehübscht

- Navbar: animierter Gradient-Unterstrich (wächst von links, aktiver
  Tab mit Neon-Glow), Blur-Effekt + Glanzlinie beim Scrollen,
  Login-Button und User-Chip als Pills mit Avatar-Ring
- Karten: Radius, Hover-Lift mit Schatten
- Roadmap: Meilensteine mit Neon-Akzentleiste links, Fortschrittsbalken
  rund mit wanderndem Glanz, Prozent in Neon
- Galerie: gestaffeltes Einblenden, Hover-Zoom mit Glow und
  aufschiebender Meta-Zeile
- Community-Wünsche: Hover-States, Gruppen-Titel mit auslaufender
  Linie, Footer mit Glanzlinie
- .claude/launch.json für lokale Frontend-Preview

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+    "version": "0.0.1",
+    "configurations": [
+        {
+            "name": "frontend-preview",
+            "runtimeExecutable": "npx",
+            "runtimeArgs": ["vite", "preview", "frontend", "--port", "4173"],
+            "port": 4173
+        }
+    ]
+}

frontend/src/style.css

@@ -91,13 +91,24 @@ body::after {
     padding: 1.25rem 2.5rem;
     background: linear-gradient(to bottom, rgba(10, 10, 10, .98), rgba(10, 10, 10, .75));
     border-bottom: 1px solid transparent;
-    transition: padding .3s, border-color .3s, background .3s;
+    transition: padding .3s, border-color .3s, background .3s, backdrop-filter .3s;
 }
 .nav.scrolled {
     padding: .8rem 2.5rem;
-    background: rgba(10, 10, 10, .95);
+    background: rgba(10, 10, 10, .82);
+    backdrop-filter: blur(14px) saturate(1.2);
+    -webkit-backdrop-filter: blur(14px) saturate(1.2);
     border-bottom-color: var(--border);
 }
+/* Neon-Glanzlinie unter der Navbar, wird beim Scrollen sichtbar */
+.nav::after {
+    content: '';
+    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .5) 30%, rgba(255, 77, 0, .5) 70%, transparent);
+    opacity: 0; transition: opacity .3s;
+    pointer-events: none;
+}
+.nav.scrolled::after { opacity: 1; }
 .nav-logo {
     font-family: var(--display);
     font-size: 1.6rem; letter-spacing: .15em; color: var(--neon);
@@ -107,16 +118,30 @@ body::after {
 .nav-logo:hover { text-shadow: 0 0 18px rgba(245, 197, 24, .55); }
 .nav-logo span { color: var(--neon2); }
 
-.nav-links { display: flex; gap: 1.75rem; flex: 1; }
+.nav-links { display: flex; gap: 1.6rem; flex: 1; }
 .nav-links a {
+    position: relative;
     font-family: var(--mono);
     font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
     color: var(--muted); padding: .3rem 0;
-    border-bottom: 1px solid transparent;
+    transition: color .2s, text-shadow .2s;
-    transition: color .2s, border-color .2s;
+}
+/* Animierter Gradient-Unterstrich: wächst von links */
+.nav-links a::after {
+    content: '';
+    position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
+    background: linear-gradient(90deg, var(--neon), var(--neon2));
+    border-radius: 2px;
+    transform: scaleX(0); transform-origin: left;
+    transition: transform .25s ease;
 }
 .nav-links a:hover { color: var(--text); }
-.nav-links a.active { color: var(--neon); border-bottom-color: var(--neon); }
+.nav-links a:hover::after { transform: scaleX(.55); }
+.nav-links a.active {
+    color: var(--neon);
+    text-shadow: 0 0 12px rgba(245, 197, 24, .35);
+}
+.nav-links a.active::after { transform: scaleX(1); }
 
 /* ── AUTH ──────────────────────────────────────────── */
 .auth { display: flex; align-items: center; }
@@ -126,18 +151,27 @@ body::after {
     letter-spacing: .25em; text-transform: uppercase;
     color: var(--neon);
     border: 1px solid var(--border);
-    padding: .5rem 1.1rem;
+    border-radius: 999px;
-    transition: background .2s, border-color .2s, color .2s;
+    padding: .5rem 1.2rem;
+    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
+}
+.btn-login:hover {
+    border-color: var(--neon);
+    background: rgba(245, 197, 24, .08);
+    box-shadow: 0 0 16px rgba(245, 197, 24, .15);
 }
-.btn-login:hover { border-color: var(--neon); background: rgba(245, 197, 24, .08); }
 .discord-mark { width: 15px; height: 15px; }
 
 .user-chip {
     display: flex; align-items: center; gap: .6rem;
     border: 1px solid rgba(255, 255, 255, .1);
-    padding: .3rem .8rem .3rem .35rem;
+    border-radius: 999px;
+    padding: .3rem .9rem .3rem .35rem;
+    background: rgba(255, 255, 255, .03);
+    transition: border-color .2s;
 }
-.avatar { width: 24px; height: 24px; border-radius: 50%; }
+.user-chip:hover { border-color: var(--border); }
+.avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(245, 197, 24, .4); }
 .username { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--muted); }
 .logout { color: var(--muted2); font-size: .75rem; padding: 0 .1rem; transition: color .2s; }
 .logout:hover { color: var(--neon2); }
@@ -257,10 +291,16 @@ body::after {
     position: relative;
     background: var(--bg2);
     border: 1px solid rgba(255, 255, 255, .06);
+    border-radius: 12px;
     padding: 1.3rem 1.6rem 1.2rem;
-    transition: border-color .25s, background .25s;
+    transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
+}
+.card:hover {
+    border-color: var(--border);
+    background: var(--bg3);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(245, 197, 24, .06);
 }
-.card:hover { border-color: var(--border); background: var(--bg3); }
 .timeline .card::before {
     /* Marker auf der Timeline */
     content: '';
@@ -414,11 +454,14 @@ body::after {
 
 .wish-row {
     display: flex; align-items: baseline; gap: 1rem;
-    padding: .55rem .9rem;
+    padding: .6rem 1rem;
     background: var(--bg2);
     border: 1px solid rgba(255, 255, 255, .06);
+    border-radius: 10px;
     margin-bottom: .5rem;
+    transition: border-color .2s, background .2s;
 }
+.wish-row:hover { border-color: var(--border); background: var(--bg3); }
 .wish-score {
     font-family: var(--mono); font-size: .78rem;
     color: var(--neon); white-space: nowrap; min-width: 3.5rem;
@@ -430,61 +473,95 @@ body::after {
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: .75rem;
+    gap: .9rem;
 }
 .shot {
     position: relative; display: block; overflow: hidden;
     border: 1px solid rgba(255, 255, 255, .08);
+    border-radius: 10px;
     aspect-ratio: 16 / 9;
     background: #000;
-    transition: border-color .2s;
+    transition: border-color .25s, transform .25s, box-shadow .25s;
+    animation: riseIn .5s ease both;
+}
+/* Gestaffeltes Einblenden der ersten Reihen */
+.shot:nth-child(2) { animation-delay: .05s; }
+.shot:nth-child(3) { animation-delay: .1s; }
+.shot:nth-child(4) { animation-delay: .15s; }
+.shot:nth-child(5) { animation-delay: .2s; }
+.shot:nth-child(6) { animation-delay: .25s; }
+.shot:hover {
+    border-color: var(--neon);
+    transform: translateY(-3px);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 18px rgba(245, 197, 24, .12);
 }
-.shot:hover { border-color: var(--neon); }
 .shot img {
     width: 100%; height: 100%; object-fit: cover; display: block;
-    transition: transform .3s;
+    transition: transform .35s ease, filter .35s;
+    filter: brightness(.92);
 }
-.shot:hover img { transform: scale(1.04); }
+.shot:hover img { transform: scale(1.06); filter: brightness(1.05); }
 .shot-meta {
     position: absolute; inset: auto 0 0 0;
     display: flex; justify-content: space-between; align-items: baseline;
-    padding: .4rem .6rem;
+    padding: .55rem .7rem .45rem;
-    background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
+    background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent);
     font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
-    opacity: 0; transition: opacity .2s;
+    opacity: 0; transform: translateY(4px);
+    transition: opacity .25s, transform .25s;
 }
-.shot:hover .shot-meta { opacity: 1; }
+.shot:hover .shot-meta { opacity: 1; transform: translateY(0); }
 .shot-author { color: var(--neon); }
 .shot-date { color: var(--muted); }
 
 /* ── ROADMAP ───────────────────────────────────────── */
-.roadmap-group { margin-bottom: 2.25rem; }
+.roadmap-group { margin-bottom: 2.75rem; }
 .roadmap-group .settings-title { margin-bottom: 1rem; }
-.milestone { margin-bottom: 1.1rem; }
+.milestone {
+    margin-bottom: 1.1rem;
+    border-left: 3px solid rgba(245, 197, 24, .25);
+}
+.milestone:hover { border-left-color: var(--neon); }
 .milestone-title {
     font-family: var(--display);
-    font-size: 1.3rem; letter-spacing: .04em;
+    font-size: 1.35rem; letter-spacing: .04em;
     color: var(--text);
 }
 .progress {
-    height: 6px;
+    position: relative;
+    height: 8px; border-radius: 999px;
     background: rgba(255, 255, 255, .06);
-    margin-top: .8rem;
+    margin-top: .9rem;
     overflow: hidden;
 }
 .progress-bar {
-    height: 100%;
+    position: relative;
+    height: 100%; border-radius: 999px;
     background: linear-gradient(90deg, var(--neon2), var(--neon));
-    box-shadow: 0 0 10px rgba(245, 197, 24, .4);
+    box-shadow: 0 0 12px rgba(245, 197, 24, .45);
     transition: width .6s ease;
+    overflow: hidden;
+}
+/* Wandernder Glanz auf dem Fortschrittsbalken */
+.progress-bar::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
+    transform: translateX(-100%);
+    animation: barShine 3.2s ease-in-out infinite;
+}
+@keyframes barShine {
+    0%, 55% { transform: translateX(-100%); }
+    85%, 100% { transform: translateX(100%); }
 }
 .progress-info {
     display: flex; justify-content: space-between;
     font-family: var(--mono);
     font-size: .65rem; letter-spacing: .1em;
     color: var(--muted2);
-    margin-top: .35rem;
+    margin-top: .45rem;
 }
+.progress-info span:first-child { color: var(--neon); }
 
 /* ── CHANGELOG ─────────────────────────────────────── */
 .release-card { margin-bottom: 1.5rem; }
@@ -661,11 +738,18 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
     margin-bottom: 1.5rem;
 }
 .settings-title {
+    display: flex; align-items: center; gap: 1rem;
     font-family: var(--mono);
     font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
     color: var(--neon2);
     margin-bottom: 1.2rem;
 }
+/* Auslaufende Linie hinter Gruppen-Titeln */
+.settings-title::after {
+    content: '';
+    flex: 1; height: 1px;
+    background: linear-gradient(90deg, rgba(255, 77, 0, .35), transparent);
+}
 
 .stats { display: flex; flex-wrap: wrap; gap: 2.5rem; }
 .stat { display: flex; flex-direction: column; gap: .1rem; }
@@ -812,12 +896,18 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
 
 /* ── FOOTER ────────────────────────────────────────── */
 .footer {
+    position: relative;
     border-top: 1px solid var(--border);
     padding: 1.5rem 2.5rem;
     display: flex; align-items: center; justify-content: center; gap: .9rem;
     font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
     color: var(--muted2);
 }
+.footer::before {
+    content: '';
+    position: absolute; left: 0; right: 0; top: -1px; height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .4), transparent);
+}
 .footer-logo { font-family: var(--display); font-size: .95rem; letter-spacing: .15em; color: var(--neon); }
 .footer-logo span { color: var(--neon2); }
 .footer-sep { color: var(--muted2); }