persolog-Zertifikat als drittes Abzeichen

Anelias persolog-Zertifizierung (Persönlichkeits-Modell, abgeschlossen am
09.10.2026) steht in „Über Anelia“ zwischen Greator Persönlichkeitscoach
und Greator Speaker – nach Datum, das neueste oben. Gleicher Lorbeerkranz,
Hover und Vorschau-Overlay. Im Kranz steht das persolog-Emblem, aus dem
PDF freigestellt (Außenfläche per Floodfill, Kanten gegen Weiß entmischt,
® weggelassen), Farbe und Form unverändert.

Drei Abzeichen sind länger als Text, Werdegang und Marginalien zusammen.
Damit die Zeilen 1–3 nicht mitwachsen, reicht die Spalte ohne Foto über
eine vierte Zeile mit `1fr` (neues Section-Prop `gridClassName`) – der
Überhang landet unten, die Abstände links bleiben wie live.

Der Abzeichen-Titel bricht mit `text-wrap: balance` um, also
„persolog® / Persönlichkeits-Modell“ statt nach dem Bindestrich.

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

src/components/home/About.tsx

@@ -55,6 +55,11 @@ export function About({ photo, content: about = aboutDe, certificates = [] }: Ab
         numeral={about.numeral}
         label={about.eyebrow}
         className="py-[clamp(4.5rem,10vh,8rem)] md:py-[clamp(7rem,16vh,14rem)]"
+        /* Ohne Foto reicht die Zertifikatsspalte über eine vierte, sonst leere Zeile.
+           Weil die `1fr` ist, landet alles, was der Stapel länger ist als Text,
+           Werdegang und Marginalien, dort – Zeilen 1–3 behalten ihre Höhe, die
+           Abstände dazwischen wachsen nicht mit. */
+        gridClassName={cn(!hasPhoto && "lg:grid-rows-[auto_auto_auto_1fr]")}
       >
         {hasPhoto && (
           <div className="col-span-12 mb-14 lg:col-span-4 lg:col-start-3 lg:mb-0">
@@ -106,7 +111,7 @@ export function About({ photo, content: about = aboutDe, certificates = [] }: Ab
         </Reveal>
 
         {/* Ein einzelnes Zertifikat ist das Gegenstück zur klebenden „04“: gleiche
-            Höhe (`calc(50vh − .45em)`), gleiche Zeilen, nur am anderen Rand. Zwei
+            Höhe (`calc(50vh − .45em)`), gleiche Zeilen, nur am anderen Rand. Mehrere
             Abzeichen (je rund 24 rem) passen dort nicht mehr ins Bild – dann steht
             der Stapel still und beginnt oben auf Höhe der Eyebrow, das neueste
             zuerst. Mit Foto reicht der Text bis Spalte 12 – dort gäbe es keine freie
@@ -117,7 +122,7 @@ export function About({ photo, content: about = aboutDe, certificates = [] }: Ab
               "col-span-12 mt-14",
               hasPhoto
                 ? "lg:col-span-4 lg:col-start-7 lg:row-start-4"
-                : "lg:col-span-3 lg:col-start-10 lg:row-span-3 lg:row-start-1 lg:mt-0",
+                : "lg:col-span-3 lg:col-start-10 lg:row-span-4 lg:row-start-1 lg:mt-0",
             )}
           >
             <div

src/components/layout/Section.tsx

@@ -29,6 +29,8 @@ export interface SectionProps {
    * ist `relative`, das Kind positioniert sich selbst.
    */
   lead?: ReactNode;
+  /** Zusätzliche Klassen für das 12-Spalten-Raster selbst (z. B. eine Zeilenvorlage). */
+  gridClassName?: string;
   children: ReactNode;
 }
 
@@ -58,6 +60,7 @@ export function Section({
   className,
   as = "section",
   lead,
+  gridClassName,
   children,
 }: SectionProps) {
   const Tag = as;
@@ -74,7 +77,7 @@ export function Section({
     >
       {lead}
       <Container className="relative">
-        <div className={GRID}>
+        <div className={cn(GRID, gridClassName)}>
           {numeral && (
             <SectionGutter numeral={numeral} total={total} label={label ?? ""} mobileMeta={mobileMeta} />
           )}

src/components/ui/Certificate.tsx

@@ -66,8 +66,9 @@ export function Certificate({ content, asset, className }: CertificateProps) {
         {/* Zeilenhöhe 1,4 statt 1, damit ein umbrechender Titel („Greator
             Persönlichkeitscoach“) nicht zusammenklebt. Die Ränder davor und danach
             sind um den halben Durchschuss (0,15 rem) kürzer – einzeilig steht alles
-            wie zuvor mit `leading-none`, `mt-6` und `mt-5`. */}
-        <span className="mt-[1.35rem] block font-mono text-xs uppercase leading-[1.4] tracking-[0.18em] text-accent">
+            wie zuvor mit `leading-none`, `mt-6` und `mt-5`. `balance`, damit
+            „persolog® / Persönlichkeits-Modell“ umbricht statt nach dem Bindestrich. */}
+        <span className="mt-[1.35rem] block font-mono text-xs uppercase leading-[1.4] tracking-[0.18em] text-accent [text-wrap:balance]">
           {content.title}
         </span>
 

src/content/en/home.ts

@@ -151,6 +151,18 @@ export const homeEn: HomeContent = {
         pdfLabel: "Open PDF",
         close: "Close",
       },
+      persolog: {
+        title: "persolog® Personality Model",
+        description: "Certified trainer for the persolog® Personality Model",
+        date: "October 2026",
+        cta: "View certificate",
+        eyebrow: "Certificate",
+        dialogMeta: "persolog · completed 9 October 2026",
+        imageAlt:
+          "Certificate: Anelia Wolf successfully completed the persolog® Personality Model certification on 9 October 2026 and is entitled to call herself a certified trainer for the persolog® Personality Model.",
+        pdfLabel: "Open PDF",
+        close: "Close",
+      },
       speaker: {
         title: "Greator Speaker",
         description: "Certified graduate of the Greator Speaker programme",

src/content/home.ts

@@ -279,6 +279,19 @@ export const about = {
       pdfLabel: "PDF öffnen",
       close: "Schließen",
     },
+    persolog: {
+      title: "persolog® Persönlichkeits-Modell",
+      description: "Zertifizierte Trainerin für das persolog® Persönlichkeits-Modell",
+      date: "Oktober 2026",
+      cta: "Zertifikat ansehen",
+      /* Overlay */
+      eyebrow: "Zertifikat",
+      dialogMeta: "persolog · Abschluss am 9. Oktober 2026",
+      imageAlt:
+        "Zertifikat: Anelia Wolf hat die Zertifizierung zum persolog® Persönlichkeits-Modell am 9. Oktober 2026 erfolgreich abgeschlossen und ist berechtigt, die Bezeichnung „Zertifizierte Trainerin für das persolog® Persönlichkeits-Modell“ zu führen.",
+      pdfLabel: "PDF öffnen",
+      close: "Schließen",
+    },
     speaker: {
       title: "Greator Speaker",
       description: "Zertifizierte Absolventin der Greator Speaker Ausbildung",

src/lib/assets.ts

@@ -58,7 +58,7 @@ export function getSpeakerPdf(): string | null {
 }
 
 /** Schlüssel in `about.certificates` (Texte) – Reihenfolge siehe `CERTIFICATES`. */
-export type CertificateKey = "persoenlichkeitscoach" | "speaker";
+export type CertificateKey = "persoenlichkeitscoach" | "persolog" | "speaker";
 
 export interface CertificateAsset {
   key: CertificateKey;
@@ -68,7 +68,7 @@ export interface CertificateAsset {
   image: string;
   width: number;
   height: number;
-  /** Das runde Greator-Siegel, freigestellt – es steht im Lorbeerkranz. */
+  /** Siegel bzw. Emblem des Ausstellers, freigestellt – es steht im Lorbeerkranz. */
   seal: string;
   sealSize: number;
 }
@@ -76,11 +76,12 @@ export interface CertificateAsset {
 /** Oben steht das neueste Zertifikat. */
 const CERTIFICATES = [
   { key: "persoenlichkeitscoach", file: "greator-persoenlichkeitscoach", seal: "greator-siegel-coach.webp", width: 989, height: 1398 },
+  { key: "persolog", file: "persolog-persoenlichkeitsmodell", seal: "persolog-emblem.webp", width: 989, height: 1398 },
   { key: "speaker", file: "greator-speaker", seal: "greator-siegel.webp", width: 989, height: 1400 },
 ] as const satisfies readonly { key: CertificateKey; file: string; seal: string; width: number; height: number }[];
 
 /**
- * Greator-Zertifikate für die Sektion „Über Anelia“. Ein Zertifikat erscheint nur,
+ * Zertifikate für die Sektion „Über Anelia“. Ein Zertifikat erscheint nur,
  * wenn alle drei Dateien liegen – fehlen alle, rendert die Sektion wie vorher
  * (Variante B, wie bei den Fotos).
  */