Update docs

- change hierarchy

Author: zoglo

docs/pages/docs/configuration/backgrounds.md renamed to docs/pages/configuration/backgrounds.md

@@ -24,15 +24,15 @@ Hintergrundbildern bedeutet dies, dass jede einzelne CSS-Klasse dem Anwender bek
 Der ThemeManager erweitert eine Option im Dateisystem, sodass Bilder als Hintergrundbild definiert werden können.
 
 <figure markdown>
-  ![Bild als Hintergrund festlegen](../../../assets/configuration/background/file-set-as-background.png){loading=lazy}
+  ![Bild als Hintergrund festlegen](../../assets/configuration/background/file-set-as-background.png){loading=lazy}
   <figcaption>Über die Option kann ein Hintergrundbild festgelegt werden</figcaption>
 </figure>
 
 Da das `CSS` für Hintergrundbilder erst generiert werden muss, stehen diese erst nach Kompilieren des Themes zur
 Verfügung.
 
 <figure markdown>
-  ![Compiler preview](../../../assets/configuration/background/background-compiler.png){loading=lazy}
+  ![Compiler preview](../../assets/configuration/background/background-compiler.png){loading=lazy}
   <figcaption>Der Asset-Compiler listet alle verfügbaren Hintergründe auf</figcaption>
 </figure>
 
@@ -50,7 +50,7 @@ stehen.
 Anwender können die Hintergrundbilder unter dem Reiter Background auswählen. Die Beschriftung der Hintergrundbilder
 im Backend folgt hierbei dem Schema `BG-[Dateiname]`.
 
-![Hintergrund auswählen](../../../assets/configuration/background/style-manager-background-image.png){loading=lazy}
+![Hintergrund auswählen](../../assets/configuration/background/style-manager-background-image.png){loading=lazy}
 
 ### Wo kann ich Hintergrundbilder einstellen?
 
@@ -82,7 +82,7 @@ Der StyleManager ermöglicht es, dass CSS-Klassen an ausgewählten Stellen in ei
 (Template-Variablen).
 
 <figure markdown>
-  ![Global, Component und Element](../../../assets/configuration/background/global-component-element.png){loading=lazy}
+  ![Global, Component und Element](../../assets/configuration/background/global-component-element.png){loading=lazy}
   <figcaption>Hervorhebung der Gruppen anhand einer Bild-Text-Liste. Lila hebt lediglich das gesamte Element (Global) hervor</figcaption>
 </figure>
 
@@ -113,14 +113,14 @@ Der StyleManager ermöglicht es, dass CSS-Klassen an ausgewählten Stellen in ei
 Die im StyleManager verfügbaren Hintergrund-Einstellungen können genutzt werden, um das Verhalten des festgelegten
 Hintergrunds zu beeinflussen.
 
-![Einstellungen im StyleManager](../../../assets/configuration/background/background-settings.png){loading=lazy}
+![Einstellungen im StyleManager](../../assets/configuration/background/background-settings.png){loading=lazy}
 
 Die nachfolgende Tabelle erklärt alle weiteren Optionen, wobei der Standardwert bereits der `Best-Practice` folgt.
 
 | Einstellung         | Standardwert                                                                     | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 |---------------------|----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | Color               | -                                                                                | Hiermit kann eine Hintergrundfarbe ausgewählt werden. Eine Kombination mit transparenten Hintergrundbildern ist möglich.                                                                                                                                                                                                                                                                                                                                             |
