feat: new email templates

src/templates/welcome/de.html

@@ -175,8 +175,10 @@
 								-moz-osx-font-smoothing: grayscale;
 							"
 						>
-							Am Lauftag (<strong>{{event_date}}</strong>) musst du nur noch diesen
-							Barcode vorzeigen, damit erhältst du deine Läuferkarte.
+							Am Lauftag (<strong>{{event_date}}</strong>) musst du nur noch
+							diesen Barcode vorzeigen, damit erhältst du deine Läuferkarte.<br />Der
+							Bürger- & Firmenlauf findet von
+							<strong>13:00 bis 18:00 Uhr</strong> statt.
 						</p>
 						<table
 							align="center"
@@ -223,20 +225,103 @@
 							"
 						>
 							Deinen Registrierungs-Code, Rundenzeiten und weitere Infos kannst
-							du jederzeit im
-							<a
-								href="{{link}}"
-								rel="noopener noreferrer nofollow"
-								style="
-									color: #111827;
-									text-decoration: underline;
-									font-weight: 500;
-								"
-								target="_blank"
-								>Lauf für Kaya! Selfservice</a
-							>
-							einsehen.
+							du jederzeit im Lauf für Kaya! Selfservice einsehen.
 						</p>
+						<table
+							align="center"
+							width="100%"
+							border="0"
+							cellpadding="0"
+							cellspacing="0"
+							role="presentation"
+							style="max-width: 100%; text-align: center; margin-bottom: 20px"
+						>
+							<tbody>
+								<tr style="width: 100%">
+									<td>
+										<a
+											href="{{link}}"
+											style="
+												line-height: 100%;
+												text-decoration: none;
+												display: inline-block;
+												max-width: 100%;
+												mso-padding-alt: 0px;
+												color: #ffffff;
+												background-color: #3a4bdd;
+												border-color: #3a4bdd;
+												border-width: 2px;
+												border-style: solid;
+												font-size: 14px;
+												font-weight: 500;
+												border-radius: 0px;
+												padding: 12px 32px 12px 32px;
+											"
+											target="_blank"
+											><span
+												><!--[if mso
+													]><i
+														style="mso-font-width: 400%; mso-text-raise: 18"
+														hidden
+														>&#8202;&#8202;&#8202;&#8202;</i
+													><!
+												[endif]--></span
+											><span
+												style="
+													max-width: 100%;
+													display: inline-block;
+													line-height: 120%;
+													mso-padding-alt: 0px;
+													mso-text-raise: 9px;
+												"
+												>Zum Selfservice Portal</span
+											><span
+												><!--[if mso
+													]><i style="mso-font-width: 400%" hidden
+														>&#8202;&#8202;&#8202;&#8202;&#8203;</i
+													><!
+												[endif]--></span
+											></a
+										>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+						<p
+							style="
+								font-size: 15px;
+								line-height: 26.25px;
+								margin: 0 0 20px 0;
+								-webkit-font-smoothing: antialiased;
+								-moz-osx-font-smoothing: grayscale;
+								color: #374151;
+							"
+						>
+							Wenn der Button nicht funktioniert, kannst du diesen Link in
+							deinen Browser kopieren:
+							<code
+								style="
+									background-color: #efefef;
+									color: #111827;
+									padding: 2px 4px;
+									border-radius: 6px;
+									font-family: SFMono-Regular, Menlo, Monaco, Consolas,
+										'Liberation Mono', 'Courier New', monospace;
+									font-weight: 400;
+									letter-spacing: 0;
+								"
+								>{{link}}</code
+							>
+						</p>
+						<hr
+							style="
+								width: 100%;
+								border: none;
+								border-top: 1px solid #eaeaea;
+								margin-top: 32px;
+								margin-bottom: 32px;
+							"
+						/>
 						<p
 							style="
 								font-size: 15px;