Merge pull request #73 from IBCornelsen/Jens

FAQ

src/pages/faq/index.astro

@@ -2,70 +2,8 @@
 
 import Layout from "#layouts/Layout.astro";
 
-
 ---
 
-<script>
-
-document.addEventListener("DOMContentLoaded", () => {
-  const tags = document.querySelectorAll(".keyword-cloud__tag");
-  const faqSections = document.querySelectorAll(".faq__section");
-
-  const selectedKeywords = new Set();
-
-  // Toggle keyword selection
-  tags.forEach((tag) => {
-    tag.addEventListener("click", () => {
-      const keyword = tag.dataset.keyword;
-
-      // Toggle keyword in the selected set
-      if (selectedKeywords.has(keyword)) {
-        selectedKeywords.delete(keyword);
-        tag.classList.remove("keyword-cloud__tag--active");
-      } else {
-        selectedKeywords.add(keyword);
-        tag.classList.add("keyword-cloud__tag--active");
-      }
-
-      // Update FAQ visibility
-      updateFaqVisibility();
-    });
-  });
-
-  const updateFaqVisibility = () => {
-    if (selectedKeywords.size === 0) {
-      // If no keywords are selected, show all sections
-      faqSections.forEach((section) => {
-        section.classList.remove("faq__section--visible");
-        section.classList.add("faq__section--visible");
-      });
-      return;
-    }
-
-    // Show only sections matching the selected keywords
-    faqSections.forEach((section) => {
-      const sectionKeywords = section.dataset.keywords.split(", ");
-      const hasMatch = [...selectedKeywords].some((keyword) =>
-        sectionKeywords.includes(keyword)
-      );
-
-      if (hasMatch) {
-        section.classList.add("faq__section--visible");
-        section.classList.remove("hidden");
-      } else {
-        section.classList.remove("faq__section--visible");
-        section.classList.add("hidden");
-      }
-    });
-  };
-});
-
-
-</script>
-
-
-
-
 <Layout title="FAQ - Sammmlung">
 
 <h1 class="text-3xl">FAQ – Sammlung</h1>
@@ -74,19 +12,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
 <div class="faq">
 
-<div class="keyword-cloud">
-  <button class="keyword-cloud__tag" data-keyword="Gebäudekonstruktion">Gebäudekonstruktion</button>
-  <button class="keyword-cloud__tag" data-keyword="Standard-Software">Standard-Software</button>
-  <button class="keyword-cloud__tag" data-keyword="manuelle Bearbeitung">manuelle Bearbeitung</button>
-  <button class="keyword-cloud__tag" data-keyword="Zusatzkosten">Zusatzkosten</button>
-  <button class="keyword-cloud__tag" data-keyword="Grundrisspläne">Grundrisspläne</button>
-  <button class="keyword-cloud__tag" data-keyword="Rechnung">Rechnung</button>
-  <button class="keyword-cloud__tag" data-keyword="E-Mail">E-Mail</button>
-  <button class="keyword-cloud__tag" data-keyword="Dachgeschoss">Dachgeschoss</button>
-  <button class="keyword-cloud__tag" data-keyword="Pflichtfelder">Pflichtfelder</button>
-</div>
-
-  <div class="faq__section" data-keywords="Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
     <p class="faq__section-content">
       Wenn die Geometrie Ihres Gebäudes nicht korrekt in die Online-Eingabe passt (z. B. wegen eines großen Anbaus oder einer untypischen Bauweise), müssen wir die Daten manuell im Büro bearbeiten. Dies verursacht zusätzliche Kosten, die in der Regel bei <span class="faq__section-highlight">290 Euro (inklusive MwSt.)</span> liegen.
@@ -94,7 +20,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten</p>
   </div>
 
-  <div class="faq__section" data-keywords="Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau">
+  <div class="faq__section">
     <h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">
       Grundrisspläne des Gebäudes, insbesondere:
@@ -107,7 +33,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</p>
   </div>
 