-| Image               | [none](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)        | Dient der Auswahl des Hintergrundbildes. Über die Option `none` kann ein über den [Skin](../../guides/skin/introduction.md) gesetztes Hintergrundbild entfernt werden.                                                                                                                                                                                                                                                                                               |
+| Image               | [none](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)        | Dient der Auswahl des Hintergrundbildes. Über die Option `none` kann ein über den [Skin](../guides/skin/introduction.md) gesetztes Hintergrundbild entfernt werden.                                                                                                                                                                                                                                                                                                  |
 | Attachment          | [scroll](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment) | Über diese Einstellung wird das Hintergrundbild in der Position im Browserfenster fixiert, sodass dieses beim Scrollen an der selben Stelle bleibt.                                                                                                                                                                                                                                                                                                                  |
 | Repeat              | [no-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)  | Background-Repeat kann genutzt werden, damit kleine Bilder auf einer großen Fläche wiederholt werden. Wirkt nicht, wenn etwas in `Size` eingestellt wurde.                                                                                                                                                                                                                                                                                                           |
 | Size                | [cover](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)        | Diese Einstellung bestimmt die Größe des eingesetzten Hintergrundbildes.<br><br>Über `contain` wird das Bild so groß wie möglich innerhalb des Containers skaliert, ohne das Bild zu beschneiden oder zu dehnen. Wenn das Bild zu klein für den Container ist, wird das Bild gekachelt, wenn eine Einstellung in `Size` vorgenommen wurde.<br><br>Die Einstellung `auto` skaliert das Bild in der entsprechenden Richtung, sodass die Proportionen erhalten bleiben. |
@@ -172,12 +172,12 @@ wurde eine neue Funktion hinzugefügt, welche in diversen Einstellungen von Hint
 Werden eigene Hintergrundfarben im StyleManager ergänzt, wird ein Platzhalter angezeigt.
 
 <figure markdown>
-  ![Farbvorschau aktivieren](../../../assets/configuration/background/color-preview-setting.png){loading=lazy}
+  ![Farbvorschau aktivieren](../../assets/configuration/background/color-preview-setting.png){loading=lazy}
   <figcaption>Aktivieren der Farbvorschau in den Benutzer-Einstellungen</figcaption>
 </figure>
 
 <figure markdown>
-  ![Farbvorschau in Einstellungen](../../../assets/configuration/background/color-preview.png){loading=lazy}
+  ![Farbvorschau in Einstellungen](../../assets/configuration/background/color-preview.png){loading=lazy}
   <figcaption>Farbvorschau innerhalb der Hintergrundfarben</figcaption>
 </figure>
 

docs/pages/docs/configuration/icon-set.md renamed to docs/pages/configuration/icon-set.md

@@ -8,7 +8,7 @@ Bei der Verwendung von Icon-Fonts, die über Dienste wie IcoMoon oder Fontello e
 stellt sich oft die Herausforderung, die zugehörigen CSS-Dateien einzubinden und die entsprechenden Klassen in Templates
 oder CSS-Anpassungen für Komponenten zu integrieren.
 
-![Icon in einer Button-Komponente](../../../assets/configuration/icons/component-icon.png){loading=lazy}
+![Icon in einer Button-Komponente](../../assets/configuration/icons/component-icon.png){loading=lazy}
 
 Der Contao ThemeManager ermöglicht es Anwendern, ihr Icon-Set direkt in den Systemeinstellungen auszuwählen. Automatisch
 generiert der ThemeManager das benötigte CSS, und die festgelegten Optionen stehen systemweit im StyleManager zur
@@ -29,7 +29,7 @@ entpackt werden.
 
 Im Download einer IcoMoon-Schriftart befinden sich die benötigten Dateien im Ordner `fonts`:
 
-![IcoMoon Download mit Dateien](../../../assets/configuration/icons/font-files.png){loading=lazy}
+![IcoMoon Download mit Dateien](../../assets/configuration/icons/font-files.png){loading=lazy}
 
 Folgende Dateien müssen in *einen Ordner* abgelegt werden:
 
@@ -39,7 +39,7 @@ Folgende Dateien müssen in *einen Ordner* abgelegt werden:
 Um die Icon-Schriftart einzubinden, muss die `*.svg` unter `System` -> `Einstellungen` unter ThemeManager eingebunden
 werden.
 
-![Icon-Set einstellen](../../../assets/configuration/icons/settings-icon-set.png){loading=lazy}
+![Icon-Set einstellen](../../assets/configuration/icons/settings-icon-set.png){loading=lazy}
 
 !!! tip
 
@@ -49,17 +49,17 @@ werden.
 Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit.
 
 <figure markdown>
