Schimpfe von Moritz

.gitignore

@@ -26,3 +26,7 @@ bun.lockb
 
 # macOS-specific files
 .DS_Store
+
+public/fonts/
+
+*.Identifier

Makefile

@@ -1,7 +1,7 @@
 .PHONY: dev database api online-energieausweis all prod bun-install-database bun-install-api
 
 online-energieausweis:
-	bun run dev
+	bun run dev --host
 
 dev: online-energieausweis api database
 

public/fonts/Antique-Olive-Std-Compact_3864.ttfZone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\antique-olive-std.zip

public/fonts/HeronSans-Light.woff2Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip

public/fonts/HeronSans-Regular.eotZone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip

public/fonts/HeronSans-Regular.ttfZone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip

public/fonts/HeronSans-Regular.woff2Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip

public/fonts/HeronSans-Regular.woffZone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip

public/fonts/HeronSansCond-SemiBold.woff2Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip

src/components/Ausweis/Ausweisart.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 
-console.log('Hallo Welt');
-
 	import HelpLabel from "#labels/HelpLabel.svelte";
 	import Inputlabel from "#labels/InputLabel.svelte";
 
@@ -28,12 +26,14 @@ console.log('Hallo Welt');
 
 
 
-<div class="bereich-box grid 
+<div class="bereich-box relative grid 
 grid-cols-1 gap-x-4 gap-y-8
 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
 xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 ">
 
+
+
 <!-- Anlass für Energieausweis -->
 
 <div class="input-standard order-1 md:order-1 xl:order-1">

src/components/Ausweis/GebaeudeDaten.svelte

@@ -10,7 +10,7 @@
 
 </script>
 
-<div class="bereich-box grid 
+<div id="B" class="bereich-box grid 
 grid-cols-1 gap-x-4 gap-y-8
 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
 xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8

src/components/design/content/cardBAGwidget.svelte

@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BAG-promo" class="box card bg-white px-6 py-4 mb-5"> 
+<div id ="card-BAG-promo" class="box card"> 
 	<div class="">
 
 	<h2>Bedarfsausweis Gewerbe</h2>

src/components/design/content/cardBAwidget.svelte

@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-promo" class="box card bg-white px-6 py-4 mb-5"> 
+<div id ="card-BA-promo" class="box card"> 
     <div class="">
 
     <h2>Bedarfssausweis Wohngebäude</h2>

src/components/design/content/cardVAGwidget.svelte

@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VAG-promo" class="box card bg-white px-6 py-4 mb-5"> 
+<div id ="card-VAG-promo" class="box card "> 
 	<div class="">
 
 	<h2>Verbrauchsausweis Gewerbe</h2>

src/components/design/content/cardVAwidget.svelte

@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-promo" class="box card bg-white px-6 py-4 mb-5"> 
+<div id ="card-VA-promo" class="box card"> 
 	<div class="">
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>

src/components/design/header/Header.astro

@@ -1,5 +1,5 @@
 ---
-import Login from "#sidebarCards/card-login.svelte";
+import HeaderLogin from "#header/headerLogin.svelte";
 ---
 
 <header>
@@ -56,7 +56,7 @@ lg:px-0 lg:gap-x-4">
 </div>
 
 <div class="w-full justify-self-center">
-	<Login client:load />
+	<HeaderLogin  />
 </div>
 
 </div>

src/components/design/sidebars/cards/cardBAGpromo.svelte

@@ -2,9 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-G-promo" 
+<div id ="cardBAGpromo" 
-class="	box card hidden bg-white px-6 py-4 mb-5
+class="	box card">
-        lg:block">
 
 <div class="grid">
 

src/components/design/sidebars/cards/cardBApromo.svelte

@@ -2,8 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-promo" 
+<div id ="cardBApromo" 
-class="	box card bg-white px-6 py-4 mb-5">
+class="	box card">
 
 <div class="grid">
 

src/components/design/sidebars/cards/cardContact.svelte

@@ -1,4 +1,4 @@
-<div id ="card-contact" class="box card bg-white px-6 py-4 mb-5">
+<div id ="cardContact" class="box card">
 	
 	<div class="grid grid-cols-[max-content,1fr]">
 		<div class="">

