From b1c7d89a7d4e0f620d2788c10543ca2ef84d071e Mon Sep 17 00:00:00 2001
From: "Kerim (portable/claudecode)" <kerim@familie-atilgan.de>
Date: Fri, 4 Sep 2026 21:09:14 +0200
Subject: [PATCH] Emoji in den Ueberschriften nicht mehr vom Farbverlauf
 ausfuellen

Die Ueberschriften von Historie und Einstellungen faerben ihren Text ueber
einen Verlauf ein: background-clip: text mit durchsichtiger Schriftfarbe.
Ein Farb-Emoji hat dabei keine Kontur, die sich einfaerben liesse - der
Browser fuellt seine gesamte Flaeche mit dem Verlauf. Aus dem Balkendiagramm
der Historie wurde so ein weisser Kasten.

Die beiden Symbole stehen jetzt in einem eigenen span, das seine Schriftfarbe
zurueckbekommt und sich damit wieder selbst zeichnet.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/index.html | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 48ccefe..538cf36 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -393,6 +393,17 @@
             background-clip: text;
         }
 
+        /* Der Farbverlauf oben faerbt den Text ueber eine durchsichtige
+           Schriftfarbe ein. Ein Farb-Emoji hat dabei keine Kontur, die sich
+           einfaerben liesse - der Browser fuellt seine gesamte Flaeche mit dem
+           Verlauf, und aus dem Balkendiagramm wird ein weisser Kasten.
+           Deshalb bekommen die Symbole ihre Schriftfarbe zurueck und malen
+           sich wieder selbst. */
+        .heading-icon {
+            -webkit-text-fill-color: #ffffff;
+            color: #ffffff;
+        }
+
         .filter-bar {
             display: flex;
             gap: 1rem;
@@ -780,7 +791,7 @@
             <!-- Historie -->
             <div id="historyView" class="view">
                 <div class="history-container">
-                    <h2>📊 Historie</h2>
+                    <h2><span class="heading-icon">📊</span> Historie</h2>
 
                     <div class="filter-bar">
                         <div class="filter-field">
@@ -815,7 +826,7 @@
             <!-- Einstellungen -->
             <div id="settingsView" class="view">
                 <div class="settings-container">
-                    <h2>⚙️ Einstellungen</h2>
+                    <h2><span class="heading-icon">⚙️</span> Einstellungen</h2>
                     <p class="settings-description">Der Tarif gilt für alle Geräte gemeinsam.</p>
 
                     <form id="settingsForm">
@@ -939,6 +950,6 @@
 
     <div class="toast" id="toast"></div>
 
-    <script src="/app.js?v=20260904-setup2"></script>
+    <script src="/app.js?v=20260904-emoji"></script>
 </body>
 </html>