diff --git a/src/components/Ausweis/Ausweisart.svelte b/src/components/Ausweis/Ausweisart.svelte
index 220c25d8..018a24c5 100644
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import HelpLabel from "#components/HelpLabel.svelte";
+	import Label from "#components/Label.svelte";
 	import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
 	import { addNotification, deleteNotification } from "@ibcornelsen/ui";
 	import TagInput from "../TagInput.svelte";
@@ -16,142 +17,165 @@
 
 </script>
 
-<div class="GRB">
-	<!-- Anlass für Energieausweis -->
-	<div class="flex flex-col">
-		<span>Anlass für Energieausweis * </span>
-		<div class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3">
+<div class="w-full grid 
+grid-cols-bereich-A gap-x-4
+xl:grid-cols-bereich-A-xl xl:gap-x-6
+2xl:grid-cols-bereich-A-2xl 2xl:gap-x-6
+">
+
+<!-- Anlass für Energieausweis -->
+<div class="">		
+	<Label>* Anlass für den Energieausweis</Label>
+			<div class="grid  gap-x-6 mb-8
+			grid-cols-[minmax(min-content,_130px)]
+			xs:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)]
+			sm:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)_minmax(min-content,_130px)]
+			xl:grid-cols-[1fr_1fr] xl:gap-x-6 xl:mb-0 
+			2xl:grid-cols-[1fr_1fr_1fr]
+			">
+
 			{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
-				<label class="radio-inline">
-					<input
-						name="ausstellgrund"
-						type="radio"
-						class="radio radio-secondary"
-						value={ausstellgrund}
-						bind:group={ausweis.ausstellgrund}
-					/>{name}</label
-				>
-			{/each}
-		</div>
-	</div>
+					<label class="radio-inline">
+						<input
+							name="ausstellgrund"
+							type="radio"
+							value={ausstellgrund}
+							bind:group={ausweis.ausstellgrund}
+						/>{name}</label
+					>
+				{/each}
+			</div>
+</div>
 
-	<!-- Baujahr Heizung -->
-	<div class="form-group col-md-2">
-		<HelpLabel title="Baujahr Heizung *">
-			Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
-			unterschiedliche Baujahre vorliegen, dann geben Sie einen
-			Zeitbereich ein <br />z.B. 1994-2001.
-		</HelpLabel>
-		<div>
-			<TagInput
-				name="baujahr_heizung"
-				type="number"
-				onlyUnique={true}
-				minChars={4}
-				onFocusIn={() => {
-					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.",
-						dismissable: true,
-						uid: "HEIZUNG_BAUJAHR",
-						timeout: 0,
-						type: "info",
-					});
-				}}
-				onFocusOut={() => {
-					deleteNotification("HEIZUNG_BAUJAHR");
-				}}
-				className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
-					? "linked"
-					: ""}
-				bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
-			/>
-		</div>
-	</div>
+<div class="grid grid-cols-1 gap-x-4
+md:grid-cols-2 md:gap-x-6
+2xl:grid-cols-4 2xl:gap-x-6
+">
 
-	<!-- Baujahr -->
-	<div class="form-group col-md-2">
-		<HelpLabel title="Baujahr Gebäude *">
-			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.
-		</HelpLabel>
-		<div>
-			<TagInput
-				name="baujahr_gebaeude"
-				type="number"
-				onlyUnique={true}
-				minChars={4}
-				onFocusIn={() => {
-					addNotification({
-						message: "Info",
-						subtext:
-							"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
-						dismissable: true,
-						uid: "GEBAEUDE_BAUJAHR",
-						timeout: 0,
-						type: "info",
-					});
-				}}
-				onFocusOut={() => {
-					deleteNotification("GEBAEUDE_BAUJAHR");
-				}}
-				className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
-					? "linked"
-					: ""}
-				bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
-			/>
-		</div>
-	</div>
+<!-- Baujahr Heizung -->
+<div class="">
+				<HelpLabel title="* Baujahr Heizung">
+					Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
+					unterschiedliche Baujahre vorliegen, dann geben Sie einen
+					Zeitbereich ein <br />z.B. 1994-2001.
+				</HelpLabel>
+				<div>
+					<TagInput
+						name="baujahr_heizung"
+						type="number"
+						onlyUnique={true}
+						minChars={4}
+						onFocusIn={() => {
+							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.",
+								dismissable: true,
+								uid: "HEIZUNG_BAUJAHR",
+								timeout: 0,
+								type: "info",
+							});
+						}}
+						onFocusOut={() => {
+							deleteNotification("HEIZUNG_BAUJAHR");
+						}}
+						className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
+							? "linked"
+							: ""}
+						bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
+					/>
+				</div>
+</div>
 
-	<!-- Anzahl der Wohnungen -->
-	<div class="form-group col-md-2">
-		<HelpLabel title="Anzahl Wohnungen *">
-			Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
-			Gebäude befinden.
-		</HelpLabel>
-		<div>
-			<input
-				name="einheiten"
-				type="number"
-				required
-				autocomplete="off"
-				data-msg="Pflichtfeld"
-				bind:value={gebaeude_aufnahme_allgemein.einheiten}
-				maxlength="3"
-			/>
-		</div>
-	</div>
-
-	<!-- Dachgeschoss -->
-	<div class="form-group col-md-2">
-		<HelpLabel title="Sanierungsstatus *">
-			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.
-		</HelpLabel>
-		<div>
-			<select
-				name="saniert"
-				class=""
-				required
-				bind:value={gebaeude_aufnahme_allgemein.saniert}
-			>
-				<option disabled selected value={false}>Bitte auswählen</option>
-				<option value={true}>saniert</option>
-				<option value={false}>unsaniert</option>
-			</select>
-		</div>
+<!-- Baujahr -->
+<div class="">
+	<HelpLabel title="* Baujahr Gebäude">
+		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.
+	</HelpLabel>
+	<div>
+		<TagInput
+			name="baujahr_gebaeude"
+			type="number"
+			onlyUnique={true}
+			minChars={4}
+			onFocusIn={() => {
+				addNotification({
+					message: "Info",
+					subtext:
+						"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
+					dismissable: true,
+					uid: "GEBAEUDE_BAUJAHR",
+					timeout: 0,
+					type: "info",
+				});
+			}}
+			onFocusOut={() => {
+				deleteNotification("GEBAEUDE_BAUJAHR");
+			}}
+			className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
+				? "linked"
+				: ""}
+			bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
+		/>
 	</div>
 </div>
 
