Neues Layout "Tupfen": dezent, mit verstreuten Punkten

Weiße Seite, Name groß und mittig in Tinte, luftiger Blocksatz — und
korallfarbene Punkte in den Rändern, teils vom Seitenrand angeschnitten,
als einzige Farbe des Blattes. Der Lebenslauf greift das Motiv auf: die
Punkte markieren die Abschnitte, führen die Bullets und bilden als
Fünfer-Reihe die Sprach-Skala (gespeist aus niveauLevel(), also aus der
Formulierung des Lebenslaufs selbst).

Die Punkte skalieren bewusst nicht mit der Schrift: sie gehören zur Seite
wie die Ränder. Das Anschreiben reserviert dafür unten ein Band, in das
der Text nicht hineinläuft.

Der Brief behält das DIN-Anschriftenfeld, das der Vorlage fehlt — es sitzt
in deren zweispaltiger Meta-Zeile (Empfänger links, Datum und Kontakt
rechts), so bleibt die Komposition erhalten und die Bewerbung deutsch.

Dazu:
- neue Akzentfarbe "Koralle"
- write() kann optional Blocksatz. jsPDF stretcht eine Zeile nur, wenn es
  weiß, dass eine weitere folgt — der Absatz geht deshalb in einem Aufruf
  rüber, wodurch die Schlusszeile ungestretcht bleibt.
- Infobox unter /vorlagen beschreibt jetzt auch Sunny (fehlte) und Tupfen

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

lib/design.js

@@ -19,6 +19,13 @@
 //             level bars for the languages. Bold but tidy — right for marketing,
 //             media and design roles that still want a readable, gridded page.
 //
+//   tupfen  — the quiet one with a wink: a white page, the name centred and set
+//             large in plain ink, airy body text — and scattered coral dots in
+//             the margins, some running off the page edge. The dots are the only
+//             colour on the sheet; the résumé picks the motif back up as section
+//             markers, bullets and five-dot language meters. Restrained enough
+//             for any office, but nobody mistakes it for a template.
+//
 // The cover letter always follows the résumé's layout, so both documents arrive
 // as one coherent set — that is the whole point of picking a design here.
 //
@@ -36,6 +43,10 @@ const AKZENTE = [
   { key: 'stahlblau', label: 'Stahlblau', rgb: [51, 65, 85] },
   { key: 'kupfer', label: 'Kupfer', rgb: [124, 62, 24] },
   { key: 'beere', label: 'Beere (Sunny)', rgb: [109, 24, 74] },
+  // Deliberately deeper than the pastel dots of Tupfen's reference: in `sidebar`
+  // the accent *is* the text colour, and a pale coral would be unreadable there.
+  // Tupfen's dots are tinted up from this tone, which lands them back at pastel.
+  { key: 'koralle', label: 'Koralle (Tupfen)', rgb: [222, 106, 106] },
   { key: 'pink', label: 'Pink (verspielt)', rgb: [232, 54, 143] },
   { key: 'violett', label: 'Violett (verspielt)', rgb: [147, 51, 187] },
 ];
