Dashboard Verbrauchsausweis

src/components/Dashboard/DashboardAusweis.svelte

@@ -24,6 +24,11 @@
 	export let rechnung: RechnungClient;
 	export let objekt: Objekt;
 	export let benutzer: BenutzerClient;
+	import { FileText } from "radix-svelte-icons";
+	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
+	import DashboardNotification from "./DashboardNotification.svelte";
+	import { notifications } from "#components/NotificationProvider/shared.js";
+	import { Bell } from "radix-svelte-icons";
 	const progress = ausweis.ausgestellt ? 100 : ausweis.bestellt ? 66 : 33;
 
 	const ausweisart = getAusweisartFromId(ausweis.id);
@@ -405,11 +410,11 @@
 			</div>
 			{#if ausweis.bestellt}
 			{#if ausweis.ausweistyp === Enums.AusweisTyp.Beratung || ausweis.ausweistyp === Enums.AusweisTyp.BeratungXL}
-			<p class="text-base-content">Sie haben Hilfe zu diesem Ausweis angefordert. Sie werden <b>innerhalb der nächsten 48 Stunden</b> über die hinterlegte Telefonnummer vom IB Cornelsen kontaktiert.</p>
+			<p class="text-sm">Sie haben Hilfe zu diesem Ausweis angefordert. Sie werden <span class="font-bold">innerhalb der nächsten 48 Stunden</span> über die hinterlegte Telefonnummer vom IB Cornelsen kontaktiert.</p>
 			{:else if ausweis.ausweistyp === Enums.AusweisTyp.Offline || ausweis.ausweistyp === Enums.AusweisTyp.OfflineXL}
-			<p class="text-base-content">Sie haben die offline Variant zu diesem Ausweis angefordert. Bitte <b>übermitteln Sie uns die letzten drei Jahre der Energieabrechnungen</b> Ihres Energieversorgers.</p>
+			<p class="text-sm">Sie haben die offline Variant zu diesem Ausweis angefordert. Bitte <span class="font-bold">übermitteln Sie uns die letzten drei Jahre der Energieabrechnungen</span> Ihres Energieversorgers.</p>
 			{:else if !ausweis.ausgestellt}
-			<p class="text-base-content">Der Ausweis wurde von Ihnen freigegeben und befindet sich <b>in Prüfung durch IB Cornelsen</b></p>
+			<p class="text-sm">Der Ausweis wurde von Ihnen freigegeben und befindet sich <span class="font-bold">in Prüfung durch IB Cornelsen</span></p>
 			{/if}
 		{/if}
 	</div>
@@ -418,28 +423,90 @@
 <div class="relative bg-base-200 border border-base-300 rounded-lg p-4 mr-4">
 	<div class="card-body">
 		<div class="flex flex-row flex-wrap items-center gap-2">
-			<div class="text-lg font-semibold">Zusammenfassung</div>
+			
-			<div class="text-lg">
+				<div class="text-lg font-semibold">{aufnahme.gebaeudetyp} 
-				Ausstellung für {aufnahme.gebaeudetyp} ({aufnahme.baujahr_gebaeude}) mit {aufnahme.einheiten} Wohneinheiten und {aufnahme.flaeche} m² Wohnfläche 
+					{#if (aufnahme.einheiten > 0 && aufnahme.einheiten !== null)}
-				sowie {aufnahme.nutzflaeche} m² energetische Nutzfläche. Als Ausstellgrund wurde {ausweis.ausstellgrund} angegeben. 
+					mit {aufnahme.einheiten} Wohneinheiten
+					{/if}
+				</div>
+			
+			<div class="text-sm">
+				<span class="font-bold">Gebäude (Bj {aufnahme.baujahr_gebaeude})</span> mit 
+				{#if aufnahme.flaeche > 0 && aufnahme.flaeche !== null}
+				{aufnahme.flaeche} m² Wohnfläche
+				sowie 
+				{/if}
+				{aufnahme.nutzflaeche} m² energetische Nutzfläche. Als Ausstellgrund wurde {ausweis.ausstellgrund} angegeben. 
 				{aufnahme.gebaeudeteil === "Wohnen" 
 					? "Die eingegebenen Daten beziehen sich auf den Wohnteil eines gemischt genutzten Gebäudes." 
 					: "Die eingegebenen Daten beziehen sich auf das gesamte Gebäude."} 
-				{aufnahme.saniert ? aufnahme.saniert : "Das Gebäude ist in unsaniertem Zustand."}
+				{aufnahme.saniert ? "Das Gebäude ist in unsaniertem Zustand." : "Das Gebäude ist in saniertem Zustand."}
 			</div>
-			<div class="text-lg">
+			{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
-				Verbrauch der Heizung ({aufnahme.baujahr_heizung}) mit Energieträger {ausweis.brennstoff_1} in {ausweis.einheit_1} vom<br>
+			<div class="text-sm">
-				{moment(ausweis.startdatum).format("DD.MM.YYYY")} - {moment(ausweis.startdatum).add("3", "years").format("DD.MM.YYYY")}:<br>
+				<span class="font-bold">Gebäudestrom</span> der Jahre vom
-				{ausweis.verbrauch_1}, {ausweis.verbrauch_2}, {ausweis.verbrauch_3}<br>
+				{moment(ausweis.startdatum).format("MM.YYYY")} bis {moment(ausweis.startdatum).add("3", "years").format("MM.YYYY")} beträgt 
-				Zusätzliche Heizquelle {ausweis.brennstoff_2} in {ausweis.einheit_2}:<br>
+				{ausweis.strom_1} kWh, {ausweis.strom_2} kWh und {ausweis.strom_3} kWh. 
-				{ausweis.verbrauch_4}, {ausweis.verbrauch_5}, {ausweis.verbrauch_6}<br>
+				Im Stromverbrauch enthalten sind 
-				{ausweis.warmwasser_enthalten ? "Warmwasser enthalten" : "Warmwasser nicht enthalten"}, {ausweis.anteil_warmwasser}<br>
+				{ausweis.stromverbrauch_enthealt_heizung ? "Heizung, " : ""}
-				Alternative Energieversorgung: {aufnahme.alternative_heizung ? "Heizung" : ""}, {aufnahme.alternative_warmwasser ? "Warmwasser" : ""}
+				{ausweis.stromverbrauch_enthaelt_warmwasser ? "Warmwasser, " : ""}
-				 {aufnahme.alternative_lueftung ? "Lüftung" : ""} {aufnahme.alternative_kuehlung ? "Kühlung" : ""}<br>
+				{ausweis.stromverbrauch_enthaelt_lueftung ? "Lüftung, " : ""}
-				Leerstand {aufnahme.leerstand}%, {aufnahme.lueftung}, Kühlung {aufnahme.kuehlung}<br>
+				{ausweis.stromverbrauch_enthaelt_beleuchtung ? "Beleuchtung, " : ""}
+				{ausweis.stromverbrauch_enthaelt_kuehlung ? "Kühlung, " : ""}
+				{#if ausweis.stromverbrauch_sonstig !== null}
+				sowie {ausweis.stromverbrauch_enthaelt_sonstige}.
+				{/if}
 			</div>
-			<div class="text-lg">
+			{/if}	
-				Angaben zur Heizunganlage<br>
+				<div class="text-sm">
+					<span class="font-bold">Heizung (Bj {aufnahme.baujahr_heizung})</span> wird mit {ausweis.brennstoff_1} betrieben. Die Verbräuche vom
+					{moment(ausweis.startdatum).format("MM.YYYY")} bis {moment(ausweis.startdatum).add("3", "years").format("MM.YYYY")} betragen 
+					{ausweis.verbrauch_1} {ausweis.einheit_1}, {ausweis.verbrauch_2} {ausweis.einheit_1} und {ausweis.verbrauch_3} {ausweis.einheit_1}.
+					{#if ausweis.zusaetzliche_heizquelle} - 
+					Eine weitere Heizung wird mit {ausweis.brennstoff_2} betrieben mit den Verbräuchen {ausweis.verbrauch_4} {ausweis.einheit_2}, {ausweis.verbrauch_5} 
+					{ausweis.einheit_2} und {ausweis.verbrauch_6} {ausweis.einheit_2}.
+					{/if}
+				</div>
+			<div class="text-sm">	
+				{#if ausweis.anteil_warmwasser_1 !== null && ausweis.anteil_warmwasser_1 > 0}
+					{#if aufnahme.solarsystem_warmwasser}
+						Da ein Solarsystem für Warmwasser vorhanden ist, 
+						wurde ein Warmwasseranteil von {ausweis.anteil_warmwasser_1 * 0.6}% berücksichtigt.
+					{:else}
+						Es wurde ein Warmwasseranteil von {ausweis.anteil_warmwasser_1}% berücksichtigt.
+					{/if}
+				{:else}
+					{#if aufnahme.solarsystem_warmwasser}
+						Da ein Solarsystem für Warmwasser vorhanden ist, wurde ein reduzierter Warmwasserzuschlag von 12 kWh/m²a angesetzt.
+					{:else}
+						Es wurde ein Warmwasserzuschlag von 20 kWh/m²a angesetzt.
+					{/if}	
+				{/if}
+				{#if !ausweis.alternative_heizung && !ausweis.alternative_warmwasser && !ausweis.alternative_lueftung && !ausweis.alternative_kuehlung}
+					Alternative Energieversorgung wird nicht verwendet
+				{:else}
+					Alternative Energieversorgung wird verwendet für {ausweis.alternative_heizung ? "Heizung, " : ""}{ausweis.alternative_warmwasser ? "Warmwasser, " : ""}{ausweis.alternative_lueftung ? "Lüftung, " : ""}{ausweis.alternative_kuehlung ? "Kühlung, " : ""}
+				{/if}. 
+				Der Leerstand beträgt {aufnahme.leerstand}%. Das Gebäude verfügt über eine 
+				{#if aufnahme.lueftung === Enums.Lueftungskonzept.Fensterlueftung}
+					Fensterlüftung
+				{:else if aufnahme.lueftung === Enums.Lueftungskonzept.Schachtlueftung}
+					Schachtlüftung
+				{:else if aufnahme.lueftung === Enums.Lueftungskonzept.LueftungsanlageMitWaermerueckgewinnung}
+					Lüftungsanlage mit Wärmerückgewinnung
+				{:else if aufnahme.lueftung === Enums.Lueftungskonzept.LueftungsanlageOhneWaermerueckgewinnung}
+					Lüftungsanlage ohne Wärmerückgewinnung
+				{/if}
+				{#if ausweis.kuehlung_enthalten && ausweis.kuehlung_entahlten !== null}
+				und wird thermisch gekühlt.
+				{:else if aufnahme.kuehlung === "1" && aufnahme.kuhlung !== null}
+				und wird gekühlt.
+				{:else}
+				und wird nicht gekühlt.
+				{/if}
+			</div>
+			<div class="text-sm">
+				<span class="font-bold">Heizung: </span>
 				{aufnahme.zentralheizung ? "Zentral/Etagenheizung, " : ""} 
 				{aufnahme.einzelofen ? "Einzelofen, " : ""} 
 				{aufnahme.waermepumpe ? "Wärmepumpe, " : ""}
@@ -456,8 +523,8 @@
 				{aufnahme.raum_temperatur_regler ? "Raumtemperaturregler, " : ""} 
 				{aufnahme.zirkulation ? "Zirkulation, " : ""}
 			</div>
-			<div class="text-lg">
+			<div class="text-sm">
-				Angaben zu Fenster Dachfenster und Türen<br>
+				<span class="font-bold">Fenster: </span>
 				{aufnahme.isolier_verglasung ? "Fenster Isolierglas, " : ""} 
 				{aufnahme.dreifach_verglasung ? "Dreifachverglasung, " : ""} 
 				{aufnahme.doppel_verglasung ? "Doppelverglasung, " : ""} 
@@ -468,8 +535,8 @@
 				{aufnahme.tueren_dicht ? "Türen dicht, " : ""} 
 				{aufnahme.rolllaeden_kaesten_gedaemmt ? "Rollladenkästen gedämmt" : ""} 
 			</div>
-			<div class="text-lg">
+			<div class="text-sm">
-				Angaben zur Wärmedämmung<br>
+				<span class="font-bold">Dämmung: </span>
 				{aufnahme.dachgeschoss_gedaemmt ? "Dachgeschoss gedämmt, " : ""} 
 				{aufnahme.aussenwand_gedaemmt ? "Außenwand gedämmt, " : ""} 
 				{aufnahme.keller_decke_gedaemmt ? "Kellerdecke gedämmt, " : ""} 
@@ -479,27 +546,87 @@
 				{aufnahme.dachgeschoss_min_12cm_gedaemmt ? "Dachgeschoss min. 12cm gedämmt, " : ""} 
 				{aufnahme.aussenwand_min_12cm_gedaemmt ? "Außenwand min. 12cm gedämmt" : ""}
 			</div>
-		</div>					
+			<div class="text-xs space-y-1 p-2">
-	</div>
+				<span class="font-semibold">Hiermit bestätige ich {benutzer.vorname} {benutzer.name} als Besteller folgende Angaben:</span><br>
+				{#if ausweis.pruefpunkt_heizungsalter}
+				<div>Das Heizungsalter ist jünger als 3 Jahre. Es betrifft einen Heizungstausch ohne energetische Verbesserung.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_verbrauch_niedrig}
+				<div>Ich habe die Verbrauchsangaben kontrolliert. Der niedrige Energiekennwert ist korrekt.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_verbrauch_hoch}
+				<div>Ich habe die Verbrauchsangaben kontrolliert. Der hohe Energiekennwert ist korrekt.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_verbrauch_null}
+				<div>Die eingegebenen Heizverbräuche sind korrekt und alle 3 Felder wurden vollständig eingegeben.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_verbrauch_abweichung}
+				<div>Die eingegebenen Heizverbräuche sind korrekt und die Abweichung lässt sich begründen.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_wohnflaeche_einheiten}
+				<div>Die Angabe der Wohnfläche ist korrekt und bezieht sich auf das gesamte Gebäude.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_strom_null}
+				<div>Die eingegebenen Stromverbräuche sind korrekt. Alle 3 Felder wurden vollständig eingegeben.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_strom_abweichung}
+				<div>Die eingegebenen Stromverbräuche sind korrekt und die Abweichung lässt sich begründen.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_heizungsanlage}
+				<div>Das Baujahr der Heizungsanlage ist kleiner als das Baujahr des Gebäudes und begründet.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_anteil_warmwasser}
+				<div>Ich habe den Warmwasseranteil nochmal überprüft. Dieser ist korrekt und begründet.</div>
+				{/if}
+				{#if ausweis.pruefpunkt_wohnflaeche}
+				<div>Ich habe die Wohnfläche nochmal überprüft und bestätige die Richtigkeit. Es handelt sich lediglich um die Wohnfläche innerhalb des Gebäudes.</div>
+				{/if}
+				<div>Ich habe die AGB und DSGVO im <a href="/impressum#agb" target="_blank" rel="noopener noreferrer">Impressum</a> gelesen und akzeptiert. Ich bestätige die Richtigkeit der Eingabe.</div>
+			</div>
+		</div>
+	</div>					
 </div>
 
 <div class="relative bg-base-200 border border-base-300 rounded-lg p-4">
 	<div class="card-body">
-		<div>
+		<div class="flex flex-row flex-wrap items-center gap-2">
-			<p class="text-lg text-gray-700 mb-1">
+			<div class="text-sm">
-				<strong>Besteller:</strong> {benutzer.vorname} {benutzer.name}
+				<span class="font-bold">Rechnungsadresse</span><br>
-			  </p>
+				IB Cornelsen, Katendeich 5, 21035 Hamburg
-			  <p class="text-lg text-gray-700">
+			</div>
-				<strong>Telefon:</strong> {rechnung.telefon}
+			<div class="text-sm mb-2">
-			  </p>
+				<span class="font-bold">Versandadresse</span><br>
-			  <p class="text-lg text-gray-700">
+				IB Cornelsen, Katendeich 5, 21035 Hamburg
-				<strong>E-Mail:</strong> {benutzer.email}
+			</div>
-			  </p>
+			<div class="text-lg font-semibold">Unterlagen</div>
+			<div class="text-sm">
+			<a href="" target="_blank" class="text-black flex flex-row items-center gap-2 bg-base-200 rounded-lg p-1"><FileText size={24}></FileText>Grundrissplan_O....pdf</a>
+			<a href="" target="_blank" class="text-black flex flex-row items-center gap-2 bg-base-200 rounded-lg p-1"><FileText size={24}></FileText>Grundrissplan_OG....pdf</a>
+			<a href="" target="_blank" class="text-black flex flex-row items-center gap-2 bg-base-200 rounded-lg p-1"><FileText size={24}></FileText>Grundrissplan_OG....pdf</a>
+			</div>
 		</div>
-		<hr>
+
-		<div>
+		<div class="dropdown dropdown-top items-end absolute bottom-4 right-4 z-50">
-			<p><b>Unterlagen</b><br></p>
+			<div class="indicator">
+				{#if Object.keys($notifications).length > 0}
+					<span class="indicator-item badge badge-accent text-xs"
+						>{Object.keys($notifications).length}</span
+					>
+				{/if}
+				<button
+					tabindex="0"
+					class="hover:bg-gray-200 p-3 rounded-lg"
+				>
+					<Bell size={24} />
+				</button>
+			</div>
+			<ul
+				class="dropdown-content mb-2 border border-base-300 z-10 menu py-4 px-0 bg-base-200 rounded-box w-80"
+			>
+				<NotificationProvider component={DashboardNotification} />
+			</ul>
 		</div>
+
 	</div>
 </div>
 

src/components/Dashboard/DashboardSidebar.svelte

@@ -51,21 +51,109 @@
 
 		Besteller
 
-			<div class="button-tab">
+			<div class="flex flex-row mb-4">
-				<img src="../../images/profile-placeholder.svg" alt="profile icon" width="30" height="30" />
+				<div class="item-center mr-4">
-				{benutzer.vorname} {benutzer.name}
+					<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
-			</div>
+				</div>
-
+				<div>
-		Mitwirkende
+					<div>
-
+						MIchael Makler
-			<div class="button-tab">
+					</div>
-				<img src="../../images/profile-placeholder.svg" alt="profile icon" width="30" height="30" />
+					<div class="text-xs text-gray-500">
-				{benutzer.vorname} {benutzer.name}
+						Eigentümer oder im Auftrag
+					</div>
+					<div class="text-xs text-gray-500">
+						<!-- Soll für den Aussteller sichtbar sein -->
+						Telefon 0176 1234567
+					</div>
+				</div>
 			</div>
 
 		<hr class="border-gray-600" />
 
+		Mitwirkende
 
+		<div class="flex flex-row mb-1">
+			<div class="item-center mr-4">
+				<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
+			</div>
+			<div>
+				<div>
+					Ernie Energieberater
+				</div>
+				<div class="text-xs text-gray-500">
+					Energieberater
+				</div>
+			</div>
+		</div>
+
+		<div class="flex flex-row mb-1">
+			<div class="item-center mr-4">
+				<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
+			</div>
+			<div>
+				<div>
+					Peter Planer
+				</div>
+				<div class="text-xs text-gray-500">
+					Architekt
+				</div>
+			</div>
+		</div>
+
+		<div class="flex flex-row mb-1">
+			<div class="item-center mr-4">
+				<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
+			</div>
+			<div>
+				<div>
+					Hans Meier
+				</div>
+				<div class="text-xs text-gray-500">
+					Eigentümer
+				</div>
+			</div>
+		</div>
+
+		<hr class="border-gray-600" />
+
+		Experten in der Nähe
+
+		<div class="flex flex-row mb-1">
+			<div class="item-center mr-4">
+				<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
+			</div>
+			<div>
+				<div>
+					Thorsten Maas
+				</div>
+				<div class="text-xs text-gray-500">
+					Energieberater
+				</div>
+			</div>
+		</div>
+
+		<div class="flex flex-row mb-1">
+			<div class="item-center mr-4">
+				<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
+			</div>
+			<div>
+				<div>
+					Herbert Holm
+				</div>
+				<div class="text-xs text-gray-500">
+					Gutachter
+				</div>
+			</div>
+		</div>
+
+		<hr class="border-gray-600" />
+
+		<div class="flex justify-end mt-2 mb-2">
+			<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center">
+				Einladen
+			</button>
+		</div>
 
 		{#if benutzer.rolle === "ADMIN"}
 			<li>
@@ -101,30 +189,8 @@
 			</li>
 		{/if}
 	</div>
-	<div class="mt-10 flex flex-col gap-4 px-8">
+	<div class="items-end bottom-4 right-4 z-50 mt-4">
-		<div class="flex flex-row justify-between items-center">
+		<div class="flex flex-row justify-end items-end">
-			<ThemeController bind:lightTheme></ThemeController>
-			<div class="dropdown dropdown-top">
-				<div class="indicator">
-					{#if Object.keys($notifications).length > 0}
-						<span class="indicator-item badge badge-accent text-xs"
-							>{Object.keys($notifications).length}</span
-						>
-					{/if}
-					<button
-						tabindex="0"
-						class="hover:bg-gray-200 p-3 rounded-lg"
-					>
-						<Bell size={24} />
-					</button>
-				</div>
-				<ul
-					class="dropdown-content mb-2 border border-base-300 z-10 menu py-4 px-0 bg-base-200 rounded-box w-80"
-				>
-					<NotificationProvider component={DashboardNotification} />
-				</ul>
-			</div>
-
 			<a
 				href="/dashboard/einstellungen"
 				class="hover:bg-gray-200 p-3 rounded-lg"
@@ -133,12 +199,6 @@
 			</a>
 		</div>
 	</div>
-	<div class="divider px-8"></div>
-	<a
-		href="/dashboard/einstellungen"
-		class="hover:bg-gray-200 no-animation focus:shadow-none justify-start py-4 h-auto px-8 rounded-none w-full flex flex-row gap-4"
-	>
-	</a>
 </aside>
 
 <style>

src/modules/Dashboard/DashboardAufnahmeModule.svelte

@@ -32,8 +32,8 @@
 			Ausweis erstellen +
 		</button>
 		{#if dropdownOpen}
-			<div class="absolute top-15 left-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-[9999]" on:click|stopPropagation on:keydown|stopPropagation on:keyup|stopPropagation>
+			<div class="absolute top-15 left-0 mt-2 w-50 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-[9999]" on:click|stopPropagation on:keydown|stopPropagation on:keyup|stopPropagation>
-				<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+				<div class="py-1 w-full" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
 					<a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?aufnahme={aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Wohnen Erstellen</a>
 					<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?aufnahme={aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Gewerbe Erstellen</a>
 					<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude?aufnahme={aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis<br>Wohnen Erstellen</a>
@@ -78,7 +78,7 @@
 	}
 </style>
 
-<div class="my-4 grid grid-cols-[1fr] md:grid-cols-[1fr,2fr,1fr] lg:grid-cols-[1fr,2fr,1fr]">
+<div class="my-4 grid grid-cols-[1fr] md:grid-cols-[7fr,16fr,5fr] lg:grid-cols-[7fr,16fr,5fr]">
 	{#if aufnahme.verbrauchsausweise_wohnen.length > 0}
 		{#each [aufnahme.verbrauchsausweise_wohnen.sort((a, b) => new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime())[0]] as ausweis}
 			<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>