Footer Vorlage korrigieren

index.html

@@ -202,8 +202,9 @@
 
         <footer class="section section--light footer" id="kontakt">
           <div class="section__content footer__inner">
+            <img class="brand brand--bottom footer__brand" src="./media/logo_unten.svg" alt="Fabienne Foehn" />
+
             <div class="footer__contact">
-              <img class="brand brand--bottom" src="./media/logo_unten.svg" alt="Fabienne Foehn" />
               <a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
               <a href="tel:+41786001411">+41 78 600 14 11</a>
             </div>
@@ -220,7 +221,6 @@
               </div>
             </div>
           </div>
-          <img class="footer__wave" src="./media/welle_unten_seite.svg" alt="" aria-hidden="true" />
         </footer>
       </main>
     </div>

styles.css

@@ -485,58 +485,63 @@ button {
 }
 
 .footer {
-  padding-bottom: clamp(4.5rem, 9vw, 8rem);
+  position: relative;
+  min-height: 320px;
+  border-top: 18px solid var(--bg-lime);
 }
 
 .footer__inner {
   position: relative;
-  z-index: 1;
+  min-height: 302px;
-  display: grid;
+  padding: 0 clamp(2.5rem, 6vw, 5rem);
-  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+}
-  gap: clamp(2rem, 5vw, 5rem);
+
-  align-items: end;
+.footer__brand {
-  min-height: clamp(320px, 31vw, 420px);
+  position: absolute;
-  padding-top: clamp(3rem, 5vw, 4.5rem);
+  top: 73px;
-  padding-bottom: clamp(2.5rem, 4vw, 4rem);
+  left: clamp(2.9rem, 5vw, 5rem);
+  width: clamp(240px, 22vw, 290px);
 }
 
 .footer__contact {
+  position: absolute;
+  left: clamp(2.9rem, 5vw, 5rem);
+  bottom: 18px;
   display: flex;
   flex-direction: column;
-  gap: 1.05rem;
+  gap: 0.2rem;
-  justify-content: end;
-  align-self: end;
-  padding: 0;
 }
 
 .footer__contact a {
   width: fit-content;
   color: inherit;
   text-decoration: none;
-  font-size: clamp(1.1rem, 1.75vw, 2rem);
+  font-size: clamp(1.05rem, 1.72vw, 1.15rem);
   font-weight: var(--font-weight-black);
   line-height: 1.05;
+  text-transform: uppercase;
 }
 
 .footer__claim {
+  position: absolute;
+  top: 38px;
+  right: clamp(2.5rem, 5vw, 5rem);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  justify-self: end;
+  width: clamp(490px, 47vw, 610px);
-  align-self: start;
+  gap: 0.3rem;
-  width: min(100%, 36rem);
-  gap: 0.45rem;
-  padding: 0;
 }
 
 .section-title--claim {
-  font-size: clamp(3.35rem, 5.7vw, 5.85rem);
+  font-size: clamp(4rem, 5.85vw, 5.85rem);
-  max-width: 7.7ch;
+  max-width: none;
   line-height: 0.92;
 }
 
 .footer__claim p {
   margin: 0;
+  font-size: clamp(1rem, 1.2vw, 1.15rem);
   font-weight: var(--font-weight-bold);
 }
 
@@ -544,33 +549,24 @@ button {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 1.2rem;
+  gap: 1rem;
   width: 100%;
-  margin-top: 1.15rem;
+  margin-top: 0.9rem;
 }
 
 .footer__claim span {
-  font-size: 1rem;
+  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
   font-weight: var(--font-weight-bold);
 }
 
 .footer__accent {
-  width: clamp(220px, 22vw, 300px);
+  width: clamp(255px, 22vw, 300px);
   margin-left: auto;
 }
 
 .footer__accent img:last-child {
-  width: 78%;
+  width: 82%;
-  margin: -0.95rem 0 0 auto;
+  margin: -0.85rem 0 0 auto;
-}
-
-.footer__wave {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: auto;
-  pointer-events: none;
 }
 
 .contact-flyover {
@@ -827,7 +823,7 @@ button {
   }
 
   .footer__claim {
-    justify-self: start;
+    position: static;
     width: 100%;
   }
 
@@ -836,14 +832,25 @@ button {
   }
 
   .footer__inner {
-    grid-template-columns: 1fr;
+    display: flex;
-    align-items: start;
+    flex-direction: column;
+    gap: 1.8rem;
     min-height: auto;
+    padding-top: 2.6rem;
     padding-bottom: 2rem;
   }
 
+  .footer__brand,
   .footer__contact {
-    gap: 0.8rem;
+    position: static;
+  }
+
+  .footer__brand {
+    width: min(260px, 72vw);
+  }
+
+  .footer__contact {
+    gap: 0.5rem;
   }
 
   .footer__claim-meta {