style(og): improve spacing, truncate text, and switch to flex layout

app/[locale]/opengraph-image.tsx

@@ -16,8 +16,8 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
 
   return new ImageResponse(
     <OGImageTemplate
-      title={t('title')}
+      title={title}
-      description={t('description')}
+      description={description}
       label="Kabelnetzbau & Infrastruktur"
       image={bg}
       logo={logo}

components/OGImageTemplate.tsx

@@ -86,100 +86,111 @@ export function OGImageTemplate({
         }}
       />
 
-      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
+      {/* Main Content Wrapper */}
-        {/* Label / Category */}
-        {label && (
-          <div
-            style={{
-              fontSize: '24px',
-              fontWeight: 700,
-              color: primaryGreen,
-              textTransform: 'uppercase',
-              letterSpacing: '0.3em',
-              marginBottom: '32px',
-              display: 'flex',
-            }}
-          >
-            {label}
-          </div>
-        )}
-
-        {/* Title */}
-        <div
-          style={{
-            fontSize: title.length > 40 ? '64px' : '82px',
-            fontWeight: 700,
-            color: 'white',
-            lineHeight: '1.05',
-            maxWidth: '950px',
-            marginBottom: '40px',
-            display: 'flex',
-            letterSpacing: '-0.02em',
-          }}
-        >
-          {title}
-        </div>
-
-        {/* Description */}
-        {description && (
-          <div
-            style={{
-              fontSize: '32px',
-              color: 'rgba(255,255,255,0.7)',
-              maxWidth: '850px',
-              lineHeight: '1.4',
-              display: 'flex',
-              fontWeight: 400,
-            }}
-          >
-            {description.length > 160 ? description.substring(0, 157) + '...' : description}
-          </div>
-        )}
-      </div>
-
-      {/* Brand Footer */}
       <div
         style={{
-          position: 'absolute',
-          bottom: '80px',
-          left: '80px',
           display: 'flex',
-          alignItems: 'center',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          height: '100%',
+          width: '100%',
+          position: 'relative',
+          zIndex: 10,
         }}
       >
-        {logo ? (
+        {/* Top: Text Content */}
-          // eslint-disable-next-line @next/next/no-img-element
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <img
+          {/* Label / Category */}
-            src={logo}
+          {label && (
-            alt="E-TIB GmbH"
+            <div
-            height="48"
+              style={{
-            style={{ marginRight: '24px', objectFit: 'contain' }}
+                fontSize: '24px',
-          />
+                fontWeight: 700,
-        ) : (
+                color: primaryGreen,
+                textTransform: 'uppercase',
+                letterSpacing: '0.25em',
+                marginBottom: '24px',
+                display: 'flex',
+              }}
+            >
+              {label}
+            </div>
+          )}
+
+          {/* Title */}
           <div
             style={{
-              width: '80px',
+              fontSize: title.length > 35 ? '64px' : '76px',
-              height: '6px',
-              backgroundColor: primaryGreen,
-              borderRadius: '3px',
-              marginRight: '24px',
-            }}
-          />
-        )}
-        {!logo && (
-          <div
-            style={{
-              fontSize: '24px',
               fontWeight: 700,
               color: 'white',
-              textTransform: 'uppercase',
+              lineHeight: '1.1',
-              letterSpacing: '0.15em',
+              maxWidth: '900px',
+              marginBottom: '32px',
               display: 'flex',
+              letterSpacing: '-0.02em',
             }}
           >
-            E-TIB GmbH
+            {title}
           </div>
-        )}
+
+          {/* Description */}
+          {description && (
+            <div
+              style={{
+                fontSize: '32px',
+                color: 'rgba(255,255,255,0.8)',
+                maxWidth: '850px',
+                lineHeight: '1.45',
+                display: 'flex',
+                fontWeight: 400,
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+
+        {/* Bottom: Brand Footer */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          {logo ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={logo}
+              alt="E-TIB GmbH"
+              height="56"
+              style={{ marginRight: '24px', objectFit: 'contain' }}
+            />
+          ) : (
+            <div
+              style={{
+                width: '80px',
+                height: '6px',
+                backgroundColor: primaryGreen,
+                borderRadius: '3px',
+                marginRight: '24px',
+              }}
+            />
+          )}
+          {!logo && (
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: 700,
+                color: 'white',
+                textTransform: 'uppercase',
+                letterSpacing: '0.15em',
+                display: 'flex',
+              }}
+            >
+              E-TIB GmbH
+            </div>
+          )}
+        </div>
       </div>
 
       {/* Primary Green Brand Strip */}