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

Merge remote-tracking branch 'origin/main' into dev-moritz

Browse Source
This commit is contained in:
Moritz Utcke
2024-12-23 07:34:31 +07:00
parent f89c5e1271 150e25d67f
commit 60ed796c5c
16 changed files with 2258 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/images/SKALA-910.png → public/images/formular/SKALA-910.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

31
public/images/formular/verbrauchsausweis-skala.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

23
src/components/Ausweis/Ausweisart.svelte
View File

@@ -54,7 +54,9 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</select>
<div class="help-label">
<HelpLabel>Bitte wählen Sie den Anlass.</HelpLabel>
<HelpLabel>Bitte wählen Sie aus wofür Sie den Energieausweis benötigen.
<strong>Vermietung, Verkauf oder sonstiges (z.B. zur Vorlage bei der Bank) ist als Anlass für den Verbrauchsausweis zulässig.</strong>
Neubau oder Modernisierung ist Sie hier nicht zulässig.</HelpLabel>
</div>
</div>
@@ -89,7 +91,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</select>
<div class="help-label">
<HelpLabel>Bitte wählen Sie hier den Gebäudetyp aus.</HelpLabel>
<HelpLabel><strong>Der Energieausweis bezieht sich immer auf das gesamte Gebäude</strong> oder den gesamten Wohnteil eines Mischgebäudes.
Für einzelne Wohnungen kann kein Energieausweis ausgestellt werden.</HelpLabel>
</div>
</div>
@@ -136,10 +139,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<div class="help-label">
<HelpLabel>
Bitte geben Sie an ob das Gebäude energetisch saniert oder
unsaniert ist. Wenn das Dach mindestens 12 cm gedämmt und
Heizung sowie Fenster nicht älter als 30 Jahre sind, können Sie
saniert auswählen.
Es geht um den <b>Mindeststandard der Wärmeschutzverordnung von Nov 1977.</b> Wenn das Dach mindestens 12 cm gedämmt und
Heizung sowie Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
</HelpLabel>
</div>
</div>
@@ -177,10 +178,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine
eine grundlegende Sanierung von Dach, Fenster und Heizung
stattgefunden haben, dann berücksichtigen Sie das in dem Sie bei
Sanierungsstatus -saniert- angeben.
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine grundlegende Sanierung stattgefunden haben, dann geben Sie das Sanierungsjahr ebenfalls an.
</HelpLabel>
</div>
</div>
@@ -200,7 +198,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
"Wussten sie, dass sie weitere Jahre angeben können? Z.B. das Baujahr der Erneuerung wesentlicher Komponenten ihrer Heizung. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "HEIZUNG_BAUJAHR",
timeout: 0,
@@ -219,8 +217,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
unterschiedliche Baujahre vorliegen, dann geben Sie einen
Zeitbereich ein <br />z.B. 1994-2001.
unterschiedliche Baujahre vorliegen, können Sie mehrere Jahre eingeben.
</HelpLabel>
</div>
</div>

102
src/components/Ausweis/BilderZusatzsysteme.svelte
View File