@@ -44,6 +55,7 @@ const LAYOUTS = [
   { key: 'sidebar', label: 'Klassisch mit Sidebar (Standard)' },
   { key: 'social', label: 'Social Media (verspielt)' },
   { key: 'sunny', label: 'Sunny (plakativ, Farbbänder)' },
+  { key: 'tupfen', label: 'Tupfen (dezent, verspielte Punkte)' },
 ];
 
 const SIDEBAR_VARIANTEN = [
@@ -74,6 +86,9 @@ const LAYOUT_DEFAULTS = {
   // Sunny is built around the berry/pastel pairing of its reference; the photo
   // sits in a square frame that breaks out of the hero band, so square it is.
   sunny: { akzent: 'beere', foto_form: 'eckig' },
+  // Tupfen scatters coral dots; a round portrait is simply the largest of them,
+  // so it falls in with the motif instead of fighting it.
+  tupfen: { akzent: 'koralle', foto_form: 'rund' },
 };
 
 const DEFAULTS = {
@@ -158,6 +173,7 @@ function resolve(overrides = {}) {
       cardBg: [255, 255, 255],
       cardBorder: [208, 210, 214],
       deko: [208, 210, 214],   // the classic layout draws no sparkles; kept for shape parity
+      dekoHell: [230, 232, 235],
       band: tint(accent, 0.14),
       pillBg: tint(accent, 0.12),
       pillInk: accent,
@@ -180,6 +196,7 @@ function resolve(overrides = {}) {
       // Sparkles/blob sit on the tinted page, so they need more punch than the
       // card border or they simply vanish.
       deko: tint(accent, 0.45),
+      dekoHell: tint(accent, 0.22),
       band: tint(accent, 0.22),
       pillBg: tint(accent, 0.18),
       pillInk: shade(accent, 0.6),
@@ -200,6 +217,7 @@ function resolve(overrides = {}) {
       cardBg: [255, 255, 255],
       cardBorder: tint(accent, 0.22),
       deko: tint(accent, 0.30),
+      dekoHell: tint(accent, 0.16),
       band: tint(accent, 0.24),      // the pastel hero band and section bars
       pillBg: accent,                // solid badge…
       pillInk: [255, 255, 255],      // …with the text knocked out white
@@ -208,6 +226,29 @@ function resolve(overrides = {}) {
       onSide: [40, 36, 42],
       onSideSub: [124, 118, 126],
     },
+    // Tupfen is a monochrome page that happens to have confetti on it. The text
+    // is ink on white throughout — the accent never touches a paragraph, only
+    // the dots: the scattered ones in the margins, the section markers, the
+    // bullets, the language meters. The hairline stays a *neutral* grey rather
+    // than a tinted one, or the restraint collapses and the page turns pink.
+    tupfen: {
+      ink: [26, 26, 28],
+      sub: [112, 114, 120],
+      hair: [226, 228, 232],
+      accent,
+      pageBg: null,                  // white page — the dots are the whole design
+      cardBg: [255, 255, 255],
+      cardBorder: [226, 228, 232],
+      deko: tint(accent, 0.62),      // the dots' base tone
+      dekoHell: tint(accent, 0.34),  // …and the paler ones behind them, for depth
+      band: tint(accent, 0.14),
+      pillBg: tint(accent, 0.12),
+      pillInk: shade(accent, 0.72),
+      sidebarBg,          // unused
+      track: tint(accent, 0.20),     // an unfilled dot of a language meter
+      onSide: [26, 26, 28],
+      onSideSub: [112, 114, 120],
+    },
   };
   const rc = RC[s.layout] || RC.sidebar;
 
@@ -223,6 +264,7 @@ function resolve(overrides = {}) {
       cardBg: [255, 255, 255],
       cardBorder: [206, 208, 212],
       deko: [206, 208, 212],
+      dekoHell: [230, 232, 235],
       band: rc.band,
       pillBg: tint(accent, 0.12),
       pillInk: accent,
@@ -236,6 +278,7 @@ function resolve(overrides = {}) {
       cardBg: rc.cardBg,
       cardBorder: rc.cardBorder,
       deko: rc.deko,
+      dekoHell: rc.dekoHell,
       band: rc.band,
       pillBg: rc.pillBg,
       pillInk: rc.pillInk,
@@ -249,6 +292,7 @@ function resolve(overrides = {}) {
       cardBg: rc.cardBg,
       cardBorder: rc.cardBorder,
       deko: rc.deko,
+      dekoHell: rc.dekoHell,
       band: rc.band,
       // The letter's role badge sits on the pastel head band, so a solid accent
       // slug reads too loud next to the résumé's poster. A white pill with the
@@ -257,17 +301,36 @@ function resolve(overrides = {}) {
       pillBg: rc.cardBg,
       pillInk: accent,
     },
+    // Tupfen's letter is not the quieter twin of anything — the résumé is already
+    // quiet. Both sheets are the same white page with the same confetti, so the
+    // letter simply takes the résumé's tones unchanged.
+    tupfen: {
+      ink: rc.ink,
+      muted: rc.sub,
+      hair: rc.hair,
+      accent,
+      pageBg: rc.pageBg,
+      cardBg: rc.cardBg,
+      cardBorder: rc.cardBorder,
+      deko: rc.deko,
+      dekoHell: rc.dekoHell,
+      band: rc.band,
+      pillBg: rc.pillBg,
+      pillInk: rc.pillInk,
+    },
   };
   const lc = LC[s.layout] || LC.sidebar;
 
   // Which typefaces the renderer registers and draws with. The playful layout
   // adds a script face for its "Hallo, ich bin" line; Sunny lives off Poppins
   // Bold alone (its whole hierarchy is size, not style); the classic one stays
-  // on Lato and embeds nothing extra.
+  // on Lato and embeds nothing extra. Tupfen takes Poppins too — the reference's
+  // geometric grotesk, whose round, wide letterforms rhyme with the dots.
   const FONTS = {
     sidebar: { sans: 'Lato', script: null },
     social: { sans: 'Poppins', script: 'Pacifico' },
     sunny: { sans: 'Poppins', script: null },
+    tupfen: { sans: 'Poppins', script: null },
   };
 
   return {