Zweites Lebenslauf-Design "Social Media" + Anschreiben folgt dem Layout

Der Lebenslauf kann jetzt zwischen zwei Layouts waehlen, und das Anschreiben
uebernimmt immer das Layout des Lebenslaufs - beide Dokumente kommen als ein Set
beim Unternehmen an.

"Social Media" ist die verspielte Variante nach der Media-Kit-Vorlage: getoente
Seite, rundes Portrait mit Blob, Schreibschrift-Zeile ueber einem grossen Namen,
Herzchen als Abschnittsmarker und Bullets, abgerundete Karten je Station,
Pill-Chips fuer Kompetenzen und Sprachen, Glitzer-Sterne als Deko. Bewusst laut -
gedacht fuer kreative und Social-Media-Stellen.

Die gesamte Farbwelt (Seite, Karten, Pills, Deko) wird aus der Akzentfarbe
abgeleitet, das Layout funktioniert also auch in Violett oder Tiefblau. Neue
Akzente Pink und Violett; das Layout bringt eigene Defaults mit (pink, rundes
Foto), sodass ein Wechsel sofort stimmig aussieht.

Neue Schriften (SIL OFL): Poppins fuer die geometrische Sans, Pacifico fuer die
Schreibschrift. Es werden nur die Fonts eingebettet, die das gewaehlte Layout
nutzt - ein klassischer Lebenslauf traegt Poppins/Pacifico nicht mit.

Herz und Sparkle sind als Bezier-Pfade gezeichnet, weil sich auf ein Herz-Glyph
in der Schrift nicht verlassen werden kann. Das neue Layout nutzt dieselbe
Mess- und Skalier-Mechanik wie das klassische, erbt also die Ein-Seiten-Garantie.

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

views/vorlagen.ejs

@@ -255,27 +255,30 @@
         <!-- Design of the generated PDFs -->
         <h2 id="design" class="text-xl font-bold text-gray-800 dark:text-white mt-10 mb-2 scroll-mt-4">Design der Unterlagen</h2>
         <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
-            Aussehen von Anschreiben und Lebenslauf. Das Grundlayout (Aufbau, Seitenränder, DIN-gerechter Brief)
-            bleibt fest – der Lebenslauf passt immer auf eine Seite. Die Vorschau zeigt Musterinhalte mit deinem
-            Namen, Foto und deiner Unterschrift, ohne dass die KI läuft.
+            Aussehen von Anschreiben und Lebenslauf. <strong>Das Anschreiben übernimmt immer das Layout des
+            Lebenslaufs</strong>, damit beide Dokumente als ein Set ankommen. Der Lebenslauf passt in jedem Layout
+            garantiert auf eine Seite. Die Vorschau zeigt Musterinhalte mit deinem Namen, Foto und deiner
+            Unterschrift, ohne dass die KI läuft.
         </p>
 
+        <div class="rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 px-4 py-3 mb-6 text-sm text-blue-900 dark:text-blue-200">
+            <p><strong>Klassisch mit Sidebar</strong> – zurückhaltend, monochrom, für klassische Bewerbungen (Standard).</p>
+            <p class="mt-1"><strong>Social Media</strong> – verspielt: getönte Seite, runde Karten, Herzchen, Schreibschrift.
+                Bewusst auffällig – passend für kreative und Social-Media-Stellen, nicht für die Bank.</p>
+        </div>
+
         <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
             <form action="/vorlagen/design" method="POST" class="space-y-4" id="designForm">
                 <div class="grid gap-4 sm:grid-cols-2">
                     <% designFelder.forEach(f => { %>
-                        <div>
+                        <div data-feld="<%= f.key %>" <%- f.nurLayout ? 'data-nur-layout="' + f.nurLayout + '"' : '' %>>
                             <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1"><%= f.label %></label>
-                            <select name="<%= f.key %>" <%= f.optionen.length < 2 ? 'disabled' : '' %>
-                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:opacity-60">
+                            <select name="<%= f.key %>"
+                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                 <% f.optionen.forEach(o => { %>
                                     <option value="<%= o.key %>" <%= o.gewaehlt ? 'selected' : '' %>><%= o.label %></option>
                                 <% }) %>
                             </select>
-                            <% if (f.optionen.length < 2) { %>
-                                <input type="hidden" name="<%= f.key %>" value="<%= f.aktuell %>">
-                                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Weitere Layouts folgen.</p>
-                            <% } %>
                         </div>
                     <% }) %>
                 </div>
@@ -417,6 +420,18 @@
             const l = document.getElementById('vorschauLebenslauf');
             if (a) a.addEventListener('click', () => oeffne('anschreiben'));
             if (l) l.addEventListener('click', () => oeffne('lebenslauf'));
+
+            // Hide fields that only apply to one layout (e.g. the sidebar tint has
+            // no meaning in the social layout).
+            const layoutSel = form.querySelector('[name="layout"]');
+            function syncFelder() {
+                const aktiv = layoutSel ? layoutSel.value : 'sidebar';
+                form.querySelectorAll('[data-nur-layout]').forEach((el) => {
+                    el.style.display = el.dataset.nurLayout === aktiv ? '' : 'none';
+                });
+            }
+            if (layoutSel) layoutSel.addEventListener('change', syncFelder);
+            syncFelder();
         })();
     </script>
 </body>