Footer neu layouten

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 {