Maskottchen als Symbol und Credits

harle.png steht jetzt gross auf der Anmeldeseite und klein in der Fusszeile,
dazu die Zeile "Created by Harlekin | CC-Head".

Aus der Vorlage entstehen drei Groessen: das volle Bild fuer die Anzeige und
ein Ausschnitt des Kopfes fuer Favicon und Startsymbol - ganzfigurig waere die
Figur bei 32 Pixeln nicht mehr zu erkennen.

Dabei fiel auf, dass die Cache-Regel zu grob war: sie gab allem ausser HTML
ein Jahr immutable, also auch Bildern. Deren Name aendert sich beim Austausch
aber nicht, ein neues Bild waere ein Jahr lang nicht angekommen. Jetzt gilt
das lange Ablaufdatum nur fuer die gebauten Assets, die einen Inhalts-Hash im
Namen tragen; alles andere haelt einen Tag und fragt dann nach.

web/src/components/Layout.tsx

@@ -41,6 +41,13 @@ export default function Layout({ children }: { children: ReactNode }) {
       </header>
 
       <main className="content">{children}</main>
+
+      <footer className="footer">
+        <img src="/harle.png" alt="" className="footer-mascot" />
+        <span>
+          Created by <strong>Harlekin</strong> <span className="credits-sep">|</span> CC-Head
+        </span>
+      </footer>
     </div>
   );
 }

web/src/pages/Login.tsx

@@ -73,6 +73,7 @@ export default function Login() {
   return (
     <div className="login-page">
       <div className="login-card">
+        <img src="/harle.png" alt="" className="login-mascot" />
         <h1>CC-Manager</h1>
         <p className="login-sub">
           {challenge ? 'Bestätigungscode eingeben' : 'Bitte anmelden'}
@@ -136,6 +137,10 @@ export default function Login() {
           </form>
         )}
       </div>
+
+      <p className="credits">
+        Created by <strong>Harlekin</strong> <span className="credits-sep">|</span> CC-Head
+      </p>
     </div>
   );
 }

web/src/styles.css

@@ -833,3 +833,80 @@ textarea {
 .usage-hint {
   margin: -0.5rem 0 1.25rem;
 }
+
+/* --- Maskottchen und Credits --- */
+
+.login-page {
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.login-mascot {
+  display: block;
+  width: 190px;
+  height: auto;
+  margin: -3.25rem auto 0.25rem;
+  /* Der Charakter steht frei, ein weicher Schein hebt ihn vom Karton ab. */
+  filter: drop-shadow(0 6px 18px rgba(91, 140, 255, 0.28));
+  pointer-events: none;
+  user-select: none;
+}
+
+.credits {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.credits strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.credits-sep {
+  opacity: 0.4;
+  margin: 0 0.15rem;
+}
+
+.shell {
+  display: flex;
+  flex-direction: column;
+}
+
+.shell .content {
+  flex: 1;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  padding: 1.1rem 1.5rem 1.6rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.footer strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.footer-mascot {
+  width: 30px;
+  height: 30px;
+  /* Kopfbereich ausschneiden: ganzfigurig ist die Figur hier zu klein. */
+  object-fit: cover;
+  object-position: 50% 16%;
+  border-radius: 50%;
+  background: var(--bg-input);
+}
+
+@media (max-width: 820px) {
+  .login-mascot {
+    width: 140px;
+    margin-top: -2.25rem;
+  }
+}