-<style>
-	
+<!-- Anzahl der Wohnungen -->
+<div class="">
+	<HelpLabel title="* Anzahl Wohnungen">
+		Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
+		Gebäude befinden.
+	</HelpLabel>
+	<div>
+		<input
+			name="einheiten"
+			type="number"
+			required
+			autocomplete="off"
+			data-msg="Pflichtfeld"
+			bind:value={gebaeude_aufnahme_allgemein.einheiten}
+			maxlength="3"
+		/>
+	</div>
+</div>
 
-	input[type="radio"] {
-		@apply w-5 h-5 rounded-full;
+<!-- Sanierungsstatus -->
+<div class="">
+	<HelpLabel title="* Sanierungsstatus">
+		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.
+	</HelpLabel>
+	<div>
+		<select
+			name="saniert"
+			class=""
+			required
+			bind:value={gebaeude_aufnahme_allgemein.saniert}
+		>
+			<option disabled selected value={false}>Bitte auswählen</option>
+			<option value={true}>saniert</option>
+			<option value={false}>unsaniert</option>
+		</select>
+	</div>
+</div>
+
+
+</div>
+</div>
+
+
+
+
+
+
+<style lang="postcss">
+
+input[type="radio"] {
+		@apply w-5 h-5  accent-secondary
 	}
 
 	.radio-inline {
diff --git a/src/components/Ausweis/Hilfe.svelte b/src/components/Ausweis/Hilfe.svelte
index 364a22cf..f3cfe4b2 100644
--- a/src/components/Ausweis/Hilfe.svelte
+++ b/src/components/Ausweis/Hilfe.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div>
-	<button type="button" class="button" on:click={() => (showHelp = !showHelp)}
+	<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
 		>Hilfe anfordern</button
 	>
 
diff --git a/src/components/Ausweis/Verbrauch.svelte b/src/components/Ausweis/Verbrauch.svelte
index d2da247d..25ea07f0 100644
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -64,25 +64,158 @@
 	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
 </script>
 
-<div class="w-full flex flex-col gap-4">
-	<div class="w-full grid grid-cols-[1fr,1fr,1fr,1fr,1fr] gap-6">
-		<div>
+
+	
+<div>
+		<div class="grid grid-cols-[40px_1fr] mb-4 xl:mb-0">
+
+			<input
+				type="checkbox"
+				class="checkbox w-[20px] h-[20px] self-center -mt-1"
+				name="zusaetzliche_heizquelle"
+				bind:checked={ausweis.zusaetzliche_heizquelle}
+			/>
+
+			<div class="w-[150px]">
 			<HelpLabel title="zusätzliche Heizquelle">
 				Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
 				zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
 				Verbrauchszeiträume wie bei der primären Heizung verwendet
 				werden.
 			</HelpLabel>
-			<input
-				type="checkbox"
-				class="checkbox"
-				name="zusaetzliche_heizquelle"
-				bind:checked={ausweis.zusaetzliche_heizquelle}
-			/>
+			</div>
+		
+		</div>
+		<input class="hidden xl:invisible xl:block"/>
+		<div class="grid grid-cols-[40px_120px] gap-x-1 items-center">
+			<div></div>
+			<span>Zeitraum:</span>
 		</div>
 
-		<div>
-			<HelpLabel title="Brennstoff *">
+			<div class="grid grid-cols-[30px_1fr_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
+				
+				<span class="">von</span>
+
+				<select
+					name="energieverbrauch_zeitraum_monat"
+					class="rounded-tr-none rounded-br-none w-full m-0"
+					bind:value={month}
+					required
+				>
+					<option>Monat</option>
+					{#if year !== null}
+						{#each availableDates.filter(date => date.year == year) as date}
+							<option value={date.month}>{monthNames[date.month]}</option>
+						{/each}
+					{:else}
+						{#each Array.from(availableDates.reduce((a,c) => {
+							a.add(c.month);
+							return a;
+						}, new Set())) as month}
+							<option value={month}>{monthNames[month]}</option>
+						{/each}
+					{/if}
+				</select>
+
+				<select
+					name="energieverbrauch_zeitraum_jahr"
+					class="rounded-tl-none rounded-bl-none w-full m-0"
+					bind:value={year}
+					required
+				>
+					<option>Jahr</option>
+					{#each Array.from(availableDates.reduce((a,c) => {
+						a.add(c.year);
+						return a;
+					}, new Set())) as year}
+						<option value={year}>{year}</option>
+					{/each}
+				</select>
+
+				
+				<span class="">bis</span>
+						
+				<input
+						
+						value={moment(ausweis.startdatum)
+							.add("1", "year")
+							.format("MM.Y")}
+						readonly
+				/>
+				
+			</div>
+
+
+			<div class="invisible">
+				<span>leer</span>
+			</div>
+
+			<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
+
+				<div></div>
+		
+				<span class="justify-self-center">von</span>
+
+					<input
+						class="klima text-right"
+						value={moment(ausweis.startdatum)
+							.add("1", "year")
+							.format("MM.Y")}
+						readonly
+					/>
+				
+					<span class="justify-self-center">bis</span>
+
+						<input
+							value={moment(ausweis.startdatum)
+								.add("2", "years")
+								.format("MM.Y")}
+							readonly
+						/>
+				
+			</div>
+
+			<div class="invisible">
+				<span>leer</span>
+			</div>
+		
+			<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
+
+				<div></div>
+
+				<span class="justify-self-center">von</span>
+
+				<input
+					class="klima text-right"
+					value={moment(ausweis.startdatum)
+						.add("2", "years")
+						.format("MM.Y")}
+					readonly
+				/>
+
+				<span class="justify-self-center">bis</span>
+
+				<input
+					value={moment(ausweis.startdatum)
+						.add("3", "years")
+						.format("MM.Y")}
+					readonly
+				/>
+		
+
+			</div>
+
+</div>
+
+
+<div class="grid grid-cols-2 gap-x-6">
+
+<div>
+
+	<div class="grid grid-cols-[3fr_2fr] gap-x-2"> 
+
+	<div>
+			<HelpLabel title="* Brennstoff">
 				<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
 				entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
 				<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