@@ -34,92 +34,22 @@ md:grid-cols-2 md:gap-x-6 md:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
"
>
<SanierungsOption
label="Zentral/Etage"
name="zentralheizung"
help="Bitte anklicken wenn die Heizwärme <strong>zentral erzeugt</strong> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu."
value="ZH"
bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}
></SanierungsOption>
<SanierungsOption
label="Einzelofen"
name="einzelofen"
help="Bei <strong>dezentraler Erzeugung</strong> in den Räumen wie z.B. Nachtspeicher, Kami- oder Kachelofen. Dezentrale Klimageräte zur Wärmeerzeugung gehören auch dazu."
value="EO"
bind:checked={gebaeude_aufnahme_allgemein.einzelofen}
></SanierungsOption>
<SanierungsOption
label="Durchlauferhitzer (elektrisch)"
name="durchlauf_erhitzer"
help="Wenn <strong>dezentrale</strong> elektrische <strong>Warmwassererzeugung</strong> vorhanden ist"
value="DH"
bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}
></SanierungsOption>
<SanierungsOption
label="Standardkessel"
name="standard_kessel"
help="Gemeint sind Konstanttemperaturkessel und ältere Gebläse- oder Feststoffkessel"
value="SK"
bind:checked={gebaeude_aufnahme_allgemein.standard_kessel}
></SanierungsOption>
<SanierungsOption
label="Solarsystem für Warmwasser"
name="solarsystem_warmwasser"
help="Solarpanele auf dem Dach zur <strong>alternativen Warmwassererzeugung</strong> aus Sonnenenergie. Nicht zu verwechseln mit Photovoltaik."
value="SSWW"
bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}
></SanierungsOption>
<SanierungsOption
label="Wärmepumpe"
name="waermepumpe"
help="Elektrisch betriebener Wärmerzeuger der thermische Energie aus natürlichen Wärmequellen wie der <strong>Umgebungsluft, dem Erdreich oder Grundwasser</strong> nutzbar macht."
value="WP"
bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}
></SanierungsOption>
<SanierungsOption
label="Niedertemperaturkessel"
name="niedertemperatur_kessel"
help="Heizkessel der mit <strong>niedrigen Vorlauftemperaturen</strong> (35-75 °C) arbeitet. Im Vergleich zum Brennwertkessel ist er weniger effizient, wird aber noch in älteren Heizsystemen eingesetzt."
value="NK"
bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}
></SanierungsOption>
<SanierungsOption
label="Brennwertkessel"
name="brennwert_kessel"
help="Hat einen besonders <strong>hohen Wirkungsgrad</strong> weil er die im Abgas enthaltene Kondensationswärme zurückgewinnt. Auch zu erkennen am doppelwandigem Abgasrohr welches sich nicht erhitzt."
value="BWK"
bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}
></SanierungsOption>
<SanierungsOption
label="Warmwasserrohre gedämmt"
name="warmwasser_rohre_gedaemmt"
help="Gemeint sind die sichtbaren Rohre des Verteilsystems Warmwasser. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen."
value="BWK"
bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}
></SanierungsOption>
<SanierungsOption
label="Heizungsrohre gedämmt"
name="heizungsrohre_gedaemmt"
help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen.ext"
value="HRGD"
bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}
></SanierungsOption>
<SanierungsOption
label="Zirkulation"
name="zirkulation"
help="Kreislauf von Heizungs- oder Warmwasser <strong>innerhalb eines Leitungssystems</strong>, um eine gleichmäßige Wärmeverteilung sicherzustellen."
value="ZK"
bind:checked={gebaeude_aufnahme_allgemein.zirkulation}
></SanierungsOption>
<SanierungsOption
label="Photovoltaik auf dem Dach"
name="photovoltaik"
help="Direkte Umwandlung von Sonnenlicht in <strong>elektrische Energie</strong> mittels Solarzellen, die den photoelektrischen Effekt nutzen."
value="PV"
bind:checked={gebaeude_aufnahme_allgemein.photovoltaik}
></SanierungsOption>
">
<SanierungsOption label="Zentral/Etage" name="zentralheizung" help="Bitte anklicken wenn die Heizwärme <b>zentral erzeugt</b> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu." value="ZH" bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}></SanierungsOption>
<SanierungsOption label="Einzelofen" name="einzelofen" help="Bei <b>dezentraler Erzeugung</b> in den Räumen wie z.B. Nachtspeicher, Kami- oder Kachelofen. Dezentrale Klimageräte zur Wärmeerzeugung gehören auch dazu." value="EO" bind:checked={gebaeude_aufnahme_allgemein.einzelofen}></SanierungsOption>
<SanierungsOption label="Durchlauferhitzer (elektrisch)" name="durchlauf_erhitzer" help="Wenn <b>dezentrale</b> elektrische <b>Warmwassererzeugung</b> vorhanden ist" value="DH" bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}></SanierungsOption>
<SanierungsOption label="Standardkessel" name="standard_kessel" help="Gemeint sind Konstanttemperaturkessel und ältere Gebläse- oder Feststoffkessel" value="SK" bind:checked={gebaeude_aufnahme_allgemein.standard_kessel}></SanierungsOption>
<SanierungsOption label="Solarsystem für Warmwasser" name="solarsystem_warmwasser" help="Solarpanele auf dem Dach zur <b>alternativen Warmwassererzeugung</b> aus Sonnenenergie. Nicht zu verwechseln mit Photovoltaik." value="SSWW" bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}></SanierungsOption>
<SanierungsOption label="Wärmepumpe" name="waermepumpe" help="Elektrisch betriebener Wärmerzeuger der thermische Energie aus natürlichen Wärmequellen wie der <b>Umgebungsluft, dem Erdreich oder Grundwasser</b> nutzbar macht." value="WP" bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}></SanierungsOption>
<SanierungsOption label="Niedertemperaturkessel" name="niedertemperatur_kessel" help="Heizkessel der mit <b>niedrigen Vorlauftemperaturen</b> (35-75 °C) arbeitet. Im Vergleich zum Brennwertkessel ist er weniger effizient, wird aber noch in älteren Heizsystemen eingesetzt." value="NK" bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}></SanierungsOption>
<SanierungsOption label="Brennwertkessel" name="brennwert_kessel" help="Hat einen besonders <b>hohen Wirkungsgrad</b> weil er die im Abgas enthaltene Kondensationswärme zurückgewinnt. Auch zu erkennen am doppelwandigem Abgasrohr welches sich nicht erhitzt." value="BWK" bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}></SanierungsOption>
<SanierungsOption label="Warmwasserrohre gedämmt" name="warmwasser_rohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Warmwasser. Gedämmte Rohre sind an den <b>dunklen Ummantelungen</b> (Manschetten) zu erkennen." value="BWK" bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}></SanierungsOption>
<SanierungsOption label="Heizungsrohre gedämmt" name="heizungsrohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <b>dunklen Ummantelungen</b> (Manschetten) zu erkennen.ext" value="HRGD" bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}></SanierungsOption>
<SanierungsOption label="Zirkulation" name="zirkulation" help="Kreislauf von Heizungs- oder Warmwasser <b>innerhalb eines Leitungssystems</b>, um eine gleichmäßige Wärmeverteilung sicherzustellen." value="ZK" bind:checked={gebaeude_aufnahme_allgemein.zirkulation}></SanierungsOption>
<SanierungsOption label="Photovoltaik auf dem Dach" name="photovoltaik" help="Direkte Umwandlung von Sonnenlicht in <b>elektrische Energie</b> mittels Solarzellen, die den photoelektrischen Effekt nutzen." value="PV" bind:checked={gebaeude_aufnahme_allgemein.photovotaik}></SanierungsOption>
</div>
<HeizungImage bind:images bind:ausweis bind:gebaeude />

6
src/components/Ausweis/ButtonSpaeterHilfe.svelte
View File

@@ -9,7 +9,7 @@ export let automatischAusfüllen;
<div
class="w-full mt-5 grid gap-x-4 gap-y-2
class="w-full mt-5 grid gap-x-4 gap-y-2 px-4
grid-cols-1
xs:grid-cols-2
"
@@ -29,9 +29,9 @@ xs:grid-cols-2
</div>
<div class="mt-2">
<div class="mt-2 px-4">
<button
class="button"
class="button hidden"
on:click={automatischAusfüllen}
type="button">Automatisch Ausfüllen
</button

65
src/components/Ausweis/GebaeudeDaten.svelte
View File

