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,7 +86,20 @@ export function OGImageTemplate({
         }}
       />
 
-      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
+      {/* Main Content Wrapper */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          height: '100%',
+          width: '100%',
+          position: 'relative',
+          zIndex: 10,
+        }}
+      >
+        {/* Top: Text Content */}
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
           {/* Label / Category */}
           {label && (
             <div
@@ -95,8 +108,8 @@ export function OGImageTemplate({
                 fontWeight: 700,
                 color: primaryGreen,
                 textTransform: 'uppercase',
-              letterSpacing: '0.3em',
+                letterSpacing: '0.25em',
-              marginBottom: '32px',
+                marginBottom: '24px',
                 display: 'flex',
               }}
             >
@@ -107,12 +120,12 @@ export function OGImageTemplate({
           {/* Title */}
           <div
             style={{
-            fontSize: title.length > 40 ? '64px' : '82px',
+              fontSize: title.length > 35 ? '64px' : '76px',
               fontWeight: 700,
               color: 'white',
-            lineHeight: '1.05',
+              lineHeight: '1.1',
-            maxWidth: '950px',
+              maxWidth: '900px',
-            marginBottom: '40px',
+              marginBottom: '32px',
               display: 'flex',
               letterSpacing: '-0.02em',
             }}
@@ -125,24 +138,21 @@ export function OGImageTemplate({
             <div
               style={{
                 fontSize: '32px',
-              color: 'rgba(255,255,255,0.7)',
+                color: 'rgba(255,255,255,0.8)',
                 maxWidth: '850px',
-              lineHeight: '1.4',
+                lineHeight: '1.45',
                 display: 'flex',
                 fontWeight: 400,
               }}
             >
-            {description.length > 160 ? description.substring(0, 157) + '...' : description}
+              {description}
             </div>
           )}
         </div>
 
-      {/* Brand Footer */}
+        {/* Bottom: Brand Footer */}
         <div
           style={{
-          position: 'absolute',
-          bottom: '80px',
-          left: '80px',
             display: 'flex',
             alignItems: 'center',
           }}
@@ -152,7 +162,7 @@ export function OGImageTemplate({
             <img
               src={logo}
               alt="E-TIB GmbH"
-            height="48"
+              height="56"
               style={{ marginRight: '24px', objectFit: 'contain' }}
             />
           ) : (
@@ -181,6 +191,7 @@ export function OGImageTemplate({
             </div>
           )}
         </div>
+      </div>
 
       {/* Primary Green Brand Strip */}
       <div