@@ -109,39 +242,92 @@
 				<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
 			</HelpLabel>
 			<div>
-				<select name="brennstoff_1" required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}>
+				<select 
+					class="rounded-e-none"
+					name="brennstoff_1" 
+					required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
+					>
+
 					<option disabled>Bitte auswählen</option>
 					{#each Object.keys(fuelMap) as fuel}
 						<option value={fuel}>{fuel}</option>
 					{/each}
 				</select>
 			</div>
-		</div>
+	
+	</div>
 
-		<div>
-			<HelpLabel title="Einheit *">
+	<div>
+			<HelpLabel title="* Einheit">
 				Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
 				Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
 				vor. Pellets oder Brennholz in SRm (Schüttraummetern).
 			</HelpLabel>
-			<div>
-				<select
+		
+			<select
+					class="rounded-s-none"
 					name="einheit_1"
 					required
-					bind:value={ausweis.einheit_1}
+					bind:value={ausweis.einheit_1}	
 				>
 					<option disabled>Bitte auswählen</option>
 					{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
 						<option value={unit}>{unit}</option>
 					{/each}
-				</select>
-			</div>
-		</div>
+			</select>
+		
+	</div>
 
-		<div>
-			<Label>Brennstoff *</Label>
-			<div>
+	</div>
+	
+
+	<div>
+
+		
+			<span>* Verbrauch</span>
+			<input
+				name="verbrauch_1"
+				type="number"
+				class:linked={abweichung.indexOf(1) > -1}
+				bind:value={ausweis.verbrauch_1}
+				required
+			/>
+		
+			<span>* Verbrauch</span>
+			<input
+				name="verbrauch_2"
+				type="number"
+				class:linked={abweichung.indexOf(2) > -1}
+				bind:value={ausweis.verbrauch_2}
+				required
+			/>
+		
+		
+			<span>* Verbrauch</span>
+			<input
+				name="verbrauch_3"
+				type="number"
+				class:linked={abweichung.indexOf(3) > -1}
+				bind:value={ausweis.verbrauch_3}
+				required
+			/>
+		
+
+	</div>
+		
+</div>			
+
+
+<div>
+
+	<div class="grid grid-cols-[3fr_2fr] gap-x-2"> 
+
+	<div>
+		
+		<Label>* Brennstoff</Label>
+				
 				<select
+					class="rounded-e-none"
 					name="brennstoff_2"
 					bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
 					disabled={!ausweis.zusaetzliche_heizquelle}
@@ -152,13 +338,14 @@
 						<option value={fuel}>{fuel}</option>
 					{/each}
 				</select>
-			</div>
-		</div>
+	</div>
+			
+	<div>
+
+		<Label>* Einheit</Label>
 
-		<div>
-			<Label>Einheit *</Label>
-			<div>
 				<select
+					class="rounded-s-none"
 					name="einheit_2"
 					disabled={!ausweis.zusaetzliche_heizquelle}
 					bind:value={ausweis.einheit_2}
@@ -168,138 +355,14 @@
 					{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
 						<option value={unit}>{unit}</option>
 					{/each}
-				</select>
-			</div>
-		</div>
+				</select>		
 	</div>
 
-	<div class="grid grid-cols-[2fr_1fr_2fr_2fr] gap-6">
-		<div class="flex flex-col gap-2">
-			<div class="column">
-				<span>von</span>
-				<select
-					name="energieverbrauch_zeitraum_monat"
-					class="rounded-tr-none rounded-br-none w-full m-0"
-					bind:value={month}
-					required
-				>
-					<option>auswählen</option>
-					{#if year !== null}
-						{#each availableDates.filter(date => date.year == year) as date}
-							<option value={date.month}>{monthNames[date.month]}</option>
-						{/each}
-					{:else}
-						{#each Array.from(availableDates.reduce((a,c) => {
-							a.add(c.month);
-							return a;
-						}, new Set())) as month}
-							<option value={month}>{monthNames[month]}</option>
-						{/each}
-					{/if}
-				</select>
+	</div>
+
+
+	<div>
 
-				<select
-					name="energieverbrauch_zeitraum_jahr"
-					class="rounded-tl-none rounded-bl-none w-full m-0"
-					bind:value={year}
-					required
-				>
-					<option>auswählen</option>
-					{#each Array.from(availableDates.reduce((a,c) => {
-						a.add(c.year);
-						return a;
-					}, new Set())) as year}
-						<option value={year}>{year}</option>
-					{/each}
-				</select>
-			</div>
-			<div class="column">
-				<span>von</span>
-				<input
-					class="klima"
-					value={moment(ausweis.startdatum)
-						.add("1", "year")
-						.format("MM.Y")}
-					readonly
-				/>
-			</div>
-			<div class="column">
-				<span>von</span>
-				<input
-					class="klima"
-					value={moment(ausweis.startdatum)
-						.add("2", "years")
-						.format("MM.Y")}
-					readonly
-				/>
-			</div>
-		</div>
-		<div class="flex flex-col gap-2">
-			<div class="column">
-				<span>bis</span>
-				<input
-					
-					value={moment(ausweis.startdatum)
-						.add("1", "year")
-						.format("MM.Y")}
-					readonly
-				/>
-			</div>
-			<div class="column">
-				<span>bis</span>
-				<input
-					
-					value={moment(ausweis.startdatum)
-						.add("2", "years")
-						.format("MM.Y")}
-					readonly
-				/>
-			</div>
-			<div class="column">
-				<span>bis</span>
-				<input
-					
-					value={moment(ausweis.startdatum)
-						.add("3", "years")
-						.format("MM.Y")}
-					readonly
-				/>
-			</div>
-		</div>
-		<div class="flex flex-col gap-2">
-			<div class="column">
-				<span>Verbrauch *</span>
-				<input
-					name="verbrauch_1"
-					type="number"
-					class:linked={abweichung.indexOf(1) > -1}
-					bind:value={ausweis.verbrauch_1}
-					required
-				/>
-			</div>
-			<div class="column">
-				<span>Verbrauch *</span>
-				<input
-					name="verbrauch_2"
-					type="number"
-					class:linked={abweichung.indexOf(2) > -1}
-					bind:value={ausweis.verbrauch_2}
-					required
-				/>
-			</div>
-			<div class="column">
-				<span>Verbrauch *</span>
-				<input
-					name="verbrauch_3"
-					type="number"
-					class:linked={abweichung.indexOf(3) > -1}
-					bind:value={ausweis.verbrauch_3}
-					required
-				/>
-			</div>
-		</div>
-		<div class="flex flex-col gap-2">
-			<div class="column">
 				<span>Verbrauch</span>
 				<input
 					name="verbrauch_4"