@@ -34,7 +34,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes ein.
Straße und Hausnummer des betrachteten Gebäudes. Die Angaen werden auf dem Energieausweis vermerkt.
</HelpLabel>
</div>
</div>
@@ -67,7 +67,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<div class="help-label">
<HelpLabel>
Geben Sie die PLZ ein, der Ort des Gebäudes wird automatisch eingetragen.
Bitte geben Sie die PLZ des betrachteten Gebäudes ein, der Ort wird dann angezeigt und kann ausgewählt werden.
Die Angaen werden auf dem Energieausweis vermerkt.
</HelpLabel>
</div>
</div>
@@ -101,30 +102,6 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</div>
</div>
<!-- Keller * -->
<div class="input-standard order-4 md:order-2 xl:order-4">
<Inputlabel title="Keller *"></Inputlabel>
<select
name="keller"
data-test="keller"
required
bind:value={gebaeude_aufnahme_allgemein.keller}
>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
<option value={Enums.Heizungsstatus.BEHEIZT}>beheizt</option>
</select>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<!-- Dachgeschoss *-->
<div class="input-standard order-4 md:order-2 xl:order-4">
@@ -144,7 +121,35 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<div class="help-label">
<HelpLabel>
TEXT FEHLT
Bei Obergeschoss mit vorhandenen Dachschrägen oder ausgebautem Dachgeschoss beheizt auswählen.
Bei Kaltdächern oder unausgebautem Dachgeschoss bitte unbeheizt auswählen. Bei Flachdächern wird nicht vorhanden ausgewählt.
</HelpLabel>
</div>
</div>
<!-- Keller * -->
<div class="input-standard order-4 md:order-2 xl:order-4">
<Inputlabel title="Keller *"></Inputlabel>
<select
name="keller"
data-test="keller"
required
bind:value={gebaeude_aufnahme_allgemein.keller}
>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
<option value={Enums.Heizungsstatus.BEHEIZT}>beheizt</option>
</select>
<div class="help-label">
<HelpLabel>
Diese Angabe hat folgenden Einfluss.<br>
<b>Keller beheizt:<br>Nutzfläche = Wohnfläche x 1,35.</b>
<b>Keller unbeheizt:<br>Nutzfläche = Wohnfläche x 1,2.</b>
Dies ist nur zulässig wenn die Nutzfläche unbekannt ist. Geben Sie diese daher unbedingt im nächsten Feld ein wenn bekannt.
</HelpLabel>
</div>
</div>
@@ -152,7 +157,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<!-- Gesamtfläche * -->
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="Gesamtfläche m² *"></Inputlabel>
<Inputlabel title="Nutzfläche m² *"></Inputlabel>
<input
name="nutzflaeche"
@@ -171,8 +176,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
beheizten Kellers). Diese Fläche wird dann im Energieausweis
als energetische Nutzfläche (An) ausgewiesen.
beheizten Kellers). <b>Diese Fläche wird dann im Energieausweis
als energetische Nutzfläche (An) ausgewiesen.</b>
</HelpLabel>
</div>
</div>

10
src/components/Ausweis/PerformanceScore.svelte
View File

@@ -79,11 +79,11 @@
}
</script>
<div class="w-full rounded-lg border-border-gray/35 border-4 relative px-0 mt-4">
<img class="rounded-lg" src="/images/SKALA-910.png" alt="Energieeffizienz Skala" />
<img class="" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
<ThickArrowDown
size={28}
class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
translation_1,
50,
@@ -94,7 +94,7 @@
/>
<ThickArrowUp
size={28}
class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
class="fill-base-content absolute bottom-0 transition-left duration-1000 ease-in-out"
style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
translation_2,
50,
@@ -103,4 +103,4 @@
100
)}%)"
/>
</div>

6
src/components/design/sidebars/cards/cardNavigation.svelte
View File

