Footer gemäss Vorlage neu aufgebaut

index.html

@@ -202,21 +202,27 @@
 
         <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__column footer__column--left">
+              <img
+                class="brand brand--bottom footer__brand"
+                src="./media/logo_unten.svg"
+                alt="Fabienne Foehn"
+              />
 
               <div class="footer__contact">
                 <a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
                 <a href="tel:+41786001411">+41 78 600 14 11</a>
               </div>
+            </div>
 
+            <div class="footer__column footer__column--right">
               <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>
+
+              <div class="footer__claim-meta">
+                <img class="footer__wave" src="./media/welle_unten_seite.svg" alt="" aria-hidden="true" />
                 <span>© 2026 Naurua GmbH</span>
               </div>
             </div>

styles.css

@@ -485,63 +485,74 @@ button {
 }
 
 .footer {
-  position: relative;
+  border-top: 12px solid var(--bg-lime);
-  min-height: 320px;
-  border-top: 18px solid var(--bg-lime);
 }
 
 .footer__inner {
-  position: relative;
+  display: grid;
-  min-height: 302px;
+  grid-template-columns: minmax(240px, 0.95fr) minmax(420px, 1.15fr);
-  padding: 0 clamp(2.5rem, 6vw, 5rem);
+  align-items: end;
+  gap: clamp(2rem, 7vw, 6rem);
+  min-height: 325px;
+  padding: clamp(2.8rem, 5vw, 4.6rem) clamp(2.5rem, 6vw, 5rem)
+    clamp(2rem, 4vw, 3rem);
+}
+
+.footer__column {
+  display: flex;
+}
+
+.footer__column--left {
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100%;
+}
+
+.footer__column--right {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 100%;
 }
 
 .footer__brand {
-  position: absolute;
+  width: clamp(240px, 23vw, 305px);
-  top: 73px;
-  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: 0.2rem;
+  gap: 0.12rem;
 }
 
 .footer__contact a {
   width: fit-content;
   color: inherit;
   text-decoration: none;
-  font-size: clamp(1.05rem, 1.72vw, 1.15rem);
+  font-size: clamp(1.2rem, 1.95vw, 1.55rem);
   font-weight: var(--font-weight-black);
   line-height: 1.05;
+  letter-spacing: -0.04em;
   text-transform: uppercase;
 }
 
 .footer__claim {
-  position: absolute;
-  top: 38px;
-  right: clamp(2.5rem, 5vw, 5rem);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: clamp(490px, 47vw, 610px);
+  width: min(100%, 620px);
-  gap: 0.3rem;
+  gap: 0.45rem;
 }
 
 .section-title--claim {
-  font-size: clamp(4rem, 5.85vw, 5.85rem);
+  font-size: clamp(4rem, 5.7vw, 5.8rem);
   max-width: none;
   line-height: 0.92;
 }
 
 .footer__claim p {
   margin: 0;
-  font-size: clamp(1rem, 1.2vw, 1.15rem);
+  font-size: clamp(1.05rem, 1.3vw, 1.55rem);
   font-weight: var(--font-weight-bold);
 }
 
@@ -549,26 +560,21 @@ button {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 1rem;
+  gap: 0.85rem;
   width: 100%;
-  margin-top: 0.9rem;
+  margin-top: 1.6rem;
 }
 
 .footer__claim span {
-  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
+  font-size: clamp(1rem, 1.15vw, 1.1rem);
   font-weight: var(--font-weight-bold);
 }
 
-.footer__accent {
+.footer__wave {
-  width: clamp(255px, 22vw, 300px);
+  width: clamp(240px, 24vw, 330px);
   margin-left: auto;
 }
 
-.footer__accent img:last-child {
-  width: 82%;
-  margin: -0.85rem 0 0 auto;
-}
-
 .contact-flyover {
   position: fixed;
   inset: 0;
@@ -823,7 +829,6 @@ button {
   }
 
   .footer__claim {
-    position: static;
     width: 100%;
   }
 
@@ -832,17 +837,16 @@ button {
   }
 
   .footer__inner {
-    display: flex;
+    grid-template-columns: 1fr;
-    flex-direction: column;
+    gap: 2rem;
-    gap: 1.8rem;
     min-height: auto;
     padding-top: 2.6rem;
     padding-bottom: 2rem;
   }
 
-  .footer__brand,
+  .footer__column--left,
-  .footer__contact {
+  .footer__column--right {
-    position: static;
+    min-height: auto;
   }
 
   .footer__brand {
@@ -855,9 +859,10 @@ button {
 
   .footer__claim-meta {
     align-items: flex-start;
+    margin-top: 1.15rem;
   }
 
-  .footer__accent {
+  .footer__wave {
     width: 180px;
     margin-top: 0.5rem;
     margin-left: 0;