From 0bc7242eac09ae6e6793ef5910bc995f621501b2 Mon Sep 17 00:00:00 2001
From: Robert Jagtiani <all@robert-jagtiani.de>
Date: Wed, 11 Dec 2024 17:30:58 +0100
Subject: [PATCH] Formular Edit

---
 src/components/Ausweis/Ausweisart.svelte      |   6 +-
 src/components/Ausweis/GebaeudeDaten.svelte   | 183 ++++++++
 .../BedarfsausweisContent1.svelte             | 423 ------------------
 .../BedarfsausweisContent2.svelte             | 262 -----------
 src/components/labels/BereichLabel.svelte     |  10 +-
 src/components/labels/InputLabel.svelte       |   2 +-
 .../VerbrauchsausweisWohnenModule.svelte      |  45 +-
 .../bedarfsausweis-wohngebaeude/index.astro   |   2 +-
 src/style/formular.css                        |   4 +-
 9 files changed, 222 insertions(+), 715 deletions(-)
 create mode 100644 src/components/Ausweis/GebaeudeDaten.svelte
 delete mode 100644 src/components/Bedarfsausweis/BedarfsausweisContent1.svelte
 delete mode 100644 src/components/Bedarfsausweis/BedarfsausweisContent2.svelte

diff --git a/src/components/Ausweis/Ausweisart.svelte b/src/components/Ausweis/Ausweisart.svelte
index 90c5e117..fe7ef99a 100644
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 
-	import BereichLabel from "#labels/BereichLabel.svelte";
+console.log('Hallo Welt');
+
 	import HelpLabel from "#labels/HelpLabel.svelte";
 	import Inputlabel from "#labels/InputLabel.svelte";
 
@@ -24,12 +25,11 @@
 
 
 
-<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
+
 
 
 <div 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
 ">
