upDate UMBE

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -20,7 +20,7 @@
 
 <div class="grid grid-cols-2 gap-x-6 mt-6">
 	
-	<div class="box mb-0">
+	<div class="box card mb-0">
 
 		
 			<div class="form-group col-md-12 nopad">
@@ -42,7 +42,7 @@
 		
 	</div>
 
-	<div class="box mb-0">
+	<div class="box card mb-0">
 		<HelpLabel title="Ansichtsausweis & Datenblatt :">
 			Hier gehts zu Ihrem Ansichtsausweis und Datenblatt als PDF.
 		</HelpLabel>

src/components/Ausweis/ButtonSpaeterHilfe.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 import Hilfe from "#components/Ausweis/Hilfe.svelte";
+export let spaeterWeitermachen;
+export let automatischAusfüllen;
 </script>
 
 
 <!-- Später weitermachen / Hilfe anfordern -->
 
+
 <div
 class="w-full mt-5 grid gap-x-4 gap-y-2
 grid-cols-1

src/components/Ausweis/PerformanceScore.svelte

@@ -79,8 +79,8 @@
 	}
 </script>
 
-<div class="w-full rounded-lg border-border-gray/35 border-4 relative p-2">
+<div class="w-full rounded-lg border-border-gray/35 border-4 relative px-0 mt-4">
-	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala" />
+	<img class="rounded-lg" src="/images/SKALA-910.png" alt="Energieeffizienz Skala" />
 	<ThickArrowDown
 		size={28}
 		class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"

src/components/Ausweis/Progressbar.svelte

@@ -2,7 +2,7 @@
 	export let progress: number = 0;
 </script>
 
-<div class="flex flex-col relative">
+
 	<div class="progress-section">
 		<div class="w-full bg-gray-100 absolute h-3 rounded-lg">
 			<div class="bg-green-600 left-0 h-3 absolute" style={`width: ${progress}%;`}></div>
@@ -13,11 +13,11 @@
 	</div>
 
 	<div class="flex flex-row justify-between">
-		<p>Gebäudedaten</p>
+		<div>Gebäudedaten</div>
-		<p>Prüfung</p>
+		<div>Prüfung</div>
-		<p>Kaufabschluss</p>
+		<div>Kaufabschluss</div>
 	</div>
-</div>
+
 
 <style>
 	.progress-section {

src/layouts/AusweisLayout.astro

@@ -100,65 +100,7 @@ const { title } = Astro.props;
 		}
 	}
 
-	article h1 {
-	font-size: 1.7rem;
-	font-weight: 500;
-	line-height: 1.2rem;
-	width: 100%;
-	text-align: center;
-	margin: 1em 0em;
-}
 
-article a {
-	color: #3a4ab5;
-	text-decoration: none;
-	display: inline;
-}
-
-article a:hover {
-	text-decoration: underline;
-}
-
-article p {
-	line-height: 1.7em;
-	padding-right: 1em;
-	font-size: 1.1em;
-	text-transform: none;
-}
-
-
-
-
-
-	h3 {
-		@apply text-xl font-medium mt-6 mb-4;
-	}
-
-	input, select, textarea, .input {
-		@apply py-1.5 px-2.5 w-full outline-none text-base text-slate-800 border bg-white;
-	}
-
-	input:disabled, input:read-only, select:disabled {
-		@apply bg-gray-200 border-gray-300;
-	}
-
-	input:disabled {
-		text-indent: -9999px;
-	}
-
-
-
-
-
-	.GRB3 {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
-		/* background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		); */
-	}
 
 
 	.headline {

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
 	import Progressbar from "#components/Ausweis/Progressbar.svelte";
-	//import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
 
 	import BereichLabel from "#labels/BereichLabel.svelte";
 	//import HelpLabel from "#labels/HelpLabel.svelte";
@@ -174,10 +174,12 @@
 	</p>
 </Overlay>
 
+<h1>Verbrauchsausweis erstellen - 45€</h1>
 
-<div class="grid grid-cols-2 gap-x-8 px-4">
+
-	<div class="w-full rounded-lg border-gray/35 border-4 relative px-8 py-4">
+
-		<h1>Verbrauchsausweis erstellen - 45€</h1>
+<div class="grid grid-cols-1 gap-x-8 px-4">
+	<div class="w-full rounded-lg border-gray/35 border-0 relative px-40 pt-4 pb-3">
 		<Progressbar progress={0} />
 	</div>
 
@@ -189,10 +191,16 @@
 </div>
 
 
+
+
+<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen}/>
+
+
+
 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div id="formular-box" class="formular-boxen ring-0">
 
-		<ButtonSpaeterHilfe />
+
 
 		<!-- A Prüfung der Ausweisart -->
 
@@ -291,7 +299,6 @@
 			/>
 		</div>
 
-
 		<!-- I Gebäudebild und Energieausweis PDF Vorschau  -->
 
 		<BereichLabel bereich="I"
