diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
new file mode 100644
index 00000000000..28a1e323ded
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
@@ -0,0 +1,61 @@
+---
+id: 5f344fc1520b6719f2e35605
+title: Schritt 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Auf der Speisekarte gibt es zwei Abschnitte, einen für Kaffee und einen für die Desserts. Füge ein `section`-Element innerhalb des `main`-Elements hinzu, so dass du einen Platz hast, um alle verfügbaren Kaffeesorten zu zeigen.
+
+# --hints--
+
+Du solltest ein einleitendes ``-Tag haben.
+
+```js
+assert(code.match(//i));
+```
+
+Du solltest ein abschließendes ``-Tag haben.
+
+```js
+assert(code.match(/<\/section\s*>/i));
+```
+
+Du solltest das vorhandene `main`-Element nicht ändern. Stelle sicher, dass du den abschließenden Tag nicht gelöscht hast.
+
+```js
+assert($('main').length === 1);
+```
+
+Dein `section`-Element sollte sich innerhalb deines `main`-Elements befinden.
+
+```js
+const main = document.querySelectorAll('main')?.[0];
+assert(main.children[0].tagName === 'SECTION');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Cafe Menu
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
new file mode 100644
index 00000000000..64e419a137d
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -0,0 +1,79 @@
+---
+id: 5f356ed60a5decd94ab66986
+title: Schritt 23
+challengeType: 0
+removeComments: false
+dashedName: step-23
+---
+
+# --description--
+
+Kommentare in CSS sehen wie folgt aus:
+
+```css
+/* comment here */
+```
+
+Schreibe in deinem Stylesheet die Zeile mit der `background-color`- Eigenschaft und dem Wert aus, damit du die Wirkung des einzigen `div`-Stilelements sehen kannst. Dadurch wird der Hintergrund wieder weiß.
+
+# --hints--
+
+Du solltest die `background-color: burlywood;`-Zeile in deinem CSS auskommentieren.
+
+```js
+assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
+```
+
+
+Dein `body` sollte einen weißen Hintergrund haben.
+
+```js
+const bodyCSS = $('body').css('background-color');
+assert(bodyCSS === "rgba(0, 0, 0, 0)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+body {
+--fcc-editable-region--
+ background-color: burlywood;
+--fcc-editable-region--
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+div {
+ width: 300px;
+}
+```
+
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
new file mode 100644
index 00000000000..03b69dc0f08
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -0,0 +1,76 @@
+---
+id: 5f356ed63c7807a4f1e6d054
+title: Schritt 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Jetzt wollen wir, dass `div` nicht die gesamte Breite der Seite in Anspruch nimmt. Die CSS `width`-Eigenschaft ist dafür perfekt geeignet. Erstelle einen neuen Typselektor im Stylesheet, der deinem `div`-Element eine Breite von `300px` gibt.
+
+# --hints--
+
+Du solltest einen `div`-Typselektor haben.
+
+```js
+const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+assert(hasDiv);
+```
+
+Du solltest die `width`-Eigenschaft auf `300px` setzen.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
+assert(hasWidth);
+```
+
+Dein `div` sollte eine Breite von 300px haben.
+
+```js
+const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
+assert(divWidth === '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background-color: burlywood;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
new file mode 100644
index 00000000000..897d6a76d32
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -0,0 +1,74 @@
+---
+id: 5f356ed63e0fa262326eef05
+title: Schritt 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Benutze jetzt den `div`-Selektor, um die Hintergrundfarbe des `div`-Elements auf `burlywood` zu setzen.
+
+# --hints--
+
+Du solltest die `background-color`-Eigenschaft auf `burlywood` setzen.
+
+```js
+const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
+assert(hasBackgroundColor);
+```
+
+Dein `div` sollte einen "burlywood" Hintergrund haben.
+
+```js
+const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
+assert(divBackground === 'burlywood');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+div {
+ width: 300px;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
new file mode 100644
index 00000000000..75dba618e62
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -0,0 +1,75 @@
+---
+id: 5f356ed69db0a491745e2bb6
+title: Schritt 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Füge, um den Stil der Klasse auf das `div`-Element anzuwenden, ein `class`-Attribut zum Öffnungstag des `div`-Elements hinzu und setze seinen Wert auf `menu`.
+
+# --hints--
+
+Dein `div` sollte weiterhin wiedergegeben werden. Stelle sicher, dass du das `
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
new file mode 100644
index 00000000000..27af65da331
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -0,0 +1,77 @@
+---
+id: 5f356ed6cf6eab5f15f5cfe6
+title: Schritt 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Das `div`-Element wird im Gegensatz zu anderen Inhaltselementen, die du bisher verwendet hast, hauptsächlich für Layoutzwecke verwendet. Füge ein `div`-Element im `body`-Element hinzu und verschiebe dann alle anderen Elemente innerhalb des neuen `div`.
+
+# --hints--
+
+Du solltest einen einleitenden `
`-Tag haben.
+
+```js
+assert(code.match(/
/i));
+```
+
+Du solltest ein abschließendes `
`-Tag haben.
+
+```js
+assert(code.match(/<\/div>/i));
+```
+
+Du solltest dein vorhandenes `body`-Element nicht verändern. Stelle sicher, dass du das abschließende Tag nicht gelöscht hast.
+
+```js
+assert($('body').length === 1);
+```
+
+Dein `div`-Tag sollte innerhalb deines `body`-Elements verschachtelt sein.
+
+```js
+const div = $('div')[0];
+assert(div.parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+--fcc-editable-region--
+
+
+
CAMPER CAFE
+
Est. 2020
+
+
+
+
Coffee
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background-color: burlywood;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+```
+
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md
new file mode 100644
index 00000000000..dcd6c9ab430
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md
@@ -0,0 +1,181 @@
+---
+id: 6140c7e645d8e905819f1dd4
+title: Schritt 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+Beginne mit dem standardmäßigen Boilerplate-Code. Füge deine `DOCTYPE`-Deklaration, dein `html`-Element mit der Sprache auf Englisch gesetzt, deine `head` und `body`-Elemente hinzu.
+
+Füge dein `meta`-Element dem richtigen `charset` hinzu, dein `title`-Element, und ein `link`-Element für die `./styles.css`-Datei.
+
+Setze den `title` auf `Ferris Wheel`.
+
+# --hints--
+
+Dein Code sollte die `DOCTYPE` Referenz beinhalten.
+
+```js
+assert(code.match(/` nach dem Typ schließen.
+
+```js
+assert(code.match(//gi));
+```
+
+Dein `html`-Element sollte ein öffnendes Tag mit einem `lang`-Attribut von `en` haben.
+
+```js
+assert(code.match(//gi));
+```
+
+Dein `html`-Element sollte ein abschließendes Tag haben.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+Deine `DOCTYPE`-Deklaration sollte am Anfang deines HTML stehen.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
+```
+
+Du solltest einen einleitenden `head`-Tag haben.
+
+```js
+assert(code.match(//i));
+```
+
+Du solltest einen abschließenden `head`-Tag haben.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+Du solltest einen öffnenden `body`-Tag haben.
+
+```js
+assert(code.match(//i));
+```
+
+Du solltest einen abschließenden `body`-Tag haben.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+Die `head` und `body`- Elemente sollten Geschwister sein.
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+Das `head`-Element sollte innerhalb des `html`-Elements sein.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+Das `body`-Element sollte innerhalb des `html`-Elements sein.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+Dein Code sollte ein `meta`-Element haben.
+
+```js
+const meta = document.querySelector('meta');
+assert.exists(meta);
+```
+
+Dein `meta`-Element sollte ein `charset`-Attribut mit dem Wert `UTF-8` haben.
+
+```js
+assert.match(code, / link'));
+```
+
+Dein `link`-Element sollte ein `rel`-Attribut mit dem Wert `stylesheet` haben.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Dein `link`-Element sollte ein `href`-Attribut mit dem Wert `styles.css` haben.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md
new file mode 100644
index 00000000000..8b0fc2dda99
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md
@@ -0,0 +1,79 @@
+---
+id: 6140c9d35015ae0ba0c250e8
+title: Schritt 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Füge ein `div` innerhalb deines `body`-Elements ein und gib ihm eine `class` von `wheel`.
+
+Füge in deinem neuen `div` sechs `span`-Elemente mit einer `class` von `line` sowie sechs `div`-Elemente mit einer `class` von `cabin` ein.
+
+# --hints--
+
+Du solltest ein neues `div` innerhalb deines `body`-Elements hinzufügen.
+
+```js
+const divs = [...document.querySelector('body')?.children].filter(child => child?.localName === 'div');
+assert(divs?.length === 1);
+```
+
+Dein `div` innerhalb deines `body`-Elements sollte eine `class` von `wheel` haben.
+
+```js
+assert(document.querySelector('body div')?.classList?.contains('wheel'));
+```
+
+Dein `.wheel`-Element sollte sechs `span`-Elemente enthalten.
+
+```js
+assert(document.querySelectorAll('.wheel span')?.length === 6);
+```
+
+Deine sechs `span`-Elemente innerhalb deines `.wheel`-Elements sollten eine `class` von `line` haben.
+
+```js
+const spans = [...document.querySelectorAll('.wheel span')];
+assert(spans?.every(span => span?.classList?.contains('line')));
+assert(document.querySelectorAll('.line')?.length === 6);
+```
+
+Dein `.wheel`-Element sollte sechs `div`-Elemente enthalten.
+
+```js
+assert(document.querySelectorAll('.wheel div')?.length === 6);
+```
+
+Deine sechs `div`-Elemente innerhalb deines `.wheel`-Elements sollten eine `class` von `cabin` haben.
+
+```js
+const divs = [...document.querySelectorAll('.wheel div')];
+assert(divs?.every(div => div?.classList?.contains('cabin')));
+assert(document.querySelectorAll('.cabin')?.length === 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
new file mode 100644
index 00000000000..fe9ccca48ba
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
@@ -0,0 +1,74 @@
+---
+id: 6140cbeec34e970dfe75e710
+title: Schritt 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Erstelle einen Selektor für dein `.wheel`-Element. Beginne, indem du `border` auf `2px solid black` setzt, `border-radius` auf `50%` und `margin-left` auf `50px`.
+
+# --hints--
+
+Du solltest einen `.wheel`-Selektor haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel'));
+```
+
+Dein `.wheel`-Selektor sollte eine, auf `2px solid black` gesetzte, `border`-Eigenschaft haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black');
+```
+
+Dein `.wheel`-Selektor sollte eine, auf `50%` gesetzte, `border-radius`-Eigenschaft haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%');
+```
+
+Dein `.wheel`-Selektor sollte eine, auf `50px` gesetzte, `margin-left`-Eigenschaft haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md
new file mode 100644
index 00000000000..16f1299f89c
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md
@@ -0,0 +1,72 @@
+---
+id: 6140cd32d018ed0f600eefce
+title: Schritt 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Setze die `position`-Eigenschaft des `.wheel`-Selektors auf `absolute`. Setze sowohl die `height` als auch die `width` auf `55vw`.
+
+# --hints--
+
+Dein `.wheel`-Selektor sollte eine `position`-Eigenschaft von `absolute` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute');
+```
+
+Dein `.wheel`-Selektor sollte eine `height`-Eigenschaft von `55vw` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw');
+```
+
+Dein `.wheel`-Selektor sollte eine `width`-Eigenschaft von `55vw` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md
new file mode 100644
index 00000000000..edf545837d2
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md
@@ -0,0 +1,85 @@
+---
+id: 6140cdebd39d6a101e747529
+title: Schritt 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Erstelle einen Selektor für deine `.line`-Elemente. Beginne, indem du `background-color` auf `black` setzt, `width` auf `50%` und `height` auf `2px`.
+
+# --hints--
+
+Du solltest einen `.line`-Selektor haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line'));
+```
+
+Dein `.line`-Selektor sollte eine `background-color`-Eigenschaft von `black` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black");
+```
+
+Dein `.line`-Selektor sollte eine `width`-Eigenschaft von `50%` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%");
+```
+
+Dein `.line`-Selektor sollte eine `height`-Eigenschaft von `2px` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md
new file mode 100644
index 00000000000..a1b43b3d42a
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md
@@ -0,0 +1,83 @@
+---
+id: 6140cfc08ca9c5128c3e6478
+title: Schritt 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Setze die `position`-Eigenschaft des `.line`-Selektors auf `absolute`, die `left`-Eigenschaft auf `50%` und die `top`-Eigenschaft auf `50%`.
+
+# --hints--
+
+Dein `.line`-Selektor sollte eine `position`-Eigenschaft von `absolute` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute');
+```
+
+Dein `.line`-Selektor sollte eine `left`-Eigenschaft von `50%` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%');
+```
+
+Dein `.line`-Selektor sollte eine `top`-Eigenschaft von `50%` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+--fcc-editable-region--
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md
new file mode 100644
index 00000000000..7c5d92d050f
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md
@@ -0,0 +1,77 @@
+---
+id: 6140d0069049f5139d78da40
+title: Schritt 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Die `transform-origin`-Eigenschaft wird zur Festlegung des Punkts, an welchem eine CSS-Transformation angewendet wird, genutzt. Möchtest du beispielsweise ein `rotate` durchführen (was du im späteren Projektverlauf machen wirst), legt `transform-origin` den Punkt fest, um welchen das Element rotiert.
+
+Gib dem `.line`-Selektor eine `transform-origin`-Eigenschaft von `0% 0%`. Hierdurch wird der Ausgangspunkt um `0%` von links und um `0%` von oben verschoben, wodurch dieser auf die obere linke Ecke des Elements verschoben wird.
+
+# --hints--
+
+Dein `.line`-Selektor sollte eine `transform-origin`-Eigenschaft von `0% 0%` haben.
+
+```js
+const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin;
+assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+--fcc-editable-region--
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md
new file mode 100644
index 00000000000..c201c04c0eb
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md
@@ -0,0 +1,85 @@
+---
+id: 6140d10d50636e14695013b2
+title: Schritt 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Erstelle einen, auf dein zweites `.line`-Element abzielenden, Selektor. Setze die `transform`-Eigenschaft auf `rotate(60deg)`.
+
+Denk daran, dass die `transform`-Eigenschaft es dir erlaubt, die Form eines Elements zu verändern. In diesem Fall dreht der `rotate(60deg)`-Wert das Element um 60 Grad im Uhrzeigersinn, um seinen `transform-origin`-Punkt herum.
+
+# --hints--
+
+Du solltest einen `.line:nth-of-type(2)`-Selektor erstellen.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
+```
+
+Dein `.line:nth-of-type(2)`-Selektor sollte eine, auf `rotate(60deg)` gesetzte, `transform`-Eigenschaft haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md
new file mode 100644
index 00000000000..fcc535d6660
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md
@@ -0,0 +1,126 @@
+---
+id: 6140d1a351e88f159ed54fca
+title: Schritt 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Erstelle mit demselben Muster einen separaten Selektor für den dritten `.line`, den vierten `.line`, den fünften `.line` und den sechsten `.line`.
+
+Setze die `transform`-Eigenschaft des dritten `.line` auf `rotate(120deg)`, des vierten auf `rotate(180deg)`, des fünften auf `rotate(240deg)` und des sechsten auf `rotate(300deg)`.
+
+# --hints--
+
+Du solltest einen `.line:nth-of-type(3)`-Selektor erstellen.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));
+```
+
+Dein `.line:nth-of-type(3)`-Selektor sollte eine `transform`-Eigenschaft von `rotate(120deg)` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)');
+```
+
+Du solltest einen `.line:nth-of-type(4)`-Selektor erstellen.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));
+```
+
+Dein `.line:nth-of-type(4)`-Selektor sollte eine `transform`-Eigenschaft von `rotate(180deg)` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)');
+```
+
+Du solltest einen `.line:nth-of-type(5)`-Selektor erstellen.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));
+```
+
+Dein `.line:nth-of-type(5)`-Selektor sollte eine `transform`-Eigenschaft von `rotate(240deg)` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)');
+```
+
+Du solltest einen `.line:nth-of-type(6)`-Selektor erstellen.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));
+```
+
+Dein `.line:nth-of-type(6)`-Selektor sollte eine `transform`-Eigenschaft von `rotate(300deg)` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md
new file mode 100644
index 00000000000..f36cd7c51ef
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md
@@ -0,0 +1,111 @@
+---
+id: 6140d263016325162fd076fe
+title: Schritt 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Erstelle einen `.cabin`-Selektor. Setze `background-color` auf `red`, `width` auf `20%` und `height` auf `20%`.
+
+# --hints--
+
+Du solltest einen `.cabin`-Selektor haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin'));
+```
+
+Dein `.cabin`-Selektor sollte eine `background-color`-Eigenschaft von `red` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red');
+```
+
+Dein `.cabin`-Selektor sollte eine `width`-Eigenschaft von `20%` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%');
+```
+
+Dein `.cabin`-Selektor sollte eine `height`-Eigenschaft von `20%` haben.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+