diff --git a/src/components/Ausweis/GebaeudeDaten.svelte b/src/components/Ausweis/GebaeudeDaten.svelte
new file mode 100644
index 00000000..a80fd260
--- /dev/null
+++ b/src/components/Ausweis/GebaeudeDaten.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
+
+    import ZipSearch from "#components/PlzSuche.svelte";
+    import { Enums } from "@ibcornelsen/database/client"
+
+    export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
+
+</script>
+
+<div 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
+">
+
+<!-- Straße, Hausnummer * -->
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+	<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
+
+    <input
+        name="adresse"
+        data-test="adresse"
+        type="text"
+        autocomplete="off"
+        required
+        data-msg-minlength="min. 5 Zeichen"
+        data-msg-maxlength="max. 40 Zeichen"
+        bind:value={gebaeude_aufnahme_allgemein.adresse}
+    />
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes ein.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- PLZ / ORT -->
+
+<div class="grid grid-cols-[2fr_3fr] order-2 md:order-2 xl:order-2">
+
+<div class="input-standard">
+	<Inputlabel title="PLZ *"></Inputlabel>
+	
+	<ZipSearch
+		bind:zip={gebaeude_aufnahme_allgemein.plz}
+		bind:city={gebaeude_aufnahme_allgemein.ort}
+		name="plz"
+	/>
+
+</div>
+
+<div class="input-standard">
+	<Inputlabel title="Ort *"></Inputlabel>
+	
+	<input
+		name="ort"
+		data-test="ort"
+		readonly={true}
+		bind:value={gebaeude_aufnahme_allgemein.ort}
+		type="text"
+		/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Geben Sie die PLZ ein, der Ort des Gebäudes wird automatisch eingetragen.
+				</HelpLabel>
+		</div>
+</div>
+
+</div>
+
+<!-- Wohnfläche m² * -->
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+	<Inputlabel title="Wohnfläche m² *"></Inputlabel>
+
+    <input
+		name="flaeche"
+		data-test="flaeche"
+		maxlength="4"
+		type="number"
+		required
+		autocomplete="off"
+		data-rule-minlength="2"
+		data-msg-minlength="min. 2 Zeichen"
+		bind:value={gebaeude_aufnahme_allgemein.flaeche}
+	/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
+					Dabei handelt es sich um die Wohnfläche abzüglich
+					vorhandener Flächen die sich außerhalb des Gebäudes
+					befinden. (Balkone, Terassen,etc.).
+				</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>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">
+    <Inputlabel title="Dachgeschoss *"></Inputlabel>
+        
+    <select
+		name="dachgeschoss"
+		data-test="dachgeschoss"
+		bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
+		required
+	>
+			<option disabled>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>
+
+<!-- Gesamtfläche * -->
+
+<div class="input-standard order-6 md:order-6 xl:order-6">
+	<Inputlabel title="Gesamtfläche m² *"></Inputlabel>
+
+    <input
+		name="nutzflaeche"
+		data-test="nutzflaeche"
+		maxlength="4"
+		type="number"
+		required
+		autocomplete="off"
+		data-rule-minlength="2"
+		data-msg-minlength="min. 2 Zeichen"
+		bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
+	/>
+
+		<div class="help-label">
+				<HelpLabel>
+					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.
+				</HelpLabel>
+			</div>
+</div>
+
+
+
+
+</div>
\ No newline at end of file
diff --git a/src/components/Bedarfsausweis/BedarfsausweisContent1.svelte b/src/components/Bedarfsausweis/BedarfsausweisContent1.svelte
deleted file mode 100644
index 19a115d6..00000000
--- a/src/components/Bedarfsausweis/BedarfsausweisContent1.svelte
+++ /dev/null
@@ -1,423 +0,0 @@
-<script lang="ts">
-	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
-	import Progressbar from "#components/Ausweis/Progressbar.svelte";
-	import Hilfe from "#components/Ausweis/Hilfe.svelte";
-	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
-	import Label from "#components/Label.svelte";
-	import HelpLabel from "#components/HelpLabel.svelte";
-	import ZipSearch from "#components/PlzSuche.svelte";
-	import { hotWaterProductionTypes } from "./HotWaterProductionTypes";
-	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
-	import moment from "moment";
-	import { BitChecker } from "src/lib/BitChecker";
-	import type { BedarfsausweisWohnen } from "@ibcornelsen/database/client";
-
-	let ausweis: BedarfsausweisWohnen = {} as BedarfsausweisWohnen;
-
-	let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
-
-	let fensterArten = {
-		Einfachverglasung: 5,
-		"Holzfenster Doppelverglasung": 2.7,
-		"Kunststofffenster Doppelverglasung": 3,
-		"Alu- oder Stahlfenster Doppelverglasung": 4.3,
-		"Fenster Doppelverglasung (ab 1995)": 1.8,
-		"Fenster Doppelverglasung (U-Wert 1,1)": 1.1,
-		"Dreifach-Wärmeschutzverglasung(U-Wert 0,9)": 0.9,
-		"Dreifach-Wärmeschutzverglasung(U-Wert 0,85)": 0.85,
-		"Passivhausfenster(U-Wert 0,7)": 0.7,
-		"Passivhausfenster(U-Wert 0,6)": 0.6,
-		"Fenster mit U-Wert 2,3": 2.3,
-		"Fenster mit U-Wert 1,6": 1.6,
-		"Fenster mit U-Wert 1,7": 1.7,
-		"Fenster mit U-Wert 1,3": 1.3,
-		"Fenster mit U-Wert 1": 1,
-	};
-
-	const arrayRange = (start: number, stop: number, step: number) =>
-		Array.from(
-			{ length: (stop - start) / step + 1 },
-			(value, index) => start + index * step
-		);
-
-	function automatischAusfüllen() {
-		ausweis.baujahr_anlage = 1974;
-		ausweis.baujahr_gebaeude = 1962;
-		ausweis.anzahl_einheiten = 1;
-		ausweis.objekt_saniert = true;
-		ausweis.objekt_strasse = "Mönckebergstraße";
-		ausweis.objekt_plz = "22049";
-		ausweis.objekt_ort = "Hamburg";
-		ausweis.wohnflaeche = 152;
-		ausweis.keller_beheizt = true;
-		ausweis.dachgeschoss = Dachgeschoss.UNBEHEIZT;
-		ausweis.energieverbrauch_zeitraum = moment("04.01.2018");
-		ausweis.energietraeger_1 = "Erdgas";
-		ausweis.energietraeger_einheit_heizquelle_1 = "kWh";
-		ausweis.versorgungssysteme = BitChecker(1);
-		ausweis.fenster_dach = BitChecker(1);
-		ausweis.daemmung = BitChecker(1);
-		ausweis.objekt_typ = "Einfamilienhaus";
-		ausweis.objekt_gebaeudeteil = "Gesamtgebäude";
-		ausweis.lueftungskonzept = "Fensterlüftung";
-		ausweis.wird_gekuehlt = false;
-		ausweis.energieverbrauch_1_heizquelle_1 = 40120;
-		ausweis.energieverbrauch_2_heizquelle_1 = 42120;
-		ausweis.energieverbrauch_3_heizquelle_1 = 41120;
-		ausweis.anzahl_vollgeschosse = 2;
-		ausweis.geschosshoehe = 2.25;
-		ausweis.anzahl_gauben = 1;
-		ausweis.breite_gauben = 0.7;
-		ausweis.masse_a = 4;
-		ausweis.masse_b = 12;
-		ausweis.masse_c = 3;
-		ausweis.masse_d = 6;
-		ausweis.masse_e = 4;
-		ausweis.masse_f = 9;
-		ausweis.fensterflaeche_so_sw = 8;
-		ausweis.fensterflaeche_nw_no = 8;
-		ausweis.aussenwandflaeche_unbeheizt = 15;
-		ausweis.fenster_flaeche_1 = 16;
-		ausweis.fenster_art_1 = 5;
-		ausweis.fenster_flaeche_2 = 0;
-		ausweis.fenster_art_2 = 5;
-		ausweis.dachfenster_flaeche = 12;
-		ausweis.dachfenster_art = 5;
-		ausweis.haustuer_flaeche = 2;
-		ausweis.haustuer_art = 5;
-		ausweis.dach_bauart = "Massive Konstruktion";
-		ausweis.dach_daemmung = 0;
-		ausweis.decke_bauart = "Massive Konstruktion";
-		ausweis.decke_daemmung = 0.02;
-		ausweis.aussenwand_bauart = "Massive Konstruktion";
-		ausweis.aussenwand_daemmung = 0.05;
-		ausweis.boden_bauart = "Massive Konstruktion";
-		ausweis.boden_daemmung = 0.08;
-		ausweis.warmwasser_verteilung = "zvmzbis1978";
-		ausweis.warmwasser_speicherung = "zwwsath";
-		ausweis.warmwasser_erzeugung = "ktkesselbis1986";
-		ausweis.heizung_zentral = false;
-		ausweis.heizung_verteilung = "zv7055bis1978";
-		ausweis.waerme_erzeugung_heizung = "ktkesselbis1986h";
-		ausweis.heizung_speicherung = "elzs7055bis1994";
-		ausweis.energietraeger_2 = "Braunkohle";
-		ausweis.anteil_zusatzheizung = 0.7;
-		ausweis = ausweis;
-	}
-
-  function toggleSection(section: HTMLElement): void {
-  // Find the next sibling element and assert it's an HTMLElement
-  const formContainer = section.nextElementSibling as HTMLElement | null;
-  if (!formContainer) {
-    console.error("Form container not found.");
-    return;
-  }
-
-  // Find the icon inside the section and assert it's an HTMLElement
-  const icon = section.querySelector('.toggle-icon') as HTMLElement | null;
-  if (!icon) {
-    console.error("Toggle icon not found.");
-    return;
-  }
-
-  // Toggle classes for expanded and collapsed states
-  formContainer.classList.toggle('expanded');
-  section.classList.toggle('collapsed');
-}
-
-</script>
-
-<div class="mt-8 m-auto w-[95%] relative">
-
-<div class="flex flex-row gap-8 items-center mb-8">
-	<div class="flex flex-col w-full">
-		<h1>Bedarfsausweis erstellen - 75€</h1>
-		<Progressbar progress={0} />
-	</div>
-
-	<PerformanceScore {ausweis} />
-</div>
-
-<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
-
-      <div class="form-section" onclick="toggleSection(this)">
-        <label id="headlinep" class="section-title">A - Prüfung der Ausweisart</label>
-        <span class="toggle-icon">▶</span>
-      </div>
-      
-      <div class="form-container">
-
-
-        <div class="form-grid">
-
-          <!-- Anlass für Energieausweis -->
-          <div class="form-group">
-            <select id="ausstellgrund" name="ausstellgrund" required class="form-select">
-              <option value="" disabled selected>Anlass *</option>
-              <option value="Neubau">Neubau</option>
-              <option value="Vermietung">Vermietung</option>
-              <option value="Verkauf">Verkauf</option>
-              <option value="Modernisierung">Modernisierung</option>
-              <option value="Sonstiges">Sonstiges</option>
-            </select>
-          </div>
-      
-          <!-- Baujahr Heizung -->
-          <div class="form-group">
-            <input id="baujahr_anlage" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung *" class="form-input">
-          </div>
-      
-          <!-- Baujahr Gebäude -->
-          <div class="form-group">
-            <input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude *" class="form-input">
-          </div>
-      
-          <!-- Anzahl der Wohnungen -->
-          <div class="form-group">
-            <input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" placeholder="Anzahl Wohnungen *" class="form-input">
-          </div>
-      
-          <!-- Sanierungsstatus -->
-          <div class="form-group">
-            <select id="objekt_saniert" name="objekt_saniert" required class="form-select">
-              <option value="" disabled selected>Sanierungsstatus *</option>
-              <option value="1">saniert</option>
-              <option value="0">unsaniert</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-  <div class="form-section" onclick="toggleSection(this)">
-    <label id="headlinep" class="section-title">B - Eingabe der Gebäudeadresse</label>
-    <span class="toggle-icon">▶</span>
-  </div>
-
-  <!-- Collapsible Container -->
-  <div class="form-container">
-    <div class="form-grid">
-    <!-- Straße und Hausnummer -->
-    <div class="form-group">
-        <input
-          name="objekt_strasse"
-          type="text"
-          required
-          placeholder="Straße, Hausnummer *"
-          bind:value="{ausweis.objekt_strasse}"
-          class="form-input"
-        />
-    </div>
-
-    <!-- PLZ und Ort -->
-    <div class="form-group">
-      <input
-          name="objekt_plz"
-          type="text"
-          required
-          placeholder="PLZ *"
-          bind:value="{ausweis.objekt_plz}"
-          class="form-input"
-        />
-    </div>
-
-    <!-- Ort -->
-    <div class="form-group">
-        <input
-          name="objekt_ort"
-          type="text"
-          placeholder="Ort *"
-          bind:value="{ausweis.objekt_ort}"
-          class="form-input"
-        />
-    </div>
-
-    <!-- Wohnfläche -->
-    <div class="form-group">
-        <input
-          name="wohnflaeche"
-          type="number"
-          required
-          placeholder="Wohnfläche in m² *"
-          bind:value="{ausweis.wohnflaeche}"
-          class="form-input"
-        />
-    </div>
-
-    <!-- Gebäudetyp -->
-    <div class="form-group">
-        <select
-          name="objekt_typ"
-          required
-          bind:value="{ausweis.objekt_typ}"
-          class="form-input"
-        >
-          <option value="" disabled selected>Gebäudetyp *</option>
-          <option value="Einfamilienhaus">Einfamilienhaus</option>
-          <option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
-          <option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option>
-          <option value="Doppelhaushälfte">Doppelhaushälfte</option>
-          <option value="Reihenendhaus">Reihenendhaus</option>
-          <option value="Reihenmittelhaus">Reihenmittelhaus</option>
-          <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
-          <option value="Wohn- und Geschäftshaus">Wohn- und Geschäftshaus</option>
-          <option value="Atrium-Bungalow">Atrium-Bungalow</option>
-          <option value="Winkelbungalow">Winkelbungalow</option>
-        </select>
-    </div>
-
-    <!-- Gebäudeteil -->
-    <div class="form-group">
-        <select
-          name="objekt_gebaeudeteil"
-          required
-          bind:value="{ausweis.objekt_gebaeudeteil}"
-          class="form-input"
-        >
-          <option value="" disabled selected>Gebäudeteil *</option>
-          <option value="Gesamtgebäude">Gesamtgebäude</option>
-          <option value="Wohnen">Wohnen</option>
-        </select>
-    </div>
-    </div> 
-  </div>
-
-</form>
-
-</div>
-
-
-
-
-<style lang="scss">
-
-    .form-section {
-  margin-bottom: 0.8rem;
-  margin-top: 2rem;
-
-  .section-title {
-    font-size: 1.125rem; // 18px
-    font-weight: 600;
-    text-align: left;
-  }
-}
-
-.form-container {
-  padding: 1rem;
-  background-color: #f3f4f6; // Tailwind's bg-gray-100
-  border-radius: 0.5rem;
-  margin-bottom: 1.5;
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: 1rem;
-
-  .form-group {
-    grid-column: span 4; // Equivalent to col-span-4 in Tailwind
-
-    &.full-width {
-      grid-column: span 12;
-    }
-
-    .form-label {
-      display: block;
-      font-size: 0.875rem; // 14px
-      font-weight: 500;
-      color: #374151; // Tailwind's text-gray-700
-      margin-bottom: 0.5rem;
-    }
-
-    .form-input,
-    .form-select {
-      display: block;
-      width: 100%;
-      padding: 0.5rem;
-      font-size: 0.875rem;
-      color: #111827; // Tailwind's text-gray-900
-      border: 1px solid #d1d5db; // Tailwind's border-gray-300
-      border-radius: 0.375rem; // Rounded-md
-      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); // Tailwind's shadow-sm
-      transition: border-color 0.2s, box-shadow 0.2s;
-
-      &:focus {
-        border-color: #6366f1; // Tailwind's focus:border-indigo-500
-        box-shadow: 0 0 0 1px #6366f1; // Tailwind's focus:ring-indigo-500
-        outline: none;
-      }
-
-      &::placeholder {
-        color: #9ca3af; // Tailwind's text-gray-400
-        font-style: italic;
-      }
-
-      option {
-      color: #111827; // Tailwind's text-gray-900
-    }
-
-    option[disabled] {
-      color: #9ca3af; // Tailwind's text-gray-400
-    }
-
-    }
-
-    .form-options {
-      margin-top: 0.5rem;
-
-      .radio-option {
-        display: flex;
-        align-items: center;
-        margin-bottom: 0.5rem;
-
-      input {
-          accent-color: #6366f1; // Tailwind's text-indigo-600
-          margin-right: 0.5rem;
-        }
-
-      span {
-          font-size: 0.875rem;
-          color: #374151; // Tailwind's text-gray-700
-        }
-      }
-    }
-
-  }
-}
-
-.form-section {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      cursor: pointer;
-    }
-
-    .section-title {
-      font-size: 1.2rem;
-      font-weight: bold;
-    }
-
-    .toggle-icon {
-      font-size: 1.5rem;
-      transition: transform 0.3s ease;
-    }
-
-    .collapsed .toggle-icon {
-      transform: rotate(-90deg);
-    }
-
-    .form-container {
-      overflow: hidden;
-      transition: max-height 0.3s ease;
-    }
-
-    .collapsed .form-container {
-      max-height: 0;
-      padding: 0;
-    }
-
-    .form-container.expanded {
-      max-height: 500px; /* Adjust based on content size */
-      padding: 10px 0;
-    }
-
-</style>
diff --git a/src/components/Bedarfsausweis/BedarfsausweisContent2.svelte b/src/components/Bedarfsausweis/BedarfsausweisContent2.svelte
deleted file mode 100644
index fe52fbce..00000000
--- a/src/components/Bedarfsausweis/BedarfsausweisContent2.svelte
+++ /dev/null
@@ -1,262 +0,0 @@
-<script lang="ts">
-	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
-	import Progressbar from "#components/Ausweis/Progressbar.svelte";
-	import Hilfe from "#components/Ausweis/Hilfe.svelte";
-	import HelpLabel from "#components/HelpLabel.svelte";
-	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
-	import Label from "#components/Label.svelte";
-	import BereichLabel from "#components/labels/BereichLabel.svelte";
-	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
-	import ZipSearch from "#components/PlzSuche.svelte";
-	import moment from "moment";
-	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
-	import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
-	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
-	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
-	import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
-	import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
-	import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
-	import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
-	import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
-	import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
-	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
-	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
-	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
-	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
-	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
-	import { Enums } from "@ibcornelsen/database/client"
-	import Overlay from "#components/Overlay.svelte";
-	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
-	import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
-	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
-		
-	// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
-	// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
-	export let ausweis: VerbrauchsausweisWohnenClient;
-	export let user: BenutzerClient = {} as BenutzerClient;
-
-	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
-	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
-	let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];
-
-	async function spaeterWeitermachen() {
-		const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
-
-		if (result !== null) {
-			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
-			// Sonst müsste er alles neu eingeben...
-			ausweis.uid = result.uid
-			gebaeude.uid = result.gebaeude_uid
-			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
-			window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
-			speichernOverlayHidden = false;
-		}
-	}
-
-	function automatischAusfüllen() {
-		gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
-		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
-		gebaeude_aufnahme_allgemein.saniert = true;
-		gebaeude_aufnahme_allgemein.einheiten = 1;
-		ausweis.ausstellgrund = "Vermietung";
-		ausweis.verbrauch_1 = 15000;
-		ausweis.verbrauch_2 = 14000;
-		ausweis.verbrauch_3 = 16000;
-		gebaeude_aufnahme_allgemein.flaeche = 152;
-		gebaeude_aufnahme_allgemein.nutzflaeche = 172;
-		ausweis.keller_beheizt = true;
-		gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
-		ausweis.einheit_1 = "kWh";
-		ausweis.anteil_warmwasser_1 = 18;
-		ausweis.startdatum = moment("01.01.2019").toDate();
-		gebaeude_aufnahme_allgemein.plz = "21039";
-		gebaeude_aufnahme_allgemein.ort = "Hamburg";
-		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
-		gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";
-
-		gebaeude = gebaeude;
-		ausweis = ausweis;
-	}
-
-
-	async function ausweisAbschicken(e: SubmitEvent) {
-		if (e && e.preventDefault) e.preventDefault();
-		const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
-
-		if (result !== null) {
-			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
-			// Sonst müsste er alles neu eingeben...
-			ausweis.uid = result.uid
-			gebaeude.uid = result.gebaeude_uid
-			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
-			window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
-			window.location.href = `/kundendaten?uid=${result.uid}`;
-		}
-	}
-
-	let waitOverlayHidden = true;
-	let speichernOverlayHidden = true;
-
-	$: {
-		if (gebaeude_aufnahme_allgemein.saniert 
-			&& gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt  === undefined
-			&& gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined) {
-
-			gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
-			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
-		}
-	}
-</script>
-
-<Overlay bind:hidden={speichernOverlayHidden}>
-	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
-		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
-	</div>
-</Overlay>
-
-<Overlay bind:hidden={waitOverlayHidden}>
-	<p class="text-white font-semibold text-4xl">
-		Bitte warten sie, ihr Ausweis wird nun erstellt.
-	</p>
-</Overlay>
-
-
-
-<form action="" enctype="multipart/form-data">
-
-    <BereichLabel bereich="A">Eingabe der Gebäudeadresse -&nbsp;Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
-
-    <div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Anlass *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Anlass">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Baujahr Heizung *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Baujahr Gebäude *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Anzahl Wohnungen *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Anzahl Wohnungen">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Sanierungsstatus *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Sanierungsstatus">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Gebäudetyp *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Gebäudetyp">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-</div>
-
-<br>
-
-<div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Straße, Hausnummer *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Straße, Hausnummer *">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">PLZ *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="PLZ *">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Ort *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Ort *">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Wohnfläche m² *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Wohnfläche m² *">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Keller *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Keller *">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Dachgeschoss *</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Dachgeschoss *">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-    <div class="w-full grid grid-cols-[1fr_25px] items-center relative">
-        <div class="absolute text-[12px] right-[45px] top-[3px]">Gesamtfläche m²</div>
-        <input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Gesamtfläche m²">
-        <div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
-    </div>
-
-</div>
-
-
-
-
-
-<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-      
-          <!-- Baujahr Heizung -->
-
-            
-    
-      
-          <!-- Baujahr Gebäude -->
-        
-            <input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude *" class="form-input">
-      
-      
-          <!-- Anzahl der Wohnungen -->
-      
-            <input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" placeholder="Anzahl Wohnungen *" class="form-input">
-      
-      
-          <!-- Sanierungsstatus -->
-        
-            <select id="objekt_saniert" name="objekt_saniert" required class="form-select">
-              <option value="" disabled selected>Sanierungsstatus *</option>
-              <option value="1">saniert</option>
-              <option value="0">unsaniert</option>
-            </select>
-       
- 
-  
-
- 
-
-</form>
-
-
-
-
-
-
-<style lang="scss">
-
-
-
-</style>
diff --git a/src/components/labels/BereichLabel.svelte b/src/components/labels/BereichLabel.svelte
index 22fb3c07..d009e844 100644
--- a/src/components/labels/BereichLabel.svelte
+++ b/src/components/labels/BereichLabel.svelte
@@ -1,10 +1,5 @@
 <script lang="ts">
