[TASK][WIP] Perform design pass

Resources/Private/Partials/Bootstrap5/Job.html

 <div class="col-md-6 col-sm-6 col-xs-12">
-    <div class="card shadow">
-        <div class="card-header text-center bg-light">
-            <h2 class="card-title h3">{job.title}</h2>
+    <div class="card shadow-small border-top">
+        <div class="card-header text-center">
+            <h2 class="card-title h4">{job.title}</h2>
         </div>
         <div class="card-body">
             <f:if condition="{job.description}">
@@ -40,4 +40,4 @@
             </f:link.action>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>

Resources/Private/Partials/Bootstrap5/Teaser.html

 <div class="col-md">
 	<div class="default-content-element">
-        <div class="card shadow">
-            <div class="card-header text-center bg-light">
-                <h2 class="card-title h3">{job.title}</h2>
+        <div class="card shadow-small border-top">
+            <div class="card-header text-center">
+                <h2 class="card-title h4">{job.title}</h2>
             </div>
             <div class="card-body">
                 <f:if condition="{job.description}">
@@ -35,7 +35,7 @@
                 </f:if>
             </div>
             <div class="card-footer bg-light text-center">
-                <f:link.action class="sg-jobs-job card shadow" id="offer-{job.uid}" pageUid="{applyPageUid}" controller="Joblist" action="applyForm"
+                <f:link.action class="sg-jobs-job card shadow-small border-top" id="offer-{job.uid}" pageUid="{applyPageUid}" controller="Joblist" action="applyForm"
 					   pluginName="JobApplication" arguments="{jobId: job.uid}" class="btn btn-default stretched-link w-100">
                     <f:format.raw>
                         <f:translate key="frontend.jobDetailsCta" />

Resources/Private/Templates/Bootstrap5/Joblist/ApplyForm.html

@@ -40,8 +40,8 @@
                             <f:format.html parseFuncTSPath="lib.parseFunc_RTE">{job.qualification}</f:format.html>
                         </div>
                     </div>
-                    <div class="col-md-4 col-sm-6 col-xs-12">
-                        <div class="card shadow mb-4 text-bg-light">
+                    <div class="col-md-4 col-sm-6 col-xs-12 d-flex flex-column gap-8">
+                        <div class="card shadow-small border-top text-bg-light">
                             <div class="card-header pb-0">
                                 <ul>
                                     <li>
@@ -166,10 +166,9 @@
                                         </p>
                                     </div>
                                 </f:if>
-                                <hr>
                             </div>
-                            <div class="card-footer text-center pt-0">
-                                <p class="float-start">
+                            <div class="card-footer text-center text-bg-light">
+                                <p>
                                     <f:format.raw>
                                         <f:translate key="frontend.job.suggestForm" />
                                     </f:format.raw>
@@ -191,20 +190,13 @@
                             </f:else>
                         </f:if>
                         <f:if condition="{job.attachment}">
-                            <div class="card shadow mb-4 text-bg-light">
-                                <div class="card-body">
-                                    <f:link.typolink target="_blank" class="d-flex align-items-center"
-                                        parameter="{job.attachment.0.originalResource.publicUrl}">
-                                        <h:renderSvg name="fontawesome/regular/file-pdf" width="34" height="38"
-                                            color="currentColor" createColorAttribute="TRUE" />
-                                        <span class="ps-4">
-                                            <f:translate key="frontend.attachment" extensionName="SgJobs" />
-                                            <br>
-                                            (PDF, {job.attachment.0.originalResource.size -> f:format.bytes()})
-                                        </span>
-                                    </f:link.typolink>
-                                </div>
-                            </div>
+							<f:link.typolink target="_blank" class="btn btn-default d-flex w-100"
+								parameter="{job.attachment.0.originalResource.publicUrl}">
+								<h:renderSvg name="fontawesome/regular/file-pdf" width="17" height="19"
+									color="currentColor" createColorAttribute="TRUE" />
+									<f:translate key="frontend.attachment" extensionName="SgJobs" />
+									<span class="visually-hidden">(PDF, {job.attachment.0.originalResource.size -> f:format.bytes()})</span>
+							</f:link.typolink>
                         </f:if>
                     </div>
                 </div>
@@ -507,8 +499,8 @@
 </f:section>
 
 <f:section name="contactBox">
-    <div class="card shadow mb-4 text-bg-light">
-        <div class="card-header">
+    <div class="card shadow-small border-top text-bg-light">
+        <div class="card-header pt-0">
             <p class="h4">
                 <f:translate key="frontend.apply.contact" />
             </p>
@@ -535,11 +527,8 @@
                     alt="{contact.title} {contact.firstName} {contact.lastName}" />
             </f:if>
         </div>
-        <div class="card-body pt-0">
-            <div class="pb-4">
-                <hr>
-            </div>
-            <p class="h4 card-title">
+        <div class="card-footer text-bg-light">
+            <p class="fw-bolder text-center">
                 <f:translate key="frontend.apply.recommend" />
             </p>
             <base:sharer />
@@ -573,4 +562,4 @@
             </f:for>
         </ul>
     </f:form.validationResults>
-</f:section>
\ No newline at end of file
+</f:section>