added how it works area

pass/public/styles/index.less

@@ -152,13 +152,13 @@
   @advantages-breakpoint: 750px;
   max-width: 1500px;
   display: grid;
-  margin: 0 auto;
+  margin: 4rem auto;
   gap: 4rem;
-  margin-top: 4rem;
   > .advantage {
     display: grid;
     grid-template-columns: 1fr minmax(25em, 1fr);
     grid-template-areas: "image text";
+    align-items: center;
     &:nth-child(even) {
       grid-template-columns: minmax(25em, 1fr) 1fr;
       grid-template-areas: "text image";
@@ -176,7 +176,7 @@
     }
     > .text {
       grid-area: text;
-      color: #515151;
+      color: @font-color-on-white;
       max-width: 40em;
       padding-right: 1rem;
       > p {
@@ -221,6 +221,70 @@
   }
 }
 
+#how-it-works {
+  @breakpoint-how-it-works: 420px;
+  background-color: @color-main;
+  color: white;
+  line-height: 1.5;
+  padding: 4rem 1rem;
+
+  > h1 {
+    margin: 0;
+    padding: 0 0 4rem 0;
+    white-space: nowrap;
+    line-height: 1;
+    padding-top: 0;
+    text-align: center;
+    font-size: clamp(2rem, 10vw, 3rem);
+  }
+
+  > ol {
+    display: grid;
+    row-gap: 3rem;
+    max-width: 1024px;
+    margin: 0 auto;
+    list-style-type: none;
+    padding: 0;
+
+    > li {
+      counter-increment: step-counter;
+      display: grid;
+      grid-template-rows: auto auto;
+      grid-template-columns: auto auto;
+      column-gap: 2rem;
+
+      @media (max-width: @breakpoint-how-it-works) {
+        grid-template-rows: auto auto auto;
+        grid-template-columns: auto;
+        justify-items: center;
+      }
+
+      &::before {
+        content: counter(step-counter);
+        grid-row: span 2;
+        align-self: center;
+        font-size: 3rem;
+        padding: 1rem;
+        border: 1px solid white;
+        line-height: 1;
+        width: 1em;
+        text-align: center;
+        border-radius: 50%;
+        background-color: white;
+        color: @font-color-on-white;
+        @media (max-width: @breakpoint-how-it-works) {
+          grid-row: auto;
+          margin-bottom: 1rem;
+        }
+      }
+
+      > h2 {
+        margin: 0;
+      }
+    }
+  }
+}
+
 #offers,
 #continue,
 #info-container {

pass/public/styles/misc/vars.less

@@ -2,4 +2,6 @@
 @color-main-hover: lighten(@color-main, 5%);
 @color-main-font-color: white;
 
+@font-color-on-white: #515151;
+
 @body-scroll-break-point: 320px;

pass/views/index.ejs

@@ -40,12 +40,45 @@
       <img src="/images/robot.svg" alt="Image depicting a roboter">
       <div class="text">
         <h2>Ohne Logging</h2>
-        <p>Bei Ihren Internetsuchen fallen automatisch viele Daten an. Einige davon bestimmen Sie selbst (Suchanfrage, Einstellungen, ...). Andere schickt Ihr Browser automatisch (Browsername und -version, Spracheinstellungen, ...). Widerum andere (wie z.B. Ihre IP-Adresse) sind für die Kommunikation unabdingbar. Schon immer sind wir mit diesen Daten äußerst vorsichtig umgegangen und haben nur abgespeichert, was unbedingt notwendig war um unseren Dienst zu betreiben. MetaGer-Pass macht das Speichern dieser Nutzerdaten nun aber endlich komplett überflüssig, weshalb Ihre Anfrage unsererseits bereits dauerhaft vergessen ist, sobald wir sie beantwortet haben.</p>
+        <p>Bei Ihren Internetsuchen fallen automatisch viele Daten an. Mit MetaGer-Pass kümmern wir uns darum, dass diese Daten gar nicht erst abgespeichert werden.</p>
         <div class="relevant-items">
           <div>Logging</div>
         </div>
       </div>
     </div>
+    <div class="advantage" id="no-tradeoff">
+      <img src="/images/metager-schloss-orange.svg" alt="Image depicting a lock">
+      <div class="text">
+        <h2>Ohne Kompromisse</h2>
+        <p>Es gibt bei MetaGer keine Nutzeraccounts. Sie erhalten von uns einen zufällig generierten Schlüssel. Es sind keine Kontaktdaten notwendig. Außerdem bieten wir mit PaySafe Card und Bargeld auch mehrere anonyme Zahlungsmethoden an. Wer noch einen Schritt weiter gehen möchte, kann anstelle eines Schlüssels unsere <a href="#">MetaGer-Pass Tokens</a> verwenden.</p>
+        <div class="relevant-items">
+          <div>Logging</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="how-it-works">
+    <h1>So funktioniert es</h1>
+    <ol>
+      <li>
+        <h2>MetaGer-Pass Schlüssel erstellen</h2>
+        <div>
+          Ihr Schlüssel ist das einzige, was Sie sich für die Nutzung von MetaGer-Pass notieren müssen. Dieser wird automatisch für Sie erstellt. Wir benötigen keine Kontaktdaten.
+        </div>
+      </li>
+      <li>
+        <h2>Suchanfragen kaufen (ca. 5€ / Monat)</h2>
+        <div>
+          Einfach mal ausprobieren, oder dauerhafter Nutzer? Es liegt ganz bei Ihnen. Sie bezahlen nicht nach Zeit, sondern nach Nutzung. Sie haben die Wahl, wie viele Suchanfragen es sein dürfen.
+        </div>
+      </li>
+      <li>
+        <h2>Verwenden Sie Ihren Schlüssel auf beliebig vielen Geräten</h2>
+        <div>
+          Ihr Schlüssel kann auf beliebig vielen Geräten verwendet werden. Sie können Ihn auch mit Freunden/Verwandten teilen. Rufen Sie einfach mit Ihrem Gerät MetaGer auf und geben Sie dort Ihren Schlüssel ein, indem Sie auf das Schlüsselsymbol neben der Suchleiste klicken und schon kann es losgehen.
+        </div>
+      </li>
+    </ol>
   </div>
   <div id="offers">
     <form class="offer" action="/checkout">