Refine shared header language selector

app/templates/index.html

@@ -21,10 +21,10 @@
     <style>
 
         .page-header {
-            display: flex;
-            justify-content: space-between;
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
             align-items: center;
-            gap: 20px;
+            gap: 12px 16px;
             margin-bottom: 35px;
         }
 
@@ -54,6 +54,7 @@
         }
 
         .header-actions {
+            grid-column: 1 / -1;
             display: flex;
             gap: 10px;
             align-items: center;
@@ -175,7 +176,7 @@
             min-height: 100vh;
         }
 
-        .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 { padding: 16px 20px; 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: "Nimbus Sans Narrow", 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; }
@@ -185,13 +186,23 @@
         .concert-date { color: #ef4444; }
         .concert-card.linked-event { border-left-color: #dc2626; background: #0d0d0d; }
 
+        @media (min-width: 1024px) {
+            .page-header { grid-template-columns: minmax(0, 1fr) auto auto; }
+            .page-header > .header-controls { grid-column: 3; grid-row: 1; }
+            .page-header > .header-actions { grid-column: 2; grid-row: 1; }
+        }
+
         @media (max-width: 600px) {
 
             .page-header {
-                align-items: flex-start;
-                flex-direction: column;
+                padding: 12px;
+                gap: 10px;
             }
 
+            .page-header .subtitle { display: none; }
+            .page-header h1 { font-size: 1.25rem; overflow-wrap: anywhere; }
+            .page-header .brand-logo { max-width: 100% !important; }
+
             .new-concert-button {
                 width: 100%;
                 text-align: center;
@@ -244,6 +255,8 @@
         </div>
 
 
+        {% include '_header_controls.html' %}
+
         <div class="header-actions">
 
             <a href="{% if archive %}/{% else %}/events/past{% endif %}" class="admin-button">
@@ -257,8 +270,6 @@
                 {{ _('+ Veranstaltung hinzufügen') }}
             </a>
 
-            {% include '_header_controls.html' %}
-
         </div>
 
     </header>