Startseite fertiggestellt.

components/Footer.module.css

@@ -1,15 +1,9 @@
-/*
-   FOOTER
-   Datei: components/Footer.module.css
-*/
-
 :root {
-  --footer-bg: #272727 ;
-  --footer-text: #a1a1aa;
+  --footer-bg: #272727;
+  --footer-text: #adadb3;
   --footer-text-hover: #ffffff;
   --footer-title: #ffffff;
   --footer-divider: rgba(255, 255, 255, 0.1);
-  --footer-padding-y: clamp(3rem, 6vw, 5rem);
   --footer-gap: clamp(2rem, 5vw, 4rem);
 }
 
@@ -17,7 +11,6 @@
 .footer {
   background-color: var(--footer-bg);
   color: var(--footer-text);
-  font-family: inherit;
 }
 
 .footer a:focus-visible {
@@ -28,7 +21,8 @@
 .footer__inner {
   max-width: var(--container-width);
   margin-inline: auto;
-  padding: var(--footer-padding-y) clamp(1rem, 5vw, 2rem);
+  padding-inline: var(--space-4);
+  padding-block: var(--space-16);
 }
 
 /* Top */
@@ -38,26 +32,16 @@
   gap: var(--footer-gap);
 }
 
-@media (min-width: 768px) {
-  .footer__top {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media (min-width: 1024px) {
-  .footer__top {
-    grid-template-columns: 1.5fr 1fr;
-  }
-}
-
 /* Brand */
+.footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
 .footer__logo {
   display: inline-block;
-  font-size: 1.4rem;
-  font-weight: 700;
-  color: var(--footer-title);
-  margin-bottom: 0.75rem;
-  transition: opacity 0.2s ease;
+  width: fit-content;
 }
 
 .footer__logo:hover {
@@ -65,8 +49,6 @@
 }
 
 .footer__tagline {
-  font-size: 0.9rem;
-  line-height: 1.6;
   max-width: 32ch;
   color: var(--footer-text);
 }
@@ -74,34 +56,32 @@
 /* Navigation */
 .footer__nav {
   display: flex;
-  gap: var(--footer-gap);
   flex-wrap: wrap;
+  gap: var(--footer-gap);
 }
 
 .footer__nav ul {
   list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 .footer__nav-group ul {
-  padding: 0;
-  margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.6rem;
+  gap: var(--space-2);
 }
 
 .footer__nav-title {
   display: block;
-  font-size: 0.8rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+  margin-bottom: var(--space-4);
+  font-size: var(--font-size-xxs);
+  letter-spacing: var(--letter-spacing-wide);
   color: var(--footer-title);
-  margin-bottom: 1rem;
 }
 
 .footer__nav-group a {
-  font-size: 0.9rem;
+  font-size: var(--font-size-xs);
   color: var(--footer-text);
   transition: color 0.2s ease;
 }
@@ -157,3 +137,31 @@
   border-color: rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.05);
 }
+
+/* Tablet */
+@media (min-width: 768px) {
+  .footer__top {
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+
+  .footer__nav {
+    justify-self: end;
+    text-align: left;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .footer__inner {
+    padding-inline: var(--space-6);
+  }
+
+  .footer__top {
+    grid-template-columns: 1fr auto;
+  }
+
+  .footer__nav {
+    justify-self: end;
+  }
+}