@@ -125,7 +125,7 @@ if(innerWidth>1024){
<a href={undefined} class="nav-element-child">Angebot anfragen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
{/if}
<ul class="dropdown-content energieasusweis-erstellen">
<ul class="dropdown-content angebot-anfragen">
{#if innerWidth < 1023}
<li><a href="/energieausweis-erstellen">Angebot anfragen</a></li>
{/if}
@@ -209,11 +209,11 @@ if(innerWidth>1024){
<a href="/bestellprozess-energieausweis" class="nav-element-child">Bestellprozess Energieausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
{/if}
<ul class="dropdown-content energieasusweis-erstellen">
<ul class="dropdown-content bestellprozess-energieausweis">
{#if innerWidth < 1023}
<li><a href="/bestellprozess-energieausweis">Bestellprozess Energieausweis</a></li>
{/if}
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Merkblatt Verbrauchsausweis Wohnen</a></li>
<li><a href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/">Merkblatt Verbrauchsausweis Wohnen</a></li>
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Merkblatt Bedarfsausweis Wohnen</a></li>
<li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Merkblatt Verbrauchsausweis Gewerbe</a></li>
</ul>

16
src/components/symboleEinheiten.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="js">
import { onMount } from "svelte";
export let formula = '';
// Aktualisiere MathJax nach der Komponente-Mount
onMount(() => {
if (window.MathJax) {
MathJax.typesetPromise();
}
});
</script>
<div>
{@html formula}
</div>

34
src/lib/Berechnungen/BedarfsausweisWohnen/funktionMonatlicherBelastungsgrad.ts Normal file
View File

@@ -0,0 +1,34 @@
// Funktion zur Berechnung des monatlichen Belastungsgrades aus Tabelle 17,8, (Januar, Zeitkonstante 90)
function monatlicherBelastungsGradT90(
wertZwei: number,
wertEins: number,
maxHeizlast: number,
maxHeizlastEins: number,
maxHeizlastZwei: number
): number {
return (
wertZwei -
((wertZwei - wertEins) * (maxHeizlast - maxHeizlastEins)) /
(maxHeizlastZwei - maxHeizlastEins)
);
}
// Beispielwerte
const wertZwei = 0.541;
const wertEins = 0.548;
const maxHeizlast = 37.86;
const maxHeizlastEins = 25;
const maxHeizlastZwei = 50;
// Berechnung
const monatlicherBelastungsgradT90 = monatlicherBelastungsGradT90(
wertZwei,
wertEins,
maxHeizlast,
maxHeizlastEins,
maxHeizlastZwei
);
console.log("Monatlicher Belastungsgrad T90:", monatlicherBelastungsgradT90);

15
src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
View File

@@ -186,30 +186,25 @@
<div class="grid grid-cols-1 gap-x-8 px-4">
<div class="w-full rounded-lg border-gray/35 border-0 relative px-40 pt-4 pb-3">
<div class="grid grid-cols-2 gap-x-8 px-4 items-center">
<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
<Progressbar progress={0} />
</div>
<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
<PerformanceScore
bind:ausweis
bind:gebaeude_aufnahme_allgemein
bind:gebaeude
/>
</div>
</div>
<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen}/>
<form data-test="ausweis">
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
<div id="formular-box" class="formular-boxen ring-0">
<!-- A Prüfung der Ausweisart -->
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>

125
src/pages/bestellprozess-energieausweis/index.astro
View File

@@ -8,72 +8,125 @@ import Layout from "#layouts/Layout.astro";
<h1>Bestellprozess Energieausweis</h1>
<div class="bestellprozess space-y-10 p-6 bg-gray-100 rounded-lg shadow-lg">
<div class="bestellprozess space-y-5 p-8">
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 1: Online-Check</h2>
<p class="text-gray-600">Beginnen Sie mit unserem <a href="welcher-energieausweis">Online-Check</a> um festzustellen, welcher Energieausweis für Ihr Gebäude geeignet ist.</p>
<div class="bestellprocess">
<h2>Schritt 1: Online-Check</h2>
<p>Beginnen Sie mit unserem <a href="welcher-energieausweis">Online-Check</a> um festzustellen, welcher Energieausweis für Ihr Gebäude geeignet ist.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 2: Auswahl des passenden Energieausweises</h2>
<p class="text-gray-600">Basierend auf den Ergebnissen wird Ihnen der passende Energieausweis angezeigt. Wenn sowohl Verbrauchsausweis als auch Bedarfsausweis möglich sind, empfehlen wir den Bedarfsausweis.</p>
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 3: Eingabeformular aufrufen</h2>
<p class="text-gray-600">
Klicken Sie auf "jetzt online erstellen", um zum Eingabeformular für den Energieausweis zu gelangen. Hier sehen Sie alle erforderlichen Informationen auf einen Blick. Eine Zusammenfassung der benötigten Daten und Merkblätter finden Sie hier: <a href="#" class="text-blue-500 underline">Merkblätter Energieausweis</a>.
<div class="bestellprocess">
<h2>Schritt 2: Auswahl des passenden Energieausweises</h2>
<p>Basierend auf den Ergebnissen wird Ihnen der passende Energieausweis angezeigt. Wenn sowohl Verbrauchsausweis als auch Bedarfsausweis möglich sind, empfehlen wir den Bedarfsausweis.</p>
</div>
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="bestellprocess">
<h2>Schritt 3: Eingabeformular aufrufen</h2>
<p>
Klicken Sie auf "jetzt online erstellen", um zum Eingabeformular für den Energieausweis zu gelangen. Hier sehen Sie alle erforderlichen Informationen auf einen Blick.
Eine Zusammenfassung der benötigten Daten und Merkblätter finden Sie hier: <a href="bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen">Merkblatt Verbrauchsausweis Wohnen</a>.
</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 4: Dateneingabe und Fotos hochladen</h2>
<p class="text-gray-600">Geben Sie die nötigen Gebäudedaten ein und laden Sie Fotos hoch. Angaben zum Sanierungsstand sind wichtig, um passende Modernisierungsempfehlungen zu erhalten. Bei Problemen können Sie über den <span class="font-medium">"Hilfe"</span>-Button unseren Offline-Service anfordern.</p>
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 5: Eingaben überprüfen</h2>
<p class="text-gray-600">Nutzen Sie die Vorschaufunktion für den Ansichtsausweis und das Datenblatt, die im Formular unten rechts aufrufbar sind. Der Anzeigebalken zu den Energiekennwerten wird während der Eingabe live aktualisiert.</p>
<div class="bestellprocess">
<h2>Schritt 4: Dateneingabe und Fotos hochladen</h2>
<p>Geben Sie die nötigen Gebäudedaten ein und laden Sie Fotos hoch. Angaben zum Sanierungsstand sind wichtig, um passende Modernisierungsempfehlungen zu erhalten. Bei Problemen können Sie über den <span class="font-medium">"Hilfe"</span>-Button unseren Offline-Service anfordern.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 6: Kundendaten eingeben und Vorprüfung</h2>
<p class="text-gray-600">Klicken Sie auf <span class="font-medium">"Weiter"</span>, um Ihre Kundendaten einzugeben und eine automatische Vorprüfung durchzuführen. Falls Punkte unvollständig sind, können Sie über <span class="font-medium">"zurück"</span> Ihre Eingaben korrigieren.</p>
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 7: Konto erstellen oder einloggen</h2>
<p class="text-gray-600">Sollten Sie noch kein Konto besitzen, wird automatisch ein Kundenkonto für Sie erstellt. Bestehende Kunden werden gebeten, sich einzuloggen, falls noch nicht geschehen.</p>
<div class="bestellprocess">
<h2>Schritt 5: Eingaben überprüfen</h2>
<p>Nutzen Sie die Vorschaufunktion für den Ansichtsausweis und das Datenblatt, die im Formular unten rechts aufrufbar sind. Der Anzeigebalken zu den Energiekennwerten wird während der Eingabe live aktualisiert.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 8: Kaufabschluss und Zusatzservices</h2>
<p class="text-gray-600">Nach einer kurzen Zusammenfassung können Sie den Kauf abschließen. Hier haben Sie auch die Möglichkeit, Zusatzservices wie Postversand, Same-Day-Service oder eine Energieeffizienzberatung zu buchen.</p>
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 9: Bezahlung</h2>
<p class="text-gray-600">Wählen Sie eine der angebotenen Bezahlmethoden, wie Rechnung, PayPal, Giropay, Sofortüberweisung oder Kreditkarte.</p>
<div class="bestellprocess">
<h2>Schritt 6: Kundendaten eingeben und Vorprüfung</h2>
<p>Klicken Sie auf <span class="font-medium">"Weiter"</span>, um Ihre Kundendaten einzugeben und eine automatische Vorprüfung durchzuführen. Falls Punkte unvollständig sind, können Sie über <span class="font-medium">"zurück"</span> Ihre Eingaben korrigieren.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 10: Bestellung abschließen</h2>
<p class="text-gray-600">
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="bestellprocess">
<h2>Schritt 7: Konto erstellen oder einloggen</h2>
<p>Sollten Sie noch kein Konto besitzen, wird automatisch ein Kundenkonto für Sie erstellt. Bestehende Kunden werden gebeten, sich einzuloggen, falls noch nicht geschehen.</p>
</div>
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="bestellprocess">
<h2>Schritt 8: Kaufabschluss und Zusatzservices</h2>
<p>Nach einer kurzen Zusammenfassung können Sie den Kauf abschließen. Hier haben Sie auch die Möglichkeit, Zusatzservices wie Postversand, Same-Day-Service oder eine Energieeffizienzberatung zu buchen.</p>
</div>
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="bestellprocess">
<h2>Schritt 9: Bezahlung</h2>
<p>Wählen Sie eine der angebotenen Bezahlmethoden, wie Rechnung, PayPal, Giropay, Sofortüberweisung oder Kreditkarte.</p>
</div>
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="bestellprocess">
<h2>Schritt 10: Bestellung abschließen</h2>
<p>
Bestätigen Sie die AGB und die Datenschutzerklärung, und klicken Sie auf <span class="font-medium">"kostenpflichtig bestellen"</span>, um den Bestellvorgang abzuschließen.
</p>
</div>
<div class="confirmation mt-8 bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Nach der Bestellung erhalten Sie:</h3>
<ul class="list-disc ml-6 text-gray-600 space-y-2">
<div class="flex items-center justify-center">
<span class="text-4xl">🠗</span>
</div>
<div class="bestellprocess">
<h2>Nach der Bestellung erhalten Sie:</h2>
<ul class="list-disc ml-6 space-y-2">
<li>Eine Bestellbestätigung auf dem Bildschirm und per E-Mail.</li>
<li>Den Ansichtsausweis per E-Mail.</li>
<li>Das Datenblatt zur Prüfung in einer separaten E-Mail.</li>
</ul>
<p class="text-gray-600 mt-4">Der Energieausweis wird frühestens 12 Stunden nach Bestellung (außer beim Same-Day-Service) von uns geprüft. Sie können vor der Ausstellung noch Korrekturen vornehmen, falls erforderlich.</p>
<p class="mt-4">Der Energieausweis wird frühestens 12 Stunden nach Bestellung (außer beim Same-Day-Service) von uns geprüft. Sie können vor der Ausstellung noch Korrekturen vornehmen, falls erforderlich.</p>
</div>
</div>
<style lang="scss">
.bestellprocess {
@apply p-4 lg:shadow-box lg:ring-1 lg:ring-gray-300;
h2 {@apply w-full font-bold pb-2 mb-4 border-b-[1.5px] border-secondary/35}
hr {@apply my-0}
p {@apply text-lg}
a {@apply text-lg}
}
</style>
</Layout>

276
src/pages/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/index.astro Normal file
View File

@@ -0,0 +1,276 @@
---
import Layout from "#layouts/Layout.astro";
---
<Layout title="Merkblatt Verbrauchsausweis Wohnen">
<h1>Merkblatt Verbrauchsausweis Wohnen</h1>
<div class="container mx-auto p-8 space-y-8">
<!-- Abschnitt A -->
<section class="merkblatt">
<h2>Abschnitt A: Prüfung der Ausweisart</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Anlass*</p>
<p>Auswahlmöglichkeiten: Neubau, Vermietung, Verkauf, Modernisierung, Sonstiges</p>
<p class="text-sm italic">Hinweis: Wählen Sie den Grund für die Ausstellung des Energieausweises.</p>
</div>
<div>
<p class="font-semibold">Gebäudetyp*</p>
<p>Auswahlmöglichkeiten: Einfamilienhaus, Mehrfamilienhaus, Wohn- und Geschäftshaus, Doppelhaushälfte etc.</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, welche Art von Gebäude vorliegt.</p>
</div>
<div>
<p class="font-semibold">Sanierungsstatus*</p>
<p>Auswahlmöglichkeiten: Saniert, Unsaniert</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob das Gebäude energetisch saniert wurde. Ein saniertes Gebäude hat z. B. gedämmte Wände, Dach und neue Fenster.</p>
</div>
<div>
<p class="font-semibold">Baujahr*</p>
<p>Eingabe: Jahreszahl</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie das Baujahr des Gebäudes an. Falls umfangreiche Sanierungen erfolgt sind, wählen Sie "saniert".</p>
</div>
<div>
<p class="font-semibold">Baujahr Heizung*</p>
<p>Eingabe: Jahreszahl</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie das Baujahr der Heizungsanlage an. Falls unterschiedliche Baujahre vorliegen, geben Sie einen Zeitraum an (z. B. 1994-2001).</p>
</div>
</div>
</section>
<!-- Abschnitt B -->
<section class="merkblatt">
<h2>Abschnitt B: Eingabe der Gebäudeadresse</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Straße, Hausnummer*</p>
<p>Eingabe: Textfeld</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die genaue Adresse des Gebäudes ein.</p>
</div>
<div>
<p class="font-semibold">PLZ*</p>
<p>Eingabe: Fünfstellige Zahl</p>
<p class="text-sm text-gray-600 italic">Hinweis: Nach Eingabe der Postleitzahl wird der Ort automatisch ergänzt.</p>
</div>
<div>
<p class="font-semibold">Wohnfläche (m²)*</p>
<p>Eingabe: Zahl</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die beheizte Wohnfläche in Quadratmetern an.</p>
</div>
<div>
<p class="font-semibold">Keller*</p>
<p>Auswahlmöglichkeiten: Nicht vorhanden, Unbeheizt, Beheizt</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie den Zustand des Kellers an.</p>
</div>
<div>
<p class="font-semibold">Gesamtfläche (m²)</p>
<p>Eingabe: Zahl</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die beheizte Gesamtfläche des Gebäudes ein (Wohnfläche + weitere beheizte Flächen wie Keller).</p>
</div>
</div>
</section>
<!-- Abschnitt C -->
<section class="merkblatt">
<h2>Abschnitt C: Energieverbrauchsangaben</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Heizquelle*</p>
<p>Auswahlmöglichkeiten: Primäre Heizquelle, Zusätzliche Heizquelle (Checkboxen)</p>
<p class="text-sm text-gray-600 italic">Hinweis: Wählen Sie alle genutzten Heizquellen aus.</p>
</div>
<div>
<p class="font-semibold">Verbrauchszeitraum (Start)</p>
<p>Eingabe: Monat und Jahr (z. B. Januar 2021)</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie den Startmonat und das Jahr des Verbrauchszeitraums an.</p>
</div>
<div>
<p class="font-semibold">Primärer Brennstoff*</p>
<p>Auswahlmöglichkeiten: Heizöl, Erdgas, Holzpellets, Strommix, Fernwärme etc.</p>
<p class="text-sm text-gray-600 italic">Hinweis: Wählen Sie den hauptsächlich genutzten Brennstoff aus.</p>
</div>
<div>
<p class="font-semibold">Einheit des Brennstoffverbrauchs*</p>
<p>Auswahlmöglichkeiten: kWh, Liter, Schüttraummeter (SRm)</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die Einheit des Brennstoffverbrauchs an.</p>
</div>
<div>
<p class="font-semibold">Verbrauchswerte für 3 Jahre*</p>
<p>Eingabe: Zahlen für die letzten drei Verbrauchsjahre</p>
<p class="text-sm text-gray-600 italic">Hinweis: Tragen Sie den Verbrauch für den angegebenen Zeitraum ein.</p>
</div>
</div>
</section>
<!-- Abschnitt D -->
<section class="merkblatt">
<h2>Abschnitt D: Warmwasseranteil</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Warmwasser im Verbrauch enthalten</p>
<p>Auswahl: Checkbox (Ja/Nein)</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob der Warmwasserverbrauch bereits im angegebenen Energieverbrauch enthalten ist.</p>
</div>
<div>
<p class="font-semibold">% Anteil Warmwasser</p>
<p>Eingabe: Zahl</p>
<p class="text-sm text-gray-600 italic">Hinweis: Falls bekannt, geben Sie den Anteil des Warmwassers in Prozent an.</p>
</div>
<div>
<p class="font-semibold">Zusätzliche Heizquelle</p>
<p>Eingabe: Zahl</p>
<p class="text-sm text-gray-600 italic">Hinweis: Falls bekannt, geben Sie den Warmwasseranteil der zusätzlichen Heizquelle an.</p>
</div>
</div>
</section>
<!-- Abschnitt E -->
<section class="merkblatt">
<h2>Abschnitt E: Angaben zur Lüftung und Kühlung</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Lüftung durch*</p>
<p>Auswahlmöglichkeiten: Fensterlüftung, Schachtlüftung, Lüftungsanlage ohne WRG, Lüftungsanlage mit WRG</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, wie das Gebäude belüftet wird.</p>
</div>
<div>
<p class="font-semibold">Kühlung (Anlage vorhanden)*</p>
<p>Auswahlmöglichkeiten: Ja, Nein</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob eine Kühlanlage im Sommer verwendet wird.</p>
</div>
</div>
</section>
<!-- Abschnitt F -->
<section class="merkblatt">
<h2>Abschnitt F: Angaben zur Heizungsanlage</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Zentralheizung/Etagenheizung</p>
<p>Auswahl: Checkbox</p>
<p class="text-sm text-gray-600 italic">Hinweis: Heizwärme wird zentral erzeugt und von dort in die Räume verteilt.</p>
</div>
<div>
<p class="font-semibold">Einzelofen</p>
<p>Auswahl: Checkbox</p>
<p class="text-sm text-gray-600 italic">Hinweis: Dezentraler Heizwärmeerzeuger wie Kamin- oder Kachelofen.</p>
</div>
<div>
<p class="font-semibold">Wärmepumpe</p>
<p>Auswahl: Checkbox</p>
<p class="text-sm text-gray-600 italic">Hinweis: Elektrisch betriebene Wärmeerzeuger, die Energie aus Umgebungsluft, Erdreich oder Wasser nutzen.</p>
</div>
<div>
<p class="font-semibold">Solarthermieanlage</p>
<p>Auswahl: Checkbox</p>
<p class="text-sm text-gray-600 italic">Hinweis: Solarsysteme zur Warmwasserbereitung.</p>
</div>
</div>
</section>
<!-- Abschnitt G -->
<section class="merkblatt">
<h2>Abschnitt G: Angaben zu Fenstern, Türen und Rollläden</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Fensterarten*</p>
<p>Auswahlmöglichkeiten: Einfachverglasung, Doppelverglasung, Dreifachverglasung, Isolierverglasung</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die Art der Verglasung an.</p>
</div>
<div>
<p class="font-semibold">Zustand der Fenster/Türen</p>
<p>Auswahlmöglichkeiten: Alle Fenster dicht, Fenster teilweise undicht, Alle Türen dicht, Türen teilweise undicht</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie den Zustand der Fenster und Türen an.</p>
</div>
<div>
<p class="font-semibold">Rollläden</p>
<p>Auswahl: Checkbox (gedämmt/luftdicht)</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob die Rollladenkästen gedämmt sind.</p>
</div>
</div>
</section>
<!-- Abschnitt H -->
<section class="merkblatt">
<h2>Abschnitt H: Angaben zur Wärmedämmung</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Außenwand gedämmt</p>
<p>Auswahl: Checkbox</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob die Außenwand gedämmt ist.</p>
</div>
<div>
<p class="font-semibold">Kellerwand/Kellerdecke gedämmt</p>
<p>Auswahl: Checkbox</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob die Kelleraußenwände oder Kellerdecken gedämmt sind.</p>
</div>
<div>
<p class="font-semibold">Dachgeschoss/Oberste Geschossdecke gedämmt</p>
<p>Auswahl: Checkbox</p>
<p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob das Dachgeschoss oder die oberste Geschossdecke gedämmt ist.</p>
</div>
</div>
</section>
<!-- Bildanforderungen -->
<section class="merkblatt">
<h2>Bildanforderungen</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Heizungsanlage (1-4 Bilder)</p>
<p class="text-sm text-gray-600 italic">Hinweis: Stellen Sie sicher, dass die Heizungsanlage aus verschiedenen Perspektiven gut erkennbar ist.</p>
</div>
<div>
<p class="font-semibold">Fenster/Türen (mind. 1 Bild)</p>
<p class="text-sm text-gray-600 italic">Hinweis: Zeigen Sie typische Fenster und Türen des Gebäudes. Achten Sie darauf, dass der Zustand der Rahmen und Verglasung sichtbar ist.</p>
</div>
<div>
<p class="font-semibold">Wärmedämmung (mind. 2 Bilder)</p>
<p class="text-sm text-gray-600 italic">Hinweis: Dokumentieren Sie die gedämmten Bereiche, z. B. Außenwände, Kellerdecken oder das Dachgeschoss.</p>
</div>
</div>
</section>
<!-- Hinweise -->
<section class="merkblatt">
<h2>Hinweise zum Bildupload</h2>
<div class="mt-4 space-y-4">
<div>
<p class="font-semibold">Format der Bilder:</p>
<p>JPEG, PNG oder PDF (max. 5 MB pro Bild).</p>
<p class="text-sm text-gray-600 italic">Hinweis: Achten Sie darauf, dass die Bilddateien klar und nicht unscharf sind.</p>
</div>
<div>
<p class="font-semibold">Anzahl der Bilder:</p>
<p>Mindestens 1 Bild pro Bereich (z. B. Heizung, Fenster, Wärmedämmung).</p>
<p class="text-sm text-gray-600 italic">Hinweis: Mehr Bilder erhöhen die Aussagekraft, besonders bei komplexen Sanierungen.</p>
</div>
<div>
<p class="font-semibold">Qualität der Bilder:</p>
<p>Ausreichende Beleuchtung und Schärfe, damit Details gut erkennbar sind.</p>
<p class="text-sm text-gray-600 italic">Hinweis: Achten Sie auf helle Lichtverhältnisse oder verwenden Sie eine Kamera mit Blitz.</p>
</div>
</div>
</section>
</div>
<style lang="scss">
.merkblatt {
@apply p-4 lg:shadow-box lg:ring-1 lg:ring-gray-300;
h2 {@apply w-full font-bold pb-2 mb-4 border-b-[2px] border-secondary/35}
hr {@apply my-0}
p {@apply text-lg}
a {@apply text-lg}
}
</style>
</Layout>

1367
src/pages/geg-2024/berechnungstabellen/index.astro Normal file
View File

File diff suppressed because it is too large Load Diff

65
src/pages/geg-2024/index.astro
View File

@@ -6,6 +6,7 @@ import Layout from "#layouts/Layout.astro";
<Layout title="GEG 2024">
<h1>GEG 2024 - Formelsammlung</h1>
<div class="container mx-auto max-w-screen-md py-8">
@@ -115,4 +116,68 @@ import Layout from "#layouts/Layout.astro";
</section>
</div>
<div class="formula-container">
<h1>Monatlicher Belastungsgrad T90</h1>
<p>Die folgende Formel berechnet den monatlichen Belastungsgrad aus Tabelle 17 (Zeitkonstante 90):</p>
<div class="formula">
<div>
<span>monatlicherBelastungsgradT90</span> = <span>wertZwei</span> -
</div>
<div class="fraction">
<span class="numerator">
(<span>wertZwei</span> - <span>wertEins</span>) &times; (<span>maxHeizlast</span> - <span>maxHeizlastEins</span>)
</span>
<span class="denominator">
<span>maxHeizlastZwei</span> - <span>maxHeizlastEins</span>
</span>
</div>
</div>
</div>
<style>
.formula-container {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 20px auto;
font-family: Arial, sans-serif;
line-height: 1.6;
}
h1 {
text-align: center;
color: #333;
}
.formula {
font-size: 1.2rem;
line-height: 2rem;
margin-top: 20px;
}
.fraction {
display: inline-block;
text-align: center;
vertical-align: middle;
}
.fraction .numerator {
border-bottom: 1px solid #000;
display: block;
padding-bottom: 5px;
margin-bottom: 5px;
}
.fraction .denominator {
display: block;
}
span {
font-family: "Courier New", Courier, monospace;
}
</style>
</Layout>

303
src/pages/geg-2024/symbole-und-einheiten/index.astro Normal file
View File

@@ -0,0 +1,303 @@
---
import Layout from "#layouts/Layout.astro";
import symboleEinheiten from "#components/symboleEinheiten.svelte";
---
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<Layout title="GEG 2024">
<h1>DIN 18599 - Symbole und Einheiten</h1>
<div class="overflow-x-auto p-8">
<table class="min-w-full border-collapse border border-gray-300">
<thead class="bg-gray-100">
<tr>
<th class="border border-gray-300 px-4 py-2 text-left">Symbol</th>
<th class="border border-gray-300 px-4 py-2 text-left">Deutsch</th>
<th class="border border-gray-300 px-4 py-2 text-left">Englisch</th>
<th class="border border-gray-300 px-4 py-2 text-left">Einheit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\eta\)</td>
<td class="border border-gray-300 px-4 py-2">Nutzungsgrad, Effizienz, Ausnutzung</td>
<td class="border border-gray-300 px-4 py-2">Performance ratio, efficiency, utilisation factor</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\beta\)</td>
<td class="border border-gray-300 px-4 py-2">Belastungsgrad</td>
<td class="border border-gray-300 px-4 py-2">Load level, load factor</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">Q˙</td>
<td class="border border-gray-300 px-4 py-2">Wärmeleistung</td>
<td class="border border-gray-300 px-4 py-2">Heating power</td>
<td class="border border-gray-300 px-4 py-2">W, kW</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">𝑉˙</td>
<td class="border border-gray-300 px-4 py-2">Volumenstrom</td>
<td class="border border-gray-300 px-4 py-2">flow rate</td>
<td class="border border-gray-300 px-4 py-2">m<sup>3</sup>/h</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">𝑞˙</td>
<td class="border border-gray-300 px-4 py-2">spezifische Wärmeleistung</td>
<td class="border border-gray-300 px-4 py-2">specific heating power</td>
<td class="border border-gray-300 px-4 py-2">W/m<sup>2</sup></td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\theta\)‾</td>
<td class="border border-gray-300 px-4 py-2">Mittlere Temperatur</td>
<td class="border border-gray-300 px-4 py-2">mean temperature</td>
<td class="border border-gray-300 px-4 py-2">&deg;C</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">A</td>
<td class="border border-gray-300 px-4 py-2">Fläche</td>
<td class="border border-gray-300 px-4 py-2">area</td>
<td class="border border-gray-300 px-4 py-2">m<sup>2</sup></td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">a</td>
<td class="border border-gray-300 px-4 py-2">Anteil</td>
<td class="border border-gray-300 px-4 py-2">fraction</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">b</td>
<td class="border border-gray-300 px-4 py-2">Überdimensionierungsfaktor der Pumpe</td>
<td class="border border-gray-300 px-4 py-2">Pump overdimensioning factor</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">c</td>
<td class="border border-gray-300 px-4 py-2">Koeffizient</td>
<td class="border border-gray-300 px-4 py-2">coefficient</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">C</td>
<td class="border border-gray-300 px-4 py-2">Konstante</td>
<td class="border border-gray-300 px-4 py-2">constant</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">c</td>
<td class="border border-gray-300 px-4 py-2">spezifische Wärmekapazität</td>
<td class="border border-gray-300 px-4 py-2">specific heat capacity</td>
<td class="border border-gray-300 px-4 py-2">kJ/(kg·K)</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">COP</td>
<td class="border border-gray-300 px-4 py-2">Leistungskennzahl</td>
<td class="border border-gray-300 px-4 py-2">coefficient of performance</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">d</td>
<td class="border border-gray-300 px-4 py-2">Zeit, Zeitspanne, Tage</td>
<td class="border border-gray-300 px-4 py-2">Time, time period, days</td>
<td class="border border-gray-300 px-4 py-2">d, d/a, d/mth</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">e</td>
<td class="border border-gray-300 px-4 py-2">Aufwandszahl</td>
<td class="border border-gray-300 px-4 py-2">expenditure factor</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">E</td>
<td class="border border-gray-300 px-4 py-2">monatliche solare Bestrahlungsenergie</td>
<td class="border border-gray-300 px-4 py-2">Monthly solar radiation energy</td>
<td class="border border-gray-300 px-4 py-2">kWh/(m<sup>2</sup>·mth)</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">EEI</td>
<td class="border border-gray-300 px-4 py-2">Energieeffizienzindex</td>
<td class="border border-gray-300 px-4 py-2">Energy efficiency index</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">F</td>
<td class="border border-gray-300 px-4 py-2">Faktor</td>
<td class="border border-gray-300 px-4 py-2">factor</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">FBH</td>
<td class="border border-gray-300 px-4 py-2">Fußbodenheizung</td>
<td class="border border-gray-300 px-4 py-2">underfloor heating</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">g</td>
<td class="border border-gray-300 px-4 py-2">Gesamtenergiedurchlassgrad bei senkrechtem Strahlungseinfall</td>
<td class="border border-gray-300 px-4 py-2">total energy transmittance for perpendicular incidence of solar radiation</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">H</td>
<td class="border border-gray-300 px-4 py-2">Wärmetransferkoeffizient, allgemein</td>
<td class="border border-gray-300 px-4 py-2">heat transfer coefficient, general</td>
<td class="border border-gray-300 px-4 py-2">W/K</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">h</td>
<td class="border border-gray-300 px-4 py-2">Höhe</td>
<td class="border border-gray-300 px-4 py-2">height</td>
<td class="border border-gray-300 px-4 py-2">m</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">HK</td>
<td class="border border-gray-300 px-4 py-2">Heizkörper</td>
<td class="border border-gray-300 px-4 py-2">radiator</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">L</td>
<td class="border border-gray-300 px-4 py-2">Länge</td>
<td class="border border-gray-300 px-4 py-2">length</td>
<td class="border border-gray-300 px-4 py-2">m</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">n</td>
<td class="border border-gray-300 px-4 py-2">Luftwechselrate</td>
<td class="border border-gray-300 px-4 py-2">air change rate</td>
<td class="border border-gray-300 px-4 py-2">h<sup>-1</sup></td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">P</td>
<td class="border border-gray-300 px-4 py-2">Leistung</td>
<td class="border border-gray-300 px-4 py-2">Performance, power</td>
<td class="border border-gray-300 px-4 py-2">W, kW</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">p</td>
<td class="border border-gray-300 px-4 py-2">Druck</td>
<td class="border border-gray-300 px-4 py-2">pressure</td>
<td class="border border-gray-300 px-4 py-2">kPa</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">Q</td>
<td class="border border-gray-300 px-4 py-2">Energie</td>
<td class="border border-gray-300 px-4 py-2">energy</td>
<td class="border border-gray-300 px-4 py-2">kWh</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">q</td>
<td class="border border-gray-300 px-4 py-2">spezifische Energie</td>
<td class="border border-gray-300 px-4 py-2">specific energy</td>
<td class="border border-gray-300 px-4 py-2">Wh/(m<sup>2</sup>·d), kWh/(m<sup>2</sup>·a)</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">t</td>
<td class="border border-gray-300 px-4 py-2">Zeit, Zeitspanne</td>
<td class="border border-gray-300 px-4 py-2">Time, time period, hours</td>
<td class="border border-gray-300 px-4 py-2">h, h/d, h/mth, h/a</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">U</td>
<td class="border border-gray-300 px-4 py-2">Wärmedurchgangskoeffizient</td>
<td class="border border-gray-300 px-4 py-2">thermal transmittance</td>
<td class="border border-gray-300 px-4 py-2">W/(m<sup>2</sup>·K)</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">V</td>
<td class="border border-gray-300 px-4 py-2">Volumen</td>
<td class="border border-gray-300 px-4 py-2">volume</td>
<td class="border border-gray-300 px-4 py-2">m<sup>3</sup></td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">W</td>
<td class="border border-gray-300 px-4 py-2">Hilfsenergie</td>
<td class="border border-gray-300 px-4 py-2">auxiliary energy</td>
<td class="border border-gray-300 px-4 py-2">kWh</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(z\)</td>
<td class="border border-gray-300 px-4 py-2">Tägliche Laufzeit der Zirkulationspumpe</td>
<td class="border border-gray-300 px-4 py-2">Daily running time of the circulation pump</td>
<td class="border border-gray-300 px-4 py-2">h/d</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\alpha\)</td>
<td class="border border-gray-300 px-4 py-2">Anteil</td>
<td class="border border-gray-300 px-4 py-2">fraction</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\gamma\)</td>
<td class="border border-gray-300 px-4 py-2">Wärmequellen-/Wärmesenken-Verhältnis</td>
<td class="border border-gray-300 px-4 py-2">heat-balance ratio, ratio of heat sources to heat sinks</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\Delta\)</td>
<td class="border border-gray-300 px-4 py-2">Differenz</td>
<td class="border border-gray-300 px-4 py-2">difference</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\theta\)</td>
<td class="border border-gray-300 px-4 py-2">Temperatur</td>
<td class="border border-gray-300 px-4 py-2">temperature</td>
<td class="border border-gray-300 px-4 py-2">°C</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\kappa\)</td>
<td class="border border-gray-300 px-4 py-2">Deckungsanteil</td>
<td class="border border-gray-300 px-4 py-2">Cover ratio</td>
<td class="border border-gray-300 px-4 py-2">%</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\sigma\)</td>
<td class="border border-gray-300 px-4 py-2">Stromkennzahl</td>
<td class="border border-gray-300 px-4 py-2">CHP code</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\Phi\)</td>
<td class="border border-gray-300 px-4 py-2">Wärmestrom</td>
<td class="border border-gray-300 px-4 py-2">energy flow rate, power, heat flow</td>
<td class="border border-gray-300 px-4 py-2">W</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(w\)</td>
<td class="border border-gray-300 px-4 py-2">Wichtungsfaktor</td>
<td class="border border-gray-300 px-4 py-2">weighting factor</td>
<td class="border border-gray-300 px-4 py-2">—</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\rho\)</td>
<td class="border border-gray-300 px-4 py-2">Dichte</td>
<td class="border border-gray-300 px-4 py-2">density</td>
<td class="border border-gray-300 px-4 py-2">kg/m<sup>3</sup></td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\tau\)</td>
<td class="border border-gray-300 px-4 py-2">Zeitkonstante (einer Gebäudezone)</td>
<td class="border border-gray-300 px-4 py-2">(thermal) time constant (of a building zone)</td>
<td class="border border-gray-300 px-4 py-2">h</td>
</tr>
<tr>
<td class="text-3xl border border-gray-300 px-4 py-2">\(\vartheta\)</td>
<td class="border border-gray-300 px-4 py-2">Temperatur</td>
<td class="border border-gray-300 px-4 py-2">temperature</td>
<td class="border border-gray-300 px-4 py-2">°C</td>
</tr>
</tbody>
</table>
</div>
</Layout>