-  ![Asset Compiler Report](../../../assets/configuration/icons/maintenance-generated-icon-font.png){loading=lazy}
+  ![Asset Compiler Report](../../assets/configuration/icons/maintenance-generated-icon-font.png){loading=lazy}
   <figcaption>Asset-Compiler Report</figcaption>
 </figure>
 
 <figure markdown>
-  ![Icons innerhalb der Link-Einstellungen](../../../assets/configuration/icons/stylemanager-icon-picker.png){loading=lazy}
+  ![Icons innerhalb der Link-Einstellungen](../../assets/configuration/icons/stylemanager-icon-picker.png){loading=lazy}
   <figcaption>Icons innerhalb der Link-Einstellungen</figcaption>
 </figure>
 
 <figure markdown>
-  ![Icon-Auswahl im RockSolid Icon-Picker](../../../assets/configuration/icons/rocksolid-icon-picker.png){loading=lazy}
+  ![Icon-Auswahl im RockSolid Icon-Picker](../../assets/configuration/icons/rocksolid-icon-picker.png){loading=lazy}
   <figcaption>Icon-Auswahl im RockSolid Icon-Picker</figcaption>
 </figure>
 
@@ -70,7 +70,7 @@ Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit.
 
 ### Hinweise und Fehlermeldungen
 
-![Hinweise und Fehlermeldungen im Asset-Compiler](../../../assets/configuration/icons/maintenance-no-icon-font-woff-file.png){loading=lazy}
+![Hinweise und Fehlermeldungen im Asset-Compiler](../../assets/configuration/icons/maintenance-no-icon-font-woff-file.png){loading=lazy}
 
 Folgende Hinweise und Fehlermeldungen können vom Asset-Compiler zurückgegeben werden:
 
