diff --git a/sites/coderdojo/anmelden.md b/sites/coderdojo/anmelden.md
index 7114a18..6487e7a 100644
--- a/sites/coderdojo/anmelden.md
+++ b/sites/coderdojo/anmelden.md
@@ -53,7 +53,7 @@ Bitte verrate uns deinen Namen<span data-mode="child"> und den deines Kindes</sp
 
 <label class="form-input" data-mode="child">
   <span>Name des Kindes:</span>
-  <input type="text" name="participantname" required />
+  <input type="text" name="participantname" />
 </label>
 
 Optional kannst du uns jetzt noch eine Telefonnummer für Notfälle hinterlassen.
diff --git a/sites/coderdojo/kontakt/fehler.md b/sites/coderdojo/kontakt/fehler.md
new file mode 100644
index 0000000..74e9d48
--- /dev/null
+++ b/sites/coderdojo/kontakt/fehler.md
@@ -0,0 +1,15 @@
+---
+layout: layouts/page.njk
+---
+
+# Da passt was nicht…
+
+**Entschuldigung** &emsp;&mdash;&emsp;
+Leider konnten wir dein Formular nicht verarbeiten.
+Stelle bitte sicher, dass du alle Felder korrekt ausgefüllt hast.
+
+Außerdem darf dein Browser Cookies nicht blockieren.
+Das kann auch durch einen Werbeblocker passieren – eventuell musst du für unsere Seite eine Ausnahme hinterlegen.
+Wir verwenden Cookies nur für die Sicherheit unserer Formulare und binden weder Werbung noch Tracking-Dienste ein.
+
+Wenn das alles nicht hilft, schreibe uns bitte an [kontakt@coderdojo-wue.de](mailto:kontakt@coderdojo-wue.de).
diff --git a/sites/coderdojo/kontakt/fertig.md b/sites/coderdojo/kontakt/fertig.md
new file mode 100644
index 0000000..2d76650
--- /dev/null
+++ b/sites/coderdojo/kontakt/fertig.md
@@ -0,0 +1,34 @@
+---
+layout: layouts/page.njk
+extraStylesheets: ['finish']
+---
+
+# Es hat geklappt!
+
+<svg class="finish-hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214.46961 61.600083">
+  <linearGradient id="finish-hero-stroke-gradient" class="stroke-gradient" gradientUnits="userSpaceOnUse">
+    <stop offset="0%" />
+    <stop offset="25%" />
+    <stop offset="50%" />
+    <stop offset="100%" />
+  </linearGradient>
+  <path
+    class="cable"
+    d="M0 30.29a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h111.46a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5z"
+    stroke="url(#finish-hero-stroke-gradient)"
+  />
+  <path
+    class="contacts"
+    d="M204.96 27.13h9.51m-9.51-7.32h9.51m-9.51 14.63h9.51m-9.51 7.32h9.51"
+    stroke="url(#finish-hero-stroke-gradient)"
+  />
+  <path
+    class="plug"
+    d="M127.92 38.69h6.32a1 1 0 0 1 .94 1v11.45a1.07 1.07 0 0 0 .28.73l8.07 8.93a.93.93 0 0 0 .67.3h31.19a2.38 2.38 0 0 0 1.14-.28l4.14-3.61a.86.86 0 0 1 1.1.25l1.58 3.3a.91.91 0 0 0 .71.34h11.17a.92.92 0 0 0 .82-.52l3.89-7.46a2.3 2.3 0 0 0 .28-1.12l.11-44.47a1.07 1.07 0 0 0-.2-.63l-4.18-6a.92.92 0 0 0-.75-.4h-51a.93.93 0 0 0-.67.3l-8.07 8.93a1.07 1.07 0 0 0-.28.73V21.6a1 1 0 0 1-.94 1h-6.32m53.22 16.41a3.43 3.43 0 0 1-.86 2.27l-1.35 1.51a3.41 3.41 0 0 1-2.54 1.14h-19a3.45 3.45 0 0 1-2.54-1.1l-1.35-1.49a3.39 3.39 0 0 1-.87-2.27V21.92a3.39 3.39 0 0 1 .87-2.27l1.35-1.51A3.45 3.45 0 0 1 157.4 17h19a3.41 3.41 0 0 1 2.54 1.14l1.35 1.51a3.43 3.43 0 0 1 .86 2.27z"
+    fill="url(#finish-hero-stroke-gradient)"
+    stroke="url(#finish-hero-stroke-gradient)"
+  />
+</svg>
+
+**Vielen Dank**&emsp;&mdash;&emsp;
+Wir haben deine Anfrage erhalten.
diff --git a/styles/finish.scss b/styles/finish.scss
index 2b5742a..9c47fb4 100644
--- a/styles/finish.scss
+++ b/styles/finish.scss
@@ -10,6 +10,41 @@
 @use 'lib/motion';
 
 .finish-hero {
+	--dark-idle-color: #{colors.$gray-900};
+	--light-idle-color: #{colors.$gray-600};
+	--idle-color-1: #{colors.$teal-600};
+	--idle-color-2: #{colors.$yellow-600};
+	--idle-color-3: #{colors.$blue-800};
+	--gradient-color-1: var(--dark-idle-color);
+	--gradient-color-2: var(--dark-idle-color);
+	--gradient-color-3: #{colors.$blue-500};
+	--gradient-color-4: #{colors.$teal-500};
+	--gradient-color-5: #{colors.$yellow-500};
+	--gradient-color-6: #{colors.$teal-500};
+	--gradient-color-7: #{colors.$gray-300};
+	--gradient-color-8: #{colors.$yellow-500};
+	--gradient-color-9: #{colors.$blue-500};
+	--gradient-color-10: #{colors.$gray-300};
+	--gradient-color-11: var(--dark-idle-color);
+	--gradient-color-12: var(--dark-idle-color);
+	--gradient-color-13: var(--dark-idle-color);
+
+	@include colors.coderdojo-theme {
+		--dark-idle-color: #{colors.$brown-800};
+		--light-idle-color: #{colors.$brown-500};
+		--idle-color-1: #{colors.$green-500};
+		--idle-color-2: #{colors.$orange-500};
+		--idle-color-3: #{colors.$yellow-500};
+		--gradient-color-3: #{colors.$orange-500};
+		--gradient-color-4: #{colors.$orange-400};
+		--gradient-color-5: #{colors.$yellow-500};
+		--gradient-color-6: #{colors.$green-500};
+		--gradient-color-7: #{colors.$green-300};
+		--gradient-color-8: #{colors.$orange-400};
+		--gradient-color-9: #{colors.$orange-500};
+		--gradient-color-10: #{colors.$green-500};
+	}
+
 	@keyframes finish-hero {
 		0% {
 			stroke-width: 3px;
@@ -37,20 +72,14 @@
 	animation: motion.$prominent 0s 1 normal both running finish-hero;
 
 	> .stroke-gradient {
-		$idle-color: colors.$gray-900;
-		$colors: [ $idle-color $idle-color $idle-color colors.$blue-500
-			colors.$teal-500 colors.$yellow-500 colors.$teal-500 colors.$gray-300
-			colors.$yellow-500 colors.$blue-500 colors.$gray-300 $idle-color
-			$idle-color $idle-color ];
-
 		@for $i from 1 through 4 {
 			> stop:nth-of-type(#{$i}) {
 				@keyframes finish-stroke-gradient-#{$i} {
 					0% {
-						stop-color: $idle-color;
+						stop-color: var(--dark-idle-color);
 					}
 					15% {
-						stop-color: $idle-color;
+						stop-color: var(--dark-idle-color);
 					}
 					// This is some magic that chooses the correct colors for each
 					// stop - don't change it unless you know what you are doing! In
@@ -63,16 +92,16 @@
 					// In order to achieve the 'moving' effect, we make sure that the
 					// first and last three colors match the ones we are given at 15% and
 					// 70% (before and after the core animation).
-					@for $j from 1 to list.length($colors) - 3 {
+					@for $j from 1 to 10 {
 						#{15% + $j * 5%} {
-							stop-color: list.nth($colors, 4 + $j - $i);
+							stop-color: var(--gradient-color-#{4 + $j - $i});
 						}
 					}
 					70% {
-						stop-color: $idle-color;
+						stop-color: var(--dark-idle-color);
 					}
 					100% {
-						stop-color: $idle-color;
+						stop-color: var(--dark-idle-color);
 					}
 				}
 
@@ -123,27 +152,27 @@
 		}
 		@keyframes finish-hero-plug-transition {
 			0% {
-				fill: colors.$gray-900;
+				fill: var(--dark-idle-color);
 			}
 			100% {
-				fill: colors.$gray-600;
+				fill: var(--light-idle-color);
 			}
 		}
 		@keyframes finish-hero-plug-idle {
 			0% {
-				fill: colors.$gray-600;
+				fill: var(--light-idle-color);
 			}
 			25% {
-				fill: colors.$teal-600;
+				fill: var(--idle-color-1);
 			}
 			50% {
-				fill: colors.$yellow-600;
+				fill: var(--idle-color-2);
 			}
 			75% {
-				fill: colors.$blue-800;
+				fill: var(--idle-color-3);
 			}
 			100% {
-				fill: colors.$gray-600;
+				fill: var(--light-idle-color);
 			}
 		}