-
-	export let title: string = "";
 	export let bereich: string;
-
-	
-
 </script>
 
 
@@ -12,7 +7,7 @@
 <div class="bereichs-label">
 
 <div>
-	<div class="grid grid-cols-[max-content_max-content_50px] items-center justify-items-start gap-2">
+	<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2">
 	<div class="formular-abschnitt1">{bereich}</div>
 	<div class="formular-abschnitt2"><slot></slot></div>
 	<!--<div class="justify-self-end"><img src="/images/icons/toggle-icon.svg" alt="toggle-icon" class="w-[25px] rotate-[90deg]"/></div>-->
@@ -25,7 +20,4 @@
 
 <style lang="postcss">
     
-.bereichs-label{ }
-label{@apply [font-size:_clamp(15px,1vw,36px)]}
-
 </style>
\ No newline at end of file
diff --git a/src/components/labels/InputLabel.svelte b/src/components/labels/InputLabel.svelte
index 238f2d30..2ae38d24 100644
--- a/src/components/labels/InputLabel.svelte
+++ b/src/components/labels/InputLabel.svelte
@@ -4,7 +4,7 @@
 </script>
 
 
-<div class="absolute border-x-[1px] border-t-[1px] border-black/25 bg-white/15 px-3 top-[-1.275rem] left-[0rem] text-[0.8rem] rounded-t-sm font-sans">{title}</div>
+<div class="absolute border-x-[1px] border-t-[1px] border-black/25 px-3 top-[-1.275rem] left-[0rem] text-[0.8rem] rounded-t-sm font-sans">{title}</div>
 
 
 
