From 16284b6f03e2a536e5cc0ddbca184c49958e7650 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Sat, 18 Jul 2026 04:17:09 +0200
Subject: [PATCH] fix: implement keyboard accessible FAQ accordions with aria
 attributes and adjust border thickness to border-[0.5px]

---
 src/components/HeroAndLiquidGlass.astro | 38 +++++++++++++++++--------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/HeroAndLiquidGlass.astro b/src/components/HeroAndLiquidGlass.astro
index e5af836..f3598b2 100644
--- a/src/components/HeroAndLiquidGlass.astro
+++ b/src/components/HeroAndLiquidGlass.astro
@@ -215,53 +215,53 @@
     <div class="space-y-4 reveal">
       
       <!-- FAQ 1 -->
-      <details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
-        <summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
+      <details id="faq-1" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
+        <summary id="faq-summary-1" aria-controls="faq-content-1" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
           <span>Ist die Erstellung der Website wirklich im Hosting-Abo inklusive?</span>
           <span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
             <svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
           </span>
         </summary>
-        <div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
+        <div id="faq-content-1" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
           Ja. Wir erstellen Ihren neuen Internetauftritt passend zum Hosting direkt mit. Es gibt keine hohen einmaligen Einrichtungskosten – alles ist in der monatlichen Pauschale enthalten.
         </div>
       </details>
 
       <!-- FAQ 2 -->
-      <details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
-        <summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
+      <details id="faq-2" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
+        <summary id="faq-summary-2" aria-controls="faq-content-2" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
           <span>Kann ich meine bestehende Domain mitnehmen?</span>
           <span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
             <svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
           </span>
         </summary>
-        <div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
+        <div id="faq-content-2" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
           Selbstverständlich. Wir übernehmen den kompletten Domain-Umzug für Sie. Ihre Website bleibt währenddessen unterbrechungsfrei erreichbar.
         </div>
       </details>
 
       <!-- FAQ 3 -->
-      <details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
-        <summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
+      <details id="faq-3" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
+        <summary id="faq-summary-3" aria-controls="faq-content-3" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
           <span>Wie laufen spätere Änderungen an meiner Website ab?</span>
           <span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
             <svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
           </span>
         </summary>
-        <div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
+        <div id="faq-content-3" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
           Senden Sie uns einfach eine kurze Nachricht mit Ihren Änderungswünschen (z. B. neue Öffnungszeiten oder Bilder). Wir setzen diese zeitnah und zuverlässig für Sie um – ohne Zusatzkosten.
         </div>
       </details>
 
       <!-- FAQ 4 -->
-      <details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
-        <summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
+      <details id="faq-4" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
+        <summary id="faq-summary-4" aria-controls="faq-content-4" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
           <span>Wie flexibel ist das Sorgenfrei-Paket und wie sind die Laufzeiten?</span>
           <span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
             <svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
           </span>
         </summary>
-        <div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
+        <div id="faq-content-4" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
           Unser Angebot richtet sich ganz nach Ihrem Bedarf. Die Preise und genauen Konditionen kalkulieren wir auf Anfrage. Jede Anfrage ist für Sie vollkommen unverbindlich.
         </div>
       </details>
@@ -317,4 +317,18 @@
   });
   
   revealElements.forEach(el => observer.observe(el));
+
+  // A11y FAQ Details Sync
+  const faqDetails = document.querySelectorAll('details');
+  faqDetails.forEach((details) => {
+    const summary = details.querySelector('summary');
+    if (summary) {
+      // Set initial state
+      summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
+      
+      details.addEventListener('toggle', () => {
+        summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
+      });
+    }
+  });
 </script>