@@ -305,14 +312,28 @@
 		</div>
 
 
-		<ButtonSpaeterHilfe />
-
-
 	</div>
-	
 </form>
 
+<div
+class="w-full px-4 mt-5 grid gap-x-4 gap-y-2
+grid-cols-1
+xs:grid-cols-2"
+>
 
+<div class="md:justify-self-start">
+	<button 
+		type="submit" 
+		class="button"
+		>
+		Weiter
+	</button>
+	
+</div>
+
+<div class="md:justify-self-end"><Hilfe />
+</div>
+</div>
 
 
 <style lang="scss">

src/style/768.scss

@@ -1,46 +0,0 @@
-@media (min-width: 576px) and (max-width: 767.98px) {
-
-	/*-----------------------------------------------------------------*/
-	/*-                                                               -*/
-	/*-                 General Styles & Structure               	  -*/
-	/*-         (min-width: 576px) and (max-width: 767.98px)          -*/
-	/*-----------------------------------------------------------------*/
-	.content {
-		max-width: 1920px;
-		display: grid;
-		column-gap: 0px;
-		grid-template-columns: 1fr;
-		grid-template-rows: auto;
-	}
-
-	.stretch-2 {
-		-ms-grid-row: 1;
-		-ms-grid-column: 1;
-		-ms-grid-column-span: 1;
-		grid-area: 1/1/1/4 !important;
-		width: calc(100% - 3%);
-	}
-
-	.only-form-mainContent {
-		padding: 20px 1% !important;
-		width: 100%;
-	}
-
-	.right-sidebar {
-		display: block;
-		max-width: 940px;
-		-ms-grid-row: 1;
-		-ms-grid-column: 3;
-		grid-area: 1/3/1/3;
-		padding-top: 0px;
-		margin-top: 0px;
-		width: 100%;
-	}
-
-	.login-container {
-		grid-template-columns: 1fr !important;
-	}
-
-}
-
-/* END QUERY */

src/style/992.scss

@@ -1,228 +0,0 @@
-@media (min-width: 992px) and (max-width: 10000px) {
-	/*-----------------------------------------------------------------*/
-	/*-                                                               -*/
-	/*-                 General Styles & Structure               	  -*/
-	/*-         (min-width: 992px) and (max-width: 10000px)            -*/
-	/*-----------------------------------------------------------------*/
-
-	.hide-on-mobile {
-		display: block !important;
-	}
-
-	.content {
-		max-width: 1920px;
-		width: 100%;
-		padding: 0 2% 10px 2%;
-		margin: 20px auto;
-		display: grid;
-		column-gap: 20px;
-		grid-template-columns: 2fr 6fr 2fr;
-		grid-template-rows: auto;
-	}
-
-	.stretch-2 {
-		-ms-grid-row: 1;
-		-ms-grid-column: 2;
-		-ms-grid-column-span: 2;
-		grid-area: 1/2/1/2;
-		width: calc(100% - 4%);
-
-	}
-
-	.only-form-mainContent {
-		padding: 20px 1% !important;
-		width: calc(100% - 0%) !important;
-		grid-area: 1/2/1/4;
-
-
-	}
-
-	.only-login-mainContent {
-		padding: 20px 1% !important;
-		width: calc(100% - 0%) !important;
-		grid-area: 1/2/1/4;
-
-
-	}
-
-	.right-sidebar {
-		display: block;
-		max-width: 940px;
-		-ms-grid-row: 1;
-		-ms-grid-column: 3;
-		grid-area: 1/3/1/3;
-		padding-top: 0px;
-		margin-top: 0px;
-		width: 100%;
-	}
-
-	.mainContent h1 {
-		margin-top: 0;
-		font-size: 2.5rem;
-		font-weight: 500;
-		line-height: 1.2;
-		width: 100%;
-		text-align: left;
-	}
-
-	.mainContent a {
-		color: #3A4AB5;
-		text-decoration: none;
-		display: inline;
-	}
-
-	.mainContent a:hover {
-		text-decoration: underline;
-	}
-
-	.mainContent p {
-		line-height: 1.7em;
-		padding-right: 1em;
-		font-size: 1.1em;
-		text-transform: none;
-	}
-
-
-	/*-----------------------------------------------------------------*/
-	/*-                                                               -*/
-	/*-                      Branding: 		                          -*/
-	/*-        (min-width: 992px) and (max-width: 10000px)		      -*/
-	/*-----------------------------------------------------------------*/
-
-
-	.hamburger_menu {
-		display: none !important;
-	}
-
-	nav {
-		margin-top: 0px;
-	}
-
-	.active {
-		background-color: none;
-		opacity: 1;
-		transition: none;
-	}
-
-
-	
-
-	.nav-hr {
-		display: block;
-		border: 1px solid #ff7d26;
-		margin: 0em 0;
-		height: 0px;
-	}
-
-	
-
-	.active {
-		background-color: #FFF !important;
-		color: #000 !important;
-		opacity: 1;
-	}
-
-	.active:hover {
-		background-color: #ff7d26 !important;
-		color: #FFF !important;
-	}
-
-	.droparrow1::after {
-		transform: translate(0, -50%) rotate(0deg) !important;
-		transition: none !important;
-	}
-
-
-	
-
-
-	footer a {
-		font-size: 18px;
-		line-height: 40px;
-		display: inline;
-		color: #fff;
-		text-decoration: none;
-		margin: 0 2em;
-	}
-
-	.grw-net-widget {
-		width: 100% !important
-	}
-
-
-
-	/*-----------------------------------------------------------------*/
-	/*-                                                               -*/
-
-
-
-
-
-
-}
-
-/* END QUERY */
-
-/**
-* SECTION: User Interface - Ausweis style
-*/
-
-.container-ausweis {
-	display: flex;
-	flex-direction: column;
-	background: #fff;
-	box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.1);
-	padding: 20px;
-	border-radius: 8px;
-	width: 100%;
-	gap: 10px;
-}
-
-.container-ausweis a {
-	cursor: pointer;
-	color: rgb(58, 74, 181) !important;
-	text-decoration: none;
-}
-
-.container-ausweis h4 {
-	font-size: 24px;
-	font-weight: normal;
-}
-
-.container-ausweis h5 {
-	font-size: 18px;
-}
-
-.login-container {
-	grid-area: 4/1/4/3;
-	display: grid;
-	grid-gap: 20px;
-	grid-template-columns: repeat(2, 1fr);
-	grid-template-rows: auto;
-}
-
-.energieausweis-img {
-	width: 100%;
-	height: min-content;
-	max-width: 80px;
-}
-
-/**
-* SECTION: Popups
-*/
-
-
-.popup-bottom {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	min-height: 50px;
-	width: 100%;
-	background-color: rgb(255, 125, 38);
-	color: #fff;
-	text-align: center;
-	padding: 10px 20px;
-	z-index: 10;
-	font-size: 20px;
-	font-weight: 600;
-}

