added button to start

pass/public/styles/base.less

@@ -53,6 +53,16 @@ button {
   cursor: pointer;
 }
 
+.button {
+  display: block;
+  border: 1px solid #777;
+  padding: 1rem;
+  color: white;
+  text-decoration: none;
+  background-color: #3a3af9;
+  width: max-content;
+}
+
 nav {
   @logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo
   @nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row

pass/public/styles/index.less

@@ -91,12 +91,6 @@ html {
       grid-area: call-to-action;
       align-self: center;
       justify-self: end;
-      display: block;
-      border: 1px solid #777;
-      padding: 1rem;
-      color: white;
-      text-decoration: none;
-      background-color: #3a3af9;
       margin: 1rem 0 1rem 1rem;
     }
 
@@ -154,7 +148,7 @@ html {
 
 #advantages {
   @advantages-breakpoint: 750px;
-  max-width: 1500px;
+  max-width: 1200px;
   display: grid;
   margin: 4rem auto;
   gap: 4rem;
@@ -218,9 +212,10 @@ html {
     }
   }
 
-  #no-logging {
+  #no-logging,
+  #no-tradeoff {
     > img {
-      max-width: 10em;
+      width: 10em;
     }
   }
 }
@@ -287,6 +282,12 @@ html {
       }
     }
   }
+
+  > #how-it-works-action {
+    display: flex;
+    justify-content: center;
+    padding-top: 4rem;
+  }
 }
 
 #offers,

pass/views/index.ejs

@@ -21,7 +21,7 @@
           </button>
         </div>
       </div>
-      <a class="call-to-action" href="#how-it-works">So funktioniert es</a>
+      <a class="call-to-action button" href="#how-it-works">So funktioniert es</a>
     </div>
   </div>
   <div id="advantages">
@@ -79,6 +79,9 @@
         </div>
       </li>
     </ol>
+    <div id="how-it-works-action">
+      <a href="#" class="button">Los geht's</a>
+    </div>
   </div>
   <div id="offers">
     <form class="offer" action="/checkout">