diff --git a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
index c9698744..794de54e 100644
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
-	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	//import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	//import Progressbar from "#components/Ausweis/Progressbar.svelte";
 	import Hilfe from "#components/Ausweis/Hilfe.svelte";
-    import HelpLabel from "#labels/HelpLabel.svelte";
+
+	import BereichLabel from "#labels/BereichLabel.svelte";
+	import HelpLabel from "#labels/HelpLabel.svelte";
     import Inputlabel from "#labels/InputLabel.svelte";
-	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
 	import Label from "#components/Label.svelte";
+
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
-	import ZipSearch from "#components/PlzSuche.svelte";
+	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
+
+	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	//import ZipSearch from "#components/PlzSuche.svelte";
 	import moment from "moment";
 	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
 	import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
@@ -24,9 +29,9 @@
 	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
 	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
 	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
-	import { Enums } from "@ibcornelsen/database/client"
+	//import { Enums } from "@ibcornelsen/database/client"
 	import Overlay from "#components/Overlay.svelte";
-	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
+	import AusweisGespeichertModule from "#modules/Ausweise/AusweisGespeichertModule.svelte";
 	import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
 	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
 		
@@ -124,8 +129,12 @@
 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 
 <div id="formular-box" class="formular-boxen ring-0">
-    
-    <div class="w-full grid gap-x-4 gap-y-2 
+   
+
+	
+<!-- Später weitermachen / Hilfe anfordern -->
+
+<div class="w-full grid gap-x-4 gap-y-2 
 	grid-cols-1
 	xs:grid-cols-2
     ">