src/components/design/sidebars/cards/cardLogin.svelte

@@ -23,9 +23,8 @@
 </script>
 
 <div
-	id="card-login"
+	id="cardLogin"
-	class="box card hidden bg-white px-6 py-4 mb-5
+	class="box card"
-			lg:block lg:ring-2 lg:ring-secondary/50"
 >
 	<div class="grid">
 		<div class="grid grid-cols-[2rem,1fr,1fr]">

src/components/design/sidebars/cards/cardNavigation.svelte

@@ -91,14 +91,14 @@ if(innerWidth>1024){
 
 
 
-<nav id="card-navigation" class="card-navigation hidden box ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block"> 
+<nav id="cardNavigation" class="cardNavigation box hidden ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"> 
 
   <!-- svelte-ignore a11y-mouse-events-have-key-events -->
   <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
     {#if innerWidth > 1023}
-    <a href={undefined} class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl " >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href={undefined} class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl" >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {:else}
-    <a href={undefined} class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href={undefined} class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {/if}
     
     <ul class="dropdown-content energieasusweis-erstellen">
@@ -201,8 +201,6 @@ if(innerWidth>1024){
 
 <style lang="scss">
 
-
-
 .dd-symbol::before{
   content:'❯';
   font-size:0.95rem;

src/components/design/sidebars/cards/cardPriceiInfo.svelte

@@ -2,12 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 
-<div 	id ="card-price-info" 
+<div 	id ="cardPreisinfo" class="box card hidden lg:block">
-		class="	box card hidden bg-white px-4 py-2 mt-5
+			
-				lg:block">
-	
-<div class="">
-		
 <h2>Was wird der Energieausweis kosten?</h2>
 <hr class="mb-4 bg-primary h-[2px]">
 <p>Verbrauchsausweis Wohngebäude</p>
@@ -29,13 +25,8 @@
 <p>ab&nbsp;450€ inkl.&nbsp;MwSt.</p>
 <hr class="mt-2">
 
-
-
-</div>
 </div>
 
 
 <style lang="scss">
-
-
 </style>

src/components/design/sidebars/cards/cardVAGpromo.svelte

@@ -2,8 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-G-promo" 
+<div id ="cardVAGpromo" 
-	class="	box card bg-white px-6 py-4 mb-5">
+	class="	box card">
 
 	<div class="grid">
 

src/components/design/sidebars/cards/cardVApromo.svelte

@@ -2,8 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-promo" 
+<div id ="cardVApromo" 
-	class="	box card bg-white px-6 py-4 mb-5">
+	class="	box card">
 
 	<div class="grid">
 

src/components/design/sidebars/cards/navcard.astro

@@ -1,96 +0,0 @@
-
-<script>
-
-
-</script>
-
-
-<div class="">
-
-<details  class="dropdown block xl:dropdown-right">
-    <summary  class="btn rounded-none w-full justify-start">Energieausweis erstellen<span class="absolute right-[20px]">❯</span></summary>
-    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
-      <li class=""><a>Verbrauchsausweis erstellen</a></li>
-      <li class=""><a>Bedarfsausweis erstellen</a></li>
-      <li class=""><a>Verbrauchsausweis Gewerbe erstellen</a></li>
-      <li class=""><a>Bedarfsausweis Gewerbe erstellen</a></li>
-    </ul>
-</details>
-
-<details  class="dropdown block">
-    <summary  class="btn rounded-none w-full justify-start">Welcher Energieausweis?</summary>
-</details>
-
-<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
-    <summary  class="btn rounded-none w-full justify-start">Verbrauchsausweis<span class="absolute right-[20px]">❯</span></summary>
-    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
-      <li class=""><a>Verbrauchsausweis Wohngebäude</a></li>
-      <li class=""><a>Verbrauchsausweis online erstellen</a></li>
-      <li class=""><a>Häufige Fragen zum Verbrauchsausweis</a></li>
-      <li class=""><a>Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
-      <li class=""><a>Verbrauchsausweis Gewerbe</a></li>
-      <li class=""><a>Verbrauchsausweis Gewerbe online erstellen</a></li>
-      <li class=""><a>Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
-      <li class=""><a>Statistiken zum Verbrauchsausweis Gewerbe</a></li>
-    </ul>
-</details>
-<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
-    <summary  class="btn rounded-none w-full justify-start">Bedarfsausweis<span class="absolute right-[20px]">❯</span></summary>
-    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
-      <li class=""><a>Bedarfsausweis Wohngebäude</a></li>
-      <li class=""><a>Bedarfsausweis online erstellen</a></li>
-      <li class=""><a>Häufige Fragen zum Bedarfsausweis</a></li>
-      <li class=""><a>Statistiken zum Bedarfsausweis Wohngebäude</a></li>
-      <li class=""><a>Bedarfsausweis Gewerbe</a></li>
-      <li class=""><a>Bedarfsausweis Gewerbe online erstellen</a></li>
-      <li class=""><a>Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
-      <li class=""><a>Statistiken zum Bedarfsausweis Gewerbe</a></li>
-    </ul>
-</details>
-<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
-    <summary  class="btn rounded-none w-full justify-start">Energieausweis<span class="absolute right-[20px]">❯</span></summary>
-    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
-      <li class=""><a>Energieausweis Pflicht</a></li>
-      <li class=""><a>Energieausweis Kosten</a></li>
-      <li class=""><a>Energieausweis Haus</a></li>
-    </ul>
-</details>
-<details  class="dropdown block">
-    <summary  class="btn rounded-none w-full justify-start">EnEV Zusammenfassung - Archiv</summary>
-</details>
-<details  class="dropdown block">
-    <summary  class="btn rounded-none w-full justify-start">Energieausweis Aussteller</summary>
-</details>
-<details  class="dropdown block">
-    <summary  class="btn rounded-none w-full justify-start">Kundenbewertungen</summary>
-</details>
-
-
-</div>
-
-<style>
-
-.dd-cont{
-    @apply !relative lg:!absolute;
-    li{
-    @apply w-max  
-    }
-}
-
-summary{
-    @apply text-black !text-[1.1rem] !font-normal
-    
-}
-details:hover > summary { 
-    @apply !bg-primary !text-white
-}
-details:hover > details.dd-cont { 
-    @apply !visible
-}
-
-
-
-
-
-
-</style>

src/components/design/sidebars/left/SidebarLeft.astro

@@ -1,12 +1,11 @@
 ---
-import Navigation from "#sidebarCards/card-navigation.svelte";
+import CardNavigation from "#sidebarCards/cardNavigation.svelte";
-import Preistabelle from "#sidebarCards/card-price-info.svelte";
+import CardPriceiInfo from "#sidebarCards/cardPriceiInfo.svelte";
-
 ---
 
 <div class="">
 
+<CardNavigation />
+<CardPriceiInfo />
 
-<Navigation client:load />
-<Preistabelle client:load />
 </div>

src/components/design/sidebars/right/SidebarRight.astro

@@ -1,22 +1,20 @@
 ---
-import Contact from "#sidebarCards/card-contact.svelte";
+import CardContact from "#sidebarCards/cardContact.svelte";
-import Review from "#sidebarCards/card-review.svelte";
+import CardReview from "#sidebarCards/cardReview.svelte";
-import VApromo from "#sidebarCards/card-VA-promo.svelte";
+import CardVApromo from "#sidebarCards/cardVApromo.svelte";
-import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
+import CardVAGpromo from "#sidebarCards/cardVAGpromo.svelte";
-import BApromo from "#sidebarCards/card-BA-promo.svelte";
+import CardBApromo from "#sidebarCards/cardBApromo.svelte";
-import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
+import CardBAGpromo from "#sidebarCards/cardBAGpromo.svelte";
 ---
 
-<div class="hidden
+<div class="hidden 2xl:block">
-            xl:flex xl:flex-col xl:grow
-            ">
 
-    <Contact client:load />
+    <CardContact />
-    <Review client:load />
+    <CardReview />
-    <VAGpromo client:load />
+    <CardVAGpromo />
-    <BAGpromo client:load />
+    <CardBAGpromo />
-    <VApromo client:load />
+    <CardVApromo />
-    <BApromo client:load />  
+    <CardBApromo />  
 </div>
 
 

src/components/design/sidebars/right/SidebarRight_1.astro

@@ -1,11 +1,11 @@
 ---
-import Login from "#sidebarCards/card-login_1.svelte";
+import Login from "#sidebarCards/cardlogin_1.svelte";
-import Contact from "#sidebarCards/card-contact.svelte";
+import Contact from "#sidebarCards/cardcontact.svelte";
-import Review from "#sidebarCards/card-review.svelte";
+import Review from "#sidebarCards/cardreview.svelte";
-import VApromo from "#sidebarCards/card-VA-promo.svelte";
+import VApromo from "#sidebarCards/cardVApromo.svelte";
-import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
+import VAGpromo from "#sidebarCards/cardVAGpromo.svelte";
-import BApromo from "#sidebarCards/card-BA-promo.svelte";
+import BApromo from "#sidebarCards/cardBApromo.svelte";
-import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
+import BAGpromo from "#sidebarCards/cardBAGpromo.svelte";
 ---
 
 <div class="hidden

src/components/labels/BereichLabel.svelte

@@ -1,5 +1,30 @@
 <script lang="ts">
 	export let bereich: string;
+
+	
+function toggleBereich(event){
+
+
+
+	var x = event.target.parentNode.parentNode.parentNode;
+	var y = x.nextElementSibling;
+	var z = event.target.innerHTML;
+
+console.log(y);
+
+if(z=='-'){
+	//y.classList.remove('hidden');
+	y.style.maxHeight = '0px';
+	event.target.innerHTML = "+";
+
+}else{
+	//y.classList.add('hidden');
+	y.style.maxHeight = '500px';
+	event.target.innerHTML = "-";
+}
+
+}
+
 </script>
 
 
@@ -7,10 +32,10 @@
 <div class="bereichs-label">
 
 <div>
-	<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2">
+	<div class="grid grid-cols-[max-content_1fr_40px] items-center justify-items-start gap-2">
 	<div class="formular-abschnitt1">{bereich}</div>
 	<div class="formular-abschnitt2"><slot></slot></div>
-	<!--<div class="justify-self-end"><img src="/images/icons/toggle-icon.svg" alt="toggle-icon" class="w-[25px] rotate-[90deg]"/></div>-->
+	<div id="BereichToggle" class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm" on:click={() => toggleBereich(event)}>-</div>
 	</div>
 </div>
 

src/components/widgets/welcherAusweisWidget.svelte

@@ -1,10 +1,10 @@
 
 <script lang="ts">
 
-import VApromo from  "#content/card-VA-widget.svelte";
+import cardVAwidget from  "#content/cardVAwidget.svelte";
-import VAGpromo from "#content/card-VAG-widget.svelte";
+import cardVAGwidget from "#content/cardVAGwidget.svelte";
-import BApromo from  "#content/card-BA-widget.svelte";
+import cardBAwidget from  "#content/cardBAwidget.svelte";
-import BAGpromo from  "#content/card-BAG-widget.svelte";
+import cardBAGwidget from  "#content/cardBAGwidget.svelte";
 import { fade } from 'svelte/transition';
 
   let selectedType: string = "";
@@ -131,25 +131,25 @@ import { fade } from 'svelte/transition';
        <div class="OEA_zeile3">
        {#if showVA}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <VApromo client:load /> 
+        <cardVAwidget client:load /> 
        </div>
        {/if}
 
        {#if showBA}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <BApromo client:load />
+        <cardBAwidget client:load />
        </div>
        {/if}
 
        {#if showVAG}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <VAGpromo client:load />
+        <cardVAGwidget client:load />
        </div>
        {/if}
 
        {#if showBAG}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <BAGpromo client:load />
+        <cardBAGwidget client:load />
        </div>
        {/if}
       </div>

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -152,21 +152,25 @@
 <!-- A Prüfung der Ausweisart -->
 
 <BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
+<div class="collapseBereich">
 <Ausweisart
 	bind:gebaeude
 	bind:gebaeude_aufnahme_allgemein
 	bind:ausweis
-	client:load
 />
- 
+</div>
+
+
 <!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
 
 <BereichLabel bereich="B">Eingabe&nbsp;der&nbsp;Gebäudeadresse - Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
-
+<div class="collapseBereich">
 <GebaeudeDaten 
 		bind:gebaeude_aufnahme_allgemein
-		client:load
 />
+</div>
+
+
 
 
 </div>

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "#layouts/Layout.astro";
-import BannerPrice from "#content/banner-saeule.svelte";
+import ProduktVergleich from "#content/produktVergleich.svelte";
 
 ---
 
@@ -8,7 +8,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
 
 	<h1>Unsere Ausweise im Detail:</h1>
 
-	<!-- <BannerPrice client:load /> -->
+	<!-- <ProduktVergleich /> -->
 </Layout>
 
 

src/pages/welcher-energieausweis.mdx

@@ -4,7 +4,7 @@ title: "Welcher Energieausweis?"
 ---
 
 import { BoxWithHeading } from "@ibcornelsen/ui";
-import Widget from "#components/Widget.svelte";
+import WelcherAusweisWidget from "#widgets/welcherAusweisWidget.svelte";
 
 # Welcher Energieausweis ist der richtige?
 
@@ -14,7 +14,7 @@ Falls Sie nicht wissen sollten welchen Energieausweis Sie benötigen, können Si
 hier ganz einfach den Gebäudetyp und die entsprechende Maßnahme angeben und
 bekommen als Ergebnis, den für Sie pasenden Energieausweis angezeigt.
 
-<Widget client:load />
+<WelcherAusweisWidget />
 
 ## Bei Vermietung und Verkauf Ihres Wohnhauses ist der Verbrauchsausweis Wohngebäude ausreichend
 

src/style/formular.css

@@ -5,12 +5,20 @@
 
 
 .formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
-.formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] md:[font-size:_clamp(20px,1.25vw,36px)] pl-1;}
+.formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] pl-1 justify-self-start
+	md:[font-size:_clamp(20px,1.25vw,36px)]
+
+
+	
+	
+	}
 
 .bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
 
+.collapseBereich{@apply overflow-hidden transition-all ease-in-out duration-200 h-[auto]}
 .bereich-box {@apply w-full bg-gray-500/10 ring-1 rounded-sm ring-gray-500/35 pt-6 pb-8 px-4;
 
+	transform-origin: top center;
 	/*background: linear-gradient(
         135deg,
         rgba(252, 234, 187, 1) 0%,
@@ -20,6 +28,8 @@
     ); */
 }
 
+
+
 .input-standard{@apply w-full grid grid-cols-[1fr_25px] items-center relative mt-2}
 .help-label{@apply rounded-e-sm ring-1 ring-black/15}
 

src/style/global.css

@@ -66,7 +66,7 @@ radio{@apply accent-primary}
 /*ARTICLE*/
 
 article {
-	@apply w-full relative bg-white min-h-screen px-0 py-0;
+	@apply w-full relative bg-white px-0 py-0;
 
 	hr {@apply mb-4 mt-4;}
 
@@ -89,14 +89,17 @@ article {
 			 
 }
 
-.card{
+.card:not(:last-child){@apply mb-5}
+.card{@apply bg-white px-6 py-4;
+
 	h2		{@apply text-lg font-bold text-box-heading leading-6}
-	hr		{@apply my-2}
+	hr		{@apply my-0}
 	p		{@apply text-lg}
 	a		{@apply text-lg}
 
 }
 
+
 /*SIDEBAR-LEFT*/
 
 /*NAVIGATION*/
@@ -143,7 +146,7 @@ li 		{@apply 	text-sm  bg-white flex
 					xl:text-lg}
 
 li a	{@apply 	w-full text-sm px-4 py-2 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
-					lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary		
+					lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
 	   				xl:text-lg}
 
 li:not(:first-child)	{@apply		!border-gray-200 !border-t-[1px]}

tsconfig.json

@@ -37,7 +37,8 @@
 			"#sidebarRight/*": ["./src/components/design/sidebars/right/*"],
 
 			"#ausweise/*": ["./src/pages/energieausweis-erstellen/*"],
-			"#labels/*": ["./src/components/labels/*"]
+			"#labels/*": ["./src/components/labels/*"],
+			"#widgets/*": ["./src/components/widgets/*"]
 		},
 		"types": ["cypress", "cypress-file-upload", "bun-types", "svelte"]
 	}