Merge remote-tracking branch 'origin/main'

src/components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte

@@ -19,86 +19,49 @@
 	const twoBoxReason 						= ["Vermietung/Verkauf", "Aushangpflicht", "Sonstiges"];
 	const gewerbeHouse 						= ["Gewerbegebäude", "Mischgebäude"];
 
-	
+$: ausnahme = 
-$: {
+    leerStand === "mehr als 30" || 
+    heizungsAlter === "< 3" || 
+    (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert");
 
-ausnahme 	= ((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
+$: isTwoBoxReason = twoBoxReason.includes(anlass);
-            ? true 
-            : false;
 
-oneBOX 		= ((ausnahme === true) && (gebaeudetyp !== "Gewerbegebäude") && (gebaeudetyp !== "Mischgebäude")) ||
+$: isGewerbe = gewerbeHouse.includes(gebaeudetyp);
-              (!twoBoxReason.includes(anlass) && (gebaeudetyp !== "Mischgebäude")) ||
-              ((gebaeudetyp === "Gewerbegebäude") && (leerStand === "mehr als 30"))
-			? true 
-            : false;
-     
-threeBOX 	= ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass) && (leerStand != "mehr als 30")))
-            ? true 
-            : false;
-			
-}
 
+$: oneBOX = 
+    (ausnahme && !isGewerbe) ||
+    (!isTwoBoxReason && gebaeudetyp !== "Mischgebäude") ||
+    (gebaeudetyp === "Gewerbegebäude" && leerStand === "mehr als 30");
 
+$: threeBOX = 
+    (ausnahme && gebaeudetyp === "Mischgebäude" && isTwoBoxReason && leerStand !== "mehr als 30");
 
-function getBoxes(){
-if(twoBoxReason.includes(anlass)){
-document.getElementById('firstrow')?.classList.remove('sm:grid-cols-2');
-document.getElementById('firstrow')?.classList.add('sm:grid-cols-3');
-}else{
-document.getElementById('firstrow')?.classList.remove('sm:grid-cols-3');
-document.getElementById('firstrow')?.classList.add('sm:grid-cols-2');
-}
-}
-
-function getCount(){
-if(oneBOX===true){
-	console.log('ONE');
-	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
-	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
-	document.getElementById('thirdrow')?.classList.add('grid-cols-1');
-}
-else if(threeBOX===true){
-	console.log('THREE');
-	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
-	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
-
-	document.getElementById('thirdrow')?.classList.add('md:grid-cols-6');
-}
-else{
-	console.log('FOUR');
-	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
-	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
-	document.getElementById('thirdrow')?.classList.add('md:grid-cols-4');
-}
-
-//console.log(!twoBoxReason.includes(anlass)&& (gebaeudetyp != "Mischgebäude"));
-
-
-}
 
 </script>
 
 
+<div id="IBC_app">
 
-<div id="OEA_widget">
 	<input id="recode" type="hidden" value="widgetvorlage" />
 
 	<div id="OEA_input">
 
 
-		<div id="firstrow" class="firstrow">
+		<div id="firstrow" class="firstrow"
+  		class:sm:grid-cols-3={isTwoBoxReason}
+  		class:sm:grid-cols-2={!isTwoBoxReason}>
+
+
 
 			<div class="auswahl">
 				<div class="titel">Anlass</div>
 				<select
                     id="anlass"
 					class="selectfeld"
-					bind:value={anlass} on:change={getBoxes} on:change={getCount}
+					bind:value={anlass}>
 				>
 					<option selected disabled>bitte auswählen</option>
-					<option value="Vermietung/Verkauf"
+					<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
-						>Vermietung/Verkauf</option
-					>
 					<option value="Modernisierung">Modernisierung</option>
 					<option value="Neubau">Neubau</option>
 					<option value="Erweiterung">Erweiterung</option>
