feat: nastavitelna farba nadpisu pod bannerom

Cierna (predvolena), COOP modra, COOP cervena alebo vlastna farba.

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

src/components/editor/ConfigPanel.tsx

@@ -429,6 +429,33 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
               title="Enter = nový riadok (alebo <br>)"
               className="w-full text-sm border border-gray-300 rounded-lg p-2 resize-y"
             />
+            {/* Farba nadpisu */}
+            <div className="mt-1.5 flex items-center gap-1.5">
+              <span className="text-[10px] font-semibold text-gray-500">Farba nadpisu</span>
+              {[
+                ['#1a1a1a', 'Čierna (predvolená)'],
+                ['#003399', 'COOP modrá'],
+                ['#e2001a', 'COOP červená']
+              ].map(([c, name]) => (
+                <button
+                  key={c}
+                  type="button"
+                  title={name}
+                  onClick={() => updateData({ titleColor: c === '#1a1a1a' ? undefined : c })}
+                  className={`w-5 h-5 rounded-full border ${
+                    (module.data.titleColor || '#1a1a1a').toLowerCase() === c ? 'ring-2 ring-red-500 border-white' : 'border-black/15'
+                  }`}
+                  style={{ backgroundColor: c }}
+                />
+              ))}
+              <input
+                type="color"
+                value={module.data.titleColor || '#1a1a1a'}
+                onChange={(e) => updateData({ titleColor: e.target.value })}
+                className="w-6 h-6 rounded cursor-pointer border border-gray-300 p-0"
+                title="Vlastná farba"
+              />
+            </div>
           </div>
           <div>
             <label className="block text-xs font-semibold text-gray-700 mb-1">Popis</label>

src/lib/emailRenderer.ts

@@ -367,7 +367,7 @@ function renderModule(m: any, campaign: NewsletterCampaign, mode: RenderMode = '
           ${m.data.title || m.data.description || m.data.buttonText ? `
           <tr>
               <td style="padding: 30px 20px; text-align: center;" class="mobile-padding">
-                  ${m.data.title ? `<h1 class="force-text-dark" style="margin: 0 0 15px 0; font-size: 24px; color: #1a1a1a; font-weight: 700;">${escapeWithBreaks(m.data.title)}</h1>` : ''}
+                  ${m.data.title ? `<h1 ${m.data.titleColor ? '' : 'class="force-text-dark" '}style="margin: 0 0 15px 0; font-size: 24px; color: ${m.data.titleColor || '#1a1a1a'}; font-weight: 700;">${escapeWithBreaks(m.data.title)}</h1>` : ''}
                   ${m.data.description ? `<p class="force-text-dark" style="margin: 0 0 25px 0; font-size: 15px; line-height: 1.5; color: #555555;">${escapeWithBreaks(m.data.description)}</p>` : ''}
                   ${m.data.buttonText ? `
                   <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;" class="btn-table">

src/types/newsletter.ts

@@ -107,6 +107,7 @@ export interface BannerModuleData {
   linkUrl: string;
   altText: string;
   title?: string;
+  titleColor?: string; // farba nadpisu pod bannerom (predvolene #1a1a1a)
   description?: string;
   buttonText?: string;
   buttonUrl?: string;