From e2a56840be4f127aa12a5af077e3e3aca34f4424 Mon Sep 17 00:00:00 2001
From: Lara <d-w.loehr@t-online.de>
Date: Tue, 6 Oct 2026 15:55:17 +0200
Subject: [PATCH] About: hide the photo placeholder, set the text larger

Without about.photo the section now uses the margin-note layout of the
other sections and a larger text size instead of an empty blob. As soon
as a photo is set, the photo layout returns.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/pages/index.astro | 61 +++++++++++++++++++++++++++++++------------
 1 file changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index caffaab..464621a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -215,30 +215,36 @@ const findItem = (src: string) =>
 
   <!-- Über uns -->
   <section class="section about section-about tint-rose">
-    <div class="container about-grid">
-      {about.photo ? (
+    {about.photo ? (
+      <div class="container about-grid">
         <div class="about-photo about-photo-image">
           <img src={about.photo} alt="Lara und Pascal" loading="lazy" />
         </div>
-      ) : (
-        <div class="about-photo">
-          <span>
-            Foto von Lara und Pascal <span class="placeholder">einsetzen</span><br />
-            <small>zusammen, hochkant, echtes Licht</small>
-          </span>
-        </div>
-      )}
 
-      <div class="about-copy">
+        <div class="about-copy">
+          <Kicker text={about.eyebrow} />
+          <h2>{about.title}</h2>
+          <blockquote class="about-quote"><p>{about.quote}</p></blockquote>
+
+          {about.paragraphs.map((paragraph) => (
+            <p set:html={rich(paragraph)} />
+          ))}
+        </div>
+      </div>
+    ) : (
+      /* Ohne Foto: wie die anderen Abschnitte, Kennung in der Randspalte,
+         Text größer gesetzt, damit die Fläche nicht leer wirkt */
+      <div class="container split about-ohne-foto">
         <Kicker text={about.eyebrow} />
         <h2>{about.title}</h2>
         <blockquote class="about-quote"><p>{about.quote}</p></blockquote>
-
-        {about.paragraphs.map((paragraph) => (
-          <p set:html={rich(paragraph)} />
-        ))}
+        <div class="about-text">
+          {about.paragraphs.map((paragraph) => (
+            <p set:html={rich(paragraph)} />
+          ))}
+        </div>
       </div>
-    </div>
+    )}
   </section>
 
   <!-- FAQ -->
@@ -865,6 +871,29 @@ const findItem = (src: string) =>
     margin: 0 0 var(--space-6);
   }
 
+  .about-ohne-foto .about-quote {
+    margin-bottom: var(--space-7);
+  }
+
+  .about-ohne-foto .about-quote p {
+    font-size: clamp(1.9rem, 3.6vw, 3rem);
+    max-width: 22ch;
+  }
+
+  .about-text {
+    max-width: 42rem;
+  }
+
+  .about-text p {
+    font-size: clamp(1.125rem, 1.5vw, 1.3rem);
+    line-height: 1.65;
+    color: var(--color-text);
+  }
+
+  .about-text p + p {
+    margin-top: var(--space-5);
+  }
+
   .about-quote p {
     font-family: var(--font-serif);
     font-style: italic;