.

src/components/widgets/immowelt/WidgetCardTemplate.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	export let price: number;
+	export let name: string;
+	export let variant: string;
+	export let services: [string, boolean][];
+	export let href_buy: string;
+	export let href_overview: string;
+	export let src: string;
+	export let alt: string;
+	export let empfehlung: string;
+	export let cta: string;
+</script>
+
+<div
+class="produktbox"
+transition:fade={{ duration: 0 }}
+>
+
+{#if empfehlung === "ja"}
+<div class="empfehlung" aria-label="Empfohlenes Produkt">Empfehlung</div>
+{/if}
+		<h2 class="titel sm:mb-2">{name}</h2>
+
+
+			<div class="sumCent">
+				<div class="variante">{variant}</div>
+				<img
+					class="image"
+					{src}
+					{alt}
+				/>
+				<div class="">
+					<p class="price">
+							ab {price} €					
+					</p>
+				</div>
+
+			</div>
+
+			<div class="sumCent buttoncols">	
+				<a
+					href={href_buy}
+					class="buttoncol"
+					aria-label="Jetzt {name} kaufen"
+					target="_blank"
+					>{cta}
+				</a>
+	
+				<a
+					href={href_overview}
+					class="buttoncol"
+					aria-label="{name} Produkt-Übersicht"
+					target="_blank"
+					>Produkt-Übersicht</a
+				>
+	
+				</div>
+
+			<div class="sumRows forServices">
+			
+				{#each services as [service, check]}
+				<div class="services">
+				<span>{@html service}</span>
+				<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}
+.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}
+
+.image{@apply w-[75%] mx-auto
+	md:w-[75%] md:pl-0}
+
+.buttoncols{@apply grid grid-cols-1 gap-x-4 w-full mb-4
+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-3 text-nowrap text-left -ml-4 ;
+	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 {
+		@apply w-fit italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-[#ffcc00] rounded-md pl-[4px] pr-[6px] py-[0px];
+	}
+
+	.services {
+		@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center  md:grid-cols-[1fr_50px]
+	}
+	.services:not(:last-child) {
+		@apply border-b-[1px] border-gray-200;
+	}
+	.check {
+		@apply justify-self-end self-center font-bold text-green-700;
+	}
+	.check-no {
+		@apply justify-self-end self-center font-bold text-red-700;
+	}
+
+}
+
+</style>