Fixed Desktop and Mobile Layout

src/assets/img/greenClaim.svg

@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 443.5 67.1"
+	 style="enable-background:new 0 0 443.5 67.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFE100;}
+	.st1{fill:#145F32;}
+	.st2{display:none;}
+	.st3{display:inline;}
+	.st4{fill:none;stroke:#E5007E;stroke-width:0.25;}
+	.st5{display:inline;fill:#E5007E;}
+	.st6{font-family:'BereitBold-Oblique';}
+	.st7{font-size:43.935px;}
+	.st8{display:inline;fill:#1D1D1B;}
+	.st9{display:inline;fill:#9EC764;}
+</style>
+<metadata>
+	<sfw  xmlns="&ns_sfw;">
+		<slices></slices>
+		<sliceSourceBounds  bottomLeftOrigin="true" height="16383" width="485" x="19" y="-8613"></sliceSourceBounds>
+	</sfw>
+</metadata>
+<g id="Ebene_1">
+	<polygon class="st0" points="11.7,1.8 440.7,1.8 430.6,65.6 1.6,65.6 	"/>
+	<g>
+		<path class="st1" d="M35.6,12.5c6.9,0,10.2,3.2,9.3,9.3l-0.7,4.7c-0.4,2.9-1.6,4.8-4.5,6c2.7,1.3,3.5,3.4,3.1,6.5l-1,6.4
+			c-0.9,6.1-4.9,9.3-11.3,9.3H19.3l6.7-42.2H35.6z M34.4,38c0.3-1.5-0.4-2.2-1.5-2.2h-1.9L29,48H31c1.2,0,1.9-0.7,2.2-2.4L34.4,38z
+			 M33.5,30.3c1.3,0,1.8-0.4,2.1-2.2l1-6.3c0.3-1.6-0.2-2.4-1.4-2.4h-1.7l-1.7,10.9H33.5z"/>
+		<path class="st1" d="M64.8,32.2l-1.4,9.1H52.6l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8H63l-0.4,2.8
+			c-0.9,6-5,8.3-10.3,8.3c-5.4,0-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C62.3,22.8,65.8,25.3,64.8,32.2z M53.1,38.1h3.2
+			l1.2-7.6c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L53.1,38.1z"/>
+		<path class="st1" d="M76.1,27.5c1.5-3.2,3.9-4.8,6.9-4.5l-1.2,7.2c-4.2-0.5-6.3,1-7,5.2l-3,19.2h-7.6l5-31.3h7.6L76.1,27.5z"/>
+		<path class="st1" d="M101.6,32.2l-1.4,9.1H89.4l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8h7.6l-0.4,2.8
+			c-0.9,6-5,8.3-10.3,8.3c-5.4,0-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C99.1,22.8,102.7,25.3,101.6,32.2z M89.9,38.1h3.2
+			l1.2-7.6c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L89.9,38.1z"/>
+		<path class="st1" d="M101.2,54.7l5-31.3h7.6l-5,31.3H101.2z M107,21.1l1.1-6.6h6.7l-1.1,6.6H107z"/>
+		<path class="st1" d="M125,28.8l-2.3,14.6c-0.6,4-0.7,6,2.1,6c0.4,0,0.8-0.1,1.3-0.2l-0.8,5.4c-0.9,0.4-2.3,0.6-3.6,0.6
+			c-5.2,0-8-2.5-7.1-8.3l2.9-18.2h-2.2l0.8-5.4h2.2l1.2-7.6h7.6l-1.2,7.6h3.7l-0.9,5.4H125z"/>
+		<path class="st1" d="M126.5,60.3l2.8-5.6h-1.9l1.2-7.7h7.7l-1.2,7.7l-6.1,5.6H126.5z"/>
+		<path class="st1" d="M170.7,23.3h7.6l-10.2,31.3h-7.6l0.1-12.6l-4,12.6H149l-0.3-31.3h7.6l-0.6,18.4l5.2-18.4h5.3l-0.6,18.4
+			L170.7,23.3z"/>
+		<path class="st1" d="M197.4,32.2l-1.4,9.1h-10.8l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8h7.6l-0.4,2.8
+			c-0.9,6-5,8.3-10.3,8.3c-5.4,0-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C194.9,22.8,198.5,25.3,197.4,32.2z M185.7,38.1h3.2
+			l1.2-7.6c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L185.7,38.1z"/>
+		<path class="st1" d="M197,54.7l5-31.3h7.6l-5,31.3H197z M202.8,21.1l1.1-6.6h6.7l-1.1,6.6H202.8z"/>
+		<path class="st1" d="M214.8,12.5h7.6l-6.7,42.2h-7.6L214.8,12.5z"/>
+		<path class="st1" d="M228.5,54.7l6.7-42.2h8.5l-6.7,42.2H228.5z"/>
+		<path class="st1" d="M262.9,29.6l-4,25h-7.6l3.7-23.9c0.2-1.3-0.2-1.9-1.2-1.9c-0.7,0-1.3,0.3-1.7,0.9l-4,24.9h-7.6l6.7-42.2h7.6
+			l-2.1,13c1.1-1.4,3-2.7,5.5-2.7C261.9,22.8,263.7,25,262.9,29.6z"/>
+		<path class="st1" d="M274,27.5c1.5-3.2,3.9-4.8,6.9-4.5l-1.2,7.2c-4.2-0.5-6.3,1-7,5.2l-3,19.2h-7.6l5-31.3h7.6L274,27.5z"/>
+		<path class="st1" d="M308.8,32.2l-1.4,9.1h-10.8l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8h7.6l-0.4,2.8
+			c-0.9,6-5,8.3-10.3,8.3s-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C306.2,22.8,309.8,25.3,308.8,32.2z M297.1,38.1h3.2
+			l1.2-7.6c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L297.1,38.1z"/>
+		<path class="st1" d="M309.2,45.7l0.2-1.4h7.6l-0.5,3.2c-0.3,1.6,0.3,2.3,1.5,2.3c0.9,0,1.6-0.6,1.8-2.1l0.4-2.4
+			c0.4-2.5-0.8-2.7-4.5-4.4c-2.5-1.2-5.1-3.5-4.3-8.6l0.2-1.1c0.9-6.1,4.8-8.4,10.2-8.4s9.1,2.6,8.1,9.5l-0.2,1.2h-7.6l0.4-2.8
+			c0.3-1.7-0.3-2.4-1.5-2.4c-1,0-1.6,0.6-1.8,1.8l-0.4,2.4c-0.4,2.4,0.6,3,3.8,4.4c4.1,1.9,5.8,4.1,5.2,8l-0.3,1.9
+			c-0.9,6-5,8.3-10.5,8.3C311.8,55.2,308.1,52.6,309.2,45.7z"/>
+		<path class="st1" d="M339.3,45.7l0.2-1.4h7.6l-0.5,3.2c-0.3,1.6,0.3,2.3,1.5,2.3c0.9,0,1.6-0.6,1.8-2.1l0.4-2.4
+			c0.4-2.5-0.8-2.7-4.5-4.4c-2.5-1.2-5.1-3.5-4.3-8.6l0.2-1.1c0.9-6.1,4.8-8.4,10.2-8.4s9.1,2.6,8.1,9.5l-0.2,1.2h-7.6l0.4-2.8
+			c0.3-1.7-0.3-2.4-1.5-2.4c-1,0-1.6,0.6-1.8,1.8l-0.4,2.4c-0.4,2.4,0.6,3,3.8,4.4c4.1,1.9,5.8,4.1,5.2,8l-0.3,1.9
+			c-0.9,6-5,8.3-10.5,8.3C341.9,55.2,338.2,52.6,339.3,45.7z"/>
+		<path class="st1" d="M380.7,32.2l-1.4,9.1h-10.8l-1,6.3c-0.2,1.5,0.3,2.2,1.4,2.2c1,0,1.5-0.6,1.7-1.8l0.6-3.8h7.6l-0.4,2.8
+			c-0.9,6-5,8.3-10.3,8.3s-9-2.5-7.9-9.4l2.4-14.6c1-6.1,4.8-8.4,10.2-8.4C378.2,22.8,381.8,25.3,380.7,32.2z M369,38.1h3.2l1.2-7.6
+			c0.2-1.5-0.3-2.2-1.4-2.2c-0.9,0-1.5,0.6-1.7,1.8L369,38.1z"/>
+		<path class="st1" d="M380.3,54.7l5-31.3h7.6l-5,31.3H380.3z M386.2,21.1l1.1-6.6h6.7l-1.1,6.6H386.2z"/>
+		<path class="st1" d="M408.5,12.5h7.6l-6.7,42.2h-7.1l0.5-3.1c-1.5,2.3-3.6,3.6-6,3.6c-3.4,0-5.6-2-4.9-6.6l3-18.2
+			c0.8-5.1,3.6-7.6,7.7-7.6c1.6,0,2.9,0.4,4.1,1.2L408.5,12.5z M402.9,48.4l3.1-19.5c-0.3-0.5-0.8-0.7-1.4-0.7
+			c-1.1,0-1.7,0.5-1.9,2.1l-2.7,17.2c-0.2,1.4,0.2,2,1.2,2C401.8,49.4,402.3,49,402.9,48.4z"/>
+		<path class="st1" d="M412.6,54.7l1.2-7.7h7.7l-1.2,7.7H412.6z"/>
+	</g>
+</g>
+<g id="Hilfslinien" class="st2">
+	<g class="st3">
+		<rect x="-18.9" y="44.2" class="st4" width="484.7" height="10.4"/>
+		<rect x="-18.9" y="33.8" class="st4" width="484.7" height="10.4"/>
+		<rect x="-18.9" y="23.3" class="st4" width="484.7" height="10.4"/>
+		<rect x="-18.9" y="28.7" class="st4" width="484.7" height="5.1"/>
+		<rect x="-18.9" y="31.4" class="st4" width="484.7" height="2.4"/>
+	</g>
+</g>
+<g id="Abstände" class="st2">
+	<text transform="matrix(1 0 0 1 5.1815 54.6733)" class="st5 st6 st7">x</text>
+	<polygon class="st8" points="2.7,31.2 1.3,34.6 1,31.2 -2.4,31.2 -1,37.5 -4.6,44.4 -1.2,44.4 0.3,40.8 0.5,44.4 4,44.4 2.5,38 
+		6.2,31.2 	"/>
+	<polygon class="st9" points="-7.8,33.7 -9,36.4 -9.2,33.7 -12,33.7 -10.9,38.8 -13.9,44.4 -11.1,44.4 -9.8,41.5 -9.6,44.4 
+		-6.8,44.4 -8,39.2 -5,33.7 	"/>
+	<polygon class="st9" points="31,1.8 29.9,4.6 29.6,1.8 26.8,1.8 28,7 25,12.5 27.8,12.5 29,9.6 29.2,12.5 32,12.5 30.9,7.4 
+		33.8,1.8 	"/>
+	<polygon class="st9" points="31,54.9 29.9,57.6 29.6,54.9 26.8,54.9 28,60 25,65.6 27.8,65.6 29,62.7 29.2,65.6 32,65.6 30.9,60.4 
+		33.8,54.9 	"/>
+	<text transform="matrix(1 0 0 1 418.2047 54.5796)" class="st5 st6 st7">x</text>
+</g>
+</svg>

src/components/Categories/Categories.scss

@@ -1,24 +1,39 @@
 .Categories {
+  max-width: 1000px;
+  margin: 0 auto;
   font-family: "PT Sans", sans-serif;
   padding: 1rem;
+
   .categories-title {
+    font-family: "bereit", sans-serif;
+    color: var(--green-color);
     font-weight: bold;
-    font-size: 1.3rem;
+    font-size: 1.5rem;
     padding-bottom: 2rem;
+    @media screen and (min-width: 750px) {
+      font-size: 2rem;
+    }
   }
+
   .categories-content {
     padding-bottom: 2rem;
+    @media screen and (min-width: 750px) {
+      font-size: 1.3rem;
+    }
   }
+
   .categories-list {
-    margin-bottom: 2rem;
-  }
-  .categories-button {
-    padding: 1rem;
-    background: var(--salmon-color);
-    border-radius: 1rem;
-    box-shadow: var(--box-shadow);
-    a {
+    max-width: 800px;
+    margin: 1rem auto;
+
+    .categories-button {
+      margin: 2rem 0;
+      padding: 1rem;
+      background: var(--salmon-color);
+      border-radius: .3rem;
+      border: none;
       color: var(--text-light-color);
+      font-size: 1.1rem;
       font-weight: bold;
       text-decoration: none;
     }

src/components/Categories/Categories.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from "react";
 import "./Categories.scss";
 import { url } from "../../variables";
-import { NavLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import PartnerLink from "../PartnerLink/PartnerLink";
 import CategoryLink from "../CategoryLink/CategoryLink";
@@ -59,9 +59,11 @@ function Categories() {
             />
           );
         })}
-      </div>
-      <div className="categories-button">
-        <NavLink to={"/partner"}>Hier geht es zu unseren Partner*innen</NavLink>
+        <Link to="/partner">
+          <button type="button" className="categories-button">
+            Zu den Beteiligten
+          </button>
+        </Link>
       </div>
     </div>
   );

src/components/CategoryLink/CategoryLink.scss

@@ -5,6 +5,13 @@
     .acc-sum {
       margin-top: .5rem;
       color: white;
+      .MuiIconButton-label {
+        color: white;
+        .MuiSvgIcon-root {
+          width: 2rem;
+          height: 2rem;
+        }
+      }
       p {
         font-family: "bereit", sans-serif;
       font-weight: bold;
@@ -15,21 +22,28 @@
       display: flex;
       flex-direction: column;
       color: white;
-      box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5);
       p {
         padding-bottom: 1rem;
       }
     }
   }
   .category-button {
+    display: flex;
+    flex-direction: row;
+    margin: 1rem auto;
     padding: 1rem;
     background: var(--salmon-color);
-    border-radius: 1rem;
-    box-shadow: var(--box-shadow);
-    a {
-      color: var(--text-light-color);
-      font-weight: bold;
-      text-decoration: none;
+    border-radius: .3rem;
+    border: none;
+    color: var(--text-light-color);
+    font-size: 1.1rem;
+    font-weight: bold;
+    text-decoration: none;
+
+    svg {
+      margin-left: 1rem;
+      height: 1.1rem;
+      width: 1.1rem;
     }
   }
 }

src/components/CategoryLink/CategoryLink.tsx

@@ -6,6 +6,7 @@ import AccordionSummary from "@material-ui/core/AccordionSummary";
 import AccordionDetails from "@material-ui/core/AccordionDetails";
 import Typography from "@material-ui/core/Typography";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
 
 interface CategoryProps {
   title: string;
@@ -27,9 +28,15 @@ const CategoryLink: React.FC<CategoryProps> = (category) => {
         </AccordionSummary>
         <AccordionDetails className="acc-detail">
           <Typography className="category-text">{category.content}</Typography>
-          <div className="category-button">
-            <a href={category.url}>Zur Datenquelle</a>
-          </div>
+          <button
+            className="category-button"
+            onClick={(e) => {
+              e.preventDefault();
+              window.location.href = category.url;
+            }}
+          >
+            <span>Zur Datenquelle</span> <ArrowForwardIcon />
+          </button>
         </AccordionDetails>
       </Accordion>
     </div>

src/components/Main/Main.scss

@@ -1,23 +1,43 @@
 .Main {
+  max-width: 1000px;
+  margin: 0 auto;
   font-family: "PT Sans", sans-serif;
   padding: 1rem;
+
   .main-title {
+    font-family: "bereit", sans-serif;
+    color: var(--green-color);
     font-weight: bold;
-    font-size: 1.3rem;
+    font-size: 1.5rem;
     padding-bottom: 2rem;
+    @media screen and (min-width: 750px) {
+      font-size: 2rem;
+    }
   }
   .main-content {
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
+    @media screen and (min-width: 750px) {
+      font-size: 1.3rem;
+    }
+  }
+  .main-image {
+    width: 90%;
+    max-width: 400px;
+    margin: 0 auto;
+    padding-bottom: 1rem;
+    img {
+      width: 100%;
+    }
   }
   .main-button {
+    margin: 2rem 0;
     padding: 1rem;
     background: var(--salmon-color);
-    border-radius: 1rem;
-    box-shadow: var(--box-shadow);
-    a {
-      color: var(--text-light-color);
-      font-weight: bold;
-      text-decoration: none;
-    }
+    border-radius: .3rem;
+    border: none;
+    color: var(--text-light-color);
+    font-size: 1.1rem;
+    font-weight: bold;
+    text-decoration: none;
   }
 }

src/components/Main/Main.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { url } from "../../variables";
 import "./Main.scss";
-import { NavLink } from "react-router-dom";
+import mainImage from "../../assets/img/AnordnungKarten.png";
+import { Link, NavLink } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 
 function Main() {
@@ -31,11 +32,14 @@ function Main() {
       <div className="main-content">
         <ReactMarkdown>{content}</ReactMarkdown>
       </div>
-      <div className="main-button">
-        <NavLink to={"/kategorien"}>
-          Hier geht es zu den Kategoriebeschreibungen
-        </NavLink>
+      <div className="main-image">
+        <img src={mainImage} alt="Quartett Karten" />
       </div>
+      <Link to="/kategorien">
+        <button type="button" className="main-button">
+          Zu den Kategoriebeschreibungen
+        </button>
+      </Link>
     </div>
   );
 }

src/components/Partners/Partners.scss

@@ -1,26 +1,39 @@
 .Partners {
+  max-width: 1000px;
+  margin: 0 auto;
   font-family: "PT Sans", sans-serif;
   padding: 1rem;
+
   .partners-title {
+    font-family: "bereit", sans-serif;
+    color: var(--green-color);
     font-weight: bold;
-    font-size: 1.3rem;
+    font-size: 1.5rem;
     padding-bottom: 2rem;
+
+    @media screen and (min-width: 750px) {
+      font-size: 2rem;
+    }
   }
   .partners-content {
     padding-bottom: 2rem;
+
+    @media screen and (min-width: 750px) {
+      font-size: 1.3rem;
+    }
   }
   .partner-links {
     margin-bottom: 2rem;
   }
   .partners-button {
+    margin: 2rem 0;
     padding: 1rem;
     background: var(--salmon-color);
-    border-radius: 1rem;
-    box-shadow: var(--box-shadow);
-    a {
-      color: var(--text-light-color);
-      font-weight: bold;
-      text-decoration: none;
-    }
+    border-radius: .3rem;
+    border: none;
+    color: var(--text-light-color);
+    font-size: 1.1rem;
+    font-weight: bold;
+    text-decoration: none;
   }
 }

src/components/Partners/Partners.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from "react";
 import "./Partners.scss";
 import { url } from "../../variables";
-import { NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import PartnerLink from "../PartnerLink/PartnerLink";
 
@@ -50,9 +50,12 @@ function Partners() {
         {partners.map((t: PartnersProps): ReactElement => {
           return <PartnerLink key={t.id} url={t.url} name={t.name} />;
         })}
-      </div>
-      <div className="partners-button">
-        <NavLink to={"/"}>Hier geht es zurück zur Startseite</NavLink>
+
+        <Link to="/">
+          <button type="button" className="partners-button">
+            Zurück zur Startseite
+          </button>
+        </Link>
       </div>
     </div>
   );

src/components/footer/Footer.scss

@@ -4,6 +4,7 @@
   color: var(--yellow-color);
 
   .claim-container {
+    max-width: 800px;
     padding: 1rem;
     width: 85%;
     margin: 0 auto;
@@ -12,6 +13,7 @@
     }
   }
   .info-container {
+    max-width: 800px;
     width: 85%;
     margin: 0 auto;
     padding-bottom: 1rem;
@@ -27,6 +29,9 @@
       justify-content: space-between;
       align-items: flex-end;
       margin-bottom: .5rem;
+      @media screen and (min-width: 750px) {
+        justify-content: left;
+      }
 
       a {
         margin-right: .5rem;
@@ -34,6 +39,11 @@
         font-size: .8rem;
         text-decoration: none;
 
+        @media screen and (min-width: 750px) {
+          margin-right: 2rem;
+          font-size: 1.2rem;
+        }
+
         &:hover {
           color: var(--text-light-color);
           font-weight: bold;
@@ -43,8 +53,17 @@
     .logo-container {
       width: 25%;
       margin-left: 1rem;
+
+      @media screen and (min-width: 750px) {
+        position: relative;
+        align-content: flex-end;
+        padding-right: 2rem;
+      }
       .logo {
+        position: relative;
+        float: right;
         max-width: 50px;
+        align-self: flex-end;
       }
     }
   }

src/components/footer/Footer.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import "./Footer.scss";
 import { NavLink } from "react-router-dom";
 import greenLogo from "../../assets/img/greenLogo.svg";
-import greenClaim from "../../assets/img/greenClaim.png";
+import greenClaim from "../../assets/img/greenClaim.svg";
 
 function Footer() {
   return (

src/components/header/Header.scss

@@ -1,3 +1,6 @@
 .header-container {
   background-color: var(--campaign-color);
+  @media screen and (min-width: 750px) {
+    padding: 0 3rem;
+  }
 }

src/components/navigation/Navigation.scss

@@ -1,13 +1,36 @@
 .navbar {
-  padding: 2rem 1rem;
+  padding: 1rem;
   height: 15vh;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  max-width: 1280px;
+  margin: 0 auto;
 
-  .logo-container {
-    .logo {
-      width: 75px;
+  @media screen and (min-width: 750px) {
+    padding: 1rem 0;
+    max-height: 100px;
+  }
+
+  .left-container {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .logo-container {
+      height: 95%;
+      .logo {
+        height: 100%;
+      }
+    }
+    span {
+      margin-left: 1rem;
+      color: white;
+      font-size: 2rem;
+      @media screen and (min-width: 750px) {
+        margin-left: 2rem;
+      }
     }
   }
 
@@ -20,7 +43,7 @@
       display: none;
     }
     .active {
-      color: #f8dc6d;
+      color: var(--yellow-color);
       cursor: default;
     }
     a {

src/components/navigation/Navigation.tsx

@@ -20,13 +20,20 @@ function MobileNav() {
 
   return (
     <div className="navbar">
-      <div className="logo-container">
-        <NavLink to={"/"}>
-          <img className="logo" src={greenLogo} alt="green" />
-        </NavLink>
+      <div className="left-container">
+        <div className="logo-container">
+          <NavLink to={"/"}>
+            <img className="logo" src={greenLogo} alt="green" />
+          </NavLink>
+        </div>
+        <span>Grünes Quartett</span>
       </div>
       <div className="link-container">
-        <h1>LINK</h1>
+        <NavLink exact to={"/"}>
+          Startseite
+        </NavLink>
+        <NavLink to={"/kategorien"}>Kategorien</NavLink>
+        <NavLink to={"/partner"}>Partner</NavLink>
       </div>
       <div className="mobile-container">
         <Button