IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Merge pull request #217 from IBCornelsen/UMBE

Browse Source 
Umbe Update
This commit is contained in:
UMBENOMENA
2024-12-14 02:32:17 +01:00
committed by GitHub
parent 0f85dd6727 f551af56f3
commit 3397e04570
23 changed files with 1380 additions and 1342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Ausweis/Warmwasseranteil.svelte Normal file
View File

@@ -0,0 +1,57 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
export let ausweis: VerbrauchsausweisWohnenClient;
</script>
<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
">
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>
<div class="ring-1 ring-gray-500/50 h-[38px] grid grid-cols-[80px_1fr] items-center py-[6px] px-[10px]">
<div class="grid grid-cols-[20px_40px] items-center">
<label for="warmwasser_enthalten">Ja</label>
<input
type="checkbox"
class="checkbox"
name="warmwasser_enthalten"
data-test="warmwasser_enthalten"
bind:checked={ausweis.warmwasser_enthalten}
/>
</div>
<div class="grid grid-cols-[100px_40px] items-center">
<label for="warmwasser_anteil_bekannt">Anteil bekannt</label>
<input
type="checkbox"
class="checkbox"
name="warmwasser_anteil_bekannt"
data-test="warmwasser_anteil_bekannt"
bind:checked={ausweis.warmwasser_anteil_bekannt}
disabled={!ausweis.warmwasser_enthalten}
/>
</div>
</div>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes ein.
</HelpLabel>
</div>
</div>
</div>

56
src/components/design/content/CardBedarfsausweisGewerbeWidget.svelte
View File

@@ -1,56 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-BAG-promo" class="box card">
<div class="">
<h2>Bedarfsausweis Gewerbe</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">fundiert (empfohlen)</div>
<div class="services"><div>Mehrzonenmodell nach DIN 18599.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
<div class="services"><div>Grundlage für Sanierungsvarianten.</div><div class="check-no">✔</div></div>
<div class="services"><div>Objektiveres, besser vergleichbares Ergebnis.</div><div class="check-no">✔</div></div>
</div>
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
#card-BAG-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply justify-self-end font-bold text-green-700}
.check-no{@apply justify-self-end font-bold text-red-700}
}
</style>

56
src/components/design/content/CardBedarfsausweisWidget.svelte
View File

@@ -1,56 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-BA-promo" class="box card">
<div class="">
<h2>Bedarfssausweis Wohngebäude</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Bedarfsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">fundiert (empfohlen)</div>
<div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
<div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig auch für unsanierte Objekte.</div><div class="check">✔</div></div>
<div class="services"><div>Kann als Grundlage für den ISFP dienen.</div><div class="check">✔</div></div>
<div class="services"><div>Objektivere Berechnungsmethode nach DIN 18599.</div><div class="check">✔</div></div>
</div>
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
#card-BA-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply justify-self-end font-bold text-green-700}
}
</style>

56
src/components/design/content/CardVerbrauchsausweisGewerbeWidget.svelte
View File

@@ -1,56 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-VAG-promo" class="box card ">
<div class="">
<h2>Verbrauchsausweis Gewerbe</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">einfach</div>
<div class="services"><div>3 Jahresverbräuche von Heizung Gebäudestrom nötig.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
<div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
</div>
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
#card-VAG-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply justify-self-end font-bold text-green-700}
.check-no{@apply justify-self-end font-bold text-red-700}
}
</style>

96
src/components/design/content/CardVerbrauchsausweisWidget.svelte
View File