@@ -308,8 +371,7 @@
 					class:linked={abweichung.indexOf(4) > -1}
 					disabled={!ausweis.zusaetzliche_heizquelle}
 				/>
-			</div>
-			<div class="column">
+			
 				<span>Verbrauch</span>
 				<input
 					name="verbrauch_5"
@@ -318,8 +380,7 @@
 					class:linked={abweichung.indexOf(5) > -1}
 					disabled={!ausweis.zusaetzliche_heizquelle}
 				/>
-			</div>
-			<div class="column">
+		
 				<span>Verbrauch</span>
 				<input
 					name="verbrauch_6"
@@ -328,13 +389,18 @@
 					class:linked={abweichung.indexOf(6) > -1}
 					disabled={!ausweis.zusaetzliche_heizquelle}
 				/>
-			</div>
-		</div>
+
 	</div>
+
 </div>
 
-<style>
-	.column {
-		@apply flex flex-row items-center gap-4;
-	}
+</div>
+
+
+
+
+<style lang="postcss">
+
+input[type="checkbox"] {@apply accent-secondary}
+
 </style>
diff --git a/src/components/BereichLabel.svelte b/src/components/BereichLabel.svelte
new file mode 100644
index 00000000..d93c1bd8
--- /dev/null
+++ b/src/components/BereichLabel.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let title: string;
+	export let bereich: string = "";
+</script>
+
+<div class="bereichs-label">
+
+<label class="text-base-content" for={title}>
+	<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>
+</label>
+</div>
+
+<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/HelpLabel.svelte b/src/components/HelpLabel.svelte
index f417cfb0..c05a688b 100644
--- a/src/components/HelpLabel.svelte
+++ b/src/components/HelpLabel.svelte
@@ -3,9 +3,10 @@
 	export let tooltip: string = "";
 </script>
 
-<div class="flex flex-row justify-between mb-2">
-	<label class="text-base-content">{title}</label>
-	<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
+<div class="grid grid-cols-2 mt-[5px]">
+
+	<label>{title}</label>
+	<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help justify-self-end">
 		<img
 			src="/images/question-mark.png"
 			alt="?"
@@ -13,18 +14,22 @@
 		/>
 		<div class="tooltip">
 			<slot></slot>
-			<div id="arrow" class="invisible absolute h-3 w-3 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
+			<div id="arrow" class="invisible absolute h-3 w-6 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
 		</div>
 	</div>
+
 </div>
 
-<style>
+<style lang="postcss">
 	label {
-		@apply text-base font-medium;
+		@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
+		[font-size:_clamp(15px,1rem,10px)]
 	}
 
