style: make homepage banner and navigation more compact

src/app/globals.css

@@ -172,7 +172,7 @@ small,
   min-height: calc(100vh - 200px);
 }
 .site-header {
-  height: 88px;
+  height: 64px;
   border-bottom: 1px solid var(--line);
   background: var(--bg);
   position: relative;
@@ -192,7 +192,7 @@ small,
   align-items: center;
   gap: 9px;
   font-family: 'Fraunces', serif;
-  font-size: 32px;
+  font-size: 27px;
   font-weight: 500;
   letter-spacing: -2px;
 }
@@ -459,39 +459,37 @@ small,
 /* The cookbook */
 .home-hero {
   display: grid;
-  grid-template-columns: 1.05fr 1fr;
+  grid-template-columns: minmax(0, 1fr) 160px;
-  margin-top: 36px;
+  align-items: center;
-  min-height: 455px;
+  gap: 24px;
-  border-radius: 20px;
+  padding: 20px 24px;
+  margin-top: 24px;
+  border-radius: 14px;
   overflow: hidden;
   background: var(--surface-2);
 }
 .hero-copy {
-  padding: 48px 35px 35px 44px;
+  min-width: 0;
-  position: relative;
+}
+.hero-copy .eyebrow {
+  font-size: 8px;
+  letter-spacing: 1.4px;
 }
 .hero-copy h1 {
-  font-size: clamp(40px, 4.35vw, 59px);
+  font-size: clamp(26px, 2.6vw, 34px);
-  margin: 24px 0 22px;
+  margin: 10px 0 8px;
-  line-height: 1.08;
+  line-height: 1.2;
-  letter-spacing: -2.5px;
+  letter-spacing: -1px;
 }
 .hero-copy p {
-  font-size: 13px;
+  font-size: 12px;
   color: var(--muted);
-  margin-bottom: 25px;
+  margin-bottom: 12px;
   line-height: 1.8;
 }
