From c618d800992bd32a513b8f870c43ade771faa287 Mon Sep 17 00:00:00 2001
From: martin <f95martin@skymail.de>
Date: Sat, 24 Jan 2026 19:18:54 +0100
Subject: [PATCH] hide accessibility toggle on mobile, add accessibility button
 to mobile menu with collapsible bar #deploy

---
 src/components/AccessibilityToggle.tsx |  2 +-
 src/components/Header.tsx              | 28 +++++++++++++++++++++++---
 src/components/Layout.tsx              |  6 +++---
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/AccessibilityToggle.tsx b/src/components/AccessibilityToggle.tsx
index f3cbbc2..fc1464a 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"
+        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"
         aria-label="Barrierefreiheitsoptionen"
       >
         {isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 098e273..67c603f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,13 +1,15 @@
 import { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Menu, X, Phone, Home, Shield, FileText, Truck, Users, Search } from 'lucide-react';
+import { Menu, X, Phone, Home, Shield, FileText, Truck, Users, Search, Accessibility } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import LanguageSwitcher from '@/components/LanguageSwitcher';
+import AccessibilityBar from '@/components/AccessibilityBar';
 
 const Header = () => {
   const { t } = useTranslation('nav');
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isAccessibilityOpen, setIsAccessibilityOpen] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
   const [searchQuery, setSearchQuery] = useState('');
@@ -163,10 +165,23 @@ const Header = () => {
         {isMenuOpen && (
           <div className="md:hidden border-t py-4">
             <nav className="flex flex-col space-y-2">
-              {/* Language Switcher (Mobile) */}
+              {/* Language & Accessibility Section (Mobile) */}
               <div className="px-3 py-2 border-b border-gray-200">
                 <div className="text-xs font-medium text-gray-500 mb-2">Sprache / Language</div>
-                <LanguageSwitcher />
+                <div className="flex items-center justify-between">
+                  <LanguageSwitcher />
+                  <button
+                    onClick={() => setIsAccessibilityOpen(!isAccessibilityOpen)}
+                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-200 border ${
+                      isAccessibilityOpen 
+                        ? 'text-blue-600 bg-blue-50 border-blue-200 shadow-sm' 
+                        : 'text-gray-700 bg-white border-gray-200 hover:text-blue-600 hover:bg-gray-50 hover:border-blue-200'
+                    }`}
+                    aria-label="Barrierefreiheit"
+                  >
+                    <Accessibility className="h-4 w-4" strokeWidth={1.5} />
+                  </button>
+                </div>
               </div>
               
               {[...navigation, ...rightMenuItems].map((item) => {
@@ -190,6 +205,13 @@ const Header = () => {
                 );
               })}
             </nav>
+            
+            {/* Mobile Accessibility Bar */}
+            {isAccessibilityOpen && (
+              <div className="mt-4 pt-4 border-t border-gray-200">
+                <AccessibilityBar />
+              </div>
+            )}
           </div>
         )}
       </div>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e2f407e..2128a48 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -102,8 +102,8 @@ const Layout = ({ children }: LayoutProps) => {
 
       <AccessibilityToggle />
 
-      <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
-        {showToTop ? (
+      <div className="fixed bottom-6 right-[calc(1rem+140px)] z-50 flex flex-col items-end gap-3 md:right-[calc(1rem+180px)] sm:right-[calc(1rem+90px)]">
+        {showToTop && (
           <Button
             type="button"
             variant="outline"
@@ -114,7 +114,7 @@ const Layout = ({ children }: LayoutProps) => {
           >
             <ArrowUp className="h-5 w-5 text-blue-700" />
           </Button>
-        ) : null}
+        )}
 
         <Button asChild className="h-12 rounded-full px-6 bg-blue-600 hover:bg-blue-700 shadow-lg">
           <Link to="/contact#contact">