@@ -105,7 +105,7 @@ gezogen werden, um die Icons zu laden.
     eine Dokumentation auf [GitHub](https://github.com/fontello/fontello/wiki/Help).
 
 <figure markdown>
-  ![Übersicht der IcoMoon-App](../../../assets/configuration/icons/icoMoon.png){loading=lazy}
+  ![Übersicht der IcoMoon-App](../../assets/configuration/icons/icoMoon.png){loading=lazy}
   <figcaption>Übersicht der IcoMoon-App</figcaption>
 </figure>
 

docs/pages/docs/configuration/theme/buttons.md renamed to docs/pages/configuration/theme/buttons.md

@@ -123,7 +123,7 @@ Bei Einstellung der Option `box-shadow` wird ein zusätzlicher Schatten/Schlagsc
 
 Wenn für alle Box-Komponenten nur der Schlagschatten ohne Rahmen erwünscht ist, kann der `$boxed-border-width` auf `0`
 gestellt werden. Soll der Rahmen bei `box` weiterhin bestehen bleiben, kann eine Option über einen eigenen
-[Skin](../../../guides/skin/introduction.md) individuell erweitert werden.
+[Skin](../../guides/skin/introduction.md) individuell erweitert werden.
 
 ---
 
@@ -176,7 +176,7 @@ Folgende Einstellungen können hierbei vorgenommen werden:
     werden, welche im TinyMCE-Editor erstellt wurden.
 
     Es ist derzeit nicht möglich, dass Tabellenstyles über den StyleManager *aktiviert oder *deaktiviert* werden können.
-    Ist dies nicht erwünscht, können Tabellen im eigenen [Skin](../../../guides/skin/introduction.md) angepasst werden.
+    Ist dies nicht erwünscht, können Tabellen im eigenen [Skin](../../guides/skin/introduction.md) angepasst werden.
 
 ### Tabellenzelle
 
@@ -252,7 +252,7 @@ Bestandteile einer Tabelle einstellen:
 Bis auf die Icon-Schriftart bezieht sich die nachfolgende Konfiguration auf das Aussehen der durch den ThemeManager
 bereitgestellten Inhaltselemente `Icon`, `Icon-Text` und `Icon-Text-Liste`.
 
-![Icon-Einstellungen](../../../../assets/configuration/components/icon-settings-stylemanager.png){loading=lazy}
+![Icon-Einstellungen](../../../assets/configuration/components/icon-settings-stylemanager.png){loading=lazy}
 
 ### Icon-Schriftart
 
@@ -266,7 +266,7 @@ Diese Einstellung überschreibt die Schriftart der Icons, die vom ThemeManager v
     Generierung und Bereitstellung von Icons nicht mehr.
 
     Das Ändern der hier eingestellten Schriftart wird nur empfohlen, wenn das Feature nicht benötigt wird und die
-    verwendeten Icons über einen eigenen [Skin](../../../guides/skin/introduction.md) festgelegt werden.
+    verwendeten Icons über einen eigenen [Skin](../../guides/skin/introduction.md) festgelegt werden.
 
 ### Größe der Icons
 
@@ -289,7 +289,7 @@ wird.
 `$icon-outlined-width`
 
 Über die Optionen `Design` sowie `Shape` kann das Aussehen von Icons modifiziert werden.
-![Icon-Designs](../../../../assets/configuration/components/icons.png){loading=lazy}
+![Icon-Designs](../../../assets/configuration/components/icons.png){loading=lazy}
 Die Auswahl des Designs `Outline` in den zuvor beschriebenen Einstellungen bewirkt das Hinzufügen eines Rahmens um das
 Icon. Die Breite des Rahmens kann über `$icon-outlined-width` eingestellt werden.
 

docs/pages/docs/configuration/theme/components.md renamed to docs/pages/configuration/theme/components.md

@@ -143,7 +143,7 @@ Flexbox-Anweisung `justify-content`[^2] mit den Optionen:
     teilweise mit denen von CSS-Flexbox überlagern, können die `center` und `space-*` Anweisungen weiterhin verwendet
     werden.
 
-    Der Header kann mit folgendem CSS im [Skin](../../../guides/skin/introduction.md) auf CSS-Grid gestellt werden:
+    Der Header kann mit folgendem CSS im [Skin](../../guides/skin/introduction.md) auf CSS-Grid gestellt werden:
     ```css
     header > .inside {
       display: grid;

docs/pages/docs/configuration/theme/fonts.md renamed to docs/pages/configuration/theme/fonts.md

@@ -250,7 +250,7 @@ In den nachfolgenden Abschnitten werden die nachfolgenden Einstellungen beschrie
 Wenn das [Global Spacing](#global-spacing-automatisch) nicht aktiviert wird, gelten folgende Regeln für den unteren
 Abstand (*Margin*) für Überschriften:
 
-![Headline Spacing normal](../../../../assets/configuration/headline/headline-spacing.png){loading=lazy}
+![Headline Spacing normal](../../../assets/configuration/headline/headline-spacing.png){loading=lazy}
 
 | Breakpoints           | Small                      | Medium                       | Large                        |
 |-----------------------|----------------------------|------------------------------|------------------------------|
@@ -280,7 +280,7 @@ Abstand (*Margin*) für Überschriften:
 dies oft die einzig notwendige Einstellung ist. Die nachfolgende Tabelle zeigt an, welche der Config-Variablen genutzt
 wird.
 
-![Headline Spacing global](../../../../assets/configuration/headline/headline-spacing-global.png){loading=lazy}
+![Headline Spacing global](../../../assets/configuration/headline/headline-spacing-global.png){loading=lazy}
 
 | Breakpoints                              | Small                       | Medium                       | Large                        |
 |------------------------------------------|-----------------------------|------------------------------|------------------------------|

docs/pages/docs/configuration/theme/form.md renamed to docs/pages/configuration/theme/form.md

@@ -25,12 +25,12 @@ Typische Breakpoints sind beispielsweise für
 definiert, um ein konsistentes und benutzerfreundliches Erlebnis auf unterschiedlichen Geräten zu gewährleisten. Im
 Gegensatz zu anderen CSS-Frameworks legt der ThemeManager auch Wert auf Bildschirme, die über Full HD (1920 x 1080)
 hinausgehen.
-![Breakpoints des ThemeManagers](../../../../assets/configuration/layout/grid-breakpoints.png){loading=lazy}
+![Breakpoints des ThemeManagers](../../../assets/configuration/layout/grid-breakpoints.png){loading=lazy}
 
 Der ThemeManager fügt sechs Breakpoints hinzu, die sich in den StyleManager-Einstellungen als Suffix der Konfigurationen
 widerspiegeln, zum Beispiel `(xs)`.
 
-![Breakpoints im StyleManager](../../../../assets/configuration/layout/stylemanager-breakpoints.png){loading=lazy}
+![Breakpoints im StyleManager](../../../assets/configuration/layout/stylemanager-breakpoints.png){loading=lazy}
 
 | Breakpoint | Bildschirmgröße |                    Geräte |
 |------------|----------------:|--------------------------:|
@@ -110,7 +110,7 @@ Diese Optionen erlauben die Auswahl eines [Breakpoints](#breakpoints) für die V
 und/oder
 rechte Spalte in der gleichen Reihe wie die Hauptspalte angezeigt werden.
 
-![Verhalten des Layouts](../../../../assets/configuration/layout/layout-behavior.png){loading=lazy}
+![Verhalten des Layouts](../../../assets/configuration/layout/layout-behavior.png){loading=lazy}
 
 Über `$layout-column-width-*` können die Breiten für die linke und rechte Spalte eingestellt werden. Mit
 `$layout-column-gutter` wird der Abstand zur Hauptspalte konfiguriert.
@@ -166,7 +166,7 @@ Hälfte des konfigurierten [Grid-Gutter](#grid). Möchte man diesen Abstand verg
 konfiguriert werden.
 
 <figure markdown>
-  ![Äußeres Padding von Artikeln](../../../../assets/configuration/layout/article-outer-padding.png){loading=lazy width="375"}
+  ![Äußeres Padding von Artikeln](../../../assets/configuration/layout/article-outer-padding.png){loading=lazy width="375"}
   <figcaption>Padding am Bildschirmrand</figcaption>
 </figure>
 
@@ -264,7 +264,7 @@ Ein Artikel dient hierbei immer als Grid-Container, der die Ausrichtung der Kind
 kann.
 Inhaltselemente lassen sich in das 12-Spalten-Raster einordnen.
 
-![12er Grid](../../../../assets/configuration/layout/grid-columns-12.png){loading=lazy}
+![12er Grid](../../../assets/configuration/layout/grid-columns-12.png){loading=lazy}
 !!! danger "Spaltenanzahl von 12 ($grid-columns)"
 
     Es wird nicht empfohlen, die Anzahl der Spalten von 12 zu ändern, da die Optionen des StyleManagers nicht

docs/pages/docs/configuration/theme/global.md renamed to docs/pages/configuration/theme/global.md

@@ -104,7 +104,7 @@ Kompilieren für alle Breakpoints gelten. Nach der Generierung erfolgt die Benen
 In `$display-properties` können die gewünschten
 [Display-Eigenschaften](https://developer.mozilla.org/en-US/docs/Web/CSS/display) nacheinander eingetragen werden.
 
-![Dynamisch generierte Display-Eigenschaften](../../../../assets/configuration/misc/display-properties.png){loading=lazy}
+![Dynamisch generierte Display-Eigenschaften](../../../assets/configuration/misc/display-properties.png){loading=lazy}
 
 ```
 none block flex table grid inline-block inline-flex inline-grid

docs/pages/docs/configuration/theme/header.md renamed to docs/pages/configuration/theme/header.md

@@ -12,7 +12,7 @@ Erscheinungsbild jeder Webseite nach Bedarf anzupassen.
 !!! info
 
     Jeder Bezeichner einer einzustellenden Variable entspricht der jeweiligen
-    [SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](../../../guides/skin/introduction.md)
+    [SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](../../guides/skin/introduction.md)
     abgerufen werden kann.
 
 ---
@@ -22,7 +22,7 @@ Erscheinungsbild jeder Webseite nach Bedarf anzupassen.
 In Version 2.0 des Contao ThemeManagers wurde die Konfiguration angepasst, sodass die hier dokumentierte Reihenfolge der
 Theme-Konfiguration mit der im Contao-Backend übereinstimmt.
 
-![Backend-Ansicht der Theme Konfiguration](../../../../assets/configuration/1_config.png)
+![Backend-Ansicht der Theme Konfiguration](../../../assets/configuration/1_config.png)
 
 <div class="grid cards" markdown>