From cb4b579e578612aed7b6c122672300b95894ef26 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Tue, 19 Aug 2025 12:08:29 +0200
Subject: [PATCH] =?UTF-8?q?Theme-Button=20in=20flexiblen=20Header=20versch?=
 =?UTF-8?q?oben;=20=C3=9Cberschneidung=20auf=20Mobilger=C3=A4ten=20behoben?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index b9c8ae5..ee784f4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -58,6 +58,11 @@
         html, body { background: var(--bg); color: var(--text); }
         body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 2rem; }
         .container { max-width: 800px; margin: 0 auto; }
+        .page-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
+        .page-header h1 { margin: 0; }
+        @media (max-width: 480px) {
+            .page-header h1 { font-size: 1.5rem; }
+        }
         .grid { display: grid; grid-template-columns: repeat(5, 3rem); gap: .5rem; }
         .grid input { text-align: center; font-size: 1.25rem; padding: .4rem; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: .375rem; }
         label { font-weight: 600; display: block; margin-top: 1rem; margin-bottom: .25rem; }
@@ -78,15 +83,17 @@
         .word-list li { display: inline-block; margin: 0 .25rem .25rem 0; }
         fieldset { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; }
         legend { font-weight: 700; padding: 0 .25rem; }
-        .theme-toggle { position: fixed; top: .75rem; left: .75rem; z-index: 100; background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .6rem; font-size: .95rem; }
+        .theme-toggle { background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .6rem; font-size: .95rem; margin-top: 0; }
         .theme-toggle:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
     </style>
 </head>
 <body>
-    <button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="Theme umschalten" title="Theme umschalten">🌞/🌙</button>
     <a href="#results" class="skip-link">Zum Ergebnisbereich springen</a>
     <div class="container">
-        <h1>Wordle‑Cheater (Deutsch)</h1>
+        <header class="page-header">
+            <button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="Theme umschalten" title="Theme umschalten">🌞/🌙</button>
+            <h1>Wordle‑Cheater (Deutsch)</h1>
+        </header>
         <p>Wortliste geladen: <strong>{{ words_count }}</strong> Wörter</p>
 
         <main id="main" role="main">
@@ -152,7 +159,7 @@
         </main>
 
         <footer class="footer">
-            Another <a href="https://gitea.elpatron.me/elpatron/wordle-cheater">Open Source Project</a>, vibe coded in less than 1 hour by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
+            Made in 2025 with ❤️ and ☕ by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
         </footer>
     </div>
 
