Polish typography and responsive admin navigation

app/static/css/style.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Roboto+Condensed:wght@400;500;700&display=swap');
+
 :root {
     --bg: #050505;
     --surface: #101010;
@@ -16,12 +18,7 @@
 body {
     margin: 0;
     min-height: 100vh;
-    font-family:
+    font-family: "Roboto Condensed", "Nimbus Sans Narrow", system-ui, sans-serif;
-        system-ui,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        sans-serif;
 
     background:
         linear-gradient(rgba(4, 4, 6, .58), rgba(4, 4, 6, .72)),
@@ -74,6 +71,7 @@ header {
 }
 
 .user-menu { position: relative; margin-left: auto; }
+.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
 .user-menu summary { padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; list-style: none; font-weight: 700; }
 .user-menu summary::-webkit-details-marker { display: none; }
 .user-menu[open] summary { border-color: var(--accent); background: var(--surface-hover); }
@@ -232,6 +230,10 @@ main {
     .concert-grid {
         grid-template-columns: 1fr;
     }
+
+    .header-actions { width: 100%; justify-content: flex-start; }
+    .header-actions > a { flex: 1 1 auto; text-align: center; }
+    .header-actions .user-menu { margin-left: 0; }
 }
 form {
     max-width: 650px;
@@ -393,9 +395,14 @@ body::after {
 
 header, main, .container { position: relative; z-index: 1; }
 
-h1, h2, h3, .logo, .button, button, .page-title h1 {
+h1, h2, h3, .logo, .page-title h1 {
-    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+    font-family: "Metal Mania", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
-    letter-spacing: .045em;
+    letter-spacing: .055em;
+}
+
+.button, button {
+    font-family: "Roboto Condensed", "Nimbus Sans Narrow", system-ui, sans-serif;
+    letter-spacing: .06em;
 }
 
 h1, .page-title h1 {

app/templates/_user_menu.html

@@ -4,6 +4,7 @@
         <a href="/profile">Mein Profil</a>
         <a href="/messages">Nachrichten{% if user.unread_message_count %} <span class="menu-count">{{ user.unread_message_count }}</span>{% endif %}</a>
         {% if user.event_invitation_count %}<a href="/#event-invitations">Veranstaltungseinladungen <span class="menu-count">{{ user.event_invitation_count }}</span></a>{% endif %}
+        {% if user.is_admin %}<a href="/admin">⚙️ Verwaltung</a>{% endif %}
         <form method="post" action="/logout">
             <button type="submit">Abmelden</button>
         </form>

app/templates/concert_detail.html

@@ -14,7 +14,7 @@
 
     <link
         rel="stylesheet"
-        href="/static/style.css"
+        href="/static/css/style.css"
     >
 
     <style>

app/templates/index.html

@@ -175,7 +175,7 @@
         }
 
         .page-header { padding: 24px; border: 1px solid #5f1515; border-left: 4px solid #dc2626; border-radius: 14px; background: linear-gradient(110deg, rgba(10,10,10,.9), rgba(69,10,10,.28)); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
-        .page-header h1 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(185, 28, 28, .45); }
+        .page-header h1 { font-family: "Metal Mania", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(185, 28, 28, .45); }
         .new-concert-button { background: #991b1b; border: 1px solid #dc2626; }
         .new-concert-button:hover { background: #b91c1c; }
         .admin-button:hover { border-color: #dc2626; }
@@ -248,14 +248,6 @@
                 {% if archive %}⚡ Bevorstehend{% else %}☠ Vergangene{% endif %}
             </a>
 
-            {% if user.is_admin %}
-
-                <a href="/admin" class="admin-button">
-                    ⚙️ Verwaltung
-                </a>
-
-            {% endif %}
-
             <a
                 href="/concerts/new"
                 class="new-concert-button"