Add heavy metal visual theme and venue badge levels

app/static/css/style.css

@@ -23,10 +23,20 @@ body {
         "Segoe UI",
         sans-serif;
 
-    background: radial-gradient(circle at 50% -15%, #320909 0, transparent 32rem), var(--bg);
+    background:
+        linear-gradient(rgba(4, 4, 6, .58), rgba(4, 4, 6, .72)),
+        url('/static/images/crowd-stage-background.webp') center top / cover fixed no-repeat,
+        var(--bg);
     color: var(--text);
 }
 
+@media (max-width: 700px) {
+    body {
+        background-attachment: scroll;
+        background-position: center top;
+    }
+}
+
 a {
     color: inherit;
     text-decoration: none;
@@ -366,6 +376,74 @@ form .button {
 .admin-danger { padding: 9px 12px; color: #fecaca; border: 1px solid #7f1d1d; background: #450a0a; border-radius: 8px; cursor: pointer; }
 .admin-danger:disabled { opacity: .4; cursor: not-allowed; }
 
+/* Heavy-Metal-Theme: Poster, Bühne und Backstage-Pass statt Standard-UI */
+body::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    opacity: .16;
+    background-image:
+        radial-gradient(circle at 18% 22%, rgba(255,255,255,.12) 0 1px, transparent 1px),
+        radial-gradient(circle at 73% 64%, rgba(255,255,255,.08) 0 1px, transparent 1px);
+    background-size: 7px 9px, 11px 13px;
+    mix-blend-mode: screen;
+}
+
+header, main, .container { position: relative; z-index: 1; }
+
+h1, h2, h3, .logo, .button, button, .page-title h1 {
+    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+    letter-spacing: .045em;
+}
+
+h1, .page-title h1 {
+    text-transform: uppercase;
+    text-shadow: 2px 2px 0 #250707, 0 0 18px rgba(220,38,38,.24);
+}
+
+.page-title {
+    border-left: 4px solid var(--accent);
+    padding-left: 16px;
+}
+
+.button {
+    border: 1px solid #ef4444;
+    box-shadow: 0 3px 0 #450a0a, 0 0 14px rgba(185,28,28,.2);
+    text-transform: uppercase;
+}
+
+.button:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #450a0a, 0 0 20px rgba(220,38,38,.35); }
+
+.concert-card, .admin-section, .profile-card, .badges-card, .profile-edit {
+    box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.025);
+}
+
+.concert-card { position: relative; border-left: 3px solid #7f1d1d; }
+.concert-card::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    background: linear-gradient(120deg, rgba(255,255,255,.035), transparent 32%);
+}
+
+.event-category {
+    padding: 3px 8px;
+    border: 1px solid #5f1515;
+    border-radius: 999px;
+    background: rgba(127,29,29,.3);
+}
+
+.empty-state { background: rgba(16,16,16,.86); border-style: solid; }
+
+@media (max-width: 600px) {
+    .page-title { padding-left: 11px; }
+    .button { min-height: 42px; }
+}
+
 @media (max-width: 700px) {
     .admin-nav { display: grid; grid-template-columns: 1fr; }
     .admin-section { padding: 16px; }