Test
This commit is contained in:
Jens Cornelsen
@@ -2,6 +2,177 @@
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div rounded="md" class="shadow-xl pt-8 pr-8 pb-8 pl-8 sm:p-16 sm:flex-row md:flex-row lg:flex-row xl:flex-row
|
||||
2xl:flex-row flex flex-col pl-0 pt-0 pr-0 pb-0">
|
||||
<div class="flex lg:flex-col flex-col w-1/2 rounded-none shadow-* ml-0 pl-0 pt-0 pr-0 pb-0 border-0 h-auto mr-4
|
||||
mb-10">
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white bg-indigo-800 justify-center items-center">
|
||||
<p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
|
||||
Verbrauchsausweis
|
||||
<br/>
|
||||
Wohngebäude
|
||||
</p>
|
||||
<div class="lg:h-1/2 lg:w-1/2 flex flex-wrap w-1/2 mb-7 bg-indigo-800 h-1/2 ml-8 pb-1">
|
||||
<img src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" class="lg:h-full lg:w-full
|
||||
w-full h-full mb-5"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white h-full flex-col pt-2 pl-2 pr-2 pb-2 border-2">
|
||||
<div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
|
||||
<p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
|
||||
einfach
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row w-full items-end h-auto">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Einfache Berechnung anhand von 3
|
||||
Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-red-800 mt-4 font-medium decoration-black">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
Zulässig bei Vermietung
|
||||
<br/>
|
||||
oder Verkauf Ihrer Immobilie (Vermarktung).
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Unzulässig bei unsanierten Gebäuden vor
|
||||
1978 gebaut mit weniger als 5 Wohnungen.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Für bauliche und energetische Maßnahmen
|
||||
ungeeignet. Starke Abweichungen durch individuelles Heizverhalten.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Wird nicht immer bei den Banken für die
|
||||
Kreditunterlagen akzeptiert.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white bg-yellow-500 h-auto justify-center items-center
|
||||
theme-orange">
|
||||
<p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
|
||||
ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-none shadow-* mb-2 text-white bg-white h-auto justify-center items-center">
|
||||
<button class="w-full bg-indigo-800 text-white h-16 rounded-xl shadow-xl pr-6 pl-6 text-center mb-1.5
|
||||
text-xl">jetzt online erstellen</button>
|
||||
<button class="w-full bg-indigo-800 text-white h-16 rounded-xl shadow-xl pr-6 pl-6 text-center text-xl">zur
|
||||
Produktübersicht</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex lg:flex-col flex-col w-1/2 rounded-none shadow-* ml-0 pl-0 pt-0 pr-0 pb-0 border-0 h-auto mr-4
|
||||
mb-10">
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white bg-indigo-800 justify-center items-center">
|
||||
<p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
|
||||
Bedarfsausweis
|
||||
<br/>
|
||||
Wohngebäude
|
||||
</p>
|
||||
<div class="lg:h-1/2 lg:w-1/2 flex flex-wrap w-1/2 mb-7 bg-indigo-800 h-1/2 ml-8 pb-1">
|
||||
<img src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" class="lg:h-full lg:w-full
|
||||
w-full h-full mb-5"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white h-full flex-col pt-2 pl-2 pr-2 pb-2 border-2">
|
||||
<div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
|
||||
<p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
|
||||
fundiert
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row w-full items-end h-auto">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Berechnung mit Erfassung der
|
||||
Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-red-800 mt-4 font-medium decoration-black">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Zulässig bei Vermietung, Verkauf,
|
||||
Modernisierung und Neubau.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Zulässig für alle Gebäude, insbesondere
|
||||
alte und unsanierte Objekte.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Kann als Grundlage für Sanierungsvarianten
|
||||
sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Objektive Berechnung die für die
|
||||
Kreditunterlagen besser geeignet ist.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white bg-yellow-500 h-auto justify-center
|
||||
items-center">
|
||||
<p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
|
||||
ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-none shadow-* mb-2 text-white bg-white h-auto justify-center items-center">
|
||||
<button class="w-full bg-indigo-800 text-white h-16 rounded-xl shadow-xl pr-6 pl-6 text-center mb-1.5
|
||||
text-xl">jetzt online erstellen</button>
|
||||
<button class="w-full bg-indigo-800 text-white h-16 rounded-xl shadow-xl pr-6 pl-6 text-center text-xl">zur
|
||||
Produktübersicht</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="saeulen">
|
||||
|
||||
<div class="saeule">
|
||||
@@ -140,210 +311,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div rounded="md" class="shadow-xl pt-8 pr-8 pb-8 pl-8 sm:p-16 sm:flex-row md:flex-row lg:flex-row xl:flex-row
|
||||
2xl:flex-row flex flex-col pl-0 pt-0 pr-0 pb-0">
|
||||
<div class="flex lg:flex-col flex-col w-auto rounded-none shadow-* ml-0 pl-4 pt-4 pr-4 pb-4 border-0 h-auto">
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white bg-indigo-800 justify-center items-center">
|
||||
<p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
|
||||
Verbrauchsausweis
|
||||
<br/>
|
||||
Wohngebäude
|
||||
</p>
|
||||
<div class="lg:h-1/2 lg:w-1/2 flex flex-wrap w-1/2 mb-7 bg-indigo-800 h-1/2 ml-8">
|
||||
<img src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" class="lg:h-full lg:w-full
|
||||
w-full h-full mb-5"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white h-full flex-col pt-2 pl-2 pr-2 pb-2 border-2">
|
||||
<div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
|
||||
<p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
|
||||
einfach
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row w-full items-end h-auto">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-red-800 mt-4 font-medium decoration-black">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">Zulässig bei Vermietung und Verkauf.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">
|
||||
Nicht zulässig bei unsanierten
|
||||
<br/>
|
||||
Gebäuden die vor 1978 gebaut
|
||||
<br/>
|
||||
wurden und weniger als 5
|
||||
<br/>
|
||||
Wohneinheiten haben.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-yellow-600 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">
|
||||
Für bauliche und energetische
|
||||
<br/>
|
||||
Maßnahmen ungeeignet.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">
|
||||
Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.
|
||||
<br/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white bg-yellow-600 h-auto justify-center
|
||||
items-center">
|
||||
<p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
|
||||
ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-none shadow-* mb-2 text-white bg-white h-auto justify-center items-center">
|
||||
<button class="w-full bg-blue-700 text-white h-12 rounded-xl shadow-xl pr-6 pl-6 text-center mb-1.5 text-xl">jetzt
|
||||
online erstellen</button>
|
||||
<button class="w-full bg-blue-700 text-white h-12 rounded-xl shadow-xl pr-6 pl-6 text-center text-xl">zur
|
||||
Produktübersicht</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex lg:flex-col flex-col w-auto rounded-none shadow-* ml-0 pl-4 pt-4 pr-4 pb-4 border-0 h-auto">
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white bg-indigo-800 justify-center items-center">
|
||||
<p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
|
||||
Bedarfsausweis
|
||||
<br/>
|
||||
Wohngebäude
|
||||
</p>
|
||||
<div class="lg:h-1/2 lg:w-1/2 flex flex-wrap w-1/2 mb-7 bg-indigo-800 h-1/2 ml-8">
|
||||
<img src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" class="lg:h-full lg:w-full
|
||||
w-full h-full mb-5"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white h-full flex-col pt-2 pl-2 pr-2 pb-2 border-2">
|
||||
<div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
|
||||
<p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
|
||||
fundiert
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row w-full items-end h-auto">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-red-800 mt-4 font-medium decoration-black">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">Zulässig bei Vermietung und Verkauf.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">
|
||||
Nicht zulässig bei unsanierten
|
||||
<br/>
|
||||
Gebäuden die vor 1978 gebaut
|
||||
<br/>
|
||||
wurden und weniger als 5
|
||||
<br/>
|
||||
Wohneinheiten haben.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-yellow-600 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">
|
||||
Für bauliche und energetische
|
||||
<br/>
|
||||
Maßnahmen ungeeignet.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
|
||||
<span class="s-jv164Nce4e8Q">
|
||||
Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.
|
||||
<br/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white bg-yellow-600 h-auto justify-center
|
||||
items-center">
|
||||
<p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
|
||||
ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full w-full rounded-none shadow-* mb-2 text-white bg-white h-auto justify-center items-center">
|
||||
<button class="w-full bg-blue-700 text-white h-12 rounded-xl shadow-xl pr-6 pl-6 text-center mb-1.5 text-xl">jetzt
|
||||
online erstellen</button>
|
||||
<button class="w-full bg-blue-700 text-white h-12 rounded-xl shadow-xl pr-6 pl-6 text-center text-xl">zur
|
||||
Produktübersicht</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
#saeulen{@apply grid grid-cols-[1fr] gap-4
|
||||
lg:grid-cols-[1fr,1fr,1fr]
|
||||
|
||||
Reference in New Issue
Block a user