-  <div class="faq__section" data-keywords="Pläne, Übermittlung, E-Mail, ID-Nummer">
+  <div class="faq__section">
     <h2 class="faq__section-title">Wie können die Pläne übermittelt werden?</h2>
     <p class="faq__section-content">
       Senden Sie die Pläne per E-Mail an:
@@ -117,7 +43,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Pläne, Übermittlung, E-Mail, ID-Nummer</p>
   </div>
 
-  <div class="faq__section" data-keywords="Rechnung, korrigierte Rechnung, Differenzbetrag">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was passiert mit der Rechnung?</h2>
     <p class="faq__section-content">
       Nach der Bearbeitung erhalten Sie eine <span class="faq__section-highlight">korrigierte Rechnung</span>, die den neuen Betrag (290 Euro) ausweist. Wenn Sie bereits eine Zahlung geleistet haben, wird lediglich der Differenzbetrag fällig.
@@ -125,7 +51,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Rechnung, korrigierte Rechnung, Differenzbetrag</p>
   </div>
 
-  <div class="faq__section" data-keywords="Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude">
+  <div class="faq__section">
     <h2 class="faq__section-title">Kann der Energieausweis nur für einen Gebäudeteil erstellt werden?</h2>
     <p class="faq__section-content">
       Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
@@ -133,7 +59,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude</p>
   </div>
 
-  <div class="faq__section" data-keywords="Rückruf, Informationen, Unterlagen, Kontaktzeiten">
+  <div class="faq__section">
     <h2 class="faq__section-title">Wann erfolgt der Rückruf?</h2>
     <p class="faq__section-content">
       Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück (Montag - Freitag zwischen 9 - 12 Uhr), um diese abzustimmen.
@@ -141,7 +67,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Rückruf, Informationen, Unterlagen, Kontaktzeiten</p>
   </div>
 
-  <div class="faq__section" data-keywords="Pläne, Versand, Berechnung, Energieausweis, Rechnung">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was passiert nach dem Versand der Pläne?</h2>
     <p class="faq__section-content">
       Nach Erhalt der Pläne wird die manuelle Berechnung durchgeführt. Sie erhalten anschließend den finalen Energieausweis und die aktualisierte Rechnung.
@@ -149,7 +75,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Pläne, Versand, Berechnung, Energieausweis, Rechnung</p>
   </div>
 
-  <div class="faq__section" data-keywords="Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was zählt zur beheizten Wohnfläche?</h2>
     <p class="faq__section-content">
       Beheizte Wohnfläche umfasst Flächen, die zu Wohnzwecken genutzt werden. Treppenhäuser gehören nicht zur Wohnfläche, können jedoch Teil der <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.
@@ -157,7 +83,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</p>
   </div>
 
-  <div class="faq__section" data-keywords="energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus">
+  <div class="faq__section">
     <h2 class="faq__section-title">Wie wird mit der energetischen Nutzfläche umgegangen?</h2>
     <p class="faq__section-content">
       Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.
@@ -165,7 +91,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
   </div>
 
-  <div class="faq__section" data-keywords="Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen">
+  <div class="faq__section">
     <h2 class="faq__section-title">Wie werden Flächen unter Dachschrägen im Dachgeschoss berechnet?</h2>
     <ul class="faq__section-list">
       <li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>
@@ -175,7 +101,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</p>
   </div>
 
-  <div class="faq__section" data-keywords="Dachinnenraum, Spitzboden, Dämmung, Fotos">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was ist mit dem Dachinnenraum gemeint, und welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">
       Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von Dachflächenfenstern und deren Laibungen sowie sichtbaren Dämmungen oder Isolierungen.
@@ -387,31 +313,6 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 }
 
-.keyword-cloud {
-  @apply flex flex-wrap gap-3 mt-1 p-4;
-
-  &__tag {
-    @apply text-xl font-medium px-3 py-2 rounded-full border-2;
-    transition: all 0.3s ease-in-out;
-  }
-
-  &__tag:hover {
-    @apply shadow-md;
-  }
-
-  &__tag--active {
-    @apply font-bold;
-  }
-}
-
-.faq__section {
-  @apply hidden mt-4;
-
-  &--visible {
-    @apply block;
-  }
-}
-
 </style>	
 
 </Layout>