Prepare docs

- Overview

docs/pages/docs/configuration/theme/overview.md

@@ -1,93 +1,84 @@
----
-title: Theme
----
+# Übersicht
 
-# Theme konfigurieren
+## Variablen des Frameworks
 
 Innerhalb der Theme-Konfiguration können sämtliche Variablen des CTM-Frameworks überschrieben werden, um das
 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](/pages/docs/configuration/skin)
+    abgerufen werden kann.
+
+## Konfigurationsstruktur
+
 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.
 
-> Jeder Bezeichner einer einzustellenden Variable entspricht der
-jeweiligen [SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](/configuration/skin.md)
-abgerufen werden kann.
+![Backend-Ansicht der Theme Konfiguration](../../../../assets/configuration/1_config.png)
 
-___
+<div class="grid cards" markdown>
 
-## Verfügbare Kapitel
+-   :octicons-globe-24: __[Global](/pages/docs/configuration/theme/global/)__ 
 
-- [Global](#global)
-- [Schriften](#schriften)
-- [Überschriften](#überschriften)
-- [Buttons](#buttons)
-- [Komponenten](#komponenten)
-- [Formular](#formular)
-- [Module](#module)
-- [Header](#header)
-- [Sonstiges](#sonstiges)
-- [Layout](#layout)
+    ---
 
-### Global
+    Die globalen Einstellungen betreffen grundlegende Aspekte wie Farben und Root-Schriftgröße.
 
-Die globalen Einstellungen betreffen grundlegende Aspekte wie Farben und Root-Schriftgröße.
+-   :octicons-typography-24: __[Schriften](/pages/docs/configuration/theme/fonts/)__
 
-- [Mehr über globale Einstellungen erfahren](/configuration/theme/global.md)
+    ---
 
-### Schriften
+    In diesem Abschnitt können die Typografie sowie Links angepasst werden.
 
-In diesem Abschnitt können die Typografie sowie Links angepasst werden.
+-   :octicons-heading-24: __[Überschriften](/pages/docs/configuration/theme/headings/)__
 
-- [Einstellungen zu Schriften vornehmen](/configuration/theme/fonts.md)
+    ---
 
-### Überschriften
+    Hier erfolgt die Konfiguration von Schriftgrößen, Farben und weiteren Optionen für Überschriften (*h1* - *h6*).
 
-Hier erfolgt die Konfiguration von Schriftgrößen, Farben und weiteren Optionen für Überschriften (*h1* - *h6*).
+-   :material-button-pointer: __[Buttons](/pages/docs/configuration/theme/buttons/)__
 
-- [Weitere Informationen zu Überschriften](/configuration/theme/headings.md)
+    ---
 
-### Buttons
+    Änderungen am Erscheinungsbild von Buttons und Links, für die der Button-Stil über den StyleManager festgelegt wurde.
 
-Änderungen am Erscheinungsbild von Buttons und Links, für die der Button-Stil über
-den [StyleManager](/tools/style-manager.md) festgelegt wurde.
+-   :octicons-table-24: __[Komponenten](/pages/docs/configuration/theme/components/)__
 
-- [Anleitung zur Konfiguration von Buttons](/configuration/theme/buttons.md)
+    ---
 
-### Komponenten
+    Dieser Bereich ermöglicht die Anpassung des Aussehens von Cards (Box), Linien, Tabellen und der Icon-Komponente.
 
-Dieser Bereich ermöglicht die Anpassung des Aussehens von Cards (Box), Linien, Tabellen und der Icon-Komponente.
+-   :material-form-textbox: __[Formular](/pages/docs/configuration/theme/form/)__
 
-- [Stilanpassungen für ThemeManager-Komponenten](/configuration/theme/components.md)
+    ---
 
-### Formular
+    Über die Formular-Konfiguration kann das gesamte Erscheinungsbild von `form`, `select`, `input`, `textarea`, `label`,
+    und `legend` festgelegt werden.
 
-Über die Formular-Konfiguration kann das gesamte Erscheinungsbild von `form`, `select`, `input`, `textarea`, `label`,
-und `legend` festgelegt werden.
+-   :material-navigation-variant-outline: __[Module](/pages/docs/configuration/theme/modules/)__
 
-- [Anleitung zur Konfiguration von Formularstilen](/configuration/theme/components.md)
+    ---
 
-### Module
+    Einstellungen für Navigationen und die Breadcrumb-Navigation.
 
-Einstellungen für Navigationen und die Breadcrumb-Navigation.
+-   :material-page-layout-header: __[Header](/pages/docs/configuration/theme/header/)__
 
-- [Konfiguration von Modul-Stilen](/configuration/theme/components.md)
+    ---
 
-### Header
+    Dieser Abschnitt behandelt die Konfiguration des `<header>`-Elements.
 
-Dieser Abschnitt behandelt die Konfiguration des `<header>`-Elements.
+-   :material-selection: __[Sonstiges](/pages/docs/configuration/theme/miscellaneous/)__
 
-- [Anpassung des Header-Layouts](/configuration/theme/header.md)
+    ---
 
-### Sonstiges
+    Einstellungen für Textauswahl-Farbe, Schatten und Seitenverhältnisse von Bildern.
 
-Einstellungen für Textauswahl-Farbe, Schatten und Seitenverhältnisse von Bildern.
+-   :material-view-grid-plus-outline: __[Layout](/pages/docs/configuration/theme/miscellaneous/)__
 
-- [Sonstige Anpassungen](/configuration/theme/miscellaneous.md)
+    ---
 
-### Layout
+    Alle Einstellungen, die das Layout des Frameworks beeinflussen. Hierzu gehören Breakpoints, das responsive Verhalten, Artikel-Abstände, das Grid, Paddings sowie Margins.
 
-Alle Einstellungen, die das Layout des Frameworks beeinflussen. Hierzu gehören Breakpoints, das responsive Verhalten,
-Artikel-Abstände, das Grid, Paddings sowie Margins.
 
-- [Einfussnahme auf das Layout der Website](/configuration/theme/layout.md)
+</div>