From 971f6995a0aede6bebd8db70fed415ef2aede985 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Fri, 8 Aug 2025 23:49:11 +0200
Subject: [PATCH] =?UTF-8?q?UI:=20Icon-Overlap=20fix=20=20mehr=20linken=20I?=
 =?UTF-8?q?nnenabstand=20f=C3=BCr=20Inputs/Selects/Trigger=20(kompatibel?=
 =?UTF-8?q?=20mit=20Light/Dark/Rainbow)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/styles.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/styles.css b/web/src/styles.css
index 5cc5249..04a0289 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -41,9 +41,10 @@ body {
 /* Stitch utility classes (Light) */
 [data-theme="light"] .control-panel { background-color: #ffffff; border: 1px solid #e8e8ed; }
 [data-theme="light"] .tag-btn { padding: 8px 16px; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; background: #e8e8ed; color: #6e6e73; border: 1px solid transparent; transition: all .2s ease; cursor: pointer; }
+[data-theme="light"] .input-field.pl-10 { padding-left: 2.5rem; }
 [data-theme="light"] .tag-btn:hover { background: #dcdce1; color: #1d1d1f; }
 [data-theme="light"] .tag-btn.active { background: #007aff; color: #fff; font-weight: 600; }
-[data-theme="light"] .input-field { width: 100%; background: #f2f2f6; border: 1px solid #dcdce1; border-radius: .5rem; padding: .5rem 1rem; color: #1d1d1f; outline: none; }
+[data-theme="light"] .input-field { width: 100%; background: #f2f2f6; border: 1px solid #dcdce1; border-radius: .5rem; padding: .5rem 1rem .5rem 2.5rem; color: #1d1d1f; outline: none; }
 [data-theme="light"] .input-field:focus { box-shadow: 0 0 0 3px rgba(0,122,255,.25); border-color: transparent; }
 [data-theme="light"] .sound-btn { background: #ffffff; border: 1px solid #e8e8ed; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s ease; }
 [data-theme="light"] .sound-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #007aff; }
@@ -138,7 +139,7 @@ header p { opacity: .8; }
 }
 .control input, .control select {
   width: 100%;
-  padding: 12px 14px;
+  padding: 12px 14px 12px 40px; /* Platz für linkes Icon */
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,.25);
   background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
@@ -154,7 +155,7 @@ header p { opacity: .8; }
 .select-trigger {
   width: 100%;
   text-align: left;
-  padding: 12px 14px;
+  padding: 12px 14px 12px 40px; /* Platz für linkes Icon */
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,.32);
   background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));