Footer neu layouten

index.html

@@ -201,21 +201,26 @@
         </section>
 
         <footer class="section section--light footer" id="kontakt">
-          <div class="section__content footer__contact">
+          <div class="section__content footer__inner">
+            <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>
 
-          <div class="section__content footer__claim">
+            <div class="footer__claim">
               <h2 class="section-title section-title--claim">Wer losgeht, kommt an.</h2>
               <p>Wer nicht losgeht bleibt stehen.</p>
+              <div class="footer__claim-meta">
                 <div class="footer__accent" aria-hidden="true">
                   <img src="./media/striche_blau_unter_wort.svg" alt="" />
                   <img src="./media/strichlein_rgruen_unter_wort.svg" alt="" />
                 </div>
                 <span>© 2026 Naurua GmbH</span>
               </div>
+            </div>
+          </div>
+          <img class="footer__wave" src="./media/welle_unten_seite.svg" alt="" aria-hidden="true" />
         </footer>
       </main>
     </div>

styles.css

@@ -101,8 +101,7 @@ button {
 }
 
 .hero,
-.about,
-.footer {
+.about {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -486,7 +485,19 @@ button {
 }
 
 .footer {
+  padding-bottom: clamp(4.5rem, 9vw, 8rem);
+}
+
+.footer__inner {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+  gap: clamp(2rem, 5vw, 5rem);
   align-items: end;
+  min-height: clamp(320px, 31vw, 420px);
+  padding-top: clamp(3rem, 5vw, 4.5rem);
+  padding-bottom: clamp(2.5rem, 4vw, 4rem);
 }
 
 .footer__contact {
@@ -494,51 +505,72 @@ button {
   flex-direction: column;
   gap: 1.05rem;
   justify-content: end;
-  padding-top: clamp(3rem, 5vw, 4.5rem);
-  padding-bottom: clamp(3rem, 5vw, 4.5rem);
+  align-self: end;
+  padding: 0;
 }
 
 .footer__contact a {
   width: fit-content;
   color: inherit;
   text-decoration: none;
-  font-size: clamp(1.2rem, 1.6vw, 2rem);
+  font-size: clamp(1.1rem, 1.75vw, 2rem);
+  font-weight: var(--font-weight-black);
+  line-height: 1.05;
 }
 
 .footer__claim {
-  position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0.35rem;
-  padding-top: clamp(3rem, 5vw, 4.5rem);
-  padding-bottom: clamp(3rem, 5vw, 4.5rem);
+  justify-self: end;
+  align-self: start;
+  width: min(100%, 36rem);
+  gap: 0.45rem;
+  padding: 0;
 }
 
 .section-title--claim {
-  font-size: clamp(3rem, 5vw, 5.4rem);
-  max-width: 8.2ch;
+  font-size: clamp(3.35rem, 5.7vw, 5.85rem);
+  max-width: 7.7ch;
+  line-height: 0.92;
 }
 
 .footer__claim p {
+  margin: 0;
   font-weight: var(--font-weight-bold);
 }
 
+.footer__claim-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1.2rem;
+  width: 100%;
+  margin-top: 1.15rem;
+}
+
 .footer__claim span {
-  margin-top: 1.8rem;
   font-size: 1rem;
+  font-weight: var(--font-weight-bold);
 }
 
 .footer__accent {
-  position: absolute;
-  right: 2.2rem;
-  bottom: 3.6rem;
-  width: 230px;
+  width: clamp(220px, 22vw, 300px);
+  margin-left: auto;
 }
 
 .footer__accent img:last-child {
-  width: 58%;
-  margin: -0.8rem 0 0 auto;
+  width: 78%;
+  margin: -0.95rem 0 0 auto;
+}
+
+.footer__wave {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: auto;
+  pointer-events: none;
 }
 
 .contact-flyover {
@@ -795,17 +827,33 @@ button {
   }
 
   .footer__claim {
-    padding-top: 0;
+    justify-self: start;
+    width: 100%;
   }
 
   .footer__claim h2 {
     font-size: clamp(3rem, 16vw, 4.8rem);
   }
 
+  .footer__inner {
+    grid-template-columns: 1fr;
+    align-items: start;
+    min-height: auto;
+    padding-bottom: 2rem;
+  }
+
+  .footer__contact {
+    gap: 0.8rem;
+  }
+
+  .footer__claim-meta {
+    align-items: flex-start;
+  }
+
   .footer__accent {
-    position: static;
     width: 180px;
     margin-top: 0.5rem;
+    margin-left: 0;
   }
 
   .contact-flyover__panel {