-.hero-copy .button {
+.hero-copy .text-button {
-  padding: 13px 21px;
+  font-size: 11px;
-}
+  min-height: 32px;
-.hero-note {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  font-size: 10px;
-  color: var(--muted);
-  margin-top: 27px;
 }
 .note-icon {
   width: 38px;
@@ -507,6 +505,9 @@ small,
 .hero-visual {
   position: relative;
   min-width: 0;
+  height: 140px;
+  border-radius: 10px;
+  overflow: hidden;
 }
 .hero-visual > img {
   width: 100%;
@@ -514,55 +515,8 @@ small,
   position: absolute;
   object-position: center;
 }
-.hero-image-shade {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(0deg, #102516b3, transparent 65%);
-}
-.hero-stamp {
-  position: absolute;
-  right: 24px;
-  top: 26px;
-  width: 100px;
-  height: 100px;
-  border: 1px solid #fff8;
-  outline: 5px solid #fff2;
-  border-radius: 50%;
-  background: #f6f3e9ec;
-  color: #3e5740;
-  font-size: 9px;
-  letter-spacing: 2px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  transform: rotate(11deg);
-}
-.hero-stamp span {
-  font-family: 'Fraunces';
-  font-size: 20px;
-  letter-spacing: -1px;
-}
-.hero-caption {
-  position: absolute;
-  bottom: 29px;
-  left: 33px;
-  color: #fff9ed;
-}
-.hero-caption > span {
-  font-size: 8px;
-  letter-spacing: 2px;
-}
-.hero-caption p {
-  font-family: 'Fraunces';
-  font-size: 28px;
-  line-height: 1.15;
-  margin: 10px 0 0;
-  letter-spacing: -1px;
-}
 .library-section {
-  padding-top: 56px;
+  padding-top: 32px;
 }
 .section-heading {
   display: flex;
@@ -1991,22 +1945,6 @@ input[type='checkbox'] {
   .header-inner {
     padding: 0 28px;
   }
-  .home-hero {
-    min-height: 420px;
-  }
-  .hero-copy {
-    padding: 38px 28px;
-  }
-  .hero-copy h1 {
-    font-size: 46px;
-  }
-  .hero-copy .eyebrow {
-    font-size: 8px;
-    letter-spacing: 1.4px;
-  }
-  .hero-note {
-    font-size: 9px;
-  }
   .card-image {
     height: 190px;
   }
@@ -2084,13 +2022,13 @@ input[type='checkbox'] {
     padding: 0 20px;
   }
   .site-header {
-    height: 72px;
+    height: 60px;
   }
   .header-inner {
     padding: 0 20px;
   }
   .brand {
-    font-size: 29px;
+    font-size: 25px;
   }
   .desktop-nav {
     display: none;
@@ -2148,63 +2086,25 @@ input[type='checkbox'] {
     font-size: 12px;
   }
   .home-hero {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr) 72px;
-    margin-top: 20px;
+    gap: 14px;
-    border-radius: 16px;
+    padding: 18px;
-    min-height: 0;
+    margin-top: 16px;
-  }
+    border-radius: 12px;
-  .hero-copy {
-    padding: 30px 25px;
   }
   .hero-copy h1 {
-    font-size: 44px;
+    font-size: 25px;
-    letter-spacing: -2px;
+    letter-spacing: -0.7px;
-    margin: 20px 0 17px;
-  }
-  .hero-copy p {
-    font-size: 12px;
-    margin-bottom: 20px;
   }
   .hero-copy .eyebrow {
-    font-size: 8px;
+    font-size: 7px;
-    letter-spacing: 1.5px;
+    letter-spacing: 1px;
-  }
-  .hero-copy .button {
-    font-size: 11px;
-    padding: 12px 17px;
-  }
-  .hero-note {
-    display: none;
   }
   .hero-visual {
-    height: 220px;
+    height: 96px;
-  }
-  .hero-caption {
-    bottom: 23px;
-    left: 25px;
-  }
-  .hero-caption p {
-    font-size: 25px;
-  }
-  .hero-caption > span {
-    font-size: 7px;
-  }
-  .hero-stamp {
-    width: 80px;
-    height: 80px;
-    right: 20px;
-    top: 20px;
-    font-size: 7px;
-    gap: 1px;
-  }
-  .hero-stamp span {
-    font-size: 17px;
-  }
-  .hero-stamp svg {
-    width: 17px;
   }
   .library-section {
-    padding-top: 35px;
+    padding-top: 24px;
   }
   .section-heading {
     margin-bottom: 20px;
@@ -2875,11 +2775,8 @@ input[type='checkbox'] {
   .container {
     padding: 0 15px;
   }
-  .hero-copy {
-    padding: 27px 22px;
-  }
   .hero-copy h1 {
-    font-size: 39px;
+    font-size: 23px;
   }
   .recipe-grid {
     grid-template-columns: 1fr;

src/components/library.tsx

@@ -10,7 +10,6 @@ import {
   Clock3,
   Heart,
   SlidersHorizontal,
-  Leaf,
   Utensils,
   X,
   ChefHat,
@@ -144,23 +143,12 @@ export function Library({
                 : household.toLocaleUpperCase('de')}
             </span>
             <h1>
-              Zuhause schmeckt’s
+              Zuhause schmeckt’s <em>am besten.</em>
-              <br />
-              <em>am besten.</em>
             </h1>
-            <p>
+            <p>Deine Lieblingsrezepte für jeden Tag.</p>
-              Für die schnellen Abende. Die langen Sonntage.
+            <a href="#rezepte" className="text-button">
-              <br className="desktop-only" /> Und alles, was wir gerne zusammen genießen.
-            </p>
-            <a href="#rezepte" className="button primary">
               Was kochen wir heute? <ArrowRight size={18} />
             </a>
-            <div className="hero-note">
-              <span className="note-icon">
-                <Leaf size={20} />
-              </span>
-              Lieblingsrezepte. Mit Liebe gesammelt.
-            </div>
           </div>
           <div className="hero-visual">
             <img
@@ -168,21 +156,6 @@ export function Library({
               alt="Frische Pasta mit Tomaten und Kräutern auf einem gedeckten Tisch"
               fetchPriority="high"
             />
-            <div className="hero-image-shade" />
-            <span className="hero-stamp">
-              EINFACH
-              <br />
-              <span>gut essen.</span>
-              <Leaf size={23} />
-            </span>
-            <div className="hero-caption">
-              <span>WENIGER ALLTAG. MEHR GENUSS.</span>
-              <p>
-                Ein guter Tag beginnt
-                <br />
-                mit etwas Gutem.
-              </p>
-            </div>
           </div>
         </section>
       ) : (