From a460cbd99c56f98180550e387b6844d682c28c05 Mon Sep 17 00:00:00 2001
From: martin <f95martin@skymail.de>
Date: Sat, 24 Jan 2026 19:05:53 +0100
Subject: [PATCH] adjust chat button positioning to avoid overlap with
 accessibility button, add responsive breakpoints for mobile and small mobile
 screens #deploy

---
 index.html                             | 53 ++++++++++++++++++---
 src/components/AccessibilityToggle.tsx |  2 +-
 src/components/Footer.tsx              | 64 --------------------------
 src/components/Layout.tsx              |  2 +-
 4 files changed, 48 insertions(+), 73 deletions(-)

diff --git a/index.html b/index.html
index c971478..3ab6e63 100644
--- a/index.html
+++ b/index.html
@@ -38,20 +38,37 @@
         height: 52px !important;
         box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
         bottom: 24px !important;
-        right: 24px !important;
+        right: 120px !important;
         font-size: 22px !important;
         position: fixed !important;
         z-index: 9999 !important;
         transform: none !important;
       }
       
-      /* Hide chat button on mobile */
+      /* Mobile responsive positioning */
       @media (max-width: 768px) {
         html body div[class*="chat-button"],
         html body div[class*="chat-launcher"],
         html body button[aria-label*="chat"],
         html body button[title*="chat"] {
-          display: none !important;
+          right: 80px !important;
+          bottom: 24px !important;
+          width: 48px !important;
+          height: 48px !important;
+          font-size: 20px !important;
+        }
+      }
+      
+      @media (max-width: 640px) {
+        html body div[class*="chat-button"],
+        html body div[class*="chat-launcher"],
+        html body button[aria-label*="chat"],
+        html body button[title*="chat"] {
+          right: 70px !important;
+          bottom: 24px !important;
+          width: 44px !important;
+          height: 44px !important;
+          font-size: 18px !important;
         }
       }
     </style>
@@ -96,11 +113,22 @@
       
       // Force reposition after chat loads
       setTimeout(() => {
+        const isMobile = window.innerWidth <= 768;
+        const isSmallMobile = window.innerWidth <= 640;
+        
         const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
         chatButtons.forEach(button => {
           if (button) {
-            button.style.setProperty('bottom', '24px', 'important');
-            button.style.setProperty('right', '24px', 'important');
+            if (isSmallMobile) {
+              button.style.setProperty('bottom', '24px', 'important');
+              button.style.setProperty('right', '70px', 'important');
+            } else if (isMobile) {
+              button.style.setProperty('bottom', '24px', 'important');
+              button.style.setProperty('right', '80px', 'important');
+            } else {
+              button.style.setProperty('bottom', '24px', 'important');
+              button.style.setProperty('right', '120px', 'important');
+            }
             button.style.setProperty('position', 'fixed', 'important');
             button.style.setProperty('z-index', '9999', 'important');
             button.style.setProperty('transform', 'none', 'important');
@@ -110,11 +138,22 @@
       
       // Continuous repositioning - run every 500ms
       setInterval(() => {
+        const isMobile = window.innerWidth <= 768;
+        const isSmallMobile = window.innerWidth <= 640;
+        
         const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
         chatButtons.forEach(button => {
           if (button) {
-            button.style.setProperty('bottom', '24px', 'important');
-            button.style.setProperty('right', '24px', 'important');
+            if (isSmallMobile) {
+              button.style.setProperty('bottom', '24px', 'important');
+              button.style.setProperty('right', '70px', 'important');
+            } else if (isMobile) {
+              button.style.setProperty('bottom', '24px', 'important');
+              button.style.setProperty('right', '80px', 'important');
+            } else {
+              button.style.setProperty('bottom', '24px', 'important');
+              button.style.setProperty('right', '120px', 'important');
+            }
             button.style.setProperty('position', 'fixed', 'important');
             button.style.setProperty('z-index', '9999', 'important');
             button.style.setProperty('transform', 'none', 'important');
diff --git a/src/components/AccessibilityToggle.tsx b/src/components/AccessibilityToggle.tsx
index fc1464a..f3cbbc2 100644
--- a/src/components/AccessibilityToggle.tsx
+++ b/src/components/AccessibilityToggle.tsx
@@ -49,7 +49,7 @@ const AccessibilityToggle = () => {
       {/* Toggle Button */}
       <Button
         onClick={() => setIsOpen(!isOpen)}
-        className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg hidden md:flex"
+        className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg"
         aria-label="Barrierefreiheitsoptionen"
       >
         {isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 98a7350..df2eeee 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -101,63 +101,6 @@ const Footer = () => {
 
   return (
     <footer className="bg-blue-50 border-t border-blue-100">
-      {/* Mobile Action Buttons */}
-      <div className="md:hidden bg-white border-b border-blue-100 sticky bottom-0 z-40">
-        <div className="container mx-auto px-4 py-3">
-          <div className="flex justify-around items-center gap-2">
-            <Button
-              asChild
-              variant="outline"
-              size="sm"
-              className="flex-1 h-10 text-xs bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
-            >
-              <Link to="/contact#contact" className="flex items-center justify-center gap-1">
-                <Phone className="h-3 w-3" />
-                <span>Kontakt</span>
-              </Link>
-            </Button>
-            
-            <Button
-              variant="outline"
-              size="sm"
-              className="flex-1 h-10 text-xs bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
-              onClick={() => {
-                // Open n8n chat if available
-                const chatButton = document.querySelector('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]') as HTMLElement;
-                if (chatButton) {
-                  chatButton.click();
-                }
-              }}
-            >
-              <MessageCircle className="h-3 w-3 mr-1" />
-              <span>Chat</span>
-            </Button>
-            
-            <Button
-              variant="outline"
-              size="sm"
-              className="flex-1 h-10 text-xs bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
-              onClick={() => setIsAccessibilityOpen(!isAccessibilityOpen)}
-            >
-              <Accessibility className="h-3 w-3 mr-1" />
-              <span>A11y</span>
-            </Button>
-            
-            {showToTop && (
-              <Button
-                variant="outline"
-                size="sm"
-                className="flex-1 h-10 text-xs bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
-                onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-              >
-                <ArrowUp className="h-3 w-3 mr-1" />
-                <span>Top</span>
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-
       <div className="container mx-auto px-4 py-8">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
           {/* Logo & Description */}
@@ -439,13 +382,6 @@ const Footer = () => {
           </div>
         </div>
 
-        {/* Mobile Accessibility Bar */}
-        {isAccessibilityOpen && (
-          <div className="md:hidden bg-white border-t border-blue-100">
-            <AccessibilityBar />
-          </div>
-        )}
-
         <div className="border-t border-blue-100 mt-12 pt-8 text-center text-sm text-blue-950/70">
           <p>{t('bottom.externalNotice', 'Externe Links: Wir sind nicht verantwortlich für Inhalte externer Webseiten.')}</p>
           <p> 2026. Agentur Mizera & Partner - {t('bottom.copyright', 'Alle Rechte vorbehalten.')}</p>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 6336941..e2f407e 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -102,7 +102,7 @@ const Layout = ({ children }: LayoutProps) => {
 
       <AccessibilityToggle />
 
-      <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3 hidden md:flex">
+      <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
         {showToTop ? (
           <Button
             type="button"