Design-Polish: Favicon, Animationen, Fokus- und Hover-Zustände

- Voxel-Würfel-Favicon (SVG, Brand-Gelb/Orange) + theme-color
- Einblend-Animation für Header/Content (respektiert prefers-reduced-motion)
- Timeline-Marker leuchten beim Karten-Hover, Buttons mit Glow
- Brand-Selection, Focus-Visible-Outline, dunkle Scrollbar

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/style.css

@@ -35,6 +35,25 @@ body {
 a { color: inherit; text-decoration: none; }
 button { font-family: inherit; cursor: pointer; }
 
+/* Text-Auswahl & Fokus im Brand-Look */
+::selection { background: rgba(245, 197, 24, .25); color: var(--text); }
+:focus-visible { outline: 1px solid var(--neon); outline-offset: 2px; }
+
+/* Dunkle Scrollbar */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: #262626; border: 2px solid var(--bg); border-radius: 6px; }
+::-webkit-scrollbar-thumb:hover { background: var(--neon); }
+
+/* Einblend-Animation für Inhalte */
+@keyframes riseIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important; transition: none !important; }
+}
+
 /* ── NOISE + SCANLINES ─────────────────────────────── */
 body::before {
     content: ''; position: fixed; inset: 0;
@@ -83,7 +102,9 @@ body::after {
     font-family: var(--display);
     font-size: 1.6rem; letter-spacing: .15em; color: var(--neon);
     line-height: 1;
+    transition: text-shadow .25s;
 }
+.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; }
@@ -151,6 +172,7 @@ body::after {
     position: relative; z-index: 2;
     max-width: 860px; width: 100%;
     margin: 0 auto;
+    animation: riseIn .45s ease both;
 }
 .page-tag {
     font-family: var(--mono);
@@ -176,6 +198,7 @@ body::after {
     max-width: 860px; width: 100%;
     margin: 0 auto;
     padding: 2.75rem 2.5rem 5rem;
+    animation: riseIn .45s ease .08s both;
 }
 
 .notice { color: var(--muted); padding: 1.5rem 0; font-size: 1.05rem; }
@@ -245,6 +268,11 @@ body::after {
     width: 7px; height: 7px;
     background: var(--neon);
     box-shadow: 0 0 10px rgba(245, 197, 24, .6);
+    transition: box-shadow .25s, transform .25s;
+}
+.timeline .card:hover::before {
+    box-shadow: 0 0 16px rgba(245, 197, 24, .9);
+    transform: scale(1.25);
 }
 
 .card-meta {
@@ -564,7 +592,11 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
     padding: .5rem 1.1rem;
     transition: background .2s, border-color .2s, opacity .2s;
 }
-.btn:hover:not(:disabled) { border-color: var(--neon); background: rgba(245, 197, 24, .08); }
+.btn:hover:not(:disabled) {
+    border-color: var(--neon);
+    background: rgba(245, 197, 24, .08);
+    box-shadow: 0 0 14px rgba(245, 197, 24, .18);
+}
 .btn:disabled { opacity: .25; cursor: default; }
 
 /* ── FOOTER ────────────────────────────────────────── */