Merge pull request #70 from IBCornelsen/Jens

Tag Cloud

src/pages/faq/index.astro

@@ -75,30 +75,18 @@ document.addEventListener("DOMContentLoaded", () => {
 <div class="faq">
 
 <div class="keyword-cloud">
-  <span class="keyword-cloud__tag">Gebäudekonstruktion</span>
+  <button class="keyword-cloud__tag" data-keyword="Gebäudekonstruktion">Gebäudekonstruktion</button>
-  <span class="keyword-cloud__tag">Standard-Software</span>
+  <button class="keyword-cloud__tag" data-keyword="Standard-Software">Standard-Software</button>
-  <span class="keyword-cloud__tag">manuelle Bearbeitung</span>
+  <button class="keyword-cloud__tag" data-keyword="manuelle Bearbeitung">manuelle Bearbeitung</button>
-  <span class="keyword-cloud__tag">Zusatzkosten</span>
+  <button class="keyword-cloud__tag" data-keyword="Zusatzkosten">Zusatzkosten</button>
-  <span class="keyword-cloud__tag">Grundrisspläne</span>
+  <button class="keyword-cloud__tag" data-keyword="Grundrisspläne">Grundrisspläne</button>
-  <span class="keyword-cloud__tag">Baujahr</span>
+  <button class="keyword-cloud__tag" data-keyword="Rechnung">Rechnung</button>
-  <span class="keyword-cloud__tag">Pläne</span>
+  <button class="keyword-cloud__tag" data-keyword="E-Mail">E-Mail</button>
-  <span class="keyword-cloud__tag">Übermittlung</span>
+  <button class="keyword-cloud__tag" data-keyword="Dachgeschoss">Dachgeschoss</button>
-  <span class="keyword-cloud__tag">E-Mail</span>
+  <button class="keyword-cloud__tag" data-keyword="Pflichtfelder">Pflichtfelder</button>
-  <span class="keyword-cloud__tag">Rechnung</span>
-  <span class="keyword-cloud__tag">Differenzbetrag</span>
-  <span class="keyword-cloud__tag">Mischgebäude</span>
-  <span class="keyword-cloud__tag">Rückruf</span>
-  <span class="keyword-cloud__tag">Wohnfläche</span>
-  <span class="keyword-cloud__tag">energetische Nutzfläche</span>
-  <span class="keyword-cloud__tag">Dachgeschoss</span>
-  <span class="keyword-cloud__tag">Bauweise</span>
-  <span class="keyword-cloud__tag">Zahlungsmethoden</span>
-  <span class="keyword-cloud__tag">Bestätigungs-E-Mail</span>
-  <span class="keyword-cloud__tag">Kundenservice</span>
-  <span class="keyword-cloud__tag">Pflichtfelder</span>
 </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten">
     <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.
@@ -106,9 +94,11 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau">
     <h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
-    <p class="faq__section-content">Grundrisspläne des Gebäudes, insbesondere:</p>
+    <p class="faq__section-content">
+      Grundrisspläne des Gebäudes, insbesondere:
+    </p>
     <ul class="faq__section-list">
       <li class="faq__section-list-item">Anbau</li>
       <li class="faq__section-list-item">Altbau</li>
@@ -117,7 +107,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Pläne, Übermittlung, E-Mail, ID-Nummer">
     <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:
@@ -127,7 +117,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Pläne, Übermittlung, E-Mail, ID-Nummer</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Rechnung, korrigierte Rechnung, Differenzbetrag">
     <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.
@@ -135,16 +125,15 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Rechnung, korrigierte Rechnung, Differenzbetrag</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude">
     <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.
-      <span class="faq__section-highlight">Getrennt wird nur wenn es sich um eine Mischgebäude (Wohnteil und Gewerbeteil) handelt.</span> In diesem Fall werden zwei Energieausweise erstellt (Energieausweis für Wohngebäude und Energieausweis für Nichtwohngebäude).
     </p>
     <p class="faq__section-keywords">Keywords: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Rückruf, Informationen, Unterlagen, Kontaktzeiten">
     <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.
@@ -152,7 +141,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Rückruf, Informationen, Unterlagen, Kontaktzeiten</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Pläne, Versand, Berechnung, Energieausweis, Rechnung">
     <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.
@@ -160,47 +149,36 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Pläne, Versand, Berechnung, Energieausweis, Rechnung</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus">
     <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.  
+      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.
-      Treppenhäuser gehören nicht zur Wohnfläche, können jedoch Teil der
-      <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.  
-      Flächen außerhalb des Hauses, wie halbe Terrassenflächen, müssen abgezogen werden.
     </p>
     <p class="faq__section-keywords">Keywords: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus">
     <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.  
+      Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.
-      Diese Fläche wird bei Berechnung vom Endenergieverbrauch berücksichtigt, da sie den Gesamtwert beeinflusst.
     </p>
     <p class="faq__section-keywords">Keywords: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen">
     <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>  
+      <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>
-      <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>  
+      <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>
       <li class="faq__section-list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
     </ul>
     <p class="faq__section-keywords">Keywords: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Dachinnenraum, Spitzboden, Dämmung, Fotos">
     <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:
+      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.
-    </p>
-    <ul class="faq__section-list">
-      <li class="faq__section-list-item">Dachflächenfenstern und deren Laibungen</li>  
-      <li class="faq__section-list-item">Sichtbaren Dämmungen oder Isolierungen</li>  
-    </ul>
-    <p class="faq__section-content">
-      Diese Fotos helfen bei der Beurteilung des Dämmstandards und Modernisierungsoptionen.
     </p>
     <p class="faq__section-keywords">Keywords: Dachinnenraum, Spitzboden, Dämmung, Fotos</p>
   </div>
@@ -410,10 +388,10 @@ document.addEventListener("DOMContentLoaded", () => {
 }
 
 .keyword-cloud {
-  @apply flex flex-wrap gap-2 mt-6 p-4 bg-gray-50 rounded-lg shadow-md;
+  @apply flex flex-wrap gap-3 mt-1 p-4;
 
   &__tag {
-    @apply bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-blue-200;
+    @apply text-xl font-medium px-3 py-2 rounded-full hover:secondary border-1;
     transition: all 0.3s ease-in-out;
   }
 
@@ -422,7 +400,7 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   &__tag--active {
-    @apply bg-blue-300 text-blue-900 font-bold;
+    @apply font-bold;
   }
 }