Less petrol on phones; logo-only share preview

On screens below 700px the offer band turns light (sand) and the process
section uses sand instead of sage, so phones show about half as much
petrol; desktop is unchanged. The share preview now shows only the
larpaso pill, small enough to survive a centred square crop, under a new
file name so link previews refresh.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

scripts/icons-bauen.mjs

@@ -45,12 +45,16 @@ sizes.forEach((s, i) => {
 });
 writeFileSync(pub('favicon.ico'), Buffer.concat([header, ...bufs]));
 
-// Vorschaubild für WhatsApp, Signal, Facebook, LinkedIn & Co. (1200 x 630)
+// Vorschaubild für WhatsApp, Signal, Facebook, LinkedIn & Co. (1200 x 630).
-const logoPng = await sharp(logo, { density: 300 }).resize({ width: 860 }).png().toBuffer();
+// Nur die Pille mit "larpaso" (ohne WEBDESIGN), mittig und so schmal, dass sie
+// auch dann ganz zu sehen ist, wenn ein Dienst das Bild auf ein Quadrat aus
+// der Mitte zuschneidet (630 x 630 -> Pille höchstens ~560 breit).
+const pille = Buffer.from(logo.toString('utf8').replace('viewBox="0 0 944 240"', 'viewBox="0 0 502 240"').replace(/width="\d+"\s*height="\d+"/, ''));
+const logoPng = await sharp(pille, { density: 400 }).resize({ width: 540 }).png().toBuffer();
 await sharp({ create: { width: 1200, height: 630, channels: 4, background: papier } })
   .composite([{ input: logoPng, gravity: 'center' }])
   .flatten({ background: papier })
   .jpeg({ quality: 88 })
-  .toFile(new URL('../public/og-image.jpg', import.meta.url).pathname.replace(/^\/(\w:)/, '$1'));
+  .toFile(new URL('../public/og-larpaso.jpg', import.meta.url).pathname.replace(/^\/(\w:)/, '$1'));
 
 console.log('Icons gebaut.');

src/layouts/Layout.astro

@@ -11,7 +11,7 @@ interface Props {
 
 const { title, description = site.meta.description } = Astro.props;
 const canonical = new URL(Astro.url.pathname, Astro.site).href;
-const ogImage = new URL('/og-image.jpg', Astro.site).href;
+const ogImage = new URL('/og-larpaso.jpg', Astro.site).href;
 ---
 
 <!doctype html>

src/pages/index.astro

@@ -52,7 +52,7 @@ const findItem = (src: string) =>
   </section>
 
   <!-- Preis / Startangebot -->
-  <section id="preis" class="section-tight section-dark">
+  <section id="preis" class="section-tight section-dark am-handy-hell">
     <div class="container price-grid">
       <div class="price-main">
         <Kicker text={preis.eyebrow} />
@@ -193,7 +193,7 @@ const findItem = (src: string) =>
   </section>
 
   <!-- Ablauf -->
-  <section id="ablauf" class="section section-ablauf tint-salbei">
+  <section id="ablauf" class="section section-ablauf tint-salbei am-handy-sand">
     <div class="container split">
       <Kicker text={ablauf.eyebrow} />
       <h2>{ablauf.title}</h2>

src/styles/global.css

@@ -247,6 +247,41 @@ textarea {
   opacity: 1;
 }
 
+/* Am Handy sieht man immer nur einen Abschnitt, lange Petrol-Flächen füllen
+   dort ganze Bildschirme. Bänder mit .am-handy-hell werden darum unter 700 px
+   hell: die Variablen erben einfach wieder die Werte von außen. */
+@media (max-width: 700px) {
+  .section-dark.am-handy-hell {
+    --color-bg: inherit;
+    --color-bg-alt: inherit;
+    --color-surface: inherit;
+    --color-text: inherit;
+    --color-text-muted: inherit;
+    --color-border: inherit;
+    --color-primary: inherit;
+    --color-primary-dark: inherit;
+    --color-primary-contrast: inherit;
+    --color-accent: inherit;
+    --color-accent-dark: inherit;
+    --color-flag: inherit;
+    --color-flag-bg: inherit;
+    background: #f1efe3;
+    padding-block: var(--space-8);
+    -webkit-mask: none;
+    mask: none;
+  }
+
+  .section-dark.am-handy-hell h1,
+  .section-dark.am-handy-hell h2,
+  .section-dark.am-handy-hell h3 {
+    color: var(--color-text);
+  }
+
+  .tint-salbei.am-handy-sand {
+    background: #f1efe3;
+  }
+}
+
 /* Getönte Abschnitte für Rhythmus: Salbei, Sand, Rosé aus dem Logoverlauf */
 .tint-salbei { background: #e9efea; }
 .tint-sand { background: #f1efe3; }