diff --git a/assets/scss/_farben.scss b/assets/scss/_farben.scss
new file mode 100644
index 0000000..39474bb
--- /dev/null
+++ b/assets/scss/_farben.scss
@@ -0,0 +1,16 @@
+:root {
+  --primary-waffle-fontcolor:#ffac33;
+  --secoundary-waffle-fontcolor:white;
+  --light-waffle-accent:rgba(5, 0, 12, 0.8);
+  --href-waffle-fontcolor:rgb(230, 79, 45);
+  --primary-waffle-accent:rgba(87, 5, 0, 0.9);
+  --blog-waffle-accent:rgba(155, 22, 15, 0.95);
+  --secoundary-waffle-accent:#CD4701;
+  --third-waffle-accent:#9B160F;
+  --rows-waffle-accent-even:#ff9333;
+  --rows-waffle-accent-odd:#ffac33;
+  --menu-waffle-accent:#ff9333;
+  --footer-waffle-accent:rgba(23, 24, 32, 1);
+  --waffel-background-color:#1c1d26;
+  --column-count:3;
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index e5625f8..4ac32e1 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -13,51 +13,8 @@
  * .navlist__navitem.-active
  */
 
-:root {
-  --primary-waffle-fontcolor:#ffac33;
-  --secoundary-waffle-fontcolor:white;
-  --light-waffle-accent:rgba(5, 0, 12, 0.8);
-  --href-waffle-fontcolor:rgb(230, 79, 45);
-  --primary-waffle-accent:rgba(87, 5, 0, 0.9);
-  --blog-waffle-accent:rgba(155, 22, 15, 0.95);
-  --secoundary-waffle-accent:#CD4701;
-  --third-waffle-accent:#9B160F;
-  --rows-waffle-accent-even:#ff9333;
-  --rows-waffle-accent-odd:#ffac33;
-  --menu-waffle-accent:#ff9333;
-  --footer-waffle-accent:rgba(23, 24, 32, 1);
-  --waffel-background-color:#1c1d26;
-  --column-count:3;
-}
-
-@keyframes backgroundImageAnimation {
-  0% {
-    background-image: url("/sweet_waffle-medium.webp");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-
-  33% {
-    background-image: url("/waffle_apfelmus-medium.webp");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-  66% {
-    background-image: url("/sweet_waffle-medium.webp");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-}
-
-.bganimation {
-  animation-name: backgroundImageAnimation;
-  animation-timing-function: step-start;
-  animation-iteration-count: infinite;
-  animation-duration: 20s;
-}
+@import "_farben";
+@import "_animation";
 
 body {
   font-family: 'Lato', sans-serif;
diff --git a/templates/zutaten/zubereitung.html b/templates/zutaten/zubereitung.html
index 7f4c5de..3681377 100644
--- a/templates/zutaten/zubereitung.html
+++ b/templates/zutaten/zubereitung.html
@@ -4,7 +4,7 @@
 {{- '\n      ' -}} <div class="content__box">
 {{- '\n        ' -}} <div class="content__inner_box">
 {{- '\n          ' -}} <h2>Zubereitung</h2>
-{{- '\n          ' -}} <ul>
+{{- '\n          ' -}} <ul class="zubereitung">
 {%- for stp in child.steps.blocks -%}
   {%- if stp.step is defined and stp.step != "" -%}
     {{- '\n            ' -}} <li>