src/style/ORG_global.scss

@@ -1,46 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
-
-* {
-	font-weight: 400;
-	box-sizing: border-box;
-	font-family: "Abel", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-@import './576';
-@import './768';
-@import './992';
-
-@import "./smaller-768";
-
-article hr {
-	@apply mb-4 mt-4;
-}
-
-article {
-	@apply px-6 md:px-8 py-6 w-full relative bg-white;
-}
-
-article h1 {
-	@apply text-4xl font-normal my-4;
-}
-
-article h2 {
-	@apply text-2xl font-normal my-4;
-}
-
-article h3 {
-	@apply text-xl font-normal my-2;
-}
-
-article a {
-	@apply text-blue-700 font-medium text-lg;
-}
-
-article select {
-	@apply rounded-lg px-2 py-1.5 outline-none;
-}
-
-.checkbox {
-	@apply h-5 w-4 checkbox-secondary;
-}

src/style/global.css

@@ -31,21 +31,12 @@
 	font-family: "Heron";
 }
 
-
+.promo{
-.promo1{
 		font-weight: 700;
 		box-sizing: border-box;
 		font-family: "Antique Olive Compact bold";
-	text-shadow: 2px 2px 8px #222;
-
 }
 
-	.promo{
-		font-weight: 700;
-		box-sizing: border-box;
-		font-family: "Antique Olive Compact bold";
-	}
-
 
 body{
 	@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
@@ -57,13 +48,23 @@ body{
 	hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
 }
 
-input[type="text"], input[type="number"], input[type="password"], select{
+input, select, textarea{
+	@apply py-1.5 px-2.5 w-full outline-none;
+}
+
+input[type="text"], 
+input[type="number"], 
+input[type="password"], 
+select{
 @apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
 
 input[type="checkbox"]{@apply inline-block accent-secondary}
 
 radio{@apply accent-primary}
 
+input:disabled, input:read-only, select:disabled {
+	@apply bg-gray-200 border-gray-500/15;
+}
 
 /*ARTICLE*/
 
@@ -76,15 +77,18 @@ article {
 	h2{@apply text-2xl font-normal mb-2;}
 	h3 {@apply text-xl font-normal ml-1;}
 	
-	a {@apply text-blue-700 font-medium text-lg;}
+	a {@apply text-blue-700 font-medium inline;}
+
 	p {@apply text-lg font-normal mb-2;}
 	li {@apply text-lg font-normal}
 	ul {@apply inline-block}
 	span {@apply text-secondary font-bold;}
 	
 
+		
 }
 
+
 /*SIDEBARS*/
 
 /*BOXES*/

src/style/smaller-768.scss

@@ -1,9 +0,0 @@
-/*=============================================
-=        Target Everything below 768px        =
-=============================================*/
-
-@media only screen and (max-width: 768px) {
-	.filter-bar {
-		flex-wrap: wrap;
-	}
-}