sumint logo intigiert

math-tutor/frontend/src/components/System/BackendHealthGate.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState, type PropsWithChildren } fro
 import { fetchHealth, type HealthResponse } from "../../api/healthApi";
 import { t } from "../../i18n";
 import "../../styles/theme.css";
+import sumintLogo from "../../../SuMINT-Logo.png";
 
 type GateState = "checking" | "healthy" | "unhealthy";
 
@@ -93,7 +94,7 @@ export default function BackendHealthGate({ children }: PropsWithChildren) {
     <div className="backend-health-shell">
       <header className="app-header backend-health-header">
         <div className="brand">
-          <span className="brand-mark">SUM</span>
+          <img className="brand-logo" src={sumintLogo} alt="SuMINT Logo" />
           <div className="brand-text">
             <div className="brand-title">Math Tutor</div>
             <div className="brand-subtitle">{t("prototypeWorkspace")}</div>

math-tutor/frontend/src/pages/ChatPage.tsx

@@ -12,6 +12,7 @@ import type { OrchestratorName } from "../api/orchestratorApi";
 import { selectTask } from "../api/taskApi";
 import { t } from "../i18n";
 import { createSessionId, useTutorSession } from "../state/tutorSession";
+import sumintLogo from "../../SuMINT-Logo.png";
 
 const initialMessages: ChatMessage[] = [];
 
@@ -800,7 +801,7 @@ export default function ChatPage() {
           </button>
           ) : null}
           <div className="brand">
-          <span className="brand-mark">SUM</span>
+            <img className="brand-logo" src={sumintLogo} alt="SuMINT Logo" />
             <div className="brand-text">
               <div className="brand-title">Math Tutor</div>
               <div className="brand-subtitle">{t("prototypeWorkspace")}</div>

math-tutor/frontend/src/pages/TaskSelectionPage.tsx

@@ -6,6 +6,7 @@ import { selectTask } from "../api/taskApi";
 import { t } from "../i18n";
 import { useTutorSession } from "../state/tutorSession";
 import "../styles/theme.css";
+import sumintLogo from "../../SuMINT-Logo.png";
 
 export default function TaskSelectionPage() {
   const navigate = useNavigate();
@@ -86,7 +87,7 @@ export default function TaskSelectionPage() {
     <div className="app-shell">
       <header className="app-header">
         <div className="brand">
-          <span className="brand-mark">SUM</span>
+          <img className="brand-logo" src={sumintLogo} alt="SuMINT Logo" />
           <div className="brand-text">
             <div className="brand-title">Math Tutor</div>
             <div className="brand-subtitle">{t("taskSelectionSubtitle")}</div>

math-tutor/frontend/src/styles/theme.css

@@ -39,16 +39,12 @@ body {
   gap: 12px;
 }
 
-.brand-mark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: #1d1b16;
-  color: #fef9f0;
-  font-weight: 700;
+.brand-logo {
+  display: block;
+  width: auto;
+  height: 100px;
+  max-width: 300px;
+  object-fit: contain;
 }
 
 .brand-title {