MaxLAN-Branding: Logo in der Kopfzeile, Farben aus dem Logo

Team A in Logo-Blau, Team B in Logo-Rot, schwarze Kopfzeile mit rotem
Abschluss; CT/T-Farben aus den Emblemen, Warnungen in Orange.

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

README.md

@@ -166,6 +166,7 @@ Die Wahl wird als `mp_teamname_1` (Team mit CT-Start) und `mp_teamname_2` (T-Sta
 
 - **Map-Bilder** liegen lokal unter `client/public/maps/<map>.webp` (960 px breit, je ca. 50–90 KB). `"image"` in `map-pools.json` verweist darauf. Neue oder fehlende Bilder lädt `npm run images` von [ghostcap-gaming/cs2-map-images](https://github.com/ghostcap-gaming/cs2-map-images), verkleinert sie und trägt den Pfad ein (`npm run images -- --force` lädt alle neu). Die Bilder stammen aus dem Spiel; die Rechte liegen bei Valve. Ohne Bild zeigt die Kachel ein Muster in der Map-Farbe.
 - **Seiten-Embleme** für CT und T liegen unter `client/public/sides/ct.png` und `client/public/sides/t.png` (quadratisch, z. B. 256×256). Fehlt eine Datei, erscheint ein schlichtes Ersatzsymbol.
+- **Logo und Farben:** Das MaxLAN-e.V.-Logo liegt freigestellt unter `client/public/brand/maxlan-logo.webp`. Die Farben stehen als Variablen am Anfang von `client/src/styles.css`: Logo-Blau `#344A99` für Team A und Hauptbuttons, Logo-Rot `#A72A1C` für Team B und den Abschluss der Kopfzeile, jeweils aufgehellt für die Lesbarkeit.
 - Bestehende Matches behalten die Map-Liste, mit der sie erstellt wurden. Neue Bilder erscheinen in neu erstellten Matches.
 
 > Die mitgelieferten Map-Pools entsprechen dem Stand der Entwicklung. Valve ändert den aktiven Map-Pool regelmäßig. Map-IDs bitte gegen die eigene Serverinstallation prüfen. Eine Map, die nicht existiert, führt zu „Konfiguration fehlgeschlagen“ mit Meldung.

client/index.html

@@ -3,9 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#10151f" />
+    <meta name="theme-color" content="#000000" />
-    <title>CS2 Mapveto</title>
+    <title>CS2 Mapveto – MaxLAN e.V.</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M4 4h24l-4 24H8z' fill='%235ba4e6'/><path d='M10 10l12 12M22 10L10 22' stroke='%2310151f' stroke-width='3'/></svg>" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%23000'/><path d='M8 6l16 20M24 6L8 26' stroke='%23a72a1c' stroke-width='5' stroke-linecap='round'/></svg>" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

client/src/App.jsx

@@ -17,12 +17,9 @@ export default function App() {
   return (
     <div className="app">
       <header className="topbar">
-        <Link to="/" className="brand" aria-label="Zur Übersicht">
+        <Link to="/" className="brand" aria-label="MaxLAN e.V. CS2 Mapveto – zur Übersicht">
-          <svg viewBox="0 0 32 32" width="26" height="26" aria-hidden="true">
+          <img src="/brand/maxlan-logo.webp" alt="MaxLAN e.V." className="brand-logo" width="743" height="174" />
-            <path d="M4 4h24l-4 24H8z" fill="var(--ct)" />
+          <span className="brand-app">CS2 Mapveto</span>
-            <path d="M10 10l12 12M22 10L10 22" stroke="var(--bg)" strokeWidth="3" />
-          </svg>
-          <span>CS2 Mapveto</span>
         </Link>
         {config?.server.simulated && (
           <span className="demo-flag" title="SERVER_ADAPTER=demo – es werden keine echten CS2-Server gestartet">

client/src/styles.css

@@ -1,21 +1,31 @@
 /* ---------- Tokens ---------- */
 :root {
-  --bg: #10151f;
+  /* MaxLAN-Farben aus dem Logo: Blau #344A99, Rot #A72A1C auf Schwarz */
-  --surface: #161d2a;
+  --brand-blue: #344a99;
-  --surface-2: #1d2636;
+  --brand-red: #a72a1c;
-  --line: #2a3448;
-  --line-strong: #3a4760;
-  --text: #e6ebf2;
-  --muted: #8a96ab;
 
-  --team-a: #3cc6c0;
+  --bg: #090b11;
-  --team-b: #e86fa0;
+  --bg-rgb: 9, 11, 17;
-  --ct: #6ca8e8;
+  --surface: #11141e;
-  --t: #dda84a;
+  --surface-2: #191d2b;
+  --line: #232939;
+  --line-strong: #343c53;
+  --text: #e8ebf3;
+  --muted: #8b93a8;
+
+  /* Teamfarben: Logo-Blau und -Rot, aufgehellt für Lesbarkeit auf dunklem Grund */
+  --team-a: #6383e6;
+  --team-b: #e5503c;
+  --primary: #3b5bcc;
+  --primary-hover: #4a6ae0;
+  --link: #7b97f0;
+  /* Seitenfarben aus den CT/T-Emblemen */
+  --ct: #9fb3d1;
+  --t: #d2bd8e;
 
   --ok: #49d48f;
   --pending: #e8c25a;
-  --error: #f0605d;
+  --error: #ff8a3d;
   --demo: #b39bff;
 
   --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
@@ -39,12 +49,12 @@ h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
 h2 { font-size: 1.375rem; }
 h3 { font-size: 1.0625rem; }
 p { margin: 0 0 .75em; }
-a { color: var(--ct); }
+a { color: var(--link); }
 code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .875em; }
 .muted { color: var(--muted); }
 .small { font-size: .875rem; }
 .lead { color: var(--muted); max-width: 60ch; font-size: 1.0625rem; }
-:focus-visible { outline: 2px solid var(--ct); outline-offset: 2px; }
+:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
 
 .tone-ok { color: var(--ok); }
 .tone-pending { color: var(--pending); }
@@ -57,12 +67,15 @@ code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-siz
 /* ---------- Layout ---------- */
 .topbar {
   display: flex; align-items: center; gap: 16px;
-  padding: 12px clamp(16px, 4vw, 40px);
+  padding: 10px clamp(16px, 4vw, 40px);
-  border-bottom: 1px solid var(--line);
+  /* Schwarz wie der Logo-Hintergrund, roter Abschluss wie das X */
-  background: var(--surface);
+  border-bottom: 2px solid var(--brand-red);
+  background: #000;
   position: sticky; top: 0; z-index: 10;
 }
-.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 1.25rem var(--display); }
+.brand { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
+.brand-logo { height: 42px; width: auto; display: block; }
+.brand-app { font: 600 1.125rem var(--display); color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line-strong); white-space: nowrap; }
 .topbar nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
 .nav-link { color: var(--muted); text-decoration: none; }
 .nav-link:hover { color: var(--text); }
@@ -84,16 +97,16 @@ code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-siz
 }
 .btn:hover:not(:disabled) { border-color: var(--muted); }
 .btn:disabled { opacity: .45; cursor: not-allowed; }
-.btn-primary { background: var(--team-a); border-color: var(--team-a); color: #06201f; }
+.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
-.btn-primary:hover:not(:disabled) { background: #5ad6d0; border-color: #5ad6d0; }
+.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
-.btn-danger { background: var(--error); border-color: var(--error); color: #2a0606; }
+.btn-danger { background: var(--error); border-color: var(--error); color: #2a1204; }
 .btn-ct { background: color-mix(in srgb, var(--ct) 22%, var(--surface)); border-color: var(--ct); }
 .btn-t { background: color-mix(in srgb, var(--t) 22%, var(--surface)); border-color: var(--t); }
 .btn-ghost { background: transparent; }
 .btn-sm { padding: 5px 12px; font-size: .875rem; }
 .btn-lg { padding: 13px 22px; font-size: 1.0625rem; }
 .btn.danger, .link-btn.danger { color: var(--error); }
-.link-btn { background: none; border: 0; padding: 0; color: var(--ct); font: inherit; font-size: .875rem; cursor: pointer; }
+.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: .875rem; cursor: pointer; }
 .link-btn:disabled { opacity: .5; cursor: not-allowed; }
 
 .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
@@ -102,13 +115,13 @@ input, select {
   font: inherit; color: var(--text); background: var(--bg);
   border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px; min-width: 0;
 }
-input:focus, select:focus { border-color: var(--ct); outline: none; }
+input:focus, select:focus { border-color: var(--link); outline: none; }
 .hint { color: var(--muted); font-size: .8125rem; }
 .field-error { color: var(--error); font-size: .875rem; margin-top: 6px; }
 .row { display: flex; gap: 10px; flex-wrap: wrap; }
 
 .alert { border: 1px solid var(--line-strong); background: var(--surface); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; }
-.alert-error { border-color: var(--error); color: #ffc9c7; }
+.alert-error { border-color: var(--error); color: #ffd2b8; }
 .alert-demo { border-color: color-mix(in srgb, var(--demo) 55%, transparent); background: color-mix(in srgb, var(--demo) 9%, var(--surface)); color: #ded3ff; font-size: .875rem; }
 
 .empty { text-align: center; padding: 80px 16px; }
@@ -131,7 +144,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; }
 .vs { color: var(--muted); font: 500 .9375rem var(--body); }
 .vs.big { font-size: 1.25rem; align-self: center; }
 .match-row-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .875rem; color: var(--muted); }
-.mine { color: var(--team-a); }
+.mine { color: var(--link); }
 .group-closed .match-row-teams { opacity: .7; }
 
 /* ---------- Match erstellen ---------- */
@@ -150,9 +163,9 @@ input:focus, select:focus { border-color: var(--ct); outline: none; }
 .choice-card strong { font: 600 1.375rem var(--display); }
 .choice-card span { color: var(--muted); font-size: .875rem; }
 .choice-card small { color: var(--muted); }
-.choice-card.is-on { border-color: var(--team-a); box-shadow: inset 0 0 0 1px var(--team-a); }
+.choice-card.is-on { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
 .choice-card.is-off { opacity: .45; cursor: not-allowed; }
-.choice-card:has(input:focus-visible) { outline: 2px solid var(--ct); outline-offset: 2px; }
+.choice-card:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
 .flow-preview { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 12px 0 0; }
 .flow-step { font-size: .75rem; padding: 3px 8px; border-radius: 3px; background: var(--surface-2); display: flex; flex-direction: column; line-height: 1.2; }
 .flow-step small { color: var(--muted); font-size: .6875rem; }
@@ -243,7 +256,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; }
 /* Abdunkeln nach unten, damit Name und Status auf jedem Bild lesbar bleiben */
 .map-art::after {
   content: ''; position: absolute; inset: 0;
-  background: linear-gradient(180deg, rgba(16, 21, 31, .05) 30%, rgba(16, 21, 31, .88) 100%);
+  background: linear-gradient(180deg, rgba(var(--bg-rgb), .05) 30%, rgba(var(--bg-rgb), .88) 100%);
 }
 .map-name, .map-status { position: relative; z-index: 1; }
 .map-name { font: 700 1.625rem/1 var(--display); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
@@ -251,7 +264,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; }
 .map-tile:not(:disabled) { cursor: pointer; }
 .map-tile:not(:disabled):hover { transform: translateY(-2px); }
 .map-tile:focus-visible { outline: none; }
-.map-tile:focus-visible::after { content: ''; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 0 3px var(--ct); }
+.map-tile:focus-visible::after { content: ''; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 0 3px var(--link); }
 
 /* Gebannt: entsättigt, mit diagonalem Strich in der Farbe des bannenden Teams */
 .map-tile.status-banned { filter: grayscale(.9) brightness(.6); }
@@ -277,14 +290,14 @@ input:focus, select:focus { border-color: var(--ct); outline: none; }
 .veto-confirm .btn { width: 100%; }
 .side-choice { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
 .side-choice-art { opacity: .45; }
-.side-choice-art::after { background: linear-gradient(90deg, rgba(16, 21, 31, .92), rgba(16, 21, 31, .55)); }
+.side-choice-art::after { background: linear-gradient(90deg, rgba(var(--bg-rgb), .92), rgba(var(--bg-rgb), .55)); }
 .side-choice-body { position: relative; z-index: 1; padding: 18px; }
 .side-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 .side-option {
   --side: var(--ct);
   display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
   text-align: left; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--text);
-  background: color-mix(in srgb, var(--side) 16%, rgba(16, 21, 31, .75));
+  background: color-mix(in srgb, var(--side) 16%, rgba(var(--bg-rgb), .75));
   border: 2px solid color-mix(in srgb, var(--side) 70%, transparent); border-radius: var(--radius);
   transition: background .15s, border-color .15s, transform .15s;
 }
@@ -292,7 +305,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; }
 .side-option .side-icon { grid-row: 1 / 3; color: var(--side); }
 .side-option-name { font: 700 1.375rem/1.1 var(--display); color: var(--side); }
 .side-option-sub { font-size: .8125rem; color: var(--muted); }
-.side-option:hover:not(:disabled) { background: color-mix(in srgb, var(--side) 28%, rgba(16, 21, 31, .75)); border-color: var(--side); transform: translateY(-1px); }
+.side-option:hover:not(:disabled) { background: color-mix(in srgb, var(--side) 28%, rgba(var(--bg-rgb), .75)); border-color: var(--side); transform: translateY(-1px); }
 .side-option:disabled { opacity: .5; cursor: not-allowed; }
 .side-icon { flex: none; }
 
@@ -376,7 +389,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; }
 
 .event-log ol { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow-y: auto; font-size: .875rem; }
 .event-log li { display: flex; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--line); }
-.event-log li.ev-server span { color: color-mix(in srgb, var(--text) 80%, var(--ct)); }
+.event-log li.ev-server span { color: color-mix(in srgb, var(--text) 80%, var(--link)); }
 
 .toast {
   position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50;
@@ -396,6 +409,8 @@ input:focus, select:focus { border-color: var(--ct); outline: none; }
   .match-grid { grid-template-columns: 1fr; }
   .topbar { flex-wrap: wrap; gap: 8px 16px; }
   .demo-flag { order: 3; }
+  .brand-logo { height: 26px; }
+  .brand-app { font-size: 1rem; padding-left: 10px; }
   .create-teams { grid-template-columns: 1fr; }
   .vs.big { justify-self: center; }
   .map-grid { grid-template-columns: repeat(2, 1fr); }