Startseite uns Säulen
This commit is contained in:
Jens Cornelsen
@@ -1,326 +1,156 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
import { PRICES } from "#lib/constants";
|
||||
import VApromo from "#sidebarCards/card-VA-promo.svelte";
|
||||
import BApromo from "#sidebarCards/card-BA-promo.svelte";
|
||||
</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-indigo-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 Ihres Immobilienobjektes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="mb-4 text-2xl text-center text-indigo-800 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-indigo-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-indigo-800 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-indigo-800 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-indigo-800 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-indigo-800 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">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
<div class="name">Verbrauchsausweis<br>Wohngebäude</div>
|
||||
</div>
|
||||
<VApromo client:load />
|
||||
<div class="white">
|
||||
<div class="services">einfach </div>
|
||||
<div class="services">
|
||||
<span>Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
|
||||
<span class="icon positive">✔</span>
|
||||
<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="produkttext">Einfache Berechnung anhand von 3
|
||||
Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<span>Zulässig bei Vermietung und Verkauf.</span>
|
||||
<span class="icon positive">✔</span>
|
||||
<div class="lg:w-1/6 w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<span>Nicht zulässig bei unsanierten Gebäuden, die vor 1978 gebaut wurden und weniger als 5 Wohneinheiten haben.</span>
|
||||
<span class="icon negative">✘</span>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">
|
||||
Zulässig bei Vermietung
|
||||
<br/>
|
||||
oder Verkauf Ihres Immobilienobjektes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<span>Für bauliche und energetische Maßnahmen ungeeignet.</span>
|
||||
<span class="icon negative">✘</span>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<span>Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.</span>
|
||||
<span class="icon negative">✘</span>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">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="kreuz">✘</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="produkttext">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="kreuz">✘</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="produkttext">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="kreuz">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
zur Produktübersicht
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
jetzt sofort Energieausweis<br>online erstellen
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
<div class="name">Bedarfsausweis<br>Wohngebäude</div>
|
||||
</div>
|
||||
<BApromo client:load />
|
||||
|
||||
<div class="white">
|
||||
<div class="services">fundiert </div>
|
||||
<div class="services">
|
||||
<span>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</span>
|
||||
<span class="icon positive">✔</span>
|
||||
<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="produkttext">Berechnung anhand der
|
||||
Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<span>Zulässig bei Vermietung, Verkauf, Modernisierung und Neubau</span>
|
||||
<span class="icon positive">✔</span>
|
||||
<div class="lg:w-1/6 w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<span>Zulässig für alle Gebäude.</span>
|
||||
<span class="icon positive">✔</span>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Zulässig bei Vermietung, Verkauf,
|
||||
Modernisierung und Neubau.</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<span>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</span>
|
||||
<span class="icon positive">✔</span>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<span>Fundierte vergleichbare Berechnung die bei den Banken für die Finanzierungsunterlagen immer akzeptiert wird.</span>
|
||||
<span class="icon positive">✔</span>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">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="haken">✔</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="produkttext">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="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Objektive Berechnung die für die
|
||||
Kreditunterlagen besser geeignet ist.</p>
|
||||
</div>
|
||||
<div class="items-end w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
zur Produktübersicht
|
||||
</div>
|
||||
|
||||
<div class="blue-bottom">
|
||||
jetzt sofort Energieausweis<br>online erstellen
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saeulen">
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
|
||||
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
|
||||
<div class="name">Bedarfsausweis<br>Gewerbe</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss">
|
||||
#saeulen{@apply grid grid-cols-[1fr] gap-4
|
||||
lg:grid-cols-[1fr,1fr,1fr]
|
||||
xl:grid-cols-[1fr,1fr,1fr,1fr];
|
||||
sm:grid-cols-[1fr,1fr]
|
||||
md:grid-cols-[1fr,1fr]
|
||||
lg:grid-cols-[1fr,1fr]
|
||||
xl:grid-cols-[1fr,1fr];
|
||||
.saeule{@apply grid;
|
||||
img{@apply w-full justify-self-center mb-1 min-h-[50px] }
|
||||
img{@apply w-1/2 justify-self-center mb-1 mt-3 min-h-[30px] }
|
||||
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
|
||||
.name{@apply w-full}
|
||||
.name{font-size: clamp(15px, 2vh, 18px)}
|
||||
.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
|
||||
.orange{@apply bg-primary text-white text-center font-bold rounded-t-md p-2 relative}
|
||||
.ab{@apply leading-[1]}
|
||||
.mwst{@apply leading-[auto]}
|
||||
.price{font-size: clamp(15px, 5vh, 50px)}
|
||||
@@ -331,6 +161,9 @@ img{@apply w-full justify-self-center mb-1 min-h-[50px] }
|
||||
.services:nth-child(even){@apply bg-white}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-300}
|
||||
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
|
||||
.kreuz{@apply mb-4 text-2xl text-center text-primary mt-4 font-medium}
|
||||
.haken{@apply mb-4 text-2xl text-center text-secondary mt-4 font-medium}
|
||||
.produkttext{@apply mb-4 text-lg text-center mt-4}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -5,14 +5,7 @@ import Login from "#sidebarCards/card-login.svelte";
|
||||
|
||||
<header>
|
||||
|
||||
<div class="max-w-[1920px] w-full grid relative bg-white
|
||||
|
||||
sm:grid-cols-[0px_1fr_minmax(450px,450px)] sm:pl-6 sm:pr-3 sm:py-2
|
||||
md:grid-cols-[0px_1fr_minmax(450px,450px)] md:pl-6 md:pr-3 md:py-2
|
||||
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
|
||||
lg:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
|
||||
xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
|
||||
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
|
||||
<div class="flex flex-row max-w-[1920px] w-full bg-white p-2">
|
||||
|
||||
|
||||
|
||||
@@ -37,23 +30,21 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
|
||||
Energieausweise nach aktuellem GEG
|
||||
</h2> -->
|
||||
|
||||
<div></div>
|
||||
|
||||
<div class="self-center justify-self-start
|
||||
sm:justify-self-start
|
||||
md:justify-self-start
|
||||
lg:justify-self-center
|
||||
xl:justify-self-center
|
||||
2xl:justify-self-center">
|
||||
<a href="/index_1">
|
||||
<img class="w-[73px]"
|
||||
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
<div class="flex flex row mb-1 items-end w-1/4 md:w-1/2 2xl:w-4/6">
|
||||
<div class="ml-5 mr-3">
|
||||
<a href="/index_1">
|
||||
<img class="w-[95px]"
|
||||
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-1.5 hidden md:block"><h1 class="text-secondary font-bold text-2xl lg:text-3xl">
|
||||
Energieausweise online erstellen
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[450px]">
|
||||
<Login client:load />
|
||||
</div>
|
||||
<div class="w-3/4 md:w-1/2 2xl:w-2/6 2xl:hidden"><Login client:load /></div>
|
||||
<div class="2xl:w-2/6 hidden 2xl:block 2xl:flex 2xl:mb-2.5 2xl:items-end 2xl:justify-center"><div class="2xl:pl-20"><h2 class="text-secondary font-bold text-4xl">nach GEG 2024</h2></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -62,7 +53,7 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
|
||||
<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
|
||||
lg:h-[14px] xl:h-[18px]">
|
||||
|
||||
<!-- <a
|
||||
<!--- <a
|
||||
class="header-button hidden md:block"
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
@@ -70,8 +61,8 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
|
||||
<a class="header-button hidden md:block" href="/kontakt"
|
||||
>Kontakt</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/agb">AGB</a>
|
||||
-->
|
||||
<a class="header-button hidden md:block" href="/agb">AGB</a>-->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,16 +10,13 @@ class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
|
||||
<h2>Bedarfssausweis Gewerbe</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
|
||||
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
|
||||
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-BA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Bedarfssausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">300</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -3,23 +3,19 @@
|
||||
</script>
|
||||
|
||||
<div id ="card-BA-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
class=" box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Bedarfssausweis Wohngebäude</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
|
||||
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Bedarfssausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -3,23 +3,19 @@
|
||||
</script>
|
||||
|
||||
<div id ="card-VA-G-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
class=" box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Verbrauchsausweis Gewerbe</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
|
||||
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
|
||||
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Verbrauchsausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -3,23 +3,19 @@
|
||||
</script>
|
||||
|
||||
<div id ="card-VA-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
class=" box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Verbrauchsausweis Wohngebäude</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
|
||||
<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Verbrauchsausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -31,33 +31,38 @@
|
||||
|
||||
|
||||
<form on:submit={login}>
|
||||
<div class="grid grid-cols-[1fr_1fr] gap-2">
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
type="text"
|
||||
placeholder="nutzer@email.com"
|
||||
name="email"
|
||||
bind:value={email}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
type="password"
|
||||
minlength="8"
|
||||
placeholder="********"
|
||||
name="passwort"
|
||||
bind:value={passwort}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
{#if !errorHidden}
|
||||
<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
|
||||
<CrossCircled size={24} />
|
||||
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
|
||||
<div class="">
|
||||
|
||||
<div class="flex flex-row">
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full mr-1.5"
|
||||
type="text"
|
||||
placeholder="nutzer@email.com"
|
||||
name="email"
|
||||
bind:value={email}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
type="password"
|
||||
minlength="8"
|
||||
placeholder="********"
|
||||
name="passwort"
|
||||
bind:value={passwort}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
{#if !errorHidden}
|
||||
<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
|
||||
<CrossCircled size={24} />
|
||||
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="w-full text-center self-center">
|
||||
<a
|
||||
class="justify-self-start text-sm font-bold no-underline hover:text-primary"
|
||||
@@ -69,8 +74,9 @@
|
||||
>
|
||||
</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>
|
||||
|
||||
<button class="my-1 rounded-md px-2 py-1 ring-1 w-[35%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Login</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
|
||||
import Login from "#sidebarCards/card-login_1.svelte";
|
||||
import Contact from "#sidebarCards/card-contact.svelte";
|
||||
import Review from "#sidebarCards/card-review.svelte";
|
||||
import VApromo from "#sidebarCards/card-VA-promo.svelte";
|
||||
@@ -11,13 +11,13 @@ import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
|
||||
<div class="hidden
|
||||
xl:flex xl:flex-col xl:grow
|
||||
">
|
||||
|
||||
<Login client:load />
|
||||
<Contact client:load />
|
||||
<Review client:load />
|
||||
<VApromo client:load />
|
||||
<VAGpromo client:load />
|
||||
<BApromo client:load />
|
||||
<BAGpromo client:load />
|
||||
<VApromo client:load />
|
||||
<BApromo client:load />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ const { title } = Astro.props;
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<container class="w-full max-w-[1920px]">
|
||||
<container class="w-full max-w-[1920px]">
|
||||
|
||||
<Header />
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
|
||||
---
|
||||
|
||||
<Layout title="Energieausweis online erstellen - Online Energieausweis">
|
||||
<h1>Energieausweis online erstellen</h1>
|
||||
<h1 class="md:hidden">Energieausweis online erstellen</h1>
|
||||
<BannerPrice client:load />
|
||||
</Layout>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user