@@ -1,96 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
<div class="">
<h2>Verbrauchsausweis Wohngebäude</h2>
<hr class="mb-2" />
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img
class="w-[100%] !min-w-[100px]"
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
alt="Wohnhaus Verbrauchsausweis"
/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">
ab<span class="promo pl-2"
>{PRICES.VerbrauchsausweisWohnen[0]}</span
>€
</p>
</div>
</div>
<div class="white">
<div class="variante">einfach</div>
<div class="services">
<div>3 Jahresverbräuche der Heizung benötigt.</div>
<div class="check">✔</div>
</div>
<div class="services">
<div>Zulässig bei Vermietung oder Verkauf.</div>
<div class="check">✔</div>
</div>
<div class="services">
<div>Unzulässig bei unsanierten Gebäuden vor 1978.</div>
<div class="check-no">✘</div>
</div>
<div class="services">
<div>Ungenau durch individuelles Heizverhalten.</div>
<div class="check-no">✘</div>
</div>
<div class="services">
<div>Wird nicht immer bei den Banken akzeptiert.</div>
<div class="check-no">✘</div>
</div>
</div>
<div class="flex flex-row flex-wrap justify-center">
<a
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
">jetzt online erstellen</a
>
<a
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
">zur Produktübersicht</a
>
</div>
</div>
</div>
<style lang="scss">
#card-VA-promo {
.white {
@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6;
}
.variante {
@apply w-fit text-black justify-self-end mr-3;
}
.variante {
@apply text-2xl;
}
.services {
@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)];
}
.services:not(:last-child) {
@apply border-b-[1px] border-gray-200;
}
.check {
@apply justify-self-end font-bold text-green-700;
}
.check-no {
@apply justify-self-end font-bold text-red-700;
}
}
</style>

4
src/components/design/content/produktVergleich.svelte → src/components/design/content/ProduktVergleich.svelte
View File

@@ -4,7 +4,7 @@
<div class="mt-12 m-auto w-[90%] relative">
<div id="saeulen">
<div id="produktvergleich">
<div class="saeule">
<div class="blue-top">
@@ -78,7 +78,7 @@
#saeulen{@apply
#produktvergleich{@apply
grid grid-cols-[1fr] gap-y-3 gap-x-6
lg:grid-cols-2
xl:grid-cols-2;

81
src/components/design/content/WidgetCardTemplate.svelte Normal file
View File

@@ -0,0 +1,81 @@
<script lang="ts">
export let price: number;
export let name: string;
export let variant: string;
export let services: [string, boolean][];
export let href: string;
export let src: string;
export let alt: string;
</script>
<div class="box card bg-white px-6 py-4 mb-5">
<div>
<h2>{name}</h2>
<hr class="mb-2" />
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img
class="w-[100%] !min-w-[100px]"
{src}
{alt}
/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">
ab<span class="promo pl-2"
>{price}</span
>€
</p>
</div>
</div>
<div class="white">
<div class="variante">{variant}</div>
{#each services as [service, check]}
<div class="services">
<span>{service}</span>
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
</div>
{/each}
</div>
<div class="flex flex-row flex-wrap justify-center">
<a
{href}
class="w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
">jetzt online erstellen</a
>
<a
{href}
class="w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
">zur Produktübersicht</a
>
</div>
</div>
</div>
<style lang="scss">
.white {
@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6;
}
.variante {
@apply text-2xl w-fit text-black justify-self-end mr-3;
}
.services {
@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)];
}
.services:not(:last-child) {
@apply border-b-[1px] border-gray-200;
}
.check {
@apply justify-self-end font-bold text-green-700;
}
.check-no {
@apply justify-self-end font-bold text-red-700;
}
</style>

56
src/components/design/content/cardBAGwidget.svelte
View File

@@ -1,56 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-BAG-promo" class="box card">
<div class="">
<h2>Bedarfsausweis Gewerbe</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">fundiert (empfohlen)</div>
<div class="services"><div>Mehrzonenmodell nach DIN 18599.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
<div class="services"><div>Grundlage für Sanierungsvarianten.</div><div class="check-no">✔</div></div>
<div class="services"><div>Objektiveres, besser vergleichbares Ergebnis.</div><div class="check-no">✔</div></div>
</div>
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
#card-BAG-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply justify-self-end font-bold text-green-700}
.check-no{@apply justify-self-end font-bold text-red-700}
}
</style>

56
src/components/design/content/cardBAwidget.svelte
View File

@@ -1,56 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-BA-promo" class="box card">
<div class="">
<h2>Bedarfssausweis Wohngebäude</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Bedarfsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">fundiert (empfohlen)</div>
<div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
<div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig auch für unsanierte Objekte.</div><div class="check">✔</div></div>
<div class="services"><div>Kann als Grundlage für den ISFP dienen.</div><div class="check">✔</div></div>
<div class="services"><div>Objektivere Berechnungsmethode nach DIN 18599.</div><div class="check">✔</div></div>
</div>
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
#card-BA-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply justify-self-end font-bold text-green-700}
}
</style>