@@ -111,7 +74,7 @@ else{
 				<div class="titel">Gebäudetyp</div>
 				<select 
 					class="selectfeld"
-					bind:value={gebaeudetyp} on:change={getBoxes} on:change={getCount}
+					bind:value={gebaeudetyp}>
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="Einfamilienhaus">Einfamilienhaus</option>
@@ -122,12 +85,12 @@ else{
 				</select>
 			</div>
 
-			{#if twoBoxReason.includes(anlass)}
+			{#if isTwoBoxReason}
 			<div class="auswahl">
 				<div class="titel">Sanierungsstand</div>
 				<select 
 					class="selectfeld"	
-					bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
+					bind:value={sanierungsstatus}>
 					
 				>
 					<option selected disabled>bitte auswählen</option>
@@ -139,14 +102,14 @@ else{
 
 		</div>
 
-		{#if twoBoxReason.includes(anlass)}
+		{#if isTwoBoxReason}
 		<div id="secondrow" class="secondrow">	
 			<div class="auswahl">
 				<div class="titel">Baujahr</div>
 				<select
 					id="baujahr"
 					class="selectfeld"
-					bind:value={baujahr} on:change={getCount}
+					bind:value={baujahr} 
 					
 				>
 					<option selected disabled>bitte auswählen</option>
@@ -159,7 +122,7 @@ else{
 					<div class="titel">Heizungsalter</div>
 					<select
 						class="selectfeld"
-						bind:value={heizungsAlter} on:change={getCount}
+						bind:value={heizungsAlter} 
 					>
 						<option selected disabled>bitte auswählen</option>
 						<option value="< 3">jünger als 3 Jahre</option>
@@ -171,7 +134,7 @@ else{
 				<div class="titel">Wohneinheiten</div>
 				<select
 					class="selectfeld"
-					bind:value={einheiten} on:change={getCount}
+					bind:value={einheiten} 
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="bis 4 Wohneinheiten"
@@ -187,7 +150,7 @@ else{
 				<div class="titel">Leerstand</div>
 				<select
 					class="selectfeld ausnahmen"
-					bind:value={leerStand} on:change={getCount}
+					bind:value={leerStand} 
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="bis 30">bis 30%</option>
@@ -197,17 +160,20 @@ else{
 		</div>
 		{/if}
 
-				<div id="thirdrow" class="thirdrow">
+		<div id="thirdrow" class="thirdrow"
-			{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
+ 		 class:grid-cols-1={oneBOX}
+ 		 class:md:grid-cols-6={threeBOX}
+ 		 class:md:grid-cols-4={!oneBOX && !threeBOX}
+		 >
+
+
+			{#if isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
+
 
-				<div
-					class="produktbox"
-					transition:fade={{ duration: 0 }}
-				>
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Wohngebäude"
 					price={PRICES.VerbrauchsausweisWohnen[Enums.AusweisTyp.Standard]}
-					src="/images/immowelt/wohngebaeude_immowelt.svg"
+					src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
 					alt="Wohnhaus Verbrauchsausweis"
 					variant="einfach"
 					empfehlung="nein"
@@ -219,21 +185,18 @@ else{
 						["Ungenau durch individuelles Heizverhalten.", false],
 						["Wird nicht immer bei den Banken akzeptiert.", false]
 					]}
-					href_buy="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
+					href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
-					href_overview="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
+					href_overview="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
 				></WidgetCardTemplate>
-				</div>
+			
 			{/if}
 
-			{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
+			{#if isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude")}
-				<div
+
-					class="produktbox"
-					transition:fade={{ duration: 0 }}
-				>
 				<WidgetCardTemplate
 					name="Bedarfsausweis Wohngebäude"
 					price={PRICES.BedarfsausweisWohnen[Enums.AusweisTyp.Standard]}
-					src="/images/immowelt/wohngebaeude_immowelt.svg"
+					src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
 					alt="Wohnhaus Bedarfsausweis"
 					variant="fundiert"
 					empfehlung="ja"
@@ -245,21 +208,18 @@ else{
 						["Kann als Grundlage für den ISFP dienen.", true],
 						["Objektivere Berechnungsmethode nach DIN 18599.", true],
 					]}
-					href_buy="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
+					href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
-					href_overview="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht/"
+					href_overview="https://online-energieausweis.org/immowelt/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht"
 				></WidgetCardTemplate>
-				</div>
+	
 			{/if}
 
-			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (leerStand != "mehr als 30")}
+			{#if isTwoBoxReason && isGewerbe && (leerStand != "mehr als 30")}
-				<div
+
-					class="produktbox"
-					transition:fade={{ duration: 0 }}
-				>
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Gewerbegebäude"
 					price={PRICES.VerbrauchsausweisGewerbe[Enums.AusweisTyp.Standard]}
-					src="/images/immowelt/gewerbegebaeude_immowelt.svg"
+					src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
 					alt="Gewerbe Verbrauchsausweis"
 					variant="einfach"
 					empfehlung="nein"
@@ -272,22 +232,18 @@ else{
 						["Wird nicht immer bei den Banken akzeptiert.", false],
                         ["Ungenau durch individuelles Heizverhalten", false],
 					]}
-					href_buy="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
+					href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
-					href_overview="/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
+					href_overview="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
 				></WidgetCardTemplate>
-				
+	
-				</div>
 			{/if}
 
-			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
+			{#if isTwoBoxReason && isGewerbe}
-				<div
+
-					class="produktbox"
-					transition:fade={{ duration: 0 }}
-				>
 				<WidgetCardTemplate
 					name="Bedarfsausweis Gewerbegebäude"
 					price={PRICES.BedarfsausweisGewerbe[Enums.AusweisTyp.Standard]}
-					src="/images/immowelt/gewerbegebaeude_immowelt.svg"
+					src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
 					alt="Gewerbe Bedarfsausweis"
 					variant="fundiert"
 					empfehlung="ja"
@@ -300,22 +256,19 @@ else{
 						["Objektiveres, besser vergleichbares Ergebnis.", true],
                         ["Zulässig bei Leerstand oder fehlenden Verbräuchen", true],
 					]}
-					href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+					href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/"
-					href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
+					href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/produkt-uebersicht/"
 				></WidgetCardTemplate>
-				</div>
+			
 			{/if}
 
-			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
+			{#if (anlass != "bitte auswählen") && !isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude")}
-			<div
+
-				class="produktbox"
-				transition:fade={{ duration: 0 }}
-			>
 			<WidgetCardTemplate
 				name="GEG-Nachweis Wohngebäude"
 				price={PRICES.GEGNachweisWohnen[Enums.AusweisTyp.Standard]}
-				src="/images/immowelt/wohngebaeude_immowelt.svg"
+				src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
-				alt="Gewerbe Bedarfsausweis"
+				alt="GEG-Nachweis-Wohnen"
 				variant="Bauvorlage"
 				empfehlung="ja"
 				cta="Angebot anfragen"
@@ -327,24 +280,20 @@ else{
 					["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
 					["Zonierung und Erstellung eines 3D Gebäudemodells.", true],
 				]}
-				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-wohnen-anfragen/"
-				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/" 
+				href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-wohnen-anfragen/produkt-uebersicht/" 
 
 			></WidgetCardTemplate>
 			
-			</div>
 			{/if}
 
-			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
+			{#if (anlass != "bitte auswählen") && !isTwoBoxReason && isGewerbe}
-			<div
+
-				class="produktbox"
-				transition:fade={{ duration: 0 }}
-			>
 			<WidgetCardTemplate
 				name="GEG-Nachweis Gewerbegebäude"
 				price={PRICES.GEGNachweisGewerbe[Enums.AusweisTyp.Standard]}
-				src="/images/immowelt/gewerbegebaeude_immowelt.svg"
+				src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
-				alt="Gewerbe Bedarfsausweis"
+				alt="GEG-Nachweis-Gewerbe"
 				variant="Bauvorlage"
 				empfehlung="ja"
 				cta="Angebot anfragen"
@@ -356,28 +305,23 @@ else{
 					["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
 					["Mehrzonenmodell inkl. Erstellung eines 3D Gebäudemodells.", true],
 				]}
-				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-gewerbe-anfragen/"
-				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
+				href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-gewerbe-anfragen/produkt-uebersicht/"
 			></WidgetCardTemplate>
-			
+
-			</div>
 			{/if}
 
 		</div>
 	</div>
 </div>
 
+
+
 <style lang="postcss">
 
-  @font-face {
+#IBC_app {
-	font-family: 'Antique Olive Compact bold';
-	font-weight: 700;
-	font-style: normal;
-	font-display:swap;
-	src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
-  }
 
-  @font-face {
+	@font-face {
     font-family: "immo Sans";
     src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
     src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
@@ -395,14 +339,21 @@ else{
     font-weight: 700;
 }
 
+	@font-face {
+	font-family: 'Antique Olive Compact bold';
+	font-weight: 700;
+	font-style: normal;
+	font-display:swap;
+	src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
+  }
 
-*{font-family: "immo Sans";}
-select option{font-family: "immo Sans",sans-serif;}
-
-#OEA_widget {
 	@apply min-w-[320px] max-w-[1920px] p-[4px]
 	sm:p-[10px];
 
+	font-family: "immo Sans";
+	select option{
+		font-family: "immo Sans",sans-serif;}
+
 .firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
 	sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;
 
@@ -426,16 +377,10 @@ select option{font-family: "immo Sans",sans-serif;}
 .thirdrow{@apply grid grid-cols-1 gap-x-4 gap-y-2 col-start-1
 	md:grid-cols-4 md:gap-x-4 md:gap-y-2;
 
-.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg
-	px-2 py-2 mt-5;
-	box-shadow:2px 2px 8px rgba(0,0,0,0.25)
 
 
 }
 
-}
-
-
 }
 	
 </style>

src/components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { fade } from "svelte/transition";
 	export let price: number;
 	export let name: string;
 	export let variant: string;
@@ -11,9 +12,13 @@
 	export let cta: string;
 </script>
 
+<div
+class="produktbox"
+transition:fade={{ duration: 0 }}
+>
 
-{#if empfehlung=="ja"}
+{#if empfehlung === "ja"}
-<div class="empfehlung">Empfehlung</div>
+<div class="empfehlung" aria-label="Empfohlenes Produkt">Empfehlung</div>
 {/if}
 		<h2 class="titel sm:mb-2">{name}</h2>
 
@@ -35,13 +40,19 @@
 
 			<div class="sumCent buttoncols">	
 				<a
-					href="{href_buy}"
+					href={href_buy}
-					class="buttoncol">{cta}</a
+					class="buttoncol"
-				>
+					aria-label="Jetzt {name} kaufen"
+					target="_blank"
+					>{cta}
+				</a>
 	
 				<a
-					href="{href_overview}"
+					href={href_overview}
-					class="buttoncol">Produkt-Übersicht</a
+					class="buttoncol"
+					aria-label="{name} Produkt-Übersicht"
+					target="_blank"
+					>Produkt-Übersicht</a
 				>
 	
 				</div>
@@ -50,19 +61,21 @@
 			
 				{#each services as [service, check]}
 				<div class="services">
-					<span>{@html service}</span>
+				<span>{@html service}</span>
-					<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
+				<span class={check ? "check" : "check-no"}>{check ? "✔" : "✘"}</span>
 				</div>
 				{/each}
 	
 			</div>
-
+	</div>	
 
 <style lang="postcss">
 
+.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg
+	px-2 py-2 mt-5;
+	box-shadow:2px 2px 8px rgba(0,0,0,0.25);
 
-
+	.sumCent{@apply justify-self-center col-span-2}
-.sumCent{@apply justify-self-center col-span-2}
 .sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
 .forServices{@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6}
 
@@ -75,12 +88,9 @@ md:grid-cols-2 md:w-[auto]}
 .buttoncol{@apply mt-2 md:mt-0 text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
 hover:bg-[#222222] hover:text-white}
 
-
 	.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-7 text-nowrap text-left;
 				font-family: "Antique Olive Compact bold";}
 
-
-
 	.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
 	.empfehlung{@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6}
 	.variante {
@@ -100,4 +110,6 @@ hover:bg-[#222222] hover:text-white}
 		@apply justify-self-end self-center font-bold text-red-700;
 	}
 
+}
+
 </style>