+
+
 	.tooltip {
-		@apply absolute -right-1 max-w-[350px] w-max break-words invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
+		@apply absolute -right-1 max-w-[480px] w-max break-words ring-2 ring-secondary/5 invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
 	}
 
 	.tooltip-opener:hover .tooltip {
diff --git a/src/components/Label.svelte b/src/components/Label.svelte
index 743ad796..47745e58 100644
--- a/src/components/Label.svelte
+++ b/src/components/Label.svelte
@@ -2,6 +2,13 @@
 	export let name: string = "";
 </script>
 
-<div class="flex flex-row justify-between items-center gap-4 mb-2">
-	<label class="text-base font-medium" for={name}><slot></slot></label>
-</div>
\ No newline at end of file
+<div class="h-[26.5px] mt-[5px]">
+<label for={name}><slot></slot></label>
+</div>
+
+<style lang="postcss">
+	label {
+		@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
+		[font-size:_clamp(15px,1rem,10px)]
+	}
+</style>
\ No newline at end of file
diff --git a/src/components/PlzSuche.svelte b/src/components/PlzSuche.svelte
index c49ef1e2..3306dc02 100644
--- a/src/components/PlzSuche.svelte
+++ b/src/components/PlzSuche.svelte
@@ -50,7 +50,7 @@
 <div class="relative" use:clickOutside={() => {
 	hideZipDropdown = true;
 }}>
-	<Label name={name}>PLZ *</Label>
+	
 	<input
 		name={name}
 		id={name}
diff --git a/src/components/design/header/Header.astro b/src/components/design/header/Header.astro
index 966dc9c5..c8bdb710 100644
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -4,73 +4,64 @@ import Login from "#sidebarCards/card-login.svelte";
 
 <header>
 
-<div class="max-w-[1920px] w-full grid relative bg-white
+<div class="grid relative bg-white items-center gap-4 pt-4 px-0
 
-sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
-md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
+grid-cols-1
+sm:grid-cols-1 
+md:grid-cols-1
 
-lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
-xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
-2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
+lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-4 lg:py-4
+xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-6 xl:py-4
+2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-6 2xl:py-4">
 
+<div class="justify-self-center xs:justify-self-start">
 
+<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
+xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
+md:gap-y-4
+lg:px-0 lg:gap-x-4">
 
-<!---
-		lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
-		
-		<h2 class="text-secondary font-normal absolute
-					top-1 right-2 text-[1.1rem]
-					xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
-					
-					md:top-[1.25rem] md:right-4 md:text-[1.1rem]
-					xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
-					Energieausweis online erstellen
-		</h2>
-				
-		<h2	class="text-primary font-normal absolute 
-					top-[1.6rem] right-2 text-[0.85rem]
-					xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
-					
-					md:top-[2.5rem] md:right-4 md:text-[0.9rem]
-					xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
-					Energieausweise nach aktuellem GEG
-		</h2> -->
-		
+<div class="self-start justify-self-start">
+	<a href="/">
+		<img class="w-full 
+		xs:max-w-[64px] 
+		sm:max-w-[64px]
+		md:max-w-[64px] md:ml-6
+		lg:max-w-[64px] lg:ml-0
+		xl:max-w-[94px] xl:ml-0
+		" 
+		src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
+	</a>
+</div>
 
+<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
+	<div class="text-secondary justify-self-center
+	xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
 
-
-
-<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[110px_auto] gap-6 pt-[0px]">
-
-	<div class="self-start justify-self-start">
-
-		<a href="/">
-			<img class="w-full absolute top-2 left-6 max-w-[94px]" 
-			src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
-		</a>
-	</div>
-
-	<div class="self-center justify-self-start mt-[10px]">
-	<div class="text-secondary
 	lg:[font-size:_clamp(15px,3vw,26px)]
 	lg:leading-[2rem]
 	xl:[font-size:_clamp(15px,3vw,36px)] 
 	xl:leading-[4.5rem] pt-[0px]">
 	Energieausweis online erstellen</div>
-	<div class="text-primary 
+	<div class="text-primary justify-self-center
+	xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
+
 	lg:[font-size:_clamp(15px,3vw,20px)] 
 	lg:leading-[2rem]
 	xl:[font-size:_clamp(15px,3vw,24px)] 
-	xl:leading-[0.5rem] pl-[1px]">
+	xl:leading-[0.5rem]">
 	Energieausweise nach aktuellem GEG</div>
 	</div>
+</div>
+</div>
 
+<div class="w-full justify-self-center">
+	<Login client:load />
+</div>
 
 </div>
 
-<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
-		<Login client:load />
-		</div>
+
 
 
 </div>
diff --git a/src/components/design/sidebars/cards/card-login.svelte b/src/components/design/sidebars/cards/card-login.svelte
index f19e84e9..4bcaa452 100644
--- a/src/components/design/sidebars/cards/card-login.svelte
+++ b/src/components/design/sidebars/cards/card-login.svelte
@@ -22,16 +22,12 @@
 	let errorHidden = true;
 </script>
 
-<div
-	id="card-login">
-
-	<div>
-
+<div id="card-login" class="rounded-none lg:rounded-lg lg:card lg:box bg-black/10 md:bg-black/5 lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2" >
 	
-		<form on:submit={login}>
-			<div class="grid grid-cols-[1fr_1fr] gap-2">
+	<form on:submit={login}>
+		<div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
 			<input
-				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				class="my-1 rounded-md px-2 py-1  w-full"
 				type="text"
 				placeholder="nutzer@email.com"
 				name="email"
@@ -40,7 +36,7 @@
 				required
 			/>
 			<input
-				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				class="my-1 rounded-md px-2 py-1  w-full"
 				type="password"
 				minlength="8"
 				placeholder="********"
@@ -55,9 +51,15 @@
 				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
 			</div>
 			{/if}
+
+			<button class="button self-center" type="submit">login</button>
+		
+		</div>
+
+
+
+		<div class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-2">
 		
-</div>
-<div class="grid grid-cols-[3fr_2fr] gap-2">
 
 			<div class="w-full text-left self-center">
 				<a
@@ -70,16 +72,11 @@
 				>
 			</div>
 
-			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
-
 		</div>
-		</form>
+	</form>
 
-		
-
-		<div></div>
 	</div>
-</div>
+
 
 <style lang="postcss">
 
diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index 35246e98..b7ca6e72 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -85,7 +85,7 @@ if(innerWidth>1024){
 
 
 <div class="hamburger_menu py-1 px-2 bg-secondary
-            xs:px-6
+            xs:px-4
             lg:hidden">
 
               <div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
@@ -97,7 +97,7 @@ if(innerWidth>1024){
 
 
 
-<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 rounded-tr-none lg:block"> 
+<nav id="card-navigation" class="card-navigation hidden box ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block"> 
 
   <!-- svelte-ignore a11y-mouse-events-have-key-events -->
   <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
@@ -192,18 +192,7 @@ if(innerWidth>1024){
 
 
 <style lang="scss">
-.nav-element-child{@apply before:bg-primary/50 before:rotate-[45deg];}
-.nav-element-child:hover{@apply before:bg-white;}
 
-.nav-element-child:before{
-  position:absolute;
-  content:' ';
-  top:22px;
-  left:10px;
-  width:5px;
-  height:5px;
-  border-radius:0%;
-}
 
 
 .dd-symbol::before{
diff --git a/src/components/design/sidebars/cards/card-price-info.svelte b/src/components/design/sidebars/cards/card-price-info.svelte
index e759278f..4af5abea 100644
--- a/src/components/design/sidebars/cards/card-price-info.svelte
+++ b/src/components/design/sidebars/cards/card-price-info.svelte
@@ -6,27 +6,27 @@
 		class="	box card hidden bg-white px-6 py-4 mt-5
 				lg:block">
 	
-<div class="grid grid-cols-[max-content]">
+<div class="">
 		
 <h2>Was wird der Energieausweis kosten?</h2>
 <hr class="mb-4 bg-primary h-[2px]">
 <p>Verbrauchsausweis Wohngebäude</p>
-<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p>
+<p>ab&nbsp;{PRICES.VerbrauchsausweisWohnen[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
 <hr>
 <p>Bedarfsausweis Wohngebäude</p>
-<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
+<p>ab&nbsp;{PRICES.BedarfsausweisWohnen[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
 <hr>
 <p>Verbrauchsausweis Gewerbe</p>
-<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
+<p>ab&nbsp;{PRICES.VerbrauchsausweisGewerbe[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
 <hr>
 <p>Bedarfsausweis Gewerbe</p>
-<p>ab 300€ inkl. MwSt.</p>
+<p>ab&nbsp;300€&nbsp;inkl.&nbsp;MwSt.</p>
 <hr>
 <p>GEG-Nachweis Wohngebäude</p>
-<p>ab 400€ inkl. MwSt.</p>
+<p>ab&nbsp;400€&nbsp;inkl.&nbsp;MwSt.</p>
 <hr>
 <p>GEG-Nachweis Gewerbe</p>
-<p>ab 450€ inkl. MwSt.</p>
+<p>ab&nbsp;450€ inkl.&nbsp;MwSt.</p>
 <hr class="mt-2">
 
 
diff --git a/src/components/design/sidebars/left/SidebarLeft.astro b/src/components/design/sidebars/left/SidebarLeft.astro
index 7b28b87d..7122a32c 100644
--- a/src/components/design/sidebars/left/SidebarLeft.astro
+++ b/src/components/design/sidebars/left/SidebarLeft.astro
@@ -4,7 +4,7 @@ import Preistabelle from "#sidebarCards/card-price-info.svelte";
 
 ---
 
-<div class="flex flex-col grow">
+<div class="">
 
 
 <Navigation client:load />
diff --git a/src/layouts/AusweisLayout.astro b/src/layouts/AusweisLayout.astro
index 48f9b142..84d7bbca 100644
--- a/src/layouts/AusweisLayout.astro
+++ b/src/layouts/AusweisLayout.astro
@@ -61,36 +61,37 @@ const { title } = Astro.props;
 	</head>
 
 	<body>
-		<container class="w-full max-w-[1920px]">
-		
+			
 		<Header />
-
+	
 		<main
 			class="w-full p-0 grid
-			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-1
-			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2
-			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
-			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
-			2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-5
+			xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
+			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
+			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
+			2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-6
 		">
 
 		<SidebarLeft />
-		
-		<article class="box grow rounded-tl-none">
+
+		<article class="box rounded-tl-none">
 		<slot />
 		</article>
-
+ 
 		</main>
 	
 		<Footer />
 		<NotificationWrapper client:load />
-	</container>
+
 	</body>
 </html>
 
-<style is:global lang="scss">
+<style is:global lang="postcss">
 	body {
 		min-height: 100vh;
+		width:100%;
 	}
 
 	article {
@@ -125,29 +126,16 @@ article p {
 	text-transform: none;
 }
 
-article {
-	@apply relative w-full rounded-lg border shadow-md px-6 py-8 bg-white;
-}
-
-	.button {
-		@apply px-8 py-2 bg-secondary 
-		hover:bg-gradient-to-br from-secondary to-secondary-grad 
-		rounded-lg text-white
-		hover:shadow-lg transition-all 
-		hover:no-underline 
-		hover:ring-2
-		hover:ring-primary
-		active:bg-blue-900 text-center;
 
 
-	}
+
 
 	h3 {
 		@apply text-xl font-medium mt-6 mb-4;
 	}
 
 	input, select, textarea, .input {
-		@apply py-1.5 px-2.5 rounded-lg w-full outline-none text-base text-slate-800 border bg-white;
+		@apply py-1.5 px-2.5 w-full outline-none text-base text-slate-800 border bg-white;
 	}
 
 	input:disabled, input:read-only, select:disabled {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 49c2d806..b51e46bc 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -31,32 +31,30 @@ const { title } = Astro.props;
 	</head>
 
 	<body>
-		<container class="w-full max-w-[1920px]">
-		
+			
 		<Header />
-
+	
 		<main
-			class="w-full p-0 grid
-			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
-			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
-			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
-			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
-			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
+		class="w-full p-0 grid
+		xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
+		sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
+		md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
+		lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
+		xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
+		2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
 		">
 
 		<SidebarLeft />
-		
-		<article class="box grow rounded-tl-none">
+
+		<article class="box rounded-tl-none">
 		<slot />
 		</article>
-		
-		<SidebarRight />
-
+ 
 		</main>
 	
 		<Footer />
 		<NotificationWrapper client:load />
-	</container>
+
 	</body>
 </html>
 
diff --git a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
index b3853ea4..70ddb4b0 100644
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -5,6 +5,7 @@
 	import HelpLabel from "#components/HelpLabel.svelte";
 	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
 	import Label from "#components/Label.svelte";
+	import BereichLabel from "#components/BereichLabel.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import ZipSearch from "#components/PlzSuche.svelte";
 	import moment from "moment";
@@ -134,25 +135,24 @@
 
 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 
-	<div id="formular-box">
-		
-		<div class="flex flex-row justify-between">
-			<button class="button" type="button" on:click={spaeterWeitermachen}
-				>Später Weitermachen</button
-			>
-			<div class="flex gap-4">
-				<Hilfe />
-				<button
-					on:click={automatischAusfüllen}
-					type="button"
-					class="button">Automatisch Ausfüllen</button
-				>
-			</div>
-		</div>
+<div id="formular-box" class="formular-boxen ring-0">
 
+<div class="w-full grid gap-x-4 gap-y-2
+grid-cols-1
+xs:grid-cols-2
+">
+			<div class="md:justify-self-start"><button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button></div>
+			<div class="md:justify-self-end"><Hilfe /></div>
+
+	</div>
+
+	<div class="mt-2"><button class="button hidden" on:click={automatischAusfüllen} type="button" >Automatisch Ausfüllen</button></div>
+		
 		<hr />
 
-		<Label>A - Prüfung der Ausweisart</Label>
+		<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
+
+		<div class="bereich-box">
 
 		<Ausweisart
 			bind:gebaeude
@@ -160,17 +160,26 @@
 			bind:ausweis
 		/>
 
-		<hr />
+</div>
+		<BereichLabel bereich="B">Eingabe der Gebäudeadresse -&nbsp;Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
 
-		<Label
-			>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
-			Dachgeschoss</Label
-		>
+		<div class="bereich-box">
+
+	<div class="w-full grid 
+	grid-cols-bereich-B gap-x-4
+	xl:grid-cols-bereich-B-xl xl:gap-x-8
+	2xl:grid-cols-bereich-B-2xl 2xl:gap-x-8
+	">
+
+	<div class="grid grid-cols-1 gap-x-4
+	md:grid-cols-2 md:gap-x-6 md:mb-6
+	xl:mb-0
+	2xl:grid-cols-3 2xl:gap-x-6 
+	">
 
-		<div class="GRB">
 			<!-- Strasse -->
-			<div class="form-group col-md-4">
-				<HelpLabel title="Straße, Hausnummer *">
+			<div class="md:col-span-2 2xl:col-span-1">
+				<HelpLabel title="* Straße, Hausnummer">
 					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
 					ein.
 				</HelpLabel>
@@ -189,7 +198,8 @@
 			</div>
 
 			<!-- PLZ -->
-			<div class="form-group col-md-4 PLZ">
+			<div class="PLZ">
+				<Label>* PLZ</Label>
 				<ZipSearch
 					bind:zip={gebaeude_aufnahme_allgemein.plz}
 					bind:city={gebaeude_aufnahme_allgemein.ort}
@@ -197,8 +207,9 @@
 				/>
 			</div>
 
-			<div class="form-group col-md-4">
-				<HelpLabel title="Ort *">
+			<!-- Ort -->
+			<div class="">
+				<HelpLabel title="* Ort">
 					Ort des Gebäudes wird automatisch ermittelt.
 				</HelpLabel>
 				<div>
@@ -211,9 +222,17 @@
 					/>
 				</div>
 			</div>
+
+		</div>
+
+		<div class="grid grid-cols-1 gap-x-4
+		md:grid-cols-2 md:gap-x-6
+		2xl:grid-cols-4 2xl:gap-x-6
+		">
+
 			<!-- Wohnfläche -->
-			<div class="form-group col-md-3">
-				<HelpLabel title="Wohnfläche m² *">
+			<div class="">
+				<HelpLabel title="* Wohnfläche m²">
 					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
@@ -234,9 +253,33 @@
 				</div>
 			</div>
 
+			<!-- Gesamtfläche -->
+			<div class="">
+				<HelpLabel title="&nbsp;&nbsp;Gesamtfläche m²">
+					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>
+					<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>
+			</div>			
+
 			<!-- Keller -->
-			<div class="form-group col-md-3">
-				<Label>Keller *</Label>
+			<div class="">
+				<Label>* Keller</Label>
 				<div>
 					<select
 						name="keller"
@@ -259,8 +302,8 @@
 			</div>
 
 			<!-- Dachgeschoss -->
-			<div class="form-group col-md-3">
-				<Label>Dachgeschoss *</Label>
+			<div class="">
+				<Label>* Dachgeschoss</Label>
 				<div>
 					<select
 						name="dachgeschoss"
@@ -282,31 +325,36 @@
 				</div>
 			</div>
 
-			<!-- Gesamtfläche -->
-			<div class="form-group col-md-3">
-				<HelpLabel title="Gesamtfläche m²">
-					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>
-					<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>
-			</div>
+
+	
 		</div>
 
+
+	</div>
+
+</div>
+		<BereichLabel bereich="C">Eingabe von 3 zusammenhängenden Verbrauchsjahren</BereichLabel>
+
+		<div class="bereich-box">
+
+			<div class="w-full grid 
+			grid-cols-bereich-C gap-x-4 gap-y-8
+			xl:grid-cols-bereich-C-xl xl:gap-x-8 xl:gap-y-0
+			2xl:grid-cols-bereich-C-2xl 2xl:gap-x-8
+			">
+
+			<Verbrauch
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/>
+		</div>
+</div>
+
+
+
+
+
 		<hr />
 
 	</div>
diff --git a/src/pages/test.astro b/src/pages/test.astro
new file mode 100644
index 00000000..f1bad694
--- /dev/null
+++ b/src/pages/test.astro
@@ -0,0 +1,6 @@
+<div class="grid grid-cols-formbutton-line-4">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    </div>
\ No newline at end of file
diff --git a/src/style/formular.css b/src/style/formular.css
index c82a345b..8aea3e6f 100644
--- a/src/style/formular.css
+++ b/src/style/formular.css
@@ -1,29 +1,26 @@
 
+.formular-boxen{@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg}
+#formular-box{@apply  bg-formular-box;}
+.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[8px] ring-2 ring-formular-rahmen rounded-md font-bold;}
+.formular-abschnitt2{@apply text-[1.25rem] pl-1;}
 
-.Phase_und_Skala{grid-area:phase_und_skala;}
-.Bereich_A{grid-area:a}
-.Bereich_B{grid-area:b}
-
-#formular-box{
-    @apply border-2 border-[#ffcc03] p-4 rounded-lg bg-formular-box;
-    /* background: linear-gradient(
+.bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
+.bereich-box {@apply w-full ring-0 ring-formular-rahmen py-4 px-4 bg-[rgba(252,_234,_187,_0.2)]
+	border-y-2 border-formular-rahmen 
+	sm:ring-2 sm:px-2 sm:rounded-lg sm:border-none
+	md:px-4
+	;
+	/*background: linear-gradient(
         135deg,
         rgba(252, 234, 187, 1) 0%,
-        rgba(253, 235, 189, 1) 52%,
+        rgba(253, 235, 189, 1) 50%,
         rgba(251, 223, 147, 1) 100%
+		
     ); */
 }
 
 
-.GRB {
-    @apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
-    /* background: linear-gradient(
-        135deg,
-        rgba(252, 234, 187, 1) 0%,
-        rgba(253, 235, 189, 1) 52%,
-        rgba(251, 223, 147, 1) 100%
-    ); */
-}
+
 
 /*
 	:global(input[type="number"]),
diff --git a/src/style/global.css b/src/style/global.css
index 7cb597f4..31fccb38 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -48,14 +48,25 @@
 
 
 body{
-	@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed  max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
+	@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
 }
 
 
+.button {
+	@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-md text-white text-nowrap
+	hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
+}
+
+input[type="text"], input[type="number"], input[type="password"], select{
+	@apply min-h-[38px] ring-1 ring-black/15 rounded-md}
+input[type="checkbox"]{@apply inline-block}
+radio{@apply accent-primary}
+
+
 /*ARTICLE*/
 
 article {
-	@apply px-6 py-6 w-full relative bg-white min-h-screen;
+	@apply w-full relative bg-white min-h-screen px-0 py-0;
 
 	hr {@apply mb-4 mt-4;}
 
@@ -71,8 +82,9 @@ article {
 
 /*BOXES*/
 .box{
-	@apply 	rounded-none
-			lg:rounded-lg lg:shadow-box lg:ring-1 lg:ring-gray-300
+	@apply 	rounded-lg
+
+			lg:shadow-box lg:ring-1 lg:ring-gray-300
 			xl:rounded-xl 
 			 
 }
@@ -103,6 +115,7 @@ article {
 	@apply 		!bg-primary !text-white cursor-pointer 
 }
 
+
 .nav-element:hover > .dropdown-content{ 
 	@apply 			lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
 }
@@ -129,8 +142,8 @@ article {
 li 		{@apply 	text-sm  bg-white flex
 					xl:text-lg}
 
-li a	{@apply 	w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
-					lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary		
+li a	{@apply 	w-full text-sm px-6 py-3 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
+					lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary		
 	   				xl:text-lg}
 
 li:not(:first-child)	{@apply		!border-gray-200 !border-t-[1px]}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index a7aff08f..06ceecdb 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -9,8 +9,10 @@ module.exports = {
 	theme: {
 		extend: {
 			screens: {
-				xs: '480px'
+				'2xs': '320px',
+				xs: '480px',
 			},
+
 			content: {
 				'nav-disc': ' ',
 			  },
@@ -30,7 +32,12 @@ module.exports = {
 				'base-content': '#1e2734',
 				'box-heading': '#3A4AB5',
 
+
 				"formular-box": "rgba(252,234,187,0.2)",
+				"formular-rahmen": "rgba(255,204,6,1)",
+
+				"bereich-box": "rgba(252,234,187,0.2)",
+				
 
 				"pdf-yellow-bright": "#f3cb00",
 				"pdf-yellow-light": "#fff6ca",
@@ -42,7 +49,27 @@ module.exports = {
 			  },
 			
 			gridTemplateColumns: {
-				// Simple 16 column grid
+				'formbutton-line': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
+				'formbutton-line-md': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
+				'formbutton-line-xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
+				'formbutton-line-2xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
+				
+				'bereich-A': '1fr',
+				'bereich-A-md': '2fr 2fr',
+				'bereich-A-xl': '2fr 2fr',
+				'bereich-A-2xl': '3fr 4fr',
+
+				'bereich-B': '1fr',
+				'bereich-B-lg': '2fr 2fr',
+				'bereich-B-xl': '2fr 2fr',
+				'bereich-B-2xl': '3fr 4fr',
+
+				'bereich-C': '1fr',
+				'bereich-C-lg': '2fr 2fr',
+				'bereich-C-xl': '2fr 2fr',
+				'bereich-C-2xl': '3fr 4fr',
+
+				
 				//'standard-sm': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
 				//'standard-md': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
 				//'standard-lg': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',