responsiv

src/components/AnsichtsausweisButton.svelte

@@ -38,6 +38,6 @@
 		ausweisart
 	})
 }}>
-	<img src="/images/ausweis.webp" alt="Ausweis" />
+	<img class="w-full" src="/images/ausweis.webp" alt="Ausweis" />
 	<span class="text-black font-medium text-lg">Ansichtsausweis</span>
 </button>

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -60,7 +60,7 @@
 
 		</div>
 
-		<div class="grid grid-cols-2 gap-4 mt-4">
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
 			<AnsichtsausweisButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
 			<DatenblattButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
 		</div>

src/components/Ausweis/ButtonSpaeterHilfe.svelte

@@ -9,7 +9,8 @@
 
 
 
-<div class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8">
+<div class="grid grid-cols-1 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0 
+sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8">
 	
 	<div></div>
 

src/components/Ausweis/ButtonWeiterHilfe.svelte

@@ -57,9 +57,9 @@
 	let loginOverlayHidden = true;
 </script>
 
-<div
+<div class="grid grid-cols-1 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0 
-	class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8"
+sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8">
->
+
 	<div></div>
 
 	<Hilfe />

src/components/Ausweis/Progressbar.svelte

@@ -19,17 +19,17 @@
 	
 <div class="phase justify-self-start">
 	<div class="{step1} point">1</div>
-	<div class="">Gebäudedaten</div>
+	<div class="titel">Gebäudedaten</div>
 </div>
 
 <div class="phase">
 	<div class="{step2} point">2</div>
-	<div class="">Kundendaten</div>
+	<div class="titel">Kundendaten</div>
 </div>
 
 <div class="phase justify-self-end">
 	<div class="{step3} point">3</div>
-	<div class="">Kaufbestätigung</div>
+	<div class="titel">Kaufbestätigung</div>
 </div>
 
 </div>
@@ -41,5 +41,6 @@
 .point{@apply rounded-full w-8 h-8 text-white font-bold bg-gray-300 text-center pt-1 ring-white ring-4;}
 .step{@apply bg-secondary}
 }
+.titel{@apply [font-size:_clamp(12px,1vw,1.5rem)]}
 
 </style>

src/components/DatenblattButton.svelte

@@ -14,6 +14,6 @@
 </script>
 
 <a class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" target="_blank" href="/pdf/datenblatt?ausweis={base64Ausweis}&objekt=${base64Objekt}&aufnahme={base64Aufnahme}&bilder={base64Bilder}">
-	<img src="/images/datenblatt.webp" alt="Datenblatt" />
+	<img class="w-full" src="/images/datenblatt.webp" alt="Datenblatt" />
 	<span class="text-black font-medium text-lg">Datenblatt</span>
 </a>

src/components/design/footer/Footer.astro

@@ -5,6 +5,7 @@ const currentYear = new Date().getFullYear();
 <footer class="
 		
 				grid grid-cols-1 bg-primary lg:px-9 lg:py-1
+				xs:grid-cols-2
 				lg:grid-cols-4 lg:px-9 lg:py-1">
 
 	<div class="

src/components/design/header/AusweisHeader.astro

@@ -2,7 +2,7 @@
 import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
 ---
 
-<header id="header">
+<header id="header" class="">
 
 <div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0 
 
@@ -21,9 +21,9 @@ xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
 md:gap-y-4
 lg:px-0 lg:gap-x-4">
 
-<div class="self-start justify-self-start">
+<div class="self-start justify-self-center xs:justify-self-start">
 	<a href="/">
-		<img id="header-logo" class="w-full 
+		<img id="header-logo" class="w-full max-w-[120px] 
 		xs:max-w-[64px] 
 		sm:max-w-[64px]
 		md:max-w-[64px] md:ml-6

src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte

@@ -158,9 +158,12 @@
 </script>
 
 
-<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4">
+<div id="skala" class="bg-white grid grid-cols-1 p-4
 
-	<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
+lg:grid-cols-2 lg:gap-x-6
+">
+
+<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
 	<PerformanceScore
 		bind:ausweis
 		bind:aufnahme={aufnahme}
@@ -168,13 +171,14 @@
 		{ausweisart}
 	/>
 </div>
-</div>
 
-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
+<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
 		
 	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
-	<h2 class="text-primary text-xl">{ausweisart} {PRICES.BedarfsausweisWohnen[0]} €</h2>
+	<h2 class="text-primary text-xl">{ausweisart} {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
-	<ProgressBar progress={0} />
+	<ProgressBar step1={'step'}/>
+</div>
+
 </div>
 
 <form id="formInput-1" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
@@ -1003,6 +1007,7 @@
 				/></Bereich
 			>
 
+		</div>
 		
 			<ButtonWeiterHilfe {spaeterWeitermachen}
 			bind:ausweis
@@ -1012,15 +1017,8 @@
 			bind:aufnahme
 			ausweisart={Enums.Ausweisart.BedarfsausweisWohnen}
 			/>
-		<BilderZusatzsysteme
+		
-				{ausweis}
+
-				{objekt}
+
-				{aufnahme}
+	
-				{images}
-			/>
-			<hr />
-			<div class="flex flex-row justify-between">
-				<button class="button">Weiter</button>
-			</div>
-	</div>
 </form>

src/style/global.css

@@ -48,7 +48,7 @@ main{
 }
 
 .button {
-	@apply w-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
+	@apply w-full sm:w-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
 	hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
 }