56
src/components/design/content/cardVAGwidget.svelte
View File

@@ -1,56 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-VAG-promo" class="box card ">
<div class="">
<h2>Verbrauchsausweis Gewerbe</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">einfach</div>
<div class="services"><div>3 Jahresverbräuche von Heizung Gebäudestrom nötig.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
<div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
</div>
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
#card-VAG-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply justify-self-end font-bold text-green-700}
.check-no{@apply justify-self-end font-bold text-red-700}
}
</style>

57
src/components/design/content/cardVAwidget.svelte
View File

@@ -1,57 +0,0 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div id ="card-VA-promo" class="box card">
<div class="">
<h2>Verbrauchsausweis Wohngebäude</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">einfach</div>
<div class="services"><div>3 Jahresverbräuche der Heizung benötigt.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978.</div><div class="check-no">✘</div></div>
<div class="services"><div>Ungenau durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
<div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
</div>
<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
#card-VA-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply justify-self-end font-bold text-green-700}
.check-no{@apply justify-self-end font-bold text-red-700}
}
</style>

51
src/components/design/sidebars/cards/cardPriceiInfo.svelte
View File

@@ -2,31 +2,42 @@
import { PRICES } from "#lib/constants";
</script>
<div id ="cardPreisinfo" class="box card hidden lg:block">
<div id ="cardPriceinfo" class="box card hidden lg:block">
<h2>Was wird der Energieausweis kosten?</h2>
<hr class="mb-4 bg-primary h-[2px]">
<p>Verbrauchsausweis Wohngebäude</p>
<p>ab&nbsp;{PRICES.VerbrauchsausweisWohnen[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>Bedarfsausweis Wohngebäude</p>
<p>ab&nbsp;{PRICES.BedarfsausweisWohnen[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>Verbrauchsausweis Gewerbe</p>
<p>ab&nbsp;{PRICES.VerbrauchsausweisGewerbe[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>Bedarfsausweis Gewerbe</p>
<p>ab&nbsp;300€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>GEG-Nachweis Wohngebäude</p>
<p>ab&nbsp;400€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>GEG-Nachweis Gewerbe</p>
<p>ab&nbsp;450€ inkl.&nbsp;MwSt.</p>
<hr class="trenner-h">
<div>Verbrauchsausweis Wohngebäude</div>
<div>ab&nbsp;<span class="price">{PRICES.VerbrauchsausweisWohnen[0]}€</span>&nbsp;inkl.&nbsp;MwSt.</div>
<hr class="trenner">
<div>Bedarfsausweis Wohngebäude</div>
<div>ab&nbsp;<span class="price">{PRICES.BedarfsausweisWohnen[0]}€</span>&nbsp;inkl.&nbsp;MwSt.</div>
<hr class="trenner">
<div>Verbrauchsausweis Gewerbe</div>
<div>ab&nbsp;<span class="price">{PRICES.VerbrauchsausweisGewerbe[0]}€</span>&nbsp;inkl.&nbsp;MwSt.</div>
<hr class="trenner">
<div>Bedarfsausweis Gewerbe</div>
<div>ab&nbsp;<span class="price">300€</span>&nbsp;inkl.&nbsp;MwSt.</div>
<hr class="trenner">
<div>GEG-Nachweis Wohngebäude</div>
<div>ab&nbsp;<span class="price">400€</span>&nbsp;inkl.&nbsp;MwSt.</div>
<hr class="trenner">
<div>GEG-Nachweis Gewerbe</div>
<div>ab&nbsp;<span class="price">450€</span>&nbsp;inkl.&nbsp;MwSt.</div>
<hr class="mt-2">
</div>
<style lang="postcss">
.trenner-h{@apply mb-4 bg-primary h-[2px]}
.trenner{@apply my-2}
.price{@apply font-bold}
<style lang="scss">
</style>

273
src/components/widgets/WelcherAusweisWidget.svelte Normal file
View File

@@ -0,0 +1,273 @@
<script lang="ts">
import { fade } from "svelte/transition";
import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
import { PRICES } from "#lib/constants.js";
let gebaeudetyp: string;
let anlass: string;
let einheiten: string;
let sanierungsstatus: string;
let baujahr: string;
const allowedTypes = [
"Einfamilienhaus",
"Zweifamilienhaus",
"Mehrfamilienhaus",
"Mischgebäude",
];
const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
let showVerbrauchsausweis: boolean = false
$: {
if (baujahr === "vor 1978") {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp) &&
(einheiten === "mehr als 4 Wohneinheiten" ||
sanierungsstatus === "saniert");
} else {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp);
}
}
</script>
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage" />
<div id="OEA_input">
<div class="OEA_zeile1">
<div class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select
class="OEA_auswahl1"
bind:value={gebaeudetyp}
>
<option selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
<div class="OEA_item2">
<div class="OEA_title1">Anlass</div>
<select
class="OEA_auswahl1"
bind:value={anlass}
>
<option selected disabled>bitte auswählen</option>
<option value="Vermietung/Verkauf"
>Vermietung/Verkauf</option
>
<option value="Modernisierung">Modernisierung</option>
<option value="Neubau">Neubau</option>
<option value="Erweiterung">Erweiterung</option>
<option value="Aushangpflicht">Aushangpflicht</option>
<option value="sonstiges">sonstiges z.B. Bank</option>
</select>
</div>
</div>
<div class="OEA_zeile2">
<div class="OEA_item3">
<div class="OEA_title2">Baujahr</div>
<select
class="OEA_auswahl2"
bind:value={baujahr}
>
<option selected disabled>bitte auswählen</option>
<option value="vor 1978">vor 1978</option>
<option value="nach 1977">nach 1977</option>
</select>
</div>
<div class="OEA_item4">
<div class="OEA_title2">Wohneinheiten</div>
<select
class="OEA_auswahl2"
bind:value={einheiten}
>
<option selected disabled>bitte auswählen</option>
<option value="bis 4 Wohneinheiten"
>bis 4 Wohneinheiten</option
>
<option value="mehr als 4 Wohneinheiten"
>mehr als 4 Wohneinheiten</option
>
</select>
</div>
<div class="OEA_item5">
<div class="OEA_title2">Sanierungsstatus</div>
<select
class="OEA_auswahl2"
bind:value={sanierungsstatus}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
</div>
<div class="OEA_zeile3">
{#if showVerbrauchsausweis}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude"
price={PRICES.VerbrauchsausweisWohnen[0]}
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
alt="Wohnhaus Verbrauchsausweis"
variant="einfach"
services={[
["3 Jahresverbräuche der Heizung benötigt.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
["Ungenau durch individuelles Heizverhalten.", false],
["Wird nicht immer bei den Banken akzeptiert.", false]
]}
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<WidgetCardTemplate
name="Bedarfsausweis Wohngebäude"
price={PRICES.BedarfsausweisWohnen[0]}
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
alt="Wohnhaus Bedarfsausweis"
variant="fundiert (empfohlen)"
services={[
["Erfassung der Gebäudegeometrie.", true],
["Für Vermietung, Verkauf und Finanzierung.", true],
["Zulässig auch für unsanierte Objekte.", true],
["Kann als Grundlage für den ISFP dienen.", true],
["Objektivere Berechnungsmethode nach DIN 18599.", true],
]}
href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<WidgetCardTemplate
name="Verbrauchsausweis Gewerbe"
price={PRICES.VerbrauchsausweisGewerbe[0]}
src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
alt="Gewerbe Verbrauchsausweis"
variant="einfach"
services={[
["3 Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Für bauliche und energetische Maßnahmen ungeeignet.", false],
["Wird nicht immer bei den Banken akzeptiert.", false],
]}
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<WidgetCardTemplate
name="Bedarfsausweis Gewerbe"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="fundiert (empfohlen)"
services={[
["Mehrzonenmodell nach DIN 18599.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Grundlage für Sanierungsvarianten.", false],
["Objektiveres, besser vergleichbares Ergebnis.", false],
]}
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
></WidgetCardTemplate>
</div>
{/if}
</div>
</div>
</div>
<style lang="scss">
#OEA_widget {
@apply bg-gray-100 p-4 shadow-xl;
#OEA_input {
@apply space-y-2;
.OEA_zeile1,
.OEA_zeile2 {
@apply flex flex-row space-x-2;
.OEA_item1,
.OEA_item2,
.OEA_item3,
.OEA_item4,
.OEA_item5 {
@apply w-full;
.OEA_title1,
.OEA_title2 {
@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
}
}
}
.OEA_title1 {
@apply bg-secondary;
}
.OEA_title2 {
@apply bg-primary;
}
.OEA_auswahl1,
.OEA_auswahl2 {
@apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
}
#OEA_result {
@apply rounded-lg text-gray-700;
}
.OEA_zeile3 {
@apply flex flex-row space-x-4 pt-6 items-start justify-center;
}
.OEA_item6 {
.result {
@apply opacity-0 transition-opacity duration-1000 ease-in-out;
}
.result[style*="opacity: 1"] {
@apply opacity-100;
}
}
}
}
</style>

315
src/components/widgets/welcherAusweisWidget.svelte
View File

@@ -1,315 +0,0 @@
<script lang="ts">
import CardVerbrauchsausweisWidget from "#content/CardVerbrauchsausweisWidget.svelte";
import CardVerbrauchsausweisGewerbeWidget from "#content/CardVerbrauchsausweisGewerbeWidget.svelte";
import CardBedarfsausweisWidget from "#content/CardBedarfsausweisWidget.svelte";
import CardBedarfsausweisGewerbeWidget from "#content/CardBedarfsausweisGewerbeWidget.svelte";
import { fade } from "svelte/transition";
<<<<<<< HEAD:src/components/widgets/welcherAusweisWidget.svelte
import cardVAwidget from "#content/cardVAwidget.svelte";
import cardVAGwidget from "#content/cardVAGwidget.svelte";
import cardBAwidget from "#content/cardBAwidget.svelte";
import cardBAGwidget from "#content/cardBAGwidget.svelte";
import { fade } from 'svelte/transition';
=======
let gebaeudetyp: string;
let anlass: string;
let einheiten: string;
let sanierungsstatus: string;
let baujahr: string;
>>>>>>> origin/UMBE:src/components/Widget.svelte
const allowedTypes = [
"Einfamilienhaus",
"Zweifamilienhaus",
"Mehrfamilienhaus",
"Mischgebäude",
];
const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
let showVerbrauchsausweis: boolean = false
$: {
if (baujahr === "vor 1978") {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp) &&
(einheiten === "mehr als 4 Wohneinheiten" ||
sanierungsstatus === "saniert");
} else {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp);
}
}
</script>
<<<<<<< HEAD:src/components/widgets/welcherAusweisWidget.svelte
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage">
<div id="OEA_input">
<div class="OEA_zeile1">
<div class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select class="OEA_auswahl1" id="OEA_changeTyp" on:change={handleTypeChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
<div class="OEA_item2">
<div class="OEA_title1">Anlass</div>
<select class="OEA_auswahl1" id="OEA_changeAnlass" on:change={handleReasonChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
<option value="Modernisierung">Modernisierung</option>
<option value="Neubau">Neubau</option>
<option value="Erweiterung">Erweiterung</option>
<option value="Aushangpflicht">Aushangpflicht</option>
<option value="sonstiges">sonstiges z.B. Bank</option>
</select>
</div>
</div>
<div class="OEA_zeile2">
<div class="OEA_item3">
<div class="OEA_title2">Baujahr</div>
<select class="OEA_auswahl2" id="changeBaujahr" on:change={handleYearChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="vor 1978">vor 1978</option>
<option value="nach 1977">nach 1977</option>
</select>
</div>
<div class="OEA_item4">
<div class="OEA_title2">Wohneinheiten</div>
<select class="OEA_auswahl2" id="changeEinheiten" on:change={handleUnitsChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="bis 4 Wohneinheiten">bis 4 Wohneinheiten</option>
<option value="mehr als 4 Wohneinheiten">mehr als 4 Wohneinheiten</option>
</select>
</div>
<div class="OEA_item5">
<div class="OEA_title2">Sanierungsstatus</div>
<select class="OEA_auswahl2" id="changeStatus" on:change={handleStatusChange}>
<option value="" selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
</div>
<div class="OEA_zeile3">
{#if showVA}
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
<cardVAwidget client:load />
</div>
{/if}
{#if showBA}
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
<cardBAwidget client:load />
</div>
{/if}
{#if showVAG}
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
<cardVAGwidget client:load />
</div>
{/if}
{#if showBAG}
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
<cardBAGwidget client:load />
</div>
{/if}
</div>
=======
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage" />
<div id="OEA_input">
<div class="OEA_zeile1">
<div class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select
class="OEA_auswahl1"
bind:value={gebaeudetyp}
>
<option value="" selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
<div class="OEA_item2">
<div class="OEA_title1">Anlass</div>
<select
class="OEA_auswahl1"
bind:value={anlass}
>
<option value="" selected disabled>bitte auswählen</option>
<option value="Vermietung/Verkauf"
>Vermietung/Verkauf</option
>
<option value="Modernisierung">Modernisierung</option>
<option value="Neubau">Neubau</option>
<option value="Erweiterung">Erweiterung</option>
<option value="Aushangpflicht">Aushangpflicht</option>
<option value="sonstiges">sonstiges z.B. Bank</option>
</select>
</div>
</div>
<div class="OEA_zeile2">
<div class="OEA_item3">
<div class="OEA_title2">Baujahr</div>
<select
class="OEA_auswahl2"
bind:value={baujahr}
>
<option value="" selected disabled>bitte auswählen</option>
<option value="vor 1978">vor 1978</option>
<option value="nach 1977">nach 1977</option>
</select>
</div>
>>>>>>> origin/UMBE:src/components/Widget.svelte
<div class="OEA_item4">
<div class="OEA_title2">Wohneinheiten</div>
<select
class="OEA_auswahl2"
bind:value={einheiten}
>
<option value="" selected disabled>bitte auswählen</option>
<option value="bis 4 Wohneinheiten"
>bis 4 Wohneinheiten</option
>
<option value="mehr als 4 Wohneinheiten"
>mehr als 4 Wohneinheiten</option
>
</select>
</div>
<div class="OEA_item5">
<div class="OEA_title2">Sanierungsstatus</div>
<select
class="OEA_auswahl2"
bind:value={sanierungsstatus}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
</div>
<div class="OEA_zeile3">
{#if showVerbrauchsausweis}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardVerbrauchsausweisWidget />
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardBedarfsausweisWidget />
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardVerbrauchsausweisGewerbeWidget />
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardBedarfsausweisGewerbeWidget />
</div>
{/if}
</div>
</div>
</div>
<style lang="scss">
#OEA_widget {
@apply bg-gray-100 p-4 shadow-xl;
#OEA_input {
@apply space-y-2;
.OEA_zeile1,
.OEA_zeile2 {
@apply flex flex-row space-x-2;
.OEA_item1,
.OEA_item2,
.OEA_item3,
.OEA_item4,
.OEA_item5 {
@apply w-full;
.OEA_title1,
.OEA_title2 {
@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
}
}
}
.OEA_title1 {
@apply bg-secondary;
}
.OEA_title2 {
@apply bg-primary;
}
.OEA_auswahl1,
.OEA_auswahl2 {
@apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
}
#OEA_result {
@apply rounded-lg text-gray-700;
}
.OEA_zeile3 {
@apply flex flex-row space-x-4 pt-6 items-start justify-center;
}
.OEA_item6 {
.result {
@apply opacity-0 transition-opacity duration-1000 ease-in-out;
}
.result[style*="opacity: 1"] {
@apply opacity-100;
}
}
}
}
</style>

3
src/layouts/Layout.astro
View File

@@ -46,7 +46,8 @@ const { title } = Astro.props;
<SidebarLeft client:load/>
<article class="box rounded-tl-none p-6">
<article class="box rounded-tl-none
xl:px-10 py-8">
<slot />
</article>

17
src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
View File

@@ -10,6 +10,7 @@
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
//import ZipSearch from "#components/PlzSuche.svelte";
@@ -207,6 +208,22 @@
/>
</div>
<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->
<BereichLabel bereich="D">Eingabe&nbsp;Warmwasseranteil und&nbsp;Verwendung&nbsp;von&nbsp;alternativen Energieversorgungssystemen</BereichLabel>
<div class="collapseBereich">
<Warmwasseranteil
bind:ausweis
/>
</div>
</form>

8
src/pages/energieausweis-erstellen/index.astro
View File

@@ -1,20 +1,12 @@
---
import Layout from "#layouts/Layout.astro";
import Widget from "#components/Widget.svelte";
---
<Layout title="Welcher Energieausweis">
<h1 class="text-3xl">Welcher Energieausweis?</h1>
<div class="mt-12 m-auto w-[95%] relative">
<Widget client:load />
</div>
</Layout>

891
src/pages/faq/index.astro
View File

File diff suppressed because it is too large Load Diff

2
src/pages/index.astro
View File

@@ -1,6 +1,6 @@
---
import Layout from "#layouts/Layout.astro";
import ProduktVergleich from "#content/produktVergleich.svelte";
import ProduktVergleich from "#content/ProduktVergleich.svelte";
---

4
src/pages/welcher-energieausweis.mdx
View File

@@ -4,7 +4,7 @@ title: "Welcher Energieausweis?"
---
import { BoxWithHeading } from "@ibcornelsen/ui";
import WelcherAusweisWidget from "#widgets/welcherAusweisWidget.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.
<WelcherAusweisWidget />
<WelcherAusweisWidget client:load/>
## Bei Vermietung und Verkauf Ihres Wohnhauses ist der Verbrauchsausweis Wohngebäude ausreichend

181
src/style/global.css
View File

@@ -1,28 +1,25 @@
/*@import url('https://fonts.googleapis.com/css2?family=Abel:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');*/
@font-face {
font-family: 'Heron';
font-family: "Heron";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("/fonts/HeronSans-Light.woff2") format('woff2');
src: url("/fonts/HeronSans-Light.woff2") format("woff2");
}
@font-face {
font-family: 'Heron';
font-family: "Heron";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
src: url("/fonts/HeronSans-Regular.woff2") format("woff2");
}
@font-face {
font-family: 'Antique Olive Compact bold';
font-family: "Antique Olive Compact bold";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
src: url("/fonts/Antique Olive Std Compact.woff2") format("woff2");
}
* {
@@ -31,13 +28,17 @@
font-family: "Heron";
}
.promo1 {
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
text-shadow: 2px 2px 8px #222;
}
.promo {
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
}
.promo{
@@ -51,31 +52,46 @@ body{
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
}
.button {
@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary;
}
input[type="text"], input[type="number"], input[type="password"], select{
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
input[type="checkbox"]{@apply inline-block}
radio{@apply accent-primary}
input[type="text"],
input[type="number"],
input[type="password"],
select {
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm;
}
input[type="checkbox"] {
@apply inline-block;
}
radio {
@apply accent-primary;
}
/*ARTICLE*/
article {
@apply w-full relative bg-white px-0 py-0;
hr {@apply mb-4 mt-4;}
hr {
@apply mb-4 mt-4;
}
h1 {@apply text-4xl font-normal mb-2;}
h2 {@apply text-2xl font-normal mb-2;}
h3 {@apply text-xl font-normal mb-2;}
a {@apply text-blue-700 font-medium text-lg;}
h1 {
@apply text-4xl font-normal mb-2;
}
h2 {
@apply text-2xl font-normal mb-2;
}
h3 {
@apply text-xl font-normal mb-2;
}
a {
@apply text-blue-700 font-medium text-lg;
}
}
/*SIDEBARS*/
@@ -83,20 +99,23 @@ article {
/*BOXES*/
.box{
@apply rounded-lg
lg:shadow-box lg:ring-1 lg:ring-gray-300
xl:rounded-xl
xl:rounded-xl;
}
.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-0}
p {@apply text-lg}
a {@apply text-lg}
.card {
h2 {
@apply text-lg font-bold text-box-heading leading-6;
}
hr {
@apply my-2;
}
p {
@apply text-lg;
}
a {
@apply text-lg;
}
}
@@ -104,80 +123,106 @@ article {
/*NAVIGATION*/
.nav-element{@apply relative block cursor-pointer}
.nav-element {
@apply relative block cursor-pointer;
}
.nav-element:not(:first-child){@apply border-gray-200 border-t-[1px]}
.nav-element:not(:first-child) {
@apply border-gray-200 border-t-[1px];
}
.no-dropdown, .no-dropdown:hover{@apply text-black no-underline}
.no-dropdown,
.no-dropdown:hover {
@apply text-black no-underline;
}
.nav-element:hover > .nav-element-child {
@apply !bg-primary !text-white cursor-pointer
@apply !bg-primary !text-white cursor-pointer;
}
.nav-element:hover > .nav-element-child .no-dropdown {
@apply !bg-primary !text-white cursor-pointer
@apply !bg-primary !text-white cursor-pointer;
}
.nav-element:hover > .dropdown-content {
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)];
}
.nav-element:hover:first-child > .nav-element-child {
@apply !rounded-none
lg:!rounded-tl-xl lg:!rounded-tr-none
lg:!rounded-tl-xl lg:!rounded-tr-none;
}
.nav-element:hover:last-child > .nav-element-child {
@apply !rounded-none
xl:!rounded-b-xl
xl:!rounded-b-xl;
}
.nav-element-child {
@apply px-4 py-2 w-full justify-start text-sm bg-white flex !no-underline text-black
xl:text-lg
xl:text-lg;
}
.dropdown-content {
@apply !relative z-[1] !p-0 !scale-100 hidden
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
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
xl:text-lg}
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
li {
@apply text-sm bg-white flex
xl:text-lg;
}
.verbrauchsausweis li:nth-child(5), .bedarfsausweis li:nth-child(5){
@apply !border-primary !border-t-[1px]
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
xl:text-lg;
}
li:not(:first-child) {
@apply !border-gray-200 !border-t-[1px];
}
}
.verbrauchsausweis li:nth-child(5),
.bedarfsausweis li:nth-child(5) {
@apply !border-primary !border-t-[1px];
}
#hamburger {
@apply my-1;
span {@apply block h-[3px] w-6 bg-white !transition-all}
span:nth-child(2) {@apply my-1}
span {
@apply block h-[3px] w-6 bg-white !transition-all;
}
span:nth-child(2) {
@apply my-1;
}
}
.hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500}
.hamburger-swing-1{@apply origin-center opacity-0 !transition-all}
.hamburger-swing-2{@apply origin-left -rotate-45 translate-y-[1.5px] !transition-all duration-500}
.show-dropdown-content{@apply block !visible !opacity-100 lg:!invisible}
.dd-symbol{ @apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none}
.dd-symbol-clone{ @apply absolute right-[20px] lg:text-primary}
.rotate-symbol{@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none}
.hamburger-swing-0 {
@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500;
}
.hamburger-swing-1 {
@apply origin-center opacity-0 !transition-all;
}
.hamburger-swing-2 {
@apply origin-left -rotate-45 translate-y-[1.5px] !transition-all duration-500;
}
.show-dropdown-content {
@apply block !visible !opacity-100 lg:!invisible;
}
.dd-symbol {
@apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none;
}
.dd-symbol-clone {
@apply absolute right-[20px] lg:text-primary;
}
.rotate-symbol {
@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none;
}
/*NAVIGATION-ANIMATION*/
/*SIDEBAR-RIGHT*/
/*FOOTER*/

38
tailwind.config.cjs
View File

@@ -49,25 +49,25 @@ module.exports = {
},
gridTemplateColumns: {
'formbutton-line': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
'formbutton-line-md': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
'formbutton-line-xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
'formbutton-line-2xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
'bereich-A': '1fr',
'bereich-A-md': '2fr 2fr',
'bereich-A-xl': '2fr 2fr',
'bereich-A-2xl': '3fr 4fr',
'bereich-B': '1fr',
'bereich-B-lg': '2fr 2fr',
'bereich-B-xl': '2fr 2fr',
'bereich-B-2xl': '3fr 4fr',
'bereich-C': '1fr',
'bereich-C-lg': '2fr 2fr',
'bereich-C-xl': '2fr 2fr',
'bereich-C-2xl': '3fr 4fr',
//'formbutton-line': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
//'formbutton-line-md': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
//'formbutton-line-xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
//'formbutton-line-2xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
//
//'bereich-A': '1fr',
//'bereich-A-md': '2fr 2fr',
//'bereich-A-xl': '2fr 2fr',
//'bereich-A-2xl': '3fr 4fr',
//
//'bereich-B': '1fr',
//'bereich-B-lg': '2fr 2fr',
//'bereich-B-xl': '2fr 2fr',
//'bereich-B-2xl': '3fr 4fr',
//
//'bereich-C': '1fr',
//'bereich-C-lg': '2fr 2fr',
//'bereich-C-xl': '2fr 2fr',
//'bereich-C-2xl': '3fr 4fr',
//'standard-sm': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',