Naurua-Block unter Über mich ergänzen

index.html

@@ -163,6 +163,37 @@
           </div>
         </section>
 
+        <section class="section section--light naurua">
+          <div class="section-head section-head--boxed">
+            <div class="section-title-lockup section-title-lockup--naurua">
+              <h2 class="section-title section-title--naurua">
+                Naurua – von der Idee zur eigenen Marke
+              </h2>
+              <img
+                class="section-head__accent section-head__accent--naurua"
+                src="./media/strichlein_rgruen_unter_wort.svg"
+                alt=""
+                aria-hidden="true"
+              />
+            </div>
+          </div>
+
+          <div class="naurua__content">
+            <p>
+              Mit Naurua habe ich eine eigene Marke für hochwertige Vitalpilz-Extrakte aufgebaut.
+              Von der ersten Idee über Produktentwicklung, Produzentensuche und Markenaufbau bis
+              hin zu Onlineshop, Marketing und Vertrieb.
+            </p>
+            <p>
+              Naurua ist für mich gelebtes Unternehmertum: ausprobieren, entscheiden, umsetzen
+              und Schritt für Schritt etwas Eigenes aufbauen.
+            </p>
+            <a class="button button--dark" href="https://www.naurua.ch" target="_blank" rel="noopener noreferrer">
+              Zu Naurua
+            </a>
+          </div>
+        </section>
+
         <section class="section section--accent work">
           <div class="section-head section-head--boxed">
             <div class="section-title-lockup section-title-lockup--work">

styles.css

@@ -461,6 +461,52 @@ button {
   font-weight: 900;
 }
 
+.naurua {
+  background: #fff;
+  padding: var(--section-stack-padding-y) var(--section-padding-x);
+  text-align: center;
+}
+
+.section-title-lockup--naurua {
+  position: relative;
+  display: inline-block;
+}
+
+.section-title--naurua {
+  position: relative;
+  z-index: 1;
+  max-width: 52rem;
+  margin: 0 auto;
+  text-transform: uppercase;
+}
+
+.section-head__accent--naurua {
+  position: absolute;
+  right: -1.5rem;
+  bottom: -1.25rem;
+  z-index: 0;
+  width: clamp(70px, 9vw, 120px);
+  margin: 0;
+}
+
+.naurua__content {
+  display: grid;
+  gap: 1.6rem;
+  width: min(100%, 52rem);
+  margin: 2.6rem auto 0;
+}
+
+.naurua__content p {
+  margin: 0;
+  font-size: clamp(1rem, 1.08vw, 1.2rem);
+  line-height: 1.35;
+}
+
+.naurua__content .button {
+  justify-self: center;
+  margin-top: 0.6rem;
+}
+
 .work__grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   width: min(100%, var(--content-width-wide));
@@ -969,6 +1015,21 @@ button {
     margin-left: 0;
   }
 
+  .naurua {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+  }
+
+  .section-title--naurua {
+    max-width: 22rem;
+  }
+
+  .section-head__accent--naurua {
+    right: -0.5rem;
+    bottom: -1.15rem;
+    width: 72px;
+  }
+
   .about__media img {
     aspect-ratio: 4 / 5;
   }