@@ -140,19 +149,27 @@
 
     
 
+<!-- A Prüfung der Ausweisart -->
 
-
+<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
 <Ausweisart
 	bind:gebaeude
 	bind:gebaeude_aufnahme_allgemein
 	bind:ausweis
 	client:load
-	/>
-    
+/>
+ 
+<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
+
+<BereichLabel bereich="B">Eingabe&nbsp;der&nbsp;Gebäudeadresse - Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
+
+<GebaeudeDaten 
+		bind:gebaeude_aufnahme_allgemein
+		client:load
+/>
+
 
 </div>
-	
- 
 
 </form>
 
diff --git a/src/pages/energieausweis-erstellen/bedarfsausweis-wohngebaeude/index.astro b/src/pages/energieausweis-erstellen/bedarfsausweis-wohngebaeude/index.astro
index 6a37eb38..105b990e 100644
--- a/src/pages/energieausweis-erstellen/bedarfsausweis-wohngebaeude/index.astro
+++ b/src/pages/energieausweis-erstellen/bedarfsausweis-wohngebaeude/index.astro
@@ -1,7 +1,7 @@
 ---
 
 import AusweisLayout from "#layouts/AusweisLayout.astro";
-import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent2.svelte";
+import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent.svelte";
 
 
 ---
diff --git a/src/style/formular.css b/src/style/formular.css
index b5060938..41b511c4 100644
--- a/src/style/formular.css
+++ b/src/style/formular.css
@@ -5,11 +5,11 @@
 
 
 .formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
-.formular-abschnitt2{@apply text-[1.25rem] pl-1;}
+.formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] md:[font-size:_clamp(20px,1.25vw,36px)] pl-1;}
 
 .bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
 
-.bereich-box {@apply w-full bg-gray-500/15 ring-1 rounded-sm ring-gray-500/35 pt-6 pb-8 px-4;
+.bereich-box {@apply w-full bg-gray-500/10 ring-1 rounded-sm ring-gray-500/35 pt-6 pb-8 px-4;
 
 	/*background: linear-gradient(
         135deg,